/* ========== Tokens & reset ========== */
*,*::before,*::after{box-sizing:border-box}

:root{
  --bg:#0b0d13;
  --panel:#141821;
  --panel-2:#1a1f2b;
  --line:#252b3a;
  --text:#e8ebf3;
  --muted:#8a93a9;
  --accent:#6366f1;
  --accent-2:#818cf8;
  --ok:#10b981;
  --warn:#f59e0b;
  --bad:#ef4444;
  --radius:12px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}

code{font-family:var(--mono);font-size:12.5px}
p code,td code,li code{
  background:rgba(255,255,255,.06);
  padding:1px 5px;
  border-radius:5px;
  color:#c7d2fe;
}

.muted{color:var(--muted)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}

/* ========== Top nav ========== */
.nav{
  position:sticky;top:0;z-index:30;
  background:rgba(11,13,19,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;gap:22px;height:62px}
.brand{display:flex;align-items:center;gap:9px;font-weight:650;letter-spacing:-.2px;font-size:15px}
.brand .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent);
}
.nav-links{display:flex;gap:4px}
.nav-links a{
  padding:8px 13px;border-radius:9px;
  font-size:13.5px;color:var(--muted);
  transition:background .15s,color .15s;
}
.nav-links a:hover{color:var(--text);background:var(--panel)}
.nav-links a.active{
  color:var(--accent-2);
  background:rgba(99,102,241,.12);
  font-weight:600;
}
.nav-cta{margin-left:auto;display:flex;gap:9px;align-items:center}

/* ========== Buttons ========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 16px;border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);
  font:inherit;font-size:13.5px;font-weight:550;
  cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .1s;
}
.btn:hover{background:#242a3a;border-color:#333b4f}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--panel)}
.btn.danger{background:transparent;border-color:#4a2530;color:#fca5a5}
.btn.danger:hover{background:#3a1b23}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:8px}
.btn.lg{padding:13px 22px;font-size:14.5px;border-radius:11px}

/* ========== Shared bits ========== */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:20px;
  background:var(--panel);border:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
.pill .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 8px var(--ok);
}

.tag{
  display:inline-block;
  padding:3px 9px;border-radius:6px;
  font-family:var(--mono);
  font-size:11px;font-weight:700;letter-spacing:.4px;
  border:1px solid transparent;
}

/* ========== Footer ========== */
.footer{
  border-top:1px solid var(--line);
  margin-top:72px;
  padding:30px 0;
  font-size:13px;color:var(--muted);
}
.footer-inner{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.footer nav{display:flex;gap:18px;flex-wrap:wrap}
.footer a:hover{color:var(--text)}