/* ═══════════════════════════════════════════════════════════════
   OBX — OCEAN PALETTE (Vibrant, Yacht-Forward)
   Deep ocean navy base + electric teal + warm gold + coral accent
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* Core */
  --navy:#051625;
  --navy-2:#0a2540;
  --ocean:#0e4d7a;
  --ocean-2:#1565a0;
  --teal:#0fb5a6;
  --teal-soft:#d4f5f2;
  --sky:#2e86c1;
  --sky-soft:#d6e9f8;
  --sky-pale:#eaf3fb;
  --white:#ffffff;
  --ink:#071a2b;
  --muted:#4a6178;
  --line:#cfe0ee;
  --bg:#f8fbfd;
  --bg-alt:#eef5fa;
  --card-bg:#ffffff;
  --gold:#e8a020;
  --gold-soft:#fdf3dd;
  --coral:#f06449;
  --coral-soft:#fde8e4;
  --green:#0fa36b;
  --red:#d9453c;
  --header-bg:rgba(255,255,255,.94);

  /* Type */
  --font-head:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Shape */
  --radius:16px;
  --radius-sm:11px;
  --shadow:0 18px 50px -16px rgba(5,22,37,.28);
  --shadow-sm:0 8px 24px -10px rgba(5,22,37,.16);
  --shadow-glow:0 0 0 1px rgba(15,181,166,.25),0 14px 44px -14px rgba(15,181,166,.3);

  /* Layout */
  --maxw:1200px;
  --section-pad:clamp(64px,8vw,108px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --navy:#030d18;
  --navy-2:#071a30;
  --ocean:#1565a0;
  --ocean-2:#1e7ec2;
  --teal:#14c9b8;
  --teal-soft:#0a2e2c;
  --sky:#5dade2;
  --sky-soft:#0f2a40;
  --sky-pale:#0b1f33;
  --white:#0d1c2e;
  --ink:#e4eef7;
  --muted:#8fa4ba;
  --line:#1a3550;
  --bg:#030d18;
  --bg-alt:#061524;
  --card-bg:#0a1a2c;
  --gold:#f0b542;
  --gold-soft:#2a2210;
  --coral:#ff7a62;
  --coral-soft:#2a1410;
  --green:#1ec98f;
  --red:#ef6a60;
  --header-bg:rgba(3,13,24,.92);
  --shadow:0 18px 50px -16px rgba(0,0,0,.55);
  --shadow-sm:0 8px 24px -10px rgba(0,0,0,.45);
  --shadow-glow:0 0 0 1px rgba(20,201,184,.3),0 14px 44px -14px rgba(20,201,184,.35);
}

/* ═══ Yacht SVG illustration (hero + section accents) ═══ */
.yacht-svg{width:100%;height:auto;display:block}
.yacht-svg .hull{fill:var(--navy)}
.yacht-svg .sail{fill:var(--white);stroke:var(--line);stroke-width:.5}
.yacht-svg .sail-2{fill:var(--teal);opacity:.9}
.yacht-svg .water{fill:var(--teal);opacity:.18}
.yacht-svg .water-2{fill:var(--sky);opacity:.14}
.yacht-svg .mast{stroke:var(--navy);stroke-width:1.2;fill:none}
.yacht-svg .flag{fill:var(--gold)}
.yacht-svg .sun{fill:var(--gold);opacity:.9}
.yacht-svg .wave{fill:none;stroke:var(--teal);stroke-width:1.5;opacity:.5}

/* ═══ Wave section divider ═══ */
.wave-divider{display:block;width:100%;height:60px;margin-bottom:-1px}
.wave-divider path{fill:var(--bg-alt)}
.wave-divider.flip path{fill:var(--bg)}

/* ═══ Vibrant gradient utilities ═══ */
.grad-ocean{background:linear-gradient(135deg,var(--navy) 0%,var(--ocean) 50%,var(--teal) 100%)}
.grad-hero{background:linear-gradient(160deg,#051625 0%,#0a2d4d 35%,#0e4d7a 65%,#0fb5a6 100%)}
.grad-gold{background:linear-gradient(135deg,var(--gold),#f5c563)}
.grad-coral{background:linear-gradient(135deg,var(--coral),#f5876e)}
.text-grad{background:linear-gradient(90deg,var(--teal),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ═══ Bold OBX wordmark ═══ */
.obx-wordmark{display:inline-flex;align-items:center;gap:.5rem}
.obx-wordmark .obx-mark{font-family:var(--font-head);font-weight:900;font-size:1.55rem;letter-spacing:-.02em;background:linear-gradient(90deg,var(--teal),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.obx-wordmark .obx-wave{width:28px;height:18px}
.obx-wordmark .obx-name{font-family:var(--font-head);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:.2rem}