/* ===== ТАНКИ ДРАЙВ — V5 (по мотивам Claude Design экспорта: badge-plate, эпичный hero, кнопки-картинки) ===== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #0b0d09;
  color: #f4f6ef;
  font-family: 'Manrope', system-ui, sans-serif;
  overflow-x: clip;
  line-height: 1.6;
}
::selection { background: #9AD600; color: #0b0d09; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
img[aria-hidden="true"] { max-width: none; }
button { font-family: inherit; }

/* ===== ГРАНЖ-ЭФФЕКТ НА ЗАГОЛОВКЕ HERO ===== */
.v5-grunge-text {
  -webkit-mask-image: url(/assets/v5/title-grunge.png);
  mask-image: url(/assets/v5/title-grunge.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

@keyframes v5Marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

:root {
  --bg: #0b0d09;
  --bg2: #111410;
  --card: #0d0f0b;
  --ink: #f4f6ef;
  --ink2: #c7ccbe;
  --ink3: #9aa38f;
  --green: #9AD600;
  --pink: #E6007E;
  --border: rgba(255,255,255,0.08);
  --font-h: 'Oswald', sans-serif;
  --font-b: 'Manrope', sans-serif;
  --radius: 14px;
  --container: 1600px;
}

.v5-container { max-width: var(--container); margin: 0 auto; padding: 0 48px; }

/* ===== ТИКЕР ===== */
.v5-ticker { background: var(--green); overflow: hidden; padding: 14px 0; position: relative; z-index: 2; }
.v5-ticker-inner { display: flex; width: max-content; animation: v5Marquee 28s linear infinite; white-space: nowrap; }
.v5-ticker-text { font-family: var(--font-h); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .05em; color: #0b0d09; display: flex; align-items: center; }
.v5-ticker-sep { color: #0b0d09; opacity: .5; margin: 0 22px; }

/* ===== ПОЧЕМУ МЫ ===== */
.v5-why-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; }
.v5-why-card { background: var(--card); border: 1px solid rgba(154,214,0,0.28); border-radius: var(--radius); padding: 28px 26px; transition: border-color .2s, transform .2s; }
.v5-why-card:hover { transform: translateY(-3px); }
.v5-why-card--pink { border-color: rgba(230,0,126,0.32); }
.v5-why-card-icon { width: 52px; height: 52px; border-radius: 12px; background: rgba(154,214,0,0.08); border: 1px solid rgba(154,214,0,0.3); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.v5-why-card--pink .v5-why-card-icon { background: rgba(230,0,126,0.08); border-color: rgba(230,0,126,0.4); }
.v5-why-card h4 { font: 600 18px var(--font-h); text-transform: uppercase; letter-spacing: .3px; color: var(--green); margin-bottom: 10px; }
.v5-why-card--pink h4 { color: var(--pink); }
.v5-why-card p { font: 500 14px/1.5 var(--font-b); color: var(--ink2); }

/* ===== ФРАНШИЗА ===== */
.v5-franchise-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px;
  padding: clamp(28px,3.5vw,40px); border-radius: 18px;
  background: linear-gradient(120deg, rgba(154,214,0,0.06), rgba(11,13,9,0));
  border: 1px solid rgba(154,214,0,0.35);
}
.v5-franchise-eyebrow { font: 700 13px var(--font-b); letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.v5-franchise-title { font-family: var(--font-h); font-weight: 700; text-transform: uppercase; line-height: .95; font-size: clamp(26px,3.4vw,40px); color: #fff; margin-bottom: 8px; }
.v5-franchise-desc { font: 500 15px/1.5 var(--font-b); color: var(--ink2); max-width: 460px; }

/* ===== ФУТЕР ===== */
.v5-footer { position: relative; margin-top: -2px; background: transparent; border-top: 1px solid var(--border); padding: 70px 0 30px; }
.v5-footer-main { display: flex; flex-wrap: wrap; gap: clamp(28px,5vw,64px); padding-bottom: 30px; }
.v5-footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 150px; }
.v5-footer-col--brand { flex: 1 1 240px; }
.v5-footer-logo img { height: 140px; width: auto; }
.v5-footer-tagline { font: 500 13px/1.5 var(--font-b); color: var(--ink3); margin-top: 14px; max-width: 260px; }
.v5-footer-col-title { font: 600 13px var(--font-h); letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; }
.v5-footer-col a { font: 500 14px var(--font-b); color: var(--ink2); }
.v5-footer-col a:hover { color: #fff; }
.v5-footer-copy-bar { border-top: 1px solid var(--border); padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.v5-footer-copy { font: 500 12px var(--font-b); color: var(--ink3); }
.v5-footer-copy a { color: var(--ink3); }

/* ===== ЮРИДИЧЕСКИЕ СТРАНИЦЫ (политика/согласие/cookie) =====
   Свои размеры заголовков — глобальное h1,h2{...!important} перебиваем большей
   специфичностью (.legal-doc h2 > h2). Иначе заголовки документа = 84px. */
.legal-doc h1 { font-size: 34px !important; line-height: 1.15 !important; letter-spacing: 0 !important; margin: 0 0 8px !important; }
.legal-doc h2 { font-size: 19px !important; line-height: 1.3 !important; letter-spacing: .02em !important; margin: 26px 0 10px !important; }
@media (max-width: 640px) { .legal-doc h1 { font-size: 27px !important; } .legal-doc h2 { font-size: 17px !important; } }

/* ===== FAQ (JS-аккордеон) ===== */
.faq-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
/* значок +/− меняется в JS (main-v5.js), поворот не нужен — иначе минус встаёт по диагонали */
.faq-icon { display: inline-block; }

/* ===== КАЛЬКУЛЯТОР — активные кнопки ===== */
#calc-tanks button.active, #calc-hours button.active {
  background: var(--green) !important; color: #0b0d09 !important;
}
#calc-day button.active {
  background: var(--green) !important; color: #0b0d09 !important;
}

/* ===== МОДАЛКА ЗАПИСИ ===== */
.v5-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(6,7,5,.8); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 20px;
}
.v5-modal-overlay.open { display: flex; }
.v5-modal {
  position: relative; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
  background: var(--bg2); border: 1px solid rgba(154,214,0,0.35); border-radius: 18px;
  padding: 34px 30px; animation: v5ModalIn .2s ease;
}
@keyframes v5ModalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.v5-modal-close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card); color: var(--ink2); font-size: 15px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .2s, border-color .2s;
}
.v5-modal-close:hover { color: #fff; border-color: var(--green); }
.v5-modal-title { font-family: var(--font-h); font-weight: 700; text-transform: uppercase; font-size: 28px; color: #fff; margin-bottom: 6px; }
.v5-modal-sub { font: 500 14px/1.5 var(--font-b); color: var(--ink2); margin-bottom: 24px; }
.v5-modal-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.v5-modal-field label { font: 600 12px var(--font-b); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.v5-modal-field input, .v5-modal-field select, .v5-modal-field textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px;
  color: #fff; font: 500 14px var(--font-b); outline: none; resize: vertical;
}
.v5-modal-field input:focus, .v5-modal-field select:focus, .v5-modal-field textarea:focus { border-color: var(--green); }
.v5-modal-checkbox { display: flex; align-items: flex-start; gap: 10px; font: 500 12px/1.5 var(--font-b); color: var(--ink2); margin-bottom: 22px; cursor: pointer; }
.v5-modal-checkbox input { margin-top: 3px; accent-color: var(--green); flex-shrink: 0; }
.v5-modal-checkbox a { color: var(--green); }
.v5-modal-submit {
  width: 100%; text-align: center; justify-content: center; font: 700 15px var(--font-h);
  letter-spacing: .06em; text-transform: uppercase; padding: 16px; border-radius: 8px; border: none;
  background: var(--green); color: #0b0d09; cursor: pointer; transition: transform .15s;
}
.v5-modal-submit:hover { transform: translateY(-2px); }
.v5-modal-thanks { text-align: center; padding: 20px 0; }
.v5-modal-thanks-icon { font-size: 42px; margin-bottom: 14px; }
.v5-modal-thanks h3 { font-family: var(--font-h); font-weight: 700; text-transform: uppercase; color: #fff; font-size: 22px; margin-bottom: 8px; }
.v5-modal-thanks p { font: 500 14px/1.5 var(--font-b); color: var(--ink2); }

/* ==========================================================================
   РЕЕСТР КНОПОК v5 — единая шаблонная система
   ==========================================================================
   Разметка (одинаковая для любой кнопки, меняется только текст/иконка/классы):

   <a class="v5-btn v5-btn--outline v5-btn--green" href="#" onclick="...">
     <span class="v5-btn__splash v5-btn__splash--right" aria-hidden="true"></span>
     <span class="v5-btn__plate">
       <svg class="v5-btn__icon" ...>...</svg>
       Текст кнопки
     </span>
   </a>

   ТИПЫ (класс на .v5-btn, обязателен один из трёх):
   - .v5-btn--outline  тёмная плашка (#0d0f0b) + цветной бордер + клякса на углу.
                        Для вторичных/акцентных CTA на тёмном фоне.
   - .v5-btn--solid    заливка акцентным цветом, тёмный/белый текст, без кляксы.
                        Для главных CTA (самое сильное действие в секции).
   - .v5-btn--simple   прозрачный фон, только тонкий бордер, без кляксы.
                        Для второстепенных ссылок-кнопок ("Узнать о франшизе").

   ЦВЕТ (класс на .v5-btn, обязателен один из двух):
   - .v5-btn--green  акцент #9AD600 (зелёная клякса splatter-left/right.png)
   - .v5-btn--pink   акцент #E6007E (розовая клякса splatter-magenta.png)

   РАЗМЕР (необязательный класс на .v5-btn):
   - (по умолчанию) — обычная кнопка в теле секции
   - .v5-btn--lg     — крупная кнопка для hero/финальных CTA

   КЛЯКСА (только для --outline, класс на .v5-btn__splash):
   - .v5-btn__splash--right  пятно сидит НА правом бордере, капли летят вправо
   - .v5-btn__splash--left   пятно сидит НА левом бордере, капли летят влево
   (для --solid и --simple .v5-btn__splash в разметке не нужен)

   ПРАВИЛО СЕТКИ (важно): по сетке макета выравнивается КРАЙ БОРДЕРА кнопки,
   а не край изображения кляксы. Клякса намеренно вылетает за пределы сетки —
   это ожидаемое поведение, не баг. Габарит кнопки в layout = только плашка.

   ИКОНКА: всегда svg с stroke="currentColor" (наследует цвет текста),
   обёрнута в <svg class="v5-btn__icon">, размер задаётся классом кнопки.
   ========================================================================== */

.v5-btn {
  position: relative;
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  transition: transform .18s ease;
}
.v5-btn:hover { transform: translateY(-3px); }

.v5-btn__plate {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 16px;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  padding: 17px 28px; border-radius: 10px; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
}
.v5-btn__icon { flex-shrink: 0; width: 18px; height: 18px; }

/* Клякса: полноразмерный оверлей, пятно сидит на бордере, капли вылетают
   наружу за сетку. Ассеты: splatter-right.png (пятно слева, капли вправо),
   splatter-left.png (пятно справа, капли влево). В масштабе 200px центр
   пятна находится в ~36px от «своего» края картинки. */
.v5-btn__splash {
  position: absolute; top: 50%; z-index: 3;
  width: 200px; height: 150px;
  background-repeat: no-repeat; background-size: contain; background-position: center;
  transform: translateY(-50%);
  pointer-events: none;
}
.v5-btn__splash--right { left: calc(100% - 36px); background-position: left center; }
.v5-btn__splash--left  { right: calc(100% - 36px); background-position: right center; }

/* --- Тип: OUTLINE --- */
.v5-btn--outline .v5-btn__plate { background: #0d0f0b; color: #f4f6ef; border: 1.5px solid var(--btn-accent); }
.v5-btn--outline:hover .v5-btn__plate { border-color: #fff; box-shadow: 0 0 22px var(--btn-glow); }

/* --- Тип: SOLID --- */
.v5-btn--solid .v5-btn__plate { background: var(--btn-accent); color: var(--btn-ink); }
.v5-btn--solid:hover .v5-btn__plate { filter: brightness(1.1); }
.v5-btn--solid .v5-btn__splash { display: none; }

/* --- Тип: SIMPLE --- */
.v5-btn--simple .v5-btn__plate { background: transparent; color: #f4f6ef; border: 1.5px solid var(--btn-accent); padding: 15px 26px; }
.v5-btn--simple:hover .v5-btn__plate { background: rgba(255,255,255,0.06); border-color: #fff; }
.v5-btn--simple .v5-btn__splash { display: none; }

/* --- Цвет: GREEN ---
   splatter-right.png: пятно слева, капли вправо -> для правого края кнопки
   splatter-left.png:  пятно справа, капли влево -> для левого края кнопки */
.v5-btn--green { --btn-accent: #9AD600; --btn-glow: rgba(154,214,0,.45); --btn-ink: #0b0d09; }
.v5-btn--green .v5-btn__splash--right { background-image: url(/assets/v5/splatter-right.png); }
.v5-btn--green .v5-btn__splash--left  { background-image: url(/assets/v5/splatter-left.png); }

/* --- Цвет: PINK ---
   splatter-magenta.png: пятно слева, капли вправо; для левого края зеркалим */
.v5-btn--pink { --btn-accent: #E6007E; --btn-glow: rgba(230,0,126,.45); --btn-ink: #fff; }
.v5-btn--pink .v5-btn__splash--right { background-image: url(/assets/v5/splatter-magenta.png); }
.v5-btn--pink .v5-btn__splash--left  { background-image: url(/assets/v5/splatter-magenta.png); transform: translateY(-50%) scaleX(-1); }

/* --- Размер: LG --- */
.v5-btn--lg .v5-btn__plate { font-size: 19px; padding: 22px 36px; gap: 14px; border-radius: 12px; }
.v5-btn--lg.v5-btn--simple .v5-btn__plate { padding: 20px 34px; }
.v5-btn--lg .v5-btn__icon { width: 20px; height: 20px; }
.v5-btn--lg .v5-btn__splash { width: 240px; height: 180px; }
.v5-btn--lg .v5-btn__splash--right { left: calc(100% - 43px); }
.v5-btn--lg .v5-btn__splash--left  { right: calc(100% - 43px); }

@media (max-width: 700px) {
  .v5-btn__plate { font-size: 14px; padding: 14px 22px; gap: 9px; }
  .v5-btn--simple .v5-btn__plate { padding: 13px 20px; }
  .v5-btn--lg .v5-btn__plate { font-size: 16px; padding: 18px 28px; gap: 11px; }
  .v5-btn__icon { width: 16px; height: 16px; }
  .v5-btn__splash, .v5-btn--lg .v5-btn__splash { width: 150px; height: 112px; }
  .v5-btn__splash--right, .v5-btn--lg .v5-btn__splash--right { left: calc(100% - 27px); }
  .v5-btn__splash--left, .v5-btn--lg .v5-btn__splash--left { right: calc(100% - 27px); }
}

/* ==========================================================================
   ЕДИНАЯ ТИПОГРАФИКА ЗАГОЛОВКОВ — правило для ВСЕХ страниц
   Один шрифт (Oswald 700), один размер H1/H2, увеличенный межстрочный
   интервал. !important — чтобы перекрыть исторические инлайн-размеры.
   ========================================================================== */
h1, h2 {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
}
h1, h2 { font-size: clamp(42px, 5vw, 84px) !important; }
h1 span, h2 span {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* ===== МОБИЛЬНЫЙ NAV ===== */
.v5-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; }
.v5-burger span { display: block; width: 24px; height: 2px; background: #fff; }

/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ===== */
@media (max-width: 1360px) {
  nav[data-v5-nav-links] { display: none !important; }
  .v5-burger { display: flex; }
  .v5-why-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .v5-why-grid { grid-template-columns: 1fr; }
  .v5-franchise-inner { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   МОБИЛЬНАЯ ВЕРСИЯ — доработка (24.07.2026)
   ========================================================================== */

/* --- мобильное меню: раскрытие --- */
@media (max-width: 1360px) {
  nav[data-v5-nav-links].open {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    order: 10;
    padding: 16px 0 8px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  nav[data-v5-nav-links].open a { font-size: 18px; }
}

/* --- общая адаптация --- */
@media (max-width: 900px) {
  html, body { overflow-x: clip; }

  /* инлайновые двухколоночные сетки -> одна колонка */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.1fr 0.9fr"],
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns:38% 1fr"] { grid-template-columns: 1fr !important; }

  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }

  /* боковые отступы контейнеров */
  [style*="padding:0 48px"],
  [style*="padding: 0 48px"] { padding-left: 18px !important; padding-right: 18px !important; }

  img, iframe, video { max-width: 100%; }
}

/* --- телефоны --- */
@media (max-width: 700px) {
  /* компактная шапка, чтобы не наезжала на герой */
  header img[src*="logo-final"] { height: 78px !important; }
  header [style*="padding:6px 48px"] { padding: 8px 16px !important; gap: 12px !important; }

  /* бенто-галерея: простая сетка 2 колонки */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-rows: 150px !important;
  }
  .gtile { grid-column: auto !important; grid-row: auto !important; }

  /* секции: меньше вертикальных отступов */
  section { padding-top: 54px !important; padding-bottom: 63px !important; }

  /* куки-баннер */
  #cookie-banner { padding: 16px !important; gap: 12px !important; left: 10px !important; right: 10px !important; }
  #cookie-banner p { font-size: 13px !important; }

  /* формы и кнопки не вылезают */
  input, textarea, select, button { max-width: 100%; }
}


/* ---- МОБИЛЬНАЯ ВЕРСИЯ: корректировки ---- */

/* бургер заметнее на пёстром фоне */
@media (max-width: 1360px) {
  .v5-burger {
    padding: 11px 10px !important;
    border-radius: 10px !important;
    background: rgba(11,13,9,0.6) !important;
    border: 1px solid rgba(154,214,0,0.45) !important;
  }
  .v5-burger span { background: #9AD600 !important; width: 22px !important; }
}

@media (max-width: 900px) {
  /* сетки: аккуратно, без принудительной высоты строк */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: auto !important;
  }
  [style*="grid-template-columns:0.82fr 1.18fr"] { grid-template-columns: 1fr !important; }
  /* кнопки калькулятора (1..8) — в 4 колонки */
  [style*="grid-template-columns:repeat(8,1fr)"] { grid-template-columns: repeat(4,1fr) !important; }
}

@media (max-width: 700px) {
  /* текстовые блоки в 4 колонки -> в одну (плашки под героем и т.п.) */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
  }
  /* НО бенто-галерея остаётся плиткой 2x — у неё свои фикс-строки */
  [style*="grid-template-rows:repeat(3, 196px)"] {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-rows: 145px !important;
  }

  /* куки-баннер: текст на всю ширину, ничего не режется */
  #cookie-banner { flex-direction: column !important; align-items: stretch !important; }
  #cookie-banner p { flex: 1 1 100% !important; min-width: 0 !important; }
  #cookie-banner > div { justify-content: stretch !important; }
  #cookie-banner button { flex: 1 1 auto !important; }

  /* длинные слова/ссылки не рвут вёрстку */
  p, a, span, div { overflow-wrap: anywhere; }
}


/* ---- МОБИЛЬНАЯ ВЕРСИЯ: финальные правки ---- */
@media (max-width: 1360px) {
  /* бургер: не даём флексу его схлопнуть */
  .v5-burger {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 44px !important;
    min-height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    order: 2 !important;
  }
  .v5-burger span { flex: 0 0 auto !important; }
  /* шапка: логотип и правый блок тоже не ломаются */
  header a[aria-label="Танки Драйв"] { order: 1 !important; }
}

@media (max-width: 700px) {
  /* куки-баннер: строго в экран */
  #cookie-banner {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #cookie-banner * { box-sizing: border-box !important; }
  #cookie-banner p {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }
  #cookie-banner > div {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  #cookie-banner button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 12px 10px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* шапка: правый блок с телефоном компактнее */
  header [style*="flex-shrink:0"] { max-width: 100% !important; }
}


/* ---- порядок в шапке на мобиле: лого -> бургер -> телефон/кнопка ---- */
@media (max-width: 1360px) {
  header a[aria-label="Танки Драйв"] { order: 1 !important; }
  .v5-burger { order: 2 !important; }
  header div[style*="justify-content:flex-end"] { order: 3 !important; }
  nav[data-v5-nav-links].open { order: 4 !important; }
}


/* ---- бургер: жёстко, максимальный приоритет ---- */
@media (max-width: 1360px) {
  header button.v5-burger {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 60 !important;
    width: 46px !important;
    height: 42px !important;
    min-width: 46px !important;
    flex: 0 0 46px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    background: rgba(11,13,9,0.65) !important;
    border: 1.5px solid rgba(154,214,0,0.6) !important;
    border-radius: 10px !important;
  }
  header button.v5-burger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #9AD600 !important;
    flex: 0 0 2px !important;
  }
}

/* ---- куки-баннер: жёстко в экран ---- */
@media (max-width: 700px) {
  div#cookie-banner {
    left: 8px !important; right: 8px !important;
    width: auto !important; max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important; overflow: hidden !important;
    flex-direction: column !important; align-items: stretch !important;
    padding: 14px !important; gap: 10px !important;
  }
  div#cookie-banner p { width: 100% !important; flex: 0 0 auto !important; font-size: 12.5px !important; }
  div#cookie-banner > div { width: 100% !important; display: flex !important; gap: 10px !important; }
  div#cookie-banner button { flex: 1 1 0 !important; min-width: 0 !important; padding: 12px 8px !important; font-size: 12.5px !important; }
}


/* ---- узкие экраны: шапка в одну строку (лого + бургер + бронь) ---- */
@media (max-width: 620px) {
  /* телефон прячем — он есть в футере и на Контактах */
  header div[style*="justify-content:flex-end"] > div[style*="text-align:right"] { display: none !important; }
  /* кнопка брони компактнее */
  header a[aria-label="Забронировать"] { top: 0 !important; flex-shrink: 0 !important; }
  header a[aria-label="Забронировать"] img { height: 60px !important; }
  /* сама шапка плотнее */
  header [style*="padding:6px 48px"] { padding: 6px 12px !important; gap: 8px !important; }
  header img[src*="logo-final"] { height: 62px !important; }
}


/* ---- финал: кнопка брони и куки-баннер на узких экранах ---- */
@media (max-width: 620px) {
  header a[aria-label="Забронировать"] {
    max-width: 44vw !important;
    overflow: hidden !important;
  }
  header a[aria-label="Забронировать"] img { height: 52px !important; max-width: 100% !important; }
  header a[aria-label="Забронировать"] span { font-size: 11px !important; letter-spacing: 0 !important; }
  header div[style*="justify-content:flex-end"] { min-width: 0 !important; overflow: hidden !important; }
}

@media (max-width: 700px) {
  /* баннер — плашка на всю ширину снизу, без вылетов */
  div#cookie-banner {
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    box-sizing: border-box !important;
    padding: 14px !important;
  }
}


/* ---- узкая мобила: в шапке только лого + бургер ---- */
@media (max-width: 620px) {
  header div[style*="justify-content:flex-end"] { display: none !important; }
  header [style*="padding:6px 48px"] { justify-content: space-between !important; padding: 8px 14px !important; }
  header img[src*="logo-final"] { height: 66px !important; }
}


/* ---- Отчёты на мобиле: не схлопывать фото ---- */
@media (max-width: 620px) {
  .rep-media { grid-template-columns: 1fr !important; gap: 12px !important; }
  .rep-video { aspect-ratio: 16/10 !important; }
  .rep-photos { grid-template-rows: auto auto !important; gap: 12px !important; }
  .rep-photos > div { aspect-ratio: 16/10 !important; min-height: 150px !important; }
}


/* ===== Анимация PNG-кнопок: Живой отклик (наведение/нажатие) ===== */
.v5-imgbtn { display: inline-block; transition: transform .15s ease; }
.v5-imgbtn img { transition: filter .15s ease; }
.v5-imgbtn:hover { transform: translateY(-2px) scale(1.04); }
.v5-imgbtn:active { transform: translateY(0) scale(0.97); }
.v5-imgbtn:hover img { filter: brightness(1.06) drop-shadow(0 12px 26px rgba(0,0,0,0.42)) drop-shadow(0 0 20px rgba(154,214,0,0.55)) !important; }
.v5-imgbtn:has(img[src*="btn-game-pink"]):hover img { filter: brightness(1.06) drop-shadow(0 12px 26px rgba(0,0,0,0.42)) drop-shadow(0 0 20px rgba(230,0,126,0.62)) !important; }
@media (prefers-reduced-motion: reduce) { .v5-imgbtn, .v5-imgbtn:hover, .v5-imgbtn:active { transform: none; } }


/* ===== Сертификат: 3D-поворот при наведении ===== */
.cert-tilt { transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease; will-change: transform; }
.cert-tilt:hover { transform: perspective(1100px) rotateY(-11deg) rotateX(4deg) scale(1.045); box-shadow: 0 34px 74px rgba(0,0,0,.55), 0 0 34px rgba(230,0,126,.35); }
@media (prefers-reduced-motion: reduce){ .cert-tilt{ transition:none; } .cert-tilt:hover{ transform:none; } }


/* ===== Залитые btn-game -> вариант 07 «Заливка-заряд» ===== */
.v5-imgbtn:has(img[src*="btn-game"]) > span { z-index:2; }
.v5-imgbtn:has(img[src*="btn-game"])::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(90deg, rgba(223,255,120,.55), rgba(223,255,120,.55)); background-repeat:no-repeat;
  background-size:0% 100%; background-position:left center; transition:background-size .38s ease; mix-blend-mode:screen; }
.v5-imgbtn:has(img[src*="btn-game-clean"])::after { -webkit-mask:url(/assets/v5/btn-game-clean.png) center/contain no-repeat; mask:url(/assets/v5/btn-game-clean.png) center/contain no-repeat; }
.v5-imgbtn:has(img[src*="btn-game-pink"])::after { -webkit-mask:url(/assets/v5/btn-game-pink.png) center/contain no-repeat; mask:url(/assets/v5/btn-game-pink.png) center/contain no-repeat;
  background:linear-gradient(90deg, rgba(255,150,215,.5), rgba(255,150,215,.5)); }
.v5-imgbtn:has(img[src*="btn-game"]):hover { transform:none; }
.v5-imgbtn:has(img[src*="btn-game"]):hover img { filter:brightness(1.03) drop-shadow(0 10px 24px rgba(0,0,0,.4)) !important; }
.v5-imgbtn:has(img[src*="btn-game"]):active { transform:scale(.98); }
@media (prefers-reduced-motion: reduce){ .v5-imgbtn:has(img[src*="btn-game"])::after{ transition:none; } }

.v5-imgbtn:has(img[src*="btn-game"]):hover::after { background-size:100% 100%; }

/* ===== Курсор-мишень: только зелёные залитые ===== */
.v5-imgbtn:has(img[src*="btn-game"]) { cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFPElEQVR4nN1XTWxUVRT+zr1vaN+dlqHz3mtpIp33ZgqFEhNjDTFgQogaXKkhEWJIUFyIO2I00cjChLjhx8jKhS50ZXCBCw2gC39IqEqwwbgoaVKDdSGJpdVK7c/Me/eY++a9yaPM0BbZ6GnmZXrePed855x7v3MH+HdiYQg5/JeF7tJGmi9uoA6AsCHXVThxfeT6IgANgO89zCWBU3F99YNXyS8NaNYIrFCsFa4zTqPkI9yKeoAjbGXCOmiuOkH+FSGi7/DXwk+Tk5jN2CxbEVpBcJONXt/f4YVavwTGc0JSxVhyxGAGhFV3o0M9BdAZrcWp6YnZq5kYLUGIZcDFWXhldTDSekxKOgqgoCP9QRRhv2a+AiDkUO/VNf02g/4Qkl6UFo+6vn0SO+MK82pacvtG89W73Rvz7Ab270VfHfA8dKSL3EB97QYqbFgB0qnkd7m+utSzydioi4W+QlfyblUgZBq8Z2OencA+65XU+sz7NWb/OIG64AaqWigV1iXZpi2VbpA/3t0fg/i2t7dXJQBoxcGLvjpggnuBfS7zLg0SZ+P66rJXVlzsL65dUrn6+0C90bOpgx3ffj/r+05C5rP2vrVFL1Azbjl/3Wy+JkcwzsTtUw86pfwuPHObY0oZ0g3s86aFXrn9kZWAsBLkR4yRE7Tvz+pXKXEVvP62ilfOLzoldSFbvVZCGBxc4/rqVzdQ06VSqT2tStPVg1jT34+2O/Q2ztbx7bOGsLxKW38W3C1f0v52z09sFhZtAPiziYmJKgbjUjYDQRhFdXwciy3OucBgDEAK8MckwdBid6K3mgEIzZnXOtoKAjPjk5jJRlFtwmgxubh++17HV6+2yD61jaRlneeIWbN4KKNPHO2EhQsI3UC9IASe1xp9IJTYkAzTrAEjCMQRDt+YmLsyNITcyAhqrp/fRxKniYAo4lNT1+ZeTqoYOgNOJ6pzp0HUCY7/BBF2AJglgR+11lemri0cNgWwYELUoWwAaHvMrfG/dL95JNkLBhWMfmamXjUG9xmvdeGBbOrhfGjlJLYBMCTEjQgwJEbbCZRWgBp97R2Cqs46Eot/H5I5eZxDvS+S9hdRNZKWbYVTY1NzyTBKnQnHVydJoLK4IA/e/O3mVIb3yRlAh651CZETWoS1HuZwjDWfR5t6VsgpnhxtDK2GxGCKgb0tod5juEfi+W27uzfmteer12JFWhPcfiaJqX1M13iGmfYm9HonCrWWUPAtvpJ30BD7TNAI/E29u625QJqHE9jvJey1I6tfpcRtMjTtltW046vxZmDFEqN4BxJFJ1hDsxan4jVDzatgdns8iJpVoM4fmmpzR6UlukD6TXPaVjIVpXmYeV4fqfbxjD41FinDuYF9wxv00hFN2TnglOynk4k4bFhzpRORkoXCzPPEwZElAGNnjq+G3bLirnJXIdE3rujFkr3Hq6g/3bK6USi1+VngWRFNAHDaimrNelJHfEnmxFtOYJ8rljq2JEexzo6EEIzQEc5Coq/1bupwHV+9Y+XEGUMWXOMnZiYWf0mvds2ybSWxgekzVedPCEmHWMd3wE9J4AwoGtah/JAID5OwtrAONwO8B0R7pEWFKOSLRNHByZ8Xx1sFN7JcPxqGTjn/KIFfJ6LHhAR0BLBmnRwrktIMEKPnq0Q4Ntk19xFGUMvcqJsKLQMgXZNSMhy/c0BQ+DgDQwA9BaCTiT8XoOGI+avpa/OXM4OrZeZ3I3IpYHP5rP8woWXXthKxCgBR44pdP1KSCd+z1l96g25HQjJp4HTt/1/EXdJ0Q/4BopPD7FJCZJ4AAAAASUVORK5CYII=") 16 16, crosshair !important; }


/* ===== Появление секций при скролле ===== */
.rv-on section { opacity:0; transition: opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1); }
.rv-on section.rv-up { transform: translateY(40px); }
.rv-on section.rv-zoom { transform: scale(.96); }
.rv-on section.rv-fade { transform: none; }
.rv-on section.rv-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rv-on section { opacity:1 !important; transform:none !important; } }


/* ===== Розовая кнопка: простое увеличение + розовое свечение (без заливки/прицела) ===== */
.v5-imgbtn:has(img[src*="btn-game-pink"])::after { display:none !important; }
.v5-imgbtn:has(img[src*="btn-game-pink"]):hover { transform: translateY(-2px) scale(1.04) !important; animation:none !important; }
.v5-imgbtn:has(img[src*="btn-game-pink"]):hover img { filter: brightness(1.05) drop-shadow(0 12px 26px rgba(0,0,0,.42)) drop-shadow(0 0 22px rgba(230,0,126,.62)) !important; }
.v5-imgbtn:has(img[src*="btn-game-pink"]):active { transform: scale(.97) !important; }


/* ===== Ховер плашек сценариев ===== */
.scen-grid > div { transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease, border-color .32s ease; }
.scen-grid > div:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(0,0,0,.45); border-color: rgba(154,214,0,0.5) !important; }
.scen-grid > div > img { transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.scen-grid > div:hover > img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce){ .scen-grid > div, .scen-grid > div > img { transition:none; } .scen-grid > div:hover { transform:none; } .scen-grid > div:hover > img { transform:none; } }


/* ===== ВСЕ залитые кнопки: увеличение + свечение (отмена заливки 07) ===== */
.v5-imgbtn:has(img[src*="btn-game"])::after { display:none !important; }
.v5-imgbtn:has(img[src*="btn-game"]):hover { transform: translateY(-2px) scale(1.04) !important; animation:none !important; }
.v5-imgbtn:has(img[src*="btn-game"]):active { transform: scale(.97) !important; }
.v5-imgbtn:has(img[src*="btn-game-clean"]):hover img { filter: brightness(1.06) drop-shadow(0 12px 26px rgba(0,0,0,.42)) drop-shadow(0 0 22px rgba(154,214,0,.6)) !important; }
.v5-imgbtn:has(img[src*="btn-game-pink"]):hover img { filter: brightness(1.05) drop-shadow(0 12px 26px rgba(0,0,0,.42)) drop-shadow(0 0 22px rgba(230,0,126,.62)) !important; }
@media (prefers-reduced-motion: reduce){ .v5-imgbtn:has(img[src*="btn-game"]):hover { transform:none !important; } }


/* ===== ФИНАЛ: залитые кнопки — гарантированный подъём + свечение ===== */
.v5-imgbtn:has(img[src*="btn-game"]):hover { transform: translateY(-3px) scale(1.05) !important; }
.v5-imgbtn:has(img[src*="btn-game"]):active { transform: scale(.96) !important; }
.v5-imgbtn:has(img[src*="btn-game-clean"]):hover img { filter: brightness(1.07) drop-shadow(0 14px 28px rgba(0,0,0,.45)) drop-shadow(0 0 24px rgba(154,214,0,.72)) !important; }
.v5-imgbtn:has(img[src*="btn-game-pink"]):hover img { filter: brightness(1.06) drop-shadow(0 14px 28px rgba(0,0,0,.45)) drop-shadow(0 0 28px rgba(230,0,126,.8)) !important; }


/* ---- мобильное меню: телефон + кнопка внутри бургер-меню ---- */
@media (max-width: 1360px) {
  header div[style*="justify-content:flex-end"] { display: none !important; }
  nav[data-v5-nav-links].open ~ div[style*="justify-content:flex-end"] {
    display: flex !important; order: 5 !important; width: 100% !important;
    flex-direction: column !important; align-items: center !important;
    justify-content: center !important; gap: 18px !important; padding: 18px 0 6px !important; border-top: 1px solid rgba(255,255,255,0.14) !important;
  }
  nav[data-v5-nav-links].open ~ div[style*="justify-content:flex-end"] > div { text-align: center !important; } nav[data-v5-nav-links].open ~ div[style*="justify-content:flex-end"] > div > div { justify-content: center !important; }
  nav[data-v5-nav-links].open ~ div[style*="justify-content:flex-end"] a[aria-label="Забронировать"] { top: 0 !important; }
}


/* ---- липкая шапка на мобиле/планшете (когда активен бургер) ---- */
@media (max-width: 1360px) {
  header {
    top: 0 !important;
    z-index: 100 !important;
    background: transparent !important;
  }
  body.home header { position: fixed !important; left: 0 !important; right: 0 !important; }
  body:not(.home) header { position: sticky !important; }
  header.v5-scrolled, body.v5-menu-open header {
    background: rgba(11,13,9,0.94) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 14px rgba(0,0,0,0.35);
  }
}


/* --- бургер: гарантированно виден и справа на мобиле/планшете --- */
@media (max-width: 1360px){
  header nav[data-v5-nav-links]:not(.open){ display: none !important; }
  header button.v5-burger{
    display: inline-flex !important; visibility: visible !important; opacity: 1 !important;
    position: relative !important; z-index: 300 !important; margin-left: auto !important;
    order: 2 !important; flex: 0 0 auto !important;
  }
}


/* --- показать телефон в открытом бургер-меню (перебивает скрытие на мобиле) --- */
@media (max-width: 1360px){
  nav[data-v5-nav-links].open ~ div[style*="justify-content:flex-end"] { overflow: visible !important; }
  nav[data-v5-nav-links].open ~ div[style*="justify-content:flex-end"] > div[style*="text-align:right"] { display: block !important; text-align: center !important; }
  nav[data-v5-nav-links].open ~ div[style*="justify-content:flex-end"] > div[style*="text-align:right"] > div { justify-content: center !important; }
}


/* --- мобильная кнопка брони: заливная зелёная в меню, тёмная PNG на десктопе --- */
.v5-book-mob { display: none !important; }
@media (max-width: 1360px){
  .v5-book-mob { display: inline-block !important; }
  header .v5-imgbtn[aria-label="Забронировать"] { display: none !important; }
}


/* --- мобильная кнопка брони: ховер-масштаб есть, свечение убрано, курсор обычный --- */
.v5-book-mob:hover img, .v5-book-mob:active img { filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35)) !important; }
.v5-book-mob { cursor: pointer !important; }


/* --- мобильная кнопка брони: полноширинная зелёная CSS-кнопка (крупная, читаемая) --- */
@media (max-width: 1360px){
  a.v5-book-mob {
    display: flex !important; align-items: center; justify-content: center; gap: 12px;
    width: 100% !important; max-width: 460px; box-sizing: border-box;
    background: #9AD600 !important; color: #14210a !important;
    font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 22px;
    text-transform: uppercase; letter-spacing: 1px; text-decoration: none; line-height: 1;
    padding: 19px 24px; border-radius: 12px; cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,0.4);
    transition: transform .15s ease, filter .15s ease;
  }
  a.v5-book-mob:hover { filter: brightness(1.06); }
  a.v5-book-mob:active { transform: scale(.97); }
  a.v5-book-mob svg { stroke: #14210a; flex: 0 0 auto; }
}


/* кнопка брони: текст в одну строку */
@media (max-width: 1360px){ a.v5-book-mob{ white-space: nowrap !important; font-size: clamp(15px,4.2vw,20px) !important; letter-spacing: 0.3px !important; } }


/* --- мобильный герой: затемнение видео для читаемости текста --- */
@media (max-width: 760px){
  #top::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: linear-gradient(180deg,
      rgba(8,10,7,0.42) 0%,
      rgba(8,10,7,0.55) 30%,
      rgba(8,10,7,0.40) 56%,
      rgba(8,10,7,0.70) 100%);
  }
}


/* --- мобильный герой: настоящие кнопки (выровнены) + фича-лента --- */
.hero-cta-mob{ display:none; }
@media (max-width: 760px){
  .hero-sub{ font-size:17px !important; line-height:1.4 !important; margin-bottom:22px !important; max-width:100% !important; }
  /* настоящие PNG-кнопки: показываем, одинаковая высота, в ряд с переносом */
  .hero-btns{ flex-direction:column !important; align-items:flex-start !important; gap:14px !important; width:100%; }
  .hero-btns > a.v5-imgbtn{ display:inline-block !important; }
  .hero-btns > a.v5-imgbtn img{ height:auto !important; max-width:88vw !important; }
  /* плоские замены прячем только внутри хиро (в сценариях класс остаётся рабочим) */
  .hero-cta-mob{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; box-sizing:border-box; padding:16px 20px; border-radius:12px; font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(15px,4.4vw,20px); text-transform:uppercase; letter-spacing:0.5px; text-decoration:none; white-space:nowrap; background:#9AD600; color:#14210a; box-shadow:0 8px 22px rgba(0,0,0,0.4); }
  .hero-cta-mob-sec{ background:rgba(13,15,11,0.9) !important; color:#f2f5ea !important; border:1.5px solid rgba(154,214,0,0.55); }
  .hero-btns > .hero-cta-mob{ display:none !important; }
  /* 4 фича-плашки — горизонтальная свайп-лента */
  .hero-feat{ display:flex !important; grid-template-columns:none !important; grid-template-rows:none !important; flex-wrap:nowrap !important; overflow-x:auto !important; gap:12px !important; padding:16px !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .hero-feat::-webkit-scrollbar{ display:none; }
  .hero-feat > div{ flex:0 0 76% !important; scroll-snap-align:start; gap:12px !important; }
}

/* --- мобильная галерея: сброс bento, 2 колонки без пустых гнёзд --- */
@media (max-width: 760px){
  #gallery [style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:none !important;
    grid-auto-rows:150px !important;
    gap:12px !important;
  }
  #gallery .gtile{ grid-column:auto !important; grid-row:auto !important; }
  #gallery .gtile:first-child{ grid-column:1 / -1 !important; grid-row:span 2 !important; }
}


/* --- сценарии: кнопка после карточек на мобиле --- */
@media (max-width: 760px){
  .scen-hdr-btn{ display:none !important; }
  .scen-cta-mob{ margin-top:24px !important; }
}


/* --- мобилка: схлопывание auto-сеток (шапки contacts, тест-драйв и т.п.) --- */
@media (max-width: 900px){
  [style*="grid-template-columns:auto 1fr auto"],
  [style*="grid-template-columns: auto 1fr auto"],
  [style*="grid-template-columns:auto 1fr"],
  [style*="grid-template-columns: auto 1fr"],
  [style*="grid-template-columns:1fr auto"],
  [style*="grid-template-columns: 1fr auto"]{ grid-template-columns:1fr !important; }
}


/* --- мобилка: контакты — карточки в один столбец, без вертикального текста --- */
@media (max-width: 760px){
  #contacts [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; }
  #contacts a[href^="tel:"]{ white-space:nowrap; }
  #contacts [style*="width:78px"]{ width:56px !important; height:56px !important; }
}


/* --- контакты: карточки через класс (надёжно) --- */
.c-cards{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width: 760px){ .c-cards{ display:block !important; } .c-cards > div{ margin-bottom:16px !important; } }


/* --- контакты: соцкарточка — кнопки переносятся вниз на мобиле --- */
@media (max-width: 760px){
  #contacts [style*="padding:26px 32px"]{ flex-wrap:wrap !important; }
  #contacts [style*="padding:26px 32px"] > [style*="flex:1"]{ min-width:0 !important; }
}


/* --- контакты: соцкарточка в столбик на мобиле --- */
@media (max-width: 760px){
  #contacts [style*="padding:26px 32px"]:has(a[aria-label="ВКонтакте"]){ flex-direction:column !important; align-items:flex-start !important; gap:16px !important; }
  #contacts [style*="padding:26px 32px"]:has(a[aria-label="ВКонтакте"]) > [style*="flex:1"]{ flex:none !important; width:100% !important; }
}


/* --- контакты: карта справа, контакты слева, реквизиты+почта снизу --- */
.c-top{ display:grid; grid-template-columns:1.05fr 1fr; gap:20px; align-items:stretch; margin-bottom:20px; }
.c-left{ display:flex; flex-direction:column; gap:16px; }
.c-map{ position:relative; border:1px solid rgba(154,214,0,0.35); border-radius:18px; overflow:hidden; box-shadow:0 0 40px rgba(154,214,0,0.1); min-height:100%; }
.c-bottom{ display:grid; grid-template-columns:1.55fr 1fr; gap:20px; align-items:stretch; }
@media (max-width: 900px){
  .c-top, .c-bottom{ display:block !important; }
  .c-top > * + *, .c-bottom > * + *{ margin-top:16px; }
  .c-map{ min-height:340px; }
  .c-head{ display:block !important; }
  .c-head > a{ margin-top:26px; }
}
@media (max-width: 760px){
  .c-soc{ flex-direction:column !important; align-items:flex-start !important; gap:16px !important; }
  .c-soc > div{ width:100% !important; }
}


/* --- контакты: одна плашка слева (телефон/адрес/почта/соцсети) --- */
.c-info{ display:flex; flex-direction:column; justify-content:center; gap:30px; border:1px solid rgba(154,214,0,0.4); border-radius:18px; background:linear-gradient(120deg,rgba(154,214,0,0.05),rgba(11,13,9,0)); padding:38px 40px; }
.c-row{ display:block; }
.c-ico{ display:none !important; }
.c-lab{ font-family:'Oswald',sans-serif; font-weight:600; font-size:22px; text-transform:uppercase; color:#f4f6ef; letter-spacing:1px; margin-bottom:8px; }
.c-soc-btn{ width:54px; height:54px; border-radius:12px; border:1.5px solid rgba(154,214,0,0.5); display:flex; align-items:center; justify-content:center; box-shadow:0 0 20px rgba(154,214,0,0.25); transition:background .15s ease; }
.c-soc-btn:hover{ background:rgba(154,214,0,0.12); }
@media (max-width: 760px){
  .c-info{ padding:28px 24px; gap:26px; }
  .c-lab{ font-size:19px; }
}


/* --- контакты на мобиле: клякса не должна перебивать подзаголовок --- */
@media (max-width: 760px){
  #contacts > img[aria-hidden="true"]{ opacity:0.22 !important; width:190px !important; left:-70px !important; top:-10px !important; }
  #contacts .c-head p{ text-shadow:0 2px 10px rgba(8,10,7,0.95), 0 0 18px rgba(8,10,7,0.85); }
  #contacts .c-head h2{ text-shadow:0 3px 14px rgba(8,10,7,0.9); }
}


/* --- полоска "Остались вопросы": иконка у заголовка --- */
.q-head{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:4px; align-items:center; }
.q-head > svg{ grid-row:1; grid-column:1; }
.q-title{ grid-row:1; grid-column:2; }
.q-sub{ grid-row:2; grid-column:2; }
@media (max-width: 760px){
  .q-head{ column-gap:12px; }
  .q-head > svg{ width:32px; height:32px; }
}


/* --- фикс: при открытом бургере шапка не должна пропадать (overflow:hidden ломает sticky) --- */
@media (max-width: 1360px){
  body.v5-menu-open header{ position: fixed !important; top:0 !important; left:0 !important; right:0 !important; z-index:350 !important; }
}


/* --- мобильный порядок в секции: плашка -> заголовок -> подзаголовок -> фото -> кнопка --- */
/* работает только там, где размечено фото (.m-hero-photo), чтобы не задеть соседние блоки */
@media (max-width: 760px){
  .m-hero:has(.m-hero-photo){ display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:22px !important; }
  .m-hero:has(.m-hero-photo) .m-hero-text{ display:contents !important; }
  .m-hero:has(.m-hero-photo) .m-hero-badge{ order:1; align-self:flex-start !important; margin-bottom:0 !important; }
  .m-hero:has(.m-hero-photo) .m-hero-h{ order:2; margin:0 !important; }
  .m-hero:has(.m-hero-photo) .m-hero-p{ order:3; margin:0 !important; max-width:100% !important; }
  .m-hero:has(.m-hero-photo) .m-hero-photo{ order:4; }
  .m-hero:has(.m-hero-photo) .m-hero-cta{ order:5; align-self:flex-start !important; margin:0 !important; }
}


/* --- стрелки между плашками с цифрами (десктоп — горизонтальные, мобилка — вертикальные) --- */
.steps-flow > div{ position:relative; }
.steps-flow > div::after{
  content:""; position:absolute; z-index:3; pointer-events:none;
  top:76px; right:-23px; width:30px; height:30px;
  background:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6007E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
}
/* десктоп: без стрелки в конце ряда и у последнего */
@media (min-width:1361px){
  .steps-flow--4 > div:nth-child(4n)::after{ display:none; }
  .steps-flow--5 > div:nth-child(5n)::after{ display:none; }
  .steps-flow > div:last-child::after{ display:none; }
}
/* планшет: колонок непредсказуемо — стрелки прячем */
@media (max-width:1360px) and (min-width:701px){
  .steps-flow > div::after{ display:none; }
}
/* мобилка: одна колонка — стрелки вертикальные */
@media (max-width:700px){
  .steps-flow > div::after{
    display:block; top:auto; bottom:-23px; right:auto; left:50%;
    transform:translateX(-50%) rotate(90deg);
  }
  .steps-flow > div:last-child::after{ display:none; }
}


/* --- фото только на широких экранах --- */
@media (max-width: 760px){ .m-hide-mob{ display:none !important; } }


/* --- секция «фото слева»: на мобиле фото уходит после текста --- */
@media (max-width: 760px){
  .m-sec:has(.m-sec-photo){ display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:0 !important; }
  .m-sec:has(.m-sec-photo) .m-sec-text{ display:contents !important; }
  .m-sec:has(.m-sec-photo) .m-sec-text > *{ order:1; }
  .m-sec:has(.m-sec-photo) .m-sec-photo{ order:2; margin-top:30px; }
}


/* --- кнопка «Получить презентацию»: ховер с белым текстом + нажатие --- */
.fr-submit{ transition: transform .14s ease, color .14s ease, box-shadow .14s ease, filter .14s ease; will-change: transform; }
.fr-submit:hover{ color:#fff !important; transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 26px rgba(0,0,0,.42), 0 0 22px rgba(230,0,126,.62); }
.fr-submit:active{ color:#fff !important; transform: translateY(1px) scale(.96); filter: brightness(.92); box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 3px 10px rgba(0,0,0,.35); transition-duration: .06s; }
.fr-submit:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .fr-submit:hover, .fr-submit:active{ transform:none; } }


/* --- корпоративы: финальный CTA (кнопка длиннее, заголовок с воздухом) --- */
@media (max-width: 760px){
  .cta-title{ line-height:1.08 !important; }
  .cta-wide{ display:block !important; width:100% !important; }
  .cta-wide img{ width:100% !important; height:auto !important; }
  .cta-wide > span{ left:11% !important; right:5% !important; font-size:clamp(14px,4.1vw,18px) !important; gap:10px !important; }
}


/* --- корпоративы: заголовки из двух строк не должны наезжать --- */
@media (max-width: 760px){
  .h-air{ line-height:1.02 !important; }
}


/* --- лента характеристик: на мобиле сетка 2x2 --- */
@media (max-width: 760px){
  .spec-ribbon{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important;
    padding:16px !important; overflow:visible !important; }
  .spec-ribbon > div{ flex-direction:column !important; align-items:flex-start !important; gap:10px !important;
    padding:14px 12px !important; border:1px solid rgba(154,214,0,0.22); border-radius:12px;
    background:linear-gradient(160deg,rgba(154,214,0,0.05),rgba(11,13,9,0)); }
  .spec-ribbon > div > span{ width:42px !important; height:42px !important; }
  .spec-ribbon > div > span svg{ width:22px !important; height:22px !important; }
  .spec-ribbon > div > div > div:nth-child(1){ font-size:12px !important; letter-spacing:0.8px !important; }
  .spec-ribbon > div > div > div:nth-child(2){ font-size:18px !important; line-height:1.2 !important; }
  .spec-ribbon > div > div > div:nth-child(3){ font-size:12px !important; line-height:1.35 !important; }
}


/* --- FAQ на мобиле: читаемый вопрос, номер напротив первой строки --- */
@media (max-width: 760px){
  .faq-head{ align-items:flex-start !important; gap:14px !important; padding:22px 20px !important; }
  .faq-head > span:first-child{ font-size:22px !important; line-height:23px !important; min-width:30px !important; }
  .faq-head > span:nth-child(2){ font-size:17px !important; line-height:23px !important; letter-spacing:0.2px !important; }
  .faq-icon{ font-size:30px !important; line-height:23px !important; }
  .faq-body p{ padding:0 20px 24px 64px !important; font-size:16px !important; }
}


/* --- шаги: номер шага ближе к заголовку на мобиле --- */
@media (max-width: 760px){
  .steps-flow > div{ padding:22px 20px 24px !important; }
  .steps-flow > div > span:first-child{ font-size:44px !important; margin-bottom:6px !important; }
}


/* --- плашки характеристик = часть секции «как проходит день» (мобилка) --- */
@media (max-width: 760px){
  /* секция шагов не отрывается от плашек */
  .sec-steps{ padding-bottom: 10px !important; }
  /* секция плашек прижата к предыдущей */
  .sec-attached{ padding-top: 0 !important; }
  /* убираем общую полупрозрачную рамку вокруг четырёх плашек */
  .spec-ribbon{ border:0 !important; border-radius:0 !important; padding:0 !important; }
}


/* --- CTA-кнопка: выравнивание по телу кнопки, а не по брызгам --- */
/* тело PNG занимает 9.66%..97.65% ширины: слева брызг больше, компенсируем сдвигом */
@media (max-width: 760px){
  .cta-wide{ left:-3.7% !important; }
  .cta-wide > span{ left:15% !important; right:8% !important; }
}


/* --- плашки характеристик прижаты к секции шагов и на широких экранах --- */
@media (min-width: 761px){
  .sec-steps{ padding-bottom: 30px !important; }
  .sec-attached{ padding-top: 0 !important; }
}


/* --- стрелки для сеток с фиксированным числом колонок (3 и 4) --- */
@media (min-width: 901px){
  .steps-flow--3 > div::after{ display:block !important; }
  .steps-flow--3 > div:nth-child(3n)::after{ display:none !important; }
  .steps-flow--3 > div:last-child::after{ display:none !important; }
  .steps-flow--4 > div::after{ display:block !important; }
  .steps-flow--4 > div:nth-child(4n)::after{ display:none !important; }
  .steps-flow--4 > div:last-child::after{ display:none !important; }
}
/* на планшете 3-колоночная сетка становится 2-колоночной — стрелки прячем */
@media (max-width: 900px) and (min-width: 701px){
  .steps-flow > div::after{ display:none !important; }
}


/* --- плашки-названия не должны растягивать страницу на мобиле --- */
@media (max-width: 760px){
  div:has(> img[src*="badge-plate"]){ max-width:100% !important; }
  div:has(> img[src*="badge-plate"]) > span{ white-space:normal !important; }
  div:has(> img[src*="badge-plate"]) > span[style*="letter-spacing:2px"]{ font-size:13px !important; line-height:1.35 !important; }
}


/* --- на мобиле плашка-название всегда перед заголовком --- */
@media (max-width: 760px){
  div:has(> img[src*="badge-plate"]){ order:-1; }
  /* шапки секций на мобиле — в столбик, чтобы порядок читался сверху вниз */
  section [style*="justify-content:space-between"][style*="flex-wrap:wrap"]{ flex-direction:column !important; align-items:flex-start !important; }
}


/* --- 8 зон комфорта на мобиле: фото сверху, плашки по 2 в ряд --- */
@media (max-width: 760px){
  .comfort-photos{ order:-1; min-height:340px !important; }
  .comfort-cards{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .comfort-cards > div{ flex-direction:column !important; align-items:flex-start !important; gap:10px !important; padding:14px 12px !important; }
  .comfort-cards > div > span:first-child{ width:40px !important; height:40px !important; }
  .comfort-cards > div > span:first-child svg{ width:20px !important; height:20px !important; }
}


/* --- просмотрщик фото (как галерея на главной), работает на любой странице --- */
.pglb{ position:fixed; inset:0; background:rgba(6,7,5,0.94); backdrop-filter:blur(6px); z-index:99999; display:none; align-items:center; justify-content:center; }
.pglb.open{ display:flex; }
.pglb .pglb-img{ max-width:92vw; max-height:82vh; border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,0.65); }
.pglb-btn{ position:absolute; background:rgba(154,214,0,0.12); border:1.5px solid rgba(154,214,0,0.5); width:58px; height:58px; border-radius:14px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease; }
.pglb-btn:hover{ background:rgba(154,214,0,0.22); }
.pglb-prev{ left:26px; top:50%; transform:translateY(-50%); }
.pglb-next{ right:26px; top:50%; transform:translateY(-50%); }
.pglb-close{ right:26px; top:26px; background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.25); }
.pglb-count{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:2px; font-size:16px; color:#f4f6ef; text-shadow:0 2px 8px rgba(0,0,0,0.85); }
.pgtile{ cursor:pointer; }
@media (max-width:760px){
  .pglb-prev{ left:10px; } .pglb-next{ right:10px; } .pglb-close{ right:12px; top:12px; }
  .pglb-btn{ width:48px; height:48px; } .pglb .pglb-img{ max-height:74vh; }
}


/* --- мозаика фото на мобиле: одна большая сверху + две снизу --- */
@media (max-width: 760px){
  .comfort-photos{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto !important;
    grid-auto-rows:auto !important;
    height:auto !important; min-height:0 !important; gap:10px !important;
  }
  .comfort-photos > *{ grid-column:auto !important; grid-row:auto !important; aspect-ratio:1/1; }
  .comfort-photos > *:nth-child(1){ grid-column:1 / -1 !important; aspect-ratio:16/10; }
  /* лишние плитки прячем — остаются 1 большая + 2 снизу */
  .comfort-photos > *:nth-child(2), .comfort-photos > *:nth-child(3){ display:none !important; }
  /* «+10 ФОТО» на правой нижней */
  .comfort-photos > *:nth-child(5) span{ font-size:30px !important; }
  .comfort-photos > *:nth-child(5) span + span{ font-size:12px !important; letter-spacing:2px !important; }
}


/* --- порядок в секции: неразмеченные блоки идут вместе с текстом (до фото и кнопки) --- */
@media (max-width: 760px){
  .m-hero:has(.m-hero-photo) .m-hero-text > *{ order:3; }
}


/* --- фикс: явный порядок элементов сильнее правила по умолчанию --- */
@media (max-width: 760px){
  .m-hero:has(.m-hero-photo) .m-hero-badge{ order:1 !important; }
  .m-hero:has(.m-hero-photo) .m-hero-h{ order:2 !important; }
  .m-hero:has(.m-hero-photo) .m-hero-p{ order:3 !important; }
  .m-hero:has(.m-hero-photo) .m-hero-photo{ order:4 !important; }
  .m-hero:has(.m-hero-photo) .m-hero-cta{ order:5 !important; }
}

/* --- плашка «Бессрочные» — розовая на всех экранах --- */
.cert-feats > div:nth-child(1){ border-color:rgba(230,0,126,0.45) !important; background:rgba(230,0,126,0.06) !important; }
.cert-feats > div:nth-child(1) > span{ background:rgba(230,0,126,0.10) !important; border-color:rgba(230,0,126,0.4) !important; }
.cert-feats > div:nth-child(1) svg{ stroke:#E6007E !important; }
.cert-feats > div:nth-child(1) h4{ color:#E6007E !important; }

/* --- плашки сертификата на мобиле: «бессрочные» первой строкой, остальные две под ней --- */
@media (max-width: 760px){
  .cert-feats{ gap:10px !important; margin-bottom:30px !important; }
  .cert-feats > div{ flex:1 1 calc(50% - 5px) !important; min-width:0 !important; padding:16px 14px 18px !important; }
  .cert-feats > div:nth-child(1){ order:1; flex:1 1 100% !important; }
  .cert-feats > div:nth-child(2), .cert-feats > div:nth-child(3){ order:2; }
  .cert-feats > div > span{ width:40px !important; height:40px !important; margin-bottom:10px !important; }
  .cert-feats > div h4{ font-size:15px !important; }
  .cert-feats > div p{ font-size:13px !important; }
}


/* --- CTA-блок на мобиле: кнопки во всю ширину, выровнены по телу картинки --- */
@media (max-width: 760px){
  .cta-btns{ width:100% !important; flex-direction:column !important; align-items:stretch !important; gap:12px !important; }
  .cta-btns > a{ width:100% !important; }
  .cta-btns > a.cta-wide img{ width:100% !important; height:auto !important; }
}


/* --- плеер обзорного видео --- */
.vidm{ position:fixed; inset:0; background:rgba(6,7,5,0.95); backdrop-filter:blur(6px); z-index:99999; display:none; align-items:center; justify-content:center; }
.vidm.open{ display:flex; }
.vidm video{ max-width:92vw; max-height:86vh; border-radius:14px; background:#000; box-shadow:0 24px 70px rgba(0,0,0,0.65); }
.vidm-close{ position:absolute; right:26px; top:26px; width:58px; height:58px; border-radius:14px; background:rgba(255,255,255,0.06); border:1.5px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease; }
.vidm-close:hover{ background:rgba(255,255,255,0.14); }
@media (max-width:760px){ .vidm-close{ right:12px; top:12px; width:46px; height:46px; } .vidm video{ max-width:96vw; max-height:74vh; } }


/* --- модалка сценария: крупная картинка + подпись --- */
.scenm{ position:fixed; inset:0; background:rgba(6,7,5,0.95); backdrop-filter:blur(6px); z-index:99999; display:none; align-items:center; justify-content:center; padding:24px; }
.scenm.open{ display:flex; }
.scenm-inner{ max-width:1200px; width:100%; max-height:92vh; display:flex; flex-direction:column; gap:18px; overflow:auto; }
.scenm-inner img{ display:block; width:auto; max-width:100%; max-height:66vh; margin:0 auto; border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,0.6); }
.scenm-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(24px,3vw,38px); text-transform:uppercase; color:#f4f6ef; letter-spacing:0.5px; margin:0; }
.scenm-text{ font-family:'Manrope',sans-serif; font-size:17px; line-height:1.6; color:#c7ccbe; margin:0; max-width:900px; }
.scenm-close{ position:absolute; right:26px; top:26px; width:54px; height:54px; border-radius:14px; background:rgba(255,255,255,0.06); border:1.5px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease; }
.scenm-close:hover{ background:rgba(255,255,255,0.14); }
.scen-clickable{ cursor:pointer; }
@media (max-width:760px){
  .scenm{ padding:14px; }
  .scenm-close{ right:10px; top:10px; width:44px; height:44px; }
  .scenm-inner img{ max-height:52vh; }
  .scenm-text{ font-size:15px; }
}


/* --- карточки сценариев: кнопка «Подробнее» --- */
.scen-more{ flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:13px; letter-spacing:1px; text-transform:uppercase;
  color:#9AD600; border:1px solid rgba(154,214,0,0.5); border-radius:8px; padding:7px 12px;
  background:rgba(11,13,9,0.55); white-space:nowrap; transition:background .15s ease, color .15s ease; }
.scen-clickable{ cursor:pointer; }
.scen-clickable:hover .scen-more{ background:#9AD600; color:#14210a; }
.scen-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
@media (max-width:760px){ .scen-more{ font-size:12px; padding:6px 10px; } }


/* --- геро на мобиле: заголовок в 2 строки, кнопки по телу картинки, плашки 2x2 --- */
@media (max-width: 760px){
  /* заголовок: «НА МИНИ-ТАНКАХ» должно помещаться в одну строку */
  #htl1{ font-size:clamp(36px,11.5vw,52px) !important; }
  #htl2{ font-size:clamp(27px,8.4vw,40px) !important; }
  .hero-sub{ font-size:16px !important; margin-bottom:20px !important; }

  /* кнопки: во всю ширину и выровнены по телу, а не по брызгам */
  .hero-btns{ gap:12px !important; }
  .hero-btns > a.v5-imgbtn{ display:block !important; width:100% !important; position:relative; }
  .hero-btns > a.v5-imgbtn img{ width:100% !important; height:auto !important; max-width:none !important; }
  /* зелёная: брызги слева -> сдвигаем влево */
  .hero-btns > a.v5-imgbtn:has(img[src*="btn-game-clean"]){ left:-3.7%; }
  .hero-btns > a.v5-imgbtn:has(img[src*="btn-game-clean"]) > span{ left:15% !important; right:8% !important; font-size:clamp(14px,4.2vw,19px) !important; }
  /* чёрная: брызги справа -> сдвигаем вправо */
  .hero-btns > a.v5-imgbtn:has(img[src*="btn-video-long2"]){ left:4.4%; }
  .hero-btns > a.v5-imgbtn:has(img[src*="btn-video-long2"]) > span{ left:7% !important; right:15% !important; font-size:clamp(14px,4.2vw,19px) !important; }

  /* плашки-преимущества: аккуратная сетка 2x2, как на других страницах */
  .hero-feat{ display:flex !important; grid-template-columns:none !important;
    flex-wrap:nowrap !important; overflow-x:auto !important;
    gap:10px !important; padding:14px !important;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .hero-feat::-webkit-scrollbar{ display:none; }
  .hero-feat > div{ flex:0 0 calc(50% - 5px) !important; scroll-snap-align:none;
    flex-direction:column !important; align-items:flex-start !important;
    gap:8px !important; padding:12px 10px !important;
    border:1px solid rgba(154,214,0,0.22); border-radius:12px;
    background:linear-gradient(160deg,rgba(154,214,0,0.05),rgba(11,13,9,0)); }
  .hero-feat > div > div:first-child{ width:38px !important; height:38px !important; }
  .hero-feat > div > div:first-child svg{ width:20px !important; height:20px !important; }
  .hero-feat > div > div:last-child > div:first-child{ font-size:13px !important; line-height:1.2 !important; }
  .hero-feat > div > div:last-child > div:last-child{ font-size:11px !important; line-height:1.3 !important; }
}


/* --- лента преимуществ как слайдер: по 2 плитки на слайд + точки --- */
.feat-dots{ display:none; }
@media (max-width: 760px){
  /* прилипание по страницам: останавливаемся на 1-й и 3-й плитке */
  .hero-feat > div:nth-child(odd){ scroll-snap-align:start !important; }
  .feat-dots{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:12px; }
  .feat-dots i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.28);
    cursor:pointer; transition:background .2s ease, width .2s ease; }
  .feat-dots i.on{ background:#9AD600; width:22px; border-radius:4px; }
}


/* --- преимущества: два чётких слайда по две плитки + круглые точки --- */
.feat-slide{ display: contents; }              /* на широких экранах слайдов нет */
@media (max-width: 760px){
  .hero-feat{
    display:flex !important; grid-template-columns:none !important;
    flex-wrap:nowrap !important; overflow-x:auto !important;
    gap:0 !important; padding:14px 0 !important; margin-bottom:10px !important;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .hero-feat::-webkit-scrollbar{ display:none; }
  /* слайд ровно в ширину экрана — соседний не выглядывает */
  .feat-slide{
    display:flex !important; flex:0 0 100% !important; box-sizing:border-box;
    gap:10px; padding:0 14px; scroll-snap-align:start; scroll-snap-stop:always;
  }
  .feat-slide > div{ flex:1 1 0 !important; min-width:0; scroll-snap-align:none !important; }

  /* точки: активная — крупная залитая, неактивная — мелкая без заливки */
  .feat-dots{ display:flex; justify-content:center; align-items:center; gap:10px; margin-top:2px !important; }
  .feat-dots i{
    width:7px; height:7px; border-radius:50% !important;
    background:transparent !important; border:1.5px solid rgba(255,255,255,0.45);
    cursor:pointer; transition:all .2s ease;
  }
  .feat-dots i.on{
    width:12px; height:12px;
    background:#9AD600 !important; border-color:#9AD600;
    box-shadow:0 0 10px rgba(154,214,0,0.5);
  }
}


/* --- слайды: раздельные правила для слайда и для плиток внутри него --- */
@media (max-width: 760px){
  /* слайд — просто контейнер на всю ширину, без карточного оформления */
  .hero-feat > .feat-slide{
    flex:0 0 100% !important; display:flex !important; flex-direction:row !important;
    align-items:stretch !important; gap:10px !important;
    padding:0 14px !important; box-sizing:border-box !important;
    border:0 !important; background:none !important; border-radius:0 !important;
    scroll-snap-align:start !important; scroll-snap-stop:always;
  }
  /* карточное оформление — самим плиткам внутри слайда */
  .hero-feat .feat-slide > div{
    flex:1 1 0 !important; min-width:0 !important;
    display:flex !important; flex-direction:column !important; align-items:flex-start !important;
    gap:8px !important; padding:12px 10px !important;
    border:1px solid rgba(154,214,0,0.22) !important; border-radius:12px !important;
    background:linear-gradient(160deg,rgba(154,214,0,0.05),rgba(11,13,9,0)) !important;
  }
  .hero-feat .feat-slide > div > div:first-child{ width:38px !important; height:38px !important; flex-shrink:0; }
  .hero-feat .feat-slide > div > div:first-child svg{ width:20px !important; height:20px !important; }
  .hero-feat .feat-slide > div > div:last-child > div:first-child{ font-size:13px !important; line-height:1.2 !important; }
  .hero-feat .feat-slide > div > div:last-child > div:last-child{ font-size:11px !important; line-height:1.3 !important; }
}


/* --- фикс: старое правило иконки не должно зажимать первую плитку слайда --- */
@media (max-width: 760px){
  .hero-feat > .feat-slide > div{ width:auto !important; height:auto !important; }
  .hero-feat > .feat-slide > div > div:first-child{ width:38px !important; height:38px !important; }
}


/* --- фикс 2: перебиваем старое правило иконки с запасом по специфичности --- */
@media (max-width: 760px){
  .hero-feat > .feat-slide > div:nth-child(n){
    width:auto !important; height:auto !important; align-self:stretch !important;
  }
  .hero-feat > .feat-slide > div:nth-child(n) > div:first-child{
    width:38px !important; height:38px !important; flex-shrink:0 !important;
  }
}


/* --- плавный переход из геро в следующую секцию (десктоп и мобилка) --- */
/* фон геро и затемнения растворяются к низу, открывая фон страницы */
#top > div[style*="position:absolute"]{
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0.55) 92%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0.55) 92%, rgba(0,0,0,0) 100%);
}
#top::after{
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0.55) 92%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0.55) 92%, rgba(0,0,0,0) 100%);
}


/* --- калькулятор на мобиле: компактнее и в удобном порядке --- */
@media (max-width: 760px){
  /* меньше воздуха внутри общей рамки */
  .calc-frame{ padding:18px 14px 20px !important; border-radius:16px !important; }
  .calc-grid{ gap:20px !important; }

  /* порядок: сначала цены, потом день -> танки -> часы, в конце расчёт */
  .calc-right{ display:flex !important; flex-direction:column !important; }
  .calc-right > *{ order:5; }
  .calc-b-day{ order:1 !important; margin-bottom:16px !important; }
  .calc-b-tanks{ order:2 !important; margin-bottom:16px !important; }
  .calc-b-hours{ order:3 !important; margin-bottom:18px !important; }

  /* кнопки выбора крупнее под палец */
  #calc-tanks, #calc-hours, #calc-day{ padding:5px !important; gap:5px !important; }
  #calc-tanks button, #calc-hours button{ padding:12px 0 !important; font-size:16px !important; }
  #calc-day button{ padding:14px 8px !important; font-size:14px !important; }

  /* нижняя плашка "уют" — иконка в один ряд с заголовком */
  .calc-perks{ margin-top:20px !important; }
  .calc-perks > div{ flex-direction:row !important; align-items:center !important;
    gap:12px !important; padding:16px 14px !important; }
  .calc-perks > div svg{ width:26px !important; height:26px !important; flex-shrink:0; }
  .calc-perks > div > div > span{ font-size:15px !important; }
  .calc-perks > div div div{ font-size:13px !important; line-height:1.3 !important; }
}


/* --- «Отметь с грохотом» на мобиле: компактные плашки, потом фото, в конце кнопка --- */
@media (max-width: 760px){
  .bday-chips{ gap:8px !important; margin-bottom:0 !important; }
  .bday-chips > div{
    flex:0 0 auto !important;
    gap:8px !important; padding:9px 12px !important;
    border-width:1px !important; border-radius:8px !important;
  }
  .bday-chips > div svg{ width:16px !important; height:16px !important; flex-shrink:0; }
  .bday-chips > div span{ font-size:13px !important; letter-spacing:0.3px !important; }
}


/* --- кнопки с кляксой: во всю ширину и по центру ТЕЛА (не брызг) --- */
@media (max-width: 760px){
  .btn-fit{ display:block !important; width:100% !important; position:relative; left:-3.7%; }
  .btn-fit img{ width:100% !important; height:auto !important; max-width:none !important; }
  .btn-fit > span{ left:15% !important; right:8% !important; font-size:clamp(14px,4.2vw,19px) !important; }
  /* фирменная кнопка сценариев показывается только на мобиле */
  .scen-cta-mob{ display:block !important; margin-top:22px !important; }
}


/* --- корпоративы на главной (мобилка): плашки -> фото -> цена -> кнопка --- */
@media (max-width: 760px){
  #corporate .corp-price{ order:5 !important; margin-top:16px !important; }
  #corporate .m-hero-cta{ order:6 !important; margin-top:16px !important; }
}


/* --- корпоративы (мобилка): фото -> кнопка -> цена мельче; декор под текстом --- */
@media (max-width: 760px){
  /* текст и элементы всегда выше декоративных клякс */
  .m-hero > *, .m-hero .m-hero-text > *{ position:relative; z-index:2; }
  .m-hero img[aria-hidden="true"][src*="paint-"]{ z-index:0 !important; opacity:0.5 !important; }

  /* порядок: фото -> кнопка -> цена */
  #corporate .m-hero-cta{ order:5 !important; margin-top:18px !important; }
  #corporate .corp-price{ order:6 !important; margin-top:14px !important; }
  /* цена мельче */
  #corporate .corp-price p{ font-size:13px !important; line-height:1.35 !important; }
  #corporate .corp-price span{ font-size:13px !important; }
  #corporate .corp-price > span:first-child{ width:34px !important; height:34px !important; flex-shrink:0; }
  #corporate .corp-price svg{ width:18px !important; height:18px !important; }
}


/* ============================================================
   ОБЩЕЕ ПРАВИЛО ДЛЯ ВСЕХ КНОПОК С КЛЯКСОЙ (мобилка)
   Тело кнопки внутри картинки расположено несимметрично:
     btn-game-clean / btn-game-pink : тело 9.66%..97.65%  -> сдвиг -3.7%
     btn-video-long2                : тело 0.48%..90.69%  -> сдвиг +4.4%
   Поэтому центруем по ТЕЛУ, а не по картинке с брызгами.
   ============================================================ */
@media (max-width: 760px){
  /* заголовок тест-драйва — по левому краю, как везде */
  #test-drive h2{ justify-self:start !important; text-align:left !important; }

  .v5-imgbtn:has(img[src*="btn-game"]),
  .v5-imgbtn:has(img[src*="btn-video"]){
    display:block !important; width:100% !important; position:relative;
  }
  .v5-imgbtn:has(img[src*="btn-game"]) img,
  .v5-imgbtn:has(img[src*="btn-video"]) img{
    width:100% !important; height:auto !important; max-width:none !important;
  }
  .v5-imgbtn:has(img[src*="btn-game"]){ left:-3.7%; }
  .v5-imgbtn:has(img[src*="btn-game"]) > span{
    left:15% !important; right:8% !important;
    font-size:clamp(13px,4vw,19px) !important; gap:10px !important;
  }
  .v5-imgbtn:has(img[src*="btn-video"]){ left:4.4%; }
  .v5-imgbtn:has(img[src*="btn-video"]) > span{
    left:7% !important; right:15% !important;
    font-size:clamp(13px,4vw,19px) !important; gap:10px !important;
  }

  /* шапку не трогаем */
  header .v5-imgbtn{ left:0 !important; width:auto !important; display:inline-block !important; }
  header .v5-imgbtn img{ width:auto !important; }
}


/* --- единые боковые отступы на мобиле: 18px, как в галерее --- */
@media (max-width: 760px){
  .v5-container,
  #top > div[style*="max-width:1600px"],
  section > div[style*="max-width:1600px"],
  section [style*="padding:0 48px"],
  section [style*="padding:120px 48px"]{
    padding-left:18px !important; padding-right:18px !important;
  }
}


/* --- корпоративы (мобилка), финальный порядок:
   плашка -> заголовок -> подзаголовок -> ФОТО -> плашки услуг -> кнопка -> цена --- */
@media (max-width: 760px){
  #corporate .m-hero-p{ order:3 !important; margin-bottom:0 !important; }
  #corporate .m-hero-photo{ order:4 !important; margin-top:18px !important; }
  #corporate .corp-cards{ order:5 !important; margin-top:18px !important; }
  #corporate .m-hero-cta{ order:6 !important; margin-top:18px !important; }
  #corporate .corp-price{ order:7 !important; margin-top:8px !important; }
}


/* --- «От звонка до первого выстрела»: 4 плашки 2x2 на мобиле --- */
@media (max-width: 760px){
  .how-facts{ grid-template-columns:1fr 1fr !important; gap:10px !important; padding:14px !important; }
  .how-facts > div{ flex-direction:column !important; align-items:flex-start !important;
    gap:8px !important; padding:12px 10px !important;
    border:1px solid rgba(154,214,0,0.22); border-radius:12px;
    background:linear-gradient(160deg,rgba(154,214,0,0.05),rgba(11,13,9,0)); }
  .how-facts > div > svg{ width:26px !important; height:26px !important; flex-shrink:0; }
  .how-facts > div > div > div:first-child{ font-size:12px !important; letter-spacing:0.8px !important; }
  .how-facts > div > div > div:last-child{ font-size:16px !important; line-height:1.2 !important; }
}


/* --- отзывы: подзаголовок без полоски, кнопка «Все отзывы» снизу слева --- */
.rev-all-mob{ display:none; }
@media (max-width: 760px){
  /* убираем вертикальную полоску, текст делаем подзаголовком */
  .rev-sub{ border-left:0 !important; padding-left:0 !important; }
  .rev-sub h3{
    font-family:'Manrope',sans-serif !important; font-weight:500 !important;
    font-size:17px !important; line-height:1.5 !important;
    text-transform:none !important; color:#c7ccbe !important;
  }
  .rev-sub h3 br{ display:none; }
  .rev-head{ gap:14px !important; margin-bottom:26px !important; }

  /* кнопку из шапки прячем, показываем внизу слева */
  .rev-all{ display:none !important; }
  .rev-ctrls{ justify-content:space-between !important; margin-top:20px !important; }
  .rev-all-mob{
    display:inline-flex !important; align-items:center; gap:9px;
    padding:11px 16px; border:1px solid rgba(154,214,0,0.5); border-radius:12px;
    font-family:'Oswald',sans-serif; font-weight:600; font-size:13px; letter-spacing:0.5px;
    text-transform:uppercase; color:#9AD600; background:rgba(154,214,0,0.04);
    white-space:nowrap;
  }
}


/* ============================================================
   ГЛОБАЛЬНО: декоративные кляксы всегда ПОД контентом
   (иначе перекрывают заголовки и текст — было в корпоративах и FAQ)
   ============================================================ */
section img[aria-hidden="true"][src*="paint-"]{
  z-index:0 !important;
  pointer-events:none !important;
}
/* контент секции поднимаем над декором */
section > div:not([style*="position:absolute"]){
  position:relative;
  z-index:2;
}
@media (max-width: 760px){
  /* на мобиле кляксы ещё и приглушаем — текста мало, фон не должен спорить */
  section img[aria-hidden="true"][src*="paint-"]{ opacity:0.4 !important; }
}


/* ============================================================
   Кнопки с кляксой: ТЕЛО кнопки встаёт ровно в колонку текста.
   Тело внутри картинки:
     btn-game*      : 9.66%..97.65%  (ширина тела 88.0%)  -> картинка 113.6%, сдвиг -11%
     btn-video-long2: 0.48%..90.69%  (ширина тела 90.2%)  -> картинка 110.9%, сдвиг -0.53%
   Тогда края тела совпадают с заголовком и текстом.
   ============================================================ */
@media (max-width: 760px){
  .v5-imgbtn:has(img[src*="btn-game"]){
    width:113.6% !important; left:-11% !important;
  }
  .v5-imgbtn:has(img[src*="btn-game"]) > span{ left:16% !important; right:9% !important; }

  .v5-imgbtn:has(img[src*="btn-video"]){
    width:110.9% !important; left:-0.53% !important;
  }
  .v5-imgbtn:has(img[src*="btn-video"]) > span{ left:8% !important; right:16% !important; }

  header .v5-imgbtn{ width:auto !important; left:0 !important; }
}


/* ============================================================
   ИТОГ по кнопкам с кляксой (мобилка).
   Сдвиг задаём в процентах ОТ САМОЙ КНОПКИ (transform), иначе
   проценты считаются от разных родителей и края разъезжаются.
   Тело внутри картинки: btn-game 9.66%..97.65%, btn-video 0.48%..90.69%
   ============================================================ */
@media (max-width: 760px){
  .v5-imgbtn:has(img[src*="btn-game"]),
  .v5-imgbtn:has(img[src*="btn-video"]){ left:0 !important; margin-left:0 !important; }

  .v5-imgbtn:has(img[src*="btn-game"]){
    width:113.65% !important;
    transform:translateX(-9.66%) !important;
  }
  .v5-imgbtn:has(img[src*="btn-game"]):hover{ transform:translateX(-9.66%) !important; }
  .v5-imgbtn:has(img[src*="btn-game"]):active{ transform:translateX(-9.66%) scale(.98) !important; }

  .v5-imgbtn:has(img[src*="btn-video"]){
    width:110.85% !important;
    transform:translateX(-0.48%) !important;
  }
  .v5-imgbtn:has(img[src*="btn-video"]):hover{ transform:translateX(-0.48%) !important; }
  .v5-imgbtn:has(img[src*="btn-video"]):active{ transform:translateX(-0.48%) scale(.98) !important; }

  header .v5-imgbtn{ width:auto !important; transform:none !important; }
}


/* кнопка не должна сжиматься во flex-контейнере — иначе тело уже колонки текста */
@media (max-width: 760px){
  .v5-imgbtn:has(img[src*="btn-game"]),
  .v5-imgbtn:has(img[src*="btn-video"]){ flex:0 0 auto !important; flex-shrink:0 !important; }
  /* контейнеры-обёртки кнопок разворачиваем на всю ширину */
  section div[style*="display:flex"][style*="justify-content:center"]:has(> .v5-imgbtn){
    display:block !important;
  }
}


/* ============================================================
   ЕДИНЫЕ РАЗМЕРЫ НА МОБИЛЬНОЙ ВЕРСИИ
   ============================================================ */
@media (max-width: 760px){
  /* 1. подзаголовки секций — один размер (было 16/18/19/20) */
  .sec-sub, .m-hero-p{
    font-size:17px !important; line-height:1.5 !important;
  }

  /* 2. кнопка «Связаться» — как все остальные, без выравнивания по правому краю */
  #contacts .c-head > a.v5-imgbtn{
    justify-self:start !important; align-self:stretch !important;
    margin:0 !important; float:none !important;
  }

  /* 3. отзывы: кнопка Авито и стрелки одного размера */
  .rev-ctrls .rev-arrow{
    width:48px !important; height:48px !important;
    border-radius:12px !important; flex-shrink:0;
  }
  .rev-all-mob{
    height:48px !important; box-sizing:border-box !important;
    border-radius:12px !important; padding:0 16px !important;
  }
}


/* --- модалка сценария: текст абзацами --- */
.scenm-text p{ margin:0 0 12px; }
.scenm-text p:last-child{ margin-bottom:0; }
.scenm-inner{ padding-bottom:6px; }
@media (max-width:760px){
  .scenm-inner img{ max-height:40vh !important; }
  .scenm-text p{ margin-bottom:10px; }
}


/* --- модалка сценария: длинные тексты помещаются целиком --- */
.scenm{ align-items:flex-start !important; }
.scenm-inner{
  max-height:92vh !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  margin:4vh auto !important;
}
.scenm-inner img{ max-height:46vh !important; object-fit:cover !important; }
.scenm-inner::-webkit-scrollbar{ width:6px; }
.scenm-inner::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:3px; }
@media (max-width:760px){
  .scenm-inner{ max-height:88vh !important; margin:6vh auto !important; }
  .scenm-inner img{ max-height:32vh !important; }
}


/* --- модалка сценария: окно по ширине фото, текст строго под картинкой --- */
.scenm-inner{
  width:fit-content !important;
  max-width:min(1100px, 92vw) !important;
  min-width:min(620px, 92vw) !important;
  margin-left:auto !important; margin-right:auto !important;
}
.scenm-inner img{
  display:block !important;
  width:auto !important; max-width:100% !important;
  max-height:56vh !important;
  margin:0 !important;
}
.scenm-title, .scenm-text{
  width:100% !important; max-width:100% !important;
}
@media (max-width:760px){
  .scenm-inner{ min-width:0 !important; max-width:92vw !important; }
  .scenm-inner img{ width:100% !important; max-height:34vh !important; object-fit:cover !important; }
}


/* --- модалка сценария: ширина окна под целый кадр --- */
.scenm-inner{ max-width:min(800px, 92vw) !important; min-width:0 !important; }
.scenm-inner img{ max-height:62vh !important; }


/* --- корпорат, мобилка: отступ перед кнопкой как в остальных секциях (42px) --- */
@media (max-width:760px){
  #corporate .corp-cards{ margin-bottom:0 !important; }
  #corporate .m-hero-cta{ margin-top:0 !important; }
}


/* --- мобилка: надписи в кнопках соразмерны телу кнопки --- */
@media (max-width:760px){
  a.v5-imgbtn:has(img[src*="btn-"]) > span,
  .hero-btns > a.v5-imgbtn:has(img[src*="btn-"]) > span,
  .v5-imgbtn > span{
    font-size:clamp(16px, 5vw, 20px) !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
  }
}


/* ============================================================
   ШАПКА: липкая на широких экранах + указатель текущей страницы
   ============================================================ */

/* --- широкие экраны: шапка едет за скроллом, как на мобиле --- */
@media (min-width:1361px){
  header{
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
    z-index:100 !important;
    background:transparent !important;
    transition:background .25s ease, box-shadow .25s ease;
  }
  header.v5-scrolled{
    background:rgba(11,13,9,0.94) !important;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    box-shadow:0 2px 14px rgba(0,0,0,0.35);
  }
  /* при скролле шапка поджимается, чтобы не съедать экран */
  header img[src*="logo-final"],
  header a[aria-label="Забронировать"] img{ transition:height .25s ease; }
  header.v5-scrolled img[src*="logo-final"]{ height:62px !important; }
  header.v5-scrolled a[aria-label="Забронировать"] img{ height:60px !important; }
}

/* --- указатель текущей страницы (только мобилка/планшет) --- */
.hdr-page{ display:none; }
@media (max-width:1360px){
  .hdr-page{
    display:block;
    font-family:'Oswald',sans-serif; font-weight:600;
    font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
    color:#9AD600; white-space:nowrap;
    text-shadow:0 1px 6px rgba(0,0,0,0.6);
    flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  }
  body.v5-menu-open .hdr-page{ display:none !important; }
}

/* --- активный пункт в раскрытом меню --- */
header nav[data-v5-nav-links] a.nav-active{
  color:#9AD600 !important; font-weight:700 !important;
}


/* ============================================================
   КЛЯКСЫ — всегда вшиты в фон, под текстом
   Позиционированный элемент рисуется выше текста даже при z-index:0,
   поэтому уводим кляксы на -1. isolation:isolate у секции не даёт им
   провалиться за её собственный фон.
   ============================================================ */
section, .v5-section, footer{ isolation:isolate; }
img[src*="paint-green"], img[src*="paint-pink"],
img[src*="splatter-left"], img[src*="splatter-right"], img[src*="splatter-magenta"]{
  z-index:-1 !important;
  pointer-events:none !important;
}


/* ============================================================
   КЛЯКСЫ под текстом v2, под текстом
   Позиционированный элемент рисуется выше текста даже при z-index:0,
   поэтому уводим кляксы на -1. isolation:isolate у секции не даёт им
   провалиться за её собственный фон.
   ============================================================ */
section, .v5-section, footer{ isolation:isolate; }
section img[aria-hidden][src*="paint-green"],
section img[aria-hidden][src*="paint-pink"],
section img[aria-hidden][src*="splatter-"],
body section img[src*="paint-green"],
body section img[src*="paint-pink"],
body section img[src*="splatter-"],
body img[src*="paint-green"],
body img[src*="paint-pink"],
body img[src*="splatter-"]{
  z-index:-1 !important;
  pointer-events:none !important;
}


/* --- день рождения, мобилка: плашки симметрично 2 в строку --- */
@media (max-width:760px){
  .bday-chips{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    align-items:stretch !important;
  }
  /* распорка-перенос строки во flex-раскладке в сетке не нужна */
  .bday-chips > div[style*="flex-basis:100%"]{ display:none !important; }
  .bday-chips > div{
    width:auto !important; flex:none !important;
    justify-content:center !important;
    padding:13px 10px !important;
    gap:9px !important;
  }
  .bday-chips > div > span{ font-size:14px !important; letter-spacing:0.6px !important; }
  .bday-chips > div > svg{ flex-shrink:0; }
  /* последняя — на всю ширину, чтобы ряд не был рваным */
  .bday-chips > div:last-child{ grid-column:1 / -1 !important; }
}


/* --- указатель страницы: сразу после логотипа --- */
@media (max-width:1360px){
  .hdr-page{ order:2 !important; margin-left:auto !important; margin-right:auto !important; }
  header button.v5-burger{ order:5 !important; }
}


/* --- счётчик «+N фото» в мозаике уюта: своё число для каждой раскладки --- */
.cnt-desk{ font:inherit; }
.cnt-mob{ display:none; font:inherit; }
@media (max-width:760px){
  .cnt-desk{ display:none; }
  .cnt-mob{ display:inline; }
}


/* --- шапка на широких: без прыжка высоты при скролле --- */
@media (min-width:1361px){
  header.v5-scrolled img[src*="logo-final"]{ height:100px !important; }
  header.v5-scrolled a[aria-label="Забронировать"] img{ height:84px !important; }
}


/* --- подстраницы на широких: контент не заезжает под закреплённую шапку ---
   шапка 112px + воздух 48px. Фон секции прозрачный, поэтому шва не будет. */
@media (min-width:1361px){
  body:not(.home) > section:nth-of-type(1){ padding-top:160px !important; }
}


/* --- калькулятор: плашка "уют" по всей ширине смотрелась пусто справа — центрируем содержимое --- */
.calc-perks > div{
  justify-content:center !important;
  padding-top:24px !important; padding-bottom:24px !important;
}
.calc-perks > div > div > span{ font-size:18px !important; }


/* --- главный экран: кнопки в розовом акценте (мобильные плоские версии) --- */
.hero-cta-mob{ background:#9AD600 !important; }
.hero-cta-mob-sec{ background:rgba(13,15,11,0.9) !important; border-color:rgba(230,0,126,0.55) !important; }
a.v5-book-mob{ background:#E6007E !important; }


/* --- слайдер галереи (и другие полноэкранные окна): не даём общим правилам секций сломать fixed --- */
.glb, .pglb, .scenm{ position:fixed !important; inset:0 !important; top:0 !important; left:0 !important; }


/* --- кнопка "Забронировать" внутри раскрытого мобильного меню: ровно и компактнее --- */
@media (max-width:1360px){
  nav[data-v5-nav-links].open ~ div[style*="justify-content:flex-end"] a.v5-imgbtn[aria-label="Забронировать"]{
    display:none !important;
  }
}


/* --- бургер тянул margin-left:auto на себя, из-за чего указатель страницы съезжал влево --- */
@media (max-width:1360px){
  header button.v5-burger{ margin-left:0 !important; }
}


/* --- бургер остаётся в первой строке при открытии меню: order меньше, чем у раскрывающихся блоков --- */
@media (max-width:1360px){
  header button.v5-burger{ order:3 !important; }
}


/* --- крупные "выглядывающие" кляксы: выходят из-под общего приглушения мелких декоративных клякс
   (селектор специально утяжелён, чтобы точно перебить body img[src*="paint-..."]{opacity:.4; z-index:-1}) --- */
body section img.v5-splat-big[aria-hidden="true"]{
  opacity:0.9 !important;
  z-index:1 !important;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.35));
}


/* ===== Одиночные фото в секциях: тот же 3D-наклон при наведении, что у сертификата ===== */
.m-hero-photo, .m-sec-photo, .single-tilt {
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease;
  will-change: transform;
}
.m-hero-photo:hover, .m-sec-photo:hover, .single-tilt:hover {
  transform: perspective(1100px) rotateY(-11deg) rotateX(4deg) scale(1.045);
  box-shadow: 0 34px 74px rgba(0,0,0,.55), 0 0 34px rgba(154,214,0,.28);
}
@media (prefers-reduced-motion: reduce){
  .m-hero-photo, .m-sec-photo, .single-tilt{ transition:none; }
  .m-hero-photo:hover, .m-sec-photo:hover, .single-tilt:hover{ transform:none; }
}


/* --- зеркальный наклон для фото, стоящих СЛЕВА от текста --- */
.tilt-left:hover {
  transform: perspective(1100px) rotateY(11deg) rotateX(4deg) scale(1.045) !important;
}


/* --- надёжная блокировка скролла фона под модалками (фикс для мобильных браузеров) --- */
html.v5-scroll-locked, body.v5-scroll-locked{
  overflow:hidden !important;
}
body.v5-scroll-locked{
  position:fixed !important;
  left:0 !important; right:0 !important;
  width:100% !important;
}