/* =========================================================
   42 ГРЕБКА К МЕЧТЕ — стили лендинга
   Mobile-first. Палитра снята с макета плаката.
   ========================================================= */

/* ---------- Шрифты (самохостинг вместо Google Fonts) ----------
   Файлы — переменные (variable), один файл покрывает диапазон
   начертаний. Разбиты на кириллицу/латиницу через unicode-range,
   браузер скачивает только нужный при первом заходе. */
@font-face{
  font-family:"Oswald";font-style:normal;font-weight:500 700;font-display:swap;
  src:url("assets/fonts/oswald-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Oswald";font-style:normal;font-weight:500 700;font-display:swap;
  src:url("assets/fonts/oswald-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Rubik";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("assets/fonts/rubik-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Rubik";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("assets/fonts/rubik-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Глубина воды */
  --deep-1:#041a33;
  --deep-2:#062442;
  --deep-3:#0b3a6b;
  --deep-4:#1256a0;
  --deep-5:#1a72c4;

  /* Золото / пергамент */
  --gold:#e8c36a;
  --gold-2:#c9992f;
  --gold-3:#8f6a1e;
  --parch:#f7e9c7;
  --parch-2:#ecd9ac;

  /* Красный (номера клеток) */
  --red:#c8342e;
  --red-2:#9d211d;

  --ink:#0d2b4a;
  --white:#f4f8fd;
  --muted:#a9c6e4;

  --r-s:10px;
  --r-m:16px;
  --r-l:22px;

  --wrap:1160px;
  --pad:clamp(16px,4vw,28px);

  --font-h:"Oswald","Arial Narrow",Impact,system-ui,sans-serif;
  --font-b:"Rubik","Segoe UI",Roboto,Arial,sans-serif;

  --shadow:0 14px 40px rgba(2,14,30,.45);
  --shadow-s:0 6px 18px rgba(2,14,30,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.62;
  color:var(--white);
  background:var(--deep-2);
  background-image:
    radial-gradient(120% 70% at 50% -10%, #1f7ac2 0%, rgba(31,122,194,0) 55%),
    linear-gradient(180deg,#0d4a86 0%,#093566 32%,#062a4e 62%,#04203c 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
button{font:inherit}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:820px}

/* ---------- Типографика ---------- */
.h1{
  font-family:var(--font-h);
  font-weight:700;
  font-size:clamp(2.6rem,11vw,5.4rem);
  line-height:.94;
  letter-spacing:.01em;
  margin:.1em 0 .35em;
  color:var(--parch);
  text-transform:uppercase;
  text-shadow:0 4px 0 rgba(4,22,44,.55), 0 14px 34px rgba(0,0,0,.4);
}
.h1 .excl{color:var(--gold)}

.h2{
  font-family:var(--font-h);
  font-weight:600;
  font-size:clamp(1.7rem,5.4vw,2.7rem);
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.015em;
  color:var(--parch);
  text-align:center;
  margin:0 0 .5em;
  text-shadow:0 3px 0 rgba(4,22,44,.4);
}
.h2--left{text-align:left}

.sec h3{
  font-family:var(--font-h);
  font-weight:600;
  font-size:1.16rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 .45em;
  line-height:1.2;
}

.sec__lead{
  max-width:64ch;margin:0 auto 2.4em;text-align:center;
  color:var(--muted);font-size:1.03rem;
}
.sec__lead--left{margin-inline:0;text-align:left}

.eyebrow{
  display:inline-block;
  font-family:var(--font-h);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  font-size:.78rem;color:var(--gold);
  border:1px solid rgba(232,195,106,.42);
  border-radius:100px;padding:.4em 1.1em;
}

.ribbon{
  display:inline-block;
  background:linear-gradient(180deg,var(--deep-5),var(--deep-4));
  border:1px solid rgba(232,195,106,.5);
  color:var(--parch);
  font-family:var(--font-h);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  font-size:clamp(.75rem,2.6vw,.92rem);
  padding:.45em 1.2em;border-radius:6px;
  box-shadow:var(--shadow-s);
  margin-bottom:1.4em;
}

.note{
  max-width:60ch;margin:2em auto 0;text-align:center;
  font-size:.92rem;color:var(--muted);
  background:rgba(4,22,44,.4);
  border:1px dashed rgba(232,195,106,.35);
  border-radius:var(--r-m);padding:1em 1.2em;
}
.note b{color:var(--gold)}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-h);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  font-size:.95rem;line-height:1;
  padding:.95em 1.6em;border:0;border-radius:100px;
  cursor:pointer;text-align:center;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.btn--gold{
  background:linear-gradient(180deg,#f3d68d 0%,var(--gold) 45%,var(--gold-2) 100%);
  color:#4a3208;
  box-shadow:0 6px 0 var(--gold-3), var(--shadow-s);
}
.btn--gold:hover{box-shadow:0 8px 0 var(--gold-3), var(--shadow)}

.btn--red{
  background:linear-gradient(180deg,#e15048 0%,var(--red) 50%,var(--red-2) 100%);
  color:#fff;
  box-shadow:0 6px 0 #6e1512, var(--shadow-s);
}
.btn--red:hover{box-shadow:0 8px 0 #6e1512, var(--shadow)}

.btn--ghost{
  background:rgba(255,255,255,.06);
  color:var(--parch);
  border:1.5px solid rgba(232,195,106,.5);
  backdrop-filter:blur(4px);
}
.btn--ghost:hover{background:rgba(255,255,255,.12)}

.btn--lg{padding:1.05em 1.9em;font-size:1.02rem}
.btn--sm{padding:.7em 1.15em;font-size:.82rem}
.btn--full{width:100%}

/* ---------- Пузыри (фон) ---------- */
.bubbles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bub{
  position:absolute;bottom:-12vh;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(160,215,255,.22) 45%, rgba(120,190,255,.06) 70%);
  border:1px solid rgba(255,255,255,.28);
  animation:rise linear infinite;
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0) scale(.85);opacity:0}
  10%{opacity:.65}
  90%{opacity:.5}
  100%{transform:translateY(-118vh) translateX(var(--dx,14px)) scale(1.05);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .bub{animation:none;display:none}
  html{scroll-behavior:auto}
}

/* ---------- Шапка ---------- */
.header{
  position:sticky;top:0;z-index:60;
  background:rgba(6,32,60,.72);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(232,195,106,.22);
  transition:background .25s ease, box-shadow .25s ease;
}
.header.is-stuck{background:rgba(5,26,50,.94);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.header__in{position:relative;z-index:2;display:flex;align-items:center;gap:14px;min-height:64px}

/* морская анимация в шапке */
.header__sea{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.header__sea .hbub{
  position:absolute;left:var(--l);bottom:-10px;width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.7),rgba(160,215,255,.22) 50%,rgba(120,190,255,.05) 72%);
  border:1px solid rgba(255,255,255,.26);
  animation:hbubRise var(--dur) linear infinite;animation-delay:var(--d);
}
@keyframes hbubRise{
  0%{transform:translateY(0) scale(.6);opacity:0}
  15%{opacity:.6}
  80%{opacity:.35}
  100%{transform:translateY(-86px) translateX(10px) scale(1);opacity:0}
}
.hfish{position:absolute;width:26px;height:auto;opacity:.35;left:0}
.hfish--1{color:#e8c36a;top:12px;animation:hswimR 34s linear infinite}
.hfish--2{color:#8ad6ff;top:34px;width:18px;opacity:.28;animation:hswimL 46s linear infinite;animation-delay:-20s}
@keyframes hswimR{
  0%{transform:translateX(-60px) translateY(0)}
  50%{transform:translateX(50vw) translateY(6px)}
  100%{transform:translateX(calc(100vw + 60px)) translateY(0)}
}
@keyframes hswimL{
  0%{transform:translateX(calc(100vw + 60px)) scaleX(-1) translateY(0)}
  50%{transform:translateX(50vw) scaleX(-1) translateY(-6px)}
  100%{transform:translateX(-60px) scaleX(-1) translateY(0)}
}
.hwave{position:absolute;left:0;bottom:-1px;width:200%;height:14px;animation:hwaveSlide 18s linear infinite}
@keyframes hwaveSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .header__sea{display:none}
}

.brand{display:flex;align-items:center;gap:10px;color:var(--parch);flex:0 0 auto}
.brand__logo{width:34px;height:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.brand__txt{
  font-family:var(--font-h);font-weight:500;text-transform:uppercase;
  font-size:.72rem;line-height:1.05;letter-spacing:.06em;color:var(--muted);
}
.brand__txt b{color:var(--gold);font-weight:700;font-size:.86rem}

.nav{display:none;margin-left:auto;gap:22px}
.nav a{
  font-family:var(--font-h);font-weight:500;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.05em;color:var(--parch);
  padding:.35em 0;border-bottom:2px solid transparent;transition:.18s;
}
.nav a:hover,.nav a.is-active{color:var(--gold);border-bottom-color:var(--gold)}
.header__cta{display:none}

.burger{
  margin-left:auto;width:42px;height:38px;border:0;border-radius:10px;
  background:rgba(255,255,255,.08);display:grid;place-content:center;gap:5px;cursor:pointer;
}
.burger span{display:block;width:20px;height:2px;background:var(--parch);border-radius:2px;transition:.22s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:899px){
  .nav.is-open{
    display:flex;flex-direction:column;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:rgba(5,26,50,.98);
    border-bottom:1px solid rgba(232,195,106,.25);
    padding:8px var(--pad) 16px;
  }
  .nav.is-open a{padding:.85em 0;border-bottom:1px solid rgba(255,255,255,.07)}
}
@media (min-width:900px){
  .nav{display:flex}
  .burger{display:none}
  .header__cta{display:inline-flex;margin-left:6px}
}

/* ---------- HERO ---------- */
.hero{position:relative;z-index:1;padding:clamp(28px,7vw,64px) 0 clamp(40px,8vw,80px);overflow:hidden}
.hero__bg{
  position:absolute;inset:0;z-index:-1;
  background:url("assets/hero-bg.jpg") center/cover no-repeat;
  opacity:.28;
  mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%);
}
.hero__in{display:grid;gap:clamp(28px,6vw,48px);align-items:center}
.hero__text{text-align:center}
.hero__lead{font-size:clamp(1rem,3.4vw,1.14rem);color:#d8e8fa;max-width:56ch;margin:0 auto 1.7em}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:1.8em}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;justify-content:center;padding:0;margin:0}
.chip{
  font-size:.82rem;color:var(--parch);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(232,195,106,.3);
  border-radius:100px;padding:.45em .95em;
}

.hero__poster{margin:0;text-align:center}
.hero__poster img{
  margin:0 auto;border-radius:var(--r-m);
  border:3px solid var(--gold-2);
  box-shadow:var(--shadow), 0 0 0 6px rgba(232,195,106,.12);
  max-width:min(100%,430px);
  transform:rotate(-1.2deg);
}
.hero__poster figcaption{margin-top:1em;font-size:.86rem;color:var(--muted)}

@media (min-width:900px){
  .hero__in{grid-template-columns:1.05fr .95fr}
  .hero__text{text-align:left}
  .hero__lead{margin-inline:0}
  .hero__btns,.chips{justify-content:flex-start}
  .hero__poster img{max-width:100%}
}

/* ---------- Общие секции ---------- */
.sec{position:relative;z-index:1;padding:clamp(48px,9vw,92px) 0}
.sec--problem{background:rgba(3,18,36,.4)}
.sec--gallery{background:rgba(3,18,36,.4)}
.sec--faq{background:rgba(3,18,36,.4)}

.grid{display:grid;gap:18px}
@media (min-width:640px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}

/* Золотая рамка «как у клеток плаката» */
.framed{
  background:linear-gradient(180deg,rgba(18,60,108,.86),rgba(8,36,68,.9));
  border:2px solid var(--gold-2);
  border-radius:var(--r-l);
  box-shadow:inset 0 0 0 1px rgba(232,195,106,.25), var(--shadow-s);
}

/* ---------- Проблема ---------- */
.pcard{
  background:linear-gradient(180deg,rgba(18,60,108,.86),rgba(8,36,68,.9));
  border:2px solid var(--gold-2);
  border-radius:var(--r-l);
  box-shadow:inset 0 0 0 1px rgba(232,195,106,.25), var(--shadow-s);
  padding:26px 22px;
}
.pcard__ico{width:46px;height:46px;color:var(--gold);margin-bottom:14px}
.pcard__ico svg{width:100%;height:100%}
.pcard p{margin:0;color:#cfe2f5;font-size:.97rem}

/* ---------- Шаги ---------- */
.steps{list-style:none;margin:0 0 clamp(36px,6vw,56px);padding:0;display:grid;gap:18px;counter-reset:s}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.steps{grid-template-columns:repeat(4,1fr)}}

.step{
  position:relative;
  background:linear-gradient(180deg,rgba(18,60,108,.86),rgba(8,36,68,.92));
  border:2px solid var(--gold-2);
  border-radius:var(--r-l);
  box-shadow:inset 0 0 0 1px rgba(232,195,106,.25), var(--shadow-s);
  padding:30px 20px 24px;
}
.step__num{
  position:absolute;top:-16px;left:20px;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#e6564d,var(--red) 55%,var(--red-2));
  border:2px solid var(--gold);
  color:#fff;font-family:var(--font-h);font-weight:700;font-size:1.1rem;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.step__ico{width:54px;height:54px;color:var(--gold);margin:6px 0 14px}
.step__ico svg{width:100%;height:100%}
.step p{margin:0;color:#cfe2f5;font-size:.95rem}

/* стрелка между шагами — как на плакате */
@media (min-width:1040px){
  .step:not(:last-child)::after{
    content:"";position:absolute;right:-14px;top:50%;
    width:0;height:0;transform:translateY(-50%);
    border:8px solid transparent;border-left-color:var(--gold-2);
  }
}

.openposter{margin:0;text-align:center}
.openposter img{
  margin:0 auto;max-width:min(100%,520px);
  border-radius:var(--r-m);border:3px solid var(--gold-2);
  box-shadow:var(--shadow), 0 0 0 6px rgba(232,195,106,.12);
}
.openposter figcaption{margin-top:1em;font-size:.88rem;color:var(--muted);max-width:52ch;margin-inline:auto}
.openposter__note{display:block;margin-top:.5em;font-size:.83rem;color:var(--gold);opacity:.9}

/* ---------- Преимущества ---------- */
.bcard{
  background:linear-gradient(180deg,rgba(18,60,108,.8),rgba(8,36,68,.88));
  border:2px solid rgba(232,195,106,.55);
  border-radius:var(--r-l);
  padding:26px 22px;
  box-shadow:var(--shadow-s);
  transition:transform .2s ease, border-color .2s ease;
}
.bcard:hover{transform:translateY(-4px);border-color:var(--gold)}
.bcard__ico{width:46px;height:46px;color:var(--gold);margin-bottom:14px}
.bcard__ico svg{width:100%;height:100%}
.bcard p{margin:0;color:#cfe2f5;font-size:.95rem}

/* ---------- Галерея клеток ---------- */
/* 4 клетки: 2×2 на телефоне, в один ряд на десктопе */
.gallery{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.gallery{grid-template-columns:repeat(4,1fr)}}

.cell{margin:0;text-align:center}
.cell img{
  border-radius:14px;
  border:3px solid var(--gold-2);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.15), var(--shadow-s);
  transition:transform .22s ease, box-shadow .22s ease;
  background:var(--deep-3);
}
.cell:hover img{transform:translateY(-5px) scale(1.02);box-shadow:0 16px 32px rgba(0,0,0,.5)}
.cell figcaption{
  margin-top:.7em;font-family:var(--font-h);font-weight:500;
  text-transform:uppercase;letter-spacing:.05em;
  font-size:.76rem;color:var(--gold);
}

/* ---------- Два варианта ---------- */
.plans{display:grid;gap:22px}
@media (min-width:900px){.plans{grid-template-columns:repeat(2,1fr);align-items:stretch}}

.plan{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(20,66,118,.9),rgba(7,32,60,.94));
  border:3px solid var(--gold-2);
  border-radius:var(--r-l);
  box-shadow:inset 0 0 0 2px rgba(232,195,106,.2), var(--shadow);
  padding:clamp(24px,4vw,34px);
}
.plan--team{border-color:var(--red);box-shadow:inset 0 0 0 2px rgba(200,52,46,.25), var(--shadow)}

.plan__head{margin-bottom:14px}
.plan__tag{
  display:inline-block;
  font-family:var(--font-h);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--gold);color:#4a3208;
  padding:.35em .9em;border-radius:100px;margin-bottom:.9em;
}
.plan__tag--red{background:var(--red);color:#fff}
.plan h3{font-size:1.5rem;color:var(--parch);margin:0}

.plan__price{
  font-family:var(--font-h);font-weight:700;
  color:var(--gold);line-height:1;margin:.15em 0 .9em;
}
.plan__price b{font-size:clamp(2.4rem,8vw,3.2rem)}
.plan__price span{font-size:1.6rem}
.plan__price--req{
  font-size:clamp(1.25rem,4.6vw,1.6rem);
  color:#ffb9b4;text-transform:uppercase;letter-spacing:.03em;
  padding:.35em 0;
}

.plan__list{list-style:none;margin:0 0 1.6em;padding:0;flex:1}
.plan__list li{position:relative;padding-left:1.7em;margin-bottom:.6em;color:#cfe2f5;font-size:.96rem}
.plan__list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:10px;height:10px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px rgba(232,195,106,.2);
}
.plan--team .plan__list li::before{background:var(--red);box-shadow:0 0 0 3px rgba(200,52,46,.22)}
.plan__hint{margin:.9em 0 0;font-size:.85rem;color:var(--muted);text-align:center}

/* ---------- Отзывы ---------- */
.review{
  margin:0;
  background:linear-gradient(180deg,var(--parch) 0%,var(--parch-2) 100%);
  color:var(--ink);
  border:2px solid var(--gold-3);
  border-radius:var(--r-l);
  padding:26px 24px;
  box-shadow:var(--shadow-s);
  position:relative;
}
.review::before{
  content:"“";position:absolute;top:-6px;left:16px;
  font-family:Georgia,serif;font-size:4.6rem;line-height:1;
  color:rgba(143,106,30,.28);
}
.review blockquote{margin:0 0 1.1em;font-size:.98rem;line-height:1.6;position:relative}
.review figcaption{display:flex;flex-direction:column;border-top:1px solid rgba(143,106,30,.35);padding-top:.9em}
.review figcaption b{font-family:var(--font-h);font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#6b4d13}
.review figcaption span{font-size:.85rem;color:#5c6b7d}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px}
.faq__i{
  background:linear-gradient(180deg,rgba(18,60,108,.8),rgba(8,36,68,.88));
  border:2px solid rgba(232,195,106,.45);
  border-radius:var(--r-m);
  overflow:hidden;
}
.faq__i[open]{border-color:var(--gold)}
.faq__i summary{
  cursor:pointer;list-style:none;
  padding:1.05em 3em 1.05em 1.2em;
  font-family:var(--font-h);font-weight:500;
  font-size:1.02rem;color:var(--parch);
  position:relative;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{
  content:"";position:absolute;right:1.2em;top:50%;
  width:10px;height:10px;margin-top:-7px;
  border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .22s ease;
}
.faq__i[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq__i summary:hover{color:var(--gold)}
.faq__a{padding:0 1.2em 1.2em;color:#cfe2f5;font-size:.96rem}
.faq__a p{margin:0}

/* ---------- Форма и контакты ---------- */
.order__in{display:grid;gap:26px}
@media (min-width:980px){.order__in{grid-template-columns:1.25fr .75fr;align-items:start}}

.order__form{
  background:linear-gradient(180deg,rgba(20,66,118,.9),rgba(7,32,60,.94));
  border:3px solid var(--gold-2);
  border-radius:var(--r-l);
  box-shadow:inset 0 0 0 2px rgba(232,195,106,.18), var(--shadow);
  padding:clamp(24px,4vw,38px);
}

.form{display:grid;gap:16px}
.field{display:grid;gap:6px}
/* display:grid у .field перебивает [hidden]{display:none} браузера —
   без этой строки поле «команда/школа» видно всегда */
.field[hidden]{display:none}
.field label,.check span{font-size:.9rem;font-weight:500;color:var(--parch)}
.req{color:var(--red);font-weight:700}

.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.98rem;
  color:var(--ink);background:var(--parch);
  border:2px solid var(--gold-3);border-radius:12px;
  padding:.8em .95em;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field textarea{resize:vertical;min-height:88px}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238f6a1e' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 1em center;background-size:12px;
  padding-right:2.6em;cursor:pointer;
}
.field input::placeholder,.field textarea::placeholder{color:#8b7a55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(232,195,106,.25);
}
.field.is-invalid input,.field.is-invalid select{border-color:var(--red);box-shadow:0 0 0 4px rgba(200,52,46,.2)}

.err{display:none;color:#ffb0ab;font-size:.82rem}
.field.is-invalid .err,.err.is-shown{display:block}
.err--check{margin-top:-8px}

.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-top:2px}
.check input{
  flex:0 0 auto;width:20px;height:20px;margin-top:2px;
  accent-color:var(--gold-2);cursor:pointer;
}
.check span{font-size:.86rem;color:var(--muted);line-height:1.45}

.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.form__status{margin:.2em 0 0;font-size:.92rem;text-align:center;min-height:1.2em}
.form__status.is-ok{color:#8be3a8}
.form__status.is-err{color:#ffb0ab}
.form__status.is-warn{color:var(--gold)}
#submitBtn[disabled]{opacity:.6;cursor:progress;transform:none}

/* Пергамент контактов */
.parchment{
  background:
    radial-gradient(120% 100% at 50% 0%, #fdf3dc 0%, var(--parch) 40%, var(--parch-2) 100%);
  color:var(--ink);
  border:3px solid var(--gold-3);
  border-radius:var(--r-l);
  padding:clamp(22px,4vw,30px);
  box-shadow:var(--shadow);
}
.parchment h3{font-family:var(--font-h);text-transform:uppercase;color:#6b4d13;margin:0 0 .3em;font-size:1.3rem;letter-spacing:.02em}
.parchment > p{margin:0 0 1.2em;font-size:.92rem;color:#5c6b7d}
.parchment__note{margin:1.1em 0 0;font-size:.82rem;color:#5c6b7d;text-align:center}

.clink{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.55);
  border:2px solid rgba(143,106,30,.35);
  border-radius:14px;padding:.75em .9em;margin-bottom:10px;
  color:var(--ink);transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.clink:hover{transform:translateX(3px);border-color:var(--gold-2);background:#fff}
.clink__ico{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
}
.clink__ico svg{width:22px;height:22px}
.clink__ico--wa{background:#25a35a}
.clink__ico--tg{background:#2aa3e0}
.clink__ico--tel{background:var(--red)}
.clink__txt{display:flex;flex-direction:column;line-height:1.25}
.clink__txt b{font-size:1rem;color:#2c3d52}
.clink__txt em{font-style:normal;font-size:.8rem;color:#6c7c8f}

/* ---------- Футер: подводная сцена ---------- */
.footer{
  --floor-h:126px;
  position:relative;z-index:1;margin-top:clamp(40px,8vw,80px);
  /* верх прозрачный — вода секции выше плавно уходит в глубину, стыка не видно */
  background:linear-gradient(180deg,
    rgba(6,36,66,0) 0,
    rgba(6,36,66,.5) 42px,
    rgba(6,36,66,.92) 96px,
    var(--deep-2) 140px,
    var(--deep-2) 100%);
  padding-top:clamp(78px,9vw,112px);
  padding-bottom:var(--floor-h);
}

/* разделительная дорожка бассейна на стыке */
/* буйки-диски, нанизанные на трос */
.lane{
  position:absolute;left:0;right:0;top:0;z-index:3;
  display:block;width:100%;height:18px;
  pointer-events:none;overflow:visible;
  filter:drop-shadow(0 6px 12px rgba(2,14,30,.5));
  transform:translateY(-50%);
  animation:laneBob 6s ease-in-out infinite alternate;
}
@keyframes laneBob{
  from{transform:translateY(calc(-50% - 3px))}
  to{transform:translateY(calc(-50% + 3px))}
}

/* сцена — фон всего футера: текст стоит внутри неё */
.seabed{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.seabed__wave{position:absolute;left:-2%;top:16px;width:104%;height:150px}
.seabed__wave--back{top:26px;opacity:.7;animation:drift 26s ease-in-out infinite alternate}
.seabed__defs{position:absolute;width:0;height:0;overflow:hidden}
@keyframes drift{from{transform:translateX(-14px)}to{transform:translateX(14px)}}

/* лучи света */
.rays{position:absolute;inset:0;overflow:hidden}
.rays i{
  position:absolute;top:-10%;left:var(--x);width:var(--w);height:70%;
  background:linear-gradient(to bottom,rgba(150,215,255,.12),rgba(150,215,255,0));
  transform:skewX(-12deg);filter:blur(6px);
  animation:rayPulse 14s ease-in-out infinite;animation-delay:var(--d);
}
@keyframes rayPulse{0%,100%{opacity:.25;transform:skewX(-12deg) translateX(0)}50%{opacity:.7;transform:skewX(-16deg) translateX(14px)}}

/* дно */
.seafloor{position:absolute;left:0;bottom:0;width:100%;height:88px}

/* рыбы */
.fish{position:absolute;width:44px;height:auto;left:0;will-change:transform}
.fish__tail{transform-box:fill-box;transform-origin:100% 50%;animation:tailWag .55s ease-in-out infinite alternate}
@keyframes tailWag{from{transform:rotate(-11deg)}to{transform:rotate(11deg)}}
@keyframes swimR{
  0%{transform:translateX(-90px) translateY(0)}
  25%{transform:translateX(30vw) translateY(-10px)}
  50%{transform:translateX(55vw) translateY(6px)}
  75%{transform:translateX(80vw) translateY(-6px)}
  100%{transform:translateX(calc(100vw + 90px)) translateY(0)}
}
@keyframes swimL{
  0%{transform:translateX(calc(100vw + 90px)) scaleX(-1) translateY(0)}
  30%{transform:translateX(65vw) scaleX(-1) translateY(8px)}
  60%{transform:translateX(35vw) scaleX(-1) translateY(-8px)}
  100%{transform:translateX(-90px) scaleX(-1) translateY(0)}
}
.fish--a{color:#e8a13a;width:52px;bottom:42%;animation:swimR 26s linear infinite}
.fish--b{color:#f0d489;width:34px;bottom:56%;animation:swimR 34s linear infinite;animation-delay:-9s;opacity:.9}
.fish--c{color:#5fc9e8;width:42px;bottom:34%;animation:swimL 30s linear infinite;animation-delay:-4s}
.fish--d{color:#ff9a6b;width:26px;bottom:63%;animation:swimL 38s linear infinite;animation-delay:-17s;opacity:.85}
.fish--e{color:#8ad6b4;width:46px;bottom:28%;animation:swimR 42s linear infinite;animation-delay:-24s;opacity:.9}
.fish--f{color:#c79ae6;width:22px;bottom:48%;animation:swimR 30s linear infinite;animation-delay:-14s;opacity:.8}
.fish--g{color:#e8c36a;width:36px;bottom:38%;animation:swimL 46s linear infinite;animation-delay:-30s;opacity:.75}

/* медузы */
.jelly{position:absolute;width:30px;height:auto}
.jelly--1{color:#9ad6ff;left:26%;bottom:31%;animation:float1 13s ease-in-out infinite}
.jelly--2{color:#f3a9d8;left:71%;bottom:44%;width:24px;animation:float1 17s ease-in-out infinite;animation-delay:-6s;opacity:.8}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,-26px)}}
.jelly__bell{transform-box:fill-box;transform-origin:50% 100%;animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1,1)}50%{transform:scale(.86,1.14)}}
.jelly__tent{animation:tent 3.2s ease-in-out infinite}
@keyframes tent{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* декор на дне */
.deco{position:absolute;bottom:0;opacity:.92}
.deco--lighthouse{left:3%;width:48px;bottom:14px}
.lh-beam{animation:beam 5s ease-in-out infinite}
@keyframes beam{0%,100%{opacity:.1;transform:scaleX(.55)}50%{opacity:.55;transform:scaleX(1.1)}}
.deco--star{left:24%;width:26px;bottom:10px;opacity:.85;animation:sway 9s ease-in-out infinite}
.deco--shell{left:57%;width:24px;bottom:8px;opacity:.8}

/* водоросли */
.weed{position:absolute;bottom:0;width:26px;height:auto;opacity:.62;
  transform-origin:50% 100%;animation:sway 7s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-5deg) skewX(3deg)}to{transform:rotate(6deg) skewX(-3deg)}}
.weed--1{left:11%;width:30px;animation-duration:6.5s}
.weed--2{left:33%;width:22px;animation-duration:8s;animation-delay:-2s;opacity:.5}
.weed--3{left:47%;width:34px;animation-duration:7.5s;animation-delay:-4s;opacity:.55}
.weed--4{right:22%;left:auto;width:26px;animation-duration:9s;animation-delay:-1s}
.weed--5{right:8%;left:auto;width:20px;animation-duration:6.8s;animation-delay:-5s;opacity:.45}

/* осьминог */
.octo{position:absolute;right:26%;bottom:6px;width:62px;height:auto;opacity:.9;
  animation:octoBob 8s ease-in-out infinite}
@keyframes octoBob{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,-16px)}}
.octo__arm{transform-box:fill-box;transform-origin:50% 0;animation:armWave 2.6s ease-in-out infinite alternate}
.octo__arm:nth-child(2){animation-delay:-.4s}
.octo__arm:nth-child(3){animation-delay:-.8s}
.octo__arm:nth-child(4){animation-delay:-1.2s}
.octo__arm:nth-child(5){animation-delay:-1.6s}
@keyframes armWave{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.octo__pupil{animation:blink 6s ease-in-out infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}

/* сундук с сокровищами */
.chest{position:absolute;right:3%;bottom:6px;width:134px;height:auto}
.chest__lid{transform-origin:16px 52px;animation:lidOpen 9s ease-in-out infinite}
@keyframes lidOpen{
  0%,8%{transform:rotate(0)}
  20%{transform:rotate(-54deg)}
  24%{transform:rotate(-46deg)}
  28%,70%{transform:rotate(-50deg)}
  84%,100%{transform:rotate(0)}
}
.chest__loot,.chest__glow{opacity:0;animation:lootShow 9s ease-in-out infinite}
@keyframes lootShow{0%,12%{opacity:0}26%,72%{opacity:1}82%,100%{opacity:0}}
.chest__glow{animation-name:glowShow}
@keyframes glowShow{0%,12%{opacity:0}30%{opacity:1}50%{opacity:.65}66%{opacity:1}82%,100%{opacity:0}}
.spark{transform-box:fill-box;transform-origin:50% 50%;animation:twinkle 2.2s ease-in-out infinite}
.spark--2{animation-delay:-.7s}
.spark--3{animation-delay:-1.4s}
@keyframes twinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.2}50%{transform:scale(1.15) rotate(35deg);opacity:1}}

/* пузырьки со дна */
.bstream{position:absolute;bottom:26px;width:14px;height:50%}
.bstream i{
  position:absolute;bottom:0;left:50%;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.8),rgba(160,215,255,.25) 50%,rgba(120,190,255,.05) 72%);
  border:1px solid rgba(255,255,255,.3);
  animation:bup 7s linear infinite;
}
.bstream i:nth-child(2){width:4px;height:4px;animation-duration:8.5s;animation-delay:-2.5s}
.bstream i:nth-child(3){width:8px;height:8px;animation-duration:9.5s;animation-delay:-5s}
@keyframes bup{
  0%{transform:translate(-50%,0) scale(.6);opacity:0}
  12%{opacity:.75}
  85%{opacity:.5}
  100%{transform:translate(calc(-50% + 12px),-190px) scale(1.1);opacity:0}
}
.bstream--1{left:18%}
.bstream--2{left:63%;bottom:18px}
.bstream--3{right:14%;left:auto;bottom:30px}

@media (max-width:899px){
  .fish--f,.fish--g,.jelly--2,.deco--shell,.weed--5,.bstream--2{display:none}
  .chest{width:98px}
  .octo{width:50px;right:30%}
}
@media (max-width:620px){
  .fish--b,.fish--d,.jelly--1,.weed--3,.deco--star,.bstream--3{display:none}
  .deco--lighthouse{width:34px}
  .chest{width:74px;right:4%}
  .octo{width:38px;right:34%}
  .rays i{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fish,.fish__tail,.jelly,.jelly__bell,.jelly__tent,.weed,.octo,.octo__arm,.octo__pupil,
  .chest__lid,.chest__loot,.chest__glow,.spark,.bstream i,.rays i,.lh-beam,
  .seabed__wave--back,.deco--star{animation:none}
  .lane{animation:none;transform:translateY(-50%)}
  .chest__lid{transform:rotate(-50deg)}
  .chest__loot,.chest__glow{opacity:1}
}

.footer__in{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;
}
/* мягкая подложка, чтобы текст читался поверх сцены */
.footer__in::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:-30px;transform:translateX(-50%);
  width:min(820px,102%);height:calc(100% + 60px);
  background:radial-gradient(58% 58% at 50% 50%,
    rgba(4,20,38,.82) 0%, rgba(4,20,38,.6) 55%, rgba(4,20,38,0) 100%);
}
.footer__brand{display:flex;align-items:center;gap:10px}
.footer__brand img{width:44px;height:auto}
.footer__brand span{
  font-family:var(--font-h);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--gold);font-size:1rem;
}
.footer__nav{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center}
.footer__nav a{font-size:.88rem;color:var(--muted)}
.footer__nav a:hover{color:var(--gold)}
.footer__legal{margin:0;font-size:.8rem;color:#7fa0c2;max-width:60ch}
/* сноска про дистанцию тренировки */
.footer__note{margin:0;font-size:.84rem;color:var(--muted);max-width:60ch}
.ast{color:var(--gold);font-weight:700}
sup.ast{font-size:.7em;margin-left:.1em}

/* ---------- Плавающая кнопка (моб.) ---------- */
.fab{
  position:fixed;left:16px;right:16px;bottom:14px;z-index:55;
  display:none;justify-content:center;align-items:center;
  font-family:var(--font-h);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:.95rem;
  background:linear-gradient(180deg,#f3d68d,var(--gold) 45%,var(--gold-2));
  color:#4a3208;padding:1em;border-radius:100px;
  box-shadow:0 5px 0 var(--gold-3), 0 12px 28px rgba(0,0,0,.45);
}
@media (max-width:899px){
  .fab.is-visible{display:flex}
  body{padding-bottom:0}
}

/* ---------- Появление при скролле ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease, transform .55s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}