/* ВолгаПрофТепло, вариант B. Мир — ../DESIGN.md, сетка — ../../refs/GEOMETRY.md.
   Файл собирался слоями: ниже идут блоки в порядке правок, поздний перекрывает ранний.
   Действующие токены сетки и шрифта — в блоке «СЕТКА РЕФЕРЕНСА»; φ³ в ранних блоках перекрыт. */

@font-face { font-family: "Plex"; src: url(fonts/ibm-plex-sans-cyrillic-wght-normal.woff2) format("woff2"); font-weight: 100 700; font-display: block;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Plex"; src: url(fonts/ibm-plex-sans-latin-wght-normal.woff2) format("woff2"); font-weight: 100 700; font-display: block;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "JBMono"; src: url(fonts/jetbrains-mono-cyrillic-wght-normal.woff2) format("woff2"); font-weight: 100 800; font-display: block;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "JBMono"; src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2"); font-weight: 100 800; font-display: block;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@property --chill { syntax: '<number>'; inherits: false; initial-value: 0; }

:root {
  /* Палитра «Тепловизор» */
  --paper: #120B2E; --deep: #0B0720; --mid: #1C1348; --surface: #241A57; --surface-2: #33287A;
  --light: #F4EFFD; --hot: #FFD24A; --warm: #F2641E; --cold: #7FC4E8; --ok: #7CFFB0; --alarm: #FF4A3A;
  --ink: #F6F0FF; --ink-2: #CFC4EA; --muted: #A99CCB; --line: rgba(255, 255, 255, .12);
  --glass: rgba(14, 10, 38, .62);
  /* Ритм φ³ */
  --fs: 16px; --fs-xl: 4.236rem; --s1: 6px; --s2: 25px; --s3: 107px;
  --pad: clamp(16px, 3vw, 40px); --r: 10px;
  --sans: "Plex", "Segoe UI", system-ui, sans-serif;
  --mono: "JBMono", ui-monospace, Consolas, monospace;
  /* Кривые: выход — быстрый старт и мягкая посадка; пружина — лёгкий перелёт у того, что встаёт на место */
  --out: cubic-bezier(.16, 1, .3, 1);
  --in: cubic-bezier(.5, 0, .75, 0);
  --reveal: cubic-bezier(.77, 0, .175, 1);
  --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 20.5%, 1.043 24.4%, 1.035 28.4%, 1.007 36.8%, .997 45%, 1.001 63%, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; background: var(--paper); }
.tech-article { margin-top: 18px; }
.tech-article a { text-underline-offset: 5px; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font: 400 var(--fs)/1.6 var(--sans); }
h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2 { font-size: var(--fs-xl); line-height: 1.02; letter-spacing: -.04em; font-weight: 500; text-wrap: balance; }
h3 { font-size: var(--fs); font-weight: 600; line-height: 1.35; }
p { text-wrap: pretty; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--pad); }

/* ---------- Органы управления: одна форма, радиус 10, без градиентов и свечений ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; border: 0; border-radius: var(--r);
  background: var(--hot); color: #120B2E; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--out), transform .16s var(--out); }
.btn:hover { background: #FFE07A; }
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 40px; padding: 6px 16px; }
.link { font-weight: 500; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: text-decoration-thickness .2s; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- Шапка: та же сетка 61,8 / 38,2, что у первого экрана ---------- */
.top { position: relative; z-index: 5; border-bottom: 1px solid var(--line); }
.top-in { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); column-gap: var(--s2); align-items: center; min-height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; letter-spacing: -.01em; }
.logo-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--warm); color: #FFE9A0; }
.logo-name b { font-weight: 600; color: var(--hot); }
.top-right { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.nav { display: flex; gap: var(--s2); }
.nav a { color: var(--ink-2); text-decoration: none; transition: color .2s var(--out); }
.nav a:hover { color: #fff; }

/* ---------- Первый экран: заголовок и текст, ниже дом и телефон с пультом ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); column-gap: var(--s2); row-gap: var(--s2);
  align-items: end; padding-block: var(--s2); }
.hero h1 { grid-column: 1; }
.hero h1 em { font-style: normal; color: var(--hot); }
.hero-aside { grid-column: 2; }
.lead { color: var(--ink-2); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-top: var(--s2); }

.demo { grid-column: 1; align-self: stretch; display: flex; flex-direction: column; gap: var(--s1); }
/* Окно сцены: дом почти во всю колонку; фото больше окна и растворяется к краям, прямого среза нет. */
.demo-stage { position: relative; width: 100%; aspect-ratio: 1.4; container-type: inline-size; }
.stage { position: absolute; left: 50%; top: 0; width: calc(100cqw / .8); aspect-ratio: 3 / 2; translate: -50% -3.5%; container-type: inline-size;
  --fade-x: linear-gradient(90deg, transparent 3%, #000 15%, #000 86%, transparent 97%);
  --fade-y: linear-gradient(180deg, transparent 3%, #000 11%, #000 84%, transparent 94%);
  -webkit-mask-image: var(--fade-x), var(--fade-y); -webkit-mask-composite: source-in;
  mask-image: var(--fade-x), var(--fade-y); mask-composite: intersect; }
.photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: filter 1.4s var(--out); }
.demo[data-power="off"] .photo { filter: brightness(.38) saturate(.5); animation: flicker .9s steps(1) 1; }
/* Свет гаснет не сразу: лампы моргают, как при настоящем отключении. */
@keyframes flicker {
  0% { filter: none; } 12% { filter: brightness(.55) saturate(.7); } 22% { filter: none; }
  38% { filter: brightness(.3) saturate(.5); } 50% { filter: brightness(.9); } 64% { filter: brightness(.35) saturate(.5); } 100% { filter: brightness(.38) saturate(.5); }
}
.chill { --chill: 0; position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); pointer-events: none; transition: --chill .5s linear; }
.chill::before, .chill::after { content: ""; position: absolute; inset: 0; }
/* Холод цветом тепловизора: комната уходит в фиолетовый, потом темнеет в синий. */
.chill::before { background: #5A44D8; mix-blend-mode: color; opacity: calc(var(--chill) * .95); }
.chill::after { background: #0A1046; mix-blend-mode: multiply; opacity: calc(var(--chill) * .75); }
.room-boil { transition: --chill 4s linear; }
.demo[data-heating="off"] .room-boil { --chill: .55; }
.puddle { position: absolute; left: 62.6%; top: 79.4%; width: 11.2%; opacity: 0; transform: scale(.35, .2); transform-origin: 70% 60%; filter: blur(4px);
  transition: opacity .5s var(--out), transform .4s var(--in), filter .4s; pointer-events: none; }
.demo[data-leak="on"] .puddle { opacity: .92; transform: none; filter: none; transition: opacity .9s var(--out), transform 2.6s var(--out), filter 1s var(--out); }
/* Светодиоды приборов на фото светятся, как настоящие */
.boiler-lamp { position: absolute; left: 66.5%; top: 68.8%; width: 1.4%; height: 1%; border-radius: 2px; background: #7CE3FF; box-shadow: 0 0 8px 2px rgba(124, 227, 255, .6); }
.demo[data-boiler="off"] .boiler-lamp { background: var(--alarm); box-shadow: 0 0 10px 3px rgba(255, 74, 58, .75); animation: blink 1s steps(1) infinite; }
.zont-led { position: absolute; left: 71.5%; top: 65.7%; width: .5%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: var(--ok); box-shadow: 0 0 6px 2px rgba(124, 255, 176, .6); }
.demo[data-alarm="on"] .zont-led { background: var(--alarm); box-shadow: 0 0 8px 3px rgba(255, 74, 58, .8); animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }

.chip-t { position: absolute; left: var(--x); top: var(--y); margin: 0; display: flex; flex-direction: column; padding: 5px 10px 6px; border-radius: 9px;
  background: var(--glass); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .16); color: #fff; line-height: 1.15; font-size: 13px; }
.chip-t span { color: #CFC4EA; }
.chip-t b { font-size: clamp(16px, 2.4cqw, 26px); font-weight: 500; letter-spacing: -.02em; transition: color .4s; }
.chip-t b.is-cold { color: #C4B5FF; }
.chip-t b.is-alarm { color: var(--cold); }
.chip-t:has(b.is-alarm) { border-color: var(--cold); }
.chip-sm b { font-size: clamp(14px, 1.8cqw, 20px); }
.tag-zont { position: absolute; left: var(--x); top: var(--y); margin: 0; translate: -50% calc(-100% - 10px); padding: 2px 7px; border-radius: 5px;
  background: var(--hot); color: #120B2E; font: 700 12px/1.4 var(--sans); letter-spacing: .06em; }
.tag-zont::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 10px; background: var(--hot); }

/* Правая колонка: пульт аварий и телефон рядом, одной группой */
.hero-phone { grid-column: 2; align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: var(--s2); align-items: center; }
.demo-ctl { display: grid; gap: var(--s1); padding: var(--s2) 18px 18px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(255, 255, 255, .08); }
.ctl-title { font-weight: 600; }
.ctl-sub { margin-bottom: var(--s1); color: var(--ink-2); line-height: 1.4; }
.tgl, .reset { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: var(--r); cursor: pointer;
  font-weight: 500; transition: background-color .2s var(--out), color .2s, border-color .2s, transform .16s var(--out); }
.tgl { border: 1px solid transparent; background: var(--surface-2); color: #fff; }
.tgl:hover { background: #43379A; }
.tgl[aria-pressed="true"] { background: var(--cold); color: #0A1430; font-weight: 600; }
.reset { border: 1px solid var(--hot); background: var(--hot); color: #120B2E; font-weight: 600; }
.reset:disabled { border-color: rgba(255, 255, 255, .14); background: transparent; color: var(--muted); cursor: default; }
.tgl:active, .reset:active:not(:disabled) { transform: scale(.96); }

/* ---------- Телефон: фото корпуса, экран сверстан колонкой, ничего не наезжает ---------- */
.device { position: relative; width: 100%; aspect-ratio: 656 / 1297; }
.device-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen { position: absolute; left: 2.74%; top: .85%; width: 94.36%; height: 98.07%; border-radius: 12% / 6.2%; overflow: hidden; container-type: inline-size;
  display: flex; flex-direction: column; padding: 16% 5% 6%; gap: 4cqw;
  background: radial-gradient(90% 45% at 50% 0%, #1D1A4A, transparent 75%), #0B0A1F; color: #fff; font-size: 5.6cqw; line-height: 1.3; }
.sb { position: absolute; left: 9%; right: 8%; top: 4%; display: flex; justify-content: space-between; align-items: center; font-size: 5.4cqw; font-weight: 600; }
.sb svg { width: 16cqw; height: auto; }
.lock { flex: none; text-align: center; transform-origin: 50% 0; transition: transform .6s var(--out); }
.lock-date { font-size: 6.2cqw; color: rgba(255, 255, 255, .8); }
.lock-time { margin-top: 1cqw; font-size: 22cqw; font-weight: 300; line-height: 1.05; letter-spacing: -.04em; }
.phone-state { display: inline-block; margin-top: 2cqw; padding: 1cqw 3.6cqw; border-radius: 99px; font-size: 5.8cqw; font-weight: 600;
  background: rgba(124, 255, 176, .16); color: var(--ok); transition: background-color .4s, color .4s; }
.phone-state.is-alarm { background: var(--alarm); color: #fff; }
.screen.has-notes .lock { transform: scale(.86); }
.feed { flex: 1; min-height: 0; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2.6cqw; overflow: hidden; }
.feed-empty { display: grid; gap: 3cqw; margin-top: 7cqw; padding: 5cqw; border: 1px solid rgba(255, 255, 255, .18); border-radius: 5cqw;
  background: rgba(98, 84, 153, .22); color: #D9D0F0; font-size: max(11px, 5.5cqw); line-height: 1.25; }
.feed-empty span:first-child { color: #fff; font-weight: 600; }
.feed-empty span:not(:first-child) { display: flex; justify-content: space-between; gap: 2cqw; }
.feed-empty b { color: #fff; font-family: var(--mono); font-weight: 500; }
/* Уведомления контрастные: белая карточка, звонок голубой. Им надо перебить фото. */
.note { flex: none; padding: 3.2cqw 4cqw 3.6cqw; border-radius: 6cqw; background: #fff; color: #0B0F24; font-size: 5.4cqw; line-height: 1.28; }
.note-top { display: flex; justify-content: space-between; gap: 2cqw; margin-bottom: 1cqw; font-size: 4.6cqw; color: #4A4F66; }
.note-top b { color: #0B0F24; font-weight: 700; }
.note.is-call { background: var(--cold); color: #06122E; }
.note.is-call .note-top, .note.is-call .note-top b { color: #06122E; }
.note.is-ok .note-top b { color: #0E7A3E; }
/* Входящий звонок раскрывается из «островка» камеры */
.call { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-top: 22%; text-align: center;
  background: radial-gradient(90% 55% at 50% 38%, #1E5A9A, #0A1640 70%); color: #fff;
  clip-path: inset(3.4% 32% 92% 32% round 8cqw); opacity: 0; visibility: hidden;
  transition: clip-path .45s var(--in), opacity .3s .15s, visibility 0s .45s; }
.call.is-on { clip-path: inset(0 0 0 0 round 12cqw); opacity: 1; visibility: visible; transition: clip-path .7s var(--spring), opacity .2s, visibility 0s; }
.call-who { font-size: 5.4cqw; color: rgba(255, 255, 255, .75); }
.call-what { margin-top: 1.5cqw; padding: 0 6cqw; font-size: 9cqw; font-weight: 600; line-height: 1.1; }
.call-ring { position: relative; display: grid; place-items: center; width: 30cqw; aspect-ratio: 1; margin-top: 12cqw; }
.call-ring b { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--cold); color: #06122E; font-size: 12cqw; font-weight: 700; }
.call-ring i { position: absolute; inset: 0; border-radius: 50%; border: .8cqw solid var(--cold); opacity: 0; }
.call.is-on .call-ring i { animation: ring 1.3s var(--out) infinite; }
.call.is-on .call-ring i + i { animation-delay: .45s; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.call-sub { margin-top: 8cqw; font-size: 5cqw; color: rgba(255, 255, 255, .75); }
.call-btns { position: absolute; left: 14%; right: 14%; bottom: 9%; display: flex; justify-content: space-between; }
.call-btns i { width: 17cqw; aspect-ratio: 1; border-radius: 50%; }
.call-btns .no { background: var(--alarm); }
.call-btns .yes { background: #34C759; }

/* ---------- Разделы: чередование тонов в палитре сайта ---------- */
.band { padding-block: var(--s3); background: var(--tone, var(--paper)); color: var(--ink); }
.tone-light { --tone: var(--light); --ink: #120B2E; --ink-2: #3D3163; --muted: #5E527F; --line: rgba(18, 11, 46, .14); }
.tone-hot { --tone: var(--hot); --ink: #120B2E; --ink-2: #33230A; --muted: #5C4513; --line: rgba(18, 11, 46, .22); }
.tone-mid { --tone: var(--mid); }
.tone-deep { --tone: var(--deep); }
.tone-dark { --tone: var(--paper); }
.sec-head { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); column-gap: var(--s2); row-gap: var(--s2); align-items: end; margin-bottom: calc(var(--s3) / 2.618); }
.sec-head p { color: var(--ink-2); }

/* Три преимущества: карточки одной высоты, у каждой картинка одного размера */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--s2); }
.why-card { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s2); border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgba(18, 11, 46, .06), 0 16px 32px -24px rgba(18, 11, 46, .5); }
.why-card h3 { margin-top: var(--s2); color: var(--ink); }
.why-card p { color: var(--ink-2); }
.why-pic, .why-notes { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; }
.why-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.why-pic-tall img { object-position: 50% 45%; }
.chip-static { left: 12px; top: 12px; }
.why-notes { list-style: none; padding: 12px; display: flex; flex-direction: column; justify-content: center; gap: var(--s1); background: var(--paper); }
.note-mini { display: block; padding: 8px 12px 9px; border-radius: 12px; background: #fff; color: #120B2E; font-size: 14px; line-height: 1.35; }
.note-mini b { display: block; font-weight: 600; color: #5E527F; }
.note-mini.is-call { background: var(--cold); }
.note-mini.is-call b { color: #0A1430; }

/* Техника: на компьютере ряд из 4, на телефоне листается пальцем */
.tech { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--s2); }
.tech-card { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s2); border-radius: 16px; background: var(--surface); }
.tech-pic { display: grid; place-items: center; height: 180px; margin-bottom: var(--s2); }
.tech-pic img { max-height: 170px; width: auto; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.tech-card p { color: var(--ink-2); }

/* Конструктор щита */
.shield-grid { display: grid; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); column-gap: var(--s3); align-items: start; }
.shield-left { display: flex; flex-direction: column; gap: var(--s2); }
.cfg fieldset { border: 0; margin: 0; padding: 0 0 var(--s2); }
.cfg fieldset + fieldset { padding-top: var(--s2); border-top: 1px solid var(--line); }
.cfg legend { float: left; width: 100%; padding: 0; margin-bottom: 12px; color: var(--muted); }
.cfg fieldset > :not(legend) { clear: both; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip input, .check input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border-radius: var(--r); border: 1px solid transparent; background: var(--surface); cursor: pointer;
  transition: background-color .2s var(--out), color .2s, transform .16s var(--out); }
.chip span:hover { background: var(--surface-2); }
.chip span:active { transform: scale(.96); }
.chip input:checked + span { background: #fff; color: #120B2E; font-weight: 600; }
.chip input:focus-visible + span, .check input:focus-visible + span { outline: 2px solid var(--hot); outline-offset: 2px; }
.step-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 6px; }
.step-name small { display: block; color: var(--muted); font-size: var(--fs); }
.stepper { display: inline-grid; grid-template-columns: 44px 44px 44px; align-items: center; border-radius: var(--r); background: var(--surface); }
.stepper button { height: 44px; border: 0; border-radius: var(--r); background: none; color: #fff; font-size: 18px; cursor: pointer; transition: background-color .2s, transform .16s var(--out); }
.stepper button:hover:not(:disabled) { background: var(--surface-2); }
.stepper button:active:not(:disabled) { transform: scale(.94); }
.stepper button:disabled { color: rgba(255, 255, 255, .25); cursor: default; }
.stepper output { text-align: center; font: 500 16px var(--mono); }
.check { position: relative; display: block; cursor: pointer; }
.check span { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.check span::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .35); background: transparent center / 14px no-repeat;
  transition: background-color .2s, border-color .2s; }
.check input:checked + span::before { background-color: #fff; border-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.2 5.7 10.3 11.5 3.8' fill='none' stroke='%23120B2E' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.spec-box { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); padding-top: var(--s2); border-top: 1px solid var(--line); }
.spec-title { color: var(--muted); }
.spec { list-style: none; padding: 0; width: 100%; margin-bottom: var(--s2); }
.spec li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.spec li span:last-child { font-family: var(--mono); color: var(--ink-2); }
.build-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s1) var(--s2); margin-bottom: var(--s2); }
.build-title { font-weight: 600; }
.build-ctl { color: var(--muted); }
.build-ctl b { color: var(--hot); font-weight: 500; }
.build-note { margin-top: var(--s2); color: var(--muted); max-width: 60ch; }

/* Щит: светлый пластиковый корпус, рейки, кабель-каналы, фото модулей */
.cab-frame { container-type: inline-size; }
.cab { --m: min(42px, calc((100cqw - 36px) / 12)); view-transition-name: cab; display: flex; flex-direction: column; width: 100%; padding: 22px 18px 18px;
  border: 1px solid #9EA2A7; border-radius: 12px; background: linear-gradient(180deg, #E4E5E7, #D3D5D8); color: #25282C;
  box-shadow: inset 0 0 0 6px #ECEDEF, inset 0 0 0 7px #C3C6CA, inset 0 10px 24px rgba(0, 0, 0, .18), 0 18px 24px -14px rgba(0, 0, 0, .8); }
.rail { position: relative; display: flex; align-items: center; min-height: calc(var(--m) * 4.9); padding-bottom: 20px; }
.rail::before { content: ""; position: absolute; left: -8px; right: -8px; top: calc(50% - 10px); height: calc(var(--m) * 1.35); translate: 0 -50%;
  background: var(--rail-image, url(img/mods/rail.webp)) center / 100% 100% no-repeat; }
.mod { position: relative; z-index: 1; width: calc(var(--m) * var(--w)); display: flex; flex-direction: column; align-items: center; }
.mod img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .28)); }
.mod-tag { margin-top: 4px; padding: 1px 5px; border-radius: 2px; background: #fff; border: 1px solid #C9CBCE; color: #25282C; font: 600 12px/1.2 var(--mono); white-space: nowrap; }
.duct { height: calc(var(--m) * 1.6); margin: 4px -8px 10px; background: var(--duct-image, url(img/mods/duct.webp)) center / 100% 100% no-repeat; }
.terms { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; padding-top: 10px; view-transition-name: terms; background: var(--rail-image, url(img/mods/rail.webp)) center 16px / 100% 20px no-repeat; }
.term { width: calc(var(--m) * .36); height: calc(var(--m) * 1.25); border: 1px solid #8E9296; border-radius: 2px;
  background: radial-gradient(circle at 50% 22%, #6D7176 0 18%, transparent 20%), #A2A6AB; }
.term--n { background: radial-gradient(circle at 50% 22%, #6D7176 0 18%, transparent 20%), #4674B8; }
.term--pe { background: radial-gradient(circle at 50% 22%, #6D7176 0 18%, transparent 20%), linear-gradient(90deg, #E5C93A 0 45%, #3E9A4A 45% 100%); }
.terms-cap { display: block; margin-top: 8px; font: 400 13px var(--mono); color: #4D5156; }
.door-panel { align-self: flex-end; display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 400 13px var(--mono); color: #4D5156; view-transition-name: door; }
.door-panel i { width: 44px; height: 30px; border: 1.5px solid #25282C; border-radius: 3px; background: linear-gradient(#2A2D31, #2A2D31) center 5px / 30px 10px no-repeat #fff; }
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: var(--spring); }
::view-transition-new(*):only-child { animation: snap-in .6s var(--spring) both; }
::view-transition-old(*):only-child { animation: snap-out .3s var(--in) both; }
@keyframes snap-in { from { opacity: 0; transform: translateY(-18px) scale(.94); filter: blur(4px); } }
@keyframes snap-out { to { opacity: 0; transform: translateY(8px) scale(.97); filter: blur(3px); } }

/* Три шага на тёплом фоне */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--s2); }
.steps li { position: relative; display: flex; flex-direction: column; gap: var(--s1); padding-top: var(--s2); }
.steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); transform-origin: 0 50%;
  transition: transform 1.2s var(--out); transition-delay: calc(var(--i, 0) * 120ms + .2s); }
.step-n { color: var(--muted); margin-bottom: var(--s2); }
.steps p { color: var(--ink-2); }

/* Заявка: форма и рядом собранный щит */
.order-grid { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); column-gap: var(--s3); row-gap: var(--s2); align-items: start; }
.form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.field { display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); }
.field-wide { grid-column: 1 / -1; }
.field input, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid transparent; border-radius: var(--r); background: var(--surface); color: #fff; font-size: 16px;
  transition: border-color .2s, background-color .2s; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:hover, .field textarea:hover { background: #2B2064; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--hot); }
.field input::placeholder, .field textarea::placeholder { color: #8F83B5; }
.field input[aria-invalid="true"] { border-color: var(--cold); }
.err { font-style: normal; color: var(--cold); min-height: 1.6em; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.form-status { color: var(--ink-2); max-width: 44ch; }
.order-side { padding: var(--s2); border-radius: 16px; background: var(--surface); }
.kit-img { display: block; width: min(100%, 220px); height: auto; margin: var(--s2) 0; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); }
.kit { max-width: 60ch; margin-bottom: var(--s2); }

.foot { padding-block: var(--s2) var(--s3); background: var(--deep); color: var(--ink-2); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); padding-top: var(--s2); }
.foot b { color: #fff; }

/* ---------- Открытие страницы: скрытое состояние ставит скрипт в <head>, снимает класс .ready ---------- */
.hero > h1, .hero-aside { transition: opacity .9s var(--out), transform .9s var(--out), filter .9s var(--out); transition-delay: calc(var(--i, 0) * 110ms + 100ms); }
.js:not(.ready) .hero > h1, .js:not(.ready) .hero-aside { opacity: 0; transform: translateY(28px); filter: blur(10px); }
.demo-stage { clip-path: inset(-30% -45% -30% -45%); transition: clip-path 1.5s var(--reveal) .15s, transform 1.8s var(--out) .15s; }
.js:not(.ready) .demo-stage { clip-path: inset(130% -45% -30% -45%); transform: scale(1.05); }
.device { transition: transform 1.1s var(--spring) .6s, opacity .5s var(--out) .6s; }
.js:not(.ready) .device { opacity: 0; transform: translateY(70px) rotate(4deg); }
.demo-ctl { transition: opacity .8s var(--out) .9s, transform .8s var(--out) .9s; }
.js:not(.ready) .demo-ctl { opacity: 0; transform: translateY(12px); }
.stage .chip-t, .stage .tag-zont { transition: opacity .6s var(--out), transform .7s var(--spring), filter .6s var(--out), border-color .4s;
  transition-delay: calc(1.1s + var(--i, 0) * 80ms), calc(1.1s + var(--i, 0) * 80ms), calc(1.1s + var(--i, 0) * 80ms), 0s; }
.js:not(.ready) .stage .chip-t, .js:not(.ready) .stage .tag-zont { opacity: 0; transform: scale(.9) translateY(8px); filter: blur(6px); }

/* Разделы ниже: прокрутка только запускает, длительность своя */
.js:not(.rv-off) .reveal:not(.in) { opacity: 0; transform: translateY(32px); filter: blur(8px); }
.js .reveal { transition: opacity .9s var(--out), transform 1.1s var(--spring), filter .9s var(--out); transition-delay: calc(var(--i, 0) * 90ms); }
.js:not(.rv-off) .steps li:not(.in)::before { transform: scaleX(0); }

/* ---------- Планшет ---------- */
@media (max-width: 1080px) {
  .top-in { grid-template-columns: auto 1fr; }
  .top-right { justify-content: flex-end; }
  .hero { grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); }
  .hero h1, .hero-aside { grid-column: 1 / -1; }
  .hero-phone { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .device { width: min(230px, 100%); order: -1; }
  .why, .tech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shield-grid, .order-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); }
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Телефон ---------- */
@media (max-width: 720px) {
  :root { --fs-xl: 2.618rem; --s3: 66px; }
  .nav { display: none; }
  .hero { display: flex; flex-direction: column; align-items: stretch; }
  .demo-stage { margin-inline: calc(var(--pad) * -1); width: calc(100% + var(--pad) * 2); aspect-ratio: 1.25; }
  .stage { width: calc(100cqw / .74); }
  .chip-t { font-size: 11px; padding: 3px 7px 4px; border-radius: 7px; }
  .chip-t b { font-size: 15px; }
  .chip-sm b { font-size: 13px; }
  .tag-zont { font-size: 11px; }
  .hero-phone { display: flex; flex-direction: column; align-items: stretch; }
  .demo-ctl { grid-template-columns: 1fr 1fr; }
  .ctl-title, .ctl-sub { grid-column: 1 / -1; }
  .device { order: 0; width: min(64vw, 250px); align-self: center; }
  .sec-head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s2); }
  .why, .steps, .form { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .tech { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; overflow: visible; margin-inline: 0; padding: 0; }
  .tech-pic { height: 140px; }
  .tech-pic img { max-height: 140px; }
  .step-n { margin-bottom: var(--s1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js:not(.ready) .hero > h1, .js:not(.ready) .hero-aside, .js:not(.ready) .demo-stage, .js:not(.ready) .device,
  .js:not(.ready) .demo-ctl, .js:not(.ready) .stage .chip-t, .js:not(.ready) .stage .tag-zont { opacity: 1; transform: none; filter: none; clip-path: none; }
  .demo[data-power="off"] .photo, .boiler-lamp, .zont-led, .call.is-on .call-ring i { animation: none !important; }
  .chill, .room-boil { transition: none; }
  ::view-transition-group(*), ::view-transition-new(*), ::view-transition-old(*) { animation: none !important; }
}

/* Метка на фото внутри карточки — всегда белая, правило абзацев карточки её не перекрашивает */
.why-card .chip-t { color: #fff; }
/* Когда пришли уведомления, лента поднимается к уменьшенным часам */
.feed { transition: transform .6s var(--out); }
.screen.has-notes .feed { transform: translateY(-9cqw); }

/* ==========================================================================
   СЕТКА РЕФЕРЕНСА (refs/GEOMETRY.md, решение владельца 25.09.2026). Заменяет ритм φ³.
   Поля 2,08 %, 12 колонок с зазором 1,3 %, ряды блоков через 2,6 %, скругление 2,4 %.
   Шрифт как в референсе: 43 заголовок экрана, 35 заголовок раздела, 38 крупные числа,
   21 названия карточек, 19 текст, 16 служебное. Разделы — скруглённые карточки с зазорами,
   стыков между разделами нет.
   ========================================================================== */
:root {
  --mx: clamp(16px, 2.08vw, 30px);
  --gap: clamp(12px, 1.3vw, 19px);
  --row: clamp(20px, 2.6vw, 38px);
  --rad: clamp(20px, 2.4vw, 35px);
  --pad-card: clamp(20px, 3vw, 43px);
  --sec-in: clamp(40px, 6.7vw, 97px);
  --head-gap: clamp(28px, 4.3vw, 62px);
  --fs: 19px; --fs-meta: 16px; --fs-card: 21px; --fs-h2: 35px; --fs-num: 38px; --fs-xl: 43px;
  --s1: 6px; --s2: var(--gap); --s3: var(--sec-in);
}
body { font-size: var(--fs); line-height: 1.5; }
h1 { font-size: var(--fs-xl); line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.02em; }
h3 { font-size: var(--fs-card); font-weight: 500; line-height: 1.3; }
.wrap { max-width: none; padding-inline: var(--mx); }

/* Шапка: логотип слева, меню по центру страницы, кнопка у правого поля */
.top-in { grid-template-columns: 1fr auto 1fr; column-gap: var(--gap); min-height: 88px; }
.top-right { display: contents; }
.nav { grid-column: 2; font-size: var(--fs-meta); gap: clamp(20px, 2.6vw, 38px); }
.top .btn-sm { grid-column: 3; justify-self: end; font-size: var(--fs-meta); }

/* Первый экран остаётся как был, только на полях референса */
.hero { padding-inline: var(--mx); column-gap: var(--gap); row-gap: var(--row); padding-block: var(--row); }
.lead, .hint, .ctl-sub { font-size: var(--fs-meta); }

/* Разделы — скруглённые карточки в полях страницы, между ними ряд-зазор */
.band { margin: var(--row) var(--mx) 0; border-radius: var(--rad); padding-block: var(--sec-in); overflow: clip; }
.band > .wrap { padding-inline: var(--pad-card); }
.sec-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); align-items: end; margin-bottom: var(--head-gap); }
.sec-head p { font-size: var(--fs-meta); max-width: 44ch; }

/* Три преимущества — как карточки проектов: фото-портрет 0,78, под ним название и текст */
.why { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--gap); }
.why-card { padding: 0; background: none; box-shadow: none; border: 0; gap: 10px; }
.why-card h3 { margin-top: 12px; }
.why-card p { font-size: var(--fs-meta); }
.why-pic { aspect-ratio: 167 / 213; border-radius: var(--rad); }
.why-pic img { object-position: 50% 40%; }
.chip-static { left: 16px; top: 16px; }
.why-toast { position: absolute; left: 14px; right: 14px; bottom: 14px; }
.why-toast .note-mini { box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6); }

/* Техника — четыре карточки по три колонки на своём фоне */
#tech { background: var(--deep) 50% 50% / cover no-repeat; }
/* фон и рейка грузятся после первого экрана, чтобы не делить с ним канал */
html:not(.js) #tech, .ready #tech { background-image: var(--tech-custom-bg, url(img/bg-tech.webp)); }
.js:not(.ready) .rail::before, .js:not(.ready) .terms { background-image: none; }
.tech { gap: var(--gap); }
.tech::before { content: none; }
.tech-card { padding: var(--pad-card) calc(var(--pad-card) * .7); border-radius: var(--rad); }
.tech-card h3 { font-size: var(--fs-card); }
.tech-card p { font-size: var(--fs-meta); }

/* Щит: выбор 4 колонки, щит 8 */
.shield-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: calc(var(--gap) * 3); }
.cfg legend, .spec-title, .build-ctl, .build-note, .step-name small, .spec { font-size: var(--fs-meta); }

/* Шаги — карточки как числа в референсе: крупная цифра сверху, текст снизу */
.steps { gap: var(--gap); grid-auto-rows: 1fr; }
.steps li { min-height: 300px; padding: var(--pad-card) calc(var(--pad-card) * .8); border-radius: var(--rad); background: rgba(255, 255, 255, .45); justify-content: space-between; }
.steps li::before { content: none; }
.step-n { font: 400 var(--fs-num)/1 var(--sans); color: var(--ink); margin: 0 0 auto; }
.steps h3 { margin-top: var(--head-gap); }
.steps p { font-size: var(--fs-meta); }

/* Заявка: форма 8 колонок, щит из конструктора 4 */
.order-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: calc(var(--gap) * 3); }
.field { font-size: var(--fs-meta); }
.order-side { border-radius: var(--rad); }

.foot { margin: var(--row) 0 0; padding: var(--row) 0 var(--sec-in); background: none; font-size: var(--fs-meta); }

@media (max-width: 1080px) {
  .why { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shield-grid, .order-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--head-gap); }
}
@media (max-width: 720px) {
  :root { --fs: 17px; --fs-xl: 34px; --fs-h2: 28px; --fs-num: 32px; --fs-card: 19px; }
  .top-in { grid-template-columns: 1fr auto; min-height: 64px; }
  .top .btn-sm { grid-column: 2; }
  .band { margin-inline: 8px; }
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .why { grid-template-columns: minmax(0, 1fr); }
  .why-pic { aspect-ratio: 4 / 3; }
  .steps li { min-height: 0; }
  .steps h3 { margin-top: var(--gap); }
}

/* ==========================================================================
   Правки по разбору design-critique, 25.09.2026
   ========================================================================== */
/* Щит: слева только вопросы, справа результат целиком — щит, состав, кнопка */
.shield-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
.chips { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.chip span { width: 100%; min-height: 48px; justify-content: center; text-align: center; }
.build .spec-box { margin-top: var(--gap); padding-top: var(--gap); border-top: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.build .spec-title { grid-column: 1 / -1; }
.build .spec { columns: 2; column-gap: calc(var(--gap) * 2); margin: 0; }
.build .spec li { break-inside: avoid; min-width: 0; }
.build .spec li span:first-child { min-width: 0; }
.build .spec li span:last-child { white-space: nowrap; text-align: right; }
.build .spec-box .btn { justify-self: end; white-space: nowrap; }
.build-note { margin-top: var(--gap); }

/* Заявка — главная точка сайта: светлая карточка формы по центру тёмного раздела */
#order .wrap { display: grid; justify-items: center; }
.order-card { width: 100%; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px);
  padding: var(--pad-card); border-radius: var(--rad); background: #FFFFFF; color: #120B2E;
  --ink: #120B2E; --ink-2: #3D3163; --muted: #6A5F8A; --line: rgba(18, 11, 46, .12);
  box-shadow: 0 2px 4px rgba(4, 3, 14, .2), 0 30px 60px -20px rgba(4, 3, 14, .7); }
.order-head { display: grid; gap: 12px; align-content: start; }
.order-geography { color: var(--muted); font-size: var(--fs-meta); font-weight: 600; }
.order-head h2 { color: #120B2E; }
.order-head p { color: var(--ink-2); font-size: var(--fs-meta); max-width: 52ch; }
.order-detail { display: grid; gap: 6px; margin-top: 12px; }
.order-detail h3 { color: #120B2E; font-size: var(--fs); line-height: 1.3; }
.order-request { min-width: 0; padding-left: clamp(28px, 4vw, 64px); border-left: 1px solid var(--line); }
.order-kit { margin-bottom: var(--gap);
  padding: 14px 18px; border-radius: 16px; background: #F4EFFD; }
.order-kit[hidden] { display: none; }
.order-kit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.order-kit .spec-title { color: var(--muted); font-size: 14px; }
.order-kit .kit { margin: 0; max-width: none; font-size: var(--fs-meta); line-height: 1.4; color: #120B2E; }
.order-kit .link { flex: none; padding: 0; border: 0; background: transparent; color: #120B2E; font: 500 var(--fs-meta)/1.4 var(--sans);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.order-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); list-style: none; margin: 12px 0 0; padding: 0; }
.order-spec li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(18, 11, 46, .12); font-size: var(--fs-meta); }
.order-spec li span:last-child { flex: none; font-weight: 600; text-align: right; }
.order-editor { margin: calc(var(--gap) * -0.4) 0 var(--gap); padding: var(--pad-card); border-radius: 16px; background: var(--mid); color: #fff;
  --muted: #BBAEE0; --line: rgba(255, 255, 255, .18); }
.order-editor[hidden] { display: none; }
.order-editor .cfg fieldset:last-child { padding-bottom: 0; }
.order-editor .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order-card .form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.order-card .field { color: var(--ink-2); font-weight: 500; }
.order-card .field input, .order-card .field textarea { background: #F6F4FB; border: 1px solid #DDD6EC; color: #120B2E; box-shadow: inset 0 1px 2px rgba(18, 11, 46, .06); }
.order-card .field input:hover, .order-card .field textarea:hover { background: #F1EEF8; border-color: #C9BFE0; }
.order-card .field input:focus, .order-card .field textarea:focus { border-color: #120B2E; background: #fff; box-shadow: 0 0 0 3px rgba(255, 210, 74, .55); }
.order-card .field input::placeholder, .order-card .field textarea::placeholder { color: #8A80A6; }
.order-card .field input[aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179, 38, 30, .15); }
.order-card .err { color: #B3261E; font-size: 14px; font-weight: 400; }
.req { font-style: normal; color: #B3261E; }
.order-card .form-foot { display: grid; gap: 10px; margin-top: 4px; }
.btn-submit { width: 100%; min-height: 58px; font-size: var(--fs); }
#order .btn-submit { border-radius: max(8px, calc(var(--rad) - var(--pad-card))); }
.consent { color: var(--muted); font-size: 14px; }
.order-card .form-status { color: #120B2E; font-size: var(--fs-meta); }
.order-card .form-status:empty { display: none; }
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.personal-consent { display: grid; gap: 5px; color: #514A64; font-size: 13px; line-height: 1.45; }
.personal-consent label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.personal-consent input { width: 18px; height: 18px; flex: none; margin: 1px 0 0; accent-color: #F2641E; }
.personal-consent a { text-decoration: underline; text-underline-offset: 3px; }
.personal-consent .err { min-height: 0; font-size: 13px; }
.btn-submit:disabled { opacity: .65; cursor: wait; }

@media (max-width: 1080px) {
  .shield-grid { grid-template-columns: minmax(0, 1fr); }
  .order-card { grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
  .order-request { padding: var(--gap) 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .build .spec { columns: 1; }
  .build .spec-box .btn { width: 100%; justify-self: stretch; white-space: normal; }
  .order-card .form { grid-template-columns: minmax(0, 1fr); }
  .order-spec { grid-template-columns: minmax(0, 1fr); }
  .order-editor .chips { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .build .spec li:first-child span:last-child, .order-spec li:first-child span:last-child {
    max-width: 58%; white-space: normal;
  }
}

.chip span { font-size: var(--fs-meta); padding-inline: 10px; }
.order-card .err:empty { display: none; }

/* ==========================================================================
   Первый экран, сборка 25.09.2026: дом 8 колонок с плашкой «Состояние дома» на фото,
   справа 4 колонки — пульт и телефон, под ними предложение оставить заявку.
   ========================================================================== */
.hero { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: stretch; column-gap: calc(var(--gap) * 2); row-gap: var(--gap); padding-block: var(--row); }
.demo { grid-column: 1; grid-row: 1; position: relative; justify-content: flex-start; }
.hero-title { position: absolute; z-index: 4; left: var(--gap); top: var(--gap); max-width: min(560px, 60%); margin: 0;
  padding: 18px 24px 20px; border-radius: 20px; font-size: var(--fs-xl);
  background: rgba(14, 10, 38, .55); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .25), 0 20px 40px -20px rgba(0, 0, 0, .6); }
.hero-title em { font-style: normal; color: var(--hot); }
.demo-stage { aspect-ratio: 1.35; }
.hero-phone { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "ctl dev";
  align-content: start; gap: var(--gap); }
.hero-phone .demo-ctl { grid-area: ctl; align-self: center; }
.hero-phone .device { grid-area: dev; width: 100%; }
.hero-aside { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  align-items: center; column-gap: calc(var(--gap) * 2); padding-block: var(--gap); border-radius: var(--rad); background: var(--surface); }
.hero-aside .lead { padding-inline: calc(var(--gap) * 1.4); font-size: var(--fs-meta); color: var(--ink-2); }
.hero-aside .hero-cta { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center; justify-items: center; gap: var(--gap); margin-top: 0; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .demo, .hero-phone { grid-column: 1; grid-row: auto; }
  .hero-phone { grid-template-columns: minmax(0, 1fr) 240px; }
  .hero-aside { grid-column: 1; grid-row: auto; display: block; padding-inline: calc(var(--gap) * 1.4); }
  .hero-aside .lead { padding-inline: 0; }
  .hero-aside .hero-cta { display: flex; margin-top: var(--gap); }
}
@media (max-width: 720px) {
  .hero { display: flex; flex-direction: column; }
  .hero-title { position: static; max-width: none; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; margin-bottom: var(--gap); }
  .hero-phone { display: flex; flex-direction: column; }
  .hero-phone .device { width: min(64vw, 250px); align-self: center; }
}

.hero-title { transition: opacity .9s var(--out) .35s, transform .9s var(--out) .35s, filter .9s var(--out) .35s; }
.js:not(.ready) .hero-title { opacity: 0; transform: translateY(20px); filter: blur(8px); }
@media (prefers-reduced-motion: reduce) { .js:not(.ready) .hero-title { opacity: 1; transform: none; filter: none; } }

.hero-phone .tgl, .hero-phone .reset { font-size: var(--fs-meta); }

/* Недоступные кнопки: aria-disabled вместо disabled, чтобы фокус клавиатуры не терялся */
.reset[aria-disabled="true"] { border-color: rgba(255, 255, 255, .14); background: transparent; color: var(--muted); cursor: default; }
.stepper button[aria-disabled="true"] { color: rgba(255, 255, 255, .25); cursor: default; }
.stepper button[aria-disabled="true"]:hover { background: none; }

/* Слой перехода не перехватывает нажатия: быстрые клики по конструктору доходят до кнопок */
::view-transition { pointer-events: none; }

/* ==========================================================================
   Шапка и подвал — матовый материал из tiana («Матовый»: корпус чуть светлее фона,
   вертикальный свет, светлая грань сверху, зерно, тонкие линии; цвет только в контуре
   и огоньке знака). Стекло здесь не читается: за шапкой и подвалом плоский фон, размывать нечего.
   Правила ограничены .top и .foot — общие .btn и .logo-mark в других местах не трогаются.
   ========================================================================== */
.top, .foot { --mt-body: #1A1344; --mt-line: rgba(255, 255, 255, .09); isolation: isolate; }
.top::before, .foot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  opacity: .11; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Шапка: полоса во всю ширину, содержимое остаётся на полях сетки (.wrap) — выравнивание с первым экраном не сбивается */
.top { background-color: var(--mt-body);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, .18) 100%);
  border-bottom: 1px solid var(--mt-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -30px rgba(0, 0, 0, .9); }
.top .nav a { font-weight: 400; letter-spacing: .01em; color: var(--ink-2); padding-block: 6px;
  text-decoration: underline 1px transparent; text-underline-offset: 8px; transition: color .2s var(--out), text-decoration-color .2s var(--out); }
.top .nav a:hover { color: #fff; text-decoration-color: currentColor; }

/* Знак логотипа: не заливка, а контурная плитка с огоньком — цвет только в линии и знаке */
.top .logo-mark, .foot .logo-mark { background: rgba(242, 100, 30, .1); border: 1px solid rgba(242, 100, 30, .75); color: var(--hot); box-shadow: none; }
.top .logo-name { font-weight: 400; letter-spacing: .01em; }

/* Подвал: матовая карточка в полях страницы, как разделы; две колонки сетки */
.foot { position: relative; margin: var(--row) var(--mx) var(--row); padding: var(--pad-card); border-radius: var(--rad);
  background-color: var(--mt-body);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .22) 100%);
  box-shadow: 0 24px 60px rgba(4, 3, 14, .55), inset 0 1px 0 rgba(255, 255, 255, .1); color: var(--ink-2); }
.foot .wrap { padding-inline: 0; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); align-items: center; padding-top: 0; }
.foot-brand { display: flex; align-items: center; gap: 14px; }
.foot-brand .logo-mark { flex: none; }
.foot-brand p { line-height: 1.5; }
.foot-contact { display: grid; justify-self: end; text-align: right; padding-left: var(--gap); border-left: 1px solid var(--mt-line); font-style: normal; line-height: 1.5; }
.foot-contact a { text-underline-offset: 3px; }
.analytics-settings { appearance: none; border: 0; padding: 0; background: none; color: inherit; text-align: inherit;
  font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.analytics-choice { position: fixed; z-index: 50; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 20px;
  max-width: min(670px, calc(100vw - 40px)); padding: 18px 20px; border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px; background: #1A1344; color: #fff; box-shadow: 0 12px 36px rgba(4,3,14,.45);
  font-size: 14px; line-height: 1.45; }
.analytics-choice[hidden], .analytics-choice [hidden] { display: none; }
.analytics-choice p + p { margin-top: 8px; color: #d9d5ec; }
.analytics-link { border: 0; padding: 0; background: none; color: #fff; font: inherit; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.analytics-actions { display: flex; gap: 8px; flex: none; }
.analytics-actions button { border: 1px solid rgba(255,255,255,.45); border-radius: 8px; padding: 9px 12px;
  background: transparent; color: #fff; font: inherit; cursor: pointer; }
.analytics-actions #analytics-allow { background: #fff; color: #1A1344; }
.analytics-actions button:focus-visible, .analytics-link:focus-visible, .analytics-settings:focus-visible { outline: 2px solid #F2641E; outline-offset: 3px; }

@media (min-width: 721px) and (max-width: 780px) { .top .nav { display: none; } }
@media (min-width: 721px) and (max-width: 1080px) {
  .top-in { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; }
  .top .nav { grid-column: 2; justify-self: center; gap: clamp(10px, 1.5vw, 18px); font-size: 14px; }
  .top .btn-sm { grid-column: 3; }
}

@media (max-width: 720px) {
  .foot { margin-inline: 8px; }
  .foot-in { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap); }
  .foot-contact { justify-self: start; text-align: left; padding: var(--gap) 0 0; border-left: 0; border-top: 1px solid var(--mt-line); }
  .analytics-choice { right: 8px; bottom: 8px; max-width: calc(100vw - 16px); flex-direction: column; align-items: stretch; gap: 12px; }
}

.phone-state { font-size: 6.4cqw; }
.feed-empty { font-size: 6.4cqw; }
.consent { max-width: 70ch; }

/* ==========================================================================
   Плашка «Состояние дома» на фото — вместо заголовка. Заголовок страницы — в карточке справа.
   ========================================================================== */
.house-state { position: absolute; z-index: 4; left: var(--gap); top: var(--gap); margin: 0; padding: 16px 22px 18px; border-radius: 20px;
  background: rgba(14, 10, 38, .58); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .22), 0 20px 40px -20px rgba(0, 0, 0, .6);
  transition: border-color .4s var(--out); }
.hs-label { font-size: var(--fs-meta); color: var(--ink-2); }
.hs-status { display: flex; align-items: center; gap: 12px; margin-top: 2px; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.02em; }
.hs-status b { font-weight: 500; color: #fff; transition: color .4s var(--out); }
.hs-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ok); flex: none; transition: background-color .4s var(--out); }
.hs-sub { margin-top: 4px; font-size: var(--fs-meta); color: var(--ink-2); }
.hs-sub .mono { color: #fff; }
.house-state[data-level="alarm"] { border-color: rgba(127, 196, 232, .7); }
.house-state[data-level="alarm"] .hs-dot { background: var(--cold); }
.house-state[data-level="alarm"] .hs-status b { color: var(--cold); }
.house-state[data-level="warm"] .hs-dot { background: var(--hot); }
.hero-h1 { font-size: var(--fs-xl); line-height: 1.1; letter-spacing: -.02em; margin-bottom: var(--gap); }
.hero-h1 em { font-style: normal; color: var(--hot); }
.hero-aside .lead { margin-top: 0; }

/* ==========================================================================
   Порядок появления — по тому, куда должен смотреть человек:
   фото дома → состояние дома → температуры в комнатах → пульт → телефон → заголовок и заявка → шкала.
   Шапка стоит сразу. Старт — когда приехали шрифты, фото дома и фото телефона (app.js).
   ========================================================================== */
.demo-stage { transition: clip-path 1.3s var(--reveal) .05s, transform 1.6s var(--out) .05s; }
.house-state { transition: opacity .8s var(--out) .95s, transform .8s var(--out) .95s, filter .8s var(--out) .95s, border-color .4s var(--out); }
.js:not(.ready) .house-state { opacity: 0; transform: translateY(16px); filter: blur(8px); }
.stage .chip-t, .stage .tag-zont { transition-delay: calc(1.2s + var(--i, 0) * 90ms), calc(1.2s + var(--i, 0) * 90ms), calc(1.2s + var(--i, 0) * 90ms), 0s; }
.hero-phone .demo-ctl { transition: opacity .8s var(--out) 1.6s, transform .8s var(--out) 1.6s; }
.hero-phone .device { transition: transform 1s var(--spring) 1.8s, opacity .5s var(--out) 1.8s; }
.hero-aside { transition: opacity .9s var(--out) 2.05s, transform .9s var(--out) 2.05s, filter .9s var(--out) 2.05s; }
.js:not(.ready) .hero-aside { opacity: 0; transform: translateY(24px); filter: blur(8px); }
@media (prefers-reduced-motion: reduce) {
  .js:not(.ready) .house-state, .js:not(.ready) .hero-aside { opacity: 1; transform: none; filter: none; }
}
@media (max-width: 720px) {
  .house-state { left: 10px; top: 10px; padding: 10px 14px 12px; border-radius: 14px; }
  .hs-status { font-size: 22px; }
  .hs-label, .hs-sub { font-size: 13px; }
}

/* Правая колонка не выше дома: заголовок размером заголовка раздела, кнопка и ссылка в одну строку */
.hero-h1 { font-size: var(--fs-h2); margin-bottom: 12px; }
.hero-aside { padding-block: var(--gap); }
.hero-aside .hero-cta { flex-wrap: nowrap; }
.hero-aside .btn { flex: 0 1 auto; }
.hero-aside .btn, .hero-aside .link { white-space: nowrap; font-size: var(--fs-meta); }

/* Телефон: элементы первого экрана раскладываются общим flex-контейнером ниже. */
@media (max-width: 720px) {
  .hero-phone { display: contents; }
  .hero-aside { padding: var(--gap); margin-inline: 0; }
  .hero-aside .hero-cta { flex-wrap: wrap; }
  .hero-aside .btn { flex: 1 1 100%; }
  .house-state { position: relative; left: auto; top: auto; margin-bottom: var(--gap); }
}

/* ==========================================================================
   Появление целиком (25.09.2026). Элемент возникает сразу со всем материалом — стеклом, бликом,
   тенью — и только доезжает на место. Прозрачность и размытие при появлении не используются:
   пока элемент полупрозрачен, браузер не рисует размытие стекла, и материал «догружался» последним.
   Порядок прежний: фото → состояние → температуры → пульт → телефон → заголовок и заявка → шкала.
   ========================================================================== */
.js:not(.ready) .demo-stage, .js:not(.ready) .house-state, .js:not(.ready) .stage .chip-t, .js:not(.ready) .stage .tag-zont,
.js:not(.ready) .hero-phone .demo-ctl, .js:not(.ready) .hero-phone .device, .js:not(.ready) .hero-aside {
  visibility: hidden; opacity: 1; filter: none; clip-path: none; transform: translateY(14px) scale(.985); }
.js:not(.ready) .demo-stage { transform: scale(1.03); }
.demo-stage { clip-path: none; transition: visibility 0s .05s, transform 1.2s var(--out) .05s; }
.house-state { transition: visibility 0s .6s, transform .8s var(--spring) .6s, border-color .4s var(--out); }
.stage .chip-t, .stage .tag-zont { transition: visibility 0s calc(.85s + var(--i, 0) * 90ms), transform .7s var(--spring) calc(.85s + var(--i, 0) * 90ms), border-color .4s, background-color .4s; }
.hero-phone .demo-ctl { transition: visibility 0s 1.15s, transform .8s var(--spring) 1.15s; }
.hero-phone .device { transition: visibility 0s 1.35s, transform .9s var(--spring) 1.35s; }
.js:not(.ready) .hero-phone .device { transform: translateY(40px) rotate(3deg); }
.hero-aside { transition: visibility 0s 1.6s, transform .8s var(--spring) 1.6s; }

/* Разделы ниже первого экрана — тем же способом */
.js:not(.rv-off) .reveal:not(.in) { visibility: hidden; opacity: 1; filter: none; transform: translateY(24px); }
.js .reveal { transition: visibility 0s calc(var(--i, 0) * 90ms), transform .9s var(--spring) calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  .js:not(.ready) .demo-stage, .js:not(.ready) .house-state, .js:not(.ready) .stage .chip-t, .js:not(.ready) .stage .tag-zont,
  .js:not(.ready) .hero-phone .demo-ctl, .js:not(.ready) .hero-phone .device, .js:not(.ready) .hero-aside,
  .js:not(.rv-off) .reveal:not(.in) { visibility: visible; transform: none; }
}

/* ==========================================================================
   Появление без движения (25.09.2026). Любой сдвиг или масштаб при появлении держит блок на отдельном
   слое браузера; когда движение последнего блока кончается, браузер перерисовывает всё в финальном
   виде — текст, тени и фон дёргаются уже после появления. Поэтому блоки появляются по очереди,
   но сразу на своём месте и в финальном виде. Порядок и задержки прежние.
   ========================================================================== */
.js:not(.ready) .demo-stage, .js:not(.ready) .house-state, .js:not(.ready) .stage .chip-t, .js:not(.ready) .stage .tag-zont,
.js:not(.ready) .hero-phone .demo-ctl, .js:not(.ready) .hero-phone .device, .js:not(.ready) .hero-aside,
.js:not(.rv-off) .reveal:not(.in) { transform: none; }
/* Очередь сжата 25.09.2026 с 1,7 до 0,6 с: на медленной сети она добавлялась к ожиданию загрузки. */
.demo-stage { transition: visibility 0s 0s; }
.house-state { transition: visibility 0s .15s, border-color .4s var(--out); }
.stage .chip-t, .stage .tag-zont { transition: visibility 0s calc(.25s + var(--i, 0) * 30ms), border-color .4s, background-color .4s; }
.hero-phone .demo-ctl { transition: visibility 0s .4s; }
.hero-phone .device { transition: visibility 0s .48s; }
.hero-aside { transition: visibility 0s .55s; }
.js .reveal { transition: visibility 0s calc(var(--i, 0) * 120ms); }

/* ==========================================================================
   Знак производителя ZONT в шапке (29.09.2026, решение владельца). Официальный знак
   из материалов партнёра: четыре плитки с буквами. Цвет в шапке до этого жил только в
   огоньке нашего знака (прогон ТРИЗ), поэтому плитки приглушены до цвета корпуса и
   берут фирменный цвет по очереди — один раз, когда первый экран готов.
   ========================================================================== */
.brand { display: flex; align-items: center; gap: clamp(12px, 1.3vw, 19px); min-width: 0; }
.zont { display: inline-flex; align-items: center; padding-left: clamp(12px, 1.3vw, 19px);
  border-left: 1px solid var(--mt-line); }
.zont svg { display: block; height: 18px; width: auto; }
.zont-tile { fill: #2A2158; }
.ready .zont-tile { animation: zont-lit .45s var(--out) forwards; animation-delay: calc(.7s + var(--i) * 120ms); }
@keyframes zont-lit { to { fill: var(--on); } }
/* Наведение и касание: плитки берут цвет разом, без очереди */
.zont:hover .zont-tile { fill: var(--on); animation: none; }
@media (prefers-reduced-motion: reduce) { .zont-tile { fill: var(--on); animation: none; } }
@media (max-width: 720px) { .zont { display: none; } }
.tech-note { margin-top: var(--gap); font-size: var(--fs-meta); color: var(--ink-3); max-width: 62ch; }

/* ==========================================================================
   Первый экран после ревью design-ultimate (30.09.2026, решение владельца: пункты 1, 2, 3, 5, 11–14).
   Заголовок — на тёмном небе над скатом крыши: контраст даёт сам снимок, подложка не нужна.
   «Состояние дома» — текстом на небе справа, у пульта и телефона, которые его меняют.
   Метки комнат — маленькие панели с температурой на самих комнатах: выноски на поля владелец
   попробовал и вернул панели («лучше было через маленькую панель с температурой», 30.09.2026).
   Размеры — в долях ширины сцены (cqw): подписи стоят на полях снимка при любой ширине.
   ========================================================================== */
.demo { container-type: inline-size; }
/* Третья строка кончается над снежным скатом: белые буквы на белом снегу не читаются (замер 2,3) */
.demo > .hero-h1 { position: absolute; z-index: 4; left: 3cqw; top: 1cqw; margin: 0; max-width: none;
  font-size: clamp(24px, 3.9cqw, 44px); font-weight: 500; line-height: 1.04; letter-spacing: -.025em; color: #fff; }
.js:not(.ready) .demo > .hero-h1 { visibility: hidden; }
.demo > .hero-h1 { transition: visibility 0s .55s; }

.house-state { left: auto; right: 3.4cqw; top: 2.4cqw; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; text-align: right; }
.hs-status { justify-content: flex-end; font-size: clamp(20px, 3cqw, 32px); }

/* Телефон: дом сразу после заголовка и короткого статуса; предложение и кнопки — под фото. */
@media (max-width: 720px) {
  .hero { row-gap: 12px; padding-block: 16px; }
  .demo { display: contents; }
  .demo > .hero-h1 { position: static; order: -3; font-size: 30px; margin-bottom: 0; }
  .house-state { order: -2; position: relative; right: auto; top: auto; display: flex; align-items: center;
    flex-wrap: wrap; justify-content: space-between; column-gap: 12px; min-height: 44px; padding: 0; margin-bottom: 0; text-align: left; }
  .hs-label { display: none; }
  .hs-status { justify-content: flex-start; gap: 8px; margin-top: 0; font-size: 18px; }
  .hs-dot { width: 9px; height: 9px; }
  .hs-sub { margin-top: 0; white-space: nowrap; }
  .demo-stage { order: -1; }
  .hero-aside { order: 1; }
  .hero-phone .demo-ctl { order: 2; }
  .hero-phone .device { order: 3; }
}
/* Строка состояния в две строки: одной строкой она наезжала на трубу дома */
@media (min-width: 721px) {
  .house-state .hs-line { display: block; }
  .house-state .hs-sep { display: none; }
}

/* Ширина 1081–1240: правой колонке 5 из 12, а не 4. При 4 кнопки пульта ломались в две строки,
   а «Оставить заявку» уходила за край окна (ревью 30.09.2026, пункт 11). */
@media (min-width: 1081px) and (max-width: 1240px) {
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--gap) * 1.5); }
  .hero-aside { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--gap) * 1.5); }
}
.hero-phone .tgl, .hero-phone .reset { white-space: nowrap; }

/* Экран телефона: текст в долях ширины экрана, но не мельче 11–12,5 px. При телефоне шириной ~200 px
   уведомления выходили 10,7 px, их шапка 9,1 px — самый мелкий текст страницы на главном содержании демо. */
.sb { font-size: max(11px, 5.4cqw); }
.lock-date { font-size: max(12px, 6.2cqw); }
.phone-state { font-size: max(12px, 6.4cqw); }
.note { font-size: max(12.5px, 5.4cqw); }
.note-top { font-size: max(11px, 4.6cqw); }

/* Раздел заявки без своего фона: его верхний отступ читался как дыра ~130 px после «3 шагов».
   Карточка формы встаёт на обычный зазор между разделами (ревью 30.09.2026, пункт 14). */
#order { padding-top: 0; }
/* 1081–1240: четыре узкие карточки техники — название модели в одну строку (пункт 11) */
@media (min-width: 1081px) and (max-width: 1240px) {
  .tech-card h3 { font-size: 18px; letter-spacing: -.015em; white-space: nowrap; }
}
/* С уведомлениями часы экрана блокировки сжимаются в строку «время + статус», а место отдаётся ленте.
   Раньше сжатие было масштабом: высоту оно не освобождало, и четвёртая карточка обрезалась даже
   при мелком тексте. С текстом 12,5 px не помещалась уже третья. */
.screen.has-notes .lock { transform: none; display: flex; align-items: center; justify-content: center; gap: 3cqw; }
.screen.has-notes .lock-date { display: none; }
.screen.has-notes .lock-time { margin: 0; font-size: 13cqw; }
.screen.has-notes .phone-state { margin-top: 0; }
.screen.has-notes .feed { transform: none; }
/* Зазор между часами и лентой задавался в cqw на самом .screen. Но cqw в свойствах контейнера
   считаются от контейнера-предка, а его нет — выходило 4 % ширины окна (57,6 px на 1440) вместо 4 % экрана.
   Отступ перенесён на ленту: у неё cqw считаются от экрана телефона. */
.screen { gap: 0; }
.feed { margin: 4cqw 0 0; }

/* ==========================================================================
   Фото дома целиком (30.09.2026, решение владельца). Прежний кадр был шире сцены на четверть и
   срезался по бокам; новый снят с полями вокруг дома, и сцена принимает его пропорцию 3:2 без
   обрезки и сдвига. Сезон — по месяцу: файл подставляет nginx под именем hero-now.
   ========================================================================== */
.demo-stage { aspect-ratio: 3 / 2; }
.stage { left: 0; width: 100%; translate: none; }
@media (max-width: 720px) {
  .demo-stage { aspect-ratio: 3 / 2; }
  .stage { width: 100%; }
}
/* Приборы котельной — по новому кадру */
.puddle { left: 64.2%; top: 77.2%; width: 11.5%; }
.boiler-lamp { left: 68.3%; top: 67.3%; width: 1.3%; height: .9%; }
.zont-led { left: 73.1%; top: 65.9%; }
/* Растворение краёв — только по внешним полям нового кадра: дом стоит на 15–84 % ширины,
   фундамент кончается на ~85 % высоты. Прежняя маска гасила именно эти полосы. */
.stage { --fade-x: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  --fade-y: linear-gradient(180deg, transparent 0%, #000 6%, #000 90%, transparent 100%); }

/* ==========================================================================
   Фон первого экрана во всю ширину (30.09.2026, владелец: «экран занят не полностью»).
   Широкий кадр 2842×1382 — фото дома 1536×1024 в точке (85, 72) плюс дорисованный пейзаж
   (tools/wide-canvas.py → генератор → tools/wide-compose.py, дом в исходных пикселях).
   .stage остаётся окном дома: панели, лужа и приборы стоят по прежним координатам, а сама
   картинка выходит за окно вправо — под пульт и телефон, вверх и вниз.
   На телефоне <picture> отдаёт прежний кадр с домом, и эти правила не действуют.
   ========================================================================== */
@media (min-width: 721px) {
  .stage { -webkit-mask-image: none; mask-image: none; }
  .stage .photo { inset: auto; left: calc(-85 / 1536 * 100%); top: calc(-72 / 1024 * 100%);
    width: calc(2842 / 1536 * 100%); height: calc(1382 / 1024 * 100%); max-width: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 84%);
    mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 84%); }
  /* низ растворяется сразу под фундаментом (~68 % кадра) */
  .hero-phone { position: relative; z-index: 3; }
}

/* Заголовок и «Состояние дома» — на стеклянной подложке, как пульт (30.09.2026). Закатное небо после
   смены настроения светлее прежних сумерек: белые строки без подложки давали контраст 1,6–2,5.
   Подложка — решение владельца для этого случая («если плохо читается — подложку»). */
@media (min-width: 721px) {
  .demo > .hero-h1, .house-state { padding: 14px 20px 16px; border-radius: 18px;
    background: rgba(14, 10, 38, .5); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .2), 0 20px 40px -20px rgba(0, 0, 0, .55); }
  .demo > .hero-h1 { left: 2cqw; top: 1cqw; font-size: clamp(22px, 3.4cqw, 40px); }
  .house-state { right: 2cqw; top: 1cqw; }
}

/* Телефон слева, пульт справа (30.09.2026, решение владельца). Колонки меняются вместе с местами,
   чтобы телефон сохранил свою ширину. Появление идёт слева направо: сначала телефон, потом пульт.
   На телефоне (до 720 px) порядок прежний — пульт над телефоном: нажал и сразу видишь экран ниже. */
@media (min-width: 721px) {
  .hero-phone { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "dev ctl"; }
  .hero-phone .device { transition: visibility 0s .4s; }
  .hero-phone .demo-ctl { transition: visibility 0s .48s; }
}
@media (min-width: 721px) and (max-width: 1080px) {
  .hero-phone { grid-template-columns: 190px minmax(0, 320px); justify-content: center; }
  .hero-phone .demo-ctl { justify-self: stretch; }
  .hero-aside { padding-inline: 0; }
  .hero-aside .lead { padding-inline: calc(var(--gap) * 1.4); }
  .hero-aside .hero-cta { display: grid; grid-template-columns: 190px minmax(0, 320px);
    justify-content: center; justify-items: center; gap: var(--gap); }
}

/* Вложенные скругления концентричны: радиус элемента внутри карточки = радиус карточки минус отступ
   от её края. Уведомление 12 px и панель «Спальня» 9 px в углу карточки 35 px давали разные дуги —
   «выглядит дёшево» (владелец, 30.09.2026). */
.why-toast .note-mini { border-radius: max(8px, calc(var(--rad) - 14px)); padding: 10px 16px 11px; }
.why-card .chip-static { border-radius: max(7px, calc(var(--rad) - 16px)); padding: 6px 12px 7px; }

/* Огонёк котла — ровно по дисплею котла на фото (13×7 px исходника в точке 1057, 687) */
.boiler-lamp { left: 68.82%; top: 67.09%; width: .85%; height: .68%; border-radius: 1px; }

/* Знак — логотип ZONT вместо огонька (владелец, 30.09.2026), в шапке и подвале. Отдельный знак ZONT
   справа от названия убран: он стал бы вторым. Плитки загораются по очереди, как раньше (.zont-tile). */
.logo-mark.logo-zont, .top .logo-mark.logo-zont, .foot .logo-mark.logo-zont { width: auto; height: auto; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; }
.top .logo-mark.logo-zont { flex: none; }
.logo-zont svg { display: block; height: 22px; width: auto; }
.logo-zont img { display: block; width: 86px; height: 22px; object-fit: contain; }
.logo:hover .zont-tile { fill: var(--on); animation: none; }
@media (max-width: 360px) {
  .top .logo { gap: 6px; }
  .top .logo-zont svg { width: 60px; height: auto; }
  .top .logo-zont img { width: 60px; }
  .top .logo-name { font-size: 13px; white-space: nowrap; }
  .top .btn-sm { padding-inline: 10px; font-size: 14px; }
}

/* Шапка закреплена сверху (владелец, 30.09.2026). Переход по якорю не прячет заголовок раздела под ней. */
.top { position: sticky; top: 0; z-index: 20; }
html { scroll-padding-top: 96px; }
@media (max-width: 720px) { html { scroll-padding-top: 72px; } }

/* Подпись под карточками техники стояла в 19 px от них и читалась как хвост последней карточки.
   Отступ — как между заголовком раздела и карточками (владелец: «слишком близко», 30.09.2026). */
.tech-note { margin-top: var(--head-gap); }

/* ==========================================================================
   Появление «шторкой» (30.09.2026, владелец: «минималистичный и не грузящий моушн»).
   Прозрачность и сдвиг на этом сайте проверены и отвергнуты: у полупрозрачного блока браузер не
   рисует размытие стекла, а сдвиг выносит блок на отдельный слой, и в конце тени перерисовываются.
   Поэтому блок с первого кадра нарисован целиком — со стеклом, тенью и бликом, — а движется только
   граница clip-path, открывая его снизу вверх (рецепт «Image Reveal», design-motion-principles §9).
   Граница с запасом 120 px, чтобы открыть и тень. Фото дома стекла не несёт — оно проявляется
   прозрачностью. Линза Jakub: 280–420 мс, сильное замедление к концу, мелкое быстрее крупного.
   Порядок и задержки прежние.
   ========================================================================== */
:root { --wipe: cubic-bezier(.22, 1, .36, 1); }
.demo-stage .photo { transition: opacity .5s var(--wipe), filter 1.4s var(--out); }
.js:not(.ready) .demo-stage .photo { opacity: 0; }

.demo > .hero-h1, .house-state, .stage .chip-t, .stage .tag-zont, .hero-phone .device, .hero-phone .demo-ctl,
.hero-aside, .js .reveal { clip-path: inset(-120px); }
.js:not(.ready) .demo > .hero-h1, .js:not(.ready) .house-state, .js:not(.ready) .stage .chip-t, .js:not(.ready) .stage .tag-zont,
.js:not(.ready) .hero-phone .device, .js:not(.ready) .hero-phone .demo-ctl, .js:not(.ready) .hero-aside,
.js:not(.rv-off) .reveal:not(.in) { clip-path: inset(100% -120px 0 -120px); }

.house-state { transition: visibility 0s .15s, clip-path .36s var(--wipe) .15s, border-color .4s var(--out); }
.stage .chip-t, .stage .tag-zont { transition: visibility 0s calc(.25s + var(--i, 0) * 30ms), clip-path .28s var(--wipe) calc(.25s + var(--i, 0) * 30ms),
  border-color .4s, background-color .4s; }
.demo > .hero-h1 { transition: visibility 0s .55s, clip-path .36s var(--wipe) .55s; }
.hero-aside { transition: visibility 0s .55s, clip-path .4s var(--wipe) .55s; }
.hero-phone .demo-ctl { transition: visibility 0s .4s, clip-path .36s var(--wipe) .4s; }
.hero-phone .device { transition: visibility 0s .48s, clip-path .42s var(--wipe) .48s; }
@media (min-width: 721px) {                    /* телефон слева — появляется первым */
  .hero-phone .device { transition: visibility 0s .4s, clip-path .42s var(--wipe) .4s; }
  .hero-phone .demo-ctl { transition: visibility 0s .48s, clip-path .36s var(--wipe) .48s; }
}
.js .reveal { transition: visibility 0s calc(var(--i, 0) * 120ms), clip-path .42s var(--wipe) calc(var(--i, 0) * 120ms); }

@media (prefers-reduced-motion: reduce) {
  .demo-stage .photo, .demo > .hero-h1, .house-state, .stage .chip-t, .stage .tag-zont, .hero-phone .device, .hero-phone .demo-ctl,
  .hero-aside, .js .reveal { transition-duration: 0s; }
}

/* Каталог: карточка за краем показывает направление листания; кнопки работают и с клавиатуры. */
#tech .wrap { min-width: 0; }
.tech-controls { display: none; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 16px; }
#tech.has-carousel .tech-controls { display: flex; }
.tech-progress { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font: 600 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.tech-progress #tech-current { color: var(--hot); }
.tech-progress-rule { width: clamp(36px, 5vw, 72px); height: 1px; background: rgba(255,255,255,.4); }
.tech-arrows { display: flex; gap: 8px; }
.tech-arrows button { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; background: rgba(16,10,44,.62); color: #fff; font: 500 24px/1 var(--sans); cursor: pointer; transition: background-color .2s, border-color .2s; }
.tech-arrows button:hover:not(:disabled) { border-color: var(--hot); background: var(--mid); }
.tech-arrows button:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
.tech-arrows button:disabled { opacity: .35; cursor: default; }
#tech.has-carousel .tech { --cards: 3; display: flex; grid-template-columns: none; gap: var(--gap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; overscroll-behavior-inline: contain; padding: 18px 14px 26px; margin: -18px -14px -26px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 28px), transparent); }
#tech.has-carousel .tech::-webkit-scrollbar { display: none; }
#tech.has-carousel .tech-card { flex: 0 0 calc((100% - (var(--cards) - 1) * var(--gap)) / var(--cards)); min-width: 0; scroll-snap-align: start;
  box-shadow: 0 3px 8px -2px rgba(255,255,255,.18), 0 14px 20px -10px rgba(4,3,14,.55), inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -2px 1px rgba(255,255,255,.14), inset 1px 0 0 rgba(255,255,255,.16), inset -1px 0 0 rgba(255,255,255,.16); }
@media (max-width: 1080px) { #tech.has-carousel .tech { --cards: 2; } }
@media (max-width: 720px) { #tech.has-carousel .tech { --cards: 1; } }
@media (prefers-reduced-motion: reduce) { #tech.has-carousel .tech { scroll-behavior: auto; } }

/* Полосы прокрутки страницы и карусели — часть палитры. */
html { scrollbar-color: #786ba4 #1b133f; scrollbar-width: thin; }
html::-webkit-scrollbar { width: 8px; height: 6px; }
html::-webkit-scrollbar-track { background: #1b133f; }
html::-webkit-scrollbar-thumb { background: #786ba4; border-radius: 8px; }

/* Возможности умного отопления: согласованный блок с иллюстрациями. */
#steps .sec-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
#steps .sec-head p { max-width: 1100px; }
#steps .steps { gap: clamp(12px, 1.4vw, 20px); }
#steps .steps li { min-height: 0; display: grid; grid-template-rows: 24px auto 1fr; align-content: start; gap: 18px;
  padding: clamp(18px, 2vw, 26px); overflow: hidden; background: var(--mid); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 15px 28px -20px rgba(18, 11, 46, .55);
  transition: border-color .3s var(--out), box-shadow .3s var(--out); }
#steps .steps li:hover { border-color: rgba(255, 210, 74, .8); box-shadow: 0 23px 38px -20px rgba(18, 11, 46, .6); }
#steps .step-n { margin: 0; font: 600 18px/1 var(--sans); letter-spacing: 0; color: var(--hot); }
#steps .step-visual { position: relative; width: 100%; align-self: center; overflow: hidden;
  border-radius: max(10px, calc(var(--rad) - 16px));
  background-image: linear-gradient(rgba(207, 196, 234, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207, 196, 234, .09) 1px, transparent 1px);
  background-size: 48px 48px; }
#steps .step-visual img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  max-height: none; object-fit: contain; }
#steps .step-visual .step-signal { position: absolute; inset: 0; height: 100%; max-height: none;
  pointer-events: none; opacity: 0; filter: brightness(1.45) drop-shadow(0 0 4px var(--signal-glow)); }
#steps .steps li:nth-child(1) { --signal-glow: #FFD24A; }
#steps .steps li:nth-child(2) { --signal-glow: #F2641E; }
#steps .steps li:nth-child(3) { --signal-glow: #7CFFB0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #steps .steps li:hover .step-signal { animation: step-signal-pulse 1.8s ease-in-out infinite; }
}
@keyframes step-signal-pulse { 0%, 100% { opacity: .05; } 50% { opacity: .82; } }
#steps .step-copy { align-self: start; padding-top: 17px; border-top: 1px solid rgba(255, 255, 255, .22); }
#steps .steps h3 { margin: 0 0 8px; font-size: var(--fs-card); color: #fff; }
#steps .steps p { color: #DED7F1; line-height: 1.5; }
#steps .steps-fit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 24px; margin-top: clamp(24px, 3vw, 42px); }
#steps .steps-fit h3 { margin: 0 0 6px; }
#steps .steps-fit p { max-width: 950px; margin: 0; font-size: var(--fs-meta); }
#steps .steps-fit .btn { background: var(--mid); color: #fff; }
#steps .steps-fit .btn:hover { background: #33287A; }
@media (min-width: 721px) and (max-width: 1000px) {
  #steps .steps { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  #steps .steps li { grid-template-columns: 32px minmax(180px, 240px) minmax(0, 1fr); grid-template-rows: auto; align-items: center; min-height: 210px; }
  #steps .step-n { align-self: start; }
  #steps .step-copy { align-self: center; padding: 0 0 0 20px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .22); }
}
@media (max-width: 720px) {
  #steps .steps li { grid-template-rows: 24px auto auto; gap: 10px; }
  #steps .steps-fit { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #steps .steps-fit .btn { justify-self: start; }
  #steps .step-copy { padding-top: 14px; }
  .hero-phone .device { width: clamp(180px, 49vw, 190px); }
}
@media (prefers-reduced-motion: reduce) {
  #steps .steps li { transition: none; }
  #steps .step-signal { animation: none; opacity: 0; }
}

/* ==========================================================================
   Появление «проявлением» (30.09.2026, владелец: шторка «топорная, не плавная»).
   Жёсткая граница clip-path заменена мягкой маской: снизу вверх поднимается растушёванный край
   (треть высоты), блок будто проявляется. Проверено на пульте: под маской стекло размывает фон,
   как и полностью открытое (прозрачность этого не даёт — при 50 % размытие пропадает и за стеклом
   резко виден дом). Маска с запасом 120 px за краями, поэтому тень не обрезается: полностью
   открытая маска совпадает с блоком без маски до пикселя. Край двигает зарегистрированное
   свойство --rev (@property), чтобы переход шёл плавно. Темп спокойнее: 450–650 мс, easeOutCubic.
   ========================================================================== */
@property --rev { syntax: '<percentage>'; inherits: false; initial-value: 140%; }
:root { --soft: cubic-bezier(.33, 1, .68, 1); }
.demo > .hero-h1, .house-state, .stage .chip-t, .stage .tag-zont, .hero-phone .device, .hero-phone .demo-ctl,
.hero-aside, .js .reveal {
  clip-path: none; --rev: 140%;
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--rev) - 40%), transparent var(--rev));
  mask-image: linear-gradient(to top, #000 calc(var(--rev) - 40%), transparent var(--rev));
  -webkit-mask-size: calc(100% + 240px) calc(100% + 240px); mask-size: calc(100% + 240px) calc(100% + 240px);
  -webkit-mask-position: -120px -120px; mask-position: -120px -120px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-clip: no-clip; mask-clip: no-clip; }
.js:not(.ready) .demo > .hero-h1, .js:not(.ready) .house-state, .js:not(.ready) .stage .chip-t, .js:not(.ready) .stage .tag-zont,
.js:not(.ready) .hero-phone .device, .js:not(.ready) .hero-phone .demo-ctl, .js:not(.ready) .hero-aside,
.js:not(.rv-off) .reveal:not(.in) { clip-path: none; --rev: 0%; }

.demo-stage .photo { transition: opacity .7s var(--soft), filter 1.4s var(--out); }
.house-state { transition: visibility 0s .15s, --rev .6s var(--soft) .15s, border-color .4s var(--out); }
.stage .chip-t, .stage .tag-zont { transition: visibility 0s calc(.25s + var(--i, 0) * 40ms), --rev .45s var(--soft) calc(.25s + var(--i, 0) * 40ms),
  border-color .4s, background-color .4s; }
.demo > .hero-h1 { transition: visibility 0s .55s, --rev .6s var(--soft) .55s; }
.hero-aside { transition: visibility 0s .55s, --rev .65s var(--soft) .55s; }
.hero-phone .demo-ctl { transition: visibility 0s .4s, --rev .6s var(--soft) .4s; }
.hero-phone .device { transition: visibility 0s .48s, --rev .65s var(--soft) .48s; }
@media (min-width: 721px) {
  .hero-phone .device { transition: visibility 0s .4s, --rev .65s var(--soft) .4s; }
  .hero-phone .demo-ctl { transition: visibility 0s .48s, --rev .6s var(--soft) .48s; }
}
.js .reveal { transition: visibility 0s calc(var(--i, 0) * 120ms), --rev .65s var(--soft) calc(var(--i, 0) * 120ms); }
/* Карточки возможностей сохраняют проявление и переходы наведения.
   Их правило с #steps иначе перекрывает общий transition у .reveal. */
.js #steps .steps li.reveal {
  transition: visibility 0s calc(var(--i, 0) * 120ms), --rev .65s var(--soft) calc(var(--i, 0) * 120ms),
    border-color .3s var(--out), box-shadow .3s var(--out);
}
@media (prefers-reduced-motion: reduce) {
  .demo-stage .photo, .demo > .hero-h1, .house-state, .stage .chip-t, .stage .tag-zont, .hero-phone .device, .hero-phone .demo-ctl,
  .hero-aside, .js .reveal, .js #steps .steps li.reveal { transition-duration: 0s; }
}