/* ============================================================
   Nodera Group — base styles
   Референс-макет: 1920px, 12 колонок, margin 100px, gutter 0
   ============================================================ */

/* ---------- Fonts: e-Ukraine (не Head) ----------
   УВАГА: у проєкті лежать лише 4 файли — Light(300), Regular(400),
   Medium(500), Bold(700); варіативної осі в них немає. Текст футера
   позначено font-weight: 200 (UltraLight), але поки файла UltraLight
   немає, браузер підставляє найближчий доступний — Light(300).
   Щоб UltraLight реально ввімкнувся: покласти
   assets/fonts/e-Ukraine-UltraLight.woff2 і розкоментувати блок нижче.

@font-face {
  font-family: "e-Ukraine";
  src: url("../fonts/e-Ukraine-UltraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
*/
@font-face {
  font-family: "e-Ukraine";
  src: url("../fonts/e-Ukraine-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "e-Ukraine";
  src: url("../fonts/e-Ukraine-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "e-Ukraine";
  src: url("../fonts/e-Ukraine-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "e-Ukraine";
  src: url("../fonts/e-Ukraine-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Custom properties ---------- */
:root {
  --color-bg: #000000;
  --color-text: #ffffff;
  --color-accent-orange: #ff3914;
  --color-accent-green: #61e5dc;
  /* шейд фірмового зеленого для тексту на білому */
  --color-accent-green-dark: #17998f;

  --font-main: "e-Ukraine", system-ui, -apple-system, sans-serif;

  --container-max: 1920px;
  --margin: 100px;
  --plate-gap: 34px; /* відступ білих плашок від краю в'юпорта */

  --notch: 56px; /* діагональний зріз кутів секцій */

  --transition-fast: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  /* ---- Animation UI Kit: єдині криві та тайминги появи ---- */
  /* ease-out (power2.out): швидкий початок, плавне сповільнення */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  /* expo-out для roll-ефектів (hover тексту та стрілок) */
  --ease-roll: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-reveal: 0.65s var(--ease-out);
  --stagger: 0.08s; /* крок каскаду між рядками/елементами */
}

@media (max-width: 1680px) { :root { --margin: 80px; --plate-gap: 28px; } }
@media (max-width: 1512px) { :root { --margin: 72px; --plate-gap: 25px; } }
@media (max-width: 1400px) { :root { --margin: 64px; --plate-gap: 22px; } }
@media (max-width: 1024px) { :root { --margin: 40px; --plate-gap: 14px; --notch: 36px; } }
@media (max-width: 414px)  { :root { --margin: 20px; --plate-gap: 8px; --notch: 24px; } }
@media (max-width: 360px)  { :root { --margin: 16px; --plate-gap: 6px; } }

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  font-weight: 400;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Grid container (12 col, gutter 0) ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin);
  width: 100%;
}

/* доступний, але візуально схований текст (напр. h1 сторінки, коли за
   макетом заголовка на екрані немає) */
/* Цілі внутрішніх якорів: хедер зафіксований на 70px, тож без цього
   відступу перехід по #hash кладе початок секції рівно під нього.
   scroll-margin-top враховують і нативний перехід, і scrollIntoView
   з main.js, тож offset живе в одному місці. */
#about,
#offer,
#focus,
#criteria,
#start,
#values,
#expertise,
#team,
#jobs,
#contacts {
  scroll-margin-top: 90px; /* 70px хедер + 20px повітря */
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* примусовий перенос рядка лише на мобільному (≤767px); на ширших
   екранах не існує, тож текст переноситься природно. Пробіл у розмітці
   стоїть ПЕРЕД <br class="mbr">, щоб при display:none слова не злипались */
.mbr { display: none; }

@media (max-width: 767px) {
  .mbr { display: inline; }
}

/* ============================================================
   Header (fixed, ховається при скролі вниз)
   ============================================================ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: 70px;
  background: var(--color-bg);
  transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.header.is-hidden {
  transform: translateY(-100%);
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 13.6px; /* 16px - 15% */
  font-weight: 300;
}

.header__nav--right {
  justify-content: flex-end;
}

/* CTA стоїть скраю, трохи ближче до перемикача мов, ніж крок меню (32px) */
.header__nav--right .header__cta {
  margin-left: -8px;
}

.header__link {
  opacity: 0.9;
  transition: opacity var(--transition-fast);
}

/* :hover лише на пристроях зі справжнім курсором — на дотикових
   екранах браузер емулює :hover по тапу, і стан "залипає" */
@media (hover: hover) and (pointer: fine) {
  .header__link:hover {
    opacity: 1;
  }
}

/* ---------- Roll-hover: посимвольний ролик (розмітку будує main.js) ---------- */
.roll__char {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.roll__unit {
  display: inline-block;
  position: relative;
  transform: translateY(0);
  transition: transform 0.8s var(--ease-roll);
  transition-delay: calc(var(--i) * 0.01s);
}

/* точна копія літери одразу під оригіналом */
.roll__copy {
  position: absolute;
  left: 0;
  top: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .header__link:hover .roll__unit {
    transform: translateY(-100%);
  }
}

/* ---------- CTA хедера ----------
   Типографіка один в один з пунктами меню (13.6px / Light) і той самий
   посимвольний roll на hover — це просто «залита» версія того ж лінка.
   Висоту хедера не чіпає: 30px пігулка нижча за 70px рядок, і .header
   лишається фіксованим height: 70px. */
.header__cta {
  /* inline-block, а не inline-flex: у флексі .roll ставав флекс-елементом
     (block), тоді як у пунктах меню він інлайновий — далі все рахується
     інакше. Так внутрішній потік кнопки такий самий, як у лінка. */
  display: inline-block;
  /* Типографіка й міжрядковий — рівно ті, що в .header__nav. Власний
     line-height: 1 тут був причиною одразу двох дефектів: рядковий бокс
     дорівнював кеглю, тому обрізав нижні виносні ("у"), і копія літери
     лежала на 13.6px нижче замість 20.4px — через це текст, що їде вгору,
     не встигав сховатись під маскою .roll__char. Успадкований 20.4px
     повертає і повну висоту гліфів, і крок ролика як у меню. */
  font-size: 13.6px;
  font-weight: 300;
  /* 7px + рядковий бокс 20.4 + 7px + 2px рамки = 36.4px проти 31.6px
     раніше: рівно ті ~2px згори й знизу, які й були потрібні, щоб
     виносні не різались, без роздування кнопки */
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid #ffffff;
  background: #ffffff;
  color: var(--color-bg);
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  /* заливка йде в прозорість, лишається білий контур; текст стає білим
     і одночасно прокручується тим самим roll, що й у меню */
  .header__cta:hover {
    background: transparent;
    color: #ffffff;
  }

  .header__cta:hover .roll__unit {
    transform: translateY(-100%);
  }
}

.header__logo {
  display: block;
}

.header__logo img {
  display: block;
  /* 147x18 - 15% */
  width: 125px;
  height: 15.3px;
}

.header__lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.6px; /* 16px - 15% */
  font-weight: 300;
}

.header__lang-sep {
  opacity: 0.4;
}

.header__lang-link {
  opacity: 0.45;
  transition: opacity var(--transition-fast);
}

.header__lang-link.is-active {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .header__lang-link:hover {
    opacity: 1;
  }
}

/* ---------- Burger ---------- */
.header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
}

.header__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.header__burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
/* середня лінія не просто гасне, а ще й стягується в нуль по ширині:
   самої прозорості бракувало — на частині пристроїв від неї лишались
   помітні кінчики обабіч хрестика. Тривалість і крива ті самі. */
.header__burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.header__burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: var(--color-bg);
  padding-top: 120px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
  /* якщо пункти + контакти не вміщаються (напр. телефон у горизонталі) —
     меню прокручується, а не обрізає контакти */
  overflow-y: auto;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

/* min-height:100% дає колонці повну висоту меню — тоді блок контактів
   можна притиснути до низу через margin-top:auto */
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 100%;
  padding-bottom: clamp(28px, 5vh, 48px);
}

.mobile-menu__link {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 300;
  text-transform: uppercase;
  transition: color var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .mobile-menu__link:hover {
    color: var(--color-accent-green);
  }
}

.mobile-menu__lang {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  font-size: 18px;
}

/* Дві CTA-кнопки в меню — та сама пара, що на другому екрані.
   Розкладка повторює .intro-m__actions: стовпчик, зазор 16px, кнопка на
   всю ширину (базовий .btn розрахований на рядок і має flex-basis: 0). */
.mobile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}

.mobile-menu__actions .btn {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
}

/* ---- Контакти внизу меню (як у футері) ---- */
.mobile-menu__contacts {
  margin-top: auto; /* притискає блок до низу меню */
  padding-top: 32px;
}

.mobile-menu__socials {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.4vw, 26px);
}

/* пошта: та сама типографіка, що у футері; підкреслення показане одразу —
   меню відкривається лише на дотикових/вузьких екранах, де hover немає */
/* inline-block навмисно: посилання лишається завширшки з текст (щоб
   підкреслення не тягнулось на всю ширину), але вертикальні маргіни на
   ньому нарешті працюють — на inline вони ігноруються, і саме тому
   попередні 22px не давали жодного відступу. */
.mobile-menu__email {
  display: inline-block;
  align-self: flex-start;
  margin-top: 26.4px; /* +20% до закладених 22px; зазор між іконками не чіпаємо */
  font-size: clamp(16px, 1.15vw, 22px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: #ffffff;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

/* планшет і менше: пункти не влазять — ховаємо в бургер */
@media (max-width: 1024px) {
  .header__inner { grid-template-columns: auto 1fr auto; }
  .header__logo { justify-self: start; order: -1; }
  .header__nav--left,
  .header__nav--right { display: none; }
  .header__burger { display: flex; justify-self: end; }
}

/* ============================================================
   Hero — чорна плашка
   Вертикальний ритм: хедер 70 → 100 → H1 → 77 → статистика → 46
   ============================================================ */
.hero {
  position: relative;
  z-index: 1; /* плашка лежить поверх картинки другого екрана */
  padding-top: 170px; /* 70px хедер + 100px відступ */
  background: var(--color-bg);
  /* діагональний зріз правого нижнього кута */
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - 47px),
    calc(100% - 64px) 100%,
    0 100%
  );
}

.hero__title {
  width: 100%;
  font-weight: 400;
  /* Кегль рахується від ширини КОНТЕНТНОЇ колонки, а не від в'юпорта.
     Було clamp(26px, 7.4vw, 142px) — і це різало текст, бо 7.4vw росте
     рівно з в'юпортом, а доступна ширина це в'юпорт мінус поля, які
     стрибають на брейкпоінтах. Найгірший стик — 414/430px: поле йде з
     20px на 40px, контент падає з 374 до 350, а шрифт далі росте. Саме
     там (великі телефони, iPhone 17 Pro Max ~440px) рядок вилазив на
     30+px і зрізався, бо .hero__line має overflow: hidden.
     Нижня межа 26px була другою причиною: вужче за 351px вона тримала
     кегль, коли колонка вже не вміщала рядок.

     12.2 — виміряна ширина найдовшого рядка "Version of yourself." у
     цій гарнітурі: 12.0429px на кожен 1px кегля (Regular, uppercase,
     letter-spacing -0.04em) плюс ~1.5% запасу. Запас не косметичний:
     у рядку 19 міжбуквених проміжків, і рушій, який округлює
     letter-spacing до цілих пікселів, накопичує похибку більшу за
     кілька пікселів. 17px — поправка на смугу прокрутки, якої
     100vw не враховує. Якщо слова в data-words зміняться і нове буде
     довшим — дільник треба переміряти. */
  font-size: min(
    142px,
    calc((min(100vw, var(--container-max)) - 2 * var(--margin) - 17px) / 12.2)
  );
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
}

.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line-inner {
  display: inline-block;
  transform: translateY(110%);
  animation: hero-line-up 0.7s var(--ease-out) forwards;
}

/* другий рядок заголовка йде одразу за першим */
.hero__line--rotator .hero__line-inner {
  animation-delay: 0.09s;
}

@keyframes hero-line-up {
  to { transform: translateY(0); }
}

/* стан анімації зміни слова (керується з main.js) */
.hero__word {
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.55, 0.2);
}

/* після стартової анімації слово закріплюється в нульовій позиції;
   стани нижче перекривають це значення, бо оголошені пізніше */
.hero__word.is-settled {
  transform: translateY(0);
}

.hero__word.is-out {
  transform: translateY(-110%);
}

.hero__word.is-below {
  transition: none;
  transform: translateY(110%);
}

.hero__word.is-in {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(0);
}

.hero__stats {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-top: 77px;
  padding-bottom: 46px;
  font-size: 16.2px; /* 18px - 10% */
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .hero { padding-top: 140px; }
  .hero__stats { margin-top: 56px; font-size: 14.4px; }
}

@media (max-width: 767px) {
  .hero__stats {
    flex-direction: column;
    gap: 12px;
  }
}

/* ============================================================
   Screen 2 — intro / scroll sequence
   .seq — скрол-діапазон (висоту виставляє main.js),
   .intro — sticky-екран з canvas-послідовністю кадрів
   ============================================================ */
.seq {
  position: relative;
  /* фолбек без JS; реальна висота розраховується скриптом */
  height: 280vh;
}

/* ============================================================
   Intro Mobile/Tablet — окрема нестична структура для ≤1024px:
   сторіборд — звичайний блок зі своєю пропорцією, контент під ним
   ============================================================ */
.intro-m {
  display: none;
}

@media (max-width: 1024px) {
  .seq { display: none; }

  .intro-m {
    display: block;
    background: var(--color-bg);
  }

  .intro-m__stage {
    position: relative;
    width: 100%;
    /* height:0 + padding-bottom% — універсальний спосіб зафіксувати
       пропорцію 16:9, що працює й там, де aspect-ratio не підтримується
       (Safari <15); aspect-ratio нижче лише прогресивно уточнює те саме */
    height: 0;
    padding-bottom: 56.25%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #031514;
  }

  /* постер під canvas: те саме кадрування (cover), та сама пропорція —
     підміна на намальований кадр непомітна */
  .intro-m__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .intro-m__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  /* симетрія: відступ над текстом == відступ між текстом і кнопками */
  .intro-m__content {
    display: flex;
    flex-direction: column;
    padding-top: clamp(32px, 8vw, 56px);
    padding-bottom: clamp(48px, 10vw, 72px);
    gap: clamp(32px, 8vw, 56px);
  }

  .intro-m__text {
    font-size: clamp(22px, 5.6vw, 32px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 400;
  }

  .intro-m__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .intro-m__actions .btn {
    /* базовий .btn має flex:1 1 0 для рядкового напрямку (десктоп);
       тут напрямок column, і flex-basis:0 псував саме висоту кнопки —
       фіксуємо звичайний авто-розмір і повертаємо коректні пропорції */
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }
}

.intro {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #031514;
}

.intro__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* фолбек без JS: фінальний кадр послідовності */
  background: url("../img/intro/sequence-desktop/frame-14.webp") center / cover no-repeat;
}

.intro__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.intro__content {
  position: relative;
  z-index: 1;
  display: grid;
  /* minmax(0,1fr): інакше великий текст розтягує колонки ширше за 1/12 */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  row-gap: 48px;
  padding-block: clamp(56px, 6vw, 110px);
  /* фаза 3: появу керує main.js від scroll-прогресу (fade + translateY);
     без JS контент просто видимий */
  will-change: opacity, transform;
}

/* текст — 5 колонок зліва */
.intro__text {
  grid-column: 1 / 6;
  font-size: clamp(24px, 2.6vw, 50px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 400;
}

/* кнопки — 6 колонок справа */
.intro__actions {
  grid-column: 7 / 13;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---------- Buttons ----------
   Адаптивні: тягнуться на ширину своєї зони на всіх breakpoints */
.btn {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 372px; /* розмір з макета на 1920 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: clamp(92px, 7.24vw, 139px);
  /* фіксовані відступи тексту: 20px зліва, 16px знизу на всіх breakpoints */
  padding: 20px 20px 16px;
  font-size: 17.6px; /* 20px - 12% */
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* фіксоване скруглення, не масштабується разом з кнопкою */
  border-radius: 5px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* стрілка: roll-ефект як у тексту — оригінал їде по діагоналі
   вправо-вгору і ховається в масці, точна копія виїжджає
   з протилежного боку (зліва-знизу) */
.btn__arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 21px; /* 26px - 20% */
  height: 21px;
  overflow: hidden;
}

.btn__arrow-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.8s var(--ease-roll);
}

.btn__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.btn__arrow-copy {
  position: absolute;
  left: -100%;
  top: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover .btn__arrow-inner {
    transform: translate(100%, -100%);
  }
}

/* "Хочу в команду": фаска 31x33 зверху зліва (геометрія з макета).
   За замовчуванням — прозора з білою обводкою, на hover — залита
   білим (текст/стрілка стають чорними). Стики фаски та кути
   заокруглені r=5px: дуги апроксимовані проміжними точками полігона */
.btn--dark {
  background: transparent;
  color: var(--color-text);
  clip-path: polygon(
    36px 0,
    calc(100% - 5px) 0, calc(100% - 1.3px) 1.3px, 100% 5px,
    100% calc(100% - 5px), calc(100% - 1.3px) calc(100% - 1.3px), calc(100% - 5px) 100%,
    5px 100%, 1.3px calc(100% - 1.3px), 0 calc(100% - 5px),
    0 38px, 0.9px 33.3px, 3.4px 29.4px,
    27.6px 3.6px, 31.4px 0.9px
  );
}

/* суцільна обводка: один SVG-контур повторює всю форму без розривів,
   d-атрибут (для обох варіантів форми) перераховує main.js під
   фактичний розмір кнопки */
.btn__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

/* дефолт — обводка видима (outline), hover — ховається під залиттям */
.btn--dark .btn__border {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .btn--dark:not(:disabled):hover {
    background: #ffffff;
    color: var(--color-bg);
  }

  .btn--dark:not(:disabled):hover .btn__border {
    opacity: 0;
  }
}

/* "Хочу запітчити": дзеркальна фаска знизу справа. За замовчуванням —
   залита білим (інверсія відносно "Хочу в команду"), на hover —
   прозора з білою обводкою */
.btn--light {
  background: var(--color-text);
  color: var(--color-bg);
  clip-path: polygon(
    5px 0, calc(100% - 5px) 0, calc(100% - 1.3px) 1.3px, 100% 5px,
    100% calc(100% - 38px),
    calc(100% - 0.9px) calc(100% - 33.3px), calc(100% - 3.4px) calc(100% - 29.4px),
    calc(100% - 27.6px) calc(100% - 3.6px), calc(100% - 31.4px) calc(100% - 0.9px),
    calc(100% - 36px) 100%,
    5px 100%, 1.3px calc(100% - 1.3px), 0 calc(100% - 5px),
    0 5px, 1.3px 1.3px
  );
}

/* дефолт — обводки не видно (залите тло), hover — з'являється */
.btn--light .btn__border {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .btn--light:not(:disabled):hover {
    background: transparent;
    color: var(--color-text);
  }

  .btn--light:not(:disabled):hover .btn__border {
    opacity: 1;
  }
}

/* ---------- Каскадна поява контенту секвенції (фаза 3) ----------
   Клас .seq-armed додає main.js (без JS контент лишається видимим),
   .is-shown вмикається від scroll-прогресу; --d дає stagger */
.seq-item {
  transition:
    opacity var(--transition-reveal) var(--d, 0s),
    transform var(--transition-reveal) var(--d, 0s),
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.seq-armed .seq-item {
  opacity: 0;
  transform: translateY(44px);
}

.seq-armed.is-shown .seq-item {
  opacity: 1;
  transform: none;
}

@media (max-width: 1024px) {
  .intro__text { grid-column: 1 / 13; }
  .intro__actions { grid-column: 1 / 13; justify-content: flex-start; }
}

@media (max-width: 767px) {
  .btn { flex-basis: 100%; }
}

/* ============================================================
   About — біла плашка з відступом --plate-gap від країв в'юпорта
   ============================================================ */
.about {
  background: #ffffff;
  color: var(--color-bg);
  margin-inline: var(--plate-gap);
  padding-block: 90px; /* рівно 90px від краю плашки до контенту, зверху і знизу */
  /* фаски та кути заокруглені r=5px, як у кнопок
     (дуги апроксимовані проміжними точками полігона) */
  clip-path: polygon(
    calc(var(--notch) + 5px) 0,
    calc(100% - 5px) 0, calc(100% - 1.3px) 1.3px, 100% 5px,
    100% calc(100% - var(--notch) - 5px),
    calc(100% - 0.9px) calc(100% - var(--notch) - 0.4px),
    calc(100% - 3.5px) calc(100% - var(--notch) + 3.5px),
    calc(100% - var(--notch) + 3.5px) calc(100% - 3.5px),
    calc(100% - var(--notch) - 0.4px) calc(100% - 0.9px),
    calc(100% - var(--notch) - 5px) 100%,
    5px 100%, 1.3px calc(100% - 1.3px), 0 calc(100% - 5px),
    0 calc(var(--notch) + 5px),
    0.9px calc(var(--notch) + 0.4px),
    3.5px calc(var(--notch) - 3.5px),
    calc(var(--notch) - 3.5px) 3.5px,
    calc(var(--notch) + 0.4px) 0.9px
  );
}

/* компенсуємо відступ плашки, щоб контент лишався на глобальній сітці */
.about > .container {
  padding-inline: calc(var(--margin) - var(--plate-gap));
}

.about__grid {
  display: grid;
  /* minmax(0,1fr): інакше великий текст розтягує колонки ширше за 1/12 */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
}

/* заголовок — 5 колонок зліва */
.about__title {
  grid-column: 1 / 6;
  grid-row: 1;
  font-weight: 400;
  font-size: clamp(40px, 4.7vw, 90px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* текстовий блок — рівно 6 колонок (права половина сітки) */
.about__right {
  grid-column: 7 / 13;
  grid-row: 1 / 3;
}

/* ---------- Фото-слайдер: 3 колонки, зміна кожні 5с ---------- */
.about__photo {
  grid-column: 1 / 4;
  grid-row: 2;
  align-self: end;
  position: relative;
  width: 100%;
  margin-top: 64px;
}

.about__photo-frame {
  position: relative;
  /* фолбек для Safari <15 без підтримки aspect-ratio */
  height: 0;
  padding-bottom: 66.744%; /* 289 / 433 */
  aspect-ratio: 433 / 289; /* пропорції фото команди */
  overflow: hidden;
  /* зріз правого верхнього кута; фаска та кути заокруглені r=5px, як у кнопок */
  clip-path: polygon(
    5px 0,
    calc(100% - 31px) 0, calc(100% - 26.4px) 0.9px, calc(100% - 22.5px) 3.5px,
    calc(100% - 3.5px) 22.5px, calc(100% - 0.9px) 26.4px, 100% 31px,
    100% calc(100% - 5px), calc(100% - 1.3px) calc(100% - 1.3px), calc(100% - 5px) 100%,
    5px 100%, 1.3px calc(100% - 1.3px), 0 calc(100% - 5px),
    0 5px, 1.3px 1.3px
  );
}

.about__photo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.about__photo-frame img.is-active {
  opacity: 1;
}

/* червона лінія-індикатор: всередині контейнера картинки, впритул до
   її нижнього краю; заповнюється від краю до краю за 5с */
.about__photo-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--color-accent-orange);
  transform-origin: left center;
  transform: scaleX(0);
  animation: photo-progress 5s linear infinite;
}

@keyframes photo-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.about__lead {
  font-size: clamp(24px, 2.1vw, 40px);
  line-height: 1.2;
  font-weight: 500;
}

.accent-green {
  color: var(--color-accent-green-dark);
}

.about__body {
  max-width: 560px;
  margin-top: clamp(40px, 4vw, 80px);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  display: grid;
  gap: 24px;
}

.about__body strong {
  font-weight: 700;
}

/* Десктоп: фрейм слайдера трохи менший, щоб його нижній край став на
   одну лінію з текстовим блоком праворуч. Без цього фото звисає
   під текст і саме воно задає висоту другого рядка сітки.
   Зменшуємо ширину, а висота йде за нею через aspect-ratio: так
   пропорції фото й object-fit лишаються ті самі, без додаткової
   обрізки. Логіка слайдера й індикатор прогресу не зачіпаються. */
@media (min-width: 1025px) {
  .about__photo {
    width: 77%;
  }
}

@media (max-width: 1024px) {
  .about__title { grid-column: 1 / 13; }
  .about__right { grid-column: 1 / 13; grid-row: 2; margin-top: 56px; }
  .about__photo { grid-column: 1 / 7; grid-row: 3; margin-top: 48px; }
}

@media (max-width: 767px) {
  .about__photo { grid-column: 1 / 13; }

  .about {
    padding-block: 46px; /* мобільний відступ: 46px зверху і знизу */
  }
}

/* ============================================================
   Team — нескінченна горизонтальна стрічка портретних карток
   (той самий мінімалізм/сітка/типографіка, що в "Про нас")
   ============================================================ */
.team {
  padding-block: clamp(72px, 7vw, 140px);
}

/* заголовок — H2 у тій самій типографіці, що "Про нас", вирівняний
   вліво (як усі інші заголовки секцій) */
.team__title {
  margin-top: 60px;
  font-weight: 400;
  font-size: clamp(40px, 4.7vw, 90px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-align: left;
}

/* сцена обрізає стрічку по краях контентної колонки — без градієнтів
   на межах, стрічка займає всю доступну ширину контейнера */
.team__stage {
  position: relative;
  overflow: hidden;
  margin-top: clamp(40px, 4vw, 72px);
  touch-action: pan-y; /* вертикальний скрол сторінки лишається, драг — лише горизонтальний */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* смуга прокрутки не потрібна ніколи: на десктопі стрічку рухає JS, а
     там, де стрічка стає нативно прокручуваною (reduced-motion — типовий
     кейс на iPhone), свайп лишається, але сама смуга схована */
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* старий Edge/IE */
}

.team__stage::-webkit-scrollbar { /* Safari/Chrome, у т.ч. iOS */
  width: 0;
  height: 0;
  display: none;
}

.team__stage.is-dragging {
  cursor: grabbing;
}

/* Десктоп (>=1025px): обмежений драг замість нескінченної стрічки —
   клас вішає main.js. Ліве поле трека дорівнює полю контентної
   колонки, тож у нульовій позиції перша картка стає на ту саму
   вертикаль, що й заголовок секції. Сцена лишається full-bleed:
   праворуч картки, як і раніше, йдуть під край в'юпорта. */
.team__stage.is-bounded .team__track {
  padding-left: var(--team-safe-gutter, 0px);
}

/* картки вмістились у колонку — тягнути нікуди */
.team__stage.is-locked {
  cursor: auto;
}

.team__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 2vw, 32px);
  width: max-content;
  will-change: transform;
}

/* картка — портретна (трохи вища за ширину), той самий радіус 5px,
   що й у кнопок/білої плашки */
.team__card {
  flex: 0 0 auto;
  width: clamp(312px, 23.4vw, 437px); /* +30%, потім ще +20% */
}

.team__card-photo {
  position: relative;
  /* фолбек для Safari <15 без підтримки aspect-ratio */
  height: 0;
  padding-bottom: 125%; /* 5 / 4 */
  aspect-ratio: 4 / 5;
  border-radius: 5px;
  overflow: hidden;
  background: #111;
}

/* усі фото — в кольорі за замовчуванням (і назавжди там, де немає hover:
   планшет, мобайл, будь-який дотиковий екран) */
.team__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  filter: grayscale(0);
  transition: filter 0.45s var(--ease-out);
}

/* Лише для мишки: коли курсор на конкретній картці — решта плавно
   переходять у ч/б, а наведена лишається кольоровою. Умову тримає :has()
   на треку, щоб знебарвлення вмикалось саме від наведення на картку, а не
   від будь-якої точки стрічки (напр. проміжку між картками). Де :has()
   не підтримується — просто нічого не знебарвлюється. */
@media (hover: hover) and (pointer: fine) {
  .team__track:has(.team__card:hover) .team__card img {
    filter: grayscale(1);
  }

  /* специфічність навмисно вища за правило вище, інакше воно перемагало б */
  .team__track:has(.team__card:hover) .team__card:hover img {
    filter: grayscale(0);
  }
}

.team__card-label {
  margin-top: 20px;
  text-align: left;
}

/* ім'я і посада — на 15% більші (15->17.25 / 1->1.15vw / 18->20.7;
   12->13.8 / 0.75->0.8625vw / 14->16.1). Розмір картки не змінюється. */
.team__name {
  font-weight: 500;
  font-size: clamp(17.25px, 1.15vw, 20.7px);
  letter-spacing: -0.01em;
}

.team__role {
  margin-top: 4px;
  font-size: clamp(13.8px, 0.8625vw, 16.1px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   Our Pro-Values — 3 картки зі світними кутовими рамками
   ============================================================ */
.values {
  padding-block: clamp(72px, 7vw, 140px);
}

/* заголовок — та сама H2-типографіка, що в "Про нас" / команди */
.values__title {
  font-weight: 400;
  font-size: clamp(40px, 4.7vw, 90px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 40px);
  margin-top: clamp(40px, 4vw, 72px);
}

/* Акцент картки як анімовані змінні ----------------------------------
   background-image (градієнти) не транзиційований у браузерах, тому колір
   винесено в @property-змінні типу <color> — вони інтерполюються, і зміна
   на hover плавно перефарбовує ВСІ градієнти картки (тло + світна рамка)
   без дублювання шарів. inherits:true — щоб значення доходило й до
   ::before, який малює рамку. Три змінні = три рівні альфи з макета;
   структура, прозорість та інтенсивність градієнтів не змінюються,
   змінюється лише відтінок: #FF3914 -> фірмовий зелений #61E5DC.
   Якщо @property не підтримується — колір просто перемикається без
   анімації (усі кольори лишаються коректними). */
@property --vc-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 57, 20, 0.5);
}
@property --vc-tint {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 57, 20, 0.15);
}
@property --vc-fade {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 57, 20, 0);
}

.value-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 50px;
  border-radius: 10px;
  /* два оверлей-градієнти з макета */
  background:
    linear-gradient(147deg,
      var(--vc-fade) 0%,
      rgba(255, 255, 255, 0.06) 49.72%,
      var(--vc-fade) 100%),
    linear-gradient(148deg,
      var(--vc-fade) 0%,
      var(--vc-tint) 48.21%,
      var(--vc-fade) 99.29%);
}

/* Картки мають клас .reveal, який нижче у файлі задає власний transition
   для opacity/transform із затримкою каскаду. Тому колірні змінні не можна
   додати окремим правилом — воно б його перезаписало. Перелічуємо все в
   одному місці: поява лишається з тією ж кривою й затримкою (--d + --sd),
   а перефарбування на hover іде без затримки. Селектор навмисно
   специфічніший за .reveal, щоб виграти каскад. */
.values .value-card {
  transition:
    opacity var(--transition-reveal) calc(var(--d, 0s) + var(--sd, 0s)),
    transform var(--transition-reveal) calc(var(--d, 0s) + var(--sd, 0s)),
    --vc-glow 0.55s var(--ease-out) 0s,
    --vc-tint 0.55s var(--ease-out) 0s,
    --vc-fade 0.55s var(--ease-out) 0s;
}

/* hover: та сама композиція, лише червоні відтінки -> фірмовий зелений */
@media (hover: hover) and (pointer: fine) {
  .value-card:hover {
    --vc-glow: rgba(97, 229, 220, 0.5);
    --vc-tint: rgba(97, 229, 220, 0.15);
    --vc-fade: rgba(97, 229, 220, 0);
  }
}

/* світна рамка 1px: сяйво у двох діагональних кутах (лівий нижній
   та правий верхній), центри — рівно в центрах заокруглення кутів.
   Кожен кут — ДВА radial-шари один поверх одного (обидва на 50%
   прозорості):
   1) базовий, ширший (168px): #FF3914 від центру до 0 назовні;
   2) зверху, 70px: білий #FFF від центру до 0.
   Разом: білий гарячий центр -> помаранчеве сяйво -> прозоре.
   Кільце вирізається маскою: заливка мінус content-box. */
.value-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1px;
  background:
    /* білі гарячі центри (верхній шар, менший радіус) */
    radial-gradient(70px circle at 10px calc(100% - 10px),
      rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 100%),
    radial-gradient(70px circle at calc(100% - 10px) 10px,
      rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 100%),
    /* колірне сяйво (базовий шар, більший радіус) — червоне, на hover зелене */
    radial-gradient(168px circle at 10px calc(100% - 10px),
      var(--vc-glow), var(--vc-fade) 100%),
    radial-gradient(168px circle at calc(100% - 10px) 10px,
      var(--vc-glow), var(--vc-fade) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* середня картка — дзеркально по горизонталі:
   сяйво в лівому верхньому та правому нижньому кутах */
.value-card:nth-child(2)::before {
  background:
    radial-gradient(70px circle at 10px 10px,
      rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 100%),
    radial-gradient(70px circle at calc(100% - 10px) calc(100% - 10px),
      rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 100%),
    radial-gradient(168px circle at 10px 10px,
      var(--vc-glow), var(--vc-fade) 100%),
    radial-gradient(168px circle at calc(100% - 10px) calc(100% - 10px),
      var(--vc-glow), var(--vc-fade) 100%);
}

.value-card__icon {
  width: min(100%, 340px);
  height: auto;
}

/* текстовий блок — на всю ширину картки, вирівняний вліво */
.value-card__body {
  width: 100%;
}

.value-card__name {
  font-weight: 400;
  font-size: clamp(28px, 2.1vw, 40px);
  line-height: 1.1;
}

.value-card__text {
  margin-top: 12px;
  /* 320px — обмеження для вузької одноколонкової розкладки. На десктопі
     воно знімається нижче: там картка 543px, під текст лишається 443px,
     і кеп з'їдав 123px (28%) — заголовок тягнувся на всю ширину, а опис
     тулився у вужчу колонку під ним. */
  max-width: 320px;
  font-size: clamp(15px, 0.95vw, 18px);
  font-weight: 300; /* Light */
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8); /* білий з прозорістю 80% */
}

/* десктоп — опис займає всю контентну ширину картки, як і заголовок */
@media (min-width: 1025px) {
  .value-card__text {
    max-width: none;
  }
}

/* планшет/мобільний — картки в стовпчик */
@media (max-width: 1024px) {
  .values__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Meet the team — карткою є сама фотографія
   Ніяких рамок, тіней і підкладок: портрет на всю картку, той самий
   радіус 10px, що й у карток Pro-цінностей, підпис лежить прямо на фото.
   Сітка та відступи — ті самі значення, що в .values__grid.
   ============================================================ */
.team-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 40px);
  margin-top: clamp(40px, 4vw, 72px);
}

.member-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
}

/* фото = картка: заповнює її повністю.
   filter — під hover-знебарвлення (див. нижче), крива та сама, що в
   старій стрічці Meet the team */
.member-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  filter: grayscale(0);
  transition: filter 0.45s var(--ease-out);
}

/* Нижня третина картки — простий чорний градієнт 0% -> 60% зверху вниз.
   Градієнт живе на самому блоці підпису, а той тримає min-height: 1/3
   картки й притискає текст донизу. Тому смуга завжди рівно третина, а
   якщо довге ім'я лягло у два рядки — рівно стільки, щоб текст цілком
   лишався всередині градієнта. */
.member-card__body {
  position: absolute;
  inset: auto 0 0 0;
  min-height: 33.3333%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px, 2.2vw, 36px);
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 100%);
}

/* 30.8px / Regular у макеті 1920 (44px мінус 30%) — далі масштабується
   пропорційно ширині в'юпорта */
.member-card__name {
  font-weight: 400;
  font-size: clamp(16.8px, 1.603vw, 30.8px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* 18.2px / Light (26px мінус 30%); відступ від імені лишається 8.8px */
.member-card__role {
  margin-top: 8.8px;
  font-size: clamp(10.5px, 0.948vw, 18.2px);
  font-weight: 300; /* Light */
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}

/* Hover — точно та сама логіка, що в старій секції Meet the team:
   поки курсор на якійсь картці, решта фото плавно йдуть у ч/б, наведене
   лишається кольоровим. Умову тримає :has() на сітці, щоб знебарвлення
   вмикалося саме від картки, а не від проміжку між ними. Там, де :has()
   не підтримується або немає миші (тач), не знебарвлюється нічого. */
@media (hover: hover) and (pointer: fine) {
  .team-cards__grid:has(.member-card:hover) .member-card__photo {
    filter: grayscale(1);
  }

  /* специфічність навмисно вища за правило вище */
  .team-cards__grid:has(.member-card:hover) .member-card:hover .member-card__photo {
    filter: grayscale(0);
  }
}

/* планшет — 2 колонки, мобільний — одна; у стовпчик картка не
   розтягується на всю ширину, щоб портрет не ставав велетенським */
@media (max-width: 1024px) {
  .team-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .team-cards__grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .member-card {
    width: 100%;
    max-width: 420px;
  }
}

/* ============================================================
   Наші бізнеси — горизонтальна стрічка карток венчурів
   Сцена/трек повторюють Meet the team: full-bleed смуга, трек рухає
   JS через translate3d, картки не переносяться. Відмінність одна —
   тут стрічка нескінченна на всіх брейкпоінтах, а не лише до 1024px.
   ============================================================ */
.ventures {
  padding-block: clamp(72px, 7vw, 140px);
}

/* заголовок — та сама типографіка, що в "Про нас" і Meet the team */
.ventures__title {
  margin-top: 60px;
  font-weight: 400;
  font-size: clamp(40px, 4.7vw, 90px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-align: left;
}

.ventures__stage {
  position: relative;
  overflow: hidden;
  margin-top: clamp(40px, 4vw, 72px);
  touch-action: pan-y; /* вертикальний скрол сторінки лишається за сторінкою */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ventures__stage::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.ventures__stage.is-dragging {
  cursor: grabbing;
}

.ventures__track {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 2vw, 32px);
  width: max-content;
  will-change: transform;
  /* перша картка стає на ту саму вертикаль, що й заголовок, а сцена
     лишається full-bleed — тому праворуч видно край наступної картки.
     Коли в'юпорт ширший за контейнер, контейнер відцентровано, тож до
     поля додається половина надлишку. */
  padding-left: max(
    var(--margin),
    calc((100vw - var(--container-max)) / 2 + var(--margin))
  );
}

/* картка: 8 колонок із 12 контентної колонки, фіксована висота */
.venture-card {
  --vcol: calc(min(100vw, var(--container-max)) - 2 * var(--margin));
  --vcut: var(--notch); /* зріз правого верхнього кута, як у секційних плашок */
  flex: 0 0 auto;
  box-sizing: border-box;
  width: calc(var(--vcol) * 8 / 12);
  /* Висота йде за шириною в пропорції макета (1147x688 на 1920), а не
     фіксованим числом: інакше картка лишалась би 688px і на вужчих
     десктопах, де вона вже 741px завширшки — тобто майже квадратною.
     Це мінімум, а не стеля: align-items: stretch у треку вирівнює всі
     картки за найвищою, тож там, де контенту більше за пропорцію
     (вузький десктоп), картка просто виростає і нічого не обрізається. */
  height: auto;
  min-height: calc(var(--vcol) * 8 / 12 * 688 / 1147);
  padding: 80px;
  display: flex;
  flex-direction: column;
  color: var(--color-text);
  /* діагональ: нижня ліва точка темніша за верхню праву */
  background: linear-gradient(to top right, #121212, #212121);
  /* та сама фаска, що в рамці фото "Про нас": кут зрізано по діагоналі,
     стики заокруглені r=5px, як у кнопок */
  clip-path: polygon(
    5px 0,
    calc(100% - var(--vcut)) 0,
    calc(100% - var(--vcut) + 4.6px) 0.9px,
    calc(100% - var(--vcut) + 8.5px) 3.5px,
    calc(100% - 3.5px) calc(var(--vcut) - 8.5px),
    calc(100% - 0.9px) calc(var(--vcut) - 4.6px),
    100% var(--vcut),
    100% calc(100% - 5px), calc(100% - 1.3px) calc(100% - 1.3px), calc(100% - 5px) 100%,
    5px 100%, 1.3px calc(100% - 1.3px), 0 calc(100% - 5px),
    0 5px, 1.3px 1.3px
  );
}

/* рядок: назва + тег праворуч від неї */
.venture-card__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1vw, 20px);
  flex-wrap: wrap;
}

.venture-card__name {
  font-weight: 500;
  font-size: clamp(26px, 2.1vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.venture-card__tag {
  flex: 0 0 auto;
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: clamp(14px, 0.9vw, 17px);
  font-weight: 300;
  white-space: nowrap;
  color: var(--color-accent-green);
}

.venture-card__body {
  margin-top: clamp(24px, 2vw, 40px);
  display: grid;
  gap: clamp(14px, 1.1vw, 22px);
  max-width: 46em;
}

.venture-card__text {
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.venture-card__text strong {
  font-weight: 600;
  color: var(--color-text);
}

/* "Продукт:" — другорядний рядок, тому весь абзац разом із жирним
   лейблом іде на 60% непрозорості */
.venture-card__text--muted {
  opacity: 0.6;
}

/* margin-top: auto — той самий гнучкий простір, що виштовхує фаундерів
   до низу картки. Завдяки йому 80px паддінга лишаються однакові з усіх
   боків незалежно від того, скільки тексту в конкретній картці. */
.venture-card__founders {
  margin-top: auto;
  padding-top: clamp(24px, 2vw, 40px);
  display: flex;
  gap: clamp(16px, 1.4vw, 24px);
}

.venture-founder {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.2vw, 22px);
  /* у макеті плашка темніша за картку і зі скругленим прямокутником,
     а не пігулкою; 24px по колу дають ту саму висоту, що й там (~163px
     при фото 115px) */
  padding: 24px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.35);
}

.venture-founder__photo {
  flex: 0 0 auto;
  width: 115px;
  height: 115px;
  border-radius: 50%;
  object-fit: cover;
  background: #2a2a2a;
}

/* фолбек, поки портрета немає в репозиторії: плашка тримає ту саму
   форму й розмір, замість фото — ініціали */
.venture-founder__photo--empty {
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
}

.venture-founder__meta {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.venture-founder__label {
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
}

.venture-founder__link {
  font-size: clamp(15px, 1.05vw, 20px);
  font-weight: 500;
  color: var(--color-accent-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: text-decoration-thickness var(--transition-fast);
}

.venture-founder__link:hover {
  text-decoration-thickness: 2px;
}

/* планшет і мобайл: картка ближча до квадрата й ніколи не ширша за
   екран; тег стає над назвою; плашки фаундерів — у стовпчик */
@media (max-width: 1024px) {
  .venture-card {
    width: min(calc(100vw - 2 * var(--margin)), 560px);
    /* min-height, а не height: квадрат — це підлога, а не стеля, тож
       довгий текст розсуває картку, а не вилазить за фаску */
    height: auto;
    min-height: min(calc(100vw - 2 * var(--margin)), 560px);
    padding: clamp(28px, 6vw, 56px);
  }

  .venture-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .venture-card__tag {
    order: -1;
  }

  .venture-card__founders {
    flex-direction: column;
  }

  .venture-founder {
    padding: 16px;
    border-radius: 16px;
  }

  .venture-founder__photo {
    width: 84px;
    height: 84px;
  }

  .venture-founder__photo--empty {
    font-size: 26px;
  }
}

/* без руху: стрічку можна погортати руками (JS-контролер не стартує) */
@media (prefers-reduced-motion: reduce) {
  .ventures__stage {
    overflow-x: auto;
    cursor: auto;
    touch-action: auto;
  }
}

/* ============================================================
   Expertise — sticky-стек карток
   Картки лежать у потоці з відступом 20px; кожна прилипає по центру
   в'юпорта, і щойно вона зупинилась — наступна одразу наїжджає зверху.
   ============================================================ */
.exp {
  padding-block: clamp(72px, 7vw, 140px);
}

/* заголовок — H2 у тій самій типографіці, що "Про нас" та "Meet the team" */
.exp__title {
  max-width: 16ch;
  font-weight: 400;
  font-size: clamp(40px, 4.7vw, 90px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.exp__stack {
  margin-top: clamp(40px, 4vw, 72px);
}


/* картка — та сама форма, що біла плашка "Про нас":
   фаски у лівому верхньому та правому нижньому кутах, стики r=5px */
.exp-card {
  position: sticky;
  display: grid;
  /* без column-gap: половини картки = 1720/2, і контент правої половини
     стає точно на 7-му колонку глобальної сітки (як текст "Про нас") */
  grid-template-columns: 1fr 1fr;
  /* висота — лише від контенту: 70px над заголовком і 70px під описом */
  padding: 70px clamp(28px, 3.6vw, 70px);
  clip-path: polygon(
    calc(var(--notch) + 5px) 0,
    calc(100% - 5px) 0, calc(100% - 1.3px) 1.3px, 100% 5px,
    100% calc(100% - var(--notch) - 5px),
    calc(100% - 0.9px) calc(100% - var(--notch) - 0.4px),
    calc(100% - 3.5px) calc(100% - var(--notch) + 3.5px),
    calc(100% - var(--notch) + 3.5px) calc(100% - 3.5px),
    calc(100% - var(--notch) - 0.4px) calc(100% - 0.9px),
    calc(100% - var(--notch) - 5px) 100%,
    5px 100%, 1.3px calc(100% - 1.3px), 0 calc(100% - 5px),
    0 calc(var(--notch) + 5px),
    0.9px calc(var(--notch) + 0.4px),
    3.5px calc(var(--notch) - 3.5px),
    calc(var(--notch) - 3.5px) 3.5px,
    calc(var(--notch) + 0.4px) 0.9px
  );
}

/* fallback без JS — приблизний каскад "заголовок попередньої видно";
   точні позиції (верх картки = верх опису попередньої) та висоти слотів
   (одночасне відпускання всього стека) виставляє main.js -> layoutExpStack() */
.exp-slot:nth-child(1) .exp-card { top: calc(14vh + 0px); }
.exp-slot:nth-child(2) .exp-card { top: calc(14vh + 160px); }
.exp-slot:nth-child(3) .exp-card { top: calc(14vh + 320px); }
.exp-slot:nth-child(4) .exp-card { top: calc(14vh + 480px); }

.exp-slot + .exp-slot {
  margin-top: 20px;
}

.exp-card__num {
  font-size: 20px;
  font-weight: 300;
  color: var(--exp-accent, #ffffff);
}

.exp-card__name {
  font-weight: 300; /* Light */
  font-size: clamp(38px, 3.65vw, 70px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--exp-accent, #ffffff);
}

.exp-card__text {
  margin-top: 16px;
  max-width: 480px;
  font-size: clamp(14px, 0.95vw, 18px);
  font-weight: 300;
  line-height: 1.5;
}

/* кольорові теми карток */
.exp-card--1 {
  --exp-accent: #61e5dc;
  background: linear-gradient(100deg, #0e332f 0%, #1e564e 55%, #2a6b60 100%);
  color: rgba(255, 255, 255, 0.8);
}

.exp-card--2 {
  --exp-accent: #ffffff;
  background: linear-gradient(100deg, #731705 0%, #d92b0b 55%, #e8380f 100%);
  color: rgba(255, 255, 255, 0.85);
}

.exp-card--3 {
  --exp-accent: #ff9e8c;
  background: linear-gradient(100deg, #310c05 0%, #57140a 55%, #6e1a0b 100%);
  color: rgba(255, 255, 255, 0.75);
}

.exp-card--4 {
  --exp-accent: #127f70;
  background: linear-gradient(100deg, #bfbfbf 0%, #ededed 45%, #ffffff 100%);
  color: #3a3a3a;
}

/* ---- Мобайл: без стекування ----
   Картки — звичайний вертикальний список: кожна повністю видима, наступна
   починається під нею, скрол стандартний. position:static знімає прилипання
   (разом із ним і фолбек-значення top вище), а висоти слотів більше не
   задаються — layoutExpStack() на ≤767px виходить, попередньо очистивши
   інлайн-стилі. Поява карток одна за одною лишається за штатним .reveal. */
@media (max-width: 767px) {
  .exp-card {
    position: static;
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .exp-slot {
    height: auto;
  }

  .exp-slot + .exp-slot {
    margin-top: clamp(20px, 5vw, 32px);
  }
}

/* Найвужчі екрани: примусові переноси .mbr не дають рядку "підсилюємо"
   (312px на 40px) розбитись, а контент на 320px — це лише 288px, тож
   заголовок виїжджав за вьюпорт. Прив'язуємо кегль до ширини екрана:
   11.2vw ≈ 35.8px на 320px (рядок 280px), а на 359px дає ті самі ~40px. */
@media (max-width: 359px) {
  .exp__title {
    font-size: 11.2vw;
  }
}

/* ============================================================
   Offer — що Nodera Group пропонує фаундерам
   H2 по центру; три картки-зображення з тими самими сіткою, розмірами
   й відступами, що в "Our Pro-Values". Позиція тексту — під графіку.
   ============================================================ */
.offer {
  padding-block: clamp(72px, 7vw, 140px);
}

/* заголовок — H2 сайту, по центру */
.offer__title {
  font-weight: 400;
  font-size: clamp(40px, 4.7vw, 90px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-align: center;
}

/* Найвужчі екрани: "ПРОПОНУЄМО" — 313px на 40px проти 288px контенту на
   320px, і переносити його нема куди. Той самий прийом, що в .exp__title:
   кегль від ширини екрана, який на 359px повертається до 40px.
   Оголошено саме ПІСЛЯ базового правила — медіазапит не додає
   специфічності, тож раніше воно просто програвало б йому. */
@media (max-width: 359px) {
  .offer__title {
    font-size: 11.2vw;
  }
}

/* та сама сітка/відступи, що в .values__grid */
.offer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 40px);
  margin-top: clamp(48px, 5.73vw, 110px); /* заголовок -> картки: 110px (1920) */
}

/* картка: фіксована портретна пропорція задає висоту. Сама картка —
   маска: ілюстрація позиціонується абсолютно на всю ширину картки й
   обрізається її краями (overflow: hidden). Текст лишається в потоці
   (flex), вирівнювання — під композицію кожної картки. */
.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  aspect-ratio: 818 / 1017;
  padding: 50px;
  border-radius: 10px;
  overflow: hidden;
  color: var(--color-text);
}

/* Equity — текст унизу; Back office — текст угорі; Чесна компенсація —
   заголовок угорі, опис унизу (ілюстрація по центру між ними) */
.offer-card--equity { justify-content: flex-end; }
.offer-card--backoffice { justify-content: flex-start; }
.offer-card--comp { justify-content: space-between; }

/* Чесна компенсація — суцільний білий фон (без фонового зображення) */
.offer-card--comp {
  background: #ffffff;
}

/* фон картки — тло-градієнт; може кадруватись (cover) */
.offer-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* ілюстрація: оригінальний PNG у власних пропорціях (height: auto),
   розтягнутий на всю ширину картки — від лівого до правого краю, без
   горизонтальних відступів і без обгортки/маски. Абсолютне позиціювання
   (left/right: 0) ігнорує текстовий паддінг; краї картки обрізають те,
   що виходить за межі. */
.offer-card__ill {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-width: none; /* перекриває глобальний img{max-width:100%} */
}

/* Equity — прив'язка до верху; ~20% зображення виходить за верхній край */
.offer-card--equity .offer-card__ill {
  top: 0;
  transform: translateY(-20%);
}

/* Back office — прив'язка до низу; ілюстрація на ~30% більша (width 130%),
   відцентрована по горизонталі, надлишок обрізає картка. translateY
   підібрано так, щоб низ ключів лишився на тій самій позиції, що й до
   збільшення. */
.offer-card--backoffice .offer-card__ill {
  width: 130%;
  left: 50%;
  right: auto;
  bottom: 0;
  transform: translate(-50%, 18%);
}

/* Чесна компенсація — по центру, на всю ширину впритул до країв; +2px
   за кожен край, щоб гарантовано не лишалось бічних щілин (картка ріже
   надлишок). */
.offer-card--comp .offer-card__ill {
  top: 50%;
  left: -2px;
  right: auto;
  width: calc(100% + 4px);
  transform: translateY(calc(-50% + 20px)); /* трохи нижче центру */
}

/* текст — над ілюстрацією у стеку */
.offer-card__body,
.offer-card__name,
.offer-card__text {
  position: relative;
  z-index: 2;
}

.offer-card__name {
  font-weight: 500; /* Medium */
  font-size: clamp(30px, 2.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* опис — та сама типографіка, що в картках "Our Pro-Values" */
.offer-card__text {
  font-size: clamp(15px, 0.95vw, 18px);
  font-weight: 300; /* Light */
  line-height: 1.2; /* 120% */
  color: rgba(255, 255, 255, 0.8);
}

/* у блоці (Equity, Back office) опис під заголовком */
.offer-card__body .offer-card__text {
  margin-top: 16px;
}

/* картка на світлому фото (монети) — темний текст */
.offer-card--light .offer-card__name {
  color: #000000;
}

.offer-card--light .offer-card__text {
  color: rgba(0, 0, 0, 0.8);
}

/* планшет/мобільний — один стовпчик на всю ширину, як у "Our Pro-Values".
   На планшеті картка широка (~620px), тож портретний aspect-ratio дає
   достатню висоту для ілюстрації. */
@media (max-width: 1024px) {
  .offer__grid {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin-inline: auto;
  }
}

/* планшет — картка була майже квадратною (0.80). Робимо її помітно
   вертикальнішою (3/4) і збільшуємо типографіку на ~15%: заголовок
   30->34.5px, опис 15->17.25px (базові clamp'и на планшеті стоять на
   своїх мінімумах, тому задаємо явні значення). */
@media (min-width: 768px) and (max-width: 1024px) {
  .offer-card {
    aspect-ratio: 3 / 4;
  }

  .offer-card__name {
    font-size: 34.5px;
  }

  .offer-card__text {
    font-size: 17.25px;
  }
}

/* вузький мобільний — картка стає вузькою, тож портретний aspect-ratio
   лишав би ілюстрації надто мало висоти (текст + паддінг з'їдають майже
   все). Задаємо висоту через min-height і зменшуємо паддінг, щоб слот під
   ілюстрацію мав реальний вертикальний простір.

   Висоти нижче підібрані так, щоб порожній простір між ілюстрацією та
   текстом зменшився рівно вдвічі (був 560px на всіх картках):
     equity      — просвіт 168 -> 84px  (560 - 84  = 476)
     back office — просвіт 103 -> 51px  (560 - 52  = 508)
     компенсація — сума просвітів 138 -> 69px (560 - 69 = 491) */
@media (max-width: 767px) {
  .offer-card {
    aspect-ratio: auto;
    min-height: 560px;
    padding: 32px;
  }

  .offer-card--equity { min-height: 476px; }
  .offer-card--backoffice { min-height: 508px; }
  .offer-card--comp { min-height: 491px; }

  /* у картки "Чесна компенсація" просвіти з двох боків ілюстрації різні
     (вона зсунута нижче центру), тож на меншій висоті зсув 20px з'їдав би
     майже весь нижній просвіт. Пропорційно зменшуємо його до 8.5px —
     тоді обидва просвіти зменшуються рівно вдвічі: 92->46 і 46->23 */
  .offer-card--comp .offer-card__ill {
    transform: translateY(calc(-50% + 8.5px));
  }
}

/* ---------- "Детальніше" на картці Back office ----------
   Це той самий компонент .btn/.btn--dark, що на першому екрані: та сама
   висота, паддінги, типографіка, стрілка й інверсія кольорів на hover.
   Відрізняється двома речами.

   1. Немає фаски. Картка вже має власне скруглення, і зріз кута на ній
      читався б як чужий елемент, тож clip-path знято, а border-radius
      лишився той самий, що в .btn (5px).
   2. Тло суцільно чорне замість прозорого. На першому екрані під кнопкою
      чорний фон сторінки, тут — фотографія картки, і прозорість дала б
      нечитабельний текст. Обводка при залитому тлі не потрібна.
   Стрілка лишається штатною: те саме місце (згори справа), той самий
   діагональний знак і той самий roll вправо-вгору, що й на першому
   екрані — жодних перевизначень. */
.offer-card--backoffice {
  /* -10% від висоти .btn: clamp(92px, 7.24vw, 139px) */
  --cta-h: clamp(82.8px, 6.516vw, 125.1px);
  /* Просвіт між карткою та кнопкою і між кнопкою та ключами — однаковий */
  --cta-gap: 40px;
}

.offer-card__cta {
  /* Фаска як у решти кнопок сайту, але дзеркальна по горизонталі: у
     .btn--dark зріз у лівому верхньому куті, тут — у правому верхньому.
     Геометрія та сама (36px по горизонталі, 38px по вертикалі), кути
     заокруглені r=5px тими ж проміжними точками. */
  clip-path: polygon(
    calc(100% - 36px) 0,
    5px 0, 1.3px 1.3px, 0 5px,
    0 calc(100% - 5px), 1.3px calc(100% - 1.3px), 5px 100%,
    calc(100% - 5px) 100%, calc(100% - 1.3px) calc(100% - 1.3px), 100% calc(100% - 5px),
    100% 38px, calc(100% - 0.9px) 33.3px, calc(100% - 3.4px) 29.4px,
    calc(100% - 27.6px) 3.6px, calc(100% - 31.4px) 0.9px
  );
  background: var(--color-bg);
  color: var(--color-text);
  height: var(--cta-h);
  /* .btn тримає лейбл унизу (justify-content: flex-end). Тут навпаки —
     лейбл угорі зліва, з тим самим відступом 16px, який у .btn був
     знизу; нижній відступ забирає собі стрілка. */
  justify-content: flex-start;
  padding: 16px 20px 20px;
}

/* стрілка переїжджає у нижній правий кут — відступ той самий, 14px */
.offer-card__cta .btn__arrow {
  top: auto;
  bottom: 14px;
  right: 14px;
}

/* знак розвернуто з "вправо-вгору" на "вправо-вниз": та сама діагональ,
   тільки в нижній кут */
.offer-card__cta .btn__arrow svg {
  transform: rotate(90deg);
}

/* копія чекає з протилежного боку від напрямку руху — тепер згори зліва */
.offer-card__cta .btn__arrow-copy {
  left: -100%;
  top: -100%;
}

/* Знак малюється stroke="currentColor", тож на hover, коли кнопка
   заливається білим і color стає чорним, стрілка чорніє разом із
   лейблом. Задаємо це явно, щоб зміна кольору йшла тією ж кривою, що й
   фон, а не стрибала. */
.offer-card__cta .btn__arrow svg path {
  transition: stroke var(--transition-fast);
}

/* тло залите, тож контурна обводка зайва */
.offer-card--backoffice .offer-card__cta .btn__border {
  display: none;
}

/* Десктоп: кнопка не бере участі в потоці й не міняє висоту картки —
   вона абсолютна, притиснута до нижньої safe zone і зсунута під нижній
   край. Картка має overflow: hidden, тож у спокої її не видно; на hover
   картки виїжджає вгору. Умова на справжній курсор лишає тач-екрани
   повністю поза цією поведінкою. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .offer-card__cta {
    position: absolute;
    /* -20% від safe zone картки (50px): кнопка ширша, але однаково
       відступає з трьох боків */
    left: var(--cta-gap);
    right: var(--cta-gap);
    bottom: var(--cta-gap);
    z-index: 2; /* над фоном (0) та ілюстрацією (1) */
    max-width: none;
    /* + нижній відступ, щоб піти рівно за край картки і не глибше */
    transform: translateY(calc(100% + var(--cta-gap)));
    transition: transform 0.45s var(--ease-out),
                background-color var(--transition-fast),
                color var(--transition-fast);
  }

  /* :focus-within, а не лише hover — кнопка лежить у таб-порядку, і доки
     вона схована під краєм картки, перехід на неї з клавіатури вів би в
     нікуди. Умова на картці, а не :focus-visible на самій кнопці: у
     Safari до 15.4 цього селектора немає зовсім, і фокус лишався б
     невидимим. */
  .offer-card--backoffice:hover .offer-card__cta,
  .offer-card--backoffice:focus-within .offer-card__cta {
    transform: translateY(0);
  }

  /* Базовий .btn котить стрілку вправо-вгору; тут діагональ дзеркальна,
     тож оригінал іде вправо-вниз, а копія заходить згори зліва.
     Селектор навмисно довший за базовий: .btn:not(:disabled):hover
     .btn__arrow-inner має специфічність (0,4,0), і коротший запис
     програвав би йому — стрілка котилася б угору попри це правило. */
  .offer-card--backoffice .offer-card__cta:not(:disabled):hover .btn__arrow-inner {
    transform: translate(100%, 100%);
  }

  /* Кнопка не просто з'являється — вона фізично підпихає вміст картки
     вгору рівно на ту висоту, яку сама займає. Фон при цьому стоїть на
     місці: рухаються лише ілюстрація й текстовий блок, і те, що не
     вміщається, ховається за верхнім краєм (у картки overflow: hidden).
     Ілюстрації зсув додається до її власного центрування, інакше воно
     злетіло б. Тривалість і крива — ті самі, що в кнопки, щоб рух читався
     як один жест. */
  .offer-card--backoffice .offer-card__body,
  .offer-card--backoffice .offer-card__ill {
    transition: transform 0.45s var(--ease-out);
  }

  /* Текст іде за верхній край на власну висоту плюс запас. Запас саме
     такий, щоб текст завжди випереджав ілюстрацію: інакше ключі
     наздоганяли б його просто під час руху. Прив'язка до власної висоти,
     а не фіксоване число, бо на вужчих десктопах рядки переносяться
     частіше і блок виростає з 153px до 211px. */
  .offer-card--backoffice:hover .offer-card__body,
  .offer-card--backoffice:focus-within .offer-card__body {
    transform: translateY(calc(-100% - 260px));
  }

  /* Ключі паркуються відносно КНОПКИ, а не на фіксовану відстань: їхні
     видимі краї стають рівно за --cta-gap до верху кнопки, тобто просвіт
     там такий самий, як між кнопкою і низом картки. Масштабу немає —
     ілюстрація лише зсувається. Фіксований зсув цього не давав
     — на вужчих десктопах картка нижча, ключі відлітали задалеко і низ
     картки лишався порожнім.

     Звідки формула: у ілюстрації bottom: 0, тобто без трансформу її низ
     лежить рівно на нижньому краї картки. Щоб опустити його на висоту
     кнопки плюс два просвіти, достатньо зсунути на -(2*gap + висота
     кнопки) — власна висота ілюстрації тут ні до чого.

     +12.1% — поправка на сам файл: у backoffice-ill знизу 82px прозорого
     поля з 679 (12.08%), тож видимі ключі закінчуються вище за межу
     боксу. Без цієї поправки вирівнювався б бокс, а на око просвіт
     виходив майже втричі більшим за нижній відступ картки. */
  .offer-card--backoffice:hover .offer-card__ill,
  .offer-card--backoffice:focus-within .offer-card__ill {
    transform: translate(-50%, calc(-2 * var(--cta-gap) - var(--cta-h) + 12.1%));
  }
}

/* Планшет і тач-екрани: жодного hover — кнопка стоїть у потоці внизу
   картки і видима завжди. Горизонтальні safe zones дає padding самої
   картки, тож тут нічого не задаємо. */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .offer-card__cta {
    position: relative;
    z-index: 2;
    margin-top: auto;
    max-width: none;
    transform: none;
    /* .btn має flex: 1 1 0 — це розрахунок на горизонтальний контейнер
       першого екрана. Картка ж вертикальна флекс-колонка, і там той самий
       grow розтягував кнопку на всю вільну висоту (305px замість 92).
       Фіксуємо власну висоту з clamp у .btn. */
    flex: 0 0 auto;
  }
}

/* Телефони — кнопки немає зовсім: на вузькій картці вона з'їдала надто
   багато висоти й тіснила ілюстрацію з текстом. display: none знімає її
   і з потоку, і з таб-порядку. Перехід до бек-офісу на телефоні лишається
   доступним через меню й далі по сторінці. */
@media (max-width: 767px) {
  .offer-card__cta {
    display: none;
  }
}

/* ============================================================
   Focus — центрована композиція: великий маніфест-заголовок,
   підпис і хмара pill-чіпів з інфраструктурою бек-офісу.
   Той самий скрол-механізм сяйва (--glow), що в "offer".
   ============================================================ */
.focus {
  position: relative;
  overflow: hidden;
  padding-block: clamp(96px, 11vw, 200px);
}

.focus__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    closest-side at 50% 44%,
    rgba(255, 100, 48, 0.62),
    rgba(220, 62, 24, 0.34) 38%,
    rgba(140, 34, 13, 0.15) 66%,
    rgba(140, 34, 13, 0) 100%
  );
  opacity: var(--glow, 1);
  pointer-events: none;
}

/* власне центрування, а не через .container — композиція не прив'язана
   до 12-колонкової сітки, лише до зручної читабельної ширини */
.focus__inner {
  position: relative;
  max-width: 1300px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
  text-align: center;
}

.focus__title {
  font-weight: 400;
  /* Верхня межа рахується від найдовшого РЯДКА заголовка. Після зміни
     переносів це "— ЗАКРИВАЄМО ВСІ" — 10.62 кегля завширшки (раніше
     обмежувало слово "ІНФРАСТРУКТУРНІ", 9.98). Контейнер на 1920 —
     1220px, тож 1220 / 10.75 (з невеликим запасом) = 113px. Більший
     кегль — і браузер відриває "ВСІ" в шостий рядок. */
  font-size: clamp(40px, 6.7vw, 113px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.focus__sub {
  /* 2.5× відступ від заголовка */
  margin-top: clamp(60px, 6vw, 90px);
  font-size: clamp(16px, 1.6vw, 30px);
  font-weight: 300;
  line-height: 1.2; /* 1.5 -20% */
  letter-spacing: -0.02em;
  color: #ffffff;
}

.focus__chips {
  margin-top: clamp(24px, 2.4vw, 36px);
  --chip-gap: 12.8px; /* 16px -20% */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--chip-gap);
}

.focus__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--chip-gap);
}

/* пара «іконка + тег» як єдиний нерозривний елемент: на планшеті/
   мобайлі іконка ніколи не відривається на власний рядок */
.chip-group {
  display: inline-flex;
  align-items: center;
  gap: var(--chip-gap);
}

/* десктоп: розмір тега на 20% менший (h 62->49.6, pad 19.1->15.28,
   font 24->19.2, іконка 62->49.6); текст Regular */
.chip {
  display: inline-flex;
  align-items: center;
  height: 49.6px;
  padding-inline: 15.28px;
  border: 1px solid var(--color-accent-green);
  border-radius: 999px;
  font-size: 19.2px;
  font-weight: 400;
  color: var(--color-accent-green);
  white-space: nowrap;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

/* коло для іконок — та сама висота, що в текстовому тезі.
   .chip.chip--icon (специфічність 0,2,0) виграє в мобільного
   .chip { padding-inline } — інакше паддінг схлопує svg у 0 ширину */
.chip.chip--icon {
  width: 49.6px;
  height: 49.6px;
  padding: 0;
  justify-content: center;
  color: var(--color-accent-green);
}

.chip--icon svg {
  width: 42%;
  height: 42%;
  transition: fill 0.3s var(--ease-out);
}

/* ---- Hover: біла обводка/текст/іконка, тримається 3с після виходу
   курсора (клас is-hot керується з main.js) ---- */
@media (hover: hover) and (pointer: fine) {
  .chip.is-hot {
    border-color: #ffffff;
    color: #ffffff;
  }

  .chip--icon.is-hot svg path {
    fill: #ffffff;
  }

  /* текстовий roll-hover, той самий що в меню хедера */
  .chip:hover .roll__unit {
    transform: translateY(-100%);
  }

  /* ---- Іконки-теги: повільне безкінечне обертання, кожна у свій бік ---- */
  .chip--spin-cw svg {
    animation: chip-spin-cw 18s linear infinite;
    transform-origin: 50% 50%;
  }

  .chip--spin-ccw svg {
    animation: chip-spin-ccw 22s linear infinite;
    transform-origin: 50% 50%;
  }
}

@keyframes chip-spin-cw {
  to { transform: rotate(360deg); }
}

@keyframes chip-spin-ccw {
  to { transform: rotate(-360deg); }
}

/* планшет/мобайл: усі теги в одному потоці (рядки розпускаються через
   display:contents), безперервне заповнення = рівний баланс без
   поодиноких тегів у рядку */
@media (max-width: 1024px) {
  .focus__chips {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    --chip-gap: 14px;
  }

  .focus__row {
    display: contents;
  }

  /* Engineering-група — у середину потоку (ряд 2 після неї); при
     менших розмірах тегів вона пакується в один ряд із наступним тегом,
     тож жоден ряд не лишається з одним тегом */
  .focus__row:nth-child(3) > * { order: 1; }
  .focus__row:nth-child(2) > * { order: 2; }
}

/* планшет: трохи менші теги + обмежена ширина потоку, щоб пакування
   було стабільним (3,2,2) на всьому діапазоні планшета, а не 3,3,1 на
   ширших екранах — жоден ряд не лишається з одним тегом */
@media (min-width: 768px) and (max-width: 1024px) {
  .focus__chips {
    max-width: 720px;
    margin-inline: auto;
  }

  .chip {
    height: 44px;
    padding-inline: 16px;
    font-size: 16px;
  }

  .chip.chip--icon {
    width: 44px;
    height: 44px;
  }

  /* заголовок-маніфест значно більший: 6.7vw -> 11.1vw (~1.65x). Верхню
     межу задає найдовший примусовий рядок "НА ОПЕРАЦІЙНІЙ": на 11.4vw він
     уже впритул до країв, тож лишаємо ~3% запасу під інші рушії шрифтів
     (метрики Safari трохи інші). Бічний паддінг зменшено до 20px, щоб
     віддати заголовку максимум ширини. */
  .focus__title {
    /* 8.8vw — та сама арифметика для планшета: на 1024 контенту 984px,
       984 / 10.75 = 91.5px, тобто 8.94vw; беремо 8.8vw, щоб і на 768
       (728px контенту) рядок лишався цілим */
    font-size: 8.8vw;
  }

  .focus__inner {
    padding-inline: 20px;
  }
}

@media (max-width: 767px) {
  /* заголовок на 20% менший (40->32, 6.7vw->5.36vw) */
  .focus__title {
    font-size: clamp(32px, 5.36vw, 60px);
  }

  /* Нижче 390px мінімум клемпа (32px) уже завеликий для рядка
     "— ЗАКРИВАЄМО ВСІ": на 360px контенту лише 320px, а рядок був би
     340px. 8.1vw дає 29.2px на 360 і 25.9px на 320. Оголошено тут,
     після базового правила, бо медіазапит специфічності не додає. */
  @media (max-width: 389px) {
    .focus__title {
      font-size: 8.1vw;
    }
  }

  /* відступ заголовок->текст на 20% менший (60->48) + менший кегль,
     щоб перший рядок вмістився і підпис ліг у 2 рядки замість 3 */
  .focus__sub {
    margin-top: 48px;
    font-size: 13px;
  }

  .focus__chips {
    --chip-gap: 12px;
  }

  /* чергування позиції іконки: у частини тегів іконка праворуч */
  .chip-group--rev {
    flex-direction: row-reverse;
  }


  /* на вузькому екрані найдовший тег переноситься в 2 рядки, а не
     вилазить за межі — тому висота авто, текст по центру */
  .chip {
    height: auto;
    min-height: 36px;
    padding-block: 7px;
    padding-inline: 16px;
    font-size: 14px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }

  .chip-group {
    max-width: 100%;
  }

  .chip.chip--icon {
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chip--spin-cw svg,
  .chip--spin-ccw svg {
    animation: none;
  }
}

/* ============================================================
   Chip tip — інформаційна бульбашка тегів back office
   Десктоп: з'являється від курсора (лівий нижній кут бульбашки — на
   вістрі курсора) і йде за ним. Тач: попап по центру з хрестиком.
   Один екземпляр на сторінку, вміст підставляється з .focus__tips.
   ============================================================ */

/* Обгортка нульового розміру: її позицію ставить JS через translate3d,
   а сама бульбашка висить у ній абсолютно, тож її лівий нижній кут
   збігається з точкою прив'язки. Так масштаб на появі не тягне за
   собою перерахунок позиції. */
.chip-tip {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 60;
  pointer-events: none;
  visibility: hidden;
}

.chip-tip.is-open { visibility: visible; }

.chip-tip__inner {
  position: absolute;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  /* ширина по контенту, але не ширша за екран */
  width: max-content;
  max-width: min(560px, calc(100vw - 2 * var(--plate-gap)));
  padding: 50px; /* 50px з усіх боків, як у макеті */
  background: #ffffff;
  color: var(--color-bg);
  text-align: left;
  /* та сама фаска, що в плашках секцій (.about / .exp-card), лише
     дрібніша під розмір бульбашки */
  --tip-notch: 28px;
  clip-path: polygon(
    calc(var(--tip-notch) + 5px) 0,
    calc(100% - 5px) 0, calc(100% - 1.3px) 1.3px, 100% 5px,
    100% calc(100% - var(--tip-notch) - 5px),
    calc(100% - 0.9px) calc(100% - var(--tip-notch) - 0.4px),
    calc(100% - 3.5px) calc(100% - var(--tip-notch) + 3.5px),
    calc(100% - var(--tip-notch) + 3.5px) calc(100% - 3.5px),
    calc(100% - var(--tip-notch) - 0.4px) calc(100% - 0.9px),
    calc(100% - var(--tip-notch) - 5px) 100%,
    5px 100%, 1.3px calc(100% - 1.3px), 0 calc(100% - 5px),
    0 calc(var(--tip-notch) + 5px),
    0.9px calc(var(--tip-notch) + 0.4px),
    3.5px calc(var(--tip-notch) - 3.5px),
    calc(var(--tip-notch) - 3.5px) 3.5px,
    calc(var(--tip-notch) + 0.4px) 0.9px
  );
  /* поява: різка й швидка, від точки прив'язки. scaleX менший за
     scaleY — бульбашка «вистрілює» вбік, а не просто роздувається */
  transform-origin: 0 100%;
  transform: scale(0.42, 0.7);
  opacity: 0;
  transition:
    transform 0.14s cubic-bezier(0.2, 0.9, 0.3, 1),
    opacity 0.1s linear;
}

.chip-tip.is-open .chip-tip__inner {
  transform: scale(1);
  opacity: 1;
}

/* не влазить угору — JS чіпляє бульбашку верхнім лівим кутом і вона
   росте вниз */
.chip-tip--below .chip-tip__inner {
  bottom: auto;
  top: 0;
  transform-origin: 0 0;
}

.chip-tip__title {
  margin: 0 0 18px;
  font-size: clamp(20px, 1.45vw, 28px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.chip-tip__text {
  margin: 0;
  font-size: clamp(15px, 1.05vw, 19px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.chip-tip__close { display: none; }

/* ---- Тач: попап по центру екрана з хрестиком ---- */
.chip-tip--modal {
  left: 50%;
  top: 50%;
  pointer-events: auto;
}

.chip-tip--modal .chip-tip__inner {
  left: 0;
  bottom: auto;
  top: 0;
  translate: -50% -50%;
  transform-origin: 50% 50%;
  transform: scale(0.86);
  /* удвічі довше за бульбашку на десктопі (0.14s/0.1s): попап читається
     як окрема картка, і в такому темпі його поява помітна, але лишається
     різкою — крива та сама, змінені лише тривалості */
  transition:
    transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
    opacity 0.2s linear;
}

.chip-tip--modal.is-open .chip-tip__inner { transform: scale(1); }

/* паддінг бульбашки лишається 50px з усіх боків — місце під хрестик
   резервує лише рядок заголовка, а не вся коробка */
.chip-tip--modal .chip-tip__title { padding-right: 44px; }

.chip-tip--modal .chip-tip__close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-bg);
  font: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

/* підкладка: тап поза бульбашкою закриває її */
.chip-tip__backdrop {
  position: fixed;
  inset: 0;
  z-index: 59;
  display: none;
  background: rgba(0, 0, 0, 0.4);
}

.chip-tip__backdrop.is-open { display: block; }

@media (max-width: 767px) {
  /* Бічні відступи за тією ж логікою, що в карток «Критеріїв»: інсет
     плашки від краю в'юпорта (--plate-gap) плюс 20px усередині неї.
     Раніше тут стояв лише --plate-gap (6-8px на мобайлі), і попап
     виходив майже на всю ширину екрана. */
  .chip-tip--modal .chip-tip__inner {
    max-width: calc(100vw - 2 * (var(--plate-gap) + 20px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .chip-tip__inner,
  .chip-tip--modal .chip-tip__inner { transition: none; transform: none; }
}

/* ============================================================
   Critеrія — "Критерії для відбору фаундерів"
   Той самий принцип, що в "Про нас": контейнер + 12-кол. сітка,
   --plate-gap відступ від країв в'юпорта. Ліворуч — портрет у нотч-
   формі, праворуч — запінений трек карток: секція фіксується (sticky),
   поки трек не проскролить усі картки, кожна по черзі в центр
   в'юпорта; точну дистанцію й висоту stage рахує main.js.
   ============================================================ */
.criteria {
  position: relative;
  /* height (довжина скролу-пінінгу) виставляє main.js */
}

/* запінена обгортка — тримає плашку на весь екран, поки трек скролиться */
.criteria__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: var(--plate-gap);
  box-sizing: border-box;
}

/* біла плашка = маска композиції: та сама нотч-форма й інсет, що в
   "Про нас"; усе всередині кліпається її межами */
.criteria__plate {
  position: relative;
  height: 100%;
  overflow: hidden;
  /* Тло плашки видно лише в один момент — поки не приїхало фото, яке
     накриває її цілком. Раніше тут був білий, і будь-яке округлення
     растру по нижньому краю читалось як біла смуга. Беремо темний тон
     самого кадру: навіть якщо шов десь і проступить, він не помітний. */
  background: #241413;
  clip-path: polygon(
    calc(var(--notch) + 5px) 0,
    calc(100% - 5px) 0, calc(100% - 1.3px) 1.3px, 100% 5px,
    100% calc(100% - var(--notch) - 5px),
    calc(100% - 0.9px) calc(100% - var(--notch) - 0.4px),
    calc(100% - 3.5px) calc(100% - var(--notch) + 3.5px),
    calc(100% - var(--notch) + 3.5px) calc(100% - 3.5px),
    calc(100% - var(--notch) - 0.4px) calc(100% - 0.9px),
    calc(100% - var(--notch) - 5px) 100%,
    5px 100%, 1.3px calc(100% - 1.3px), 0 calc(100% - 5px),
    0 calc(var(--notch) + 5px),
    0.9px calc(var(--notch) + 0.4px),
    3.5px calc(var(--notch) - 3.5px),
    calc(var(--notch) - 3.5px) 3.5px,
    calc(var(--notch) + 0.4px) 0.9px
  );
}

/* фото на весь фон плашки — кліпається її формою */
/* <picture> — лише обгортка для вибору кадру. display: contents прибирає
   її власний бокс, тож .criteria__bg лишається так само прямою дитиною
   плашки: і в запіненому режимі (position: absolute), і в статичному
   reduced-motion фолбеку (position: relative, display: block). Лейаут не
   змінюється ніде. */
.criteria__plate > picture {
  display: contents;
}

.criteria__bg {
  position: absolute;
  /* на 1px більше за плашку з усіх боків: плашка стоїть на дробовій
     позиції (sticky), а в кадру власний композитний шар, тож при
     округленні растру між ними прозирала біла смужка знизу — це фон
     плашки. Надлишок ховає overflow:hidden + clip-path, візуально нічого
     не змінюється. */
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  object-position: center;
  /* Кадр беремо як є, без CSS-фільтрів: він уже підготований у макеті.
     (Колишній filter: brightness(0.8) прибрано ще раніше — його
     доводилось перераховувати на кожному перемальовуванні секції.) */
  /* власний композитний шар: рух треку всередині плашки не тягне за
     собою перерастеризацію фонового кадру */
  transform: translateZ(0);
}

/* контент над фото; padding-inline тримає глобальну 12-кол. сітку,
   компенсуючи інсет плашки (як у "Про нас") */
.criteria .container {
  position: relative;
  height: 100%;
  padding-inline: calc(var(--margin) - var(--plate-gap));
}

.criteria__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
  height: 100%;
}

/* заголовок — перші 6 колонок, білий поверх фото, 120px від верху плашки */
.criteria__title {
  grid-column: 1 / 7;
  align-self: start;
  margin-top: 120px;
  color: #ffffff;
  font-weight: 400;
  font-size: clamp(40px, 4.7vw, 90px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* останні 6 колонок — вікно, в якому вертикально скролиться трек карток */
.criteria__cards {
  grid-column: 7 / 13;
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* абсолютний трек: ліва межа — центр макета (старт 7-ї колонки),
   права — на 120px від правого краю білої плашки; ширина картки
   флексить із в'юпортом, зберігаючи ці прив'язки. right рахується так:
   правий край колонки = W - margin, а треба W - plate_gap - 120, тож
   відступ справа = 120 - (margin - plate_gap). */
.criteria__track {
  position: absolute;
  top: 0;
  left: 0;
  right: calc(120px - var(--margin) + var(--plate-gap));
  will-change: transform;
}

/* заголовок у треку — лише для планшета/мобайла (десктоп має власний
   фіксований заголовок у лівій колонці) */
.criteria__track-title {
  display: none;
}

.criteria-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  /* 4 круглі вирізи по кутах (центр --cut від краю, радіус --cut-r).
     Десктоп: на 30% менші за первісні (r 14 -> 9.8), відступ від краю
     лишається 18px (центр 27.8). Вертикальний паддінг гарантує ≥50px
     просвіту між вирізом і контентом: 50 + центр + радіус, і масштаб. */
  --cut: 27.8px;
  --cut-r: 9.8px;
  /* Ширина розмиття краю вирізу. Дві стоп-точки в одній координаті
     ("#000 100%, transparent 100%") дають нульову смугу переходу — растру
     нічим згладжувати, і коло виходить драбинкою по цілих пікселях.
     Смуга шириною ~1 фізичний піксель, симетрична навколо радіуса, дає
     чесне антиаліасне покриття, а контур 50% лишається точно на --cut-r,
     тож діаметр і положення вирізу не змінюються. Токен перекривають
     медіа-запити нижче, щоб на HiDPI смуга не була ширшою за піксель. */
  --cut-aa: 1px;
  padding: clamp(calc(50px + var(--cut) + var(--cut-r)), 6.25vw, 120px)
           min(120px, 6.25vw);
  border-radius: 16px;
  background: #ffffff;
  color: var(--color-bg);
  mask-image:
    linear-gradient(#000 0 0),
    radial-gradient(circle var(--cut-r) at var(--cut) var(--cut), #000 calc(var(--cut-r) - var(--cut-aa) / 2), rgba(0, 0, 0, 0) calc(var(--cut-r) + var(--cut-aa) / 2)),
    radial-gradient(circle var(--cut-r) at calc(100% - var(--cut)) var(--cut), #000 calc(var(--cut-r) - var(--cut-aa) / 2), rgba(0, 0, 0, 0) calc(var(--cut-r) + var(--cut-aa) / 2)),
    radial-gradient(circle var(--cut-r) at calc(100% - var(--cut)) calc(100% - var(--cut)), #000 calc(var(--cut-r) - var(--cut-aa) / 2), rgba(0, 0, 0, 0) calc(var(--cut-r) + var(--cut-aa) / 2)),
    radial-gradient(circle var(--cut-r) at var(--cut) calc(100% - var(--cut)), #000 calc(var(--cut-r) - var(--cut-aa) / 2), rgba(0, 0, 0, 0) calc(var(--cut-r) + var(--cut-aa) / 2));
  /* один спільний composite-режим для всіх шарів (список по-шарово
     "add, exclude, exclude..." в Chromium не спрацьовує коректно) */
  mask-composite: exclude;
  -webkit-mask-image:
    linear-gradient(#000 0 0),
    radial-gradient(circle var(--cut-r) at var(--cut) var(--cut), #000 calc(var(--cut-r) - var(--cut-aa) / 2), rgba(0, 0, 0, 0) calc(var(--cut-r) + var(--cut-aa) / 2)),
    radial-gradient(circle var(--cut-r) at calc(100% - var(--cut)) var(--cut), #000 calc(var(--cut-r) - var(--cut-aa) / 2), rgba(0, 0, 0, 0) calc(var(--cut-r) + var(--cut-aa) / 2)),
    radial-gradient(circle var(--cut-r) at calc(100% - var(--cut)) calc(100% - var(--cut)), #000 calc(var(--cut-r) - var(--cut-aa) / 2), rgba(0, 0, 0, 0) calc(var(--cut-r) + var(--cut-aa) / 2)),
    radial-gradient(circle var(--cut-r) at var(--cut) calc(100% - var(--cut)), #000 calc(var(--cut-r) - var(--cut-aa) / 2), rgba(0, 0, 0, 0) calc(var(--cut-r) + var(--cut-aa) / 2));
  -webkit-mask-composite: xor;
}

/* Смуга згладжування тримається ~одного фізичного пікселя: у CSS-пікселях
   на щільних екранах вона мусить бути вужчою, інакше край читається
   мʼяким. Це не змінює ні геометрію вирізу, ні верстку. */
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  .criteria-card { --cut-aa: 0.6px; }
}

@media (min-resolution: 2.5dppx), (-webkit-min-device-pixel-ratio: 2.5) {
  .criteria-card { --cut-aa: 0.4px; }
}

.criteria-card + .criteria-card {
  margin-top: 80px;
}

/* 60px Regular на 1920, масштабується; letter-spacing -1.2px = -0.02em */
.criteria-card__name {
  font-weight: 400; /* Regular */
  font-size: min(60px, 3.125vw);
  line-height: 1; /* 100% */
  letter-spacing: -0.02em;
  color: #000000;
}

/* єдина система відступів: 40px між усіма блоками картки на 1920
   (заголовок -> опис -> наступний абзац -> примітка), масштабується */
.criteria-card > * + * {
  margin-top: min(40px, 2.08vw);
}

/* 28px Light на 1920, масштабується; letter-spacing -1.2px = -0.04em */
.criteria-card__text {
  font-size: min(28px, 1.4583vw);
  font-weight: 300;
  line-height: 1.2; /* 120% */
  letter-spacing: -0.04em;
  color: rgba(0, 0, 0, 0.8);
}

.criteria-card__note {
  color: rgba(0, 0, 0, 0.6);
  /* -30% від .criteria-card__text (28px / 1.4583vw). Без цього рядок
     рвався на три, і "законодавство" йшло окремим третім — тепер нотатка
     лягає у два на всій десктопній ширині.
     Планшет і мобайл не зачеплені: у медіа-запиті <=1024px нижче
     .criteria-card__text перекриває цей кегль своїм clamp(17px, 4vw,
     24px), а -30% від 17px були б нечитабельні. */
  font-size: min(19.6px, 1.0208vw);
}

.criteria-card__note em {
  font-style: italic;
  color: rgba(0, 0, 0, 0.85);
}

.criteria-card__text strong {
  font-weight: 700;
  color: #000000;
}

.criteria-card__list {
  display: grid;
  gap: min(16px, 0.83vw);
  font-size: min(28px, 1.4583vw);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: rgba(0, 0, 0, 0.8);
  list-style: none;
  padding-left: 0;
}

.criteria-card__list li {
  padding-left: 1.2em;
  position: relative;
}

.criteria-card__list li::before {
  content: "\2022";
  position: absolute;
  left: 0.2em;
  color: var(--color-accent-green-dark);
}

/* ---- Планшет/мобайл: як на десктопі (запінена плашка з фото-фоном),
   але заголовок не фіксований — він перший блок у треку й скролиться
   разом із картками. Плашка, пропорції й overlap ті самі, що в "Про нас".
   Картки майже на всю ширину плашки з боковим відступом 30px (планшет)
   / 20px (мобайл). Фото лишається фоном плашки й видно над заголовком
   та під останньою карткою — як на десктопі. */
@media (max-width: 1024px) {
  /* десктопний заголовок у лівій колонці ховаємо */
  .criteria__title { display: none; }

  /* контейнер без глобального grid-інсету — картки міряються від плашки */
  .criteria .container { padding-inline: 0; }

  /* картки на всю ширину плашки */
  .criteria__cards { grid-column: 1 / 13; }

  /* трек: одноколонковий, боковий відступ 30px (планшет) від плашки */
  .criteria__track {
    left: 30px;
    right: 30px;
  }

  /* 90px між картками — лише десктопне значення; тут повертаємо
     компактніший відступ */
  .criteria-card + .criteria-card {
    margin-top: 32px;
  }

  /* заголовок у треку — перший блок, білий, скролиться разом із картками */
  .criteria__track-title {
    display: block;
    margin-bottom: clamp(32px, 6vw, 64px);
    color: #ffffff;
    font-weight: 400;
    font-size: clamp(34px, 6vw, 64px);
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: uppercase;
  }

  /* вирізи на 10% менші за первісні (r 14 -> 12.6), відступ від краю 18px
     (центр 30.6); вертикальний паддінг гарантує ≥60px просвіту */
  .criteria-card {
    width: 100%;
    --cut: 30.6px;
    --cut-r: 12.6px;
    padding: calc(60px + var(--cut) + var(--cut-r)) clamp(28px, 6vw, 56px);
  }

  .criteria-card > * + * {
    margin-top: clamp(20px, 4vw, 40px);
  }

  .criteria-card__name {
    font-size: clamp(28px, 6vw, 44px);
  }

  .criteria-card__text,
  .criteria-card__list {
    font-size: clamp(17px, 4vw, 24px);
  }
}

/* мобайл — боковий відступ карток 20px від плашки */
@media (max-width: 767px) {
  .criteria__track {
    left: 20px;
    right: 20px;
  }
}

/* ---- prefers-reduced-motion: статичний фолбек без пінінгу ----
   фото банером зверху, далі заголовок і картки у звичайному потоці */
@media (prefers-reduced-motion: reduce) {
  .criteria { height: auto !important; }

  .criteria__pin {
    position: static;
    height: auto;
    padding: 0;
  }

  .criteria__plate {
    height: auto;
    overflow: visible;
    background: transparent;
    clip-path: none;
  }

  .criteria__bg {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 70vh;
    object-fit: cover;
    display: block;
  }

  .criteria .container {
    position: relative;
    height: auto;
    padding-inline: var(--margin);
  }

  .criteria__grid { display: block; }
  .criteria__title { display: none; }

  .criteria__cards {
    grid-column: auto;
    height: auto;
    overflow: visible;
    margin-top: clamp(40px, 7vw, 80px);
  }

  .criteria__track {
    position: static;
    left: auto;
    right: auto;
    width: min(600px, 100%);
    margin-inline: auto;
    transform: none !important;
  }

  .criteria__track-title {
    display: block;
    margin-bottom: clamp(32px, 6vw, 56px);
    color: #ffffff;
    font-weight: 400;
    font-size: clamp(34px, 6vw, 64px);
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: uppercase;
  }

  .criteria-card {
    width: 100%;
    --cut: 30.6px;
    --cut-r: 12.6px;
    padding: calc(60px + var(--cut) + var(--cut-r)) clamp(28px, 6vw, 56px);
  }

  .criteria-card > * + * {
    margin-top: clamp(20px, 4vw, 40px);
  }

  .criteria-card__name {
    font-size: clamp(28px, 6vw, 44px);
  }

  .criteria-card__text,
  .criteria-card__list {
    font-size: clamp(17px, 4vw, 24px);
  }
}

/* Найвужчі екрани: "підтверджений" на 28px — це 236px, а всередині картки
   на 320px доступно лише 212px, тож слово обрізалось (переносити його
   нікуди — це один токен). Нижче 360px кегль іде за шириною екрана:
   7.6vw ≈ 24.3px на 320px (слово 205px), і сходиться з 28px на 360px. */
@media (max-width: 359px) {
  .criteria-card__name {
    font-size: 7.6vw;
  }
}

/* ============================================================
   Scroll reveal — єдиний каскадний принцип появи:
   головний елемент першим, наступні наздоганяють через --d
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
  transition-delay: var(--d, 0s);
}

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

/* ---------- Під'їзд секції (легкий translateY + opacity),
   після якого стартує внутрішній каскад (+ --sd до затримок) ---------- */
.sect-in {
  --sd: 0.15s; /* зсув внутрішнього каскаду після старту секції */
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

/* ховаємо лише коли працює JS (main.js додає .js на <html>) */
html.js .sect-in:not(.in) {
  opacity: 0;
  transform: translateY(60px);
}

.reveal {
  transition-delay: calc(var(--d, 0s) + var(--sd, 0s));
}

/* ---------- Порядкова анімація багаторядкових текстів ----------
   main.js розбиває текст на слова (.w) і призначає кожному номер
   рядка --ln; рядки з'являються один за одним через --stagger */
.reveal[data-lines],
.seq-armed .seq-item[data-lines] {
  opacity: 1;
  transform: none;
}

[data-lines] .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.1em);
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
  transition-delay: calc(var(--d, 0s) + var(--sd, 0s) + var(--ln, 0) * var(--stagger));
}

.reveal[data-lines].is-visible .w,
.seq-armed.is-shown [data-lines] .w {
  opacity: 1;
  transform: none;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero__line-inner {
    transform: none;
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* без анімацій: секвенція статична, скрол-діапазон не розтягується */
  .seq {
    height: auto;
  }

  .intro {
    position: relative;
  }

  .intro__content,
  .seq-item,
  .sect-in,
  [data-lines] .w {
    opacity: 1 !important;
    transform: none !important;
  }

  .about__photo-progress {
    animation: none;
    transform: scaleX(1);
  }

  /* без руху: стрічку можна погортати руками (JS-контролер не стартує) */
  .team__stage {
    overflow-x: auto;
    cursor: auto;
    touch-action: auto;
  }
}

/* ============================================================
   Process — "Як розпочати співпрацю з Nodera Group?"
   Контент — звичайний потік зі штатними reveal (заголовок з по-рядковим
   ефектом як у .focus; сяйво проявляється разом із ним). Єдина кастомна
   анімація — руки: вони запінені по центру в'юпорта (sticky) і лише
   їдуть по горизонталі за шириною контенту (керує main.js). Пін триває,
   поки центр CTA не дійде до центра екрана (main.js виставляє нижній
   паддінг секції під цей момент). ≤1024px і reduced-motion — руки сховані,
   секція стає звичайним стеком. */
/* Reveal цієї секції — лише прозорість, без підйому на 60px.
   Руки всередині спираються на position:fixed, а будь-який transform на
   предку робить сам предок системою координат для fixed. Через це поки
   тривав reveal (0.7s), руки були приклеєні не до в'юпорта, а до секції,
   і в момент, коли transform ставав none, підстрибували на ~700px.
   Внутрішні елементи (заголовок, кроки, CTA) мають власні .reveal. */
html.js .process.sect-in:not(.in) {
  transform: none;
}

.process {
  position: relative;
  /* 235px відступ від попередньої секції і стільки ж до футера (1920) */
  margin-block: 235px;
  /* ширина 4-колонкового контейнера (=574px на 1920) */
  --col4: calc((100vw - 2 * var(--margin)) / 3);
  /* сяйво навмисно ширше за екран (130vw на планшеті) — обрізаємо його по
     межах секції, щоб декор не створював горизонтального скролу сторінки.
     clip (а не hidden) не робить секцію скрол-контейнером, тож sticky/fixed
     решти сайту не ламається; руки — position:fixed, їх це не торкається. */
  overflow-x: clip;
}

/* єдиний запінений елемент — руки. За замовчуванням absolute (поза
   потоком); main.js перемикає на position:fixed на час піна (від появи
   заголовка до моменту, коли центр CTA сягає центру екрана), і назад на
   absolute при відпусканні, щоб руки поїхали разом зі сторінкою.
   Вертикаль під час піна тримає сам браузер — JS її щокадру не рухає. */
.process__hands {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Руки: transform (translate X, Y) виставляє main.js.
   Розмір до 1920 включно — як був (44vw з межами 400…760px). Ширше за
   1920 верхня межа росте разом з екраном (760 / 1920 = 39.5834vw), але не
   вище за 70.37vh — рівно ту частку висоти, яку рука займає на 1920×1080
   (760/1080). Без цієї другої межі на ультраширокому й низькому екрані
   (напр. 3440×1200) рука ставала вищою за в'юпорт і їй різало пальці. */
.process__hand {
  position: absolute;
  top: 50%;
  width: clamp(400px, 44vw, max(760px, min(39.5834vw, 70.37vh)));
  height: auto;
  will-change: transform;
}
.process__hand--left { left: 0; }
.process__hand--right { right: 0; }

/* контент — звичайний потік поверх рук */
.process__content {
  position: relative;
  z-index: 2;
}

/* заголовок + сяйво */
.process__head {
  position: relative;
  text-align: center;
}

/* зелене сяйво за заголовком; проявляється штатним reveal разом із ним.
   Лише радіальний градієнт (без темної заливки згори) — щоб нічого не
   затемнювало попередню секцію; висота стримана, аби сяйво згасало в
   межах відступу й не діставало плашки попередньої секції. */
.process__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1926px, 100vw);
  height: min(1100px, 120vh);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(50% 50% at 50% 50%,
      rgba(97, 229, 220, 0.36) 0%,
      rgba(97, 229, 220, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
/* .reveal лише проявляє сяйво (opacity); центрування лишаємо */
.process__glow.reveal,
.process__glow.reveal.is-visible {
  transform: translate(-50%, -50%);
}

/* заголовок — та сама типографіка, що у .focus__title, 128px */
.process__title {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  max-width: 92%;
  font-weight: 400;
  font-size: clamp(48px, 6.7vw, 128px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* колонка кроків, по центру */
.process__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;           /* відступ між кроками (1920) */
  margin-top: 140px;    /* заголовок -> кроки (1920) */
}

/* крок — по центру, 4 колонки */
.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2vw, 36px);
  width: var(--col4);
  margin-inline: auto;
  text-align: center;
}

.process-step__ill {
  width: clamp(156px, 11.375vw, 218px); /* скляні цифри на ~30% більші */
  height: auto;
  aspect-ratio: 300 / 229;
}

.process-step__text {
  font-size: clamp(22px, 1.875vw, 36px); /* 36px на 1920 */
  letter-spacing: -0.055em; /* ≈ -2px при 36px */
  font-weight: 300;
  line-height: 1.2;
}

.process-step__ast { color: var(--color-accent-green); }

/* фінал — CTA + примітка (по центру, 4 колонки) */
.process__end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 27.5px;          /* CTA -> опис (1920); удвічі ближче, було 55px */
  width: var(--col4);
  margin: 140px auto 0; /* кроки -> CTA (1920) */
  text-align: center;
}

.process__cta {
  display: flex;
  width: 100%;
}

/* CTA завширшки як 4-колонковий контейнер (перекриваємо .btn max-width);
   text-align:left повертає лейбл у лівий нижній кут, як у кнопок hero
   (скидаємо успадкований від .process__end center) */
.process__cta .btn {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  text-align: left;
}

/* підпис під кнопкою — ті самі метрики, що були до видалення блока:
   16px (20px -20%), Light, рядок 24px, 80% непрозорості */
.process__note {
  width: 100%;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  opacity: 0.8;
}
.process__note.reveal.is-visible { opacity: 0.8; }

/* примусові переноси рядків (.pbr) — десктоп І планшет тримають однакову
   багаторядкову композицію кроків; природний перенос лишаємо тільки
   мобільному, де рядки з макета не вміщаються у вузьку колонку */
@media (max-width: 767px) {
  .process-step__text .pbr { display: none; }
}

/* ---- Планшет/мобайл + reduced-motion: без рук, звичайний стек ---- */
@media (max-width: 1024px) {
  .process { margin-block: clamp(48px, 7vw, 100px); }
  .process__hands { display: none; }
  .process__title {
    max-width: 100%;
    font-size: clamp(30px, 7vw, 88px);
  }
  .process__steps {
    gap: clamp(56px, 11vw, 96px);
    margin-top: clamp(56px, 11vw, 110px);
  }
  .process-step,
  .process__end { width: 100%; }
  .process__end { margin-top: clamp(56px, 11vw, 96px); }
  /* CTA по центру блока (був притиснутий вліво, бо .process__cta — flex
     з дефолтним flex-start, а кнопка обмежена max-width) */
  .process__cta { justify-content: center; }
  .process__cta .btn { max-width: 574px; }
  .process__glow {
    height: min(900px, 70vh);
    width: min(1200px, 130vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .process__hands { display: none; }
}

/* ============================================================
   Footer — фінальний блок за макетом
   Зверху великий приглушений лоґотип NODERA + ©.
   Нижче 4 колонки: соцмережі+пошта / навігація / дві CTA.
   Внизу — правові посилання + копірайт.
   ============================================================ */
.footer {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 4vw, 72px) clamp(28px, 2.4vw, 44px);
}

/* ---- Фоновий лоґотип ---- */
.footer__wordmark {
  position: relative;
  padding-inline: var(--margin);
  max-width: var(--container-max);
  margin: 0 auto clamp(56px, 6vw, 120px);
}

/* Великий лоґотип: форма-маска з Logo-solid.svg. Дефолт — вертикальний
   градієнт #272727 → #151515. При наведенні всередині літер плавно
   рухається м'яке світло (координати задає main.js через --lx/--ly). */
.footer__logo {
  position: relative;
  width: 100%;
  aspect-ratio: 147 / 18;
  background: linear-gradient(180deg, #272727 0%, #151515 100%);
  /* Форма-маска інлайном (data-URI), щоб не залежати від зовнішнього
     запиту й обмежень origin для CSS-масок. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%22147%22%20height%3D%2218%22%20viewBox%3D%220%200%20147%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M22.9111%200L22.9043%200.00683594H22.9111V9.5L19.459%2012.4229L22.9111%2015.0361V17.6553H19.543L3.97852%205.85254V13.6572L6.09863%2016.1758L3.97852%2017.6553H0L0.00683594%2017.6484H0V8.15527L3.31445%205.35059L0%202.83496V0.21582H3.34473L18.9336%2012.0225V3.99805L16.8125%201.48047L18.9336%200H22.9111ZM71.9717%204.65137V13.0195L67.4346%2017.5566H56.1104L53.0693%2014.8936V17.5566H49.1855V13.417C49.1855%2013.417%2049.1484%207.5441%2049.1484%203.60645C49.1484%201.63425%2049.1586%200.147529%2049.1855%200.117188H67.4346C69.2077%201.88693%2070.202%202.88503%2071.9717%204.65137ZM120.768%204.65527V8.16406L120.765%208.16797L118.741%209.52637L117.137%2010.6016L120.765%2015.126V17.5566H117.838L114.137%2012.6182L106.783%2017.5566H98.1699V0.117188H116.229C118.003%201.88711%20118.998%202.88535%20120.768%204.65527ZM47.4639%204.65527V13.0088L46.8027%2013.6699C45.4172%2015.0588%2044.4634%2016.0097%2042.9229%2017.5537H29.208L24.667%2013.0127V4.65527L24.6943%204.62793L25.3242%203.99707C26.7131%202.61157%2027.664%201.65778%2029.208%200.117188H42.9258L47.4639%204.65527ZM136.136%203.99707L136.14%203.99414L146.304%2017.5537H141.557L140.465%2016.0967L142.194%2013.8955L136.173%2013.9629L126.39%2014.0742V17.5537H122.506V4.65527L127.044%200.117188H133.227L136.136%203.99707ZM96.4707%203.99316H77.5576V6.88867H94.5391V10.7725H77.5576V13.6689H96.4707V17.5488H78.2148L73.6738%2013.0078V4.65039L78.2148%200.109375H96.4707V3.99316ZM102.054%2016.3975L116.816%206.94043L116.826%206.93359L116.863%206.89355H116.891V3.99707H102.054V16.3975ZM53.0654%2013.6768H68.0918V3.99414H53.0654V13.6768ZM28.5742%2013.6729H43.5801V10.7773H43.6006V6.89355H43.5801V3.99707H28.5742V13.6729ZM126.386%2010.1943H136.031L135.734%209.7998L131.386%203.99707H126.386V10.1943Z%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20width%3D%22147%22%20height%3D%2218%22%20viewBox%3D%220%200%20147%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M22.9111%200L22.9043%200.00683594H22.9111V9.5L19.459%2012.4229L22.9111%2015.0361V17.6553H19.543L3.97852%205.85254V13.6572L6.09863%2016.1758L3.97852%2017.6553H0L0.00683594%2017.6484H0V8.15527L3.31445%205.35059L0%202.83496V0.21582H3.34473L18.9336%2012.0225V3.99805L16.8125%201.48047L18.9336%200H22.9111ZM71.9717%204.65137V13.0195L67.4346%2017.5566H56.1104L53.0693%2014.8936V17.5566H49.1855V13.417C49.1855%2013.417%2049.1484%207.5441%2049.1484%203.60645C49.1484%201.63425%2049.1586%200.147529%2049.1855%200.117188H67.4346C69.2077%201.88693%2070.202%202.88503%2071.9717%204.65137ZM120.768%204.65527V8.16406L120.765%208.16797L118.741%209.52637L117.137%2010.6016L120.765%2015.126V17.5566H117.838L114.137%2012.6182L106.783%2017.5566H98.1699V0.117188H116.229C118.003%201.88711%20118.998%202.88535%20120.768%204.65527ZM47.4639%204.65527V13.0088L46.8027%2013.6699C45.4172%2015.0588%2044.4634%2016.0097%2042.9229%2017.5537H29.208L24.667%2013.0127V4.65527L24.6943%204.62793L25.3242%203.99707C26.7131%202.61157%2027.664%201.65778%2029.208%200.117188H42.9258L47.4639%204.65527ZM136.136%203.99707L136.14%203.99414L146.304%2017.5537H141.557L140.465%2016.0967L142.194%2013.8955L136.173%2013.9629L126.39%2014.0742V17.5537H122.506V4.65527L127.044%200.117188H133.227L136.136%203.99707ZM96.4707%203.99316H77.5576V6.88867H94.5391V10.7725H77.5576V13.6689H96.4707V17.5488H78.2148L73.6738%2013.0078V4.65039L78.2148%200.109375H96.4707V3.99316ZM102.054%2016.3975L116.816%206.94043L116.826%206.93359L116.863%206.89355H116.891V3.99707H102.054V16.3975ZM53.0654%2013.6768H68.0918V3.99414H53.0654V13.6768ZM28.5742%2013.6729H43.5801V10.7773H43.6006V6.89355H43.5801V3.99707H28.5742V13.6729ZM126.386%2010.1943H136.031L135.734%209.7998L131.386%203.99707H126.386V10.1943Z%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fsvg%3E") center / contain no-repeat;
}

.footer__logo-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    clamp(260px, 24vw, 500px) circle at var(--lx, 50%) var(--ly, 45%),
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.14) 30%,
    rgba(255, 255, 255, 0) 62%);
  opacity: 0;
  transition: opacity 0.7s var(--ease-roll);
  pointer-events: none;
}

.footer__logo.is-lit .footer__logo-light {
  opacity: 1;
}

/* обгортка = бокс лоґотипа (без бічних паддінгів .footer__wordmark).
   Саме вона — система координат для ©, тому все всередині масштабується
   разом із шириною лоґотипа на будь-якому екрані. */
.footer__wordmark-inner {
  position: relative;
  width: 100%;
}

/* © — частина композиції лоґотипа, а не окремий елемент: розмір задано
   у відсотках від ширини лоґотипа за макетом 1920 (62px при 1720px =
   3.6047%), позиція — впритул до його правого верхнього кута. Відсотки
   (а не px) означають, що пропорція та відступ лишаються однаковими на
   всіх розмірах екрана — лоґотип і © зменшуються як одне ціле. */
.footer__reg {
  position: absolute;
  top: 0;
  right: 0;
  width: 3.6047%;
  height: auto;
}

/* ---- Основна сітка з 4 колонок ---- */
.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(32px, 3.1vw, 60px);
  align-items: stretch;
}

.footer__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---- Колонка 1: соцмережі + пошта ---- */
.footer__h {
  font-weight: 700;
  font-size: clamp(26px, 2.1vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.footer__socials {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.4vw, 26px);
  margin-top: clamp(36px, 3.4vw, 64px);
}

/* нормалізація по висоті: усі ассети мають власну ширину (YouTube 31,
   Instagram/LinkedIn 28, DOU 51 — при спільній висоті 28px), тож задаємо
   висоту, а ширину лишаємо авто, щоб зберегти природні пропорції */
.footer__social {
  display: inline-flex;
  opacity: 0.55;
  transition: opacity var(--transition-fast);
}

.footer__social img {
  display: block;
  width: auto;
  height: clamp(22px, 1.55vw, 28px);
}

@media (hover: hover) and (pointer: fine) {
  .footer__social:hover { opacity: 1; }
}

.footer__email {
  align-self: flex-start;
  /* притиснута до низу колонки — на одній осі з нижнім краєм кнопок */
  margin-top: auto;
  font-size: clamp(16px, 1.15vw, 22px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline transparent;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .footer__email:hover {
    color: #ffffff;
    text-decoration-color: #ffffff;
  }
}

/* На планшеті/мобайлі та на будь-якому дотиковому екрані hover недосяжний,
   тож показуємо стан hover одразу — підкреслення робить очевидним, що це
   клікабельне посилання на пошту */
@media (max-width: 1024px), (hover: none) {
  .footer__email {
    color: #ffffff;
    text-decoration-color: #ffffff;
  }
}

/* ---- Колонка 2: навігація ---- */
/* вертикальний крок між пунктами на 10% менший (18/1.9vw/32 -> 16.2/1.71vw/28.8) */
.footer__nav {
  gap: clamp(16.2px, 1.71vw, 28.8px);
}

.footer__nav a {
  font-size: 18px;
  font-weight: 200; /* UltraLight; без файла UltraLight падає на Light (300) */
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* той самий roll-hover, що в навігації хедера (розмітку будує main.js) */
@media (hover: hover) and (pointer: fine) {
  .footer__nav a:hover .roll__unit { transform: translateY(-100%); }
}

/* ---- Колонки 3-4: CTA (заголовок + кнопка внизу) ---- */
.footer__cta-title {
  font-weight: 400;
  font-size: clamp(20px, 1.55vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.footer__cta-sub {
  margin-top: clamp(12px, 1vw, 18px);
  font-size: clamp(14px, 0.95vw, 18px);
  font-weight: 200; /* UltraLight */
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.55);
}

/* кнопка притиснута до низу колонки — вирівнюється з поштою в колонці 1.
   flex:0 0 auto скасовує ріст із базового .btn, щоб висота лишалась
   фіксованою (139px), а margin-top:auto опускав кнопку донизу.

   Але auto дає відступ лише з ЗАЛИШКУ висоти рядка, а висоту рядка
   задавала найвища колонка — навігація футера. Коли з неї прибрали три
   пункти, рядок став нижчим, залишку не лишилось, і кнопка сіла впритул
   до тексту. Тож гарантований мінімум тримаємо окремо, на самому блоці
   тексту: auto, як і раніше, розтягує відступ там, де місце є. */
.footer__cta .btn {
  flex: 0 0 auto;
  margin-top: auto;
  width: 100%;
}

.footer__cta-head {
  margin-bottom: 30px;
}

/* обводка кнопок футера — напівпрозора (50%), щоб контур читався легше.
   CSS-властивість stroke перекриває інлайновий stroke="#fff" у SVG */
.footer__cta .btn__border path {
  stroke: rgba(255, 255, 255, 0.5);
}

/* ---- Низ: правові посилання + копірайт ---- */
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(48px, 5vw, 96px);
  padding-top: clamp(22px, 1.8vw, 30px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3.4vw, 64px);
}

.footer__legal a {
  font-size: clamp(13px, 0.9vw, 15px);
  font-weight: 200; /* UltraLight */
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .footer__legal a:hover { color: var(--color-text); }
}

.footer__copy {
  font-size: clamp(13px, 0.9vw, 15px);
  font-weight: 200; /* UltraLight */
  color: rgba(255, 255, 255, 0.4);
}

/* горизонтальні розділювачі — лише для планшета/мобайла (нижче їх
   вмикають відповідні медіа-запити), на десктопі не існують */
.footer__rule {
  display: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* ---- Планшет: спершу дві CTA в один ряд, під ними лінія,
   далі соцмережі + навігація ---- */
@media (max-width: 1024px) {
  /* row-gap = рівно 50px, тож над і під волосяною лінією (це окремий рядок
     сітки) виходить симетричний відступ 50px без жодних від'ємних margin'ів.
     Колонковий зазор лишається більшим — колонкам потрібне повітря. */
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(40px, 6vw, 64px);
    row-gap: 50px;
  }

  .footer__socials { margin-top: clamp(28px, 4vw, 44px); }
  .footer__email { margin-top: clamp(20px, 3vw, 32px); }

  /* © на планшеті на 30% менша: 3.6047% (62/1720 з макета) × 0.7.
     Пропорційне масштабування разом із лоґотипом лишає ту саму візуальну
     вагу, що на десктопі, а тут іконка читається завеликою */
  .footer__reg { width: 2.5233%; }

  /* порядок блоків: CTA1, CTA2, лінія, соцмережі, навігація.
     CTA у розмітці стоять третім і четвертим — order піднімає їх наверх,
     не змінюючи логічного порядку для скрінрідерів */
  .footer__cta--pitch { order: 1; }
  .footer__cta--talent { order: 2; }
  .footer__rule--cta { order: 3; }
  .footer__col--social { order: 4; }
  .footer__nav { order: 5; }

  .footer__rule--cta {
    display: block;
    grid-column: 1 / -1;
  }

  /* правові посилання — рівномірно на всю ширину, однакові проміжки;
     копірайт при цьому переходить на власний рядок і центрується */
  .footer__bottom {
    margin-top: 50px;
    padding-top: 50px;
    row-gap: clamp(16px, 2vw, 24px);
  }

  .footer__legal {
    width: 100%;
    justify-content: space-between;
    gap: clamp(16px, 2vw, 32px);
  }

  .footer__copy {
    width: 100%;
    text-align: center;
  }
}

/* ---- Мобайл: один стовпчик, кожен блок відділений лінією ---- */
@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr; }

  /* CTA1, CTA2, лінія, соцмережі, лінія, навігація */
  .footer__rule--social {
    display: block;
    order: 5;
  }
  .footer__nav { order: 6; }

  /* кнопка більше не тягнеться донизу (колонки не в одному ряду) */
  .footer__cta .btn { margin-top: clamp(24px, 3vw, 40px); }

  /* низ: правові посилання -> лінія -> копірайт по центру.
     Ті самі 50px над і під лінією, що й у решти розділювачів */
  .footer__bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .footer__legal {
    justify-content: flex-start;
    gap: clamp(20px, 5vw, 28px) clamp(24px, 6vw, 32px);
  }

  .footer__rule--legal {
    display: block;
    margin-block: 50px;
  }

  .footer__copy { text-align: center; }
}

/* ============================================================
   Legal — сторінка "Terms & Conditions" (Умови + Політика)
   Хедер/футер ті самі, що на головній. Дві мовні версії лежать
   у розмітці одночасно; яку показати — вирішує html[lang].
   ============================================================ */

/* невисокий банер: фірмовий кадр на всю ширину, під ним заголовок */
.legal-hero {
  padding-top: 70px; /* висота фіксованого хедера */
}

.legal-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 2880 / 1140;
  /* невисокий банер: на широких екранах пропорція дала б надто високий
     блок, тому обмежуємо висотою в'юпорта */
  max-height: 40vh;
  overflow: hidden;
}

.legal-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* банер закінчується чисто, без градієнтного згасання в наступну секцію */

/* ---- Сітка: липкі таби + контент ---- */
.legal__layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: clamp(40px, 5vw, 100px);
  margin-block: clamp(48px, 6vw, 120px) clamp(72px, 8vw, 160px);
}

.legal__aside {
  position: relative;
}

.legal-tabs {
  position: sticky;
  /* хедер (70px) + повітря */
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.legal-tab {
  position: relative;
  padding: 14px 0 14px 20px;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--transition-fast);
}

/* індикатор активного таба — вертикальна риска ліворуч */
.legal-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: rgba(255, 255, 255, 0.16);
  transition: background var(--transition-fast);
}

.legal-tab.is-active {
  color: var(--color-text);
}

.legal-tab.is-active::before {
  background: var(--color-accent-orange);
}

@media (hover: hover) and (pointer: fine) {
  .legal-tab:hover { color: var(--color-text); }
}

/* ---- Контент ---- */
.legal__content {
  /* комфортна ширина читання */
  max-width: 74ch;
}

.legal-doc + .legal-doc {
  margin-top: clamp(72px, 8vw, 140px);
}

/* offset під фіксований хедер, щоб заголовок не ховався при переході по табу */
.legal-doc {
  scroll-margin-top: 100px;
}

/* заголовки документів — головні акценти сторінки (банер тексту не має),
   тому на 30% більші: 28->36.4, 2.5->3.25vw, 48->62.4px.
   overflow-wrap — страхування: жодне довге слово не має розсувати колонку */
.legal-doc__title {
  padding-bottom: clamp(20px, 2vw, 32px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 400;
  font-size: clamp(36.4px, 3.25vw, 62.4px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

/* обидві мови в DOM; показуємо лише активну */
.legal-doc__body {
  display: none;
  /* нумерація розділів — як у першоджерелі (1., 2., 3. …) */
  counter-reset: legalsec;
}

html[lang="uk"] .legal-doc__body[data-lang-block="uk"],
html[lang="en"] .legal-doc__body[data-lang-block="en"] {
  display: block;
}

/* заголовки розділів — рівнем нижче за заголовок документа (h3 під h2);
   типографіка не змінювалась */
.legal-h3 {
  counter-increment: legalsec;
  margin-top: clamp(44px, 4.5vw, 76px);
  margin-bottom: clamp(14px, 1.4vw, 22px);
  font-weight: 400;
  font-size: clamp(21px, 1.7vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-text);
  overflow-wrap: break-word;
}

.legal-h3::before {
  content: counter(legalsec) ".";
  margin-right: 0.5em;
  color: var(--color-accent-orange);
}

.legal-p {
  margin-top: clamp(12px, 1.1vw, 18px);
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.72);
  overflow-wrap: break-word;
}

.legal-p strong,
.legal-ul strong {
  font-weight: 500;
  color: var(--color-text);
}

.legal-p--meta {
  margin-top: clamp(24px, 2.4vw, 36px);
  font-size: clamp(13px, 0.9vw, 15px);
  color: rgba(255, 255, 255, 0.4);
}

.legal-ul {
  list-style: none;
  margin-top: clamp(12px, 1.1vw, 18px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.8vw, 12px);
}

.legal-ul li {
  position: relative;
  padding-left: 26px;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  overflow-wrap: break-word;
}

/* маркер — фірмова червона риска */
.legal-ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 10px;
  height: 1px;
  background: var(--color-accent-orange);
}

/* посилання: текст білий (яскравіший за основний текст 72%), підкреслення
   завжди видиме; на hover і текст, і лінія стають фірмовим червоним */
.legal-p a,
.legal-ul a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .legal-p a:hover,
  .legal-ul a:hover {
    color: var(--color-accent-orange);
    text-decoration-color: var(--color-accent-orange);
  }
}

/* ---- Планшет/мобайл: таби — липка панель під хедером ---- */
@media (max-width: 1024px) {
  /* Блоковий потік замість сітки — принципово для sticky. У сітці таббар
     лежав у власному рядку висотою рівно в себе, тобто діапазон прилипання
     був нульовий і бар просто зникав при скролі. display:contents на
     .legal__aside прибирає його бокс, тож таббар стає прямим дитям високого
     .legal__layout — і має куди липнути на всю висоту документа. */
  .legal__layout {
    display: block;
  }

  .legal__aside {
    display: contents;
  }

  .legal__content {
    max-width: none;
    margin-top: clamp(28px, 4vw, 44px);
  }

  .legal-tabs {
    position: sticky;
    top: 70px; /* висота фіксованого хедера */
    flex-direction: row;
    gap: clamp(20px, 3vw, 36px);
    /* фон і лінія — на всю ширину екрана, самі таби лишаються по сітці
       контенту (від'ємні margin'и компенсують паддінг контейнера) */
    margin-inline: calc(-1 * var(--margin));
    padding: 16px var(--margin);
    background: var(--color-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 5;
    /* рухається разом із хедером: коли той ховається при скролі вниз,
       панель піднімається на його висоту — тією ж кривою й тривалістю */
    transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .legal-tabs.is-header-hidden {
    transform: translateY(-70px);
  }

  .legal-tab {
    padding: 6px 0 10px;
  }

  /* індикатор стає нижнім підкресленням */
  .legal-tab::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: 2px;
    background: transparent;
  }

  /* для переходів по хешу (напр. legal.html#privacy з футера) —
     запас під хедер + липку панель табів */
  .legal-doc { scroll-margin-top: 170px; }
}

@media (max-width: 767px) {
  .legal-hero__media { max-height: 40vh; }
  .legal-tabs { gap: 20px; }
  .legal-tab { font-size: 14px; }

  /* На вузьких екранах повні +30% (36.4px) не вміщають найдовше слово
     заголовка в ширину колонки, тому тут кегль плавно масштабується від
     ~28px і виходить на повні 36.4px приблизно з 485px. */
  .legal-doc__title {
    font-size: clamp(28px, 7.5vw, 36.4px);
  }
}


/* ============================================================
   Pitch popup — довгий аркуш форми «Хочу запітчити»
   Це НЕ модальне вікно з власним скролом: аркуш лежить у документі
   (position: absolute), тому його прокручує звичайний скрол сторінки —
   вкладених скрол-контейнерів немає. Аркуш може бути значно вищим за
   екран. Фон розмивається фіксованим шаром, хрестик — фіксований і не
   їде разом з аркушем. Півкола на розділювальній лінії — справжні
   отвори: вирізані маскою, тож крізь них видно розмитий фон.
   OPEN: знизу -> на місце, CLOSE: вниз, SUCCESS: вгору.
   ============================================================ */
.pitch {
  position: fixed;
  inset: 0;
  /* верхній просвіт над аркушем; ним же вирівняний хрестик */
  --pitch-top-gap: clamp(48px, 9vh, 110px);
  /* внутрішній падінг аркуша — ним же відміряються межі лінії */
  --pitch-body-pad: clamp(28px, 3.4vw, 56px);
  z-index: 80; /* вище хедера (20) і бульбашки чипів (60) */
  /* Прокручується САМ шар попапа, а не сторінка: сайт під блюром на цей
     час замкнений (див. lockPage у main.js) і не рухається ні на піксель.
     Аркуш при цьому лишається одним довгим полотном — коробки з
     фіксованою висотою і вкладених скролів немає. */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  pointer-events: none;
}

/* .is-mounted тримає шар у видимій зоні, поки триває будь-яка з
   анімацій (і вхід, і вихід) — інакше аркуш зникав би різко */
.pitch.is-mounted { visibility: visible; }
.pitch.is-open { pointer-events: auto; }

/* поки аркуш відкритий, фіксований хедер не має світитися збоку від
   нього — ховаємо його, а не перекриваємо */
html.pitch-open .header {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
}

.pitch__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}

.pitch.is-open .pitch__backdrop { opacity: 1; }

/* ---- сам аркуш ---- */
.pitch__sheet {
  position: relative;
  margin: var(--pitch-top-gap) auto;
  /* носій верхнього просвіту в пікселях: JS читає саме цю властивість,
     бо getPropertyValue("--pitch-top-gap") віддає нерозрахований clamp() */
  scroll-margin-top: var(--pitch-top-gap);
  box-sizing: border-box;
  /* 8 з 12 колонок нашої сітки; праворуч лишається місце під хрестик */
  width: min(calc((100vw - 2 * var(--margin)) * 8 / 12), 1147px);
  background: #ffffff;
  color: var(--color-bg);
  /* та сама фаска кутів, що в плашках секцій */
  --pitch-notch: 44px;
  clip-path: polygon(
    calc(var(--pitch-notch) + 5px) 0,
    calc(100% - 5px) 0, calc(100% - 1.3px) 1.3px, 100% 5px,
    100% calc(100% - var(--pitch-notch) - 5px),
    calc(100% - 0.9px) calc(100% - var(--pitch-notch) - 0.4px),
    calc(100% - 3.5px) calc(100% - var(--pitch-notch) + 3.5px),
    calc(100% - var(--pitch-notch) + 3.5px) calc(100% - 3.5px),
    calc(100% - var(--pitch-notch) - 0.4px) calc(100% - 0.9px),
    calc(100% - var(--pitch-notch) - 5px) 100%,
    5px 100%, 1.3px calc(100% - 1.3px), 0 calc(100% - 5px),
    0 calc(var(--pitch-notch) + 5px),
    0.9px calc(var(--pitch-notch) + 0.4px),
    3.5px calc(var(--pitch-notch) - 3.5px),
    calc(var(--pitch-notch) - 3.5px) 3.5px,
    calc(var(--pitch-notch) + 0.4px) 0.9px
  );
  /* Отвори-перфорація: два кола вирізані з самого аркуша на висоті
     розділювальної лінії (--pitch-cut-y виставляє main.js). Кожен шар
     маски прозорий лише у своєму колі, перетин двох шарів = аркуш без
     обох кіл. Де маски не підтримуються — аркуш просто цілий. */
  --pitch-cut-r: 13px;
  --pitch-cut-y: -100px;
  -webkit-mask-image:
    radial-gradient(circle var(--pitch-cut-r) at 0 var(--pitch-cut-y),
      rgba(0, 0, 0, 0) calc(var(--pitch-cut-r) - 1px), #000 var(--pitch-cut-r)),
    radial-gradient(circle var(--pitch-cut-r) at 100% var(--pitch-cut-y),
      rgba(0, 0, 0, 0) calc(var(--pitch-cut-r) - 1px), #000 var(--pitch-cut-r));
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle var(--pitch-cut-r) at 0 var(--pitch-cut-y),
      rgba(0, 0, 0, 0) calc(var(--pitch-cut-r) - 1px), #000 var(--pitch-cut-r)),
    radial-gradient(circle var(--pitch-cut-r) at 100% var(--pitch-cut-y),
      rgba(0, 0, 0, 0) calc(var(--pitch-cut-r) - 1px), #000 var(--pitch-cut-r));
  mask-composite: intersect;
  opacity: 0;
  will-change: transform;
  transition:
    transform 0.55s var(--ease-out),
    opacity 0.4s var(--ease-out);
}

.pitch.is-open .pitch__sheet { opacity: 1; }

/* ---- хрестик: фіксований, праворуч від аркуша ---- */
.pitch__close {
  position: fixed;
  /* рівно по верхньому краю аркуша */
  top: var(--pitch-top-gap);
  /* центр екрана + півширина аркуша + зазор */
  left: calc(50% + min(calc((100vw - 2 * var(--margin)) * 8 / 12), 1147px) / 2 + 18px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  color: var(--color-bg);
  background: #ffffff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* анімується лише сама іконка; коло лишається того самого розміру */
.pitch__close svg {
  width: 24px;
  height: 24px;
  transition: transform var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .pitch__close:hover svg { transform: scale(1.22); }
}

.pitch__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(97, 229, 220, 0.6);
}

/* ---- вміст аркуша ---- */
.pitch__body {
  padding: var(--pitch-body-pad);
}

.pitch__title {
  margin: 0;
  padding-right: 52px;
  font-weight: 400;
  /* 90px у макеті 1920; коефіцієнт 4.7vw — той самий, що в H2 секцій */
  font-size: clamp(34px, 4.7vw, 90px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.pitch__text {
  margin: clamp(18px, 1.6vw, 28px) 0 0;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 300;
  line-height: 1.5;
}

.pitch__text--lead { font-weight: 400; }

.pitch__sub {
  margin: clamp(24px, 2.2vw, 36px) 0 0;
  font-weight: 500;
  font-size: clamp(20px, 1.6vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Той самий трактування, що в посилань юридичних сторінок (.legal-p a):
   колір тексту сторінки, підкреслення напівпрозоре й видиме завжди, на
   hover і текст, і лінія стають фірмовим оранжевим. Різниця лише в тому,
   що там полотно чорне, а тут біле, тож базовий колір — інверсний. */
.pitch__link {
  color: var(--color-bg);
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.5);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .pitch__link:hover {
    color: var(--color-accent-orange);
    text-decoration-color: var(--color-accent-orange);
  }
}

/* Розділювальна лінія: сам пунктир. Півкола по краях — це отвори в
   аркуші (маска вище), а не окремі фігури. */
.pitch__perf {
  height: 1px;
  /* рівно 100px до і після лінії (макет 1920), симетрично; сусідні
     блоки власних вертикальних маргінів у цьому місці не мають */
  margin-block: clamp(48px, 5.2vw, 100px);
  /* Лінія не доходить до отворів на 4px — і це справжня геометрія, а не
     маска. Маскою її раніше лише «підрізало», через що з одного боку
     лишався тонкий залишок; тепер у тій зоні лінії просто немає. */
  margin-inline: calc(var(--pitch-cut-r) + 4px - var(--pitch-body-pad));
  background-image: repeating-linear-gradient(
    to right,
    rgba(0, 0, 0, 0.35) 0 6px,
    rgba(0, 0, 0, 0) 6px 14px
  );
}

.pitch__note {
  margin: 0 0 clamp(24px, 2.4vw, 40px);
  font-size: clamp(13px, 0.85vw, 15px);
  font-weight: 300;
  color: rgba(0, 0, 0, 0.55);
}

/* ---- поле ---- */
.pitch-field + .pitch-field { margin-top: clamp(28px, 2.8vw, 44px); }

.pitch-field__label {
  display: block;
  font-weight: 500;
  font-size: clamp(19px, 1.45vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.pitch-field__req {
  margin-left: 2px;
  color: var(--color-accent-orange);
}

.pitch-field__hint {
  margin: 8px 0 0;
  font-size: clamp(13px, 0.9vw, 16px);
  font-weight: 300;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.6);
}

.pitch-field__error {
  margin: 8px 0 0;
  font-size: clamp(13px, 0.85vw, 15px);
  font-weight: 300;
  line-height: 1.35;
  color: var(--color-accent-orange);
}

.pitch-field:not(.is-error) .pitch-field__error { display: none; }

/* ---- інпут ---- */
.pitch-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
  padding: 10px 2px;
  font-family: inherit;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-bg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 0;
  appearance: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Багаторядкові поля мають ту саму геометрію, що й однорядкові:
   стартують в один рядок (тож відстань «підпис — Ваша відповідь —
   лінія» однакова скрізь) і підростають під текст (main.js), без
   власної смуги прокрутки. */
.pitch-input--area {
  resize: none;
  min-height: 0;
  overflow: hidden;
}

.pitch-input::placeholder { color: rgba(0, 0, 0, 0.38); }

@media (hover: hover) and (pointer: fine) {
  .pitch-input:hover:not(:disabled) { border-bottom-color: rgba(0, 0, 0, 0.55); }
}

.pitch-input:focus {
  outline: none;
  border-bottom-color: var(--color-accent-green-dark);
  box-shadow: 0 1px 0 0 var(--color-accent-green-dark);
}

.pitch-input:not(:placeholder-shown):not(:focus) {
  border-bottom-color: rgba(0, 0, 0, 0.7);
}

.pitch-input:disabled {
  color: rgba(0, 0, 0, 0.35);
  border-bottom-style: dashed;
  cursor: not-allowed;
}

/* Додаткове поле для «Інше»: стоїть ПІД варіантом, виглядає точно як
   решта полів «Ваша відповідь», і існує лише коли варіант вибрано. */
.pitch-other[hidden] { display: none; }

.pitch-other {
  margin-top: 6px;
}

/* ---- варіанти вибору ---- */
.pitch-choice {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pitch-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.pitch-opt__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pitch-opt__mark {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pitch-opt__input[type="checkbox"] + .pitch-opt__mark { border-radius: 4px; }

.pitch-opt__mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: var(--color-bg);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}

.pitch-opt__input:checked + .pitch-opt__mark { border-color: var(--color-bg); }

.pitch-opt__input:checked + .pitch-opt__mark::after {
  opacity: 1;
  transform: scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .pitch-opt:hover .pitch-opt__mark { border-color: var(--color-bg); }
}

.pitch-opt__input:focus-visible + .pitch-opt__mark {
  box-shadow: 0 0 0 3px rgba(23, 153, 143, 0.35);
  border-color: var(--color-accent-green-dark);
}

.pitch-opt__text {
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 300;
  line-height: 1.4;
}

.pitch-field.is-error .pitch-input { border-bottom-color: var(--color-accent-orange); }
.pitch-field.is-error .pitch-opt__mark { border-color: var(--color-accent-orange); }
.pitch-field.is-ok .pitch-input:not(:focus) { border-bottom-color: var(--color-accent-green-dark); }

.pitch-field--consent .pitch-field__consent-text {
  margin: 0;
  font-size: clamp(13px, 0.9vw, 16px);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.75);
}

/* ---- кнопка: той самий компонент, що головні CTA, лише на всю
       ширину контенту аркуша ---- */
.pitch__footer {
  margin-top: clamp(32px, 3vw, 56px);
}

/* Це єдине місце, де .btn — справжній <button>, а не <a>, тож треба
   погасити дефолти браузера: рамку (звідси й бралась «незрозуміла
   обводка» в неактивному стані), центрування тексту й системний шрифт. */
.pitch__submit {
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  text-align: left;
  background: var(--color-bg);
  color: var(--color-text);
}

/* АКТИВНИЙ стан: чорна заливка, hover — точно як у CTA на головній
   (заливка йде в прозоре, з'являється кутова обводка) */
.pitch__submit .btn__border path { stroke: var(--color-bg); }

@media (hover: hover) and (pointer: fine) {
  .pitch__submit:not(:disabled):hover {
    background: transparent;
    color: var(--color-bg);
  }

  .pitch__submit:not(:disabled):hover .btn__border { opacity: 1; }
}

.pitch__submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 153, 143, 0.45);
}

/* НЕАКТИВНИЙ стан: просто сіра плашка — без обводки, без hover,
   без жодної реакції. Псевдокласи перелічені явно, щоб нічого зі
   спільних правил .btn сюди не дотяглось. */
.pitch__submit:disabled,
.pitch__submit:disabled:hover,
.pitch__submit:disabled:focus,
.pitch__submit:disabled:active {
  background: #d9d9d9;
  color: rgba(0, 0, 0, 0.45);
  border: 0;
  box-shadow: none;
  cursor: not-allowed;
}

.pitch__submit:disabled .btn__border,
.pitch__submit:disabled:hover .btn__border { opacity: 0; }

.pitch__submit:disabled .btn__arrow { opacity: 0.4; }

.pitch__submit:disabled:hover .btn__arrow-inner { transform: none; }

.pitch__submit-note {
  margin: 14px 0 0;
  font-size: clamp(13px, 0.85vw, 15px);
  font-weight: 300;
  color: rgba(0, 0, 0, 0.55);
}

.pitch:not(.is-incomplete) .pitch__submit-note { display: none; }

/* ---- планшет ---- */
@media (max-width: 1024px) {
  .pitch__sheet {
    width: calc(100vw - 2 * clamp(28px, 6vw, 64px));
    max-width: 720px;
    --pitch-notch: 36px;
  }

  .pitch__title { padding-right: 44px; }

  /* вільного місця праворуч уже немає — хрестик над аркушем, так само
     фіксований */
  .pitch__close {
    left: auto;
    right: clamp(12px, 3vw, 24px);
    top: clamp(12px, 2vh, 20px);
  }
}

/* ---- мобайл ---- */
@media (max-width: 600px) {
  .pitch__sheet {
    width: calc(100vw - 40px);
    max-width: none;
    --pitch-notch: 28px;
  }

  .pitch { --pitch-body-pad: 20px; }

  .pitch__body { padding: 24px var(--pitch-body-pad); }

  .pitch__close {
    right: 12px;
    top: 12px;
    width: 44px;
    height: 44px;
  }
}

/* ---- reduced motion: без виїздів, лише прозорість ---- */
@media (prefers-reduced-motion: reduce) {
  .pitch__sheet {
    transition: opacity 0.2s linear;
  }

  .pitch__backdrop { transition-duration: 0.2s; }
}