/* KVANT LAB — страница. Токены бренда v16 (research/brand.css), геометрия DIRECTION.md. */
@font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --black: #0A0A0A; --deep: #1A1A1A; --graphite: #2E2E2E; --silver: #A6A6A6;
  --paper: #F2F2F0; --white: #FFFFFF; --line-l: #C6C6C4; --muted-l: #5F5F5F;
  --blue: #4778FF; --red: #FF4B42; --yellow: #F2D04F; --pink: #C995AA; --blue-t: #2E5BD6;
  --latin: "Space Grotesk", system-ui, sans-serif;
  --cyr: "Manrope", system-ui, sans-serif;
  --wrap: 1312px; --m: 64px; --g: 24px;
  --sec: clamp(88px, 8.9vw, 128px);
  --h1: clamp(36px, 5vw, 72px);
  --h2: clamp(30px, 3.9vw, 56px);
  --h3: clamp(22px, 1.95vw, 28px);
  --body: clamp(17px, 1.4vw, 20px);
  --lead: clamp(18px, 1.55vw, 22px);
  --ease: cubic-bezier(0.2, 0, 0, 1); --ease-in: cubic-bezier(0, 0, 0.2, 1); --ease-out: cubic-bezier(0.4, 0, 1, 1);
  --t1: 160ms; --t2: 240ms; --t3: 400ms;
  --hdr: 64px;
}
@media (max-width: 700px) { :root { --m: 24px; --g: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr); }
body { margin: 0; background: var(--black); color: var(--paper); font: 400 var(--body)/1.5 var(--cyr); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 50; background: var(--white); color: var(--black); padding: 8px 16px; }
.skip:focus { top: 8px; }

.wrap { width: min(100% - 2 * var(--m), var(--wrap)); margin-inline: auto; }
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); }
.label { font: 400 13px/1.3 var(--latin); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 700px) { .label { font-size: 12px; } }
.h2 { font-weight: 300; font-size: var(--h2); line-height: 1.15; letter-spacing: 0; text-wrap: balance; }
h3 { font-weight: 400; font-size: var(--h3); line-height: 1.25; }
.lead { font-size: var(--lead); line-height: 1.5; color: var(--mut); max-width: 36em; }
.cap { font-size: 14px; color: var(--mut); margin-top: 16px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot--blue { background: var(--blue); }
.dot--ink { background: var(--black); }
@media (min-width: 701px) { .nw { white-space: nowrap; } }

/* темы секций */
.sec { position: relative; padding-block: var(--sec); }
.sec--dark, [data-theme="dark"] { --bg: var(--black); --fg: var(--paper); --mut: var(--silver); --ln: var(--graphite); --surf: var(--deep); }
.sec--paper, [data-theme="light"] { --bg: var(--paper); --fg: var(--black); --mut: var(--muted-l); --ln: var(--line-l); --surf: var(--white); }
.sec { background: var(--bg); color: var(--fg); }
.sec__head { display: grid; gap: 24px; max-width: 880px; }
.sec__head .label { color: var(--mut); }

/* кнопки: radius 0, высота 40, 500 только здесь */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; font: 500 15px/1 var(--cyr); text-decoration: none; border: 1px solid transparent; border-radius: 0; white-space: nowrap; transition: background-color var(--t1) var(--ease), color var(--t1) var(--ease), border-color var(--t1) var(--ease); }
.arr { display: inline-block; font-family: var(--latin); transition: transform var(--t1) var(--ease); }
.btn:hover .arr, .btn:focus-visible .arr { transform: translateX(4px); }
.btn--light { background: var(--white); color: var(--black); }
.btn--light:hover { background: #D6D6D4; }
.btn--dark { background: var(--black); color: var(--paper); }
.btn--dark:hover { background: var(--deep); }
.btn--sec { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn--sec:hover { background: var(--deep); }
.btn--line { background: transparent; color: var(--black); border-color: var(--black); }
.btn--line:hover { background: var(--white); }
.ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 64px; }

/* rise — только лиды и метки */
html.motion [data-rise] { opacity: 0; transform: translateY(16px); }

/* ───────── шапка-хамелеон ───────── */
.hdr { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--hdr); color: var(--paper); background: transparent; border-bottom: 1px solid transparent; transition: background-color var(--t2) var(--ease), border-color var(--t2) var(--ease), color var(--t2) var(--ease); }
.hdr__in { height: 100%; display: flex; align-items: center; gap: 40px; }
.hdr__logo { position: relative; flex: none; width: 148px; color: var(--white); transition: color var(--t2) var(--ease); }
.logo { width: 148px; height: auto; }
.hdr__nav { display: flex; gap: 32px; margin-left: auto; font-size: 14px; color: var(--silver); opacity: var(--nav-o, 1); transition: color var(--t2) var(--ease); }
.hdr__nav a { text-decoration: none; }
.hdr__nav a:hover { color: currentColor; text-decoration: underline; text-underline-offset: 6px; }
.hdr__cta { flex: none; }
/* над героем: мягкая тёмная подложка сверху (щель света на 70 % проходит через меню), без blur и сплошной полосы */
.hdr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; z-index: -1; opacity: 0; transition: opacity var(--t2) var(--ease);
  background: linear-gradient(rgba(10,10,10,.7), rgba(10,10,10,.45) 45%, rgba(10,10,10,0)); }
.hdr[data-hdr="hero"]::before { opacity: 1; }
/* щель проходит прямо через меню: под пунктами ещё локальная подложка, иначе на p .3–.45 «Приложения и AI» ≈ 3:1 */
.hdr__nav { position: relative; isolation: isolate; }
.hdr__nav::before { content: ""; position: absolute; inset: -14px -28px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity var(--t2) var(--ease);
  background: radial-gradient(closest-side, rgba(10,10,10,.9) 60%, rgba(10,10,10,0)); transform: scaleX(1.15); }
.hdr[data-hdr="hero"] .hdr__nav::before { opacity: 1; }
.hdr[data-hdr="dark"] { background: var(--black); border-bottom-color: var(--graphite); }
.hdr[data-hdr="light"] { background: var(--paper); border-bottom-color: var(--line-l); color: var(--black); }
.hdr[data-hdr="light"] .hdr__logo { color: var(--black); }
.hdr[data-hdr="light"] .hdr__nav { color: var(--muted-l); }
.hdr[data-hdr="light"] .hdr__cta { color: var(--black); border-color: var(--black); }
.hdr[data-hdr="light"] .hdr__cta:hover { background: var(--white); }
/* мобильное меню: кнопка рядом с «Обсудить задачу», лист на весь экран (<dialog>: Esc и inert нативно, Tab по кругу в main.js) */
.hdr__menu { display: none; position: relative; flex: none; width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 0; }
.hdr__menu i, .menu__x i { position: absolute; left: 11px; right: 11px; height: 1px; background: currentColor; transition: transform var(--t2) var(--ease); }
.hdr__menu i:first-child { top: 15px; } .hdr__menu i:last-child { top: 23px; }
.hdr[data-hdr="light"] .hdr__menu { color: var(--black); }
.menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--black); color: var(--paper); flex-direction: column; opacity: 0; transition: opacity var(--t2) var(--ease), overlay var(--t2) allow-discrete, display var(--t2) allow-discrete; }
.menu[open] { display: flex; opacity: 1; }
@starting-style { .menu[open] { opacity: 0; } }
.menu::backdrop { background: transparent; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--hdr); border-bottom: 1px solid var(--graphite); }
.menu__x { position: relative; width: 40px; height: 40px; border: 1px solid var(--paper); }
.menu__x i { top: 19px; } .menu__x i:first-child { transform: rotate(45deg); } .menu__x i:last-child { transform: rotate(-45deg); }
.menu__nav { display: grid; margin-top: 32px; }
.menu__nav a { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--graphite); font-size: 32px; font-weight: 300; line-height: 1.15; text-decoration: none; }
.menu__nav .label { color: var(--silver); }
.menu__foot { display: grid; gap: 20px; margin-top: auto; padding-block: 32px 40px; }
.menu__foot .btn { justify-content: center; height: 48px; }
.menu__mail { font-size: 18px; color: var(--silver); }
html:has(.menu[open]) { overflow: hidden; }
@media (max-width: 960px) { .hdr__nav { display: none; } .hdr__cta { margin-left: auto; } .hdr__in { gap: 12px; } .hdr__menu { display: block; } }
@media (min-width: 961px) { .menu { display: none !important; } }
@media (max-width: 700px) { .hdr__cta { padding: 0 14px; } }
@media (max-width: 420px) { .hdr__logo, .logo { width: 140px; } .hdr__cta-x { display: none; } .hdr__cta { padding: 0 12px; } .hdr__in { gap: 8px; } }
@media (max-width: 350px) { .hdr__cta { display: none; } .hdr__menu { margin-left: auto; } }

/* ───────── 0 · герой ───────── */
/* Стык по MOTION А9: pin до p .97, #platform заходит под героя на --lap; фон героя кончается над рельсом. */
:root { --lap: 18svh; }
.hero { position: relative; z-index: 2; height: 100svh; color: var(--paper); overflow: clip;
  background: linear-gradient(90deg, var(--hero-bg, var(--black)) 55%, var(--hero-bg2, #141414)) top / 100% calc(100% - var(--lap)) no-repeat; }
.hero__canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100svh; z-index: 0; opacity: 0; transition: opacity var(--t3) var(--ease-in); }
html.barrier-ready .hero__canvas { opacity: var(--cv-o, 1); transition: none; }
/* постер p=0 со стенда A: виден с первых байт, уходит за 400 ms, когда барьер отрисовал первый кадр */
.hero__poster img { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100svh; object-fit: cover; object-position: 70% 50%; transition: opacity var(--t3) var(--ease); pointer-events: none; }
html.barrier-ready .hero__poster img { opacity: 0; }
html:not(.hero-live) .hero__poster { display: none; }
html:not(.hero-live) .hero__canvas { display: none; }
.hero__intro, .hero__exit { padding-inline: max(var(--m), (100% - var(--wrap)) / 2); }
.hero__intro { position: absolute; left: 0; right: 0; top: 0; height: 100svh; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); padding-top: 34svh; pointer-events: none; }
.hero__intro a, .hero__intro button { pointer-events: auto; }
/* знак: высота = капитель H1 × 2.93 (MOTION А7), верх по верхней линии капители первой строки */
.hero__sign { grid-column: 1; justify-self: start; height: calc(var(--h1) * .72 * 2.93); width: auto; margin-top: calc(13px * 1.3 + 24px + var(--h1) * .19); }
.hero__copy { grid-column: 2 / 10; }
.hero__label { display: flex; align-items: center; gap: 12px; color: var(--silver); margin-bottom: 24px; }
.hero__h1 { font-weight: 300; font-size: var(--h1); line-height: 1.08; letter-spacing: 0; }
.hero__h1 .w { display: inline-block; }
.hero__sub { margin-top: 32px; font-size: 20px; color: var(--silver); max-width: 34em; }
.hero__desc { margin-top: 12px; font: 300 14px/1.4 var(--latin); color: var(--silver); }
/* подписи фаз (DIRECTION «Правка 24.09» §4): колонки 2–6 на 64 % высоты, одна за раз, scrub */
/* 76 %, а не 64 %: на 64 % подпись 02 ложится на гаснущий подзаголовок тезиса (p .18–.33) */
.hero__phases { grid-column: 2 / 7; position: absolute; left: 0; right: 0; top: 76svh; display: grid; }
.ph { grid-column: 1; grid-row: 1; display: grid; gap: 10px; opacity: 0; position: relative; isolation: isolate; justify-self: start; }
/* локальная подложка под подписью: нити поля не перечёркивают текст (≥ 4,5:1 в любой момент) */
.ph::before { content: ""; position: absolute; inset: -32px -48px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10,10,10,.8) 45%, rgba(10,10,10,.5) 70%, rgba(10,10,10,0)); transform: scaleX(1.3); }
.ph__t, .ph .label { text-shadow: 0 0 24px #0A0A0A, 0 0 8px #0A0A0A; }
.ph .label { color: var(--silver); } .ph--red .label { color: var(--red); }
.ph__t { font-weight: 300; font-size: var(--h3); line-height: 1.25; color: var(--paper); }
html:not(.hero-live) .hero__phases, html:not(.hero-live) .exit__lab { display: none; }
.exit__lab { grid-column: 2 / 9; margin-bottom: 20px; color: var(--yellow); opacity: 0; }
.exit__lab.on-paper { color: var(--black); }
.hdr.nav-dim .hdr__nav { color: var(--paper); }
.hero__hint { position: absolute; left: max(var(--m), (100% - var(--wrap)) / 2); bottom: 32px; display: flex; gap: 16px; align-items: baseline; font-size: 14px; color: var(--silver); }
.hero__hint-arr { transition: transform var(--t2) var(--ease); }
.hero__hint.nudge .hero__hint-arr { transform: translateX(8px); }

.hero__exit { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-content: start; padding-top: 20svh; pointer-events: none; }
.hero__exit a { pointer-events: auto; }
.exit__copy { grid-column: 2 / 9; color: var(--black); }
.exit__thesis { font-weight: 300; font-size: var(--h2); line-height: 1.15; text-wrap: balance; }
.exit__sub { margin-top: 24px; font-size: 20px; color: var(--muted-l); max-width: 30em; }
.exit__cta { margin-top: 32px; }
html.hero-live .exit__copy { opacity: 0; visibility: hidden; }

html:not(.hero-live) .hero { height: auto; background: var(--paper); }
html:not(.hero-live) .hero__intro { position: relative; background: var(--black) url(../img/hero-poster.svg) center / cover no-repeat; }
html:not(.hero-live) .hero__exit { position: relative; height: auto; padding-block: var(--sec) 0; background: var(--paper); }

@media (max-width: 700px) {
  :root { --lap: 40svh; --h1: 32px; }
  .hero { background-size: 100% calc(100% - var(--lap)); }
  .hero__intro { grid-template-columns: 1fr; align-content: start; padding-top: 42svh; }
  .hero__sign { grid-column: 1; height: calc(var(--h1) * .72 * 2.93); margin: calc(var(--h1) * -.72 * 2.93) 0 0 -3px; }
  .hero__copy { grid-column: 1; }
  .hero__h1 br { display: none; }
  .hero__label { margin-bottom: 16px; }
  .hero__sub { font-size: 17px; margin-top: 20px; }
  .hero__hint { bottom: 20px; flex-direction: column; gap: 4px; }
  .hero__phases { grid-column: 1; top: auto; bottom: 24px; } /* место подсказки [ SCROLL / NEXT ], она гаснет к p .16 */ .exit__lab { grid-column: 1; }
  .hero__exit { grid-template-columns: 1fr; padding-top: 16svh; }
  .exit__copy { grid-column: 1; }
  .exit__sub { font-size: 17px; margin-top: 16px; }
  .exit__cta { margin-top: 24px; }
}

/* ───────── интерфейсы: материал (DIRECTION «Правка 24.09» §3) ─────────
   На Paper поверхность #1A1A1A/#0A0A0A и текст #F2F2F0, на тёмном #FFFFFF/#F2F2F0 и текст #0A0A0A.
   Свет один, справа сверху: блик ≤ 6 % белого от правого верхнего угла, тень без цвета. Текст внутри ≥ 13 px. */
.ui-s { --s-bg: #1A1A1A; --s-bg2: #0A0A0A; --s-ln: #2E2E2E; --s-fg: #F2F2F0; --s-mut: #A6A6A6; --s-chip: #262626;
  position: relative; background: var(--s-bg); color: var(--s-fg); border-radius: 4px; font: 400 14px/1.4 var(--cyr);
  box-shadow: 0 24px 48px -16px rgba(10,10,10,.18), 0 2px 6px rgba(10,10,10,.08); }
.ui-s::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: linear-gradient(225deg, rgba(255,255,255,.06), rgba(255,255,255,0) 42%); }
.sec--dark .ui-s, .ui-s.ui-l { --s-bg: #FFFFFF; --s-bg2: #F2F2F0; --s-ln: #E2E2DF; --s-fg: #0A0A0A; --s-mut: #5F5F5F; --s-chip: #F2F2F0;
  box-shadow: 0 32px 64px -24px rgba(0,0,0,.65); }
.sec--dark .ui-s::after, .ui-s.ui-l::after { background: linear-gradient(225deg, rgba(255,255,255,0) 40%, rgba(10,10,10,.08)); }
.mask { display: inline-block; width: var(--w, 3em); height: 1em; vertical-align: -.14em; font-style: normal; background: currentColor; border-radius: 2px; } /* плашка без текста: номера и суммы закрыты (DIRECTION «Правка 24.09» §3) */
.ui-s .mask { background: var(--s-mut); opacity: .55; }
/* телефон — предмет: радиус 32, рамка #0A0A0A 10 px */
.dev { position: relative; border-radius: 32px; padding: 10px; background: #0A0A0A; color: #F2F2F0;
  box-shadow: 0 24px 48px -16px rgba(10,10,10,.18), 0 2px 6px rgba(10,10,10,.1), inset 0 0 0 1px #2E2E2E; font: 400 14px/1.4 var(--cyr); }
.dev::after { content: ""; position: absolute; inset: 0; border-radius: 32px; pointer-events: none; z-index: 4;
  background: linear-gradient(225deg, rgba(255,255,255,.06), rgba(255,255,255,0) 38%); }
.dev__scr { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #111; }
.dev__scr::before { content: ""; position: absolute; top: 9px; left: 50%; width: 84px; height: 22px; margin-left: -42px; border-radius: 11px; background: #000; z-index: 2; }
.sbar { flex: none; display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 2px 22px 0 26px; font: 500 14px/1 var(--latin); }
.sbar__i { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.sbar__i i { width: 3px; background: currentColor; border-radius: 1px; }
.sbar__i i:nth-child(1) { height: 4px; } .sbar__i i:nth-child(2) { height: 6px; } .sbar__i i:nth-child(3) { height: 8px; } .sbar__i i:nth-child(4) { height: 11px; }
.sbar__i em { width: 22px; height: 11px; margin-left: 6px; border: 1px solid rgba(242,242,240,.5); border-radius: 3px; background: linear-gradient(90deg, currentColor 70%, transparent 70%) 1px 1px / calc(100% - 2px) calc(100% - 2px) no-repeat; }
.appbar { flex: none; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-bottom: 1px solid #262626; font-size: 16px; }
.appbar b { font-weight: 500; }
.appbar__back { font: 300 26px/1 var(--latin); color: #A6A6A6; }
.appbar__r { margin-left: auto; font-size: 13px; color: #A6A6A6; }
.dev__foot { margin-top: auto; padding: 12px 14px 18px; }
.dev__btn { display: flex; justify-content: center; align-items: center; height: 44px; border-radius: 10px; background: #F2F2F0; color: #0A0A0A; font-weight: 500; font-size: 15px; }
/* Telegram: шапка, пузыри, голосовые */
.tg { display: flex; flex-direction: column; overflow: hidden; }
.tg__bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--s-bg); border-bottom: 1px solid var(--s-ln); }
.tg__back { font: 300 26px/1 var(--latin); color: var(--s-mut); }
.ava { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #3A3A3A; color: #F2F2F0; font: 500 15px/1 var(--latin); flex: none; }
.tg__who { display: grid; line-height: 1.25; } .tg__who b { font-weight: 500; font-size: 15px; } .tg__who small { font-size: 13px; color: var(--s-mut); }
.tg__feed { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px 12px; background: var(--s-bg2); }
.msg { position: relative; max-width: 84%; padding: 8px 10px 7px; border-radius: 14px; font-size: 14px; line-height: 1.35; background: #262626; color: #F2F2F0; }
.msg--in { align-self: flex-start; border-bottom-left-radius: 4px; }
.msg--out { align-self: flex-end; border-bottom-right-radius: 4px; background: #F2F2F0; color: #0A0A0A; }
.msg time { font: 400 13px/1 var(--latin); color: #A6A6A6; }
.msg--out time { color: #5F5F5F; }
.msg > time { float: right; margin: 7px 0 0 10px; }
.voice { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; width: 84%; }
.voice__play { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 50%; background: #F2F2F0; position: relative; }
.voice__play::after { content: ""; position: absolute; left: 14px; top: 11px; border-left: 11px solid #0A0A0A; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.voice__wave { display: flex; align-items: center; gap: 2px; height: 22px; }
.voice__wave i { flex: 1; max-width: 3px; height: calc(var(--h) * 100%); min-height: 3px; border-radius: 2px; background: #F2F2F0; }
.voice__wave i:nth-child(n+12) { background: #6E6E6E; }
.voice__meta { display: flex; justify-content: space-between; font: 400 13px/1.2 var(--latin); color: #A6A6A6; margin-top: 2px; }
.msg--photo { padding: 3px; width: 72%; }
.msg--photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 0% 50%; border-radius: 11px; }
.msg--photo time { position: absolute; right: 10px; bottom: 9px; padding: 3px 6px; border-radius: 8px; background: rgba(10,10,10,.6); color: #F2F2F0; }

/* ───────── 1 · платформа ───────── */
.platform { z-index: 1; margin-top: calc(-1 * var(--lap)); padding-top: 0; }
html:not(.hero-live) .platform { margin-top: 0; padding-top: 64px; }
html.hero-live:not(.pinned) .platform { visibility: hidden; margin-top: 400svh; } /* до pin платформа стоит под героем: без этого CLS 0.18; отступ = место pin, чтобы lazy-картинки ниже не качались раньше барьера */
.rail { position: relative; }
.tasks { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--g); }
.tasks::before { content: ""; position: absolute; left: 0; right: 0; top: 3.5px; height: 1px; background: var(--graphite); }
.task { position: relative; padding: 32px 16px 0 0; outline-offset: 8px; }
.task__dot { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--graphite); transition: background-color var(--t1) var(--ease); }
.task.is-lit .task__dot { background: var(--blue-t); }
.task .label { color: var(--muted-l); }
.task h3 { margin-top: 8px; font-size: 22px; }
.task p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--muted-l); max-width: 22em; min-height: 3em; }
.task__img { width: 100%; height: auto; aspect-ratio: 3 / 2; margin-top: 20px; border-radius: 4px; background: #1A1A1A; box-shadow: 0 24px 48px -16px rgba(10,10,10,.18); transition: translate var(--t2) var(--ease); }
.task:hover .task__img, .task.is-lit .task__img { translate: 0 -6px; }
.platform__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 24px; align-items: end; margin-top: 120px; }
.platform__head .label { grid-column: 1 / -1; color: var(--muted-l); }
.platform__head .h2 { grid-column: 1 / 8; }
.platform__head .lead { grid-column: 8 / 13; }
.route { position: relative; margin-top: 96px; }
.route__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.route__svg line { stroke-width: 1; }
.route__past { stroke: var(--line-l); }
.route__ahead { stroke: var(--black); }
.route__ptr { position: absolute; left: 0; top: 0; width: 24px; height: 48px; color: var(--black); transform: translate(var(--px, 0px), var(--py, -24px)); }
.route__stages { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--g); }
.stage { display: grid; gap: 8px; width: 100%; padding: 44px 16px 8px 0; }
.stage .label { color: var(--muted-l); transition: color var(--t1) var(--ease); }
.stage__t { font-size: 20px; line-height: 1.35; color: var(--muted-l); transition: color var(--t1) var(--ease); }
.stage.is-on .stage__t { color: var(--black); }
.stage.is-on .label { color: var(--blue-t); }
@media (max-width: 700px) {
  .tasks { grid-template-columns: 1fr; row-gap: 0; padding-left: 32px; }
  .tasks::before { left: 3.5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .task { padding: 0 0 28px; min-height: 9svh; }
  .task__img { margin-top: 12px; }
  .task__dot { left: -32px; top: 6px; }
  .task h3 { font-size: 20px; margin-top: 2px; }
  .task p { font-size: 15px; margin-top: 2px; }
  .platform__head { margin-top: 72px; }
  .platform__head .h2, .platform__head .lead { grid-column: 1 / -1; }
  .route { margin-top: 56px; }
  .route__stages { grid-template-columns: 1fr; padding-left: 32px; }
  .stage { padding: 12px 0; }
}

/* ───────── 2 · сайты ───────── */
.web__stage { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: center; margin-top: 64px; min-height: min(100svh - var(--hdr) - 48px, 720px); }
.web__steps { grid-column: 1 / 4; display: grid; gap: 28px; align-self: center; }
.wstep { display: grid; gap: 6px; font-size: 18px; line-height: 1.35; color: var(--silver); transition: color var(--t1) var(--ease); }
.wstep .label { color: var(--muted-l); transition: color var(--t1) var(--ease); }
.wstep.is-lit, html.no-js .wstep { color: var(--paper); }
.wstep.is-lit .label { color: var(--silver); }
.seam { grid-column: 4 / 13; }
.seam__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--deep); }
.seam__frame:has(.seam__range:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.seam__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seam__new { clip-path: inset(0 var(--cut) 0 0); }
.seam__line { position: absolute; inset: 0; transform: translateX(calc(100% - var(--cut))); pointer-events: none; }
.seam__line::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--white); }
.seam__line::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 48px; background: linear-gradient(to left, rgba(255,255,255,.10), rgba(255,255,255,0)); }
.seam__tag { position: absolute; top: 16px; padding: 6px 8px; background: rgba(10,10,10,.72); color: var(--paper); }
.seam__tag--new { left: 16px; }
.seam__tag--old { right: 16px; }
.seam__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.demo { margin-top: 64px; max-width: 640px; }
.demo__l { display: block; font-size: 14px; color: var(--silver); margin-bottom: 8px; }
.demo__row { display: flex; gap: 12px; align-items: center; }
.demo input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; font: 400 17px var(--cyr); color: var(--paper); background: transparent; border: 1px solid var(--graphite); border-radius: 0; }
.demo input::placeholder { color: #6E6E6E; }
.demo input:focus-visible { border-color: var(--silver); }
.demo button .arr { transition: transform var(--t1) var(--ease); }
.demo:has(input:valid) button .arr { transform: translateX(4px); }
.demo__done { display: flex; gap: 12px; align-items: center; margin-top: 64px; min-height: 48px; font-size: var(--lead); }
.demo__done[hidden] { display: none; }
@media (max-width: 700px) {
  .web__stage { grid-template-columns: 1fr; row-gap: 32px; min-height: 0; margin-top: 40px; }
  .web__steps, .seam { grid-column: 1; }
  .web__steps { gap: 12px; }
  .wstep { grid-template-columns: 32px 1fr; font-size: 16px; }
  .seam__tag { top: 8px; font-size: 11px; }
  .seam__tag--new { left: 8px; } .seam__tag--old { right: 8px; }
  .demo__row { flex-direction: column; align-items: stretch; }
  .demo__row .btn { justify-content: center; }
}

/* ───────── 3 · процессы ───────── */
.flow { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 56px; margin-top: 72px; }
.flow__mods { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); }
.flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.flow__bg { fill: none; stroke: var(--line-l); stroke-width: 1; }
.flow__line { fill: none; stroke: var(--blue); stroke-width: 1.5; }
.mod { z-index: 1; display: grid; align-content: start; gap: 10px; padding: 0 16px 16px; min-height: 212px; overflow: hidden; transition: box-shadow var(--t2) var(--ease); }
.mod__bar { display: flex; gap: 10px; align-items: center; height: 40px; margin: 0 -16px 4px; padding: 0 16px; background: var(--s-bg2); border-bottom: 1px solid var(--s-ln); font-size: 13px; border-radius: 4px 4px 0 0; }
.mod__bar b { font-weight: 500; } .mod__bar span { color: var(--s-mut); }
.mod__kv div { display: grid; grid-template-columns: 88px 1fr; gap: 8px; padding: 4px 0; font-size: 14px; } .mod__kv dt { color: var(--s-mut); font-size: 13px; } .mod__kv dd { margin: 0; }
.mod__t { font-size: 16px; font-weight: 500; line-height: 1.3; }
.mod__m { font-size: 13px; color: var(--s-mut); }
.mod__pipe { display: flex; gap: 4px; } .mod__pipe span { flex: 1; padding: 6px 4px; border-radius: 4px; background: var(--s-chip); font-size: 13px; text-align: center; white-space: nowrap; }
.mod__pipe .is-on { background: #F2F2F0; color: #0A0A0A; }
.mod__att { display: flex; flex-wrap: wrap; gap: 6px; } .mod__att span { padding: 5px 8px; border-radius: 4px; background: var(--s-chip); font: 400 13px/1 var(--latin); }
.mod__calls li { display: grid; grid-template-columns: 1fr auto 44px; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--s-ln); font-size: 14px; }
.mod__calls em, .mod__calls time { font: normal 400 13px/1.5 var(--latin); color: var(--s-mut); text-align: right; }
.mod__calls .is-miss span { color: var(--s-mut); }
.mod.is-on { box-shadow: 0 24px 48px -16px rgba(10,10,10,.30), 0 0 0 1px #4778FF; }
.flow__tok { position: absolute; left: 0; top: 0; z-index: 3; display: flex; gap: 8px; align-items: center; height: 32px; padding: 0 12px; border-radius: 4px; background: #0A0A0A; color: #F2F2F0; font-size: 13px; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(10,10,10,.5); transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(-50%, -50%); pointer-events: none; }
.flow__tok .mask { background: #A6A6A6; opacity: .5; }
.flow__pains { grid-column: 1 / 9; counter-reset: p; }
.flow__pains li { position: relative; counter-increment: p; display: grid; grid-template-columns: 48px 1fr; padding: 14px 0; border-top: 1px solid var(--line-l); font-size: var(--body); transition: color var(--t2) var(--ease); }
.flow__pains li::before { content: "0" counter(p); font: 400 13px/2 var(--latin); color: var(--muted-l); }
.flow__pains li::after { content: ""; position: absolute; left: 48px; right: 0; top: calc(14px + .75em); height: 1px; background: var(--black); transform: scaleX(0); transform-origin: left; transition: transform var(--t2) var(--ease) var(--d, 0ms); }
.flow__pains li.is-x { color: var(--muted-l); }
.flow__pains li.is-x::after { transform: scaleX(1); }
.feed { grid-column: 9 / 13; align-self: start; }
.feed__h { color: var(--muted-l); margin-bottom: 16px; }
.feed__list { display: grid; gap: 10px; }
.note { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; row-gap: 2px; padding: 12px 14px; border-radius: 14px; background: #1A1A1A; color: #F2F2F0; box-shadow: 0 24px 48px -16px rgba(10,10,10,.18); }
.note__ic { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: #0A0A0A; box-shadow: inset 0 0 0 1px #2E2E2E; font: normal 300 17px/1 var(--latin); }
.note__app { font-size: 13px; color: #A6A6A6; } .note__app time { font-family: var(--latin); }
.note__t { font-size: 15px; line-height: 1.35; }
html.motion .feed__list li { opacity: 0; transform: translateY(8px); }
@media (max-width: 960px) { .flow__pains { grid-column: 1 / -1; } .feed { grid-column: 1 / -1; } .flow__mods { grid-template-columns: 1fr; gap: 16px; } .mod { min-height: 0; margin-left: 28px; } }
/* ≤ 960: линия данных идёт слева от модулей (x 12), заявка — точка 10 px на линии, без подписи: подпись закрывала шапки модулей и выходила за поле */
@media (max-width: 960px) { .flow__tok { width: 12px; height: 12px; padding: 0; gap: 0; border-radius: 50%; color: transparent; background: #4778FF; box-shadow: 0 0 0 3px var(--paper); font-size: 0; } .flow__tok > * { display: none; } }
@media (max-width: 700px) {
  .flow { grid-template-columns: 1fr; margin-top: 48px; row-gap: 40px; }
  .flow__mods { grid-template-columns: 1fr; gap: 16px; }
  .mod { min-height: 0; margin-left: 28px; }
  .flow__pains li { grid-template-columns: 36px 1fr; font-size: 17px; }
  .flow__pains li::after { left: 36px; }
}

/* ───────── 4 · обследование ───────── */
.first__top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 32px; align-items: end; }
.first__top .sec__head { grid-column: 1 / 9; }
.price { grid-column: 9 / 13; justify-self: end; font: 300 clamp(48px, 6.1vw, 88px)/1 var(--latin); white-space: nowrap; }
.price__t { display: inline-block; -webkit-mask-image: linear-gradient(90deg, #000 45%, rgba(0,0,0,.15) 50%, rgba(0,0,0,0) 55%); mask-image: linear-gradient(90deg, #000 45%, rgba(0,0,0,.15) 50%, rgba(0,0,0,0) 55%); -webkit-mask-size: 240% 100%; mask-size: 240% 100%; -webkit-mask-position: var(--mp, 0%) 0; mask-position: var(--mp, 0%) 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* пять страниц A4 веером: свет справа сверху, поворот задан и не анимируется (DIRECTION «Правка 24.09» §1) */
.docs { display: flex; justify-content: center; margin-top: 72px; padding-block: 16px 24px; }
.doc { position: relative; flex: none; width: 224px; aspect-ratio: 1 / 1.414; margin-left: -32px; rotate: var(--r); transition: translate var(--t1) var(--ease); }
.doc:first-child { margin-left: 0; }
.doc:nth-child(1) { --r: -4deg; } .doc:nth-child(2) { --r: -2deg; } .doc:nth-child(3) { --r: 0deg; } .doc:nth-child(4) { --r: 2deg; } .doc:nth-child(5) { --r: 4deg; }
.doc:hover { translate: 0 -8px; z-index: 6; }
.a4 { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; background: #F2F2F0; color: #0A0A0A; border-radius: 2px; box-shadow: 0 32px 64px -24px rgba(0,0,0,.65); overflow: hidden; font-size: 13px; line-height: 1.35; }
.doc:last-child .a4 { background: #FFFFFF; }
.a4::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(225deg, rgba(255,255,255,0), rgba(10,10,10,.10)); }
.a4__h { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid #C6C6C4; font-size: 15px; font-weight: 500; line-height: 1.25; }
.a4__h span { font: 400 13px/1 var(--latin); color: #5F5F5F; }
.a4__map { width: 100%; height: auto; }
.a4__map .m-box rect { fill: #FFFFFF; stroke: #0A0A0A; stroke-width: 1; }
.a4__map .m-ln path { fill: none; stroke: #0A0A0A; stroke-width: 1; }
.a4__map--hl .m-box rect:nth-child(4) { stroke: #2E5BD6; stroke-width: 2.5; }
.a4__st { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; color: #5F5F5F; }
.a4__st li::before { content: "— "; }
.a4__t { width: 100%; border-collapse: collapse; }
.a4__t th, .a4__t td { padding: 6px 0; border-bottom: 1px solid #D6D6D4; text-align: left; font-weight: 400; vertical-align: top; }
.a4__t th { color: #5F5F5F; } .a4__t td:last-child, .a4__t th:last-child { text-align: right; padding-left: 8px; }
.a4 .mask { background: #0A0A0A; opacity: 1; }
.a4__tot td { font-weight: 500; border-bottom: 0; }
.a4__sum { margin-top: auto; font-weight: 500; }
.a4__note { margin-top: auto; color: #5F5F5F; }
.a4__data { width: 100%; height: auto; margin-top: 4px; } .a4__data path { fill: none; stroke: #0A0A0A; stroke-width: 1; } .a4__data circle { fill: #0A0A0A; }
.a4__n { position: absolute; padding: 4px 6px; border: 1px solid #0A0A0A; border-radius: 2px; background: #FFFFFF; font: 400 13px/1 var(--latin); }
.first__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 32px; margin-top: 56px; }
.honest { display: grid; gap: 8px; font-size: 18px; color: var(--silver); }
.honest li { display: flex; gap: 12px; }
.honest li::before { content: "—"; color: var(--graphite); }
@media (max-width: 1100px) { .doc { width: 168px; margin-left: -40px; } .doc:first-child { margin-left: 0; } .a4 { padding: 14px 12px; } }
@media (max-width: 700px) {
  .first__top .sec__head, .price { grid-column: 1 / -1; justify-self: start; }
  .docs { margin-top: 40px; }
  .doc { width: 160px; margin-left: calc((100% - 816px) / 4); } /* 390: 160×226, веер на всю ширину колонки при любой ширине; 816 = 5×160 + 16 на поворот ±4° */
  .a4 { padding: 12px 10px; gap: 8px; } .a4__h { font-size: 13px; } .a4 .mask { width: min(var(--w), 2.4em); }
}

/* ───────── 5 · разбор ───────── */
.case__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 32px; align-items: end; }
.case__head .sec__head { grid-column: 1 / 8; }
.case__side { grid-column: 8 / 13; display: grid; gap: 20px; font-size: 17px; }
.case__status { display: flex; gap: 12px; align-items: baseline; }
.case__was { color: var(--muted-l); }
.case__was .label, .case__foot .label { display: block; margin-bottom: 6px; color: var(--muted-l); }
.chain { position: relative; }
.chain__in { position: relative; height: 100svh; min-height: 780px; display: grid; grid-template-rows: auto 1fr; padding-block: calc(var(--hdr) + 28px) 24px; }
.chain__rail { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 8px; }
.chain__rail::before, .chain__rail::after { content: ""; position: absolute; left: 0; right: 0; top: 3.5px; height: 1px; background: var(--line-l); }
.chain__rail::after { background: var(--black); transform-origin: left; transform: scaleX(var(--f, 0)); }
.cnode { position: relative; z-index: 1; display: grid; gap: 14px; padding-right: 12px; font-size: 15px; line-height: 1.4; color: var(--muted-l); transition: color var(--t1) var(--ease); }
.cnode i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-l); transition: background-color var(--t1) var(--ease), box-shadow var(--t1) var(--ease); }
.cnode.is-on { color: var(--black); }
.cnode.is-on i { background: var(--black); box-shadow: none; }
.cnode--human i, .cnode--human.is-on i { background: var(--paper); box-shadow: inset 0 0 0 1px var(--pink); }
.cnode--human i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pink); transform: scale(var(--hf, 0)); }
/* объект: чат → заявка → телефон мастера → видео осмотра → добавленные работы → согласование.
   Координаты в «дизайн-пикселях» сцены, .obj__in масштабируется JS под высоту окна (--k). */
.obj { position: relative; align-self: stretch; min-height: 0; }
.obj__in { position: absolute; left: 0; top: 0; width: calc(100% / var(--k, 1)); height: 620px; transform: scale(var(--k, 1)); transform-origin: 0 0; }
.obj__in > * { position: absolute; left: 0; will-change: transform; }
.obj__chat { top: 40px; width: var(--cw, 380px); }
.obj__card { top: 108px; width: var(--cw, 380px); padding: 18px 20px 16px; z-index: 2; }
.obj__phone { top: 8px; width: calc(var(--cw, 380px) + 44px); height: 600px; z-index: 1; }
.obj__video { top: 150px; width: var(--vw, 420px); aspect-ratio: 16 / 9; overflow: hidden; z-index: 3; padding: 0; }
.rq__h { display: flex; justify-content: space-between; align-items: baseline; font-size: 17px; font-weight: 500; }
.rq__time { font: 400 13px/1 var(--latin); color: var(--s-mut); }
.rq__status { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 13px; color: var(--s-mut); min-height: 18px; }
.rq__dot { width: 6px; height: 6px; border-radius: 50%; background: #F2F2F0; flex: none; }
.rq__f { margin-top: 14px; border-top: 1px solid var(--s-ln); }
.rq__f div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--s-ln); }
.rq__f dt { font-size: 13px; color: var(--s-mut); line-height: 1.5; } .rq__f dd { margin: 0; font-size: 15px; line-height: 1.35; }
.rq__adds { margin-top: 12px; min-height: 104px; }
.rq__al { font-size: 13px; color: var(--s-mut); }
.rq__add { display: grid; grid-template-columns: 22px 1fr auto; align-items: baseline; gap: 6px; margin-top: 8px; padding: 8px 10px; border-radius: 4px; background: var(--s-chip); font-size: 14px; line-height: 1.3; }
.rq__add b { font: 400 17px/1 var(--latin); } .rq__add time { font: 400 13px/1 var(--latin); color: var(--s-mut); }
.case__syn { color: var(--muted-l); text-transform: none; letter-spacing: 0; font-size: 13px; }
.rq__ok { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--s-ln); }
.rq__who { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.rq__pink { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--pink); position: relative; }
.rq__pink::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pink); transform: scale(var(--hf, 0)); }
.rq__btn { position: relative; display: grid; place-items: center; height: 40px; padding: 0 18px; border-radius: 4px; background: #F2F2F0; color: #0A0A0A; font-weight: 500; font-size: 15px; transform: scale(calc(1 - .04 * var(--press, 0))); }
.rq__btn > span { grid-area: 1 / 1; }
.rq__btn-b { opacity: var(--done, 0); } .rq__btn-a { opacity: calc(1 - var(--done, 0)); }
.rq__syn { margin-top: 12px; font: 400 13px/1 var(--latin); letter-spacing: .06em; color: var(--s-mut); }
.obj__video img { width: 100%; height: 100%; object-fit: cover; }
/* без JS и до сборки сцены: только итоговая заявка */
html.no-js .obj__chat, html.no-js .obj__phone, html.no-js .obj__video { display: none; }
html.no-js .rq__none { display: none; }
html.no-js img[data-src] { display: none; }
html.no-js .sheet { display: none; }
.vid__chip { position: absolute; left: 12px; top: 12px; padding: 5px 8px; border-radius: 2px; background: rgba(10,10,10,.72); color: #F2F2F0; font: 400 13px/1 var(--latin); letter-spacing: .06em; }
.vid__mark { position: absolute; padding: 4px 8px; border: 1.5px solid #F2F2F0; border-radius: 2px; background: rgba(10,10,10,.55); color: #F2F2F0; font-size: 13px; line-height: 1.2; }
.vid__mark--1 { left: 34%; top: 48%; } .vid__mark--2 { left: 56%; top: 16%; }
.vid__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 18px 12px 10px; background: linear-gradient(transparent, rgba(10,10,10,.8)); color: #F2F2F0; font: 400 13px/1 var(--latin); }
.vid__play { width: 0; height: 0; border-left: 10px solid #F2F2F0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.vid__track { position: relative; flex: 1; height: 3px; background: rgba(242,242,240,.35); border-radius: 2px; }
.vid__pos { position: absolute; left: 0; top: 0; bottom: 0; width: var(--vp, 30%); background: #F2F2F0; border-radius: 2px; }
.vid__track b { position: absolute; top: -4px; width: 3px; height: 11px; margin-left: -1px; background: #F2F2F0; border-radius: 1px; }
.chain__cap { position: absolute; top: 46%; width: 34%; display: grid; gap: 12px; font-size: clamp(28px, 2.8vw, 40px); font-weight: 300; line-height: 1.15; pointer-events: none; }
.chain__cap { left: 0; transition: transform var(--t3) var(--ease); } .chain__cap.is-r { transform: translateX(194.12%); } /* 34 % ширины: сдвиг до правого края без смены left (CLS) */
.chain__cap .label { color: var(--muted-l); }
@media (max-width: 1100px) { .chain__cap { display: none; } } /* на узкой сцене подпись ложится на объект; подписи есть на рельсе */
.chain__n { color: var(--muted-l); }

.case__foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); padding-top: 32px; font-size: 18px; }
@media (max-width: 700px) {
  .case__head .sec__head, .case__side { grid-column: 1 / -1; }
  .chain__in { height: auto; min-height: 0; display: flex; flex-direction: column; padding-block: 40px 24px; }
  .obj { order: -1; position: sticky; top: calc(var(--hdr) + 4px); z-index: 2; height: 560px; background: var(--paper); }
  .obj__in { height: 560px; } .obj { --cw: calc(100% - 44px); --vw: calc(100% - 16px); } /* до JS: не шире колонки */
  .obj__phone { top: 4px; } .obj__card { top: 104px; } .obj__chat { top: 24px; }
  .obj__card { padding: 14px 14px 12px; } .rq__f div { grid-template-columns: 76px 1fr; gap: 8px; padding: 6px 0; } .rq__f dd { font-size: 14px; } .rq__adds { min-height: 0; } .rq__add { grid-template-columns: 18px 1fr; } .rq__add time { display: none; }
  .vid__mark--1 { left: 30%; top: 50%; } .vid__mark--2 { left: 58%; top: 20%; }
  .dev__foot { display: none; }
  .chain__rail { grid-template-columns: 1fr; padding: 24px 0 0 28px; }
  .chain__rail::before, .chain__rail::after { left: 3.5px; right: auto; top: 24px; bottom: 45svh; width: 1px; height: auto; }
  .chain__rail::after { transform-origin: top; transform: scaleY(var(--f, 0)); }
  .cnode { grid-template-columns: 1fr; min-height: 45svh; align-content: start; font-size: 20px; }
  .cnode i { position: absolute; left: -28px; top: 8px; }
  .chain__cap { display: none; }
  .case__foot { grid-template-columns: 1fr; }
}

/* ───────── 6 · метод ───────── */
.ladder { position: relative; margin-top: 72px; }
.ladder__ptr { position: absolute; left: 0; top: 0; z-index: 2; width: 24px; height: 48px; color: var(--paper); transform: translate(var(--lx, 0px), var(--ly, 0px)); }
/* лестница на всю сетку: ступень 136 px + подъём 40 px на шаг; пройденные залиты светом справа сверху (DIRECTION «Правка 24.09» §2, §3) */
.ladder__steps { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 8px; align-items: end; padding-top: 88px; }
.ladder__steps li { display: flex; }
.rung { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; height: calc(136px + var(--i) * 40px); padding: 20px 20px 18px; border-radius: 4px; background: #141414 linear-gradient(225deg, #202020, #141414 50%, #101010); box-shadow: inset 0 1px 0 #2E2E2E, 0 32px 64px -24px rgba(0,0,0,.65); font-size: 20px; /* свет справа сверху, как у листов A4 */ line-height: 1.3; color: #8A8A8A; transition: color var(--t2) var(--ease), background-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease); }
.rung::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(225deg, rgba(255,255,255,.9), rgba(242,242,240,.94) 45%, rgba(214,214,212,.96)); transition: opacity var(--t2) var(--ease); z-index: 0; }
.rung > span, .rung > small { position: relative; z-index: 1; }
.rung { isolation: isolate; }
.rung .label { color: inherit; }
.rung.is-past { color: var(--black); background-color: #E4E4E2; box-shadow: 0 32px 64px -24px rgba(0,0,0,.65); }
.rung.is-past::after { opacity: 1; }
.rung__ex { margin-top: auto; font-size: 14px; line-height: 1.4; color: #5F5F5F; opacity: 0; transition: opacity var(--t2) var(--ease); }
.rung.is-cur .rung__ex { opacity: 1; }
.ladder__cap { margin-top: 32px; font-size: var(--lead); color: var(--silver); max-width: 30em; }
.asks { margin-top: 88px; }
.asks .label { color: var(--silver); }
.asks > .label { margin-bottom: 20px; }
.asks ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); }
.asks li { position: relative; display: grid; gap: 40px; padding: 24px; min-height: 168px; align-content: space-between; border-radius: 4px; background: #1A1A1A; font-size: var(--h3); font-weight: 300; box-shadow: 0 32px 64px -24px rgba(0,0,0,.65); }
.asks li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(225deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%); }
@media (max-width: 960px) { .asks ol { grid-template-columns: 1fr 1fr; } .rung { padding: 16px 12px; font-size: 17px; } .rung__ex { font-size: 13px; } }
@media (max-width: 700px) {
  .ladder { margin-top: 48px; }
  .ladder__ptr { width: 14px; height: 28px; }
  .ladder__steps { grid-template-columns: 1fr; row-gap: 8px; padding-top: 0; padding-left: 32px; }
  .ladder__steps li { margin-left: calc(var(--i) * 12px); }
  .rung { height: auto; min-height: 64px; padding: 14px 16px; font-size: 18px; }
  .asks { margin-top: 56px; }
  .asks li { min-height: 112px; gap: 20px; padding: 18px; }
}

/* ───────── 7 · приложения ───────── */
.apps__stage { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 40px; margin-top: 72px; align-items: start; }
.phone { grid-column: 1 / 5; grid-row: 1 / 3; width: 100%; max-width: 340px; height: 660px; justify-self: start; }
.phone .dev__scr { background: #0A0A0A; }
.phone .tg__bar { background: #141414; border-color: #262626; }
.phone .tg__feed { flex: 1; background: #0A0A0A; gap: 10px; justify-content: flex-end; }
.tg__date { align-self: center; padding: 4px 10px; border-radius: 10px; background: #1A1A1A; color: #A6A6A6; font-size: 13px; margin-bottom: auto; }
.phone { height: 580px !important; }
.msg__from { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 500; color: #A6A6A6; }
.tg__input { flex: none; margin: 8px 10px 14px; padding: 10px 14px; border-radius: 18px; background: #1A1A1A; color: #8A8A8A; font-size: 14px; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 12px; padding: 10px 16px 18px; border-radius: 16px 16px 0 0; background: #1A1A1A; border-top: 1px solid #2E2E2E; box-shadow: 0 -16px 32px rgba(0,0,0,.45); }
.sheet__grip { justify-self: center; width: 36px; height: 4px; border-radius: 2px; background: #3A3A3A; }
.sheet__h { display: flex; justify-content: space-between; align-items: baseline; } .sheet__h b { font-weight: 500; font-size: 17px; } .sheet__h small { font-size: 13px; color: #A6A6A6; }
.sheet__d { font-size: 14px; color: #A6A6A6; }
.sheet__times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sheet__times span { display: grid; place-items: center; height: 40px; border-radius: 8px; background: #262626; font: 400 15px/1 var(--latin); }
.sheet__times .is-on { background: #F2F2F0; color: #0A0A0A; }
.sheet__f { display: grid; gap: 2px; padding: 8px 12px; border-radius: 8px; background: #262626; font-size: 14px; } .sheet__f small { font-size: 13px; color: #A6A6A6; }
.sheet__f .mask { background: #A6A6A6; opacity: .5; }
.sheet__btn { display: grid; place-items: center; height: 44px; border-radius: 10px; background: #F2F2F0; color: #0A0A0A; font-weight: 500; font-size: 15px; }
/* окно 1С */
.ledger { grid-column: 5 / 13; align-self: start; overflow: hidden; }
.win__bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; background: var(--s-bg2); border-bottom: 1px solid var(--s-ln); font-size: 13px; }
.win__app { font-weight: 500; } .win__t { color: var(--s-mut); } .win__syn { margin-left: auto; font: 400 13px/1 var(--latin); letter-spacing: .06em; color: var(--s-mut); }
.win__tools { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--s-ln); }
.wbtn { display: inline-grid; place-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--s-ln); border-radius: 4px; font-size: 13px; }
.wbtn--p { background: #F2F2F0; color: #0A0A0A; border-color: #F2F2F0; }
.wsearch { margin-left: auto; width: 180px; height: 30px; padding: 0 10px; display: flex; align-items: center; border: 1px solid var(--s-ln); border-radius: 4px; font-size: 13px; color: var(--s-mut); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { padding: 10px 16px; text-align: left; font-weight: 400; font-size: 13px; color: var(--s-mut); border-bottom: 1px solid var(--s-ln); background: var(--s-bg); }
.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--s-ln); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .c-n { font-family: var(--latin); } .tbl .c-n .mask { margin-right: 2px; }
.st-chip { display: inline-block; padding: 3px 8px; border-radius: 4px; background: var(--s-chip); font-size: 13px; }
.st-chip--done { color: var(--s-mut); }
.st-chip--ai { background: #F2F2F0; color: #0A0A0A; }
.tbl__new td { background: #262626; }
.tbl__new td:first-child { box-shadow: inset 3px 0 0 #4778FF; }
.states { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); }
@media (max-width: 960px) and (min-width: 701px) { .phone, .ledger, .states { grid-column: 1 / -1; grid-row: auto; } .phone { justify-self: center; } }
.st { display: grid; gap: 8px; align-content: start; width: 100%; height: 100%; padding: 20px; border: 1px solid var(--line-l); border-radius: 4px; background: transparent; transition: border-color var(--t1) var(--ease), background-color var(--t1) var(--ease); }
.st .label { color: var(--muted-l); transition: color var(--t1) var(--ease); }
.st b { font-weight: 400; font-size: 20px; }
.st span:last-child { font-size: 15px; color: var(--muted-l); line-height: 1.4; }
.st.is-on { border-color: var(--black); background: var(--white); }
.st.is-on .label { color: var(--blue-t); }
@media (max-width: 700px) {
  .apps__stage { grid-template-columns: 1fr; margin-top: 48px; row-gap: 24px; }
  .phone, .ledger, .states { grid-column: 1; grid-row: auto; }
  .phone { max-width: 320px; height: 620px; justify-self: center; }
  .tbl .c-n, .tbl .c-d, .tbl .c-s, .wsearch { display: none; }
  .tbl th, .tbl td { padding-inline: 12px; }
  .win__bar { flex-wrap: wrap; height: auto; padding-block: 8px; row-gap: 4px; } .win__syn { margin-left: 0; width: 100%; }
  .states { grid-template-columns: 1fr; gap: 12px; }
  .st { padding: 16px; }
}

/* ───────── 8 · лаборатория ───────── */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); margin-top: 72px; }
.tile { display: grid; grid-template-rows: 240px auto; background: var(--deep); border: 1px solid var(--graphite); border-radius: 4px; overflow: hidden; }
.tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tile__txt { padding: 28px 28px 32px; border-top: 1px solid var(--graphite); }
.tile__txt h3 { margin-top: 12px; }
.tile__txt p:last-child { margin-top: 10px; font-size: 16px; color: var(--silver); max-width: 34em; }
.st-lab { color: var(--silver); }
.st-lab--exp { color: var(--yellow); }
.ui { position: relative; overflow: hidden; }
.tile { grid-template-rows: 320px auto; }
/* Такт: HTML-копия экрана «Сегодня», задачи синтетические */
.takt { position: absolute; left: 28px; right: 28px; top: 28px; bottom: -8px; overflow: hidden; background: #F2F2F0; }
.takt__top { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; background: #0A0A0A; color: #F2F2F0; font: 300 13px/1 var(--latin); letter-spacing: .3em; border-radius: 4px 4px 0 0; }
.takt__top b { font-weight: 300; } .takt__top i { width: 1px; height: 16px; background: #5F5F5F; } .takt__top span:last-child { letter-spacing: 0; font-family: var(--cyr); color: #A6A6A6; }
.takt__g { letter-spacing: 0; }
.takt__body { padding: 14px 16px; }
.takt__day { font-size: 13px; color: #5F5F5F; }
.takt__n { position: relative; margin-top: 2px; font-size: 22px; font-weight: 400; color: #0A0A0A; }
.takt__n4 { position: absolute; left: 0; opacity: 0; } .ui--takt.is-done .takt__n3 { opacity: 0; } .ui--takt.is-done .takt__n4 { opacity: 1; }
.takt__n span { transition: opacity var(--t2) var(--ease); }
.takt__list { display: grid; gap: 6px; margin-top: 10px; }
.takt__list li, .takt__bub { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; height: 40px; padding: 0 12px; border-radius: 6px; background: #FFFFFF; color: #0A0A0A; font-size: 14px; }
.takt__list i, .takt__bub > i { width: 18px; height: 18px; border: 1.5px solid #5F5F5F; border-radius: 5px; }
.takt__list em, .takt__bub em { font: normal 400 13px/1 var(--latin); color: #5F5F5F; }
.takt__bub { position: absolute; z-index: 2; left: 44px; top: 132px; width: calc(100% - 88px); transition: background-color var(--t2) var(--ease), color var(--t2) var(--ease), border-radius var(--t2) var(--ease), box-shadow var(--t2) var(--ease); }
.takt__from { display: none; }
.takt__bub:not(.is-task) { grid-template-columns: 1fr; height: auto; padding: 10px 12px 8px; background: #2E2E2E; color: #F2F2F0; border-radius: 14px 14px 14px 4px; box-shadow: 0 16px 32px -12px rgba(0,0,0,.6); }
.takt__bub:not(.is-task) > i, .takt__bub:not(.is-task) em { display: none; }
.takt__bub:not(.is-task) em { color: #A6A6A6; }
.takt__bub:not(.is-task) .takt__from { display: block; font-size: 13px; color: #A6A6A6; }
/* Встречи: файл записи → конспект с исполнителями */
.meet { position: absolute; left: 28px; right: 28px; top: 28px; bottom: 28px; padding: 16px; display: grid; align-content: start; gap: 14px; }
.meet__file { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #F2F2F0; }
.meet__file .voice__play { background: #0A0A0A; } .meet__file .voice__play::after { border-left-color: #F2F2F0; }
.meet__fn { display: grid; gap: 4px; min-width: 0; } .meet__fn b { font-weight: 500; font-size: 14px; }
.meet__file em { font: normal 400 13px/1 var(--latin); color: #5F5F5F; }
.meet__wave { position: relative; display: flex; align-items: center; gap: 2px; height: 20px; }
.meet__wave i { flex: 1; max-width: 4px; height: calc(var(--h) * 100%); border-radius: 2px; background: #0A0A0A; }
.meet__h { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; } .meet__h b { font-weight: 500; } .meet__h span { font-size: 13px; color: #5F5F5F; }
.meet__notes { display: grid; gap: 0; margin-top: 6px; }
.meet__notes li { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid #E2E2DF; font-size: 14px; }
.meet__notes .label { font-size: 13px; color: #5F5F5F; }
.meet__notes em { font: normal 400 13px/1 var(--latin); color: #5F5F5F; }
/* Пересборка: FORMA «было» → демо, собранное из четырёх блоков */
.rbw { position: absolute; top: 28px; width: calc(50% - 40px); overflow: hidden; }
.rbw--old { left: 28px; top: 56px; opacity: .72; } .rbw--new { right: 28px; }
.rbw__bar { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; background: var(--s-bg2); border-bottom: 1px solid var(--s-ln); font-size: 13px; color: #5F5F5F; }
.rbw__bar i { width: 8px; height: 8px; border-radius: 50%; background: #C6C6C4; } .rbw__bar span { margin-left: 8px; }
.rbw img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.rbw__pg { position: relative; aspect-ratio: 16 / 9; background: #F2F2F0; }
.rb { position: absolute; left: 0; width: 100%; background: #E2E2DF no-repeat; background-size: 100% auto; }
/* картинка кусков — только у лаборатории (CSS-фон не бывает lazy и отнимал канал у барьера на Slow 4G) */
.tiles.is-near .rb, html.no-js .rb { background-image: url(../img/forma-new.webp); }
.rb--1 { top: 0; height: 9%; background-position: 0 0; }
.rb--2 { top: 9%; height: 52%; background-position: 0 18.75%; }
.rb--3 { top: 61%; height: 27%; background-position: 0 83.6%; }
.rb--4 { top: 88%; height: 12%; background-position: 0 100%; }
/* 3D: кадр героя с полосой света */
.d3__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d3__band { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, rgba(242,242,240,0), rgba(242,242,240,.12), rgba(242,242,240,0)); transform: translateX(-110%); }
.d3__cap { position: absolute; left: 28px; bottom: 20px; padding: 5px 8px; background: rgba(10,10,10,.72); color: #A6A6A6; font: 400 13px/1 var(--latin); }
@media (max-width: 700px) {
  .tiles { grid-template-columns: 1fr; margin-top: 48px; gap: 16px; }
  .tile { grid-template-rows: 300px auto; } .tile--meet { grid-template-rows: 360px auto; }
  .takt, .meet { left: 16px; right: 16px; top: 16px; } .meet { bottom: 16px; padding: 12px; }
  .takt__bub { left: 32px; width: calc(100% - 64px); }
  .meet__notes li { grid-template-columns: 40px 1fr; } .meet__notes em { grid-column: 2; }
  .rbw { width: calc(56% - 16px); } .rbw--old { left: 16px; top: 90px; } .rbw--new { right: 16px; top: 24px; }
  .tile__txt { padding: 20px; }
}

/* ───────── 9 · вопросы ───────── */
.faq__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 40px; }
.faq__grid .sec__head { grid-column: 1 / 5; align-self: start; }
.acc { grid-column: 5 / 13; border-bottom: 1px solid var(--line-l); padding-bottom: 8px; }
.qa { border-top: 1px solid var(--line-l); padding-top: 8px; }
.qa h3 { font-size: inherit; }
.qa__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; min-height: 64px; padding: 12px 0; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.35; }
.qa__q > span { transition: transform var(--t2) var(--ease), color var(--t2) var(--ease); }
.qa__q[aria-expanded="true"] > span { transform: translateX(8px); color: var(--muted-l); }
.qa:not(.is-open) .qa__a { transition-timing-function: var(--ease-out); }
.ico { position: relative; flex: none; width: 16px; height: 16px; }
.ico::before, .ico::after { content: ""; position: absolute; inset: 0; background: linear-gradient(currentColor, currentColor) center / 16px 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 16px no-repeat; transition: opacity var(--t1) var(--ease); }
.ico::after { transform: rotate(45deg); opacity: 0; }
.qa__q[aria-expanded="true"] .ico::before { opacity: 0; }
.qa__q[aria-expanded="true"] .ico::after { opacity: 1; }
.qa__a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--t2) var(--ease), opacity var(--t2) var(--ease); }
.qa__a > div { overflow: hidden; }
.qa__a p { padding: 0 48px 24px 8px; color: var(--black); max-width: 40em; }
.qa.is-open .qa__a { grid-template-rows: 1fr; opacity: 1; }
html.no-js .qa__a { grid-template-rows: 1fr; opacity: 1; }
@media (max-width: 700px) { .faq__grid .sec__head, .acc { grid-column: 1 / -1; } .qa__a p { padding-right: 0; } }

/* ───────── 10 · следующий шаг ───────── */
/* фон — кадр героя p=0 (щель света на 70 % ширины); красная линия проходит щель и упирается в кнопку справа от неё */
.next { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--sec) * 1.1); overflow: hidden; }
.next__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.next > .wrap { position: relative; z-index: 1; }
.next__h { max-width: 11em; font-size: var(--h1); line-height: 1.08; }
.next__row { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 88px;
  margin-left: calc(70vw - (100vw - min(100vw - 2 * var(--m), var(--wrap))) / 2 + 48px); }
.next__line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.next__line line { stroke: var(--red); stroke-width: 1; }
.next__row .btn { height: 48px; padding: 0 24px; }
.next__small { margin-top: 40px; font-size: 14px; color: var(--silver); }
@media (max-width: 960px) { .next__row { margin-left: auto; width: max-content; } }
@media (max-width: 700px) {
  .next { align-items: flex-end; }
  .next__bg img { object-position: 50% 0%; }
  .next__row { align-items: stretch; width: auto; margin: 88px 0 0; padding-left: 32px; }
  .next__row .btn { justify-content: center; }
}

/* ───────── подвал ───────── */
.ftr { background: var(--black); color: var(--silver); border-top: 1px solid var(--graphite); padding-block: 88px 48px; font-size: 14px; }
.ftr__in { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 48px; }
.ftr__big { grid-column: 1 / 6; display: grid; gap: 28px; align-content: start; color: var(--paper); }
.ftr__sign { width: 60px; height: 120px; }
.ftr__desc { font: 300 var(--h3)/1.25 var(--latin); max-width: 14em; }
.ftr__contacts { grid-column: 6 / 10; display: grid; gap: 12px; align-content: start; }
.ftr__contacts a { font-size: var(--lead); color: var(--paper); text-decoration: none; }
.ftr__contacts a:hover, .ftr__nav a:hover, .ftr__legal a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ftr__sup a { font-size: 14px !important; }
.ftr .label { color: var(--silver); margin-bottom: 4px; }
.ftr__nav { grid-column: 10 / 13; display: grid; gap: 10px; align-content: start; }
.ftr__nav a, .ftr__legal a { text-decoration: none; color: var(--paper); }
.ftr__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; padding-top: 32px; border-top: 1px solid var(--graphite); }
.ftr__legal .logo { color: var(--paper); width: 148px; }
@media (max-width: 700px) { .ftr__big, .ftr__contacts, .ftr__nav { grid-column: 1 / -1; } .ftr__legal { flex-direction: column; align-items: flex-start; } }

/* ───────── reduced motion: финальные состояния, pin снят ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
  html.motion [data-rise], html.motion .feed__list li { opacity: 1; transform: none; }
}

/* ───────── политика ───────── */
.legal { padding-top: calc(var(--hdr) + var(--sec)); }
.legal__in { max-width: 760px; }
.legal h1 { font-weight: 300; font-size: var(--h2); line-height: 1.15; margin-bottom: 48px; }
.legal h2 { font-weight: 400; font-size: var(--h3); line-height: 1.25; margin: 48px 0 16px; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; }
.legal p + p, .legal ul, .legal p + ul { margin-top: 12px; }
.legal ul { padding-left: 20px; list-style: "— "; }
.legal li + li { margin-top: 6px; }

/* разбор: «ремонта.» не остаётся одно в последней строке на 320–414 */
.case .h2 { text-wrap: pretty; }

/* ───────── fast: живая сцена героя (кадр cinematic-v2 + свет + пыль) ───────── */
html:not(.hero-live) .hero__intro { background: none; z-index: 2; }
.scene { position: absolute; left: 0; top: 0; width: 100%; height: 100svh; z-index: 1; overflow: hidden; background: #050505; }
/* короб в координатах картинки: свет и щель привязаны к её пикселям при любом кадрировании */
.scene__img { --w: max(100vw, 100svh * 1672 / 941); position: absolute; top: 50%; left: max(100vw - var(--w), min(0px, 86vw - .918 * var(--w))); width: var(--w); aspect-ratio: 1672 / 941;
  transform: translate(calc(var(--mx, 0) * -14px), calc(-50% + var(--my, 0) * -8px + var(--sy, 0) * 90px)) scale(calc(1.04 + var(--sy, 0) * .06));
  transition: transform 1.2s cubic-bezier(.2,0,0,1); }
.scene__img img { width: 100%; height: 100%; display: block; animation: scene-in 2.6s cubic-bezier(.2,0,0,1) both, scene-breathe 14s 2.6s ease-in-out infinite alternate; }
.scene__beam, .scene__slit, .scene__floor { position: absolute; pointer-events: none; }
.scene__img > i { position: absolute; }
/* лучи из щели вверх-влево, дышат */
.scene__beam { right: 7%; top: -6%; width: 46%; height: 62%; transform-origin: 100% 30%;
  background: conic-gradient(from 232deg at 100% 30%, transparent 0deg, rgba(255,250,240,.10) 10deg, transparent 17deg, rgba(255,250,240,.16) 24deg, transparent 31deg, rgba(255,250,240,.07) 40deg, transparent 52deg);
  filter: blur(6px); -webkit-mask: radial-gradient(90% 80% at 100% 30%, #000 25%, transparent 75%); mask: radial-gradient(90% 80% at 100% 30%, #000 25%, transparent 75%); animation: beam 9s ease-in-out infinite alternate, fade-in 3s .8s both; }
/* щель: 8.2 % от правого края картинки, до линии пола на 80 % */
/* щель зала: снимает жёсткую кромку щели кадра (на телефоне кадр растянут ~2,7×) — размывает то, что под ней, и добавляет
   мягкое свечение; своей линии нет. Центр тот же, что у щели кадра, — от него считает заставка. */
.scene__slit { right: 5.625%; top: 0; width: 5%; height: 82%;
  -webkit-backdrop-filter: blur(6px) brightness(1.06); backdrop-filter: blur(6px) brightness(1.06);
  background: linear-gradient(90deg, transparent, rgba(255,250,240,.10) 30%, rgba(255,252,246,.26) 50%, rgba(255,250,240,.10) 70%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent), linear-gradient(transparent, #000 6%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent), linear-gradient(transparent, #000 6%, #000 90%, transparent);
  mask-composite: intersect;
  animation: slit 5.5s ease-in-out infinite; }
/* отражение в мокром полу: вытянутый блик под щелью */
.scene__floor { right: 5.5%; top: 80%; width: 5.4%; height: 22%; background: radial-gradient(50% 100% at 50% 0, rgba(255,250,240,.38), transparent 70%);
  filter: blur(3px); animation: floor 3.8s ease-in-out infinite alternate, fade-in 2s 1.4s both; }
.scene__dust { position: absolute; inset: 0; width: 100%; height: 100%; animation: fade-in 3s 1s both; }
.scene__vig { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,5,.72) 0, rgba(5,5,5,.35) 42%, transparent 65%), linear-gradient(0deg, rgba(5,5,5,.8) 0, transparent 30%);
  opacity: calc(1 + var(--sy, 0)); }
@keyframes scene-in { from { opacity: 0; filter: brightness(.3) contrast(1.2); transform: scale(1.08); } to { opacity: 1; filter: none; transform: none; } }
@keyframes scene-breathe { from { filter: contrast(1.04); } to { filter: brightness(1.06) contrast(1.05); } }
@keyframes beam { 0% { opacity: .75; transform: rotate(-1.5deg); } 50% { opacity: 1; } 100% { opacity: .6; transform: rotate(2deg) scaleY(1.06); } }
@keyframes slit { 0%, 100% { opacity: .92; } 40% { opacity: 1; filter: brightness(1.25); } 43% { opacity: .82; } 46% { opacity: 1; } }
@keyframes slit-open { from { transform: scaleY(0); } to { transform: none; } }
@keyframes floor { to { opacity: .55; transform: scaleX(1.25); } }
@keyframes fade-in { from { opacity: 0; } }
/* текст героя проявляется после света */
html.motion .hero__label, html.motion .hero__h1, html.motion .hero__sub, html.motion .hero__desc, html.motion .hero__sign, html.motion .hero__hint { animation: rise 1.1s cubic-bezier(.2,0,0,1) both; }
html.motion .hero__sign { animation-delay: .9s; } html.motion .hero__label { animation-delay: 1.1s; } html.motion .hero__h1 { animation-delay: 1.25s; }
html.motion .hero__sub { animation-delay: 1.5s; } html.motion .hero__desc { animation-delay: 1.65s; } html.motion .hero__hint { animation-delay: 2s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } }
.hero__h1 { text-shadow: 0 2px 40px rgba(0,0,0,.5); }
@media (max-width: 700px) {
  .scene__img { left: calc(88vw - .92 * var(--w)); transform: translate(calc(var(--mx, 0) * -8px), calc(-50% + var(--sy, 0) * 60px)) scale(calc(1.02 + var(--sy, 0) * .05)); }
  .scene__vig { background: linear-gradient(0deg, rgba(5,5,5,.92) 0, rgba(5,5,5,.55) 45%, rgba(5,5,5,.15) 70%); }
}
@media (prefers-reduced-motion: reduce) { .scene *, .scene { animation: none !important; transition: none !important; } }

/* fast: свет щели идёт за читателем по всей странице */
.sec { position: relative; }
.sec::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,250,240,.9) 45%, #fff 50%, rgba(255,250,240,.9) 55%, transparent); background-size: 40% 100%; background-repeat: no-repeat; background-position: -40% 0; opacity: 0; }
.sec--paper::after { background-image: linear-gradient(90deg, transparent, rgba(10,10,10,.5) 50%, transparent); }
html.motion .sec.lit::after { animation: seam 2.4s cubic-bezier(.2,0,0,1) both; }
@keyframes seam { 0% { opacity: 0; background-position: -40% 0; } 15% { opacity: 1; } 100% { opacity: 0; background-position: 140% 0; } }
.sec--dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--gx, 80%) var(--gy, 20%), rgba(255,248,236,.075), transparent 70%);
  transition: background-position .6s; }
html.motion .sec--dark:not(.glow)::before { animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { from { --gx: 85%; --gy: 15%; } to { --gx: 60%; --gy: 45%; } }
@property --gx { syntax: "<percentage>"; inherits: true; initial-value: 80%; }
@property --gy { syntax: "<percentage>"; inherits: true; initial-value: 20%; }
.sec--dark { isolation: isolate; }
/* картинки проявляются шторкой света и приподнимаются на ховере */
html.motion .task__img, html.motion .next__bg img { transition: transform .8s cubic-bezier(.2,0,0,1), clip-path 1.4s cubic-bezier(.2,0,0,1), filter 1.4s; }
html.motion .sec:not(.lit) .task__img { clip-path: inset(0 0 100% 0); filter: brightness(1.8); }
.task:hover .task__img, .task:focus-visible .task__img { transform: translateY(-6px) scale(1.02); }
.task__img { box-shadow: 0 24px 60px -30px rgba(0,0,0,.45); }

/* ───────── fast: блоки 1–9 по CONTENT v2 — текст виден всегда, живут свет и кадр ───────── */
.b { overflow: clip; }
.b__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 48px; align-items: center; }
.b__text { grid-column: 1 / 6; display: grid; gap: 24px; justify-items: start; }
.b__grid .pic { grid-column: 7 / -1; }
.b--flip .b__text { grid-column: 8 / -1; grid-row: 1; } .b--flip .pic { grid-column: 1 / 7; grid-row: 1; }
.b .label { color: var(--mut); }
.b__h { font-weight: 300; font-size: var(--h2); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.b__h--xl { font-size: clamp(36px, 5vw, 72px); }
.b__lead { font-size: 19px; line-height: 1.55; color: var(--mut); max-width: 34em; }
.b h3 { font-weight: 400; font-size: var(--h3); line-height: 1.25; margin: 10px 0 8px; }
.b li p { font-size: 16px; line-height: 1.5; color: var(--mut); }
/* кадр сцены: медленный наезд камеры, дыхание света, световая шторка при входе */
.pic { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #0a0a0a; box-shadow: 0 40px 80px -40px rgba(0,0,0,.55); }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 70% 40%; }
html.motion .pic img { animation: cam 22s ease-in-out infinite alternate, scene-breathe 9s ease-in-out infinite alternate; }
@keyframes cam { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.pic::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,250,240,.55) 50%, transparent 65%); transform: translateX(-120%); }
html.motion .lit .pic::after { animation: sweep 1.8s .35s cubic-bezier(.2,0,0,1) both; }
@keyframes sweep { to { transform: translateX(120%); } }
.pic--wide { aspect-ratio: 21 / 9; margin: 48px 0; }
/* поток частиц в процессах: бежит по световой линии кадра */
.pic__flow { position: absolute; left: 0; right: 0; bottom: 14%; height: 18%; pointer-events: none;
  background: radial-gradient(2px 2px at 10% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 55%, #fff, transparent), radial-gradient(2px 2px at 55% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 75% 30%, #fff, transparent), radial-gradient(2px 2px at 90% 20%, #fff, transparent);
  background-size: 50% 100%; opacity: .8; transform: skewY(-9deg); }
html.motion .pic__flow { animation: flow 3.2s linear infinite; }
@keyframes flow { to { background-position: 100% 0, 100% 0, 100% 0, 100% 0, 100% 0; } }
/* проявление: снизу, по очереди */
html.motion .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,0,0,1), transform .9s cubic-bezier(.2,0,0,1); }
html.motion .rv.in { opacity: 1; transform: none; }
/* 1 · задачи на линии: линия прорисовывается светом слева направо */
.tasks4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); margin-top: 72px; counter-reset: t; }
.tasks4 li { position: relative; padding-top: 28px; border-top: 1px solid var(--ln); transition: transform .3s cubic-bezier(.2,0,0,1); }
.tasks4 li::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--fg); transition: width 1.2s cubic-bezier(.2,0,0,1); }
.tasks4 li.in::before { width: 100%; }
.tasks4 li:nth-child(2)::before { transition-delay: .15s; } .tasks4 li:nth-child(3)::before { transition-delay: .3s; } .tasks4 li:nth-child(4)::before { transition-delay: .45s; }
.tasks4 li:hover, .cards3 li:hover, .cards4 li:hover { transform: translateY(-4px); }
/* 2 · шаги и форма */
.steps { display: grid; gap: 10px; font-size: 17px; }
.steps li { display: flex; gap: 10px; align-items: baseline; }
.demo { display: grid; gap: 10px; width: 100%; max-width: 520px; }
.demo__row { display: flex; gap: 8px; }
.demo input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; font: 400 16px var(--cyr); color: var(--paper); background: transparent; border: 1px solid var(--graphite); border-radius: 0; }
.demo input:focus { outline: none; border-color: var(--paper); }
.b__tags { letter-spacing: .12em; }
/* 4, 9 · кадр на весь экран */
.bleed { position: relative; min-height: 100svh; display: grid; align-items: center; background: #EDEDEB; color: var(--black); --mut: #3f3f3f; }
.bleed__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.motion .bleed__bg img { animation: cam 26s ease-in-out infinite alternate; }
.bleed::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(240,240,238,.94) 0, rgba(240,240,238,.75) 38%, transparent 62%); }
.bleed__in { position: relative; z-index: 2; }
.bleed .b__text { max-width: 560px; }
/* проём в плите первого шага дышит светом */
.bleed__open { position: absolute; z-index: 1; left: 83.5%; top: 45%; width: 7.5%; height: 40%; pointer-events: none; background: radial-gradient(closest-side, rgba(255,255,255,.9), transparent); filter: blur(18px); }
html.motion .bleed__open { animation: open 4s ease-in-out infinite alternate; }
@keyframes open { from { opacity: .3; transform: scale(.9); } to { opacity: .9; transform: scale(1.15); } }
.outs { display: flex; flex-wrap: wrap; gap: 8px; }
.outs li { padding: 8px 14px; border: 1px solid rgba(10,10,10,.25); font-size: 15px; background: rgba(255,255,255,.5); }
.bleed--end::before { background: linear-gradient(0deg, rgba(240,240,238,.95) 0, rgba(240,240,238,.7) 45%, rgba(240,240,238,.1) 75%); }
.bleed--end { align-items: end; padding-bottom: 12svh; }
.end__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.end__mail, .end__sup a { color: inherit; font-size: 18px; }
.end__sup { color: var(--mut); font-size: 15px; }
/* 5 · лестница: свет доходит до «Интеграции» и останавливается */
.ladder5 { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--g); margin-top: 72px; padding-top: 28px; font-size: 18px; }
.ladder5::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--graphite); }
.ladder5::after { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: linear-gradient(90deg, rgba(255,250,240,.3), #fff); box-shadow: 0 0 16px rgba(255,250,240,.7); transition: width 1.6s .3s cubic-bezier(.2,0,0,1); }
.ladder5.in::after { width: calc(30% + var(--g) * .2); }
.ladder5 li { display: grid; gap: 8px; color: var(--silver); }
.ladder5 li.on { color: var(--white); }
.ladder5 li:nth-child(n+3) { opacity: .55; }
.q4 { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: baseline; }
.q4 ul { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 20px; font-weight: 300; }
/* 6, 7 · карточки */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); margin-top: 64px; }
.cards3 li, .cards4 li { padding: 28px; border: 1px solid var(--ln); transition: transform .3s cubic-bezier(.2,0,0,1), border-color .3s; }
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); }
.cards4 li { border-color: var(--graphite); background: linear-gradient(180deg, rgba(255,255,255,.04), transparent); }
.cards4 li:hover { border-color: #6a6a6a; }
/* 8 · вопросы все открыты */
.faq2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px var(--g); margin-top: 56px; }
.faq2 div { border-top: 1px solid var(--ln); padding-top: 20px; }
.faq2 dt { font-size: 20px; margin-bottom: 10px; }
.faq2 dd { margin: 0; color: var(--mut); font-size: 16px; line-height: 1.55; }
@media (max-width: 960px) {
  .b__grid { grid-template-columns: 1fr; }
  .b__text, .b__grid .pic, .b--flip .b__text, .b--flip .pic { grid-column: 1; grid-row: auto; }
  .tasks4, .cards4 { grid-template-columns: 1fr 1fr; }
  .ladder5 { grid-template-columns: 1fr; gap: 16px; padding: 0 0 0 24px; }
  .ladder5::before { left: 0; top: 0; bottom: 0; width: 1px; height: auto; right: auto; }
  .ladder5::after { left: -1px; top: 0; width: 3px; height: 0; transition-property: height; }
  .ladder5.in::after { width: 3px; height: 30%; }
}
@media (max-width: 700px) {
  .tasks4, .cards3, .cards4, .faq2 { grid-template-columns: 1fr; }
  .b__lead { font-size: 17px; }
  .demo__row { flex-direction: column; } .demo__row .btn { justify-content: center; }
  .bleed { align-items: end; padding-block: 45svh 64px; }
  .bleed::before { background: linear-gradient(0deg, rgba(240,240,238,.97) 0, rgba(240,240,238,.9) 50%, rgba(240,240,238,.15) 80%); }
  .bleed__open { display: none; }
  .pic--wide { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) { .pic img, .bleed__bg img, .pic__flow, .bleed__open { animation: none !important; } }

/* ───────── fast v7: заставка из настоящего света кадра. Копия кадра героя на чёрном видна только через маску:
   щель проявляется сверху вниз, у пола свет расходится по линии основания барьера, потом зал проявляется целиком.
   Координаты и маску ведёт JS (--x --top --L --bot --F), кадр стоит пиксель в пиксель над героем. ───────── */
.ld { display: none; }
html.js.motion .ld { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; color: var(--paper); background: #050505; transition: opacity 1.6s cubic-bezier(.4,0,.2,1); }
.ld__img { position: absolute; inset: 0; background-repeat: no-repeat; filter: contrast(1.04);
  -webkit-mask: radial-gradient(ellipse 110px var(--L, 1px) at var(--x, 90%) var(--top, 0), #000 0 30%, rgba(0,0,0,.45) 62%, transparent),
                radial-gradient(ellipse var(--F, 0px) var(--Fy, 0px) at var(--x, 90%) var(--bot, 80%), #000 0 25%, rgba(0,0,0,.35) 60%, transparent);
  mask: radial-gradient(ellipse 110px var(--L, 1px) at var(--x, 90%) var(--top, 0), #000 0 30%, rgba(0,0,0,.45) 62%, transparent),
        radial-gradient(ellipse var(--F, 0px) var(--Fy, 0px) at var(--x, 90%) var(--bot, 80%), #000 0 25%, rgba(0,0,0,.35) 60%, transparent); }
.ld__mark { position: absolute; left: max(var(--m), (100% - var(--wrap)) / 2); bottom: 48px; display: flex; align-items: center; gap: 16px; font: 400 13px/1 var(--latin); letter-spacing: .3em; transition: opacity .6s; }
.ld__mark svg { animation: ld-sign 1.2s ease-in-out infinite; }
.ld__n { font-weight: 400; color: var(--silver); letter-spacing: .06em; min-width: 3ch; }
@keyframes ld-sign { 50% { transform: translateX(6px); opacity: .5; } }
html.ld-open .ld { opacity: 0; }
html.ld-open .ld__mark { opacity: 0; }
html.ld-done .ld { display: none; }
/* пока заставка идёт, сцена героя ждёт; кадр героя не проявляется второй раз — его проявила заставка */
html.loading .hero *, html.loading .hero *::before, html.loading .hero *::after { animation-play-state: paused !important; }
html.js.motion .scene__img img { animation: scene-breathe 14s ease-in-out infinite alternate; }
html.js.motion .scene__slit { animation: slit 5.5s ease-in-out infinite, fade-in 2s both; }

/* ───────── fast v3: блоки услуг ───────── */
.b__h--w { max-width: 15em; }
.b > .wrap > .b__lead { margin-top: 24px; }
/* 1 · задачи строками: большая цифра, линия прорисовывается */
.rows { margin-top: 72px; }
.rows li { position: relative; display: grid; grid-template-columns: 120px 1fr 1.2fr auto; gap: var(--g); align-items: baseline; padding: 32px 0; border-top: 1px solid var(--ln); transition: padding .4s cubic-bezier(.2,0,0,1); }
.rows li:last-child { border-bottom: 1px solid var(--ln); }
.rows li::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--fg); transition: width 1.4s .2s cubic-bezier(.2,0,0,1); }
.rows li.in::before { width: 100%; }
.rows__n { font: 300 clamp(40px, 4.4vw, 64px)/1 var(--cyr); color: var(--fg); opacity: .18; transition: opacity .4s; }
.rows h3 { margin: 0; } .rows p { margin: 0; }
.rows li:hover { padding-left: 16px; } .rows li:hover .rows__n { opacity: 1; }
/* 2 · сайты: слева заголовок стоит, справа шаги загораются по мере прокрутки */
.split { display: grid; grid-template-columns: 5fr 1fr 6fr; align-items: start; }
.split__head { grid-column: 1; position: sticky; top: 120px; display: grid; gap: 24px; justify-items: start; }
.split__head .b__lead { margin: 0; }
.seq { grid-column: 3; position: relative; display: grid; gap: 72px; padding-left: 40px; }
.seq::before, .seq::after { content: ""; position: absolute; left: 0; top: 8px; width: 1px; }
.seq::before { bottom: 8px; background: var(--graphite); }
.seq::after { height: calc(var(--p, 0) * (100% - 16px)); background: linear-gradient(transparent, #fff); box-shadow: 0 0 14px rgba(255,250,240,.7); }
.seq li { position: relative; color: var(--silver); transition: color .5s; }
.seq li::before { content: ""; position: absolute; left: -44px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--black); border: 1px solid var(--graphite); transition: background .4s, box-shadow .4s, border-color .4s; }
.seq li.on { color: var(--paper); } .seq li.on::before { background: #fff; border-color: #fff; box-shadow: 0 0 16px 4px rgba(255,250,240,.6); }
.seq li p { color: inherit; opacity: .8; }
/* 3 · автоматизация: импульс бежит по схеме без остановки */
.flow4 { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); margin-top: 72px; padding-top: 40px; }
.flow4__track { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ln); overflow: hidden; }
.flow4__track b { position: absolute; top: 0; left: -20%; width: 20%; height: 1px; background: linear-gradient(90deg, transparent, var(--black)); }
html.motion .flow4.in .flow4__track b { animation: pulse 3.2s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes pulse { to { left: 100%; } }
.flow4 > div { position: relative; display: grid; gap: 8px; }
.flow4 > div::before { content: ""; position: absolute; top: -45px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1px solid var(--black); }
html.motion .flow4.in > div::before { animation: node 3.2s infinite; }
.flow4 > div:nth-child(3)::before { animation-delay: .8s !important; } .flow4 > div:nth-child(4)::before { animation-delay: 1.6s !important; } .flow4 > div:nth-child(5)::before { animation-delay: 2.4s !important; }
@keyframes node { 0%, 30%, 100% { background: var(--paper); transform: none; } 10% { background: var(--black); transform: scale(1.4); } }
.flow4 strong { font-weight: 400; font-size: var(--h3); }
.flow4 p { color: var(--mut); font-size: 16px; line-height: 1.5; }
.flow4__human::before { border-radius: 0 !important; }
.gains { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); margin-top: 96px; }
.gains li { padding: 32px; background: var(--white); transition: transform .35s cubic-bezier(.2,0,0,1), box-shadow .35s; }
.gains li:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.25); }
.gains b { display: block; font: 300 48px/1 var(--cyr); }
/* 4 · подход: этапы подсвечиваются по очереди сами, текст виден всегда */
.path { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); margin-top: 72px; counter-reset: s; }
.path li { position: relative; padding-top: 32px; color: var(--silver); }
.path li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--graphite); }
.path li::after { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: #fff; box-shadow: 0 0 14px rgba(255,250,240,.7); }
html.motion .path.in li { animation: step-c 8s infinite; } html.motion .path.in li::after { animation: step-l 8s infinite; }
.path li:nth-child(2), .path li:nth-child(2)::after { animation-delay: 2s !important; }
.path li:nth-child(3), .path li:nth-child(3)::after { animation-delay: 4s !important; }
.path li:nth-child(4), .path li:nth-child(4)::after { animation-delay: 6s !important; }
@keyframes step-c { 0%, 30% { color: var(--paper); } 34%, 100% { color: var(--silver); } }
@keyframes step-l { 0% { width: 0; opacity: 1; } 25% { width: 100%; opacity: 1; } 32%, 100% { width: 100%; opacity: 0; } }
.path p { color: inherit; opacity: .85; }
/* 5 · студия: бегущая строка компетенций */
.marq { margin-top: 80px; overflow: hidden; border-block: 1px solid var(--ln); }
.marq__in { display: flex; width: max-content; }
.marq span { padding: 28px 40px; font: 300 clamp(32px, 4vw, 56px)/1 var(--latin); letter-spacing: .04em; }
.marq span::after { content: "›"; margin-left: 80px; opacity: .3; }
html.motion .marq__in { animation: marq 28s linear infinite; }
@keyframes marq { to { transform: translateX(-50%); } }
/* 6 · контакт: та же щель света, что в герое */
.contact2 { min-height: 88svh; display: grid; align-items: center; overflow: hidden; }
.contact2 .wrap { display: grid; gap: 28px; justify-items: start; }
.contact2 .b__lead { margin: 0; }
.contact2__slit { position: absolute; right: 12%; top: 0; bottom: 0; width: 2px; z-index: -1; background: linear-gradient(transparent, #fff 30%, #fff 70%, transparent); box-shadow: 0 0 30px 8px rgba(255,250,240,.35), 0 0 200px 80px rgba(255,248,235,.08); transform: scaleY(0); transition: transform 1.8s cubic-bezier(.2,0,0,1); }
.contact2.lit .contact2__slit { transform: none; }
html.motion .contact2.lit .contact2__slit { animation: slit 5.5s 2s ease-in-out infinite; }
.contact2 .end__mail { color: var(--paper); }
@media (max-width: 960px) {
  .rows li { grid-template-columns: 64px 1fr; } .rows li p, .rows li .label { grid-column: 2; }
  .split { grid-template-columns: 1fr; gap: 64px; } .split__head { position: static; } .seq { grid-column: 1; }
  .flow4, .gains { grid-template-columns: 1fr 1fr; row-gap: 48px; } .path { grid-template-columns: 1fr 1fr; row-gap: 48px; }
}
@media (max-width: 700px) {
  .flow4, .gains, .path { grid-template-columns: 1fr; }
  .flow4 { padding: 0 0 0 32px; } .flow4__track { top: 0; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
  .flow4__track b { left: 0; top: -20%; width: 1px; height: 20%; background: linear-gradient(transparent, var(--black)); }
  @keyframes pulse { to { top: 100%; } }
  html.motion .flow4.in .flow4__track b { animation-name: pulse-v; }
  .flow4 > div::before { top: 6px; left: -32px; }
  .contact2__slit { right: 8%; }
}
@keyframes pulse-v { to { top: 100%; } }

/* ───────── fast v4: студия, финал, подвал ───────── */
.skills6 { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 80px; border-top: 1px solid var(--ln); }
.skills6 li { position: relative; display: grid; gap: 10px; align-content: start; padding: 28px 20px 36px 0; }
.skills6 li + li { padding-left: 20px; border-left: 1px solid var(--ln); }
.skills6 li::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--fg); transition: width .9s cubic-bezier(.2,0,0,1); }
.skills6 li.in::before { width: 100%; transition-delay: inherit; }
.skills6 b { font: 300 clamp(20px, 1.9vw, 28px)/1.1 var(--latin); letter-spacing: .01em; }
.skills6 li > span:last-child { font-size: 15px; color: var(--mut); }
/* финал: щель у правого края, мимо текста */
.contact2 .wrap > * { max-width: min(100%, 820px); }
.contact2__slit { right: 7%; }
/* подвал: строка, колонки, большой знак со светом, юр. строка */
.ftr { padding-block: 104px 40px; border-top: 1px solid var(--graphite); overflow: hidden; }
.ftr__top { display: grid; grid-template-columns: 6fr 3fr 3fr; gap: 48px var(--g); }
.ftr__lead { display: grid; gap: 32px; justify-items: start; align-content: start; }
.ftr__desc { font: 300 clamp(26px, 2.6vw, 38px)/1.2 var(--cyr); color: var(--paper); max-width: 15em; }
.ftr__col { display: grid; gap: 12px; align-content: start; font-size: 16px; }
.ftr__col .label { margin-bottom: 8px; color: var(--silver); }
.ftr__col a { color: var(--paper); text-decoration: none; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .4s cubic-bezier(.2,0,0,1); }
.ftr__col a:hover, .ftr__legal a:hover { background-size: 100% 1px; }
.ftr__sup { color: var(--silver); font-size: 14px; line-height: 1.6; margin-top: 8px; }
.ftr__sup a { font-size: 14px; }
.ftr__word { margin-top: 120px; aspect-ratio: 288.2 / 28.1; background: linear-gradient(100deg, #2a2a2a 0 35%, #f2f2f0 47%, #fff 50%, #f2f2f0 53%, #2a2a2a 65% 100%) 0 0 / 300% 100%;
  -webkit-mask: url(../img/wordmark.svg) center / 100% 100% no-repeat; mask: url(../img/wordmark.svg) center / 100% 100% no-repeat; background-position: 100% 0; }
html.motion .ftr__word { animation: word 7s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes word { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }
.ftr__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 40px; font-size: 13px; color: #7a7a7a; }
.ftr__legal a { color: var(--silver); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s; }
@media (max-width: 960px) { .skills6 { grid-template-columns: repeat(3, 1fr); } .skills6 li:nth-child(4) { border-left: 0; padding-left: 0; } .skills6 li:nth-child(n+4) { border-top: 1px solid var(--ln); } .ftr__top { grid-template-columns: 1fr 1fr; } .ftr__lead { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .skills6 { grid-template-columns: 1fr 1fr; } .skills6 li:nth-child(odd) { border-left: 0; padding-left: 0; } .skills6 li:nth-child(4) { border-left: 1px solid var(--ln); padding-left: 20px; } .skills6 li:nth-child(n+3) { border-top: 1px solid var(--ln); }
  .contact2__slit { right: 10px; }
  .ftr { padding-top: 72px; } .ftr__top { grid-template-columns: 1fr; } .ftr__word { margin-top: 72px; }
}