/* page / wacis.zavod */
/* =========================================================================
   КОНТЕНТ-ЗАВОД — ОФОРМЛЕНИЕ ОДНОЙ СТРАНИЦЫ

   Файл приезжает ТОЛЬКО на эту страницу: он принадлежит её виду
   (wacis.zavod), а виды отдаются отдельными файлами — см. lib/ViewAssets.php.
   Поэтому здесь можно позволить себе и свой фон документа, и правку
   общей шапки: на остальных страницах сайта ничего этого не будет.

   ЧТО ЗА ВИД
   Тёмное полотно, крупная типографика, много воздуха и цвет ВКонтакте
   в свечениях и подсветках. Обычная светлая тема сайта здесь отключена
   намеренно: страница продаёт сервис для чужой соцсети, и говорить она
   должна на её языке.

   ПРАВИЛО ПРО ДВИЖЕНИЕ
   Ничего не прячем стилями сами по себе. Прятать разрешено только когда
   сценарий поставил на корне признак data-anim — иначе страница без
   сценариев осталась бы наполовину пустой. Это уже случалось, второй раз
   не надо.
   ========================================================================= */

.zv {
  /*
   * ЦВЕТ ПЛОЩАДКИ — ОДНИМ НАБОРОМ ПЕРЕМЕННЫХ.
   *
   * Страниц завода теперь пять: ВКонтакте, MAX, Telegram, Facebook и
   * Instagram. Вёрстка и оформление у них общие, разный только цвет —
   * и он обязан меняться в ОДНОМ месте, а не в семнадцати.
   *
   * Раньше половина мест брала переменную, а половина писала
   * rgba(0,119,255,…) прямо в правиле. Пока страница была одна, это
   * ничему не мешало; на второй такой разнобой означает, что синий ВК
   * проступает сквозь бирюзовый Telegram — и не там, где ищешь.
   *
   * --acc-rgb нужен отдельно: rgba() не умеет разбирать #0077ff, а
   * прозрачность здесь на каждом втором свечении.
   */
  --acc:       #0077ff;   /* основной цвет площадки            */
  --acc-soft:  #3d9bff;   /* он же светлее — надписи и градиент */
  --acc-hi:    #1183ff;   /* наведение на кнопку                */
  --acc-pale:  #bcd9ff;   /* текст на полупрозрачной плашке     */
  --acc-rgb:   0, 119, 255;
  --violet:    #6f4dff;   /* второй цвет градиента              */
  --bg:        #05060a;
  --bg-2:      #090c14;
  --ink:       #f4f7fb;
  --mute:      #96a2b8;
  --line:      rgba(255, 255, 255, .09);
  --line-2:    rgba(255, 255, 255, .16);
  --glass:     rgba(255, 255, 255, .035);
  --ease:      cubic-bezier(.22, .61, .18, 1);

  background: var(--bg);
  color: var(--ink);
  overflow: clip;                 /* свечения не должны давать прокрутку вбок */
}

/* =========================================================================
   ЦВЕТА ПЛОЩАДОК

   Вёрстка у всех пяти страниц одна и та же, свой у каждой только цвет.
   Поэтому здесь — ровно переменные и ничего больше: правило, которое
   заведётся тут по недосмотру, достанется одной странице и будет
   искаться на остальных четырёх.

   Значения взяты с фирменных цветов самих площадок. У Instagram
   фирменного ОДНОГО цвета нет — там растяжка, поэтому основным взят
   её розовый, а оранжевый и фиолетовый ушли в градиент.
   ========================================================================= */

/* MAX */
.zv--max {
  --acc: #5c4eff;  --acc-soft: #8f7bff;  --acc-hi: #6d60ff;
  --acc-pale: #d6d0ff;  --acc-rgb: 92, 78, 255;  --violet: #a24dff;
}

/* Telegram */
.zv--tg {
  --acc: #2aabee;  --acc-soft: #5ec4f5;  --acc-hi: #3bb6f3;
  --acc-pale: #c3e7fa;  --acc-rgb: 42, 171, 238;  --violet: #229ed9;
}

/* Facebook */
.zv--fb {
  --acc: #1877f2;  --acc-soft: #4e9bff;  --acc-hi: #2a85ff;
  --acc-pale: #cbdffd;  --acc-rgb: 24, 119, 242;  --violet: #0b4fbd;
}

/* Instagram */
.zv--ig {
  --acc: #dd2a7b;  --acc-soft: #f58529;  --acc-hi: #e8437f;
  --acc-pale: #ffd0e2;  --acc-rgb: 221, 42, 123;  --violet: #8134af;
}

/* =========================================================================
   ЦВЕТА ВЫПУСКОВ

   Истории и статьи — не площадки, а то, ЧТО завод делает. Брать цвет
   неоткуда: у «истории» нет фирменного знака, и притворяться, будто
   есть, нечестно перед читателем — он привык, что цвет на этих
   страницах означает площадку.
   Поэтому цвет выбран по смыслу выпуска и нарочно не похож ни на одну
   из пяти площадок выше:

     истории — тёплый коралл: выпуск быстрый, живёт сутки, ритм дневной;
     статьи  — спокойный изумруд: выпуск долгий, текст живёт годами.
   ========================================================================= */

/* Истории */
.zv--istorii {
  --acc: #ff5c39;  --acc-soft: #ff9a6b;  --acc-hi: #ff6f4f;
  --acc-pale: #ffd8c9;  --acc-rgb: 255, 92, 57;  --violet: #ff9d2e;
}

/* Статьи */
.zv--stati {
  --acc: #17b97f;  --acc-soft: #57d6a6;  --acc-hi: #29c78d;
  --acc-pale: #c3f0dd;  --acc-rgb: 23, 185, 127;  --violet: #0d9488;
}

/* =========================================================================
   ОГОВОРКА ПРО ПЛОЩАДКУ

   Пишется там, где названа сама площадка: под первым экраном и внизу
   страницы. Не всплывашкой и не сноской мелким серым — оговорка,
   которую надо искать, своей задачи не выполняет.

   Цветом не выделяем: это не предупреждение об опасности и не реклама,
   а обязательная приписка. Красная плашка на первом экране читалась бы
   как «у сервиса что-то сломано».
   ========================================================================= */
.zv-warn {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: clamp(18px, 2vw, 26px);
  padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--glass);
  font-size: 13px; line-height: 1.55; color: var(--mute);
}
.zv-warn svg { flex: none; width: 17px; height: 17px; margin-top: 1px; opacity: .8; }
.zv-warn b { color: var(--ink); font-weight: 600; }

/* Внизу страницы та же оговорка стоит одна, без соседей — ей нужен
   свой отступ сверху, иначе она липнет к последнему разделу. */
.zv-warn--foot { margin-top: 0; max-width: 72ch; }

/* Полотно документа — тоже тёмное: иначе под подвалом и над шапкой
   светится белая полоса при перепрокрутке. */
body:has(.zv) { background: #05060a; }

.zv ::selection { background: rgba(var(--acc-rgb), .35); }

/* --- ШАПКА САЙТА НА ЭТОЙ СТРАНИЦЕ ------------------------------------
   Синяя плашка поверх чёрного полотна выглядит заплаткой. Делаем её
   стеклянной: содержимое под ней просвечивает, граница — волосок. */
body:has(.zv) .site-header,
body:has(.zv) .site-header--dark {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
/*
 * СТЕКЛО — НА ПОДЛОЖКЕ, А НЕ НА САМОЙ ШАПКЕ.
 *
 * backdrop-filter на элементе делает его «содержащим блоком» для
 * потомков с position: fixed. А внутри шапки как раз такой потомок —
 * выездная панель меню: она стоит справа за краем экрана и ждёт
 * нажатия. Привязавшись к шапке вместо окна, она начала считаться её
 * содержимым, и страница на телефоне поехала вбок на 330 пикселей.
 *
 * Псевдоэлемент такого не делает: размывает он, а содержащим блоком
 * остаётся окно.
 */
body:has(.zv) .site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(5, 6, 10, .72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

/* Ширина — как у шапки и всего сайта. */
.zv-wrap { width: min(100% - 40px, 1320px); margin-inline: auto; }
@media (max-width: 600px) { .zv-wrap { width: calc(100% - 32px); } }

.zv section { position: relative; }
/* Разделы дышат, но не зияют: было clamp(84,12vw,168) — на большом
   экране между блоками получалась пустая страница высотой в экран. */
.zv-sec { padding: clamp(56px, 6.5vw, 96px) 0; }
.zv-sec--tight { padding: clamp(36px, 4vw, 56px) 0; }

/*
 * СБРОС ТОЛЬКО ДЛЯ БЕЗЫМЯННЫХ.
 *
 * Было «.zv p { margin: 0 }» и то же для заголовков. Селектор из класса
 * и тега (0,1,1) старше одиночного класса (0,1,0) — значит КАЖДОЕ моё
 * правило вида «.zv-acts { margin-top: … }» молча проигрывало сбросу.
 * Отступы в первом экране не работали ни разу: сколько ни правь число,
 * на странице ничего не менялось.
 *
 * Теперь сброс касается только тех абзацев и заголовков, у которых нет
 * класса. Есть класс — значит про отступ уже подумали.
 */
.zv h1, .zv h2, .zv h3 { font-family: var(--font-display); color: var(--ink); }
/*
 * Сила сброса намеренно МИНИМАЛЬНА.
 *
 * «.zv h2:not([class])» весит (0,2,1) и перебивает даже «.zv-final h2»
 * (0,1,1) — из-за этого заголовок и абзац в финальном блоке теряли
 * «margin-inline: auto» и прижимались влево, хотя блок центрирован.
 *
 * :where() не добавляет веса, поэтому сброс теперь слабее любого
 * осмысленного правила и перебивает только браузерное умолчание.
 */
:where(.zv) :where(h1, h2, h3, p):not([class]) { margin: 0; }

.zv-h2 {
  font-size: clamp(30px, 4.4vw, 60px); line-height: 1.06;
  letter-spacing: -.03em; font-weight: 800;
  max-width: 16ch;
}
.zv-lead {
  margin-top: clamp(18px, 2vw, 26px);
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65;
  color: var(--mute); max-width: 54ch;
}

/* Микро-плашка над заголовком */
.zv-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--glass);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mute);
}
.zv-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 12px 2px rgba(var(--acc-rgb), .8);
}

/* =========================================================== ПЕРВЫЙ ЭКРАН */
.zv-hero {
  /* Отступ сверху считается от липкой шапки, а не «на глаз»: было
     clamp(120,16vh,200) поверх её 68 пикселей — на большом экране
     первый экран начинался почти с середины. */
  /* Высоту задаёт содержимое, а не экран: при min-height первый экран
     растягивался и центрировал содержимое по вертикали — крошки от этого
     уезжали вниз ещё на два десятка пикселей поверх отступа. */
  min-height: auto;
  display: grid; align-items: center;
  /* Шапка стоит В ПОТОКЕ: первый экран и так начинается под ней.
     Прибавлять её высоту ещё раз — значит отодвинуть крошки на две
     шапки вниз, что и вышло: 92 пикселя вместо двадцати с небольшим. */
  padding: 24px 0 clamp(48px, 6vh, 76px);
}

/* Свечения. Два пятна, разного цвета и с разным ходом: одно
   «дышит», второе медленно плывёт. Оба размыты так, что границы не
   видно, — иначе получается наклейка, а не свет. */
.zv-glow {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  z-index: 0;
}
.zv-glow i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .55;
}
.zv-glow i:nth-child(1) {
  width: 46vw; height: 46vw; min-width: 380px; min-height: 380px;
  left: -8vw; top: -12vh;
  background: radial-gradient(circle, rgba(var(--acc-rgb), .95) 0%, rgba(var(--acc-rgb), 0) 68%);
  animation: zv-float-a 26s var(--ease) infinite alternate;
}
.zv-glow i:nth-child(2) {
  width: 40vw; height: 40vw; min-width: 320px; min-height: 320px;
  right: -6vw; top: 4vh;
  background: radial-gradient(circle, rgba(111,77,255,.8) 0%, rgba(111,77,255,0) 70%);
  animation: zv-float-b 34s var(--ease) infinite alternate;
}
.zv-glow i:nth-child(3) {
  width: 52vw; height: 30vw; left: 22vw; bottom: -18vh; opacity: .4;
  background: radial-gradient(ellipse, rgba(var(--acc-rgb), .7) 0%, rgba(var(--acc-rgb), 0) 70%);
  animation: zv-float-a 30s var(--ease) infinite alternate-reverse;
}
@keyframes zv-float-a { to { transform: translate3d(6vw, 4vh, 0) scale(1.12); } }
@keyframes zv-float-b { to { transform: translate3d(-5vw, 6vh, 0) scale(.92); } }

.zv-hero__in { position: relative; z-index: 1; display: grid; gap: clamp(48px, 6vw, 80px); }
@media (min-width: 1040px) {
  .zv-hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
}

.zv-title {
  margin-top: clamp(22px, 3.2vw, 42px);
  font-size: clamp(40px, 6.2vw, 86px); line-height: 1.04;
  letter-spacing: -.04em; font-weight: 800;
  max-width: 13ch;                 /* строки рвутся по смыслу, а не по случаю */
  text-wrap: balance;
}
.zv-title em {
  font-style: normal;
  background: linear-gradient(102deg, var(--acc) 0%, var(--acc-soft) 42%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zv-hero__sub {
  /* Отступы в первом экране соразмерны кеглю: под заголовком в 86
     пикселей тридцать выглядят как слипшиеся строки. */
  margin-top: clamp(26px, 3.4vw, 46px);
  font-size: clamp(16px, 1.45vw, 20px); line-height: 1.6;
  color: var(--mute); max-width: 46ch;
}

/* Кнопкам нужен воздух: они — не продолжение абзаца, а другое действие. */
.zv-acts { margin-top: clamp(34px, 5.4vw, 72px); display: flex; flex-wrap: wrap; gap: 16px; }

/* Кнопка: пилюля, а стрелка сидит в своём круге внутри неё. */
.zv-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 24px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent;
  transition: transform .5s var(--ease), background-color .5s var(--ease),
              border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.zv-btn__ico {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px;
  background: rgba(255, 255, 255, .16);
  transition: transform .5s var(--ease), background-color .5s var(--ease);
}
.zv-btn--go {
  background: var(--acc); color: #fff;
  box-shadow: 0 10px 40px -12px rgba(var(--acc-rgb), .9);
}
.zv-btn--go:hover { background: var(--acc-hi); transform: translateY(-2px); }
.zv-btn--go:active { transform: translateY(0) scale(.985); }
.zv-btn--ghost { background: var(--glass); border-color: var(--line-2); color: var(--ink); }
.zv-btn--ghost:hover { border-color: rgba(255,255,255,.34); transform: translateY(-2px); }
.zv-btn:hover .zv-btn__ico { transform: translate(3px, -1px) scale(1.06); }

.zv-note { margin-top: clamp(22px, 2.6vw, 36px); font-size: 14px; line-height: 1.6; color: var(--mute); }
.zv-note b { color: var(--ink); font-weight: 600; }

/* --- КАРТОЧКА ПОСТА ---------------------------------------------------
   Показывает, что именно делает сервис: обложка, крючок, текст, отметка
   времени. Собирается по частям при появлении — это и есть «завод». */
.zv-post {
  position: relative; border-radius: 26px; padding: 8px;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  box-shadow: 0 50px 120px -40px rgba(0, 60, 160, .75);
}
.zv-post__in {
  background: #0b0f18; border: 1px solid var(--line);
  border-radius: 19px; padding: 18px; display: grid; gap: 14px;
}
.zv-post__top { display: flex; align-items: center; gap: 10px; }
.zv-post__ava {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--acc), var(--violet));
}
.zv-post__who { font-size: 13.5px; font-weight: 600; }
.zv-post__when { font-size: 12px; color: var(--mute); }
.zv-post__cover {
  aspect-ratio: 16 / 10; border-radius: 12px; position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(var(--acc-rgb), .55), transparent 60%),
    radial-gradient(90% 80% at 90% 90%, rgba(111,77,255,.5), transparent 62%),
    #0e1420;
  display: grid; align-content: end; padding: 16px;
}
/* Настоящая обложка вместо градиентной заглушки: ту самую картинку
   рисует завод. Градиент остаётся под ней запасным фоном — если файл
   не доехал, карточка не станет дырой. */
.zv-post__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zv-post__cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,6,12,.1) 34%, rgba(4,6,12,.88) 100%);
}
.zv-post__cover span, .zv-post__cover b { position: relative; z-index: 1; }
.zv-post__cover b { font-size: 17px; line-height: 1.25; letter-spacing: -.01em; max-width: 22ch; }
.zv-post__cover span {
  position: absolute; top: 14px; left: 16px; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72);
}
.zv-post__t { font-size: 14.5px; line-height: 1.55; color: #dbe3ef; }
.zv-post__t b { color: #fff; font-weight: 600; }
.zv-post__lines { display: grid; gap: 8px; }
.zv-post__lines i { display: block; height: 9px; border-radius: 5px; background: rgba(255,255,255,.09); }
.zv-post__lines i:nth-child(2) { width: 92%; }
.zv-post__lines i:nth-child(3) { width: 68%; }
.zv-post__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zv-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid rgba(var(--acc-rgb), .5); color: var(--acc-pale);
  background: rgba(var(--acc-rgb), .12);
}
.zv-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 10px 2px rgba(var(--acc-rgb), .9);
}
.zv-post__ok { font-size: 12.5px; color: #7fe0b0; }

/* ============================================================== ЦИФРЫ */
.zv-nums {
  display: grid; gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(36px, 4.5vw, 56px) 0;
}
.zv-num b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 5vw, 64px); line-height: 1; letter-spacing: -.03em;
  background: linear-gradient(120deg, #fff 20%, #8fbfff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zv-num span { display: block; margin-top: 12px; font-size: 14.5px; color: var(--mute); max-width: 24ch; }

/* ============================================================ КОНВЕЙЕР */
.zv-rail { margin-top: clamp(44px, 5vw, 68px); position: relative; }
.zv-rail__line {
  position: absolute; left: 0; right: 0; top: 7px; height: 1px;
  background: var(--line-2); overflow: hidden;
}
/* Бегущий по линии импульс — то самое «конвейер идёт». */
.zv-rail__line::after {
  content: ""; position: absolute; top: 0; left: 0; width: 22%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  animation: zv-run 4.6s linear infinite;
}
@keyframes zv-run { from { transform: translateX(-120%); } to { transform: translateX(560%); } }

.zv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 3vw, 40px); }
@media (min-width: 620px)  { .zv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .zv-steps { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 20px; } }
.zv-step { position: relative; padding-top: 30px; }
.zv-step::before {
  content: ""; position: absolute; top: 2px; left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: #0b0f18; border: 1px solid var(--line-2);
  transition: background-color .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.zv-step.is-in::before {
  background: var(--acc); border-color: var(--acc);
  box-shadow: 0 0 0 4px rgba(var(--acc-rgb), .18), 0 0 18px 2px rgba(var(--acc-rgb), .7);
}
.zv-step b { display: block; font-size: 15.5px; letter-spacing: -.01em; }
.zv-step span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--mute); }
@media (min-width: 1040px) { .zv-step span { font-size: 13px; } }

/* ==================================================== ЗАКРЕПЛЁННЫЙ ПОКАЗ
   Слева карточка стоит на месте, справа идёт текст. Так объясняют,
   не заставляя человека держать картинку в голове. */
.zv-pin { display: grid; gap: clamp(40px, 5vw, 72px); }
@media (min-width: 1000px) {
  .zv-pin { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; }
  .zv-pin__stick { position: sticky; top: calc(var(--head-h, 68px) + 40px); }
}
.zv-pin__list { display: grid; gap: clamp(40px, 6vw, 84px); }
.zv-pin__item h3 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; }
.zv-pin__item p { margin-top: 14px; color: var(--mute); font-size: 16px; line-height: 1.65; max-width: 44ch; }
.zv-pin__n {
  display: inline-block; margin-bottom: 14px; font-family: var(--mono);
  font-size: 12px; letter-spacing: .16em; color: var(--acc-soft);
}

/* ============================================================== ЗАСЛОН */
.zv-gate { list-style: none; margin: clamp(34px, 4vw, 52px) 0 0; padding: 0; display: grid; gap: 14px; }
.zv-gate li {
  position: relative; padding: 18px 20px 18px 58px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--glass);
  font-size: 15.5px; line-height: 1.55; color: var(--mute);
  transition: border-color .6s var(--ease), background-color .6s var(--ease);
}
.zv-gate li:hover { border-color: var(--line-2); background: rgba(255,255,255,.055); }
.zv-gate li::before {
  content: "✕"; position: absolute; left: 20px; top: 18px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; color: #ff8ba0; border: 1px solid rgba(255, 139, 160, .4);
  background: rgba(255, 139, 160, .1);
}
.zv-gate b { color: var(--ink); font-weight: 600; }

/* ============================================================= ОБЛОЖКИ */
.zv-covers { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: clamp(36px, 4vw, 52px); }
/*
 * Обложка — настоящая картинка под затемнением с подписью, как её
 * рисует завод: квадрат, тёмная полоса, заголовок фирменным шрифтом.
 * Раньше здесь были пустые градиентные плашки — «места под картинки».
 */
.zv-cover {
  position: relative; margin: 0; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 1 / 1;
  transition: transform .6s var(--ease), border-color .6s var(--ease);
}
.zv-cover:hover { transform: translateY(-6px); border-color: var(--line-2); }
.zv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zv-cover figcaption {
  position: absolute; inset: auto 0 0 0; padding: 44px 18px 18px;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 12, .92) 62%);
}
.zv-cover span { display: block; margin-bottom: 8px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.zv-cover b { font-size: 16px; line-height: 1.3; letter-spacing: -.01em; }

/* ============================================================ РАСПИСАНИЕ */
.zv-week {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px;
  margin-top: clamp(32px, 4vw, 48px);
}
.zv-day { border: 1px solid var(--line); border-radius: 14px; padding: 14px 10px; background: var(--glass); text-align: center; }
.zv-day b { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
/* Слоты двух цветов: синий — будни, малиновый — выходные. Оба из
   палитры ВКонтакте; одноцветная сетка читалась как таблица, а не
   как расписание, где дни разные. */
.zv-slot {
  margin-top: 10px; font-family: var(--mono); font-size: 12px; color: #cfe0f7;
  padding: 6px 4px; border-radius: 8px; background: rgba(var(--acc-rgb), .16);
  border: 1px solid rgba(var(--acc-rgb), .34);
}
.zv-slot--rose {
  color: #ffd0e4; background: rgba(232, 56, 138, .18);
  border-color: rgba(232, 56, 138, .42);
}
.zv-day--end b { color: #f3a7c8; }
.zv-slot--off { background: transparent; border-color: transparent; color: rgba(255,255,255,.22); }
.zv-week.is-in .zv-slot:not(.zv-slot--off) { animation: zv-pop .7s var(--ease) both; }
.zv-week.is-in .zv-day:nth-child(2) .zv-slot { animation-delay: .08s; }
.zv-week.is-in .zv-day:nth-child(3) .zv-slot { animation-delay: .16s; }
.zv-week.is-in .zv-day:nth-child(4) .zv-slot { animation-delay: .24s; }
.zv-week.is-in .zv-day:nth-child(5) .zv-slot { animation-delay: .32s; }
.zv-week.is-in .zv-day:nth-child(6) .zv-slot { animation-delay: .40s; }
.zv-week.is-in .zv-day:nth-child(7) .zv-slot { animation-delay: .48s; }
@keyframes zv-pop { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }

/* ================================================================ ЦЕНА */
.zv-price { display: grid; gap: 20px; margin-top: clamp(36px, 4vw, 52px); }
@media (min-width: 820px) { .zv-price { grid-template-columns: 1fr 1fr; } }
.zv-card {
  position: relative; border-radius: 26px; padding: 1px;
  background: linear-gradient(155deg, rgba(var(--acc-rgb), .55), rgba(255,255,255,.06) 45%, rgba(111,77,255,.35));
}
.zv-card__in {
  background: #080b12; border-radius: 25px; padding: clamp(26px, 3vw, 40px);
  height: 100%; display: grid; gap: 14px; align-content: start;
}
.zv-card p { color: var(--mute); font-size: 15.5px; line-height: 1.6; }
/*
 * Ниже общего правила и с той же цепочкой — иначе «.zv-card p»
 * перебивало цену по старшинству селектора, и 14 990 ₽ выводились
 * тем же кеглем, что и пояснение под ними. Поймано на снимке.
 */
.zv-card .zv-card__k { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.zv-card .zv-card__n {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(38px, 5vw, 62px); line-height: 1; color: var(--ink);
}

.zv-facts { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 24px; }
.zv-fact { border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: var(--glass); }
.zv-fact b { display: block; font-size: 16px; margin-bottom: 8px; }
.zv-fact p { font-size: 14.5px; color: var(--mute); line-height: 1.55; }

/* ============================================================== ФИНАЛ */
.zv-final { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(40px, 6vw, 84px); text-align: center;
  background:
    radial-gradient(110% 140% at 50% 0%, rgba(var(--acc-rgb), .42), transparent 62%),
    radial-gradient(90% 120% at 80% 100%, rgba(111,77,255,.34), transparent 60%),
    #070a11;
  border: 1px solid var(--line);
}
.zv-final h2 { font-size: clamp(30px, 4.6vw, 58px); letter-spacing: -.03em; line-height: 1.05; margin-inline: auto; max-width: 18ch; }
.zv-final p { margin: 20px auto 0; color: #c6d3e6; max-width: 52ch; font-size: 16.5px; line-height: 1.6; }
.zv-final .zv-acts { justify-content: center; }

/* Крошки на тёмном */
.zv-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--mute); list-style: none; margin: 0 0 0; padding: 0; }
.zv-crumbs a { color: var(--mute); text-decoration: none; }
.zv-crumbs a:hover { color: var(--ink); }
.zv-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .45; }

/* ================================================== ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   Прячет только сценарий: без него страница видна целиком. */
.zv[data-anim] [data-zv] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.zv[data-anim] [data-zv].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .zv[data-anim] [data-zv] { opacity: 1; transform: none; transition: none; }
  .zv-glow i, .zv-rail__line::after, .zv-week.is-in .zv-slot { animation: none !important; }
  .zv-btn, .zv-cover, .zv-gate li { transition: none; }
}

/* --- ЧЕРЕДОВАНИЕ: ТЕКСТ И КАРТИНКА -----------------------------------

   Раньше здесь стояла одна закреплённая карточка слева и четыре абзаца
   справа. На широком экране левая половина пустовала почти во всю
   высоту раздела — «полотно пустоты».

   Теперь пары: у нечётных картинка справа, у чётных слева. Глаз идёт
   змейкой и не устаёт, а пустого места не остаётся. */
.zv-rows { display: grid; gap: clamp(48px, 6vw, 88px); margin-top: clamp(40px, 5vw, 64px); }
.zv-row { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 940px) {
  .zv-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  /* Переворот только визуальный: в разметке текст всегда первым —
     так его читает и поисковик, и человек с экранной читалкой. */
  .zv-row--flip .zv-row__text { order: 2; }
  .zv-row--flip .zv-row__art  { order: 1; }
}
.zv-row__n {
  display: inline-block; margin-bottom: 14px; font-family: var(--mono);
  font-size: 12px; letter-spacing: .16em; color: var(--acc-soft);
}
.zv-row__text h3 { font-size: clamp(24px, 2.8vw, 36px); letter-spacing: -.02em; line-height: 1.15; }
.zv-row__text p { margin-top: 16px; color: var(--mute); font-size: 16px; line-height: 1.65; max-width: 46ch; }

/* Кадр под картинку: та же двойная рамка, что у карточек. */
.zv-shot { border-radius: 24px; padding: 7px; background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.03)); }
.zv-shot img {
  display: block; width: 100%; height: auto; border-radius: 18px;
  border: 1px solid var(--line);
}
.zv-shot--glow { box-shadow: 0 40px 110px -46px rgba(0, 90, 220, .85); }

/* --- МАКЕТ ИНТЕРФЕЙСА -------------------------------------------------
   Не снимок экрана, а схема: показывает, что именно спрашивает мастер
   на каждом шаге. Рисуется разметкой, поэтому текст в ней настоящий и
   читается поиском, а не лежит картинкой. */
.zv-ui {
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}
.zv-ui__bar {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--mute);
  font-family: var(--mono);
}
.zv-ui__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); display: block; }
.zv-ui__bar i:first-child { background: var(--acc); }
.zv-ui__body { padding: 18px; display: grid; gap: 14px; }
.zv-ui__field { display: grid; gap: 7px; }
.zv-ui__field b { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.zv-ui__val {
  border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 13px;
  font-size: 14px; color: #dbe6f6; background: rgba(0, 0, 0, .28);
}
.zv-ui__val--mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; }
.zv-ui__ok { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #7fe0b0; }
.zv-ui__ok::before { content: "✓"; }
.zv-ui__warn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #f3a7c8; }
.zv-ui__warn::before { content: "!"; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; border: 1px solid currentColor; }
.zv-ui__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zv-ui__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  border-radius: 999px; background: var(--acc); color: #fff; font-size: 14px; font-weight: 600;
}
.zv-ui__sum { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.zv-ui__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.zv-ui__week span {
  text-align: center; font-size: 10.5px; padding: 8px 2px; border-radius: 8px;
  border: 1px solid rgba(var(--acc-rgb), .34); background: rgba(var(--acc-rgb), .14); color: #cfe0f7;
  font-family: var(--mono);
}
.zv-ui__week span[data-off] { border-color: transparent; background: transparent; color: rgba(255,255,255,.22); }
.zv-ui__week span[data-rose] { border-color: rgba(232,56,138,.42); background: rgba(232,56,138,.18); color: #ffd0e4; }
.zv-ui__mini { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.zv-ui__mini div {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  font-size: 12.5px; line-height: 1.45; color: var(--mute);
}
.zv-ui__mini b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 6px; }

/* =========================================================== ТЕЛЕФОН

   Две вещи, которые на узком экране разваливаются: ряд крупных цифр и
   недельная сетка. Обе — не про «поменьше шрифт», а про другой порядок
   чтения. */

/* Цифры: на широком экране это ряд плиток, на телефоне — строки
   «число слева, объяснение справа». Плитки в столбик читаются как
   четыре одинаковых экрана подряд, а строкой — как список фактов. */
@media (max-width: 680px) {
  .zv-nums { gap: 0; padding: 8px 0; }
  .zv-num {
    display: grid; grid-template-columns: minmax(72px, auto) 1fr;
    gap: 18px; align-items: center;
    padding: 20px 0; border-top: 1px solid var(--line);
  }
  .zv-num:first-child { border-top: 0; }
  .zv-num b { font-size: 34px; line-height: 1; }
  .zv-num span { margin-top: 0; font-size: 14.5px; line-height: 1.45; max-width: none; }
}

/*
 * Недельная сетка: 4 + 3.
 *
 * Семь колонок на 375 пикселях дают ячейку в 40 — время «18:30» в неё
 * не влезает и вылезает за рамку. Разложить 4 и 3 ровно помогает сетка
 * из двенадцати долей: 4 × 3 доли в первой строке, 3 × 4 во второй.
 * Обе строки заполняются целиком, дырок не остаётся.
 */
@media (max-width: 620px) {
  .zv-week { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
  .zv-day { grid-column: span 3; padding: 12px 6px; }
  .zv-day:nth-child(n+5) { grid-column: span 4; }
  .zv-slot { font-size: 13px; padding: 7px 4px; }

  /* Та же беда у сетки внутри схемы третьего шага. */
  .zv-ui__week { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .zv-ui__week span { grid-column: span 3; font-size: 11px; }
  .zv-ui__week span:nth-child(n+5) { grid-column: span 4; }
}

/* header / wacis.header */
/* ============================================================== ШАПКА

   Шапка липкая и полупрозрачная. На первом экране (тёмном) она
   получает класс --dark из скрипта: белые буквы на тёмном, тёмные —
   на светлом, без второй копии разметки.
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background .2s, border-color .2s, color .2s;
}

.site-header--dark {
  background: color-mix(in srgb, var(--navy) 82%, transparent);
  border-bottom-color: color-mix(in srgb, var(--paper) 12%, transparent);
  color: var(--d-text);
}

.site-header__in {
  height: var(--head-h);
  display: flex; align-items: center; gap: var(--s5);
}


.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }

.logo svg { width: auto; height: 20px; flex: none; display: block; }

.logo__t { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }

.logo__t sup {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal); margin-left: 5px; vertical-align: super;
}

.site-header--dark .logo__t sup { color: color-mix(in srgb, var(--teal) 45%, var(--paper)); }


.header__act { display: flex; align-items: center; gap: var(--s3); flex: none; }


/* Полоса шапки шире колонки содержимого. Логотип, семь пунктов меню и
   действия в 1200 не помещались и до появления входа — ряд молча
   вылезал за колонку вправо. Ширина берётся той же переменной, что и у
   .wrap, поэтому правило одно и живёт по правилам темы. */
.site-header__in { --wrap: 1320px; }

/* Вход в кабинет — обычная прозрачная кнопка темы: она уже умеет брать
   цвет у окружения, а шапка на первом экране тёмная. Своего вида
   кнопки заводить не за чем. */
/* Значок стилим по месту, а не классом: имя .ico в теме уже занято
   сорокапиксельной плашкой с заливкой, и она подкладывалась под ключ. */
.header__login svg { width: 17px; height: 17px; flex: none; }

.site-header--dark .burger { border-color: var(--d-line); }

/* footer / wacis.footer */
/* ============================================================== ПОДВАЛ */
.site-footer { background: var(--ink); color: var(--d-mute); padding: clamp(48px, 6vw, 80px) 0 var(--s6); font-size: 14.5px; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s7); }
@media (max-width: 900px) { .foot__top { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
@media (max-width: 560px) { .foot__top { grid-template-columns: 1fr; } }
.foot__about { max-width: 34em; }
.foot__about p { margin-top: var(--s4); }
.site-footer .logo__t { color: var(--paper); }
.foot__gr { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 62%, var(--ink)); }
.foot__col { display: grid; gap: 10px; align-content: start; }
.foot__col a { text-decoration: none; }
.foot__col a:hover { color: var(--paper); }
.foot__bot {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); font-size: 13px;
}
.foot__bot a { text-decoration: none; }
.foot__bot a:hover { text-decoration: underline; }
.foot__bot > span:last-child { margin-left: auto; }
@media (max-width: 700px) { .foot__bot > span:last-child { margin-left: 0; } }

/* =========================================================================
   ПЛАШКА TELEGRAM

   Правый нижний угол. На широком экране — таблетка с подписью, на узком
   схлопывается в кружок: там места мало, а подпись всё равно не читают.

   Ссылка настоящая, а не через скрипт: работает с выключенным
   JavaScript и по «открыть в новой вкладке».

   Цвет фирменный телеграмовский, а не наш: кнопку узнают по цвету
   быстрее, чем прочитают подпись. Это единственное место на сайте,
   где стоит цвет вне палитры бренда.

   z-index ниже затемнения меню (110) и самого меню (120): когда
   открыто мобильное меню, плашка не должна торчать поверх него.
   ========================================================================= */
.tg-fab {
  position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px);
  z-index: 80;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 20px 0 16px;
  border-radius: 999px; border: 1px solid #229ed9;
  background: #229ed9; color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1;
  box-shadow: 0 10px 30px color-mix(in srgb, #229ed9 32%, transparent);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s, opacity .2s;
}
.tg-fab:hover, .tg-fab:focus-visible {
  background: #1b8ec4; transform: translateY(-2px);
  box-shadow: 0 14px 36px color-mix(in srgb, #229ed9 42%, transparent);
}

/* Значок нарисован со смещением вправо — компенсируем, иначе в кружке
   он выглядит сдвинутым к краю. */
.tg-fab__i { flex-shrink: 0; margin-left: -1px; }

/* Открыто мобильное меню — плашка уходит, чтобы не спорить с ним */
body[data-nav-open] .tg-fab { opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  .tg-fab { padding: 0; width: 52px; justify-content: center; }
  .tg-fab__t { display: none; }
  .tg-fab__i { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tg-fab { transition: background .2s, opacity .2s; }
  .tg-fab:hover, .tg-fab:focus-visible { transform: none; }
}

.site-footer .logo svg { color: var(--paper); }

/* ==================================================== ПОДВАЛ: ПРЕМИАЛЬНО
   Правка оформления подвала. Дописана в конец: разметку и прежние
   правила не трогаем, только переопределяем поверх.

   Что меняется: почти чёрное полотно вместо чернильного, одна гарнитура
   и выверенный ритм, ссылки — со сдвигом при наведении, нижняя строка
   разложена по краям. */
.site-footer {
  background: #07080d;
  color: #98a0b3;
  padding: clamp(52px, 5.5vw, 84px) 0 clamp(22px, 2.4vw, 30px);
  font-family: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14.5px; letter-spacing: -.005em;
  position: relative;
}
/* Тонкий свет по верхней кромке: подвал не обрывает страницу, а закрывает её. */
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 22%, rgba(255,255,255,.16) 78%, transparent);
}
.site-footer .wrap { position: relative; z-index: 1; }

.foot__top {
  display: grid; gap: clamp(28px, 3.4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px)  { .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .foot__top { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } }

.foot__about { max-width: 42ch; }
.foot__about p { margin-top: 18px; font-size: 14px; line-height: 1.62; color: #7e8598; }
.site-footer .logo svg { color: #f2f3f7; height: 26px; width: auto; }
.site-footer .logo__t { color: #f2f3f7; }
.site-footer .logo__t sup { color: #6f7688; }

.foot__gr {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #5d6478; margin-bottom: 4px;
}
.foot__col { display: grid; gap: 11px; align-content: start; }
.foot__col a, .foot__col span {
  text-decoration: none; color: #b6bccb; font-size: 14.5px; font-weight: 500;
  width: fit-content;
  transition: color .35s cubic-bezier(.22,.61,.18,1), transform .35s cubic-bezier(.22,.61,.18,1);
}
.foot__col a:hover { color: #fff; transform: translateX(2px); }
.foot__col span { color: #6f7688; font-size: 13.5px; }

.foot__bot {
  margin-top: clamp(34px, 4vw, 60px); padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  font-size: 13px; color: #6f7688;
}
.foot__bot a { color: #8b93a5; text-decoration: none; }
.foot__bot a:hover { color: #dfe3ec; text-decoration: none; }
.foot__bot > span:last-child { margin-left: auto; color: #5d6478; }
@media (max-width: 700px) { .foot__bot > span:last-child { margin-left: 0; } }

/* =========================================================================
   ПЛАШКА О COOKIES

   Слева внизу, а не во всю ширину: справа стоит плашка Telegram, и две
   полосы по низу экрана спорили бы друг с другом. z-index ниже меню
   (120) и его затемнения (110) — из-под открытого меню ей торчать
   незачем.
   ========================================================================= */
.ck {
  position: fixed; left: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px);
  z-index: 80; max-width: 420px;
  /* wrap обязателен: без него на узком экране кнопка не переносится, а
     выдавливается за край плашки — flex не сжимает текст ниже самого
     длинного слова, и «Принять» уезжает за границу вместе с ней. */
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px;
  padding: 14px 16px;
  border-radius: 14px; border: 1px solid var(--line-2, #d9d9e3);
  background: var(--paper, #fff);
  box-shadow: 0 12px 34px rgba(0, 0, 40, .16);
  font-size: 13px; line-height: 1.45;
}
/* Текст занимает строку целиком, пока помещается; ужавшись до 200px,
   уступает и пускает кнопку на следующую строку. */
.ck__t { margin: 0; flex: 1 1 200px; color: var(--mute, #55556b); }
.ck__t a { color: inherit; }

/* Кнопка своя, а не .btn: та растянута под призывы к действию, а здесь
   нужна маленькая и спокойная — соглашаться тут не с чем спорить. */
.ck__ok {
  flex-shrink: 0; cursor: pointer;
  min-height: 36px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--ink, #00004f);
  background: var(--ink, #00004f); color: #fff;
  font: inherit; font-weight: 700; line-height: 1;
  transition: opacity .18s;
}
.ck__ok:hover, .ck__ok:focus-visible { opacity: .85; }

/* Открыто мобильное меню — плашка уходит, как и телеграмная */
body[data-nav-open] .ck { opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  /* Узкий экран: плашка во всю ширину, и телеграмная поднимается над
     ней ровно на её высоту — высоту меряет скрипт, потому что она
     зависит от длины текста и переносов. */
  .ck { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .ck__ok { width: 100%; min-height: 42px; }
  body[data-cookie-note] .tg-fab {
    bottom: calc(12px + var(--ck-h, 0px) + 12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ck__ok { transition: none; }
}

/* WACIS SOCIAL LINKS */
.social-links {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.social-links a {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 44px; max-width: 100%; padding: 10px 16px;
  border: 1px solid var(--hair-2); border-radius: var(--r-s);
  color: var(--fg); font-size: 15px; font-weight: 600; line-height: 1.4;
  text-decoration: none;
  transition: background-color .18s, border-color .18s;
}
.social-links a:hover {
  background: color-mix(in srgb, currentColor 7%, transparent);
  border-color: currentColor;
}
.social-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.social-links a span { font-size: 18px; line-height: 1; }
.foot__social {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px;
  margin-top: var(--s7); padding-top: var(--s6);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.foot__social-title { margin: 0; color: #f2f2f2; font-size: 15px; font-weight: 600; }
.site-footer .social-links a { color: #f2f2f2; border-color: rgba(255, 255, 255, .24); }
.site-footer .social-links a:hover { border-color: #f2f2f2; }
.contact-social { margin-top: var(--s8); }
.contact-social > p:not(.social-note) { margin: var(--s3) 0 var(--s5); color: var(--fg-mute); }
.social-note { margin: var(--s4) 0 0; max-width: 85ch; font-size: 13px; line-height: 1.6; color: var(--fg-mute); }
.foot__social .social-note { flex-basis: 100%; margin: 0; color: #a9afbe; }
@media (max-width: 560px) {
  .foot__social { display: block; }
  .foot__social-title { margin-bottom: var(--s4); }
  .foot__social .social-note { margin-top: var(--s4); }
}
@media (prefers-reduced-motion: reduce) { .social-links a { transition: none; } }
/* END WACIS SOCIAL LINKS */

/* menu / wacis.menu */
.nav { margin-left: auto; }

.nav__list { display: flex; align-items: center; gap: var(--s2); list-style: none; margin: 0; padding: 0; }

.nav__list a, .nav__btn {
  display: block; padding: 8px 9px; border-radius: var(--r-s);
  text-decoration: none; font-size: 15px; font-weight: 600;
  background: none; border: 0; cursor: pointer;
  /* Пункты не переносятся: «Исходный код» в две строки ломает высоту
     шапки, а вместе с ней и отступ, на который рассчитан якорь. */
  white-space: nowrap;
}

.nav__list > .nav__item > a:hover, .nav__btn:hover { background: color-mix(in srgb, currentColor 9%, transparent); }

.nav__head, .nav__foot, .nav__close { display: none; }


.burger {
  display: none; margin-left: auto;
  align-items: center; gap: var(--s2);
  background: none; border: 1px solid var(--line-2); border-radius: var(--r-s);
  padding: 9px 12px; cursor: pointer; font-size: 14px; font-weight: 700;
}

.burger__lines { display: grid; gap: 3px; }

.burger__lines i { display: block; width: 16px; height: 2px; background: currentColor; }


/* Порог бургера — не «когда экран маленький», а «когда ряд перестаёт
   помещаться»: логотип, семь пунктов и два действия требуют около 1230
   пикселей. Ниже 1280 меню уходит в выдвижную панель целиком. */
@media (max-width: 1279px) {
  .burger { display: inline-flex; }
  .header__act { display: none; }

  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw); z-index: 120;
    background: var(--navy); color: var(--d-text);
    padding: var(--s5); margin: 0;
    display: flex; flex-direction: column; gap: var(--s5);
    transform: translateX(100%); transition: transform .24s ease;
    overflow-y: auto;
  }
  .nav[data-open] { transform: none; }
  .nav__head { display: flex; align-items: center; justify-content: space-between; }
  .nav__title { font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--d-mute); }
  .nav__close { display: block; background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list .nav__item + .nav__item { border-top: 1px solid var(--d-line); }
  .nav__list a { padding: 14px 0; font-size: 17px; }
  .nav__foot { display: grid; gap: var(--s3); margin-top: auto; }
  .nav-backdrop { position: fixed; inset: 0; z-index: 110; background: color-mix(in srgb, var(--ink) 55%, transparent); }
}