:root {
  --color-brand: #3b82f6;
  --color-accent: #8b5cf6;
  --color-accent-hot: #ec4899;
  color: #18181b;
  background: #fafafa;
  font: 16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
.shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
nav { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.hero { min-height: calc(100vh - 72px); display: grid; place-content: center; text-align: center; }
.hero h1 { max-width: 900px; margin: 12px auto; font-size: clamp(3rem, 9vw, 7rem); line-height: .95; letter-spacing: -.06em; }
.hero p { max-width: 620px; margin: 12px auto; color: #52525b; }
.eyebrow { font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.cta { display: inline-block; margin: 20px auto; padding: 14px 22px; border-radius: 999px; color: white; background: linear-gradient(90deg, var(--color-brand), var(--color-accent), var(--color-accent-hot)); box-shadow: 0 14px 30px rgb(59 130 246 / 24%); text-decoration: none; font-weight: 700; }