/* ============================================================================
   BizFlow — САЙТ, скін «WOW» (SITE-WOW, 12.10.2026). Окремий шар ПОВЕРХ site-v2.css: токени мови v2 і site-v2.css не змінюються.
   Вмикається одним прапорцем: data/site_wow.php → 'on' (клас html.bf-wow ставить partials/v2/wow.php). Усе нижче — лише під html.bf-wow.
   Правила: кольори лише через токени цього файлу (--wow-*) і токени мови (--bf-*); літерали кольорів — тільки у визначеннях токенів (§1).
   3D — CSS (perspective/preserve-3d) + inline SVG, без бібліотек і без WebGL; анімації стартують після load/idle (IntersectionObserver ставить .is-in на самі блоки, клас кореня не змінюється),
   ставляться на паузу поза екраном (.is-in від IntersectionObserver), вимикаються при prefers-reduced-motion та html.wow-lite (економія трафіку).
   ============================================================================ */

/* ── §1  ТОКЕНИ СКІНУ ── */
html.bf-wow {
  --wow-g1: #7C5CFC; --wow-g2: #5B8DEF; --wow-g3: #38BDF8;
  --wow-btn-1: #6A48EE; --wow-btn-2: #4C5FD8;   /* градієнт кнопок: білий текст ≥ 4.5:1 на обох кінцях */
  --wow-grad: linear-gradient(135deg, var(--wow-g1), var(--wow-g2));
  --wow-grad-btn: linear-gradient(135deg, var(--wow-btn-1), var(--wow-btn-2));
  --wow-text-g1: #6A48EE; --wow-text-g2: #3F6FE0;   /* градієнт заголовків: обидва кінці ≥ 3:1 (великий текст) на світлому фоні */
  --wow-grad-text: linear-gradient(135deg, var(--wow-text-g1), var(--wow-text-g2));
  --wow-aurora-a: 30%; --wow-aurora-b: 24%; --wow-aurora-c: 16%;
  --wow-cta-1: #2A1B7A; --wow-cta-2: #1D2F7E; --wow-on-cta: #FFFFFF;
  --wow-glow: color-mix(in srgb, var(--wow-g1) 34%, transparent);
  --wow-line: color-mix(in srgb, var(--wow-g1) 38%, transparent);
  /* палітра світлої теми: тепліший, «брендовий» фон замість сірого */
  --bf-canvas: #F3F1FF; --bf-surface-2: #ECE8FF; --bf-bg-elevated: #EEEBFF;
  --bf-fill: #E8E4FF; --bf-fill-hover: #DED9FF;
  --bf-border: rgba(124, 92, 252, 0.16); --bf-hairline: rgba(91, 60, 220, 0.1);
  --bf-field-border: #D2CBF4; --bf-field-border-hover: #B8AEEC;
  --bf-header-glass: rgba(243, 241, 255, 0.28);   /* прозоріша шапка бачить аврору позаду (blur лишається) — без стику під шапкою (виміряно edge-check: S ≤ 6) */
  --bf-shadow-c: 60 40 140;
  --bf-inverse: #1E1650;
}
html.bf-wow[data-theme="dark"] {
  --wow-aurora-a: 34%; --wow-aurora-b: 26%; --wow-aurora-c: 18%;
  --wow-cta-1: #3A2A9E; --wow-cta-2: #24378F;
  --wow-text-g1: #B7A3FF; --wow-text-g2: #8FB6FF;
  --bf-canvas: #0A0820; --bf-card: #15123A; --bf-input: #110F30; --bf-bg-elevated: #110F30; --bf-surface-2: #1C1850;
  --bf-fill: rgba(167, 139, 250, 0.11); --bf-fill-hover: rgba(167, 139, 250, 0.17);
  --bf-border: rgba(167, 139, 250, 0.16); --bf-hairline: rgba(167, 139, 250, 0.12);
  --bf-field-border: rgba(167, 139, 250, 0.22); --bf-field-border-hover: rgba(167, 139, 250, 0.36);
  --bf-header-glass: rgba(10, 8, 32, 0.28);
  --bf-shadow-c: 0 0 0;
  --bf-inverse: #F5F5FA;
}

/* ── §2  АВРОРА В ГЕРОЯХ (колір замість сірого фону) ── */
html.bf-wow :is(.crm-hero, .seo-hero, .pk-hero, .bf-ck-hero, .bf2-hero, .bf404-hero) { position: relative; isolation: isolate; overflow-x: clip; }
/* SITE-WOW-BG (12.10.2026): аврора — фон ПОЧАТКУ СТОРІНКИ на повну ширину вікна (background тіла передається на canvas, ширина = 100% вікна без 100vw і без смуги прокрутки).
   Причина попереднього дефекту: аврора була ::before героя (inset:0 + overflow-x:clip), а герой вужчий за вікно (контейнер/поля main) → вертикальні краї, різка межа під шапкою
   (шапка світліша) і жорсткий низ. Тепер: усі шари — еліптичні градієнти, що згасають до прозорого раніше за край зони (низ і боки без меж); шапка прозоріша й бачить цей же фон. */
html.bf-wow { --wow-aurora-h: 820px; }
@media (max-width: 899.98px) { html.bf-wow { --wow-aurora-h: 640px; } }
html.bf-wow body {
  background-image:
    radial-gradient(ellipse 52% 60% at 18% 0%, color-mix(in srgb, var(--wow-g1) var(--wow-aurora-a), transparent), transparent 72%),
    radial-gradient(ellipse 46% 56% at 86% 8%, color-mix(in srgb, var(--wow-g2) var(--wow-aurora-b), transparent), transparent 72%),
    radial-gradient(ellipse 40% 34% at 52% 56%, color-mix(in srgb, var(--wow-g3) var(--wow-aurora-c), transparent), transparent 74%);
  background-repeat: no-repeat; background-position: 0 0; background-size: 100% var(--wow-aurora-h);
}
/* акцент у заголовках — градієнт (великий текст); запасний колір з v2 лишається, якщо background-clip:text недоступний */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html.bf-wow :is(.accent, .grad, .pk-accent, h1 span, h2 span:not([class])) {
    background: var(--wow-grad-text); -webkit-background-clip: text; background-clip: text; color: var(--wow-text-g2); -webkit-text-fill-color: transparent;
  }
}

/* ── §3  КНОПКИ, КАРТКИ, ПЛИТКИ ── */
html.bf-wow :is(.bf2-btn--primary, .btn-primary, .bf-btn-primary, .crm-btn-primary, .pk-btn-primary, .bf-ck-submit) {
  background: var(--wow-grad-btn); color: var(--bf-on-accent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--wow-btn-1) 32%, transparent);
}
html.bf-wow :is(.bf2-btn--primary, .btn-primary, .bf-btn-primary, .crm-btn-primary, .pk-btn-primary, .bf-ck-submit):hover {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--wow-btn-1) 46%, transparent); transform: translateY(-2px);
}
html.bf-wow :is(.bf2-tile, .final-cta__icon, .tsiny-switch__icon) {
  background: linear-gradient(135deg, var(--bf-accent-soft-2), color-mix(in srgb, var(--wow-g2) 16%, transparent));
}
html.bf-wow :is(.bf2-path, .bf2-layer, .bf-sx-card, .bf-sx-tier, .plan-card, .pk-plan, .tsiny-pkg, .niche-card, .solution-card, .why-card, .platform-card, .role-card, .ai-formats__card) {
  border: 1px solid var(--bf-border);
  transition: transform 220ms var(--bf-ease), box-shadow 220ms var(--bf-ease), border-color 220ms var(--bf-ease);
}
@media (hover: hover) and (pointer: fine) {
  html.bf-wow :is(.bf2-path, .bf2-layer, .bf-sx-card, .bf-sx-tier, .plan-card, .pk-plan, .tsiny-pkg, .niche-card, .solution-card, .why-card, .platform-card, .role-card, .ai-formats__card):hover {
    transform: translateY(-4px); border-color: var(--wow-line);
    box-shadow: 0 18px 44px var(--wow-glow), var(--bf-shadow-md);
  }
}
html.bf-wow :is(.bf-sx-eyebrow, .bf2-eyebrow) { color: var(--bf-accent-ink); }

/* підсвічений фінальний заклик: глибокий градієнт у обох темах (локальні токени inverse → кнопки й текст лишаються читабельними) */
html.bf-wow :is(.final-cta > .crm-container, .pk-final-cta > .pk-container, .bf-sx-cta, .bf2-final__box) {
  --bf-inverse: var(--wow-cta-1); --bf-on-inverse: var(--wow-on-cta);
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 60% 90% at 90% 0%, color-mix(in srgb, var(--wow-g3) 26%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 80% at 8% 100%, color-mix(in srgb, var(--wow-g1) 46%, transparent), transparent 72%);
  background-color: var(--wow-cta-1);
}
html.bf-wow :is(.final-cta, .pk-final-cta, .bf-sx-cta, .bf2-final__box) :is(.accent, .grad, .pk-accent, h1 span, h2 span:not([class])) {
  background: none; -webkit-text-fill-color: currentColor; color: color-mix(in srgb, var(--wow-on-cta) 76%, var(--wow-g3));
}
html.bf-wow :is(.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(--wow-on-cta); color: var(--wow-cta-1); box-shadow: none;
}

/* ── §4  ЛЕГКИЙ РУХ: поява при прокручуванні (клас ставить site-wow.js лише для елементів нижче першого екрана) ── */
html.bf-wow .wow-pre { opacity: 0; transform: translateY(18px); }
html.bf-wow .wow-in { opacity: 1; transform: none; transition: opacity 520ms var(--bf-ease), transform 520ms var(--bf-ease); }

/* ── §5  СЦЕНА 3D (головна): шари інтерфейсу в перспективі ── */
html.bf-wow .wow-flow { padding-block: clamp(24px, 4vw, 56px) clamp(32px, 5vw, 64px); }
html.bf-wow .wow-flow__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: center; margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 900px) { html.bf-wow .wow-flow__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
html.bf-wow .wow-scene { position: relative; height: clamp(250px, 56vw, 380px); perspective: 1100px; min-width: 0; }
html.bf-wow .wow-scene::before {   /* свічення під сценою */
  content: ""; position: absolute; inset: 8% 4%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--wow-g1) 34%, transparent), transparent 76%);
}
html.bf-wow .wow-scene__tilt {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(calc(12deg + var(--wow-py, 0) * -6deg)) rotateY(calc(-22deg + var(--wow-px, 0) * 8deg));
  transition: transform 260ms var(--bf-ease);
}
html.bf-wow .wow-card {
  position: absolute; display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 20px;
  background: var(--bf-card); border: 1px solid var(--bf-border); box-shadow: 0 24px 56px var(--wow-glow), var(--bf-shadow-md);
  animation: wow-float 6.5s ease-in-out infinite alternate; animation-play-state: paused;
}
html.bf-wow .wow-card--cal { left: 4%; top: 6%; width: 62%; transform: translateZ(0); }
html.bf-wow .wow-card--client { left: 30%; top: 38%; width: 52%; transform: translateZ(60px); animation-delay: -2s; }
html.bf-wow .wow-card--lead { right: 2%; top: 4%; width: 46%; transform: translateZ(120px); animation-delay: -4s; }
html.bf-wow .wow-card__bar { display: block; height: 9px; border-radius: 9999px; background: var(--bf-fill); }
html.bf-wow .wow-card__bar--s { width: 58%; }
html.bf-wow .wow-card__bar--a { background: var(--wow-grad); width: 42%; }
html.bf-wow .wow-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
html.bf-wow .wow-cal i { aspect-ratio: 1; border-radius: 6px; background: var(--bf-fill); }
html.bf-wow .wow-cal i.on { background: var(--wow-grad); }
html.bf-wow .wow-card__row { display: flex; align-items: center; gap: 10px; min-width: 0; }
html.bf-wow .wow-card__ava { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--wow-grad); }
html.bf-wow .wow-card__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; flex: none; background: var(--wow-grad-btn); color: var(--bf-on-accent); }
html.bf-wow .wow-card__ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
html.bf-wow .wow-card__t { font-size: 13px; font-weight: 600; color: var(--bf-text); line-height: 1.25; }
html.bf-wow .wow-card__s { font-size: 12px; color: var(--bf-text-muted); line-height: 1.25; }
@keyframes wow-float { from { translate: 0 -7px; } to { translate: 0 7px; } }
html.bf-wow .wow-scene.is-in .wow-card, html.bf-wow .wow-flank.is-in { animation-play-state: running; will-change: translate; }

/* ── §6  Кроки потоку «заявка → запис» (вертикальна лінія з імпульсом) ── */
html.bf-wow .wow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
html.bf-wow .wow-steps li { position: relative; padding-left: 60px; min-height: 48px; }
html.bf-wow .wow-steps li::before {   /* лінія до наступного кроку */
  content: ""; position: absolute; left: 21px; top: 46px; bottom: -22px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--wow-line), transparent);
}
html.bf-wow .wow-steps li:last-child::before { display: none; }
html.bf-wow .wow-steps li::after {    /* імпульс, що біжить лінією */
  content: ""; position: absolute; left: 18px; top: 46px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--wow-g3); box-shadow: 0 0 12px var(--wow-g3); opacity: 0;
  animation: wow-pulse 2.8s ease-in-out infinite; animation-play-state: paused;
}
html.bf-wow .wow-steps li:last-child::after { display: none; }
html.bf-wow .wow-steps li:nth-child(2)::after { animation-delay: .7s; }
html.bf-wow .wow-steps li:nth-child(3)::after { animation-delay: 1.4s; }
html.bf-wow .wow-steps.is-in li::after { animation-play-state: running; }
@keyframes wow-pulse { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(100% + 40px)); } }
html.bf-wow .wow-steps__n {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: var(--wow-grad-btn); color: var(--bf-on-accent); font-weight: 700; box-shadow: 0 6px 16px var(--wow-glow);
}
html.bf-wow .wow-steps h3 { font-size: 18px; margin: 2px 0 4px; }
html.bf-wow .wow-steps p { color: var(--bf-text-muted); font-size: 15px; }
html.bf-wow .wow-note { margin-top: 18px; color: var(--bf-text-muted); font-size: 14px; }

/* ── §7  Дві плаваючі картки по боках героя головної (лише широкі екрани; на вужчих — тільки аврора) ── */
html.bf-wow .wow-flank { display: none; }
@media (min-width: 1280px) {
  html.bf-wow .wow-flank {
    display: grid; position: absolute; top: 18px; z-index: 0; width: 164px; gap: 8px; padding: 12px; border-radius: 18px; pointer-events: none;
    background: var(--bf-card); border: 1px solid var(--bf-border); box-shadow: 0 20px 48px var(--wow-glow), var(--bf-shadow-md);
    animation: wow-float 7s ease-in-out infinite alternate; animation-play-state: paused;
  }
  html.bf-wow .wow-flank--l { left: 12px; transform: perspective(900px) rotateY(24deg) rotateX(6deg); }
  html.bf-wow .wow-flank--r { right: 12px; top: 18px; transform: perspective(900px) rotateY(-24deg) rotateX(6deg); animation-delay: -3s; }
}

/* ── §7б  ПРОДУКТИВНІСТЬ ГОЛОВНОЇ: секції нижче першого екрана не розкладаються й не малюються, доки не наблизяться до вікна
   (content-visibility:auto; після першого показу браузер запам'ятовує справжню висоту — auto у contain-intrinsic-size). Лише головна. ── */
@media (max-width: 899.98px) {   /* лише телефони: на десктопі оцінка висоти давала CLS 0.068 при прокручуванні (виміряно), на телефоні — 0 */
  html.bf-wow main.bf2-home > section:nth-child(n+3) { content-visibility: auto; contain-intrinsic-size: auto 720px; }
}

/* ── §8  ФОЛБЕКИ: економія трафіку / слабкі пристрої / зменшений рух — статична поза, без анімацій ── */
@media (prefers-reduced-motion: reduce) {
  html.bf-wow .wow-card, html.bf-wow .wow-flank, html.bf-wow .wow-steps li::after { animation: none !important; }
  html.bf-wow .wow-scene__tilt { transition: none; }
  html.bf-wow .wow-pre { opacity: 1; transform: none; }
  html.bf-wow :is(.bf2-path, .bf2-layer, .bf-sx-card, .bf-sx-tier, .plan-card, .pk-plan, .tsiny-pkg, .niche-card, .solution-card, .why-card, .platform-card, .role-card, .ai-formats__card):hover { transform: none; }
}
html.bf-wow.wow-lite .wow-card, html.bf-wow.wow-lite .wow-flank, html.bf-wow.wow-lite .wow-steps li::after { animation: none !important; }
html.bf-wow.wow-lite .wow-scene__tilt { transition: none; }
html.bf-wow.wow-lite .wow-pre { opacity: 1; transform: none; }
html.bf-wow.wow-flat .wow-scene { perspective: none; }
html.bf-wow.wow-flat .wow-scene__tilt, html.bf-wow.wow-flat .wow-card { transform: none !important; }
@media print { html.bf-wow .wow-scene, html.bf-wow .wow-flank { display: none; } html.bf-wow .wow-pre { opacity: 1; transform: none; } }
html.bf-wow .wow-card__grow { flex: 1; min-width: 0; }
html.bf-wow .wow-actions { justify-content: center; margin-top: 20px; }