:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #08090b;
  color: #f5f5f7;
}

* { box-sizing: border-box; }

body { margin: 0; background: radial-gradient(circle at top, #16232b 0, #08090b 40rem); }

a { color: #8ae6fa; text-underline-offset: 0.18em; }

.page { width: min(100% - 2rem, 46rem); margin: 0 auto; padding: 1.5rem 0 5rem; }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 4rem; }

.brand { color: #fff; font-size: 1.05rem; font-weight: 700; text-decoration: none; }

.nav__link { font-size: 0.9rem; }

.eyebrow { margin: 0 0 0.75rem; color: #7dd9ed; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

h1 { max-width: 12ch; margin: 0; font-size: clamp(2.5rem, 8vw, 4.7rem); letter-spacing: -0.06em; line-height: 0.96; }

h2 { margin: 3.5rem 0 0.8rem; font-size: clamp(1.45rem, 4vw, 2rem); letter-spacing: -0.035em; line-height: 1.08; }

h3 { margin: 1.75rem 0 0.5rem; font-size: 1.05rem; }

p, li { color: #c9ccd1; font-size: 1.05rem; line-height: 1.7; }

.intro { max-width: 41rem; margin: 1.5rem 0 0; font-size: 1.2rem; }

.card { margin-top: 2rem; padding: 1.35rem 1.5rem; border: 1px solid rgba(255,255,255,0.13); border-radius: 1rem; background: rgba(255,255,255,0.045); }

.card p { margin: 0; }

ul { padding-left: 1.25rem; }

li + li { margin-top: 0.7rem; }

.footer { margin-top: 4.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.9rem; }

@media (max-width: 32rem) { .nav { padding-bottom: 3rem; } }
