:root{--bg:#0f1220;--card:#141a2b;--muted:#9aa4b2;--fg:#e6e9f0;--acc:#7c9cff;--line:#22314e}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 800px at 10% -10%,#1e2440 0,transparent 50%),radial-gradient(1000px 600px at 110% 20%,#1a2a55 0,transparent 45%),var(--bg);color:var(--fg);font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;z-index:10;background:rgba(20,26,43,.7);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand svg{width:28px;height:28px}
.nav a{padding:8px 10px;border-radius:10px}
.nav a.active,.nav a:hover{background:rgba(255,255,255,.06)}
.hero{padding:64px 0;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)}
h1{font-size:36px;margin:0 0 10px}
.badge{display:inline-block;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:var(--muted);padding:4px 10px;font-size:12px;margin-right:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px}
.card h3{margin:6px 0 8px}
.list{list-style:none;padding:0;margin:6px 0}
.list li{padding:8px 0;border-bottom:1px dashed var(--line)}
.kv{margin:10px 0;color:#cfd7e3}
footer{border-top:1px solid var(--line);color:var(--muted);margin-top:40px}
footer .wrap{display:grid;gap:8px;padding:18px 0}
main{padding:28px 0}
@media (max-width:720px){h1{font-size:28px}}