/*
Theme Name: iDance CRM
Theme URI: https://idancecrm.com/
Author: iDance / ФОП Манченко Олександр Петрович
Description: Класична тема idancecrm.com. Редакція 2 — темний преміум (темні поверхні, скляні картки, капсули, свічення). Типографічна шкала, ритм і рух — з редакції 1. Вміст сторінок дає iDance Site Builder (canvas).
Version: 0.11.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: idancecrm
*/

/* ============ Шрифти ============ */
@font-face{font-family:"Days One";src:url("assets/fonts/days-one-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("assets/fonts/montserrat-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("assets/fonts/montserrat-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("assets/fonts/montserrat-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("assets/fonts/montserrat-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ============ Токени — ТЕМНА палітра (редакція 2) ============ */
:root{
  --bg:#0B0A0F; --surface-1:#131118; --surface-2:#1A1720;
  --line:rgba(255,255,255,0.08); --line-soft:rgba(255,255,255,0.04);
  --text:#F4F2F7; --text-2:#A9A3B8; --text-3:#6E687D;
  --purple:#7B3FA8; --purple-glow:rgba(123,63,168,0.55); --orange:#F7931E;
  /* шкала (з ред.1) */
  --space-3xs:.25rem; --space-2xs:.5rem; --space-xs:.75rem; --space-s:1rem;
  --space-m:1.5rem; --space-l:2.5rem; --space-xl:4rem; --space-2xl:6rem; --space-3xl:8rem;
  --radius-s:8px; --radius-m:16px; --radius-l:20px; --radius-xl:32px;
  --container:1200px; --container-narrow:720px; --container-wide:1440px;
}

/* ============ Міст до ISB (керуємо його змінними, без !important) ============ */
.isb-content{
  --isb-font-heading:"Days One",Georgia,serif;
  --isb-font-body:"Montserrat",system-ui,-apple-system,sans-serif;
  --isb-font-caption:"Montserrat",system-ui,sans-serif;
  --isb-text:var(--text); --isb-heading:var(--text); --isb-muted:var(--text-2);
  --isb-accent:var(--purple); --isb-lh-body:1.65; --isb-ls-eyebrow:.02em;
  --isb-bg:var(--bg); --isb-surface:var(--surface-1); --isb-card:var(--surface-1);
  --isb-line:var(--line);
}

/* ============ База ============ */
*,*::before,*::after{box-sizing:border-box}
/* Р11.3: overflow-x:clip на КОРЕНІ ловить горизонт. скрол від повноширинного свічення
   (::before виходить за в'юпорт); clip, не hidden — не ламає sticky-шапку. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Montserrat",system-ui,-apple-system,sans-serif;font-size:1.0625rem;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--text);text-underline-offset:2px}
strong{font-weight:700;color:var(--text)}

/* ============ Типографіка (шкала ред.1) ============ */
h1,h2,h3,.isb-hero-title,.isb-heading,.isb-sechead-title{font-family:"Days One",Georgia,serif;font-weight:400;margin:0 0 var(--space-m);color:var(--text);text-wrap:balance}
h1,.isb-hero-title{font-size:clamp(2.5rem,6vw,4.5rem);line-height:1.05;letter-spacing:-.02em}
h2,.isb-sechead-title{font-size:clamp(1.75rem,3.5vw,2.75rem);line-height:1.15;letter-spacing:-.015em}
h3{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.25;letter-spacing:-.01em}
p{margin:0 0 var(--space-m)} p:last-child{margin-bottom:0}
.lead,.isb-hero-sub,.isb-sechead-sub{font-size:1.25rem;line-height:1.6;color:var(--text-2)}
small,.isb-cap{font-size:.875rem;line-height:1.5;font-weight:500;color:var(--text-2)}
ul,ol{margin:0 0 var(--space-m);padding-left:1.25rem} li{margin-bottom:var(--space-2xs)}
a:not(.isb-btn):not(.pbtn):hover{color:#fff}

/* ============ Ейбрау-пілюля (капсула) — початок кожної секції ============ */
.isb-eyebrow,.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface-1);font-family:"Montserrat";font-weight:600;font-size:.8125rem;letter-spacing:.02em;text-transform:none;color:var(--text-2);margin-bottom:var(--space-m)}
.isb-eyebrow::before{content:"◦";color:var(--purple);font-weight:700}

/* ============ Секції / контейнер / РИТМ ============
   Між секціями ~128px = padding-block 64 згори+знизу (двох сусідніх дає 128).
   Раніше було clamp до 8rem → 256px діри. */
.isb-sec{padding-block:clamp(3rem,6vw,4rem);position:relative}
.isb-sec .isb-row{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-m)}
.page-narrow .isb-sec .isb-row{max-width:var(--container-narrow)}
/* тло-групи через row.settings.bg (.isb-bg-custom, inline) — БЕЗ авто-nth */

/* заголовок секції по центру; ейбрау→16→h2→24→(підзаг)→вміст */
.isb-sechead{text-align:center;max-width:620px;margin-inline:auto;margin-bottom:var(--space-l)}
.isb-sechead .isb-eyebrow{margin-left:auto;margin-right:auto;margin-bottom:var(--space-s)}
.isb-sechead-title{margin-bottom:var(--space-m)}
.isb-sechead-sub{margin-bottom:0}

/* ============ СІТКА компонентів: рідні колонки білдера + flex-wrap ============
   Кількість колонок = кількість карток (генератор задає width=100/perRow). Заголовок
   — колонка width 100 → на своєму рядку; картки під ним рівно по perRow, рівної
   висоти. Без порожніх колонок і без CSS auto-fit. */
.isb-row{flex-wrap:wrap;align-items:stretch}
/* заголовок-колонка (width 100) центрується як .isb-sechead; картки — колонки, рівна висота */
.isb-col{min-width:0}
/* цифри довіри — компактний відступ секції (вдвічі менший) */
.isb-pad-compact{padding-block:clamp(1.5rem,3vw,2rem)}
/* ПЛАНШЕТ 768-1023: проміжний крок 3→2 колонки (інакше картка 213-299px, вужча за
   поріг зламу заголовка 263px — той самий дефект на ширині, якої не дивились, №4.1).
   !important свідомо: перекриває ІНЛАЙНОВИЙ flex, який білдер ставить на .isb-col;
   зовнішнім CSS без !important інлайн не переб'єш. Набір із 4 стає 2×2 (краще за 4×160). */
@media (min-width:768px) and (max-width:1023px){
  .isb-col:not(.isb-has-wm){flex:1 1 calc(50% - var(--isb-col-gap,24px)/2) !important}
}

/* проза під центрованим заголовком (лише home; правові сторінки — ліворуч, вужче) */
body:not(.page-narrow) .isb-col:not(:has(.isb-el-card)):not(:has(.isb-el-pricing)):not(:has(.isb-el-stat)):not(:has(table))>.isb-el-text{max-width:620px;margin-inline:auto;text-align:center}

/* ============ Скляні картки (3 шари) ============ */
.isb-card,.isb-el-pricing .isb-pricing,.isb-bento-tile,.card{
  background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-l);
  box-shadow:0 1px 0 0 rgba(255,255,255,0.04) inset, 0 24px 48px -24px rgba(0,0,0,0.8);
  padding:var(--space-l)}
.isb-card-title{color:var(--text)} .isb-card-text{color:var(--text-2)}

/* ============ Свічення (макс. 2 на сторінку) — виразна пляма за рамкою ============ */
.glow,.isb-el-hero{position:relative}
/* Р9.2: свічення на всю ширину — фейдиться в темряву без жодної прямої межі.
   Виходить за боксовану секцію (overflow:visible нижче); горизонт. скрол ловить body{overflow-x:hidden}. */
.isb-el-hero::before{content:'';position:absolute;top:-12%;left:-25%;right:-25%;height:92%;background:radial-gradient(52% 55% at 55% 28%,var(--purple-glow),transparent 72%);filter:blur(72px);pointer-events:none;z-index:0}
.glow::before{content:'';position:absolute;inset:-20% -10% auto;height:70%;background:radial-gradient(60% 60% at 50% 0%,var(--purple-glow),transparent 70%);filter:blur(60px);pointer-events:none;z-index:0}
.isb-el-hero>*{position:relative;z-index:1}

/* ============ Герой — 2 колонки, ПОВНИЙ ЕКРАН, вертикальне центрування ============ */
.isb-sec:has(.isb-el-hero){min-height:100svh;display:flex;align-items:center;overflow:visible}
.isb-sec:has(.isb-el-hero) .isb-row{width:100%}
.isb-hero{display:flex;flex-direction:column;align-items:center;gap:var(--space-2xl);text-align:center}
.isb-hero-copy{text-align:center;max-width:820px}
.isb-hero-actions{display:flex;gap:var(--space-s);flex-wrap:wrap;justify-content:center;margin:var(--space-l) 0 var(--space-s)}
.isb-hero-note{color:var(--text-3);font-size:.9375rem}
/* Р7.3: макет під текстом, головний об'єкт першого екрана, ≤1100px по центру.
   Р9.3: flex:none;height:auto — інакше плагінів .isb-hero-visual{flex:1 1 320px} у
   колонковій розкладці стає ВИСОТОЮ 320px і зрізає вміст (614px). */
.isb-hero .isb-hero-visual,.isb-hero .isb-brand-demo{width:100%;max-width:1100px;flex:none;height:auto}
/* Рамка-оправа (тришаровість) — для ПОРОЖНЬОГО слоту І для зображення (світлий екран на темному завжди в оправі, як Apple) */
.isb-hero-visual{border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;background:var(--surface-1);box-shadow:0 1px 0 0 rgba(255,255,255,0.10) inset, 0 40px 80px -28px rgba(0,0,0,0.9)}
.isb-hero-visual img,.isb-hero-visual video{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){.isb-sec:has(.isb-el-hero){min-height:0}.isb-hero{gap:var(--space-xl)}}

/* ============ КОМПОНЕНТИ (картки замість тексту) ============ */
/* колонки-сітка: рівна висота, проміжок, стек на мобільному */
.isb-row{--isb-col-gap:24px}
.isb-el-card,.isb-el-pricing,.isb-el-stat{height:100%}
/* Картка (для-кого / проблема / можливості / чому-ми) — скло 3 шари */
.isb-card{height:100%;display:flex;flex-direction:column;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--space-l);box-shadow:0 1px 0 0 rgba(255,255,255,0.04) inset,0 24px 48px -28px rgba(0,0,0,0.8)}
.isb-card-num{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--purple);font-family:"Days One";font-size:1rem;margin-bottom:var(--space-m)}
.isb-card-dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--purple);margin-bottom:var(--space-m)}
.isb-card-title{font-family:"Days One";font-size:1.25rem;line-height:1.25;color:var(--text);margin:0 0 var(--space-2xs)}
.isb-card-text{color:var(--text-2);margin:0}
.isb-card-link{margin-top:auto;padding-top:var(--space-s);color:var(--text-2);text-decoration:none;font-weight:600}
/* Цифри довіри */
.isb-stat{text-align:center;padding:var(--space-m) var(--space-s)}
.isb-stat-num{font-family:"Days One";font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--text);display:flex;align-items:baseline;justify-content:center;gap:.1em}
.isb-stat-pre,.isb-stat-suf{color:var(--purple);font-size:.6em}
.isb-stat-label{color:var(--text-2);font-size:.9375rem;margin-top:var(--space-2xs)}
/* Тарифні картки */
.isb-price{height:100%;display:flex;flex-direction:column;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--space-l);box-shadow:0 1px 0 0 rgba(255,255,255,0.04) inset,0 24px 48px -28px rgba(0,0,0,0.8)}
.isb-price-featured{background:var(--surface-2);border-color:rgba(123,63,168,0.6);box-shadow:0 1px 0 0 rgba(255,255,255,0.10) inset,0 32px 64px -24px rgba(0,0,0,0.9),0 0 0 1px rgba(123,63,168,0.35);position:relative}
.isb-price-featured::before{content:"Популярний";position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);background:var(--purple);color:#fff;font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:999px;letter-spacing:.02em}
.isb-price-plan{font-family:"Days One";font-size:1.5rem;color:var(--text)}
.isb-price-sub{color:var(--text-2);font-size:.9375rem;margin-bottom:var(--space-s)}
.isb-price-value{font-family:"Days One";font-size:clamp(1.4rem,2.2vw,1.7rem);color:var(--text);margin-top:var(--space-s);white-space:nowrap}
.isb-price-note{color:var(--text-2);font-size:.875rem;margin-bottom:var(--space-m)}
.isb-price-list{list-style:none;padding:0;margin:0 0 var(--space-l);flex:1}
.isb-price-list li{padding:6px 0 6px 1.5rem;position:relative;color:var(--text-2);border-bottom:1px solid var(--line-soft)}
.isb-price-list li::before{content:"✓";position:absolute;left:0;color:var(--purple);font-weight:700}
.isb-price .isb-btn{margin-top:auto;justify-content:center;width:100%}

/* ============ Герой — White-Label demo (Р12): десктоп + мобільна верстка продукту ============
   Класи з prototype.html + мобільний PWA зі знімка. Палітри = 9 реальних пресетів; перемикання
   міняє ВЕСЬ склад пресета. ⚠️ МІНА (Р7): transition НЕ на var(--...) — залипає; кольори — ЛІТЕРАЛИ.
   МОБІЛЬНЕ (≤860, як у продукті): бічне меню за гамбургером, бренд+UK/EN у топбарі, пошук окремим
   рядком, KPI 2×2, нижня панель вкладок із FAB, рядок швидких дій прибрано, маска вимкнена. */
.isb-brand-demo{border:0;background:none;box-shadow:none;display:flex;flex-direction:column;gap:var(--space-m);margin:0;padding:0;min-width:0}
.isb-brand-demo .bd-swatches{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:var(--space-m)}
.bd-radio{position:absolute;width:1px;height:1px;opacity:0;clip:rect(0 0 0 0)}
.idc-window{border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;background:#fff;
  box-shadow:0 1px 0 0 rgba(255,255,255,0.10) inset,0 40px 80px -28px rgba(0,0,0,0.9);
  -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent);mask-image:linear-gradient(to bottom,#000 82%,transparent)}
.isb-brand-demo .app{--r-sm:8px;--r-md:12px;--r-pill:999px;--font:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--display:"Days One","Montserrat",sans-serif;display:flex;min-height:0;font-family:var(--font);text-align:left}
.isb-brand-demo .side{width:210px;flex:0 0 auto;padding:12px 8px;border-right:1px solid;overflow:hidden}
.isb-brand-demo .brand{display:flex;align-items:center;gap:9px;padding:6px 8px 12px}
.isb-brand-demo .brand .logo{width:30px;height:30px;flex:0 0 auto;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:6px;color:#fff;font-family:var(--display);font-size:15px;line-height:1}
.isb-brand-demo .brand .logo svg{width:100%;height:100%;display:block}
.isb-brand-demo .brand .bn{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.isb-brand-demo .brand .bn b{font-family:var(--display);font-size:13.5px}
.isb-brand-demo .brand .bn span{font-size:10.5px}
.isb-brand-demo .grp{margin-top:2px}
.isb-brand-demo .gh{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.isb-brand-demo .gh .ch{opacity:.6}
.isb-brand-demo .grp.open .gh .ch{transform:rotate(90deg)}
.isb-brand-demo .nav{display:block;padding:7px 12px 7px 20px;font-size:12.5px;font-weight:500;border-radius:var(--r-sm);text-decoration:none;margin-top:1px}
.isb-brand-demo .nav.active{font-weight:700}
.isb-brand-demo .main{flex:1;min-width:0;display:flex;flex-direction:column}
.isb-brand-demo .topbar{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:11px 18px;display:flex;align-items:center;gap:14px}
.isb-brand-demo .topbar .tb-bg{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s ease}
/* Р11: гамбургер як у продукті — на десктопі СХОВАНИЙ, на мобільному показується */
.isb-brand-demo .menu-toggle{display:none;align-items:center;justify-content:center;background:rgba(255,255,255,.16);border:0;border-radius:9px;width:34px;height:34px;flex:0 0 auto;color:#fff;padding:0}
.isb-brand-demo .menu-toggle svg{width:20px;height:20px}
.isb-brand-demo .search{flex:1;max-width:440px;background:rgba(255,255,255,.15);border-radius:var(--r-pill);padding:8px 15px;color:rgba(255,255,255,.85);font-size:12px}
.isb-brand-demo .me{margin-left:auto;font-size:12px;opacity:.9;color:#fff}
/* Р12: мобільний топбар-бренд + UK/EN + нижня панель — на десктопі сховані */
.isb-brand-demo .tb-brand{display:none;align-items:center;gap:8px;min-width:0}
.isb-brand-demo .tb-brand .tb-logo{width:32px;height:32px;flex:0 0 auto;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--display);font-size:15px;background:#51216f}
.isb-brand-demo .tb-brand .bn{display:flex;flex-direction:column;line-height:1.15;min-width:0;color:#fff}
.isb-brand-demo .tb-brand .bn b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isb-brand-demo .tb-brand .bn span{font-size:10.5px;opacity:.85}
.isb-brand-demo .lang{display:none;gap:6px;flex:0 0 auto}
.isb-brand-demo .lang .lg{background:rgba(255,255,255,.15);color:#fff;border-radius:9px;padding:6px 12px;font-size:12px;font-weight:700}
.isb-brand-demo .lang .lg.on{background:rgba(255,255,255,.30)}
.isb-brand-demo .idc-tabbar{display:none;align-items:flex-end;justify-content:space-around;padding:8px 4px 9px;border-top:1px solid;background:#fff}
.isb-brand-demo .idc-tabbar .tb-item{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;font-size:10px;font-weight:600;padding:4px 0}
.isb-brand-demo .idc-tabbar .tb-item svg{width:20px;height:20px}
.isb-brand-demo .idc-tabbar .tb-item.active{border-radius:12px}
.isb-brand-demo .idc-tabbar .tb-fab{flex:0 0 auto;align-self:flex-start;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:400 30px/1 var(--font);margin-top:-24px;box-shadow:0 6px 16px rgba(0,0,0,.22);background:#f7931e;color:#fff}
.isb-brand-demo .content{padding:18px 20px}
.isb-brand-demo .crumb{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.isb-brand-demo .page{font-family:var(--display);font-size:22px;margin:4px 0 2px}
.isb-brand-demo .sub{font-size:13px;margin:0 0 16px}
.isb-brand-demo .qa{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.isb-brand-demo .btn{border:none;border-radius:var(--r-pill);padding:9px 15px;font:700 12.5px var(--font);cursor:default}
.isb-brand-demo .btn-g{background:transparent;border:1px solid}
.isb-brand-demo .grid{display:grid;gap:14px}
.isb-brand-demo .kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.isb-brand-demo .kpi{border:1px solid;border-radius:var(--r-md);overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.isb-brand-demo .kpi .stripe{height:3px}
.isb-brand-demo .kpi:nth-child(2) .stripe{background:#15804a}
.isb-brand-demo .kpi:nth-child(3) .stripe{background:#2563a8}
.isb-brand-demo .kpi .b{padding:13px 15px}
.isb-brand-demo .kpi .v{font:800 22px var(--font)}
.isb-brand-demo .kpi .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.isb-brand-demo .kpi .d{font-size:11px;margin-top:6px}
.isb-brand-demo .kpi .d.up{color:#15804a}
.isb-brand-demo .app,.isb-brand-demo .side,.isb-brand-demo .kpi,.isb-brand-demo .brand .logo,.isb-brand-demo .brand .bn b,.isb-brand-demo .brand .bn span,.isb-brand-demo .gh,.isb-brand-demo .nav,.isb-brand-demo .nav.active,.isb-brand-demo .crumb,.isb-brand-demo .page,.isb-brand-demo .sub,.isb-brand-demo .me,.isb-brand-demo .kpi .v,.isb-brand-demo .kpi .l,.isb-brand-demo .kpi .d,.isb-brand-demo .kpi:nth-child(1) .stripe,.isb-brand-demo .kpi:nth-child(4) .stripe,.isb-brand-demo .btn-p,.isb-brand-demo .btn-g,.isb-brand-demo .tb-brand .tb-logo,.isb-brand-demo .idc-tabbar,.isb-brand-demo .idc-tabbar .tb-item,.isb-brand-demo .idc-tabbar .tb-fab{transition:background-color .4s ease,color .4s ease,border-color .4s ease}
/* топбар-градієнти пресетів (крос-фейд) */
.isb-brand-demo .topbar .tb-1{background:linear-gradient(135deg,#3b1454,#51216f)}
.isb-brand-demo .topbar .tb-2{background:#141414}
.isb-brand-demo .topbar .tb-3{background:linear-gradient(135deg,#4A0E28,#C2185B)}
.isb-brand-demo .topbar .tb-4{background:linear-gradient(135deg,#012A2D,#00838F)}
.isb-brand-demo .topbar .tb-5{background:linear-gradient(135deg,#2A0A12,#6D1B2E)}
.isb-brand-demo .topbar .tb-6{background:linear-gradient(135deg,#0A2318,#1B5E42)}
.isb-brand-demo .topbar .tb-7{background:linear-gradient(135deg,#3A140C,#E1553D)}
.isb-brand-demo .topbar .tb-8{background:linear-gradient(135deg,#0A1224,#1B2A56)}
.isb-brand-demo .topbar .tb-9{background:linear-gradient(135deg,#3A0A0A,#C1272D)}
/* === ПЕРЕФАРБОВКА per-палітра (9 реальних пресетів; ЛІТЕРАЛИ + transition .4s) === */
/* p1 IDance */
#bd-p1:checked~.idc-window .app{background-color:#faf7ff}
#bd-p1:checked~.idc-window .side{background-color:#fff;border-right-color:#eadcf5}
#bd-p1:checked~.idc-window .kpi{background-color:#fff;border-color:#eadcf5}
#bd-p1:checked~.idc-window .brand .logo,#bd-p1:checked~.idc-window .tb-brand .tb-logo{background-color:#51216f}
#bd-p1:checked~.idc-window .brand .bn b,#bd-p1:checked~.idc-window .page,#bd-p1:checked~.idc-window .kpi .v{color:#1f1730}
#bd-p1:checked~.idc-window .brand .bn span,#bd-p1:checked~.idc-window .gh,#bd-p1:checked~.idc-window .nav,#bd-p1:checked~.idc-window .crumb,#bd-p1:checked~.idc-window .sub,#bd-p1:checked~.idc-window .kpi .l,#bd-p1:checked~.idc-window .kpi .d{color:#756a85}
#bd-p1:checked~.idc-window .nav:not(.active){color:#1f1730}
#bd-p1:checked~.idc-window .nav.active{background-color:#f1e6ff;color:#51216f}
#bd-p1:checked~.idc-window .kpi:nth-child(1) .stripe{background-color:#51216f}
#bd-p1:checked~.idc-window .kpi:nth-child(4) .stripe{background-color:#f7931e}
#bd-p1:checked~.idc-window .btn-p{background-color:#f7931e;color:#1f1730}
#bd-p1:checked~.idc-window .btn-g{color:#51216f;border-color:#eadcf5}
#bd-p1:checked~.idc-window .idc-tabbar{background-color:#fff;border-top-color:#eadcf5}
#bd-p1:checked~.idc-window .idc-tabbar .tb-item{color:#756a85}
#bd-p1:checked~.idc-window .idc-tabbar .tb-item.active{background-color:#f1e6ff;color:#51216f}
#bd-p1:checked~.idc-window .idc-tabbar .tb-fab{background-color:#f7931e;color:#1f1730}
#bd-p1:checked~.idc-window .topbar .tb-1{opacity:1}
/* p2 Dark Gold */
#bd-p2:checked~.idc-window .app{background-color:#0D0D0D}
#bd-p2:checked~.idc-window .side{background-color:#1A1A1A;border-right-color:rgba(255,255,255,.08)}
#bd-p2:checked~.idc-window .kpi{background-color:#1A1A1A;border-color:rgba(255,255,255,.08)}
#bd-p2:checked~.idc-window .brand .logo,#bd-p2:checked~.idc-window .tb-brand .tb-logo{background-color:#1A1A1A}
#bd-p2:checked~.idc-window .brand .bn b,#bd-p2:checked~.idc-window .page,#bd-p2:checked~.idc-window .kpi .v{color:#FFFFFF}
#bd-p2:checked~.idc-window .brand .bn span,#bd-p2:checked~.idc-window .gh,#bd-p2:checked~.idc-window .nav,#bd-p2:checked~.idc-window .crumb,#bd-p2:checked~.idc-window .sub,#bd-p2:checked~.idc-window .kpi .l,#bd-p2:checked~.idc-window .kpi .d{color:#A9A2B8}
#bd-p2:checked~.idc-window .nav:not(.active){color:#FFFFFF}
#bd-p2:checked~.idc-window .nav.active{background-color:rgba(212,175,55,.14);color:#D4AF37}
#bd-p2:checked~.idc-window .kpi:nth-child(1) .stripe{background-color:#1A1A1A}
#bd-p2:checked~.idc-window .kpi:nth-child(4) .stripe{background-color:#D4AF37}
#bd-p2:checked~.idc-window .btn-p{background-color:#D4AF37;color:#1A1A1A}
#bd-p2:checked~.idc-window .btn-g{color:#D4AF37;border-color:rgba(255,255,255,.08)}
#bd-p2:checked~.idc-window .idc-tabbar{background-color:#1A1A1A;border-top-color:rgba(255,255,255,.08)}
#bd-p2:checked~.idc-window .idc-tabbar .tb-item{color:#A9A2B8}
#bd-p2:checked~.idc-window .idc-tabbar .tb-item.active{background-color:rgba(212,175,55,.14);color:#D4AF37}
#bd-p2:checked~.idc-window .idc-tabbar .tb-fab{background-color:#D4AF37;color:#1A1A1A}
#bd-p2:checked~.idc-window .topbar .tb-2{opacity:1}
/* p3 Rose Elegance */
#bd-p3:checked~.idc-window .app{background-color:#FFF5F8}
#bd-p3:checked~.idc-window .side{background-color:#fff;border-right-color:#f3dbe4}
#bd-p3:checked~.idc-window .kpi{background-color:#fff;border-color:#f3dbe4}
#bd-p3:checked~.idc-window .brand .logo,#bd-p3:checked~.idc-window .tb-brand .tb-logo{background-color:#C2185B}
#bd-p3:checked~.idc-window .brand .bn b,#bd-p3:checked~.idc-window .page,#bd-p3:checked~.idc-window .kpi .v{color:#2E1015}
#bd-p3:checked~.idc-window .brand .bn span,#bd-p3:checked~.idc-window .gh,#bd-p3:checked~.idc-window .nav,#bd-p3:checked~.idc-window .crumb,#bd-p3:checked~.idc-window .sub,#bd-p3:checked~.idc-window .kpi .l,#bd-p3:checked~.idc-window .kpi .d{color:#8a5c68}
#bd-p3:checked~.idc-window .nav:not(.active){color:#2E1015}
#bd-p3:checked~.idc-window .nav.active{background-color:#fde4ee;color:#C2185B}
#bd-p3:checked~.idc-window .kpi:nth-child(1) .stripe{background-color:#C2185B}
#bd-p3:checked~.idc-window .kpi:nth-child(4) .stripe{background-color:#F48FB1}
#bd-p3:checked~.idc-window .btn-p{background-color:#F48FB1;color:#2E1015}
#bd-p3:checked~.idc-window .btn-g{color:#C2185B;border-color:#f3dbe4}
#bd-p3:checked~.idc-window .idc-tabbar{background-color:#fff;border-top-color:#f3dbe4}
#bd-p3:checked~.idc-window .idc-tabbar .tb-item{color:#8a5c68}
#bd-p3:checked~.idc-window .idc-tabbar .tb-item.active{background-color:#fde4ee;color:#C2185B}
#bd-p3:checked~.idc-window .idc-tabbar .tb-fab{background-color:#F48FB1;color:#2E1015}
#bd-p3:checked~.idc-window .topbar .tb-3{opacity:1}
/* p4 Ocean Teal */
#bd-p4:checked~.idc-window .app{background-color:#F0FBFC}
#bd-p4:checked~.idc-window .side{background-color:#fff;border-right-color:#d3ecee}
#bd-p4:checked~.idc-window .kpi{background-color:#fff;border-color:#d3ecee}
#bd-p4:checked~.idc-window .brand .logo,#bd-p4:checked~.idc-window .tb-brand .tb-logo{background-color:#00838F}
#bd-p4:checked~.idc-window .brand .bn b,#bd-p4:checked~.idc-window .page,#bd-p4:checked~.idc-window .kpi .v{color:#0B2B2E}
#bd-p4:checked~.idc-window .brand .bn span,#bd-p4:checked~.idc-window .gh,#bd-p4:checked~.idc-window .nav,#bd-p4:checked~.idc-window .crumb,#bd-p4:checked~.idc-window .sub,#bd-p4:checked~.idc-window .kpi .l,#bd-p4:checked~.idc-window .kpi .d{color:#4f7a7e}
#bd-p4:checked~.idc-window .nav:not(.active){color:#0B2B2E}
#bd-p4:checked~.idc-window .nav.active{background-color:#d9f4f7;color:#007B86}
#bd-p4:checked~.idc-window .kpi:nth-child(1) .stripe{background-color:#00838F}
#bd-p4:checked~.idc-window .kpi:nth-child(4) .stripe{background-color:#4DD0E1}
#bd-p4:checked~.idc-window .btn-p{background-color:#4DD0E1;color:#0B2B2E}
#bd-p4:checked~.idc-window .btn-g{color:#007B86;border-color:#d3ecee}
#bd-p4:checked~.idc-window .idc-tabbar{background-color:#fff;border-top-color:#d3ecee}
#bd-p4:checked~.idc-window .idc-tabbar .tb-item{color:#4f7a7e}
#bd-p4:checked~.idc-window .idc-tabbar .tb-item.active{background-color:#d9f4f7;color:#007B86}
#bd-p4:checked~.idc-window .idc-tabbar .tb-fab{background-color:#4DD0E1;color:#0B2B2E}
#bd-p4:checked~.idc-window .topbar .tb-4{opacity:1}
/* p5 Classic Burgundy */
#bd-p5:checked~.idc-window .app{background-color:#FBF3F4}
#bd-p5:checked~.idc-window .side{background-color:#fff;border-right-color:#f0dde1}
#bd-p5:checked~.idc-window .kpi{background-color:#fff;border-color:#f0dde1}
#bd-p5:checked~.idc-window .brand .logo,#bd-p5:checked~.idc-window .tb-brand .tb-logo{background-color:#6D1B2E}
#bd-p5:checked~.idc-window .brand .bn b,#bd-p5:checked~.idc-window .page,#bd-p5:checked~.idc-window .kpi .v{color:#241014}
#bd-p5:checked~.idc-window .brand .bn span,#bd-p5:checked~.idc-window .gh,#bd-p5:checked~.idc-window .nav,#bd-p5:checked~.idc-window .crumb,#bd-p5:checked~.idc-window .sub,#bd-p5:checked~.idc-window .kpi .l,#bd-p5:checked~.idc-window .kpi .d{color:#7d5860}
#bd-p5:checked~.idc-window .nav:not(.active){color:#241014}
#bd-p5:checked~.idc-window .nav.active{background-color:#f6e2e6;color:#6D1B2E}
#bd-p5:checked~.idc-window .kpi:nth-child(1) .stripe{background-color:#6D1B2E}
#bd-p5:checked~.idc-window .kpi:nth-child(4) .stripe{background-color:#B5495B}
#bd-p5:checked~.idc-window .btn-p{background-color:#B5495B;color:#FFFFFF}
#bd-p5:checked~.idc-window .btn-g{color:#6D1B2E;border-color:#f0dde1}
#bd-p5:checked~.idc-window .idc-tabbar{background-color:#fff;border-top-color:#f0dde1}
#bd-p5:checked~.idc-window .idc-tabbar .tb-item{color:#7d5860}
#bd-p5:checked~.idc-window .idc-tabbar .tb-item.active{background-color:#f6e2e6;color:#6D1B2E}
#bd-p5:checked~.idc-window .idc-tabbar .tb-fab{background-color:#B5495B;color:#FFFFFF}
#bd-p5:checked~.idc-window .topbar .tb-5{opacity:1}
/* p6 Emerald Studio */
#bd-p6:checked~.idc-window .app{background-color:#F2FAF6}
#bd-p6:checked~.idc-window .side{background-color:#fff;border-right-color:#d6ece0}
#bd-p6:checked~.idc-window .kpi{background-color:#fff;border-color:#d6ece0}
#bd-p6:checked~.idc-window .brand .logo,#bd-p6:checked~.idc-window .tb-brand .tb-logo{background-color:#1B5E42}
#bd-p6:checked~.idc-window .brand .bn b,#bd-p6:checked~.idc-window .page,#bd-p6:checked~.idc-window .kpi .v{color:#12241B}
#bd-p6:checked~.idc-window .brand .bn span,#bd-p6:checked~.idc-window .gh,#bd-p6:checked~.idc-window .nav,#bd-p6:checked~.idc-window .crumb,#bd-p6:checked~.idc-window .sub,#bd-p6:checked~.idc-window .kpi .l,#bd-p6:checked~.idc-window .kpi .d{color:#537063}
#bd-p6:checked~.idc-window .nav:not(.active){color:#12241B}
#bd-p6:checked~.idc-window .nav.active{background-color:#dcf1e6;color:#1B5E42}
#bd-p6:checked~.idc-window .kpi:nth-child(1) .stripe{background-color:#1B5E42}
#bd-p6:checked~.idc-window .kpi:nth-child(4) .stripe{background-color:#4CAF7D}
#bd-p6:checked~.idc-window .btn-p{background-color:#4CAF7D;color:#12241B}
#bd-p6:checked~.idc-window .btn-g{color:#1B5E42;border-color:#d6ece0}
#bd-p6:checked~.idc-window .idc-tabbar{background-color:#fff;border-top-color:#d6ece0}
#bd-p6:checked~.idc-window .idc-tabbar .tb-item{color:#537063}
#bd-p6:checked~.idc-window .idc-tabbar .tb-item.active{background-color:#dcf1e6;color:#1B5E42}
#bd-p6:checked~.idc-window .idc-tabbar .tb-fab{background-color:#4CAF7D;color:#12241B}
#bd-p6:checked~.idc-window .topbar .tb-6{opacity:1}
/* p7 Sunset Coral */
#bd-p7:checked~.idc-window .app{background-color:#FFF6F2}
#bd-p7:checked~.idc-window .side{background-color:#fff;border-right-color:#f4ddd2}
#bd-p7:checked~.idc-window .kpi{background-color:#fff;border-color:#f4ddd2}
#bd-p7:checked~.idc-window .brand .logo,#bd-p7:checked~.idc-window .tb-brand .tb-logo{background-color:#E1553D}
#bd-p7:checked~.idc-window .brand .bn b,#bd-p7:checked~.idc-window .page,#bd-p7:checked~.idc-window .kpi .v{color:#2B1410}
#bd-p7:checked~.idc-window .brand .bn span,#bd-p7:checked~.idc-window .gh,#bd-p7:checked~.idc-window .nav,#bd-p7:checked~.idc-window .crumb,#bd-p7:checked~.idc-window .sub,#bd-p7:checked~.idc-window .kpi .l,#bd-p7:checked~.idc-window .kpi .d{color:#8a6154}
#bd-p7:checked~.idc-window .nav:not(.active){color:#2B1410}
#bd-p7:checked~.idc-window .nav.active{background-color:#ffe6da;color:#BF4834}
#bd-p7:checked~.idc-window .kpi:nth-child(1) .stripe{background-color:#E1553D}
#bd-p7:checked~.idc-window .kpi:nth-child(4) .stripe{background-color:#FFA379}
#bd-p7:checked~.idc-window .btn-p{background-color:#FFA379;color:#2B1410}
#bd-p7:checked~.idc-window .btn-g{color:#BF4834;border-color:#f4ddd2}
#bd-p7:checked~.idc-window .idc-tabbar{background-color:#fff;border-top-color:#f4ddd2}
#bd-p7:checked~.idc-window .idc-tabbar .tb-item{color:#8a6154}
#bd-p7:checked~.idc-window .idc-tabbar .tb-item.active{background-color:#ffe6da;color:#BF4834}
#bd-p7:checked~.idc-window .idc-tabbar .tb-fab{background-color:#FFA379;color:#2B1410}
#bd-p7:checked~.idc-window .topbar .tb-7{opacity:1}
/* p8 Midnight Blue */
#bd-p8:checked~.idc-window .app{background-color:#F3F6FC}
#bd-p8:checked~.idc-window .side{background-color:#fff;border-right-color:#dae1ef}
#bd-p8:checked~.idc-window .kpi{background-color:#fff;border-color:#dae1ef}
#bd-p8:checked~.idc-window .brand .logo,#bd-p8:checked~.idc-window .tb-brand .tb-logo{background-color:#1B2A56}
#bd-p8:checked~.idc-window .brand .bn b,#bd-p8:checked~.idc-window .page,#bd-p8:checked~.idc-window .kpi .v{color:#10182B}
#bd-p8:checked~.idc-window .brand .bn span,#bd-p8:checked~.idc-window .gh,#bd-p8:checked~.idc-window .nav,#bd-p8:checked~.idc-window .crumb,#bd-p8:checked~.idc-window .sub,#bd-p8:checked~.idc-window .kpi .l,#bd-p8:checked~.idc-window .kpi .d{color:#586179}
#bd-p8:checked~.idc-window .nav:not(.active){color:#10182B}
#bd-p8:checked~.idc-window .nav.active{background-color:#e2e9f7;color:#1B2A56}
#bd-p8:checked~.idc-window .kpi:nth-child(1) .stripe{background-color:#1B2A56}
#bd-p8:checked~.idc-window .kpi:nth-child(4) .stripe{background-color:#4A6FA5}
#bd-p8:checked~.idc-window .btn-p{background-color:#4A6FA5;color:#FFFFFF}
#bd-p8:checked~.idc-window .btn-g{color:#1B2A56;border-color:#dae1ef}
#bd-p8:checked~.idc-window .idc-tabbar{background-color:#fff;border-top-color:#dae1ef}
#bd-p8:checked~.idc-window .idc-tabbar .tb-item{color:#586179}
#bd-p8:checked~.idc-window .idc-tabbar .tb-item.active{background-color:#e2e9f7;color:#1B2A56}
#bd-p8:checked~.idc-window .idc-tabbar .tb-fab{background-color:#4A6FA5;color:#FFFFFF}
#bd-p8:checked~.idc-window .topbar .tb-8{opacity:1}
/* p9 Ruby Red */
#bd-p9:checked~.idc-window .app{background-color:#FFF5F4}
#bd-p9:checked~.idc-window .side{background-color:#fff;border-right-color:#f4d8d6}
#bd-p9:checked~.idc-window .kpi{background-color:#fff;border-color:#f4d8d6}
#bd-p9:checked~.idc-window .brand .logo,#bd-p9:checked~.idc-window .tb-brand .tb-logo{background-color:#C1272D}
#bd-p9:checked~.idc-window .brand .bn b,#bd-p9:checked~.idc-window .page,#bd-p9:checked~.idc-window .kpi .v{color:#2B0A0A}
#bd-p9:checked~.idc-window .brand .bn span,#bd-p9:checked~.idc-window .gh,#bd-p9:checked~.idc-window .nav,#bd-p9:checked~.idc-window .crumb,#bd-p9:checked~.idc-window .sub,#bd-p9:checked~.idc-window .kpi .l,#bd-p9:checked~.idc-window .kpi .d{color:#8a5450}
#bd-p9:checked~.idc-window .nav:not(.active){color:#2B0A0A}
#bd-p9:checked~.idc-window .nav.active{background-color:#ffe0dc;color:#C1272D}
#bd-p9:checked~.idc-window .kpi:nth-child(1) .stripe{background-color:#C1272D}
#bd-p9:checked~.idc-window .kpi:nth-child(4) .stripe{background-color:#FF7A5C}
#bd-p9:checked~.idc-window .btn-p{background-color:#FF7A5C;color:#2B0A0A}
#bd-p9:checked~.idc-window .btn-g{color:#C1272D;border-color:#f4d8d6}
#bd-p9:checked~.idc-window .idc-tabbar{background-color:#fff;border-top-color:#f4d8d6}
#bd-p9:checked~.idc-window .idc-tabbar .tb-item{color:#8a5450}
#bd-p9:checked~.idc-window .idc-tabbar .tb-item.active{background-color:#ffe0dc;color:#C1272D}
#bd-p9:checked~.idc-window .idc-tabbar .tb-fab{background-color:#FF7A5C;color:#2B0A0A}
#bd-p9:checked~.idc-window .topbar .tb-9{opacity:1}
/* --- контроль палітри (свотчі/назва/підпис) --- */
.bd-palname{text-align:center;color:var(--text-2);font-size:.875rem;font-weight:600;margin:0}
.bd-palname .bd-n{display:none}
#bd-p1:checked~.bd-palname .bd-n-p1,#bd-p2:checked~.bd-palname .bd-n-p2,#bd-p3:checked~.bd-palname .bd-n-p3,#bd-p4:checked~.bd-palname .bd-n-p4,#bd-p5:checked~.bd-palname .bd-n-p5,#bd-p6:checked~.bd-palname .bd-n-p6,#bd-p7:checked~.bd-palname .bd-n-p7,#bd-p8:checked~.bd-palname .bd-n-p8,#bd-p9:checked~.bd-palname .bd-n-p9{display:inline}
.bd-labels{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:340px;margin:0 auto}
.bd-sw{width:26px;height:26px;border-radius:999px;cursor:pointer;border:2px solid transparent;box-shadow:0 0 0 1px var(--line)}
.bd-sw-p1{background:#51216f}.bd-sw-p2{background:#1A1A1A}.bd-sw-p3{background:#C2185B}.bd-sw-p4{background:#00838F}.bd-sw-p5{background:#6D1B2E}.bd-sw-p6{background:#1B5E42}.bd-sw-p7{background:#E1553D}.bd-sw-p8{background:#1B2A56}.bd-sw-p9{background:#C1272D}
#bd-p1:checked~.bd-labels .bd-sw-p1,#bd-p2:checked~.bd-labels .bd-sw-p2,#bd-p3:checked~.bd-labels .bd-sw-p3,#bd-p4:checked~.bd-labels .bd-sw-p4,#bd-p5:checked~.bd-labels .bd-sw-p5,#bd-p6:checked~.bd-labels .bd-sw-p6,#bd-p7:checked~.bd-labels .bd-sw-p7,#bd-p8:checked~.bd-labels .bd-sw-p8,#bd-p9:checked~.bd-labels .bd-sw-p9{border-color:#fff;box-shadow:0 0 0 2px var(--purple)}
.bd-radio:focus-visible~.bd-labels{outline:2px solid var(--purple);outline-offset:6px;border-radius:12px}
.bd-caption{text-align:center;color:var(--text-3);font-size:.875rem;margin:0}
/* === Р12 МОБІЛЬНЕ (≤860, як у продукті-PWA) === */
@media (max-width:860px){
  .isb-brand-demo .side{display:none}
  .isb-brand-demo .menu-toggle{display:inline-flex;order:3}
  .isb-brand-demo .tb-brand{display:flex;order:1}
  .isb-brand-demo .lang{display:flex;order:2;margin-left:auto}
  .isb-brand-demo .topbar{flex-wrap:wrap;padding:10px 12px;gap:10px}
  .isb-brand-demo .topbar .search{order:4;flex:1 1 100%;max-width:none}
  .isb-brand-demo .me{display:none}
  .isb-brand-demo .qa{display:none}
  .isb-brand-demo .kpis{grid-template-columns:1fr 1fr}
  .isb-brand-demo .kpi .v{font-size:18px}
  .isb-brand-demo .kpi .l{font-size:9.5px}
  .isb-brand-demo .kpi .b{padding:11px 12px}
  .isb-brand-demo .content{padding:14px 14px 12px}
  .idc-window{-webkit-mask-image:none;mask-image:none}
  .isb-brand-demo .idc-tabbar{display:flex}
}

/* ============ Кнопки — світла головна, капсули ============ */
.isb-btn,.button,a.pbtn{display:inline-flex;align-items:center;gap:8px;font-family:"Montserrat";font-weight:600;font-size:1rem;text-decoration:none;padding:var(--space-s) var(--space-l);border-radius:999px;cursor:pointer;transition:transform 100ms ease-out,filter 150ms ease,background 150ms ease;border:1px solid transparent}
.isb-btn,.button,a.pbtn{background:var(--text);color:var(--bg)}                 /* головна — світла */
.isb-btn:hover,a.pbtn:hover{filter:brightness(1.08)}
.isb-btn:active,.button:active,a.pbtn:active{transform:scale(0.97)}
.isb-btn-ghost,.button--ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.isb-btn-ghost:hover{background:#221d2b;filter:none}
.isb-text a.btnlink{color:var(--text-2);text-decoration:none;font-weight:600}
.isb-text a.btnlink::after{content:" →"}

/* ============ Слоти зображень (темний порожній стан!) ============ */
.slot{aspect-ratio:var(--slot-ratio,3/2);width:100%;border-radius:var(--radius-l);overflow:hidden;background:var(--surface-1);border:1px solid var(--line)}
.slot img{width:100%;height:100%;object-fit:cover;border:0}
.slot--empty{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-3);font-size:.9375rem;font-weight:500;padding:var(--space-l);box-shadow:0 1px 0 0 rgba(255,255,255,0.04) inset}
.slot--hero{--slot-ratio:3/2} .slot--bento{--slot-ratio:4/3}
.slot--phone{--slot-ratio:1/2;max-width:300px;margin-inline:auto} .slot--bg{--slot-ratio:2/1} .slot--module{--slot-ratio:16/10}

/* ============ Таблиці (тарифи/редакції) — темні ============ */
.isb-text table{width:100%;border-collapse:collapse;margin:var(--space-m) 0;font-size:1rem;border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden}
.isb-text th,.isb-text td{padding:var(--space-s) var(--space-m);text-align:left;border-bottom:1px solid var(--line-soft)}
.isb-text thead th,.isb-text tr:first-child th{background:var(--surface-2);font-family:"Montserrat";font-weight:700;color:var(--text)}
.isb-text td:not(:first-child),.isb-text th:not(:first-child){text-align:center}
.isb-text tr:last-child td{border-bottom:0}
.isb-text{overflow-x:auto}

/* ============ Рух (ред.1) ============ */
.js-reveal .reveal{opacity:0;transform:translateY(16px);transition:opacity 400ms cubic-bezier(0.22,1,0.36,1),transform 400ms cubic-bezier(0.22,1,0.36,1)}
.js-reveal .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-reveal .reveal{transition:opacity 200ms ease;transform:none}.js-reveal .reveal.is-visible{opacity:1}}

/* ============ Шапка (темна) ============ */
.site-header{border-bottom:1px solid var(--line);background:rgba(11,10,15,0.72);backdrop-filter:saturate(140%) blur(12px);position:sticky;top:0;z-index:50}
.site-header .wrap{max-width:var(--container);margin-inline:auto;padding:var(--space-s) var(--space-m);display:flex;align-items:center;justify-content:space-between;gap:var(--space-m);flex-wrap:wrap}
.site-title{font-family:"Days One",serif;font-size:1.25rem;margin:0}
.site-title a{color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:.55rem}
/* Р10.3: знак iDance CRM — білий гліф у фіолетовому скругленому квадраті (як у продукті) */
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:1.9em;height:1.9em;flex:0 0 auto;padding:.34em;border-radius:.42em;background:linear-gradient(135deg,#3b1454,#51216f)}
.brand-mark svg{width:100%;height:100%;display:block}
.nav-primary ul{list-style:none;display:flex;gap:var(--space-l);margin:0;padding:0;flex-wrap:wrap}
.nav-primary a{font-family:"Montserrat";font-weight:600;font-size:.9375rem;color:var(--text-2);text-decoration:none}
.nav-primary a:hover{color:var(--text)}

/* ============ Футер (темна поверхня) — R16: реквізити на кожній сторінці, колонки, оплата ============ */
.site-footer{background:var(--surface-1);border-top:1px solid var(--line);color:var(--text-2);margin-top:var(--space-3xl)}
.site-footer .wrap{max-width:var(--container);margin-inline:auto;padding:var(--space-xl) var(--space-m)}
/* §17.1: кількість колонок меню тепер змінна (з дворівневого меню) — сітка гнучка: реквізити + auto-fit */
.footer-grid{display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(auto-fit,minmax(150px,1fr));gap:var(--space-xl) var(--space-l);align-items:start}
.site-footer .site-title a{color:var(--text)}
.footer-req{font-style:normal;font-size:.875rem;line-height:1.75;color:var(--text-3);margin:var(--space-m) 0}
.footer-req a{color:var(--text-2);text-decoration:none}
.footer-req a:hover{color:var(--text)}
/* реквізити тепер із Site Settings (.isb-requisites>p) — прибираємо картковий вигляд у футері */
.footer-req .isb-requisites{background:none;border:0;padding:0;margin:0}
.footer-req .isb-requisites p{margin:0 0 .25em;font-size:.875rem;line-height:1.75;color:var(--text-3)}
.footer-social{display:flex;flex-wrap:wrap;gap:var(--space-m);margin:var(--space-s) 0 0}
.footer-social a{color:var(--text-2);text-decoration:none;font-size:.9375rem}
.footer-social a:hover{color:var(--text)}
.footer-empty{color:var(--text-3);font-size:.875rem;line-height:1.6;margin:0}
.footer-empty a{color:var(--text-2);text-decoration:none}
.footer-empty a:hover{color:var(--text)}
.footer-pay{display:flex;align-items:center;gap:10px;margin:0}
.footer-pay img{height:26px;width:auto;background:rgba(255,255,255,.06);border-radius:5px;padding:4px 7px}
.footer-h{font-family:"Montserrat";font-weight:700;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:0 0 var(--space-s)}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2xs)}
.footer-col a{color:var(--text-2);text-decoration:none;font-size:.9375rem}
.footer-col a:hover{color:var(--text)}
.site-footer .wrap.footer-bottom{border-top:1px solid var(--line);padding-block:var(--space-m)}
.footer-meta{font-size:.875rem;color:var(--text-3);margin:0}
.footer-meta a{color:var(--text-3);text-decoration:none}
.footer-meta a:hover{color:var(--text-2)}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* Кнопка «Зв'язатися» в шапці (16.4): контурна, НЕ помаранчева — головна (помаранчева)
   дія лишається за героєм, тож на першому екрані вона одна. Веде туди ж, куди «Написати». */
.btn-contact{font-family:"Montserrat";font-weight:600;font-size:.9375rem;color:var(--text);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.5rem 1.15rem;white-space:nowrap;transition:border-color .2s ease,background .2s ease}
.btn-contact:hover,.btn-contact:focus-visible{border-color:var(--purple);background:rgba(123,63,168,.14)}

@media (max-width:640px){.nav-primary ul{gap:var(--space-m)}}
/* 16.3: коротша шапка на телефоні — менший знак і відступи, щоб не з'їдати екран при прокрутці */
@media (max-width:860px){
  .site-header .wrap{padding:var(--space-2xs) var(--space-s)}
  .site-header .site-title{font-size:1.05rem}
  .btn-contact{padding:.4rem .85rem;font-size:.875rem}
}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:var(--space-s);top:var(--space-s);background:var(--surface-2);color:var(--text);padding:var(--space-2xs) var(--space-s);z-index:100;border-radius:var(--radius-s)}

/* ============ §7.4 Секція «жива система» — клікабельний прототип ============ */
.idc-live{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-m);align-items:center;position:relative}
/* 15.3: свічення за рамкою — те саме, що в героя; шар НА ВСЮ ШИРИНУ ВІКНА, фейд у темряву
   без прямих меж. Секція боксована (.isb-w-boxed: max-width 1200 + overflow:hidden) — без
   зняття кліпу свічення обрізалось би прямою лінією на 1200px (урок 9.2). Знімаємо кліп саме
   для цієї секції (specificity :has перемагає .isb-w-boxed); горизонт ловить html{overflow-x:clip}. */
.isb-sec:has(.idc-live){overflow:visible}
.idc-live::before{content:'';position:absolute;left:50%;top:-14%;transform:translateX(-50%);width:100vw;height:80%;background:radial-gradient(52% 58% at 50% 4%,var(--purple-glow),transparent 70%);filter:blur(64px);pointer-events:none;z-index:0}
.idc-live>*{position:relative;z-index:1}
.idc-live .idc-tabsfs{border:0;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:var(--space-m);align-items:center}
.idc-radio{position:absolute;width:1px;height:1px;opacity:0;clip:rect(0 0 0 0)}
.idc-tabs{display:inline-flex;gap:6px;background:var(--surface-1);border:1px solid var(--line);border-radius:999px;padding:5px}
.idc-tab{padding:8px 18px;border-radius:999px;font-weight:600;font-size:.9375rem;color:var(--text-2);cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease}
#idc-owner:checked~.idc-tabs .idc-tab[for="idc-owner"],#idc-student:checked~.idc-tabs .idc-tab[for="idc-student"],#idc-teacher:checked~.idc-tabs .idc-tab[for="idc-teacher"]{background:var(--purple);color:#fff}
.idc-radio:focus-visible~.idc-tabs{outline:2px solid var(--purple);outline-offset:4px}
.idc-frame{position:relative;width:100%;aspect-ratio:998/560;border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;background:var(--surface-1);box-shadow:0 1px 0 0 rgba(255,255,255,0.10) inset,0 40px 80px -28px rgba(0,0,0,0.9)}
.idc-if{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#faf7ff}
/* заглушка до завантаження (§7.4: порожня рамка читається як зламана) */
.idc-ph{position:absolute;inset:0;background:#faf7ff;display:flex;flex-direction:column;z-index:1;transition:opacity .3s ease,visibility 0s linear .3s}
/* visibility гарантує зникнення навіть якщо opacity-транзишн залипне (Chrome залипає
 * на не-пофарбованому піддереві — reveal-обгортка ще opacity:0): fade коли працює,
 * тверде приховування коли ні. Без visibility заглушка «Завантаження…» лишалась
 * поверх уже завантаженого iframe — два стани з однаковим виглядом. */
.idc-loaded .idc-ph{opacity:0;visibility:hidden;pointer-events:none}
.idc-ph-top{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(135deg,#3b1454,#51216f)}
.idc-ph-logo{width:26px;height:26px;flex:0 0 auto;border-radius:7px;background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Days One";font-size:11px}
.idc-ph-bar{flex:1;height:14px;border-radius:999px;background:rgba(255,255,255,.15);max-width:280px}
.idc-ph-cap{margin:auto;color:var(--text-3);font-size:.9375rem}
.idc-cap{text-align:center;color:var(--text-2);font-size:1rem;max-width:640px;margin:0 auto}
/* §17.2: ІНВЕРСІЯ ПЛЕЙСХОЛДЕРА. Без JS (у т.ч. серверний «Перегляд») ТИПОВО — кнопка-посилання
   «Відкрити прототип» (працює завжди). Рамку/вкладки/підпис показуємо ЛИШЕ коли reveal.js додав
   .idc-js — бо без скрипта iframe не підставляється, і «Завантаження…» висіло б назавжди (стан
   «очікування» = насправді «ніколи»; правило №15 + «вміст видимий без JS» + empty-state №1). */
.idc-live .idc-frame,.idc-live .idc-tabs,.idc-live .idc-cap{display:none}
.idc-live.idc-js .idc-frame{display:block}
.idc-live.idc-js .idc-tabs{display:inline-flex}
.idc-live.idc-js .idc-cap{display:block}
.idc-fallback{display:inline-flex}
.idc-live.idc-js .idc-fallback{display:none}
/* §7.4.4: мобільний — фолбек ТИПОВИЙ навіть із JS (вкладена прокрутка iframe на дотику = поломка) */
@media (max-width:860px){
  .idc-live.idc-js .idc-frame,.idc-live.idc-js .idc-tabs,.idc-live.idc-js .idc-cap{display:none}
  .idc-live.idc-js .idc-fallback{display:inline-flex}
}