:root{
  --bg:#0b0c0e; --surface:#131519; --surface-2:#181b20; --border:#24282e;
  --text:#e9ebee; --muted:#8b919b; --faint:#5d636d;
  --accent:#d4a24c; --live:#4ade80; --build:#fbbf24; --planned:#6b7280;
  --radius:14px;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---- header ---- */
header{padding:36px 0 0}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none}
.brand b{
  font-size:19px;font-weight:700;letter-spacing:-0.02em;
  font-family:'JetBrains Mono',ui-monospace,monospace;
}
.brand b span{color:var(--accent)}
.brand small{color:var(--faint);font-size:12.5px;letter-spacing:0.02em}

/* ---- hero ---- */
.hero{padding:72px 0 56px;border-bottom:1px solid var(--border)}
.hero h1{
  margin:0 0 18px; font-size:clamp(30px,5.2vw,50px); font-weight:700;
  letter-spacing:-0.03em; line-height:1.12; max-width:19ch;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{margin:0;max-width:60ch;color:var(--muted);font-size:17px}

/* ---- grid ---- */
.section-label{
  margin:56px 0 20px;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--faint);
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.card{
  display:flex;flex-direction:column;gap:11px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px 22px 20px;
  text-decoration:none;transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.card:hover{border-color:#39404a;background:var(--surface-2);transform:translateY(-2px)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-name{display:flex;align-items:baseline;gap:9px;min-width:0}
.card-name h3{margin:0;font-size:17.5px;font-weight:650;letter-spacing:-0.01em}
.card-name .ar{color:var(--faint);font-size:14px}
.kicker{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:0.07em;color:var(--faint);text-transform:uppercase;
}
.card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.58}
.card-host{
  margin-top:auto;padding-top:12px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;color:var(--faint);
}
.card:hover .card-host{color:var(--accent)}

/* ---- status pill ---- */
.pill{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;border:1px solid var(--border);
  color:var(--muted);white-space:nowrap;
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--planned)}
.pill.live{color:var(--live);border-color:rgba(74,222,128,.28)}
.pill.live::before{background:var(--live);box-shadow:0 0 0 3px rgba(74,222,128,.15)}
.pill.build{color:var(--build);border-color:rgba(251,191,36,.28)}
.pill.build::before{background:var(--build)}

/* ---- coming soon page ---- */
.soon{padding:96px 0 72px;max-width:640px}
.back{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:44px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;
  color:var(--faint);text-decoration:none;transition:color .18s ease;
}
.back:hover{color:var(--accent)}
.soon .titleline{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.soon h1{margin:0;font-size:clamp(32px,6vw,48px);font-weight:700;letter-spacing:-0.03em}
.soon .ar{color:var(--faint);font-size:24px}
.soon .tagline{margin:18px 0 0;font-size:19px;color:var(--text);max-width:34ch;line-height:1.45}
.soon .body{margin:22px 0 0;color:var(--muted);font-size:15.5px}
.soon .meta{display:flex;align-items:center;gap:12px;margin:28px 0 0;flex-wrap:wrap}
.soon .host{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--accent);
}
.rule{height:1px;background:var(--border);margin:48px 0 0}
.soon .note{margin:24px 0 0;color:var(--faint);font-size:14px}
.soon .note a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* ---- footer ---- */
footer{
  margin-top:72px;padding:26px 0 44px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--faint);font-size:13px;
}
footer a{text-decoration:none;transition:color .18s ease}
footer a:hover{color:var(--accent)}
footer .mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px}

@media (max-width:600px){
  .hero{padding:52px 0 40px}
  .soon{padding:64px 0 56px}
  .grid{grid-template-columns:1fr}
}