:root{--bg:#0b1220;--card:#101a2e;--muted:#8ba0bd;--text:#e6edf7;--accent:#4cc9f0;--ring:rgba(76,201,240,.35);}
*{box-sizing:border-box}html,body{margin:0}body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#0b1220 0%,#0e1526 100%);}
a{color:inherit;text-decoration:none} .container{max-width:1100px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:rgba(11,18,32,.6);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand img{height:44px;width:auto;border-radius:8px}
.brand span{opacity:.8}
nav a{margin-left:16px;opacity:.9}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:var(--accent);color:#00202a;font-weight:700;box-shadow:0 6px 20px var(--ring)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.2)}
.hero{padding:64px 0 28px}
.headline{font-size:38px;margin:0 0 10px}
.sub{color:var(--muted)}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);padding:18px;border-radius:16px}
section{padding:42px 0}
h2.section-title{margin:0 0 8px;font-size:26px}
.list{display:grid;gap:8px;margin:10px 0 0}
.list li{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:10px 12px;border-radius:12px}
footer{padding:26px 0;border-top:1px solid rgba(255,255,255,.08);color:#a6b3c9}
@media(max-width:820px){.grid.cols-3{grid-template-columns:1fr 1fr}.grid.cols-2{grid-template-columns:1fr}.headline{font-size:30px}}