/* Apex Bio · главная v7 (11.09.2026, пересборка по каркасу v2). Паспорт: ../apexbio-site/DESIGN.md.
   Каркас и приёмы демо v2 (шапка в три ряда, карточка в герое, полоса иконок, категории с кадром, шаги под кадром,
   формы с фото, акции карточками, «Начнём разговор») на тёмно-синей палитре от логотипа клиента, картинки новые.
   Один блок токенов, дальше только var(). Без v1.css и CDN. */

:root{
  --bg:oklch(15% .035 250);--bg-2:oklch(19% .045 250);--bg-3:oklch(23% .055 250);
  --deep:oklch(40% .10 240);--sky:oklch(68% .13 225);--sky-2:oklch(85% .07 220);
  --text:oklch(96% .01 230);--muted:oklch(80% .02 230);--dim:oklch(64% .03 235);--ink:oklch(16% .04 250);
  --line:oklch(96% .01 230 / .14);--line-2:oklch(96% .01 230 / .28);
  --glass:oklch(15% .035 250 / .6);--glass-line:oklch(96% .01 230 / .18);--plate:oklch(97% .005 230);
  --ok:oklch(82% .13 160);--warn:oklch(85% .12 80);
  --fd:"Tenor Sans",Georgia,serif;--fb:"Jost",system-ui,-apple-system,sans-serif;
  --fs-0:.875rem;--fs-1:.9375rem;--fs-2:1.0625rem;--fs-3:1.25rem;--fs-4:clamp(1.5rem,2.8vw,2.5rem);--fs-5:clamp(1.9rem,3.8vw,3.3rem);
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
  --sec:clamp(56px,7vw,104px);--gut:clamp(20px,4vw,48px);--wrap:1320px;
  --r-1:8px;--r-2:14px;--r-3:20px;--pill:999px;
  --e-out:cubic-bezier(.16,1,.3,1);--t-fast:.16s;--t-mid:.3s;--t-slow:.7s;
  --z-head:20;--z-drop:25;
}

/* ---------- база ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);color-scheme:dark;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-2)/1.55 var(--fb);min-height:100svh;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
p,h1,h2,h3,h4,figure,dl,dd{margin:0}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto}
section[id],footer[id]{scroll-margin-top:var(--s-5)}
.skip{position:fixed;left:var(--gut);top:12px;z-index:calc(var(--z-drop) + 1);padding:var(--s-3) var(--s-4);border-radius:999px;background:var(--sky-2);color:var(--ink);font-weight:500;translate:0 -200px;opacity:0}
.skip:focus-visible{translate:0 0;opacity:1}
h1,h2,h3{font:400 var(--fs-4)/1.12 var(--fd);letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere;min-width:0}
h1{font-size:var(--fs-5);line-height:1.06;letter-spacing:.04em}
h1 em,h2 em{font-style:normal;color:var(--sky-2)}
/* строки заголовков одной длины, в абзацах без одинокого слова в последней строке (24.09.2026, обход вёрстки) */
h1,h2,h3,h4{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
/* стекло без размытия (старый браузер, «уменьшить прозрачность» в настройках) читается как наложенный текст:
   под шапкой и липкой панелью покупки просвечивали строки страницы. Там, где размытия нет, фон сплошной. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.head,.p-sticky{background:var(--bg-2)}}
@media (prefers-reduced-transparency:reduce){.head,.p-sticky{background:var(--bg-2);backdrop-filter:none;-webkit-backdrop-filter:none}}
.kicker{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);font:500 var(--fs-0)/1 var(--fb);letter-spacing:.24em;text-transform:uppercase;color:var(--sky-2)}
.kicker::before{content:"";width:28px;height:1px;background:var(--sky)}
.lead{font-size:var(--fs-3);font-weight:300;color:var(--muted);max-width:56ch}
.note{font-weight:300;color:var(--muted);max-width:44ch;font-size:var(--fs-1)}
.rule{width:56px;height:1px;background:var(--sky);margin:var(--s-5) 0}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);margin-bottom:var(--s-7)}
.shead h2{max-width:24ch}
.more{display:inline-block;white-space:nowrap;padding:var(--s-2) 0;border-bottom:1px solid var(--line-2);font:500 var(--fs-0)/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color var(--t-mid),border-color var(--t-mid)}

/* кнопки: пилюли из стекла (владелец 11.09: «убрать углы, чтобы округлые; стекло, не пластмассовые») */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:48px;padding:0 var(--s-6);border-radius:var(--pill);border:1px solid oklch(96% .01 230 / .4);background:linear-gradient(180deg,oklch(91% .06 218) 0%,oklch(80% .11 222) 100%);color:var(--ink);font:500 var(--fs-0)/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;box-shadow:inset 0 1px 0 oklch(100% 0 0 / .6),inset 0 -1px 0 oklch(55% .12 235 / .35),0 10px 28px -12px oklch(68% .13 225 / .6);transition:background var(--t-mid),border-color var(--t-mid),color var(--t-mid),box-shadow var(--t-mid),translate var(--t-mid) var(--e-out),transform var(--t-fast) var(--e-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,oklch(100% 0 0 / .45) 50%,transparent 65%);translate:-110% 0;transition:translate .8s var(--e-out)}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn.line{background:oklch(96% .01 230 / .07);color:var(--text);border-color:oklch(96% .01 230 / .22);box-shadow:inset 0 1px 0 oklch(100% 0 0 / .14),0 10px 24px -16px oklch(0% 0 0 / .7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn.line::before{background:linear-gradient(110deg,transparent 35%,oklch(100% 0 0 / .14) 50%,transparent 65%)}
.btn.small{height:42px;padding:0 var(--s-5);font-size:.75rem}
.arr{width:42px;height:42px;border-radius:50%;border:1px solid oklch(96% .01 230 / .2);background:oklch(96% .01 230 / .05);box-shadow:inset 0 1px 0 oklch(100% 0 0 / .12);display:grid;place-items:center;transition:border-color var(--t-mid),background var(--t-mid),transform var(--t-fast) var(--e-out)}
.arr:active{transform:scale(.95)}
.arr svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.ico{position:relative;width:42px;height:42px;border-radius:50%;border:1px solid oklch(96% .01 230 / .16);background:oklch(96% .01 230 / .05);box-shadow:inset 0 1px 0 oklch(100% 0 0 / .1);display:grid;place-items:center;color:var(--muted);transition:color var(--t-mid),background var(--t-mid),border-color var(--t-mid)}
.ico::after{content:"";position:absolute;inset:-4px}
.ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.ico svg .f{fill:currentColor;stroke:none}
.ico img{width:18px;height:18px;opacity:.85}
.arrows{display:flex;gap:var(--s-2)}

/* ---------- шапка в три ряда (v2) ---------- */
.topline{background:oklch(17% .04 250);font:500 .75rem/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.topline .wrap{display:flex;justify-content:center;gap:var(--s-6);padding:var(--s-3) 0;white-space:nowrap;overflow:hidden}
.tl{display:inline-flex;align-items:center;gap:var(--s-3)}
.tl svg{width:40px;height:20px;fill:none;stroke:var(--sky);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.tl svg [class]{transform-box:fill-box;transform-origin:center}
.tl .glow{fill:oklch(68% .13 225 / .18);stroke:none;filter:blur(4px);opacity:0}
.tl .ok{stroke-dasharray:16;stroke-dashoffset:0}
.tl .ring{stroke-dasharray:48;stroke-dashoffset:0;opacity:0}
.tl .road{stroke-dasharray:44;stroke-dashoffset:0;opacity:.5}
.tl .b1,.tl .b2,.tl .b3,.tl .ripple,.tl .s1,.tl .s2,.tl .s3{opacity:0}
.tl .b1,.tl .b2,.tl .b3,.tl .drop{fill:var(--sky-2);stroke:none}
.tl .ripple{stroke:var(--sky-2);stroke-width:1}
.tl .s1,.tl .s2,.tl .s3{fill:var(--sky-2);stroke:none}
.topline:not(.live) .tl+.tl::before{content:"·";margin-right:var(--s-6);color:var(--sky)}
/* живая строка (владелец 11.09, версия «истории тонкой линией», возвращена по его слову вечером 11.09): цикл 7s на фразу —
   0.9 с влёт с торможением, ~5 с стоит в центре и играет миниатюра, 0.9 с улёт с разгоном; направление чередуется.
   Все сцены живут в окне 13–87 % цикла */
.topline.live{overflow:clip}
.topline.live .wrap{display:grid;place-items:center;height:44px;padding:0;position:relative;overflow:visible}
.topline.live .tl{position:absolute;opacity:0;will-change:translate,opacity;font-size:.78rem}
.topline.live .tl::after{content:"";position:absolute;left:calc(66px + var(--s-3));right:0;bottom:-5px;height:1px;background:linear-gradient(90deg,var(--sky-2),oklch(85% .07 220 / 0));transform:scaleX(0);transform-origin:left}
.topline.live .tl:is(.rtl,.ltr)::after{animation:sc-line 7s both}
@keyframes sc-line{0%,14%{transform:scaleX(0);transform-origin:left;animation-timing-function:cubic-bezier(.16,1,.3,1)}30%,78%{transform:scaleX(1);transform-origin:left}79%{transform-origin:right;animation-timing-function:cubic-bezier(.7,0,.84,0)}88%,100%{transform:scaleX(0);transform-origin:right}}
.topline.live .tl svg{width:66px;height:33px;stroke-width:1.5}
.topline.live .tl.rtl{animation:tl-rtl 7s both}
.topline.live .tl.ltr{animation:tl-ltr 7s both}
@keyframes tl-rtl{0%{translate:60vw 0;opacity:0;color:var(--muted);animation-timing-function:cubic-bezier(.16,1,.3,1)}13%{translate:0 0;opacity:1;color:var(--sky-2);text-shadow:0 0 22px oklch(68% .13 225 / .6);animation-timing-function:linear}87%{translate:0 0;opacity:1;color:var(--sky-2);text-shadow:0 0 22px oklch(68% .13 225 / .6);animation-timing-function:cubic-bezier(.7,0,.84,0)}100%{translate:-60vw 0;opacity:0;color:var(--muted)}}
@keyframes tl-ltr{0%{translate:-60vw 0;opacity:0;color:var(--muted);animation-timing-function:cubic-bezier(.16,1,.3,1)}13%{translate:0 0;opacity:1;color:var(--sky-2);text-shadow:0 0 22px oklch(68% .13 225 / .6);animation-timing-function:linear}87%{translate:0 0;opacity:1;color:var(--sky-2);text-shadow:0 0 22px oklch(68% .13 225 / .6);animation-timing-function:cubic-bezier(.7,0,.84,0)}100%{translate:60vw 0;opacity:0;color:var(--muted)}}
.topline.live .tl:is(.rtl,.ltr) svg{animation:tl-ico 7s both}
@keyframes tl-ico{0%,100%{stroke:var(--sky);filter:none}13%,87%{stroke:var(--sky-2);filter:drop-shadow(0 0 7px oklch(68% .13 225 / .85))}}
.topline.live .tl:is(.rtl,.ltr) .glow{animation:sc-glow 7s both}
@keyframes sc-glow{0%,10%{opacity:0;transform:scale(.6)}20%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.15)}80%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(.6)}}
/* доставка: дорога прорисовывается, фургон подкатывает, коробка ставится перед ним, галочка, разворот и отъезд */
.topline.live .tl:is(.rtl,.ltr) .road{animation:sc-road 7s both}
.topline.live .tl:is(.rtl,.ltr) .van{animation:sc-van 7s both}
.topline.live .tl:is(.rtl,.ltr) .box{animation:sc-box 7s both}
.topline.live .tl:is(.rtl,.ltr) .ok{animation:sc-ok 7s both}
@keyframes sc-road{0%,13%{stroke-dashoffset:44;opacity:0}16%{opacity:.5}26%,86%{stroke-dashoffset:0;opacity:.5}92%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes sc-van{0%,15%{transform:translateX(-40px) scaleX(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}34%{transform:translateX(1.5px) scaleX(1)}38%,60%{transform:translateX(0) scaleX(1)}62%{transform:translateX(0) scaleX(-1);animation-timing-function:cubic-bezier(.5,0,.75,.2)}88%,100%{transform:translateX(-1400px) scaleX(-1)}}
@keyframes sc-box{0%,40%{opacity:0;transform:translateY(-8px)}43%{opacity:1;animation-timing-function:cubic-bezier(.34,1.45,.64,1)}52%,86%{opacity:1;transform:translateY(0)}92%,100%{opacity:0;transform:translateY(0)}}
@keyframes sc-ok{0%,54%{stroke-dashoffset:16;opacity:0}56%{opacity:1}66%,86%{stroke-dashoffset:0;opacity:1}92%,100%{stroke-dashoffset:0;opacity:0}}
/* оплата: коробка и купюра меняются местами по дугам, кольцо и галочка «сделка» */
.topline.live .tl:is(.rtl,.ltr) .pbox{animation:sc-pbox 7s both}
.topline.live .tl:is(.rtl,.ltr) .bill{animation:sc-bill 7s both}
.topline.live .tl:is(.rtl,.ltr) .ring{animation:sc-ring 7s both}
@keyframes sc-pbox{0%,20%{transform:translate(0,0);animation-timing-function:ease-in-out}34%{transform:translate(15px,-8px);animation-timing-function:ease-in-out}48%,100%{transform:translate(30px,0)}}
@keyframes sc-bill{0%,24%{transform:translate(0,0);animation-timing-function:ease-in-out}38%{transform:translate(-15px,8px);animation-timing-function:ease-in-out}52%,100%{transform:translate(-30px,0)}}
@keyframes sc-ring{0%,52%{stroke-dashoffset:48;opacity:0}54%{opacity:.9}68%,86%{stroke-dashoffset:0;opacity:.9}92%,100%{stroke-dashoffset:0;opacity:0}}
/* чистота: уровень поднимается, пузырьки всплывают, кольцо и галочка */
.topline.live .tl:is(.rtl,.ltr) .lv{animation:sc-lv 7s both}
.topline.live .tl:is(.rtl,.ltr) .b1{animation:sc-bub 1.6s 1.2s 3 ease-out}
.topline.live .tl:is(.rtl,.ltr) .b2{animation:sc-bub 1.6s 1.7s 3 ease-out}
.topline.live .tl:is(.rtl,.ltr) .b3{animation:sc-bub 1.6s 2.2s 3 ease-out}
@keyframes sc-lv{0%,18%{transform:translateY(0)}44%,100%{transform:translateY(-4px)}}
@keyframes sc-bub{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:.7}100%{transform:translateY(-11px);opacity:0}}
/* исследования: капля падает с ускорением, круги по воде, уровень чуть выше, искры */
.topline.live .tl:is(.rtl,.ltr) .drop{animation:sc-drop 7s both}
.topline.live .tl:is(.rtl,.ltr) .ripple{animation:sc-ripple 7s both}
.topline.live .tl:is(.rtl,.ltr) .s1{animation:sc-sp 7s both}
.topline.live .tl:is(.rtl,.ltr) .s2{animation:sc-sp 7s .25s both}
.topline.live .tl:is(.rtl,.ltr) .s3{animation:sc-sp 7s .5s both}
@keyframes sc-drop{0%,22%{transform:translateY(0);opacity:1;animation-timing-function:cubic-bezier(.5,0,1,.6)}40%{transform:translateY(5.5px);opacity:1}42%,100%{transform:translateY(5.5px);opacity:0}}
@keyframes sc-ripple{0%,40%{transform:scale(1);opacity:0}42%{opacity:.85}58%,100%{transform:scale(3.4,1.8);opacity:0}}
@keyframes sc-sp{0%,50%{opacity:0;transform:scale(.2)}58%{opacity:1;transform:scale(1.15)}62%{transform:scale(1)}80%{opacity:1}88%,100%{opacity:0;transform:scale(.5)}}
.head{position:sticky;top:0;z-index:var(--z-head);background:var(--glass);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid var(--line)}
.head>.wrap{display:flex;align-items:center;gap:var(--s-6);height:76px}
.logo{display:inline-flex;align-items:center;flex:none}
.logo img{height:40px;width:auto}
.finder{position:relative;flex:1 1 auto;min-width:0;max-width:560px;margin-inline:auto;display:flex;align-items:center;gap:var(--s-3);height:44px;padding:0 var(--s-3) 0 var(--s-5);border-radius:var(--pill);border:1px solid oklch(96% .01 230 / .16);background:oklch(96% .01 230 / .06);box-shadow:inset 0 1px 0 oklch(100% 0 0 / .08);transition:border-color var(--t-mid),background var(--t-mid),box-shadow var(--t-mid)}
.finder:focus-within{border-color:var(--sky);background:oklch(96% .01 230 / .09);box-shadow:inset 0 1px 0 oklch(100% 0 0 / .1),0 0 0 4px oklch(68% .13 225 / .18)}
.finder>svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--dim);stroke-width:1.6}
.finder input{flex:1 1 auto;min-width:0;height:100%;background:none;border:0;font-weight:300;font-size:1rem;color:var(--text)}
.finder input::placeholder{color:var(--dim);transition:color var(--t-mid)}
.finder input.typing::placeholder{color:var(--muted)}
.finder input:focus-visible{outline:0}
.finder input::-webkit-search-cancel-button{display:none}
.finder .drop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:var(--z-drop);background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-2);max-height:60vh;overflow-y:auto;box-shadow:0 24px 48px -20px oklch(0% 0 0 / .7)}
.finder .drop[hidden]{display:none}
.hit{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-4);border-bottom:1px solid var(--line);transition:background var(--t-fast)}
.hit:last-child{border-bottom:0}
.hit .im{width:52px;height:52px;background:var(--plate);padding:4px;border-radius:var(--r-1);overflow:hidden}
.hit .im img{width:100%;height:100%;object-fit:contain}
.hit b{display:block;font:400 var(--fs-1)/1.25 var(--fd);letter-spacing:.02em}
.hit small{display:block;font-size:.8rem;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.hit .pr2{font-variant-numeric:tabular-nums;color:var(--sky-2);white-space:nowrap}
.finder .none,.finder .all{display:block;padding:var(--s-3) var(--s-4);font-size:var(--fs-1);color:var(--muted)}
.finder .all{border-top:1px solid var(--line);color:var(--sky-2)}
.contacts{display:flex;align-items:center;gap:var(--s-3);flex:none}
.phone{padding:0 var(--s-2);font-size:var(--fs-1);font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
.contacts .btn.small{margin:0 var(--s-1)}
.burger{display:none;width:44px;height:44px;place-items:center}
.burger i{display:block;width:22px;height:2px;background:var(--text);box-shadow:0 -7px 0 var(--text),0 7px 0 var(--text);transition:box-shadow var(--t-mid),transform var(--t-mid)}
/* открытое меню: из трёх полосок собираем КРЕСТИК. Раньше боковые полоски гасились, а средняя просто
   поворачивалась — на экране оставалась одна диагональная палка (поймано на скрине телефона 19.09.2026). */
.burger i{position:relative}
.burger i::after{content:"";position:absolute;inset:0;background:var(--text);border-radius:inherit;opacity:0;
  transform:rotate(0);transition:opacity var(--t-mid),transform var(--t-mid)}
.burger[aria-expanded="true"] i{box-shadow:none;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{opacity:1;transform:rotate(-90deg)}
/* ряд меню лежит НИЖЕ строки с поиском: иначе его пункты просвечивают сквозь выпадающую подсказку
   поиска (найдено обходом 19.09.2026) */
.head>.wrap{position:relative;z-index:2}
.menu-row{position:relative;z-index:1;border-top:1px solid var(--line)}
/* ряд меню: в покое только текст, при наведении проявляется стеклянная пилюля с заливкой как у «В корзину» и лёгким ростом (владелец 11.09) */
.menu-row .wrap{display:flex;justify-content:space-between;gap:var(--s-2);height:40px;align-items:center;font:500 .72rem/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);overflow-x:auto;scrollbar-width:none}
/* под наведением пункт подрастает и даёт тень, а полоса меню его срезала: прокрутка по горизонтали
   обрезает и по вертикали. На широком экране пункты и так помещаются — прокрутка там не нужна
   (метка Рахмана 19.09.2026: «часть обрезается, как будто освещение»). */
@media (min-width:981px){.menu-row .wrap{overflow:visible;height:46px}}
.menu-row .wrap::-webkit-scrollbar{display:none}
.menu-row a{position:relative;isolation:isolate;overflow:hidden;white-space:nowrap;height:30px;display:inline-flex;align-items:center;padding:0 var(--s-4);border-radius:var(--pill);border:1px solid transparent;background:transparent;transition:color var(--t-mid),border-color var(--t-mid),background var(--t-mid),box-shadow var(--t-mid),transform var(--t-mid) var(--e-out)}
.menu-row a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,oklch(91% .06 218) 0%,oklch(80% .11 222) 100%);opacity:0;transition:opacity var(--t-mid)}

/* заголовки без одного слова в последней строке («…подписчиков / КАНАЛА», обход телефонов 28.09); :where — нулевой
   вес, явные правила text-wrap у блоков сильнее */
:where(h1,h2,h3){text-wrap:balance}

/* ---------- герой ---------- */
/* 39vw: на мониторах шире ~2100 px герой выше 820, иначе кадр 16:9 режется сверху и снизу и крем обрезан (28.09) */
.hero{position:relative;min-height:min(86svh,max(820px,39vw));display:grid;align-items:center;padding:var(--s-8) 0 var(--s-9);isolation:isolate}
.hero .bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero .bg picture{display:contents}   /* свой кадр телефону (<picture>): img меряется от figure, а не от строчного picture */
/* кадр table28 (28.09, замечание клиента «ближе, в центр, чуть крупнее»): группа крупнее и шире, x 46–92 %. На широких
   экранах кадр режется только сверху и снизу; на более узких 50 % отдаёт поровну с боков, и крем не уходит за край */
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;scale:1.04}
/* подложка над кадром (z-index): img со scale/анимацией рисовался поверх неё, и затемнения не было. Кадр героя с 25.09
   светлый (слово Рахмана: светлое фото, интерфейс тёмный), поэтому под текстом подложка плотнее */
.hero .bg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--bg) 0%,oklch(15% .035 250 / .93) 30%,oklch(15% .035 250 / .6) 45%,oklch(15% .035 250 / .15) 58%,transparent 66%)}
.hero .bg::after{content:"";position:absolute;inset:auto 0 0;z-index:1;height:30%;background:linear-gradient(to top,var(--bg),transparent)}
.hero .wrap{display:grid;gap:var(--s-6);justify-items:start}
.hero .copy{max-width:640px;display:grid;justify-items:start}
.hero{--hero-w:460px}
.hero .kicker{margin-bottom:var(--s-5)}
/* h1 главной — поисковая фраза в виде надзаголовка (02.10.2026); фраза длинная, в две строки ей нужен межстрочный */
.hero h1.kicker{line-height:1.5;text-wrap:balance}
/* слоган: тот же вид, что был у h1 (свойства общего h1 перенесены сюда), но это не заголовок */
.hero .slogan{display:grid;gap:.35em;font:400 clamp(1.2rem,1.8vw,1.6rem)/1.2 var(--fd);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere;min-width:0;text-wrap:balance}
.hero .slogan em{font:500 clamp(2rem,3.5vw,3rem)/1.04 var(--fb);letter-spacing:.015em;color:var(--sky-2)}
/* факты под заголовком: ровная сетка 2×2, без рамок (владелец 11.09: «выглядят как кнопки и неровно») */
.hero-facts{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:var(--s-3) var(--s-7);margin-top:var(--s-5)}
.hero-facts li{display:flex;align-items:center;gap:var(--s-3);font:400 .95rem/1.3 var(--fb);color:var(--muted);white-space:nowrap}
.hero-facts li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1px solid oklch(68% .13 225 / .55);background:oklch(68% .13 225 / .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfe7f5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat}
.hero .cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-6);width:min(var(--hero-w),100%)}
.hero .cta .btn{padding:0 var(--s-4);letter-spacing:.12em}
.hero-card[hidden]{display:none!important}
.hero-card{width:min(var(--hero-w),100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0;overflow:hidden;background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-3);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 oklch(96% .01 230 / .08),0 30px 60px -30px oklch(0% 0 0 / .8)}
.hc-pic{position:relative;display:block;min-height:100%;background:var(--plate);overflow:hidden}
.hc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:opacity var(--t-fast)}
.hc-side{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;min-width:0}
.hc-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3) var(--s-2) var(--s-4);border-bottom:1px solid var(--line);font:500 .62rem/1 var(--fb);letter-spacing:.18em;text-transform:uppercase;color:var(--sky-2)}
.hc-head .nav{display:flex;align-items:center;gap:var(--s-2)}
.hc-count{font:400 .72rem/1 var(--fd);letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.hc-head .arr{width:28px;height:28px}
.hc-body{display:grid;align-content:center;justify-items:start;gap:2px;height:140px;min-width:0;overflow:hidden;padding:var(--s-3) var(--s-4);transition:opacity var(--t-fast),transform var(--t-fast)}
.hc-body.swap{opacity:0;transform:translateX(8px)}
.hc-body b{font:400 var(--fs-1)/1.25 var(--fd);letter-spacing:.05em;text-transform:uppercase;overflow-wrap:anywhere;display:block;max-height:2.5em;overflow:hidden}
.hc-body small{color:var(--muted);font-size:.78rem;line-height:1.3;max-width:100%;display:block;max-height:2.6em;overflow:hidden}
.hc-body .price{font:400 1.2rem/1 var(--fd);margin-top:var(--s-2);font-variant-numeric:tabular-nums;color:var(--sky-2)}
.hc-body .stock{font:500 .62rem/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--ok);margin-top:var(--s-1)}
.hc-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border-top:1px solid var(--line)}
.hc-foot .btn{height:34px;padding:0 var(--s-3);font-size:.62rem;letter-spacing:.1em}

/* ---------- полоса фактов: компактный ряд, иконки 44px с живыми сценами внутри (с нуля 11.09; «мелко, но видно») ---------- */
.icons{background:transparent;border-block:0;padding:var(--s-6) 0}
.icons .wrap{display:grid;grid-template-columns:repeat(4,max-content);justify-content:space-between;gap:var(--s-4) var(--s-5);padding:var(--s-4) var(--s-5);width:min(1080px,100% - 2*var(--gut));background:oklch(28% .045 250);border:1px solid var(--line);border-radius:var(--r-3)}
.tile{display:flex;gap:var(--s-3);align-items:center;font-size:.82rem;color:var(--dim);font-weight:300;line-height:1.45}
.tile b{display:block;font:500 .7rem/1.6 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.ill{position:relative;flex:none;width:50px;height:50px;display:grid;place-items:center}
.ill::before{content:"";position:absolute;inset:2px;border-radius:50%;background:radial-gradient(circle,oklch(68% .13 225 / .26),oklch(68% .13 225 / 0) 68%);filter:blur(1.5px)}
.ill svg{position:relative;width:44px;height:44px}
/* тень иконки подложкой, не filter: drop-shadow на SVG с живыми деталями пересчитывался каждый кадр (владелец 17.09, кулеры) */
.ill::before{content:"";position:absolute;left:6px;right:6px;top:9px;bottom:3px;border-radius:50%;background:radial-gradient(ellipse at 50% 55%,oklch(0% 0 0 / .42) 0%,oklch(0% 0 0 / .18) 45%,transparent 72%);pointer-events:none}
.ill svg [class]{transform-box:fill-box;transform-origin:center}
/* 1. чистота: кольцо-датчик крутится, головка светит, жидкость во флаконе качается */
.js .ill .arc{animation:il-spin 14s linear infinite}
.js .ill .head{transform-box:view-box;transform-origin:36px 36px;animation:il-spin 14s linear infinite}
.js .ill .wave{animation:il-wave 2.8s linear infinite}
@keyframes il-spin{to{transform:rotate(360deg)}}
@keyframes il-wave{to{transform:translateX(-16px)}}
/* 2. отправки: две посылки идут по орбите вокруг метки, пунктир орбиты течёт */
.js .ill .orbit{animation:il-dash 3s linear infinite}
.ill .p1,.ill .p2{offset-path:path('M6 42a30 11 0 1 1 60 0a30 11 0 1 1-60 0');offset-rotate:0deg}
.js .ill .p1{animation:il-orb 9s linear infinite,il-depth 9s linear infinite}
.js .ill .p2{animation:il-orb 9s linear infinite,il-depth 9s linear infinite;animation-delay:-4.5s}
@keyframes il-depth{0%{scale:.82;opacity:.75}25%{scale:.68;opacity:.55}50%{scale:.9;opacity:.9}75%{scale:1.12;opacity:1}100%{scale:.82;opacity:.75}}
@keyframes il-dash{to{stroke-dashoffset:-16}}
@keyframes il-orb{to{offset-distance:100%}}
/* 3. оплата: коробка и монета ходят по кругу друг за другом, монета переворачивается, галочка светится */
.ill .q1,.ill .q2{offset-path:path('M36 12a24 24 0 1 1-.01 0');offset-rotate:0deg}
.js .ill .q1{animation:il-orb 8s linear infinite,il-depth2 8s linear infinite}
.js .ill .q2{animation:il-orb 8s linear infinite,il-depth2 8s linear infinite;animation-delay:-4s}
@keyframes il-depth2{0%,100%{scale:.85}50%{scale:1.1}}
.js .ill .coin{animation:il-flip 2.4s ease-in-out infinite}
.js .ill .okc{animation:il-glow 3s ease-in-out infinite}
@keyframes il-flip{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.18)}}
@keyframes il-glow{0%,100%{opacity:.55}50%{opacity:1}}
/* 4. на связи: голосовая волна в пузырьке, зелёная точка «онлайн» дышит */
.ill .e1,.ill .e2,.ill .e3,.ill .e4{transform-origin:50% 100%}
.js .ill .e1{animation:il-eq 1.6s ease-in-out infinite}
.js .ill .e2{animation:il-eq 1.6s ease-in-out infinite;animation-delay:-.4s}
.js .ill .e3{animation:il-eq 1.6s ease-in-out infinite;animation-delay:-.8s}
.js .ill .e4{animation:il-eq 1.6s ease-in-out infinite;animation-delay:-1.2s}
.js .ill .on{animation:il-pulse 2.4s ease-in-out infinite}
@keyframes il-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes il-pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.25);opacity:1}}

/* ---------- хиты: софиты ---------- */
.hits{padding:var(--sec) 0 var(--s-8);--n:5;--i:2;overflow:hidden}
.hits .shead{margin-bottom:0}
.row{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));align-items:end;width:min(1180px,100% - 2*var(--gut));margin-inline:auto;padding:3% 0 1%}
.vial{position:relative;aspect-ratio:3/4;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vial img{width:100%;height:100%;object-fit:cover;mix-blend-mode:lighten;-webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);filter:brightness(.22) saturate(.7);transform:scale(1.42);transform-origin:50% 62%;transition:filter var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out)}
.vial.on img{filter:brightness(1) saturate(1);transform:translateY(-10px) scale(1.5)}
.vial::after{content:"";position:absolute;inset:auto 12% 0;height:44px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,oklch(85% .07 220 / .22),transparent 70%);opacity:0;transform:translateY(40%);transition:opacity var(--t-slow) var(--e-out);pointer-events:none}
.vial.on::after{opacity:1}
.ctrls{display:flex;justify-content:center;align-items:center;gap:var(--s-3);margin-top:var(--s-5)}
.dots{display:flex;align-items:center;gap:var(--s-2);padding:0 var(--s-2)}
.dots i{width:24px;height:2px;border-radius:2px;background:var(--line-2);transition:background var(--t-mid)}
.dots i.on{background:var(--sky)}

/* ---------- категории: список + кадр (v2) ---------- */
.cats{padding:var(--sec) 0}
.catwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7);align-items:start}
.cgrid{counter-reset:cat;border-top:1px solid var(--line)}
.cgrid a{display:grid;grid-template-columns:2.8rem minmax(0,1fr) 1.4rem;grid-template-areas:"n b a" "n s a";align-items:center;column-gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--line);counter-increment:cat}
.cgrid a::before{content:counter(cat,decimal-leading-zero);grid-area:n;font:400 .8rem/1 var(--fd);letter-spacing:.1em;color:var(--sky)}
.cgrid b{grid-area:b;font:400 1.1rem/1.2 var(--fd);letter-spacing:.08em;text-transform:uppercase;transition:color var(--t-mid),letter-spacing var(--t-slow) var(--e-out)}
.cgrid small{grid-area:s;color:var(--muted);font-weight:300;font-size:.85rem;line-height:1.4}
.cgrid i{grid-area:a;width:14px;height:1px;background:var(--sky);opacity:0;transform:translateX(-8px);transition:opacity var(--t-mid),transform var(--t-mid) var(--e-out)}
.cgrid a.on b{color:oklch(80% .14 222);letter-spacing:.11em;text-shadow:0 0 18px oklch(68% .13 225 / .5)}
.cgrid a.on::before{color:oklch(80% .14 222)}
.cgrid a.on i{opacity:1;transform:none}
.cgrid a.on small{color:oklch(78% .03 230)}
.cpic{position:sticky;top:calc(76px + 46px + 24px);aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-3);background:var(--bg-2);isolation:isolate}
.cpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity var(--t-slow) var(--e-out),transform 1.4s var(--e-out)}
.cpic img.on{opacity:1;transform:none}
.cpic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,oklch(15% .035 250 / .05) 0%,oklch(15% .035 250 / .4) 40%,oklch(15% .035 250 / .82) 68%,oklch(15% .035 250 / .96) 100%);pointer-events:none}
.cpic .lbl{position:absolute;left:var(--s-5);top:var(--s-4);z-index:2;padding:var(--s-2) var(--s-3);background:var(--glass);border:1px solid var(--glass-line);font:500 .65rem/1 var(--fb);letter-spacing:.22em;text-transform:uppercase;border-radius:var(--pill);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cpic .lbl:empty{display:none}
.cpic .top{position:absolute;left:var(--s-5);right:var(--s-5);bottom:var(--s-4);z-index:2;display:grid;gap:var(--s-1)}
.cpic .top small{font:500 .6rem/1 var(--fb);letter-spacing:.22em;text-transform:uppercase;color:var(--sky-2);margin-bottom:var(--s-2)}
.cpic .top a{display:grid;grid-template-columns:1.6rem minmax(0,1fr) auto;gap:var(--s-3);align-items:baseline;padding:var(--s-2) 0;border-top:1px solid var(--line);font:400 .95rem/1.2 var(--fd);letter-spacing:.06em;text-transform:uppercase;transition:color var(--t-fast)}
.cpic .top a i{font:400 .7rem var(--fd);font-style:normal;color:var(--sky-2)}
.cpic .top a em{font:300 .8rem var(--fb);font-style:normal;letter-spacing:0;text-transform:none;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}

/* ---------- подтверждение качества: диптих (v2 «сделаны точно») ---------- */
.precise{padding:var(--sec) 0}
.precise .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-8);align-items:center}
.precise .copy>p{font-weight:300;color:var(--muted);max-width:56ch}
.qlist{margin:var(--s-5) 0 var(--s-6);border-top:1px solid var(--line)}
.qlist div{padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.qlist dt{font:400 1rem/1.3 var(--fd);letter-spacing:.04em}
.qlist dd{margin-top:2px;font-size:.9rem;font-weight:300;color:var(--muted);max-width:52ch}
.precise .art{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-3)}
.precise .art img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}

/* ---------- контроль качества: кадр + шаги (v2 «понятный путь») ---------- */
.process{padding:var(--sec) 0;background:var(--bg-2);border-block:1px solid var(--line)}
.phead{max-width:760px;margin:0 auto;text-align:center}
.phead .kicker{justify-content:center}
.phead .lead{margin:var(--s-4) auto 0;font-size:var(--fs-2)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6) var(--s-6);margin-top:var(--s-7);counter-reset:st}
.steps li{padding-top:var(--s-4);border-top:1px solid var(--line);counter-increment:st}
.steps li::before{content:counter(st,decimal-leading-zero);display:block;font:400 .8rem/1 var(--fd);letter-spacing:.1em;color:var(--sky)}
.steps b{display:block;margin-top:var(--s-3);font:400 1rem/1.3 var(--fd);letter-spacing:.12em;text-transform:uppercase}
.steps small{display:block;margin-top:var(--s-2);font-size:.9rem;font-weight:300;color:var(--muted);line-height:1.5}

/* ---------- формы: ряд из шести кадров (v2) ---------- */
.forms{padding:var(--sec) 0}
.fgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-4)}
.fgrid a{display:grid;gap:2px;text-align:center}
.fgrid .pr{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-2);background:var(--bg-2);margin-bottom:var(--s-3)}
.fgrid .pr img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--e-out)}
.fgrid b{font:400 .85rem/1.3 var(--fd);letter-spacing:.16em;text-transform:uppercase}
.fgrid small{font-size:.8rem;font-weight:300;color:var(--dim)}

/* ---------- акции: две карточки (v2) ---------- */
.promo{padding:var(--sec) 0;background:var(--bg-2);border-block:1px solid var(--line)}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.p{position:relative;display:grid;gap:var(--s-3);align-content:end;min-height:200px;padding:var(--s-6);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-3);transition:border-color var(--t-mid),background var(--t-mid),translate var(--t-mid) var(--e-out)}
.p i{font:400 var(--fs-4)/1 var(--fd);font-style:normal;color:var(--sky)}
.p b{font:400 var(--fs-3)/1.3 var(--fd);letter-spacing:.06em;text-transform:uppercase;max-width:22ch}
.p .arrow{position:absolute;right:var(--s-5);top:var(--s-5);width:36px;height:36px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;font-family:var(--fb);color:var(--sky-2);transition:transform var(--t-mid) var(--e-out),border-color var(--t-mid)}

/* ---------- о компании (v2 «почему») ---------- */
.why{padding:var(--sec) 0;overflow:hidden}
.why .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--s-8);align-items:center}
.why .panel p:not(.kicker){font-weight:300;color:var(--muted);max-width:56ch}
.why .panel p+p{margin-top:var(--s-3)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.facts b{display:block;font:300 1.5rem/1 var(--fd);white-space:nowrap;font-variant-numeric:tabular-nums}
.facts span{display:block;font:500 .65rem/1.4 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:var(--s-2)}
.why .big{aspect-ratio:3/4;max-height:640px;justify-self:center;overflow:hidden;-webkit-mask-image:radial-gradient(100% 90% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(100% 90% at 50% 50%,#000 55%,transparent 100%)}
.why .big img{width:100%;height:100%;object-fit:cover}

/* ---------- проверка кода ---------- */
.check{padding:var(--sec) 0;background:var(--bg-3);border-block:1px solid var(--line)}
.check .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7);align-items:center}
.check p{font-weight:300;color:var(--muted);max-width:44ch}
.crow{display:flex;gap:var(--s-2)}
.crow input{flex:1 1 auto;min-width:0;height:48px;padding:0 var(--s-5);border-radius:var(--pill);border:1px solid oklch(96% .01 230 / .2);background:oklch(96% .01 230 / .06);box-shadow:inset 0 1px 0 oklch(100% 0 0 / .08);color:var(--text);font-size:1rem;letter-spacing:.06em;transition:border-color var(--t-mid)}
.crow input::placeholder{color:var(--dim);letter-spacing:0}
.crow input:focus-visible{outline:2px solid var(--sky);outline-offset:2px;border-color:var(--sky)}
.crow input[aria-invalid="true"]{border-color:var(--warn)}
.cmsg{margin-top:var(--s-3);min-height:1.5em;font-size:var(--fs-1);color:var(--muted)}
.cmsg.err{color:var(--warn)}
.cpack{margin:0;width:100%;max-width:640px;justify-self:center;text-align:left;display:grid;grid-template-columns:minmax(120px,168px) minmax(0,1fr);gap:var(--s-4);align-items:center;padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-2);background:oklch(100% 0 0 / .55)}
.cpack img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--r-2) - 6px);display:block}
.cpack figcaption{display:grid;gap:.25em;font-size:var(--fs-1);line-height:1.45}
.cpack b{font-weight:500;color:var(--text)}
.cpack span{color:var(--muted);font-weight:300}
@media(max-width:760px){.cpack{grid-template-columns:minmax(96px,120px) minmax(0,1fr)}}

/* ---------- вопрос и ответ (v2) ---------- */
.faq{padding:var(--sec) 0}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 26px;align-items:center;gap:var(--s-4);padding:var(--s-4) 0;cursor:pointer;font:400 clamp(.95rem,1.4vw,1.1rem)/1.3 var(--fd);letter-spacing:.08em;text-transform:uppercase;transition:color var(--t-mid)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);background:linear-gradient(var(--sky),var(--sky)) center/10px 1px no-repeat,linear-gradient(var(--sky),var(--sky)) center/1px 10px no-repeat;transition:transform var(--t-mid) var(--e-out)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details>div{padding:0 0 var(--s-5);max-width:64ch;font-weight:300;color:var(--muted)}
.faq-list details>div p+p{margin-top:var(--s-3)}

/* ---------- статьи: три карточки (v2) ---------- */
.articles{padding:var(--sec) 0}
.agrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.a{display:grid;gap:var(--s-3);align-content:start;padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-3);min-height:200px;transition:border-color var(--t-mid),background var(--t-mid),translate var(--t-mid) var(--e-out)}
.a time{font:500 .7rem/1 var(--fb);letter-spacing:.16em;color:var(--sky-2);font-variant-numeric:tabular-nums}
.a h3{font:400 1rem/1.4 var(--fb);letter-spacing:0;text-transform:none}
.a span{margin-top:auto;font:500 .7rem/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- подвал (v2 «начнём разговор») ---------- */
footer{background:var(--bg-3);border-top:1px solid var(--line);padding:var(--sec) 0 0}
.ftitle{font-size:clamp(1.6rem,3vw,2.6rem)}
.ftitle::after{content:"";display:block;width:56px;height:1px;background:var(--sky);margin:var(--s-5) 0 var(--s-8)}
footer .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:var(--s-7) var(--s-6)}
footer .brand{display:grid;gap:var(--s-2);align-content:start;justify-items:start}
footer .brand .logo{margin-bottom:var(--s-3)}
footer .logo img{height:44px}
.bigl{font:300 1.1rem/1.3 var(--fd);letter-spacing:.02em}
footer .brand small{color:var(--dim);font-size:.8rem;margin-top:var(--s-3)}
.soc{display:flex;gap:var(--s-2);margin-top:var(--s-2)}
.soc a{display:inline-flex;align-items:center;height:36px;padding:0 var(--s-4);border-radius:var(--pill);border:1px solid var(--line-2);font:500 .7rem/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color var(--t-mid),border-color var(--t-mid)}
footer h4{font:500 .7rem/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;margin:0 0 var(--s-4);color:var(--sky-2)}
footer ul{display:grid;gap:var(--s-1);font-size:.88rem;font-weight:300;color:var(--muted)}
footer ul a{display:inline-block;padding:var(--s-1) 0;transition:color var(--t-fast)}
footer ul.top{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4)}
footer .legal{margin:var(--s-8) 0 0;padding-top:var(--s-5);border-top:1px solid var(--line);color:var(--dim);font-size:.78rem;font-weight:300;line-height:1.55;max-width:100ch}
footer .copy-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2) var(--s-5);padding:var(--s-5) 0 var(--s-6);font:500 .7rem/1.5 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* ---------- моушен: вход героя, появление групп при скролле (владелец 11.09: «больше моушен-составляющей») ---------- */
.js .rv{opacity:0;translate:0 24px;transition:opacity .9s var(--e-out),translate 1s var(--e-out);transition-delay:calc(var(--d,0) * 80ms)}
.js .rv.in{opacity:1;translate:0 0}
.js .hero .copy>*,.js .hero-card{animation:rise 1s var(--e-out) both}
.js .hero .copy>:nth-child(1){animation-delay:.1s}.js .hero .copy>:nth-child(2){animation-delay:.22s}.js .hero .copy>:nth-child(3){animation-delay:.34s}.js .hero .copy>:nth-child(4){animation-delay:.46s}.js .hero-card{animation-delay:.62s}
.js .hero .bg img{animation:kb 1.8s var(--e-out) both}
@keyframes rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes kb{from{scale:1.1;opacity:.5}to{scale:1.04;opacity:1}}

/* ---------- адаптив ---------- */
.contacts .ico.tel{display:none}
@media(max-width:1200px){.phone{display:none}.topline .wrap{justify-content:flex-start}.contacts .ico.tel{display:grid}}
@media(max-width:1000px){
  .contacts .btn.small{display:none}
  .menu-row{display:none}
  .menu-row.open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--bg-2);border-bottom:1px solid var(--line)}
  .menu-row.open .wrap{flex-direction:column;align-items:stretch;height:auto;padding:var(--s-3) 0;gap:0}
  .menu-row.open a{height:auto;display:block;padding:var(--s-3) 0;border:0;border-radius:0;border-bottom:1px solid var(--line);background:none;box-shadow:none;font:400 1rem/1.2 var(--fd);letter-spacing:.08em}
  .menu-row.open a::before{display:none}
  .menu-row.open a:last-child{border-bottom:0}
  .burger{display:grid}
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .catwrap,.precise .wrap,.why .wrap,.check .wrap{grid-template-columns:minmax(0,1fr)}
  .cpic{position:relative;top:auto}
  .cpic img{transform:none}
  .precise .art{order:-1}
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agrid{grid-template-columns:minmax(0,1fr)}
  footer .cols{grid-template-columns:1fr 1fr}
  .icons .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .topline{display:none}
  .head>.wrap{height:64px;gap:var(--s-3)}
  .logo img{height:30px}
  .finder{height:40px;padding:0 var(--s-2) 0 var(--s-4)}
  .finder input{font-size:16px}
  .contacts .ico:not(.cart):not(.tel){display:none}
  .hero{min-height:0;padding:var(--s-5) 0 var(--s-7)}
  .hero .bg{position:relative;inset:auto;aspect-ratio:4/5;margin:0 0 var(--s-5)}
  .hero .bg img{object-position:66% 50%}
  .hero .bg::before{background:none}
  .hero .bg::after{height:45%}
  .hero .wrap{gap:var(--s-5)}
  .hc-body{height:156px}
  .hc-body b{font-size:.85rem;max-height:3.75em}
  .hc-count{display:none}
  .hc-head{flex-wrap:wrap;padding:var(--s-2) var(--s-3)}
  .hc-foot{flex-direction:column;align-items:stretch}
  .hero .copy{max-width:none}
  .hero .cta{grid-template-columns:minmax(0,1fr)}
  .hero-facts{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
  .hero-card[hidden]{display:none!important}
.hero-card{width:100%}
  .icons .wrap{grid-template-columns:minmax(0,1fr)}
  .shead{flex-direction:column;align-items:flex-start;gap:var(--s-4)}
  .row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;width:100%;padding:0 22vw;scrollbar-width:none}
  .row::-webkit-scrollbar{display:none}
  .vial{flex:0 0 56vw;scroll-snap-align:center}
  .vial img,.vial.on img{transform:scale(1.15)}
  .cone{display:none}
  .cgrid a{grid-template-columns:2.2rem minmax(0,1fr) 1.2rem}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:minmax(0,1fr)}
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .crow{flex-direction:column}
  footer .cols{grid-template-columns:minmax(0,1fr)}
}
@media(hover:hover){
  .more:hover{color:var(--text);border-color:var(--sky)}
  .btn:hover{translate:0 -1px;box-shadow:inset 0 1px 0 oklch(100% 0 0 / .7),inset 0 -1px 0 oklch(55% .12 235 / .35),0 14px 34px -12px oklch(68% .13 225 / .75)}
  .btn:hover::before{translate:110% 0}
  .btn.line:hover{border-color:oklch(68% .13 225 / .7);background:oklch(96% .01 230 / .12);color:var(--text);box-shadow:inset 0 1px 0 oklch(100% 0 0 / .2),0 14px 30px -16px oklch(0% 0 0 / .7)}
  .arr:hover{border-color:var(--sky);background:oklch(68% .13 225 / .12)}
  .ico:hover{color:var(--text);border-color:var(--line-2);background:oklch(96% .01 230 / .1)}
  .menu-row a:hover{color:var(--ink);border-color:oklch(96% .01 230 / .4);box-shadow:inset 0 1px 0 oklch(100% 0 0 / .6),0 10px 24px -10px oklch(68% .13 225 / .7);transform:scale(1.06)}
  .menu-row a:hover::before{opacity:1}
  .menu-row.open a:hover{color:var(--text);transform:none;box-shadow:none;border-color:var(--line)}
  .menu-row.open a:hover::before{opacity:0}
  .hit:hover{background:var(--bg-3)}
  .cgrid a:hover b{color:oklch(80% .14 222);letter-spacing:.11em;text-shadow:0 0 18px oklch(68% .13 225 / .5)}
  .cgrid a:hover i{opacity:1;transform:none;border-color:oklch(80% .14 222)}
  .cpic .top a:hover{color:var(--sky-2)}
  .fgrid a:hover .pr img{transform:scale(1.04)}
  .p:hover{border-color:var(--line-2);background:var(--bg-2);translate:0 -3px}
  .p:hover .arrow{transform:translateX(4px);border-color:var(--sky)}
  .faq-list summary:hover{color:var(--sky-2)}
  .a:hover{border-color:var(--line-2);background:var(--bg-2);translate:0 -3px}
  .soc a:hover,footer ul a:hover{color:var(--text)}
  .soc a:hover{border-color:var(--sky)}
  .crow input:hover{border-color:var(--sky-2)}
}
@media(hover:none){.vial{cursor:default}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
}

/* ---------- правки владельца 16.09 ---------- */
/* 4. логотип в тёмной шапке светится постоянно, мягко (правка владельца 17.09: «не подмигнул, а всегда немного») */
.head .logo img{filter:none;transition:filter var(--t-mid)}   /* владелец 18.09: свечение только под мышкой */
.head.on-lit .logo img{filter:none}
.head .logo:hover img{filter:brightness(1.22) drop-shadow(0 0 8px oklch(68% .13 225 / .7)) drop-shadow(0 0 22px oklch(68% .13 225 / .4))}

/* 6. кнопки медленно подмигивают голубым — по всему сайту (правка владельца 17.09: «как у консультанта, но в голубой палитре, везде»).
   Три набора кадров, потому что у контурной, заливной и светлой кнопок разная базовая тень. Кнопки в карточках товаров не мигают: их шесть в ряд. */
@keyframes btn-wink{0%,72%,100%{box-shadow:inset 0 1px 0 oklch(100% 0 0 / .14),0 10px 24px -16px oklch(0% 0 0 / .7)}
  84%{box-shadow:inset 0 1px 0 oklch(100% 0 0 / .22),0 0 0 3px oklch(68% .13 225 / .18),0 0 26px oklch(68% .13 225 / .35),0 10px 26px -14px oklch(68% .13 225 / .5)}}
@keyframes btn-wink-fill{0%,72%,100%{box-shadow:inset 0 1px 0 oklch(100% 0 0 / .6),inset 0 -1px 0 oklch(55% .12 235 / .35),0 10px 28px -12px oklch(68% .13 225 / .6)}
  84%{box-shadow:inset 0 1px 0 oklch(100% 0 0 / .7),inset 0 -1px 0 oklch(55% .12 235 / .35),0 0 0 3px oklch(68% .13 225 / .22),0 0 28px oklch(68% .13 225 / .5),0 10px 28px -12px oklch(68% .13 225 / .7)}}
@keyframes btn-wink-lit{0%,72%,100%{box-shadow:inset 0 1px 0 oklch(100% 0 0 / .5),0 10px 22px -18px oklch(24% .045 250 / .6)}
  84%{box-shadow:inset 0 1px 0 oklch(100% 0 0 / .5),0 0 0 3px oklch(68% .13 225 / .22),0 0 24px oklch(68% .13 225 / .4),0 10px 22px -18px oklch(24% .045 250 / .6)}}
.js .btn{animation:btn-wink-fill 5.5s var(--e-out) infinite}
.js .btn.line{animation-name:btn-wink}
.js .litband .btn.line,.apx-lit .btn.line{animation-name:btn-wink-lit}
.js .hbuy .btn,.js .hc-foot .btn{animation:none}
.js .head .btn{animation:none}
.js .hero .cta .btn.line{animation-delay:-2.2s}
.js .qbtn{animation-delay:-3.1s}
.js .check .btn{animation-delay:-4.3s}
.js .fmsg .btn{animation-delay:-.7s}
@media(hover:hover){
  .btn:hover{animation:none}
  .btn.line:hover{border-color:oklch(68% .13 225 / .8);color:var(--sky-2);background:oklch(68% .13 225 / .14);
    box-shadow:inset 0 1px 0 oklch(100% 0 0 / .2),0 0 0 3px oklch(68% .13 225 / .14),0 12px 28px -14px oklch(68% .13 225 / .55)}
  .litband .btn.line:hover{color:var(--deep);background:oklch(68% .13 225 / .16)}
}

/* 9. шаги контроля качества подсвечиваются под мышкой */
.steps li{transition:border-color var(--t-mid),translate var(--t-mid) var(--e-out)}
.steps li::before{transition:color var(--t-mid)}
.steps b{transition:color var(--t-mid)}
@media(hover:hover){
  .steps li:hover{border-color:oklch(68% .13 225 / .8);translate:0 -3px}
  .steps li:hover::before{color:var(--sky-2)}
  .steps li:hover b{color:var(--sky-2)}
  .steps li:hover small{color:var(--text)}
}
@media(prefers-reduced-motion:reduce){
  .js .btn{animation:none}
}

/* ---------- 12. светлый лист и переливы (правка владельца) ----------
   Приём: сайт остаётся тёмно-синим, но в середине один светлый разворот — «о компании» + «проверка кода».
   Стыки не резкие: между секциями лежит полоса-перелив, по ней медленно ходит свет. */
.lit,.litband,.apx-lit{
  --bg:oklch(96.5% .006 235);--bg-2:oklch(93.5% .011 235);--bg-3:oklch(90% .015 235);
  --text:oklch(24% .045 250);--muted:oklch(41% .035 248);--dim:oklch(52% .028 245);
  --line:oklch(24% .045 250 / .14);--line-2:oklch(24% .045 250 / .26);
  --sky:oklch(52% .14 235);--sky-2:oklch(44% .13 243);
  --glass:oklch(100% 0 0 / .7);--glass-line:oklch(24% .045 250 / .1);
  background:var(--bg);color:var(--text)
}
.litband .btn.line{background:oklch(24% .045 250 / .05);border-color:oklch(24% .045 250 / .22);color:var(--text);
  box-shadow:inset 0 1px 0 oklch(100% 0 0 / .5),0 10px 22px -18px oklch(24% .045 250 / .6)}
.litband .crow input,.apx-lit .crow input{background:oklch(100% 0 0 / .8);border-color:oklch(24% .045 250 / .2);color:var(--text);
  box-shadow:inset 0 1px 2px oklch(24% .045 250 / .08)}
.litband .rule{background:linear-gradient(90deg,var(--sky),transparent)}
.litband .kicker::before{background:linear-gradient(90deg,var(--sky),transparent)}

/* полоса-перелив между тёмным и светлым */
  translate:-40% 0;will-change:translate}
@media(prefers-reduced-motion:reduce){.js .fade::after{animation:none}}

/* 13. проверка кода: уже, по центру, с подсказкой где искать код */
.check{border-block:0}
.litband .check{background:none;border-block:0}
.check.lit{background:var(--bg)}
.check .wrap{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:var(--s-5);max-width:760px}
.check .check-form{width:100%;max-width:520px}
.check p{max-width:52ch;margin-inline:auto}
.check .hint{margin-top:var(--s-4);font-size:var(--fs-0);color:var(--dim)}
.check .cmsg{text-align:center}
/* на светлом кадр не растворяется в фон, а лежит карточкой */
.litband .big{-webkit-mask-image:none;mask-image:none;border-radius:var(--r-3);
  box-shadow:0 30px 60px -30px oklch(24% .045 250 / .45),0 2px 6px -2px oklch(24% .045 250 / .18)}

/* ---------- 1, 2, 5. хиты: сцена со световой фермой (правка владельца) ----------
   Было: кадры вылезали на заголовок, конус света шёл из ниоткуда, карточка висела поверх.
   Стало: сцена в своих границах, сверху ферма с лампами (свет идёт от неё), подпись товара — полка внутри сцены. */
.hits{padding:var(--sec) 0 var(--s-8);--n:5;--i:2;overflow:visible}
.hits .shead{margin-bottom:var(--s-5)}
.stage{position:relative;overflow:hidden;border-radius:var(--r-3);border:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 0%,oklch(24% .05 250) 0%,oklch(16% .04 250) 55%,oklch(13% .03 250) 100%);
  padding:0 0 0;isolation:isolate}

/* ферма со светильниками (.rig) осталась только в наших правках для телефона: сама разметка фермы
   в вёрстку так и не попала, а тела её правил приехали сюда без селекторов и висели битым куском
   (найдено 22.09.2026 при возврате софитов). Свет на сцене даёт градиент .stage и подсветка .vial.on. */

/* ряд флаконов внутри сцены */
.hits .row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));align-items:end;
  width:100%;margin:0;padding:56px 0 0}
.vial{overflow:hidden}
.vial img{transform:scale(1.18);transform-origin:50% 58%}
.vial.on img{transform:translateY(-6px) scale(1.24)}

/* метка вектора под флаконом */
.vtag{position:absolute;left:50%;bottom:6px;translate:-50% 0;z-index:3;
  font:500 .6rem/1 var(--fb);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  padding:5px 10px;border-radius:var(--pill);border:1px solid transparent;white-space:nowrap;
  opacity:.45;transition:opacity var(--t-slow) var(--e-out),color var(--t-slow),border-color var(--t-slow),translate var(--t-slow) var(--e-out)}
.vial.on .vtag{opacity:1;color:var(--sky-2);border-color:oklch(85% .07 220 / .35);background:oklch(20% .04 250 / .55);
  translate:-50% -4px}
.js .vial.on .vtag{animation:vtag-in .7s var(--e-out) both}
@keyframes vtag-in{from{opacity:0;translate:-50% 8px}to{opacity:1;translate:-50% -4px}}

/* подпись активного товара — полка внутри сцены, а не карточка поверх */
.spotbar{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4) var(--s-6);
  align-items:end;padding:var(--s-5) var(--s-6) var(--s-5);border-top:1px solid var(--line);
  background:linear-gradient(180deg,oklch(13% .03 250 / 0),oklch(13% .03 250 / .92) 42%);
  transition:opacity var(--t-mid),filter var(--t-mid)}
.spotbar.swap{opacity:0;filter:blur(3px)}
.spotbar .name{font:400 var(--fs-4)/1.1 var(--fd);letter-spacing:.04em;text-transform:uppercase}
.spotbar .form{margin-top:var(--s-1);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.spotbar .task{margin-top:var(--s-2);font-size:var(--fs-1);font-weight:300;color:var(--muted)}
.spotbar .buy{display:flex;align-items:flex-end;gap:var(--s-5)}
.spotbar .pr{display:grid;justify-items:end;gap:var(--s-1)}
.spotbar .price{font:400 var(--fs-3)/1 var(--fd);font-variant-numeric:tabular-nums;color:var(--sky-2)}
.spotbar .stock{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ok)}
.spotbar .row2{display:flex;gap:var(--s-2)}

@media(max-width:900px){
  .hits .row{padding-top:48px}
  .spotbar{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .spotbar .buy{justify-content:space-between;width:100%}
}
@media(max-width:760px){
  .stage{border-radius:var(--r-2)}
  .hits .row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;padding:44px 22vw 0;scrollbar-width:none}
  .rig .bar,.rig .lamps{left:0;right:0}
  .vtag{font-size:.55rem;letter-spacing:.14em}
  .spotbar{padding:var(--s-4)}
  .spotbar .row2{width:100%}
  .spotbar .row2 .btn{flex:1}
}
/* кадры растворяются друг в друга шире, чтобы не было вертикальных стыков */
.vial img{-webkit-mask-image:linear-gradient(to right,transparent,#000 24%,#000 76%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 24%,#000 76%,transparent)}

/* ---------- 7. блок качества как мини-история (правка владельца) ---------- */
.qart{position:relative;overflow:hidden;border-radius:var(--r-3)}
.qart .qf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.06;
  transition:opacity .9s var(--e-out),scale 1.6s var(--e-out)}
.qart .qf.on{opacity:1;scale:1;position:relative}
.qart .qf.on~.qf{position:absolute}
.qlist>div{position:relative;padding-left:0;transition:color var(--t-mid),padding-left var(--t-slow) var(--e-out)}
.qlist>div::before{content:"";position:absolute;left:-14px;top:18px;bottom:14px;width:2px;border-radius:2px;
  background:var(--sky);opacity:0;transition:opacity var(--t-mid)}
.qlist>div.on{padding-left:14px}
.qlist>div.on::before{opacity:1}
.qlist>div.on dt{color:var(--sky-2)}
.qlist>div.on dd{color:var(--text)}
.qlist>div dt,.qlist>div dd{transition:color var(--t-mid)}
/* финал: кнопка загорается, луч уходит вверх, у заголовка проявляется знак */
.qbtn.glow{animation:qbtn-glow 1.5s var(--e-out) 2}
@keyframes qbtn-glow{0%,100%{box-shadow:inset 0 1px 0 oklch(100% 0 0 / .6),0 10px 28px -12px oklch(68% .13 225 / .6)}
  50%{box-shadow:inset 0 1px 0 oklch(100% 0 0 / .7),0 0 0 6px oklch(68% .13 225 / .18),0 14px 34px -10px oklch(68% .13 225 / .85)}}
.qbeam{position:absolute;left:0;bottom:64px;width:2px;height:calc(100% - 120px);pointer-events:none;overflow:hidden;opacity:0}
.qbeam::after{content:"";position:absolute;left:0;width:2px;height:78px;border-radius:2px;
  background:linear-gradient(180deg,oklch(97% .03 220),oklch(85% .07 220 / .15));
  box-shadow:0 0 12px 2px oklch(85% .07 220 / .45);translate:0 100%}
.qbeam.fly{opacity:1}
.qbeam.fly::after{animation:qbeam-fly 1.15s var(--e-out) forwards}
@keyframes qbeam-fly{0%{translate:0 100%;opacity:0}12%{opacity:1}88%{opacity:1}100%{translate:0 -120%;opacity:0}}
.qseal{width:clamp(30px,3.4vw,44px);height:auto;vertical-align:-.12em;margin-left:var(--s-3);opacity:0;scale:.75;
  transition:opacity .8s var(--e-out),scale .8s var(--e-out)}
.qseal.on{opacity:1;scale:1}
@media(prefers-reduced-motion:reduce){.qbeam,.qbtn.glow{animation:none}.qseal{transition:none}}

/* ---------- 8. контроль качества: кадр во всю ширину, текст внутри кадра ---------- */
.process{padding:0 0 var(--sec);background:var(--bg-2);border-block:1px solid var(--line)}
.band{position:relative;min-height:clamp(360px,44vw,560px);display:grid;align-items:end;overflow:hidden}
.bandpic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,oklch(13% .03 250 / .55) 0%,oklch(13% .03 250 / .12) 34%,oklch(13% .03 250 / .82) 88%,var(--bg-2) 100%)}
.bandtext{position:relative;z-index:1;padding-block:var(--s-8) var(--s-7)}
.band .phead{max-width:820px;margin:0;text-align:left}
.band .phead .kicker{justify-content:flex-start}
.band .phead .lead{margin-left:0;color:var(--text)}
.process .steps{margin-top:var(--s-7)}
@media(max-width:760px){
  .band{min-height:auto;display:block}
  .bandpic{position:relative;height:clamp(200px,52vw,280px)}
  .band::after{inset:auto 0 0;height:60%}
  .bandtext{padding-block:var(--s-5) 0}
}

/* ---------- 10. формы выпуска: подпись живёт внутри кадра ---------- */
.fgrid{gap:var(--s-3)}
.fgrid a{position:relative;display:block;text-align:left;border-radius:var(--r-2);overflow:hidden;isolation:isolate}
.fgrid .pr{margin:0;border-radius:0;aspect-ratio:4/5}
.fgrid .pr img{transition:transform 1.1s var(--e-out),filter var(--t-slow)}
.fgrid a::after{content:"";position:absolute;inset:auto 0 0;height:62%;pointer-events:none;
  background:linear-gradient(180deg,oklch(13% .03 250 / 0),oklch(11% .03 250 / .88));transition:opacity var(--t-mid)}
.fmeta{position:absolute;left:0;right:0;bottom:0;z-index:1;display:grid;gap:2px;padding:var(--s-4) var(--s-4) var(--s-4)}
.fgrid b{font-size:.78rem;letter-spacing:.14em}
.fgrid small{font-size:.72rem;color:var(--muted)}
@media(hover:hover){
  .fgrid a:hover .pr img{transform:scale(1.06)}
  .fgrid a:hover{outline:1px solid oklch(85% .07 220 / .4);outline-offset:0}
}

/* ---------- 11. акции: два предложения, каждое со своим кадром и действием ---------- */
.pgrid{grid-template-columns:1.25fr 1fr;gap:var(--s-4)}
.pgrid .p{position:relative;display:block;min-height:clamp(260px,26vw,340px);border-radius:var(--r-3);overflow:hidden;
  border:1px solid var(--line);isolation:isolate;transition:translate var(--t-mid) var(--e-out),border-color var(--t-mid)}
.pgrid .p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
.pgrid .p::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,oklch(13% .03 250 / .25) 0%,oklch(12% .03 250 / .72) 55%,oklch(11% .03 250 / .94) 100%)}
.ptext{position:relative;z-index:1;display:grid;align-content:end;gap:var(--s-3);height:100%;padding:var(--s-6)}
.ptext b{font:400 clamp(1.25rem,2.1vw,1.85rem)/1.2 var(--fd);letter-spacing:.04em;text-transform:uppercase}
.ptext small{font-size:var(--fs-1);font-weight:300;color:var(--muted);max-width:40ch}
.pgo{display:inline-flex;align-items:center;gap:var(--s-2);font:500 .72rem/1 var(--fb);letter-spacing:.18em;
  text-transform:uppercase;color:var(--sky-2)}
.pgo i{transition:translate var(--t-mid) var(--e-out)}
.pnote{margin-top:var(--s-4);font-size:var(--fs-0);color:var(--dim);max-width:70ch}
@media(hover:hover){
  .pgrid .p:hover{translate:0 -4px;border-color:oklch(85% .07 220 / .45)}
  .pgrid .p:hover img{transform:scale(1.05)}
  .pgrid .p:hover .pgo i{translate:5px 0}
}
@media(max-width:760px){.pgrid{grid-template-columns:minmax(0,1fr)}.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.fgrid a::after{height:72%}
.fgrid small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* уточнение формы («для инъекций», «липосомальная формула») живёт над названием: раньше стояло перед числом
   и на узкой плитке съедало его («54 позиц…», у кремов число пропадало целиком). Низ плиток выровнен по всем формам. */
.fgrid .fq{font:300 .72rem/1.25 var(--fb);font-style:normal;color:var(--muted)}
.ptext b{max-width:15ch}

/* ---------- 17. статьи: кадр, тема, заголовок ---------- */
.agrid .a{display:grid;gap:var(--s-3);border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;
  padding:0 0 var(--s-5);background:var(--bg-2);transition:translate var(--t-mid) var(--e-out),border-color var(--t-mid)}
.apic{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-3)}
.apic img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out)}
.agrid .atop{display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-5);margin-top:var(--s-2)}
.agrid time{font:500 .68rem/1 var(--fb);letter-spacing:.14em;color:var(--dim)}
.agrid .atop em{font-style:normal;font:500 .62rem/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--sky-2);
  padding:5px 10px;border:1px solid oklch(85% .07 220 / .3);border-radius:var(--pill)}
.agrid h3{margin:0;padding:0 var(--s-5);font:400 1.05rem/1.35 var(--fd);letter-spacing:.03em}
.ago{display:inline-flex;align-items:center;gap:var(--s-2);padding:0 var(--s-5);font:500 .68rem/1 var(--fb);
  letter-spacing:.18em;text-transform:uppercase;color:var(--sky-2)}
.ago i{transition:translate var(--t-mid) var(--e-out)}
@media(hover:hover){
  .agrid .a:hover{translate:0 -4px;border-color:oklch(85% .07 220 / .4)}
  .agrid .a:hover .apic img{transform:scale(1.05)}
  .agrid .a:hover .ago i{translate:5px 0}
}

/* ---------- 14-16. вопрос-ответ: один ровный столбец, первый ответ ведёт в чат ---------- */
.faq-list{max-width:900px;margin-inline:auto}
.faq-list details{border-bottom:1px solid var(--line);padding:0}
.faq-list summary{padding:var(--s-5) 0}
.faq-list details[open] summary{color:var(--sky-2)}
.faq-list details>div{max-width:72ch}
.lead-q summary{font-size:clamp(1.05rem,1.6vw,1.25rem)}
.qcta{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-4)}
.qcta span{font-size:var(--fs-0);color:var(--dim)}

/* ---------- 18. подвал: водяной знак вместо прямого лого ---------- */
footer{position:relative;overflow:hidden;background:oklch(12% .03 250);border-top:0}
.fmark{position:absolute;left:50%;bottom:-18%;translate:-50% 0;width:min(1500px,118%);aspect-ratio:1006/221;
  background:url(../img/site/logo_h.png) center/contain no-repeat;opacity:.05;pointer-events:none;filter:grayscale(1) brightness(2.6)}
.ftop{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-6);flex-wrap:wrap;
  padding-bottom:var(--s-7);border-bottom:1px solid var(--line)}
.fphone{display:block;margin-top:var(--s-4);font:400 clamp(1.6rem,3.4vw,2.6rem)/1 var(--fd);letter-spacing:.04em;color:var(--text)}
.fmail{display:inline-block;margin-top:var(--s-3);font-size:var(--fs-2);color:var(--muted)}
.fmsg p{margin:0 0 var(--s-3);font-size:var(--fs-1);color:var(--dim)}
.fmsg .soc{display:flex;gap:var(--s-2)}
footer .cols{position:relative;padding-top:var(--s-7)}
.copy-row .made{color:var(--dim)}
@media(max-width:760px){.ftop{flex-direction:column;align-items:flex-start;gap:var(--s-5)}}
/* мессенджеры в подвале — обычные кнопки, старый стиль .soc a их не перекрашивает */
.fmsg .soc a.btn{height:42px;color:var(--ink);border-color:oklch(96% .01 230 / .4)}
.fmsg .soc a.btn.line{color:var(--text);border-color:oklch(96% .01 230 / .22)}
/* 5. полка активного товара на телефоне: цена строкой, кнопки во всю ширину */
@media(max-width:760px){
  .spotbar{grid-template-columns:minmax(0,1fr);gap:var(--s-4);padding:var(--s-4) var(--s-4) var(--s-5)}
  .spotbar .name{font-size:clamp(1.3rem,6vw,1.7rem)}
  .spotbar .buy{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);width:100%}
  .spotbar .pr{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);width:100%}
  .spotbar .price{white-space:nowrap}
  .spotbar .stock{white-space:nowrap}
  .spotbar .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);width:100%}
  .spotbar .row2 .btn{width:100%;padding:0 var(--s-3);font-size:.68rem;letter-spacing:.1em}
}

/* шапка светлеет, когда под ней светлый лист (иначе тёмное стекло мутит бумагу) */
.head.on-lit{background:oklch(97% .004 235 / .82);border-bottom-color:oklch(24% .045 250 / .12)}
.head.on-lit .phone,.head.on-lit .finder input,.head.on-lit .menu-row a{color:oklch(24% .045 250)}
.head.on-lit .finder{background:oklch(24% .045 250 / .05);border-color:oklch(24% .045 250 / .16)}
.head.on-lit .finder input::placeholder,.head.on-lit .finder svg{color:oklch(50% .03 245)}
.head.on-lit .ico{color:oklch(38% .04 248);border-color:oklch(24% .045 250 / .18);background:oklch(24% .045 250 / .04)}
/* бургер на светлой шапке: красим полоски, а не саму кнопку (было: кнопка становилась тёмным квадратом 44×44) */
.head.on-lit .burger i,.head.on-lit .burger i::after{background:oklch(24% .045 250)}
.head.on-lit .burger i{box-shadow:0 -7px 0 oklch(24% .045 250),0 7px 0 oklch(24% .045 250)}
.head.on-lit .burger[aria-expanded="true"] i{box-shadow:none}
.head.on-lit .menu-row{background:oklch(94% .008 235 / .92);border-color:oklch(24% .045 250 / .1)}
.head.on-lit .drop{background:oklch(97% .004 235 / .96);border-color:oklch(24% .045 250 / .12);color:oklch(24% .045 250)}
.head,.head .phone,.head .ico,.head .finder,.menu-row,.menu-row a{transition:background var(--t-mid),color var(--t-mid),border-color var(--t-mid)}
.head.on-lit .ico img{filter:invert(1) brightness(.34)}

/* находки ревью 16.09 */
/* 5. кнопка «проверить код» на узком экране переносится, а не вылезает */
@media(max-width:420px){
  .qbtn,.check .btn{white-space:normal;height:auto;min-height:48px;padding:12px var(--s-4);text-align:center;line-height:1.25}
  .crow{flex-direction:column}
  .crow input{width:100%}
}
/* 6. в акциях остался старый внутренний отступ .p, из-за него текст жался вдвое */
.pgrid .p{padding:0}
/* 10. на телефоне ряд прокручивается, а лампы стоят на месте: оставляем только планку */
@media(max-width:760px){
  .rig .lamps{display:none}
  .cone{display:none}
}

/* находки второго ревью 16.09 */
/* 4. лампы фермы стоят ровно над своими флаконами (сетка та же, что у ряда) */
/* 5. на светлом листе предупреждение и «в наличии» должны читаться */
.lit,.litband,.apx-lit{--warn:oklch(52% .13 70);--ok:oklch(48% .12 155)}
/* 6. якоря меню не прячут заголовок под шапкой */
section[id],footer[id]{scroll-margin-top:clamp(72px,8vw,128px)}
/* 7. луч в блоке качества привязан к колонке, а не к случайному предку */
.precise .copy{position:relative}
/* 12. фокус на крайних флаконах не срезается краем сцены */
.vial:focus-visible{outline:2px solid var(--sky);outline-offset:-3px;border-radius:var(--r-1)}
/* 13. перелив начинается тем же цветом, что и секция акций над ним */
/* 11. стрелка в акциях держит свой размер сама, без наследства от старого .p i */
.pgo i{font-size:1rem;line-height:1}

/* ---------- 16.09, второй заход: сцена без «фонариков», мягкий свет, без швов ---------- */
.stage{border:0;border-radius:0;overflow:visible;background:none;padding:0}
/* свет: широкое пятно сверху над активным флаконом, растворяется в фон */
.stage::before{content:"";position:absolute;left:0;right:0;top:-6%;height:74%;pointer-events:none;z-index:0;
  background:radial-gradient(48% 62% at calc((var(--i) + .5) * (100% / var(--n))) 0%,
    oklch(90% .05 222 / .22) 0%,oklch(78% .08 225 / .10) 34%,oklch(68% .13 225 / 0) 72%);
  transition:background var(--t-slow) var(--e-out);filter:blur(6px)}
.hits .row{padding:var(--s-7) 0 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.vial{overflow:visible}
.vial img{filter:brightness(.26) saturate(.72)}
.vial.on img{filter:brightness(1.04) saturate(1)}
/* полка товара: без рамки и плашки, просто текст на общем фоне */
.spotbar{border-top:0;background:none;padding:var(--s-6) 0 0;max-width:1000px;margin-inline:auto}
.spotbar::before{content:"";position:absolute;left:50%;top:0;translate:-50% 0;width:min(560px,90%);height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
/* кадры растворяются в фон со всех сторон — никаких прямоугольных швов */
.hits .row{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),
    linear-gradient(180deg,transparent 0%,#000 18%,#000 72%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),
    linear-gradient(180deg,transparent 0%,#000 18%,#000 72%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.vtag{bottom:14%}
/* маска — только на сами кадры, чтобы подписи задач оставались чёткими */
.vial img{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),
    linear-gradient(180deg,transparent 0%,#000 16%,#000 74%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),
    linear-gradient(180deg,transparent 0%,#000 16%,#000 74%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.vtag{bottom:10%;background:oklch(16% .04 250 / .7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vial .vtag{opacity:.7;color:var(--muted)}
.vial.on .vtag{opacity:1;color:var(--sky-2)}

/* ---------- категории: крупнее кадр, живая подсветка строки, без рамок ---------- */
.catwrap{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,4vw,64px)}
.cgrid{border-top:0}
.cgrid a{position:relative;grid-template-columns:2.6rem minmax(0,1fr) 1.6rem;padding:var(--s-5) var(--s-4) var(--s-5) var(--s-3);
  border-bottom:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;
  transition:background var(--t-mid),padding-left var(--t-slow) var(--e-out)}
.cgrid a::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,oklch(68% .13 225 / .16),oklch(68% .13 225 / .04) 42%,transparent 78%);
  transition:opacity var(--t-slow) var(--e-out)}
.cgrid a.on{padding-left:var(--s-5)}
.cgrid a.on::after{opacity:1}
.cgrid a.on::before{color:oklch(80% .14 222)}
.cgrid small{color:var(--dim);transition:color var(--t-mid)}
.cgrid a.on small{color:oklch(78% .03 230)}
.cgrid i{width:18px;height:18px;background:none;opacity:0;transform:translateX(-6px);
  border-right:1px solid var(--sky-2);border-top:1px solid var(--sky-2);rotate:45deg;justify-self:end}
.cgrid a.on i{opacity:1;transform:none;border-color:oklch(80% .14 222);border-width:1.5px}
/* кадр задачи: крупнее и растворён в фон, а не приклеен плашкой */
.cpic{aspect-ratio:5/4;border-radius:var(--r-3);background:none}
.cpic img{-webkit-mask-image:radial-gradient(124% 112% at 50% 44%,#000 58%,transparent 100%);
  mask-image:radial-gradient(124% 112% at 50% 44%,#000 58%,transparent 100%)}

/* ---------- бесшовность: переливы длиннее и мягче, кадры уходят за край, границы секций сняты ---------- */
/* 8, 9. перелив: длинный, многоступенчатый, без заметной границы */
  oklch(19% .045 250) 0%,oklch(22% .045 248) 14%,oklch(30% .04 246) 30%,oklch(44% .035 243) 46%,
  oklch(62% .025 240) 62%,oklch(80% .015 238) 78%,oklch(91% .01 236) 90%,oklch(96.5% .006 235) 100%)}
  oklch(96.5% .006 235) 0%,oklch(91% .01 236) 12%,oklch(80% .015 238) 24%,oklch(62% .025 240) 40%,
  oklch(44% .035 243) 56%,oklch(30% .04 246) 72%,oklch(22% .045 248) 88%,oklch(15% .035 250) 100%)}

/* 12. швы между секциями убраны */
.process,.promo,.check,footer{border-block:0;border-top:0}
.process{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 18%,var(--bg-2) 82%,var(--bg) 100%)}
.promo{background:var(--bg)}
.band::after{background:linear-gradient(180deg,oklch(13% .03 250 / .5) 0%,oklch(13% .03 250 / .1) 30%,
  oklch(15% .035 250 / .72) 76%,var(--bg-2) 100%)}

/* 6, 11. кадры не вставки: уходят за правый край и растворяются в фон */
.why .wrap{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center}
.litband .big,.why .big{border-radius:0;box-shadow:none;max-height:none;aspect-ratio:4/5;justify-self:stretch;
  margin-right:calc(-1 * min(120px, max(var(--gut),(100vw - var(--wrap)) / 2)));
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%),
    linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%),
    linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.precise .art.qart{border-radius:0;overflow:visible;
  margin-right:calc(-1 * min(120px, max(var(--gut),(100vw - var(--wrap)) / 2)))}
.qart .qf{border-radius:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%),
    linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%),
    linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media(max-width:900px){
  .lit .big,.why .big,.litband .big,.qart{margin-right:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%)}
}

/* 4. подвал компактнее, водяной знак по центру */
footer{background:linear-gradient(180deg,oklch(12% .03 250) 0%,oklch(11% .03 250) 60%,oklch(11% .03 250) 100%)}
footer .wrap{max-width:1120px}
.fmark{bottom:auto;top:50%;translate:-50% -50%;width:min(1080px,92%);opacity:.04}
.ftop{padding-bottom:var(--s-6)}
footer .cols{padding-top:var(--s-6);gap:var(--s-5) var(--s-6)}
.fphone{margin-top:var(--s-3)}
/* светлый лист продолжается на вопрос-ответ и статьи */
.litband .articles{padding-bottom:var(--s-9)}
.litband .agrid .a{background:oklch(100% 0 0 / .6);border-color:oklch(24% .045 250 / .1)}
.litband .agrid .apic{background:oklch(90% .015 235)}
.litband .faq-list summary::after{border-color:oklch(24% .045 250 / .22)}
.litband .qcta span{color:oklch(48% .03 245)}
/* колонки подвала распределяются по всей ширине, без пустоты справа */
footer .cols{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:var(--s-6);justify-content:space-between}
@media(max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}

/* ---------- заход 3: полоса фактов во всю ширину, полка товара собрана, светлый кадр ---------- */
/* 1. полоса фактов: сплошная полоса без скруглений, содержимое в контейнере */
.icons{padding:0;background:oklch(21% .04 250)}
.icons .wrap{width:min(1080px,100% - 2*var(--gut));background:none;border:0;border-radius:0;
  padding:var(--s-5) 0;grid-template-columns:repeat(4,max-content);justify-content:space-between}
/* 2. полка активного товара: имя и цена в одной связке, кнопки рядом */
.spotbar{max-width:860px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-5) var(--s-6);
  padding:var(--s-5) 0 0}
.spotbar .si{display:grid;gap:2px}
.spotbar .name{font-size:clamp(1.3rem,2.2vw,1.9rem)}
.spotbar .task{color:var(--dim);font-size:var(--fs-0)}
.spotbar .buy{display:grid;grid-auto-flow:column;align-items:center;gap:var(--s-5)}
.spotbar .pr{justify-items:end;gap:0}
.spotbar .price{font-size:var(--fs-4)}
/* 3. светлый кадр на светлом листе: мягкий край, без тёмного пятна */
.litband .big{aspect-ratio:16/11;align-self:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%),
    linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%),
    linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%)}
.litband .big img{object-position:62% 50%}
/* вопрос-ответ: список выровнен с заголовком секции, а не по центру */
.faq-list{margin-inline:0;max-width:940px}
/* перед переливом и после него секция не добавляет лишней пустоты — перелив уже держит воздух */
section:has(+ .fade),div:has(+ .fade){padding-bottom:clamp(32px,4vw,56px)}
footer{padding-top:clamp(40px,5vw,72px)}
/* провалы между секциями подтянуты */
.hits{padding-bottom:var(--s-6)}
.cats{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.precise{padding-top:clamp(48px,5.5vw,84px)}
/* история качества: видно, что она идёт — полоска прогресса у активного пункта */
.qlist>div::after{content:"";position:absolute;left:-14px;top:18px;width:2px;height:0;border-radius:2px;
  background:var(--sky-2);opacity:0}
.qlist>div.on.run::after{opacity:1;animation:qrun 2.8s linear forwards}
@keyframes qrun{from{height:0}to{height:calc(100% - 32px)}}
/* полоса фактов на узких экранах складывается, а не режется */
@media(max-width:1100px){
  .icons .wrap{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:var(--s-4) var(--s-5)}
}
@media(max-width:560px){
  .icons .wrap{grid-template-columns:minmax(0,1fr)}
  .tile{font-size:.8rem}
}
/* полка товара на телефоне: всё в столбик, цена и наличие в строку, кнопки во всю ширину */
@media(max-width:760px){
  .spotbar{grid-template-columns:minmax(0,1fr);gap:var(--s-4);padding:var(--s-5) 0 0;max-width:100%}
  .spotbar .buy{grid-auto-flow:row;gap:var(--s-3);width:100%}
  .spotbar .pr{display:flex;align-items:baseline;justify-content:space-between;width:100%}
  .spotbar .task{margin-top:var(--s-1)}
  .spotbar .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);width:100%}
  .spotbar .row2 .btn{width:100%}
}

/* ---------- мобильные переопределения идут последними, иначе поздние правила их перебивают ---------- */
@media(max-width:900px){
  .catwrap,.precise .wrap,.why .wrap,.check .wrap{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .cpic{position:relative;top:auto;aspect-ratio:16/10}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgrid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .steps,.agrid{grid-template-columns:minmax(0,1fr)}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spotbar .name{font-size:clamp(1.25rem,6vw,1.6rem)}
  .cgrid a{grid-template-columns:2.2rem minmax(0,1fr) 1.2rem;padding:var(--s-4) var(--s-2)}
}
/* панель задачи на телефоне: кадр выше и затемнение сильнее, чтобы список молекул читался */
@media(max-width:900px){
  .cpic{aspect-ratio:4/3}
  .cpic::after{background:linear-gradient(180deg,oklch(15% .035 250 / .05) 0%,oklch(15% .035 250 / .35) 32%,
    oklch(13% .03 250 / .88) 62%,oklch(12% .03 250 / .96) 100%)}
  .cpic .top{bottom:var(--s-5)}
}
@media(max-width:640px){
  .qcta{flex-direction:column;align-items:flex-start;gap:var(--s-2)}
  .qcta .btn{width:100%}
}

/* ---------- светлые ленты: переход внутри ленты, без пустых полос ---------- */
/* перелив 288 px на 1440 давал между блоками по ~300 px пустого градиента (главная, проверка кода): «компактнее»
   из правок Рахмана 24.09 — лента ниже, сам переход тот же (повторный просмотр 24.09.2026) */
.litband{position:relative;isolation:isolate;--band:clamp(150px,15vw,220px);
  --top-c:oklch(15% .035 250);--bot-c:oklch(15% .035 250);
  background:linear-gradient(180deg,
    var(--top-c) 0,
    color-mix(in oklab,var(--top-c) 62%,oklch(96.5% .006 235)) calc(var(--band) * .34),
    color-mix(in oklab,var(--top-c) 30%,oklch(96.5% .006 235)) calc(var(--band) * .58),
    color-mix(in oklab,var(--top-c) 10%,oklch(96.5% .006 235)) calc(var(--band) * .82),
    oklch(96.5% .006 235) var(--band),
    oklch(96.5% .006 235) calc(100% - var(--band)),
    color-mix(in oklab,var(--bot-c) 10%,oklch(96.5% .006 235)) calc(100% - var(--band) * .82),
    color-mix(in oklab,var(--bot-c) 30%,oklch(96.5% .006 235)) calc(100% - var(--band) * .58),
    color-mix(in oklab,var(--bot-c) 62%,oklch(96.5% .006 235)) calc(100% - var(--band) * .34),
    var(--bot-c) 100%)}
/* верх первой ленты стыкуется с акциями, низ второй — с подвалом */

.litband:has(#articles){--bot-c:oklch(12% .03 250)}
.litband > section:first-child{padding-top:calc(var(--band) + clamp(24px,3vw,56px))}
.litband > section:last-child{padding-bottom:calc(var(--band) + clamp(24px,3vw,56px))}
.litband > section + section{padding-top:clamp(40px,5vw,76px)}
/* секция перед светлой лентой и после неё не добавляет пустоты: переход держит воздух сам */
section:has(+ .litband){padding-bottom:clamp(24px,3vw,48px)}
.litband + section,.litband + footer{padding-top:clamp(8px,1.5vw,24px)}
@media(max-width:760px){
  .hits .row{padding:44px 22vw 0}
  .vial img{transform:scale(1.1)}
  .vial.on img{transform:translateY(-4px) scale(1.15)}
}
@media(max-width:900px){
  .qart .qf{-webkit-mask-image:none;mask-image:none}
}
/* короткое уведомление вместо молчания кнопок */
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 12px;z-index:40;max-width:min(520px,92vw);
  padding:var(--s-3) var(--s-5);border-radius:var(--pill);background:oklch(20% .04 250 / .92);
  border:1px solid var(--glass-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--text);font-size:var(--fs-1);text-align:center;opacity:0;pointer-events:none;
  transition:opacity var(--t-mid),translate var(--t-mid) var(--e-out)}
.toast.on{opacity:1;translate:-50% 0}
.ico.cart{position:relative}
.ico.cart[data-count]:not([data-count="0"])::after{content:attr(data-count);position:absolute;top:-2px;right:-2px;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--sky-2);color:var(--ink);
  font:600 10px/18px var(--fb);text-align:center}
/* кадр на светлой ленте: чуть плотнее, чтобы флакон не растворялся совсем */
.litband .big img{filter:saturate(1.06) contrast(1.05)}
.litband .big{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 100%),
  linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 100%),
  linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%)}
/* метки задач читаются и у неактивных флаконов */
.vial .vtag{opacity:.88;color:var(--muted);background:oklch(16% .04 250 / .78)}
footer{border-top:0}
/* ни у одной секции нет собственных границ: стыки держит только градиент фона */
.process,.promo,.check,.hits,.cats,.precise,.forms,.faq,.articles,footer,.icons{border:0}

/* категории: кадр и список молекул приезжают сбоку — движение вместо простого проявления */
.cpic img{opacity:0;transform:translateX(7%) scale(1.03);
  transition:opacity .55s var(--e-out),transform .8s var(--e-out)}
.cpic img.on{opacity:1;transform:none}
.cpic img.out{opacity:0;transform:translateX(-7%) scale(1.03)}
.cpic .top ul.slide li{animation:cat-in .5s var(--e-out) both}
.cpic .top ul.slide li:nth-child(2){animation-delay:.06s}
.cpic .top ul.slide li:nth-child(3){animation-delay:.12s}
@keyframes cat-in{from{opacity:0;translate:14px 0}to{opacity:1;translate:0 0}}
.cgrid a.on b{translate:2px 0}
.cgrid b{transition:color var(--t-mid),letter-spacing var(--t-slow) var(--e-out),translate var(--t-slow) var(--e-out)}
@media(prefers-reduced-motion:reduce){
  .cpic img,.cpic .top ul.slide li{transition:opacity .2s;animation:none;transform:none}
}

/* живой первый экран: медленный туман низко над столом, как в лаборатории */
.hero .bg .fog{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 18%,#000 58%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 18%,#000 58%,#000 88%,transparent 100%)}
.hero .bg .fog i{position:absolute;display:block;border-radius:50%;opacity:.085;
  background:radial-gradient(circle,oklch(92% .03 220) 0%,oklch(88% .035 222 / .8) 18%,oklch(80% .04 225 / .45) 42%,oklch(75% .04 228 / .15) 60%,transparent 72%);
  will-change:transform}
.hero .bg .fog i:nth-child(1){width:62%;height:44%;left:-14%;bottom:2%;animation:fog-a 46s linear infinite}
.hero .bg .fog i:nth-child(2){width:54%;height:38%;left:34%;bottom:-8%;opacity:.065;animation:fog-b 61s linear infinite}
.hero .bg .fog i:nth-child(3){width:46%;height:32%;left:62%;bottom:6%;opacity:.05;animation:fog-c 74s linear infinite}
@keyframes fog-a{0%{transform:translate3d(-6%,0,0) scale(1)}50%{transform:translate3d(26%,-5%,0) scale(1.14)}100%{transform:translate3d(-6%,0,0) scale(1)}}
@keyframes fog-b{0%{transform:translate3d(8%,2%,0) scale(1.05)}50%{transform:translate3d(-18%,-6%,0) scale(1.2)}100%{transform:translate3d(8%,2%,0) scale(1.05)}}
@keyframes fog-c{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-22%,-4%,0) scale(1.1)}100%{transform:translate3d(0,0,0) scale(1)}}
@media(prefers-reduced-motion:reduce){.hero .bg .fog i{animation:none}}
.hero-card[hidden]{display:none!important}

/* проверка кода (Рахман 17.09): кадр коробки не вставка, а часть блока — слева с метками «где искать», справа форма */
.check .wrap.check2{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s-7);align-items:center;max-width:none;text-align:left;justify-items:stretch}
.check .check2 .cbig{grid-row:1;margin:0;aspect-ratio:4/3;position:relative;overflow:visible;border-radius:0;box-shadow:none;max-height:none;justify-self:stretch;align-self:center;
  margin-left:calc(-1 * min(120px, max(var(--gut),(100vw - var(--wrap)) / 2)));
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.check .check2 .cbig img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.cmark{position:absolute;left:var(--x);top:var(--y);z-index:3;display:flex;align-items:center;gap:10px;translate:-100% -50%;pointer-events:none}
.cmark i{order:2;flex:none;width:24px;height:24px;border-radius:50%;background:var(--sky);color:#fff;font:600 .7rem/24px var(--fb);font-style:normal;text-align:center;box-shadow:0 0 0 4px oklch(100% 0 0 / .75)}
.cmark b{order:1;font:500 .66rem/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:oklch(100% 0 0 / .85);border:1px solid var(--line);border-radius:var(--pill);padding:7px 12px;white-space:nowrap;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cmark::after{content:"";width:34px;height:1px;background:oklch(24% .045 250 / .45);order:1;margin:0 -4px}
.cmark b{order:0}.cmark i{order:2}
.cmark.l2r{translate:0 -50%}
.cmark.l2r i{order:0}.cmark.l2r b{order:2}
.check .check2 .ccopy p{margin-inline:0}
.check .check2 .ccopy .kicker{margin-inline:0}
.check .check2 .check-form{max-width:none}
.check .check2 .cmsg,.check .check2 .hint{text-align:left}
@media(max-width:760px){
  .check .wrap.check2{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
  .check .check2 .cbig{margin-left:0;-webkit-mask-image:none;mask-image:none;border-radius:var(--r-3);overflow:hidden}
  .cmark b{font-size:.56rem;letter-spacing:.1em;padding:5px 9px}
  .cmark i{width:20px;height:20px;line-height:20px;font-size:.62rem}
  .cmark.l2r{left:30%}
  .cmark::after{width:16px}
  .cmark b{font-size:.52rem;letter-spacing:.08em;padding:5px 8px}
}

/* хиты (Рахман 17.09, путь А): витрина карточек вместо софитов — все освещены, кадр товар+коробка, стекло снизу */
.hgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.hcard{position:relative;display:grid;grid-template-rows:auto 1fr;background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-3);overflow:hidden;
  box-shadow:inset 0 1px 0 oklch(100% 0 0 / .08),0 30px 60px -40px oklch(0% 0 0 / .8);
  transition:transform var(--t-mid) var(--e-out),border-color var(--t-mid),box-shadow var(--t-mid)}
.hpic{display:block;aspect-ratio:1/1;overflow:hidden;background:oklch(12% .03 250)}
.hpic img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;display:block;transition:transform var(--t-slow) var(--e-out)}
.hbody{display:grid;gap:var(--s-1);align-content:start;padding:var(--s-4) var(--s-5) var(--s-5)}
.hname{font:400 var(--fs-2)/1.2 var(--fd);letter-spacing:.06em;text-transform:uppercase;color:var(--text);text-decoration:none}
.hname:hover{color:var(--sky-2)}
.hmeta{margin:0;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.htask{margin:0;font-size:var(--fs-1);color:var(--dim);font-weight:300}
.hbuy{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line)}
.hprice{display:block;font:400 1.25rem/1 var(--fd);color:var(--sky-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.hstock{display:block;margin-top:5px;font:500 .62rem/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--ok)}
@media(hover:hover){
  .hcard:hover{transform:translateY(-6px);border-color:oklch(96% .01 230 / .3);box-shadow:inset 0 1px 0 oklch(100% 0 0 / .1),0 40px 70px -40px oklch(0% 0 0 / .9)}
  .hcard:hover .hpic img{transform:scale(1.04)}
}
@media(max-width:1100px){.hgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .hgrid{display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s-3);margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hgrid::-webkit-scrollbar{display:none}
  .hcard{flex:0 0 76vw;scroll-snap-align:start}
  .hpic{aspect-ratio:3/4}
  .hbody{padding:var(--s-3) var(--s-4) var(--s-4)}
}

/* за экраном анимации стоят (владелец 17.09: процессор) */
.js .offscreen,.js .offscreen *,.js .offscreen *::before,.js .offscreen *::after{animation-play-state:paused!important}

/* слои под анимации (владелец 17.09, кулеры): кнопка мигает в своём слое и без стеклянного размытия, иначе каждый кадр
   пересчитывается backdrop-filter над hero; строка поиска в своём слое, иначе печатающая подсказка перерисовывает шапку с размытием */
.js .btn{will-change:transform}
.js .btn.line{backdrop-filter:none;-webkit-backdrop-filter:none;background:oklch(96% .01 230 / .09)}
.js .litband .btn.line{background:oklch(24% .045 250 / .06)}
.js .head .finder{will-change:transform}
/* туман стоит: два дрейфующих слоя на всю ширину hero давали ≈50 % ядра только на композитинг; статичные пятна света стоят 0 */
.js .hero .bg .fog i{animation:none}
.finder .ph{position:absolute;top:50%;translate:0 -50%;pointer-events:none;white-space:nowrap;overflow:hidden;color:var(--muted);font-weight:300;font-size:1rem;line-height:1;will-change:transform;contain:paint}
.head.on-lit .finder .ph{color:oklch(50% .03 245)}

/* открытое мобильное меню держит страницу: фон под ним прокручивался, и герой уезжал вверх (найдено обходом 19.09.2026) */
html.nav-open,body.nav-open{overflow:hidden}   /* прокручивается корневой элемент, одного body мало */

/* поле купона было без видимой рамки фокуса (обход 19.09.2026). У поиска рамку рисует сама пилюля (.finder:focus-within):
   вторая, квадратная рамка у поля внутри круглой пилюли выглядела ошибкой (повторный просмотр 24.09.2026) */
#coupon_code:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
/* при табуляции браузер докручивал поле лишь наполовину: оставляем запас под шапкой и снизу */
input,select,textarea,button,a{scroll-margin-top:calc(var(--head-h,118px) + 16px);scroll-margin-bottom:24px}

/* Подписи для экранных читалок (WooCommerce и WordPress печатают их классом .screen-reader-text) прятались
   родительской темой так, что сам текст оставался шириной 1160px: на телефоне документ становился шире экрана
   и появлялась горизонтальная прокрутка (замер 19.09.2026: экран 390, документ 410). Прячем правильно —
   читалка слышит, глазами не видно, ширину не занимает. */
.screen-reader-text,.woocommerce .screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* ==================== планшет и небольшой ноутбук (24.09.2026, обход iPad 768/1024 и ноутбука 1280) ==================== */
/* верхняя строка фактов статичная и в одну строку: уже 1360 px четыре факта не помещались и срезались с обоих краёв.
   Убираем повторы: «оплата при получении» и «чистота >99 %» стоят в первом экране и полосе иконок под ним. */
@media (max-width:1360px){.topline:not(.live) .tl:nth-child(3){display:none}}
@media (max-width:1000px){
  .topline:not(.live) .tl:nth-child(1){display:none}
  .topline:not(.live) .tl:nth-child(2)::before{display:none}
}
/* планшет вертикально: кадр героя шёл фоном под текстом, заголовок и «Задать вопрос» ложились прямо на флаконы.
   Как на телефоне: кадр сверху во всю ширину, текст под ним. */
@media (min-width:761px) and (max-width:1000px){
  .hero{min-height:0;padding:var(--s-5) 0 var(--s-8)}
  .hero .bg{position:relative;inset:auto;aspect-ratio:16/9;margin:0 0 var(--s-6)}
  .hero .bg img{object-position:60% 50%}
  .hero .bg::before{background:none}
  .hero .bg::after{height:40%}
}
/* хиты: на узком ряду подписи задач под соседними флаконами налезали друг на друга («ДОЛГОЛЕТИЕКОЖА И…»).
   Подпись остаётся только у флакона под светом. */
@media (max-width:1180px){.vial:not(.on) .vtag{opacity:0}}
/* планшет горизонтально и маленький ноутбук (1001–1199): ряд меню не помещался, пункты резались на полуслове
   («КАЛЬКУЛЯТОР ПЕПТ», «ДОСТАВКА И ОПЛ», iPad 1024). Меню уходит в кнопку, как на планшете вертикально.
   Герой: текст колонкой уже, факты в столбик, кадр сдвинут вправо, слева плотнее тень — «Проверка кода с упаковки»
   и «Задать вопрос» больше не ложатся на флакон спрея. */
@media (min-width:1001px) and (max-width:1199px){
  .menu-row{display:none}
  .menu-row.open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--bg-2);border-bottom:1px solid var(--line)}
  .menu-row.open .wrap{flex-direction:column;align-items:stretch;height:auto;padding:var(--s-3) 0;gap:0}
  .menu-row.open a{height:auto;display:block;padding:var(--s-3) 0;border:0;border-radius:0;border-bottom:1px solid var(--line);background:none;box-shadow:none;font:400 1rem/1.2 var(--fd);letter-spacing:.08em}
  .menu-row.open a::before{display:none}
  .menu-row.open a:last-child{border-bottom:0}
  .burger{display:grid}
  .hero .copy{max-width:470px}
  .hero-facts{grid-template-columns:minmax(0,1fr)}
  .hero .bg img{object-position:50% 50%}   /* кадр table28: при 92 % коробка Kit уходила под текст, при 0 % крем за край */
  .hero .bg::before{background:linear-gradient(90deg,var(--bg) 0%,oklch(15% .035 250 / .93) 40%,oklch(15% .035 250 / .55) 56%,transparent 74%)}
}
/* открытое меню (кнопка «три полосы», до 1199 px): ниже пунктов страница оставалась яркой и кнопка консультанта
   висела поверх. Затемняем страницу под меню (нажатие по затемнению закрывает меню: main.js ловит касание вне меню). */
@media (max-width:1199px){
  html.nav-open body::after{content:"";position:fixed;inset:0;z-index:calc(var(--z-head) - 1);background:oklch(8% .03 250 / .62)}
  html.nav-open .apx-chat-fab{visibility:hidden}
}

/* ==================== хиты на ПК, метка Рахмана 24.09.2026 («сделать качественнее: отступы, всё ровно и красиво») ====
   Сцена симметричная (свет над активным флаконом, полка товара по центру), а заголовок стоял слева, «Весь каталог» —
   справа на другой высоте. Теперь заголовок по центру над сценой, «Весь каталог» под стрелками; флаконы крупнее,
   пустоты между заголовком и сценой меньше, полка и стрелки ближе к флаконам. Телефон не трогаем (свои правила). */
@media (min-width:761px){
  .hits .wrap{display:grid;grid-template-columns:minmax(0,1fr)}
  .hits .wrap>.shead{grid-row:1;flex-direction:column;align-items:center;text-align:center;gap:0;margin-bottom:var(--s-3)}
  .hits .wrap>.shead .kicker{justify-content:center}
  .hits .wrap>.shead .more{display:none}                 /* на ПК «Весь каталог» стоит под стрелками (.hits-all) */
  .hits .wrap>.stage{grid-row:2}
  .hits .wrap>.ctrls{grid-row:3;margin-top:var(--s-4)}
  .hits .wrap>.hits-all{grid-row:4;display:flex;justify-content:center;margin:var(--s-5) 0 0}
  .hits .row{padding-top:var(--s-4)}
  .hits .vial img{transform:scale(1.3)}
  .hits .vial.on img{transform:translateY(-8px) scale(1.42)}
  .hits .spotbar{padding-top:var(--s-4)}
  .hits .spotbar .row2 .btn{height:44px}
}
.hits-all{display:none}
@media (min-width:761px){
  .hits .wrap>.shead .kicker::after{content:"";width:28px;height:1px;background:var(--sky);flex:none}
}

/* мерч на главной (01.10.2026): два кадра Риты + строка условий и кнопка к менеджеру */
.merch{padding:var(--sec) 0}
.merch .mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.merch .mpic{position:relative;margin:0;border-radius:var(--r-3);overflow:hidden;aspect-ratio:3/2;background:var(--bg-2);border:1px solid var(--line)}
.merch .mpic img{display:block;width:100%;height:100%;object-fit:cover}
.merch .mpic figcaption{position:absolute;left:var(--s-4);bottom:var(--s-4);padding:6px 14px;border-radius:var(--pill);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);font:500 var(--fs-0)/1.2 var(--fb);letter-spacing:.08em;color:var(--text)}
.merch .mbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s-6);align-items:center;margin-top:var(--s-6)}
.merch .mtext{margin:0;max-width:56ch;font-weight:300;color:var(--muted)}
.merch .mfacts{display:flex;gap:var(--s-6)}
.merch .mfacts div{display:grid;gap:4px}
.merch .mfacts b{font:400 var(--fs-3)/1.1 var(--fd);letter-spacing:.04em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.merch .mfacts span{font-size:var(--fs-0);color:var(--dim);white-space:nowrap}
@media (max-width:960px){.merch .mbar{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}.merch .mbar .btn{justify-self:start}}
@media (max-width:640px){.merch .mgrid{grid-template-columns:minmax(0,1fr)}.merch .mfacts{gap:var(--s-5)}.merch .mbar .btn{width:100%}}
/* сцена мерча «Витрина» (?mq=1, Рахман 01.10): пара манекенов без фона (он графит, она голубая), четыре ракурса
   меняются прокруткой на механике .way (scene.js). Кадры прозрачные: фон даёт сама сцена, низ фигур уходит в темноту. */
.merch-way .mfacts{display:flex;gap:var(--s-6)}
.merch-way .mfacts div{display:grid;gap:4px}
.merch-way .mfacts b{font:400 var(--fs-3)/1.1 var(--fd);letter-spacing:.04em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.merch-way .mfacts span{font-size:var(--fs-0);color:var(--dim);white-space:nowrap}
.merch-way .mrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6)}
.pg-v4 .merch-way .way-stage{background:radial-gradient(36% 48% at 72% 62%,oklch(68% .13 225 / .16),transparent 72%),var(--bg)}
.pg-v4 .merch-way .way-stage::after{display:none}   /* затемнение под текст не нужно: фон ровный, а слой гасил графитовую фигуру */
.merch-way .way-stage img{object-fit:contain;-webkit-mask-image:linear-gradient(#000 76%,transparent);mask-image:linear-gradient(#000 76%,transparent)}
.merch-way .way-thumb{aspect-ratio:1/1;max-width:440px;background:var(--bg)}
.merch-way .way-thumb img{object-fit:contain}
@media (min-width:1101px) and (min-height:700px){
  /* пара справа от колонки текста, ногами к низу экрана */
  .pg-v4 .merch-way .way-stage img{inset:auto max(var(--gut),calc((100% - var(--wrap)) / 2)) 0 auto;width:auto;height:96%;max-width:58%;aspect-ratio:1/1;object-position:50% 100%}   /* кадр шире квадрата (4-й) встаёт ногами вниз */
}
@media (max-width:760px) and (min-height:600px){
  .pg-v4 .way.merch-way.live .way-stage{background:radial-gradient(50% 50% at 50% 70%,oklch(68% .13 225 / .18),transparent 72%),var(--bg)}
  .pg-v4 .way.merch-way.live .way-stage img{object-fit:contain;object-position:50% 100%}
  .pg-v4 .way.merch-way.live .mrow{gap:var(--s-3)}
}
@media (max-width:760px) and (max-height:740px){.pg-v4 .way.merch-way.live .mfacts{display:none}}   /* низкий телефон: остаётся кнопка */