:root{
  --bg:#0f172a;--paper:#0b1220;--ink:#e5f1e6;--muted:#b7c8bb;--line:#1f2a44;--key:#f59e0b;--key2:#22c55e;
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 10% -10%, #1d2742 0, var(--bg) 55%);color:var(--ink)}
a{color:var(--key);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;background:rgba(11,18,32,.8);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:40}
.nav{display:flex;justify-content:space-between;align-items:center;height:64px}
.brand{display:flex;align-items:center;gap:10px}.brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(45deg,var(--key),var(--key2))}
.menu{display:flex;gap:16px;flex-wrap:wrap}.burger{display:none;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);height:40px;padding:0 12px}
.hero{display:grid;grid-template-columns:2fr 1fr;gap:16px;padding:24px 0}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.h1{font-size:30px;margin:0}.h2{font-size:22px;margin:0 0 8px}.lead{color:var(--muted)}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:12px;color:var(--muted)}
.main{display:grid;grid-template-columns:1.7fr 1fr;gap:16px}
.sec{padding:24px 0;border-top:1px dashed var(--line)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:12px}.kv>div{border:1px dashed var(--line);border-radius:12px;padding:12px}
.timeline{display:grid;gap:10px}.step{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:start}
.bullet{width:36px;height:36px;border-radius:12px;background:linear-gradient(45deg,var(--key),var(--key2));display:flex;align-items:center;justify-content:center;color:#0b1220;font-weight:700}
.check{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start}
.box{border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(255,255,255,.02)}
.tabs{display:grid;gap:10px}.tab-nav{display:flex;gap:8px;flex-wrap:wrap}.tab-nav label{padding:8px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
input[type=radio].tab{display:none}.panel{display:none}
input#t1:checked~.panels #p1, input#t2:checked~.panels #p2, input#t3:checked~.panels #p3{display:block}
.input,.textarea,select{width:100%;background:#0d162b;border:1px solid var(--line);border-radius:12px;padding:10px;color:var(--ink)}
.btn{height:46px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(45deg,var(--key),var(--key2));color:#0b1220;font-weight:700;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink)}
footer{margin-top:28px;border-top:1px solid var(--line);background:rgba(11,18,32,.7)}
.small{font-size:12px;color:var(--muted)}
@media(max-width:980px){.hero{grid-template-columns:1fr}.main{grid-template-columns:1fr}.menu{display:none}.burger{display:block}}