@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* Colors */
  --navy-950: #04111f;
  --navy-900: #071525;
  --navy-850: #0b2135;
  --navy-700: #123857;
  --orange: #f16900;
  --orange-bright: #ff6a2a;
  --turquoise: #2fbfd2;
  --turquoise-bright: #22d3c5;
  --mint: #22d3c5;
  --mint-soft: #5fe0cf;
  --white: #ffffff;
  --warm-white: #f4f7f5;
  --stone: #e8eeec;
  --muted: #9baab6;
  --text-soft: #b9cbd4;
  --text-light: #d3e1e8;
  --line: rgba(255, 255, 255, 0.14);

  /* Glass / Surfaces */
  --glass: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  --glass-strong: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  --glass-border: 1px solid rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* Gradients */
  --dark-bg:
    radial-gradient(44rem 30rem at 85% 5%, rgba(34, 211, 197, 0.24), transparent 60%),
    radial-gradient(40rem 30rem at 8% 95%, rgba(255, 106, 42, 0.2), transparent 60%),
    radial-gradient(30rem 24rem at 50% 50%, rgba(18, 56, 87, 0.85), transparent 70%),
    var(--navy-950);
  --gradient-accent: linear-gradient(135deg, var(--orange-bright), var(--orange));
  --gradient-line: linear-gradient(90deg, var(--turquoise-bright), var(--orange-bright));

  /* Typography */
  --font-sans: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.6875rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-lead: 1.0625rem;
  --fs-h2: clamp(2.4rem, 4.4vw, 4.4rem);
  --fs-h1: clamp(3.35rem, 6.6vw, 6.8rem);
  --tracking-heading: -0.035em;

  /* Layout */
  --page-x: clamp(1.25rem, 4.45vw, 4.5rem);
  --header-h: 6rem;
  --radius: 1.25rem;
  --radius-lg: 1.75rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;
  --section-y: clamp(5rem, 9vw, 9rem);

  /* Motion */
  --ease: 0.25s ease;
  --ease-slow: 0.45s ease;
  --ease-reveal: 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Shadows */
  --shadow-card: 0 16px 50px rgba(4, 17, 31, 0.08);
  --shadow-hover: 0 24px 50px rgba(4, 17, 31, 0.18);
  --shadow-cta: 0 10px 30px rgba(241, 105, 0, 0.35);
  --shadow-cta-hover: 0 16px 40px rgba(241, 105, 0, 0.45);
}