/* ============================================================================
   BizFlow — САЙТ на «Мові дизайну» v1.3.4 (SITE-REDESIGN; із мокапу v1.2, робоча версія R0 — без мокап-позначок, 05.10.2026)
   Один файл замість tokens.css + style.css + інлайн-<style> сторінок (варіант A, RECON-SITE-REDESIGN.md §3).
   Джерело мови: docs\redesign\v1-frozen\v1.3.4\theme.css (§0 шрифт, §1–§2 токени, §3 база, B1 кнопки, B2 поля) —
   значення токенів перенесено без змін; токени лише сайту — з префіксом --bf-site-*.
   Правила: кольори/радіуси/тіні — лише var(--bf-*); літерали — тільки у визначеннях токенів (§1).
   Тема: html[data-theme="dark"] (ставить інлайн-скрипт у <head> до першої відмальовки — без мерехтіння).
   Класи — РЕАЛЬНІ імена сторінок сайту (розмітка й текст не змінюються); нова розмітка (шапка, футер, головна) — bf2-*.
   ============================================================================ */

/* ── §0  ШРИФТ Inter, self-host (SIL OFL 1.1, fonts/LICENSE), змінна вага 400–700 ── */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url('fonts/inter-cyrillic-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url('fonts/inter-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── §1  ТОКЕНИ (значення — мова v1.3.4 §1–§2; сайт-специфічні — --bf-site-*) ── */
:root {
  color-scheme: light;
  --bf-accent: #7C5CFC; --bf-accent-2: #5B8DEF;
  --bf-success: #10B981; --bf-warning: #F59E0B; --bf-danger: #EF4444; --bf-info: #3B82F6;
  --bf-card: #FFFFFF; --bf-input: #FFFFFF; --bf-bg-elevated: #F3F4F6;
  --bf-text: #1A1A2E; --bf-text-muted: #5E6472; --bf-text-faint: #9CA3AF; --bf-text-2: #3C4150;
  --bf-border: #EEF0F4;
  --bf-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --bf-canvas: #F4F5F7; --bf-surface-2: #F7F8FA;
  --bf-fill: #EEF0F3; --bf-fill-hover: #E5E7EC;
  --bf-hairline: rgba(16, 18, 40, 0.07);
  --bf-field-border: #DDE0E6; --bf-field-border-hover: #C9CDD5;
  --bf-inverse: #16161F; --bf-on-inverse: #FFFFFF; --bf-on-accent: #FFFFFF;
  --bf-overlay: rgba(12, 12, 22, 0.42);
  --bf-st-success-bg: #E3F6EE; --bf-st-success-fg: #0B6E4D;
  --bf-st-warning-bg: #FDF1DC; --bf-st-warning-fg: #8A5300;
  --bf-st-danger-bg: #FDE8E8;  --bf-st-danger-fg: #B42318;
  --bf-st-neutral-bg: #EEF0F3; --bf-st-neutral-fg: #4B5060;
  --bf-shadow-c: 16 18 40; --bf-sa: 1; --bf-shadow-edge: 0 0 0 0 transparent;
  --bf-mix-ink: #000; --bf-ink-pct: 78%; --bf-soft-pct: 10%; --bf-soft2-pct: 16%;
  --bf-header-glass: rgba(244, 245, 247, 0.82);
  /* сайт */
  --bf-site-container: 1180px;
  --bf-site-gutter: 20px;
  --bf-site-section: clamp(56px, 8vw, 104px);
  --bf-site-h1: clamp(34px, 5.4vw, 60px);
  --bf-site-h2: clamp(26px, 3.4vw, 40px);
  --bf-site-lead: clamp(17px, 1.6vw, 20px);
  --bf-site-header-h: 64px;
  --bf-site-cta-bar-h: 72px;
  --bf-site-claim-bg: #FFF4C2; --bf-site-claim-fg: #6B4E00; --bf-site-slot: #B9BECB;   /* лише мокап: мітки «на підтвердження», слоти */
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bf-card: #1A1A2E; --bf-input: #16162A; --bf-bg-elevated: #16162A;
  --bf-text: #F5F5FA; --bf-text-muted: #9CA0B0; --bf-text-faint: #6B7280; --bf-text-2: #C9CCD8;
  --bf-border: rgba(255, 255, 255, 0.06);
  --bf-canvas: #0E0E1A; --bf-surface-2: #20203A;
  --bf-fill: rgba(255, 255, 255, 0.07); --bf-fill-hover: rgba(255, 255, 255, 0.11);
  --bf-hairline: rgba(255, 255, 255, 0.07);
  --bf-field-border: rgba(255, 255, 255, 0.12); --bf-field-border-hover: rgba(255, 255, 255, 0.2);
  --bf-inverse: #F5F5FA; --bf-on-inverse: #12121E;
  --bf-overlay: rgba(0, 0, 0, 0.6);
  --bf-st-success-bg: rgba(16, 185, 129, 0.18); --bf-st-success-fg: #5EE0AE;
  --bf-st-warning-bg: rgba(245, 158, 11, 0.18); --bf-st-warning-fg: #FCC96B;
  --bf-st-danger-bg: rgba(239, 68, 68, 0.2);    --bf-st-danger-fg: #FF9B95;
  --bf-st-neutral-bg: rgba(255, 255, 255, 0.08); --bf-st-neutral-fg: #C4C7D4;
  --bf-shadow-c: 0 0 0; --bf-sa: 5; --bf-shadow-edge: 0 0 0 1px rgba(255, 255, 255, 0.05);
  --bf-mix-ink: #fff; --bf-ink-pct: 55%; --bf-soft-pct: 18%; --bf-soft2-pct: 26%;
  --bf-header-glass: rgba(14, 14, 26, 0.8);
  --bf-site-claim-bg: #4A3B00; --bf-site-claim-fg: #FFE38A; --bf-site-slot: #4A4E63;
}
:root {   /* похідні (мова §2c) */
  --bf-surface: var(--bf-card);
  --bf-accent-strong: color-mix(in oklab, var(--bf-accent) 80%, #000);
  --bf-accent-ink: color-mix(in oklab, var(--bf-accent) var(--bf-ink-pct), var(--bf-mix-ink));
  --bf-accent-soft: color-mix(in srgb, var(--bf-accent) var(--bf-soft-pct), transparent);
  --bf-accent-soft-2: color-mix(in srgb, var(--bf-accent) var(--bf-soft2-pct), transparent);
  --bf-accent-glow: color-mix(in srgb, var(--bf-accent) 26%, transparent);
  --bf-radius-xs: 6px; --bf-radius-sm: 8px; --bf-radius-md: 12px; --bf-radius-lg: 16px; --bf-radius-xl: 20px; --bf-radius-2xl: 24px;
  --bf-radius-full: 9999px; --bf-radius-card: var(--bf-radius-xl); --bf-radius-button: var(--bf-radius-full);
  --bf-shadow-xs: 0 1px 2px rgb(var(--bf-shadow-c) / calc(0.05 * var(--bf-sa))), var(--bf-shadow-edge);
  --bf-shadow-sm: 0 1px 2px rgb(var(--bf-shadow-c) / calc(0.04 * var(--bf-sa))), 0 2px 8px rgb(var(--bf-shadow-c) / calc(0.04 * var(--bf-sa))), var(--bf-shadow-edge);
  --bf-shadow-md: 0 2px 6px rgb(var(--bf-shadow-c) / calc(0.05 * var(--bf-sa))), 0 8px 24px rgb(var(--bf-shadow-c) / calc(0.06 * var(--bf-sa))), var(--bf-shadow-edge);
  --bf-shadow-lg: 0 8px 20px rgb(var(--bf-shadow-c) / calc(0.08 * var(--bf-sa))), 0 24px 56px rgb(var(--bf-shadow-c) / calc(0.1 * var(--bf-sa))), var(--bf-shadow-edge);
  --bf-focus-ring: 0 0 0 3px var(--bf-accent-glow);
  --bf-ring-accent: 0 0 0 2px var(--bf-accent);
  --bf-dur: 160ms; --bf-ease: cubic-bezier(.2, .8, .2, 1);
  /* мости для блог-файлів (blog-article.css / blog-site.css читають старі імена) */
  --bf-bg: var(--bf-canvas); --bf-border-input: var(--bf-field-border); --bf-text-faint-2: var(--bf-text-faint);
}

/* ── §2  БАЗА (мова §3) ── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bf-site-header-h) + 16px); }
body {
  margin: 0; overflow-x: hidden;
  font-family: var(--bf-font); font-size: 16px; line-height: 1.55; color: var(--bf-text);
  background: var(--bf-canvas); -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--bf-accent-ink); text-decoration: none; }
a:hover { text-decoration: none; }
main a:not([class]):hover, .bf2-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; color: var(--bf-text); text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; }
:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: 2px; }
::selection { background: var(--bf-accent-soft-2); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }
.bf2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bf2-ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* контейнери всіх наборів */
.container, .crm-container, .bf2-container, .pk-container, .bf-ck-wrap, .bf404-wrap,
.bf-services__container, .bf-faq__container {
  width: 100%; max-width: calc(var(--bf-site-container) + 2 * var(--bf-site-gutter)); margin-inline: auto; padding-inline: var(--bf-site-gutter);
}
@media (min-width: 900px) { :root { --bf-site-gutter: 32px; } }

/* ритм секцій */
main > section, .bf2-section { padding-block: var(--bf-site-section); }
main > section + section { padding-top: 0; }
main > section.alt-bg, main > section.bf2-section--surface, main > section.pk-wow, main > section.platform,
main > section.niches, main > section.bf-shot-section { padding-top: var(--bf-site-section); }
.alt-bg, .bf2-section--surface { background: var(--bf-surface); }
main > section.alt-bg + section, main > section.bf2-section--surface + section,
main > section.pk-wow + section, main > section.platform + section, main > section.niches + section, main > section.bf-shot-section + section { padding-top: var(--bf-site-section); }
.alt-bg + .alt-bg { padding-top: 0; }

/* «акцент» у заголовках — колір без градієнта (мова: акцент як текст) */
.accent, .grad, .pk-accent, h1 span, h2 span:not([class]) { color: var(--bf-accent-ink); background: none; -webkit-text-fill-color: currentColor; }

/* eyebrow — компактний чип (виправляє розтягнутий «ЦІНИ BIZFLOW») */
.eyebrow, .bf-sx-eyebrow, .bf-ck-eyebrow, .pk-eyebrow, .hub-eyebrow, .bf-section-label, .bf2-eyebrow, .bf404-code {
  display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%;
  padding: 6px 12px; border-radius: var(--bf-radius-full); background: var(--bf-fill); color: var(--bf-text-2);
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.2;
}
.eyebrow svg, .bf-section-label svg { width: 16px; height: 16px; color: var(--bf-accent-ink); }

/* заголовки секцій — 4 набори → одна мова */
.crm-section-head, .bf-sx-head, .bf-ck-head, .pk-section-head, .bf2-head, .bf-services__header, .bf-faq__header {
  display: grid; justify-items: center; gap: 14px; max-width: 760px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center;
}
.crm-section-head h2, .bf-sx-head h2, .bf-ck-head h2, .pk-section-head h2, .bf2-head h2, .bf-section-title,
.final-cta h2, .bf-sx-cta h2, .pk-final-cta h2 { font-size: var(--bf-site-h2); font-weight: 700; letter-spacing: -0.025em; }
.crm-section-head p, .bf-sx-head p, .bf-ck-head p, .pk-section-head p, .bf2-head p, .bf-section-subtitle, .section-lead {
  color: var(--bf-text-muted); font-size: 17px; line-height: 1.55; max-width: 640px;
}
.bf2-head--left { justify-items: start; text-align: left; margin-inline: 0; }

/* ── §3  КНОПКИ (мова B1; легасі-імена сайту → ті самі правила) ── */
.bf2-btn, .btn, .bf-btn-primary, .bf-btn-secondary, .crm-btn, .pk-btn, .blog-cta__btn, .bf-ck-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border: 0; border-radius: var(--bf-radius-button);
  max-width: 100%; font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-align: center; text-decoration: none; cursor: pointer;
  transition: background var(--bf-dur) var(--bf-ease), box-shadow var(--bf-dur) var(--bf-ease), transform var(--bf-dur) var(--bf-ease);
}
.bf2-btn:hover, .btn:hover, .bf-btn-primary:hover, .bf-btn-secondary:hover, .crm-btn:hover, .pk-btn:hover, .blog-cta__btn:hover { text-decoration: none; }
.bf2-btn svg, .crm-btn svg, .pk-btn svg { width: 18px; height: 18px; }
/* головна — чорна pill (B-btn = A) */
.bf2-btn--primary, .btn-primary, .bf-btn-primary, .crm-btn-primary, .pk-btn-primary, .bf-ck-submit {
  background: var(--bf-inverse); color: var(--bf-on-inverse);
}
.bf2-btn--primary:hover, .btn-primary:hover, .bf-btn-primary:hover, .crm-btn-primary:hover, .pk-btn-primary:hover, .bf-ck-submit:hover {
  box-shadow: var(--bf-shadow-md); transform: translateY(-1px);
}
/* другорядна — сіра */
.bf2-btn--gray, .btn-outline, .bf-btn-secondary, .crm-btn-secondary, .pk-btn-secondary, .blog-cta__btn--secondary {
  background: var(--bf-fill); color: var(--bf-text);
}
.bf2-btn--gray:hover, .btn-outline:hover, .bf-btn-secondary:hover, .crm-btn-secondary:hover, .pk-btn-secondary:hover, .blog-cta__btn--secondary:hover { background: var(--bf-fill-hover); }
/* грошова — фіолетова (лише ціни/тарифи) */
.bf2-btn--purple, .plan-card--featured .plan-card__cta, .bf-sx-tier--featured .bf-btn-primary {
  background: var(--bf-accent-soft); color: var(--bf-accent-ink); box-shadow: inset 0 0 0 2px var(--bf-accent);
}
.bf2-btn--purple:hover, .plan-card--featured .plan-card__cta:hover, .bf-sx-tier--featured .bf-btn-primary:hover {
  background: var(--bf-accent-strong); color: var(--bf-on-accent); box-shadow: var(--bf-shadow-md);
}
/* текстова */
.crm-btn-ghost, .bf2-btn--ghost { background: transparent; color: var(--bf-accent-ink); padding: 0 12px; min-height: 40px; font-weight: 600; display: inline-flex; align-items: center; border-radius: var(--bf-radius-button); }
.crm-btn-ghost:hover, .bf2-btn--ghost:hover { background: var(--bf-accent-soft); }
.bf-btn-lg, .bf2-btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
@media (max-width: 479px) {   /* вузькі екрани: довгий напис кнопки переноситься, а не розпирає сторінку */
  .bf2-btn, .btn, .bf-btn-primary, .bf-btn-secondary, .crm-btn, .pk-btn, .blog-cta__btn, .bf-ck-submit { white-space: normal; padding-block: 10px; }
  .bf-btn-lg, .bf2-btn--lg { padding-inline: 20px; }
}
.bf2-btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.bf2-btn--block { width: 100%; }

/* ── §4  ШАПКА (нова розмітка bf2-header; меню на <details> — працює без JS) ── */
.bf2-header {
  position: sticky; top: 0; z-index: 50; height: var(--bf-site-header-h); isolation: isolate;
  box-shadow: inset 0 -1px 0 var(--bf-hairline);
}
/* «скло» — на псевдоелементі: backdrop-filter на самій шапці зробив би її контейнером для position:fixed (мобільне меню) */
.bf2-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bf-header-glass); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
}
.bf2-header__inner {
  display: flex; align-items: center; gap: 12px; height: 100%;
  max-width: calc(var(--bf-site-container) + 2 * var(--bf-site-gutter)); margin-inline: auto; padding-inline: var(--bf-site-gutter);
}
.bf2-logo { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--bf-text); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; flex: none; }
.bf2-logo img { width: 30px; height: 30px; border-radius: 8px; }
.bf2-logo b { color: var(--bf-accent-ink); font-weight: 700; }
/* ОДИН DOM навігації: на ПК — рядок (≥ 1120), на телефоні/планшеті — панель за бургером (checkbox #bf2-menu, без JS) */
.bf2-nav { display: none; align-items: center; gap: 2px; margin-left: 12px; }
.bf2-nav__link, .bf2-dd > summary {
  display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 12px; border-radius: var(--bf-radius-full);
  color: var(--bf-text-2); font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; list-style: none;
}
.bf2-dd > summary::-webkit-details-marker { display: none; }
.bf2-nav__link:hover, .bf2-dd > summary:hover, .bf2-dd[open] > summary { background: var(--bf-fill); color: var(--bf-text); }
.bf2-nav__link[aria-current="page"], .bf2-dd.is-current > summary { color: var(--bf-text); font-weight: 600; }
.bf2-nav__link[aria-current="page"]::after { content: ""; width: 5px; height: 5px; margin-left: 4px; border-radius: 50%; background: var(--bf-accent); }
.bf2-chev { width: 14px; height: 14px; transition: transform var(--bf-dur) var(--bf-ease); }
.bf2-dd[open] .bf2-chev { transform: rotate(180deg); }
.bf2-dd { position: relative; }
.bf2-dd__panel {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 60; width: min(560px, calc(100vw - 32px));
  padding: 10px; border-radius: var(--bf-radius-xl); background: var(--bf-surface); box-shadow: var(--bf-shadow-lg);
  display: grid; gap: 4px;
}
.bf2-dd__panel--crm { width: min(720px, calc(100vw - 32px)); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; }
.bf2-dd__label { padding: 8px 10px 4px; color: var(--bf-text-muted); font-size: 12.5px; font-weight: 600; }
.bf2-dd__niches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; list-style: none; padding: 0; }
.bf2-dd__niches a { display: block; padding: 8px 10px; border-radius: var(--bf-radius-md); color: var(--bf-text); font-size: 14.5px; }
.bf2-dd__niches a:hover, .bf2-dd__item:hover { background: var(--bf-fill); }
.bf2-dd__side { display: grid; align-content: start; gap: 4px; padding: 6px; border-radius: var(--bf-radius-lg); background: var(--bf-surface-2); }
.bf2-dd__item { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--bf-radius-md); color: var(--bf-text); }
.bf2-dd__item b { font-size: 14.5px; font-weight: 600; }
.bf2-dd__item span { color: var(--bf-text-muted); font-size: 13px; line-height: 1.4; }
.bf2-dd__all { display: inline-flex; padding: 8px 10px; color: var(--bf-accent-ink); font-size: 14px; font-weight: 600; }
.bf2-dd__dev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.bf2-dd__more { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 6px 4px; margin-top: 4px; box-shadow: inset 0 1px 0 var(--bf-hairline); }
.bf2-dd__more a { padding: 6px 12px; border-radius: var(--bf-radius-full); background: var(--bf-fill); color: var(--bf-text-2); font-size: 13.5px; font-weight: 500; }
.bf2-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bf2-theme {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--bf-radius-full);
  background: transparent; color: var(--bf-text-2); cursor: pointer;
}
.bf2-theme:hover { background: var(--bf-fill); color: var(--bf-text); }
.bf2-theme .bf2-ico--sun { display: none; }
:root[data-theme="dark"] .bf2-theme .bf2-ico--sun { display: block; }
:root[data-theme="dark"] .bf2-theme .bf2-ico--moon { display: none; }

/* бургер — <label for="bf2-menu"> (працює без JS; mock.js додає клавіатуру й aria-expanded) */
.bf2-burger {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--bf-radius-full);
  background: var(--bf-fill); color: var(--bf-text); cursor: pointer;
}
.bf2-burger .bf2-ico--x { display: none; }
.bf2-menu-toggle:checked ~ .bf2-header__actions .bf2-burger .bf2-ico--x { display: block; }
.bf2-menu-toggle:checked ~ .bf2-header__actions .bf2-burger .bf2-ico--menu { display: none; }

/* < 1120 px: той самий <nav> — повноекранна панель під шапкою */
@media (max-width: 1119.98px) {
  .bf2-menu-toggle:checked ~ .bf2-nav {
    display: block; position: fixed; left: 0; right: 0; top: var(--bf-site-header-h); bottom: var(--bf-site-cta-bar-h); z-index: 70;
    margin: 0; padding: 12px var(--bf-site-gutter) 24px; overflow-y: auto; overscroll-behavior: contain; background: var(--bf-canvas);
  }
  .bf2-nav .bf2-dd, .bf2-nav .bf2-nav__link { display: block; margin-bottom: 10px; border-radius: var(--bf-radius-xl); background: var(--bf-surface); box-shadow: var(--bf-shadow-xs); }
  .bf2-nav .bf2-dd > summary, .bf2-nav .bf2-nav__link {
    display: flex; justify-content: space-between; width: 100%; height: auto; min-height: 54px; padding: 0 18px;
    color: var(--bf-text); font-size: 17px; font-weight: 600; border-radius: var(--bf-radius-xl);
  }
  .bf2-nav .bf2-dd[open] > summary { background: transparent; }
  .bf2-nav .bf2-dd__panel, .bf2-nav .bf2-dd__panel--crm {
    position: static; width: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
    padding: 0 8px 10px; background: transparent; box-shadow: none; border-radius: 0;
  }
  .bf2-nav .bf2-dd__niches { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .bf2-nav .bf2-dd__niches a { font-size: 16px; padding: 11px 10px; }
  .bf2-nav .bf2-dd__dev { grid-template-columns: minmax(0, 1fr); }
  .bf2-nav .bf2-dd__side { background: var(--bf-surface-2); }
  .bf2-nav__link[aria-current="page"]::after { display: none; }
  /* кнопки дії — закріплені знизу (одна група на всіх ширинах) */
  .bf2-ctas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
    padding: 10px var(--bf-site-gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--bf-canvas); box-shadow: 0 -1px 0 var(--bf-hairline);
  }
  .bf2-ctas .bf2-btn { min-height: 50px; padding: 4px 10px; font-size: 15px; line-height: 1.15; white-space: normal; }
  body { padding-bottom: var(--bf-site-cta-bar-h); }
  body:has(.bf2-menu-toggle:checked) { overflow: hidden; }
}
@media (max-width: 400px) { .bf2-ctas .bf2-btn { font-size: 14.5px; } }

@media (min-width: 1120px) {
  .bf2-nav { display: flex; }
  .bf2-burger { display: none; }
  .bf2-ctas { display: flex; gap: 8px; }
  .bf2-ctas .bf2-btn { min-height: 38px; padding: 0 16px; font-size: 14px; }
}

/* ── §5  ФУТЕР (нова розмітка bf2-footer; однаковий у світлій і темній темі — виправляє «світлий футер у темній») ── */
.bf2-footer { padding: 56px 0 28px; background: var(--bf-surface); box-shadow: inset 0 1px 0 var(--bf-hairline); color: var(--bf-text-muted); font-size: 15px; }
.bf2-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.bf2-footer__brand p { margin-top: 12px; max-width: 320px; line-height: 1.55; }
.bf2-footer__contacts { display: grid; gap: 8px; margin-top: 18px; }
.bf2-footer__contacts a { display: inline-flex; align-items: center; gap: 10px; color: var(--bf-text-2); font-weight: 500; }
.bf2-footer__contacts .bf2-ico { color: var(--bf-text-muted); }
.bf2-footer__title { margin-bottom: 12px; color: var(--bf-text); font-size: 14px; font-weight: 700; letter-spacing: 0; }   /* R1: підписи колонок — абзаци, не H2 (рішення власника СТОП-9) */
.bf2-footer ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.bf2-footer ul a { color: var(--bf-text-muted); }
.bf2-footer ul a:hover { color: var(--bf-text); }
.bf2-footer ul.bf2-footer__niches { display: block; columns: 2; column-gap: 16px; }
.bf2-footer__niches li { break-inside: avoid; margin-bottom: 9px; }
.bf2-footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; margin-top: 40px; padding-top: 22px; box-shadow: inset 0 1px 0 var(--bf-hairline); font-size: 14px; }
.bf2-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.bf2-footer__bottom a { color: var(--bf-text-muted); }
@media (min-width: 640px) { .bf2-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bf2-footer__grid { grid-template-columns: 1.3fr 1.2fr 1.2fr 0.8fr 1fr; } }

/* ── §6  СПІЛЬНІ БЛОКИ: картки, сітки, чипи ── */
.card-grid, .platform-grid, .why-grid, .niche-grid, .pk-wow-grid, .pk-cases-grid, .bf2-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
@media (min-width: 640px) {
  .card-grid--2, .card-grid--3, .card-grid--4, .platform-grid, .why-grid, .niche-grid, .pk-wow-grid, .pk-cases-grid, .bf2-grid--2, .bf2-grid--3, .bf2-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .card-grid--3, .platform-grid, .why-grid, .pk-wow-grid, .pk-cases-grid, .bf2-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--4, .niche-grid, .bf2-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pain-card, .solution-card, .role-card, .platform-card, .why-card, .niche-card, .pk-wow-card, .pk-case-card,
.bf-sx-card, .bf-ck-card, .bf2-card, .bf404-block, .tsiny-switch__card, .tsiny-bundle__col {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 24px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); color: var(--bf-text);
}
.alt-bg :is(.pain-card, .solution-card, .role-card, .niche-card, .platform-card, .why-card),
.bf2-section--surface .bf2-card, .pk-wow .pk-wow-card { background: var(--bf-surface-2); box-shadow: none; }
a.niche-card, a.bf2-card, a.tsiny-switch__card { transition: box-shadow var(--bf-dur) var(--bf-ease), transform var(--bf-dur) var(--bf-ease); }
a.niche-card:hover, a.bf2-card:hover, a.tsiny-switch__card:hover { box-shadow: var(--bf-shadow-md); transform: translateY(-2px); text-decoration: none; }
.solution-card__title, .role-card__title, .platform-card__title, .why-card__title, .niche-card__title, .pk-wow-card__title, .pk-case-card__title, .bf2-card h3 {
  font-size: 18px; font-weight: 650; letter-spacing: -0.015em;
}
.solution-card__desc, .role-card__desc, .platform-card__desc, .why-card__desc, .niche-card__desc, .pk-wow-card__desc, .pk-case-card__desc, .bf2-card p {
  color: var(--bf-text-muted); font-size: 15px; line-height: 1.55;
}
/* іконка-плитка: нейтральний акцент для всіх наборів */
.solution-card__icon, .role-card__icon, .platform-card__icon, .why-card__icon, .niche-card__icon, .pk-wow-card__icon, .pk-case-card__icon,
.final-cta__icon, .tsiny-switch__icon, .bf2-tile {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--bf-radius-md);
  background: var(--bf-accent-soft); color: var(--bf-accent-ink);
}
.solution-card__icon svg, .role-card__icon svg, .platform-card__icon svg, .why-card__icon svg, .niche-card__icon svg, .pk-wow-card__icon svg,
.pk-case-card__icon svg, .final-cta__icon svg, .tsiny-switch__icon svg, .bf2-tile svg { width: 22px; height: 22px; }
.platform-card__tag, .pk-wow-tag, .bf2-tag {
  align-self: flex-start; padding: 4px 10px; border-radius: var(--bf-radius-full); background: var(--bf-st-success-bg); color: var(--bf-st-success-fg);
  font-size: 12.5px; font-weight: 600;
}
.pk-wow-tag--case { background: var(--bf-st-neutral-bg); color: var(--bf-st-neutral-fg); }
.niche-card--cta { background: var(--bf-inverse) !important; color: var(--bf-on-inverse); }
.niche-card--cta .niche-card__title { color: var(--bf-on-inverse); }
.niche-card--cta .niche-card__desc { color: color-mix(in srgb, var(--bf-on-inverse) 72%, transparent); }
.niche-card--cta .niche-card__icon { background: color-mix(in srgb, var(--bf-on-inverse) 14%, transparent); color: var(--bf-on-inverse); }

/* hero — ніша / хаб / ціни / під ключ */
.crm-hero, .seo-hero, .pk-hero, .bf-ck-hero, .bf404-hero { padding-block: clamp(40px, 7vw, 88px) clamp(48px, 7vw, 96px) !important; }
.crm-hero > .crm-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 1024px) { .crm-hero > .crm-container:not(.crm-hero-inner) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; } }
.crm-hero h1, .seo-hero h1, .pk-hero h1, .bf-ck-hero h1, .bf404-hero h1, .bf2-hero h1 {
  margin: 18px 0 16px; font-size: var(--bf-site-h1); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05;
}
.crm-hero .lead, .seo-hero .section-lead, .pk-hero .lead, .bf-ck-lead, .bf2-lead {
  color: var(--bf-text-muted); font-size: var(--bf-site-lead); line-height: 1.5; max-width: 620px;
}
.crm-hero-inner, .seo-hero, .pk-hero-inner, .bf-ck-hero, .bf404-hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
/* одноколонкові сітки з justify-items — трек minmax(0,1fr), інакше росте під нерозривний вміст (ГРІД 320) */
.crm-section-head, .bf-sx-head, .bf-ck-head, .pk-section-head, .bf2-head, .bf-services__header, .bf-faq__header, .bf2-hero__head,
.final-cta > .crm-container, .pk-final-cta > .pk-container, .bf-sx-cta, .bf2-final__box, .blog-empty, .blog-hero { grid-template-columns: minmax(0, 1fr); }
.crm-hero-inner > *, .seo-hero > *, .pk-hero-inner > *, .bf-ck-hero > *, .bf404-hero > *, .bf2-hero__head > * { max-width: 100%; }
.crm-hero-inner .lead, .seo-hero .section-lead, .pk-hero-inner .lead, .bf-ck-lead { margin-inline: auto; }
.seo-hero { max-width: calc(var(--bf-site-container) + 2 * var(--bf-site-gutter)); margin-inline: auto; padding-inline: var(--bf-site-gutter); }
.actions-row, .crm-hero-actions, .tsiny-hero__cta, .pk-hero-actions, .bf-ck-actions, .bf404-actions, .bf2-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px;
}
.crm-hero-inner .crm-hero-actions, .tsiny-hero__cta, .pk-hero-inner .pk-hero-actions, .bf-ck-actions, .bf404-actions, .final-cta .actions-row, .pk-final-cta .pk-hero-actions { justify-content: center; }
.trust-row, .pk-trust-row, .bf2-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; color: var(--bf-text-muted); font-size: 14.5px; }
.crm-hero-inner .trust-row, .pk-hero-inner .pk-trust-row { justify-content: center; }
.trust-row span, .pk-trust-row span, .bf2-trust span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row svg, .pk-trust-row svg, .bf2-trust svg { width: 16px; height: 16px; color: var(--bf-st-success-fg); }
.hero-footnote, .tsiny-hero__fine { margin-top: 14px; color: var(--bf-text-muted); font-size: 14px; }

/* ── §7  СТОРІНКА НІШІ ── */
.pain-card { flex-direction: row; align-items: flex-start; gap: 14px; padding: 20px 22px; font-size: 16px; line-height: 1.5; }
.pain-card__mark { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bf-st-danger-bg); color: var(--bf-st-danger-fg); font-weight: 700; font-size: 14px; }
.pain-card__mark svg { width: 14px; height: 14px; }
.ba-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ba-col { padding: 8px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.ba-col-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; font-weight: 700; font-size: 16px; }
.ba-col--before .ba-col-head { color: var(--bf-st-danger-fg); }
.ba-col--after { box-shadow: var(--bf-ring-accent), var(--bf-shadow-sm); }
.ba-col--after .ba-col-head { color: var(--bf-st-success-fg); }
.ba-row { padding: 14px 16px; border-radius: var(--bf-radius-md); color: var(--bf-text-2); font-size: 15.5px; line-height: 1.5; }
.ba-row + .ba-row { box-shadow: inset 0 1px 0 var(--bf-hairline); border-radius: 0; }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature-chip { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--bf-radius-lg); background: var(--bf-card); box-shadow: var(--bf-shadow-xs); font-size: 15px; line-height: 1.45; }
.feature-chip__check { flex: none; color: var(--bf-st-success-fg); }
.feature-chip__check svg { width: 18px; height: 18px; }
.feature-grid + div { text-align: center; margin-top: 32px; }
.role-card__perks { list-style: none; padding: 0; display: grid; gap: 8px; margin-top: 6px; }
.role-card__perks li { position: relative; padding-left: 22px; color: var(--bf-text-2); font-size: 14.5px; line-height: 1.45; }
.role-card__perks li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--bf-accent); }

/* тарифи в ніші */
.plans-grid, .bf-sx-tiers, .pk-plans-grid, .bf2-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .plans-grid, .bf-sx-tiers, .bf2-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pk-plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .pk-plans-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan-card, .bf-sx-tier, .pk-plan, .bf-pricing-card, .tsiny-pkg {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 28px 24px 24px; border-radius: var(--bf-radius-2xl); background: var(--bf-card); box-shadow: var(--bf-shadow-sm);
}
.plan-card--featured, .bf-sx-tier--featured, .bf2-plan--featured { box-shadow: var(--bf-ring-accent), var(--bf-shadow-md); }
.plan-card__name, .bf-sx-tier__name, .pk-plan__name, .bf-pricing-card__name { color: var(--bf-text-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.plan-card__price, .bf-sx-tier__price, .pk-plan__price, .tsiny-pkg__price, .bf-ck-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; color: var(--bf-text);
  font-size: clamp(34px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.plan-card__price-cur, .bf-sx-tier__price span, .pk-plan__price-cur, .pk-plan__price-pre, .tsiny-pkg__price span { color: var(--bf-text-muted); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.plan-card__period, .bf-sx-tier__desc, .bf-pricing-card__for { color: var(--bf-text-muted); font-size: 14px; line-height: 1.45; }
.plan-card__rows, .bf-sx-tier__list, .pk-plan__rows, .tsiny-pkg__list, .bf-ck-list, .bf2-list {
  list-style: none; padding: 0; display: grid; gap: 9px; margin: 6px 0 4px; font-size: 15px; line-height: 1.45;
}
.plan-card__row, .bf-sx-tier__list li, .pk-plan__row, .tsiny-pkg__list li, .bf-ck-list li, .bf2-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--bf-text-2); }
.bf-sx-tier__list li::before, .tsiny-pkg__list li::before, .bf-ck-list li::before, .bf2-list li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--bf-st-success-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%230B6E4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5'/%3E%3C/svg%3E") center / 18px no-repeat;
}
:root[data-theme="dark"] :is(.bf-sx-tier__list, .tsiny-pkg__list, .bf-ck-list, .bf2-list) li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%235EE0AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5'/%3E%3C/svg%3E");
}
.plan-card__row-icon { flex: none; width: 18px; height: 18px; }
.plan-card__row-icon svg { width: 18px; height: 18px; }
.plan-card__row--on .plan-card__row-icon { color: var(--bf-st-success-fg); }
.plan-card__row--off { color: var(--bf-text-muted); text-decoration: line-through; text-decoration-color: var(--bf-hairline); }   /* контраст ≥ 4,5 (faint давав 2,5) */
.plan-card__row--off .plan-card__row-icon { color: var(--bf-text-muted); }
.plan-card__cta, .bf-sx-tier .bf-btn-primary, .pk-plan__cta, .tsiny-pkg .bf-btn-primary { margin-top: auto; width: 100%; }
.plans-grid + p { margin-top: 18px; text-align: center; color: var(--bf-text-muted); font-size: 14px; }
.bf-sx-tier__badge, .bf2-badge {
  position: absolute; top: -12px; left: 24px; padding: 5px 12px; border-radius: var(--bf-radius-full);
  background: var(--bf-accent-strong); color: var(--bf-on-accent); font-size: 12.5px; font-weight: 700;
}

/* FAQ — 4 реалізації → одна мова (details + головна на button) */
.faq-list, .tsiny-faq, .bf-ck-faq, .bf-faq__list, .bf2-faq { display: grid; gap: 10px; max-width: 820px; margin-inline: auto; }
.faq-item, .tsiny-faq__item, .bf-ck-faq details, .bf-faq-item, .bf2-faq details {
  border-radius: var(--bf-radius-lg); background: var(--bf-card); box-shadow: var(--bf-shadow-xs); overflow: hidden;
}
.alt-bg :is(.faq-item) { background: var(--bf-surface-2); box-shadow: none; }
.faq-item summary, .tsiny-faq__item summary, .bf-ck-faq summary, .bf-faq-item__question, .bf2-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  min-height: 60px; padding: 16px 20px; border: 0; background: transparent; color: var(--bf-text); text-align: left;
  font-size: 16.5px; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none;
}
:is(.faq-item, .tsiny-faq__item, .bf2-faq details) summary::-webkit-details-marker, .bf-ck-faq summary::-webkit-details-marker { display: none; }
.faq-item__plus, .tsiny-faq__chev, .bf-faq-item__icon {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bf-fill); color: var(--bf-text-2); font-size: 18px; font-weight: 400; transition: transform var(--bf-dur) var(--bf-ease);
}
.bf-ck-faq summary::after, .bf2-faq summary::after {
  content: "+"; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bf-fill); color: var(--bf-text-2); font-size: 18px; transition: transform var(--bf-dur) var(--bf-ease);
}
.faq-item[open] .faq-item__plus, .tsiny-faq__item[open] .tsiny-faq__chev, .bf-ck-faq details[open] summary::after,
.bf2-faq details[open] summary::after, .bf-faq-item.is-open .bf-faq-item__icon { transform: rotate(45deg); }
.tsiny-faq__item[open] .tsiny-faq__chev { transform: rotate(180deg); }
.faq-item__a, .tsiny-faq__item > p, .bf-ck-faq details > p, .bf-faq-item__answer, .bf2-faq details > p {
  padding: 0 20px 18px; color: var(--bf-text-muted); font-size: 15.5px; line-height: 1.6;
}
.bf-faq-item__answer { display: none; }
.bf-faq-item.is-open .bf-faq-item__answer { display: block; }

/* інші ніші — чипи */
.other-niches, .bf2-chips, .bf-ck-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bf-ck-chips { justify-content: flex-start; list-style: none; padding: 0; }
.other-niche-pill, .bf2-chip, .bf-ck-chips li {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--bf-radius-full);
  background: var(--bf-surface-2); color: var(--bf-text-2); font-size: 15px; font-weight: 500;
}
.bf-ck-chips li { min-height: 34px; font-size: 14px; background: var(--bf-fill); }
.other-niche-pill svg, .bf2-chip svg { width: 16px; height: 16px; color: var(--bf-accent-ink); }
.other-niche-pill:hover, a.bf2-chip:hover { background: var(--bf-fill-hover); color: var(--bf-text); }
.other-niches + p.crm-section-head { display: block; text-align: center; max-width: none; margin: 28px auto 0; color: var(--bf-text-muted); }

/* фінальний CTA — інверсна плита */
.final-cta, .pk-final-cta, .bf2-final { padding-block: var(--bf-site-section) !important; }
.final-cta > .crm-container, .pk-final-cta > .pk-container, .bf-sx-cta, .bf2-final__box {
  display: grid; justify-items: center; gap: 14px; text-align: center;
  max-width: calc(var(--bf-site-container) + 2 * var(--bf-site-gutter)); margin-inline: auto;
  padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 64px); border-radius: 32px;
  background: var(--bf-inverse); color: var(--bf-on-inverse);
}
.final-cta > .crm-container, .pk-final-cta > .pk-container { width: calc(100% - 2 * var(--bf-site-gutter)); }
.final-cta h2, .pk-final-cta h2, .bf-sx-cta h2, .bf2-final__box h2 { color: var(--bf-on-inverse); }
.final-cta h2 .accent, .pk-final-cta h2 span, .bf2-final__box h2 span { color: color-mix(in srgb, var(--bf-on-inverse) 70%, var(--bf-accent)); }
.final-cta p, .pk-final-cta p, .bf-sx-cta p, .bf2-final__box p { color: color-mix(in srgb, var(--bf-on-inverse) 72%, transparent); max-width: 600px; }
.final-cta .crm-btn-primary, .pk-final-cta .pk-btn-primary, .bf-sx-cta .bf-btn-primary, .bf2-final__box .bf2-btn--primary { background: var(--bf-on-inverse); color: var(--bf-inverse); }
.final-cta .crm-btn-secondary, .pk-final-cta .pk-btn-secondary, .bf2-final__box .bf2-btn--gray { background: color-mix(in srgb, var(--bf-on-inverse) 14%, transparent); color: var(--bf-on-inverse); }
.final-cta .crm-btn-ghost, .tsiny-cta__alt a, .bf-sx-cta a:not([class]) { color: var(--bf-on-inverse); }
.final-cta .crm-btn-ghost:hover { background: color-mix(in srgb, var(--bf-on-inverse) 12%, transparent); }
.final-cta__icon { background: color-mix(in srgb, var(--bf-on-inverse) 14%, transparent); color: var(--bf-on-inverse); }

/* ── §8  СЛОТИ ПРЕЗЕНТАЦІЇ bf-shot (скелети; з showcase.css, на токенах) ── */
.bf-shot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: end; }
@media (min-width: 900px) { .bf-shot-grid:not(.bf-shot-grid--one) { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); } }
.bf-shot { margin: 0; min-width: 0; }
.bf-shot__frame { display: block; overflow: hidden; border-radius: var(--bf-radius-xl); background: var(--bf-card); box-shadow: var(--bf-shadow-lg); }
.bf-shot--wide .bf-shot__frame { aspect-ratio: 16 / 10; }
.bf-shot--mobile .bf-shot__frame { aspect-ratio: 9 / 18; max-width: 300px; margin-inline: auto; border-radius: 32px; }
.bf-shot__chrome { display: flex; gap: 6px; padding: 12px 14px; box-shadow: inset 0 -1px 0 var(--bf-hairline); }
.bf-shot__chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--bf-fill-hover); }
.bf-shot--mobile .bf-shot__chrome { justify-content: center; }
.bf-shot--mobile .bf-shot__chrome i:not(:first-child) { display: none; }
.bf-shot--mobile .bf-shot__chrome i:first-child { width: 64px; height: 6px; border-radius: 4px; }
.bf-shot__body { display: flex; gap: 14px; height: 100%; padding: 14px; }
.bf-shot--mobile .bf-shot__body { flex-direction: column; gap: 10px; }
.bf-shot__side { flex: none; width: 22%; border-radius: var(--bf-radius-md); background: var(--bf-surface-2); }
.bf-shot__main { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bf-shot__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bf-shot__sk { display: block; border-radius: var(--bf-radius-sm); background: var(--bf-fill); }
.bf-shot__sk--bar { height: 18px; width: 45%; }
.bf-shot__sk--tile { height: 56px; border-radius: var(--bf-radius-md); }
.bf-shot__sk--card { height: 80px; border-radius: var(--bf-radius-md); }
.bf-shot__sk--line { height: 12px; }
.bf-shot__sk--short { width: 60%; }
.bf-shot--hero .bf-shot__frame { box-shadow: var(--bf-shadow-lg), 0 0 0 1px var(--bf-hairline); }

/* ── §9  ЦІНИ /tsiny/ (кит bf-sx-*) ── */
.seo-page { display: block; }
.seo-section { max-width: calc(var(--bf-site-container) + 2 * var(--bf-site-gutter)); margin-inline: auto; padding-inline: var(--bf-site-gutter); }
.tsiny-switch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .tsiny-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tsiny-switch__card h2 { font-size: 19px; font-weight: 650; }
.tsiny-switch__card p { color: var(--bf-text-muted); font-size: 15px; }
.tsiny-switch__go { margin-top: auto; color: var(--bf-accent-ink); font-weight: 600; font-size: 15px; }
.bf-sx-tier__list li { font-size: 15px; }
.ss2-terms { margin-top: 32px; padding: 24px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.ss2-terms__title { font-size: 18px; font-weight: 650; margin-bottom: 14px; }
.ss2-terms__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ss2-terms__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.ss2-terms__table th, .ss2-terms__table td { padding: 12px 14px; text-align: left; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--bf-hairline); }
.ss2-terms__table th { color: var(--bf-text-muted); font-size: 13px; font-weight: 600; }
.ss2-terms__table td:first-child { font-weight: 600; }
.ss2-terms__base { color: var(--bf-accent-ink); font-weight: 700; }
.ss2-terms__hint, .bf-sx-note { margin-top: 14px; color: var(--bf-text-muted); font-size: 14.5px; text-align: center; }
.tsiny-niches a { font-weight: 600; }
.tsiny-bundle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .tsiny-bundle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tsiny-bundle__col h3 { font-size: 18px; font-weight: 650; }
.tsiny-bundle__col--biz { box-shadow: var(--bf-ring-accent), var(--bf-shadow-sm); }
.tsiny-bundle__list { list-style: none; padding: 0; display: grid; gap: 10px; }
.tsiny-bundle__list li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; box-shadow: inset 0 -1px 0 var(--bf-hairline); font-size: 15px; color: var(--bf-text-2); }
.tsiny-bundle__list b { color: var(--bf-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tsiny-bundle__total { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; font-weight: 700; }
.tsiny-bundle__total--biz b { color: var(--bf-accent-ink); }
.bf-sx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .bf-sx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .bf-sx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tsiny-pkg__price { font-size: clamp(28px, 2.8vw, 34px); }
.tsiny-crmck { max-width: 560px; margin: 28px auto 0; box-shadow: var(--bf-ring-accent), var(--bf-shadow-sm); }
.bf-sx-cta { margin-top: 0; }
.tsiny-cta__alt { margin-top: 6px; color: color-mix(in srgb, var(--bf-on-inverse) 72%, transparent); font-size: 15px; }
.tsiny-cta__alt a { font-weight: 600; }

/* ── §10  CRM ПІД КЛЮЧ /crm/pid-klyuch/ (bf-ck-*) ── */
.bf-ck-sec { padding-block: var(--bf-site-section); }
.bf-ck-sec + .bf-ck-sec { padding-top: 0; }
.bf-ck-price-chip {
  display: inline-flex; align-items: center; margin-top: 22px; padding: 10px 18px; border-radius: var(--bf-radius-full);
  background: var(--bf-accent-soft); color: var(--bf-accent-ink); font-size: 15.5px; font-weight: 600; max-width: 100%; text-align: center;
}
.bf-ck-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .bf-ck-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bf-ck-card h3 { font-size: 19px; font-weight: 650; }
.bf-ck-card > p { color: var(--bf-text-muted); font-size: 15.5px; }
.bf-ck-price { font-size: clamp(30px, 3.4vw, 40px); }
.bf-ck-steps { list-style: none; padding: 0; counter-reset: ck; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .bf-ck-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bf-ck-steps li { counter-increment: ck; position: relative; padding: 22px 22px 22px 66px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); color: var(--bf-text-2); line-height: 1.5; }
.bf-ck-steps li::before { content: counter(ck); position: absolute; left: 20px; top: 20px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bf-inverse); color: var(--bf-on-inverse); font-weight: 700; font-size: 15px; }
.bf-ck-base { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .bf-ck-base { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bf-ck-base { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bf-ck-base > div { display: grid; gap: 6px; padding: 20px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.bf-ck-base b { font-size: 16px; }
.bf-ck-base span { color: var(--bf-text-muted); font-size: 15px; }
.bf-ck-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 22px; font-weight: 600; }

/* ── §11  АВТОМАТИЗАЦІЯ ПІД КЛЮЧ /pid-klyuch/ (pk-*) ── */
.pk-hero-inner { max-width: 860px; margin-inline: auto; }
.pk-inline-link { font-weight: 600; }
.pk-case-card__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; padding-top: 6px; font-weight: 600; font-size: 15px; }
.pk-case-note, .pk-plans-note { margin-top: 20px; text-align: center; color: var(--bf-text-muted); font-size: 14.5px; }
.pk-plan__spacer { flex: 1; display: none; }
.pk-plan__row-icon { flex: none; color: var(--bf-st-success-fg); }
.pk-plan__row-icon svg { width: 18px; height: 18px; }
.pk-plan__price { font-size: clamp(28px, 2.8vw, 34px); }

/* ── §12  ФОРМИ (мова B2; шрифт полів ≥ 16 px) ── */
.pk-form-wrap, .bf-ck-form, .bf-lead-form, .bf2-form {
  display: grid; gap: 16px; max-width: 760px; margin-inline: auto; padding: clamp(20px, 4vw, 32px);
  border-radius: var(--bf-radius-2xl); background: var(--bf-card); box-shadow: var(--bf-shadow-md); text-align: left;
}
.pk-form-row2, .pk-form-row3, .bf-ck-grid2, .bf2-form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .pk-form-row2, .bf-ck-grid2, .bf2-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pk-form-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pk-field, .bf-ck-field, .bf2-field { display: grid; gap: 6px; min-width: 0; }
.pk-field label, .bf-ck-field label, .bf2-field > label, .bf2-field__label { color: var(--bf-text); font-size: 14px; font-weight: 600; }
.pk-field input, .pk-field select, .pk-field textarea, .bf-ck-field input, .bf-ck-field textarea, .bf-ck-field select,
.bf-lead-form input:not([type=checkbox]), .bf-lead-form textarea, .bf2-field input, .bf2-field select, .bf2-field textarea {
  width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid var(--bf-field-border); border-radius: var(--bf-radius-md);
  background: var(--bf-input); color: var(--bf-text); font-size: 16px; line-height: 1.4;
  transition: border-color var(--bf-dur) var(--bf-ease), box-shadow var(--bf-dur) var(--bf-ease); -webkit-appearance: none; appearance: none;
}
.pk-field textarea, .bf-ck-field textarea, .bf-lead-form textarea, .bf2-field textarea { min-height: 120px; resize: vertical; }
.pk-field select, .bf2-field select {
  padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--bf-text-muted) 50%), linear-gradient(135deg, var(--bf-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
:is(.pk-field, .bf-ck-field, .bf2-field) :is(input, select, textarea):hover, .bf-lead-form :is(input, textarea):hover { border-color: var(--bf-field-border-hover); }
:is(.pk-field, .bf-ck-field, .bf2-field) :is(input, select, textarea):focus, .bf-lead-form :is(input, textarea):focus { outline: none; border-color: var(--bf-accent); box-shadow: var(--bf-focus-ring); }
::placeholder { color: var(--bf-text-muted); opacity: 1; }
.bf-ck-hint, .pk-form-hint, .bf2-hint { color: var(--bf-text-muted); font-size: 13.5px; line-height: 1.45; }
.pk-consent, .bf-ck-consent, .bf-lead-form label, .bf2-consent { display: flex; align-items: flex-start; gap: 10px; color: var(--bf-text-muted); font-size: 14px; line-height: 1.5; cursor: pointer; }
.pk-consent input, .bf-ck-consent input, .bf-lead-form label input, .bf2-consent input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--bf-accent); }
.pk-form-submit { display: grid; gap: 10px; }
.pk-form-submit .pk-btn, .bf-ck-submit, .bf-lead-form .btn-primary, .bf2-form .bf2-btn--primary { width: 100%; min-height: 52px; font-size: 16px; }
.pk-form-status, .bf-ck-status, .bf-lead-form__status, .bf2-form__status { min-height: 1.4em; font-size: 14.5px; text-align: center; color: var(--bf-text-muted); }
.pk-form-status.is-mock, .bf-ck-status.is-mock, .bf-lead-form__status.is-mock, .bf2-form__status.is-mock { color: var(--bf-st-warning-fg); }
.bf2-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--bf-radius-md); background: var(--bf-fill); }
.bf2-seg label { position: relative; display: grid; place-items: center; min-height: 44px; padding: 6px 10px; border-radius: calc(var(--bf-radius-md) - 3px); color: var(--bf-text-2); font-size: 15px; font-weight: 600; text-align: center; cursor: pointer; }
.bf2-seg input { position: absolute; opacity: 0; pointer-events: none; }
.bf2-seg label:has(input:checked) { background: var(--bf-surface); color: var(--bf-text); box-shadow: var(--bf-shadow-xs); }
.bf2-seg label:has(input:focus-visible) { box-shadow: var(--bf-focus-ring); }

/* ── §13  ГОЛОВНА (нова композиція bf2-*) ── */
.bf2-hero { padding-block: clamp(36px, 6vw, 80px) clamp(40px, 6vw, 80px); }
.bf2-hero__head { display: grid; justify-items: center; text-align: center; max-width: 820px; margin: 0 auto; }
.bf2-hero__head h1 { margin: 16px 0 14px; }
.bf2-paths { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 900px) { .bf2-paths { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.bf2-path {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: clamp(22px, 3vw, 32px); border-radius: 28px; background: var(--bf-card); box-shadow: var(--bf-shadow-md);
}
/* картки вибору шляху нейтральні; акцентна рамка — лише :hover (пристрої з мишею) і клавіатурний фокус усередині; на touch нічого не «залипає» */
.bf2-path { transition: box-shadow var(--bf-dur) var(--bf-ease); }
@media (hover: hover) and (pointer: fine) { .bf2-path:hover { box-shadow: var(--bf-ring-accent), var(--bf-shadow-md); } }
.bf2-path:has(:focus-visible) { box-shadow: var(--bf-ring-accent), var(--bf-shadow-md); }
.bf2-path--crm h2 { font-size: clamp(24px, 2.7vw, 32px); }   /* CRM — основний шлях: перший і ширший (1.15fr) */
.bf2-path__top { display: flex; align-items: center; gap: 14px; }
.bf2-path h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.025em; }
.bf2-path__kicker { color: var(--bf-text-muted); font-size: 14px; font-weight: 600; }
.bf2-path > p { color: var(--bf-text-muted); font-size: 16.5px; line-height: 1.5; }
.bf2-path__links { display: flex; flex-wrap: wrap; gap: 8px; }
.bf2-path__links a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: var(--bf-radius-full); background: var(--bf-fill); color: var(--bf-text); font-size: 14.5px; font-weight: 500; }
.bf2-path__links a:hover { background: var(--bf-fill-hover); }
.bf2-path .bf2-actions { margin-top: auto; padding-top: 6px; }
.bf2-hint { text-align: center; margin-top: 18px; font-size: 15px; }
.bf2-hint a { font-weight: 600; }
.bf2-trust { justify-content: center; }

.bf2-trial { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 32px; background: var(--bf-card); box-shadow: var(--bf-shadow-md); }
@media (min-width: 900px) { .bf2-trial { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.bf2-trial h2 { font-size: var(--bf-site-h2); font-weight: 700; letter-spacing: -0.025em; }
.bf2-trial p { color: var(--bf-text-muted); font-size: 17px; margin-top: 10px; }
.bf2-steps { list-style: none; padding: 0; counter-reset: st; display: grid; gap: 10px; }
.bf2-steps li { counter-increment: st; display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--bf-radius-lg); background: var(--bf-surface-2); color: var(--bf-text-2); font-size: 15.5px; }
.bf2-steps li::before { content: counter(st); display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--bf-inverse); color: var(--bf-on-inverse); font-weight: 700; font-size: 14px; }

.bf2-dev__switch { max-width: 680px; margin: 0 auto 24px; }
.bf2-dev__panels > div { display: none; }
.bf2-dev:has(#dev-sc-existing:checked) [data-sc="existing"], .bf2-dev:has(#dev-sc-scratch:checked) [data-sc="scratch"] { display: grid; }
.bf2-dev__panel { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; padding: clamp(20px, 3vw, 28px); border-radius: var(--bf-radius-2xl); background: var(--bf-surface-2); margin-bottom: 24px; }
@media (min-width: 900px) { .bf2-dev__panel { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.bf2-dev__panel h3 { font-size: 20px; font-weight: 650; }
.bf2-dev__panel p { color: var(--bf-text-muted); margin-top: 8px; }
.bf2-dev__panel .bf2-path__links { justify-content: flex-start; }
@media (min-width: 900px) { .bf2-dev__panel .bf2-path__links { justify-content: flex-end; } }
.bf2-svc { gap: 12px; }
.bf2-svc dl { display: grid; gap: 8px; margin: 2px 0 0; }
.bf2-svc dt { color: var(--bf-text-muted); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.bf2-svc dd { margin: 0; color: var(--bf-text-2); font-size: 15px; line-height: 1.5; }
.bf2-svc__go { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-weight: 600; font-size: 15px; }
.bf2-note { margin-top: 20px; text-align: center; color: var(--bf-text-muted); font-size: 15px; }
.bf2-note strong { color: var(--bf-text); }
.bf2-pkgs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
@media (min-width: 640px) { .bf2-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .bf2-pkgs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bf2-pkg { display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--bf-radius-lg); background: var(--bf-card); box-shadow: var(--bf-shadow-xs); }
.bf2-pkg b { font-size: 16px; }
.bf2-pkg span { color: var(--bf-text-muted); font-size: 14px; }
.bf2-pkg strong { font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bf2-pkgs__title { margin-top: 40px; font-size: 20px; font-weight: 650; text-align: center; }

.bf2-ck { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 32px; background: var(--bf-card); box-shadow: var(--bf-shadow-md); }
@media (min-width: 900px) { .bf2-ck { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.bf2-ck h2 { font-size: var(--bf-site-h2); font-weight: 700; }
.bf2-ck p { color: var(--bf-text-muted); font-size: 17px; margin-top: 10px; }
.bf2-ck .bf-ck-price-chip { margin-top: 16px; }
.bf2-ck .bf2-actions { justify-content: flex-start; }
@media (min-width: 900px) { .bf2-ck .bf2-actions { justify-content: flex-end; margin-top: 0; } }

.bf2-why { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .bf2-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bf2-why { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blog-article .blog-crumbs a, .blog-article .blog-crumbs span, .blog-article__meta { color: var(--bf-text-muted); }   /* blog-article.css давав 4,0:1 */

.bf2-contacts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1024px) { .bf2-contacts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.bf2-channels { display: grid; gap: 10px; }
.bf2-channel { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--bf-radius-lg); background: var(--bf-card); box-shadow: var(--bf-shadow-xs); color: var(--bf-text); }
.bf2-channel:hover { box-shadow: var(--bf-shadow-md); }
.bf2-contacts > *, .bf2-channel, .bf2-channel > span:last-child { min-width: 0; }
.bf2-channel > span:last-child { overflow-wrap: anywhere; }
.bf2-channel b { display: block; font-size: 16px; }
.bf2-channel > span:last-child > span { display: block; color: var(--bf-text-muted); font-size: 14px; }
.bf2-contacts__intro h2 { font-size: var(--bf-site-h2); font-weight: 700; letter-spacing: -0.025em; }
.bf2-contacts__intro > p { color: var(--bf-text-muted); font-size: 17px; margin: 12px 0 20px; }

/* блок «Клієнти» — лише порожні слоти (соцдоказ — після дозволів) */
.bf2-clients { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .bf2-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bf2-clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bf2-slot { display: grid; gap: 12px; padding: 22px; border-radius: var(--bf-radius-card); border: 2px dashed var(--bf-site-slot); color: var(--bf-text-muted); font-size: 14px; }
.bf2-slot__logo { width: 56px; height: 56px; border-radius: var(--bf-radius-md); border: 2px dashed var(--bf-site-slot); display: grid; place-items: center; font-size: 12px; }
.bf2-slot__line { height: 12px; border-radius: 6px; background: var(--bf-fill); }
.bf2-slot__line--short { width: 55%; }

.bf2-seo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .bf2-seo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bf2-seo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bf2-seo .bf2-card a { margin-top: auto; font-weight: 600; font-size: 15px; }

/* ── §14  БЛОГ і 404 ── */
.blog-page { max-width: calc(860px + 2 * var(--bf-site-gutter)); margin-inline: auto; padding: clamp(32px, 6vw, 72px) var(--bf-site-gutter) var(--bf-site-section); }
.blog-hero { display: grid; gap: 14px; padding: 0 !important; margin-bottom: 32px; }
.blog-hero__title { font-size: var(--bf-site-h1); font-weight: 700; letter-spacing: -0.035em; }
.blog-hero__lead { color: var(--bf-text-muted); font-size: var(--bf-site-lead); }
.blog-crumbs { display: flex; flex-wrap: wrap; gap: 6px; color: var(--bf-text-muted); font-size: 14px; }
.blog-crumbs a { color: var(--bf-text-muted); }
.blog-crumbs > * + *::before { content: "›"; margin-right: 6px; color: var(--bf-text-faint); }
/* R5: текст статті — акцент лише як --bf-accent-ink (blog-article.css давав --bf-accent: рубрика 3,6:1, посилання 4,0:1, тег 4,0:1).
   blog-article.css підключено ПІСЛЯ цього файлу, тож специфічність ≥ 0,2,1. Крихти (.blog-crumbs, правило §13) не зачіпаються;
   кнопки статті (.blog-article a.blog-cta__btn--*, 0,2,1, пізніше) лишаються своїми. */
.blog-page .blog-article__body a, .blog-page a.blog-article__cat, .blog-page a.blog-tag { color: var(--bf-accent-ink); }
.blog-empty { display: grid; justify-items: center; gap: 12px; padding: 48px 24px !important; border-radius: var(--bf-radius-2xl); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); text-align: center; }
.blog-empty__title { font-size: 22px; font-weight: 700; }
.blog-empty__text { color: var(--bf-text-muted); max-width: 460px; }
.blog-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.blog-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.blog-card__media { display: block; aspect-ratio: 1200 / 630; background: var(--bf-surface-2); }
.blog-card__body { display: grid; gap: 10px; padding: 18px 20px 20px; }
.bf404-hero { padding-bottom: 40px !important; }
.bf404-code { margin-inline: auto; }
.bf404-hero > p:not(.bf404-code) { color: var(--bf-text-muted); font-size: var(--bf-site-lead); max-width: 560px; margin-inline: auto; }
.bf404-wrap:not(.bf404-hero) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: var(--bf-site-section); }
@media (min-width: 900px) { .bf404-wrap:not(.bf404-hero) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bf404-block h2 { font-size: 20px; font-weight: 650; }
.bf404-grid { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bf404-grid a { display: inline-flex; min-height: 38px; align-items: center; padding: 0 14px; border-radius: var(--bf-radius-full); background: var(--bf-fill); color: var(--bf-text); font-size: 14.5px; }
.bf404-grid a:hover { background: var(--bf-fill-hover); }

/* ── §15  МОКАП-ПОЗНАЧКИ — у робочу версію не входять (R0, 05.10.2026) ── */

/* ── §17  /saity/ (кит styv2-*) — ті самі правила мови ── */
.styv2-container { width: 100%; max-width: calc(var(--bf-site-container) + 2 * var(--bf-site-gutter)); margin-inline: auto; padding-inline: var(--bf-site-gutter); }
.styv2-alt-bg { background: var(--bf-surface); }
.styv2-hero { padding-block: clamp(40px, 7vw, 88px) !important; }
.styv2-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.styv2-hero-inner > * { max-width: 100%; }
.styv2-hero h1 { margin: 18px 0 16px; font-size: var(--bf-site-h1); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.styv2-hero .lead { color: var(--bf-text-muted); font-size: var(--bf-site-lead); max-width: 640px; }
.styv2-eyebrow { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 6px 12px; border-radius: var(--bf-radius-full); background: var(--bf-fill); color: var(--bf-text-2); font-size: 13px; font-weight: 600; }
.styv2-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.styv2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; max-width: 100%; padding: 0 20px; border: 0; border-radius: var(--bf-radius-button); font-size: 15px; font-weight: 600; text-align: center; cursor: pointer; }
.styv2-btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.styv2-btn--primary { background: var(--bf-inverse); color: var(--bf-on-inverse); }
.styv2-btn--secondary { background: var(--bf-fill); color: var(--bf-text); }
@media (max-width: 479px) { .styv2-btn { white-space: normal; padding-block: 10px; } }
.styv2-section-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; max-width: 760px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.styv2-section-head h2 { font-size: var(--bf-site-h2); font-weight: 700; letter-spacing: -0.025em; }
.styv2-section-head p { color: var(--bf-text-muted); font-size: 17px; }
.sites-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .sites-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .sites-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sites-plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 22px 22px; border-radius: var(--bf-radius-2xl); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.sites-plan--featured { box-shadow: var(--bf-ring-accent), var(--bf-shadow-md); }
.sites-plan__name { font-size: 18px; font-weight: 650; }
.sites-plan__price { font-size: clamp(28px, 2.8vw, 34px); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sites-plan__price span { color: var(--bf-text-muted); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.sites-plan__term { color: var(--bf-text-muted); font-size: 14px; }
.sites-plan__feats { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--bf-text-2); }
.sites-plan__feats li { display: flex; gap: 8px; }
.sites-plan__feats li span { color: var(--bf-st-success-fg); }
.sites-plan__cta { margin-top: auto; display: inline-flex; justify-content: center; align-items: center; min-height: 46px; border-radius: var(--bf-radius-button); background: var(--bf-fill); color: var(--bf-text); font-weight: 600; }
.sites-plan--featured .sites-plan__cta { background: var(--bf-accent-soft); color: var(--bf-accent-ink); box-shadow: inset 0 0 0 2px var(--bf-accent); }
.sites-plan__badge { position: absolute; top: -12px; left: 22px; padding: 5px 12px; border-radius: var(--bf-radius-full); background: var(--bf-accent-strong); color: var(--bf-on-accent); font-size: 12.5px; font-weight: 700; }
.sites-plans__note { margin-top: 16px; text-align: center; color: var(--bf-text-muted); font-size: 14.5px; }
.styv2-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .styv2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .styv2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.styv2-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.styv2-alt-bg .styv2-card { background: var(--bf-surface-2); box-shadow: none; }
.styv2-card h3 { font-size: 18px; font-weight: 650; }
.styv2-card p { color: var(--bf-text-muted); font-size: 15px; }
.styv2-card__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--bf-radius-md); background: var(--bf-accent-soft); color: var(--bf-accent-ink); }
.styv2-card__icon svg { width: 22px; height: 22px; }
.styv2-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; counter-reset: st; }
@media (min-width: 900px) { .styv2-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.styv2-step { display: grid; gap: 8px; padding: 22px; border-radius: var(--bf-radius-card); background: var(--bf-surface-2); }
.styv2-step__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bf-inverse); color: var(--bf-on-inverse); font-weight: 700; }
.styv2-step h3 { font-size: 18px; } .styv2-step p { color: var(--bf-text-muted); font-size: 15px; }
.works-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 760px; margin-inline: auto; }
.work-card { overflow: hidden; border-radius: var(--bf-radius-2xl); background: var(--bf-card); box-shadow: var(--bf-shadow-md); }
.work-card__frame { display: block; }
.work-card__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; box-shadow: inset 0 -1px 0 var(--bf-hairline); color: var(--bf-text-muted); font-size: 13px; }
.work-card__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--bf-fill-hover); }
.work-card__frame img { display: block; width: 100%; height: auto; }
.work-card__body { display: grid; gap: 10px; padding: 20px 22px 22px; }
.work-card__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.work-card__tag { padding: 4px 10px; border-radius: var(--bf-radius-full); background: var(--bf-fill); color: var(--bf-text-2); font-size: 13px; font-weight: 600; }
.work-card__title { font-size: 20px; } .work-card__desc { color: var(--bf-text-muted); }
.work-card__link { font-weight: 600; }
.styv2-faq-list { display: grid; gap: 10px; max-width: 820px; margin-inline: auto; }
.styv2-faq-item { border-radius: var(--bf-radius-lg); background: var(--bf-surface-2); overflow: hidden; }
.styv2-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 16px 20px; font-size: 16.5px; font-weight: 600; cursor: pointer; list-style: none; }
.styv2-faq-item summary::-webkit-details-marker { display: none; }
.styv2-faq-item__plus { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bf-fill); color: var(--bf-text-2); }
.styv2-faq-item[open] .styv2-faq-item__plus { transform: rotate(45deg); }
.styv2-faq-item__a { padding: 0 20px 18px; color: var(--bf-text-muted); font-size: 15.5px; }
.styv2-form-wrap { display: grid; gap: 16px; max-width: 640px; margin-inline: auto; padding: clamp(20px, 4vw, 32px); border-radius: var(--bf-radius-2xl); background: var(--bf-card); box-shadow: var(--bf-shadow-md); }
.styv2-field { display: grid; gap: 6px; min-width: 0; }
.styv2-field label { font-size: 14px; font-weight: 600; }
.styv2-field input, .styv2-field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--bf-field-border); border-radius: var(--bf-radius-md); background: var(--bf-input); color: var(--bf-text); font-size: 16px; }
.styv2-field textarea { min-height: 120px; }
.styv2-field :is(input, textarea):focus { outline: none; border-color: var(--bf-accent); box-shadow: var(--bf-focus-ring); }
.styv2-consent { display: flex; gap: 10px; color: var(--bf-text-muted); font-size: 14px; }
.styv2-consent input { width: 20px; height: 20px; flex: none; accent-color: var(--bf-accent); }
.styv2-form-submit { display: grid; gap: 10px; } .styv2-form-submit .styv2-btn { width: 100%; }
.styv2-form-hint { text-align: center; color: var(--bf-text-muted); font-size: 14.5px; }
.styv2-final-cta > .styv2-container { display: grid; justify-items: center; gap: 14px; text-align: center; padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 64px); border-radius: 32px; background: var(--bf-inverse); color: var(--bf-on-inverse); width: calc(100% - 2 * var(--bf-site-gutter)); }
.styv2-final-cta { background: transparent !important; }
.styv2-final-cta h2 { color: var(--bf-on-inverse); font-size: var(--bf-site-h2); }
.styv2-final-cta p { color: color-mix(in srgb, var(--bf-on-inverse) 72%, transparent); }
.styv2-final-cta a:not(.styv2-btn) { color: var(--bf-on-inverse); }
.styv2-final-cta .styv2-btn--primary { background: var(--bf-on-inverse); color: var(--bf-inverse); }

/* ── §18  Нові блоки v2: процес, таблиця, ціна, конструктор, AI, соцмережі ── */
.bf2-subhead { margin-bottom: 16px; font-size: 18px; font-weight: 650; text-align: center; }
.bf2-card__strong { color: var(--bf-text) !important; font-size: 16px !important; font-weight: 600; }
.bf2-alt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 20px; padding: 22px; border-radius: var(--bf-radius-2xl); background: var(--bf-card); box-shadow: var(--bf-shadow-xs); }
@media (min-width: 900px) { .bf2-alt { grid-template-columns: minmax(0, 1fr) auto; } }
.bf2-alt h3 { font-size: 18px; } .bf2-alt p { color: var(--bf-text-muted); margin-top: 6px; }
.bf2-process { list-style: none; padding: 0; counter-reset: pr; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .bf2-process { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.bf2-process li { counter-increment: pr; position: relative; display: grid; gap: 6px; padding: 20px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.bf2-process li::before { content: counter(pr); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bf-inverse); color: var(--bf-on-inverse); font-weight: 700; }
@media (min-width: 900px) { .bf2-process--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bf2-process b, .bf2-process h3 { font-size: 17px; font-weight: 700; } .bf2-process span { color: var(--bf-text-muted); font-size: 15px; }
.bf2-table-wrap { overflow-x: auto; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.bf2-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }
.bf2-table th, .bf2-table td { padding: 14px 18px; text-align: left; vertical-align: top; box-shadow: inset 0 -1px 0 var(--bf-hairline); }
.bf2-table thead th { color: var(--bf-text); font-size: 15px; font-weight: 700; }
.bf2-table tbody th { color: var(--bf-text-muted); font-weight: 600; width: 22%; }
.bf2-table td { color: var(--bf-text-2); }
.bf2-price { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .bf2-price { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bf2-price__card { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 3vw, 32px); border-radius: var(--bf-radius-2xl); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.bf2-price__card--main { box-shadow: var(--bf-ring-accent), var(--bf-shadow-md); }
.bf2-price__card h3 { font-size: 20px; } .bf2-price__card p { color: var(--bf-text-2); }
.bf2-price__val { font-size: clamp(34px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.03em; color: var(--bf-text) !important; }
.bf2-chips--left { justify-content: flex-start; list-style: none; padding: 0; }
.bf2-builder { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px; }
.bf2-builder__item { flex: 1 1 180px; max-width: 220px; display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); color: var(--bf-text); }
.bf2-builder__item:hover { box-shadow: var(--bf-shadow-md); }
.bf2-builder__item b { font-size: 16px; } .bf2-builder__item span { color: var(--bf-text-muted); font-size: 14px; }
.bf2-builder__plus { align-self: center; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bf-fill); color: var(--bf-text-2); font-size: 20px; font-weight: 600; }
@media (max-width: 639px) { .bf2-builder__item { max-width: none; flex-basis: 100%; } .bf2-builder__plus { width: 28px; height: 28px; } }
.bf2-layers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .bf2-layers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bf2-layer { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: var(--bf-radius-2xl); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.bf2-layer h3 { font-size: 19px; } .bf2-layer p, .bf2-layer li { color: var(--bf-text-2); font-size: 15px; }
.bf2-layer .bf-shot { margin-top: 6px; }
.bf2-layer .bf-shot__frame { aspect-ratio: 16 / 10; box-shadow: var(--bf-shadow-sm), 0 0 0 1px var(--bf-hairline); }
.bf2-cap { color: var(--bf-text-muted); font-size: 13px; text-align: center; }
.bf2-flow { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; counter-reset: fl; }
@media (min-width: 900px) { .bf2-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bf2-flow li { counter-increment: fl; display: grid; gap: 6px; padding: 18px; border-radius: var(--bf-radius-lg); background: var(--bf-surface-2); color: var(--bf-text-2); font-size: 15px; }
.bf2-flow li::before { content: counter(fl); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bf-inverse); color: var(--bf-on-inverse); font-weight: 700; font-size: 14px; }

/* ── §15б  v1.2: стиснуті блоки поточної головної (доповнення №6, п.1) — ті самі H2 і тексти, компактні картки без іконок ── */
.bf2-minis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) { .bf2-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bf2-minis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bf2-mini { min-width: 0; padding: 16px 18px; border-radius: var(--bf-radius-lg); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.bf2-section--surface .bf2-mini { background: var(--bf-surface-2); box-shadow: none; }
.bf2-mini h3 { font-size: 16px; line-height: 1.35; }
.bf2-alt h2 { font-size: 20px; line-height: 1.3; }
.bf2-mini p { margin-top: 6px; color: var(--bf-text-muted); font-size: 15px; line-height: 1.5; }
.bf2-mini--case { display: block; border: 1px dashed var(--bf-site-slot); background: transparent; box-shadow: none; color: var(--bf-text-muted); font-size: 14px; }

/* ── §16  Декор старого дизайну (aria-hidden) — у мові v2 не показується; у розкатці прибрати з розмітки ── */
.dynamic-bg, #network-canvas { display: none !important; }

/* ── §19  AI-консультант сайту (віджет із main.js; R1, 05.10.2026) — та сама розкладка, що в style.css, кольори — лише токени мови.
   Кнопка-орб — брендовий акцент (сильний відтінок: білий текст ≥ 4.5), надсилання — головна (чорна) кнопка мови. ── */
.ai-consultant-widget { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 120; font-family: var(--bf-font); }
.ai-consultant-widget.is-hidden { display: none; }
.ai-orb { width: 72px; height: 72px; border: 0; border-radius: var(--bf-radius-2xl); color: var(--bf-on-accent); background: var(--bf-accent-strong); box-shadow: var(--bf-shadow-lg); cursor: pointer; display: grid; place-items: center; position: relative; overflow: hidden; }
.ai-orb:focus-visible { outline: none; box-shadow: var(--bf-focus-ring), var(--bf-shadow-lg); }
.ai-orb span { position: absolute; inset: 7px; border-radius: var(--bf-radius-xl); border: 1px solid color-mix(in srgb, var(--bf-on-accent) 38%, transparent); animation: aiPulse 3.4s ease-in-out infinite; }
.ai-orb b { font-size: 22px; line-height: 1; z-index: 1; }
.ai-orb small { font-size: 11px; z-index: 1; margin-top: -12px; }
.ai-consultant-widget.is-teasing .ai-orb { animation: bfFloat 2.8s ease-in-out infinite; }
.ai-panel { position: absolute; right: 0; bottom: 88px; width: min(390px, calc(100vw - 28px)); max-height: min(680px, calc(100vh - 130px)); display: none; grid-template-rows: auto minmax(160px, 1fr) auto auto auto; overflow: hidden; border: 1px solid var(--bf-hairline); border-radius: var(--bf-radius-2xl); background: var(--bf-card); box-shadow: var(--bf-shadow-lg); color: var(--bf-text); }
.ai-consultant-widget.is-open .ai-panel { display: grid; }
.ai-panel header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 16px 16px 12px; border-bottom: 1px solid var(--bf-hairline); }
.ai-panel header b { display: block; }
.ai-panel header span { display: block; color: var(--bf-text-muted); font-size: 12px; margin-top: 2px; }
.ai-close { width: 36px; height: 36px; border: 0; border-radius: var(--bf-radius-md); background: var(--bf-fill); color: var(--bf-text); font-size: 22px; cursor: pointer; }
.ai-close:hover { background: var(--bf-fill-hover); }
.ai-messages { padding: 14px; overflow: auto; display: grid; align-content: start; gap: 10px; }
.ai-message { max-width: 86%; border-radius: var(--bf-radius-lg); padding: 11px 13px; font-size: 14px; line-height: 1.45; }
.ai-message.is-ai { justify-self: start; background: var(--bf-fill); color: var(--bf-text); }
.ai-message.is-user { justify-self: end; background: var(--bf-inverse); color: var(--bf-on-inverse); }
.ai-message.is-loading { color: var(--bf-text-muted); }
.ai-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
.ai-quick button { border: 1px solid var(--bf-field-border); border-radius: var(--bf-radius-full); background: var(--bf-card); color: var(--bf-text); padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ai-quick button:hover { border-color: var(--bf-field-border-hover); background: var(--bf-fill); }
.ai-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--bf-hairline); }
.ai-input-row input, .ai-lead-form input, .ai-lead-form textarea { min-width: 0; border: 1px solid var(--bf-field-border); border-radius: var(--bf-radius-md); background: var(--bf-input); color: var(--bf-text); padding: 11px 12px; font: inherit; font-size: 16px; }
.ai-input-row input:focus, .ai-lead-form input:focus, .ai-lead-form textarea:focus { outline: none; border-color: var(--bf-accent); box-shadow: var(--bf-focus-ring); }
.ai-input-row button, .ai-lead-form button { border: 0; border-radius: var(--bf-radius-full); padding: 11px 16px; background: var(--bf-inverse); color: var(--bf-on-inverse); font: inherit; font-weight: 600; cursor: pointer; }
.ai-lead-form { padding: 0 14px 14px; display: grid; gap: 9px; }
.ai-lead-form[hidden] { display: none; }
.ai-lead-form small { color: var(--bf-text-muted); }
.ai-success { padding: 14px; border-radius: var(--bf-radius-lg); background: var(--bf-st-success-bg); color: var(--bf-st-success-fg); font-weight: 600; }
.ai-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--bf-accent-strong); display: flex; align-items: center; justify-content: center; color: var(--bf-on-accent); flex-shrink: 0; }
.ai-panel-title { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ai-panel-name { font-size: 14px; font-weight: 700; color: var(--bf-text); }
.ai-panel-status { font-size: 12px; color: var(--bf-st-success-fg); }
.ai-message--typing { background: transparent !important; padding: 8px 4px !important; box-shadow: none !important; }
.ai-typing-dots { display: flex; align-items: center; gap: 4px; padding: 10px 14px; background: var(--bf-fill); border-radius: var(--bf-radius-md); width: fit-content; }
.ai-typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--bf-text-muted); animation: ai-dot-pulse 1.4s infinite ease-in-out; }
.ai-typing-dots span:nth-child(2) { animation-delay: .2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: .4s; }
.ai-tease-bubble { position: absolute; bottom: 86px; right: 0; background: var(--bf-card); border: 1px solid var(--bf-hairline); border-radius: var(--bf-radius-md); padding: 10px 14px; box-shadow: var(--bf-shadow-lg); min-width: 220px; max-width: 260px; cursor: pointer; opacity: 0; transform: translateY(8px) scale(.95); transition: opacity .3s ease, transform .3s ease; z-index: 999; }
.ai-tease-bubble.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.ai-tease-bubble p { font-size: 13px; font-weight: 600; color: var(--bf-text); margin: 0 0 3px; line-height: 1.4; }
.ai-tease-bubble span { font-size: 12px; color: var(--bf-accent-ink); font-weight: 600; }
@keyframes ai-dot-pulse { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-6px); opacity: 1; } }
@keyframes bfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes aiPulse { 0%, 100% { transform: scale(.96); opacity: .7; } 50% { transform: scale(1.04); opacity: 1; } }
@media (max-width: 1119.98px) {   /* над закріпленою знизу панеллю кнопок (§ шапка) */
  .ai-consultant-widget { bottom: calc(var(--bf-site-cta-bar-h) + 12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  .ai-consultant-widget { right: 12px; }
  .ai-orb { width: 60px; height: 60px; border-radius: var(--bf-radius-xl); }
  .ai-orb small { display: none; }
  .ai-panel { position: fixed; left: 10px; right: 10px; bottom: calc(var(--bf-site-cta-bar-h) + 10px); width: auto; max-height: min(calc(100dvh - var(--bf-site-cta-bar-h) - var(--bf-site-header-h) - 20px), 720px); z-index: 80; }
  .ai-input-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-orb, .ai-orb span, .ai-consultant-widget.is-teasing .ai-orb, .ai-typing-dots span { animation: none !important; }
}

/* ── §20  R6: решта сторінок — /pro-nas/, /kontakty/, /faq/, /support/, /help/, /integratsiyi/, /telegram-boty/, /telegram-mini-app/,
   /ai-rishennya/, /tehnichna-pidtrymka/, /oferta/, /privacy/, /terms/, /data-deletion/. Мокапів немає: стилі цих сторінок жили в їхніх
   інлайн-<style> і style.css (у v2 прибираються) — тут ті самі розкладки, перекладені на мову v2 (картки на тінях, акцент-текст
   --bf-accent-ink, головна кнопка чорна, фінальна плита інверсна, поля як у формах v2). Нового змісту немає. ── */

/* спільне: шапка сторінки, сітки карток, кроки, чипи, фінальна плита */
.pg-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.bf-sx-grid--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .bf-sx-grid--2, .bf-sx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bf-sx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bf-sx-card__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--bf-radius-md); background: var(--bf-accent-soft); color: var(--bf-accent-ink); }
.bf-sx-card__icon svg { width: 22px; height: 22px; }
.bf-sx-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; counter-reset: bfsx; }
.bf-sx-step { counter-increment: bfsx; position: relative; display: grid; gap: 4px; min-width: 0; padding: 22px 22px 22px 66px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.bf-sx-step::before { content: counter(bfsx); position: absolute; left: 20px; top: 20px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bf-inverse); color: var(--bf-on-inverse); font-weight: 700; font-size: 15px; }
.bf-sx-step h3 { font-size: 17px; font-weight: 650; }
.bf-sx-step p { color: var(--bf-text-muted); font-size: 15px; line-height: 1.55; }
.bf-sx-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bf-sx-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--bf-radius-full); background: var(--bf-surface-2); color: var(--bf-text-2); font-size: 15px; font-weight: 500; }
.bf-sx-chip svg { width: 16px; height: 16px; flex: none; color: var(--bf-accent-ink); }
.saity-cta__alt, .intg-cta__alt, .mna-cta__alt { margin-top: 6px; color: color-mix(in srgb, var(--bf-on-inverse) 72%, transparent); font-size: 15px; }
.saity-cta__alt a, .intg-cta__alt a, .mna-cta__alt a { color: var(--bf-on-inverse); font-weight: 600; }
.ai-cta__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bf-sx-cta .ai-cta__outline { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: var(--bf-radius-button);
  background: color-mix(in srgb, var(--bf-on-inverse) 14%, transparent); color: var(--bf-on-inverse); font-size: 15px; font-weight: 600; }
.bf-sx-cta .ai-cta__outline:hover { background: color-mix(in srgb, var(--bf-on-inverse) 22%, transparent); }
.bf2-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }   /* обгортка широких таблиць (вставляє перетворювач R6) */

/* /pro-nas/ */
.pro-nas-lead { max-width: 760px; margin: 0 auto; color: var(--bf-text-2); font-size: 17px; line-height: 1.7; }
.pro-nas-lead p + p { margin-top: 14px; }
.pro-nas-card__more { margin-top: auto; color: var(--bf-accent-ink); font-weight: 600; font-size: 15px; }
a.bf-sx-card { transition: box-shadow var(--bf-dur) var(--bf-ease), transform var(--bf-dur) var(--bf-ease); }
a.bf-sx-card:hover { box-shadow: var(--bf-shadow-md); transform: translateY(-2px); text-decoration: none; }

/* /kontakty/ */
.kontakty-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .kontakty-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kontakty-split > * { min-width: 0; }
.kontakty-form-col h2, .kontakty-channels h2 { font-size: clamp(22px, 2.4vw, 26px); font-weight: 700; letter-spacing: -0.02em; }
.kontakty-form-col__sub { margin: 8px 0 20px; color: var(--bf-text-muted); font-size: 15.5px; line-height: 1.5; }
.kontakty-form { display: grid; gap: 14px; padding: 24px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.kontakty-form__field { display: grid; gap: 6px; min-width: 0; font-size: 14.5px; font-weight: 400; color: var(--bf-text-2); }
.kontakty-form__field input:not([type=checkbox]), .kontakty-form__field select, .kontakty-form__field textarea {
  width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid var(--bf-field-border); border-radius: var(--bf-radius-md);
  background: var(--bf-input); color: var(--bf-text); font-size: 16px; font-weight: 400; line-height: 1.4;
}
.kontakty-form__field textarea { min-height: 120px; resize: vertical; }
.kontakty-form__field :is(input, select, textarea):hover { border-color: var(--bf-field-border-hover); }
.kontakty-form__field :is(input, select, textarea):focus { outline: none; border-color: var(--bf-accent); box-shadow: var(--bf-focus-ring); }
.kontakty-form__field input[type=checkbox] { width: 20px !important; height: 20px !important; flex: none; accent-color: var(--bf-accent); }
.kontakty-form__submit { width: 100%; }
.kontakty-form__status { margin: 0; font-size: 15px; text-align: center; color: var(--bf-text-2); }
.kontakty-form__status--ok { color: var(--bf-st-success-fg); }
.kontakty-form__status--err { color: var(--bf-st-danger-fg); }
.kontakty-channels { display: flex; flex-direction: column; gap: 12px; }
.kontakty-channel { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); color: var(--bf-text); }
a.kontakty-channel:hover { box-shadow: var(--bf-shadow-md); text-decoration: none; }
.kontakty-channel > * { min-width: 0; }
.kontakty-channel__icon { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: var(--bf-radius-md); background: var(--bf-accent-soft); color: var(--bf-accent-ink); }
.kontakty-channel__icon svg { width: 22px; height: 22px; }
.kontakty-channel__badge { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: var(--bf-radius-full); background: var(--bf-accent-soft); color: var(--bf-accent-ink); font-size: 12px; font-weight: 600; }
.kontakty-channel__name { font-size: 16px; font-weight: 650; }
.kontakty-channel__handle { color: var(--bf-accent-ink); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.kontakty-channel__note { margin-top: 2px; color: var(--bf-text-muted); font-size: 14px; }
.pg-faq { display: grid; gap: 10px; max-width: 820px; margin-inline: auto; }
.pg-faq__item { border-radius: var(--bf-radius-lg); background: var(--bf-card); box-shadow: var(--bf-shadow-xs); overflow: hidden; }
.pg-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 16px 20px; font-size: 16.5px; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; }
.pg-faq__item summary::-webkit-details-marker { display: none; }
.pg-faq__chev { flex: none; width: 20px; height: 20px; color: var(--bf-text-2); transition: transform var(--bf-dur) var(--bf-ease); }
.pg-faq__item[open] .pg-faq__chev { transform: rotate(180deg); }
.pg-faq__item p { padding: 0 20px 18px; color: var(--bf-text-muted); font-size: 15.5px; line-height: 1.6; }

/* /faq/ — питання на мові FAQ v2 (details .faq-item уже є вище) */
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 16px 20px; cursor: pointer; list-style: none; color: var(--bf-text); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q__text { display: flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 600; line-height: 1.4; }
.faq-num { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: var(--bf-radius-sm); background: var(--bf-fill); color: var(--bf-text-2); font-size: 13px; font-weight: 600; }
.faq-q__icon { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bf-fill); color: var(--bf-text-2); font-size: 18px; line-height: 1; }
.faq-a { padding: 0 20px 18px; color: var(--bf-text-muted); font-size: 15.5px; line-height: 1.65; }
.faq-more { margin: 0 auto 24px; max-width: 820px; color: var(--bf-text-muted); font-size: 15px; line-height: 1.6; text-align: center; }
.faq-more a, .faq-a a { font-weight: 600; }

/* /support/ */
.support-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 48px; }
@media (min-width: 640px) { .support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.support-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 24px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.support-card__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: var(--bf-radius-md); background: var(--bf-accent-soft); }
.support-card__icon svg { width: 22px; height: 22px; }
.support-card__title { font-size: 18px; font-weight: 650; }
.support-card__desc { color: var(--bf-text-muted); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.support-card a.btn-support { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--bf-radius-button);
  background: var(--bf-fill); color: var(--bf-text); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.support-card a.btn-support:hover { background: var(--bf-fill-hover); text-decoration: none; }
.sla-table, .legal-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.sla-table th, .sla-table td, .legal-table th, .legal-table td { padding: 12px 14px; text-align: left; vertical-align: top; box-shadow: inset 0 -1px 0 var(--bf-hairline); }
.sla-table th, .legal-table th { color: var(--bf-text-muted); font-size: 13px; font-weight: 600; }
.sla-table td, .legal-table td { color: var(--bf-text-2); }
.sla-table tr:last-child td, .legal-table tr:last-child td { box-shadow: none; }
.bf2-scroll:has(> .sla-table), .bf2-scroll:has(> .legal-table) { margin-bottom: 32px; padding: 8px 10px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.badge-ok, .badge-pro, .help-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--bf-radius-full); font-size: 12px; font-weight: 600; }
.badge-ok, .help-badge--start { background: var(--bf-st-success-bg); color: var(--bf-st-success-fg); }
.badge-pro { background: var(--bf-accent-soft); color: var(--bf-accent-ink); }
.quick-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.quick-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--bf-radius-full); background: var(--bf-surface-2); color: var(--bf-text-2); font-size: 15px; font-weight: 500; }
.quick-link:hover { background: var(--bf-fill-hover); color: var(--bf-text); text-decoration: none; }
.quick-link svg { flex: none; color: var(--bf-accent-ink); }

/* /help/ */
.help-section-title { display: flex; align-items: center; gap: 10px; margin: 48px 0 20px; font-size: clamp(22px, 2.4vw, 26px); font-weight: 700; letter-spacing: -0.02em; }
.help-section-title:first-of-type { margin-top: 0; }
.help-section-title svg { flex: none; color: var(--bf-accent-ink); }
.help-cats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 48px; }
@media (min-width: 640px) { .help-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .help-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.help-cat { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 22px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); color: var(--bf-text); }
a.help-cat:hover { box-shadow: var(--bf-shadow-md); transform: translateY(-2px); text-decoration: none; }
.help-cat__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: var(--bf-radius-md); background: var(--bf-accent-soft); color: var(--bf-accent-ink); }
.help-cat__title { font-size: 17px; font-weight: 650; }
.help-cat__desc { color: var(--bf-text-muted); font-size: 14.5px; line-height: 1.5; }
.help-cat__count { margin-top: auto; padding-top: 6px; color: var(--bf-accent-ink); font-size: 13.5px; font-weight: 600; }
.help-article { margin-bottom: 12px; padding: 20px; border-radius: var(--bf-radius-lg); background: var(--bf-card); box-shadow: var(--bf-shadow-xs); }
.help-article__title { margin-bottom: 6px; font-size: 16px; font-weight: 650; }
.help-article__desc { margin-bottom: 10px; color: var(--bf-text-muted); font-size: 14.5px; line-height: 1.5; }
.help-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 14px; }
.help-steps li { counter-increment: step; position: relative; padding: 20px 20px 20px 62px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.help-steps li::before { content: counter(step); position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bf-inverse); color: var(--bf-on-inverse); font-size: 14px; font-weight: 700; }
.help-steps li p { color: var(--bf-text-2); font-size: 15.5px; line-height: 1.65; overflow-wrap: anywhere; }   /* адреси в тексті кроку не розпирають 320 px */
@media (max-width: 479px) { .help-steps li { padding: 18px 16px 18px 56px; } .help-steps li::before { left: 14px; } }
.help-steps li strong { color: var(--bf-text); }
.help-niche-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; margin-bottom: 32px; }
.help-niche { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: var(--bf-radius-lg); background: var(--bf-card); box-shadow: var(--bf-shadow-xs); color: var(--bf-text); }
a.help-niche:hover { box-shadow: var(--bf-shadow-md); text-decoration: none; }
.help-niche__emoji { color: var(--bf-accent-ink); }
.help-niche__name { font-size: 14.5px; font-weight: 600; color: var(--bf-text-2); }
.help-niche__status { font-size: 13px; color: var(--bf-text-muted); }
.help-niche__status--ok { color: var(--bf-st-success-fg); }

/* /integratsiyi/, /telegram-mini-app/, /ai-rishennya/ */
.intg-categories, .ai-formats, .mna-what { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .intg-categories, .ai-formats, .mna-what { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mna-what { gap: clamp(24px, 3vw, 40px); align-items: start; }
.intg-cat, .ai-formats__card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.intg-cat__title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 650; }
.intg-cat__title svg { width: 18px; height: 18px; flex: none; color: var(--bf-accent-ink); }
.intg-cat__chips { justify-content: flex-start; }
.ai-formats__card--crm { box-shadow: var(--bf-ring-accent), var(--bf-shadow-sm); }
@media (max-width: 899.98px) { .ai-formats__card--crm { order: -1; } }
.ai-formats__tag { align-self: flex-start; padding: 4px 12px; border-radius: var(--bf-radius-full); background: var(--bf-inverse); color: var(--bf-on-inverse); font-size: 12.5px; font-weight: 600; }
.ai-formats__tag--outline { background: var(--bf-accent-soft); color: var(--bf-accent-ink); }
.ai-formats__card h3 { font-size: 20px; font-weight: 650; }
.ai-formats__card p { color: var(--bf-text-2); font-size: 15.5px; line-height: 1.6; }
.ai-formats__list, .mna-features-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ai-formats__list li { position: relative; padding-left: 22px; color: var(--bf-text-2); font-size: 15px; }
.ai-formats__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--bf-accent-ink); font-weight: 700; }
.ai-formats__card .bf-btn-primary { margin-top: auto; width: 100%; }
.mna-what__text p { color: var(--bf-text-2); font-size: 16px; line-height: 1.65; }
.mna-what__text p + p { margin-top: 14px; }
.mna-features-list li { display: flex; align-items: center; gap: 12px; color: var(--bf-text-2); font-size: 15.5px; }
.mna-features-list li svg { flex: none; width: 20px; height: 20px; color: var(--bf-accent-ink); }
.mna-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px 10px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.mna-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.mna-table th, .mna-table td { padding: 12px 14px; text-align: left; box-shadow: inset 0 -1px 0 var(--bf-hairline); }
.mna-table thead th { color: var(--bf-text-muted); font-size: 13px; font-weight: 600; }
.mna-table tbody tr:last-child td { box-shadow: none; }
.mna-table__hi { background: var(--bf-accent-soft); }
.mna-table thead .mna-table__hi { color: var(--bf-accent-ink); }
.mna-yes { display: inline-flex; align-items: center; gap: 6px; color: var(--bf-accent-ink); font-weight: 600; }
.mna-yes::before { content: "✓"; font-weight: 700; }

/* /telegram-boty/ (власний набір tgbv2-*) — та сама мова */
.tgbv2-container { width: 100%; max-width: calc(var(--bf-site-container) + 2 * var(--bf-site-gutter)); margin-inline: auto; padding-inline: var(--bf-site-gutter); }
.tgbv2-hero { padding-block: clamp(40px, 7vw, 88px) clamp(48px, 7vw, 96px) !important; text-align: center; }
.tgbv2-hero-inner { display: grid; justify-items: center; max-width: calc(760px + 2 * var(--bf-site-gutter)); }
.tgbv2-hero-inner > * { max-width: 100%; }
.tgbv2-hero h1 { font-size: var(--bf-site-h1); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 18px; }
.tgbv2-hero p.lead { max-width: 640px; margin: 0 auto 28px; color: var(--bf-text-muted); font-size: var(--bf-site-lead); line-height: 1.55; }
.tgbv2-eyebrow { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin-bottom: 16px; padding: 6px 12px; border-radius: var(--bf-radius-full); background: var(--bf-fill); color: var(--bf-text-2); font-size: 13px; font-weight: 600; }
.tgbv2-accent { color: var(--bf-accent-ink); }
.tgbv2-section-head { display: grid; justify-items: center; gap: 14px; max-width: 760px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.tgbv2-section-head h2 { font-size: var(--bf-site-h2); font-weight: 700; letter-spacing: -0.025em; }
.tgbv2-section-head p { color: var(--bf-text-muted); font-size: 17px; line-height: 1.55; max-width: 640px; }
.tgbv2-alt-bg { background: var(--bf-surface); }
main > section.tgbv2-alt-bg, main > section.tgbv2-alt-bg + section { padding-top: var(--bf-site-section); }   /* ритм, як у .alt-bg (§2) */
.tgbv2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; max-width: 100%; padding: 0 20px; border: 0; border-radius: var(--bf-radius-button); font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; }
.tgbv2-btn:hover { text-decoration: none; }
.tgbv2-btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.tgbv2-btn--primary { background: var(--bf-inverse); color: var(--bf-on-inverse); }
.tgbv2-btn--primary:hover { box-shadow: var(--bf-shadow-md); transform: translateY(-1px); }
.tgbv2-btn--secondary { background: var(--bf-fill); color: var(--bf-text); }
.tgbv2-btn--secondary:hover { background: var(--bf-fill-hover); }
.tgbv2-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tgbv2-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .tgbv2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tgbv2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tgbv2-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 24px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.tgbv2-alt-bg .tgbv2-card { background: var(--bf-surface-2); box-shadow: none; }
.tgbv2-card__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: var(--bf-radius-md); background: var(--bf-accent-soft); color: var(--bf-accent-ink); }
.tgbv2-card__icon svg { width: 22px; height: 22px; }
.tgbv2-card h3 { font-size: 18px; font-weight: 650; letter-spacing: -0.015em; }
.tgbv2-card p { color: var(--bf-text-muted); font-size: 15px; line-height: 1.55; }
.tgbv2-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 820px; margin-inline: auto; }
@media (min-width: 720px) { .tgbv2-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tgbv2-plan { display: flex; flex-direction: column; min-width: 0; padding: 28px 24px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.tgbv2-plan--featured { box-shadow: var(--bf-ring-accent), var(--bf-shadow-sm); }
.tgbv2-plan__tag { align-self: flex-start; margin-bottom: 14px; padding: 4px 12px; border-radius: var(--bf-radius-full); background: var(--bf-inverse); color: var(--bf-on-inverse); font-size: 12.5px; font-weight: 600; }
.tgbv2-plan__tag--outline { background: var(--bf-accent-soft); color: var(--bf-accent-ink); }
.tgbv2-plan h3 { margin-bottom: 10px; font-size: 18px; font-weight: 650; }
.tgbv2-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 20px; }
.tgbv2-plan__price-val { font-size: clamp(28px, 2.8vw, 34px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tgbv2-plan__price-cur { color: var(--bf-text-muted); font-size: 14.5px; font-weight: 600; }
.tgbv2-plan__rows { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.tgbv2-plan__row { display: flex; align-items: flex-start; gap: 10px; color: var(--bf-text-2); font-size: 15px; line-height: 1.45; }
.tgbv2-plan__row svg { flex: none; margin-top: 2px; color: var(--bf-st-success-fg); }
.tgbv2-plan .tgbv2-btn { width: 100%; margin-top: auto; }
.tgbv2-faq-list { display: grid; gap: 10px; max-width: 820px; margin-inline: auto; }
.tgbv2-faq-item { border-radius: var(--bf-radius-lg); background: var(--bf-card); box-shadow: var(--bf-shadow-xs); overflow: hidden; }
.tgbv2-alt-bg .tgbv2-faq-item { background: var(--bf-surface-2); box-shadow: none; }
.tgbv2-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 16px 20px; font-size: 16.5px; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; }
.tgbv2-faq-item summary::-webkit-details-marker { display: none; }
.tgbv2-faq-item__plus { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bf-fill); color: var(--bf-text-2); font-size: 18px; transition: transform var(--bf-dur) var(--bf-ease); }
.tgbv2-faq-item[open] .tgbv2-faq-item__plus { transform: rotate(45deg); }
.tgbv2-faq-item__a { padding: 0 20px 18px; color: var(--bf-text-muted); font-size: 15.5px; line-height: 1.6; }
.tgbv2-final-cta .tgbv2-container { display: grid; justify-items: center; gap: 14px; width: calc(100% - 2 * var(--bf-site-gutter)); max-width: calc(var(--bf-site-container) + 2 * var(--bf-site-gutter));
  padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 64px); border-radius: 32px; background: var(--bf-inverse); color: var(--bf-on-inverse); text-align: center; }
.tgbv2-final-cta h2 { font-size: var(--bf-site-h2); font-weight: 700; letter-spacing: -0.025em; color: var(--bf-on-inverse); }
.tgbv2-final-cta h2 .tgbv2-accent { color: color-mix(in srgb, var(--bf-on-inverse) 70%, var(--bf-accent)); }   /* як .final-cta h2 .accent */
.tgbv2-final-cta p { max-width: 600px; color: color-mix(in srgb, var(--bf-on-inverse) 72%, transparent); font-size: 16px; line-height: 1.6; }
.tgbv2-final-cta .tgbv2-btn--primary { background: var(--bf-on-inverse); color: var(--bf-inverse); }
.tgbv2-final-cta .tgbv2-btn--secondary { background: color-mix(in srgb, var(--bf-on-inverse) 14%, transparent); color: var(--bf-on-inverse); }

/* /tehnichna-pidtrymka/ (шаблон seo-page-template.php) */
.seo-hero > p:not([class]) { max-width: 680px; margin: 10px auto 0; color: var(--bf-text-muted); font-size: 16px; line-height: 1.6; }   /* абзаци-деталі під лідом */
.seo-faq { display: grid; gap: 10px; }
.seo-faq > h2 { margin-bottom: 8px; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.025em; }
.seo-faq .seo-card { gap: 6px; padding: 20px 22px; }
.seo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 900px) { .seo-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seo-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 24px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.seo-card h2, .seo-card h3 { font-size: 20px; font-weight: 650; letter-spacing: -0.015em; }
.seo-card p, .seo-card li { color: var(--bf-text-muted); font-size: 15.5px; line-height: 1.6; }
.seo-card ul, .seo-ordered { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; }
.seo-card li, .seo-ordered li { position: relative; padding-left: 20px; }
.seo-card li::before, .seo-ordered li::before { content: "—"; position: absolute; left: 0; color: var(--bf-accent-ink); font-weight: 700; }
.solution-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 20px; }
.solution-chip, .solution-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--bf-radius-full); background: var(--bf-surface-2); color: var(--bf-text-2); font-size: 15px; font-weight: 500; }
.solution-chip:hover, .solution-links a:hover { background: var(--bf-fill-hover); color: var(--bf-text); text-decoration: none; }
.seo-page .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }   /* звужено: .hero-actions є й на головній (R7) */
.seo-product-visual { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; padding: 16px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
@media (min-width: 760px) { .seo-product-visual { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); } .seo-device.dashboard { grid-row: span 2; } }
.seo-device { display: grid; gap: 8px; align-content: center; min-width: 0; padding: 16px; border-radius: var(--bf-radius-lg); background: var(--bf-surface-2); color: var(--bf-text); }
.seo-device b { color: var(--bf-accent-ink); }
.seo-device span { padding: 8px 10px; border-radius: var(--bf-radius-sm); background: var(--bf-fill); color: var(--bf-text-2); font-size: 14.5px; overflow-wrap: anywhere; }
.bf-seo-demo-cta { margin-block: 32px; }
.bf-seo-demo-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(22px, 3vw, 32px); border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-ring-accent), var(--bf-shadow-sm); }
.bf-seo-demo-cta__text { display: grid; gap: 6px; min-width: 0; flex: 1 1 320px; }
.bf-seo-demo-cta__label { width: max-content; max-width: 100%; padding: 4px 10px; border-radius: var(--bf-radius-full); background: var(--bf-accent-soft); color: var(--bf-accent-ink); font-size: 12.5px; font-weight: 600; }
.bf-seo-demo-cta__title { font-size: 20px; font-weight: 650; }
.bf-seo-demo-cta__desc { color: var(--bf-text-muted); font-size: 15px; line-height: 1.55; }

/* юридичні: /oferta/ (legal-wrap), /privacy/, /terms/, /data-deletion/ (legal-article) — колонка для читання */
.legal-wrap, .legal-article { max-width: calc(820px + 2 * var(--bf-site-gutter)); margin-inline: auto; padding: 0 var(--bf-site-gutter) clamp(56px, 8vw, 96px); }
.legal-wrap { padding-top: clamp(32px, 6vw, 56px); }
.legal-wrap h1 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 10px; }
.legal-meta { margin-bottom: 32px; color: var(--bf-text-muted); font-size: 14px; }
.legal-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 28px; color: var(--bf-text-muted); font-size: 15px; }
.legal-back:hover { color: var(--bf-text); text-decoration: none; }
.legal-warn, .dd-draft { margin: 0 0 32px; padding: 16px 20px; border-radius: var(--bf-radius-lg); background: var(--bf-st-warning-bg); color: var(--bf-text); font-size: 15px; line-height: 1.6; }
.legal-warn strong, .dd-draft strong { color: var(--bf-st-warning-fg); }
.legal-toc, .legal-related { padding: 20px 24px; border-radius: var(--bf-radius-card); background: var(--bf-card); box-shadow: var(--bf-shadow-sm); }
.legal-toc { margin-bottom: 40px; }
.legal-related { margin-top: 48px; color: var(--bf-text-muted); font-size: 15px; line-height: 1.6; }
.legal-toc p, .legal-toc b { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 650; color: var(--bf-text); }
.legal-toc ol { padding-left: 20px; margin: 0; }
.legal-toc li { color: var(--bf-text-muted); font-size: 14.5px; line-height: 1.9; }
.legal-wrap h2, .legal-article h2 { margin: 44px 0 14px; padding-top: 28px; box-shadow: inset 0 1px 0 var(--bf-hairline); font-size: clamp(20px, 2.2vw, 23px); font-weight: 700; letter-spacing: -0.015em; }
.legal-wrap h3, .legal-article h3 { margin: 24px 0 10px; font-size: 17px; font-weight: 650; }
.legal-wrap p, .legal-article p { margin-bottom: 14px; color: var(--bf-text-2); font-size: 16px; line-height: 1.75; }
.legal-wrap :is(ul, ol), .legal-article :is(ul, ol) { padding-left: 22px; margin-bottom: 16px; }
.legal-wrap li, .legal-article li { margin-bottom: 6px; color: var(--bf-text-2); font-size: 16px; line-height: 1.7; }
.legal-toc li { margin-bottom: 0; font-size: 14.5px; }
.legal-wrap strong, .legal-article strong, .legal-related strong { color: var(--bf-text); }
.legal-wrap :is(p, li), .legal-article :is(p, li) { overflow-wrap: break-word; }   /* не anywhere на предку таблиці — інакше комірки ламаються посимвольно (FIX-6) */

/* ═══ LOGO-3A START (06.10.2026; LOGO-3A-FIX): логотип-блок lockup-h — ОДИН inline SVG (напис у контурах, знак без <mask>). Колір напису — currentColor від .bf2-logo (var(--bf-text)),
   світла/темна тема — через токени, без другої картинки й без перемикання display. Розмір 112×36 задано атрибутами svg (CLS 0). ═══ */
.bf2-logo.bf2-logo--lk { gap: 0; }
.bf2-logo.bf2-logo--lk .bf2-logo__svg { display: block; width: auto; height: 36px; flex: none; }
/* ═══ LOGO-3A END ═══ */

/* ── §22  ФОРМА-МАЙСТЕР ЗАЯВКИ (SITE-FORM-1, 06.10.2026; partials/lead-wizard.php): 3 кроки, той самий вигляд полів, що §12 ── */
.bf2-wiz { position: relative; gap: 20px; max-width: 820px; }
.bf2-wiz__top { display: grid; gap: 10px; }
.bf2-wiz__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--bf-text-muted); font-size: 14px; font-weight: 600; }
.bf2-wiz__meta b { color: var(--bf-text); }
.bf2-wiz__bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bf2-wiz__bar span { height: 6px; border-radius: var(--bf-radius-full); background: var(--bf-fill); }
.bf2-wiz__bar span.is-done { background: var(--bf-inverse); }
.bf2-wiz__title { font-size: clamp(20px, 2.2vw, 24px); font-weight: 700; letter-spacing: -0.02em; }
.bf2-wiz__title:focus, .bf2-wiz__done:focus { outline: none; }   /* фокус ставить скрипт для екранних читачів після зміни кроку — не інтерактивний елемент */
.bf2-wiz__sub { color: var(--bf-text-muted); font-size: 15px; margin-top: -10px; }
.bf2-wiz__step { display: grid; gap: 18px; min-width: 0; border: 0; margin: 0; padding: 0; }
.bf2-wiz__step > legend { padding: 0; float: left; width: 100%; }   /* legend як заголовок кроку, без рамки fieldset */
.bf2-wiz__step > legend + * { clear: both; }
.bf2-wiz[data-js] .bf2-wiz__step:not(.is-active) { display: none; }
.bf2-wiz__group { display: grid; gap: 10px; min-width: 0; border: 0; margin: 0; padding: 0; }
.bf2-wiz__group > legend { padding: 0; margin-bottom: 2px; color: var(--bf-text); font-size: 15px; font-weight: 600; }
.bf2-wiz__opt { color: var(--bf-text-muted); font-weight: 500; }
.bf2-wiz__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: var(--bf-radius-md); background: var(--bf-surface-2); color: var(--bf-text-2); font-size: 15px; }
.bf2-wiz__sum b { color: var(--bf-text); }
.bf2-wiz__sum .bf2-btn { margin-left: auto; min-height: 44px; }
.bf2-wiz__nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.bf2-wiz__nav .bf2-btn--primary { margin-left: auto; }
@media (max-width: 479px) { .bf2-wiz__nav { flex-direction: column-reverse; align-items: stretch; } .bf2-wiz__nav .bf2-btn { width: 100%; margin-left: 0; } }
.bf2-wiz .bf2-form__status { text-align: left; }
.bf2-wiz__err { color: var(--bf-st-danger-fg); font-size: 14px; font-weight: 600; }
.bf2-wiz__err:empty { display: none; }
.bf2-field.is-invalid :is(input, select, textarea) { border-color: var(--bf-st-danger-fg); }
.bf2-wiz__done { display: grid; justify-items: center; gap: 12px; padding: 12px 0; text-align: center; }
.bf2-wiz__done-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bf-st-success-bg); color: var(--bf-st-success-fg); }
.bf2-wiz__done-ico svg { width: 28px; height: 28px; }
.bf2-wiz__done h3 { font-size: 22px; }
.bf2-wiz__done p { color: var(--bf-text-muted); max-width: 520px; }
.bf2-hp { position: absolute !important; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; }   /* пастка для ботів: у межах форми, невидима */
/* картки вибору: у спокої нейтральні; обрана — чорна рамка + галочка (як головна кнопка); колонки — від ширини самої форми, не вікна */
.bf2-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 10px; }
.bf2-choice { position: relative; display: block; min-width: 0; cursor: pointer; }
.bf2-choice input { position: absolute; opacity: 0; pointer-events: none; }
.bf2-choice__box {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 2px; min-height: 64px; height: 100%;
  padding: 12px 40px 12px 12px; border-radius: var(--bf-radius-lg); background: var(--bf-card);
  box-shadow: inset 0 0 0 1px var(--bf-field-border); transition: box-shadow var(--bf-dur) var(--bf-ease), background var(--bf-dur) var(--bf-ease);
}
.bf2-choice__box .bf2-tile { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: var(--bf-radius-md); }
.bf2-choice__box .bf2-tile svg { width: 20px; height: 20px; }
.bf2-choice__t { color: var(--bf-text); font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.bf2-choice__h { color: var(--bf-text-muted); font-size: 13.5px; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) { .bf2-choice:hover .bf2-choice__box { box-shadow: inset 0 0 0 1px var(--bf-field-border-hover), var(--bf-shadow-sm); } }
.bf2-choice input:checked + .bf2-choice__box { box-shadow: inset 0 0 0 2px var(--bf-inverse); background: var(--bf-surface-2); }
.bf2-choice input:focus-visible + .bf2-choice__box { box-shadow: inset 0 0 0 2px var(--bf-inverse), var(--bf-focus-ring); }
.bf2-choices--compact .bf2-choice__box { grid-template-columns: minmax(0, 1fr); min-height: 52px; }
@media (max-width: 379px) { .bf2-choice__box { grid-template-columns: minmax(0, 1fr); } .bf2-choice__box .bf2-tile { display: none; } }   /* 320–379: без іконки — довгі слова вміщаються */
.bf2-choice__mark {
  position: absolute; top: 50%; right: 12px; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
  display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--bf-field-border-hover); color: transparent;
}
.bf2-choice__mark svg { width: 13px; height: 13px; stroke-width: 3; }
.bf2-choice input:checked + .bf2-choice__box .bf2-choice__mark { background: var(--bf-inverse); color: var(--bf-on-inverse); box-shadow: none; }
.bf2-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.bf2-pick { position: relative; display: inline-flex; cursor: pointer; }
.bf2-pick input { position: absolute; opacity: 0; pointer-events: none; }
.bf2-pick span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--bf-radius-full); background: var(--bf-fill); color: var(--bf-text); font-size: 15px; font-weight: 500; }
.bf2-pick:hover span { background: var(--bf-fill-hover); }
.bf2-pick input:checked + span { background: var(--bf-inverse); color: var(--bf-on-inverse); }
.bf2-pick input:focus-visible + span { box-shadow: var(--bf-focus-ring); }
.bf2-seg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bf2-seg--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .bf2-seg--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .bf2-seg--3 { grid-template-columns: minmax(0, 1fr); } }
.bf2-wiz__note { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--bf-radius-md); background: var(--bf-surface-2); color: var(--bf-text-2); font-size: 14.5px; line-height: 1.5; }
.bf2-wiz__note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--bf-text-muted); }
.bf2-wiz .bf2-consent { min-height: 44px; align-items: center; }   /* ціль дотику ≥ 44 px (ГРІД: рядок згоди 21–42 px) */
.bf2-wiz__panel { display: grid; gap: 18px; min-width: 0; }
.bf2-wiz__panel[hidden] { display: none; }
.bf2-wiz .bf2-hint { text-align: left; margin-top: 0; font-size: 13.5px; }   /* §12 .bf2-hint — підпис під формою (по центру); тут — підказка поля */
.bf2-wiz .bf2-wiz__nav .bf2-btn--primary { width: auto; flex: 1 1 auto; }   /* §12 робить головну кнопку форми 100 % — у майстрі вона поруч із «Назад» */
@media (max-width: 1119.98px) {   /* закріплена панель кнопок не накриває поле, поки людина вводить дані у формі */
  .bf2-form-focus .bf2-ctas { visibility: hidden; }
}
/* рішення №13: на мобільному закрита кнопка AI-консультанта не накриває форму, поки форма в полі зору або в ній фокус (клас ставить обробник майстра) */
@media (max-width: 899px) {
  .bf2-form-active .ai-consultant-widget:not(.is-open) { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px); transition: opacity var(--bf-dur) var(--bf-ease), transform var(--bf-dur) var(--bf-ease), visibility 0s linear var(--bf-dur); }
}

/* ── §23  ГОЛОВНА: H1 + банер-карусель (SITE-HERO-1, 06.10.2026; partials/v2/promo.php; мокап v2 §21) ──
   Рішення власника: H1 окремо над банером; банер на ПК ≤ 220 px, початок карток вибору шляху видно в першому екрані 1280×720 і 1280×800.
   Висота фіксована (CLS 0) і розрахована на найдовші тексти адмінки (заголовок 50, текст 110 символів). Прокрутка — нативна (scroll-snap). */
.bf2-hero--intro { padding-block: clamp(20px, 3vw, 32px) clamp(40px, 6vw, 80px); }
.bf2-hero--intro .bf2-hero__head { max-width: 1060px; }
.bf2-hero--intro .bf2-hero__head h1 { margin: 0; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.03em; line-height: 1.12; }
.bf2-promo {
  --bf-promo-h: 350px;   /* телефон: найдовші тексти адмінки (3 рядки заголовка + 4 тексту + кнопка) над смугою керування */
  position: relative; margin-top: clamp(16px, 2vw, 24px);
  border-radius: 24px; background: var(--bf-card); box-shadow: var(--bf-shadow-md); overflow: hidden;
}
@media (min-width: 640px) { .bf2-promo { --bf-promo-h: 260px; } }
@media (min-width: 1024px) { .bf2-promo { --bf-promo-h: 220px; } }
.bf2-promo__viewport {
  display: flex; height: var(--bf-promo-h); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none;
}
.bf2-promo__viewport::-webkit-scrollbar { display: none; }
.bf2-promo__viewport:focus-visible { outline: none; box-shadow: inset var(--bf-focus-ring); }
@media (prefers-reduced-motion: reduce) { .bf2-promo__viewport { scroll-behavior: auto; } }
.bf2-promo__slide {
  position: relative; flex: 0 0 100%; min-width: 0; height: 100%; scroll-snap-align: start;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 12px;
  padding: 18px 20px 64px;
}
@media (min-width: 640px) { .bf2-promo__slide { padding: 20px 32px 64px; } }
@media (min-width: 1024px) { .bf2-promo__slide { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 32px; padding: 18px 40px 58px; } }
.bf2-promo--single .bf2-promo__slide { padding-bottom: 20px; }
.bf2-promo__body { display: grid; gap: 6px; min-width: 0; }
.bf2-promo__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--bf-text-muted); font-size: 13.5px; font-weight: 600; }
.bf2-promo__tag {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--bf-radius-full);
  background: var(--bf-fill); color: var(--bf-text-2); font-size: 13px; font-weight: 600;
}
.bf2-promo__tag--new { background: var(--bf-st-success-bg); color: var(--bf-st-success-fg); }
.bf2-promo__tag--promo { background: var(--bf-st-warning-bg); color: var(--bf-st-warning-fg); }
.bf2-promo__tag--ad { background: var(--bf-st-neutral-bg); color: var(--bf-st-neutral-fg); }
.bf2-promo__fact { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--bf-radius-full); background: var(--bf-surface-2); color: var(--bf-text-2); font-size: 13px; font-weight: 500; }
@media (max-width: 1023px) { .bf2-promo__fact { display: none; } }   /* факти є в тексті слайда й нижче на сторінці */
.bf2-promo__title {
  font-size: clamp(19px, 2vw, 24px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; color: var(--bf-text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.bf2-promo__text {
  color: var(--bf-text-muted); font-size: 15.5px; line-height: 1.45; max-width: 760px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
@media (min-width: 640px) { .bf2-promo__title { -webkit-line-clamp: 2; line-clamp: 2; } .bf2-promo__text { -webkit-line-clamp: 3; line-clamp: 3; } }
@media (min-width: 1024px) { .bf2-promo__text { -webkit-line-clamp: 2; line-clamp: 2; } }
@media (min-width: 1280px) { .bf2-promo__title { -webkit-line-clamp: 1; line-clamp: 1; } }
/* 1024–1279: колонка тексту вужча (кнопки праворуч) — заголовок до 50 символів у 2 рядки дрібнішим кеглем, висота та сама 220 */
@media (min-width: 1024px) and (max-width: 1279.98px) { .bf2-promo__title { font-size: 21px; } }
/* обрізання рядків — лише запобіжник: ліміти адмінки (50 / 110 символів) підібрані так, щоб текст уміщався повністю (ГРІД — найдовші тексти) */
@media (max-width: 359px) {
  .bf2-promo [data-promo-prev], .bf2-promo [data-promo-next] { display: none; }   /* 320: 3 крапки + 3 кнопки по 44 px ширші за банер — лишаються крапки, «Пауза» і свайп */
  .bf2-promo__slide { padding-inline: 16px; }
  .bf2-promo__title { font-size: 18px; }
  .bf2-promo__text { font-size: 14.5px; }
}
.bf2-promo__cta { display: flex; flex-wrap: wrap; gap: 8px; }
.bf2-promo__cta .bf2-btn { min-height: 44px; }
@media (min-width: 1024px) { .bf2-promo__cta { flex-direction: column; align-items: stretch; } }
@media (max-width: 639px) { .bf2-promo__cta .bf2-promo__cta-2 { display: none; } }   /* на телефоні в слайді одна кнопка */
.bf2-promo__slide--adslot { background: var(--bf-surface-2); }
.bf2-promo__bar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 12px 8px;
}
@media (min-width: 640px) { .bf2-promo__bar { padding-inline: 24px; } }
.bf2-promo__dots { display: flex; align-items: center; }
.bf2-promo__dot { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.bf2-promo__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bf-text-muted); transition: width var(--bf-dur) var(--bf-ease), background var(--bf-dur) var(--bf-ease); }
.bf2-promo__dot[aria-current="true"]::before { width: 22px; border-radius: 4px; background: var(--bf-text); }
.bf2-promo__dot:focus-visible, .bf2-promo__btn:focus-visible { outline: none; box-shadow: var(--bf-focus-ring); }
.bf2-promo__nav { display: flex; gap: 6px; }
.bf2-promo__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--bf-fill); color: var(--bf-text); cursor: pointer; }
.bf2-promo__btn:hover { background: var(--bf-fill-hover); }
.bf2-promo__btn svg { width: 18px; height: 18px; }
.bf2-promo__btn .bf2-ico--play { display: none; }
.bf2-promo[data-paused="1"] .bf2-promo__btn .bf2-ico--pause { display: none; }
.bf2-promo[data-paused="1"] .bf2-promo__btn .bf2-ico--play { display: block; }
.bf2-promo__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* без JS смуга керування не потрібна — лишається свайп/прокрутка */
.bf2-promo:not([data-ready]) .bf2-promo__bar { display: none; }
.bf2-promo:not([data-ready]) .bf2-promo__slide { padding-bottom: 20px; }
.bf2-paths-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; margin-top: clamp(24px, 3vw, 32px); text-align: center; }
.bf2-paths-head h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.bf2-paths-head .bf2-lead { font-size: 16.5px; }
.bf2-paths-head + .bf2-paths { margin-top: 18px; }