:root {
  color: #e8edf5;
  background: #11151c;
  font: 16px/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: #9cc7ff; }
a:hover { color: #c7ddff; }
.page { width: min(860px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0 48px; }
.hero { padding: 0 4px 32px; }
.eyebrow { margin: 0 0 8px; color: #8c98aa; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.2; }
h1 { margin: 0; font-size: clamp(2.4rem, 8vw, 4.8rem); letter-spacing: -0.06em; }
h2 { margin: 0 0 18px; font-size: 1.7rem; }
h3 { margin: 28px 0 8px; font-size: 1rem; }
p { margin: 0 0 14px; }
.lead { max-width: 620px; margin-top: 18px; color: #aeb8c8; font-size: 1.1rem; }
.nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; }
.nav a { color: #b8c2d0; font-size: 0.9rem; }
.card { margin: 18px 0; padding: 28px clamp(20px, 5vw, 42px); border: 1px solid #293241; border-radius: 14px; background: #171d26; box-shadow: 0 12px 35px rgb(0 0 0 / 16%); }
ul { margin: 10px 0 18px; padding-left: 22px; }
li + li { margin-top: 8px; }
code { padding: 2px 5px; border-radius: 4px; background: #252d39; color: #d5deeb; }
footer { padding: 28px 4px 0; color: #727e8f; font-size: 0.8rem; }
@media (max-width: 560px) { .page { padding-top: 36px; } .card { padding-top: 22px; padding-bottom: 22px; } }