/* ══════════════════════════════════════════════════════════════
   About Page Styles - StatsAlpha Brand Compliant
   ══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   Hero Section
   Always-dark gradient — intentionally theme-independent
   ──────────────────────────────────────────────────────────── */
.about-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #f8fafc;
  padding: 5rem 0 4rem;
}

.about-hero .lead {
  color: #94a3b8;
}

/* ────────────────────────────────────────────────────────────
   Section Headings
   ──────────────────────────────────────────────────────────── */
.about-section-heading {
  color: var(--bs-body-color);
}

/* ────────────────────────────────────────────────────────────
   Divider
   ──────────────────────────────────────────────────────────── */
.about-divider {
  border-color: var(--bs-border-color);
}

/* ────────────────────────────────────────────────────────────
   Independence Box
   ──────────────────────────────────────────────────────────── */
.about-independence {
  background: var(--surface-0);
  border: 1px solid var(--bs-border-color);
  border-left: 4px solid var(--bs-primary);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 3rem;
}

.about-independence h5 {
  color: var(--bs-body-color);
}

/* ────────────────────────────────────────────────────────────
   Dark Mode Adjustments
   ──────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .about-independence {
  background: var(--surface-1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}