/* ═══════════════════════════════════════════════════════════════════════
   МОСКВИЗ · styles.css
   Вёрстку править не нужно — весь текст и данные живут в data.js
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1. ТОКЕНЫ ───────────────────────── */
:root{
  /* ═══ СВЕТЛАЯ ПАЛИТРА · Ralph Lauren ═══
     Кремовая бумага, глубокий синий, розовый лягушки, тёплый тауп.
     Золота нет ни в одном месте — это отдельное решение заказчика. */

  /* бумага */
  --paper:#f4efe4;        /* фон страницы */
  --paper-2:#fbf8f2;      /* карточка — на тон светлее */
  --paper-3:#ece5d8;      /* утопленный блок */
  --paper-4:#e2d9c9;      /* глубже всего */

  /* чернила */
  --ink:#1b2a44;                    /* основной текст   11.8:1 */
  --ink-2:rgba(27,42,68,.74);       /* вторичный         4.9:1 */
  --ink-3:rgba(27,42,68,.66);       /* мелкий            4.5:1 */
  --ink-4:rgba(27,42,68,.13);       /* ТОЛЬКО линии, не текст */

  /* синий акцент */
  --navy:#24365c;
  --navy-lit:#3b5184;

  /* бренд — точные цвета вашей лягушки */
  --brand:#d87884;
  --brand-dark:#b45460;
  --brand-deep:#8e3f4a;
  --brand-lit:#e48490;
  --brand-wash:rgba(216,120,132,.12);

  /* тауп вместо золота */
  --taupe:#9c8a76;          /* линии, рамки, декор */
  --taupe-ink:#6f5f4c;      /* мелкий текст        5.2:1 */
  --taupe-lit:#c9baa6;

  /* тёплый свет */
  --warm:#f0dcc0;

  /* совместимость со старыми правилами */
  --w-deep:var(--paper);
  --w-night:var(--paper);
  --w-eve:var(--paper-2);
  --w-dusk:var(--paper-3);
  --brand-hot:var(--brand-dark);
  --camel:var(--taupe-ink);
  --camel-lit:var(--taupe-ink);
  --wine:var(--brand-deep);
  --lamp:var(--warm);
  --glass:var(--paper-2);
  --glass-2:var(--paper-2);
  --glass-line:rgba(27,42,68,.11);

  /* сетка — воздуха больше, как просили */
  --pad:clamp(22px,5.5vw,76px);
  --maxw:1240px;
  --r:18px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  color-scheme:light;
}

/* ───────────────────────── 2. СБРОС ───────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100%;
  background:var(--w-deep);
  color:var(--ink);
  font:400 17px/1.62 "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}

:focus-visible{
  outline:2px solid var(--brand-dark);
  outline-offset:3px;
  border-radius:4px;
}

::selection{background:var(--brand-lit);color:var(--ink)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  padding:14px 20px;background:var(--navy);color:var(--paper);
}
.skip:focus{left:12px;top:12px}

.vh{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ───────────────────── 3. БУМАГА, ЗЕРНО И ТЁПЛЫЙ СВЕТ ─────────────────────
   Фон — не заливка, а материал. Тёплое пятно медленно уходит влево
   по мере прокрутки: день клонится к вечеру, только тихо.
   ────────────────────────────────────────────────────────────────────────── */
.night{
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:var(--paper);
}
.night i{position:absolute;inset:0;display:block}

/* тёплое пятно — «солнце из окна» */
.night .n-dusk{
  opacity:1;
  background:
    radial-gradient(64% 52% at var(--sun-x,82%) var(--sun-y,-6%),
      rgba(240,220,192,.85) 0%, rgba(240,220,192,0) 64%),
    radial-gradient(48% 40% at 6% 102%,
      rgba(216,120,132,.10) 0%, rgba(216,120,132,0) 68%);
  transition:background-position .4s linear;
}
/* холодная тень с противоположной стороны — объём страницы */
.night .n-eve{
  opacity:1;
  background:radial-gradient(60% 46% at var(--shade-x,12%) 8%,
    rgba(36,54,92,.07) 0%, rgba(36,54,92,0) 66%);
}
.night .n-deep{display:none}

#stars{display:none}

/* зерно бумаги: 3% — сознательно не замечается, но убирает «цифровую» гладь */
.grain{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:none;
}

/* ───────────────────────── 4. ТИПОГРАФИКА ───────────────────────── */
.display{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-weight:300;
  line-height:.92;
  letter-spacing:-.018em;
  font-size:clamp(3rem,8.2vw,7.4rem);
}
.display em{
  font-style:italic;
  font-weight:400;
  color:var(--camel-lit);
}

.h2{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.012em;
  font-size:clamp(2.1rem,4.3vw,3.6rem);
  text-wrap:balance;
}
.h2 em{font-style:italic;font-weight:400;color:var(--camel-lit)}

.h3{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:400;
  line-height:1.08;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  letter-spacing:-.008em;
}

.kicker{
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--camel);
  font-weight:700;
}
.kicker.pale{color:var(--ink-3)}

.lead{
  font-size:clamp(1.02rem,1.55vw,1.2rem);
  line-height:1.62;
  color:var(--ink-2);
  max-width:56ch;
}

.mono{
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

/* тонкая золотая линия-разделитель */
.rule{
  height:1px;
  border:0;
  margin:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(184,137,90,.42) 18%,
    rgba(184,137,90,.42) 82%,
    transparent 100%);
}

/* ───────────────────────── 5. СЕТКА ───────────────────────── */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.sec{
  position:relative;
  /* ужато: страница стала заметно короче без потери воздуха внутри блоков */
  padding-block:clamp(44px,6.2vh,82px);
}

.sec-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px 40px;
  margin-bottom:clamp(36px,5vw,64px);
}
.sec-head .kicker{margin-bottom:14px;display:block}

/* появление при скролле */
.anim .up{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);
}
.up.in{opacity:1;transform:none}
.up.d1{transition-delay:.08s}
.up.d2{transition-delay:.16s}
.up.d3{transition-delay:.24s}
.up.d4{transition-delay:.32s}

/* ───────────────────────── 6. КНОПКИ ─────────────────────────
   Объёмные, с магнитным притяжением к курсору и световым бликом.
   --mx/--my ставит JS.
   ──────────────────────────────────────────────────────────── */
.btn{
  --mx:0px; --my:0px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:17px 34px;
  border-radius:100px;
  font-size:.94rem;
  font-weight:700;
  letter-spacing:.04em;
  text-align:center;
  isolation:isolate;
  overflow:hidden;
  transform:translate3d(var(--mx),var(--my),0);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease),
             border-color .4s var(--ease),color .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn>*{position:relative;z-index:2}

/* блик, пробегающий по кнопке */
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,.34) 48%,
    transparent 66%);
  transform:translateX(-130%);
  transition:transform .75s var(--ease-out);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(130%)}

/* розовая таблетка — цвет взят с контура вашей лягушки (#B45460):
   на нём белый текст даёт контраст 4.8:1, то есть читается всеми.
   Светлый #D87884 работает как свечение и подложка. */
.btn-fill{
  background:var(--brand-dark);
  color:#fff;
  box-shadow:
    0 2px 0 var(--brand-deep),
    0 10px 22px -12px rgba(142,63,74,.6);
}
.btn-fill::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:linear-gradient(168deg,var(--brand) 0%,var(--brand-dark) 70%);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.btn-fill:hover::before,.btn-fill:focus-visible::before{opacity:.5}
.btn-fill:hover,.btn-fill:focus-visible{
  box-shadow:
    0 2px 0 var(--brand-deep),
    0 16px 34px -14px rgba(180,84,96,.75);
}
.btn-fill:active{
  transform:translate3d(var(--mx),calc(var(--my) + 2px),0);
  box-shadow:0 0 0 var(--brand-deep),0 6px 14px -8px rgba(142,63,74,.5);
}

/* вторая кнопка — только контур */
.btn-line{
  border:1px solid rgba(27,42,68,.22);
  background:transparent;
  color:var(--ink);
}
.btn-line:hover,.btn-line:focus-visible{
  border-color:var(--ink);
  background:rgba(27,42,68,.04);
}
.btn-line:active{transform:translate3d(var(--mx),calc(var(--my) + 2px),0)}

/* кнопка для корпоративов — глубокий синий */
.btn-gold{
  background:var(--navy);
  color:var(--paper);
  box-shadow:0 2px 0 #16233c,0 10px 22px -12px rgba(36,54,92,.55);
}
.btn-gold:hover,.btn-gold:focus-visible{
  background:var(--navy-lit);
  box-shadow:0 2px 0 #16233c,0 16px 34px -14px rgba(36,54,92,.6);
}
.btn-gold:active{transform:translate3d(var(--mx),calc(var(--my) + 2px),0);box-shadow:none}

.btn-wide{width:100%}

/* текстовая ссылка со стрелкой */
.tlink{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--ink-2);
  padding-block:6px;
  transition:color .3s var(--ease),gap .3s var(--ease);
}
.tlink::after{
  content:"";
  width:18px;height:1px;
  background:currentColor;
  transition:width .3s var(--ease);
}
.tlink:hover,.tlink:focus-visible{color:var(--camel-lit);gap:14px}
.tlink:hover::after{width:26px}

/* ───────────────────────── 7. СТЕКЛО ───────────────────────── */
.glass{
  background:var(--paper-2);
  border:1px solid var(--glass-line);
  border-radius:var(--r);
  
  box-shadow:
    0 20px 50px -28px rgba(27,42,68,0.20);
}

/* ───────────────────────── 8. ШАПКА ───────────────────────── */
.head{
  position:fixed;
  top:0;left:0;right:0;
  z-index:80;
  transition:transform .5s var(--ease),background-color .5s var(--ease),
             backdrop-filter .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.head.solid{
  background:rgba(244,239,228,.86);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom-color:var(--ink-4);
}
.head.away{transform:translateY(-104%)}

/* Шапка во всю ширину, а не в колонку текста: слева меню и логотип,
   посередине переключатель страниц. Так ей просторнее. */
.head-in{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;
  gap:clamp(12px,2vw,26px);
  height:clamp(68px,8.5vh,88px);
  padding-inline:clamp(16px,3.4vw,44px);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding-block:8px;
  gap:9px;
  font-family:"Playfair Display",Georgia,serif;
  font-size:1.36rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--ink);
  transition:color .3s var(--ease);
}
.brand:hover{color:var(--brand-dark)}
.brand-mark{
  width:30px;height:30px;
  border-radius:9px;
  object-fit:contain;
  background:var(--paper-2);
  padding:2px;
  flex:none;
  box-shadow:0 2px 10px rgba(27,42,68,0.11);
}

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav a{
  position:relative;
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--ink-2);
  padding-block:8px;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;bottom:2px;
  width:100%;height:1px;
  background:var(--camel);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .42s var(--ease-out);
}
.nav a:hover,.nav a:focus-visible{color:var(--ink)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
/* Кнопка в шапке. Раньше жила внутри .nav, которого больше нет —
   правила переписаны на сам класс, иначе она осталась бы без стилей. */
.cta,.nav a.cta{
  display:inline-flex;
  align-items:center;
  min-height:44px;                      /* палец должен попадать */
  padding:0 20px;
  border-radius:100px;
  border:1px solid rgba(184,137,90,.4);
  color:var(--taupe-ink);
  font-size:.9rem;
  font-weight:500;
  white-space:nowrap;
  text-decoration:none;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.cta::after,.nav a.cta::after{display:none}

/* Кнопка для компаний на главной — заливкой, а не обводкой:
   это второй по важности переход после записи на игру. */
.cta-hot{
  border-color:transparent;
  background:var(--brand-dark);
  color:var(--paper-2);
}
.cta-hot:hover{
  background:var(--brand-deep,#8e3f4a);
  border-color:transparent;
  color:#fff;
}
.cta:hover,.nav a.cta:hover{
  background:rgba(184,137,90,.14);
  border-color:var(--camel);
  color:var(--ink);
}

/* На узком экране кнопка ужимается, но не прячется: переход
   для компаний — второй по важности, терять его нельзя. */
@media (max-width:460px){
  .head-cta{padding:0 13px;font-size:.82rem}
  .brand span{font-size:1.04rem}
}
@media (max-width:360px){
  .brand span{display:none}          /* остаётся лягушка — логотип узнаётся */
}

/* Три полоски видны на всех экранах: меню одно и то же и на телефоне,
   и на компьютере — меньше мест, где что-то может разъехаться. */
.burger{
  display:block;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid var(--glass-line);
  background:var(--glass);
  position:relative;
  flex:none;
  cursor:pointer;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.burger:hover{border-color:var(--line-2,rgba(27,42,68,.26))}
.burger span{
  position:absolute;
  left:13px;
  width:18px;height:1.5px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .4s var(--ease-out),opacity .25s var(--ease);
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21.25px}
.burger span:nth-child(3){top:27.5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.3)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.25px) rotate(-45deg)}

/* ───── переключатель страниц ─────
   Не три отдельные кнопки, а один переключатель: общая дорожка,
   активная страница залита. Так сразу видно, что это одно целое
   и что между ними переключаются. */
.pills{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:4px;
  border-radius:100px;
  border:1px solid rgba(27,42,68,.1);
  background:rgba(251,248,242,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 2px rgba(27,42,68,.04);
  min-width:0;
  max-width:100%;
}
.pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 clamp(13px,1.5vw,20px);
  border-radius:100px;
  color:var(--ink-3);
  font-size:clamp(.81rem,1vw,.9rem);
  font-weight:500;
  letter-spacing:.005em;
  white-space:nowrap;
  text-decoration:none;
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.pill:hover{color:var(--ink)}
.pill.on{
  background:var(--brand-dark);
  color:var(--paper-2);
  box-shadow:0 2px 8px -2px rgba(180,84,96,.45);
}
.pill.on:hover{color:#fff}

/* тонкие волоски между неактивными — дорожка читается как одно целое */
.pill + .pill::before{
  content:"";
  position:absolute;
  left:-1px;
  top:9px;bottom:9px;
  width:1px;
  background:rgba(27,42,68,.12);
  transition:opacity .3s var(--ease);
}
.pill.on::before,.pill.on + .pill::before,.pill:hover::before,.pill:hover + .pill::before{opacity:0}

@media (max-width:880px){
  .head-in{grid-template-columns:auto minmax(0,1fr);height:auto;padding-block:11px 12px}
  .pills{
    grid-column:1/-1;
    justify-self:stretch;
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .pills::-webkit-scrollbar{display:none}
  .pill{flex:1 0 auto;justify-content:center}
}
@media (max-width:380px){
  .brand span{display:none}
}

/* ───── боковое меню ─────
   Раньше меню закрывало весь экран. Теперь это ящик слева: страница
   остаётся видна, и понятно, откуда ты пришёл. */
.mnav{
  position:fixed;
  inset:0;
  z-index:79;
  background:rgba(27,42,68,.34);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s var(--ease),visibility .35s;
}
.mnav.open{opacity:1;visibility:visible}

.mnav-panel{
  position:absolute;
  inset:0 auto 0 0;
  width:min(360px,86vw);
  padding:clamp(76px,10vh,96px) clamp(20px,3vw,30px) 28px;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--paper-2);
  border-right:1px solid var(--ink-4);
  box-shadow:24px 0 60px -40px rgba(27,42,68,.6);
  transform:translateX(-100%);
  transition:transform .42s var(--ease-out);
}
.mnav.open .mnav-panel{transform:none}

.mnav-t{
  margin:0 0 12px;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--taupe-ink);
}
.mnav-t + .mpages,.mnav-t + .msecs{margin-bottom:28px}

/* пронумерованные страницы */
.mpages{display:grid;gap:4px}
.mpage{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  gap:13px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid transparent;
  text-decoration:none;
  transition:background-color .25s var(--ease),border-color .25s var(--ease);
}
.mpage b{
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--taupe-ink);
  transition:color .25s var(--ease);
}
.mpage span{
  display:block;
  font-family:"Playfair Display",Georgia,serif;
  font-size:1.16rem;
  font-weight:500;
  line-height:1.2;
  color:var(--ink);
}
.mpage i{
  display:block;
  margin-top:3px;
  font-family:"Golos Text",system-ui,sans-serif;
  font-size:.79rem;
  font-style:normal;
  line-height:1.4;
  color:var(--ink-3);
}
.mpage:hover{background:var(--paper-3)}
.mpage.on{
  background:rgba(216,120,132,.09);
  border-color:rgba(216,120,132,.3);
}
.mpage.on b{color:var(--brand-dark)}

/* разделы текущей страницы */
.msecs{display:grid;gap:1px}
.msecs a{
  padding:9px 14px;
  border-radius:9px;
  font-size:.94rem;
  color:var(--ink-2);
  text-decoration:none;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.msecs a:hover{background:var(--paper-3);color:var(--ink)}

/* прогресс чтения */
.prog{
  position:fixed;
  top:0;left:0;
  z-index:90;
  height:2px;
  width:100%;
  transform:scaleX(var(--p,0));
  transform-origin:left;
  background:linear-gradient(90deg,var(--brand-hot),var(--brand-lit),var(--camel));
  pointer-events:none;
}


/* ═══════════════════════════════════════════════════════════════════════
   6б. СТАРТОВЫЕ СОСТОЯНИЯ АНИМАЦИЙ
   Действуют только когда на <html> есть класс .anim (его ставит anim.js).
   Без скриптов и при «уменьшить движение» весь контент виден сразу —
   ничего не может остаться спрятанным из-за невыполнившейся анимации.
   ═══════════════════════════════════════════════════════════════════════ */
.anim .hero-h .ln>i{transform:translateY(105%)}
.anim .hero-sub{opacity:0;transform:translateY(16px)}
.anim .doors{opacity:0;transform:translateY(20px)}
.anim .dio-wrap{opacity:0}
.anim .stmt .w{opacity:.16}
.anim .step::after{width:0}

/* раскрытие перекрывает стартовое состояние */
.hero.lit .hero-h .ln>i{transform:none}
.hero.lit .hero-sub{opacity:1;transform:none}
.hero.lit .doors{opacity:1;transform:none}
.hero.lit .dio-wrap{opacity:1}
.stmt .w.on{opacity:1}
.step.in::after{width:100%}
.up.in{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════════════════════
   9. ПЕРВЫЙ ЭКРАН — диорама по центру, текст вокруг
   ═══════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  padding-block:clamp(104px,14vh,148px) clamp(50px,7vh,88px);
  overflow:clip;
}
.hero-in{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.hero-in>.kicker{margin-bottom:clamp(20px,3vh,30px)}

.hero-h{
  margin-bottom:clamp(20px,3vh,28px);
  font-size:clamp(2.7rem,7vw,5.6rem);
  max-width:15ch;
}
/* Playfair в курсиве уводит хвосты «у» и «р» глубоко вниз —
   маске нужен запас, а лишнюю высоту снимаем отрицательным полем */
.hero-h .ln{
  display:block;
  overflow:hidden;
  padding-bottom:.30em;
  margin-bottom:-.22em;
}
.hero-h .ln>i{display:block;font-style:normal}
.anim .hero-h .ln>i{transform:translateY(105%);transition:transform 1.05s var(--ease-out)}
.hero.lit .hero-h .ln>i{transform:none}
.hero.lit .hero-h .ln:nth-child(2)>i{transition-delay:.1s}

.hero-sub{
  max-width:46ch;
  margin-bottom:clamp(30px,5vh,48px);
  font-size:clamp(1.02rem,1.5vw,1.18rem);
}
.anim .hero-sub{opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease-out) .3s,transform .9s var(--ease-out) .3s}
.hero.lit .hero-sub{opacity:1;transform:none}

/* ───── сцена ───── */
.hero-scene{
  position:relative;
  width:min(100%,660px);
  margin-bottom:clamp(34px,5vh,56px);
}
.hero-img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 34px 44px rgba(27,42,68,.22));
}
.anim .hero-scene{opacity:0;transform:translateY(24px) scale(.98);
  transition:opacity 1.1s var(--ease-out) .15s,transform 1.1s var(--ease-out) .15s}
.hero.lit .hero-scene{opacity:1;transform:none}

/* Лёгкий наклон сцены за курсором — предмет на столе, а не картинка.
   Наклон уже догоняет курсор в скрипте (плавное приближение по кадрам).
   Переход здесь давал второе сглаживание поверх первого — отсюда
   ощущение, что картинка «залипает» и тянется за мышью. Оставляем одно. */
.hero-tilt{
  transform:perspective(1200px)
            rotateX(var(--tx,0deg))
            rotateY(var(--ty,0deg));
  transform-style:preserve-3d;
  will-change:transform;
}

/* ───── карточки поверх сцены ───── */
.gcard{
  position:absolute;
  z-index:5;
  padding:12px 18px;
  border-radius:14px;
  background:var(--paper-2);
  border:1px solid var(--ink-4);
  box-shadow:0 14px 28px -18px rgba(27,42,68,.45);
  text-align:left;
  white-space:nowrap;
  transform:translate3d(var(--px,0px),var(--py,0px),0);
  transition:transform .7s var(--ease-out);
}
.gcard b{
  display:block;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:1.12rem;
  font-weight:400;
  color:var(--ink);
}
.gcard span{
  display:block;
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--taupe-ink);
  margin-top:4px;
  font-weight:700;
}
.gc-1{left:-6%;  top:16%}
.gc-2{right:-7%; top:-1%}   /* выше слова на экране: на узких десктопах карточка его задевала */
.gc-3{right:-3%; bottom:20%}

.dio-hint{display:none}

/* ───── две двери ───── */
.doors{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  width:min(100%,640px);
  text-align:left;
}
.anim .doors{opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease-out) .45s,transform .9s var(--ease-out) .45s}
.hero.lit .doors{opacity:1;transform:none}

.door{
  --mx:0px; --my:0px;
  position:relative;
  display:block;
  padding:24px 24px 22px;
  border-radius:16px;
  background:var(--paper-2);
  border:1px solid var(--ink-4);
  box-shadow:0 10px 24px -20px rgba(27,42,68,.4);
  overflow:hidden;
  transform:translate3d(var(--mx),var(--my),0);
  transition:transform .45s var(--ease-out),border-color .4s var(--ease),
             box-shadow .4s var(--ease);
}
.door:hover,.door:focus-visible{
  border-color:var(--brand);
  box-shadow:0 20px 40px -24px rgba(180,84,96,.5);
}
.door:active{transform:translate3d(var(--mx),calc(var(--my) + 2px),0)}

/* Дверь для компаний выделена: розовая рамка и подложка.
   Это второй по важности переход на главной после записи на игру. */
.door-biz{
  border-color:rgba(216,120,132,.42);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(216,120,132,.13), transparent 62%),
    var(--paper-2);
  box-shadow:0 14px 30px -22px rgba(180,84,96,.5);
}
.door-biz .door-k{color:var(--brand-dark)}
.door-biz .door-arrow{color:var(--brand-dark)}
.door-biz:hover,.door-biz:focus-visible{
  border-color:var(--brand-dark);
  box-shadow:0 24px 46px -24px rgba(180,84,96,.62);
}
.door-k{
  display:block;
  font-size:.64rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--taupe-ink);
  font-weight:700;
  margin-bottom:12px;
}
.door-t{
  display:block;
  font-family:"Playfair Display",Georgia,serif;
  font-size:1.6rem;
  font-weight:400;
  line-height:1.05;
  margin-bottom:8px;
}
.door-s{
  display:block;
  font-size:.88rem;
  line-height:1.45;
  color:var(--ink-3);
  padding-right:40px;
}
.door-arrow{
  position:absolute;
  right:20px;bottom:20px;
  width:28px;height:28px;
  border-radius:50%;
  border:1px solid var(--ink-4);
  display:grid;place-items:center;
  font-size:.82rem;
  color:var(--ink-3);
  transition:transform .4s var(--ease-out),border-color .4s,color .4s,background-color .4s;
}
.door:hover .door-arrow{
  transform:translateX(3px);
  border-color:var(--brand-dark);
  background:var(--brand-dark);
  color:#fff;
}

.cue{display:none}

@media (max-width:760px){
  /* на узком экране карточки уходят с экрана сцены —
     иначе «8 раундов» закрывает лягушке голову */
  .gc-1{left:-2%;top:2%;right:auto;bottom:auto}
  .gc-2{left:-2%;right:auto;top:auto;bottom:34%}
  .gc-3{right:-2%;left:auto;top:auto;bottom:5%}
  .gcard{padding:9px 13px}
  .gcard b{font-size:.95rem}
  .gcard span{font-size:.56rem}
  .doors{grid-template-columns:minmax(0,1fr)}
}

/* ═══════════════════════════════════════════════════════════════════════
   11. КРУПНОЕ ЗАЯВЛЕНИЕ
   ═══════════════════════════════════════════════════════════════════════ */
.stmt{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:300;
  font-size:clamp(1.65rem,4vw,3.15rem);
  line-height:1.16;
  letter-spacing:-.01em;
  max-width:19ch;
}
.stmt em{font-style:italic;color:var(--camel-lit)}
/* слова проявляются по очереди */
.stmt .w{
  display:inline-block;
  transition:opacity .5s var(--ease);
}
.stmt .w.on{opacity:1}

.stmt-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(32px,6vw,90px);
  align-items:end;
}
.stmt-side{
  display:grid;
  gap:26px;
  padding-bottom:8px;
}
.fact b{
  display:block;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  font-weight:400;
  line-height:1;
  color:var(--camel-lit);
  margin-bottom:9px;
}
.fact span{
  display:block;
  font-size:.86rem;
  line-height:1.45;
  color:var(--ink-3);
  max-width:24ch;
}

/* ═══════════════════════════════════════════════════════════════════════
   12. ТАЙМЛАЙН ВЕЧЕРА
   ═══════════════════════════════════════════════════════════════════════ */
.tl{position:relative;padding-left:clamp(0px,4vw,52px)}
.tl-line{
  position:absolute;
  left:clamp(46px,7.5vw,104px);
  top:12px;bottom:12px;
  width:1px;
  background:var(--ink-4);
}
.tl-line i{
  position:absolute;
  left:0;top:0;
  width:1px;
  height:var(--fill,0%);
  background:linear-gradient(180deg,var(--camel),var(--brand));
  box-shadow:0 0 12px rgba(201,130,151,.6);
  transition:height .25s linear;
}

.tl-row{
  position:relative;
  display:grid;
  grid-template-columns:clamp(46px,7.5vw,104px) minmax(0,1fr);
  gap:0 clamp(20px,3vw,44px);
  padding-block:clamp(16px,2.2vw,24px);
}
.tl-n{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.82rem;
  color:var(--camel);
  padding-top:5px;
  text-align:right;
  padding-right:18px;
}
.tl-row::before{
  content:"";
  position:absolute;
  left:clamp(46px,7.5vw,104px);
  top:12px;
  width:7px;height:7px;
  margin-left:-3px;
  border-radius:50%;
  background:var(--w-deep);
  border:1px solid var(--camel);
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease-out);
}
.tl-row.on::before{
  background:var(--brand);
  border-color:var(--brand-lit);
  box-shadow:0 0 14px rgba(201,130,151,.9);
  transform:scale(1.35);
}
.tl-t{
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(1.3rem,2.3vw,1.75rem);
  font-weight:400;
  line-height:1.12;
  margin-bottom:5px;
}
.tl-d{font-size:.94rem;line-height:1.55;color:var(--ink-3);max-width:52ch}

/* перерыв — визуально тише */
.tl-row.pause .tl-t{
  font-family:"Golos Text",system-ui,sans-serif;
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:700;
}
.tl-row.pause::before{background:var(--w-deep);border-color:var(--ink-4)}
.tl-row.pause.on::before{background:var(--ink-4);box-shadow:none;transform:none;border-color:var(--ink-4)}

/* ═══════════════════════════════════════════════════════════════════════
   13. ФОРМАТЫ ИГР — раскрывающиеся объёмные карточки
   ═══════════════════════════════════════════════════════════════════════ */
.fmts{display:grid;gap:12px}

.fmt{
  position:relative;
  border-radius:16px;
  border:1px solid var(--glass-line);
  background:var(--paper-2);
  overflow:hidden;
  transition:border-color .45s var(--ease),background-color .45s var(--ease),
             transform .5s var(--ease-out),box-shadow .5s var(--ease);
  transform-style:preserve-3d;
}
.fmt::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),
    rgba(201,130,151,.20),transparent 62%);
  transition:opacity .5s var(--ease);
  pointer-events:none;
}
.fmt:hover::before{opacity:1}
.fmt:hover{border-color:rgba(184,137,90,.4)}
.fmt.open{
  border-color:rgba(201,130,151,.46);
  box-shadow:0 26px 60px -32px rgba(27,42,68,0.03);
}

.fmt-btn{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(16px,2.4vw,30px);
  width:100%;
  padding:clamp(20px,2.6vw,30px) clamp(20px,2.6vw,32px);
  text-align:left;
}
.fmt-n{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.78rem;
  color:var(--camel);
  letter-spacing:.06em;
}
.fmt-name{
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(1.45rem,3vw,2.2rem);
  font-weight:400;
  line-height:1.05;
  transition:color .4s var(--ease)
}
.fmt.open .fmt-name{color:var(--camel-lit)}
.fmt-lead{
  display:block;
  font-family:"Golos Text",system-ui,sans-serif;
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:700;
  margin-top:8px;
}
.fmt-plus{
  position:relative;
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--glass-line);
  flex:none;
  transition:transform .55s var(--ease-out),border-color .4s,background-color .4s;
}
.fmt-plus::before,.fmt-plus::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  background:var(--ink-2);
  transition:transform .55s var(--ease-out),background-color .4s;
}
.fmt-plus::before{width:13px;height:1.5px;margin:-.75px 0 0 -6.5px}
.fmt-plus::after{width:1.5px;height:13px;margin:-6.5px 0 0 -.75px}
.fmt.open .fmt-plus{
  transform:rotate(135deg);
  border-color:var(--brand);
  background:var(--brand);
}
.fmt.open .fmt-plus::before,.fmt.open .fmt-plus::after{background:var(--paper)}

/* раскрытие без скачков высоты */
.fmt-body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .6s var(--ease-out);
}
.fmt.open .fmt-body{grid-template-rows:1fr}
.fmt-body>div{overflow:hidden}
.fmt-in{
  padding:0 clamp(20px,2.6vw,32px) clamp(22px,2.6vw,30px);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:20px 32px;
}
.fmt-txt{font-size:1rem;line-height:1.6;color:var(--ink-2);max-width:62ch}
.fmt-meta{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem;
  color:var(--camel);
  letter-spacing:.04em;
  white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   14. МУЗЫКАЛЬНАЯ ПОЛОСА — звука нет, есть графика
   ═══════════════════════════════════════════════════════════════════════ */
/* полоса во всю ширину экрана, а не блок на половину */
/* ═══════════════════════════════════════════════════════════════════════
   15. ЖИВОЙ ВОПРОС
   ═══════════════════════════════════════════════════════════════════════ */
.try-in{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(30px,5vw,72px);
  align-items:center;
}

.qcard{
  position:relative;
  padding:clamp(24px,3vw,38px);
  border-radius:20px;
  background:var(--paper-2);
  border:1px solid var(--glass-line);
  
  box-shadow:0 30px 70px -36px rgba(27,42,68,0.03);
}
.qcard-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:16px;
  margin-bottom:20px;
  border-bottom:1px solid var(--ink-4);
}
.qcard-tag{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--camel);
}

/* кольцо таймера */
.ring{position:relative;width:44px;height:44px;flex:none}
.ring svg{width:44px;height:44px;transform:rotate(-90deg);display:block}
.ring circle{fill:none;stroke-width:2}
.ring .bg{stroke:var(--ink-4)}
.ring .fg{
  stroke:var(--camel);
  stroke-linecap:round;
  stroke-dasharray:125.6;
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1s linear,stroke .4s var(--ease);
}
.ring.low .fg{stroke:var(--brand)}
.ring b{
  position:absolute;
  inset:0;
  display:grid;place-items:center;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;
  font-weight:400;
  color:var(--ink-2);
}

.qtext{
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(1.35rem,2.6vw,1.95rem);
  font-weight:400;
  line-height:1.2;
  min-height:2.4em;
  margin-bottom:22px;
}

.qopts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qopt{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 16px;
  border-radius:12px;
  border:1px solid var(--glass-line);
  background:rgba(27,42,68,.035);
  text-align:left;
  font-size:.95rem;
  line-height:1.3;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),
             transform .3s var(--ease-out),color .3s var(--ease);
}
.qopt:hover:not(:disabled){
  border-color:rgba(184,137,90,.5);
  background:rgba(240,236,228,.08);
  transform:translateY(-2px);
}
.qopt:disabled{cursor:default}
.qopt b{
  flex:none;
  width:24px;height:24px;
  border-radius:7px;
  display:grid;place-items:center;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem;
  font-weight:400;
  color:var(--camel);
  background:rgba(184,137,90,.14);
  transition:background-color .3s,color .3s;
}
.qopt.right{
  border-color:#3f7a4e;
  background:rgba(63,122,78,.12);
  color:#255034;
}
.qopt.right b{background:#3f7a4e;color:#fff}
.qopt.wrong{
  border-color:var(--brand-dark);
  background:rgba(180,84,96,.10);
  color:var(--brand-deep);
}
.qopt.wrong b{background:var(--brand-dark);color:#fff}
.qopt.dim{opacity:.4}

.qafter{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease-out);
  margin-top:0;
}
.qafter.show{grid-template-rows:1fr;margin-top:18px}
.qafter>div{overflow:hidden}
.qafter p{
  font-size:.94rem;
  line-height:1.55;
  color:var(--ink-2);
  padding:16px 18px;
  border-radius:12px;
  background:rgba(184,137,90,.09);
  border-left:2px solid var(--camel);
}
.qfoot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:20px;
  flex-wrap:wrap;
}
.qscore{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.76rem;
  color:var(--ink-3);
  letter-spacing:.05em;
}
.qscore b{color:var(--camel-lit);font-weight:400}

/* ═══════════════════════════════════════════════════════════════════════
   16. РАСПИСАНИЕ
   ═══════════════════════════════════════════════════════════════════════ */
.evs{display:grid;gap:2px}

.ev{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(18px,3vw,40px);
  padding:clamp(20px,2.6vw,30px) clamp(16px,2vw,26px);
  border-radius:14px;
  border:1px solid transparent;
  transition:border-color .45s var(--ease),background-color .45s var(--ease),
             transform .45s var(--ease-out);
}
.ev+.ev{box-shadow:0 -1px 0 var(--ink-4)}
.ev:hover{
  border-color:rgba(184,137,90,.34);
  background:var(--paper-2);
  transform:translateX(5px);
  box-shadow:none;
}

.ev-date{
  display:flex;
  align-items:baseline;
  gap:9px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  min-width:108px;
}
.ev-d{
  font-size:clamp(1.9rem,3.6vw,2.7rem);
  line-height:1;
  color:var(--ink);
  transition:color .4s var(--ease);
}
.ev:hover .ev-d{color:var(--camel-lit)}
.ev-m{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  line-height:1.35;
}
.ev-body{min-width:0}
.ev-t{
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(1.35rem,2.4vw,1.85rem);
  font-weight:400;
  line-height:1.1;
  margin-bottom:6px;
}
.ev-sub{
  font-size:.84rem;
  color:var(--ink-3);
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
}
.ev-sub .tag{
  color:var(--brand-lit);
  border:1px solid rgba(201,130,151,.4);
  border-radius:100px;
  padding:1px 10px;
  font-size:.72rem;
  letter-spacing:.06em;
}
.ev-go{flex:none}

.evs-empty{
  padding:clamp(34px,5vw,58px);
  border-radius:18px;
  border:1px dashed var(--ink-4);
  text-align:center;
}
.evs-empty p{color:var(--ink-3);margin-bottom:22px}

/* ═══════════════════════════════════════════════════════════════════════
   17. ФОРМЫ
   ═══════════════════════════════════════════════════════════════════════ */
.form-wrap{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,6vw,84px);
  align-items:start;
}

/* ───── афиша рядом с окном записи ─────
   Та же раскладка, что в смете на странице «Компаниям»: список слева,
   липкое окно справа. Человек видит даты и тут же — как записаться. */
.evs-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(26px,4vw,52px);
  align-items:start;
}
.evs-grid .price-card{padding:clamp(22px,2.6vw,30px)}
.evs-grid .price-val{margin-bottom:4px}
.evs-grid .price-note{margin-bottom:18px}
.evs-grid .book-hint{font-size:.9rem;margin-bottom:14px}
.evs-grid .ways{gap:10px}
.evs-grid .way{padding:14px 44px 14px 18px}
.evs-grid .way b{font-size:.98rem}
.evs-grid .form-note{margin-top:14px;text-align:left;font-size:.8rem}

/* ───── запись: две живые кнопки вместо формы ─────
   Формы нет намеренно: без подтверждённой почты она теряла бы заявки
   молча. Telegram основным, звонок запасным. */
.book-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(32px,6vw,84px);
  align-items:start;
}
.book-wrap .kicker{display:block;margin-bottom:14px}
.book-wrap .h2{margin-bottom:22px}
.book-wrap .lead + .lead{margin-top:16px}
.book-box .form-note{
  text-align:left;
  margin-top:16px;
}
.book-box{
  padding:clamp(24px,3vw,38px);
  border-radius:22px;
  border:1px solid var(--ink-4);
  background:
    radial-gradient(90% 100% at 100% 0%, rgba(216,120,132,.08), transparent 62%),
    var(--paper-2);
  box-shadow:0 30px 70px -44px rgba(27,42,68,.22);
}
.book-hint{
  font-size:.98rem;
  line-height:1.55;
  color:var(--ink-2);
  margin-bottom:18px;
}
.book-hint:empty{display:none}

.ways{display:grid;gap:12px}
.way{
  position:relative;
  display:grid;
  gap:3px;
  padding:17px 52px 17px 22px;
  border-radius:15px;
  border:1px solid var(--ink-4);
  background:var(--paper);
  text-decoration:none;
  transition:border-color .3s var(--ease),transform .3s var(--ease-out),
             box-shadow .3s var(--ease),background-color .3s var(--ease);
}
.way b{
  font-size:1.04rem;
  font-weight:600;
  line-height:1.25;
  color:var(--ink);
}
.way span{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--ink-3);
}
.way::after{
  content:"→";
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  font-size:1.05rem;
  color:var(--brand-dark);
  transition:transform .35s var(--ease-out);
}
.way:hover,.way:focus-visible{
  border-color:rgba(180,84,96,.45);
  background:var(--paper-2);
  transform:translateY(-2px);
  box-shadow:0 18px 34px -24px rgba(27,42,68,.4);
}
.way:hover::after,.way:focus-visible::after{transform:translateY(-50%) translateX(4px)}

/* основной путь выделен заливкой */
.way-tg{
  border-color:transparent;
  background:var(--navy);
}
.way-tg b{color:var(--paper-2)}
.way-tg span{color:rgba(251,248,242,.72)}
.way-tg::after{color:var(--brand)}
.way-tg:hover,.way-tg:focus-visible{
  background:var(--ink);
  border-color:transparent;
}

/* ───── планшеты: приятная деталь на главной, аргумент у корпоративов ─────
   На главной это сноска на полях, набранная как выноска в книге:
   тонкая розовая черта, кегль чуть меньше основного. Не кричит. */
.hero-mob{
  position:relative;
  max-width:54ch;
  margin:0 auto clamp(20px,2.6vh,28px);
  padding-left:18px;
  text-align:left;
  font-size:.96rem;
  line-height:1.72;
  color:var(--ink-3);
}
.hero-mob::before{
  content:"";
  position:absolute;
  left:0;top:.42em;bottom:.42em;
  width:1.5px;
  border-radius:2px;
  background:linear-gradient(to bottom,var(--brand),rgba(216,120,132,.15));
}
.hero-mob b{
  color:var(--ink);
  font-weight:500;
}

/* четвёртая цифра в блоке-заявлении */
.fact-mob b{
  font-family:"Playfair Display",Georgia,serif;
  font-style:italic;
}

/* ───── у корпоративов тот же факт — уже козырь ─────
   Карточка с розовой подложкой, крупнее, с воздухом. */
.hero-biz .hero-mob{
  max-width:62ch;
  padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,30px);
  border-radius:18px;
  border:1px solid rgba(216,120,132,.3);
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(216,120,132,.11), transparent 66%),
    var(--paper-2);
  box-shadow:0 18px 40px -32px rgba(180,84,96,.5);
  font-size:1rem;
  color:var(--ink-2);
}
.hero-biz .hero-mob::before{display:none}
.hero-biz .hero-mob b{
  display:block;
  margin-bottom:7px;
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(1.14rem,2vw,1.42rem);
  font-weight:500;
  line-height:1.25;
  color:var(--ink);
}

/* карточка-отличие в списке «Что привозим» */
.inc-key{
  border-color:rgba(216,120,132,.34);
  background:
    radial-gradient(110% 130% at 100% 0%, rgba(216,120,132,.09), transparent 62%),
    var(--paper-2);
}
.inc-key .inc-n{color:var(--brand-dark)}

.form{
  display:grid;
  gap:14px;
  padding:clamp(24px,3vw,38px);
  border-radius:20px;
  background:var(--paper-2);
  border:1px solid var(--glass-line);
  
  box-shadow:0 30px 70px -38px rgba(27,42,68,0.03);
}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.f{display:block}
.f>span{
  display:block;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:700;
  margin-bottom:8px;
}
.f input,.f select,.f textarea{
  width:100%;
  padding:14px 16px;
  border-radius:11px;
  border:1px solid var(--glass-line);
  background:var(--paper);
  color:var(--ink);
  font-size:.98rem;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),
             box-shadow .3s var(--ease);
  appearance:none;
  -webkit-appearance:none;
}
.f textarea{resize:vertical;min-height:96px;line-height:1.5}
.f select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236f5f4c' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:42px;
  cursor:pointer;
}
.f select option{background:var(--paper-2);color:var(--ink)}
.f input::placeholder,.f textarea::placeholder{color:rgba(241,233,219,.38)}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;
  border-color:rgba(201,130,151,.6);
  background:#fff;
  box-shadow:0 0 0 3px rgba(201,130,151,.14);
}
.f input:user-invalid,.f select:user-invalid{border-color:rgba(201,130,151,.75)}

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

.form-note{
  font-size:.82rem;
  line-height:1.55;
  color:var(--ink-3);
  text-align:center;
}
.form-note a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}

.status{
  font-size:.9rem;
  line-height:1.5;
  padding:13px 16px;
  border-radius:11px;
  display:none;
}
.status.on{display:block}
.status.ok{background:rgba(63,122,78,.10);color:#255034;border:1px solid rgba(63,122,78,.4)}
.status.err{background:rgba(180,84,96,.10);color:var(--brand-deep);border:1px solid rgba(180,84,96,.45)}

.btn[aria-busy="true"]{opacity:.62;pointer-events:none}

/* ═══════════════════════════════════════════════════════════════════════
   18. КОРПОРАТИВНЫЙ БЛОК
   ═══════════════════════════════════════════════════════════════════════ */
.biz{position:relative;overflow:clip}
.biz-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px,5vw,70px);
  align-items:center;
  padding:clamp(30px,5vw,68px);
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(184,137,90,.26);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(184,137,90,.13), transparent 62%),
    linear-gradient(158deg, rgba(240,236,228,.07), rgba(240,236,228,.02));
  box-shadow:0 40px 90px -50px rgba(27,42,68,0.03);
}
.biz-card .kicker{display:block;margin-bottom:18px}
.biz-card .h2{margin-bottom:20px}
.biz-card .lead{margin-bottom:30px}

.biz-pts{display:grid;gap:14px;margin-bottom:32px}
.biz-pts li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:start;
  font-size:.96rem;
  line-height:1.5;
  color:var(--ink-2);
}
.biz-pts li::before{
  content:"";
  width:6px;height:6px;
  margin-top:.55em;
  border-radius:50%;
  background:var(--camel);
  flex:none;
}

/* ───── лягушка в блоке для компаний ───── */
.biz-frog{
  display:grid;
  place-items:center;
  padding:clamp(10px,2vw,24px);
}
.biz-frog img{
  width:min(100%,220px);
  height:auto;
  filter:drop-shadow(0 22px 26px rgba(27,42,68,.26));
  animation:biz-float 6.5s ease-in-out infinite;
}
@keyframes biz-float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-12px) rotate(1.4deg)}
}
@media (prefers-reduced-motion:reduce){ .biz-frog img{animation:none} }

/* ═══════════════════════════════════════════════════════════════════════
   19. ОТЗЫВЫ
   ═══════════════════════════════════════════════════════════════════════ */
.rvs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:14px;
}
.rv{
  position:relative;
  padding:clamp(24px,2.8vw,34px);
  border-radius:18px;
  border:1px solid var(--glass-line);
  background:var(--paper-2);
  transition:border-color .45s var(--ease),transform .45s var(--ease-out);
}
.rv:hover{border-color:rgba(184,137,90,.36);transform:translateY(-4px)}
.rv::before{
  content:"”";
  position:absolute;
  right:22px;top:6px;
  font-family:"Playfair Display",Georgia,serif;
  font-size:5rem;
  line-height:1;
  color:rgba(184,137,90,.2);
}
.rv p{
  font-size:1rem;
  line-height:1.6;
  color:var(--ink-2);
  margin-bottom:20px;
  position:relative;
}
.rv footer{display:grid;gap:3px}
.rv b{
  font-family:"Playfair Display",Georgia,serif;
  font-size:1.16rem;
  font-weight:500;
}
.rv span{font-size:.78rem;letter-spacing:.06em;color:var(--ink-3)}

/* логотипы клиентов — текстом, аккуратно */
.clients{
  display:flex;
  flex-wrap:wrap;
  gap:14px 34px;
  align-items:center;
}
.clients li{
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(1.1rem,2vw,1.5rem);
  color:var(--ink-3);
  letter-spacing:.04em;
  transition:color .4s var(--ease);
}
.clients li:hover{color:var(--camel-lit)}

/* ═══════════════════════════════════════════════════════════════════════
   20. КОНТАКТЫ И ПОДВАЛ
   ═══════════════════════════════════════════════════════════════════════ */
.cts{display:grid;gap:2px;max-width:640px}
.cts li{border-bottom:1px solid var(--ink-4)}
.cts a,.cts .val{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:19px 4px;
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(1.3rem,2.4vw,1.75rem);
  font-weight:400;
  transition:color .35s var(--ease),padding-left .4s var(--ease-out);
}
.cts a:hover{color:var(--camel-lit);padding-left:12px}
.cts .lbl{
  font-family:"Golos Text",system-ui,sans-serif;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:700;
  flex:none;
}
.cts-empty{
  padding:clamp(28px,4vw,44px);
  border:1px dashed var(--ink-4);
  border-radius:16px;
  color:var(--ink-3);
  font-size:.95rem;
}

.foot{
  border-top:1px solid var(--ink-4);
  padding-block:40px 46px;
}
.foot-in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px 30px;
}
.foot-c{font-size:.82rem;color:var(--ink-3);letter-spacing:.04em}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px 26px}
.foot-nav a{
  display:inline-block;
  font-size:.82rem;
  color:var(--ink-3);
  letter-spacing:.04em;
  padding-block:9px;
  transition:color .3s var(--ease);
}
.foot-nav a:hover{color:var(--camel-lit)}

/* кнопка «наверх» */
.up-btn{
  position:fixed;
  right:clamp(16px,2.6vw,30px);
  bottom:clamp(16px,2.6vw,30px);
  z-index:70;
  width:46px;height:46px;
  border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--glass-line);
  background:rgba(251,248,242,.92);
  
  color:var(--ink-2);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .45s var(--ease),transform .45s var(--ease-out),
             visibility .45s,border-color .35s,color .35s;
}
.up-btn.on{opacity:1;visibility:visible;transform:none}
.up-btn:hover{border-color:rgba(184,137,90,.5);color:var(--camel-lit)}

/* ═══════════════════════════════════════════════════════════════════════
   21. АДАПТИВ
   ═══════════════════════════════════════════════════════════════════════ */
.hero-stage{height:calc(520px * var(--ds,1))}

@media (max-width:1180px){
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:24px}
}
/* Сдвиг карточек — только шире 760px. Ниже работает свой блок,
   который ставит карточкам left; если сюда просочится ещё и right,
   карточка растянется от края до края. */
@media (max-width:1180px) and (min-width:761px){
  .gc-1{left:-4px}
  .gc-2{right:-2px}
}

@media (max-width:1080px){
  .nav{display:none}
}

@media (max-width:980px){
  .hero{min-height:auto;padding-block:clamp(104px,14vh,140px) 70px}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:clamp(34px,7vw,56px)}
  .hero-copy{order:1}
  .hero-stage{order:2}
  .doors{max-width:none}
  .cue{display:none}

  .stmt-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .stmt-side{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:24px 30px;
  }
  .try-in{grid-template-columns:minmax(0,1fr)}
  .form-wrap{grid-template-columns:minmax(0,1fr);gap:34px}
  .book-wrap{grid-template-columns:minmax(0,1fr);gap:34px}
  .evs-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .biz-card{grid-template-columns:minmax(0,1fr)}
  .biz-frog{order:-1}
  .biz-frog img{width:min(60%,170px)}
}

@media (max-width:860px){
  .fmt-in{grid-template-columns:minmax(0,1fr)}
  .fmt-meta{white-space:normal}
  .ev{
    grid-template-columns:auto minmax(0,1fr);
    row-gap:16px;
  }
  .ev-go{grid-column:1 / -1;justify-self:start}
  .ev:hover{transform:none}
}

@media (max-width:620px){
  .display{font-size:clamp(2.55rem,11.5vw,3.8rem)}
  .doors{grid-template-columns:minmax(0,1fr)}
  .qopts{grid-template-columns:minmax(0,1fr)}
  .form-2{grid-template-columns:minmax(0,1fr)}
  .tl-n{text-align:left;padding-right:0;font-size:.74rem}
  .tl{padding-left:0}
  .ev-date{min-width:0}
  .cts a,.cts .val{
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
  }
  .cts a:hover{padding-left:0}
  .foot-in{flex-direction:column;align-items:flex-start}
}

@media (max-width:420px){
  :root{--pad:18px}
  .fmt-btn{
    grid-template-columns:auto minmax(0,1fr) auto;
    row-gap:10px;
  }
  .fmt-n{grid-column:1 / -1}
  .qcard{padding:20px}
  .btn{padding:15px 24px;font-size:.88rem}
  .gcard{padding:10px 13px}
  .gcard b{font-size:1rem}
}

/* ═══════════════════════════════════════════════════════════════════════
   22. СПОКОЙНЫЙ РЕЖИМ — уважаем системную настройку пользователя
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .up{opacity:1;transform:none}
  .hero-h .ln>i{transform:none}
  .hero-sub,.doors,.dio-wrap{opacity:1;transform:none}
  .grain,.screen-scan,.motes{display:none}
  .stmt .w{opacity:1}
}

/* печать */
@media print{
  .night,.grain,#stars,.head,.mnav,.up-btn,.cue,.dio-wrap,.prog{display:none !important}
  body{background:#fff;color:#000}
  .sec{padding-block:20px}
}

/* ═══════════════════════════════════════════════════════════════════════
   23. СТРАНИЦА ДЛЯ КОМПАНИЙ
   ═══════════════════════════════════════════════════════════════════════ */
.hero-biz{min-height:auto;padding-block:clamp(120px,17vh,168px) clamp(50px,8vh,86px)}
.hero-in-biz{align-items:center}
.doors-biz{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  max-width:none;
}

/* что привозим */
.inc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2px;
}
.inc{
  position:relative;
  padding:clamp(24px,2.8vw,34px);
  border-radius:16px;
  border:1px solid transparent;
  box-shadow:0 0 0 1px var(--ink-4) inset;
  transition:border-color .45s var(--ease),background-color .45s var(--ease),
             transform .45s var(--ease-out),box-shadow .45s var(--ease);
}
.inc:hover{
  border-color:rgba(184,137,90,.36);
  background:var(--paper-2);
  transform:translateY(-4px);
  box-shadow:0 26px 60px -34px rgba(27,42,68,0.03);
}
.inc-n{
  display:block;
  font-size:.74rem;
  color:var(--camel);
  letter-spacing:.1em;
  margin-bottom:16px;
}
.inc .h3{margin-bottom:11px}
.inc p{font-size:.95rem;line-height:1.58;color:var(--ink-3)}

/* шаги */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(22px,3vw,34px);
  counter-reset:s;
}
.step{
  position:relative;
  padding-top:26px;
  border-top:1px solid var(--ink-4);
}
.step::after{
  content:"";
  position:absolute;
  left:0;top:-1px;
  width:100%;height:1px;
  background:linear-gradient(90deg,var(--camel),var(--brand));
  transition:width 1.1s var(--ease-out);
}
.step.in::after{width:100%}
.step.d1::after{transition-delay:.12s}
.step.d2::after{transition-delay:.24s}
.step.d3::after{transition-delay:.36s}
.step-n{
  display:block;
  font-size:.74rem;
  color:var(--camel);
  letter-spacing:.1em;
  margin-bottom:14px;
}
.step .h3{margin-bottom:10px}
.step p{font-size:.94rem;line-height:1.56;color:var(--ink-3)}

/* стоимость */
.price-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(30px,5vw,64px);
  align-items:start;
}
.price-pts{display:grid;gap:18px}
/* Раньше li был гридом на две колонки, а элементов сетки внутри
   оказывалось три: маркер, заголовок и «голый» текст, который браузер
   делает отдельным анонимным элементом. Три на две — текст сваливался
   во вторую строку, растягивал колонку маркера и выдавливал заголовок
   вправо, под карточку цены. Сетка тут не нужна. */
.price-pts li{
  position:relative;
  padding-left:20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--ink-4);
}
.price-pts li:last-child{border-bottom:0;padding-bottom:0}
.price-pts li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--camel);
}
.price-pts b{
  display:block;
  margin-bottom:5px;
  font-size:1.02rem;
  font-weight:700;
  line-height:1.3;
  color:var(--ink);
}
.price-pts span{
  display:block;
  font-size:1rem;
  line-height:1.6;
  color:var(--ink-3);
}

.price-card{
  position:sticky;
  top:clamp(88px,12vh,116px);
  padding:clamp(26px,3vw,36px);
  border-radius:20px;
  border:1px solid rgba(184,137,90,.3);
  background:
    radial-gradient(90% 100% at 100% 0%, rgba(184,137,90,.15), transparent 62%),
    var(--paper-2);
  box-shadow:0 30px 70px -38px rgba(27,42,68,0.03);
}
.price-card .kicker{display:block;margin-bottom:16px}
.price-val{
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(1.7rem,3.2vw,2.35rem);
  font-weight:400;
  line-height:1.08;
  color:var(--camel-lit);
  margin-bottom:14px;
}
.price-val.mono.has-num{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:clamp(1.5rem,2.8vw,2rem)}
.price-note{font-size:.9rem;line-height:1.55;color:var(--ink-3);margin-bottom:24px}

@media (max-width:980px){
  .hero-in-biz{grid-template-columns:minmax(0,1fr)}
  .price-grid{grid-template-columns:minmax(0,1fr)}
  .price-card{position:static}
}
@media (max-width:620px){
  .doors-biz{flex-direction:column;align-items:stretch}
  .doors-biz .btn{width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════
   24. КИНО «КАК УСТРОЕН ВЕЧЕР» — нырок в глубину
   Секция прилипает, камера летит вперёд сквозь раунды: дальние сцены
   маленькие и размытые, ближняя читается, пройденная пролетает мимо.
   ═══════════════════════════════════════════════════════════════════════ */
.cine{position:relative}

.cine-sticky{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  display:grid;
  place-items:center;
  perspective:1200px;
}

/* мягкие световые пятна в глубине */
.cine-bg{position:absolute;inset:-10% -5%;pointer-events:none}
.cine-bg i{position:absolute;display:block;border-radius:50%;will-change:transform}
.cl-far{
  left:4%;top:6%;
  width:52vw;height:52vw;max-width:700px;max-height:700px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(36,54,92,.08), transparent 70%);
  filter:blur(20px);
  transform:translate3d(0,var(--far,0px),0);
}
.cl-mid{
  right:2%;bottom:4%;
  width:44vw;height:44vw;max-width:580px;max-height:580px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(216,120,132,.13), transparent 70%);
  filter:blur(24px);
  transform:translate3d(0,var(--mid,0px),0);
}
.cl-near{
  left:36%;top:50%;
  width:26vw;height:26vw;max-width:330px;max-height:330px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(240,220,192,.5), transparent 68%);
  filter:blur(16px);
  transform:translate3d(0,var(--near,0px),0);
}

/* на перерыве свет чуть притухает */
.cine-dim{
  position:absolute;inset:0;
  background:var(--ink);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--ease);
}
.cine.pause .cine-dim{opacity:.05}

/* счётчик туров */
.cine-count{
  display:none !important;
  position:absolute;
  top:clamp(90px,13vh,124px);
  right:var(--pad);
  display:flex;
  align-items:baseline;
  gap:4px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  color:var(--taupe-ink);
  font-size:.8rem;
  z-index:20;
}
.cine-count b{
  font-size:2.5rem;
  font-weight:400;
  line-height:1;
  color:var(--ink);
  min-width:2ch;
  text-align:right;
}

.cine-stage{
  position:relative;
  width:100%;
  max-width:var(--maxw);
  padding-inline:var(--pad);
  height:100%;
  transform-style:preserve-3d;
}

/* ───── сцена ───── */
.cs{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  gap:clamp(26px,5vw,80px);
  padding:clamp(104px,15vh,160px) 0 clamp(70px,10vh,110px) clamp(72px,9vw,132px);
  visibility:hidden;
  pointer-events:none;
  will-change:transform,opacity;
}
/* реквизит живёт в глубине: уменьшается, размывается, пролетает мимо */
.cs-art{
  opacity:var(--cop,0);
  /* чем дальше сцена, тем ближе её предмет к центру кадра:
     так дальние вещи не наползают на текст ближней */
  transform:translate3d(var(--cx,0%),var(--cy,0px),0) scale(var(--cscale,1));
  filter:blur(var(--cb,0px));
  transform-origin:50% 46%;
}
/* текст читается только у ближайшей сцены — иначе он наползает */
.cs-copy{
  opacity:var(--ctext,0);
  transform:translate3d(0,calc(var(--cy,0px) * .34),0);
  transition:opacity .22s var(--ease);
}
.cs.vis{visibility:visible}

.cs-copy{grid-column:1;min-width:0}
.cs[data-side="r"] .cs-copy{grid-column:2}
.cs-art{grid-column:2;display:grid;place-items:center;min-width:0}
.cs[data-side="r"] .cs-art{grid-column:1;grid-row:1}

.cs-n{
  display:block;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.74rem;
  letter-spacing:.2em;
  color:var(--taupe-ink);
  margin-bottom:20px;
}
.cs-h{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:400;
  font-size:clamp(2.3rem,5.6vw,4.4rem);
  line-height:1.02;
  letter-spacing:-.015em;
  margin-bottom:20px;
  color:var(--ink);
}
.cs-t{
  font-size:clamp(1rem,1.5vw,1.16rem);
  line-height:1.62;
  color:var(--ink-2);
  max-width:38ch;
}
.cs-tag{
  display:inline-block;
  margin-top:24px;
  padding:7px 16px;
  border-radius:100px;
  border:1px solid var(--ink-4);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--taupe-ink);
}

/* реквизит — теперь картинка */
.prop{
  width:min(100%,360px);
  height:auto;
  filter:drop-shadow(0 26px 30px rgba(27,42,68,.18));
}
.cs.vis .prop{animation:prop-float 7s ease-in-out infinite}
@keyframes prop-float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-12px) rotate(.8deg)}
}

/* ───── путь этапов: пунктир с узлами, как карта уровня ───── */
.cine-path{
  position:absolute;
  left:clamp(22px,3.4vw,50px);
  top:50%;
  transform:translateY(-50%);
  height:min(62vh,540px);
  width:34px;
  z-index:20;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
}
/* сам пунктир */
.cp-track{
  position:absolute;
  left:50%;top:6px;bottom:6px;
  width:2px;
  margin-left:-1px;
  background:repeating-linear-gradient(180deg,
    var(--ink-4) 0 5px, transparent 5px 11px);
}
/* пройденная часть — сплошная */
.cp-fill{
  position:absolute;
  left:50%;top:6px;
  width:2px;
  margin-left:-1px;
  height:var(--fill,0%);
  background:var(--brand-dark);
  transition:height .12s linear;
}
/* бегущий огонёк */
.cp-bead{
  position:absolute;
  left:50%;
  top:calc(6px + var(--fill,0%));
  width:10px;height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:var(--brand-dark);
  box-shadow:0 0 0 5px rgba(216,120,132,.22);
  transition:top .12s linear;
}
/* узлы-этапы */
.cn{
  position:relative;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--paper);
  border:1.5px solid var(--ink-4);
  display:grid;
  place-items:center;
  transition:transform .4s var(--ease-out),border-color .4s var(--ease),
             background-color .4s var(--ease);
}
.cn b{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.5rem;
  font-weight:400;
  color:var(--ink-4);
  transition:color .4s var(--ease);
}
.cn.done{border-color:var(--brand-dark);background:var(--brand-dark)}
.cn.done b{color:#fff}
.cn.on{
  transform:scale(1.55);
  border-color:var(--brand-dark);
  background:var(--paper-2);
}
.cn.on b{color:var(--brand-deep);font-weight:700}

.cine-skip{
  position:absolute;
  right:var(--pad);
  bottom:clamp(30px,5vh,56px);
  z-index:20;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 20px;
  border-radius:100px;
  border:1px solid var(--ink-4);
  background:var(--paper-2);
  font-size:.8rem;
  color:var(--ink-2);
  transition:border-color .35s,color .35s;
}
.cine-skip:hover{border-color:var(--ink);color:var(--ink)}

/* лягушка-комментатор */
.cine-frog{
  position:absolute;
  right:var(--pad);
  bottom:clamp(74px,12vh,126px);
  width:clamp(68px,7vw,104px);
  z-index:18;
  visibility:hidden;
}
.cine-frog img{width:100%;height:auto;filter:drop-shadow(0 12px 16px rgba(27,42,68,.28))}
.cine-frog.on{visibility:visible}
.anim .cine-frog{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease-out)}
.anim .cine-frog.on{opacity:1;transform:none}

@media (max-width:980px){
  .cs{grid-template-columns:minmax(0,1fr);gap:24px;align-content:center;text-align:center}
  .cs-copy,.cs[data-side="r"] .cs-copy{grid-column:1;grid-row:2}
  .cs-art,.cs[data-side="r"] .cs-art{grid-column:1;grid-row:1}
  .cs-t{margin-inline:auto}
  .prop{width:min(54vw,230px)}
  .cine-frog{display:none}
  .cine-count{top:auto;bottom:clamp(30px,5vh,56px);right:var(--pad)}
  .cine-count b{font-size:1.7rem}
  .cine-skip{display:none}
}
@media (max-width:620px){
  .cs-h{font-size:clamp(2rem,8.5vw,2.7rem)}
  .prop{width:min(48vw,185px)}
}

/* ═══════════════════════════════════════════════════════════════════════
   25. ФОТОГРАФИИ, ТАБЛИЦА ЛИДЕРОВ, ПРИМЕР ИГРЫ
   ═══════════════════════════════════════════════════════════════════════ */

/* укороченный первый экран на внутренних страницах */
.hero-slim{min-height:auto;padding-block:clamp(120px,16vh,168px) clamp(30px,5vh,56px)}

/* ───── галерея ───── */
.gal{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
  gap:clamp(12px,1.6vw,20px);
}
.gal-i{margin:0}
.gal-b{
  display:block;
  width:100%;
  padding:0;
  border:1px solid var(--ink-4);
  border-radius:16px;
  overflow:hidden;
  background:var(--paper-3);
  cursor:zoom-in;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease),border-color .3s var(--ease);
}
.gal-b img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.gal-b:hover,.gal-b:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(216,120,132,.44);
  box-shadow:0 22px 44px -28px rgba(27,42,68,.45);
}
.gal-i figcaption{
  margin-top:9px;
  font-size:.84rem;
  line-height:1.45;
  color:var(--ink-3);
}
.gal-empty{
  grid-column:1/-1;
  padding:clamp(28px,5vw,48px);
  border:1px dashed var(--ink-4);
  border-radius:18px;
  text-align:center;
  background:var(--paper-2);
}
.gal-empty p{margin:0;font-size:1.02rem;color:var(--ink-2)}
.gal-empty-s{margin-top:8px !important;font-size:.88rem !important;color:var(--ink-3) !important}

/* крупный просмотр */
.lb{
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  place-items:center;
  gap:14px;
  padding:clamp(18px,4vw,48px);
  background:rgba(27,42,68,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.lb[hidden]{display:none}
.lb img{
  max-width:100%;
  max-height:78vh;
  border-radius:14px;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.7);
}
.lb-cap{
  margin:0;
  max-width:62ch;
  text-align:center;
  font-size:.92rem;
  color:rgba(251,248,242,.86);
}
.lb-cap:empty{display:none}
.lb-x{
  position:absolute;
  top:clamp(12px,2vw,24px);
  right:clamp(12px,2vw,24px);
  width:44px;height:44px;
  border:0;
  border-radius:12px;
  background:rgba(251,248,242,.14);
  color:var(--paper-2);
  font-size:1.7rem;
  line-height:1;
  cursor:pointer;
  transition:background-color .25s var(--ease);
}
.lb-x:hover{background:rgba(251,248,242,.26)}

/* ───── таблица лидеров ───── */
.ld{
  width:100%;
  border-collapse:collapse;
  font-size:.96rem;
}
.ld-cap{
  caption-side:top;
  text-align:left;
  padding-bottom:14px;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--taupe-ink);
}
.ld th,.ld td{
  padding:13px 12px;
  border-bottom:1px solid var(--ink-4);
  text-align:left;
  vertical-align:baseline;
}
.ld thead th{
  padding-top:0;
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.ld-n{width:46px;color:var(--ink-3)}
.ld-num{text-align:right;width:74px}
.ld-team{font-weight:500;color:var(--ink)}
.ld-pts{font-weight:600;color:var(--ink)}
.ld tbody tr:last-child th,.ld tbody tr:last-child td{border-bottom:0}
.ld-top .ld-n{color:var(--brand-dark);font-weight:600}
.ld-top .ld-pts{color:var(--brand-dark)}
.ld tbody tr{transition:background-color .25s var(--ease)}
.ld tbody tr:hover{background:var(--paper-2)}

/* ───── тот же пакет статическим текстом ─────
   Виден, пока не запустился скрипт, и остаётся в коде для поисковиков.
   Оформлен по-человечески: если у гостя отключены скрипты, он всё равно
   получит читаемую страницу, а не свалку. */
.gm-static[hidden]{display:none}
.gs-r{
  padding:clamp(18px,2.6vw,28px);
  border:1px solid var(--ink-4);
  border-radius:18px;
  background:var(--paper-2);
  margin-bottom:14px;
}
.gs-h{
  margin:0 0 8px;
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(1.2rem,2.4vw,1.5rem);
  font-weight:500;
}
.gs-rule{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--taupe-ink);
  white-space:nowrap;
}
.gs-about{margin:0 0 16px;font-size:.92rem;line-height:1.6;color:var(--ink-3)}
.gs-qs{margin:0;padding-left:20px;display:grid;gap:22px}
.gs-qs > li::marker{color:var(--brand-dark);font-family:"JetBrains Mono",monospace;font-size:.8rem}
.gs-q{margin:0 0 10px;font-size:1rem;line-height:1.5;color:var(--ink)}
.gs-qs img{
  display:block;
  max-width:min(100%,420px);
  height:auto;
  border-radius:11px;
  margin:0 0 10px;
  background:var(--paper-3);
}
.gs-o{margin:0 0 10px;padding-left:18px;font-size:.93rem;color:var(--ink-2)}
.gs-o li.right{color:var(--ink);font-weight:600}
.gs-a{
  margin:0;
  padding:9px 13px;
  border-radius:9px;
  background:var(--paper-3);
  font-size:.93rem;
  color:var(--ink);
}

/* ───── игра: настоящий пакет прямо на странице ───── */
.game{
  border:1px solid var(--ink-4);
  border-radius:20px;
  background:var(--paper-2);
  overflow:hidden;
}

/* полоска туров */
.gm-tabs{
  display:flex;
  gap:2px;
  padding:10px 10px 0;
  overflow-x:auto;
  scrollbar-width:none;
  border-bottom:1px solid var(--ink-4);
  background:var(--paper-3);
}
.gm-tabs::-webkit-scrollbar{display:none}
.gm-tab{
  flex:none;
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  padding:10px 14px;
  border:0;
  border-radius:11px 11px 0 0;
  background:transparent;
  font:inherit;
  font-size:.86rem;
  color:var(--ink-3);
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.gm-tab b{font-size:.72rem;font-weight:500;color:var(--taupe-ink)}
.gm-tab:hover{background:rgba(251,248,242,.6);color:var(--ink)}
.gm-tab.on{background:var(--paper-2);color:var(--ink)}
.gm-tab.on b{color:var(--brand-dark)}

.gm-stage{padding:clamp(18px,2.8vw,32px)}
.gm-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 14px;
  margin-bottom:6px;
}
.gm-n{font-size:.74rem;letter-spacing:.1em;color:var(--brand-dark)}
.gm-h{
  margin:0;
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(1.3rem,2.6vw,1.72rem);
  font-weight:500;
}
.gm-rule{
  margin-left:auto;
  font-size:.74rem;
  letter-spacing:.04em;
  color:var(--taupe-ink);
  white-space:nowrap;
}
.gm-note{
  display:grid;
  gap:8px;
  margin:0 0 20px;
  max-width:74ch;
}
.gm-about{
  font-size:.92rem;
  line-height:1.6;
  color:var(--ink-3);
}
.gm-cut{
  padding-left:14px;
  border-left:1.5px solid rgba(216,120,132,.45);
  font-size:.84rem;
  line-height:1.55;
  color:var(--taupe-ink);
}
.gm-note[hidden]{display:none}
.gm-note:empty{display:none}

/* сам вопрос */
.gm-q{min-height:clamp(220px,36vh,340px)}
.gm-text{
  margin:0 0 16px;
  padding-left:16px;
  border-left:2px solid var(--brand);
  font-size:clamp(1.04rem,1.6vw,1.2rem);
  line-height:1.5;
  color:var(--ink);
}
.gm-quiet{color:var(--ink-3);font-size:.9rem;border:0;padding-left:0}

.gm-pics{margin:0 0 18px}
.gm-pics-m{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:10px;
}
/* Картинка не должна съедать экран: вопрос и варианты
   обязаны помещаться вместе с ней. */
.gm-shot,.gm-ashot{
  display:block;
  width:100%;
  max-height:min(30vh,250px);
  object-fit:contain;
  border-radius:13px;
  background:var(--paper-3);
}
.gm-ashot{max-height:min(38vh,320px)}
.gm-pics-m .gm-shot{max-height:170px;object-fit:cover}

.gm-opts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:8px;
  margin:0 0 18px;
  padding:0;
  list-style:none;
}
.gm-opts li{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:11px 15px;
  border:1px solid var(--ink-4);
  border-radius:11px;
  background:var(--paper);
  font-size:.95rem;
  color:var(--ink-2);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.gm-opts b{flex:none;font-size:.76rem;font-weight:500;color:var(--taupe-ink)}
.gm-opts li.right{
  border-color:rgba(47,122,85,.5);
  background:rgba(47,122,85,.08);
  color:var(--ink);
}
.gm-opts li.right b{color:#2f7a55}

.gm-ans{
  margin:0 0 18px;
  padding:16px 18px;
  border-radius:13px;
  background:var(--paper-3);
}
.gm-ans[hidden]{display:none}
.gm-right{margin:0 0 10px;font-weight:600;color:var(--ink)}
.gm-right:last-child{margin-bottom:0}
.gm-ans .gm-pics{margin-bottom:0}
.gm-rev{font-size:.86rem}

/* навигация */
.gm-act{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:clamp(16px,2.4vw,24px);
  padding-top:clamp(14px,2vw,20px);
  border-top:1px solid var(--ink-4);
}
.gm-pos{
  margin-inline:auto;
  font-size:.82rem;
  color:var(--ink-3);
}
.gm-act .btn{font-size:.88rem}
.gm-act .btn:disabled{opacity:.35;cursor:not-allowed}

@media (max-width:560px){
  .gm-rule{margin-left:0;flex-basis:100%}
  .gm-act{flex-wrap:wrap}
  .gm-pos{order:-1;flex-basis:100%;text-align:center;margin:0 0 4px}
  .gm-act .btn{flex:1}
}

@media (max-width:620px){
  .rnd-rule{margin-left:0;flex-basis:100%}
  .ld th,.ld td{padding:11px 7px}
  .ld-num{width:56px}
}

/* ───── блок «коротко о нас» ───── */
.seo-cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(24px,4vw,56px);
}
.seo-cols .h3{
  margin:0 0 8px;
  font-family:"Playfair Display",Georgia,serif;
  font-size:1.16rem;
  font-weight:500;
}
.seo-cols .h3 + p{margin-top:0}
.seo-cols p{
  margin:0 0 22px;
  font-size:.95rem;
  line-height:1.68;
  color:var(--ink-3);
}
.seo-cols p:last-child{margin-bottom:0}
.seo-cols a{
  color:var(--brand-dark);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(180,84,96,.4);
  transition:text-decoration-color .3s var(--ease);
}
.seo-cols a:hover{text-decoration-color:var(--brand-dark)}

/* ───── страница 404 ───── */
.e404{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(40px,8vh,90px) 0;
}
.e404-in{text-align:center;max-width:640px}
.e404-frog{
  width:clamp(96px,16vw,144px);
  height:auto;
  margin:0 auto clamp(18px,3vh,28px);
  display:block;
  filter:drop-shadow(0 12px 22px rgba(27,42,68,.2));
}
.e404 .kicker{display:block;margin-bottom:14px}
.e404-h{
  font-size:clamp(2.1rem,7vw,3.6rem);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0 0 18px;
}
.e404-h em{font-style:italic;color:var(--taupe)}
.e404-l{
  margin:0 auto clamp(26px,4vh,36px);
  max-width:46ch;
  color:var(--ink-2);
}
.e404-ways{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-bottom:clamp(30px,5vh,44px);
}
.e404-nav{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  justify-content:center;
  padding-top:clamp(20px,3vh,28px);
  border-top:1px solid var(--ink-4);
}
.e404-nav a{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  padding:8px 13px;
  border-radius:9px;
  font-size:.9rem;
  color:var(--ink-2);
  text-decoration:none;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.e404-nav a:hover{background:var(--paper-3);color:var(--ink)}
.e404-nav b{font-size:.72rem;font-weight:500;color:var(--taupe-ink)}

/* ═══════════════════════════════════════════════════════════════════════
   26. ЗНАЧКИ ФОРМАТОВ
   ═══════════════════════════════════════════════════════════════════════ */
.fmt-ic{
  width:clamp(38px,4vw,50px);
  height:auto;
  flex:none;
  overflow:visible;
}
.fmt-ic .st{
  fill:none;
  stroke:var(--camel);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .45s var(--ease);
}
.fmt-ic .st-thin{fill:none;stroke:var(--ink-3);stroke-width:1.3;stroke-linecap:round}
.fmt-ic .dot{fill:var(--brand);transition:fill .45s var(--ease)}
.fmt-ic .soft{fill:rgba(184,137,90,.16);stroke:none;transition:fill .45s var(--ease)}
.fmt.open .fmt-ic .st{stroke:var(--camel-lit)}
.fmt.open .fmt-ic .dot{fill:var(--brand-lit)}
.fmt.open .fmt-ic .soft{fill:rgba(201,130,151,.2)}
/* значок слегка оживает при раскрытии */
.fmt.open .fmt-ic{animation:ic-pop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes ic-pop{
  0%{transform:scale(1) rotate(0deg)}
  45%{transform:scale(1.12) rotate(-5deg)}
  100%{transform:scale(1) rotate(0deg)}
}

/* ═══════════════════════════════════════════════════════════════════════
   27. ПОДВАЛ
   ═══════════════════════════════════════════════════════════════════════ */
.foot{
  position:relative;
  border-top:1px solid var(--ink-4);
  padding-block:clamp(48px,7vh,80px) clamp(30px,4vh,44px);
  margin-top:clamp(40px,6vh,80px);
}
.foot-top{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);
  align-items:start;
  margin-bottom:clamp(36px,6vh,60px);
}
.foot-word{
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(2.4rem,6vw,4.4rem);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.02em;
  margin-bottom:14px;
}
.foot-word em{font-style:italic;color:var(--camel-lit)}
.foot-line{font-size:.92rem;color:var(--ink-3);max-width:34ch}

.foot-col h3{
  font-family:"Golos Text",system-ui,sans-serif;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--camel);
  font-weight:700;
  margin-bottom:16px;
}
.foot-col ul{display:grid;gap:2px}
.foot-col a{
  display:inline-block;
  padding-block:8px;
  font-size:.94rem;
  color:var(--ink-2);
  transition:color .3s var(--ease),transform .35s var(--ease-out);
}
.foot-col a:hover{color:var(--camel-lit);transform:translateX(4px)}

.foot-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px 30px;
  padding-top:clamp(22px,3vh,30px);
  border-top:1px solid var(--ink-4);
}


@media (max-width:860px){
  .foot-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-word{grid-column:1 / -1}
}
@media (max-width:560px){
  .foot-top{grid-template-columns:minmax(0,1fr);gap:30px}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}

.prop .txt-xl{font-size:36px}

/* ═══════════════════════════════════════════════════════════════════════
   29. РУКОПИСНЫЕ ПОМЕТКИ
   Три места на весь сайт — больше нельзя, иначе уходит в колхоз.
   ═══════════════════════════════════════════════════════════════════════ */
.hand{
  display:inline-block;
  font-family:"Caveat",cursive;
  font-size:clamp(1.1rem,1.7vw,1.4rem);
  line-height:1.15;
  color:var(--brand-dark);
  transform:rotate(-2.4deg);
}
.hand-note{
  position:relative;
  margin-top:20px;
  padding-left:34px;
}
/* стрелка от руки */
.hand-note::before{
  content:"";
  position:absolute;
  left:2px;top:2px;
  width:24px;height:22px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M2 2c4 9 10 14 19 15' fill='none' stroke='%23b45460' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M15 15l6 2-3 4' fill='none' stroke='%23b45460' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:.75;
}


/* ═══════════════════════════════════════════════════════════════════════
   30. ЛЯГУШКА В ЛОГОТИПЕ И В ПОДВАЛЕ
   ═══════════════════════════════════════════════════════════════════════ */
.brand-frog{
  width:clamp(26px,3vw,34px);
  height:auto;
  flex:none;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover .brand-frog{transform:translateY(-3px) rotate(-6deg)}

/* лягушка сидит НА линии подвала, а не висит обрезком над ней */
.foot{overflow:visible}
.foot-frog{
  position:absolute;
  right:calc(var(--pad) + 4px);
  bottom:100%;
  margin-bottom:-2px;
  width:clamp(76px,9vw,116px);
  pointer-events:none;
  z-index:2;
}
.foot-frog img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 8px 10px rgba(27,42,68,.22));
}

@media (max-width:860px){
  .foot-frog{width:70px;right:var(--pad)}
}

@media (max-width:900px){
}

@media (max-width:980px){
  .cine-path{
    left:0;right:0;top:auto;
    bottom:clamp(26px,4vh,44px);
    transform:none;
    width:auto;
    height:22px;
    flex-direction:row;
    padding-inline:var(--pad);
  }
  .cp-track{left:var(--pad);right:var(--pad);top:50%;bottom:auto;
    width:auto;height:2px;margin:-1px 0 0;
    background:repeating-linear-gradient(90deg,var(--ink-4) 0 5px,transparent 5px 11px)}
  .cp-fill{left:var(--pad);top:50%;height:2px;width:var(--fill,0%);margin:-1px 0 0}
  .cp-bead{left:calc(var(--pad) + var(--fill,0%));top:50%;margin:-5px 0 0 -5px}
  .cn{width:18px;height:18px}
  .cn b{font-size:.44rem}
  .cs{padding-left:0}
}