/* ═══════════════════════════════════════════════════
   THIS1BOAT.COM — MASTER STYLESHEET
   Light Coastal · Airy · Maritime Authority
   ═══════════════════════════════════════════════════ */

:root {
  --white:    #ffffff;
  --salt:     #f6f9fc;
  --mist:     #eaf3f9;
  --foam:     #d5eaf5;
  --sky-lt:   #b2d8ee;
  --sky:      #4a9abe;
  --ocean:    #1a6a8e;
  --deep:     #0d4d6b;
  --ink:      #09202f;
  --gold:     #c07d20;
  --amber:    #dda030;
  --coral:    #d04f28;
  --sand:     #f0e8d4;
  --green:    #2a8a5e;
  --txt:      #182c3a;
  --txt-mid:  #4a6478;
  --txt-lt:   #7a9aaa;
  --bdr:      rgba(26,106,142,0.12);
  --bdr-mid:  rgba(26,106,142,0.2);
  --sh-sm:    0 2px 14px rgba(9,32,47,0.06);
  --sh-md:    0 8px 32px rgba(9,32,47,0.10);
  --sh-lg:    0 20px 60px rgba(9,32,47,0.14);
  --sh-xl:    0 32px 80px rgba(9,32,47,0.18);
  --r:        14px;
  --r-lg:     22px;
  --r-xl:     32px;
  --serif:    'Playfair Display', Georgia, serif;
  --sans:     'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:     'DM Mono', monospace;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--sans); color:var(--txt); background:var(--white); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { border:none; background:none; cursor:pointer; font-family:inherit; }
select, input { font-family:inherit; border:none; background:none; outline:none; color:var(--txt); }
ul { list-style:none; }

.container { max-width:1180px; margin:0 auto; padding:0 24px; }

.skip-link { position:absolute; top:-40px; left:0; background:var(--ocean); color:#fff; padding:8px 16px; z-index:9999; border-radius:0 0 8px 0; transition:top 0.2s; }
.skip-link:focus { top:0; }

/* ── SECTION HEADERS ── */
.section-header { text-align:center; margin-bottom:56px; }
.eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:5px; text-transform:uppercase; color:var(--ocean); margin-bottom:12px; }
.section-title { font-family:var(--serif); font-size:clamp(30px,4vw,52px); font-weight:700; color:var(--ink); line-height:1.1; margin-bottom:16px; }
.section-title em { font-style:italic; color:var(--ocean); }
.section-sub { font-size:17px; color:var(--txt-mid); line-height:1.7; max-width:560px; margin:0 auto; }

/* ── BUTTONS ── */
.btn-primary { display:inline-flex; align-items:center; gap:8px; background:var(--ocean); color:#fff; padding:14px 28px; border-radius:50px; font-size:15px; font-weight:600; transition:all 0.25s; box-shadow:0 4px 18px rgba(26,106,142,0.28); }
.btn-primary:hover { background:var(--deep); transform:translateY(-2px); box-shadow:0 8px 26px rgba(26,106,142,0.38); }
.btn-outline-ocean { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--ocean); padding:14px 28px; border-radius:50px; font-size:15px; font-weight:600; border:2px solid var(--ocean); transition:all 0.25s; }
.btn-outline-ocean:hover { background:var(--ocean); color:#fff; transform:translateY(-2px); }
.btn-white { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--ocean); padding:16px 32px; border-radius:50px; font-size:16px; font-weight:700; transition:all 0.25s; box-shadow:0 4px 18px rgba(0,0,0,0.12); }
.btn-white:hover { background:var(--mist); transform:translateY(-2px); }
.btn-outline-wh { display:inline-flex; align-items:center; gap:8px; background:transparent; color:#fff; padding:16px 32px; border-radius:50px; font-size:16px; font-weight:600; border:2px solid rgba(255,255,255,0.6); transition:all 0.25s; }
.btn-outline-wh:hover { background:rgba(255,255,255,0.15); border-color:#fff; transform:translateY(-2px); }

/* ── ANIMATIONS ── */
.fade-up { opacity:0; transform:translateY(28px); animation:fadeUp 0.9s forwards; }
.d1 { animation-delay:0.1s; } .d2 { animation-delay:0.25s; } .d3 { animation-delay:0.4s; } .d4 { animation-delay:0.55s; } .d5 { animation-delay:0.7s; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

/* ═══════════════════ NAV ═══════════════════ */
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,0.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--bdr); transition:box-shadow 0.3s; }
.nav.scrolled { box-shadow:var(--sh-md); }
.nav-inner { max-width:1180px; margin:0 auto; padding:0 24px; height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo { display:flex; align-items:center; gap:10px; }
.logo-anchor { flex-shrink:0; }
.logo-text { font-family:var(--serif); font-size:21px; font-weight:700; color:var(--ink); letter-spacing:1px; }
.logo-one { color:var(--ocean); }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-link { font-size:14px; font-weight:500; color:var(--txt-mid); transition:color 0.2s; }
.nav-link:hover { color:var(--ocean); }
.nav-right { display:flex; align-items:center; gap:16px; }
.nav-host { font-size:14px; font-weight:500; color:var(--txt-mid); transition:color 0.2s; }
.nav-host:hover { color:var(--ocean); }
.nav-cta { background:var(--ocean); color:#fff; padding:10px 22px; border-radius:50px; font-size:14px; font-weight:600; transition:all 0.2s; box-shadow:0 2px 12px rgba(26,106,142,0.2); }
.nav-cta:hover { background:var(--deep); transform:translateY(-1px); }
.hamburger { display:none; flex-direction:column; gap:5px; padding:8px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:all 0.3s; }
.nav-mobile { display:none; flex-direction:column; padding:16px 24px 20px; background:#fff; border-top:1px solid var(--bdr); gap:2px; }
.nav-mobile a { padding:12px 0; font-size:15px; color:var(--txt); border-bottom:1px solid var(--mist); font-weight:500; transition:color 0.2s; }
.nav-mobile a:hover { color:var(--ocean); }
.nav-mobile.open { display:flex; }
.mobile-cta { margin-top:8px; background:var(--ocean)!important; color:#fff!important; text-align:center; padding:14px!important; border-radius:var(--r); border-bottom:none!important; font-weight:600; }

/* ═══════════════════ HERO ═══════════════════ */
.hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:90px 24px 0; position:relative; overflow:hidden; background:linear-gradient(170deg,#e2f1fa 0%,#c8e4f4 35%,#aed5ee 65%,#94c5e6 100%); }

.hero-sky { position:absolute; inset:0; background:radial-gradient(ellipse 90% 60% at 50% 20%, rgba(255,255,255,0.65), transparent 70%); pointer-events:none; }
.hero-glare { position:absolute; top:-20%; left:-10%; width:70%; height:70%; background:radial-gradient(circle, rgba(255,255,255,0.35), transparent 60%); pointer-events:none; animation:glareFloat 12s ease-in-out infinite; }
@keyframes glareFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(5%,5%)} }

.wave-layer { position:absolute; left:-5%; right:-5%; pointer-events:none; }
.w1 { bottom:60px; height:90px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90'%3E%3Cpath fill='rgba(255,255,255,0.25)' d='M0,45 C240,90 480,0 720,45 C960,90 1200,0 1440,45 L1440,90 L0,90 Z'/%3E%3C/svg%3E") repeat-x center; background-size:1440px 90px; animation:wv 9s linear infinite; }
.w2 { bottom:30px; height:80px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath fill='rgba(255,255,255,0.35)' d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,30 1440,40 L1440,80 L0,80 Z'/%3E%3C/svg%3E") repeat-x center; background-size:1440px 80px; animation:wv 7s linear infinite reverse; }
.w3 { bottom:0; height:70px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70'%3E%3Cpath fill='rgba(255,255,255,0.9)' d='M0,35 C180,70 360,0 540,35 C720,70 900,0 1080,35 C1260,70 1380,25 1440,35 L1440,70 L0,70 Z'/%3E%3C/svg%3E") repeat-x center; background-size:1440px 70px; animation:wv 5s linear infinite; }
@keyframes wv { from{background-position:0 center} to{background-position:1440px center} }

.hero-content { position:relative; z-index:3; max-width:820px; width:100%; padding-bottom:40px; }

/* Mode pills */
.mode-pills { display:inline-flex; gap:8px; background:rgba(255,255,255,0.75); border:1px solid rgba(26,106,142,0.18); border-radius:50px; padding:6px; margin-bottom:28px; backdrop-filter:blur(8px); flex-wrap:wrap; justify-content:center; }
.mode-pill { padding:9px 20px; border-radius:50px; font-size:13px; font-weight:600; color:var(--txt-mid); transition:all 0.25s; cursor:pointer; }
.mode-pill.active, .mode-pill:hover { background:var(--ocean); color:#fff; box-shadow:0 3px 12px rgba(26,106,142,0.3); }

/* Title */
.hero-title { font-family:var(--serif); font-size:clamp(56px,9vw,124px); font-weight:900; line-height:0.9; color:var(--ink); margin-bottom:24px; letter-spacing:-2px; display:flex; flex-direction:column; }
.ht-top { display:block; }
.ht-mid { display:block; font-size:clamp(28px,4.5vw,62px); font-weight:400; color:var(--txt-mid); letter-spacing:-1px; margin:4px 0; }
.ht-bot { display:block; }
.hero-title em { font-style:italic; color:var(--ocean); }

/* Sub */
.hero-sub { font-size:clamp(16px,2vw,19px); color:var(--txt-mid); line-height:1.75; margin-bottom:36px; max-width:580px; margin-left:auto; margin-right:auto; }

/* Search engine */
.search-engine { width:100%; max-width:800px; margin:0 auto 20px; }
.search-card { display:flex; align-items:center; background:#fff; border-radius:70px; box-shadow:var(--sh-xl); border:1px solid var(--bdr); padding:6px 6px 6px 0; }
.sf { flex:1; padding:12px 20px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.sf label { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--txt-mid); display:block; }
.sf input, .sf select { font-size:14px; color:var(--txt); padding:2px 0; width:100%; appearance:none; -webkit-appearance:none; }
.sf input::placeholder { color:var(--txt-lt); }
.sf-sep { width:1px; height:36px; background:var(--bdr); flex-shrink:0; }
.search-go { display:flex; align-items:center; gap:8px; background:var(--ocean); color:#fff; padding:16px 26px; border-radius:50px; font-size:15px; font-weight:700; white-space:nowrap; margin:0 0 0 6px; transition:all 0.2s; flex-shrink:0; }
.search-go:hover { background:var(--deep); transform:scale(1.03); }
.search-quick { display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; justify-content:center; }
.sq-label { font-size:12px; color:rgba(9,32,47,0.5); font-weight:500; }
.sq-tag { background:rgba(255,255,255,0.8); border:1px solid rgba(26,106,142,0.2); color:var(--ocean); font-size:12px; font-weight:600; padding:6px 14px; border-radius:50px; transition:all 0.2s; backdrop-filter:blur(6px); }
.sq-tag:hover { background:var(--ocean); color:#fff; border-color:var(--ocean); }

/* Trust */
.hero-trust { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 16px; font-size:13px; color:var(--txt-mid); font-weight:500; }
.ht-sep { color:var(--txt-lt); }

/* Live bar */
.live-bar { position:relative; z-index:3; width:100%; background:rgba(255,255,255,0.9); border-top:1px solid rgba(26,106,142,0.12); backdrop-filter:blur(10px); margin-top:40px; }
.live-bar-inner { max-width:1180px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.live-indicator { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; letter-spacing:3px; color:var(--ocean); font-weight:500; flex-shrink:0; }
.live-dot { display:inline-block; width:8px; height:8px; background:#22c55e; border-radius:50%; animation:pulse 2s infinite; box-shadow:0 0 0 0 rgba(34,197,94,0.4); }
.live-dot.sm { width:6px; height:6px; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.5)} 50%{box-shadow:0 0 0 6px rgba(34,197,94,0)} }
.live-items { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.live-item { display:flex; align-items:center; gap:8px; }
.li-place { font-size:12px; color:var(--txt-mid); font-weight:600; }
.li-val { font-family:var(--mono); font-size:12px; color:var(--ocean); font-weight:500; }
.live-div { width:1px; height:20px; background:var(--bdr); }

/* ═══════════════════ MODES ═══════════════════ */
.modes { padding:100px 0; background:var(--white); }
.modes-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mode-card { background:var(--salt); border:1px solid var(--bdr); border-radius:var(--r-lg); padding:36px 28px; position:relative; overflow:hidden; transition:all 0.3s; cursor:default; }
.mode-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:var(--sky); background:#fff; }
.mc-num { font-family:var(--mono); font-size:11px; letter-spacing:3px; color:var(--txt-lt); margin-bottom:16px; }
.mc-icon { font-size:36px; margin-bottom:16px; display:block; }
.mode-card h3 { font-family:var(--serif); font-size:22px; font-weight:700; color:var(--ink); margin-bottom:12px; }
.mode-card p { font-size:14px; line-height:1.8; color:var(--txt-mid); margin-bottom:20px; }
.mc-meta { display:flex; gap:8px; align-items:center; font-size:12px; font-weight:600; color:var(--ocean); margin-bottom:20px; flex-wrap:wrap; }
.mc-meta span:nth-child(2) { color:var(--txt-lt); }
.mc-link { font-size:14px; font-weight:700; color:var(--ocean); transition:color 0.2s; }
.mc-link:hover { color:var(--deep); }
.mc-book:hover { border-color:var(--ocean); }
.mc-explore:hover { border-color:#2a6eb0; }
.mc-work:hover { border-color:var(--green); }
.mc-earn:hover { border-color:var(--gold); }

/* ═══════════════════ BOATS ═══════════════════ */
.boats-section { padding:100px 0; background:var(--salt); }
.boats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.boat-card { background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); border:1px solid var(--bdr); transition:all 0.3s; }
.boat-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); }
.bc-star { border-color:var(--sky-lt); box-shadow:0 4px 24px rgba(26,106,142,0.14); }
.bc-img-wrap { position:relative; height:220px; overflow:hidden; }
.bc-img { width:100%; height:100%; background-size:cover; background-position:center; transition:transform 0.5s; }
.boat-card:hover .bc-img { transform:scale(1.06); }
.bc-img-sail { background:linear-gradient(135deg,#1a6a8e 0%,#4a9abe 40%,#94c5e6 70%,#c8e4f4 100%); }
.bc-img-cat  { background:linear-gradient(135deg,#0d4d6b 0%,#1a6a8e 35%,#2a8ab0 65%,#4aaed8 100%); }
.bc-img-power{ background:linear-gradient(135deg,#09202f 0%,#0d4d6b 35%,#1a6a8e 65%,#3a8ab8 100%); }
.bc-img::after { content:'⚓'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:52px; opacity:0.15; }
.bc-badge { position:absolute; top:14px; left:14px; background:rgba(255,255,255,0.92); color:var(--ocean); font-size:11px; font-weight:700; padding:5px 12px; border-radius:50px; letter-spacing:0.5px; backdrop-filter:blur(8px); }
.bc-check { position:absolute; top:14px; right:44px; background:rgba(34,197,94,0.9); color:#fff; font-size:11px; font-weight:700; padding:5px 10px; border-radius:50px; backdrop-filter:blur(6px); }
.bc-pop { position:absolute; bottom:14px; left:14px; background:var(--amber); color:#fff; font-size:11px; font-weight:700; padding:5px 12px; border-radius:50px; }
.bc-heart { position:absolute; top:12px; right:12px; width:32px; height:32px; background:rgba(255,255,255,0.9); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; transition:all 0.2s; backdrop-filter:blur(6px); }
.bc-heart:hover { background:var(--coral); color:#fff; transform:scale(1.1); }
.bc-body { padding:20px; }
.bc-loc { font-size:12px; color:var(--txt-lt); font-weight:600; margin-bottom:6px; }
.bc-name { font-family:var(--serif); font-size:18px; font-weight:700; color:var(--ink); margin-bottom:12px; line-height:1.2; }
.bc-specs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.bc-specs span { background:var(--mist); color:var(--ocean); font-size:11px; font-weight:600; padding:4px 10px; border-radius:50px; }
.bc-live { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--green); font-weight:500; margin-bottom:14px; min-height:20px; }
.bc-foot { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--mist); }
.bc-price { display:flex; flex-direction:column; }
.bc-price b { font-size:20px; color:var(--ink); font-weight:700; }
.bc-price span:not(b) { font-size:12px; color:var(--txt-lt); }
.bc-price small { font-size:11px; color:var(--green); font-weight:600; margin-top:2px; }
.bc-btn { background:var(--ocean); color:#fff; padding:10px 20px; border-radius:50px; font-size:13px; font-weight:700; transition:all 0.2s; }
.bc-btn:hover { background:var(--deep); transform:translateY(-1px); }

/* ═══════════════════ HOW IT WORKS ═══════════════════ */
.hiw { padding:100px 0; background:var(--white); }
.hiw-tabs { display:flex; justify-content:center; gap:8px; margin-bottom:48px; flex-wrap:wrap; }
.hiw-tab { padding:12px 28px; border-radius:50px; font-size:14px; font-weight:600; color:var(--txt-mid); transition:all 0.25s; border:2px solid var(--bdr); cursor:pointer; }
.hiw-tab.active, .hiw-tab:hover { background:var(--ocean); color:#fff; border-color:var(--ocean); box-shadow:0 4px 16px rgba(26,106,142,0.25); }
.hiw-panels { position:relative; }
.hiw-panel { display:none; }
.hiw-panel.active { display:block; }
.steps { display:flex; align-items:flex-start; gap:0; }
.step { flex:1; }
.step-n { width:48px; height:48px; background:var(--ocean); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; font-weight:700; margin-bottom:16px; }
.step-b h3 { font-family:var(--serif); font-size:20px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.step-b p { font-size:14px; line-height:1.8; color:var(--txt-mid); }
.step-conn { flex-shrink:0; width:60px; height:2px; background:linear-gradient(90deg,var(--ocean),var(--sky-lt)); margin:24px 8px 0; align-self:flex-start; }
.hiw-cta { display:flex; align-items:center; gap:20px; margin-top:40px; flex-wrap:wrap; }
.hiw-note { font-size:13px; color:var(--txt-lt); font-style:italic; }

/* ═══════════════════ MAP ═══════════════════ */
.map-section { padding:100px 0 0; background:var(--salt); }
.map-outer { position:relative; margin-top:48px; }
#map { width:100%; height:460px; }
.map-legend { position:absolute; bottom:20px; right:20px; background:rgba(255,255,255,0.95); border:1px solid var(--bdr); padding:12px 18px; border-radius:var(--r); display:flex; gap:16px; font-size:12px; font-weight:600; color:var(--txt-mid); backdrop-filter:blur(8px); box-shadow:var(--sh-md); }
.ml-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; }
.ml-boat { background:var(--ocean); }
.ml-marina { background:var(--amber); }

/* ═══════════════════ IMPACT ═══════════════════ */
.impact { padding:100px 0; position:relative; overflow:hidden; }
.impact-bg { position:absolute; inset:0; background:linear-gradient(150deg,var(--deep) 0%,var(--ocean) 50%,#2a8ab0 100%); }
.impact > .container { position:relative; z-index:2; }
.impact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:16px; }
.impact-stat { text-align:center; padding:32px 20px; background:rgba(255,255,255,0.1); border-radius:var(--r-lg); border:1px solid rgba(255,255,255,0.15); transition:all 0.3s; }
.impact-stat:hover { background:rgba(255,255,255,0.18); transform:translateY(-4px); }
.is-num { font-family:var(--serif); font-size:clamp(36px,4vw,54px); font-weight:900; color:#fff; line-height:1; margin-bottom:8px; }
.is-label { font-size:14px; font-weight:700; color:rgba(255,255,255,0.9); margin-bottom:6px; }
.is-desc { font-size:12px; color:rgba(255,255,255,0.55); font-style:italic; }

/* ═══════════════════ TRIBE ═══════════════════ */
.tribe { padding:100px 0; background:var(--mist); }
.tribe-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.tribe-text .eyebrow { text-align:left; }
.tribe-text .section-title { text-align:left; }
.tribe-text p { font-size:16px; line-height:1.8; color:var(--txt-mid); }
.tribe-badges { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hb-card { background:#fff; border:1px solid var(--bdr); border-radius:var(--r); padding:24px 20px; transition:all 0.3s; }
.hb-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--sky); }
.hb-active { border-color:var(--ocean); box-shadow:0 4px 20px rgba(26,106,142,0.15); background:linear-gradient(135deg,rgba(26,106,142,0.04),rgba(74,154,190,0.04)); }
.hb-locked { opacity:0.45; filter:grayscale(0.5); }
.hb-icon { font-size:28px; margin-bottom:10px; }
.hb-name { font-family:var(--serif); font-size:16px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.hb-desc { font-size:12px; color:var(--txt-lt); margin-bottom:12px; }
.hb-bar { height:4px; background:var(--mist); border-radius:2px; overflow:hidden; }
.hb-fill { height:100%; background:linear-gradient(90deg,var(--ocean),var(--sky)); border-radius:2px; transition:width 1.5s ease; }

/* ═══════════════════ TESTIMONIALS ═══════════════════ */
.testimonials { padding:100px 0; background:var(--white); }
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testi-card { background:var(--salt); border:1px solid var(--bdr); border-radius:var(--r-lg); padding:32px 28px; transition:all 0.3s; }
.testi-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); background:#fff; }
.testi-feat { border-color:var(--sky-lt); background:#fff; box-shadow:var(--sh-md); }
.testi-stars { font-size:16px; color:var(--amber); margin-bottom:16px; letter-spacing:2px; }
.testi-card > p { font-family:var(--serif); font-size:16px; font-style:italic; line-height:1.8; color:var(--txt); margin-bottom:24px; }
.testi-foot { display:flex; align-items:center; gap:14px; }
.ta-av { width:42px; height:42px; border-radius:50%; background:var(--ocean); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; }
.ta-name { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.ta-badge { font-size:11px; color:var(--ocean); font-weight:600; }

/* ═══════════════════ FAQ ═══════════════════ */
.faq { padding:100px 0; background:var(--salt); }
.faq-list { max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:4px; }
.faq-item { background:#fff; border:1px solid var(--bdr); border-radius:var(--r); overflow:hidden; transition:box-shadow 0.2s; }
.faq-item:hover { box-shadow:var(--sh-sm); }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; font-size:15px; font-weight:600; color:var(--ink); text-align:left; cursor:pointer; transition:color 0.2s; }
.faq-q:hover { color:var(--ocean); }
.fq-icon { font-size:22px; color:var(--ocean); flex-shrink:0; transition:transform 0.3s; font-weight:300; }
.faq-q[aria-expanded="true"] .fq-icon { transform:rotate(45deg); }
.faq-a { padding:0 24px 22px; }
.faq-a p { font-size:14px; line-height:1.85; color:var(--txt-mid); border-top:1px solid var(--mist); padding-top:16px; }

/* ═══════════════════ NEWS ═══════════════════ */
.news { padding:100px 0; background:var(--white); }
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.news-skel { height:220px; border-radius:var(--r); background:linear-gradient(90deg,var(--mist) 25%,var(--foam) 50%,var(--mist) 75%); background-size:400% 100%; animation:shimmer 1.5s ease-in-out infinite; }
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
.news-card { background:#fff; border:1px solid var(--bdr); border-radius:var(--r); overflow:hidden; transition:all 0.3s; }
.news-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); }
.nc-img { height:140px; background:linear-gradient(135deg,var(--mist),var(--foam)); }
.nc-body { padding:16px; }
.nc-source { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--ocean); font-weight:700; margin-bottom:8px; }
.nc-title { font-family:var(--serif); font-size:16px; font-weight:700; color:var(--ink); line-height:1.4; margin-bottom:8px; }
.nc-date { font-size:11px; color:var(--txt-lt); }

/* ═══════════════════ CTA BAND ═══════════════════ */
.cta-band { padding:90px 0; background:linear-gradient(135deg,var(--deep) 0%,var(--ocean) 50%,#2a90be 100%); position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; top:-40%; right:-10%; width:60%; height:200%; background:radial-gradient(circle,rgba(255,255,255,0.08),transparent 60%); pointer-events:none; }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; position:relative; z-index:2; }
.cta-left { flex:1; min-width:280px; }
.cta-title { font-family:var(--serif); font-size:clamp(32px,4vw,54px); font-weight:900; color:#fff; margin-bottom:12px; line-height:1.1; }
.cta-title em { font-style:italic; color:rgba(255,255,255,0.75); }
.cta-left > p { font-size:17px; color:rgba(255,255,255,0.75); }
.cta-btns { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

/* ═══════════════════ FOOTER ═══════════════════ */
.footer { background:var(--ink); padding:80px 0 0; }
.footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:48px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-logo { font-family:var(--serif); font-size:22px; font-weight:700; color:#fff; letter-spacing:1px; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.footer-logo strong { color:var(--sky); }
.footer-brand p { font-size:13px; line-height:1.9; color:rgba(255,255,255,0.45); }
.footer-brand em { color:rgba(255,255,255,0.6); font-style:italic; }
.footer-social { display:flex; gap:12px; margin-top:20px; }
.footer-social a { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.55); transition:all 0.2s; }
.footer-social a:hover { background:var(--ocean); color:#fff; transform:translateY(-2px); }
.footer-water { margin-top:24px; background:rgba(255,255,255,0.05); border-radius:var(--r); padding:16px; border:1px solid rgba(255,255,255,0.08); }
.fw-title { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--sky); font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.fw-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:12px; }
.fw-row:last-child { border-bottom:none; }
.fw-row span:first-child { color:rgba(255,255,255,0.45); }
.fw-row span:last-child { font-family:var(--mono); color:var(--sky); font-size:11px; }
.footer-col h3 { font-size:11px; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:20px; font-weight:600; }
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col a { font-size:14px; color:rgba(255,255,255,0.55); transition:color 0.2s; }
.footer-col a:hover { color:#fff; }
.footer-bottom { padding:24px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:12px; color:rgba(255,255,255,0.25); }
.footer-legal { display:flex; gap:20px; flex-wrap:wrap; }
.footer-legal a { font-size:12px; color:rgba(255,255,255,0.25); transition:color 0.2s; }
.footer-legal a:hover { color:rgba(255,255,255,0.6); }

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width:1024px) {
  .modes-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .nav-links, .nav-right { display:none; }
  .hamburger { display:flex; }
  .search-card { flex-direction:column; border-radius:var(--r-lg); align-items:stretch; }
  .sf { padding:14px 20px 10px; }
  .sf-sep { width:100%; height:1px; }
  .search-go { border-radius:var(--r); margin:8px; padding:16px; justify-content:center; }
  .boats-grid, .testi-grid, .news-grid { grid-template-columns:1fr; }
  .modes-grid { grid-template-columns:1fr 1fr; }
  .steps { flex-direction:column; gap:24px; }
  .step-conn { width:2px; height:30px; background:linear-gradient(180deg,var(--ocean),var(--sky-lt)); margin:0 0 0 23px; align-self:auto; }
  .impact-grid { grid-template-columns:1fr 1fr; }
  .tribe-grid { grid-template-columns:1fr; gap:40px; }
  .cta-inner { flex-direction:column; text-align:center; }
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .mode-pills { display:none; }
  .live-items { display:none; }
  .live-bar-inner { justify-content:center; }
}
@media (max-width:480px) {
  .modes-grid { grid-template-columns:1fr; }
  .impact-grid { grid-template-columns:1fr 1fr; gap:16px; }
  .tribe-badges { grid-template-columns:1fr 1fr; }
  .hero-title { font-size:54px; }
}