/* =========================================================================
   TOKENS
   Концепція: технічне креслення, що оживає.
   Папір — холодний вівсяно-сірий (не кремовий), чорнило — глибоке синьо-чорне,
   акценти — хвоя і приглушене золото. Сигнальний червоний лише для "live".
   Шрифти self-hosted (assets/fonts): Unbounded — заголовки сайту,
   Onest — текст і інтерфейси, Cormorant Infant — лише світ Floritta
   всередині екранів, щоб магазин читався чужим сайтом зі своїм характером.
   ========================================================================= */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:300;font-display:swap;
  src:url("/webdew/fonts/unbounded-300-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:300;font-display:swap;
  src:url("/webdew/fonts/unbounded-300-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:400;font-display:swap;
  src:url("/webdew/fonts/unbounded-400-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:400;font-display:swap;
  src:url("/webdew/fonts/unbounded-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;
  src:url("/webdew/fonts/unbounded-700-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;
  src:url("/webdew/fonts/unbounded-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;
  src:url("/webdew/fonts/onest-400-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;
  src:url("/webdew/fonts/onest-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;
  src:url("/webdew/fonts/onest-600-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;
  src:url("/webdew/fonts/onest-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Onest";font-style:normal;font-weight:700;font-display:swap;
  src:url("/webdew/fonts/onest-700-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:700;font-display:swap;
  src:url("/webdew/fonts/onest-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Cormorant Infant";font-style:italic;font-weight:300;font-display:swap;
  src:url("/webdew/fonts/cormorant-infant-300i-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Cormorant Infant";font-style:normal;font-weight:300;font-display:swap;
  src:url("/webdew/fonts/cormorant-infant-300-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Cormorant Infant";font-style:normal;font-weight:600;font-display:swap;
  src:url("/webdew/fonts/cormorant-infant-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F}

:root{
  --paper:      #E8E9E3;
  --paper-sunk: #DCDED5;
  --paper-hi:   #F1F2ED;
  --ink:        #14181A;
  --ink-2:      #4E5754;
  --ink-3:      #838C88;
  --rule:       #C3C7BC;
  --pine:       #1E4D3F;
  --pine-soft:  #E0E8E2;
  --amber:      #B8801F;
  --live:       #C1452E;
  --graphite:   #1B1F21;
  --graphite-2: #2B3134;
  --glass:      rgba(20,24,26,.06);

  --font-display: "Unbounded","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-body:    "Onest","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-shop:    "Cormorant Infant",Georgia,"Times New Roman",serif;
  --font-mono:    ui-monospace,"Cascadia Mono","Cascadia Code",Consolas,"SF Mono",Menlo,monospace;

  --gut: clamp(18px, 4vw, 64px);
  --maxw: 1680px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#111416; --paper-sunk:#0C0F10; --paper-hi:#191D1F;
    --ink:#E7E9E4; --ink-2:#9AA39F; --ink-3:#6B7470;
    --rule:#2A3033; --pine:#6FBFA2; --pine-soft:#16211D;
    --amber:#D9A340; --live:#E4654C;
    --graphite:#050708; --graphite-2:#171B1D;
    --glass:rgba(231,233,228,.07);
  }
}
:root[data-theme="dark"]{
  --paper:#111416; --paper-sunk:#0C0F10; --paper-hi:#191D1F;
  --ink:#E7E9E4; --ink-2:#9AA39F; --ink-3:#6B7470;
  --rule:#2A3033; --pine:#6FBFA2; --pine-soft:#16211D;
  --amber:#D9A340; --live:#E4654C;
  --graphite:#050708; --graphite-2:#171B1D;
  --glass:rgba(231,233,228,.07);
}
:root[data-theme="light"]{
  --paper:#E8E9E3; --paper-sunk:#DCDED5; --paper-hi:#F1F2ED;
  --ink:#14181A; --ink-2:#4E5754; --ink-3:#838C88;
  --rule:#C3C7BC; --pine:#1E4D3F; --pine-soft:#E0E8E2;
  --amber:#B8801F; --live:#C1452E;
  --graphite:#1B1F21; --graphite-2:#2B3134;
  --glass:rgba(20,24,26,.06);
}

/* ============================== BASE ============================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pine); outline-offset:3px; border-radius:2px}

/* width:100% обов'язково — .wrap лежить і всередині flex-колонки (.hero),
   де auto-марджини інакше стискають його до ширини контенту */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.mono{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.rule{height:1px;background:var(--rule);border:0;margin:0}

h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:-.015em; line-height:1.04; text-wrap:balance; margin:0}
p{margin:0}

/* грануляція — вбиває "стерильність" згенерованого */
.grain{
  position:fixed; inset:-50%; z-index:9998; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode:multiply;
}
@media (prefers-color-scheme: dark){ .grain{mix-blend-mode:screen;opacity:.28} }
:root[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.28}
:root[data-theme="light"] .grain{mix-blend-mode:multiply;opacity:.5}

/* ============================== CHROME ============================== */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:900;
  display:flex; align-items:center; gap:20px;
  padding:14px var(--gut);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.topbar.stuck{border-bottom-color:var(--rule)}
/* Лого webdew: дві половинки різних кольорів; на вході кожна крутиться на 360°
   і стає на місце, далі вони періодично міняються місцями (зі спіном у польоті)
   і повертаються назад. Зсуви --swx/--sdx (px) міряє JS від реальних ширин. */
.logo-wd{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:baseline}
.logo-wd b{display:inline-block;font-weight:700;transform-origin:50% 55%;
  transition:transform .85s cubic-bezier(.68,-.2,.27,1.2)}
.logo-wd .lw{color:var(--pine)}
.logo-wd .ld{color:#B8801F}
.logo-wd.swap .lw{transform:translateX(var(--swx,3ch)) rotate(360deg)}
.logo-wd.swap .ld{transform:translateX(calc(var(--sdx,-3ch))) rotate(-360deg)}
.logo-wd .tld{font-family:var(--font-mono);font-style:normal;font-weight:400;font-size:10px;letter-spacing:.08em;color:var(--ink-3);margin-left:6px}
@media (prefers-reduced-motion:no-preference){
  .logo-wd .lw{animation:lgspin .9s cubic-bezier(.34,1.3,.5,1) backwards}
  .logo-wd .ld{animation:lgspin .9s cubic-bezier(.34,1.3,.5,1) .12s backwards}
}
@keyframes lgspin{from{transform:rotate(-360deg) scale(.3);opacity:0}to{transform:none;opacity:1}}
/* контакти в шапці */
.tb-contacts{display:flex;align-items:center;gap:9px}
.tb-tel{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink);text-decoration:none;white-space:nowrap;margin-right:2px}
.tb-tel:hover{color:var(--pine)}
.tb-ico{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;color:#fff;transition:transform .2s var(--ease),box-shadow .2s}
.tb-ico svg{width:15px;height:15px;display:block}
.tb-ico:hover{transform:translateY(-2px);box-shadow:0 6px 12px -6px rgba(20,24,26,.4)}
.tb-ico.vb{background:#7360F2}
.tb-ico.itg{background:#26A5E4}
.tb-ico.wa{background:#25D366}
.tb-ico.ml{background:var(--pine)}
.topbar-sp{flex:1}
.navlinks{display:flex;gap:22px}
.navlinks a{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;transition:color .2s}
.navlinks a:hover{color:var(--ink)}
.lang{display:flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden}
.lang button,.lang a{display:block;text-decoration:none;background:none;border:0;padding:5px 11px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;cursor:pointer;color:var(--ink-3)}
.lang button[aria-pressed="true"],.lang a[aria-current="true"]{background:var(--ink);color:var(--paper)}
.progress{position:fixed;top:0;left:0;height:2px;background:var(--pine);z-index:901;width:0}

/* ============================== PRELOADER ============================== */
/* прелоадера немає */

/* ============================== HERO: ЦИФЕРБЛАТ ==============================
   Праворуч — п'ять цілей по колу і стрілка з центру; фокус переводиться JS-ом
   через data-focus на секції. Ліворуч — назва й опис напряму, що міняються під
   фокус. Ціль у фокусі оживає власною мікроанімацією, решта пригашені.
   Кут цілі задає --a на кнопці; стрілка отримує той самий кут у --hand. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;
  padding-block:clamp(58px,8svh,84px) clamp(24px,4svh,40px);overflow:hidden}
/* крутілка — головна: їй ширша колонка й майже вся висота екрана; текст вужчий і спокійніший */
.hero-dial-grid{position:relative;display:grid;grid-template-columns:minmax(280px,.68fr) minmax(340px,1fr);
  gap:clamp(12px,2vw,36px);align-items:center}
.hd-copy{align-self:center;max-width:520px}
.eyebrow{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.eyebrow .ln{height:1px;width:56px;background:var(--ink);opacity:.4}
/* «Ми робимо» + назва — одне речення: назва з малої, розміри близькі, різниться лише вага */
.hd-h1{font-size:clamp(18px,1.55vw,22px);font-weight:300;color:var(--ink-2);letter-spacing:-.02em;margin-bottom:4px}
.hd-h1 .lite{font-weight:300}
/* назви: стос, видима одна; висота під найдовшу у два рядки */
.hd-titles{position:relative;height:var(--th,2.1em);font-size:clamp(20px,1.8vw,25px);line-height:1.18;margin-bottom:14px;transition:height .45s var(--ease)}
.hd-t{position:absolute;left:0;top:0;margin:0;font-size:1.5em;font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;
  color:var(--pine);text-wrap:balance;max-width:18ch;
  opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.hero[data-focus="0"] .hd-t[data-i="0"],.hero[data-focus="1"] .hd-t[data-i="1"],.hero[data-focus="2"] .hd-t[data-i="2"],
.hero[data-focus="3"] .hd-t[data-i="3"],.hero[data-focus="4"] .hd-t[data-i="4"]{opacity:1;transform:none;pointer-events:auto;transition-delay:.12s}
.hd-descs{position:relative;height:var(--dh,4.8em);max-width:min(460px,100%);font-size:14.5px;line-height:1.6;color:var(--ink-2);transition:height .45s var(--ease)}
.hd-d{position:absolute;left:0;top:0;right:0;margin:0;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.hero[data-focus="0"] .hd-d[data-i="0"],.hero[data-focus="1"] .hd-d[data-i="1"],.hero[data-focus="2"] .hd-d[data-i="2"],
.hero[data-focus="3"] .hd-d[data-i="3"],.hero[data-focus="4"] .hd-d[data-i="4"]{opacity:1;transform:none;transition-delay:.2s}
.hd-nav{display:flex;gap:10px;margin:22px 0 22px}
.hd-dot{width:34px;height:6px;border:0;padding:0;background:none;cursor:pointer;display:block}
.hd-dot i{display:block;height:2px;border-radius:99px;background:var(--rule);position:relative;overflow:hidden}
.hd-dot i::after{content:"";position:absolute;inset:0;background:var(--pine);transform-origin:0 50%;transform:scaleX(0)}
.hd-dot.on i::after{transform:scaleX(1);transition:transform var(--dwell,4s) linear}
.hd-dot.done i::after{transform:scaleX(1)}
/* дія в героєві */
.hero-act{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.hbtn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-radius:99px;
  padding:12px 20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  transition:background .25s,color .25s,border-color .25s,transform .2s}
.hbtn:hover{background:var(--pine);border-color:var(--pine);color:#fff;transform:translateY(-1px)}
.hbtn.ghost{background:none;color:var(--ink);border-color:var(--rule)}
.hbtn.ghost:hover{background:none;color:#26A5E4;border-color:#26A5E4}
.hbtn svg{width:15px;height:15px;flex:none}
@media (max-width:720px){.hbtn{padding:11px 16px;font-size:10.5px}}

/* плаваюча капсула звʼязку */
.callbar{position:fixed;z-index:880;right:clamp(12px,2vw,26px);bottom:clamp(12px,2vw,24px);
  display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-radius:99px;
  background:color-mix(in srgb,var(--paper-hi) 88%,transparent);backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid var(--rule);box-shadow:0 18px 40px -20px rgba(20,24,26,.45);
  opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;
  transition:opacity .35s var(--ease),transform .45s var(--ease)}
.callbar.on{opacity:1;transform:none;pointer-events:auto}
.cb-tel{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.cb-tel svg{width:16px;height:16px;color:var(--pine);flex:none}
.cb-tel b{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;font-weight:600;white-space:nowrap}
.cb-tel:hover b{color:var(--pine)}
.cb-ico{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;transition:transform .2s}
.cb-ico svg{width:16px;height:16px}
.cb-ico:hover{transform:translateY(-2px)}
.cb-ico.itg{background:#26A5E4}
.cb-ico.iwa{background:#25D366}
.cb-write{text-decoration:none;background:var(--ink);color:var(--paper);border-radius:99px;padding:9px 15px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;transition:background .25s}
.cb-write:hover{background:var(--pine)}
@media (max-width:720px){
  .callbar{left:12px;right:12px;bottom:12px;justify-content:space-between;padding:7px 7px 7px 12px}
  .cb-tel b{font-size:12px}
  .cb-write{display:none}
}
@media (max-width:380px){.cb-tel b{display:none}}

.hero-meta{display:flex;gap:26px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--rule);max-width:520px}
.hero-meta div{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.hero-meta b{color:var(--ink);font-weight:600}
.scrollhint{position:absolute;bottom:34px;right:var(--gut);writing-mode:vertical-rl;font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:10px}
.scrollhint::after{content:"";width:1px;height:52px;background:linear-gradient(var(--rule),transparent);animation:sh 2.2s infinite}
@keyframes sh{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- карусель-п'єдестал ----
   Сцена в 3D: диск-конвеєр із п'ятьма цілями лежить майже плазом (rotateX),
   обертається навколо Y так, що ціль у фокусі опиняється спереду й піднімається
   на п'єдестал. Кут повороту диска задає JS у --rot (кратно 72°). Ціль у фокусі
   отримує .on — і свою мікросцену на 2–3 рухи. Промінь-сканер пробігає ціллю
   при кожній передачі фокусу (клас .scan на сцені на 700 мс). */
/* сцена ширша за висоту (1.2:1) — заповнює колонку і майже всю висоту екрана, не лишаючи порожнього верху */
.hd-dial{position:relative;width:min(100%,820px,calc((100svh - 140px) * 1.5));aspect-ratio:1.5;margin-inline:auto;--rot:0deg}
.hd-stage{position:absolute;inset:0;perspective:900px;perspective-origin:50% 28%;transform-style:preserve-3d}
/* підлога: три концентричні еліпси, обертаються ледь-ледь у різні боки */
.hd-floor{position:absolute;left:50%;top:48%;width:96%;aspect-ratio:1;translate:-50% -50%;transform:rotateX(72deg);pointer-events:none}
.hd-floor i{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--rule)}
.hd-floor i:nth-child(2){inset:14%;border-style:solid;opacity:.55}
.hd-floor i:nth-child(3){inset:30%;border-style:dashed;opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .hd-floor i:nth-child(1){animation:ringspin 70s linear infinite}
  .hd-floor i:nth-child(3){animation:ringspin 50s linear infinite reverse}
}
/* диск: цілі — діти, кожна відкладена від центру на --Rz по колу; при обертанні
   диска на --rot ціль зі слотом i, для якої rot = -72*i, стає спереду */
.hd-disc{position:absolute;left:50%;top:48%;width:0;height:0;transform-style:preserve-3d;
  --Rz:calc(var(--dialW,540px) * .30);
  transform:translateY(-4%) rotateX(-14deg) rotateY(var(--rot));
  transition:transform 1.15s cubic-bezier(.4,.9,.35,1)}
.hd-tg{position:absolute;left:0;top:0;width:calc(var(--dialW,540px) * .33);aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;will-change:transform;
  /* ціль ПЛАСКА: внутрішні 3D (кришка ноута) рахуються у своїй перспективі й
     флатяться на межі цілі — інакше вкладені проєкції складаються з зовнішньою
     сценою нелінійно і пропорції екрана «стрибають» під час руху */
  transform-style:flat;
  /* полярна розстановка навколо Y: поворот на кут слота → винести вперед → повернути назад, щоб іконка дивилась у камеру */
  transform:translate(-50%,-50%) rotateY(calc(var(--i) * 72deg)) translateZ(var(--Rz)) rotateY(calc(var(--i) * -72deg - var(--rot))) rotateX(14deg) translateZ(0px) scale(.63);
  transition:transform 1.15s cubic-bezier(.4,.9,.35,1),filter .6s,opacity .6s;
  display:grid;place-items:center;
  filter:saturate(.7);opacity:.62}
.hd-tg.on{filter:none;opacity:1;z-index:3;
  transform:translate(-50%,-64%) rotateY(calc(var(--i) * 72deg)) translateZ(var(--Rz)) rotateY(calc(var(--i) * -72deg - var(--rot))) rotateX(14deg) translateZ(var(--lift,130px)) scale(1);backface-visibility:hidden}
.hd-tg:focus-visible{outline:2px solid var(--pine);outline-offset:8px;border-radius:14px}
/* п'єдестал спереду під ціллю у фокусі */
/* передній слот диска — на екрані це центр по X і нижче центру сцени по Y */
.hd-pedestal{position:absolute;left:50%;top:76%;width:40%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  transform:rotateX(72deg)}
.hd-pedestal i{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--pine) 32%,transparent),color-mix(in srgb,var(--pine) 10%,transparent) 55%,transparent 72%)}
@media (prefers-reduced-motion:no-preference){.hd-pedestal i{animation:pedpulse 2.4s ease-in-out infinite}}
@keyframes pedpulse{50%{transform:scale(1.08);opacity:.85}}
/* бейдж напряму під сценою */
.hd-badge{position:absolute;left:50%;bottom:0;translate:-50% 0;display:grid;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.hd-badge span{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;white-space:nowrap}
.hero[data-focus="0"] .hd-badge [data-b="0"],.hero[data-focus="1"] .hd-badge [data-b="1"],.hero[data-focus="2"] .hd-badge [data-b="2"],
.hero[data-focus="3"] .hd-badge [data-b="3"],.hero[data-focus="4"] .hd-badge [data-b="4"]{opacity:1;transform:none;transition-delay:.3s}

/* — ноутбук: алюмінієвий MacBook, кришка відкривається пружиною, екран — браузер із
   трьома вкладками = три реальні проєкти. Сцена у фокусі (5.2 с, усі
   анімації на одній шкалі T=5.2s, тому відсотки = час/5.2):
   0.6–1.6с Floritta гортається до вітрини → 1.4–2.0с курсор іде до «Add»,
   клік, лічильник кошика підстрибує 0→1 → 2.4–2.9с курсор на вкладку
   SEALMARKET, клік → 3.1–4.4с довгий реальний скріншот гортається →
   4.4–4.8с курсор на вкладку «Твоя казка», клік → лендінг книжки.
   Поза фокусом кришка прикрита (-56°), екран пригашений. Розміри — cqw від .scr. — */
.mini-lap{width:96%;perspective:640px;position:relative;transform-style:preserve-3d}
.mini-lap .lid{position:relative;transform-origin:50% 100%;transform:rotateX(-50deg);transition:transform 1.3s cubic-bezier(.55,0,.15,1) .08s;
  background:linear-gradient(180deg,#F1F3F4,#D8DDE0);border-radius:7px 7px 2px 2px;padding:2.2%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 0 0 2px rgba(60,66,70,.14)}
.hd-tg.on .mini-lap .lid{transform:rotateX(-13deg)}
.mini-lap .bezel{position:relative;background:#0A0C0D;border-radius:5px 5px 1px 1px;padding:3.2% 2.4% 2.4%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.8)}
.mini-lap .cam{position:absolute;left:50%;top:1.2%;translate:-50% 0;width:1.4%;aspect-ratio:1;border-radius:50%;background:#2A3438;transition:background .3s .6s,box-shadow .3s .6s}
.hd-tg.on .mini-lap .cam{background:#3ED598;box-shadow:0 0 5px #3ED598}
.mini-lap .scr{aspect-ratio:16/10;background:#fff;border-radius:2px;overflow:hidden;position:relative;container-type:inline-size;
  font-family:var(--font-body);color:#14181A;isolation:isolate}
/* cqw на самому контейнері рахується від предка — тому розмір шрифту на дітях */
.mini-lap .scr>*{font-size:3.2cqw}
.mini-lap .scr::after{content:"";position:absolute;inset:0;background:#0A0C0D;opacity:.62;transition:opacity .6s;pointer-events:none;z-index:9}
.hd-tg.on .mini-lap .scr::after{opacity:0}
/* хром браузера: світлофор + вкладки-пігулки; адресний рядок */
.mini-lap .chrome{height:7.2cqw;background:#E9ECEC;display:flex;align-items:center;gap:1.4cqw;padding:0 2.2cqw;border-bottom:1px solid #D5D9DA}
.mini-lap .tl{display:flex;gap:.9cqw;margin-right:1cqw}
.mini-lap .tl i{width:1.7cqw;aspect-ratio:1;border-radius:50%;background:#FF5F57}.mini-lap .tl i:nth-child(2){background:#FEBC2E}.mini-lap .tl i:nth-child(3){background:#28C840}
.mini-lap .tab{font-size:.85em;padding:.9cqw 2cqw;border-radius:99px 99px 0 0;color:#7B8683;white-space:nowrap;line-height:1}
.mini-lap .url{height:5.6cqw;background:#F6F7F7;border-bottom:1px solid #E3E7E7;display:grid;align-items:center;padding:0 3cqw;font-size:.8em;color:#5C6664}
.mini-lap .url u{grid-area:1/1;text-decoration:none;opacity:0}
.mini-lap .pages{position:absolute;inset:12.8cqw 0 0;overflow:hidden;background:#fff}
.mini-lap .page{position:absolute;inset:0;overflow:hidden;opacity:0}
/* 1: Floritta — шапка, герой, вітрина */
.mini-lap .p1 .in{position:absolute;left:0;right:0;top:0;translate:0 0}
.mini-lap .fh{display:flex;align-items:center;gap:2.6cqw;height:8cqw;padding:0 4cqw;border-bottom:1px solid #EEF0EC}
.mini-lap .fh b{font-family:var(--font-shop);font-size:1.5em;font-weight:600;letter-spacing:-.01em;margin-right:auto}
.mini-lap .fh span{width:5cqw;height:.9cqw;border-radius:99px;background:#CFD5CD}
.mini-lap .cart{position:relative;width:4.2cqw;color:#14181A;margin-left:1cqw}
.mini-lap .cart svg{display:block;width:100%}
.mini-lap .cart em{position:absolute;right:-1.6cqw;top:-1.4cqw;min-width:3cqw;height:3cqw;border-radius:99px;background:#1E4D3F;color:#fff;font-style:normal;font-size:.62em;display:grid;place-items:center;line-height:1}
.mini-lap .cart .n1{background:#E02B63;opacity:0;scale:.4}
.mini-lap .fhero{position:relative;height:28cqw;overflow:hidden}
.mini-lap .fhero img{width:100%;height:100%;object-fit:cover;display:block}
.mini-lap .fhero div{position:absolute;left:4cqw;bottom:3.6cqw;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.mini-lap .fhero b{display:block;font-family:var(--font-shop);font-size:2.2em;font-weight:600;line-height:1}
.mini-lap .fhero span{font-size:.85em;opacity:.92}
.mini-lap .fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4cqw;padding:3cqw 4cqw 4cqw}
.mini-lap .fc{display:grid;gap:.6cqw;font-size:.8em}
.mini-lap .fc img{width:100%;aspect-ratio:4/4.6;object-fit:cover;border-radius:1.6cqw;display:block}
.mini-lap .fc b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.6cqw}
.mini-lap .fc span{color:#6F7A77}
.mini-lap .ff{display:flex;justify-content:space-between;align-items:center;height:12cqw;padding:0 4cqw;background:#1E4D3F;color:#DCE7E1;font-size:.75em}
.mini-lap .ff b{font-family:var(--font-shop);font-size:1.5em;font-weight:600;color:#fff}
/* 2: SEALMARKET — реальний довгий скріншот */
.mini-lap .p2 img{width:100%;display:block;translate:0 0}
/* 3: Твоя казка — ілюстрація + текст */
.mini-lap .p3 .in{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(135deg,#FBF3FF,#F1E6FF)}
.mini-lap .p3 img{width:100%;height:100%;object-fit:cover;display:block}
.mini-lap .kt{align-self:center;padding:0 5cqw;color:#3B2A5A}
.mini-lap .kt b{display:block;font-family:var(--font-display);font-size:1.6em;font-weight:400;line-height:1.1;margin-bottom:1.6cqw}
.mini-lap .kt span{display:block;font-size:.82em;line-height:1.35;color:#6B5A8A;margin-bottom:2.4cqw}
.mini-lap .kt u{display:inline-block;text-decoration:none;background:#7C5CFF;color:#fff;border-radius:99px;padding:1.4cqw 3.4cqw;font-size:.85em}
/* курсор і кола кліку */
.mini-lap .cur{position:absolute;z-index:8;width:5cqw;aspect-ratio:1;left:70%;top:80%;opacity:0;pointer-events:none;
  background:#fff;clip-path:polygon(0 0,0 76%,25% 58%,42% 96%,60% 88%,43% 51%,70% 45%);filter:drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.mini-lap .ring{position:absolute;z-index:7;width:8cqw;aspect-ratio:1;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.35);translate:-50% -50%;opacity:0;pointer-events:none}
.mini-lap .r1{left:16%;top:74%}.mini-lap .r2{left:43%;top:7%}.mini-lap .r3{left:70%;top:7%}
/* стани поза фокусом: вкладка 1 активна, сторінка 1 видима */
.mini-lap .tb1{background:#fff;color:#14181A}.mini-lap .u1{opacity:1}.mini-lap .p1{opacity:1}
/* сцена у фокусі — усе на шкалі 5.2 с */
.hd-tg.on .mini-lap .p1 .in{animation:lp1 5.2s ease-in-out .55s both}
.hd-tg.on .mini-lap .cur{animation:lcur 5.2s ease-in-out .55s both}
.hd-tg.on .mini-lap .cart .n0{animation:ln0 5.2s linear .55s both}
.hd-tg.on .mini-lap .cart .n1{animation:ln1 5.2s cubic-bezier(.34,1.5,.5,1) .55s both}
.hd-tg.on .mini-lap .r1{animation:lring .5s ease-out 2.55s 1 forwards}
.hd-tg.on .mini-lap .r2{animation:lring .5s ease-out 3.45s 1 forwards}
.hd-tg.on .mini-lap .r3{animation:lring .5s ease-out 5.35s 1 forwards}
.hd-tg.on .mini-lap .tb1{animation:ltab1 5.2s linear .55s both}.hd-tg.on .mini-lap .tb2{animation:ltab2 5.2s linear .55s both}.hd-tg.on .mini-lap .tb3{animation:ltab3 5.2s linear .55s both}
.hd-tg.on .mini-lap .u1{animation:lu1 5.2s linear .55s both}.hd-tg.on .mini-lap .u2{animation:lu2 5.2s linear .55s both}.hd-tg.on .mini-lap .u3{animation:lu3 5.2s linear .55s both}
.hd-tg.on .mini-lap .p1{animation:lu1 5.2s linear .55s both}.hd-tg.on .mini-lap .p2{animation:lu2 5.2s linear .55s both}.hd-tg.on .mini-lap .p3{animation:lu3 5.2s linear .55s both}
.hd-tg.on .mini-lap .p2 img{animation:lp2 5.2s ease-in-out .55s both}
@keyframes lp1{0%,12%{translate:0 0}31%,100%{translate:0 -36cqw}}
@keyframes lcur{0%,10%{left:70%;top:80%;opacity:0}14%{opacity:1}27%{left:70%;top:80%}37%,46%{left:16%;top:74%}54%,85%{left:43%;top:7%}90%,100%{left:70%;top:7%;opacity:1}}
@keyframes lring{0%{opacity:1;scale:.2}100%{opacity:0;scale:1.6}}
@keyframes ln0{0%,40%{opacity:1}41%,100%{opacity:0}}
@keyframes ln1{0%,40%{opacity:0;scale:.4}46%,100%{opacity:1;scale:1}}
@keyframes ltab1{0%,57%{background:#fff;color:#14181A}58%,100%{background:transparent;color:#7B8683}}
@keyframes ltab2{0%,57%{background:transparent;color:#7B8683}58%,93%{background:#fff;color:#14181A}94%,100%{background:transparent;color:#7B8683}}
@keyframes ltab3{0%,93%{background:transparent;color:#7B8683}94%,100%{background:#fff;color:#14181A}}
@keyframes lu1{0%,57%{opacity:1}58%,100%{opacity:0}}
@keyframes lu2{0%,57%{opacity:0}58%,93%{opacity:1}94%,100%{opacity:0}}
@keyframes lu3{0%,93%{opacity:0}94%,100%{opacity:1}}
@keyframes lp2{0%,55%{translate:0 0}82%,100%{translate:0 -48%}}
/* корпус: алюмінієва основа з вирізом під палець і тінню; у фокусі ледь погойдується */
/* клавіатурна дека: лежить у перспективі й іде на глядача (петля вгорі = низ кришки).
   rotateX кладе її майже плазом; діти (клавіші, трекпад) — пласко на її площині. */
.mini-lap .deck{position:relative;width:118%;margin-left:-9%;aspect-ratio:400/126;
  clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,#DCE1E3,#C7CED1 50%,#ADB5B9);border-radius:0 0 6px 6px;
  box-shadow:0 3px 6px -1px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.65);padding:2.4% 1.3% 2.4%}
.mini-lap .hinge{position:absolute;left:7%;right:7%;top:-1.2%;height:4%;background:linear-gradient(180deg,#8A9195,#B7BEC2);border-radius:0 0 2px 2px;box-shadow:inset 0 1px 1px rgba(0,0,0,.3)}
.mini-lap .kbsvg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 .5px .5px rgba(20,24,26,.28))}
.mini-lap .shade{position:absolute;left:0;right:0;bottom:-2.5cqw;height:5cqw;margin:0 auto;width:78%;border-radius:50%;background:radial-gradient(ellipse,rgba(20,24,26,.32),transparent 72%);opacity:.75;z-index:-1}
@media (prefers-reduced-motion:no-preference){
  .hd-tg.on .mini-lap{animation:lapbob 6s ease-in-out infinite}
}
@keyframes lapbob{50%{transform:translateY(-1.5%) rotateY(-3deg)}}
@media (prefers-reduced-motion:reduce){.hd-tg.on .mini-lap *{animation:none}}

/* — телефон: iPhone у чорному титані з Dynamic Island. Сцена у фокусі (~4.6 с):
   0.6с острівець розгортається в Live Activity «Нове замовлення» (з фото
   букета) → 1.5с палець тапає → 1.8с острівець згортається, додаток свайпає
   на картку замовлення (фото, клієнт, стрічка статусів) → 3.1с тап по кнопці,
   вона стискається і зеленіє «Прийнято» → 3.5с стрічка статусів рухається →
   4.0с острівець показує компактний «Курʼєр · 14 хв». Поза фокусом — список.
   Палітра екрана біла і соковита: корал / бурштин / смарагд / фіалка.
   Розміри — в cqw від .glass. Клас .app збігається зі стендом 02, тому
   правила екрана пишуться через .mini-ph .scr … — */
.mini-ph{position:relative;width:46%;aspect-ratio:9/19.3;border-radius:16%/7.4%;padding:1.9%;
  background:linear-gradient(160deg,#6A7075,#2E3336 38%,#50565A 66%,#23272A);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 0 0 2px rgba(0,0,0,.35),0 18px 36px -14px rgba(20,24,26,.6)}
/* кнопки — тонкі, того ж металу, ледь виступають: Action + гучність ліворуч, живлення праворуч */
/* .btn збігається з CTA-кнопкою сайту (padding/border звідти) — обнуляємо все зайве */
.mini-ph .btn{position:absolute;width:1%;padding:0;margin:0;border:0;border-radius:1px;background:linear-gradient(90deg,#2A2E31,#5A6064 55%,#2A2E31)}
.mini-ph .act{left:-.8%;top:16%;height:3.6%}.mini-ph .v1{left:-.8%;top:23%;height:6.4%}.mini-ph .v2{left:-.8%;top:31%;height:6.4%}.mini-ph .pw{right:-.8%;top:25%;height:10.5%}
.mini-ph .glass{position:absolute;inset:1.9%;border-radius:14%/6.5%;background:#000;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.9);container-type:inline-size}
/* Dynamic Island: пігулка з камерою, відступ від краю як у iPhone; стани — анімації isl* у фокусі */
.mini-ph .island{position:absolute;z-index:6;top:5cqw;left:50%;translate:-50% 0;width:30cqw;height:8.6cqw;border-radius:99px;background:#000;overflow:hidden;
  box-shadow:0 2px 10px -2px rgba(0,0,0,.55);color:#F5F7F4;font-family:var(--font-body)}
.mini-ph .island .cam{position:absolute;right:3.4cqw;top:50%;translate:0 -50%;width:4.4cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 36% 32%,#3E4E57,#0C1013 70%)}
.mini-ph .island .la{position:absolute;inset:0;display:flex;align-items:center;gap:3cqw;padding:0 4.5cqw;opacity:0;font-size:5cqw;white-space:nowrap}
.mini-ph .island .la em{width:13cqw;aspect-ratio:1;border-radius:32%;flex:none;overflow:hidden;background:#1a1d1f}
.mini-ph .island .la em img{width:100%;height:100%;object-fit:cover;display:block}
.mini-ph .island .la b{display:block;font-size:1.05em;font-weight:700}
.mini-ph .island .la span{display:block;font-size:.84em;color:#B8C2BE}
.mini-ph .island .la u{margin-left:auto;text-decoration:none;font-size:.78em;color:#7E8A86}
.mini-ph .island .eta{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2cqw;opacity:0;font-size:4.6cqw;white-space:nowrap}
.mini-ph .island .eta i{width:2.8cqw;aspect-ratio:1;border-radius:50%;background:#22C58B;box-shadow:0 0 0 1.4cqw rgba(34,197,139,.28)}
.mini-ph .island .eta b{font-weight:700}.mini-ph .island .eta span{color:#9BB0A8}
.hd-tg.on .mini-ph .island{animation:isl 4.6s cubic-bezier(.34,1.3,.5,1) forwards}
.hd-tg.on .mini-ph .island .cam{animation:islcam 4.6s linear forwards}
.hd-tg.on .mini-ph .island .la{animation:islla 4.6s linear forwards}
.hd-tg.on .mini-ph .island .eta{animation:isleta 4.6s linear forwards}
/* 0.6с розгортається · 1.8с згортається (разом зі свайпом) · 4.0с компактний статус */
@keyframes isl{0%,13%{width:30cqw;height:8.6cqw;border-radius:99px}20%,37%{width:92cqw;height:22cqw;border-radius:7cqw}
  43%,85%{width:30cqw;height:8.6cqw;border-radius:99px}91%,100%{width:54cqw;height:8.6cqw;border-radius:99px}}
@keyframes islcam{0%,14%{opacity:1}17%,39%{opacity:0}43%,87%{opacity:1}90%,100%{opacity:0}}
@keyframes islla{0%,17%{opacity:0}21%,35%{opacity:1}38%,100%{opacity:0}}
@keyframes isleta{0%,90%{opacity:0}95%,100%{opacity:1}}
/* екран усередині безеля */
.mini-ph .scr{position:absolute;inset:2.4cqw;border-radius:11.5cqw;overflow:hidden;font-family:var(--font-body);color:#14181A;font-size:5.6cqw;background:#fff}
/* два екрани поруч, зсув на 100% при переході; перший трохи відстає (паралакс, як у iOS) */
.mini-ph .scr .app{position:absolute;inset:0;background:#fff;color:#14181A;padding:20cqw 6cqw 6cqw;display:flex;flex-direction:column;gap:3.6cqw;
  transition:transform .6s cubic-bezier(.4,.9,.35,1)}
.mini-ph .scr .a2{transform:translateX(100%)}
.hd-tg.on .mini-ph .scr .a1{transform:translateX(-30%);transition-delay:1.8s}
.hd-tg.on .mini-ph .scr .a2{transform:none;transition-delay:1.8s}
.mini-ph .top{display:flex;justify-content:space-between;align-items:baseline}
.mini-ph .top b{font-size:1.5em;font-weight:700;letter-spacing:-.02em}
.mini-ph .top span{font-size:.95em;color:#6F7A77}
.mini-ph .row{display:flex;align-items:center;gap:3.4cqw;background:#F4F6F3;border-radius:3.6cqw;padding:3.4cqw 3.8cqw}
.mini-ph .row i{width:9.5cqw;aspect-ratio:1;border-radius:34%;background:var(--c,#22C58B);flex:none;box-shadow:inset 0 -1.2cqw 2cqw rgba(0,0,0,.14),0 1cqw 2cqw -1cqw rgba(0,0,0,.35)}
.mini-ph .row div{flex:1;min-width:0}
.mini-ph .row b{display:block;font-size:1.02em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-ph .row span{display:block;font-size:.84em;color:#6F7A77}
.mini-ph .row em{font-style:normal;font-family:var(--font-mono);font-size:1em;color:#12A36F;font-weight:700}
.mini-ph .row.dim{opacity:.55}
.mini-ph .nav{margin-top:auto;display:flex;justify-content:space-around;padding-top:3.4cqw;border-top:1px solid #ECEFEA}
.mini-ph .nav i{width:8cqw;aspect-ratio:1;border-radius:34%;background:#E3E7E1}
.mini-ph .nav i.on{background:#22C58B}
/* екран 2: картка замовлення — фото, клієнт, стрічка статусів, кнопка. Елементи виїжджають знизу з інтервалом */
.mini-ph .photo{position:relative;border-radius:4.5cqw;overflow:hidden;aspect-ratio:4/4.2;flex:none;background:#F4F6F3}
.mini-ph .about .photo img{width:100%;height:100%;object-fit:cover;display:block}
.mini-ph .photo em{position:absolute;right:3cqw;bottom:3cqw;font-style:normal;font-family:var(--font-mono);font-weight:700;font-size:.95em;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);padding:1.2cqw 3cqw;border-radius:99px}
.mini-ph .who{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;padding:0 1cqw}
.mini-ph .who b{font-size:1.02em;font-weight:600}
.mini-ph .who span{font-size:.84em;color:#6F7A77;white-space:nowrap}
.mini-ph .note{display:flex;align-items:center;gap:2.6cqw;background:#FFF4F6;color:#B3264A;border-radius:3.6cqw;padding:2.8cqw 3.4cqw;font-size:.9em}
.mini-ph .note i{font-style:normal;font-size:1.1em}
.mini-ph .note span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-ph .steps{display:flex;align-items:center;gap:1.4cqw;padding:0 1cqw}
.mini-ph .steps i{width:4.2cqw;aspect-ratio:1;border-radius:50%;background:#E3E7E1;flex:none;transition:background .35s,box-shadow .35s}
.mini-ph .steps u{flex:1;height:.9cqw;border-radius:99px;background:#E3E7E1;position:relative;overflow:hidden}
.mini-ph .steps u::after{content:"";position:absolute;inset:0;background:#22C58B;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s ease-in-out}
.mini-ph .steps .s1{background:#22C58B}
.hd-tg.on .mini-ph .steps .l1::after{transform:none;transition-delay:3.5s}
.hd-tg.on .mini-ph .steps .s2{background:#22C58B;box-shadow:0 0 0 1.4cqw rgba(34,197,139,.25);transition-delay:3.95s}
.mini-ph .photo,.mini-ph .who,.mini-ph .note,.mini-ph .steps,.mini-ph .acc{opacity:0;translate:0 5cqw;transition:opacity .45s var(--ease),translate .45s var(--ease)}
.hd-tg.on .mini-ph .photo{opacity:1;translate:none;transition-delay:2.05s}
.hd-tg.on .mini-ph .who{opacity:1;translate:none;transition-delay:2.15s}
.hd-tg.on .mini-ph .note{opacity:1;translate:none;transition-delay:2.22s}
.hd-tg.on .mini-ph .steps{opacity:1;translate:none;transition-delay:2.3s}
.hd-tg.on .mini-ph .acc{opacity:1;translate:none;transition-delay:2.35s}
/* кнопка: смарагдовий градієнт під кораловою накладкою ::before (градієнт не анімується — гасимо накладку);
   на тапі стискається */
.mini-ph .acc{position:relative;margin-top:auto;text-align:center;border-radius:99px;padding:3.6cqw 0;overflow:hidden;background:linear-gradient(140deg,#2FD69B,#12A36F);
  box-shadow:0 8px 16px -10px rgba(255,90,120,.75)}
.mini-ph .acc::before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,#FF6B8B,#FF3D63);transition:opacity .35s}
.mini-ph .acc b{position:relative;display:block;font-size:1.02em;font-weight:700;color:#fff}
.mini-ph .acc .t2{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .3s}
.mini-ph .acc .t1{transition:opacity .3s}
.hd-tg.on .mini-ph .acc{animation:accpress .5s ease-out 3.15s 1 both;box-shadow:0 8px 16px -10px rgba(18,163,111,.75);transition:opacity .45s var(--ease) 2.35s,translate .45s var(--ease) 2.35s,box-shadow .4s 3.3s}
.hd-tg.on .mini-ph .acc::before{opacity:0;transition-delay:3.3s}
.hd-tg.on .mini-ph .acc .t1{opacity:0;transition-delay:3.3s}
.hd-tg.on .mini-ph .acc .t2{opacity:1;transition-delay:3.3s}
@keyframes accpress{0%{scale:1}35%{scale:.94}100%{scale:1}}
/* палець-тап: 1 — по розгорнутому острівцю (1.5с), 2 — по кнопці (3.1с) */
.mini-ph .tap{position:absolute;z-index:8;width:14%;aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.35);border:1.5px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.18);opacity:0;transform:scale(1.4)}
.mini-ph .tap1{left:60%;top:8%}.mini-ph .tap2{left:52%;top:87%}
.hd-tg.on .mini-ph .tap1{animation:tap .8s ease-out 1.35s 1 forwards}
.hd-tg.on .mini-ph .tap2{animation:tap .8s ease-out 2.95s 1 forwards}
@keyframes tap{0%{opacity:0;transform:scale(1.4)}30%{opacity:1;transform:scale(1)}55%{transform:scale(.7)}70%{transform:scale(1.15);opacity:.6}100%{opacity:0;transform:scale(1.6)}}
@media (prefers-reduced-motion:reduce){.hd-tg.on .mini-ph .island,.hd-tg.on .mini-ph .island *,.hd-tg.on .mini-ph .tap,.hd-tg.on .mini-ph .acc{animation:none}}

/* — ШІ: ядро + рій логотипів моделей на трьох орбітах різних нахилів +
   дрібні частинки. Рухається завжди (клубок живе і поза фокусом, лише повільніше),
   у фокусі — швидше, орбіти ближче, ядро пульсує. Кожна орбіта — свій нахил
   через rotate на батьку, а логотип у кінці ланцюга контр-обертається, щоб
   лишатися вертикальним. — */
.mini-ai{position:relative;width:78%;aspect-ratio:1;display:grid;place-items:center;--spd:1}
/* мікросцени, що виходять за габарит цілі (клубок ШІ, аркуш Telegram, вузли API),
   піднімаємо ближче до камери — інакше у 3D їх перекривають сусідні цілі каруселі.
   Підйом пропорційний радіусу диска (--Rz), тому працює на будь-якій ширині. */
.hd-tg.on .mini-ai{--spd:2.2}
.hd-tg.on.t-tg{--lift:160px}
.hd-tg.on.t-api{--lift:172px}
/* сусідні (пригашені) цілі не повинні розкидати логотипи/промені у зону активної — ховаємо їх периферію */
.hd-tg:not(.on) .mini-ai .orb .lg{opacity:.28;transition:opacity .5s}
.hd-tg:not(.on) .mini-api .ray .nd{opacity:.3;transition:opacity .5s}
.hd-tg:not(.on) .mini-api .ray .pk{opacity:0}
.mini-ai .core{width:34%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#F3F5F2,#C9D6CF 60%,#9FB5A9);
  box-shadow:inset 0 -3px 6px rgba(20,40,32,.18),0 6px 18px -8px rgba(20,40,32,.35);position:relative;z-index:2}
.mini-ai .core b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--pine);font-weight:700}
.hd-tg.on .mini-ai .core{box-shadow:0 0 0 6px color-mix(in srgb,var(--pine) 14%,transparent),0 0 24px color-mix(in srgb,var(--pine) 40%,transparent)}
/* орбіта: плашка їде по колу через offset-path, offset-rotate:0 — тому
   завжди горизонтальна і читається, як би не крутилась. Радіус кола задає
   --rf у частках ширини цілі (--aiW ставить JS). Кожна орбіта — свій
   радіус, швидкість, напрямок і фаза (--ph). */
.mini-ai .orb{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.mini-ai .orb .lg{position:absolute;left:0;top:0;translate:-50% -50%;
  display:flex;align-items:center;gap:4px;padding:3px 7px 3px 4px;border-radius:99px;background:#fff;
  box-shadow:0 6px 16px -8px rgba(20,24,26,.4),0 0 0 1px rgba(20,24,26,.06);white-space:nowrap;
  offset-path:circle(calc(var(--aiW,120px) * var(--rf,.4)) at 0 0);offset-rotate:0deg;
  offset-distance:var(--ph,0%);
  animation:aiorbit calc(var(--t,10s) / var(--spd)) linear infinite}
.mini-ai .orb .lg svg{width:14px;height:14px;flex:none;border-radius:50%;padding:2px;box-sizing:content-box}
.mini-ai .orb .lg u{text-decoration:none;font-family:var(--font-body);font-weight:700;font-size:9.5px;letter-spacing:.02em;color:#1C2126}
.mini-ai .o1 .lg{--rf:.3;--t:10s;--ph:0%}
.mini-ai .o2 .lg{--rf:.27;--t:13s;--ph:30%;animation-direction:reverse}
.mini-ai .o3 .lg{--rf:.32;--t:8.5s;--ph:60%}
.mini-ai .o4 .lg{--rf:.23;--t:15s;--ph:85%;animation-direction:reverse}
@keyframes aiorbit{from{offset-distance:var(--ph,0%)}to{offset-distance:calc(var(--ph,0%) + 100%)}}
/* впізнавані бренд-плашки */
.lg-oa svg{background:#10A37F;fill:#fff}
.lg-cl svg{background:#D97757;fill:#fff;stroke:#fff}
.lg-gm svg{background:linear-gradient(135deg,#4285F4,#9B72CB 55%,#D96570);fill:#fff}
.lg-mt svg{background:#0866FF;fill:#fff}
/* дрібні частинки — рояться навколо ядра по своїх колах */
.mini-ai .dot{position:absolute;left:50%;top:50%;width:6%;aspect-ratio:1;border-radius:50%;
  background:var(--c,var(--pine));opacity:.75;
  animation:aidot calc(var(--t,5s) / var(--spd)) linear var(--dl,0s) infinite}
.mini-ai .d1{--rf:.28;--t:5s;--c:#10A37F}
.mini-ai .d2{--rf:.34;--t:6.5s;--dl:-2s;--c:#D97757}
.mini-ai .d3{--rf:.30;--t:4s;--dl:-1s;--c:#4285F4}
.mini-ai .d4{--rf:.48;--t:8s;--dl:-3.5s;--c:#B8801F}
.mini-ai .d5{--rf:.40;--t:5.5s;--dl:-.7s;--c:#9B72CB;width:4.5%}
.mini-ai .d6{--rf:.26;--t:3.4s;--dl:-2.6s;--c:#0866FF;width:4.5%}
@keyframes aidot{
  from{transform:translate(-50%,-50%) rotate(0deg) translateX(calc(var(--aiW,120px) * var(--rf,.4))) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg) translateX(calc(var(--aiW,120px) * var(--rf,.4))) rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){.mini-ai .orb,.mini-ai .orb .lg,.mini-ai .dot{animation:none}}
@keyframes orbpulse{50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:no-preference){.hd-tg.on .mini-ai .core{animation:orbpulse 1.6s ease-in-out infinite}}

/* — Telegram: у фокусі літачок вилітає з диска вгору-вправо, гальмує і
   розгортається в аркуш зі списком того, що робимо в Telegram. Політ і
   розгортання — послідовні transition-delay на одному класі .on. Поза
   фокусом усе згорнуте назад у логотип; диск при цьому «спорожнілий»,
   бо його літачок полетів. — */
.mini-tg{position:relative;width:66%;aspect-ratio:1;display:grid;place-items:center;overflow:visible}
.mini-tg .disc{position:absolute;inset:0;border-radius:50%;background:#2AABEE;box-shadow:0 10px 24px -12px rgba(42,171,238,.8);
  transition:transform .5s var(--ease)}
.hd-tg.on .mini-tg .disc{transform:scale(.92)}
@media (prefers-reduced-motion:no-preference){.hd-tg.on .mini-tg .disc{animation:tgbob 1.8s ease-in-out .9s infinite}}
@keyframes tgbob{50%{transform:scale(.92) translateY(-4%) rotate(-5deg)}}
/* літачок + аркуш живуть в одному контейнері, який летить */
.mini-tg .tgfly{position:absolute;left:50%;top:50%;width:56%;aspect-ratio:1;translate:-50% -50%;z-index:3;
  display:grid;place-items:center;
  transition:transform .75s cubic-bezier(.3,.9,.4,1),translate .75s cubic-bezier(.3,.9,.4,1)}
.mini-tg .pl{width:100%;height:100%;fill:#fff;transform:translate(-4%,4%);
  transition:transform .75s cubic-bezier(.3,.9,.4,1),opacity .25s .55s}
/* фокус: політ угору-вправо з нахилом і легким збільшенням; тінь-шлейф позаду */
.hd-tg.on .mini-tg .tgfly{translate:calc(-50% + 70%) calc(-50% - 66%);transform:scale(1)}
.hd-tg.on .mini-tg .pl{transform:translate(-4%,4%) rotate(-28deg) scale(1.1);opacity:0;transition:transform .75s cubic-bezier(.3,.9,.4,1),opacity .2s .6s}
.mini-tg .trail{position:absolute;left:52%;top:46%;width:60%;height:3px;border-radius:99px;pointer-events:none;
  background:linear-gradient(90deg,rgba(42,171,238,0),rgba(42,171,238,.55));transform-origin:0 50%;
  transform:rotate(-43deg) scaleX(0);opacity:0}
.hd-tg.on .mini-tg .trail{animation:tgtrail .9s ease-out .05s 1 both}
@keyframes tgtrail{0%{transform:rotate(-43deg) scaleX(0);opacity:0}30%{opacity:1}70%{transform:rotate(-43deg) scaleX(1);opacity:.6}100%{transform:rotate(-43deg) scaleX(1);opacity:0}}
/* аркуш: згорнутий у крапку там, де приземляється літачок; розгортається після посадки */
.mini-tg .sheet{position:absolute;left:50%;top:50%;translate:-50% -50%;width:max-content;min-width:120px;
  background:#fff;border-radius:8px;padding:7px 9px 8px;text-align:left;
  box-shadow:0 14px 34px -14px rgba(20,24,26,.45),0 0 0 1px rgba(20,24,26,.06);
  display:flex;flex-direction:column;gap:3px;
  transform-origin:18% 18%;transform:scale(0) rotate(-14deg);opacity:0;
  transition:transform .55s cubic-bezier(.34,1.35,.5,1),opacity .3s}
.hd-tg.on .mini-tg .sheet{transform:none;opacity:1;transition-delay:.62s}
.mini-tg .sheet b{display:flex;align-items:center;gap:5px;font-size:9px;color:#1C2126;margin-bottom:2px}
.mini-tg .sheet b .ico{width:14px;height:14px;flex:none;display:block}
.mini-tg .sheet i{font-style:normal;font-size:8px;line-height:1.3;white-space:nowrap;color:#3A464E;padding-left:10px;position:relative;
  opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s}
.mini-tg .sheet i::before{content:"";position:absolute;left:0;top:.5em;width:4px;height:4px;border-radius:50%;background:#2AABEE}
.hd-tg.on .mini-tg .sheet i{opacity:1;transform:none}
.hd-tg.on .mini-tg .sheet i:nth-of-type(1){transition-delay:.85s}
.hd-tg.on .mini-tg .sheet i:nth-of-type(2){transition-delay:.95s}
.hd-tg.on .mini-tg .sheet i:nth-of-type(3){transition-delay:1.05s}
.hd-tg.on .mini-tg .sheet i:nth-of-type(4){transition-delay:1.15s}
/* сусідні цілі не мають перекривати аркуш */
.hd-tg.on{z-index:5}

/* — API: центр «API», навколо вісім промінів РІЗНОЇ довжини з реальними
   сервісами на кінцях. Кожен вузол плаває вздовж свого променя (промінь
   тягнеться за ним), по променях бігають пакети. Живе завжди, у фокусі —
   швидше і вузли підсвічуються. Промінь = обгортка, повернута на --a;
   вузол сидить на її кінці, тому кут і довжина ніколи не розійдуться. — */
.mini-api{position:relative;width:96%;aspect-ratio:1;display:grid;place-items:center;--spd:1}
.hd-tg.on .mini-api{--spd:2}
.mini-api .hub{position:relative;z-index:3;width:30%;aspect-ratio:1;border-radius:50%;background:linear-gradient(160deg,#2A6653,var(--pine) 60%,#12332A);color:#EDEEE9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;font-weight:700;
  box-shadow:0 8px 20px -10px rgba(20,40,32,.6),inset 0 1px 0 rgba(255,255,255,.18)}
.mini-api .hub svg{width:34%;height:34%}
.hd-tg.on .mini-api .hub{box-shadow:0 0 0 6px color-mix(in srgb,var(--pine) 16%,transparent),0 0 0 12px color-mix(in srgb,var(--pine) 6%,transparent),0 8px 20px -10px rgba(20,40,32,.6)}
/* промінь: точка обертання — центр цілі; довжина = базова + плавання */
.mini-api .ray{position:absolute;left:50%;top:50%;width:calc(40% * var(--l,.8));height:2px;transform-origin:0 50%;
  transform:rotate(var(--a,0deg));pointer-events:none;
  animation:raybreath calc(var(--t,5s) / var(--spd)) ease-in-out calc(var(--i,0) * -.7s) infinite}
@keyframes raybreath{0%,100%{width:calc(40% * (var(--l,.8) - var(--amp,.1)))}50%{width:calc(40% * (var(--l,.8) + var(--amp,.1)))}}
.mini-api .ray .ln{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--pine) 40%,transparent),color-mix(in srgb,var(--c,var(--rule)) 55%,transparent));border-radius:2px}
/* вузол на кінці променя; контр-обертається, щоб підпис стояв рівно */
.mini-api .ray .nd{position:absolute;right:0;top:50%;translate:50% -50%;rotate:calc(-1 * var(--a,0deg));
  display:flex;align-items:center;gap:5px;text-decoration:none;font-family:var(--font-body);font-size:8.5px;letter-spacing:.01em;font-weight:700;color:var(--tx,#fff);
  background:var(--c);border-radius:99px;padding:2px 9px 2px 2px;white-space:nowrap;
  box-shadow:0 5px 12px -6px color-mix(in srgb,var(--c) 70%,#000),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .35s var(--ease),box-shadow .35s}
.mini-api .ray .nd > svg,.mini-api .ray .nd .bi{width:18px;height:18px;flex:none;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.mini-api .ray .nd .bi svg{width:100%;height:100%;display:block}
/* «темні» бренди: знак кольором на білому кружку, як і решта — одна система */
.mini-api .ray .nd .bi-mono svg{width:86%;height:86%}
.mini-api .ray .nd .bi-liqpay svg{width:80%;height:80%}
.mini-api .ray .nd .bi-fondy svg{width:88%;height:88%}
.mini-api .ray .nd .bi-1c svg{width:82%;height:82%}
.mini-api .ray .nd .bi-telegram svg{width:78%;height:78%}
.mini-api .ray .nd .bi-sheets svg{width:66%;height:66%}
.mini-api .ray .nd .bi-np svg{width:112%;height:112%}
.hd-tg.on .mini-api .ray .nd{transform:scale(1.12);box-shadow:0 8px 16px -6px color-mix(in srgb,var(--c) 80%,#000),0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
/* пакет: бігає по променю від центру до вузла і назад */
.mini-api .ray .pk{position:absolute;left:0;top:50%;width:5px;height:5px;translate:0 -50%;border-radius:50%;background:var(--c,var(--pine));
  box-shadow:0 0 5px var(--c,var(--pine));
  animation:pkrun calc(var(--t,5s) * .6 / var(--spd)) ease-in-out calc(var(--i,0) * -.45s) infinite}
@keyframes pkrun{0%{left:0;opacity:0}10%{opacity:1}45%{left:100%;opacity:1}55%{left:100%;opacity:0}56%{left:0;opacity:0}100%{left:0;opacity:0}}
@media (prefers-reduced-motion:reduce){.mini-api .ray,.mini-api .ray .pk{animation:none}}

@media (max-width:1080px){
  .hero-dial-grid{grid-template-columns:1fr;gap:18px}
  .hd-dial{width:min(100%,640px,calc((100svh - 420px) * 1.5));order:-1}
  .hd-descs{max-width:none}
}
@media (max-width:720px){
  .hero{padding-block:76px 24px}
  .hd-dial{width:100%}
  .hd-h1{font-size:clamp(17px,4.6vw,20px)}
  .hd-titles{font-size:clamp(13px,3.6vw,15px)}
  .hd-descs{font-size:14px}
}
body{overflow-x:clip}   /* запобіжник: жоден блок не розширює сторінку вбік */

/* ============================== SECTION HEADS ============================== */
/* Смуги-фони (.band-sunk) відділяють секції — рамки й великі відступи більше не потрібні */
/* Смуги-фони малює JS: колір сторінки безперервно перетікає за скролом
   між тонами палітри (див. scrollTint у main.js) — стиків немає взагалі. */
.sechead{display:flex;align-items:baseline;gap:18px;padding-block:44px 24px}
.sechead h2{font-size:clamp(24px,3.5vw,48px)}
.sechead .idx{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3);flex:none}
.sechead p{margin-left:auto;max-width:420px;color:var(--ink-2);font-size:15px}

/* ============================== STAGE (pinned) ============================== */
/* Стенд — звичайний екран заввишки. Анімація не привʼязана до позиції скролу:
   вона запускається по тригеру і йде до кінця сама (див. frame() у main.js). */
.stage{position:relative}
.stage-in{position:relative;display:grid;place-items:center;overflow:hidden;padding-block:clamp(30px,5svh,52px)}
/* width:100% — place-items:center інакше стискає елемент до ширини контенту */
.stage-grid{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(280px,1fr) 1.25fr;gap:clamp(24px,4vw,80px);align-items:center}
.stage[data-side="left"] .stage-grid{grid-template-columns:1.25fr minmax(280px,1fr)}
.stage[data-side="left"] .stage-copy{order:2}
.stage-copy{max-width:460px}
.stage-copy .kick{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.stage-copy .kick i{width:26px;height:1px;background:var(--pine);display:block}
.stage-copy .kick span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--pine)}
.stage-copy h3{font-size:clamp(25px,2.9vw,42px);margin-bottom:16px}
.stage-copy .lede{color:var(--ink-2);font-size:16px;margin-bottom:22px}
.taglist{display:flex;flex-wrap:wrap;gap:7px}
.taglist span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;padding:5px 10px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-2)}
.stage-copy .out{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.stage.seen .stage-copy .out{opacity:1;transform:none}
.stage.seen .stage-copy .out:nth-child(2){transition-delay:.06s}
.stage.seen .stage-copy .out:nth-child(3){transition-delay:.12s}
.stage.seen .stage-copy .out:nth-child(4){transition-delay:.18s}
.stage-vis{position:relative;display:grid;place-items:center;min-height:52svh}

/* ============================== DEVICES ============================== */
.screen{container-type:inline-size;position:relative;overflow:hidden;background:var(--graphite);isolation:isolate}
.screen::after{ /* блік по склу */
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(104deg,rgba(255,255,255,.12) 0 22%,transparent 46%);opacity:.5}
.scr{position:absolute;inset:0;font-size:2.7cqw;font-family:var(--font-body);color:#E9EBE7;overflow:hidden}
/* pointer-events:none обов'язково: opacity:0 НЕ вимикає перехоплення кліків,
   а ця плівка лежить над усім вмістом екрана і з'їдала і кліки, і наведення */
.wake{position:absolute;inset:0;z-index:4;background:#050708;pointer-events:none;
  opacity:calc(1 - clamp(0,var(--s2,0)*7,1))}

/* -- laptop --------------------------------------------------------------
   Три шари: алюмінієвий кант → чорна рамка → скло. Дека — окремий елемент
   у 3D через rotateX; висота через aspect-ratio, тож усе масштабується
   однією шириною. Ширина обмежена і по svh.
   Головне правило металу тут — НИЗЬКИЙ контраст: справжній алюміній
   відрізняється від «намальованого» тим, що сусідні світла різняться на
   відсотки, а не в рази. Всі яскраві грані прибрані, глибина — з м'яких
   півтіней і одного делікатного канта.
------------------------------------------------------------------------- */
.laptop{
  --alu-1:#EEF0F1; --alu-2:#DDE1E3; --alu-3:#C4CACD; --alu-4:#9FA6AA;
  --bezel:#101314;
  width:min(100%,700px,calc(112svh - 150px));
  perspective:2200px;
  transform-style:preserve-3d;
  position:relative;
}
.laptop-lid{
  transform-origin:50% 100%;
  transform:rotateX(calc(-88deg + var(--s1,0) * 88deg));
  /* sin() дає легкий перехльост у кінці — кришка «доводиться», а не впирається.
     Рядок вище лишається фолбеком, якщо sin() не підтримується. */
  transform:rotateX(calc(-88deg + var(--s1,0) * 88deg
            + sin(calc(var(--s1,0) * var(--s1,0) * var(--s1,0) * 180deg)) * 2.4deg));
  transform-style:preserve-3d;
}
.lid-shell{
  position:relative;padding:2px;border-radius:14px 14px 4px 4px;
  background:linear-gradient(184deg,#F5F7F8,var(--alu-2) 46%,var(--alu-3));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 -1px 1px rgba(44,50,54,.22),
    0 30px 60px -30px rgba(20,24,26,.42);
}
.lid-shell::after{ /* ледь помітна фаска по торцю — головний «дорогий» штрих */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.45);
}
.lid-bezel{position:relative;padding:.85% .85% 1.4%;border-radius:12px 12px 3px 3px;
  background:linear-gradient(180deg,#0D1011,#141718);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.85)}
.laptop-lid .screen{border-radius:4px;aspect-ratio:16/10;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.laptop-lid .screen::after{ /* скло: один широкий м'який відблиск, без смуг */
  background:linear-gradient(107deg,rgba(255,255,255,.09) 0 16%,transparent 34%);
  opacity:.8}
.lid-notch{
  position:absolute;z-index:7;top:2px;left:50%;translate:-50% 0;
  width:9%;aspect-ratio:9/1.1;background:#0D1011;border-radius:0 0 5px 5px;
  display:flex;align-items:center;justify-content:center;gap:14%;
}
.lid-notch i{width:9%;aspect-ratio:1;border-radius:50%;background:#1E2427;display:block}
.lid-notch b{
  width:6.5%;aspect-ratio:1;border-radius:50%;background:#3ED598;display:block;
  opacity:clamp(0,calc((var(--s2,0) - .1) * 8),1);
  box-shadow:0 0 4px rgba(62,213,152,.8);
}

.laptop-base{position:relative;width:100%;aspect-ratio:780/110;transform-style:preserve-3d}
.base-lip{
  position:absolute;z-index:1;left:.6%;right:.6%;bottom:0;height:10px;border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,var(--alu-1),var(--alu-2) 42%,var(--alu-3) 86%,#868D91);
  box-shadow:0 3px 5px -2px rgba(20,24,26,.26),inset 0 1px 0 rgba(255,255,255,.75);
}
.base-lip::after{ /* виїмка під палець */
  content:"";position:absolute;left:50%;translate:-50% 0;top:0;width:11%;height:62%;
  border-radius:0 0 8px 8px;background:linear-gradient(180deg,#C7CDD0,#949CA0);
  box-shadow:inset 0 -1px 1px rgba(44,50,54,.25);
}
.base-hinge{
  position:absolute;z-index:3;left:12%;right:12%;top:-1px;height:3px;border-radius:0 0 2px 2px;
  background:linear-gradient(180deg,#848B8F,#4A5054);
}
.base-deck{
  position:absolute;z-index:2;inset:0 0 auto 0;width:100%;aspect-ratio:780/430;
  transform-origin:50% 0;transform:rotateX(78deg);
  border-radius:2px 2px 18px 18px;
  background:
    linear-gradient(90deg,var(--alu-3),var(--alu-2) 9% 91%,var(--alu-3)),
    linear-gradient(180deg,var(--alu-3),var(--alu-2) 30%,var(--alu-1));
  box-shadow:inset 0 2px 4px -1px rgba(20,24,26,.32),inset 0 -1px 2px rgba(255,255,255,.55);
}
/* динаміки: дрібна тиха перфорація, ледь темніша за деку */
.base-deck::before,.base-deck::after{
  content:"";position:absolute;top:10%;height:44%;width:3%;border-radius:3px;opacity:.55;
  background-image:radial-gradient(circle,#A6ADB1 26%,transparent 33%);
  background-size:3px 3px;
}
.base-deck::before{left:3%}
.base-deck::after{right:3%}
.kb{ /* клавіатура: темна панель, сітка клавіш — пошепки, не контуром */
  position:absolute;left:10%;right:10%;top:8%;height:48%;border-radius:5px;
  background-color:#1B1E20;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 6.55%,rgba(190,197,200,.22) 6.55% 6.95%),
    repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 3%,transparent 3% 15.8%,rgba(190,197,200,.22) 15.8% 16.5%);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5),inset 0 0 0 1px rgba(120,128,132,.3),0 .5px 0 rgba(255,255,255,.45);
}
.pad{
  position:absolute;left:32%;right:32%;bottom:6%;height:36%;border-radius:6px;
  background:linear-gradient(175deg,#D6DBDD,#C6CCCF);
  box-shadow:inset 0 0 0 .5px rgba(90,98,102,.45),inset 0 1px 1px rgba(255,255,255,.65);
}
.deck-glow{ /* відсвіт увімкненого екрана на деці */
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(196,230,214,.4),transparent 44%);
  opacity:var(--s2,0);mix-blend-mode:screen;
}
.laptop-shadow{ /* контактна тінь + широка м'яка, обидві стримані */
  height:30px;margin-top:2px;filter:blur(8px);
  background:
    radial-gradient(26% 50% at 50% 0,rgba(20,24,26,calc(.1 + var(--s1,0) * .16)),transparent 70%),
    radial-gradient(60% 100% at 50% 0,rgba(20,24,26,calc(.06 + var(--s1,0) * .1)),transparent 78%);
}

@media (prefers-reduced-motion:no-preference){
  .laptop{animation:float 9s ease-in-out infinite}
  .laptop-lid .screen::after{animation:sheen 11s ease-in-out infinite}
}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-7px) rotate(.16deg)}
}
@keyframes sheen{
  0%,100%{transform:translateX(-5%)}
  50%{transform:translateX(7%)}
}

/* -- monitor -- */
.monitor{width:min(100%,760px)}
.monitor .screen{border:.7vw solid var(--graphite-2);border-radius:9px;aspect-ratio:16/9;box-shadow:0 34px 70px -30px rgba(0,0,0,.5)}
.monitor-neck{width:64px;height:44px;margin:0 auto;background:linear-gradient(90deg,#232A2D,#3A4245,#232A2D)}
.monitor-foot{width:34%;height:9px;margin:0 auto;border-radius:6px;background:linear-gradient(90deg,#1E2427,#3A4245,#1E2427)}

/* -- phone ---------------------------------------------------------------
   Два шари: .phone-rise несе виїзд знизу від --s1, .phone — рідкі повороти.
   Рух — «рука, не штатив»: поворот у два дотики (трошки → пауза → ще
   трошки в той самий бік → пауза → назад), у паузах кут ледь дрейфує,
   бо жива рука не тримає позицію ідеально. Один цикл 21 с містить дві
   несхожі послідовності (вправо два кроки, вліво два кроки) з нерівними
   інтервалами — метроном не читається.
   Блік прив'язаний до КУТА, а не до часу: два промені (лівий для поворотів
   вправо, правий для поворотів вліво) їдуть склом пропорційно повороту
   і тримаються, поки апарат тримає кут — як справжній відблиск.
   Чохол — матовий силікон, лавандово-барвінковий: навмисно контрастний
   до вівсяного фону сторінки, щоб читався окремою річчю.
------------------------------------------------------------------------- */
.phone-wrap{position:relative;display:flex;justify-content:center;align-items:flex-end;
  width:100%;height:100%;overflow:hidden;padding-top:6%;perspective:1100px}

.phone-shade{ /* єдине, що лишилось під телефоном: м'яка тінь на «столі» */
  position:absolute;z-index:0;left:50%;bottom:-.4%;translate:-50% 0;
  width:min(46%,270px);height:4.2%;border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(56,42,38,.34),transparent 70%);
  filter:blur(9px);opacity:var(--s1,0);
}
.phone-rise{
  position:relative;z-index:1;width:min(54%,298px,34svh);transform-style:preserve-3d;
  transform:translateY(calc((1 - var(--s1,0)) * 58%)) rotate(calc((1 - var(--s1,0)) * 9deg));
  transform-origin:50% 100%;
}
/* вібро на пуш: клас вішає main.js на пів секунди; на цей момент виїзд уже
   завершено (--s1=1), тож перекриття базового transform нічого не ламає */
.phone-rise.buzz{animation:buzz .5s linear}
@keyframes buzz{
  0%,100%{transform:none}
  12%,52%,88%{transform:translateX(-2.5px) rotate(-.45deg)}
  32%,70%{transform:translateX(2.5px) rotate(.45deg)}
}
.phone{
  position:relative;width:100%;padding:3% 3% 3.7%;isolation:isolate;
  border-radius:12%/5.6%;                 /* по-різному по осях — інакше кути овальні */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 calc(8px + var(--s1,0) * 12px) calc(14px + var(--s1,0) * 18px) -12px rgba(60,58,80,.38);
}
.phone::before{ /* чохол: лавандово-барвінковий матовий силікон */
  content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  background:
    radial-gradient(120% 90% at 30% 6%,rgba(255,255,255,.5),transparent 55%),
    linear-gradient(160deg,#C9CFF4,#A2ACEA 55%,#8A96E0);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.75),inset 0 -3px 6px rgba(66,74,140,.4);
}
.phone .screen{border-radius:9.6%/4.5%;aspect-ratio:9/19.2;background:#0B0E0F;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.phone .scr{font-size:5.4cqw}

/* «острівець» замість вирізу — видимий і на вимкненому екрані: це отвір у склі */
.phone-island{position:absolute;z-index:7;top:2.4%;left:50%;translate:-50% 0;
  width:26%;aspect-ratio:26/7.4;border-radius:99px;background:#07090A;
  display:flex;align-items:center;justify-content:flex-end;padding-right:7%}
.phone-island i{width:14%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#3B4A52,#0C1013 70%);
  box-shadow:0 0 0 1px rgba(255,255,255,.12)}

/* скляні відблиски: перший промінь працює на повороти вправо, другий — вліво */
.phone-glare{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;border-radius:inherit}
.phone-glare i{position:absolute;inset:-15% -45%;display:block;opacity:0;
  background:linear-gradient(100deg,transparent 43%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.06) 56%,transparent 62%)}
.phone-glare i:first-child{transform:translateX(-70%)}
.phone-glare i:last-child{transform:translateX(70%);
  background:linear-gradient(80deg,transparent 43%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.05) 56%,transparent 62%)}

/* кнопки в колір чохла — визирають з-за рамки, живуть у системі координат .phone */
.phone-btn{position:absolute;z-index:-1;border-radius:1.5px;
  background:linear-gradient(180deg,#E6EAFB,#8894D9)}
.phone-btn.pw{right:-1.3%;top:26%;width:1.5%;height:11%}
.phone-btn.v1{left:-1.3%;top:20%;width:1.5%;height:6%}
.phone-btn.v2{left:-1.3%;top:29%;width:1.5%;height:9%}

@media (prefers-reduced-motion:no-preference){
  /* тільки стенд додатків: у ботів .phone несе власний transform виїзду */
  .phone-rise .phone{animation:phoneTurn 21s ease-in-out infinite}
  .phone-rise .phone-glare i:first-child{animation:glareR 21s ease-in-out infinite}
  .phone-rise .phone-glare i:last-child{animation:glareL 21s ease-in-out infinite}
}
/* таймлайн (21 с): спокій → вправо у два дотики з паузами → спокій →
   вліво у два дотики → довгий спокій. Інтервали навмисно нерівні. */
@keyframes phoneTurn{
  0%,14%   {transform:rotateY(0)}
  16.5%    {transform:rotateY(5deg)}      /* перший дотик */
  21%      {transform:rotateY(5.6deg)}    /* пауза з мікродрейфом */
  23.5%    {transform:rotateY(9.2deg)}    /* дотик у той самий бік */
  30%      {transform:rotateY(8.6deg)}    /* пауза, знову дрейф */
  34%      {transform:rotateY(.6deg)}     /* повернення */
  36%,52%  {transform:rotateY(0)}
  54%      {transform:rotateY(-3.8deg)}
  58%      {transform:rotateY(-4.4deg)}
  60.5%    {transform:rotateY(-7.6deg)}
  65%      {transform:rotateY(-7deg)}
  69%      {transform:rotateY(-.4deg)}
  71%,100% {transform:rotateY(0)}
}
/* блік = функція кута (x ≈ -70% + кут·8), ті самі відсотки, що в phoneTurn:
   з'являється рухом, висить на паузі, іде разом із поверненням */
@keyframes glareR{
  0%,14%   {opacity:0;transform:translateX(-70%)}
  16.5%    {opacity:.5;transform:translateX(-30%)}
  21%      {opacity:.44;transform:translateX(-25%)}
  23.5%    {opacity:.55;transform:translateX(4%)}
  30%      {opacity:.48;transform:translateX(-1%)}
  34%      {opacity:0;transform:translateX(-65%)}
  36%,100% {opacity:0;transform:translateX(-70%)}
}
@keyframes glareL{
  0%,52%   {opacity:0;transform:translateX(70%)}
  54%      {opacity:.4;transform:translateX(40%)}
  58%      {opacity:.36;transform:translateX(35%)}
  60.5%    {opacity:.48;transform:translateX(9%)}
  65%      {opacity:.42;transform:translateX(14%)}
  69%      {opacity:0;transform:translateX(66%)}
  71%,100% {opacity:0;transform:translateX(70%)}
}

/* телефон у стенді ботів лишається на старій, спокійній конструкції:
   там він другорядний і не має перетягувати увагу з термінала */
.botphone .phone{padding:3.4%;border-radius:13%/6%}
.botphone .phone-notch{position:absolute;z-index:6;top:3.4%;left:50%;translate:-50% 0;
  width:33%;aspect-ratio:33/8;border-radius:99px;background:#0B0E0F}

/* ============================== MINI-UI (вміст екранів) ============================== */
.ui{position:absolute;inset:0;display:flex;flex-direction:column}
.ui-bar{display:flex;align-items:center;gap:.4em;padding:.55em .7em;background:#161B1D;border-bottom:1px solid #262D30;flex:none}
.ui-bar i{width:.5em;height:.5em;border-radius:50%;background:#394245;display:block}
.ui-bar .url{margin-left:.5em;flex:1;background:#0E1213;border-radius:.35em;padding:.22em .6em;font-family:var(--font-mono);font-size:.62em;color:#7E8A86;letter-spacing:.02em}
.ui-body{flex:1;position:relative;overflow:hidden;background:#0E1213}
.stg{position:absolute;inset:0 0 auto 0}

/* ============================================================
   01 · FLORITTA — робочий магазин усередині ноутбука.
   Свій світ: власна палітра, свій курсор, свої сторінки.
   Мій сайт спокійний — цей навмисне гучний, щоб тягнув погляд.

   Каталог не лежить у розмітці: 24 товари × 11 вузлів букета
   генерує flMini() у main.js з масиву даних. На сторінку товару
   вузол букета клонується, тому картинка там буквально та сама.
   ============================================================ */
.fl{
  --ink:#2A0E1C; --paper:#FFF7F3; --rose:#E02B63; --coral:#FF6A45;
  --plum:#7A1140; --leaf:#2F7D5B; --gold:#F2B33D; --mute:#8A6274;
  position:absolute;inset:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);overflow:hidden;
}
/* поки миша над екраном — вона стає курсором магазину, мій ховається */

/* ---------- шапка ---------- */
.fl-head{position:absolute;z-index:6;inset:0 0 auto 0;background:var(--paper);
  box-shadow:0 .4em 1.1em -.7em rgba(42,14,28,.3)}
.fl-util{display:flex;align-items:center;gap:1.1em;padding:.4em 1.1em;background:var(--ink);color:#FFEDE4;
  font-size:.46em;letter-spacing:.1em;text-transform:uppercase}
.fl-util span:last-child{margin-left:auto}
.fl-marq{overflow:hidden;background:var(--rose);color:#fff;padding:.4em 0}
.fl-marq-in{display:flex;gap:1.5em;width:max-content;font-size:.48em;letter-spacing:.11em;
  text-transform:uppercase;white-space:nowrap;animation:marq 22s linear infinite}
.fl-marq b{font-weight:400;opacity:.7}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fl-nav{display:flex;align-items:center;gap:.9em;padding:.65em 1.1em}
.fl-logo{font-family:var(--font-shop);font-size:1.2em;font-weight:600;letter-spacing:.26em;color:var(--plum)}
.fl-nav a{font-size:.55em;letter-spacing:.05em;color:var(--mute);padding-bottom:.15em;border-bottom:1px solid transparent}
.fl-nav a.on,.fl-nav a:hover{color:var(--rose);border-bottom-color:var(--rose)}
.fl-cart{margin-left:auto;display:flex;align-items:center;gap:.4em;background:var(--ink);color:#fff;
  border-radius:99px;padding:.35em .75em;font-size:.5em;letter-spacing:.08em}
.fl-cart b{background:var(--gold);color:var(--ink);border-radius:99px;padding:0 .45em;font-weight:700}

/* ---------- сторінки ---------- */
.fl-body{position:absolute;inset:0;overflow:hidden}
.fl-page{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .32s var(--ease),transform .32s var(--ease);transform:translateY(1em)}
.fl-page.on{opacity:1;pointer-events:auto;transform:none}
.fl-scroll{position:absolute;inset:0 0 auto 0;padding-top:5.1em;transform:translateY(var(--y,0px))}

/* ---------- реальні фото магазину ----------
   Кроп зроблено при збірці (sharp, position:"attention"), тому тут object-fit
   лише страхує від нецілих пропорцій. Розміри: картка 460×575, фото товару
   760×1013, мініатюра 140², сцени окремо — усе під Retina на максимальному
   розмірі екрана ноутбука.
   background — на час завантаження, щоб картка не блимала білим. */
.fl-img,.fl-ph{display:block;width:100%;height:100%;object-fit:cover;background:#EFE3DC}
.fl-hero .fl-ph,.fl-band .fl-ph{position:absolute;inset:0}
/* затемнення під білий текст: раніше це був ::after самого .fl-ph,
   але тепер це <img>, а в нього псевдоелементів немає */
.fl-hero::after,.fl-band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(42,14,28,.16),rgba(42,14,28,.62))}

/* ---------- секції ---------- */
.fl-sec{padding:1.5em 1.1em .3em}
.fl-sec-h{display:flex;align-items:baseline;gap:.8em;margin-bottom:.9em}
.fl-sec-h h2{font-family:var(--font-shop);font-size:1.6em;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.1}
.fl-sec-h span{font-size:.5em;letter-spacing:.13em;text-transform:uppercase;color:var(--rose);margin-left:auto;white-space:nowrap}
/* лічильник, а не посилання — тому не рожевий: усе рожеве в шапках секцій клікається */
.fl-sec-h span.count{color:var(--mute)}

.fl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75em}
.fl-card{background:#fff;border-radius:.4em;overflow:hidden;position:relative;
  box-shadow:0 .3em .9em -.45em rgba(42,14,28,.28);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.fl-card:hover{transform:translateY(-.3em);box-shadow:0 .8em 1.5em -.5em rgba(42,14,28,.4)}
.fl-card .fl-img{aspect-ratio:4/5;height:auto}
.fl-badge{position:absolute;z-index:2;top:.45em;left:.45em;display:flex;flex-direction:column;gap:.25em;align-items:flex-start}
.fl-badge span{font-size:.4em;letter-spacing:.1em;text-transform:uppercase;padding:.35em .55em;border-radius:99px;
  background:rgba(255,255,255,.95);color:var(--plum);font-weight:700;line-height:1}
.fl-badge span.sale{background:var(--rose);color:#fff}
.fl-card .nm{font-size:.58em;font-weight:600;line-height:1.3;padding:.7em .7em .3em;min-height:2.6em}
.fl-card .pr{display:flex;align-items:baseline;gap:.4em;padding:0 .7em .5em;font-size:.62em}
.fl-card .pr b{color:var(--rose);font-weight:700}
.fl-card .pr s{opacity:.4;font-size:.82em}
.fl-card .acts{display:flex;gap:.3em;padding:0 .7em .7em}
.fl-card .acts span{flex:1;text-align:center;font-size:.42em;letter-spacing:.07em;text-transform:uppercase;
  padding:.6em .3em;border-radius:99px;border:1px solid rgba(42,14,28,.2);white-space:nowrap}
.fl-card .acts span.buy{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- герой ---------- */
.fl-hero{position:relative;height:13em;display:flex;align-items:center;justify-content:center;text-align:center;
  color:#fff;overflow:hidden}
.fl-hero .fl-ph{position:absolute;inset:0}
.fl-hero-in{position:relative;z-index:2;padding:0 1.2em}
.fl-hero h1{font-family:var(--font-shop);font-size:3.1em;font-weight:300;line-height:.98;
  letter-spacing:.06em;text-transform:uppercase;text-shadow:0 .06em .4em rgba(42,14,28,.5)}
.fl-hero p{font-size:.6em;line-height:1.55;max-width:26em;margin:.9em auto 0;opacity:.94}
.fl-hero .fl-row{display:flex;align-items:center;justify-content:center;gap:.7em;margin-top:1.2em}
.fl-btn{background:var(--rose);color:#fff;font-size:.55em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.8em 1.6em;border-radius:99px;white-space:nowrap;box-shadow:0 .5em 1.1em -.4em rgba(224,43,99,.8)}
.fl-btn.ghost{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.6);box-shadow:none}

/* ---------- про магазин ---------- */
.fl-about{display:grid;grid-template-columns:1.15fr 1fr;gap:1.2em;align-items:center;padding:1.8em 1.1em}
.fl-about h2{font-family:var(--font-shop);font-size:1.5em;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:.6em}
.fl-about p{font-size:.56em;line-height:1.75;color:var(--mute);margin-bottom:.6em}
.fl-about .fl-ph{height:9.5em;border-radius:.4em}

/* ---------- широка смуга ---------- */
.fl-band{position:relative;height:7.5em}
.fl-band .fl-ph{position:absolute;inset:0}
.fl-band div{position:absolute;z-index:2;left:1.2em;bottom:1.1em;color:#fff;
  font-family:var(--font-shop);font-weight:600;font-size:1.4em;letter-spacing:.07em;text-transform:uppercase}

/* ---------- банер знижки ---------- */
.fl-promo{background:var(--ink);color:#fff;text-align:center;padding:2em 1.1em;margin-top:1.5em}
.fl-promo b{display:block;font-family:var(--font-shop);font-size:2.1em;font-weight:300;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.15}
.fl-promo i{display:block;font-style:normal;font-size:.5em;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-top:.8em}

/* ---------- відгуки ---------- */
.fl-rev{display:grid;grid-template-columns:repeat(3,1fr);gap:.75em;padding:0 1.1em}
.fl-rev article{background:#fff;border-radius:.4em;padding:.9em;box-shadow:0 .3em .9em -.5em rgba(42,14,28,.26)}
.fl-stars{color:var(--gold);font-size:.6em;letter-spacing:.12em;margin-bottom:.5em}
.fl-rev p{font-size:.52em;line-height:1.7;color:var(--mute)}
.fl-rev .who{font-size:.44em;letter-spacing:.11em;text-transform:uppercase;margin-top:.7em;color:var(--plum);font-weight:700}

/* ---------- часті питання ---------- */
.fl-faq{padding:0 1.1em}
.fl-faq div{border-bottom:1px solid rgba(42,14,28,.12)}
.fl-faq dt{display:flex;align-items:center;gap:.7em;padding:.85em 0;font-size:.56em;font-weight:600}
.fl-faq dt::after{content:"+";margin-left:auto;color:var(--rose);font-size:1.2em;line-height:1}
.fl-faq div.open dt::after{content:"–"}
.fl-faq dd{max-height:0;overflow:hidden;font-size:.52em;line-height:1.7;color:var(--mute);
  transition:max-height .3s var(--ease),padding .3s var(--ease)}
.fl-faq div.open dd{max-height:9em;padding-bottom:.9em}

/* ---------- блог ---------- */
.fl-blog{display:grid;grid-template-columns:repeat(3,1fr);gap:.75em;padding:0 1.1em}
.fl-blog article{border-radius:.4em;overflow:hidden;background:#fff;box-shadow:0 .3em .9em -.5em rgba(42,14,28,.26)}
.fl-blog .fl-ph{height:3.6em}
.fl-blog b{display:block;font-size:.54em;font-weight:600;line-height:1.4;padding:.7em .7em .3em}
.fl-blog i{display:block;font-style:normal;font-size:.44em;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rose);padding:0 .7em .8em}

/* ---------- instagram ---------- */
.fl-insta{padding:1.6em 1.1em .3em;text-align:center}
.fl-insta b{font-family:var(--font-shop);font-weight:600;font-size:1.2em;letter-spacing:.16em}
.fl-insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.35em;margin-top:.8em}
.fl-insta-grid .fl-ph{aspect-ratio:1;height:auto;border-radius:.2em}

/* ---------- футер ---------- */
.fl-foot{background:#fff;margin-top:1.6em;padding:1.8em 1.1em 1.4em;text-align:center;
  border-top:1px solid rgba(42,14,28,.1)}
.fl-foot .fl-logo{font-size:1.4em;display:block;margin-bottom:.5em}
.fl-foot h3{font-size:.5em;letter-spacing:.2em;text-transform:uppercase;color:var(--plum);margin-bottom:.6em}
.fl-foot > p{font-size:.5em;line-height:1.8;color:var(--mute);max-width:34em;margin:0 auto}
.fl-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1em;text-align:left;margin-top:1.6em;
  padding-top:1.2em;border-top:1px solid rgba(42,14,28,.1)}
.fl-cols b{display:block;font-size:.44em;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.6em}
.fl-cols span{display:block;font-size:.48em;line-height:2;color:var(--mute)}
.fl-pay{display:flex;justify-content:center;gap:.4em;margin-top:1.4em}
.fl-pay i{width:2.2em;height:1.4em;border-radius:.15em;background:#F0E9E4;border:1px solid rgba(42,14,28,.12);
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:.4em;
  letter-spacing:.06em;color:var(--mute);font-weight:700}

/* ---------- сторінка товару ---------- */
.fl-crumbs{font-size:.48em;letter-spacing:.06em;color:var(--mute);padding:1.4em 1.1em .6em}
.fl-crumbs a{color:var(--rose)}
.fl-prod{display:grid;grid-template-columns:1.05fr 1fr;gap:1.3em;padding:.4em 1.1em 1.6em}
.fl-prod .fl-img{aspect-ratio:3/4;height:auto;border-radius:.4em}
.fl-prod h1{font-family:var(--font-shop);font-size:2em;font-weight:600;line-height:1.05;margin:.15em 0 .5em}
.fl-prod .price{display:flex;align-items:baseline;gap:.5em;font-size:1.05em;margin-bottom:.7em}
.fl-prod .price b{color:var(--rose)}
.fl-prod .price s{opacity:.4;font-size:.7em}
.fl-prod p{font-size:.54em;line-height:1.75;color:var(--mute);margin-bottom:.9em}
.fl-sizes{display:flex;gap:.4em;margin-bottom:1em}
.fl-sizes span{font-size:.48em;padding:.55em .9em;border:1px solid rgba(42,14,28,.22);border-radius:99px}
.fl-sizes span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.fl-note{display:flex;gap:.5em;align-items:center;font-size:.46em;color:var(--leaf);margin-top:.8em;letter-spacing:.04em}
.fl-thumbs{display:flex;gap:.35em;margin-top:.4em}
/* min-width:0 + width:100% — без них flex-елемент не стискається нижче
   власної ширини картинки (140px), і ряд мініатюр розпирав сторінку */
.fl-thumbs img{flex:1;min-width:0;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:.25em;
  outline:1.5px solid transparent;outline-offset:-1.5px;transition:outline-color .2s}
.fl-thumbs img.on{outline-color:var(--rose)}

/* ---------- курсор магазину ---------- */
.fl-cur{position:absolute;z-index:9;left:0;top:0;width:1.5em;height:1.5em;margin:-.75em 0 0 -.75em;
  border-radius:50%;border:1px solid var(--rose);pointer-events:none;opacity:0;
  display:flex;align-items:center;justify-content:center;color:var(--rose);
  transition:opacity .18s,scale .18s var(--ease),background-color .18s}
.fl-cur::after{content:"✿";font-size:.5em;line-height:1}
.fl-cur.vis{opacity:1}
.fl-cur.hot{scale:1.8;background:rgba(224,43,99,.16)}
.fl-cur.tap{scale:.85}

.fl-toast{position:absolute;z-index:8;left:50%;bottom:1em;translate:-50% 1.6em;opacity:0;pointer-events:none;
  background:var(--ink);color:#fff;font-size:.52em;padding:.65em 1.2em;border-radius:99px;
  transition:opacity .28s,translate .28s var(--ease);white-space:nowrap;
  box-shadow:0 .5em 1.2em -.4em rgba(42,14,28,.6)}
.fl-toast.on{opacity:1;translate:-50% 0}

.fl-hint{position:absolute;z-index:7;right:.7em;bottom:.7em;pointer-events:none;font-size:.46em;letter-spacing:.09em;
  text-transform:uppercase;background:rgba(42,14,28,.85);color:#FFD9E6;padding:.5em .85em;border-radius:99px;
  opacity:clamp(0,calc((var(--s3,0) - .3) * 3),1);transition:opacity .3s}
.fl.touched .fl-hint{opacity:0}

/* 02 — Floritta Partner: додаток продавця того самого магазину, що в ноутбуці.
   Вміст замовлення живий: buildPhoneOrder() у main.js кладе сюди кошик
   відвідувача або останній відкритий букет. Пуш і картка їдуть від --s2,
   кур'єр по мапі та «доставлено» — від --s3, тому сценарій скраблиться
   тим самим двигуном, що й решта стендів. */
.mapp{position:absolute;inset:0;background:#F4F6F3;color:#22302A;display:flex;flex-direction:column;
  padding:2.5em .55em .45em}
.m-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 .2em .4em}
.m-head b{font-size:.54em;letter-spacing:.14em;color:#1E4D3F}
.m-head span{font-size:.5em;color:#7C8880}

.m-push{position:absolute;left:.5em;right:.5em;top:2.3em;z-index:6;
  background:rgba(255,255,255,.97);border-radius:.7em;padding:.55em .65em;
  display:flex;gap:.55em;align-items:center;box-shadow:0 .7em 1.6em -.7em rgba(20,30,25,.45);
  --k:clamp(0,calc((var(--s2,0) - .05) * 9),1);
  --out:clamp(0,calc((var(--s2,0) - .55) * 7),1);
  opacity:calc(var(--k) * (1 - var(--out)));
  transform:translateY(calc((1 - var(--k)) * -2.6em - var(--out) * 2.6em))}
.m-push .ic{width:1.6em;height:1.6em;border-radius:.45em;flex:none;
  background:linear-gradient(140deg,#E02B63,#8E0F3C);color:#fff;display:grid;place-items:center;font-size:.85em}
.m-push .tx{min-width:0}
.m-push b{display:block;font-size:.6em}
.m-push span{display:block;font-size:.53em;color:#66736C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.m-card{background:#fff;border-radius:.75em;padding:.55em .6em;box-shadow:0 .5em 1.3em -.8em rgba(20,30,25,.4);
  --k:clamp(0,calc((var(--s2,0) - .22) * 6),1);
  opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 1.4em))}
.m-ch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5em}
.m-ch b{font-size:.6em}
.m-ch span{font-size:.48em;color:#E02B63;font-family:var(--font-mono)}
.m-items{display:flex;flex-direction:column;gap:.4em}
.m-it{display:flex;align-items:center;gap:.5em;
  --k:clamp(0,calc((var(--s2,0) - .3 - var(--d,0)) * 7),1);
  opacity:var(--k);transform:translateX(calc((1 - var(--k)) * .9em))}
.m-it img{width:1.9em;height:1.9em;border-radius:.4em;object-fit:cover;flex:none}
.m-it .nm{flex:1;min-width:0;font-size:.55em;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m-it .qp{font-size:.55em;font-family:var(--font-mono);color:#41504A;white-space:nowrap}
.m-total{display:flex;justify-content:space-between;border-top:1px dashed #D8DFD9;margin-top:.55em;padding-top:.5em}
.m-total span{font-size:.55em;color:#66736C}
.m-total b{font-size:.66em;color:#E02B63}

/* кнопка «прийняти»: сама стискається і стає зеленою «Прийнято ✓» */
.m-accept{position:relative;margin-top:.6em;border-radius:99px;text-align:center;padding:.62em 0;overflow:hidden;
  --p:clamp(0,calc((var(--s2,0) - .62) * 8),1);
  background:color-mix(in srgb,#1E4D3F calc(var(--p) * 100%),#22302A);
  transform:scale(calc(1 - .05 * clamp(0,calc((var(--s2,0) - .58) * 16),1) * (1 - var(--p))))}
.m-accept span{display:block;font-size:.55em;color:#fff;letter-spacing:.05em}
.m-accept .a2{position:absolute;inset:0;display:grid;place-items:center;opacity:var(--p)}
.m-accept .a1{opacity:calc(1 - var(--p))}

.m-status{display:flex;gap:.35em;margin:.45em 0 .4em}
.m-status .st{flex:1;display:flex;flex-direction:column;gap:.3em;align-items:stretch;text-align:center}
.m-status .st i{height:.28em;border-radius:99px;background:#DDE3DD;overflow:hidden;position:relative;display:block}
.m-status .st i::after{content:"";position:absolute;inset:0;background:#1E4D3F;border-radius:inherit;
  transform-origin:0 50%;transform:scaleX(var(--f,0))}
.m-status .st span{font-size:.43em;color:#66736C;white-space:nowrap}
.m-status .k1 i::after{--f:clamp(0,calc((var(--s2,0) - .72) * 5),1)}
.m-status .k2 i::after{--f:clamp(0,calc((var(--s3,0) - .16) * 4),1)}
.m-status .k3 i::after{--f:clamp(0,calc((var(--s3,0) - .82) * 9),1)}

/* мапа в стилі Google, портретна (viewBox 200×250 ≈ пропорції контейнера,
   тому спотворення розтягування ≤5%): річка з мостом, кільцева розв'язка,
   парк зі ставком і деревами, жовта магістраль, підписи.
   Рух НЕрівномірний: --gof (0..100) — кусочно-лінійна функція від --go
   з двома «світлофорами»: доїхав до перехрестя → постояв → рушив →
   постояв перед кільцевою → фінальний ривок. Лінія маршруту і фургончик
   сидять на одному --gof, тому розійтися не можуть. */
.m-map{position:relative;flex:1;min-height:6.4em;border-radius:.7em;overflow:hidden;background:#EDEAE2;
  --k:clamp(0,calc((var(--s2,0) - .78) * 6),1);opacity:var(--k);
  --go:clamp(0,calc((var(--s3,0) - .14) / .72),1);
  --gof:calc(
     43 * clamp(0,calc(var(--go) / .3),1)
   + 14 * clamp(0,calc((var(--go) - .42) / .1),1)
   + 43 * clamp(0,calc((var(--go) - .62) / .38),1))}
.m-map svg{position:absolute;inset:0;width:100%;height:100%}
.gm-land{fill:#EDEAE2}
.gm-river{fill:#A9D3E6}
.gm-park{fill:#C9E6C9}
.gm-pond{fill:#A9D3E6}
.gm-tree circle{fill:#8FC48D}
.gm-bld{fill:#E3E0D7}
.gm-rd-c{fill:none;stroke:#D8D4C9;stroke-width:6;stroke-linecap:round}
.gm-rd{fill:none;stroke:#fff;stroke-width:4.4;stroke-linecap:round}
.gm-art{fill:none;stroke:#FBE7A3;stroke-width:4.4}
.gm-rab-c{fill:none;stroke:#D8D4C9;stroke-width:6}
.gm-rab{fill:none;stroke:#fff;stroke-width:4.4}
.gm-rab-i{fill:#C9E6C9;stroke:#D8D4C9;stroke-width:1}
.gm-lbl{fill:#9AA0A6;font-size:5.4px;font-family:var(--font-body);letter-spacing:.2px}
.gm-lbl.riv{fill:#5D93AC;font-style:italic;font-size:4.8px}
.mm-rc{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--gof) / 100)}
.mm-r{fill:none;stroke:#4285F4;stroke-width:3;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--gof) / 100)}
.gm-pin path{fill:#EA4335}
.gm-pin circle{fill:#A52714}
/* фургончик: ніс дивиться по ходу (offset-rotate:auto), на паузах
   далі похитується і пихкає — стоїть на світлофорі, а не завис */
.mm-car{offset-path:path("M10 204 L88 204 Q96 204 96 196 L96 110 A14 14 0 0 0 110 96 L148 96 Q156 96 156 88 L156 44 Q156 36 164 36 L172 36");
  offset-distance:calc(var(--gof) * 1%);offset-rotate:auto}
.mm-car .bob{transform-box:fill-box;transform-origin:center}
.puff{fill:#C9CDD1;opacity:0}
.puff.p2{fill:#D8DCDF}
@media (prefers-reduced-motion:no-preference){
  .mm-car .bob{animation:carWag .7s ease-in-out infinite}
  .puff{animation:puffout .9s ease-out infinite}
  .puff.p2{animation-delay:.42s}
}
@keyframes carWag{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
@keyframes puffout{
  0%{opacity:.55;transform:translate(0,0) scale(.6)}
  100%{opacity:0;transform:translate(-7px,-2px) scale(1.5)}
}
@supports not (offset-path:path("M0 0 L1 1")){.mm-car{display:none}}

.m-done{position:absolute;left:11%;right:11%;bottom:8%;z-index:7;
  background:rgba(255,255,255,.97);border-radius:.8em;padding:.6em .8em;
  display:flex;gap:.6em;align-items:center;box-shadow:0 .8em 2em -.8em rgba(20,30,25,.5);
  --k:clamp(0,calc((var(--s3,0) - .86) * 9),1);
  opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 1em)) scale(calc(.94 + var(--k) * .06))}
.m-done i{width:1.7em;height:1.7em;border-radius:50%;background:#1E4D3F;color:#fff;
  display:grid;place-items:center;font-style:normal;font-size:.85em;flex:none}
.m-done b{display:block;font-size:.6em}
.m-done span{display:block;font-size:.5em;color:#66736C}

/* примітка у копі стенда: «в замовленні — ваші дії з ноутбука вище» */
.bindnote{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--pine);margin-top:10px}
.bindnote[hidden]{display:none}

/* компактний мобільний список — лишився тільки в прев'ю портфоліо (Kvit Delivery) */
.app{position:absolute;inset:0;background:#0E1213;display:flex;flex-direction:column;color:#E9EBE7}
.app-top{padding:1.2em 1em .6em;flex:none}
.app-top .hi{font-size:.7em;color:#7E8A86;letter-spacing:.05em}
.app-top h4{font-size:1.35em;margin:.15em 0 0;font-family:var(--font-display);letter-spacing:-.03em}
.app-list{flex:1;padding:.6em 1em;display:flex;flex-direction:column;gap:.5em;overflow:hidden}
.app-row{display:flex;align-items:center;gap:.6em;background:#161B1D;border-radius:.6em;padding:.6em}
.app-row .av{width:1.9em;height:1.9em;border-radius:.45em;background:linear-gradient(140deg,#1E4D3F,#0F2C24);
  flex:none;display:grid;place-items:center;font-size:.6em;color:#9FD3BF;font-weight:600}
.app-row .tt{flex:1}
.app-row .tt b{display:block;font-size:.68em;font-weight:600}
.app-row .tt span{font-size:.58em;color:#7E8A86}
.app-row .amt{font-family:var(--font-mono);font-size:.62em;color:#9FD3BF}

/* 03 — кіно на три сцени (11.5 с): реальний сайт SEALMARKET гортається →
   свайп у його ж адмінку, де курсор-оператор відкриває замовлення і
   відвантажує його → свайп у аналітику складу, де клік по донату
   категорій висуває таблицю топів.
   Уся хореографія — фази на CSS-змінних; курсор їде між п'ятьма станціями
   сумою відрізків (--m1..--m5), кліки — дзвоноподібні пульси --k1..--k3.
   ЦЕЙ ФАЙЛ — ДЖЕРЕЛО ПРАВДИ для блоку .cx (копія лежить у style.css). */
.cx{position:absolute;inset:0;background:#0E1113;overflow:hidden;font-family:var(--font-body);
  --cxa:clamp(0,calc(var(--s2,0) / .72),1);
  --tab:clamp(0,calc((var(--s2,0) - .74) / .06),1);
  --cxb:min(clamp(0,calc((var(--s2,0) - .8) / .07),1),clamp(0,calc((.98 - var(--s2,0)) / .05),1));
  --m1:clamp(0,calc(var(--s3,0) / .05),1);
  --k1:min(clamp(0,calc((var(--s3,0) - .05) * 30),1),clamp(0,calc((.095 - var(--s3,0)) * 30),1));
  --dr:clamp(0,calc((var(--s3,0) - .065) / .05),1);
  --m2:clamp(0,calc((var(--s3,0) - .14) / .045),1);
  --k2:min(clamp(0,calc((var(--s3,0) - .19) * 30),1),clamp(0,calc((.235 - var(--s3,0)) * 30),1));
  --fbtn:clamp(0,calc((var(--s3,0) - .195) * 10),1);
  --drc:clamp(0,calc((var(--s3,0) - .26) / .045),1);
  --m3:clamp(0,calc((var(--s3,0) - .26) / .06),1);
  --fl2:clamp(0,calc((var(--s3,0) - .29) * 10),1);
  --tac:clamp(0,calc((var(--s3,0) - .34) / .05),1);
  --cxc:clamp(0,calc((var(--s3,0) - .4) / .42),1);
  --m4:clamp(0,calc((var(--s3,0) - .52) / .045),1);
  --k3:min(clamp(0,calc((var(--s3,0) - .57) * 30),1),clamp(0,calc((.615 - var(--s3,0)) * 30),1));
  --pn:clamp(0,calc((var(--s3,0) - .585) / .055),1);
  --m5:clamp(0,calc((var(--s3,0) - .74) / .06),1);
  --kk:calc(var(--k1) + var(--k2) + var(--k3))}
.cx-scene{position:absolute;inset:0;display:flex;flex-direction:column;background:#F6F8FB}
.cx-b{transform:translateX(calc((1 - var(--tab)) * 103%));box-shadow:-1.2em 0 2.4em rgba(10,14,18,.35)}
.cx-c{transform:translateX(calc((1 - var(--tac)) * 103%));box-shadow:-1.2em 0 2.4em rgba(10,14,18,.35)}

.cx-bar{flex:none;display:flex;align-items:center;gap:.35em;padding:.5em .8em;background:#E7EBF1}
.cx-bar.dark{background:#1C2126}
.cx-bar i{width:.5em;height:.5em;border-radius:50%;background:#C3CAD3;display:block}
.cx-bar.dark i{background:#3A424A}
.cx-bar .url{flex:1;margin-left:.4em;background:#fff;border-radius:.35em;padding:.28em .7em;
  font-family:var(--font-mono);font-size:.6em;color:#5A6572;letter-spacing:.02em}
.cx-bar.dark .url{background:#12161A;color:#8B96A2}
.cx-tag{font-size:.52em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:#3B5BDB;color:#fff;border-radius:99px;padding:.3em .8em}

/* сцена А: скріншот сайту; контейнер має flex:1 + overflow:hidden, інакше
   img розтягує його до власної висоти й хід прокрутки стає нулем */
.cx-view{flex:1;position:relative;overflow:hidden;background:#fff;min-height:0}
.cx-view img{position:absolute;left:0;top:0;width:100%;height:auto;display:block;
  transform:translateY(calc(var(--cxa) * var(--travel,0px)))}

/* сцена Б: адмінка SEALMARKET */
.cx-admin{flex:1;display:flex;min-height:0;position:relative;overflow:hidden}
.cx-side{flex:none;width:9.5em;background:#fff;border-right:1px solid #E4E8EE;padding:.8em .7em;
  display:flex;flex-direction:column;gap:.15em}
.cx-side b{font-family:var(--font-body);font-weight:700;font-size:.62em;color:#1C2126;letter-spacing:.06em;margin-bottom:.9em}
.cx-side b em{font-style:normal;color:#3B5BDB}
.cx-side span{font-size:.56em;color:#5A6572;padding:.5em .6em;border-radius:.4em;white-space:nowrap}
.cx-side span.on{background:#EAF0FE;color:#3B5BDB;font-weight:600}
.cx-main{flex:1;display:flex;flex-direction:column;min-width:0}
.cx-kstrip{flex:none;display:flex;gap:1.2em;padding:.55em .9em;background:#fff;border-bottom:1px solid #E4E8EE;font-size:.55em;color:#5A6572}
.cx-kstrip b{color:#1C2126}
.cx-th,.cx-tr{display:grid;grid-template-columns:3em 1fr 2.2em 4.4em 5.6em;gap:.5em;align-items:center;padding:.42em .9em}
.cx-th{flex:none;font-family:var(--font-mono);font-size:.5em;letter-spacing:.1em;text-transform:uppercase;color:#8B96A2;background:#EFF2F7;padding-block:.7em}
.cx-list{flex:1;position:relative;overflow:hidden}
.cx-rows{position:absolute;inset:0 0 auto 0;transform:translateY(calc(var(--cxb) * var(--travel,0px)))}
.cx-tr{font-size:.6em;border-bottom:1px solid #EDF0F5;background:#fff}
.cx-tr .no{font-family:var(--font-mono);color:#8B96A2;font-size:.9em}
.cx-tr .cl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1C2126}
.cx-tr .sm{font-variant-numeric:tabular-nums;color:#1C2126;text-align:right}
.chip{position:relative;justify-self:start}
.chip b{display:inline-block;font-size:.78em;font-weight:600;border-radius:99px;padding:.3em .7em;white-space:nowrap}
.chip .n,.chip > b{background:#EAF0FE;color:#3B5BDB}
.chip.ok > b{background:#E3F4E8;color:#2E8B57}
.chip.pd > b{background:#E7F5F8;color:#1098AD}
.chip.pr > b{background:#FDF1DF;color:#C07E1D}
.chip .d{position:absolute;left:0;top:0;background:#E3F4E8;color:#2E8B57}
.cx-tr .chip.flb{--f:var(--fbtn)}
.cx-tr.fl2{--f:var(--fl2)}
.cx-tr .chip.flb .n,.cx-tr.fl2 .n{opacity:calc(1 - var(--f,0));transform:translateY(calc(var(--f,0) * .5em));display:inline-block}
.cx-tr .chip.flb .d,.cx-tr.fl2 .d{opacity:var(--f,0);transform:translateY(calc((1 - var(--f,0)) * -.5em)) scale(calc(.7 + var(--f,0) * .3))}
.cx-tr.fl2{background:color-mix(in srgb,#EBF7EF calc(var(--fl2,0) * 100%),#fff)}

.cx-dr{position:absolute;top:0;right:0;bottom:0;width:56%;z-index:4;background:#fff;
  border-left:1px solid #E4E8EE;box-shadow:-1em 0 2em rgba(16,22,30,.18);
  display:flex;flex-direction:column;padding:.8em .9em;gap:.5em;
  transform:translateX(calc((1 - var(--dr) + var(--drc)) * 106%))}
.cx-drh b{display:block;font-size:.66em;color:#1C2126}
.cx-drh span{display:block;font-size:.52em;color:#8B96A2;margin-top:.2em}
.cx-dri{flex:1;display:flex;flex-direction:column;gap:.35em;margin-top:.3em;min-height:0}
.cx-dri div{display:grid;grid-template-columns:1fr 3.6em 4.4em;gap:.5em;font-size:.56em;padding:.35em 0;border-bottom:1px dashed #EDF0F5}
.cx-dri span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1C2126}
.cx-dri em{font-style:normal;color:#8B96A2;text-align:right}
.cx-dri u{text-decoration:none;font-variant-numeric:tabular-nums;color:#1C2126;text-align:right}
.cx-drt{display:flex;justify-content:space-between;font-size:.62em;padding-top:.2em}
.cx-drt b{color:#3B5BDB}
.cx-drbtn{position:relative;flex:none;text-align:center;border-radius:.5em;padding:.6em 0;overflow:hidden;
  background:color-mix(in srgb,#2E8B57 calc(var(--fbtn,0) * 100%),#3B5BDB)}
.cx-drbtn b{display:block;font-size:.58em;color:#fff;font-weight:600;letter-spacing:.03em}
.cx-drbtn .a2{position:absolute;inset:0;display:grid;place-items:center;opacity:var(--fbtn,0)}
.cx-drbtn .a1{opacity:calc(1 - var(--fbtn,0))}

/* сцена В: аналітика */
.cx-an{flex:1;display:flex;flex-direction:column;padding:.7em .9em;gap:.55em;min-height:0}
.cx-anh{display:flex;align-items:baseline;justify-content:space-between}
.cx-anh h5{font-family:var(--font-display);font-weight:700;font-size:.74em;color:#1C2126;margin:0}
.cx-anh .live{display:flex;align-items:center;gap:.4em;font-size:.52em;color:#2E8B57;font-weight:600}
.cx-anh .live i{width:.55em;height:.55em;border-radius:50%;background:#2E8B57;box-shadow:0 0 0 .25em rgba(46,139,87,.16)}
.cx-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em}
.cx-kpi div{background:#fff;border-radius:.5em;padding:.5em .6em;border:1px solid #E4E8EE;
  opacity:clamp(0,calc((var(--cxc) - var(--d,0)) * 4),1);
  transform:translateY(calc((1 - clamp(0,calc((var(--cxc) - var(--d,0)) * 4),1)) * .8em))}
.cx-kpi b{display:block;font-family:var(--font-display);font-weight:700;font-size:.68em;color:#1C2126;white-space:nowrap}
.cx-kpi span{font-size:.48em;color:#8B96A2;letter-spacing:.04em;text-transform:uppercase}
.cx-charts{flex:1;display:grid;grid-template-columns:1.15fr 1fr;gap:.5em;min-height:0;position:relative;overflow:hidden}
.cx-panel{background:#fff;border:1px solid #E4E8EE;border-radius:.5em;padding:.55em .65em;display:flex;flex-direction:column;min-height:0}
.cx-panel .ph{font-size:.5em;letter-spacing:.08em;text-transform:uppercase;color:#8B96A2;margin-bottom:.4em}
.cx-bars{flex:1;display:flex;align-items:flex-end;gap:.3em}
.cx-bars i{flex:1;border-radius:.2em .2em 0 0;background:linear-gradient(180deg,#6E93F8,#3B5BDB);
  height:calc(var(--h,.5) * 100% * clamp(0,calc((var(--cxc) - var(--d,0)) * 2.4),1))}
.cx-dwrap{flex:1;display:flex;align-items:center;gap:.7em;min-height:0}
.cx-donut{position:relative;flex:none;width:5.2em;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from -90deg,
    #3B5BDB 0 calc(34% * var(--cxc,0)),
    #22B8CF calc(34% * var(--cxc,0)) calc(60% * var(--cxc,0)),
    #F59F00 calc(60% * var(--cxc,0)) calc(78% * var(--cxc,0)),
    #40C057 calc(78% * var(--cxc,0)) calc(90% * var(--cxc,0)),
    #9BA4B5 calc(90% * var(--cxc,0)) calc(100% * var(--cxc,0)),
    #EFF2F7 calc(100% * var(--cxc,0)));
  transform:scale(calc(1 + var(--k3) * .05))}
.cx-donut i{position:absolute;inset:18%;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal}
.cx-donut b{grid-area:1/1;text-align:center;font-family:var(--font-display);font-weight:700;font-size:.6em;color:#1C2126;line-height:1.15}
.cx-donut b u{display:block;text-decoration:none;font-family:var(--font-body);font-weight:400;font-size:.72em;color:#8B96A2;letter-spacing:.06em}
.cx-donut .c0{opacity:calc(1 - var(--pn,0))}
.cx-donut .c1{opacity:var(--pn,0);color:#3B5BDB}
.cx-leg{display:flex;flex-direction:column;gap:.3em;min-width:0}
.cx-leg span{display:flex;align-items:center;gap:.4em;font-size:.52em;color:#5A6572;white-space:nowrap}
.cx-leg span::before{content:"";width:.6em;height:.6em;border-radius:.2em;background:var(--c);flex:none}
.cx-pn{position:absolute;top:0;right:0;bottom:0;width:52%;z-index:4;background:#fff;
  border:1px solid #E4E8EE;border-radius:.5em;box-shadow:-.9em 0 1.8em rgba(16,22,30,.16);
  padding:.6em .7em;display:flex;flex-direction:column;gap:.35em;
  transform:translateX(calc((1 - var(--pn,0)) * 108%))}
.cx-pn .pnh{font-size:.56em;color:#1C2126;font-weight:700;margin-bottom:.2em}
.cx-pn .pnr{display:grid;grid-template-columns:1fr 3.4em 4.2em;gap:.4em;font-size:.53em;padding:.3em 0;border-bottom:1px dashed #EDF0F5;
  opacity:clamp(0,calc((var(--pn,0) - .3 - var(--d,0)) * 4),1);
  transform:translateX(calc((1 - clamp(0,calc((var(--pn,0) - .3 - var(--d,0)) * 4),1)) * 1em))}
.cx-pn .pnr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1C2126}
.cx-pn .pnr em{font-style:normal;color:#8B96A2;text-align:right}
.cx-pn .pnr u{text-decoration:none;color:#1C2126;text-align:right;font-variant-numeric:tabular-nums}
.cx-note{flex:none;display:flex;align-items:center;gap:.6em;background:#1C2126;color:#E9EDF2;border-radius:.55em;padding:.6em .9em;
  opacity:clamp(0,calc((var(--cxc) - .74) * 5),1);
  transform:translateY(calc((1 - clamp(0,calc((var(--cxc) - .74) * 5),1)) * .8em))}
.cx-note i{flex:none;width:.65em;height:.65em;border-radius:50%;background:#4ADE80;box-shadow:0 0 .5em rgba(74,222,128,.8)}
.cx-note span{font-size:.58em;line-height:1.4}

/* курсор-оператор: станції зняті з реальних прямокутників цілей */
.cx-cur{position:absolute;z-index:9;width:1em;height:1em;pointer-events:none;
  left:calc(68% - 13.4% * var(--m1) + 17.4% * var(--m2) - 34% * var(--m3) + 25% * var(--m4) - 33% * var(--m5));
  top:calc(22% + 9.5% * var(--m1) + 59.5% * var(--m2) - 31% * var(--m3) + 6% * var(--m4) + 14% * var(--m5));
  opacity:clamp(0,calc((var(--s2,0) - .975) * 40),1);
  transform:scale(calc(1 - var(--kk) * .22));
  background:#1C2126;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 .1em .2em rgba(0,0,0,.35));
  clip-path:polygon(0 0,0 76%,25% 58%,42% 96%,60% 88%,43% 51%,70% 45%)}
.cx-cur::after{content:"";position:absolute;left:10%;top:10%;width:2.4em;height:2.4em;translate:-50% -50%;
  border:.12em solid rgba(59,91,219,.85);border-radius:50%;
  scale:calc(.5 + var(--kk) * 1.6);opacity:calc(var(--kk) * (1 - var(--kk)) * 4)}

/* 03 CRM dashboard */
.crm{position:absolute;inset:0;background:#0B0E0F;display:grid;grid-template-columns:5.5em 1fr;color:#E9EBE7}
.crm-side{background:#0E1213;border-right:1px solid #1C2225;padding:.8em .6em;display:flex;flex-direction:column;gap:.45em}
.crm-side .lg{font-family:var(--font-mono);font-size:.55em;letter-spacing:.14em;color:#6FBFA2;margin-bottom:.5em}
.crm-side i{height:.55em;border-radius:99px;background:#1C2225;display:block}
.crm-side i.on{background:#1E4D3F}
.crm-main{padding:.8em .9em;display:flex;flex-direction:column;gap:.7em;overflow:hidden}
.crm-head{display:flex;align-items:center;gap:.5em}
.crm-head h4{font-size:.85em;font-family:var(--font-display);letter-spacing:-.02em;margin:0}
.crm-head .chips{margin-left:auto;display:flex;gap:.3em}
.crm-head .chips b{font-family:var(--font-mono);font-size:.5em;letter-spacing:.08em;padding:.35em .6em;border-radius:99px;border:1px solid #262D30;color:#7E8A86;font-weight:400}
.crm-head .chips b.on{background:#1E4D3F;border-color:#1E4D3F;color:#D7EDE4}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em}
.kpi{background:#0E1213;border:1px solid #1C2225;border-radius:.5em;padding:.55em .6em}
.kpi span{font-family:var(--font-mono);font-size:.5em;letter-spacing:.1em;color:#6B7470;text-transform:uppercase}
.kpi b{display:block;font-size:1.15em;font-family:var(--font-display);letter-spacing:-.03em;margin-top:.15em;font-variant-numeric:tabular-nums}
.kpi u{text-decoration:none;font-family:var(--font-mono);font-size:.5em;color:#6FBFA2}
.crm-charts{display:grid;grid-template-columns:1.35fr 1fr;gap:.5em;flex:none}
.panel{background:#0E1213;border:1px solid #1C2225;border-radius:.5em;padding:.6em}
.panel .ph{font-family:var(--font-mono);font-size:.5em;letter-spacing:.1em;color:#6B7470;text-transform:uppercase;margin-bottom:.5em}
.bars{display:flex;align-items:flex-end;gap:.32em;height:4.4em}
.bars i{flex:1;border-radius:.15em .15em 0 0;background:linear-gradient(180deg,#6FBFA2,#1E4D3F);
  height:calc(var(--h) * clamp(0,calc(var(--s2,0)*1.35),1) * 1%)}
.bars i:last-child{background:linear-gradient(180deg,#D9A340,#8A6414)}
.spark{height:4.4em;width:100%}
.spark path{fill:none;stroke:#6FBFA2;stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:200;stroke-dashoffset:calc(200 - clamp(0,calc(var(--s2,0)*1.3),1) * 200)}
.spark .fill{fill:url(#sg);stroke:none;opacity:clamp(0,calc((var(--s2,0)-.4)*2.6),1)}
.crm-table{background:#0E1213;border:1px solid #1C2225;border-radius:.5em;overflow:hidden;flex:1;min-height:0}
.crm-tr{display:grid;grid-template-columns:1.4fr 1fr .7em 1fr;gap:.5em;align-items:center;padding:.42em .6em;border-bottom:1px solid #161B1D;font-size:.6em;
  opacity:clamp(0,calc((var(--s3,0) - var(--d)) * 9),1);
  transform:translateX(calc((1 - clamp(0,calc((var(--s3,0) - var(--d)) * 9),1)) * -.8em))}
.crm-tr.hd{background:#111517;font-family:var(--font-mono);font-size:.5em;letter-spacing:.1em;color:#6B7470;text-transform:uppercase;opacity:1;transform:none}
.crm-tr .st{font-family:var(--font-mono);font-size:.85em;padding:.15em .5em;border-radius:99px;justify-self:start}
.st.a{background:#12291F;color:#6FBFA2}.st.b{background:#2A2313;color:#D9A340}.st.c{background:#2A1815;color:#E4654C}
.st.n{background:#3A1226;color:#FF9EC4}
/* верхній рядок — замовлення відвідувача: підсвічений і з живою крапкою */
.crm-tr.bindrow{background:#10201A;box-shadow:inset 2px 0 0 #6FBFA2}
.crm-tr.bindrow [data-adm-no]{color:#6FBFA2;font-family:var(--font-mono)}
.crm-toast{position:absolute;right:.8em;bottom:.8em;z-index:7;background:#12291F;border:1px solid #1E4D3F;border-radius:.5em;padding:.5em .7em;display:flex;gap:.5em;align-items:center;
  opacity:clamp(0,calc((var(--s3,0) - .55)*7),1);transform:translateY(calc((1 - clamp(0,calc((var(--s3,0) - .55)*7),1)) * 1em))}
.crm-toast b{font-size:.6em}.crm-toast span{font-size:.55em;color:#8FA69C}
.crm-toast .d{width:.4em;height:.4em;border-radius:50%;background:#6FBFA2}

/* 04 shop */
.shop{position:absolute;inset:0;background:#F1F2ED;color:#14181A;display:flex;flex-direction:column}
.shop-top{display:flex;align-items:center;gap:.7em;padding:.6em .9em;border-bottom:1px solid #DCDED5;flex:none}
.shop-top .lg{font-family:var(--font-display);font-size:.8em;font-weight:700;letter-spacing:-.02em}
.shop-top nav{display:flex;gap:.7em;margin-left:.6em}
.shop-top nav b{font-size:.58em;font-weight:500;color:#4E5754}
.shop-cart{margin-left:auto;position:relative;width:1.5em;height:1.5em;border:1px solid #C3C7BC;border-radius:.35em;display:grid;place-items:center;font-size:.9em}
.shop-cart u{position:absolute;top:-.35em;right:-.35em;background:#C1452E;color:#fff;font-family:var(--font-mono);font-size:.42em;min-width:1.5em;height:1.5em;border-radius:99px;display:grid;place-items:center;text-decoration:none;
  transform:scale(clamp(0,calc(var(--s3,0)*8),1))}
.shop-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:.55em;padding:.8em .9em;align-content:start}
.pcard{background:#fff;border:1px solid #DCDED5;border-radius:.5em;overflow:hidden;
  opacity:clamp(0,calc((var(--s2,0) - var(--d)) * 8),1);
  transform:translateY(calc((1 - clamp(0,calc((var(--s2,0) - var(--d)) * 8),1)) * .9em))}
.pcard .im{height:3.6em;background:linear-gradient(140deg,#E0E8E2,#C9CDC3);position:relative;overflow:hidden}
.pcard .im img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .im::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 40% 35%,rgba(255,255,255,.18),transparent)}
.pcard.hot .im{transform:scale(calc(1 + clamp(0,calc((var(--s3,0)-.1)*3),1)*.08));transition:none}
.pcard .in{padding:.45em .5em}
.pcard .in b{display:block;font-size:.58em;font-weight:600}
.pcard .in span{font-family:var(--font-mono);font-size:.55em;color:#1E4D3F}
.fly{position:absolute;z-index:8;background:#1E4D3F;color:#EDEEE9;font-family:var(--font-mono);font-size:.55em;padding:.3em .55em;border-radius:99px;
  left:22%;top:46%;
  opacity:clamp(0,calc((var(--s3,0)-.1)*8),1) ;
  transform:translate(calc(clamp(0,calc((var(--s3,0)-.15)*1.6),1) * 240%), calc(clamp(0,calc((var(--s3,0)-.15)*1.6),1) * -270%)) scale(calc(1 - clamp(0,calc((var(--s3,0)-.15)*1.6),1)*.4))}

/* 05 webinar */
.web{position:absolute;inset:0;background:#0B0E0F;display:grid;grid-template-columns:1fr 8.5em;color:#E9EBE7}
.web-main{padding:.7em;display:flex;flex-direction:column;gap:.5em;min-width:0}
.web-slide{flex:1;border-radius:.5em;background:linear-gradient(150deg,#16302A,#0E1213);border:1px solid #1C2225;position:relative;overflow:hidden;display:grid;place-items:center}
.web-slide .sl{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:1.2em;transition:none}
.web-slide .sl h4{font-family:var(--font-display);font-size:1.4em;letter-spacing:-.03em;margin:0 0 .3em}
.web-slide .sl p{font-size:.62em;color:#8FA69C}
.web-slide .sl1{opacity:calc(1 - clamp(0,calc((var(--s3,0)-.3)*6),1))}
.web-slide .sl2{opacity:clamp(0,calc((var(--s3,0)-.3)*6),1)}
.web-slide .badge{position:absolute;top:.6em;left:.6em;display:flex;gap:.35em;align-items:center;background:rgba(193,69,46,.16);border:1px solid #C1452E;border-radius:99px;padding:.2em .5em}
.web-slide .badge i{width:.32em;height:.32em;border-radius:50%;background:#E4654C}
.web-slide .badge b{font-family:var(--font-mono);font-size:.5em;letter-spacing:.12em}
.web-slide .cnt{position:absolute;top:.6em;right:.6em;font-family:var(--font-mono);font-size:.55em;color:#8FA69C;font-variant-numeric:tabular-nums}
.web-tiles{display:flex;gap:.4em;height:2.9em;flex:none}
.web-tile{flex:1;border-radius:.4em;background:linear-gradient(160deg,#1C2225,#0E1213);border:1px solid #1C2225;position:relative;
  opacity:clamp(0,calc((var(--s2,0) - var(--d)) * 9),1);transform:scale(calc(.9 + clamp(0,calc((var(--s2,0) - var(--d)) * 9),1)*.1))}
.web-tile b{position:absolute;left:.35em;bottom:.28em;font-size:.5em;color:#8FA69C}
.web-tile .hand{position:absolute;right:.3em;top:.25em;font-size:.6em;opacity:clamp(0,calc((var(--s3,0)-.5)*8),1)}
.web-tile.spk{border-color:#1E4D3F;box-shadow:0 0 0 1px #1E4D3F inset}
.web-chat{border-left:1px solid #1C2225;background:#0E1213;padding:.6em .55em;display:flex;flex-direction:column;gap:.35em;overflow:hidden}
.web-chat .ph{font-family:var(--font-mono);font-size:.5em;letter-spacing:.1em;color:#6B7470;text-transform:uppercase;margin-bottom:.2em}
.msg{font-size:.55em;line-height:1.35;
  opacity:clamp(0,calc((var(--s2,0) - var(--d)) * 10),1);
  transform:translateY(calc((1 - clamp(0,calc((var(--s2,0) - var(--d)) * 10),1)) * .5em))}
.msg b{color:#6FBFA2;font-weight:600}
.msg.me b{color:#D9A340}

/* 06 bots — телефон + термінал */
.botstage{position:relative;width:100%;display:flex;align-items:center;justify-content:center}
/* min-width:0 — без нього flex-елемент не стискається нижче min-content,
   а рядки логів мають white-space:nowrap і розпирали стенд на мобільному */
.term{flex:1 1 auto;min-width:0;max-width:560px;border-radius:8px;overflow:hidden;border:1px solid var(--rule);background:#0B0E0F;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);position:relative;z-index:1}
.term-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#12171A;border-bottom:1px solid #1C2225}
.term-bar i{width:8px;height:8px;border-radius:50%;background:#394245}
.term-bar span{font-family:var(--font-mono);font-size:10px;color:#6B7470;margin-left:8px;letter-spacing:.08em}
.term-body{padding:12px;font-family:var(--font-mono);font-size:11.5px;line-height:1.75;color:#8FA69C;min-height:230px}
.term-body div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:clamp(0,calc((var(--s2,0) - var(--d)) * 12),1)}
.term-body .ok{color:#6FBFA2}.term-body .wr{color:#D9A340}.term-body .mt{color:#4E5754}
.term-caret{display:inline-block;width:7px;height:12px;background:#6FBFA2;vertical-align:-2px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.botphone{flex:0 0 auto;width:clamp(150px,17vw,224px);margin-left:-6%;z-index:2;position:relative}
.botphone .phone{width:100%;transform:translateY(calc((1 - var(--s1,0)) * 30%)) rotate(calc((1 - var(--s1,0)) * 6deg))}
.tg{position:absolute;inset:0;background:#0E1213;display:flex;flex-direction:column;color:#E9EBE7}
.tg-top{flex:none;padding:2.3em .8em .55em;background:#161B1D;border-bottom:1px solid #262D30;display:flex;align-items:center;gap:.5em}
.tg-top .av{width:1.6em;height:1.6em;border-radius:50%;background:linear-gradient(140deg,#2AABEE,#1E7BB0);display:grid;place-items:center;font-size:.6em;font-weight:700;color:#fff}
.tg-top b{font-size:.68em;display:block}
.tg-top span{font-size:.52em;color:#6FBFA2}
.tg-body{flex:1;padding:.6em;display:flex;flex-direction:column;gap:.4em;overflow:hidden}
.bub{max-width:82%;font-size:.6em;line-height:1.4;padding:.5em .65em;border-radius:.8em;
  opacity:clamp(0,calc((var(--s2,0) - var(--d)) * 10),1);
  transform:translateY(calc((1 - clamp(0,calc((var(--s2,0) - var(--d)) * 10),1)) * .6em))}
.bub.in{background:#1C2225;border-bottom-left-radius:.2em;align-self:flex-start}
.bub.out{background:#1E4D3F;border-bottom-right-radius:.2em;align-self:flex-end}
.tg-kb{display:flex;flex-wrap:wrap;gap:.3em;margin-top:.15em;
  opacity:clamp(0,calc((var(--s3,0) - .1) * 7),1)}
.tg-kb b{flex:1;text-align:center;font-size:.55em;font-weight:500;background:#1C2225;border:1px solid #2B3234;border-radius:.4em;padding:.4em .3em}
.tg-kb b.hi{background:#1E4D3F;border-color:#2F6E5A}
.tg-in{flex:none;display:flex;gap:.4em;align-items:center;padding:.5em .6em 1em;border-top:1px solid #1C2225;background:#0B0E0F}
.tg-in .f{flex:1;height:1.5em;border-radius:99px;background:#161B1D}
.tg-in .s{width:1.5em;height:1.5em;border-radius:50%;background:#1E4D3F}

/* ============================================================
   04 — ШІ-ДІАЛОГ ОФОРМЛЕННЯ. Світла м'ятна смуга. Зліва чат: «Хочу букет
   дівчині» → асистент уточнює колір/розмір → рекомендує три букети →
   клієнт тапає один → асистент оформлює. Праворуч у цей момент саме
   збирається замовлення: фото → ціна → доставка → оплата → ✓.
   Нескінченний CSS-цикл --T:14s, вікна елементів — у % від нього.
   ============================================================ */
.stage-ai .stage-in{overflow:hidden}
.aiw{position:relative;width:100%;max-width:660px;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(18px,3vw,34px);align-items:center;--T:14s}
/* --- чат --- */
.aiw-chat{background:var(--paper-hi);border:1px solid var(--rule);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 50px -30px rgba(20,24,26,.35);display:flex;flex-direction:column}
.aiw-chat .bar{display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid var(--rule);background:color-mix(in srgb,var(--paper) 55%,var(--paper-hi))}
.aiw-chat .orb{width:22px;height:22px;flex:none;border-radius:50%;background:conic-gradient(from 0deg,var(--pine),#B8801F,var(--pine));position:relative}
.aiw-chat .orb::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--paper-hi)}
@media (prefers-reduced-motion:no-preference){.aiw-chat .orb{animation:orbspin 4s linear infinite}}
@keyframes orbspin{to{rotate:360deg}}
.aiw-chat .bar b{display:block;font-size:11.5px}
.aiw-chat .bar span{display:block;font-size:9.5px;color:var(--ink-2)}
.aiw-chat .thread{padding:12px 11px 6px;display:flex;flex-direction:column;gap:7px;min-height:238px}
.aiw-chat .m{max-width:86%;padding:6px 10px;border-radius:12px;font-size:11px;line-height:1.45}
.aiw-chat .m.u{align-self:flex-end;background:var(--pine);color:#EAF3EE;border-bottom-right-radius:4px}
.aiw-chat .m.a{align-self:flex-start;background:#fff;border:1px solid var(--rule);border-bottom-left-radius:4px}
.aiw-chat .typ{align-self:flex-start;display:flex;gap:4px;padding:8px 11px;background:#fff;border:1px solid var(--rule);border-radius:12px;border-bottom-left-radius:4px;overflow:hidden}
.aiw-chat .typ i{width:5px;height:5px;border-radius:50%;background:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){
  .aiw-chat .typ i{animation:tdot 1s ease-in-out infinite}
  .aiw-chat .typ i:nth-child(2){animation-delay:.15s}.aiw-chat .typ i:nth-child(3){animation-delay:.3s}
}
@keyframes tdot{50%{transform:translateY(-3px);opacity:.5}}
/* рекомендації: три міні-картки, перша обирається */
.aiw-chat .recs{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;align-self:stretch}
.aiw-chat .rc{position:relative;background:#fff;border:1.5px solid transparent;outline:1px solid var(--rule);border-radius:9px;overflow:hidden;font-size:8.6px}
.aiw-chat .rc img{width:100%;aspect-ratio:4/3.4;object-fit:cover;display:block}
.aiw-chat .rc b{display:block;padding:3px 6px 0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aiw-chat .rc span{display:block;padding:0 6px 4px;color:var(--ink-2);font-family:var(--font-mono);font-size:8px}
.aiw-chat .rc u{position:absolute;right:4px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--pine);color:#fff;font-size:9px;line-height:14px;text-align:center;text-decoration:none;opacity:0}
.aiw-chat .inp{display:flex;align-items:center;margin:6px 11px 11px;background:#fff;border:1px solid var(--rule);border-radius:99px;padding:6px 12px}
.aiw-chat .inp span{font-size:10px;color:var(--ink-3)}
/* появи реплік */
.aiw-chat .b1{opacity:0;animation:aib1 var(--T) ease-out infinite}
.aiw-chat .b2{opacity:0;max-height:0;animation:aib2 var(--T) ease-out infinite}
.aiw-chat .b3{opacity:0;animation:aib3 var(--T) ease-out infinite}
.aiw-chat .b4{opacity:0;animation:aib4 var(--T) ease-out infinite}
.aiw-chat .b5{opacity:0;animation:aib5 var(--T) ease-out infinite}
.aiw-chat .b6{opacity:0;animation:aib6 var(--T) ease-out infinite}
.aiw-chat .b7{opacity:0;animation:aib7 var(--T) ease-out infinite}
.aiw-chat .rc1{animation:airc1 var(--T) cubic-bezier(.34,1.4,.5,1) infinite,aisel var(--T) linear infinite}
.aiw-chat .rc2{opacity:0;animation:airc2 var(--T) cubic-bezier(.34,1.4,.5,1) infinite}
.aiw-chat .rc3{opacity:0;animation:airc3 var(--T) cubic-bezier(.34,1.4,.5,1) infinite}
.aiw-chat .rc1 u{animation:aiselk var(--T) cubic-bezier(.34,1.5,.5,1) infinite}
/* палець-тап по першій картці */
.aiw-chat .tapring{position:absolute;left:12%;top:38%;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.4);border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);opacity:0;animation:aitap var(--T) ease-out infinite}
/* пакет чат → замовлення */
.aiw .pk{position:absolute;left:56%;top:52%;width:8px;height:8px;border-radius:50%;background:var(--pine);
  box-shadow:0 0 8px var(--pine);opacity:0;pointer-events:none;z-index:3}
.aiw .pk1{animation:aifly var(--T) ease-in-out infinite}
/* --- замовлення (прев'ю) --- */
.aiw-app{position:relative;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:12px;
  display:flex;flex-direction:column;gap:9px;box-shadow:0 24px 50px -30px rgba(20,24,26,.35)}
.aiw-app .ph{border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--paper)}
.aiw-app .ph img{width:100%;height:100%;object-fit:cover;display:block}
.aiw-app .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px}
.aiw-app .row b{font-weight:600}
.aiw-app .row em{font-style:normal;font-family:var(--font-mono);font-weight:700;color:#12A36F}
.aiw-app .row span{font-size:11px;color:var(--ink-2)}
.aiw-app .paybtn{position:relative;margin-top:2px;text-align:center;border-radius:99px;padding:9px 0;overflow:hidden;background:linear-gradient(140deg,#2FD69B,#12A36F);color:#fff;font-size:12px}
.aiw-app .paybtn b{display:block;font-weight:700}
.aiw-app .paybtn .t2{position:absolute;inset:0;display:grid;place-items:center}
.aiw-app .a1{opacity:0;animation:aish1 var(--T) ease-out infinite}
.aiw-app .a2{opacity:0;animation:aish2 var(--T) ease-out infinite}
.aiw-app .a3{opacity:0;animation:aish3 var(--T) ease-out infinite}
.aiw-app .a4{opacity:0}
.aiw-app .paybtn.a4{animation:aish4 var(--T) ease-out infinite,aipress var(--T) ease-out infinite}
.aiw-app .paybtn::before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,#FF6B8B,#FF3D63);animation:aipay var(--T) linear infinite}
.aiw-app .paybtn .t1{position:relative;animation:aipay var(--T) linear infinite}
.aiw-app .paybtn .t2{opacity:0;animation:aipaid var(--T) linear infinite}
.aiw-app .okring{position:absolute;left:50%;top:50%;translate:-50% -50%;width:54px;height:54px;border-radius:50%;
  border:3px solid #12A36F;opacity:0;pointer-events:none;animation:aiok var(--T) ease-out infinite}
@keyframes aib1{0%,4%{opacity:0;translate:0 8px}7%,93%{opacity:1;translate:0 0}97%,100%{opacity:0}}
@keyframes aib2{0%,8%{opacity:0;max-height:0}10%{opacity:1;max-height:26px}13%{opacity:1;max-height:26px}15%,100%{opacity:0;max-height:0}}
@keyframes aib3{0%,14%{opacity:0;translate:0 8px}17%,93%{opacity:1;translate:0 0}97%,100%{opacity:0}}
@keyframes aib4{0%,20%{opacity:0;translate:0 8px}23%,93%{opacity:1;translate:0 0}97%,100%{opacity:0}}
@keyframes aib5{0%,26%{opacity:0;translate:0 8px}29%,93%{opacity:1;translate:0 0}97%,100%{opacity:0}}
@keyframes aib6{0%,27%{opacity:0;translate:0 8px}30%,93%{opacity:1;translate:0 0}97%,100%{opacity:0}}
@keyframes airc1{0%,29%{opacity:0;scale:.85}32%,93%{opacity:1;scale:1}97%,100%{opacity:0}}
@keyframes airc2{0%,32%{opacity:0;scale:.85}35%,93%{opacity:1;scale:1}97%,100%{opacity:0}}
@keyframes airc3{0%,35%{opacity:0;scale:.85}38%,93%{opacity:1;scale:1}97%,100%{opacity:0}}
@keyframes aitap{0%,41%{opacity:0;scale:.4}42.5%{opacity:1;scale:1}44%{opacity:0;scale:1.6}45%,100%{opacity:0}}
@keyframes aisel{0%,44%{border-color:transparent;box-shadow:none}46%,93%{border-color:var(--pine);box-shadow:0 0 0 3px color-mix(in srgb,var(--pine) 22%,transparent)}97%,100%{border-color:transparent;box-shadow:none}}
@keyframes aiselk{0%,44%{opacity:0;scale:.4}47%,93%{opacity:1;scale:1}97%,100%{opacity:0}}
@keyframes aib7{0%,50%{opacity:0;translate:0 8px}53%,93%{opacity:1;translate:0 0}97%,100%{opacity:0}}
@keyframes aifly{0%,52%{opacity:0;translate:0 0}53%{opacity:1}56%{opacity:0;translate:230% -20px}57%,100%{opacity:0}}
@keyframes aish1{0%,57%{opacity:0;translate:0 8px}60%,93%{opacity:1;translate:0 0}97%,100%{opacity:0}}
@keyframes aish2{0%,61%{opacity:0;translate:0 8px}64%,93%{opacity:1;translate:0 0}97%,100%{opacity:0}}
@keyframes aish3{0%,65%{opacity:0;translate:0 8px}68%,93%{opacity:1;translate:0 0}97%,100%{opacity:0}}
@keyframes aish4{0%,69%{opacity:0;translate:0 8px}72%,93%{opacity:1;translate:0 0}97%,100%{opacity:0}}
@keyframes aipay{0%,78%{opacity:1}81%,100%{opacity:0}}
@keyframes aipaid{0%,78%{opacity:0}81%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes aipress{0%,73%{scale:1}75%{scale:.94}77%,100%{scale:1}}
@keyframes aiok{0%,79%{opacity:0;scale:.4}82%{opacity:1;scale:1}88%,100%{opacity:0;scale:1.5}}

@media (prefers-reduced-motion:reduce){.aiw *{animation:none!important}
  .aiw-chat .b1,.aiw-chat .b3,.aiw-chat .b4,.aiw-chat .b5,.aiw-chat .b6,.aiw-chat .b7,.aiw-chat .rc2,.aiw-chat .rc3,.aiw-app .a1,.aiw-app .a2,.aiw-app .a3,.aiw-app .a4{opacity:1}
  .aiw-app .paybtn::before,.aiw-app .paybtn .t1{opacity:0}.aiw-app .paybtn .t2{opacity:1}.aiw-chat .rc1 u{opacity:1}}
@media (max-width:720px){.aiw{grid-template-columns:1fr;max-width:420px}.aiw .pk{display:none}}

/* ============================================================
   05 — TELEGRAM. Вікно Telegram Desktop: зліва список чатів (папки,
   аватарки, непрочитані), справа бот-бесіда барбершопу з інлайн-
   клавіатурою та інвойсом Telegram Payments. Поверх вікна — картка
   каналу з реакціями і воронка розсилки. Розкриття — від --s2 двигуна
   (елементи мають --d = поріг появи), інвойс «оплачується» на --s2≈.8.
   ============================================================ */
.stage-tg .stage-in{overflow:hidden}
.stage-tg-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center}
.stage-tg .stage-copy{max-width:520px}
@media (max-width:1080px){.stage-tg-in{grid-template-columns:1fr;gap:26px}}
.stage-tg .stage-vis{width:100%}
.tgw{position:relative;width:100%;max-width:660px;--ap:var(--s2,0)}
/* --- вікно --- */
.tgd{display:grid;grid-template-columns:.9fr 1.25fr;min-height:340px;border-radius:16px;overflow:hidden;
  background:#fff;border:1px solid var(--rule);box-shadow:0 30px 70px -35px rgba(20,24,26,.45);
  font-size:11.5px;color:#14181A}
/* список чатів */
.tgd-list{border-right:1px solid #EAEDEF;background:#FBFCFD;display:flex;flex-direction:column;min-width:0}
.tgd-search{display:flex;align-items:center;gap:7px;margin:9px 10px 7px;background:#EFF3F5;border-radius:99px;padding:6px 11px;color:#8A9AA5}
.tgd-search svg{width:12px;height:12px}
.tgd-folders{display:flex;gap:4px;padding:0 10px 8px;border-bottom:1px solid #EAEDEF}
.tgd-folders span{font-size:10px;color:#8A9AA5;padding:3px 8px;border-radius:99px;white-space:nowrap}
.tgd-folders .on{background:#E7F3FB;color:#2AABEE;font-weight:600}
.tgd-list .tr{display:flex;align-items:center;gap:8px;padding:7px 10px;min-width:0;
  --k:clamp(0,calc((var(--ap) - var(--d,0)) * 10),1);opacity:var(--k);translate:calc((1 - var(--k)) * -10px) 0}
.tgd-list .tr.on{background:#2AABEE;color:#fff}
.tgd-list .tr.on span,.tgd-list .tr.on u{color:rgba(255,255,255,.75)}
.tgd-list .tr i{width:26px;height:26px;flex:none;border-radius:50%;background:var(--c,#5A8DEE);color:#fff;font-style:normal;font-weight:700;font-size:11px;display:grid;place-items:center}
.tgd-list .tr div{flex:1;min-width:0}
.tgd-list .tr b{display:block;font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgd-list .tr span{display:block;font-size:9.8px;color:#8A9AA5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgd-list .tr u{font-size:9px;color:#8A9AA5;text-decoration:none;flex:none}
.tgd-list .tr em{flex:none;font-style:normal;min-width:15px;height:15px;border-radius:99px;background:#2AABEE;color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center;padding:0 4px}
/* чат */
.tgd-chat{display:flex;flex-direction:column;min-width:0;background:#EFF3F5 url() center/cover}
.tgd-top{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;border-bottom:1px solid #EAEDEF}
.tgd-top i{width:26px;height:26px;border-radius:50%;background:#5A8DEE;color:#fff;font-style:normal;font-weight:700;font-size:11px;display:grid;place-items:center}
.tgd-top b{display:block;font-size:11px}
.tgd-top span{display:block;font-size:9.5px;color:#2AABEE}
.tgd-top .dots{margin-left:auto;color:#8A9AA5;font-size:14px}
.tgd-body{flex:1;padding:10px;display:flex;flex-direction:column;gap:6px;min-height:0}
.bub{max-width:82%;padding:6px 10px;border-radius:12px;font-size:10.5px;line-height:1.4;position:relative;
  --k:clamp(0,calc((var(--ap) - var(--d,0)) * 9),1);opacity:var(--k);translate:0 calc((1 - var(--k)) * 8px)}
.bub.in{align-self:flex-start;background:#fff;border-bottom-left-radius:4px;box-shadow:0 1px 1px rgba(20,24,26,.08)}
.bub.outb{align-self:flex-end;background:#EFFDDE;border-bottom-right-radius:4px;box-shadow:0 1px 1px rgba(20,24,26,.08)}
.bub .ck{font-weight:400;font-size:9px;color:#4FAE4E;margin-left:3px}
.tg-kb{display:flex;gap:5px;align-self:flex-start;
  --k:clamp(0,calc((var(--ap) - var(--d,0)) * 9),1);opacity:var(--k);translate:0 calc((1 - var(--k)) * 8px)}
.tg-kb b{background:#fff;border:1px solid #D6E5EE;color:#2AABEE;border-radius:8px;padding:5px 10px;font-size:10px;font-weight:600}
.tg-kb .hi{background:#2AABEE;border-color:#2AABEE;color:#fff}
/* інвойс */
.inv{align-self:flex-end;width:86%;background:#fff;border-radius:12px;border-bottom-right-radius:4px;overflow:hidden;
  box-shadow:0 6px 16px -8px rgba(20,24,26,.25);
  --k:clamp(0,calc((var(--ap) - var(--d,0)) * 9),1);opacity:var(--k);translate:0 calc((1 - var(--k)) * 8px);
  --p:clamp(0,calc((var(--ap) - .8) * 12),1)}
.inv-h{display:flex;gap:8px;align-items:center;padding:8px 10px}
.inv-h svg{width:22px;height:22px;color:#2AABEE;flex:none}
.inv-h b{display:block;font-size:10.5px}
.inv-h span{display:block;font-size:9.5px;color:#8A9AA5}
.inv-pay{position:relative;text-align:center;background:#2AABEE;color:#fff;padding:7px 0;font-size:10.5px;font-weight:700}
.inv-pay .p1{opacity:calc(1 - var(--p))}
.inv-pay .p2{position:absolute;inset:0;display:grid;place-items:center;opacity:var(--p);background:#4FAE4E}
.tgd-in{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;border-top:1px solid #EAEDEF;color:#8A9AA5}
.tgd-in span{flex:1;font-size:10.5px}
.tgd-in svg{width:15px;height:15px;color:#8A9AA5}
/* --- плаваючі картки --- */
.tgc{position:absolute;background:#fff;border:1px solid var(--rule);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 55px -28px rgba(20,24,26,.5);font-size:11px;color:#14181A;
  --k:clamp(0,calc((var(--ap) - var(--d,0)) * 8),1);opacity:var(--k);translate:0 calc((1 - var(--k)) * 14px)}
.tgc.post{right:-4%;top:-7%;width:min(46%,240px);padding:10px 12px 9px}
.tgc-h{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.tgc-h i{width:26px;height:26px;flex:none;border-radius:50%;background:#7BC862;color:#fff;font-style:normal;font-weight:700;display:grid;place-items:center;font-size:11px}
.tgc-h b{display:flex;align-items:center;gap:4px;font-size:11px}
.tgc-h .vf{width:12px;height:12px}
.tgc-h span{display:block;font-size:9.5px;color:#8A9AA5}
.tgc.post p{margin:0 0 8px;font-size:10.5px;line-height:1.45}
.tgc-btn{text-align:center;border:1px solid #2AABEE;color:#2AABEE;border-radius:8px;padding:5px 0;font-size:10px;font-weight:700;margin-bottom:8px}
.tgc-meta{display:flex;gap:8px;font-size:9.5px;color:#8A9AA5}
.tgc-meta .rx{background:#E7F3FB;color:#2AABEE;border-radius:99px;padding:2px 7px;font-weight:600}
.tgc.fun{left:-5%;bottom:-9%;width:min(52%,260px);padding:11px 13px}
.tgc .fh{display:block;font-size:11px;font-weight:700;margin-bottom:8px}
.fr{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:7px;margin-bottom:6px;font-size:9.5px;color:#5C6A73}
.fr i{display:block;height:8px;border-radius:99px;background:#EFF3F5;overflow:hidden;position:relative}
.fr i::after{content:"";position:absolute;inset:0;border-radius:99px;background:#2AABEE;transform-origin:0 50%;
  transform:scaleX(calc(var(--w,1) * clamp(0,calc((var(--ap) - .5 - var(--d,0)) * 5),1)))}
.fr.pay i::after{background:#4FAE4E}
.fr em{font-style:normal;font-family:var(--font-mono);font-size:9px;color:#14181A;white-space:nowrap}
@media (max-width:720px){
  .tgd{grid-template-columns:1fr;min-height:0}
  .tgd-list{display:none}
  .tgc.post{right:0;top:-5%}
  .tgc.fun{left:0;bottom:-6%}
}

/* ============================================================
   06 — КОНВЕЄР ІНТЕГРАЦІЙ (запит-відповідь). Замовлення зліва шле
   запит: по дроту «тече струм» і летить крапка кольору сервісу; сервіс
   спалахує, обробляє і ВІДПОВІДАЄ — назад вертається кільце, струм
   тече у зворотний бік, і відповідь записується рядком у картку:
   ТТН від НП, фіскальний чек mono, рядок Sheets, репліка менеджера
   з Telegram. Наприкінці — «✓ готово». Цикл --T:13s. ============================================================ */
.stage-api .stage-in{overflow:hidden}
.stage-api-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center}
.stage-api .stage-copy{max-width:520px}
@media (max-width:1080px){.stage-api-in{grid-template-columns:1fr;gap:26px}}
.apf{width:100%;max-width:620px;display:flex;flex-direction:column;gap:14px;--T:13s}
.apf-canvas{position:relative;aspect-ratio:420/260;background:var(--paper-hi);border:1px solid var(--rule);border-radius:16px;
  box-shadow:0 26px 60px -35px rgba(20,24,26,.4)}
.apf-canvas>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* базовий дріт: малюється на старті циклу */
.apf-canvas .wr{fill:none;stroke:color-mix(in srgb,var(--pine) 26%,var(--rule));stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;
  animation:apfw var(--T) linear infinite}
@keyframes apfw{0%{stroke-dashoffset:1}5%,94%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
/* «струм»: пунктир біжить по дроту в бік передачі */
.apf-canvas .wf{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:7 10;opacity:0}
.apf-canvas .wf1{stroke:#DA291C;animation:apw1 var(--T) linear infinite}
.apf-canvas .wf2{stroke:#555C61;animation:apw2 var(--T) linear infinite}
.apf-canvas .wf3{stroke:#0F7A3B;animation:apw3 var(--T) linear infinite}
.apf-canvas .wf4{stroke:#26A5E4;animation:apw4 var(--T) linear infinite}
/* пакети: запит — крапка кольору сервісу; відповідь — біле кільце з обводкою */
.apf-canvas .pk{offset-path:var(--p);offset-rotate:0deg;offset-distance:0%;opacity:0}
.apf-canvas .p1{fill:#DA291C;filter:drop-shadow(0 0 4px #DA291C);animation:apo1 var(--T) ease-in-out infinite}
.apf-canvas .p2{fill:#1F2226;filter:drop-shadow(0 0 4px #555);animation:apo2 var(--T) ease-in-out infinite}
.apf-canvas .p3{fill:#0F7A3B;filter:drop-shadow(0 0 4px #0F7A3B);animation:apo3 var(--T) ease-in-out infinite}
.apf-canvas .p4{fill:#26A5E4;filter:drop-shadow(0 0 4px #26A5E4);animation:apo4 var(--T) ease-in-out infinite}
.apf-canvas .q1{fill:#fff;stroke:#DA291C;stroke-width:2.4;filter:drop-shadow(0 0 5px #DA291C);animation:apb1 var(--T) ease-in-out infinite}
.apf-canvas .q2{fill:#fff;stroke:#1F2226;stroke-width:2.4;filter:drop-shadow(0 0 5px #555);animation:apb2 var(--T) ease-in-out infinite}
.apf-canvas .q3{fill:#fff;stroke:#0F7A3B;stroke-width:2.4;filter:drop-shadow(0 0 5px #0F7A3B);animation:apb3 var(--T) ease-in-out infinite}
.apf-canvas .q4{fill:#fff;stroke:#26A5E4;stroke-width:2.4;filter:drop-shadow(0 0 5px #26A5E4);animation:apb4 var(--T) ease-in-out infinite}
/* --- вузли --- */
.apf .an{position:absolute;background:#fff;border:1.5px solid var(--rule);border-radius:12px;font-size:11px;color:#14181A}
.apf .src{left:2.8%;top:50%;translate:0 -50%;width:33%;padding:8px 10px 7px;animation:apfsrc var(--T) linear infinite}
@keyframes apfsrc{0%,2%{border-color:var(--rule)}5%{border-color:var(--pine);box-shadow:0 0 0 4px color-mix(in srgb,var(--pine) 16%,transparent)}9%,100%{border-color:var(--pine);box-shadow:none}}
.apf .src b{display:block;font-size:11.5px;font-weight:700}
.apf .src .sub{display:block;font-size:9px;color:var(--ink-2);font-family:var(--font-mono);margin-bottom:5px;padding-bottom:4px;border-bottom:1px dashed var(--rule)}
/* рядки-відповіді: висуваються по одному, як записи */
.apf .src .rl{display:flex;align-items:center;gap:5px;overflow:hidden;max-height:0;opacity:0}
.apf .src .rl i{width:5px;height:5px;flex:none;border-radius:50%}
.apf .src .rl span{font-size:8.6px;font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.apf .src .r1{animation:apr1 var(--T) ease-out infinite}.apf .src .r1 i{background:#DA291C}
.apf .src .r2{animation:apr2 var(--T) ease-out infinite}.apf .src .r2 i{background:#1F2226}
.apf .src .r3{animation:apr3 var(--T) ease-out infinite}.apf .src .r3 i{background:#0F7A3B}
.apf .src .r4{animation:apr4 var(--T) ease-out infinite}.apf .src .r4 i{background:#26A5E4}
.apf .src .done{display:block;margin-top:5px;font-size:8.6px;font-family:var(--font-mono);color:#12A36F;text-decoration:none;
  opacity:0;animation:apfdone var(--T) linear infinite}
@keyframes apfdone{0%,73%{opacity:0}77%,92%{opacity:1}97%,100%{opacity:0}}
.apf .an.t1,.apf .an.t2,.apf .an.t3,.apf .an.t4{left:61.5%;width:35.5%;display:flex;align-items:center;gap:7px;padding:6px 8px}
.apf .t1{top:13%;--ac:#DA291C;animation:apn1 var(--T) linear infinite}
.apf .t2{top:37.7%;--ac:#1F2226;animation:apn2 var(--T) linear infinite}
.apf .t3{top:62.3%;--ac:#0F7A3B;animation:apn3 var(--T) linear infinite}
.apf .t4{top:87%;--ac:#26A5E4;animation:apn4 var(--T) linear infinite}
.apf .an.t1,.apf .an.t2,.apf .an.t3{translate:0 -50%}
.apf .t4{translate:0 -100%}
.apf .an .lg{width:24px;height:24px;flex:none;border-radius:7px;display:grid;place-items:center}
.apf .an .lg svg{width:15px;height:15px;display:block}
.apf .lg.np{background:#DA291C}
.apf .lg.mo{background:#1F2226}.apf .lg.mo svg{width:18px}
.apf .lg.sh{background:#0F7A3B}
.apf .lg.tp{background:#26A5E4;border-radius:50%}
.apf .an div{flex:1;min-width:0}
.apf .an b{display:block;font-size:10.5px;font-weight:700;white-space:nowrap}
.apf .an span{display:block;font-size:9px;font-family:var(--font-mono);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apf .an u{flex:none;font-size:11px;color:#12A36F;text-decoration:none;font-weight:700;opacity:0;scale:.4}
.apf .t1 u{animation:apk1 var(--T) cubic-bezier(.34,1.5,.5,1) infinite}
.apf .t2 u{animation:apk2 var(--T) cubic-bezier(.34,1.5,.5,1) infinite}
.apf .t3 u{animation:apk3 var(--T) cubic-bezier(.34,1.5,.5,1) infinite}
.apf .t4 u{animation:apk4 var(--T) cubic-bezier(.34,1.5,.5,1) infinite}
@keyframes apo1{0%,6%{offset-distance:0%;opacity:0}7%{opacity:1}11%{opacity:1}12%,100%{offset-distance:100%;opacity:0}}
@keyframes apb1{0%,15%{offset-distance:100%;opacity:0}16%{opacity:1}20%{opacity:1}21%,100%{offset-distance:0%;opacity:0}}
@keyframes apw1{0%,6%{opacity:0;stroke-dashoffset:0}7%{opacity:.85}12%{opacity:.85;stroke-dashoffset:-34}13%,15%{opacity:0;stroke-dashoffset:-34}16%{opacity:.85}21%{opacity:.85;stroke-dashoffset:0}22%,100%{opacity:0}}
@keyframes apn1{0%,11%{border-color:var(--rule)}13%{border-color:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 20%,transparent),0 14px 30px -18px rgba(20,24,26,.4)}21%,92%{border-color:color-mix(in srgb,var(--ac) 45%,var(--rule));box-shadow:0 10px 24px -16px rgba(20,24,26,.3)}97%,100%{border-color:var(--rule);box-shadow:none}}
@keyframes apk1{0%,21%{opacity:0;scale:.4}24%,92%{opacity:1;scale:1}97%,100%{opacity:0}}
@keyframes apr1{0%,21%{opacity:0;translate:-8px 0;max-height:0}23%{max-height:14px}25%,92%{opacity:1;translate:0 0;max-height:14px}97%,100%{opacity:0;max-height:14px}}
@keyframes apo2{0%,22%{offset-distance:0%;opacity:0}23%{opacity:1}27%{opacity:1}28%,100%{offset-distance:100%;opacity:0}}
@keyframes apb2{0%,31%{offset-distance:100%;opacity:0}32%{opacity:1}36%{opacity:1}37%,100%{offset-distance:0%;opacity:0}}
@keyframes apw2{0%,22%{opacity:0;stroke-dashoffset:0}23%{opacity:.85}28%{opacity:.85;stroke-dashoffset:-34}29%,31%{opacity:0;stroke-dashoffset:-34}32%{opacity:.85}37%{opacity:.85;stroke-dashoffset:0}38%,100%{opacity:0}}
@keyframes apn2{0%,27%{border-color:var(--rule)}29%{border-color:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 20%,transparent),0 14px 30px -18px rgba(20,24,26,.4)}37%,92%{border-color:color-mix(in srgb,var(--ac) 45%,var(--rule));box-shadow:0 10px 24px -16px rgba(20,24,26,.3)}97%,100%{border-color:var(--rule);box-shadow:none}}
@keyframes apk2{0%,37%{opacity:0;scale:.4}40%,92%{opacity:1;scale:1}97%,100%{opacity:0}}
@keyframes apr2{0%,37%{opacity:0;translate:-8px 0;max-height:0}39%{max-height:14px}41%,92%{opacity:1;translate:0 0;max-height:14px}97%,100%{opacity:0;max-height:14px}}
@keyframes apo3{0%,38%{offset-distance:0%;opacity:0}39%{opacity:1}43%{opacity:1}44%,100%{offset-distance:100%;opacity:0}}
@keyframes apb3{0%,47%{offset-distance:100%;opacity:0}48%{opacity:1}52%{opacity:1}53%,100%{offset-distance:0%;opacity:0}}
@keyframes apw3{0%,38%{opacity:0;stroke-dashoffset:0}39%{opacity:.85}44%{opacity:.85;stroke-dashoffset:-34}45%,47%{opacity:0;stroke-dashoffset:-34}48%{opacity:.85}53%{opacity:.85;stroke-dashoffset:0}54%,100%{opacity:0}}
@keyframes apn3{0%,43%{border-color:var(--rule)}45%{border-color:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 20%,transparent),0 14px 30px -18px rgba(20,24,26,.4)}53%,92%{border-color:color-mix(in srgb,var(--ac) 45%,var(--rule));box-shadow:0 10px 24px -16px rgba(20,24,26,.3)}97%,100%{border-color:var(--rule);box-shadow:none}}
@keyframes apk3{0%,53%{opacity:0;scale:.4}56%,92%{opacity:1;scale:1}97%,100%{opacity:0}}
@keyframes apr3{0%,53%{opacity:0;translate:-8px 0;max-height:0}55%{max-height:14px}57%,92%{opacity:1;translate:0 0;max-height:14px}97%,100%{opacity:0;max-height:14px}}
@keyframes apo4{0%,54%{offset-distance:0%;opacity:0}55%{opacity:1}59%{opacity:1}60%,100%{offset-distance:100%;opacity:0}}
@keyframes apb4{0%,63%{offset-distance:100%;opacity:0}64%{opacity:1}68%{opacity:1}69%,100%{offset-distance:0%;opacity:0}}
@keyframes apw4{0%,54%{opacity:0;stroke-dashoffset:0}55%{opacity:.85}60%{opacity:.85;stroke-dashoffset:-34}61%,63%{opacity:0;stroke-dashoffset:-34}64%{opacity:.85}69%{opacity:.85;stroke-dashoffset:0}70%,100%{opacity:0}}
@keyframes apn4{0%,59%{border-color:var(--rule)}61%{border-color:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 20%,transparent),0 14px 30px -18px rgba(20,24,26,.4)}69%,92%{border-color:color-mix(in srgb,var(--ac) 45%,var(--rule));box-shadow:0 10px 24px -16px rgba(20,24,26,.3)}97%,100%{border-color:var(--rule);box-shadow:none}}
@keyframes apk4{0%,69%{opacity:0;scale:.4}72%,92%{opacity:1;scale:1}97%,100%{opacity:0}}
@keyframes apr4{0%,69%{opacity:0;translate:-8px 0;max-height:0}71%{max-height:14px}73%,92%{opacity:1;translate:0 0;max-height:14px}97%,100%{opacity:0;max-height:14px}}

@media (prefers-reduced-motion:reduce){.apf *{animation:none!important}.apf .src .rl{max-height:14px;opacity:1}.apf .an u,.apf .src .done{opacity:1;scale:1}}
/* термінал */
.api-log{background:var(--graphite);color:#E9EBE7;border-radius:14px;padding:12px 14px;font-family:var(--font-mono);font-size:11px}
.al-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:#8FA69C}
.al-h i{width:7px;height:7px;border-radius:50%;background:#3ED598;box-shadow:0 0 6px #3ED598}
.al-h em{margin-left:auto;font-style:normal;font-size:9.5px;color:#6B7B74}
.al-b div{display:flex;gap:8px;align-items:baseline;padding:2.5px 0;white-space:nowrap;overflow:hidden;opacity:0}
/* рядки лога з'являються в такт відповідям сервісів у полотні */
.al-b .lg1{animation:aplg1 var(--T,13s) linear infinite}
.al-b .lg2{animation:aplg2 var(--T,13s) linear infinite}
.al-b .lg3{animation:aplg3 var(--T,13s) linear infinite}
.al-b .lg4{animation:aplg4 var(--T,13s) linear infinite}
.al-b .lg5{animation:aplg5 var(--T,13s) linear infinite}
.al-b .lg6{animation:aplg6 var(--T,13s) linear infinite}
@keyframes aplg1{0%,21%{opacity:0}23%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes aplg2{0%,37%{opacity:0}39%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes aplg3{0%,45%{opacity:0}47%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes aplg4{0%,53%{opacity:0}55%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes aplg5{0%,69%{opacity:0}71%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes aplg6{0%,75%{opacity:0}77%,93%{opacity:1}97%,100%{opacity:0}}
.al-b u{text-decoration:none;color:#6B7B74;font-size:9.5px}
.al-b b{font-weight:600;min-width:44px}
.al-b .ok{color:#6FBFA2}.al-b .wr{color:#E0A83E}
.al-b em{font-style:normal;color:#B4BDB8;overflow:hidden;text-overflow:ellipsis}
@media (max-width:720px){.apf .an span{display:none}.apf .an.t1,.apf .an.t2,.apf .an.t3,.apf .an.t4{width:auto}.apf .src{width:44%}}

/* ============================== PORTFOLIO ==============================
   Список реальних сайтів. Десктоп: при наведенні поруч із курсором пливе
   «екранчик» — вікно браузера, в якому повний скріншот сайту повільно
   прогортується (--sh: зсув у % висоти зображення, --sd: тривалість,
   обидва пораховані з реальних пропорцій скріна). Клік відкриває сайт.
   Мобільний: під рядком, що зараз у центрі екрана, розгортається такий
   самий екранчик (клас .act ставить JS при прокрутці). */
.pf{position:relative}
.pf-list{border-top:1px solid var(--rule)}
.pf-item{display:grid;grid-template-columns:auto 1fr auto auto;gap:clamp(12px,3vw,44px);align-items:center;
  padding:clamp(14px,2vw,24px) 0 clamp(14px,2vw,24px) 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);
  position:relative;transition:padding .45s var(--ease)}
.pf-item:hover{padding-left:22px}
.pf-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--pine-soft);z-index:-1;transition:width .45s var(--ease)}
.pf-item:hover::before{width:100%}
.pf-item .n{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em}
.pf-item .t{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,3vw,44px);letter-spacing:-.015em;line-height:1.06;transition:color .35s}
.pf-item:hover .t{color:var(--pine)}
.pf-item .k{font-family:var(--font-mono);font-size:11px;color:var(--ink-2);letter-spacing:.06em;text-align:right}
.pf-item .y{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.08em}
/* екранчик: спільний вигляд (пік і мобільна вставка) */
.pfrm,.pf-peek .shot{border-radius:10px;overflow:hidden;border:1px solid var(--rule);background:#fff;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.45)}
.pfrm .dm,.pf-peek .dm{display:flex;align-items:center;gap:4px;padding:6px 9px;background:var(--paper-hi);border-bottom:1px solid var(--rule);font-style:normal}
.pfrm .dm b,.pf-peek .dm b{width:7px;height:7px;border-radius:50%;background:#FF5F57;flex:none}
.pfrm .dm b:nth-child(2),.pf-peek .dm b:nth-child(2){background:#FEBC2E}
.pfrm .dm b:nth-child(3),.pf-peek .dm b:nth-child(3){background:#28C840}
.pfrm .dm span,.pf-peek .dm span{margin-left:5px;font-family:var(--font-mono);font-size:9.5px;color:var(--ink-2);letter-spacing:.04em}
.pfrm .vw,.pf-peek .vw{position:relative;aspect-ratio:1/.66;overflow:hidden;background:#F4F6F3}
.pf-peek .vw::after,.pfrm .vw::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-30%;width:34%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-12deg);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .pf-peek .shot.on .vw::after,.pf-m.act .vw::after{animation:pfglare 6s ease-in-out infinite}
}
@keyframes pfglare{0%,55%{left:-34%}75%,100%{left:130%}}
.pfrm .vw img,.pf-peek .vw img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){
  .pf-peek .shot.on .vw img,.pf-m.act .vw img{animation:pfscroll var(--sd,14s) ease-in-out infinite alternate}
}
@keyframes pfscroll{0%,4%{translate:0 0}38%{translate:0 calc(var(--sh,-60%) * .55)}48%{translate:0 calc(var(--sh,-60%) * .5)}92%,100%{translate:0 var(--sh,-60%)}}
/* пік на десктопі */
.pf-peek{position:fixed;z-index:850;width:min(46vw,560px);pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scale(.78) rotate(-5deg);
  transition:opacity .28s var(--ease),transform .55s cubic-bezier(.3,1.45,.45,1);will-change:transform}
.pf-peek.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--rot,-2deg))}
/* живе плавання активного екранчика */
@media (prefers-reduced-motion:no-preference){
  .pf-peek.on .shot.on{animation:pfloat 5.5s ease-in-out infinite}
}
@keyframes pfloat{0%,100%{translate:0 0;rotate:0deg}30%{translate:0 -7px;rotate:.5deg}70%{translate:0 4px;rotate:-.45deg}}
.pf-peek .shot{display:none}
.pf-peek .shot.on{display:block}
.pf-peek .cap{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:9px;text-align:center}
/* мобільна вставка */
.pf-m{overflow:hidden;max-height:0;opacity:0;transition:max-height .6s var(--ease),opacity .45s var(--ease),margin .45s var(--ease)}
.pf-m .pfrm{margin:0 2px}
.pf-m.act{max-height:460px;opacity:1;margin:6px 0 18px}
@media (min-width:721px){.pf-m{display:none}}
.pf-note{display:flex;gap:14px;align-items:center;padding-top:22px;color:var(--ink-3)}

/* ============================== PROCESS ============================== */
.proc{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.proc article{background:var(--paper);padding:clamp(20px,2.4vw,34px)}
.proc .st{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--pine);margin-bottom:16px;display:block}
.proc h4{font-family:var(--font-display);font-size:20px;letter-spacing:-.02em;margin:0 0 8px}
.proc p{font-size:14.5px;color:var(--ink-2)}

/* ============================== STACK ============================== */
.stackwall{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(24px,3vw,54px)}
.stackwall section h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.stackwall ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.stackwall li{font-family:var(--font-body);font-size:clamp(17px,1.7vw,24px);font-weight:600;letter-spacing:-.02em;color:var(--ink-2);transition:color .2s,transform .2s;cursor:default}
.stackwall li:hover{color:var(--pine);transform:translateY(-2px)}

/* ============================== ABOUT ============================== */
/* Про мене: текст на всю ширину, фото — маленький аватар у підписі */
.about{display:block}
.byline{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.byline .ava{width:clamp(110px,12vw,140px);aspect-ratio:4/5;height:auto;flex:none;border-radius:12px;object-fit:cover;display:block;
  box-shadow:0 0 0 1px var(--rule),0 12px 26px -16px rgba(20,24,26,.35)}
.byline b{display:block;font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.01em}
.byline span{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.byline span i{width:6px;height:6px;border-radius:50%;background:#3ED598;box-shadow:0 0 5px #3ED598}
.about-txt p{font-size:clamp(17px,1.55vw,21px);color:var(--ink);line-height:1.6;max-width:60ch}
.about-txt p + p{margin-top:18px;color:var(--ink-2)}
.facts{display:flex;flex-wrap:wrap;gap:30px;margin-top:34px;padding-top:20px;border-top:1px solid var(--rule)}
.facts div b{display:block;font-family:var(--font-display);font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.facts div span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ============================== QUICK CTA ==============================
   Коротка форма (імʼя · контакт · задача), врізана кілька разів по сторінці —
   щоб не треба було догортати до низу. Та сама розмітка знизу, ширшим рядком. */
.qcta{padding-block:clamp(26px,4vw,48px)}
.qbox{display:grid;grid-template-columns:minmax(220px,.85fr) 1.15fr;gap:clamp(18px,3vw,44px);align-items:center;
  background:var(--paper-hi);border:1px solid var(--rule);border-radius:16px;padding:clamp(18px,2.4vw,28px);
  box-shadow:0 20px 44px -30px rgba(20,24,26,.35)}
.qtxt b{display:block;font-family:var(--font-display);font-size:clamp(17px,1.9vw,24px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.qtxt span{display:block;margin-top:7px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.qtel{display:inline-block;margin-top:10px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;
  color:var(--pine);text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--pine) 45%,transparent)}
.qtel:hover{color:var(--ink)}
.qform{display:grid;grid-template-columns:1fr 1fr auto;gap:9px;align-items:center}
.qform input{grid-column:span 1;min-width:0;background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:11px 13px;font:inherit;font-size:13.5px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.qform input:nth-of-type(3){grid-column:1/3}
.qform input::placeholder{color:var(--ink-3)}
.qform input:focus{outline:0;border-color:var(--pine);box-shadow:0 0 0 3px color-mix(in srgb,var(--pine) 16%,transparent)}
.qform button{grid-column:3;grid-row:1/3;align-self:stretch;background:var(--ink);color:var(--paper);border:0;border-radius:10px;
  padding:0 18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  transition:background .25s,transform .2s}
.qform button:hover{background:var(--pine);transform:translateY(-1px)}
.qform .fnote{grid-column:1/-1;margin:0;font-family:var(--font-mono);font-size:11px;color:var(--pine);min-height:1em}
.qform.wide{max-width:none}
@media (max-width:900px){
  .qbox{grid-template-columns:1fr;gap:16px}
  .qform{grid-template-columns:1fr}
  .qform input:nth-of-type(3),.qform button{grid-column:1}
  .qform button{grid-row:auto;padding:12px 18px}
}

/* ============================== CONTACT ============================== */
.cta{padding-block:clamp(52px,7vw,100px) 46px}
/* Низ сторінки: головне — форма. Контакти-дублі з шапки прибрані,
   під формою лишився один рядок «або напряму». */
.ctahead{max-width:620px;margin-bottom:clamp(20px,2.6vw,30px)}
.ctahead h2{font-family:var(--font-display);font-size:clamp(24px,3.4vw,44px);font-weight:700;letter-spacing:-.025em;line-height:1.08;margin:0}
.ctahead p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.cta .qform{max-width:820px}
.ctalso{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em}
.ctalso span{color:var(--ink-3);text-transform:uppercase;font-size:10.5px}
.ctalso a{color:var(--ink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--pine) 40%,transparent);transition:color .2s}
.ctalso a:hover{color:var(--pine)}
.form{display:flex;flex-direction:column;gap:14px}
.field{position:relative;border-bottom:1px solid var(--rule);padding-top:18px}
.field label{position:absolute;top:18px;left:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);transition:.25s var(--ease);pointer-events:none}
.field input,.field textarea{width:100%;background:none;border:0;padding:6px 0 10px;font-family:var(--font-body);font-size:16px;color:var(--ink);resize:vertical}
.field input:focus,.field textarea:focus{outline:0}
.field:focus-within{border-color:var(--pine)}
.field:focus-within label,.field.filled label{top:0;font-size:9.5px;color:var(--pine)}
.btn{align-self:flex-start;margin-top:8px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:99px;
  padding:13px 26px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.25s var(--ease);text-decoration:none;display:inline-block}
.btn:hover{background:var(--pine);border-color:var(--pine);color:#fff}
.btn.ghost{background:none;color:var(--ink)}
.btn.ghost:hover{color:#fff}
.formnote{font-size:13px;color:var(--ink-3);min-height:20px}
.contacts{display:flex;flex-direction:column;gap:2px}
.contacts a{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--rule);text-decoration:none;transition:padding .3s var(--ease)}
.contacts a:hover{padding-left:10px}
.contacts a b{font-size:17px;font-weight:600}
.contacts a span{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;align-self:center}

/* копірайт — праворуч від форми, окремого підвалу немає */
.ctagrid{display:grid;grid-template-columns:minmax(0,820px) 1fr;gap:clamp(20px,4vw,56px);align-items:end}
.ctacopy{margin:0;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:right;padding-bottom:4px}
@media (max-width:900px){
  .ctagrid{grid-template-columns:1fr;gap:18px}
  .ctacopy{text-align:left}
}

/* ============================== DEV MODE ============================== */
.devgrid{position:fixed;inset:0;z-index:8000;pointer-events:none;display:none}
html.dev .devgrid{display:block}
.devgrid .cols{position:absolute;inset:0;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.devgrid .cols i{background:color-mix(in srgb,var(--live) 9%,transparent);border-left:1px solid color-mix(in srgb,var(--live) 26%,transparent);border-right:1px solid color-mix(in srgb,var(--live) 26%,transparent)}
.devgrid .rows{position:absolute;inset:0;background-image:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--ink) 7%,transparent) 0 1px,transparent 1px 80px)}
.devbadge{position:fixed;right:10px;bottom:10px;z-index:8001;display:none;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  background:var(--ink);color:var(--paper);padding:7px 11px;border-radius:4px;line-height:1.5}
html.dev .devbadge{display:block}
html.dev .stage-vis,html.dev .stage-copy,html.dev section > .wrap > *{outline:1px dashed color-mix(in srgb,var(--live) 45%,transparent)}
html.dev .device-lbl{display:block}
.device-lbl{display:none;position:absolute;top:-22px;left:0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;color:var(--live);text-transform:uppercase}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1080px){
  .stage-grid{grid-template-columns:1fr;gap:26px;align-content:center}
  .stage[data-side="left"] .stage-grid{grid-template-columns:1fr}
  .stage[data-side="left"] .stage-copy{order:0}
  .stage-copy{max-width:none}
  .stage-copy h3{font-size:clamp(22px,5vw,34px)}
  .stage-vis{min-height:auto}
  .hero-grid{grid-template-columns:1fr}
  .hero-side{max-width:none}
  .about{grid-template-columns:1fr}
  .cta-row{grid-template-columns:1fr}
  .sechead{flex-wrap:wrap}
  .sechead p{margin-left:0;flex-basis:100%}
  .laptop-lid .screen{border-width:6px;border-bottom-width:10px}
  .monitor .screen{border-width:5px}
  .botstage{flex-direction:column;align-items:center}
  .botphone{width:clamp(140px,30vw,190px);margin:-16% 0 0 22%}
}
@media (max-width:720px){
  body{font-size:16px}
  .navlinks{display:none}
  .tb-tel{display:none}
  .logo-wd .tld{display:none}
  .tb-contacts{gap:7px}
  .tb-ico{width:25px;height:25px}
  .stage-in{align-items:center;padding-block:40px}
  .tgw{grid-template-columns:1fr}
  .tgw-phone{width:clamp(150px,44vw,190px);margin-inline:auto}
  .apix{grid-template-columns:1fr}
  .api-hub-big{max-width:360px;margin-inline:auto}
  .stage-api .stage-copy{grid-template-columns:1fr}
  .stage-api .stage-copy .lede{grid-column:1;grid-row:auto}
  .ai-thread{min-height:0}
  .ai-m{max-width:92%}.ai-m.a{max-width:96%}
  .ai-cards{grid-template-columns:1fr 1fr}
  .phone-rise{width:min(62%,240px)}   /* ширину несе .phone-rise, а не .phone */
  .scr{font-size:3.4cqw}
  .pf-item{grid-template-columns:auto 1fr;row-gap:6px;min-width:0}
  .pf-item .k{white-space:normal}
  .pf-item .k{grid-column:2;text-align:left}
  .pf-item .y{grid-column:2;grid-row:1;justify-self:end}
  .pf-peek{display:none}
  .term-body{font-size:10px;min-height:180px}
  .facts{gap:20px}
  .scrollhint{display:none}
}

/* ============================== REDUCED MOTION ============================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .stage-in{min-height:auto;padding-block:60px}
  .hero-schema .s-stroke{stroke-dashoffset:0}
}