/* Витрина «Умный дом» v2 - сцены. Поверх main.css (токены оттуда). */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body.v2 { overflow-x: clip; }

/* ── общее для сцен ─────────────────────────────────────── */
.scene { position: relative; }
.scene__pin {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
  position: relative;
}

/* ── навигация по главам ──────────────────────────────────
   Точки без подписей не говорили, куда ведут, и терялись на фоне.
   Теперь: вертикальная шкала, названия глав и заметная активная метка. */
.dots {
  position: fixed;
  right: clamp(1rem, 2.2vw, 2.4rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-left: 1.1rem;
}
/* шкала: показывает, что это одна дорожка, а не россыпь точек */
.dots::before {
  content: "";
  position: absolute;
  left: 0.34rem; top: 0.55rem; bottom: 0.55rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.32) 12%,
                                       rgba(255,255,255,.32) 88%, transparent);
}
.dots a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.42rem 0;
  margin-left: -1.1rem;
  padding-left: 1.1rem;
  text-decoration: none;
  line-height: 1;
}
/* сама метка на шкале */
.dots a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px; margin-left: -3px;
  border-radius: 50%;
  background: #fff;
  /* Сцены чередуют тёмные кадры и светлые фотографии. Раньше здесь стояла
     инверсия (mix-blend-mode: difference) - она читалась на любом фоне,
     но заставляла браузер вычитывать всё, что под навигацией, на каждом
     кадре прокрутки, и прокрутка становилась тяжёлой. Тёмный контур
     вокруг белой метки даёт ту же читаемость даром. */
  box-shadow: 0 0 0 1.5px rgba(10,10,12,.5), 0 1px 3px rgba(0,0,0,.45);
  transition: transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
/* подпись главы */
.dots a span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.65);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
  pointer-events: none;
}
.dots:hover a span { opacity: .75; transform: none; }
.dots a:hover span { opacity: 1; }
.dots a::before { opacity: .5; }
.dots a:hover::before { opacity: 1; transform: scale(1.25); }

/* Активная глава - единственная, кто выходит из инверсии: у неё своя
   подложка и фирменный латунный цвет, поэтому её видно сразу. */
.dots a.on::before {
  background: var(--brass-lift);
  opacity: 1;
  transform: scale(1.5);
  box-shadow: 0 0 0 4px rgba(190,150,80,.16), 0 0 12px rgba(190,150,80,.35);
}
.dots a.on span {
  opacity: 1;
  transform: none;
  color: var(--brass-lift);
  /* размытие подложки убрано: подпись активной главы видна всегда,
     и постоянный backdrop-filter держал браузер в перерисовке */
  padding: 0.22rem 0.5rem;
  margin: -0.22rem -0.5rem;
  border-radius: 2px;
  background: rgba(8, 8, 10, 0.62);
  text-shadow: none;
}
.dots a:focus-visible::before { outline: 2px solid var(--brass-lift); outline-offset: 3px; }

@media (max-width: 900px) {
  .dots a span { display: none; }
  .dots { padding-left: 0.9rem; }
}
@media (max-width: 640px) { .dots { display: none; } }

/* ── сцена 1: темнота → свет ────────────────────────────── */
.s-dark .scene__pin { justify-content: flex-end; padding-bottom: clamp(3rem, 9vh, 6rem); }
.s-dark__media, .s-dark__lit, .s-dark__litfull {
  position: absolute; inset: 0;
}
.s-dark__litfull { will-change: opacity; }
.s-dark__lit { will-change: auto; }
.s-dark__media img, .s-dark__lit img {
  width: 100%; height: 100%; object-fit: cover;
}
.s-dark__media img { opacity: 0.13; }           /* дом «выключен» */
.s-dark__lit {
  /* свет от курсора: маска на CSS-переменных */
  -webkit-mask-image: radial-gradient(circle var(--r, 240px) at var(--mx, 50%) var(--my, 42%), rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 55%, transparent 100%);
  mask-image: radial-gradient(circle var(--r, 240px) at var(--mx, 50%) var(--my, 42%), rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 55%, transparent 100%);
}
.s-dark__lit::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.8) 100%);
}
.s-dark__inner { position: relative; z-index: 2; }
.s-dark .line {
  display: block;
  overflow: clip;
}
.s-dark .line > span {
  display: block;
  transform: translateY(110%);
}
.s-dark__hint {
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--fg-dim);
  font-size: var(--small);
  letter-spacing: 0.08em;
}
.s-dark__hint .pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brass);
  animation: pulse 2.2s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}

/* ── сцена 2: панель ────────────────────────────────────── */
.s-panel { background: var(--bg); }
.s-panel .scene__pin {
  flex-direction: row;
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  padding: 0 var(--gut);
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
.s-panel__media {
  flex: 1 1 54%;
  min-width: 0;          /* иначе флекс не сжимается и выдавливает текст */
  perspective: 1100px;
}
.s-panel__card {
  position: relative;
  aspect-ratio: 1280 / 852;
  max-height: 62svh;     /* не занимает экран целиком */
  margin-inline: auto;
  overflow: clip;
  transform-style: preserve-3d;
  will-change: transform;
  /* Рамка не лежит на самом снимке: между ней и фотографией тёмное поле,
     как паспарту в раме. Без отступа граница читалась как обрез кадра. */
  padding: clamp(9px, 1vw, 16px);
  background: var(--surface-dark);
  border: 1px solid var(--rule);
}
.s-panel__card img { width: 100%; height: 100%; object-fit: cover; }
/* латунный контур - по внутреннему краю поля, вплотную к снимку:
   получается двойная линия, как в раме под стеклом */
.s-panel__card::after {
  content: '';
  position: absolute;
  inset: clamp(9px, 1vw, 16px);
  border: 1px solid rgba(158, 124, 52, 0.45);
  pointer-events: none;
}
.s-panel__glow {
  position: absolute;
  /* область экрана панели на фото (в процентах кадра) */
  left: 20%; top: 30%; width: 30%; height: 36%;
  background: radial-gradient(ellipse at center, rgba(120, 170, 255, 0.22) 0%, transparent 70%);
  mix-blend-mode: screen;
  animation: glow 4s var(--ease) infinite;
  pointer-events: none;
}
@keyframes glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.s-panel__copy { flex: 1 1 42%; min-width: 0; max-width: 30em; }
.s-panel__copy .lede { margin-top: 1.2rem; }

/* ── сцена 3: сценарии ──────────────────────────────────── */
.s-scen__media { position: absolute; inset: 0; }
.s-scen__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.72) saturate(0.9); }
.s-scen__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 46%, rgba(0,0,0,0.05) 100%);
}
/* слои света */
.s-scen__dim {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  z-index: 2;
  will-change: opacity;
}
.s-scen__warm {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 34% 30% at 22% 24%, rgba(255, 190, 110, 0.35) 0%, transparent 100%),
    radial-gradient(ellipse 30% 26% at 66% 20%, rgba(255, 190, 110, 0.3) 0%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
}
.s-scen__curtain {
  z-index: 2;
  will-change: transform;
  position: absolute; inset: 0 0 0 auto;
  width: 58%;
  background: linear-gradient(90deg, transparent 0%, rgba(6, 5, 4, 0.88) 22%, rgba(10, 9, 8, 0.96) 100%);
  transform: translateX(101%);
}
.s-scen__guard {
  z-index: 3;
  position: absolute;
  /* правый нижний угол занят кнопкой звука, поэтому подпись
     сцены поднята над ней и не наезжает */
  right: clamp(1.5rem, 4vw, 4rem); bottom: clamp(4.6rem, 9vh, 6rem);
  display: flex; align-items: center; gap: 0.7rem;
  color: var(--fg-mute); font-size: var(--small); letter-spacing: 0.1em;
  opacity: 0;
}
.s-scen__guard i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brass-lift);
  box-shadow: 0 0 12px rgba(194, 152, 74, 0.9);
}
.s-scen__copy {
  position: relative; z-index: 2;
  padding: 0 var(--gut);
}
.s-scen__step { position: absolute; inset: auto 0 auto 0; padding: 0 var(--gut); opacity: 0; transform: translateY(24px); }
.s-scen__step .eyebrow { color: var(--brass-lift); }
.s-scen__step h2 { margin-top: 1rem; }
.s-scen__step p { margin-top: 1.1rem; max-width: 30em; color: var(--fg-mute); }

/* ── сцена 4: горизонтальная лента ──────────────────────── */
.s-belt .scene__pin { justify-content: center; }
.s-belt__head { padding: 0 var(--gut); margin-bottom: clamp(0.9rem, 2.4vh, 1.8rem); }
/* Сетка на один экран: четыре карточки в ряду, семь укладываются
   в два ряда, второй ряд встаёт по центру. */
.s-belt__track {
  display: flex;
  flex-wrap: wrap;
  /* по левому краю: второй ряд встаёт ровно под первым,
     а не повисает по центру */
  justify-content: flex-start;
  gap: 1px;
  /* справа оставляем полосу под навигацию по главам,
     иначе четвёртая карточка уходит под метки */
  padding: 0 clamp(4rem, 12vw, 11rem) 0 var(--gut);
}
.s-belt__card {
  flex: 1 1 calc(25% - 1px);
  max-width: calc(25% - 1px);
  background: var(--bg);
  border: 1px solid var(--rule);
  margin: -0.5px;
  padding: clamp(0.85rem, 1.3vw, 1.4rem);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.s-belt__card h3 { font-size: clamp(1rem, 0.6vw + 0.85rem, 1.32rem); line-height: 1.16; margin: 0; }
.s-belt__card p { font-size: 0.83rem; line-height: 1.45; color: var(--fg-mute); margin: 0; }
.s-belt__num { font-family: 'Unbounded', sans-serif; font-weight: 200; font-size: 0.8125rem; color: var(--brass); letter-spacing: 0.12em; }

/* ── сцена 5: объекты ───────────────────────────────────── */
.s-works .work-full {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
}
.s-works .work-full img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.92) brightness(0.8);
}
.s-works .work-full::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.85) 100%);
}
.s-works .work-full figcaption {
  position: relative; z-index: 2;
  width: 100%;
  padding: 0 var(--gut) clamp(2rem, 5vh, 3.4rem);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.6rem;
}
/* Подпись объекта поверх полноэкранного кадра - осознанная ступень между
   --h2 и --h3: заголовок раздела над ней должен читаться крупнее, а сама
   она - крупнее подписи города. Держим её здесь одним правилом, чтобы
   размер не расползался по файлу. */
.s-works h3 { font-size: var(--h-work); }
.s-works .work__city { font-size: var(--small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
.s-works .work-full p { width: 100%; max-width: 44em; color: var(--fg-mute); font-size: 0.9375rem; }

/* ── сцена 6: финал (обычный поток из v1) ───────────────── */

/* ── появления ──────────────────────────────────────────── */
.fx-up { opacity: 0; transform: translateY(26px); }

/* ── мобильная и reduced-motion ─────────────────────────── */
@media (max-width: 768px) {
  .s-panel .scene__pin { flex-direction: column; align-items: stretch; justify-content: center; gap: 1.6rem; padding: 12vh var(--gut) 6vh; }
  .s-panel__media { width: 100%; flex: 0 0 auto; }
  .s-panel__copy { max-width: none; }
  .s-panel__copy h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .s-panel__copy .lede { font-size: 0.95rem; margin-top: 0.8rem; }
  .dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .s-dark__media img { opacity: 0.45; }
  .s-dark .line > span { transform: none; }
  .fx-up { opacity: 1; transform: none; }
  .s-dark__hint .pulse, .s-panel__glow { animation: none; }
}

/* подсказка про курсор - только там, где есть курсор */
@media (hover: none) { .only-mouse { display: none; } }

/* ── изображения в карточках ленты ───────────────────────── */
.s-belt__card .sch { transition: opacity var(--t-slow) var(--ease); opacity: 0.86; }
.s-belt__card:hover .sch { opacity: 1; }
.s-belt__card { padding: 0; overflow: clip; }
.s-belt__card > div, .s-belt__card > .s-belt__num { padding: 0 clamp(1.4rem, 2.2vw, 2rem); }
.s-belt__num { padding-top: clamp(1.1rem, 2vh, 1.6rem); }
.s-belt__card > div:last-child { padding-bottom: clamp(1.5rem, 2.6vh, 2.2rem); }


/* ── блок принадлежности к клубу ─────────────────────────── */
.club { display: flex; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: flex-start; }
.club__mark { flex: 0 0 auto; opacity: 0.9; }
.club__text { max-width: 46em; }
@media (max-width: 640px) { .club { flex-direction: column; gap: 1rem; } }

/* ── тёплый свет из-за кадра на финальных экранах ─────────
   Не декоративный градиент, а источник света: одна тёплая точка,
   как лампа за пределами кадра. Ниже 6% плотности. */
.v2 main > .sec { position: relative; }
.v2 main > .sec::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 82% 0%, rgba(158, 124, 52, 0.085) 0%, rgba(158, 124, 52, 0.03) 38%, transparent 72%);
}
.v2 main > .sec:nth-of-type(even)::before {
  background: radial-gradient(115% 85% at 12% 100%, rgba(180, 145, 82, 0.07) 0%, rgba(158, 124, 52, 0.025) 40%, transparent 74%);
}
.v2 main > .sec > .wrap { position: relative; z-index: 1; }
.v2 .foot {
  position: relative;
  background: linear-gradient(180deg, rgba(158, 124, 52, 0.045) 0%, transparent 60%);
}

/* ── сцена «Дом целиком»: 3D-каркас ─────────────────────── */
.s-house .scene__pin { justify-content: flex-start; padding-top: clamp(5rem, 12vh, 8rem); }
.s-house__head { padding: 0 var(--gut); position: relative; z-index: 3; pointer-events: none; }
.s-house__head h2 { max-width: 22em; }
.s-house__head .lede { margin-top: 1rem; }
#house3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
/* Сцена дома закрепляется заранее (anticipatePin), поэтому её пустой
   чёрный холст успевал накрыть ещё идущие «Сценарии» - экран уходил
   в полную черноту вместе с шапкой. Показываем холст только когда
   сцена реально в работе. */
#house3d.is-ready.is-live { opacity: 1; }
#house3d canvas { width: 100%; height: 100%; display: block; }
.h3d__lbl {
  position: absolute;
  top: 0; left: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-lift);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 600ms var(--ease);
  pointer-events: none;
}
.s-house__hint {
  position: absolute;
  left: var(--gut); bottom: clamp(1.6rem, 4vh, 3rem);
  z-index: 3;
  font-size: var(--small);
  color: var(--fg-dim);
  letter-spacing: 0.08em;
}
.s-house__noscript {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--fg-dim);
}
#house3d.is-ready ~ .s-house__noscript { display: none; }

/* Локальные ступени витрины поверх общих токенов из main.css.
   Объявлены здесь, чтобы одно и то же значение не расползалось литералами. */
.v2 {
  --surface-dark: #14130f;    /* тёмная плашка внутри тёмного фона */
  --surface-hover: #0c0b09;   /* поверхность под курсором */
  --h-work: clamp(1.5rem, 2vw + 0.8rem, 2.6rem);
}

/* ══ Живой интерьер ═══════════════════════════════════════ */

/* Здесь кадр «дышал»: бесконечный наезд с 1.02 до 1.075 за 26 секунд.
   Снято 26.07 - на первом экране лежат друг на друге три полноэкранных
   снимка (тёмный, освещённый и полный свет), и каждый из них браузер
   пересчитывал вместе с цветовым фильтром на каждом кадре, не переставая,
   даже когда страница стоит на месте. Именно это и тормозило. Движение
   на первом экране и так есть: свет зажигается по курсору и по прокрутке. */
.s-dark__media img, .s-dark__lit img, .s-dark__litfull img {
  transform: none;
}

/* выносной блок «что на экране»: понятный интерфейс рядом с фото */
.ui { margin: clamp(1.6rem, 3.5vh, 2.4rem) 0 0; }
.ui figcaption {
  font-size: var(--small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 0.8rem;
}
.ui__svg { width: 100%; max-width: 380px; height: auto; display: block; }
.ui__svg text { font-family: 'Manrope', sans-serif; }
.ui__t { font-size: 7px; letter-spacing: 0.14em; fill: var(--fg-dim); }
.ui__s { font-size: 9px; fill: var(--fg); }
.ui__s2 { font-size: 8px; fill: #6a655d; }
.ui__val text { font-size: 13px; fill: var(--brass-lift); font-weight: 300; }
.ui-sc { fill: var(--surface-dark); stroke: #2b2823; stroke-width: 1; }
@keyframes uiPick {
  0%, 100% { fill: var(--surface-dark); }
  8%, 22%  { fill: #2a2114; }
}
.ui-sc { animation: uiPick 9s var(--ease) infinite; }
.ui-sc.s2 { animation-delay: 3s; }
.ui-sc.s3 { animation-delay: 6s; }
@keyframes uiBar {
  0%   { transform: scaleY(0.28); }
  100% { transform: scaleY(1); }
}
.ui-b { fill: var(--brass); transform-origin: bottom; transform-box: fill-box; animation: uiBar 2.6s var(--ease) infinite alternate; }
.ui-b.b2 { animation-delay: 0.22s; }
.ui-b.b3 { animation-delay: 0.44s; }
.ui-b.b4 { animation-delay: 0.66s; }
.ui-b.b5 { animation-delay: 0.88s; }
.ui-b.b6 { animation-delay: 1.1s; }

/* импульс из панели по стене при наведении */
.s-panel__pulse {
  position: absolute;
  left: 34.8%; top: 47.3%;
  width: 1px; height: 1px;
  border: 1px solid rgba(194, 152, 74, 0.75);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.s-panel__card:hover .s-panel__pulse { animation: pulseOut 1.1s var(--ease); }
@keyframes pulseOut {
  0%   { width: 6px; height: 6px; margin: -3px; opacity: 0.85; }
  100% { width: 420px; height: 420px; margin: -210px; opacity: 0; }
}

/* сцена «вечер»: тёплые зоны зажигаются по очереди как реле */
.s-scen__warm { opacity: 0; }
.s-scen__warm .z {
  position: absolute; inset: 0;
  opacity: 0;
}
.s-scen__warm .z1 { background: radial-gradient(ellipse 30% 26% at 20% 26%, rgba(255,186,104,0.42) 0%, transparent 100%); }
.s-scen__warm .z2 { background: radial-gradient(ellipse 26% 22% at 63% 20%, rgba(255,190,112,0.36) 0%, transparent 100%); }
.s-scen__warm .z3 { background: radial-gradient(ellipse 22% 20% at 41% 62%, rgba(255,176,96,0.3) 0%, transparent 100%); }

/* волна гашения: проезжает от дальней комнаты к прихожей */
.s-scen__sweep {
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, #000 0%, #000 34%, rgba(0,0,0,0.35) 48%, transparent 62%);
  transform: translateX(-108%);
}


/* блик по слову в заголовке */
.gleam {
  background-image: linear-gradient(100deg, currentColor 0%, currentColor 38%, #ffe6b8 50%, currentColor 62%, currentColor 100%);
  background-size: 320% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--fg);
}

/* объекты: кадр «включается» при входе в экран */
.s-works .work-full img { filter: saturate(0.9) brightness(0.62); }

@media (prefers-reduced-motion: reduce) {
  .s-dark__media img, .s-dark__lit img, .s-dark__litfull img { animation: none; }
  .ui-sc, .ui-b { animation: none; }
  .gleam { -webkit-text-fill-color: currentColor; background: none; }
}


/* ── общий фон страницы ───────────────────────────────────
   Раньше каждая сцена красилась в свой плоский цвет, и на стыках
   была видна резкая граница. Теперь под сценами один градиент,
   который медленно теплеет к концу страницы: он и связывает
   главы между собой, и даёт ощущение движения. */
.pagebg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    /* холодный верх и холодное пятно слева внизу: сталь и ночная синева.
       Латунь тёплая, и рядом с чистой чернотой она читается как «жёлтое
       на чёрном». С холодным соседом тот же цвет становится металлом. */
    radial-gradient(90% 60% at 18% 88%, rgba(38,58,86,.26), transparent 66%),
    radial-gradient(120% 70% at 84% 4%, rgba(44,66,92,.22), transparent 60%),
    radial-gradient(120% 80% at 50% -10%, rgba(60,52,38,.24), transparent 62%),
    linear-gradient(180deg, #05070c 0%, #07080c 38%, #0a0a0b 68%, #0d0b07 100%);
}
/* тёплое пятно, которое едет за прогрессом чтения */
.pagebg::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 140vmax; height: 140vmax;
  transform: translate(-50%, calc(-50% + var(--bgy, 0vh)));
  background: radial-gradient(closest-side, rgba(190,150,80,.10), transparent 70%);
  transition: transform 1.2s var(--ease);
  /* Пятно размером в полтора экрана едет за прокруткой. Без этой строки
     браузер перерисовывал его вместе со всем, что сверху, на каждом кадре -
     отсюда и шла тяжесть прокрутки. С отдельным слоем сдвиг делает
     видеокарта, и он не стоит почти ничего. */
  will-change: transform;
}
/* сцены больше не перекрывают общий фон своим плоским цветом */
.s-dark, .s-panel, .s-scen, .s-house, .s-belt { background: transparent; }


/* ── финальные разделы: каждый цельным экраном ────────────
   Раньше «Клуб» и «Контакт» шли подряд короткими блоками и попадали
   в кадр вдвоём - границы между ними не читалось, оба выглядели
   обрывками. Теперь каждый занимает экран целиком, содержимое
   по центру, и между ними видимый стык. */
.v2 main > .sec {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(4rem, 10vh, 7rem);
  padding-bottom: clamp(4rem, 10vh, 7rem);
}
.v2 main > .sec--rule {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
/* у контактов содержимое ниже: там таблица реквизитов */
.v2 main > #kontakt { justify-content: center; }

@media (max-width: 760px) {
  .v2 main > .sec {
    min-height: auto;
    padding-top: clamp(3rem, 8vh, 5rem);
    padding-bottom: clamp(3rem, 8vh, 5rem);
  }
}


/* ── «Объекты»: техника, которой не видно ────────────────
   Текст блока обещает, что техника не бросается в глаза. Показываем
   это буквально: на кадре проступают точки там, где стоит система,
   и подписываются при наведении. Обещание становится проверяемым. */
.s-works { position: relative; }

.works__intro {
  padding: clamp(4rem, 12vh, 8rem) var(--gut) clamp(2rem, 6vh, 4rem);
  max-width: 60rem;
}
.works__kicker {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-lift); margin: 0 0 1rem;
}
.works__title {
  /* был собственный clamp мимо шкалы - 57.6px против канонических 43.68px
     у всех остальных заголовков разделов. Приведено к общей ступени. */
  font-size: var(--h2); line-height: 1.04;
  margin: 0 0 1rem; font-weight: 200;
}
.works__lead { color: var(--fg-dim); margin: 0 0 2.6rem; }

.works__stats { display: flex; gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap; }
.works__stat { display: flex; flex-direction: column; gap: 0.35rem; }
.works__stat b {
  font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 200; line-height: 1;
  color: var(--brass-lift); font-variant-numeric: tabular-nums;
}
.works__stat span { font-size: 0.82rem; color: var(--fg-dim); letter-spacing: 0.02em; }

.work-full { position: relative; }
/* Поверх фото лежит затемняющий слой (.work-full::after) для читаемости
   подписи - он и перехватывал курсор, из-за чего подсказки не открывались.
   Поднимаем отметки над ним. */
.work__marks { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.work__mark {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  background: none; border: 0; padding: 0;
  pointer-events: auto; cursor: default;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.work-full.is-seen .work__mark { opacity: 1; }
/* задержка по очереди: точки проявляются одна за другой */
.work-full.is-seen .work__mark:nth-child(1) { transition-delay: 0.15s; }
.work-full.is-seen .work__mark:nth-child(2) { transition-delay: 0.35s; }
.work-full.is-seen .work__mark:nth-child(3) { transition-delay: 0.55s; }
.work-full.is-seen .work__mark:nth-child(4) { transition-delay: 0.75s; }

.work__markDot {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--brass-lift);
  /* тёмное кольцо снаружи: на светлой штукатурке и на белой двери
     одна только латунь терялась, а с обводкой точка читается на любом кадре */
  box-shadow: 0 0 0 2px rgba(10,10,12,.55),
              0 0 0 7px rgba(190,150,80,.22),
              0 0 22px rgba(190,150,80,.75);
  position: relative;
}
/* мягкая пульсация - точка «дышит», как индикатор живой системы */
.work__markDot::after {
  content: ""; position: absolute; inset: -7px;
  border-radius: 50%; border: 1.5px solid rgba(212,175,110,.75);
  animation: markPulse 2.8s var(--ease) infinite;
}
@keyframes markPulse {
  0%   { transform: scale(0.7); opacity: 0.9; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
.work__mark:nth-child(2) .work__markDot::after { animation-delay: 0.7s; }
.work__mark:nth-child(3) .work__markDot::after { animation-delay: 1.4s; }
.work__mark:nth-child(4) .work__markDot::after { animation-delay: 2.1s; }

.work__markTip {
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(6px);
  min-width: 12rem; max-width: 16rem;
  padding: 0.7rem 0.85rem;
  background: rgba(10, 10, 12, 0.94);
  border: 1px solid rgba(190,150,80,.22);
  border-radius: 2px;
  text-align: left;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.work__markTip b {
  display: block; font-size: 0.86rem; font-weight: 400;
  color: #fff; margin-bottom: 0.2rem;
}
.work__markTip { font-size: 0.78rem; color: var(--fg-dim); line-height: 1.4; }
.work__mark:hover .work__markTip,
.work__mark:focus-visible .work__markTip { opacity: 1; transform: translateX(-50%); }
.work__mark:hover .work__markDot { box-shadow: 0 0 0 6px rgba(190,150,80,.26), 0 0 20px rgba(190,150,80,.7); }

@media (max-width: 760px) {
  /* На телефоне навести нечем, поэтому точки остаются, а подписи не нужны:
     сам факт «здесь техника» считывается, подробности - на десктопе. */
  .work__markTip { display: none; }
  .work__markDot { width: 11px; height: 11px; }
  .works__stats { gap: 1.6rem; }
}


/* ── лента «Что умеет»: фокус на карточке в центре ───────
   Семь карточек одинаковой яркости читались как список, и глаз
   не знал, за что зацепиться. Теперь в фокусе та, что сейчас
   в центре кадра: остальные притушены и чуть отодвинуты. */
.s-belt__card {
  opacity: 0.38;
  transform: scale(0.965);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}


@media (max-width: 760px) {
  .s-belt__card { opacity: 1; transform: none; }
}


/* ── возможности: всё на одном экране ─────────────────────
   Схема занимает верх карточки и ужимается по высоте окна, чтобы два
   ряда вместе с заголовком раздела помещались в экран без прокрутки. */
/* внутренний контейнер сцены уже ростом в экран - своих отступов
   секции не нужно, иначе раздел вылезает за экран на их величину */
.s-belt { min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
          padding: 0; }
/* содержимое по центру экрана, сверху - полоса под шапку сайта,
   иначе заголовок раздела уезжает под логотип */
.s-belt .scene__pin {
  display: flex; flex-direction: column; justify-content: center;
  height: 100svh;
  padding-top: clamp(3.5rem, 7vh, 5rem);
}
.s-belt__card .sch { width: 100%; height: clamp(72px, 10.5vh, 128px); display: block; }
.s-belt__card > div { display: flex; flex-direction: column; gap: 0.45rem; }
.s-belt__num { order: -1; }

/* карточки проявляются одна за другой, когда раздел входит в кадр */
.s-belt__card { opacity: 0; transform: translateY(14px);
                transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.s-belt__card.in { opacity: 1; transform: none; }
.s-belt__card:hover { background: var(--surface-hover); }

@media (max-width: 1100px) {
  .s-belt__card { flex-basis: calc(50% - 1px); max-width: calc(50% - 1px); }
  .s-belt { min-height: auto; }
  /* в две и в одну колонку карточки выше экрана: жёсткая высота с
     overflow: clip срезала последние карточки */
  .s-belt .scene__pin { height: auto; min-height: 100svh; overflow: visible; padding-bottom: 1.5rem; }
}
/* без движения (настройка системы или скрипт не долетел) содержимое видно сразу */
@media (prefers-reduced-motion: reduce) {
  .s-belt__card, .work__mark { opacity: 1; transform: none; }
  .s-scen__step:first-child { opacity: 1; transform: none; }
}
.no-js .s-belt__card, .no-js .work__mark { opacity: 1; transform: none; }
.no-js .s-scen__step:first-child { opacity: 1; transform: none; }
@media (max-width: 640px) {
  .s-belt__card { flex-basis: 100%; max-width: 100%; }
}

/* ── объекты: кадр и подпись целиком в экране ─────────────
   Раньше заголовок с цифрами занимал отдельный экран, а фотографии
   начинались под ним и обрезались снизу. Теперь вступление лежит
   поверх первого кадра, а каждый объект - ровно один экран. */
.s-works { position: relative; }
.works__intro {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  padding: clamp(5rem, 13vh, 8rem) var(--gut) 0;
  pointer-events: none;
}
.works__intro::before {
  content: "";
  position: absolute; inset: -2rem 0 -6rem;
  background: linear-gradient(180deg, rgba(6,6,8,.92) 0%, rgba(6,6,8,.72) 55%, transparent 100%);
  z-index: -1;
}
.s-works .work-full { min-height: 100svh; }
.s-works .work-full:first-of-type { padding-top: 0; }

@media (max-width: 760px) {
  .works__intro { position: static; padding-top: clamp(3rem, 8vh, 5rem); }
  .works__intro::before { display: none; }
  .s-works .work-full { min-height: 70svh; }
}


/* ══ Клуб: место умного дома в цепочке этапов ═══════════════
   Раздел был плоским: абзац текста и ссылка. Смысл в нём хороший -
   умный дом идёт четвёртым и стыкуется с соседями, - но глазу
   не за что зацепиться. Показываем это буквально: шесть этапов
   линией, наш выделен. */
.club { align-items: flex-start; }
.club__mark { padding-top: 0.4rem; }
.club__a { display: block; width: clamp(84px, 9vw, 128px); height: auto; }

/* монограмма прорисовывается линией, как чертёж */
.club__a path {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
}
.club.in .club__a-arc { animation: clubDraw 1.5s var(--ease) 0.1s forwards; }
.club.in .club__a-bar { animation: clubDraw 0.8s var(--ease) 0.9s forwards; }
@keyframes clubDraw { to { stroke-dashoffset: 0; } }

/* ── цепочка этапов ── */
.chain {
  list-style: none;
  margin: clamp(2.2rem, 5vh, 3.4rem) 0 0;
  padding: 1.6rem 0 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  position: relative;
}
/* линия, на которой стоят этапы: прорастает слева направо */
.chain::before {
  content: "";
  position: absolute;
  top: 0;
  /* точки стоят по левому краю своих колонок, поэтому линия идёт
     от левого края первой до левого края последней, а не по центрам */
  left: 3px; right: calc(100% / 6 - 3px);
  height: 1px;
  background: linear-gradient(90deg, rgba(190,150,80,.45), rgba(255,255,255,.14));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s var(--ease) 0.2s;
}
.club.in .chain::before { transform: scaleX(1); }

.chain__i {
  position: relative;
  padding-top: 1.5rem;
  display: flex; flex-direction: column; gap: 0.22rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.club.in .chain__i { opacity: 1; transform: none; }
.club.in .chain__i:nth-child(1) { transition-delay: 0.35s; }
.club.in .chain__i:nth-child(2) { transition-delay: 0.48s; }
.club.in .chain__i:nth-child(3) { transition-delay: 0.61s; }
.club.in .chain__i:nth-child(4) { transition-delay: 0.74s; }
.club.in .chain__i:nth-child(5) { transition-delay: 0.87s; }
.club.in .chain__i:nth-child(6) { transition-delay: 1s; }

/* точка этапа стоит ровно на линии */
.chain__i::before {
  content: "";
  position: absolute;
  top: -3.5px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--surface-dark);
  border: 1px solid rgba(255,255,255,.3);
}
.chain__n {
  font-family: 'Unbounded', sans-serif; font-weight: 200;
  font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--fg-dim);
}
.chain__l { font-size: 0.95rem; color: var(--fg-mute); line-height: 1.25; }
.chain__co { font-size: 0.76rem; color: var(--fg-dim); letter-spacing: 0.02em; }

/* наш этап: единственный в латуни, с подсветкой */
.chain__i.is-own::before {
  width: 11px; height: 11px;
  top: -5.5px; left: -2px;
  background: var(--brass-lift);
  border-color: var(--brass-lift);
  box-shadow: 0 0 0 4px rgba(190,150,80,.16), 0 0 16px rgba(190,150,80,.5);
}
.chain__i.is-own .chain__n,
.chain__i.is-own .chain__co { color: var(--brass-lift); }
.chain__i.is-own .chain__l { color: #fff; font-size: 1.02rem; }

@media (max-width: 900px) {
  .chain { grid-template-columns: repeat(3, 1fr); row-gap: 1.6rem; }
  /* при переносе на две строки сквозная линия врёт - убираем её,
     этапы держатся собственными точками */
  .chain::before { display: none; }
}
@media (max-width: 560px) {
  .chain { grid-template-columns: repeat(2, 1fr); }
}

/* ══ Контакт: разговор начинается с проекта ════════════════
   Было четыре подписи в строку - читалось как подвал. Разводим
   по карточкам с тонкой рамкой, телефон делаем главным. */
.contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 5vh, 3rem);
  background: var(--rule);
  border: 1px solid var(--rule);
}
.contacts > div {
  background: var(--bg);
  padding: clamp(1.3rem, 2.2vw, 2rem);
  position: relative;
  transition: background-color 0.5s var(--ease);
}
/* латунная черта прорастает сверху при наведении */
.contacts > div::before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--brass-lift);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.55s var(--ease);
}
.contacts > div:hover { background: var(--surface-hover); }
.contacts > div:hover::before { transform: scaleX(1); }

.contact__label {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-dim); margin-bottom: 0.7rem;
}
.contact__val { font-size: 1.02rem; line-height: 1.4; }
/* телефон - главный контакт на странице */
.contacts > div:first-child .contact__val {
  font-family: 'Unbounded', sans-serif; font-weight: 200;
  font-size: clamp(1.25rem, 1.6vw + 0.6rem, 1.75rem);
  letter-spacing: -0.01em;
}


/* ссылка на клуб не должна липнуть к цепочке */
.club__link { margin-top: clamp(1.8rem, 4vh, 2.8rem); }

/* контакты: два на два - четвёртая карточка не оставляет пустой ячейки,
   а телефон помещается в строку целиком */
.contacts { grid-template-columns: repeat(2, 1fr); }
.contacts > div:first-child .contact__val {
  font-size: clamp(1.15rem, 1.2vw + 0.6rem, 1.5rem);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .contacts { grid-template-columns: 1fr; }
}


/* уточнение под контактом (индекс, условие) - было встроено в разметку */
.contact__sub { display: block; color: var(--fg-mute); font-size: 0.9375rem; }


/* ══ кнопка звука ══════════════════════════════════════════
   Всегда внизу справа, не уезжает вместе с содержимым: человек
   должен иметь возможность выключить звук в любой момент. */
.sndbtn {
  position: fixed;
  right: clamp(1rem, 2vw, 1.8rem);
  bottom: clamp(1rem, 2vw, 1.8rem);
  z-index: 60;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  background: rgba(8, 8, 10, 0.72);
  border: 1px solid var(--rule);
  color: var(--fg-dim);
  font-family: 'Manrope', sans-serif;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
              background-color var(--t-mid) var(--ease);
}
.sndbtn:hover { color: var(--fg-mute); border-color: rgba(190,150,80,.35); }
.sndbtn.is-on { color: var(--brass-lift); border-color: rgba(190,150,80,.45); }

/* четыре полоски: стоят ровно, когда звук выключен, и живут, когда включён */
.sndbtn__bars { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.sndbtn__bars i {
  width: 2px; height: 3px;
  background: currentColor;
  transition: height var(--t-mid) var(--ease);
}
.sndbtn.is-on .sndbtn__bars i { animation: sndBar 1.1s var(--ease) infinite alternate; }
.sndbtn.is-on .sndbtn__bars i:nth-child(2) { animation-delay: 0.18s; }
.sndbtn.is-on .sndbtn__bars i:nth-child(3) { animation-delay: 0.36s; }
.sndbtn.is-on .sndbtn__bars i:nth-child(4) { animation-delay: 0.54s; }
@keyframes sndBar { from { height: 3px; } to { height: 11px; } }

@media (prefers-reduced-motion: reduce) {
  .sndbtn.is-on .sndbtn__bars i { animation: none; height: 8px; }
}
@media (max-width: 560px) {
  .sndbtn__t { display: none; }
  .sndbtn { padding: 0.6rem; }
}


/* ══ полоса под навигацию по главам ═══════════════════════
   Навигация висит у правого края поверх содержимого, и текст сцен
   доходил прямо под неё - строки читались сквозь метки. Освобождаем
   правую полосу там, где навигация видна (ниже 1100 она скрыта). */
@media (min-width: 1101px) {
  .v2 .scene__pin,
  .v2 main > .sec > .wrap,
  .v2 .works__intro { padding-right: max(var(--gut), 9.5rem); }
  /* у ленты полоса уже заложена в собственный отступ */
  .v2 .s-belt .scene__pin { padding-right: 0; }
}

/* ── полоса-разделитель: честно говорит, что это витрина клуба ── */
.clubbar {
  position: relative; z-index: 41;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap;
  padding: 0.55rem clamp(1.2rem, 4vw, 4rem);
  background: rgba(10,10,10,.92);
  border-bottom: 1px solid var(--rule);
  font-size: 0.76rem; letter-spacing: 0.02em;
  color: var(--fg-dim);
}
.clubbar a { color: var(--brass-lift); text-decoration: none; white-space: nowrap; }
.clubbar a:hover { text-decoration: underline; }
@media (max-width: 700px) { .clubbar span:first-child { display: none; } }
/* полоса клуба уезжает с прокруткой, шапка опускается к самому верху -
   иначе над ней оставалась открытая полоса в 2.1rem */
.top { top: 2.1rem; transition: top 300ms var(--ease), background-color 500ms var(--ease), padding var(--t-mid) var(--ease); }
.top.is-scrolled { top: 0; }

/* ── выход на главную клуба ── */
.club-home {
  position: relative; z-index: 1;
  display: inline-block; margin-top: 1.6rem;
  font-size: 0.9375rem; color: var(--brass-lift);
  border-bottom: 1px solid rgba(194,152,74,0.4); padding-bottom: 2px;
  transition: color 300ms ease, border-color 300ms ease;
}
.club-home:hover { color: var(--fg); border-color: var(--fg); }
.club-home span { display: inline-block; transition: transform 200ms ease; }
.club-home:hover span { transform: translateX(4px); }
.brand .top__club {
  margin-left: 0.5rem; font-size: 0.5625rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: lowercase;
  color: var(--brass); opacity: 0.8; vertical-align: 0.35em;
}


/* ── метка клуба в правом краю шапки: один вид на всех витринах ── */
.top__nav, .top nav { margin-left: auto; }

/* club-mark: страховка от переполнения - фоновое слово шире экрана и на
   узких вьюпортах растягивало страницу вбок */
.club { position: relative; overflow: clip; }

/* ── общий знак клуба в шапке витрины ──
   один и тот же на всех шести: контур дома в языке хаба плюс подпись.
   Цвет берём у шапки через currentColor, поэтому знак одинаково живёт и
   на тёмных витринах, и на светлой «Скандик». Переход - в том же окне:
   клуб это один проект */
.club-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-left: clamp(0.8rem, 1.6vw, 1.4rem);
  align-self: center;
  text-decoration: none;
  color: inherit;
  opacity: 0.55;
  white-space: nowrap;
  transition: opacity 220ms ease;
}
.club-tag:hover { opacity: 1; }
.club-tag__mark {
  width: 1.35em; height: 1.12em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.club-tag span {
  display: inline-flex; gap: 0.34em; align-items: baseline;
  font-size: 0.82rem; letter-spacing: 0.06em; text-transform: lowercase;
}
.club-tag span i { font-style: normal; opacity: 0.72; }
@media (max-width: 700px) { .club-tag span { display: none; } .club-tag__mark { width: 1.6em; height: 1.35em; } }

/* ── карточка участника целиком кликабельна ──
   ссылка стоит на display:contents, чтобы не ломать сетку карточки, но
   такой элемент не создаёт своего блока: не было ни курсора-руки, ни
   подсветки, карточка выглядела мёртвой. Растягиваем область клика
   псевдоэлементом на всю карточку и даём внятный отклик */
.chain__i { position: relative; }
.chain__link { display: contents; color: inherit; text-decoration: none; }
.chain__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 240ms ease, background-color 240ms ease;
}
.chain__i:hover .chain__link::after {
  border-color: currentColor;
  background: rgb(255 255 255 / 0.03);
}
.chain__link:focus-visible::after { border-color: currentColor; outline: 2px solid currentColor; outline-offset: 2px; }

/* подписи внутри схем были 7-9px - на телефоне нечитаемо */
@media (max-width: 760px) {
  svg text { font-size: 11px; }
  .s-scen__curtain { max-width: 100%; }
}
/* подписи в схемах умного дома задаются атрибутом font-size, поэтому нужен !important */
@media (max-width: 760px) { svg text, svg tspan { font-size: 11px !important; } }

/* ── мобильная доводка: пальцевые цели ──
   замер показал ссылки высотой 17-27px, точки схем 11x11 - в такое трудно
   попасть пальцем. Норма 44px, добираем отступами, чтобы не менять вид */
@media (max-width: 760px) {
  .clubbar a, .foot a, .foot__nav a, .contact a, .kontakt a,
  .chelovek__links a, .club-home, .sem__link a, .lead a {
    display: inline-block;
    padding-block: 0.55rem;
    min-height: 44px;
  }
  .club-tag {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .club-tag__mark { width: 1.7em; height: 1.45em; }
  /* поля у края: текст не должен касаться границы экрана */
  h1, h2, h3, p, li { padding-inline: 0; }
  section > h2, section > p, .poryadok__title, .poryadok__cap { padding-inline: 0.2rem; }
}

@media (max-width: 760px) {
  /* точки на схемах были 11x11 - пальцем не попасть */
  .s-scen__dot, .scheme__dot, [class*="__dot"] { min-width: 32px; min-height: 32px; }
  .wrap > h2, .wrap > p { padding-inline: 0.2rem; }
}
@media (max-width: 760px) {
  /* точки-подсказки на схеме были 11x11 - пальцем не попасть */
  .work__mark { min-width: 34px; min-height: 34px; }
}

/* ── пальцевые цели: точки схем были 34px, кнопка звука 35x32 ── */
@media (max-width: 760px) {
  .work__mark { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .club__link a, .contact__val a { min-height: 44px; display: inline-flex; align-items: center; }
  .sndbtn { min-width: 44px; min-height: 44px; justify-content: center; }
}

/* ── шапка и клубная планка на телефоне ──
   планка стала выше, когда её ссылку добрали до 44px, а шапка стояла
   фиксированно на 2.1rem от верха и налезала на неё на 29px.
   На узком экране шапка липкая: идёт следом за планкой и прилипает к верху ── */
@media (max-width: 760px) {
  .top { position: sticky; top: 0; }
}