/* Лендинг seemba.ru (SEEMBA-101): светлая премиальная страница с сюжетом на прокрутке. */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/onest-cyrillic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/onest-latin-wght-normal.woff2) format("woff2-variations");
  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;
}

:root {
  --bg: #fbfaf7;
  --paper: #ffffff;
  --sand: #f3f0ea;
  --ink: #0d1321;
  --ink-2: #474c59;
  --ink-3: #626776;
  --line: #e7e3db;
  --blue: #2448d8;
  --blue-hover: #1d3cbb;
  --blue-soft: #eaf0ff;
  --navy: #0b1a3d;
  --orange: #e2601f;
  --orange-ink: #a8430f;
  --orange-soft: #fff0e6;
  --green: #178a4a;
  --green-soft: #e7f6ec;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* Отклик на нажатие — мгновенный, смена состояния — быстрая, крупные поверхности — плавнее */
  --t-press: 100ms;
  --t-ui: 180ms;
  --t-surface: 500ms;
  --shadow: 0 1px 2px rgb(13 19 33 / 0.05), 0 8px 24px -8px rgb(13 19 33 / 0.12);
  --shadow-xl: 0 2px 6px rgb(13 19 33 / 0.05), 0 40px 80px -24px rgb(13 19 33 / 0.28);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.consult-copy :focus-visible, .foot :focus-visible, .aud-dark :focus-visible { outline-color: #fff; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }

.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px;
  background: var(--blue); color: #fff; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; color: #fff; }

.kicker { color: var(--blue); font-weight: 650; font-size: 0.9375rem; letter-spacing: 0.01em; margin-bottom: 14px; }
.h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 750; }
.sub { margin-top: 18px; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--ink-2); max-width: 34em; }
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; font-weight: 650; }

/* Кнопки: отклик на нажатие сразу */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out), transform var(--t-press) ease-out;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn.sm { min-height: 40px; padding: 0 18px; font-size: 0.9375rem; }
.btn.lg { min-height: 58px; padding: 0 30px; font-size: 1.0625rem; }
.btn.block { width: 100%; }
.btn.primary {
  background: var(--blue); color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 8px 24px -8px rgb(36 72 216 / 0.6);
}
.btn.primary:hover { background: var(--blue-hover); color: #fff; }
.btn.quiet { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn.quiet:hover { border-color: #cfcabe; color: var(--ink); }
.btn[disabled] { opacity: 0.65; cursor: progress; transform: none; }

/* Шапка */
.top {
  position: sticky; top: 0; z-index: 30;
  transition: background-color var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.top.scrolled {
  background: rgb(251 250 247 / 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 10px 24px -18px rgb(13 19 33 / 0.35);
}
.top.on-dark { background: rgb(11 26 61 / 0.92); box-shadow: 0 1px 0 rgb(255 255 255 / 0.08); }
.top.on-dark .logo, .top.on-dark .link-login { color: #fff; }
.top.on-dark .nav a { color: rgb(255 255 255 / 0.78); }
.top.on-dark .nav a:hover { color: #fff; background: rgb(255 255 255 / 0.1); }
.top.on-dark :focus-visible { outline-color: #fff; }
/* Форма уже на экране — вторая кнопка «Консультация» над ней лишняя */
.top-actions .btn { transition: opacity var(--t-ui), visibility 0s, background-color var(--t-ui), transform var(--t-press) ease-out; }
.top.on-dark .top-actions .btn { opacity: 0; visibility: hidden; transition: opacity var(--t-ui), visibility 0s var(--t-ui); }
@media (prefers-reduced-transparency: reduce) {
  .top.scrolled { background: var(--bg); backdrop-filter: none; }
  .top.on-dark { background: var(--navy); }
}
.top-row { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 750; font-size: 1.25rem; letter-spacing: -0.02em; }
.logo:hover { color: var(--ink); }
.logo svg, .paper-logo svg { width: 30px; height: 30px; }
.logo svg rect, .paper-logo svg rect { fill: var(--blue); }
.logo svg path, .paper-logo svg path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.nav { display: flex; gap: 4px; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 0.9375rem; padding: 8px 14px; border-radius: 999px; transition: background-color var(--t-ui); }
.nav a:hover { color: var(--ink); background: rgb(13 19 33 / 0.05); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.link-login { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9375rem; padding: 8px 4px; }
.link-login:hover { color: var(--blue); }

/* Появление при загрузке и прокрутке */
@media (prefers-reduced-motion: no-preference) {
  .js .up { animation: up 600ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-surface) var(--ease-out), transform var(--t-surface) var(--ease-out); transition-delay: var(--d, 0ms); }
  .js .reveal.in { opacity: 1; transform: none; }
}
@keyframes up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* 1. Первый экран */
.hero { position: relative; padding: clamp(28px, 6vw, 72px) 0 clamp(72px, 10vw, 140px); }
.hero-glow {
  position: absolute; inset: -80px 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 78% 38%, rgb(91 124 250 / 0.22), transparent 70%),
    radial-gradient(30% 40% at 92% 70%, rgb(255 168 120 / 0.22), transparent 70%),
    radial-gradient(40% 40% at 10% 10%, rgb(255 224 190 / 0.35), transparent 70%);
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px;
  border-radius: 999px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 0.9375rem; font-weight: 600; color: var(--ink-2);
}
.pulse { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--green); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .pulse::after { animation: ping 2.4s var(--ease-out) infinite; } }
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } }
h1 {
  margin-top: 28px;
  font-size: clamp(2.75rem, 5.6vw, 4.75rem);
  line-height: 1; letter-spacing: -0.04em; font-weight: 780;
}
.lead { margin-top: 28px; font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.5; color: var(--ink-2); max-width: 30em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.trust { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--ink-3); font-size: 0.9375rem; font-weight: 500; }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23178a4a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.hero-stage { position: relative; aspect-ratio: 1 / 1; max-width: 560px; justify-self: center; width: 100%; display: grid; place-items: center; }
.rings { position: absolute; inset: 0; display: grid; place-items: center; }
.rings span {
  --s: 1; --o: 0.5;
  position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgb(36 72 216 / 0.28);
  transform: scale(var(--s)); opacity: var(--o);
}
.rings span:nth-child(2) { --s: 1.45; --o: 0.3; }
.rings span:nth-child(3) { --s: 1.9; --o: 0.15; }
@media (prefers-reduced-motion: no-preference) {
  .js .rings span { animation: ring 3s var(--ease-out) infinite; }
  .js .rings span:nth-child(2) { animation-delay: -1s; }
  .js .rings span:nth-child(3) { animation-delay: -2s; }
  .js .led { animation: led 2.4s ease-in-out infinite; }
  .hero-stage:not(.live) .rings span, .hero-stage:not(.live) .led { animation-play-state: paused; }
}
@keyframes ring { 0% { transform: scale(0.95); opacity: 0.6; } 100% { transform: scale(2); opacity: 0; } }
@keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.device { position: relative; width: 50%; z-index: 1; }
@media (prefers-reduced-motion: no-preference) { .js .device { animation: up 700ms var(--ease-out) 150ms both; } }
.device-svg { display: block; width: 100%; filter: drop-shadow(0 30px 40px rgb(13 19 33 / 0.18)) drop-shadow(0 4px 8px rgb(13 19 33 / 0.08)); }
.led { fill: var(--green); }
.shelf { position: absolute; left: -30%; right: -30%; bottom: -4%; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgb(13 19 33 / 0.16), transparent); filter: blur(4px); }
.float-card {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px; border-radius: 18px;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: var(--shadow-xl); font-size: 0.875rem; line-height: 1.35;
}
.float-card b { display: block; font-weight: 650; }
.float-card small { display: block; color: var(--ink-3); font-size: 0.8125rem; }
.fc-alert { top: 9%; left: -4%; }
.fc-ok { bottom: 11%; right: -2%; }
@media (prefers-reduced-motion: no-preference) {
  .js .fc-alert { animation: pop 600ms var(--ease-out) 500ms both; }
  .js .fc-ok { animation: pop 600ms var(--ease-out) 800ms both; }
}
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(0.94); } to { opacity: 1; transform: none; } }
.fc-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex: none; }
.fc-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fc-icon.warn { background: var(--orange-soft); color: var(--orange-ink); }
.fc-icon.ok { background: var(--green-soft); color: var(--green); }

/* 2. Сюжет «одна ночь»: экран закреплён, прогресс — от прокрутки */
.night { position: relative; padding: clamp(72px, 10vw, 120px) 0; background: var(--paper); border-block: 1px solid var(--line); }
.js .night { height: 300vh; padding: 0; }
.js .night-sticky {
  position: sticky; top: 72px; height: calc(100vh - 72px); height: calc(100svh - 72px);
  display: flex; align-items: center; overflow: hidden;
}
.night-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.night-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 8px; }
.night-steps li {
  position: relative; padding: 14px 0 14px 28px; color: var(--ink-3);
  transition: color 300ms var(--ease-out);
}
.night-steps li .clock { color: var(--ink-3); }
.night-steps li.active, .night-steps li.active .clock { color: var(--ink); }
.night-steps li.active .clock { color: var(--blue); }
.js .night-steps .desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-surface) var(--ease-out); }
.js .night-steps .desc > p { overflow: hidden; }
.js .night-steps li.active .desc { grid-template-rows: 1fr; }
.night-steps li::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 0; width: 3px; border-radius: 3px; background: var(--line);
}
.night-steps li::after {
  content: ""; position: absolute; left: 0; top: 22px; width: 3px; height: 0; border-radius: 3px; background: var(--blue);
  transition: height var(--t-surface) var(--ease-out);
}
.night-steps li.active::after { height: calc(100% - 22px); }
.clock { font-size: 0.9375rem; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.night-steps h3 { margin-top: 2px; font-size: 1.375rem; }
.night-steps p { padding-top: 6px; color: var(--ink-2); max-width: 28em; }

.screen { border-radius: 32px; background: var(--sand); padding: 12px; box-shadow: var(--shadow-xl); border: 1px solid var(--line); }
.sky {
  --p: 0;
  position: relative; height: clamp(72px, 13vh, 120px); border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, #ffd9b8, #ffeedd);
}
.sky::after {
  content: ""; position: absolute; inset: 0; opacity: var(--p);
  background: linear-gradient(180deg, #1b2a5c, #3a4f8f);
}
.moon {
  position: absolute; z-index: 1; right: 44px; top: 30px; width: 40px; height: 40px; border-radius: 50%;
  background: #fff6dc; box-shadow: 0 0 40px rgb(255 240 200 / 0.8);
  transform: translateY(calc((1 - var(--p)) * 80px)); opacity: calc(0.2 + var(--p));
}
.sky-time {
  position: absolute; z-index: 1; left: 22px; bottom: 16px;
  font-size: clamp(1.75rem, 4.6vh, 2.75rem); font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--ink); transition: color 250ms var(--ease-out);
}
.sky-time { text-shadow: 0 1px 14px rgb(255 238 221 / 0.7); }
.sky.dark .sky-time { color: #fff; text-shadow: 0 1px 14px rgb(11 26 61 / 0.6); }
.screen-body { padding: 18px 10px 6px; }
.screen-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.screen-head b { display: block; font-size: 1.0625rem; }
.screen-head small { color: var(--ink-3); font-size: 0.875rem; }
.state { padding: 6px 12px; border-radius: 999px; font-size: 0.875rem; font-weight: 650; background: var(--green-soft); color: #0f6634; transition: background-color var(--t-ui), color var(--t-ui), opacity 120ms; }
.state.swap { opacity: 0; }
.state.loud { background: var(--orange-soft); color: var(--orange-ink); }
.graph { position: relative; margin-top: 16px; background: var(--paper); border-radius: 18px; padding: 14px 14px 8px; border: 1px solid var(--line); }
.graph-label { font-size: 0.8125rem; color: var(--ink-3); }
.plot { position: relative; }
.graph svg { display: block; width: 100%; height: clamp(80px, 16vh, 150px); overflow: visible; }
.thr { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
/* 70 из 160 по высоте viewBox — там проходит линия порога */
.thr-label { position: absolute; right: 0; top: calc(70 / 160 * 100%); transform: translateY(-100%); padding-bottom: 2px; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.2; }
.noise { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; }
.toasts { position: relative; height: 150px; margin-top: 14px; }
@media (min-width: 861px) and (max-height: 780px) {
  .night-copy .kicker { display: none; }
  .night-copy .h2 { font-size: 2.25rem; }
  .night-steps { margin-top: 20px; gap: 0; }
  .night-steps li { padding-block: 8px; }
  .night-steps h3 { font-size: 1.1875rem; }
  .toasts { height: 128px; }
  .toast { padding: 10px 14px; }
  .toast.t-msg { top: 34px; } .toast.t-ok { top: 68px; }
}
.toast {
  position: absolute; left: 0; right: 0; top: 0; display: grid; gap: 2px;
  padding: 14px 16px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 0.9375rem; opacity: 0; transform: translateY(14px) scale(0.98);
  transition: opacity var(--t-surface) var(--ease-out), transform var(--t-surface) var(--ease-out);
}
.toast span { color: var(--ink-2); font-size: 0.875rem; transition: opacity var(--t-ui); }
.toast.t-calm { border-left: 4px solid var(--green); opacity: 1; transform: none; }
.night[data-step="1"] .t-calm, .night[data-step="2"] .t-calm, .night[data-step="3"] .t-calm { opacity: 0; transform: translateY(-8px) scale(0.98); }
.toast.t-alert { border-left: 4px solid var(--orange); }
.toast.t-msg { top: 40px; border-left: 4px solid var(--blue); }
.toast.t-ok { top: 80px; border-left: 4px solid var(--green); }
.night[data-step="2"] .t-alert span, .night[data-step="3"] .t-alert span, .night[data-step="3"] .t-msg span { opacity: 0; }
.night[data-step="1"] .t-alert, .night[data-step="2"] .t-alert, .night[data-step="3"] .t-alert,
.night[data-step="2"] .t-msg, .night[data-step="3"] .t-msg,
.night[data-step="3"] .t-ok { opacity: 1; transform: none; }
.night[data-step="2"] .t-alert, .night[data-step="3"] .t-alert { transform: scale(0.96); opacity: 0.6; }
.night[data-step="3"] .t-msg { transform: scale(0.98); opacity: 0.75; }

/* 3. Цена проблемы */
.cost { padding: clamp(88px, 12vw, 160px) 0 clamp(64px, 8vw, 100px); }
.cost-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
.cost-head .sub { margin: 0; justify-self: end; }
.cost-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; margin: 64px 0 0; }
.cost-grid > div { padding: 28px 0 8px; border-top: 2px solid var(--ink); }
.cost-grid dt { font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 760; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-grid .pre { font-weight: 500; color: var(--ink-3); font-size: 0.55em; letter-spacing: 0; }
.cost-grid dd { margin: 16px 0 0; color: var(--ink-2); font-size: 1rem; max-width: 16em; }
.source { margin-top: 40px; color: var(--ink-3); font-size: 0.8125rem; max-width: 60em; }

/* 4. Bento */
.features { padding: clamp(64px, 8vw, 100px) 0 clamp(88px, 12vw, 160px); }
.features .h2 { max-width: 18em; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(260px, auto); gap: 16px; margin-top: 56px; }
.tile {
  position: relative; overflow: hidden; border-radius: 28px; padding: 28px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  background: var(--paper); border: 1px solid var(--line);
}
.tile p { color: var(--ink-2); font-size: 1rem; max-width: 30em; }
.tile-art { position: relative; flex: 1; min-height: 110px; margin-bottom: 12px; }
.t-noise { grid-column: span 4; grid-row: span 2; background: linear-gradient(160deg, #fff4ec, #ffe3d1); border-color: #ffd9c2; }
.t-noise h3 { font-size: 1.75rem; }
.t-smoke { grid-column: span 2; background: linear-gradient(160deg, #f4f2f7, #e9e5f0); }
.t-guests { grid-column: span 2; background: linear-gradient(160deg, #eef3ff, #e1e9ff); border-color: #d8e2ff; }
.t-leak { grid-column: span 2; background: linear-gradient(160deg, #ecf8fb, #dcf1f6); }
.t-tamper { grid-column: span 2; }
.t-climate { grid-column: span 2; background: linear-gradient(160deg, #eff8f1, #e1f2e6); }

/* Плитки: циклы идут, пока плитка на экране; в каждом кадре что-то видно */
@media (prefers-reduced-motion: no-preference) {
  .tile:not(.live) .tile-art *, .tile:not(.live) .tile-art::before, .tile:not(.live) .tile-art::after,
  .tile:not(.live) .tile-art *::after { animation-play-state: paused !important; }
}

/* Эквалайзер шума */
.eq { display: flex; align-items: flex-end; gap: 3%; padding: 0 2%; min-height: 220px; }
.eq i { flex: 1; height: 30%; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--orange), #ffb48a); transform-origin: bottom; }
.eq-thr { position: absolute; left: 0; right: 0; top: 38%; border-top: 2px dashed rgb(13 19 33 / 0.35); }
.eq-thr::after { content: "порог"; position: absolute; right: 0; top: -26px; font-size: 0.8125rem; color: var(--ink-3); }
.eq i:nth-child(1) { height: 22%; } .eq i:nth-child(2) { height: 30%; } .eq i:nth-child(3) { height: 26%; }
.eq i:nth-child(4) { height: 40%; } .eq i:nth-child(5) { height: 58%; } .eq i:nth-child(6) { height: 78%; }
.eq i:nth-child(7) { height: 90%; } .eq i:nth-child(8) { height: 72%; } .eq i:nth-child(9) { height: 84%; }
.eq i:nth-child(10) { height: 60%; } .eq i:nth-child(11) { height: 36%; } .eq i:nth-child(12) { height: 24%; }
@media (prefers-reduced-motion: no-preference) {
  .js .eq i { animation: eq 1.6s ease-in-out infinite alternate; }
  .js .eq i:nth-child(3n) { animation-duration: 1.2s; }
  .js .eq i:nth-child(4n+1) { animation-duration: 2s; animation-delay: -0.6s; }
}
@keyframes eq { from { transform: scaleY(0.55); } to { transform: scaleY(1); } }

/* Дым: непрерывный поток — клубы сдвинуты по фазе, кадр никогда не пустой */
.smoke i { position: absolute; left: 36%; bottom: 8%; width: 70px; height: 70px; border-radius: 50%; background: rgb(96 86 128 / 0.42); filter: blur(12px); opacity: 0.7; }
.smoke i:nth-child(2) { left: 48%; bottom: 36%; width: 56px; height: 56px; opacity: 0.5; }
.smoke i:nth-child(3) { left: 40%; bottom: 62%; width: 48px; height: 48px; opacity: 0.3; }
@media (prefers-reduced-motion: no-preference) {
  .js .smoke i { left: 38%; bottom: 0; width: 64px; height: 64px; animation: smoke 3.6s ease-out infinite; }
  .js .smoke i:nth-child(2) { animation-delay: -1.2s; }
  .js .smoke i:nth-child(3) { animation-delay: -2.4s; }
}
@keyframes smoke {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  20% { opacity: 0.8; }
  100% { transform: translate(14px, -64px) scale(1.5); opacity: 0; }
}

/* Календарь броней */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-content: center; }
.cal i { aspect-ratio: 1; border-radius: 10px; background: rgb(255 255 255 / 0.8); border: 1px solid #d8e2ff; }
.cal i.busy { background: var(--blue); border-color: var(--blue); }
.cal i.alarm { background: var(--orange); border-color: var(--orange); }
@media (prefers-reduced-motion: no-preference) { .js .cal i.alarm { animation: alarm 1.8s ease-in-out infinite; } }
@keyframes alarm { 0%, 100% { box-shadow: 0 0 0 0 rgb(226 96 31 / 0.45); } 50% { box-shadow: 0 0 0 8px rgb(226 96 31 / 0); } }

/* Капля падает снова и снова; лужица видна всегда, по ней расходится круг */
.drop i { position: absolute; left: calc(50% - 14px); top: 18%; width: 28px; height: 28px; border-radius: 0 50% 50% 50%; background: linear-gradient(135deg, #5ec4dd, #2a8fb0); transform: rotate(45deg); }
.drop::after { content: ""; position: absolute; left: calc(50% - 40px); bottom: 6px; width: 80px; height: 16px; border-radius: 50%; background: rgb(42 143 176 / 0.16); border: 2px solid rgb(42 143 176 / 0.45); }
.drop::before { content: ""; position: absolute; left: calc(50% - 40px); bottom: 6px; width: 80px; height: 16px; border-radius: 50%; border: 2px solid rgb(42 143 176 / 0.5); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .drop i { top: 6%; animation: drop 2.4s cubic-bezier(0.55, 0, 1, 0.45) infinite; }
  .js .drop::before { animation: ripple 2.4s ease-out infinite; }
}
@keyframes drop {
  0% { transform: translateY(0) rotate(45deg); opacity: 0; }
  15% { opacity: 1; }
  60% { transform: translateY(70px) rotate(45deg); opacity: 1; }
  61%, 100% { transform: translateY(70px) rotate(45deg); opacity: 0; }
}
@keyframes ripple { 0%, 58% { opacity: 0; transform: scale(0.6); } 62% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }

/* Наклон датчика: покачивание с паузой между повторами */
.tilt i { position: absolute; left: calc(50% - 40px); top: calc(50% - 40px); width: 80px; height: 80px; border-radius: 26px; background: linear-gradient(160deg, #fff, #e6e2da); box-shadow: 0 14px 24px rgb(13 19 33 / 0.14); }
.tilt i::after { content: ""; position: absolute; left: calc(50% - 4px); top: 26px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
@media (prefers-reduced-motion: no-preference) { .js .tilt i { animation: tilt 3s var(--ease-out) infinite; } }
@keyframes tilt { 0%, 55%, 100% { transform: none; } 65% { transform: rotate(-14deg) translateY(-6px); } 75% { transform: rotate(10deg) translateY(-4px); } 85% { transform: rotate(-4deg); } }

/* Термометр: ходит между теплом и холодом */
.temp i { position: absolute; left: calc(50% - 12px); top: 8%; width: 24px; height: 84%; border-radius: 12px; background: rgb(255 255 255 / 0.9); border: 1px solid #cfe7d6; overflow: hidden; }
.temp i::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 30%; border-radius: 8px; background: linear-gradient(0deg, #2f9e5d, #7fd39b); }
@media (prefers-reduced-motion: no-preference) { .js .temp i::after { animation: temp 3.2s ease-in-out infinite alternate; } }
@keyframes temp { from { height: 64%; } to { height: 30%; } }

.pilot-note { margin-top: 28px; color: var(--ink-3); font-size: 0.9375rem; max-width: 46em; }

/* 5. Отчёт */
.report { padding: clamp(88px, 12vw, 160px) 0; background: var(--sand); overflow: clip; }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 120px); align-items: center; }
.checks { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: center; font-weight: 500; }
.checks li::before {
  content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.paper-stage { position: relative; min-height: 460px; display: grid; place-items: center; }
.paper { position: absolute; width: min(380px, 88%); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-xl); }
.paper-back { height: 440px; transform: rotate(6deg) translate(24px, 10px); background: #f7f5f0; }
.paper-front { padding: 28px; transform: rotate(-3deg); }
@media (prefers-reduced-motion: no-preference) {
  .js .paper-front { transform: translate(40px, 40px) rotate(-7deg); opacity: 0; transition: transform 700ms var(--ease-out), opacity 400ms var(--ease-out); }
  .js .paper-back { transform: rotate(0) translate(0, 24px); opacity: 0; transition: transform 700ms var(--ease-out) 80ms, opacity 400ms var(--ease-out) 80ms; }
  .js .paper-stage.in .paper-front { transform: rotate(-3deg); opacity: 1; }
  .js .paper-stage.in .paper-back { transform: rotate(6deg) translate(24px, 10px); opacity: 1; }
}
.paper-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.paper-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; }
.paper-logo svg { width: 22px; height: 22px; }
.paper-tag { color: var(--ink-3); font-size: 0.8125rem; }
.paper-title { margin-top: 18px; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
.paper-rows { margin: 12px 0 0; }
.paper-rows div { display: flex; justify-content: space-between; padding: 7px 0; font-size: 0.9375rem; border-bottom: 1px dashed var(--line); }
.paper-rows dt { color: var(--ink-3); }
.paper-rows dd { margin: 0; font-weight: 600; }
.paper-chart { display: block; width: 100%; height: 90px; margin-top: 16px; overflow: visible; }
.paper-chart line { stroke: var(--ink-3); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.paper-chart path { fill: none; stroke: #c98a00; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.paper-foot { margin-top: 6px; color: var(--ink-3); font-size: 0.8125rem; }
.stamp {
  position: absolute; right: 22px; bottom: 54px; padding: 6px 12px; border: 2px solid var(--blue); border-radius: 10px;
  color: var(--blue); font-weight: 700; font-size: 0.875rem; transform: rotate(-12deg); background: rgb(255 255 255 / 0.85);
}

/* 6. Шаги */
.setup { padding: clamp(88px, 12vw, 160px) 0; }
.steps { position: relative; list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.steps::before { content: ""; position: absolute; left: 28px; right: calc((100% - 80px) / 3 - 28px); top: 28px; height: 2px; background: linear-gradient(90deg, var(--blue), #8ea6ff); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .js .steps::before { transform: scaleX(0); transition: transform 900ms var(--ease-out) 150ms; }
  .js .steps.drawn::before { transform: scaleX(1); }
  .js .steps li::before { transform: scaleY(0); transition: transform 600ms var(--ease-out) 200ms; }
  .js .steps li:nth-child(2)::before { transition-delay: 500ms; }
  .js .steps.drawn li::before { transform: scaleY(1); }
}
.step-n {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--blue); color: var(--blue); font-weight: 750; font-size: 1.25rem; margin-bottom: 24px;
}
.steps p { margin-top: 10px; color: var(--ink-2); }

/* 7. Для кого */
.audience { padding: 0 0 clamp(88px, 12vw, 160px); }
.aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.aud { border-radius: 32px; padding: clamp(28px, 4vw, 48px); background: var(--paper); border: 1px solid var(--line); }
.aud h3 { font-size: clamp(1.625rem, 2.6vw, 2.25rem); letter-spacing: -0.03em; }
.aud-tag { display: inline-block; margin-bottom: 18px; padding: 6px 12px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-weight: 650; font-size: 0.875rem; }
.aud ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.aud li { position: relative; padding-left: 28px; color: var(--ink-2); }
.aud li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 14px; height: 2px; background: var(--blue); }
.aud-dark { background: linear-gradient(160deg, #13265a, var(--navy)); border-color: transparent; color: #fff; }
.aud-dark .aud-tag { background: rgb(255 255 255 / 0.12); color: #fff; }
.aud-dark li { color: rgb(255 255 255 / 0.82); }
.aud-dark li::before { background: #8ea6ff; }

/* 8. Вопросы */
.faq-sec { padding: clamp(88px, 12vw, 140px) 0; background: var(--paper); border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-side { position: sticky; top: 110px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 68px; padding: 18px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.125rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1321' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.faq summary { transition: color var(--t-ui); }
.faq summary:hover { color: var(--blue); }
.faq summary::after { transition: transform 300ms var(--ease-out), background-color var(--t-ui); }
.faq summary:hover::after { background-color: var(--line); }
.faq summary:active::after { transform: scale(0.9); transition-duration: var(--t-press); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary:active::after { transform: rotate(45deg) scale(0.9); }
@media (prefers-reduced-motion: no-preference) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size 300ms var(--ease-out), content-visibility 300ms allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}
.faq details p { padding: 0 48px 24px 0; color: var(--ink-2); }

/* 9. Форма на тёмно-синей подложке */
.consult { position: relative; padding: clamp(88px, 12vw, 150px) 0; color: #fff; isolation: isolate; overflow: hidden; }
.consult-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(50% 60% at 15% 20%, rgb(91 124 250 / 0.45), transparent 70%),
    radial-gradient(40% 50% at 90% 90%, rgb(255 140 90 / 0.25), transparent 70%),
    var(--navy);
}
.consult-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: start; }
.consult .sub { color: rgb(255 255 255 / 0.78); }
.consult-points { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }
.consult-points li { display: flex; gap: 12px; align-items: center; color: rgb(255 255 255 / 0.92); }
.consult-points li::before {
  content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: rgb(255 255 255 / 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.consult-mail { margin-top: 32px; color: rgb(255 255 255 / 0.72); }
.consult-mail a { color: #fff; }
.form-card { background: var(--paper); color: var(--ink); border-radius: 28px; padding: clamp(24px, 4vw, 40px); box-shadow: 0 40px 80px -20px rgb(0 0 0 / 0.45); }
form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { font-size: 0.9375rem; font-weight: 550; }
.opt { color: var(--ink-3); font-weight: 400; }
input, select, textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid #8b8f99; border-radius: 14px;
  transition: border-color var(--t-ui), box-shadow var(--t-ui), background-color var(--t-ui);
}
input:hover, select:hover, textarea:hover { border-color: #5f6370; }
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626776' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; background-color: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
input[aria-invalid="true"] { border-color: #b3261e; }
::placeholder { color: var(--ink-3); opacity: 1; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 0.9375rem; color: var(--ink-2); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--blue); cursor: pointer; }
.err { color: #b3261e; font-size: 0.875rem; margin-top: -10px; }
.field .err { margin-top: 0; }
.form-status { font-size: 0.9375rem; color: #b3261e; }
.form-status:empty { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sent { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 48px 8px; outline: none; }
.sent-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--green-soft); color: var(--green); margin-bottom: 8px; }
.sent-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sent p { color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .sent:not([hidden]) { animation: pop 700ms var(--ease-out) both; } }

.foot { padding: 36px 0 calc(36px + env(safe-area-inset-bottom)); background: var(--navy); color: rgb(255 255 255 / 0.7); font-size: 0.9375rem; border-top: 1px solid rgb(255 255 255 / 0.08); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.foot-logo { color: #fff; font-weight: 750; font-size: 1.125rem; margin-right: auto; }
.foot a { color: rgb(255 255 255 / 0.85); text-decoration: none; padding: 10px 0; }
.foot a:hover { color: #fff; text-decoration: underline; }

/* Адаптив */
@media (max-width: 1024px) {
  .nav { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-stage { max-width: 460px; }
  .cost-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cost-head { grid-template-columns: 1fr; }
  .cost-head .sub { justify-self: start; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .t-noise { grid-column: span 2; grid-row: auto; }
  .t-smoke, .t-guests, .t-leak, .t-tamper, .t-climate { grid-column: span 1; }
  .report-grid, .consult-grid, .faq-grid { grid-template-columns: 1fr; }
  .faq-side { position: static; }
}

/* На телефоне сюжет: экран сверху, под ним только текущий шаг */
@media (max-width: 860px) {
  .night-grid { grid-template-columns: 1fr; gap: 16px; }
  .js .night { height: 280vh; }
  .js .night-grid { gap: 12px; }
  /* Заголовок раздела нужен читалкам экрана, но на телефоне не помещается в кадр */
  .js .night-copy .kicker, .js .night-copy .h2 {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .js .night-steps { margin: 0; position: relative; min-height: 150px; }
  .js .night-steps li { position: absolute; inset: 0 0 auto; opacity: 0; padding: 0; transform: translateY(10px); transition: opacity 300ms, transform 400ms var(--ease-out); }
  .js .night-steps li::before, .js .night-steps li::after { display: none; }
  .js .night-steps li.active { opacity: 1; transform: none; }
  .js .night-steps .desc { grid-template-rows: 1fr; }
  .night-steps h3 { font-size: 1.1875rem; }
  .night-steps p { font-size: 0.9375rem; line-height: 1.45; }
  .screen { border-radius: 24px; padding: 10px; }
  .sky { height: 56px; border-radius: 16px; }
  .sky-time { font-size: 1.5rem; bottom: 10px; left: 16px; }
  .moon { width: 24px; height: 24px; top: 16px; right: 22px; }
  .screen-body { padding: 12px 6px 4px; }
  .graph { margin-top: 10px; padding: 10px 10px 6px; }
  .graph svg { height: clamp(80px, 20svh, 260px); }
  /* На телефоне виден только последний тост */
  .toasts { height: 96px; margin-top: 10px; }
  .toast { padding: 10px 14px; }
  .toast.t-calm, .toast.t-msg, .toast.t-ok { top: 0; }
  .night[data-step="2"] .t-alert, .night[data-step="3"] .t-alert, .night[data-step="3"] .t-msg { opacity: 0; }
}

/* Низкий телефон: сюжет «ночи» целиком помещается в кадр */
@media (max-width: 860px) and (max-height: 700px) {
  .js .night-steps { min-height: 132px; }
  .sky { height: 44px; }
  .sky-time { font-size: 1.25rem; bottom: 8px; }
  .moon { top: 10px; }
  .graph svg { height: 72px; }
}
@media (max-width: 360px) { .toasts { height: 112px; } }

@media (max-width: 640px) {
  .wrap { width: min(1200px, 100% - 32px); }
  h1 { font-size: clamp(2.375rem, 10.5vw, 2.75rem); line-height: 1.04; letter-spacing: -0.03em; }
  .link-login { display: none; }
  .actions .btn { flex: 1 1 100%; }
  .float-card { font-size: 0.8125rem; padding: 10px 12px 10px 10px; }
  .fc-alert { left: 0; top: 2%; }
  .fc-ok { right: 0; bottom: 4%; }
  .cost-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .t-noise, .t-smoke, .t-guests, .t-leak, .t-tamper, .t-climate { grid-column: auto; }
  .eq { min-height: 150px; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  /* Номер слева, текст справа: линия идёт только между кружками, а не по тексту */
  .steps::before { display: none; }
  .steps li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; }
  .step-n { grid-row: 1 / span 2; margin-bottom: 0; }
  .steps h3 { padding-top: 14px; }
  .steps li:not(:last-child)::before {
    content: ""; position: absolute; left: 27px; top: 56px; bottom: -32px; width: 2px;
    background: linear-gradient(180deg, var(--blue), #8ea6ff); transform-origin: top;
  }
  .aud-grid, .field-pair { grid-template-columns: 1fr; }
  .cost-grid dd { max-width: none; }
  .foot-row { gap: 2px 24px; }
  .foot-logo { flex-basis: 100%; margin-bottom: 6px; }
  .paper-stage { min-height: 420px; }
  .faq details p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .night-steps li, .night-steps li::after, .night-steps .desc, .toast, .state, .sky-time, .steps::before { transition: none !important; }
}