/* Секции: по одному блоку на секцию, в порядке карты из docs/design-system.md. Блок начинается с комментария «NN id».
   Мобильные правила – в конце блока секции: @media (max-width: 768px) и (max-width: 500px). */

/* 00 header – шапка (не секция карты): логотип слева, плашки меню по центру экрана, язык справа (как у aardvark).
   Закреплена на экране при скролле (решение Насти); фона нет – плашки белые и читаются на любом листе */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); pointer-events: none; }
.site-header__in > * { pointer-events: auto; }
.site-header__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-24); padding-top: var(--space-20); }
.site-header__logo { justify-self: start; }
.site-header__logo img { width: var(--logo-w); height: auto; }
.site-header__nav { display: flex; align-items: center; gap: var(--space-6); }
/* Переключатель языка – такая же плашка; активный язык основным цветом, второй приглушён */
.lang { justify-self: end; gap: var(--space-6); color: var(--color-lang-sep); }
.lang button { color: var(--color-lang-off); transition: color var(--dur-250) var(--ease-out); }
.lang button:hover, .lang button[aria-pressed="true"] { color: var(--color-fg); }
/* ≤ 960 – решение концепта: с 961 px меню и карточки первого экрана помещаются по бокам, уже – нет */
@media (max-width: 960px) {
  .site-header__in { grid-template-columns: 1fr auto; }
  .site-header__nav { display: none; }
  .site-header__logo img { width: var(--logo-w-mobile); }
}

/* 01 hero – светлое поле с размытыми пятнами цветов карточек; текст по центру; по бокам карточки интерфейса,
   у каждой свой друг (аватар, курсор с именем) и стикер места. position: absolute – только у декора: карточки, аватары, курсоры, стикеры, пятна */
.hero {
  z-index: var(--z-hero);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 0;
  overflow-x: clip;
}
/* Размытые пятна – псевдоэлемент, только на первом экране */
.hero::before {
  content: '';
  position: absolute;
  inset: -10% -5% 0;
  pointer-events: none;
  background: var(--hero-glow);
}
.hero__field { position: absolute; inset: 0; }
.hero__in { position: relative; z-index: var(--z-section); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-32); padding-top: var(--space-96); padding-bottom: var(--space-72); }
.hero__line { display: block; }
.hero__sub { max-width: var(--text-sub); color: var(--color-fg-muted); text-wrap: balance; }

/* Карточки по бокам: место, ширина, цвет друга, наклон и ритм покачивания у каждой свой */
/* --land-w ставит initFlight: ширина двойника на доске шага 1, чтобы посадка совпадала до пикселя */
.hero__card { position: absolute; width: var(--land-w, var(--hero-card-w)); }
.hero__card--flight { left: 6%; top: 21%; --friend: var(--color-friend-dana); --cd: 6.5s; }
.hero__card--flight .ui-card { --rot: -5deg; --dur: 7.5s; }
.hero__card--nusa { left: 9%; top: 50%; --friend: var(--color-friend-leo); --cd: 8s; --cdl: -3s; }
.hero__card--nusa .ui-card { --rot: 3deg; --dur: 8.5s; --del: -2s; --dx: var(--drift-x-back); }
.hero__card--river { left: 78%; top: 17%; --friend: var(--color-friend-tess); --cd: 7.5s; --cdl: -5s; }
.hero__card--river .ui-card { --rot: 5deg; --dur: 8s; --del: -1s; --dx: var(--drift-x-back); }
.hero__card--villa { left: 76%; top: 60%; --friend: var(--color-friend-maya); --cd: 9s; --cdl: -1.5s; }
.hero__card--villa .ui-card { --rot: -4deg; --dur: 7s; --del: -3s; }
/* Стикеры мест – на правом верхнем углу карточки */
.sticker--palm { --sy: var(--sticker-palm-y); --sx: var(--sticker-palm-x); --tr: 10deg; }
.sticker--eiffel { --sy: var(--sticker-eiffel-y); --sx: var(--sticker-eiffel-x); --tr: 8deg; height: var(--sticker-h-l); }
.sticker--pisa { --sy: var(--sticker-pisa-y); --sx: var(--sticker-pisa-x); --tr: 6deg; }
/* На больших экранах карточки крупнее и растут с экраном: 243 px на 1440 и шире, ≈ 203 на 1200 (решение Насти) */
@media (min-width: 1200px) {
  .hero__card { width: var(--land-w, var(--hero-card-w-l)); }
}
/* ≤ 960: поле с карточками встаёт над заголовком в потоке, чтобы не наезжать на текст; карточек три */
@media (max-width: 960px) {
  .hero { min-height: 0; justify-content: flex-start; }
  /* на телефоне сначала заголовок, оффер и кнопка, карточки – под ними (правило Насти) */
  .hero__field { order: 2; position: relative; inset: auto; height: var(--hero-field-h-mobile); margin-bottom: var(--space-48); }
  .hero__in { order: 1; padding-top: var(--hero-field-top-mobile); padding-bottom: var(--space-24); gap: var(--space-24); }
  .hero__card--flight { left: 6%; top: 10%; width: 42%; }
  .hero__card--river { left: 54%; top: 6%; width: 40%; }
  .hero__card--villa { left: 8%; top: 60%; width: 40%; }
  .hero__card--nusa { display: none; }
  .sticker--palm { --sy: var(--sticker-palm-y-mobile); --sx: var(--sticker-palm-x-mobile); }
  .sticker--eiffel { --sy: var(--sticker-eiffel-y-mobile); --sx: var(--sticker-eiffel-x-mobile); height: var(--sticker-h-l-mobile); }
  .sticker--pisa { --sy: var(--sticker-pisa-y-mobile); --sx: var(--sticker-pisa-x-mobile); }
}

/* 02 how – розовый лист с волной, пин (≈ 4,5 экрана): пять карточек шагов наезжают снизу целиком, у каждой свой экран Travoll
   и своё действие на нём (docs/motion.md → «Пин how»). Экраны нарисованы в 760 px и уменьшаются zoom (js/main.js, fitScreens).
   Без движения (?static, reduced-motion) карточки стоят столбиком. absolute – у карточек в стопке, экранов и декора интерфейса */
.how { padding-block: 0; }
.how__pin { height: 100svh; display: flex; flex-direction: column; padding: var(--sheet-inset); }
.how__sheet { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: var(--how-pad); border-radius: var(--radius-xl); background: var(--color-bg-sheet); overflow: clip; }
.how__in { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-56); }
/* Заголовки секций на листах – по центру (решение Насти) */
.how__title { text-align: center; }
.how__stage { position: relative; flex: 1; min-height: 0; }
.how__cards { position: absolute; inset: 0; }
/* Карточка шага: каждая следующая ниже на --step-stack – видны «корешки» предыдущих */
.step { position: absolute; inset: calc(var(--i) * var(--step-stack)) 0 0 0; z-index: var(--i); display: flex; flex-direction: column; gap: var(--space-20); padding: var(--step-pad); border-radius: var(--radius-l); background: var(--bg); box-shadow: var(--shadow-step); overflow: hidden; }
.step--1 { --i: 0; --bg: var(--color-step-1); }
.step--2 { --i: 1; --bg: var(--color-step-2); }
.step--3 { --i: 2; --bg: var(--color-step-3); }
.step--4 { --i: 3; --bg: var(--color-step-4); }
.step--5 { --i: 4; --bg: var(--color-step-5); }
/* Шаги 2–4 – белый текст (решения Насти): шаг 2 #FF5C2A – 3,1:1, только крупный текст; шаг 3 – 5,2:1; шаг 4 – 4,7:1 */
.step--light > .step__num, .step--light > .step__txt > * { color: var(--color-fg-on-accent); }
.step__num { font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.step__txt { max-width: var(--step-txt-w); display: flex; flex-direction: column; gap: var(--space-16); }
/* Экран шага – окно Travoll справа */
.vis { position: absolute; top: var(--vis-y); right: var(--vis-x); bottom: var(--vis-y); width: var(--vis-w); }
.vis__in { width: var(--vis-ui-w); height: 100%; }

/* 1 – доска вперемешку: места карточек в долях доски, наклон у карточки; slot – место, куда приземляется карточка первого экрана */
.drop { position: absolute; }
.drop > .ui-card { rotate: var(--r, 0deg); }
.drop--flight { left: 4%; top: 7%; width: 30%; --r: -6deg; }
.drop--nusa { left: 36%; top: 15%; width: 28%; --r: 3deg; }
.drop--river { left: 68%; top: 6%; width: 28%; --r: -4deg; }
.drop--villa { left: 65%; top: 66%; width: 30%; --r: 5deg; }
.drop--tiktok { left: 5%; top: 52%; width: 30%; --r: 7deg; }
.drop--insta { left: 33%; top: 73%; width: 30%; --r: -3deg; }
.slot { --dash: 0; border-radius: var(--radius-m); outline: var(--dash-w) dashed color-mix(in srgb, var(--color-fg) calc(var(--dash) * 100%), transparent); outline-offset: -1px; }

/* 2 – друзья: приглашение, присоединившиеся, курсоры, реакции, голосовой чат */
.invite { position: absolute; left: 50%; top: 46%; translate: -50% -50%; width: var(--invite-w); display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-20); border-radius: var(--radius-invite); background: var(--color-bg-elevated); box-shadow: var(--shadow-lift); }
.invite__head { display: flex; flex-direction: column; gap: var(--space-4); }
.invite__head .body-s, .who__state { color: var(--color-fg-muted); }
.invite__link { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-6) var(--space-6) var(--space-6) var(--space-12); border-radius: var(--radius-pill); background: var(--color-field); }
.invite__link > .body-s:first-child { flex: 1; color: var(--color-fg-muted); }
.who { display: flex; flex-direction: column; gap: var(--space-8); }
.who__row { display: flex; align-items: center; gap: var(--space-8); }
.who__row > img { width: var(--avatar-s); height: var(--avatar-s); flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 var(--avatar-ring-s) var(--friend); }
.who__name { flex: 1; }
.who__state.is-live { color: var(--color-live); }
.how__cur--dana { left: 9%; top: 16%; }
.how__cur--leo { left: 80%; top: 26%; }
.how__cur--tess { left: 14%; top: 70%; }
.react { position: absolute; z-index: var(--z-section); height: var(--ui-react-h); padding-inline: var(--space-12); display: flex; align-items: center; border-radius: var(--radius-pill); background: var(--color-bg-elevated); box-shadow: var(--shadow-react); }
.react--1 { left: 76%; top: 56%; }
.react--2 { left: 8%; top: 40%; }
.react--3 { left: 84%; top: 8%; }
.voice { position: absolute; left: 50%; bottom: var(--space-20); translate: -50% 0; display: flex; align-items: center; gap: var(--space-8); height: var(--ui-voice-h); padding: 0 var(--space-8) 0 var(--space-12); border-radius: var(--radius-pill); background: var(--color-bg-elevated); border: 1px solid var(--color-line); box-shadow: var(--shadow-card); }
.mic { width: var(--ui-mic); height: var(--ui-mic); color: var(--color-decor); }
.voice .avs > img { width: var(--avatar-xs); height: var(--avatar-xs); border-width: var(--avatar-ring-s); margin-left: calc(var(--space-6) * -1); }
.voice .avs > img:first-child { margin-left: 0; }

/* 3 – по дням */
.how__lanes { position: absolute; inset: var(--space-16); }

/* 4 – карта маршрута: рисунок острова – svg, цвета – классами */
.map { position: absolute; inset: 0; background: var(--color-map-water); }
.map__art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.map__ripple path { fill: none; stroke: var(--color-map-wave); stroke-width: 2; }
.map__land { fill: var(--color-map-land); stroke: var(--color-bg-elevated); stroke-width: 5; }
.map__green { fill: var(--color-map-green); }
.map__road { fill: none; stroke: var(--color-map-road); stroke-width: 10; stroke-linecap: round; }
.map__road--in, .map__road--route { stroke: var(--color-bg-elevated); }
.map__road--in { stroke-width: 6; }
.map__route { fill: none; stroke: var(--color-decor); stroke-width: 5; stroke-linecap: round; }
.map__boat { fill: none; stroke: var(--color-decor); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 10; }
.map__lab { fill: var(--color-fg); stroke: var(--color-bg-elevated); stroke-width: 4; paint-order: stroke; }
.map__pin path { fill: var(--color-action); stroke: var(--color-bg-elevated); }
.map__pin text { fill: var(--color-fg-on-accent); font-weight: var(--fw-title); }
.route { position: absolute; left: var(--space-16); top: var(--space-16); bottom: var(--space-16); width: var(--route-w); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-16); border-radius: var(--radius-panel); background: var(--color-bg-elevated); box-shadow: var(--shadow-lift); }
.route__title { margin-bottom: var(--space-8); }
.route__stop { display: flex; align-items: center; gap: var(--space-8); }
.route__stop > b { width: var(--ui-icon-s); height: var(--ui-icon-s); flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--color-action); color: var(--color-fg-on-accent); font-weight: var(--fw-title); }
.route__stop > div { display: flex; flex-direction: column; gap: var(--space-2); }
.route__stop > div .body-s, .route__leg { color: var(--color-fg-muted); }
.route__leg { margin-left: var(--space-12); padding: var(--space-6) 0 var(--space-6) var(--space-20); border-left: var(--leg-w) dashed var(--color-decor-soft); }
.map__sync { position: absolute; right: var(--space-16); top: var(--space-16); display: flex; align-items: center; gap: var(--space-8); height: var(--ui-react-h); padding-inline: var(--space-12); border-radius: var(--radius-pill); background: var(--color-bg-elevated); box-shadow: var(--shadow-card); }
.map__sync::before { content: ''; width: var(--ui-dot); height: var(--ui-dot); border-radius: 50%; background: var(--color-live-dot); }

/* 5 – AI-помощник: чат. Сообщения пользователя – белый текст на акценте #E0007A (4,7:1, правило Насти) */
.ai__icon { width: var(--ui-icon); height: var(--ui-icon); flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--color-decor); color: var(--color-fg-on-accent); }
.ai__icon svg { width: var(--ui-glyph); height: var(--ui-glyph); }
.ai__title { display: flex; flex-direction: column; gap: var(--space-2); }
.ai__title .body-s, .msg .body-s, .sug > .body-s:not(.sug__add) { color: var(--color-fg-muted); }
.chat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-8); padding: var(--space-12) var(--space-20) var(--space-72); background: var(--color-board); }
.msg__voice { display: flex; align-items: center; gap: var(--space-8); }
.msg__voice .wave { color: var(--color-fg); }
.msg__play { width: var(--ui-icon-s); height: var(--ui-icon-s); display: grid; place-items: center; border-radius: 50%; background: var(--color-decor); color: var(--color-fg-on-accent); }
.msg--me .msg__play { background: var(--color-bg-elevated); color: var(--color-accent); }
.msg__play svg { width: var(--ui-glyph-s); height: var(--ui-glyph-s); }
.sugs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.sug { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8); border-radius: var(--radius-thumb); border: 1px solid var(--color-line); }
.sug__pic { height: var(--ui-icon-s); display: grid; place-items: center; border-radius: var(--radius-s); background: var(--friend); }
.sug__add { height: var(--ui-icon-s); display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--color-field); font-weight: var(--fw-semibold); }
.ai-chip { align-self: flex-start; display: flex; align-items: center; gap: var(--space-8); padding: var(--space-6) var(--space-12); border-radius: var(--radius-pill); box-shadow: 0 0 0 var(--avatar-ring-s) var(--color-decor); font-weight: var(--fw-semibold); }
.ai-chip::before { content: ''; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--color-decor); }
.ask { position: absolute; left: var(--space-20); right: var(--space-20); bottom: var(--space-16); display: flex; align-items: center; gap: var(--space-8); height: var(--ui-ask-h); padding: 0 var(--space-6) 0 var(--space-16); border-radius: var(--radius-pill); background: var(--color-bg-elevated); box-shadow: var(--shadow-card); }
.ask > .body-s { flex: 1; color: var(--color-placeholder); }
.ask__mic { width: var(--ui-icon-l); height: var(--ui-icon-l); display: grid; place-items: center; border-radius: 50%; background: var(--color-decor); }
.ask__mic .mic { color: var(--color-fg-on-accent); }

/* Перелёт карточек первого экрана на доску шага 1: в полёте покачивание и маршрут курсора снимаются, иначе посадка со сдвигом */
.hero__field.is-flying .ui-card--drift, .hero__field.is-flying .cursor { animation: none; }

/* Без движения: пина нет, карточки шагов столбиком */
html:not(.has-motion) .how__pin { height: auto; }
html:not(.has-motion) .how__sheet { padding: var(--how-pad-still); }
html:not(.has-motion) .how__cards { position: static; display: flex; flex-direction: column; gap: var(--space-16); }
html:not(.has-motion) .step { position: relative; inset: auto; height: var(--step-h-still); }

@media (max-width: 768px) {
  .how__sheet { padding: var(--how-pad-mobile); border-radius: var(--radius-l-mobile); }
  .how__in { gap: var(--space-32); padding-inline: var(--space-12); }
  /* окно – первым в потоке карточки, текст под ним: зазор окно – номер шага одинаковый на всех шагах (правка Насти) */
  .step { padding: var(--step-pad-mobile); border-radius: var(--radius-l-mobile); justify-content: flex-start; gap: var(--space-12); }
  .step__txt { max-width: none; gap: var(--space-12); }
  .vis { order: -1; position: relative; inset: auto; width: auto; height: var(--vis-h-mobile); flex: none; margin: calc(var(--space-8) * -1) calc(var(--space-6) * -1) var(--space-8); }
  html:not(.has-motion) .step { height: var(--step-h-still-mobile); }
}

/* 03 devices – голубой липкий лист (как коробка aardvark, решение Насти) с нарисованной волной. Заголовок – как заголовки шагов how.
   Два плоских устройства в белой рамке: экран (доска Travoll) и вертикальный телефон (план дня) поверх его правого нижнего угла.
   Пока лист стоит, устройства из чуть уменьшенных вырастают до своего размера, по бокам появляются тексты, в конце – кнопки сторов.
   Прогресс --p (0…1) даёт приём track (docs/motion.md); по умолчанию --p: 1 – конечный кадр для ?static и reduced-motion.
   absolute – только у телефона поверх экрана (декор) */
.devices {
  --p: 1;
  /* Раскадровка: z – рост устройств, t – тексты по бокам, s – кнопки сторов */
  --z: min(1, calc(var(--p) / 0.6));
  --t: clamp(0, calc((var(--p) - 0.5) / 0.2), 1);
  --s: clamp(0, calc((var(--p) - 0.72) / 0.18), 1);
  padding-block: var(--sheet-inset);
}
.has-motion .devices { height: var(--devices-track); }
.devices__sheet { padding-block: var(--sheet-top) var(--step-pad); background: var(--color-bg-sheet-blue); }
/* Сетка листа: заголовок по центру сверху; середина – текст | устройства | текст (поля – по колонке текста карточек how); снизу – сторы */
.devices__stage { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: var(--side-text-w) minmax(0, 1fr) var(--side-text-w); grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: var(--space-24); padding-inline: calc(var(--page-margin) + var(--step-pad)); }
/* Заголовок – как «Как это работает»: display-xl по центру листа */
.devices__title { grid-column: 1 / -1; grid-row: 1; position: relative; margin-inline: calc(var(--step-pad) * -1); text-align: center; }
.devices__text { position: relative; z-index: var(--z-content); grid-row: 2; opacity: var(--t); translate: 0 calc((1 - var(--t)) * var(--reveal-y)); }
.devices__text b { font-weight: var(--fw-semibold); }
.devices__text--laptop { grid-column: 1; align-self: start; margin-top: var(--side-text-y); }
.devices__text--phone { grid-column: 3; align-self: end; margin-bottom: var(--side-text-y); }
/* Стрелки Насти – небольшой декор у текста, в сторону устройства, до устройства не доходят: про ноутбук – вниз-вправо, про телефон – повёрнута на 180°, вверх-влево.
   Линия рисунка тонкая – обводка в 1 px её утолщает при уменьшении */
.devices__arrow { position: absolute; width: var(--arrow-w); height: auto; color: var(--color-fg); pointer-events: none; }
.devices__arrow path { stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.devices__arrow--laptop { left: 40%; top: calc(100% + var(--space-12)); }
.devices__arrow--phone { right: 40%; bottom: calc(100% + var(--space-12)); rotate: 180deg; }
.devices__scene { grid-column: 1 / -1; grid-row: 2; display: grid; place-items: center; }
.devices__stores { grid-column: 1 / -1; grid-row: 3; justify-self: center; position: relative; opacity: var(--s); translate: 0 calc((1 - var(--s)) * var(--reveal-y)); }

/* Устройства: экран и телефон растут вместе от --dev-scale-from до 1 */
.devices__group { position: relative; width: var(--screen-w); margin: 0 var(--phone-x-out) var(--phone-y-out) 0; scale: calc(var(--dev-scale-from) + (1 - var(--dev-scale-from)) * var(--z)); }
.screen { padding: var(--device-frame); border-radius: var(--screen-radius); background: var(--color-bg-elevated); box-shadow: var(--shadow-device); }
.screen__in { height: calc(var(--screen-ui-h) * var(--screen-k)); overflow: hidden; border-radius: var(--screen-inner-radius); background: var(--color-bg-elevated); }

/* Экран ноутбука – доска Travoll, свёрстана в натуральную величину 816 × 510 и уменьшена до экрана */
.app { width: var(--screen-ui-w); height: var(--screen-ui-h); display: flex; flex-direction: column; transform-origin: 0 0; scale: var(--screen-k); }
.app__lanes { flex: 1; min-height: 0; padding: var(--space-16); }
.app .cursor { --friend: var(--color-friend-tess); }

/* Телефон – вертикальный, в белой рамке, поверх правого нижнего угла экрана */
.phone { position: absolute; right: calc(var(--phone-x-out) * -1); bottom: calc(var(--phone-y-out) * -1); width: var(--phone-w); padding: var(--phone-frame); border-radius: var(--phone-radius); background: var(--color-bg-elevated); box-shadow: var(--shadow-device); }
.phone__screen { height: calc(var(--phone-ui-h) * var(--phone-k)); overflow: hidden; border-radius: var(--phone-inner-radius); background: var(--color-bg-page); }
/* Экран телефона – план дня, свёрстан 245 × 515 и уменьшен */
.mob { width: var(--phone-ui-w); height: var(--phone-ui-h); display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-32) var(--space-12) var(--space-12); transform-origin: 0 0; scale: var(--phone-k); background: var(--color-lane-1); }
.mob__head { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }

@media (max-width: 768px) {
  /* как у карточек how на телефоне: поле листа 8 + 12 + поле карточки 20; тексты и сторы – столбиком под устройствами */
  .devices__sheet { padding-block: var(--sheet-top) var(--space-24); border-radius: var(--radius-l-mobile); }
  .devices__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(5, auto); align-content: center; row-gap: var(--space-24); padding-inline: calc(var(--space-12) + var(--step-pad-x-mobile)); }
  .devices__title, .devices__scene, .devices__stores { grid-column: 1; }
  .devices__text { grid-column: 1; margin: 0; }
  .devices__title { margin-inline: calc(var(--step-pad-x-mobile) * -1); }
  .devices__arrow { display: none; }
  /* устройства крупнее: сцена выходит в поля листа */
  .devices__scene { margin-inline: calc((var(--space-12) + var(--step-pad-x-mobile)) * -1); }
  .devices__text--laptop { grid-row: 3; }
  .devices__text--phone { grid-row: 4; }
  .devices__stores { grid-row: 5; justify-self: stretch; grid-template-columns: minmax(0, 1fr); }
}

/* 04 community – белая секция (после голубого листа – чередование поверхностей): клуб, а не SaaS. Заголовок по центру; лента находок
   из рилсов как карточки доски – источник, кто из друзей добавил, «+ на доску», на первой – курсор Тесс; ниже типы поездок –
   мини-доски, число колонок = число дней. Появление: lines, fade, stagger лент (docs/motion.md). absolute – у декора на фото */
/* курсоры друзей бродят у краёв – по ширине секция обрезана, страница вбок не едет */
.community { overflow-x: clip; }
.community__in { display: flex; flex-direction: column; gap: var(--space-72); }
.community__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center; }
/* Курсоры друзей вокруг заголовка: при входе разлетаются из центра и бродят каждый по-своему (initCrowd, docs/motion.md);
   без движения – стоят по местам --cx / --cy */
.community__crowd { position: absolute; inset: calc(var(--space-48) * -1) 0; pointer-events: none; }
.community__cur { left: var(--cx); top: var(--cy); z-index: var(--z-hero); }
.community__cur--tess { --cx: 6%; --cy: 10%; }
.community__cur--dana { --cx: 86%; --cy: 4%; }
.community__cur--leo { --cx: 10%; --cy: 78%; }
.community__cur--maya { --cx: 84%; --cy: 74%; }
.has-motion .community__cur { left: 50%; top: 45%; }
.community__cur.is-carried { display: none; }
.community__sub { max-width: var(--text-sub); color: var(--color-fg-muted); }
.community__reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); width: 100%; max-width: var(--reels-w); margin-inline: auto; }
/* Находка: фото во всю карточку, тень доски, лёгкий наклон как у карточек на доске; hover lift */
.reel { position: relative; aspect-ratio: var(--reel-ratio); border-radius: var(--radius-window); overflow: hidden; box-shadow: var(--shadow-card); rotate: var(--rot, 0deg); transition: translate var(--dur-350) var(--ease-out), box-shadow var(--dur-350) var(--ease-out); }
.reel:hover { translate: 0 var(--lift-y); box-shadow: var(--shadow-lift); }
.reel--1 { --rot: -2deg; }
.reel--2 { --rot: 1.5deg; }
.reel--3 { --rot: -1deg; }
.reel--4 { --rot: 2deg; }
.reel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel::after { content: ''; position: absolute; inset: 0; background: var(--reel-shade); pointer-events: none; }
.reel__src { position: absolute; z-index: var(--z-content); left: var(--reel-pad); top: var(--reel-pad); display: inline-flex; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-12); border-radius: var(--radius-pill); background: var(--color-glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }
.reel__play { width: var(--ui-glyph-s); height: var(--ui-glyph-s); }
.reel__body { position: absolute; z-index: var(--z-content); left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); padding: var(--reel-pad); color: var(--color-fg-on-accent); }
.reel__who { display: inline-flex; align-items: center; gap: var(--space-6); }
.reel__who img { width: var(--avatar-xs); height: var(--avatar-xs); border-radius: 50%; border: var(--avatar-ring-s) solid var(--friend); object-fit: cover; }
.reel__add { margin-top: var(--space-4); padding: var(--space-6) var(--space-12); border-radius: var(--radius-pill); background: var(--color-bg-elevated); color: var(--color-fg); font-weight: var(--fw-semibold); transition: background-color var(--dur-250) var(--ease-out); }
/* Кнопка меняется на «✓ на доске», когда друг унёс находку на доску (initCommunity) */
.reel__add-on { display: none; }
.reel.is-added .reel__add { background: var(--color-done); }
.reel.is-added .reel__add-off { display: none; }
.reel.is-added .reel__add-on { display: inline; }
.reel .cursor { z-index: var(--z-hero); right: 22%; top: 42%; bottom: auto; }
/* Друг «взял» находку – его курсор уезжает вместе с копией (initCommunity), на карточке его больше нет */
.reel.is-added .cursor { visibility: hidden; }

/* Типы поездок: мини-доска – колонки дней полосами (--d – число дней), цвет листа поездки */
.community__trips { display: flex; flex-direction: column; gap: var(--space-24); width: 100%; max-width: var(--reels-w); margin-inline: auto; }
.community__trip-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gutter); }
.trip { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: var(--space-16); border-radius: var(--radius-panel); background: var(--trip-bg); }
/* Блоки находок на мини-доске «Поездка мечты»: появляются, когда прилетают (initCommunity); без движения их нет */
.trip__drops { position: absolute; left: var(--space-16); right: var(--space-16); top: var(--space-16); height: var(--trip-board-h); display: flex; align-items: center; gap: var(--space-8); padding-left: var(--space-8); }
.trip__drop { width: var(--drop-w); height: var(--drop-h); border-radius: var(--radius-s); border: var(--avatar-ring-s) solid var(--color-bg-elevated); object-fit: cover; box-shadow: var(--shadow-label); visibility: hidden; }
.trip__drop.is-landed { visibility: visible; }
/* Летящая находка: копия, которую создаёт initCommunity, – fixed, размер и место считаются на каждом кадре; курсор друга несёт её */
.flyer { position: fixed; z-index: var(--z-header); overflow: visible; pointer-events: none; }
.flyer > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--flyer-r); box-shadow: var(--shadow-lift); }
.flyer > .cursor { right: auto; bottom: auto; left: 70%; top: 60%; animation: none; }
.trip::before { content: ''; align-self: stretch; height: var(--trip-board-h); border-radius: var(--radius-s);
  background: repeating-linear-gradient(90deg, var(--color-day) 0 calc(100% / var(--d) - var(--trip-day-gap)), transparent 0 calc(100% / var(--d))); }
.trip__days { padding: var(--space-4) var(--space-8); border-radius: var(--radius-pill); background: var(--color-bg-elevated); font-weight: var(--fw-semibold); }
.trip--1 { --d: 2; --trip-bg: var(--color-lane-1); }
.trip--2 { --d: 5; --trip-bg: var(--color-lane-2); }
.trip--3 { --d: 3; --trip-bg: var(--color-lane-3); }
.trip--4 { --d: 4; --trip-bg: var(--color-step-1); }
.trip--5 { --d: 7; --trip-bg: var(--color-bg-sheet-blue); }
.trip--6 { --d: 24; --trip-bg: var(--color-lane-4); }

/* ≤ 960 – как у шапки и первого экрана: шесть мини-досок в ряд уже не помещаются */
@media (max-width: 960px) {
  .community__trip-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .community__in { gap: var(--space-48); }
  /* Лента находок листается вбок: выходит в поля страницы, отступ – внутри ленты */
  .community__reels { display: flex; width: auto; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--page-margin-mobile) * -1); padding: var(--space-12) var(--page-margin-mobile); scrollbar-width: none; }
  .community__reels::-webkit-scrollbar { display: none; }
  .reel, .reel:hover { flex: 0 0 var(--reel-w-mobile); scroll-snap-align: center; box-shadow: none; }
  /* на телефоне мини-доски – только дни и название: колонки без перелётов непонятны (правка Насти, компьютер не трогаем) */
  .trip::before, .trip__drops { display: none; }
  .community__trip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter-mobile); }
}

/* 05 reviews – жёлтый липкий лист с волной (решение Насти), заголовок по центру. Отзывы – фотокарточки в рамке-марке: пока лист стоит,
   лента карточек едет справа налево от вертикального скролла (приём track, --p) и уходит под края листа, а не за край страницы.
   Без движения (?static, reduced-motion) лента листается вбок сама. Геометрия ленты – из токенов: ширина и промежуток карточек */
/* --flip-at – где марка переворачивается (доля ширины листа), --row-end – где встаёт центр последней марки в конце */
.reviews { --p: 1; --flip-at: 0.6; --row-end: 0.4; padding-block: var(--sheet-inset); }
.has-motion .reviews { height: var(--reviews-track); }
.reviews__sheet { padding-top: var(--sheet-top); background: var(--color-bg-sheet-yellow); }
.reviews__head { position: relative; text-align: center; }
.reviews__viewport { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; }
/* Лента: старт – первая карточка в правой половине листа; финиш – последняя у правого края с полем */
.reviews__row {
  --view: var(--sheet-w);
  --row: calc(var(--review-w) * 6 + var(--review-gap) * 5);
  /* старт – первая марка правее точки переворота: в начале все лицевой стороной */
  --from: calc(var(--view) * var(--flip-at));
  /* финиш – последняя марка левее точки переворота (--flip-at), чтобы перевернулись все */
  --to: calc(var(--view) * var(--row-end) + var(--review-w) / 2 - var(--row));
  display: flex; gap: var(--review-gap); flex: none;
  translate: calc(var(--from) + (var(--to) - var(--from)) * var(--p)) 0;
}
/* Марка переворачивается в 3D, проезжая середину листа: спереди – фото и отзыв, на обороте – открытка с припиской от руки и штемпелем.
   --flip (0…1) ставит initReviews() в motion.js по положению карточки; без движения --flip нет – видна лицевая сторона */
.review { flex: none; width: var(--review-w); perspective: var(--review-persp); rotate: var(--rot, 0deg); translate: 0 var(--dy, 0); }
.review__flip { display: grid; transform-style: preserve-3d; rotate: y calc(var(--flip, 0) * 180deg); }
.review__face { grid-area: 1 / 1; display: grid; backface-visibility: hidden; filter: var(--drop-sticker); }
.review__face--back { rotate: y 180deg; }
/* Оборот: открытка – строки для письма, «Кому», штемпель города, приписка от руки */
.postcard { justify-content: space-between; background-image: var(--postcard-lines); }
.postcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-12); }
.postcard__top > .body-s { color: var(--color-fg-muted); }
.postcard__note { flex: 1; padding: var(--space-16) var(--space-8) 0; }
.postcard__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-12); }
.postcard__sticker { width: auto; height: var(--sticker-h); rotate: -8deg; filter: var(--drop-sticker); }
.postcard__from { padding: 0 var(--space-8) var(--space-8); }
.postmark { flex: none; width: var(--postmark-w); color: var(--color-accent); rotate: -12deg; }
.postmark circle, .postmark__waves { fill: none; stroke: currentColor; stroke-width: 2; }
.postmark text { fill: currentColor; }
.review--1 { --rot: -2deg; --dy: calc(var(--space-24) * -1); }
.review--2 { --rot: 1.5deg; --dy: var(--space-24); }
.review--3 { --rot: -1deg; --dy: calc(var(--space-12) * -1); }
.review--4 { --rot: 2.5deg; --dy: var(--space-20); }
.review--5 { --rot: -2.5deg; --dy: calc(var(--space-20) * -1); }
.review--6 { --rot: 1deg; --dy: var(--space-12); }
/* Без движения – обычная горизонтальная прокрутка ленты */
html:not(.has-motion) .reviews__viewport { overflow-x: auto; scrollbar-width: none; }
html:not(.has-motion) .reviews__row { translate: none; padding-inline: var(--page-margin); }

@media (max-width: 768px) {
  .reviews { --flip-at: 0.75; --row-end: 0.2; }
  .reviews__sheet { border-radius: var(--radius-l-mobile); }
  .postcard__sticker { height: var(--sticker-h-mobile); }
  .postmark { width: var(--postmark-w-mobile); }
}

/* 06 faq – белая секция (после жёлтого листа): «Вопрос-ответ» как групповой чат. Друзья спрашивают (справа, акцентные плашки), Travoll
   отвечает (слева). При скролле пары появляются сами, по одной: вопрос, «печатает…», ответ (js/faq.js); место под ними занято заранее –
   страница не прыгает. Без движения все пары видны. Под чатом – форма «Остались вопросы? Напишите – отвечу» с крупным заголовком */
.faq__in { display: flex; flex-direction: column; align-items: center; gap: var(--space-48); }
.faq__head { text-align: center; }
.faq__chat { width: 100%; max-width: var(--faq-w); }
.faq__log { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); }
.faq__pair { display: flex; flex-direction: column; gap: var(--space-8); }
.faq__row { position: relative; display: flex; align-items: flex-end; gap: var(--space-8); transition: opacity var(--dur-350) var(--ease-out), translate var(--dur-350) var(--ease-out); }
.faq__row--me { justify-content: flex-end; }
.faq__row .msg { max-width: 72%; }
.has-motion .faq__pair.is-wait .faq__row:not(.is-in):not(.is-typing) { opacity: 0; translate: 0 var(--reveal-y); }
.has-motion .faq__row.is-typing .msg { visibility: hidden; }
.faq__ava, .faq__bot { width: var(--avatar-s); height: var(--avatar-s); flex: none; border-radius: 50%; }
.faq__ava { object-fit: cover; box-shadow: 0 0 0 var(--avatar-ring-s) var(--friend); }
.faq__bot { display: grid; place-items: center; background: var(--color-decor); color: var(--color-fg-on-accent); font-weight: var(--fw-title); }
/* «печатает…» – три точки на месте будущего ответа (ambient typing, docs/motion.md) */
.faq__typing { position: absolute; left: calc(var(--avatar-s) + var(--space-8)); bottom: 0; display: inline-flex; gap: var(--space-4); padding: var(--space-12) var(--space-16); border-radius: var(--radius-msg); background: var(--color-bg-elevated); box-shadow: var(--shadow-msg); }
.faq__typing i { width: var(--ui-dot); height: var(--ui-dot); border-radius: 50%; background: var(--color-fg-muted); }
.has-motion .faq__typing i { animation: typing var(--dur-900) ease-in-out infinite; }
.has-motion .faq__typing i:nth-child(2) { animation-delay: var(--dur-150); }
.has-motion .faq__typing i:nth-child(3) { animation-delay: var(--dur-300); }
@keyframes typing { 0%, 60%, 100% { translate: 0 0; opacity: 0.4; } 30% { translate: 0 var(--typing-y); opacity: 1; } }
/* Форма: крупный заголовок, как у шагов how; поля вопроса и контакта одной ширины, кнопка */
.faq__ask { width: 100%; max-width: var(--faq-w); display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center; }
.faq__form { align-self: stretch; }

@media (max-width: 768px) {
  .faq__log { padding: var(--space-16); }
  .faq__row .msg { max-width: 82%; }
    }

/* Пятна цвета на фоне «Вопрос-ответ» – как на первом экране (решение Насти) */
.faq { overflow-x: clip; }
.faq::before { content: ''; position: absolute; inset: 0 -5%; pointer-events: none; background: var(--hero-glow); }
.faq__in { position: relative; }

/* 07 final – розовый липкий лист с волной: масштабный вау-момент страницы (решение Насти). Пока лист стоит, он раскрывается из карточки
   в центре на весь экран (g), со всех сторон из-за краёв слетаются марки с фото, стикеры мест и записки друзей и собираются в коллаж
   вокруг призыва (e – у каждого свой --d задержки), последними – текст, кнопка и сторы (t). Прогресс --p – приём track; --p: 1 – конечный
   кадр для ?static. Элементы коллажа – декор, absolute и transform разрешены */
.final { --p: 1; --g: min(1, calc(var(--p) / 0.35)); --t: clamp(0, calc((var(--p) - 0.62) / 0.2), 1); padding-block: var(--sheet-inset); }
.has-motion .final { height: var(--final-track); }
.final__sheet { justify-content: center; background: var(--color-bg-sheet);
  clip-path: inset(calc((1 - var(--g)) * var(--final-clip-y)) calc((1 - var(--g)) * var(--final-clip-x)) round var(--radius-xl)); }
.final__in { position: relative; z-index: var(--z-content); display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center;
  opacity: var(--t); translate: 0 calc((1 - var(--t)) * var(--reveal-y)); }
.final__title { max-width: var(--final-title-w); margin-bottom: var(--space-24); }
.final__collage { position: absolute; inset: 0; }
/* Элемент коллажа: место --x/--y (доли листа), наклон --r; влёт – из --fx/--fy (доли ширины и высоты экрана, за краем), с поворотом --fr и крупнее;
   k – своя доля пути после задержки --d, e – ease-out (1 – (1 – k)²) */
.final__item {
  --k: clamp(0, calc((var(--p) - var(--d)) / 0.32), 1);
  --e: calc(1 - (1 - var(--k)) * (1 - var(--k)));
  position: absolute; left: var(--x); top: var(--y);
  translate: calc(var(--fx) * var(--fly-w) * (1 - var(--e))) calc(var(--fy) * var(--fly-h) * (1 - var(--e)));
  rotate: calc(var(--r) + var(--fr) * (1 - var(--e)));
  scale: calc(1 + (1 - var(--e)) * 0.8);
}
.final__stamp { width: var(--fin-stamp); filter: var(--drop-sticker); }
.final__stamp .stamp { padding: var(--fin-stamp-pad); }
.final__sticker { width: auto; height: var(--sticker-h-l); filter: var(--drop-sticker); }
.final__note { position: relative; right: auto; top: auto; rotate: 0deg; }
.final__item--1 { --x: 5%; --y: 10%; --r: -8deg; --fx: -0.7; --fy: -0.4; --fr: -40deg; --d: 0.1; }
.final__item--2 { --x: 79%; --y: 8%; --r: 7deg; --fx: 0.7; --fy: -0.45; --fr: 35deg; --d: 0.14; }
.final__item--3 { --x: 3%; --y: 52%; --r: 6deg; --fx: -0.8; --fy: 0.1; --fr: 30deg; --d: 0.18; }
.final__item--4 { --x: 82%; --y: 50%; --r: -6deg; --fx: 0.8; --fy: 0.2; --fr: -30deg; --d: 0.22; }
.final__item--5 { --x: 13%; --y: 72%; --r: -4deg; --fx: -0.5; --fy: 0.6; --fr: -25deg; --d: 0.26; }
.final__item--6 { --x: 19%; --y: 36%; --r: 10deg; --fx: -0.6; --fy: -0.1; --fr: 90deg; --d: 0.3; }
.final__item--7 { --x: 76%; --y: 32%; --r: 8deg; --fx: 0.6; --fy: -0.2; --fr: -90deg; --d: 0.32; }
.final__item--8 { --x: 62%; --y: 4%; --r: 6deg; --fx: 0.2; --fy: -0.7; --fr: 60deg; --d: 0.34; }
.final__item--9 { --x: 22%; --y: 6%; --r: -6deg; --fx: -0.3; --fy: -0.7; --fr: -30deg; --d: 0.38; }
.final__item--10 { --x: 70%; --y: 76%; --r: 5deg; --fx: 0.4; --fy: 0.7; --fr: 30deg; --d: 0.42; }

/* Подвал – яркий лист цвета акцента на весь экран, выезжает из-под сайта (как у aardvark): закреплён под страницей, main
   с белым фоном уезжает вверх и открывает его. Белый текст на #E0007A – 4,7:1. Логотип, подпись, форма вопросов, соцсети, сторы,
   политика, год и подпись автора сайта (решение Насти) */
.site-footer { position: fixed; inset: auto 0 0 0; z-index: var(--z-footer); height: 100svh; display: flex; background: var(--color-accent); color: var(--color-fg-on-accent); }
.site-footer__in { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-48); padding-block: var(--space-96) var(--space-32); }
.site-footer__top { display: flex; flex-direction: column; gap: var(--space-16); }
.site-footer__logo img { width: var(--footer-logo-w); height: auto; filter: var(--logo-white); }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gutter); align-items: start; }
.site-footer__col { display: flex; flex-direction: column; gap: var(--space-16); }
.site-footer .qform__input { background: var(--color-bg-elevated); border-color: transparent; color: var(--color-fg); }
.site-footer__stores { justify-self: start; grid-template-columns: minmax(0, 1fr); }
.socials { display: flex; gap: var(--space-12); }
.social { width: var(--social); height: var(--social); display: grid; place-items: center; border-radius: 50%; border: var(--avatar-ring-s) solid var(--color-fg-on-accent); transition: background-color var(--dur-250) var(--ease-out), color var(--dur-250) var(--ease-out); }
.social:hover { background: var(--color-fg-on-accent); color: var(--color-accent); }
.social svg { width: var(--ui-glyph); height: var(--ui-glyph); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-16); padding-top: var(--space-24); border-top: 1px solid var(--color-footer-line); }
.site-footer__bottom a { text-decoration: underline; text-underline-offset: var(--space-4); }

@media (max-width: 768px) {
  .final__sheet { border-radius: var(--radius-l-mobile); }
  .final__item--2, .final__item--5, .final__item--8, .final__item--10 { display: none; }
  .final__item--1 { --x: 4%; --y: 6%; }
  .final__item--3 { --x: 2%; --y: 80%; }
  .final__item--4 { --x: 70%; --y: 80%; }
  .final__item--6 { --x: 76%; --y: 6%; }
  .final__item--7 { --x: 40%; --y: 86%; }
  .final__item--9 { --x: 34%; --y: 9%; }
  .final__note { scale: 0.75; transform-origin: 0 0; }
  .final__sticker { height: var(--sticker-h-mobile); }
  .final__in { gap: var(--space-32); }
  .final__title { margin-bottom: 0; }
  .site-footer { position: relative; height: auto; }
  .site-footer__in { padding-block: var(--space-64) var(--space-24); }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
}

/* 00 preloader – как у aardvark: толстая волнистая линия цвета акцента прорисовывается на весь экран, в центре выпрыгивает белый
   логотип, потом линия стирается и открывает сайт (playPreloader, docs/motion.md). Флаг html.is-loading ставится до отрисовки;
   если JS не сработал – прелоадер сам прячется через 4 s. Прокрутку под ним не блокируем: если телефон притормозит анимацию,
   страница не должна остаться запертой */
.preloader { display: none; }
/* сначала весь экран залит светло-розовым – сайт под ним не виден, пока линия не закроет экран целиком */
.is-loading .preloader { position: fixed; inset: 0; z-index: var(--z-preloader); display: grid; place-items: center; background: var(--color-bg-sheet); pointer-events: none; animation: preloader-failsafe 0s 4s forwards; }
.preloader__svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.preloader__line { fill: none; stroke: var(--color-accent); stroke-width: var(--preloader-line); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 999999; }
.preloader__logo { position: relative; width: var(--preloader-logo-w); height: auto; filter: var(--logo-white); opacity: 0; }
@keyframes preloader-failsafe { to { visibility: hidden; } }
/* Вода на первом экране (initWater, docs/motion.md): пятна – отдельные круги, тянутся за мышью каждое со своей задержкой и
   растягиваются по направлению движения. Пока вода включена, неподвижные пятна ::before спрятаны */
.hero.has-water::before { content: none; }
.hero__water { position: absolute; inset: -10% -5% 0; pointer-events: none; -webkit-mask: var(--water-fade) no-repeat 0 0 / 100% 100%; mask: var(--water-fade) no-repeat 0 0 / 100% 100%; }
.hero__blob { position: absolute; width: var(--blob-w); height: var(--blob-h); margin: calc(var(--blob-h) / -2) 0 0 calc(var(--blob-w) / -2); will-change: transform; }
.hero__blob--1 { left: 12%; top: 22%; background: var(--blob-1); }
.hero__blob--2 { left: 88%; top: 18%; background: var(--blob-2); }
.hero__blob--3 { left: 84%; top: 78%; background: var(--blob-3); }
.hero__blob--4 { left: 16%; top: 82%; background: var(--blob-4); }
.hero__blob--5 { left: 52%; top: 100%; background: var(--blob-5); }

/* Телефон (html.is-lite, решение Насти 2026-10-30): сайт без анимаций – как ?static (has-motion не ставится); без стекла и толпы курсоров,
   сетка страницы едет вместе со страницей, а не закреплена поверх неё – иначе телефон перерисовывает её на каждом кадре прокрутки */
.is-lite main::before { position: absolute; }
/* карточки шагов how – по содержимому, без пустоты внизу (фиксированная высота нужна только для пина) */
html.is-lite .step { height: auto; }
/* окна шагов на телефоне – готовые картинки (assets/img/steps, снимает scripts/shot.html с вёрстки 1440): живой интерфейс в уменьшении
   ломал шрифт. Картинку подставляет phonePop() в main.js, живое окно скрыто */
html.is-lite .vis { height: auto; }
.is-lite .vis__in { display: none; }
.vis__shot { display: block; width: 100%; height: auto; border-radius: var(--radius-window); }
/* Курсоры друзей на первом экране ходят (CSS, только translate) */
@media (prefers-reduced-motion: no-preference) {
  .is-lite .hero .cursor { animation: wander var(--cd, 7s) ease-in-out var(--cdl, 0s) infinite; }
}
/* Появления при входе в экран: pop-* ставит phonePop(), is-in – IntersectionObserver; движутся только transform и opacity */
.is-lite .pop { opacity: 0; transition: opacity var(--dur-600) var(--ease-out), transform var(--dur-600) var(--ease-out); }
.is-lite .pop--zoom { transform: scale(var(--pop-scale)); }
.is-lite .pop--left { transform: translateX(calc(var(--pop-x) * -1)); }
.is-lite .pop--right { transform: translateX(var(--pop-x)); }
.is-lite .pop--rise { transform: translateY(var(--reveal-y)); }
.is-lite .pop.is-in { opacity: 1; transform: none; }
.is-lite .community__crowd { display: none; }
.is-lite .ui-card, .is-lite .reel__src { -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-lite .ui-card { background: var(--color-bg-elevated); }