/* ============================================================
   DEVILS — $100,000 OFFER RESULTS
   Дизайн-токени та базові стилі за гайдом 100K.md
   Усі кольори правити ТІЛЬКИ тут, у :root / темах.
   ============================================================ */

/* ---------- 1. Токени ---------- */

:root {
  /* Офіційна палітра брендкіту (розділ 13). Сайтова альтернатива — в коментарях */
  --primary-color: #e90000;   /* сайт: #d60e0e */
  --primary-hover: #ff1a1a;   /* сайт: #e90000 */
  --primary-dark: #330b0b;
  --laser-color: #ff3b30;

  --bg-color: #0a0a0a;        /* кіт: #171516 */
  --bg-secondary: #171717;
  --border-color: #212121;
  --surface-light: #d9dbdc;   /* світла тема — для фейдів між темними/світлими секціями */

  --text-color: #f6f6f6;      /* сайт: #e3e8ec */
  --text-muted: #f6f6f699;
  --text-dim: #7c7c7c;        /* сайт: #616364 */
  --silver: #c0c0c0;

  --font-heading: CyGrotesk, "Druk Wide Cy", sans-serif;
  --font-mono: FiraMono, "Fira Mono", monospace;
}

/* ---------- 2. Шрифти ---------- */

@font-face {
  font-display: swap; font-family: CyGrotesk; font-style: normal; font-weight: 800;
  src: url(../fonts/CyGrotesk-GrandBold.woff2) format("woff2"),
       url(../fonts/CyGrotesk-GrandBold.woff) format("woff");
}
@font-face {
  font-display: swap; font-family: FiraMono; font-style: normal; font-weight: 400;
  src: url(../fonts/FiraMono-Regular.woff2) format("woff2"),
       url(../fonts/FiraMono-Regular.woff) format("woff");
}
@font-face {
  font-display: swap; font-family: FiraMono; font-style: normal; font-weight: 500;
  src: url(../fonts/FiraMono-Medium.woff2) format("woff2"),
       url(../fonts/FiraMono-Medium.woff) format("woff");
}
@font-face {
  font-display: swap; font-family: FiraMono; font-style: normal; font-weight: 700;
  src: url(../fonts/FiraMono-Bold.woff2) format("woff2"),
       url(../fonts/FiraMono-Bold.woff) format("woff");
}

/* ---------- 3. База ---------- */

* { box-sizing: border-box; outline: none; }

/* scroll-behavior НЕ ставимо глобально: CSS-правило робить плавним КОЖЕН
   скрол, у тому числі службові window.scrollTo, якими ScrollTrigger відновлює
   позицію під час refresh. Поки браузер доанімовує такий скрол, GSAP міряє
   офсети запіненої секції на льоту й отримує сміття (пін блоку 010 переїжджав
   на початок сторінки й накладався на блок 004). Плавність якірних переходів
   дає initSmoothAnchors у main.js — точково, на клік. */
html {
  min-width: 320px;
  overflow-x: clip;
  scrollbar-width: none;
  width: 100%;
}
html::-webkit-scrollbar { display: none; }

body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  overflow-x: clip;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: inherit;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

a { color: inherit; text-decoration: underline; transition: color .15s; }
@media (hover:hover) and (pointer:fine) {
  a:hover { color: var(--primary-color); }
}

img { display: block; max-width: 100%; }
/* усі зображення обгорнуті в <picture> заради webp-джерела з png/jpg-фолбеком.
   display:contents прибирає обгортку з розкладки, тож <img> лишається прямим
   дитям свого контейнера і вся наявна верстка (flex, grid, абсолютні фігури)
   працює так само, як до обгортання */
picture { display: contents; }

/* ---------- 4. Теми (чергуються по блоках) ---------- */

.theme-dark {
  --bg-color: #0a0a0a;
  --bg-elevated: #171717;
  --text-color: #f6f6f6;
  --text-muted: #f6f6f699;
  --chip-bg: #f6f6f6;
  --chip-text: #0a0a0a;
  --watermark: rgba(255,255,255,.05);
  --line-color: #616364;
  background: var(--bg-color);
  color: var(--text-color);
}

.theme-light {
  --bg-color: var(--surface-light);
  --bg-elevated: #e3e5e6;
  --text-color: #111111;
  --text-muted: #55575a;
  --chip-bg: #111111;
  --chip-text: #f2f3f4;
  --watermark: rgba(0,0,0,.06);
  --line-color: #8a8c8e;
  background: var(--bg-color);
  color: var(--text-color);
}

/* Сірий «бетон» — проміжна тема між світлою та темною (блок 06) */
.theme-concrete {
  --bg-color: #7c7c7c;
  --bg-elevated: #868686;
  --text-color: #111111;
  --text-muted: #111111b3;
  --text-dim: #3d3d3d; /* глобальний #7c7c7c зливається з цим фоном */
  --chip-bg: #111111;
  --chip-text: #f2f3f4;
  --watermark: rgba(0,0,0,.07);
  --line-color: #5e5e5e;
  background: var(--bg-color);
  color: var(--text-color);
}

/* Червоних фонів немає — червоний лише як акцент у деталях (рішення проєкту) */

/* ---------- 5. Контейнер ---------- */

.g-container { padding-left: 30px; padding-right: 30px; }
.g-container-inner { margin: 0 auto; max-width: 1860px; width: 100%; }

@media (max-width:1200px) { .g-container { padding-left: 28px; padding-right: 28px; } }
@media (max-width:1024px) { .g-container { padding-left: 20px; padding-right: 20px; } }
@media (max-width:768px)  { .g-container { padding-left: 16px; padding-right: 16px; } }

/* ---------- 6. Секції-блоки ---------- */

.block {
  /* hidden, не clip: clip обрізає навіть position:fixed нащадків (мобільний
     оверлей структури юніту) по межах секції — hidden цього не робить */
  overflow: hidden;
  padding-bottom: 120px;
  padding-top: 120px;
  position: relative;
}
@media (max-width:1200px) { .block { padding-bottom: 90px; padding-top: 90px; } }
@media (max-width:768px)  { .block { padding-bottom: 60px; padding-top: 60px; } }

/* ---------- 7. Лінії та ефекти ---------- */

.decor-line {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--primary-color) 20%, transparent) 0,
    var(--primary-color) 50%,
    color-mix(in srgb, var(--primary-color) 20%, transparent));
  height: 1px;
}

.laser-line {
  background: linear-gradient(90deg, transparent,
    var(--laser-color) 30%, #ffb3ae 50%, var(--laser-color) 70%, transparent);
  box-shadow: 0 0 12px var(--laser-color), 0 0 32px var(--laser-color),
              0 0 64px color-mix(in srgb, var(--primary-color) 40%, transparent);
  height: 2px;
  pointer-events: none;
  position: absolute;
  width: 140%;
}

.glow-large {
  box-shadow: 0 0 329.6px color-mix(in srgb, var(--primary-color) 10%, transparent),
              0 0 164.8px color-mix(in srgb, var(--primary-color) 10%, transparent),
              0 0 82.4px color-mix(in srgb, var(--primary-color) 10%, transparent),
              0 0 41.2px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

/* ---------- 8. Мікрографіка ---------- */

.section-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  gap: 16px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.section-title::before {
  background: currentColor;
  content: "";
  display: block;
  flex-shrink: 0;
  height: 14px;
  width: 44px;
}
[data-block="003"] .section-title::before,
[data-block="004"] .section-title::before,
[data-block="006"] .section-title::before,
[data-block="007"] .section-title::before,
[data-block="008"] .section-title::before,
[data-block="009"] .section-title::before {
  display: none;
}

/* Заголовок + дрібний підпис під ним (блок 08) */
.section-head__stack { display: flex; flex-direction: column; gap: 8px; }
.section-head__sub {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* блок 09 «Результаты» — ліва половина червона (.firstres__left), локальний --primary-color
   там чорний, тож dim-текст на червоному тоне; піднімаємо контраст білим замість dim */
[data-block="009"] .section-head__sub {
  color: var(--text-color);
  opacity: .82;
}

.chip {
  background: var(--chip-bg);
  color: var(--chip-text);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 4px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip._title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 5vw, 76px);
  font-weight: 800;
  padding: 8px 28px;
}
.chip._red { background: var(--primary-color); color: #f6f6f6; }

.sq { border: 1px solid currentColor; display: inline-block; height: 8px; width: 8px; }
.sq._filled { background: currentColor; border: none; }

.dash-line   { border-top: 1px dashed var(--line-color); }
.dash-line-v { border-left: 1px dashed var(--line-color); }

.term-list {
  font-family: var(--font-mono);
  list-style: none;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
.term-list li { font-size: 13px; line-height: 1.8; }
.term-list li::before { content: "--  "; }

mark, .highlight {
  background: var(--chip-bg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--chip-text);
  padding: 2px 8px;
}

.tech-note {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 800;
  line-height: .9;
}
.stat-label { font-size: 16px; font-weight: 800; text-transform: uppercase; }

.watermark {
  color: var(--watermark);
  font-family: var(--font-heading);
  font-size: clamp(80px, 18vw, 260px);
  font-weight: 800;
  inset: 0;
  line-height: .9;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  user-select: none;
  z-index: 0;
}

.halftone {
  background-image: radial-gradient(currentColor 1px, transparent 1.5px);
  background-size: 6px 6px;
  color: var(--line-color);
}

.pill {
  align-items: center;
  border: 1px solid var(--primary-color);
  border-radius: 999px; /* єдиний заокруглений елемент бренду */
  color: var(--primary-color);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 12px;
  gap: 6px;
  padding: 6px 14px;
  text-transform: uppercase;
}
.pill._gray { background: #7c7c7c; border-color: #7c7c7c; color: #f6f6f6; }

/* ---------- 9. Патерни ---------- */

.pattern-grid {
  --grid-line: color-mix(in srgb, var(--primary-color) 35%, transparent);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}

.pattern-floor {
  --grid-line: color-mix(in srgb, var(--primary-color) 35%, transparent);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(600px) rotateX(60deg);
  transform-origin: bottom;
}

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

.full-btn {
  align-items: center;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  letter-spacing: .02em;
  line-height: 18px;
  min-height: 60px;
  padding: 12px 20px 10px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: .15s;
  user-select: none;
}
@media (hover:hover) and (pointer:fine) {
  .full-btn:hover { background-color: var(--primary-color); color: #f6f6f6; }
}
.full-btn:active { background-color: var(--primary-color); color: #f6f6f6; }
.full-btn:disabled { background-color: var(--bg-secondary); color: var(--text-dim); cursor: default; }

.round-btn {
  align-items: center;
  background: transparent;
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  color: var(--primary-color);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 14px;
  justify-content: center;
  letter-spacing: .02em;
  line-height: 18px;
  min-height: 124px;
  min-width: 124px;
  padding: 20px 10px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: .15s;
  user-select: none;
}
@media (hover:hover) and (pointer:fine) {
  .round-btn:hover { background-color: var(--primary-color); color: #171516; }
}
.round-btn._large { font-size: 28px; line-height: 36px; min-height: 248px; min-width: 248px; }
@media (max-width:1520px) {
  .round-btn._large { font-size: 18px; line-height: 22px; min-height: 200px; min-width: 200px; }
}
@media (max-width:1200px) {
  .round-btn._large { font-size: 16px; line-height: 20px; min-height: 160px; min-width: 160px; }
}

/* ---------- 11. Хедер ---------- */

.the-header {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg-color) 55%, transparent),
    transparent);
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 81;
}
.the-header__inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 18px;
  padding-top: 18px;
}
.the-header__logo {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
}

/* ---------- 12. Кастомний курсор ---------- */

@media (hover:hover) and (pointer:fine) {
  .cursor-dot, .cursor-ring {
    border-radius: 50%;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    z-index: 999;
  }
  .cursor-dot {
    background: var(--laser-color);
    box-shadow: 0 0 8px var(--laser-color);
    height: 6px;
    margin: -3px 0 0 -3px;
    width: 6px;
  }
  .cursor-ring {
    border: 1px solid color-mix(in srgb, var(--laser-color) 60%, transparent);
    height: 36px;
    margin: -18px 0 0 -18px;
    transition: transform .15s;
    width: 36px;
  }
  .cursor-ring._hover { transform: scale(1.6); }
}

/* ---------- 13. Хедер: навігація ---------- */

.the-header__logo img { height: 18px; transition: filter .15s; width: auto; }

/* Хедер над світлим блоком: JS вішає ._on-light (initHeaderTheme) */
.the-header { transition: background .15s, color .15s; }
.the-header._on-light {
  --text-muted: rgba(17,17,17,.66);
  background: linear-gradient(to bottom, rgba(217,219,220,.7), transparent);
  color: #111111;
}
.the-header._on-light .the-header__logo img { filter: invert(1); }

/* Кнопки блоків (як у рефі, але з гострими кутами бренду) */
.the-header__nav {
  display: flex;
  gap: 10px;
}
.the-header__nav a {
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 8px 16px;
  text-decoration: none;
  text-transform: uppercase;
  transition: .15s;
}
@media (hover:hover) and (pointer:fine) {
  .the-header__nav a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #f6f6f6;
  }
}
@media (max-width:768px) {
  .the-header__nav { display: none; }
  .the-header .tech-note { display: none; } /* не влазить поруч із лого */
  /* backdrop-filter на fixed-хедері змушує мобільний Safari перераховувати
     блюр цілого шару під ним на кожному кадрі скролу — головна причина
     фризів/ривків при скролі стрічки. На вузьких екранах прибираємо блюр
     і компенсуємо непрозорістю градієнта, щоб хедер лишався читабельним */
  .the-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--bg-color) 88%, transparent),
      color-mix(in srgb, var(--bg-color) 40%, transparent));
  }
  /* та сама причина, що й у хедера: backdrop-filter на плашках-підписах
     WebView перемальовує щокадру скролу → ривки на слабкому вбудованому
     браузері. На мобільному прибираємо блюр, компенсуючи щільнішим фоном */
  .block-solution__sign,
  .block-insider__sign,
  .block-solution__badge .tech-note {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10, 10, 10, .72);
  }
}

/* ---------- 14. Секційна шапка ---------- */

.section-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
  margin-bottom: 56px;
  position: relative;
  z-index: 1;
}
.section-head .tech-note { margin-left: auto; }
.section-head .section-title { font-size: clamp(24px, 3vw, 42px); }

.sub-title {
  font-size: clamp(18px, 2vw, 28px);
  margin: 16px 0;
}

.lead {
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.5;
  margin: 0 0 40px;
  max-width: 720px;
  position: relative;
  z-index: 1;
}

/* ---------- 15. HERO (кінематографічний реф: маскот у профіль, червоне
   світло в темряві, motion-blur шлейф) ----------
   Шари знизу вгору: light (червоні світлові плями) → mascot-wrap
   (шлейф + маскот + призма) → grain (зерно) → ui (текст ліворуч) */

.block-hero {
  min-height: 100vh;
  min-height: 100svh; /* стабільна висота — не «стрибає» від адресного рядка мобільного браузера */
  padding: 0;
}

.block-hero__light,
.block-hero__grain,
.block-hero__ui {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* Червоне «світло» — плями на темному, фон лишається чорним по краях */
.block-hero__light {
  background:
    radial-gradient(ellipse 58% 76% at 64% 42%,
      color-mix(in srgb, var(--primary-color) 46%, transparent), transparent 70%),
    radial-gradient(ellipse 34% 46% at 72% 26%,
      color-mix(in srgb, var(--laser-color) 26%, transparent), transparent 72%),
    radial-gradient(ellipse 80% 60% at 22% 88%,
      color-mix(in srgb, var(--primary-dark) 70%, transparent), transparent 72%);
  z-index: 1;
}

.block-hero__mascot-wrap {
  bottom: auto;
  height: 120vh;
  height: 120svh;
  pointer-events: none;
  position: absolute;
  right: -2vw;
  top: -8vh;
  z-index: 2;
}
.block-hero__figure { height: 100%; position: relative; }

.block-hero__mascot { height: 100%; width: auto; }
.block-hero__mascot {
  filter: drop-shadow(0 0 48px color-mix(in srgb, var(--primary-color) 40%, transparent))
          drop-shadow(0 0 140px color-mix(in srgb, var(--primary-color) 30%, transparent));
  position: relative;
}

/* Призматичний відблиск на грудях, як райдужне світло в рефі */
.block-hero__prism {
  background: linear-gradient(105deg, transparent,
    #ff6a00 18%, #ffd400 36%, #7dff8a 52%, #46c8ff 68%, #b46aff 84%, transparent);
  filter: blur(9px);
  height: 2.6%;
  left: 28%;
  mix-blend-mode: screen;
  opacity: .75;
  position: absolute;
  top: 55%;
  transform: rotate(-20deg);
  width: 44%;
}

/* Плівкове зерно поверх світла й маскота */
.block-hero__grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .22;
  z-index: 3;
}

.block-hero__ui { z-index: 4; }
.block-hero__ui-in {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding-bottom: 48px;
  padding-top: 96px;
  position: relative;
}
.block-hero__ui a { pointer-events: auto; }

.block-hero__content { max-width: 62%; }

.block-hero__kicker {
  align-items: center;
  display: flex;
  font-family: var(--font-mono);
  font-size: 13px;
  gap: 14px;
  letter-spacing: .08em;
  margin: 0 0 4vh;
  text-transform: uppercase;
}

/* Реф + рішення користувача: заголовок на 15–20% більший за реф-пропорцію */
.block-hero__title {
  display: flex;
  flex-direction: column;
  font-size: clamp(56px, 8.6vw, 168px);
  gap: .04em;
  letter-spacing: -.02em;
  line-height: .92;
  text-shadow: 0 0 10px hsla(0, 0%, 4%, .3);
}
.block-hero__row {
  align-items: flex-end;
  display: flex;
  gap: .22em;
  white-space: nowrap;
}
/* Технічний моно-підпис у стилі SCROLL DOWN / $100.000 OFFER // CASE_FILE */
.block-hero__plus {
  align-self: flex-end;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.15;
  margin-left: -1.6rem;
  padding-bottom: .9em;
  text-transform: uppercase;
  white-space: nowrap;
}

.block-hero__vs {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.3vw, 42px);
  font-weight: 800;
  letter-spacing: .01em;
  margin: 4.5vh 0 0;
  text-transform: uppercase;
}
.block-hero__vs .redacted { font-size: .62em; padding: .18em .5em; vertical-align: .18em; }

/* Обгортка центрує, transform лишаємо GSAP (див. правило в CLAUDE.md) */
.block-hero__scroll-wrap {
  bottom: 36px;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
}
.block-hero__scroll {
  flex-direction: column;
  gap: 12px;
  opacity: 0; /* з'являється на 2-й секунді (initHero) */
}
.no-js .block-hero__scroll { opacity: 1; }

.block-hero__arrow { animation: hero-arrow 1.6s ease-in-out infinite; }
@keyframes hero-arrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

@media (max-width:1200px) {
  .block-hero__mascot-wrap { height: 98vh; height: 98svh; right: -6vw; top: -4vh; }
  .block-hero__content { max-width: 70%; }
}
@media (max-width:1024px) {
  .block-hero__mascot-wrap { height: 82vh; height: 82svh; right: -10vw; top: 0; }
  .block-hero__content { max-width: 84%; }
}
@media (max-width:768px) {
  /* маскот — як на десктопі: справа, вертикально по центру, частина ширини
     зрізана краєм екрана (overflow-x: clip на body); текст — зліва в своїй
     колонці, без стиснення розміру. top рахуємо так, щоб фігура лишалась
     по центру висоти секції (100svh): (100 - height) / 2 */
  .block-hero__mascot-wrap { height: 90svh; right: -26vw; top: 5svh; }
  .block-hero__content { max-width: 62%; position: relative; }
  /* заголовок ширший за свою колонку і лягає на маскота — «ОФФЕР» падав на
     світлу сумку з призматичним відблиском і губився. Замість зменшення
     кегля (гігантська типографіка тут фірмова) підкладаємо м'яку заливку
     фоном: маскот лишається видимим, текст читається поверх нього */
  .block-hero__content::before {
    /* еліпс, а не лінійний градієнт: прямокутна підкладка давала помітні
       горизонтальні межі там, де обривалась поверх маскота */
    background: radial-gradient(120% 78% at 18% 50%,
      var(--bg-color) 0%,
      color-mix(in srgb, var(--bg-color) 82%, transparent) 42%,
      color-mix(in srgb, var(--bg-color) 34%, transparent) 72%,
      color-mix(in srgb, var(--bg-color) 0%, transparent) 100%);
    content: '';
    inset: -14vh -46vw -12vh -12vw;
    pointer-events: none;
    position: absolute;
    z-index: -1;
  }
  .block-hero__title { font-size: 11.5vw; }
  /* «+ UNLIM ОБОРОТКА» переносимо під ОФФЕР */
  .block-hero__row { flex-wrap: wrap; gap: .14em .22em; white-space: normal; }
  .block-hero__plus { align-self: flex-start; margin-left: 0; padding-bottom: 0; }
  .block-hero__kicker { flex-wrap: wrap; font-size: 11px; gap: 10px; }
  .block-hero__vs { margin-top: 3vh; }
  .block-hero__ui-in { justify-content: center; }
  .block-hero__scroll-wrap { bottom: 28px; }
}

.scroll-hint {
  align-items: center;
  color: var(--text-muted);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 11px;
  gap: 10px;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

/* ---------- 16. Розкладки: split, stat-grid ---------- */

.split {
  display: grid;
  gap: 60px;
  grid-template-columns: 1fr 1fr;
  position: relative;
  z-index: 1;
}
@media (max-width:1024px) { .split { gap: 40px; grid-template-columns: 1fr; } }

.stat-grid {
  display: grid;
  gap: 40px 32px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 48px;
}
.stat-grid--tight { gap: 24px; margin-bottom: 0; }
@media (max-width:520px) { .stat-grid { grid-template-columns: 1fr; } }

.stat { display: flex; flex-direction: column; gap: 8px; }
.stat-number--red { color: var(--primary-color); }

/* ---------- 17. Персони й цитати ---------- */

.person-card { margin: 0; }
.person-card--wide {
  align-items: start;
  display: grid;
  gap: 48px;
  grid-template-columns: 320px 1fr;
  margin-top: 64px;
}
@media (max-width:768px) { .person-card--wide { grid-template-columns: 1fr; } }

.person-card__photo { margin-bottom: 24px; }
.photo-placeholder {
  align-items: center;
  aspect-ratio: 4/5;
  border: 1px dashed var(--line-color);
  display: flex;
  justify-content: center;
  max-width: 420px;
}

.person-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.quote { margin: 0; }
.quote p {
  border-left: 2px solid var(--primary-color);
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1.45;
  margin: 0;
  padding-left: 24px;
}

/* ---------- 18. Редакт-плашка (цензор) ---------- */

.redacted {
  background: var(--primary-color);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: #f6f6f6;
  font-family: var(--font-mono);
  padding: 2px 10px;
  white-space: nowrap;
}

/* ---------- 18b. Блок 02 «Решение» — редакторський розворот (реф MUSE-1) ---------- */

.block-solution {
  align-items: stretch;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100svh; /* стабільна висота — не «стрибає» від адресного рядка мобільного браузера */
  overflow: clip;
  padding: 0;
}

/* --- ліва половина: світлий "бетон" Devils Capital (#d9dbdc) з ледь помітним рельєфом --- */
.block-solution__left {
  background:
    radial-gradient(130% 100% at 15% 6%, #e3e5e6, transparent 55%),
    #d9dbdc;
  min-width: 0;
  padding: clamp(32px, 4vw, 72px);
  position: relative;
}
/* тонка розділова лінія між половинами */
.block-solution__left::after {
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.14), transparent);
  bottom: 0;
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
}
@media (max-width:1024px) { .block-solution__left::after { display: none; } }

.block-solution__top {
  align-items: center;
  display: flex;
  gap: 16px;
  left: clamp(32px, 4vw, 72px);
  position: absolute;
  right: clamp(32px, 4vw, 72px);
  top: clamp(28px, 3.5vw, 56px);
}
.block-solution__top .tech-note { margin-left: auto; }

.block-solution__stage {
  align-items: center;
  display: flex;
  gap: clamp(14px, 1.8vw, 32px);
  min-height: 100%;
  padding: clamp(96px, 12vh, 150px) 0 clamp(64px, 8vh, 96px);
}

/* вертикальна назва — приглушена, працює як фоновий акцент, не «кричить» */
.block-solution__vword {
  color: color-mix(in srgb, #111 14%, transparent);
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: clamp(40px, 7vh, 84px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: .82;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  user-select: none;
}

/* ширша, комфортна колонка тексту (не вузький стовпчик) */
.block-solution__main { flex: 1; max-width: 640px; min-width: 0; }

.block-solution__title {
  font-size: clamp(28px, 3vw, 52px);
  line-height: 1.05;
  max-width: 15ch;
  overflow-wrap: break-word;
}
.block-solution__title .nobreak { white-space: nowrap; }
/* «кофаундерства» ширше за 360px-екран, і nowrap виносив хвіст слова за край.
   Нижче 400px дозволяємо перенос: розрив слова кращий за зрізаний текст */
@media (max-width:400px) {
  .block-solution__title .nobreak { white-space: normal; overflow-wrap: anywhere; }
}

/* увесь основний текст — одна родина (моно), рядки один під одним */
.block-solution__body {
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  margin-top: clamp(22px, 3vh, 38px);
  max-width: 58ch;
}
.block-solution__body p { margin: 0 0 15px; }
.block-solution__body p:first-child { color: var(--text-color); font-weight: 500; }
.block-solution__body p:last-child { margin-bottom: 0; }

/* плашка-виділення «наши взгляды» */
.hl {
  background: var(--primary-color);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: #f6f6f6;
  font-weight: 500;
  padding: .06em .34em;
}

/* --- права половина: чорна, портрет --- */
.block-solution__right {
  min-width: 0;
  overflow: clip;
  position: relative;
}
.block-solution__photo {
  filter: grayscale(1) contrast(1.06) brightness(.98);
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: 50% 16%;
  position: absolute;
  top: 0;
  width: 100%;
}

/* підпис: роль + ім'я — темна плашка поверх фото, як у блоку 05 */
.block-solution__sign {
  align-items: baseline;
  backdrop-filter: blur(4px);
  background: rgba(10, 10, 10, .45);
  border: 1px solid rgba(246, 246, 246, .14);
  bottom: clamp(28px, 4vh, 56px);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  left: clamp(20px, 2.5vw, 44px);
  padding: 12px 18px;
  position: absolute;
  z-index: 1;
}
.block-solution__role {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.block-solution__role::after {
  color: rgba(246, 246, 246, .25);
  content: "/";
  margin-left: 14px;
}
.block-solution__name {
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
@media (max-width:520px) {
  .block-solution__role::after { display: none; }
}
.block-solution__badge {
  bottom: clamp(24px, 3vw, 40px);
  left: clamp(24px, 3vw, 40px);
  position: absolute;
}
.block-solution__badge .tech-note {
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(4px);
  color: #f6f6f6;
  padding: 6px 12px;
}

@media (max-width:1024px) {
  .block-solution { grid-template-columns: 1fr; }
  /* права половина мобільно: фото — окремий блок фіксованої висоти в потоці,
     підпис (сигнатура) іде одразу під ним, а не поверх (як фото в блоці 05) */
  .block-solution__right { min-height: 0; order: -1; }
  .block-solution__photo {
    height: calc(52vh + 75px);
    height: calc(52svh + 75px); /* стабільна висота — не «стрибає» від адресного рядка */
    object-position: 50% 6%;
    position: static;
    width: 100%;
    /* фото фейдить у власний темний фон half-секції (theme-dark) — ніякого
       світлого/білого засвіту поверх портрета */
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
  }
  /* підпис більше не лежить поверх фото — окремим рядком одразу під ним */
  .block-solution__sign {
    background: none;
    backdrop-filter: none;
    border: 0;
    bottom: auto;
    left: auto;
    padding: 18px clamp(20px, 4vw, 40px) 0;
    position: static;
  }
  /* світла половина зверху трохи темніша — приймає тон фото, м'якше стикується */
  .block-solution__left::before {
    background: linear-gradient(to bottom, rgba(10,10,10,.22), transparent);
    content: "";
    height: clamp(48px, 9vh, 96px);
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
  }
  .block-solution__left { min-height: auto; }
  .block-solution__stage { min-height: auto; padding-bottom: 24px; }
}
@media (max-width:768px) {
  .block-solution__vword { font-size: 44px; }
  .block-solution__stage { gap: 18px; }
  .block-solution__photo { height: calc(40vh + 75px); height: calc(40svh + 75px); }
}
@media (max-width:520px) {
  .block-solution__stage { flex-direction: column; align-items: flex-start; gap: 10px; }
  .block-solution__vword { writing-mode: horizontal-tb; transform: none; font-size: 34px; }
  .block-solution__main { max-width: 100%; width: 100%; }
}

/* ---------- 19. Accordion ---------- */

.accordion {
  border-top: 1px solid var(--line-color);
  position: relative;
  z-index: 1;
}
.accordion__item { border-bottom: 1px solid var(--line-color); }

.accordion__head {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-family: var(--font-heading);
  font-size: clamp(16px, 1.8vw, 26px);
  font-weight: 800;
  gap: 20px;
  list-style: none;
  padding: 24px 0;
  text-transform: uppercase;
  transition: color .15s;
  user-select: none;
}
.accordion__head::-webkit-details-marker { display: none; }
@media (hover:hover) and (pointer:fine) {
  .accordion__head:hover { color: var(--primary-color); }
}

.accordion__index {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
}

.accordion__toggle {
  color: var(--primary-color);
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 400;
  margin-left: auto;
  transition: transform .15s;
}
.accordion__item[open] .accordion__toggle { transform: rotate(45deg); }

.accordion__body { padding: 0 0 32px 52px; }
@media (max-width:520px) { .accordion__body { padding-left: 0; } }
.accordion__body .pill { margin: 0 8px 8px 0; }

/* ---------- 20. Таймлайн (roadmap) ---------- */

.timeline {
  border-left: 2px solid var(--primary-color);
  box-shadow: -1px 0 12px color-mix(in srgb, var(--laser-color) 35%, transparent);
  display: flex;
  flex-direction: column;
  gap: 48px;
  list-style: none;
  margin: 0 0 48px;
  padding: 8px 0 8px 40px;
}
.timeline__item { max-width: 560px; position: relative; }
.timeline__item::before {
  background: var(--primary-color);
  content: "";
  height: 8px;
  left: -45px;
  position: absolute;
  top: 6px;
  width: 8px;
}
.timeline__title { font-size: clamp(16px, 1.8vw, 24px); margin: 12px 0 8px; }
.timeline__item p { color: var(--text-muted); margin: 0; }

/* ---------- 21. Блок 06 «Полная картина» — P&L по групах + приховані
   проблеми (темний, плюс-halftone на фоні; реф-макет користувача).
   Виняток з гострих кутів: згладжені картки — правка користувача 2026-07-07 ---------- */

/* Плюс-halftone на всю секцію з радіальним затуханням (реф користувача).
   Колір плюса продубльовано з --primary-color: data-URI не читає CSS-токени */
.fullpic-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M26 17v18M17 26h18' stroke='%23e90000' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center;
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 75% 90% at 50% 42%, #000 0, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 90% at 50% 42%, #000 0, transparent 78%);
  opacity: .16;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* Локальні відтінки — тільки з токенів теми, без хардкоду */
.fullpic {
  --fp-card:     color-mix(in srgb, var(--text-color) 4%,  var(--bg-color));
  --fp-card-2:   color-mix(in srgb, var(--text-color) 8%,  var(--bg-color));
  --fp-border:   color-mix(in srgb, var(--text-color) 13%, var(--bg-color));
  --fp-border-2: color-mix(in srgb, var(--text-color) 28%, var(--bg-color));
  --fp-red-line: color-mix(in srgb, var(--primary-color) 45%, var(--bg-color));
  display: flex;
  flex-direction: column;
  gap: 56px;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

/* композиція щільніша: блок підібраний ближче до заголовка секції */
[data-block="006"] .section-head { margin-bottom: 22px; }

.fullpic__eyebrow {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  margin-bottom: 18px;
}
/* лейбл над сіткою карток притиснутий до неї */
.fullpic__groups .fullpic__eyebrow { margin-bottom: 14px; }

/* --- P&L по 4 групах --- */

.fullpic__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.fullpic__card {
  background: linear-gradient(180deg, var(--fp-card-2), var(--fp-card));
  border: 1px solid var(--fp-border);
  border-radius: 14px; /* виняток: згладжені за правкою користувача */
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-color) 6%, transparent),
              0 14px 34px rgba(0,0,0,.35);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  min-width: 150px;
  overflow: hidden;
  padding: 20px 18px 18px;
  position: relative;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* верхня планка-індикатор стану групи */
.fullpic__card::before {
  background: var(--fp-accent, var(--fp-border-2));
  border-radius: 3px;
  content: "";
  height: 2px;
  left: 18px;
  position: absolute;
  right: 18px;
  top: 0;
}
@media (hover:hover) and (pointer:fine) {
  .fullpic__card:hover {
    border-color: var(--fp-border-2);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-color) 8%, transparent),
                0 0 0 1px color-mix(in srgb, var(--primary-color) 20%, transparent),
                0 18px 40px rgba(0,0,0,.45);
    transform: translateY(-3px);
  }
}

.fullpic__tag {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
}
.fullpic__sub {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

/* Прибуткові групи — світла планка; змішана — приглушено-червона; збиткова — червона */
.fullpic__card--plus { --fp-accent: color-mix(in srgb, var(--text-color) 65%, var(--bg-color)); }
.fullpic__card--minus {
  --fp-accent: var(--primary-color);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary-color) 14%, var(--fp-card-2)),
    color-mix(in srgb, var(--primary-color) 7%,  var(--fp-card)));
  border-color: var(--fp-red-line);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--primary-color) 14%, transparent),
              0 14px 34px rgba(0,0,0,.35),
              0 0 34px color-mix(in srgb, var(--primary-color) 14%, transparent);
}
.fullpic__card--minus .fullpic__tag,
.fullpic__card--minus .fullpic__sub { color: color-mix(in srgb, var(--primary-color) 55%, var(--text-color)); }

/* --- Лід «Главное»: суцільний абзац, друге речення — приглушене --- */
.fullpic__main {
  letter-spacing: .04em;
  line-height: 1.7;
  margin: 0 0 26px;
  max-width: 820px;
}
.fullpic__main-label {
  color: var(--primary-color);
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 8px;
}
.fullpic__main-strong {
  color: var(--text-color);
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.fullpic__main-dim {
  color: var(--text-dim);
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .06em;
}

/* --- Сітка P&L-карток: 4 колонки однакової висоти --- */
.fullpic__row--pl {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}

/* Картка-P&L: успадковує підкладку .fullpic__card, всередині — міні-звіт.
   Рядки статей однорядкові → горизонталі збігаються між колонками самі;
   статус притиснутий донизу (margin-top:auto), тому дворядковий чип
   мінусової групи не зсуває сусідів */
.fullpic__card--pl {
  gap: 0;
  padding: 22px 18px 18px;
}

.fullpic__card-head {
  display: grid;
  gap: 5px;
  margin-bottom: 18px;
}
.fullpic__card-head .fullpic__tag {
  color: var(--text-color);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}

.fullpic__pl {
  display: grid;
  gap: 9px;
}
.fullpic__pl-row {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.fullpic__pl-key {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  line-height: 1.5;
  /* довгий підпис («Операционные косты + бонусы вебов») переноситься в кілька рядків */
}
.fullpic__pl-val {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}

/* Рядок ресурсу: підпис довгий і в одних карток лягає в один рядок, в інших
   у два — без фіксованої висоти горизонталі «Итог» розходяться між колонками */
.fullpic__pl-row--res { min-height: calc(9.5px * 1.5 * 2); }

/* Підсумковий рядок — відбитий лінією, крупніший */
.fullpic__pl-row--total {
  border-top: 1px solid var(--fp-border);
  margin-top: 5px;
  padding-top: 13px;
}
.fullpic__pl-row--total .fullpic__pl-key { color: var(--text-muted); }
.fullpic__pl-row--total .fullpic__pl-val {
  color: var(--text-color);
  font-size: 21px;
  font-weight: 700;
}
/* Мінусовий підсумок — червоний із glow (цифра-акцент, розд. 6 гайду) */
.fullpic__card--minus .fullpic__pl-row--total .fullpic__pl-val {
  color: var(--primary-hover);
  text-shadow: 0 0 18px color-mix(in srgb, var(--primary-color) 55%, transparent);
}

/* Статус групи — мікрографіка в квадратних дужках, притиснута донизу */
.fullpic__status {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  line-height: 1.6;
  margin-top: auto;
  padding-top: 18px;
}
.fullpic__card--minus .fullpic__status {
  color: color-mix(in srgb, var(--primary-color) 60%, var(--text-color));
}

/* --- «Управленческий контур»: проблема в картці, під нею рішення
   на червоній планці, усе обведене спільною рамкою, яку зверху замикає
   лейбл із лазерною лінією (реф користувача) --- */

.fullpic__frame { position: relative; }

/* Кришка контуру: лейбл + лазерна лінія до правого краю */
.fullpic__frame-head {
  align-items: center;
  display: flex;
  gap: 14px;
  margin-bottom: 12px;
}
.fullpic__frame-label {
  color: var(--primary-color);
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}
/* лінія малюється GSAP-ом (scaleX) — тому окремий елемент, не ::after */
.fullpic__frame-line {
  background: linear-gradient(90deg,
    var(--primary-color),
    color-mix(in srgb, var(--primary-hover) 55%, var(--text-color)) 50%,
    var(--primary-color));
  box-shadow: 0 0 12px var(--laser-color),
              0 0 30px color-mix(in srgb, var(--primary-color) 40%, transparent);
  flex: 1;
  height: 1px;
  transform-origin: left center;
}

/* Три стани під кришкою: БЫЛО -> СДЕЛАЛИ -> РЕЗУЛЬТАТ (реф користувача).
   Загальної рамки немає — картки стоять на фоні блоку, останню
   виділяє червоний тінт і лазер по верхній кромці */
.fullpic__flow {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr);
}

.fullpic__flow-card {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--text-color) 9%, var(--bg-color)),
    color-mix(in srgb, var(--text-color) 3%, var(--bg-color)));
  border: 1px solid var(--fp-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px 26px;
  position: relative;
}
/* середня — крок дії: трохи щільніша поверхня, текст світліший */
.fullpic__flow-card--did {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--text-color) 13%, var(--bg-color)),
    color-mix(in srgb, var(--text-color) 5%, var(--bg-color)));
  border-color: color-mix(in srgb, var(--text-color) 18%, var(--bg-color));
}
/* остання — результат: червоний контур, тінт і glow */
.fullpic__flow-card--res {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary-color) 14%, var(--bg-color)),
    color-mix(in srgb, var(--primary-color) 3%, var(--bg-color)));
  border-color: color-mix(in srgb, var(--primary-color) 72%, var(--bg-color));
  box-shadow: 0 0 44px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

/* лазер по верхній кромці результату — малюється GSAP-ом (scaleX) */
.fullpic__flow-laser {
  background: var(--primary-color);
  box-shadow: 0 0 12px var(--laser-color),
              0 0 26px color-mix(in srgb, var(--primary-color) 40%, transparent);
  height: 2px;
  left: 14px;
  position: absolute;
  right: 14px;
  top: -1px;
  transform-origin: left center;
}

.fullpic__flow-label {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.fullpic__flow-card--res .fullpic__flow-label { color: var(--primary-color); }

.fullpic__flow-text {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  text-transform: uppercase;
}
.fullpic__flow-card--did .fullpic__flow-text,
.fullpic__flow-card--res .fullpic__flow-text {
  color: color-mix(in srgb, var(--text-color) 88%, var(--primary-color));
}

@media (max-width:1024px) {
  .fullpic__flow { gap: 18px; grid-template-columns: 1fr; }
}

@media (max-width:768px) {
  .fullpic { gap: 40px; }
  .fullpic__row--pl { grid-template-columns: 1fr; }
  .fullpic__main { margin-bottom: 38px; }
  .fullpic__flow-card { padding: 18px 18px 20px; }
  .fullpic__flow-text { font-size: 12px; line-height: 1.75; }
}

/* ---------- 21b. Блок 07 «Пересборка процессов» — горизонтальний таймлайн
   на 6 кроків почергово над/під лінією (світла «срібна», реф користувача) ---------- */

[data-block="007"] .section-head { margin-bottom: 32px; }

.steps {
  --st-line:   color-mix(in srgb, var(--text-color) 16%, var(--bg-color));
  --st-line-2: color-mix(in srgb, var(--text-color) 55%, var(--bg-color));
  --st-branch: color-mix(in srgb, var(--text-color) 30%, var(--bg-color));
  --st-dot:    color-mix(in srgb, var(--text-color) 45%, var(--bg-color));
  position: relative;
  text-transform: uppercase;
}

/* центральна вісь: слабкий трек + прогрес, що малюється зліва направо */
.steps__track {
  background: var(--st-line);
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
}
.steps__progress {
  background: var(--st-line-2);
  display: block;
  height: 100%;
  transform-origin: left center;
  width: 100%;
}

.steps__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  list-style: none;
  margin: 0;
  min-height: 220px;
  padding: 0;
  position: relative;
}

/* крок: три ряди — верхня зона / крапка на осі / нижня зона */
.steps__item {
  display: grid;
  grid-template-rows: 1fr 11px 1fr;
  justify-items: center;
  position: relative;
}
.steps__dot {
  background: var(--bg-color);
  border: 2px solid var(--st-dot);
  border-radius: 50%;
  grid-row: 2;
  height: 11px;
  opacity: 0; /* initSteps показує по черзі */
  width: 11px;
  z-index: 1;
}

.steps__slot {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 170px;
  opacity: 0; /* initSteps показує по черзі */
  text-align: center;
}
.steps__item--up   .steps__slot { align-self: end; grid-row: 1; padding-bottom: 4px; }
.steps__item--down .steps__slot { align-self: start; grid-row: 3; padding-top: 4px; }
/* dot стоїть у DOM першим — на десктопі його ряд задає grid-row */
.steps__item--up   .steps__dot,
.steps__item--down .steps__dot { grid-column: 1; }
.steps__item--up   .steps__slot,
.steps__item--down .steps__slot { grid-column: 1; }

/* пунктирна гілка від тексту до осі */
.steps__branch {
  background: repeating-linear-gradient(to bottom,
    var(--st-branch) 0 3px, transparent 3px 7px);
  height: 46px;
  width: 1px;
}

.steps__num {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
}
.steps__text {
  color: var(--text-color);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}

/* фінальний крок — червоний акцент */
.steps__item--final .steps__dot { border-color: var(--primary-color); }
.steps__item--final .steps__num { color: var(--primary-color); }
.steps__item--final .steps__text { font-weight: 700; }
.steps__item--final .steps__branch {
  background: repeating-linear-gradient(to bottom,
    color-mix(in srgb, var(--primary-color) 55%, var(--bg-color)) 0 3px, transparent 3px 7px);
}

@media (max-width:1024px) {
  .steps__slot { max-width: 140px; }
  .steps__text { font-size: 11.5px; }
}
@media (max-width:768px) {
  /* вертикальний список: вісь зліва, крапки на ній */
  .steps__track { display: none; }
  .steps__grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 0;
    padding-left: 28px;
  }
  .steps__grid::before {
    background: var(--st-line);
    bottom: 6px;
    content: "";
    left: 5px;
    position: absolute;
    top: 6px;
    width: 1px;
  }
  .steps__item { display: flex; gap: 0; }
  /* -28px компенсує padding-left грида: крапка сідає на вертикальну вісь */
  .steps__dot { left: -28px; position: absolute; top: 4px; }
  .steps__slot {
    align-items: flex-start;
    gap: 4px;
    max-width: none;
    padding: 0;
    text-align: left;
  }
  .steps__branch { display: none; }
  .steps__num { order: 1; }
  .steps__text { order: 2; }
  /* маленький відступ між списком кроків і плашкою-просадкою на мобілці */
}

/* ---------- 21c. Блок 07 — плашка «Просадка во время перестройки» (компактна
   картка праворуч: тонка нейтральна рамка + червоні HUD-скоби по кутах —
   мова рамок гайду 11.8, без суцільного червоного контуру) ---------- */

/* фонова мікрографіка секції: червоний плюс-halftone у лівому нижньому куті,
   тане радіально до фону (колір продубльовано з --primary-hover — data-URI
   не читає CSS-токени, як у .fullpic-bg) */
.rebuild-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M26 17v18M17 26h18' stroke='%23e90000' stroke-width='2'/%3E%3C/svg%3E");
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 95% 58% at 50% 100%, #000 0, transparent 78%);
  mask-image: radial-gradient(ellipse 95% 58% at 50% 100%, #000 0, transparent 78%);
  opacity: .144;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.dip {
  background: color-mix(in srgb, var(--text-color) 3%, var(--bg-color));
  border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 24px;
  position: relative;
  width: 100%;
}

/* червоні кутові скоби: L-подібні куточки поверх рамки (::before/::after —
   верхня пара, .dip__corner::before/::after — нижня) */
.dip::before, .dip::after,
.dip__corner::before, .dip__corner::after {
  content: "";
  height: 10px;
  position: absolute;
  width: 10px;
}
.dip::before        { border-left: 2px solid var(--primary-color);  border-top: 2px solid var(--primary-color);    left: -1px; top: -1px; }
.dip::after         { border-right: 2px solid var(--primary-color); border-top: 2px solid var(--primary-color);    right: -1px; top: -1px; }
.dip__corner::before{ border-bottom: 2px solid var(--primary-color); border-left: 2px solid var(--primary-color);  bottom: -1px; left: -1px; }
.dip__corner::after { border-bottom: 2px solid var(--primary-color); border-right: 2px solid var(--primary-color); bottom: -1px; right: -1px; }

.dip__head {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.dip__dot {
  background: var(--primary-color);
  border-radius: 50%;
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary-color) 60%, transparent);
  flex: none;
  height: 6px;
  width: 6px;
}
.dip__title {
  color: var(--primary-color);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dip__body {
  align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
  display: grid;
  gap: 22px;
  grid-template-columns: 130px 1fr;
  padding-top: 16px;
}

.dip__chart { display: block; height: 54px; width: 100%; }
.dip__line {
  fill: none;
  stroke: var(--primary-color);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.dip__pt { fill: var(--primary-color); }
/* дві криві: широка — десктоп/планшет, вузька з глибшим прогином — мобілка */
.dip__line--narrow, .dip__pt--narrow { display: none; }

.dip__kv { display: flex; flex-direction: column; gap: 8px; }
.dip__row {
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  padding-bottom: 6px;
}
.dip__row:last-child { border-bottom: none; padding-bottom: 0; }
.dip__label {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dip__vals { align-items: baseline; display: flex; gap: 7px; margin-top: 2px; }
.dip__old {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
}
.dip__arrow { color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; }
.dip__new {
  color: var(--text-color);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
}

@media (max-width:520px) {
  /* трохи компактніша плашка на мобілці: менші паддінги, нижчий графік */
  .dip { padding: 13px 15px; }
  .dip__head { margin-bottom: 8px; }
  .dip__body { grid-template-columns: 1fr; gap: 12px; padding-top: 10px; }
  .dip__chart { height: 32px; }
  .dip__new { font-size: 15px; }
  .dip__line--wide, .dip__pt--wide { display: none; }
  .dip__line--narrow, .dip__pt--narrow { display: inline; }
}

/* ---------- 22. Результати ---------- */

.results-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  padding: 48px;
  position: relative;
  z-index: 1;
}
@media (max-width:768px) { .results-card { padding: 24px; } }
.results-card .stat-grid { margin-bottom: 0; }

/* ---------- 24. Фінал — «чиста» світла сторінка з бульбашкою питання ---------- */

.block-final {
  overflow: hidden;
  padding-bottom: clamp(36px, 5vh, 64px);
  /* верхній відступ вміщує маскота над бульбашкою під фіксованим хедером */
  padding-top: clamp(190px, 26vh, 300px);
  position: relative;
  text-align: center;
}
.block-final .g-container-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 2;
}

/* мікрографіка: дрібний плюс-halftone (колір продубльовано з --text-color теми) */
.block-final__pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M26 19v14M19 26h14' stroke='%23111111' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: center;
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 85% at 50% 40%, #000 0, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 85% at 50% 40%, #000 0, transparent 80%);
  opacity: .1;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
/* гігантське слово за бульбашкою (реф: FEEDBACK за карткою) */
.block-final__watermark {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  padding-top: clamp(48px, 9vh, 120px);
}

/* бульбашка питання: чорна картка з хвостиком на світлому фоні */
.block-final__bubble {
  align-items: center;
  background: var(--chip-bg);
  border: 1px solid color-mix(in srgb, var(--chip-text) 10%, transparent);
  box-shadow: 0 48px 120px -36px #00000073, 0 0 0 1px #0000001f;
  color: var(--chip-text);
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(32px, 4.5vw, 52px) clamp(24px, 5vw, 72px) clamp(28px, 4vw, 44px);
  position: relative;
  width: min(720px, 92vw);
}
.block-final__tail {
  background: var(--chip-bg);
  bottom: -12px;
  height: 24px;
  left: 15%;
  position: absolute;
  transform: rotate(45deg);
  width: 24px;
}
/* маскот «сидить» на верхній кромці — аналог 3D-іконки з рефа.
   z-index нижчий за текст картки — де хвіст/тіло заходять на чіп/заголовок,
   текст має друкуватись поверх маскота, а не навпаки */
.block-final__mascot {
  filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--primary-color) 45%, transparent));
  height: auto;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate(-50%, -74%);
  width: clamp(76px, 9vw, 104px);
  z-index: 0;
}
.block-final__chip { margin-top: 4px; position: relative; z-index: 1; }
.block-final__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

/* форма: textarea з лімітом + лічильник + кнопка */
.block-final__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.block-final__field {
  background: color-mix(in srgb, var(--chip-text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip-text) 16%, transparent);
  border-radius: 0;
  color: var(--chip-text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  min-height: 112px;
  padding: 16px 18px;
  resize: none;
  transition: border-color .15s, background .15s;
  width: 100%;
}
.block-final__field::placeholder {
  color: color-mix(in srgb, var(--chip-text) 38%, transparent);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.block-final__field:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary-color) 28%, transparent);
  outline: none;
}
/* 16px на будь-якому тач-пристрої, а не лише на вузькому екрані: правило за
   шириною не діяло на телефоні в landscape (844px), і Safari там так само
   зумив сторінку при фокусі на поле */
@media (pointer: coarse) {
  .block-final__field { font-size: 16px; }
}
/* порожній submit: поле підсвічується, підказка проступає під ним */
.block-final__form.is-invalid .block-final__field {
  border-color: var(--primary-color);
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary-color) 22%, transparent);
}
.block-final__error {
  color: var(--primary-color);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  margin-top: -8px;
  opacity: 0;
  text-transform: uppercase;
  transition: opacity .15s;
}
.block-final__form.is-invalid .block-final__error { opacity: 1; }
.block-final__meta {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}
.block-final__count { color: color-mix(in srgb, var(--chip-text) 45%, transparent); }
.block-final__count.is-max { color: var(--primary-color); }
.block-final__send {
  background: transparent;
  border-color: color-mix(in srgb, var(--chip-text) 24%, transparent);
  color: var(--chip-text);
  flex: 1;
  font-size: 11px;
  letter-spacing: .14em;
  max-width: 320px;
  min-height: 52px;
}

/* мінімальні соцколонки: іконка + назва + хендл, без рамок (реф 1, низ) */
.block-final__links {
  display: grid;
  gap: clamp(20px, 4vw, 48px);
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(44px, 6vh, 72px);
  text-align: center;
  width: min(960px, 100%);
}
.block-final__link {
  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  gap: 10px;
  text-decoration: none;
  transition: color .15s;
}
.block-final__link svg { color: var(--text-dim); height: 20px; transition: color .15s; width: 20px; }
.block-final__link-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  margin-top: 4px;
  text-transform: uppercase;
}
.block-final__link-note { color: var(--text-dim); font-size: 10px; letter-spacing: .04em; }
.block-final__link:hover { color: var(--primary-color); }
.block-final__link:hover svg { color: var(--primary-color); }

.block-final .decor-line { align-self: stretch; margin-top: clamp(24px, 4vh, 48px); }
.block-final__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 16px;
  width: 100%;
}

@media (max-width: 768px) {
  .block-final__links { grid-template-columns: repeat(2, 1fr); }
  .block-final__meta { align-items: stretch; flex-direction: column; }
  .block-final__send { max-width: none; }
  .block-final__count { text-align: left; }
  /* на мобілці блок дозволено бути вищим за екран і скролитись — не
     женемось за «все в один viewport», тримаємо нормальні відступи, щоб
     сторінка не виглядала стиснутою */
  .block-final { padding-bottom: clamp(28px, 6vh, 48px); padding-top: clamp(100px, 16vh, 170px); }
  /* watermark QUESTION на вузькому екрані ширший за viewport і зрізається
     по краях — зменшуємо, щоб слово читалось повністю */
  /* на мобілці слово підтягнуте вище — менший власний відступ, ближче до
     верху секції, органічно перекрито хедером зверху */
  .block-final__watermark { font-size: clamp(40px, 13vw, 64px); padding-top: clamp(4px, 1.5vh, 16px); }
  /* маскот на мобільному провокував накладання на текст картки, тому його
     прибирали зовсім. Повертаємо зменшеним і з власним відступом зверху:
     силует сидить на кромці, chip і заголовок починаються нижче за нього */
  .block-final__mascot { width: clamp(56px, 16vw, 76px); }
  .block-final__bubble {
    gap: 18px;
    padding: clamp(46px, 12vw, 58px) clamp(20px, 5vw, 28px) clamp(24px, 6vw, 32px);
  }
  .block-final__form { gap: 16px; }
  /* 16px — нижче цього iOS Safari зумить сторінку при фокусі на поле
     і сам назад не повертає (maximum-scale у viewport-meta свідомо немає,
     щоб не блокувати зум користувачу) */
  .block-final__field { font-size: 16px; min-height: 96px; padding: 14px 16px; }
  .block-final__meta { gap: 12px; }
  .block-final__send { min-height: 48px; }
  .block-final__links { margin-top: clamp(32px, 8vh, 56px); }
  .block-final .decor-line { margin-top: clamp(16px, 4vh, 32px); }
  .block-final__bottom { margin-top: 14px; }
}

/* ---------- 25. Оверлеї ---------- */

.overlay {
  align-items: center;
  /* майже суцільний фон: при .82 крізь відступи навколо центрованої панелі
     (max-height:86vh — вгорі/внизу лишається зазор) просвічував контент, що
     скролився під фіксованим оверлеєм */
  background: rgba(10,10,10,.97);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 90;
}
.overlay[hidden] { display: none; }

/* Inline-варіант: вкладка розкривається поверх кейса в правій колонці блоку 03 */
.overlay--inline {
  align-items: stretch;
  background: none;
  grid-column: 2;
  grid-row: 1;
  inset: auto;
  justify-content: stretch;
  padding: 0;
  position: relative;
  z-index: 5;
}
.overlay--inline .overlay__panel {
  align-self: center;
  animation: overlayInlineIn .25s ease;
  max-height: 100%;
  max-width: none;
  padding: 32px;
  width: 100%;
}
@keyframes overlayInlineIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.overlay__panel {
  -webkit-overflow-scrolling: touch;
  background: var(--bg-color);
  border: 1px solid var(--primary-color);
  box-shadow: 0 0 48px color-mix(in srgb, var(--primary-color) 25%, transparent);
  max-height: 86vh;
  max-width: 860px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 40px;
  width: 100%;
}
@media (max-width:768px) { .overlay__panel { padding: 24px; } }

.overlay__head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.overlay__close {
  align-items: center;
  background: none;
  border: 1px solid var(--line-color);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  font-family: var(--font-mono);
  font-size: 20px;
  height: 44px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: .15s;
  width: 44px;
}
@media (hover:hover) and (pointer:fine) {
  .overlay__close:hover { background: var(--primary-color); border-color: var(--primary-color); }
}

/* Схема структури */
.org { display: flex; flex-direction: column; gap: 32px; }
.org__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.org__node {
  border: 1px solid var(--line-color);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  padding: 14px 24px;
  text-transform: uppercase;
}
.org__node--red { border-color: var(--primary-color); color: var(--primary-color); }

/* ---------- 26. Стани анімацій (GSAP) ---------- */

[data-reveal] { opacity: 0; }
.no-js [data-reveal] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-float] { transform: none !important; }
}

/* ---------- 27. Блок 03 — ЮНИТ (картка деталей + плаваючий кейс) ---------- */

.unit {
  align-items: stretch;
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 460px) 1fr;
  position: relative;
  z-index: 1;
}

/* Ліва картка — «досье» юніту */
.unit__card {
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 40px;
}

.unit__card-head {
  align-items: baseline;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}
.unit__name {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.unit__lead {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.unit__group { display: flex; flex-direction: column; gap: 12px; }
.unit__label {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.unit__pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* Нейтральна пігулка (акценти бережемо для червоного) */
.tag {
  border: 1px solid var(--line-color);
  border-radius: 999px;
  color: var(--text-muted);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  padding: 5px 13px;
  text-transform: uppercase;
}
.tag--strong { border-color: var(--text-color); color: var(--text-color); }

.unit__note {
  color: var(--text-color);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Ключовий інсайт — єдиний червоний акцент картки */
.unit__group--accent { border-left: 2px solid var(--primary-color); padding-left: 18px; }
.unit__highlight {
  color: var(--text-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}

.unit__btn { align-self: flex-start; gap: 12px; margin-top: 6px; }
.unit__btn-arrow { transition: transform .15s; }
@media (hover:hover) and (pointer:fine) {
  .unit__btn:hover .unit__btn-arrow { transform: translateX(4px); }
}

/* Права колонка — плаваючий кейс з червоним світлом */
.unit__visual {
  align-items: center;
  display: flex;
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
  min-height: 420px;
  position: relative;
}
.unit__visual::before {
  background: radial-gradient(ellipse 60% 55% at 50% 50%,
    color-mix(in srgb, var(--primary-color) 30%, transparent), transparent 70%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 0;
}
.unit__case {
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.6));
  height: auto;
  max-width: 620px;
  position: relative;
  width: 100%;
  z-index: 1;
}

@media (max-width:1024px) {
  .unit { gap: 32px; grid-template-columns: 1fr; }
  .unit__visual { grid-column: 1; grid-row: 1; min-height: 300px; }
  .unit__case { width: 78%; max-width: 520px; }

  /* Немає правої колонки — вкладка знову на весь екран (той самий фікс
     прозорості бекдропу, що й у .overlay) */
  .overlay--inline {
    align-items: center;
    background: rgba(10,10,10,.97);
    grid-column: auto;
    grid-row: auto;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 90;
  }
  .overlay--inline .overlay__panel {
    align-self: auto;
    max-height: 86vh;
    max-width: 860px;
  }
}
@media (max-width:768px) {
  .unit__card { gap: 22px; padding: 28px; }
}

/* ---------- 28. Оверлей «Структура и итоги» ---------- */

.struct__title {
  font-size: clamp(22px, 2.4vw, 32px);
  margin-bottom: 28px;
}
.struct__table {
  border-top: 1px solid var(--border-color);
  margin: 0;
}
.struct__row {
  align-items: baseline;
  border-bottom: 1px solid var(--border-color);
  display: grid;
  gap: 24px;
  grid-template-columns: 200px 1fr;
  padding: 16px 0;
}
.struct__key {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.struct__val {
  color: var(--text-color);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
.struct__val--dim { color: var(--text-muted); }
.struct__sub {
  color: var(--text-dim);
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  line-height: 1.5;
  margin-top: 6px;
  text-transform: uppercase;
}
.struct__itogi { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }

@media (max-width:600px) {
  .struct__row { grid-template-columns: 1fr; gap: 6px; }
}

/* Блок 03 «О команде» + оверлей структури — весь текст капслоком */
#team,
#overlay-structure { text-transform: uppercase; }

/* ---------- 29. Блок 04 «Метрики / Слепая зона» ---------- */

/* Локальні відтінки поверхонь — виводяться з токенів теми (без хардкоду) */
.metrics {
  --m-card:     color-mix(in srgb, var(--text-color) 5%,  var(--bg-color));
  --m-card-2:   color-mix(in srgb, var(--text-color) 8%,  var(--bg-color));
  --m-net:      color-mix(in srgb, var(--text-color) 11%, var(--bg-color));
  --m-border:   color-mix(in srgb, var(--text-color) 12%, var(--bg-color));
  --m-border-2: color-mix(in srgb, var(--text-color) 22%, var(--bg-color));
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  padding: 40px;
  position: relative;
  text-transform: uppercase; /* «ВСЕ СЛОВА КАПС» */
}

/* Вотермарк «CAPITAL» — гігантський фоновий текст (тема CAPITAL) */
.watermark--capital {
  align-items: flex-end;
  display: flex;
  font-size: clamp(90px, 20vw, 300px);
  justify-content: flex-end;
  letter-spacing: -.02em;
  padding: 0 24px 24px 0;
  white-space: nowrap;
}

/* Легка мікрографіка: червона сітка + плюс-halftone з радіальним затуханням */
.metrics__bg {
  --grid-line: color-mix(in srgb, var(--primary-color) 35%, transparent);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-position: center;
  background-size: 26px 26px;
  inset: 0;
  -webkit-mask-image: radial-gradient(circle at 22% 14%, #000 0, transparent 72%);
  mask-image: radial-gradient(circle at 22% 14%, #000 0, transparent 72%);
  opacity: .06;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.metrics__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  position: relative;
  z-index: 1;
}

/* Підкладки як у блоці 06 (.fullpic__card): градієнт, скруглення,
   тіні + верхня планка-індикатор; тіні м'якші — блок на світлій темі */
.metrics__card {
  background: linear-gradient(180deg, var(--m-card-2), var(--m-card));
  border: 1px solid var(--m-border);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-color) 6%, transparent),
              0 14px 34px rgba(0,0,0,.10);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 120px;
  overflow: hidden;
  padding: 20px 18px 18px;
  position: relative;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* верхня планка-індикатор (дзеркало .fullpic__card::before) */
.metrics__card::before {
  background: var(--m-accent, var(--m-border-2));
  border-radius: 3px;
  content: "";
  height: 2px;
  left: 18px;
  position: absolute;
  right: 18px;
  top: 0;
}
@media (hover:hover) and (pointer:fine) {
  .metrics__card:hover {
    border-color: var(--m-border-2);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-color) 8%, transparent),
                0 0 0 1px color-mix(in srgb, var(--primary-color) 20%, transparent),
                0 18px 40px rgba(0,0,0,.16);
    transform: translateY(-3px);
  }
}

.metrics__card--gross {
  --m-accent: color-mix(in srgb, var(--text-color) 65%, var(--bg-color));
  background: linear-gradient(180deg, var(--m-net), var(--m-card-2));
  border-color: var(--m-border-2);
}
/* Ширину не збільшуємо: flex:1.2 робив другий ряд на 19px вужчим за перший
   у двох перших картках і на 38px ширшим у третій — вертикалі рядів не
   збігались. Акцент тримають червона планка й контрастний фон */
.metrics__card--net {
  --m-accent: var(--primary-color); /* червона планка — місток до «слепой зоны» */
  background: linear-gradient(180deg, var(--m-net), var(--m-card-2));
  border-color: color-mix(in srgb, var(--text-color) 30%, var(--bg-color));
}

.metrics__label {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
}
.metrics__val {
  color: var(--text-color);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
}
.metrics__val--lg { font-size: 22px; font-weight: 700; }
.metrics__sub {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}
.metrics__card--net .metrics__sub { color: var(--text-color); }

.metrics__blind {
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 12px; /* ритм рядків задає gap, а не порожні <br> */
  margin-top: 12px;
  padding-top: 26px;
  position: relative;
  z-index: 1;
}
/* Ремарка над «слепой зоной» — дрібний заголовковий лейбл (CyGrotesk),
   не другорядний підзаголовок: читається як позначка, а не як титул */
.metrics__eyebrow {
  color: var(--text-color);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.1;
  margin-bottom: 4px;
}
.metrics__text {
  color: var(--text-color);
  font-size: 14.5px;
  letter-spacing: .015em;
  line-height: 1.65;
  margin: 0;
  max-width: 640px; /* щоб «NET PROFIT» не переносився осиротілим рядком */
}

/* Підсвітка ключової фрази фоном — червоний акцент */
.metrics__mark {
  background: color-mix(in srgb, var(--primary-color) 20%, transparent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: color-mix(in srgb, var(--primary-color) 55%, var(--text-color));
  padding: 1px 7px;
}

@media (max-width:600px) {
  .metrics { padding: 26px; }
  .metrics__card { min-width: calc(50% - 7px); }
}

/* На вузькому екрані слово «CAPITAL» ширше за viewport і потрапляє в
   вузький проміжок під карткою — зрізається посередині літер і читається
   криво. Зменшуємо, щоб слово повністю вміщалось у відступ під карткою. */
@media (max-width:768px) {
  .watermark--capital {
    font-size: clamp(40px, 13vw, 72px);
    padding: 0 16px 10px 0;
  }
}

/* ---------- 30. Блок 05 «Взгляд CMO» — інсайдерський розворот
   (реф: SpaceX profile; дзеркало подачі блоку 02, обидві половини темні) ---------- */

.block-insider {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 46%) 1fr;
  min-height: 100vh;
  min-height: 100svh; /* стабільна висота — не «стрибає» від адресного рядка мобільного браузера */
  overflow: clip;
  padding: 0;
  position: relative;
}

/* --- ліва половина: портрет, краї розчиняються в темряву слайда --- */
.block-insider__media {
  overflow: clip;
  position: relative;
}
.block-insider__photo {
  filter: grayscale(1) contrast(1.05);
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: 50% 18%;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 60%, transparent 99%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 60%, transparent 99%);
}
/* ледь помітне червоне «світло» по контурному краю портрета */
.block-insider__media::after {
  background: radial-gradient(58% 46% at 62% 42%,
    color-mix(in srgb, var(--primary-color) 16%, transparent), transparent 70%);
  content: "";
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  position: absolute;
}

.block-insider__top {
  align-items: center;
  display: flex;
  gap: 16px;
  left: clamp(32px, 4vw, 72px);
  position: absolute;
  right: clamp(32px, 4vw, 72px);
  top: clamp(28px, 3.5vw, 56px);
  z-index: 1;
}
.block-insider__top .tech-note { margin-left: auto; }

/* дрібний вертикальний label скраю — дзеркально до блоку 02 (правий край) */
.block-insider__vlabel {
  bottom: clamp(32px, 4vw, 72px);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  position: absolute;
  right: clamp(18px, 2vw, 34px);
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

/* --- права половина: текст --- */
.block-insider__stage {
  align-items: center;
  display: flex;
  padding: clamp(96px, 12vh, 150px) clamp(32px, 4vw, 72px) clamp(64px, 8vh, 96px);
}
.block-insider__main { max-width: 640px; }

/* червона планка над заголовком — цитата з референсу */
.block-insider__title {
  font-size: clamp(28px, 2.6vw, 46px);
  line-height: 1.05;
  max-width: 18ch;
}
.block-insider__title::before {
  background: var(--primary-color);
  box-shadow: 0 0 14px color-mix(in srgb, var(--primary-color) 60%, transparent);
  content: "";
  display: block;
  height: 4px;
  margin-bottom: clamp(18px, 2.4vh, 28px);
  width: 64px;
}

.block-insider__body {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  margin-top: clamp(22px, 3vh, 38px);
  max-width: 58ch;
}
.block-insider__body p { margin: 0 0 15px; }
.block-insider__body p:first-child { color: var(--text-color); font-weight: 500; }
.block-insider__body p:last-child { margin-bottom: 0; }

/* підпис: роль + ім'я — та сама плашка, що в блоці 02, у темному виконанні;
   живе органічно біля фото — справа внизу, на зоні розчинення маски */
.block-insider__sign {
  align-items: baseline;
  backdrop-filter: blur(4px);
  background: rgba(10, 10, 10, .45);
  border: 1px solid rgba(246, 246, 246, .14);
  bottom: clamp(28px, 4vh, 56px);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 12px 18px;
  position: absolute;
  right: clamp(20px, 2.5vw, 44px);
  z-index: 1;
}
.block-insider__role {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.block-insider__role::after {
  color: rgba(246, 246, 246, .25);
  content: "/";
  margin-left: 14px;
}
.block-insider__name {
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width:1024px) {
  .block-insider { grid-template-columns: 1fr; }
  .block-insider__media { min-height: 46vh; min-height: 46svh; }
  .block-insider__photo {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 72%, transparent 100%);
  }
  .block-insider__stage { padding-top: 0; }
  .block-insider__vlabel { display: none; }
}
@media (max-width:768px) {
  .block-insider__media { min-height: 38vh; min-height: 38svh; }
}
@media (max-width:520px) {
  .block-insider__role::after { display: none; }
}

/* ---------- 31. Блок 09 «Результаты оптимизации» — скрол-стейдж:
   ліва (червона) половина — метрики входу → 2 місяці, права (чорна) —
   ключові зміни в системі юніта, кожну «прорізає» лазер.
   Секція пінується, порядок появи рахує initFirstres (main.js) ---------- */

.firstres {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  min-height: 100vh;
  min-height: 100svh; /* стабільна висота під пін — не «стрибає» від адресного рядка */
  overflow: clip;
  padding: 0;
  text-transform: uppercase; /* весь текст блоку — капсом */
}

/* Ліва половина — червона (свідомий виняток із «без червоних фонів», як блок 010 «Голоса»),
   права — чорна (редакторський розворот, як блок 002). Токени переозначені локально,
   щоб текст/чіпи/акцент лишались контрастними на червоному */
.firstres__left {
  --text-color: #f6f6f6;
  --text-muted: #f6f6f6b3;
  --text-dim: #f6f6f680;
  --chip-bg: #171516;
  --chip-text: #f6f6f6;
  --bg-color: #b40707; /* локальна темніша "поверхня" — для fr-card mix і full-btn */
  --border-color: #f6f6f640;
  --line-color: #f6f6f666;
  --primary-color: #171516; /* акцент на червоному фоні — чорний (у палітрі бренду) */
  /* Локальні відтінки поверхонь карток — з переозначених токенів вище */
  --fr-card:     color-mix(in srgb, var(--text-color) 8%,  var(--bg-color));
  --fr-card-2:   color-mix(in srgb, var(--text-color) 14%, var(--bg-color));
  --fr-border:   color-mix(in srgb, var(--text-color) 18%, var(--bg-color));
  --fr-border-2: color-mix(in srgb, var(--text-color) 32%, var(--bg-color));
  background:
    radial-gradient(125% 95% at 25% 8%, var(--primary-hover) 0%, #e90000 40%, var(--primary-dark) 100%);
  color: var(--text-color);
  min-width: 0;
  overflow: hidden;
  padding: clamp(48px, 6vw, 96px) clamp(32px, 4vw, 72px);
  position: relative;
  z-index: 1;
}
/* дрібний чорний halftone поверх червоного — фірмова мікрографіка (як .voices__grain) */
.firstres__left::before {
  background-image: radial-gradient(circle, #000 1px, transparent 1.4px);
  background-size: 22px 22px;
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  opacity: .35;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.firstres__left > * { position: relative; z-index: 1; }
/* тонка розділова лінія між половинами */
.firstres__left::after {
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.35), transparent);
  bottom: 0;
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  z-index: 1;
}
@media (max-width:1024px) { .firstres__left::after { display: none; } }

.firstres__right {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 640px;
  padding: clamp(32px, 4vw, 72px);
  position: relative;
  z-index: 1;
}

/* Ліва колонка: картки + висновок + кнопка */
.firstres__col { display: flex; flex-direction: column; gap: 28px; margin-top: auto; }

.firstres__cards { display: flex; flex-direction: column; gap: 14px; }

/* Картка метрики — той самий характер, що .metrics__card (блоки 04/06) */
.firstres__card {
  background: linear-gradient(180deg, var(--fr-card-2), var(--fr-card));
  opacity: 0; /* показує initFirstres; у --static повертається одиниця */
  border: 1px solid var(--fr-border);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-color) 6%, transparent),
              0 14px 34px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  padding: 22px 24px 20px;
  position: relative;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.firstres__card::before {
  background: var(--fr-accent, var(--fr-border-2));
  border-radius: 3px;
  content: "";
  height: 2px;
  left: 18px;
  position: absolute;
  right: 18px;
  top: 0;
}
@media (hover:hover) and (pointer:fine) {
  .firstres__card:hover {
    border-color: var(--fr-border-2);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-color) 8%, transparent),
                0 0 0 1px color-mix(in srgb, var(--primary-color) 20%, transparent),
                0 18px 40px rgba(0,0,0,.35);
    transform: translateY(-3px);
  }
}
.firstres__card--profit {
  --fr-accent: var(--primary-color);
  border-color: color-mix(in srgb, var(--primary-color) 30%, var(--fr-border));
}

.firstres__label {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
}
.firstres__vals { align-items: baseline; display: flex; gap: 14px; }
.firstres__old {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: clamp(15px, 1.2vw, 18px);
}
.firstres__arrow { color: var(--text-dim); font-family: var(--font-mono); font-size: 14px; }
/* знак «приблизно» — дрібна моно-мікрографіка, а не частина великої цифри */
.firstres__val { align-items: baseline; display: inline-flex; gap: 5px; }
.firstres__approx {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}
.firstres__new {
  color: var(--text-color);
  font-family: var(--font-heading);
  font-size: clamp(26px, 2.4vw, 40px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
}
.firstres__new--red {
  color: var(--primary-color);
  text-shadow: 0 0 24px color-mix(in srgb, var(--primary-color) 45%, transparent);
}

.firstres__hint {
  align-items: center;
  color: color-mix(in srgb, var(--text-color) 82%, transparent);
  display: flex;
  font-family: var(--font-mono);
  font-size: 11px;
  gap: 12px;
  letter-spacing: .18em;
}
/* смужка з пробігаючим світлом — «стейдж ще не догортано» */
.firstres__hint-bar {
  background: color-mix(in srgb, var(--text-color) 45%, transparent);
  display: block;
  flex-shrink: 0;
  height: 1px;
  overflow: hidden;
  position: relative;
  width: 52px;
}
.firstres__hint-bar::after {
  animation: fr-sweep 1.8s linear infinite;
  background: var(--text-color);
  content: "";
  inset: 0;
  position: absolute;
  transform: translateX(-100%);
}
@keyframes fr-sweep { to { transform: translateX(100%); } }

/* Права колонка: список ключових змін, кожен рядок «прорізає» лазер.
   Червоне світло — підкладка під текстом (рендер рук прибрано разом
   із предикт-панеллю: правий бік цілком віддано під зміни в системі) */
.firstres__glow {
  background: radial-gradient(ellipse 72% 60% at 26% 56%,
    color-mix(in srgb, var(--primary-color) 22%, transparent), transparent 68%);
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.takes {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.4vh, 48px);
  max-width: 760px;
  position: relative;
  width: 100%;
  z-index: 1;
}
/* Шапка правої половини — навмисно дрібна моно-мікрографіка: великий
   заголовок тут конкурував із «Результаты оптимизации» лівої половини,
   а героєм блоку мають лишатись самі рядки змін */
.takes__head { display: flex; opacity: 0; }
.takes__title {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  gap: 14px;
  letter-spacing: .2em;
  line-height: 1.4;
}
/* коротка червона риска перед лейблом — той самий прийом, що в chip-підписах */
.takes__title::before {
  background: var(--primary-color);
  content: "";
  flex-shrink: 0;
  height: 1px;
  width: 28px;
}

.takes__list {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2vh, 30px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.takes__item { padding-bottom: 14px; position: relative; }
.takes__body { align-items: baseline; display: flex; gap: 16px; opacity: 0; }
.takes__idx {
  color: var(--primary-color);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  min-width: 38px;
}
.takes__text {
  font-family: var(--font-heading);
  font-size: clamp(15px, 1.35vw, 24px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
}

/* Лазер прорізається scaleX (initFirstres). Голівка променя сидить усередині
   лінії, тож у проміжних кадрах трохи вужча, а в кінцевому стані (scaleX:1) —
   рівне коло. Окремим елементом її довелось би рухати transform'ом у пікселях,
   а такі позиції ламаються на resize */
.takes__laser {
  background: linear-gradient(90deg, var(--primary-hover), var(--primary-color) 55%, transparent);
  bottom: 0;
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary-color) 62%, transparent),
              0 0 34px color-mix(in srgb, var(--primary-color) 38%, transparent);
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  transform: scaleX(0);
  transform-origin: left center;
}
.takes__laser::after {
  background: var(--text-color);
  border-radius: 50%;
  opacity: var(--head-op, 1); /* гасне, щойно лінія дорізана — initFirstres */
  box-shadow: 0 0 14px 4px color-mix(in srgb, var(--primary-color) 72%, transparent);
  content: "";
  height: 8px;
  position: absolute;
  right: -2px;
  top: -3px;
  width: 8px;
}

/* Fallback: без GSAP / reduced-motion / вузький екран — пін не вмикається,
   усе видиме одразу (клас ставить initFirstres) */
.firstres--static { min-height: 0; }
.firstres--static .firstres__card,
.firstres--static .takes__head,
.firstres--static .takes__body { opacity: 1; }
.firstres--static .takes__laser { transform: scaleX(1); }
.firstres--static .firstres__hint { display: none; }

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

@media (max-width:1024px) {
  .firstres { grid-template-columns: 1fr; min-height: 0; }
  .firstres__right { min-height: 0; padding-bottom: clamp(56px, 8vw, 96px); }
  .takes { max-width: none; }
}
@media (max-width:768px) {
  .firstres__card { padding: 18px 18px 16px; }
  .takes__idx { min-width: 32px; }
  .takes__item { padding-bottom: 12px; }
}

/* ---------- 32. Блок 09 «Система растит прибыль» — інтерактивний скрол-стейдж
   (реф TARDIS): червоні орб-сфери на напівпрозорій лінії, конвеєр вліво,
   активна сфера зростає до головної, її повний текст — на місці головної.
   Позиції орбів/масштаб/панелі кросфейдом рахує initSystemgrow (main.js).
   Fallback без GSAP / reduced-motion / mobile — модифікатор --static (список) ---------- */

.systemgrow {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh; /* стабільна висота — не «стрибає» від адресного рядка мобільного браузера */
  overflow: hidden;
  padding: 0;
  position: relative;
}

/* перспективна підлога (реф photo2) + м'яке червоне світло знизу */
.systemgrow__bg {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
  background:
    radial-gradient(120% 78% at 50% 122%,
      color-mix(in srgb, var(--primary-color) 15%, transparent), transparent 62%);
}
.systemgrow__bg::after {
  --grid-line: color-mix(in srgb, var(--primary-color) 30%, transparent);
  bottom: 0;
  content: '';
  height: 46%;
  left: -25%;
  right: -25%;
  opacity: .55;
  position: absolute;
  transform: perspective(520px) rotateX(62deg);
  transform-origin: bottom;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 66px 66px;
  -webkit-mask-image: linear-gradient(transparent, #000 85%);
  mask-image: linear-gradient(transparent, #000 85%);
}

.systemgrow__head {
  left: 0;
  padding-top: clamp(96px, 12vh, 150px);
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
}
.systemgrow__head .section-head { margin-bottom: 0; }
.systemgrow__heading {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.4vw, 52px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  margin: 22px 0 16px;
  max-width: 18ch;
  text-transform: uppercase;
}
.systemgrow__sub {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.55;
  margin: 0;
  max-width: 42ch;
  text-shadow: 0 2px 22px var(--bg-color), 0 0 40px var(--bg-color);
}

.systemgrow__stage {
  inset: 0;
  position: absolute;
  z-index: 2;
}

/* напівпрозора горизонтальна вісь */
.systemgrow__line {
  height: 1px;
  left: 0;
  opacity: .55;
  position: absolute;
  right: 0;
  top: 61%;
  z-index: 1;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--text-color) 42%, transparent) 10%,
    color-mix(in srgb, var(--text-color) 42%, transparent) 90%,
    transparent);
}

.systemgrow__rail {
  inset: 0;
  opacity: 0; /* JS проявляє після першого render */
  position: absolute;
  z-index: 2;
}

/* вузол — «точка» на осі; орб і заголовок JS центрує на ній */
.systemgrow__node {
  left: 0;
  position: absolute;
  top: 0;
  will-change: transform;
}
.systemgrow__orb {
  border-radius: 50%;
  height: 0; /* JS задає діаметр */
  left: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: 0;
  background: radial-gradient(circle at 50% 47%,
    #050505 0 13%,
    var(--primary-dark) 28%,
    var(--primary-color) 51%,
    var(--primary-hover) 64%,
    color-mix(in srgb, var(--primary-color) 20%, transparent) 74%,
    transparent 82%);
  box-shadow: 0 0 90px color-mix(in srgb, var(--primary-color) 40%, transparent);
}
.systemgrow__tag {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  left: 0;
  letter-spacing: .08em;
  line-height: 1.3;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 0; /* JS зсуває над орбом */
  transform: translate(-50%, -100%);
  width: 15ch;
}

/* панелі повного тексту, центровані на позиції головної сфери (mainX≈32%) */
.systemgrow__panels {
  height: 1px;
  left: 32%;
  position: absolute;
  top: 61%;
  transform: translate(-50%, -50%);
  width: min(460px, 82vw);
  z-index: 4;
}
/* Кросфейд веде CSS: JS лише ставить .is-on активній панелі. Текст має
   подвійний text-shadow, тому поканадрова зміна opacity з JS змушувала
   перерастеризовувати розмите тло — це й давало фризи в піні (див. initSystemgrow) */
.systemgrow__panel {
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  /* одна тінь малого радіуса замість колишніх двох (22px + 40px): дві великі
     розмиті тіні на кожній гліфі перерастеризовувались на кожному кадрі
     кросфейду й давали всі провали кадрів у піні. Контраст поверх орба тримає
     ::before-підкладка нижче, тінь лишається тільки як страховка по краях */
  text-shadow: 0 1px 8px var(--bg-color);
  top: 50%;
  transform: translateY(calc(-50% + 20px));
  transition: opacity .42s ease, transform .42s ease, visibility 0s linear .42s;
  visibility: hidden;
  will-change: opacity, transform;
}
.systemgrow__panel.is-on {
  opacity: 1;
  transform: translateY(-50%);
  transition: opacity .42s ease, transform .42s ease, visibility 0s;
  visibility: visible;
}
/* м'яка темна підкладка під текст — гарантує контраст поверх яскравого орба */
.systemgrow__panel::before {
  content: '';
  inset: -18% -14%;
  position: absolute;
  z-index: -1;
  background: radial-gradient(72% 64% at 44% 50%,
    color-mix(in srgb, var(--bg-color) 88%, transparent),
    color-mix(in srgb, var(--bg-color) 62%, transparent) 54%,
    transparent 76%);
}
.systemgrow__idx {
  color: var(--primary-color);
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  margin-bottom: 14px;
}
.systemgrow__title {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.04;
  margin: 0 0 14px;
  max-width: 16ch;
  text-transform: uppercase;
}
.systemgrow__text {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.62;
  margin: 0;
  max-width: 44ch;
}
.systemgrow__hl {
  color: #fff;
  font-weight: 700;
  text-shadow:
    0 0 4px var(--bg-color),
    0 0 20px var(--primary-hover),
    0 0 34px color-mix(in srgb, var(--primary-color) 70%, transparent);
}

.systemgrow__hud {
  align-items: flex-end;
  bottom: clamp(28px, 6vh, 64px);
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 0 clamp(20px, 5vw, 80px);
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 5;
}
.systemgrow__count,
.systemgrow__scroll {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.systemgrow__cur { color: var(--primary-color); }
.systemgrow__scroll span { animation: sg-bob 1.6s ease-in-out infinite; display: inline-block; }
@keyframes sg-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Fallback: список замість конвеєра (без GSAP / reduced-motion / mobile) */
/* Блок 009 у низькому вікні: пін лишається (поріг вимкнення 560px), але
   три картки метрик у стовпчик не влазять — нижня йшла за фолд. Тиснемо
   картки й заголовок. Межа тут і FIRSTRES_MQ у main.js мінятись разом */
@media (min-width: 1025px) and (max-height: 760px) {
  .firstres__col { gap: 18px; }
  .firstres__cards { gap: 10px; }
  .firstres__card { gap: 8px; padding: 14px 20px 13px; }
  .firstres__new { font-size: clamp(22px, 2vw, 32px); }
  /* базовий кегль тут 42px — значення нижче мають бути МЕНШИМИ за нього,
     інакше «ОПТИМИЗАЦИИ» вилазить за межу червоної половини */
  [data-block="009"] .section-title { font-size: clamp(26px, 2.5vw, 36px); }
}

/* Низьке вікно (ноутбук, браузер із панелями): стейдж лишається запіненим —
   поріг вимкнення 560px, — але шапка має віддати панелі інсайту вертикаль,
   інакше індекс [01] наїжджає на підзаголовок. Межа тут і SYSTEMGROW_MQ
   у main.js мають мінятись разом */
@media (min-width: 769px) and (max-height: 760px) {
  /* мінімум 88px, а не менше: хедер фіксований (~68px) і chip [010]
     підлазив під нього */
  .systemgrow__head { padding-top: clamp(88px, 11vh, 110px); }
  .systemgrow__heading { font-size: clamp(26px, 2.7vw, 40px); margin: 14px 0 10px; }
  .systemgrow__sub { font-size: 13px; }
}

.systemgrow--static { min-height: 0; }
.systemgrow--static .systemgrow__stage { inset: auto; position: static; }
.systemgrow--static .systemgrow__head { padding: clamp(96px, 12vh, 140px) 0 40px; position: static; }
.systemgrow--static .systemgrow__rail,
.systemgrow--static .systemgrow__line,
.systemgrow--static .systemgrow__hud { display: none; }
.systemgrow--static .systemgrow__panels {
  height: auto;
  left: auto;
  margin: 0 auto;
  max-width: 720px;
  padding: 0 clamp(20px, 5vw, 80px) clamp(60px, 10vh, 120px);
  position: static;
  transform: none;
  width: 100%;
}
.systemgrow--static .systemgrow__panel {
  margin-bottom: 48px;
  opacity: 1;
  position: static;
  text-shadow: none;
  transform: none;
  transition: none;
  visibility: visible;
  will-change: auto;
}
.systemgrow--static .systemgrow__text { max-width: none; }

@media (max-width:768px) {
  .systemgrow__title { font-size: clamp(22px, 6vw, 30px); }
}

/* ---------- 33. Блок 010 «Голоса» — три цитати на червоному, scroll-слайдер
     (pin+scrub+snap, initVoices). Чорний слайд у центрі: фото ~34% + цитата.
     Червоний фон — свідомий виняток із правила «без червоних фонів» на пряму
     вимогу користувача (пріоритет джерел, гайд розд. 20). Токени тільки з :root ---------- */
.voices {
  position: relative;
  overflow: hidden;
  color: #f6f6f6;
  background:
    radial-gradient(125% 95% at 50% 16%,
      var(--primary-hover) 0%, var(--primary-color) 36%, var(--primary-dark) 100%);
}
/* дрібний чорний halftone поверх червоного — фірмова «мікрографіка» */
.voices__grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .45; mix-blend-mode: multiply;
  background-image: radial-gradient(circle, #000 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.voices__watermark { color: #0000001f; z-index: 1; }

.voices__stage {
  position: relative; z-index: 2;
  min-height: 100vh;
  min-height: 100svh; /* стабільна висота — не «стрибає» від адресного рядка мобільного браузера */
  display: flex; flex-direction: column; justify-content: center;
  /* padding-top ніколи не менший за висоту фіксованого хедера + запас —
     інакше на природних точках скролу фото зверху ховається під блюром хедера */
  padding: clamp(112px, 9vh + 40px, 160px) 0 clamp(92px, 15vh, 170px);
}

/* дека: три слайди накладені в одну грід-комірку, crossfade через is-active */
.voices__deck {
  display: grid;
  width: min(1080px, 84vw);
  margin: 0 auto;
}
/* постійний фон картки — не блідне під час зміни слайдів */
.voices__cardbg {
  grid-area: 1 / 1;
  z-index: 0;
  background: var(--bg-color);
  border: 1px solid #ffffff14;
  box-shadow: 0 44px 130px -34px #000000b3, 0 0 0 1px #00000040;
}
.voices__slide {
  grid-area: 1 / 1;
  position: relative; z-index: 1;
  display: flex; align-items: stretch;
  min-height: clamp(360px, 55vh, 560px);
  min-height: clamp(360px, 55svh, 560px); /* стабільна висота — не «стрибає» від адресного рядка */
  pointer-events: none;
}
.voices__slide.is-active { z-index: 2; pointer-events: auto; }
/* фото — плавний crossfade; текст гасне швидше й з'являється із затримкою,
   тож дві різні цитати ніколи не читаються одна крізь одну */
.voices__media { opacity: 0; transition: opacity .5s ease; }
.voices__slide.is-active .voices__media { opacity: 1; }
.voices__body { opacity: 0; transition: opacity .2s ease; }
.voices__slide.is-active .voices__body { opacity: 1; transition: opacity .3s ease .18s; }

.voices__media {
  position: relative;
  flex: 0 0 34%;
  overflow: hidden;
  background: #050505;
}
.voices__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
  filter: grayscale(.12) contrast(1.04);
}
/* червона світлова кромка на стику фото й цитати */
.voices__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 58%, #d60e0e40 100%);
  mix-blend-mode: screen;
}

.voices__body {
  position: relative;
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: clamp(2px, .5vh, 8px);
  padding: clamp(28px, 4vw, 60px);
}
/* у потоці (не absolute) — однакова позиція й відступ до тексту
   на всіх цитатах незалежно від довжини, без накладання на перший рядок.
   Глиф лапки має великий порожній простір під собою — тягнемо текст під
   нього значно ближче (~.5 висоти гліфа), щоб не було «прірви» */
.voices__mark {
  font-family: var(--font-heading); font-weight: 800; line-height: 1;
  font-size: clamp(86px, 10vw, 150px);
  color: var(--primary-color); opacity: .45;
  margin: clamp(-24px, -3vh, -12px) 0 clamp(-52px, -5.5vh, -34px) clamp(-6px, -0.6vw, -2px);
  pointer-events: none;
}
.voices__text {
  position: relative; z-index: 1;
  margin: 0;
  display: flex; flex-direction: column; gap: .95em;
  font-family: var(--font-mono);
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.58; letter-spacing: .01em;
  color: var(--text-color);
  max-width: 48ch;
}
.voices__para { margin: 0; }
/* інверсний mark — біле на червоному, фірмове виділення (гайд 11) */
.voices__hl {
  color: #fff; background: var(--primary-color);
  padding: .04em .28em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.voices__cap { display: flex; flex-direction: column; gap: 6px; }
.voices__role {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim);
}
.voices__name {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(16px, 1.4vw, 22px);
  text-transform: uppercase; letter-spacing: -.01em; color: #fff;
}
.voices__cap .redacted { font-size: .82em; vertical-align: middle; }

/* навігація: ‹ стрілка ›  +  індикатор 01—03 (перемикання вручну) */
.voices__nav {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 34px);
  width: min(1080px, 84vw); margin: clamp(22px, 4vh, 40px) auto 0;
}
.voices__arrow {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff0d; border: 1px solid #ffffff33; color: #fff;
  font-family: var(--font-mono); font-size: 24px; line-height: 1;
  transition: background .15s, border-color .15s, transform .15s;
}
.voices__arrow:hover { background: var(--primary-color); border-color: var(--primary-color); }
.voices__arrow:active { transform: scale(.94); }
/* gap 30, а не 16: тап-зони ::before по 44px інакше перекрились би
   і палець між двома цифрами влучав би не в ту */
.voices__dots { display: flex; align-items: center; gap: 30px; }
.voices__dot {
  appearance: none; -webkit-appearance: none; background: none; border: 0;
  cursor: pointer; padding: 6px 0; position: relative;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  color: #ffffff73; transition: color .15s;
}
/* сама цифра — 17×26, замало для пальця. Прозора зона ::before добирає
   тап-таргет до 44×44, не зачіпаючи вигляд індикатора */
.voices__dot::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.voices__dot::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: #fff; transition: width .25s ease;
}
.voices__dot:hover { color: #fff; }
.voices__dot.is-active { color: #fff; }
.voices__dot.is-active::after { width: 100%; }

@media (max-width: 768px) {
  .voices__deck, .voices__nav { width: 100%; }
  .voices__slide { flex-direction: column; }
  .voices__media { flex: none; height: 300px; }
  /* при співвідношенні 300px висоти crop сильно більший, ніж на десктопі —
     22% зрізає волосся Слобоженка; тягнемо вище */
  .voices__slide[data-voice="0"] .voices__photo { object-position: 50% 8%; }
}
@media (prefers-reduced-motion: reduce) {
  .voices__media, .voices__body { transition: none; }
}

/* ---------- 34. Блок 008 «Куда пошли $100K» — плита суми, розсічена червоним
   лазерним розламом на 30/70, + другий поверх «что это меняет для баера» ---------- */

/* Плюс-halftone на фоні секції, затухає зверху вниз (реф користувача) —
   мова .fullpic-bg, колір продубльовано з --primary-color: data-URI не читає CSS-токени */
.distrib-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M26 17v18M17 26h18' stroke='%23e90000' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center top;
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0, transparent 82%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0, transparent 82%);
  opacity: .14;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
#distribution .g-container { position: relative; z-index: 1; }

.distrib__intro {
  color: var(--text-muted);
  font-size: 15px;
  letter-spacing: .015em;
  line-height: 1.75;
  margin-top: 20px;
  max-width: 640px;
}

/* --- плита $100,000, розсічена розламом --- */
.rift {
  /* --rift-slant — горизонтальний хід діагоналі за всю висоту плити,
     --rift-gap — зазор між половинами (у ньому й живе лазер зі світлом) */
  --rift-slant: 46px;
  --rift-gap: 30px;
  --rift-face: color-mix(in srgb, var(--text-color) 6%, var(--bg-color));
  --rift-face-2: color-mix(in srgb, var(--text-color) 3%, var(--bg-color));
  margin-top: 3.2rem;
}

.rift__total { align-items: baseline; display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.rift__total-sum {
  color: var(--text-color);
  font-family: var(--font-heading);
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
.rift__total-label {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rift__slabs {
  display: flex;
  gap: var(--rift-gap);
  position: relative;
}

/* червоне світло в зазорі: лежить ПІД плитами, тому видно лише в розломі */
.rift__slabs::before {
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
              color-mix(in srgb, var(--primary-color) 42%, transparent), transparent 72%);
  content: "";
  filter: blur(4px);
  height: 126%;
  left: 30%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  z-index: 0;
}

.rift__slab {
  border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
  position: relative;
  z-index: 1;
}
/* половини зрізані назустріч одна одній — зазор між гранями лишається однаковим
   по всій висоті (обидві грані мають однаковий нахил --rift-slant) */
.rift__slab--ops {
  background: linear-gradient(160deg, var(--rift-face), var(--rift-face-2));
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--rift-slant)) 100%, 0 100%);
  flex: 0 0 calc(30% - var(--rift-gap) / 2);
}
.rift__slab--fund {
  background:
    linear-gradient(98deg, color-mix(in srgb, var(--primary-color) 26%, transparent) 0%,
                    transparent 26%),
    linear-gradient(160deg, color-mix(in srgb, var(--primary-color) 9%, var(--bg-color)),
                    var(--rift-face-2));
  clip-path: polygon(var(--rift-slant) 0, 100% 0, 100% 100%, 0 100%);
  flex: 0 0 calc(70% - var(--rift-gap) / 2);
}

/* паддінги враховують зріз, щоб текст не потрапляв під діагональ;
   колонка + margin-top:auto на __out притискає підсумок до низу обох плит,
   бо flex розтягує нижчу половину під висоту вищої */
.rift__inner { display: flex; flex-direction: column; height: 100%; padding: 40px 38px 34px; }
.rift__slab--ops  .rift__inner { padding-right: calc(var(--rift-slant) + 30px); }
.rift__slab--fund .rift__inner { padding-left: calc(var(--rift-slant) + 34px); }

/* лазер у зазорі: паралелограм-смужка, що сама тримає нахил на будь-якій висоті
   (clip-path у відсотках → нахил не залежить від висоти плити) */
.rift__laser {
  background: linear-gradient(180deg,
              transparent 0, var(--primary-color) 9%, var(--primary-hover) 50%,
              var(--primary-color) 91%, transparent 100%);
  bottom: 0;
  clip-path: polygon(calc(100% - 2px) 0, 100% 0, 2px 100%, 0 100%);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--primary-color) 85%, transparent))
          drop-shadow(0 0 22px color-mix(in srgb, var(--primary-color) 55%, transparent));
  left: calc(30% - var(--rift-slant) / 2 - 1px);
  pointer-events: none;
  position: absolute;
  top: 0;
  width: calc(var(--rift-slant) + 2px);
  z-index: 2;
}

.rift__head { align-items: baseline; display: flex; gap: 14px; }
.rift__pct {
  color: var(--text-color);
  font-family: var(--font-heading);
  font-size: clamp(46px, 5.2vw, 84px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .9;
  white-space: nowrap;
}
.rift__sum {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .06em;
}
.rift__sum--red {
  color: var(--primary-color);
  text-shadow: 0 0 14px color-mix(in srgb, var(--primary-color) 60%, transparent);
}

.rift__name {
  color: var(--text-color);
  font-family: var(--font-heading);
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.08;
  margin-top: 22px;
  text-transform: uppercase;
}
.rift__desc {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  line-height: 1.7;
  margin-top: 10px;
  margin-bottom: 26px;
  max-width: 34ch;
}
.rift__desc:last-of-type { margin-bottom: 0; }
.rift__desc + .rift__desc { margin-top: 0; }

.rift__groups { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 18px; }
.rift__group {
  border: 1px solid color-mix(in srgb, var(--primary-color) 45%, transparent);
  color: color-mix(in srgb, var(--primary-color) 82%, var(--text-color));
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  padding: 5px 10px;
}

.rift__out {
  border-top: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  line-height: 1.6;
  margin-top: auto;
  padding-top: 16px;
  text-transform: uppercase;
}
.rift__out--red {
  border-top-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
  color: color-mix(in srgb, var(--primary-color) 85%, var(--text-color));
}

/* --- другий поверх: що це змінює для баєра --- */
.unlock { margin-top: clamp(48px, 5vw, 78px); }
.unlock__eyebrow {
  color: var(--text-dim);
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.unlock__list { display: flex; flex-direction: column; gap: 0; list-style: none; max-width: 1040px; }
.unlock__row {
  align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1.2fr); /* права колонка ширша — довші формулювання «стало» тримаються в один рядок */
  padding: 16px 0;
}
.unlock__row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent); }

.unlock__was {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 13px;
  justify-self: start; /* інакше грід-колонка розтягне елемент і риска піде далеко за текст */
  letter-spacing: .03em;
  position: relative;
  text-transform: uppercase;
}
/* риска-закреслення домальовується GSAP-ом через --strike (0→1), тому окремим псевдо,
   а не text-decoration; без JS fallback --strike = 1 і риска просто стоїть на місці */
.unlock__was::after {
  background: color-mix(in srgb, var(--primary-color) 70%, transparent);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: scaleX(var(--strike, 1));
  transform-origin: left center;
}
.unlock__arrow { color: var(--primary-color); font-family: var(--font-mono); font-size: 14px; }
.unlock__now {
  color: var(--text-color);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

@media (max-width:1024px) {
  .rift { --rift-slant: 34px; --rift-gap: 24px; }
  .rift__inner { padding: 32px 30px 28px; }
}

@media (max-width:768px) {
  /* на вузькому діагональ не читається — плити стають одна під одною,
     розлам перетворюється на горизонтальну лазерну грань */
  .rift__slabs { display: block; }
  .rift__slabs::before { display: none; }
  .rift__laser { display: none; }
  .rift__slab { clip-path: none; }
  .rift__slab--ops, .rift__slab--fund { flex: none; width: auto; }
  .rift__slab--fund {
    border-top: 2px solid var(--primary-color);
    box-shadow: 0 -10px 26px -12px color-mix(in srgb, var(--primary-color) 70%, transparent);
    margin-top: 22px;
  }
  .rift__slab--ops .rift__inner,
  .rift__slab--fund .rift__inner { padding: 26px 22px 24px; }

  .unlock__row { grid-template-columns: 1fr; gap: 8px; }
  .unlock__arrow { transform: rotate(90deg); width: 14px; }
}

/* ---------- 35. Блок 007 «Пересборка процессов» — низ блоку: кришка з
   лазерною лінією, під нею два факти в один ряд (аудит операційки + просадка).
   Гострі кути, кольори через color-mix від токенів світлої теми ---------- */

.rebuild-foot { margin-top: clamp(30px, 3.4vw, 54px); }

/* кришка: моно-лейбл + лазер до правого краю (як .fullpic__frame-head) */
.rebuild-foot__head {
  align-items: center;
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}
.rebuild-foot__label {
  color: var(--primary-color);
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* лінію малює GSAP (scaleX) — тому окремий елемент, не ::after */
.rebuild-foot__line {
  background: linear-gradient(90deg,
    var(--primary-color),
    color-mix(in srgb, var(--primary-hover) 45%, var(--text-color)) 50%,
    var(--primary-color));
  box-shadow: 0 0 12px var(--laser-color),
              0 0 30px color-mix(in srgb, var(--primary-color) 35%, transparent);
  flex: 1;
  height: 1px;
  transform-origin: left center;
}

/* ряд: аудит ширший за просадку — цифри тримають правий край */
.rebuild-foot__row {
  align-items: stretch;
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  grid-template-columns: 1.45fr 1fr;
}

/* Плашка операційного аудиту: лазерна планка ліворуч + моно-капс */
.kpi-note {
  background: color-mix(in srgb, var(--text-color) 4%, var(--bg-color));
  border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 24px 30px 26px 34px;
  position: relative;
}
.kpi-note::before {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary-color) 20%, transparent),
    var(--primary-color) 50%,
    color-mix(in srgb, var(--primary-color) 20%, transparent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--primary-color) 55%, transparent);
  content: '';
  inset: 0 auto 0 0;
  position: absolute;
  width: 2px;
}
.kpi-note__text {
  color: var(--text-color);
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.7;
  margin: 0;
  text-transform: uppercase;
}
/* два рядки: констатація -> що саме зробили з групами.
   Другий рядок притягнутий до першого коротким червоним конектором */
.kpi-note__line {
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}
.kpi-note__res {
  align-items: center;
  display: flex;
  gap: 12px;
}
/* конектор: коротка лазерна риска замість стрілки-гліфа */
.kpi-note__arrow {
  background: var(--primary-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary-color) 55%, transparent);
  flex: none;
  height: 2px;
  width: 22px;
}
/* друга половина фрази — на червоному тінті, як .metrics__mark;
   box-decoration-break: clone, щоб плашка коректно розривалась по рядках */
.kpi-note__mark {
  background: color-mix(in srgb, var(--primary-color) 18%, transparent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: color-mix(in srgb, var(--primary-color) 55%, var(--text-color));
  padding: 1px 7px;
}

@media (max-width:1024px) {
  .rebuild-foot__row { grid-template-columns: 1.2fr 1fr; }
  .kpi-note { padding: 20px 22px 22px 26px; }
  .kpi-note__text { font-size: 12.5px; }
}
@media (max-width:768px) {
  .rebuild-foot { margin-top: 34px; }
  .rebuild-foot__row { grid-template-columns: 1fr; gap: 16px; }
  .kpi-note__text { font-size: 12.5px; line-height: 1.75; }
}