/* ------------------ HERO (Tideglass) ------------------ */
.hero{
  position:relative; isolation:isolate;
  padding: clamp(36px, 6vw, 72px) 0 48px;
  background:
    radial-gradient(1200px 600px at 60% -200px, rgba(73,193,231,.25), transparent 60%),
    radial-gradient(800px 400px at 90% 20%, rgba(20,130,160,.25), transparent 60%);
  overflow:hidden;
}

/* animated watery light (caustics) */
.hero-water{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(120,240,255,.12), rgba(0,0,0,0) 60%) 0 0/120% 120%,
    conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 30%) 0 0/140% 140%;
  mix-blend-mode: screen;
  animation: drift 12s linear infinite, shimmer 6s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(2%, 0, 0) rotate(.5deg); } }
@keyframes shimmer { 0% { filter: blur(8px) brightness(1); } 100% { filter: blur(12px) brightness(1.3);} }

.hero-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 3vw, 40px);
  align-items:center;
}

.hero-copy .eyebrow{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background: var(--glass); border:1px solid var(--border); color:var(--ink-dim);
  font-size:.9rem; letter-spacing:.4px;
}
.hero-title{
  font-family: PlayfairLocal, serif;
  font-size: clamp(32px, 5.2vw, 56px);
  line-height:1.1; margin:.35em 0 .2em;
}
.hero-title span{color:var(--muted)}
.hero-lede{max-width:60ch}
.hero-bullets{margin:1rem 0 1.25rem; padding-left:1.1rem}
.hero-bullets li{margin:.35rem 0}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:1rem 0}
.hero-note{color:var(--ink-dim); max-width:60ch}

/* image tiles */
.hero-tiles{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px;
  align-content:start;
}
.tile{
  position:relative; border-radius:20px; padding:10px; background:var(--glass);
  border:1px solid var(--border);
  transform-style: preserve-3d;
  transition: transform .25s ease, background .25s ease;
}
.tile:hover{transform: translateY(-4px) rotate3d(.5, .6, 0, 6deg); background:var(--glass-2)}
.tile figcaption{
  margin-top:8px; font-size:.9rem; color:var(--ink-dim);
}

/* micro-motions */
.tilt{animation: tiltIn .8s cubic-bezier(.2,.8,.2,1) both}
.floaty{animation: floatIn 1s cubic-bezier(.2,.8,.2,1) both}
.delay-1{animation-delay:.15s}
.delay-2{animation-delay:.3s}
@keyframes tiltIn{ from{ opacity:0; transform: translateY(10px) rotate(-2deg)} to{ opacity:1; transform:none } }
@keyframes floatIn{ from{ opacity:0; transform: translateY(16px)} to{ opacity:1; transform:none } }

/* reveal on scroll (progressively enhanced) */
[data-reveal]{opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease}
.reveal-in{opacity:1 !important; transform:none !important}

/* bubbles */
.bubble-layer{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.bubble{
  position:absolute; bottom:-40px; width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #aaf2ff, #6fd6ea);
  opacity:.8; filter: blur(.2px);
  animation: rise var(--dur, 8s) linear infinite;
}
@keyframes rise{
  0%{ transform: translateY(0) translateX(0) scale(.9); opacity:.0 }
  5%{ opacity:.9 }
  100%{ transform: translateY(-120vh) translateX(var(--x, 0)) scale(1.1); opacity:0 }
}

/* ------------------ Media ------------------ */
@media (max-width: 992px){
  .hero-grid{grid-template-columns: 1fr; gap:24px}
  .hero-tiles{order:2}
  .hero-copy{order:1}
}
@media (max-width: 576px){
  .cta-row{gap:10px}
  .tile{padding:8px; border-radius:16px}
  .hero-bullets{font-size:.95rem}
}
@media (max-width: 360px){
  .btn{--bpad: 10px 12px}
}
/* Ключевой фикс: элементы грида должны уметь сжиматься */
.hero-grid, .hero-copy, .hero-tiles { min-width: 0; }

/* Заголовок в герое может переносить длинные слова */
.hero-title { hyphens:auto; }

/* На очень узких экранах: чуть меньше отступов у тайлов */
@media (max-width: 360px){
  .tile{ padding:6px }
}
/* ============ SECTION 2: Route Radar ============ */
.routes{
  position:relative;
  padding: clamp(36px, 5vw, 64px) 0;
  background:
    radial-gradient(900px 480px at 10% 0%, rgba(24,140,170,.18), transparent 60%),
    radial-gradient(700px 420px at 100% 10%, rgba(73,193,231,.18), transparent 60%);
}
.sec-head h2{
  font-family: PlayfairLocal, serif;
  font-size: clamp(26px, 3.6vw, 40px);
  margin: .1em 0 .35em;
}
.sec-lede{max-width: 70ch; color: var(--ink-dim)}
.chips{display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:.8rem 0 0; list-style:none}
.chips li{
  padding:6px 10px; border-radius:999px; border:1px solid var(--border);
  background: var(--glass); color:var(--ink-dim); font-size:.95rem;
}

.route-grid{
  margin-top: 18px;
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.map-card{
  position:relative; padding:10px; border-radius:18px;
  background: var(--glass); border:1px solid var(--border);
}
.map-card figcaption{margin-top:8px; color:var(--ink-dim)}
.ping{
  --s: 12px;
  position:absolute; width:var(--s); height:var(--s); border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #c6f5ff, #61d1e8);
  transform: translate(-50%, -50%);
  animation: pingPulse 2.4s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(97,209,232,.5);
}
@keyframes pingPulse{
  0%{ box-shadow: 0 0 0 0 rgba(97,209,232,.4) }
  70%{ box-shadow: 0 0 0 18px rgba(97,209,232,0) }
  100%{ box-shadow: 0 0 0 0 rgba(97,209,232,0) }
}
.route-note{margin-top:10px; color:var(--ink-dim)}

/* ============ SECTION 3: Fleet Moods (horizontal snap) ============ */
.wake{
  position:relative; padding: clamp(32px, 5vw, 60px) 0 0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(10,120,150,.14), transparent 60%),
    radial-gradient(900px 420px at 0% 100%, rgba(60,170,190,.12), transparent 60%);
}
.wake-track{
  margin-top: 12px;
  display:flex; gap:14px; padding: 10px 16px 28px;
  overflow-x:auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.panel{
  min-width: clamp(260px, 70vw, 360px);
  scroll-snap-align: start;
  background: var(--glass); border:1px solid var(--border);
  border-radius:20px; padding:12px; display:grid; gap:10px;
  transition: transform .25s ease, background .25s ease;
}
.panel:hover{ transform: translateY(-4px); background: var(--glass-2) }
.panel-copy h3{ margin:.2rem 0 }
.wake-fade{
  content:""; position:relative; height:18px; margin-top:-18px;
  background: linear-gradient(180deg, rgba(5,25,35,0), rgba(5,25,35,.55));
}

/* ============ SECTION 4: Clear Terms ============ */
.terms{
  position:relative; padding: clamp(36px, 5vw, 64px) 0;
  background:
    radial-gradient(700px 420px at 100% 0%, rgba(20,110,140,.14), transparent 60%),
    radial-gradient(900px 520px at 10% 100%, rgba(73,193,231,.14), transparent 60%);
}
.term-slabs{
  margin-top:12px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;
}
.slab{
  background: var(--glass); border:1px solid var(--border);
  border-radius:20px; padding:12px;
  display:grid; grid-template-columns: auto 1fr; align-items:start; gap:12px;
}
.slab-fig{margin:0}
.slab-body summary{
  cursor:pointer; list-style:none; font-weight:700; margin:.1rem 0 .35rem 0;
}
.slab-body summary::-webkit-details-marker{display:none}
.slab-body p{ margin:0; color:var(--ink-dim) }
.terms-note{ margin-top:12px; color:var(--ink-dim) }

/* ---- reveals already exist ---- */
@media (max-width: 992px){
  .route-grid{ grid-template-columns: repeat(2, 1fr) }
  .term-slabs{ grid-template-columns: 1fr }
  .slab{ grid-template-columns: 1fr; }
}
@media (max-width: 576px){
  .chips li{ font-size:.9rem }
  .panel{ min-width: 82vw }
}
/* ---- Align wake scroller to container gutters ---- */
:root{
  --container-max: 1120px;  /* должен совпадать с .container */
  --container-pad: 16px;
}

/* боковые отступы = такие же, как у .container */
.wake-track{
  padding-inline:
    clamp(var(--container-pad),
          calc((100vw - var(--container-max))/2 + var(--container-pad)),
          10vw);
  /* чтобы снэп не прилипал даже при клавиатурной навигации */
  scroll-padding-inline:
    clamp(var(--container-pad),
          calc((100vw - var(--container-max))/2 + var(--container-pad)),
          10vw);
}

/* чтобы нижний градиент-фейд совпадал по ширине с треком */
.wake-fade{
  margin-inline:
    clamp(var(--container-pad),
          calc((100vw - var(--container-max))/2 + var(--container-pad)),
          10vw);
}
/* ============ SECTION 5: Skipper’s Log (timeline) ============ */
.log{
  position:relative; padding: clamp(36px, 5vw, 64px) 0;
  background:
    radial-gradient(700px 420px at 0% 0%, rgba(60,170,190,.12), transparent 60%),
    radial-gradient(700px 420px at 100% 100%, rgba(20,110,140,.12), transparent 60%);
}
.log-list{
  list-style:none; margin: 16px 0 0; padding:0; position:relative;
}
.log-list::before{
  content:""; position:absolute; left:18px; top:0; width:2px; height:0;
  background: linear-gradient(180deg, #6fd6ea, transparent);
  transition: height 1.2s ease;
}
.log-list.line-in::before{ height:100% }

.log-item{
  position:relative; display:grid; grid-template-columns: 48px 1fr 1.2fr;
  gap:14px; padding: 8px 0 18px 0;
}
.buoy{
  inline-size:14px; block-size:14px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #c6f5ff, #61d1e8);
  position:absolute; left:12px; top:14px;
  box-shadow: 0 0 0 0 rgba(97,209,232,.5);
  animation: pingPulse 2.6s ease-out infinite;
}
.log-fig{margin:0}
.log-fig figcaption{margin-top:6px; color:var(--ink-dim)}
.log-copy h3{margin:.1rem 0 .25rem}
.log-copy p{color:var(--ink-dim)}

@media (max-width: 992px){
  .log-item{ grid-template-columns: 48px 1fr; }
  .log-copy{ grid-column: 2 / -1; }
}
@media (max-width: 576px){
  .log-list::before{ left:16px }
  .log-item{ grid-template-columns: 40px 1fr; }
  .buoy{ left:9px }
}

/* ============ SECTION 6: Ports Lineup (ribbons) ============ */
.ports{
  position:relative; padding: clamp(36px, 5vw, 64px) 0;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(73,193,231,.14), transparent 60%);
}
.port-ribbons{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; margin-top:12px }
.port{
  display:grid; grid-template-columns: auto 1fr; gap:14px;
  background: var(--glass); border:1px solid var(--border); border-radius:22px; padding:12px;
  clip-path: path("M0,0 h calc(100% - 26px) a26,26 0 0 1 26,26 v calc(100% - 52px) a26,26 0 0 1 -26,26 H0 Z");
  transition: transform .25s ease, background .25s ease;
}
.port:hover{ transform: translateY(-4px); background: var(--glass-2) }
.port-fig{margin:0}
.port-copy p{ color:var(--ink-dim) }
.meters{ display:grid; gap:6px; margin:.5rem 0 }
.meter{
  display:grid; grid-template-columns: 140px 1fr; align-items:center; gap:10px;
}
.meter span{ color:var(--ink-dim); font-size:.95rem }
.meter i{
  --v: 60%;
  display:block; height:8px; border-radius:999px;
  background: linear-gradient(90deg, #7ae3ff, #2fb9d9);
  width: var(--v);
  box-shadow: 0 2px 8px rgba(72,193,231,.35) inset;
}

@media (max-width: 992px){
  .port-ribbons{ grid-template-columns: 1fr }
  .meter{ grid-template-columns: 120px 1fr }
}

/* ============ SECTION 7: Guest Stories (polaroids) ============ */
.stories{
  position:relative; padding: clamp(32px, 5vw, 60px) 0;
  background:
    radial-gradient(900px 420px at 0% 100%, rgba(10,120,150,.14), transparent 60%);
}
.story-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:12px;
}
.polaroid{
  background: #082531; border:1px solid var(--border); border-radius:20px;
  padding:12px; box-shadow: var(--shadow-soft);
  transform: rotate(var(--r, -2deg));
  transition: transform .25s ease, background .25s ease;
}
.polaroid:hover{ transform: rotate(0deg) translateY(-4px); background: var(--glass-2) }
.polaroid figcaption{ margin-top:8px; color:var(--ink-dim); font-style:italic }

@media (max-width: 992px){
  .story-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 576px){
  .story-grid{ grid-template-columns: 1fr }
}
/* --- FIX: Skipper’s Log layout --- */

/* колонка с фото не сжимается меньше 240px,
   текстовая колонка получает нормальное пространство */
.log-item{
  grid-template-columns: 56px minmax(240px, 0.9fr) minmax(300px, 1.1fr);
  align-items: start;
  column-gap: 16px;
}

/* само изображение/alt всегда читабельно */
.log-fig{ min-width: 240px; }
.log-fig .cap-img{
  width: 100%;
  max-width: 350px;           /* ваше общее ограничение */
  aspect-ratio: 4 / 3;        /* стабильная рамка, даже пока jpg нет */
  object-fit: cover;
  display: block;
}

/* чуть правее линия, чтобы не прилипала к картинке */
.log-list::before{ left: 28px; }

/* буёк на линии центрируем по новой оси */
.buoy{ left: 21px; }

/* больше воздуха между пунктами */
.log-item{ padding: 10px 0 22px; }

/* мобильная укладка: фото сверху, текст ниже, линия остаётся слева */
@media (max-width: 992px){
  .log-item{
    grid-template-columns: 44px 1fr;
  }
  .log-fig{ grid-column: 2 / -1; }
  .log-copy{ grid-column: 2 / -1; }
  .log-list::before{ left: 22px; }
  .buoy{ left: 16px; }
}

/* очень узкие экраны — ещё чуть поджимаем минимумы */
@media (max-width: 420px){
  .log-item{
    grid-template-columns: 40px 1fr;
  }
  .log-fig{ min-width: 200px; }
}
/* ---- Skipper’s Log: фикс раскладки ---- */

/* 3 колонки: линия (56px) • фото (≥260px) • текст (≥320px) */
.log-item{
  display:grid;
  grid-template-columns: 56px minmax(260px, 0.9fr) minmax(320px, 1.1fr);
  align-items:start;
  column-gap:16px;
  padding:12px 0 22px;
}

/* Явно размещаем элементы по колонкам */
.log-fig{ grid-column: 2 / 3; min-width:260px; }
.log-copy{ grid-column: 3 / 4; }

/* Карточка с фото выглядит аккуратно даже без jpg */
.log-fig{
  margin:0;
  padding:10px;
  border:1px solid var(--border);
  border-radius:18px;
  background: var(--glass);
}
.log-fig .cap-img{
  display:block;
  width:100%;
  max-width:350px;            /* общее ограничение */
  aspect-ratio: 4 / 3;        /* стабильная высота */
  object-fit: cover;
}

/* Линия и буй смещены правее, чтобы не липли к карточке */
.log-list::before{ left:28px; }
.buoy{ left:21px; }

/* Адаптив: фото сверху, текст под ним; линия остаётся слева */
@media (max-width: 992px){
  .log-item{ grid-template-columns: 44px 1fr; }
  .log-fig{ grid-column: 2 / -1; min-width:0; }
  .log-copy{ grid-column: 2 / -1; }
  .log-list::before{ left:22px; }
  .buoy{ left:16px; }
}
@media (max-width: 420px){
  .log-item{ grid-template-columns: 40px 1fr; }
}
/* ============ SECTION 8: Onboard Kit ============ */
.kit{
  position:relative; padding: clamp(36px, 5vw, 64px) 0;
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(73,193,231,.12), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(10,120,150,.12), transparent 60%);
}
.kit-grid{
  margin-top:12px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;
  min-width:0;
}
.kit-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px;
  padding:12px; transition: transform .25s ease, background .25s ease;
}
.kit-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.kit-card figure{ margin:0 }
.kit-card h3{ margin:.5rem 0 .25rem }
.kit-card p{ color:var(--ink-dim) }

/* subtle water ripple on hover */
.ripple{ position:relative; overflow:hidden }
.ripple::after{
  content:""; position:absolute; inset:auto 0 0 0; height:0;
  background: radial-gradient(60% 60% at 50% 100%, rgba(122,227,255,.25), transparent 70%);
  transform: translateY(10px);
  opacity:0; transition: opacity .35s ease, height .35s ease, transform .35s ease;
}
.ripple:hover::after{ height:40%; opacity:1; transform:none }

@media (max-width: 992px){
  .kit-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 576px){
  .kit-grid{ grid-template-columns: 1fr }
}

/* ============ SECTION 9: Conditions ============ */
.conditions{
  position:relative; padding: clamp(32px, 5vw, 60px) 0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(20,110,140,.14), transparent 60%);
}
.cond-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:12px;
}
.cond-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px;
  padding:12px; display:grid; gap:8px; transition: transform .25s ease, background .25s ease;
}
.cond-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.cond-fig{ margin:0 }
.cond-card p{ color:var(--ink-dim) }
.bars{
  display:grid; gap:6px; margin-top:2px;
}
.bars i{
  --v:70%;
  display:block; height:8px; border-radius:999px; width:var(--v);
  background: linear-gradient(90deg, #7ae3ff, #2fb9d9);
  box-shadow: 0 2px 8px rgba(72,193,231,.35) inset;
}
.bar-labels{ color:var(--ink-dim) }

@media (max-width: 992px){
  .cond-grid{ grid-template-columns: 1fr }
}

/* ============ SECTION 10: Dock Stops ============ */
.stops{
  position:relative; padding: clamp(36px, 5vw, 64px) 0;
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(60,170,190,.12), transparent 60%);
}
.stop-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:12px;
}
.stop-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px;
  padding:12px; transition: transform .25s ease, background .25s ease;
}
.stop-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.stop-card figure{ margin:0 }
.stop-card p{ color:var(--ink-dim); margin-top:6px }

@media (max-width: 992px){
  .stop-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 576px){
  .stop-grid{ grid-template-columns: 1fr }
}
/* ============ SECTION 11: Q&A ============ */
.qa{
  position:relative; padding: clamp(36px, 5vw, 64px) 0;
  background:
    radial-gradient(900px 480px at 100% 0%, rgba(73,193,231,.12), transparent 60%),
    radial-gradient(900px 480px at 0% 100%, rgba(20,110,140,.12), transparent 60%);
}
.qa-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; margin-top:12px;
}
.qa-item{
  border:1px solid var(--border); border-radius:20px; background:var(--glass);
  overflow:hidden; transition: background .25s ease, transform .25s ease;
}
.qa-item[open]{ background: var(--glass-2) }
.qa-item summary{
  cursor:pointer; list-style:none; padding:12px 14px; font-weight:700; display:flex; align-items:center; gap:10px;
}
.qa-item summary::-webkit-details-marker{ display:none }
.qbubble{
  inline-size:26px; block-size:26px; border-radius:999px; display:grid; place-items:center;
  background: radial-gradient(100% 100% at 30% 20%, #77e3ff 0%, #28afd3 45%, #0b4565 100%);
  color:#041c27; font-weight:800;
  box-shadow: 0 4px 10px rgba(72,193,231,.35);
}
.qa-body{ padding: 0 14px 12px 14px; color:var(--ink-dim) }
.qa-body ul{ margin:.5rem 0 0 1.1rem }

@media (max-width: 992px){
  .qa-grid{ grid-template-columns: 1fr }
}

/* ============ SECTION 12: Blue Ethics ============ */
.ethics{
  position:relative; padding: clamp(36px, 5vw, 64px) 0;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(10,120,150,.12), transparent 60%),
    radial-gradient(900px 520px at 0% 100%, rgba(73,193,231,.12), transparent 60%);
}
.ethics-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:12px;
}
.ethic-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px;
  padding:14px; transition: background .25s ease, transform .25s ease;
}
.ethic-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.ethic-card h3{ display:flex; align-items:center; gap:10px; margin:.1rem 0 .35rem }
.ethic-card p{ color:var(--ink-dim); margin:.25rem 0 .5rem }

/* круглые бейджи вместо иконок (без изображений) */
.badge{
  inline-size:26px; block-size:26px; border-radius:999px; display:inline-block;
  background: radial-gradient(100% 100% at 30% 20%, #77e3ff 0%, #28afd3 45%, #0b4565 100%);
  box-shadow: 0 4px 10px rgba(72,193,231,.35);
}

/* метрика-обещание */
.pledge{
  display:grid; grid-template-columns: 140px 1fr; align-items:center; gap:10px;
}
.pledge span{ color:var(--ink-dim); font-size:.95rem }
.pledge i{
  --v: 80%;
  display:block; height:8px; width:0; border-radius:999px;
  background: linear-gradient(90deg, #7ae3ff, #2fb9d9);
  box-shadow: 0 2px 8px rgba(72,193,231,.35) inset;
  transition: width .9s ease;
}
.ethics.meters-on .pledge i{ width: var(--v); }
.ethics-note{ color:var(--ink-dim); margin-top:10px }

@media (max-width: 992px){
  .ethics-grid{ grid-template-columns: repeat(2, 1fr) }
  .pledge{ grid-template-columns: 120px 1fr }
}
@media (max-width: 576px){
  .ethics-grid{ grid-template-columns: 1fr }
}
/* ============ SECTION 13: Harbor Signals ============ */
.signals{
  position:relative; padding: clamp(32px, 5vw, 60px) 0;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(73,193,231,.14), transparent 60%),
    radial-gradient(900px 420px at 0% 100%, rgba(10,120,150,.12), transparent 60%);
}
.signal-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:12px;
}
.card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px;
  padding:12px; transition: transform .25s ease, background .25s ease;
}
.card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.signal .flag{
  inline-size:64px; block-size:48px; border-radius:12px; border:1px solid var(--border);
  box-shadow: var(--shadow-soft); margin-bottom:10px;
}

/* CSS "signal flags" (без изображений) */
.flag--nowake{
  background:
    linear-gradient(135deg, #d9314e 0 40%, transparent 40%) ,
    linear-gradient(135deg, #0b4565 40%, #0b4565 100%);
}
.flag--vests{
  background:
    linear-gradient(#28afd3 0 100%),
    linear-gradient(90deg, transparent 0 40%, #ffffff 40% 60%, transparent 60% 100%);
  background-blend-mode: screen;
}
.flag--wildlife{
  background:
    radial-gradient(circle at 50% 50%, #7ae3ff 0 30%, transparent 32% 100%),
    linear-gradient(#0b4565, #0b4565);
}
.flag--radio{
  background:
    linear-gradient(90deg, #77e3ff 0 50%, #0b4565 50% 100%),
    radial-gradient(circle at 25% 50%, rgba(255,255,255,.25) 0 25%, transparent 26% 100%);
  background-blend-mode: screen;
}

@media (max-width: 992px){
  .signal-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 576px){
  .signal-grid{ grid-template-columns: 1fr }
}

/* ============ SECTION 14: Crew Craft ============ */
.crew{
  position:relative; padding: clamp(36px, 5vw, 64px) 0;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(20,110,140,.12), transparent 60%);
}
.crew-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:12px;
}
.crew-card{
  background: var(--glass); border:1px solid var(--border); border-radius:22px;
  padding:14px; transition: transform .25s ease, background .25s ease;
}
.crew-card:hover{ transform: translateY(-4px); background: var(--glass-2) }
.mono{
  inline-size:48px; block-size:48px; border-radius:999px; display:grid; place-items:center;
  background: radial-gradient(100% 100% at 30% 20%, #77e3ff 0%, #28afd3 45%, #0b4565 100%);
  color:#041c27; font-weight:800; margin-bottom:8px; box-shadow: var(--shadow-soft);
}
.tags{ display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:.35rem 0 .5rem; list-style:none }
.tags li{
  font-size:.9rem; color:var(--ink-dim);
  padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--glass);
}
.langs{ color:var(--ink-dim) }

@media (max-width: 992px){
  .crew-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 576px){
  .crew-grid{ grid-template-columns: 1fr }
}

/* ============ SECTION 15: Map Ribbon ============ */
.mapline{
  position:relative; padding: clamp(36px, 5vw, 64px) 0;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(60,170,190,.12), transparent 60%);
}
.line-wrap{ margin-top:12px }
.line{ width:100%; height:auto; display:block; overflow:visible }
.line .wake{
  stroke-dasharray: 10 10;
  stroke-dashoffset: 240;
  filter: drop-shadow(0 2px 8px rgba(72,193,231,.35));
  transition: stroke-dashoffset 2.2s ease;
}
.mapline.run .line .wake{ stroke-dashoffset: 0; }
.port{
  fill: #7ae3ff; stroke:#0b4565; stroke-width:2;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.legend{
  display:flex; gap:14px; padding:0; margin:10px 0 0; list-style:none; color:var(--ink-dim);
}
.legend .dot{
  inline-size:10px; block-size:10px; border-radius:999px; display:inline-block; margin-right:6px;
  background: linear-gradient(180deg, #7ae3ff, #2fb9d9);
}

@media (max-width: 576px){
  .legend{ flex-wrap:wrap }
}
/* Base layout for meters */
.meters{ display:grid; gap:6px; }
.meter{ display:grid; grid-template-columns: 150px 1fr; align-items:center; gap:10px; }
.meter span{ color:var(--ink-dim); font-size:.95rem }
.meter i{
  --v:70%;
  height:8px; width:var(--v); display:block; border-radius:999px;
  background: linear-gradient(90deg, #7ae3ff, #2fb9d9);
  box-shadow: 0 2px 8px rgba(72,193,231,.35) inset;
}

/* Utility widths (no inline styles) */
.w-60{ --v:60% } .w-70{ --v:70% } .w-72{ --v:72% } .w-76{ --v:76% }
.w-78{ --v:78% } .w-80{ --v:80% } .w-82{ --v:82% } .w-85{ --v:85% }
.w-88{ --v:88% } .w-90{ --v:90% } .w-92{ --v:92% } .w-95{ --v:95% }

/* адаптив: чутка сужаем подписи на маленьких экранах */
@media (max-width: 576px){
  .meter{ grid-template-columns: 120px 1fr; }
}
/* Base bar visual (no inline) */
.bv{
  --v:70%;
  display:block;
  inline-size: var(--v);
  block-size: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7ae3ff, #2fb9d9);
  box-shadow: 0 2px 8px rgba(72,193,231,.35) inset;
}

/* Layout for pledge rows (label + bar) */
.pledge{
  display:grid;
  grid-template-columns: 180px 1fr;
  align-items:center;
  gap:10px;
  margin: 6px 0;
}
.pledge span{ color: var(--ink-dim); font-size:.95rem; }

/* Utility widths */
.w-15{ --v:15% } .w-35{ --v:35% } .w-40{ --v:40% } .w-60{ --v:60% }
.w-62{ --v:62% } .w-65{ --v:65% } .w-75{ --v:75% } .w-76{ --v:76% }
.w-80{ --v:80% } .w-85{ --v:85% } .w-88{ --v:88% } .w-92{ --v:92% } .w-95{ --v:95% }

@media (max-width: 576px){
  .pledge{ grid-template-columns: 140px 1fr; }
}