:root {
  color-scheme: dark;
  --ink: #f2f5f0;
  --muted: #9ca69e;
  --line: rgba(255,255,255,.11);
  --accent: #b9f35a;
  --panel: rgba(255,255,255,.045);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 80% 0%, rgba(105,154,64,.17), transparent 28rem),
    #0c100d;
  font: 16px/1.6 Inter, ui-sans-serif, system-ui, sans-serif;
}
.shell { width: min(1120px, calc(100% - 40px)); margin: auto; }
nav { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 800; letter-spacing: .18em; }
.pill { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: #d6a43c; box-shadow: 0 0 16px #d6a43c; }
.pill i.ok { background: var(--accent); box-shadow: 0 0 16px var(--accent); }
.hero { padding: 100px 0 88px; }
.eyebrow { color: var(--accent); font: 700 12px/1 monospace; letter-spacing: .16em; }
h1 { max-width: 820px; margin: 25px 0; font-size: clamp(54px, 8vw, 108px); line-height: .93; letter-spacing: -.065em; }
h1 span { color: #778078; }
.lead { max-width: 580px; color: var(--muted); font-size: clamp(17px, 2vw, 21px); }
.section-title { display: flex; align-items: end; justify-content: space-between; margin-bottom: 22px; }
.section-title h2 { margin: 0; font-size: 20px; }
.section-title span { color: var(--muted); font-size: 13px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.card { min-height: 180px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; background: var(--panel); border: 1px solid var(--line); border-radius: 17px; transition: transform .2s, border-color .2s; }
.card:hover { transform: translateY(-3px); border-color: rgba(185,243,90,.45); }
.card h3 { margin: 0; font-size: 18px; }
.card p { margin: 0; color: var(--muted); font: 12px/1.4 monospace; text-transform: uppercase; }
.status { width: fit-content; padding: 5px 9px; border-radius: 99px; background: rgba(255,255,255,.06); color: #c9cec9; font-size: 12px; }
.status.online { background: rgba(185,243,90,.12); color: var(--accent); }
footer { margin-top: 80px; padding: 30px 0 45px; color: #626a63; border-top: 1px solid var(--line); font-size: 13px; }
@media (max-width: 800px) { .grid { grid-template-columns: repeat(2, 1fr); } .hero { padding: 72px 0 64px; } }
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } .shell { width: min(100% - 28px, 1120px); } nav { height: 74px; } }