/* Главная (DESIGN.md §8): .p-landing, блоки l-; начальные состояния анимаций — под .is-ctl или html.js[data-motion="on"] */
@layer page {

/* Общее. Лист 03 без content-visibility: его высоту меряет закрепление */
.p-landing .sheet:not(.l-hero, .l-e1) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.p-landing .sheet .grid { row-gap: var(--s5); }
.p-landing .grid__cell > * { margin-block: 0; }
.p-landing .grid__cell > * + * { margin-top: var(--s4); }
.p-landing :is(.l-ovl, .l-dwg__cv, .l-dwg__aux) { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.p-landing .l-ovl { z-index: 2; --wire-line: var(--cyan); }

/* Лист 01. h1 главной длиннее расчёта §3.3 — кегль меньше */
.p-landing .l-hero { min-height: min(calc(100svh - 64px), 900px); }
/* Рамка листа 01 — пером за 700 мс (§8.1) */
.p-landing .l-frame { display: none; }
html.js[data-motion="on"] .p-landing .l-hero::before { border-color: transparent; }
html.js[data-motion="on"] .p-landing .l-frame { display: block; position: absolute; z-index: -1; inset: var(--frame) var(--frame) var(--frame) var(--frame-l); --g: linear-gradient(var(--line) 0 0); background: var(--g) 0 0, var(--g) 100% 0, var(--g) 100% 100%, var(--g) 0 100%; background-repeat: no-repeat; animation: l-frame .7s linear both; }
@keyframes l-frame {
  0% { background-size: 0 2px, 2px 0, 0 2px, 2px 0; }
  31% { background-size: 100% 2px, 2px 0, 0 2px, 2px 0; }
  50% { background-size: 100% 2px, 2px 100%, 0 2px, 2px 0; }
  81% { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 0; }
  to { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; }
}
.p-landing .l-hero .sheet__title--h1 { font-size: clamp(2.1rem, 1.1rem + 2.5vw, 3.5rem); max-width: 20ch; }
.p-landing .l-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.p-landing .l-act .tel { margin: 0; }
/* «Вид А»: полка с мачтой, под кадром круг «Вид Б» */
.p-landing .l-hero__view { --d: 168px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--d); column-gap: var(--s3); align-content: start; padding-top: 76px; }
.p-landing .l-hero__view > * { grid-column: 1 / -1; min-width: 0; }
.p-landing .l-hero__view > .l-vidb { grid-column: 2; grid-row: 3; margin-top: calc(var(--d) / -3); }
.p-landing .l-hero__view > .qc__cap { grid-column: 1; grid-row: 3; }
.p-landing .l-vidb { position: relative; z-index: 6; }
.p-landing .l-vidb__ring { width: var(--d); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: var(--sheet); border: 1px solid var(--line); border-radius: 50%; outline: .5px solid transparent; transition: .12s linear; }
.p-landing .l-vidb__ring .wire { width: 82%; }
.p-landing .l-vidb__t { display: block; width: max-content; max-width: 100%; margin-top: var(--s2); padding-bottom: 2px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.p-landing .l-vidb__t::before { content: attr(data-t); }
.p-landing .l-mast { position: absolute; top: 0; right: 0; z-index: 5; height: 64px; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: var(--s2); }
.p-landing .l-mast img { width: 40px; height: 64px; object-fit: contain; }
.p-landing .l-mast::before { content: ""; position: absolute; right: 0; bottom: 0; width: 40px; height: 64px; background: var(--cyan); mask: url(../assets/svg/tower.svg) 50% / contain no-repeat; opacity: 0; transition: opacity .12s linear; }
.p-landing .l-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 5; fill: none; stroke: var(--cyan); stroke-width: 1; stroke-dasharray: 12 3 2 3; transition: .12s linear; }
.p-landing .l-arcs.is-rest { opacity: 0; }
/* «Состав системы»: WA1 — мачта и дуги, A3 — круг */
.p-landing .l-hero:has(tr[data-node="a3"]:is(:hover, :focus-within)) .l-vidb__ring { border-color: var(--cyan); outline-color: var(--cyan); }
.p-landing .l-hero:has(tr[data-node="wa1"]:is(:hover, :focus-within)) .l-mast::before { opacity: 1; }
.p-landing .l-hero:has(tr[data-node="wa1"]:is(:hover, :focus-within)) .l-arcs { stroke-width: 1.5; opacity: 1; }
/* Переход со входа: контурный слой целиком и луч */
.p-landing .l-login-line, .p-landing .l-beam { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.p-landing .l-login-line { height: 100%; z-index: 1; mix-blend-mode: screen; transition: opacity .6s cubic-bezier(.2, .7, .2, 1); }
.p-landing .l-login-line.is-out { opacity: 0; }
.p-landing .l-beam { height: 2px; z-index: 4; background: var(--cyan); }
.p-landing .l-beam::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 64px; opacity: .35; background: linear-gradient(to top, var(--cyan), transparent); }

/* Лист 02 */
/* без JS облака нет: обводка (components.css) и «△1» */
html:not(.js) .p-landing .l-notes .cloud::after { content: "△1"; }

/* Чертежи листов 02 и 06: холст на всё поле, картинка без JS, выноски по якорям */
.p-landing .l-dwg__head { margin-bottom: var(--s2); }
.p-landing .l-dwg__f { position: relative; aspect-ratio: var(--ar); }
.p-landing .l-dwg__m { position: absolute; left: calc(var(--x, 0) * 1%); top: calc(var(--y, 0) * 1%); width: calc(var(--w, 100) * 1%); }
.p-landing .l-dwg__still { display: block; width: 100%; height: auto; }
.p-landing :not(.is-live) > .l-dwg__cv, .p-landing .is-live .l-dwg__still { visibility: hidden; }
.p-landing .l-dwg .callout { z-index: 2; }
.p-landing .l-dwg__aux { fill: none; stroke: var(--line); }
.p-landing .l-dwg__aux * { vector-effect: non-scaling-stroke; }
.p-landing :is(.l-dwg__axis, .l-horn__fr) { stroke: var(--hidden); stroke-dasharray: 12 3 2 3; }
.p-landing .l-horn__fr { stroke: var(--cyan); transition: opacity .6s linear; }
.p-landing .l-horn__fr :nth-child(2) { opacity: .6; }
.p-landing .l-horn__fr :nth-child(3) { opacity: .32; }
.p-landing .is-run .l-horn__fr { opacity: 0; transition-duration: .12s; }
.p-landing .l-dwg__cap { margin-top: var(--s3); }
.p-landing .l-dwg__legend { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; color: var(--ink-2); }
.p-landing .l-dwg__legend [data-n]::before { content: attr(data-n) "\a0— "; content: attr(data-n) "\a0— " / ""; }
.p-landing .l-dwg__text { margin: var(--s2) 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.p-landing .l-site__views { display: grid; gap: var(--s5) var(--s4); }

/* Лист 03 */
.p-landing .l-pin.is-pin { height: calc(var(--h, 100vh) + 220vh); }
.p-landing .l-pin.is-pin > .sheet { position: sticky; top: var(--top, 0px); }
.p-landing .l-skip { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
.p-landing .l-skip:focus { position: static; display: inline-block; width: auto; height: auto; clip-path: none; }
.p-landing .l-e1__note { font-size: 15px; color: var(--ink-2); }
.p-landing .e1 { --nd: 96px; position: relative; margin-block: var(--s5); }
.p-landing .e1__steps { display: grid; row-gap: var(--s5); }
.p-landing .e1__step { position: relative; display: grid; grid-template-columns: var(--nd) minmax(0, 1fr); column-gap: var(--s4); align-content: start; }
.p-landing .e1__step > * { grid-column: 2; margin: 0; }
.p-landing .e1__step :is(h3, p) { margin-top: var(--s1); }
.p-landing .e1__node { grid-column: 1; grid-row: 1 / 4; width: var(--nd); height: var(--nd); color: var(--line); }
.p-landing .e1__node img, .p-landing .e1__ugo { display: block; width: 100%; height: 100%; object-fit: contain; }
.p-landing .e1__ugo { fill: none; stroke: currentColor; stroke-width: 1.25; }
/* линия связи 12 3 2 3: от узла к узлу и от ромба «ЧС» */
.p-landing .e1__step:not(:last-child)::after, .p-landing .e1__cs::after { content: ""; position: absolute; background: repeating-linear-gradient(var(--dir, 180deg), var(--line) 0 12px, transparent 0 15px, var(--line) 0 17px, transparent 0 20px); }
.p-landing .e1__step:not(:last-child)::after { left: calc(var(--nd) / 2); top: var(--nd); bottom: calc(-1 * var(--s5)); width: 1px; }
.p-landing .e1__cs { position: relative; display: flex; align-items: center; gap: var(--s2); height: 24px; margin: 0 0 var(--s4) calc(var(--nd) / 2 - 12px); }
.p-landing .e1__cs svg { width: 24px; height: 24px; fill: none; stroke: var(--alarm); stroke-width: 1.5; }
.p-landing .e1__cs .code { color: var(--alarm-text); }
.p-landing .e1__cs::after { left: 12px; top: 24px; width: 1px; height: var(--s4); }
.p-landing .e1__pulse, .p-landing .e1__cv { display: none; position: absolute; pointer-events: none; }
.p-landing .e1__cv { left: 0; top: 0; width: 100%; height: 100%; z-index: 2; }
.p-landing .e1.is-3d .e1__cv { display: block; }
.p-landing .e1.is-live .e1__node--3d img { visibility: hidden; }
/* узлы «включены» без JS и при паузе; под .is-ctl — прокруткой */
.p-landing .e1__fill { fill: var(--cyan); stroke: none; transform-box: fill-box; transform-origin: left; transition: transform .6s linear; }
.p-landing :is(.e1__ind, .e1__tick) { stroke: var(--cyan); transition: stroke .12s linear calc(var(--i) * 40ms); }
.p-landing .e1__tick { transition-delay: calc(var(--i) * 80ms); }
.p-landing .e1.is-ctl .e1__step:not(.is-on) .e1__fill { transform: scaleX(0); }
.p-landing .e1.is-ctl .e1__step:not(.is-on) :is(.e1__ind, .e1__tick) { stroke: var(--hidden); }
.p-landing .e1.is-ctl .e1__step:not(:last-child)::after { clip-path: inset(0 0 100% 0); transition: clip-path .4s linear; }
.p-landing .e1.is-ctl .e1__step.is-on::after, .p-landing .e1.is-h .e1__step:not(:last-child)::after { clip-path: none; }
.p-landing .e1:not(.is-ctl) .e1__t[data-t-on]::before, .p-landing .e1__step.is-on .e1__t[data-t-on]::before { content: attr(data-t-on); }
.p-landing .e1__step.is-current::before { content: ""; position: absolute; inset: var(--nd) auto 0 -7px; width: 2px; background: var(--signal); }
@media (min-width: 900px) {
  .p-landing .e1 { --nd: 88px; --cs: 56px; padding-left: var(--cs); }
  .p-landing .e1__steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .p-landing .e1__step { display: block; padding-right: var(--s3); overflow-wrap: break-word; hyphens: auto; }
  .p-landing .e1__step > .e1__node { margin-bottom: var(--s3); }
  .p-landing .e1__step h3 { font-size: 1rem; margin-top: var(--s2); }
  .p-landing .e1__step p { font-size: 15px; }
  .p-landing .e1__step:not(:last-child)::after { --dir: 90deg; left: var(--nd); top: calc(var(--nd) / 2); bottom: auto; width: calc(100% - var(--nd)); height: 1px; }
  .p-landing .e1__cs { position: absolute; left: 0; top: calc(var(--nd) / 2 - 12px); flex-direction: column; align-items: flex-start; height: auto; margin: 0; }
  .p-landing .e1__cs::after { --dir: 90deg; left: 24px; top: 12px; width: calc(var(--cs) - 24px); height: 1px; }
  .p-landing .e1.is-h .e1__pulse { display: block; left: 9px; top: calc(var(--nd) / 2 - 3px); z-index: 3; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); will-change: transform; }
  .p-landing .e1__pulse::before { content: ""; position: absolute; right: 3px; top: 2px; width: 40px; height: 2px; background: linear-gradient(to left, var(--signal), transparent); }
}
@media (min-width: 1100px) {
  .p-landing .e1 { --nd: 112px; }
  .p-landing .e1__step h3 { font-size: 1.125rem; }
}

/* Лист 04 */
.p-landing .l-w3 { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s4); }
.p-landing .l-w3 > * { margin: 0; }
.p-landing .l-w3 > .qc { flex: 1 1 100%; min-width: 0; }
.p-landing .l-w3__side { flex: 1 1 100%; display: grid; gap: var(--s3); }
.p-landing .l-w3__wire { position: relative; }
.p-landing .l-w3__dim::before { padding: 0 4px; background: var(--sheet); }
.p-landing .l-w3.is-ovl .l-w3__side { visibility: hidden; }
.p-landing .l-ovl--w { z-index: 3; }
.p-landing .l-w3__calls { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .22s linear; }
.p-landing .is-ex .l-w3__calls { opacity: 1; }
.p-landing .is-ex .l-w3__calls .callout { pointer-events: auto; }
.p-landing .l-w3__calls .l-w3__dim { position: absolute; white-space: nowrap; display: flex; justify-content: center; }
.p-landing .l-parts tr[data-part] { transition: background-color .12s linear; }
.p-landing .l-parts tr.is-hi { background: var(--sheet-2); }
.p-landing .l-parts tr.is-hi .spec__pos { color: var(--cyan); }

/* Листы 05–09 */
.p-landing .l-sub li + li { margin-top: var(--s1); }
.p-landing .l-list { align-items: start; }
.p-landing .l-list > * + * { margin-top: 0; }
.p-landing .l-list > .spec__cap { grid-column: 1 / -1; margin-bottom: var(--s2); }
.p-landing .l-kalka__docs > * + * { margin-top: var(--s4); }
.p-landing .l-kalka__note { margin: 0; padding-left: var(--s3); border-left: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }

/* Телефон */
@media (max-width: 767px) {
  .p-landing .l-act .btn { flex: 1 1 100%; }
  .p-landing .l-sys .spec__pos { display: none; }
  .p-landing .l-vidb__t { margin-left: auto; text-align: right; }
  .p-landing .l-list > .spec + .spec { margin-top: -1px; }
  .p-landing .spec td { hyphens: auto; }
  .p-landing .l-dwg__legend { display: grid; gap: 6px; color: var(--ink); }
}
@media (max-width: 399px) {
  .p-landing .l-hero__view > .qc__cap { grid-column: 1 / -1; grid-row: 4; }
}
@media (pointer: fine) {
  html[data-motion="on"] .p-landing .l-vidb .is-live > canvas { cursor: grab; }
}
/* Планшет и шире */
@media (min-width: 768px) {
  .p-landing .l-hero__view { --d: 220px; }
  .p-landing .l-w3 { flex-wrap: nowrap; }
  .p-landing .l-w3 > .qc { flex: 0 0 60%; }
  .p-landing .l-w3__side { flex: 1 1 0; }
  /* виды Г и Д одной высоты; фронты СРУ — за поле вбок */
  .p-landing .l-site__views { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .p-landing .l-dwg--sru .l-dwg__cv { left: -14%; width: 128%; max-width: none; }
}
/* Десктоп */
@media (min-width: 1100px) {
  .p-landing .l-hero__grid { grid-template-rows: auto 1fr; align-items: start; }
  .p-landing .l-hero__view { --d: 300px; grid-row: 1 / 3; grid-template-columns: calc(var(--d) - 24px) minmax(0, 1fr); column-gap: var(--s4); }
  .p-landing .l-hero__view > .l-vidb { grid-column: 1; margin-left: -24px; }
  .p-landing .l-hero__view > .qc__cap { grid-column: 2; }
  .p-landing .l-hero__sys { grid-row: 2; }
  .p-landing .l-mast { left: 0; right: auto; flex-direction: row; }
  .p-landing .l-mast::before { left: 0; right: auto; }
  .p-landing .l-vidb__t { margin-left: 24px; }
  .p-landing .l-naz__notes { grid-row: 1 / 3; align-self: center; }
  .p-landing .l-horn { grid-row: 2; }
  .p-landing .l-w3 { gap: 0; }
  .p-landing .l-w3 > .qc { flex-basis: calc(100% / 1.4); }
  .p-landing .l-w3__side { padding-left: var(--s4); }
  .p-landing .l-ops__fig { align-self: end; }
  .p-landing .l-kalka__docs { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: var(--s4) var(--s5); align-items: start; }
  .p-landing .l-kalka__docs > * { grid-column: 1; margin: 0; }
  .p-landing .l-kalka__docs > .l-kalka__note { grid-column: 2; grid-row: 1 / 3; }
}
@media print {
  .p-landing :is(.l-mast, .l-arcs, .l-vidb, .e1__pulse, .e1__cv, .l-ovl, .l-w3__calls, .l-w3__side, .l-dwg__cv) { display: none; }
  .p-landing .is-live .l-dwg__still { visibility: visible; }
  .p-landing .l-pin { height: auto; }
}
/* Телефон: «Вид А» и «Вид Б» сразу под заголовком (просьба владельца 05.10.2026), разметка прежняя */
@media (max-width: 767px) {
  .p-landing .l-hero__grid { row-gap: 0; }
  .p-landing .l-hero__text { display: contents; }
  .p-landing .l-hero__text > .sheet__head { order: 0; }
  .p-landing .l-hero__view { order: 1; margin-block: var(--s2) var(--s4); }
  .p-landing .l-hero__text > :not(.sheet__head) { order: 2; }
  .p-landing .l-hero__sys { order: 3; margin-top: var(--s5); }
}
}