:root{
  --ease-enter:cubic-bezier(.16,1,.3,1); --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --ease-move:cubic-bezier(.65,0,.35,1); --ease-exit:cubic-bezier(.55,0,.85,.36);
  --black:#0b0d0c; --ink:#14201d; --white:#ffffff; --paper:#f6f7f3;
  --lime:#dcf24a; --lime-deep:#c9e434; --mint:#83e3ab; --teal:#3fb3a2;
  --teal-dark:#155a52; --pine:#07201d; --pine-2:#0b2f2a; --line:#e4e7e0;
  --red:#e5604c; --grey:#5c6662;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--black);background:var(--white);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.disp{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em}
img{max-width:100%}
button{font-family:inherit;cursor:pointer}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;right:0;height:72px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);z-index:100;display:flex;align-items:center;gap:28px;padding:0 40px;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:12px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px;letter-spacing:.12em;cursor:pointer;user-select:none}
.logo .mark{display:inline-flex;flex-direction:column;gap:3px;width:26px}
.logo .mark span{height:5px;background:var(--black);border-radius:1px}
.logo .mark span:nth-child(2){width:70%}
.logo small{font-family:'Inter',sans-serif;font-weight:600;font-size:10px;letter-spacing:.22em;color:var(--grey);border-left:1px solid var(--line);padding-left:12px;text-transform:uppercase}
.nav-links{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav-links button{background:none;border:none;font-size:14px;font-weight:500;color:var(--black);padding:9px 14px;border-radius:999px;display:flex;align-items:center;gap:7px;transition:background .2s}
.nav-links button:hover{background:#eef0ea}
.nav-links button.done .dot{background:var(--teal)}
.nav-links button.locked{color:#7b847f}
.nav-links button.locked .dot{background:transparent;border:1.5px solid #a8b0ab}
.nav-links .dot{width:8px;height:8px;border-radius:50%;background:#d7dbd4;flex:none}
.nav-links button.active-link{background:var(--black);color:var(--white)}
.nav-links button.active-link .dot{background:var(--lime)}
.score-chip{background:var(--lime);color:var(--black);font-weight:700;font-size:13px;padding:10px 18px;border-radius:999px;border:none;font-family:'Space Grotesk',sans-serif;letter-spacing:.02em}
.pct-chip{background:#e9ebe5;color:var(--teal-dark)}
.save-ind{font-size:10.5px;font-weight:700;color:var(--teal-dark);letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .35s;white-space:nowrap}
.save-ind.on{opacity:1}
.mc-prog{height:6px;background:rgba(255,255,255,.16);border-radius:99px;overflow:hidden;margin:0 0 14px;display:none;position:relative;z-index:2}
.mc-prog i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--lime));border-radius:99px;transition:width .5s var(--ease-move)}
.mc-pct{display:none;font-size:12px;font-weight:600;color:var(--mint);margin:0 0 10px;position:relative;z-index:2}
.mod-card.has-prog .mc-prog,.mod-card.has-prog .mc-pct{display:block}
.progress-rail{position:fixed;top:72px;left:0;right:0;height:3px;background:transparent;z-index:100}
.progress-rail i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--lime));transition:width .6s cubic-bezier(.6,0,.2,1)}

/* ---------- SCREENS ---------- */
.screen{display:none;padding-top:72px;min-height:100vh}
.screen.active{display:block;animation:screenIn .55s cubic-bezier(.4,0,.2,1)}
@keyframes screenIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- SHARED ---------- */
.wrap{max-width:1140px;margin:0 auto;padding:0 32px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-dark);display:flex;align-items:center;gap:12px;justify-content:center}
.eyebrow.left{justify-content:flex-start}
.eyebrow:before{content:"";width:26px;height:2px;background:var(--lime-deep)}
.eyebrow.light{color:var(--mint)}
h2.disp{font-size:clamp(34px,4.2vw,48px);font-weight:600;line-height:1.05;margin:18px 0 20px;letter-spacing:-.03em}
.lede{font-size:18px;line-height:1.65;color:#39423e;max-width:720px}
.center{text-align:center}
.center .lede{margin:0 auto}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--lime);color:var(--black);border:none;border-radius:999px;padding:16px 32px;font-size:16px;font-weight:600;font-family:'Space Grotesk',sans-serif;transition:background .2s}
.btn:hover{background:var(--lime-deep)}
.btn.ghost{background:#e9ebe5;color:var(--black)}
.btn.ghost:hover{background:#dde0d8}
.btn.dark{background:var(--black);color:var(--white)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.section{padding:96px 0}
.band-teal{background:linear-gradient(180deg,#4cb8a6,#1e7a6f);color:var(--white)}
.band-lime{background:linear-gradient(160deg,#c8ef56,#7fe0a2)}
.band-dark{background:var(--pine);color:var(--white)}

/* ---------- HERO ---------- */
#hero{background:radial-gradient(120% 130% at 78% 30%,#123b34 0%,#0a2521 45%,#071b18 100%);color:var(--white);position:relative;overflow:hidden}
.hero-inner{max-width:1140px;margin:0 auto;padding:120px 32px 140px;position:relative;z-index:2}
.hero-inner h1{font-size:clamp(52px,8vw,104px);font-weight:600;line-height:.98;margin:26px 0 28px;letter-spacing:-.03em}
.hero-inner .lede{color:#b8ccc5;font-size:19px;max-width:560px}
.hero-cta{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap}
.hero-meta{display:flex;gap:12px;margin-top:56px;flex-wrap:wrap}
.chip{border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:9px 18px;font-size:13px;font-weight:500;color:#cfe0da;backdrop-filter:blur(4px)}
.panels{position:absolute;inset:0;z-index:1;pointer-events:none}
.panels i{position:absolute;width:300px;height:420px;border-radius:30px;background:linear-gradient(155deg,rgba(220,242,74,.85),rgba(76,184,166,.28) 60%,rgba(7,32,29,0));transform:rotate(45deg);opacity:.85;animation:drift 9s ease-in-out infinite alternate}
.panels i:nth-child(1){right:-40px;top:-90px;animation-delay:0s}
.panels i:nth-child(2){right:120px;top:30px;opacity:.55;filter:blur(1px);animation-delay:-2s}
.panels i:nth-child(3){right:280px;top:150px;opacity:.35;filter:blur(3px);animation-delay:-4s}
.panels i:nth-child(4){right:440px;top:270px;opacity:.18;filter:blur(6px);animation-delay:-6s}
.panels i:nth-child(5){right:-140px;top:220px;opacity:.5;background:linear-gradient(155deg,rgba(131,227,171,.7),rgba(18,59,52,0));filter:blur(2px);animation-delay:-3s}
@keyframes drift{from{transform:rotate(45deg) translateY(0)}to{transform:rotate(45deg) translateY(-26px)}}

/* ---------- MODULE CARDS (overview) ---------- */
.mod-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:56px;max-width:1180px;margin-left:auto;margin-right:auto}
.mod-grid .mod-card{flex:1 1 330px;max-width:372px}
.mod-card{background:var(--pine);color:var(--white);border-radius:24px;padding:34px 30px;display:flex;flex-direction:column;min-height:360px;position:relative;overflow:hidden;transition:transform .25s}
.mod-card:hover{transform:translateY(-6px)}
.mod-card:after{content:"";position:absolute;right:-70px;bottom:-70px;width:210px;height:210px;border-radius:36px;background:linear-gradient(150deg,rgba(220,242,74,.55),rgba(76,184,166,.1));transform:rotate(45deg)}
.mod-card .num{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--mint)}
.mod-card h3{font-size:26px;font-weight:600;margin:14px 0 12px;line-height:1.15}
.mod-card p{font-size:14.5px;line-height:1.6;color:#a9c0b9;flex:1;position:relative;z-index:2}
.mod-card .tags{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 22px;position:relative;z-index:2}
.mod-card .tags span{font-size:11.5px;font-weight:600;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 12px;color:#cfe0da}
.mod-card button{position:relative;z-index:2}

/* ---------- MODULE PAGES ---------- */
.mod-hero{padding:88px 0 64px}
.mod-hero h2{font-size:clamp(42px,5.5vw,64px);font-weight:600;line-height:1.02;margin:18px 0 22px;letter-spacing:-.03em}

/* explainer player */
.player{background:var(--pine);border-radius:28px;overflow:hidden;position:relative;box-shadow:0 30px 60px -30px rgba(7,32,29,.55)}
.stage{position:relative;height:500px;color:var(--white)}
.scene{position:absolute;inset:0;display:none;padding:48px}
.scene.on{display:block}
.caption-bar{position:absolute;left:0;right:0;bottom:96px;text-align:center;padding:0 60px;z-index:5}
.caption-bar span{display:inline-block;background:rgba(7,25,22,.78);border:1px solid rgba(255,255,255,.14);color:#e6f2ec;font-size:15px;line-height:1.5;padding:12px 22px;border-radius:16px;backdrop-filter:blur(6px);max-width:640px}
.controls{display:flex;align-items:center;gap:18px;padding:18px 26px;background:rgba(4,17,15,.9);border-top:1px solid rgba(255,255,255,.08);position:relative;z-index:6}
.play-btn{width:46px;height:46px;border-radius:50%;background:var(--lime);border:none;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--black);flex:none;transition:transform .2s}
.play-btn:hover{transform:scale(1.08)}
.track{position:relative;flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.track i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--lime));box-shadow:0 0 10px rgba(220,242,74,.55)}
.track::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent calc(25% - 1px),rgba(4,17,15,.7) 25%,transparent calc(25% + 1px)),
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(4,17,15,.7) 50%,transparent calc(50% + 1px)),
    linear-gradient(90deg,transparent calc(75% - 1px),rgba(4,17,15,.7) 75%,transparent calc(75% + 1px))}
.scene-dots{display:flex;gap:2px}
.scene-dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;transition:background .2s;border:none;padding:8px;background-clip:content-box;box-sizing:content-box}
.scene-dots button.cur{background:var(--lime);background-clip:content-box}
.p-label{font-size:12px;letter-spacing:.14em;font-weight:600;color:#9fb8b0;text-transform:uppercase}

/* ---------- SVG MOTION GRAPHICS ---------- */
.scene svg.mg{position:absolute;left:0;right:0;top:84px;width:100%;height:calc(100% - 152px);overflow:visible}
.mg text{font-family:'Inter',sans-serif}
.mg .nlab{font-size:10.5px;letter-spacing:.14em;fill:#9fb8b0;text-anchor:middle;font-weight:600}
.mg .nemj{font-size:27px;text-anchor:middle}
.mg .nbox{fill:url(#gSteel);stroke:rgba(131,227,171,.34);stroke-width:1.5;filter:url(#fDrop)}
.mg .nbox.hq{stroke:url(#gLime);stroke-width:2.5;fill:url(#gVault);filter:url(#fGlow)}
.mg .nbox.bad{fill:url(#gSteel);stroke:#e5604c;stroke-width:2}
.mg .nbox.bad{stroke:#e5604c;fill:rgba(229,96,76,.12)}
.mg .lnk{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2}
.mg .lnk.hot{stroke:url(#gTeal)}
.mg .lnk.evil{stroke:#e5604c;stroke-width:2.5}
.mg .flow{fill:none;stroke:#dcf24a;stroke-width:3;stroke-linecap:round;stroke-dasharray:3 30;animation:sflow 1.1s linear infinite}
.mg .flow.evil{stroke:#ff7a64}
.mg .bignum{font-family:'Space Grotesk',sans-serif;font-weight:700;fill:url(#gLime);text-anchor:middle}
.mg .cap{font-size:12px;fill:#cfe0da;text-anchor:middle;font-weight:500}
.mg .pill{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.22);stroke-width:1.2}
.mg .pill.lit{stroke:#dcf24a;fill:rgba(220,242,74,.1)}
.mg .ptxt{font-size:11.5px;fill:#e6f2ec;text-anchor:middle;font-weight:600;letter-spacing:.04em}
.mg .ref{font-size:9.5px;fill:#83e3ab;text-anchor:middle;letter-spacing:.1em;font-weight:700}
/* primitives */
.anim.sdraw{stroke-dasharray:1200;stroke-dashoffset:1200;animation:sdraw 1.3s forwards var(--ease-enter)}
.anim.spop{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:spop .7s forwards var(--ease-pop)}
.anim.sfade{opacity:0;animation:sfadein .7s forwards var(--ease-enter)}
.anim.sgrow{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:sgrowY .9s forwards var(--ease-pop)}
.anim.sring{transform-box:fill-box;transform-origin:center;animation:sringk 2.2s ease-out infinite}
.anim.sspin{transform-box:fill-box;transform-origin:center;animation:sspink 9s linear infinite}
.anim.sbob{animation:sbobk 4s ease-in-out infinite}
.anim.sblink{animation:sblinkk 1.1s steps(1) infinite}
.anim.travel{animation:travelk 2.4s 1.4s forwards var(--ease-move)}
.anim.bounceoff{animation:bounceoffk 2.6s 1.8s forwards var(--ease-exit)}
@keyframes sdraw{to{stroke-dashoffset:0}}
@keyframes spop{to{transform:scale(1)}}
@keyframes sfadein{to{opacity:1}}
@keyframes sgrowY{to{transform:scaleY(1)}}
@keyframes sringk{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes sspink{to{transform:rotate(360deg)}}
@keyframes sbobk{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes sblinkk{50%{opacity:.25}}
@keyframes sflow{to{stroke-dashoffset:-66}}
@keyframes travelk{0%{transform:translate(0,0)}100%{transform:translate(470px,0)}}
@keyframes bounceoffk{0%{transform:translate(0,0);opacity:1}55%{transform:translate(240px,0)}70%{transform:translate(228px,-26px)}100%{transform:translate(215px,120px);opacity:0}}
.sd1{animation-delay:.1s}.sd2{animation-delay:.4s}.sd3{animation-delay:.75s}.sd4{animation-delay:1.1s}
.sd5{animation-delay:1.5s}.sd6{animation-delay:1.95s}.sd7{animation-delay:2.45s}.sd8{animation-delay:3s}
.sd9{animation-delay:3.6s}.sd10{animation-delay:4.3s}

/* ---------- LIVING-ESTATE MOTIF KIT ---------- */
.mg .floor{opacity:0;animation:sfadein 1.1s .1s var(--ease-enter) forwards}
.mg .packet{fill:none;stroke:url(#gTeal);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:2 26;animation:pktRun 1s linear infinite}
.mg .packet.evil{stroke:url(#gRed)}
@keyframes pktRun{to{stroke-dashoffset:-56}}
.anim.pulse{transform-box:fill-box;transform-origin:center;animation:glowPulse 2.6s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.anim.ripple{transform-box:fill-box;transform-origin:center;opacity:0;animation:shieldRipple 1.2s var(--ease-move) forwards}
@keyframes shieldRipple{0%{opacity:.9;transform:scale(.4)}60%{opacity:.5}100%{opacity:0;transform:scale(2)}}
.anim.radar{transform-box:fill-box;transform-origin:left bottom;animation:radarSweep 4.5s linear infinite}
@keyframes radarSweep{to{transform:rotate(360deg)}}
.anim.vaultwheel{transform-box:fill-box;transform-origin:center;animation:vaultSpin 1.4s 3.4s var(--ease-pop) both}
@keyframes vaultSpin{0%{transform:rotate(0)}100%{transform:rotate(150deg)}}
.anim.vaultseal{transform-box:fill-box;transform-origin:right center;animation:vaultClose 1.1s 3.4s var(--ease-pop) both}
@keyframes vaultClose{0%{transform:scaleX(0)}70%{transform:scaleX(1.03)}100%{transform:scaleX(1)}}
.anim.locksnap{transform-box:fill-box;transform-origin:center;animation:lockSnap .8s 3s var(--ease-pop) both}
@keyframes lockSnap{0%{transform:translateY(-24px);opacity:.4}55%{transform:translateY(4px);opacity:1}100%{transform:translateY(0)}}
.anim.ignite{opacity:.18;animation:netIgnite .7s var(--ease-pop) forwards}
@keyframes netIgnite{to{opacity:1}}
.anim.isorise{transform-box:fill-box;transform-origin:bottom;opacity:0;transform:translateY(20px) scale(.9);animation:isoRise .85s var(--ease-pop) forwards}
@keyframes isoRise{to{opacity:1;transform:none}}

/* ---------- CINEMATIC LAYER ---------- */
/* camera rig — on the scene svg.mg root (carries no SVG transform attr) */
.mg.cam-push,.mg.cam-pull,.mg.cam-drift-r,.mg.cam-drift-l{transform-origin:50% 52%;will-change:transform}
.mg.cam-push{animation:camPush 10s var(--ease-move) forwards}
.mg.cam-pull{animation:camPull 10s var(--ease-enter) forwards}
.mg.cam-drift-r{animation:camDriftR 10s var(--ease-move) forwards}
.mg.cam-drift-l{animation:camDriftL 10s var(--ease-move) forwards}
@keyframes camPush{0%{transform:scale(1)}100%{transform:scale(1.055) translateY(-4px)}}
@keyframes camPull{0%{transform:scale(1.07) translateY(6px)}18%{transform:scale(1.07) translateY(6px)}100%{transform:scale(1)}}
@keyframes camDriftR{0%{transform:scale(1.05) translateX(18px)}100%{transform:scale(1.05) translateX(-18px)}}
@keyframes camDriftL{0%{transform:scale(1.05) translateX(-18px)}100%{transform:scale(1.05) translateX(18px)}}
/* vignette + once-per-scene light sweep */
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(120% 95% at 50% 42%,transparent 58%,rgba(4,17,15,.42) 100%)}
/* subtle film grain over the whole stage */
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px}
/* per-module signature environment glow (custom prop inherits into .stage) */
#player-m1{--env:rgba(63,179,162,.30)} #player-m2{--env:rgba(220,242,74,.24)}
#player-m3{--env:rgba(131,227,171,.28)} #player-m4{--env:rgba(255,180,106,.24)} #player-m5{--env:rgba(110,214,198,.26)}
.stage{box-shadow:inset 0 -95px 130px -78px var(--env,rgba(63,179,162,.28)),inset 0 60px 90px -70px rgba(4,17,15,.55)}

.scene::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;
  background:linear-gradient(112deg,transparent 42%,rgba(220,242,74,.06) 50%,rgba(255,255,255,.05) 54%,transparent 62%);
  transform:translateX(-70%)}
.scene.on::before{animation:sweep 2.4s .5s var(--ease-move) forwards}
@keyframes sweep{0%{opacity:0;transform:translateX(-70%)}12%{opacity:1}100%{opacity:0;transform:translateX(70%)}}
/* ambient dust parallax */
.mg .dust circle{fill:#83e3ab;opacity:0;animation:dustDrift 9s linear infinite}
.mg .dust circle:nth-child(2n){fill:#3fb3a2;animation-duration:11s}
.mg .dust circle:nth-child(3n){fill:#dcf24a;animation-duration:13s}
.mg .dust circle:nth-child(1){animation-delay:-1s}.mg .dust circle:nth-child(2){animation-delay:-2.4s}
.mg .dust circle:nth-child(3){animation-delay:-3.8s}.mg .dust circle:nth-child(4){animation-delay:-5.2s}
.mg .dust circle:nth-child(5){animation-delay:-6.6s}.mg .dust circle:nth-child(6){animation-delay:-8s}
.mg .dust circle:nth-child(7){animation-delay:-9.4s}.mg .dust circle:nth-child(8){animation-delay:-10.8s}
@keyframes dustDrift{0%{transform:translate(0,14px);opacity:0}12%{opacity:.45}60%{opacity:.28}100%{transform:translate(26px,-52px);opacity:0}}
/* phase HUD chip */
.mg .chip rect{fill:rgba(7,25,22,.72);stroke:rgba(220,242,74,.4);stroke-width:1.2}
.mg .chip text{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;fill:#dcf24a;letter-spacing:.22em;text-anchor:middle}
.mg .chip .cdot{fill:#dcf24a;animation:chipPulse 1.6s ease-in-out infinite}
.anim.chip{opacity:0;animation:chipIn .8s .35s var(--ease-enter) forwards}
@keyframes chipIn{0%{opacity:0;transform:translateX(-16px)}100%{opacity:1;transform:none}}
@keyframes chipPulse{0%,100%{opacity:1}50%{opacity:.25}}
/* impact kit + kinetic numbers */
.anim.hit{transform-box:fill-box;transform-origin:center;animation:hitShake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes hitShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-5px,0)}40%{transform:translate(4px,0)}60%{transform:translate(-3px,0)}80%{transform:translate(2px,0)}}
.anim.thud{transform-box:fill-box;transform-origin:center;opacity:0;animation:thudIn .55s var(--ease-pop) both}
@keyframes thudIn{0%{opacity:0;transform:translateY(-16px) scale(1.2)}70%{opacity:1;transform:translateY(2px) scale(.97)}100%{opacity:1;transform:none}}
.mg text.numIn{animation:titleIn 1.2s 1.3s var(--ease-enter) both}
@keyframes titleIn{0%{opacity:0;letter-spacing:.12em;transform:translateY(14px);filter:blur(6px)}60%{filter:blur(0)}100%{opacity:1;letter-spacing:-.01em;transform:none;filter:blur(0)}}

/* scene visuals */
.fadeup{opacity:0;transform:translateY(22px);animation:fu .7s forwards}
@keyframes fu{to{opacity:1;transform:none}}
.scene h4{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:600;margin-bottom:6px}

/* ---------- FOCUS & A11Y ---------- */
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.band-dark :focus-visible,.player :focus-visible,.ai-band :focus-visible,#hero :focus-visible,footer :focus-visible{outline-color:var(--lime)}

/* ---------- TOAST ---------- */
#toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,90px);background:var(--pine);color:#e6f2ec;border:1px solid rgba(220,242,74,.45);border-radius:16px;padding:15px 26px;font-size:14px;font-weight:500;z-index:450;opacity:0;transition:.45s cubic-bezier(.3,1.2,.4,1);pointer-events:none;box-shadow:0 18px 40px -18px rgba(4,17,15,.6)}
#toast.show{transform:translate(-50%,0);opacity:1}
#toast b{color:var(--lime)}

/* ---------- OBJECTIVES & RECAP ---------- */
.obj-label{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-dark);margin-top:36px}
.objectives{display:grid;grid-template-columns:1fr 1fr;gap:11px 28px;margin-top:16px;max-width:860px;list-style:none}
.objectives li{font-size:14.5px;line-height:1.55;color:#39423e;padding-left:28px;position:relative;font-weight:500}
.objectives li:before{content:"\2713";position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:5px;background:linear-gradient(140deg,var(--lime),var(--mint));color:var(--pine);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.recap{background:var(--white);border:1.5px solid var(--line);border-radius:24px;padding:34px 38px;margin-bottom:34px}
.recap h4{font-size:20px;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.recap h4 small{font-size:10.5px;letter-spacing:.2em;font-weight:700;color:var(--teal-dark);text-transform:uppercase;background:var(--paper);border-radius:999px;padding:5px 12px}
.recap ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 30px}
.recap li{font-size:13.5px;line-height:1.6;color:#39423e;padding-left:24px;position:relative}
.recap li:before{content:"\2192";position:absolute;left:0;color:var(--teal);font-weight:700}
.recap li b{font-family:'Space Grotesk',sans-serif;font-size:12px;color:var(--teal-dark)}

/* ---------- RESOURCES ---------- */
.res-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.res-row a{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.3);color:#cfe0da;text-decoration:none;border-radius:999px;padding:11px 20px;font-size:13.5px;font-weight:600;transition:border-color .2s,color .2s}
.res-row a:hover{border-color:var(--lime);color:var(--lime)}
.res-label{margin-top:64px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--mint)}

/* ---------- CONTENT BLOCKS ---------- */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.stat-card{border:1px solid var(--line);border-radius:24px;padding:30px}
.stat-card b{font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:700;display:block;letter-spacing:-.02em}
.stat-card span{font-size:14px;color:var(--grey);line-height:1.55;display:block;margin-top:8px}
.stat-card em{display:block;font-style:normal;font-size:11px;color:#6f7a74;margin-top:12px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:48px}
.step{background:var(--paper);border-radius:24px;padding:24px 18px;position:relative}
.step b{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.16em;color:var(--teal-dark)}
.step h4{font-size:16.5px;margin:9px 0 8px}
.step p{font-size:13px;line-height:1.55;color:var(--grey)}
.acc{margin-top:44px;border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item>button{width:100%;background:none;border:none;display:flex;align-items:center;gap:18px;padding:24px 6px;text-align:left}
.acc-item .ref{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;background:var(--black);color:var(--lime);border-radius:10px;padding:7px 12px;flex:none;letter-spacing:.04em}
.acc-item h4{font-size:17.5px;font-weight:600;flex:1}
.acc-item .chev{font-size:18px;transition:transform .3s;color:var(--grey)}
.acc-item.open .chev{transform:rotate(45deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.acc-body-in{padding:2px 6px 26px 76px;font-size:15px;line-height:1.7;color:#39423e}
.acc-body-in ul{margin:10px 0 0 18px}
.acc-body-in li{margin-bottom:8px}
.reveal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.reveal{display:block;width:100%;border-radius:24px;min-height:172px;cursor:pointer;perspective:900px;background:none;border:none;text-align:left;padding:0}
.reveal .in{position:relative;display:block;width:100%;height:100%;min-height:172px;transition:transform .6s;transform-style:preserve-3d}
.reveal.flip .in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:24px;padding:24px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.face.front{background:var(--pine);color:var(--white)}
.face.front .ico{font-size:26px;color:var(--lime);line-height:0}
.face.front .ico svg{width:28px;height:28px}
.face.front h4{font-size:16.5px;line-height:1.3}
.face.front small{color:var(--mint);font-size:11.5px;letter-spacing:.14em;font-weight:600;text-transform:uppercase}
.face.back{background:var(--lime);transform:rotateY(180deg);color:var(--black)}
.face.back p{font-size:13.5px;line-height:1.55;font-weight:500}
.tbl{width:100%;border-collapse:collapse;margin-top:44px;font-size:15px}
.tbl th{font-family:'Space Grotesk',sans-serif;text-align:left;padding:16px 18px;border-bottom:2px solid var(--black);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.tbl td{padding:16px 18px;border-bottom:1px solid var(--line);line-height:1.55;vertical-align:top}
.tbl td:first-child{font-weight:600;white-space:nowrap}
.good{color:#177a4e;font-weight:600}
.badt{color:var(--red);font-weight:600}
.fw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.fw{border:1px solid var(--line);border-radius:24px;padding:26px;transition:border-color .2s, transform .2s}
.fw:hover{border-color:var(--teal);transform:translateY(-3px)}
.fw b{font-family:'Space Grotesk',sans-serif;font-size:19px;display:block}
.fw small{color:var(--teal-dark);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.fw p{font-size:13.5px;color:var(--grey);line-height:1.55;margin-top:9px}
.dom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
.dom{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:24px;padding:26px 22px;color:var(--white)}
.dom b{font-family:'Space Grotesk',sans-serif;font-size:34px;color:var(--lime);display:block}
.dom h4{font-size:16px;margin:10px 0 10px;line-height:1.3}
.dom p{font-size:12.5px;line-height:1.55;color:#d3e7df}

/* ---------- AI SPOTLIGHT ---------- */
.ai-band{background:var(--pine);border-radius:32px;padding:56px;margin-top:96px;color:var(--white);position:relative;overflow:hidden}
.ai-band:before{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:60px;background:linear-gradient(150deg,rgba(220,242,74,.5),rgba(76,184,166,.12));transform:rotate(45deg);filter:blur(2px)}
.ai-band .eyebrow{color:var(--lime)}
.ai-band .eyebrow:before{background:var(--lime)}
.ai-band h2{font-size:clamp(34px,4.2vw,48px);font-weight:600;line-height:1.06;margin:18px 0 18px;position:relative;z-index:2;letter-spacing:-.03em}
.ai-band .lede{color:#a9c0b9;position:relative;z-index:2}
.ai-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:42px;position:relative;z-index:2}
.ai-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:24px;padding:26px;transition:border-color .2s}
.ai-card:hover{border-color:var(--lime)}
.ai-card .tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--black);background:var(--lime);border-radius:999px;padding:4px 12px;margin-bottom:14px}
.ai-card .tag.def{background:var(--mint)}
.ai-card h4{font-size:17.5px;margin-bottom:9px}
.ai-card p{font-size:13.5px;line-height:1.62;color:#b9cdc6}
.ai-card p b{color:var(--lime);font-weight:600}
.ai-check{margin-top:34px;position:relative;z-index:2;background:rgba(220,242,74,.08);border:1px solid rgba(220,242,74,.35);border-radius:24px;padding:28px 30px}
.ai-check h4{font-family:'Space Grotesk',sans-serif;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:16px}
.ai-check ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.ai-check li{font-size:13.5px;line-height:1.55;color:#dcebe4;padding-left:26px;position:relative}
.ai-check li:before{content:"\2713";position:absolute;left:0;top:0;color:var(--lime);font-weight:700}

/* ---------- SCROLL REVEAL ---------- */
.io{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.io.vis{opacity:1;transform:none}

/* ---------- TIERED ADMIN MODEL ---------- */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.tier{position:relative;border-radius:24px;padding:28px 26px 26px;overflow:hidden;background:var(--pine);color:var(--white);transition:transform .25s var(--ease-enter),box-shadow .25s}
.tier::after{content:"";position:absolute;right:-60px;bottom:-60px;width:180px;height:180px;border-radius:32px;transform:rotate(45deg);opacity:.9;background:linear-gradient(150deg,rgba(220,242,74,.18),rgba(76,184,166,.05))}
.tier:hover{transform:translateY(-6px);box-shadow:0 28px 52px -28px rgba(7,32,29,.6)}
.tier .t-num{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--mint)}
.tier h4{font-size:21px;font-weight:600;margin:8px 0 6px;line-height:1.2;position:relative;z-index:2}
.tier .t-sub{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9fb8b0;margin-bottom:16px}
.tier p{font-size:13.5px;line-height:1.6;color:#b9cdc6;position:relative;z-index:2}
.tier .t-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;position:relative;z-index:2}
.tier .sev,.tbl .sev{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 11px;display:inline-block}
.sev.crit{background:var(--red);color:#fff}
.sev.high{background:#ffb46a;color:#3a2410}
.sev.scope{background:rgba(255,255,255,.1);color:#cfe0da;border:1px solid rgba(255,255,255,.22)}
.tier.t0{border:1.5px solid rgba(220,242,74,.4)}
.tier.t0::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--lime),var(--teal));z-index:3}
.tier.t0 .t-num{color:var(--lime)}
.tbl .sevcell{white-space:nowrap}
.tbl .sev{font-size:10px;padding:4px 10px}
@media(max-width:900px){.tier-grid{grid-template-columns:1fr}}

/* ---------- GUIDED MODULE SECTIONS ---------- */
.step-locked{display:none!important}
.step-revealing{animation:pillarIn .55s var(--ease-enter)}
.gsec-continue{display:flex;justify-content:center;padding:6px 0 46px}
.gsec-continue.used{display:none}
.gsec-continue .btn{box-shadow:0 12px 30px -14px rgba(21,90,82,.5)}

/* ---------- MANDATORY PROGRESSIVE PILLARS ---------- */
.pillar.locked{display:none}
.pillar.revealing{animation:pillarIn .55s var(--ease-enter)}
@keyframes pillarIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pillar-progress{display:flex;align-items:center;gap:16px;margin:4px 0 26px}
.pillar-progress .pp-label{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--teal-dark);white-space:nowrap}
.pillar-progress .pp-track{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden;max-width:340px}
.pillar-progress .pp-fill{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--lime));border-radius:99px;transition:width .55s var(--ease-move)}
.pillar-hint{font-size:12.5px;color:var(--grey);font-style:italic;white-space:nowrap}
/* required-foundation + completion badges in the pillar header */
.pill-tag{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pine);background:var(--lime);border-radius:999px;padding:4px 10px;margin-left:12px;flex:none}
.pill-badge{display:none;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#1d9d63;color:#fff;font-size:12px;font-weight:800;margin-left:12px;flex:none}
.pillar.done .pill-badge{display:inline-flex}
.pillar.done>button .chev{opacity:.35}
.pillar-cta{margin-top:18px}
.pillar-next{display:inline-flex;align-items:center;gap:10px;background:var(--pine);color:var(--white);border:none;border-radius:999px;padding:13px 24px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:background .2s,transform .2s}
.pillar-next:hover{background:var(--teal-dark);transform:translateX(3px)}
.pillar-next.re{background:#1d9d63}
.pillar-done{display:inline-flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:var(--teal-dark)}
@media(max-width:600px){.pillar-hint{display:none}.pill-tag{display:none}}
/* quiz stays locked until all five pillars are completed */
.pillar-gate{display:none;background:var(--pine);color:#e6f2ec;border:1.5px dashed rgba(220,242,74,.5);border-radius:22px;padding:26px 30px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;line-height:1.5;text-align:center}
.pillar-gate b{color:var(--lime)}
.quiz-locked .pillar-gate{display:block}
.quiz-locked .quiz-head,.quiz-locked .q-list,.quiz-locked .quiz-result{display:none}

/* ---------- QUIZ ---------- */
.quiz-wrap{background:var(--paper);border-radius:32px;padding:56px;margin-top:96px}
.quiz-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.quiz-head h3{font-size:32px;font-weight:600}
.quiz-head .qmeta{font-size:13.5px;color:var(--grey);font-weight:500}
.qcount{display:inline-flex;align-items:center;gap:10px;background:var(--black);color:var(--white);border-radius:999px;padding:9px 18px;font-size:13px;font-weight:600;font-family:'Space Grotesk',sans-serif}
.qcount b{color:var(--lime)}
.q-item{background:var(--white);border-radius:24px;padding:30px;margin-bottom:18px;border:1px solid var(--line);transition:opacity .4s,filter .4s}
.q-item.q-locked{opacity:.38;filter:grayscale(.6);pointer-events:none;user-select:none}
.q-item.q-locked .opts,.q-item.q-locked .qq span{filter:blur(2.5px)}
.q-item .mand{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dark);background:#e3f2ea;border-radius:999px;padding:4px 11px;margin-bottom:12px}
.q-item .qq{display:flex;gap:14px;font-size:16.5px;font-weight:600;line-height:1.5;font-family:'Space Grotesk',sans-serif}
.q-item .qq b{color:var(--teal-dark);flex:none}
.opts{margin-top:18px;display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:13px;border:1.5px solid var(--line);background:var(--white);border-radius:14px;padding:14px 16px;font-size:14.5px;text-align:left;line-height:1.45;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--teal)}
.opt i{width:22px;height:22px;border-radius:50%;border:2px solid #c9cfc9;flex:none;font-style:normal;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.opt.correct{border-color:#1d9d63;background:#ecfaf2}
.opt.correct i{background:#1d9d63;border-color:#1d9d63;color:#fff}
.opt.wrong{border-color:var(--red);background:#fdf0ee}
.opt.wrong i{background:var(--red);border-color:var(--red);color:#fff}
.opt:disabled{cursor:default}
.opt:disabled:hover{border-color:var(--line)}
.opt.correct:disabled:hover{border-color:#1d9d63}
.opt.wrong:disabled:hover{border-color:var(--red)}
.why{display:none;margin-top:16px;background:var(--pine);color:#dcefe7;border-radius:14px;padding:16px 20px;font-size:13.5px;line-height:1.6}
.why b{color:var(--lime)}
.why.show{display:block;animation:fu .4s}
.quiz-result{display:none;margin-top:28px;background:var(--black);color:var(--white);border-radius:24px;padding:34px;text-align:center}
.quiz-result.show{display:block;animation:fu .5s}
.quiz-result .rs{font-family:'Space Grotesk',sans-serif;font-size:44px;font-weight:700;color:var(--lime)}
.quiz-result p{color:#b8c8c2;font-size:14.5px;margin:10px 0 22px}

/* ---------- FINAL ---------- */
.ring-box{display:flex;justify-content:center;margin:40px 0 10px}
.ring{position:relative;width:230px;height:230px}
.ring svg{transform:rotate(-90deg)}
.ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .val b{font-family:'Space Grotesk',sans-serif;font-size:52px;font-weight:700}
.ring .val span{font-size:13px;color:#a9c0b9;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.break-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:1120px;margin:44px auto 0}
.break-row .break{flex:1 1 180px;max-width:210px}
.break{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:24px;text-align:center}
.break b{font-family:'Space Grotesk',sans-serif;font-size:30px;color:var(--lime)}
.break span{display:block;font-size:12.5px;color:#a9c0b9;margin-top:6px;letter-spacing:.06em}
.verdict{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600;margin-top:36px}
.cert-input{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.cert-input input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:999px;color:var(--white);padding:15px 26px;font-size:15px;min-width:300px;font-family:'Inter',sans-serif}
.cert-input input::placeholder{color:#8fa8a0}
.cert-input input:focus{border-color:var(--lime)}
#examNameStep input{width:100%;max-width:420px;background:var(--white);border:1.5px solid #cfd6d1;border-radius:14px;color:var(--black);padding:15px 20px;font-size:16px;font-family:'Space Grotesk','Inter',sans-serif;outline:none;transition:border-color .15s}
#examNameStep input:focus{border-color:var(--teal)}
#examNameStep input.bad{border-color:var(--red)}
/* exam integrity: questions are not selectable/copyable */
#quiz-exam .q-item{user-select:none;-webkit-user-select:none}
/* Certificate — course identity (pine/lime/teal, Space Grotesk) with the HUMAIN wordmark */
#certificate{display:none;background:var(--white);color:var(--black);max-width:980px;margin:60px auto 0;border-radius:0;padding:0;text-align:center;position:relative;border:none;aspect-ratio:1.4142;box-shadow:0 30px 60px -30px rgba(7,32,29,.55);overflow:hidden;font-family:'Inter',sans-serif}
#certificate.show{display:block;animation:fu .6s}
#certificate .c-frame{position:absolute;inset:16px;border:2px solid var(--black);pointer-events:none;z-index:3}
#certificate .c-body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7% 9%;z-index:2}
#certificate .c-logo{width:16%;margin-bottom:2.8%}
#certificate .c-logo svg{width:100%;height:auto;display:block}
#certificate .c-eyebrow{font-size:clamp(8px,1vw,12px);letter-spacing:.3em;font-weight:700;text-transform:uppercase;color:var(--teal-dark);margin-bottom:2.4%}
#certificate h3{font-size:clamp(24px,3.8vw,46px);font-weight:600;color:var(--black);letter-spacing:-.02em;margin:0 0 2.6%;line-height:1.05}
#certificate .c-presented{font-size:clamp(11px,1.3vw,15px);color:var(--grey);margin-bottom:1.8%}
#certificate .c-name{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,4.2vw,52px);font-weight:700;color:var(--black);line-height:1.1;margin:0 0 2.6%;border-bottom:3px solid var(--lime-deep);display:inline-block;padding:0 30px 10px}
#certificate p{font-size:clamp(10.5px,1.25vw,15px);color:var(--grey);line-height:1.65;max-width:76%;margin:0 auto 2.6%}
#certificate p b{color:var(--black)}
#certificate .c-code{font-size:clamp(8px,.95vw,11.5px);letter-spacing:.24em;font-weight:700;color:var(--teal-dark);text-transform:uppercase;margin-bottom:4.2%}
#certificate .c-meta{display:flex;gap:12%;justify-content:center;align-items:flex-end;width:100%;margin-top:0}
#certificate .c-meta .block{min-width:24%}
#certificate .c-sig{font-family:'Dancing Script','Segoe Script','Brush Script MT',cursive;font-size:clamp(18px,2.5vw,32px);font-weight:600;color:var(--black);line-height:1;margin-bottom:2px;transform:rotate(-2deg)}
#certificate .c-verify{font-size:clamp(7px,.85vw,10.5px);letter-spacing:.14em;color:#9aa5a1;margin-top:3.2%;text-transform:uppercase;font-weight:600}
#certificate .c-meta .value{font-family:'Space Grotesk',sans-serif;font-size:clamp(12px,1.4vw,17px);font-weight:600;color:var(--black);padding-top:10px;border-top:2px solid var(--black);margin-bottom:6px}
#certificate .c-meta .label{font-size:clamp(7.5px,.9vw,11px);letter-spacing:.22em;text-transform:uppercase;color:var(--grey);font-weight:600}

/* ---------- CURTAIN PAGE TRANSITIONS ---------- */
#curtain{position:fixed;inset:0;z-index:420;pointer-events:none;display:flex}
#curtain i{flex:1;background:var(--pine);transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.76,0,.24,1)}
#curtain i:nth-child(2){background:#0e2f2a;transition-delay:.07s}
#curtain i:nth-child(3){transition-delay:.14s}
#curtain.cover i{transform:scaleY(1)}
#curtain.out i{transform-origin:bottom;transform:scaleY(0)}

/* ---------- NAV AUTO-HIDE ---------- */
nav{transition:transform .45s cubic-bezier(.4,0,.2,1)}
.progress-rail{transition:transform .45s cubic-bezier(.4,0,.2,1)}
body.nav-hidden nav{transform:translateY(-105%)}
body.nav-hidden .progress-rail{transform:translateY(-78px)}
#railFill{box-shadow:0 0 12px rgba(220,242,74,.7)}

/* ---------- CURSOR SPOTLIGHT ---------- */
#spot{position:fixed;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:5;
  background:radial-gradient(circle,rgba(220,242,74,.10),rgba(76,184,166,.05) 45%,transparent 70%);
  mix-blend-mode:screen;transform:translate(-50%,-50%);left:-600px;top:-600px}

/* ---------- BUTTON SHEEN ---------- */
.btn{position:relative;overflow:hidden}
.btn:after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-22deg);pointer-events:none}
.btn:hover:after{animation:sheen .75s cubic-bezier(.4,0,.2,1)}
@keyframes sheen{to{left:135%}}

/* ---------- HERO AURORA + SHINE + SCROLL CUE ---------- */
.aurora{position:absolute;inset:-20%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.55}
.aurora b{position:absolute;width:52vw;height:52vw;border-radius:50%}
.aurora b:nth-child(1){background:radial-gradient(circle,rgba(63,179,162,.5),transparent 65%);left:-8%;top:-16%;animation:aur1 16s ease-in-out infinite alternate}
.aurora b:nth-child(2){background:radial-gradient(circle,rgba(220,242,74,.28),transparent 65%);right:-14%;top:6%;animation:aur2 19s ease-in-out infinite alternate}
.aurora b:nth-child(3){background:radial-gradient(circle,rgba(131,227,171,.24),transparent 62%);left:26%;bottom:-30%;animation:aur1 22s ease-in-out infinite alternate-reverse}
@keyframes aur1{from{transform:translate(0,0) scale(1)}to{transform:translate(7%,9%) scale(1.14)}}
@keyframes aur2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-8%,6%) scale(.95)}}
.rl i.shine{background:linear-gradient(100deg,#fff 15%,var(--lime) 42%,var(--mint) 58%,#fff 85%);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:rise .85s 2.5s forwards cubic-bezier(.16,.7,.2,1),shimmer 6.5s 3.8s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.scroll-cue{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:9px;
  color:#9fb8b0;font-size:10.5px;font-weight:700;letter-spacing:.3em;opacity:0;animation:fu .8s 3.9s forwards;transition:opacity .4s}
.scroll-cue .wheel{width:24px;height:38px;border:2px solid rgba(255,255,255,.4);border-radius:13px;position:relative}
.scroll-cue .wheel:after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:3px;background:var(--lime);animation:wheel 1.7s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(13px);opacity:0}100%{opacity:0}}

/* ---------- TYPEWRITER & CAPTIONS ---------- */
.scene h4.typing:after{content:"";display:inline-block;width:10px;height:1em;margin-left:4px;vertical-align:-2px;background:var(--lime);animation:caret .7s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.caption-bar span{transition:opacity .3s,transform .3s}
.caption-bar span.swap{opacity:0;transform:translateY(10px)}

/* ---------- EYEBROW LINE DRAW & CHIP POP ---------- */
.io.vis.eyebrow:before,.io.vis .eyebrow:before{animation:linedraw .7s cubic-bezier(.4,0,.2,1)}
@keyframes linedraw{from{width:0}to{width:26px}}
.score-chip.pop{animation:chippop .5s cubic-bezier(.3,1.8,.4,1)}
@keyframes chippop{40%{transform:scale(1.18)}}
.quiz-result.show{position:relative}
.quiz-result.show:before{content:"";position:absolute;inset:-2px;border-radius:24px;z-index:-1;
  background:linear-gradient(120deg,var(--teal),var(--lime),var(--mint),var(--teal));background-size:300% 300%;animation:borderflow 5s linear infinite}
@keyframes borderflow{from{background-position:0% 50%}to{background-position:300% 50%}}

/* ---------- INTRO SPLASH ---------- */
#splash{position:fixed;inset:0;background:var(--pine);z-index:500;display:flex;align-items:center;justify-content:center;transition:transform .75s cubic-bezier(.7,0,.2,1)}
#splash.hide{transform:translateY(-101%)}
.sp-in{display:flex;flex-direction:column;align-items:center;gap:14px}
.sp-mark{display:flex;flex-direction:column;gap:5px;width:44px}
.sp-mark span{height:8px;border-radius:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;animation:spbar .5s forwards cubic-bezier(.2,.7,.2,1)}
.sp-mark span:nth-child(1){animation-delay:.15s}
.sp-mark span:nth-child(2){width:70%;animation-delay:.3s}
.sp-mark span:nth-child(3){animation-delay:.45s}
@keyframes spbar{to{transform:scaleX(1)}}
.sp-word{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px;letter-spacing:.18em;color:var(--white);display:flex;overflow:hidden}
.sp-word i{font-style:normal;transform:translateY(120%);animation:rise .55s forwards cubic-bezier(.2,.7,.2,1)}
.sp-tag{font-size:11px;letter-spacing:.34em;color:var(--mint);font-weight:600;opacity:0;animation:fu .6s 1.15s forwards}
@keyframes rise{to{transform:translateY(0)}}

/* ---------- HERO HEADLINE REVEAL & MARQUEE ---------- */
.rl{display:inline-block;overflow:hidden;vertical-align:bottom}
.rl i{font-style:normal;display:inline-block;transform:translateY(112%);animation:rise .85s forwards cubic-bezier(.16,.7,.2,1)}
.hero-inner .eyebrow,.hero-inner .lede,.hero-cta,.hero-meta{opacity:0;animation:fu .8s forwards}
.hero-inner .eyebrow{animation-delay:2.3s}
.hero-inner .lede{animation-delay:3.05s}
.hero-cta{animation-delay:3.3s}
.hero-meta{animation-delay:3.55s}
.hero-meta .chip{opacity:0;animation:fu .5s forwards}
.marquee{position:absolute;left:0;right:0;bottom:0;border-top:1px solid rgba(255,255,255,.12);padding:16px 0;overflow:hidden;z-index:3;background:rgba(4,17,15,.45);backdrop-filter:blur(4px)}
.mq-track{display:flex;gap:56px;width:max-content;white-space:nowrap;animation:mq 30s linear infinite}
.mq-track span{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--mint)}
.mq-track span b{color:var(--lime);font-weight:600}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- STAGE ATMOSPHERE & FLOW DOTS ---------- */
.stage{background:
  radial-gradient(90% 90% at 70% 20%,rgba(63,179,162,.14),transparent 60%),
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:auto,44px 44px,44px 44px}
.scene.on{animation:sceneIn .65s cubic-bezier(.3,.6,.2,1)}
@keyframes sceneIn{from{opacity:0;transform:scale(.985) translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:600px){
  .mg .nlab{font-size:14px}.mg .ref{font-size:12.5px}.mg .ptxt{font-size:15.5px}.mg .cap{font-size:16px}.mg .nemj{font-size:36px}
}

/* ---------- QUIZ FEEDBACK ---------- */
.opt.correct{animation:pop .38s cubic-bezier(.3,1.6,.4,1)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.025)}100%{transform:scale(1)}}
.q-item.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* ---------- TILT & CERT SEAL ---------- */
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt:hover{transition:none}
#certificate .seal{position:absolute;right:6%;bottom:8%;left:auto;transform:none;width:10%;aspect-ratio:1;height:auto;border-radius:0;background:none;display:block;box-shadow:none;z-index:2}
#certificate .seal:before{content:none}
#certificate .seal svg{width:100%;height:100%}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .io{opacity:1;transform:none;transition:none}
}

/* ---------- CONFETTI & BADGES ---------- */
.confetti{position:fixed;top:-14px;border-radius:3px;z-index:300;pointer-events:none;animation:cfall linear forwards}
@keyframes cfall{to{transform:translateY(110vh) rotate(660deg);opacity:.2}}
.mod-card .done-badge{display:none;position:absolute;top:22px;right:22px;z-index:3;background:var(--lime);color:var(--black);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;border-radius:999px;padding:7px 14px}
.mod-card.is-done .done-badge{display:block}

/* ---------- FOOTER ---------- */
footer{background:var(--black);color:var(--white);padding:80px 0 44px;margin-top:0}
footer .disp{font-size:clamp(34px,4.2vw,48px);font-weight:600;letter-spacing:-.03em}
footer .frow{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:44px;border-top:1px solid #232a27;padding-top:28px;font-size:13px;color:#8b948f}

/* ---------- DESIGNER POLISH PASS ---------- */
.stat-card{position:relative;overflow:hidden;background:var(--white);transition:transform .25s var(--ease-enter),box-shadow .25s var(--ease-enter),border-color .25s}
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--lime),var(--teal));opacity:.85}
.stat-card:hover{transform:translateY(-5px);border-color:transparent;box-shadow:0 24px 44px -26px rgba(21,90,82,.45)}
.acc-item>button{transition:background .2s;border-radius:14px}
.acc-item>button:hover{background:var(--paper)}
.acc-item.open{background:linear-gradient(90deg,rgba(220,242,74,.06),transparent 60%);border-radius:14px}
.acc-item.open .ref{background:var(--teal-dark)}
.acc-item .chev{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paper);transition:transform .3s,background .25s,color .25s}
.acc-item.open .chev{background:var(--lime);color:var(--pine)}
.reveal .in{box-shadow:0 14px 30px -22px rgba(7,32,29,.6);transition:transform .6s,box-shadow .3s}
.reveal:hover .in{box-shadow:0 26px 50px -24px rgba(7,32,29,.55)}
.face.front::after{content:"";position:absolute;right:0;top:0;width:38px;height:38px;background:linear-gradient(135deg,transparent 50%,rgba(220,242,74,.9) 50%);border-top-right-radius:24px}
.face.back{background:linear-gradient(150deg,var(--lime),var(--mint))}
.tbl tbody tr:nth-child(even) td,.tbl tr:nth-child(even) td{background:rgba(246,247,243,.6)}
.tbl tr{transition:background .15s}
.tbl tbody tr:hover td,.tbl tr:hover td{background:rgba(220,242,74,.06)}
.good{color:#0f6d43}
.section.band-dark,.section.band-teal{position:relative}
.section.band-dark::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(220,242,74,.5),transparent)}

@page{size:A4 landscape;margin:0}
@media print{
  body *{visibility:hidden}
  #certificate,#certificate *{visibility:visible}
  #certificate{position:fixed;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;margin:0;border:none;border-radius:0;box-shadow:none;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  nav,.progress-rail,#curtain,#spot,#toast{display:none}
}
@media(max-width:1360px){
  .nav-links .lbl{display:none}
  .nav-links button{padding:9px 11px}
  .logo small{display:none}
}
@media(max-width:900px){
  .stat-row,.reveal-grid,.fw-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .dom-grid{grid-template-columns:1fr 1fr}
  .quiz-wrap{padding:30px 20px}
}
@media(max-width:600px){
  .stat-row,.reveal-grid,.fw-grid,.steps,.dom-grid{grid-template-columns:1fr}
  .ai-band{padding:32px 22px}
  .ai-grid,.ai-check ul,.objectives,.recap ul{grid-template-columns:1fr}
  nav{padding:0 16px;gap:12px}
  .nav-links{gap:2px}
  .score-chip{padding:10px 12px}
  .stage{height:520px}
  #certificate{padding:50px 26px}
}