/* ===== Hero Coast Section ===== */
.hero-coast{
  position: relative;
  padding: clamp(32px, 4vw, 56px) 0 72px;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(24,195,200,.15), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(166,224,255,.10), transparent 60%);
  overflow: clip;
}

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

.hero-copy h1{
  margin: 0 0 10px; font-size: clamp(28px, 4vw, 44px); line-height:1.15;
}
.hero-copy .lede{ color: var(--ink-100); margin: 0 0 10px; }
.hero-points{ margin: 12px 0 18px; padding-left: 18px; }
.hero-points li{ margin: 6px 0; }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* Gallery with 3 shots */
.hero-gallery{
  display:grid; grid-template-columns: 1fr; gap: 14px;
  align-content:start;
}
.shot{
  margin:0; padding:10px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(15,36,49,.65), rgba(7,16,24,.6));
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow-soft);
  transform-origin: center;
  transition: transform .25s ease;
}
.shot:hover{ transform: translateY(-4px) rotate(-.3deg); }
.shot img{
  display:block; width: 100%; max-width: 350px; height:auto; margin: 0 auto; border-radius: 12px;
  filter: saturate(1.06) contrast(1.02);
}
.shot figcaption{
  color: var(--ink-300); font-size: .9rem; margin-top: 8px; text-align:center;
}

/* Decorative wave */
.wave{
  position:absolute; left:0; right:0; bottom:-1px; height: 80px;
  background:
    radial-gradient(60% 100% at 50% 120%, rgba(99,225,228,.18), transparent 60%),
    linear-gradient(0deg, rgba(10,16,22,1) 0, rgba(10,16,22,0) 100%);
  animation: waveShift 8s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes waveShift{
  from{ transform: translateY(0); }
  to{ transform: translateY(8px); }
}

/* ===== Reveal stagger (optional) ===== */
.hero-copy.reveal.is-visible{ transition-delay: .05s; }
.hero-gallery.reveal.is-visible .shot:nth-child(1){ animation: pop .5s ease .05s both; }
.hero-gallery.reveal.is-visible .shot:nth-child(2){ animation: pop .5s ease .15s both; }
.hero-gallery.reveal.is-visible .shot:nth-child(3){ animation: pop .5s ease .25s both; }
@keyframes pop{ from{ opacity:0; transform: translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }

/* ===== Responsive for all devices ===== */
@media (max-width: 1200px){
  .hero-grid{ grid-template-columns: 1.1fr .9fr; }
}
@media (max-width: 992px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-gallery{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shot img{ max-width: 100%; }
}
@media (max-width: 768px){
  .hero-gallery{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .cta-row .btn{ width:100%; }
}
@media (max-width: 360px){
  .site-header{ height: 60px; }
  .header-inner{ height:60px; }
}
/* ===== S2 — Flow Map ===== */
.flow-map{ padding: clamp(28px,4vw,48px) 0; background: linear-gradient(180deg, rgba(15,36,49,.25), transparent 40%); }
.flow-head h2{ margin:0 0 8px; font-size: clamp(22px, 3.2vw, 32px); }
.sec-lede{ color: var(--ink-100); }

.flow-panel{ position: relative; margin-top: 14px; }
.flow-progress{ position: sticky; top: 64px; height: 6px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; z-index: 5; }
.flow-progress .bar{ display:block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--teal-400), var(--sky-200)); transition: width .15s linear; }

.flow-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.flow-card{
  display:grid; grid-template-rows: auto 1fr; gap: 10px; padding: 14px;
  border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(7,16,24,.7), rgba(7,16,24,.4));
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, border-color .25s ease;
}
.flow-card:hover{ transform: translateY(-3px); border-color: rgba(99,225,228,.35); }

.flow-photo img{ display:block; width:100%; max-width: 350px; height:auto; margin:0 auto; border-radius: 12px; }
.flow-copy h3{ margin: 0 0 6px; font-size: 1.05rem; }

/* ===== S3 — Hook Anatomy ===== */
.hook-anatomy{ padding: clamp(28px,4vw,52px) 0; }
.anatomy-inner{ display:grid; gap: 18px; }
.anatomy-grid{ display:grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 16px; align-items:start; }

.anatomy-legend{
  padding:14px; border:1px dashed rgba(99,225,228,.35); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(24,195,200,.08), rgba(7,16,24,.3));
}
.legend-list{ list-style: none; margin:0 0 10px; padding:0; display:grid; gap:8px; }
.legend-list li{ display:flex; align-items:center; gap:8px; cursor: pointer; padding:6px 8px; border-radius: 10px; transition: background-color .2s ease; }
.legend-list li:hover{ background: rgba(99,225,228,.1); }
.legend-list .dot{ width:10px; height:10px; border-radius:999px; background: var(--teal-300); display:inline-block; }

.anatomy-figure{ margin:0; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.5); box-shadow: var(--shadow-soft); }
.anatomy-figure img{ display:block; width:100%; max-width: 350px; height:auto; margin:0 auto; border-radius:12px; }
.anatomy-figure figcaption{ color: var(--ink-300); font-size:.9rem; margin-top:8px; text-align:center; }

/* highlight state toggled via JS */
.legend-list li.is-active{ outline: 2px solid var(--teal-300); background: rgba(99,225,228,.12); }

/* ===== S4 — Wind Tips (3D flip) ===== */
.wind-tips{ padding: clamp(28px,4vw,54px) 0; background: radial-gradient(800px 400px at 90% -10%, rgba(166,224,255,.08), transparent 60%); }
.wind-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; perspective: 1000px; }
.tip-card{
  position: relative; height: 320px; border-radius: var(--radius-xl); border:1px solid rgba(255,255,255,.06);
  transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1), border-color .25s ease;
  box-shadow: var(--shadow-soft); cursor: pointer; outline: none; background: linear-gradient(180deg, rgba(15,36,49,.6), rgba(7,16,24,.6));
}
.tip-card:hover, .tip-card:focus{ transform: rotateY(180deg); border-color: rgba(99,225,228,.35); }

.tip-face{ position:absolute; inset:0; padding:14px; display:grid; align-content:start; gap:10px; backface-visibility: hidden; border-radius: inherit; }
.tip-front img{ width:100%; max-width: 350px; height:auto; border-radius: 14px; }
.tip-front h3{ margin:6px 0 0; }
.tip-back{ transform: rotateY(180deg); }
.tip-back ul{ margin: 0; padding-left: 18px; }

/* ===== Shared responsive images for new sections ===== */
.flow-photo img, .anatomy-figure img, .tip-front img{ max-width: 350px; }

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .flow-grid{ grid-template-columns: 1fr 1fr; }
  .wind-grid{ grid-template-columns: 1fr 1fr; }
  .anatomy-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 992px){
  .anatomy-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .flow-grid{ grid-template-columns: 1fr; }
  .wind-grid{ grid-template-columns: 1fr; }
  .tip-card{ height: 300px; }
}
@media (max-width: 480px){
  .legend-list li{ padding:8px; }
  .tip-card{ height: 280px; }
}
/* ===== S5 — Time Timeline ===== */
.time-timeline{ padding: clamp(28px,4vw,52px) 0; background: linear-gradient(180deg, rgba(7,16,24,.2), transparent 50%); }
.time-head h2{ margin:0 0 8px; font-size: clamp(22px,3.2vw,32px); }
.time-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.time-track::-webkit-scrollbar{ height: 8px; }
.time-track::-webkit-scrollbar-thumb{ background: rgba(99,225,228,.25); border-radius: 999px; }
.time-stop{
  min-width: min(340px, 86%); scroll-snap-align: start;
  padding: 14px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5)); box-shadow: var(--shadow-soft);
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}
.time-stop:hover{ transform: translateY(-3px); border-color: rgba(99,225,228,.35); }
.time-stop h3{ margin:0 0 6px; }
.phase-note{ color: var(--ink-300); margin: 0 0 8px; }
.time-stop img{ display:block; width:100%; max-width:350px; height:auto; border-radius:12px; }
.tactics{ margin: 10px 0 0; padding-left: 18px; }

/* ===== S6 — Line Lab ===== */
.line-lab{ padding: clamp(28px,4vw,52px) 0; }
.lab-inner{ display:grid; gap:18px; }
.lab-grid{
  display:grid; grid-template-columns: 1fr 1.2fr 1fr; gap:16px; align-items:start;
}
.lab-photo{ margin:0; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.5); }
.lab-photo img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.lab-photo figcaption{ color: var(--ink-300); font-size:.9rem; text-align:center; margin-top:8px; }

.lab-metrics{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.metric{
  padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(24,195,200,.06), rgba(7,16,24,.45));
}
.metric h3{ margin:0 0 6px; font-size:1.05rem; }
.metric .meta{ margin:0 0 10px; color: var(--ink-300); }
.meter{
  position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); overflow:hidden;
}
.meter .fill{
  position:absolute; inset:0 100% 0 0; background: linear-gradient(90deg, var(--teal-400), var(--sky-200));
  transform: translateZ(0);
}
.metric .desc{ margin:8px 0 0; color: var(--ink-100); }

/* ===== S7 — Micro Spots Map ===== */
.micro-spots{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 10% -10%, rgba(24,195,200,.08), transparent 60%); }
.spots-layout{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items:start; }
.map-board{ position: relative; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.5); padding:10px; }
.map-img{ display:block; width:100%; max-width:350px; height:auto; border-radius:12px; margin:0 auto; }

.pin{
  position:absolute; width:14px; height:14px; border-radius:999px; border:2px solid #fff; background: var(--teal-400);
  box-shadow: 0 0 0 0 rgba(24,195,200,.35); animation: pulse 2s ease-out infinite; cursor: pointer;
  transform: translate(-50%, -50%);
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(24,195,200,.35); }
  70%{ box-shadow: 0 0 0 16px rgba(24,195,200,0); }
  100%{ box-shadow: 0 0 0 0 rgba(24,195,200,0); }
}

.spot-panel{
  padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(15,36,49,.5), rgba(7,16,24,.5));
}
.spot{ display:none; }
.spot.is-active{ display:block; }
.spot h3{ margin:0 0 6px; }

.spot-gallery{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px;
}
.spot-gallery figure{ margin:0; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.5); }
.spot-gallery img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.spot-gallery figcaption{ color: var(--ink-300); font-size:.9rem; text-align:center; margin-top:8px; }

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .lab-grid{ grid-template-columns: 1fr; }
  .lab-metrics{ grid-template-columns: 1fr 1fr 1fr; }
  .spots-layout{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .lab-metrics{ grid-template-columns: 1fr; }
  .spot-gallery{ grid-template-columns: 1fr; }
}
/* ===== S8 — Coast Acoustics ===== */
.coast-acoustics{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 85% -10%, rgba(166,224,255,.08), transparent 60%); }
.acoustic-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.acoustic-card{
  display:grid; grid-template-columns: 1fr; gap:10px; padding:14px;
  border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5)); box-shadow: var(--shadow-soft);
  transition: transform .25s ease, border-color .25s ease;
}
.acoustic-card:hover{ transform: translateY(-3px); border-color: rgba(99,225,228,.35); }
.acoustic-photo img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.acoustic-photo figcaption{ color: var(--ink-300); font-size:.9rem; text-align:center; margin-top:8px; }
.acoustic-copy h3{ margin:0 0 6px; }
.eq-bars{ display:grid; grid-template-columns: repeat(12, 1fr); gap:4px; align-items:end; height: 44px; margin-top:8px; opacity:.7; }
.eq-bars .bar{ display:block; height: 8px; border-radius:6px; background: linear-gradient(180deg, var(--teal-400), var(--sky-200)); transform-origin: bottom; }
.eq-bars.is-on .bar{ animation: eqPulse 1s ease-in-out infinite alternate; }
.eq-bars.is-on .bar:nth-child(odd){ animation-duration: 1.35s; }
.eq-bars.is-on .bar:nth-child(3n){ animation-duration: 1.1s; }
@keyframes eqPulse{ from{ transform: scaleY(.25); } to{ transform: scaleY(1); } }

/* ===== S9 — Cast Simulation ===== */
.cast-sim{ padding: clamp(28px,4vw,56px) 0; }
.sim-inner{ display:grid; gap:18px; }
.sim-layout{ display:grid; grid-template-columns: 1fr 1.1fr 1fr; gap:16px; align-items:start; }
.sim-legend{ padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.5); }
.mode-buttons{ display:flex; gap:8px; flex-wrap:wrap; }
.mode-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.08);
  color:#e6edf6; cursor:pointer; transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.mode-btn:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); }
.mode-btn.is-active{ background: linear-gradient(135deg, var(--teal-400), var(--sky-200)); color:#06202a; border-color: transparent; }
.sim-tips{ margin:10px 0; padding-left:18px; }
.sim-photo{ margin:10px 0 0; }
.sim-photo img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.sim-photo figcaption{ color:var(--ink-300); font-size:.9rem; text-align:center; margin-top:6px; }

.sim-stage{
  padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5)); text-align:center;
}
.cast-svg{ width:100%; max-width:350px; height:auto; }
/* ARC line — чистое CSS без url(#...) */
#arc{
  fill: none;
  /* stroke задаётся в SVG (url(#arcGrad)), здесь не переопределяем */
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* Фолбэк-цвет, если градиента нет (по желанию) */
#arc.is-fallback{
  stroke: rgba(99,225,228,.9);
}

#lure{ fill: var(--sky-200); }
.sim-cta{ margin-top:10px; }
.fire-btn{
  padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.1); color:#e6edf6;
  cursor:pointer; transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.fire-btn:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); background: rgba(24,195,200,.16); }

/* ===== S10 — Local Masters ===== */
.local-masters{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 10% -10%, rgba(24,195,200,.08), transparent 60%); }
.masters-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.master-card{
  position:relative; overflow:hidden; border-radius: var(--radius-xl); border:1px solid rgba(255,255,255,.06);
  background: rgba(7,16,24,.5); box-shadow: var(--shadow-soft); transition: transform .25s ease, border-color .25s ease;
}
.master-card:hover{ transform: translateY(-4px); border-color: rgba(99,225,228,.35); }
.master-photo img{ width:100%; max-width:350px; height:auto; display:block; margin:0 auto; border-radius: 20px; }
.quote{
  position:absolute; inset:auto 12px 12px 12px; margin:0; padding:12px 14px; border-radius:14px;
  background: linear-gradient(180deg, rgba(7,16,24,.2), rgba(7,16,24,.75)); color:#e6edf6; transform: translateY(8px); opacity:.0;
  transition: opacity .25s ease, transform .25s ease;
}
.master-card:hover .quote{ opacity:1; transform:none; }
.quote p{ margin:0 0 6px; }
.quote cite{ color: var(--ink-300); font-style: normal; }

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .acoustic-grid{ grid-template-columns: 1fr 1fr; }
  .sim-layout{ grid-template-columns: 1fr; }
  .masters-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px){
  .acoustic-grid{ grid-template-columns: 1fr; }
  .masters-grid{ grid-template-columns: 1fr; }
}
/* ===== S11 — Action Guide ===== */
.action-guide{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 85% -10%, rgba(166,224,255,.07), transparent 60%); }
.action-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.pattern-card{
  padding:14px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5)); box-shadow: var(--shadow-soft);
}
.pattern-card h3{ margin:0 0 6px; }
.pattern-track{
  position: relative; height: 44px; display:grid; grid-template-columns: repeat(6, 1fr); gap:6px; margin-top:8px;
}
.pattern-track .seg{
  height: 100%; border-radius: 10px; background: rgba(99,225,228,.18);
  transform-origin: center; opacity:.85;
}
.pattern-card[data-mode="jerk"] .seg{ animation: jerkBlink 1.1s ease-in-out infinite alternate; }
.pattern-card[data-mode="liftdrop"] .seg{ animation: liftPulse 1.6s ease-in-out infinite; }
.pattern-card[data-mode="steady"] .seg{ animation: steadyFlow 2s linear infinite; }
.pattern-track .ghost-lure{
  position:absolute; left:0; top:50%; width:10px; height:10px; border-radius:999px; background: var(--sky-200);
  transform: translate(-50%, -50%); filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
  opacity:0;
}
.pattern-card.reveal.is-visible .ghost-lure{ animation: lureRun 2s ease-in-out .2s forwards; }

@keyframes jerkBlink{ from{ transform: scaleY(.5); } to{ transform: scaleY(1); } }
@keyframes liftPulse{ 0%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } 100%{ transform: translateY(0); } }
@keyframes steadyFlow{ from{ transform: translateX(0); } to{ transform: translateX(6px); } }
@keyframes lureRun{ from{ left: 0%; opacity:1; } to{ left: 100%; opacity:1; } }

.action-photos{
  margin-top:16px; display:grid; grid-template-columns: repeat(2, 1fr); gap:16px;
}
.action-photos figure{ margin:0; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.5); }
.action-photos img{ display:block; width:100%; max-width:350px; height:auto; border-radius:12px; margin:0 auto; }
.action-photos figcaption{ color: var(--ink-300); font-size:.9rem; text-align:center; margin-top:8px; }

/* ===== S12 — Balance Lab ===== */
.balance-lab{ padding: clamp(28px,4vw,56px) 0; }
.balance-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:16px; align-items:start; }
.balance-controls{
  padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg);
  background: rgba(7,16,24,.5);
}
.bal-buttons{ display:flex; gap:8px; flex-wrap:wrap; }
.bal-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.08);
  color:#e6edf6; cursor:pointer; transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.bal-btn:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); }
.bal-btn.is-active{ background: linear-gradient(135deg, var(--teal-400), var(--sky-200)); color:#06202a; border-color: transparent; }
.bal-tips{ margin:10px 0 0; padding-left:18px; }

.balance-board{
  padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5));
}
.beam{
  position: relative; height: 14px; border-radius: 999px; background: rgba(255,255,255,.08);
  overflow:hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.cm-dot{
  position:absolute; top:50%; left: 35%; width:14px; height:14px; border-radius:999px; background: var(--teal-300);
  transform: translate(-50%, -50%); transition: left .35s ease;
}
.beam-note{ margin:8px 0 0; color: var(--ink-300); }
.cm-readout{ color: var(--sky-200); }

.balance-photo{ margin:0; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.5); }
.balance-photo img{ width:100%; max-width:350px; height:auto; display:block; margin:0 auto; border-radius:12px; }
.balance-photo figcaption{ color: var(--ink-300); font-size:.9rem; text-align:center; margin-top:8px; }

/* ===== S13 — Coast Atlas ===== */
.coast-atlas{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 10% -10%, rgba(24,195,200,.08), transparent 60%); }
.atlas-layout{ display:grid; grid-template-columns: 1.1fr 1fr; gap:18px; align-items:start; }
.atlas-strip{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
}
.spot-card{
  min-width: 220px; scroll-snap-align: start; text-align:left; padding:12px; border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5));
  cursor:pointer; color:#e6edf6; transition: transform .25s ease, border-color .25s ease;
}
.spot-card:hover{ transform: translateY(-2px); border-color: rgba(99,225,228,.35); }
.spot-card.is-active{ outline:2px solid var(--teal-300); }

.atlas-panel{
  padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5));
}
.atlas-photo{ margin:0 0 10px; }
.atlas-photo img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.atlas-photo figcaption{ color: var(--ink-300); font-size:.9rem; text-align:center; margin-top:6px; }

.atlas-spot{ display:none; }
.atlas-spot.is-active{ display:block; }
.atlas-spot h3{ margin: 0 0 6px; }

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .action-grid{ grid-template-columns: 1fr 1fr; }
  .balance-grid{ grid-template-columns: 1fr 1fr; }
  .atlas-layout{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .action-photos{ grid-template-columns: 1fr; }
}
/* ===== S14 — Pro Setups ===== */
.pro-setups{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 85% -10%, rgba(166,224,255,.07), transparent 60%); }
.setups-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.setup-card{
  padding:14px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(15,36,49,.6), rgba(7,16,24,.55));
  box-shadow: var(--shadow-soft); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.setup-card:hover{ transform: translateY(-3px); border-color: rgba(99,225,228,.35); }
.setup-card.is-active{ outline: 2px solid var(--teal-300); }
.setup-photo img{ width:100%; max-width:350px; height:auto; border-radius:16px; display:block; margin:0 auto; }
.setup-spec{ margin:8px 0 0; padding-left:18px; }
.setup-note{ margin:8px 0 0; color: var(--ink-100); }

.setup-board{
  margin-top:16px; padding:14px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg);
  background: rgba(7,16,24,.5);
}
.meters{ display:grid; gap:10px; }
.meter-row{ display:grid; grid-template-columns: 120px 1fr auto; gap:8px; align-items:center; }
.meter{ position: relative; height:10px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; }
.meter .fill{ position:absolute; inset:0 100% 0 0; background: linear-gradient(90deg, var(--teal-400), var(--sky-200)); }
.board-note{ color: var(--ink-300); margin:10px 0 0; }

/* ===== S15 — Common Mistakes ===== */
.common-mistakes{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 10% -10%, rgba(24,195,200,.08), transparent 60%); }
.mistakes-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.mistake-card{ border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.5); }
.mistake-toggle{
  width:100%; text-align:left; padding:12px 14px; background: transparent; border:0; color:#e6edf6; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.06); font-weight:600; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: color .2s ease, background-color .2s ease;
}
.mistake-toggle[aria-expanded="true"]{ color: var(--teal-300); background: rgba(24,195,200,.06); }
.mistake-body{ padding:10px 14px; }
.mistake-body ul{ margin:0; padding-left:18px; }

.mistakes-photos{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:16px;
}
.mistake-photo{ margin:0; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.5); }
.mistake-photo img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.mistake-photo figcaption{ color: var(--ink-300); font-size:.9rem; text-align:center; margin-top:8px; }

.mistakes-cta{ margin-top:16px; display:flex; justify-content:center; }

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .setups-grid{ grid-template-columns: 1fr 1fr; }
  .mistakes-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px){
  .setups-grid{ grid-template-columns: 1fr; }
  .mistakes-grid{ grid-template-columns: 1fr; }
  .mistakes-photos{ grid-template-columns: 1fr; }
}
/* ===== Contact Form (TR) ===== */
.contact-form{
  padding: clamp(28px,4vw,56px) 0;
  background: radial-gradient(900px 420px at 10% -10%, rgba(24,195,200,.08), transparent 60%);
}
.contact-header h2{ margin:0 0 8px; font-size: clamp(22px,3.2vw,32px); }
.contact-header p{ color: var(--ink-100); margin: 0 0 14px; }

.form-wrapper{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
  padding:14px;
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5));
  box-shadow: var(--shadow-soft);
}

.form-row{ display:grid; gap:6px; }
.form-row--full{ grid-column: 1 / -1; }

.form-wrapper label{
  font-weight:600; color:#e6edf6;
}
.form-wrapper input[type="text"],
.form-wrapper input[type="email"],
.form-wrapper textarea{
  width:100%;
  color:#e6edf6;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 12px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form-wrapper textarea{ min-height: 120px; resize: vertical; }

.form-wrapper input::placeholder,
.form-wrapper textarea::placeholder{ color: var(--ink-300); }

.form-wrapper input:focus,
.form-wrapper textarea:focus{
  outline: none;
  border-color: rgba(99,225,228,.45);
  box-shadow: 0 0 0 3px rgba(99,225,228,.18);
  background: rgba(255,255,255,.06);
}

.form-checkbox{
  display:flex; align-items:center; gap:10px;
  padding-top:6px;
}
.form-checkbox input{
  width:18px; height:18px; accent-color:#18c3c8; /* поддерживается в современных браузерах */
}
.form-checkbox a{ color: var(--teal-300); text-decoration: underline; }
.form-checkbox a:hover{ color: var(--sky-200); }

.form-actions{
  grid-column: 1 / -1;
  display:flex; justify-content:flex-end;
}
.cta-button{
  padding:12px 16px; border-radius:14px; border:1px solid transparent;
  background: linear-gradient(135deg, var(--teal-400), var(--sky-200));
  color:#06202a; font-weight:700; cursor:pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.cta-button:hover{ transform: translateY(-2px); }
.cta-button:active{ transform: translateY(0); filter: brightness(.96); }

/* Reveal anim для формы */
.animate-on-scroll{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.animate-on-scroll.is-visible{ opacity:1; transform:none; }

/* Responsive */
@media (max-width: 992px){
  .form-wrapper{ grid-template-columns: 1fr; }
  .form-actions{ justify-content:stretch; }
  .cta-button{ width:100%; }
}