/* ==========================================================
   LM Бухгалтерські послуги — стилі сторінки
   Усі кольори, відступи, радіуси і шрифти — зі змінних tokens.css
   Mobile-first; десктоп — від 1024px
   ========================================================== */

/* ---------- Скидання ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4,
p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
}

/* :where() — щоб скидання не перебивало відступи компонентів */
:where(ul[class], ol[class]) {
  padding: 0;
  list-style: none;
}

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

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

/* ---------- База ---------- */
/* Висота шапки: потрібна і самій шапці, і якорям секцій */
:root {
  --header-height: 60px;
}

/* Єдиний брейкпоінт проєкту — 1024px. Між 1024 і 1440px нічого не перемикається:
   поля сторінки плавно зменшуються від 120px до 32px, тож контент 1200px
   тримається якомога довше, а далі звужується разом з екраном */
@media (min-width: 1024px) {
  :root {
    --header-height: 72px;
    /* 100%, а не 100vw: vw включає смугу прокрутки, і поля рахувались би від ширшого вікна */
    --page-margin: clamp(var(--space-32), calc((100% - var(--content-max)) / 2), var(--space-120));
    --fluid-gap: clamp(var(--space-12), 1.667vw, var(--space-24));
  }
}

body {
  min-height: 100vh;
  font: var(--text-body);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1 { font: var(--text-h1); }
h2 { font: var(--text-h2); }
h3 { font: var(--text-h3, var(--text-title)); }

/* Переноси рядків: заголовки — рівними рядками, абзаци — без «висячих» слів */
h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Якір зупиняється під липкою шапкою, а не за нею */
[id] {
  scroll-margin-top: var(--header-height);
}

/* ---------- Доступність ---------- */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

.skip-link {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: 100;
  padding: var(--space-12) var(--space-16);
  font: var(--text-button);
  color: var(--text-inverse);
  background: var(--bg-dark);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* ---------- Контейнер ---------- */
/* Поля 16px (моб.) / 120px (десктоп), контент не ширший за 1200px */
.container {
  width: min(100% - 2 * var(--page-margin), var(--content-max));
  margin-inline: auto;
}

/* ---------- Сітка ---------- */
/* 4 колонки на мобайлі, 12 — на десктопі. Елемент займає колонки через --span */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-16);
}

.grid > * {
  grid-column: span var(--span, 4);
}

/* ---------- Секції ---------- */
/* У макеті відступ є лише зверху секції: 48px (моб.) / 80px (десктоп) */
.section {
  padding-top: var(--section-gap);
}

.section__title {
  margin-bottom: var(--space-12);
}

/* ---------- Кнопка (Button/Primary) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-48);
  padding: var(--space-12) var(--space-24);
  font: var(--text-button);
  color: var(--text-inverse);
  text-decoration: none;
  white-space: nowrap;
  background: var(--action-primary);
  border: 0;
  border-radius: var(--radius-md);
  transition: background-color var(--duration-hover);
}

/* Нижча кнопка (40px) для другорядних місць */
.btn--compact {
  min-height: var(--space-40);
  padding-inline: var(--space-32);
}

@media (hover: hover) {
  .btn:hover {
    background: var(--action-primary-hover);
  }
}

/* Другорядна кнопка: прозора з рамкою (банер cookies — «Відхилити»).
   Рамка — внутрішньою тінню, щоб розмір збігався з основною кнопкою */
.btn--outline {
  color: var(--text-primary);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--text-primary);
  transition: box-shadow var(--duration-hover);
}

@media (hover: hover) {
  .btn--outline:hover {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--text-primary);
  }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-page);
  transition: box-shadow var(--duration-hover);
}

/* Лінія з'являється після початку скролу (клас ставить JS) */
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--border-subtle);
}

/* Невидима мітка вгорі сторінки: коли вона зникає з екрана — сторінку прокручено */
.scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  padding-block: var(--space-8);
}

/* Лого 32px заввишки (щоб підпис читався), зона натискання — 44px */
.site-header__logo {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.site-header__logo img {
  width: auto;
  height: var(--space-32);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-header__phone {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-4);
  font: var(--text-body-s);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__cta {
  display: none;
}

.burger {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
}

/* Без JS меню просто лежить рядком під шапкою */
.site-nav {
  order: 3;
  flex-basis: 100%;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-24);
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font: var(--text-body);
  text-decoration: none;
}

@media (hover: hover) {
  .site-nav__link:hover,
  .site-header__phone:hover {
    text-decoration: underline;
    text-underline-position: from-font;
  }
}

/* З JS на мобайлі: замість рядка посилань — бургер, що відкриває повноекранне меню */
@media (max-width: 1023.98px) {
  .js .burger {
    display: flex;
  }

  .js .site-nav {
    display: none;
  }
}

/* ---------- Мобільне меню ---------- */
/* Червоний екран поверх сторінки: лого і хрестик угорі, посилання й контакти
   по центру, біла кнопка. Висота — динамічна висота вікна (dvh), щоб меню
   діставало до самого низу і тоді, коли панель браузера ховається чи з'являється.
   height: 100% — запасний варіант для браузерів без dvh */
.mobile-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0 0 var(--space-48);
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--text-inverse);
  background: var(--action-primary);
  border: 0;
}

.mobile-menu[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-menu::backdrop {
  background: var(--action-primary);
}

/* Поки меню чи перегляд сертифіката відкриті, сторінка під ними не прокручується */
html.is-menu-open,
html.is-lightbox-open {
  overflow: hidden;
}

/* Шапка меню повторює мобільну шапку сайту: 60px, лого 32px */
.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  padding-block: var(--space-8);
}

.mobile-menu__logo {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.mobile-menu__logo img {
  width: auto;
  height: var(--space-32);
}

.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-48);
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
}

/* Пункти меню: рядок 24px + проміжок 24px з макета = рядок-посилання 48px */
.mobile-menu__nav {
  margin-top: var(--space-40);
}

.mobile-menu__list {
  text-align: center;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-48);
  padding-inline: var(--space-16);
  font: var(--text-body);
  text-decoration: none;
}

.mobile-menu__contacts {
  margin-top: var(--space-12);
}

.mobile-menu__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--space-40);
  font: var(--text-body-s);
  text-decoration: none;
}

.mobile-menu__icon {
  flex: none;
}

/* Біла кнопка 242×40, як у макеті; зона натискання 48px через ::after */
.mobile-menu__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 242px;
  min-height: var(--space-40);
  margin-top: var(--space-24);
  padding: var(--space-12) var(--space-32);
  font: var(--text-button-s);
  color: var(--text-primary);
  text-decoration: none;
  background: var(--bg-page);
  border-radius: var(--radius-md);
}

.mobile-menu__cta::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--space-4)) 0;
}

/* Фокус на червоному тлі — білий і помітний */
.mobile-menu :focus-visible {
  outline: 2px solid var(--text-inverse);
  outline-offset: 2px;
}

/* Десктопна шапка. Між 1024 і 1440px відступи в ній плавно стискаються, щоб усе вмістилось */
@media (min-width: 1024px) {
  .site-header__inner {
    flex-wrap: nowrap;
    padding-block: var(--space-12);
  }

  .site-header__logo {
    align-self: flex-start;
    min-height: 0;
  }

  .site-header__logo img {
    height: 42px;
  }

  .site-nav {
    order: 0;
    flex-basis: auto;
    margin-left: auto;
  }

  .site-nav__list {
    flex-wrap: nowrap;
    column-gap: var(--fluid-gap);
  }

  .site-nav__link {
    white-space: nowrap;
  }

  .site-header__actions {
    gap: var(--fluid-gap);
    margin-left: var(--fluid-gap);
  }

  .site-header__phone {
    padding-inline: 0;
    font: var(--text-body);
    font-weight: 700;
  }

  .site-header__cta {
    display: inline-flex;
    width: clamp(164px, 12.5vw, 180px);
    padding-inline: var(--space-16);
  }
}

/* 1024–1279px: п'ять пунктів меню, телефон і кнопка в один рядок не вміщаються —
   телефон ховаємо (він лишається у футері) */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .site-header__phone {
    display: none;
  }
}

/* ---------- Hero ---------- */
/* Мобайл: фото зверху, під ним текст, далі смуга статистики */
.hero {
  background: var(--bg-page);
}

/* overflow: hidden — щоб фото, збільшене на старті, не вилазило за свій блок */
.hero__media {
  display: block;
  overflow: hidden;
}

/* Висота фото росте разом з екраном: 300px на 390, не більше 480px */
.hero__media img {
  width: 100%;
  height: clamp(300px, 76.9vw, 480px);
  object-fit: cover;
  object-position: 75% top;
}

.hero__text {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-24) var(--space-8);
}

.hero__title {
  margin-bottom: var(--space-16);
}

/* Заголовок із двох рядків. Рядок — це «маска» з overflow: hidden, усередині —
   текст, який при завантаженні виїжджає знизу. Невеликий запас унизу маски,
   щоб не зрізались хвостики літер (щ, д, р) */
.hero__title-line {
  display: block;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  overflow: hidden;
}

.hero__title-inner {
  display: block;
}

.hero__title-accent {
  color: var(--text-brand);
}

.hero__lead {
  margin-bottom: var(--space-12);
  font: var(--text-body-s);
}

/* На мобайлі кнопка на всю ширину контенту (але не ширша за 358px), 48px заввишки, текст 14px */
.hero__cta {
  max-width: 358px;
  font: var(--text-button-s);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: var(--space-32);
  text-align: center;
}

.stats__value,
.stats__label {
  display: block;
}

.stats__value {
  font: var(--text-stat);
  font-variant-numeric: tabular-nums;
}

.stats__label {
  margin-top: var(--space-4);
  font: var(--text-body-s);
}

/* Планшет (768–1023px) — виняток лише для Hero.
   Фото на всю ширину як фон, текст поверх нього зліва (як на десктопі),
   статистика — смугою під фото (як на мобайлі).
   Сітка з двох рядків: у першому одне над одним лежать фото, вуаль і текст,
   у другому — статистика. .hero__content «розчиняється» (display: contents),
   щоб текст і статистика стали окремими клітинками цієї сітки */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero {
    display: grid;
    /* Висота першого рядка — як пропорція макета 1440×700, але не нижча за текст */
    grid-template-rows: minmax(calc(100vw * 700 / 1440), auto) auto;
    background: var(--bg-surface);
  }

  .hero__media,
  .hero::before,
  .hero__text {
    grid-area: 1 / 1;
  }

  .hero__content {
    display: contents;
  }

  .hero__media img {
    height: 100%;
    /* Кадр притиснутий праворуч: обличчя виходить за межі текстової колонки */
    object-position: right 35%;
  }

  /* Та сама світла вуаль, що й на десктопі, лише ширша — під колонку 55% */
  .hero::before {
    content: "";
    z-index: 1;
    background: linear-gradient(
      to right,
      color-mix(in srgb, var(--bg-surface) 92%, transparent) 0%,
      color-mix(in srgb, var(--bg-surface) 85%, transparent) 50%,
      color-mix(in srgb, var(--bg-surface) 0%, transparent) 66%
    );
    pointer-events: none;
  }

  .hero__text {
    position: relative;
    z-index: 2;
    justify-content: center;
    width: 55%;
    padding: var(--space-48) 0 var(--space-48) var(--page-margin);
  }

  .hero__title {
    margin-bottom: var(--space-12);
  }

  .hero__lead {
    margin-bottom: var(--space-24);
    font: var(--text-hero-lead);
  }

  .hero__cta {
    align-self: flex-start;
    width: 282px;
    font: var(--text-button);
  }

  .stats {
    grid-row: 2;
    padding-inline: var(--page-margin);
    background: var(--bg-page);
  }

  .stats__label {
    font: var(--text-body);
  }
}

/* Планшет: широке фото, кнопка звичайного розміру */
@media (min-width: 1024px) {
  .hero__lead {
    font: var(--text-body-l);
  }

  .stats {
    display: flex;
    /* 64px, як у макеті, від 1280px; на вужчих екранах плавно до 32px,
       щоб блок цифр закінчувався лівіше і не заходив на фото */
    gap: clamp(var(--space-32), calc(var(--space-32) + (100vw - 1024px) * 0.125), var(--space-64));
    text-align: left;
  }

  .stats__label {
    font: var(--text-body);
  }
}

/* Десктоп: текст поверх фото */
@media (min-width: 1024px) {
  /* Висота пропорційна ширині, як у макеті (1440×700), тому кадр фото однаковий
     на будь-якому екрані. Нижче за свій вміст блок не стає (на 1024px висоту
     задає текст) і не вищий за видиму частину вікна під шапкою.
     Друге значення в max() — запобіжник для дуже низьких вікон: блок не стане
     нижчим за свій текст (≈420px тексту плюс ті самі відступи зверху і знизу).
     Перший max-height — для браузерів, які не знають одиниці svh */
  .hero {
    position: relative;
    width: 100%; /* інакше max-height через пропорцію звузив би й ширину блоку */
    aspect-ratio: 1440 / 700;
    max-height: max(calc(100vh - var(--header-height)), calc(420px + 2 * clamp(var(--space-64), 8.33vw, 154px)));
    max-height: max(calc(100svh - var(--header-height)), calc(420px + 2 * clamp(var(--space-64), 8.33vw, 154px)));
    background: var(--bg-surface);
  }

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

  /* Світла вуаль зліва поверх фото: текст і цифри стоять на спокійному тлі.
     До 56% ширини вона сходить нанівець, тож обличчя й руки не зачеплені.
     Шари знизу вгору: фото → вуаль → текст */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to right,
      color-mix(in srgb, var(--bg-surface) 92%, transparent) 0%,
      color-mix(in srgb, var(--bg-surface) 85%, transparent) 42%,
      color-mix(in srgb, var(--bg-surface) 0%, transparent) 56%
    );
    pointer-events: none;
  }

  /* Фото прив'язане до всіх чотирьох країв блоку. По вертикалі кадр трохи вище
     центру (35%): якщо на низькому вікні фото доводиться обрізати, більше
     зрізається знизу, а голова лишається в кадрі. Друге значення в max() не дає
     зрізати зверху більше, ніж є запасу над волоссям (4.6vw — відстань від верху
     фото до волосся, 32px — мінімум над головою). По горизонталі — від правого
     краю: це має значення лише на вузьких десктопах, де фото ширше за блок */
  .hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: right max(35%, 32px - 4.6vw);
  }

  .hero__content {
    position: relative;
    z-index: 2;
    /* 120px на 1440; відступ росте й зменшується разом із блоком */
    padding-block: clamp(var(--space-64), 8.33vw, 154px);
  }

  .hero__text {
    max-width: min(691px, 60vw);
    padding-block: 0;
  }

  .hero__cta {
    align-self: flex-start;
    width: 282px;
    font: var(--text-button);
  }

  .hero__title {
    margin-bottom: var(--space-12);
  }

  /* На вужчих екранах текст звужується, щоб не наїжджати на людину на фото */
  .hero__lead {
    max-width: min(588px, 46vw);
    margin-bottom: var(--space-24);
  }

  .stats {
    margin-top: var(--space-40);
    padding-block: 0;
  }
}

/* ---------- Для кого ---------- */
/* Картки: 1–2 колонки (скільки вміщається) → 4 на десктопі */
/* max(…, 34%) не дає стати трьом карткам у ряд: або одна, або дві */
.for-whom__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(260px, 34%), 1fr));
  gap: var(--space-12);
}

.for-whom__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 160px;
  padding: var(--space-16);
  text-align: center;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
}

.for-whom__card-title {
  position: relative;
  font: var(--text-title);
}

.for-whom__card-text {
  position: relative;
}

.for-whom__card-text {
  font: var(--text-body-s);
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .for-whom__cards {
    gap: var(--space-24);
  }

  .for-whom__card {
    gap: var(--space-12);
    padding: var(--space-24);
  }

  .for-whom__card-title {
    font: var(--text-h3);
  }
}

@media (min-width: 1024px) {
  .for-whom__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .for-whom__card {
    min-height: 242px;
  }
}

/* ---------- Патерн-смуга ---------- */
/* Декоративна смуга: плитка 48px заввишки повторюється по горизонталі.
   Відступи однакові з обох боків: зверху — margin смуги,
   знизу — padding-top наступної секції (48px моб. / 80px десктоп).

   Сама смуга — «вікно» з overflow: hidden. Усередині (::before) лежить стрічка
   з трьох однакових відрізків по 16 плиток. Коли стрічка зсувається рівно на один
   відрізок, малюнок збігається сам із собою — стику не видно. Третій відрізок —
   запас, щоб і на дуже широкому моніторі праворуч не з'являлось порожнє місце */
.pattern-strip {
  --pattern-tile: calc(var(--space-48) * 494 / 130); /* ширина плитки при висоті 48px */
  --pattern-segment: calc(16 * var(--pattern-tile));
  height: var(--space-48);
  margin-top: var(--section-gap);
  overflow: hidden;
  opacity: 0.1;
}

.pattern-strip::before {
  content: "";
  display: block;
  width: calc(3 * var(--pattern-segment));
  height: 100%;
  background: url("../images/pattern-tile.svg") left center / auto 100% repeat-x;
}

/* Смуга статистики над нею вже має 32px знизу — добираємо решту */
.pattern-strip--after-stats {
  margin-top: calc(var(--section-gap) - var(--space-32));
}

/* У мобільному макеті смуга стоїть в інших місцях, ніж у десктопному */
.pattern-strip--desktop {
  display: none;
}

@media (min-width: 1024px) {
  .pattern-strip--mobile {
    display: none;
  }

  .pattern-strip--desktop {
    display: block;
  }
}

/* ---------- Наші гарантії ---------- */
.guarantees .section__title {
  margin-bottom: var(--space-24);
}

/* 1–2 колонки (скільки вміщається) → 4 на десктопі; картки в ряду однакової висоти */
.guarantees__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(260px, 34%), 1fr));
  gap: var(--space-12);
}

.guarantee-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-16);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
}

/* Червона риска над заголовком — декоративна */
.guarantee-card::before {
  content: "";
  width: var(--space-32);
  height: 3px;
  background: var(--action-primary);
}

.guarantee-card__title {
  font: var(--text-title);
}

.guarantee-card__text {
  font: var(--text-body-s);
}

@media (min-width: 1024px) {
  .guarantees .section__title {
    margin-bottom: var(--space-40);
  }

  .guarantees__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-24);
  }

  .guarantee-card {
    gap: var(--space-12);
    padding: var(--space-24);
  }
}

/* ---------- Як ми працюємо ---------- */
/* Шкала кроків. Маркер — кружечок із номером і лінія до наступного кружечка (::after).
   Мобайл і планшет: вертикальна шкала, маркер зліва, текст справа.
   Десктоп: 5 кроків в один ряд, маркер над текстом, лінія горизонтальна */
.steps {
  --step-dot: var(--space-32);   /* діаметр кружечка */
  --step-line-gap: var(--space-4); /* проміжок між кружечком і лінією */
  display: grid;
}

.step {
  display: grid;
  grid-template-columns: var(--step-dot) minmax(0, 1fr);
  column-gap: var(--space-16);
}

.step__marker {
  position: relative;
}

.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--step-dot);
  height: var(--step-dot);
  font: var(--text-title);
  color: var(--text-inverse);
  background: var(--action-primary);
  border-radius: 50%;
}

/* Вертикальна лінія: від кружечка (з проміжком) до низу кроку, тобто до наступного кружечка */
.step__marker::after {
  content: "";
  position: absolute;
  top: calc(var(--step-dot) + var(--step-line-gap));
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  background: var(--decor-gray);
  transform-origin: top;
}

.step:last-child .step__marker::after {
  content: none;
}

/* padding-top 4px — заголовок оптично по центру кружечка */
.step__body {
  display: grid;
  align-content: start;
  gap: 6px;
  padding-block: var(--space-4) 28px;
}

.step:last-child .step__body {
  padding-bottom: 0;
}

.step__title {
  font: var(--text-title);
  text-wrap: balance;
}

.step__text {
  font: var(--text-body-s);
  text-wrap: pretty;
}

.step__label {
  font-weight: 700;
  color: var(--text-accent);
}

.how .section__title {
  margin-bottom: var(--space-24);
}

.how__cta {
  display: flex;
  margin-top: var(--space-32);
}

@media (min-width: 1024px) {
  .how .section__title {
    margin-bottom: var(--space-48);
  }

  /* Як у макеті: 5 рівних колонок без проміжку, а в кроків 1–4 текст
     має поле 32px справа. Лінія йде від кружечка до кінця колонки,
     тобто впритул до наступного кружечка */
  /* Рядки спільні для всіх кроків (subgrid): маркер, заголовок, опис,
     «Ви отримуєте». Висота рядка — за найвищим кроком, тож усі заголовки,
     описи й «Ви отримуєте» стоять на одних лініях */
  .steps {
    --step-dot: var(--space-40);
    --step-line-gap: 0px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
  }

  .step {
    grid-row: span 4;
    grid-template-columns: none;
    grid-template-rows: subgrid;
    row-gap: var(--space-12);
  }

  .step > *,
  .step__body > * {
    align-self: start;
  }

  /* Від маркера до заголовка 20px: 12px дає row-gap, ще 8px — тут */
  .step__title {
    margin-top: var(--space-8);
  }

  /* Горизонтальна лінія по центру кружечка */
  .step__marker::after {
    top: calc(50% - 1px);
    bottom: auto;
    left: var(--step-dot);
    right: 0;
    width: auto;
    height: 2px;
    transform-origin: left;
  }

  /* Обгортка тексту «розчиняється»: заголовок і абзаци стають
     клітинками сітки кроку й лягають у спільні рядки */
  .step__body {
    display: contents;
  }

  /* У кроків 1–4 текст має поле 32px справа */
  .step:not(:last-child) .step__body > * {
    padding-right: var(--space-32);
  }

  /* Кнопка під шкалою, по правому краю контейнера; поля 76px, як у макеті (≈282px).
     +12px зверху й знизу — «повітря» компонента CTA у Figma */
  .how__cta {
    width: fit-content;
    margin: calc(var(--space-48) + var(--space-12)) 0 var(--space-12) auto;
    padding-inline: 76px;
  }
}

/* ---------- Про нас ---------- */
/* Мобайл: заголовок → фото → текст. Десктоп: фото зліва, текст справа */
.about__inner {
  display: grid;
  row-gap: var(--space-12);
}

/* Рамка фото: overflow: hidden — щоб збільшене при появі зображення не вилазило */
.about__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.about__media img {
  width: 100%;
  aspect-ratio: 358 / 266;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.about__text {
  padding-block: var(--space-8);
}

.about__subtitle {
  margin-bottom: var(--space-8);
  font: var(--text-subtitle);
}

.about__body {
  font: var(--text-body-s);
}

@media (min-width: 1024px) {
  .about__inner {
    grid-template-columns: minmax(0, 486fr) minmax(0, 588fr);
    grid-template-areas:
      "media title"
      "media text";
    column-gap: 10.5%;
    row-gap: var(--space-4);
  }

  .about__title {
    grid-area: title;
    align-self: end;
  }

  .about__media {
    grid-area: media;
    align-self: center;
  }

  .about__media img {
    aspect-ratio: 486 / 266;
  }

  .about__text {
    grid-area: text;
    align-self: start;
    padding: 0;
  }

  .about__subtitle {
    margin-bottom: var(--space-12);
  }
}

@media (min-width: 1024px) {
  .about__body {
    font: var(--text-body);
  }
}

/* ---------- Сертифікати (у «Про нас») ---------- */
/* Мобайл: картки по 200px, горизонтальна прокрутка з прилипанням.
   Стрічка виходить на всю ширину екрана, а перша й остання картки
   вирівняні по полях сторінки */
.certs {
  margin-top: var(--space-24); /* 32px від тексту: ще 8px дає padding .about__text */
}

.certs__header {
  margin-bottom: var(--space-16);
}

.certs__title {
  margin-bottom: var(--space-8);
}

.certs__text {
  font: var(--text-body-s);
}

.certs__gallery {
  display: flex;
  gap: var(--space-12);
  margin-inline: calc(-1 * var(--page-margin));
  padding: 0 var(--page-margin) var(--space-4); /* знизу місце для рамки фокуса */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--page-margin);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.certs__gallery::-webkit-scrollbar {
  display: none;
}

.cert {
  display: flex;
  flex: 0 0 200px;
  flex-direction: column;
  gap: var(--space-8);
  scroll-snap-align: start;
}

.cert__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 144px;
  padding: var(--space-8);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  cursor: zoom-in;
}

/* Рамка фокуса всередині картки — інакше її обрізає прокрутка стрічки */
.cert__thumb:focus-visible {
  outline-offset: -2px;
}

.cert__thumb picture {
  display: contents;
}

.cert__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Назва курсу — не більше двох рядків; повна назва є в підписі перегляду */
.cert__title {
  display: -webkit-box;
  overflow: hidden;
  font: var(--text-body-s);
  color: var(--text-secondary);
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media (hover: hover) {
  .cert__thumb img {
    transition: transform var(--duration-hover) ease-out;
  }

  .cert__thumb:hover img {
    transform: scale(1.04);
  }
}

/* Десктоп: 7 карток в один ряд, без прокрутки */
@media (min-width: 1024px) {
  .certs {
    margin-top: var(--space-48);
  }

  .certs__header {
    margin-bottom: var(--space-24);
  }

  .certs__gallery {
    gap: var(--space-16);
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }

  .cert {
    flex: 1 1 0;
    min-width: 0;
  }

  .cert__thumb {
    height: 112px;
  }
}

/* ---------- Перегляд сертифіката ---------- */
/* Повноекранний <dialog> на темному тлі.
   Мобайл: хрестик угорі праворуч, зображення по центру, під ним підпис,
   нижче — стрілки з лічильником між ними.
   Десктоп: стрілки по боках зображення, підпис ліворуч, лічильник праворуч */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: var(--space-16);
  color: var(--text-inverse);
  background: var(--bg-dark);
  border: 0;
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop {
  background: var(--bg-dark);
}

.lightbox__button {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--space-48);
  height: var(--space-48);
  padding: 0;
  color: inherit;
  background: var(--bg-control-on-dark);
  border: 0;
  border-radius: var(--radius-full);
}

.lightbox :focus-visible {
  outline-color: var(--text-inverse);
}

.lightbox__close {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  z-index: 1;
}

.lightbox__body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "stage   stage   stage"
    "caption caption caption"
    "prev    counter next";
  align-items: center;
  width: 100%;
}

/* Зображення зберігає свої пропорції й вписується в доступне місце */
.lightbox__stage {
  display: flex;
  grid-area: stage;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.lightbox__stage picture {
  display: contents;
}

.lightbox__image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 300px); /* лишаємо місце для хрестика, підпису й стрілок */
  border-radius: var(--radius-md);
  transition: opacity var(--duration-hover) ease-out;
}

/* Поки нове велике зображення вантажиться — старе притушене */
.lightbox__image.is-loading {
  opacity: 0.4;
}

.lightbox__caption {
  grid-area: caption;
  margin-top: var(--space-16);
  font: var(--text-body-s);
}

.lightbox__prev    { grid-area: prev; }
.lightbox__next    { grid-area: next; }
.lightbox__counter { grid-area: counter; }

.lightbox__prev,
.lightbox__next,
.lightbox__counter {
  margin-top: var(--space-48);
}

.lightbox__counter {
  font: var(--text-body);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Десктоп: сцена фіксованого розміру (960×684 у макеті), щоб стрілки й підпис
   не стрибали, коли сертифікати різних пропорцій.
   Стрілки — по боках сцени, підпис і лічильник — рядком під нею */
@media (min-width: 1024px) {
  .lightbox {
    padding: var(--space-40);
  }

  .lightbox__close {
    top: var(--space-40);
    right: var(--space-40);
  }

  .lightbox__body {
    grid-template-columns:
      var(--space-48)
      min(960px, 100vw - 2 * (var(--space-40) + var(--space-48) + var(--space-32)))
      var(--space-48);
    grid-template-rows: min(684px, 100dvh - 2 * var(--space-64) - var(--space-48)) auto;
    grid-template-areas:
      "prev stage next"
      ".    meta  .";
    column-gap: var(--space-32);
    justify-content: center;
  }

  .lightbox__stage {
    height: 100%;
  }

  .lightbox__image {
    max-height: 100%;
  }

  .lightbox__prev,
  .lightbox__next {
    margin-top: 0;
  }

  .lightbox__caption,
  .lightbox__counter {
    grid-area: meta;
    align-self: start;
    margin-top: var(--space-24);
    font: var(--text-body);
  }

  /* Підпис не заходить під лічильник */
  .lightbox__caption {
    padding-right: var(--space-64);
  }

  .lightbox__counter {
    justify-self: end;
  }
}

/* ---------- Послуги | Вартість ---------- */
/* Картки: 1–2 колонки (скільки вміщається) → 3 на десктопі.
   Сітка сама вирівнює висоту карток у ряду */
.services__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(300px, 34%), 1fr));
  gap: var(--space-16);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-24);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
}

/* Уся картка клікабельна (stretched link): єдиний інтерактивний елемент —
   посилання «Обрати», а його ::after накриває всю картку */
.service-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

/* Фокус-рамка — на всій картці, а не на маленькому посиланні */
@supports selector(:has(*)) {
  .service-card__link:focus-visible {
    outline: none;
  }

  .service-card:has(.service-card__link:focus-visible) {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
}

/* Заголовок і бейдж в одному рядку: довгий заголовок переноситься,
   а не заходить під бейдж */
.service-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

/* text-box обрізає порожнє місце над і під літерами, як у макеті */
.service-card__title {
  font: var(--text-title);
  text-wrap: pretty;
  text-box: trim-both cap alphabetic;
}

.service-card > .service-card__title {
  margin-bottom: var(--space-12);
}

/* Від'ємні відступи: бейдж вищий за рядок заголовка, але не розсуває картку.
   Базові лінії заголовка й бейджа збігаються (align-items: baseline), а оскільки
   літери бейджа менші, піднімаємо його на 0.225em — рівно до центру великих літер заголовка */
.service-card__badge {
  position: relative;
  top: -0.225em;
  flex: none;
  margin-block: calc(-1 * var(--space-4)) calc(-1 * var(--space-12));
  padding: var(--space-4) 10px;
  font: var(--text-caption);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-accent);
  white-space: nowrap;
  background: var(--bg-accent-subtle);
  border-radius: var(--radius-full);
}

.service-card__text {
  margin-bottom: var(--space-20);
  font: var(--text-body-s);
}

/* З мишкою опис лежить вище за накладку посилання, щоб текст можна було виділити.
   На сенсорних екранах виділяти нічим, тому там клікабельна вся картка разом з описом */
@media (hover: hover) and (pointer: fine) {
  .service-card__text {
    position: relative;
    z-index: 1;
  }
}

.service-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: auto; /* низ картки завжди притиснутий донизу */
  white-space: nowrap;
}

.service-card__price {
  font: var(--text-body);
  font-weight: 700;
}

.service-card__arrow {
  display: inline-block;
}

.service-card__link {
  font: var(--text-body-s);
  font-weight: 700;
  color: var(--text-accent);
  text-decoration: none;
}

.services__note {
  margin-top: var(--space-16);
  font: var(--text-body-s);
}

@media (min-width: 1024px) {
  .services__cards {
    gap: var(--space-24);
  }

  .services__note {
    margin-top: var(--space-20);
    font: var(--text-body);
  }
}

@media (min-width: 1024px) {
  .services__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Питання та відповіді ---------- */
.faq .section__title {
  margin-bottom: var(--space-24);
}

/* Підказка і кнопка є лише в десктопному макеті */
.faq__lead,
.faq__cta {
  display: none;
}

.faq__lead {
  margin-bottom: var(--space-24);
  color: var(--text-secondary);
}

.faq__list {
  border-top: 1px solid var(--border-subtle);
}

.faq__item {
  border-bottom: 1px solid var(--border-subtle);
}

/* Кнопка займає весь рядок питання — натискати можна будь-де */
.faq__toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  width: 100%;
  padding: var(--space-20) 0;
  font: var(--text-title);
  text-align: left;
  background: none;
  border: 0;
}

.faq__icon {
  flex: none;
  transition: transform var(--duration-hover);
}

.faq__item.is-open .faq__icon {
  transform: rotate(180deg);
}

.faq__answer {
  margin-top: calc(-1 * var(--space-8));
  padding-bottom: var(--space-20);
  color: var(--text-secondary);
}

/* Згортаємо відповіді лише коли працює JS */
.js .faq__item:not(.is-open) .faq__answer {
  display: none;
}

html:not(.js) .faq__icon {
  display: none;
}

@media (min-width: 1024px) {
  .faq__toggle {
    padding-block: var(--space-24);
  }

  .faq__answer {
    margin-top: calc(-1 * var(--space-12));
    padding-bottom: var(--space-24);
  }
}

/* Десктоп: зліва заголовок із кнопкою, справа акордеон */
@media (min-width: 1024px) {
  .faq__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-80);
  }

  .faq__intro {
    flex: none;
    width: 330px;
  }

  .faq__lead {
    display: block;
  }

  .faq__cta {
    display: inline-flex;
  }

  .faq__list {
    flex: 1;
    min-width: 0;
  }
}

/* ---------- Форма ---------- */
/* Остання секція: відступ є і знизу */
.contact {
  padding-bottom: var(--section-gap);
}

.contact .section__title {
  margin-bottom: var(--space-8);
}

.contact__lead {
  margin-bottom: var(--space-8);
  font: var(--text-body-s);
}

.form {
  max-width: 589px;
}

.form__fields {
  display: grid;
  gap: var(--space-8);
}

/* Поле вводу (Input/Text, Input/Select). Шрифт 16px — щоб iOS не збільшував сторінку */
.field__control {
  display: block;
  width: 100%;
  height: var(--space-48);
  padding: 0 var(--space-12);
  font: var(--text-body);
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
}

.field__control::placeholder {
  font-weight: 300;
  color: var(--text-placeholder);
  opacity: 1;
}

@media (hover: hover) {
  .field__control {
    transition: border-color var(--duration-hover), box-shadow var(--duration-hover);
  }

  .field__control:hover {
    border-color: var(--border-focus);
  }
}

/* М'який фокус: темна рамка і світле кільце навколо замість жирного контуру.
   Прозорий outline лишаємо для режиму високого контрасту Windows */
.field__control:focus-visible {
  border-color: var(--border-focus);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--border-subtle);
}

/* Селект: своя стрілка замість системної */
.field__control--select {
  padding-right: var(--space-40);
  appearance: none;
  background-image: url("../images/icons/icon-select-chevron.svg");
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  text-overflow: ellipsis;
}

/* Поки тему не обрано, селект виглядає як підказка */
.field__control--select:has(option[value=""]:checked) {
  font-weight: 300;
  color: var(--text-placeholder);
}

.field__control--select option {
  font-weight: 400;
  color: var(--text-primary);
}

/* Помилка: червона рамка + текст під полем (не лише колір) */
.field__control[aria-invalid="true"],
.field__control[aria-invalid="true"]:hover,
.field__control[aria-invalid="true"]:focus-visible {
  border-color: var(--border-error);
}

.field__error {
  margin-top: var(--space-4);
  font: var(--text-body-s);
  color: var(--text-accent);
}

/* Пастка для ботів: прибрана з екрана, але не через display: none */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Мобайл: кнопка, під нею згода по центру */
.form__submit {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-12);
  margin-top: var(--space-12);
}

.form__consent,
.form__noscript {
  font: var(--text-body-s);
  color: var(--text-secondary);
  text-align: center;
  text-wrap: balance;
}

.form__consent a,
.form__noscript a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-position: from-font;
}

.form__noscript {
  margin-top: var(--space-12);
}

.form__button[aria-busy="true"] {
  cursor: progress;
}

@media (min-width: 1024px) {
  /* Згода зліва, кнопка справа */
  .form__submit {
    flex-direction: row;
    align-items: center;
    gap: var(--space-24);
  }

  .form__consent {
    flex: 1;
    text-align: left;
  }

  .form__button {
    flex: none;
    width: 282px;
  }
}

@media (min-width: 1024px) {
  .contact__lead {
    font: var(--text-body);
  }
}

/* Десктоп: текст зліва, форма справа */
@media (min-width: 1024px) {
  /* 486 + 589px на 1440; на вужчих екранах обидві колонки пропорційно стискаються,
     а проміжок між ними — не менше 40px.
     Ліва колонка: опис, під ним месенджери; форма справа на всю висоту */
  .contact__inner {
    display: grid;
    grid-template-columns: minmax(0, 486fr) minmax(0, 589fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "intro      form"
      "messengers form";
    column-gap: max(var(--space-40), 100% - 1075px);
    align-items: start;
  }

  .contact__intro {
    grid-area: intro;
  }

  .contact__lead {
    margin-bottom: 0;
  }

  .form {
    grid-area: form;
    max-width: none;
  }

  .messengers {
    grid-area: messengers;
    margin-top: var(--space-32);
  }
}

/* Месенджери: підпис і дві кнопки-контури.
   Мобайл — кнопки ділять ширину порівну; десктоп — за шириною вмісту */
.messengers {
  margin-top: var(--space-24);
}

.messengers__label {
  margin-bottom: var(--space-12);
  font: var(--text-body-s);
}

.messengers__buttons {
  display: flex;
  gap: var(--space-12);
}

.messengers__button {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 47px;
  padding: var(--space-12) var(--space-16);
  font: var(--text-body-s);
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  background: var(--bg-page);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-hover);
}

.messengers__icon {
  flex: none;
}

@media (hover: hover) {
  .messengers__button:hover {
    border-color: var(--text-primary);
  }
}

@media (min-width: 1024px) {
  .messengers__buttons {
    flex-wrap: wrap;
  }

  .messengers__button {
    flex: none;
    padding-inline: var(--space-20);
  }
}

/* «Обрати» на картці послуги: поле «Тема звернення» коротко підсвічується (1,5 с),
   щоб було видно, що послугу вже підставлено. Клас ставить і знімає js/main.js.
   Без анімації («Зменшити рух») контур просто тримається 1,5 с */
.field__control.is-picked {
  box-shadow: 0 0 0 3px var(--action-primary);
}

@media (prefers-reduced-motion: no-preference) {
  .field__control.is-picked {
    animation: field-picked 1500ms ease-out forwards;
  }
}

@keyframes field-picked {
  0%,
  40% {
    box-shadow: 0 0 0 3px var(--action-primary);
  }

  100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 0%, transparent);
  }
}

/* Заголовок форми отримує фокус програмно (на сенсорних пристроях після «Обрати»):
   рамку не показуємо — це не елемент для натискання */
#contact-title:focus {
  outline: none;
}

/* ---------- Попапи форми ---------- */
/* Червона картка по центру екрана: іконка, заголовок, текст, біла кнопка */
/* Десктоп 480×320; на мобайлі — картка з полями 16px з боків */
.popup {
  width: min(100% - 2 * var(--space-16), 480px);
  max-width: none;
  min-height: 320px;
  padding: var(--space-32) var(--space-16);
  color: var(--text-inverse);
  text-align: center;
  background: var(--action-primary);
  border: 0;
  border-radius: var(--radius-md);
}

/* display задаємо лише відкритому попапу, інакше закритий стане видимим */
.popup[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.popup::backdrop {
  background: var(--bg-dark);
  opacity: 0.6;
}

.popup__icon {
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-32);
}

.popup__title {
  margin-bottom: var(--space-12);
  font: var(--text-title);
}

.popup__text {
  max-width: 326px;
  margin-bottom: var(--space-20);
  font: var(--text-body-s);
}

/* Попап успіху: текст на всю ширину картки (мінус її поля), без balance/pretty —
   Safari з text-wrap: pretty стискав абзац і ламав першу фразу на 2 рядки */
.popup__text--wide {
  align-self: stretch;
  max-width: none;
  text-wrap: wrap;
}

/* Перша фраза — завжди одним рядком, коли картка достатньо широка;
   на вужчих екранах переноситься як звичайно */
@media (min-width: 400px) {
  .popup__line {
    white-space: nowrap;
  }
}

.popup__phone {
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.popup__button {
  min-width: 144px;
  min-height: var(--space-40);
  padding: var(--space-12) var(--space-24);
  font: var(--text-button-s);
  color: var(--text-brand);
  background: var(--bg-page);
  border: 0;
  border-radius: var(--radius-md);
}

/* На червоному тлі темна фокус-рамка губиться — робимо білу */
.popup :focus-visible {
  outline-color: var(--text-inverse);
}

/* ---------- Footer ---------- */
/* Рядок футера — спільний для меню й контактів, щоб колонки не розходились:
   мобайл — 40px без проміжків (зручна зона натискання),
   десктоп — 21px з проміжком 12px, тобто крок 33px, як у макеті */
.site-footer {
  --footer-row-height: 40px;
  --footer-row-gap: 0px;
  padding-block: var(--space-24);
  font: var(--text-body-s);
  color: var(--text-inverse);
  background: var(--bg-dark);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.site-footer__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.site-footer__logo {
  align-self: flex-start;
  display: block;
}

/* Горизонтальне лого 24px заввишки з полем 8px навколо — разом 40px, як у макеті */
.site-footer__logo-h {
  width: auto;
  height: var(--space-24);
  margin: var(--space-8);
}

.site-footer__logo-v {
  display: none;
}

.site-footer__list,
.site-footer__contacts {
  display: grid;
  gap: var(--footer-row-gap);
}

.site-footer__contacts {
  margin-top: var(--space-12);
}

.site-footer__row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--footer-row-height);
}

.site-footer__link {
  text-decoration: none;
}

/* «Налаштування cookies» — це дія, а не перехід, тому <button>; виглядає як посилання */
.site-footer__button {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Без JS кнопка нічого не відкриє — ховаємо */
html:not(.js) [data-cookie-settings] {
  display: none;
}

/* Іконки — inline SVG з fill="currentColor": беруть колір тексту */
.site-footer__icon {
  flex: none;
}

.site-footer__legal p {
  margin-top: var(--space-8);
}

.site-footer :focus-visible {
  outline-color: var(--text-inverse);
}

@media (hover: hover) {
  .site-footer__link:hover {
    text-decoration: underline;
    text-underline-position: from-font;
  }
}

/* Десктоп: лого, меню й контакти зліва в ряд, правові рядки справа внизу.
   Колонки починаються з однієї лінії зверху, а їхні останні рядки стоять
   на одній лінії з «Політика приватності / ©» */
@media (min-width: 1024px) {
  .site-footer {
    --footer-row-height: 21px;
    --footer-row-gap: var(--space-12);
  }

  .site-footer__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  /* Проміжки 96 і 120px на 1440, на вужчих екранах плавно менші */
  .site-footer__main {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(var(--space-48), 8.33vw, var(--space-120));
  }

  .site-footer__logo {
    align-self: center;
    margin-right: calc(-1 * clamp(var(--space-8), 1.667vw, var(--space-24)));
  }

  .site-footer__logo-h {
    display: none;
  }

  .site-footer__logo-v {
    display: block;
  }

  .site-footer__contacts {
    margin-top: 0;
  }

  .site-footer__legal {
    display: flex;
    align-items: center;
    gap: var(--space-12);
  }

  .site-footer__legal p {
    margin-top: 0;
  }
}

/* Посилання на поточну сторінку в підвалі підкреслене */
.site-footer__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-position: from-font;
}

/* ---------- Сторінка «Політика приватності» ---------- */
.legal {
  display: grid;
  gap: var(--space-24);
  max-width: 800px;
  padding-block: var(--section-gap) var(--space-64);
}

.legal__date {
  font: var(--text-body-s);
  color: var(--text-secondary);
}

/* Усередині розділу абзаци й списки йдуть щільно, як у макеті */
.legal__heading {
  margin-bottom: var(--space-12);
  font: var(--text-h3, var(--text-title));
}

.legal__list {
  padding-left: var(--space-20);
  list-style: disc;
}

.legal a {
  text-decoration: underline;
  text-underline-position: from-font;
}

@media (min-width: 1024px) {
  .legal {
    gap: var(--space-40);
    padding-bottom: var(--space-120);
  }
}

/* ---------- Анімації ---------- */
/* Правило для всього блоку: анімуються лише transform і opacity. */

/* Поява секцій. Ховаємо тільки коли працює JS (.js) і людина не просила
   зменшити рух; без цього контент просто видно одразу.
   backwards: до старту елемент у початковому стані, а після завершення анімація
   нічого не лишає — тому ховер карток працює без перешкод */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.is-visible) {
    opacity: 0;
  }

  .js [data-reveal].is-visible {
    animation: reveal var(--duration-reveal) var(--ease-out-soft) backwards;
  }

  /* Картки й кроки до зсуву знизу ще трохи «доростають»: scale 0.96 → 1 */
  .js .for-whom__card.is-visible,
  .js .service-card.is-visible,
  .js .guarantee-card.is-visible,
  .js .step.is-visible {
    animation-name: reveal-card;
  }

  /* Фото в секціях: рамка з'являється, а саме зображення в ній одночасно
     зменшується з 110% до 100%. Затримку бере ту саму, що й рамка */
  .js .about__media.is-visible img {
    animation: reveal-zoom var(--duration-reveal) var(--ease-out-soft) backwards;
    animation-delay: inherit;
  }

  /* Лінія шкали «домальовується» від свого кружечка до наступного,
     коли крок уже з'явився. --reveal-delay — затримка кроку (ставить js/main.js) */
  .js .step:not(.is-visible) .step__marker::after {
    transform: scaleY(0);
  }

  .js .step.is-visible .step__marker::after {
    animation: step-line-y var(--duration-reveal) var(--ease-out-soft) backwards;
    animation-delay: calc(var(--reveal-delay, 0ms) + var(--duration-reveal) / 2);
  }

  @media (min-width: 1024px) {
    .js .step:not(.is-visible) .step__marker::after {
      transform: scaleX(0);
    }

    .js .step.is-visible .step__marker::after {
      animation-name: step-line-x;
    }
  }
}

@keyframes step-line-y {
  from {
    transform: scaleY(0);
  }
}

@keyframes step-line-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
  }
}

@keyframes reveal-card {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-distance)) scale(0.96);
  }
}

@keyframes reveal-zoom {
  from {
    transform: scale(1.1);
  }
}

/* Fade-up у Hero — той самий рух, але з коротшою відстанню */
@keyframes hero-reveal {
  from {
    opacity: 0;
    transform: translateY(var(--hero-reveal-distance));
  }
}

/* Патерн-смуга повільно пливе. Рух стоїть на паузі, поки смуга поза екраном:
   клас is-moving ставить і знімає js/main.js (IntersectionObserver).
   Перша смуга пливе вліво, друга (--reverse) — вправо */
@media (prefers-reduced-motion: no-preference) {
  .js .pattern-strip::before {
    animation: pattern-drift var(--duration-pattern) linear infinite paused;
  }

  .js .pattern-strip--reverse::before {
    animation-direction: reverse;
  }

  .js .pattern-strip.is-moving::before {
    animation-play-state: running;
  }
}

@keyframes pattern-drift {
  to {
    transform: translateX(calc(-1 * var(--pattern-segment)));
  }
}

/* Hero при завантаженні — один таймлайн, тривалості й крок у tokens.css.
   Затримки — частки кроку --hero-stagger (200ms):
     фото 0 · рядок 1 — 150ms · рядок 2 — 300ms · опис 600ms · кнопка 800ms · статистика 1000ms.
   Разом зі статистикою стартує лічильник (js/main.js).
   Фото видно одразу: воно лише повільно зменшується зі 106% до 100% і закінчує
   трохи пізніше за лічильник, з власною, рівнішою кривою */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__media img {
    animation: hero-photo var(--duration-hero-photo) var(--ease-hero-photo) backwards;
  }

  .js .hero__title-inner {
    animation: hero-line var(--duration-hero-text) var(--ease-out-soft) backwards;
    animation-delay: calc(0.75 * var(--hero-stagger));
  }

  .js .hero__title-line + .hero__title-line .hero__title-inner {
    animation-delay: calc(1.5 * var(--hero-stagger));
  }

  .js .hero__lead,
  .js .hero__cta,
  .js .hero .stats {
    animation: hero-reveal var(--duration-hero-fade) var(--ease-out-soft) backwards;
  }

  .js .hero__lead  { animation-delay: calc(3 * var(--hero-stagger)); }
  .js .hero__cta   { animation-delay: calc(4 * var(--hero-stagger)); }
  .js .hero .stats { animation-delay: calc(5 * var(--hero-stagger)); }

  /* Статистика при завантаженні поза екраном (низький телефон): чекає,
     поки до неї докрутять, і тоді з'являється без затримки */
  .js .hero .stats.is-waiting {
    opacity: 0;
    animation: none;
  }

  .js .hero .stats.is-late {
    animation-delay: 0ms;
  }
}

@keyframes hero-line {
  from {
    transform: translateY(100%);
  }
}

@keyframes hero-photo {
  from {
    transform: scale(1.06);
  }
}

/* Ховери — лише там, де є мишка */
@media (hover: hover) {
  /* Тінь і рамка лежать у псевдоелементі та проявляються через opacity:
     так не анімується box-shadow і вміст картки не зсувається */
  .for-whom__card,
  .service-card {
    transition: transform var(--duration-hover);
  }

  .for-whom__card::before,
  .service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 var(--space-12) var(--space-32) color-mix(in srgb, var(--bg-dark) 12%, transparent);
    opacity: 0;
    transition: opacity var(--duration-hover);
    pointer-events: none;
  }

  /* Card/Service, State=Hover: червона рамка 2px */
  .service-card::before {
    border: 2px solid var(--action-primary);
  }

  .for-whom__card:hover,
  .service-card:hover {
    transform: translateY(calc(-1 * var(--space-4)));
  }

  .for-whom__card:hover::before,
  .service-card:hover::before {
    opacity: 1;
  }

  .service-card__arrow {
    transition: transform var(--duration-hover);
  }

  .service-card:hover .service-card__arrow {
    transform: translateX(var(--space-4));
  }

  /* Підкреслюємо лише слово «Обрати», без пробілу перед стрілкою */
  .service-card:hover .service-card__link-text {
    text-decoration: underline;
    text-underline-position: from-font;
  }
}

/* ---------- Десктоп ---------- */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-24);
  }

  .grid > * {
    grid-column: span var(--span-lg, 12);
  }

  .section__title {
    margin-bottom: var(--space-40);
  }
}

/* ---------- Sticky CTA (mobile) ---------- */
/* Липка панель із кнопкою «Залишити заявку» внизу екрана, лише <1024px.
   Видима між моментом, коли кнопка Hero сховалась під шапку, і появою форми
   (керує js/main.js, initStickyCta).
   Увесь блок спирається на розмітку [data-sticky-cta]: без неї ці правила ні на що не діють */
.sticky-cta {
  --sticky-cta-height: calc(var(--space-12) * 2 + var(--space-48)); /* 72px */
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20; /* вище за контент і шапку; меню, попапи й лайтбокс — у верхньому шарі браузера */
  padding: var(--space-12) var(--space-16) calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-page);
  box-shadow: var(--shadow-sticky);
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 250ms ease-out,
    opacity 250ms ease-out;
}

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

/* Перший стан після завантаження — без виїзду */
.sticky-cta.is-instant {
  transition: none;
}

/* Поки відкрите меню, попап чи лайтбокс (будь-який <dialog>) або банер cookies — панелі не видно */
html:has(dialog[open]) .sticky-cta,
html:has([data-cookie-banner]:not([hidden])) .sticky-cta {
  opacity: 0;
  transform: translateY(100%);
}

.sticky-cta__button {
  width: 100%;
}

/* Поки є панель, секційна кнопка «Почати співпрацю» на мобайлі не потрібна:
   її роль бере панель. Без розмітки панелі кнопка повертається сама */
@media (max-width: 1023.98px) {
  html:has([data-sticky-cta]) .how__cta {
    display: none;
  }
}

/* Фокус і переходи за якорями не ховаються під панель (WCAG 2.4.11) */
@media (max-width: 1023.98px) {
  html:has([data-sticky-cta]) {
    scroll-padding-bottom: calc(var(--space-12) * 2 + var(--space-48) + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 1024px) {
  .sticky-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: none;
  }
}

/* ---------- Cookie banner ---------- */
/* Банер згоди на cookies (керує js/main.js, initConsent). Не modal: сторінкою можна
   користуватись і з ним. position: fixed — розмітку не зсуває (CLS = 0).
   До 767px — на всю ширину з полями 16px; від 768px — картка 440px справа знизу,
   відступ 24px (виняток із правила «лише 1024px», як у Hero) */
.cookie-banner {
  position: fixed;
  right: var(--space-16);
  bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
  left: var(--space-16);
  z-index: 30; /* вище за Sticky CTA (20); skip-link (100) і <dialog> — ще вище */
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-16);
  color: var(--text-primary);
  background: var(--bg-page);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-banner);
  animation: cookie-banner-in 250ms ease-out;
}

.cookie-banner[hidden] {
  display: none;
}

/* Фокус ставимо на банер, коли його відкрили з «Налаштування cookies» */
.cookie-banner:focus {
  outline: none;
}

.cookie-banner:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.cookie-banner__title {
  font: var(--text-title);
}

.cookie-banner__text {
  font: var(--text-body-s);
  color: var(--text-secondary);
}

.cookie-banner__link {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-position: from-font;
}

/* Дві кнопки однакової ширини — відмовитись так само легко, як погодитись */
.cookie-banner__actions {
  display: flex;
  gap: var(--space-12);
  padding-top: var(--space-4);
}

.cookie-banner__button {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: var(--space-16);
}

@keyframes cookie-banner-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-16));
  }
}

/* Банер не закриває елемент у фокусі й місце, куди веде якір (WCAG 2.4.11):
   висоту банера з відступом рахує JS (--cookie-banner-space) */
html:has([data-cookie-banner]:not([hidden])) {
  scroll-padding-bottom: var(--cookie-banner-space, 0px);
}

@media (min-width: 768px) {
  .cookie-banner {
    right: var(--space-24);
    bottom: calc(var(--space-24) + env(safe-area-inset-bottom, 0px));
    left: auto;
    width: 440px;
    padding: var(--space-24);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    animation: none;
  }
}

/* ---------- Менше руху ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}