/* ==========================================================================
   CYBER BOOST - фирменный слой страниц вендоров (64 страницы × RU / UZ / EN)
   --------------------------------------------------------------------------
   Подключается последним: после tailwind.css, vendor-page.css, инлайн-
   стилей страницы и cb.css (apply-chrome.js). Первый экран, кнопки и
   поверхности - в системе CYBER BOOST: ночной зелёный, решётка-панджара,
   фирменная зелёная кнопка. Вендор узнаётся по логотипу и сдержанному
   акценту в мелких метках и иконках.
   Цвет вендора приходит из <style data-cb-accent>, который apply-chrome.js
   пишет на каждой странице после этого файла:
     --v      исходный цвет вендора;
     --v-ink  он же, затемнённый до 5.2:1 на белом - для светлых блоков;
     --v-lit  он же, высветленный до 5:1 на ночном - для тёмных блоков.
   Правила ниже берут --v-fg: нужный оттенок для фона, на котором стоит
   элемент. !important нужен только там, где цвет задан атрибутом style.
   ========================================================================== */

/* ── 0. Оттенки вендора и контекст фона ─────────────────────────────── */
:root{--v-ink:var(--cb-brand-ink);--v-lit:var(--cb-brand-bright)}
.cb-vendor{--v-fg:var(--v-ink)}
/* Первый экран - фирменная зона: акценты фирменным светлым зелёным */
.cb-vendor main > section:first-of-type{--v-fg:var(--cb-brand-bright)}
/* Тёмные полосы и тёмные панели-макеты */
.cb-vendor main > section:not(:first-of-type):is([style*="color:#fff"],[style*="color: #fff"],[style*="color:#FFF"]),
.cb-vendor :is(.bg-ink,.modpill-dark,.tag-dark){--v-fg:var(--v-lit)}
/* Светлые карточки внутри тёмных блоков */
.cb-vendor main :is(.bg-white,.fcard,.statblock,.step,.modpill:not(.modpill-dark),.mail-mock){--v-fg:var(--v-ink)}

/* ── 1. Первый экран ─────────────────────────────────────────────────── */
.cb-vendor main > section:first-of-type{
  position:relative;isolation:isolate;
  background:var(--cb-night) !important;color:#fff}
/* Решётка-панджара: восьмиконечные звёзды тонкой линией, гаснет к тексту */
.cb-vendor main > section:first-of-type::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M40 13 67 40 40 67 13 40Z'/%3E%3Cpath d='M21 21H59V59H21Z'/%3E%3Cpath d='M40 0V13M40 67V80M0 40H13M67 40H80M0 0 21 21M80 0 59 21M0 80 21 59M80 80 59 59'/%3E%3C/g%3E%3C/svg%3E");
  background-size:80px 80px;background-position:right -1px top -1px;opacity:.085;
  -webkit-mask-image:radial-gradient(85% 90% at 92% 12%,#000 0%,rgba(0,0,0,.5) 42%,transparent 76%);
          mask-image:radial-gradient(85% 90% at 92% 12%,#000 0%,rgba(0,0,0,.5) 42%,transparent 76%)}
/* Тёплый свет сквозь решётку - как на главной, но неподвижный */
.cb-vendor main > section:first-of-type::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(36% 48% at 84% 22%,rgba(231,179,105,.11),transparent 72%),
             linear-gradient(180deg,rgba(6,17,11,0) 55%,rgba(6,17,11,.55) 100%)}
/* Прежние декоративные слои вендоров: свечения, сетки, кольца, волны */
.cb-vendor main > section:first-of-type > .pointer-events-none,
.cb-vendor main > section:first-of-type > [aria-hidden="true"]{display:none !important}

.cb-vendor main > section:first-of-type h1{color:#fff !important}
/* Выделенные слова заголовка и подзаголовок - фирменный светлый зелёный
   (внутри светлых макетов первого экрана - читаемый оттенок вендора) */
.cb-vendor main > section:first-of-type :is(.v-accent,.text-v-accent,h1 .text-transparent,h1 [style*="color"]),
.cb-vendor .v-hero h1 + p{
  color:var(--v-fg) !important;background:none !important;
  -webkit-text-fill-color:currentColor !important;-webkit-background-clip:border-box !important;background-clip:border-box !important}
/* Точка в метке - фирменная, без пульсации */
.cb-vendor main > section:first-of-type :is(.bg-v-accent,[style*="background:var(--accent-teal)"],[style*="background:var(--vendor-accent)"]):not(a){
  background:var(--cb-brand-bright) !important}
.cb-vendor .animate-pulse{animation:none !important}

/* Первый экран виден сразу: только мягкий подъём, без прозрачности -
   так браузер рисует заголовок в первом же кадре (FCP / LCP) */
.cb-vendor main > section:first-of-type .reveal{
  opacity:1 !important;filter:none !important;transition:none !important;transform:none;
  animation:cbv-rise .8s var(--cb-ease) both}
.cb-vendor main > section:first-of-type .reveal[data-delay="1"]{animation-delay:.05s}
.cb-vendor main > section:first-of-type .reveal[data-delay="2"]{animation-delay:.1s}
.cb-vendor main > section:first-of-type .reveal[data-delay="3"]{animation-delay:.15s}
.cb-vendor main > section:first-of-type .reveal[data-delay="4"]{animation-delay:.2s}
@keyframes cbv-rise{from{transform:translate3d(0,12px,0)}to{transform:none}}
/* Без JS остальные блоки тоже видны (инлайн-стили прятали их всегда) */
html:not(.cb-js) body.cb-vendor .reveal{opacity:1 !important;transform:none !important;filter:none !important}

/* Метки, плашки и панель фактов: плоские поверхности вместо «стекла» */
.cb-vendor :is(.backdrop-blur,.glass,[class*="backdrop-blur"]){-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.cb-vendor .v-hero .lg\:col-span-5 > .rounded-2xl{background:rgba(255,255,255,.035) !important;border-color:rgba(255,255,255,.12) !important}
.cb-vendor .v-hero .lg\:col-span-5 .display{font-weight:500 !important;letter-spacing:-.02em}

/* Светлые первые экраны (Barracuda, CybeReady, ESET) переводим в ночные:
   перекрашиваем только крошки и текстовую колонку, макет справа не трогаем */
.cb-vendor main > section:first-of-type:is(.brc-hero,.cbr-hero,.eset-hero) > .relative > .reveal:first-child :is(a,.text-muted,svg){color:rgba(255,255,255,.58) !important}
.cb-vendor main > section:first-of-type:is(.brc-hero,.cbr-hero,.eset-hero) > .relative > .reveal:first-child .text-ink{color:#fff !important}
.cb-vendor main > section:first-of-type:is(.brc-hero,.cbr-hero,.eset-hero) .lg\:col-span-7 .text-muted{color:rgba(255,255,255,.66) !important}
.cb-vendor main > section:first-of-type:is(.brc-hero,.cbr-hero,.eset-hero) .lg\:col-span-7 :is(.text-ink,.text-ink2){color:rgba(255,255,255,.82) !important}
.cb-vendor main > section:first-of-type:is(.brc-hero,.cbr-hero,.eset-hero) .lg\:col-span-7 .text-line{color:rgba(255,255,255,.26) !important}
.cb-vendor main > section:first-of-type:is(.brc-hero,.cbr-hero,.eset-hero) .lg\:col-span-7 > .reveal.inline-flex{
  background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:none !important}
.cb-vendor main > section:first-of-type:is(.brc-hero,.cbr-hero,.eset-hero) .lg\:col-span-7 a.bg-white{
  background:transparent !important;color:#fff !important;border-color:rgba(255,255,255,.3) !important}

/* ── 2. Кнопки: главное действие везде фирменное ─────────────────────── */
.cb-vendor :is(a[href="#contact"].rounded-full:not(.cb-btn),.btn-teal,.btn-accent,a.bg-v-accent){
  background:var(--cb-brand-ink) !important;color:#fff !important;border-color:transparent !important;opacity:1 !important;
  box-shadow:0 12px 26px -16px rgba(14,109,44,.75);
  transition:background-color var(--cb-d2) var(--cb-ease),box-shadow var(--cb-d2) var(--cb-ease) !important}
.cb-vendor :is(a[href="#contact"].rounded-full:not(.cb-btn),.btn-teal,.btn-accent,a.bg-v-accent):hover{background:var(--cb-brand-deep) !important}
.cb-vendor :is(a[href="#contact"].rounded-full:not(.cb-btn),.btn-teal,.btn-accent,a.bg-v-accent) > span:last-child{background:rgba(255,255,255,.16) !important}

/* ── 3. Акцент вендора - мелкий текст и иконки, читаемым оттенком ────── */
.cb-vendor main :is(.text-v-accent,.v-accent,.modcode,.accent-strip),
.cb-vendor main :is([style^="color:var(--accent-teal)"],[style*=";color:var(--accent-teal)"],[style^="color:var(--vendor-accent)"],[style*=";color:var(--vendor-accent)"],[style^="color:var(--accent)"],[style*=";color:var(--accent)"]){
  color:var(--v-fg) !important}
.cb-vendor .ficon svg{color:var(--v-fg)}
.cb-vendor details.faq[open] summary .ico{background:var(--v-ink)}
/* Плашки цвета вендора с текстом или значком - тёмным оттенком под белое */
.cb-vendor main .bg-v-accent:not(a):not(.rounded-full){background:var(--v-ink) !important}
/* Крупные цифры-факты - чернилами, без «рекламного» цвета */
.cb-vendor :is(.statnum,.statblock .num){color:var(--cb-ink)}
/* Шаги - настоящая последовательность: номер читаемый, но тише заголовка */
.cb-vendor .step .stepnum{opacity:1;color:var(--v-fg);font-weight:500}

/* Надзаголовки секций - в ритме фирменного .cb-kicker с главной:
   13 px, умеренная разрядка, тонкая линия перед текстом */
.cb-vendor .accent-strip{font-size:.8125rem;font-weight:600;letter-spacing:.06em;gap:10px}
.cb-vendor .accent-strip::before{width:28px;height:1px;background:currentColor;opacity:.7}
.cb-vendor main .tracking-widest[style^="color:var(--accent-teal)"]{
  display:inline-flex;align-items:center;gap:10px;font-size:.8125rem !important;letter-spacing:.06em !important}
.cb-vendor main .tracking-widest[style^="color:var(--accent-teal)"]::before{
  content:"";flex:none;width:28px;height:1px;background:currentColor;opacity:.7}

/* Плашка с логотипом: нейтральная поверхность вместо пастели вендора */
.cb-vendor .logo-banner{background:var(--cb-surface) !important;border-color:var(--cb-line) !important}
.cb-vendor .logo-banner .rounded-full{background:var(--cb-paper) !important;color:var(--cb-ink-2) !important;box-shadow:inset 0 0 0 1px var(--cb-line)}

/* ── 4. Таблицы сравнения: состояния читаемы (WCAG AA) ──────────────── */
.cb-vendor :is(.check,.check-k){color:var(--cb-brand-ink) !important}
.cb-vendor :is(.dash,.no-check,.cmp .no,.cmp td.muted){color:var(--cb-muted) !important}
.cb-vendor .partial{color:#8a5100 !important}
/* Выделенная колонка тарифа: белый текст на тёмном оттенке вендора */
.cb-vendor th.highlight{background:var(--v-ink) !important}
.cb-vendor th.highlight *{color:#fff !important}
/* Метка «Без: / С:» в мобильной таблице Cloudflare - без полупрозрачности */
.cb-vendor .cmp-tag{opacity:1}
/* Стрелки-связки в схемах - видимые, но тише текста */
.cb-vendor :is(.arrow,.pipe-arrow){color:var(--cb-muted)}

/* ── 5. Плавность только там, где что-то меняется ───────────────────── */
.cb-vendor :is(.fcard,.modpill,.uc-card,.rv-card,.int-chip,details.faq,.statblock){
  transition-property:border-color,box-shadow,transform,background-color,color !important}

@media (prefers-reduced-motion:reduce){
  .cb-vendor main > section:first-of-type .reveal{animation:none}
}

/* ── 6. Панели первого экрана, рассчитанные на светлый фон (Barracuda, ESET) ─ */
.cb-vendor main > section:first-of-type:is(.brc-hero,.eset-hero) .lg\:col-span-5 > .rounded-3xl{
  background:rgba(255,255,255,.04) !important;border-color:rgba(255,255,255,.12) !important;box-shadow:none !important}
.cb-vendor main > section:first-of-type:is(.brc-hero,.eset-hero) .lg\:col-span-5 .text-muted{color:rgba(255,255,255,.62) !important}
.cb-vendor main > section:first-of-type:is(.brc-hero,.eset-hero) .lg\:col-span-5 .bg-surface{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.1) !important}
.cb-vendor main > section:first-of-type:is(.brc-hero,.eset-hero) .lg\:col-span-5 .border-line{border-color:rgba(255,255,255,.12) !important}

/* ── 7. Kaspersky: созвездие в фирменных цветах (анимация и свечение
      убраны из самой страницы) ───────────────────────────────────────── */
.cb-vendor .constellation .dot{background:var(--cb-brand-bright) !important;box-shadow:none !important}
.cb-vendor .constellation .dot.big{background:var(--cb-brand) !important}
.cb-vendor .constellation .net line{stroke:rgba(91,198,99,.24) !important}

/* ── 8. Диаграммы и макеты интерфейсов ──────────────────────────────── */
.cb-vendor .pillars .core,.cb-vendor .layers .l5{background:var(--v-ink) !important;border-color:var(--v-ink) !important}
.cb-vendor .pillars .arm .alabel{color:var(--v-fg)}
.cb-vendor .asset-row .tag-dot.shadow{color:#0b6b66}
/* Мелкие коды и метки в схемах - читаемым оттенком вендора */
.cb-vendor :is(.pipe-stage .stcode,.threat-row .tnum,.speed,.bait,.tl-mark,.journey .stp .stp-p){color:var(--v-fg)}
.cb-vendor .pillars .core .lbl{opacity:1}
.cb-vendor .topo .legend{color:var(--cb-muted)}
/* Red Sift: письмо без DMARC отмечено фоном и серым знаком, а не прозрачностью */
.cb-vendor .bimi-mail[style*="opacity"]{opacity:1 !important;background:var(--cb-surface)}
.cb-vendor .bimi-mail .b-logo{background:var(--v-ink);box-shadow:0 0 0 3px #fff,0 0 0 4px var(--v-ink)}
.cb-vendor .bimi-mail .b-logo[style*="#98a19c"]{background:var(--cb-muted) !important;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--cb-muted) !important}
.cb-vendor .bimi-mail .b-time{color:var(--cb-muted)}
.cb-vendor .journey .stp .stp-h{color:var(--cb-muted)}
.cb-vendor .journey .stp.active .stp-h{color:var(--v-ink)}
/* RedSeal: подписи узлов атаки - без полупрозрачности */
.cb-vendor .ap-node.danger .sub{opacity:1}
/* Fortinet: ядро Security Fabric - тёмный оттенок вендора без цветного свечения */
.cb-vendor .fabric .core{background:var(--v-ink);box-shadow:var(--cb-shadow-2)}
.cb-vendor .fabric .core .lbl{opacity:1}
.cb-vendor .appliance .model{color:var(--v-ink);background:color-mix(in oklab,var(--v-ink) 5%,#fff)}
/* Votiro: заголовок панели «вход» - читаемым оттенком вендора */
.cb-vendor .file-pair .panel:not(.good) .hd{color:var(--v-ink)}
/* BrandShield, Intezer: подписи в тёмных макетах */
.cb-vendor .feed .time{color:var(--cb-on-night-3)}
.cb-vendor .code-chip:not(.matched):not(.unknown){color:color-mix(in oklab,var(--v-lit) 75%,#fff)}
.cb-vendor .code-chip.unknown{color:var(--cb-on-night-3)}
/* CrowdStrike: точечная сетка шаблона - только фон первого экрана фирменный */
.cb-vendor main > section:not(:first-of-type) > .dots{display:none}
/* CybeReady: темы тренингов - лёгкий оттенок темы вместо пастельного
   градиента, цветные метки на нём читаемы; подпись под макетом письма -
   светлая, она стоит прямо на ночном фоне */
.cb-vendor .train-tile{background:color-mix(in oklab,var(--t-from,#fff4ed) 40%,#fff)}
.cb-vendor main > section:first-of-type.cbr-hero aside > .relative > .text-muted{color:var(--cb-on-night-3) !important}

/* ── 9. Телефон: ничего не шире экрана ──────────────────────────────── */
/* grid-элементы по умолчанию не сжимаются уже своего содержимого
   (white-space:nowrap, длинные хосты) - отсюда горизонтальная прокрутка */
.cb-vendor :is(.grid,.triage-row) > *{min-width:0}
@media (max-width:640px){
  /* Barracuda: пять направлений - списком вместо пятиугольника */
  .cb-vendor .pillars{aspect-ratio:auto;display:grid;gap:10px;max-width:none}
  .cb-vendor .pillars .line{display:none}
  .cb-vendor .pillars .core{position:static;transform:none;width:auto;height:auto;padding:18px 20px;border-radius:16px;justify-items:start;text-align:left}
  .cb-vendor .pillars .arm{position:static !important;transform:none !important;width:auto;box-shadow:none}
  /* ESET: подписи слоёв остаются внутри круга */
  .cb-vendor .layers .tag-on-ring{font-size:10.5px;padding:4px 8px;max-width:46%;white-space:normal;text-align:center;line-height:1.25}
  .cb-vendor .layers .tag-on-ring[style*="left:96%"]{left:100% !important;transform:translate(-100%,-50%)}
  .cb-vendor .layers .tag-on-ring[style*="left:4%"]{left:0 !important;transform:translate(0,-50%)}
  .cb-vendor .layers .tag-on-ring[style*="left:79%"]{transform:translate(-72%,-50%)}
  .cb-vendor .layers .tag-on-ring[style*="left:21%"]{transform:translate(-28%,-50%)}
  /* ImmuniWeb: строка актива - в две колонки */
  .cb-vendor .asset-row{grid-template-columns:auto minmax(0,1fr);gap:10px 14px;padding:14px 16px}
  .cb-vendor .asset-row > :nth-child(n+3){grid-column:2}
  .cb-vendor .asset-row .grade{width:44px;height:44px;font-size:21px;border-radius:12px}
  .cb-vendor .asset-row .host{overflow-wrap:anywhere}
}
/* Цифры-факты бывают словами («Immutable», «Geo+Industry»): на телефоне
   кегль меньше, а неразрывное слово в крайнем случае переносится */
.cb-vendor :is(.statnum,.statblock .num){overflow-wrap:anywhere}
@media (max-width:640px){.cb-vendor :is(.statnum,.statblock .num){font-size:clamp(21px,6vw,30px)}}

/* ── 10. Большие цветовые поля - фирменные поверхности ─────────────── */
/* Пастельные полосы фактов в цвет вендора → фирменная светлая поверхность */
.cb-vendor main > section:is([style*="linear-gradient(135deg,#F"],[style*="linear-gradient(135deg,#E"],[style*="linear-gradient(135deg,#D"]){
  background:var(--cb-surface) !important}
/* Тёмные полосы в цветах вендоров (синие, фиолетовые) → ночной зелёный */
.cb-vendor main > section:not(:first-of-type):is([style*="linear-gradient(180deg,#0"],[style*="linear-gradient(180deg, #0"],[style*="linear-gradient(180deg,#1"],[style*="linear-gradient(180deg, #1"],[style*="linear-gradient(180deg,#2"],[style*="linear-gradient(180deg, #2"]){
  background:var(--cb-night) !important}
.cb-vendor main > section:not(:first-of-type)[style*="linear-gradient(180deg"] > .pointer-events-none{display:none}
/* Заявка внизу страницы повторяет фон первого экрана (Barracuda, CybeReady,
   TrapX): светлые - фирменная светлая поверхность, тёмный - ночной */
.cb-vendor main > section:not(:first-of-type):is(.brc-hero,.cbr-hero){background:var(--cb-surface) !important}
.cb-vendor main > section:not(:first-of-type).trp-hero{background:var(--cb-night) !important;--v-fg:var(--v-lit)}
.cb-vendor main > section:not(:first-of-type):is(.brc-hero,.cbr-hero,.trp-hero) > [aria-hidden="true"]{display:none}
@media (max-width:640px){.cb-vendor .statblock{padding:16px}}

/* ── 11. Текст в тёмных полосах ─────────────────────────────────────── */
/* Мелкий белый текст на тёмном - не прозрачнее 62%: при 40-50% контраст
   на ночном фоне и тёмных панелях ниже 4.5:1 */
.cb-vendor :is(.text-white\/30,.text-white\/35,.text-white\/40,.text-white\/45,.text-white\/50){color:rgba(255,255,255,.62)}
/* Списки .bullets рассчитаны на белый фон: в тёмной полосе - светлым */
.cb-vendor main > section:not(:first-of-type):is([style*="color:#fff"],[style*="color: #fff"],[style*="color:#FFF"]) ul.bullets li,
.cb-vendor .bg-ink ul.bullets li{color:var(--cb-on-night-2)}
.cb-vendor main > section:not(:first-of-type):is([style*="color:#fff"],[style*="color: #fff"],[style*="color:#FFF"]) ul.bullets li :is(strong,b),
.cb-vendor .bg-ink ul.bullets li :is(strong,b){color:#fff}