:root{--bg:#07060f;--fg:#f4f2ff;--mut:#a9a4c9;--pink:#ff2d95;--cyan:#16e0ff;--lime:#b6ff3c;--amber:#ffb62e;--violet:#8b5cff}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:-1;background:
 radial-gradient(60vw 60vw at 15% 10%,rgba(255,45,149,.28),transparent 60%),
 radial-gradient(55vw 55vw at 90% 20%,rgba(22,224,255,.22),transparent 60%),
 radial-gradient(60vw 60vw at 50% 100%,rgba(139,92,255,.28),transparent 60%),
 linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/48px 48px;
 animation:drift 24s linear infinite}
@keyframes drift{to{background-position:0 0,0 0,0 0,0 48px,48px 0}}
a{color:var(--cyan)}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;position:sticky;top:0;backdrop-filter:blur(10px);background:rgba(7,6,15,.6);z-index:5}
.logo{font-weight:900;letter-spacing:.12em;text-decoration:none;color:var(--fg);font-size:20px}.logo span{color:var(--pink)}
nav a{margin-left:18px;text-decoration:none;color:var(--mut);font-weight:600}nav a:hover{color:var(--fg)}
.hero{text-align:center;padding:12vh 20px 8vh;max-width:980px;margin:0 auto}
.kicker{letter-spacing:.4em;color:var(--lime);font-weight:700;font-size:14px;margin:0}
.glitch{font-size:clamp(48px,14vw,150px);line-height:1;margin:.15em 0;font-weight:900;letter-spacing:.04em;position:relative;
 background:linear-gradient(90deg,var(--pink),var(--amber),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 0 24px rgba(255,45,149,.45))}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.8}
.glitch::before{transform:translate(3px,0);clip-path:inset(0 0 60% 0);animation:gl 3.2s infinite steps(1)}
.glitch::after{transform:translate(-3px,0);clip-path:inset(55% 0 0 0);animation:gl 2.6s infinite steps(1) reverse}
@keyframes gl{0%,86%,100%{transform:translate(0)}88%{transform:translate(6px,-2px)}92%{transform:translate(-6px,2px)}96%{transform:translate(3px,1px)}}
.lead{font-size:clamp(18px,3vw,24px);color:var(--mut);margin:.8em auto 1.4em;max-width:44ch}
.btn{display:inline-block;background:linear-gradient(90deg,var(--pink),var(--violet));color:#fff;text-decoration:none;font-weight:800;padding:14px 28px;border-radius:999px;box-shadow:0 0 28px rgba(255,45,149,.5);transition:transform .15s}
.btn:hover{transform:translateY(-2px) scale(1.03)}.btn.small{padding:8px 18px;font-size:16px}
.ticker{overflow:hidden;border-block:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);padding:10px 0;margin:2vh 0 6vh}
.track{display:flex;gap:28px;white-space:nowrap;width:max-content;animation:tick 28s linear infinite;font-weight:900;letter-spacing:.2em;color:var(--amber)}
.track span:nth-child(4n+2){color:var(--pink)}
@keyframes tick{to{transform:translateX(-50%)}}
section{max-width:1180px;margin:0 auto;padding:0 20px 8vh}
h2{font-size:clamp(28px,5vw,44px);margin:0 0 1em;letter-spacing:.02em}
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{--c:var(--cyan);position:relative;background:rgba(18,15,38,.78);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:18px;padding:24px;box-shadow:0 0 0 0 var(--c);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-6px);box-shadow:0 10px 40px -8px var(--c)}
.card h3{margin:.5em 0 .1em;font-size:26px;line-height:1.15;color:var(--c)}
.tag{margin:0 0 .8em;font-weight:700;color:var(--fg)}
.card p{margin:.4em 0}.card ul{margin:.8em 0 0;padding-left:1.2em;color:var(--mut)}
.chip{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#07060f;background:var(--c);padding:4px 10px;border-radius:999px}
.c-sys{--c:var(--cyan)}.c-bore{--c:var(--pink)}.c-tpw{--c:var(--amber)}.c-b4b{--c:var(--lime)}.c-sic{--c:var(--violet)}.c-duel{--c:#ff5a3c}.c-af{--c:#e8e4ff}
.about p{max-width:62ch;color:var(--mut)}
footer{text-align:center;color:var(--mut);padding:30px 20px 50px;border-top:1px solid rgba(255,255,255,.1);font-size:15px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}.reveal.in{opacity:1;transform:none}
@media (max-width:560px){nav a{margin-left:12px;font-size:15px}.top{padding:12px 16px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.c-sci{--c:#4dffb0}
.minis{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.mini{background:rgba(18,15,38,.7);border:1px solid rgba(255,255,255,.14);border-left:4px solid var(--pink);border-radius:12px;padding:14px 16px;transition:transform .15s,border-color .15s}
.mini:nth-child(3n+2){border-left-color:var(--cyan)}.mini:nth-child(3n){border-left-color:var(--lime)}
.mini:hover{transform:translateY(-3px);border-color:var(--amber)}
.mini h4{margin:0 0 .2em;font-size:18px}.mini p{margin:0;font-size:16px;color:var(--mut);line-height:1.45}
h2.gap{margin-top:2.2em}