/* BH Agency · branding.css — лише /services/branding (branding-premium 27.10; слово Heidar «премиум-премиум, со всеми анимациями, свои визуальные элементы, свой моушн, чтобы подходило под идею брендинга»).
   Ідея — бренд як система: знак → палітра → шрифт → носії. Усе в коді (HTML/CSS/SVG), без фото й кейсів; бренд на сцені — вигаданий (монограма «b» + лайм-крапка), без назв реальних фірм.
   Вантажиться ПІСЛЯ premium.css (кіт: вікно A11, вітрина-рамка .sx, стежка етапів, маніфест, mc-, липка панель). Система BH (bh-source): tokens.css, металеві H2, кікери з лайм-рискою.
   Шрифти: Inter Tight 700–800 (D) + Inter 400–600 (T), локально. Палітра: #111110 · #FAF9F5 · #C8FF3E (+ #6B6B69 з дошки айдентики BH). Рух — лише transform / opacity / clip-path / stroke-dashoffset; без filter:blur.
   Криві: --sw-out cubic-bezier(.22,1,.36,1) (Molten), --sw-io (рух по екрану); scroll-driven — linear. prefers-reduced-motion → кінцеві стани (базові стилі = фінальний кадр; keyframes описують лише «звідки»). */

@property --br-c{syntax:'<color>';inherits:true;initial-value:#C8FF3E}

/* ───────── знак: монограма «b» + лайм-крапка. Лінія малюється stroke-dashoffset (pathLength=100) ───────── */
.br-mk{display:block;width:100%;height:100%;overflow:visible;color:var(--mk,var(--sw-lime))}
.br-ln{fill:none;stroke:currentColor;stroke-width:9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.br-dot{fill:var(--br-dot,var(--sw-paper));transform-box:fill-box;transform-origin:50% 50%}
.br-gd{fill:none;stroke:rgba(200,255,62,.55);stroke-width:.5;stroke-dasharray:1.6 2.2;opacity:.3}
.sw-wd{display:inline-block;white-space:nowrap}
.sw-ch{display:inline-block;transform-origin:50% 90%}

/* ───────── 1 · Перший екран A11: вікно «бренд-система» збирається ~3 с без кліку ───────── */
.br-lime{position:absolute;z-index:0;inset:-20% -10% auto;height:90%;pointer-events:none;background:radial-gradient(46% 52% at 80% 22%,rgba(200,255,62,.24),rgba(200,255,62,.06) 50%,transparent 74%)}
.br-board{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr) minmax(0,1.02fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(10px,1.5cqi,20px);padding:clamp(12px,1.7cqi,24px);aspect-ratio:2.06/1}
.br-cell{position:relative;overflow:hidden;isolation:isolate;border-radius:clamp(12px,1.5cqi,20px);background:rgba(250,249,245,.035);box-shadow:inset 0 0 0 1px rgba(250,249,245,.09)}
.br-cell--mark{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.8cqi,26px);padding-top:clamp(24px,3cqi,40px)}
.br-cell--pal{grid-column:2;grid-row:1}
.br-cell--ty{grid-column:2;grid-row:2}
.br-cell--car{grid-column:3;grid-row:1/3}
.br-cap{position:absolute;z-index:4;left:clamp(12px,1.4cqi,18px);top:clamp(10px,1.2cqi,16px);font:700 max(12px,.88cqi)/1 var(--f-inter);letter-spacing:.14em;text-transform:uppercase;color:rgba(250,249,245,.5)}
.br-mkbox{display:block;flex:none;width:min(70%,36cqi);aspect-ratio:1}
.br-word{display:block;flex:none;font:800 clamp(30px,5.2cqi,72px)/1 var(--f-tight);letter-spacing:-.05em;color:var(--sw-paper);white-space:nowrap}
/* палітра */
.br-sws{position:absolute;z-index:2;left:clamp(10px,1.3cqi,16px);right:clamp(10px,1.3cqi,16px);bottom:clamp(10px,1.3cqi,16px);top:clamp(34px,3.8cqi,50px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,.8cqi,10px)}
.br-sw{position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:clamp(8px,1cqi,12px);border-radius:clamp(8px,1cqi,14px);background:var(--c);box-shadow:inset 0 0 0 1px rgba(250,249,245,.14);color:var(--t)}
.br-sw b{font:700 max(12px,.82cqi)/1 var(--f-inter);letter-spacing:.02em}
.br-sw::after{content:"";position:absolute;inset:-3px;border-radius:inherit;box-shadow:0 0 0 2px var(--sw-lime);opacity:0;pointer-events:none}
/* шрифтова пара */
.br-ty{position:absolute;inset:clamp(34px,3.8cqi,50px) clamp(12px,1.4cqi,18px) clamp(8px,1cqi,14px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(10px,1.6cqi,22px);align-items:center}
.br-ty__aa{font:800 clamp(52px,8.4cqi,112px)/.85 var(--f-tight);letter-spacing:-.05em;color:var(--sw-lime);white-space:nowrap}
.br-ty__t{display:grid;gap:clamp(6px,.8cqi,10px);min-width:0}
.br-ty__d{font:800 clamp(17px,2.3cqi,32px)/1 var(--f-tight);letter-spacing:-.035em;color:var(--sw-paper)}
.br-ty__p{font:400 max(12px,1.02cqi)/1.35 var(--f-inter);color:rgba(250,249,245,.7)}
.br-ty__m{font:600 max(12px,.88cqi)/1 var(--f-inter);color:var(--sw-lime)}
/* носії — стос: візитка · іконка · пакет · вивіска */
.br-car{position:absolute;inset:clamp(30px,3.4cqi,46px) 5% 5%}
.br-ci{position:absolute;display:block;transform:rotate(var(--r,0deg));box-shadow:0 18px 40px -16px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.1)}
.br-ci__mk{position:absolute;display:block}
.br-ci--card{left:-2%;top:2%;width:72%;aspect-ratio:1.62;border-radius:clamp(6px,.8cqi,10px);background:linear-gradient(150deg,#d6ff6a,#b6f02a);z-index:1}
.br-ci--card .br-ci__mk{left:8%;top:14%;width:22%;aspect-ratio:1;--mk:var(--sw-ink);--br-dot:var(--sw-ink)}
.br-ci__b{position:absolute;left:8%;bottom:14%;width:54%;display:grid;gap:max(5px,.5cqi)}
.br-ci__b i{display:block;height:max(5px,.5cqi);border-radius:9px;background:rgba(17,17,16,.5)}
.br-ci__b i:last-child{width:62%;background:rgba(17,17,16,.3)}
.br-ci--app{right:2%;top:12%;width:34%;aspect-ratio:1;border-radius:24%;background:linear-gradient(160deg,#202226,#0b0c0e);z-index:2;box-shadow:0 18px 44px -14px rgba(200,255,62,.35),inset 0 0 0 1px rgba(255,255,255,.14)}
.br-ci--app .br-ci__mk{inset:20%}
.br-ci--bag{left:12%;bottom:0;width:58%;height:60%;border-radius:6px 6px 10px 10px;background:linear-gradient(180deg,#FFFEF9,#E9E8E1);z-index:3}
.br-ci__hd{position:absolute;left:24%;right:24%;top:-22%;height:28%;border:max(4px,.45cqi) solid #E9E8E1;border-bottom:0;border-radius:999px 999px 0 0}
.br-ci--bag .br-ci__mk{left:27%;right:27%;top:18%;aspect-ratio:1;--mk:var(--sw-ink);--br-dot:#6a9a00}
.br-ci__w{position:absolute;left:30%;right:30%;bottom:15%;height:max(6px,.6cqi);border-radius:9px;background:rgba(17,17,16,.82)}
.br-ci--sign{right:-2%;bottom:7%;width:50%;aspect-ratio:2.7;display:flex;align-items:center;justify-content:center;gap:6%;border-radius:999px;background:var(--sw-ink);z-index:4;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.8),inset 0 0 0 1px rgba(200,255,62,.5)}
.br-ci--sign .br-ci__mk{position:static;height:58%;aspect-ratio:1}
.br-ci--sign .sw-t{font:800 max(13px,1.35cqi)/1 var(--f-tight);letter-spacing:-.03em;color:var(--sw-paper)}

@container (min-width:641px) and (max-width:900px){.br-sw b{display:none}}
/* вузьке вікно (телефон): 2 колонки у першому ряду, шрифтова смуга, носії на всю ширину */
@container (max-width:640px){
  .br-board{aspect-ratio:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:176px 88px 196px;gap:10px;padding:12px}
  .br-cell--mark{grid-column:1;grid-row:1;gap:8px;padding-top:22px}
  .br-cell--pal{grid-column:2;grid-row:1}
  .br-cell--ty{grid-column:1/3;grid-row:2}
  .br-cell--car{grid-column:1/3;grid-row:3}
  .br-mkbox{width:min(56%,88px)}
  .br-word{font-size:28px}
  .br-sws{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));top:32px}
  .br-ty{top:16px;grid-template-columns:auto minmax(0,1fr);gap:14px}
  .br-ty__aa{font-size:56px}
  .br-ty__d{font-size:22px}
  .br-ty__p{display:none}
  .br-cell--ty .br-cap{display:none}
  .br-car{inset:28px 4% 8px}
  .br-ci--card{left:0;top:4%;width:40%}
  .br-ci--app{left:36%;right:auto;top:0;width:19%}
  .br-ci--bag{left:50%;bottom:0;width:27%;height:92%}
  .br-ci--sign{right:0;bottom:8%;width:35%}
  .br-ci--sign .sw-t{font-size:13px}
}

/* таймлайн збирання (~3 с, без кліку) — лише коли [data-run]; без JS — грає одразу; reduced-motion — фінальний кадр (kit-правило гасить animation у .sw-win *) */
[data-run] .br-cell{animation:br-cell 700ms var(--sw-out) calc(120ms + var(--d,0) * 70ms) both}
@keyframes br-cell{from{opacity:0;transform:translateY(14px)}}
/* 1 · креслення: сітка й кола проявляються, потім стихають */
[data-run] .br-gd{animation:br-gd 2600ms linear 160ms both}
@keyframes br-gd{0%{opacity:0}16%{opacity:.9}62%{opacity:.9}100%{opacity:.3}}
/* 2 · знак малюється лінією: стовпчик → коло → крапка */
[data-run] .br-ln--s{animation:br-draw 640ms var(--sw-out) 640ms both}
[data-run] .br-ln--b{animation:br-draw 1050ms var(--sw-out) 960ms both}
@keyframes br-draw{from{stroke-dashoffset:100}}
[data-run] .br-dot{animation:br-pop 620ms var(--sw-out) 1900ms both}
@keyframes br-pop{from{opacity:0;transform:scale(0)}}
[data-run] .br-word .sw-ch{animation:br-ch 720ms var(--sw-out) calc(1750ms + var(--i,0) * 40ms) both}
/* 3 · палітра: 4 плашки виїжджають зі стаггером */
[data-run] .br-sw{animation:br-slide 760ms var(--sw-out) calc(1080ms + var(--i,0) * 90ms) both}
@keyframes br-slide{from{opacity:0;transform:translateX(70%) scale(.82)}}
/* 4 · шрифтова пара: літери з розтягу 1.8 × .1 → 1 (ScrollBlurTypography effect-3, лише transform/opacity) */
[data-run] .br-ty .sw-ch{animation:br-ch 720ms var(--sw-out) calc(1500ms + var(--i,0) * 34ms) both}
[data-run] .br-ty__p,[data-run] .br-ty__m{animation:br-rise 700ms var(--sw-out) 2150ms both}
@keyframes br-ch{from{opacity:0;transform:scale(1.8,.1)}40%{opacity:1}}
@keyframes br-rise{from{opacity:0;transform:translateY(8px)}}
/* 5 · носії складаються стосом */
[data-run] .br-ci{animation:br-fly 800ms var(--sw-out) calc(1850ms + var(--i,0) * 130ms) both,br-bob 7s ease-in-out calc(3600ms + var(--i,0) * 420ms) infinite}
@keyframes br-fly{from{opacity:0;transform:translateY(52%) rotate(calc(var(--r,0deg) * -2.2)) scale(.84)}}
@keyframes br-bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
/* 6 · лайм-світло: сяйво у вікні й під ним, живий індикатор */
[data-run] .br-lime{animation:br-fade 1100ms ease-out 1950ms both,br-breathe 9s ease-in-out 3100ms infinite}
[data-sw-stage]:has([data-run]) .sw-stage__glow{animation:br-fade 1400ms ease-out 1950ms both}
@keyframes br-fade{from{opacity:0}}
@keyframes br-breathe{0%,100%{transform:none}50%{transform:translate(-4%,3%) scale(1.06)}}
[data-run] .sw-win__live i{animation:br-live 600ms ease-out 2800ms both}
@keyframes br-live{from{background:rgba(250,249,245,.25);box-shadow:none}}
/* 7 · тихий цикл (8 с): кільце-вибір ходить по плашках палітри; крапка знака дихає */
[data-run] .br-sw::after{animation:br-pick 8s linear calc(3600ms + var(--i,0) * 2000ms) infinite}
@keyframes br-pick{0%{opacity:0}4%,22%{opacity:1}28%,100%{opacity:0}}
[data-run] .br-cell--mark .br-dot{animation:br-pop 620ms var(--sw-out) 1900ms both,br-beat 3.6s ease-in-out 3400ms infinite}
@keyframes br-beat{0%,100%{transform:none}50%{transform:scale(1.28)}}

/* ───────── 2 · Вітрина «Що отримує ваш бренд»: бенто з 6 живих ефектів (код, не відео) ───────── */
.sx--bbook{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.sx--bbook.is-drag,.sx--bbook .is-drag{cursor:grabbing}
@media (min-width:600px){.sx--bbook,.sx--bfilm{grid-column:span 2}}
@media (min-width:1024px){
  .sx--bmark,.sx--bpal,.sx--btype,.sx--bstack{grid-column:span 2;grid-row:span 3}
  .sx--bbook{grid-column:span 4;grid-row:span 3}
  .sx--bfilm{grid-column:1/-1;grid-row:span 2}
}
.sx--bfilm .sx__stage{position:absolute;inset:0}
.sx--bfilm .sx__stage::after{display:none}
.sx--bfilm .sx__txt{position:absolute;left:0;bottom:0;max-width:min(60ch,92%);padding-top:0}
@media (max-width:760px){.sx--bbook{touch-action:pan-x pan-y;cursor:auto}}

/* 01 · знак, що малюється: лінія від скролу (--p задає branding.js) */
.br-m{--p:1;--st:clamp(0,calc((var(--p) - .04) / .34),1);--bw:clamp(0,calc((var(--p) - .3) / .56),1);--dt:clamp(0,calc((var(--p) - .86) / .14),1);position:absolute;inset:0;display:grid;place-items:center}
.br-mk--m{width:min(76%,290px);height:auto;aspect-ratio:1;margin-top:-14px}
.br-m .br-gd{opacity:clamp(.14,calc(var(--p) * 4),.6)}
.br-m .br-ln--s{stroke-dashoffset:calc(100 * (1 - var(--st)))}
.br-m .br-ln--b{stroke-dashoffset:calc(100 * (1 - var(--bw)))}
.br-m .br-dot{opacity:var(--dt);transform:scale(var(--dt))}
.br-m__bar{position:absolute;left:20px;right:20px;bottom:18px;height:3px;border-radius:9px;background:rgba(250,249,245,.12)}
.br-m__bar i{display:block;height:100%;border-radius:inherit;background:var(--sw-lime);transform-origin:left;transform:scaleX(var(--p))}

/* 02 · палітра під курсором: активна плашка підсвічена, решта тьмяніє; світло за плашкою — її колір */
.br-p{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:34px 18px 28px;contain:layout paint;--br-c:#C8FF3E;transition:--br-c .7s ease}
.br-p::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(70% 60% at 50% 72%,color-mix(in srgb,var(--br-c) 32%,transparent),transparent 74%)}
.br-pl{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;padding-bottom:12px;min-height:0;color:var(--t);opacity:.45;transition:opacity .5s var(--sw-out);cursor:pointer;-webkit-tap-highlight-color:transparent}
.br-pl__f{position:absolute;inset:0;border-radius:14px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(250,249,245,.18);transform-origin:50% 100%;transform:scaleY(.6);transition:transform .75s var(--sw-out)}
.br-pl.is-on{opacity:1}
.br-pl.is-on .br-pl__f{transform:none}
.br-pl__h{position:relative;z-index:1;font:700 12px/1 var(--f-inter);letter-spacing:.02em}
.br-pl__r{position:relative;z-index:1;font:600 12px/1 var(--f-inter);font-style:normal;opacity:0;transform:translateY(6px);transition:opacity .5s var(--sw-out),transform .5s var(--sw-out)}
.br-pl.is-on .br-pl__r{opacity:.8;transform:none}

/* 03 · кінетична шрифтова пара (ScrollBlurTypography effect-3): ступінь від скролу --p, літера → scale(1.8,.1) → 1 */
.br-t{--p:1;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,1.2vw,16px);padding:34px clamp(16px,1.6vw,22px) 26px}
.br-t__d{font:800 clamp(36px,3.9vw,58px)/1 var(--f-tight);letter-spacing:-.045em;color:var(--sw-paper)}
.br-t__d .br-w:first-child{color:var(--sw-lime)}
.br-w{display:inline-block;white-space:nowrap}
.br-l{--q:clamp(0,calc(var(--p) * 1.9 - var(--i,0) * .075),1);display:inline-block;transform-origin:50% 90%;transform:scale(calc(1.5 - .5 * var(--q)),calc(.1 + .9 * var(--q)));opacity:clamp(0,calc(var(--q) * 3),1)}
.br-t__p{--k:clamp(0,calc(var(--p) * 2 - .9),1);max-width:28ch;font:400 clamp(14px,1.1vw,16px)/1.42 var(--f-inter);color:rgba(250,249,245,.76);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 10px))}
.br-t__g{display:flex;flex-wrap:wrap;gap:8px}
.br-t__g b{padding:7px 11px;border-radius:99px;background:rgba(250,249,245,.08);box-shadow:inset 0 0 0 1px rgba(250,249,245,.14);font:600 12px/1 var(--f-inter);color:rgba(250,249,245,.8)}
.br-t.is-done .br-l{animation:br-wave 5s ease-in-out infinite;animation-delay:calc(var(--i,0) * 130ms)}
@keyframes br-wave{0%,100%{translate:0 0}50%{translate:0 -5%}}

/* 04 · носії стосом (Codrops 3DStackMotion effect-1): картки-носії летять у перспективі від скролу */
.stk-wrap{position:absolute;inset:0;display:grid;place-items:center;perspective:800px}
.stk{--cw:clamp(96px,9vw,138px);display:grid;grid-template-areas:"c";place-items:center;transform-style:preserve-3d}
.stk__c{grid-area:c;width:var(--cw);height:calc(var(--cw) * 1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 10px 30px -10px rgba(0,0,0,.6)}
.kr{position:relative;display:flex;flex-direction:column;gap:7%;padding:10%;border-radius:12px;overflow:hidden}
.kr__mk{display:block;width:30%;aspect-ratio:1;flex:none;--mk:var(--sw-ink);--br-dot:var(--sw-ink)}
.kr__b,.kr__ls{display:grid;gap:5px;margin-top:auto}
.kr__b i,.kr__ls i{display:block;height:5px;border-radius:9px;background:currentColor;opacity:.4}
.kr__b i:last-child,.kr__ls i:last-child{width:60%;opacity:.25}
.kr--card{background:linear-gradient(160deg,#d6ff6a,#b6f02a);color:var(--sw-ink)}
.kr--app{background:linear-gradient(160deg,#202226,#0b0c0e);color:var(--sw-paper)}
.kr__ic{display:grid;place-items:center;width:62%;aspect-ratio:1;margin:auto;border-radius:24%;background:var(--sw-lime)}
.kr__ic .kr__mk{width:60%}
.kr__dots{display:flex;justify-content:center;gap:6px}.kr__dots i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.3}
.kr--bag{background:linear-gradient(180deg,#FFFEF9,#E9E8E1);color:var(--sw-ink);align-items:center;justify-content:center;overflow:visible}
.kr__hd{position:absolute;left:26%;right:26%;top:-10%;height:20%;border:4px solid #E9E8E1;border-bottom:0;border-radius:999px 999px 0 0}
.kr--bag .kr__mk{width:42%;--br-dot:#6a9a00}
.kr__w{display:block;width:40%;height:6px;margin-top:10%;border-radius:9px;background:rgba(17,17,16,.8)}
.kr--sheet{background:linear-gradient(180deg,#FFFEF9,#ECEBE5);color:var(--sw-ink)}
.kr--badge{background:linear-gradient(180deg,#33353a,#1a1b1e);color:var(--sw-paper);border-top:5px solid var(--sw-lime)}
.kr__av{display:grid;place-items:center;width:46%;aspect-ratio:1;margin:6% auto 0;border-radius:50%;background:var(--sw-lime)}
.kr__av .kr__mk{width:62%}
.kr--badge .kr__ls{margin-top:auto}
.kr--label{background:linear-gradient(160deg,#1d1f23,#0d0e10);align-items:center;justify-content:center}
.kr__rd{display:grid;place-items:center;width:78%;aspect-ratio:1;border-radius:50%;background:var(--sw-lime);transform:rotate(-12deg)}
.kr__rd .kr__mk{width:52%}

/* 05 · брендбук, що гортається (Codrops 3DCarousel): 8 сторінок по колу */
.car-scene{position:absolute;inset:0;perspective:900px}
.car{--cw:clamp(92px,10.6vw,160px);--ch:calc(var(--cw) * 1.3);position:absolute;left:50%;top:52%;width:var(--cw);height:var(--ch);margin:calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);transform-style:preserve-3d}
.car__cell{position:absolute;inset:0;transform-style:preserve-3d}
.car__card{position:absolute;inset:0;transform-style:preserve-3d;rotate:y var(--lean,0deg)}
.car__card>.bp,.car__back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.car__back{transform:rotateY(180deg);border-radius:6px 12px 12px 6px;background:#2a2b2e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);opacity:.55}
.car__back i{position:absolute;inset:34%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.sx--bbook::before{content:"";position:absolute;z-index:0;left:10%;right:10%;top:20%;height:60%;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(200,255,62,.16),transparent 70%)}
.bp{display:flex;flex-direction:column;gap:8%;padding:9%;border-radius:6px 12px 12px 6px;overflow:hidden;font-size:calc(var(--cw) * .1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 5px 0 7px -5px rgba(0,0,0,.45)}
.bp--ink{background:linear-gradient(160deg,#1d1f23,#0d0e10);color:var(--sw-paper)}
.bp--paper{background:linear-gradient(160deg,#fffef9,#ecebe5);color:var(--sw-ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 5px 0 7px -5px rgba(0,0,0,.25)}
.bp--lime{background:linear-gradient(160deg,#d6ff6a,#b6f02a);color:var(--sw-ink)}
.bp--graph{background:linear-gradient(160deg,#33353a,#1a1b1e);color:var(--sw-paper)}
.bp__mk{display:block;width:100%;aspect-ratio:1}
.bp--ink>.bp__mk{width:46%;margin:14% auto 0}
.bp--paper .bp__mk{--mk:var(--sw-ink);--br-dot:#6a9a00}
.bp__w{display:block;width:44%;height:.5em;margin:auto auto 0;border-radius:9px;background:var(--sw-paper);opacity:.85}
.bp__ln{display:block;height:2px;background:var(--sw-lime);margin-top:auto}
.bp__sp{display:grid;place-items:center;flex:1;min-height:0;border:1px dashed rgba(17,17,16,.35);border-radius:6px}
.bp__sp .bp__mk{width:48%}
.bp__ls{display:grid;gap:.45em;margin-top:auto}.bp__ls i{display:block;height:.45em;border-radius:9px;background:currentColor;opacity:.3}.bp__ls i:last-child{width:60%}
.bp__ch{display:grid;gap:.5em;flex:1;min-height:0}.bp__ch i{display:block;border-radius:5px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.bp__aa{font:800 calc(var(--cw) * .42)/1 var(--f-tight);letter-spacing:-.05em;color:var(--sw-lime);margin:auto 0 0}
.bp__gr{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:.4em;flex:1;min-height:0}.bp__gr i{border-radius:4px;box-shadow:inset 0 0 0 1px rgba(250,249,245,.28)}.bp__gr i:first-child{background:rgba(200,255,62,.5)}
.bp__yn{display:grid;grid-template-columns:1fr 1fr;gap:.5em;flex:1;min-height:0}.bp__yn i{display:grid;place-items:center;border-radius:6px;font:800 calc(var(--cw) * .2)/1 var(--f-tight);font-style:normal}
.bp__yn .y{background:#C8FF3E;color:#111110}.bp__yn .n{background:rgba(17,17,16,.1);color:#111110}
.bp__q{font:800 calc(var(--cw) * .6)/.8 var(--f-tight);color:var(--sw-ink);opacity:.85}
.bp__ap{position:relative;flex:1;min-height:0}.bp__ap .a{position:absolute;left:0;top:6%;width:80%;aspect-ratio:1.6;border-radius:5px;background:var(--sw-ink)}
.bp__ap .b{position:absolute;right:0;bottom:6%;width:44%;aspect-ratio:1;border-radius:24%;background:var(--sw-lime);box-shadow:0 0 0 2px #FAF9F5;display:grid;place-items:center}.bp__ap .bp__mk{width:62%;--mk:var(--sw-ink);--br-dot:var(--sw-ink)}

/* 06 · анімований логотип (Skillry Obsidian: clip-path inset(12% 0) → повний кадр): знак малюється, літери виїжджають */
.br-fm{position:absolute;inset:16px 16px 10px 16px;display:grid}
.br-fm__frame{position:relative;border-radius:14px;overflow:hidden;background:#08090a}
.js .br-fm__frame{clip-path:inset(12% 0 12% 0 round 14px);transition:clip-path 1600ms var(--sw-out)}
.br-fm.is-open .br-fm__frame{clip-path:inset(0 0 0 0 round 14px)}
.br-fm__scene{position:absolute;inset:0;background:linear-gradient(180deg,#07080a 0%,#10140a 55%,#1b230f 70%,#08090a 100%);transform:scale(1.12);transition:transform 2600ms var(--sw-out)}
.br-fm.is-open .br-fm__scene{transform:none}
.br-fm__sun{position:absolute;left:50%;top:40%;width:44%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(200,255,62,.5) 0%,rgba(200,255,62,.16) 36%,rgba(200,255,62,0) 68%)}
.br-fm__sweep{position:absolute;inset:0;background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.1) 48%,rgba(200,255,62,.12) 52%,transparent 64%);transform:translateX(-120%)}
.br-fm__logo{position:absolute;left:50%;top:37%;translate:-50% -50%;display:flex;align-items:center;gap:clamp(12px,2vw,28px);z-index:2}
.br-fm__mk{display:block;width:clamp(74px,8.6vw,132px);aspect-ratio:1;flex:none}
.br-fm__word{font:800 clamp(46px,6.4vw,100px)/1 var(--f-tight);letter-spacing:-.05em;color:var(--sw-paper);white-space:nowrap}
.br-fm__line{position:absolute;left:0;right:0;top:62%;height:1px;background:linear-gradient(90deg,transparent,rgba(200,255,62,.6) 50%,transparent);transform-origin:50% 50%}
.br-fm__bars{position:absolute;right:6%;bottom:14%;display:grid;gap:6px;width:16%}.br-fm__bars i{height:5px;border-radius:9px;background:rgba(250,249,245,.3)}.br-fm__bars i:last-child{width:60%}
.br-fm__frame::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(120% 80% at 50% 40%,transparent 60%,rgba(0,0,0,.55))}
.js .br-fm .br-ln,.js .br-fm__word .sw-ch,.js .br-fm__line{opacity:0}
.br-fm.is-open .br-ln{opacity:1}
.br-fm.is-open .br-ln--s{animation:br-draw 800ms var(--sw-out) 500ms both}
.br-fm.is-open .br-ln--b{animation:br-draw 1100ms var(--sw-out) 800ms both}
.br-fm.is-open .br-dot{animation:br-pop 600ms var(--sw-out) 1700ms both}
.br-fm.is-open .br-fm__word .sw-ch{opacity:1;animation:br-ch 760ms var(--sw-out) calc(1300ms + var(--i,0) * 60ms) both}
.br-fm.is-open .br-fm__line{opacity:1;animation:br-line 1200ms var(--sw-out) 1900ms both}
@keyframes br-line{from{transform:scaleX(0)}}
.br-fm.is-open .br-fm__sweep{animation:br-sweep 1500ms var(--sw-out) 2300ms both}
@keyframes br-sweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
.br-fm.is-open .br-fm__sun{animation:br-fade 1600ms ease-out 900ms both}

/* ───────── 3 · секції з живим візуалом праворуч від тексту ───────── */
.sw-sv{display:grid;gap:clamp(22px,3vw,40px)}
@media (min-width:1024px){.sw-sv{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}}
.sw-sv__v{position:relative;min-height:300px;display:grid;place-items:center;padding:clamp(18px,2vw,28px);border-radius:22px;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 70% at 70% 0%,#1a1c1f,#0d0e10 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--sw-paper)}
.sw-sv__v::before{content:"";position:absolute;z-index:-1;inset:auto -10% -30% -10%;height:70%;background:radial-gradient(50% 50% at 50% 50%,rgba(200,255,62,.14),transparent 70%)}
.sw-sv__v.is-off *{animation-play-state:paused!important}
.sw-sv .sv-what__lead{font-size:clamp(18px,1.55vw,22px);line-height:1.45}
.sw-sv .sv-seealso{margin-top:18px}

/* «Що входить у брендбук»: 5 сторінок із стосу розкриваються віялом */
.bv{position:relative;width:100%;max-width:460px;height:310px}
.bv__p{position:absolute;left:50%;bottom:4px;width:34%;aspect-ratio:.72;margin-left:-17%;transform-origin:50% 100%;display:flex;flex-direction:column;gap:8%;padding:7%;border-radius:8px 12px 12px 8px;
  background:linear-gradient(160deg,#fffef9,#ecebe5);color:var(--sw-ink);box-shadow:0 16px 34px -14px rgba(0,0,0,.85),inset 0 0 0 1px rgba(17,17,16,.08);
  transform:translateX(calc((var(--k) - 2) * 31%)) rotate(calc((var(--k) - 2) * 8deg));transition:transform 1100ms var(--sw-out) calc(var(--k) * 70ms)}
.js .sw-sv__v:not(.in) .bv__p{transform:rotate(calc((var(--k) - 2) * .6deg))}
.bv__p:nth-child(even){background:linear-gradient(160deg,#202226,#0e0f11);color:var(--sw-paper);box-shadow:0 16px 34px -14px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.12)}
.bv__t{order:9;font:700 12px/1.1 var(--f-tight);letter-spacing:-.01em;white-space:nowrap}
.bv__ls{display:grid;gap:5px;margin-top:auto}.bv__ls i{display:block;height:4px;border-radius:9px;background:currentColor;opacity:.28}.bv__ls i:last-child{width:60%}
.bv__q{font:800 44px/.8 var(--f-tight);color:#6a9a00}
.bv__p:nth-child(even) .bv__q{color:var(--sw-lime)}
.bv__sp{display:grid;place-items:center;flex:1;min-height:0;border:1px dashed currentColor;border-radius:6px;opacity:.9}.bv__mk{display:block;width:50%;aspect-ratio:1;--mk:var(--sw-lime);--br-dot:var(--sw-paper)}
.bv__p:nth-child(odd) .bv__mk{--mk:var(--sw-ink);--br-dot:#6a9a00}
.bv__ch{display:grid;gap:5px;flex:1;min-height:0}.bv__ch i{display:block;border-radius:5px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(128,128,128,.4)}
.bv__aa{font:800 46px/1 var(--f-tight);letter-spacing:-.05em;color:var(--sw-lime);margin:auto 0 0}
.bv__yn{display:grid;grid-template-columns:1fr 1fr;gap:5px;flex:1;min-height:0}.bv__yn i{display:grid;place-items:center;border-radius:6px;font:800 16px/1 var(--f-tight);font-style:normal}
.bv__yn .y{background:#C8FF3E;color:#111110}.bv__yn .n{background:rgba(128,128,128,.25);color:inherit}

/* «Скільки триває брендинг»: смуги на осі 6 тижнів (суцільне — мінімум, світле — верхня межа) */
.tv{display:grid;gap:22px;width:100%;max-width:460px;padding:4px}
.tv__r{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:9px 12px}
.tv__n{font:700 clamp(16px,1.4vw,19px)/1.1 var(--f-tight);letter-spacing:-.02em;color:var(--sw-paper)}
.tv__w{font:600 13px/1 var(--f-inter);font-style:normal;color:var(--sw-lime)}
.tv__t{grid-column:1/-1;position:relative;display:block;height:16px;border-radius:99px;background:rgba(250,249,245,.07);overflow:hidden}
.tv__a,.tv__b{position:absolute;top:0;bottom:0;transform-origin:left center;transition:transform 1100ms var(--sw-out) calc(var(--i) * 160ms + 200ms)}
.tv__a{left:0;width:calc(var(--lo) / 6 * 100%);background:var(--sw-lime);border-radius:99px}
.tv__b{left:calc(var(--lo) / 6 * 100%);width:calc((var(--hi) - var(--lo)) / 6 * 100%);background:repeating-linear-gradient(-45deg,rgba(200,255,62,.42) 0 6px,rgba(200,255,62,.2) 6px 12px);transition-delay:calc(var(--i) * 160ms + 520ms)}
.js .sw-sv__v:not(.in) .tv__a,.js .sw-sv__v:not(.in) .tv__b{transform:scaleX(0)}
.tv__ax{display:grid;grid-template-columns:repeat(6,1fr);margin-top:-6px;font:600 12px/1 var(--f-inter);color:rgba(250,249,245,.6);text-align:right}
.tv__ax i{font-style:normal;border-right:1px dashed rgba(250,249,245,.18);padding:6px 6px 0 0;min-height:22px}
.tv__ax i:last-child::after{content:" тиж."}

/* «Ребрендинг»: розрізнені знаки й кольори на сайті, у відео й соцмережах сходяться в одну систему */
.rb{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:460px}
.rb__c{position:relative;display:flex;flex-direction:column;gap:10px;aspect-ratio:.8;padding:12px;border-radius:14px;background:#17181b;box-shadow:inset 0 0 0 1px rgba(250,249,245,.14);
  transition:transform 1100ms var(--sw-out) calc(var(--i) * 120ms + 250ms),background-color 900ms ease calc(var(--i) * 120ms + 250ms)}
.js .sw-sv__v:not(.in) .rb__c{background:var(--o);transform:rotate(var(--r)) translateY(calc(var(--i) * 6px - 6px))}
.rb__n{font:700 12px/1 var(--f-inter);color:rgba(250,249,245,.85);letter-spacing:.04em}
.rb__m{position:relative;flex:1;min-height:0;display:grid;place-items:center}
.rb__old,.rb__new{position:absolute;width:56%;aspect-ratio:1;transition:opacity 700ms ease calc(var(--i) * 120ms + 450ms),transform 900ms var(--sw-out) calc(var(--i) * 120ms + 450ms)}
.rb__old{background:rgba(255,255,255,.88);opacity:0;transform:scale(.6) rotate(40deg)}
.rb__old--circle{border-radius:50%}.rb__old--square{border-radius:10%}.rb__old--tri{clip-path:polygon(50% 6%,96% 92%,4% 92%)}
.js .sw-sv__v:not(.in) .rb__old{opacity:1;transform:rotate(calc(var(--i) * 12deg - 12deg))}
.rb__new{display:block;--mk:var(--sw-lime)}
.js .sw-sv__v:not(.in) .rb__new{opacity:0;transform:scale(.7)}
.rb__b{display:grid;gap:5px}.rb__b i{display:block;height:5px;border-radius:9px;background:rgba(250,249,245,.3)}.rb__b i:last-child{width:60%;background:var(--sw-lime)}
.js .sw-sv__v:not(.in) .rb__b i{background:rgba(250,249,245,.5)}
.rb__ok{grid-column:1/-1;justify-self:center;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;background:rgba(200,255,62,.12);box-shadow:inset 0 0 0 1px rgba(200,255,62,.45);font:700 13px/1 var(--f-tight);color:var(--sw-lime);transition:opacity 700ms var(--sw-out) 1300ms,transform 700ms var(--sw-out) 1300ms}
.rb__ok::before{content:"✓";font-weight:800}
.js .sw-sv__v:not(.in) .rb__ok{opacity:0;transform:translateY(8px)}

/* ───────── 4 · пояснювальні секції: деталі брендингу ───────── */
@media (min-width:1024px){.br-what .sw-what__in{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:56px}}
.br-what .pg-h2,.sw-sv .pg-h2,.br-cost .pg-h2{font-size:clamp(28px,3.1vw,46px);line-height:1.05;text-wrap:balance}
.br-inc .sv-inc{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1199px){.br-inc .sv-inc{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.br-inc .sv-inc{grid-template-columns:repeat(2,minmax(0,1fr))}.br-inc .sv-inc>li:last-child:nth-child(odd){grid-column:1/-1}}
.br-cost .sv-what__lead{max-width:60ch;margin:14px 0 26px;font-size:clamp(18px,1.55vw,22px);line-height:1.45}
.br-cost .pk__common{max-width:62ch}
.br-steps__lead{max-width:60ch;margin:12px 0 0;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:var(--muted)}

/* ───────── 5 · mobile-compact (≤ 760): ліди ≤ 3 рядків до розкриття, візуали нижчі ───────── */
@media (max-width:760px){
  .mc-book:not(:has(.mc-cb:checked)) :is(.sv-seealso),.mc-time:not(:has(.mc-cb:checked)) .sv-seealso,.mc-rebrand:not(:has(.mc-cb:checked)) .sv-seealso{display:none}
  .mc-book:not(:has(.mc-cb:checked)) .sv-what__lead,.mc-time:not(:has(.mc-cb:checked)) .sv-what__lead,.mc-rebrand:not(:has(.mc-cb:checked)) .sv-what__lead{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .sw-sv{gap:14px}
  .sw-sv .sv-what__lead{font-size:16px;line-height:1.42}
  .sw-sv__v{min-height:0;padding:14px}
  .bv{height:230px;max-width:340px}
  .bv__t{font-size:12px}
  .bv__aa{font-size:34px}.bv__q{font-size:34px}
  .tv{gap:16px}
  .rb__c{padding:9px}
  .br-what .pg-h2{font-size:27px}
  .br-steps__lead{font-size:15px;margin-top:8px}
  /* липка панель: довгий підпис кнопки «Обговорити брендинг у Telegram» — ціна й кнопка стискаються */
  .mc-bar{gap:8px;padding-left:14px}
  .mc-bar__p{min-width:0}
  .mc-bar__p .sw-t:first-child{font-size:15px;line-height:1.1}
  .mc-bar__btn{padding:0 14px;gap:6px;font-size:14px;min-width:0;flex:none}
  /* вітрина: стрічка — сцени нижчі, підписи у 12 px */
  .br-m__bar{bottom:14px}
  .br-p{padding:30px 14px 22px;gap:8px}
  .br-t__d{font-size:42px}
}

/* ───────── reduced-motion: кінцеві стани, без циклів ───────── */
@media (prefers-reduced-motion:reduce){
  .br-t.is-done .br-l,.br-m .br-dot,.br-fm *{animation:none!important}
  .br-p,.br-pl,.br-pl__f,.br-pl__r,.js .br-fm__frame,.br-fm__scene,.bv__p,.tv__a,.tv__b,.rb__c,.rb__old,.rb__new,.rb__ok{transition:none!important}
  .js .br-fm .br-ln,.js .br-fm__word .sw-ch,.js .br-fm__line{opacity:1}
  .js .br-fm__frame{clip-path:inset(0 round 14px)}.br-fm__scene{transform:none}
  .js .sw-sv__v:not(.in) .bv__p,.js .sw-sv__v:not(.in) .tv__a,.js .sw-sv__v:not(.in) .tv__b,.js .sw-sv__v:not(.in) .rb__c{transform:none}
  .js .sw-sv__v:not(.in) .rb__ok{opacity:1;transform:none}
}