/* Уплотнение лендинга: соседние секции об одном и том же собраны в один блок
   с переключателем. 16-08-2026.

   Зачем: до этого «Покрытие 24/7», «Расписание» и «Мониторинг» стояли тремя
   экранами подряд и рассказывали одну мысль — система работает без вас.
   На телефоне это 2817 px из 14 613, пятая часть страницы; человек до цены
   доходил на тринадцатом экране. Теперь это один блок высотой в самую высокую
   из трёх вкладок.

   Текст внутри секций не менялся ни на символ — переехала только оболочка.
   Разметки в index.html нет (лендинг SPA), блок собирает bp_compact-20260816.js.
   Правишь этот файл — меняй метку ?v= в index.html, иначе браузер отдаст старое.

   Длительности взяты по золотому сечению: 236 мс уход, 382 мс приход,
   618 мс на весь переход. Отношение 0,618 между соседними шагами. */

/* ── Переключатель разделов ─────────────────────────────────────────────
   Четвёртый подход, и предыдущие три стоит помнить, чтобы не ходить по кругу:
   1) бледный текст на сером — не читался как кнопки вообще;
   2) крупные плитки в две строки — читались, но выглядели топорно;
   3) белые пилюли с рамкой — выглядели прилично, но подписи были непонятны;
   4) список с заголовками секций вместо кнопок — владелец сказал «ужас».
   Сейчас: плотные кнопки со сплошной заливкой. Невыбранная — светло-серая
   с тёмным текстом (заливка читается как кнопка надёжнее рамки), выбранная —
   синяя. Подписи называют ТЕМУ обычными словами («Загрузка объявления»,
   «Работа 24/7»), а не повторяют заголовок секции.

   Длительности по золотому сечению: 236 мс уход, 382 мс приход. */

.bzsw{
  --бз-уход: 236ms;
  --бз-приход: 382ms;
  --бз-кривая: cubic-bezier(.22,.61,.36,1);
  padding:44px 0 8px;
}
.bzsw-in{max-width:1200px; margin:0 auto; padding:0 16px}

.bzsw-row{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin:0 auto 26px; max-width:900px;
}
.bzsw-btn{
  flex:0 0 auto; cursor:pointer; white-space:nowrap; border:0;
  padding:12px 20px; border-radius:12px;
  background:#eef2f7; color:#334155;
  font-family:inherit; font-weight:700; font-size:.94rem; line-height:1.2;
  transition:background-color var(--бз-приход) var(--бз-кривая),
             color var(--бз-приход) var(--бз-кривая),
             box-shadow var(--бз-приход) var(--бз-кривая);
}
.bzsw-btn:hover{background:#e2e8f0; color:#0f172a}
.bzsw-btn[aria-selected="true"]{
  background:#2563eb; color:#fff;
  box-shadow:0 8px 18px -8px rgba(37,99,235,.75);
}
.bzsw-btn:focus-visible{outline:2px solid #2563eb; outline-offset:3px}

.bzsw-body{position:relative; overflow:hidden; transition:height var(--бз-приход) var(--бз-кривая)}
.bzsw-panel[hidden]{display:none}
.bzsw-panel.bzsw-out{
  opacity:0; transform:translateY(-8px);
  transition:opacity var(--бз-уход) var(--бз-кривая), transform var(--бз-уход) var(--бз-кривая);
}
.bzsw-panel.bzsw-in-anim{animation:bzsw-приход var(--бз-приход) var(--бз-кривая) both}
@keyframes bzsw-приход{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:none}
}

/* Верхний отступ секции внутри панели лишний: над ней уже стоит ряд кнопок. */
.bzsw-panel > section{margin:0; padding-top:0 !important}
.bzsw-panel > section > div:first-child{padding-top:0 !important}
.bzsw-panel .bp-section,
.bzsw-panel .bpsc-wrap,
.bzsw-panel .bm-wrap{padding-top:0 !important; padding-bottom:8px !important}

@media(max-width:900px){
  .bzsw{padding:28px 0 4px}
  .bzsw-in{padding:0 12px}
  .bzsw-row{gap:7px; margin-bottom:18px}
  .bzsw-btn{padding:10px 14px; font-size:.85rem; border-radius:11px}
}
@media(max-width:420px){
  .bzsw-btn{padding:10px 12px; font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  .bzsw-body{transition:none}
  .bzsw-panel.bzsw-out{transition:none}
  .bzsw-panel.bzsw-in-anim{animation:none}
}

/* ── Подвал: список тем свёрнут на телефоне ────────────────────────────────
   Ссылки остаются в разметке — они нужны поиску, — просто закрыты. */
@media(max-width:900px){
  .bzp-rf-col.bzp-свёрнут > h4,
  .bzp-rf-tags.bzp-свёрнут > h4{
    cursor:pointer; display:flex; align-items:center; gap:7px;
    margin-bottom:0; padding:6px 0;
  }
  .bzp-rf-col.bzp-свёрнут > h4::after,
  .bzp-rf-tags.bzp-свёрнут > h4::after{
    content:""; width:7px; height:7px; flex:none;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px); opacity:.55;
    transition:transform .382s cubic-bezier(.22,.61,.36,1);
  }
  .bzp-rf-col.bzp-открыт > h4::after,
  .bzp-rf-tags.bzp-открыт > h4::after{transform:rotate(-135deg) translateY(-2px)}
  .bzp-rf-col.bzp-свёрнут > a,
  .bzp-rf-tags.bzp-свёрнут > a{display:none}
  .bzp-rf-tags.bzp-открыт > a{display:inline-flex}
  .bzp-rf-col.bzp-открыт > a{display:block}
}
@media(prefers-reduced-motion:reduce){
  .bzp-rf-col.bzp-свёрнут > h4::after,
  .bzp-rf-tags.bzp-свёрнут > h4::after{transition:none}
}

/* ── Убираем бледно-синюю подложку секций ──────────────────────────────────
   Через секцию шёл фон rgb(248,250,252) — тот самый «еле-еле видный синий».
   На светлом экране он не читался как приём, а выглядел грязью: часть секций
   белая, часть чуть голубоватая, без всякой системы. Делаем всё белым.
   Тёмные и градиентные блоки (герой, форма заявки, нижний призыв) не трогаем —
   они цветные по замыслу. */
#flow, #coverage, #smart-schedule, #bpact, #tags, #pricing,
.section-gray, .section.section-gray{
  background:#fff !important;
  background-image:none !important;
}