/* ============================================================
   STEMApply DESIGN SYSTEM (css/stemapply.css)
   ------------------------------------------------------------
   Loaded AFTER css/styles.css on every page. It layers the new
   brand on top of the existing design system rather than
   replacing it, so course, lesson, lab and dashboard pages keep
   working exactly as before.

   Scope
   - Global (all pages): brand tokens, display font, dark glass
     navigation, footer, buttons, focus ring, progress bar.
   - body.sa-dark pages (home, VR Labs, About, Pricing, Contact,
     Education, Industry, Beta): full dark theme via variable
     overrides, plus the cinematic components below.
   - App surfaces (catalogue, course, lesson, labs, dashboard,
     admin) stay light for readability of long lessons.

   Rollback: remove the <link> to this file (and the sa-* scripts)
   from a page and it renders as the pre-redesign STEM Academy
   page. Full snapshot: _snapshots/pre-stemapply-redesign_*.zip
   ============================================================ */

/* ---------- 0. tokens ---------- */
:root {
  --sa-void: #04060e;
  --sa-ink: #070c1a;
  --sa-panel: rgba(12, 19, 38, .72);
  --sa-line: rgba(130, 165, 255, .16);
  --sa-line-2: rgba(130, 165, 255, .30);
  --sa-text: #eaf1ff;
  --sa-dim: #9db0d3;
  --sa-cyan: #2de2ff;
  --sa-violet: #8b6bff;
  --sa-magenta: #ff4fd0;
  --sa-lime: #9dff6b;
  --sa-amber: #ffb23e;
  --sa-grad: linear-gradient(100deg, #2de2ff 0%, #8b6bff 52%, #ff4fd0 100%);
  --sa-ease: cubic-bezier(.2, .8, .2, 1);
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* re-point the legacy brand tokens so existing components pick up the new palette */
  --brand: #5b4bff;
  --brand-deep: #4637e8;
  --accent: #2de2ff;
  --navy: #05080f;
  --navy-2: #0b1226;
}

h1, h2, h3, .logo, .btn, .eyebrow, .kicker { font-family: var(--font-display); }
:focus-visible { outline: 3px solid rgba(45, 226, 255, .65); outline-offset: 2px; }
html { scroll-padding-top: 84px; }

.sa-skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: #fff; color: #05080f; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.sa-skip:focus { top: 12px; }

#saProgress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; background: var(--sa-grad); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------- 1. buttons ---------- */
.btn { border-radius: 12px; letter-spacing: -.005em; }
.btn-primary { background: linear-gradient(135deg, #5b4bff 0%, #3d6bff 100%); box-shadow: 0 8px 26px -8px rgba(91, 75, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-primary:hover { background: linear-gradient(135deg, #6d5dff 0%, #4f7bff 100%); box-shadow: 0 12px 34px -8px rgba(91, 75, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn-lg { padding: 15px 28px; font-size: 1.02rem; border-radius: 14px; }
.btn-glow { position: relative; isolation: isolate; }
.btn-glow::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: var(--sa-grad); z-index: -1; filter: blur(14px); opacity: .55; transition: opacity .25s; }
.btn-glow:hover::after { opacity: .9; }
.btn-outline { background: rgba(255, 255, 255, .04); color: #fff; border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(8px); }
.btn-outline:hover { border-color: var(--sa-cyan); color: var(--sa-cyan); background: rgba(45, 226, 255, .08); }

/* ---------- 2. navigation (dark glass, all pages) ---------- */
.nav { background: rgba(5, 8, 18, .95); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid rgba(130, 165, 255, .14); transition: background .3s ease, border-color .3s ease; }
body.sa-dark .nav:not(.scrolled) { background: rgba(5, 8, 18, .5); }
.nav.scrolled { background: rgba(5, 8, 18, .94); border-bottom-color: rgba(130, 165, 255, .22); }
.nav .logo { color: #fff; }
.nav .logo-mark, .footer .logo-mark { color: var(--sa-cyan); }
.logo span { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; font-size: 1.2rem; }
.logo span b, .footer .logo span b { background: var(--sa-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.logo:hover .logo-mark { filter: drop-shadow(0 0 8px rgba(45, 226, 255, .8)); }
.nav-links a, .nav-dd summary { color: #aebbd8; }
.nav-links a:hover, .nav-dd summary:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-links a.active, .nav-dd summary.active { color: var(--sa-cyan); background: rgba(45, 226, 255, .09); }
.nav-dd-menu { background: rgba(9, 14, 30, .96); border: 1px solid var(--sa-line-2); box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .8), 0 0 0 1px rgba(45, 226, 255, .06); backdrop-filter: blur(16px); }
.nav-dd-menu a, .nav-dd-btn { color: #d5e0f7; }
.nav-dd-menu a:hover, .nav-dd-btn:hover { background: rgba(45, 226, 255, .1); color: var(--sa-cyan); }
.nav-dd-label { color: #7d90b6; }
.nav-dd-label + .nav-dd-label, .nav-dd-menu a + .nav-dd-label { border-top-color: var(--sa-line); }
.nav-account summary { color: #fff; border-color: rgba(255, 255, 255, .22); }
.nav .btn-ghost { color: #dbe6ff; border-color: rgba(255, 255, 255, .2); }
.nav .btn-ghost:hover { border-color: var(--sa-cyan); color: var(--sa-cyan); }
.hamburger { color: #fff; }
.nav-link-vr { display: inline-flex; align-items: center; gap: 7px; }
.nav-link-vr i { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; color: #05080f; background: var(--sa-grad); }

/* ---------- 3. footer ---------- */
.footer { background: linear-gradient(180deg, #05080f 0%, #03050b 100%); border-top: 1px solid var(--sa-line); position: relative; overflow: hidden; }
.footer::before { content: ''; position: absolute; left: 50%; top: -240px; width: 900px; height: 360px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(91, 75, 255, .25), transparent); pointer-events: none; }
.footer .container { position: relative; }
.footer-legal { margin-top: 10px; font-size: .8rem; color: #6e82a6; }
.footer-col h4 { font-family: var(--font-display); color: #e8f0ff; }
.footer-col a:hover { color: var(--sa-cyan); }
.footer-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .78rem; color: #8fa3c7; border: 1px solid var(--sa-line); border-radius: 999px; padding: 5px 12px; }
.footer-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sa-amber); box-shadow: 0 0 10px var(--sa-amber); }

/* ---------- 4. dark theme (variable override) ---------- */
body.sa-dark {
  --ink: #eaf1ff; --muted: #9db0d3; --bg: #05080f; --surface: #0b1224; --line: rgba(130, 165, 255, .16);
  --card: #0b1224;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 34px -16px rgba(0, 0, 0, .8);
  --shadow-lift: 0 0 0 1px rgba(130, 165, 255, .3), 0 24px 56px -20px rgba(45, 226, 255, .3);
  background: var(--bg); color: var(--ink);
}
body.sa-dark a { color: #7fdcff; }
body.sa-dark .btn-primary, body.sa-dark .btn-primary:hover { color: #fff; }
body.sa-dark .btn-light { color: #05080f; }
body.sa-dark .btn-ghost { color: #e1ebff; }
body.sa-dark .btn-ghost:hover { color: var(--sa-cyan); border-color: var(--sa-cyan); }
body.sa-dark .section-alt { background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .008)); border-color: var(--sa-line); }
body.sa-dark .section-head .kicker, body.sa-dark .kicker { color: var(--sa-cyan); }
body.sa-dark .card, body.sa-dark .cat-tile, body.sa-dark .course-card, body.sa-dark .plan-card, body.sa-dark .form-card, body.sa-dark .faq details, body.sa-dark .pathway-side, body.sa-dark .pathway-tab, body.sa-dark .upcoming-card {
  background: linear-gradient(180deg, rgba(18, 28, 56, .72), rgba(9, 15, 32, .72)); border-color: var(--sa-line); backdrop-filter: blur(6px);
}
body.sa-dark .course-card:hover, body.sa-dark .cat-tile:hover { border-color: var(--sa-line-2); }
body.sa-dark .cat-tile .tile-count, body.sa-dark .pct { color: var(--sa-cyan); }
body.sa-dark .pathway-tab.on { background: var(--sa-grad); color: #05080f; border-color: transparent; }
body.sa-dark .fpill { background: rgba(255, 255, 255, .05); color: #cfdcf6; border-color: var(--sa-line); }
body.sa-dark .field input, body.sa-dark .field select, body.sa-dark .field textarea,
body.sa-dark .capture-form input, body.sa-dark .capture-form select { background: #09111f; color: var(--ink); border-color: var(--sa-line-2); }
body.sa-dark .email-capture { background: linear-gradient(120deg, rgba(91, 75, 255, .18), rgba(45, 226, 255, .1)); border-color: var(--sa-line-2); }
body.sa-dark .progress { background: rgba(255, 255, 255, .1); }
body.sa-dark .lab-prev { background: #080f20; border-color: var(--sa-line); }
body.sa-dark .chip.cat-science { background: rgba(139, 92, 246, .2); color: #c9b5ff; }
body.sa-dark .chip.cat-technology { background: rgba(34, 211, 238, .16); color: #7be9fb; }
body.sa-dark .chip.cat-engineering { background: rgba(255, 178, 62, .16); color: #ffd08a; }
body.sa-dark .chip.cat-mathematics { background: rgba(52, 211, 153, .16); color: #7ff0c0; }
body.sa-dark .chip-beta { background: rgba(52, 211, 153, .15); color: #7ff0c0; border-color: rgba(52, 211, 153, .35); }
body.sa-dark .chip-soon { background: rgba(255, 178, 62, .13); color: #ffd08a; border-color: rgba(255, 178, 62, .32); }
body.sa-dark .chip-lab { background: rgba(139, 107, 255, .16); color: #cdbfff; border-color: rgba(139, 107, 255, .35); }
body.sa-dark .level-advanced { background: rgba(255, 90, 90, .12); color: #ff9c9c; border-color: rgba(255, 90, 90, .3); }
body.sa-dark .step-num { background: var(--sa-grad); color: #05080f; }
body.sa-dark .plan-feats li { border-bottom-color: var(--sa-line); }
body.sa-dark .plan-featured { border-color: var(--sa-violet); box-shadow: 0 0 0 1px rgba(139, 107, 255, .5), 0 24px 60px -20px rgba(91, 75, 255, .55); }
body.sa-dark .demo-creds { background: #09111f; border-color: var(--sa-line-2); }
body.sa-dark .demo-creds code { background: #050a15; color: var(--ink); }
body.sa-dark .toast { background: #11204a; }

/* aurora behind legacy .hero blocks on dark pages */
body.sa-dark .hero { background: var(--sa-void); isolation: isolate; }
body.sa-dark .hero::after { content: ''; position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: -1; background:
  radial-gradient(600px 360px at 18% 20%, rgba(45, 226, 255, .22), transparent 70%),
  radial-gradient(680px 420px at 82% 8%, rgba(139, 107, 255, .32), transparent 70%),
  radial-gradient(520px 320px at 60% 90%, rgba(255, 79, 208, .14), transparent 70%);
  animation: saAurora 18s ease-in-out infinite alternate; }
@keyframes saAurora { to { transform: translate3d(3%, 4%, 0) scale(1.08); } }

/* ---------- 5. motion primitives ---------- */
.sa-js [data-reveal] { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity .8s ease calc(var(--d, 0ms) + var(--i, 0) * 80ms), transform .95s var(--sa-ease) calc(var(--d, 0ms) + var(--i, 0) * 80ms), filter .8s ease calc(var(--d, 0ms) + var(--i, 0) * 80ms); will-change: opacity, transform; }
.sa-js [data-reveal="left"] { transform: translate3d(-44px, 0, 0); }
.sa-js [data-reveal="right"] { transform: translate3d(44px, 0, 0); }
.sa-js [data-reveal="scale"] { transform: scale(.94); }
.sa-js [data-reveal="blur"] { filter: blur(10px); transform: translate3d(0, 14px, 0); }
.sa-js [data-reveal].is-in { opacity: 1; transform: none; filter: none; will-change: auto; }
.sa-js .sa-split .sa-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.sa-js .sa-split .sa-wi { display: inline-block; transform: translateY(112%); transition: transform 1s var(--sa-ease) calc(var(--i) * 70ms + var(--d, 0ms) + 100ms); }
.sa-js .sa-split.is-in .sa-wi { transform: none; }
.sa-reduced [data-reveal], .sa-reduced .sa-split .sa-wi { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }

.sa-glow { position: relative; }
.sa-glow::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(45, 226, 255, .16), transparent 55%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.sa-glow:hover::before { opacity: 1; }
[data-tilt] { transition: transform .22s ease-out, box-shadow .3s, border-color .3s; transform-style: preserve-3d; }

@keyframes saShift { to { background-position: 200% 0; } }
@keyframes saPulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes saFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes saSpin { to { transform: rotate(360deg); } }
@keyframes saDash { to { stroke-dashoffset: -60; } }
@keyframes saScan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
@keyframes saMarq { to { transform: translateX(-50%); } }

/* ---------- 6. shared components ---------- */
.sa-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.sa-section { position: relative; padding: clamp(72px, 10vw, 132px) 0; }
.sa-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 60px); }
.sa-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sa-kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 .78rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--sa-cyan); margin-bottom: 18px; }
.sa-kicker::before { content: ''; width: 28px; height: 1px; background: var(--sa-cyan); box-shadow: 0 0 10px var(--sa-cyan); }
.sa-h2 { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; color: #fff; }
.sa-lead { color: var(--sa-dim); font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.65; margin-top: 18px; }
.sa-grad { background: var(--sa-grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: saShift 9s linear infinite; }
.sa-pill { display: inline-flex; align-items: center; gap: 10px; font: 600 .78rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: #cfe9ff; background: rgba(45, 226, 255, .08); border: 1px solid rgba(45, 226, 255, .3); padding: 7px 16px 7px 12px; border-radius: 999px; backdrop-filter: blur(8px); }
.sa-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--sa-cyan); box-shadow: 0 0 12px var(--sa-cyan); animation: saPulse 2s ease-in-out infinite; }

/* status chips: the honesty system. Same words everywhere. */
.sa-st { display: inline-flex; align-items: center; gap: 7px; font: 700 .68rem var(--font-display); letter-spacing: .09em; text-transform: uppercase; padding: 4px 11px 4px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.sa-st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sa-st.st-live { color: #7ff0c0; border-color: rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .1); }
.sa-st.st-live::before { box-shadow: 0 0 8px currentColor; animation: saPulse 2.4s ease-in-out infinite; }
.sa-st.st-dev { color: #ffd08a; border-color: rgba(255, 178, 62, .5); background: rgba(255, 178, 62, .1); }
.sa-st.st-dev::before { box-shadow: 0 0 8px currentColor; }
.sa-st.st-planned { color: #b9c8ea; border-color: rgba(157, 176, 211, .4); border-style: dashed; background: rgba(157, 176, 211, .06); }
.sa-st.st-planned::before { background: transparent; border: 1.5px solid currentColor; }

/* ---------- 7. HOME hero ---------- */
.sa-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--sa-void); isolation: isolate; margin-top: -66px; }
.sa-hero-fallback { position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(700px 480px at 76% 42%, rgba(91, 75, 255, .35), transparent 68%),
  radial-gradient(520px 360px at 92% 80%, rgba(45, 226, 255, .18), transparent 70%),
  linear-gradient(rgba(130, 165, 255, .07) 1px, transparent 1px) 0 0 / 44px 44px,
  linear-gradient(90deg, rgba(130, 165, 255, .07) 1px, transparent 1px) 0 0 / 44px 44px, var(--sa-void); }
#saHeroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; opacity: 0; transition: opacity 1.2s ease; }
#saHeroCanvas.ready { opacity: 1; }
.sa-hero-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background:
  linear-gradient(90deg, rgba(4, 6, 14, .94) 0%, rgba(4, 6, 14, .72) 34%, rgba(4, 6, 14, 0) 62%),
  linear-gradient(0deg, var(--sa-void) 0%, rgba(4, 6, 14, 0) 24%),
  linear-gradient(180deg, rgba(4, 6, 14, .7) 0%, rgba(4, 6, 14, 0) 18%); }
.sa-hero-inner { position: relative; z-index: 3; width: 100%; padding-top: 150px; padding-bottom: 150px; }
.sa-hero-copy { max-width: 700px; }
.sa-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.7rem, 6.6vw, 5.7rem); line-height: 1.0; letter-spacing: -.04em; color: #fff; margin: 26px 0 0; }
.sa-hero-sub { color: #b4c4e4; font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.6; max-width: 580px; margin: 26px 0 0; }
.sa-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.sa-hero-meta { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 54px; }
.sa-hm b { display: block; font: 700 clamp(1.5rem, 2.6vw, 2.2rem) var(--font-display); color: #fff; letter-spacing: -.03em; }
.sa-hm span { font-size: .8rem; color: #8fa3c7; letter-spacing: .02em; }
.sa-hero-label { position: absolute; z-index: 3; right: 24px; bottom: 150px; font: 500 .68rem 'JetBrains Mono', monospace; letter-spacing: .06em; color: rgba(157, 176, 211, .75); text-align: right; max-width: 260px; line-height: 1.5; }
.sa-hero-label b { color: var(--sa-cyan); font-weight: 500; }

/* the learning loop strip pinned to the bottom of the hero */
.sa-loopbar { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--sa-line); background: linear-gradient(180deg, rgba(4, 6, 14, .2), rgba(4, 6, 14, .88)); backdrop-filter: blur(12px); }
.sa-loopbar ol { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.sa-loopbar li { position: relative; padding: 20px 16px 20px 0; display: flex; align-items: center; gap: 12px; color: #7d90b6; font: 600 .98rem var(--font-display); animation: saStep 12s linear infinite; animation-delay: calc(var(--k) * 2.4s - 2.4s); }
.sa-loopbar li::after { content: ''; position: absolute; right: 18px; top: 50%; width: 22px; height: 1px; background: var(--sa-line-2); }
.sa-loopbar li:last-child::after { display: none; }
.sa-loopbar li span { font: 500 .7rem 'JetBrains Mono', monospace; color: #55688f; }
.sa-loopbar li small { display: block; font: 400 .74rem var(--font); color: #6f83a8; margin-top: 2px; }
@keyframes saStep { 0%, 16% { color: #fff; text-shadow: 0 0 22px rgba(45, 226, 255, .7); } 20%, 100% { color: #7d90b6; text-shadow: none; } }
.sa-scrollcue { position: absolute; z-index: 4; left: 50%; bottom: 96px; transform: translateX(-50%); width: 22px; height: 36px; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 12px; }
.sa-scrollcue::after { content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--sa-cyan); animation: saFloat 1.8s ease-in-out infinite; }

/* ---------- 8. loop / steps ---------- */
.sa-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; counter-reset: s; }
.sa-step { position: relative; padding: 26px 22px 24px; border-radius: 20px; border: 1px solid var(--sa-line); background: linear-gradient(180deg, rgba(18, 28, 56, .72), rgba(9, 15, 32, .6)); overflow: hidden; }
.sa-step::before { counter-increment: s; content: '0' counter(s); font: 500 .74rem 'JetBrains Mono', monospace; color: var(--sa-cyan); letter-spacing: .1em; }
.sa-step h3 { font-size: 1.5rem; color: #fff; margin: 14px 0 8px; letter-spacing: -.02em; }
.sa-step p { color: var(--sa-dim); font-size: .92rem; }
.sa-step::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sa-grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--sa-ease); }
.sa-step:hover::after { transform: scaleX(1); }
.sa-step .ico { width: 44px; height: 44px; margin-top: 18px; color: var(--sa-cyan); }

/* ---------- 9. theory vs practice compare ---------- */
.sa-compare { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--sa-line-2); background: #060b18; aspect-ratio: 16 / 8.2; box-shadow: 0 40px 100px -40px rgba(45, 226, 255, .35); --pos: 50%; user-select: none; }
.sa-pane { position: absolute; inset: 0; padding: clamp(18px, 3vw, 40px); }
.sa-pane-theory { background: linear-gradient(180deg, #0a1126, #070c1c); clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 2; font-family: 'JetBrains Mono', monospace; }
.sa-pane-theory .tag, .sa-pane-practice .tag { position: absolute; top: 16px; font: 700 .7rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.sa-pane-theory .tag { left: 18px; color: #c9d6f2; background: rgba(255, 255, 255, .07); border: 1px solid var(--sa-line-2); }
.sa-pane-practice .tag { right: 18px; color: #05080f; background: var(--sa-cyan); }
.sa-pane-theory pre { margin-top: 38px; font-size: clamp(.68rem, 1.3vw, .98rem); line-height: 1.75; color: #9db6e6; white-space: pre-wrap; }
.sa-pane-theory pre em { color: #ff9ad8; font-style: normal; }
.sa-pane-theory pre u { text-decoration: none; color: #7fdcff; }
.sa-pane-theory .eq { font: 600 clamp(1.1rem, 2.6vw, 2rem) var(--font-display); color: #fff; margin-top: 18px; letter-spacing: -.01em; }
.sa-pane-practice { background: radial-gradient(600px 360px at 70% 40%, rgba(91, 75, 255, .28), transparent 70%), #050913; z-index: 1; }
.sa-pane-practice canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sa-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; z-index: 5; background: var(--sa-cyan); box-shadow: 0 0 22px var(--sa-cyan); pointer-events: none; }
.sa-compare-handle::after { content: '\2194'; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #05080f; border: 2px solid var(--sa-cyan); color: var(--sa-cyan); font: 700 1.2rem var(--font-display); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(45, 226, 255, .6); }
.sa-compare-range { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.sa-compare:focus-within .sa-compare-handle::after { outline: 3px solid #fff; outline-offset: 3px; }
.sa-compare-hint { text-align: center; margin-top: 16px; font-size: .84rem; color: #7d90b6; }

/* ---------- 10. ecosystem ---------- */
.sa-eco { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.sa-eco-card { grid-column: span 2; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 22px; border: 1px solid var(--sa-line); background: linear-gradient(160deg, rgba(20, 31, 62, .82), rgba(8, 13, 28, .78)); color: var(--sa-text); overflow: hidden; min-height: 280px; text-decoration: none; }
.sa-eco-card:nth-child(4), .sa-eco-card:nth-child(5) { grid-column: span 3; }
.sa-eco-card:hover { border-color: var(--sa-line-2); box-shadow: 0 30px 70px -30px rgba(91, 75, 255, .6); text-decoration: none; }
.sa-eco-card::after { content: ''; position: absolute; width: 260px; height: 260px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(closest-side, var(--c, rgba(91, 75, 255, .45)), transparent); opacity: .65; transition: opacity .4s, transform .6s; pointer-events: none; }
.sa-eco-card:hover::after { opacity: 1; transform: scale(1.2); }
.sa-eco-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; z-index: 1; }
.sa-eco-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); border: 1px solid var(--sa-line-2); color: var(--sa-cyan); }
.sa-eco-card h3 { font-size: 1.55rem; color: #fff; letter-spacing: -.02em; position: relative; z-index: 1; }
.sa-eco-card h3 em { font-style: normal; background: var(--sa-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sa-eco-card p { color: var(--sa-dim); font-size: .95rem; position: relative; z-index: 1; }
.sa-eco-card .sa-eco-detail { padding-right: 34px; font-size: .86rem; color: #7d90b6; margin-top: auto; border-top: 1px solid var(--sa-line); padding-top: 14px; }
.sa-eco-go { position: absolute; right: 24px; bottom: 22px; z-index: 1; color: var(--sa-cyan); font-weight: 700; transition: transform .25s; }
.sa-eco-card:hover .sa-eco-go { transform: translateX(5px); }

/* ---------- 11. VR teaser on home ---------- */
.sa-vrt { position: relative; border-radius: 30px; overflow: hidden; border: 1px solid var(--sa-line-2); background: radial-gradient(800px 480px at 80% 30%, rgba(139, 107, 255, .32), transparent 70%), radial-gradient(600px 400px at 10% 90%, rgba(45, 226, 255, .18), transparent 70%), #060a18; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 20px; padding: clamp(28px, 5vw, 64px); }
.sa-vrt-art { position: relative; aspect-ratio: 1.15; min-height: 280px; }
.sa-vrt-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sa-vrt h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
.sa-vrt ul { list-style: none; margin: 22px 0 28px; display: grid; gap: 10px; }
.sa-vrt li { display: flex; gap: 12px; color: #c4d2ee; font-size: .96rem; }
.sa-vrt li::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 9px; border-radius: 50%; background: var(--sa-cyan); box-shadow: 0 0 10px var(--sa-cyan); }
.sa-honest { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: #9db0d3; border-left: 2px solid var(--sa-amber); padding: 4px 0 4px 14px; margin-top: 22px; max-width: 520px; }
.sa-iso-pad { fill: rgba(45, 226, 255, .06); stroke: var(--sa-cyan); stroke-width: 1.2; }
.sa-iso-pad.p2 { stroke: var(--sa-violet); fill: rgba(139, 107, 255, .06); }
.sa-iso-pad.p3 { stroke: var(--sa-magenta); fill: rgba(255, 79, 208, .05); stroke-dasharray: 5 4; }
.sa-iso-line { fill: none; stroke: var(--sa-cyan); stroke-width: 1.4; stroke-dasharray: 6 10; animation: saDash 2.4s linear infinite; opacity: .8; }
.sa-iso-float { animation: saFloat 5s ease-in-out infinite; }

/* ---------- 12. audiences ---------- */
.sa-aud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sa-aud-card { position: relative; border-radius: 24px; padding: 34px 30px 30px; border: 1px solid var(--sa-line); background: linear-gradient(170deg, rgba(20, 31, 62, .8), rgba(8, 13, 28, .7)); display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.sa-aud-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--g, var(--sa-grad)); }
.sa-aud-card h3 { font-size: 1.7rem; color: #fff; letter-spacing: -.02em; }
.sa-aud-card .who { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sa-cyan); font-weight: 700; font-family: var(--font-display); }
.sa-aud-card ul { list-style: none; display: grid; gap: 9px; margin: 6px 0 12px; }
.sa-aud-card li { color: #b8c8e8; font-size: .94rem; padding-left: 22px; position: relative; }
.sa-aud-card li::before { content: '\2192'; position: absolute; left: 0; color: var(--sa-cyan); }
.sa-aud-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- 13. numbers + marquee ---------- */
.sa-nums { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--sa-line); border-radius: 24px; overflow: hidden; background: rgba(255, 255, 255, .02); }
.sa-num { padding: 34px 26px; border-right: 1px solid var(--sa-line); }
.sa-num:last-child { border-right: 0; }
.sa-num b { display: block; font: 700 clamp(2.4rem, 5vw, 4rem) var(--font-display); letter-spacing: -.04em; background: var(--sa-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.sa-num span { display: block; margin-top: 10px; color: var(--sa-dim); font-size: .92rem; }
.sa-marquee { overflow: hidden; border-block: 1px solid var(--sa-line); padding: 16px 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.sa-marquee div { display: flex; gap: 46px; width: max-content; animation: saMarq 40s linear infinite; font: 600 1.05rem var(--font-display); letter-spacing: .02em; color: #6f83a8; white-space: nowrap; }
.sa-marquee span::before { content: '\25C6'; color: var(--sa-violet); margin-right: 46px; font-size: .6em; vertical-align: middle; }

/* ---------- 14. closing CTA ---------- */
.sa-cta { position: relative; text-align: center; border-radius: 32px; padding: clamp(48px, 8vw, 110px) 24px; overflow: hidden; border: 1px solid var(--sa-line-2); background: radial-gradient(700px 340px at 50% 0%, rgba(91, 75, 255, .45), transparent 70%), radial-gradient(600px 300px at 50% 120%, rgba(45, 226, 255, .22), transparent 70%), #070c1c; }
.sa-cta h2 { font-size: clamp(2.2rem, 5.2vw, 4.2rem); }
.sa-cta p { max-width: 560px; margin: 20px auto 0; }
.sa-cta .sa-hero-cta { justify-content: center; }

/* ---------- 15. legacy home sections on the dark canvas ---------- */
body.sa-dark .section .section-head h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing: -.03em; color: #fff; }
body.sa-dark .section { padding: clamp(60px, 8vw, 100px) 0; }
body.sa-dark .lab-card { background: linear-gradient(180deg, rgba(18, 28, 56, .72), rgba(9, 15, 32, .6)); }
body.sa-dark .lab-card:hover { box-shadow: 0 20px 50px -20px rgba(45, 226, 255, .4); border-color: var(--sa-line-2); }

/* ---------- 16. page hero for secondary dark pages ---------- */
.sa-phero { position: relative; padding: 150px 0 80px; margin-top: -66px; overflow: hidden; isolation: isolate; background: var(--sa-void); }
.sa-phero::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(640px 380px at 80% 10%, rgba(139, 107, 255, .32), transparent 70%),
  radial-gradient(520px 320px at 10% 90%, rgba(45, 226, 255, .18), transparent 70%),
  linear-gradient(rgba(130, 165, 255, .06) 1px, transparent 1px) 0 0 / 46px 46px, linear-gradient(90deg, rgba(130, 165, 255, .06) 1px, transparent 1px) 0 0 / 46px 46px; mask-image: linear-gradient(180deg, #000 60%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); }
.sa-phero h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.04; letter-spacing: -.035em; color: #fff; margin-top: 22px; max-width: 900px; }
.sa-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sa-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sa-tile { padding: 28px; border-radius: 20px; border: 1px solid var(--sa-line); background: linear-gradient(170deg, rgba(20, 31, 62, .78), rgba(8, 13, 28, .7)); }
.sa-tile h3 { color: #fff; font-size: 1.25rem; margin-bottom: 8px; letter-spacing: -.015em; }
.sa-tile p { color: var(--sa-dim); font-size: .95rem; }
.sa-tile .n { font: 500 .74rem 'JetBrains Mono', monospace; color: var(--sa-cyan); letter-spacing: .1em; margin-bottom: 10px; display: block; }

/* ---------- 17. responsive ---------- */
@media (max-width: 1100px) {
  .sa-steps { grid-template-columns: repeat(2, 1fr); }
  .sa-eco { grid-template-columns: repeat(2, 1fr); }
  .sa-eco-card, .sa-eco-card:nth-child(4), .sa-eco-card:nth-child(5) { grid-column: span 1; }
  .sa-vrt { grid-template-columns: 1fr; }
  .sa-aud, .sa-grid3 { grid-template-columns: 1fr; }
  .sa-nums { grid-template-columns: repeat(2, 1fr); }
  .sa-num:nth-child(2) { border-right: 0; }
  .sa-num:nth-child(-n+2) { border-bottom: 1px solid var(--sa-line); }
}
@media (max-width: 860px) {
  .sa-hero-scrim { background: linear-gradient(180deg, rgba(4, 6, 14, .55) 0%, rgba(4, 6, 14, .82) 50%, var(--sa-void) 100%); }
  .sa-hero-inner { padding-top: 120px; padding-bottom: 190px; }
  .sa-hero-label { display: none; }
  .sa-loopbar ol { grid-template-columns: repeat(5, auto); overflow-x: auto; gap: 6px; padding: 0 16px; scrollbar-width: none; }
  .sa-loopbar li { padding: 14px 18px 14px 0; white-space: nowrap; }
  .sa-loopbar li small { display: none; }
  .sa-scrollcue { display: none; }
  .nav-links a, .nav-dd summary { color: #d5e0f7; }
  body.nav-open .nav-links { background: rgba(5, 8, 18, .98); border-bottom: 1px solid var(--sa-line-2); }
  .sa-compare { aspect-ratio: 4 / 5; }
  .sa-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sa-steps, .sa-eco { grid-template-columns: 1fr; }
  .sa-nums { grid-template-columns: 1fr 1fr; }
  .sa-num { padding: 24px 18px; }
  .sa-hero-meta { gap: 14px 24px; }
}

/* ---------- Enterprise: product switch + status lanes ---------- */
.sa-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sa-switch a { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--sa-line); background: rgba(14, 22, 46, .6); text-decoration: none; transition: border-color .2s, transform .2s; }
.sa-switch a:hover { border-color: var(--sa-cyan); transform: translateY(-2px); }
.sa-switch a:focus-visible { outline: 3px solid var(--sa-cyan); outline-offset: 3px; border-color: var(--sa-cyan); }
.sa-switch a.on { border-color: var(--sa-cyan); background: linear-gradient(170deg, rgba(45, 226, 255, .14), rgba(91, 75, 255, .12)); }
.sa-switch a.on b::after { content: ' \00b7  You are here'; color: var(--sa-cyan); font: 600 .72rem var(--font-body, inherit); }
.sa-switch b { color: #fff; font: 700 1rem var(--font-display); }
.sa-switch span { color: var(--sa-dim); font-size: .82rem; }
.sa-pilot .sa-step h3 { font-size: 1.15rem; }
.sa-lane { border-top: 3px solid var(--sa-line-2); }
.sa-lane.lane-today { border-top-color: #34d399; }
.sa-lane.lane-dev { border-top-color: #ffb23e; }
.sa-lane.lane-plan { border-top-style: dashed; border-top-color: #9db0d3; background: rgba(8, 13, 28, .4); }
.sa-ticks { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; gap: 8px; }
.sa-ticks li { color: var(--sa-dim); font-size: .92rem; padding-left: 20px; position: relative; }
.sa-ticks li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--sa-cyan); opacity: .7; }
.lane-plan .sa-ticks li::before { background: transparent; border: 1.5px solid #9db0d3; }
@media (max-width: 720px) { .sa-switch { grid-template-columns: 1fr; } }

/* ---------- 18. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sa-grad, .sa-pill i, .sa-st::before, .sa-loopbar li, .sa-scrollcue::after, .sa-iso-line, .sa-iso-float, .sa-marquee div, body.sa-dark .hero::after { animation: none !important; }
  .sa-loopbar li { color: #c9d6f2; }
  .btn, .sa-step::after, .sa-eco-card::after, .sa-switch a { transition: none !important; }
  .sa-switch a:hover { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 19. About page: credo, prose, pillars (issue #133) ---------- */
.about-credo { padding: 24px 0 8px; }
.about-credo-inner { max-width: 900px; margin: 0 auto; text-align: center; padding: 56px 8px; }
.about-credo-mark { display: block; font-family: var(--font-display); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sa-dim); margin-bottom: 22px; }
.about-credo-mark b { color: var(--sa-cyan); font-weight: 700; }
.about-credo-line { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1.15; letter-spacing: -.01em; color: var(--sa-text); margin: 0; }
.about-credo-line .hl { background: var(--sa-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about-credo-rule { display: block; width: 120px; height: 1px; margin: 30px auto 0; background: linear-gradient(90deg, transparent, var(--sa-cyan), transparent); }
.about-prose { max-width: 820px; }
.about-prose p { margin-bottom: 16px; }
.about-prose .about-note { color: var(--sa-dim); font-size: .92rem; border-top: 1px solid var(--sa-line); padding-top: 16px; margin-top: 24px; }
.about-lede { font-family: var(--font-display); color: var(--sa-cyan); margin-top: 10px; }
.about-pillars { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.about-pillars li { position: relative; padding: 24px 0 24px 56px; border-top: 1px solid var(--sa-line); }
.about-pillars h3 { margin: 0 0 6px; font-size: 1.12rem; }
.about-pillars p { margin: 0; color: var(--sa-dim); font-size: .95rem; }
.about-pn { position: absolute; left: 0; top: 26px; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--sa-cyan); letter-spacing: .06em; }
@media (max-width: 720px) {
  .about-pillars { grid-template-columns: 1fr; }
  .about-credo-inner { padding: 36px 4px; }
}