/* Wooda — язык «чертёж + кадр».
   Белый лист, миллиметровка, ультрамарин; уголки видоискателя и таймкоды на видео.
   Шрифты: Onest (текст/заголовки), JetBrains Mono (технические детали). */

:root {
  --paper: #efedE8;         /* лист: тёплый светло-серый, не стерильно-белый */
  --paper-lift: #f6f5f2;    /* приподнятые плоскости */
  --ink: #111111;           /* чернила */
  --ink-dim: #55554f;
  --blue: #1f33de;          /* ультрамарин чертежа */
  --blue-deep: #1a2bbd;     /* заливка инверсных секций */
  --blue-soft: rgba(31, 51, 222, 0.055);
  --blue-line: rgba(31, 51, 222, 0.14);
  --hair: rgba(17, 17, 17, 0.12);
  --font-body: "Golos Text", "Onest", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
  --font-logo: "Syne", "Onest", sans-serif;   /* только логотип: имя в знаке и заставке */
  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1560px;                                              /* предел ширины контента */
  --gut: max(var(--pad), calc((100vw - var(--maxw)) / 2));     /* боковое поле: центрирует контент на широких экранах */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* фуллблид-кадры шириной 100vw не должны давать горизонтальный скролл */
}

.mono { font-family: var(--font-mono); }

/* ---------- Миллиметровка на весь лист ---------- */

.sheet-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--blue-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--blue-soft) 1px, transparent 1px),
    linear-gradient(var(--blue-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--blue-line) 1px, transparent 1px);
  background-size: 14px 14px, 14px 14px, 112px 112px, 112px 112px;
}

header, section, footer { position: relative; z-index: 1; }

/* ---------- Шапка ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--gut);
  background: transparent;
  transition: padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* после первого экрана шапка уплотняется, чтобы не наезжать на контент */
.site-header.is-stuck {
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(239, 237, 232, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--hair);
}

.site-header.is-stuck .wordmark-name { font-size: clamp(18px, 1.6vw, 23px); }
/* подпись не опускаем ниже 7px: моношрифт с разрядкой мельче превращается в серую полосу */
.site-header.is-stuck .wordmark-sub { font-size: max(7px, clamp(7.5px, 0.62vw, 9px)); margin-top: 4px; }

.wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  text-align: center;   /* подпись центруется под именем */
}

/* Знак в шапке — компактная версия замка: имя + подпись, без линейки.
   Syne шире привычных гротесков примерно на 70%, поэтому кегль ниже прежнего. */
.wordmark-name {
  font-family: var(--font-logo);
  font-weight: 800;
  font-size: clamp(23px, 2.4vw, 34px);
  letter-spacing: -0.02em;
  transition: font-size 0.3s ease;
}

.wordmark-sub {
  margin-top: 7px;
  font-size: max(7px, clamp(8px, 0.8vw, 11px));
  letter-spacing: 0.36em;
  /* компенсация хвостового пробела разрядки: без неё центрованный текст уезжает влево */
  padding-left: 0.36em;
  text-transform: lowercase;
  color: var(--blue);
  transition: font-size 0.3s ease, margin-top 0.3s ease;
}

.header-cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border: 1.5px solid var(--ink);
  padding: 8px 18px;
  transition: background 0.2s, color 0.2s;
}

.header-cta:hover { background: var(--ink); color: var(--paper); }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  background: var(--blue);
  color: #fff;
  padding: 15px 34px;
  transition: transform 0.2s, background 0.2s;
}

.btn:hover { background: #1628b8; transform: translateY(-2px); }
.btn--big { font-size: 17px; padding: 18px 44px; }

/* ---------- Хиро ---------- */

.hero {
  position: relative;
  padding: 0 var(--gut) clamp(36px, 6vh, 72px);
}

/* первый экран: текст слева, живой кадр справа — продукт виден сразу */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.78fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  min-height: 88svh;
  padding-top: clamp(80px, 11vh, 120px);
}

.hero-media { margin-right: calc(-1 * var(--gut)); }

/* уголки видоискателя — только на первом экране */
.vf {
  position: absolute;
  inset: 18px;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) top left / 24px 2px,
    linear-gradient(var(--ink), var(--ink)) top left / 2px 24px,
    linear-gradient(var(--ink), var(--ink)) top right / 24px 2px,
    linear-gradient(var(--ink), var(--ink)) top right / 2px 24px,
    linear-gradient(var(--ink), var(--ink)) bottom left / 24px 2px,
    linear-gradient(var(--ink), var(--ink)) bottom left / 2px 24px,
    linear-gradient(var(--ink), var(--ink)) bottom right / 24px 2px,
    linear-gradient(var(--ink), var(--ink)) bottom right / 2px 24px;
  background-repeat: no-repeat;
}

/* REC — на самом кадре */
.rec {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: #fff;
  mix-blend-mode: difference;
}

.rec i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e11d2e;
  animation: blink 1.2s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0.15; } }

.dim {
  position: absolute;
  top: 150px;
  right: var(--gut);
  width: 190px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--blue);
  border-top: 1px solid var(--blue);
  padding-top: 6px;
  text-align: center;
}

.dim::before, .dim::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--blue);
}

.dim::before { left: 0; }
.dim::after { right: 0; }

.hero-inner { max-width: 1100px; }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}

.tc {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #9a9a94;
  margin-bottom: 14px;
}

.hero h1 {
  font-weight: 600;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 26px;
  text-wrap: balance;
}

.hero-sub {
  max-width: 560px;
  font-size: clamp(15px, 1.6vw, 17.5px);
  color: var(--ink-dim);
  margin-bottom: 36px;
}

/* ---------- Кадры (медиа-слоты) ---------- */

.feature-frame { padding: 0 var(--pad) clamp(56px, 9vh, 110px); }

.work { display: flex; flex-direction: column; gap: 10px; }

.work figcaption {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #9a9a94;
}

/* слот заменяется <video>/<iframe> без изменения сетки */
.media-slot {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f1ee;
  border: 1px solid var(--hair);
  /* уголки видоискателя на каждом кадре */
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink));
  background-position: 10px 10px, 10px 10px, calc(100% - 10px) 10px, calc(100% - 10px) 10px,
    10px calc(100% - 10px), 10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px);
  background-size: 18px 1.5px, 1.5px 18px, 18px 1.5px, 1.5px 18px, 18px 1.5px, 1.5px 18px, 18px 1.5px, 1.5px 18px;
  background-repeat: no-repeat;
}

.work--wide .media-slot, .work--feature .media-slot { aspect-ratio: 16 / 9; }

.slot-note {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a9a94;
  border: 1px dashed #c9c8c2;
  padding: 8px 14px;
}

/* ---------- Секции ---------- */

.section {
  padding: clamp(64px, 11vh, 128px) var(--gut);
  border-top: 1px solid var(--hair);
}

/* инверсная секция: сплошная заливка ультрамарином */
.section--invert {
  background: var(--blue-deep);
  color: #fff;
  border-top: none;
}

.section--invert .section-head h2,
.section--invert h3 { color: #fff; }

.section--invert .sheet-mark {
  color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

.section--invert .sheet-mark span:last-child { color: rgba(255, 255, 255, 0.5); }

.section--invert .why p,
.section--invert .why-figure-text { color: rgba(255, 255, 255, 0.72); }

/* на синем миллиметровка меняет полярность */
.section--invert::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 14px 14px, 14px 14px, 112px 112px, 112px 112px;
}

.section--invert > * { position: relative; z-index: 1; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin-bottom: clamp(34px, 6vh, 60px);
}

.section-num {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 4px 10px;
  white-space: nowrap;
}

.section-head h2 {
  font-weight: 600;
  font-size: clamp(36px, 6.4vw, 92px);
  letter-spacing: -0.035em;
  line-height: 0.98;
}

/* маркировка листа по краям секции — язык проектной документации */
.sheet-mark {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: clamp(28px, 4vh, 48px);
  border-bottom: 1px solid var(--hair);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

.sheet-mark span:last-child { color: #9a9a94; }

/* ---------- Для кого (сегменты) ---------- */

.segment {
  padding: clamp(36px, 6vh, 72px) 0;
  border-top: 1px solid var(--hair);
}

/* десктоп: текст с чертежом слева, кадр справа — с вылетом за правый край листа */
.segment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(24px, 3.4vw, 64px);
  align-items: center;
}

.segment-text { max-width: 640px; }

/* чертёж-иллюстрация — под текстом, в левой колонке */


.segment-art svg { width: 100%; height: auto; display: block; }

.segment-art .axis {
  stroke-width: 0.8;
  stroke-dasharray: 7 5;
  opacity: 0.55;
}

.segment-art .ground { stroke-width: 1.1; }

.segment-art .hatch {
  stroke-width: 0.8;
  opacity: 0.5;
}

.segment-art .dimline { stroke-width: 0.9; opacity: 0.75; }

.segment-art .dimtext {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: currentColor;
  stroke: none;
  opacity: 0.75;
}

/* чертёж прорисовывается линией, когда попадает в экран.
   Анимация, а не transition: у анимаций выше приоритет в каскаде — линия дорисовывается гарантированно. */
.segment-art svg [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.segment-art .dimtext { opacity: 0; }

/* Саму прорисовку запускает script.js (Web Animations API):
   так порядок и задержки линий задаются в одном месте и не зависят от каскада. */

@media (prefers-reduced-motion: reduce) {
  .segment-art svg [pathLength] { stroke-dashoffset: 0; }
  .segment-art .dimtext { opacity: 0.75; }
}

.segment:first-of-type { border-top: none; padding-top: 0; }

/* секция сегментов идёт без заголовка — компенсируем отступ */
.section--segments { padding-top: clamp(48px, 8vh, 96px); }

.segment-num {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 3px 9px;
  margin-bottom: 16px;
}

.segment-text h3 {
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 52px);
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin-bottom: 16px;
  text-wrap: balance;
}

.segment-text > p {
  color: var(--ink-dim);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
  max-width: 34ch;
  margin-bottom: 26px;
}

.segment-text ul { list-style: none; }

.segment-text li {
  color: var(--ink);
  font-size: clamp(15.5px, 1.2vw, 18.5px);
  padding: 9px 0 9px 24px;
  position: relative;
  border-bottom: 1px solid var(--hair);
}

.segment-text li:last-child { border-bottom: none; }

.segment-text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 12px;
  height: 1.5px;
  background: var(--blue);
}

/* ---------- Ролик-разворот: фуллблид с табличкой-штампом ---------- */

.segment-media {
  /* кадр уходит за правый край листа */
  margin-right: calc(-1 * var(--gut));
}

.band { position: relative; overflow: hidden; }

.band video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* У демо-ролика чёрные полосы вшиты в файл: контент 2.39:1 внутри кадра 16:9,
   полосы по 138px сверху и снизу. Масштаб 1.35 срезает их с запасом.
   Для чистых 16:9 роликов класс band--letterbox убрать из разметки. */
.band--letterbox video { transform: scale(1.35); }

/* вертикальный кадр первого экрана (правило ниже .band video — иначе перебивается) */
.hero-media .hero-band,
.hero-media .hero-band video { aspect-ratio: 4 / 5; }

/* табличка-штамп поверх кадра */
.plate {
  position: absolute;
  left: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 2;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 13px 20px;
  max-width: min(420px, 70%);
}

.plate .tag {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 4px;
}

.plate b {
  font-weight: 600;
  font-size: clamp(15px, 1.7vw, 18px);
  letter-spacing: -0.01em;
}

/* техстрока под кадром */
.strap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px var(--gut) 0 0;
  border-top: 1px solid var(--hair);
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #9a9a94;
}

/* ---------- Разрыв в бумаге: видео лежит под листом ---------- */

/* ---------- От простого до сложного (шкала) ---------- */

.scale-lead {
  max-width: 620px;
  color: var(--ink-dim);
  font-size: clamp(15px, 1.6vw, 17px);
  margin-bottom: clamp(40px, 6vh, 72px);
}

/* размерная ось как на чертеже */
.scale-axis {
  position: relative;
  height: 1.5px;
  background: var(--blue);
  margin-bottom: 40px;
  opacity: 0.9;
}

.scale-axis::before, .scale-axis::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: var(--blue);
}

.scale-axis::before { left: 0; }
.scale-axis::after { right: 0; }

.scale-cap {
  position: absolute;
  top: -28px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--paper);
  padding: 0 8px;
}

.scale-cap--start { margin-left: -8px; }
.scale-cap--end { margin-right: -8px; }

.scale-cap--start { left: 0; }
.scale-cap--end { right: 0; }

.scale-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}

.step {
  position: relative;
  background: var(--paper-lift);
  padding: clamp(24px, 3vw, 40px);
}

/* деление шкалы над каждой ступенью: чем сложнее, тем плотнее */
.step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  background: var(--blue);
  transition: width 0.5s ease;
}

.scale-steps .step:nth-child(1)::before { width: 33%; height: 2px; opacity: 0.45; }
.scale-steps .step:nth-child(2)::before { width: 66%; height: 3px; opacity: 0.7; }
.scale-steps .step:nth-child(3)::before { width: 100%; height: 5px; opacity: 1; }

/* нарастание веса вправо */
.scale-steps .step:nth-child(1) h3 { font-size: clamp(19px, 2vw, 23px); }
.scale-steps .step:nth-child(2) h3 { font-size: clamp(21px, 2.3vw, 27px); }
.scale-steps .step:nth-child(3) h3 { font-size: clamp(23px, 2.7vw, 32px); }

.scale-steps .step:nth-child(2) { padding-top: calc(clamp(24px, 3vw, 40px) + 6px); }
.scale-steps .step:nth-child(3) { padding-top: calc(clamp(24px, 3vw, 40px) + 12px); }

.step-num {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--blue);
  margin-bottom: 14px;
}

.step h3 {
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.step-lead { color: var(--blue); font-size: 15px; margin-bottom: 18px; }

.step ul { list-style: none; }

.step li {
  color: var(--ink-dim);
  font-size: 15px;
  padding: 7px 0 7px 18px;
  position: relative;
}

.step li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 7px;
  height: 1.5px;
  background: var(--blue);
}

/* вершина шкалы — акцент */
.step--peak { background: #f7f8ff; }
.step--peak h3 { color: var(--blue); }

/* ---------- Работы ---------- */

.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}

.work--wide { grid-column: span 2; }

/* ---------- Почему Wooda ---------- */

.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.why-col { display: grid; gap: clamp(24px, 3.5vh, 40px); }

.why h3 {
  font-weight: 600;
  font-size: clamp(19px, 1.6vw, 23px);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.why p { color: var(--ink-dim); font-size: 15px; }

/* акцентная врезка с цифрой рынка */
.why-figure {
  border: 1.5px solid rgba(255,255,255,0.5);
  padding: clamp(24px, 2.6vw, 38px);
  background: rgba(255,255,255,0.06);
  position: relative;
}

.why-figure::after {
  content: "";
  position: absolute;
  inset: 7px -7px -7px 7px;
  border: 1px solid var(--blue);
  z-index: -1;
}

.why-figure-top {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}

.why-figure-num {
  display: block;
  font-weight: 600;
  font-size: clamp(40px, 4.6vw, 68px);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 10px;
}

.why-figure-unit {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #9a9a94;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 18px;
}

.why-figure-text { color: var(--ink-dim); font-size: 15px; }

/* ---------- Процесс ---------- */

.process {
  list-style: none;
  counter-reset: step;
  max-width: 720px;
}

.process li {
  counter-increment: step;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
  color: var(--ink-dim);
  font-size: 16px;
}

.process li::before {
  content: "0" counter(step);
  font-family: var(--font-mono);
  color: var(--blue);
  font-size: 13px;
  min-width: 34px;
}

.process li span { color: var(--ink); font-weight: 600; }

/* ---------- Цены ---------- */

.price-rows { max-width: 880px; }

.price-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hair);
  font-size: clamp(16px, 2vw, 19px);
}

.price-row:first-child { border-top: 1px solid var(--hair); }

.price-row i {
  flex: 1;
  border-bottom: 1px dotted #cfcec8;
  transform: translateY(-5px);
}

.price-row b {
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  color: var(--blue);
  white-space: nowrap;
}

.price-note { margin-top: 26px; color: var(--ink-dim); font-size: 14px; }

/* ---------- Финальный CTA ---------- */

.section--cta { padding-top: clamp(80px, 14vh, 160px); padding-bottom: clamp(80px, 14vh, 160px); }

.cta-box {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.cta-title {
  font-weight: 600;
  font-size: clamp(26px, 4vw, 46px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 36px;
}

/* ---------- Подвал со штампом ---------- */

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding: 28px var(--gut) 40px;
  border-top: 1px solid var(--hair);
}

.stamp {
  display: grid;
  grid-template-columns: auto auto;
  border: 1.5px solid var(--ink);
  background: var(--paper-lift);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

.stamp div { padding: 5px 12px; border-top: 1px solid var(--ink); }
.stamp div:nth-child(-n+2) { border-top: none; }
.stamp div:nth-child(odd) { border-right: 1px solid var(--ink); color: #8a8880; }

.footer-note { color: var(--ink-dim); font-size: 13px; }
.footer-mark { font-family: var(--font-logo); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }

/* ---------- Анимации появления ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible { opacity: 1; transform: none; }

.reveal-group .reveal:nth-child(1) { transition-delay: 0.05s; }
.reveal-group .reveal:nth-child(2) { transition-delay: 0.14s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.24s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.36s; }
.reveal-group .reveal:nth-child(5) { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .rec i { animation: none; }
}

/* ---------- Мобильная вёрстка ---------- */

@media (max-width: 860px) {
  /* мобилка: сначала текстовый блок с чертежом, ниже — кадр во всю ширину */
  .segment-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding-top: 96px; }
  .hero-media { margin: 0 calc(-1 * var(--gut)); }
  .hero-band, .hero-band video { aspect-ratio: 16 / 9; }
  .hero-media .strap { padding-inline: var(--gut); }
  .why-grid { grid-template-columns: 1fr; }
  
  .segment-media { margin: 0 calc(-1 * var(--gut)); }
  .strap { padding: 10px var(--gut) 0; }
  .scale-steps { grid-template-columns: 1fr; }
  .scale-steps .step::before { width: 100% !important; opacity: 0.35; }
  .scale-steps .step--peak::before { opacity: 1; }
}

@media (max-width: 640px) {
  .works-grid { grid-template-columns: 1fr; }
  .work--wide { grid-column: auto; }
  .header-cta { display: none; }
  .vf { inset: 10px; }
  .dim { display: none; }
  .rec { top: 72px; }
  .section-head { flex-direction: column; gap: 12px; }
}


/* ---------- Инверсные секции: кнопка и подписи ---------- */

.section--invert .btn {
  background: #fff;
  color: var(--blue-deep);
}

.section--invert .btn:hover { background: #eceaff; }

.section--invert .eyebrow { color: rgba(255, 255, 255, 0.85); }
.section--invert .cta-sub { color: rgba(255, 255, 255, 0.72); }
.section--invert .why-figure-top { color: #fff; }
.section--invert .why-figure-unit { color: rgba(255, 255, 255, 0.55); border-bottom-color: rgba(255,255,255,0.2); }
.section--invert .why-figure::after { border-color: rgba(255, 255, 255, 0.35); }

/* ══════════════ Заставка ══════════════ */

body.is-loading { overflow: hidden; }

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: var(--blue-deep);
  transform: translateY(0);
  transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1);
}

.intro.is-done { transform: translateY(-101%); }
.intro.is-gone { display: none; }

.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.35);          /* срез вшитых полос демо-ролика */
  animation: intro-zoom 6s ease-out forwards;
}

@keyframes intro-zoom {
  from { transform: scale(1.35); }
  to   { transform: scale(1.46); }
}

/* синяя вуаль поверх кадра — фирменный цвет доминирует */
.intro-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 43, 189, 0.78), rgba(26, 43, 189, 0.92));
  mix-blend-mode: multiply;
}

.intro-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 14px 14px, 14px 14px, 112px 112px, 112px 112px;
}

.intro-mark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

/* замок заставки: ширину задаёт имя, линейка тянется ровно по нему */
.intro-lock {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}

/* Заставка — полный замок: имя, линейка, подпись.
   Кегль ниже прежнего: Syne заметно шире, на мобильном иначе упирается в края. */
.intro-name {
  font-family: var(--font-logo);
  font-weight: 800;
  font-size: clamp(46px, 10.5vw, 168px);
  letter-spacing: -0.02em;
  line-height: 0.9;
  /* буквы выезжают снизу */
  animation: intro-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* линейка замка; на видео берём белый — ультрамарин на тёмном кадре глохнет */
.intro-rule {
  display: block;   /* span по умолчанию строчный — ширина и высота к нему не применялись бы */
  width: 100%;
  height: clamp(2px, 0.32vw, 5px);
  margin-top: clamp(14px, 2.2vw, 34px);
  background: #fff;
  transform-origin: left;
  animation: intro-rule 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

@keyframes intro-rule {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.intro-sub {
  margin-top: clamp(10px, 1.6vw, 22px);
  font-size: clamp(11px, 1.15vw, 17px);
  letter-spacing: 0.62em;
  text-transform: lowercase;
  padding-left: 0.62em;
  animation: intro-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}

@keyframes intro-rise {
  from { opacity: 0; transform: translateY(38px); }
  to   { opacity: 1; transform: none; }
}

.intro-foot {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  bottom: clamp(20px, 3vh, 34px);
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  animation: intro-rise 0.9s ease 0.5s both;
}

/* линия загрузки по нижней кромке */
.intro-foot::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  height: 2px;
  width: 0;
  background: #fff;
  animation: intro-load 2.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes intro-load { to { width: 100%; } }

/* первый экран мягко проявляется, когда заставка уходит */
body.is-loading .hero-grid { opacity: 0; }
.hero-grid { transition: opacity 0.6s ease 0.25s; }

@media (prefers-reduced-motion: reduce) {
  .intro-video, .intro-name, .intro-sub, .intro-foot, .intro-foot::after { animation: none; }
  .intro { transition: none; }
}

/* ══════════════ Бегущая строка-разделитель ══════════════ */

.ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--blue-deep);
  color: #fff;
  padding: clamp(12px, 1.6vh, 18px) 0;
  border-block: 1px solid rgba(255, 255, 255, 0.18);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-run 38s linear infinite;
}

.ticker-track span {
  padding: 0 clamp(20px, 2.4vw, 40px);
  font-size: clamp(12px, 1.15vw, 15px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ticker-track span::after {
  content: "◆";
  margin-left: clamp(20px, 2.4vw, 40px);
  opacity: 0.5;
  font-size: 0.7em;
  vertical-align: middle;
}

@keyframes ticker-run { to { transform: translateX(-50%); } }

.ticker:hover .ticker-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ══════════════ Акцентная врезка в сегменте ══════════════ */

.segment-accent {
  position: relative;
  margin-top: clamp(24px, 3.5vh, 40px);
  padding: clamp(20px, 2.2vw, 32px);
  background: var(--blue-deep);
  color: #fff;
  overflow: hidden;
}

/* смещённый контур — тот же приём, что у врезки с цифрой */
.segment-accent::after {
  content: "";
  position: absolute;
  inset: 8px -8px -8px 8px;
  border: 1px solid var(--blue);
  z-index: -1;
}

/* миллиметровка проступает и здесь */
.segment-accent::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 14px 14px, 14px 14px;
}

.segment-accent > * { position: relative; }

.segment-accent-top {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 12px;
}

/* контраст весов: тонкое начертание крупно + жирный акцент */
.segment-accent-line {
  font-weight: 300;
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.segment-accent-line b { font-weight: 600; }

.segment-accent-sub {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
}

/* ══════════════ Полоса прогресса чтения ══════════════ */

.progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 60;
  height: 2px;
  width: 0;
  background: var(--blue);
  pointer-events: none;
}

/* ══════════════ Кадр: зум и видоискатель за курсором ══════════════ */

.band { cursor: crosshair; }
.band video { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease; }
.band--letterbox:hover video { transform: scale(1.42); }
.hero-media .hero-band:hover video { transform: scale(1.42); }

/* перекрестие следует за курсором внутри кадра */
.band-cross {
  position: absolute;
  z-index: 4;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  mix-blend-mode: difference;
}

.band-cross::before,
.band-cross::after {
  content: "";
  position: absolute;
  background: #fff;
}

.band-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.band-cross::after { top: 50%; left: 0; right: 0; height: 1px; }

.band:hover .band-cross { opacity: 0.85; }

/* ══════════════ Типографика: больше контраста ══════════════ */

.hero h1 { font-weight: 500; }
.hero h1 em { font-style: normal; font-weight: 600; }

.section-head h2 { font-weight: 500; }
.section-head h2 b { font-weight: 600; }

.hero-sub { font-weight: 300; font-size: clamp(16px, 1.7vw, 21px); line-height: 1.5; }

.scale-lead { font-weight: 300; font-size: clamp(17px, 1.8vw, 24px); line-height: 1.45; }

.cta-title { font-weight: 300; }
.cta-title b { font-weight: 600; }

.why-figure-num { font-weight: 500; }

.step-num, .segment-accent-top, .sheet-mark { font-variant-numeric: tabular-nums; }

/* ══════════════ Сегменты: шире по листу и вровень по высоте ══════════════ */

/* блок «для кого» живёт шире остальных секций — левый край уходит к полю листа */
.section--segments { --maxw: 1900px; }

.segment-grid {
  align-items: stretch;                 /* колонка и кадр — одной высоты */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
}

.segment-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.segment-media {
  display: flex;
  flex-direction: column;
}

.segment-media .band {
  flex: 1;
  min-height: clamp(320px, 42vw, 620px);
}

/* кадр тянется на всю высоту колонки, пропорция держится обрезкой */
.segment-media .band video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* чертёж прижат к низу колонки — образует нижнюю линию вместе с техстрокой */
.segment-art { margin-top: auto; padding-top: clamp(20px, 3vh, 36px); }

/* ══════════════ Разделение хиро и «для кого» ══════════════ */

.hero-tail {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px var(--gut);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}

.hero-tail-scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero-tail-scroll i {
  width: 34px;
  height: 1px;
  background: var(--blue);
  position: relative;
  overflow: hidden;
}

.hero-tail-scroll i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  background: var(--paper);
  animation: tail-run 1.8s ease-in-out infinite;
}

@keyframes tail-run {
  0%   { transform: translateX(-14px); }
  100% { transform: translateX(40px); }
}

/* ══════════════ Вау-детали ══════════════ */

/* заголовки секций открываются шторкой снизу вверх */
.section-head h2 { overflow: hidden; }

.section-head h2 > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-head.is-visible h2 > span { transform: none; }

/* акцентная врезка въезжает и «садится» на место */
.segment-accent {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.segment.is-visible .segment-accent { opacity: 1; transform: none; }

/* кнопка тянется к курсору */
.btn { will-change: transform; }

/* строки прайса подсвечиваются при наведении */
.price-row { transition: padding-left 0.35s ease, color 0.35s ease; }
.price-row:hover { padding-left: 14px; }
.price-row:hover b { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .section-head h2 > span { transform: none; transition: none; }
  .segment-accent { opacity: 1; transform: none; }
  .hero-tail-scroll i::after { animation: none; }
}

@media (max-width: 860px) {
  .segment-media .band { min-height: 0; }
  .segment-media .band video { position: static; height: auto; aspect-ratio: 16 / 9; }
  .segment-art { margin-top: 0; }
}

/* колонка компактнее — кадр не вытягивается в квадрат */

.segment-media .band { min-height: clamp(300px, 30vw, 560px); max-height: 640px; }
.segment-text > p { margin-bottom: 20px; }
.segment-text li { padding: 7px 0 7px 24px; }
.segment-accent { margin-top: clamp(20px, 2.6vh, 30px); }

/* врезка и чертёж — в одну строку: колонка ниже, кадр рядом получает киношную пропорцию */
@media (min-width: 861px) {
  .segment-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    column-gap: clamp(20px, 2vw, 36px);
  }

  .segment-text { grid-column: 1 / -1; }
  .segment-accent { grid-column: 1; align-self: end; margin-top: clamp(22px, 3vh, 34px); }

  

  .segment-media .band { max-height: none; }
}

/* ══════════════ Мобилка: сброс десктопных правил сегмента ══════════════ */
@media (max-width: 860px) {
  .segment-grid { grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .segment-col { display: block; }
  .segment-media { display: block; }
  .segment-media .band { flex: none; min-height: 0; max-height: none; }
  .segment-media .band video { position: static; height: auto; aspect-ratio: 16 / 9; }
  
  .segment-accent { margin-top: 22px; }
  .section--segments { --maxw: 1900px; }
}

/* ══════════════ Сегменты: кадр 16:9, левый край ближе к кромке листа ══════════════ */

/* левое поле секции меньше, чем у остальных: блок «для кого» уходит к краю */
.section--segments {
  --maxw: 2100px;
  padding-left: clamp(16px, 2.6vw, 44px);
}

@media (min-width: 861px) {
  .segment-grid {
    align-items: start;                   /* верхние кромки текста и кадра на одной линии */
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
  }

  .segment-col {
    display: block;                       /* текст, врезка и чертёж — снова столбиком */
  }

  .segment-media { display: block; }

  /* кадр держит кинематографическую пропорцию, высота колонки на него не влияет */
  .segment-media .band {
    flex: none;
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 9;
  }

  .segment-media .band video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .segment-accent { margin-top: clamp(24px, 3.4vh, 40px); }

  
}

/* ══════════════ Правки первого экрана и кадров ══════════════ */

/* 3. кадр на первом экране идёт от самого верха — без зазора под шапкой */
@media (min-width: 861px) {
  .hero-grid { align-items: stretch; padding-top: 0; }

  .hero-inner {
    align-self: center;
    padding-top: clamp(80px, 11vh, 120px);
  }

  .hero-media {
    display: flex;
    flex-direction: column;
    margin-top: 0;
  }

  .hero-media .hero-band {
    flex: 1;
    aspect-ratio: auto;
    min-height: 0;
  }

  .hero-media .hero-band video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* 1. кадры в сегментах крупнее */
@media (min-width: 861px) {
  .segment-grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.5fr); }
}

/* 2. объём: кадр живёт в 3D-сцене и слегка разворачивается при скролле */
.segment-media, .hero-media { perspective: 1600px; }

.band {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.14), 0 2px 6px rgba(17, 17, 17, 0.08);
}

.band:hover { box-shadow: 0 26px 60px rgba(17, 17, 17, 0.22), 0 3px 10px rgba(17, 17, 17, 0.1); }

.band video { transform: translateY(var(--shift, 0)) scale(1.35); }
.band--letterbox video { transform: translateY(var(--shift, 0)) scale(1.35); }
.band--letterbox:hover video,
.hero-media .hero-band:hover video { transform: translateY(var(--shift, 0)) scale(1.44); }

/* 7. чертёжная рамка кадра: засечки по углам и тонкий контур */
.band::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  mix-blend-mode: overlay;
}

.band::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(#fff, #fff) top left / 22px 2px,
    linear-gradient(#fff, #fff) top left / 2px 22px,
    linear-gradient(#fff, #fff) top right / 22px 2px,
    linear-gradient(#fff, #fff) top right / 2px 22px,
    linear-gradient(#fff, #fff) bottom left / 22px 2px,
    linear-gradient(#fff, #fff) bottom left / 2px 22px,
    linear-gradient(#fff, #fff) bottom right / 22px 2px,
    linear-gradient(#fff, #fff) bottom right / 2px 22px;
  background-repeat: no-repeat;
  mix-blend-mode: difference;
}

/* 5. концептуальный разделитель между сегментами */
.segment + .segment { position: relative; padding-top: clamp(48px, 7vh, 96px); }

.seg-rule {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}

.seg-rule::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.seg-rule.is-visible::before { transform: scaleX(1); }

.seg-rule span { flex: none; opacity: 0; transition: opacity 0.6s ease 0.45s; }
.seg-rule.is-visible span { opacity: 1; }

.seg-rule i {
  flex: none;
  width: 9px;
  height: 9px;
  border: 1px solid var(--blue);
  transform: rotate(45deg) scale(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.seg-rule.is-visible i { transform: rotate(45deg) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .band { transition: none; }
  .seg-rule::before { transform: scaleX(1); }
  .seg-rule span { opacity: 1; }
  .seg-rule i { transform: rotate(45deg) scale(1); }
}

@media (max-width: 860px) {
  .hero-media .hero-band,
  .hero-media .hero-band video { aspect-ratio: 16 / 9; }
  .band::before, .band::after { inset: 7px; }
}

/* ══════════════ Откат: кадры без 3D и прежних пропорций ══════════════ */

@media (min-width: 861px) {
  .segment-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr); }
}

.band { transform: none !important; transform-style: flat; }
.segment-media, .hero-media { perspective: none; }

/* ══════════════ Чертежи: крупнее и с объёмом ══════════════ */

.segment-art {
  perspective: 900px;
  transform-style: preserve-3d;
}

@media (min-width: 861px) {
  
}

.segment-art svg {
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* при наведении чертёж «поднимается» со страницы */
.segment-art:hover svg { transform: rotateX(-6deg) rotateY(8deg) scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .segment-art svg { transform: none !important; transition: none; }
}

/* ══════════════ Чертёж-иконка: единые размеры и объём ══════════════ */
/* Все прежние объявления ширины вычищены — размер задаётся только здесь. */

.segment-art {
  width: clamp(230px, 24vw, 420px);
  margin-top: clamp(26px, 3.6vh, 44px);
  padding-top: 0;
  color: var(--blue);
  perspective: 800px;
}

.segment-art svg {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* линии чуть плотнее — крупный чертёж не должен выглядеть бледным */
.segment-art svg [pathLength] { stroke-width: 1.7; }
.segment-art .axis { stroke-width: 0.9; }
.segment-art .hatch { stroke-width: 0.9; }
.segment-art .dimtext { font-size: 10px; }

.segment-art:hover svg { transform: rotateX(-8deg) rotateY(11deg) scale(1.06); }

@media (max-width: 860px) {
  .segment-art { width: min(260px, 68%); margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .segment-art svg { transform: none !important; transition: none; }
}

/* ══════════════ Первый экран: кадр во всю высоту ══════════════ */

.hero { padding-bottom: 0; }

@media (min-width: 861px) {
  .hero-grid { min-height: 100svh; }

  /* техстрока ложится поверх нижней кромки кадра — кадр доходит до низа экрана */
  .hero-media { position: relative; }

  .hero-media .strap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    margin: 0;
    padding: 12px clamp(16px, 2vw, 28px);
    border-top: none;
    color: rgba(255, 255, 255, 0.85);
    background: linear-gradient(transparent, rgba(17, 17, 17, 0.55));
  }
}

/* ══════════════ Заметки на полях: строительные иконки ══════════════ */

.doodles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: var(--blue);
}

.doodle {
  position: absolute;
  width: clamp(46px, 4.4vw, 78px);
  height: auto;
  opacity: 0.85;
  animation: doodle-float 7s ease-in-out infinite;
}

.doodle [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* раскладка по полям листа — вокруг текстовой колонки */

@keyframes doodle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(-2.5deg); }
}

/* на узких экранах поля исчезают — прячем, чтобы не мешали тексту */
@media (max-width: 1100px) {
  .doodles { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .doodle { animation: none; }
}

/* иконки уходят в свободные поля: над текстом и под кнопкой */

/* ══════════════ Иконки Tabler: тонкая линия ══════════════ */
/* Источник: tabler.io/icons, лицензия MIT. Толщина уменьшена под наш лист. */

.doodle {
  stroke-width: 1.1;
  opacity: 0.75;
  width: clamp(54px, 5vw, 88px);
}

.doodle [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }


/* раскладка иконок по полям первого экрана */

/* ══════════════ Иконки первого экрана: вокруг заголовка, разного калибра ══════════════ */

.doodle { width: auto; opacity: .8; }
.doodle svg { display: block; }

/* каска — крупная, слева от заголовка */
/* кран — над заголовком */
/* экскаватор — справа сверху, самый крупный */
/* рулетка — мелкая, слева под текстом */
/* коптер — справа под текстом */

/* точная раскладка: иконки в промежутках вокруг текста, не задевая строк */

/* ══════════════ Восемь иконок по всем сторонам первого экрана ══════════════ */

/* верх */

/* бока */

/* низ */



/* ══════════════ Поле иконок первого экрана ══════════════ */

.doodle {
  position: absolute;
  opacity: .8;
  stroke-width: 1.1;
}

.doodle svg, .doodle { display: block; }
.doodle { opacity: .8; }

/* мелкие бледнее — иначе рябит */
.doodle[data-size="11"], .doodle[data-size="18"] { opacity: .5; stroke-width: 1.7; }
.doodle[data-size="28"], .doodle[data-size="40"] { opacity: .62; stroke-width: 1.4; }

@media (max-width: 1240px) { .doodles { display: none; } }

/* ══════════════════════════════════════════════════════════════
   ВЕРСИЯ 2 · новые блоки под УТП «покажем дом до стройки»
   Стилистика прежняя: лист, миллиметровка, ультрамарин, mono-подписи.
   ══════════════════════════════════════════════════════════════ */

/* ── Хиро: кадр без вшитых полос ── */
.hero-band video { transform: none; }
.hero-media .hero-band:hover video { transform: scale(1.04); }

/* ── Блок «Типы решений» ── */
.solutions-lead {
  max-width: 62ch;
  font-weight: 300;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--ink-dim);
  margin: -8px 0 clamp(36px, 5vh, 56px);
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}

.solution { display: flex; flex-direction: column; gap: 18px; }
.solution--wide { grid-column: 1 / -1; }

.solution-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d0d0c;
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.14), 0 2px 6px rgba(17, 17, 17, 0.08);
}

.solution--wide .solution-media { aspect-ratio: 21 / 9; }

.solution-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}

.solution-text { max-width: 640px; }
.solution-num { display: inline-block; font-size: 11px; letter-spacing: .14em; color: var(--blue); margin-bottom: 8px; }
.solution-text h3 { font-weight: 600; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 8px; }
.solution-text p { color: var(--ink-dim); font-size: 15.5px; line-height: 1.55; }

/* переключатель фасадов */
.facade { cursor: pointer; }
.facade-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .55s ease;
}
.facade-img.is-active { opacity: 1; }

.facade-switch {
  position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 4;
  display: flex; gap: 6px; padding: 6px; background: rgba(253, 253, 252, .92); border: 1.5px solid var(--ink);
}
.facade-switch button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 8px 14px; font: inherit; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  transition: background .2s, color .2s;
}
.facade-switch button:hover { background: rgba(31, 51, 222, .1); }
.facade-switch button.is-active { background: var(--blue); color: #fff; }

/* ── Блок сравнения ── */
.compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.18); }
.compare-card { background: var(--blue-deep); padding: clamp(24px, 2.6vw, 38px); display: flex; flex-direction: column; gap: 12px; }
.compare-card--ours { background: rgba(255,255,255,.08); }
.compare-tag { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.compare-card--ours .compare-tag { color: #fff; }
.compare-card h3 { font-weight: 600; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -.015em; line-height: 1.15; }
.compare-card p { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.55; flex: 1; }
.compare-verdict { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.55); }
.compare-card--ours .compare-verdict { color: #fff; border-top-color: rgba(255,255,255,.5); }

/* ── Экономика ── */
.econ-grid { display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: clamp(20px, 2.4vw, 40px); align-items: start; }
.econ-col { border: 1px solid rgba(255,255,255,.28); padding: clamp(20px, 2.2vw, 30px); }
.econ-label { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 16px; }
.econ-list { list-style: none; }
.econ-list li { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 14.5px; color: rgba(255,255,255,.85); }
.econ-list li b { font-weight: 500; white-space: nowrap; color: rgba(255,255,255,.6); font-size: 12px; }
.econ-total { display: block; margin-top: 16px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.econ-ours { align-self: stretch; }

/* ── Почему мы: три колонки ── */
.why-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.why-grid--three .why h3 { font-size: clamp(19px, 1.5vw, 22px); }

/* ── адаптив ── */
@media (max-width: 960px) {
  .solutions-grid { grid-template-columns: 1fr; }
  .solution--wide .solution-media { aspect-ratio: 16 / 9; }
  .compare-grid { grid-template-columns: 1fr; }
  .econ-grid { grid-template-columns: 1fr; }
  .why-grid--three { grid-template-columns: 1fr; }
}

/* ── Иконки на полях: у каждой своя амплитуда, частота, направление и фаза ── */
.doodle {
  animation: doodle-drift var(--dur, 8s) ease-in-out var(--delay, 0s) infinite alternate;
}

@keyframes doodle-drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(var(--dx, 0), calc(-1 * var(--dy, 10px))) rotate(var(--rot, 0deg)); }
}

@media (prefers-reduced-motion: reduce) { .doodle { animation: none; } }

/* ══════════════════════════════════════════════════════════════
   Хиро · фуллфрейм: видео на весь экран, текст поверх
   ══════════════════════════════════════════════════════════════ */

.hero--full {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--gut) clamp(56px, 9vh, 110px);
  overflow: hidden;
  color: #fff;
}

.hero--full .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero--full .hero-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* затемнение: снизу и слева плотнее — там текст; вверху лёгкое, чтобы шапка читалась */
.hero--full .hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10, 10, 12, .78) 0%, rgba(10, 10, 12, .38) 42%, rgba(10, 10, 12, .08) 72%, rgba(10, 10, 12, .28) 100%),
    linear-gradient(to right, rgba(10, 10, 12, .45) 0%, rgba(10, 10, 12, 0) 60%);
}

.hero--full .hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1040px;
}

.hero--full .eyebrow { color: #fff; opacity: .9; }
.hero--full .tc { color: rgba(255, 255, 255, .6); }

.hero--full h1 {
  color: #fff;
  font-size: clamp(44px, 7.4vw, 108px);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}

.hero--full .hero-sub {
  color: rgba(255, 255, 255, .86);
  max-width: 620px;
  font-size: clamp(16px, 1.7vw, 21px);
}

/* кнопка на тёмном — белая, чтобы не терялась в синем на видео */
.hero--full .btn { background: #fff; color: var(--ink); }
.hero--full .btn:hover { background: #eceaff; }

/* REC — в правом верхнем углу экрана */
.hero--full .rec {
  position: absolute;
  top: calc(var(--pad) + 74px);
  right: var(--gut);
  z-index: 3;
  mix-blend-mode: normal;
  color: #fff;
}

/* уголки видоискателя — белые поверх видео */
.hero--full .vf {
  z-index: 3;
  background:
    linear-gradient(#fff, #fff) top left / 24px 2px,
    linear-gradient(#fff, #fff) top left / 2px 24px,
    linear-gradient(#fff, #fff) top right / 24px 2px,
    linear-gradient(#fff, #fff) top right / 2px 24px,
    linear-gradient(#fff, #fff) bottom left / 24px 2px,
    linear-gradient(#fff, #fff) bottom left / 2px 24px,
    linear-gradient(#fff, #fff) bottom right / 24px 2px,
    linear-gradient(#fff, #fff) bottom right / 2px 24px;
  background-repeat: no-repeat;
  mix-blend-mode: difference;
}

/* техстрока — по нижней кромке экрана */
.strap--hero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  margin: 0;
  padding: 12px var(--gut);
  border-top: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .7);
  background: none;
}

/* шапка на первом экране — светлая, пока не уплотнилась */
body:not(.is-loading) .site-header:not(.is-stuck) .wordmark,
body:not(.is-loading) .site-header:not(.is-stuck) .header-cta { color: #fff; }
body:not(.is-loading) .site-header:not(.is-stuck) .header-cta { border-color: #fff; }
body:not(.is-loading) .site-header:not(.is-stuck) .header-cta:hover { background: #fff; color: var(--ink); }
body:not(.is-loading) .site-header:not(.is-stuck) .wordmark-sub { color: #fff; }

/* хиро в фуллфрейме проявляется без прежней задержки под старую сетку */
body.is-loading .hero--full .hero-inner { opacity: 0; }
.hero--full .hero-inner { transition: opacity .6s ease .25s; }

@media (max-width: 860px) {
  .hero--full { padding-bottom: clamp(64px, 12vh, 96px); }
  .hero--full h1 { font-size: clamp(38px, 11vw, 60px); }
  .hero--full .rec { top: 84px; }
}

/* ══════════════════════════════════════════════════════════════
   v2 · раунд 2: выгоды, кейс, FAQ + перестройка порядка
   ══════════════════════════════════════════════════════════════ */

.solutions-lead--light { color: rgba(255, 255, 255, .75); }

/* ── Выгоды ── */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.benefit { background: var(--paper-lift); padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 10px; }
.benefit-num { font-size: 11px; letter-spacing: .14em; color: var(--blue); }
.benefit h3 { font-weight: 600; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -.015em; line-height: 1.15; }
.benefit p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.55; }
.benefit--accent { background: var(--blue-deep); color: #fff; }
.benefit--accent .benefit-num, .benefit--accent h3 { color: #fff; }
.benefit--accent p { color: rgba(255, 255, 255, .8); }

/* ── Кейс ── */
.case-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); align-items: start; }
.case-media .band { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0d0d0c; }
.case-media .band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-media .strap { border-top: 1px solid var(--hair); margin-top: 10px; padding: 10px 0 0; }
.case-steps { display: grid; gap: 0; }
.case-steps > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.case-steps > div:first-child { border-top: 1px solid var(--hair); }
.case-steps dt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); padding-top: 4px; }
.case-steps dd { color: var(--ink); font-size: 15px; line-height: 1.55; }
.case-note { margin-top: 18px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #9a9a94; }

/* ── FAQ ── */
.faq-list { max-width: 900px; border-top: 1px solid var(--hair); }
.faq { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 20px 0; font-weight: 500; font-size: clamp(16px, 1.3vw, 19px); letter-spacing: -.01em; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 22px; height: 22px; position: relative; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--blue); transform: translate(-50%, -50%); transition: transform .3s ease; }
.faq summary i::before { width: 14px; height: 1.5px; }
.faq summary i::after { width: 1.5px; height: 14px; }
.faq[open] summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq p { color: var(--ink-dim); font-size: 15px; line-height: 1.6; padding: 0 46px 22px 0; max-width: 780px; }

@media (max-width: 960px) {
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-grid { grid-template-columns: 1fr; }
  .case-steps > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 600px) { .benefit-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   v2 · раунд 3: хиро-типографика, панели «для кого» 2.35:1
   ══════════════════════════════════════════════════════════════ */

/* ── Хиро: плакатный заголовок ── */
.hero--full .hero-inner { max-width: 1180px; }

.hero--full .eyebrow {
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: .32em;
  margin-bottom: 22px;
  opacity: 0;
  animation: hero-fade .9s ease .35s forwards;
}
.hero--full .tc { display: none; }   /* таймкод убираем — заголовок теперь сам по себе плакат */

.hero-title {
  font-family: "Unbounded", var(--font-body);
  font-weight: 700;
  font-size: clamp(46px, 8.2vw, 128px);
  line-height: .96;
  letter-spacing: -.035em;
  color: #fff;
  margin-bottom: 30px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .3);
}

/* каждое слово — отдельный выезд снизу со шторкой */
.hero-title .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .08em;   /* чтобы не резало нижние выносные */
  margin-bottom: -.08em;
}
.hero-title .w::after { content: none; }
.hero-title .w > * { display: inline-block; }
.hero-title .w {
  opacity: 0;
  transform: translateY(110%) skewY(4deg);
  animation: hero-word 1s cubic-bezier(.16, 1, .3, 1) forwards;
}
.hero-title .w:nth-child(1) { animation-delay: .55s; }
.hero-title .w:nth-child(2) { animation-delay: .68s; }
.hero-title .w:nth-child(3) { animation-delay: .81s; }
.hero-title .w:nth-child(5) { animation-delay: .98s; }
.hero-title .w:nth-child(6) { animation-delay: 1.12s; }

/* акцентное слово — ультрамариновая плашка, которая «закрашивается» слева направо */
.hero-title .w--accent {
  position: relative;
  padding: 0 .12em;
  margin-left: -.12em;
  font-weight: 700;
  color: #fff;
}
.hero-title .w--accent::before {
  content: "";
  position: absolute;
  inset: .06em 0 .02em;
  background: var(--blue);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  animation: hero-ink .7s cubic-bezier(.7, 0, .2, 1) 1.55s forwards;
}

.hero-sub--anim {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-rise .9s cubic-bezier(.16, 1, .3, 1) 1.75s forwards;
  font-weight: 300;
  font-size: clamp(17px, 1.8vw, 24px);
  max-width: 640px;
}

.hero--full .reveal { opacity: 0; transform: translateY(14px); animation: hero-rise .9s cubic-bezier(.16, 1, .3, 1) 2s forwards; }
.hero--full .reveal.is-visible { opacity: 0; transform: translateY(14px); }  /* старый каскад отключаем — ведёт новая анимация */

@keyframes hero-word { to { opacity: 1; transform: none; } }
@keyframes hero-ink  { to { transform: scaleX(1); } }
@keyframes hero-rise { to { opacity: 1; transform: none; } }
@keyframes hero-fade { to { opacity: .9; } }

/* пока висит заставка — хиро не стартует; стартует после её ухода */
body.is-loading .hero--full .eyebrow,
body.is-loading .hero--full .hero-title .w,
body.is-loading .hero--full .hero-title .w--accent::before,
body.is-loading .hero--full .hero-sub--anim,
body.is-loading .hero--full .reveal { animation-play-state: paused; }

/* ── Панели «для кого» ── */
.section--panels { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.section--panels .sheet-mark { margin-left: var(--gut); margin-right: var(--gut); }

.panel {
  position: relative;
  aspect-ratio: 2.35 / 1;
  min-height: 520px;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: flex-end;
}

.panel-bg { position: absolute; inset: 0; z-index: 0; }
.panel-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.panel-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10,10,12,.82) 0%, rgba(10,10,12,.45) 40%, rgba(10,10,12,.06) 75%),
    linear-gradient(to right, rgba(10,10,12,.5) 0%, rgba(10,10,12,0) 55%);
}

.panel-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  padding: 0 var(--gut) clamp(64px, 7vh, 96px);
}

.panel-label { display: inline-block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 16px; }
.panel-text h3 { font-weight: 600; font-size: clamp(30px, 3.6vw, 56px); letter-spacing: -.025em; line-height: 1.02; margin-bottom: 14px; }
.panel-lead { font-weight: 300; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.5; color: rgba(255,255,255,.86); max-width: 38ch; margin-bottom: 20px; }
.panel-list { list-style: none; display: grid; gap: 6px; }
.panel-list li { font-size: 14.5px; color: rgba(255,255,255,.8); padding-left: 20px; position: relative; }
.panel-list li::before { content: ""; position: absolute; left: 0; top: .75em; width: 10px; height: 1.5px; background: #fff; opacity: .7; }

.panel-accent {
  border: 1.5px solid rgba(255,255,255,.55);
  background: rgba(10,10,12,.35);
  backdrop-filter: blur(6px);
  padding: clamp(18px, 2vw, 28px);
  max-width: 440px;
  justify-self: end;
}
.panel-accent-top { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 10px; }
.panel-accent-line { font-weight: 300; font-size: clamp(20px, 2vw, 30px); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 10px; }
.panel-accent-line b { font-weight: 600; }
.panel-accent-sub { display: block; font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.55); }

.strap--panel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  margin: 0; padding: 12px var(--gut);
  border-top: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.7); background: none;
}

/* разделитель между панелями — плашка на листе */
.panel-rule {
  display: flex; align-items: center; gap: 18px;
  padding: 22px var(--gut);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue);
}
.panel-rule i { flex: 1; height: 1px; background: var(--blue); opacity: .5; }
.panel-rule span { flex: none; }

@media (max-width: 960px) {
  .panel { aspect-ratio: auto; min-height: 100svh; }
  .panel-inner { grid-template-columns: 1fr; gap: 20px; padding-bottom: 72px; }
  .panel-accent { justify-self: stretch; max-width: none; }
  .hero-title { font-size: clamp(38px, 11vw, 64px); }
}

/* ══════════════════════════════════════════════════════════════
   v2 · раунд 4: читаемость маркировок и панелей, анимированный разделитель
   ══════════════════════════════════════════════════════════════ */

/* маркировка листа — с 11px до читаемых 13–15 */
.sheet-mark {
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: .18em;
  padding-bottom: 16px;
}
.sheet-mark span:first-child { font-weight: 500; }

/* ── панели «для кого»: крупнее ── */
.panel-label { font-size: 13px; letter-spacing: .22em; margin-bottom: 20px; }
.panel-text h3 { font-size: clamp(36px, 4.4vw, 68px); margin-bottom: 18px; }
.panel-lead { font-size: clamp(17px, 1.65vw, 23px); max-width: 40ch; margin-bottom: 24px; }
.panel-list { gap: 9px; }
.panel-list li { font-size: clamp(15px, 1.25vw, 18px); padding-left: 24px; }
.panel-list li::before { width: 12px; top: .8em; }
.panel-accent { max-width: 500px; padding: clamp(22px, 2.4vw, 34px); }
.panel-accent-top { font-size: 12px; margin-bottom: 12px; }
.panel-accent-line { font-size: clamp(24px, 2.4vw, 36px); margin-bottom: 12px; }
.panel-accent-sub { font-size: 12.5px; }

/* анимация панели: элементы выезжают каскадом, когда панель в экране */
.panel .panel-label, .panel .panel-text h3, .panel .panel-lead, .panel .panel-list li, .panel .panel-accent {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
.panel.is-visible .panel-label     { opacity: 1; transform: none; transition-delay: .05s; }
.panel.is-visible .panel-text h3   { opacity: 1; transform: none; transition-delay: .15s; }
.panel.is-visible .panel-lead      { opacity: 1; transform: none; transition-delay: .28s; }
.panel.is-visible .panel-list li:nth-child(1) { opacity: 1; transform: none; transition-delay: .40s; }
.panel.is-visible .panel-list li:nth-child(2) { opacity: 1; transform: none; transition-delay: .48s; }
.panel.is-visible .panel-list li:nth-child(3) { opacity: 1; transform: none; transition-delay: .56s; }
.panel.is-visible .panel-list li:nth-child(4) { opacity: 1; transform: none; transition-delay: .64s; }
.panel.is-visible .panel-accent    { opacity: 1; transform: none; transition-delay: .55s; }
/* .reveal на панели больше не сдвигает её саму — только внутренности */
.panel.reveal { opacity: 1; transform: none; }

/* ── разделитель между панелями: линия прочерчивается, метка выезжает ── */
.panel-rule {
  display: flex; align-items: center; gap: 0;
  padding: clamp(26px, 3.4vh, 44px) var(--gut);
  background: var(--paper);
}
.panel-rule.reveal { opacity: 1; transform: none; }
.panel-rule-line {
  flex: 1; height: 1.5px; background: var(--blue);
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.panel-rule-line:first-child { transform-origin: right; }
.panel-rule-line:last-child  { transform-origin: left; }
.panel-rule.is-visible .panel-rule-line { transform: scaleX(1); }

.panel-rule-tag {
  flex: none;
  display: inline-flex; align-items: center; gap: 14px;
  margin: 0 clamp(14px, 1.6vw, 26px);
  padding: 10px 18px;
  border: 1.5px solid var(--blue);
  font-size: clamp(12px, .95vw, 14px); letter-spacing: .18em; text-transform: uppercase; color: var(--blue);
  background: var(--paper);
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .6s ease .35s, transform .6s cubic-bezier(.16,1,.3,1) .35s;
}
.panel-rule.is-visible .panel-rule-tag { opacity: 1; transform: none; }
.panel-rule-tag b {
  font-weight: 500; font-size: 10px; letter-spacing: .2em;
  padding: 3px 7px; background: var(--blue); color: #fff;
}
/* мигающая стрелка-каретка внутри метки */
.panel-rule-tag::after {
  content: "↓";
  display: inline-block;
  animation: rule-bob 1.4s ease-in-out infinite;
}
@keyframes rule-bob { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
  .panel .panel-label, .panel .panel-text h3, .panel .panel-lead, .panel .panel-list li, .panel .panel-accent,
  .panel-rule-line, .panel-rule-tag { opacity: 1; transform: none; transition: none; }
  .panel-rule-tag::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   v2 · раунд 5: хиро + выгоды — одна sticky-сцена (концепт «Проявка»)
   ══════════════════════════════════════════════════════════════ */

.heroseq { position: relative; height: 260vh; }

.heroseq-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 0 var(--gut) clamp(56px, 9vh, 110px);
  color: #fff;
}

/* фон и обвязка — как было в hero--full */
.heroseq-stage .hero-bg { position: absolute; inset: 0; z-index: 0; }
.heroseq-stage .hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.heroseq-stage .hero-veil { position: absolute; inset: 0; background:
  linear-gradient(to top, rgba(10,10,12,.78) 0%, rgba(10,10,12,.38) 42%, rgba(10,10,12,.08) 72%, rgba(10,10,12,.28) 100%),
  linear-gradient(to right, rgba(10,10,12,.45) 0%, rgba(10,10,12,0) 60%); }
.heroseq-stage .rec { position: absolute; top: calc(var(--pad) + 74px); right: var(--gut); z-index: 3; mix-blend-mode: normal; color: #fff; }
.heroseq-stage .vf { z-index: 3; background:
  linear-gradient(#fff,#fff) top left/24px 2px, linear-gradient(#fff,#fff) top left/2px 24px,
  linear-gradient(#fff,#fff) top right/24px 2px, linear-gradient(#fff,#fff) top right/2px 24px,
  linear-gradient(#fff,#fff) bottom left/24px 2px, linear-gradient(#fff,#fff) bottom left/2px 24px,
  linear-gradient(#fff,#fff) bottom right/24px 2px, linear-gradient(#fff,#fff) bottom right/2px 24px;
  background-repeat: no-repeat; mix-blend-mode: difference; }
.heroseq-stage .strap--hero { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; padding: 12px var(--gut); border-top: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.7); background: none; }

/* слои текста: хиро уезжает вверх, выгоды приходят снизу — управляет script по прогрессу */
.heroseq-layer { position: relative; z-index: 2; width: 100%; will-change: transform, opacity; }
.heroseq-layer--hero { max-width: 1180px; }
.heroseq-layer--benefits {
  position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(56px, 9vh, 110px);
  opacity: 0; pointer-events: none;
}

/* выгоды: крупнее, чем в концепте */
.bene-head .eyebrow { color: #fff; opacity: .85; font-size: clamp(13px, 1vw, 15px); letter-spacing: .28em; margin-bottom: 18px; }
.bene-head h2 { color: #fff; font-weight: 500; font-size: clamp(34px, 4.6vw, 72px); letter-spacing: -.03em; line-height: 1; margin-bottom: 16px; text-shadow: 0 2px 24px rgba(0,0,0,.3); }
.bene-head h2 b { font-weight: 600; }
.bene-lead { color: rgba(255,255,255,.88); font-weight: 300; font-size: clamp(17px, 1.7vw, 23px); line-height: 1.45; max-width: 56ch; margin-bottom: clamp(24px, 3.4vh, 44px); }

.bene-tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(14px, 1.8vw, 28px); }
.bene-tiles .tile { border-top: 2px solid rgba(255,255,255,.6); padding-top: 16px; }
.bene-tiles .k { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 10px; }
.bene-tiles h3 { font-weight: 600; font-size: clamp(18px, 1.6vw, 25px); letter-spacing: -.015em; line-height: 1.12; margin-bottom: 8px; }
.bene-tiles p { font-size: clamp(14px, 1.15vw, 16.5px); line-height: 1.45; color: rgba(255,255,255,.82); }
.bene-tiles .tile--you { border-top-color: var(--blue); }
.bene-tiles .tile--you .k { color: #8fa0ff; }

/* каскад тезисов — тоже от прогресса (см. script), базовое состояние */
.bene-tiles .tile { opacity: 0; transform: translateY(24px); }
.bene-head { opacity: 0; transform: translateY(30px); }

@media (max-width: 860px) {
  .heroseq { height: 320vh; }
  .bene-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
  .bene-head h2 { font-size: clamp(30px, 8.4vw, 44px); }
}

/* портирование хиро-стилей на новую сцену (класс сменился с hero--full на heroseq) */
.heroseq-stage .eyebrow { color: #fff; opacity: .9; font-size: clamp(12px, 1vw, 14px); letter-spacing: .32em; margin-bottom: 22px; }
.heroseq-layer--hero .eyebrow { opacity: 0; animation: hero-fade .9s ease .35s forwards; }
.heroseq-stage .hero-sub { color: rgba(255,255,255,.86); max-width: 640px; }
.heroseq-stage .btn { background: #fff; color: var(--ink); }
.heroseq-stage .btn:hover { background: #eceaff; }
.heroseq-layer--hero .reveal { opacity: 0; transform: translateY(14px); animation: hero-rise .9s cubic-bezier(.16,1,.3,1) 2s forwards; }
.heroseq-layer--hero .reveal.is-visible { opacity: 0; transform: translateY(14px); }

/* пока заставка — стартовые анимации хиро на паузе */
body.is-loading .heroseq-layer--hero .eyebrow,
body.is-loading .heroseq-layer--hero .hero-title .w,
body.is-loading .heroseq-layer--hero .w--accent::before,
body.is-loading .heroseq-layer--hero .hero-sub--anim,
body.is-loading .heroseq-layer--hero .reveal { animation-play-state: paused; }

/* шапка светлая, пока сцена в кадре — граница по высоте сцены, не по 24px */

/* ══════════════════════════════════════════════════════════════
   v2 · раунд 6: сцена в один экран, переключение одним скроллом
   ══════════════════════════════════════════════════════════════ */

.heroseq { height: auto; }
.heroseq-stage { position: relative; }

/* слои: переключение классом .show-benefits, всё на транзишенах */
.heroseq-layer--hero {
  transition: transform .95s cubic-bezier(.16,1,.3,1), opacity .7s ease;
}
.heroseq.show-benefits .heroseq-layer--hero {
  transform: translateY(-110px);
  opacity: 0;
  pointer-events: none;
}

.heroseq-layer--benefits {
  opacity: 0;
  transform: translateY(70px);
  transition: transform .95s cubic-bezier(.16,1,.3,1) .15s, opacity .7s ease .15s;
}
.heroseq.show-benefits .heroseq-layer--benefits {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* заголовок выгод — как хиро, но слова без стартовой анимации: ведёт слой */
.bene-title { font-size: clamp(38px, 5.6vw, 92px); margin-bottom: 22px; }
.bene-title .w { opacity: 1; transform: none; animation: none; }
.bene-title .w--accent2::before { animation: none; transform: scaleX(0); transition: transform .65s cubic-bezier(.7,0,.2,1) .75s; }
.heroseq.show-benefits .bene-title .w--accent2::before { transform: scaleX(1); }

/* голова и тайлы — каскад на транзишенах от класса */
.bene-head { opacity: 1; transform: none; }
.bene-tiles .tile { transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.heroseq.show-benefits .bene-tiles .tile { opacity: 1; transform: none; }
.heroseq.show-benefits .bene-tiles .tile:nth-child(1) { transition-delay: .45s; }
.heroseq.show-benefits .bene-tiles .tile:nth-child(2) { transition-delay: .58s; }
.heroseq.show-benefits .bene-tiles .tile:nth-child(3) { transition-delay: .71s; }
.heroseq.show-benefits .bene-tiles .tile:nth-child(4) { transition-delay: .84s; }

@media (max-width: 860px) { .heroseq { height: auto; } }

@media (prefers-reduced-motion: reduce) {
  .heroseq-layer--hero, .heroseq-layer--benefits, .bene-tiles .tile, .bene-title .w--accent2::before { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   v2 · раунд 7: тайлы «цифры-призраки», ремарка «а мы её показываем»
   ══════════════════════════════════════════════════════════════ */

/* тайлы: контурные цифры позади текста вместо линеек */
.bene-tiles .tile { border-top: none; padding-top: clamp(48px, 5.4vh, 68px); position: relative; }
.bene-tiles .g {
  position: absolute; left: -6px; top: -12px; z-index: 0;
  font-family: "Unbounded", sans-serif; font-weight: 700;
  font-size: clamp(64px, 6vw, 104px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.35);
}
.bene-tiles h3, .bene-tiles p { position: relative; z-index: 1; }
.bene-tiles .tile--you .g { -webkit-text-stroke: 1.5px var(--blue); color: rgba(31,51,222,.3); }
.bene-tiles .tile--you { border-top: none; }

/* «что это даёт вам» — крупнее остальных */
.bene-tiles .tile--you h3 { font-size: clamp(22px, 2vw, 32px); }
.bene-tiles .tile--you p { font-size: clamp(15.5px, 1.3vw, 19px); color: #fff; }

/* ремарка-плашка после заголовка */
.bene-note { margin: -6px 0 clamp(20px, 2.6vh, 32px); }
.bene-note-tag {
  display: inline-block;
  padding: 9px 16px;
  border: 1.5px solid #fff;
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  transform: rotate(-1.6deg);
  opacity: 0;
  transition: opacity .5s ease 1.35s, translate .5s cubic-bezier(.16,1,.3,1) 1.35s;
  translate: 0 12px;
}
.heroseq.show-benefits .bene-note-tag { opacity: 1; translate: 0 0; }

/* лид после ремарки — короче по отступу */
.bene-lead { margin-bottom: clamp(20px, 2.8vh, 36px); }

/* фикс: базовое width:100% перебивало right — слой вылезал за экран */
.heroseq-layer--benefits { width: auto; }

@media (max-width: 860px) {
  .bene-tiles .g { font-size: 56px; -webkit-text-stroke-width: 1.2px; }
  .bene-tiles .tile { padding-top: 42px; }
}

/* ══════════════════════════════════════════════════════════════
   v2 · раунд 8: «что это даёт вам» — обособленная ультрамариновая плита
   ══════════════════════════════════════════════════════════════ */

.bene-tiles { grid-template-columns: repeat(3, minmax(0,1fr)) minmax(0,1.18fr); }
.bene-tiles .tile--you {
  background: var(--blue);
  margin-left: clamp(10px, 1.6vw, 26px);
  padding: clamp(18px, 2.2vh, 26px) clamp(18px, 1.5vw, 26px) clamp(18px, 2.4vh, 28px);
  box-shadow: 0 18px 48px rgba(31, 51, 222, .35);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.bene-tiles .tile--you .k {
  color: rgba(255,255,255,.75); margin-bottom: auto;
  padding-bottom: clamp(14px, 2vh, 24px);
  letter-spacing: .3em;
}
.bene-tiles .tile--you h3 { margin-bottom: 10px; }
.bene-tiles .tile--you p { color: rgba(255,255,255,.94); }

@media (max-width: 860px) {
  .bene-tiles .tile--you { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   v2 · раунд 9: крупный логотип на хиро, выгоды крупнее, плашка справа,
   ролик 01 в 16:9, бегунки между панелями
   ══════════════════════════════════════════════════════════════ */

/* 1. логотип: на первом экране крупный, после ухода со сцены — нынешний размер */
.site-header:not(.is-stuck) .wordmark-name { font-size: clamp(34px, 3.6vw, 52px); }
.site-header:not(.is-stuck) .wordmark-sub { font-size: max(8px, clamp(10px, 1.05vw, 14px)); margin-top: 9px; }
.site-header.is-stuck .wordmark-name { font-size: clamp(23px, 2.4vw, 34px); }
.site-header.is-stuck .wordmark-sub { font-size: max(7px, clamp(8px, 0.8vw, 11px)); margin-top: 7px; }

/* 2. второй слой крупнее целиком */
.bene-head h2.bene-title { font-size: clamp(42px, 4.8vw, 76px); margin-bottom: clamp(18px, 2.4vh, 28px); }
.bene-lead { font-size: clamp(18px, 1.95vw, 27px); max-width: 52ch; }
.bene-tiles h3 { font-size: clamp(20px, 1.85vw, 29px); }
.bene-tiles p { font-size: clamp(15px, 1.3vw, 19px); }
.bene-tiles .tile--you h3 { font-size: clamp(24px, 2.3vw, 36px); }
.bene-tiles .tile--you p { font-size: clamp(16.5px, 1.45vw, 21px); }

/* 3. плашка «а мы её показываем» — справа от «жизнь в нём», крупнее */
.bene-title .bene-note-tag {
  display: block;
  float: right;                       /* к правому краю строки «он покупает жизнь в нём» */
  margin-left: clamp(12px, 1.1vw, 20px);
  margin-top: clamp(8px, .8vw, 14px);
  padding: clamp(10px, 1.1vh, 13px) clamp(16px, 1.2vw, 22px);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: .22em;
  line-height: 1;
  text-shadow: none;
  white-space: nowrap;
  border-width: 2px;
}

/* 4. ролик 01 «любая конфигурация» — 16:9 */
.solution--wide.solution--169 .solution-media { aspect-ratio: 16 / 9; }

/* 5. бегунки между панелями «для кого» — как синяя строка у CTA */
.ticker--seg { position: relative; z-index: 2; }
.ticker--seg .ticker-track { animation-duration: 26s; }
.ticker--seg .ticker-track span { font-weight: 500; }

@media (max-width: 1100px) {
  .bene-title .bene-note-tag { float: none; display: inline-block; margin-left: 0; margin-top: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   v2 · раунд 10: массивный логотип на хиро (сжимается на первом скролле),
   типографика всех блоков крупнее для десктопа
   ══════════════════════════════════════════════════════════════ */

/* 1. логотип: крупный только на первом слое хиро; класс .is-compact ставит
   script при переходе к «человек покупает не дом» и при любом скролле */
.site-header .wordmark-name { transition: font-size .55s cubic-bezier(.16,1,.3,1); }
.site-header .wordmark-sub  { transition: font-size .55s cubic-bezier(.16,1,.3,1), margin-top .55s cubic-bezier(.16,1,.3,1); }
.site-header:not(.is-compact) .wordmark-name { font-size: clamp(34px, 2.8vw, 54px); letter-spacing: -.025em; }
.site-header:not(.is-compact) .wordmark-sub  { font-size: max(8px, clamp(10px, .95vw, 13px)); margin-top: 9px; letter-spacing: .4em; padding-left: .4em; }
.site-header.is-compact .wordmark-name { font-size: clamp(23px, 2.4vw, 34px); letter-spacing: -.02em; }
.site-header.is-compact .wordmark-sub  { font-size: max(7px, clamp(8px, 0.8vw, 11px)); margin-top: 7px; letter-spacing: .36em; padding-left: .36em; }
.site-header.is-stuck .wordmark-name { font-size: clamp(23px, 2.4vw, 34px); }
.site-header.is-stuck .wordmark-sub  { font-size: max(7px, clamp(8px, 0.8vw, 11px)); margin-top: 7px; }
/* шапка на крупном логотипе не должна давить на контент — выравнивание по верху */
.site-header { align-items: flex-start; }
.site-header .header-cta { margin-top: 6px; }
.site-header.is-stuck .header-cta { margin-top: 2px; }

/* 2. тексты блоков — крупнее (десктоп читается с расстояния) */
/* решения */
.solutions-lead { font-size: clamp(19px, 1.9vw, 26px); max-width: 58ch; }
.solution-num { font-size: 14px; letter-spacing: .18em; margin-bottom: 12px; }
.solution-text { max-width: 760px; }
.solution-text h3 { font-size: clamp(26px, 2.5vw, 38px); margin-bottom: 12px; }
.solution-text p { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.5; }
.facade-switch button { font-size: 13px; padding: 10px 16px; }
/* сравнение */
.compare-tag { font-size: 13px; }
.compare-card h3 { font-size: clamp(24px, 2.1vw, 32px); }
.compare-card p { font-size: clamp(16.5px, 1.2vw, 19px); }
.compare-verdict { font-size: 13px; }
/* экономика */
.econ-label { font-size: 13px; }
.econ-list li { font-size: clamp(16px, 1.15vw, 18px); padding: 12px 0; }
.econ-list li b { font-size: 14px; }
.econ-total { font-size: 13px; }
/* выгоды-сетка и кейс */
.benefit-num { font-size: 13px; }
.benefit h3 { font-size: clamp(22px, 1.8vw, 28px); }
.benefit p { font-size: clamp(16px, 1.15vw, 18px); }
.case-steps > div { grid-template-columns: 140px minmax(0, 1fr); padding: 18px 0; }
.case-steps dt { font-size: 13px; }
.case-steps dd { font-size: clamp(17px, 1.2vw, 19px); }
.case-note { font-size: 13px; }
/* faq */
.faq-list { max-width: 1040px; }
.faq summary { font-size: clamp(20px, 1.6vw, 25px); padding: 24px 0; }
.faq p { font-size: clamp(17px, 1.2vw, 19px); max-width: 860px; }
/* почему мы */
.why h3, .why-grid--three .why h3 { font-size: clamp(23px, 1.9vw, 29px); }
.why p, .why-figure-text { font-size: clamp(17px, 1.2vw, 19px); }
.why-figure-top { font-size: 13px; }
.why-figure-unit { font-size: 13px; }
/* шкала «от простого к сложному» */
.step-num { font-size: 14px; }
.step h3 { font-size: clamp(24px, 2.4vw, 30px); }
.scale-steps .step:nth-child(2) h3 { font-size: clamp(25px, 2.5vw, 32px); }
.scale-steps .step:nth-child(3) h3 { font-size: clamp(27px, 2.9vw, 36px); }
.step-lead, .step li { font-size: clamp(16.5px, 1.15vw, 18.5px); }
/* процесс, прайс, подвал, подписи */
.process li { font-size: clamp(17px, 1.25vw, 20px); }
.process li::before { font-size: 14px; }
.price-note { font-size: 16px; }
.footer-note { font-size: 15px; }
.eyebrow { font-size: 14px; }
.work figcaption { font-size: 14px; }
.sheet-mark { font-size: clamp(14px, 1.05vw, 16px); }
/* панели «для кого» */
.panel-list li { font-size: clamp(16.5px, 1.35vw, 20px); }
.panel-accent-top { font-size: 13px; }
.panel-accent-sub { font-size: 14px; }
.panel-label { font-size: 14px; }

@media (max-width: 960px) {
  .site-header:not(.is-compact) .wordmark-name { font-size: clamp(30px, 6vw, 44px); }
  .site-header:not(.is-compact) .wordmark-sub { font-size: 10px; margin-top: 8px; }
  .case-steps > div { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   v2 · раунд 11: наполнение — слоган в лиде выгод, порядок «дешевле → дороже»
   ══════════════════════════════════════════════════════════════ */

/* слоган в лиде второго слоя — светлее и плотнее остального текста */
.bene-lead b { display: block; margin-top: .5em; font-weight: 500; color: #fff; }

/* «слева направо — от дешёвого к дорогому» над карточками способов */
.compare-order {
  display: flex; align-items: center; gap: 16px;
  margin: -8px 0 clamp(20px, 2.4vh, 30px);
  font-size: clamp(13px, 1vw, 15px); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.compare-order span { flex: none; }
.compare-order::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.45), rgba(255,255,255,.06));
}
.compare-order::before {
  content: "₽ → ₽₽₽"; flex: none; order: 2;
  font-family: var(--font-mono); letter-spacing: .1em; color: #fff;
}

/* пояснение под карточками способов */
.compare-note {
  max-width: 76ch;
  margin-top: clamp(22px, 2.6vh, 34px);
  padding-left: 18px;
  border-left: 2px solid rgba(255,255,255,.45);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,.78);
}

/* ══════════════════════════════════════════════════════════════
   v2 · раунд 12: шрифтовая пара блоков — вариант 01 (Unbounded + Onest).
   Плакатная гарнитура спускается из хиро во все заголовки блоков,
   текст и подписи остаются на Onest и JetBrains Mono.
   ══════════════════════════════════════════════════════════════ */

.section-head h2,
.solution-text h3,
.compare-card h3,
.benefit h3,
.panel-text h3,
.why h3,
.why-grid--three .why h3,
.faq summary,
.case-steps dd b,
.cta-box h2 {
  font-family: "Unbounded", var(--font-body);
  font-weight: 700;
  letter-spacing: -.035em;
}

/* Unbounded шире Onest примерно на четверть — кегли ужимаем, интерлиньяж плотнее */
.section-head h2 { font-size: clamp(32px, 5.2vw, 74px); line-height: .98; }
.section-head h2 b { font-weight: 700; }
.solution-text h3 { font-size: clamp(22px, 2.1vw, 31px); line-height: 1.08; }
.compare-card h3 { font-size: clamp(20px, 1.75vw, 26px); line-height: 1.12; }
.benefit h3 { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.14; }
.panel-text h3 { font-size: clamp(30px, 3.6vw, 56px); line-height: 1; letter-spacing: -.04em; }
.why h3, .why-grid--three .why h3 { font-size: clamp(19px, 1.55vw, 24px); line-height: 1.14; }
.faq summary { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.25; }
.cta-box h2 { font-size: clamp(30px, 4.6vw, 66px); line-height: 1; }
/* шкала «от простого к сложному» — заголовки ступеней тоже плакатные */
.step h3 { font-family: "Unbounded", var(--font-body); font-weight: 700; letter-spacing: -.035em; font-size: clamp(20px, 2vw, 25px); line-height: 1.1; }
.scale-steps .step:nth-child(2) h3 { font-size: clamp(21px, 2.1vw, 27px); }
.scale-steps .step:nth-child(3) h3 { font-size: clamp(22px, 2.4vw, 30px); }
/* крупная цифра рынка — в той же гарнитуре */
.why-figure-num { font-family: "Unbounded", var(--font-body); font-weight: 700; letter-spacing: -.05em; font-size: clamp(34px, 3.8vw, 56px); }

@media (max-width: 860px) {
  .section-head h2 { font-size: clamp(28px, 8vw, 44px); }
  .panel-text h3 { font-size: clamp(26px, 8vw, 40px); }
}

/* ══════════════════════════════════════════════════════════════
   v2 · раунд 13: текстовая гарнитура блоков — вариант 02, Golos Text.
   Заголовки остаются на Unbounded, подписи — на JetBrains Mono.
   ══════════════════════════════════════════════════════════════ */

/* у Golos Text нет светлого начертания: там, где стояло 300, ставим 400,
   иначе браузер синтезирует вес и текст плывёт */
.hero-sub, .scale-lead, .cta-title, .solutions-lead, .panel-lead,
.panel-accent-line, .bene-lead, .hero-tail-note { font-weight: 400; }

/* Golos плотнее Onest — строка стала короче, поэтому лиды чуть шире по мере
   и с прежним интерлиньяжем читаются собраннее */
.solutions-lead { max-width: 60ch; }
.bene-lead { max-width: 54ch; }

/* ══════════════════════════════════════════════════════════════
   v2 · раунд 14: цена способа — шкала рублей в карточке
   вместо линейки «от дешёвого к дорогому»
   ══════════════════════════════════════════════════════════════ */

.compare-order { display: none; }   /* линейка убрана */

.compare-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.compare-top .compare-tag { flex: 1; }

.price { flex: none; font-size: clamp(15px, 1.25vw, 19px); letter-spacing: .04em; line-height: 1; }
.price b { font-weight: 500; color: #fff; }
.price i { font-style: normal; color: rgba(255, 255, 255, .22); }
.compare-card--ours .price b { color: #fff; }

/* ══════════════════════════════════════════════════════════════
   v2 · раунд 15: в решениях текст стоит над роликом, лид блока убран
   ══════════════════════════════════════════════════════════════ */

/* заголовок секции без лида — отступ до сетки берёт на себя сама секция */
.section--solutions .section-head { margin-bottom: clamp(28px, 4.5vh, 52px); }

/* подпись сверху: номер и заголовок ближе к ролику, чем к предыдущей карточке */
.solution { gap: clamp(14px, 1.4vh, 20px); }
.solution-text { max-width: 900px; }
.solution-num { margin-bottom: 8px; }
.solution-text h3 { margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════════
   v2, фикс: шторка заголовков секций резала нижние выносные («у», «р», «д»)
   — даём строке запас снизу и компенсируем его отрицательным полем
   ══════════════════════════════════════════════════════════════ */

.section-head h2 {
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

/* ══════════════════════════════════════════════════════════════
   v2, раунд 16: в экономике осталась одна колонка классики — сетка на две части
   ══════════════════════════════════════════════════════════════ */

.econ-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.econ-list li { align-items: baseline; }
.econ-list li b { font-size: 15px; color: rgba(255, 255, 255, .82); }
.econ-total { font-size: clamp(13px, 1.05vw, 15px); color: #fff; letter-spacing: .1em; }

@media (max-width: 960px) { .econ-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   v2: плашка кейса — в левый верхний угол кадра
   ══════════════════════════════════════════════════════════════ */

.case-media .plate {
  top: clamp(16px, 2.4vw, 28px);
  bottom: auto;
}

/* ══════════════════════════════════════════════════════════════
   v2, фикс: кадры больше не кропаются. Масштаб 1.35 остался от демо-ролика
   с вшитыми чёрными полосами — у чистых 16:9 он срезал края кадра.
   ══════════════════════════════════════════════════════════════ */

.band video { transform: translateY(var(--shift, 0)) scale(1); }
.band:hover video { transform: translateY(var(--shift, 0)) scale(1.03); }

/* ══════════════════════════════════════════════════════════════
   v2, раунд 17: кейс — разбор как чертёжный стептрек;
   выравнивание парных карточек в решениях
   ══════════════════════════════════════════════════════════════ */

/* ── кейс: вертикальная линия с шагами ── */
.case-steps {
  counter-reset: cstep;
  position: relative;
  gap: 0;
  padding-left: 0;
}
.case-steps::before {
  content: "";
  position: absolute;
  left: 7px; top: 14px; bottom: 14px;
  width: 1.5px;
  background: var(--blue-line);
}
.case-steps > div {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: clamp(16px, 2vh, 22px) 0 clamp(16px, 2vh, 22px) 40px;
  border: none;
}
.case-steps > div:first-child { border-top: none; }

/* точка-узел на линии */
.case-steps > div::before {
  content: "";
  position: absolute;
  left: 0; top: calc(clamp(16px, 2vh, 22px) + 4px);
  width: 15px; height: 15px;
  border: 1.5px solid var(--blue);
  background: var(--paper);
  transform: rotate(45deg);
}
/* номер шага справа от линии, приглушённо */
.case-steps > div::after {
  content: counter(cstep, decimal-leading-zero);
  counter-increment: cstep;
  position: absolute;
  right: 0; top: clamp(16px, 2vh, 22px);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  color: rgba(17, 17, 17, .28);
}
.case-steps dt {
  font-size: 13px;
  letter-spacing: .2em;
  padding-top: 0;
  color: var(--blue);
}
.case-steps dd { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.5; max-width: 62ch; }

/* последний шаг — результат — выделен плитой */
.case-steps > div:last-child {
  background: var(--paper-lift);
  border-left: 2px solid var(--blue);
  padding-right: clamp(16px, 1.6vw, 24px);
  margin-top: 10px;
}
.case-steps > div:last-child::before { background: var(--blue); }
.case-steps > div:last-child dd { font-weight: 500; color: var(--ink); }

/* ── решения: у парных карточек ролики встают на одну линию ── */
@supports (grid-template-rows: subgrid) {
  .solutions-grid { grid-auto-rows: min-content; }
  .solution {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: clamp(14px, 1.4vh, 20px);
  }
}

/* ══════════════════════════════════════════════════════════════
   v2 · раунд 17: разбор кейса — чертёжный стептрек
   ══════════════════════════════════════════════════════════════ */

.case-steps {
  counter-reset: cstep;
  position: relative;
  padding-left: clamp(26px, 2.4vw, 40px);
}

/* вертикальная линия чертежа, вдоль неё нанизаны шаги */
.case-steps::before {
  content: "";
  position: absolute;
  left: 5px; top: 10px; bottom: 10px;
  width: 1.5px;
  background: linear-gradient(180deg, var(--blue) 0%, rgba(31,51,222,.25) 100%);
}

.case-steps > div {
  position: relative;
  display: block;
  padding: clamp(14px, 1.8vh, 20px) 0;
  border: none;
  counter-increment: cstep;
}
.case-steps > div:first-child { border-top: none; padding-top: 0; }
.case-steps > div + div { border-top: 1px solid var(--hair); }

/* узел на линии — ромб в чертёжной манере */
.case-steps > div::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(26px, 2.4vw, 40px));
  top: clamp(20px, 2.4vh, 26px);
  width: 11px; height: 11px;
  margin-left: 0.5px;
  background: var(--paper);
  border: 1.5px solid var(--blue);
  transform: rotate(45deg);
}
.case-steps > div:first-child::before { top: 7px; }

/* метка шага: крупнее, с номером */
.case-steps dt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 0;
  margin-bottom: 8px;
}
.case-steps dt::before {
  content: counter(cstep, decimal-leading-zero);
  font-size: .82em;
  letter-spacing: .1em;
  color: rgba(31, 51, 222, .45);
}

.case-steps dd {
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 62ch;
}

/* последний шаг — результат: плита, а не просто абзац */
.case-steps > div:last-child {
  margin-top: 6px;
  padding: clamp(18px, 2.2vh, 24px) clamp(18px, 1.6vw, 26px);
  background: var(--blue);
  border-top: none;
}
.case-steps > div:last-child::before {
  background: var(--blue);
  border-color: var(--blue);
}
.case-steps > div:last-child dt { color: rgba(255,255,255,.8); }
.case-steps > div:last-child dt::before { color: rgba(255,255,255,.5); }
.case-steps > div:last-child dd { color: #fff; }

@media (max-width: 960px) {
  .case-steps > div { padding-left: 0; }
}

/* шкала услуг: ось «просто → сложно» снята */
.scale-axis { display: none; }

/* фикс: узел «результата» — на одной оси с остальными, с усиком к плите */
.case-steps > div:last-child::before {
  top: calc(clamp(18px, 2.2vh, 24px) + 6px);
}
.case-steps > div:last-child::after {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(26px, 2.4vw, 40px) + 11px);
  top: calc(clamp(18px, 2.2vh, 24px) + 11px);
  width: calc(clamp(26px, 2.4vw, 40px) - 11px);
  height: 1.5px;
  background: var(--blue);
}