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

:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --surface: #002A8B;
  --panel-bg: #FFFFFF;
  --panel-border: rgba(255, 255, 255, 0.15);
  --accent: #0432FF;
  --heading: #FFFFFF;
  --text-primary: #FFFFFF;
  --text-secondary: #B8CCFF;
  --nav-bg: rgba(2, 4, 16, 0.95);
  --nav-border: rgba(255, 255, 255, 0.06);
  --section-border: transparent;
  --cta-bg: #000D33;
  --cta-text: #FFFFFF;
  --cta-btn-bg: #FFFFFF;
  --cta-btn-text: #0432FF;
  --hero-bg:
    linear-gradient(to bottom, transparent 30%, #002886 100%),
    url('/images/hero-dolphin.jpg');
}

/* Full-page gradient: image-matched blue → deep dark navy */
main {
  background:
    radial-gradient(ellipse 120px 80px at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 100%),
    radial-gradient(ellipse 80px 120px at 70% 50%, rgba(255, 255, 255, 0.025) 0%, transparent 100%),
    radial-gradient(ellipse 100px 60px at 45% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 100%),
    radial-gradient(ellipse 90px 100px at 85% 20%, rgba(255, 255, 255, 0.025) 0%, transparent 100%),
    linear-gradient(to bottom, #002886 0%, #000D33 100%);
  background-size: 400px 300px, 400px 300px, 400px 300px, 400px 300px, 100% 100%;
}

/* Make sections transparent so the main gradient shows through */
main > section.bg-surface {
  background-color: transparent;
  background-image: none;
}