:root {
  --bg:#080d12;
  --panel:#0d151d;
  --panel2:#111c25;
  --line:#20303c;
  --text:#edf7f7;
  --muted:#82939e;
  --accent:#20e0c0;
  --accent2:#45aef2;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

a { color:inherit; text-decoration:none; }

.topbar {
  height:72px;
  padding:0 max(24px,calc((100% - 1180px)/2));
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  background:rgba(8,13,18,.92);
  backdrop-filter:blur(14px);
  z-index:10;
}

.brand {
  font-weight:800;
  letter-spacing:.08em;
  display:flex;
  align-items:center;
  gap:8px;
}

.brand span span,
.brand > span:last-child { color:var(--accent); }

.mark {
  font-size:30px;
  color:var(--accent);
}

nav { display:flex; gap:28px; }
nav a { color:var(--muted); font-size:14px; }
nav a:hover { color:var(--text); }

main { max-width:1180px; margin:auto; padding:0 24px; }

.hero {
  min-height:610px;
  padding:110px 0 80px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.eyebrow {
  color:var(--accent);
  letter-spacing:.18em;
  font-size:12px;
  font-weight:800;
  margin-bottom:16px;
}

h1 {
  font-size:clamp(56px,8vw,96px);
  line-height:.92;
  margin:0;
  letter-spacing:-.06em;
  max-width:900px;
}

h1 em { color:var(--accent); font-style:normal; }

h2 {
  font-size:clamp(32px,4vw,48px);
  margin:4px 0 20px;
  letter-spacing:-.035em;
}

.hero > p {
  color:var(--muted);
  font-size:20px;
  line-height:1.6;
  max-width:690px;
  margin:30px 0;
}

.actions { display:flex; gap:12px; }

.button {
  border:1px solid var(--line);
  padding:13px 22px;
  border-radius:6px;
  font-weight:700;
}

.button.primary {
  background:var(--accent);
  color:#04110e;
  border-color:var(--accent);
}

.endpoint {
  margin-top:65px;
  border:1px solid var(--line);
  background:var(--panel);
  padding:18px 20px;
  display:flex;
  gap:22px;
  align-items:center;
  max-width:670px;
  border-radius:6px;
}

.endpoint span:first-child {
  color:var(--muted);
  font-size:11px;
  letter-spacing:.15em;
}

.endpoint code { flex:1; }
.online { color:var(--accent); font-size:12px; }

.section {
  padding:90px 0;
  border-top:1px solid var(--line);
}

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:32px;
}

.muted { color:var(--muted); font-size:13px; }

.metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
}

.metric {
  padding:28px;
  min-height:155px;
  background:var(--panel);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.metric label,
.metric small {
  display:block;
  color:var(--muted);
}

.metric label {
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}

.metric strong {
  display:block;
  font-size:32px;
  margin:20px 0 8px;
}

.split {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:70px;
}

.split p { color:var(--muted); line-height:1.7; }

.config-card {
  border:1px solid var(--line);
  background:var(--panel);
}

.config-row {
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:110px 1fr;
}

.config-row:last-child { border-bottom:0; }
.config-row span { color:var(--muted); }

.features {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.features article {
  padding:28px;
  border:1px solid var(--line);
  background:var(--panel);
}

.feature-icon {
  color:var(--accent);
  font-family:monospace;
  margin-bottom:50px;
}

.features p,
.empty-state p {
  color:var(--muted);
  line-height:1.7;
}

.empty-state {
  border:1px dashed var(--line);
  padding:50px;
  text-align:center;
  background:var(--panel);
}

.status-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.status-grid > div {
  padding:20px;
  background:var(--panel);
  border:1px solid var(--line);
}

.status-grid b {
  display:block;
  margin:10px 0 0 20px;
  font-size:13px;
}

.dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:12px;
}

.good { background:var(--accent); }
.pending { background:#d9aa45; }
.future { background:#56636c; }

footer {
  border-top:1px solid var(--line);
  padding:55px max(24px,calc((100% - 1180px)/2));
  color:var(--muted);
}

footer .brand { color:var(--text); }
footer small { font-size:11px; }

code {
  font-family:"SFMono-Regular",Consolas,monospace;
  color:#cce8e4;
}

@media(max-width:800px) {
  nav { display:none; }
  .metrics,.features,.status-grid,.split { grid-template-columns:1fr; }
  .hero { min-height:auto; padding:80px 0; }
  .endpoint { align-items:flex-start; flex-direction:column; }
}