/* GamerSparc — dark base, purple + electric accents. No framework. */
:root{--bg:#0a0713;--bg2:#120b22;--panel:#171030;--panel2:#1e1540;--line:#2b2150;--txt:#ece7ff;--dim:#a79fc4;
--purple:#7a4bd6;--purple2:#a07cf0;--cyan:#27e9ff;--pink:#ff3df2;--lime:#b8ff3d;--amber:#ffb84d;--red:#ff5f6d;
--display:"Bebas Neue","Rajdhani",Impact,sans-serif;--head:"Rajdhani","Inter",system-ui,sans-serif;--body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
--r:14px;--sh:0 10px 40px rgba(0,0,0,.45);--glow:0 0 0 1px rgba(122,75,214,.5),0 0 28px rgba(122,75,214,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.55 var(--body);min-height:100vh;display:flex;flex-direction:column}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(1200px 600px at 10% -10%,rgba(122,75,214,.25),transparent 60%),radial-gradient(900px 500px at 100% 0,rgba(39,233,255,.08),transparent 60%),var(--bg)}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.1;letter-spacing:.01em;margin:0 0 .4em}
h1{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:.03em}
h2{font-size:clamp(1.5rem,3vw,2rem)}h3{font-size:1.15rem}
.grad{background:linear-gradient(90deg,var(--purple2),var(--cyan) 60%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.dim{color:var(--dim)}.small{font-size:.85rem}.ok{color:var(--lime)}
.skip{position:absolute;left:-999px;top:0;background:var(--purple);color:#fff;padding:8px 12px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(10,7,19,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.7rem;letter-spacing:.04em;color:var(--txt)}
.brand:hover{text-decoration:none}.brand b{color:var(--purple2)}.brand em{font:600 .8rem var(--head);color:var(--dim);letter-spacing:.2em;text-transform:uppercase}
.brand img{filter:drop-shadow(0 0 10px rgba(122,75,214,.55))}.brand img.wm{filter:none;height:24px;width:auto}.foot .brand img.wm{height:18px}body.admin .brand img.wm{height:18px}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav>a,.nav .acct>a{color:var(--txt);padding:8px 12px;border-radius:9px;font:600 .95rem var(--head);letter-spacing:.04em;text-transform:uppercase}
.nav>a:hover,.nav .acct>a:hover{background:var(--panel2);text-decoration:none}.nav a.on{color:var(--cyan)}
.acct{display:flex;gap:4px;align-items:center;margin-left:8px;padding-left:10px;border-left:1px solid var(--line)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--txt);font-size:1.4rem;border-radius:9px;padding:4px 10px;cursor:pointer}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);font:700 .95rem var(--head);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s;text-decoration:none!important}
.btn:hover{transform:translateY(-2px);box-shadow:var(--glow);background:#251a4d}
.btn.cta{background:linear-gradient(135deg,var(--purple),#5b2fc2);border-color:transparent;color:#fff;box-shadow:0 6px 24px rgba(122,75,214,.45)}
.btn.cta:hover{box-shadow:0 8px 34px rgba(122,75,214,.7),0 0 0 1px var(--purple2)}
.btn.ghost{background:transparent;border-color:var(--purple2)}.btn.big{padding:15px 28px;font-size:1.1rem}.btn.small{padding:6px 12px;font-size:.8rem}
.btn.danger{border-color:var(--red);color:var(--red);background:transparent}.btn.danger:hover{background:rgba(255,95,109,.12)}
button.link{background:none;border:0;color:var(--cyan);cursor:pointer;font:inherit;padding:0}button.link:hover{text-decoration:underline}
/* hero */
.hero{position:relative;overflow:hidden;border-radius:22px;margin:22px 0 40px;padding:clamp(48px,9vw,110px) clamp(20px,6vw,72px);background:var(--bg2);border:1px solid var(--line);box-shadow:var(--sh);isolation:isolate}
.hero .bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.75;mix-blend-mode:screen;animation:drift 18s ease-in-out infinite alternate}
.o1{width:52vw;height:52vw;max-width:640px;max-height:640px;left:-12%;top:-30%;background:radial-gradient(circle,var(--purple),transparent 65%)}
.o2{width:40vw;height:40vw;max-width:520px;max-height:520px;right:-10%;top:-10%;background:radial-gradient(circle,var(--cyan),transparent 65%);opacity:.35;animation-duration:24s;animation-delay:-6s}
.o3{width:36vw;height:36vw;max-width:460px;max-height:460px;right:20%;bottom:-40%;background:radial-gradient(circle,var(--pink),transparent 65%);opacity:.35;animation-duration:21s;animation-delay:-12s}
.hero .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(167,159,196,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(167,159,196,.08) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);animation:scan 14s linear infinite}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(8%,10%) scale(1.15)}}
@keyframes scan{from{background-position:0 0,0 0}to{background-position:0 44px,44px 0}}
.hero-in{max-width:760px}
.eyebrow{font:600 .8rem var(--head);letter-spacing:.28em;text-transform:uppercase;color:var(--cyan);margin:0 0 10px}
.hero h1{font-size:clamp(3.4rem,10vw,7.2rem);line-height:.92;margin:0 0 18px;text-shadow:0 0 40px rgba(122,75,214,.35)}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--txt);max-width:64ch;margin:0 0 22px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 14px}
/* sections */
section{margin:0 0 44px}.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.head{margin:26px 0 26px}.head .lede{color:var(--dim)}.hint{color:var(--dim);font-size:.95rem}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.strip div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.strip b{font:700 1.1rem var(--head);letter-spacing:.03em}.strip span{color:var(--dim);font-size:.9rem}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px 30px;border-radius:var(--r);background:linear-gradient(120deg,rgba(122,75,214,.35),rgba(39,233,255,.12));border:1px solid var(--line)}
.cta-band h2{margin:0 0 4px}.cta-band p{margin:0;color:var(--dim)}
/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .25s,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh),var(--glow);border-color:var(--purple)}
.card .thumb{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--bg2)}.card .thumb.ph{object-fit:cover}
.card .cb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{margin:2px 0}.card h3 a{color:var(--txt)}.card h3 a:hover{text-decoration:none;color:var(--purple2)}
.card a.cover::after{content:"";position:absolute;inset:0}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.price{font:700 1.35rem var(--head);color:#fff;letter-spacing:.02em}.price.big{font-size:2.2rem;margin:0}.price.huge{font-size:clamp(2.2rem,6vw,3.4rem);margin:0;color:var(--lime)}
.stock{font:600 .72rem var(--head);letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:6px}
.stock.in{background:rgba(184,255,61,.14);color:var(--lime)}.stock.out{background:rgba(255,184,77,.12);color:var(--amber)}
.cond{color:var(--dim);font-size:.82rem;margin:0}
.tier{align-self:flex-start;font:700 .72rem var(--head);letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:6px;background:var(--panel2);color:var(--purple2)}
.tier.starter{color:var(--cyan)}.tier.sweetspot{color:var(--purple2);background:rgba(122,75,214,.22)}.tier.enthusiast{color:var(--pink);background:rgba(255,61,242,.14)}
.fps{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0}.fps span{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:5px 8px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);font-size:.68rem;color:var(--dim);text-align:center;line-height:1.2}
.fps b{font:700 1rem var(--head);color:var(--lime)}
.cmp{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font:600 .8rem var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);cursor:pointer;padding:4px 0}
.cmp input{accent-color:var(--purple2);width:16px;height:16px}.cmp:hover{color:var(--cyan)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.chip{padding:6px 13px;border-radius:999px;border:1px solid var(--line);color:var(--dim);font:600 .82rem var(--head);letter-spacing:.06em;text-transform:uppercase}
.chip:hover{border-color:var(--purple2);color:var(--txt);text-decoration:none}.chip.on{background:var(--purple);border-color:var(--purple);color:#fff}
.empty{grid-column:1/-1;padding:40px;border:1px dashed var(--line);border-radius:var(--r);text-align:center;color:var(--dim)}.empty h3{color:var(--txt)}
/* compare drawer */
.cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(18,11,34,.97);border-top:1px solid var(--purple);box-shadow:0 -10px 40px rgba(0,0,0,.6);transform:translateY(110%);transition:transform .3s;max-height:70vh;overflow:auto}
.cmpbar.open{transform:none}.cmpbar .wrap{padding:14px 0}.cmpbar .bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cmpbar table{width:100%;border-collapse:collapse;margin-top:12px;font-size:.9rem}.cmpbar th,.cmpbar td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmpbar th{color:var(--dim);font:600 .75rem var(--head);letter-spacing:.1em;text-transform:uppercase}.cmpbar td.k{color:var(--dim);width:120px}
.cmpbar .win{color:var(--lime);font-weight:600}
/* product page */
.product,.show{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:34px;margin:26px 0 40px}
.pgal .main,.gal img{width:100%;border-radius:var(--r);border:1px solid var(--line);background:var(--bg2)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}.thumbs img{border-radius:8px;border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover}
.gal{display:flex;flex-direction:column;gap:10px}
.pinfo h1{font-size:clamp(2rem,4vw,3rem)}
table.specs,table.perf,table.items,table.list{width:100%;border-collapse:collapse;font-size:.92rem;margin:6px 0 18px}
table.specs th{text-align:left;color:var(--dim);font-weight:500;width:30%;padding:8px 10px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.specs td{padding:8px 0;border-bottom:1px solid var(--line)}
table.perf th,table.list th{text-align:left;color:var(--dim);font:600 .75rem var(--head);letter-spacing:.1em;text-transform:uppercase;padding:8px;border-bottom:1px solid var(--purple)}
table.perf td,table.list td,table.items td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
table.perf td:nth-child(n+2){font:700 1.05rem var(--head);color:var(--lime)}
table.items th{text-align:left;color:var(--dim);padding:8px;border-bottom:1px solid var(--purple)}table.items tr.tot td{font:700 1.15rem var(--head);border-top:2px solid var(--purple);color:#fff}
.inline{display:inline}
/* forms */
form label{display:block;margin:0 0 14px;font-weight:500}form label small{display:block;font-weight:400;margin-top:3px}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{width:100%;margin-top:6px;padding:11px 13px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--txt);font:inherit;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--purple2);box-shadow:0 0 0 3px rgba(122,75,214,.3)}
input[type=file]{margin-top:6px;color:var(--dim)}select{appearance:auto}
.card-b{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.auth{max-width:460px;margin:30px auto}.auth h1{font-size:2.6rem}
.picks{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.pick{position:relative;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);cursor:pointer;font-weight:500;margin:0;transition:all .15s;user-select:none}
.pick input{position:absolute;opacity:0;width:1px;height:1px}.pick:hover{border-color:var(--purple2)}
.pick:has(input:checked){background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 0 18px rgba(122,75,214,.5)}
.pick:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:2px}
.pick.wide{display:flex;border-radius:12px}.pick.wide input{position:static;opacity:1;width:18px;height:18px;accent-color:var(--purple2)}.pick.wide:has(input:checked){background:var(--bg2);color:var(--txt);box-shadow:none;border-color:var(--purple2)}
.steps fieldset{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:20px 22px;margin:0 0 16px}
.steps legend{font:700 1.1rem var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--purple2);padding:0 8px}
.steps.js fieldset{display:none}.steps.js fieldset.on{display:block;animation:fade .25s}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stepnav{display:flex;align-items:center;gap:12px;justify-content:space-between}.dots{display:flex;gap:6px;flex:1;justify-content:center}.dots i{width:10px;height:10px;border-radius:50%;background:var(--line);display:block}.dots i.on{background:var(--purple2);box-shadow:0 0 10px var(--purple2)}
.steps:not(.js) [data-prev],.steps:not(.js) [data-next]{display:none}
.flash{padding:12px 16px;border-radius:10px;margin:16px 0;border:1px solid var(--line);background:var(--panel)}
.flash.ok{border-color:var(--lime);color:var(--lime)}.flash.err,.flash-err{border-color:var(--red);color:var(--red);background:rgba(255,95,109,.08);padding:12px 16px;border-radius:10px;margin:12px 0;border:1px solid var(--red)}.flash.warn{border-color:var(--amber);color:var(--amber)}
.note{background:var(--bg2);border-left:3px solid var(--purple2);padding:12px 14px;border-radius:0 10px 10px 0}
/* trade-in */
.result,.live{background:linear-gradient(135deg,rgba(122,75,214,.3),rgba(184,255,61,.08));border:1px solid var(--purple);border-radius:var(--r);padding:26px;margin:18px 0;text-align:center;animation:fade .3s}
.live{margin:6px 0 18px;padding:18px}
/* tracking + kv */
.track{display:flex;gap:0;list-style:none;padding:0;margin:14px 0 0;counter-reset:s;flex-wrap:wrap}
.track li{flex:1;min-width:110px;position:relative;padding:12px 8px 8px;text-align:center;font:600 .8rem var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border-top:3px solid var(--line)}
.track li.done{border-color:var(--purple2);color:var(--purple2)}.track li.cur{border-color:var(--lime);color:var(--lime);text-shadow:0 0 12px rgba(184,255,61,.5)}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 14px;margin:0}.kv dt{color:var(--dim)}.kv dd{margin:0}
.log{list-style:none;padding:0;margin:0;font-size:.9rem}.log li{padding:5px 0;border-bottom:1px solid var(--line)}
.st{display:inline-block;font:700 .7rem var(--head);letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;border-radius:6px;background:var(--panel2);color:var(--dim)}
.st.new{color:var(--cyan)}.st.quoted{color:var(--amber)}.st.accepted,.st.published,.st.allow{color:var(--lime)}.st.building{color:var(--purple2)}.st.ready{color:var(--lime);background:rgba(184,255,61,.15)}
.st.pending,.st.hold{color:var(--amber)}.st.blocked,.st.block,.st.removed{color:var(--red)}.st.sample{color:var(--pink)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 20px}.tabs a{padding:8px 14px;border-radius:9px;background:var(--panel);border:1px solid var(--line);color:var(--txt);font:600 .85rem var(--head);letter-spacing:.06em;text-transform:uppercase}
ul.plain{list-style:none;padding:0}ul.plain li{padding:8px 0;border-bottom:1px solid var(--line)}
.prose p{margin:0 0 1em;max-width:75ch}.parts{padding-left:18px}.parts li{margin:3px 0}
.comment{padding:12px 0;border-bottom:1px solid var(--line)}.comment p{margin:4px 0 0}
/* masonry showcase */
.masonry{columns:3 280px;column-gap:18px}
.mcard{display:block;break-inside:avoid;margin:0 0 18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--txt);transition:transform .25s,box-shadow .25s,border-color .2s}
.mcard:hover{transform:translateY(-6px) scale(1.01);box-shadow:var(--sh),var(--glow);border-color:var(--purple);text-decoration:none}
.mcard img{width:100%}.mcard .cb{padding:12px 14px}.mcard h3{margin:0 0 4px}.mcard .dim{margin:0;font-size:.85rem}
/* admin */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:14px 0 30px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;color:var(--txt)}.tile b{font:400 2.4rem var(--display);color:var(--lime)}.tile span{color:var(--dim);font-size:.85rem}.tile:hover{border-color:var(--purple);text-decoration:none}
.modrow{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start}.modrow p{margin:6px 0}
.mini{display:inline-block;width:80px;height:60px;object-fit:cover;border-radius:6px;margin:4px 4px 0 0}
.pthumbs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.pthumb img{width:140px;height:105px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
body.admin h1{font-size:2.6rem}
/* footer */
.foot{margin-top:auto;border-top:1px solid var(--line);background:var(--bg2);padding:34px 0 22px;color:var(--dim);font-size:.9rem}
.foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px;margin-bottom:16px}.foot .links{display:flex;flex-direction:column;gap:7px;align-content:start}.foot .links b{font:700 .8rem var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--purple2)}.foot address{font-style:normal;margin:0 0 10px;line-height:1.6}.foot a{color:var(--txt)}.foot .brand{font-size:1.3rem;margin-bottom:8px}
/* GamerSparc content blocks */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.tcard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.tcard::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--cyan)}.tcard.sweetspot::before{background:var(--purple2)}.tcard.enthusiast::before{background:linear-gradient(90deg,var(--purple2),var(--pink))}
.tcard h3{font-size:1.35rem;margin:4px 0 0}.tcard p{margin:0}.tcard .btn{align-self:flex-start;margin-top:auto}
ul.ticks{list-style:none;padding:0;margin:4px 0 12px}ul.ticks li{position:relative;padding:4px 0 4px 24px}ul.ticks li::before{content:"";position:absolute;left:2px;top:.62em;width:11px;height:6px;border-left:2px solid var(--lime);border-bottom:2px solid var(--lime);transform:rotate(-45deg)}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.pillar{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;color:var(--txt);transition:transform .2s,box-shadow .25s,border-color .2s}
.pillar:hover{transform:translateY(-4px);border-color:var(--purple);box-shadow:var(--sh),var(--glow);text-decoration:none}.pillar img{height:48px;width:auto;margin-bottom:6px;align-self:flex-start;border-radius:8px}.pillar h2{font-size:1.4rem;margin:0}.pillar p{color:var(--dim);margin:0}.pillar span{margin-top:auto;padding-top:6px;color:var(--cyan);font:600 .9rem var(--head);letter-spacing:.06em;text-transform:uppercase}
ol.process{list-style:none;counter-reset:st;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
ol.process li{counter-increment:st;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 18px 66px;display:flex;flex-direction:column;gap:4px}
ol.process li::before{content:counter(st,decimal-leading-zero);position:absolute;left:16px;top:14px;font:400 2rem/1 var(--display);color:var(--purple2)}
ol.process b{font:700 1.1rem var(--head);letter-spacing:.02em}ol.process span{color:var(--dim);font-size:.95rem}
ol.process.compact{grid-template-columns:1fr;gap:10px}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}.feat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}.feat h3{color:var(--txt)}.feat p{margin:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center}
.screen{aspect-ratio:16/10;border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,#1b1240,#0d0920 60%);box-shadow:var(--sh),var(--glow);padding:18px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.scr-top{display:flex;gap:6px}.scr-top span{width:56px;height:8px;border-radius:4px;background:rgba(167,159,196,.25)}.scr-top span:first-child{background:var(--purple2)}
.scr-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1}.scr-row.sm{grid-template-columns:repeat(5,1fr);flex:.6}
.scr-row i{border-radius:10px;background:linear-gradient(135deg,rgba(122,75,214,.55),rgba(39,233,255,.18));border:1px solid rgba(160,124,240,.35)}.scr-row i:first-child{box-shadow:0 0 0 2px var(--cyan),0 0 20px rgba(39,233,255,.4)}
.scr-row.sm i{background:rgba(167,159,196,.12);border-color:rgba(167,159,196,.15)}
.scr-pad{display:flex;align-items:center;justify-content:center;gap:22px;color:var(--dim);font-size:1.3rem}.scr-pad b{font-weight:700}.scr-pad img{opacity:.9}
.faq{display:flex;flex-direction:column;gap:10px}.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0 18px}
.faq summary{cursor:pointer;padding:15px 0;font:700 1.05rem var(--head);letter-spacing:.02em;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--purple2);font-size:1.4rem;line-height:1}.faq details[open] summary::after{content:"\2212"}
.faq details>div{padding:0 0 16px;color:var(--dim)}.faq details[open]{border-color:var(--purple)}
.big-link{font:700 1.3rem/1.4 var(--head);letter-spacing:.02em;font-style:normal;margin:0 0 10px}address{font-style:normal}
.actions.tight{margin:0}.community h2{font-size:1.4rem}
/* responsive */
@media (max-width:1080px){.burger{display:block}
.nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--bg2);border-bottom:1px solid var(--line);padding:10px 16px 16px;flex-direction:column;align-items:stretch}
.nav.open{display:flex}.nav>a,.nav .acct>a{padding:12px}.acct{border:0;margin:0;padding:0;flex-direction:column;align-items:stretch}.nav .btn{margin-top:8px}.foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.product,.show,.two,.three,.split,.foot .cols{grid-template-columns:1fr}.burger{display:block}
.nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--bg2);border-bottom:1px solid var(--line);padding:10px 16px 16px;flex-direction:column;align-items:stretch}
.nav.open{display:flex}.nav>a,.nav .acct>a{padding:12px}.acct{border:0;margin:0;padding:0;flex-direction:column;align-items:stretch}.nav .btn{margin-top:8px}
.hero{padding:44px 20px;margin-top:14px}.hero h1{font-size:clamp(3rem,15vw,4.6rem)}.kv{grid-template-columns:1fr}.cta-band{padding:22px}.modrow{flex-direction:column}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hero .grid{mask-image:none;opacity:.5}}

/* console home-screen mock (original genre art; no real game titles/logos) */
.scr-top{align-items:center;gap:16px;font-size:.78rem;font-weight:600;color:var(--dim)}
.scr-top span{width:auto;height:auto;background:none!important;border-radius:0;padding-bottom:3px;letter-spacing:.02em}
.scr-top span.on{color:#fff;border-bottom:2px solid var(--cyan)}
.scr-top time{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8}
.scr-row i{position:relative;overflow:hidden;font-style:normal;display:flex;flex-direction:column;justify-content:flex-end;padding:8px 9px}
.scr-row i.cv b{font-size:.82rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7);position:relative;z-index:1}
.scr-row i.cv em{position:absolute;top:7px;left:8px;font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(0,0,0,.35);padding:2px 6px;border-radius:6px;z-index:1}
.cv-race{background:linear-gradient(170deg,transparent 55%,rgba(10,6,24,.85)),repeating-linear-gradient(100deg,transparent 0 22px,rgba(255,255,255,.07) 22px 26px),linear-gradient(160deg,#ff5f6d,#7a2bd6 60%,#1a0f3a)!important}
.cv-fps{background:linear-gradient(170deg,transparent 55%,rgba(10,6,24,.85)),radial-gradient(circle at 62% 38%,transparent 0 9px,rgba(39,233,255,.9) 10px 11px,transparent 12px 20px,rgba(39,233,255,.5) 21px 22px,transparent 23px),linear-gradient(150deg,#0f3b5c,#152a6b 55%,#0b0a22)!important}
.cv-adv{background:linear-gradient(170deg,transparent 55%,rgba(10,6,24,.85)),linear-gradient(160deg,transparent 48%,#0f2d24 49% 62%,transparent 63%),linear-gradient(200deg,transparent 52%,#173f33 53% 70%,transparent 71%),linear-gradient(180deg,#f7b267,#c0548f 55%,#2a1840)!important}
.cv-indie{background:linear-gradient(170deg,transparent 55%,rgba(10,6,24,.85)),radial-gradient(circle at 30% 35%,#ffe66d 0 10%,transparent 11%),radial-gradient(circle at 70% 60%,#7bf1a8 0 14%,transparent 15%),linear-gradient(140deg,#5b2bd6,#2bd6c6)!important}
.scr-row.sm i.ap{align-items:center;justify-content:center;gap:4px;color:#d9d3f3;padding:6px 4px}
.scr-row.sm i.ap b{font-size:.62rem;font-weight:600;color:var(--dim)}
.scr-row.sm i.ap:first-child{color:#fff}
.scr-pad{font-size:.78rem;gap:28px}
.scr-pad span{display:flex;align-items:center;gap:6px}
.scr-pad kbd{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 .68rem/1 inherit;background:rgba(167,159,196,.18);color:#fff;border:1px solid rgba(167,159,196,.35)}
@media (max-width:560px){.scr-row.sm i.ap b,.scr-row i.cv em{display:none}.scr-row i.cv b{font-size:.68rem}}

/* signup birth month/year (age screen) */
fieldset.dob{border:1px solid var(--line);border-radius:12px;padding:8px 14px 12px;margin:0 0 14px}fieldset.dob legend{padding:0 6px;color:var(--dim);font-weight:500}

/* v9: icons row on top, covers below, animated */
.screen .scr-row.sm{order:0}.screen .scr-row.big{grid-template-columns:repeat(4,1fr);flex:1.25}
.scr-row i.cv{background:#140d2c!important;box-shadow:none!important}
.scr-row i.cv .art{position:absolute;inset:0;background-size:cover;background-position:center;transform-origin:50% 50%;animation:scr-kb 18s ease-in-out infinite alternate}
.scr-row i.cv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,5,20,.88));z-index:0}
.scr-row i.cv:nth-child(2) .art{animation-delay:-4s}.scr-row i.cv:nth-child(3) .art{animation-delay:-9s}.scr-row i.cv:nth-child(4) .art{animation-delay:-13s}
.cv-race .art{background-image:url(/static/covers/streetglow-drift.webp),linear-gradient(160deg,#ff5f6d,#7a2bd6 60%,#1a0f3a)}
.cv-fps .art{background-image:url(/static/covers/hollow-vector.webp),linear-gradient(150deg,#0f3b5c,#152a6b 55%,#0b0a22)}
.cv-adv .art{background-image:url(/static/covers/ashes-of-veylmoor.webp),linear-gradient(180deg,#f7b267,#c0548f 55%,#2a1840)}
.cv-indie .art{background-image:url(/static/covers/pocket-comet.webp),linear-gradient(140deg,#5b2bd6,#2bd6c6)}
.scr-row i.cv{animation:scr-focus 10s infinite;transition:transform .3s}
.scr-row i.cv:nth-child(2){animation-delay:2.5s}.scr-row i.cv:nth-child(3){animation-delay:5s}.scr-row i.cv:nth-child(4){animation-delay:7.5s}
@keyframes scr-focus{0%,22%{transform:scale(1.045);box-shadow:0 0 0 2px var(--cyan),0 0 24px rgba(39,233,255,.45)!important;z-index:2}25%,100%{transform:scale(1);box-shadow:none;z-index:1}}
@keyframes scr-kb{from{transform:scale(1.04) translate(-1.5%,1%)}to{transform:scale(1.14) translate(1.5%,-1.5%)}}
.scr-row.sm i.ap{transition:background .3s,color .3s}
.scr-row.sm i.ap:first-child{box-shadow:none}
.scr-pad kbd{animation:scr-press 10s infinite}
@keyframes scr-press{0%,20%,100%{background:rgba(167,159,196,.18)}21%,23%{background:var(--cyan);color:#0b0820}}
@media (prefers-reduced-motion:reduce){.scr-row i.cv,.scr-row i.cv .art,.scr-pad kbd{animation:none!important}.scr-row i.cv:first-child{box-shadow:0 0 0 2px var(--cyan)}}
.screen{position:relative}
.screen::after{content:"Illustration \00B7  fictional games";position:absolute;right:14px;bottom:-22px;font-size:.66rem;letter-spacing:.04em;color:var(--dim);opacity:.7}

/* v10: live Gaming-mode <-> Desktop demo (generic look-alike, our own colors) */
.screen-wrap{display:flex;flex-direction:column;gap:30px}
.screen{overflow:hidden;padding:0!important;display:block!important}
.screen::after{bottom:auto;top:calc(100% + 6px)}
.screen-wrap .screen{overflow:visible}
.screen>.mode,.screen>.launch,.screen>.switching{position:absolute;inset:0;border-radius:inherit;overflow:hidden;transition:opacity .45s ease,transform .45s ease}
.mode.bp{padding:18px;display:flex;flex-direction:column;gap:12px}
.screen[data-demo="desk"] .mode.bp,.screen[data-demo="launch"] .mode.bp{opacity:0;transform:scale(1.04);pointer-events:none}
.mode.desk{opacity:0;transform:scale(.97);pointer-events:none;background:radial-gradient(ellipse at 75% 20%,rgba(39,233,255,.35),transparent 55%),radial-gradient(ellipse at 15% 85%,rgba(214,75,190,.35),transparent 55%),linear-gradient(150deg,#2a1670,#0d0a26 70%)}
.screen[data-demo="desk"] .mode.desk{opacity:1;transform:none;pointer-events:auto}
.d-icons{position:absolute;left:3%;top:5%;display:flex;flex-direction:column;gap:12px}
.di{display:flex;flex-direction:column;align-items:center;width:64px;color:#e9e4ff;gap:3px}.di small{font-size:.55rem;text-align:center;line-height:1.15;text-shadow:0 1px 3px #000}
.win{position:absolute;border-radius:9px;background:rgba(22,16,46,.94);border:1px solid rgba(167,159,196,.28);box-shadow:0 14px 40px rgba(0,0,0,.55);overflow:hidden;transition:transform .5s ease,opacity .5s ease}
.w-files{left:20%;top:8%;width:50%;height:58%}
.w-web{left:42%;top:22%;width:52%;height:58%}
.screen[data-demo="desk"] .w-files{animation:win-in .5s .15s both}.screen[data-demo="desk"] .w-web{animation:win-in .5s .55s both}
@keyframes win-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.wt{display:flex;align-items:center;gap:5px;height:20px;padding:0 8px;background:rgba(255,255,255,.06);font-size:.58rem;color:#cfc8ee}.wt span{margin-right:auto}.wt i{width:7px;height:7px;border-radius:50%;background:rgba(167,159,196,.45)}.wt i:last-child{background:#ff5f7a}
.wb{display:flex;height:calc(100% - 20px)}
.side{width:28%;padding:6px;display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.03)}.side b{font-size:.52rem;font-weight:500;color:var(--dim);padding:2px 5px;border-radius:4px}.side b:first-child{background:rgba(122,75,214,.45);color:#fff}
.grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px;align-content:start}
.df{display:flex;flex-direction:column;align-items:center;color:#9d7bff;gap:1px}.df small{font-size:.5rem;color:#cfc8ee}
.wb.web{flex-direction:column;padding:8px;gap:6px}
.web .bar{height:8px;border-radius:4px;background:rgba(255,255,255,.12)}
.web .wh{height:34%;border-radius:6px;background:linear-gradient(120deg,#7a4bd6,#27e9ff)}
.web .line{height:6px;width:70%;border-radius:3px;background:rgba(255,255,255,.18)}.web .line.s{width:45%}
.web .cards{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.web .cards i{border-radius:5px;background:rgba(255,255,255,.08)}
.taskbar{position:absolute;left:0;right:0;bottom:0;height:12%;min-height:28px;display:flex;align-items:center;justify-content:center;background:rgba(14,10,32,.82);backdrop-filter:blur(8px);border-top:1px solid rgba(167,159,196,.18)}
.tb-mid{display:flex;gap:6px}
.tb{display:grid;place-items:center;width:26px;height:24px;border-radius:6px;color:#d9d3f3;position:relative}.tb.start{background:rgba(122,75,214,.35)}
.tb.on::after{content:"";position:absolute;bottom:1px;width:8px;height:2px;border-radius:2px;background:var(--cyan)}
.tb-right{position:absolute;right:10px;display:flex;align-items:center;gap:7px;color:#d9d3f3;font-size:.58rem}
.launch{opacity:0;pointer-events:none;background:#07051a}
.launch .art{position:absolute;inset:0;background:url(/static/covers/streetglow-drift.webp) center/cover;transform:scale(1.15);filter:brightness(.55)}
.screen[data-demo="launch"] .launch{opacity:1}
.screen[data-demo="launch"] .launch .art{animation:scr-kb 3s ease-out both}
.l-txt{position:absolute;left:6%;bottom:12%;display:flex;flex-direction:column;gap:6px}
.l-txt b{font:700 1.5rem/1 inherit;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8)}.l-txt i{font-style:normal;font-size:.75rem;color:var(--cyan)}
.l-txt u{display:block;width:160px;height:3px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden;position:relative}
.l-txt u::after{content:"";position:absolute;inset:0;background:var(--cyan);transform-origin:left;transform:scaleX(0)}
.screen[data-demo="launch"] .l-txt u::after{animation:l-bar 2.4s ease-in-out forwards}
@keyframes l-bar{to{transform:scaleX(1)}}
.switching{opacity:0;pointer-events:none;display:grid;place-items:center;background:#05030f;color:var(--dim);font-size:.8rem;letter-spacing:.04em;transition:opacity .2s}
.screen.is-switching .switching{opacity:1}
.demo-ctl{display:flex;justify-content:center;gap:8px}
.demo-ctl button{font:600 .78rem/1 inherit;letter-spacing:.04em;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer}
.demo-ctl button[aria-pressed="true"]{background:var(--purple2,#7a4bd6);color:#fff;border-color:transparent}
.demo-ctl button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.mode.bp .cv{cursor:pointer}
@media (max-width:560px){.d-icons{display:none}.w-files{left:4%;width:62%}.w-web{left:30%;width:66%}.l-txt b{font-size:1.1rem}}
@media (prefers-reduced-motion:reduce){.screen>.mode,.win,.launch .art{transition:none!important;animation:none!important}}

/* v11: demo layout. Mode buttons sit in the header row (level with the eyebrow); the screen spans exactly the
   step list (same top and bottom) via subgrid; the fictional-games note moves up beside the buttons. */
.screen-wrap{gap:14px}
.screen-wrap .demo-ctl{order:-1;justify-content:flex-start;align-items:center}
.screen-wrap .demo-ctl::after{content:"Illustration \00B7  fictional games";margin-left:auto;font-size:.66rem;letter-spacing:.04em;color:var(--dim);opacity:.75}
.screen-wrap .screen::after{display:none}
.split:has(>.screen-wrap){align-items:stretch}
.split.howto{grid-template-rows:auto auto 1fr;row-gap:0}
.split.howto>div:first-child{grid-row:1/4;display:grid;grid-template-rows:subgrid}
.split.howto>div:first-child>.eyebrow{align-self:start}
.split.howto .process{margin:0}
.split.howto>.screen-wrap{grid-row:1/4;display:grid;grid-template-rows:subgrid;gap:0}
.split.howto .demo-ctl{grid-row:1/3;align-self:start}
.split.howto .screen{grid-row:3;aspect-ratio:auto;height:100%;min-height:300px}
@media (max-width:820px){.split.howto{display:flex;flex-direction:column}.split.howto>div:first-child,.split.howto>.screen-wrap{display:flex;flex-direction:column;gap:14px}.split.howto .screen{aspect-ratio:16/10;height:auto}}