/* ==========================================================================
   NÜKT — Секції лендингу
   Залежить від css/variables.css і css/base.css (підключати ПІСЛЯ них).
   ========================================================================== */

/* ==========================================================================
   HERO — Figma 1008:8 (1440 × 565)
   --------------------------------------------------------------------------
   Композиція з чотирьох шарів. Координати задані у відсотках від 1440 × 565,
   тому від 768px і аж до стелі --scale-max (1920px) сцена масштабується
   пропорційно сама собою; вище 1920px усе впирається в clamp() / max-width
   і композиція просто центрується.
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
}

.hero__inner {
  position: relative;
  max-width: var(--scale-max);
  margin-inline: auto;
  /* 565 / 1440 = 39.24%; верхня межа = 565 × (1920/1440) */
  min-height: clamp(360px, 39.24vw, 753px);
}

/* Бейдж має окремий мобільний ассет, тому загорнутий у <picture>.
   display: contents — щоб обгортка не створювала власної коробки й <img>
   лишався для розкладки прямою дитиною. */
.hero picture {
  display: contents;
}

/* --------------------------------------------------------------------------
   Відео 1.1_nukt.mp4 — замість фото чипсів (1338:13) і банера (1366:2).
   Фон усієї секції на всю ширину вікна. Висота секції не змінюється
   (39.24vw), а кліп 16:9 вищий за неї, тому object-fit: cover підрізає
   згори й знизу. Банер "FRIED IN WATER / 0% OIL" стоїть посередині
   кадру й не страждає.
   Для мобільних окремий вертикальний кліп (.hero__video--mobile).
   -------------------------------------------------------------------------- */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0; /* найнижчий шар: підписи й бейдж лежать поверх */
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero__video--mobile {
  display: none;
}

/* .hero__inner іде після відео в DOM і не позиціонується за z-index,
   тож без цього відео (z-index: 0) перекрило б його вміст. */
.hero__inner {
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Штамп SIAL Innovation — Figma 1339:92
   -------------------------------------------------------------------------- */
/* Бейдж — Figma 1339:92.

   Розмір і місце взяті з видимої печатки в макеті: коло діаметром ~147px
   з центром у (1196.5, 153.5) на фреймі 1440 × 565.

   Десктопний ассет 1.3_badge-desktop.png (10801²) має широкі прозорі поля:
   сама печатка займає лише 39.8% полотна (≈4300px) і стоїть по центру.
   Тому коробка img більша за печатку: 147 / 0.398 ≈ 369.2px, і
   центрована на тій самій точці — прозорі краї виходять за верх секції,
   де їх обрізає overflow: hidden. Якщо ассет колись обріжуть по край
   печатки, сюди треба повернути width 147px і відповідні top / right. */
.hero__badge {
  position: absolute;
  z-index: 2;
  top: 17%;
  right: 13.09%;
  width: 8.64%;
  max-width: 492px;
  height: auto;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Слоган "Extra crispy." — Figma 1188:3 (32px bold, ls −0.48px)

   Тут навмисно НЕ використовується токен --font-size-h3: його нижня межа
   24px не встигає за композицією. Слоган стоїть в абсолютних координатах,
   тому має зменшуватись у тому ж темпі, що й уся сцена (2.22vw), інакше на
   768px його правий край впритул підходить до картинки з чипсами.
   У колонковій розкладці нижче 768px повертаємо звичний --font-size-h3.
   -------------------------------------------------------------------------- */
.hero__tagline {
  position: absolute;
  z-index: 1;
  /* За правками — лівий нижній кут, на одній лінії зі "Swiss made" */
  bottom: 7.96%; /* 45 / 565 */
  left: 13.33%;  /* 192 / 1440 */
  color: var(--color-text);
  font-size: clamp(1.125rem, 2.22vw, 2.667rem); /* 18 → 32 (1440) → 42.7 (1920) */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

/* --------------------------------------------------------------------------
   "Swiss made" + прапор — Figma 1272:27
   -------------------------------------------------------------------------- */
.hero__origin {
  position: absolute;
  z-index: 1;
  /* За правками — правий нижній кут, дзеркально до слогана */
  bottom: 7.96%; /* 45 / 565 */
  right: 13.33%; /* 192 / 1440 */
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text); /* чорний, як слоган; прапор лишається червоним */
  font-size: clamp(0.875rem, 1.11vw, 1.333rem); /* 14 → 16 (1440) → 21.3 (1920) */
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.hero__origin-flag {
  width: clamp(18px, 1.25vw, 24px); /* росте разом із написом поруч */
  height: auto;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   МОБІЛЬНА КОМПОЗИЦІЯ — Figma 1272:2 (фрейм 430 × 700)

   Це не "розкладка десктопу в колонку", а власний макет: інший кадр фото,
   інший банер (текст притиснутий уліво, щітка лише праворуч), бейдж і
   підписи в правій частині екрана.

   Працює так само, як десктопна композиція: фрейм задає пропорцію, усе
   всередині — відсотки від нього, тому сцена масштабується разом із
   шириною екрана й на 320px, і на 430px виглядає однаково.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero__inner {
    aspect-ratio: 430 / 700; /* фрейм макета */
    min-height: 0;
  }

  /* Вертикальний кліп 1080 × 1920 на весь фрейм; cover підрізає згори
     й знизу (при 430 — по ≈ 32px), банер посередині кадру лишається. */
  .hero__video--desktop {
    display: none;
  }

  .hero__video--mobile {
    display: block;
  }

  /* Бейдж, слоган і "Swiss made" — поверх відео в тих самих місцях, що й
     на десктопі: бейдж угорі праворуч, слоган знизу ліворуч, "Swiss made"
     знизу праворуч. Бічні поля — 30 / 430. */
  .hero__badge {
    top: 48%;
    right: 6.977%;  /* 30 / 430 */
    width: 23.256%; /* 100 / 430 */
    max-width: none;
  }

  /* Підписи — 16px bold при фреймі 430, тобто 3.72vw.

     Нижня межа clamp — щоб на 320px рядок не впирався в край екрана,
     верхня — щоб у діапазоні 430–767px (розкладні телефони, вузькі
     планшети) підписи росли разом із рештою сцени. */

  .hero__tagline {
    bottom: 5%;
    left: 6.977%;   /* 30 / 430 */
    font-size: clamp(0.875rem, 3.72vw, 1.5rem); /* 14 → 16 при 430 → 24 */
  }

  .hero__origin {
    bottom: 5%;
    right: 6.977%;  /* 30 / 430 */
    font-size: clamp(0.875rem, 3.72vw, 1.5rem);
    /* У макеті інтерліньяж normal. Без цього коробка успадкувала б 1.5 від
       body й текст стояв би на ~3px нижче. */
    line-height: 1.15;
  }

  /* 18px при фреймі 430 — той самий темп, що й напис поруч */
  .hero__origin-flag {
    width: clamp(16px, 4.19vw, 27px);
  }
}

/* ==========================================================================
   SECTION HEAD — переюзабельна шапка секції
   --------------------------------------------------------------------------
   Патерн "eyebrow + заголовок + лід по центру" повторюється майже в кожній
   секції макета (What is NÜKT, The Paradox, Advantages, Product Range,
   Where to buy, FAQ, About, Contact), тому винесений окремим блоком.
   Типографіку дають готові класи з base.css: .eyebrow, .heading-2, .lead.
   ========================================================================== */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

.section-head__text {
  max-width: 709px; /* 1002:58 */
}

/* ==========================================================================
   INTRO — секція "What is NÜKT", Figma 1002:52 (1440 × 1025)
   --------------------------------------------------------------------------
   Вертикальний ритм макета: 80 → шапка → 56 → слайдер (645) → 19 → крапки → 88

   За правками клієнта блакитна плашка над слайдером максимально низька:
   поля над і під шапкою зменшені до 32 (при 1440), шрифти не змінювались.
   ========================================================================== */
.intro {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.22vw, 43px);
  padding-block: clamp(24px, 2.22vw, 43px) clamp(48px, 6.11vw, 117px);
  background-image: linear-gradient(to bottom, var(--color-bg-tint), var(--color-bg));
  overflow-x: clip; /* маскот прив'язаний до краю вікна — без горизонтального скролу */
}

.intro__head {
  position: relative;
}

/* Зона під знак (4.05vw відступу + ~11.6vw рамки повернутого знака ≈ 17vw
   від краю вікна), симетрично з обох боків, щоб шапка лишалась по центру.
   Від неї віднімається відступ самої шапки від краю вікна, коли вона
   впирається в --container-max. Довгі заголовки (FR) переносяться, а не
   лізуть під знак. На планшеті 17vw замало для мінімального розміру знака,
   тому є нижня межа 160px. */
@media (min-width: 768px) {
  .intro__head {
    padding-inline: max(var(--gutter), calc(max(17vw, 160px) - (100% - min(100%, var(--container-max))) / 2));
  }
}

/* Знак Ü — як .process__mascot: той самий кут і відступ від правого краю
   вікна (а не контейнера шапки), але менший, щоб не виходити за плашку.
   right рахується від шапки: 50% − 50vw — це правий край вікна. */
.intro__mascot {
  position: absolute;
  top: 50%;
  right: calc(50% - 50vw + 4.05vw);
  width: clamp(96px, 9.03vw, 173px); /* 130 при 1440 */
  height: auto;
  transform: translateY(-50%) rotate(-29.79deg);
  pointer-events: none;
  user-select: none;
}

/* На телефоні місця збоку від тексту немає, тому знак стає вотермарком
   за шапкою — як .footer__mark на мобільних. Чорний на 0.1 поверх
   блакитного фону дає м'який сіро-блакитний, тексту він не заважає.
   isolation тримає z-index: -1 усередині шапки, над фоном секції. */
@media (max-width: 767px) {
  /* Проміжок до слайдера перенесено в нижнє поле шапки: висота плашки та
     сама, але знак, прив'язаний до низу шапки, може опуститись до фото. */
  .intro {
    gap: 0;
  }

  .intro__head {
    isolation: isolate;
    padding-bottom: 24px;
  }

  .intro__mascot {
    z-index: -1;
    /* Притиснутий до низу плашки. Кут, що виступає нижче, ховається
       під слайдер — він пізніше в DOM і малюється поверх. */
    top: auto;
    bottom: -8px;
    right: calc(50% - 50vw + 7vw);
    transform: rotate(-29.79deg);
    width: min(34vw, 160px);
    opacity: 0.1;
  }
}

/* ==========================================================================
   SLIDER — самостійний переюзабельний блок
   --------------------------------------------------------------------------
   У макеті рамка 1400 × 645 із полями по 20px, але за рішенням проєкту
   слайдер зроблено full-bleed — від краю до краю на будь-якій ширині.
   Пропорція макета зберігається, а стеля 885px морозить висоту на позначці
   1920: далі кадр не росте, картинка добирається через object-fit.

   Висота задана напряму через vw, а не через aspect-ratio: aspect-ratio у
   парі з max-height стискає БІЛЬШУ сторону, тобто на 2560px різав би ширину
   до 1921px і повертав би поля з боків — рівно те, чого ми позбуваємось.
   Перехід між слайдами — крос-фейд: макет анімації не задає, а фейд
   безпечніший за translateX у контейнері з aspect-ratio (не дає шансу
   з'явитися горизонтальному скролу).
   ========================================================================== */
.slider {
  width: 100%;
}

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

/* Висота, фон і тінь — специфіка секції "What is NÜKT", а не слайдера
   взагалі: у "Manifesto" рамка інша. Тому вони живуть у міксі .intro__*. */
.intro__viewport {
  height: min(46.07vw, 885px); /* 645 / 1400 = 46.07%; стеля = висота при 1920 */
  background-color: var(--color-white);
  box-shadow: 0 18px 44px -30px rgba(28, 51, 74, 0.16); /* 1171:56 */
}

.slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms ease, visibility 0s linear 700ms;
}

.slider__slide--active {
  opacity: 1;
  visibility: visible;
  transition: opacity 700ms ease, visibility 0s;
}

/* --------------------------------------------------------------------------
   Перетягування курсором. Перехід лишається кросфейдом, тож слайд за
   курсором не їде — жест читається як «наступний / попередній». Увесь
   відгук дає курсор.
   -------------------------------------------------------------------------- */
.slider--draggable .slider__viewport {
  cursor: grab;
  touch-action: pan-y; /* вертикальний скрол сторінки лишаємо браузеру */
}

.slider--draggable.is-dragging .slider__viewport {
  cursor: grabbing;
  user-select: none;
}

.slider__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Підпис: два спани на спільній базовій лінії — 52px і 20px.
   У Figma ls задано абсолютно (−1.56px); тут −0.03em, бо це те саме значення
   для головного 52px спана й акуратніше масштабується для меншого. */
.slider__caption {
  position: absolute;
  top: 3.88%; /* 25 / 645 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline; /* обидва спани на спільній базовій лінії */
  color: var(--color-text);
  /* Базовий розмір = розмір великого спана. Так gap рахується від 52px і дає
     ті самі ~13px, що й пробіл усередині 52px-тексту в макеті; якби проміжок
     лишався звичайним пробілом між спанами, він успадкував би 14px від body
     і підпис виглядав би злиплим. */
  font-size: clamp(1.75rem, 3.61vw, 4.333rem); /* 28 → 52 (1440) → 69.3 (1920) */
  gap: 0.25em;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.slider__caption-value {
  font-size: 1em;
}

.slider__caption-label {
  font-size: clamp(0.875rem, 1.39vw, 1.667rem); /* 14 → 20 (1440) → 26.7 (1920) */
}

/* Крапки — з SVG 1339:53: кола 13px, крок 24px (отже gap 11px).

   Коло 13px — це те, що видно, але не те, куди треба цілити: сама кнопка
   24×44 (крок макета по горизонталі × зручна ціль для пальця по вертикалі),
   а коло малює ::before. gap тепер нульовий — кнопки стоять упритул, тож
   між ними немає мертвих зон, а візуальний крок лишається той самий — 24px.

   --dots-gap-top — відстань від кадру до самого кола з макета. Кнопка вища
   за коло на 31px, тому половина цієї різниці знімається згори й знизу:
   рядок займає в потоці рівно стільки ж місця, що й раніше. */
.slider__dots {
  --dots-gap-top: 19px; /* 924 − 905 */

  display: flex;
  justify-content: center;
  gap: 0;
  margin-block: calc(var(--dots-gap-top) - 15.5px) -15.5px;
}

.slider__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.slider__dot::before {
  content: '';
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: var(--color-dot-idle);
  transition: background-color var(--transition-fast);
}

.slider__dot:hover::before {
  background-color: var(--color-text-subtle);
}

.slider__dot--active::before {
  background-color: var(--color-text);
}

/* Фокус обводить коло, а не всю 24×44 кнопку — інакше рамка виглядала б
   втричі більшою за те, що вона позначає. */
.slider__dot:focus-visible {
  outline: 0;
}

.slider__dot:focus-visible::before {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Graceful degradation: пропорція макета (2.17:1) на вузьких екранах
   перетворила б слайд на смужку — на 375px це було б ~154px висоти.
   Тому нижче 1024px кадр поступово стає вищим, а картинка кадрується cover.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .intro__viewport {
    height: 56.25vw; /* 16 / 9 */
  }
}

@media (max-width: 767px) {
  .intro__viewport {
    height: 75vw; /* 4 / 3 */
  }

  .slider__caption {
    top: var(--space-4);
  }
}

/* ==========================================================================
   PARADOX — секція "The Paradox", Figma 1002:72 (1440 × 780)
   --------------------------------------------------------------------------
   Фон — відео на всю ширину, текст поверх нього. Ніякої прив'язки до скролу:
   секція звичайної висоти й поводиться як усі інші. Відтворенням займається
   js/background-video.js — грає, поки секцію видно.
   ========================================================================== */
.paradox {
  position: relative;
  overflow: hidden;
  min-height: min(54.17vw, 1040px); /* 780 / 1440; стеля = висота при 1920 */
  background-color: var(--color-ink); /* видно лише поки не намалювався постер */
}

.paradox__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Скрим за текстом. У макеті його немає й не треба: дизайнер вибрав кадр,
   де текст лежить на білому. Але кадр змінюється весь час, і на середині
   кліпу чипс під'їжджає під підпис — сірий лід втрачає контраст. Еліпс саме
   під текстовим блоком тримає читабельність на будь-якому кадрі й лишається
   непомітним там, де фон і так білий. */
.paradox__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(
    ellipse 46% 30% at 50% 27%,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.6) 45%,
    rgba(255, 255, 255, 0) 100%
  );
}

.paradox__head {
  position: absolute;
  z-index: 2;
  top: 15.51%; /* 121 / 780 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

/* Заголовок цієї секції — 48px і чисто чорний, а не --font-size-h2 / --color-text:
   він лежить на фото, і зайва контрастність тут навмисна. Значення локальні,
   бо це разові величини однієї секції, а не системні токени. */
.paradox__title {
  color: #000;
  font-size: clamp(1.75rem, 3.3334vw, 3rem); /* 28 → 48 (48/1440 = 3.3333%) */
}

.paradox__lead {
  max-width: 612px; /* 1002:83 */
  color: #5f6870;
  font-size: clamp(1rem, 1.25vw, 1.125rem); /* 16 → 18 */
}

/* --------------------------------------------------------------------------
   Graceful degradation: нижче 768px висота йде від контенту, а не від
   пропорції макета — текст на вузькому екрані вищий, і абсолютна шапка
   могла б вилізти за межі секції з overflow: hidden.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .paradox {
    display: flex;
    align-items: flex-start;
    min-height: min(125vw, 560px);
  }

  .paradox__head {
    position: static;
    transform: none;
    padding-top: clamp(40px, 14vw, 90px);
    padding-bottom: clamp(32px, 10vw, 64px);
  }
}

/* ==========================================================================
   MANIFESTO — секція "Beyond Snacking", Figma 1002:284 (1440 × 720)
   --------------------------------------------------------------------------
   П'ять слайдів: кожен — прозорий PNG із чипсами по краях кадру плюс власний
   заголовок. Фон блакитний і спільний на всі слайди, тому картинки й
   експортовані з альфою.

   Eyebrow, напис NATÜR-PÜR і крапки однакові на всіх слайдах, тому лежать у
   секції, а не всередині слайдів — інакше довелося б повторювати їх п'ять
   разів і синхронізувати.

   Слайдер у режимі доріжки: слайди можна тягати курсором.
   ========================================================================== */
.manifesto {
  position: relative;
  overflow: hidden;
  min-height: min(50vw, 960px); /* 720 / 1440; стеля = висота при 1920 */
  background-color: var(--color-bg-tint);
}

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

.manifesto__viewport {
  height: 100%;
}

.manifesto__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

/* Заголовок слайда: 48px, lh 1.14, ls −0.72px (= −0.015em при 48px). */
.manifesto__title {
  position: absolute;
  top: 33.06%; /* 238 / 720 */
  left: 50%;
  transform: translateX(-50%);
  width: min(920px, 86%);
  color: var(--color-text);
  font-size: clamp(1.5rem, 3.3334vw, 3rem); /* 24 → 48 */
  font-weight: var(--font-weight-bold);
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-align: center;
  text-wrap: balance;
}

/* Перший і останній слайди в макеті сині — це рамка думки: з чого почали і
   чим закінчили. Три середні — темні. */
.manifesto__title--accent {
  color: var(--color-accent);
}

.manifesto__eyebrow {
  position: absolute;
  z-index: 2;
  top: 26.39%; /* 190 / 720 */
  left: 50%;
  transform: translateX(-50%);
}

/* Напис NATÜR-PÜR.

   Частка з макета (18.2% ширини секції) робоча лише на широкому
   екрані. Ассет дуже вузький (1008 × 50, аспект 20:1), тому на телефоні
   18.2% — це близько 68px ширини й 3px висоти: напис перетворюється на
   риску. Звідси нижня межа clamp() — вона вмикається нижче ~1100px і
   далі тримає напис читабельним. На ширинах макета (1440 і вище)
   нічого не змінюється: 18.2% лишається в межах. */
.manifesto__wordmark {
  position: absolute;
  z-index: 2;
  top: 70.83%; /* 510 / 720 */
  left: 50%;
  transform: translateX(-50%);
  /* 262.08 / 1440 → стеля 262.08 × (1920/1440) */
  width: clamp(200px, 18.2%, 349px);
  height: auto;
}

.manifesto__dots {
  position: absolute;
  z-index: 2;
  top: 94.86%; /* 683 / 720 */
  left: 0;
  right: 0;
  /* Рядок не в потоці, тому від'ємні поля .slider__dots тут ні до чого.
     Замість них — зсув на половину різниці між кнопкою (44px) і колом (13px),
     щоб саме коло лишилось на лінії макета. */
  margin-block: -15.5px 0;
}

/* --------------------------------------------------------------------------
   Graceful degradation: пропорція макета (2:1) на вузькому екрані дала б
   секцію ~190px заввишки — туди не влізе навіть заголовок. Тому нижче 768px
   секція стає вищою. Чипси при цьому кадруються по центру, але вони розкидані
   по всьому периметру, тож верхні й нижні лишаються в кадрі.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .manifesto {
    min-height: min(150vw, 620px);
  }
}

/* ==========================================================================
   DAILY LIFE — секція "Advantages", Figma 1002:85 (1440 × 1075)
   Слайди: 1002:85 · 1170:2 · 1170:8 · 1170:14
   --------------------------------------------------------------------------
   Вертикальний ритм макета:
   98 → шапка (74) → 25 → картка (1403 × 734) → 21 → крапки (13) → 110

   У макеті картка має поля 18px з боків, але за тим самим рішенням, що й
   слайдер у "What is NÜKT", вона зроблена full-bleed — від краю до краю.
   Пропорція макета (1403 × 734) зберігається, тінь 1002:92 лишається:
   без бічних полів вона працює як м'яка підкладка під нижнім краєм кадру.
   Усі чотири ассети рівно 1403 × 734, тобто 1:1 розмір картки, тому
   кадрування cover вмикається лише тоді, коли пропорція їде.
   ========================================================================== */
.daily {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.74vw, 33px); /* 25 / 1440 */
  padding-block: clamp(48px, 6.81vw, 131px) clamp(48px, 7.64vw, 147px);
  background-color: var(--color-bg);
}

/* У макеті між eyebrow і заголовком 14px, а не 20px, як у .section-head */
.daily__head {
  gap: 14px; /* 1002:86 */
}

/* Висота — від ширини кадру (734 / 1403), бо кадр тепер на всю ширину
   екрана. Стеля морозить її на позначці --scale-max: 734 × (1920/1403). */
.daily__viewport {
  height: min(52.32vw, 1005px);
  background-color: var(--color-white);
  box-shadow: 0 16px 40px -24px rgba(28, 51, 74, 0.16); /* 1002:92 */
}

.daily__image {
  user-select: none;
}

.daily__dots {
  --dots-gap-top: 21px; /* 952 − 931 */
}

/* --------------------------------------------------------------------------
   Graceful degradation: пропорція картки 1.91:1 на вузькому екрані
   перетворила б фото на смужку, тому кадр поступово стає вищим —
   тим самим сходинками, що й слайдер у "What is NÜKT".
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .daily__viewport {
    height: 56.25vw; /* 16 / 9 */
  }
}

@media (max-width: 767px) {
  .daily__viewport {
    height: 75vw; /* 4 / 3 */
  }
}

/* ==========================================================================
   PROCESS (ZEEN TECH) — секція "How it's made", Figma 1002:104 (1440 × 1319)
   --------------------------------------------------------------------------
   Вертикальний ритм макета:
   120 → шапка (91) → 83 → сітка 2×2 (753) → 124 → плашка ZEEN (70) → 78

   Поля задані не секції, а кожному блоку окремо: шапка й плашка живуть у
   контентній колонці (120px з боків), а сітка кадрів у макеті ширша —
   виходить на 17px від країв екрана. Одне спільне padding-inline на секції
   такого зробити не дало б.

   Сітка — Grid 2×2 з gap 19px; кожен кадр тримає пропорцію макета через
   aspect-ratio (тут це безпечно: жодного max-height, який міг би стиснути
   більшу сторону, як у слайдерах). Нижче 768px сітка стає в одну колонку.
   ========================================================================== */
.process {
  position: relative;
  /* Маскот вилазить за нижній край секції (1366:9 доходить до 1450 при
     висоті 1319) і лягає поверх Product Range, а не зрізається: обрізаний
     він читався як помилка, і на 1920 від нього зникало ~100px.
     z-index піднімає секцію над наступною, інакше її градієнтний фон
     перекрив би хвіст маскота. До карток він не дістає ні на якій ширині —
     там 120px верхнього поля Product Range і ще шапка. */
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding-block: clamp(56px, 8.34vw, 120px) clamp(40px, 5.42vw, 78px);
  background-color: var(--color-bg-tint);

  /* 172 / 1440; від нього ж рахується ліве поле плашки */
  --zeen-badge: clamp(120px, 11.94vw, 229px);
}

/* --------------------------------------------------------------------------
   Шапка: заголовок притиснутий до низу зліва, пігулки — до верху справа
   (1002:105 — items-end + content-start у правому фреймі).
   -------------------------------------------------------------------------- */
.process__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.process__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* 16 — 1002:106 */
}

/* Єдиний заголовок у макеті з ДОДАТНИМ трекінгом: +0.88px при 44px.
   Решта H2 мають −0.02em, тому значення перекривається тут, а не в токені. */
.process__title {
  margin: 0;
  letter-spacing: 0.02em; /* 1002:110 */
}

.process__tm {
  font-size: 0.364em; /* 16 / 44 — 1345:45 */
  font-weight: var(--font-weight-regular);
}

.process__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2); /* 8 — 1002:111 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Пігулка 1002:112: 32px заввишки = 9 + 14 (текст) + 9 */
.process__tag {
  padding: 9px 14px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  line-height: normal;
  letter-spacing: 0.08em; /* 0.96 / 12 */
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Сітка кадрів 1002:120
   -------------------------------------------------------------------------- */
.process__flow {
  display: grid;
  /* minmax(0, …), а не просто 1fr: інакше мінімум колонки = min-content
     самої картинки (692px), і на вузькому екрані сітка вилазить за край. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px; /* 383 − 364 */
  width: 100%;
  max-width: var(--scale-max);
  margin-inline: auto;
  margin-block: clamp(40px, 5.76vw, 83px) clamp(56px, 8.61vw, 124px);
  padding-inline: clamp(12px, 1.18vw, 23px); /* 17 / 1440 */
}

/* Біла підкладка й тінь потрібні саме тут: 6.3 і 6.4 зняті на білому, без
   картки вони б розчинилися у блакитному фоні секції. */
.process__card {
  overflow: hidden;
  aspect-ratio: 692 / 364; /* 1002:122 */
  background-color: var(--color-white);
  box-shadow: 0 14px 34px -20px rgba(28, 51, 74, 0.16);
}

.process__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Плашка ZEEN 1002:141 + значок 1010:3 + маскот 1366:9

   Значок у макеті — сусід плашки, а не її вміст: він виступає на 11px за
   лівий край і вищий за неї (172 проти 70). Тому він absolute, а не
   флекс-елемент: інакше 172px розпирали б плашку по висоті, а від'ємні
   margin довелося б перераховувати щоразу, коли значок змінює розмір.
   Місце під нього тримає ліве поле плашки: значок + 16 = 188, тобто рівно
   та позиція, з якої в макеті починається текст (1002:145).

   Праве поле — не 34, як у макеті, а зона під маскот. У макеті текст
   короткий і до маскота не дістає, але на вужчих екранах він переноситься
   й заліз би просто під нього.
   -------------------------------------------------------------------------- */
.process__footnote {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.process__note {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 70px;
  margin: 0;
  padding-block: var(--space-3);
  padding-left: calc(var(--zeen-badge) + 16px); /* = 188 при 1440 */
  /* Зона маскота. 10.3vw — це його bbox мінус прозорі поля: у макеті
     (1320 − 1164) / 1440 = 10.83vw по bbox, але ліворуч у нього ще
     ~7px порожнечі, і саме вони дозволяють рядку лишитися одним. */
  padding-right: clamp(34px, 10.3vw, 250px);
  border-radius: 22px;
  background-color: var(--color-white);
  box-shadow: 0 14px 34px -22px rgba(28, 51, 74, 0.14);
}

.process__badge {
  position: absolute;
  top: 50%;
  left: -11px; /* 109 − 120: значок виступає за лівий край плашки */
  width: var(--zeen-badge);
  height: var(--zeen-badge);
  transform: translateY(-50%);
}

.process__note-text {
  color: var(--color-text);
  font-size: clamp(0.9375rem, 1.11vw, 1rem); /* 15 → 16 */
  font-weight: var(--font-weight-bold);
  line-height: 1.55;
}

/* Маскот прив'язаний до правого краю, а не до лівого: коли ширина впреться
   в max-width, правий край лишиться там, де в макеті. Обертання —
   навколо центру, тому width — це розмір НЕОБЕРНУТОЇ картинки (190.743),
   а не її bounding box (244.51). */
.process__mascot {
  position: absolute;
  z-index: 1;
  right: 4.05%;                     /* (1440 − 1381.63) / 1440 */
  top: clamp(-15px, -0.77vw, -6px); /* −11.12 при 1440 */
  width: 13.25vw;                   /* 190.743 / 1440 */
  max-width: 254px;                 /* × (1920/1440) */
  height: auto;
  transform: rotate(-29.79deg);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Graceful degradation
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .process__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .process__tags {
    justify-content: flex-start;
  }

  /* Одна колонка; кадр трохи вищий за макетні 1.9:1 — на 375px смужка
     185px заввишки читалася б як банер, а не як фото процесу. */
  .process__flow {
    grid-template-columns: minmax(0, 1fr);
  }

  .process__card {
    aspect-ratio: 16 / 9;
  }

  /* Значок і текст в один рядок на 375px не вміщаються — лишилося б
     ~70px на текст. Тому плашка стає колонкою, а значок повертається
     у звичайний потік. */
  .process__note {
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    text-align: center;
  }

  .process__badge {
    position: static;
    width: 120px;
    height: 120px;
    transform: none;
  }

  /* Маскот декоративний — на вузькому екрані він лише з'їдав би місце. */
  .process__mascot {
    display: none;
  }
}

/* ==========================================================================
   PRODUCT RANGE — секція "Natür pür to enjoy", Figma 1002:167 (1440 × 1234)
   --------------------------------------------------------------------------
   Вертикальний ритм макета:
   120 → шапка (76) → 48 → сітка 2 × 3 (466 + 22 + 466) → 120

   У макеті сітка — flex-wrap із картками фіксованих 372px, тобто
   3 × 372 + 2 × 22 = 1160 при контентній колонці 1200: праворуч лишались
   40px порожнечі. Тут це Grid із трьома рівними колонками на всю ширину
   колонки — на 1440 картка виходить 385 замість 372, зате ряд рівно
   закінчується на правій рейці, як шапки решти секцій.

   Колір продукту (смужка, крапка, плашки мов і шапка таблиці в модалці)
   задається модифікатором картки через --product-color; --product-ink —
   колір тексту на цьому фоні.
   ========================================================================== */
.products {
  padding-block: var(--section-padding-block);
  background-image: linear-gradient(to bottom, var(--color-bg-tint), var(--color-bg));
}

.products__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.34vw, 64px); /* 48 */
}

/* Шапка тут вирівняна вліво, а не по центру, як .section-head. */
.products__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4); /* 16 — 1002:169 */
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap); /* 22 — 1002:175 */
}

/* --------------------------------------------------------------------------
   Картка 1002:176
   Смужка 4px — це border-top, а не окремий блок: так вона не додає зайвого
   елемента в розмітку і не зсувається від пропорції картинки.
   -------------------------------------------------------------------------- */
.product-card {
  --product-color: var(--color-text);
  --product-ink: var(--color-white);

  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 4px solid var(--product-color);
  background-color: var(--color-white);
  box-shadow: 0 18px 44px -30px rgba(28, 51, 74, 0.16); /* 1002:176 */
}

/* Кольори — із заливок смужок і крапок у макеті (1002:177 … 1002:271).
   Текст на жовтих, зеленій і помаранчевій плашках темний, а не білий, як на
   упаковці: білий на цих кольорах не добирає контрасту 4.5:1. */
.product-card--salz            { --product-color: #fdc70a; --product-ink: var(--color-text); }
.product-card--paprika         { --product-color: #da2128; }
.product-card--suesskartoffel  { --product-color: #f16a21; --product-ink: var(--color-text); }
.product-card--rote-bete       { --product-color: #a41e53; }
.product-card--apfel           { --product-color: #7ebc42; --product-ink: var(--color-text); }
.product-card--salz-allumettes { --product-color: #f8d449; --product-ink: var(--color-text); }

/* Ассети 375 × 322 — рівно рамка пачки в картці (372 × 320), тож картинка
   просто тягнеться на ширину картки. Стеля висоти потрібна у вузьких
   розкладках, де картка стає ширшою: пачка тоді лишається по центру на
   білому, а не роздувається на пів екрана. Фон ассетів білий, як і картка,
   тому поля contain непомітні. */
.product-card__image {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  user-select: none;
  transition: transform var(--transition-base);
}

/* Картинка — кнопка: відкриває модалку з пачкою з двох боків.
   Легкий зум на наведенні підказує, що вона клікабельна.
   Від'ємний outline-offset — бо картка з overflow: hidden зрізала б
   зовнішню рамку фокусу. */
.product-card__media {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: zoom-in;
}

.product-card__media:focus-visible {
  outline-offset: -4px;
}

.product-card__media:hover .product-card__image {
  transform: scale(1.04);
}

/* 30 від пачки до назви, 14 від назви до кнопок, 26 знизу — 1002:179 */
.product-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px var(--space-4) 26px;
}

.product-card__name {
  display: inline-flex;
  align-items: center;
  gap: 9px; /* 1002:180 */
  color: var(--color-text);
  font-size: var(--font-size-h4); /* 20 */
  font-weight: var(--font-weight-bold);
  line-height: normal;
  letter-spacing: var(--letter-spacing-h4);
  text-align: center;
}

.product-card__name::before {
  content: '';
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--product-color);
}

/* Кнопки в макеті стоять у фреймі 324px і займають його майже порівну
   (143 і 142, проміжок 26). Тому це дві рівні колонки з max-width 324:
   на 1440 виходить той самий малюнок, а у вужчій картці кнопки
   стискаються разом, а не переносяться одна під одну. */
.product-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.81vw, 26px);
  width: 100%;
  max-width: 324px; /* 1054:30 */
}

.product-card__button {
  padding-inline: var(--space-3);
  white-space: nowrap;
}

/* NUTRITIONAL 1054:33: сіро-блакитна заливка замість білої */
.product-card__button--surface {
  background-color: var(--color-surface);
}

/* Правило вище стоїть пізніше за .button--secondary:hover з base.css і
   перебило б його заливку — без цього рядка текст ставав би білим на
   світлому фоні. */
.product-card__button--surface:hover {
  background-color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   Graceful degradation

   Трьом колонкам потрібна картка щонайменше ~290px, щоб дві кнопки стали
   поруч. На 1199 це вже на межі, тому нижче 1200 сітка йде у дві колонки
   і лишається двоколонковою до найвужчих екранів.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* На мобільних картка ~130–170px: дві кнопки поруч не вміщаються, тому
   вони стають одна під одною на всю ширину, а кегль, поля і проміжки
   зменшуються, щоб "Süsskartoffel" не вилазив за рамку. */
@media (max-width: 767px) {
  .products__grid {
    gap: var(--space-3);
  }

  .product-card__image {
    max-height: 220px;
  }

  /* Довга назва ("Salz Allumettes" на 320) переноситься в два рядки —
     кнопки притиснуті донизу, щоб у сусідніх картках стояли на одній лінії. */
  .product-card__body {
    flex: 1 1 auto;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-2) var(--space-4);
  }

  .product-card__name {
    gap: 6px;
    font-size: 0.9375rem; /* 15 */
  }

  .product-card__name::before {
    width: 8px;
    height: 8px;
  }

  .product-card__actions {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    margin-top: auto;
  }

  .product-card__button {
    padding: 10px var(--space-2);
    font-size: var(--font-size-label);
  }
}

/* ==========================================================================
   WHERE TO BUY — секція "Coming soon", Figma 1002:319 (1440 × 687)
   --------------------------------------------------------------------------
   Два шари: кадр із чипсами на всю ширину і текстовий блок поверх нього.

   У Figma фото — це вузол 1068:36 розміром 2398 × 1985, повернутий на
   −63.46° і обрізаний рамкою секції. Відтворювати поворот у CSS не треба:
   дизайнер віддав уже зведений кадр 8_WHERE TO BUY.png рівно 1440 × 687,
   тобто 1:1 розмір секції. PNG з альфою — там, де в кадрі порожньо,
   просвічує блакитний фон секції, тому шов між шаром і фоном непомітний.

   Вертикальний ритм макета:
   127 → eyebrow (14) → 14 → "Coming soon" (100) → 39 → кнопки (46) → 347

   Текстовий блок — фрейм 612 × 400 (1002:320) по центру за X, і все
   всередині нього теж відцентроване: eyebrow на 241 при ширині 130
   ((612−130)/2), заголовок на 9 при 595, кнопки на 102 при 405. Тому тут
   це звичайний flex-стовпчик з align-items: center, а не абсолютні
   координати з макета.
   ========================================================================== */
.where {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-bg-tint);
  /* 687 / 1440. До 1920px секція росте разом з екраном у пропорції макета;
     далі висота мерзне на --scale-max: 687 × (1920 / 1440). */
  min-height: min(47.71vw, 916px);
}

/* Кадр рівно в розмір секції, тому cover нічого не ріже аж до 1920px.
   Вище стелі секція стає ширшою за пропорцію 2.096:1 — і обрізати треба
   саме низ: угорі кадру та сама порожня зона, у якій стоїть текст.
   Тому object-position: top, а не center. */
.where__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
}

.where__content {
  /* position: relative піднімає текст над кадром без окремого z-index */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* 612 — ширина фрейму 1002:320; поля додаються зверху, щоб на вузьких
     екранах текст не приклеювався до країв. */
  max-width: calc(612px + var(--gutter) * 2);
  margin-inline: auto;
  padding-top: min(8.82vw, 169px); /* 127 / 1440 */
  padding-inline: var(--gutter);
  gap: clamp(10px, 0.97vw, 19px);  /* 14 — eyebrow → заголовок */
  text-align: center;
}

/* У макеті між заголовком і кнопками 39px, тобто на 25 більше за gap
   стовпчика. Різниця масштабується тим самим коефіцієнтом: 25 / 1440. */
.where__actions {
  display: flex;
  flex-wrap: wrap;
  /* flex-start, а не center: під другою кнопкою є підпис, і з center
     перша кнопка з'їхала б униз до середини цього стовпчика. */
  align-items: flex-start;
  justify-content: center;
  gap: 12px 14px; /* 1002:326 */
  margin-top: clamp(18px, 1.74vw, 33px);
}

/* Кнопка + підпис під нею (docx §2). У макеті підпису немає. */
.where__cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* Лежить на фото, тож колір — основний текст, а не muted: сірий на
   жовтому не читається. */
.where__note {
  max-width: 32ch;
  color: var(--color-text);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  text-wrap: balance;
}

/* Коли кнопки в один ряд, підпис у потоці розширив би стовпчик другої
   кнопки і розсунув пару. Тому він висить під кнопкою абсолютно — під ним
   однаково порожнє поле кадру. На вузьких екранах (стовпчик) — у потоці. */
@media (min-width: 768px) {
  .where__note {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 50%;
    width: max-content;
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   Graceful degradation

   Порожня зона вгорі кадру стискається разом із його шириною: у макеті це
   127px на 1440, а на 375px — уже 33px, тоді як текстовому блоку треба
   близько 190. Тобто нижче 768px шари неминуче наїхали б один на одного, і
   заголовок ліг би на найяскравішу частину фото. Тому на вузьких екранах
   композиція розбирається: спершу текст на блакитному, під ним — кадр на
   всю ширину у своїй природній пропорції, без кадрування.
   Мобільного макета немає, це інженерне рішення.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .where {
    flex-direction: column;
    min-height: 0;
    padding-top: var(--section-padding-block);
  }

  .where__content {
    padding-top: 0;
  }

  /* У розмітці кадр іде першим, бо в накладеній композиції він нижній шар.
     У потоці цей самий порядок поставив би фото НАД заголовком, тому тут
     він перевертається через order, а не переносом у HTML. */
  .where__backdrop {
    order: 1;
    position: static;
    width: 100%;
    height: auto;
    margin-top: clamp(24px, 7vw, 48px);
  }
}

/* ==========================================================================
   FOR RETAILERS — секція "For distributors & retailers",
   Figma 1002:337 (1440 × 1067)
   Слайди: 1171:105 · 1171:146 · 1171:148 · 1171:152 · 1171:154 · 1171:172
   --------------------------------------------------------------------------
   Вертикальний ритм макета:
   87.5 → eyebrow (14) → 24 → заголовок (42) → 24 → кнопка (46)
        → 91 → слайдер (1401 × 681) → 25 → крапки (13) → 19

   Шапка — фрейм 728 × 150 (1002:338) по центру, і все всередині теж
   відцентроване: eyebrow на 232 при ширині 262, заголовок на 141 при 445,
   кнопка на 294 при 139. Тому це .section-head, а не абсолютні координати.
   Обидва проміжки всередині шапки однакові (24), тож кнопка просто третій
   flex-елемент, а не окремий блок із власним відступом.

   Слайдер full-bleed — за тим самим рішенням, що й у "What is NÜKT" та
   "Advantages": у макеті в рамки 20px поля з боків, але тягнути їх у
   --gutter (120 на десктопі) означало б зрізати кадр із 1401 до 1200.
   Усі шість ассетів рівно 1401 × 681, тобто 1:1 розмір рамки.
   ========================================================================== */
.retail {
  display: flex;
  flex-direction: column;
  /* 91 — шапка → слайдер. Стеля тут і далі = значення × (1920 / 1440). */
  gap: clamp(40px, 6.32vw, 121px);
  padding-block: clamp(48px, 6.08vw, 117px) clamp(16px, 1.32vw, 25px);
  background-color: var(--color-bg);
}

/* У макеті проміжки в шапці 24px, а не 20px, як у .section-head */
.retail__head {
  gap: 24px; /* 1002:338 */
}

/* Трекінг у цього eyebrow 1.68px на 12px (0.14em), а не 1.92px (0.16em),
   як у --letter-spacing-eyebrow. Той самий виняток, що й у підписах
   слайдів "Advantages", тому значення локальне, а не новий токен. */
.retail__eyebrow {
  letter-spacing: 0.14em; /* 1002:341 */
}

/* Вище --scale-max рамка перестає рости і просто центрується — так само,
   як .hero__inner. Два інші слайдери цього не роблять: там кадри сюжетні,
   і cover може досхочу зрізати їх із боків. Тут знімки предметні — купка
   чипсів по центру білого тла, — тому рамку, ширшу за пропорцію ассета,
   нічим чесно заповнити: cover зрізав би купку згори й знизу, а contain
   дав би поля, і на них проступив би край кадру (по краях у знімків м'яка
   віньєтка 240–248, а не чистий білий). Заморожена ширина знімає питання
   взагалі: 1920 × 0.4861 = 933 — рівно пропорція ассета. */
.retail__slider {
  max-width: var(--scale-max);
  margin-inline: auto;
}

/* Висота — від ширини кадру (681 / 1401), бо кадр на всю ширину екрана.
   Стеля морозить її на --scale-max: 681 × (1920 / 1401).
   На всьому діапазоні це рівно пропорція ассета, тож кадр лягає
   піксель у піксель. */
.retail__viewport {
  height: min(48.61vw, 933px);
  background-color: var(--color-white);
}

/* contain, а не cover, як у решті слайдерів: страховка на випадок, коли
   пропорція таки розійдеться на пікселі (9.6 експортовано 1400 × 681, а не
   1401 × 681). Зрізати предметний знімок гірше, ніж лишити волосину поля. */
.retail__image {
  object-fit: contain;
  user-select: none;
}

.retail__dots {
  --dots-gap-top: 25px; /* 1035 − 1010 */
}

/* --------------------------------------------------------------------------
   Graceful degradation

   Тут, на відміну від інших слайдерів, пропорція кадру НЕ ламається на
   вузьких екранах: 2.06:1 — це горизонтальна купка чипсів, вона лишається
   читабельною і смужкою. Ламати пропорцію було б гірше — contain дав би
   білі поля згори й знизу, тобто просто порожнечу, а cover зрізав би краї
   купки. Тому кадр масштабується пропорційно аж до 320px.

   Що справді треба полагодити на вузькому екрані — це нижнє поле секції:
   19px у макеті розраховані на те, що далі йде FAQ зі своїм великим
   відступом згори. Коли крапки й так близько до краю, 19px замало.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .retail {
    padding-bottom: var(--space-9);
  }
}

/* ==========================================================================
   FAQ — секція "Wait… fried in water?", Figma 1002:391 (1440 × 734)
   --------------------------------------------------------------------------
   Дві колонки в контентній сітці 1200px: текстова 380 + акордеон 768,
   проміжок 52 (380 + 52 + 768 = 1200). Поля секції 120 з усіх боків.

   Декор 1109:8 лежить під текстовою колонкою і в макеті стирчить на 21px
   за нижній край секції. Ассет уже експортований обрізаним — 444 × 534,
   і 200 + 534 = 734, тобто рівно висота секції. Тому він кріпиться не до
   верху, а до НИЗУ: якщо відкрити довшу відповідь і акордеон підросте,
   знімок лишиться приклеєним до нижнього краю, як у макеті.

   Верхні ~100px кадру чисто білі (середнє 255.0), тому він без наслідків
   заходить під лід-текст — так само, як у Figma, де лежить нижнім шаром.

   Акордеон — нативні <details name>. Ексклюзивність (відкритий лише один
   пункт) дає браузер, JS тут не потрібен зовсім.
   ========================================================================== */
.faq {
  --faq-pad-block: clamp(56px, 8.33vw, 160px); /* 120 */

  position: relative;
  overflow: hidden;
  padding-block: var(--faq-pad-block);
  background-color: var(--color-bg);
}

/* Права колонка охоплює обидва рядки, а другий рядок — 1fr. Саме він
   зʼїдає всю різницю висот між акордеоном і лівою колонкою, тому декор
   стоїть на місці, хоч би який пункт був розкритий. Якщо покласти декор
   у звичайний рядок auto, зайва висота акордеона розподілялась би між
   рядками і кадр підстрибував би на кожному кліку. */
.faq__inner {
  position: relative;
  display: grid;
  /* 380 — ширина фрейму 1002:392. Нижня межа тримає колонку читабельною,
     коли між 1024 і 1440 сітці бракує місця. */
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'intro list'
    'decor list';
  /* Вертикального проміжку немає: відступ декора заданий його власними
     відʼємними полями, як у макеті. */
  gap: 0 clamp(32px, 3.61vw, 69px); /* 52 */
  align-items: start;
}

.faq__intro {
  grid-area: intro;
}

.faq__list {
  grid-area: list;
}

.faq__intro {
  position: relative;
  z-index: 1; /* над декором */
  display: flex;
  flex-direction: column;
  gap: 18px; /* 1002:392 */
}

/* Решта H2 мають 1.04; тут 1.02, бо заголовок у два рядки і в макеті
   вони стоять щільніше. */
.faq__title {
  line-height: 1.02; /* 1002:396 */
}

/* Декор стоїть у потоці сітки, а не в абсолютному шарі. Спершу він був
   абсолютним і кріпився до низу секції — і через це стрибав: висота секції
   залежить від того, яка відповідь розкрита, бо відповіді різної довжини.
   У сітці кадр привʼязаний до лівої колонки й до руху акордеона байдужий.

   Усі три відступи — це різниці координат з макета:
     margin-top    200 − (120 + 184) — кадр заходить під текстовий блок;
     margin-left    70 − 120         — виступає лівіше за колонку;
     margin-bottom  −120             — спускається в нижнє поле секції,
                                       щоб не додавати його до висоти.
   Верхні ~100px кадру білі, тому накладання на лід-текст непомітне;
   z-index лишає текст зверху.

   width: 100% + 64 — це 444 при колонці 380, тобто розмір із макета.
   max-width: none перекриває глобальне img { max-width: 100% } з base.css,
   інакше кадр обрізався б до ширини колонки. */
.faq__decor {
  grid-area: decor;
  align-self: start;
  z-index: 0;
  width: calc(100% + 64px);
  max-width: none;
  height: auto;
  margin-top: -104px;
  margin-left: -50px;
  margin-bottom: calc(var(--faq-pad-block) * -1);
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Акордеон 1002:398
   -------------------------------------------------------------------------- */
.faq__list {
  position: relative;
  z-index: 1;
  border-top: var(--border-width) solid var(--color-border);
}

.faq__item {
  border-bottom: var(--border-width) solid var(--color-border);
}

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 22px; /* 1002:407 */
  cursor: pointer;
  /* Обидва рядки прибирають нативний трикутник: перший — у Firefox,
     другий — у WebKit. */
  list-style: none;
}

.faq__summary::-webkit-details-marker {
  display: none;
}

/* У відкритого пункту нижнє поле шапки менше, бо далі йде відповідь
   зі своїм відступом: 22 + 12 замість 22 + 22 (1002:400). */
.faq__item[open] .faq__summary {
  padding-bottom: 12px;
}

/* 18px фіксовано, а не --font-size-h4: у того верхня межа 20px, і на 1440
   заголовки пунктів виявилися б на 2px більшими за макет. */
.faq__question {
  color: var(--color-text);
  font-size: 1.125rem; /* 18 — 1002:401 */
  font-weight: var(--font-weight-bold);
  line-height: normal;
  letter-spacing: -0.005em; /* −0.09px / 18px */
}

/* Плюс / мінус зібраний із двох псевдоелементів — це ті самі два
   прямокутники 20 × 2 і 2 × 20, що в макеті (1002:403 / 1002:411).
   Відкритий стан ховає вертикальну риску, і плюс стає мінусом. */
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  background-color: var(--color-accent);
  border-radius: 2px;
}

.faq__icon::before {
  top: 9px;
  left: 0;
  width: 20px;
  height: 2px;
}

.faq__icon::after {
  top: 0;
  left: 9px;
  width: 2px;
  height: 20px;
  transition: transform var(--transition-base);
}

.faq__item[open] .faq__icon::after {
  transform: scaleY(0);
}

/* Розкриття.

   Базова поведінка — нативна: пункт відкривається миттєво, як і будь-який
   <details>. Усе нижче це прогресивне покращення поверх неї.

   Плавну висоту тут можна навісити ЛИШЕ на псевдоелемент
   ::details-content, тобто на сам слот <details>. Звичний трюк із
   вкладеною обгорткою і grid-template-rows 0fr → 1fr не працює в принципі:
   браузер ховає вміст закритого <details> через content-visibility на
   слоті, тож перехід на будь-якому елементі всередині не запускається.

   ВАЖЛИВО, стан на момент написання: Chrome розуміє сам селектор
   ::details-content, але переходу block-size на ньому ще не створює —
   перевірено через getAnimations() в обидва боки, список порожній.
   Тобто зараз ці три рядки нічого не анімують і чекають на браузери.
   Усталені стани від цього не залежать і заміряні як правильні:
   відкритий слот 49.27px (макет: 104px на пункт), закритий 0.

   content-visibility НЕ оголошується, а лише перелічується в transition:
   перемикає його браузер сам за станом [open], а allow-discrete змушує це
   перемикання дочекатися кінця переходу. Якщо прописати
   content-visibility: hidden руками, вміст лишиться прихованим і у
   ВІДКРИТОМУ стані, а block-size: auto порахується як нуль.

   interpolate-size стоїть на списку, а не на :root: властивість
   успадковується, тому дозвіл анімувати до auto лишається локальним і не
   зачіпає решту сайту.                                                  */
.faq__list {
  interpolate-size: allow-keywords;
}

.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 240ms ease,
              content-visibility 240ms allow-discrete;
}

.faq__item[open]::details-content {
  block-size: auto;
}

.faq__answer {
  padding-bottom: 24px; /* 1002:404 */
  color: var(--color-text-muted);
  font-size: 1rem;      /* 16 — 1002:405 */
  line-height: 1.58;
}

/* --------------------------------------------------------------------------
   Graceful degradation

   Нижче 1024px дві колонки вже не вміщаються: текстова забирає 380, і
   акордеону лишається менше за найдовше питання. Тому сітка складається в
   одну колонку, а декор виходить з абсолютного шару у звичайний потік.

   Ставимо його ПІСЛЯ акордеона, а не між текстом і питаннями, як у макеті:
   на вузькому екрані кадр займав би майже весь перший екран секції й
   відсував би власне питання за межі видимого. Знімок декоративний
   (alt порожній), тому його порядок можна змінювати вільно.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .faq__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      'intro'
      'list'
      'decor';
    gap: clamp(32px, 5vw, 56px);
  }

  /* Відʼємні поля з десктопної композиції тут скидаються повністю. */
  .faq__decor {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   ABOUT — секція "Who is NÜKT?", Figma 1002:448 (1440 × 480)
   --------------------------------------------------------------------------
   Два стовпці: текст із кнопкою зліва, лок-ап бренду справа.

   Вертикальний ритм макета:
   120 → [ eyebrow (14) → 20 → заголовок (42) → 20 → лід (56)
          → 16 → кнопка (46) ] → 120

   Текстовий блок 214 заввишки, а контентна смуга — 240: її задає рамка
   лого 1002:458 (460 × 240), у якій сам знак 430 × 183 стоїть по центру.
   Саме ця рамка тримає секцію на 480. Текст у макеті притиснутий до НИЗУ
   смуги (146 + 214 = 360 = нижній край рамки лого), тому align-items: end,
   а не center — інакше блок став би на 13px вище.

   Проміжки в текстовому блоці різні (20 всередині копії, 16 до кнопки),
   тому копія й кнопка — два окремі елементи з власними gap. Це точно та
   структура, що у Figma: фрейми 1002:449 і 1339:86.

   Ліве поле в макеті 131, а не 120, як у решті секцій. Розбіжність на 11px
   не переношу: текст вирівняний по контейнеру, як усюди на сайті.
   ========================================================================== */
.about {
  padding-block: clamp(56px, 8.33vw, 160px); /* 120 */
  background-color: var(--color-bg-soft);
}

/* Права колонка масштабується разом із шириною (460 / 1440 = 31.94vw), а не
   стоїть фіксованими 460: інакше на 1024 текст стискався б до 361, і знак
   став би ширшим за текст. У макеті співвідношення зворотне — 684 до 460,
   і vw тримає його на всьому діапазоні. */
.about__inner {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, clamp(240px, 31.94vw, 460px)); /* 1002:458 */
  gap: clamp(32px, 3.13vw, 60px); /* 45 = 860 − (131 + 684) */
  align-items: end;
  min-height: clamp(180px, 16.67vw, 320px); /* 240 — висота рамки лого */
}

.about__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px; /* копія → кнопка */
}

.about__copy {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 1002:449 */
}

/* Єдиний лід на сайті, який НЕ приглушений: у макеті він жирний і того ж
   кольору, що й заголовок. Тому клас власний, а не .lead — той дає
   --color-text-muted і regular. */
.about__lead {
  max-width: 684px; /* 1002:454 */
  color: var(--color-text);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-bold);
  line-height: 1.62; /* 1002:455 */
  text-wrap: pretty;
}

/* Знак по центру своєї рамки — і за X, і за Y (у макеті поля 15 і 28.5,
   тобто рівно центрування 430 × 183 у 460 × 240). */
.about__logo {
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 430px; /* 1002:459 */
  height: auto;
}

/* --------------------------------------------------------------------------
   Graceful degradation

   Нижче 1024px два стовпці розходяться: рамка лого забирає до 460, і на
   текст лишається менше за ширину заголовка. Тому смуга складається в одну
   колонку, знак іде під текст і центрується — так він читається як підпис
   наприкінці секції.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .about__inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    align-items: stretch;
  }

  .about__logo {
    justify-self: center;
    margin-top: var(--space-4);
  }
}

/* ==========================================================================
   FOOTER — секція "Contact + Footer", Figma 1002:460 (1440 × 753)
   --------------------------------------------------------------------------
   Це не просто секція, а справжній футер сторінки: блок винесений за
   </main>, бо містить копірайт і перемикач мов, тобто футер документа,
   а не останній розділ контенту.

   Вертикальний ритм макета:
   120 → eyebrow (14) → 56 → "Let's talk" (71) → 56 → канали (170)
       → 77 → лінія футера → 36 → мови (15) → 40 → копірайт (15) → 83

   Соцмережі стоять у рядку з заголовком і притиснуті до правого краю
   контейнера: 1282 + 38 = 1320 = 1440 − 120. Чотири іконки по 38 з кроком
   22 дають рівно 218 — ширину групи 1020:2.

   Декор 1171:224 у макеті це вузол, повернутий на −26.4°, у якого біла
   обводка, а заливка збігається з фоном. Експорт фігури віддає ЛИШЕ
   заливку — темний гліф, невидимий на темному. Тому в проєкт покладено
   рендер самого вузла, обрізаний по видимій частині (467 × 326): у ньому
   вже є і обводка, і поворот, тож у CSS він просто кріпиться в кут.
   ========================================================================== */
.footer {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 8.33vw, 160px)  /* 120 */
                 clamp(40px, 5.76vw, 111px); /*  83 */
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.footer__inner {
  position: relative;
  z-index: 1; /* над декором */
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.89vw, 75px); /* 56 */
}

/* У base.css білий eyebrow і синя крапка описані через .section--dark.
   Футер тепер окремий елемент, тому ті самі два правила повторені тут. */
.footer .eyebrow {
  color: var(--color-text-inverse);
}

.footer .eyebrow::before {
  background-color: var(--color-accent);
}

.footer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* --------------------------------------------------------------------------
   Соцмережі 1020:2
   -------------------------------------------------------------------------- */
.footer__social {
  display: flex;
  align-items: center;
  gap: 22px; /* (1320 − 1102 − 4 × 38) / 3 */
}

.footer__social-link {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.footer__social-link:hover {
  opacity: 0.78;
  transform: translateY(-2px);
}

.footer__social-link img {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Канали звʼязку 1002:465
   Три рівні колонки; лінії — лише праві, тому в останньої її немає, а в
   першої немає лівого поля (у макеті вона починається від краю контенту).
   -------------------------------------------------------------------------- */
.footer__channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--border-width) solid var(--color-border-dark);
}

.footer__channel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px; /* 1002:466 */
  padding-block: 30px;
  padding-inline: 22px;
  border-right: var(--border-width) solid var(--color-border-dark);
}

.footer__channel:first-child {
  padding-left: 0;
}

.footer__channel:last-child {
  border-right: 0;
}

.footer__channel-label {
  color: var(--color-accent);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  line-height: normal;
  letter-spacing: var(--letter-spacing-label);
}

.footer__channel-title {
  font-size: var(--font-size-h5); /* 17 */
  font-weight: var(--font-weight-bold);
  line-height: normal;
}

.footer__channel-text {
  color: var(--color-text-muted-dark);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* У макеті між текстом і поштою стоїть розпірка 10 × 6 (1002:470), тобто
   проміжок там не 8, а 22 = 8 (gap) + 14.

   margin-top: auto притискає пошту до низу комірки. У макеті всі три описи
   в один рядок, комірки однакові, вільного місця немає — і auto дає нуль,
   тобто рівно 8 + 14 = 22, як у Figma. А щойно на вужчому екрані описи
   переносяться по-різному, auto вирівнює всі три адреси по одній лінії
   замість того, щоб пустити їх сходинками. */
.footer__channel-mail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: 14px;
  color: var(--color-text-inverse);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: normal;
  transition: color var(--transition-fast);
}

.footer__channel-mail:hover {
  color: var(--color-accent);
}

/* Та сама посилальна стрілка, але <button> (відкриває B2B-форму), тож
   знімаємо браузерні стилі кнопки. */
button.footer__channel-mail {
  padding-inline: 0;
  padding-bottom: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.footer__channel-arrow {
  transition: transform var(--transition-fast);
}

.footer__channel-mail:hover .footer__channel-arrow {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Нижня смуга 1002:490
   -------------------------------------------------------------------------- */
.footer__bar {
  display: flex;
  flex-direction: column;
  gap: 40px; /* 1002:490 */
  /* 77 між каналами й лінією мінус 56, які вже дає gap колонки */
  margin-top: clamp(12px, 1.46vw, 28px);
  padding-top: 36px;
  border-top: var(--border-width) solid var(--color-border-dark);
}

/* У хедері перемикач успадковує --line-height-body (1.5) і рядок виходить
   21.5px. У макеті футера він 15, тобто leading normal, і саме через ці
   6.5px секція була на 8px вищою за макет. Нульове ліве поле першої
   кнопки ставить "EN" на ту саму рейку 120, що й канали з копірайтом. */
.footer .lang-switch,
.footer .lang-switch__item,
.footer .lang-switch__separator {
  line-height: normal;
}

.footer .lang-switch__item:first-child {
  padding-left: 0;
}

.footer .lang-switch__item,
.footer .lang-switch__separator {
  color: var(--color-text-muted-dark);
}

.footer .lang-switch__item:hover,
.footer .lang-switch__item[aria-current='true'] {
  color: var(--color-text-inverse);
}

.footer__copy {
  color: var(--color-text-muted-dark);
  font-size: var(--font-size-label);
  line-height: normal;
}

/* --------------------------------------------------------------------------
   Декор 1171:224 — правий нижній кут, під контентом.
   Стеля 623 = 467 × (1920 / 1440), як і в решті композицій проєкту.
   -------------------------------------------------------------------------- */
.footer__mark {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  width: 32.43%; /* 467 / 1440 */
  max-width: 623px;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Graceful degradation
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Три колонки по ~100px нечитабельні, тому канали стають списком, а
     вертикальні лінії замінюються горизонтальними. */
  .footer__channels {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__channel {
    padding-inline: 0;
    border-right: 0;
    border-bottom: var(--border-width) solid var(--color-border-dark);
  }

  .footer__channel:last-child {
    border-bottom: 0;
  }

  /* На вузькому екрані знак неминуче лягає під нижню смугу — місця, куди
     його відсунути, просто немає. Тому він лишається, але стає ледь
     помітним вотермарком: біла обводка на 0.18 дає приблизно #3f3c3d,
     тобто темніше за сам текст копірайту (#8e9ba6), і не сперечається
     з ним за увагу. */
  .footer__mark {
    width: 58%;
    opacity: 0.18;
  }
}

/* --------------------------------------------------------------------------
   ТИМЧАСОВО: форми вимкнені (клас leads-off на <html>).
   Поки не погоджені документи й не підключена CRM, ховаємо все, що
   відкриває форму: data-leads стоїть на CTA-кнопках, на .where__actions
   (інакше лишився б порожній відступ) і на колонці «B · Retail» у футері.
   !important — бо .button задає display: inline-flex.
   Щоб повернути — прибрати клас leads-off в index.html.
   -------------------------------------------------------------------------- */
.leads-off [data-leads] {
  display: none !important;
}

/* Без колонки B у футері лишаються дві; на мобільному вони й так списком */
@media (min-width: 768px) {
  .leads-off .footer__channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}