/* Online Oceans Landing Page Styles */
/* Clean engineering. Calm authority. Conversion-focused. */

:root {
  /* Brand Colors */
  --deep-ocean: #1A2E5A;  /* Richer navy (was #1C3775) */
  --electric-blue: #3576FF;
  --cool-grey: #BBBCBC;
  --signal-green: #1FBF75;
  --white: #FFFFFF;
  --light-bg: #F8F9FA;

  /* Ocean Depth Colors */
  --sky: #87CEEB;
  --ocean-1: #1E88E5;
  --ocean-2: #1565C0;
  --ocean-3: #0D47A1;
  --ocean-4: #0A3475;
  --ocean-5: #062550;
  --seabed: #1E293B;
  --seabed-dark: #0F172A;

  /* Typography */
  --font-heading: 'Manrope', sans-serif;
  --font-body: 'Figtree', sans-serif;

  /* Spacing (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* Layout */
  --content-max-width: 1200px;
  --content-narrow: 720px;

  /* Text Opacity (Starlink-inspired hierarchy) */
  --text-primary: 1;
  --text-secondary: 0.7;
  --text-tertiary: 0.5;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--white);
  background: var(--ocean-1);
  overflow-x: hidden;
}

/* ==========================================================================
   IMAGES - Smooth Loading
   ========================================================================== */

img {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img.loaded,
img[src^="data:"] {
  opacity: 1;
}

/* Prevent layout shift - set explicit dimensions where possible */
img[width][height] {
  height: auto;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
h3 { font-size: 1.375rem; }

p {
  max-width: 65ch;
  opacity: var(--text-secondary);
}

/* Primary text - full opacity */
.text-primary,
h1, h2, h3, h4,
.emphasis,
.stat-value,
blockquote {
  opacity: var(--text-primary);
}

/* Tertiary text - lowest emphasis */
.text-tertiary,
.microcopy,
cite {
  opacity: var(--text-tertiary);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-inline: clamp(var(--space-3), 5vw, var(--space-6));
  position: relative;
  z-index: 3;
}

section {
  padding-block: 64px;
  position: relative;
}

/* More generous spacing on desktop */
@media (min-width: 768px) {
  section {
    padding-block: 96px;
  }
}

/* ==========================================================================
   FLOATING GLASS HEADER
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-2) 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo {
  display: flex;
  align-items: center;
}

.header-logo img {
  height: 40px;
  width: auto;
}

/* Light logo hidden by default */
.header-logo .logo-light {
  display: none;
}

/* When header is in "underwater" mode - swap logos */
.site-header.is-underwater .logo-dark {
  display: none;
}

.site-header.is-underwater .logo-light {
  display: block;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.header-nav a:not(.btn) {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--deep-ocean);
  text-decoration: none;
  transition: color 0.4s ease, opacity 0.15s ease;
}

.header-nav a:not(.btn):hover {
  opacity: 0.7;
}

/* Nav links go white underwater */
.site-header.is-underwater .header-nav a:not(.btn) {
  color: var(--white);
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: 0.875rem;
}

/* ==========================================================================
   HERO (Above Water - Sky)
   ========================================================================== */

.hero {
  background: linear-gradient(180deg, #87CEEB 0%, #B0D4F1 40%, #7EC8E3 80%, #5BA3D9 100%);
  padding-top: calc(var(--space-7) + 60px); /* Account for fixed header */
  padding-bottom: 120px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}

/* Wireframe mesh overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://res.cloudinary.com/dzkwr9w8n/image/upload/f_auto,q_auto/Recurso_1_3x-8_2_tv2wdj');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  mix-blend-mode: overlay;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--content-narrow);
  position: relative;
  z-index: 2;
}

.hero h1 {
  color: var(--deep-ocean);
}

.hero .subheadline {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: #1C3775;
  line-height: 1.5;
}

.hero .supporting {
  font-size: 1rem;
  color: #2A4A7A;
}

.hero .btn-secondary {
  color: var(--deep-ocean);
}

.hero .btn-secondary:hover {
  color: #0D2B5C;
}

/* Hero Grid Layout */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}

.hero-video {
  position: relative;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.hero-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  transition: opacity 1.5s ease;
}

/* Second video layered underneath */
.hero-video-b {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.hero-video-b.active {
  opacity: 1;
}

.hero-video-a.fading {
  opacity: 0;
}

/* Mobile: stack vertically */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .hero-video {
    max-width: 500px;
    margin: 0 auto var(--space-6);
  }

  .hero-cta {
    display: none !important;
  }
}

/* ==========================================================================
   OCEAN SURFACE - Waves stick to top as you dive
   ========================================================================== */

.ocean-surface {
  position: relative;
  width: 100%;
  height: 150px;
  pointer-events: none;
  margin-top: -150px; /* Pull up to overlap hero bottom */
  z-index: 2; /* Above hero wireframe overlay */
}

#waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
}

/* ==========================================================================
   DEPTH ZONES
   ========================================================================== */

.depth-1 {
  background: linear-gradient(180deg, var(--ocean-2) 0%, var(--ocean-3) 100%);
  color: var(--white);
}

.depth-2 {
  background: linear-gradient(180deg, var(--ocean-3) 0%, var(--ocean-4) 100%);
  color: var(--white);
}

.depth-3 {
  background: linear-gradient(180deg, var(--ocean-4) 0%, var(--ocean-4) 100%);
  color: var(--white);
}

.depth-4 {
  background: linear-gradient(180deg, var(--ocean-4) 0%, var(--ocean-5) 100%);
  color: var(--white);
}

.depth-5 {
  background: var(--ocean-5);
  color: var(--white);
}

.depth-6 {
  background: linear-gradient(180deg, var(--ocean-5) 0%, #041a3d 100%);
  color: var(--white);
}

.depth-7 {
  background: #041a3d;
  color: var(--white);
}

.depth-8 {
  background: linear-gradient(180deg, #041a3d 0%, #021029 100%);
  color: var(--white);
}

.depth-9 {
  background: #021029;
  color: var(--white);
}

/* ==========================================================================
   SEABED
   ========================================================================== */

.seabed {
  background: var(--seabed);
  color: #CBD5E1;
}

.seabed h2 {
  color: #F1F5F9;
}

.seabed .btn-primary {
  background: var(--signal-green);
  color: var(--white);
}

.seabed .btn-primary:hover {
  background: #17a863;
}

.seabed .microcopy {
  color: #94A3B8;
}

.seabed-floor {
  background: var(--seabed-dark);
  color: #64748B;
  padding-block: var(--space-4);
  position: relative;
  z-index: 6; /* Above bubbles (5), below header (100) */
}


.seabed-floor .footer-links a {
  color: #94A3B8;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  padding: var(--space-2) var(--space-4);
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.2s ease, background 0.2s ease;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--signal-green);
  color: var(--white);
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  padding: var(--space-2) 0;
}

.btn-secondary:hover {
  color: var(--white);
  text-decoration: underline;
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}

/* ==========================================================================
   SECTION HEADER
   ========================================================================== */

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  max-width: var(--content-narrow);
}

.section-header h2 {
  margin: 0;
}

.section-header p {
  margin: 0;
  opacity: 0.9;
}

/* ==========================================================================
   CHECKLIST
   ========================================================================== */

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  margin-block: var(--space-4);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 1.125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
}

.checklist li::before {
  content: "\2713";
  flex-shrink: 0;
  color: #4ADE80;
  font-weight: 700;
}

.emphasis {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.4;
  margin-block: var(--space-4);
  color: var(--white);
}

/* ==========================================================================
   COST CALCULATOR
   ========================================================================== */

.cost-calculator {
  padding: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
}

/* Stats row at top of calculator */
.calculator-stats-row {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 16px;
}

.calculator-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.calculator-stat .stat-label {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.calculator-stat .stat-value {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.calculator-stat--highlight .stat-value {
  color: var(--signal-green);
  font-size: 2.5rem;
}

.stat-value-with-unit {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.stat-value-with-unit .stat-unit {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
}

/* ==========================================================================
   SLIDER - Complete rewrite for proper alignment
   ========================================================================== */

.calculator-slider-container {
  margin-bottom: var(--space-3);
  padding: 0 var(--space-4);
}

/* Track container */
.slider-track-container {
  position: relative;
  overflow: visible; /* Allow thumb to extend beyond track */
}

/* The actual range input - 18px wider so thumb CENTER aligns with track edges */
.cost-slider {
  -webkit-appearance: none;
  appearance: none;
  width: calc(100% + 18px);
  margin-left: -9px;
  height: 4px;
  background: transparent; /* Hide default track */
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  display: block;
}

/* Visual track - aligns with markers below */
.slider-track-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}

.cost-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--signal-green);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.cost-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.cost-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--signal-green);
  border: none;
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Green fill overlay - matches visual track */
.slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  background: var(--signal-green);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}

/* Markers below track */
.slider-markers {
  position: relative;
  height: 48px;
  margin-top: 12px;
}

.marker {
  position: absolute;
  top: 0;
  left: var(--position);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease;
}

.marker:hover {
  transform: translateX(-50%) scale(1.05);
}

.marker:hover .marker-name,
.marker:focus .marker-name {
  color: rgba(255, 255, 255, 0.9);
}

.marker:hover .marker-tick,
.marker:focus .marker-tick {
  background: rgba(255, 255, 255, 0.4);
}

.marker:focus {
  outline: none;
}

.marker:focus-visible .marker-tick {
  background: var(--signal-green);
}

.marker-tick {
  width: 1px;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
}

.marker-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.marker-cost {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

/* Anchor markers - research vessel reference points */
.marker--anchor .marker-tick {
  height: 12px;
  background: rgba(255, 255, 255, 0.4);
}

.marker--anchor .marker-name {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.7rem;
}

.marker--anchor .marker-cost {
  color: rgba(255, 255, 255, 0.6);
}

/* Scout Display - Full width focused view */
.scout-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.scout-display-caption {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin: 0;
}

/* Scout Map */
.scout-map-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ocean-5);
  box-shadow: 0 0 0 1px rgba(31, 191, 117, 0.2);
}

.scout-map {
  width: 100%;
  height: 100%;
}

/* Layout Toggle - overlaid on map */

.layout-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(10, 20, 30, 0.7);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 10;
}

.layout-toggle-btn {
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.layout-toggle-btn:hover {
  color: rgba(255, 255, 255, 0.9);
}

.layout-toggle-btn.active {
  color: #fff;
  background: rgba(31, 191, 117, 0.3);
  box-shadow: 0 0 8px rgba(31, 191, 117, 0.2);
}

/* Mode toggle (Virtual Anchor / Waypoints) */
.mode-toggle {
  display: flex;
  gap: 2px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 2px;
}

.mode-toggle-btn {
  padding: 6px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.mode-toggle-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}

.mode-toggle-btn.active {
  color: #fff;
  background: rgba(31, 191, 117, 0.4);
}

.mode-divider {
  width: 1px;
  height: 20px;
  margin: 0 8px;
  background: rgba(255, 255, 255, 0.15);
  align-self: center;
}

.rotate-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

.layout-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Line/Grid controls now work in both modes */

/* Rotation buttons */
.rotate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rotate-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
}

.rotate-btn:active {
  color: #fff;
  background: rgba(31, 191, 117, 0.3);
}

.rotate-btn svg {
  display: block;
}

.rotation-divider {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.15);
  align-self: center;
}

.drag-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(10, 20, 30, 0.6);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  margin: 0;
  pointer-events: none;
  z-index: 10;
}

/* Calculator footnote */
.calculator-footnote {
  font-size: 0.75rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin-top: var(--space-3);
  max-width: none;
}

/* Mapbox overrides */
.mapboxgl-canvas {
  outline: none;
}

.mapboxgl-ctrl-logo,
.mapboxgl-ctrl-attrib {
  display: none !important;
}

/* Mobile adjustments for calculator */
@media (max-width: 768px) {
  .cost-calculator {
    padding: 24px 16px;
  }

  .calculator-stats-row {
    gap: var(--space-3);
  }

  .calculator-stat .stat-label {
    font-size: 0.65rem;
  }

  .calculator-stat .stat-value {
    font-size: 1.5rem;
  }

  .calculator-stat--highlight .stat-value {
    font-size: 2rem;
  }

  .stat-value-with-unit {
    font-size: 1.5rem;
  }

  .stat-value-with-unit .stat-unit {
    font-size: 1rem;
  }

  .calculator-slider-container {
    padding: 0 var(--space-2);
  }

  .slider-markers {
    height: 40px;
  }

  /* Hide non-anchor markers on mobile to reduce clutter */
  .marker:not(.marker--anchor) {
    display: none;
  }

  /* Hide middle anchor on mobile (too close to start) */
  .marker--hide-mobile {
    display: none;
  }

  .marker--anchor .marker-name {
    font-size: 0.65rem;
  }

  .scout-map-container {
    height: 300px;
  }

  .layout-toggle {
    top: 8px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 8px;
  }

  /* Mode toggle takes full width (first row) */
  .mode-toggle {
    width: 100%;
    justify-content: center;
    order: 0;
  }

  .mode-divider,
  .rotation-divider {
    display: none;
  }

  /* Rotate and layout controls on second row */
  .rotate-controls {
    order: 1;
  }

  .layout-controls {
    order: 2;
  }

  .mode-toggle-btn {
    padding: 5px 10px;
    font-size: 0.65rem;
  }

  .layout-toggle-btn {
    padding: 5px 10px;
    font-size: 0.65rem;
  }

  .rotate-btn {
    width: 26px;
    height: 26px;
  }

  .scout-display-caption {
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   BENEFIT CARDS
   ========================================================================== */

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.benefits-grid--compact {
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--space-5);
}

@media (max-width: 900px) {
  .benefits-grid--compact {
    grid-template-columns: 1fr;
  }
}

.benefit-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.benefit-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

.benefit-card h3 {
  margin: 0;
  color: var(--white);
}

.benefit-card .material-icons-outlined {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-1);
}

.benefit-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   SCOUT CONFIGURATOR
   ========================================================================== */

/* Tab buttons */
.config-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.config-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: var(--space-3) var(--space-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  color: var(--white);
  font-family: var(--font-body);
}

.config-tab:hover {
  background: rgba(255, 255, 255, 0.1);
}

.config-tab.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--signal-green);
}

.config-tab .tab-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
}

.config-tab .tab-desc {
  font-size: 0.75rem;
  opacity: 0.6;
}

/* Tab panels */
.config-panels {
  position: relative;
}

.config-panel {
  display: none;
}

.config-panel.active {
  display: block;
}

.panel-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

/* Panel media wrapper with CTA */
.panel-media-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.panel-media-wrapper .panel-media {
  width: 100%;
}

.panel-cta {
  font-size: 0.875rem;
  opacity: 0.8;
}

.panel-cta:hover {
  opacity: 1;
}

/* Panel media (video/placeholder) */
.panel-media {
  position: relative;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  aspect-ratio: 16 / 9;
}

.panel-media video,
.panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.panel-media--dashboard {
  background: transparent;
}

.panel-media--dashboard img {
  object-fit: contain;
}

.media-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  font-size: 0.75rem;
  opacity: 0.8;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.panel-media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
}

.placeholder-icon {
  opacity: 0.3;
}

.placeholder-icon svg {
  stroke: var(--white);
}

/* Panel media combo - side by side images */
.panel-media-combo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: linear-gradient(135deg, rgba(30, 88, 140, 0.3) 0%, rgba(6, 37, 80, 0.5) 100%);
  padding: var(--space-3);
}

.combo-image {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.combo-image img {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 12px;
}

.combo-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
}

.combo-connector {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--signal-green);
  flex-shrink: 0;
  padding: 0 var(--space-1);
}

/* Panel info */
.panel-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.panel-info h3 {
  margin: 0;
  font-size: 1.5rem;
}

.panel-subtitle {
  color: #64B5F6;
  font-weight: 500;
  margin: 0;
  opacity: 1;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: 1.5;
}

.feature-list .feature-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--signal-green);
}

.feature-link {
  color: var(--electric-blue);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

.feature-link:hover {
  color: var(--signal-green);
  text-decoration: underline;
}

.panel-info .best-for {
  font-size: 0.875rem;
  opacity: 0.6;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-info .btn {
  align-self: flex-start;
  margin-top: var(--space-2);
}

/* Panel header with inline partner logo */
.panel-header-with-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.panel-header-with-logo h3 {
  margin: 0;
}

.header-partner-logo img {
  height: 36px;
  width: auto;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.header-partner-logo:hover img {
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .config-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .config-tab {
    flex: none;
    padding: 10px 12px;
    gap: 2px;
  }

  .config-tab .tab-name {
    font-size: 0.95rem;
  }

  .config-tab .tab-desc {
    font-size: 0.65rem;
  }

  .panel-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .panel-media-wrapper {
    display: contents;
  }

  .panel-media {
    order: -1;
  }

  .panel-info {
    order: 0;
  }

  .panel-cta {
    order: 1;
    align-self: flex-start;
  }
}

/* ==========================================================================
   SOCIAL PROOF
   ========================================================================== */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  margin-block: var(--space-4);
  color: rgba(255, 255, 255, 0.5);
}

.quote-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: rgba(255, 255, 255, 0.08);
  padding: var(--space-4);
  border-radius: 8px;
  margin-block: var(--space-4);
  border-left: 4px solid #64B5F6;
}

.quote-block blockquote {
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--white);
}

.quote-block cite {
  font-size: 0.875rem;
  font-style: normal;
  color: rgba(255, 255, 255, 0.7);
}

/* Stats */
.stats-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  padding-top: 32px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  flex: 1;
  min-width: 120px;
}

.stat-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--white);
  line-height: 1;
}

.stat-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 12ch;
}

/* Partner Logos */
.partner-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
}

.partner-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.partner-logos-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 48px;
  max-width: 700px;
}

.partner-logos-row img {
  height: 36px;
  width: auto;
  justify-self: center;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

/* Logos with solid backgrounds - grayscale instead */
.partner-logos-row img.no-filter {
  filter: grayscale(1);
  opacity: 0.85;
}

/* Square/vertical logos need more height for equal visual weight */
.partner-logos-row img.square-logo {
  height: 52px;
}

.partner-logos-row img:hover {
  opacity: 1;
}

/* Center the bottom row (3 logos) */
.partner-logos-row img:nth-child(5) {
  grid-column: 2;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-list {
  display: flex;
  flex-direction: column;
  max-width: var(--content-narrow);
}

.faq-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.faq-item:first-child {
  padding-top: var(--space-4);
}

.faq-item h3 {
  margin: 0;
  color: var(--white);
}

.faq-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */

.final-cta {
  text-align: center;
}

.final-cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.final-cta h2 {
  margin: 0;
}

.final-cta p {
  margin: 0;
  text-align: center;
}

.final-cta .btn {
  margin-top: var(--space-2);
  position: relative;
  z-index: 10;
}

.microcopy {
  font-size: 0.875rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer-logo {
  display: flex;
  align-items: center;
}

.footer-logo img {
  height: 50px;
  width: auto;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 0.875rem;
}

.footer-links a {
  text-decoration: none;
  transition: opacity 150ms ease;
}

.footer-links a:hover {
  opacity: 1;
}

/* ==========================================================================
   BUBBLES
   ========================================================================== */

/* Underwater wrapper - contains bubbles */
.underwater {
  position: relative;
}

.bubbles {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh; /* Don't take up space in document flow */
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

/* ==========================================================================
   WIND STREAKS (Above water - Sky)
   ========================================================================== */

.wind-streaks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.wind-streak {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  opacity: 0;
  animation: wind-blow 8s infinite ease-in-out;
  will-change: transform, opacity;
}

.wind-streak:nth-child(1) { top: 15%; width: 80px; left: -100px; animation-delay: 0s; animation-duration: 6s; }
.wind-streak:nth-child(2) { top: 25%; width: 120px; left: -150px; animation-delay: -2s; animation-duration: 8s; }
.wind-streak:nth-child(3) { top: 40%; width: 60px; left: -80px; animation-delay: -4s; animation-duration: 7s; }
.wind-streak:nth-child(4) { top: 55%; width: 100px; left: -120px; animation-delay: -1s; animation-duration: 9s; }
.wind-streak:nth-child(5) { top: 70%; width: 70px; left: -90px; animation-delay: -3s; animation-duration: 6.5s; }
.wind-streak:nth-child(6) { top: 35%; width: 90px; left: -110px; animation-delay: -5s; animation-duration: 7.5s; }

@keyframes wind-blow {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(calc(100vw + 200px));
    opacity: 0;
  }
}

.bubble {
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.4));
  border-radius: 50%;
  opacity: 0;
  animation: bubble-rise 12s infinite ease-out;
  will-change: transform, opacity;
}

.bubble:nth-child(1)  { left: 5%;  animation-delay: 0s; animation-duration: 11s; width: 6px; height: 6px; }
.bubble:nth-child(2)  { left: 15%; animation-delay: -2s; animation-duration: 13s; width: 10px; height: 10px; }
.bubble:nth-child(3)  { left: 25%; animation-delay: -4s; animation-duration: 10s; width: 5px; height: 5px; }
.bubble:nth-child(4)  { left: 35%; animation-delay: -1s; animation-duration: 14s; width: 8px; height: 8px; }
.bubble:nth-child(5)  { left: 45%; animation-delay: -6s; animation-duration: 12s; width: 12px; height: 12px; }
.bubble:nth-child(6)  { left: 55%; animation-delay: -3s; animation-duration: 11s; width: 6px; height: 6px; }
.bubble:nth-child(7)  { left: 65%; animation-delay: -5s; animation-duration: 15s; width: 9px; height: 9px; }
.bubble:nth-child(8)  { left: 75%; animation-delay: -7s; animation-duration: 10s; width: 7px; height: 7px; }
.bubble:nth-child(9)  { left: 85%; animation-delay: -2.5s; animation-duration: 13s; width: 11px; height: 11px; }
.bubble:nth-child(10) { left: 92%; animation-delay: -4.5s; animation-duration: 12s; width: 5px; height: 5px; }
.bubble:nth-child(11) { left: 10%; animation-delay: -8s; animation-duration: 14s; width: 8px; height: 8px; }
.bubble:nth-child(12) { left: 50%; animation-delay: -9s; animation-duration: 11s; width: 6px; height: 6px; }

@keyframes bubble-rise {
  0% {
    transform: translateY(0) translateX(0) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
    transform: translateY(-10vh) translateX(5px) scale(0.7);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-50vh) translateX(-8px) scale(0.9);
  }
  80% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-105vh) translateX(3px) scale(1);
    opacity: 0;
  }
}

/* ==========================================================================
   SEABED TRANSITION
   ========================================================================== */

.seabed-transition {
  position: relative;
  height: 80px;
  background: #021029;
  margin-top: -1px;
  z-index: 6; /* Above bubbles (5), below header (100) */
}

.seabed-transition svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.seabed-transition path {
  fill: var(--seabed);
}

/* Enhanced seabed styling */
.seabed {
  background: var(--seabed);
  color: #CBD5E1;
  position: relative;
  z-index: 6; /* Above bubbles (5), below header (100) */
}

/* ==========================================================================
   COST HERO - The barrier to ocean access
   ========================================================================== */

.cost-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}

.cost-hero--centered .cost-hero-content {
  max-width: 600px;
}

.cost-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cost-hero-headline {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.cost-hero-subhead {
  font-size: clamp(1rem, 2vw, 1.25rem);
  opacity: 0.8;
  margin-bottom: var(--space-5);
}

.cost-hero-punchline {
  margin-bottom: var(--space-4);
}

.cost-hero-card {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cost-hero-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
  margin-bottom: var(--space-2);
}

.cost-hero-number {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.cost-hero-number .currency {
  font-size: clamp(2rem, 4vw, 3rem);
  opacity: 0.8;
}

.cost-hero-number .amount {
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  letter-spacing: -0.03em;
}

.cost-hero-number .plus {
  font-size: clamp(2rem, 4vw, 3rem);
  opacity: 0.8;
  margin-left: 0.1em;
}

.cost-hero-period {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-family: var(--font-heading);
  font-weight: 600;
  opacity: 0.7;
  margin-top: var(--space-1);
  margin-bottom: 0;
}

/* Vessel with strikethrough */
.cost-hero-vessel {
  position: relative;
  width: 200px;
  margin: 0 auto var(--space-3);
}

.cost-hero-vessel img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  filter: grayscale(30%);
  opacity: 0.8;
}

.vessel-strikethrough {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.vessel-strikethrough line {
  stroke: #ef4444;
  stroke-width: 4;
  stroke-linecap: round;
}

.cost-breakdown {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
}

.cost-breakdown li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.95rem;
  opacity: 0.8;
}

.cost-breakdown .material-icons-outlined {
  font-size: 1.25rem;
  opacity: 0.6;
  width: 1.5rem;
  text-align: center;
}

/* Consequence label between cost hero and problem cards */
.consequence-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.5;
  margin-bottom: var(--space-2);
  margin-top: var(--space-5);
}


/* ==========================================================================
   MEET SCOUT SECTION
   ========================================================================== */

.section-header--centered {
  text-align: center;
  align-items: center;
  max-width: 100%;
}

.section-header--centered p {
  max-width: 100%;
}

/* Scout hero image */
.scout-hero {
  display: block;
  width: fit-content;
  max-width: 600px;
  margin: 0 auto 48px auto;
}

.scout-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* Scout stats bar */
.scout-stats {
  display: flex;
  justify-content: center;
  gap: 64px;
  margin-bottom: 40px;
}

.scout-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.scout-stat-value {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.scout-stat-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: lowercase;
}

/* Scout features - compact pills */
.scout-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}

.scout-feature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
}

.scout-feature .material-icons-outlined {
  font-size: 1.125rem;
  color: var(--signal-green);
}

/* Scout versatility line */
.scout-versatility {
  font-size: 0.95rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
  margin-bottom: var(--space-3);
  max-width: none;
}

/* Scout tagline */
.scout-tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
  color: var(--signal-green);
  text-align: center;
  max-width: 100%;
  opacity: 1;
}

@media (max-width: 768px) {
  .scout-hero {
    margin-bottom: 32px;
  }

  .scout-hero img {
    max-width: 100%;
  }

  .scout-stats {
    gap: 32px;
    margin-bottom: 32px;
  }

  .scout-stat-value {
    font-size: 1.5rem;
  }

  .scout-features {
    gap: 8px;
    margin-bottom: 32px;
  }

  .scout-feature {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   HOW IT WORKS SECTION
   ========================================================================== */

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.process-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  text-align: center;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-2);
  background: var(--signal-green);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--white);
}

.process-step h3 {
  font-size: 1.125rem;
  margin: 0;
}

.process-step p {
  font-size: 0.9rem;
  margin: 0;
  opacity: 0.8;
}

@media (max-width: 900px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .process-steps {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ocean-surface,
  .bubbles,
  .wind-streaks {
    display: none;
  }

  .hero {
    padding-bottom: var(--space-7);
  }

  .benefit-card,
  .model-card,
  .btn-primary {
    transition: none;
  }

  .bubble,
  .wind-streak {
    animation: none;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .site-header {
    padding: var(--space-1) 0;
  }

  .header-logo img {
    height: 32px;
  }

  .header-nav {
    gap: var(--space-2);
  }

  .header-nav a:not(.btn) {
    display: none;
  }

  .ocean-surface {
    height: 100px;
    margin-top: -100px;
  }

  #waves {
    height: 100px;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--space-6) + 50px);
  }

  .cta-group {
    flex-direction: column;
    align-items: center;
  }

  .cta-group .btn {
    width: auto;
    text-align: center;
  }

  .benefits-grid,
  .models-grid {
    grid-template-columns: 1fr;
  }

  .stats-bar {
    justify-content: space-around;
  }

  .stat {
    flex: 0 0 calc(50% - var(--space-2));
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }

  .footer-links {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ==========================================================================
   CAPABILITIES SECTION - "What Scouts Can Do"
   ========================================================================== */

/* Section allows bubbles to show through, content sits above */
.capabilities-section {
  position: relative;
}

/* Section header with rotating icon */
.capabilities-header {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  z-index: 6;
}

.capabilities-header p {
  margin: 0;
  opacity: 0.8;
  max-width: var(--content-narrow);
}

.capabilities-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  animation: gentle-rotate 20s linear infinite;
}

@keyframes gentle-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.capabilities-header h2 {
  margin: 0;
}

/* Capability tabs - extending config-tabs pattern */
.capability-tabs {
  position: relative;
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  z-index: 6;
}

.capability-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: var(--space-3) var(--space-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  color: var(--white);
  font-family: var(--font-body);
}

.capability-tab:hover {
  background: rgba(255, 255, 255, 0.1);
}

.capability-tab.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--signal-green);
}

.capability-tab .tab-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
}

.capability-tab .tab-desc {
  font-size: 0.75rem;
  opacity: 0.6;
}

/* Capability panels */
.capability-panels {
  position: relative;
}

.capability-panel {
  display: none;
}

.capability-panel.active {
  display: block;
}

/* Animation viewport */
.animation-viewport {
  position: relative;
  width: 100%;
  height: 500px;
  background: radial-gradient(ellipse at center, #1E5B8C 0%, #0D3A5E 40%, #062550 80%, #041a3d 100%);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 6; /* Above bubbles (z-index: 5) */
}

.placeholder-viewport {
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.4);
}

.placeholder-content .material-icons-outlined {
  font-size: 3rem;
  opacity: 0.5;
}

.placeholder-content p {
  margin: 0;
  opacity: 1;
}

/* Relay Diagram */
.relay-viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.relay-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: var(--space-4);
}

.relay-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  z-index: 2;
}

.relay-node .material-icons-outlined {
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.8);
}

.relay-node img {
  width: 48px;
  height: auto;
}

.relay-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
}

.relay-connection {
  width: 2px;
  height: 60px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
  position: relative;
}

.relay-connection--acoustic {
  background: linear-gradient(180deg, rgba(53, 118, 255, 0.6) 0%, rgba(53, 118, 255, 0.2) 100%);
}

.relay-connection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: relay-pulse 2s ease-in-out infinite;
}

@keyframes relay-pulse {
  0%, 100% { top: 0; opacity: 1; }
  50% { top: 100%; opacity: 0.3; }
}

.relay-connection--acoustic::before {
  background: var(--electric-blue);
  animation-delay: 1s;
}

.relay-info {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  max-width: 400px;
}

.relay-info p {
  font-size: 0.875rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
}

/* Weather overlay - Windy.com style colored bands */
.weather-overlay {
  --storm-x: 80%;
  --storm-y: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

/* Storm band - colored gradient sweeping across (animated by GSAP for sync) */
.weather-overlay::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 400%;
  height: 400%;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 18%,
    rgba(34, 197, 94, 0.12) 21%,    /* green - light breeze */
    rgba(34, 197, 94, 0.18) 24%,
    rgba(250, 204, 21, 0.22) 28%,   /* yellow - moderate */
    rgba(251, 146, 60, 0.28) 32%,   /* orange - fresh gale */
    rgba(239, 68, 68, 0.35) 36%,    /* red - strong gale */
    rgba(192, 38, 211, 0.42) 40%,   /* magenta - storm */
    rgba(147, 51, 234, 0.45) 44%,   /* purple - violent storm core */
    rgba(192, 38, 211, 0.42) 48%,   /* magenta */
    rgba(239, 68, 68, 0.35) 52%,    /* red */
    rgba(251, 146, 60, 0.28) 56%,   /* orange */
    rgba(250, 204, 21, 0.2) 60%,    /* yellow */
    rgba(34, 197, 94, 0.1) 64%,     /* green - trailing edge */
    transparent 68%,
    transparent 100%
  );
  filter: blur(30px);
  transform: translate(var(--storm-x), var(--storm-y));
}

/* Persistence counter - top left (prominent) */
.persistence-counter {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.3);
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.counter-label {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}

.counter-value {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--signal-green);
  line-height: 1;
}

/* Live feed inset - picture-in-picture style */
.live-feed-inset {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 260px;
  z-index: 15;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.live-feed-inset video {
  width: 100%;
  height: auto;
  display: block;
}

.live-feed-inset--small {
  width: 180px;
}

.live-feed-label {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
  background: #e53935;
  padding: 2px 6px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.live-feed-label::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--white);
  border-radius: 50%;
  animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Station radius SVG - centered via GSAP for animation compatibility */
.station-radius {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 520px;
  pointer-events: none;
  z-index: 5;
  /* transform handled by GSAP for drift animation */
}

.radius-circle {
  fill: none;
  stroke: rgba(31, 191, 117, 0.4);
  stroke-width: 2;
  stroke-dasharray: 8, 6;
}

.radius-pulse {
  fill: none;
  stroke: rgba(31, 191, 117, 0.3);
  stroke-width: 2;
}

.radius-label {
  fill: rgba(31, 191, 117, 0.8);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
}

@keyframes radius-pulse {
  0% {
    r: 120;
    opacity: 0.4;
  }
  100% {
    r: 150;
    opacity: 0;
  }
}

/* Waypoint marker - station keeping target point */
.waypoint-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: rgba(31, 191, 117, 0.6);
  border: 1px solid rgba(31, 191, 117, 0.9);
  border-radius: 50%;
  z-index: 4;
}

/* Current particles canvas - shows ocean current flow */
.current-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.4;
}

/* Scout marker - centered, animation controlled by JS */
.scout-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 15;
  /* transform handled by GSAP for drift-return behavior */
}

.scout-marker img {
  width: 16px;
  height: auto;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
  transform: rotate(180deg) translateY(-15%);
  /* No CSS animation - GSAP handles drift-return with rotation */
}

/* Vessel marker */
.vessel-marker {
  position: absolute;
  z-index: 12;
  pointer-events: none;
}

.vessel-marker img {
  width: 144px;
  height: auto;
  color: rgba(255, 180, 80, 0.95);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* Alert pulse - positioned dynamically at vessel location */
.alert-pulse {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 180, 0, 0.6);
  border: 3px solid rgba(255, 220, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 14;
  transform: translate(-50%, -50%);
}

.alert-pulse.active {
  animation: alert-expand 1s ease-out;
}

@keyframes alert-expand {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.3);
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4);
  }
}

/* Detection card - glassmorphism */
.detection-card {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 180px;
  background: rgba(10, 30, 60, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 10px;
  padding: var(--space-3);
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.detection-card.visible {
  opacity: 1;
  visibility: visible;
}

.detection-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detection-icon {
  width: 8px;
  height: 8px;
  background: #FFC107;
  border-radius: 50%;
  animation: detection-blink 1s ease-in-out infinite;
}

@keyframes detection-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.detection-title {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: #FFC107;
}

.detection-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.detection-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detection-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detection-value {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--white);
}

/* Sensor readout panel - bottom */
.sensor-readout {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 10;
}

.sensor-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding-right: var(--space-3);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.sensor-header-icon {
  width: 6px;
  height: 6px;
  background: var(--signal-green);
  border-radius: 50%;
  animation: sensor-blink 2s ease-in-out infinite;
}

@keyframes sensor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.sensor-header-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.3;
  text-align: center;
}

.sensor-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  white-space: nowrap;
}

.sensor-label {
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}

.sensor-value {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
}

/* Sensor readout vertical - left side stack */
.sensor-readout-vertical {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  z-index: 10;
}

.sensor-readout-vertical .sensor-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding-right: 0;
  border-right: none;
}

.sensor-readout-vertical .sensor-header-icon {
  width: 6px;
  height: 6px;
  background: var(--signal-green);
  border-radius: 50%;
  animation: sensor-blink 2s ease-in-out infinite;
}

.sensor-readout-vertical .sensor-header-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
}

.sensor-readout-vertical .sensor-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.sensor-readout-vertical .material-icons-outlined {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.5);
  width: 20px;
  text-align: center;
}

.sensor-readout-vertical .sensor-value {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--white);
  min-width: 60px;
}

/* ==========================================================================
   CAPABILITIES - RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .capabilities-header {
    flex-direction: column;
    text-align: center;
    gap: var(--space-2);
  }

  .capabilities-icon {
    width: 48px;
    height: 48px;
  }

  .capability-tabs {
    flex-direction: column;
    gap: 8px;
  }

  .capability-tab {
    flex: none;
    width: 100%;
    padding: 12px 16px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .capability-tab .tab-desc {
    display: none;
  }

  .animation-viewport {
    height: 400px;
  }

  .persistence-counter {
    left: 12px;
    top: 12px;
    padding: 6px 10px;
    max-width: 90px;
  }

  .counter-label {
    font-size: 0.5rem;
    line-height: 1.2;
  }

  .counter-value {
    font-size: 1.1rem;
  }

  .live-feed-inset {
    width: 120px;
    top: 12px;
    right: 12px;
  }

  .live-feed-label {
    font-size: 0.45rem;
    padding: 2px 4px;
  }

  .station-radius {
    visibility: hidden;
  }

  .scout-marker img {
    width: 14px;
  }

  .vessel-marker img {
    width: 120px;
  }

  .detection-card {
    bottom: 12px;
    right: 12px;
    width: 130px;
    padding: 8px;
  }

  .detection-title {
    font-size: 0.7rem;
  }

  .detection-label,
  .detection-value {
    font-size: 0.6rem;
  }

  .sensor-readout {
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
  }

  .sensor-label {
    font-size: 0.55rem;
  }

  .sensor-value {
    font-size: 0.75rem;
  }

  .sensor-readout-vertical {
    left: 12px;
    bottom: 12px;
    top: auto;
    transform: none;
    padding: 6px 8px;
    gap: 4px;
  }

  .sensor-readout-vertical .sensor-header {
    gap: 4px;
    margin-bottom: 2px;
  }

  .sensor-readout-vertical .sensor-header-label {
    font-size: 0.5rem;
  }

  .sensor-readout-vertical .sensor-item {
    gap: 4px;
  }

  .sensor-readout-vertical .material-icons-outlined {
    font-size: 0.75rem;
    width: 14px;
  }

  .sensor-readout-vertical .sensor-value {
    font-size: 0.65rem;
    min-width: 40px;
  }
}

/* ==========================================================================
   CAPABILITIES - REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .capabilities-icon {
    animation: none;
  }

  .radius-pulse {
    animation: none;
    opacity: 0;
  }

  .weather-overlay {
    animation: none;
  }

  .detection-icon {
    animation: none;
  }

}

/* ==========================================================================
   TRANSIT ANIMATION
   ========================================================================== */

/* Mission status - matches persistence-counter style */
.mission-status {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 10;
  background: rgba(0, 0, 0, 0.3);
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-label {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}

.status-value {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--signal-green);
  line-height: 1;
}

.status-mode {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: rgba(31, 191, 117, 0.2);
  border-radius: 4px;
  color: var(--signal-green);
  text-align: center;
}

.status-mode.loitering {
  background: rgba(251, 191, 36, 0.2);
  color: #FFC107;
}

/* Transit route SVG */
.transit-route {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 80%;
  z-index: 3;
}

.route-path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 2;
  stroke-dasharray: 8, 6;
}

/* Marine Protected Area */
.mpa-zone {
  fill: rgba(34, 197, 94, 0.08);
  stroke: rgba(34, 197, 94, 0.3);
  stroke-width: 1;
  stroke-dasharray: 4, 3;
}

.mpa-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  fill: rgba(34, 197, 94, 0.4);
  text-anchor: middle;
}

/* Research buoy */
.research-buoy {
  fill: rgba(251, 191, 36, 0.5);
  stroke: rgba(251, 191, 36, 0.8);
  stroke-width: 1;
}

.buoy-label {
  font-family: var(--font-body);
  font-size: 9px;
  fill: rgba(251, 191, 36, 0.5);
  text-anchor: middle;
}

/* Transit passing vessel */
.transit-vessel {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
}

.transit-vessel img {
  width: 24px;
  height: auto;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

/* Waypoint circles - transit style */
.transit-route .waypoint {
  fill: rgba(255, 255, 255, 0.3);
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.5;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

.transit-route .waypoint-loiter {
  fill: rgba(31, 191, 117, 0.3);
  stroke: var(--signal-green);
}

.transit-route .loiter-radius {
  fill: none;
  stroke: var(--signal-green);
  stroke-width: 1;
  stroke-dasharray: 4, 3;
  opacity: 0.4;
}

.transit-route .waypoint.active {
  fill: var(--signal-green);
  stroke: var(--white);
}

.transit-route .waypoint.visited {
  fill: rgba(31, 191, 117, 0.5);
  stroke: var(--signal-green);
}

/* Waypoint labels */
.wp-label {
  font-family: var(--font-body);
  font-size: 12px;
  fill: rgba(255, 255, 255, 0.5);
  text-anchor: middle;
}

/* Transit scout marker - override scout-marker base positioning */
.transit-scout {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15;
  /* All positioning handled by GSAP */
}

.transit-scout img {
  width: 16px;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  transform-origin: center center;
}

/* Transit stats - matches sensor-readout style */
.transit-stats {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  gap: var(--space-4);
  background: rgba(0, 0, 0, 0.3);
  padding: var(--space-2) var(--space-4);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 10;
}

.transit-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  white-space: nowrap;
}

.transit-stat-label {
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}

.transit-stat-value {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
}

/* ==========================================================================
   TRANSIT ANIMATION - RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .mission-status {
    left: 15px;
    top: 15px;
    padding: var(--space-1) var(--space-2);
  }

  .status-value {
    font-size: 1.5rem;
  }

  .status-mode {
    font-size: 0.65rem;
  }

  .transit-stats {
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
  }

  .transit-stat-label {
    font-size: 0.55rem;
  }

  .transit-stat-value {
    font-size: 0.75rem;
  }

  .transit-scout img {
    width: 14px;
  }

  .wp-label {
    font-size: 10px;
  }
}

/* ==========================================================================
   TRANSIT ANIMATION - REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .transit-scout {
    transition: none;
  }

  .transit-route .waypoint {
    transition: none;
  }
}

/* ==========================================================================
   SENSOR PARTNERS CAROUSEL
   ========================================================================== */

.sensor-partners {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  text-align: center;
}

.sensor-partners-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.5;
  margin-bottom: var(--space-3);
}

.partner-carousel {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.carousel-track {
  display: flex;
  gap: var(--space-6);
  animation: scroll 30s linear infinite;
  width: max-content;
}

.carousel-slide {
  flex-shrink: 0;
  width: 160px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-slide img {
  max-width: 100%;
  max-height: 100%;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.carousel-slide img:hover {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* Logos with solid backgrounds - grayscale instead */
.carousel-slide img.no-filter {
  filter: grayscale(1);
  opacity: 0.85;
}

.carousel-slide img.no-filter:hover {
  filter: grayscale(0);
  opacity: 1;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   CAROUSEL - REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    animation: none;
  }
}

/* ==========================================================================
   RELAY ANIMATION - Side-view Ocean Cross-Section
   ========================================================================== */

/* Main relay scene container - applied to .animation-viewport */
.animation-viewport.relay-scene {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    #4a90c2 0%,
    #3a80b2 10%,
    #2e6a9e 12%,
    #1E88E5 15%,
    #1565C0 35%,
    #0D47A1 55%,
    #0A3475 75%,
    #062550 90%,
    #041a3d 100%
  );
}

/* Sky layer */
.relay-sky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg,
    #87CEEB 0%,
    #5BA3D9 60%,
    #3a80b2 100%
  );
  z-index: 5;
}

/* Satellite */
.relay-scene .relay-satellite {
  position: absolute;
  top: 8px;
  right: 60px;
  z-index: 10;
}

.relay-scene .relay-satellite img {
  width: 48px;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* RF beam container */
.relay-rf-beam {
  position: absolute;
  top: 35px;
  right: 70px;
  width: 40px;
  height: 80px;
  z-index: 8;
  pointer-events: none;
}

/* Surface layer with waves */
.relay-surface {
  position: absolute;
  top: 90px;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 15;
  pointer-events: none;
}

/* Canvas for wave animation */
.relay-waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
}

/* Scout USV on surface */
.relay-scene .relay-scout {
  position: absolute;
  top: 0px;
  left: 45%;
  transform: translateX(-50%);
  z-index: 20;
}

.relay-scene .relay-scout img {
  width: 80px;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* Water column */
.relay-water {
  position: absolute;
  top: 145px;
  left: 0;
  right: 0;
  bottom: 60px;
  z-index: 10;
}

/* Depth markers */
.relay-depth-markers {
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  z-index: 25;
}

.depth-marker {
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  backdrop-filter: blur(2px);
}

/* Acoustic beam SVG */
.relay-acoustic-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 12;
}

/* Glider vehicle */
.relay-glider {
  position: absolute;
  left: 30%;
  top: 30%;
  z-index: 18;
  opacity: 1;
}

.relay-glider img {
  width: 140px;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* Lander on seafloor */
.relay-lander {
  position: absolute;
  right: 25%;
  bottom: -57px;
  z-index: 16;
}

.relay-lander img {
  width: 80px;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

/* Seafloor */
.relay-seafloor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 14;
}

/* Seaweed */
.relay-seaweed {
  position: absolute;
  bottom: 5px;
  z-index: 15;
  pointer-events: none;
}

.relay-seaweed svg {
  height: 40px;
  width: auto;
}

.relay-seaweed--1 {
  left: 10%;
}

.relay-seaweed--2 {
  left: 45%;
}

.relay-seaweed--3 {
  right: 15%;
}

.relay-seaweed--4 {
  right: 35%;
}

@keyframes seaweed-sway {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

.relay-seaweed svg {
  animation: seaweed-sway 4s ease-in-out infinite;
  transform-origin: bottom center;
}

.relay-seaweed--2 svg {
  animation-delay: -1s;
  animation-duration: 3.5s;
}

.relay-seaweed--3 svg {
  animation-delay: -2s;
  animation-duration: 4.5s;
}

.relay-seaweed--4 svg {
  animation-delay: -0.5s;
  animation-duration: 3s;
}

.relay-seafloor svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Info overlay */
.relay-info-overlay {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(0, 20, 40, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  z-index: 30;
  min-width: 320px;
}

.info-scenario {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--signal-green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-stats {
  display: flex;
  gap: 16px;
}

.info-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.info-stat-label {
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}

.info-stat-value {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
}

.info-stat--highlight .info-stat-value {
  color: var(--signal-green);
  font-size: 0.95rem;
}

/* Acoustic ring animation (created by JS) */
.acoustic-ring {
  position: absolute;
  border: 2px solid rgba(53, 118, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 13;
}

/* RF packet animation (created by JS) */
.rf-packet {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Data packet (created by JS) */
.data-packet {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(53, 118, 255, 0.8);
  border-radius: 50%;
  pointer-events: none;
  z-index: 14;
  box-shadow: 0 0 6px rgba(53, 118, 255, 0.5);
}

/* ==========================================================================
   RELAY ANIMATION - DATA BEAMS (Moving Dots Style)
   ========================================================================== */

/* Container for beam elements */
.relay-beams-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 16;
  overflow: visible;
}

/* Static path line (thin connection line) */
.beam-path {
  stroke-linecap: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.beam-path.acoustic {
  stroke: rgba(59, 130, 246, 0.25);
  stroke-width: 1;
}

.beam-path.rf {
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1;
}

/* Data dots (packets) */
.data-dot {
  fill: #3B82F6;
  filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.6));
}

.data-dot.acoustic-up {
  fill: #3B82F6;
  filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.6));
}

.data-dot.acoustic-down {
  fill: #06B6D4;
  filter: drop-shadow(0 0 3px rgba(6, 182, 212, 0.5));
}

.data-dot.rf-up {
  fill: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
}

.data-dot.rf-down {
  fill: rgba(180, 200, 255, 0.8);
  filter: drop-shadow(0 0 3px rgba(180, 200, 255, 0.5));
}

/* Beam visibility states */
.beam-group.hidden {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.beam-group.visible {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* ==========================================================================
   RELAY ANIMATION - COMMAND CARD (Re-task notification)
   ========================================================================== */

.relay-command-card {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 160px;
  z-index: 30;
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.relay-command-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.command-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}

.command-icon::before {
  content: '↓';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: rgba(251, 191, 36, 0.2);
  border-radius: 50%;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  color: #FBBF24;
}

.command-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: #FBBF24;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.command-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.command-type {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.command-detail {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
}

.command-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FBBF24;
  animation: status-pulse 1s ease-in-out infinite;
}

.command-status.acknowledged .status-dot {
  background: #10B981;
  animation: none;
}

.status-text {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* AUV acknowledgment pulse effect */
.relay-ack-pulse {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid #10B981;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 25;
  transform: translate(-50%, -50%) scale(0.5);
}

.relay-ack-pulse.active {
  animation: ack-ripple 0.8s ease-out forwards;
}

@keyframes ack-ripple {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }
}

/* Downlink emphasis (highlight when command is being sent) */
.beam-group.command-active .data-dot.acoustic-down,
.beam-group.command-active .data-dot.rf-down {
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.9));
}

.beam-group.command-active .beam-path {
  stroke: rgba(251, 191, 36, 0.4);
}

/* ==========================================================================
   RELAY ANIMATION - RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .relay-command-card {
    min-width: 140px;
    padding: 8px 10px;
  }

  .command-type {
    font-size: 0.75rem;
  }

  .relay-scene .relay-satellite {
    right: 30px;
    top: 5px;
  }

  .relay-scene .relay-satellite img {
    width: 36px;
  }

  .relay-rf-beam {
    right: 40px;
    width: 30px;
  }

  .relay-scene .relay-scout img {
    width: 60px;
  }

  .relay-glider img {
    width: 100px;
  }

  .relay-lander img {
    width: 60px;
  }

  .relay-lander {
    bottom: -45px;
  }

  .relay-seaweed svg {
    height: 30px;
  }

  .relay-depth-markers {
    left: 8px;
  }

  .depth-marker {
    font-size: 0.55rem;
    padding: 1px 4px;
  }

  .relay-info-overlay {
    min-width: 280px;
    padding: 10px 14px;
    bottom: 65px;
  }

  .info-scenario {
    font-size: 0.75rem;
  }

  .info-stats {
    gap: 10px;
  }

  .info-stat-label {
    font-size: 0.5rem;
  }

  .info-stat-value {
    font-size: 0.75rem;
  }

  .info-stat--highlight .info-stat-value {
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   RELAY ANIMATION - REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .relay-glider,
  .relay-scene .relay-scout,
  .relay-scene .relay-satellite {
    transition: none;
  }

  .acoustic-ring,
  .rf-packet,
  .data-packet,
  .data-beam,
  .data-beam-glow {
    display: none;
  }

  /* Static fallback layout */
  .relay-glider {
    opacity: 0.7;
    left: 30%;
    top: 35%;
  }
}

/* ==========================================================================
   PITCH DECK STYLING ENHANCEMENTS
   ========================================================================== */

/* ==========================================================================
   PHASE 1: Section Labels
   ========================================================================== */

.section-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--electric-blue);
  margin-bottom: var(--space-2);
}

/* ==========================================================================
   PHASE 1: Stats in Electric Blue
   ========================================================================== */

.scout-stat-value,
.stat-value {
  color: var(--electric-blue);
}

/* Keep calculator highlight green */
.calculator-stat--highlight .stat-value {
  color: var(--signal-green);
}

/* ==========================================================================
   PHASE 2: Dot-Prefix for Tabs
   ========================================================================== */

.capability-tab .tab-name::before,
.config-tab .tab-name::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--electric-blue);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* ==========================================================================
   PHASE 2: Enhanced Card Hover States
   ========================================================================== */

.benefit-card:hover {
  background: rgba(53, 118, 255, 0.08);
  border-color: rgba(53, 118, 255, 0.2);
}

.config-tab:hover,
.capability-tab:hover {
  background: rgba(53, 118, 255, 0.06);
}

.config-tab.active,
.capability-tab.active {
  border-color: var(--electric-blue);
}

/* ==========================================================================
   PHASE 3: Corner Bracket Frames
   ========================================================================== */

.bracket-frame {
  position: relative;
}

.bracket-frame::before,
.bracket-frame::after {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  border: 3px solid var(--electric-blue);
  pointer-events: none;
  z-index: 2;
}

.bracket-frame::before {
  top: -12px;
  left: -12px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 16px;
}

.bracket-frame::after {
  bottom: -12px;
  right: -12px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 16px;
}

/* Hero section uses darker brackets for contrast against sky */
.hero .bracket-frame::before,
.hero .bracket-frame::after {
  border-color: var(--deep-ocean);
}

/* Responsive adjustment for bracket frames */
@media (max-width: 768px) {
  .bracket-frame::before,
  .bracket-frame::after {
    width: 20px;
    height: 20px;
  }

  .bracket-frame::before {
    top: -8px;
    left: -8px;
  }

  .bracket-frame::after {
    bottom: -8px;
    right: -8px;
  }
}

/* ==========================================================================
   PHASE 4: Contour Background Pattern
   ========================================================================== */

.has-contours {
  position: relative;
}

.has-contours::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://res.cloudinary.com/dzkwr9w8n/image/upload/f_auto,q_auto/contour-pattern_jbl2ht');
  background-size: 800px auto;
  background-repeat: repeat;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content stays above pattern */
.has-contours > .container {
  position: relative;
  z-index: 1;
}

/* Reduced motion - hide contours */
@media (prefers-reduced-motion: reduce) {
  .has-contours::before {
    display: none;
  }
}

/* ==========================================================================
   PHASE 5: Decorative Nodes (Subtle)
   ========================================================================== */

.section-node {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--electric-blue);
  border-radius: 50%;
  opacity: 0.15;
  pointer-events: none;
}

.section-node--top-right {
  top: 80px;
  right: 60px;
}

.section-node--bottom-left {
  bottom: 80px;
  left: 60px;
}