/* ============================================================
   Training Mode — trainingmode.co
   Recreated from design handoff (Landing v2 / Features / FAQ)
   Tokens: see README "Design Tokens" — values are lifted 1:1.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:#05040A}

:root{
  --bg:#05040A;
  --panel:#08060D;
  --card:rgba(20,16,33,.5);
  --card-deep:rgba(12,9,22,.72);
  --purple:#7C3AED;
  --purple-hi:#9D5CFF;
  --purple-lt:#cdb8ff;
  --purple-max:#c084fc;
  --gold:#F4B829;
  --teal:#5eead4;
  --red:#e23a3a;
  --red-lt:#ff6b6b;
  --red-lt2:#ff8b8b;
  --blue:#4F7BFF;
  --green:#4ade80;
  --text:#ECEAF4;
  --muted:#9A93B3;
  --muted2:#bdb6d0;
  --muted3:#c9c2da;
  --dim:#6B6385;
  --dim2:#8076a6;
  --hairline:rgba(255,255,255,.07);
  --mono:'Space Mono',monospace;
  --disp:'Orbitron',sans-serif;
  --sans:'Chakra Petch',sans-serif;
  --raj:'Rajdhani',sans-serif;
}

@keyframes tm-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes tm-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes tm-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@keyframes tm-glow{0%,100%{box-shadow:0 0 24px rgba(124,58,237,.35)}50%{box-shadow:0 0 46px rgba(124,58,237,.7)}}

html,body{overflow-x:clip}
body{font-family:var(--sans);color:var(--text);min-height:100vh}
img{max-width:100%}
a{color:var(--purple-hi)}
a:hover{color:var(--gold)}
a,button{-webkit-tap-highlight-color:transparent}

/* app-like pressed feedback on touch devices */
@media (hover:none){
  .btn-hero:active,.nav__cta:active,.btn-primary:active,.btn-cta-lg:active,.btn-invest:active,
  .btn-sponsor:active,.plan__btn:active,.rail__cta:active,.btn-teal:active,.btn-outline:active{transform:scale(.96);transition:transform .08s ease}
  .mode-card:active,.fcard:active,.perk:active,.persona:active{transform:scale(.985);transition:transform .08s ease}
  .faq-item__q:active{background:rgba(157,92,255,.08)}
}

/* respect users who turn off motion (also saves battery) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.15s !important}
  html{scroll-behavior:auto}
}

/* fixed page background */
.site-bg{position:fixed;inset:0;background:linear-gradient(rgba(5,4,10,.74),rgba(5,4,10,.74)),url('../assets/tm-bg.webp') center center/cover no-repeat;z-index:0;pointer-events:none}
.page-sub .site-bg{background:linear-gradient(rgba(5,4,10,.8),rgba(5,4,10,.86)),url('../assets/tm-bg.webp') center center/cover no-repeat}

.halo{position:relative;z-index:1;width:100%;background:radial-gradient(1100px 700px at 50% -5%,rgba(124,58,237,.16),transparent 60%),transparent;min-height:100vh}
.shell{position:relative;max-width:1320px;margin:0 auto;background:rgba(8,6,13,.55);box-shadow:0 0 120px rgba(124,58,237,.18);overflow:clip}

/* page transition overlay */
.px-overlay{position:fixed;inset:0;z-index:9999;background:#05040A;opacity:0;transition:opacity .22s ease;pointer-events:none}
.px-overlay.px-out{opacity:1;transition-duration:.16s;pointer-events:auto}
.px-overlay.px-in{opacity:1;transition:none}

/* ---------------- nav ---------------- */
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 40px;border-bottom:1px solid var(--hairline);position:sticky;top:0;z-index:30;background:rgba(8,6,13,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav__logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav__logo img{height:54px;width:auto;display:block}
.nav__links{display:flex;align-items:center;gap:30px;font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--muted)}
.nav__links a{color:var(--muted);text-decoration:none;transition:color .2s ease}
.nav__links a:hover{color:var(--text)}
.nav__links a.is-current{color:var(--text)}
.nav__cta{display:flex;align-items:center;gap:10px;background:var(--purple);color:#fff;font-weight:700;letter-spacing:2px;font-size:13px;padding:11px 20px;border-radius:4px;box-shadow:0 0 22px rgba(124,58,237,.55);text-decoration:none;transition:background .2s ease}
.nav__cta:hover{background:var(--purple-hi);color:#fff}
.nav__burger{display:none;background:rgba(20,16,33,.5);border:1px solid rgba(255,255,255,.18);border-radius:8px;color:var(--text);width:42px;height:42px;font-size:20px;line-height:1;padding:0;cursor:pointer;align-items:center;justify-content:center}
.nav__drawer{display:none}

/* ---------------- shared type ---------------- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:5px;margin-bottom:12px}
.eyebrow--purple{color:var(--purple-hi)}
.eyebrow--gold{color:var(--gold)}
.eyebrow--teal{color:var(--teal)}
.eyebrow--red{color:var(--red-lt)}

.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--purple);color:#fff;font-weight:700;letter-spacing:2px;font-size:14px;padding:15px 30px;border-radius:5px;box-shadow:0 0 24px rgba(124,58,237,.5);text-decoration:none;transition:box-shadow .25s ease,background .25s ease}
.btn-primary:hover{background:var(--purple-hi);color:#fff;box-shadow:0 0 38px rgba(244,184,41,.8)}

/* ---------------- footer ---------------- */
.footer{border-top:1px solid var(--hairline);padding:26px 40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--dim)}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--gold)}
.footer__right{color:var(--muted)}

/* ============================================================
   LANDING
   ============================================================ */

/* ---- hero ---- */
.hero{position:relative;padding:64px 40px 70px;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 76px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 calc(100% - 76px),transparent 100%);
  background:
    radial-gradient(900px 520px at 78% 30%, rgba(124,58,237,.30), transparent 70%),
    radial-gradient(700px 500px at 12% 90%, rgba(43,87,230,.20), transparent 70%),
    #08060D}
.hero__photo{position:absolute;inset:0;background-image:url('../assets/hero-bg.webp');background-size:cover;background-position:center 38%;opacity:.6;-webkit-mask-image:radial-gradient(125% 108% at 50% 32%,#000 42%,transparent 92%);mask-image:radial-gradient(125% 108% at 50% 32%,#000 42%,transparent 92%)}
.hero__vignette{position:absolute;inset:0;background:radial-gradient(78% 74% at 50% 42%,transparent 26%,#08060D 90%),linear-gradient(0deg,#08060D 0%,rgba(8,6,13,.6) 14%,transparent 42%)}
.hero__dots{position:absolute;inset:0;background-image:radial-gradient(rgba(124,58,237,.16) 1px, transparent 1.4px);background-size:22px 22px;opacity:.35}
.hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(157,92,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(157,92,255,.10) 1px,transparent 1px);background-size:46px 46px;opacity:.55;-webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);mask-image:linear-gradient(180deg,#000,transparent 78%);pointer-events:none}
.hero__goldline{position:absolute;left:40px;right:40px;bottom:80px;height:2px;z-index:1;background:linear-gradient(90deg,transparent,rgba(244,184,41,.12) 10%,#F4B829 50%,rgba(244,184,41,.12) 90%,transparent);box-shadow:0 0 26px 4px rgba(244,184,41,.45)}
.hero__goldglow{position:absolute;left:40px;right:40px;bottom:80px;height:130px;z-index:1;background:linear-gradient(180deg,rgba(244,184,41,.12),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);pointer-events:none}
.hero__layout{position:relative;z-index:2;display:grid;grid-template-columns:1fr 340px 1fr;gap:24px;align-items:center;min-height:600px}

.hero__copy{position:relative;z-index:3}
.hero__badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--gold);border:1px solid rgba(244,184,41,.4);padding:7px 13px;border-radius:30px;margin-bottom:24px}
.hero__badge i{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:tm-pulse 1.6s infinite}
.hero__h1{font-size:58px;line-height:.92;font-weight:700;letter-spacing:-1px;margin-bottom:8px}
.hero__powerup{display:block;height:63px;width:266px;margin:4px 0 6px -4px;filter:drop-shadow(0 0 26px rgba(244,140,20,.5))}
.hero__h2{font-size:46px;line-height:1;font-weight:700;letter-spacing:-1px;margin-bottom:20px}
.hero__sub{max-width:380px;color:var(--muted2);font-size:15px;line-height:1.6;margin-bottom:24px}
.hero__ctaRow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.btn-hero{background:var(--purple);color:#fff;font-weight:700;letter-spacing:2px;font-size:15px;padding:16px 30px;border-radius:5px;box-shadow:0 0 28px rgba(244,184,41,.55);text-decoration:none;transition:box-shadow .25s ease,background .25s ease}
.btn-hero:hover{background:var(--purple-hi);color:#fff;box-shadow:0 0 46px rgba(244,184,41,.95)}
.hero__note{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:1px;line-height:1.6}
.hero__stores{display:flex;gap:10px;margin-top:16px}
.store-chip{display:flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:8px 13px;background:var(--card);opacity:.82}
.store-chip svg{flex-shrink:0}
.store-chip__txt{line-height:1.2}
.store-chip__soon{font-family:var(--mono);font-size:7.5px;color:var(--dim2);letter-spacing:1.5px}
.store-chip__name{font-weight:700;font-size:12px;letter-spacing:.3px}

.hero__avatarCol{position:relative;height:600px;align-self:end}
.hero__avatar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);height:602px;width:auto;max-width:none;z-index:2;filter:drop-shadow(0 16px 44px rgba(124,58,237,.6));pointer-events:none}
.hero__hearts{position:absolute;top:2px;left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:3px;z-index:4}
.hero__hearts i{opacity:.25;font-style:normal}

.hero__phonesCol{position:relative;z-index:3;height:600px;align-self:center;display:flex;align-items:center;justify-content:center}
.phones{position:relative;width:100%;height:380px;animation:tm-floaty 7s ease-in-out infinite}
.phone{position:absolute;left:50%;bottom:0;transform-origin:center bottom;border:5px solid #1b1430;overflow:hidden}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.phone--1{transform:translateX(calc(-50% - 55px)) rotate(-20deg);width:142px;height:300px;border-radius:20px;box-shadow:0 22px 46px rgba(0,0,0,.55),0 0 24px rgba(124,58,237,.26);z-index:1}
.phone--2{transform:translateX(calc(-50% - 28px)) rotate(-10deg);width:150px;height:318px;border-radius:22px;box-shadow:0 22px 46px rgba(0,0,0,.55),0 0 24px rgba(124,58,237,.28);z-index:2}
.phone--3{transform:translateX(calc(-50% + 28px)) rotate(10deg);width:150px;height:318px;border-radius:22px;box-shadow:0 22px 46px rgba(0,0,0,.55),0 0 24px rgba(124,58,237,.28);z-index:3}
.phone--4{transform:translateX(calc(-50% + 55px)) rotate(20deg);width:142px;height:300px;border-radius:20px;box-shadow:0 22px 46px rgba(0,0,0,.55),0 0 24px rgba(124,58,237,.26);z-index:2}
.phone--5{bottom:6px;transform:translateX(-50%);width:170px;height:352px;border-radius:26px;border-width:6px;box-shadow:0 30px 56px rgba(0,0,0,.65),0 0 40px rgba(124,58,237,.5);z-index:5}

/* ---- what is / steps ---- */
.sect-what{padding:74px 40px 0;text-align:center}
.h2-48{font-size:48px;font-weight:700;letter-spacing:-.5px;margin-bottom:14px}
.lead{color:var(--muted);max-width:600px;margin:0 auto;font-size:15px;line-height:1.7}

.steps-wrap{padding:34px 40px 8px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto;text-align:left}
.step-card{position:relative;border:1px solid;border-radius:14px;background:var(--card);padding:28px 26px}
.step-card--purple{border-color:rgba(157,92,255,.28)}
.step-card--gold{border-color:rgba(244,184,41,.28)}
.step-card--red{border-color:rgba(226,58,58,.28)}
.step-card__num{font-family:var(--disp);font-weight:900;font-size:34px;line-height:1;margin-bottom:14px}
.step-card--purple .step-card__num{color:rgba(157,92,255,.5)}
.step-card--gold .step-card__num{color:rgba(244,184,41,.5)}
.step-card--red .step-card__num{color:rgba(226,58,58,.55)}
.step-card__title{font-weight:700;letter-spacing:.5px;font-size:17px;margin-bottom:6px}
.step-card p{font-size:13px;color:var(--muted);line-height:1.55;font-family:var(--mono)}

/* ---- ways to train ---- */
.sect-paths{padding:70px 40px 70px;text-align:center;scroll-margin-top:78px}
.sect-paths .lead{max-width:560px;margin-bottom:44px}
/* row-gap 0: the full-width panel row must add no height while closed (desktop parity) */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px;text-align:left;margin-bottom:18px}
.mode-card{position:relative;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;background:var(--card);cursor:pointer;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;box-shadow:0 0 26px rgba(var(--a-rgb),.24)}
.mode-card:hover{box-shadow:0 0 60px rgba(var(--a-rgb),.85);border-color:rgba(var(--a-rgb),.5);transform:translateY(-4px)}
.mode-card.is-active{border-color:rgba(var(--a-rgb),.5);background:rgba(22,17,36,.9);box-shadow:0 0 48px rgba(var(--a-rgb),.5)}
.mode-card__art{height:200px;position:relative;overflow:hidden;background:#050308}
.mode-card__art img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.mode-card__num{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:10px;color:var(--a);background:rgba(8,6,13,.55);border:1px solid rgba(var(--a-rgb),.5);padding:3px 8px;border-radius:20px}
.mode-card__active{display:none;position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:9px;letter-spacing:2px;color:#08060D;background:var(--a);padding:4px 9px;border-radius:4px;font-weight:700}
.mode-card.is-active .mode-card__active{display:block}
.mode-card__body{padding:22px}
.mode-card__name{font-size:22px;font-weight:700;letter-spacing:1px;color:var(--text)}
.mode-card.is-active .mode-card__name{color:var(--a)}
.mode-card__tag{font-family:var(--mono);font-size:11px;color:var(--a);letter-spacing:2px;margin:4px 0 12px}
.mode-card__body p{font-size:14px;color:var(--muted);line-height:1.6}
.mode-card__cta{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--a);margin-top:14px}

/* lives INSIDE the .modes grid as a full-width 4th item (spec v2); with row-gap 0 the
   closed state adds no height and the open state's 24px top margin matches the
   pre-move desktop spacing exactly */
.mode-panelWrap{grid-column:1/-1;overflow:hidden;transition:max-height .55s cubic-bezier(.4,0,.2,1),opacity .45s ease,margin-top .55s cubic-bezier(.4,0,.2,1);max-height:0;opacity:0;margin-top:0}
.mode-panelWrap.is-open{max-height:2400px;opacity:1;margin-top:24px}
.mode-panel{display:none;border:1px solid rgba(var(--a-rgb),.4);border-radius:18px;background:radial-gradient(700px 360px at 18% 0%,rgba(var(--a-rgb),var(--glow-a,.16)),transparent 70%),var(--card-deep);padding:30px 34px;text-align:left;margin-bottom:20px}
.mode-panel.is-current{display:block}
.mode-panel__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:4px;color:var(--a);margin-bottom:10px}
.mode-panel h3{font-size:27px;font-weight:700;letter-spacing:1px;margin-bottom:10px;color:var(--a)}
.mode-panel__overview{font-size:14.5px;color:var(--muted3);line-height:1.65;max-width:800px;margin-bottom:16px}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--a);border:1px solid rgba(var(--a-rgb),.5);padding:7px 12px;border-radius:5px}
.mode-more{overflow:hidden;transition:max-height .5s ease,opacity .4s ease;max-height:0;opacity:0}
.mode-more.is-open{max-height:2000px;opacity:1}
.sysgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.sys-card{border:1px solid rgba(255,255,255,.1);border-radius:12px;background:var(--card);padding:16px 18px}
.sys-card__t{font-weight:700;font-size:14px;letter-spacing:.5px;color:var(--a);margin-bottom:4px}
.sys-card__d{font-size:12.5px;color:var(--muted3);line-height:1.55;margin-bottom:4px}
.sys-card__n{font-family:var(--mono);font-size:10px;letter-spacing:.5px;color:var(--dim2);line-height:1.5}
.benefits{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.benefit{display:flex;gap:10px;font-size:13px;color:var(--muted3);line-height:1.5}
.benefit i{color:var(--a);font-style:normal}
.bestfor{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--muted);margin-bottom:18px}
.bestfor b{color:var(--a);font-weight:400}
.mode-panel__btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-more{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--a);border:1px solid rgba(var(--a-rgb),.5);padding:12px 22px;border-radius:6px;cursor:pointer;background:none}
.btn-dossier{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--muted);border:1px solid rgba(255,255,255,.16);padding:12px 22px;border-radius:6px;text-decoration:none}
.btn-dossier:hover{color:var(--text)}
.paths__cta{text-align:center;margin-top:6px}

/* ---- training arcade ---- */
.sect-arcade{position:relative;padding:74px 40px 74px;background:linear-gradient(180deg,transparent,rgba(124,58,237,.07) 18%,rgba(124,58,237,.07) 82%,transparent)}
.sect-arcade__head{text-align:center;margin-bottom:40px}
.h2-52{font-size:52px;font-weight:700;letter-spacing:-1px;margin-bottom:12px}
.sect-arcade__head p{color:var(--muted);font-size:15px;max-width:680px;margin:0 auto;line-height:1.7}
.sect-arcade__head p b{color:var(--text);font-weight:400}
.arcade__inner{max-width:1240px;margin:0 auto}
.arcade__choose{text-align:center;font-family:var(--disp);font-weight:700;font-size:11px;color:rgba(94,234,212,.8);letter-spacing:4px;margin-bottom:10px}
.arcade__viewport{position:relative;overflow:hidden;min-width:0;max-width:100%;padding:16px 0}
.arcade__track{display:flex;gap:12px;align-items:center;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.arcade__track.no-anim{transition:none}
.saga{flex:0 0 220px;aspect-ratio:288/480;position:relative;border-radius:14px;overflow:hidden;background:#050308;cursor:pointer;transform:scale(.92);opacity:.7;z-index:1;transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .6s ease;border:1px solid rgba(168,85,247,.3);box-shadow:0 6px 16px rgba(0,0,0,.5)}
.saga.is-center{transform:scale(1.05);opacity:1;z-index:2}
.saga--live.is-center{border:2px solid rgba(255,224,110,.9);box-shadow:0 0 34px rgba(253,224,71,.45),0 14px 30px rgba(0,0,0,.6)}
.saga--locked.is-center{border:2px solid rgba(176,106,255,.75);box-shadow:0 0 30px rgba(168,85,247,.5),0 14px 30px rgba(0,0,0,.6);cursor:default}
.saga__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.saga--locked .saga__img{filter:grayscale(.65) brightness(.45)}
.saga--locked.is-center .saga__img{filter:grayscale(.4) brightness(.6)}
.saga__live{position:absolute;top:8px;left:8px;font-family:var(--disp);font-weight:900;font-size:8px;color:#2a1400;letter-spacing:1px;background:linear-gradient(180deg,#ffe574,#f7c33f);padding:4px 9px;border-radius:6px}
.saga__lock{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:10px;background:rgba(16,4,30,.85);border:1px solid rgba(168,85,247,.4);display:flex;align-items:center;justify-content:center;font-size:13px}
.saga__grad{position:absolute;left:0;right:0;bottom:0;padding:30px 9px 8px;background:linear-gradient(to top,rgba(4,0,10,.96) 0%,rgba(4,0,10,.82) 42%,rgba(4,0,10,.35) 74%,transparent 100%)}
.saga__sub{font-family:var(--raj);font-weight:600;font-size:10.5px;color:rgba(235,225,255,.85)}
.saga--locked .saga__sub{color:rgba(210,185,255,.7)}
.saga__stars{font-size:9.5px;letter-spacing:1.5px;margin-top:3px}
.saga__stars b{color:#fde047;font-weight:400}
.saga__stars i{color:rgba(255,255,255,.3);font-style:normal}
.saga__soon{font-family:var(--disp);font-weight:800;font-size:7.5px;color:#c9a6ff;letter-spacing:1.5px;margin-top:3px}
.saga--forge{border:2px dashed rgba(94,234,212,.35);background:rgba(14,10,24,.5);box-shadow:none}
.saga--forge.is-center{border:2px dashed rgba(94,234,212,.35);box-shadow:0 0 26px rgba(94,234,212,.25)}
.saga__forge{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:14px}
.saga__forge-star{font-size:20px;color:var(--teal);animation:tm-pulse 2.4s ease-in-out infinite}
.saga__forge-t{font-family:var(--disp);font-weight:800;font-size:9px;letter-spacing:2px;color:var(--teal);line-height:1.6}
.saga__forge p{font-family:var(--mono);font-size:8.5px;letter-spacing:1px;color:var(--dim2);line-height:1.6}
.arcade__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:36px;height:36px;border-radius:50%;border:1px solid rgba(168,85,247,.45);background:rgba(8,1,18,.8);color:#e6d4ff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.arcade__arrow--l{left:6px}
.arcade__arrow--r{right:6px}
.arcade__dots{display:flex;gap:6px;justify-content:center;margin-top:6px}
.arcade__dots .dot{height:6px;width:6px;border-radius:99px;background:rgba(255,255,255,.25);transition:width .25s ease,background .25s ease;cursor:pointer}
.arcade__dots .dot.is-on{width:18px;background:#fde047}
.arcade__tap{text-align:center;font-family:var(--disp);font-weight:700;font-size:10px;color:rgba(94,234,212,.85);letter-spacing:3px;margin-top:12px;animation:tm-pulse 2.4s ease-in-out infinite}
.arcade__learnWrap{text-align:center;margin-top:30px}
.btn-teal{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--teal);border:1px solid rgba(94,234,212,.4);padding:13px 26px;border-radius:6px;text-decoration:none;transition:background .2s ease}
.btn-teal:hover{background:rgba(94,234,212,.12);color:var(--teal)}
.arcade__notes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.note{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:16px 18px;background:var(--card);font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--muted);line-height:1.6}
.note b{font-weight:400}
.note--purple b{color:var(--purple-hi)}
.note--gold b{color:var(--gold)}
.note--blue b{color:var(--blue)}

/* ---- beta perks ---- */
.sect-perks{padding:0 40px 70px;scroll-margin-top:78px;text-align:center}
.h2-40{font-size:40px;font-weight:700;margin-bottom:14px}
.sect-perks .lead{max-width:640px;margin-bottom:30px}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.perk{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:24px;background:var(--card)}
.perk__code{font-family:var(--mono);font-size:11px;letter-spacing:2px;margin-bottom:8px}
.perk__code--purple{color:var(--purple-hi)}
.perk__code--gold{color:var(--gold)}
.perk__code--blue{color:var(--blue)}
.perk__t{font-weight:700;margin-bottom:6px;letter-spacing:.5px}
.perk p{font-size:13px;color:var(--muted);line-height:1.55}

/* ---- testimonials ---- */
.sect-test{position:relative;padding:70px 40px 84px}
.sect-test__head{text-align:center;margin-bottom:36px}
.h2-44{font-size:44px;font-weight:700;letter-spacing:-.5px;margin-bottom:12px}
.sect-test__head p{color:var(--muted);font-size:15px;max-width:560px;margin:0 auto}
.test__wrap{position:relative;max-width:1240px;margin:0 auto}
.test__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;background:rgba(20,16,33,.92);border:1px solid rgba(124,58,237,.45);color:var(--text);font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.test__arrow:hover{background:var(--purple);border-color:var(--purple)}
.test__arrow--l{left:-24px}
.test__arrow--r{right:-24px}
.test__viewport{overflow:hidden}
.test__track{display:flex;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.test__page{flex:0 0 100%;box-sizing:border-box;display:flex;gap:20px}
.tcard{flex:1 1 0;min-width:0;position:relative;background:linear-gradient(180deg,rgba(18,13,32,.92),rgba(10,7,18,.92));border:1px solid rgba(124,58,237,.28);border-radius:14px;padding:22px 24px;min-height:264px;display:flex;flex-direction:column;box-shadow:0 22px 55px rgba(0,0,0,.45)}
.corner{position:absolute;width:15px;height:15px}
.corner--tl{top:12px;left:12px;border-top:2px solid var(--gold);border-left:2px solid var(--gold)}
.corner--tr{top:12px;right:12px;border-top:2px solid var(--gold);border-right:2px solid var(--gold)}
.corner--bl{bottom:12px;left:12px;border-bottom:2px solid var(--gold);border-left:2px solid var(--gold)}
.corner--br{bottom:12px;right:12px;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold)}
.tcard__stars{font-size:14px;letter-spacing:2px;margin-bottom:16px}
.tcard__stars b{color:var(--gold);font-weight:400}
.tcard__stars i{color:rgba(255,255,255,.18);font-style:normal}
.tcard__quote{font-size:15px;line-height:1.55;font-weight:500;color:var(--text);text-wrap:pretty;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;margin:0}
.tcard__who{display:flex;align-items:center;gap:12px;margin-top:14px}
.tcard__avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#F4B829,#9a6a00);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#1a1204;flex-shrink:0}
.tcard__meta{line-height:1.2;min-width:0}
.tcard__name{font-weight:700;letter-spacing:1px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard__role{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:1px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.test__dots{display:flex;gap:8px;justify-content:center;margin-top:28px}
.test__dots .dot{height:8px;width:8px;border-radius:20px;background:rgba(255,255,255,.22);transition:all .35s ease;cursor:pointer}
.test__dots .dot.is-on{width:28px;background:var(--gold)}
.smallprint{text-align:center;font-family:var(--mono);font-size:11px;color:#5c556f;margin-top:22px;letter-spacing:.5px}

/* ---- founders club ---- */
.sect-founders{position:relative;padding:74px 40px 30px;scroll-margin-top:78px}
.sect-founders__head{text-align:center;margin-bottom:44px}
.sect-founders__eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:6px;color:var(--gold);margin-bottom:14px}
.h2-52t{font-size:52px;font-weight:700;letter-spacing:-1px;line-height:1;margin-bottom:18px}
.sect-founders__intro{color:var(--text);font-size:17px;max-width:760px;margin:0 auto 16px}
.sect-founders__body{color:var(--muted);font-size:14px;line-height:1.7;max-width:640px;margin:0 auto}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;max-width:1240px;margin:0 auto}
.plan{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(18,13,32,.9),rgba(10,7,18,.9));border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:34px 32px;transition:border-color .25s ease,box-shadow .25s ease}
.plan:hover{border-color:rgba(255,255,255,.85);box-shadow:0 0 42px rgba(255,255,255,.28)}
.plan .corner{width:16px;height:16px}
.plan .corner--tl{top:12px;left:12px}
.plan .corner--br{bottom:12px;right:12px}
.plan--featured{background:linear-gradient(180deg,rgba(22,16,38,.95),rgba(12,8,22,.95));border:1px solid rgba(244,184,41,.55);box-shadow:0 0 65px rgba(244,184,41,.32)}
.plan--featured:hover{border-color:#fff;box-shadow:0 0 55px rgba(255,255,255,.4)}
.plan__ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--gold);color:#1a1204;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:2px;padding:6px 16px;border-radius:5px;white-space:nowrap}
.plan__name{font-size:24px;font-weight:700;letter-spacing:1px;margin-bottom:16px}
.plan__price{margin-bottom:16px}
.plan__amount{font-size:40px;font-weight:700;color:var(--gold)}
.plan__per{font-size:14px;color:var(--muted);font-family:var(--mono)}
.plan__desc{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:24px}
.plan__list{display:flex;flex-direction:column;gap:13px;margin-bottom:30px}
.plan__item{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--text)}
.plan__item i{color:var(--gold);flex-shrink:0;font-style:normal}
.plan__btn{margin-top:auto;display:flex;align-items:center;justify-content:center;background:rgba(10,7,18,.7);border:1px solid rgba(255,255,255,.16);color:var(--text);font-weight:700;letter-spacing:2px;font-size:13px;padding:16px;border-radius:8px;text-decoration:none;transition:border-color .2s ease,color .2s ease}
.plan__btn:hover{border-color:var(--gold);color:var(--gold)}
.plan__btn--gold{background:linear-gradient(90deg,#F4B829,#F59E0B);color:#1a1204;border:none;box-shadow:0 0 26px rgba(244,184,41,.4)}
.plan__btn--gold:hover{background:linear-gradient(90deg,#FFD56A,#F4B829);color:#1a1204}
.founders__note{text-align:center;font-family:var(--mono);font-size:11px;color:#5c556f;margin-top:34px;letter-spacing:.5px}

/* ---- final CTA ---- */
.sect-invest{position:relative;scroll-margin-top:78px;margin:40px 40px 50px;border-radius:18px;padding:90px 54px;text-align:center;overflow:hidden;border:1px solid rgba(124,58,237,.4);min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sect-invest__bg{position:absolute;inset:0;background-image:url('../assets/mountain-overlook.webp');background-size:cover;background-position:center 32%}
.sect-invest__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,13,.5),rgba(8,6,13,.82))}
.sect-invest__content{position:relative}
.h2-54{font-size:54px;font-weight:700;margin-bottom:14px;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.sect-invest p{color:#e6e1f2;max-width:560px;margin:0 auto 28px;font-size:15px;line-height:1.7}
.sect-invest__btns{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn-invest{background:var(--purple);color:#fff;font-weight:700;letter-spacing:2px;font-size:15px;padding:16px 34px;border-radius:6px;box-shadow:0 0 30px rgba(124,58,237,.6);text-decoration:none}
.btn-invest:hover{background:var(--purple-hi);color:#fff}
.btn-sponsor{border:1px solid rgba(244,184,41,.6);color:var(--gold);font-weight:700;letter-spacing:2px;font-size:15px;padding:16px 28px;border-radius:6px;text-decoration:none;transition:background .2s ease}
.btn-sponsor:hover{background:rgba(244,184,41,.12);color:var(--gold)}

/* ---- email capture ---- */
.sect-email{padding:0 40px 60px;scroll-margin-top:90px}
.email-card{max-width:760px;margin:0 auto;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(20,16,33,.55);padding:38px 40px;text-align:center}
.email-card h3{font-size:28px;font-weight:700;letter-spacing:-.3px;margin-bottom:8px}
.email-card>p{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:22px}
.email-form{display:flex;gap:10px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.email-form input{flex:1;min-width:220px;background:rgba(8,6,13,.7);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:15px 18px;color:var(--text);font-family:var(--mono);font-size:14px;outline:none}
.email-form button{background:var(--purple);color:#fff;font-weight:700;letter-spacing:2px;font-size:14px;padding:15px 28px;border:none;border-radius:8px;cursor:pointer;transition:box-shadow .25s ease,background .25s ease;font-family:var(--sans)}
.email-form button:hover{background:var(--purple-hi);box-shadow:0 0 26px rgba(244,184,41,.7)}
.email-done{display:none;align-items:center;gap:10px;font-family:var(--mono);font-size:14px;letter-spacing:1px;color:#22c55e;border:1px solid rgba(34,197,94,.4);background:rgba(8,24,14,.6);padding:15px 26px;border-radius:8px}
.email-card.is-done .email-form{display:none}
.email-card.is-done .email-done{display:inline-flex}

/* ============================================================
   FEATURES
   ============================================================ */
.feat-head{padding:26px 40px 6px;text-align:center}
.h1-54{font-size:54px;line-height:.98;font-weight:700;letter-spacing:-1.5px;margin-bottom:14px}
.feat-head p,.faq-head p{color:var(--muted2);font-size:15px;line-height:1.6;max-width:600px;margin:0 auto}
.feat-head .eyebrow,.faq-head .eyebrow{letter-spacing:6px;margin-bottom:14px}

.console{display:grid;grid-template-columns:256px 1fr;gap:22px;padding:18px 40px 10px;align-items:start}
.rail{position:sticky;top:110px;display:flex;flex-direction:column;gap:8px}
.rail__label{font-family:var(--mono);font-size:10px;letter-spacing:4px;color:var(--gold);padding:0 10px 8px}
.rail-item{display:block;border:1px solid rgba(255,255,255,.1);background:rgba(12,9,20,.6);border-radius:10px;padding:13px 14px;text-decoration:none;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}
.rail-item.is-active{border-color:rgba(var(--rgb),.7);background:rgba(var(--rgb),.1);box-shadow:0 0 22px rgba(var(--rgb),.22)}
.rail-item__row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rail-item__label{font-family:var(--disp);font-weight:900;font-size:12px;letter-spacing:2px;color:var(--text)}
.rail-item.is-active .rail-item__label{color:var(--accent)}
.rail-item__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text)}
.rail-item.is-active .rail-item__icon{color:var(--accent)}
.rail-item__icon svg{stroke:currentColor}
.rail-item__sub{font-family:var(--mono);font-size:8.5px;letter-spacing:1px;color:var(--dim);margin-top:4px}
.rail-item.is-active .rail-item__sub{color:var(--accent)}
.rail-item__stars{font-size:11px;letter-spacing:2px;color:#fde047;margin-top:5px}
.oneup{font-family:var(--disp);font-weight:900;font-size:9px;letter-spacing:.5px;color:var(--green);border:1.5px solid var(--green);border-radius:4px;padding:2px 4px;line-height:1;box-shadow:0 0 8px rgba(74,222,128,.4)}
.rail__cta{margin-top:6px;text-align:center;background:var(--purple);color:#fff;font-weight:700;letter-spacing:2px;font-size:12px;padding:13px 14px;border-radius:8px;box-shadow:0 0 22px rgba(244,184,41,.4);text-decoration:none;transition:box-shadow .25s ease,background .25s ease;display:block}
.rail__cta:hover{background:var(--purple-hi);color:#fff;box-shadow:0 0 34px rgba(244,184,41,.8)}

.dossiers{display:flex;flex-direction:column;gap:16px;min-width:0}
.dossier{scroll-margin-top:110px;border:1px solid rgba(var(--tone),.3);border-radius:18px;overflow:hidden;background:rgba(14,10,24,.7)}
.dossier__banner{position:relative;aspect-ratio:3.4/1;background:#050308}
.dossier__banner>img.base{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.55)}
.dossier__banner>img.base--full{filter:none}
.dossier__banner .swap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.dossier__banner .swap.is-on{opacity:1}
.dossier__banner-grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(14,10,24,.92) 100%)}
.dossier__banner-title{position:absolute;left:26px;bottom:14px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.dossier__mode{font-family:var(--disp);font-weight:900;font-size:15px;letter-spacing:3px}
.dossier__subtitle{font-family:var(--mono);font-size:10.5px;letter-spacing:2px}
.dossier__body{padding:26px 28px 28px}
.dossier__h2{font-size:29px;font-weight:700;letter-spacing:-.5px;margin-bottom:8px}
.dossier__lead{color:var(--muted);font-size:14px;line-height:1.6;max-width:700px;margin-bottom:20px}

/* row-gap 0: the full-width detail panel row adds no height while closed (desktop parity) */
.fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px;text-align:left}
.fcards--4{grid-template-columns:repeat(4,1fr)}
.fcard{border:1px solid rgba(255,255,255,.1);border-radius:12px;background:var(--card);padding:17px 18px;cursor:pointer;transition:border-color .25s ease,box-shadow .25s ease,transform .2s ease}
.fcard:hover{transform:translateY(-3px)}
.fcard.is-open{border-color:rgba(var(--tone),.75);box-shadow:0 0 30px rgba(var(--tone),.25)}
.fcard__tag{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--dim);margin-bottom:7px}
.fcard__row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:5px}
.fcard__label{font-weight:700;font-size:15px;letter-spacing:.5px;color:var(--text)}
.fcard.is-open .fcard__label{color:var(--tone-accent)}
.fcard__chev{color:var(--dim2)}
.fcard__tease{font-size:11.5px;color:var(--muted);line-height:1.55;font-family:var(--mono);margin-bottom:12px}
.fcard__cta{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.fcard.is-open .fcard__cta{border-top-color:rgba(var(--tone),.4)}
.fcard__cta span:first-child{font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;color:var(--tone-accent)}
.fcard__arrow{font-size:11px;color:var(--tone-accent);animation:tm-nudge 1.8s ease-in-out infinite}
.fcard.is-open .fcard__arrow{animation:none}

/* lives INSIDE the .fcards grid as a full-width last item; on mobile, CSS order slots
   it directly under the tapped card (same pattern as the landing Ways-to-Train panel) */
.fpanel-wrap{grid-column:1/-1;overflow:hidden;transition:max-height .55s cubic-bezier(.4,0,.2,1),opacity .45s ease,margin-top .55s cubic-bezier(.4,0,.2,1);max-height:0;opacity:0;margin-top:0}
.fpanel-wrap.is-open{max-height:1400px;opacity:1;margin-top:14px}
.fpanel{border:1px solid rgba(var(--tone),.4);border-radius:14px;background:radial-gradient(600px 300px at 16% 0%,rgba(var(--tone),.12),transparent 70%),var(--card-deep);padding:26px 28px}
.fdetail{display:none}
.fdetail.is-current{display:block}
.fdetail__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--tone-accent);margin-bottom:8px}
.fdetail__title{font-size:21px;font-weight:700;margin-bottom:14px}
.fdetail__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;font-size:13px;color:var(--muted3);line-height:1.6;margin-bottom:18px}
.fd-row{display:flex;gap:10px}
.fd-row i{color:var(--tone-accent);font-style:normal}
.fdetail p.fdetail__lead{font-size:13.5px;color:var(--muted3);line-height:1.65;max-width:640px;margin-bottom:14px}
.fdetail .chiprow{margin-bottom:0}
.fdetail .chip{color:var(--tone-accent);border-color:rgba(var(--tone),.45)}
.fdetail .chip--dim{color:var(--dim2);border-color:rgba(255,255,255,.12)}
.fdetail .chip--hint{color:var(--tone-accent);border-color:rgba(var(--tone),.35)}
.campmore{overflow:hidden;transition:max-height .5s ease,opacity .4s ease;max-height:0;opacity:0}
.campmore.is-open{max-height:2000px;opacity:1}
.campmore-btn{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--purple-lt);border:1px solid rgba(157,92,255,.5);padding:9px 16px;border-radius:5px;cursor:pointer;background:none}
.campmore-btn:hover{background:rgba(157,92,255,.14)}

/* merge connector */
.merge{position:relative;height:78px;margin:-4px 0 -8px}
.merge svg{display:block}
.merge__fit{position:absolute;left:24%;top:0;transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--gold)}
.merge__fight{position:absolute;left:76%;top:0;transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--purple-lt)}
.merge__label{position:absolute;left:50%;top:26px;transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--red-lt2);background:rgba(8,6,13,.8);padding:3px 10px;border-radius:12px;border:1px solid rgba(226,58,58,.35);white-space:nowrap}

/* combat circuits */
.dossier--combat{margin-bottom:92px;box-shadow:0 0 44px rgba(226,58,58,.12)}
.circuit-label{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--red-lt);margin-bottom:10px}
.circuits{display:flex;flex-direction:column;gap:9px;max-width:640px}
.circuit{display:flex;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.1);background:var(--card);border-radius:12px;padding:13px 16px}
.circuit.is-active{border-color:rgba(var(--tone),.6);box-shadow:0 0 24px rgba(var(--tone),.22)}
.circuit__icon{flex-shrink:0;width:34px;height:34px;border-radius:9px;background:rgba(var(--tone),.16);display:flex;align-items:center;justify-content:center;color:var(--tone-accent)}
.circuit__txt{flex:1;min-width:0}
.circuit__name{font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.5px;color:var(--tone-accent)}
.circuit__desc{font-size:12px;color:var(--muted);margin-left:10px}
.circuit__check{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}

/* arcade dossier */
.sagastep-label{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--gold);margin-bottom:10px}
.sagasteps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px;text-align:left}
.sagastep{border:1px solid;border-radius:12px;background:rgba(12,9,22,.6);padding:18px}
.sagastep--purple{border-color:rgba(157,92,255,.28)}
.sagastep--red{border-color:rgba(226,58,58,.3)}
.sagastep--gold{border-color:rgba(244,184,41,.4);background:radial-gradient(300px 180px at 50% 0%,rgba(244,184,41,.12),transparent 70%),rgba(12,9,22,.6)}
.sagastep__num{font-family:var(--disp);font-weight:900;font-size:22px;line-height:1;margin-bottom:9px}
.sagastep--purple .sagastep__num{color:rgba(157,92,255,.4)}
.sagastep--red .sagastep__num{color:rgba(226,58,58,.4)}
.sagastep--gold .sagastep__num{color:rgba(244,184,41,.4)}
.sagastep__tag{font-family:var(--mono);font-size:10px;letter-spacing:2px;margin-bottom:4px}
.sagastep--purple .sagastep__tag{color:var(--purple-hi)}
.sagastep--red .sagastep__tag{color:var(--red-lt)}
.sagastep--gold .sagastep__tag{color:var(--gold)}
.sagastep__t{font-size:16px;font-weight:700;margin-bottom:8px;line-height:1.15}
.sagastep p{font-size:11px;color:var(--muted);line-height:1.55;font-family:var(--mono)}
.integrity{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px;text-align:left}
.integrity .note{padding:13px 16px;background:rgba(20,16,33,.4)}

.ladder-label{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--teal);margin-bottom:4px}
.ladder-title{font-size:20px;font-weight:700;letter-spacing:.3px;margin-bottom:22px}
.ladder{position:relative;padding:0 4px}
.ladder__line{position:absolute;left:6%;right:6%;top:23px;height:2px;background:linear-gradient(90deg,#22c55e 0%,#22c55e 26%,#9D5CFF 40%,rgba(255,255,255,.22) 58%,#F4B829 80%,#e23a3a 100%)}
.ladder__nodes{position:relative;display:flex;justify-content:space-between;gap:10px;text-align:center}
.lnode{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.lnode__dot{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}
.lnode__dot--cleared{background:rgba(8,24,14,.95);border:2px solid rgba(34,197,94,.7);color:#7ddca0}
.lnode__dot--here{background:rgba(22,14,40,.95);border:2px solid rgba(157,92,255,.85);box-shadow:0 0 22px rgba(124,58,237,.55);color:var(--purple-lt);font-size:14px;animation:tm-pulse 2s ease-in-out infinite}
.lnode__dot--locked{background:rgba(12,9,20,.95);border:2px dashed rgba(255,255,255,.25);color:var(--dim);font-size:13px}
.lnode__dot--boss{background:rgba(26,18,4,.95);border:2px solid rgba(244,184,41,.8);box-shadow:0 0 22px rgba(244,184,41,.35)}
.lnode__dot--elite{background:rgba(30,8,12,.95);border:2px dashed rgba(226,58,58,.6);font-size:15px}
.lnode__cap{font-family:var(--mono);font-size:9px;letter-spacing:1.5px}
.lnode__cap--green{color:#7ddca0}
.lnode__cap--purple{color:var(--purple-lt)}
.lnode__cap--dim{color:var(--dim)}
.lnode__cap--gold{color:var(--gold)}
.lnode__cap--red{color:var(--red-lt2)}
.lnode__cap .gold{color:var(--gold)}
.lnode__cap .dimstar{color:rgba(255,255,255,.3)}
.lnode__note{font-family:var(--mono);font-size:8.5px;letter-spacing:.5px;color:var(--dim);line-height:1.5;max-width:110px}
.arcade-live-note{text-align:center;margin-top:22px;font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--dim2)}
.arcade-live-note a{color:var(--teal);text-decoration:none}

/* progression */
.dossier--prog{padding:32px 28px;text-align:center;border-color:rgba(157,92,255,.3)}
.dossier--prog .eyebrow{font-size:11px;letter-spacing:5px;margin-bottom:10px}
.h2-32{font-size:32px;font-weight:700;letter-spacing:-.5px;margin-bottom:10px}
.dossier--prog>p{color:var(--muted);font-size:14px;line-height:1.7;max-width:600px;margin:0 auto 22px}
.gtoggle{display:inline-flex;gap:6px;border:1px solid rgba(255,255,255,.12);border-radius:30px;padding:5px;margin-bottom:26px}
.gtoggle__opt{font-family:var(--mono);font-size:11px;letter-spacing:2px;padding:8px 18px;border-radius:20px;cursor:pointer;background:transparent;color:var(--muted);transition:background .25s ease,color .25s ease;border:none}
.gtoggle__opt.is-on{background:var(--purple);color:#fff}
.tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:720px;margin:0 auto 14px}
.tier{position:relative;border:1px solid;border-radius:14px;overflow:hidden;background:var(--card)}
.tier__max{position:absolute;top:9px;right:9px;z-index:2;font-family:var(--mono);font-size:8px;letter-spacing:1.5px;color:#1a1024;background:var(--purple-max);padding:3px 7px;border-radius:4px;font-weight:700}
.tier__img{aspect-ratio:3/4;overflow:hidden;background:#0d0a16}
.tier__img img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.tier__meta{padding:8px 6px}
.tier__xp{font-family:var(--mono);font-size:8px;letter-spacing:1.5px;color:var(--dim);margin-bottom:3px}
.tier__name{font-weight:700;letter-spacing:1px;font-size:11px}
.secret-note{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--dim);margin-bottom:14px}
.secrets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:430px;margin:0 auto 26px}
.secret{position:relative;border:1px solid rgba(192,132,252,.25);border-radius:12px;overflow:hidden;background:rgba(10,7,18,.9)}
.secret__img{aspect-ratio:3/4;overflow:hidden;background:#0d0a16}
.secret__img img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;filter:brightness(.14) saturate(.3) blur(2px)}
.secret__lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.secret__lock span{width:34px;height:34px;border-radius:10px;background:rgba(16,4,30,.85);border:1px solid rgba(168,85,247,.4);display:flex;align-items:center;justify-content:center;font-size:14px}
.secret__meta{padding:8px 6px;text-align:center}
.secret__xp{font-family:var(--mono);font-size:8px;letter-spacing:1.5px;color:#8a7ba0;margin-bottom:3px}
.secret__q{font-weight:700;letter-spacing:2px;font-size:11px;color:#8a7ba0}
.gamelink{border:1px solid rgba(124,58,237,.35);border-radius:12px;background:radial-gradient(500px 200px at 50% 0%,rgba(124,58,237,.16),transparent 70%),rgba(12,9,22,.6);padding:20px 22px;max-width:720px;margin:0 auto 26px;text-align:left}
.gamelink__head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.gamelink__label{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--purple-hi)}
.gamelink p{font-size:13px;color:var(--muted3);line-height:1.65;margin-bottom:10px}
.gamelink__sub{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--dim2)}
.progchips{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.progchip{border:1px solid;border-radius:10px;padding:13px 24px;background:var(--card)}
.progchip--gold{border-color:rgba(244,184,41,.35)}
.progchip--purple{border-color:rgba(157,92,255,.35)}
.progchip--blue{border-color:rgba(79,123,255,.35)}
.progchip__t{font-family:var(--sans);font-size:18px;font-weight:700;letter-spacing:1px}
.progchip--gold .progchip__t{color:var(--gold)}
.progchip--purple .progchip__t{color:var(--purple-hi)}
.progchip--blue .progchip__t{color:var(--blue)}
.progchip__s{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:1px;margin-top:3px}

/* features CTA */
.feat-cta{padding:30px 40px 70px 318px;text-align:center}
.cta-card{border:1px solid rgba(124,58,237,.4);border-radius:18px;background:radial-gradient(700px 340px at 50% 0%,rgba(124,58,237,.24),transparent 70%),var(--card-deep);padding:50px 40px}
.cta-card h2{font-size:40px;font-weight:700;letter-spacing:-.5px;margin-bottom:14px}
.cta-card p{color:var(--muted);font-size:15px;line-height:1.6;max-width:520px;margin:0 auto 28px}
.cta-card__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-cta-lg{background:var(--purple);color:#fff;font-weight:700;letter-spacing:2px;font-size:15px;padding:16px 32px;border-radius:5px;box-shadow:0 0 28px rgba(244,184,41,.55);text-decoration:none;transition:box-shadow .25s ease,background .25s ease}
.btn-cta-lg:hover{background:var(--purple-hi);color:#fff;box-shadow:0 0 46px rgba(244,184,41,.95)}
.btn-outline{border:1px solid rgba(255,255,255,.2);color:var(--text);font-weight:700;letter-spacing:2px;font-size:15px;padding:16px 32px;border-radius:5px;text-decoration:none;transition:border-color .2s ease,color .2s ease}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}

/* ============================================================
   FAQ
   ============================================================ */
.faq-head{padding:54px 40px 8px;text-align:center}
.who{scroll-margin-top:90px;padding:40px 40px 8px}
.who__eyebrow{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:4px;color:var(--purple-hi);margin-bottom:22px}
.personas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.persona{border:1px solid rgba(var(--tone),.3);border-radius:16px;background:radial-gradient(400px 220px at 20% 0%,rgba(var(--tone),.14),transparent 70%),rgba(20,16,33,.55);padding:26px 24px}
.persona__icon{width:40px;height:40px;border-radius:11px;background:rgba(var(--tone),.16);display:flex;align-items:center;justify-content:center;color:var(--tone-accent);margin-bottom:16px}
.persona__title{font-family:var(--disp);font-weight:900;font-size:14px;letter-spacing:1px;color:var(--tone-accent);margin-bottom:9px;line-height:1.25}
.persona p{font-size:13px;color:var(--muted3);line-height:1.6}

.faqs{scroll-margin-top:90px;padding:56px 40px 20px}
.faqs__eyebrow{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:4px;color:var(--gold);margin-bottom:8px}
.h2-38{text-align:center;font-size:38px;font-weight:700;letter-spacing:-.5px;margin-bottom:30px}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{border:1px solid rgba(255,255,255,.09);border-radius:12px;background:var(--card);overflow:hidden;transition:border-color .25s ease}
.faq-item.is-open{border-color:rgba(157,92,255,.5)}
.faq-item__q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer}
.faq-item__q span:first-child{font-weight:700;font-size:16px;letter-spacing:.3px;color:var(--text)}
.faq-item.is-open .faq-item__q span:first-child{color:var(--purple-lt)}
.faq-item__plus{flex-shrink:0;font-family:var(--mono);font-size:18px;color:var(--text);transition:transform .25s ease}
.faq-item.is-open .faq-item__plus{transform:rotate(45deg);color:var(--purple-lt)}
.faq-item__a{overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease;max-height:0;opacity:0}
.faq-item.is-open .faq-item__a{max-height:260px;opacity:1}
.faq-item__a p{padding:0 22px 20px;font-size:14px;color:var(--muted3);line-height:1.65}
.faq-cta{padding:20px 40px 70px;text-align:center}

/* ============================================================
   BETA (embedded signup form + app handoff)
   ============================================================ */
.beta-wrap{padding:30px 40px 40px;max-width:900px;margin:0 auto}
.beta-frame{border:1px solid rgba(124,58,237,.4);border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 0 60px rgba(124,58,237,.25)}
.beta-frame iframe{display:block;width:100%;border:0}
.beta-wrap .smallprint{margin-top:18px}
.beta-success{padding:30px 40px 10px;max-width:760px;margin:0 auto}
.beta-success__box{border:1px solid rgba(34,197,94,.45);border-radius:18px;background:radial-gradient(600px 300px at 50% 0%,rgba(34,197,94,.14),transparent 70%),rgba(8,24,14,.72);padding:40px;text-align:center}
.beta-success__check{font-family:var(--mono);font-size:16px;letter-spacing:2px;color:#22c55e;margin-bottom:10px}
.beta-success__box p{color:var(--muted2);font-size:14px;font-family:var(--mono);letter-spacing:1px;margin-bottom:24px}
.beta-success__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.beta-success__btns .btn-outline{cursor:pointer;background:none;font-family:var(--sans)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* --- tablet band (769–1023px): desktop ≥1024 stays pixel-identical per spec QA --- */
@media (max-width:1023px){
  .nav{flex-wrap:wrap;gap:10px 12px}
  .nav__links{display:none}
  .nav__burger{display:flex}
  .nav__drawer{display:none;order:3;width:100%;flex-direction:column;align-items:center;gap:16px;font-family:var(--mono);font-size:13px;letter-spacing:2px;padding-top:8px}
  .nav__drawer a{color:var(--muted);text-decoration:none;padding:2px 0}
  .nav__drawer a.is-current{color:var(--text)}
  .nav.is-open .nav__drawer{display:flex}
  .hero__layout{grid-template-columns:1fr 1fr;min-height:0}
  .hero__phonesCol{display:none}
  .console{grid-template-columns:1fr;gap:14px}
  .rail{position:static;flex-direction:row;flex-wrap:wrap}
  .rail__label{width:100%;padding-bottom:4px}
  .rail-item{flex:1 1 150px}
  .rail__cta{flex:1 1 100%}
  .feat-cta{padding-left:40px}
  .test__arrow--l{left:-8px}
  .test__arrow--r{right:-8px}
  .fcards--4{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* --- mobile (≤768px): UPDATE-mobile-spec v2 --- */
@media (max-width:768px){
  /* global */
  .nav{padding:12px 16px}
  .nav__cta{display:none}
  .h1-54{font-size:34px;line-height:1.04}
  .dossier__h2,.h2-32,.h2-38,.cta-card h2{font-size:26px;line-height:1.1}
  .h2-48,.h2-52,.h2-52t,.h2-54,.h2-44,.h2-40,.hero__h2{font-size:28px;line-height:1.1;letter-spacing:-.5px}
  .hero__h1{font-size:44px;line-height:1.04;margin-bottom:4px}

  /* landing hero — "reel" pass */
  .hero{padding:28px 16px 70px}
  .hero__layout{grid-template-columns:1fr;gap:4px;min-height:0}
  .hero__avatarCol{height:330px}
  .hero__avatar{height:320px}
  .hero__phonesCol{display:none}
  .hero__stores{display:none}
  .hero__goldline,.hero__goldglow{left:16px;right:16px;bottom:50px}

  /* landing rhythm: 16px sides + tightened vertical padding */
  .sect-what{padding:44px 16px 0}
  .steps-wrap{padding:34px 16px 8px}
  .sect-paths{padding:44px 16px 44px}
  .sect-arcade{padding:74px 16px 74px}
  .sect-perks{padding:0 16px 44px}
  .sect-test{padding:44px 16px 48px}
  .sect-founders{padding:44px 16px 30px}
  .sect-invest{margin:20px 16px 30px;padding:54px 22px}
  .sect-email{padding:0 16px 60px}
  .email-card{padding:26px 18px}
  .footer{flex-direction:column;gap:8px;text-align:center;padding:20px 16px}
  .footer__right{display:none}

  /* grids stack */
  .steps,.modes,.perks,.arcade__notes,.plans,.sysgrid{grid-template-columns:1fr}
  .test__page{gap:0}
  .test__page .tcard:nth-child(n+2){display:none}
  .test__arrow--l{left:-4px}
  .test__arrow--r{right:-4px}

  /* ways-to-train: panel opens directly under the tapped card */
  .modes{gap:16px}
  .mode-panelWrap{margin-top:-16px}
  .mode-panelWrap.is-open{margin-top:8px}
  .modes > *{order:var(--ord,0)}
  .mode-card:nth-of-type(1){--ord:1}
  .mode-card:nth-of-type(2){--ord:3}
  .mode-card:nth-of-type(3){--ord:5}

  /* thumb targets */
  .arcade__arrow,.test__arrow{width:44px;height:44px}
  .arcade__dots .dot,.test__dots .dot{box-sizing:content-box;padding:7px}
  .arcade__dots .dot,.test__dots .dot,.arcade__dots .dot.is-on,.test__dots .dot.is-on{background-clip:content-box}

  /* features */
  .feat-head{padding:26px 16px 6px}
  .console{padding:14px 16px 10px}
  .rail{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .rail__label{grid-column:1/-1;width:auto}
  .rail__cta{grid-column:1/-1}
  .fcards,.fcards--4{grid-template-columns:1fr;gap:12px}
  .fcards > *{order:var(--ord,0)}
  .fcard:nth-of-type(1){--ord:1}
  .fcard:nth-of-type(2){--ord:3}
  .fcard:nth-of-type(3){--ord:5}
  .fcard:nth-of-type(4){--ord:7}
  .fpanel-wrap.is-open{margin-top:12px}
  .fdetail__grid,.sagasteps,.integrity{grid-template-columns:1fr}
  .dossier__banner{aspect-ratio:2.5/1}
  #fit .dossier__banner img,#fight .dossier__banner img{object-position:left center}
  #fit .dossier__banner-title,#fight .dossier__banner-title{left:12px;right:12px;bottom:8px;gap:4px 10px}
  #fit .dossier__mode,#fight .dossier__mode{font-size:12px;letter-spacing:2px}
  #fit .dossier__subtitle,#fight .dossier__subtitle{font-size:8.5px;letter-spacing:1.5px}
  .tiers{grid-template-columns:repeat(6,1fr)}
  .tiers > *{grid-column:span 2}
  .tiers > *:nth-child(4){grid-column:2/span 2}
  .ladder__nodes{flex-wrap:wrap}
  .lnode{flex:1 1 30%}
  .ladder__line{display:none}
  .feat-cta{padding:20px 16px 60px}
  .merge{display:none}
  .dossier--combat{margin-bottom:24px}

  /* faq + beta */
  .faq-head{padding:44px 16px 8px}
  .who{padding:40px 16px 8px}
  .faqs{padding:44px 16px 20px}
  .faq-cta{padding:20px 16px 60px}
  .beta-wrap,.beta-success{padding-left:16px;padding-right:16px}
  .beta-frame iframe{height:2900px}
}