/* ═══════════════════════════════════════════════════════════════════════
   VM Hub · «Видимость»: блоки vm-hub.ru поверх общей дизайн-системы (site.css, lead-band.css, pages.css).

   Цвета, шрифт и кривая - только токены site.css (--gradient, --plate, --hair, --ink, --muted, --accent,
   --good, --violet, --blue, --magenta) и --geo-text-grad из lead-band.css. Все классы с префиксом hb-:
   общие стили грузятся на каждой странице, общее слово в имени класса ломает чужой блок
   (правило new-class-name-must-not-collide-with-shared-css). Движение - transform и opacity, одна кривая
   cubic-bezier(.2,.8,.2,1); при «уменьшить движение» всё сразу в конечном виде.

   1. Шапка: подпись «Видимость» у названия.
   2. Первый экран главной: радар площадок и ответ нейросети.
   3. Боли «почему выбирают не вас».
   4. Где вас ищут: плитки площадок.
   5. Тарифы: переключатель срока.
   6. Внутренние страницы: макеты (чат нейросети, сообщество, канал), строка цены, Яндекс-мост, работа.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 1. Шапка ═══ */
.hb-brand-sub{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:.02em;vertical-align:2px;color:var(--accent);background:color-mix(in srgb,var(--violet) 12%,transparent)}
/* До 600 px строка шапки (логотип, пилюля, тема, меню) не вмещает подпись «Видимость» и длинную пилюлю:
   на 375-520 px меню уезжало за край на 9-27 px (замер 14.10.2026). Пилюля - просто «Проверить». */
@media (max-width:600px){.hb-brand-sub,.hb-cta-more{display:none}}

/* ═══ 2. Первый экран главной ═══ */
.hb-hero .gh-title{font-size:clamp(36px,5vw,66px)}
.hb-hero .lede{max-width:44ch}
.hb-find-note{margin:12px 0 0;font-size:13px;color:var(--muted)}
.hb-find-note b{color:var(--ink);font-weight:700}
.hb-hero-facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:22px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.hb-hero-facts li{display:inline-flex;align-items:center;gap:8px}
.hb-hero-facts li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gradient)}

/* Радар: компания в центре, площадки на двух орбитах. Подсветка по очереди - hub.js (.is-on), без JS всё
   подсвечено сразу (.hb-radar без .is-live), поэтому смысл виден и без скриптов. */
.hb-radar{position:relative;width:min(100%,560px);aspect-ratio:1/1;margin:0 auto;
  --r1:31%;--r2:46%}
.hb-radar-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hb-radar-rings circle{fill:none;stroke:var(--map-ring);stroke-width:1;vector-effect:non-scaling-stroke}
.hb-radar-rings circle.hb-dash{stroke-dasharray:3 7;opacity:.7}
.hb-radar-sweep{position:absolute;inset:4%;border-radius:50%;
  background:conic-gradient(from 0deg,color-mix(in srgb,var(--violet) 24%,transparent),transparent 22%,transparent);
  -webkit-mask:radial-gradient(circle,transparent 18%,#000 19%);mask:radial-gradient(circle,transparent 18%,#000 19%);
  animation:hb-spin 7s linear infinite;opacity:.55}
@keyframes hb-spin{to{transform:rotate(1turn)}}

.hb-core{position:absolute;left:50%;top:50%;width:min(44%,230px);transform:translate(-50%,-50%);z-index:2;
  background:var(--plate);border:1px solid var(--hair);border-radius:20px;padding:14px 14px 12px;box-shadow:var(--shadow-l)}
.hb-core-top{display:flex;align-items:center;gap:10px}
.hb-core-ava{flex:none;width:38px;height:38px;border-radius:12px;background:var(--gradient);display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:15px}
.hb-core-name{font-weight:800;font-size:14.5px;letter-spacing:-.01em;line-height:1.2}
.hb-core-kind{display:block;font-size:12px;color:var(--muted);font-weight:500}
.hb-core-score{margin-top:12px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.hb-core-score b{font-size:26px;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.hb-core-bar{margin-top:6px;height:6px;border-radius:999px;background:var(--hair-soft);overflow:hidden}
.hb-core-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--gradient);transform-origin:0 50%;
  transform:scaleX(var(--hb-score,.94));transition:transform .9s cubic-bezier(.2,.8,.2,1)}

.hb-chip{position:absolute;left:50%;top:50%;z-index:3;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:6px 10px 6px 7px;border-radius:999px;background:var(--plate);border:1px solid var(--hair);
  font-size:12.5px;font-weight:700;color:var(--ink);box-shadow:0 8px 20px rgba(15,18,38,.08);
  transform:translate(-50%,-50%) translate(var(--x),var(--y));
  transition:border-color .4s ease,box-shadow .4s ease,opacity .4s ease}
.hb-chip i{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  background:var(--hair-soft);color:var(--muted);transition:background-color .4s ease,color .4s ease}
.hb-chip i svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.hb-chip .hb-x{display:none}
.hb-radar.is-live .hb-chip:not(.is-on){opacity:.62}
.hb-radar.is-live .hb-chip:not(.is-on) i{background:color-mix(in srgb,var(--magenta) 14%,transparent);color:var(--magenta)}
.hb-radar.is-live .hb-chip:not(.is-on) .hb-x{display:block}
.hb-radar.is-live .hb-chip:not(.is-on) .hb-v{display:none}
.hb-chip.is-on,.hb-radar:not(.is-live) .hb-chip{border-color:color-mix(in srgb,var(--violet) 55%,var(--hair));
  box-shadow:0 10px 26px color-mix(in srgb,var(--violet) 22%,transparent)}
.hb-chip.is-on i,.hb-radar:not(.is-live) .hb-chip i{background:color-mix(in srgb,var(--good) 24%,transparent);color:#1f8a5a}
.hb-chip.hb-ai-chip{background:color-mix(in srgb,var(--violet) 7%,var(--plate))}
/* Место площадки на радаре: --x/--y - сдвиг от центра в процентах ширины радара (он квадратный, поэтому
   left и top в процентах считаются от одной стороны). Ближняя орбита - площадки и соцсети, дальняя - нейросети.
   Переводом (translate) в процентах это не сделать: проценты translate - от размера самой плашки. */
.hb-chip{left:calc(50% + var(--x,0%));top:calc(50% + var(--y,0%));transform:translate(-50%,-50%)}
.hb-chip[data-p="google"]{--x:0%;--y:-30%}
.hb-chip[data-p="gis"]{--x:28%;--y:-17%}
.hb-chip[data-p="zoon"]{--x:28%;--y:17%}
.hb-chip[data-p="prodoc"]{--x:0%;--y:30%}
.hb-chip[data-p="vk"]{--x:-28%;--y:17%}
.hb-chip[data-p="tg"]{--x:-28%;--y:-17%}
.hb-chip[data-p="gpt"]{--x:-22%;--y:-40%}
.hb-chip[data-p="alice"]{--x:22%;--y:-40%}
.hb-chip[data-p="giga"]{--x:30%;--y:36%}
.hb-chip[data-p="deep"]{--x:-30%;--y:36%}

/* Ответ нейросети под радаром */
.hb-answer{position:relative;z-index:4;width:min(100%,520px);margin:-6% auto 0;background:var(--plate);border:1px solid var(--hair);
  border-radius:20px;padding:14px 16px;box-shadow:var(--shadow-l)}
.hb-answer-q{display:flex;justify-content:flex-end}
.hb-answer-q span{max-width:86%;padding:8px 12px;border-radius:14px 14px 4px 14px;background:var(--hair-soft);font-size:13.5px;line-height:1.4}
.hb-answer-a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;margin-top:10px;font-size:13.5px;line-height:1.5}
.hb-answer-a>i{width:28px;height:28px;border-radius:9px;background:var(--gradient);display:grid;place-items:center;color:#fff;font-style:normal}
.hb-answer-a>i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hb-answer-a mark{background:color-mix(in srgb,var(--violet) 16%,transparent);color:var(--ink);font-weight:800;border-radius:5px;padding:0 4px}
.hb-answer-a p{margin:0}
.hb-answer-src{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hb-answer-src span{font-size:11.5px;font-weight:700;color:var(--muted);border:1px solid var(--hair);border-radius:999px;padding:2px 8px}
.hb-answer-note{margin:8px 0 0;font-size:11.5px;color:var(--muted)}
.hb-answer .hb-type{opacity:1;transition:opacity .5s ease}
.hb-answer.is-wait .hb-type{opacity:0}
/* Пока радар зажигается (hub.js, .is-wait) - три точки «печатает» на месте ответа */
.hb-answer-a>div{position:relative;min-width:0}
.hb-answer-dots{position:absolute;left:0;top:6px;display:inline-flex;gap:5px;opacity:0;pointer-events:none;transition:opacity .3s ease}
.hb-answer-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:hb-dot 1s ease-in-out infinite}
.hb-answer-dots i:nth-child(2){animation-delay:.15s}
.hb-answer-dots i:nth-child(3){animation-delay:.3s}
.hb-answer.is-wait .hb-answer-dots{opacity:1}
@keyframes hb-dot{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-2px)}}

@media (max-width:1000px){.hb-radar{width:min(100%,480px)}}
@media (max-width:560px){
  .hb-radar{--r1:30%;--r2:44%}
  .hb-chip{font-size:11px;padding:4px 8px 4px 5px;gap:4px}
  .hb-chip i{width:15px;height:15px}
  .hb-core{width:52%;padding:10px}
  .hb-core-ava{width:30px;height:30px;font-size:13px;border-radius:9px}
  .hb-core-name{font-size:13px}
  .hb-core-score b{font-size:21px}
  .hb-answer{margin-top:-2%}
  /* на телефоне центральная плашка шире (52%): боковые площадки дальше по вертикали, нейросети - к краям */
  .hb-chip[data-p="gis"],.hb-chip[data-p="tg"]{--y:-21%}
  .hb-chip[data-p="zoon"],.hb-chip[data-p="vk"]{--y:21%}
  .hb-chip[data-p="gis"],.hb-chip[data-p="zoon"]{--x:29%}
  .hb-chip[data-p="tg"],.hb-chip[data-p="vk"]{--x:-29%}
  .hb-chip[data-p="google"]{--y:-31%}
  .hb-chip[data-p="prodoc"]{--y:31%}
  .hb-chip[data-p="gpt"]{--x:-27%;--y:-41%}
  .hb-chip[data-p="alice"]{--x:27%;--y:-41%}
  .hb-chip[data-p="giga"]{--x:30%;--y:39%}
  .hb-chip[data-p="deep"]{--x:-30%;--y:39%}
}
@media (prefers-reduced-motion:reduce){
  .hb-radar-sweep{animation:none;opacity:.3}
  .hb-chip,.hb-chip i,.hb-core-bar i,.hb-answer .hb-type{transition:none}
  .hb-answer-dots i{animation:none}
}

/* ═══ 3. Боли ═══ */
.hb-pains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hb-pain{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--plate);border:1px solid var(--hair);
  border-radius:20px;padding:20px;min-width:0}
.hb-pain h3{margin:0;font-size:17px;letter-spacing:-.015em;line-height:1.25}
.hb-pain-now,.hb-pain-fix{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;font-size:14px;line-height:1.45}
.hb-pain p{margin:0}
.hb-pain-now{color:var(--muted)}
.hb-pain-now i,.hb-pain-fix i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal}
.hb-pain-now i{background:color-mix(in srgb,var(--magenta) 14%,transparent);color:var(--magenta)}
.hb-pain-fix i{background:color-mix(in srgb,var(--good) 22%,transparent);color:#1f8a5a}
.hb-pain i svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.hb-pain-fix{margin-top:auto;padding-top:12px;border-top:1px solid var(--hair-soft);font-weight:600}
@media (max-width:1100px){.hb-pains{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.hb-pains{grid-template-columns:1fr}}

/* ═══ 4. Где вас ищут ═══ */
.hb-where{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.hb-place{grid-column:span 2;position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;text-decoration:none;color:inherit;
  background:var(--plate);border:1px solid var(--hair);border-radius:20px;padding:16px 16px 20px}
/* Наведение - рамка и тень без сдвига: подъём у плитки уже занят появлением (.hb-rv, свои задержки) */
.hb-place:hover{border-color:color-mix(in srgb,var(--violet) 55%,var(--hair));box-shadow:var(--shadow)}
.hb-place>:not(.hb-pic){margin-left:4px;margin-right:4px}
.hb-place.is-wide{grid-column:span 3}
.hb-place.is-accent{background:linear-gradient(160deg,color-mix(in srgb,var(--violet) 12%,var(--plate)),var(--plate) 65%)}
.hb-place h3{margin:0;font-size:19px;letter-spacing:-.02em;line-height:1.2}
.hb-place p{margin:0;font-size:14px;line-height:1.45;color:var(--muted)}
.hb-place-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.hb-place-tags span{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--hair-soft);color:var(--ink)}
.hb-place-go{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--accent)}
.hb-place-k{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (max-width:980px){.hb-where{grid-template-columns:repeat(2,minmax(0,1fr))}.hb-place,.hb-place.is-wide{grid-column:span 1}}
@media (max-width:600px){.hb-where{grid-template-columns:1fr}}

/* ═══ 5. Тарифы: переключатель срока ═══ */
.hb-term{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--plate);border:1px solid var(--hair);margin:0 0 18px}
.hb-term button{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--muted);
  font:700 14px var(--sans);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.hb-term button[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-ink)}
.hb-term button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.hb-term-gain{font-size:12px;font-weight:800;color:#1f8a5a}
.hb-term button[aria-pressed="true"] .hb-term-gain{color:inherit;opacity:.8}
/* Телефон: три кнопки делят ширину поровну, подпись в одну строку, «выгоднее» - мелко второй строкой
   (снимок 390 px 14.10.2026: «3 / месяца» и «12 месяцев / выгоднее» переносились по словам) */
@media (max-width:480px){
  .hb-term{display:flex;width:100%}
  .hb-term button{flex:1 1 0;min-width:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    padding:4px 6px;font-size:13.5px;line-height:1.15;white-space:nowrap}
  .hb-term-gain{font-size:10.5px}
}
/* Без JS видна цена за 12 месяцев (её же показывает переключатель по умолчанию) */
.hb-price [data-term]{display:none}
.hb-price [data-term="12"]{display:inline}
.hb-price.is-3 [data-term]{display:none}.hb-price.is-3 [data-term="3"]{display:inline}
.hb-price.is-6 [data-term]{display:none}.hb-price.is-6 [data-term="6"]{display:inline}
.hb-price.is-12 [data-term]{display:none}.hb-price.is-12 [data-term="12"]{display:inline}
.hb-plans .plan-price b{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.03em}
.hb-plans .plan-price small{font-size:14px;color:var(--muted);font-weight:600}
.hb-plans .plan.is-best{border-color:color-mix(in srgb,var(--violet) 55%,var(--hair));
  background:linear-gradient(170deg,color-mix(in srgb,var(--violet) 9%,var(--plate)),var(--plate) 55%);box-shadow:var(--shadow)}
.hb-plans .plan-list li b{font-weight:700}
.hb-plan-plus{margin:14px 0 0;font-size:13px;font-weight:700;color:var(--accent)}
.hb-plans-note{margin:16px 0 0;font-size:13.5px;color:var(--muted);max-width:90ch}

/* Разовые услуги: таблица цен (.price-table из pages.css) + кнопка */
.hb-once td:last-child{white-space:nowrap}
.hb-once td a{color:var(--ink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--violet) 45%,var(--hair))}
.hb-once td a:hover{color:var(--accent)}

/* Сравнение цен по сроку (/tarify/): таблица остаётся таблицей и на телефоне - иначе (pages.css до 640 px
   раскладывает строки в столбик и прячет шапку) цифры теряют подписи «3 / 6 / 12 месяцев». */
.hb-terms-wrap{margin-top:16px}
.hb-terms caption{caption-side:top;text-align:left;padding:14px 16px 2px;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.price-table.hb-terms th[scope="row"]{font-size:15px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.price-table.hb-terms td{white-space:nowrap;font-weight:700}
.price-table.hb-terms td:last-child{color:var(--accent)}
@media (max-width:640px){
  .price-table.hb-terms thead{display:table-header-group}
  .price-table.hb-terms tr{display:table-row;padding:0;border:0}
  .price-table.hb-terms th,.price-table.hb-terms td{display:table-cell;padding:10px 6px;font-size:13px;border-bottom:1px solid var(--hair-soft)}
  .price-table.hb-terms thead th{font-size:10px;letter-spacing:.04em}
  .price-table.hb-terms th:first-child{padding-left:12px}
  .price-table.hb-terms tr:last-child th,.price-table.hb-terms tr:last-child td{border-bottom:0}
}

/* ═══ 6. Внутренние страницы ═══ */
/* Строка «сколько стоит» на странице услуги */
.hb-cost{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hb-cost-item{background:var(--plate);border:1px solid var(--hair);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.hb-cost-item .hb-cost-k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hb-cost-item b{font-size:22px;letter-spacing:-.02em}
.hb-cost-item span{font-size:14px;color:var(--muted);line-height:1.45}
.hb-cost-item a{margin-top:auto;padding-top:8px;font-size:14px;font-weight:700;color:var(--accent);text-decoration:none}
.hb-cost-item a span{font-size:inherit;color:inherit}
@media (max-width:820px){.hb-cost{grid-template-columns:1fr}}

/* Две колонки «текст + макет» */
.hb-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:900px){.hb-split{grid-template-columns:1fr}}
.hb-figure{margin:0;min-width:0}
.hb-figure .hb-mock-note{text-align:center}
/* Шапка секции в колонке текста: те же подпись, h2 и лид, что у .sec-head, без нижнего отступа шапки */
.hb-split-head{margin-bottom:0}
.hb-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.hb-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:15px;line-height:1.5}
.hb-list li::before{content:"";width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:color-mix(in srgb,var(--good) 22%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8a5a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.hb-list li b{font-weight:700}

/* Макет «карточка компании на площадке»: условный, без чужих логотипов и цветов */
.hb-mock{position:relative;background:var(--plate);border:1px solid var(--hair);border-radius:22px;padding:18px;box-shadow:var(--shadow-l);
  max-width:520px;width:100%;margin:0 auto}
.hb-mock-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);font-weight:700}
.hb-mock-bar em{font-style:normal;padding:2px 8px;border-radius:999px;background:var(--hair-soft);color:var(--ink)}
.hb-mock-photos{display:grid;grid-template-columns:2fr 1fr 1fr;gap:6px;margin-top:12px;height:120px}
.hb-mock-photos i{border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 40%,var(--hair-soft)),color-mix(in srgb,var(--magenta) 30%,var(--hair-soft)))}
.hb-mock-photos i:nth-child(2){background:linear-gradient(160deg,color-mix(in srgb,var(--violet) 40%,var(--hair-soft)),var(--hair-soft))}
.hb-mock-photos i:nth-child(3){background:linear-gradient(200deg,color-mix(in srgb,var(--blue) 30%,var(--hair-soft)),color-mix(in srgb,var(--violet) 20%,var(--hair-soft)))}
.hb-mock h3,.hb-mock-name{margin:14px 0 2px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.hb-mock-meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:13px;color:var(--muted)}
.hb-mock-meta b{color:var(--ink)}
.hb-mock-rows{display:grid;gap:0;margin-top:12px;border-top:1px solid var(--hair-soft)}
.hb-mock-rows div{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--hair-soft);font-size:13.5px}
.hb-mock-rows div i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:color-mix(in srgb,var(--good) 22%,transparent);color:#1f8a5a}
.hb-mock-rows div i svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.hb-mock-rows div small{font-size:12px;color:var(--muted)}
.hb-mock-note{margin:10px 0 0;font-size:11.5px;color:var(--muted)}

/* Макет чата нейросети на странице «Нейросети»: тот же .hb-answer, но крупнее и с несколькими вопросами */
.hb-chat{display:grid;gap:12px;max-width:540px;width:100%;margin:0 auto}
.hb-chat .hb-answer{margin:0;width:100%}
.hb-ai-score{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.hb-ai-score div{background:var(--plate);border:1px solid var(--hair);border-radius:18px;padding:16px 18px}
.hb-ai-score b{display:block;font-size:30px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hb-ai-score span{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
@media (max-width:640px){.hb-ai-score{grid-template-columns:1fr}}

/* Как нейросеть выбирает: цепочка из четырёх звеньев */
.hb-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0;counter-reset:hbf}
.hb-flow li{position:relative;background:var(--plate);border:1px solid var(--hair);border-radius:18px;padding:18px 18px 16px;min-width:0}
.hb-flow li::before{counter-increment:hbf;content:counter(hbf);display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:var(--gradient);color:#fff;font-weight:800;font-size:14px;margin-bottom:12px}
.hb-flow b{display:block;font-size:16px;letter-spacing:-.01em;line-height:1.3}
.hb-flow span{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:var(--muted)}
@media (max-width:980px){.hb-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hb-flow{grid-template-columns:1fr}}

/* Макет сообщества ВКонтакте и канала Telegram: условные, в цветах сайта */
.hb-social{max-width:520px;width:100%;margin:0 auto;background:var(--plate);border:1px solid var(--hair);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-l)}
.hb-social-cover{height:120px;background:var(--gradient);position:relative}
.hb-social-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(240px 120px at 80% 20%,rgba(255,255,255,.35),transparent 70%)}
.hb-social-cover span{position:absolute;left:18px;bottom:14px;z-index:1;color:#fff;font-weight:800;font-size:20px;letter-spacing:-.02em}
.hb-social-body{padding:16px 18px 18px}
.hb-social-head{display:flex;align-items:center;gap:12px}
.hb-social-ava{flex:none;width:52px;height:52px;border-radius:50%;background:var(--gradient);border:3px solid var(--plate);margin-top:-36px;
  display:grid;place-items:center;color:#fff;font-weight:800}
.hb-social-head b{font-size:16px}
.hb-social-head small{display:block;font-size:12.5px;color:var(--muted)}
.hb-social-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.hb-social-btns span{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:10px;background:var(--hair-soft)}
.hb-social-btns span:first-child{background:var(--btn-bg);color:var(--btn-ink)}
.hb-social-tabs{display:flex;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hair-soft);font-size:13px;font-weight:700;color:var(--muted)}
.hb-social-tabs span:first-child{color:var(--ink)}
.hb-social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.hb-social-grid i{aspect-ratio:1/1;border-radius:10px;background:linear-gradient(140deg,color-mix(in srgb,var(--blue) 35%,var(--hair-soft)),color-mix(in srgb,var(--magenta) 25%,var(--hair-soft)))}
.hb-social-grid i:nth-child(2n){background:linear-gradient(200deg,color-mix(in srgb,var(--violet) 35%,var(--hair-soft)),var(--hair-soft))}
.hb-post{margin-top:10px;border:1px solid var(--hair);border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.5}
.hb-post b{display:block;margin-bottom:2px}
.hb-post small{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
/* Канал Telegram: без обложки, аватар в строке; закреплённый пост подсвечен */
.hb-social-tg .hb-social-ava{margin-top:0;border:0}
.hb-social-tg .hb-social-head{padding-bottom:4px}
.hb-post-pin{border-color:color-mix(in srgb,var(--violet) 40%,var(--hair));background:color-mix(in srgb,var(--violet) 7%,var(--plate))}

/* Контент-план: календарь месяца - посты встают в дни по одному (hub.js, .hb-pop), цвет - рубрика */
.hb-cal{max-width:520px;width:100%;margin:0 auto;background:var(--plate);border:1px solid var(--hair);border-radius:22px;padding:16px;box-shadow:var(--shadow-l)}
.hb-cal-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:var(--muted)}
.hb-cal-head b{font-size:17px;color:var(--ink)}
.hb-cal-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-top:12px;font-size:11px;color:var(--muted);text-align:center}
.hb-cal-dow b{font-weight:700}
.hb-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-top:6px}
.hb-cal-grid>span{position:relative;aspect-ratio:1/1.05;border-radius:10px;background:var(--hair-soft);min-width:0;overflow:hidden}
.hb-cal-grid>span.is-empty{background:transparent}
.hb-cal-d>b{position:absolute;left:6px;top:4px;z-index:1;font-size:10.5px;font-weight:700;color:var(--muted)}
.hb-cal-d.is-post>b{color:#fff}
.hb-cal-d>i{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0 5px 5px;font-style:normal;font-size:9.5px;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;background-repeat:no-repeat}
.hb-cal-d.r1>i{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.9'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") right 5px top 5px/14px 14px no-repeat,linear-gradient(150deg,#9DBDFF,#6E8BFF)}
.hb-cal-d.r2>i{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.9'%3E%3Crect x='3.5' y='7' width='17' height='12' rx='2.5'/%3E%3Ccircle cx='12' cy='13' r='3.2'/%3E%3Cpath d='M8.5 7l1.5-2.5h4L15.5 7'/%3E%3C/svg%3E") right 5px top 5px/14px 14px no-repeat,linear-gradient(150deg,#C2B2FF,#9B84FF)}
.hb-cal-d.r3>i{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.9'%3E%3Cpath d='M3.5 12.5v-8h8l9 9-8 8z'/%3E%3Ccircle cx='8' cy='9' r='1.3'/%3E%3C/svg%3E") right 5px top 5px/14px 14px no-repeat,linear-gradient(150deg,#F0A9FF,#D14BFF)}
.hb-cal-d>i.hb-pop{transform-origin:50% 0}
.is-before .hb-cal-d>i.hb-pop{transform:translateY(-40%) scale(.9)}
.is-before .hb-cal-d.is-post>b{color:var(--muted)}
.hb-cal-d.is-post>b{transition:color .3s ease;transition-delay:calc(var(--e,0ms) + 300ms)}
.hb-cal-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:12.5px;color:var(--muted)}
.hb-cal-legend span{display:inline-flex;align-items:center;gap:6px}
.hb-cal-legend i{width:10px;height:10px;border-radius:3px}
.hb-cal-legend .r1{background:#6E8BFF}.hb-cal-legend .r2{background:#9B84FF}.hb-cal-legend .r3{background:#D14BFF}
.hb-cal-post{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;align-items:center;margin-top:12px;padding:10px;border-radius:14px;
  background:var(--surface);border:1px solid var(--hair-soft)}
.hb-cal-post .hb-ph{height:66px;border-radius:10px}
.hb-cal-post small{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.hb-cal-post b{display:block;margin-top:2px;font-size:14px;line-height:1.3}
.hb-cal-post em{display:block;margin-top:3px;font-style:normal;font-size:12px;font-weight:700;color:var(--hb-ok)}
@media (max-width:420px){.hb-cal{padding:12px}.hb-cal-grid,.hb-cal-dow{gap:3px}.hb-cal-d>i{font-size:8.5px;padding:0 3px 4px}.hb-cal-d.r1>i,.hb-cal-d.r2>i,.hb-cal-d.r3>i{background-size:11px 11px,auto;background-position:right 3px top 4px,0 0}}

/* Ниши: площадки по отраслям */
.hb-niches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hb-niche{background:var(--plate);border:1px solid var(--hair);border-radius:18px;padding:18px 20px;min-width:0}
.hb-niche h3{margin:0;font-size:17px;letter-spacing:-.015em}
.hb-niche p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
@media (max-width:900px){.hb-niches{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hb-niches{grid-template-columns:1fr}}

/* Мост «А Яндекс?» */
.hb-bridge{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:20px;align-items:center;border-radius:24px;
  padding:clamp(22px,3vw,34px);border:1px dashed color-mix(in srgb,var(--violet) 40%,var(--hair));
  background:color-mix(in srgb,var(--violet) 5%,var(--plate))}
.hb-bridge h3{margin:0;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em}
.hb-bridge p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--muted);max-width:64ch}
@media (max-width:760px){.hb-bridge{grid-template-columns:1fr}.hb-bridge .btn{width:100%}}
/* Два моста рядом (главная): «А Яндекс?» и «Ваш опыт нужен» - в половине ширины текст над кнопкой */
.hb-bridges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hb-bridges .hb-bridge{grid-template-columns:1fr;align-content:space-between;justify-items:start}
.hb-bridge-k{display:block;margin-bottom:8px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
@media (max-width:900px){.hb-bridges{grid-template-columns:1fr}}

/* /proverka/: форма заявки в первом экране (поля и кнопка - .gt-* из lead-band.css) */
.hb-check-hero{align-items:start}
.hb-check-hero .hb-list{margin-top:24px}
.hb-check-plate{width:100%;max-width:460px;justify-self:end}
@media (max-width:1000px){.hb-check-plate{justify-self:stretch;max-width:560px}}
/* h2 в плашке .ai-band - размером как h3 этой плашки (site.css .ai-lead h3) */
.hb-band-h{margin:12px 0 0;max-width:none;font-size:clamp(20px,2vw,24px);letter-spacing:-.02em;line-height:1.2;text-wrap:balance}

/* Работа у нас: цифры условий */
.hb-perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hb-perk{background:var(--plate);border:1px solid var(--hair);border-radius:18px;padding:18px 20px}
.hb-perk b{display:block;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.03em;line-height:1.1}
.hb-perk span{display:block;margin-top:8px;font-size:14px;line-height:1.45;color:var(--muted)}
.hb-perk.is-accent{background:var(--gradient);border:0;color:#fff}
.hb-perk.is-accent span{color:rgba(255,255,255,.9)}
@media (max-width:980px){.hb-perks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.hb-perks{grid-template-columns:1fr}}

/* Главная: у идущих подряд секций верхний отступ снят - промежуток даёт нижний (40-72 px), как у главной vm-ads.ru
   (там style="padding-top:0" у каждой секции). Без этого между блоками было до 144 px. */
body[data-page="home"] main>section.sec+section.sec{padding-top:0}

/* Отступы внутренних страниц - как у vm-ads.ru: работает правило «Плотнее» из pages.css (20-32 px у секции,
   40-64 px между блоками). Прежнее правило здесь (28-48 px) давало до 96 px между блоками (замер 14.10.2026). */
.page-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media (max-width:560px){.page-actions .btn{width:100%}}

/* ═══ 7. Движение ниже первого экрана (hub.js, раздел 7) ═══
   Два приёма, оба из радара первого экрана: «по очереди» (.hb-rv поднимается, .hb-pop проявляется) и
   «было -> стало» (.hb-sw меняет «как сейчас» на «как после нас», метки из красного в зелёное).
   Задержки: --d - шаг блока в ряду (.hb-stag), --e - шаг внутри блока (.hb-stag2). Без JS и при «уменьшить
   движение» класса .is-before нет - всё сразу в конечном виде. Движение - только transform и opacity. */
.hb-rv,.hb-pop{transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--d,0ms) + var(--e,0ms))}
.hb-pop{transition-delay:calc(var(--d,0ms) + var(--e,0ms) + 260ms)}
.is-before .hb-rv{opacity:0;transform:translateY(22px)}
.is-before .hb-pop{opacity:0;transform:translateY(8px) scale(.94)}
.hb-stag>:nth-child(2){--d:90ms}.hb-stag>:nth-child(3){--d:180ms}.hb-stag>:nth-child(4){--d:270ms}
.hb-stag>:nth-child(5){--d:360ms}.hb-stag>:nth-child(6){--d:450ms}.hb-stag>:nth-child(7){--d:540ms}
.hb-stag>:nth-child(8){--d:630ms}.hb-stag>:nth-child(9){--d:720ms}
.hb-stag2>:nth-child(1){--e:0ms}.hb-stag2>:nth-child(2){--e:140ms}.hb-stag2>:nth-child(3){--e:280ms}
.hb-stag2>:nth-child(4){--e:420ms}.hb-stag2>:nth-child(5){--e:560ms}.hb-stag2>:nth-child(6){--e:700ms}
.hb-stag2>:nth-child(7){--e:840ms}.hb-stag2>:nth-child(8){--e:980ms}
/* «было / стало» в одной ячейке: ширина и высота - по большему, поэтому при смене ничего не прыгает */
.hb-sw{display:inline-grid;vertical-align:top}
.hb-sw>*{grid-area:1/1;transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--d,0ms) + var(--e,0ms))}
.hb-sw>.hb-was{opacity:0;transform:translateY(-70%)}
.is-before .hb-sw>.hb-was{opacity:1;transform:none}
.is-before .hb-sw>.hb-now{opacity:0;transform:translateY(70%)}
.hb-sw.is-block{display:grid}
.hb-sw.is-fade>*{transform:none!important}
/* «печатает...»: точки показываются на время и гаснут, затем текст (--t - когда начать) */
.hb-dots{display:inline-flex;gap:4px;opacity:0;animation:hb-dots-life 1.3s var(--t,0s) both}
.hb-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:hb-dot 1s ease-in-out infinite}
.hb-dots i:nth-child(2){animation-delay:.15s}.hb-dots i:nth-child(3){animation-delay:.3s}
.is-before .hb-dots{animation:none;opacity:0}
@keyframes hb-dots-life{0%{opacity:0}12%{opacity:1}82%{opacity:1}100%{opacity:0}}
.hb-typed{transition:opacity .45s ease;transition-delay:calc(var(--t,0s) + 1.15s)}
.is-before .hb-typed{opacity:0;transition-delay:0s}
/* мгновенная смена вида (hub.js snap): без плавности */
.hb-snap,.hb-snap *{transition:none!important}
/* Переключатель «Сейчас / После» под картинкой */
.hb-flip{display:inline-flex;gap:3px;padding:3px;border-radius:999px;background:var(--hair-soft);border:1px solid var(--hair)}
.hb-flip button{min-height:32px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--muted);
  font:700 13px var(--sans);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.hb-flip button[aria-pressed="true"]{background:var(--plate);color:var(--ink);box-shadow:0 2px 8px rgba(15,18,38,.08)}
.hb-flip button[data-hb-flip="after"][aria-pressed="true"]{color:#1f8a5a}
.hb-flip button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .hb-rv,.hb-pop,.hb-sw>*,.hb-typed{transition:none}
  .hb-dots,.hb-dots i{animation:none}
}

/* ═══ 8. Общие детали картинок ═══ */
/* «Хорошо / плохо» в картинках: зелёный и пурпурный темнее токенов --good/--magenta, чтобы мелкий текст читался */
:root{--hb-ok:#1f8a5a;--hb-ok-bg:rgba(61,220,151,.18);--hb-no:#A62BC0;--hb-no-bg:rgba(209,75,255,.12);--hb-star:#F5B400}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hb-ok:#3DDC97;--hb-ok-bg:rgba(61,220,151,.14);--hb-no:#E38BFF;--hb-no-bg:rgba(209,75,255,.17)}}
:root[data-theme="dark"]{--hb-ok:#3DDC97;--hb-ok-bg:rgba(61,220,151,.14);--hb-no:#E38BFF;--hb-no-bg:rgba(209,75,255,.17)}
.hb-art{position:absolute;width:0;height:0;overflow:hidden}
/* «Фото» из partials/art.html: <svg class="hb-ph"><use href="#hb-ph-room"/></svg> */
.hb-ph{display:block;width:100%;height:100%;object-fit:cover}
/* Значок площадки буквой: не чужой логотип, а метка в цветах сайта */
.hb-lg{flex:none;width:18px;height:18px;border-radius:5px;display:inline-grid;place-items:center;font-size:10.5px;font-weight:800;font-style:normal;color:#fff;line-height:1}
.hb-lg.is-g{background:#6E8BFF}.hb-lg.is-gis{background:#3BB273}.hb-lg.is-z{background:#9B84FF}
.hb-lg.is-pd{background:#4C9BE8}.hb-lg.is-np{background:#D14BFF}
/* Звёзды рейтинга: --v - доля закрашенного */
.hb-stars{display:inline-block;width:52px;height:10px;vertical-align:-1px;flex:none;
  background:linear-gradient(90deg,var(--hb-star) calc(var(--v,1)*100%),var(--hair) 0);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 1.8l3 6.3 6.9.8-5.1 4.8 1.4 6.8L12 17.1l-6.2 3.4 1.4-6.8-5.1-4.8 6.9-.8z'/%3E%3C/svg%3E") 0 0/10.4px 10px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 1.8l3 6.3 6.9.8-5.1 4.8 1.4 6.8L12 17.1l-6.2 3.4 1.4-6.8-5.1-4.8 6.9-.8z'/%3E%3C/svg%3E") 0 0/10.4px 10px repeat-x}
/* Метки «есть / нет» с галочкой и крестиком (значок - маска, цвет - currentColor) */
.hb-pv-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 6px;border-radius:999px;font-size:11.5px;font-weight:700;font-style:normal;white-space:nowrap;line-height:1.5}
.hb-pv-tag::before{content:"";width:9px;height:9px;flex:none;background:currentColor;
  -webkit-mask:var(--hb-ic) center/contain no-repeat;mask:var(--hb-ic) center/contain no-repeat}
.hb-pv-tag.is-ok{color:var(--hb-ok);background:var(--hb-ok-bg);
  --hb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.7 4.7L19.5 7'/%3E%3C/svg%3E")}
.hb-pv-tag.is-no{color:var(--hb-no);background:var(--hb-no-bg);
  --hb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}

/* ═══ 9. Главная: картинки болей ═══ */
.hb-pv{display:flex;flex-direction:column;gap:8px;min-height:176px;padding:10px 10px 12px;border-radius:14px;
  background:var(--surface);border:1px solid var(--hair-soft);font-size:12.5px;line-height:1.35;color:var(--ink)}
.hb-pv-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.hb-pv-top>span{overflow:hidden;text-overflow:ellipsis}
.hb-pv-st{font-size:10.5px;letter-spacing:.02em}
.hb-pv-st i{font-style:normal;padding:2px 8px;border-radius:999px;text-align:center}
.hb-pv-st .hb-was{color:var(--hb-no);background:var(--hb-no-bg)}
.hb-pv-st .hb-now{color:var(--hb-ok);background:var(--hb-ok-bg)}
.hb-pv-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hb-pv-rows li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 8px;
  border-radius:10px;background:var(--plate);border:1px solid var(--hair-soft);font-weight:600}
.hb-pv-rows li>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-pv-rows em{font-style:normal;justify-self:end}
.hb-pv-rows em.hb-sw{justify-items:end}
.hb-pv-q{align-self:flex-end;margin:0;max-width:92%;padding:6px 10px;border-radius:12px 12px 4px 12px;background:var(--plate);
  border:1px solid var(--hair-soft);font-weight:600}
.hb-pv-a{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;margin:0}
.hb-pv-a>i{width:20px;height:20px;border-radius:7px;background:var(--gradient);display:grid;place-items:center;color:#fff}
.hb-pv-a>i svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.hb-pv-a b{font-weight:800;color:var(--accent)}
.hb-pv-src{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:auto 0 0;font-size:11px;color:var(--muted);font-weight:600}
.hb-pv-src em{font-style:normal}
/* Сообщество: обложка, аватар, посты - из шаблона и пустые -> свои и свежие */
.hb-pv-cover>i{display:block;height:34px;border-radius:9px}
.hb-pv-cover .hb-was{background:repeating-linear-gradient(135deg,var(--hair) 0 6px,var(--hair-soft) 6px 12px)}
.hb-pv-cover .hb-now{background:radial-gradient(60px 30px at 82% 30%,rgba(255,255,255,.55),transparent 70%),var(--gradient)}
.hb-pv-who{display:flex;align-items:center;gap:8px;margin-top:-18px;padding-left:8px}
.hb-pv-ava{flex:none;width:30px;height:30px}
.hb-pv-ava>i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--surface);font-style:normal;font-weight:800;font-size:12px}
.hb-pv-ava .hb-was{background:var(--hair);color:var(--muted)}
.hb-pv-ava .hb-now{background:var(--gradient)}
.hb-pv-who>span:last-child{padding-top:16px;min-width:0}
.hb-pv-who b{display:block;font-size:12.5px}
.hb-pv-who small{font-size:11px;color:var(--muted)}
.hb-pv-who small i{font-style:normal}
.hb-pv-who small .hb-was{color:var(--hb-no)}
.hb-pv-posts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:auto}
.hb-pv-posts>span>i{display:block;height:34px;border-radius:7px}
.hb-pv-posts .hb-was{border:1.5px dashed var(--hair);background:transparent}
.hb-pv-posts>span:nth-child(1) .hb-now{background:linear-gradient(150deg,#C6DAFF,#9B84FF)}
.hb-pv-posts>span:nth-child(2) .hb-now{background:linear-gradient(150deg,#FBDDF0,#D14BFF)}
.hb-pv-posts>span:nth-child(3) .hb-now{background:linear-gradient(150deg,#E3EDFF,#6EA8FF)}
.hb-pv-posts>span:nth-child(4) .hb-now{background:linear-gradient(150deg,#F3E9FF,#B39BFF)}

/* ═══ 10. Главная: картинки плиток «Где вас ищут» ═══ */
.hb-pic{position:relative;display:block;height:136px;border-radius:14px;overflow:hidden;background:var(--surface);
  border:1px solid var(--hair-soft);margin-bottom:4px;font-size:11.5px;line-height:1.3;color:var(--ink)}
/* Google Карты: схема улиц, булавка и плашка места */
.hb-map{position:absolute;inset:0;width:100%;height:100%}
.hb-map *{vector-effect:non-scaling-stroke}
.hb-map-park{fill:var(--map-park)}
.hb-map-water{fill:var(--map-water)}
.hb-map-st{fill:none;stroke:var(--map-line);stroke-width:5;stroke-linecap:round}
.hb-map-rd{fill:none;stroke:var(--map-road);stroke-width:9;stroke-linecap:round}
.hb-map-pin{position:absolute;left:27%;top:40%;width:28px;height:28px;margin:-30px 0 0 -14px;z-index:1}
.hb-map-pin::before{content:"";position:absolute;inset:0;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--gradient);
  box-shadow:0 6px 14px color-mix(in srgb,var(--violet) 40%,transparent)}
.hb-map-pin::after{content:"";position:absolute;left:9px;top:9px;width:10px;height:10px;border-radius:50%;background:#fff}
.hb-map-pin.is-alt{left:62%;top:78%;width:18px;height:18px;margin:-20px 0 0 -9px}
.hb-map-pin.is-alt::before{background:var(--muted);opacity:.5;box-shadow:none}
.hb-map-pin.is-alt::after{left:6px;top:6px;width:6px;height:6px}
.hb-map-card{position:absolute;right:10px;top:12px;z-index:2;display:grid;gap:2px;padding:8px 11px;border-radius:12px;background:var(--plate);
  border:1px solid var(--hair);box-shadow:0 10px 24px rgba(15,18,38,.12);white-space:nowrap}
.hb-map-card b{font-size:12.5px}
.hb-map-rate{display:flex;align-items:center;gap:5px;font-weight:700}
.hb-map-card small{font-size:11px;font-weight:700;color:var(--hb-ok)}
/* 2ГИС: фото, рейтинг, вкладки и ответ на отзыв */
.hb-pic-card{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:10px}
.hb-pc-photos{display:grid;grid-template-columns:66px 40px;grid-template-rows:1fr 1fr;gap:4px}
.hb-pc-photos .hb-ph{border-radius:8px;overflow:hidden}
.hb-pc-photos .is-a{grid-row:1 / 3}
.hb-pc-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.hb-pc-body>b{font-size:13px}
.hb-pc-meta{display:flex;align-items:center;gap:5px;font-weight:700}
.hb-pc-meta small{font-size:10.5px;color:var(--muted);font-weight:600}
.hb-pc-tabs{display:flex;gap:8px;font-size:10.5px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--hair)}
.hb-pc-tabs i{font-style:normal;padding-bottom:4px}
.hb-pc-tabs i:first-child{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.hb-pc-reply{display:flex;align-items:center;gap:6px;margin-top:auto;padding:5px 8px;border-radius:8px;background:var(--hb-ok-bg);
  color:var(--hb-ok);font-weight:700;font-size:11px;white-space:nowrap;overflow:hidden}
.hb-pc-reply i{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
/* Площадки ниши: строки с рейтингом и отметкой «заполнено» */
.hb-pic-list{display:flex;align-items:center;padding:10px}
.hb-pl-rows{display:grid;gap:6px;width:100%}
.hb-pl-rows>span{display:grid;grid-template-columns:18px minmax(0,1fr) auto 18px;align-items:center;gap:8px;padding:6px 8px;
  border-radius:10px;background:var(--plate);border:1px solid var(--hair-soft)}
.hb-pl-rows b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-pl-ok{width:18px;height:18px;border-radius:50%;background:var(--hb-ok-bg);color:var(--hb-ok);display:grid;place-items:center}
.hb-pl-ok::before{content:"";width:9px;height:9px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.7 4.7L19.5 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.7 4.7L19.5 7'/%3E%3C/svg%3E") center/contain no-repeat}
/* Нейросети: замер 6 нейросетей x 20 вопросов, зажигается по столбцам */
.hb-pic-ai{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:12px}
.hb-ai-grid{display:grid;gap:5px}
.hb-ai-grid>span{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:4px}
.hb-ai-grid i{aspect-ratio:1/1;max-width:10px;border-radius:50%;background:var(--hair);transition:background-color .35s ease;
  transition-delay:calc(var(--d,0ms) + var(--c,0ms) + 300ms)}
.hb-ai-grid i.on{background:var(--violet)}
.hb-ai-grid>span:nth-child(odd) i.on{background:var(--blue)}
.is-before .hb-ai-grid i.on{background:var(--hair)}
.hb-ai-grid i:nth-child(2){--c:40ms}.hb-ai-grid i:nth-child(3){--c:80ms}.hb-ai-grid i:nth-child(4){--c:120ms}.hb-ai-grid i:nth-child(5){--c:160ms}
.hb-ai-grid i:nth-child(6){--c:200ms}.hb-ai-grid i:nth-child(7){--c:240ms}.hb-ai-grid i:nth-child(8){--c:280ms}.hb-ai-grid i:nth-child(9){--c:320ms}
.hb-ai-grid i:nth-child(10){--c:360ms}.hb-ai-grid i:nth-child(11){--c:400ms}.hb-ai-grid i:nth-child(12){--c:440ms}.hb-ai-grid i:nth-child(13){--c:480ms}
.hb-ai-grid i:nth-child(14){--c:520ms}.hb-ai-grid i:nth-child(15){--c:560ms}.hb-ai-grid i:nth-child(16){--c:600ms}.hb-ai-grid i:nth-child(17){--c:640ms}
.hb-ai-grid i:nth-child(18){--c:680ms}.hb-ai-grid i:nth-child(19){--c:720ms}.hb-ai-grid i:nth-child(20){--c:760ms}
.hb-ai-cap{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--muted)}
.hb-ai-cap b{color:var(--ink);font-size:13px}
.hb-ai-cap i{width:4px;height:4px;border-radius:50%;background:var(--muted)}
/* ВКонтакте: шапка сообщества в цветах VKUI (тема vkIOS: акцент #2688EB) */
.hb-pic-vk{padding:10px 10px 0}
.hb-mvk{display:block;height:100%;border-radius:10px 10px 0 0;background:#fff;color:#000;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.hb-mvk-cover{display:block;width:100%;height:46px}
.hb-mvk-head{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:7px;padding:0 8px;margin-top:-12px}
.hb-mvk-ava{width:30px;height:30px;border-radius:50%;background:var(--gradient);border:2px solid #fff}
.hb-mvk-head b{padding-top:12px;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:3px}
.hb-mvk-ver{flex:none;width:10px;height:10px;border-radius:50%;background:#2688EB}
.hb-mvk-btn{margin-top:12px;padding:4px 9px;border-radius:8px;background:#2688EB;color:#fff;font-size:10.5px;font-weight:500}
.hb-mvk-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:8px}
.hb-mvk-menu i{display:flex;align-items:flex-end;height:44px;padding:4px 6px;border-radius:8px;font-style:normal;font-size:10px;font-weight:600;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 70%),linear-gradient(150deg,#C6DAFF,#9B84FF)}
.hb-mvk-menu i:nth-child(2){background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 70%),linear-gradient(150deg,#FBDDF0,#D14BFF)}
.hb-mvk-menu i:nth-child(3){background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 70%),linear-gradient(150deg,#E3EDFF,#6EA8FF)}
/* Telegram: закреп и посты канала на узорном фоне */
.hb-pic-tg{display:flex;flex-direction:column;background:linear-gradient(135deg,#DBDDBB,#6BA587 45%,#D5D88D 70%,#88B884)}
.hb-mtg-pin{display:flex;align-items:center;gap:7px;padding:6px 10px;background:rgba(255,255,255,.94);color:#000;font-size:10.5px;line-height:1.25}
.hb-mtg-pin>i{flex:none;width:2px;height:24px;border-radius:2px;background:#3390EC}
.hb-mtg-pin b{display:block;color:#3390EC;font-weight:600}
.hb-mtg-feed{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:8px 10px}
.hb-mtg-msg{display:flex;gap:7px;max-width:88%;padding:5px 7px 4px;border-radius:12px 12px 12px 4px;background:#fff;color:#000;
  box-shadow:0 1px 1px rgba(0,0,0,.12);font-size:11px;font-weight:500}
.hb-mtg-msg small{display:block;margin-top:1px;text-align:right;font-size:9.5px;color:#8D8D93;font-weight:400}
.hb-mtg-img{flex:none;width:34px;height:34px;border-radius:7px;background:linear-gradient(150deg,#FBDDF0,#D14BFF)}
/* Контент-план: неделя с постами по рубрикам */
.hb-pic-plan{display:grid;align-content:center;gap:5px;padding:10px 12px}
.hb-wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.hb-wk>i{font-style:normal;text-align:center;font-size:10px;font-weight:700;color:var(--muted)}
.hb-wk-days>i{height:38px;border-radius:8px;background:var(--plate);border:1px solid var(--hair-soft);display:flex;align-items:flex-end;padding:3px;min-width:0}
.hb-wk-days>i b{display:block;width:100%;font-size:9px;font-weight:700;color:#fff;overflow:hidden;text-overflow:clip;white-space:nowrap}
.hb-wk-days>i.is-r1{background:linear-gradient(150deg,#9DBDFF,#6E8BFF);border:0}
.hb-wk-days>i.is-r2{background:linear-gradient(150deg,#C2B2FF,#9B84FF);border:0}
.hb-wk-days>i.is-r3{background:linear-gradient(150deg,#F0A9FF,#D14BFF);border:0}
@media (max-width:600px){.hb-pic{height:128px}}
/* ВКонтакте и Telegram в тёмной теме сайта - их собственные тёмные темы (VKUI vkIOSDark, ночная тема Telegram) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hb-mvk{background:#19191A;color:#E1E3E6;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
  :root:not([data-theme="light"]) .hb-mvk-ava{border-color:#19191A}
  :root:not([data-theme="light"]) .hb-mvk-btn{background:#fff;color:#000}
  :root:not([data-theme="light"]) .hb-mvk-ver{background:#529EF4}
  :root:not([data-theme="light"]) .hb-pic-tg{background:linear-gradient(135deg,#1B2A20,#2D4A38 45%,#24332A 70%,#3A4F33)}
  :root:not([data-theme="light"]) .hb-mtg-pin{background:rgba(23,33,43,.96);color:#F5F5F5}
  :root:not([data-theme="light"]) .hb-mtg-msg{background:#182533;color:#F5F5F5}}
:root[data-theme="dark"] .hb-mvk{background:#19191A;color:#E1E3E6;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
:root[data-theme="dark"] .hb-mvk-ava{border-color:#19191A}
:root[data-theme="dark"] .hb-mvk-btn{background:#fff;color:#000}
:root[data-theme="dark"] .hb-mvk-ver{background:#529EF4}
:root[data-theme="dark"] .hb-pic-tg{background:linear-gradient(135deg,#1B2A20,#2D4A38 45%,#24332A 70%,#3A4F33)}
:root[data-theme="dark"] .hb-mtg-pin{background:rgba(23,33,43,.96);color:#F5F5F5}
:root[data-theme="dark"] .hb-mtg-msg{background:#182533;color:#F5F5F5}

/* ═══ 11. Главная: «Почему мы» с картинками, шаги с полосой ═══ */
.hb-why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hb-why-item{display:flex;flex-direction:column;gap:6px;min-width:0;background:var(--plate);border:1px solid var(--hair);border-radius:18px;padding:12px 12px 18px}
.hb-why-item>b{margin:6px 6px 0;font-size:16px;letter-spacing:-.01em;line-height:1.3}
.hb-why-item>span:last-child{margin:0 6px;font-size:14px;line-height:1.45;color:var(--muted)}
.hb-why-pic{position:relative;display:block;height:116px;border-radius:12px;overflow:hidden;background:var(--surface);border:1px solid var(--hair-soft);
  font-size:11.5px;line-height:1.3}
/* Один стиль: три снимка из разных «рук» выравниваются и получают общую рамку */
.hb-why-style{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:center;padding:14px 10px}
.hb-why-style .hb-ph{height:78px;border-radius:9px;outline:2px solid #fff;outline-offset:-2px;box-shadow:0 6px 14px rgba(15,18,38,.12);
  transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s ease;transition-delay:calc(var(--d,0ms) + 300ms)}
.is-before .hb-why-style .hb-ph:nth-child(1){transform:rotate(-9deg) translate(-4px,8px) scale(.9);opacity:.55}
.is-before .hb-why-style .hb-ph:nth-child(2){transform:rotate(6deg) translateY(-10px) scale(1.08);opacity:.55}
.is-before .hb-why-style .hb-ph:nth-child(3){transform:rotate(-4deg) translate(4px,6px) scale(.86);opacity:.55}
/* Система читает: луч проходит по площадкам, у каждой появляется находка */
.hb-why-scan{padding:10px}
.hb-why-rows{display:grid;gap:6px}
.hb-why-rows>span{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 7px;border-radius:9px;background:var(--plate);border:1px solid var(--hair-soft)}
.hb-why-rows>span::after{content:"";order:1;flex:1;height:5px;border-radius:3px;background:var(--hair-soft)}
.hb-why-rows .hb-lg{order:0}
.hb-why-rows i{order:2}
.hb-why-tag{display:inline-flex;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;font-style:normal;white-space:nowrap;
  color:var(--accent);background:color-mix(in srgb,var(--violet) 14%,transparent)}
.hb-why-rows .hb-pop{transition-delay:calc(var(--d,0ms) + var(--e,0ms) + 500ms)}
.hb-why-beam{position:absolute;left:0;right:0;top:0;height:30px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--violet) 22%,transparent) 70%,color-mix(in srgb,var(--violet) 55%,transparent) 96%,transparent)}
.hb-why:not(.is-before) .hb-why-beam{animation:hb-beam 1.5s cubic-bezier(.2,.8,.2,1) calc(var(--d,0ms) + 250ms) both}
@keyframes hb-beam{0%{opacity:0;transform:translateY(-30px)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(116px)}}
/* ИИ отвечает: отзыв, «печатает...», ответ и отметка менеджера */
.hb-why-reply{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px}
.hb-why-rev{align-self:flex-start;display:grid;gap:3px;max-width:92%;padding:6px 9px;border-radius:11px 11px 11px 3px;background:var(--plate);border:1px solid var(--hair-soft);font-weight:600}
.hb-why-ans{position:relative;align-self:flex-end;display:grid;max-width:92%;min-height:28px;padding:6px 9px;border-radius:11px 11px 3px 11px;
  background:color-mix(in srgb,var(--violet) 16%,var(--plate));font-weight:600;--t:.5s}
.hb-why-ans>*{grid-area:1/1;align-self:center}
.hb-why-ans .hb-dots{color:var(--accent)}
.hb-why-reply small{align-self:flex-end;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--hb-ok)}
.hb-why-reply small::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.hb-why .hb-dots{animation-delay:calc(var(--t,0s) + var(--d,0ms))}
.hb-why .hb-typed{transition-delay:calc(var(--t,0s) + var(--d,0ms) + 1.15s)}
/* Отчёт: столбики растут по очереди */
.hb-why-report{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:12px;padding:12px 14px}
.hb-why-doc{align-self:start;display:grid;gap:2px;padding:8px 10px;border-radius:9px;background:var(--plate);border:1px solid var(--hair-soft)}
.hb-why-doc b{font-size:12.5px}.hb-why-doc small{font-size:10.5px;color:var(--muted)}
.hb-why-bars{display:flex;align-items:flex-end;gap:7px;height:88px}
.hb-why-bars i{flex:1;height:calc(var(--h)*100%);border-radius:6px 6px 3px 3px;background:var(--gradient);transform-origin:50% 100%;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0ms) + var(--e,0ms) + 300ms)}
.hb-why-bars i:not(:last-child){opacity:.45}
.is-before .hb-why-bars i{transform:scaleY(.12)}
@media (max-width:1080px){.hb-why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hb-why{grid-template-columns:1fr;gap:10px}}
/* Шаги: полоса над каждым шагом заполняется по очереди - видно, что шаги идут друг за другом */
.hb-step-bar{position:absolute;left:20px;right:20px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--gradient);
  transform-origin:0 50%;transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0ms) * 4 + 450ms)}
.is-before .hb-step-bar{transform:scaleX(0)}
.steps3.hb-stag>.step3{transition-delay:calc(var(--d,0ms) * 4)}
@media (prefers-reduced-motion:reduce){.hb-why-style .hb-ph,.hb-why-bars i,.hb-step-bar,.hb-ai-grid i{transition:none}.hb-why-beam{animation:none}}

/* ═══ 12. Рамка телефона для макетов ═══
   Экран 300 px - как у телефона 375-390 px за вычетом полей: элементы в макете в натуральную величину.
   .hb-phone-view - лента экрана; .is-scroll у сцены прокручивает её вниз и обратно (показать нижние блоки). */
.hb-phone-fig{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0;min-width:0}
.hb-phone{position:relative;flex:none;width:320px;max-width:100%;padding:10px;border-radius:50px;
  background:linear-gradient(150deg,#34353D,#0B0C10 60%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 5px #1A1B20,var(--shadow-l)}
.hb-phone::before{content:"";position:absolute;right:-2px;top:150px;width:3px;height:64px;border-radius:0 3px 3px 0;background:#2A2B31}
.hb-phone-scr{position:relative;height:620px;border-radius:40px;overflow:hidden;isolation:isolate;text-align:left;line-height:1.3}
.hb-phone-scr::before{content:"";position:absolute;left:50%;top:10px;width:90px;height:26px;margin-left:-45px;border-radius:20px;background:#000;z-index:30}
.hb-phone-sb{position:absolute;left:0;right:0;top:0;height:46px;z-index:29;display:flex;align-items:center;justify-content:space-between;
  padding:2px 22px 0 32px;font:600 14.5px/1 -apple-system,system-ui,"Helvetica Neue",Roboto,sans-serif;letter-spacing:-.01em;pointer-events:none}
.hb-phone-sb svg{width:66px;height:12px}
.hb-phone-sb.is-light{color:#fff}
.hb-phone-home{position:absolute;left:50%;bottom:7px;width:112px;height:4px;margin-left:-56px;border-radius:3px;z-index:30;background:currentColor;opacity:.85}
.hb-phone-view{position:relative;will-change:auto}
.hb-phone-note{max-width:340px;margin:0;font-size:12px;line-height:1.45;color:var(--muted);text-align:center}
.is-scroll .hb-phone-view{animation:hb-phone-scroll 7.5s cubic-bezier(.45,0,.25,1) var(--scroll-at,2.8s) both}
.is-before .is-scroll .hb-phone-view{animation:none}
@keyframes hb-phone-scroll{0%{transform:none}38%{transform:translateY(var(--scroll,-360px))}72%{transform:translateY(var(--scroll,-360px))}100%{transform:none}}
@media (max-width:359px){.hb-phone{zoom:.9}}
@media (prefers-reduced-motion:reduce){.is-scroll .hb-phone-view{animation:none}}
/* «Пусто» поверх раздела в виде «было»: подпись, что раздел не заполнен */
.hb-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:8px;font-size:13px;opacity:0;pointer-events:none;
  transition:opacity .35s ease;transition-delay:calc(var(--d,0ms) + var(--e,0ms))}
.is-before .hb-empty{opacity:1}

/* ═══ 13. Макет сообщества ВКонтакте ═══
   Цвета, размеры и шрифты - токены официальной дизайн-системы VK: @vkontakte/vkui-tokens 4.93 (темы vkIOS и
   vkIOSDark), правила кнопок, ячеек и заголовков - @vkontakte/vkui 8.4 (Button, MiniInfoCell, Header), значки -
   @vkontakte/icons (partials/vk-icons.html). Условные только название, фото и тексты - так и подписано. */
.hb-vk{--vk-acc:#2688EB;--vk-bg:#EBEDF0;--vk-c:#FFFFFF;--vk-t:#000000;--vk-sub:#6D7885;--vk-sec:#818C99;--vk-ter:#99A2AD;
  --vk-ic:#99A2AD;--vk-icm:#818C99;--vk-sep:#D7D8D9;--vk-alpha:rgba(0,0,0,.04);--vk-pos:#4BB34B;--vk-link:#2D81E0;
  --vk-pri:#2688EB;--vk-pri-t:#FFFFFF;--vk-sec-t:#2688EB;--vk-img:rgba(0,0,0,.08);--vk-sk:#E1E3E6;
  background:var(--vk-bg);color:var(--vk-t);font-family:-apple-system,system-ui,"Helvetica Neue",Roboto,sans-serif;font-size:15px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hb-vk{--vk-acc:#529EF4;--vk-bg:#0A0A0A;--vk-c:#19191A;--vk-t:#E1E3E6;
  --vk-sub:#969A9F;--vk-sec:#76787A;--vk-ter:#5D5F61;--vk-ic:#76787A;--vk-icm:#B0B1B6;--vk-sep:#363738;--vk-alpha:rgba(255,255,255,.10);
  --vk-link:#529EF4;--vk-pri:#FFFFFF;--vk-pri-t:#000000;--vk-sec-t:#FFFFFF;--vk-img:rgba(255,255,255,.08);--vk-sk:#2C2D2E}}
:root[data-theme="dark"] .hb-vk{--vk-acc:#529EF4;--vk-bg:#0A0A0A;--vk-c:#19191A;--vk-t:#E1E3E6;
  --vk-sub:#969A9F;--vk-sec:#76787A;--vk-ter:#5D5F61;--vk-ic:#76787A;--vk-icm:#B0B1B6;--vk-sep:#363738;--vk-alpha:rgba(255,255,255,.10);
  --vk-link:#529EF4;--vk-pri:#FFFFFF;--vk-pri-t:#000000;--vk-sec-t:#FFFFFF;--vk-img:rgba(255,255,255,.08);--vk-sk:#2C2D2E}
.hb-vk .hb-phone-home{color:var(--vk-t)}
.hb-vk svg.hb-vki{display:block;flex:none;fill:currentColor}
.hb-vk-grp{position:relative;background:var(--vk-c);margin-bottom:8px}
.hb-vk-cover{position:relative;display:block;height:136px;overflow:hidden}
.hb-vk-cover>*{display:block;width:100%;height:136px}
.hb-vk-cover .hb-was{background:linear-gradient(180deg,#B9BEC6,#D5D9DF)}
.hb-vk-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.32),transparent 48%);pointer-events:none}
.hb-vk-nav{position:absolute;left:4px;right:6px;top:46px;z-index:2;display:flex;align-items:center;justify-content:space-between;color:#fff}
.hb-vk-nav>span{display:flex;gap:14px}
.hb-vk-nav svg{width:24px;height:24px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.hb-vk-nav svg.is-back{width:20px;height:28px}
.hb-vk-head{padding:0 12px 12px}
.hb-vk-ava{position:relative;display:block;width:80px;height:80px;margin-top:-40px;border-radius:50%;border:3px solid var(--vk-c);background:var(--vk-c)}
.hb-vk-ava i{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;font-style:normal;font-size:30px;font-weight:600}
.hb-vk-ava .hb-was{background:var(--vk-sk);color:var(--vk-sec)}
.hb-vk-ava .hb-now{background:var(--gradient);color:#fff}
.hb-vk-ava .hb-sw{display:grid}
.hb-vk-ava .hb-now svg{width:38px;height:38px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hb-vk-name{display:block;margin-top:8px;font-size:20px;line-height:24px;font-weight:600;letter-spacing:-.01em}
.hb-vk-status{margin-top:2px;font-size:14px;line-height:18px;color:var(--vk-sub)}
.hb-vk-status .hb-was{color:var(--vk-ter)}
.hb-vk-meta{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;line-height:16px;color:var(--vk-sec)}
.hb-vk-meta svg{width:16px;height:16px;color:var(--vk-ic)}
.hb-vk-btns{display:flex;gap:8px;margin-top:12px}
.hb-vk-btns>b{display:flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;border-radius:10px;font-size:15px;line-height:20px;font-weight:500}
.hb-vk-btns>.is-pri{flex:1;background:var(--vk-pri);color:var(--vk-pri-t)}
.hb-vk-btns>.is-sec{flex:1;background:var(--vk-alpha);color:var(--vk-sec-t)}
.hb-vk-btns>.is-ic{width:36px;padding:0;background:var(--vk-alpha);color:var(--vk-sec-t)}
.hb-vk-btns svg{width:24px;height:24px}
.hb-vk-info{padding:6px 0}
.hb-vk-cell{display:flex;align-items:center;padding:6px 12px;font-size:15px;line-height:20px;color:var(--vk-sub)}
.hb-vk-cell>svg{width:20px;height:20px;margin-right:12px;color:var(--vk-ic)}
.hb-vk-cell .hb-sw{flex:1;min-width:0}
.hb-vk-cell i{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-vk-cell .hb-was{color:var(--vk-ter)}
.hb-vk-cell em{font-style:normal;color:var(--vk-pos)}
.hb-vk-cell .is-link{color:var(--vk-link)}
.hb-vk-cell.is-more{color:var(--vk-link)}
.hb-vk-h{display:flex;align-items:baseline;justify-content:space-between;padding:12px 12px 8px;font-size:16px;line-height:20px;font-weight:600}
.hb-vk-h small{margin-left:6px;font-size:14px;font-weight:400;color:var(--vk-sec)}
.hb-vk-h span{font-size:14px;font-weight:400;color:var(--vk-link)}
.hb-vk-row{position:relative;display:flex;gap:8px;padding:0 12px 14px;overflow:hidden}
.hb-vk-row .hb-empty{color:var(--vk-ter);background:var(--vk-c)}
.hb-vk-tile{flex:none;width:112px;font-size:13px;line-height:16px}
.hb-vk-tile .hb-ph{height:76px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--vk-img)}
.hb-vk-tile b{display:-webkit-box;margin-top:6px;font-weight:500;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hb-vk-tile small{display:block;margin-top:2px;font-size:13px;color:var(--vk-sec)}
.hb-vk-tile.is-svc{width:120px}
.hb-vk-tile.is-svc .hb-ph{height:90px}
.hb-vk-tile.is-svc small{color:var(--vk-t);font-weight:600}
.hb-vk-tabs{display:flex;gap:20px;padding:0 12px;border-bottom:1px solid var(--vk-sep);font-size:15px;line-height:20px;font-weight:500;color:var(--vk-sec)}
.hb-vk-tabs>i{font-style:normal;padding:12px 0 10px}
.hb-vk-tabs>i:first-child{color:var(--vk-t);box-shadow:inset 0 -2px 0 var(--vk-acc)}
.hb-vk-post{padding:12px 0 8px}
.hb-vk-ph{display:grid;grid-template-columns:40px minmax(0,1fr) 24px;gap:10px;align-items:center;padding:0 12px}
.hb-vk-ph .hb-vk-mini{width:40px;height:40px;border-radius:50%}
.hb-vk-ph b{display:block;font-size:15px;line-height:20px;font-weight:500}
.hb-vk-ph small{display:block;font-size:13px;line-height:16px;color:var(--vk-sec)}
.hb-vk-ph svg{width:24px;height:24px;color:var(--vk-ic)}
.hb-vk-mini{display:grid}
.hb-vk-mini>i{width:40px;height:40px}
.hb-vk-mini>i{display:grid;place-items:center;border-radius:50%;font-style:normal;font-size:16px;font-weight:600}
.hb-vk-mini .hb-was{background:var(--vk-sk);color:var(--vk-sec)}
.hb-vk-mini .hb-now{background:var(--gradient)}
.hb-vk-text{padding:8px 12px 10px;font-size:15px;line-height:20px}
.hb-vk-text .hb-was{color:var(--vk-sub)}
.hb-vk-img{position:relative;display:block;height:200px;background:var(--vk-sk)}
.hb-vk-img .hb-ph{position:absolute;inset:0;height:100%}
.hb-vk-acts{display:flex;align-items:center;gap:8px;padding:8px 12px 4px}
.hb-vk-acts>b{display:flex;align-items:center;gap:4px;height:32px;padding:0 12px 0 8px;border-radius:16px;background:var(--vk-alpha);
  color:var(--vk-icm);font-size:13px;line-height:16px;font-weight:500}
.hb-vk-acts>b svg{width:24px;height:24px}
.hb-vk-acts>span{display:flex;align-items:center;gap:4px;margin-left:auto;font-size:13px;color:var(--vk-ter)}
.hb-vk-acts>span svg{width:16px;height:16px}
.hb-vk-acts .is-liked{color:#FF3347;background:rgba(255,51,71,.08)}
/* Белая шапка ВКонтакте с названием - появляется, когда экран прокручен (та же кривая и время, что у прокрутки) */
.hb-vk-bar{position:absolute;left:0;right:0;top:0;z-index:28;background:var(--vk-c);box-shadow:0 1px 0 var(--vk-sep);opacity:0;pointer-events:none}
.hb-vk-bar .hb-phone-sb{position:relative;color:var(--vk-t)}
.hb-vk-bar-nav{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:6px;height:44px;padding:0 8px 0 4px;color:var(--vk-acc)}
.hb-vk-bar-nav b{font-size:17px;line-height:22px;font-weight:600;color:var(--vk-t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-vk-bar-nav span{display:flex;gap:12px}
.hb-vk-bar-nav svg{width:24px;height:24px}
.hb-vk-bar-nav svg.is-back{width:20px;height:28px}
.is-scroll .hb-vk-bar{animation:hb-vk-bar 7.5s linear var(--scroll-at,2.8s) both}
.is-before .is-scroll .hb-vk-bar{animation:none}
@keyframes hb-vk-bar{0%,9%{opacity:0}13%,86%{opacity:1}90%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hb-vk-bar{animation:none!important}}

/* ═══ 14. Макет канала Telegram ═══
   Порядок блоков как в приложении на телефоне: шапка (назад, название и подписчики, аватар), закреп, лента
   на узорном фоне, кнопка внизу. Фон - стандартный градиент Telegram, ночью - ночная тема. */
.hb-tg{--tg-acc:#3390EC;--tg-head:rgba(247,247,247,.94);--tg-t:#000;--tg-sec:#8D8E93;--tg-bub:#fff;--tg-sep:rgba(0,0,0,.14);
  --tg-pill:rgba(0,0,0,.22);--tg-react:rgba(51,144,236,.12);--tg-wall:linear-gradient(160deg,#DBDDBB,#6BA587 40%,#D5D88D 70%,#88B884);--tg-pat:rgba(0,0,0,.07);
  display:flex;flex-direction:column;background:var(--tg-wall);color:var(--tg-t);font-family:-apple-system,system-ui,"Helvetica Neue",Roboto,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hb-tg{--tg-acc:#5EA9F5;--tg-head:rgba(28,28,29,.95);--tg-t:#fff;--tg-sec:#8D8E93;--tg-bub:#262628;
  --tg-sep:rgba(255,255,255,.1);--tg-pill:rgba(255,255,255,.12);--tg-react:rgba(94,169,245,.16);--tg-wall:linear-gradient(160deg,#162019,#22362A 45%,#1A2A1F 75%,#2C3D26);--tg-pat:rgba(255,255,255,.05)}}
:root[data-theme="dark"] .hb-tg{--tg-acc:#5EA9F5;--tg-head:rgba(28,28,29,.95);--tg-t:#fff;--tg-sec:#8D8E93;--tg-bub:#262628;
  --tg-sep:rgba(255,255,255,.1);--tg-pill:rgba(255,255,255,.12);--tg-react:rgba(94,169,245,.16);--tg-wall:linear-gradient(160deg,#162019,#22362A 45%,#1A2A1F 75%,#2C3D26);--tg-pat:rgba(255,255,255,.05)}
.hb-tg .hb-phone-home{color:var(--tg-t)}
.hb-tg .hb-phone-sb{position:relative;color:var(--tg-t)}
.hb-tg-top{position:relative;z-index:2;background:var(--tg-head);box-shadow:0 .5px 0 var(--tg-sep);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hb-tg-head{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;height:46px;padding:0 10px}
.hb-tg-back{display:flex;align-items:center;gap:4px;font-size:16px;color:var(--tg-acc)}
.hb-tg-back svg{width:11px;height:19px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hb-tg-title{text-align:center;line-height:1.2;min-width:0}
.hb-tg-title b{display:block;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-tg-title small{font-size:12.5px;color:var(--tg-sec)}
.hb-tg-ava{justify-self:end;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--gradient)}
.hb-tg-ava svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hb-tg-pin{display:flex;align-items:center;gap:8px;padding:6px 12px 7px;border-top:.5px solid var(--tg-sep);font-size:13px;line-height:17px}
.hb-tg-pin>i{flex:none;align-self:stretch;width:2px;border-radius:2px;background:var(--tg-acc)}
.hb-tg-pin>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-tg-pin b{display:block;font-weight:600;color:var(--tg-acc)}
.hb-tg-pin>svg{flex:none;width:20px;height:20px;fill:var(--tg-sec)}
.hb-tg-chat{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:10px 8px 10px;overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23000' stroke-opacity='.09' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 20l4-8 4 8-4 3z'/%3E%3Ccircle cx='70' cy='18' r='7'/%3E%3Cpath d='M98 40c6-6 14 2 8 8l-8 8-8-8c-6-6 2-14 8-8z'/%3E%3Cpath d='M20 70h18v12H20zM24 70v-4h10v4'/%3E%3Cpath d='M64 74l14-8-4 16-4-5z'/%3E%3Cpath d='M100 92l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Cpath d='M30 104c4-6 12-6 16 0'/%3E%3C/svg%3E");
  background-size:120px 120px}
.hb-tg-chat>*{position:relative}
.hb-tg-date{align-self:center;margin-bottom:2px;padding:3px 10px;border-radius:12px;background:var(--tg-pill);color:#fff;font-size:12.5px;font-weight:500}
.hb-tg-msg{display:flex;align-items:flex-end;gap:6px;padding-right:2px}
.hb-tg-bub{position:relative;max-width:248px;border-radius:16px 16px 16px 6px;background:var(--tg-bub);box-shadow:0 1px 1px rgba(0,0,0,.14);overflow:hidden;
  font-size:14.5px;line-height:19px}
.hb-tg-bub p{margin:0;padding:7px 10px 2px}
.hb-tg-bub b{font-weight:600}
.hb-tg-bub.is-photo .hb-ph{height:128px}
.hb-tg-link{color:var(--tg-acc)}
.hb-tg-reacts{display:flex;gap:5px;padding:6px 10px 0}
.hb-tg-reacts i{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px 0 6px;border-radius:13px;background:var(--tg-react);color:var(--tg-acc);font-style:normal;font-size:13px;font-weight:600}
.hb-tg-reacts svg{width:16px;height:16px}
.hb-tg-meta{display:flex;align-items:center;justify-content:flex-end;gap:3px;padding:2px 10px 6px;font-size:11.5px;color:var(--tg-sec)}
.hb-tg-meta svg{width:14px;height:14px;fill:currentColor}
.hb-tg-share{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tg-pill);margin-bottom:2px}
.hb-tg-share svg{width:16px;height:16px;fill:#fff}
.hb-tg-bottom{position:relative;z-index:2;display:grid;place-items:center;height:52px;padding-bottom:12px;background:var(--tg-head);box-shadow:0 -.5px 0 var(--tg-sep);
  color:var(--tg-acc);font-size:16px;font-weight:500}

/* ═══ 15. Макеты карт: Google Карты (.is-g) и 2ГИС (.is-2g) ═══
   Карта, строка поиска, булавка и лист места. Google - цвета Material 3 и карты Google (светлая и ночная),
   2ГИС - цвета сайта: настоящих цветов приложения в образце нет, рисуем схему и так подписываем. */
.hb-ma{--ma-land:#F1F3F4;--ma-blk:#E6E8EB;--ma-st:#FFFFFF;--ma-main:#FDE293;--ma-park:#CEEAD6;--ma-water:#AECBFA;--ma-sheet:#FFFFFF;
  --ma-t:#1F1F1F;--ma-sec:#5E5E5E;--ma-blue:#0B57D0;--ma-fill-t:#FFFFFF;--ma-tonal:#D3E3FD;--ma-tonal-t:#041E49;--ma-green:#188038;
  --ma-line:#E3E3E3;--ma-reply:#F1F3F4;--ma-pin:#EA4335;--ma-pin-in:#A50E0E;
  background:var(--ma-land);color:var(--ma-t);font-family:Roboto,-apple-system,system-ui,"Helvetica Neue",sans-serif}
.hb-ma.is-2g{--ma-land:#EFEDEA;--ma-blk:#E2DED8;--ma-main:#F6D58E;--ma-park:#D4E9C8;--ma-water:#B9D6F2;--ma-blue:#7B4FE0;--ma-tonal:#EEE8FD;
  --ma-tonal-t:#3F2A99;--ma-green:#1F8A5A;--ma-pin:#7B4FE0;--ma-pin-in:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hb-ma{--ma-land:#242F3E;--ma-blk:#2B3848;--ma-st:#38414E;--ma-main:#746855;--ma-park:#263C3F;
  --ma-water:#17263C;--ma-sheet:#1F1F1F;--ma-t:#E3E3E3;--ma-sec:#C4C7C5;--ma-blue:#A8C7FA;--ma-fill-t:#062E6F;--ma-tonal:#004A77;--ma-tonal-t:#C2E7FF;
  --ma-green:#6DD58C;--ma-line:#444746;--ma-reply:#2A2B2D}
  :root:not([data-theme="light"]) .hb-ma.is-2g{--ma-blue:#B39BFF;--ma-fill-t:#1B1033;--ma-tonal:#2E2650;--ma-tonal-t:#DCD2FF;--ma-pin:#B39BFF;--ma-pin-in:#1B1033}}
:root[data-theme="dark"] .hb-ma{--ma-land:#242F3E;--ma-blk:#2B3848;--ma-st:#38414E;--ma-main:#746855;--ma-park:#263C3F;
  --ma-water:#17263C;--ma-sheet:#1F1F1F;--ma-t:#E3E3E3;--ma-sec:#C4C7C5;--ma-blue:#A8C7FA;--ma-fill-t:#062E6F;--ma-tonal:#004A77;--ma-tonal-t:#C2E7FF;
  --ma-green:#6DD58C;--ma-line:#444746;--ma-reply:#2A2B2D}
:root[data-theme="dark"] .hb-ma.is-2g{--ma-blue:#B39BFF;--ma-fill-t:#1B1033;--ma-tonal:#2E2650;--ma-tonal-t:#DCD2FF;--ma-pin:#B39BFF;--ma-pin-in:#1B1033}
.hb-ma .hb-phone-sb,.hb-ma .hb-phone-home{color:var(--ma-t)}
.hb-ma-map{position:absolute;left:0;top:0;width:100%;height:240px}
.hb-ma-land{fill:var(--ma-land)}.hb-ma-blk rect{fill:var(--ma-blk)}.hb-ma-park{fill:var(--ma-park)}.hb-ma-water{fill:var(--ma-water)}
.hb-ma-st{fill:none;stroke:var(--ma-st);stroke-width:7}.hb-ma-main{fill:none;stroke:var(--ma-main);stroke-width:10;stroke-linecap:round}
.hb-ma-search{position:absolute;left:12px;right:12px;top:50px;z-index:3;display:flex;align-items:center;gap:12px;height:46px;padding:0 7px 0 14px;
  border-radius:23px;background:var(--ma-sheet);box-shadow:0 1px 4px rgba(0,0,0,.2);font-size:15.5px}
.hb-ma-search span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-ma-ic{flex:none;width:22px;height:22px;fill:var(--ma-sec)}
.hb-ma-search i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#7B4FE0;color:#fff;font-style:normal;font-weight:500;font-size:14px}
.hb-ma-pin{position:absolute;left:50%;top:116px;z-index:2;width:28px;height:28px;margin-left:-14px;animation:hb-pin .7s cubic-bezier(.2,.8,.2,1) .2s both}
.hb-ma-pin::before{content:"";position:absolute;inset:0;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--ma-pin);box-shadow:-1px 1px 3px rgba(0,0,0,.3)}
.hb-ma-pin::after{content:"";position:absolute;left:9px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--ma-pin-in)}
.is-before .hb-ma-pin{animation:none}
@keyframes hb-pin{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
.hb-ma-sheet{position:absolute;left:0;right:0;top:180px;height:600px;z-index:4;display:flex;flex-direction:column;gap:5px;padding:8px 16px 22px;
  border-radius:24px 24px 0 0;background:var(--ma-sheet);box-shadow:0 -1px 8px rgba(0,0,0,.14);overflow:hidden;font-size:14px;line-height:20px}
.hb-ma.is-2g .hb-ma-sheet{top:160px}
.hb-ma-sheet>*{flex:none}
/* Лист места поднимается, как если провести по нему пальцем вверх: видно отзыв и ответ, затем лист возвращается */
.is-scroll .hb-ma-sheet{animation:hb-phone-scroll 7.5s cubic-bezier(.45,0,.25,1) var(--scroll-at,3.6s) both}
.is-before .is-scroll .hb-ma-sheet{animation:none}
.hb-ma-handle{align-self:center;flex:none;width:32px;height:4px;border-radius:2px;background:var(--ma-line);margin-bottom:4px}
.hb-ma-name{font-size:22px;line-height:28px;font-weight:400;letter-spacing:-.01em}
.hb-ma-rate{display:flex;align-items:center;gap:5px;white-space:nowrap}
.hb-ma-sec{color:var(--ma-sec)}
.hb-ma-cat{margin-top:-4px}
.hb-ma-hours{color:var(--ma-sec)}
.hb-ma-hours em{font-style:normal;color:var(--ma-green)}
.hb-ma-btns{display:flex;gap:8px;margin:5px -16px 0;padding:0 16px;overflow:hidden}
.hb-ma-btns b{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 11px;border-radius:18px;background:var(--ma-tonal);
  color:var(--ma-tonal-t);font-size:14px;font-weight:500}
.hb-ma-btns b.is-fill{background:var(--ma-blue);color:var(--ma-fill-t)}
.hb-ma-btns svg{width:18px;height:18px;fill:currentColor}
.hb-ma-tabs{display:flex;gap:20px;margin:4px -16px 0;padding:0 16px;border-bottom:1px solid var(--ma-line);font-size:14px;font-weight:500;color:var(--ma-sec);white-space:nowrap}
.hb-ma-tabs i{font-style:normal;padding:9px 0 8px}
.hb-ma-tabs i:first-child{color:var(--ma-blue);box-shadow:inset 0 -3px 0 var(--ma-blue)}
.hb-ma-photos{position:relative;flex:none;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:4px;height:82px;margin-top:6px}
.hb-ma-photos>span{overflow:hidden;border-radius:4px}
.hb-ma-photos>span:first-child{border-radius:12px 4px 4px 12px}
.hb-ma-photos>span:nth-child(3){border-radius:4px 12px 12px 4px}
.hb-ma-photos .hb-empty{border-radius:12px;background:var(--ma-reply);color:var(--ma-sec)}
.hb-ma-prices{position:relative;flex:none;display:grid;margin-top:2px}
.hb-ma-prices>span:not(.hb-empty){display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--ma-line);font-size:13.5px}
.hb-ma-prices i{font-style:normal}
.hb-ma-prices b{font-weight:500;white-space:nowrap}
.hb-ma-prices .hb-empty{background:var(--ma-sheet);color:var(--ma-sec)}
.hb-ma-rev{display:grid;gap:4px;margin-top:8px}
.hb-ma-who{display:flex;align-items:center;gap:8px}
.hb-ma-who>i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#C27C0E;color:#fff;font-style:normal;font-size:14px}
.hb-ma-who b{display:block;font-size:13.5px;line-height:17px;font-weight:500}
.hb-ma-who small{display:flex;align-items:center;gap:6px;font-size:12px;line-height:15px;color:var(--ma-sec)}
.hb-ma-text{font-size:13.5px;line-height:19px}
.hb-ma-reply>span{padding:7px 10px 8px;border-radius:10px;background:var(--ma-reply);font-size:13px;line-height:18px}
.hb-ma-reply .hb-was{color:var(--ma-sec)}
.hb-ma-reply .hb-now{display:grid}
.hb-ma-reply .hb-now b{font-size:12.5px;font-weight:500}
.hb-ma-reply .hb-now .hb-dots,.hb-ma-reply .hb-now .hb-typed{grid-row:2;grid-column:1;align-self:start}
.hb-ma-reply .hb-dots{margin-top:6px;color:var(--ma-sec)}
@media (prefers-reduced-motion:reduce){.hb-ma-pin,.is-scroll .hb-ma-sheet{animation:none}}

/* ═══ 16. Площадки: сверка данных (отчёт) ═══ */
.hb-dc{width:100%;max-width:460px;padding:16px;border-radius:22px;background:var(--plate);border:1px solid var(--hair);box-shadow:var(--shadow-l);font-size:13px}
.hb-dc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.hb-dc-top b{display:block;font-size:16px;letter-spacing:-.01em}
.hb-dc-top small{font-size:12px;color:var(--muted)}
.hb-dc-count{text-align:right}
.hb-dc-count b{font-size:26px;line-height:1;font-variant-numeric:tabular-nums;color:var(--hb-ok);transition:color .4s ease;transition-delay:1.6s}
.is-before .hb-dc-count b{color:var(--hb-no);transition-delay:0s}
.hb-dc-row{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));align-items:center;gap:4px;padding:7px 0;border-top:1px solid var(--hair-soft)}
.hb-dc-row.is-head{border-top:0;padding-top:0;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.hb-dc-row.is-head i{font-style:normal;text-align:center}
.hb-dc-name{display:flex;align-items:center;gap:8px;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-dc-c{justify-self:center;display:inline-grid;font-style:normal}
.hb-dc-ok,.hb-dc-no{display:grid;place-items:center;width:22px;height:22px;border-radius:50%}
.hb-dc-ok{background:var(--hb-ok-bg);color:var(--hb-ok)}
.hb-dc-no{background:var(--hb-no-bg);color:var(--hb-no)}
.hb-dc-ok::before,.hb-dc-no::before{content:"";width:10px;height:10px;background:currentColor;-webkit-mask:var(--hb-ic) center/contain no-repeat;mask:var(--hb-ic) center/contain no-repeat}
.hb-dc-ok{--hb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.7 4.7L19.5 7'/%3E%3C/svg%3E")}
.hb-dc-no{--hb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}
.hb-dc-c.hb-sw>*{transition-delay:calc(var(--e,0ms) + 300ms)}
.hb-dc-c.hb-sw>.hb-now{transform:scale(.4)}
.hb-dc-c.hb-sw>.hb-was{transform:scale(1.3)}
.hb-dc-c.hb-sw>.hb-now,.is-before .hb-dc-c.hb-sw>.hb-was{transform:none}
.is-before .hb-dc-c.hb-sw>.hb-now{transform:scale(.4)}
.hb-dc-legend{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--muted)}
.hb-dc-legend span{display:inline-flex;align-items:center;gap:6px}
.hb-dc-legend b{width:16px;height:16px}
.hb-dc-legend b::before{width:8px;height:8px}
@media (max-width:420px){.hb-dc{padding:14px 12px}.hb-dc-row{grid-template-columns:116px repeat(4,minmax(0,1fr));gap:2px}.hb-dc-row.is-head{font-size:10px;letter-spacing:0}.hb-dc-name{font-size:12.5px;gap:6px}}

/* ═══ 17. Нейросети: замер и чат в телефоне ═══ */
.hb-zm{margin-top:12px;padding:18px 20px;border-radius:20px;background:var(--plate);border:1px solid var(--hair)}
.hb-zm-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px;margin-bottom:12px}
.hb-zm-top b{display:block;font-size:17px;letter-spacing:-.01em}
.hb-zm-top small{font-size:13px;color:var(--muted)}
.hb-zm-legend{display:flex;gap:14px;font-size:12.5px;color:var(--muted)}
.hb-zm-legend span{display:inline-flex;align-items:center;gap:6px}
.hb-zm-legend i,.hb-zm-dots i{width:12px;height:12px;border-radius:50%;background:var(--hair)}
.hb-zm-legend i.on{background:var(--violet)}
.hb-zm-row{display:grid;grid-template-columns:92px minmax(0,1fr) 48px;align-items:center;gap:12px;padding:7px 0;border-top:1px solid var(--hair-soft);font-size:14px}
.hb-zm-row b{font-weight:700}
.hb-zm-row em{font-style:normal;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.hb-zm-row em span{color:var(--ink)}
.hb-zm-dots{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:5px;justify-items:center}
.hb-zm-dots i{display:block;transition:background-color .35s ease;transition-delay:calc(var(--c,0ms) + 300ms)}
.hb-zm-dots i.on{background:var(--violet)}
.is-before .hb-zm-dots i.on{background:var(--hair)}
.hb-zm-dots i:nth-child(2){--c:45ms}.hb-zm-dots i:nth-child(3){--c:90ms}.hb-zm-dots i:nth-child(4){--c:135ms}.hb-zm-dots i:nth-child(5){--c:180ms}
.hb-zm-dots i:nth-child(6){--c:225ms}.hb-zm-dots i:nth-child(7){--c:270ms}.hb-zm-dots i:nth-child(8){--c:315ms}.hb-zm-dots i:nth-child(9){--c:360ms}
.hb-zm-dots i:nth-child(10){--c:405ms}.hb-zm-dots i:nth-child(11){--c:450ms}.hb-zm-dots i:nth-child(12){--c:495ms}.hb-zm-dots i:nth-child(13){--c:540ms}
.hb-zm-dots i:nth-child(14){--c:585ms}.hb-zm-dots i:nth-child(15){--c:630ms}.hb-zm-dots i:nth-child(16){--c:675ms}.hb-zm-dots i:nth-child(17){--c:720ms}
.hb-zm-dots i:nth-child(18){--c:765ms}.hb-zm-dots i:nth-child(19){--c:810ms}.hb-zm-dots i:nth-child(20){--c:855ms}
@media (max-width:640px){
  .hb-zm{padding:14px}
  .hb-zm-row{grid-template-columns:minmax(0,1fr) 40px;row-gap:6px;font-size:13px}
  .hb-zm-dots{grid-column:1 / -1;grid-row:2;gap:3px}
  .hb-zm-legend i,.hb-zm-dots i{width:10px;height:10px}
}
@media (prefers-reduced-motion:reduce){.hb-zm-dots i{transition:none}}
/* Чат нейросети: оформление сайта, не экран конкретной нейросети */
.hb-aic{display:flex;flex-direction:column;background:var(--plate);color:var(--ink);font-family:var(--sans)}
.hb-aic .hb-phone-sb{position:relative;color:var(--ink)}
.hb-aic .hb-phone-home{color:var(--ink)}
.hb-aic-head{display:grid;justify-items:center;padding:4px 0 10px;border-bottom:1px solid var(--hair-soft)}
.hb-aic-head b{font-size:15px}.hb-aic-head small{font-size:11.5px;color:var(--muted)}
.hb-aic-feed{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;padding:14px 12px;overflow:hidden;font-size:13.5px;line-height:1.45}
.hb-aic-q{align-self:flex-end;max-width:84%;padding:8px 12px;border-radius:16px 16px 4px 16px;background:var(--hair-soft)}
.hb-aic-a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;min-height:44px}
.hb-aic-a>i{width:26px;height:26px;border-radius:9px;background:var(--gradient);display:grid;place-items:center;color:#fff}
.hb-aic-a>i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.hb-aic-a>div{display:grid;align-content:start;gap:6px}
.hb-aic-a>div>.hb-dots{grid-area:1/1;margin-top:8px;color:var(--muted)}
.hb-aic-a p{grid-area:1/1;margin:0}
.hb-aic-a mark{background:color-mix(in srgb,var(--violet) 18%,transparent);color:var(--ink);font-weight:800;border-radius:5px;padding:0 3px}
.hb-aic-src{display:flex;flex-wrap:wrap;gap:5px}
.hb-aic-src span{font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--hair);border-radius:999px;padding:1px 8px}
.hb-aic-input{display:flex;align-items:center;justify-content:space-between;margin:0 10px 26px;padding:6px 6px 6px 16px;border-radius:22px;border:1px solid var(--hair);
  font-size:13.5px;color:var(--muted)}
.hb-aic-input i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--btn-bg);color:var(--btn-ink)}
.hb-aic-input svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ═══ 18. /proverka/: отчёт в мессенджере (оформление сайта, не конкретный мессенджер) ═══ */
.hb-msg{display:flex;flex-direction:column;background:var(--surface);color:var(--ink);font-family:var(--sans)}
.hb-msg .hb-phone-sb{position:relative;color:var(--ink);background:var(--plate)}
.hb-msg .hb-phone-home{color:var(--ink)}
.hb-msg-head{display:flex;align-items:center;gap:10px;padding:4px 12px 10px;background:var(--plate);border-bottom:1px solid var(--hair-soft)}
.hb-msg-head>svg{width:10px;height:18px;fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hb-msg-ava{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--gradient);color:#fff;font-size:12px;font-weight:800}
.hb-msg-head b{display:block;font-size:14.5px}
.hb-msg-head small{font-size:11.5px;color:var(--hb-ok);font-weight:600}
.hb-msg-feed{flex:1;display:flex;flex-direction:column;gap:7px;padding:10px 10px 30px;overflow:hidden;font-size:13px;line-height:1.4}
.hb-msg-date{align-self:center;padding:2px 10px;border-radius:10px;background:var(--hair);font-size:11px;font-weight:700;color:var(--muted)}
.hb-msg-in,.hb-msg-out{position:relative;margin:0;max-width:88%;padding:7px 11px 16px;border-radius:14px 14px 14px 4px;background:var(--plate);
  box-shadow:0 1px 2px rgba(15,18,38,.08)}
.hb-msg-in small,.hb-msg-out small{position:absolute;right:9px;bottom:3px;font-size:10px;color:var(--muted)}
.hb-msg-in>b{display:block;margin-bottom:4px}
.hb-msg-in ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.hb-msg-in li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:6px;align-items:center}
.hb-msg-in li .hb-pv-tag{width:18px;height:18px;padding:0;justify-content:center;border-radius:50%}
.hb-msg-file{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center}
.hb-msg-file i{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--gradient);color:#fff;font-style:normal;font-size:11px;font-weight:800}
.hb-msg-file span{font-size:11.5px;color:var(--muted)}
.hb-msg-file b{display:block;font-size:13px;color:var(--ink)}
.hb-msg-out{align-self:flex-end;display:grid;min-width:64px;border-radius:14px 14px 4px 14px;background:color-mix(in srgb,var(--violet) 22%,var(--plate))}
.hb-msg-out>*{grid-area:1/1}
.hb-msg-out .hb-dots{color:var(--accent);margin:4px 0}
.hb-msg-out .hb-typed{padding-right:32px}

/* ═══ 19. Аудитория площадок: проценты на радаре и график с источниками ═══ */
.hb-chip em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--accent);margin-left:1px;font-variant-numeric:tabular-nums}
.hb-radar.is-live .hb-chip:not(.is-on) em{opacity:.5}
.hb-radar-note{margin:10px auto 0;width:min(100%,520px);font-size:12px;line-height:1.45;color:var(--muted);text-align:center}
.hb-radar-note a{color:var(--accent);font-weight:700;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--violet) 40%,transparent)}
@media (max-width:560px){.hb-chip em{font-size:9.5px}}
.hb-aud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px;scroll-margin-top:90px}
.hb-aud-col{display:flex;flex-direction:column;gap:8px;min-width:0;padding:18px 20px;border-radius:20px;background:var(--plate);border:1px solid var(--hair)}
.hb-aud-h{font-size:17px;letter-spacing:-.015em}
.hb-aud-base{font-size:12.5px;line-height:1.4;color:var(--muted)}
.hb-aud-base b{color:var(--ink);font-size:15px}
.hb-bars{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:9px}
.hb-bars li{display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:auto 8px;column-gap:10px;row-gap:5px;align-items:center;font-size:14px}
.hb-bars li>span{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-bars li>span small{font-size:12px;font-weight:600;color:var(--muted)}
.hb-bars li>span a{font-size:12px;font-weight:700;color:var(--accent);text-decoration:none}
.hb-bars li>b{grid-row:1 / 3;grid-column:2;justify-self:end;font-size:18px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hb-bars li>i{grid-column:1;display:block;height:8px;border-radius:4px;background:var(--hair-soft);overflow:hidden}
.hb-bars li>i>i{display:block;height:100%;border-radius:4px;background:var(--gradient);transform-origin:0 50%;transform:scaleX(var(--v));
  transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0ms) + var(--e,0ms) + 250ms)}
.hb-bars li.is-other>i>i{background:var(--muted);opacity:.45}
.hb-bars li.is-other>b{color:var(--muted)}
.is-before .hb-bars li>i>i{transform:scaleX(0)}
/* полоса у малых долей видна хотя бы точкой */
.hb-bars li>i>i{min-width:4px}
.hb-aud-src{margin:auto 0 0;padding-top:6px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.hb-aud-src a{color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--muted) 45%,transparent);text-underline-offset:2px}
@media (max-width:980px){.hb-aud{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.hb-bars li>i>i{transition:none}}

/* ═══ 20. Главная: репутация (SERM) и личный кабинет ═══ */
.hb-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hb-duo-item{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px 14px 22px;border-radius:22px;background:var(--plate);border:1px solid var(--hair)}
.hb-duo-item>:not(:first-child){margin-left:6px;margin-right:6px}
.hb-duo-item>.hb-place-k{margin-top:10px}
.hb-duo-item h3{margin:0;font-size:clamp(19px,1.8vw,22px);letter-spacing:-.02em;line-height:1.2}
.hb-duo-item .hb-list{margin-top:6px}
@media (max-width:900px){.hb-duo{grid-template-columns:1fr}}
/* Отзывы со всех площадок: новый плохой отзыв отмечен, ответ компании печатается */
.hb-rep,.hb-cab{display:flex;flex-direction:column;gap:8px;min-height:236px;padding:12px;border-radius:16px;background:var(--surface);border:1px solid var(--hair-soft);font-size:13px;line-height:1.35}
.hb-rep-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hb-rep-top b{font-size:14px}
.hb-rep-top span{font-size:11.5px;color:var(--muted)}
.hb-rep-rows{display:grid;gap:6px}
.hb-rep-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px 9px;border-radius:10px;background:var(--plate);border:1px solid var(--hair-soft)}
.hb-rep-row>span:nth-child(2){display:grid;gap:2px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.hb-rep-row.is-neg{border-color:color-mix(in srgb,var(--magenta) 40%,var(--hair))}
.hb-rep-new{font-style:normal;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;color:#fff;background:var(--magenta)}
.hb-rep-ans{display:grid;margin:0 0 0 24px;padding:8px 10px;border-radius:12px 12px 12px 4px;background:color-mix(in srgb,var(--violet) 14%,var(--plate));min-height:62px;align-content:start}
.hb-rep-ans b{font-size:11.5px;color:var(--accent)}
.hb-rep-ans .hb-dots,.hb-rep-ans .hb-typed{grid-row:2;grid-column:1}
.hb-rep-ans .hb-dots{margin-top:6px;color:var(--accent)}
.hb-duo .hb-dots{animation-delay:calc(var(--t,0s) + var(--d,0ms))}
.hb-duo .hb-typed{transition-delay:calc(var(--t,0s) + var(--d,0ms) + 1.15s)}
/* Личный кабинет: отчёты по месяцам и ход работ */
.hb-cab-top{display:grid;grid-template-columns:32px minmax(0,1fr) 28px;align-items:center;gap:9px}
.hb-cab-logo{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--gradient);color:#fff;font-size:11px;font-weight:800}
.hb-cab-top b{display:block;font-size:14px}
.hb-cab-top small{font-size:11.5px;color:var(--muted)}
.hb-cab-top>i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--hair);font-style:normal;font-weight:800;font-size:12px;color:var(--muted)}
.hb-cab-tabs{display:flex;gap:16px;border-bottom:1px solid var(--hair);font-size:12.5px;font-weight:700;color:var(--muted)}
.hb-cab-tabs i{font-style:normal;padding:2px 0 7px}
.hb-cab-tabs i:first-child{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.hb-cab-list{display:grid;gap:5px}
.hb-cab-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px 9px;border-radius:10px;background:var(--plate);border:1px solid var(--hair-soft)}
.hb-cab-row svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hb-cab-row b{font-weight:700}
.hb-cab-row em{font-style:normal;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:999px;color:var(--hb-ok);background:var(--hb-ok-bg)}
.hb-cab-row>span{font-size:12px;font-weight:700;color:var(--accent)}
.hb-cab-row.is-new{border-color:color-mix(in srgb,var(--violet) 45%,var(--hair));box-shadow:0 6px 16px color-mix(in srgb,var(--violet) 16%,transparent)}
.hb-cab-work{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;margin-top:auto;padding:9px 10px;border-radius:10px;background:var(--plate);border:1px solid var(--hair-soft)}
.hb-cab-work>span{font-weight:600}
.hb-cab-work>b{font-variant-numeric:tabular-nums}
.hb-cab-work>i{grid-column:1 / -1;display:block;height:7px;border-radius:4px;background:var(--hair-soft);overflow:hidden}
.hb-cab-work>i>i{display:block;height:100%;border-radius:4px;background:var(--gradient);transform-origin:0 50%;transform:scaleX(var(--v));
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0ms) + 500ms)}
.is-before .hb-cab-work>i>i{transform:scaleX(.05)}
@media (prefers-reduced-motion:reduce){.hb-cab-work>i>i{transition:none}}
/* С процентами плашки шире: на 320-400 px и 1001-1180 px центр уже, плашки мельче (замер наложений 14.10.2026) */
@media (min-width:1001px) and (max-width:1180px){.hb-core{width:40%;padding:12px}.hb-chip{font-size:11.5px;padding:5px 9px 5px 6px}
  .hb-chip[data-p="gis"],.hb-chip[data-p="tg"]{--y:-23%}.hb-chip[data-p="zoon"],.hb-chip[data-p="vk"]{--y:23%}}
@media (max-width:400px){
  .hb-core{width:44%;padding:8px}
  .hb-core-ava{width:26px;height:26px;font-size:12px}
  .hb-core-name{font-size:12px}
  .hb-core-kind{font-size:10.5px}
  .hb-core-score{margin-top:8px}
  .hb-core-score b{font-size:19px}
  .hb-chip{font-size:10.5px;padding:3px 7px 3px 4px;gap:3px}
  .hb-chip i{width:14px;height:14px}
  .hb-chip em{font-size:9px}
  .hb-chip[data-p="gis"],.hb-chip[data-p="zoon"]{--x:30.5%}
  .hb-chip[data-p="tg"],.hb-chip[data-p="vk"]{--x:-30.5%}
  .hb-chip[data-p="gis"],.hb-chip[data-p="tg"]{--y:-24%}
  .hb-chip[data-p="zoon"],.hb-chip[data-p="vk"]{--y:24%}
  .hb-chip[data-p="prodoc"]{--y:32.5%}
  .hb-chip[data-p="giga"],.hb-chip[data-p="deep"]{--y:41%}
}
@media (max-width:340px){
  .hb-chip[data-p="gis"],.hb-chip[data-p="tg"]{--y:-26%}
  .hb-chip[data-p="zoon"],.hb-chip[data-p="vk"]{--y:26%}
  .hb-chip[data-p="google"]{--y:-34.5%}
  .hb-chip[data-p="gpt"],.hb-chip[data-p="alice"]{--y:-43%}
  .hb-chip[data-p="prodoc"]{--y:35%}
  .hb-chip[data-p="giga"],.hb-chip[data-p="deep"]{--y:44%}
  .hb-chip[data-p="giga"]{--x:31%}.hb-chip[data-p="deep"]{--x:-31%}
}

/* ═══ 21. Основа для нейросетей (/nejroseti/#osnova) и пометка у тарифа ═══
   Опоры собираются снизу вверх (--k - номер опоры), ответ нейросети сверху меняется на «с вашей компанией». */
.hb-base{width:100%;max-width:440px;display:grid;gap:12px;padding:18px 16px;border-radius:22px;background:var(--plate);border:1px solid var(--hair);box-shadow:var(--shadow-l)}
.hb-base-top{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;padding:10px 12px;border-radius:14px;
  background:color-mix(in srgb,var(--violet) 10%,var(--surface));font-size:13.5px;line-height:1.4;font-weight:600}
.hb-base-top>i{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--gradient);color:#fff}
.hb-base-top svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.hb-base-top b{color:var(--accent)}
.hb-base-top .hb-was{color:var(--muted)}
.hb-base-stack{display:grid;gap:6px;justify-items:center}
.hb-base-row{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;width:var(--w);
  padding:9px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--hair-soft);
  transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k)*170ms + 150ms)}
.hb-base-row>i{grid-row:1 / 3;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--hb-ok-bg);color:var(--hb-ok)}
.hb-base-row svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hb-base-row b{font-size:14px;line-height:1.25}
.hb-base-row em{font-style:normal;font-size:12px;color:var(--muted)}
.is-before .hb-base-row{opacity:.35;transform:translateY(-14px) scale(.97)}
.is-before .hb-base-row>i{background:var(--hb-no-bg);color:var(--hb-no)}
.hb-base-row>i{transition:background-color .4s ease,color .4s ease;transition-delay:calc(var(--k)*170ms + 150ms)}
.hb-base .hb-sw>*{transition-delay:900ms}
.is-before .hb-base .hb-sw>*{transition-delay:0ms}
.hb-plan-need{margin:12px 0 0;padding:9px 11px;border-radius:12px;font-size:13px;line-height:1.45;color:var(--ink);
  background:color-mix(in srgb,var(--violet) 9%,transparent);border:1px dashed color-mix(in srgb,var(--violet) 40%,var(--hair))}
.hb-plan-need a{color:var(--accent);font-weight:700}
@media (prefers-reduced-motion:reduce){.hb-base-row,.hb-base-row>i{transition:none}}