/*
  BRAND ARCHETYPE:    Innovator
  LAYOUT PARADIGM:    Persistent Vertical Split + cinematic vertical reading pattern
  SECTION ORDER:      Hero Split -> Mechanism -> Proof -> Age Selector -> Challenge CTA -> References -> Footer
  DISPLAY FONT:       Space Grotesk (https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700)
  BODY FONT:          IBM Plex Sans (https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400)
  PRIMARY COLOR:      #111827 (midnight graphite for technical authority and focus)
  SHAPE LANGUAGE:     mixed tension
  SIGNATURE MOMENT:   sticky narrative rail with parallax media drift
  TONE OF VOICE:      precise, forward, decisive
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=IBM+Plex+Sans:wght@300;400&display=swap');

:root {
  --brand-primary: #111827;
  --brand-secondary: #2e1065;
  --brand-accent: #14b8a6;

  --surface-base: #eaf0fb;
  --surface-raised: #ffffff;
  --surface-inverse: #0b1222;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-inverse: #e2e8f0;

  --border-subtle: #cbd5e1;
  --border-strong: #334155;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;

  --text-hero: clamp(3.5rem, 10vw, 9rem);
  --text-h1: clamp(2.5rem, 6vw, 5rem);
  --text-h2: clamp(1.75rem, 4vw, 3rem);
  --text-h3: clamp(1.25rem, 2.5vw, 1.75rem);
  --text-body: clamp(1rem, 1.5vw, 1.125rem);
  --text-sm: clamp(0.75rem, 1vw, 0.875rem);

  --space-2: .5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
}