:root{
  --marine-bg:#0b1220;
  --marine-panel:#112240;
  --marine-border:#1e293b;
  --marine-blue:#2563eb;
  --marine-blue-hover:#1d4ed8;
  --teal-accent:#64ffda;
  /* New palettes for section differentiation */
  --eco-bg:#0d1b14;         /* deep green-black */
  --eco-panel:#0f2a1f;      /* panel green */
  --eco-border:#17443a;     /* border green */
  --eco-accent:#7fffd4;     /* aquamarine accent */

  --usv-bg:#000000;         /* true black */
  --usv-panel:#0b0b0b;      /* near-black */
  --usv-border:#1f2937;     /* cool dark border */
  --usv-accent:#60a5fa;     /* soft blue accent */
}

/* Base helpers */
.nav-link{
  color:#cbd5e1; /* slate-300 */
  transition: color .2s ease;
}
.nav-link:hover{ color:#f1f5f9; /* slate-100 */ }
.nav-link.active{
  color: var(--teal-accent);
  text-underline-offset: 6px;
  text-decoration: underline;
}

/* Mobile */
.mobile-link{
  display:block;
  padding:.5rem .5rem;
  border-radius:.25rem;
  color:#e2e8f0; /* slate-200 */
}
.mobile-link:hover{ background:#112240; }

/* Section framing */
.section{
  padding-top:4rem;
  padding-bottom:4rem;
  background: var(--marine-bg);
  border-bottom: 1px solid var(--marine-border);
}
.section:first-of-type{ border-top: 1px solid var(--marine-border); }
.section-inner{
  margin-left:auto; margin-right:auto;
  max-width:80rem; /* 7xl */
  padding-left:1rem; padding-right:1rem; /* px-4 */
}
@media (min-width: 640px){ /* sm */
  .section-inner{ padding-left:1.5rem; padding-right:1.5rem; }
}
@media (min-width: 1024px){ /* lg */
  .section-inner{ padding-left:2rem; padding-right:2rem; }
}
.panel{
  background: var(--marine-panel);
  border: 1px solid var(--marine-border);
  border-radius:.25rem;
  padding:1rem; /* p-4 */
}

/* Wreck & Salvage theme (eco/clean) */
.section-eco{ background: var(--eco-bg); border-color: var(--eco-border); }
.section-eco .panel{ background: var(--eco-panel); border-color: var(--eco-border); }
.section-eco .section-title::after{ background: linear-gradient(90deg, var(--eco-accent), transparent 70%); }
.section-eco .btn-outline-teal{ color: var(--eco-accent); border-color: var(--eco-accent); }
.section-eco .btn-outline-teal:hover{ background: color-mix(in srgb, var(--eco-accent) 12%, transparent); }

/* USV theme (slick black) */
.section-usv{ background: var(--usv-bg); border-color: var(--usv-border); }
.section-usv .panel{ background: var(--usv-panel); border-color: var(--usv-border); }
.section-usv .section-title::after{ background: linear-gradient(90deg, var(--usv-accent), transparent 70%); }
.section-usv .btn-outline-teal{ color: var(--usv-accent); border-color: var(--usv-accent); }
.section-usv .btn-outline-teal:hover{ background: color-mix(in srgb, var(--usv-accent) 12%, transparent); }

/* Title underline accent */
.section-title{
  font-weight:800;
  color:#f1f5f9; /* slate-100 */
  font-size:1.5rem; line-height:2rem; /* text-2xl */
  position: relative;
  display: inline-block;
}
@media (min-width:768px){ /* md */
  .section-title{ font-size:1.875rem; line-height:2.25rem; }
}
.section-title::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px; height:3px;
  background: linear-gradient(90deg, var(--teal-accent), transparent 70%);
  border-radius: 2px;
}

/* Feature chips */
.feature{
  color:#cbd5e1; /* slate-300 */
  font-size:.875rem; /* text-sm */
  background: color-mix(in srgb, var(--marine-panel) 90%, #0b1220);
  border: 1px dashed var(--marine-border);
  border-radius:.25rem;
  padding:.5rem .75rem; /* px-3 py-2 */
}

/* Buttons (pg/dt-btn patterns) */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:.25rem;
  font-weight:600;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  padding: 0.625rem 1rem; /* 10px 16px */
  line-height: 1.2;
}
.btn:focus{ outline:2px solid transparent; outline-offset:2px; }

.btn-primary{
  background: var(--marine-blue);
  color: white;
  border: 1px solid transparent;
}
.btn-primary:hover{ background: var(--marine-blue-hover); }
.btn-primary:focus{ box-shadow: 0 0 0 2px rgb(15 23 42 / 1), 0 0 0 4px rgba(37,99,235,.6); }

.btn-outline-teal{
  background: transparent;
  color: var(--teal-accent);
  border: 1px solid var(--teal-accent);
}
.btn-outline-teal:hover{
  background: color-mix(in srgb, var(--teal-accent) 12%, transparent);
}
.btn-outline-teal:focus{ box-shadow: 0 0 0 2px rgb(15 23 42 / 1), 0 0 0 4px rgba(100,255,218,.5); }

.btn-ghost{
  background: transparent;
  color: #cbd5e1;
  border: 1px solid var(--marine-border);
}
.btn-ghost:hover{
  background: #0f172a;
  color: #e2e8f0;
}
.btn-ghost:focus{ box-shadow: 0 0 0 2px rgb(15 23 42 / 1), 0 0 0 4px rgba(226,232,240,.35); }

/* Header logos: responsive size + a11y focus */
.header-logos img{ height:2rem; width:auto; } /* ~h-8 on mobile */
@media (min-width:768px){ /* md */
  .header-logos img{ height:3rem; } /* ~h-12 on desktop */
}
.header-logos a:focus-visible img{
  outline:2px solid var(--teal-accent);
  outline-offset:2px;
  border-radius:.25rem;
}
.header-logos a:hover img{ filter:brightness(1.05); }

/* Video sizing helpers */
.video-tall{ aspect-ratio: 16/9; }
@media (min-width: 768px){
  .video-tall{ aspect-ratio: 16/9; }
}

/* Section logos next to titles */
.section-logo{ height:2.25rem; width:auto; }
@media (min-width:768px){
  .section-logo{ height:3rem; }
}

/* Modal helpers */
.no-scroll{ overflow: hidden; }
.modal-content{ max-height: 85vh; overflow-y: auto; }