:root{
  --bg:#070d20; --bg2:#0d1630; --ink:#f4f6ff; --mute:#9aa3c7;
  --red:#ff3b4f; --blue:#2f80ff; --green:#19c37d; --coral:var(--red); --amber:var(--red); --sky:var(--blue); --indigo:var(--blue); --plum:var(--red); --navy:#0f2f78;
  --r:22px; --ease:cubic-bezier(.2,.8,.2,1);
  --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:8px}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
h1,h2,h3{line-height:1.02;letter-spacing:-.03em}
h2{font-size:clamp(2.4rem,6vw,5rem);font-weight:900;margin-bottom:.4em}
.kicker{font-size:.8rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#ff6b7a;margin-bottom:1rem}
.sub{color:var(--mute);max-width:60ch;font-size:1.1rem;margin-bottom:2.5rem}
.muted{color:var(--mute);font-size:.92rem}
section{position:relative}

/* progress + glow */
.progress{position:fixed;inset:0 0 auto 0;height:4px;z-index:100;background:transparent}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--blue),var(--green))}
.glow{position:fixed;width:520px;height:520px;left:0;top:0;border-radius:50%;pointer-events:none;z-index:0;opacity:.16;
  background:radial-gradient(circle,var(--indigo),transparent 65%);transform:translate(-50%,-50%);transition:opacity .4s}
main,.footer,.nav{position:relative;z-index:1}

/* nav */
.nav{position:fixed;inset:4px 0 auto 0;z-index:90;display:flex;align-items:center;gap:1.5rem;padding:.8rem clamp(16px,3vw,40px);
  transition:background .3s,backdrop-filter .3s,transform .4s var(--ease)}
.nav.is-solid{background:rgba(12,16,34,.78);backdrop-filter:blur(14px)}
.nav.is-hidden{transform:translateY(-120%)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:600;letter-spacing:-.01em}
.brand b{font-weight:900}
.nav nav{margin-left:auto;display:flex;gap:1.6rem;font-weight:600;font-size:.95rem}
.nav nav a{position:relative;color:var(--mute);transition:color .2s}
.nav nav a:hover,.nav nav a.is-active{color:var(--ink)}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px;background:var(--amber);transform:scaleX(0);transition:transform .3s var(--ease)}
.nav nav a:hover::after,.nav nav a.is-active::after{transform:scaleX(1)}
.pill{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.4rem .8rem;border-radius:99px;white-space:nowrap}
.pill--plan{background:rgba(255,59,79,.16);color:#ff8a97;border:1px solid rgba(255,59,79,.4)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.6rem;border-radius:99px;font-weight:800;transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.btn--primary{background:var(--amber);color:#fff}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 12px 30px -8px rgba(255,59,79,.6)}
.btn--ghost{border:2px solid rgba(255,255,255,.22)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(255,255,255,.06)}
.btn--sm{padding:.55rem 1.1rem;font-size:.88rem}
.btn:active{transform:scale(.97)}

/* hero */
.hero{min-height:100svh;display:grid;align-items:center;padding:7rem 0 5rem;overflow:hidden;
  background:radial-gradient(800px 560px at 85% 25%,rgba(47,128,255,.34),transparent 70%),radial-gradient(700px 520px at 5% 95%,rgba(25,195,125,.22),transparent 70%),radial-gradient(600px 420px at 55% -10%,rgba(255,59,79,.22),transparent 70%)}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%}
.hero__inner{position:relative;width:min(1160px,100% - 40px);margin-inline:auto;pointer-events:none}
.hero__inner a,.hero__inner .btn{pointer-events:auto}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:700;color:var(--mute);margin-bottom:1.6rem;padding:.45rem .9rem;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--amber);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,79,.7)}100%{box-shadow:0 0 0 14px rgba(255,59,79,0)}}
.hero h1{font-size:clamp(2.4rem,6.4vw,5.6rem);font-weight:900;margin-bottom:1.6rem;max-width:15ch}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line>span{display:inline-block;transform:translateY(110%);animation:rise 1s var(--ease) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.12s}
.hero h1 .line:nth-child(3)>span{animation-delay:.24s}
.hero h1 .accent>span{background:linear-gradient(90deg,#ff5468,#ff3b4f,#4a93ff,#2f80ff,#19c37d,#4be3a0);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero h1 .accent>span{animation:rise 1s var(--ease) .24s forwards,shift 8s linear infinite}
@keyframes rise{to{transform:none}}
@keyframes shift{to{background-position:250% 0}}
.hero h1.reveal{opacity:1;transform:none}
.lead{max-width:52ch;font-size:clamp(1.05rem,1.6vw,1.3rem);color:#cdd3f0;margin-bottom:2rem}
.lead b{color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:.9rem}
.scroll{position:absolute;left:50%;bottom:1.8rem;width:26px;height:44px;border:2px solid rgba(255,255,255,.35);border-radius:14px;transform:translateX(-50%)}
.scroll i{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--ink);animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(16px)}}

/* reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* marquee */
.marquee{background:linear-gradient(90deg,var(--red),#e0213b);color:#fff;overflow:hidden;padding:1.1rem 0;transform:rotate(-1.2deg);margin:-1rem -2rem 0;z-index:2}
.marquee__track{display:flex;gap:2rem;width:max-content;font-size:clamp(1.4rem,3vw,2.4rem);font-weight:900;letter-spacing:-.02em;animation:marq 28s linear infinite;white-space:nowrap}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee i{font-style:normal;opacity:.5}
@keyframes marq{to{transform:translateX(-50%)}}

/* statement */
.statement{padding:clamp(6rem,14vw,12rem) 0;width:min(1000px,100% - 40px);margin-inline:auto}
.statement__text{font-size:clamp(1.9rem,5vw,3.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.12}
.statement__text .w{opacity:.15;transition:opacity .4s}
.statement__text .w.on{opacity:1}

/* tiles */
.goals{padding:4rem 0 0}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);margin-top:3rem;min-height:70vh}
.tile{position:relative;padding:2rem 1.6rem 5rem;display:flex;flex-direction:column;overflow:hidden;cursor:pointer;color:#fff;
  transition:flex .5s var(--ease);outline-offset:-6px}
.tile::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.0);transition:background .4s}
.tile>*{position:relative}
.t1{background:linear-gradient(160deg,#ff4a5d,#d9162b)}.t2{background:linear-gradient(160deg,#3a8bff,#1556d6)}.t3{background:linear-gradient(160deg,#20cf86,#0c9a5c)}.t4{background:linear-gradient(160deg,#173a8f,#0a1a4d)}
.tile__no{font-size:clamp(3rem,7vw,5.5rem);font-weight:900;letter-spacing:-.05em;line-height:1;opacity:.95;transition:transform .5s var(--ease)}
.tile__ico{width:64px;height:64px;margin:1.4rem 0;fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease)}
.tile h3{font-size:clamp(1.4rem,2.2vw,2rem);font-weight:900;margin-bottom:.7rem}
.tile__short{font-weight:600;opacity:.92}
.tile__more{max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height .6s var(--ease),opacity .5s,margin .5s;font-size:.98rem}
.tile__more b{border-bottom:2px solid rgba(255,255,255,.6)}
.tile__plus{position:absolute;right:1.4rem;bottom:1.4rem;width:44px;height:44px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-size:1.6rem;font-weight:700;transition:transform .4s var(--ease)}
.tile:hover .tile__ico,.tile:focus-visible .tile__ico{transform:rotate(-8deg) scale(1.2)}
.tile:hover .tile__no{transform:translateX(8px)}
.tile.open .tile__more{max-height:260px;opacity:1;margin-top:1rem}
.tile.open .tile__plus{transform:rotate(45deg)}
.tile.open::before{background:rgba(0,0,0,.14)}
.tiles .tile{transform:translateY(60px);opacity:0}
.tiles.in .tile{animation:tileIn .9s var(--ease) forwards;animation-delay:calc(var(--i)*.12s)}
@keyframes tileIn{to{transform:none;opacity:1}}

/* portals */
.portals{padding:clamp(5rem,10vw,9rem) 0}
.portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem;perspective:1000px}
.portal{position:relative;padding:2rem;border-radius:var(--r);min-height:280px;color:#fff;overflow:hidden;
  transform-style:preserve-3d;transition:transform .2s ease-out,box-shadow .3s;will-change:transform}
.portal::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-80px;bottom:-90px;background:rgba(255,255,255,.18);transition:transform .6s var(--ease)}
.portal:hover::after{transform:scale(1.7)}
.p-siswa{background:linear-gradient(145deg,#1556d6,#3a8bff)}
.p-guru{background:linear-gradient(145deg,#0c9a5c,#20cf86)}
.p-pengurus{background:linear-gradient(145deg,#d9162b,#ff4a5d)}
.portal__badge{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .8rem;border-radius:99px;background:rgba(0,0,0,.2);margin-bottom:3rem}
.portal h3{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:900;margin-bottom:1rem}
.portal h3 em{font-style:normal;opacity:.7;font-weight:700}
.portal li{position:relative;padding-left:1.2rem;font-weight:600}
.portal li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:currentColor}
.portal:hover{box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}

/* flow */
.flow{padding:clamp(5rem,10vw,9rem) 0;background:var(--bg2);border-radius:48px 48px 0 0}
.stage{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:1rem;margin-bottom:2rem;overflow-x:auto}
.stage__svg{width:100%;min-width:640px;height:auto;display:block;color:var(--mute)}
.node rect{fill:#1a2146;stroke:rgba(255,255,255,.15);stroke-width:2;transition:fill .4s,stroke .4s,filter .4s}
.node text{fill:var(--ink);font-weight:800;font-size:19px;text-anchor:middle;font-family:var(--font)}
.node text.s{font-size:13px;font-weight:600;fill:var(--mute)}
.node--trust rect{stroke:rgba(255,59,79,.5)}
.node.on rect{fill:#2a2f78;stroke:var(--amber);filter:drop-shadow(0 0 14px rgba(255,59,79,.55))}
.node--trust.on rect{fill:#4a3a08}
.edges path{stroke:rgba(255,255,255,.18);transition:stroke .4s}
.edges path.on{stroke:var(--amber);color:var(--amber)}
#packet{fill:var(--amber);filter:drop-shadow(0 0 10px var(--amber));transition:cx .8s var(--ease),cy .8s var(--ease)}
.stepper{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:start}
#steps li{display:grid;grid-template-columns:44px 1fr;column-gap:1rem;padding:.9rem 1rem;border-radius:16px;border:1px solid transparent;opacity:.45;cursor:pointer;
  counter-increment:s;transition:opacity .4s,background .4s,border-color .4s,transform .4s var(--ease)}
#steps{counter-reset:s}
#steps li::before{content:counter(s);grid-row:span 2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:rgba(255,255,255,.1)}
#steps li b{font-size:1.05rem}
#steps li span{color:var(--mute);font-size:.92rem}
#steps li.done{opacity:.8}
#steps li.done::before{background:var(--green);color:#04251b}
#steps li.cur{opacity:1;background:rgba(255,59,79,.09);border-color:rgba(255,59,79,.45);transform:translateX(8px)}
#steps li.cur::before{background:var(--amber);color:#fff}
.stepper__ctl{display:flex;gap:.6rem;position:sticky;top:90px}

/* lab */
.lab{padding:clamp(5rem,10vw,9rem) 0;background:var(--bg2)}
.lab__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.4rem}
.card{background:#171e40;border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:1.8rem;transition:border-color .3s,transform .4s var(--ease)}
.card:hover{border-color:rgba(255,255,255,.22)}
.card--access{grid-column:span 3}.card--cons{grid-column:span 3}.card--log{grid-column:span 6}
.card h3{font-size:1.5rem;font-weight:900;margin-bottom:1.2rem;display:flex;align-items:center;gap:.7rem}
.num{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--amber);color:#fff;font-size:1rem}
fieldset{border:0;margin-bottom:1.1rem}
legend{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--mute);font-weight:800;margin-bottom:.6rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chips--col{flex-direction:column;align-items:stretch}
.chip{padding:.65rem 1.1rem;border-radius:99px;border:2px solid rgba(255,255,255,.16);font-weight:700;font-size:.92rem;text-align:left;transition:all .25s var(--ease)}
.chip:hover{border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.chip.is-on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chips--wrap{margin-bottom:1.2rem}
.chip--ok{border-color:rgba(25,195,125,.5);color:var(--green)}
.chip--bad{border-color:rgba(255,77,109,.5);color:var(--coral)}
.chip--warn{border-color:rgba(255,59,79,.5);color:var(--amber)}
.chip--conn{border-color:rgba(160,174,205,.5);color:#b4bfdc}
.verdict{display:flex;gap:1rem;align-items:center;padding:1.1rem;border-radius:18px;background:rgba(25,195,125,.12);border:2px solid var(--green);transition:background .4s,border-color .4s}
.verdict.no{background:rgba(255,77,109,.12);border-color:var(--coral)}
.verdict.pop{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:none}}
.verdict__icon{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;font-weight:900;background:var(--green);color:#04251b;transition:background .4s,transform .5s var(--ease)}
.verdict.no .verdict__icon{background:var(--coral);color:#fff;transform:rotate(360deg)}
.verdict p{color:#cdd3f0;font-size:.92rem}

.cons{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1.2rem 0}
.cons__col{padding:.9rem;border-radius:16px;background:rgba(255,255,255,.05);border:2px solid transparent;transition:border-color .3s,background .3s}
.cons__col h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--mute);margin-bottom:.5rem}
.cons dt{font-size:.7rem;color:var(--mute);margin-top:.5rem}
.cons dd{font-weight:800;transition:color .3s}
.cons dd.diff{color:var(--coral);animation:shake .5s}
.cons__col.has-diff{border-color:var(--coral);background:rgba(255,77,109,.08)}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.cons__bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.cons__status{margin-left:auto;font-weight:800;font-size:.9rem;color:var(--green)}
.cons__status.bad{color:var(--coral)}

.filters{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.f{padding:.4rem .9rem;border-radius:10px;background:rgba(255,255,255,.06);font-weight:700;font-size:.85rem;transition:background .2s}
.f i{font-style:normal;opacity:.6;margin-left:.3rem}
.f.is-on{background:var(--ink);color:var(--bg)}
.log{display:flex;flex-direction:column;gap:.5rem;max-height:320px;overflow:auto;padding-right:.3rem}
.log li{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.75rem 1rem;border-radius:14px;background:rgba(255,255,255,.05);border-left:5px solid var(--c);animation:slide .5s var(--ease)}
.log li[hidden]{display:none}
.log .tag{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding:.25rem .6rem;border-radius:99px;background:var(--c);color:#10142c}
.log .t{color:var(--mute);font-size:.8rem;font-variant-numeric:tabular-nums}
.log .empty{display:block;color:var(--mute);border-left-color:transparent}
@keyframes slide{from{opacity:0;transform:translateX(-20px)}}

/* principle */
.principle{padding:clamp(5rem,10vw,9rem) 0;background:linear-gradient(180deg,var(--bg2),var(--bg))}
.split{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center;text-align:center}
.split span{display:block;font-size:.85rem;text-transform:uppercase;letter-spacing:.16em;color:var(--mute);font-weight:800}
.split b{display:block;font-size:clamp(1.8rem,5vw,4rem);font-weight:900;letter-spacing:-.04em;line-height:1.05}
.split__a b{color:var(--coral)}.split__b b{color:var(--green)}
.split__x{font-size:clamp(2rem,6vw,5rem);font-weight:900;color:var(--amber)}
.principle__note{text-align:center;max-width:56ch;margin:3rem auto 0;color:var(--mute);font-size:1.15rem}

/* status */
.status{padding:clamp(4rem,8vw,7rem) 0}
.status__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem}
.status__grid>div{padding:1.6rem;border-radius:var(--r);background:#171e40;border:1px solid rgba(255,255,255,.08)}
.stamp{display:inline-block;font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;padding:.4rem .9rem;border:3px solid var(--amber);color:var(--amber);border-radius:10px;transform:rotate(-3deg);margin-bottom:1rem}
.stamp--alt{border-color:var(--blue);color:#6aa6ff;transform:rotate(2deg)}
.stamp--alt2{border-color:var(--green);color:var(--green);transform:rotate(-2deg)}
.status p{color:#cdd3f0}.status p b{color:var(--ink)}

.footer{border-top:1px solid rgba(255,255,255,.1);padding:2.5rem 0}
.footer__in{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.footer p{color:var(--mute);font-size:.9rem;margin-right:auto}

/* responsive */
@media (max-width:900px){
  .nav nav{display:none}.nav .pill{margin-left:auto}
  .tiles{grid-template-columns:1fr 1fr}
  .portal-grid,.status__grid{grid-template-columns:1fr}
  .card--access,.card--cons{grid-column:span 6}
  .stepper{grid-template-columns:1fr}.stepper__ctl{position:static;order:-1}
  .split{grid-template-columns:1fr}
}
@media (max-width:560px){
  .tiles{grid-template-columns:1fr}
  .tile{padding-bottom:4.5rem}
  .cons{grid-template-columns:1fr}
  .marquee{margin-inline:-1rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.tiles .tile{opacity:1;transform:none}
  .hero h1 .line>span{transform:none}
  .marquee__track{animation:none}
}

/* ===== v2 polish ===== */
body{background:var(--bg) radial-gradient(1200px 700px at 100% 40%,rgba(47,128,255,.07),transparent 60%)}
.btn--primary{background:linear-gradient(135deg,#ff4a5d,#e0213b);box-shadow:0 10px 28px -10px rgba(255,59,79,.7)}
.btn--primary:hover{box-shadow:0 16px 34px -8px rgba(255,59,79,.75)}
.hero{isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.hero::before{width:380px;height:380px;background:var(--red);left:-120px;top:12%;animation:blob 14s ease-in-out infinite alternate}
.hero::after{width:420px;height:420px;background:var(--blue);right:-140px;bottom:-60px;animation:blob 18s ease-in-out infinite alternate-reverse}
@keyframes blob{to{transform:translate(60px,-40px) scale(1.2)}}
.eyebrow{border-radius:16px;line-height:1.35}
.dot{background:var(--green);animation-name:pulseG}
@keyframes pulseG{0%{box-shadow:0 0 0 0 rgba(25,195,125,.7)}100%{box-shadow:0 0 0 14px rgba(25,195,125,0)}}

/* stats */
.stats{padding:clamp(3rem,6vw,5rem) 0 0}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.stat{padding:1.6rem;border-radius:var(--r);color:#fff;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.14)}
.stat b{display:block;font-size:clamp(3rem,7vw,5.5rem);font-weight:900;letter-spacing:-.05em;line-height:1}
.stat span{font-weight:700;opacity:.95}
.s-blue{background:linear-gradient(145deg,#1556d6,#3a8bff)}.s-red{background:linear-gradient(145deg,#d9162b,#ff4a5d)}.s-green{background:linear-gradient(145deg,#0c9a5c,#20cf86)}

/* light portal section */
.portals{background:#f4f7ff;color:#0a1431;padding-bottom:calc(clamp(5rem,10vw,9rem) + 48px)}
.portals .kicker{color:var(--blue)}
.portals h2{color:#0a1431}
.portal{box-shadow:0 24px 50px -24px rgba(10,20,49,.45)}
.flow{margin-top:-48px;z-index:1;position:relative}

/* cards */
.card,.status__grid>div{background:linear-gradient(180deg,#141f45,#0f1936)}
.card{position:relative}
.card--access{border-top:4px solid var(--red)}.card--cons{border-top:4px solid var(--blue)}.card--log{border-top:4px solid var(--green)}
.num{color:#fff}
.card--access .num{background:var(--red)}.card--cons .num{background:var(--blue)}.card--log .num{background:var(--green)}
.chip.is-on{background:#fff;color:#070d20}
.stamp{border-color:var(--red);color:#ff7a89}
.stamp--alt2{border-color:var(--green);color:#4be3a0}
.split__x{color:#fff;opacity:.9}
.split__a b{color:#ff5468}.split__b b{color:#2fe29a}
.node--trust rect{stroke:rgba(255,59,79,.6)}
.node.on rect{fill:#1b2a66;stroke:#4a93ff;filter:drop-shadow(0 0 14px rgba(47,128,255,.6))}
.node--trust.on rect{fill:#5a1420;stroke:#ff3b4f;filter:drop-shadow(0 0 14px rgba(255,59,79,.6))}
.edges path.on{stroke:#4a93ff;color:#4a93ff}
#packet{fill:#fff;filter:drop-shadow(0 0 10px #2f80ff)}
#steps li.cur{background:rgba(47,128,255,.12);border-color:rgba(74,147,255,.55)}
#steps li.cur::before{background:var(--blue);color:#fff}
#steps li.done::before{background:var(--green);color:#fff}
.verdict.no .verdict__icon,.verdict__icon{color:#fff}
.footer{background:#050a18}

/* mobile hero: text first, animation below (no overlap) */
@media (max-width:900px){
  .hero{display:flex;flex-direction:column;justify-content:flex-start;padding:6.5rem 0 2rem;min-height:auto}
  .hero__inner{order:1}
  #heroCanvas{position:relative;order:2;height:min(88vw,380px);margin-top:1rem;inset:auto}
  .scroll{display:none}
  .hero h1{font-size:clamp(2.3rem,11vw,3.6rem)}
  .stats__grid{grid-template-columns:1fr}
  .stat{display:flex;align-items:center;gap:1rem}
  .stat b{font-size:3.2rem;min-width:1.2ch}
  .marquee{margin-top:0}
}
@media (max-width:560px){
  .cta .btn{width:100%;justify-content:center}
  .eyebrow{font-size:.78rem}
  .tile{padding:1.6rem 1.3rem 4.5rem}
  .tile__ico{width:52px;height:52px;margin:1rem 0}
  .flow{border-radius:32px 32px 0 0}
  .stepper__ctl{flex-wrap:wrap}
  .card{padding:1.3rem}
}
html,body{overflow-x:clip}
.portal h3{font-size:clamp(1.9rem,3.4vw,2.8rem);overflow-wrap:anywhere}
.portal h3 em{display:block;font-size:.55em;margin-top:.3em;letter-spacing:-.01em}
.hero h1 .accent>span{background-image:linear-gradient(90deg,#ff3b4f 0%,#ff3b4f 25%,#2f80ff 55%,#19c37d 85%,#ff3b4f 100%)}

/* ===== detail / scenarios / faq ===== */
.detail{padding:clamp(5rem,10vw,8rem) 0 2rem}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 1.4rem}
.tab{padding:.75rem 1.3rem;border-radius:99px;font-weight:800;border:2px solid rgba(255,255,255,.18);transition:all .25s var(--ease)}
.tab:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.5)}
.tab.is-on{color:#fff;border-color:transparent}
.tab.is-on.c-red{background:var(--red)}.tab.is-on.c-blue{background:var(--blue)}.tab.is-on.c-green{background:var(--green)}.tab.is-on.c-navy{background:#1c3f9e}
.panel{display:none;grid-template-columns:repeat(3,1fr);gap:1px;border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.panel.is-on{display:grid;animation:pIn .5s var(--ease)}
@keyframes pIn{from{opacity:0;transform:translateY(14px)}}
.panel__col{padding:1.6rem;background:#0f1936}
.panel.c-red .panel__col:first-child{background:linear-gradient(160deg,#c8182c,#8f1020)}
.panel.c-blue .panel__col:first-child{background:linear-gradient(160deg,#1b5fe0,#123c93)}
.panel.c-green .panel__col:first-child{background:linear-gradient(160deg,#0fa564,#0a6c43)}
.panel.c-navy .panel__col:first-child{background:linear-gradient(160deg,#1c3f9e,#0e2260)}
.panel h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem;opacity:.85}
.panel p{color:#cdd3f0}
.check li,.ex li{position:relative;padding:.35rem 0 .35rem 1.6rem;font-weight:600}
.check li::before{content:"✓";position:absolute;left:0;font-weight:900}
.ex li{padding-left:0}
.ex i{font-style:normal;display:inline-block;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;padding:.15rem .5rem;border-radius:99px;margin-right:.5rem}
.ex .ok{background:rgba(25,195,125,.22);color:#4be3a0}.ex .no{background:rgba(255,59,79,.22);color:#ff8a97}
.isnot{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.6rem}
.isnot>div{padding:1.6rem;border-radius:var(--r)}
.isnot h3{display:flex;gap:.6rem;align-items:center;font-size:1.3rem;margin-bottom:1rem}
.isnot h3 span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:.9rem;color:#fff}
.isnot__a{background:rgba(25,195,125,.1);border:2px solid var(--green)}.isnot__a h3 span{background:var(--green)}
.isnot__b{background:rgba(255,59,79,.1);border:2px solid var(--red)}.isnot__b h3 span{background:var(--red)}
.isnot li{padding:.3rem 0;color:#dfe4fa;font-weight:600}
.scen{margin-top:3.5rem}
.scen__h{font-size:1.6rem;margin-bottom:1.2rem;color:#0a1431}
.scen__h small,.tag-plan{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border-radius:99px;border:1.5px solid currentColor;vertical-align:middle;margin-left:.4rem}
.scen__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.scen__c{background:#fff;border-radius:var(--r);padding:1.4rem;border-top:6px solid var(--c);box-shadow:0 14px 34px -22px rgba(10,20,49,.5);transition:transform .35s var(--ease)}
.scen__c:hover{transform:translateY(-6px)}
.sc-blue{--c:var(--blue)}.sc-green{--c:var(--green)}.sc-red{--c:var(--red)}
.scen__c b{color:var(--c);font-size:1.05rem}
.scen__c p{font-weight:800;margin:.4rem 0 .8rem;font-size:1.1rem}
.scen__c li{font-size:.92rem;color:#3a4566;padding:.3rem 0 .3rem 1.1rem;position:relative}
.scen__c li::before{content:"";position:absolute;left:0;top:.8em;width:6px;height:6px;border-radius:50%;background:var(--c)}
.faq{padding:clamp(4rem,8vw,7rem) 0}
.faq__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:start}
.faq h2{font-size:clamp(2rem,4.5vw,3.4rem)}
.acc details{border-bottom:1px solid rgba(255,255,255,.14)}
.acc summary{list-style:none;cursor:pointer;padding:1.1rem 2.5rem 1.1rem 0;font-weight:800;font-size:1.08rem;position:relative}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:1.3rem;transition:transform .3s var(--ease),background .3s}
.acc details[open] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--red)}
.acc p{color:#cdd3f0;padding:0 2.5rem 1.2rem 0;animation:pIn .4s var(--ease)}
.road{position:relative;margin-top:1.2rem;padding-left:2.2rem}
.road::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:3px;border-radius:3px;background:linear-gradient(var(--red),var(--blue),var(--green))}
.road li{position:relative;padding-bottom:1.5rem;opacity:.6}
.road li::before{content:"";position:absolute;left:-2.2rem;top:.2rem;width:25px;height:25px;border-radius:50%;background:var(--bg);border:3px solid var(--blue)}
.road li.now{opacity:1}.road li.now::before{background:var(--green);border-color:var(--green);box-shadow:0 0 0 6px rgba(25,195,125,.25)}
.road b{display:block;font-size:1.1rem}.road span{color:var(--mute);font-size:.94rem}
.tag-plan{color:#ff8a97}
@media (max-width:900px){.panel{grid-template-columns:1fr}.isnot,.scen__grid,.faq__grid{grid-template-columns:1fr}}
@media (max-width:560px){.tab{padding:.6rem 1rem;font-size:.9rem}.nav nav{display:none}}