:root{
  --bg:#0b1020; --panel:#121a30; --fg:#e8ecf5; --muted:#9aa6c0;
  --accent:#4f8cff; --accent2:#31d0aa; --line:#222e4d; --ok:#31d0aa;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--fg); background:radial-gradient(1200px 600px at 70% -10%,#152449,transparent),var(--bg);
  background-color:var(--bg); min-height:100vh;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code{background:#0e1730; padding:.1em .4em; border-radius:4px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid var(--line); position:sticky; top:0;
  background:rgba(11,16,32,.85); backdrop-filter:blur(8px);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--fg); font-size:18px}
.nav nav{display:flex; gap:22px; align-items:center}
.nav nav a{color:var(--muted); font-weight:500}
.nav nav a:hover{color:var(--fg); text-decoration:none}
.nav nav a.cta{color:var(--ok)}

main{max-width:1040px; margin:0 auto; padding:56px 24px}
.hero{text-align:center; padding:40px 0 24px}
.hero h1{font-size:clamp(30px,5vw,52px); line-height:1.1; margin:.2em 0}
.hero p{color:var(--muted); max-width:640px; margin:16px auto; font-size:18px}
.actions{display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:11px 20px; border-radius:10px; border:1px solid var(--line);
  color:var(--fg); font-weight:600; background:var(--panel)
}
.btn:hover{text-decoration:none; border-color:var(--accent)}
.btn.primary{background:linear-gradient(180deg,var(--accent),#3a6fe0); border-color:transparent}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin:56px 0}
.grid article{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px}
.grid h3{margin:.1em 0 .4em}
.grid p{color:var(--muted); margin:0}

.pops{margin:56px 0}
.pops h2{font-size:26px}
.pop-list{list-style:none; padding:0; margin:20px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.pop-list li{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 16px; color:var(--muted)}
.pop-list span{display:inline-block; min-width:44px; font-weight:700; color:var(--accent2)}

.prose{max-width:760px}
.prose.center{text-align:center}
.prose h1{font-size:34px}
.prose h2{margin-top:1.6em}
.prose p{color:var(--muted)}
.muted{color:var(--muted); font-size:.95em}

.ok-banner{display:inline-block; background:rgba(49,208,170,.12); color:var(--ok); border:1px solid rgba(49,208,170,.4); padding:8px 16px; border-radius:10px; font-weight:600}
.status-table{width:100%; border-collapse:collapse; margin:24px 0}
.status-table th,.status-table td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line)}
.status-table th{color:var(--muted); font-weight:600; font-size:.85em; text-transform:uppercase; letter-spacing:.04em}
.status-table td.up{color:var(--ok); font-weight:600}

footer{
  max-width:1040px; margin:40px auto 0; padding:24px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:.9em
}
footer nav{display:flex; gap:18px}
footer a{color:var(--muted)}
@media (max-width:560px){
  .nav{flex-direction:column; gap:12px}
  footer{flex-direction:column; gap:12px}
}