/* Шрифты — fonts.css */

/* Tokens */
:root {
  --bg: #efeee5;
  --surface: #f6f5ef;
  --white: #ffffff;
  --glass: rgba(255, 255, 255, .72);
  --glass-line: rgba(255, 255, 255, .9);
  --ink: #161616;
  --ink-2: #3c3c42;
  --muted: #6e6969;
  --gray: #aaa5a5;
  --line: #d8d3d3;

  --coral: #f45843;       /* графика, пины, маркеры */
  --coral-deep: #e54833;  /* крупный текст ≥24px, фокус */
  --coral-ink: #c4371f;   /* мелкий коралловый текст */
  --orange: #f88f15;
  --orange-ink: #a65a00;
  --teal: #00999b;
  --teal-ink: #007a7c;
  --good: var(--teal-ink);
  --mid: var(--orange-ink);
  --low: var(--coral-ink);

  --serif: "TRY Vesterbro", Georgia, serif;
  --sans: "Graphik", Arial, sans-serif;
  --ease: cubic-bezier(.65, 0, .2, 1);
  /* Единица макета: 1px исходного макета шириной 1536. --cw — ширина видимой части. */
  --cw: 1536;
  --u: calc(min(100vw, 150vh) / 1536); /* на широких экранах сцена вписана в окно (см. «Прокрутка-история») */
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 3px; border-radius: 6px; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  border-radius: 999px; font-weight: 500; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2e2e2e; box-shadow: 0 10px 30px -10px rgba(22, 22, 22, .55); transform: translateY(-1px); }
.btn-sm { height: max(40px, calc(47 * var(--u))); padding: 0 max(18px, calc(29 * var(--u))); font-size: max(13px, calc(14 * var(--u))); }
.btn-lg { height: max(50px, calc(57 * var(--u))); padding: 0 max(24px, calc(33 * var(--u))); font-size: max(15px, calc(16 * var(--u))); }
.wide { width: 100%; }
.arrow {
  flex: none;
  width: 14px; height: 10px; display: inline-block; position: relative; transition: transform .2s;
  background: linear-gradient(currentColor, currentColor) 0 50% / 13px 1.3px no-repeat;
}
.arrow::after {
  content: ""; position: absolute; right: 1px; top: 50%; width: 7px; height: 7px;
  border-top: 1.3px solid currentColor; border-right: 1.3px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn:hover .arrow, .more:hover .arrow { transform: translateX(3px); }
/* ---------- Шапка — public/header.css (общая для всех страниц) ---------- */

/* ---------- Сцена ---------- */
.hero { position: relative; }
/* Первый экран занимает всё окно. Сцена заполняет его целиком (как cover, видимую часть считает fitScene в app.js),
   а текст и статистика вписываются целиком: их единица — меньшая из «ширина/1536» и «высота/1024». */
.stage {
  position: relative; width: 100%;
  height: 100vh; height: 100svh; min-height: 560px;
  container-type: size;
  overflow: hidden;
  --u: min(100cqw / 1536, 100cqh / 1024);
}
.scene {
  --cx: 0; --cy: 0; --cw: 1536; --ch: 1024;
  position: absolute; inset: 0; overflow: hidden;
  container-type: inline-size;
}
.stage[data-center="fitness"] .world { --hero: url("/assets/hero-fitness.jpg"); --hero2x: url("/assets/hero-fitness@2x.jpg"); }
.stage[data-center="fuel"] .world { --hero: url("/assets/hero-fuel.jpg"); --hero2x: url("/assets/hero-fuel@2x.jpg"); }
.stage[data-center="hotel"] .world { --hero: url("/assets/hero-hotel.jpg"); --hero2x: url("/assets/hero-hotel@2x.jpg"); }
/* слои в координатах исходного макета */
.world, .photo, .overlay {
  position: absolute;
  left: calc(var(--cx) / var(--cw) * -100%);
  top: calc(var(--cy) / var(--ch) * -100%);
  width: calc(1536 / var(--cw) * 100%);
  aspect-ratio: 1536 / 1024;
}
.world {
  --hero: url("/assets/hero.jpg"); --hero2x: url("/assets/hero@2x.jpg");
  background: var(--hero) center / cover no-repeat;
  background-image: image-set(var(--hero) 1x, var(--hero2x) 2x);
  transform-origin: 0 0;
  transition: transform 1.1s var(--ease);
  will-change: transform;
}
.world > *, .overlay > *, .net > *, .risks > * {
  --u: calc(100cqw / var(--cw));
  position: absolute;
  left: calc(var(--x) / 1536 * 100%);
  top: calc(var(--y) / 1024 * 100%);
}

.obj {
  width: calc(var(--w) / 1536 * 100%); height: calc(var(--h) / 1024 * 100%);
  border-radius: 24px; z-index: 2;
}
.obj:focus-visible { outline-offset: -4px; }

.chip {
  display: inline-flex; align-items: center; gap: calc(12 * var(--u));
  height: calc(41 * var(--u)); padding: 0 calc(16 * var(--u));
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: calc(6 * var(--u));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: calc(12.5 * var(--u)); font-weight: 500; white-space: nowrap; color: var(--ink);
  z-index: 3; cursor: pointer;
  box-shadow: 0 6px 18px -10px rgba(60, 30, 20, .35);
  transition: transform .25s ease, background .25s ease, color .25s ease, opacity .4s ease;
}
.chip svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(calc(-4 * var(--u))); }

/* аудитор с планшетом: точка (--x, --y) — ступни; .left — идёт влево, .walking — шагает.
   assets/walker.png — два кадра походки рядом: «шаг» и «ноги вместе» (в нём же стоит). */
.walker {
  width: calc(15.9 * var(--u)); height: calc(34 * var(--u)); z-index: 2; pointer-events: none;
  transform: translate(-50%, -100%); transition: opacity .4s ease;
}
.walker::after { /* тень под ногами */
  content: ""; position: absolute; left: -15%; right: -15%; bottom: -6%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 25, 15, .35), rgba(40, 25, 15, 0));
}
.walker i {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; transform-origin: 50% 100%;
  background: url("/assets/walker.png") 100% 0 / 200% 100% no-repeat;
}
.walker.left i { transform: scaleX(-1); }
.walker.walking i { animation: walk-steps .56s steps(1) infinite; }
@keyframes walk-steps { 0% { background-position: 0 0; translate: 0 0; } 50% { background-position: 100% 0; translate: 0 -2%; } }
.stage.detail .walker { opacity: 0; }

.photo { background: center / cover no-repeat; opacity: 0; transition: opacity .7s ease .5s; pointer-events: none; }
.dof, .veil { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease); }
.dof {
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  -webkit-mask-image: radial-gradient(ellipse 34% 40% at var(--fx, 66%) var(--fy, 58%), transparent 55%, #000 100%);
  mask-image: radial-gradient(ellipse 34% 40% at var(--fx, 66%) var(--fy, 58%), transparent 55%, #000 100%);
}
.veil {
  background:
    linear-gradient(90deg, rgba(239, 238, 229, .9) 0, rgba(239, 238, 229, .7) 30%, rgba(239, 238, 229, 0) 46%),
    linear-gradient(0deg, rgba(239, 238, 229, .85) 0, rgba(239, 238, 229, 0) 18%);
}
.overlay { pointer-events: none; z-index: 4; }

.photo { transform-origin: 0 0; }
.cta { transition: opacity .4s ease; }
.cta .btn { flex: none; }
/* Закрывающая фраза поверх детального рендера */
.stage.is-final .photo { filter: blur(calc(14 * var(--u))) saturate(.7); transition: filter .9s var(--ease); }
.stage.is-final .overlay, .stage.is-final .stem { opacity: 0; }
.tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease);
  background: linear-gradient(90deg, rgba(239, 238, 229, .92) 0, rgba(239, 238, 229, .55) 45%, rgba(239, 238, 229, .2) 100%); }
.stage.is-final .tint { opacity: 1; }
.finale {
  position: absolute; z-index: 7; left: calc(63 * var(--u)); right: calc(63 * var(--u)); top: 50%; translate: 0 -50%;
  pointer-events: none; opacity: 0; transform: translateY(calc(24 * var(--u)));
  transition: opacity .7s ease, transform .9s var(--ease);
}
.finale p { margin: 0; max-width: calc(1180 * var(--u)); font-family: var(--serif); font-weight: 500; font-size: calc(96 * var(--u)); line-height: 1.04; letter-spacing: -.045em; }
.finale em { font-style: normal; color: var(--coral-deep); }
.stage.is-final .finale { opacity: 1; transform: none; transition-delay: .2s; }

/* ---------- Детализация объекта ---------- */
.stage.detail .chip, .stage.detail .obj { opacity: 0; pointer-events: none; }
.stage.detail .dof, .stage.detail .veil { opacity: 1; }
.stage.detail.has-photo .photo { opacity: 1; }
.stage.detail.has-photo .dof { opacity: 0; }
/* на рендере свои линии и маркеры — наши прячем, карточки делаем плотнее, чтобы скрыть подложку */
.stage.detail.has-photo .stem { opacity: 0; transition: opacity .3s; }
.stage.detail.has-photo .stem.own { opacity: 1; }   /* у рендера без своих меток лучи рисуем мы */
.stage.detail.has-photo .dcard { background: rgba(255, 255, 255, .9); }

.dcard {
  width: calc(var(--w, 240) * var(--u)); min-height: calc(var(--h, 0) * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u));
  background: rgba(255, 255, 255, .82); border: 1px solid rgba(255, 255, 255, .95);
  border-radius: calc(10 * var(--u));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -24px rgba(60, 25, 15, .45);
  font-size: calc(12.5 * var(--u)); color: var(--ink);
  opacity: 0; transform: translateY(calc(10 * var(--u)));
  transition: opacity .5s ease, transform .5s var(--ease);
  transition-delay: calc(.55s + var(--i) * .12s);
  pointer-events: none; /* вне детализации карточки невидимы и не должны ловить курсор над объектами */
}
.dcard::before { /* красный уголок, как на макете */
  content: ""; position: absolute; left: -1px; top: -1px; width: calc(46 * var(--u)); height: calc(46 * var(--u));
  border-left: 2px solid var(--coral); border-top: 2px solid var(--coral); border-top-left-radius: calc(10 * var(--u));
  opacity: .9;
}
.dcard h3 {
  margin: 0 0 calc(12 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u));
  font-size: calc(13.5 * var(--u)); font-weight: 600;
}
.dcard h3 svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); fill: none; stroke: var(--coral); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.dcard h3 .go {
  margin-left: auto; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; background: rgba(22, 22, 22, .06); transition: background .2s;
}
.dcard:hover h3 .go { background: rgba(244, 88, 67, .14); }
.dcard h3 .go .arrow { transform: scale(.7); }
.dcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(9 * var(--u)); }
.dcard li { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.dcard li svg { flex: none; width: calc(15 * var(--u)); height: calc(15 * var(--u)); fill: none; stroke: var(--coral); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.stem {
  width: 0; height: calc(var(--h) / 1024 * 100%);
  border-left: 1.5px solid var(--coral);
  transform-origin: top; transform: scaleY(0);
  transition: transform .45s var(--ease); transition-delay: calc(.75s + var(--i) * .12s);
}
.stem::after {
  content: ""; position: absolute; left: -1px; bottom: 0; translate: -50% 50%;
  width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%;
  background: #fff; border: calc(3.5 * var(--u)) solid var(--coral);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(244, 88, 67, .5), 0 0 calc(18 * var(--u)) calc(4 * var(--u)) rgba(244, 88, 67, .45); }
  100% { box-shadow: 0 0 0 calc(16 * var(--u)) rgba(244, 88, 67, 0), 0 0 calc(18 * var(--u)) calc(4 * var(--u)) rgba(244, 88, 67, .45); }
}
.stage.detail .dcard { opacity: 1; transform: none; pointer-events: auto; }
.stage.detail .stem { transform: none; }

/* результат проверки в карточке */
.dcard .score {
  margin-left: auto; font-family: var(--serif); font-weight: 500; font-size: calc(20 * var(--u)); line-height: 1; letter-spacing: -.02em;
}
.dcard .score small { font-family: var(--sans); font-size: .5em; color: var(--muted); letter-spacing: 0; margin-left: 1px; }
.score.low { color: var(--low); }
.score.mid { color: var(--mid); }
.score.good { color: var(--good); }
.dcard ul { gap: calc(7 * var(--u)); }
.dcard li.ok svg { stroke: var(--good); }
.dcard li.bad { color: var(--coral-ink); }
.dcard li.bad svg { stroke: var(--coral); }
.fix-btn {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(11 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: 999px;
  background: var(--ink); color: #fff; font-size: calc(12 * var(--u)); font-weight: 500;
  transition: background .2s;
}
.fix-btn .arrow { transform: scale(.75); }
.fix-btn:hover { background: var(--coral-ink); }
.fix-btn:hover .arrow { transform: scale(.75) translateX(3px); }

/* ---------- Курсор-сканер ---------- */
.scanner {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  opacity: 0; transition: opacity .2s ease;
}
.scanner.on { opacity: 1; }
.scanner .ring {
  position: absolute; left: 0; top: 0; width: 38px; height: 38px; translate: -50% -50%;
  display: grid; place-items: center; transition: scale .3s var(--ease);
}
.scanner .ring svg { position: absolute; inset: 0; rotate: -90deg; }
.scanner .ring circle { fill: none; stroke-width: 2; }
.scanner .track { stroke: rgba(255, 255, 255, .85); }
.scanner .prog { stroke: var(--coral); stroke-dasharray: 107; stroke-dashoffset: 107; stroke-linecap: round; }
.scanner.lock .prog { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dwell, .7s) linear; }
.scanner.lock .ring { scale: 1.25; }
.scanner .ring i {
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px rgba(244, 88, 67, .55), 0 0 16px 6px rgba(244, 88, 67, .55);
}
.scanner .beam {
  position: absolute; left: 0; top: 10px; width: 190px; height: 190px; translate: -50% 0;
  background: linear-gradient(180deg, rgba(255, 205, 195, .6), rgba(255, 205, 195, 0) 92%);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen; filter: blur(1.5px);
}
.scanner .label {
  position: absolute; left: 32px; top: -34px;
  display: flex; align-items: center; gap: 16px;
  width: 236px; min-height: 68px; padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 8px;
  background: rgba(60, 35, 28, .26); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 13px; line-height: 1.5;
}
.scanner .label svg { flex: none; opacity: .9; }
@media (hover: hover) and (pointer: fine) {
  .scene, .scene .obj, .scene .chip { cursor: none; }
  .stage.detail .scene { cursor: default; }
}

/* ---------- Текст ---------- */
.copy {
  position: absolute; z-index: 5;
  left: calc(63 * var(--u)); top: calc(139 * var(--u));
  width: calc(620 * var(--u));
  display: grid; pointer-events: none;
}
.copy-main, .copy-detail { grid-area: 1 / 1; transition: opacity .5s ease, transform .6s var(--ease); }
.copy-detail { opacity: 0; transform: translateY(14px); }
.stage.detail .copy-main { opacity: 0; transform: translateY(-14px); }
.stage.detail .copy-detail { opacity: 1; transform: none; transition-delay: .25s; }
.copy .cta, .copy .cta button, .stage.detail .copy-detail .back { pointer-events: auto; }
.eyebrow {
  margin: 0; text-transform: uppercase; letter-spacing: .32em; font-weight: 500;
  font-size: max(10px, calc(11.5 * var(--u))); color: var(--muted);
  display: flex; align-items: center; gap: 14px; min-height: 1.6em;
}
.back {
  pointer-events: none; display: grid; place-items: center; letter-spacing: 0;
  width: 30px; height: 30px; margin: -8px 0 -8px -4px; border-radius: 50%;
  font-size: 15px; color: var(--ink); background: rgba(255, 255, 255, .6); border: 1px solid rgba(22, 22, 22, .12);
  transition: background .2s;
}
.back:hover { background: #fff; }
h1, .h1 {
  margin: calc(10 * var(--u)) 0 0; font-family: var(--serif); font-weight: 500;
  font-size: calc(76 * var(--u)); line-height: 1.08; letter-spacing: -.03em; white-space: nowrap;
}
h1 span, h1 em, .h1 span, .h1 em { display: block; }
h1 em, .h1 em { font-style: normal; color: var(--coral-deep); }
.copy-detail .h1 { font-size: calc(84 * var(--u)); line-height: 1.0; margin-top: calc(18 * var(--u)); }
.lead {
  margin: calc(22 * var(--u)) 0 0; max-width: calc(450 * var(--u));
  font-size: max(14px, calc(19 * var(--u))); line-height: 1.5; color: var(--ink-2);
}
.copy-detail .lead { max-width: calc(360 * var(--u)); font-size: max(14px, calc(18 * var(--u))); }
.cta {
  grid-area: 2 / 1; display: flex; align-items: center; gap: calc(26 * var(--u)); margin-top: calc(24 * var(--u));
}
.cta .btn-lg { min-width: max(190px, calc(216 * var(--u))); }
.play { display: flex; align-items: center; gap: calc(22 * var(--u)); text-align: left; font-size: max(13px, calc(15.5 * var(--u))); line-height: 1.4; }
.play-ico {
  display: grid; place-items: center; flex: none;
  width: max(48px, calc(57 * var(--u))); height: max(48px, calc(57 * var(--u))); border-radius: 50%;
  background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .6);
  transition: background .2s, transform .2s;
}
.play:hover .play-ico { background: #fff; transform: scale(1.05); }

/* ---------- Цифры ---------- */
.stats {
  position: absolute; z-index: 5; margin: 0;
  left: calc(63 * var(--u)); bottom: calc(41 * var(--u));
  display: grid; grid-template-columns: calc(245 * var(--u)) calc(292 * var(--u)) calc(260 * var(--u)) calc(230 * var(--u));
}
.stats > div { padding: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(48 * var(--u)); border-left: 1px solid rgba(22, 22, 22, .28); }
.stats > div:first-child { padding-left: 0; border-left: 0; }
.stats dt { font-family: var(--serif); font-weight: 500; font-size: calc(39 * var(--u)); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats dd { margin: calc(8 * var(--u)) 0 0; font-size: max(12px, calc(15.5 * var(--u))); line-height: 1.35; color: var(--ink); max-width: calc(200 * var(--u)); }
.stats-main { transition: opacity .4s ease; }
.stage.detail .stats-main { opacity: 0; pointer-events: none; }

.stats-detail {
  position: absolute; z-index: 5;
  left: calc(63 * var(--u)); right: calc(61 * var(--u)); bottom: calc(41 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  padding-top: calc(22 * var(--u)); border-top: 1px solid rgba(22, 22, 22, .2);
  opacity: 0; pointer-events: none; transition: opacity .5s ease;
}
.stage.detail .stats-detail { opacity: 1; pointer-events: auto; transition-delay: .4s; }
.stats-detail .stats { position: static; grid-template-columns: calc(200 * var(--u)) calc(266 * var(--u)) calc(250 * var(--u)); }
.stats-detail .stats > div { padding-left: calc(53 * var(--u)); }
.stats-detail .stats > div:first-child { padding-left: 0; }
.more { display: flex; align-items: center; gap: calc(16 * var(--u)); font-size: max(13px, calc(14 * var(--u))); }
.more > span { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.more-ico {
  display: grid; place-items: center; width: max(40px, calc(48 * var(--u))); height: max(40px, calc(48 * var(--u)));
  border-radius: 50%; border: 1px solid rgba(22, 22, 22, .35); transition: background .2s, color .2s;
}
.more:hover .more-ico { background: var(--ink); color: #fff; }

.touch-hint, .dlist { display: none; }

/* ---------- Модалки ---------- */
.modal {
  width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px;
  background: var(--surface); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5);
}
.modal::backdrop { background: rgba(22, 22, 22, .45); backdrop-filter: blur(4px); }
.modal[open] { animation: pop .25s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }
.modal-close-form { position: absolute; right: 10px; top: 10px; margin: 0; }
.close { font-size: 26px; line-height: 1; color: var(--muted); }
.close:hover { background: var(--bg); }
.modal-body { padding: 36px 32px 32px; }
.modal h2 { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1.15; margin: 10px 0 22px; letter-spacing: -.01em; }
.modal p { color: var(--ink-2); line-height: 1.5; }
.modal .eyebrow { display: block; }
#leadForm { display: grid; gap: 14px; }
#leadForm label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
#leadForm input, #leadForm select {
  height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; font: inherit; font-size: 15px; color: var(--ink);
}
#leadForm input:focus, #leadForm select:focus { outline: none; border-color: var(--ink); }
#leadForm input[aria-invalid="true"] { border-color: var(--coral-ink); }
.form-error { margin: 0; color: var(--coral-ink) !important; font-size: 13px; }
#leadForm .btn { margin-top: 6px; }
.modal-video { width: min(860px, calc(100vw - 32px)); background: var(--ink); color: #fff; }
.modal-video .close { color: #fff; }
.modal-video .close:hover { background: rgba(255, 255, 255, .1); }
.video-ph { aspect-ratio: 16 / 9; display: grid; place-content: center; justify-items: center; gap: 14px; }
.video-ph p { margin: 0; color: rgba(255, 255, 255, .7); }
.play-ico.big { width: 72px; height: 72px; color: #fff; background: rgba(255, 255, 255, .12); }

/* окно «Как улучшить» */
.modal-fix { width: min(540px, calc(100vw - 32px)); }
.modal-fix .eyebrow { letter-spacing: .2em; }
.fix-label { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted) !important; }
.fix-found { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fix-found li { display: flex; gap: 10px; align-items: center; color: var(--coral-ink); font-weight: 500; }
.fix-found svg { width: 18px; height: 18px; fill: none; stroke: var(--coral); stroke-width: 1.6; stroke-linecap: round; flex: none; }
.fix-how { margin: 0 0 24px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.fix-how li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 10px; line-height: 1.5; color: var(--ink-2); }
.fix-how li::before {
  content: counter(s); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(244, 88, 67, .12); color: var(--coral-ink); font-weight: 600; font-size: 13px;
}
.modal-fix h2 { margin-bottom: 6px; }

/* ---------- Прокрутка-история (только широкие экраны) ---------- */
@media (min-width: 861px) {
  /* Сцена занимает всё окно (cover, см. fitScene в app.js), шапка закреплена (header.css). */
  .hero { height: calc(max(100svh, 560px) + 180vh); }
  .stage { position: sticky; top: 0; }
}

/* ---------- Узкие экраны ---------- */
@media (max-width: 860px) {

  .stage { height: auto; min-height: 0; container-type: inline-size; --u: calc(100cqw / 1536); display: flex; flex-direction: column; overflow: visible; }
  .copy, .stats, .stats-detail { position: static; width: auto; padding: 0 16px; }
  .copy { order: 1; padding-top: 28px; }
  /* сцена на телефоне ~530px в ширину — retina-версия hero не нужна */
  .world { background-image: var(--hero); }
  .scene { order: 2; position: relative; inset: auto; --cx: 450; --cy: 300; --cw: 1086; --ch: 600; aspect-ratio: 1086 / 600; margin-top: 24px; }
  .touch-hint { order: 3; display: block; margin: 10px 16px 0; font-size: 13px; color: var(--muted); }
  .dlist { order: 3; padding: 12px 16px 0; gap: 10px; }
  .stats-main { order: 4; padding-top: 24px; padding-bottom: 40px; }
  .stats-detail { order: 4; display: none; }
  .stage.detail .stats-main, .stage.detail .touch-hint { display: none; }
  .stage.detail .stats-detail { display: block; padding: 24px 16px 40px; border: 0; }
  .stage.detail .dlist { display: grid; }
  .overlay { display: none; }
  /* на рендере под карточками размытые пятна, а карточки здесь идут списком — оставляем «наезд камеры» */
  .stage.detail.has-photo .photo { opacity: 0; }
  .stage.detail.has-photo .dof { opacity: 1; }

  .eyebrow { font-size: 10px; letter-spacing: .24em; }
  h1, .h1, .copy-detail .h1 { font-size: clamp(38px, 11vw, 64px); margin-top: 12px; white-space: normal; }
  .lead, .copy-detail .lead { max-width: none; font-size: 16px; margin-top: 18px; }
  .cta { flex-wrap: wrap; gap: 16px 20px; margin-top: 24px; }
  .chip { height: 24px; padding: 0 8px; font-size: 10.5px; gap: 6px; border-radius: 5px; }
  .chip svg { width: 13px; height: 13px; }
  /* верх стройки и склада выше кадра мобильной сцены (--cy: 300) — подписи опускаем на сами здания */
  .chip[data-for="construction"] { --x: 1185 !important; --y: 318 !important; }
  .chip[data-for="warehouse"] { --y: 400 !important; }
  .chip-center { --y: 500 !important; }
  .stats-main { grid-template-columns: 1fr 1fr; gap: 22px 0; }
  .stats-detail .stats { grid-template-columns: repeat(3, 1fr); padding: 0; }
  .stats > div { padding: 0 0 0 16px !important; border-left: 1px solid rgba(22, 22, 22, .2) !important; }
  .stats-main > div:nth-child(odd), .stats-detail .stats > div:first-child { padding-left: 0 !important; border-left: 0 !important; }
  .stats dt { font-size: 32px; }
  .stats dd { font-size: 14px; max-width: none; }
  .more { margin-top: 22px; }

  .finale, .tint { display: none; }
  .footer { flex-wrap: wrap; gap: 16px; padding: 28px 16px; }
  .dcard { --u: 1px; position: relative; width: auto; min-height: 0; opacity: 1; transform: none; font-size: 13.5px; padding: 14px 16px; }
  .dcard h3 { font-size: 15px; }
  .dcard .score { font-size: 22px; }
  .fix-btn { font-size: 13px; padding: 8px 14px; margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* Кульминация без экрана сети: прячем тексты и цифры детализации */
.stage.is-final .copy-main, .stage.is-final .copy-detail, .stage.is-final .cta, .stage.is-final .stats-detail {
  opacity: 0 !important; pointer-events: none !important;
}