/* ==== ШРИФТЫ: только Geometria Medium + Light ==== */
@font-face{font-family:'Geometria';src:url('assets/fonts/Geometria-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Geometria';src:url('assets/fonts/Geometria-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ==== ТОЧНЫЕ ЦВЕТА ИЗ FIGMA ==== */
:root{
  --wine:#BC294B;          /* основной бордовый бренда */
  --wine-deep:#98123C;     /* тёмный акцент / подписи */
  --wine-darker:#5E0023;   /* низ градиента плашек */
  --violet:#745F9A;        /* постбиотики */
  --violet-deep:#604283;
  --gray:#58595B;          /* текст меню */
  --gray2:#54565A;
  --btn:#892245;
  /* Основной светлый текст — чистый белый на протяжении всего лендинга,
     без компенсирующей обводки (она приглушала ядро штриха до 236 из 255). */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Страховка от горизонтальной прокрутки после .deco-layer (width:100vw) — clip вместо hidden,
   т.к. hidden сломал бы position:sticky (сейчас его нет, но так безопаснее) */
html,body{overflow-x:clip}
/* В макете только Light(300)/Medium(500) — запрет синтеза не даёт браузеру подделать
   отсутствующее начертание (Bold/ExtraBold не подключены и не должны подключаться) */
body{font-family:'Geometria',system-ui,Arial,sans-serif;font-weight:300;color:#000;background:#fff;
  -webkit-font-smoothing:antialiased;font-synthesis:none}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none}
/* сноска-звёздочка: в макете мельче и приподнята над строкой, а не в размер основного текста */
sup.fn{font-size:.55em;line-height:0;vertical-align:.55em}

/* ==== reveal: плавное появление блоков при скролле (main.js добавляет is-in) ==== */
.reveal{opacity:0;transform:translateY(2.5cqw);transition:opacity .7s ease-out,transform .7s ease-out}
.reveal.is-in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ==== FLUID-КОНТЕЙНЕР: база 1920px, единица cqw (1cqw = 1% ширины) ====
   Перенос из Figma: любое значение в px → px/19.2 = cqw (при ширине 1920). */
.stage{
  container-type:inline-size;
  position:relative;
  width:100%;
  max-width:1920px;
  margin:0 auto;
  background:#fff;
  /* overflow:visible — hidden обрезал бы слой декора .deco-layer (width:100vw) по рамке 1920
     и обесценивал бы вынос сфер за края на широких экранах (левое поле стало бы полностью белым).
     Горизонтальную прокрутку держит html,body{overflow-x:clip}. */
  overflow:visible;
  font-weight:300;
}
.stage section{position:relative;width:100%}

/* абсолютно позиционированный слой внутри секции */
.abs{position:absolute}

/* ==== GLASS: переиспользуемая плашка-линза (карточки), fx GLASS + grad op:0.9 ==== */
/* угол сверен с Figma (137:81/121/156) — строго вертикальный, не диагональный */
.glass{background:linear-gradient(180deg,rgba(152,18,60,.9),rgba(94,0,35,.9));
  backdrop-filter:blur(1.2cqw);-webkit-backdrop-filter:blur(1.2cqw)}
/* белый круг-подложка иконки (без свечения — глоу только там, где явно fx DROP_SHADOW в spec) */
.ic-circ{border-radius:50%;background:#fff;display:grid;place-items:center}
.ic-circ img{width:62%;height:62%;object-fit:contain}
/* модификатор со свечением #924A52 r50/spread10 */
.ic-circ.glow{box-shadow:0 0 2.604cqw .521cqw #924A52}

/* белый круг с номером (нумерованные буллиты) — Light 48px, цвет wine */
.num-circ{border-radius:50%;background:#fff;display:grid;place-items:center;
  font-weight:300;font-size:2.5cqw;line-height:1;color:var(--wine)}

/* переиспользуемый blur-патч перехода ("wt blur patch"/"Rectangle 10/12") */
.patch{border-radius:50%;background:#fff;z-index:2;pointer-events:none;position:absolute}

/* ==================== ЭКРАН 1: HERO + ПРЕИМУЩЕСТВА (0..1767) ==================== */
.s1{height:92.031cqw}            /* 1767/19.2 */

/* KV сцена (фон). Кроп по матрице 137:3 запечён в самом файле (hero-kv-crop.png) —
   1920x1006, поэтому object-fit:cover лишь страхует округление */
/* Маска-растворение нижней кромки (mask-image с гашением от 70% высоты) снята: она выбеливала
   нижние 300px фотографии — поверхность под шариками теряла детали задолго до стыка. Переход
   в белый обеспечивают патчи p7/p8/p9 из макета, они закрывают физический край картинки. */
.s1 .kv{left:-0.208cqw;top:8.021cqw;width:100cqw;height:52.396cqw;object-fit:cover;z-index:1}
/* пузырьки снизу — наложение luminosity, едва заметны. Кроп 137:4 запечён (bubbles-crop.jpg, 1920x694) */
/* верхняя кромка фона с пузырями растворяется маской на 120 px: патчи растворения дают общий
   переход, но саму кромку кадра всё равно видно тонкой линией слева от плашки
   (расхождение с макетом 4,6 единицы, после маски 2,9) */
.s1 .bubbles{left:-0.208cqw;top:55.885cqw;width:100cqw;height:36.146cqw;object-fit:cover;z-index:1;opacity:.13;mix-blend-mode:luminosity;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 120px);mask-image:linear-gradient(180deg,transparent 0,#000 120px)}

/* ---- blur-патчи переходов (растворяют края KV-фото в белый, "wt blur patch") ---- */
/* У p1-p6 размытие в макете (137:8/10/9/11 + 147:47/137:5) переносится 1:1: радиусы p1/p3
   100→5.208cqw, p2/p4/p5/p6 120→6.25cqw. */
.s1 .patch.p1{left:41.302cqw;top:-12.813cqw;width:33.229cqw;height:38.125cqw;filter:blur(5.208cqw);opacity:.95}
.s1 .patch.p2{left:71.146cqw;top:8.438cqw;width:34.063cqw;height:43.438cqw;filter:blur(6.25cqw);opacity:.9}
.s1 .patch.p3{left:51.146cqw;top:5.469cqw;width:33.229cqw;height:11.406cqw;filter:blur(5.208cqw);opacity:.95}
.s1 .patch.p4{left:67.76cqw;top:22.083cqw;width:51.458cqw;height:28.49cqw;filter:blur(6.25cqw);opacity:.9}
.s1 .patch.p5{left:69.167cqw;top:21.979cqw;width:51.458cqw;height:28.49cqw;filter:blur(6.25cqw);opacity:.9}
.s1 .patch.p6{left:74.531cqw;top:27.396cqw;width:51.458cqw;height:28.49cqw;filter:blur(6.25cqw);opacity:.9}
/* Непрозрачность p7/p9 снижена против макета (0.8→0.5 и 0.5→0.28) — согласованное отступление:
   оба слоя размывали белым низ фотографии. p8 оставлен макетным: он держит стык с белым фоном,
   при ослаблении нижняя кромка фото начинает проступать полосой. */
.s1 .patch.p7{left:-9.792cqw;top:56.823cqw;width:118.073cqw;height:10.938cqw;border-radius:0;filter:blur(4.167cqw);opacity:.5}
/* высота по группе патчей 137:23 (281 px): прежние 210 оставляли верхнюю кромку фона
   с пузырями видимой линией */
.s1 .patch.p8{left:-9.792cqw;top:53.125cqw;width:118.073cqw;height:14.635cqw;border-radius:0;filter:blur(5.208cqw);opacity:1}
/* непрозрачность по узлу 137:22 — 0,5 (было 0,28, отчего переход читался кромкой) */
.s1 .patch.p9{left:-6.042cqw;top:54.115cqw;width:118.073cqw;height:28.75cqw;border-radius:0;filter:blur(4.167cqw);opacity:.5}

/* красный шар у заголовка */
.s1 .sph-title{left:17.188cqw;top:7.188cqw;width:9.271cqw;height:auto;z-index:4}

/* заголовок hero: Light 48px #BC294B, КАПСОМ; "GELTEK HAIR." — Medium */
.s1 .hero-title{left:27.188cqw;top:9.010cqw;width:55.677cqw;z-index:4;
  font-weight:300;font-size:2.5cqw;line-height:1.25;color:var(--wine);text-transform:uppercase}
.s1 .hero-title .b{font-weight:500}

/* баннер «Пептидная забота» — GLASS: полупрозрачный градиент + backdrop-blur */
.s1 .banner{left:18.75cqw;top:17.917cqw;width:57.813cqw;height:5.729cqw;z-index:4;overflow:hidden;
  background:linear-gradient(90deg,rgba(94,0,35,.9),rgba(152,18,60,.9));
  backdrop-filter:blur(1.2cqw);-webkit-backdrop-filter:blur(1.2cqw);
  display:flex;align-items:center}
/* letter-spacing убран — в Figma (137:19) 0, лишний разрядка съедала отступ до капли */
.s1 .banner span{position:relative;z-index:1;color:#fff;font-weight:500;font-size:1.875cqw;padding-left:3.073cqw;text-transform:uppercase}
/* капля-сфера, замаскированная под баннер, наложение luminosity — эффект стекла/линзы.
   137:18: кроп (FILL, контейнер 345x340) + фильтры Figma запечены физически в drop-red-pt2-fx.png */
/* НАСТОЯЩАЯ причина расхождения (найдено численно): старый файл drop-red-pt2-fx.png был испечён
   с раздавленным динамическим диапазоном — 90%+ пикселей укладывались в яркость 108–114 (перцентили
   90/95/99 = 111.6/111.9/112.3 при максимуме 113.9), то есть почти все блики физически отсутствовали
   как данные. Никакой CSS-фильтр не мог это восстановить — растягивать нечего, информация потеряна
   на этапе экспорта. Никакой «лишний слой» — просто убитые полутона в самом файле. Заменено на
   свежий рендер узла 137:18 из Figma Images API (тот же узел, с уже правильно применёнными
   фильтрами exposure/contrast/tint/highlights/shadows) — его яркостный профиль (max 186, mean 86,
   перцентили 10/50/90/99 = 50/76/144/183) практически идентичен эталону, снятому с реального
   composited-рендера баннера в Figma (max 184, mean 88). Компенсирующий CSS-фильтр больше не нужен. */
.s1 .banner .banner-drop{position:absolute;left:45.052cqw;top:-6.042cqw;width:17.969cqw;height:17.708cqw;
  mix-blend-mode:luminosity;pointer-events:none}

/* Флакон (стартовая позиция; едет вниз по скроллу). z-index:10 — выше карточки преимуществ
   (147:30 «Pack 100ml» zi=69 в макете рисуется поверх красного блока 147:29 zi=26/27).
   Кадрирование serum-100.png по матрице узлов 147:30/137:20 даёт обрезанный фрагмент
   этикетки (не флакон целиком) — значит файл уже изолированный кроп, а не сырой исходник.
   Поэтому явная height:33.021cqw (634px) вместо auto — вертикальное сжатие ~10% (аспект файла
   0.3245 → целевой 0.3596) заложено самим макетом. */
/* В узле 137:20 макета — только цветокоррекция, свечения/тени нет — drop-shadow не задан,
   will-change оставлен (нужен для параллакса флакона) */
.s1 .bottle{left:70.417cqw;top:18.125cqw;width:11.875cqw;height:33.021cqw;z-index:10;
  object-fit:contain;will-change:transform,opacity}

/* ---- карточка преимуществ — GLASS ---- */
/* градиент был диагональным (120deg) — в Figma (137:28) он строго вертикальный, снизу
   вверх: #98123C у нижнего края, #5E0023 у верхнего. Диагональ давала разный цвет в
   левом и правом верхних углах вместо одинакового */
.s1 .adv-card{left:13.021cqw;top:57.240cqw;width:73.958cqw;height:29.688cqw;z-index:5;
  background:linear-gradient(0deg,rgba(152,18,60,.9),rgba(94,0,35,.9));
  backdrop-filter:blur(1.2cqw);-webkit-backdrop-filter:blur(1.2cqw)}
/* цветное свечение под сферой преимуществ */
/* радиус размытия был вдвое меньше макетного (узел 137:33: LAYER_BLUR 50px, у нас стояло
   25px) — старое правило «Figma blur ÷ 2», которое в проекте уже не раз оказывалось неверным */
.s1 .sph-glow{left:21.146cqw;top:60.052cqw;width:5.156cqw;height:5.156cqw;border-radius:50%;
  background:#CC4363;filter:blur(2.604cqw);z-index:6}
.s1 .sph-adv{left:20.625cqw;top:59.479cqw;width:6.198cqw;height:auto;z-index:7;
  filter:drop-shadow(0 .2cqw .4cqw rgba(0,0,0,.25))}
.s1 .adv-title{left:27.344cqw;top:60.417cqw;width:53.698cqw;z-index:6;
  color:#fff;font-weight:500;font-size:1.875cqw;line-height:1.25;text-transform:uppercase}
.s1 .adv-note{left:27.552cqw;top:83.646cqw;z-index:6;color:#fff;font-weight:300;font-size:.729cqw}

/* пункты преимуществ */
.s1 .adv-item{z-index:6;color:#fff;font-weight:300;font-size:1.667cqw;line-height:1.25;left:27.188cqw;width:37.344cqw}
.s1 .adv-item.i1{top:67.292cqw}
.s1 .adv-item.i2{top:71.458cqw}
.s1 .adv-item.i3{top:77.552cqw}
/* иконки-кружки (белый круг + бордовая иконка) — свечение DROP_SHADOW #924A52 r50/spread10,
   blendMode:LINEAR_DODGE. Раньше стояло box-shadow тем же цветом/размером — но box-shadow
   рисуется обычным непрозрачным наложением, а LINEAR_DODGE добавляет свет; на тёмно-красной
   плашке обычная тень того же тона практически не читалась. Заменено на отдельный слой с
   mix-blend-mode:plus-lighter (CSS-эквивалент Linear Dodge) позади круга. */
.s1 .adv-ic{z-index:6;left:21.823cqw;width:3.906cqw;height:3.906cqw;border-radius:50%;background:#fff;
  display:grid;place-items:center}
.s1 .adv-ic.c1{top:66.302cqw}
.s1 .adv-ic.c2{top:71.615cqw}
.s1 .adv-ic.c3{top:77.708cqw}
/* блюр сужен с 2.604cqw (прямое значение radius=50 из спеки DROP_SHADOW) до 1cqw — при прямом
   значении соседние круги сливались в одну полосу света; в реальном рендере Figma свечение
   заметно компактнее вокруг каждого круга по отдельности, с лёгким, но заметным провалом
   между соседними иконками. Подобрано визуальным сравнением того же участка в одном масштабе */
.s1 .adv-glow{z-index:5;width:4.948cqw;height:4.948cqw;border-radius:50%;background:#924A52;
  filter:blur(1cqw);mix-blend-mode:plus-lighter;opacity:.85;pointer-events:none}
.s1 .adv-glow.c1{left:21.302cqw;top:65.781cqw}
.s1 .adv-glow.c2{left:21.302cqw;top:71.094cqw}
.s1 .adv-glow.c3{left:21.302cqw;top:77.188cqw}
/* доля иконки от круга у каждой разная (59%/84%/60%), единый процент 62% на все три
   занижал вторую иконку почти на четверть — размеры сверены с Figma-спекой 11.08 */
.s1 .adv-ic img{object-fit:contain}
.s1 .adv-ic.c1 img{width:2.24cqw;height:3.073cqw}
.s1 .adv-ic.c2 img{width:3.281cqw;height:3.229cqw}
.s1 .adv-ic.c3 img{width:2.292cqw;height:2.344cqw}

/* ---- хедер ----
   position:fixed — согласованное отступление от макета: шапка остаётся на месте при прокрутке,
   контент уходит под неё;
   left:50%+translateX(-50%)+max-width повторяют центровку .stage (margin:0 auto), чтобы
   на экранах шире 1920px зафиксированная шапка не съезжала к левому краю окна мимо контента.
   cqw у потомков по-прежнему считается от .stage (контейнер задаётся положением в DOM, а не
   position), поэтому на fixed это не влияет. */
.hdr{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:1920px;
  height:6.15cqw;z-index:20;display:block}
/* Фон нужен именно закреплённой шапке: она проезжает над цветными секциями, и без подложки
   серые пункты меню теряют читаемость. В макете фон задан у мобильной шапки (179:31, #FFFFFF);
   здесь тот же белый с лёгкой прозрачностью и размытием подложки, чтобы полоса не выглядела
   глухой. Подложка вынесена в псевдоэлемент: по горизонтали она тянется на всю ширину окна
   (width:100vw с компенсацией бокового отступа контейнера) — на экранах шире 1920px полоса
   продолжается до краёв окна, а не обрывается по рамке макета; снизу выходит на 20px за габарит
   шапки, иначе логотип (39..118px при высоте шапки 118px) упирается в кромку. Габарит самой
   .hdr не менялся, поэтому координаты логотипа и пунктов меню остаются макетными. */
.hdr::before{content:'';position:absolute;left:calc(-1*(100vw - 100%)/2);width:100vw;top:0;bottom:-1.042cqw;z-index:-1;
  background:rgba(255,255,255,.92);backdrop-filter:blur(.625cqw);-webkit-backdrop-filter:blur(.625cqw)}
/* Логотип обёрнут в ссылку — позиционирование перенесено на .logo-link */
.hdr .logo-link{position:absolute;left:19.531cqw;top:2.031cqw;width:4.583cqw;display:block}
.hdr .logo-link .logo{display:block;width:100%;height:auto}
/* Кегль пунктов меню 25px (было 20); координаты и top пересчитаны из обновлённого макета
   (520/780/1016/1219/1439, top 67 → 3.490cqw) */
.hdr nav a{position:absolute;top:3.490cqw;font-weight:500;font-size:1.302cqw;color:var(--gray);
  white-space:nowrap;transition:color .2s}
.hdr nav a:hover{color:var(--wine)}
.hdr nav a.n1{left:27.083cqw}
.hdr nav a.n2{left:40.625cqw}
.hdr nav a.n3{left:52.917cqw}
.hdr nav a.n4{left:63.490cqw}
.hdr nav a.n5{left:74.948cqw}

/* ==================== ЭКРАН 2: ЖЕНЩИНАМ (1767..2847) ==================== */
.s2{height:56.25cqw}              /* 1080/19.2 */
/* 137:77 — imageTransform ОТСУТСТВУЕТ (штатная заливка FILL) → просто cover/center, без кастомного кропа */
.s2 .bg{left:0;top:0;width:100cqw;height:56.25cqw;object-fit:cover;object-position:center;z-index:1}
.s2 .card{left:51.667cqw;top:8.333cqw;width:29.375cqw;height:31.094cqw;z-index:2}
.s2 .icon{left:61.042cqw;top:12.344cqw;width:10.052cqw;height:10.052cqw;z-index:3}
/* 137:87: точный размер 133.5x115.6 (соотношение 1.155) вместо доли круга — запрещает
   искажение пропорции; смещение центра относительно круга (-3.85,-2.5)px — так в макете.
   Файл иконки переэкспортирован кадром: прежний был обрезан по контуру (соотношение 1,107)
   и вписывался по высоте, теряя 4 % ширины */
.s2 .icon img{width:6.953cqw;height:6.021cqw;transform:translate(-0.201cqw,-0.13cqw)}
/* Порядок строк задан переносами по макету; ширина работает только ограничителем —
   строка «рекомендуем использовать» набирается на 2 px шире прежнего бокса */
.s2 .txt{left:55cqw;top:24.844cqw;width:23.125cqw;z-index:3;color:#fff;font-weight:300;
  font-size:1.667cqw;line-height:1.25}
.s2 .txt .b{font-weight:500}

/* ==================== ЭКРАН 3: МУЖЧИНАМ (2847..3927) ==================== */
.s3{height:56.25cqw}              /* 1080/19.2 */
/* 137:112 — кроп по матрице запечён физически (man-crop.jpg, 1920x1080, formula:
   background-size 157.26% 138.24% / position 24.25% 29.54% — эквивалент уже в пикселях файла) */
.s3 .bg{left:0;top:0;width:100cqw;height:56.25cqw;object-fit:cover;z-index:1}
.s3 .card{left:18.802cqw;top:8.229cqw;width:29.375cqw;height:29.01cqw;z-index:2}
.s3 .icon{left:28.177cqw;top:12.24cqw;width:10.052cqw;height:10.052cqw;z-index:3}
/* 137:128: точный размер 136x121 (соотношение 1.124); смещение центра (+1.8,-4.0)px */
.s3 .icon img{width:7.083cqw;height:6.302cqw;transform:translate(0.094cqw,-0.208cqw)}
.s3 .txt{left:22.135cqw;top:24.74cqw;width:22.708cqw;z-index:3;color:#fff;font-weight:300;
  font-size:1.667cqw;line-height:1.25}
.s3 .txt .b{font-weight:500}

/* ==================== ЭКРАН 4: БЕРЕЖНЫЙ УХОД (3927..5006) ==================== */
.s4{height:56.406cqw}              /* 1083/19.2 */
/* 137:148 «demo part» — height:auto растягивал бы фото до ~1326px (аспект файла 1.45) при секции
   высотой 1083px, лишние ~243px спадали бы в s5, и красный блок s5 перекрывал бы хвост фото s4.
   Кроп по матрице запечён физически (demo-crop.jpg, 1924x1083) */
/* Края фотографий экранов 2/3/4 сведены к рамке страницы (0…1920): в макете сами снимки стоят
   вразнобой (-4…1916 у женщины и мужчины, -1.6…1922 у фона со сплэшем), и это скрыто границей
   фрейма. Без выравнивания нижнее фото выступает относительно верхнего на 2–6px. */
.s4 .bg{left:0;top:0;width:100cqw;height:56.406cqw;object-fit:cover;z-index:1}
.s4 .card{left:51.875cqw;top:8.281cqw;width:29.427cqw;height:35.573cqw;z-index:2}
.s4 .icon{left:61.302cqw;top:12.344cqw;width:10.052cqw;height:10.052cqw;z-index:3}
/* точный размер иконки от круга (54%×64%), сверено с Figma-спекой 11.08 — раньше опиралась
   на общее правило .ic-circ img{62%} и была занижена по ширине */
/* смещение кадра относительно центра круга (-2,26; +0,98) px — по макету (156:114) */
.s4 .icon img{width:5.427cqw;height:6.417cqw;object-fit:contain;transform:translate(-.118cqw,.051cqw)}
/* ширина бокса чуть больше макетных 437px: строка «плотности и толщины волос» набирается
   в 439px и без запаса разрывалась на две — в макете она идёт цельной строкой */
.s4 .txt{left:55.208cqw;top:24.844cqw;width:23.542cqw;z-index:3;color:#fff;font-weight:300;
  font-size:1.667cqw;line-height:1.25}
.s4 .txt .b{font-weight:500}

/* ==================== ЭКРАН 5: КАК ДЕЙСТВУЕТ СЫВОРОТКА (4880..6630) ==================== */
/* margin-top:-0.208cqw (-4px): s5 должна начинаться на 4px раньше конца s4 (белая
   подложка 137:166 рисуется поверх нижнего края фото s4) — без этого сдвига возникает
   систематическое расхождение +4px во всех секциях ниже s4 */
.s5{height:61.302cqw;margin-top:-0.208cqw}              /* 1436/19.2 */
/* 137:168 — кв-фон выведен выше начала секции: в макете подложка стартует на 130px
   раньше секции 5 (top отрицательный) и заканчивается чуть ниже её нижнего края —
   нижний край перекрывается уже секцией 6, идущей следом в потоке */
/* Фон витрины стоит неподвижно в макетном положении (137:168, 4880…6459). Движение по прокрутке
   снято намеренно: сдвиг вверх оставлял под бордовой плашкой 39px фона вместо макетных 168, а
   сдвиг вниз подводил нижнюю кромку вплотную к шару заголовка «Где купить» (6516). Неподвижное
   макетное положение — единственное, при котором соблюдаются оба расстояния. */
/* clip-path обрезает результат размытия ровно по кромке фотографии: без него blur растекается
   за границы кадра и даёт мягкий ореол сверху и снизу — кромка фотографии должна быть чистой.
   Радиус: прямой перенос LAYER_BLUR 5 из макета (137:168) размывал фон вдвое сильнее самого
   макета — по замеру резкости краёв (0,175 против 0,319) подобрано 1,5 px */
/* Файл собран по окну кадрирования узла 137:168 (окно 935×579 исходника), поэтому его
   пропорция совпадает с боксом показа и object-fit ничего не срезает: в кадре целиком видны
   воронки, из которых растут волосы. Прежний файл был шире по вертикали, и обрезка съедала
   как раз нижнюю часть сцены */
.s5 .kvbg{left:-0.208cqw;top:-0.104cqw;width:100cqw;height:61.615cqw;object-fit:cover;
  filter:blur(.08cqw);opacity:.6;clip-path:inset(0);z-index:3}
/* 137:166 — сплошная белая подложка под кв-фоном (сама секция уже, чем фон). Верх по узлу
   (5006), слой выше фотографии предыдущего экрана: в макете группа screen 5 целиком перекрывает
   screen 4, а в вёрстке секции лежат в общем контексте наложения, и хвост фото экрана 4
   просвечивал в стыке тёмной полосой (223 против 253 у макета) */
.s5 .white-bg{left:0;top:0;width:100cqw;height:75.677cqw;background:#fff;z-index:2}
/* тот же паттерн «блюр вдвое меньше макетного» (узел 137:169: radius 120, у нас было 60) —
   недостаточное размытие оставляло резкий край перехода вместо мягкого растворения в фон */
/* правило белого пятна 137:169 снято вместе с элементом — см. комментарий в разметке */
/* фон плашки сделан непрозрачным (без альфы reusable .glass): полупрозрачная версия
   пропускала через backdrop-filter яркую верхнюю часть кв-фона, что читалось как
   светлая полоса за заголовком и текстом пилюли 1 */
/* Высота плашки 1066px: блок содержимого приведён к компактной раскладке макета,
   нижняя кромка проходит по подставке фигуры.
   Градиент вертикальный, светлая сторона снизу (в макете ручки градиента идут снизу вверх).
   Цвета — результат наложения макетных #98123C и #5E0023 с непрозрачностью 0.9 на светлую
   подложку витрины: заливка остаётся непрозрачной, но тон совпадает с макетом */
.s5 .card{left:12.604cqw;top:5.313cqw;width:74.167cqw;height:46.146cqw;z-index:3;background:linear-gradient(180deg,#6B1535,#9F254B)}

/* цветное свечение под сферами (#CC4363) — блюр стоял вполовину макетного (паттерн «÷2» из
   старого прохода до доступа к Figma API); у title-glow (137:233, r50) и p1/p2-glow (2073:67/54,
   r34.1625) радиусы РАЗНЫЕ, общий блюр на класс .sph-glow был не только заниженным, но и неточным
   для одной из групп — вынесено в отдельные правила */
.s5 .sph-glow{border-radius:50%;background:#CC4363;opacity:.5;z-index:4}
.s5 .sph{z-index:5}

/* позиция и размер пересверены напрямую (137:233) — расходились на ~20px, вероятно ещё с
   прохода до Figma API */
.s5 .title-glow{left:18.246cqw;top:7.206cqw;width:7.932cqw;height:7.932cqw;filter:blur(2.604cqw)}
.s5 .title-sph{left:18.542cqw;top:6.771cqw;width:8.073cqw;height:8.145cqw}
.s5 .title{left:27.448cqw;top:9.375cqw;width:53.958cqw;z-index:4;color:#fff;font-weight:500;
  font-size:2.5cqw;line-height:1.25;text-transform:uppercase}

/* Рамки-пилюли вокруг заголовков (137:221/229): контур капсулы, шарик-маркер лежит внутри
   рамки слева, текст — правее шарика */
.s5 .pill{border:1px solid rgba(255,255,255,.4);z-index:4}
/* left/width сверены с Figma-спекой 11.08 (отдельный узел «bullets», вне группы screen 5) —
   были на 28px левее и уже, чем в макете, из-за чего пилюли не совпадали по краю с кружками
   и текстом пунктов ниже */
.s5 .pill1{left:22.656cqw;top:15.052cqw;width:27.354cqw;height:4.635cqw;border-radius:2.188cqw}
.s5 .pill2{left:22.656cqw;top:25.156cqw;width:41.813cqw;height:4.635cqw;border-radius:2.656cqw}

.s5 .p1-glow{left:23.297cqw;top:15.714cqw;width:3.526cqw;height:3.526cqw;filter:blur(1.78cqw)}
.s5 .p1-sph{left:22.943cqw;top:15.333cqw;width:4.219cqw;height:4.26cqw}
/* узел 2073:70: кегль 25 (было 24) и верх на 5325,4 — заголовок стоял на 4 px выше и потому
   не попадал в центр рамки */
.s5 .pill1-title{left:27.604cqw;top:16.635cqw;width:30cqw;z-index:4;color:#fff;font-weight:500;
  font-size:1.302cqw;line-height:1.258;text-transform:uppercase}

.s5 .p2-glow{left:23.333cqw;top:25.87cqw;width:3.526cqw;height:3.526cqw;filter:blur(1.78cqw);mix-blend-mode:screen}
.s5 .p2-sph{left:22.974cqw;top:25.495cqw;width:4.219cqw;height:4.26cqw}
/* то же по узлу 2073:52 */
.s5 .pill2-title{left:27.604cqw;top:25.917cqw;width:34cqw;z-index:4;color:#fff;font-weight:500;
  font-size:1.302cqw;line-height:1.258;text-transform:uppercase}

/* Пункты: каждый — самостоятельный абзац со своей координатой (расстояния между ними заданы
   позициями, а не пустой строкой внутри общего текста) */
/* Основной текст пунктов в макете приглушён: пики его пикселей розовые (255,172,200) при
   белых 255 у кружков и заголовков рядом — то есть белый с непрозрачностью около 0.75 */
.s5 .body{z-index:4;color:#fff;font-weight:300;font-size:.99cqw;line-height:1.526;
  left:27.604cqw;width:44cqw}
.s5 .b1{top:20.885cqw}
.s5 .b2{top:31.198cqw}
.s5 .b3{top:35.677cqw}
.s5 .b4{top:40.052cqw}
.s5 .b5{top:44.219cqw}

/* Кружки с номерами центрируются по первой строке своего пункта; по горизонтали их центры
   совпадают с центрами шариков-маркеров в рамках-пилюлях */
.s5 .num-circ{width:2.604cqw;height:2.604cqw;font-size:1.615cqw;z-index:5}
.s5 .n1{left:23.75cqw;top:20.781cqw}
.s5 .n2{left:23.75cqw;top:31.354cqw}
.s5 .n3{left:23.75cqw;top:35.729cqw}
.s5 .n4{left:23.75cqw;top:40.052cqw}
.s5 .n5{left:23.75cqw;top:44.375cqw}

/* обёртка 137:235 — полный бокс группы (973 / 5292 / 693×780). Обрезки нет: маска 137:237
   охватывает только группу 137:236 с декоративным эллипсом 137:238, а сама картинка 137:239
   лежит рядом с маской, прямым ребёнком группы, и в макете видна целиком — её низ (6072) на
   78px ниже нижней кромки плашки экрана (5994) */
.s5 .man-wrap{left:50.677cqw;top:14.896cqw;width:36.094cqw;height:40.625cqw;z-index:4}
/* Свечение 137:238 (эллипс 920,39×920,39, заливка #BD3A5A, размытие 200) лежит внутри группы
   маски 137:236 (973..1666 по горизонтали, 5292..5994,62 по вертикали) — прямоугольник маски
   совпадает с правым нижним углом плашки экрана, поэтому засветка нигде не выходит за плашку.
   Клиппер повторяет маску, эллипс задан её координатами; размытие берётся один к одному */
.s5 .man-glow-clip{left:50.677cqw;top:14.896cqw;width:36.094cqw;height:36.595cqw;
  overflow:hidden;z-index:4;pointer-events:none}
.s5 .man-glow{left:12.094cqw;top:15.102cqw;width:47.937cqw;height:47.937cqw;border-radius:50%;
  background:#BD3A5A;filter:blur(10.417cqw)}
/* картинка 137:239 — ровно по своему боксу (1157 / 5489 / 431×583), координаты относительно
   обёртки; object-fit:cover — в спецификации узла scaleMode:"FILL" */
.s5 .man-ball{left:9.583cqw;top:10.26cqw;width:22.448cqw;height:30.365cqw;object-fit:cover}

/* ==================== ЭКРАН 6: ГДЕ КУПИТЬ + ПРОДУКТ (6583..8213) ==================== */
.s6{height:85.312cqw}              /* 1638/19.2 */

.s6 .ball{left:17.396cqw;top:3.646cqw;width:9.271cqw;height:9.375cqw;z-index:2}
/* В макете это Medium (500), не Light — один из трёх заголовков кегля 48 с весом 500
   («Как действует сыворотка», этот, «Окружите волосы полной заботой») */
/* базовый вес был 500 на весь заголовок, из-за чего .b (GELTEK HAIR) не отличался от
   остального текста — в макете (137:252) «Где купить сыворотку» на весе 300, жирным
   только «GELTEK HAIR» */
.s6 .title{left:27.656cqw;top:7.031cqw;width:53.958cqw;z-index:2;color:var(--wine);
  font-weight:300;font-size:2.5cqw;line-height:1.25;text-transform:uppercase}
.s6 .title .b{font-weight:500}

/* кнопки маркетплейсов — GLASS-градиент, 90% */
.s6 .shopbtn{width:30.625cqw;height:15.625cqw;z-index:2;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(152,18,60,.9) 0%,rgba(152,18,60,.9) 50%,rgba(94,0,35,.9) 100%);
  transition:transform .25s}
.s6 .shopbtn:hover{transform:scale(.97)}
.s6 .shopbtn.b1{left:18.698cqw;top:15.521cqw}
.s6 .shopbtn.b2{left:50.469cqw;top:15.521cqw}
.s6 .shopbtn.b3{left:18.698cqw;top:32.344cqw}
.s6 .shopbtn.b4{left:50.469cqw;top:32.344cqw}
/* Размеры логотипов заданы явно — точным переводом боксов из макета (px/19.2), а не долей от
   плитки: общее правило max-width:70% растягивало логотип apteka.ru до 411px против макетных
   248,7 (137:273). Значения: apteka 248,7×52,2 (137:273), wildberries 294,2×42,7 (137:268),
   OZON 192,1×41,0 (137:263), значок «Золотого яблока» 67,1×66,0 (137:246). */
.s6 .shopbtn img{object-fit:contain}
.s6 .shopbtn.b1 img{width:12.953cqw;height:auto}
.s6 .wb-logo{width:15.313cqw;height:auto;filter:brightness(0) invert(1)}
/* Надпись «Золотое Яблоко»: в макете это вектор 137:245 габаритом 321,9x32,1 — набор Geometria
   приведён к той же ширине подбором кегля, отступ от значка 13,8px как у макета */
.s6 .zy-logo{width:3.494cqw;height:auto;margin-right:.719cqw}
.s6 .zy-txt{color:#fff;font-weight:500;font-size:2.064cqw}
.s6 .ozon-logo{width:10.006cqw;height:auto}

/* витрина продукта */
.s6 .plate{left:18.646cqw;top:49.531cqw;width:62.396cqw;height:24.635cqw;z-index:1;
  background:linear-gradient(180deg,#F8F8F8 0%,#CACACA 186.15%)}
.s6 .glowbox{left:23.802cqw;top:49.531cqw;width:57.344cqw;height:24.583cqw;z-index:1;overflow:hidden}
/* 137:258 «light» — белый эллипс 962x962, LAYER_BLUR 100, лежал под картинкой-сферой внутри маски
   137:255 (.glowbox, overflow:hidden). Слой предусмотрен макетом, но круг почти вдвое больше
   клиппера .glowbox по высоте: даже с мягкой заливкой (пробовали radial-gradient вместо
   filter:blur) он неизбежно обрезался overflow:hidden жёсткой линией — читалось как светлый
   полупрозрачный «квадрат» за флаконом 50 мл и человечком. Без этого слоя переход плашки в сферу
   чище и совпадает с макетом, поэтому он убран из разметки полностью (см. index.html,
   .s6 .glowbox). */
/* 137:259 «sphere»: узел повёрнут на 75°, и 925.59 в спецификации — габарит ПОВЁРНУТОГО бокса,
   а не сторона квадрата: сторона = 925.59 / (cos75+sin75) = 755.8px (39.365cqw). Прежние 926px
   давали сферу на 22% больше макетной — её край выходил на 90px левее и читался как граница
   фигуры слева от пептидного человечка. Центр сохранён: (1299.3, 7639.3) в координатах макета.
   Знак поворота: rotation узла в Figma отсчитывается против часовой стрелки, поэтому -1.309 рад
   соответствует CSS rotate(75deg). Оба знака дают практически одинаковый край (разница 3px —
   картинка почти симметрична); после исправления размера край совпадает с макетом с точностью
   5-13px. */
.s6 .glowbox-sphere{left:24.187cqw;top:-7.063cqw;width:39.365cqw;height:39.365cqw;filter:blur(.99cqw);
  transform:rotate(75deg)}
/* 137:301 «Mask group» с розовым свечением 137:303 (#E96882, размытие 130) убран из разметки:
   размытая заливка перекрывает клиппер 646x300 целиком и обрезается им по прямым сторонам —
   за флаконом и пептидным человечком читался светлый полупрозрачный прямоугольник. В макете
   свечение в этом месте визуально отсутствует. Тот же случай, что со слоем 137:258. */
.s6 .showcase-logo{left:28.229cqw;top:54.688cqw;width:12.917cqw;height:auto;z-index:3}
.s6 .peptidman{left:55.104cqw;top:67.344cqw;width:5.208cqw;height:11.25cqw;z-index:3;transform:scaleX(-1)}
/* 137:306/137:307 — явные w/h из карты (низ обоих 8079.2/8079.3) вместо height:auto: auto
   опирался бы на собственный аспект PNG (0.4256/0.3245), что ломает выравнивание «по общей
   нижней линии» */
.s6 .pack50{left:58.229cqw;top:59.031cqw;width:8.729cqw;height:18.896cqw;z-index:3;object-fit:contain}
.s6 .pack100{left:67.76cqw;top:52.448cqw;width:9.177cqw;height:25.484cqw;z-index:3;object-fit:contain}

/* блюр вдвое меньше макетного (radius 10 у 39.6px круга в Figma) — тот же паттерн, что и sph-glow */
.s6 .vol-glow{width:2.083cqw;height:2.083cqw;border-radius:50%;background:#CC4363;opacity:.5;
  filter:blur(.521cqw);z-index:3}
.s6 .vol-sph{width:2.448cqw;height:auto;z-index:4}
.s6 .vol-txt{color:#98123C;font-weight:300;font-size:1.25cqw;z-index:4}
/* узлы 195:287/195:290 в макете помечены visible:false — свечение под этими двумя подписями
   объёма сознательно скрыто дизайнером (в отличие от такого же свечения на экране 9, где
   оно есть) */
.s6 .g50{left:60.052cqw;top:78.854cqw;display:none}
.s6 .s50{left:59.844cqw;top:78.646cqw}
.s6 .t50{left:62.708cqw;top:79.115cqw}
.s6 .g100{left:69.271cqw;top:78.854cqw;display:none}
.s6 .s100{left:69.063cqw;top:78.646cqw}
.s6 .t100{left:71.927cqw;top:79.115cqw}

/* Плавающие декоративные сферы фона.
   .deco-layer — слой 100vw, отцентрованный по окну (left:50%+translateX(-50%)), обрезка идёт по
   краю окна вместо рамки .stage (max-width:1920px) — на широких экранах сферы f6/f7 (выходящие за
   0..100cqw) не срезаются. Левый край .deco-layer всегда совпадает с левым краем окна (это следует
   из width:100vw + центрирование), а не с левым краем .stage, поэтому left каждой сферы пересчитан
   как calc(base + (100vw-100cqw)/2): при viewport<=1920 100vw=100cqw и поправка равна 0, при
   viewport>1920 поправка компенсирует ровно тот боковой отступ, что появляется у .stage при
   центрировании — без неё сферы съезжали бы влево относительно плашки/витрины на величину этого
   отступа. */
.s6 .deco-layer{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;max-width:none;
  height:100%;overflow:hidden;pointer-events:none;z-index:5}
/* .deco-par — отдельный слой внутри .deco-layer только под JS-параллакс (data-par пишет transform
   через style.transform); если повесить data-par на сам .deco-layer, инлайн-transform затрёт
   translateX(-50%) центрирования выше и сломает обрезку по краю окна */
.s6 .deco-par{position:absolute;top:0;left:0;width:100%;height:100%}
.s6 .float{z-index:5;pointer-events:none}
/* Прямой перенос LAYER_BLUR (10 у f1-f6/f8, 20 у f7/f9) размывает шары сильнее, чем композитный
   рендер макета: по замеру резкости зон 0,90 против 1,58 у макета. Значение подобрано —
   половина макетного радиуса, при ней резкость 1,15 (см. тот же приём для фона витрины) */
.s6 .f1{left:calc(-3.073cqw + (100vw - 100cqw)/2);top:55.729cqw;width:10.469cqw;height:auto;filter:blur(.26cqw)}
.s6 .f2{left:calc(13.906cqw + (100vw - 100cqw)/2);top:62.813cqw;width:7.188cqw;height:auto;filter:blur(.26cqw)}
.s6 .f3{left:calc(89.219cqw + (100vw - 100cqw)/2);top:48.229cqw;width:8.906cqw;height:auto;filter:blur(.26cqw)}
.s6 .f4{left:calc(11.302cqw + (100vw - 100cqw)/2);top:44.896cqw;width:4.583cqw;height:auto;filter:blur(.26cqw);opacity:.8}
.s6 .f5{left:calc(29.063cqw + (100vw - 100cqw)/2);top:68.49cqw;width:16.667cqw;height:auto;filter:blur(.26cqw)}
.s6 .f6{left:calc(94.115cqw + (100vw - 100cqw)/2);top:65.885cqw;width:11.719cqw;height:auto;filter:blur(.26cqw)}
/* правило шара f7 (137:298) снято вместе с элементом — см. комментарий в разметке */
.s6 .f8{left:calc(84.427cqw + (100vw - 100cqw)/2);top:61.25cqw;width:5.365cqw;height:auto;filter:blur(.26cqw);opacity:.8}
.s6 .f9{left:calc(74.583cqw + (100vw - 100cqw)/2);top:74.167cqw;width:25.521cqw;height:auto;filter:blur(.521cqw)}

/* ==================== ЭКРАН 7: ДО/ПОСЛЕ (8213..9180) ==================== */
.s7{height:50.365cqw}              /* 967/19.2 */
/* z-index сдвинут на +5 (база 1→6): в макете красный фон s7 (zi=280) должен рисоваться
   ПОВЕРХ декоративных сфер s6 (.s6 .float, zi=5) — 137:674 zi=234 < 137:311 zi=280 */
.s7 .s7card{left:-0.208cqw;top:0;width:100.573cqw;height:50.365cqw;z-index:6;
  background:linear-gradient(180deg,rgba(94,0,35,.9),rgba(152,18,60,.9))}

.s7 .s7-glow{left:18.021cqw;top:4.74cqw;width:7.917cqw;height:7.917cqw;border-radius:50%;
  background:#B73050;opacity:.5;filter:blur(1.302cqw);z-index:7}
.s7 .s7-sph{left:17.135cqw;top:3.906cqw;width:9.479cqw;height:9.583cqw;z-index:8}
.s7 .s7-title{left:27.656cqw;top:5.781cqw;width:53.958cqw;z-index:7;color:#fff;font-weight:300;
  font-size:2.5cqw;line-height:1.25;text-transform:uppercase}
.s7 .s7-title .b{font-weight:500}

/* до/после — круги-медальоны */
.s7 .ba-ring{width:21.823cqw;height:21.823cqw;border-radius:50%;background:#fff;z-index:7}
.s7 .ba-before{left:22.031cqw;top:18.281cqw}
.s7 .ba-after{left:59.219cqw;top:18.281cqw}
.s7 .ba-mask{width:20.573cqw;height:20.573cqw;border-radius:50%;overflow:hidden;z-index:8}
.s7 .ba-before-m{left:22.656cqw;top:18.906cqw}
.s7 .ba-before-m img{position:relative;left:-.156cqw;top:1.406cqw;width:22.24cqw;height:22.708cqw;max-width:none}
.s7 .ba-after-m{left:59.844cqw;top:18.906cqw}
.s7 .ba-after-m img{position:relative;left:-.417cqw;top:1.406cqw;width:22.188cqw;height:22.656cqw;max-width:none}
.s7 .ba-dot{width:4.01cqw;height:4.01cqw;border-radius:50%;border:1px solid rgba(255,255,255,.8);z-index:9}
.s7 .ba-before-dot{left:30.938cqw;top:27.188cqw}
.s7 .ba-after-dot{left:68.125cqw;top:27.188cqw}
.s7 .ba-label{z-index:9;color:#fff;font-weight:300;font-size:1.25cqw;text-transform:uppercase;
  text-align:center;white-space:nowrap}
.s7 .ba-before-label{left:31.094cqw;top:42.083cqw;width:3.698cqw}
.s7 .ba-after-label{left:66.6cqw;top:42.083cqw;width:8cqw}

/* капля-разделитель по центру */
/* Линия центрирована по капле в обе стороны: по горизонтали 986,0, по вертикали её середина
   совпадает с серединой капли — как на эталонной раскладке блока (выступ над каплей и под ней
   одинаковый). Узел 137:338 в макете стоит левее и выше, длина линии не менялась */
.s7 .ba-line{left:51.328cqw;top:17.76cqw;width:1px;height:23.385cqw;background:rgba(255,255,255,.35);z-index:7}
/* блюр вдвое меньше макетного (137:340: radius 100, было 50) */
.s7 .ba-glow1{left:46.667cqw;top:24.74cqw;width:9.323cqw;height:9.323cqw;border-radius:50%;
  background:#BB2444;filter:blur(5.208cqw);z-index:8}
/* Цветокоррекция заливки 137:341 в макете (экспозиция −0,19, контраст −0,16, насыщенность +0,23,
   тени −0,6) применяется Figma к исходнику, который светлее нашего файла: прежняя компенсация
   brightness(.78) уводила каплю в пересвет наоборот — тёмную. Подобрано по эталону: яркость зоны
   капли 99,7 против 99,1 в макете, ореол вокруг 97,8 против 97,8 */
/* смягчено по замеру против макета: контраст зоны был выше макетного
   на 10 единиц, насыщенность на 6,2 — стало +6,9 и 0,0 при совпадающей яркости */
.s7 .ba-drop{left:46.198cqw;top:24.375cqw;width:10.313cqw;height:10.156cqw;z-index:9;
  filter:brightness(1.12) saturate(.85) contrast(.82)}
/* режим наложения был screen, в макете (137:342) — color; плюс тот же блюр ×2 (100 вместо 50) */
.s7 .ba-glow2{left:47.396cqw;top:25.833cqw;width:7.135cqw;height:7.135cqw;border-radius:50%;
  background:#BF8A95;filter:blur(5.208cqw);mix-blend-mode:color;z-index:10}
.s7 .ba-ball{left:46.406cqw;top:24.271cqw;width:9.74cqw;height:9.844cqw;z-index:11}

.s7 .s7-note{left:18.698cqw;top:46.719cqw;z-index:7;color:#fff;font-weight:300;font-size:.729cqw;
  padding-bottom:.1cqw}

/* ==================== ЭКРАН 8: ДОВЕРИЕ + ПРОИЗВОДСТВО (9180..10398) ==================== */
.s8{height:63.438cqw}              /* 1218/19.2 */
.s8 .s8-sph{left:17.24cqw;top:3.646cqw;width:9.271cqw;height:9.375cqw;z-index:2}
.s8 .s8-title{left:27.604cqw;top:6.875cqw;width:32.813cqw;z-index:2;color:var(--wine);
  font-weight:300;font-size:2.5cqw;line-height:1.25;text-transform:uppercase}
.s8 .s8-title .b{font-weight:500}
.s8 .s8-body{left:27.604cqw;top:13.021cqw;width:53.594cqw;z-index:2;color:var(--gray2);
  font-weight:300;font-size:1.25cqw;line-height:1.25}
.s8 .s8-body .b{font-weight:500}
.s8 .s8-btn{left:44.01cqw;top:27.396cqw;width:11.979cqw;height:2.813cqw;z-index:2;border-radius:1.406cqw;
  background:var(--btn);color:#fff;font-weight:500;font-size:.833cqw;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;transition:opacity .2s}
.s8 .s8-btn:hover{opacity:.85}

.s8{overflow:hidden}
/* 137:355: точная высота узла 415px (21.615cqw) + физический кроп по матрице — большее значение
   закрывало бы штатный 138px-й зазор до s9, а поскольку логотип рисуется поверх этого фото,
   центр фото должен совпадать с центром логотипа */
.s8 .s8-photo{left:-0.104cqw;top:34.635cqw;width:100cqw;height:21.615cqw;object-fit:cover;z-index:1}
/* блюр был вдвое слабее макетного (узел «deep» 191:21, r=100) — тот же паттерн «÷2» */
.s8 .s8-shadow{left:5cqw;top:38.073cqw;width:90.156cqw;height:15.208cqw;border-radius:50%;
  background:#D9D9D9;filter:blur(5.208cqw);mix-blend-mode:multiply;z-index:1}
/* Текстовая имитация водяного знака "GELTEK" (.s8-word/.s8-word1) не используется — накладывалась
   бы на векторный логотип. Логотип 137:359 — один элемент, движется (data-scroll-y0/y1 в
   разметке): исходная позиция y0=34.479cqw (top ниже, база для JS-фолбэка/reduced-motion),
   конечная y1=42.448cqw (559,9995 абс. — центр совпадает с центром фото-подложки 137:355). */
.s8 .s8-logo{left:29.115cqw;top:34.479cqw;width:41.771cqw;height:6.054cqw;z-index:3;opacity:1;
  will-change:transform}
/* полупрозрачная копия 137:373 в вёрстке не воспроизводится: это конечный кадр движения
   логотипа, а не самостоятельный слой — та же координата служит конечной точкой прокрутки */

/* ==================== ЭКРАН 9: ШАМПУНИ ==================== */
/* Высота увеличена на 5.365cqw (103px): в макете 10.08 добавлены плашки «нажмите на
   изображение…» под подписями объёмов в обоих блоках (см. .r-more/.v-more) */
.s9{height:103.386cqw;overflow:hidden}              /* 1985/19.2, сверено с Figma-спекой 11.08 */
.s9 .s9-duo{left:17.552cqw;top:0;width:8.698cqw;height:6.094cqw;z-index:2}
.s9 .s9-title{left:27.5cqw;top:0;width:27.708cqw;z-index:2;color:var(--wine);font-weight:500;
  font-size:2.5cqw;line-height:1.25;text-transform:uppercase}

/* --- подзаголовки продуктовых блоков --- */
.s9 .subhat{z-index:2;font-weight:500;font-size:1.875cqw;line-height:1.25;text-transform:uppercase}
/* подзаголовок в две строки (137:443): ширина бокса увеличена под вторую строку
   «ДЛЯ КОМФОРТА КОЖИ ГОЛОВЫ» — она длиннее первой; перенос задан разметкой */
.s9 .r-subhat{left:27.552cqw;top:9.271cqw;width:34.375cqw;color:var(--wine)}
/* top увеличен на 4.896cqw (94px): рост красного блока (плашка + просвет) сдвигает вниз
   всё, что идёт после него, — заголовок, баннер, флаконы, подписи и саму полосу */
.s9 .v-subhat{left:27.552cqw;top:60.521cqw;width:48.594cqw;color:var(--violet)}
.s9 .sph{z-index:2}
.s9 .r-sph{left:23.49cqw;top:8.646cqw;width:3.229cqw;height:3.281cqw}
.s9 .v-sph{left:23.49cqw;top:59.948cqw;width:3.229cqw;height:3.281cqw}

/* --- баннеры с маскированной каплей (glass-lite, luminosity) --- */
.s9 .banner{z-index:2;overflow:hidden;position:absolute;display:flex;align-items:center}
.s9 .banner .banner-drop{position:absolute;mix-blend-mode:luminosity;pointer-events:none}
.s9 .banner span{position:relative;z-index:1;color:#fff;font-weight:300;font-size:1.458cqw;
  line-height:1.357;padding:0 20cqw 0 5.521cqw}
/* Узел 137:441: переносы строк заданы разметкой. Правый отступ общего правила сузил бы
   строку до 643px и добавил бы лишние переносы, поэтому здесь он снят. */
.s9 .r-banner span{padding-right:0}
/* Текст плашки в четыре строки: плашка выше прежней (236 вместо 163) и опущена
   на 44px — верхний край держит прежний отступ от подзаголовка, ставшего двухстрочным */
.s9 .r-banner{left:22.031cqw;top:15.521cqw;width:59.01cqw;height:12.292cqw;
  background:linear-gradient(90deg,rgba(94,0,35,.9) 0%,rgba(94,0,35,.9) 45%,rgba(152,18,60,.9) 100%)}
/* капля 138:41 остаётся в прежнем положении по странице: смещение вверх увеличено
   ровно на величину сдвига плашки */
/* размер и позиция сверены с Figma-спекой (138:41) — были занижены почти на 16% */
.s9 .r-banner .banner-drop{left:38.281cqw;top:-9.635cqw;width:24.844cqw;height:24.479cqw}
.s9 .v-banner{left:22.031cqw;top:64.584cqw;width:59.01cqw;height:8.438cqw;
  background:linear-gradient(90deg,rgba(96,66,131,1) 0%,rgba(96,66,131,1) 70%,rgba(116,95,154,1) 100%)}
.s9 .v-banner .banner-drop{left:37.708cqw;top:-12.292cqw;width:25.833cqw;height:21.094cqw}

/* --- флаконы --- */
/* Явные высоты (низ 30/100/390 ≈11201-11205 в красном, ≈12098-12105 в фиолетовом) вместо
   height:auto: auto опирался бы на собственный аспект PNG-файлов (у всех разный), из-за чего
   «по общей нижней линии» ломалось бы на 15-40px. */
/* Узлы-аннотации 137:577/137:578: наведение курсора — упаковки чуть увеличиваются. 1.04 подобрано
   так, чтобы соседняя упаковка линейки не задевалась (проверено на 1920 и 1280) */
/* object-fit:contain — заливки упаковок в макете имеют режим «кроп» (scaleMode STRETCH с
   imageTransform), который сохраняет пропорции исходника, а не растягивает его на бокс. Наши
   файлы — уже вырезанные упаковки, поэтому при заданных w и h они сплющивались: у флакона
   390 мл тело выходило 238px против 192 в макете. Вписывание по высоте оставляет нижнюю
   линию на месте (низы упаковок выровнены макетом) и убирает искажение. */
.s9 .pack{z-index:3;transition:transform .25s;object-fit:contain}
.s9 .pack:hover{transform:scale(1.04)}
/* Упаковки — ссылки на карточки товара: бокс задаёт ссылка, картинка занимает его целиком
   с тем же вписыванием по высоте */
.s9 a.pack img,.m-s9 a.m-pack img{display:block;width:100%;height:100%;object-fit:contain}
/* Нижний блок красной линейки (упаковки, подписи объёмов и полоса) опущен на 43px:
   так между плашкой с текстом и полосой держится макетный просвет */
.s9 .r-norm30{left:42.031cqw;top:28.49cqw;width:6.51cqw;height:15.677cqw}
.s9 .r-norm100{left:52.292cqw;top:24.792cqw;width:9.219cqw;height:19.271cqw}
.s9 .r-norm390{left:65.729cqw;top:19.115cqw;width:12.552cqw;height:25.156cqw}
/* Упаковки 30 и 100 мл выровнены по макету: центр тюбика совпадает с центром пары
   «шарик + подпись объёма» (в макете центры 711,5 и 913,5 px) */
/* top увеличен на 4.896cqw (94px), см. .v-subhat */
.s9 .v-post30{left:33.646cqw;top:77.969cqw;width:6.927cqw;height:15.469cqw}
.s9 .v-post100{left:43.385cqw;top:73.698cqw;width:8.49cqw;height:20.104cqw}
.s9 .v-post250{left:54.167cqw;top:70.729cqw;width:9.583cqw;height:22.865cqw}
.s9 .v-post390{left:66.354cqw;top:67.552cqw;width:11.146cqw;height:26.042cqw}

/* --- подписи объёма со свечением --- */
.s9 .vol-glow{width:2.083cqw;height:2.083cqw;border-radius:50%;filter:blur(.521cqw);z-index:3;opacity:.5}
.s9 .vol-sph{width:2.448cqw;height:2.5cqw;z-index:4}
.s9 .vol-txt{color:#fff;font-weight:300;font-size:1.25cqw;z-index:4}
.s9 .r-g1,.s9 .r-g2,.s9 .r-g3{background:#CC4363}
.s9 .r-g1{left:42.031cqw;top:45.886cqw}
.s9 .r-s1{left:41.823cqw;top:45.678cqw}
.s9 .r-t1{left:44.688cqw;top:46.146cqw}
.s9 .r-g2{left:53.333cqw;top:45.886cqw}
.s9 .r-s2{left:53.125cqw;top:45.678cqw}
.s9 .r-t2{left:55.99cqw;top:46.146cqw}
.s9 .r-g3{left:68.802cqw;top:45.886cqw}
.s9 .r-s3{left:68.594cqw;top:45.678cqw}
.s9 .r-t3{left:71.458cqw;top:46.146cqw}

.s9 .v-g1,.s9 .v-g2,.s9 .v-g3,.s9 .v-g4{background:#8E6CC8}
/* top увеличен на 4.896cqw (94px), см. .v-subhat */
.s9 .v-g1{left:33.75cqw;top:95.156cqw}
.s9 .v-s1{left:33.541cqw;top:94.948cqw}
.s9 .v-t1{left:36.406cqw;top:95.417cqw}
.s9 .v-g2{left:43.959cqw;top:95.156cqw}
.s9 .v-s2{left:43.75cqw;top:94.948cqw}
.s9 .v-t2{left:46.615cqw;top:95.417cqw}
.s9 .v-g3{left:55.26cqw;top:95.156cqw}
.s9 .v-s3{left:55.052cqw;top:94.948cqw}
.s9 .v-t3{left:57.917cqw;top:95.417cqw}
.s9 .v-g4{left:68.021cqw;top:95.156cqw}
.s9 .v-s4{left:67.813cqw;top:94.948cqw}
.s9 .v-t4{left:70.677cqw;top:95.417cqw}

/* --- фоновые полосы с водяными знаками названий линеек --- */
/* Высота увеличена на 2.448cqw: под подписями объёмов добавилась плашка «Нажмите на
   изображение…» (см. .r-more/.v-more), полоса удлинена, чтобы вместить её и сохранить
   прежний нижний просвет */
.s9 .r-band{left:-0.677cqw;top:30.417cqw;width:101.042cqw;height:23.802cqw;z-index:1;overflow:hidden;
  background:linear-gradient(90deg,rgba(94,0,35,.9),rgba(152,18,60,.9))}
/* «Intensive» — точный вектор из 9 контуров (137:450), извлечён из геометрии узла (fillGeometry)
   в обход лимита на растровый экспорт. Непрозрачность 0.5 запечена в сами контуры SVG
   (fill-opacity на каждом path), габарит группы 1432.8x193.9 при 248.7,10936.0 */
.s9 .wm-svg{position:absolute;display:block}
.s9 .wm-intensive{left:13.63cqw;top:-0.156cqw;width:74.625cqw;height:10.099cqw}
/* top увеличен на 4.896cqw (унаследованный сдвиг от красного блока); высота сверена
   напрямую с Figma-спекой 11.08 (узел «Group violet base») — 23.4375cqw, низ полосы
   вплотную к нижней границе секции */
.s9 .v-band{left:-0.208cqw;top:79.948cqw;width:100.573cqw;height:23.4375cqw;z-index:1;overflow:hidden;
  background:linear-gradient(90deg,#604283 15%,#745F9A 100%)}
/* «Biome» — точный вектор из 5 контуров (137:394), непрозрачность у узлов/заливок не задана
   (полная). Габарит 875.8x190.8 при 246.0,11837.6 */
.s9 .wm-biome{left:13.021cqw;top:-0.073cqw;width:45.615cqw;height:9.938cqw}

/* --- плашка «нажмите на изображение…» под подписями объёмов --- */
.s9 .more-txt{z-index:4;display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font-size:1.042cqw;font-weight:300;color:#fff;border-radius:1.25cqw}
.s9 .more-txt b{font-weight:500;color:#fff;margin-left:.313cqw}
/* фон — сплошная заливка (не полупрозрачная): #781D3D/#624585 сверены с Figma (2193:5/2194:15) */
.s9 .r-more{left:40.26cqw;top:49.063cqw;width:39.219cqw;height:2.552cqw;background:#781D3D}
.s9 .v-more{left:31.458cqw;top:98.594cqw;width:47.917cqw;height:2.552cqw;background:#624585}

/* ==================== ЭКРАН 10: КРЕПКИЕ ВОЛОСЫ + ФИНАЛ (12246..13535) ==================== */
/* Экран 10 НЕ обрезается по высоте: базовая белая плашка, вторая строка финального заголовка и
   подпись о противопоказаниях лежат ниже границы секции (137:484 начинается внутри экрана 10 и
   продолжается до подвала). Ширина фотографии сведена к рамке макета (0..1920), чтобы на экранах
   шире 1920px под ней не выступали края цветных полос предыдущего экрана. */
.s10{height:58.490cqw}              /* 1123/19.2 */
/* Затемнение 20% — постоянное, как слой затемнения над фотографией в макете */
.s10 .s10-photo{left:0;top:0;width:100cqw;height:auto;z-index:1;filter:brightness(.8)}
.s10 .s10-title{left:18.49cqw;top:19.896cqw;width:51.667cqw;z-index:2;color:#fff;font-weight:500;
  font-size:3.333cqw;line-height:1.266;text-transform:uppercase}

.s10 .s10-base{left:-0.104cqw;top:50.521cqw;width:100.104cqw;height:16.615cqw;z-index:3;background:#fff}
.s10 .s10-cta{left:18.594cqw;top:54.844cqw;width:68.229cqw;z-index:4;color:var(--wine);font-weight:300;
  font-size:2.5cqw;line-height:1.25;text-transform:uppercase}
.s10 .s10-cta .b{font-weight:500}
.s10 .s10-note{left:18.698cqw;top:61.51cqw;width:35.313cqw;z-index:4;color:var(--wine);font-weight:300;
  font-size:.9375cqw;line-height:1.1875;white-space:nowrap}

/* ==================== ФУТЕР (13406..13538) ==================== */
/* Высота 132px (6.875cqw) — как у узла 137:487, вместо прежних 295px «на добор» общей длины
   страницы. Отступ сверху 8.646cqw закрывает разрыв между низом экрана 10 (13240) и началом
   подвала (13406): в макете этот промежуток занят белой базой 137:484, которая начинается ещё
   внутри экрана 10 (.s10-base, top 50.521cqw + 16.615cqw = 67.136cqw при высоте секции
   58.49cqw). Без отступа база ложилась поверх подвала и закрывала логотип, реквизиты и значок
   ВКонтакте — подвал выглядел пустой серой полосой. */
.s-foot{position:relative;width:100%;height:6.875cqw;margin-top:8.646cqw;background:#F4F4F4}
.s-foot .foot-logo{left:18.75cqw;top:3.177cqw;width:4.688cqw;height:auto}
.s-foot .foot-text{left:25.104cqw;top:3.125cqw;color:#000;font-weight:300;font-size:.625cqw;line-height:1.1667}
/* 137:496/137:497 (бейдж 32x32) + 137:501 (монограмма 14x9, центр совпадает с центром бейджа
   с точностью 0.5px) — векторы извлечены из геометрии узлов (vk-mono.svg), не растровым экспортом */
.s-foot .foot-vk{left:79.375cqw;top:2.604cqw;width:1.667cqw;height:1.667cqw;border-radius:50%;
  background:#921D36;display:grid;place-items:center;transition:opacity .2s}
.s-foot .foot-vk:hover{opacity:.85}
.s-foot .foot-vk-mono{width:0.729cqw;height:0.469cqw}

/* ========================================================================
   МОБИЛЬНАЯ ВЕРСТКА (стр. base 320px, cqw = px/3.2). Показывается <=760px,
   desktop .stage прячется. Все правила ниже — в области .stage--mobile.
   ======================================================================== */
.stage--mobile{display:none}
@media(max-width:760px){
  .stage{display:none}
  .stage--mobile{display:block}
}
.stage--mobile{
  container-type:inline-size;position:relative;width:100%;margin:0 auto;
  background:#fff;overflow:hidden;font-weight:300
}
.stage--mobile section,.stage--mobile footer{position:relative;width:100%}
.stage--mobile .abs{position:absolute}
.stage--mobile .glass{background:linear-gradient(180deg,rgba(152,18,60,.9),rgba(94,0,35,.9));
  backdrop-filter:blur(2cqw);-webkit-backdrop-filter:blur(2cqw)}
.stage--mobile .m-ic-circ{border-radius:50%;background:#fff;display:grid;place-items:center}
.stage--mobile .m-ic-circ img{width:58%;height:58%;object-fit:contain}
/* z-index обязателен: в макете свечение лежит над карточкой блока и под своей сферой,
   без него стеклянная карточка (z-index 3) закрывает свечение целиком */
.stage--mobile .m-sph-glow{border-radius:50%;background:#CC4363;opacity:.5;filter:blur(1.5cqw);z-index:4}
.stage--mobile .m-num-circ{border-radius:50%;background:#fff;display:grid;place-items:center;
  font-weight:300;color:var(--wine);line-height:1}
/* тот же паттерн «блюр вдвое меньше макетного», см. .sph-glow */
.stage--mobile .m-vol-glow{border-radius:50%;opacity:.5;filter:blur(1.3cqw)}
.stage--mobile .m-vol-txt{color:#fff;font-weight:300}
.stage--mobile .m-pack{height:auto}

/* ---- хедер (центрированный лого + гамбургер) ---- */
.m-hdr{height:21.25cqw;background:#fff;display:block;position:relative}
/* Логотип обёрнут в ссылку — позиционирование на .m-hdr-logo-link */
.m-hdr-logo-link{position:absolute;left:43.438cqw;top:4.063cqw;width:13.219cqw;display:block}
.m-hdr-logo-link .m-hdr-logo{display:block;width:100%;height:auto}
/* Группа «menu sign» 2148:963 — 25×12,5 px при 280,31; линии 2148:964–966 обводкой 2 px
   цвета #BC294B. Прежние полосы были чёрные толщиной 1 px и на 4,5 px выше по разбегу */
.m-burger{position:absolute;left:87.188cqw;top:9.688cqw;width:7.813cqw;height:3.906cqw;
  display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;z-index:31}
.m-burger i{display:block;height:.625cqw;background:var(--wine)}

/* Выпадающее меню — фрейм 188:155 (spec_v2_menu.json), 159x177 при базе 320 (cqw=px/3.2). Панель
   #F4F4F4, правый край выровнен под бургер (left 87.188+7.813=95cqw от левого края → 5cqw от
   правого; собственного положения панели относительно экрана в спеке нет — якорь под бургером
   логичен для выпадающего меню). Порядок и текст пунктов — как в спеке (отличается от порядка в
   десктопной шапке). Открывается/закрывается классом .menu-open на .m-hdr (main.js, тот же бургер) */
.m-menu{position:absolute;top:100%;right:5cqw;width:49.688cqw;z-index:30;
  background:#F4F4F4;padding:8.438cqw 6.25cqw 6.25cqw;
  display:none;flex-direction:column;gap:3.125cqw}
.m-hdr.menu-open .m-menu{display:flex}
.m-menu a{color:var(--gray);font-weight:500;font-size:4.375cqw;line-height:1.26;white-space:nowrap;transition:color .2s}
/* выбранный пункт остаётся бордовым — в макете (179:1132) он показан именно так,
   остальные серые; класс ставится по нажатию (main.js), :hover на телефоне не работает */
.m-menu a:hover,.m-menu a:active,.m-menu a.is-active{color:var(--wine)}

/* ==================== M-ЭКРАН 1: HERO + ПРЕИМУЩЕСТВА ==================== */
/* в макете экран начинается на 72, то есть на 4 px ниже шапки (2148:620); высота 1010 */
.m-s1{height:315.625cqw;margin-top:1.25cqw}
.m-s1 .m-kv{left:-18.75cqw;top:71.25cqw;width:141.563cqw;height:79.375cqw;object-fit:cover;z-index:1}
/* Патч растворяет низ КВ-фото в белый под флаконом. По макету (2148:623) он 122,6×262 при
   221,8 / 288; здесь увеличен на 20 % с сохранением центра, чтобы переход под флаконом был
   мягче. Осознанное отступление от макета */
.m-s1 .m-patch{left:65.594cqw;top:62.438cqw;width:46cqw;height:92cqw;border-radius:50%;
  background:#fff;filter:blur(15.625cqw);z-index:2}

.m-s1 .m-title-sph{left:4.375cqw;top:0;width:19.063cqw;height:19.375cqw;z-index:4}
.m-s1 .m-hero-title{left:24.063cqw;top:3.125cqw;width:67.813cqw;z-index:4;color:var(--wine);
  font-weight:300;font-size:5.625cqw;line-height:1.1;text-transform:uppercase}
.m-s1 .m-hero-title .b{font-weight:500}

.m-s1 .m-banner{left:4.375cqw;top:32.813cqw;width:90.938cqw;height:44.688cqw;z-index:4;overflow:hidden;
  background:linear-gradient(90deg,rgba(94,0,35,.9) 18.4%,rgba(152,18,60,.9) 85%);
  backdrop-filter:blur(1.6cqw);-webkit-backdrop-filter:blur(1.6cqw)}
/* Цветокоррекция заливки узла 2148:629 (экспозиция −0,15, контраст −0,14, подкраска 0,23,
   света −0,65, тени −0,78) запечена в сам файл переэкспортом узла: подбор CSS-фильтра
   восстанавливал яркость, но не контраст — он выходил на 8 единиц ниже макетного */
.m-s1 .m-banner .banner-drop{position:absolute;left:49.375cqw;top:-13.438cqw;width:70.625cqw;height:auto;
  mix-blend-mode:luminosity;pointer-events:none;filter:brightness(1.02)}
.m-s1 .m-banner span{position:relative;z-index:1;display:block;color:#fff;font-weight:500;
  font-size:5.625cqw;line-height:1.25;padding:6cqw 30cqw 6cqw 9.375cqw;text-transform:uppercase}
/* drop-shadow не задан — см. .s1 .bottle выше */
/* Исходное положение — по узлу 179:1273 (y=277 в макете); ход подобран так, чтобы низ флакона
   не доходил до плашки преимуществ (её верх — 150cqw) */
.m-s1 .m-bottle{left:66.875cqw;top:64.063cqw;width:27.813cqw;height:77.813cqw;z-index:5;
  object-fit:contain;will-change:transform}

.m-s1 .m-adv-card{left:-0.313cqw;top:148.75cqw;width:100.625cqw;height:166.875cqw;z-index:3;
  background:linear-gradient(90deg,rgba(94,0,35,.9) 18.4%,rgba(152,18,60,.9) 85%)}
/* радиус 50 из спеки на кружке 52 px CSS-размытие размазывает до невидимости — значение
   подобрано замером яркости колец против рендера макета (pitfalls.md, п. 41);
   заливка узла сплошная, поэтому opacity не половинная */
.m-s1 .m-adv-glow{left:5.625cqw;top:158.125cqw;width:16.25cqw;height:16.25cqw;filter:blur(6.25cqw);opacity:1}
.m-s1 .m-adv-sph{left:4.063cqw;top:156.25cqw;width:19.375cqw;height:19.688cqw;z-index:5}
.m-s1 .m-adv-title{left:24.063cqw;top:158.75cqw;width:64.063cqw;z-index:4;color:#fff;font-weight:500;
  font-size:5.625cqw;line-height:1.25;text-transform:uppercase}
.m-s1 .m-ic1,.m-s1 .m-ic2,.m-s1 .m-ic3{left:42.813cqw;width:13.438cqw;height:13.438cqw;z-index:4}
.m-s1 .m-ic1{top:190.313cqw}
.m-s1 .m-ic2{top:227.813cqw}
.m-s1 .m-ic3{top:265.625cqw}
/* свечение DROP_SHADOW #924A52 r50/spread10 blendMode:LINEAR_DODGE (2148:639/653/664) — как и на
   десктопе, отсутствовало полностью */
/* блюр сужен пропорционально десктопной правке (1cqw*3.2=6.4cqw вместо прямых 15.625cqw) —
   тот же случай слияния соседних кругов в одну полосу */
.m-s1 .m-ic-glow{z-index:3;left:39.688cqw;width:19.688cqw;height:19.688cqw;border-radius:50%;
  background:#924A52;filter:blur(6.4cqw);mix-blend-mode:plus-lighter;opacity:.85;pointer-events:none}
.m-s1 .m-ic-glow.g1{top:187.188cqw}
.m-s1 .m-ic-glow.g2{top:224.688cqw}
.m-s1 .m-ic-glow.g3{top:262.5cqw}
/* доля иконки от круга у каждой разная, единый процент 58% (общее правило .m-ic-circ img)
   занижал вторую иконку — размеры сверены с Figma-спекой 11.08 */
.m-s1 .m-ic1 img{width:7.656cqw;height:10.5cqw}
.m-s1 .m-ic2 img{width:11.281cqw;height:11.094cqw}
.m-s1 .m-ic3 img{width:7.875cqw;height:8.063cqw}
.m-s1 .m-adv-item{z-index:4;color:#fff;font-weight:300;font-size:4.688cqw;line-height:1.25;text-align:center}
.m-s1 .m-i1{left:4.375cqw;top:208.438cqw;width:90cqw}
.m-s1 .m-i2{left:14.063cqw;top:245.938cqw;width:70.625cqw}
.m-s1 .m-i3{left:14.063cqw;top:283.75cqw;width:70.625cqw}
.m-s1 .m-note{left:4.375cqw;top:303.438cqw;width:90cqw;z-index:4;color:#fff;font-weight:300;
  font-size:3.125cqw;text-align:center;display:block;width:max-content;margin:0 auto;right:0}

/* ==================== M-ЭКРАНЫ 2-4: карточки-плашки ==================== */
.m-card-screen .m-photo{left:0;top:0;width:100cqw;height:105.625cqw;object-fit:cover;z-index:1}
.m-card-screen .m-icon{z-index:3}
.m-card-screen .m-txt{z-index:3;color:#fff;font-weight:300;font-size:4.688cqw;line-height:1.25;text-align:center}
.m-card-screen .m-txt .b{font-weight:500}

.m-s2{height:199.375cqw}
.m-s2 .m-card{left:0;top:105.625cqw;width:100cqw;height:93.75cqw;z-index:2;
  background:linear-gradient(90deg,rgba(94,0,35,.9) 18.4%,rgba(152,18,60,.9) 85%)}
.m-s2 .m-icon{left:36.875cqw;top:116.875cqw;width:25.625cqw;height:25.625cqw}
/* прежний файл иконки был обрезан по контуру рисунка (соотношение 1,107), а кадр макета
   2148:689 — 1,156, поэтому object-fit:contain вписывал её по высоте и сужал на 4 %;
   иконка переэкспортирована кадром. Смещение — из макета: рисунок стоит не по центру круга */
.m-s2 .m-icon img{width:17.719cqw;height:15.344cqw;transform:translate(-.516cqw,-.328cqw)}
.m-s2 .m-txt{left:19.688cqw;top:152.188cqw;width:63.75cqw}

.m-s3{height:190.625cqw}
.m-s3 .m-photo{height:108.438cqw}
.m-s3 .m-card{background:linear-gradient(180deg,rgba(152,18,60,.9) -0.4%,rgba(94,0,35,.9) 77.6%);left:-0.625cqw;top:108.438cqw;width:100cqw;height:82.5cqw;z-index:2}
.m-s3 .m-icon{left:35.938cqw;top:120cqw;width:25.625cqw;height:25.625cqw}
/* Кадр этой иконки в свёрнутом мобильном фрейме (2148:717) деформирован: рисунок сжат по
   вертикали, соотношение 1,36 против 1,24 в раскрытом фрейме (2082:100) и на настольной версии
   (137:128). Взят неискажённый кадр и его габарит 58,1×51,7 — осознанное отступление от
   свёрнутого фрейма макета в пользу неискажённых пропорций */
.m-s3 .m-icon img{width:18.156cqw;height:16.156cqw;transform:translate(.172cqw,-.484cqw)}
.m-s3 .m-txt{left:17.5cqw;top:155.625cqw;width:64.688cqw}

.m-s4{height:206.25cqw}
.m-s4 .m-photo{left:-0.313cqw;width:100.625cqw;height:105.938cqw}
.m-s4 .m-card{background:linear-gradient(180deg,rgba(152,18,60,.9) 0.7%,rgba(94,0,35,.9) 99.3%);left:-0.938cqw;top:105.938cqw;width:100.625cqw;height:100.313cqw;z-index:2}
.m-s4 .m-icon{left:36.563cqw;top:117.5cqw;width:25.625cqw;height:25.625cqw}
/* то же, кадр 2148:743 */
.m-s4 .m-icon img{width:13.875cqw;height:16.4375cqw;transform:translate(-.344cqw,.094cqw)}
.m-s4 .m-txt{left:17.5cqw;top:153.125cqw;width:65cqw}

/* ==================== M-ЭКРАН 5: КАК ДЕЙСТВУЕТ ==================== */
/* Блок раскрывается двумя группами: пункты пептидного комплекса и пункты растительных
   компонентов. При загрузке обе группы свёрнуты. Элементы позиционированы абсолютно, поэтому
   сворачивание задано переменными скрытой высоты: от --hA зависят положения всего, что лежит
   ниже первой группы, от суммы обеих — высота плашки и самой секции (нижние секции идут в
   потоке и поднимаются сами). */
.m-s5{--hA:0cqw;--hB:0cqw}
.m-s5.acc-a-closed{--hA:60.75cqw}
.m-s5.acc-b-closed{--hB:193.662cqw}
.m-s5.acc-a-closed .acc-a,.m-s5.acc-b-closed .acc-b{display:none}
.m-s5{height:calc(472.55cqw - var(--hA) - var(--hB))}
/* знак раскрытия внутри рамки-пилюли */
.m-s5 .m-acc-sign{z-index:5;color:#fff;font-weight:300;font-size:6.25cqw;line-height:1;
  display:grid;place-items:center;width:6.25cqw;height:6.25cqw;pointer-events:none}
.m-s5 .m-acc-sign::before{content:'–'}
.m-s5.acc-a-closed .m-acc-sign-a::before,.m-s5.acc-b-closed .m-acc-sign-b::before{content:'+'}
.m-s5 .m-acc-sign-a{left:85.938cqw;top:141.094cqw}
.m-s5 .m-acc-sign-b{left:85.938cqw;top:calc(235.469cqw - var(--hA))}
.m-s5 [data-acc]{cursor:pointer}
.m-s5 .m-s5-bg{left:-0.938cqw;top:0;width:102.813cqw;height:106.875cqw;object-fit:cover;z-index:1;filter:blur(0.938cqw)}
.m-s5 .m-s5-man-wrap{left:26.25cqw;top:19.375cqw;width:71.875cqw;height:97.5cqw;z-index:4}
.m-s5 .m-s5-shadow{left:30.938cqw;top:102.812cqw;width:33.75cqw;height:6.25cqw;border-radius:50%;
  background:#D9D9D9;filter:blur(3.125cqw);mix-blend-mode:multiply;z-index:1}
.m-s5 .m-s5-man{left:0;top:0;width:100%;height:100%;object-fit:cover}
.m-s5 .m-s5-card{left:-0.313cqw;top:105.625cqw;width:102.188cqw;height:calc(362.362cqw - var(--hA) - var(--hB));z-index:2;
  background:linear-gradient(90deg,rgba(94,0,35,.9) 18.4%,rgba(152,18,60,.9) 85%)}

.m-s5 .m-s5-title-glow{left:6.063cqw;top:115.125cqw;width:16.156cqw;height:16.156cqw;filter:blur(6.25cqw);opacity:1}
.m-s5 .m-s5-title-sph{left:4.375cqw;top:113.438cqw;width:19.375cqw;height:19.688cqw;z-index:5}
.m-s5 .m-s5-title{left:24.063cqw;top:116.25cqw;width:67.813cqw;z-index:4;color:#fff;font-weight:500;
  font-size:5.625cqw;line-height:1.25;text-transform:uppercase}

.m-s5 .m-pill{border:1px solid rgba(255,255,255,.4);z-index:3}
.m-s5 .m-pill1{left:5cqw;top:135.938cqw;width:90cqw;height:16.563cqw;border-radius:8.281cqw}
.m-s5 .m-p1-glow{left:7.531cqw;top:137.938cqw;width:12.75cqw;height:12.75cqw;filter:blur(6.875cqw);opacity:1}
.m-s5 .m-p1-sph{left:6.25cqw;top:136.563cqw;width:15.313cqw;height:15.313cqw;z-index:5}
.m-s5 .m-pill1-title{left:24.063cqw;top:141.563cqw;width:68.125cqw;z-index:4;color:#fff;font-weight:500;
  font-size:4.688cqw;line-height:1.25;text-transform:uppercase}

.m-s5 .m-pill2{left:5cqw;top:calc(220.313cqw - var(--hA));width:90cqw;height:36.563cqw;border-radius:9.375cqw}
.m-s5 .m-p2-glow{left:7.219cqw;top:calc(225.125cqw - var(--hA));width:12.719cqw;height:12.719cqw;filter:blur(6.875cqw);opacity:1}
.m-s5 .m-p2-sph{left:5.938cqw;top:calc(223.75cqw - var(--hA));width:15.313cqw;height:15.313cqw;z-index:5}
/* Межбуквенное 0,45 px при кегле 15 (узел 181:2209) — от него зависит разбивка на строки */
.m-s5 .m-pill2-title{left:24.063cqw;top:calc(223.75cqw - var(--hA));width:68.125cqw;z-index:4;color:#fff;font-weight:500;
  font-size:4.688cqw;line-height:1.25;text-transform:uppercase;letter-spacing:.03em}

.m-s5 .m-num-circ{width:13.438cqw;height:13.438cqw;font-size:8.75cqw;z-index:5}
/* В макете цифры стоят в кругах НЕ по центру и каждая по-своему: доли центра глифа по ширине
   круга — 0,444 у единицы, 0,485 у двойки, 0,497 у тройки, 0,462 у четвёрки, 0,491 у пятёрки.
   Центрирование средствами вёрстки выравнивает их все около 0,49–0,50, из-за чего единица и
   четвёрка уезжают правее макетных на 1,3 и 1,5 px. Поэтому у каждой цифры своё смещение,
   снятое замером глифа против рендера её узла */
/* По горизонтали смещения макетные (см. выше). По вертикали цифры выровнены по центру круга:
   единое смещение вниз на 0,5cqw. Точнее полупикселя не выходит — браузер округляет положение
   текста до целого пикселя, поэтому остаточное отклонение 0,2–0,5 px определяется высотой самого
   знака и одинаково при любом значении в диапазоне 0,4–0,6cqw */
.m-s5 .m-num-circ span{position:relative;top:.5cqw}
.m-s5 .m-n1 span{left:-.394cqw}
.m-s5 .m-n2 span{left:-.138cqw}
.m-s5 .m-n3 span{left:.115cqw}
.m-s5 .m-n4 span{left:-.453cqw}
.m-s5 .m-n5 span{left:-.041cqw}
/* Пункты списка в макете выровнены по центру (узлы 181:2162, 181:2175, 181:2221, 181:2227,
   181:2234, 181:2240 — textAlignHorizontal CENTER) */
.m-s5 .m-body{z-index:4;color:#fff;font-weight:300;font-size:4.688cqw;line-height:1.25;text-align:center}
.m-s5 .m-n1{left:43.438cqw;top:160.313cqw}
.m-s5 .m-b1{left:5cqw;top:178.438cqw;width:90cqw}
.m-s5 .m-n2{left:43.438cqw;top:calc(264.688cqw - var(--hA))}
.m-s5 .m-b2{left:5cqw;top:calc(282.813cqw - var(--hA));width:90cqw}
.m-s5 .m-n3{left:43.438cqw;top:calc(315.313cqw - var(--hA))}
.m-s5 .m-b3{left:14.688cqw;top:calc(333.438cqw - var(--hA));width:70.625cqw}
.m-s5 .m-n4{left:43.75cqw;top:calc(360cqw - var(--hA))}
.m-s5 .m-b4{left:5.313cqw;top:calc(378.125cqw - var(--hA));width:90cqw}
.m-s5 .m-n5{left:43.438cqw;top:calc(410.938cqw - var(--hA))}
.m-s5 .m-b5{left:14.688cqw;top:calc(429.063cqw - var(--hA));width:70.625cqw}

/* ==================== M-ЭКРАН 6: ГДЕ КУПИТЬ + ПРОДУКТ ==================== */
/* Высота секции не меняется: зазор до следующего экрана держится по макету */
.m-s6{height:372.188cqw}
.m-s6 .m-s6-sph{left:4.063cqw;top:0cqw;width:19.063cqw;height:19.375cqw;z-index:2}
/* Узел 181:2258: «Где купить сыворотку» — Light 300, «GELTEK Hair» — Medium 500 */
.m-s6 .m-s6-title{left:23.75cqw;top:3.125cqw;width:68.438cqw;z-index:2;color:var(--wine);font-weight:300;
  font-size:5.625cqw;line-height:1.25;text-transform:uppercase}
.m-s6 .m-s6-title .b{font-weight:500}

/* Группа шаров 186:3801 в макете лежит поверх витрины (zi 414–417 против 378–392), координаты —
   по узлам 186:3802 / 186:3803 / 186:3805 */
.m-s6 .m-s6-fsph{z-index:4;pointer-events:none;height:auto}
/* позиция и блюр всех трёх шаров сверены напрямую с Figma (2148:806/807/808) — были смещены
   на ~19cqw по left и ~7cqw по top, блюр отсутствовал вовсе */
.m-s6 .m-fs1{left:76.156cqw;top:230.938cqw;width:40.281cqw;filter:blur(1.551cqw)}
.m-s6 .m-fs2{left:-8.813cqw;top:264.031cqw;width:29.469cqw;filter:blur(.93cqw)}
.m-s6 .m-fs3{left:14.593cqw;top:232.188cqw;width:16.563cqw;filter:blur(.93cqw)}

/* 188:158 «glow», родитель 186:3798 (−61.7/4722) — секция начинается на 4596 (конец экрана 5 по
   спеку mobile), пересчёт: left=(-61.7)/3.2, top=(4852-4596)/3.2 */
.m-s6 .m-s6-edgeglow{left:-18.438cqw;top:260.625cqw;width:40.625cqw;height:39.063cqw;border-radius:50%;
  background:#E96882;filter:blur(13.957cqw);mix-blend-mode:screen;z-index:2}
/* Весь блок ниже сверен напрямую с Figma-спекой 11.08 (узлы 2148:779/781/1017/803/791/792/
   794/796/799 и потомки) — прежние координаты были получены до появления рабочего API-доступа
   и разошлись с текущим макетом на 7–30px по разным элементам */
.m-s6 .m-s6-plate{left:9.156cqw;top:213.75cqw;width:82.5cqw;height:133.094cqw;z-index:1;
  background:linear-gradient(180deg,#F8F8F8 -21.4%,#CACACA 118.5%)}
.m-s6 .m-s6-glowbox{left:9.156cqw;top:229cqw;width:82.5cqw;height:117.844cqw;z-index:1;overflow:hidden}
/* Координаты — относительно glowbox (см. предыдущее примечание о системе координат) */
.m-s6 .m-s6-glowlight{left:8.188cqw;top:44.875cqw;width:158.438cqw;height:291.469cqw;border-radius:50%;
  background:#fff;filter:blur(14.29cqw)}
.m-s6 .m-s6-glowsph{left:-17.75cqw;top:38.469cqw;width:129.063cqw;height:129.063cqw;filter:blur(2.716cqw);
  transform:rotate(180deg)}
.m-s6 .m-s6-pinkglow-clip{left:9.156cqw;top:237.375cqw;width:82.5cqw;height:109.469cqw;overflow:hidden;z-index:1}
.m-s6 .m-s6-pinkglow{position:absolute;left:4.969cqw;top:86.813cqw;width:35.656cqw;height:34.125cqw;
  border-radius:50%;background:rgba(233,104,130,.8);filter:blur(20.157cqw)}
.m-s6 .m-s6-logo{left:34.031cqw;top:224.063cqw;width:33.438cqw;height:30cqw;z-index:3}
.m-s6 .m-s6-peptidman{left:19.875cqw;top:322.5cqw;width:17.438cqw;height:37.688cqw;z-index:3;transform:scaleX(-1)}
/* низ обеих упаковок в макете (2148:791 и 2148:792) стоит на одной линии 4824,9;
   прежний top опускал флакон 50 мл на 23,6 px и подводил его вплотную к подписи */
.m-s6 .m-s6-pack50 {left:30.303cqw;top:296.906cqw;width:26.969cqw;height:58.375cqw;z-index:3;object-fit:contain}
.m-s6 .m-s6-pack100{left:54.094cqw; top:276.563cqw; width:28.375cqw;height:78.75cqw; z-index:3;object-fit:contain}
/* та же скрытая заливка, что и на десктопе (см. .s6 .g50) — узлы «glow» под этими подписями
   помечены в макете visible:false */
/* Узлы 2148:796 и 2148:799 в макете есть, но целиком накрыты своими сферами: замер яркости
   колец вокруг сферы даёт отклонение 0,24 при выключенном свечении против 0,67 при самом
   слабом включении — на белом фоне витрины включённое свечение видно, а в макете его нет */
.m-s6 .m-vg50{left:40.375cqw;top:357.875cqw;width:4.656cqw;height:4.656cqw;background:#CC4363;z-index:3;display:none}
.m-s6 .m-vs50{left:39.906cqw;top:357.187cqw;width:5.625cqw;height:auto;z-index:4}
.m-s6 .m-vt50{left:45.688cqw;top:358.937cqw;font-size:2.5cqw;color:#98123C;z-index:4}
.m-s6 .m-vg100{left:62.25cqw;top:357.875cqw;width:4.656cqw;height:4.656cqw;background:#CC4363;z-index:3;display:none}
.m-s6 .m-vs100{left:61.781cqw;top:357.187cqw;width:5.625cqw;height:auto;z-index:4}
.m-s6 .m-vt100{left:67.563cqw;top:358.937cqw;font-size:2.5cqw;color:#98123C;z-index:4}

.m-s6 .m-shopbtn{width:82.188cqw;height:42.5cqw;left:8.75cqw;z-index:2;display:flex;
  align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(152,18,60,.9) 2.9%,rgba(94,0,35,.9) 100%)}
/* Плитки магазинов идут сразу под заголовком (зазор 32 px по макету), витрина с продуктом —
   под ними */
.m-s6 .m-btn1{top:32.188cqw}
.m-s6 .m-btn2{top:77.501cqw}
.m-s6 .m-btn3{top:123.126cqw}
.m-s6 .m-btn4{top:168.438cqw}
/* Размеры логотипов — точный перевод боксов мобильного фрейма (cqw = px/3.2), а не доля от
   плитки: apteka.ru 112,5×23,9 (195:77), wildberries 133,1×19,5 (195:88), OZON 86,9×18,7
   (195:92), значок «Золотого яблока» 30,4×30,2 (195:84). Прежние доли (60% / 46%) давали
   apteka 160px и OZON 192px вместо макетных 112 и 87. */
.m-s6 .m-shopbtn img{object-fit:contain}
.m-s6 .m-btn1 img{width:35.156cqw;height:auto}
.m-s6 .wb-logo{width:41.594cqw;height:auto;filter:brightness(0) invert(1)}
/* Надпись — вектор 195:83 габаритом 145,6x14,7; кегль подобран под ту же ширину */
.m-s6 .zy-logo{width:9.5cqw;height:auto;margin-right:1.938cqw}
.m-s6 .zy-txt{color:#fff;font-weight:500;font-size:5.65cqw}
.m-s6 .m-shopbtn img.ozon-logo{width:27.156cqw;height:auto}

/* ==================== M-ЭКРАН 7: ДО/ПОСЛЕ ==================== */
.m-s7{height:268.438cqw}
.m-s7 .m-s7-card{left:0;top:0;width:99.688cqw;height:260.625cqw;z-index:1;
  background:linear-gradient(90deg,rgba(94,0,35,.9) 18.4%,rgba(152,18,60,.9) 85%)}
/* карточка этого экрана лежит на z-index 1, сфера на 3 — свечению остаётся 2 */
.m-s7 .m-s7-glow{left:5.688cqw;top:8.938cqw;width:16.188cqw;height:16.188cqw;filter:blur(6.25cqw);opacity:1;z-index:2}
.m-s7 .m-s7-sph{left:4.063cqw;top:7.188cqw;width:19.375cqw;height:19.688cqw;z-index:3}
.m-s7 .m-s7-title{left:23.75cqw;top:9.688cqw;width:67.813cqw;z-index:2;color:#fff;font-weight:300;
  font-size:5.625cqw;line-height:1.25;text-transform:uppercase}
.m-s7 .m-s7-title .b{font-weight:500}

/* круги «до» и «после» в макете лежат ПОВЕРХ капли и её свечений (zi 244 и 254 против 236
   у группы капли) — из-за обратного порядка розовое свечение красило верх круга «после» */
.m-s7 .m-ba-ring{width:55cqw;height:55cqw;border-radius:50%;background:#fff;z-index:7}
.m-s7 .m-ba-before{left:23.75cqw;top:60.313cqw}
.m-s7 .m-ba-after{left:23.75cqw;top:177.188cqw}
.m-s7 .m-ba-mask{width:51.875cqw;height:51.875cqw;border-radius:50%;overflow:hidden;z-index:8}
.m-s7 .m-ba-before-m{left:25.313cqw;top:61.875cqw}
.m-s7 .m-ba-before-m img{position:relative;left:-0.313cqw;top:3.438cqw;width:56.25cqw;height:57.5cqw;max-width:none}
.m-s7 .m-ba-after-m{left:25.313cqw;top:178.75cqw}
.m-s7 .m-ba-after-m img{position:relative;left:-0.938cqw;top:3.438cqw;width:55.938cqw;height:57.188cqw;max-width:none}
.m-s7 .m-ba-dot{width:10cqw;height:10cqw;border-radius:50%;border:1px solid rgba(255,255,255,.8);z-index:9}
.m-s7 .m-ba-before-dot{left:46.563cqw;top:82.813cqw}
.m-s7 .m-ba-after-dot{left:46.25cqw;top:199.688cqw}
.m-s7 .m-ba-label{z-index:9;color:#fff;font-weight:300;font-size:3.75cqw;text-transform:uppercase;
  text-align:center;white-space:nowrap}
.m-s7 .m-ba-before-label{left:8.125cqw;top:120cqw;width:83.75cqw}
.m-s7 .m-ba-after-label{left:8.125cqw;top:236.875cqw;width:84.063cqw}

.m-s7 .m-ba-line{left:7.5cqw;top:151.563cqw;width:84.688cqw;height:1px;background:rgba(255,255,255,.35);z-index:2}
.m-s7 .m-ba-glow1{left:33.75cqw;top:134.375cqw;width:33.125cqw;height:32.813cqw;border-radius:50%;
  background:#BB2444;filter:blur(31.25cqw);z-index:3}
/* фильтр десктопной капли (brightness 1.12) на мобильной давал пересвет: яркость зоны 98,2
   против макетных 85,0 и контраст 55,2 против 40,5 — подобрано отдельно по своему эталону */
.m-s7 .m-ba-drop{left:32.188cqw;top:133.125cqw;width:36.563cqw;height:35.938cqw;z-index:4;
  filter:brightness(.85) saturate(.95)}
.m-s7 .m-ba-glow2{left:36.25cqw;top:138.438cqw;width:25.313cqw;height:25cqw;border-radius:50%;
  background:#BF8A95;filter:blur(31.25cqw);mix-blend-mode:screen;z-index:5}
.m-s7 .m-ba-ball{left:32.813cqw;top:132.813cqw;width:34.375cqw;height:34.688cqw;z-index:6}

.m-s7 .m-s7-note{left:8.125cqw;top:248.438cqw;z-index:2;color:#fff;font-weight:300;font-size:3.125cqw}

/* ==================== M-ЭКРАН 8: ДОВЕРИЕ + ПРОИЗВОДСТВО ==================== */
/* Содержимое секции — по узлам актуального мобильного кадра (2148:857 сфера, 2148:856 заголовок,
   2148:854 текст, 2148:852 кнопка, 2148:849 фотография, 2148:850 тень, 2148:1040 логотип).
   Прежние координаты были сняты со старого макета (узлы 184:*, в нынешнем файле их нет) и давали
   общий сдвиг всей группы на 25 px вниз */
.m-s8{height:276.875cqw}
.m-s8 .m-s8-sph{left:4.375cqw;top:0;width:19.063cqw;height:19.375cqw;z-index:2}
.m-s8 .m-s8-title{left:24.063cqw;top:7.188cqw;width:68.125cqw;z-index:2;color:var(--wine);font-weight:300;
  font-size:5.625cqw;line-height:1.25;text-transform:uppercase}
.m-s8 .m-s8-title .b{font-weight:500}
/* бокс на 5 px шире макетных 250: строка «ского геля, GELTEK превратилась» набирается у нас на
   3 px шире и уезжала на отдельную строку. Остальные строки заданы жёсткими переносами,
   поэтому расширение бокса на них не влияет, а текст выровнен по левому краю */
.m-s8 .m-s8-body{left:13.438cqw;top:25.313cqw;width:79.688cqw;z-index:2;color:var(--gray2);font-weight:300;
  font-size:4.688cqw;line-height:1.25}
.m-s8 .m-s8-body .b{font-weight:500}
.m-s8 .m-s8-btn{left:26.563cqw;top:141.875cqw;width:46.563cqw;height:11.875cqw;z-index:2;border-radius:5.938cqw;
  background:var(--btn);color:#fff;font-weight:500;font-size:3.125cqw;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center}
.m-s8 .m-s8-photo{left:-0.625cqw;top:161.563cqw;width:100.938cqw;height:108.125cqw;object-fit:cover;z-index:1}
.m-s8 .m-s8-shadow{left:-20.938cqw;top:205cqw;width:144.063cqw;height:42.5cqw;border-radius:50%;
  background:#D9D9D9;filter:blur(31.25cqw);mix-blend-mode:multiply;z-index:1}
/* Узел 2148:1040 «Geltek main logo» — векторный логотип 276×40 px, а не набранный текст:
   прежняя текстовая имитация не совпадала с фирменным начертанием */
.m-s8 .m-s8-logo{left:8.125cqw;top:209.375cqw;width:86.25cqw;height:12.5cqw;z-index:2}

/* ==================== M-ЭКРАН 9: ШАМПУНИ ==================== */
.m-s9{height:291.875cqw}
.m-s9 .m-s9-title{left:23.75cqw;top:0cqw;width:68.125cqw;z-index:2;color:var(--wine);font-weight:500;
  font-size:5.625cqw;line-height:1.25;text-transform:uppercase}
/* Узлы 184:2645 и 184:2643: шары стоят на 2px ниже верха заголовка, центры совпадают.
   Заголовок смещён вниз на 8.125cqw относительно макета, поэтому шары повторяют этот сдвиг
   (.625 + 8.125), иначе они оказываются выше первой строки. */
.m-s9 .m-s9-duo{left:5cqw;top:0.625cqw;width:17.813cqw;height:12.5cqw;z-index:2}

.m-s9 .m-subhat{z-index:2;font-weight:500;line-height:1.25;text-transform:uppercase}
/* Подзаголовок в четыре строки, кегль и бокс по макету; порядок строк задан переносами */
.m-s9 .m-r-subhat{left:23.75cqw;top:19.062cqw;width:65cqw;color:var(--wine);font-size:4.688cqw}
.m-s9 .m-v-subhat{left:23.75cqw;top:160.938cqw;width:62.188cqw;color:var(--violet);font-size:4.688cqw}
.m-s9 .m-sph{z-index:2}
.m-s9 .m-r-sph{left:15.312cqw;top:18.75cqw;width:6.25cqw;height:auto}
.m-s9 .m-v-sph{left:15.312cqw;top:160.625cqw;width:6.25cqw;height:auto}

.m-s9 .m-banner{z-index:2;overflow:hidden;position:absolute;display:flex;align-items:center}
.m-s9 .m-banner .banner-drop{position:absolute;mix-blend-mode:luminosity;pointer-events:none}
.m-s9 .m-banner span{position:relative;z-index:1;color:#fff;font-weight:300;font-size:3.75cqw;
  line-height:1.258;padding:2cqw 40cqw 2cqw 9.063cqw}
.m-s9 .m-r-banner{left:4.375cqw;top:47.188cqw;width:90.938cqw;height:47.188cqw;
  background:linear-gradient(90deg,rgba(94,0,35,.9) 30.2%,rgba(152,18,60,.9) 75.5%)}
/* Правый отступ — точечно: в общем правиле он рассчитан на другой баннер и переставляет
   заданный макетом порядок строк */
.m-s9 .m-r-banner span{padding-right:30cqw}
/* Цветокоррекция и кадрирование узла 2194:320 запечены в файл переэкспортом: заливка узла
   растянута матрицей (STRETCH), поэтому целая картинка давала другой кадр */
.m-s9 .m-r-banner .banner-drop{left:50.625cqw;top:-5cqw;width:55.156cqw;height:54.406cqw}
.m-s9 .m-v-banner{left:4.375cqw;top:184.375cqw;width:90.938cqw;height:46.875cqw;
  background:linear-gradient(90deg,#604283 26.5%,#745F9A 66.3%)}
/* кегль обоих баннеров экрана в макете одинаковый — 12 px (узлы 2194:321 и 2194:274),
   у фиолетового стояло 10; межстрочное 15,096 при кегле 12 — это 1,258 */
.m-s9 .m-v-banner span{padding:2cqw 32cqw 2cqw 9.063cqw}
/* То же для узла 2194:277: у него матрица сжимает картинку по вертикали (2,62 против 2,17),
   поэтому высота при height:auto выходила на 78 px больше макетной */
.m-s9 .m-v-banner .banner-drop{left:48.125cqw;top:-67.188cqw;width:143.688cqw;height:117.344cqw}

.m-s9 .m-pack{z-index:3}
.m-s9 .m-r-norm30 {left:11.912cqw;top:96.394cqw;   width:14.731cqw;height:35.494cqw}
.m-s9 .m-r-norm100{left:35.219cqw;top:88.775cqw; width:20.531cqw;height:42.938cqw}
.m-s9 .m-r-norm390{left:60.631cqw;top:72.812cqw; width:29.375cqw;height:58.844cqw}
.m-s9 .m-v-post30 {left:3.125cqw; top:233.438cqw;width:15.969cqw;height:35.803cqw}
.m-s9 .m-v-post100{left:23.438cqw;top:225.312cqw;width:18.697cqw;height:44.422cqw}
.m-s9 .m-v-post250{left:45.938cqw;top:218.75cqw;width:21.278cqw;height:50.831cqw}
.m-s9 .m-v-post390{left:71.25cqw;top:209.375cqw;width:25.419cqw;height:59.269cqw}

/* свечения стояли под подписями объёмов, хотя в макете (2194:340/347/354, 290/297/283/304)
   лежат под самими сферами — расхождение по вертикали доходило до 31 px;
   размер у каждого свой, поэтому общий габарит из правила убран */
.m-s9 .m-vol-glow{z-index:3}
.m-s9 .m-vol-sph{width:5.625cqw;height:auto;z-index:4}
.m-s9 .m-vol-txt{font-size:2.5cqw;z-index:4}
.m-s9 .m-rg1,.m-s9 .m-rg2,.m-s9 .m-rg3{background:#CC4363}
.m-s9 .m-rg1{left:13.284cqw;top:136.459cqw;width:4.697cqw;height:4.697cqw}
.m-s9 .m-rs1{left:12.812cqw;top:135.956cqw}
.m-s9 .m-rt1{left:19.344cqw;top:137.025cqw;color:#fff}
.m-s9 .m-rg2{left:38.175cqw;top:136.587cqw;width:4.472cqw;height:4.472cqw}
.m-s9 .m-rs2{left:37.725cqw;top:136.109cqw}
.m-s9 .m-rt2{left:43.941cqw;top:137.125cqw;color:#fff}
.m-s9 .m-rg3{left:67.134cqw;top:136.403cqw;width:4.697cqw;height:4.697cqw}
.m-s9 .m-rs3{left:66.662cqw;top:135.897cqw}
.m-s9 .m-rt3{left:73.191cqw;top:136.966cqw;color:#fff}

.m-s9 .m-vg1,.m-s9 .m-vg2,.m-s9 .m-vg3,.m-s9 .m-vg4{background:#8E6CC8}
.m-s9 .m-vg1{left:5.128cqw;top:273.75cqw;width:4.581cqw;height:4.581cqw}
.m-s9 .m-vs1{left:5.128cqw;top:273.75cqw}
.m-s9 .m-vt1{left:11.037cqw;top:274.613cqw;color:#fff}
.m-s9 .m-vg2{left:26.775cqw;top:273.809cqw;width:4.534cqw;height:4.534cqw}
.m-s9 .m-vs2{left:26.775cqw;top:273.809cqw}
.m-s9 .m-vt2{left:32.622cqw;top:274.666cqw;color:#fff}
.m-s9 .m-vg3{left:48.628cqw;top:273.734cqw;width:4.581cqw;height:4.581cqw}
.m-s9 .m-vs3{left:48.628cqw;top:273.734cqw}
.m-s9 .m-vt3{left:54.534cqw;top:274.597cqw;color:#fff}
.m-s9 .m-vg4{left:75.525cqw;top:273.316cqw;width:4.7cqw;height:4.7cqw}
.m-s9 .m-vs4{left:75.525cqw;top:273.316cqw}
.m-s9 .m-vt4{left:81.584cqw;top:274.194cqw;color:#fff}

.m-s9 .m-r-band{left:-22.188cqw;top:110.844cqw;width:122.813cqw;height:43.75cqw;z-index:1;overflow:hidden;
  background:linear-gradient(90deg,rgba(94,0,35,.9) 17.4%,rgba(152,18,60,.9) 110.9%)}
/* «Intensive» в макете (2194:326) — не текст, а группа контуров 263,7×35,7: набранная надпись
   не совпадала ни по начертанию, ни по ширине (163,8 против 263,7). Тот же вектор, что в
   десктопной ветке; непрозрачность 0,5 запечена в сами контуры */
.m-s9 .m-wm-svg{position:absolute;display:block}
.m-s9 .m-wm-intensive{left:30.938cqw;top:.094cqw;width:82.406cqw;height:11.156cqw}
/* Плашки «Нажмите на изображение…» — 2194:358 (красная, #781D3D) и 2194:308 (фиолетовая,
   #624585); текст белый, по центру плашки */
/* плашка — скруглённая пилюля (cornerRadius 37,2 у групп 2194:358 и 2194:308), кегль 7,364 px */
.m-s9 .m-more-txt{z-index:4;display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font-size:2.301cqw;font-weight:300;color:#fff;height:5.625cqw;width:90.938cqw;left:4.375cqw;
  border-radius:11.625cqw}
.m-s9 .m-more-txt b{font-weight:500;color:#fff;margin-left:.625cqw}
.m-s9 .m-r-more{top:143.438cqw;background:#781D3D}
.m-s9 .m-v-more{top:279.688cqw;background:#624585}

.m-s9 .m-v-band{left:-1.562cqw;top:248.125cqw;width:102.188cqw;height:43.75cqw;z-index:1;overflow:hidden;
  background:linear-gradient(90deg,#604283 15%,#745F9A 100%)}
/* «Biome» — вектор 2194:266, габарит 256×55,8 */
.m-s9 .m-wm-biome{left:5.938cqw;top:0;width:80cqw;height:17.438cqw}

/* ==================== M-ЭКРАН 10 + ФИНАЛ + ФУТЕР ==================== */
.m-s10{height:58.438cqw}
/* Затемнения нет: у заливки узла 2194:366 режим MULTIPLY поверх белого, то есть картинка
   без изменений. Прежний brightness(.8) уводил кадр на 15 единиц яркости ниже макета */
.m-s10 .m-s10-photo{left:0;top:0;width:100.313cqw;height:58.125cqw;object-fit:cover;z-index:1}
.m-s10 .m-s10-title{left:13.75cqw;top:21.875cqw;width:58.125cqw;z-index:2;color:#fff;font-weight:500;
  font-size:5.625cqw;line-height:1.25;text-transform:uppercase}

.m-base{height:61.563cqw;background:#fff}
.m-base .m-cta{left:8.75cqw;top:9.375cqw;width:83.125cqw;z-index:1;color:var(--wine);font-weight:300;
  font-size:5.625cqw;line-height:1.25;text-transform:uppercase}
.m-base .m-cta .b{font-weight:500}
/* Узел 2194:371: бокс 188×42 при x 28, кегль 12, межстрочное 14,4, трекинг −0,12 и три строки —
   разрывы заданы в макете символами U+2028 и переводом строки. Прежние кегль и ширина были
   подобраны под двухстрочную разбивку и расходились с макетом */
.m-base .m-cta-note{left:8.75cqw;top:40.313cqw;width:58.75cqw;z-index:1;color:var(--wine);font-weight:300;
  font-size:3.75cqw;line-height:1.2;letter-spacing:-.01em}

.m-foot{height:28.125cqw;background:#F4F4F4}
.m-foot-logo{left:9.063cqw;top:10.625cqw;width:20.938cqw;height:auto}
.m-foot-text{left:9.063cqw;top:19.375cqw;color:#000;font-weight:300;font-size:2.5cqw}
/* Узел 2194:390: кружок 26,2×26,2 при 266,9 / 7966,8 — прежний был на 5,8 px крупнее и на 32 px
   левее. Доля монограммы в кружке — как в десктопной ветке (14×9 при кружке 32) */
.m-foot-vk{left:83.409cqw;top:7.763cqw;width:8.175cqw;height:8.175cqw;border-radius:50%;background:#921D36;
  display:grid;place-items:center}
.m-foot-vk-mono{width:43.75%;height:28.125%}