/* ─────────────────────────────────────────────────────────────
   styles.css - Progress One landing

   Дві розкладки, не одна адаптивна:

   ≥1150  десктоп за фреймом SITE - Desktop / 1920 max / fluid 1150-1920
          Канва 1920, 1rem = 10 дизайн-пікселів, пропорційне стиснення
          до 1150. Усередині секцій - абсолютні координати з Figma.

   <1150  мобільний за фреймом SITE - Mobile / 390
          Канва 390, 1rem = 10 мобільних пікселів, зростання до 520.
          Абсолютне позиціювання скидається, все стає потоком -
          тому порядок у DOM збігається з порядком читання на мобілці.

   Значення = число з Figma / 10.

   ЧОМУ 1150, а не 1280 (змінено 2026-08-25). Межа була 1280, і все від
   520 до 1279 отримувало телефонну колонку 520 px по центру. На 1180 -
   типовій ширині планшета в альбомній орієнтації - це давало по 330 px
   порожнечі з боків, тобто скриншот телефона посеред широкого вікна.
   Десктопна розкладка тримається значно нижче за 1280: вона просто
   масштабується. Обмежує її найдрібніший текст, бо все їде від
   1rem = ширина*0.9/192. Виміряно на реальній сторінці:
   1280 → 14.5 px, 1180 → 13.3, 1150 → 13.0, 1100 → 12.4, 1024 → 11.4.
   На 1150 найдрібніше ще читабельне; нижче - вже ні, тому там лишається
   телефонна колонка (на 820 вона виглядає акуратно, це перевірено).
   Стелю мобільної канви навмисно НЕ піднімали: пробували 640 і 768, і
   обидві дають роздутий телефонний макет - заголовок на пів екрана.
   Ширша колонка тут коштує дорожче за порожні поля.

   Межа живе в ПʼЯТИ місцях: два медіазапити тут, два в page.css,
   body{min-width} нижче - і ще в одинадцяти <source media> у розмітці
   (index.html, about.html). Рухати їх нарізно НЕ МОЖНА: якщо CSS
   перемкнеться на десктоп, а <picture> лишиться на мобільному, десктоп
   отримає дрібні мобільні іконки. tools/shoot.mjs і tools/shot-page.mjs
   теж знають це число.
   ───────────────────────────────────────────────────────────── */

/* ── Шрифт ───────────────────────────────────────────────────── */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ── Основа ──────────────────────────────────────────────────── */

html {
  /* Полотно займає 90 % вікна й центрується - по 5 % поля з боків.
     Саме частка, а не пікселі: весь макет масштабується від ширини вікна,
     тож фіксоване поле міняло б свою візуальну вагу на кожній ширині.
     Верхня межа 1920 лишається - ширше макет не росте, поле просто
     доростає само. */
  font-size: calc(min(var(--vw, 100vw) * 0.9, 1920px) / 192);
  scroll-behavior: smooth;
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  /* Ніякого min-width. Раніше тут стояло min-width: 1280px (а після
     переносу межі - 1150px), і це давало горизонтальну прокрутку рівно
     на ширині межі: медіазапит міряє вікно разом зі смугою прокрутки
     (1150), а місця під вміст лишається 1135, тож body просив на 15 px
     більше, ніж є. Баг був і зі старим числом, просто його не бачили:
     shoot.mjs запускає Chrome із --hide-scrollbars, і смуги там немає.
     Підпірка й не потрібна - уся десктопна розкладка їде від --vw, а
     нижче межі мобільний медіазапит однаково скидав min-width у 0. */
  background: var(--po-color-bg-canvas);
  color: var(--po-color-text-default);
  font-family: var(--po-font);
  font-weight: var(--po-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ol, ul, li, form, figure, figcaption { margin: 0; padding: 0; }
ol, ul { list-style: none; }
em { font-style: normal; }

img {
  display: block;
  max-width: none;
}

/* Сторінка - на всю ширину вікна, і це навмисно: поля стосуються вмісту,
   а не тла. Колонку задає .canvas (192rem = 90 % вікна), а заливки секцій,
   розділювачі й підвал доходять до країв екрана. Якщо обмежити тут ширину,
   кольорові смуги обриваються білими прогалинами з боків. */
.page { position: relative; width: 100%; }

/* Перенос, потрібний лише у вузькій колонці */
.br-mobile { display: none; }

.section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--po-color-bg-canvas);
}

/* Канва тримає координати Figma; фон секції при цьому full-bleed */
.canvas {
  position: relative;
  width: 192rem;
  height: 100%;
  margin-inline: auto;
}


/* ── Поява на прокрутці ──────────────────────────────────────── */

/* Клас js ставить інлайн-скрипт у <head>. Без нього все лишається
   видимим - контент не має зникати, якщо скрипт не виконався. */
html.js .reveal {
  opacity: 0;
  transform: translateY(1.6rem) scale(var(--po-scale, 1));
  transition:
    opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js .reveal.is-in {
  opacity: 1;
  transform: scale(var(--po-scale, 1));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: scale(var(--po-scale, 1)); transition: none; }
  /* Слайдшоу курсів зупиняється на першому кадрі - решта доступна в
     оверлеї. Специфічність 0-2-1 НАВМИСНО: базове призначення анімації
     (.case__screen > img, 0-1-1) стоїть ПІЗНІШЕ у файлі й при рівній
     специфічності перемагало - reduced-motion не працював. Знайдено
     2026-09-01 при передрелізному прогоні. */
  .case .case__screen > img { animation: none; }
}


/* ══ Розділювач секцій ═════════════════════════════ figma 656:96 ══ */

/* Еліпс, вписаний у смугу: згасання завершується рівно на всіх чотирьох
   краях, тому немає ані бічних обривів, ані різаної кромки згори й знизу. */
.divider {
  position: relative;
  width: 100%;
  height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(96rem 6rem at 50% 50%,
    rgba(224, 245, 255, 0.88) 0%,
    rgba(232, 247, 255, 0.5) 52%,
    rgba(255, 255, 255, 0) 100%);
}
.divider__signal {
  width: 172rem;
  height: 3rem;
  background: url("assets/divider-signal.svg") center / 100% 100% no-repeat;
}


/* ══ 01 - Hero ═════════════════════════════════════ figma 639:106 ══ */

.hero { height: 110rem; }

.hero__atmosphere {
  position: absolute;
  left: 133rem; top: -28rem;
  width: 72rem; height: 72rem;
}

/* Порядок у DOM написаний під мобільне читання, тому на десктопі
   зображення лежить у розмітці після тексту й перекривало б його.
   Шари задаємо явно, а не порядком елементів. */
.hero__media {
  position: absolute;
  left: 56rem; top: 16.5rem;
  width: 128rem; height: 64rem;
  z-index: 1;
}
.site-header,
.hero__thesis { z-index: 2; }
.hero__device,
.hero__device-fade {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.hero__device { object-fit: contain; }

/* Та сама шапка, що й на внутрішніх сторінках: сітка 100, центр рядка 55.
   Раніше герой стояв на 160 - єдиний блок сайту, через що логотип стрибав
   убік і вниз при переході на сторінки.

   Роздільника тут свідомо немає: перший екран лишається без горизонтальних
   поділок. На внутрішніх сторінках лінія потрібна, бо там шапка липка й
   напівпрозора і під неї заїжджає текст. */
.site-header {
  position: absolute;
  left: 10rem; top: 0;
  width: 172rem; height: 11rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__brand img { width: 29.2429rem; height: 6.7938rem; }

.site-nav { display: flex; align-items: center; gap: 5.6rem; }
.site-nav__link {
  font-weight: var(--po-weight-medium);
  font-size: 2.8rem;
  line-height: 3.6rem;
  color: var(--po-color-text-default);
  text-decoration: none;
  transition: color 0.18s ease;
}
.site-nav__link:hover,
.site-nav__link:focus-visible { color: var(--po-color-text-brand); }
/* Телефон - дія, тому кнопка, а не ще один пункт меню */
.site-nav__cta {
  padding: 1.6rem 3.2rem;
  border-radius: var(--po-radius-pill);
  background: var(--po-color-bg-brand-soft);
  color: var(--po-color-text-brand);
  font-weight: var(--po-weight-semibold);
  font-size: 2.8rem;
  line-height: 3.6rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.18s ease;
}
.site-nav__cta:hover { background: var(--po-color-bg-brand-soft-hover); transform: translateY(-0.2rem); }
.site-header__brand { transition: opacity 0.18s ease; }
.site-header__brand:hover { opacity: 0.76; }

.hero__thesis {
  position: absolute;
  left: 10rem; top: 22rem;
  width: 90rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.hero__eyebrow {
  font-weight: var(--po-weight-semibold);
  font-size: 2.6rem;
  line-height: 3.2rem;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  color: var(--po-color-text-brand);
}

.hero__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: var(--po-weight-regular);
  color: var(--po-color-text-default);
}
.hero__line { display: block; }

/* Заголовок - дві репліки, а не іменникова група, тож сходи й вирівнювання
   праворуч прибрані: вони були прийомом під «clear learning» як другу
   половину словосполучення. Тепер один лівий край, а ієрархію тримає кегль -
   теза тихіше, розворот на повний зріст і синім. */
.hero__line--1 {
  width: 90rem;
  font-size: 7.2rem;
  line-height: 8.2rem;
  letter-spacing: -0.2rem;
}
.hero__line--2 {
  width: 90rem;
  font-size: 10.6rem;
  line-height: 11.2rem;
  letter-spacing: -0.3rem;
  margin-bottom: -0.2rem;
}
.hero__line--3 {
  width: 90rem;
  font-weight: var(--po-weight-medium);
  font-size: 12rem;
  line-height: 12.6rem;
  letter-spacing: -0.36rem;
  color: var(--po-color-text-brand);
}

.hero__ecg {
  position: absolute;
  left: 10rem; top: 70rem;
  width: 54rem; height: 7.2rem;
}
.hero__waveform {
  position: absolute;
  left: 98rem; top: 83rem;
  width: 76rem; height: 15.8333rem;
}


/* ══ 01B - Client experience ═══════════════════════ figma 639:142 ══ */

.trust {
  height: 26rem;
  background: var(--po-grad-trust);
}

/* Верх і низ секції гаснуть у чистий білий - щоб шов із 01 не читався */
.trust__fade { position: absolute; left: 0; width: 100%; }
.trust__fade--top {
  top: 0; height: 7.4rem;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
.trust__fade--bottom {
  top: 17.8rem; height: 8.2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
}

.trust__label {
  position: absolute;
  left: 10rem; top: 6.6rem;
  width: 70rem;
  font-weight: var(--po-weight-medium);
  font-size: 2.6rem;
  line-height: 3.4rem;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
  color: var(--po-color-text-brand);
}

/* Смуга клієнтів. Нічого не рухається.

   Спершу тут була зациклена стрічка, і це була помилка: у ній немає
   постійної середини - кожен знак по черзі йде за край, тож найважливіші
   клієнти половину часу були обрізані, а перший зникав одразу після
   завантаження. Порядком це не лікується, бо порядок просто обертається.

   Замість цього вісімка вміщається цілком: підпис стоїть над рядком, а не
   зліва (інлайн він з'їдав 47.5rem), і на 172rem знаки займають 132rem -
   лишається по 5.7rem між ними. На мобільній та сама вісімка лягає
   сіткою 2×4. */
/* Ряд логотипів стоїть на 160, а не на 100: у фреймі він вужчий за
   решту вмісту, щоб шість знаків розійшлись рівними проміжками по 34.
   Top 12.6, а не 10.8 (правка 2026-08-26): підпис закінчується на 100,
   і зазор до ряду тепер 26 - як у фреймі. На 10.8 ELSA підходила до
   підпису на 8 px і власник справедливо назвав це тіснотою. */
.trust__strip {
  position: absolute;
  left: 16rem; top: 12.6rem;
  width: 160rem; height: 10.615rem;
  display: flex;
  align-items: center;
}
.trust__row {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

/* Розміри - просто значення з фрейму, поділені на десять. Раніше тут
   був множник --k, яким мобільна сітка масштабувала всі знаки одним
   числом; тепер це не працює, бо ELSA на телефоні лишається великою
   (0.8 від десктопної), а решта зменшується приблизно вдвічі. Кожна
   ширина написана явно у своєму блоці. */
.trust__logo { flex: none; opacity: 0.88; object-fit: contain; }
.trust__logo--elsa       { width: 15rem;   height: 10.615rem; }
.trust__logo--jnj        { width: 32rem;   height: 3.109rem; }
.trust__logo--schiller   { width: 30rem;   height: 5.557rem; }
.trust__logo--ganshorn   { width: 25.5rem; height: 6.448rem; }
.trust__logo--specsavers { width: 17.5rem; height: 6.754rem; }
.trust__logo--dentsply   { width: 23rem;   height: 6.671rem; }




/* ══ 02 - Role-based learning ══════════════════════ figma 639:151 ══ */

.roles { height: 132rem; }

.roles__stage,
.roles__table { position: absolute; inset: 0; }

.roles__atmosphere {
  position: absolute;
  left: 50rem; top: 26rem;
  width: 92rem; height: 92rem;
}
.roles__orbit--outer {
  position: absolute;
  left: 54.5rem; top: 40.5rem;
  width: 83rem; height: 57rem;
}
.roles__orbit--inner {
  position: absolute;
  left: 61.5rem; top: 45.5rem;
  width: 69rem; height: 47rem;
}

/* Конектори: img трохи більший за групу - інакше зрізає обводку */
.roles__wiring { position: absolute; inset: 0; overflow: hidden; }
.roles__wire { position: absolute; display: block; }
.roles__wire--left  { left: 50rem;  top: 50rem; width: 20rem; height: 33rem; }
.roles__wire--right { left: 117rem; top: 50rem; width: 25rem; height: 33rem; }
.roles__wire img { position: absolute; }
.roles__wire--left img {
  left: -0.138rem; top: -0.1386rem;
  width: 20.276rem; height: 33.2772rem;
}
.roles__wire--right img {
  left: -0.1375rem; top: -0.1386rem;
  width: 25.275rem; height: 33.2772rem;
}
.roles__dots { position: absolute; width: 1.1rem; height: 34.1rem; }
.roles__dots--left  { left: 49.45rem;  top: 49.45rem; }
.roles__dots--right { left: 141.45rem; top: 49.45rem; }

.roles__device {
  position: absolute;
  left: 50rem; top: 33rem;
  width: 92rem; height: 65rem;
  object-fit: contain;
}

.roles__headline {
  position: absolute;
  left: 10rem; top: 7rem;
  width: 172rem;
  text-align: center;
  font-weight: var(--po-weight-medium);
  font-size: 7.8rem;
  line-height: 8.6rem;
  letter-spacing: -0.117rem;
  color: var(--po-ink-840);
}
.roles__headline em { color: var(--po-blue-540); }

.roles__column-label {
  position: absolute;
  top: 37.1rem;
  width: 36rem;
  font-weight: var(--po-weight-semibold);
  font-size: 3.4rem;
  line-height: 4.2rem;
  text-transform: uppercase;
  color: var(--po-color-text-brand);
}
.roles__column-label--left  { left: 10rem; }
.roles__column-label--right { left: 146rem; }

.roles__item {
  position: absolute;
  width: 36rem;
  font-weight: var(--po-weight-medium);
  font-size: 3.4rem;
  line-height: 4.2rem;
}
.roles__item--role { left: 10rem;  letter-spacing: -0.0272rem; color: var(--po-color-text-default); }
.roles__item--goal { left: 146rem; letter-spacing: -0.0204rem; color: var(--po-color-text-default); }
.roles__item--1 { top: 47.9rem; }
.roles__item--2 { top: 58.9rem; }
.roles__item--3 { top: 69.9rem; }
.roles__item--4 { top: 80.9rem; }

.roles__explanation {
  position: absolute;
  left: 24rem; top: 100.8rem;
  width: 144rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  text-align: center;
}
.roles__lead {
  width: 100%;
  font-size: 5.2rem;
  line-height: 6.2rem;
  letter-spacing: -0.052rem;
  color: var(--po-ink-840);
}
.roles__detail {
  width: 172rem;
  font-size: 3.6rem;
  line-height: 5rem;
  color: var(--po-ink-520);
}
.roles__lead em,
.roles__detail em { color: var(--po-blue-540); }


/* ══ 03 - Formats ══════════════════════════════════ figma 639:201 ══ */

.formats { height: 161.2rem; }

.formats__headline {
  position: absolute;
  left: 10rem; top: 10.5rem;
  width: 172rem;
  font-weight: var(--po-weight-regular);
  font-size: 8.6rem;
  line-height: 9.2rem;
  color: var(--po-ink-880);
}
.formats__support {
  position: absolute;
  left: 10rem; top: 27.2rem;
  width: 140rem;
  opacity: 0.9;
  font-size: 3.8rem;
  line-height: 4.4rem;
  color: var(--po-ink-800);
}

/* Одна підкладка на весь ряд. Три окремі згасання належали чергуванню
   рядів; у трьох колонках друга з них лягала просто на картку симуляції
   й з'їдала їй контраст - це і був «зблідлий» середній блок. */
.formats__atmosphere { position: absolute; }
.formats__atmosphere--01 { left: 6rem; top: 42.5rem; width: 180rem; height: 42rem; }
.formats__atmosphere--02,
.formats__atmosphere--03 { display: none; }

.formats__moment { position: absolute; inset: 0; }

/* 46, не 56: у колонці 53.3rem «Software & interface» на 56 розсипається
   на третій рядок - у Geist швидше, ніж у SF Pro, бо Geist ширший. */
/* Однакова висота під заголовок, інакше дворядковий підпис 02 підтискає
   свій акцент удвічі ближче, ніж однорядкові сусіди. */
.formats__title {
  position: absolute;
  width: 53.3rem;
  min-height: 10.4rem;
  font-weight: var(--po-weight-medium);
  font-size: 4.6rem;
  line-height: 5.2rem;
  color: var(--po-ink-900);
}
.formats__accent {
  position: absolute;
  width: 17rem; height: 0.4rem;
  border-radius: 0.2rem;
  background: var(--po-grad-signal);
}
/* Одне речення на формат. Без нього кожен ряд платив повну висоту
   ілюстрації за дві-три слова назви, і половина секції була порожньою
   колонкою поруч із картинкою. */
/* Всі три візуали на одній смузі 480-780 (правка 2026-08-26): у фреймі їх
   бокси тепер рівно 300 заввишки зі спільним верхом і низом - до того ряд
   був вирівняний по намальованій площі і читався кривим. SVG курсів
   перевипущений з нового вузла 639:223, тож його канвас і є бокс - жодних
   поправок на намальовану площу більше не потрібно. */
.formats__moment--01 .formats__title  { left: 10rem; top: 86rem; text-align: left; }
.formats__moment--01 .formats__accent { left: 10rem; top: 98.4rem; }
.formats__art--01 {
  position: absolute;
  left: 11.5rem; top: 48rem;
  width: 50.4rem; height: 30rem;
}

.formats__moment--02 .formats__title  { left: 69.35rem; top: 86rem; text-align: center; }
.formats__moment--02 .formats__accent { left: 87.5rem;  top: 98.4rem; }
/* Внутрішня графіка карток задана в em, а сама картка ставить em через
   --po-card-em. Так вона малюється у своєму справжньому розмірі: transform
   растеризує шар до масштабування, і тонкі лінії з сіткою тьмяніють. */
.formats__sim-card {
  position: absolute;
  left: 68rem; top: 48rem;
  width: 55.9rem; height: 30rem;
  /* 0.65 × (55.9/53.3): картка виросла до смуги 300, внутрішній малюнок
     їде за em і мусить вирости в тій самій пропорції. */
  font-size: 0.6817rem;
  border: 1px solid var(--po-color-border-artwork);
  border-radius: var(--po-radius-panel);
  background: var(--po-grad-sim-card);
  box-shadow: var(--po-shadow-artwork);
  overflow: hidden;
}
.formats__sim-ui {
  position: absolute;
  left: -0.2em; top: -0.2em;
  width: 82em; height: 44em;
}

.formats__moment--03 .formats__title  { left: 128.7rem; top: 86rem; text-align: right; }
.formats__moment--03 .formats__accent { left: 165rem;   top: 98.4rem; }
.formats__video-card {
  position: absolute;
  left: 128.7rem; top: 48rem;
  width: 53.3rem; height: 30rem;
  font-size: 0.658rem;
  border: 1px solid var(--po-color-border-artwork);
  border-radius: var(--po-radius-panel);
  background: var(--po-grad-video-card);
  box-shadow: var(--po-shadow-artwork);
  overflow: hidden;
}
.formats__video-still,
.formats__video-tint {
  position: absolute;
  left: 2.6em; top: 5em;
  width: 52em; height: 29.2em;
  border-radius: 2.2em;
}
.formats__video-still { object-fit: cover; opacity: 0.92; }
.formats__video-tint {
  background: linear-gradient(90deg,
    rgba(3, 31, 59, 0.28) 0%,
    rgba(5, 77, 122, 0.04) 55%,
    rgba(10, 189, 224, 0.2) 100%);
}
.formats__video-play {
  position: absolute;
  left: 23.5em; top: 15.5em;
  width: 10.2em; height: 10.2em;
}
.formats__layers {
  position: absolute;
  left: 57.2em; top: 5em;
  width: 20.8em; height: 29.2em;
  background: rgba(6, 31, 56, 0.82);
  border: 0.15em solid rgba(56, 204, 240, 0.38);
  border-radius: 2.2em;
  overflow: hidden;
}
.formats__layer {
  position: absolute;
  left: 1.65em;
  width: 17.2em; height: 5.8em;
  border: 0.1em solid rgba(82, 219, 245, 0.26);
  border-radius: 1.4em;
  background: linear-gradient(90deg, rgba(20, 69, 107, 0.94) 0%, rgba(8, 122, 171, 0.68) 100%);
  overflow: hidden;
}
.formats__layer:nth-of-type(1) { top: 1.85em; }
.formats__layer:nth-of-type(2) { top: 9.65em; }
.formats__layer:nth-of-type(3) { top: 17.45em; }
.formats__layer i {
  position: absolute;
  left: 1.5em; top: 2em;
  width: var(--w); height: 1.6em;
  border-radius: 0.8em;
  background: rgba(94, 229, 250, 0.88);
}
.formats__video-timeline {
  position: absolute;
  left: 2.6em; top: 37.2em;
  width: 75.4em; height: 5em;
}

/* У Figma це прямокутник, чия радіальна заливка більша за нього самого,
   тому градієнт обрізався по краю. Тут поле full-bleed, а радіус зведений
   до 960, щоб згасання завершувалось рівно на краях канви. */
.formats__closing-atmosphere {
  position: absolute;
  left: 0; top: 108.96rem;
  width: 100%; height: 50.588rem;
  background: radial-gradient(96rem 25.294rem at 50% 50%,
    rgba(64, 199, 255, 0.15) 0%,
    rgba(26, 110, 245, 0.06) 58%,
    rgba(255, 255, 255, 0) 100%);
}
.formats__closing {
  position: absolute;
  left: 10rem; top: 116rem;
  width: 172rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6rem;
}
.formats__constellation { width: 43rem; height: 16.3rem; }
.formats__closing-text {
  width: 140rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
  color: var(--po-ink-880);
}
.formats__closing-lead {
  width: 100%;
  font-size: 5.8rem;
  line-height: 6.8rem;
  letter-spacing: -0.11rem;
}
.formats__closing-note {
  width: 100%;
  font-size: 3.8rem;
  line-height: 4.8rem;
  letter-spacing: -0.05rem;
}
.formats__headline em,
.formats__closing-lead em,
.formats__closing-note em { color: var(--po-blue-600); }


/* ══ 04 - SCHILLER case ════════════════════════════ figma 639:343 ══ */

.case { height: 330rem; }
.case .canvas {
  padding: 8rem 10rem 14rem;
  display: flex;
  flex-direction: column;
}
.case__block { position: relative; width: 100%; flex: none; }

/* ── 01 партнерство ── */
.case__partnership { height: 53rem; }
.case__atmosphere {
  position: absolute;
  left: 121rem; top: 7rem;
  width: 62rem; height: 50rem;
}
.case__headline {
  position: absolute;
  left: 0; top: 2rem;
  width: 170rem;
  font-weight: var(--po-weight-regular);
  font-size: 8.8rem;
  line-height: 9.6rem;
  color: var(--po-color-text-default);
}
.case__headline em { color: var(--po-color-text-brand); }
.case__logo {
  position: absolute;
  left: 0; top: 16.5rem;
  width: 60rem; height: 11.1rem;
  object-fit: contain;
}
.case__relationship {
  position: absolute;
  left: 69rem; top: 19.8rem;
  width: 80rem;
  font-weight: var(--po-weight-semibold);
  font-size: 3.8rem;
  line-height: 4.6rem;
  letter-spacing: 0.038rem;
  text-transform: uppercase;
  color: var(--po-color-text-brand);
}
.case__lede {
  position: absolute;
  left: 0; top: 31rem;
  width: 142rem;
  font-size: 4rem;
  line-height: 5.4rem;
  color: var(--po-color-text-secondary);
}
.case__transition {
  position: absolute;
  left: 0; top: 47rem;
  width: 172rem; height: 0.3rem;
  background: linear-gradient(90deg,
    rgba(5, 84, 235, 0.85) 0%,
    rgba(13, 194, 245, 0.45) 48%,
    rgba(13, 194, 245, 0) 100%);
}

/* ── 02 масштаб ── */
.case__scale { height: 45rem; }
.case__scale-atmosphere {
  position: absolute;
  left: 0; top: 7rem;
  width: 172rem; height: 37rem;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(232, 247, 255, 0.7) 22%,
    rgba(224, 245, 255, 0.76) 72%,
    rgba(255, 255, 255, 0) 100%);
}
.case__kicker {
  position: absolute;
  left: 0; top: 2.4rem;
  width: 100rem;
  font-weight: var(--po-weight-semibold);
  font-size: 3.4rem;
  line-height: 4.2rem;
  letter-spacing: 0.034rem;
  text-transform: uppercase;
  color: var(--po-color-text-brand);
}
.case__kicker--scale { top: 2.2rem; }

.case__metric { position: absolute; top: 10.6rem; }
.case__metric--1 { left: 0;     width: 40rem; }
.case__metric--2 { left: 43rem; width: 40rem; }
.case__metric--3 { left: 86rem; width: 40rem; }
.case__metric--4 { left: 129rem; width: 40rem; }

.case__metric-value {
  font-weight: var(--po-weight-semibold);
  font-size: 8.4rem;
  line-height: 9rem;
  color: var(--po-color-text-brand);
}
.case__metric-value--accent { color: var(--po-color-accent); }
.case__metric-label {
  margin-top: 0.6rem;
  font-weight: var(--po-weight-semibold);
  font-size: 3.4rem;
  line-height: 4.2rem;
  color: var(--po-color-text-default);
}
/* Розбивка курсів стоїть стовпчиком під самою цифрою 50. Рядок на всю ширину
   смуги вміщався в один рядок, але «14 Clinical users» опинялось під колонкою
   з відео й читалось як її уточнення. */
.case__metric-detail {
  margin-top: 3.6rem;
  font-size: 3.2rem;
  line-height: 4rem;
  color: var(--po-color-text-secondary);
}
.case__metric-detail b {
  font-weight: var(--po-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--po-color-text-default);
}

.case__metric-rule {
  position: absolute;
  top: 11.8rem;
  width: 0.2rem; height: 14rem;
  background: var(--po-color-text-brand);
}
.case__metric-rule--1 { left: 41.4rem; }
.case__metric-rule--2 { left: 84.4rem; }
.case__metric-rule--3 { left: 127.4rem; }

/* ── 03 галерея прикладів курсу (правка 2026-08-31) ──
   Було три ролі по три слайди; стало одне прев'ю зі стосом із СЕМИ
   слайдів (той самий кросфейд і клік в оверлей, лічильник 01/07) та три
   текстові пріоритети праворуч. */
.case__gallery { height: 105rem; }
.case__subhead {
  position: absolute;
  left: 0; top: 7.4rem;
  width: 160rem;
  font-weight: var(--po-weight-regular);
  font-size: 7.2rem;
  line-height: 8rem;
  color: var(--po-color-text-default);
}
.case__subhead em { color: var(--po-color-text-brand); }
.case__gallery .case__subhead { top: 6.8rem; width: 98rem; }

/* Стос слайдів, перехід - плавне згасання. Перший кадр видимий без
   анімації, тож заморозка для знімків показує саме його, а не порожньо. */
.case__screen {
  position: absolute;
  top: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--po-radius-panel);
  box-shadow: var(--po-shadow-media);
  transition: transform 0.32s ease, box-shadow 0.32s ease;
  cursor: zoom-in;
}
.case__screen > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: case-slide 35s linear infinite;
}
.case__screen > img:first-child { opacity: 1; animation-delay: -1s; }
.case__screen > img:nth-child(2) { animation-delay: 4s; }
.case__screen > img:nth-child(3) { animation-delay: 9s; }
.case__screen > img:nth-child(4) { animation-delay: 14s; }
.case__screen > img:nth-child(5) { animation-delay: 19s; }
.case__screen > img:nth-child(6) { animation-delay: 24s; }
.case__screen > img:nth-child(7) { animation-delay: 29s; }
/* 35s / 7 слайдів = по 5s на кадр: ~2% на в'їзд, видимий до 1/7 циклу. */
@keyframes case-slide {
  0%          { opacity: 0; }
  2%, 14.3%   { opacity: 1; }
  16.4%, 100% { opacity: 0; }
}
.case__screen:hover {
  transform: translateY(-0.6rem);
  box-shadow: var(--po-shadow-media-hover);
}

.case__gallery-preview { left: 0; top: 30rem; width: 104rem; height: 58.5rem; }
.case__gallery-hint {
  position: absolute;
  left: 0; top: 91.4rem;
  font-size: 2.2rem;
  line-height: 3.2rem;
  color: var(--po-color-text-secondary);
}

.case__priorities { position: absolute; left: 114rem; top: 30rem; width: 58rem; }
.case__priority { position: absolute; left: 0; width: 58rem; height: 19rem; }
.case__priority--1 { top: 0; }
.case__priority--2 { top: 22.8rem; }
.case__priority--3 { top: 45.6rem; }
.case__priority-head { position: relative; }
.case__priority-num {
  position: absolute;
  left: 0; top: 0;
  font-size: 5.2rem;
  line-height: 5.8rem;
  color: var(--po-color-text-brand);
}
.case__priority-label {
  display: block;
  margin-left: 9.4rem;
  font-weight: var(--po-weight-semibold);
  font-size: 2rem;
  line-height: 2.6rem;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
  color: var(--po-color-text-brand);
}
.case__priority-title {
  margin: 1rem 0 0 9.4rem;
  font-size: 3.2rem;
  line-height: 3.8rem;
  color: var(--po-color-text-default);
}
.case__priority-note {
  margin: 1rem 0 0 9.4rem;
  font-size: 2.1rem;
  line-height: 3rem;
  color: var(--po-color-text-secondary);
}

/* ── 04 пояснювальні відео ── */
.case__videos { height: 105rem; }
.case__videos-rule {
  position: absolute;
  left: 0; top: 7rem;
  width: 172rem; height: 0.2rem;
  background: linear-gradient(90deg,
    rgba(5, 84, 235, 0.8) 0%,
    rgba(13, 194, 245, 0.42) 46%,
    rgba(13, 194, 245, 0) 100%);
}
.case__kicker--video { top: 11.5rem; width: 90rem; }
.case__subhead--video {
  top: 16.5rem;
  font-size: 6.4rem;
  line-height: 7.2rem;
}

/* Без рамки й заокруглення: у кожного кадру в правому нижньому куті стоїть
   знак SCHILLER, і радіус його підрізав. Замість рамки - м'яка тінь. */
.case__video { position: absolute; }
.case__video img {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  box-shadow: var(--po-shadow-media);
  transition: transform 0.32s ease, box-shadow 0.32s ease;
  cursor: zoom-in;
}
.case__video:hover img {
  transform: translateY(-0.6rem);
  box-shadow: var(--po-shadow-media-hover);
}
.case__video-shot { position: relative; display: block; }
/* Прев'ю лягає поверх постера, але подій не бере - клік має долетіти до
   знімка під ним і відкрити оверлей із контролами. */
.case__video-loop {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.case__video-loop.is-on { opacity: 1; }
.case__video-shot.is-playing .case__video-badge { opacity: 0; }
.case__video-badge { transition: transform 0.32s ease, opacity 0.4s ease; }
/* На десктопі ролик заводиться сам, щойно потрапляє у вьюпорт, тож значок
   відтворення там був би обіцянкою кліку, який нічого не додає. Лишається
   на вузьких екранах, де прев'ю не грає і тап справді потрібен. */
.case__video-badge {
  display: none;
  position: absolute;
  left: 50%; top: 50%;
  width: 8.4rem; height: 8.4rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--po-color-text-brand);
  box-shadow: 0 0.8rem 2.4rem 0 rgba(5, 56, 140, 0.32);
  pointer-events: none;
}
.case__video-badge::after {
  content: "";
  position: absolute;
  left: 55%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 1.5rem 0 1.5rem 2.4rem;
  border-color: transparent transparent transparent #fff;
}
.case__video:hover .case__video-badge { transform: translate(-50%, calc(-50% - 0.6rem)); }
.case__video-title {
  font-weight: var(--po-weight-semibold);
  font-size: 3.8rem;
  line-height: 4.6rem;
  color: var(--po-color-text-default);
}
.case__video-note {
  margin-top: 0.8rem;
  font-size: 3.2rem;
  line-height: 4rem;
  color: var(--po-color-text-secondary);
}

.case__video--featured { left: 0; top: 33rem; width: 82rem; }
.case__video--featured img { height: 46.125rem; }
.case__video--featured figcaption { margin-top: 2.9rem; }

/* Два допоміжні відео - горизонтальні рядки праворуч від головного
   (правка 2026-08-26): прев'ю 35rem зліва, заголовок з описом поруч.
   Раніше вони стояли двома колонками з підписами під прев'ю, і ряд
   читався кривим. Мобільна розкладка своя - див. media-блок. */
.case__video--holter,
.case__video--spirometry { left: 86rem; width: 86rem; }
.case__video--holter { top: 33rem; }
.case__video--spirometry { top: 67.5rem; }
.case__video--holter .case__video-shot,
.case__video--spirometry .case__video-shot {
  position: absolute;
  left: 0; top: 4.4rem;
  width: 35rem;
}
.case__video--holter img,
.case__video--spirometry img { width: 35rem; height: 19.7rem; object-fit: cover; }
.case__video--holter figcaption,
.case__video--spirometry figcaption {
  position: absolute;
  left: 38.5rem; top: 4.4rem;
  width: 43.5rem; height: 19.7rem;
  margin-top: 0;
  /* Текст відцентрований по вертикалі відносно прев'ю (правка 2026-08-26):
     бокс підпису дорівнює смузі мініатюри, а флекс центрує вміст - тож
     центрування переживе і одно-, і дворядковий опис. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.case__video--holter .case__video-note,
.case__video--spirometry .case__video-note { margin-top: 1.8rem; }


/* ══ 06 - Process + Contact + Footer ═══════════════ figma 639:452 ══ */

.contact { height: 156rem; }

/* Один суцільний градієнт від білого до глибокого синього - без шва */
.contact__footer-field {
  position: absolute;
  left: 0; top: 64rem;
  width: 100%; height: 92rem;
  background: var(--po-grad-footer);
}

.contact__headline {
  position: absolute;
  left: 10rem; top: 12rem;
  width: 98rem;
  font-weight: var(--po-weight-regular);
  font-size: 7.6rem;
  line-height: 8.4rem;
  color: var(--po-ink-860);
}
.contact__intro {
  position: absolute;
  left: 10rem; top: 33rem;
  width: 84rem;
  font-size: 3.2rem;
  line-height: 4.4rem;
  color: var(--po-ink-600);
}

.contact__process { position: absolute; inset: 0; }
.contact__step { position: absolute; }
.contact__step--1 { left: 10rem; top: 48rem; }
.contact__step--2 { left: 56rem; top: 48rem; }
.contact__step--3 { left: 10rem; top: 64rem; }
.contact__step--4 { left: 56rem; top: 64rem; }

.contact__tile {
  position: absolute;
  left: 0; top: 0;
  width: 10.4rem; height: 10.4rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--po-surface-tile-border);
  border-radius: var(--po-radius-tile);
  background: var(--po-surface-tile);
  box-shadow: var(--po-shadow-tile);
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.contact__tile img {
  display: block;
  width: 5.6rem; height: 5.6rem;
}
/* <picture> лише підбирає файл під ширину екрана. display:block, а не
   contents: усередині contents тег <source> стає другим елементом сітки
   й зсуває іконку вниз. */
.contact__tile picture { display: block; }

.contact__step-index {
  position: absolute;
  left: 13rem; top: 1.2rem;
  width: 8rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--po-weight-semibold);
  font-size: 2.4rem;
  line-height: 3rem;
  color: var(--po-blue-580);
}
.contact__step-title {
  position: absolute;
  left: 13rem; top: 5rem;
  width: 32rem;
  font-weight: var(--po-weight-medium);
  font-size: 3.4rem;
  line-height: 4.2rem;
  color: var(--po-ink-860);
}

.contact-form {
  position: absolute;
  left: 110rem; top: 12rem;
  /* min-height, а не height: у спокої вміст займає 58rem, тож картка
     стоїть рівно на 64rem з макета. Росте вона лише тоді, коли
     з'являються підказки про помилки, яких у макеті немає взагалі.
     overflow: hidden лишається - він тут не для висоти, а тому що
     .field__input ширший за вміст картки. */
  width: 72rem; min-height: 64rem;
  padding: 5.2rem 5.6rem;
  border: 0.1rem solid var(--po-surface-form-border);
  border-radius: 3rem;
  background: var(--po-surface-form);
  box-shadow: var(--po-shadow-form);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.2rem;
  /* clip, а не hidden: hidden лишає блок прокручуваним програмно, тож
     фокус на полі, що не влазить, зсуває всю картку вбік. clip такого
     не дозволяє. hidden перед ним - запасний варіант для старих Safari. */
  overflow: hidden;
  overflow: clip;
}
.contact-form__heading {
  width: 100%;
  font-weight: var(--po-weight-medium);
  font-size: 4rem;
  line-height: 5.4rem;
  color: var(--po-color-text-default);
}
.contact-form__fields {
  width: 100%;
  min-height: 30rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
/* name-row більше нема: First/Last злиті в одне видиме поле Name
   (2026-08-26), CRM-розкладку робить zoho-form.js у приховані інпути. */
.field { position: relative; width: 100%; }
.field__sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.field__input {
  display: block;
  /* 100%, а не 64rem з макета. Картка має 72rem мінус 5.6rem полів з
     кожного боку, тобто 60.8rem вмісту - поле в 64rem не влазило туди
     ніколи, просто overflow: hidden це ховав. Коли з'явився рядок із
     двох імен, кожне з них лишилось 64rem і "Last name" вилізло на
     232 px: Tab наводив на нього фокус, браузер підтягував поле у
     видиму зону і з'їжджала вся картка. */
  width: 100%;
  height: 5.3rem;
  padding: 0 0 1.8rem;
  border: 0;
  border-bottom: 0.1rem solid var(--po-color-border-default);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 2.4rem;
  line-height: 3.4rem;
  color: var(--po-ink-800);
  transition: border-color 0.2s ease;
}
.field__input::placeholder { color: var(--po-ink-field); opacity: 1; }
.field__input:hover { border-bottom-color: rgba(18, 97, 222, 0.36); }
.field__input:focus {
  outline: none;
  border-bottom-color: var(--po-color-text-brand);
}
.field__input--textarea {
  min-height: 5.3rem;
  max-height: 15.5rem;
  height: auto;
  resize: none;
  overflow-y: hidden;
  white-space: pre-wrap;
  scrollbar-width: thin;
  scrollbar-color: rgba(18, 97, 222, 0.38) transparent;
}
.field__input--textarea::-webkit-scrollbar,
.doc-form__field textarea::-webkit-scrollbar { width: 0.6rem; }
.field__input--textarea::-webkit-scrollbar-track,
.doc-form__field textarea::-webkit-scrollbar-track { background: transparent; }
.field__input--textarea::-webkit-scrollbar-thumb,
.doc-form__field textarea::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(18, 97, 222, 0.38);
}
.field__input--textarea::-webkit-scrollbar-button,
.doc-form__field textarea::-webkit-scrollbar-button { display: none; }
.field.is-scrollable:not(.is-scroll-end)::after,
.doc-form__field.is-scrollable:not(.is-scroll-end)::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0.8rem;
  bottom: 0.1rem;
  left: 0;
  height: 2.4rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(249, 252, 255, 0), rgba(249, 252, 255, 1) 48%, rgba(249, 252, 255, 1));
}

.contact-form__cta {
  width: 34rem;
  height: 7.6rem;
  border: 0;
  border-radius: var(--po-radius-pill);
  background: var(--po-color-bg-brand);
  box-shadow: var(--po-shadow-cta);
  color: #fff;
  font-family: inherit;
  font-weight: var(--po-weight-medium);
  font-size: 2.8rem;
  line-height: 3.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-form__cta span { transition: transform 0.24s ease; }
.contact-form__cta:hover {
  background: #0f56c4;
  transform: translateY(-0.3rem);
  box-shadow: 0 1.4rem 2.8rem 0 rgba(5, 51, 158, 0.24);
}
.contact-form__cta:hover span { transform: translate(0.3rem, -0.3rem); }
.contact-form__cta:active { transform: translateY(0); }
.contact-form__cta:focus-visible {
  outline: 0.3rem solid var(--po-color-accent);
  outline-offset: 0.4rem;
}

.contact__divider {
  position: absolute;
  left: 10rem; top: 127rem;
  width: 172rem; height: 0.2rem;
  opacity: 0.28;
  background: var(--po-grad-footer-divider);
  box-shadow: 0 0 1rem 0 rgba(31, 199, 255, 0.28);
}

.site-footer {
  position: absolute;
  left: 10rem; top: 134rem;
  width: 172rem; height: auto;
  display: block;
  color: #fff;
}
.site-footer__top,
.site-footer__mid { display: flex; justify-content: space-between; gap: 4rem; }
.site-footer__top { align-items: flex-start; }
.site-footer__mid { margin-top: 3rem; align-items: center; }
.site-footer__pages { display: flex; align-items: center; gap: 4.8rem; padding-top: 1.8rem; }
.site-footer__reach { display: flex; align-items: center; gap: 6rem; }
.site-footer__social { display: flex; align-items: center; gap: 3.2rem; }
.site-footer__social-link {
  display: block;
  color: #fff;
  opacity: 0.82;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.site-footer__social-link img {
  display: block;
  width: 3.4rem;
  height: 3.4rem;
  filter: brightness(0) invert(1);
}
.site-footer__social-link:hover { opacity: 1; transform: translateY(-0.2rem); }
.site-footer__pages a,
.site-footer__reach a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.18s ease;
}
.site-footer__pages a,
.site-footer__reach a { font-weight: var(--po-weight-medium); }
.site-footer__pages a { font-size: 2.6rem; line-height: 3.4rem; opacity: 0.92; }
.site-footer__reach a { font-size: 2.8rem; line-height: 3.6rem; }
.site-footer__pages a:hover,
.site-footer__reach a:hover { opacity: 1; text-decoration: underline; }
.site-footer__brand img { width: 30.084rem; height: 7.038rem; }
.site-footer__brand { transition: opacity 0.18s ease; }
.site-footer__brand:hover { opacity: 0.78; }

/* Ширини боксів фігмівські - вони й розкладають рядок через space-between.
   Пошта й копірайт трохи ширші за свій бокс; вилазять вони у проміжок. */
.site-footer__copyright {
  margin-top: 2rem;
  font-size: 2.6rem;
  line-height: 3.4rem;
  white-space: nowrap;
  opacity: 0.78;
}


/* ══════════════════════════════════════════════════════════════════
   МОБІЛЬНИЙ РЕЖИМ - фрейм SITE - Mobile / 390
   Абсолютне позиціювання скидається, все стає потоком.
   ══════════════════════════════════════════════════════════════════ */


/* ══ Перегляд знімка ═══════════════════ figma 797:152 / 798:151 ══ */

/* Курсор-лупа лише там, де збільшення справді щось дає */
[data-zoom] { cursor: zoom-in; }

.zoom {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.zoom::backdrop { background: rgba(5, 14, 46, 0.94); }
.zoom:not([open]) { display: none; }
/* Поля тримають знімок у безпечній зоні: зверху лічильник, з боків стрілки.
   Без них на низькому вікні фігура лізла під лічильник і за обидва краї. */
.zoom[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11rem 15rem 6rem;
}

.zoom__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.8rem;
  max-width: 100%;
  max-height: 100%;
}
/* Висота міряється від вікна, а не в rem: 70rem - це 700 px макета, і на
   вікні нижче за них знімок виходив за екран. min-height:0 дає flex ще й
   стиснути його, коли підпис забирає більше, ніж очікувалось. */
.zoom__image {
  max-width: 136rem;
  max-height: 70rem;
  max-height: min(70rem, calc(100dvh - 31rem));
  min-height: 0;
  width: auto; height: auto;
  border-radius: 1.6rem;
  object-fit: contain;
}
.zoom__video {
  max-width: 136rem;
  max-height: 70rem;
  max-height: min(70rem, calc(100dvh - 31rem));
  min-height: 0;
  width: auto; height: auto;
  border-radius: 1.6rem;
  background: #000;
}
.zoom__image[hidden], .zoom__video[hidden] { display: none; }
.zoom__caption { flex: none; text-align: center; }
.zoom__title {
  font-weight: var(--po-weight-semibold);
  font-size: 3.4rem;
  line-height: 4.2rem;
  color: #fff;
}
.zoom__note {
  margin-top: 0.8rem;
  font-size: 2.8rem;
  line-height: 3.6rem;
  color: rgba(255, 255, 255, 0.72);
}
.zoom__counter {
  position: absolute;
  left: 0; top: 6.8rem;
  width: 100%;
  text-align: center;
  font-weight: var(--po-weight-medium);
  font-size: 2.4rem;
  line-height: 3rem;
  color: #6bb5ff;
}

.zoom__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease;
}
.zoom__btn:hover,
.zoom__btn:focus-visible { background: rgba(255, 255, 255, 0.24); }
/* `display: flex` вище перебиває атрибут hidden, і стрілки лишались на
   екрані живими кнопками, які нічого не роблять: у відео один елемент,
   гортати нема чого. Лічильник цього не мав, бо display йому не задано. */
.zoom__btn[hidden] { display: none; }
.zoom__btn--close { right: 6rem; top: 6rem; width: 7.2rem; height: 7.2rem; font-size: 3rem; }
.zoom__btn--prev,
.zoom__btn--next { top: 50%; width: 8.8rem; height: 8.8rem; margin-top: -4.4rem; font-size: 4.4rem; }
.zoom__btn--prev { left: 5.2rem; }
.zoom__btn--next { right: 5.2rem; }

@media (max-width: 1149px) {

  html { font-size: calc(clamp(320px, var(--vw, 100vw), 520px) / 39); }

  /* body{min-width} тут більше не скидається - його вже немає в базі. */

  .canvas {
    width: 100%;
    max-width: 39rem;
    height: auto;
  }

  /* Скид на всю глибину, а не лише на прямих дітей: інакше вкладена
     графіка лишається абсолютною і «тікає» до канви, розтягуючи документ.
     :where() тримає специфічність нульовою, тож правила нижче перекривають
     її без боротьби. */
  .section :where(.canvas *) {
    position: static;
    inset: auto;
  }

  /* Назад позиціонуємо тільки те, де накладання є частиною малюнка */
  .hero__media,
  .formats__sim-card,
  .formats__video-card,
  .case__block,
  .contact__tile,
  .field { position: relative; }

  .hero__device,
  .hero__device-fade,
  .formats__sim-ui,
  .formats__video-still,
  .formats__video-tint,
  .formats__video-play,
  .formats__layers,
  .formats__layer,
  .formats__layer i,
  .formats__video-timeline,
  .case__scale-atmosphere,
  .field__sr { position: absolute; }

  .hero__device,
  .hero__device-fade { inset: 0; }

  .section {
    height: auto;
    padding-inline: 2rem;
  }
  .section > .canvas {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  /* Декор, який на 390 не читається або заважає */
  .hero__atmosphere, .hero__ecg, .hero__waveform,
  .roles__wiring, .roles__orbit,
  .formats__atmosphere, .formats__closing-atmosphere,
  .case__atmosphere,
  .case__metric-rule { display: none; }

  .br-mobile { display: inline; }

  /* ── розділювач ── */
  /* Між героєм, довірою і ролями переходу немає - так у мобільному макеті */
  .page > .divider:first-of-type { display: none; }
  /* ЕКГ-сплеск на 390 читається як випадковий обривок лінії, а не як перехід.
     Мобільний макет використовує тут тихе згасання - тонку лінію, що тане
     до країв. */
  .divider { height: 2.4rem; background: none; }
  .divider__signal {
    width: 26rem; height: 0.1rem;
    background: linear-gradient(90deg,
      rgba(13, 194, 245, 0) 0%,
      rgba(13, 194, 245, 0.5) 50%,
      rgba(13, 194, 245, 0) 100%);
    opacity: 1;
  }

  /* ── 01 герой ── */
  .hero > .canvas { padding-top: 0; padding-bottom: 0; }
  /* Рядок 7rem, як на внутрішніх сторінках, але без лінії під ним. */
  .site-header { width: auto; height: 7rem; margin-bottom: 3.7rem; }
  /* Вордмарк на телефоні 120 замість 150: рівно ті 30 px, яких бракувало,
     щоб кнопка стала поруч із "About Us" на повний кегль. Значення з
     мобільного фрейму. */
  .site-header__brand img { width: 12rem; height: 2.788rem; }
  .site-nav { gap: 2.2rem; }
  .site-nav__link { font-size: 1.45rem; line-height: 1.9rem; }
  /* Кнопка більше не ховається. Раніше вона не влазила, бо поруч стояло
     ще й посилання "Contacts" - те саме місце призначення двічі. */
  .site-nav__cta { padding: 0.8rem 1.6rem; font-size: 1.4rem; line-height: 1.8rem; }
  .hero__thesis { width: 100%; gap: 1.6rem; }
  .hero__eyebrow { font-size: 1.1rem; line-height: 1.4rem; letter-spacing: 0.07rem; }
  .hero__headline { font-weight: var(--po-weight-semibold); }
  .hero__line--1, .hero__line--2, .hero__line--3 {
    width: 100%;
    padding-left: 0;
    text-align: left;
    font-weight: var(--po-weight-semibold);
    margin-bottom: 0;
  }
  /* Та сама ієрархія, що на десктопі */
  .hero__line--1 { font-size: 2.6rem; line-height: 3.2rem; letter-spacing: -0.05rem; }
  .hero__line--2,
  .hero__line--3 { font-size: 4rem; line-height: 4.4rem; letter-spacing: -0.11rem; }
  /* Знімок стоїть у тих самих полях, що й решта сторінки: на 390 єдиний
     елемент «у край» читався як збій сітки, а не як прийом. */
  .hero__media {
    width: 100%;
    margin: 3.6rem 0 0;
    height: 18.6rem;
    border-radius: 1.2rem;
    overflow: hidden;
  }
  .hero__device { object-fit: cover; }
  /* Згасання країв малювалося під зображення в край; усередині рамки воно
     лише висвітлює кути. */
  .hero__device-fade { display: none; }

  /* ── 01B довіра ── */
  .trust { height: auto; padding-block: 4.4rem 4rem; }
  /* Без згасань смуга довіри отримувала дві жорсткі горизонтальні межі:
     верхня різала знімок героя, нижня - заголовок ролей. Висоти згасань
     дорівнюють полям секції, тож логотипи в них не потрапляють. */
  .trust__fade--top { height: 4.4rem; }
  .trust__fade--bottom { top: auto; bottom: 0; height: 4rem; }
  .trust__label { width: 100%; font-size: 1.1rem; line-height: 1.4rem; margin-bottom: 2.6rem; }
  /* Сітка 2×3: на 350 шість знаків в один рядок не стають, але й крутити
     їх не треба - так усі шість видно постійно. Розміри й проміжки з
     мобільного фрейму (804:151), знаки центровані в комірках. */
  .trust__strip {
    position: relative;
    left: auto; top: auto;
    width: 100%; height: auto;
    display: block;
  }
  .trust__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    column-gap: 2rem;
    row-gap: 1.4rem;
  }
  .trust__logo--elsa       { width: 12rem;   height: 8.492rem; }
  .trust__logo--jnj        { width: 15rem;   height: 1.46rem; }
  .trust__logo--schiller   { width: 14.5rem; height: 2.687rem; }
  .trust__logo--ganshorn   { width: 12.5rem; height: 3.159rem; }
  .trust__logo--specsavers { width: 9rem;    height: 3.471rem; }
  .trust__logo--dentsply   { width: 11.5rem; height: 3.333rem; }

  /* ── 02 ролі ── */
  .roles > .canvas { padding-top: 1.6rem; padding-bottom: 4.4rem; }
  /* На 390 сторінка тримає один лівий край. Десктопне центрування тут
     давало три різні краї тексту в одній колонці. */
  .roles__headline {
    width: 100%;
    text-align: left;
    font-weight: var(--po-weight-semibold);
    font-size: 3.2rem;
    line-height: 3.5rem;
    letter-spacing: -0.05rem;
  }
  .roles__stage {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 1.6rem;
  }
  /* Підсвіт лишається, але як фон - у потоці він роздував секцію
     і стискав сусіда-пристрій до кількох десятків пікселів. */
  .roles__atmosphere {
    position: absolute;
    left: 50%; top: -1.6rem;
    width: 23rem; height: 23rem;
    transform: translateX(-50%);
  }
  .roles__device { flex: none; width: 27rem; height: 19.1rem; }

  .roles__table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.6rem;
    margin-top: 3.4rem;
  }
  .roles__column-label {
    width: auto;
    font-weight: var(--po-weight-medium);
    font-size: 1.15rem;
    line-height: 1.5rem;
    letter-spacing: 0.07rem;
    padding-bottom: 1.2rem;
  }
  .roles__item {
    width: auto;
    font-size: 1.5rem;
    line-height: 1.9rem;
    letter-spacing: 0;
    padding-block: 1.1rem;
    border-top: 1px solid var(--po-color-border-default);
  }
  .roles__item--role { font-weight: var(--po-weight-regular); }
  /* Тут синій лишається навмисно: дві колонки стоять поруч у вузькій
     таблиці, і колір робить роботу розділювача. На десктопі вони
     рознесені приладом, тож там колонка вже темна. */
  .roles__item--goal { font-weight: var(--po-weight-medium); color: var(--po-color-text-brand); }

  .roles__explanation {
    width: 100%;
    margin-top: 3.6rem;
    gap: 1.2rem;
    align-items: flex-start;
    text-align: left;
  }
  .roles__lead {
    font-weight: var(--po-weight-semibold);
    font-size: 2.1rem;
    line-height: 2.6rem;
    letter-spacing: -0.02rem;
  }
  .roles__detail { width: 100%; font-size: 1.55rem; line-height: 2.2rem; }

  /* ── 03 формати ── */
  .formats > .canvas { padding-top: 1.6rem; padding-bottom: 4.4rem; }
  .formats__headline {
    width: 100%;
    font-weight: var(--po-weight-semibold);
    font-size: 3.2rem;
    line-height: 3.6rem;
  }
  .formats__support { width: 100%; margin-top: 1.4rem; font-size: 1.55rem; line-height: 2.2rem; opacity: 1; }

  /* Список із розділювачами - та сама будова, що й у мобільній таблиці
     ролей вище: волосяна лінія зверху, підпис ліворуч, ілюстрація праворуч.
     Три колонки в ряд на 390 не стають, а стовпчик із картинками на всю
     ширину роздував секцію і давав три різні ліві краї. */
  .formats__moment {
    display: grid;
    grid-template-columns: 1fr 21.2rem;
    align-items: center;
    column-gap: 1.6rem;
    margin-top: 1.4rem;
    padding-top: 2rem;
    padding-bottom: 0.6rem;
    border-top: 1px solid var(--po-color-border-default);
  }
  /* Десктопні ширини задані через .formats__moment--NN .formats__title,
     тому тут потрібна така сама специфічність - інакше вони перемагають
     і розривають сітку. */
  /* Ліве/центр/праве вирівнювання належить трьом десктопним колонкам;
     у вузькій колонці воно б розсинхронізувало підписи з рештою сторінки. */
  .formats__moment .formats__title { width: auto; text-align: left; }

  .formats__title {
    grid-column: 1; grid-row: 1;
    font-weight: var(--po-weight-semibold);
    font-size: 2.2rem;
    line-height: 2.6rem;
    letter-spacing: -0.03rem;
  }

  .formats__accent { display: none; }
  /* Намальована площа в усіх трьох - 21.2rem, і саме її вирівняно по
     правому краю колонки. У SVG курсів усередині 7.2 % порожнього поля
     ліворуч і 4 % праворуч, тому його рамка ширша й зсунута від'ємним
     полем; виліт лишається всередині 2rem поля секції. */
  .formats__art { grid-column: 2; grid-row: 1; }
  .formats__art--01 { width: 23.895rem; height: 14.235rem; margin-left: -1.729rem; }
  .formats__art--02 { width: 21.2rem; height: 11.376rem; border-width: 0.1rem; border-radius: 0.88rem; }
  .formats__art--03 { width: 21.2rem; height: 11.935rem; border-width: 0.1rem; border-radius: 0.94rem; }

  /* Внутрішня графіка карток масштабується разом із карткою */
  .formats__sim-ui { left: 0; top: 0; width: 100%; height: 100%; }
  .formats__video-still, .formats__video-tint {
    left: 4%; top: 11%; width: 64%; height: 64%;
    border-radius: 0.6rem;
  }
  .formats__video-play { left: 30%; top: 34%; width: 2.6rem; height: 2.6rem; }
  .formats__layers { left: 71%; top: 11%; width: 25%; height: 64%; border-radius: 0.6rem; border-width: 0.05rem; }
  .formats__layer { left: 8%; width: 84%; height: 1.4rem; border-radius: 0.35rem; border-width: 0.05rem; }
  .formats__layer:nth-of-type(1) { top: 8%; }
  .formats__layer:nth-of-type(2) { top: 40%; }
  .formats__layer:nth-of-type(3) { top: 72%; }
  .formats__layer i { left: 12%; top: 30%; height: 0.4rem; width: 60%; }
  .formats__video-timeline { left: 4%; top: 82%; width: 92%; height: 1.4rem; }

  .formats__closing { width: 100%; margin-top: 4.4rem; gap: 2rem; align-items: flex-start; }
  .formats__constellation { width: 19.6rem; height: 7.4rem; }
  .formats__closing-text { width: 100%; align-items: flex-start; text-align: left; }
  .formats__closing-lead {
    font-weight: var(--po-weight-semibold);
    font-size: 2.4rem;
    line-height: 2.8rem;
    letter-spacing: -0.04rem;
  }
  .formats__closing-note { font-size: 1.65rem; line-height: 2.4rem; letter-spacing: 0; }

  /* ── 04 кейс ── */
  .case > .canvas { padding: 1.6rem 0 4.4rem; }
  .case__block { height: auto; }

  .case__headline {
    width: 100%;
    font-weight: var(--po-weight-semibold);
    font-size: 3.6rem;
    line-height: 4rem;
    letter-spacing: -0.06rem;
  }
  .case__logo { width: 19.6rem; height: 3.63rem; margin-top: 2rem; }
  .case__relationship {
    width: 100%;
    margin-top: 1.2rem;
    font-weight: var(--po-weight-medium);
    font-size: 1.15rem;
    line-height: 1.5rem;
    letter-spacing: 0.07rem;
  }
  .case__lede { width: 100%; margin-top: 2rem; font-size: 1.65rem; line-height: 2.4rem; }
  .case__transition { width: 100%; height: 0.1rem; margin-top: 2rem; }

  .case__scale { margin-top: 5.2rem; }
  .case__scale-atmosphere {
    position: absolute;
    left: -2rem; top: 0;          /* рівно на поля секції, у край екрана */
    width: calc(100% + 4rem);
    height: 100%;
  }
  .case__kicker {
    position: relative;
    width: 100%;
    font-weight: var(--po-weight-medium);
    font-size: 1.15rem;
    line-height: 1.5rem;
    letter-spacing: 0.07rem;
    margin-bottom: 2rem;
  }
  /* Підкладка малюється по межах блоку, тож поля має задавати сам блок:
     без них кікер стояв упритул до верхнього краю заливки, а нижній ряд
     цифр вивалювався за неї. */
  .case__scale {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.8rem;
    row-gap: 2.6rem;
    padding: 3rem 0 3.2rem;
  }
  .case__kicker--scale { grid-column: 1 / -1; }
  .case__metric { position: relative; width: auto; }
  .case__metric-value { font-size: 3.4rem; line-height: 3.8rem; letter-spacing: -0.05rem; }
  .case__metric-label { margin-top: 0.2rem; font-weight: var(--po-weight-medium); font-size: 1.45rem; line-height: 1.9rem; }
  .case__metric-detail { margin-top: 1rem; font-size: 1.25rem; line-height: 1.6rem; }

  .case__gallery { margin-top: 5.2rem; }
  /* Десктопний .case__gallery .case__subhead сильніший за скид - ширину
     треба повернути явно, інакше 98rem тікає за край телефона. */
  .case__gallery .case__subhead { top: auto; width: 100%; }
  .case__subhead {
    width: 100%;
    margin-top: 0.6rem;
    font-weight: var(--po-weight-semibold);
    font-size: 3.1rem;
    line-height: 3.5rem;
    letter-spacing: -0.04rem;
  }
  /* Прев'ю галереї: скид знімає absolute з контейнера, але НЕ зі слайдів
     усередині (.case__screen > img сильніший за :where) - тож стос
     лишається стосом, потрібен лише relative на контейнері і габарити. */
  .case__gallery-preview {
    position: relative;
    width: 100%; height: 19.7rem;
    margin-top: 2.8rem;
    border-radius: 1rem;
  }
  .case__gallery-hint {
    margin-top: 1rem;
    font-size: 1.5rem;
    line-height: 2.2rem;
  }
  .case__priorities { width: auto; margin-top: 1.8rem; }
  .case__priority { position: relative; width: auto; height: auto; margin-top: 2.4rem; }
  .case__priority-head { position: relative; }
  .case__priority-num {
    position: static;
    display: inline-block;
    margin-right: 1.2rem;
    font-size: 2.6rem;
    line-height: 3rem;
    vertical-align: baseline;
  }
  .case__priority-label {
    display: inline-block;
    margin-left: 0;
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .case__priority-title { margin: 0.8rem 0 0; font-size: 2rem; line-height: 2.5rem; }
  .case__priority-note { margin: 0.8rem 0 0; font-size: 1.4rem; line-height: 2rem; }

  .case__videos { margin-top: 5.2rem; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .case__videos-rule { position: relative; width: 100%; grid-column: 1 / -1; margin-bottom: 2.2rem; }
  .case__kicker--video { grid-column: 1 / -1; margin-bottom: 1.2rem; }
  .case__subhead--video { grid-column: 1 / -1; font-size: 3rem; line-height: 3.4rem; margin-top: 0; }
  .case__video { position: relative; width: auto; }
  .case__video--featured { grid-column: 1 / -1; margin-top: 2.6rem; }
  .case__video--featured img { height: 17.44rem; }
  .case__video--holter,
  .case__video--spirometry { margin-top: 2.6rem; }
  /* Десктопна рядкова розкладка (прев'ю зліва, текст поруч) задана
     селекторами сильнішими за мобільний скид на :where - тому absolute,
     координати і ширини треба гасити тут явно, інакше фігури складаються
     в нуль висоти. Це той самий клас пастки, що в README про скид. */
  .case__video--holter .case__video-shot,
  .case__video--spirometry .case__video-shot { position: relative; left: auto; top: auto; width: auto; }
  .case__video--holter figcaption,
  .case__video--spirometry figcaption { position: static; left: auto; top: auto; width: auto; height: auto; display: block; }
  .case__video--holter img,
  .case__video--spirometry img { width: auto; height: 9.28rem; }
  .case__video img { border: 0; border-radius: 0; }
  /* Скидання мобільної розкладки знімає absolute з усього всередині .canvas,
     а значок відтворення тримається саме на ньому - тож повертаємо. */
  .case__video-shot { position: relative; width: auto; }
  /* Обов'язково повертаємо absolute: скидання мобільної розкладки знімає
     його з усього всередині .canvas, і прев'ю падало у потік другою
     картинкою під постером. Саме цей баг ловили на планшетах. */
  .case__video-loop { position: absolute; inset: 0; }
  /* Значок лишається як запасний шлях: iOS в енергозбереженні автоплей
     блокує. Пішов ролик - значок зникає сам; не пішов - тап працює. */
  .case__video-badge { display: block; position: absolute; left: 50%; top: 50%; width: 3.6rem; height: 3.6rem; }
  .case__video-shot.is-playing .case__video-badge { display: none; }
  .case__video-badge::after { border-width: 0.65rem 0 0.65rem 1rem; }
  .case__video--holter .case__video-badge,
  .case__video--spirometry .case__video-badge { width: 2.8rem; height: 2.8rem; }
  .case__video figcaption { width: auto; margin-top: 1.4rem !important; }
  .case__video-title { font-weight: var(--po-weight-semibold); font-size: 1.8rem; line-height: 2.3rem; }
  .case__video--holter .case__video-title,
  .case__video--spirometry .case__video-title { font-size: 1.65rem; line-height: 2.1rem; min-height: 4.2rem; }
  .case__video-note { margin-top: 0.4rem; font-size: 1.45rem; line-height: 2rem; }
  .case__video--holter .case__video-note,
  .case__video--spirometry .case__video-note { margin-top: 0.4rem; font-size: 1.35rem; line-height: 1.9rem; }

  /* ── 06 контакти ── */
  .contact { padding-inline: 0; }
  .contact > .canvas { padding: 1.6rem 0 0; }
  .contact__footer-field { display: none; }
  .contact__headline,
  .contact__intro,
  .contact__process,
  .contact-form { margin-inline: 2rem; }

  .contact__headline {
    width: auto;
    font-weight: var(--po-weight-semibold);
    font-size: 3rem;              /* 3.2 переносило «have.» на свій рядок */
    line-height: 3.5rem;
    letter-spacing: -0.05rem;
  }
  .contact__intro { width: auto; margin-top: 1.4rem; font-size: 1.55rem; line-height: 2.2rem; }

  .contact__process { display: flex; flex-direction: column; gap: 1.8rem; margin-top: 3rem; }
  .contact__step { display: flex; align-items: center; gap: 1.6rem; }
  .contact__tile { position: relative; width: 6rem; height: 6rem; border-radius: 1.4rem; flex: none; }
  .contact__tile img { width: 4rem; height: 4rem; }
  .contact__step-index {
    display: block;
    width: auto;
    font-weight: var(--po-weight-medium);
    font-size: 1.15rem;
    line-height: 1.5rem;
    letter-spacing: 0.07rem;
  }
  .contact__step-title {
    display: block;
    width: auto;
    font-weight: var(--po-weight-semibold);
    font-size: 1.7rem;
    line-height: 2.1rem;
  }
  .contact__step > span:not(.contact__tile) { position: static; }

  .contact-form {
    /* min-height теж треба гасити, не лише height: на 390 одиниця
       інша, і 64rem з десктопа перетворюються на 640 px порожньої
       картки. Той самий клас помилки, що й мобільний скидач
       позиціювання, який чистить і position, і inset. */
    width: auto; height: auto; min-height: 0;
    margin-top: 3.8rem;
    padding: 2.6rem 2.2rem;
    border-radius: 2.2rem;
    gap: 2.4rem;
  }
  .contact-form__heading {
    width: 100%;
    font-weight: var(--po-weight-semibold);
    font-size: 2.6rem;
    line-height: 3.1rem;
  }
  .contact-form__fields { width: 100%; height: auto; min-height: 0; gap: 2rem; }
  .field { width: 100%; }
  .field__input {
    width: 100%;
    height: 3.7rem;
    padding-bottom: 1rem;
    font-size: 1.45rem;
    line-height: 1.9rem;
  }
  .field__input--textarea { max-height: 10.6rem; }
  .field.is-scrollable:not(.is-scroll-end)::after,
  .doc-form__field.is-scrollable:not(.is-scroll-end)::after { height: 1.5rem; }
  .contact-form__cta {
    width: 100%;
    height: 5.2rem;
    border-radius: 2.6rem;
    font-size: 1.6rem;
    line-height: 2.2rem;
  }

  /* Підвал: смуга згасання приходить на суцільне темне */
  .contact__divider { display: none; }
  .site-footer {
    position: relative;
    width: 100%; height: auto;
    display: block;
    margin-top: 5.6rem;
    padding: 3rem 2rem 4.4rem;
    background:
      linear-gradient(180deg, #ffffff 0%, #f9fdff 14%, #edf8ff 27%,
        #d8ecff 41%, #bbd9fc 51%, #94bff4 60%, #6da4e8 67%,
        #4b86dc 73%, #326cd0 79%, #2358bb 85%, #153e93 92%, #061c6b 100%) top / 100% 17rem no-repeat,
      #061c6b;
    padding-top: 20rem;
  }
  .site-footer__brand img { width: 15rem; height: 3.5rem; }
  .site-footer__top,
  .site-footer__mid { flex-direction: column; align-items: flex-start; gap: 0; }
  .site-footer__top { gap: 2rem; }
  .site-footer__mid { margin-top: 2.4rem; gap: 1.4rem; }
  .site-footer__pages {
    padding-top: 0;
    flex-wrap: wrap;
    gap: 1.6rem 2.2rem;
  }
  .site-footer__pages a { font-size: 1.35rem; line-height: 1.8rem; }
  .site-footer__reach { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .site-footer__reach a { font-size: 1.55rem; line-height: 2.1rem; }
  .site-footer__social { gap: 2rem; }
  .site-footer__social-link img { width: 2.2rem; height: 2.2rem; }
  .site-footer__copyright {
    margin-top: 2.2rem;
    font-size: 1.35rem;
    line-height: 1.8rem;
  }

  /* ── перегляд знімка ── */
  /* Стрілки йдуть під низ: з боків вони перекривали б сам знімок на 390 */
  .zoom__figure { gap: 2.6rem; }
  /* Знизу стрілки й лічильник, згори хрестик - під них і лишається місце */
  .zoom[open] { padding: 7rem 2rem 14rem; }
  .zoom__image,
  .zoom__video { max-width: 35rem; max-height: min(52rem, calc(100dvh - 24rem)); border-radius: 1rem; }
  .zoom__title { font-size: 1.7rem; line-height: 2.2rem; }
  .zoom__note { margin-top: 0.4rem; font-size: 1.5rem; line-height: 2rem; }
  .zoom__counter { top: auto; bottom: 8.6rem; font-size: 1.4rem; line-height: 1.8rem; }
  .zoom__btn--close { right: 2.2rem; top: 2.2rem; width: 4.4rem; height: 4.4rem; font-size: 1.9rem; }
  .zoom__btn--prev,
  .zoom__btn--next { top: auto; bottom: 7rem; margin-top: 0; width: 5.2rem; height: 5.2rem; font-size: 2.6rem; }
  .zoom__btn--prev { left: 5.4rem; }
  .zoom__btn--next { right: 5.4rem; }
}


/* ── Стани форми ─────────────────────────────────────────────────
   Спільні для форми лендінгу (.field) і форми контактів
   (.doc-form__field): contacts.html теж підключає styles.css. */

.field, .doc-form__field { position: relative; }

/* Приманка для ботів. Ховаємо саме display:none, а не зсувом за екран:
   мобільний скидач гасить position і inset усередині .canvas, і поле
   зсунуте координатами просто з'явилося б посеред форми на телефоні. */
.form-trap { display: none; }

/* Форма, яка вже відпрацювала. Картка лишається на місці і тримає
   свою висоту, тож секція не перебудовується; підтвердження стоїть
   у ній по центру, а не притиснуте до верхнього краю. */
.contact-form.is-done, .doc-form.is-done { justify-content: center; }

.zoho-submit-target { display: none; width: 0; height: 0; border: 0; }

.form-note {
  display: block;
  margin-top: 0.8rem;
  font-size: 2rem;
  line-height: 2.6rem;
  color: var(--po-color-text-error);
}

/* Підказки скрізь стоять у потоці, з тим самим ритмом, що на
   сторінці контактів. Щоб це працювало й на лендингу, картка форми і
   блок полів мають рости - див. min-height у .contact-form та
   .contact-form__fields. Фіксована висота там означала, що три
   підказки виштовхують вміст за межі блоку і останній рядок лягає
   під кнопку. */
/* Специфічність не нижча за .doc-form input у page.css: той файл
   підключається пізніше й на рівних вагах перебивав би цей колір. */
.field.is-invalid .field__input,
.field.is-invalid .field__input:focus,
.doc-form__field.is-invalid input,
.doc-form__field.is-invalid input:focus,
.doc-form__field.is-invalid textarea,
.doc-form__field.is-invalid textarea:focus { border-bottom-color: var(--po-color-border-error); }

/* Підтвердження стає на місце форми, у тій самій картці. */
.form-done {
  width: 100%;
  padding-block: 2rem;
  max-width: 60rem;
  outline: none;
}
.form-done__icon {
  width: 4.4rem;
  height: 4.4rem;
  margin-bottom: 1.6rem;
  border: 0.2rem solid var(--po-color-accent);
  border-radius: 50%;
  background: var(--po-surface-form);
  color: var(--po-color-text-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--po-weight-semibold);
  font-size: 2.8rem;
  line-height: 1;
}
.form-done__title {
  font-weight: var(--po-weight-medium);
  font-size: 3.4rem;
  line-height: 4.2rem;
  color: var(--po-color-text-default);
}
.form-done__body {
  margin-top: 1.6rem;
  font-size: 2.4rem;
  line-height: 3.6rem;
  color: var(--po-color-text-secondary);
  overflow-wrap: anywhere;
}
.form-done__link {
  display: inline-block;
  margin-top: 2rem;
  font-weight: var(--po-weight-medium);
  font-size: 2.4rem;
  line-height: 3.6rem;
  color: var(--po-color-text-brand);
  text-decoration: none;
  border-bottom: 1px solid var(--po-color-border-default);
}
.form-done__link:hover { border-bottom-color: var(--po-color-text-brand); }

.form-submit-status {
  max-width: 60rem;
  margin-bottom: -1.2rem;
  font-size: 2rem;
  line-height: 2.8rem;
  color: var(--po-color-text-error);
}

@media (max-width: 1149px) {
  .form-note { margin-top: 0.5rem; font-size: 1.3rem; line-height: 1.8rem; }
  .form-done { padding-block: 1rem; max-width: none; }
  .form-done__icon { width: 3.2rem; height: 3.2rem; margin-bottom: 1rem; border-width: 0.15rem; font-size: 2rem; }
  .form-done__title { font-size: 1.9rem; line-height: 2.4rem; }
  .form-done__body { margin-top: 0.9rem; font-size: 1.45rem; line-height: 2.2rem; }
  .form-done__link { margin-top: 1.2rem; font-size: 1.45rem; line-height: 2.2rem; }
  .form-submit-status { max-width: none; margin-bottom: -0.8rem; font-size: 1.3rem; line-height: 1.8rem; }
}