@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400..800;1,400..800&display=swap");

:root {
  --color-navy: #0a192f;
  --color-navy-deep: #06101f;
  --color-navy-mid: #112240;
  --color-accent: #0052cc;
  --color-accent-hover: #1a6aff;
  --color-accent-pressed: #0747a6;
  --color-accent-soft: rgba(0, 82, 204, 0.12);
  --color-glow: rgba(0, 82, 204, 0.42);
  --color-surface: #ffffff;
  --color-surface-muted: #f5f7fb;
  --color-text: #0a192f;
  --color-text-secondary: #4a5568;
  --color-text-tertiary: #6b7c92;
  --color-text-on-dark: #f4f7fb;
  --color-text-on-dark-muted: #8ea0b8;
  --color-line: rgba(10, 25, 47, 0.1);
  --color-line-strong: rgba(10, 25, 47, 0.16);
  --color-line-on-dark: rgba(255, 255, 255, 0.1);

  --font-sans: "Plus Jakarta Sans", sans-serif;

  --text-display: clamp(2.2rem, 3.6vw + 0.55rem, 3.65rem);
  --text-xl: clamp(1.75rem, 2.1vw + 0.85rem, 2.45rem);
  --text-lg: 1.125rem;
  --text-md: 1.05rem;
  --text-sm: 0.9375rem;
  --text-xs: 0.8125rem;

  --leading-display: 1.2;
  --leading-tight: 1.2;
  --leading-body: 1.7;

  --tracking-display: -0.03em;
  --tracking-wide: 0.16em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 6rem;
  --space-9: 11.25rem;
  --section-y: 11.25rem;

  --page-pad: clamp(1.75rem, 5vw, 3.5rem);
  --content-width: 74rem;
  --content-wide: 86rem;
  --content-narrow: 42rem;

  --nav-height: 80px;
  --logo-width: 190px;
  --radius: 6px;
  --radius-lg: 14px;
  --header-z: 100;
  --shadow-mockup: 0 40px 80px -15px rgba(10, 25, 47, 0.08), 0 20px 40px -20px rgba(0, 0, 0, 0.1);
  --shadow-mockup-hover: 0 48px 90px -12px rgba(10, 25, 47, 0.14), 0 24px 48px -18px rgba(0, 0, 0, 0.16);
  --shadow-lift: 0 50px 100px -20px rgba(10, 25, 47, 0.18), 0 30px 60px -30px rgba(0, 0, 0, 0.22);
  --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0s;
  }
}