/* ═══ Секции лендинга gastroCarrier: арены, V-KDS, шаги, ангар, EU, CTA, футер ═══ */

/* ─── Арены-палубы ──────────────────────────────────────────── */

/* Баннер секции: картинка во всю ширину экрана (секция не имеет
   горизонтальных паддингов, а блок стоит вне .container), описание
   блока — поверх в левом углу с подложкой для читаемости. */
.decks-hero {
  position: relative;
  overflow: hidden;
}

.decks-hero-img {
  display: block;
  width: 100%;
  height: auto;
}

.decks-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  width: min(66.666%, 1200px);
  padding: 40px 44px;
  /* Левый градиент-подложка: текст читается на любой картинке. */
  background: linear-gradient(
    90deg,
    rgba(5, 13, 37, 0.88) 0%,
    rgba(5, 13, 37, 0.72) 60%,
    rgba(5, 13, 37, 0) 100%
  );
}

/* На узких экранах подложка закрывает всю высоту баннера текстом —
   уменьшаем паддинги и ширину. */
@media (max-width: 720px) {
  .decks-hero-overlay {
    width: 100%;
    padding: 24px 20px;
    background: rgba(5, 13, 37, 0.82);
  }
}

.arena-grid {
  /* Карточки наползают на нижнюю часть баннера с экранами выдачи. */
  margin-top: -45px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.arena-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(5, 13, 37, 0.45);
  transition: transform 0.25s;
}

.arena-card:hover { transform: translateY(-5px); }

/* Абзацы описания арены: первые два нейтральные (суть + механика),
   последний — фирменный бирюзовый циан #00eefc («что это даёт»). */
.ap {
  display: block;
  margin-bottom: 8px;
}
.ap:last-child { margin-bottom: 0; }
.ap-cyan { color: var(--cyan); }

.arena-art {
  position: relative;
  height: 170px;
  cursor: zoom-in; /* клик по сцене открывает лайтбокс */
}
.arena-art svg,
.arena-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* скриншот кадрируется под высоту карточки без искажений */
  transition: transform 0.25s ease;
}
.arena-art:hover svg,
.arena-art:hover img { transform: scale(1.04); }

.arena-art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg-surface) 4%, transparent 55%);
}

.arena-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
}

/* ─── Лайтбокс палуб: увеличенный просмотр сцены арены ─────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 13, 37, 0.88);
  backdrop-filter: blur(10px);
}

.lightbox[hidden] { display: none; }

.lightbox-body {
  /* Окно подстраивается под изображение, а не растягивает его:
     картинка ограничена 90vw/78vh и не увеличивается сверх натурального
     размера (width/height auto + max-ограничения). */
  width: fit-content;
  min-width: min(320px, 88vw);
  max-width: min(1100px, 94vw);
  background: var(--bg-surface);
  border: 1px solid rgba(0, 238, 252, 0.25);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(5, 13, 37, 0.8);
  animation: lightbox-in 0.22s ease;
}

@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* Сцена-клон: натуральный размер изображения, уменьшенный при
   необходимости под окно; никогда не растягивается сильнее оригинала. */
.lightbox-stage svg,
.lightbox-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1040px, 90vw);
  max-height: 76vh;
}

/* SVG-сцены без собственной ширины: задаём разумный базовый размер. */
.lightbox-stage svg { width: min(760px, 90vw); }

.lightbox-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-family: var(--font-display);
}

/* Зона палубы в подписи: переключается вместе с переворотом экрана. */
.lightbox-cap-zone {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
}

.lightbox-cap-zone .zone-back { display: none; }
.lightbox-cap-zone.show-back .zone-front { display: none; }
.lightbox-cap-zone.show-back .zone-back { display: inline; }

/* Переворот экрана палубы вокруг вертикальной оси: клик по сцене
   вращает её до 90° (ребром), JS в этот момент подменяет картинку
   зоны «Готовы» ↔ «Готовятся», и экран доворачивается обратно.
   В DOM всегда ОДНА картинка — окно каждый раз подстраивается под
   актуальный скрин, пустот и обрезки у зон разной ширины нет. */
.lightbox-stage {
  perspective: 1400px;
  cursor: ew-resize;
  /* Узкий скрин второй зоны центрируется, а не прижимается к левому краю. */
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox-stage img.lb-screen {
  transition: transform 0.36s ease-in-out;
  will-change: transform;
}

.lightbox-stage.flipping img.lb-screen { transform: rotateY(90deg); }

@media (max-width: 640px) {
  .lightbox { padding: 12px; }
}

.badge-cyan-f { background: var(--cyan); color: #002022; }
.badge-amber-f { background: var(--amber); color: #2a1800; }

.arena-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  flex: 1;
}

.arena-num {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Название арены и абзацы описания — карточные токены .card-title /
   .card-text (base.css), вешаются классами в разметке. */

.arena-tag {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  background: var(--bg-high);
  padding: 5px 10px;
  border-radius: var(--radius);
  align-self: flex-start;
}

.arena-body .btn { margin-top: auto; }

/* ─── Режим «Весёлые заказы»: рандомные имена героев ────────── */

.fun-note {
  margin-top: 28px;
  background: var(--bg-surface);
  border: 1px dashed rgba(0, 238, 252, 0.35);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fun-badge {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--bg-high);
  padding: 5px 10px;
  border-radius: var(--radius);
}

/* Заголовок и текст fun-note — карточные токены .card-title / .card-text
   (base.css), вешаются классами в разметке. */

.fun-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}

.fun-chips .chip { box-shadow: none; border: 1px solid rgba(219, 225, 255, 0.1); }

/* Живая волна по чипам весёлых заказов: чипы по очереди чуть
   увеличиваются и возвращаются — очень медленная дышащая пульсация
   (цикл 30 с, шаг 3 с на чип), чтобы текст чипа успевали прочитать.
   Каждый чип дышит 6 с (рост 3 с + спад 3 с), соседи мягко
   перекрываются волнами. Только transform — дёшево для композитора.
   Задержки разводят чипы по фазе; nth-child — потому что чипы лежат
   в .fun-chips напрямую, разметку трогать не нужно. */
.fun-chips .chip { animation: chip-wave 30s ease-in-out infinite; }

.fun-chips .chip:nth-child(1)  { animation-delay: 0s; }
.fun-chips .chip:nth-child(2)  { animation-delay: 3s; }
.fun-chips .chip:nth-child(3)  { animation-delay: 6s; }
.fun-chips .chip:nth-child(4)  { animation-delay: 9s; }
.fun-chips .chip:nth-child(5)  { animation-delay: 12s; }
.fun-chips .chip:nth-child(6)  { animation-delay: 15s; }
.fun-chips .chip:nth-child(7)  { animation-delay: 18s; }
.fun-chips .chip:nth-child(8)  { animation-delay: 21s; }
.fun-chips .chip:nth-child(9)  { animation-delay: 24s; }
.fun-chips .chip:nth-child(10) { animation-delay: 27s; }

@keyframes chip-wave {
  0%, 20%, 100% { transform: scale(1); }
  10%           { transform: scale(1.12); }
}

/* CTA-строка заказа индивидуальной палубы. */
.fun-cta {
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid rgba(219, 225, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.fun-cta p { max-width: 560px; margin: 0; }

/* ─── Голосовой ICAO-канбан ─────────────────────────────────── */

/* Обе команды микрофона — одной строкой (рядом, с зазором).
   Оба акцентные циановые: NEXT — следующее блюдо, не менее важно. */
.voice-mic-quotes { display: flex; align-items: baseline; gap: 10px; }

/* Ряд основных голосовых команд: моноширинные чипы-клавиши.
   Команды всегда английские (ICAO-стандарт), переводится только подпись. */
.voice-cmds {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.voice-cmds-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.voice-cmd {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cyan);
  background: rgba(0, 238, 252, 0.07);
  border: 1px solid rgba(0, 238, 252, 0.3);
  border-radius: 6px;
  padding: 4px 10px;
}


.voice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}

.voice-copy { display: flex; flex-direction: column; gap: 14px; }

/* Блок «Почему именно коды ICAO?»: подзаголовок + текст в левой
   колонке секции голосового канбана. Заголовок — карточный .card-title,
   текст — .card-text (base.css), вешаются классами в разметке. */
.voice-why h3 {
  color: var(--orange);
  margin-bottom: 6px;
}

/* Ряд «Как это меняет работу кухни»: заголовок + 4 карточки (2×2). */
.voice-how { margin-top: 48px; }

.voice-how-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.voice-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.voice-benefit {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bg-surface);
  border: 1px solid rgba(0, 238, 252, 0.08);
  padding: 18px 20px;
  border-radius: var(--radius-lg);
}

.voice-benefit > :first-child { font-size: 1.5rem; line-height: 1.3; }
/* Карточка-индикатор загрузки кухни: вне сетки голосовых преимуществ,
   на всю ширину сетки (= длина двух нижних карточек). */
.voice-benefit-wide { display: flex; }
.voice-benefit strong { display: block; font-size: 0.95rem; margin-bottom: 6px; }
/* Описания выгод — карточный .card-text (base.css), класс в разметке. */

.voice-feats {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.voice-feat {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg-surface);
  padding: 12px 14px;
  border-radius: var(--radius);
}

.voice-feat span:first-child { font-size: 1.3rem; }
.voice-feat strong { display: block; font-size: 0.86rem; }
.voice-feat strong + span { font-size: 0.78rem; color: var(--text-dim); }

.voice-demo {
  background: var(--bg-high);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: 0 24px 60px rgba(5, 13, 37, 0.55);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.voice-mic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-lowest);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.voice-mic > div:not(.mic-orb):not(.waveform) { display: flex; flex-direction: column; gap: 2px; }
.voice-mic strong { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
/* Цитаты команд — одной строкой, капсом, крупно. */
.voice-mic .text-cyan {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mic-orb {
  position: relative;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
}

.mic-orb i {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--orange);
  animation: ping 1.6s ease-out infinite;
  color: var(--orange);
}

.waveform { display: flex; align-items: flex-end; gap: 3px; height: 24px; }

.waveform i {
  width: 3px;
  background: var(--cyan);
  border-radius: 2px;
  animation: wave 1s ease-in-out infinite;
}

.waveform i:nth-child(1) { height: 8px; }
.waveform i:nth-child(2) { height: 20px; animation-delay: 0.1s; }
.waveform i:nth-child(3) { height: 12px; animation-delay: 0.2s; }
.waveform i:nth-child(4) { height: 24px; animation-delay: 0.15s; }
.waveform i:nth-child(5) { height: 16px; animation-delay: 0.25s; }

@keyframes wave {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1.2); }
}

.kanban-demo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.kcol { display: flex; flex-direction: column; gap: 8px; }

.kcol-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-surface);
  border-radius: 4px;
  padding: 6px 10px;
  white-space: nowrap; /* категории с кодами — одной строкой */
}

.kcol-ready { background: rgba(0, 238, 252, 0.14); color: var(--cyan); }

.kcard {
  background: var(--bg-surface);
  border-radius: 6px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.8rem;
}

.kcard.kdim { opacity: 0.65; }

/* Карточка в фокусе (центральная): чуть крупнее соседних, с циановым
   свечением — «активный заказ» очереди. */
.kcard.kcard-focus {
  transform: scale(1.14);
  transform-origin: center;
  z-index: 1;
  border: 1px solid rgba(255, 107, 53, 0.55);
  box-shadow: 0 10px 28px rgba(255, 107, 53, 0.28);
  padding: 13px 12px;
  font-size: 0.9rem;
}

.kcard-top {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

.kcard-top span:last-child { color: var(--text-dim); }

.kcard small { font-size: 0.64rem; color: var(--text-dim); }

.kcard-takeoff {
  background: var(--cyan);
  color: #002022;
}

.kcard-takeoff .kcard-top span:last-child { color: rgba(0, 32, 34, 0.7); }
.kcard-takeoff small { color: rgba(0, 32, 34, 0.75); }

.voice-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ─── QR-геймификация: шаги ─────────────────────────────────── */

.steps {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.step {
  perspective: 1000px;
}

/* Вращающийся контейнер: обе стороны карточки живут в нём.
   min-height задаёт запас по вертикали, чтобы длинные тексты
   оборотной стороны не обрезались. */
.step-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 310px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Флип: наведение мышью на десктопе + клик (is-flipped) на тач-экранах.
   Селектор :has(.step-back) — карточки без обратной стороны не вращаются. */
.step:has(.step-back):hover .step-inner,
.step.is-flipped .step-inner {
  transform: rotateY(180deg);
}

/* Сторона карточки: фон и внутренние отступы живут здесь, а не на .step. */
.step-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-surface);
  box-shadow: 0 8px 24px rgba(5, 13, 37, 0.35);
  overflow: hidden;
}

/* Оборотная сторона: выгода для бизнеса — оранжевый акцент. */
.step-back {
  transform: rotateY(180deg);
  background: var(--bg-high);
  border: 1px solid rgba(255, 107, 53, 0.45);
}

/* Лицевая сторона в потоке: она задаёт высоту карточке (иначе .step
   схлопывается в ноль и соседние блоки наезжают на карточки), а в
   растянутой grid-строке добирает высоту до полной. */
.step-front {
  position: relative;
  height: 100%;
}

.step-back h3 { color: var(--orange); }

/* Маленькая надпись над заголовком стороны (лицевой и оборотной). */
.step-face-label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.step-hot .step-face {
  background: var(--bg-high);
  box-shadow: 0 12px 30px rgba(5, 13, 37, 0.5);
}

/* Заголовок карточки шага: кегль/вес — .card-title (base.css),
   здесь только раскладка «номер + текст» на одной линии. */
.step h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* Номер шага рядом с заголовком: дисплейный шрифт, фирменный циан. */
.step-num {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cyan);
}

/* Тексты обеих сторон карточек шагов — карточный .card-text (base.css),
   класс в разметке. */

/* Шапка QR-геймификации: текст слева, скрин игры справа. */
.game-head {
  display: flex;
  align-items: center;
  gap: 36px;
}

.game-head .section-head { flex: 1 1 0; min-width: 0; }

/* Прозрачный PNG без подложки: тень вместо рамки, вписан в колонку. */
.game-head-img {
  flex: 0 0 auto;
  width: clamp(280px, 32%, 480px);
  filter: drop-shadow(0 18px 44px rgba(5, 13, 37, 0.65));
}

@media (max-width: 1024px) {
  .game-head { flex-direction: column; align-items: flex-start; }
  .game-head-img { width: 100%; max-width: 560px; }
}

.game-module {
  margin-top: 24px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Строка двух колонок: «Рост среднего чека» ↔ «Победа над конкурентами». */
.game-module-row {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}

.game-module-row > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* Тексты модуля геймификации — карточный .card-text (base.css), класс в разметке. */

/* Правая колонка модуля: аргумент для бизнеса, в одну строку с левым блоком. */
.game-win {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Заголовок правой колонки модуля — карточный .card-title с ролью «выгода». */
.game-win h3 { color: var(--orange); }

/* Текст правой колонки — карточный .card-text (base.css), класс в разметке. */

/* ─── VIP-депозиты: клуб лояльности и персональные QR-коды ──── */

/* Четыре карточки фич: 2×2. */
.vip-features {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.vip-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(0, 238, 252, 0.12);
}

.vip-ico { font-size: 1.4rem; }
/* Тексты VIP-карточек и выгод — карточный .card-text (base.css),
   класс в разметке. */

/* Три бизнес-выгоды: акцент оранжевым, как «выгода для бизнеса» в карточках шагов. */
.vip-benefits {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.vip-benefit {
  background: var(--bg-high);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 2px solid var(--orange);
}

.vip-benefit h3 { color: var(--orange); }

@media (max-width: 1024px) {
  .vip-features, .vip-benefits { grid-template-columns: 1fr; }
}

/* ─── Ангар оборудования ────────────────────────────────────── */

/* Широкий баннер ангара: скрин носителя во всю ширину экрана (вне .container). */
.hangar-hero {
  position: relative;
  margin-bottom: 44px;
}

.hangar-banner {
  display: block;
  width: 100%;
  box-shadow: 0 24px 60px rgba(5, 13, 37, 0.6);
}

/* Подпись поверх баннера: от центра экрана вправо, текст по правому краю. */
.hangar-hero-copy {
  position: absolute;
  top: 24px;
  left: 50%;
  right: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: right;
  align-items: flex-end;
  text-shadow: 0 2px 12px rgba(5, 13, 37, 0.9);
}

.hangar-hero-copy .section-title {
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
}

@media (max-width: 768px) {
  /* На узких экранах баннер низкий — подпись уходит из картинки в поток.
     .hangar-hero становится flex-колонкой, а подпись (в разметке стоит
     ПОСЛЕ картинки) поднимается над баннером через order: -1 — иначе
     заголовок оказывался бы под кораблём. */
  .hangar-hero { display: flex; flex-direction: column; }

  .hangar-hero-copy {
    order: -1;
    position: static;
    margin-bottom: 12px;
    text-align: left;
    align-items: flex-start;
    text-shadow: none;
    /* Внутренние поля контейнера: заголовок не прижимается впритык
       к краю экрана (баннер вне .container, в потоке некому дать гатэ). */
    padding-inline: 16px;
  }
}

/* Три горизонтальных блока ангара: кухонные принтеры, импорт меню
   из CRM и экспорт данных (на узких экранах — колонка, см. media). */
.hangar-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.hangar-block {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border-left: 2px solid var(--cyan);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Оранжевая роль (деньги/данные) — задаётся классом в разметке
   (импорт меню из CRM), а не позицией последнего блока. */
.hangar-block--orange { border-left-color: var(--orange); }

/* Заголовки блоков ангара — карточный .card-title; цвет — роль:
   циан = техника, оранжевый = деньги/данные. Тексты блоков и список
   форматов — карточный .card-text (base.css), класс в разметке. */
.hangar-block h3 { color: var(--cyan); }
.hangar-block--orange h3 { color: var(--orange); }

/* Строки «для гостей / для поваров» — с тонкой боковой чертой. */
.hangar-note {
  margin-top: 2px;
  padding-left: 12px;
  border-left: 2px solid rgba(0, 238, 252, 0.35);
}

.hangar-note strong {
  font-family: var(--font-display);
  color: var(--text);
}

/* Список форматов экспорта: жирное имя формата + описание.
   Кегль/цвет пунктов — карточный .card-text на li (base.css). */
.hangar-formats {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hangar-formats strong { font-family: var(--font-display); color: var(--text); }

/* ─── Тарифный план: один тариф, всё включено ───────────────── */

.pricing-card {
  max-width: 760px;
  margin: 40px auto 0;
  background: var(--bg-surface);
  border: 1px solid rgba(0, 238, 252, 0.25);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-shadow: 0 24px 60px rgba(5, 13, 37, 0.55);
}

/* Цена: крупная цифра + подпись периода справа от неё. */
.pricing-price {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.pricing-value {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: -0.02em;
}

.pricing-period {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Вторая строка подписи цены: «оплата в местной валюте…» — меньший
   кегль, чтобы уводить её на второй план под основной строкой периода. */
.pricing-period-note {
  font-size: 0.75rem;
  opacity: 0.75;
}

/* Знак евро прижат к цифрам узким отступом (0.06em) — без полноценного
   пробела, чтобы «33 €» не читалось как «333», и без риска переноса строки. */
.pricing-cur {
  margin-left: 0.06em;
}

/* Подзаголовок «тактико-технические характеристики». */
.pricing-specs-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}

/* Пять пунктов характеристик: сетка 2 колонки (последний растянут не — просто по потоку). */
.pricing-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 28px;
}

.pricing-feats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

/* Описания характеристик тарифа — карточный .card-text (base.css),
   класс в разметке. */

/* «Дополнительное вооружение»: аддоны на оранжевом акценте. */
.pricing-addons {
  border-top: 1px solid rgba(255, 107, 53, 0.25);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* «Дополнительное вооружение»: честный заголовок блока аддонов —
   карточный .card-title (base.css) с цветовой ролью «деньги/доплаты». */
.pricing-addons h3 { color: var(--orange); }

/* Тексты аддонов и мелкий шрифт (триал/сноска) — карточный .card-text
   (base.css), класс в разметке. */

.pricing-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

@media (max-width: 768px) {
  .pricing-card { padding: 26px 20px; }
  .pricing-feats { grid-template-columns: 1fr; }
}

/* ─── Чипы (весёлые имена) ──────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(5, 13, 37, 0.4);
}

/* ─── CTA-баннер ────────────────────────────────────────────── */

.cta-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--bg-surface), var(--bg-high), var(--bg-surface));
  border-radius: var(--radius-lg);
  padding: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  box-shadow: 0 24px 60px rgba(5, 13, 37, 0.6);
}

.cta-crosshair {
  position: absolute;
  right: -40px; bottom: -40px;
  width: 260px; height: 260px;
  border: 1px solid rgba(0, 238, 252, 0.2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.cta-crosshair i {
  width: 128px; height: 128px;
  border: 1px solid rgba(255, 107, 53, 0.2);
  border-radius: 50%;
}

.cta-copy { display: flex; flex-direction: column; gap: 8px; max-width: 620px; }
.cta-copy h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); text-transform: uppercase; letter-spacing: -0.02em; }
.cta-copy p { color: var(--text-dim); font-size: 1rem; }

.cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* Подводка к лид-форме: кегль/цвет — карточный .card-text (base.css),
   здесь только боковая оранжевая черта «выгоды». */
.cta-lead-intro {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid rgba(255, 107, 53, 0.5);
}

/* Лид-форма «Запросить позывные»: правая колонка баннера. */
.cta-form {
  display: flex;
  /* атрибут `hidden` обязан побеждать display:flex ниже ( задача 0046:
     без этого гварда форма не скрывалась после отправки и
     «плашка» не была видна — реакция на кнопку терялась). */
  &[hidden] { display: none !important; }
  flex-direction: column;
  gap: 10px;
  width: 340px;
  max-width: 100%;
  flex-shrink: 0;
}

.cta-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid rgba(0, 238, 252, 0.25);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cta-input::placeholder { color: var(--text-dim); opacity: 0.75; }

.cta-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 238, 252, 0.12);
}

.cta-form-btn { width: 100%; justify-content: center; margin-top: 4px; }

/* GDPR-согласие под полями формы: компактная строка управления с
   НЕ предотмеченным чекбоксом (Art. 6(1)a). Кнопка отправки блокируется
   `required` до проставления отметки. */
.cta-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-dim);
  cursor: pointer;
}

.cta-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  accent-color: var(--cyan);
  cursor: pointer;
}

.cta-consent-link {
  display: inline-block; /* ссылка после <br> всегда отдельной строкой
                            ниже текста согласия */
  margin-top: 2px;
  color: var(--cyan);
  text-decoration: none;
}
.cta-consent-link:hover { text-decoration: underline; }

/* Тултип кнопки формы — НАД кнопкой: под ней баннер с overflow: hidden
   обрезал бы подсказку, а сверху место свободно. */
.cta-form-btn[data-tip]::after {
  top: auto;
  bottom: calc(100% + 10px);
  transform: translateY(4px);
}

.cta-form-btn[data-tip]:hover::after {
  transform: translateY(0);
}

/* Плашка подтверждения заявки: заменяет форму после submit (см. main.js).
   Той же ширины, что и форма, чтобы баннер не «прыгал» при замене.
   Кегль/интерлиньяж — карточный .card-text (base.css). */
.cta-tg-link {
  display: block;
  width: 340px;
  max-width: 100%;
  margin-top: 10px;
  color: var(--cyan, #00eefc);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  opacity: 0.9;
}
.cta-tg-link:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 760px) { .cta-tg-link { width: 100%; } }

.cta-form-done {
  /* тот же гвард hidden (плашка скрыта до успешной отправки). */
  &[hidden] { display: none !important; }
  width: 340px;
  max-width: 100%;
  flex: 0 0 auto;
  padding: 20px 22px;
  border: 1px solid rgba(0, 238, 252, 0.4);
  border-radius: var(--radius);
  background: var(--bg);
}

/* ─── Футер ─────────────────────────────────────────────────── */

.site-footer {
  background: var(--bg-lowest);
  padding: 64px 0 28px;
  box-shadow: 0 -4px 24px rgba(5, 13, 37, 0.7);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 36px;
  padding-bottom: 36px;
}

.footer-grid > div { display: flex; flex-direction: column; gap: 10px; }

/* Абзацы футера — карточный .card-text (base.css), класс в разметке.
   Контактные строки .footer-ch живут по своим правилам ниже. */

/* Теглайн команды: кегль/интерлиньяж — .card-text, здесь — только
   выделение цветом текста и полужирным (лид-строка колонки штаба). */
.footer-team-lead { color: var(--text); font-weight: 600; }

/* Заголовки колонок футера — карточный .card-title (base.css): h3
   вместо h2 (колонки футера — подуровень, не ровень секций),
   кегль единый с карточными заголовками страницы. */

.footer-ch {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.footer-ch span {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
}

.footer-ch a { color: var(--cyan); font-size: 0.9rem; transition: color 0.2s; }
.footer-ch a:hover { color: var(--cyan-bright); }

.footer-bottom {
  border-top: 1px solid rgba(219, 225, 255, 0.08);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ─── Адаптив секций ────────────────────────────────────────── */

@media (max-width: 1024px) {
  .arena-grid { grid-template-columns: repeat(2, 1fr); }
  .voice-grid { grid-template-columns: 1fr; }
  .hangar-blocks { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .voice-benefits { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-form { width: 100%; }
}

@media (max-width: 640px) {
  .arena-grid, .steps { grid-template-columns: 1fr; }
  .voice-feats { grid-template-columns: 1fr; }
  .kanban-demo { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}