:root{
  --bg:#0b0c10; --card:#12151b; --muted:#98a2b3; --text:#e5e7eb;
  --brand:#7c5cff; --brand-700:#6b46ff; --ring:#7c5cff33;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1000px; margin:0 auto; padding:0 20px}

.nav{position:sticky;top:0;background:rgba(11,12,16,.7);backdrop-filter:blur(8px);border-bottom:1px solid #1f2430}
.nav-inner{display:flex;align-items:center;justify-content:space-between; height:64px}
.brand{font-weight:800; letter-spacing:.2px; color:#fff}
.links a{margin-right:14px}
#themeToggle{background:transparent;border:0;color:#fff;font-size:18px;cursor:pointer}

.hero{padding:80px 0;background:radial-gradient(1000px 600px at 20% -10%, #7c5cff22, transparent)}
.hero-inner h1{font-size:42px; margin:0 0 10px}
.hero .cta{margin-top:18px}
.btn{
  display:inline-block; padding:12px 16px; border-radius:10px; border:1px solid #2b3242;
  font-weight:600; transition:.15s; box-shadow:0 0 0 0 var(--ring)
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--brand); border-color:var(--brand-700); color:#fff}
.btn.ghost{background:transparent; color:#fff}
.btn.small{padding:8px 12px; font-size:14px}

.section{padding:56px 0}
.section.alt{background:#0f1117}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:860px){ .grid-3{grid-template-columns:1fr} }

.card{
  background:var(--card); border:1px solid #1e2430; border-radius:16px; padding:18px;
}
.server-box{margin-top:14px; background:var(--card); border:1px solid #1e2430; border-radius:16px; padding:18px}
.server-box .row{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #212735}
.server-box .row:last-child{border-bottom:0}
.muted{color:var(--muted); font-size:14px}

.list{list-style:none; padding:0; margin:0}
.list li{padding:6px 0}

.footer{border-top:1px solid #1f2430; padding:16px 0; background:#0b0c10}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.small{font-size:14px}

/* Light mode */
.light{ --bg:#ffffff; --card:#fff; --text:#0b1727; --muted:#6b7280; }
.light .nav{background:#fff}
.light .card, .light .server-box{border:1px solid #e5e7eb}