/* ============================================================
   Главная страница — Figma frame 5:327 (1920 × 12540)
   Координаты: Figma-абсолют минус верх соответствующей полосы.
   ============================================================ */

/* Высота складывается из полос: 12 540 px макета + «шлейфы» закреплённых
   схем (см. ниже), поэтому не задаётся жёстко. */
.page-home {
  height: auto;
}

/* ---------- 1. Первый экран (0 … 1176) --------------------- */

.band-hero { height: 1176px; }

.hero__glow {
  /* Прямоугольник Figma 1920×946 с layer blur 25. Полотно шире на
     60 px справа и слева, чтобы размытие не гасило края внутри кадра
     (лишнее срезает overflow холста); стопы пересчитаны на новую
     ширину, поэтому цвет в каждой точке страницы прежний. */
  left: -60px;
  top: 0;
  width: 2040px;
  height: 946px;
  background: linear-gradient(
    270deg,
    rgba(255, 87, 87, 0.8) 16.96%,
    rgba(212, 72, 72, 0.579545) 29.17%,
    rgba(153, 52, 52, 0) 56.76%
  );
  filter: blur(25px);
  /* только фон: клики проходят сквозь него к кнопкам */
  pointer-events: none;
}

/* Нож (Component 1, вариант «Обычное»): три слоя в одной рамке —
   инструменты (встроенный SVG, их поворачивает scripts/knife.js), корпус
   с тенями Figma (картинка, неподвижна — фильтры не пересчитываются
   каждый кадр) и прозрачные зоны наведения поверх. Центр масштаба
   при притяжении к мыши — центр корпуса. */
.hero__knife {
  left: 1110px;
  top: 100px;
  width: 756px;
  height: 720px;
  transform-origin: 383px 423px;
  /* нож постоянно отзывается на мышь: отдельный слой композитора,
     иначе поворот корпуса при отдаче перерисовывает его тени каждый кадр
     (замеры: 33 мс на кадр против 16.8 мс) */
  will-change: transform;
}

.knife__layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}

/* корпус неподвижен — своим слоем, чтобы его тени не перерисовывались,
   пока рядом ходят инструменты */
.knife__body { will-change: transform; }

/* зоны: контуры инструментов с запасом 6 px по краю — тонкие ножницы
   и штопор иначе трудно «поймать» */
.knife__zone path,
.knife__zone-body {
  pointer-events: all;
  fill: transparent;
  stroke: transparent;
  stroke-width: 12px;
}

.knife__zone-body { stroke-width: 0; }

.knife__zone--out:not(.is-on) path { pointer-events: none; }

/* Подпись вынутого инструмента — всегда в одном месте: слева от ножа,
   в пустой полосе между текстом первого экрана и ножом. Не следует за
   инструментом: иначе надпись прыгала бы по экрану. Обычный шрифт
   (не заголовочный), 1–2 короткие строки. */
.knife__labels {
  position: absolute;
  left: -334px;
  top: 300px;
  width: 300px;
  height: 96px;
}

.knife__label {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  margin: 0;
  text-align: right;
  font-family: var(--f-text);
  color: var(--c-ink);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 200ms var(--hover-ease), transform 260ms var(--hover-ease);
}

.knife__label.is-on {
  opacity: 1;
  transform: none;
}

.knife__label-name {
  display: block;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

.knife__label-note {
  display: block;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: rgba(14, 16, 21, 0.68);
}

.hero__title { left: 47px; top: 303px; width: 738px; }
.hero__lead { left: 47px; top: 556px; width: 700px; }

.hero__btn-primary { left: 62px; top: 747px; width: 236px; height: 56px; }
.hero__btn-primary .btn__label { left: 32px; top: 15px; width: 168px; }
.hero__btn-secondary { left: 325px; top: 747px; width: 310px; height: 56px; }
.hero__btn-secondary .btn__label { left: 9px; top: 13px; width: 273px; }

/* ---------- 2. Вы наверняка узнаете себя (1176 … 2397) ----- */

.band-problems { height: 1221px; }

.problems__dots { left: 394px; top: 16px; width: 960px; height: 959px; }
.problems__title { left: 108.5px; top: 154px; width: 1085px; white-space: nowrap; }

.problems__item {
  font-family: var(--f-accent);
  font-weight: 400;
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  color: var(--c-ink);
  white-space: nowrap;
}

/* верх = верх строки по Figma; общий сдвиг −3 px — в components.css */
.problems__item--l1 { left: 107.7px; top: 366px; }
.problems__item--l2 { left: 107.5px; top: 477px; }
.problems__item--l3 { left: 109.5px; top: 587.6px; }
.problems__item--r1 { left: 1209.7px; top: 365.6px; }
.problems__item--r2 { left: 1211.8px; top: 477px; }
.problems__item--r3 { left: 1208.3px; top: 581.2px; }

/* «Возможно вы узнаете себя» (133:104541), Состояния2: Line 13,
   3 px #0E1015. В «Обычное» — 18 px с opacity 0, во втором состоянии —
   длина из «Анимации сайта»: 493/659/739 слева, 561/701/615 справа.
   Линия на нижней границе фрейма пункта (y = верх фрейма + 52).
   --u-left / --u-top — её положение относительно строки текста. */
.problems__item::after {
  content: '';
  position: absolute;
  left: var(--u-left);
  top: var(--u-top);
  width: var(--u-w);
  height: 3px;
  background: var(--c-ink);
  clip-path: inset(0 calc(100% - var(--nav-underline-w)) 0 0);
  opacity: 0;
  transition: clip-path var(--hover-dur) var(--hover-ease),
              opacity var(--fade-dur) linear;
}

.problems__item:hover::after,
.problems__item:focus-visible::after {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

/* Обводка 3 px внутрь: полоса на 3 px выше нижней границы фрейма.
   Сверено с SVG «Анимации сайта руби/Возможно вы узнаете себя». */
.problems__item--l1 { --u-left: 0.8px;  --u-top: 52px;   --u-w: 493px; } /* y 1591…1594 */
.problems__item--l2 { --u-left: 1px;    --u-top: 44px;   --u-w: 659px; } /* y 1694…1697 */
.problems__item--l3 { --u-left: -1px;   --u-top: 52.4px; --u-w: 739px; } /* y 1813…1816 */
.problems__item--r1 { --u-left: -0.2px; --u-top: 52.4px; --u-w: 561px; } /* y 1591…1594 */
.problems__item--r2 { --u-left: -2.3px; --u-top: 52px;   --u-w: 701px; } /* y 1702…1705 */
.problems__item--r3 { --u-left: 0.95px; --u-top: 51.8px; --u-w: 615px; } /* y 1806…1809 */

/* ---------- 3. Посмотрите, как это работает (2397 … 3721) -- */

.band-showcase { height: 1324px; }

.showcase__title { left: 82.5px; top: 0; width: 1189px; white-space: nowrap; }
.showcase__lead { left: 82.5px; top: 118px; width: 700px; }
.showcase__dots { left: 134px; top: 350px; width: 1708px; height: 748px; }

/* ---------- Раскладка «кейс»: текст слева, схема справа ----- */

.case__step-title {
  font-family: var(--f-accent);
  font-weight: 700;
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  color: var(--c-ink);
}

.case__step-text {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--c-ink);
  width: 709.84px;
}

/* ---------- 4. Гибкий подход (3721 … 4800) ----------------- */

.band-process { height: 1079px; }

.process__title { left: 71.89px; top: 0; width: 1506.9px; }
.process__lead { left: 71.89px; top: 120px; width: 709.84px; }
.process__diagram { left: 860px; top: 104px; width: 993px; height: 749px; }

.process__t1 { left: 101.11px; top: 235px; width: 326px; }
.process__d1 { left: 101.11px; top: 309px; }
.process__t2 { left: 101.11px; top: 418px; width: 326px; }
.process__d2 { left: 101.11px; top: 492px; }
.process__t3 { left: 106.11px; top: 601px; width: 326px; }
.process__d3 { left: 106.11px; top: 675px; }

/* ---------- 5. Постановка задач с совещаний (4800 … 5879) -- */

.band-meetings { height: 1079px; }

.meetings__title { left: 72px; top: 0; width: 1010px; }
.meetings__lead { left: 72px; top: 158px; width: 709.84px; }
.meetings__diagram { left: 860px; top: 104px; width: 992px; height: 749px; }

.meetings__t1 { left: 101px; top: 272px; width: 480px; }
.meetings__d1 { left: 101px; top: 346px; }
.meetings__t2 { left: 101px; top: 418px; width: 369px; }
.meetings__d2 { left: 101px; top: 492px; }
.meetings__t3 { left: 101px; top: 553px; width: 447px; }
.meetings__d3 { left: 101px; top: 627px; }

/* ---------- 6. Переписка с клиентами (5879 … 6958) --------- */

.band-clients { height: 1079px; }

.clients__title { left: 73.5px; top: 0; width: 990px; }
.clients__lead { left: 70.5px; top: 163px; width: 709.84px; }
.clients__diagram { left: 861px; top: 104px; width: 993px; height: 749px; }

.clients__t1 { left: 102.5px; top: 235px; width: 493px; }
.clients__d1 { left: 102.5px; top: 309px; }
.clients__t2 { left: 102.5px; top: 418px; width: 565px; }
.clients__d2 { left: 102.5px; top: 492px; }
.clients__t3 { left: 107.5px; top: 601px; width: 528px; }
.clients__d3 { left: 107.5px; top: 675px; }

/* ---------- 7. Документы в CRM (6958 … 8037) --------------- */

.band-docs { height: 1079px; }

.docs__title { left: 72px; top: 0; width: 880px; }
.docs__lead { left: 72px; top: 244px; width: 709.84px; }
.docs__diagram { left: 860px; top: 104px; width: 992px; height: 749px; }

.docs__t1 { left: 77px; top: 321px; width: 623px; }
.docs__d1 { left: 77px; top: 395px; }
.docs__t2 { left: 77px; top: 504px; width: 512px; }
.docs__d2 { left: 77px; top: 578px; }
.docs__t3 { left: 82px; top: 687px; width: 486px; }
.docs__d3 { left: 82px; top: 761px; }

/* ---------- 8–9. Отраслевые решения ------------------------ */

.band-industries-1 { height: 1144px; }
.band-industries-2 { height: 926px; }

.industries__title { left: 38px; top: 0; width: 1486px; }
.industries__lead { left: 42px; top: 100px; width: 700px; }

.industry-card {
  position: absolute;
  width: 899px;
  height: 696px;
}

/* Раскрытые непрозрачные стопы: Figma интерполирует прямую альфу,
   CSS — премультиплицированную, поэтому середина расходилась. */
.industry-card--warm-up,
.industry-card--warm-down {
  background: linear-gradient(
    180deg,
    rgb(226, 96, 92) 0%, rgb(231, 122, 119) 10%, rgb(236, 146, 144) 20%,
    rgb(240, 168, 166) 30%, rgb(244, 187, 185) 40%, rgb(247, 204, 203) 50%,
    rgb(250, 218, 218) 60%, rgb(252, 230, 230) 70%, rgb(253, 240, 240) 80%,
    rgb(254, 247, 247) 90%, rgb(255, 252, 252) 100%
  );
}

.industry-card__title {
  position: absolute;
  font-family: var(--f-accent);
  font-weight: 700;
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  color: var(--c-ink);
}

.industry-card__text {
  position: absolute;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--c-ink);
}

/* Координаты карточек по макету. Раньше стояли атрибутами style="" прямо
   в разметке; вынесены сюда, чтобы политика безопасности (CSP) могла
   запретить встроенные стили целиком. Тексты карточек — из главная.yml. */
.industry-card--1 { left: 38px; top: 218px; width: 898.14px; }
.industry-card--2 { left: 983px; top: 218px; }
.industry-card--3 { left: 38px; top: 0; }
.industry-card--4 { left: 983px; top: 0; }

.industry-card--1 .industry-card__title { left: 45.6px; top: 26.46px; width: 749px; }
.industry-card--1 .industry-card__text { left: 45.6px; top: 225.9px; width: 853.4px; }
.industry-card--2 .industry-card__title { left: 31px; top: 22.9px; width: 761.81px; }
.industry-card--2 .industry-card__text { left: 31px; top: 222.34px; width: 868px; }
.industry-card--3 .industry-card__title,
.industry-card--4 .industry-card__title { left: 37.89px; top: 23.41px; width: 861.11px; }
.industry-card--3 .industry-card__text { left: 39.61px; top: 242.84px; width: 859.39px; }
.industry-card--4 .industry-card__text { left: 39.61px; top: 222.84px; width: 859.39px; }

.industry-card .link-card { left: 39px; top: 375px; width: 854px; height: 100px; }
.industry-card .link-card__rule--top { left: 1px; width: 831px; }
.industry-card .link-card__rule--bottom { left: 0; width: 831px; }
.industry-card .link-card__text { left: 1px; top: 31px; }
.industry-card .link-card__arrow { left: 721.4px; top: 41.3px; width: 51px; height: 17.3px; }
.industry-card--4 .link-card { left: 38px; top: 376px; width: 853px; }
.industry-card--4 .link-card__rule--top { width: 830px; }
.industry-card--4 .link-card__text { left: 0; top: 30px; }

/* Кнопка «Больше о…»: подпись по центру — так она встаёт ровно при любом
   тексте из главная.yml (в макете подписи были выровнены вручную). */
.industry-card__btn { left: 46px; top: 607px; width: 394px; height: 56px; }
.industry-card__btn .btn__label { left: 0; top: 13px; width: 100%; text-align: center; }

/* ---------- 10. Результаты (10107 … 11211) ----------------- */

.band-results { height: 1104px; }

.results__title { left: 118px; top: 0; width: 1486px; }
.results__lead { left: 122px; top: 100px; width: 700px; }

.result-card {
  position: absolute;
  top: 190px;
  width: 522px;
  height: 684px;
  background: linear-gradient(
    180deg,
    rgb(108, 229, 172) 0%, rgb(131, 232, 185) 10%, rgb(153, 235, 196) 20%,
    rgb(172, 238, 207) 30%, rgb(189, 241, 216) 40%, rgb(204, 244, 225) 50%,
    rgb(218, 246, 232) 60%, rgb(229, 248, 239) 70%, rgb(238, 250, 244) 80%,
    rgb(246, 252, 249) 90%, rgb(251, 253, 252) 100%
  );
}

/* Колонки результатов: координаты из макета (раньше — style="" в разметке) */
.result-col--1 .results__card-title { left: 148px; }
.result-col--1 .results__card-text { left: 142px; }
.result-col--1 .link-card { left: 148px; top: 690px; }
.result-col--2 .results__card-title { left: 726.5px; }
.result-col--2 .results__card-text { left: 728px; }
.result-col--2 .link-card { left: 727px; top: 691px; }
.result-col--3 .results__card-title { left: 1305.5px; }
.result-col--3 .results__card-text { left: 1306px; }
.result-col--3 .link-card { left: 1306px; top: 691px; }
.result-col .link-card { width: 496px; height: 100px; }
.result-col .link-card__rule--top { left: 0.6px; width: 483px; }
.result-col .link-card__rule--bottom { left: 0; width: 483px; }
.result-col .link-card__text { left: 0; top: 30px; }
.result-col .link-card__arrow { left: 419.48px; top: 41.3px; width: 29.61px; height: 17.4px; }

.result-card--1 { left: 121.5px; }
.result-card--2 { left: 700px; }
.result-card--3 { left: 1279px; }

.results__card-title {
  position: absolute;
  top: 254px;
  width: 435px;
  font-family: var(--f-accent);
  font-weight: 700;
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  color: var(--c-ink);
}

.results__card-text {
  position: absolute;
  top: 412px;
  width: 496px;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--c-ink);
}

/* ---------- 11. Готовы начать? (11211 … 11831) ------------- */

.band-cta { height: 620px; }

.cta__title { left: 685px; top: 0; width: 630px; }

.cta__lead {
  left: 684px;
  top: 100px;
  width: 616px;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  color: var(--c-ink);
}

.cta__btn-primary { left: 385px; top: 286px; width: 489px; height: 104px; }
.cta__btn-primary .btn__label { left: 18px; top: 8px; width: 478px; }
.cta__btn-secondary { left: 928.71px; top: 286px; width: 606.29px; height: 104px; }
.cta__btn-secondary .btn__label { left: 27.3px; top: 12px; width: 545px; }

/* ---------- 12. Контакты (11831 … 12540) ------------------- */

.band-footer { height: 709px; }

/* ---------- Схемы «Гибкий подход» и кейсов: анимация по прокрутке ----
   ТЗ: пока пользователь листает, слева всплывают пункты, справа плашки
   переходят в активное состояние, стрелки к ним становятся #FF5757.
   Секция закреплена (sticky) на время «шлейфа» прокрутки: 300 px на
   каждую зажигаемую плашку. Верх закрепления — 189 px: ровно столько от
   верха «экрана» (сетки GoldenCanonGrid) до верха полосы в макете. */
.pin-track {
  position: relative;
  width: var(--canvas-w);
  height: calc(1079px + var(--pin-extra));
}

/* «Шлейф» прокрутки: 300 px на каждую зажигаемую плашку схемы */
.pin-track--600 { --pin-extra: 600px; }
.pin-track--1200 { --pin-extra: 1200px; }

/* Закреплённая секция — отдельный слой композитора. Непрозрачный фон и
   обрезка по границам делают слой сплошным: иначе Chrome рисует текст
   пунктов серым сглаживанием вместо субпиксельного (ClearType).
   За границы секции ничего не выходит — обрезка ничего не срезает. */
.band.pin {
  position: sticky;
  top: 189px;
  background: var(--c-white);
  overflow: clip;
}

/* Слои схемы: точечная сетка картинкой, плашки и стрелки — встроенным SVG
   (в тех же координатах, viewBox из макета) */
.flow__svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* Сетка у всех четырёх схем одна и та же (совпадает до 0.01 px), в макете
   сдвинута лишь на доли пикселя — один файл, свой сдвиг у каждой схемы.
   Сдвиг — transform: дробный left картинки Chrome округляет до пикселя. */
.flow__mesh {
  position: absolute;
  left: 0;
  top: 0;
  width: 993px;
  height: 749px;
}

.meetings__diagram .flow__mesh,
.docs__diagram .flow__mesh { transform: translateX(-0.106px); }
.clients__diagram .flow__mesh { transform: translateX(0.394px); }

.flow-box__on,
.flow-box__off {
  transition: opacity var(--flow-dur) var(--hover-ease);
}

.flow-box__on { opacity: 0; }
.flow-box.is-lit .flow-box__on { opacity: 1; }
.flow-box.is-lit .flow-box__off { opacity: 0; }

/* тёмная заливка внутри значка повторяет цвет квадрата */
.flow-box__ink {
  fill: #1a1d26;
  transition: fill var(--flow-dur) var(--hover-ease);
}

.flow-box.is-lit .flow-box__ink { fill: var(--c-red); }

.flow-arrow {
  fill: var(--c-black);
  transition: fill var(--flow-dur) var(--hover-ease);
}

.flow-arrow.is-lit { fill: var(--c-red); }

/* Пункты слева: до прокрутки виден только первый, остальные всплывают
   снизу вверх. Скрываются только при работающем скрипте (flow-ready). */
.flow-ready .flow-section [data-step] {
  transition: opacity var(--step-dur) var(--hover-ease),
              transform var(--step-dur) var(--hover-ease);
}

.flow-ready .flow-section .case__step-text[data-step] {
  transition-delay: 80ms;
}

.flow-ready .flow-section [data-step]:not(.is-shown) {
  opacity: 0;
  transform: translateY(48px);
}

/* первый расчёт состояния — без анимации появления */
.flow-instant .flow-section *,
.flow-instant .flow-section *::before {
  transition: none !important;
}