:root {
  --bg: #020304;
  --line: rgba(126, 213, 245, 0.24);
  --line-soft: rgba(255, 255, 255, 0.16);
  --text: #f4f8fb;
  --muted: #9aa9b3;
  --accent: #10a7df;
  --accent-light: #c9f2ff;
  --gold: #d7ae62;
  --radius: 8px;
  --title: "Big Shoulders Display", Impact, sans-serif;
  --body: "Funnel Display", "Segoe UI", sans-serif;
}

html[data-theme="mef"] { --accent: #ed7fa2; --accent-light: #ffd0df; --line: rgba(237, 127, 162, 0.28); }
html[data-theme="les"] { --accent: #86db00; --accent-light: #d9ff9a; --line: rgba(134, 219, 0, 0.28); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: radial-gradient(circle at 84% 2%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 25rem), linear-gradient(118deg, transparent 0 37%, color-mix(in srgb, var(--accent) 7%, transparent) 37% 38%, transparent 38% 100%), var(--bg); font-family: var(--body); }
a { color: inherit; text-decoration: none; }
p { margin: 0; line-height: 1.62; }
.onboarding { width: min(100%, 920px); margin: 0 auto; padding: 22px clamp(14px, 4vw, 28px) 72px; }
.hero, .section { border-bottom: 1px solid var(--line-soft); padding: clamp(26px, 5vw, 46px) 0; scroll-margin-top: 24px; }
.program-mark { min-height: 54px; margin-bottom: 26px; }
.program-mark img { display: block; width: min(280px, 72vw); max-height: 100px; object-fit: contain; object-position: left center; }
.program-mark--brand { display: flex; width: fit-content; max-width: min(100%, 420px); padding: 10px 14px; border-radius: var(--radius); background: #fff; }
.program-mark--brand img { width: 100%; max-width: 390px; height: auto; max-height: 90px; object-position: center; }
.eyebrow, .section-number, .step-label, .stats span { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: var(--title); letter-spacing: 0; line-height: .98; text-transform: uppercase; }
h1 { max-width: 850px; margin-top: 8px; font-size: clamp(42px, 8vw, 78px); }
h2 { margin-top: 8px; font-size: clamp(34px, 6vw, 58px); }
h3 { margin-top: 4px; font-size: clamp(24px, 4vw, 36px); }
.lead, .section > p:not(.section-number), .step p:not(.step-label), details p { max-width: 780px; color: var(--muted); }
.lead { margin-top: 18px; font-size: 18px; }
.stats, .feature-grid { display: grid; gap: 10px; }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; }
.stats article, .feature-grid article { border: 1px solid var(--line-soft); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); padding: 16px; box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.stats strong { display: block; font-family: var(--title); font-size: clamp(34px, 5vw, 52px); line-height: .92; text-transform: uppercase; }
.stats p, .feature-grid p { margin-top: 8px; color: var(--muted); }
.stats.small strong { font-size: clamp(28px, 4vw, 42px); }
.anchor-menu { display: grid; gap: 12px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.anchor-menu a { display: block; padding: 16px 18px; color: #080b0d; border-radius: var(--radius); background: linear-gradient(90deg, #f7f9fb, var(--accent-light)); font-weight: 900; text-align: center; text-transform: uppercase; transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.step { margin-top: 28px; }
.button { display: block; margin-top: 18px; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); font-weight: 800; text-align: center; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.button:hover, .anchor-menu a:hover { transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 16%, transparent); }
.button:hover { border-color: var(--gold); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), rgba(215,174,98,.08)); }
.anchor-menu a:hover { background: linear-gradient(90deg, #fff, var(--accent-light)); }
.button:focus-visible, .anchor-menu a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.video-frame { display: grid; min-height: clamp(190px, 38vw, 340px); margin-top: 18px; place-items: center; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; color: rgba(244,248,251,.42); background: linear-gradient(135deg, transparent 0 48%, color-mix(in srgb, var(--accent) 9%, transparent) 48% 52%, transparent 52%), #050607; font-weight: 800; text-align: center; box-shadow: 0 18px 46px rgba(0,0,0,.28); }
.video-frame--embed { aspect-ratio: 16 / 9; min-height: 0; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
.feature-grid strong { display: block; font-size: 18px; }
details { border: 1px solid var(--line-soft); border-radius: var(--radius); margin-top: 10px; background: rgba(255,255,255,.025); overflow: hidden; }
summary { cursor: pointer; padding: 14px 16px; font-weight: 800; }
details p { padding: 0 16px 16px; }
strong { color: var(--text); }
@media (max-width: 640px) { .stats, .feature-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button, .anchor-menu a { transition: none; } }