:root{
  --bg:#0b1220;
  --panel:#0f1a2e;
  --card:#101f3a;
  --fg:#e6eefc;
  --muted:#a8b6d6;
  --accent:#60a5fa;
  --accent2:#34d399;
  --border:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif;
  background: radial-gradient(1200px 800px at 20% -10%, rgba(96,165,250,.22), transparent 60%),
              radial-gradient(1000px 700px at 80% 0%, rgba(52,211,153,.16), transparent 55%),
              var(--bg);
  color:var(--fg);
  line-height:1.65;
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

header{
  position:sticky; top:0; z-index:10;
  background:rgba(11,18,32,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.navwrap{
  max-width:1100px; margin:0 auto;
  padding: .85rem 1rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  font-weight:750; letter-spacing:.2px; color:var(--fg);
}
.badge{
  font-size:.75rem; padding:.2rem .55rem;
  border:1px solid var(--border);
  border-radius:999px; color:var(--muted);
  background: rgba(255,255,255,.03);
}
nav{display:flex; flex-wrap:wrap; gap:.6rem; margin-left:auto}
nav a{
  color:var(--muted);
  padding:.35rem .55rem;
  border-radius:10px;
}
nav a:hover{color:var(--fg); background: rgba(255,255,255,.05); text-decoration:none}

main{max-width:1100px; margin:0 auto; padding:2.2rem 1rem 1rem}
.hero{
  padding:1.4rem 1.4rem 1.2rem;
  border:1px solid var(--border);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
.hero h1{margin:.2rem 0 .6rem; font-size:2rem; line-height:1.2}
.hero p{margin:0; color:var(--muted); max-width:80ch}

.grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:1rem; margin-top:1rem}
.card{
  background: rgba(16,31,58,.7);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1rem 1.1rem;
  box-shadow: var(--shadow);
}
.card h2{margin:.2rem 0 .35rem; font-size:1.05rem}
.card p{margin:0; color:var(--muted)}
.card ul{margin:.6rem 0 0; padding-left:1.1rem}
.card li{margin:.35rem 0; color:var(--muted)}

.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--muted); font-size:.9rem;
  margin-bottom:.5rem;
}
.kdot{width:8px; height:8px; border-radius:999px; background:var(--accent2); display:inline-block}

hr{border:none; border-top:1px solid var(--border); margin:1.6rem 0}
p{color:var(--muted)}
ul{padding-left:1.25rem}
li{margin:.35rem 0; color:var(--muted)}

.table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(16,31,58,.55);
}
.table th,.table td{
  text-align:left;
  padding:.7rem .8rem;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.table th{color:var(--fg); font-weight:650; background: rgba(255,255,255,.03)}
.table td{color:var(--muted)}
.table tr:last-child td{border-bottom:none}

.pill{
  display:inline-block;
  padding:.18rem .55rem;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color:var(--muted);
  font-size:.8rem;
  margin-right:.35rem;
}

footer{
  max-width:1100px; margin:2rem auto 2rem; padding:1.2rem 1rem;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.92rem;
}
.small{font-size:.9rem}