/* ══════════════════════════════════════════════════════════════
   about-apple.css  —  Apple-inspired design for about.html
   Gold/purple → Apple blue  |  Serif → System font
══════════════════════════════════════════════════════════════ */

/* ── POLICE SYSTÈME ── */
html, body, button, input,
.btn-primary, .btn-secondary, .btn-nav-cta,
.nav-name, .nav-link, .section-label, .section-title,
.stat-label, .value-title, .value-desc,
.tech-card-label, .tech-card-sub, .tl-event, .tl-desc,
.footer-name, .footer-tagline, .footer-col-title {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Helvetica Neue', 'Segoe UI', Arial, sans-serif !important;
}

/* ── CSS VARIABLES ── */
:root {
  --gold:        #0a84ff;
  --gold-lt:     #409cff;
  --gold-dim:    rgba(10,132,255,.2);
  --gold-pale:   rgba(10,132,255,.07);
  --purple:      #0a84ff;
  --purple-lt:   #409cff;
  --purple-dim:  rgba(10,132,255,.2);
  --purple-pale: rgba(10,132,255,.07);
}

/* ── BODY / HTML ── */
html { background: #000 !important; color: #f5f5f7 !important; }
body { background: #000 !important; }

body::after {
  background:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(10,132,255,.1) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 90% 85%, rgba(10,132,255,.04) 0%, transparent 55%) !important;
}

/* ── NAV ── */
.nav {
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom-color: rgba(255,255,255,.1) !important;
}
.nav-gem  { color: #fff !important; filter: none !important; }
.nav-name { color: #fff !important; }
.nav-name b { color: #fff !important; }

.btn-nav-cta {
  background: #0a84ff !important;
  border-radius: 980px !important;
  box-shadow: 0 4px 16px rgba(10,132,255,.35) !important;
}
.btn-nav-cta:hover {
  background: #409cff !important;
  box-shadow: 0 6px 22px rgba(10,132,255,.5) !important;
}

/* ── HERO ── */
.eyebrow {
  background: rgba(10,132,255,.1) !important;
  border-color: rgba(10,132,255,.28) !important;
  color: #409cff !important;
}
.hero-title em { color: #409cff !important; }
.hero-cta {
  background: #0a84ff !important;
  border-radius: 980px !important;
  box-shadow: 0 6px 28px rgba(10,132,255,.42) !important;
}
.hero-cta:hover {
  background: #409cff !important;
  box-shadow: 0 10px 36px rgba(10,132,255,.56) !important;
}

/* ── STATS ── */
.stat-num { color: #409cff !important; }

/* ── SECTION LABEL ── */
.section-label { color: #409cff !important; }
.section-label::before { background: #409cff !important; }
.section-title em { color: #409cff !important; }

/* ── MISSION VISUAL ── */
.mission-visual {
  background: linear-gradient(135deg, rgba(10,132,255,.1) 0%, rgba(10,132,255,.04) 100%) !important;
}
.mv-line:nth-child(1)::after { background: linear-gradient(90deg, #0a84ff, #409cff) !important; }
.mv-line:nth-child(2)::after { background: linear-gradient(90deg, #0a84ff, #409cff) !important; }
.mv-line:nth-child(4)::after { background: linear-gradient(90deg, #0a84ff, #409cff) !important; }
.mv-line:nth-child(5)::after { background: linear-gradient(90deg, #0a84ff, #409cff) !important; }

/* ── VALUE CARDS ── */
.value-card:hover { border-color: rgba(10,132,255,.35) !important; }
.value-icon.purple {
  background: rgba(10,132,255,.12) !important;
  border-color: rgba(10,132,255,.28) !important;
}
.value-icon.gold {
  background: rgba(10,132,255,.1) !important;
  border-color: rgba(10,132,255,.25) !important;
}
.value-icon.cyan {
  background: rgba(10,132,255,.08) !important;
  border-color: rgba(10,132,255,.2) !important;
}

/* ── TECH CARDS ── */
.tech-card-tag {
  color: #409cff !important;
  background: rgba(10,132,255,.1) !important;
  border-color: rgba(10,132,255,.2) !important;
}

/* ── TIMELINE ── */
.timeline::before {
  background: linear-gradient(180deg, #0a84ff 0%, #409cff 50%, rgba(255,255,255,.05) 100%) !important;
}
.tl-item::before {
  background: #0a84ff !important;
  box-shadow: 0 0 0 2px #0a84ff !important;
}
.tl-year { color: #409cff !important; }

/* ── CTA SECTION ── */
.cta-card {
  background: linear-gradient(135deg, rgba(10,132,255,.1) 0%, rgba(10,132,255,.04) 100%) !important;
  border-color: rgba(10,132,255,.25) !important;
}
.cta-card::before {
  background: radial-gradient(circle, rgba(10,132,255,.18) 0%, transparent 70%) !important;
}

/* ── BUTTONS ── */
.btn-primary {
  background: #0a84ff !important;
  border-radius: 980px !important;
  box-shadow: 0 6px 24px rgba(10,132,255,.4) !important;
}
.btn-primary:hover {
  background: #409cff !important;
  box-shadow: 0 10px 32px rgba(10,132,255,.55) !important;
}

/* ── FOOTER ── */
.footer { background: #1c1c1e !important; border-top-color: rgba(255,255,255,.07) !important; }
.footer-gem  { color: #fff !important; }
.footer-name { color: #fff !important; }
.footer-name b { color: #fff !important; }
.footer-col-links a:hover { color: #409cff !important; }
.footer-bottom-links a:hover { color: #409cff !important; }

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE
══════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --gold:      #0071e3;
  --gold-lt:   #0077ed;
  --gold-dim:  rgba(0,113,227,.18);
  --purple:    #0071e3;
  --purple-lt: #0077ed;
  --purple-dim: rgba(0,113,227,.15);
}

html[data-theme="light"] html { background: #f5f5f7 !important; color: #1d1d1f !important; }
html[data-theme="light"] body { background: #f5f5f7 !important; }

html[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(0,113,227,.06) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 90% 85%, rgba(0,113,227,.03) 0%, transparent 55%) !important;
}

html[data-theme="light"] .nav {
  background: rgba(245,245,247,.88) !important;
  border-bottom-color: rgba(0,0,0,.1) !important;
}
html[data-theme="light"] .nav-gem  { color: #1d1d1f !important; filter: none !important; }
html[data-theme="light"] .nav-name { color: #1d1d1f !important; }
html[data-theme="light"] .nav-name b { color: #1d1d1f !important; }
html[data-theme="light"] .nav-link { color: rgba(0,0,0,.45) !important; }
html[data-theme="light"] .nav-link:hover { color: #1d1d1f !important; }

html[data-theme="light"] .btn-nav-cta {
  background: #0071e3 !important;
  box-shadow: 0 4px 16px rgba(0,113,227,.3) !important;
}
html[data-theme="light"] .btn-nav-cta:hover {
  background: #0077ed !important;
  box-shadow: 0 6px 22px rgba(0,113,227,.45) !important;
}

html[data-theme="light"] .eyebrow {
  background: rgba(0,113,227,.08) !important;
  border-color: rgba(0,113,227,.22) !important;
  color: #0071e3 !important;
}
html[data-theme="light"] .hero-title em { color: #0071e3 !important; }
html[data-theme="light"] .hero-cta {
  background: #0071e3 !important;
  box-shadow: 0 6px 28px rgba(0,113,227,.35) !important;
}
html[data-theme="light"] .hero-cta:hover {
  background: #0077ed !important;
  box-shadow: 0 10px 36px rgba(0,113,227,.5) !important;
}

html[data-theme="light"] .stat-num { color: #0071e3 !important; }

html[data-theme="light"] .section-label { color: #0071e3 !important; }
html[data-theme="light"] .section-label::before { background: #0071e3 !important; }
html[data-theme="light"] .section-title em { color: #0071e3 !important; }

html[data-theme="light"] .mission-visual {
  background: linear-gradient(135deg, rgba(0,113,227,.07) 0%, rgba(0,113,227,.03) 100%) !important;
}
html[data-theme="light"] .mv-line:nth-child(1)::after { background: linear-gradient(90deg, #0071e3, #0077ed) !important; }
html[data-theme="light"] .mv-line:nth-child(2)::after { background: linear-gradient(90deg, #0071e3, #0077ed) !important; }
html[data-theme="light"] .mv-line:nth-child(4)::after { background: linear-gradient(90deg, #0071e3, #0077ed) !important; }
html[data-theme="light"] .mv-line:nth-child(5)::after { background: linear-gradient(90deg, #0071e3, #0077ed) !important; }

html[data-theme="light"] .value-card:hover { border-color: rgba(0,113,227,.3) !important; }
html[data-theme="light"] .value-icon.purple {
  background: rgba(0,113,227,.08) !important;
  border-color: rgba(0,113,227,.2) !important;
}
html[data-theme="light"] .value-icon.gold {
  background: rgba(0,113,227,.07) !important;
  border-color: rgba(0,113,227,.18) !important;
}
html[data-theme="light"] .value-icon.cyan {
  background: rgba(0,113,227,.06) !important;
  border-color: rgba(0,113,227,.15) !important;
}

html[data-theme="light"] .tech-card-tag {
  color: #0071e3 !important;
  background: rgba(0,113,227,.08) !important;
  border-color: rgba(0,113,227,.18) !important;
}

html[data-theme="light"] .timeline::before {
  background: linear-gradient(180deg, #0071e3 0%, #0077ed 50%, rgba(15,23,42,.1) 100%) !important;
}
html[data-theme="light"] .tl-item::before {
  background: #0071e3 !important;
  border-color: #f5f5f7 !important;
  box-shadow: 0 0 0 2px #0071e3 !important;
}
html[data-theme="light"] .tl-year { color: #0071e3 !important; }

html[data-theme="light"] .cta-card {
  background: linear-gradient(135deg, rgba(0,113,227,.07) 0%, rgba(0,113,227,.03) 100%) !important;
  border-color: rgba(0,113,227,.2) !important;
}
html[data-theme="light"] .cta-card::before {
  background: radial-gradient(circle, rgba(0,113,227,.12) 0%, transparent 70%) !important;
}

html[data-theme="light"] .btn-primary {
  background: #0071e3 !important;
  box-shadow: 0 6px 24px rgba(0,113,227,.3) !important;
}
html[data-theme="light"] .btn-primary:hover {
  background: #0077ed !important;
  box-shadow: 0 10px 32px rgba(0,113,227,.45) !important;
}

html[data-theme="light"] .footer { background: #eef1f8 !important; border-top-color: rgba(0,0,0,.07) !important; }
html[data-theme="light"] .footer-gem  { color: #1d1d1f !important; }
html[data-theme="light"] .footer-name { color: #1d1d1f !important; }
html[data-theme="light"] .footer-name b { color: #1d1d1f !important; }
html[data-theme="light"] .footer-tagline { color: rgba(0,0,0,.4) !important; }
html[data-theme="light"] .footer-col-links a { color: rgba(0,0,0,.45) !important; }
html[data-theme="light"] .footer-col-links a:hover { color: #0071e3 !important; }
html[data-theme="light"] .footer-bottom-links a { color: rgba(0,0,0,.4) !important; }
html[data-theme="light"] .footer-bottom-links a:hover { color: #0071e3 !important; }