/* Hallmark · shape: custom, one wire runs through the page · genre: modern-minimal · theme: brand (Ярус · Город)
 * idea: "серый провод из клюва голубя-логотипа ведёт от звонка жильца до кнопки Подключить" · vibe: "настоящие экраны, настоящий голос линии"
 * paper: oklch(100% 0 0), cream oklch(97.6% 0.035 88) from the brand poster · accent: oklch(88% 0.17 95) · display: Onest · body: Onest · hero: city poster with the real phone screen · nav: edge-aligned · footer: one row
 * axes: light/geometric-sans/warm · posture: product · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: первый кадр телефона показывает проверочный номер, переснять на демо-данных после выпуска приложения */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Onest"; src: url("./onest-cyrillic-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; src: url("./onest-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }

:root { --display-weight: 800; --tracking-display: -0.03em; --color-ink-soft: color-mix(in oklab, var(--color-paper) 72%, var(--color-ink)); }
html { scroll-behavior: smooth; }
h1, h2, h3 { letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 13ch; font-size: clamp(2.75rem, 5.4vw + 0.5rem, 5.25rem); line-height: 1; }
h2 { max-width: 20ch; font-size: clamp(2rem, 3vw + 1rem, 3.5rem); }
.lead { color: var(--color-ink-2); margin-top: var(--space-md); }

/* кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: var(--space-sm) var(--space-lg); border: 0; border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink)); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--color-rule); color: var(--color-muted); cursor: not-allowed; }
.btn-quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--color-ink); }
.btn-quiet:hover { background: var(--color-ink); color: var(--color-paper); }
.btn-small { min-height: 44px; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }

/* шапка */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 94%, transparent); box-shadow: 0 1px 0 var(--color-rule); }
.nav-row { display: flex; align-items: center; gap: var(--space-lg); min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 800; letter-spacing: -0.02em; font-size: var(--text-lg); text-decoration: none; }
.nav nav { display: flex; gap: var(--space-lg); margin-left: auto; font-size: var(--text-sm); }
.nav nav a { text-decoration: none; padding: var(--space-sm) 0; color: var(--color-ink-2); transition: color var(--dur-micro) var(--ease-out); }
.nav nav a:hover { color: var(--color-ink); text-decoration: underline; }
@media (max-width: 60rem) { .nav nav { display: none; } .nav .btn { margin-left: auto; } }

/* провод: идёт по полям страницы, над фоном секций и под содержимым */
main { position: relative; }
main .container, main .rail { position: relative; z-index: 4; }
.wire { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.wire path { fill: none; stroke: var(--color-wire); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wire-at { position: absolute; width: 0; height: 0; }
.wire-left { left: calc(var(--gutter) / 2); top: calc(var(--section-gap) * -0.5); }
.wire-right { right: calc(var(--gutter) / 2); top: calc(var(--section-gap) * -0.5); }
.voice .wire-left, .apps .wire-left { top: calc(var(--section-gap) * 0.5); }
.wire-socket { left: 0; bottom: calc(var(--space-lg) + 26px); }
.wire-socket::after { content: ""; position: absolute; left: -7px; top: -14px; width: 14px; height: 28px; border-radius: 5px; background: var(--color-ink); }
@media (max-width: 60rem) { .wire { display: none; } .wire-socket::after { display: none; } }

/* первый экран */
.hero { position: relative; background: var(--color-paper-2); overflow: clip; }
.hero-city { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); align-items: center; min-height: calc(100svh - 68px); padding-block: var(--space-xl); }
.hero .lead { max-width: 30ch; }
.terms { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.hero-phone { position: relative; margin: 0; margin-right: 6vw; }
.hero-phone .wire-at { left: 50%; bottom: 0; }
.screen { border-radius: 28px; box-shadow: var(--shadow-float); background: var(--color-paper); }
.hero-phone .screen { width: auto; height: min(calc(100svh - 132px), 860px); }
@media (max-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-city { top: auto; bottom: 0; height: 62%; object-position: 70% bottom; opacity: 0.5; }
  .hero-phone { margin-inline: auto; }
  .hero-phone .screen { height: auto; width: min(68vw, 300px); }
}

/* голос */
.voice { position: relative; padding-block: var(--section-gap); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); align-items: start; }
.clips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.clip { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-xs) var(--space-md); align-items: center; padding: var(--space-md); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.clip:hover { border-color: var(--color-ink); }
.clip.is-playing { background: var(--color-paper-2); border-color: var(--color-ink); }
.clip-play { position: relative; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--color-ink); cursor: pointer; grid-row: span 2; }
.clip-play::before { content: ""; position: absolute; left: 18px; top: 15px; width: 16px; height: 18px; background: var(--color-paper); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.clip-play[aria-pressed="true"]::before { left: 16px; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.clip-text { margin: 0; font-size: var(--text-lg); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.clip-when { display: block; font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; color: var(--color-muted); margin-bottom: var(--space-2xs); }
.bars { grid-column: 2; display: flex; align-items: center; gap: var(--space-3xs); height: 28px; }
.bars i { flex: 1 1 0; min-width: 1px; background: var(--color-rule); border-radius: 1px; transform-origin: center; transition: background-color var(--dur-micro) linear; }
.bars i.on { background: var(--color-ink); }
@media (max-width: 60rem) { .split { grid-template-columns: minmax(0, 1fr); } }

/* мастер */
.master { background: var(--color-paper-2); padding-block: var(--section-gap); }
.master-grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl); align-items: center; }
.master-text { position: static; }
.call { background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-card); padding: var(--space-lg); display: grid; gap: var(--space-md); }
.call-who { color: var(--color-ink-soft); font-size: var(--text-sm); }
.call-text { font-size: var(--text-lg); line-height: 1.35; font-weight: 600; min-height: 5.4em; white-space: pre-line; }
.keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.keys button { min-height: 52px; border: 1px solid var(--color-ink-2); border-radius: var(--radius-control); background: transparent; color: var(--color-paper); font-size: var(--text-xl); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.keys button:hover { background: var(--color-paper); color: var(--color-ink); }
.keys button:active { background: var(--color-accent); color: var(--color-accent-ink); }
.keys button:disabled { opacity: 0.35; cursor: not-allowed; background: transparent; color: var(--color-paper); }
.call-again { justify-self: start; min-height: 44px; padding: var(--space-xs) 0; border: 0; background: none; color: var(--color-paper); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.call :focus-visible { outline-color: var(--color-accent); }
@media (max-width: 60rem) { .master-grid { grid-template-columns: minmax(0, 1fr); } }

/* заявка */
.ticket { position: relative; padding-top: var(--section-gap); }
.rail { list-style: none; margin: var(--space-xl) 0 0; padding: var(--space-md) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) var(--space-xl); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: var(--space-lg); overflow-x: auto; scroll-snap-type: x proximity; }
.rail li { scroll-snap-align: center; display: grid; gap: var(--space-md); align-content: start; }
.rail .screen { width: 100%; height: auto; border-radius: 22px; box-shadow: var(--shadow-rest), 0 0 0 1px var(--color-rule); }
.rail p { font-weight: 600; line-height: 1.3; }
.rail:focus-visible { outline-offset: -4px; }

/* диспетчер */
.desk { position: relative; padding-top: var(--section-gap); }
.desk .container { position: relative; }
.desk-shot { width: 100%; margin-top: var(--space-xl); border-radius: var(--radius-card); box-shadow: var(--shadow-float), 0 0 0 1px var(--color-rule); }
.desk-notes { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
@media (max-width: 60rem) { .desk-notes { grid-template-columns: minmax(0, 1fr); } }

/* линия */
.line { margin-top: var(--section-gap); background: var(--color-ink); color: var(--color-paper); padding-block: var(--section-gap); }
.line .lead { color: var(--color-ink-soft); }
.line-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); align-items: end; }
.line-fact { font-size: var(--text-lg); line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 60rem) { .line-grid { grid-template-columns: minmax(0, 1fr); } }

/* приложения */
.apps { position: relative; padding-block: var(--section-gap); }
.app-list { list-style: none; margin: var(--space-lg) 0 0; padding: 0; }
.app-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-md); align-items: center; min-height: 76px; border-top: 1px solid var(--color-rule); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.app-list li:last-child { border-bottom: 1px solid var(--color-rule); }
.app-ver { color: var(--color-muted); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { .app-list li { grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--space-sm); } .app-ver { grid-column: 1; grid-row: 2; } .app-list .btn { grid-row: 1 / span 2; grid-column: 2; } }

/* подключение */
.connect { background: var(--color-accent); color: var(--color-accent-ink); padding-block: var(--section-gap); }
.connect .lead { color: inherit; }
.connect-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl); align-items: start; }
form { position: relative; display: grid; gap: var(--space-md); background: var(--color-paper); color: var(--color-ink); border-radius: var(--radius-card); padding: var(--space-lg); box-shadow: var(--shadow-float); }
form label { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; }
form input:not([type="checkbox"]) { min-height: 48px; padding: var(--space-sm); border: 1px solid var(--color-field); border-radius: 12px; background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); font-weight: 400; transition: border-color var(--dur-micro) var(--ease-out); }
form input:not([type="checkbox"]):hover { border-color: var(--color-ink); }
form input[aria-invalid="true"] { border-color: var(--color-error); }
form .consent { grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-xs); align-items: start; font-weight: 400; }
form .consent input { width: 22px; height: 22px; margin: 0; accent-color: var(--color-ink); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: var(--color-error); font-weight: 600; font-size: var(--text-sm); }
.form-done { background: var(--color-paper); color: var(--color-ink); border-radius: var(--radius-card); padding: var(--space-xl) var(--space-lg); display: grid; gap: var(--space-xs); }
@media (max-width: 60rem) { .connect-grid { grid-template-columns: minmax(0, 1fr); } }

/* подвал */
.foot { padding-block: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.foot .brand { font-size: var(--text-md); color: var(--color-ink); }
.foot a:last-child { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .wire path { stroke-dashoffset: 0; } }

/* политика */
.policy { max-width: 760px; padding-block: var(--space-2xl) var(--section-gap); }
.policy h1 { font-size: clamp(2rem, 3vw + 1rem, 3.25rem); max-width: 18ch; }
.policy h2 { font-size: var(--text-xl); margin-top: var(--space-xl); }
.policy p { margin-top: var(--space-xs); color: var(--color-ink-2); }