/* ============================================================
   М'ята — клінінг · v3
   Навігація за краями сітки + повноекранне меню із зеленим занавісом.
   Hero: менший чорний заголовок, фото в сітці, без стикерів.
   Фото — строго гострі кути (без border-radius).
   ============================================================ */

:root {
  color-scheme: light;
  interpolate-size: allow-keywords;

  /* Нейтралі з головної anidi. Всі справді сірі — R=G=B, без синього підмішку. */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #FAFAFA;
  --color-neutral-100: #F8F8F8;
  --color-neutral-200: #F4F4F4;
  --color-neutral-300: #EEEEEE;
  --color-neutral-400: #DBDBDB;
  --color-neutral-500: #CCCCCC;
  --color-neutral-600: #999999;   /* НЕ для тексту: 2.85:1 на білому */
  --color-neutral-700: #555555;
  --color-neutral-800: #333333;
  --color-neutral-900: #111111;

  /* Зелена шкала — база #266D3E */
  --color-green-50:  #EDF7F0;
  --color-green-100: #DCEEE2;
  --color-green-200: #AEE8C3;
  --color-green-300: #8BC59D;
  --color-green-400: #5AA873;
  --color-green-500: #3A8254;
  --color-green-600: #266D3E;
  --color-green-700: #205A35;
  --color-green-800: #1B482C;
  --color-green-900: #173B25;
  --color-green-950: #0C2114;

  /* Лайм */
  --color-lime-500: #D6EE75;
  --color-lime-600: #C7E45A;
  --color-lime-700: #B8D83F;

  /* Бренд */
  --color-brand-primary:         var(--color-green-600);
  --color-brand-primary-hover:   var(--color-green-700);
  --color-brand-primary-pressed: var(--color-green-800);
  --color-brand-dark:            var(--color-green-900);
  --color-brand-darkest:         var(--color-green-950);
  --color-brand-accent:          var(--color-lime-500);

  /* Поверхні. Полотно біле, блоки відділяє нейтральний сірий. */
  --color-bg-page:                var(--color-neutral-0);
  --color-bg-surface:             var(--color-neutral-0);
  --color-bg-surface-soft:        var(--color-neutral-100);
  --color-bg-section:             var(--color-neutral-200);
  --color-bg-brand:               var(--color-green-600);
  --color-bg-dark:                #1C1C1C;
  --color-bg-darkest:             var(--color-neutral-900);

  /* Текст */
  --color-text-primary:     var(--color-neutral-900);
  --color-text-secondary:   var(--color-neutral-700);
  --color-text-muted:       var(--color-neutral-600);
  --color-text-brand:       var(--color-green-600);
  --color-text-inverse:     var(--color-neutral-0);
  --color-text-on-accent:   var(--color-neutral-900);
  --color-text-placeholder: #767676;   /* 4.54:1 на білому */
  --color-text-disabled:    #909090;

  /* Межі */
  --color-border-subtle:  var(--color-neutral-300);
  --color-border-default: var(--color-neutral-400);
  --color-border-strong:  var(--color-neutral-500);
  /* кордон інтерактивного контролю — мінімум 3:1 (WCAG 1.4.11) */
  --color-border-control: #8A8A8A;
  --color-border-brand:   var(--color-green-600);

  /* Дії */
  --color-action-primary:         var(--color-green-600);
  --color-action-primary-hover:   var(--color-green-700);
  --color-action-primary-pressed: var(--color-green-800);

  --color-action-accent:         var(--color-lime-500);
  --color-action-accent-hover:   var(--color-lime-600);
  --color-action-accent-pressed: var(--color-lime-700);
  --color-action-accent-text:    var(--color-neutral-900);

  /* Вторинна кнопка: сіра поверхня карток → темніший крок → заливка брендом */
  --color-action-secondary:         var(--color-neutral-200);   /* #F4F4F4 */
  --color-action-secondary-hover:   var(--color-neutral-400);   /* #DBDBDB */
  --color-action-secondary-pressed: var(--color-action-primary);

  /* контраст несе зелена обводка; лайм — зовнішній halo */
  --color-action-focus:      var(--color-green-600);
  --color-action-focus-halo: var(--color-lime-500);

  --color-action-disabled-bg:   var(--color-neutral-300);
  --color-action-disabled-text: var(--color-text-disabled);

  /* Системні стани */
  --color-status-success:    #207A45;
  --color-status-info:       #2A68A2;
  --color-status-info-bg:    #EBF3FA;
  --color-status-warning:    #A65A00;
  --color-status-warning-bg: #FFF4E5;
  --color-status-error:      #B53A34;
  --color-status-error-bg:   #FCECEB;
  --color-status-error-on-dark: #F3A69F;

  /* Канали для завіс і тіней */
  --ink-rgb: 17 17 17;
  --deep-rgb: 17 17 17;
  --brand-rgb: 38 109 62;

  --color-placeholder-before: #6B6B6B;

  --font-display: 'Onest', sans-serif;
  --font-body:    'Onest', sans-serif;

  --container: 1520px;
  --edge: clamp(16px, 3.5vw, 40px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --nav-h: 64px;
  --nav-clear: calc(var(--nav-h) + 28px);

  --radius-bento: 25px;
  --radius-btn: 14px;
}

/* Десктопне поле окремим правилом, а не через clamp: щоб clamp дійшов до 120px,
   довелось би підняти й vw-член, а він зачепив би мобільну ширину. */
@media (min-width: 900px) { :root { --edge: 120px; } }

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  line-height: 1.55;
  letter-spacing: -0.02em;    /* Onest ширший за Inter — мінусовий трекінг помітніший */
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Декоративна графіка за блоками ---------- */
html, body { background: var(--color-bg-page); }
body { position: relative; }

.topbar, .site-menu, main, .site-footer { position: relative; z-index: 1; }

/* лише для скрінрідерів: візуально сховано, але доступно для читання вголос */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Фокус: контраст несе зелена обводка (5.88:1 на полотні), лайм — зовнішній halo */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--color-action-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--color-action-focus-halo);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: none;            /* <button> інакше бере з UA-стилів border: 2px outset —
                              на посиланнях її немає, тому вилазило лише у формі */
  border-radius: var(--radius-btn);
  padding: 11px 28px;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:active { transform: scale(0.98); }

/* Просте розчинення кольору. Купол на clip-path прибрано разом із
   псевдоелементом — при звичайному переході фону додатковий шар не потрібен. */
.btn-primary {
  background: var(--color-action-primary);   /* контраст AA: білий на #266D3E ≈ 6.29:1 */
  color: var(--color-text-inverse);
  transition: background 0.32s var(--ease), transform 0.25s var(--ease);
}
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--color-bg-dark); }
/* нижче за :hover навмисно — при натисканні активні обидва стани,
   і за однакової специфічності виграє те правило, що йде пізніше */
.btn-primary:active { background: var(--color-action-primary-pressed); }

/* Вторинна кнопка — та сама логіка, що в кружечка зі стрілкою в другій секції:
   default порожній контур, hover заливається брендовим зеленим, pressed темнішим.
   Контур — єдиний кордон контролю, тому колір узятий з ≥3:1 (WCAG 1.4.11),
   а не з --color-border-strong (#CCCCCC, 1.61:1). */
.btn-ghost {
  color: var(--color-text-primary);                 /* 18.9:1 */
  background: transparent;
  border: 1.5px solid var(--color-border-control);  /* 3.45:1 на білому, 3.14:1 на сірому */
}
.btn-ghost:hover {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--color-text-inverse);                 /* 6.29:1 */
}
/* нижче за :hover навмисно: при натисканні активні обидва стани,
   і за однакової специфічності виграє те правило, що йде пізніше */
.btn-ghost:active {
  background: var(--color-action-primary-pressed);
  border-color: var(--color-action-primary-pressed);
  color: var(--color-text-inverse);
}

/* Коли вторинна стоїть поруч із зеленою основною — на ховері вона заливається
   чорним, а не зеленим: інакше під курсором у парі два зелені прямокутники,
   і зникає різниця між головною дією та відмовою. */
:is(.btn-primary ~ .btn-ghost, .btn-ghost:has(~ .btn-primary)):hover {
  background: var(--color-bg-dark);
  border-color: var(--color-bg-dark);
  color: var(--color-text-inverse);          /* 17.0:1 */
}
:is(.btn-primary ~ .btn-ghost, .btn-ghost:has(~ .btn-primary)):active {
  background: var(--color-bg-darkest);
  border-color: var(--color-bg-darkest);
  color: var(--color-text-inverse);
}

/* Той самий контур на темному/фото — інвертований */
.btn-ghost--inverse {
  color: var(--color-text-inverse);
  border-color: rgb(255 255 255 / 0.72);
}
.btn-ghost--inverse:hover {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
}
.btn-ghost--inverse:active {
  background: var(--color-action-primary-pressed);
  border-color: var(--color-action-primary-pressed);
}

/* ---------- Топбар: лого зліва, МЕНЮ справа, за краями сітки ---------- */

/* ---------- Навбар ---------- */
/* Проста суцільна смуга на всю ширину: лого + гамбургер ліворуч,
   посилання по центру, CTA праворуч. Без «острівців». */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;                    /* над оверлеєм меню — кнопка морфиться й закриває */
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  height: var(--nav-h);
  padding-inline: var(--edge);
  background: var(--color-bg-page);
}

.topbar-logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
/* Пропорція нового знака 3.34:1 проти 2.02:1 у старого — за тієї самої висоти
   він майже вдвічі ширший, тому висоту трохи прибрано, щоб не тиснув навбар. */
.topbar-logo img { height: clamp(22px, 1.9vw, 27px); width: auto; display: block; }

/* Гамбургер: відкриває повноекранне меню (там є пункти, яких нема у смузі).
   Видимий на всіх ширинах, як на референсі. */
.menu-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  color: var(--color-text-primary);
  transition: background 0.2s var(--ease);
}
.menu-toggle:hover { background: var(--color-bg-section); }
.menu-toggle:active { background: var(--color-border-default); }
.menu-toggle-bars {
  position: relative;
  display: block;
  width: 22px;
  height: 12px;
}
.menu-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: top 0.3s var(--ease), transform 0.3s var(--ease);
}
.menu-toggle-bars span:nth-child(1) { top: 2px; }
.menu-toggle-bars span:nth-child(2) { top: 8px; }
/* морф гамбургер -> хрестик у відкритому стані */
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:nth-child(2) { top: 5px; transform: rotate(-45deg); }

/* Посилання: margin auto з обох боків центрує їх у просторі,
   що лишився між лого й CTA — на відміну від абсолютного центрування
   вони ніколи не наїдуть на сусідів на середніх ширинах. */
.nav-island { display: flex; align-items: center; margin-inline: auto; }
.nav-links { display: none; }
.nav-links a {
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--color-action-primary); }
:root { --nav-h: 64px; }
@media (min-width: 900px) { :root { --nav-h: 76px; } }

/* ---- Мобільний навбар: гамбургер ліворуч, лого по центру, CTA іконкою ---- */
/* Іконка живе тільки у згорнутому мобільному варіанті кнопки — вмикається
   нижче в @media. Правило має стояти ДО нього: специфічність однакова,
   тож інакше пізніше `display: none` перебивало б мобільне `inline-flex`. */
.nav-cta__ic { display: none; }

@media (max-width: 979px) {
  /* Лого по центру САМОЇ смуги. margin: 0 auto центрував би його лише між
     сусідами, а вони різної ширини — гамбургер 42px і CTA 42px плюс різні
     проміжки, тож лого з'їжджало. Абсолютне позиціювання дає точний центр. */
  .topbar-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .nav-cta-island { order: 1; margin-left: auto; }
  .menu-toggle {
    order: -1;
    background: var(--color-bg-section);   /* сірий квадрат, як на референсі */
    border-radius: var(--radius-btn);
  }
  .menu-toggle:hover { background: var(--color-border-default); }
  .nav-cta-island { order: 1; }
  /* підпис лишається в розмітці для скрінрідера, візуально його заміняє іконка */
  .nav-cta__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nav-cta__ic { display: inline-flex; }
  .nav-cta {
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
  }
}

@media (min-width: 980px) {
  .nav-links { display: flex; align-items: center; gap: clamp(2px, 1.2vw, 18px); }
  /* на десктопі всі розділи є у смузі — повноекранне меню лишається для мобільного */
  .menu-toggle { display: none; }
}

.nav-cta-island { flex: 0 0 auto; display: flex; align-items: center; }
.nav-cta__ic svg { width: 26px; height: 26px; display: block; }
.nav-cta {
  font-size: 14px;
  padding: 11px 22px;
  white-space: nowrap;
}
/* на вузьких екранах CTA скорочується, щоб смуга не переповнилась */
@media (max-width: 560px) {
  .nav-cta { padding: 10px 16px; font-size: 13px; }
}

/* ---------- Вертикальні швидкі посилання на правому краю ---------- */

.edge-nav {
  position: fixed;                 /* липка — лишається на екрані при прогортуванні */
  right: var(--edge);
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  text-align: right;
}
.edge-nav a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.edge-nav a:hover { color: var(--color-text-primary); }

/* показуємо лише коли є поле поза сіткою */
@media (min-width: 1340px) {
  .edge-nav { display: flex; }
}

/* ---------- Повноекранне меню + зелений занавіс ---------- */

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}
.site-menu[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
}
/* під час згортання меню лишається видимим, але некликабельним */
.site-menu[data-open="closing"] {
  visibility: visible;
  pointer-events: none;
}

/* напівпрозора панель меню з блюром (фрост-скло) */
.site-menu__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  display: flex;
  flex-direction: column;
  padding: clamp(90px, 14vh, 130px) var(--edge) clamp(28px, 4vw, 56px);
  overflow-y: auto;
  opacity: 0;
}

/* зелений занавіс, що змітається згори вниз */
.site-menu__curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--color-bg-dark);
  transform: translateY(-100%);
}

/* відкриття: занавіс змітається згори вниз, панель проявляється */
.site-menu[data-open="true"] .site-menu__curtain {
  animation: curtain-wipe 0.85s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.site-menu[data-open="true"] .site-menu__inner {
  animation: menu-reveal 0.45s ease 0.32s forwards;
}

/* згортання: занавіс іде вгору й накриває, панель лишається щільною,
   поки її не накрито (щоб сторінка не «блимала» до анімації) */
.site-menu[data-open="closing"] .site-menu__curtain {
  animation: curtain-wipe-out 0.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.site-menu[data-open="closing"] .site-menu__inner {
  opacity: 1;
  animation: menu-hold-hide 0.7s linear forwards;
}

@keyframes curtain-wipe {
  0%   { transform: translateY(-100%); }
  46%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
@keyframes menu-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes curtain-wipe-out {
  0%   { transform: translateY(100%); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
@keyframes menu-hold-hide {
  0%, 48%   { opacity: 1; }
  52%, 100% { opacity: 0; }
}

.site-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-menu__contact {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--color-text-inverse);
  text-decoration: none;
}
.site-menu__contact:hover { color: var(--color-brand-accent); }

.menu-close {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 2px;
  color: var(--color-text-inverse);
}
.menu-close-x {
  position: relative;
  width: 22px;
  height: 22px;
}
.menu-close-x::before,
.menu-close-x::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.menu-close-x::before { transform: rotate(45deg); }
.menu-close-x::after  { transform: rotate(-45deg); }

.site-menu__nav {
  margin: auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 56px);
}
.site-menu__nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-menu__nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 4.5vw, 40px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.site-menu__nav a:hover { color: var(--color-brand-accent); }   /* акцент на темному — лайм */

.site-menu__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--color-border-default);
}
.site-menu__footer .site-menu__contact { font-size: 16px; font-weight: 500; }

/* ---------- Hero ---------- */

.hero {
  --hero-inset: var(--edge);   /* кадр hero тримає ті самі поля, що й решта плиток */
  --hero-inset-top: clamp(92px, 8.5vw, 112px);
  padding: var(--hero-inset-top) var(--hero-inset) var(--hero-inset);
}
.hero-frame {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: clamp(560px, 82vh, 900px);
  border-radius: var(--radius-bento);
  background-color: var(--color-bg-section);      /* фолбек, поки нема фото */
  background-image: url('assets/hero-bg.jpg');
  background-size: cover;
  background-position: center;
}


/* Відео лежить у кадрі під вмістом: .hero-frame має isolation + overflow: clip,
   тож обрізання й заокруглення працюють без додаткової обгортки.
   background-image кадру лишається — він видно до першого кадру відео
   і повністю замінює його, коли рух вимкнено. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(32px, 6vh, 72px);
  min-height: inherit;
  padding: clamp(24px, 3vw, 48px);
}
.hero-copy { min-width: 0; }
.hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--color-text-inverse);
}
.hero-lead {
  margin-top: clamp(14px, 2vw, 22px);
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 500;
  color: var(--color-text-inverse);
}
.hero-brand {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-inverse);
  white-space: nowrap;
}

/* Ряд карток тарифів. Напівпрозорі — під ними фото, тому текст завжди
   темний: біла підкладка навіть над найтемнішою ділянкою знімка дає
   не нижче 9.9:1. */
.hero-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1vw, 14px);
}
/* Розміри задаємо саме <li>: він і є елементом сітки та стрічки.
   Раніше ширина стояла на .hero-card усередині, тому кожен <li>
   розтягувався по довжині власного тексту — картки виходили різні. */
.hero-cards > li { display: flex; min-width: 0; }
@media (max-width: 900px) { .hero-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hero-cards { grid-template-columns: 1fr; } }

.hero-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 5vh, 56px);
  /* <li> — flex-контейнер, тому картці треба явна ширина:
     як flex-елемент вона інакше стискається до вмісту */
  width: 100%;
  height: 100%;
  padding: clamp(14px, 1.4vw, 20px);
  border-radius: 20px;
  text-decoration: none;
  background: rgb(255 255 255 / 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
  color: var(--color-text-primary);
  transition: background 0.28s var(--ease), color 0.28s var(--ease);
}
/* На ховері картка стає суцільно білою — без підняття: чотири плитки в ряд
   на фото і так помітні, а зсув по вертикалі змушував око стрибати. */
.hero-card:hover {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);        /* 18.9:1 */
}
.hero-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hero-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: -0.02em;
}
.hero-card__go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.55;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.hero-card__go svg { width: 15px; height: 15px; }
.hero-card:hover .hero-card__go { opacity: 1; transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .hero-card__go { transition: none; } }
.hero-card__text { font-size: 13px; line-height: 1.45; opacity: 0.78; }

/* ---- Мобільний hero: усе по центру, картки — горизонтальна стрічка ---- */
@media (max-width: 720px) {
  /* Кадр вужчий за відео, тож частина картинки й так поза кадром. Мінус до
     object-position — видима область їде вліво по джерелу, а сама картинка
     через це зміщується вправо. 225 - 20 = 205px до правого краю. */
  .hero-video { object-position: calc(50% - 205px) center; }

  .hero-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }
  /* брендовий рядок іде першим, над заголовком */
  .hero-brand { order: -1; margin-bottom: clamp(20px, 5vh, 44px); }
  .hero-title { font-size: clamp(28px, 9vw, 40px); }
  .hero-lead { max-width: 30ch; margin-inline: auto; }

  /* Стрічка на всю ширину кадру (відʼємні поля), а відступ першої картки
     дає padding — тому в спокої вона не торкається краю, а при гортанні
     картки заходять під край фото.
     scroll-padding обовʼязковий: без нього snap притискає картку до краю
     скрол-порту, тобто до самого краю кадру, ігноруючи padding. */
  .hero-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(-1 * clamp(24px, 3vw, 48px));
    padding-inline: clamp(24px, 3vw, 48px);
    scroll-padding-inline: clamp(24px, 3vw, 48px);
  }
  .hero-cards::-webkit-scrollbar { display: none; }
  .hero-cards > li {
    /* 240px фіксовано; min() лишає запас на дуже вузьких екранах,
       де 240px не влізли б у стрічку разом із відступами */
    flex: 0 0 min(240px, 80%);
    scroll-snap-align: start;
  }
  .hero-card {
    height: 150px;
    gap: 12px;                 /* мінімальний зазор; висоту розподіляє space-between */
    padding: 14px;
  }
  .hero-card__title { font-size: 17px; }
  .hero-card__text { font-size: 12.5px; }
}

/* Виділений тариф — суцільний брендовий, а не ще одне скло */
.hero-card.is-lead {
  background: var(--color-action-primary);
  color: var(--color-text-inverse);       /* 6.29:1 */
  backdrop-filter: none;
}
/* флагманська теж біліє — інакше в ряду вона єдина не відповідала б на курсор */
.hero-card.is-lead:hover {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

/* ---------- Заголовки секцій ---------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--color-text-primary);
  text-wrap: balance;
}

/* ---------- Секції (загальне) ---------- */

.section {
  padding: clamp(52px, 9vh, 104px) 0;
  scroll-margin-top: var(--nav-clear);
}
.hero + .section { padding-top: clamp(44px, 6vh, 76px); }
/* Окремих правил для «Як ми прибираємо» більше немає: вони підтискали
   секцію під прайс, а між ними тепер стоїть якірна плашка. Обидва відступи
   довкола неї — базові, як між усіма іншими блоками. */

/* ---------- Друга секція: заголовок ліворуч, текст праворуч ---------- */
.about { display: grid; gap: clamp(26px, 4vw, 44px); }
@media (min-width: 900px) {
  .about {
    /* права колонка ширша — саме вона несе основний обсяг тексту */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(40px, 6vw, 130px);
    align-items: start;
  }
}
.about__title { margin: 0; }

.about__more {
  margin-top: clamp(18px, 2.6vw, 32px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  text-decoration: none;
  color: var(--color-text-primary);
}
.about__more-strong { font-weight: 600; }
.about__more-rest {
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color 0.25s var(--ease);
}
.about__more-ic {
  margin-left: 5px;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-border-default);
  border-radius: 50%;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease), transform 0.25s var(--ease);
}
.about__more-ic svg { width: 14px; height: 14px; }
.about__more:hover .about__more-rest { color: var(--color-text-primary); }
.about__more:hover .about__more-ic {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--color-text-inverse);
  transform: translateX(3px);
}
.about__more:active .about__more-ic { background: var(--color-action-primary-pressed); border-color: var(--color-action-primary-pressed); }

/* Текст, що проявляється при прогортуванні. Спільний для другої секції
   і «Лізи і команди» — JS розбиває на слова кожен .scroll-fill. */
.scroll-fill p {
  font-size: clamp(19px, 1.85vw, 26px);
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  text-wrap: pretty;
}
.scroll-fill p + p { margin-top: 1.35em; }
/* непроявлене слово світле; стан транзитний — до моменту читання абзац уже чорнильний */
.scroll-fill .w {
  color: var(--color-border-strong);
  transition: color 0.35s var(--ease);
}
.scroll-fill .w.is-lit { color: var(--color-text-primary); }
/* більше повітря між орбітою і клінерами — інакше секції злипаються */
/* усі якірні цілі, не лише .section — інакше #top і #kontakty ховаються під навбар */
main[id], footer[id] { scroll-margin-top: var(--nav-clear); }
.section-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--edge);
}
/* Патерн заголовка секції: підпис і заголовок ліворуч, опис — навпроти,
   праворуч, вирівняний по нижньому краю заголовка. Раніше опис стояв під
   заголовком і лишав праву половину порожньою. */
.section-head { margin-bottom: clamp(32px, 5vw, 56px); }
@media (min-width: 900px) {
  .section-head {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: clamp(20px, 2.5vw, 40px);
    align-items: end;
  }
  .section-head > .section-title { grid-column: 1; grid-row: 1; }
  .section-head > .section-sub {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    align-self: end;
  }
}
/* Обмеження ширини — на самому абзаці, а не на контейнері: `ch` рахується від
   кегля елемента, тож 42ch на .section-head давало ~357px (кегль контейнера 17px)
   і різало заголовки, які мають власні перенесення через <br>. */
.section-head .section-sub { max-width: 46ch; }
.section-sub {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-wrap: pretty;
}
/* назва секції над заголовком */

/* ---------- Прайс ---------- */

.price-list {
  list-style: none;
  border-top: 1px solid var(--color-border-default);
}
.price-from,
.price-unit {
  font-size: 0.42em;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.price-from { text-transform: uppercase; letter-spacing: 0.08em; }

/* Додаткові послуги — це частина прайсу, а не примітка. Мʼятна плитка піднімає
   блок до рівня карток замість того, щоб він читався як дрібний шрифт під ними. */
/* ---- Додаткові послуги під прайсом ---- */
/* Додаткові послуги — тонка таблиця-стрічка: назва блоку ліворуч, позиції
   в колонках через вертикальні лінійки. Плитки прибрані: чотири сірі картки
   під чотирма фото-картками тарифів читались як другий, слабший прайс. */
.extras {
  margin-top: clamp(40px, 5vw, 68px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 32px);
}
@media (min-width: 900px) {
  .extras { grid-template-columns: minmax(0, 0.62fr) minmax(0, 3fr); align-items: start; }
}
.extras__title {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

/* Блок «Як формується ціна» — окрема м'ятна плитка під сіткою форми.
   Ліворуч застереження, праворуч темна картка з обіцянкою: у неї інша роль,
   тому вона винесена окремо, а не набрана жирним усередині абзацу. */
.price-note {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 34px);
  padding: clamp(24px, 3vw, 42px);
  border-radius: var(--radius-bento);
  background: var(--color-bg-section);
}
@media (min-width: 900px) {
  .price-note { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: start; }
}
.price-note__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: clamp(12px, 1.4vw, 18px);
  color: var(--color-text-primary);        /* 17.2:1 на сірому */
}
.price-note__body p {
  max-width: 62ch;
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.55;
  color: var(--color-text-secondary);      /* 6.78:1 на сірому */
  text-wrap: pretty;
}
/* обіцянка — окрема темна картка, а не жирний рядок у тому ж абзаці */
.price-note__fix {
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--radius-bento);
  background: var(--color-green-900);
  color: var(--color-text-inverse);        /* 12.4:1 */
  font-family: var(--font-display);
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.extras__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(18px, 2vw, 26px) 0;
}
.extra {
  display: grid;
  align-content: start;
  gap: 10px;
  padding-left: clamp(18px, 2vw, 30px);
  /* 1px нейтральна лінійка — роздільник колонок, а не акцентна смуга */
  border-left: 1px solid var(--color-border-default);
}
.extra__n {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}
.extra__name {
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-primary);
}
.extra__price {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-brand);          /* 6.02:1 */
}


/* ---------- Липкий блок унизу екрана ---------- */
/* Обидві основні кнопки лежать поза зоною великого пальця: одна в навбарі
   вгорі, друга в кінці сторінки. Цей блок тримає дію під рукою між ними.
   Не смуга на всю ширину, а плитка з полями — так він читається як окремий
   елемент поверх сторінки, а не як частина футера. */
.sticky-cta {
  position: fixed;
  z-index: 90;                             /* під меню (100) і навбаром (120) */
  left: var(--edge);
  right: var(--edge);
  bottom: clamp(12px, 2vw, 24px);
  bottom: calc(clamp(12px, 2vw, 24px) + env(safe-area-inset-bottom, 0px));
  max-width: 620px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px);
  border-radius: var(--radius-bento);
  background: var(--color-brand-accent);
  color: var(--color-text-primary);        /* 14.7:1 на лаймі */
  /* прихований до свого часу — і не перехоплює кліки, поки лежить унизу */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ease), transform 0.45s var(--ease),
              visibility 0s linear 0.45s;
}
.sticky-cta.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}
.sticky-cta__text {
  flex: 1 1 190px;
  min-width: 0;
  font-size: clamp(14px, 1.1vw, 15px);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}
/* кнопка темна, а не зелена: на лаймі зелений дає 4.89:1, темний — 13.3:1 */
.sticky-cta__btn {
  flex: 0 0 auto;
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);        /* 17.0:1 */
  white-space: nowrap;
}
.sticky-cta__btn:hover { background: var(--color-bg-darkest); }
.sticky-cta__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.sticky-cta__close svg { width: 17px; height: 17px; }
.sticky-cta__close:hover { background: rgb(var(--ink-rgb) / 0.1); }
@media (max-width: 520px) {
  /* Кнопка займає весь рядок, тож хрестик у потоці падав під неї — виводимо
     його з потоку в правий верхній кут блока (сам блок position: fixed). */
  .sticky-cta { padding-top: clamp(12px, 1.6vw, 16px); }
  .sticky-cta__btn { flex: 1 1 100%; justify-content: center; }
  .sticky-cta__close {
    position: absolute;
    top: 6px;
    right: 6px;
  }
  .sticky-cta__text { padding-right: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: opacity 0.01s, visibility 0s; transform: none; }
}

/* ---------- Форма-заявка ---------- */

.form-grid {
  display: grid;
  column-gap: clamp(16px, 2vw, 24px);
  /* між рядками більше, ніж між колонками: зверху окремий блок «Як формується
     ціна», і з однаковим проміжком він читався б як частина форми */
  row-gap: clamp(30px, 4vw, 56px);
}
@media (min-width: 980px) {
  .form-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
  }
  /* колонка тягнеться на висоту рядка — нарівні з формою */
  .form-aside { align-self: stretch; }
}

/* Ліва колонка — без картки: чорнильний заголовок на тлі сторінки.
   Падінгу немає, щоб заголовок стояв рівно по краю сітки секції. */
.form-aside {
  display: flex;
  flex-direction: column;
  color: var(--color-text-primary);
}
.form-aside__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.04em;
}
/* текст довіри — той самий послівний ефект, що в другій секції та про команду */
.form-aside__trust {
  margin-top: clamp(22px, 2.6vw, 34px);
}
/* рядок про мінімальне замовлення замикає колонку */
.form-aside__note {
  margin-top: clamp(16px, 2vw, 24px);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);      /* 7.5:1 */
}

/* Права панель — світла мʼятна поверхня, поля білі */
.order-form { max-width: none; display: flex; }
.order-form__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-bento);
  background: var(--color-bg-section);
}
.order-form__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.order-form__head-title { font-weight: 700; font-size: 16px; color: var(--color-text-primary); }
.order-form__head-sep,
.order-form__head-time { font-size: 14px; color: var(--color-text-secondary); }

.order-form__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.8vw, 22px) clamp(16px, 2vw, 26px);
}
@media (max-width: 640px) { .order-form__fields { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; }
/* Атрибут hidden ховає елемент через display: none у стилях браузера, а будь-яке
   авторське display його перебиває — саме тому .field залишався видимим. */
[hidden] { display: none !important; }
.field--full { grid-column: 1 / -1; }
/* Тільки прямий нащадок: пігулки типу прибирання — теж <label> усередині
   .field, і `.field label` (0-1-1) перебивав їхнє власне правило (0-1-0),
   збиваючи padding на нуль. */
.field > label,
.type-toggle legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  padding: 0;
}
.req { color: var(--color-status-error); }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  /* На сірій панелі біле поле дає лише 1.10:1 — межу видно не за заливкою,
     а за кордоном, тому він має свої 3:1 (WCAG 1.4.11), а не 1.26:1. */
  border: 1px solid var(--color-border-control);
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--color-text-secondary); }
.field input:hover,
.field textarea:hover { border-color: var(--color-border-strong); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-border-brand);
  box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.16);
}
.field textarea { resize: vertical; min-height: 92px; }
.field--invalid input,
.field--invalid select,
.field--invalid textarea { border-color: var(--color-status-error); }
.field-error { font-size: 13px; color: var(--color-status-error); }   /* 5.6:1 на мʼятній панелі */
.field-error:empty { display: none; }

/* Тип прибирання — білі пігулки з іконкою, обрана лаймова */
.type-toggle { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.type-toggle__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.type-toggle__opt {
  flex: 0 0 auto;          /* без цього пігулка стискається вужче за свій текст */
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: var(--radius-btn);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.type-toggle__opt input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.type-toggle__label { font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--color-text-primary); }
.type-toggle__opt:hover { border-color: var(--color-border-strong); }
.type-toggle__opt:active { border-color: var(--color-action-primary); }
.type-toggle__opt:has(input:checked) {
  background: var(--color-brand-accent);
  border-color: var(--color-brand-accent);
}
.type-toggle__opt:has(input:focus-visible) {
  outline: 3px solid var(--color-action-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--color-action-focus-halo);
}
.type-toggle.field--invalid .type-toggle__opt { border-color: var(--color-status-error); }

/* ---- Пропозиція допослуг після відправлення ---- */
.upsell {
  margin: auto;
  width: min(520px, calc(100vw - 2 * var(--edge)));
  max-height: 86vh;
  padding: clamp(24px, 3vw, 36px);
  border: none;
  border-radius: var(--radius-bento);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  overflow: auto;
}
.upsell[open] { display: block; }
.upsell::backdrop { background: rgb(var(--deep-rgb) / 0.6); }
.upsell__title {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.upsell__lead {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary);     /* 7.5:1 */
}
.upsell__opts { display: grid; gap: 8px; margin: clamp(18px, 2.2vw, 24px) 0; }
.upsell__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-btn);
  background: var(--color-bg-section);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.upsell__opt:hover { background: var(--color-neutral-300); }
.upsell__opt input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--color-text-primary); }
.upsell__name { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; }
.upsell__price { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
/* поле з галочкою вже є контролем, тому підсвічуємо всю плитку */
/* обрана позиція — лаймовий акцент; м'ятних поверхонь на сайті немає */
.upsell__opt:has(input:checked) { background: var(--color-brand-accent); }
.upsell__foot { display: flex; flex-wrap: wrap; gap: 10px; }
.upsell__foot .btn { flex: 1 1 auto; justify-content: center; }

/* Кнопка розкриття коментаря — контурна, з плюсом */
.comment-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1.5px solid var(--color-border-control);
  border-radius: var(--radius-btn);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
/* плюс повертається в мінус, коли поле відкрите — знак стану, а не декор */
.comment-toggle__plus {
  font-size: 19px;
  line-height: 1;
  font-weight: 500;
  transition: transform 0.25s var(--ease);
}
.comment-toggle[aria-expanded="true"] .comment-toggle__plus { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .comment-toggle__plus { transition: none; } }
.comment-toggle:hover {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--color-text-inverse);
}
.comment-toggle:active {
  background: var(--color-action-primary-pressed);
  border-color: var(--color-action-primary-pressed);
  color: var(--color-text-inverse);
}
.comment-field { margin-top: clamp(12px, 1.4vw, 16px); }

/* День і місяць поруч — селекти рівної ширини */
.date-pick { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }

.form-foot {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  flex-wrap: wrap;
  margin-top: clamp(20px, 2.4vw, 30px);
}
/* заокруглений прямокутник, у радіус полів — не пігулка */
.form-submit { padding: 17px 34px; font-size: 16px; border-radius: var(--radius-btn); }
.form-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.form-note svg { width: 24px; height: 24px; flex: 0 0 auto; color: var(--color-action-primary); }
.form-note {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.form-status { font-size: 15px; font-weight: 600; }
.form-status.is-ok  { color: var(--color-status-success); }
.form-status.is-err { color: var(--color-status-error); }
.form-status:empty  { display: none; }

/* Підтвердження ЗАМІНЯЄ панель, а не стає поруч із нею: обидва — прямі
   нащадки .order-form (display: flex), тож без ховання панелі вони ставали
   двома колонками, і форма лишалась із кнопкою «Надіслати» поверх успіху. */
.order-form__success {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: clamp(28px, 4vw, 48px);
  /* перелік послуг робить текст довгим — блок має рости, а не тиснути вміст */
  min-height: 0;
  background: var(--color-bg-section);
  border-radius: var(--radius-bento);
}
.order-form.is-sent .order-form__panel { display: none; }
.order-form.is-sent .order-form__success { display: flex; }
.order-form__success h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--color-text-primary);
  outline: none;
}
.order-form__success p {
  color: var(--color-text-secondary);
  max-width: 44ch;
  line-height: 1.5;
  text-wrap: pretty;
}
/* Повідомлення розростається, коли до заявки додали послуги, тож кнопці
   потрібен свій відступ — інакше текст упирається просто в неї. */
.order-form__success .btn-ghost { margin-top: clamp(12px, 1.6vw, 20px); }

.check { width: 64px; height: 64px; }
.check__circle {
  fill: none;
  stroke: var(--color-green-400);
  stroke-width: 2.5;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: check-c 0.5s var(--ease) forwards;
}
.check__tick {
  fill: none;
  stroke: var(--color-green-400);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: check-t 0.35s var(--ease) 0.42s forwards;
}
@keyframes check-c { to { stroke-dashoffset: 0; } }
@keyframes check-t { to { stroke-dashoffset: 0; } }


/* ---- Відгуки: горизонтальна стрічка карток ---- */
.rev-rail {
  display: flex;
  align-items: start;      /* скріншоти різної висоти — не розтягуємо картки */
  --rev-gap: 18px;
  gap: var(--rev-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.rev-rail::-webkit-scrollbar { display: none; }
.rev-rail:focus-visible { outline: 3px solid var(--color-action-focus); outline-offset: 4px; border-radius: var(--radius-bento); }

/* Рівно три картки в полі зору: ширина рахується від стрічки, а не з clamp —
   інакше на широких екранах у щілину влазила четверта. */
/* ширина й прилипання в стрічці; вигляд самої картки — нижче */
.rev-card {
  flex: 0 0 calc((100% - 2 * var(--rev-gap)) / 3);
  scroll-snap-align: start;
}
/* ЗАГЛУШКА під скріншот із Telegram: панель із «бульбашками».
   Показує, що саме сюди піде знімок, а не просто кольорове поле. */
/* Картка = сам скріншот, підрізаний до однакової висоти. Низ згасає в колір
   самого знімка (--fade), а поверх згасання стоїть кнопка «Відкрити повністю». */
.rev-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-bento);
  background: var(--fade, var(--color-bg-section));
  height: clamp(360px, 32vw, 470px);
  display: grid;
  /* `safe center` центрує знімок, коли він нижчий за картку, і сам відкочується
     до верху, коли вищий — інакше довгий відгук обрізало б з обох боків і
     перший рядок ішов би за край. Перший рядок — фолбек. */
  align-content: start;
  align-content: safe center;
}
.rev-card__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}
/* Повний знімок екрана: заповнює картку цілком і кадрується по центру —
   саме там у Telegram лежить бульбашка. Без цього видно було б верхню
   третину порожніх шпалер, а сам відгук ішов би за нижній край. */
.rev-card__img--cover {
  /* Абсолютне позиціювання, а не height: 100%: картка — grid із
     `align-content: safe center`, рядок у ній має невизначену висоту, тож
     відсоткова висота зводилась до auto й object-fit не вмикався взагалі.
     inset прив'язує знімок до внутрішнього поля картки (padding 12px). */
  position: absolute;
  inset: 12px;
  /* Розміри ЯВНІ. Для замінюваного елемента (<img>) `width: auto` означає
     власну ширину картинки — 828px, тож inset ігнорувався, знімок вилазив за
     картку у природному розмірі, а object-fit не мав на що діяти. */
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: cover;
  /* --pos на картці: бульбашка Telegram лежить у різних знімках на різній
     висоті, а низ картки перекриває градієнт із кнопкою. Тому кадруємо не
     по геометричному центру, а так, щоб відгук стояв по центру ВИДИМОЇ
     частини — вище смуги згасання. */
  object-position: center var(--pos, 50%);
}
/* картка має внутрішнє поле, інакше заокруглення знімка збігалося б із її
   власним і не читалося б */
.rev-card { padding: 12px; }
/* згасання + кнопка одним шаром: градієнт іде від прозорого до кольору знімка */
.rev-card__more {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border-radius: 0 0 18px 18px;
  padding: clamp(64px, 9vw, 108px) 16px 18px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-inverse);
  /* перший рядок — фолбек для рушіїв без color-mix() */
  background: linear-gradient(to top, var(--fade), transparent);
  background: linear-gradient(to top,
    var(--fade) 0%,
    color-mix(in srgb, var(--fade) 85%, transparent) 45%,
    color-mix(in srgb, var(--fade) 0%, transparent) 100%);
  transition: color 0.2s var(--ease);
}
.rev-card__more:hover { color: var(--color-brand-accent); }
.rev-card__more:focus-visible { outline-offset: -4px; }


/* Лайтбокс зі скріншотом */
.rev-dialog {
  margin: auto;
  max-width: min(560px, calc(100vw - 2 * var(--edge)));
  max-height: 88vh;
  padding: 0;
  border: none;
  border-radius: var(--radius-bento);
  background: transparent;
  overflow: visible;
}
.rev-dialog[open] { display: block; }
.rev-dialog::backdrop { background: rgb(var(--deep-rgb) / 0.72); }
.rev-dialog img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 18px;
}
.rev-dialog__close {
  position: fixed;
  top: clamp(14px, 2.4vw, 32px);
  right: clamp(14px, 2.4vw, 32px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.rev-dialog__close svg { width: 20px; height: 20px; }
.rev-dialog__close:hover { background: var(--color-action-primary); color: var(--color-text-inverse); }

.rev-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(18px, 2.2vw, 26px);
}

@media (max-width: 900px) { .rev-card { flex-basis: calc((100% - var(--rev-gap)) / 2); } }
@media (max-width: 600px) { .rev-card { flex-basis: 100%; } }
.rev-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  padding: 0;
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  /* У спокої нейтральна: навігація карусельки не має конкурувати за увагу
     з кнопками дії. Брендовий колір вмикається лише під курсором. */
  background: var(--color-neutral-300);
  color: var(--color-text-primary);      /* 16.3:1 */
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.rev-arrow svg { width: 20px; height: 20px; }
.rev-arrow:hover:not(:disabled) {
  background: var(--color-action-primary);
  color: var(--color-text-inverse);      /* 6.29:1 */
}
.rev-arrow:active:not(:disabled) {
  background: var(--color-action-primary-pressed);
  color: var(--color-text-inverse);
}
/* Disabled — власними токенами. Прозорість давала непередбачуваний колір:
   він залежав би від того, що лежить під кнопкою. */
.rev-arrow:disabled {
  background: var(--color-action-disabled-bg);
  color: var(--color-action-disabled-text);
  cursor: default;
}

/* ---- Q&A: дво-колонка + плавне розкриття ---- */

/* секція — заокруглена плитка з полями, як «Зона роботи» */
.faq {
  margin-inline: var(--edge);
  border-radius: var(--radius-bento);
  background: var(--color-bg-section);
}
/* всередині плиток --edge уже витрачено на margin-inline — внутрішній
   падінг має бути власним, інакше вміст відступає від краю двічі */
.faq > .section-inner { padding-inline: clamp(20px, 3.2vw, 56px); }

.faq-list {
  display: grid;
  gap: clamp(10px, 1.2vw, 14px);
}
@media (min-width: 900px) {
  /* дві колонки; align-items: start — інакше сусід розтягується
     на висоту відкритої вкладки й лишає порожнечу */
  .faq-list { grid-template-columns: 1fr 1fr; align-items: start; }
}
.faq-item {
  background: var(--color-bg-surface);
  border-radius: 22px;
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
  flex: 1;
  font-size: clamp(15px, 1.35vw, 17px);
  font-weight: 600;
  color: var(--color-text-primary);
}
.faq-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--color-action-primary);
  color: var(--color-text-inverse);
  transition: background 0.25s var(--ease), transform 0.3s var(--ease);
}
.faq-toggle svg { width: 17px; height: 17px; }
.faq-item summary:hover .faq-toggle { background: var(--color-action-primary-hover); }
.faq-item summary:active .faq-toggle { background: var(--color-action-primary-pressed); }
.faq-item[open] .faq-toggle { transform: rotate(180deg); }
.faq-item summary:focus-visible { outline: 3px solid var(--color-action-focus); outline-offset: -3px; }
.faq-body {
  padding: 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px);
}
.faq-body p {
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
/* Плавне розкриття. ::details-content дозволяє анімувати саму висоту вкладки,
   а не лише вміст; interpolate-size вмикає інтерполяцію до auto.
   Для браузерів без цієї підтримки лишається запасна анімація вмісту нижче. */
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.42s var(--ease), content-visibility 0.42s allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }

.faq-item[open] .faq-body { animation: faq-open 0.42s var(--ease) both; }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
/* ---- Футер: мінімальний — сітка посилань і нижній рядок ---- */
.site-footer {
  /* верхній відступ = ритму секцій, інакше футер «прилипає» до форми */
  padding: clamp(52px, 9vh, 104px) 0 clamp(28px, 4vh, 44px);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
}
.footer-nav {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2.4vw, 30px) clamp(20px, 2.5vw, 40px);
}
@media (max-width: 900px) { .footer-nav { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .footer-nav { grid-template-columns: repeat(2, 1fr); } }
.footer-nav a {
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--color-text-primary);      /* 18.9:1 */
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.footer-nav a:hover { color: var(--color-text-brand); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px clamp(20px, 2.5vw, 40px);
  margin-top: clamp(36px, 5vh, 64px);
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--color-border-default);
  font-size: 14px;
  color: var(--color-text-secondary);     /* 7.5:1 */
}

/* ---- Прайс: рівні вертикальні плитки (фото + ціна + смуга назви) ---- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 780px) { .plan-grid { grid-template-columns: 1fr; } }

.plan {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 9;
  --plan-pad: clamp(20px, 2.2vw, 32px);
  padding: var(--plan-pad);
  border-radius: var(--radius-bento);
  color: var(--color-text-inverse);
}
@media (max-width: 780px) { .plan { aspect-ratio: 4 / 3; } }

.plan__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--color-bg-section);
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease);
}
.plan:hover .plan__photo,
.plan:focus-within .plan__photo { transform: scale(1.06); }

/* Рівна легка заливка на все фото — постійна, на ховері не глибшає. */
.plan::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgb(var(--deep-rgb) / 0.26);
}

.plan__badge {
  position: absolute;
  top: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  z-index: 2;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-brand-accent);
  color: var(--color-text-primary);   /* 12.3:1 */
  font-size: 13px;
  font-weight: 700;
}

.plan__body { position: relative; z-index: 1; }
.plan__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: clamp(8px, 1vw, 12px);
}
.plan__sum {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.plan__from, .plan__unit { font-size: 14px; font-weight: 500; color: rgb(255 255 255 / 0.82); }
.plan__tba {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 22px);
  letter-spacing: -0.02em;
}

/* Опис і кнопка — тільки на ховері. Розкриття через grid-рядок 0fr→1fr:
   висота анімується без магічних max-height, які довелось би вгадувати
   під найдовший опис. */
.plan__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.62s var(--ease);
}
/* Обрізку робить сама картка (.plan має overflow: hidden), а не цей рядок.
   Поки різав рядок, вміст виринав від його нижньої межі — а вона піднята над
   краєм картки на величину падінга, звідси й ті 20-30px. */
.plan__reveal > div { min-height: 0; }
/* Внутрішній шар лежить нижче за край картки і виїжджає з-під нього. Зсув
   містить падінг, інакше в спокої низ тексту визирав би поверх фото. */
.plan__reveal-in {
  transform: translateY(calc(100% + var(--plan-pad)));
  opacity: 0;
  /* Довший хід і невелика затримка: висота встигає відкрити місце, і текст
     заходить у вже готовий простір, а не наздоганяє його. */
  transition: transform 0.72s var(--ease) 0.06s, opacity 0.4s var(--ease) 0.06s;
}
.plan:hover .plan__reveal,
.plan:focus-within .plan__reveal { grid-template-rows: 1fr; }
.plan:hover .plan__reveal-in,
.plan:focus-within .plan__reveal-in {
  transform: none;
  opacity: 1;
  transition-delay: 0.06s;
}

.plan__desc {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 500;
  line-height: 1.45;
  color: rgb(255 255 255 / 0.92);
  /* 44ch на широкій картці давало рядок майже на всю ширину фото —
     текст тягнувся вправо й читався важко */
  max-width: 30ch;
  text-wrap: pretty;
}
/* вторинна кнопка на фото: контур → заливка зеленим (див. .btn-ghost--inverse) */
.plan__more {
  margin-top: clamp(14px, 1.6vw, 20px);
  padding: 13px 30px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  border: 1.5px solid rgb(255 255 255 / 0.72);
  color: var(--color-text-inverse);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease);
}
.plan__more:hover {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
}
.plan__more:active {
  background: var(--color-action-primary-pressed);
  border-color: var(--color-action-primary-pressed);
}

/* Сенсорні екрани ховера не мають — там опис і кнопка видимі завжди,
   інакше на телефоні до них не дістатись узагалі. */
@media (hover: none) {
  .plan__reveal { grid-template-rows: 1fr; }
  .plan__reveal-in { transform: none; opacity: 1; }
  .plan__photo { transform: scale(1.06); }
  .plan { aspect-ratio: auto; min-height: clamp(340px, 76vw, 460px); }
}

/* ---- Діалог «що входить» ---- */
.plan-dialog {
  /* глобальний ресет ставить margin:0 всім елементам і цим ламає авто-центрування
     модального <dialog> — повертаємо його явно */
  margin: auto;
  width: min(680px, calc(100vw - 2 * var(--edge)));
  max-height: min(84vh, 800px);
  padding: 0;
  border: none;
  border-radius: var(--radius-bento);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  /* Прокручується тільки середина. Раніше скролилось усе вікно разом із
     падінгом — вміст заїжджав під заокруглені кути, і зверху вилазив обрізаний
     край. Тепер шапка й кнопка нерухомі, а overflow: hidden тримає кути. */
  overflow: hidden;
}
/* display ТІЛЬКИ на [open]: браузер ховає закритий <dialog> через
   `dialog:not([open]) { display: none }` у своїх стилях, а будь-яке авторське
   оголошення display перебиває UA-походження незалежно від специфічності —
   без [open] вікно лишалось би на екрані назавжди. */
.plan-dialog[open] {
  display: flex;
  flex-direction: column;
}
.plan-dialog::backdrop { background: rgb(var(--deep-rgb) / 0.55); }
.plan-dialog__head {
  flex: 0 0 auto;
  padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 36px) clamp(14px, 1.6vw, 18px);
  border-bottom: 1px solid var(--color-border-default);
}
/* теги під заголовком попапа */
.plan-dialog__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.plan-dialog__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  /* контурний: межа і текст брендовим зеленим — 6.29:1 на білому попапі.
     Лаймова обводка тут не працює: #D6EE75 на білому дає 1.3:1. */
  background: transparent;
  border: 1.5px solid var(--color-action-primary);
  color: var(--color-text-brand);
}
/* «Найпопулярніше» — заливка, щоб виділявся серед контурних */
.plan-dialog__tag--fill {
  background: var(--color-brand-accent);
  border-color: var(--color-brand-accent);
  color: var(--color-text-primary);        /* 13.0:1 */
}
/* показуємо лише в генеральному */
.plan-dialog__tag--fill { display: none; }
.plan-dialog.is-popular .plan-dialog__tag--fill { display: inline-flex; }
.plan-dialog__tag svg { width: 22px; height: 22px; flex: 0 0 auto; }

.plan-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(18px, 2.2vw, 26px) clamp(22px, 3vw, 36px) clamp(22px, 2.8vw, 32px);
}

.plan-dialog__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: -0.03em;
}
.plan-dialog__close {
  position: fixed;
  top: clamp(14px, 2.4vw, 32px);
  right: clamp(14px, 2.4vw, 32px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--color-bg-page);
  color: var(--color-text-primary);      /* 18.9:1 */
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.plan-dialog__close svg { width: 20px; height: 20px; }
.plan-dialog__close:hover {
  background: var(--color-action-primary);
  color: var(--color-text-inverse);      /* 6.29:1 */
}
.plan-dialog__close:active {
  background: var(--color-action-primary-pressed);
  color: var(--color-text-inverse);
}
/* Перелік «що входить» у дві колонки: у післяремонтному прибиранні п'ять зон,
   одним стовпцем це майже метр прокрутки. columns, а не grid — рядки різної
   висоти інакше лишали б порожнечі під коротшими зонами. */
.plan-dialog.is-wide { width: min(900px, calc(100vw - 2 * var(--edge))); }
@media (min-width: 760px) {
  .plan-dialog.is-wide .plan-dialog__body {
    columns: 2;
    column-gap: clamp(24px, 3vw, 40px);
  }
  /* лід і спільні факти — на всю ширину, вони не частина переліку */
  .plan-dialog.is-wide .plan-dialog__body > p,
  .plan-dialog.is-wide .plan-dialog__facts { column-span: all; }
}
/* Перелік робіт читається як таблиця: зона — це заголовок стовпця з рулінією
   під ним, кожна робота — рядок із тонким роздільником. Крапки прибрані:
   з ними двадцять пунктів зливались у суцільну масу. */
.plan-dialog__zone {
  break-inside: avoid;
  margin-bottom: clamp(22px, 2.4vw, 30px);
}
.plan-dialog__zone h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--color-text-primary);
}
.plan-dialog__body ul { list-style: none; display: block; }
.plan-dialog__body li {
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border-default);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}
.plan-dialog__body li:last-child { border-bottom: none; }
.plan-dialog__body p { margin-bottom: 12px; font-size: 15px; color: var(--color-text-secondary); }
.plan-dialog__pending { color: var(--color-text-primary); font-weight: 600; }
/* перший рядок діалогу — коли цей тариф доречний; чорнильний і трохи більший
   за перелік, бо це відповідь на «а мені яке?» */
/* селектор із .plan-dialog__body — щоб побити `.plan-dialog__body p` (0-2-0)
   специфічністю, а не !important */
.plan-dialog__body .plan-dialog__lead {
  margin-bottom: 18px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
  color: var(--color-text-primary);
}
/* спільні умови — окрема таблиця під переліком, з власною рулінією */
.plan-dialog__facts {
  margin-top: clamp(18px, 2vw, 26px);
  padding-top: clamp(14px, 1.6vw, 18px);
  border-top: 1.5px solid var(--color-text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .plan__photo { transition: none; }
  .plan__reveal, .plan__reveal-in { transition: none; }
  .plan__photo { filter: none !important; }
  .plan__more { transition: none; }
}

/* ліва плитка — суцільна брендова заливка, білий текст (контраст ≈4.6:1) */

/* сегмент навігації — на світлій поверхні */
/* обрана зона — єдиний насичений акцент у панелі */
@media (max-width: 520px) {
}

/* вступний рядок — угорі плитки, приглушений */
/* «Процес» + заголовок — унизу плитки, під навігацією */

/* опис зони — приблизно половина кегля h2; місце під найдовший текст
   зарезервоване, щоб посимвольна поява не смикала висоту плитки */
/* поява: спершу літера на 50%, за три кроки доганяє до 100% */   /* інакше пробіли між span-ами злипаються */

/* права плитка — фото зони */

@media (prefers-reduced-motion: reduce) {
}

/* ---- Наші роботи: фото + горизонтальна рулетка, опис збоку ---- */

/* ---- Якірна плашка після прайсу ---- */
/* Плашка власних відступів не має: зазори з обох боків дають сусідні секції
   своїми базовими padding. Тому вона стоїть у тому самому ритмі, що й решта. */
.cta-strip-wrap,
.fact-strip-wrap { padding-top: 0; padding-bottom: 0; }
/* ---- Смуга фактів над якірною плашкою ---- */
.fact-strip { margin-bottom: clamp(32px, 4.5vw, 64px); }
.fact-strip__list {
  list-style: none;
  display: grid;
  /* auto-fit із мінімумом: чотири пункти стають у ряд на широкому екрані
     і самі перебудовуються в дві колонки без окремих брейкпоінтів */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 2.2vw, 30px) clamp(20px, 2.4vw, 34px);
}
.fact-strip__item {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 16px);
}
/* квадрат, а не коло, як у рефі — це дає ту саму сітку, що й решта плиток */
.fact-strip__ph {
  flex: 0 0 auto;
  width: clamp(58px, 5vw, 74px);
  aspect-ratio: 1;
  border-radius: 16px;
  background: var(--color-brand-accent);
}
/* Плитка з іконкою. Знак навмисно більший за плитку й притиснутий до одного з
   країв — плитка його підрізає. Бік у кожної свій, щоб ряд не читався як
   чотири однакові штампи. */
.fact-strip__ph--icon {
  position: relative;
  overflow: hidden;
  color: var(--color-bg-dark);           /* 13.3:1 на лаймі */
}
.fact-strip__ph--icon svg {
  position: absolute;
  width: 116%;
  height: 116%;
}
/* 1 · лійка — з нижнього лівого кута */
.fact-strip__item:nth-child(1) .fact-strip__ph--icon svg {
  width: 174%;
  height: 174%;
  left: -44%;
  bottom: -72%;
}
/* 2 · автобус — виїжджає зліва, по центру висоти */
.fact-strip__item:nth-child(2) .fact-strip__ph--icon svg {
  width: 152%;
  height: 152%;
  left: -45%;
  top: 50%;
  transform: translateY(-50%);
}
/* Знаки з viewBox 1024 мають широкі поля довкола малюнка, тому їм спільний
   масштаб 174% замість базових 116% — інакше вони виглядають дрібнішими. */
/* 3 · щітка — з нижнього правого кута */
.fact-strip__item:nth-child(3) .fact-strip__ph--icon svg {
  width: 174%;
  height: 174%;
  right: -46%;
  bottom: -22%;
}
/* 4 · блискавка — з нижнього лівого кута */
.fact-strip__item:nth-child(4) .fact-strip__ph--icon svg {
  width: 174%;
  height: 174%;
  left: -44%;
  bottom: -58%;
}
.fact-strip__text {
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.35;
  color: var(--color-text-primary);
}

.cta-strip {
  position: relative;
  /* цифра навмисно більша за плашку — обрізає її саме цей overflow,
     а висота лишається такою, яку задає падінг і кнопка */
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 32px);
  --cta-pad: clamp(16px, 2vw, 26px);
  --cta-num: clamp(96px, 11vw, 170px);
  padding: clamp(14px, 1.6vw, 20px) var(--cta-pad);
  border-radius: var(--radius-bento);
  background: var(--color-brand-accent);
  color: var(--color-text-primary);             /* 14.7:1 на лаймі */
  text-decoration: none;
}

/* Лічильник: притиснутий до лівого краю, по центру по вертикалі, кегль більший
   за плашку — верх і низ цифр зрізаються. position: absolute тримає його поза
   потоком, тому на висоту плашки він не впливає. */
.cta-strip__count {
  position: absolute;
  z-index: -1;
  left: clamp(-6px, -0.4vw, 0px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--cta-num);
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: rgb(var(--ink-rgb) / 0.14);     /* декор, не текст — контраст тут не потрібен */
  font-variant-numeric: tabular-nums;    /* при +1 ширина не стрибає */
  pointer-events: none;
  user-select: none;
}

/* Бульбашки: спалахують з боків плашки в момент, коли цифра змінюється.
   Абсолютні й pointer-events: none — на розкладку та кліки не впливають,
   а overflow плашки підрізає їх по краях. */
.cta-bubble {
  position: absolute;
  z-index: -1;
  bottom: -18px;
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.45);
  border: 1px solid rgb(255 255 255 / 0.75);
  pointer-events: none;
  will-change: transform, opacity;
  animation: bubble-rise var(--dur) cubic-bezier(0.32, 0.72, 0.4, 1) forwards;
}
@keyframes bubble-rise {
  from { transform: translate3d(0, 0, 0) scale(0.4); opacity: 0; }
  25%  { opacity: 1; }
  to   { transform: translate3d(var(--dx), var(--dy), 0) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cta-bubble { display: none; } }

.cta-strip__text {
  flex: 1 1 auto;
  min-width: 0;
  /* Відступ рахується від кегля цифри, а не вгадується: три знаки з трекінгом
     -0.05em займають ~1.62em, від них віднімаємо падінг плашки й додаємо
     невеликий просвіт. Так напис стоїть одразу за цифрою на будь-якій ширині. */
  margin-left: calc(var(--cta-num) * 1.62 - var(--cta-pad) + 12px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 26px);
  letter-spacing: -0.03em;
}
.cta-strip__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  background: var(--color-bg-dark);          /* 13.3:1 до лайму — межа кнопки чітка */
  color: var(--color-text-inverse);         /* 17.0:1 */
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 16px);
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
/* Стан міняє сама кнопка, а не вся плашка: :hover на .cta-strip спрацьовував
   від наведення будь-де по смузі, зокрема на цифрі й порожньому полі. */
.cta-strip__btn:hover {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);         /* 18.9:1 */
}
.cta-strip__btn:active { background: var(--color-neutral-200); color: var(--color-text-primary); }
@media (max-width: 720px) {
  /* На вузькому екрані все вкладається стовпчиком і центрується. Відступ під
     цифру знімаємо: він розрахований на рядок, де напис стоїть праворуч від неї,
     а тут цифра йде фоном по центру. */
  .cta-strip { border-radius: var(--radius-bento); justify-content: center; text-align: center; }
  .cta-strip__count {
    /* вище центру, щоб цифру не з'їдала кнопка, і більша — на вузькому екрані
       базовий clamp упирався в мінімум 96px і вона майже не читалась */
    left: 50%;
    top: 24%;
    transform: translate(-50%, -50%);
    font-size: clamp(120px, 34vw, 190px);
  }
  .cta-strip__text { flex: 1 1 100%; margin-left: 0; }
  .cta-strip__btn { width: 100%; justify-content: center; }
}

/* ---- Зона роботи: дві картки — мапа зліва, текст справа ---- */
.guarantee { color: var(--color-text-primary); }

.zona-grid { position: relative; z-index: 1; }

.guarantee-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--color-text-primary);
}
/* ---- Зона роботи: бенто з щільних плиток ---- */
/* Чотири колонки: ліворуч текст і цифри, праворуч мапа на всю висоту.
   Розкладка задана явними grid-column/row, а не auto-flow — інакше плитки
   різної висоти самі перескакують і сітка «зубчиться». */
.zona-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 1vw, 14px);
}
@media (min-width: 900px) {
  .zona-grid {
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
  }
  .zona-copy         { grid-column: 1 / 3; grid-row: 1; }
  .zona-fact--free   { grid-column: 1;     grid-row: 2; }
  .zona-fact--free + .zona-fact { grid-column: 2; grid-row: 2; }
  .zona-away         { grid-column: 1 / 3; grid-row: 3; }
  .zona-map          { grid-column: 3 / 5; grid-row: 1 / 4; }
}

.zona-tile {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 34px);
  border-radius: var(--radius-bento);
  background: var(--color-bg-section);
}

.zona-copy { justify-content: flex-end; min-height: clamp(200px, 20vw, 280px); }
.zona-copy .guarantee-title { margin-bottom: clamp(12px, 1.4vw, 18px); }
.zona-copy .guarantee-text {
  margin: 0;
  max-width: 46ch;
  color: var(--color-text-secondary);     /* 6.78:1 на #F4F4F4 */
}

/* дві цифрові плитки — найщільніші в бенто */
.zona-fact { justify-content: flex-end; gap: 8px; min-height: clamp(150px, 13vw, 190px); }
.zona-fact__value {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-text-primary);
}
/* «0 грн» — єдина кольорова плитка в бенто: суцільний брендовий зелений тримає
   акцент і не дає цифрі 0 читатись як порожнє поле */
.zona-fact--free {
  background: var(--color-action-primary);
  color: var(--color-text-inverse);
}
.zona-fact--free .zona-fact__value { color: var(--color-text-inverse); }   /* 6.29:1 */
/* підпис — не сірий, а біле з альфою: сірий на кольорі виглядає вицвілим */
.zona-fact--free .zona-fact__label { color: rgb(255 255 255 / 0.86); }     /* 5.15:1 */
.zona-fact__label {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

/* плитка з поясненням і кнопкою */
.zona-away { gap: clamp(10px, 1.2vw, 14px); }
.zona-away__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}
.zona-away__text {
  max-width: 54ch;
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
.zona-away__btn { align-self: flex-start; margin-top: auto; }

.zona-map {
  border-radius: var(--radius-bento);
  overflow: hidden;
  min-height: clamp(300px, 40vw, 560px);
  background: var(--color-bg-section);
}
.zona-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
}

.guarantee-text {
  margin: 22px auto 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--color-text-secondary);
}

/* ---- Ліза і команда ---- */
.cleaners-stage {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
}
@media (min-width: 860px) {
  .cleaners-stage {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(40px, 6vw, 96px);
  }
  .cleaners-media { max-width: 450px; }
}

.cleaners-media { display: grid; }
.cleaners-media > * { grid-area: 1 / 1; }

.cleaner { border-radius: var(--radius-bento); overflow: hidden; }
.cleaner__ph {
  position: relative;
  aspect-ratio: 450 / 557.32;
  border-radius: var(--radius-bento);
  background-color: var(--color-bg-section);
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* ---- Заголовок ---- */
.cleaners-title { font-size: clamp(30px, 4.6vw, 54px); }

.cleaners-copy { display: flex; flex-direction: column; align-items: flex-start; }

/* Базово — стек через grid: без JS обидва варіанти в потоці й текст видно.
   Мінус стека в тому, що висота дорівнює найвищому варіанту, тож під коротким
   текстом («Ліза») зяяла порожнеча і кнопка з'їжджала вниз. Тому за наявності
   JS неактивний варіант виходить із потоку, а висоту контейнера веде скрипт. */
.cleaners-texts { display: grid; width: 100%; margin-top: clamp(16px, 2vw, 22px); }
.js .cleaners-texts { display: block; position: relative; }
.js .cleaners-text { position: absolute; top: 0; left: 0; right: 0; }
.js .cleaners-text.is-on { position: relative; }
.cleaners-text {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-26px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), visibility 0s linear 0.4s;
}
.cleaners-text.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.08s, 0.08s, 0s;   /* новий текст стартує, коли старий уже пішов */
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
  .plan__photo { transition: none; }
  .plan__reveal, .plan__reveal-in { transition: none; }
  .plan__photo { filter: none !important; }
  .plan__more { transition: none; }
  .faq-item[open] .faq-body { animation: none; }
  .faq-item::details-content { transition: none; }
  .faq-toggle { transition: none; }
  .check__circle, .check__tick { animation: none; stroke-dashoffset: 0; }
  .cleaner, .cleaners-text { transition: opacity 0.01s; transform: none !important; }
  .menu-toggle-bars span { transition: none; }
  .extra { transition: none; }
  .review { transition: none; }
  .review.is-active { transition: none; }
  .site-menu[data-open="true"] .site-menu__curtain { animation: none; transform: translateY(100%); }
  .site-menu[data-open="true"] .site-menu__inner { animation: none; opacity: 1; }
  .site-menu[data-open="closing"] .site-menu__curtain { animation: none; }
  .site-menu[data-open="closing"] .site-menu__inner { animation: none; opacity: 0; }
}

/* ---------- Десктоп ---------- */

@media (min-width: 768px) {
  .site-menu__nav { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
}

/* Поле-пастка для ботів: приховане так, щоб його не бачив ні користувач,
   ні скрінрідер, але воно лишалось у DOM для автозаповнювачів-спамерів. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}