@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --bg: #07131f;
  --panel: #0d1d2a;
  --ink: #edf3f5;
  --muted: #91a5ad;
  --dim: #5f747d;
  --teal: #8ad9d2;
  --teal-strong: #35b8b2;
  --line: rgba(159, 209, 214, .16);
  --sans: Manrope, sans-serif;
  --display: "Space Grotesk", sans-serif;
  --mono: "DM Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 400 16px/1.75 var(--sans); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(rgba(145,205,205,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(145,205,205,.045) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
a { color: var(--teal); }
a:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
header, main, footer { width: min(920px, calc(100% - 64px)); margin-inline: auto; }
header { padding: 28px 0; border-bottom: 1px solid var(--line); }
header a { color: var(--muted); font: 500 .72rem var(--mono); letter-spacing: .06em; text-decoration: none; }
header a:hover { color: var(--ink); }
main { padding: clamp(80px, 12vw, 150px) 0 120px; }
.eyebrow { margin: 0 0 20px; color: var(--teal); font: 500 .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
h1, h2, strong { font-family: var(--display); letter-spacing: -.04em; }
h1 { max-width: 780px; margin: 0 0 28px; font-size: clamp(3rem, 8vw, 6.1rem); line-height: .98; font-weight: 600; }
h2 { margin: 76px 0 14px; font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.1; font-weight: 600; }
.lead { max-width: 690px; margin: 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.75; }
main > p:not(.eyebrow), main > h2 + p { max-width: 690px; color: var(--muted); }
.doc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 34px; border: 1px solid var(--line); background: var(--line); }
.doc-list div { min-height: 150px; padding: 24px; background: var(--panel); }
.doc-list strong { display: block; color: var(--ink); font-size: 1rem; font-weight: 600; }
.doc-list span { display: block; margin-top: 30px; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.back { display: inline-flex; margin-top: 58px; font: 500 .72rem var(--mono); text-decoration: none; }
footer { padding: 24px 0 44px; border-top: 1px solid var(--line); color: var(--dim); font: 500 .66rem var(--mono); }
@media (max-width: 600px) { header, main, footer { width: calc(100% - 32px); } main { padding-top: 72px; } h1 { font-size: clamp(2.7rem, 14vw, 4.4rem); } h2 { margin-top: 58px; } .doc-list { grid-template-columns: 1fr; } .doc-list span { margin-top: 18px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }