/* ==========================================================================
   OPTIVANCE — About Page Styles (Strictly < 250 lines)
   ========================================================================== */

/* Hero Section */
.about-hero {
  position: relative;
  background: radial-gradient(circle at 85% 45%, rgba(16, 185, 129, 0.22) 0%, transparent 55%),
              linear-gradient(135deg, #01291D 0%, #033D2B 50%, #012B1E 100%);
  padding: 56px 0 48px;
  overflow: hidden;
  border-bottom: 1px solid rgba(16, 185, 129, 0.15);
}
.about-hero__breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.7); margin-bottom: var(--sp-3); }
.about-hero__home-icon { width: 15px; height: 15px; color: #10B981; }
.about-hero__breadcrumb a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color var(--transition-fast); }
.about-hero__breadcrumb a:hover { color: #34D399; }
.about-hero__breadcrumb .sep { color: rgba(255, 255, 255, 0.4); }
.about-hero__breadcrumb .current { color: #FFFFFF; font-weight: 600; }
.about-hero__title { font-size: clamp(2.2rem, 4vw, 3.25rem); font-weight: 800; color: #FFFFFF; letter-spacing: -0.025em; margin-bottom: var(--sp-3); line-height: 1.15; }
.about-hero__subtitle { font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); max-width: 680px; margin: 0; }

/* Company Story & Metrics Grid */
.about-story { padding: 64px 0 72px; background: var(--color-bg); }
.about-story__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; }
.about-story__content h2 { font-size: clamp(1.75rem, 2.5vw, 2.25rem); font-weight: 800; color: var(--color-text); margin-bottom: 18px; letter-spacing: -0.02em; }
.about-story__content p { font-size: 0.95rem; line-height: 1.7; color: var(--color-text-muted); margin-bottom: 16px; }

.about-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.about-metric-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 16px; padding: 24px 20px; text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
[data-theme="light"] .about-metric-card { background: #FFFFFF; border-color: #E2E8F0; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.035); }
.about-metric-card:hover { transform: translateY(-3px); border-color: #059669; box-shadow: 0 10px 24px rgba(5, 150, 105, 0.12); }
.about-metric-val { font-size: 2rem; font-weight: 800; color: #059669; line-height: 1.1; margin-bottom: 6px; }
.about-metric-lbl { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); }

/* Principles Section */
.about-principles { padding: 64px 0 80px; background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.about-principles__header { text-align: center; max-width: 680px; margin: 0 auto 50px; }
.about-principles__eyebrow { color: #059669; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.04em; }
.about-principles__title { font-size: clamp(1.75rem, 3vw, 2.35rem); font-weight: 800; color: var(--color-text); margin-top: 6px; }
.about-principles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.about-principle-card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 18px; padding: 32px 28px; transition: all 0.25s ease;
}
[data-theme="light"] .about-principle-card { background: #FFFFFF; border-color: #E2E8F0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); }
.about-principle-card:hover { transform: translateY(-3px); border-color: #059669; box-shadow: 0 12px 28px rgba(5, 150, 105, 0.12); }
.about-principle-icon {
  width: 48px; height: 48px; border-radius: 12px; background: #059669;
  display: flex; align-items: center; justify-content: center; color: #FFFFFF; margin-bottom: 18px;
}
.about-principle-icon svg { width: 24px; height: 24px; }
.about-principle-title { font-size: 1.2rem; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.about-principle-desc { font-size: 0.925rem; line-height: 1.6; color: var(--color-text-muted); margin: 0; }

/* Team Section */
.about-team { padding: 64px 0 76px; background: var(--color-bg); }
.about-team__header { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.about-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.about-team-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 18px; padding: 30px 24px; text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
[data-theme="light"] .about-team-card { background: #FFFFFF; border-color: #E2E8F0; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.035); }
.about-team-card:hover { transform: translateY(-3px); border-color: #059669; }
.about-team-avatar {
  width: 80px; height: 80px; border-radius: 50%; background: rgba(5, 150, 105, 0.12);
  margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; color: #059669;
}
.about-team-avatar svg { width: 40px; height: 40px; }
.about-team-name { font-size: 1.15rem; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.about-team-role { font-size: 0.85rem; font-weight: 600; color: #059669; margin-bottom: 12px; }
.about-team-bio { font-size: 0.875rem; line-height: 1.55; color: var(--color-text-muted); margin: 0; }

/* Responsive */
@media (max-width: 980px) {
  .about-story__grid { grid-template-columns: 1fr; }
  .about-principles-grid { grid-template-columns: 1fr; }
  .about-team-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}