/* ─────────────────────────────────────────────────────────────────────────
 * Orbita — тёмная «входная» тема лендинга: главная и страницы продуктов.
 *
 * Значения взяты из брендбука Orbita (BRAND_CONTEXT.md / DESIGN-SYSTEM.md
 * продуктов), не подобраны на глаз:
 *   — один акцент #e06733 как ФОН; оранжевый текст — #b34f26 на светлом и
 *     #ff8f5e на тёмном (сам #e06733 как текст даёт контраст 2.6 и нечитаем);
 *   — тёмные поверхности на тоне 228° (настоящий navy), без индиго;
 *   — Manrope, веса 400/600/700; вес 500 не применяется;
 *   — радиусы 8/10/16/9999, шаг сетки 4…80;
 *   — одна тень, только под изображением, лежащим на поверхности;
 *   — разделитель между блоками — СМЕНА ПОВЕРХНОСТИ, не рамка и не тень;
 *   — градиентов в макетах нет (градиент допустим только внутри знака).
 *
 * Классы с префиксом v2- намеренно не пересекаются со styles.css: страницы
 * подключают оба файла, чтобы форма заявки и баннер cookie продолжали
 * работать на своих стилях и скриптах.
 * ───────────────────────────────────────────────────────────────────────── */

body.v2 {
  --ink: #121b41;
  --ink-raised: #1a2552;
  --ink-deep: #0c132e;

  --accent: #e06733;
  --accent-press: #c95a2e;
  --accent-text: #b34f26;
  --accent-on-dark: #ff8f5e;

  --canvas: #ffffff;
  --surface: #f8fafc;
  --surface-sunk: #f1f5f9;
  --hairline: #e2e8f0;

  --text: #34444f;
  --text-2: #64748b;
  --text-3: #8a94a6;
  --on-dark: #ffffff;
  --on-dark-2: #b6bcd4;
  --on-dark-3: #7c86ab;

  --hair-on-dark: rgba(255, 255, 255, 0.1);
  --tile-on-dark: rgba(255, 255, 255, 0.05);
  --shadow: 0 18px 48px rgba(12, 19, 46, 0.22);

  margin: 0;
  background: var(--ink-deep);
  color: var(--on-dark);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

body.v2 h1,
body.v2 h2,
body.v2 h3,
body.v2 h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
body.v2 p {
  margin: 0;
}
/* Выделение в заголовке — цветом, а не наклоном: курсива в бренде нет. */
body.v2 h1 em,
body.v2 h2 em {
  font-style: normal;
  color: var(--accent-on-dark);
}
body.v2 .v2-sec-light h2 em,
body.v2 .v2-sec-sunk h2 em {
  color: var(--accent-text);
}
body.v2 a {
  color: var(--accent-on-dark);
  text-decoration: none;
}
body.v2 a:hover {
  color: #ffa878;
}

.v2-wrap {
  max-width: 1200px;
  margin: 0 auto;
  /* Только горизонтальные отступы: класс v2-wrap висит и на .v2-hero-inner,
     и на .v2-facts-grid, и шорткат `padding` обнулял им вертикальные
     отступы — блоки слипались (герой упирался в шапку, панель — в факты). */
  padding-inline: 40px;
}

/* ── Шапка ─────────────────────────────────────────────────────────── */
.v2-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink-deep);
  border-bottom: 1px solid var(--hair-on-dark);
}
.v2-header.scrolled {
  background: var(--ink);
}
.v2-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}
.v2-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--on-dark);
  flex-shrink: 0;
}
.v2-logo:hover {
  color: var(--on-dark);
}
.v2-logo-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.v2-logo-text {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.v2-logo-text span {
  color: var(--on-dark-2);
  font-weight: 600;
}
.v2-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14.5px;
  font-weight: 600;
}
.v2-nav a {
  color: var(--on-dark-2);
  white-space: nowrap;
}
.v2-nav a:hover,
.v2-nav a.is-active {
  color: var(--on-dark);
}
.v2-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hair-on-dark);
  border-radius: 10px;
  background: transparent;
  color: var(--on-dark);
  cursor: pointer;
}

/* Специфичность: `body.v2 a` (0,1,2) перебивал одиночные классы (0,1,0),
   из-за чего у оранжевой кнопки текст становился оранжевым, а логотип и
   строки панели — акцентными. Поэтому цвет этих компонентов задаётся с
   префиксом body.v2. */
body.v2 .v2-btn-primary,
body.v2 .v2-btn-primary:hover {
  color: #ffffff;
}
body.v2 .v2-btn-ghost,
body.v2 .v2-btn-ghost:hover {
  color: var(--on-dark);
}
body.v2 .v2-btn-light,
body.v2 .v2-btn-light:hover {
  color: #ffffff;
}
body.v2 .v2-logo,
body.v2 .v2-logo:hover {
  color: var(--on-dark);
}
body.v2 .v2-panel-row,
body.v2 .v2-panel-row:hover {
  color: var(--on-dark);
}
body.v2 .v2-tile,
body.v2 .v2-tile:hover {
  color: var(--text);
}

/* ── Кнопки ────────────────────────────────────────────────────────── */
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 14px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.v2-btn-sm {
  font-size: 14px;
  padding: 10px 16px;
}
.v2-btn-primary {
  background: var(--accent);
  color: #fff;
}
.v2-btn-primary:hover {
  background: var(--accent-press);
  color: #fff;
}
.v2-btn-ghost {
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, 0.22);
}
.v2-btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--on-dark);
}
.v2-btn-light {
  background: var(--ink);
  color: #fff;
}
.v2-btn-light:hover {
  background: var(--ink-raised);
  color: #fff;
}

/* ── Секции и поверхности ──────────────────────────────────────────── */
.v2-sec {
  padding: 84px 0;
}
.v2-sec-deep {
  background: var(--ink-deep);
}
.v2-sec-ink {
  background: var(--ink);
}
.v2-sec-light {
  background: var(--canvas);
  color: var(--text);
}
.v2-sec-sunk {
  background: var(--surface-sunk);
  color: var(--text);
}
.v2-sec-light h2,
.v2-sec-light h3,
.v2-sec-light h4,
.v2-sec-sunk h2,
.v2-sec-sunk h3,
.v2-sec-sunk h4 {
  color: var(--ink);
}
.v2-sec-light a,
.v2-sec-sunk a {
  color: var(--accent-text);
}
.v2-sec-light a:hover,
.v2-sec-sunk a:hover {
  color: var(--accent-press);
}

.v2-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.v2-sec-light .v2-eyebrow,
.v2-sec-sunk .v2-eyebrow {
  color: var(--accent-text);
}
.v2-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 68ch;
  margin-bottom: 44px;
}
.v2-intro h2 {
  font-size: 40px;
}
.v2-intro p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--on-dark-2);
}
.v2-sec-light .v2-intro p,
.v2-sec-sunk .v2-intro p {
  color: var(--text-2);
}

.v2-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid var(--hair-on-dark);
  color: var(--on-dark-2);
}
.v2-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 9999px;
  border: 1px solid var(--hairline);
  color: var(--text-2);
  white-space: nowrap;
}
.v2-badge-ready {
  color: var(--accent-text);
  border-color: rgba(224, 103, 51, 0.4);
  background: rgba(224, 103, 51, 0.1);
}

/* ── Герой ─────────────────────────────────────────────────────────── */
.v2-hero {
  background: var(--ink-deep);
}
.v2-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  /* padding-block, не шорткат: элемент несёт и класс .v2-wrap, чей боковой
     отступ шорткат обнулил бы — на 390–767 px текст прилипал к краю экрана. */
  padding-block: 80px 72px;
}
.v2-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.v2-hero h1 {
  font-size: 52px;
  line-height: 1.07;
}
.v2-hero-lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--on-dark-2);
  max-width: 44ch;
}
.v2-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}
.v2-hero-note {
  font-size: 13.5px;
  color: var(--on-dark-3);
  max-width: 48ch;
}

/* Панель со списком (продукты / протоколы / этапы) */
.v2-panel {
  background: var(--ink-raised);
  border: 1px solid var(--hair-on-dark);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v2-panel-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 14px;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--tile-on-dark);
  color: var(--on-dark);
}
.v2-panel-row:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-dark);
}
.v2-panel-name {
  grid-column: 1;
  font-size: 16px;
  font-weight: 700;
}
.v2-panel-desc {
  grid-column: 1;
  font-size: 13px;
  color: var(--on-dark-2);
}
.v2-panel-state {
  grid-row: 1 / 3;
  grid-column: 2;
  font-size: 12px;
  font-weight: 700;
  color: var(--on-dark-2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  padding: 4px 11px;
  white-space: nowrap;
}
.v2-panel-state.is-ready {
  color: var(--accent-on-dark);
  border-color: rgba(224, 103, 51, 0.4);
  background: rgba(224, 103, 51, 0.12);
}

/* ── Полоса фактов ─────────────────────────────────────────────────── */
.v2-facts {
  border-top: 1px solid var(--hair-on-dark);
}
.v2-facts-grid {
  display: grid;
  /* На страницах разное число фактов: 4 у продуктов, 3 на главной. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-block: 34px;
}
/* Три факта — три колонки, иначе последняя упирается не в край сетки.
   Только на широких экранах: у `:has()` специфичность выше, и без min-width
   это правило перебивало мобильные «1fr» / «1fr 1fr» ниже по файлу. */
@media (min-width: 1001px) {
  .v2-facts-grid:has(> .v2-fact:last-child:nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.v2-fact strong {
  display: block;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.v2-fact span {
  display: block;
  font-size: 14px;
  color: var(--on-dark-2);
  margin-top: 4px;
}

/* ── Карточки ──────────────────────────────────────────────────────── */
.v2-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.v2-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.v2-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 28px;
  color: var(--text);
}
.v2-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.v2-card h3 {
  font-size: 23px;
}
.v2-card h4 {
  font-size: 19px;
}
.v2-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}
.v2-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v2-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
}
.v2-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.v2-list svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v2-more {
  margin-top: auto;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.v2-more svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Тайл сценария */
.v2-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 24px;
  min-height: 172px;
  color: var(--text);
}
.v2-tile:hover {
  border-color: rgba(224, 103, 51, 0.45);
  color: var(--text);
}
.v2-tile-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.v2-tile h4 {
  font-size: 19px;
  font-weight: 700;
}
.v2-tile p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.v2-tile-go {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-text);
}

/* Плитка на тёмном */
.v2-dtile {
  background: var(--tile-on-dark);
  border: 1px solid var(--hair-on-dark);
  border-radius: 12px;
  padding: 20px;
}
.v2-dtile strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
}
.v2-dtile span {
  display: block;
  font-size: 13.5px;
  color: var(--on-dark-2);
  margin-top: 4px;
}

/* Блок доверия: сетка классами, чтобы мобильные правила её перебивали
   (инлайн-стили media-запросами не переопределяются — плитки уезжали за экран). */
.v2-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.v2-trust-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.v2-trust-copy h2 {
  font-size: 34px;
}
.v2-trust-copy p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--on-dark-2);
  max-width: 46ch;
}
.v2-dtiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Таблица «задача → как решается» */
.v2-rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  background: var(--canvas);
}
.v2-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
  padding: 20px 24px;
  border-top: 1px solid var(--hairline);
}
.v2-row:first-child {
  border-top: 0;
}
.v2-row dt {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.v2-row dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}

/* ── Форма заявки в светлой карточке ───────────────────────────────── */
.v2-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.v2-form-card {
  background: var(--canvas);
  border-radius: 16px;
  padding: 32px;
  color: var(--text);
  box-shadow: var(--shadow);
}
.v2-form-card h3 {
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 4px;
}

/* ── Подвал ────────────────────────────────────────────────────────── */
.v2-footer {
  background: var(--ink-deep);
  border-top: 1px solid var(--hair-on-dark);
  padding: 56px 0 32px;
}
.v2-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}
.v2-footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v2-footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.v2-footer-col a {
  font-size: 14.5px;
  color: var(--on-dark-2);
}
.v2-footer-col a:hover {
  color: var(--on-dark);
}
.v2-footer-about p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--on-dark-3);
  max-width: 36ch;
}
.v2-footer-bottom {
  border-top: 1px solid var(--hair-on-dark);
  margin-top: 36px;
  padding-top: 22px;
  font-size: 13px;
  color: var(--on-dark-3);
}

/* ── Адаптив ───────────────────────────────────────────────────────── */
/* Заголовок героя не должен рассыпаться на пять строк в узкой колонке. */
@media (max-width: 1240px) {
  .v2-hero h1 {
    font-size: 44px;
  }
  .v2-intro h2 {
    font-size: 34px;
  }
}

@media (max-width: 1100px) {
  .v2-hero-inner,
  .v2-cta-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .v2-hero-lead {
    max-width: 60ch;
  }
  .v2-trust-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 1000px) {
  .v2-grid-3,
  .v2-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
  .v2-facts-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .v2-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .v2-wrap {
    padding-inline: 20px;
  }
  .v2-sec {
    padding: 56px 0;
  }
  .v2-hero-inner {
    padding-block: 48px 44px;
  }
  .v2-hero h1 {
    font-size: 34px;
  }
  .v2-hero-lead {
    font-size: 17px;
  }
  .v2-intro h2 {
    font-size: 28px;
  }
  .v2-grid-3,
  .v2-grid-2,
  .v2-facts-grid,
  .v2-footer-grid,
  .v2-trust-grid,
  .v2-dtiles {
    grid-template-columns: 1fr;
  }
  .v2-trust-copy h2 {
    font-size: 26px;
  }
  .v2-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .v2-nav-toggle {
    display: flex;
  }
  .v2-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 16px;
    background: var(--ink);
    border-bottom: 1px solid var(--hair-on-dark);
  }
  .v2-nav.open {
    display: flex;
  }
  .v2-nav a {
    padding: 13px 0;
    border-bottom: 1px solid var(--hair-on-dark);
  }
  .v2-nav .v2-btn {
    margin-top: 12px;
  }
  .v2-form-card {
    padding: 22px;
  }
  .v2-hero-actions .v2-btn {
    width: 100%;
  }
}

/* ── Страховка для reveal ───────────────────────────────────────────────
 * `.reveal` в styles.css — это `opacity: 0`, и появление вешает JS через
 * IntersectionObserver. Если скрипт не выполнился (блокировщик, ошибка,
 * старый браузер), страница осталась бы пустой. Здесь та же анимация
 * запускается сама через 2.5 с; когда JS успевает, он ставит `.visible`,
 * и анимация отменяется.
 * ───────────────────────────────────────────────────────────────────── */
body.v2 .reveal {
  animation: v2-reveal-fallback 0.4s ease 2.5s forwards;
}
body.v2 .reveal.visible {
  animation: none;
}
@keyframes v2-reveal-fallback {
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.v2 .reveal {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

/* ── Реальный экран системы в герое продукта ────────────────────────── */
.v2-shot {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hair-on-dark);
  box-shadow: var(--shadow);
  background: var(--ink-raised);
}
.v2-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Динамические блоки (клиенты, новости, статьи) приходят из content/*.json
   скриптом content-public.js и используют карточки из styles.css. */
body.v2 .content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1000px) {
  body.v2 .content-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  body.v2 .content-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Мобильная плотность ────────────────────────────────────────────────
 * На телефоне длинные русские заголовки рассыпались на четыре строки, а
 * секции по 56 px сверху и снизу превращали страницу в бесконечную ленту.
 * Здесь сжимается ритм, а не убирается содержание.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .v2-sec {
    padding: 48px 0;
  }
  .v2-hero-inner {
    padding-block: 32px 40px;
  }
  .v2-hero h1 {
    font-size: 31px;
    line-height: 1.12;
  }
  .v2-hero-lead {
    font-size: 16.5px;
  }
  .v2-intro {
    margin-bottom: 28px;
  }
  .v2-card {
    padding: 22px;
  }
  .v2-tile {
    padding: 20px;
    min-height: 0;
  }
  .v2-panel {
    padding: 12px;
    gap: 10px;
  }
  .v2-panel-row {
    padding: 14px;
  }
  .v2-fact strong {
    font-size: 26px;
  }
  .v2-facts-grid {
    padding-block: 26px;
    gap: 20px;
  }
  .v2-footer {
    padding: 44px 0 28px;
  }
  /* Ссылки подвала на телефоне — с зоной нажатия, а не «строчка в 14 px» */
  .v2-footer-col a,
  .v2-footer-col button {
    padding: 7px 0;
  }
  .v2-footer-col {
    gap: 2px;
  }
  /* Знак не мельчает вместе с текстом — он и есть опознавательный элемент */
  .v2-logo-text {
    font-size: 15.5px;
  }
}

@media (max-width: 380px) {
  .v2-hero h1 {
    font-size: 28px;
  }
  .v2-wrap {
    padding-inline: 16px;
  }
}

/* ── Защита от двух одинаковых поверхностей подряд ──────────────────────
 * Разделитель между блоками в бренде — смена поверхности. Если две секции
 * подряд оказались одного цвета, граница исчезает, а вертикальные отступы
 * складываются в двойную пустоту (на главной так вышло 96 px между
 * «Статусом продуктов» и «Клиентами»). Правило убирает удвоение, даже если
 * порядок секций потом поменяют.
 * ───────────────────────────────────────────────────────────────────── */
.v2-sec-light + .v2-sec-light,
.v2-sec-sunk + .v2-sec-sunk,
.v2-sec-ink + .v2-sec-ink,
.v2-sec-deep + .v2-sec-deep {
  padding-top: 0;
}

/* ── Классы вместо встроенных style="…" ────────────────────────────────
   CSP лендинга — style-src 'self' без 'unsafe-inline': атрибуты style браузер
   отбрасывает. На проде так терялось 51 правило вёрстки (19 ошибок в консоли
   главной; SEO-аудит 17.09.2026), а локальный сервер CSP не отдавал и этого не
   показывал. Префикс body.v2 — чтобы общие body.v2 h2 / body.v2 a (0,1,2) не
   перебивали одиночный класс. */
body.v2 .v2-pill-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
body.v2 .v2-status-meta {
  font-size: 13px;
  color: var(--text-2);
}
body.v2 .v2-intro--narrow {
  max-width: 56ch;
}
body.v2 .v2-sec-more {
  margin-top: 24px;
}
body.v2 .v2-cta-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
body.v2 .v2-cta-title {
  font-size: 36px;
}
body.v2 .v2-cta-lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--on-dark-2);
  max-width: 44ch;
}
body.v2 .v2-cta-contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
body.v2 .v2-cta-mail {
  font-size: 16px;
  font-weight: 700;
}
body.v2 .v2-cta-link {
  font-size: 15px;
}
body.v2 .v2-cta-legal {
  font-size: 13.5px;
  color: var(--on-dark-3);
  margin-top: 8px;
}
body.v2 .v2-form-note {
  font-size: 14.5px;
  color: var(--text-2);
  margin-bottom: 18px;
}
body.v2 .v2-form-card .contact-form {
  position: relative;
}
body.v2 .v2-footer-domains,
body.v2 .v2-footer-domains a {
  font-size: 13px;
}
body.v2 .v2-card--accent {
  border-color: rgba(224, 103, 51, 0.45);
}
@media (max-width: 767px) {
  /* Встроенный размер раньше не давал заголовку сжаться на телефоне */
  body.v2 .v2-cta-title {
    font-size: 28px;
  }
  body.v2 .v2-cta-lead {
    font-size: 16.5px;
  }
}