:root{--bg1:#001e3c;--bg2:#0ea5e9;--accent:#ffd028;--text:#e6f1ff;--muted:#9cc3ff}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
line-height:1.6;color:var(--text);background:linear-gradient(135deg,var(--bg1),var(--bg2));
min-height:100vh;display:flex;flex-direction:column}
.container{width:min(1100px,92%);margin:0 auto}
header.site{background:rgba(0,0,0,.25);backdrop-filter:blur(6px);position:sticky;top:0;z-index:10}
.nav{display:flex;align-items:center;gap:18px;padding:12px 0}
.nav a.logo{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text);text-decoration:none}
.nav img{width:28px;height:28px}
.navlinks{margin-left:auto;display:flex;gap:14px}
.navlinks a{color:var(--text);text-decoration:none;padding:8px 12px;border-radius:10px}
.navlinks a:hover{background:rgba(255,255,255,.12)}
.hero{padding:56px 0 30px 0;text-align:center}
.hero h1{font-size:40px;margin:8px 0 10px 0}
.hero p{color:var(--muted);margin:0 auto;width:min(720px,100%)}
.cta{margin-top:18px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{background:var(--accent);color:#1b1b1b;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.btn.secondary{background:transparent;border:2px solid var(--accent);color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:26px 0}
.card{background:rgba(0,0,0,.25);padding:18px;border-radius:14px}
.card h3{margin:6px 0 6px 0}
section{padding:18px 0}
footer{margin-top:auto;background:rgba(0,0,0,.3);padding:18px 0;color:var(--muted)}
small a{color:var(--muted)}
main{padding-bottom:40px}
h2{margin-top:12px}
kbd{background:#132b4a;padding:2px 6px;border-radius:6px;border:1px solid #244c7a}
figure{margin:0;text-align:center}
.badge{display:inline-block;background:#132b4a;border:1px solid #244c7a;color:var(--muted);padding:4px 10px;border-radius:999px;font-size:12px}