/* ===== About Page ===== */
.about-hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #0F172A 100%);
  padding: 5rem 0 4rem;
  color: white;
  text-align: center;
}
.about-hero .container { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; }
.about-hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(0,102,255,0.15); border: 1px solid rgba(0,102,255,0.3);
  padding: 0.5rem 1rem; border-radius: 50px; font-size: 0.85rem;
  color: #60A5FA; margin-bottom: 1.5rem;
}
.about-hero h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.2; }
.about-hero p { font-size: 1.1rem; color: #94A3B8; line-height: 1.7; max-width: 600px; margin: 0 auto; }

.about-content { padding: 4rem 0; }
.about-content .container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

.about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  margin-bottom: 4rem; align-items: center;
}
.about-grid-text h2 { font-size: 1.75rem; font-weight: 700; color: #1E293B; margin-bottom: 1rem; }
.about-grid-text p { color: #64748B; line-height: 1.8; font-size: 1rem; }

.about-values {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  margin-top: 3rem;
}
.about-value-card {
  background: white; border: 1px solid #E2E8F0; border-radius: 16px;
  padding: 2rem; text-align: center; transition: all 0.3s ease;
}
.about-value-card:hover { border-color: #0066FF; box-shadow: 0 8px 30px rgba(0,102,255,0.1); transform: translateY(-4px); }
.about-value-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, #0066FF 0%, #00C48C 100%);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem; color: white; font-size: 1.25rem;
}
.about-value-card h3 { font-size: 1.1rem; font-weight: 700; color: #1E293B; margin-bottom: 0.5rem; }
.about-value-card p { color: #64748B; font-size: 0.9rem; line-height: 1.6; }

.about-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 20px; padding: 3rem 2rem; margin: 3rem 0; text-align: center;
}
.about-stat-item h3 { font-size: 2rem; font-weight: 800; color: #60A5FA; margin-bottom: 0.25rem; }
.about-stat-item p { color: #94A3B8; font-size: 0.85rem; }

@media (max-width: 768px) {
  .about-hero h1 { font-size: 1.75rem; }
  .about-grid { grid-template-columns: 1fr; }
  .about-values { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
}