:root {
  color-scheme: light;
  --bg: #f6fffe;
  --bg2: #f0fbff;
  --glowA: rgba(14, 165, 164, 0.22);
  --glowB: rgba(34, 197, 94, 0.17);
  --surface: rgba(255, 255, 255, 0.78);
  --surface2: rgba(255, 255, 255, 0.92);
  --surface3: rgba(255, 255, 255, 0.65);
  --surfaceSolid: #ffffff;
  --text: #0b1220;
  --textStrong: #0b1220;
  --muted: rgba(11, 18, 32, 0.72);
  --muted2: rgba(11, 18, 32, 0.6);
  --border: rgba(11, 18, 32, 0.12);
  --borderSoft: rgba(11, 18, 32, 0.08);
  --borderStrong: rgba(11, 18, 32, 0.14);
  --borderHair: rgba(11, 18, 32, 0.06);
  --shadow: 0 16px 40px rgba(2, 20, 28, 0.15);
  --shadowSoft: 0 10px 26px rgba(2, 20, 28, 0.12);
  --shadowHover: 0 12px 30px rgba(2, 20, 28, 0.12);
  --radius: 22px;
  --radiusSm: 14px;
  --teal: #0ea5a4;
  --tealDeep: #0b3b4a;
  --green: #22c55e;
  --blue: #2a74ff;
  --focus: rgba(42, 116, 255, 0.45);
  --headerBg: rgba(246, 255, 254, 0.75);
  --footerBg: rgba(255, 255, 255, 0.55);
  --linkHoverBg: rgba(14, 165, 164, 0.1);
  --navControlBg: rgba(255, 255, 255, 0.7);
  --btnGhostBg: rgba(255, 255, 255, 0.65);
  --inputBg: rgba(255, 255, 255, 0.82);
  --iconBg: linear-gradient(135deg, rgba(14, 165, 164, 0.14), rgba(34, 197, 94, 0.1));
  --iconBorder: rgba(14, 165, 164, 0.18);
  --iconFg: rgba(11, 18, 32, 0.78);
  --countCellBg: linear-gradient(135deg, rgba(14, 165, 164, 0.12), rgba(34, 197, 94, 0.08));
  --sectionAltA: rgba(14, 165, 164, 0.14);
  --sectionAltB: rgba(34, 197, 94, 0.12);
  --sectionAltBase: rgba(255, 255, 255, 0.58);
  --waitlistA: rgba(14, 165, 164, 0.2);
  --waitlistB: rgba(34, 197, 94, 0.18);
  --waitlistBase: rgba(255, 255, 255, 0.74);
  --logoShadow: 0 8px 18px rgba(14, 165, 164, 0.18);
  --logoShadowSm: 0 6px 14px rgba(14, 165, 164, 0.16);
  --btnPrimaryText: #06222b;
  --container: 1120px;
  --scroll-offset: 84px;
  --modalBackdrop: rgba(2, 10, 18, 0.42);
  --btnPrimaryBg: linear-gradient(135deg, rgba(14, 165, 164, 0.96), rgba(34, 197, 94, 0.9));
  --btnPrimaryBorder: rgba(14, 165, 164, 0.22);
  --btnPrimaryShadow: 0 14px 28px rgba(14, 165, 164, 0.2), 0 12px 50px rgba(34, 197, 94, 0.08);
  --btnPrimaryShadowHover: 0 16px 32px rgba(14, 165, 164, 0.24), 0 14px 60px rgba(34, 197, 94, 0.1);
  --badgeBorder: rgba(14, 165, 164, 0.22);
  --badgeBg: rgba(14, 165, 164, 0.08);
  --iconShadow: 0 16px 30px rgba(14, 165, 164, 0.1);
  --noteBorder: rgba(34, 197, 94, 0.18);
  --noteBg: rgba(34, 197, 94, 0.08);
  --priceFeaturedBorder: rgba(14, 165, 164, 0.32);
  --priceFeaturedShadowAccent: 0 20px 60px rgba(14, 165, 164, 0.16);
  --pillBorder: rgba(14, 165, 164, 0.22);
  --pillBg: rgba(14, 165, 164, 0.1);
  --priceCardPriceBg: linear-gradient(135deg, rgba(14, 165, 164, 0.1), rgba(34, 197, 94, 0.06));
  --listDotRing: 0 0 0 4px rgba(14, 165, 164, 0.08);
  --statusError: rgba(163, 25, 25, 0.9);
  --statusSuccess: rgba(3, 95, 49, 0.92);
  --trustDotRing: 0 0 0 4px rgba(34, 197, 94, 0.12);
  --visualLogoBg: radial-gradient(circle at 40% 30%, rgba(34, 197, 94, 0.2), rgba(14, 165, 164, 0.18));
  --visualLogoShadow: 0 16px 30px rgba(14, 165, 164, 0.14), 0 0 0 10px rgba(34, 197, 94, 0.06);
  --bubbleA: linear-gradient(135deg, rgba(14, 165, 164, 0.15), var(--surface2));
  --bubbleB: linear-gradient(135deg, rgba(34, 197, 94, 0.15), var(--surface2));
  --bubbleC: linear-gradient(135deg, rgba(42, 116, 255, 0.14), var(--surface2));
  --blob1Bg: radial-gradient(circle at 30% 30%, rgba(34, 197, 94, 0.35), transparent 62%),
    radial-gradient(circle at 60% 60%, rgba(14, 165, 164, 0.33), transparent 60%);
  --blob2Bg: radial-gradient(circle at 35% 35%, rgba(14, 165, 164, 0.3), transparent 60%),
    radial-gradient(circle at 68% 55%, rgba(42, 116, 255, 0.2), transparent 62%);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070b12;
  --bg2: #0b1322;
  --glowA: rgba(14, 165, 164, 0.18);
  --glowB: rgba(34, 197, 94, 0.12);
  --surface: rgba(13, 22, 38, 0.78);
  --surface2: rgba(18, 28, 46, 0.92);
  --surface3: rgba(255, 255, 255, 0.06);
  --surfaceSolid: #0d1626;
  --text: rgba(236, 246, 255, 0.92);
  --textStrong: rgba(255, 255, 255, 0.98);
  --muted: rgba(236, 246, 255, 0.74);
  --muted2: rgba(236, 246, 255, 0.62);
  --border: rgba(255, 255, 255, 0.12);
  --borderSoft: rgba(255, 255, 255, 0.08);
  --borderStrong: rgba(255, 255, 255, 0.16);
  --borderHair: rgba(255, 255, 255, 0.06);
  --shadow: 0 18px 54px rgba(0, 0, 0, 0.55);
  --shadowSoft: 0 12px 34px rgba(0, 0, 0, 0.44);
  --shadowHover: 0 16px 42px rgba(0, 0, 0, 0.48);
  --focus: rgba(42, 116, 255, 0.55);
  --headerBg: rgba(7, 11, 18, 0.72);
  --footerBg: rgba(255, 255, 255, 0.03);
  --linkHoverBg: rgba(14, 165, 164, 0.14);
  --navControlBg: rgba(255, 255, 255, 0.06);
  --btnGhostBg: rgba(255, 255, 255, 0.06);
  --inputBg: rgba(255, 255, 255, 0.06);
  --iconBg: linear-gradient(135deg, rgba(14, 165, 164, 0.18), rgba(34, 197, 94, 0.12));
  --iconBorder: rgba(14, 165, 164, 0.26);
  --iconFg: rgba(255, 255, 255, 0.86);
  --countCellBg: linear-gradient(135deg, rgba(14, 165, 164, 0.16), rgba(34, 197, 94, 0.1));
  --sectionAltA: rgba(14, 165, 164, 0.14);
  --sectionAltB: rgba(34, 197, 94, 0.1);
  --sectionAltBase: rgba(13, 22, 38, 0.58);
  --waitlistA: rgba(14, 165, 164, 0.18);
  --waitlistB: rgba(34, 197, 94, 0.14);
  --waitlistBase: rgba(13, 22, 38, 0.78);
  --logoShadow: 0 10px 24px rgba(14, 165, 164, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.12);
  --logoShadowSm: 0 8px 16px rgba(14, 165, 164, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.12);
  --btnPrimaryText: #03191f;
  --modalBackdrop: rgba(0, 0, 0, 0.6);
}