@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/outfit.woff2') format('woff2'); }
@font-face { font-family: 'Baloo Bhai 2'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/baloo.woff2') format('woff2'); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--surface-canvas); color: var(--content-strong); font-family: var(--font-body); }
h1, h2, p { margin: 0; }
button { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: var(--focus-ring-width) solid var(--control-focus-line); outline-offset: var(--focus-ring-offset); }
.skip-link { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--surface-canvas); color: var(--content-strong); padding: var(--space-3); transform: translateY(-200%); z-index: var(--z-elevated); }
.skip-link:focus { transform: none; }
.stage { margin: auto; padding: var(--space-8) var(--space-5) 0; max-width: calc(var(--space-16) * 18); text-align: center; }
.wordmark { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; }
.wordmark span { color: var(--color-brand-primary-text); }
h1 { font-family: var(--font-display); font-size: var(--text-7xl); font-weight: 800; line-height: 1.1; margin-top: var(--space-5); text-wrap: balance; }
h1 span { color: var(--color-brand-accent-text); }
.coding-line { margin-top: var(--space-3); font-size: var(--text-xl); color: var(--content-muted); }
.coding-line strong { color: var(--content-strong); font-weight: 600; }
.hero { display: block; width: 100%; height: auto; max-width: calc(var(--space-16) * 14); margin: auto; }
.teaser { margin: auto; padding: 0 var(--space-5) var(--space-8); max-width: calc(var(--space-16) * 12); text-align: center; }
.teaser > p:first-child { font-size: var(--text-2xl); font-weight: 500; }
.audiences { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-block: var(--space-5); }
.audiences button { border: 1px solid var(--border-soft); border-radius: var(--radius-full); background: var(--surface-stage); color: var(--content-strong); min-height: var(--touch-target-min); padding: var(--space-3) var(--space-6); transition: background var(--dur-fast) var(--ease-out); }
.audiences button:hover { background: var(--color-brand-accent); }
.audiences span { margin-left: var(--space-3); }
.coming-soon { font-size: var(--text-base); color: var(--content-muted); line-height: 1.6; }
h2 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; text-wrap: balance; }
.submit { border: 0; border-radius: var(--radius-section); padding: var(--space-4) var(--space-5); min-height: var(--touch-target-min); background: var(--color-brand-accent); color: var(--content-strong); font-weight: 600; font-size: var(--text-base); transition: box-shadow var(--dur-fast) var(--ease-out); }
.submit:hover { box-shadow: inset 0 0 0 var(--focus-ring-width) var(--content-strong); }
dialog { border: 1px solid var(--border-soft); border-radius: var(--radius-section); padding: var(--space-6); max-width: calc(var(--space-16) * 9); width: calc(100% - var(--space-8)); background: var(--surface-canvas); color: var(--content-strong); }
dialog::backdrop { background: color-mix(in srgb, var(--surface-inverted) 50%, transparent); }
dialog p { margin-top: var(--space-4); color: var(--content-muted); line-height: 1.6; }
dialog .submit { margin-top: var(--space-5); width: 100%; }
@media (max-width: 40rem) {
  .stage { padding: var(--space-6) var(--space-2) 0; }
  h1 { font-size: var(--text-5xl); margin-top: var(--space-3); }
  .wordmark { font-size: var(--text-xl); }
  .coding-line { font-size: var(--text-base); }
  .teaser > p:first-child { font-size: var(--text-xl); }
  .audiences { gap: var(--space-2); }
  .audiences button { padding-inline: var(--space-4); }
  h2 { font-size: var(--text-3xl); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }