@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
  color-scheme: dark;
  /* Typography */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --fs-hero: clamp(2.45rem, 4.8vw, 4.8rem);
  --fs-h1: clamp(2.1rem, 4vw, 4rem);
  --fs-h2: clamp(1.85rem, 3vw, 3rem);
  --fs-h3: clamp(1.15rem, 1.6vw, 1.5rem);
  --fs-body-lg: clamp(1rem, 1.15vw, 1.125rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --lh-tight: 0.98;
  --lh-title: 1.05;
  --lh-body: 1.65;
  --tracking-display: -0.055em;
  --tracking-title: -0.04em;
  --tracking-body: -0.01em;
  /* Core Colors */
  --bg: #061119;
  --bg-soft: #0a1822;
  --bg-elevated: rgba(10, 22, 32, 0.78);
  --surface: rgba(10, 25, 38, 0.72);
  --surface-2: rgba(12, 31, 46, 0.86);
  --surface-3: rgba(7, 19, 29, 0.92);
  --surface-light: rgba(255, 255, 255, 0.06);
  --text: #f8fbff;
  --text-soft: #dbe7f4;
  --text-muted: #a9b7c7;
  --text-subtle: #8898aa;
  --primary: #11bcc9;
  --primary-strong: #0fd6e5;
  --primary-deep: #0c8fa0;
  --accent: #f1b05f;
  --accent-strong: #ffbf74;
  --accent-soft: rgba(241, 176, 95, 0.16);
  --success: #59d39c;
  --warning: #f7ba64;
  --danger: #ff7f87;
  --border: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.2);
  --border-primary: rgba(17, 188, 201, 0.22);
  /* Scenic overlays */
  --overlay-dark: rgba(4, 11, 17, 0.62);
  --overlay-heavy: rgba(4, 11, 17, 0.8);
  --overlay-card: linear-gradient(180deg, rgba(4, 11, 17, 0.02) 0%, rgba(4, 11, 17, 0.12) 26%, rgba(4, 11, 17, 0.72) 100%);
  --overlay-card-soft: linear-gradient(180deg, rgba(4, 11, 17, 0) 0%, rgba(4, 11, 17, 0.16) 38%, rgba(4, 11, 17, 0.62) 100%);
  --overlay-hero: linear-gradient(110deg, rgba(5, 12, 18, 0.88) 6%, rgba(5, 17, 26, 0.72) 34%, rgba(7, 23, 34, 0.42) 68%, rgba(7, 23, 34, 0.2) 100%);
  /* Gradients */
  --gradient-page: linear-gradient(180deg, #051018 0%, #07141d 24%, #091a24 55%, #061019 100%);
  --gradient-primary: linear-gradient(135deg, #11bcc9 0%, #0fa3b3 54%, #0b7d8c 100%);
  --gradient-primary-soft: linear-gradient(135deg, rgba(17, 188, 201, 0.18) 0%, rgba(17, 188, 201, 0.08) 100%);
  --gradient-accent: linear-gradient(135deg, #f1b05f 0%, #dd9548 100%);
  --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  --gradient-aurora: radial-gradient(circle at 12% 18%, rgba(17, 188, 201, 0.22), transparent 32%), radial-gradient(circle at 84% 14%, rgba(241, 176, 95, 0.18), transparent 24%), radial-gradient(circle at 68% 82%, rgba(82, 140, 255, 0.14), transparent 28%);
  /* Shadows */
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.38);
  --shadow-xl: 0 36px 96px rgba(0, 0, 0, 0.46);
  --glow-primary: 0 0 0 1px rgba(17, 188, 201, 0.14), 0 18px 52px rgba(17, 188, 201, 0.18);
  --glow-accent: 0 0 0 1px rgba(241, 176, 95, 0.14), 0 18px 48px rgba(241, 176, 95, 0.18);
  /* Radius */
  --radius-xs: 0.75rem;
  --radius-sm: 1rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;
  --radius-xl: 2rem;
  --radius-2xl: 2.4rem;
  --radius-pill: 999px;
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;
  --space-13: 7.5rem;
  --section-space: clamp(4.5rem, 8vw, 7rem);
  --section-space-tight: clamp(3.5rem, 6vw, 5rem);
  --container: min(1240px, calc(100% - 32px));
  --container-wide: min(1320px, calc(100% - 32px));
  /* Motion */
  --transition-fast: 180ms ease;
  --transition-base: 300ms cubic-bezier(.2, .8, .2, 1);
  --transition-slow: 700ms cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* Layout */
  --header-height: 88px;
  --hero-min-height: min(100svh, 900px);
  --card-media-ratio: 1 / 0.86;
  /* Depth */
  --blur-sm: 10px;
  --blur-md: 18px;
  --blur-lg: 28px;
}
@media (max-width: 960px) {
  :root {
    --container: min(100% - 24px, 1240px);
    --header-height: 78px;
  }
}
@media (max-width: 640px) {
  :root {
    --header-height: 72px;
    --section-space: clamp(4rem, 9vw, 5rem);
    --section-space-tight: clamp(3rem, 7vw, 4rem);
  }
}