:root{
  --bg:#060812; --bg2:#090b18; --card:#0b1024; --line:#172047;
  --txt:#dbe7ff; --muted:#8aa0c7;
  --c1:#00e5ff; --c2:#7c3aed; --c3:#22c55e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--txt);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(0,229,255,.20), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:28px 18px 70px}
.nav{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 18px;border-radius:18px;
  border:1px solid rgba(23,32,71,.8);
  background:rgba(11,16,36,.55);backdrop-filter: blur(10px);
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:42px;height:42px;border-radius:14px;
  background: conic-gradient(from 210deg, var(--c1), var(--c2), var(--c3), var(--c1));
}
.pill{
  font-size:12px;color:var(--muted);
  border:1px solid rgba(23,32,71,.9);
  padding:8px 12px;border-radius:999px;
  background:rgba(6,8,18,.35);
}
h1{margin:38px 0 10px 0;font-size:40px;letter-spacing:-.6px}
h2{margin:0 0 10px 0;font-size:22px}
.sub{max-width:760px;color:var(--muted);line-height:1.65}
.cards{
  display:grid;gap:18px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.card{
  border-radius:20px;padding:22px;
  background:rgba(11,16,36,.55);
  border:1px solid rgba(23,32,71,.9);
  transition:.25s;
}
.card:hover{transform:translateY(-6px)}
.kbd{
  margin-top:12px;padding:12px 14px;border-radius:16px;
  font-size:12px;color:#cfe0ff;
  border:1px solid rgba(23,32,71,.9);
  background:rgba(6,8,18,.45);
}
.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.link{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:14px;
  background:rgba(11,16,36,.55);
  border:1px solid rgba(23,32,71,.9);
  color:#cfe0ff;font-size:13px;
}
.dot{width:8px;height:8px;border-radius:50%}
.dot.c1{background:var(--c1);box-shadow:0 0 14px rgba(0,229,255,.45)}
.dot.c2{background:var(--c2);box-shadow:0 0 14px rgba(124,58,237,.35)}
.dot.c3{background:var(--c3);box-shadow:0 0 14px rgba(34,197,94,.30)}
.footer{
  margin-top:46px;color:rgba(138,160,199,.9);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid rgba(23,32,71,.7);padding-top:18px;
  font-size:12px
}
hr.sep{border:0;border-top:1px solid rgba(23,32,71,.55);margin:22px 0}
.small{font-size:12px;color:rgba(138,160,199,.95)}
.badge-ok{color:#9affc8}
.badge-warn{color:#ffd27a}
.badge-down{color:#ff8aa1}