/* ==========================================================================
   LARIANS — bots.html
   Светлая фирменная система, единая с index.html. ВСЁ scoped внутри
   .bots-light, чтобы правки не протекали на другие страницы.
   ========================================================================== */

.bots-light {
  /* ТЁМНАЯ СИСТЕМА страницы — та же палитра, что в hero.
     Карточки и панели построены на этих токенах, поэтому вся страница
     подхватывает материал hero без переписывания каждой секции. */
  --bd-bg:        #050309;                 /* база hero: hsl(260 87% 3%) */
  --bd-bg-2:      #08050d;
  /* стекло: прозрачное тёмное вместо белого */
  --bd-glass-1:   rgba(255,255,255,.055);
  --bd-glass-2:   rgba(255,255,255,.022);
  --bd-surface:   rgba(255,255,255,.038);
  --bd-surface-2: rgba(255,255,255,.07);
  --bd-line:      rgba(255,255,255,.10);
  --bd-line-2:    rgba(168,85,247,.42);
  --bd-ink:       hsl(40 6% 95%);
  --bd-ink-2:     rgba(255,255,255,.62);
  --bd-ink-3:     rgba(255,255,255,.45);
  --bd-violet:    #8B5CF6;
  --bd-violet-2:  #A855F7;
  --bd-violet-3:  #C4B5FD;
  --bd-lav:       #C4B5FD;
  --bd-lav-soft:  rgba(139,92,246,.16);
  --bd-ok:        #34D399;
  /* радиусы 1:1 с главной */
  --bd-r-sm: 12px;
  --bd-r:    20px;
  --bd-r-lg: 28px;
  --bd-shadow-sm: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 46px rgba(0,0,0,.34);
  --bd-shadow:    inset 0 1px 0 rgba(255,255,255,.08), 0 28px 80px rgba(0,0,0,.44);

  background: var(--bd-bg);
  color: var(--bd-ink);
}
.bots-light { background: var(--bd-bg); }
/* Секции прозрачны — сквозь них видна общая фоновая система */
.bots-light .bd-section { background: transparent; }

/* Хедер, сабнав и футер намеренно НЕ переопределяются:
   страница берёт их из style.css ровно как на главной. */

/* ═══════════════════════════════════════════════════════════
   ВНУТРЕННЯЯ НАВИГАЦИЯ — вторая строка под хедером.
   База берётся из .page-subnav в style.css, здесь только то,
   что специфично для страницы ботов.
   ═══════════════════════════════════════════════════════════ */
.bots-light .page-subnav.bd-snav {
  position: fixed;               /* вместе с header — одна закреплённая система */
  left: 0; right: 0;
  top: var(--nav-h1, 69px);      /* вплотную под header, без зазора */
  z-index: 90;                   /* ниже хедера (100), выше контента */
  background: rgba(6, 2, 16, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.bots-light .bd-snav .page-subnav__inner {
  display: flex; align-items: center; gap: 4px;
  padding: 9px 0; white-space: nowrap;
}
.bots-light .bd-snav .page-snav-link {
  padding: 8px 15px; border-radius: 999px;
  font-size: 14px; font-weight: 600;      /* не мельчим: 14px, не 12 */
  color: rgba(255,255,255,.82); text-decoration: none;
  flex-shrink: 0; white-space: nowrap;
  transition: background .18s, color .18s;
}
.bots-light .bd-snav .page-snav-link:hover {
  background: rgba(109,40,217,.08); color: var(--bd-violet);
}
/* Обычный активный пункт — намеренно спокойный,
   чтобы не спорить с коммерческим акцентом «Тарифов». */
.bots-light .bd-snav .page-snav-link--active {
  background: rgba(109,40,217,.07); color: var(--bd-violet); font-weight: 700;
}

/* ── «Тарифы»: постоянная акцентная pill ── */
.bots-light .bd-snav .page-snav-link--price {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 6px;
  background: var(--bd-lav-soft);
  color: var(--bd-violet);
  border: 1px solid rgba(109,40,217,.34);
  font-weight: 700;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.bots-light .bd-snav .bd-snav__badge {
  padding: 2px 8px; border-radius: 999px;
  background: rgba(109,40,217,.13); color: var(--bd-violet);
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  transition: background .18s, color .18s;
}
.bots-light .bd-snav .page-snav-link--price:hover {
  background: var(--bd-violet); color: #fff; border-color: var(--bd-violet);
}
.bots-light .bd-snav .page-snav-link--price:hover .bd-snav__badge {
  background: rgba(255,255,255,.24); color: #fff;
}
/* В секции тарифов — заметно сильнее обычного активного состояния */
.bots-light .bd-snav .page-snav-link--price.page-snav-link--active {
  background: linear-gradient(135deg, var(--bd-violet-2), var(--bd-violet));
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px rgba(109,40,217,.34);
}
.bots-light .bd-snav .page-snav-link--price.page-snav-link--active .bd-snav__badge {
  background: rgba(255,255,255,.26); color: #fff;
}

/* ── CTA справа ── */
.bots-light .bd-snav .page-snav-link--cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  background: var(--bd-violet); color: #fff; font-weight: 700;
}
.bots-light .bd-snav .page-snav-link--cta:hover { background: #7C3AED; color: #fff; }

/* Секции не должны прятаться под двумя строками шапки */
.bots-light section[id], .bots-light div[id^="bot-"] {
  scroll-margin-top: calc(var(--bh-top, 129px) + 20px);
}

/* ── 1024–1280: сжимаем, потом скроллим, CTA уходит первой ── */
@media (max-width: 1280px) {
  .bots-light .bd-snav .page-snav-link { padding: 8px 11px; }
  .bots-light .bd-snav .page-subnav__inner { gap: 2px; }
}
@media (max-width: 1180px) {
  /* CTA скрывается первой — «Рассчитать» остаётся в основном хедере */
  .bots-light .bd-snav .page-snav-link--cta { display: none; }
  /* без CTA справа порядок пунктов остаётся естественным, без отрыва */
  .bots-light .bd-snav .page-snav-link--price { margin-left: 4px; }
}

/* ── Mobile: подменю — горизонтальная лента ──
   Раньше «Тарифы» были position: sticky + order, и закреплённая pill
   наезжала на соседние пункты. Теперь это обычная лента: скроллером
   служит сам .page-subnav__inner во всю ширину, пункты — простые
   flex-элементы, ничего не липнет и не позиционируется абсолютно. */
@media (max-width: 767px) {
  .bots-light .page-subnav.bd-snav { top: var(--nav-h1, 61px); width: 100%; }
  .bots-light .bd-snav .page-subnav__inner {
    position: relative;              /* точка отсчёта для доводки активного пункта */
    width: 100%; max-width: none; margin: 0;
    display: flex; flex-wrap: nowrap; align-items: center;
    gap: 9px; padding: 5px 15px;     /* 5 + 46 + 5 + 1px рамка = 57px высоты */
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 15px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .bots-light .bd-snav .page-subnav__inner::-webkit-scrollbar { display: none; }

  .bots-light .bd-snav .page-snav-link {
    flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 42px;                /* touch target */
    padding: 10px 14px;              /* активная pill шире контента ровно на 28px */
    font-size: 14.5px; border-radius: 999px;
  }
  /* «Тарифы» остаются акцентом, но обычным пунктом ленты:
     без sticky, order, отрицательных margin и тени-маски. */
  .bots-light .bd-snav.bd-snav .page-snav-link--price,
  .bots-light .bd-snav.bd-snav .page-snav-link--price.page-snav-link--active {
    position: static; order: 0; margin: 0; box-shadow: none;
    padding: 10px 13px;              /* 13 + 1px рамка × 2 = ровно 28px сверх текста */
    background: linear-gradient(135deg, var(--bd-violet-2), var(--bd-violet));
    color: #fff; border-color: transparent;
  }
  /* бейдж «4 варианта» увёл бы pill за пределы лимита ширины */
  .bots-light .bd-snav .bd-snav__badge { display: none; }
  .bots-light section[id], .bots-light div[id^="bot-"] { scroll-margin-top: calc(var(--bh-top, 112px) + 16px); }
}

/* ───────── Общие элементы страницы ───────── */
.bots-light .bd-section { position: relative; padding: 80px 0; }
.bots-light .bd-container { width: min(1180px, 100% - 48px); margin-inline: auto; }
.bots-light .bd-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--bd-surface); border: 1px solid var(--bd-line);
  font-size: 12.5px; font-weight: 600; color: var(--bd-ink-2);
  letter-spacing: .02em;
}
.bots-light .bd-h2 {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(26px, 3.4vw, 42px); font-weight: 700;
  line-height: 1.15; letter-spacing: -.02em; margin: 16px 0 12px;
  color: var(--bd-ink); text-wrap: balance;
}
.bots-light .bd-sub {
  font-size: 16px; line-height: 1.6; color: var(--bd-ink-2);
  max-width: 62ch; text-wrap: pretty;
}
.bots-light .bd-head { margin-bottom: 40px; }
.bots-light .bd-head--c { text-align: center; }
.bots-light .bd-head--c .bd-sub { margin-inline: auto; }

.bots-light .bd-card {
  background: var(--bd-surface);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-r);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* Кнопки */
.bots-light .bd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-size: 15px; font-weight: 700; font-family: inherit;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s, background .22s, border-color .22s;
}
.bots-light .bd-btn--main {
  background: linear-gradient(135deg, var(--bd-violet-2), var(--bd-violet));
  color: #fff; box-shadow: 0 8px 24px rgba(109,40,217,.28);
}
.bots-light .bd-btn--main:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(109,40,217,.34); }
.bots-light .bd-btn--ghost {
  background: var(--bd-surface); color: var(--bd-ink); border-color: var(--bd-line-2);
}
.bots-light .bd-btn--ghost:hover { background: var(--bd-surface-2); border-color: var(--bd-violet-2); }
.bots-light .bd-btn:active { transform: scale(.98); }

/* ═══ Выделение ключевых смыслов ═══
   Только для действительно важных фраз, не для половины текста. */
.bots-light .bd-hl { color: var(--bd-violet); font-weight: 800; }
/* фраза с подсветкой снизу */
.bots-light .bd-hl-u {
  position: relative; color: var(--bd-ink); font-weight: 700;
  white-space: nowrap;
}
.bots-light .bd-hl-u::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--bd-violet-3), var(--bd-lav), transparent);
  box-shadow: 0 0 10px rgba(168,85,247,.7);
  animation: bdHlLine 3.6s ease-in-out infinite;
}
@keyframes bdHlLine { 0%,100%{opacity:.55;transform:scaleX(.9)} 50%{opacity:1;transform:scaleX(1)} }
/* мягкое лавандовое выделение слова внутри абзаца */
.bots-light .bd-hl-s { color: var(--bd-violet); font-weight: 700; }
/* «плашка-смысл» — важный тезис в рамке */
.bots-light .bd-hl-chip {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--bd-lav-soft); border: 1px solid var(--bd-line-2);
  color: var(--bd-violet); font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   HERO bots.html — полноэкранный тёмный video hero.
   Живёт только внутри .bhero: остальная страница остаётся светлой.
   General Sans подключён отдельно и применяется только к заголовку.
   ═══════════════════════════════════════════════════════════ */

/* ── Liquid glass: CTA и иконки ленты ── */
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%,
    rgba(255,255,255,0.45) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ── Секция ── */
.bots-light .bhero {
  --bh-bg:   hsl(260 87% 3%);
  --bh-fg:   hsl(40 6% 95%);
  --bh-sub:  hsl(40 6% 82%);
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bh-bg);
  color: var(--bh-fg);
  /* перекрывает светлый фоновый слой страницы */
  z-index: 2;
  padding: 0;
  /* обе панели fixed → hero и так начинается от верха экрана */
  margin-top: 0;
}

/* Видео — за всем контентом, клики не перехватывает */
.bots-light .bhero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;                 /* дальше ведёт JS */
  pointer-events: none;
  z-index: 0;
}

/* Центральная тёмная форма — не карточка, просто уплотнение фона */
.bots-light .bhero__blur {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 984px;
  height: 527px;
  max-width: 96vw;
  transform: translate(-50%, -50%);
  opacity: .9;
  background: #030306;
  filter: blur(82px);
  pointer-events: none;
  z-index: 1;
}

.bots-light .bhero__inner {
  position: relative;
  z-index: 10;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* единственная компенсация шапки — без дублирования */
  padding-top: calc(var(--bh-top, 129px) + 12px);
}

/* Хлебные крошки внутри тёмного hero */
.bots-light .bhero__crumbs { padding: 0 32px; flex: 0 0 auto; }
.bots-light .bhero__crumbs ol {
  list-style: none; display: flex; gap: 8px; margin: 0; padding: 0;
  font-size: 12.5px; color: rgba(255,255,255,.45);
}
.bots-light .bhero__crumbs a { color: rgba(255,255,255,.7); text-decoration: none; }
.bots-light .bhero__crumbs a:hover { color: #fff; }

/* ── Контент по центру свободной части ── */
.bots-light .bhero__main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* справа шире — там правая полоса Lari */
  padding: 0 120px 0 24px;
}
.bots-light .bhero__h1 {
  font-family: 'General Sans', 'Unbounded', sans-serif;
  font-weight: 400;
  font-size: clamp(60px, 7.4vw, 132px);
  line-height: .96;
  letter-spacing: -0.035em;
  max-width: 1180px;
  margin: 0;
  color: var(--bh-fg);
  text-wrap: balance;
}
.bots-light .bhero__grad {
  background-image: linear-gradient(to left, #6366f1, #a855f7, #fcd34d);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.bots-light .bhero__sub {
  font-size: 18px;
  line-height: 1.75;
  max-width: 620px;
  margin: 16px auto 0;
  opacity: .8;
  color: var(--bh-sub);
}
.bots-light .bhero__cta {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.bots-light .bhero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 29px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: var(--bh-fg);
  text-decoration: none;
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s;
}
.bots-light .bhero__btn:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.16), 0 12px 30px rgba(0,0,0,.35);
}
.bots-light .bhero__btn--main {
  background: rgba(139, 92, 246, .22);
}

/* ── Лента каналов ── */
.bots-light .bhero__marquee {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px 52px;
  display: flex;
  align-items: center;
  gap: 48px;
}
.bots-light .bhero__mq-label {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.62);
  min-width: 190px;
  margin: 0;
  flex: 0 0 auto;
}
.bots-light .bhero__mq-view {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  /* мягкие края ленты */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.bots-light .bhero__mq-track {
  display: flex;
  width: max-content;
  gap: 64px;
  animation: botsHeroMarquee 20s linear infinite;
  will-change: transform;
}
.bots-light .bhero__mq-view:hover .bhero__mq-track { animation-play-state: paused; }
@keyframes botsHeroMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.bots-light .bhero__mq-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--bh-fg);
  white-space: nowrap;
}
.bots-light .bhero__mq-ico {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  color: rgba(255,255,255,.85);
  flex: 0 0 auto;
}

/* ── Переход в светлую часть страницы ── */
.bots-light .bhero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 130px;
  z-index: 5;                /* ниже контента (10) — marquee не перекрыт */
  pointer-events: none;
  /* тёмный стык с секцией ниже: без белой засветки */
  background: linear-gradient(
    to bottom,
    rgba(5, 3, 9, 0) 0%,
    rgba(5, 3, 9, .45) 52%,
    #050309 100%
  );
}

/* ══════════ Тёмная шапка, пока hero на экране ══════════ */
.bots-light .header.is-on-dark {
  background: rgba(6, 2, 16, .88);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  border-bottom-color: transparent;
  /* position НЕ переопределяем: .header остаётся fixed из style.css */
}
.bots-light .header.is-on-dark .logo__text { color: hsl(40 6% 95%); }
.bots-light .header.is-on-dark .logo__text em { color: rgba(255,255,255,.6); }
.bots-light .header.is-on-dark .nav__link { color: rgba(255,255,255,.9); }
.bots-light .header.is-on-dark .nav__link:hover { color: #fff; background: rgba(255,255,255,.08); }
.bots-light .header.is-on-dark .nav__link--active { color: #fff; background: rgba(255,255,255,.12); }
.bots-light .header.is-on-dark .header__cart-btn { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }
.bots-light .header.is-on-dark .burger span { background: hsl(40 6% 95%); }
/* тонкая линия под шапкой — как в референсе */
.bots-light .header.is-on-dark::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.2), transparent);
  pointer-events: none;
}
/* сабнав в тёмном режиме */
.bots-light .page-subnav.bd-snav.is-on-dark {
  background: rgba(6, 2, 16, .72);
  border-bottom-color: rgba(255,255,255,.10);
}
.bots-light .bd-snav.is-on-dark .page-snav-link { color: rgba(255,255,255,.82); }
.bots-light .bd-snav.is-on-dark .page-snav-link:hover { color: #fff; background: rgba(255,255,255,.10); }
.bots-light .bd-snav.is-on-dark .page-snav-link--active { color: #fff; background: rgba(255,255,255,.14); }
.bots-light .bd-snav.is-on-dark .page-snav-link--price {
  background: rgba(139,92,246,.28); color: #fff; border-color: rgba(196,181,253,.45);
}
.bots-light .bd-snav.is-on-dark .bd-snav__badge { background: rgba(255,255,255,.18); color: #fff; }

/* Мобильное меню-оверлей: тёмное стекло вместо белой панели */
@media (max-width: 1199px) {
  .bots-light .nav {
    background: rgba(6, 2, 16, .96);
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
    border-color: rgba(255,255,255,.10);
  }
  .bots-light .nav .nav__link { color: rgba(255,255,255,.88); }
  .bots-light .nav .nav__link:hover,
  .bots-light .nav .nav__link--active { color: #fff; background: rgba(255,255,255,.10); }
}

/* ══════════ MOBILE ══════════ */
/* Ниже 1024 Lari не запускается (bots-lari.js: qualifies() >= 1024),
   поэтому правая полоса под него не нужна — контент строго по центру. */
@media (max-width: 1023px) {
  .bots-light .bhero__main { padding: 0 24px; }
}

@media (max-width: 767px) {
  /* ── Mobile hero-фон: базовый слой — лёгкий статичный фирменный кадр
     (первый кадр mobile-видео), AVIF/WebP ~23–25 КБ. Он виден сразу и
     никогда не оставляет чёрный экран. Фирменное видео (лёгкий mobile-MP4)
     JS кладёт ПОВЕРХ и мягко проявляет через opacity только после реального
     события `playing` — на мощных телефонах. На слабых устройствах / Save-Data
     / медленной сети / reduced-motion / ошибке autoplay видео не грузится,
     остаётся статичный фон. Fullscreen-blur на mobile не возвращаем. */
  .bots-light .bhero {
    background-color: var(--bh-bg);
    /* верхний слой — мягкий градиентный overlay под читаемость текста;
       нижний — статичный фон (cover, по центру — совпадает с кадром видео). */
    background-image:
      linear-gradient(180deg,
        rgba(5,3,14,.62) 0%,
        rgba(5,3,14,.20) 30%,
        rgba(5,3,14,.34) 60%,
        rgba(5,3,9,.94) 100%),
      url("bots-hero-mobile.webp");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: cover, cover;
  }
  /* AVIF, если поддерживается — тот же кадр, ещё легче */
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .bots-light .bhero {
      background-image:
        linear-gradient(180deg,
          rgba(5,3,14,.62) 0%,
          rgba(5,3,14,.20) 30%,
          rgba(5,3,14,.34) 60%,
          rgba(5,3,9,.94) 100%),
        image-set(
          url("bots-hero-mobile.avif") type("image/avif"),
          url("bots-hero-mobile.webp") type("image/webp"));
    }
  }
  /* Видео присутствует, но невидимо до `playing`; проявляется одной CSS-
     transition по классу .is-video-playing (никакого rAF). Анимируем только
     opacity. Статичный фон остаётся под видео. */
  .bots-light .bhero__video {
    display: block;
    opacity: 0;
    object-position: center;
    transition: opacity .6s ease;
  }
  .bots-light .bhero.is-video-playing .bhero__video { opacity: 1; }
  .bots-light .bhero__blur { display: none; }
  .bots-light .bhero__inner { padding-top: calc(var(--bh-top, 112px) + 8px); }
  .bots-light .bhero__crumbs { padding: 0 24px; }
  .bots-light .bhero__h1 { font-size: clamp(40px, 11vw, 50px); letter-spacing: -0.03em; }
  .bots-light .bhero__sub { font-size: 16px; margin-top: 14px; }
  .bots-light .bhero__cta { margin-top: 22px; width: 100%; }
  .bots-light .bhero__btn { flex: 1 1 240px; padding: 15px 22px; }
  /* лента в одну строку без статичной подписи */
  .bots-light .bhero__marquee { gap: 0; padding-bottom: 28px; }
  .bots-light .bhero__mq-label { display: none; }
  .bots-light .bhero__mq-track { gap: 40px; }
  .bots-light .bhero__mq-item { font-size: 15px; }
  .bots-light .bhero__fade { height: 110px; }
  .bots-light .bd-snav.is-on-dark .page-snav-link--price {
    box-shadow: -10px 0 14px 6px rgba(6,2,16,.86), 0 4px 14px rgba(0,0,0,.4);
  }
}

/* ══════════ REDUCED MOTION ══════════ */
@media (prefers-reduced-motion: reduce) {
  .bots-light .bhero__mq-track { animation: none !important; }
  .bots-light .bhero__btn:hover { transform: none; }
  /* видео не проигрывается — JS ставит статичный кадр */
}


/* ═══════════════════════════════════════════════════════════
   ЕДИНАЯ СИСТЕМА ЗАГОЛОВКОВ ПОСЛЕ HERO
   Один шрифт, один вес, один ритм. Выравнивание по композиции:
   центр — для секций с сеткой, лево — для двухколоночных.
   ═══════════════════════════════════════════════════════════ */
.bots-light .bd-h2 {
  font-family: 'General Sans', 'Unbounded', sans-serif;
  font-size: clamp(42px, 4.2vw, 64px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
  color: var(--bd-ink);
}
/* Единый акцент ключевых слов в заголовках — один градиент на всю страницу.
   Белый основной текст + 1–3 градиентных слова. Класс общий, без «per-section». */
.bots-light .bd-title-accent {
  background: linear-gradient(90deg, #f2b866 0%, #d88acb 34%, #a855f7 66%, #6366f1 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* акцентная фраза не рвётся посреди себя при переносе строки */
  white-space: nowrap;
}
/* на узких экранах фраза может занять свою строку, но словами, не буквами */
@media (max-width: 480px) {
  .bots-light .bd-title-accent { white-space: normal; }
}
/* Секционный подзаголовок — общая вертикальная ось с H2 */
.bots-light .bd-head {
  margin-bottom: 38px;
}
.bots-light .bd-head .bd-eyebrow { margin-bottom: 14px; display: inline-flex; }
.bots-light .bd-head .bd-h2 { margin-top: 0; }
.bots-light .bd-head .bd-sub {
  margin: 18px auto 0;
  max-width: 680px;
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
  color: var(--bd-ink-2);
}
.bots-light .bd-head--c { text-align: center; }

/* Секционный H3 (не карточный) */
.bots-light .bd-head h3,
.bots-light .bd-typeview > .bd-h2 {
  font-family: 'General Sans', 'Unbounded', sans-serif;
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

/* Подзаголовок уровня H3 внутри секции */
.bots-light .bd-h3--sub {
  font-size: clamp(24px, 2.3vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-top: 0;
  max-width: 760px;
}

/* Двухколоночная секция — заголовок по левому краю контентной колонки */
.bots-light #bot-types .bd-head { text-align: left; }
.bots-light #bot-types .bd-h2 { margin-left: 0; margin-right: 0; text-align: left; max-width: 1040px; }
.bots-light #bot-types .bd-head .bd-sub { margin-left: 0; margin-right: 0; text-align: left; }

/* Заголовки карточек остаются компактными — это не секционный уровень */
.bots-light .bd-pk__n,
.bots-light .bd-type b,
.bots-light .bd-mini b,
.bots-light .bd-cap b,
.bots-light .bd-ch__i b { font-family: 'Manrope', sans-serif; }

@media (max-width: 767px) {
  .bots-light .bd-h2 {
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.05;
    max-width: 100%;
  }
  .bots-light .bd-head h3,
  .bots-light .bd-typeview > .bd-h2 { font-size: clamp(25px, 7.5vw, 34px); line-height: 1.1; }
  .bots-light .bd-head { margin-bottom: 28px; }
  .bots-light .bd-head .bd-sub { margin-top: 16px; font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   ФОНОВАЯ СИСТЕМА СТРАНИЦЫ — продолжение hero вниз до футера.
   Материал тот же: чёрно-фиолетовая база hsl(260 87% 3%),
   крупные размытые объёмы, сине-фиолетовые свечения, глубина.
   Один fixed-слой; сцены меняют фокус, а не палитру — швов нет.
   ═══════════════════════════════════════════════════════════ */
.bgs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* сцены двигают только эти значения */
  --s-x: 50%;   --s-y: 42%;    /* фокус свечения */
  --s-i: 1;                     /* интенсивность */
  --s-beam: 0;                  /* горизонтальные потоки (интеграции) */
  --s-calm: 0;                  /* успокоение (тарифы/FAQ) */
}
.bots-light .bd-page { position: relative; z-index: 1; }

/* База: тот же цвет, что у hero */
.bgs__base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at var(--s-x) var(--s-y),
      rgba(76, 29, 149, calc(.32 * var(--s-i))) 0%,
      rgba(30, 12, 60, calc(.18 * var(--s-i))) 38%,
      transparent 72%),
    linear-gradient(180deg, #050309 0%, #07040e 42%, #050309 100%);
  transition: background 1.6s ease;
}

/* Крупные объёмные формы — как blur-форма в hero, но живые */
.bgs__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform, opacity;
  transition: opacity 1.8s ease, transform 2.4s cubic-bezier(.22,.6,.2,1);
}
.bgs__orb--a {
  width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
  top: -18vh; right: -14vw;
  background: radial-gradient(circle, rgba(124, 58, 237, .40), rgba(88, 28, 190, .12) 52%, transparent 72%);
  opacity: calc((.85 - var(--s-calm) * .45) * var(--s-i));
  animation: bgsDriftA 34s ease-in-out infinite;
}
.bgs__orb--b {
  width: 54vw; height: 54vw; max-width: 760px; max-height: 760px;
  bottom: -16vh; left: -12vw;
  background: radial-gradient(circle, rgba(59, 130, 246, .26), rgba(37, 99, 235, .08) 54%, transparent 74%);
  opacity: calc((.7 - var(--s-calm) * .4) * var(--s-i));
  animation: bgsDriftB 44s ease-in-out infinite;
}
.bgs__orb--c {
  width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
  top: 38%; left: 46%;
  background: radial-gradient(circle, rgba(168, 85, 247, .30), transparent 68%);
  opacity: calc((.55 - var(--s-calm) * .35) * var(--s-i));
  animation: bgsDriftA 38s ease-in-out infinite reverse;
}
@keyframes bgsDriftA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-3%, 4%, 0) scale(1.08); }
}
@keyframes bgsDriftB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.04); }
  50%      { transform: translate3d(4%, -3%, 0) scale(1); }
}

/* Горизонтальные световые потоки — усиливаются на интеграциях */
.bgs__beam {
  position: absolute;
  left: -10%; right: -10%;
  height: 22vh;
  background: linear-gradient(180deg,
    transparent,
    rgba(139, 92, 246, .16) 42%,
    rgba(196, 181, 253, .22) 50%,
    rgba(59, 130, 246, .12) 58%,
    transparent);
  filter: blur(30px);
  opacity: var(--s-beam);
  transition: opacity 1.8s ease, transform 2.4s cubic-bezier(.22,.6,.2,1);
}
.bgs__beam--1 { top: 26%; transform: rotate(-6deg); }
.bgs__beam--2 { top: 62%; transform: rotate(-3deg); }

/* Мягкая фактура — снимает «пластиковость» плоской заливки */
.bgs__grain {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

/* ══════════ СЦЕНЫ: меняется фокус и настроение, не палитра ══════════ */
.bgs[data-scene="intro"]   { --s-x: 62%; --s-y: 30%; --s-i: 1; }
.bgs[data-scene="types"]   { --s-x: 28%; --s-y: 38%; --s-i: 1.05; }
/* симулятор: технологичнее — фокус в центре, потоки чуть заметны */
.bgs[data-scene="sim"]     { --s-x: 52%; --s-y: 46%; --s-i: 1.15; --s-beam: .35; }
.bgs[data-scene="niches"]  { --s-x: 72%; --s-y: 52%; --s-i: .95; }
.bgs[data-scene="caps"]    { --s-x: 34%; --s-y: 56%; --s-i: 1; }
/* интеграции: горизонтальные световые потоки */
.bgs[data-scene="integr"]  { --s-x: 50%; --s-y: 48%; --s-i: 1.1; --s-beam: 1; }
.bgs[data-scene="process"] { --s-x: 66%; --s-y: 40%; --s-i: .9; }
/* тарифы: спокойный глубокий фон */
.bgs[data-scene="pricing"] { --s-x: 50%; --s-y: 34%; --s-i: .7; --s-calm: .55; }
/* FAQ: почти чёрный с мягким свечением */
.bgs[data-scene="faq"]     { --s-x: 50%; --s-y: 28%; --s-i: .45; --s-calm: .85; }
/* финал: cinematic завершение */
.bgs[data-scene="cta"]     { --s-x: 50%; --s-y: 58%; --s-i: 1.25; --s-beam: .5; }

/* ══════════ MOBILE: легче, без тяжёлых blur ══════════ */
@media (max-width: 767px) {
  .bgs__orb { filter: blur(64px); }
  .bgs__orb--c { display: none; }
  .bgs__beam { height: 18vh; filter: blur(22px); }
  .bgs__grain { display: none; }
}

/* ══════════ REDUCED MOTION ══════════ */
@media (prefers-reduced-motion: reduce) {
  .bgs__orb { animation: none !important; }
  .bgs__orb, .bgs__beam, .bgs__base { transition: none; }
}


/* ═══════════════════════════════════════════════════════════
   ТЁМНАЯ ЗОНА — секции сразу после hero живут в одной системе
   с ним: тот же чёрно-фиолетовый фон, та же типографика,
   стеклянные карточки вместо светлых. Фон продолжается до футера.
   ═══════════════════════════════════════════════════════════ */
.bots-light .bd-dark {
  --dz-bg:    #050309;
  --dz-bg-2:  #08050d;
  --dz-fg:    hsl(40 6% 95%);
  position: relative;
  z-index: 2;                       /* поверх светлого фонового слоя */
  background: linear-gradient(180deg, var(--dz-bg) 0%, var(--dz-bg-2) 100%);
  color: var(--dz-fg);
  isolation: isolate;
}
/* мягкие фиолетовые пятна — глубина без молочных заливок */
.bots-light .bd-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 78% 8%, rgba(139, 92, 246, .16), transparent 62%),
    radial-gradient(52% 40% at 12% 82%, rgba(99, 102, 241, .10), transparent 66%);
}
.bots-light .bd-dark > * { position: relative; z-index: 1; }

/* ── Типографика: та же система, что в hero ── */
.bots-light .bd-dark .bd-h2 {
  /* размеры берутся из единой системы заголовков — здесь только цвет */
  color: var(--dz-fg);
}
.bots-light .bd-dark .bd-h2 .bd-hl {
  background-image: linear-gradient(to left, #6366f1, #a855f7, #f2b866);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 500;
}
.bots-light .bd-dark .bd-sub {
  color: rgba(255, 255, 255, .55);
  font-size: 18px;
  line-height: 1.7;
  max-width: 680px;
}
.bots-light .bd-dark .bd-head { margin-bottom: 52px; }

/* Бейдж-эйбрау: тёмное стекло вместо светлой плашки */
.bots-light .bd-dark .bd-eyebrow {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* ── Карточки: тёмное стекло, интерфейс AI-системы ── */
.bots-light .bd-dark .bd-type,
.bots-light .bd-dark .bd-mini {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 20px 60px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border-radius: 22px;
  color: rgba(255, 255, 255, .5);
  transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.bots-light .bd-dark .bd-type b,
.bots-light .bd-dark .bd-mini b { color: var(--dz-fg); }
.bots-light .bd-dark .bd-type span,
.bots-light .bd-dark .bd-mini span { color: rgba(255, 255, 255, .5); }

.bots-light .bd-dark .bd-type:hover,
.bots-light .bd-dark .bd-mini:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
  transform: translateY(-2px);
}
/* активный тип — мягкое фиолетовое свечение, не заливка */
.bots-light .bd-dark .bd-type.is-on {
  background: rgba(139, 92, 246, .12);
  border-color: rgba(168, 85, 247, .45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 0 0 1px rgba(168, 85, 247, .18),
    0 24px 70px rgba(88, 28, 190, .28);
}
.bots-light .bd-dark .bd-type.is-on b { color: #fff; }
.bots-light .bd-dark .bd-type__tag {
  background: rgba(5, 150, 105, .18);
  color: #6EE7B7;
}

/* Заголовок внутри вкладки типа («Гибридный бот» и др.) */
.bots-light .bd-dark .bd-typeview .bd-h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.bots-light .bd-dark .bd-typeview .bd-sub { font-size: 16.5px; }

/* Нумерация возможностей 01–04 */
.bots-light .bd-dark .bd-typeview__grid { counter-reset: dzn; }
.bots-light .bd-dark .bd-mini { position: relative; padding-top: 40px; }
.bots-light .bd-dark .bd-mini::before {
  counter-increment: dzn;
  content: counter(dzn, decimal-leading-zero);
  position: absolute;
  top: 16px; left: 18px;
  font-family: 'General Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(168, 85, 247, .75);
}
/* слабое свечение при наведении */
.bots-light .bd-dark .bd-mini:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 0 1px rgba(168, 85, 247, .16),
    0 24px 70px rgba(88, 28, 190, .22);
}

/* Акценты внутри тёмного текста */
.bots-light .bd-dark .bd-hl-s { color: #c4b5fd; }
.bots-light .bd-dark .bd-hl-chip {
  background: rgba(168, 85, 247, .16);
  border-color: rgba(196, 181, 253, .3);
  color: #ddd6fe;
}


/* ══════════ MOBILE ══════════ */
@media (max-width: 767px) {
  .bots-light .bd-dark .bd-h2 { font-size: clamp(34px, 9vw, 46px); }
  .bots-light .bd-dark .bd-sub { font-size: 16px; }
  .bots-light .bd-dark .bd-head { margin-bottom: 34px; }
  .bots-light .bd-dark .bd-type,
  .bots-light .bd-dark .bd-mini { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .bots-light .bd-dark .bd-type,
  .bots-light .bd-dark .bd-mini { transition: none; }
  .bots-light .bd-dark .bd-type:hover,
  .bots-light .bd-dark .bd-mini:hover { transform: none; }
}


/* ───────── HERO ───────── */
.bots-light .bd-hero { position: relative; padding: 92px 0 76px; }
/* Локальная светлая вуаль ТОЛЬКО под текстовой колонкой — читаемость поверх фона */
.bots-light .bd-hero__grid > div:first-child { position: relative; }
.bots-light .bd-hero__grid > div:first-child::before {
  content: ''; position: absolute; inset: -8% -12% -8% -24%;
  pointer-events: none; z-index: -1;
  background: radial-gradient(80% 78% at 30% 46%, rgba(5,3,9,.55), rgba(5,3,9,.28) 54%, transparent 82%);
}
/* правая зона держит высоту композиции без контента */
/* динамическая строка */
@keyframes bdRot {
  0%,26%   { transform: translateY(0); }
  33%,59%  { transform: translateY(-30px); }
  66%,92%  { transform: translateY(-60px); }
  100%     { transform: translateY(-90px); }
}

/* ═══════════════════════════════════════════════════════════
   Lari — фирменный персонаж берётся как есть из style.css.
   Здесь только служебные состояния размещения, без перекраски.
   ═══════════════════════════════════════════════════════════ */
.bots-light .lari { z-index: 890; transition: opacity .45s ease; }
.bots-light .lari.lari--sleep { opacity: 0; pointer-events: none; }
.bots-light .lari.lari--parked { opacity: 0; pointer-events: none; }
.bots-light .lari.lari--compact .lari__bot { transform: scale(.86); transform-origin: center bottom; }

/* ── Мобильная реактивная статус-панель над симулятором ── */
.bd-laribar {
  display: none; align-items: center; gap: 12px;
  margin: 0 0 14px; padding: 11px 14px;
  border-radius: var(--bd-r);
  transition: border-color .3s ease, background .3s ease;
}
.bd-laribar__bot { position: relative; flex: 0 0 auto; width: 34px; height: 40px; }
.bd-laribar__bot .lari__antenna { height: 6px; width: 2px; }
.bd-laribar__bot .lari__antenna::after { width: 5px; height: 5px; top: -3px; }
.bd-laribar__bot .lari__head { top: 5px; width: 28px; height: 20px; border-radius: 9px; border-width: 1px; }
.bd-laribar__bot .lari__visor { top: 5px; width: 20px; height: 9px; border-radius: 5px; gap: 5px; }
.bd-laribar__bot .lari__eye { width: 3.5px; height: 3.5px; }
.bd-laribar__bot .lari__body { bottom: 2px; width: 22px; height: 16px; border-radius: 7px; border-width: 1px; }
.bd-laribar__bot .lari__body::after { top: 5px; width: 10px; height: 3px; }
.bd-laribar__txt { flex: 1; min-width: 0; }
.bd-laribar__txt b { display: block; font-size: 13px; color: var(--bd-ink); font-weight: 700; }
.bd-laribar__txt i { font-style: normal; font-size: 12px; color: var(--bd-ink-2); }
.bd-laribar__pips { display: flex; gap: 5px; flex: 0 0 auto; }
.bd-laribar__pips i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #DDD6FE; transition: background .3s, box-shadow .3s;
}
.bd-laribar__pips i.is-on { background: var(--bd-violet-3); box-shadow: 0 0 7px rgba(168,85,247,.9); }
.bd-laribar[data-state="typing"] { border-color: var(--bd-violet-2); }
.bd-laribar[data-state="thinking"] .lari__body::after { animation: bdCoreCalc .8s ease-in-out infinite; }
.bd-laribar[data-state="alert"] {
  border-color: rgba(5,150,105,.45);
  background: linear-gradient(120deg, rgba(5,150,105,.10), rgba(109,40,217,.06));
}
.bd-laribar[data-state="alert"] .lari__eye { background: var(--bd-ok); box-shadow: 0 0 7px rgba(5,150,105,.75); }
.bd-laribar[data-state="alert"] .bd-laribar__pips i { background: var(--bd-ok); box-shadow: 0 0 7px rgba(5,150,105,.55); }

@media (max-width: 767px) { .bd-laribar { display: flex; } }

@media (prefers-reduced-motion: reduce) {
  .bots-light .lari__bot::before,
  .bots-light .lari__wires path,
  .bots-light .lari.is-thinking .lari__body::after,
  .bots-light .lari.is-alert .lari__body::after,
  .bd-laribar[data-state="thinking"] .lari__body::after { animation: none !important; }
}


/* ── Lari как интерфейсный индикатор (дозированно) ── */
.bd-lari-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px 7px 8px; border-radius: 999px;
  background: var(--bd-surface); border: 1px solid var(--bd-line);
  font-size: 12px; font-weight: 600; color: var(--bd-ink-2);
}
.bd-lari-mini {
  position: relative; flex: 0 0 auto;
  width: 22px; height: 24px;
}
.bd-lari-mini__h {
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 13px; border-radius: 6px;
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(196,181,253,.7));
  border: 1px solid #D6CCF5;
}
.bd-lari-mini__h::after {
  content: ''; position: absolute; top: 3.5px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 5px; border-radius: 3px;
  background: linear-gradient(160deg, #3B2A63, #241640);
}
.bd-lari-mini__e {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 2.5px; display: flex; justify-content: space-between;
}
.bd-lari-mini__e i { width: 2.5px; height: 2.5px; border-radius: 50%; background: #C4B5FD; box-shadow: 0 0 4px rgba(168,85,247,.75); }
.bd-lari-mini__b {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 14px; height: 9px; border-radius: 4px;
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(196,181,253,.7));
  border: 1px solid #D6CCF5;
}
.bd-lari-mini__b::after {
  content: ''; position: absolute; top: 2.5px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #6D28D9, #A855F7);
  box-shadow: 0 0 5px rgba(168,85,247,.85);
}
.bd-lari-mini.is-live .bd-lari-mini__b::after { animation: bdLariBreath 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .bd-lari-mini__b::after { animation: none !important; }
}

/* ───────── Переключатель типов бота ───────── */
.bots-light .bd-types { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 28px; align-items: start; }
.bots-light .bd-types__list { display: flex; flex-direction: column; gap: 10px; }
.bots-light .bd-type {
  text-align: left; padding: 18px 20px; border-radius: var(--bd-r);
  background: var(--bd-surface); border: 1px solid var(--bd-line);
  color: var(--bd-ink-2); cursor: pointer; font-family: inherit;
  transition: border-color .25s, background .25s, transform .25s;
}
.bots-light .bd-type b { display: block; font-size: 16px; font-weight: 700; color: var(--bd-ink); margin-bottom: 4px; }
.bots-light .bd-type span { font-size: 13.5px; line-height: 1.5; }
.bots-light .bd-type:hover { border-color: var(--bd-line-2); transform: translateX(3px); }
.bots-light .bd-type.is-on {
  background: var(--bd-lav-soft); border-color: var(--bd-violet-2);
}
.bots-light .bd-type.is-on b { color: var(--bd-violet); }
.bots-light .bd-type__tag {
  display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 999px;
  background: rgba(5,150,105,.12); color: #047857; font-size: 11px; font-weight: 700;
}
/* Плашка «Подробнее» нужна только мобильному аккордеону */
.bots-light .bd-type__more { display: none; }
/* Лента тарифов — тоже: если событие matchMedia не пришло,
   на десктопе она всё равно не покажется. */
.bots-light .bd-pktabs { display: none; }
.bots-light .bd-types__view { min-height: 340px; }
.bots-light .bd-typeview { display: none; }
.bots-light .bd-typeview.is-on { display: block; animation: bdFade .35s ease; }
@keyframes bdFade { from { opacity: 0; transform: translateY(8px); } }
.bots-light .bd-typeview__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 14px; }
.bots-light .bd-mini {
  padding: 20px; border-radius: var(--bd-r); background: var(--bd-surface);
  border: 1px solid var(--bd-line);
}
.bots-light .bd-mini b { display: block; font-size: 14.5px; color: var(--bd-ink); margin-bottom: 6px; }
.bots-light .bd-mini span { font-size: 13px; color: var(--bd-ink-2); line-height: 1.5; }

/* ───────── СИМУЛЯТОР ───────── */
.bsim { --bsim-accent: #8B5CF6; }
.bsim__picker {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.bsim__picker::-webkit-scrollbar { display: none; }
.bsim__pick {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px; border-radius: 999px; cursor: pointer; font-family: inherit;
  background: var(--bd-surface); border: 1px solid var(--bd-line);
  color: var(--bd-ink-2); font-size: 13.5px; font-weight: 600;
  transition: background .22s, border-color .22s, color .22s;
}
.bsim__pick-ico { display: inline-flex; width: 16px; height: 16px; }
.bsim__pick-ico svg { width: 100%; height: 100%; }
.bsim__pick:hover { border-color: var(--bd-violet-2); color: var(--bd-ink); }
.bsim__pick.is-active { background: var(--bd-lav-soft); border-color: var(--bd-violet-2); color: var(--bd-violet); }

.bsim__tabs { display: none; gap: 8px; margin-bottom: 14px; }
.bsim__tab {
  flex: 1; min-height: 46px; border-radius: 999px; cursor: pointer; font-family: inherit;
  background: var(--bd-surface); border: 1px solid var(--bd-line);
  color: var(--bd-ink-2); font-size: 14px; font-weight: 700; position: relative;
}
.bsim__tab.is-active { background: var(--bd-lav-soft); border-color: var(--bd-violet-2); color: var(--bd-violet); }
.bsim__tab-dot {
  position: absolute; top: 10px; right: 14px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bd-ok); box-shadow: 0 0 8px rgba(52,211,153,.8);
}

.bsim__grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 18px; }
.bsim__pane {
  border-radius: var(--bd-r-lg); border: 1px solid var(--bd-line);
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* чат */
.bsim-chat__head { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--bd-line); }
.bsim-chat__avatar {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(139,92,246,.16); border: 1px solid var(--bd-line-2); color: var(--bsim-accent);
}
.bsim-chat__avatar svg { width: 18px; height: 18px; }
.bsim-chat__meta { display: flex; flex-direction: column; line-height: 1.25; }
.bsim-chat__name { font-size: 14.5px; font-weight: 700; color: var(--bd-ink); }
.bsim-chat__status { font-size: 11.5px; color: var(--bd-ok); font-style: normal; }
.bsim-chat__ch {
  margin-left: auto; padding: 5px 11px; border-radius: 999px;
  background: var(--bd-surface); border: 1px solid var(--bd-line);
  font-size: 11.5px; font-weight: 600; color: var(--bd-ink-2);
}
.bsim-chat__progress { height: 2px; background: var(--bd-lav-soft); }
.bsim-chat__progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--bd-violet), var(--bd-violet-3));
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
.bsim-chat__log {
  flex: 1; min-height: 300px; max-height: 380px; overflow-y: auto;
  padding: 18px; display: flex; flex-direction: column; gap: 9px;
  scrollbar-width: thin; scrollbar-color: rgba(168,139,250,.3) transparent;
}
.bsim-chat__log::-webkit-scrollbar { width: 5px; }
.bsim-chat__log::-webkit-scrollbar-thumb { background: rgba(168,139,250,.3); border-radius: 3px; }

.bsim-msg { display: flex; animation: bsimIn .34s cubic-bezier(.16,1,.3,1); }
@keyframes bsimIn { from { opacity: 0; transform: translateY(9px); } }
.bsim-msg__b { max-width: 84%; padding: 10px 14px; border-radius: 15px; font-size: 13.8px; line-height: 1.5; }
.bsim-msg--bot .bsim-msg__b {
  background: var(--bd-surface-2); border: 1px solid var(--bd-line);
  color: var(--bd-ink); border-bottom-left-radius: 5px;
}
.bsim-msg--user { justify-content: flex-end; }
.bsim-msg--user .bsim-msg__b {
  background: linear-gradient(135deg, var(--bd-violet-2), var(--bd-violet));
  color: #fff; border-bottom-right-radius: 5px;
}
.bsim-msg--typing .bsim-msg__b { display: flex; gap: 4px; padding: 13px 15px; }
.bsim-msg--typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--bd-ink-3);
  animation: bsimDot 1.3s ease-in-out infinite;
}
.bsim-msg--typing i:nth-child(2){animation-delay:.18s}
.bsim-msg--typing i:nth-child(3){animation-delay:.36s}
@keyframes bsimDot { 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-4px)} }

/* зона ввода */
.bsim-chat__input { padding: 0 18px 4px; }
.bsim-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.bsim-opts--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px,1fr)); }
.bsim-opt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-radius: 12px; cursor: pointer; font-family: inherit;
  background: var(--bd-surface); border: 1px solid var(--bd-line-2);
  color: var(--bd-ink); font-size: 13.5px; font-weight: 600; text-align: left;
  transition: background .2s, border-color .2s, transform .18s;
}
.bsim-opt i { font-style: normal; font-size: 12px; color: var(--bd-ink-3); }
.bsim-opt:hover { background: rgba(139,92,246,.16); border-color: var(--bd-violet-2); }
.bsim-opt:active { transform: scale(.97); }
.bsim-opt.is-on { background: var(--bd-lav-soft); border-color: var(--bd-violet-2); color: var(--bd-violet); }
.bsim-opt.is-on::after { content: '✓'; margin-left: 2px; }

.bsim-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px,1fr)); gap: 8px; }
.bsim-cal__d {
  padding: 10px 6px; border-radius: 12px; cursor: pointer; font-family: inherit;
  background: var(--bd-surface); border: 1px solid var(--bd-line-2); text-align: center;
  transition: background .2s, border-color .2s;
}
.bsim-cal__d b { display: block; font-size: 13.5px; color: var(--bd-ink); font-weight: 700; }
.bsim-cal__d i { font-style: normal; font-size: 11px; color: var(--bd-ink-3); }
.bsim-cal__d:hover { background: rgba(139,92,246,.16); border-color: var(--bd-violet-2); }

.bsim-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
.bsim-cat__i {
  position: relative; padding: 12px; border-radius: 14px;
  background: var(--bd-surface); border: 1px solid var(--bd-line);
}
.bsim-cat__ph {
  display: block; height: 54px; border-radius: 9px; margin-bottom: 9px;
  background: linear-gradient(135deg, #EDE9FE, #F5F1FF);
}
.bsim-cat__i b { display: block; font-size: 13px; color: var(--bd-ink); font-weight: 700; }
.bsim-cat__i i { font-style: normal; font-size: 12.5px; color: var(--bd-violet-3); font-weight: 700; }
.bsim-cat__i.is-on { border-color: var(--bd-violet-2); background: var(--bd-lav-soft); }
.bsim-cat__add {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px;
  border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 14px;
  background: var(--bd-violet); border: 1px solid var(--bd-violet); color: #fff;
}

.bsim-form { display: flex; gap: 8px; }
.bsim-input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 15px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid var(--bd-line-2);
  color: var(--bd-ink); font-size: 16px; font-family: inherit;
}
.bsim-input::placeholder { color: var(--bd-ink-3); }
.bsim-input:focus { outline: none; border-color: var(--bd-violet-2); box-shadow: 0 0 0 3px rgba(139,92,246,.22); }
.bsim-input.is-err { border-color: #DC2626; }
.bsim-err { display: block; min-height: 16px; font-size: 12px; color: #B91C1C; padding-top: 5px; }

.bsim-send {
  min-height: 46px; padding: 0 20px; border-radius: 12px; cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, var(--bd-violet-2), var(--bd-violet));
  border: 0; color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: opacity .2s, transform .18s;
}
.bsim-send:disabled { opacity: .4; cursor: not-allowed; }
.bsim-send:not(:disabled):active { transform: scale(.97); }
.bsim-send--go { width: 100%; margin-top: 12px; }
.bsim-skip {
  display: block; margin: 9px auto 0; padding: 7px 14px; border-radius: 999px;
  background: none; border: 1px solid var(--bd-line); color: var(--bd-ink-3);
  font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.bsim-skip:hover { color: var(--bd-ink); border-color: var(--bd-line-2); }

.bsim-file__btn {
  width: 100%; min-height: 52px; border-radius: 14px; cursor: pointer; font-family: inherit;
  background: var(--bd-surface); border: 1px dashed var(--bd-line-2);
  color: var(--bd-ink-2); font-size: 13.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.bsim-file__btn svg { width: 17px; height: 17px; }
.bsim-file__btn:hover { border-color: var(--bd-violet-2); color: var(--bd-violet); }

.bsim-calc { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 12px;
  background: var(--bd-surface); border: 1px solid var(--bd-line); color: var(--bd-ink-2); font-size: 13.5px; }
.bsim-calc__spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(168,139,250,.25); border-top-color: var(--bd-violet-3);
  animation: bsimSpin .8s linear infinite;
}
@keyframes bsimSpin { to { transform: rotate(360deg); } }

.bsim-confirm { padding: 14px; border-radius: 14px; background: var(--bd-surface); border: 1px solid var(--bd-line-2); }
.bsim-confirm__rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--bd-line); }
.bsim-confirm__rows > div:last-child { border-bottom: 0; }
.bsim-confirm__rows dt { font-size: 12.5px; color: var(--bd-ink-3); margin: 0; }
.bsim-confirm__rows dd { font-size: 13px; color: var(--bd-ink); font-weight: 600; margin: 0; text-align: right; }

.bsim-done {
  padding: 20px; border-radius: 16px; text-align: center;
  background: rgba(5,150,105,.08); border: 1px solid rgba(5,150,105,.28);
}
.bsim-done__ic {
  display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 10px;
  border-radius: 50%; background: var(--bd-ok); color: #fff; font-size: 20px; font-weight: 900;
}
.bsim-done b { display: block; font-size: 15.5px; color: #065F46; margin-bottom: 5px; }
.bsim-done i { font-style: normal; font-size: 13px; color: var(--bd-ink-2); }

.bsim-chat__foot {
  display: flex; gap: 10px; justify-content: space-between; align-items: center;
  padding: 12px 18px 16px; border-top: 1px solid var(--bd-line); margin-top: 10px;
}
.bsim-chat__back, .bsim-chat__restart {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: 12.5px; color: var(--bd-ink-3); padding: 6px 4px;
}
.bsim-chat__back:hover, .bsim-chat__restart:hover { color: var(--bd-violet-3); }

/* панель бизнеса */
.bsim-biz__head { display: flex; align-items: center; gap: 9px; padding: 15px 18px; border-bottom: 1px solid var(--bd-line); }
.bsim-biz__head b { font-size: 14.5px; color: var(--bd-ink); }
.bsim-biz__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bd-ok); box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: bdPulse 2s ease-out infinite; }
.bsim-biz__live { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--bd-lav-soft); border: 1px solid var(--bd-line-2); font-size: 11px; font-weight: 700; color: var(--bd-violet); }
.bsim-biz__card { padding: 18px; }
.bsim-biz__status {
  padding: 10px 14px; border-radius: 11px; font-size: 13px; font-weight: 700; margin-bottom: 14px;
  background: var(--bd-surface); border: 1px solid var(--bd-line); color: var(--bd-ink-3);
  transition: background .3s, color .3s, border-color .3s;
}
.bsim-biz__status[data-state="new"] { background: var(--bd-lav-soft); border-color: var(--bd-violet-2); color: var(--bd-violet); }
.bsim-biz__status[data-state="done"] { background: rgba(5,150,105,.10); border-color: rgba(5,150,105,.34); color: #065F46; }
.bsim-biz__rows { margin: 0; }
.bsim-biz__row {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--bd-line);
  transition: background .35s;
}
.bsim-biz__row dt { font-size: 12.5px; color: var(--bd-ink-3); margin: 0; }
.bsim-biz__row dd { font-size: 13.2px; color: var(--bd-ink-3); font-weight: 600; margin: 0; text-align: right; }
.bsim-biz__row.is-filled dd { color: var(--bd-ink); }
.bsim-biz__row.is-flash { background: rgba(139,92,246,.14); border-radius: 8px; }
.bsim-biz__actions { display: flex; gap: 8px; margin-top: 14px; }
.bsim-biz__btn {
  flex: 1; text-align: center; padding: 10px; border-radius: 11px; font-size: 12.5px; font-weight: 700;
  background: var(--bd-surface); border: 1px solid var(--bd-line); color: var(--bd-ink-3);
}
.bsim-biz__btn--main { background: var(--bd-lav-soft); border-color: var(--bd-violet-2); color: var(--bd-violet); }
.bsim-biz__feed { list-style: none; margin: 0; padding: 0 18px 18px; display: flex; flex-direction: column; gap: 7px; }
.bsim-biz__ev {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--bd-ink-2);
  animation: bsimIn .34s cubic-bezier(.16,1,.3,1);
}
.bsim-biz__ev span { width: 6px; height: 6px; border-radius: 50%; background: var(--bd-ink-3); flex: 0 0 auto; }
.bsim-biz__ev.is-ok span { background: var(--bd-ok); box-shadow: 0 0 7px rgba(52,211,153,.7); }
.bsim-biz__ev.is-muted { color: var(--bd-ink-3); }

/* ───────── Ниши ───────── */
.bots-light .bd-niche__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.bots-light .bd-niche__t {
  padding: 10px 15px; border-radius: 999px; cursor: pointer; font-family: inherit;
  background: var(--bd-surface); border: 1px solid var(--bd-line);
  color: var(--bd-ink-2); font-size: 13.5px; font-weight: 600;
}
.bots-light .bd-niche__t.is-on { background: var(--bd-lav-soft); border-color: var(--bd-violet-2); color: var(--bd-violet); }
.bots-light .bd-niche__body { display: none; }
.bots-light .bd-niche__body.is-on { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 16px; animation: bdFade .35s ease; }

/* ───────── Возможности / поток ───────── */
.bots-light .bd-chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-bottom: 34px; }
.bots-light .bd-chain__n {
  padding: 11px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--bd-violet);
  background: var(--bd-lav-soft); border: 1px solid var(--bd-line-2);
}
.bots-light .bd-chain__a { color: var(--bd-violet-3); font-size: 16px; }
.bots-light .bd-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 16px; }
.bots-light .bd-cap {
  display: flex; gap: 11px; align-items: flex-start; padding: 18px 20px;
  border-radius: var(--bd-r); background: var(--bd-surface); border: 1px solid var(--bd-line);
  transition: border-color .25s, transform .25s;
}
.bots-light .bd-cap:hover { border-color: var(--bd-line-2); transform: translateY(-3px); }
.bots-light .bd-cap__i {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(139,92,246,.16); color: var(--bd-violet-3);
}
.bots-light .bd-cap__i svg { width: 16px; height: 16px; }
.bots-light .bd-cap b { display: block; font-size: 14px; color: var(--bd-ink); margin-bottom: 3px; }
.bots-light .bd-cap span { font-size: 12.8px; color: var(--bd-ink-2); line-height: 1.5; }

/* ───────── Каналы ───────── */
/* Каналы: тёмное стекло + свой акцент у каждого канала.
   --ch задаёт цвет пиктограммы, свечения и рамки при наведении. */
/* Компактная сетка, а не длинная лента: 3 колонки, блок по центру. */
.bots-light .bd-ch {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px;
  max-width: 1120px; margin-inline: auto;
}
.bots-light .bd-ch__i {
  --ch: var(--bd-violet-3);
  display: flex; align-items: center; gap: 13px;
  min-height: 68px; padding: 13px 15px;
  border-radius: 17px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
  text-align: left;
  transition: background .24s, border-color .24s, transform .24s, box-shadow .24s;
}
.bots-light .bd-ch__t { min-width: 0; }
.bots-light .bd-ch__i b {
  display: block; font-size: 15.5px; line-height: 1.25;
  color: var(--bd-ink); margin: 0 0 3px;
}
/* только подпись: .bd-ch__ic — тоже span, ему нужен акцентный цвет */
.bots-light .bd-ch__t span { display: block; font-size: 12.8px; line-height: 1.35; color: var(--bd-ink-2); }
.bots-light .bd-ch__ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ch) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ch) 30%, transparent);
  color: var(--ch);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ch) 22%, transparent);
  transition: box-shadow .24s, background .24s;
}
.bots-light .bd-ch__ic svg { width: 21px; height: 21px; }
.bots-light .bd-ch__i:hover,
.bots-light .bd-ch__i:focus-within {
  background: rgba(255,255,255,.06);
  border-color: color-mix(in srgb, var(--ch) 42%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--ch) 18%, transparent);
}
.bots-light .bd-ch__i:hover .bd-ch__ic {
  background: color-mix(in srgb, var(--ch) 26%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ch) 34%, transparent);
}
.bots-light .bd-ch__i:active { transform: translateY(-1px); }

/* Акценты каналов: разный тон в пределах фиолетово-синей палитры страницы */
.bots-light .bd-ch__i--tg   { --ch: #38BDF8 }
.bots-light .bd-ch__i--max  { --ch: #A78BFA }
.bots-light .bd-ch__i--vk   { --ch: #6366F1 }
.bots-light .bd-ch__i--site { --ch: #22D3EE }
.bots-light .bd-ch__i--crm  { --ch: #34D399 }
.bots-light .bd-ch__i--book { --ch: #FBBF24 }
.bots-light .bd-ch__i--pay  { --ch: #FB7185 }
.bots-light .bd-ch__i--bell { --ch: #E879F9 }

/* Запасной вариант там, где color-mix() недоступен */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .bots-light .bd-ch__ic { background: rgba(139,92,246,.16); border-color: rgba(139,92,246,.3); box-shadow: none; }
  .bots-light .bd-ch__i:hover { border-color: var(--bd-line-2); box-shadow: 0 18px 40px rgba(0,0,0,.3); }
}

/* ~900–1200px: 2 колонки */
@media (max-width: 1200px) { .bots-light .bd-ch { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; } }

/* Mobile: аккуратная сетка 2×N вместо длинной ленты */
@media (max-width: 767px) {
  .bots-light .bd-ch { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; max-width: none; }
  .bots-light .bd-ch__i { min-height: 70px; }
  .bots-light .bd-ch__i:hover { transform: none; }
  /* длинные названия («Уведомления», «Онлайн-запись») переносятся,
     а не выходят за карточку, чтобы сохранить 2 колонки на узких экранах */
  .bots-light .bd-ch__i b { overflow-wrap: anywhere; }
}

/* Очень узкие экраны: одна колонка, чтобы подписи не ломались */
@media (max-width: 339px) {
  .bots-light .bd-ch { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bots-light .bd-ch__i, .bots-light .bd-ch__ic { transition: none; }
  .bots-light .bd-ch__i:hover, .bots-light .bd-ch__i:active { transform: none; }
}

/* ───────── Владение ботом ───────── */
.bots-light .bd-own {
  border-radius: var(--bd-r-lg); padding: 40px;
  background: linear-gradient(150deg, rgba(255,255,255,.06), rgba(139,92,246,.10));
  border: 1px solid var(--bd-line);
  box-shadow: var(--bd-shadow-sm);
}
.bots-light .bd-own__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 12px; margin-top: 22px; }
.bots-light .bd-own__i { display: flex; gap: 10px; align-items: flex-start; font-size: 13.8px; color: var(--bd-ink); line-height: 1.5; }
.bots-light .bd-own__i::before { content: '✓'; color: var(--bd-ok); font-weight: 900; flex: 0 0 auto; }
.bots-light .bd-own__legal { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bd-line); font-size: 12.8px; color: var(--bd-ink-3); line-height: 1.55; }

/* ───────── Интеграции ───────── */
.bots-light .bd-int { display: flex; flex-wrap: wrap; gap: 9px; }
.bots-light .bd-int span {
  padding: 10px 16px; border-radius: 999px; font-size: 13.2px; font-weight: 600;
  background: var(--bd-surface); border: 1px solid var(--bd-line); color: var(--bd-ink-2);
}

/* ───────── Pipeline ───────── */
.bots-light .bd-pipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 12px; counter-reset: p; }
.bots-light .bd-pipe__s {
  position: relative; padding: 20px 18px; border-radius: var(--bd-r);
  background: var(--bd-surface); border: 1px solid var(--bd-line);
}
.bots-light .bd-pipe__s::before {
  counter-increment: p; content: counter(p, decimal-leading-zero);
  font-family: 'Unbounded', sans-serif; font-size: 22px; font-weight: 800;
  color: var(--bd-violet-3); opacity: .5; display: block; margin-bottom: 8px;
}
.bots-light .bd-pipe__s b { display: block; font-size: 14.5px; color: var(--bd-ink); margin-bottom: 4px; }
.bots-light .bd-pipe__s span { font-size: 12.8px; color: var(--bd-ink-2); line-height: 1.5; }

/* ───────── Тарифы ───────── */
.bots-light .bd-price { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 16px; align-items: stretch; }
.bots-light .bd-pk {
  display: flex; flex-direction: column; padding: 24px; border-radius: var(--bd-r-lg);
  transition: border-color .28s, transform .28s;
}
.bots-light .bd-pk:hover { border-color: var(--bd-line-2); transform: translateY(-4px); }
.bots-light .bd-pk--pop {
  border-color: rgba(168,85,247,.5);
  background: linear-gradient(180deg, rgba(139,92,246,.16), rgba(88,28,190,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(168,85,247,.16), 0 30px 84px rgba(60,16,140,.42);
}
.bots-light .bd-pk__badge {
  align-self: flex-start; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
  background: var(--bd-violet); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em;
}
.bots-light .bd-pk__n { font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 700; color: var(--bd-ink); }
.bots-light .bd-pk__for { font-size: 13px; color: var(--bd-ink-2); margin-top: 5px; }
.bots-light .bd-pk__key { margin-top: 12px; padding: 10px 13px; border-radius: 11px; background: var(--bd-surface); border: 1px solid var(--bd-line); font-size: 13px; color: var(--bd-ink); }
.bots-light .bd-pk__p { font-family: 'Unbounded', sans-serif; font-size: 26px; font-weight: 800; color: var(--bd-ink); margin: 16px 0 4px; }
.bots-light .bd-pk__t { font-size: 12.5px; color: var(--bd-ink-3); display: flex; align-items: center; gap: 6px; }
.bots-light .bd-pk__t svg { width: 13px; height: 13px; }
.bots-light .bd-pk__more {
  margin-top: 16px; background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--bd-violet-3); font-size: 13px; font-weight: 700; text-align: left; padding: 4px 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.bots-light .bd-pk__more svg { width: 13px; height: 13px; transition: transform .25s; }
.bots-light .bd-pk__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.bots-light .bd-pk__body { display: none; margin-top: 10px; }
.bots-light .bd-pk__body.is-open { display: block; animation: bdFade .3s ease; }
.bots-light .bd-pk__body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.bots-light .bd-pk__body li { position: relative; padding-left: 19px; font-size: 13px; color: var(--bd-ink-2); line-height: 1.45; }
.bots-light .bd-pk__body li::before { content: '✓'; position: absolute; left: 0; color: var(--bd-violet-3); font-weight: 800; }
.bots-light .bd-pk__cta { margin-top: auto; padding-top: 18px; }
.bots-light .bd-pk__cta .bd-btn { width: 100%; }
/* display у .bd-btn перебивает атрибут hidden — возвращаем его силу,
   иначе «Перейти к заявке» видна до добавления пакета в проект */
.bots-light .bd-btn[hidden] { display: none; }
.bots-light .bd-price-note { margin-top: 18px; font-size: 13px; color: var(--bd-ink-3); line-height: 1.55; text-align: center; }

/* ───────── FAQ ───────── */
.bots-light .bd-faq { display: grid; gap: 10px; max-width: 900px; margin-inline: auto; }
.bots-light .bd-faq__i { border-radius: var(--bd-r); background: var(--bd-surface); border: 1px solid var(--bd-line); overflow: hidden; }
.bots-light .bd-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--bd-ink); font-size: 15px; font-weight: 600; text-align: left;
}
.bots-light .bd-faq__q svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--bd-violet-3); transition: transform .28s; }
.bots-light .bd-faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.bots-light .bd-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1); }
.bots-light .bd-faq__a.is-open { grid-template-rows: 1fr; }
.bots-light .bd-faq__a > div { overflow: hidden; }
.bots-light .bd-faq__a p { margin: 0; padding: 0 20px 18px; font-size: 14px; line-height: 1.62; color: var(--bd-ink-2); }

/* ───────── Финальный CTA ───────── */
/* Единственный насыщенный блок на странице — работает как акцент,
   поэтому внутри него текст белый. */
.bots-light .bd-final {
  border-radius: var(--bd-r-lg); padding: 48px 40px; text-align: center;
  background: linear-gradient(150deg, #6D28D9 0%, #7C3AED 46%, #A855F7 100%);
  border: 0;
  box-shadow: 0 18px 52px rgba(109,40,217,.28);
}
.bots-light .bd-final .bd-h2 { color: #fff; }
.bots-light .bd-final .bd-sub { color: rgba(255,255,255,.88); }
.bots-light .bd-final .bd-eyebrow {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.30); color: #fff;
}
.bots-light .bd-final .bd-hl,
.bots-light .bd-final .bd-hl-s { color: #EDE9FE; }
.bots-light .bd-final .bd-btn--ghost {
  background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.42);
}
.bots-light .bd-final .bd-btn--ghost:hover { background: rgba(255,255,255,.24); border-color: #fff; }
.bots-light .bd-final .bd-btn--main { background: #fff; color: var(--bd-violet); box-shadow: 0 10px 26px rgba(46,16,101,.24); }
.bots-light .bd-final .bd-btn--main:hover { background: #F5F1FF; box-shadow: 0 14px 34px rgba(46,16,101,.30); }
.bots-light .bd-final .bd-price-note { color: rgba(255,255,255,.80); }
.bots-light .bd-final a:not(.bd-btn) { color: #EDE9FE; text-decoration: underline; }
.bots-light .bd-final__opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 26px 0; }
.bots-light .bd-final__o {
  padding: 11px 17px; border-radius: 999px; cursor: pointer; font-family: inherit;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.38);
  color: #fff; font-size: 13.5px; font-weight: 600;
  transition: background .2s, border-color .2s;
}
.bots-light .bd-final__o:hover { background: rgba(255,255,255,.24); }
.bots-light .bd-final__o.is-on { background: rgba(255,255,255,.92); color: #2E1065; border-color: rgba(255,255,255,.92); }

/* ───────── Подсказка к переключателю ниш симулятора ─────────
   Лента ниш прокручивается вбок, и это неочевидно на телефоне.
   Подпись + стрелка объясняют оба действия: листать и выбрать. */
.bots-light .bd-simhint {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--bd-ink-2);
}
.bots-light .bd-simhint b { color: var(--bd-ink); font-weight: 700; }

/* Формулировка по раскладке: до 768px панели становятся вкладками */
.bots-light .bd-only-mob { display: none; }
@media (max-width: 767px) {
  .bots-light .bd-only-desk { display: none; }
  .bots-light .bd-only-mob { display: inline; }
}
.bots-light .bd-simhint__swipe {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 11px; border-radius: 999px;
  background: var(--bd-lav-soft); border: 1px solid rgba(168,85,247,.34);
  color: var(--bd-violet-3); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.bots-light .bd-simhint__swipe svg { width: 13px; height: 13px; animation: bdSwipe 1.9s ease-in-out infinite; }
@keyframes bdSwipe { 0%,100% { transform: translateX(0); opacity: .75 } 50% { transform: translateX(4px); opacity: 1 } }
/* ══════════════ АДАПТИВ ══════════════ */
@media (max-width: 1100px) {
  .bots-light .bd-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .bots-light .bd-types { grid-template-columns: 1fr; }
  .bots-light .bd-types__list { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .bots-light .bd-types__list::-webkit-scrollbar { display: none; }
  .bots-light .bd-type { flex: 0 0 240px; }
}

@media (max-width: 900px) {
  .bsim__grid { grid-template-columns: 1fr; }
  .bsim__tabs { display: flex; }
  .bsim__pane { display: none; }
  .bsim__pane.is-active { display: flex; }
}

@media (max-width: 767px) {
  .bots-light .bd-section { padding: 56px 0; }
  .bots-light .bd-container { width: min(1180px, 100% - 32px); }
  .bots-light .bd-hero { padding: 60px 0 48px; }
  .bots-light .bd-h2 { font-size: 25px; }
  .bots-light .bd-sub { font-size: 15px; }
  .bots-light .bd-hero__btns .bd-btn { width: 100%; }
  .bots-light .bd-own { padding: 26px 20px; }
  .bots-light .bd-final { padding: 32px 20px; }
  .bots-light .bd-pk { padding: 22px; }
  .bots-light .bd-chain { gap: 7px; }
  .bots-light .bd-chain__n { padding: 9px 13px; font-size: 12.5px; }
  .bsim-chat__log { min-height: 260px; max-height: 320px; }
}

/* ═══════════ MOBILE: типы ботов как аккордеон ═══════════
   На узком экране три карточки + отдельная панель описания дают
   очень длинный блок. Здесь кнопка и её описание становятся
   соседями (display: contents + order), поэтому раскрытие идёт
   прямо под нажатой плашкой. Разметка и контент те же. */
@media (max-width: 900px) {
  .bots-light .bd-types { display: flex; flex-direction: column; gap: 10px; }
  .bots-light .bd-types__list,
  .bots-light .bd-types__view { display: contents; }

  .bots-light .bd-type[data-type-btn="script"]      { order: 1 }
  .bots-light .bd-typeview[data-type-view="script"] { order: 2 }
  .bots-light .bd-type[data-type-btn="ai"]          { order: 3 }
  .bots-light .bd-typeview[data-type-view="ai"]     { order: 4 }
  .bots-light .bd-type[data-type-btn="hybrid"]      { order: 5 }
  .bots-light .bd-typeview[data-type-view="hybrid"] { order: 6 }

  /* Плашка: только название + «Подробнее». Описание живёт в раскрытии. */
  .bots-light .bd-type {
    flex: none; width: 100%; display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px 10px; padding: 15px 17px; min-height: 56px;
  }
  .bots-light .bd-type:hover { transform: none; }
  .bots-light .bd-type > b { margin: 0; flex: 1 1 auto; font-size: 15.5px; }
  .bots-light .bd-type > span { display: none; }
  .bots-light .bd-type__tag { margin: 0; order: 3; flex: 1 0 100%; align-self: flex-start; }
  .bots-light .bd-type__more {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--bd-violet-3);
  }
  .bots-light .bd-type__more u { text-decoration: none; }
  .bots-light .bd-type__more svg { width: 14px; height: 14px; transition: transform .28s cubic-bezier(.22,.6,.2,1); }
  .bots-light .bd-type.is-on .bd-type__more svg { transform: rotate(180deg); }
  .bots-light .bd-type.is-on .bd-type__more { color: var(--bd-violet); }

  /* Раскрытие пристыковано к своей плашке */
  .bots-light .bd-types__view { min-height: 0; }
  .bots-light .bd-typeview.is-on {
    margin: -6px 0 4px; padding: 4px 4px 0;
    border-left: 0;
  }
  .bots-light .bd-typeview > .bd-h2 { display: none; }        /* дублирует название плашки */
  .bots-light .bd-typeview > .bd-sub { margin-bottom: 14px !important; font-size: 14.5px; }
  .bots-light .bd-typeview__grid { grid-template-columns: 1fr; gap: 8px; }
  .bots-light .bd-mini { padding: 14px 16px; }
}

/* ═══════════ MOBILE: тарифы — лента плашек + карточка ═══════════
   Строит bots-page.js (initPricingMobile). Все четыре карточки
   остаются в DOM, показывается выбранная. */
@media (max-width: 767px) {
  .bots-light .bd-pktabs.bd-pktabs { /* перекрывает базовое display:none */
    display: flex; gap: 8px; overflow-x: auto;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -12px 16px; padding: 4px 16px 10px;
  }
  .bots-light .bd-pktabs::-webkit-scrollbar { display: none; }
  .bots-light .bd-pktab {
    flex: 0 0 auto; scroll-snap-align: center; cursor: pointer; font-family: inherit;
    min-width: 138px; min-height: 66px; text-align: left;
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    padding: 11px 15px; border-radius: 16px;
    background: var(--bd-surface); border: 1px solid var(--bd-line);
    transition: background .24s, border-color .24s, box-shadow .24s, transform .24s;
  }
  .bots-light .bd-pktab b {
    font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; color: var(--bd-ink);
  }
  .bots-light .bd-pktab i {
    font-style: normal; font-family: 'Unbounded', sans-serif;
    font-size: 12.5px; font-weight: 700; color: var(--bd-ink-2); white-space: nowrap;
  }
  .bots-light .bd-pktab em {
    font-style: normal; margin-top: 2px; font-size: 10.5px; font-weight: 800;
    letter-spacing: .03em; color: var(--bd-violet-3);
  }
  /* выбранный пакет читается однозначно */
  .bots-light .bd-pktab.is-on {
    background: linear-gradient(135deg, var(--bd-violet-2), var(--bd-violet));
    border-color: transparent; transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(109,40,217,.42);
  }
  .bots-light .bd-pktab.is-on b,
  .bots-light .bd-pktab.is-on i,
  .bots-light .bd-pktab.is-on em { color: #fff; }

  /* Карточка выбранного пакета */
  .bots-light .bd-price--mob { display: block; }
  .bots-light .bd-price--mob .bd-pk { display: none; }
  .bots-light .bd-price--mob .bd-pk.is-shown { display: flex; animation: bdFade .32s ease; }
  .bots-light .bd-price--mob .bd-pk.is-shown {
    border-color: rgba(168,85,247,.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 60px rgba(60,16,140,.36);
  }
  .bots-light .bd-price--mob .bd-pk__p { font-size: 30px; }
  /* состав раскрыт сразу — плашка уже была выбором */
  .bots-light .bd-price--mob .bd-pk__more { display: none; }

  /* правый край ленты ниш растворяется — видно, что есть продолжение */
  .bots-light .bsim__picker {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 86%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 86%, transparent 100%);
  }
}

/* ═══════════ MOBILE: симулятор — только сценарий клиента ═══════════
   Вкладки «Клиент»/«Бизнес» скрыты: лишний шаг на телефоне.
   Разметка и JS симулятора не меняются — только отображение. */
@media (max-width: 767px) {
  .bots-light .bsim__tabs { display: none; }
  .bots-light .bsim .bsim__pane--biz { display: none; }
  .bots-light .bsim .bsim__pane--client { display: flex; }

  /* Сценарий — главный объект секции */
  .bots-light .bsim .bsim__pane--client {
    position: relative; overflow: hidden;
    margin-top: 18px; padding: 19px;
    border-radius: 23px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(168,85,247,.32);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.04),
      0 20px 60px rgba(0,0,0,.32),
      0 0 36px rgba(124,58,237,.14);
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
  }
  /* Заголовок блока: label + инструкция.
     Псевдоэлементы — flex-элементы, поэтому order поднимает их наверх
     и каждый можно оформить отдельно. */
  .bots-light .bsim__pane--client::before {
    content: 'Сценарий клиента';
    order: -2; align-self: flex-start;
    padding: 5px 11px; margin-bottom: 8px; border-radius: 999px;
    background: rgba(124,58,237,.18); border: 1px solid rgba(168,85,247,.32);
    font-size: 11px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--bd-violet-3);
  }
  .bots-light .bsim__pane--client::after {
    content: 'Попробуйте сценарий — нажимайте на варианты ответа.';
    order: -1; margin-bottom: 13px;
    font-size: 13px; line-height: 1.45; color: var(--bd-ink-2);
  }

  /* Шапка сценария: тонкий фиолетовый разделитель */
  .bots-light .bsim-chat__head {
    padding: 0 0 13px; margin-bottom: 2px;
    border-bottom: 1px solid rgba(168,85,247,.26);
  }
  .bots-light .bsim-chat__progress { margin: 0 -19px; }
  /* лог не растягивает карточку пустотой */
  .bots-light .bsim-chat__log { padding: 15px 0 4px; gap: 11px; min-height: 150px; max-height: 330px; }
  .bots-light .bsim-chat__input { padding: 0 0 4px; }
  .bots-light .bsim-chat__foot { padding-left: 0; padding-right: 0; }

  /* Сообщения читаемее */
  .bots-light .bsim-msg__b { font-size: 15px; line-height: 1.5; max-width: 88%; }
  .bots-light .bsim-msg--bot .bsim-msg__b {
    background: rgba(124,58,237,.12); border-color: rgba(255,255,255,.08);
  }
  .bots-light .bsim-msg--user .bsim-msg__b {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
    color: var(--bd-ink);
  }

  /* лента ниш симулятора — touch target ≥ 42px */
  .bots-light .bsim__pick { min-height: 42px; }

  /* Варианты ответа — стеклянные pill, а не текст */
  .bots-light .bsim-opts { gap: 9px; }
  .bots-light .bsim-opt {
    min-height: 44px; padding: 11px 16px; font-size: 14.5px;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(168,85,247,.3);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }
  .bots-light .bsim-opt.is-on,
  .bots-light .bsim-opt:active {
    background: rgba(124,58,237,.3); border-color: rgba(196,181,253,.55); color: #fff;
    box-shadow: 0 0 20px rgba(124,58,237,.4);
  }
}

/* ═══════════ MOBILE: ниши — лента + одна общая карточка ═══════════ */
@media (max-width: 767px) {
  /* секция сжата: лента вместо девяти плашек в несколько рядов */
  .bots-light #bot-niches { padding: 44px 0; }
  .bots-light #bot-niches .bd-head { margin-bottom: 16px; }
  .bots-light #bot-niches .bd-head .bd-sub { margin-top: 10px; }
  .bots-light .bd-nichehint { margin-bottom: 6px; }
  .bots-light .bd-niche__tabs {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    gap: 8px; margin-bottom: 12px; padding-bottom: 6px;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  }
  .bots-light .bd-niche__tabs::-webkit-scrollbar { display: none; }
  .bots-light .bd-niche__t {
    flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start;
    min-height: 44px; padding: 11px 16px; font-size: 14px;
  }
  .bots-light .bd-niche__t.is-on {
    background: linear-gradient(135deg, var(--bd-violet-2), var(--bd-violet));
    border-color: transparent; color: #fff;
    box-shadow: 0 8px 22px rgba(109,40,217,.4);
  }

  /* Три карточки превращаются в одну стеклянную с нумерацией 01–03 */
  .bots-light .bd-niche__body.is-on {
    display: block; counter-reset: nb;
    padding: 2px 16px 14px; border-radius: 22px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(168,85,247,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 54px rgba(0,0,0,.3);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
  }
  .bots-light .bd-niche__body .bd-mini {
    background: none; border: 0; border-radius: 0; padding: 11px 0 0;
    display: grid; grid-template-columns: 30px 1fr; column-gap: 10px;
  }
  .bots-light .bd-niche__body .bd-mini + .bd-mini { border-top: 1px solid rgba(255,255,255,.08); }
  .bots-light .bd-niche__body .bd-mini::before {
    counter-increment: nb; content: counter(nb, decimal-leading-zero);
    grid-row: 1 / span 2;
    font-size: 12px; font-weight: 800; color: var(--bd-violet-3); padding-top: 2px;
  }
  .bots-light .bd-niche__body .bd-mini b { margin-bottom: 3px; font-size: 14.5px; }
  .bots-light .bd-niche__body .bd-mini span { grid-column: 2; font-size: 13.5px; }
}

/* ═══════════ MOBILE: возможности — 4 основные + раскрытие ═══════════ */
/* базовое правило обязано идти ДО медиа-блока, иначе перебьёт его */
.bots-light .bd-caps__more { display: none; }
@media (max-width: 767px) {
  .bots-light .bd-chain .bd-only-mob { display: inline-flex; }
  .bots-light .bd-caps { display: flex; flex-direction: column; gap: 10px; }
  .bots-light .bd-cap--main  { order: 1; }
  .bots-light .bd-cap--extra { order: 2; display: none; padding: 14px 16px; background: rgba(255,255,255,.022); }
  .bots-light .bd-caps.is-open .bd-cap--extra { display: flex; animation: bdFade .3s ease; }
  .bots-light .bd-cap--extra b { font-size: 14px; }
  .bots-light .bd-caps__more {
    order: 3; align-self: stretch;
    min-height: 46px; margin-top: 4px; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: rgba(255,255,255,.045); border: 1px solid rgba(168,85,247,.3);
    color: var(--bd-violet-3);
  }
  .bots-light .bd-caps__more svg { width: 14px; height: 14px; transition: transform .28s; }
  .bots-light .bd-caps.is-open .bd-caps__more svg { transform: rotate(180deg); }
}

/* ═══════════ MOBILE: раскрытый тариф — главный объект ═══════════ */
@media (max-width: 767px) {
  .bots-light .bd-price--mob .bd-pk.is-shown {
    position: relative; overflow: hidden;
    padding: 22px 20px; border-radius: 24px;
    background: linear-gradient(145deg,
      rgba(122,54,235,.18), rgba(255,255,255,.045) 45%, rgba(24,12,45,.72));
    border: 1px solid rgba(168,85,247,.38);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.035),
      0 24px 70px rgba(0,0,0,.38),
      0 0 42px rgba(124,58,237,.16);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    animation: bdPkIn .26s cubic-bezier(.22,.6,.2,1);
  }
  /* мягкое внутреннее свечение сверху */
  .bots-light .bd-price--mob .bd-pk.is-shown::before {
    content: ''; position: absolute; inset: -40% 20% auto -20%; height: 220px;
    background: radial-gradient(60% 60% at 50% 50%, rgba(168,85,247,.22), transparent 70%);
    pointer-events: none;
  }
  .bots-light .bd-price--mob .bd-pk.is-shown > * { position: relative; }

  .bots-light .bd-price--mob .bd-pk__n { font-size: 29px; line-height: 1.05; }
  .bots-light .bd-price--mob .bd-pk__for { font-size: 14.5px; margin-top: 8px; }
  .bots-light .bd-price--mob .bd-pk__key {
    margin-top: 14px; padding: 12px 14px; border-radius: 14px;
    background: rgba(255,255,255,.06); border-color: rgba(168,85,247,.26);
    font-size: 14px;
  }
  .bots-light .bd-price--mob .bd-pk__p { font-size: 40px; margin: 18px 0 6px; }
  .bots-light .bd-price--mob .bd-pk__t { color: rgba(255,255,255,.45); }

  .bots-light .bd-price--mob .bd-pk__body ul { gap: 11px; margin-top: 4px; }
  .bots-light .bd-price--mob .bd-pk__body li {
    padding-left: 30px; font-size: 14.5px; line-height: 1.45; color: var(--bd-ink);
  }
  .bots-light .bd-price--mob .bd-pk__body li::before {
    content: '✓'; top: 1px; width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; font-size: 11px; color: #fff;
    background: rgba(124,58,237,.85);
  }
  .bots-light .bd-price--mob .bd-pk__cta { padding-top: 22px; }
  .bots-light .bd-price--mob .bd-pk__cta .bd-btn { min-height: 52px; }
}
@keyframes bdPkIn { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 400px) {
  .bots-light .bd-container { width: min(1180px, 100% - 24px); }
  .bots-light .bd-hero__h1 { font-size: 27px; }
  .bsim-cat { grid-template-columns: 1fr 1fr; }
}

/* ══════════════ REDUCED MOTION ══════════════ */
@media (prefers-reduced-motion: reduce) {
  .bots-light .bd-rotator ul, .bsim-msg--typing i,
  .bsim-biz__dot, .bsim-calc__spin {
    animation: none !important;
  }
  .bots-light .bd-rotator { height: auto; }
  .bots-light .bd-rotator li:not(:first-child) { display: none; }
  .bsim-msg, .bsim-biz__ev { animation: none !important; }
  .bots-light .bd-btn:hover, .bots-light .bd-cap:hover, .bots-light .bd-pk:hover { transform: none; }
  .bots-light .bd-faq__a { transition: none; }
  .bots-light .bd-price--mob .bd-pk.is-shown { animation: none !important; }
  .bots-light .bd-simhint__swipe svg { animation: none !important; }
}

/* Клавиатурная доступность */
.bots-light :focus-visible {
  outline: 2px solid var(--bd-violet-3);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Реплика Lari в тёмной зоне: стекло вместо белого прямоугольника.
   Класс ставит bots-lari.js, пока Lari находится над dark-секциями. */
.bots-light .lari.is-on-dark .lari__bubble {
  max-width: 260px;
  border-radius: 16px;
  background: rgba(18, 10, 34, .72);
  border: 1px solid rgba(168, 85, 247, .38);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  color: rgba(255, 255, 255, .92);
}
.bots-light .lari.is-on-dark .lari__bubble-text { color: rgba(255, 255, 255, .92); }
.bots-light .lari.is-on-dark .lari__bubble::after {
  background: rgba(18, 10, 34, .72);
  border-color: rgba(168, 85, 247, .38);
}

/* Реплика Lari на странице ботов: мягче, чем базовые 0.22s */
.bots-light .lari__bubble {
  transition: opacity .4s cubic-bezier(.25,.6,.2,1), transform .4s cubic-bezier(.25,.6,.2,1);
}