/* ============================================================
   ГЛАВНАЯ ATOM LAB - вёрстка по макету Figma «САЙТ АТОМ», Page 3,
   фрейм «Обложка» 1920x14304 (node 1417:3471). Переверстано 04.10.2026.

   КАК УСТРОЕНО.
   Десктоп (от 1200px) повторяет макет один в один: каждая секция - это
   кусок макета фиксированной высоты, элементы в ней стоят по координатам
   Figma. Координаты заданы в разметке переменными --x --y --w --h (px
   макета относительно верха секции), а сюда приходят через единицу --u
   (1/1920 ширины экрана, см. common.css). Поэтому на 1440 страница - это
   макет в масштабе 0,75, а не «примерно похоже».
   Меняешь текст - проверяй, что он влез в свою рамку на 1200 и на 1920:
   рамки фиксированные, лишняя строка наедет на соседа.

   Ниже 1200 координаты не применяются (класс .fx без медиазапроса ничего
   не делает) - там обычная вёрстка потоком, в px. Мобильной версии в
   макете нет, она нарисована по мотивам десктопа.

   ТЕКСТЫ - только через FACTS.md. Отличия от макета (запрещённые слова,
   сроки, тиражи) перечислены в docs/handoff.md.
   ============================================================ */

/* ---------- Координаты НЕ наследуются ----------
   Обычные CSS-переменные наследуются: стрелка внутри карточки без своей
   --w получала ширину самой карточки (поймано на первом же снимке).
   @property с inherits:false делает --x --y --w --h и --tw личными
   для элемента; где переменной нет - свойство просто остаётся auto.
   --iw --it --ty наоборот ДОЛЖНЫ наследоваться: их ставит карточка,
   а читают иконка и заголовок внутри. */
@property --x { syntax: "*"; inherits: false; }
@property --y { syntax: "*"; inherits: false; }
@property --w { syntax: "*"; inherits: false; }
@property --h { syntax: "*"; inherits: false; }
@property --tw { syntax: "*"; inherits: false; }

/* ---------- База ---------- */
body.home {
  margin: 0;
  background: #030109;
  color: #fff;
  font-family: "Manrope", "Manrope Fallback", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.35;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.home *, .home *::before, .home *::after { box-sizing: border-box; }
/* :where() - нулевая специфичность: любое правило с классом перебьёт эту базу */
:where(.home) img { max-width: 100%; height: auto; display: block; }
.home a { color: inherit; }
:where(.home) :is(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.home) :is(ul, ol) { padding: 0; }
:where(.home) button { font: inherit; color: inherit; }

/* Обрезка по горизонтали - на main, а не на body: overflow у body браузер
   переносит на окно, и scrollWidth остаётся шире экрана (замер 04.10.2026:
   3349 при 1920 - широкие рамки заголовков и веер Pantone за правым краем). */
.home main {
  position: relative;
  overflow-x: clip;
  background: #030109 url(/assets/img/home/bg-glow.webp) top center / 100% auto no-repeat;
}

/* Переход по якорю не прячет верх блока под фиксированной шапкой */
.home section[id], .home .tabpanel { scroll-margin-top: max(76px, calc(124 * var(--u))); }

/* Плавающая кнопка WhatsApp на первом экране главной прячется: здесь уже есть
   оранжевая «Обсудить проект» и иконка WhatsApp в шапке, а на 390 круг ложился
   поверх кнопки (замер 04.10.2026). Ниже первого экрана кнопка как везде. */
body.home .wa-fab.wa-fab--hero { opacity: 0; visibility: hidden; }

/* Видимые только для экранного диктора подписи (не текст для роботов:
   дублируют то, что уже видно картинкой - например, номер шага слайда). */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Типографика (мобильная база, десктоп ниже) ---------- */
.kicker {
  color: rgba(152, 152, 152, .6);
  font-weight: 500; font-size: 15px; line-height: 1.1; letter-spacing: -.02em;
  text-transform: lowercase;
}
.h2 {
  font-family: "Oswald", "Oswald Fallback", Arial, sans-serif;
  font-weight: 400; font-size: 35px; line-height: 1.08; letter-spacing: -.02em;
  text-transform: uppercase;
}
.h2 em, .hero__title em { font-style: normal; color: var(--orange); }
.lead { font-size: 16px; line-height: 1.3; letter-spacing: -.02em; }
/* счётчик позиций каталога: число вписывает scripts/catalog/build-data.mjs между метками POSITIONS */
.cat__count { display: block; font-size: 16px; line-height: 1.3; font-weight: 600; color: inherit; text-decoration: none; }
.cat__count:hover { text-decoration: underline; }

/* ---------- Кнопки-пилюли ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  position: relative;
  min-height: 56px; padding: 12px 64px 12px 28px;
  border: 1px solid #fff; border-radius: 200px;
  box-shadow: 0 4px 20px rgba(255, 255, 255, .25);
  color: #fff; text-decoration: none; text-align: center;
  font-weight: 700; font-size: 16px; line-height: 1.08; letter-spacing: -.02em; text-transform: uppercase;
  background: transparent; cursor: pointer;
  transition: background .2s, transform .2s;
}
.btn:hover { background: rgba(255, 255, 255, .1); }
.btn--orange { background: var(--orange); }
.btn--orange:hover { background: #ff7d2b; }
.btn--plain { padding-right: 28px; }
.btn .arr { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--orange); }
.btn--orange .arr { color: #fff; }
.arr { display: block; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: square; }
.btn:focus-visible, .card-link:focus-visible, .tab:focus-visible, .q-opt:focus-visible, .circ:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 4px;
}

/* Круглые кнопки соцсетей и стрелки слайдеров */
.circ {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid #fff; background: rgba(255, 255, 255, .09); color: #fff;
  cursor: pointer; padding: 0;
}
.circ svg { width: 20px; height: 20px; }
.circ--line { background: transparent; }
.circ--line svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.socials { display: flex; gap: 14px; }

/* Стекло. Figma рисует его эффектом GLASS (13% серого + размытие фона). */
.glass {
  background: rgba(217, 217, 217, .13);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
@media (max-width: 1023.98px) {
  /* закон проекта: ниже 1024 размытия нет, плотная заливка вместо него */
  .glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(40, 24, 78, .62); }
}

/* ---------- Мобильная и планшетная раскладка ---------- */
.s { position: relative; padding: 56px 20px; }
.s > * + * { margin-top: 18px; }
.s-hero { padding-top: 32px; }
.deco { display: none; }

/* ============================================================
   1. ПЕРВЫЙ ЭКРАН
   ============================================================ */
.hero__h1 { display: block; position: relative; z-index: 2; }
.hero__kicker { display: block; color: rgba(152, 152, 152, .75); font-weight: 500; font-size: 14px; letter-spacing: -.02em; text-transform: lowercase; margin-bottom: 12px; }
/* текст и кнопки первого экрана - над витриной (её слой z 1): изделие,
   въезжающее снизу справа, не должно закрывать абзац и кнопки */
.hero__lead, .s-hero .socials, .hero__ctas { z-index: 3; }
@media (max-width: 1199.98px) { .hero__lead, .s-hero .socials, .hero__ctas { position: relative; } }
/* имена собственные в строчной подписи - с большой буквы (Бишкек) */
.nc { text-transform: none; }
.hero__title {
  display: block;
  font-family: "Oswald", "Oswald Fallback", Arial, sans-serif;
  font-weight: 400; font-size: 35px; line-height: 1.08; letter-spacing: -.02em; text-transform: uppercase;
}
/* z-index 1 - свой слой: шары и товар остаются ПОД заголовком (z 2) */
.hero__visual { position: relative; z-index: 1; margin: 8px -20px 0; aspect-ratio: 1.05; }

/* --- Витрина со старой главной: орбиты и конвейер товаров ---
   Перенесено 04.10.2026 из css/style.css старого сайта (блоки «Орбиты» и
   «Центр: диагональный конвейер»). Отличие одно: размеры в долях блока
   .hero__visual, а не экрана, - витрина живёт в координатах макета. */
.hero-orbits { position: absolute; inset: 0; pointer-events: none; }
.orbit {
  position: absolute; left: 50%; top: 50%; width: var(--ow);
  translate: var(--ox, 0) var(--oy, 0);
  transform: translate(-50%, -50%) scale(.9);
}
.orbit--o1 { --ow: 74%; aspect-ratio: 1410 / 1146; }
.orbit--o2 { --ow: 83%; aspect-ratio: 1379 / 1215; --ox: -3%; --oy: 2.5%; }
.orbit__img { width: 100%; height: 100%; display: block; }
.orbit__core {
  position: absolute; left: 50%; top: 50%;
  width: var(--sz); aspect-ratio: 1;
  margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
  filter: blur(1.2px); will-change: transform;
}
.orbit__core--o1 { --sz: 7.8%; }
.orbit__core--o2 { --sz: 5.8%; }
.orbit__core img { width: 100%; height: 100%; }
.showcase__stage { position: absolute; inset: 0; pointer-events: none; }
.showcase__shadow {
  position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%);
  width: 30%; height: 4%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .38), transparent 70%);
  filter: blur(7px); animation: scShadow 5s ease-in-out infinite;
}
.showcase__item {
  position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer;
  transform: translate(var(--x, 34%), var(--y, 32%)) scale(var(--sc, .3));
  opacity: var(--op, 0); filter: blur(var(--bl, 0px));
  transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .9s cubic-bezier(.65, 0, .35, 1), filter .9s cubic-bezier(.65, 0, .35, 1);
  pointer-events: none;
}
.showcase__item.no-anim { transition: none !important; }
.showcase__float { display: grid; place-items: center; width: 100%; height: 100%; animation: scFloat 5s ease-in-out infinite; }
.showcase__item img {
  backface-visibility: hidden; width: 58%; height: 70%; object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .42));
}
.showcase__item.is-tall img { width: auto; height: 76%; max-width: 52%; }
.showcase__item.is-active { --x: 0%; --y: 0%; --sc: 1; --op: 1; --bl: 0px; z-index: 5; pointer-events: auto; }
.showcase__item.is-next { --x: 40%; --y: 56%; --sc: .45; --op: 0; --bl: 8px; z-index: 4; }
.showcase__item.is-prev { --x: -40%; --y: -56%; --sc: .347; --op: 0; --bl: 8px; z-index: 3; }
@keyframes scFloat { 0%, 100% { transform: translateY(-1.2%); } 50% { transform: translateY(1.2%); } }
@keyframes scShadow { 0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .38; } 50% { transform: translateX(-50%) scaleX(1.15); opacity: .24; } }
@media (prefers-reduced-motion: reduce) {
  .showcase__float, .showcase__shadow { animation: none; }
  .showcase__item { transition: none; }
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__ctas .btn { flex: 1 1 220px; padding-right: 28px; }

/* ============================================================
   2. ПРЕИМУЩЕСТВА + ЦЕХ
   ============================================================ */
.adv__list { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; list-style: none; }
.adv__item { position: relative; padding-left: 0; }
.adv__num { color: rgba(152, 152, 152, .6); font-weight: 500; font-size: 26px; line-height: 1; letter-spacing: -.02em; }
.adv__title { margin-top: 6px !important; font-family: "Oswald", "Oswald Fallback", Arial, sans-serif; font-weight: 400; font-size: 21px; line-height: 1.3; text-transform: uppercase; }
.adv__text { margin-top: 8px !important; font-size: 15px; line-height: 1.35; }
.adv__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adv__photos img { width: 100%; height: 100%; aspect-ratio: .92; object-fit: cover; border-radius: 8px; }

/* ============================================================
   3. РЕШЕНИЯ: карточки с «шапкой»-кругом
   Форма из макета - объединение круга 184 и прямоугольника r37.
   Круг обрезан по верхнюю кромку прямоугольника, поэтому стекло не
   ложится в два слоя там, где фигуры перекрываются.
   ============================================================ */
.sol__grid { display: grid; grid-template-columns: 1fr; gap: 110px 20px; margin-top: 120px !important; }
.bump {
  position: relative; display: block; text-decoration: none; color: #fff;
  padding: 0;
}
.bump__cap {
  position: absolute; left: 50%; top: -88px; width: 184px; height: 184px; transform: translateX(-50%);
  border-radius: 50%; clip-path: inset(0 0 calc(100% - 89px) 0);
}
.bump__cap, .bump__body, .post__body { display: block; }
.bump__body { position: relative; border-radius: 37px; padding: 108px 24px 64px; min-height: 300px; }
.bump__icon { position: absolute; left: 50%; top: -86px; width: 150px; transform: translateX(-50%); z-index: 2; }
.bump__glow { position: absolute; left: 50%; top: 34px; width: 177px; height: 45px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(63, 11, 196, .95), rgba(63, 11, 196, 0)); filter: blur(14px); z-index: 1; }
.bump__title { position: relative; z-index: 2; text-align: center; font-weight: 700; font-size: 22px; line-height: 1.08; letter-spacing: -.02em; text-transform: uppercase; }
.bump__list { position: relative; z-index: 2; margin-top: 22px !important; padding-left: 22px; font-size: 16px; line-height: 1.32; letter-spacing: -.02em; }
.bump__arr { position: absolute; right: 26px; bottom: 22px; width: 24px; height: 24px; color: var(--orange); z-index: 2; }
.bump:hover .bump__body { background: rgba(217, 217, 217, .19); }

/* ============================================================
   4. ОНЛАЙН / ОФЛАЙН
   ============================================================ */
.duo { display: grid; gap: 14px; }
.duo__box {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 86px; padding: 14px 64px 14px 20px; border-radius: 20px;
  color: #fff; text-decoration: none;
}
.duo__box--fill { background: rgba(255, 255, 255, .10); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.duo__box--line { border: 1px solid #fff; }
.duo__text { font-size: 14px; line-height: 1.1; letter-spacing: -.02em; max-width: 60%; }
.duo__box--fill .duo__text { font-weight: 300; }
.duo__logo { height: 30px; width: auto; }
.duo__box--line .duo__logo { height: 44px; }
.duo__arr { position: absolute; right: 20px; top: 14px; width: 24px; height: 24px; color: var(--orange); }

/* ============================================================
   5. КАТАЛОГ С ВКЛАДКАМИ
   ============================================================ */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.tab {
  height: 44px; padding: 0 20px; border-radius: 50px;
  border: 1px solid #fff; background: transparent; color: #fff; cursor: pointer;
  font-size: 15px; letter-spacing: -.02em;
}
.tab[aria-selected="true"] { background: var(--orange); }
.tabpanel[hidden] { display: none !important; }
/* На десктопе панель растянута на всю секцию (координаты макета) и лежит
   поверх вкладок - мышиный клик до кнопок не доходил, а click() из JS
   проходил (поймано тестировщиком 04.10.2026). Сама панель клики пропускает,
   её содержимое - ловит. */
.tabpanel { pointer-events: none; }
.tabpanel > * { pointer-events: auto; }

.feat { position: relative; border-radius: 37px; padding: 20px 20px 24px; margin-top: 24px; }
.feat__media { position: relative; }
.feat__slide { display: none; }
.feat__slide.is-on { display: block; }
.feat__img { width: 100%; max-width: 380px; aspect-ratio: 1; object-fit: contain; margin: 0 auto; }
.feat__cap { position: static; margin-top: 8px; }
.feat__name { font-family: "Oswald", "Oswald Fallback", Arial, sans-serif; font-size: 22px; line-height: 1.08; }
.feat__run { margin-top: 2px !important; font-size: 13px; font-weight: 300; }
.feat__run b { font-weight: 700; }
.feat__nav { display: flex; gap: 8px; margin-top: 10px; }
.feat__cap, .feat__nav { position: relative; }
.feat__nav .circ { width: 44px; height: 44px; background: transparent; }
.feat__title { margin-top: 18px !important; font-family: "Oswald", "Oswald Fallback", Arial, sans-serif; font-size: 28px; line-height: 1.08; text-transform: uppercase; }
.feat__desc { margin-top: 10px !important; font-size: 15px; line-height: 1.1; letter-spacing: -.02em; }
.feat__grid { margin-top: 18px !important; display: grid; grid-template-columns: 1fr; list-style: none; }
.feat__grid li { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .32); }
.feat__grid li:last-child { border-bottom: 0; }
.feat__grid b { display: block; font-size: 15px; line-height: 1.3; text-transform: uppercase; }
.feat__grid span { display: block; font-size: 15px; line-height: 1.3; }
.feat .btn { margin-top: 16px; width: 100%; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; list-style: none; }
.pcard { position: relative; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; }
.pcard__top { position: relative; aspect-ratio: 417 / 260; /* градиент из макета: GRADIENT_RADIAL, центр (0.5, 0.53), радиусы 1.45 x 1.54
     размера плашки, #8b5eff 31% -> #f9f1ff на 42% радиуса */
  background: radial-gradient(145% 154% at 50% 53%, rgba(139, 94, 255, .31) 0%, #f9f1ff 42%); border-radius: 26px 26px 0 0; }
.pcard__img { position: absolute; left: 1%; top: -2%; width: 98%; height: 104%; object-fit: cover; }
.pcard__img--contain { object-fit: contain; padding: 6% 10% 0; }
.pcard__body { padding: 12px 12px 14px; display: flex; flex-direction: column; flex: 1; }
.pcard__title { font-weight: 700; font-size: 15px; line-height: 1.3; text-transform: uppercase; letter-spacing: -.02em; }
.pcard__desc { margin-top: 6px !important; font-size: 13px; line-height: 1.3; letter-spacing: -.02em; }
.pcard__run { margin-top: 8px !important; font-size: 13px; line-height: 1.3; }
.pcard .btn { margin-top: auto; min-height: 44px; padding: 8px 40px 8px 14px; justify-content: flex-start; text-transform: lowercase; font-size: 14px; }
.pcard .btn .arr { right: 14px; width: 16px; height: 16px; }
.pcard__spacer { flex: 1; min-height: 10px; }
.cat__ctas { display: grid; gap: 12px; margin-top: 26px !important; }

/* ============================================================
   6. ПРОЦЕСС: колба и шаги
   ============================================================ */
/* z-index 0 - свой слой: стекло (z 2 внутри) не вылезает поверх карточек шагов */
.proc__flask { position: relative; z-index: 0; width: 70%; max-width: 340px; margin: 0 auto; aspect-ratio: 1; }
.proc__flask img { position: relative; z-index: 2; width: 100%; height: 100%; }
/* Жидкость: контур полости снят с картинки flask.webp (900x900) в процентах -
   горлышко 41-59% по ширине, плечи на 30% высоты, дно на 87%. Уровень --fill
   (0..1) выставляет js/home.js по прокрутке блока; максимум - до плеч. Цвет -
   градиент жидкости старой главной (.pantone-flask__liquid). */
.flask-liquid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  clip-path: polygon(41% 12%, 59% 12%, 59.5% 30%, 76.5% 70%, 79% 79%, 76.5% 86.5%, 23.5% 86.5%, 21% 79%, 23.5% 70%, 40.5% 30%);
}
.flask-liquid i {
  position: absolute; left: 0; right: 0; bottom: 13%;
  height: calc(var(--fill, 0) * 57%);
  background: linear-gradient(118deg, #2b08a2 0%, #5b2dd0 36%, #8f35d6 68%, #c15fd4 100%);
  opacity: .9;
}
.flask-liquid i::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2.4%;
  background: rgba(210, 153, 255, .75); filter: blur(1px);
}
.flask-liquid i::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 34% 22%, rgba(255, 255, 255, .35), transparent 22%), linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
}
.steps { display: grid; gap: 12px; list-style: none; }
.step { position: relative; z-index: 1; display: grid; grid-template-columns: 44px 1fr; gap: 0 10px; padding: 16px 16px 16px 12px; border-radius: 20px; }
/* цвет светлее фигмы и тень: над залитой колбой шаги 03-04 сливались с жидкостью (тестировщик 04.10.2026) */
.step__num { grid-row: span 2; color: rgba(205, 200, 220, .78); text-shadow: 0 1px 10px rgba(20, 4, 60, .75); font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: -.02em; }
.step__title { font-weight: 700; font-size: 15px; line-height: 1.1; text-transform: uppercase; }
.step__text { margin-top: 6px !important; font-size: 14px; line-height: 1.3; }

/* ============================================================
   7. ЦВЕТ
   ============================================================ */
.color__grid { display: grid; gap: 116px 20px; margin-top: 126px !important; list-style: none; }
.bump--sm .bump__cap { width: 175px; height: 175px; top: -98px; clip-path: inset(0 0 calc(100% - 99px) 0); }
.bump--sm .bump__body { border-radius: 14px; padding: 92px 24px 30px; min-height: 0; }
.bump--sm .bump__icon { width: 142px; top: -87px; }
.bump--sm .bump__glow { width: 108px; height: 28px; top: 20px; }
.bump--sm .bump__title { font-size: 20px; line-height: 1.2; }
.bump__text { position: relative; z-index: 2; margin-top: 14px !important; font-size: 15px; line-height: 1.32; }
.color__fan { position: relative; width: 70%; max-width: 360px; margin: 10px auto 0; aspect-ratio: 1; }
.color__fan img { width: 100%; transform: rotate(21.1deg); }

/* ============================================================
   8. ДОВЕРИЕ: клиенты и кейсы
   ============================================================ */
.clients { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 18px; list-style: none; }
.client { width: 150px; text-align: center; }
.client img { width: 120px; height: auto; margin: 0 auto; }
.client p { margin-top: 4px !important; font-weight: 700; font-size: 14px; letter-spacing: -.02em; }
.cases { display: grid; gap: 16px; list-style: none; }
.case { position: relative; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; color: #fff; text-decoration: none; }
.case:hover { background-color: rgba(217, 217, 217, .19); }
.case__img { width: 100%; aspect-ratio: 691 / 255; object-fit: cover; }
.case__body { display: flex; align-items: center; min-height: 104px; padding: 16px 52px 16px 20px; }
.case__title { font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: -.02em; text-transform: uppercase; }
.case__arr { position: absolute; right: 18px; bottom: 16px; width: 20px; height: 20px; color: var(--orange); }
.trust__ctas { display: grid; gap: 12px; }
/* одна кнопка «Больше кейсов» (10.10.2026) - по центру */
.trust__ctas.trust__ctas--one { grid-template-columns: minmax(0, 460px); justify-content: center; }

/* ============================================================
   9. ОТЗЫВЫ 2ГИС
   Снимок отзывов не вшит в разметку: блок грузит их сам, когда до него
   доскроллили (js/home.js). Пока не загрузилось - видна ссылка на 2ГИС.
   ============================================================ */
.rev__head { text-align: left; }
.rev__rating { margin-top: 8px !important; font-size: 15px; color: rgba(255, 255, 255, .8); }
.rev__rating b { color: #fff; }
.rev__viewport { overflow: hidden; }
.rev__track { display: flex; gap: 16px; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.rcard { flex: 0 0 100%; border-radius: 26px; padding: 20px; min-height: 220px; display: flex; flex-direction: column; gap: 10px; }
.rcard__head { display: flex; align-items: center; gap: 12px; }
.rcard__ava { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #3f0bc4; display: grid; place-items: center; font-weight: 700; font-size: 18px; flex: 0 0 auto; }
.rcard__name { font-weight: 700; font-size: 16px; line-height: 1.2; }
.rcard__date { font-size: 13px; color: rgba(255, 255, 255, .55); }
.rcard__stars { color: var(--orange); letter-spacing: 2px; font-size: 16px; }
.rcard__text { font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rcard > * { flex-shrink: 0; }
.rcard__ans { font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .65); border-left: 2px solid var(--orange); padding-left: 10px; }
.rev__nav { display: flex; justify-content: center; gap: 12px; margin-top: 18px !important; }
.rev__stub { border-radius: 26px; padding: 22px; }
.rev__stub[hidden], .rev__viewport[hidden], .rev__nav[hidden] { display: none !important; }
.rev__more { margin-top: 18px !important; display: flex; flex-wrap: wrap; gap: 12px; }
.rev__more .btn { flex: 1 1 260px; }

/* ============================================================
   10. БЛОГ
   ============================================================ */
.posts { display: grid; gap: 34px; list-style: none; }
.post { position: relative; display: flex; flex-direction: column; border-radius: 26px; color: #fff; text-decoration: none; }
.post__img { width: 100%; aspect-ratio: 513 / 255; object-fit: cover; border-radius: 26px 26px 0 0; }
.post__tag { position: absolute; right: 18px; top: -16px; height: 34px; padding: 0 18px; border-radius: 200px; background: var(--orange); display: inline-flex; align-items: center; font-size: 15px; }
.post__body { padding: 18px 20px 24px; }
.post__title { font-weight: 700; font-size: 17px; line-height: 1.3; text-transform: uppercase; letter-spacing: -.02em; }
.post__meta { margin-top: 12px !important; font-size: 14px; line-height: 1.35; }
.post__arr { position: absolute; right: 22px; bottom: 22px; width: 20px; height: 20px; color: var(--orange); }

/* ============================================================
   11. ДИЗАЙНЕР
   Лента работ едет сама. Две копии списка в одной дорожке: анимация
   сдвигает дорожку ровно на половину, и шов не виден.
   ============================================================ */
.help { border-radius: 37px; padding: 22px 24px; }
.help__title { font-weight: 700; font-size: 18px; text-transform: uppercase; }
.help__list { margin-top: 10px !important; padding-left: 22px; font-size: 15px; line-height: 1.3; }
.ribbon { overflow: hidden; margin: 24px -20px 0 !important; }
.ribbon__track { display: flex; gap: 14px; width: max-content; animation: ribbon 60s linear infinite; }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
.ribbon img { width: 160px; height: 198px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
@keyframes ribbon { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ribbon__track { animation: none; } }

/* ============================================================
   12. ШОУРУМ
   ============================================================ */
.addr {
  position: relative; border-radius: 30px; padding: 22px 22px 18px;
  background: linear-gradient(105deg, #3d1aa6 0%, #35207f 48%, #2a1c5c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.addr dt { font-weight: 700; font-size: 18px; line-height: 1.1; text-transform: uppercase; }
.addr dd { margin: 4px 0 16px; font-size: 15px; line-height: 1.3; }
.addr dd:last-child { margin-bottom: 0; }
.addr a { text-decoration: none; }
.addr__sphere { position: absolute; right: -14px; top: -34px; width: 70px; }
.show__photo { width: 100%; border-radius: 30px; }

/* ============================================================
   13. КВИЗ (логика - js/home.js, перенесена из main.js без изменений)
   ============================================================ */
/* В common.css (блок «без размытия ниже 1024px») класс .quiz__box от прежней
   главной получает плотную фиолетовую заливку с !important. В макете у квиза
   подложки нет - снимаем, иначе на 390/768 варианты упираются в края плашки. */
.home .quiz__box { background-color: transparent !important; }
.quiz__bar { position: relative; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.quiz__bar-fill { position: absolute; inset: 0 auto 0 0; width: 20%; background: rgba(255, 255, 255, .78); border-radius: 6px; transition: width .3s; }
.quiz__count { margin-top: 12px !important; font-size: 13px; color: rgba(255, 255, 255, .8); }
.q-picked { margin-top: 8px !important; font-size: 14px; color: rgba(255, 255, 255, .85); }
.q-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.q-step[hidden] { display: none; }
.q-q { padding: 0; font-family: "Oswald", "Oswald Fallback", Arial, sans-serif; font-size: 28px; line-height: 1.1; text-transform: uppercase; margin-top: 6px; }
.q-opts { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
.q-opt {
  min-height: 56px; padding: 10px 24px; border-radius: 200px; text-align: left;
  border: 1px solid rgba(255, 255, 255, .78); background: rgba(3, 1, 9, .25); color: #fff; cursor: pointer;
  font-size: 15px; letter-spacing: -.02em; transition: background .2s, border-color .2s;
}
.q-opt:hover { background: rgba(255, 255, 255, .08); }
.q-opt.is-picked { background: var(--orange); border-color: var(--orange); }
.q-hint { margin-top: 14px; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, .85); }
.q-hint[hidden] { display: none; }
.q-extra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-top: 18px; }
.q-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, .8); margin-top: 14px; }
.q-field--inline { margin-top: 0; }
.q-input {
  min-height: 52px; padding: 12px 22px; border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .6); background: rgba(3, 1, 9, .4); color: #fff;
  font: inherit; font-size: 16px;
}
.q-input::placeholder { color: rgba(255, 255, 255, .45); }
.q-input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.q-input--area { border-radius: 22px; resize: vertical; min-height: 96px; }
.q-input.is-bad { border-color: #ff5a5a; }
.q-input--date { color-scheme: dark; }
.q-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.q-check input { width: 18px; height: 18px; accent-color: var(--orange); }
.q-next, .q-submit {
  min-height: 52px; padding: 10px 28px; border-radius: 200px; border: 0; cursor: pointer;
  background: var(--orange); color: #fff; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: -.02em;
}
.q-submit { margin-top: 18px; width: 100%; min-height: 58px; }
.q-final { margin-top: 10px; font-size: 15px; line-height: 1.35; color: rgba(255, 255, 255, .85); }
.q-opt-mark { font-style: normal; color: rgba(255, 255, 255, .5); }
.q-counter { align-self: flex-end; font-size: 12px; color: rgba(255, 255, 255, .5); }
.q-error { margin-top: 10px; color: #ff8a8a; font-size: 14px; }
.q-error[hidden] { display: none; }
.q-nav { margin-top: 14px; }
.q-back { background: none; border: 0; color: rgba(255, 255, 255, .75); cursor: pointer; padding: 6px 0; font-size: 14px; }
.q-back[hidden] { display: none; }
.q-thanks { padding: 24px 0 8px; }
.q-thanks[hidden] { display: none; }
.q-thanks__title { font-family: "Oswald", "Oswald Fallback", Arial, sans-serif; font-size: 30px; line-height: 1.1; text-transform: uppercase; }
.q-thanks__text { margin-top: 10px; font-size: 16px; line-height: 1.35; }
.wa-block { display: grid; gap: 16px; margin-top: 56px !important; }
.wa-block .btn { width: 100%; }

/* ---------- Планшет ---------- */
@media (min-width: 640px) {
  .s { padding: 72px 40px; }
  .h2, .hero__title { font-size: 47px; }
  .lead { font-size: 16px; }
  .adv__list { grid-template-columns: repeat(4, 1fr); }
  .adv__photos { grid-template-columns: 365fr 377fr 552fr 435fr; }
  .sol__grid { grid-template-columns: 1fr 1fr; }
  .duo { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .feat__grid { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .cat__ctas, .trust__ctas { grid-template-columns: 1fr 1fr; }
  .color__grid { grid-template-columns: 1fr 1fr; }
  .cases { grid-template-columns: 1fr 1fr; }
  .posts { grid-template-columns: 1fr 1fr; }
  .rcard { flex-basis: calc(50% - 8px); }
  .q-opts--grid { grid-template-columns: 1fr 1fr; }
  .wa-block { grid-template-columns: 1fr 1fr; align-items: center; }
  .show__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
  .ribbon { margin: 24px -40px 0 !important; }
}
@media (min-width: 900px) {
  .q-opts--grid { grid-template-columns: repeat(3, 1fr); }
  .sol__grid { grid-template-columns: repeat(4, 1fr); }
  .cards { grid-template-columns: repeat(4, 1fr); }
  .posts { grid-template-columns: repeat(3, 1fr); }
  .color__grid { grid-template-columns: repeat(3, 1fr); }
  .feat { display: grid; grid-template-columns: 40% 1fr; gap: 0 28px; padding: 28px; }
  .feat__media { grid-row: span 5; }
}

/* ============================================================
   ДЕСКТОП 1200+: КООРДИНАТЫ МАКЕТА
   ============================================================ */
@media (min-width: 1200px) {
  /* «Лист» макета шириной 1920 в единицах --u; при --k < 1 он уже экрана
     и стоит по центру, фон и свечения остаются на всю ширину (main). */
  .s { padding: 0; height: calc(var(--sh) * var(--u)); width: calc(1920 * var(--u)); margin-inline: auto; }
  .s > * + * { margin-top: 0; }
  .fx {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
  }
  .deco { display: block; position: absolute; pointer-events: none; }
  .m-only { display: none !important; }

  /* типографика макета */
  /* типографика макета: заголовки в --uh, текст в --ut (common.css, 09.10.2026) */
  .kicker { font-size: calc(25 * var(--ut)); line-height: calc(27 * var(--ut)); white-space: nowrap; }
  .h2, .hero__title { font-size: calc(79 * var(--uh)); line-height: calc(85.3 * var(--uh)); white-space: nowrap; }
  .lead { font-size: calc(25 * var(--ut)); line-height: calc(33 * var(--ut)); }
  .cat__count { font-size: calc(25 * var(--ut)); line-height: calc(27 * var(--ut)); }
  .lead--33 { line-height: calc(33 * var(--ut)); }
  .lead--30 { font-size: calc(30 * var(--ut)); line-height: calc(36 * var(--ut)); }

  .btn {
    /* справа место под стрелку: в макете текст смещён влево от центра на те же ~22px */
    min-height: 0; height: calc(78 * var(--u)); padding: 0 calc(74 * var(--u)) 0 calc(30 * var(--u));
    gap: 0; box-shadow: 0 calc(4 * var(--u)) calc(20 * var(--u)) rgba(255, 255, 255, .25);
    font-size: calc(30 * var(--ut));
  }
  .btn .arr { right: calc(28 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
  .arr { stroke-width: 3.2; }
  .circ { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
  .circ svg { width: calc(25 * var(--u)); height: calc(25 * var(--u)); }
  .circ--line svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
  .socials { gap: calc(21 * var(--u)); }

  /* 1. Первый экран */
  .hero__kicker { margin: 0; font-size: calc(25 * var(--ut)); line-height: calc(27 * var(--ut)); color: rgba(152, 152, 152, .6); word-spacing: calc(12 * var(--u)); }
  .hero__h1 { position: absolute; left: 0; top: 0; width: 100%; }
  .hero__h1 .hero__kicker { position: absolute; left: calc(125 * var(--u)); top: calc(102 * var(--u)); white-space: nowrap; }
  .hero__h1 .hero__title { position: absolute; left: calc(116 * var(--u)); top: calc(149 * var(--u)); }
  /* витрина на месте пледа из макета: центр ~(930, 720), низ товара выше
     абзаца «Соберём...» (y 872), верх ниже заголовка (y 320). 04.10.2026 весь
     первый экран поднят на 140: место под прозрачную шапку макета больше не
     нужно - шапка вернулась старая, в потоке над экраном. */
  .hero__visual { position: absolute; margin: 0; aspect-ratio: auto; left: calc(400 * var(--u)); top: calc(200 * var(--u)); width: calc(1060 * var(--u)); height: calc(760 * var(--u)); }
  .hero__ctas { display: block; }
  .hero__ctas .btn { position: absolute; z-index: 3; top: calc(972 * var(--u)); width: calc(341 * var(--u)); padding: 0; }
  .hero__ctas .btn:first-child { left: calc(1016 * var(--u)); }
  .hero__ctas .btn:last-child { left: calc(1384 * var(--u)); }

  /* 2. Преимущества */
  .adv__list { display: block; }
  .adv__item { position: absolute; top: calc(68 * var(--u)); }
  .adv__num { position: absolute; left: 0; top: 0; font-size: calc(50 * var(--uh)); line-height: calc(54 * var(--uh)); }
  .adv__title { position: absolute; margin: 0 !important; left: calc(62 * var(--u)); top: calc(45 * var(--u)); width: calc(283 * var(--u)); font-size: calc(34 * var(--uh)); line-height: calc(46.2 * var(--uh)); }
  .adv__text { position: absolute; margin: 0 !important; left: calc(62 * var(--u)); top: calc(150 * var(--u)); width: calc(301 * var(--u)); font-size: calc(25 * var(--ut)); line-height: calc(34 * var(--ut)); letter-spacing: -.02em; }
  .adv__item:nth-child(3) .adv__text, .adv__item:nth-child(4) .adv__text { line-height: calc(33 * var(--ut)); width: calc(313 * var(--u)); }
  .adv__photos { display: block; }
  .adv__photos img { position: absolute; top: calc(470 * var(--u)); width: calc(var(--w) * var(--u)); height: auto; aspect-ratio: auto; border-radius: calc(8 * var(--u)); }

  /* 3. Решения */
  .sol__grid { display: block; margin: 0 !important; }
  .bump { position: absolute; }
  .bump__cap { width: calc(184 * var(--u)); height: calc(184 * var(--u)); top: calc(-88 * var(--u)); clip-path: inset(0 0 calc(100% - 89 * var(--u)) 0); }
  .bump__body { border-radius: calc(37 * var(--u)); padding: 0; min-height: 0; height: 100%; }
  .bump__icon { top: calc(var(--it, -84) * var(--u)); width: calc(var(--iw, 150) * var(--u)); }
  .bump__glow { width: calc(177 * var(--u)); height: calc(45 * var(--u)); top: calc(34 * var(--u)); filter: blur(calc(25 * var(--u))); }
  .bump__title { position: absolute; left: 0; right: 0; top: calc(82 * var(--u)); font-size: calc(34 * var(--uh)); line-height: calc(36.7 * var(--uh)); }
  .bump__list { position: absolute; margin: 0 !important; left: calc(18 * var(--u)); top: calc(181 * var(--u)); width: calc(380 * var(--u)); padding-left: calc(40 * var(--u)); font-size: calc(25 * var(--ut)); line-height: calc(33 * var(--ut)); }
  .bump__arr { right: calc(30 * var(--u)); bottom: calc(26 * var(--u)); width: calc(38 * var(--u)); height: calc(38 * var(--u)); }

  /* 4. Онлайн/офлайн */
  .duo { display: block; }
  .duo__box { position: absolute; height: calc(107 * var(--u)); min-height: 0; padding: 0; border-radius: calc(20 * var(--u)); display: block; }
  .duo__text { position: absolute; max-width: none; font-size: calc(20 * var(--ut)); line-height: calc(21.6 * var(--ut)); }
  .duo__logo { position: absolute; height: auto; }
  .duo__box--line .duo__logo { height: auto; }
  .duo__arr { right: auto; top: auto; width: calc(38 * var(--u)); height: calc(38 * var(--u)); }

  /* 5. Каталог */
  .tabs { display: block; }
  .tab { position: absolute; top: calc(256 * var(--u)); height: calc(63 * var(--u)); padding: 0; border-radius: calc(50 * var(--u)); font-size: calc(25 * var(--ut)); }
  .tabpanel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  .feat { position: absolute; display: block; margin: 0; padding: 0; left: calc(137 * var(--u)); top: calc(415 * var(--u)); width: calc(1639 * var(--u)); height: calc(558 * var(--u)); border-radius: calc(37 * var(--u)); }
  .feat__media { position: absolute; left: 0; top: 0; width: calc(760 * var(--u)); height: 100%; }
  .feat__img { position: absolute; left: calc(99 * var(--u)); top: calc(-6 * var(--u)); width: calc(522 * var(--u)); max-width: none; height: calc(522 * var(--u)); margin: 0; }
  .feat__cap, .feat__nav { position: absolute; margin: 0; }
  .feat__cap { left: calc(33 * var(--u)); top: calc(406 * var(--u)); bottom: auto; }
  .feat__name { font-size: calc(30 * var(--ut)); line-height: calc(32.4 * var(--ut)); }
  .feat__run { margin-top: calc(3 * var(--u)) !important; font-size: calc(16 * var(--ut)); line-height: calc(17.3 * var(--ut)); }
  .feat__nav { left: calc(33 * var(--u)); top: calc(491 * var(--u)); bottom: auto; gap: calc(8 * var(--u)); }
  .feat__nav .circ { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
  .feat__title { position: absolute; margin: 0 !important; left: calc(835 * var(--u)); top: calc(33 * var(--u)); font-size: calc(44 * var(--uh)); line-height: calc(47.5 * var(--uh)); }
  .feat__desc { position: absolute; margin: 0 !important; left: calc(835 * var(--u)); top: calc(119 * var(--u)); width: calc(720 * var(--u)); font-size: calc(25 * var(--ut)); line-height: calc(33 * var(--ut)); }
  .feat__grid { position: absolute; margin: 0 !important; left: calc(835 * var(--u)); top: calc(236 * var(--u)); width: calc(780 * var(--u)); display: grid; grid-template-columns: calc(366 * var(--u)) 1fr; }
  .feat__grid li { padding: 0; border: 0; height: calc(99 * var(--u)); padding-top: calc(7 * var(--u)); }
  .feat__grid li:nth-child(odd) { border-right: 2px solid rgba(255, 255, 255, .32); }
  .feat__grid li:nth-child(even) { padding-left: calc(50 * var(--u)); }
  .feat__grid li:nth-child(-n+2) { border-bottom: 2px solid rgba(255, 255, 255, .32); }
  .feat__grid b { font-size: calc(25 * var(--ut)); line-height: calc(33 * var(--ut)); }
  .feat__grid span { margin-top: calc(2 * var(--u)); font-size: calc(25 * var(--ut)); line-height: calc(33 * var(--ut)); }
  .feat .btn { position: absolute; margin: 0; left: calc(819 * var(--u)); top: calc(459 * var(--u)); width: calc(773 * var(--u)); }

  .cards { display: block; margin: 0; }
  .pcard { position: absolute; width: calc(417 * var(--u)); height: calc(558 * var(--u)); border-radius: calc(37 * var(--u)); overflow: visible; display: block; }
  .pcard__top { position: absolute; left: 0; top: 0; width: 100%; height: calc(260 * var(--u)); aspect-ratio: auto; border-radius: calc(40 * var(--u)) calc(40 * var(--u)) 0 0; }
  .pcard__img { left: calc(4 * var(--u)); top: calc(-6 * var(--u)); width: calc(408 * var(--u)); height: calc(272 * var(--u)); }
  .pcard__img--contain { padding: calc(14 * var(--u)) calc(60 * var(--u)) 0; }
  .pcard__body { position: absolute; left: calc(43 * var(--u)); top: calc(280 * var(--u)); right: calc(20 * var(--u)); padding: 0; display: block; }
  .pcard__title { font-size: calc(30 * var(--ut)); line-height: calc(39.6 * var(--ut)); }
  .pcard__desc { margin-top: calc(4 * var(--u)) !important; width: calc(353 * var(--u)); font-size: calc(25 * var(--ut)); line-height: calc(33 * var(--ut)); }
  .pcard__run { position: absolute; margin: 0 !important; top: calc(128 * var(--u)); font-size: calc(25 * var(--ut)); line-height: calc(33 * var(--ut)); white-space: nowrap; }
  .pcard .btn { position: absolute; left: calc(28 * var(--u)); top: calc(457 * var(--u)); width: calc(353 * var(--u)); height: calc(78 * var(--u)); min-height: 0; padding: 0 0 0 calc(30 * var(--u)); font-size: calc(30 * var(--ut)); }
  .pcard .btn .arr { right: calc(36 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
  .cat__ctas { display: block; margin: 0 !important; }

  /* 6. Процесс */
  .proc__flask { max-width: none; margin: 0; }
  .steps { display: block; }
  .step { position: absolute; display: block; width: calc(893 * var(--u)); height: calc(144 * var(--u)); padding: 0; border-radius: calc(26 * var(--u)); }
  .step__num { position: absolute; left: calc(34 * var(--u)); top: calc(17 * var(--u)); font-size: calc(53 * var(--uh)); line-height: calc(57.2 * var(--uh)); }
  .step__title { position: absolute; left: calc(108 * var(--u)); top: calc(23 * var(--u)); font-size: calc(25 * var(--ut)); line-height: calc(27 * var(--ut)); white-space: nowrap; }
  .step__text { position: absolute; margin: 0 !important; left: calc(108 * var(--u)); top: calc(59 * var(--u)); width: calc(var(--tw) * var(--u)); font-size: calc(25 * var(--ut)); line-height: calc(33 * var(--ut)); }

  /* 7. Цвет */
  .color__grid { display: block; margin: 0 !important; }
  .bump--sm .bump__cap { width: calc(175 * var(--u)); height: calc(175 * var(--u)); top: calc(-98 * var(--u)); clip-path: inset(0 0 calc(100% - 99 * var(--u)) 0); }
  .bump--sm .bump__body { border-radius: calc(14 * var(--u)); }
  .bump--sm .bump__icon { width: calc(var(--iw, 142) * var(--u)); top: calc(var(--it, -87) * var(--u)); }
  .bump--sm .bump__glow { width: calc(108 * var(--u)); height: calc(28 * var(--u)); top: calc(20 * var(--u)); filter: blur(calc(17 * var(--u))); }
  .bump--sm .bump__title { top: calc(var(--ty, 75) * var(--u)); font-size: calc(30 * var(--ut)); line-height: calc(39.6 * var(--ut)); }
  .bump__text { position: absolute; margin: 0 !important; font-size: calc(25 * var(--ut)); line-height: calc(33 * var(--ut)); }
  .color__fan { position: absolute; max-width: none; margin: 0; aspect-ratio: auto; left: calc(1529 * var(--u)); top: calc(333 * var(--u)); width: calc(616 * var(--u)); height: calc(616 * var(--u)); }

  /* 8. Доверие */
  .clients { display: block; }
  .client { position: absolute; top: calc(269 * var(--u)); width: calc(404 * var(--u)); }
  .client img { width: calc(215 * var(--u)); }
  .client p { margin-top: calc(-12 * var(--u)) !important; font-size: calc(30 * var(--ut)); line-height: calc(39.6 * var(--ut)); }
  .cases { display: block; }
  .case { position: absolute; width: calc(691 * var(--u)); height: calc(433 * var(--u)); border-radius: calc(40 * var(--u)) calc(40 * var(--u)) calc(37 * var(--u)) calc(37 * var(--u)); }
  .case__img { height: calc(255 * var(--u)); aspect-ratio: auto; border-radius: calc(40 * var(--u)) calc(40 * var(--u)) 0 0; }
  .case__body { height: calc(178 * var(--u)); min-height: 0; padding: 0 calc(60 * var(--u)) calc(6 * var(--u)) calc(35 * var(--u)); }
  .case__title { font-size: calc(30 * var(--ut)); line-height: calc(39.6 * var(--ut)); }
  .case__arr { right: calc(29 * var(--u)); bottom: calc(26 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
  .trust__ctas { display: block; }
  .trust__ctas .btn, .cat__ctas .btn { position: absolute; }

  /* 9. Отзывы */
  .rev__viewport { position: absolute; left: calc(267 * var(--u)); top: calc(184 * var(--u)); width: calc(1412 * var(--u)); height: calc(334 * var(--u)); }
  .rev__track { gap: calc(226 * var(--u)); height: 100%; }
  .rcard { flex: 0 0 calc(593 * var(--u)); min-height: 0; height: 100%; border-radius: calc(37 * var(--u)); padding: calc(34 * var(--u)) calc(38 * var(--u)); gap: calc(14 * var(--u)); }
  .rcard__ava { width: calc(64 * var(--u)); height: calc(64 * var(--u)); font-size: calc(26 * var(--ut)); }
  .rcard__head { gap: calc(18 * var(--u)); }
  .rcard__name { font-size: calc(25 * var(--ut)); }
  .rcard__date { font-size: calc(20 * var(--ut)); }
  .rcard__stars { font-size: calc(24 * var(--ut)); }
  .rcard__text { font-size: calc(25 * var(--ut)); line-height: calc(33 * var(--ut)); -webkit-line-clamp: 3; }
  .rcard__ans { font-size: calc(20 * var(--ut)); line-height: calc(27 * var(--ut)); padding-left: calc(14 * var(--u)); -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .rev__nav { display: block; margin: 0 !important; }
  .rev__nav .circ { position: absolute; top: calc(440 * var(--u)); width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
  .rev__nav .circ:first-child { left: calc(98 * var(--u)); }
  .rev__nav .circ:last-child { left: calc(1801 * var(--u)); }
  .rev__stub { position: absolute; left: calc(267 * var(--u)); top: calc(184 * var(--u)); width: calc(1412 * var(--u)); height: calc(334 * var(--u)); border-radius: calc(37 * var(--u)); padding: calc(40 * var(--u)); font-size: calc(25 * var(--ut)); display: flex; align-items: center; justify-content: center; text-align: center; }
  /* «Все отзывы» -> /otzyvy (10.10.2026): на компьютере по центру под карточками (секция выше на 80, --sh:680) */
  .rev__more { display: block; margin: 0 !important; }
  .rev__more .btn { position: absolute; }

  /* 10. Блог */
  .posts { display: block; }
  .post { position: absolute; width: calc(513 * var(--u)); height: calc(524 * var(--u)); border-radius: calc(40 * var(--u)) calc(40 * var(--u)) calc(37 * var(--u)) calc(37 * var(--u)); display: block; }
  .post__img { height: calc(255 * var(--u)); aspect-ratio: auto; border-radius: calc(40 * var(--u)) calc(40 * var(--u)) 0 0; }
  .post__tag { right: auto; left: calc(296 * var(--u)); top: calc(-22 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(25 * var(--u)); width: calc(193 * var(--u)); font-size: calc(25 * var(--ut)); }
  .post__body { position: absolute; left: calc(35 * var(--u)); top: calc(279 * var(--u)); width: calc(478 * var(--u)); padding: 0; }
  .post__title { font-size: calc(30 * var(--ut)); line-height: calc(39.6 * var(--ut)); height: calc(118.8 * var(--u)); display: flex; align-items: center; }
  .post__meta { margin-top: calc(26 * var(--u)) !important; font-size: calc(25 * var(--ut)); line-height: calc(33 * var(--ut)); }
  .post__arr { right: calc(23 * var(--u)); bottom: calc(26 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); }

  /* 11. Дизайнер */
  .help { padding: 0; border-radius: calc(37 * var(--u)); }
  .help__title { position: absolute; left: calc(44 * var(--u)); top: calc(48 * var(--u)); font-size: calc(30 * var(--ut)); line-height: calc(39.6 * var(--ut)); }
  .help__list { position: absolute; margin: 0 !important; left: calc(48 * var(--u)); top: calc(105 * var(--u)); width: calc(560 * var(--u)); padding-left: calc(30 * var(--u)); font-size: calc(25 * var(--ut)); line-height: calc(33 * var(--ut)); }
  .ribbon { position: absolute; left: 0; right: 0; margin: 0 !important; top: calc(521 * var(--u)); height: calc(309 * var(--u)); }
  .ribbon__track { gap: calc(23 * var(--u)); animation-duration: 70s; }
  .ribbon img { width: calc(247 * var(--u)); height: calc(305 * var(--u)); border-radius: calc(12 * var(--u)); }

  /* 12. Шоурум */
  .show__wrap { display: block; }
  .show__title { font-size: calc(70 * var(--uh)); line-height: calc(75.6 * var(--uh)); }
  .addr { position: absolute; padding: calc(42 * var(--u)) calc(42 * var(--u)) 0; border-radius: calc(33 * var(--u)); }
  .addr dt { font-size: calc(30 * var(--ut)); line-height: calc(33 * var(--ut)); }
  .addr dd { margin: calc(2 * var(--u)) 0 calc(26 * var(--u)); font-size: calc(25 * var(--ut)); line-height: calc(31 * var(--ut)); }
  .addr__sphere { right: auto; left: calc(674 * var(--u)); top: calc(-51 * var(--u)); width: calc(126 * var(--u)); }
  .show__photo { border-radius: calc(58 * var(--u)); }

  /* 13. Квиз: высота секции зависит от шага, поэтому здесь поток, а не координаты */
  .s-quiz { height: auto; padding: calc(296 * var(--u)) calc(266 * var(--u)) calc(120 * var(--u)) calc(266 * var(--u)); }
  .quiz__box { position: relative; width: calc(1501 * var(--u)); }
  .quiz__bar { height: calc(10 * var(--u)); border-radius: calc(10 * var(--u)); }
  .quiz__count { margin-top: calc(26 * var(--u)) !important; font-size: calc(20 * var(--ut)); }
  .q-picked { font-size: calc(22 * var(--ut)); margin-top: calc(10 * var(--u)) !important; }
  .q-q { margin-top: calc(8 * var(--u)); font-size: calc(50 * var(--uh)); line-height: calc(54 * var(--uh)); }
  .q-opts, .q-opts--grid { grid-template-columns: repeat(3, calc(459 * var(--u))); gap: calc(39 * var(--u)) calc(34 * var(--u)); margin-top: calc(16 * var(--u)); }
  .q-opt { min-height: 0; height: calc(100 * var(--u)); padding: 0 calc(59 * var(--u)); font-size: calc(25 * var(--ut)); }
  .q-hint { font-size: calc(24 * var(--ut)); margin-top: calc(24 * var(--u)); }
  .q-extra { gap: calc(20 * var(--u)) calc(30 * var(--u)); margin-top: calc(34 * var(--u)); }
  .q-field { font-size: calc(20 * var(--ut)); gap: calc(8 * var(--u)); margin-top: calc(22 * var(--u)); }
  .q-field--inline { margin-top: 0; }
  .q-input { min-height: 0; height: calc(78 * var(--u)); padding: 0 calc(34 * var(--u)); border-radius: calc(40 * var(--u)); font-size: calc(25 * var(--ut)); width: calc(720 * var(--u)); }
  .q-input--num, .q-input--date { width: calc(459 * var(--u)); }
  .q-input--area { height: auto; padding: calc(20 * var(--u)) calc(34 * var(--u)); min-height: calc(150 * var(--u)); }
  .q-check { font-size: calc(22 * var(--ut)); }
  .q-next { height: calc(78 * var(--u)); min-height: 0; padding: 0 calc(50 * var(--u)); font-size: calc(26 * var(--ut)); }
  .q-submit { width: calc(720 * var(--u)); height: calc(78 * var(--u)); min-height: 0; margin-top: calc(30 * var(--u)); font-size: calc(28 * var(--ut)); }
  .q-final { font-size: calc(24 * var(--ut)); width: calc(1100 * var(--u)); }
  .q-counter { font-size: calc(18 * var(--ut)); }
  .q-error { font-size: calc(22 * var(--ut)); }
  .q-back { font-size: calc(22 * var(--ut)); }
  .q-thanks__title { font-size: calc(50 * var(--uh)); }
  .q-thanks__text { font-size: calc(25 * var(--ut)); }
  .wa-block .btn { width: calc(var(--w) * var(--u)); }
  .wa-block { position: relative; display: block; height: calc(400 * var(--u)); margin: calc(70 * var(--u)) calc(-266 * var(--u)) 0 !important; }
}

/* ---------- Телефон: чуть мельче шрифт и кнопки ----------
   04.10.2026, слово Антона: «отточи вид с телефона, весь сайт чуть уменьшить по
   шрифту». Только до 600px - планшет и десктоп (масштаб --k) не трогаем. */
@media (max-width: 599.98px) {
  .s { padding-left: 18px; padding-right: 18px; }
  .h2, .hero__title { font-size: 30px; line-height: 1.06; }
  .lead { font-size: 15px; line-height: 1.38; }
  .kicker, .hero__kicker { font-size: 13px; }
  .btn { min-height: 50px; font-size: 14px; padding: 10px 56px 10px 24px; }
  .adv__title { font-size: 18px; }
  .adv__text, .bump__text, .help__list, .addr dd, .rcard__text { font-size: 14px; }
  .bump__title { font-size: 19px; }
  .bump__list { font-size: 15px; }
  .feat__title { font-size: 24px; }
  .case__title { font-size: 14px; }
  .post__title { font-size: 15px; }
  .q-q { font-size: 24px; }
  .q-opt { min-height: 50px; font-size: 14px; }
  .q-submit { min-height: 52px; }
}

/* шире 1920 страница не растёт - центрируем «лист» макета */
@media (min-width: 1921px) {
  .home main { max-width: 1920px; margin: 0 auto; }
}