/* =========================================================================
   Berg Blocks — WPBakery section widgets
   Единая дизайн-система из HTML-шаблонов (Product / Blog).
   Все классы с префиксом .bb- чтобы не конфликтовать со стилями темы.
   ========================================================================= */

:root{
  --bb-ink:#0E2233;        /* тёмно-синий, заголовки */
  --bb-ink-2:#1B1C1D;      /* футер */
  --bb-teal:#006A8E;       /* акцент */
  --bb-teal-d:#005173;     /* акцент hover */
  --bb-amber:#F79F00;      /* кнопка */
  --bb-amber-h:#ffb02e;    /* кнопка hover */
  --bb-gray:#F1F0F0;       /* светлый фон секции */
  --bb-gray-2:#F7F7F7;     /* альт. фон секции */
  --bb-line:#e3e6e8;       /* границы */
  --bb-line-2:#c6c9ca;     /* границы 2 */
  --bb-text:#26323a;       /* body текст */
  --bb-text-2:#3f4a50;
  --bb-muted:#4b565c;      /* приглушённый */
  --bb-muted-2:#54585A;
  --bb-base:#1F2A30;       /* базовый цвет текста обёртки */
  --bb-sans:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bb-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --bb-max:1280px;
  --bb-pad:32px;
}

/* --- Корневая обёртка секции ---------------------------------------- */
.bb-root{
  font-family:var(--bb-sans);
  color:var(--bb-base);
  background:#fff;
  width:100%;
  font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased;
}
.bb-root *{box-sizing:border-box}
.bb-root a{color:var(--bb-teal);text-decoration:none}
.bb-root a:hover{color:var(--bb-teal-d)}
.bb-root img{max-width:100%}

/* --- Контейнер ------------------------------------------------------- */
.bb-wrap{max-width:var(--bb-max);margin:0 auto;padding:0 var(--bb-pad)}

/* --- Утилиты --------------------------------------------------------- */
.bb-mono{font-family:var(--bb-mono)}
.bb-eyebrow{
  font:600 12px/1 var(--bb-mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--bb-teal);
}

/* --- Кнопки ---------------------------------------------------------- */
.bb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 22px;font-weight:700;font-size:15px;
  text-decoration:none;border-radius:4px;border:0;cursor:pointer;
  font-family:var(--bb-sans);line-height:1;
}
.bb-btn-o{background:var(--bb-amber);color:var(--bb-ink)}
.bb-btn-o:hover{background:var(--bb-amber-h);color:var(--bb-ink)}
.bb-btn-t{background:var(--bb-teal);color:#fff}
.bb-btn-t:hover{background:var(--bb-teal-d);color:#fff}
.bb-btn-g{border:1.5px solid var(--bb-ink);color:var(--bb-ink);background:transparent}
.bb-btn-g:hover{background:var(--bb-ink);color:#fff}
.bb-btn-sm{min-height:40px;font-size:14px;padding:0 16px}

/* --- Секция и её шапка ----------------------------------------------- */
.bb-sec{padding:88px 0;border-top:1px solid var(--bb-line);scroll-margin-top:60px}
.bb-sec--plain{border-top:none}
.bb-sec--gray{background:var(--bb-gray-2)}
.bb-sec--light{background:var(--bb-gray)}
.bb-sec--ink{background:var(--bb-ink);color:#fff;border-top:none}
.bb-sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:40px;max-width:760px}
.bb-sec-head h2{margin:0;font-size:36px;line-height:1.2;font-weight:800;color:var(--bb-ink);letter-spacing:-.01em}
.bb-sec--ink .bb-sec-head h2{color:#fff}
.bb-sec-head p{margin:0;font-size:18px;line-height:1.7;color:var(--bb-text)}

/* --- Список с галочками ---------------------------------------------- */
.bb-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.bb-check li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.6;color:var(--bb-text)}
.bb-check li::before{
  content:"\2713";flex:0 0 22px;height:22px;margin-top:2px;border-radius:50%;
  background:var(--bb-teal);color:#fff;font-size:13px;font-weight:800;line-height:22px;text-align:center;
}

/* --- Плейсхолдер изображения ----------------------------------------- */
.bb-ph{
  border-radius:8px;background-color:#dfe6e9;
  background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.04) 0 12px,transparent 12px 24px);
  display:flex;align-items:flex-end;padding:14px;
  font:500 12px/1.4 var(--bb-mono);color:#34495a;
}

/* --- Сравнительная таблица ------------------------------------------ */
.bb-cmp-scroll{overflow-x:auto;border:1px solid var(--bb-line);border-radius:8px}
.bb-cmp{width:100%;border-collapse:collapse;min-width:820px}
.bb-cmp th,.bb-cmp td{padding:16px 20px;text-align:left;font-size:16px;line-height:1.45;border-bottom:1px solid var(--bb-line);vertical-align:top}
.bb-cmp thead th{background:var(--bb-ink);color:#fff;font-weight:800;font-size:17px;border-bottom:none}
.bb-cmp thead th:first-child{background:var(--bb-ink);color:#9fb6c2;font:600 12px var(--bb-mono);letter-spacing:.1em;text-transform:uppercase;vertical-align:bottom}
.bb-cmp tbody th{font-weight:600;color:var(--bb-muted);width:26%;background:var(--bb-gray-2)}
.bb-cmp td{font-weight:700;color:var(--bb-ink)}
.bb-cmp .bb-hl td{color:var(--bb-teal);font-size:22px;font-weight:800}

/* --- Вкладки (sticky tab bar) --------------------------------------- */
.bb-tabbar{position:sticky;top:0;z-index:5;background:#fff;border-top:1px solid var(--bb-line);border-bottom:1px solid var(--bb-line);box-shadow:0 4px 14px rgba(14,34,51,.06)}
.bb-tabbar .bb-wrap{display:flex;align-items:center;gap:24px}
.bb-tabs{display:flex;gap:32px;flex:1 1 auto;overflow-x:auto}
.bb-tab{display:inline-flex;align-items:center;min-height:56px;padding:0 4px;font-weight:700;font-size:15px;color:var(--bb-muted);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.bb-tab:hover{color:var(--bb-ink)}
.bb-tab-on{color:var(--bb-teal);border-bottom-color:var(--bb-teal)}

/* =========================================================================
   Секция: Hero (Product)
   ========================================================================= */
.bb-hero{background:var(--bb-gray);padding:40px 0 72px}
.bb-hero__inner{display:flex;flex-direction:column;gap:32px}
.bb-breadcrumb{font-size:14px;color:var(--bb-muted-2);display:flex;flex-wrap:wrap;gap:8px}
.bb-breadcrumb a{color:var(--bb-muted)}
.bb-breadcrumb .bb-sep{color:var(--bb-muted-2)}
.bb-breadcrumb .bb-current{color:var(--bb-ink);font-weight:600}
.bb-hero__cols{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.bb-hero__text{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:22px}
.bb-hero__text h1{margin:0;font-size:52px;line-height:1.1;font-weight:800;color:var(--bb-ink);letter-spacing:-.015em}
.bb-hero__lead{margin:0;font-size:20px;line-height:1.6;color:var(--bb-text);font-weight:600}
.bb-hero__desc{margin:0;font-size:18px;line-height:1.7;color:var(--bb-text)}
.bb-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.bb-hero__media{flex:1 1 440px;min-width:0}
.bb-hero__media img{display:block;width:100%;height:500px;object-fit:cover;border-radius:8px}

/* KPI-ряд */
.bb-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--bb-ink);border-bottom:1px solid #c9cdcf}
.bb-kpi__item{padding:22px 20px 22px 0}
.bb-kpi__item:last-child{padding-right:0}
.bb-kpi__num{font-size:32px;font-weight:800;color:var(--bb-teal);line-height:1}
.bb-kpi__label{font-size:14px;color:var(--bb-muted);margin-top:8px}

/* =========================================================================
   Секция: CTA (нижний призыв)
   ========================================================================= */
.bb-cta{background:var(--bb-teal);color:#fff;padding:64px 0}
.bb-cta .bb-wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.bb-cta__text{display:flex;flex-direction:column;gap:10px;max-width:700px}
.bb-cta__text h2{margin:0;font-size:32px;line-height:1.2;font-weight:800;color:#fff}
.bb-cta__text p{margin:0;font-size:17px;line-height:1.6;color:#dcedf3}

/* =========================================================================
   Адаптив
   ========================================================================= */
@media (max-width:1024px){
  .bb-hero__text h1{font-size:42px}
}
@media (max-width:768px){
  :root{--bb-pad:20px}
  .bb-sec{padding:56px 0}
  .bb-hero{padding:28px 0 48px}
  .bb-hero__cols{gap:28px}
  .bb-hero__media img{height:320px}
  .bb-hero__text h1{font-size:34px}
  .bb-hero__lead{font-size:18px}
  .bb-sec-head h2{font-size:28px}
  .bb-kpi{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  .bb-kpi__item{padding:18px 0}
  .bb-cta .bb-wrap{flex-direction:column;align-items:flex-start}
  .bb-cta__text h2{font-size:26px}
}
@media (max-width:480px){
  .bb-kpi{grid-template-columns:1fr}
  .bb-hero__text h1{font-size:30px}
}