:root{--night:#080d1d;--panel:#101831;--panel2:#16214a;--line:#26356b;--ink:#eef3ff;--muted:#a3b3d9;--spirit:#58b4ff;--sakura:#ff74b1;--violet:#8b5cf6;--r:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.7 "Figtree","Segoe UI",system-ui,sans-serif;background:var(--night);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;line-height:1.1;margin:0}
a{color:var(--spirit)}a:focus-visible,button:focus-visible{outline:3px solid var(--sakura);outline-offset:3px;border-radius:8px}
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:6px;padding:10px 18px;background:rgba(16,24,49,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;font:800 1.2rem "Bricolage Grotesque",sans-serif;color:var(--ink);text-decoration:none}
.brand img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--sakura)}
.nav a.l{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;color:var(--muted);text-decoration:none;font-weight:600;transition:background .2s,color .2s}
.nav a.l:hover,.nav a.l[aria-current]{background:var(--panel2);color:var(--ink)}
.nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav .cta{margin-left:8px}
.strip{height:36px;background:linear-gradient(90deg,var(--violet),var(--sakura),var(--spirit));background-size:200% 100%;animation:flow 12s linear infinite}
@keyframes flow{to{background-position:200% 0}}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:999px;background:var(--sakura);color:#2b0718;font-weight:800;text-decoration:none;border:0;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px -6px var(--sakura)}
.btn.sm{padding:8px 18px}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}.btn.ghost:hover{box-shadow:0 10px 30px -10px var(--spirit);border-color:var(--spirit)}
.hero{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .art{position:absolute;inset:0;background:url(/assets/banner.jpg) 70% 20%/cover;animation:drift 24s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.12) translateX(-2%)}}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--night) 8%,rgba(8,13,29,.78) 45%,rgba(8,13,29,.15)),linear-gradient(0deg,var(--night),transparent 30%)}
.hero .in{position:relative;z-index:1;max-width:1100px;width:100%;margin:0 auto;padding:56px 22px}
.hero h1{font-size:clamp(2.4rem,6vw,4.4rem);max-width:16ch;letter-spacing:-.02em}
.hero p.lead{max-width:46ch;color:#cfdbf7;font-size:1.15rem;margin:18px 0 26px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.stream{margin-top:34px;max-width:430px;background:rgba(16,24,49,.88);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;backdrop-filter:blur(8px)}
.cmd{font:600 1.05rem ui-monospace,Menlo,Consolas,monospace;background:#0a1128;border-radius:12px;padding:11px 14px;color:var(--ink)}
.cmd i{display:inline-block;width:9px;height:1.1em;background:var(--sakura);vertical-align:-3px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.play{display:flex;align-items:center;gap:14px;margin-top:14px}
.eq{display:flex;align-items:flex-end;gap:3px;height:26px}.eq b{width:5px;border-radius:3px;background:var(--spirit);animation:eq 1s ease-in-out infinite}
.eq b:nth-child(2){animation-delay:.2s;background:var(--sakura)}.eq b:nth-child(3){animation-delay:.45s}.eq b:nth-child(4){animation-delay:.1s;background:var(--sakura)}.eq b:nth-child(5){animation-delay:.35s}
@keyframes eq{0%,100%{height:20%}50%{height:100%}}
.bar{flex:1;height:6px;border-radius:6px;background:var(--line);overflow:hidden}.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--sakura));animation:prog 9s linear infinite}
@keyframes prog{to{width:100%}}
.play small{color:var(--muted);font-weight:600}
main{max-width:1100px;margin:0 auto;padding:44px 22px 70px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin:0 0 22px;overflow:hidden}
.panel>header{display:flex;align-items:center;gap:10px;padding:14px 22px;background:var(--panel2);border-bottom:1px solid var(--line);font:700 1.05rem "Bricolage Grotesque",sans-serif}
.panel>header svg{width:20px;height:20px;fill:none;stroke:var(--sakura);stroke-width:2;stroke-linecap:round}
.panel .body{padding:24px 26px}
.panel h2{font-size:1.5rem;margin-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.grid .panel{margin:0}.grid h3{font-size:1.25rem;margin-bottom:6px}.grid p{margin:0;color:var(--muted)}
ul{padding-left:1.2em;max-width:70ch}li{margin:.4em 0}
.muted{color:var(--muted)}
.doc{max-width:820px}.doc h1{font-size:2.4rem;margin-bottom:6px}.doc h2{font-size:1.25rem;margin:1.6em 0 .3em;color:var(--spirit)}.doc p{max-width:70ch}
.steps{counter-reset:s;list-style:none;padding:0}.steps li{counter-increment:s;position:relative;padding-left:46px;margin:16px 0}
.steps li:before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--panel2);border:2px solid var(--sakura);display:grid;place-items:center;font-weight:800}
.ok{display:inline-block;padding:4px 14px;border-radius:999px;background:var(--spirit);color:#041226;font-weight:800;margin-bottom:12px}
footer{border-top:1px solid var(--line);padding:26px 20px;text-align:center;font-size:.9rem;color:var(--muted)}footer a{margin:0 10px}
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}.rv.on{opacity:1;transform:none}
@media (max-width:640px){.nav a.l span{display:none}.hero{min-height:620px}.hero:after{background:linear-gradient(0deg,var(--night) 10%,rgba(8,13,29,.7))}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.bar span{width:60%}}