/* ==========================================================================
   ТМ «Потолочник» — брендова тема поверх дизайн-системи шаблону Roofinger.
   Завантажується ПІСЛЯ base.min.css. Логіка: шаблон дає верстку, скруглення,
   «нотчі» та сітки; цей файл перефарбовує його під бренд і додає компоненти,
   яких у шаблоні немає (квіз, фільтри кейсів, картки відгуків, FAQ).
   base.min.css не редагувати — це скомпільований вивід Webflow.
   ========================================================================== */

/* --- 1. Фірмова палітра ------------------------------------------------- */
:root {
  --tm-black:       #0C0C0C;
  --tm-yellow:      #FFD000;
  --tm-yellow-deep: #E6BB00;
  --tm-sand:        #F4F2EC;
  --tm-sand-dark:   #E7E3D8;
  --tm-white:       #FFFFFF;
  --tm-gray:        #686868;

  /* перевизначення токенів шаблону */
  --color--black:       #0C0C0C;
  --color--primary-1:   #FFD000;
  --color--secondary-1: #FFDE4D;
  --color--gray-1:      #686868;
  --color--gray-2:      #E7E3D8;
  --color--gray-3:      #F4F2EC;

  --_color---heading:      #0C0C0C;
  --_color---body-text:    #686868;
  --_color---body-bg:      #F4F2EC;
  --_color---border-color: rgba(12,12,12,.12);
}

body { background-color: var(--tm-sand); color: var(--tm-gray); font-family: Manrope, sans-serif; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6 { color: var(--tm-black); letter-spacing: -.02em; }
::selection { background: var(--tm-yellow); color: var(--tm-black); }
[hidden] { display: none !important; }

/* Наскрізний мотив: тонка жовта лінія над кожним заголовком секції —
   метафора тіньового профілю / світлової лінії. Тримає фірмовий акцент
   присутнім на кожному екрані, без жовтих площин. */
.section-title h2::before,
.solution-lead h2::before,
.grid-advantage-intro h2::before,
.quote-wrapper h2::before,
.faq-sticky-wrap h2::before {
  content: ""; display: block; width: 56px; height: 3px;
  background: var(--tm-yellow); margin-bottom: 24px;
}
.section-title.text-center h2::before { margin-left: auto; margin-right: auto; }
.faq-sticky-wrap h2::before { background: var(--tm-black); }
/* Над заголовком CTA-плити футера в шаблоні риски немає — прибираємо. */
.footer-cta-title::before { content: none; }
/* Де над заголовком стоїть eyebrow (з власною жовтою рискою) — прибираємо
   дублюючу риску ::before, щоб не було двох міток. */
.gallery-section .section-title h2::before { content: none; }

/* Відступ між блоками — 160px (по 80px знизу верхнього і зверху нижнього).
   Менші значення зливали секції в суцільне полотно тексту при прокручуванні. */
.section-spacing { padding-top: 80px; padding-bottom: 80px; }
.section-spacing-top { padding-top: 80px; }
.section-spacing-bottom { padding-bottom: 80px; }
/* Форма-CTA має лише .section-spacing-bottom — додаємо верхній відступ,
   щоб зазор від FAQ теж був 160px. */
.quote-section { padding-top: 80px; }

/* На мобільному повний десктопний зазор завеликий — трохи стискаємо,
   але лишаємо помітно більшим за попередні 50px. */
@media (max-width: 767px) {
  .section-spacing { padding-top: 62px; padding-bottom: 62px; }
  .section-spacing-top { padding-top: 62px; }
  .section-spacing-bottom { padding-bottom: 62px; }
  .quote-section { padding-top: 62px; }
}

/* Жовте виділення важливого слова в заголовку (ТЗ це прямо дозволяє). */
.tm-mark {
  background-image: linear-gradient(var(--tm-yellow), var(--tm-yellow));
  background-size: 100% 24%; background-position: 0 90%; background-repeat: no-repeat;
}

/* точкові виправлення захардкожених кольорів шаблону */
.testimonial-lightbox { background-color: var(--tm-yellow) !important; }

/* --- 2. Бічні відступи: 90px -------------------------------------------
   Єдине правило: контент починається за 90px від краю екрана СКРІЗЬ.

   Складність у тому, що hero і футер — інсетні блоки: у них є власний
   margin, а всередині ще .container з padding. Якщо обом дати 90px,
   текст опиняється на 180px і не збігається з рештою сторінки.
   Тому інсетні блоки: margin 40 + внутрішній padding 50 = ті самі 90.
   ---------------------------------------------------------------------- */
.container, .container-medium { padding-left: 90px; padding-right: 90px; }
/* .container-medium у шаблоні вужчий (1200px) і центрувався — через це
   секція відгуків не збігалася по краю з рештою сторінки. */
.container-medium { max-width: none; }
/* Шаблон обмежував .container 1540px, тож на широких екранах контент
   центрувався і бічний відступ ставав більшим за 90px. Знімаємо ліміт,
   щоб 90px виконувалось на будь-якій ширині; довжину рядка тримають
   max-width на самих текстових блоках. */
.container { max-width: none; }

/* .container.nav-container із шаблону специфічніший (0,2,0) і перебивав 90px */
.container.nav-container { padding-left: 90px; padding-right: 90px; }

.hero-wrap-split, .footer-wrap { margin-left: 40px; margin-right: 40px; }
.hero-wrap-split > .container,
.footer-wrap > .container { padding-left: 50px; padding-right: 50px; }

/* Плейт має власний боковий відступ (як у шаблоні), щоб збоку лишалася
   смуга чорного .footer-wrap — саме вона формує «плече», у яке фігури
   shape-02 вирізають виїмку. Без цього відступу плейт займає всю ширину,
   і вирізи зливаються з плейтом. */
.footer-cta-wrapper { margin-left: 60px; margin-right: 60px; }

/* CTA дублюється в мобільному меню (у шапці там лишаються лише лого і бургер) */
.nav-mobile-cta { display: none; }

@media (max-width: 991px) {
  .container, .container-medium, .container.nav-container { padding-left: 40px; padding-right: 40px; }
  .hero-wrap-split, .footer-wrap { margin-left: 20px; margin-right: 20px; }
  .hero-wrap-split > .container, .footer-wrap > .container { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 600px) {
  .container, .container-medium, .container.nav-container { padding-left: 20px; padding-right: 20px; }
  .hero-wrap-split, .footer-wrap { margin-left: 10px; margin-right: 10px; }
  .hero-wrap-split > .container, .footer-wrap > .container { padding-left: 10px; padding-right: 10px; }
}

/* --- 3. Кнопки (pill-форма шаблону) ------------------------------------ */
.button-primary, .button-primary.w-button {
  background-color: var(--tm-yellow); color: var(--tm-black); font-weight: 700;
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.button-primary:hover, .button-primary.w-button:hover {
  background-color: var(--tm-yellow-deep); color: var(--tm-black);
  transform: translateY(-2px); box-shadow: 0 10px 26px rgba(12,12,12,.18);
}
.button-black, .button-black.w-button { background-color: var(--tm-black); color: #fff; transition: .25s ease; }
.button-black:hover { background-color: #242424; transform: translateY(-2px); }

/* світлий контурний варіант — для темного hero */
.button-outline-white {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px; border: 1.5px solid rgba(255,255,255,.4);
  border-radius: var(--border-radius--border-radius-button);
  color: #fff; font-weight: 700; font-size: 16px; text-decoration: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.button-outline-white:hover {
  background: var(--tm-yellow); border-color: var(--tm-yellow); color: var(--tm-black); transform: translateY(-2px);
}

/* --- 4. Шапка ----------------------------------------------------------- */
/* Шаблонна шапка не липка; ТЗ вимагає стан після скролу — робимо fixed.
   padding:0 — біла смуга меню має бути ПРИТИСНУТА до верхнього краю
   темного блока hero, щоб фото йшло впритул під неї («вирізалося» під
   хедер), як у шаблоні. Із відступом 40px зверху фото видно над смугою
   і ефект вирізу зникає. */
.navbar-white {
  position: fixed; top: 40px; left: 0; right: 0; z-index: 900;
  padding-top: 0; padding-bottom: 0;
  transition: background-color .3s ease, top .3s ease, box-shadow .3s ease;
}
/* Прокручено — шапка від'їжджає до самого верху і стає суцільною піщаною
   смугою. Нотч і «пігулка» тут не працюють: виріз має сенс лише поки смуга
   лежить на темному блоці hero, а на прокрутці він перетворюється на
   випадковий трикутник усередині смуги. Тому в цьому стані пігулка й нотчі
   зникають, лишається одна площина з тонкою межею. */
.navbar-white.scrolled {
  top: 0;
  background-color: var(--tm-sand);
  box-shadow: 0 1px 0 rgba(12,12,12,.08), 0 6px 24px rgba(12,12,12,.10);
}
.navbar-white.scrolled .nav-menu-white { background-color: transparent; }
.navbar-white.scrolled .nav-menu-white-shape { display: none; }
/* На піщаному тлі знак і телефон мають бути темні, а не вивернуті. */
.navbar-white.scrolled .logo-light { display: none; }
.navbar-white.scrolled .logo-dark  { display: block; }
.navbar-white.scrolled .nav-phone { color: var(--tm-black); }
/* Іконка телефону нативно біла — на піщаному тлі прокрученої шапки її не
   видно. brightness(0) робить її чорною (none лишав би її білою). */
.navbar-white.scrolled .nav-phone .button-icon-image { filter: brightness(0); }

/* Лого ТМ ширше за шаблонне (має власний таглайн), тож перша колонка сітки
   має бути auto — інакше знак заїжджає під білу «пігулку» меню. */
.grid-nav-white { grid-template-columns: auto minmax(0,1fr) auto; align-items: center; }
.brand-white { position: relative; z-index: 2; }
.logo { width: auto !important; height: 34px; }
.brand-white .logo-dark { display: none; }     /* шапка завжди на темному тлі */

/* 8 пунктів меню замість 4 у шаблоні — тиснемо відступи, щоб «пігулка»
   вміщувала їх повністю, інакше «Рішення» і «Контакти» вилазять за край. */
.nav-link { white-space: nowrap; font-size: 16px; margin-left: 9px; margin-right: 9px; }
/* «Нотч» (shape-01) виступає на 61px ліворуч від коробки меню — без цього
   запасу біла пігулка наїжджає на логотип. */
/* Висота білої смуги: у шаблоні вона займає ~11% висоти hero-блока (≈90px).
   Базові 20px padding дають лише 60px — смуга виглядає тонкою і виріз під
   нею читається слабко. */
/* Смуга меню — не біла, а піщана, як тло сторінки: тоді смужка тла над
   шапкою і сама шапка читаються однією площиною, а не двома. Нотчі беруть
   той самий піщаний shape-01-sand.svg. */
.nav-menu-white {
  background-color: var(--tm-sand);
  margin-left: 68px; margin-right: 68px;
  padding-top: 34px; padding-bottom: 34px;
  transition: padding .3s ease;
}
.navbar-white.scrolled .nav-menu-white { padding-top: 29px; padding-bottom: 29px; }
/* CTA у стиснутій смузі має лишати «повітря» зверху й знизу, інакше
   кнопка впирається в її межі. */
.navbar-white.scrolled .nav-button {
  padding-top: 12px; padding-bottom: 12px; padding-left: 24px; padding-right: 24px;
  font-size: 14.5px;
}
.nav-button { white-space: nowrap; }

/* Нотч — SVG 66×72, розрахований на смугу 72px і виступ 61px. Він тягнеться
   height:100%, тож при нашій смузі ~88px стає ширшим (≈81px), а шаблонний
   виступ −61px лишає його вузький «хвіст» усередині смуги: діагональ не
   доходить до низу і виріз обривається вертикальною сходинкою.
   Виступ мусить масштабуватись разом із висотою: 61/72 ≈ 0.85 × висота. */
.navbar-white .nav-menu-white-shape { left: -75px; right: auto; transition: left .3s ease, right .3s ease; }
.navbar-white .nav-menu-white-shape.right { left: auto; right: -75px; }
.navbar-white.scrolled .nav-menu-white-shape { left: -44px; }
.navbar-white.scrolled .nav-menu-white-shape.right { right: -44px; }

/* Шаблон підтягує hero під нелипку шапку; наша шапка fixed (вимога ТЗ),
   тож негативний margin лише ховає верх hero під меню. */
/* Блок hero відступає з УСІХ боків (як у шаблоні): 40px зліва/справа дає
   .hero-wrap-split, 40px зверху — цей padding. Завдяки цьому видно скруглені
   кути блока, і фото обрізається його рамкою, а не йде в край екрана. */
.hero-section { margin-top: 0 !important; padding-top: 40px; }

.nav-phone {
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.nav-phone .button-icon-image { width: 17px; height: 17px; filter: brightness(0) invert(1); }
.nav-phone:hover { color: var(--tm-yellow); }

/* --- 5. Hero ------------------------------------------------------------ */
/* Шаблон дає 270px зверху під нелипку шапку; наша шапка fixed і нижча,
   тож задаємо власні відступи, інакше блок стає надмірно високим. */
.hero-wrap-split {
  background-color: var(--tm-black);
  padding-top: 175px; padding-bottom: 68px;
}
.hero-content-left-wrap { width: 46%; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin-bottom: 22px;
}
.hero-eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--tm-yellow); flex: none; }

.hero-title { color: #fff; }

/* акцентний рядок — жовта лінія як метафора тіньового профілю */
.hero-accent {
  border-left: 2px solid var(--tm-yellow); padding-left: 18px;
  color: #fff; font-size: 15px; font-weight: 600; line-height: 1.55;
  max-width: 46ch; margin: 0 0 30px;
}

.hero-trust { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; color: rgba(255,255,255,.7); font-size: 14px; }
.hero-trust b { color: #fff; }
.hero-trust-stars { display: flex; gap: 3px; }
.hero-trust-stars svg { width: 17px; height: 17px; fill: var(--tm-yellow); }

.hero-tagline {
  margin: 26px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: 13.5px; color: rgba(255,255,255,.5); line-height: 1.6;
}

/* Права половина hero — фото на всю висоту, впритул до скругленого краю
   блока (як у шаблоні). Квіз лежить карткою поверх фото. */
.hero-image-wrap {
  width: 50%; position: absolute; inset: 0 0 0 auto;
  display: block; padding: 0;
}
.hero-image { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Затемнення точкове, а не суцільне: зліва розмиває стик із темною
   панеллю, справа підкладає контраст під білу картку квіза. Середина
   фото лишається світлою — інакше знімок читається як сіра пляма. */
.hero-image-wrap::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12,12,12,.60) 0%, rgba(12,12,12,0) 24%),
    linear-gradient(270deg, rgba(12,12,12,.42) 0%, rgba(12,12,12,0) 46%);
}

/* --- 6. Квіз ------------------------------------------------------------ */
/* Картка квіза поверх фото. Правий край — рівно 90px від краю екрана
   (40px margin блока + 50px тут), як і решта контенту сторінки. */
.quiz-card {
  position: absolute; z-index: 2;
  top: 50%; right: 50px; transform: translateY(-50%);
  width: min(540px, calc(100% - 100px));
  background: var(--tm-white);
  border-radius: var(--border-radius--border-radius);
  padding: 36px; box-shadow: 0 30px 70px rgba(0,0,0,.42);
}
.quiz-head h3 { font-size: 21px; margin: 0 0 6px; }
.quiz-head p  { font-size: 14px; margin: 0; color: var(--tm-gray); }

.quiz-progress { margin: 22px 0 26px; }
.quiz-progress-track { height: 3px; background: var(--tm-sand-dark); border-radius: 2px; overflow: hidden; }
.quiz-progress-bar { height: 100%; width: 20%; background: var(--tm-yellow); transition: width .4s cubic-bezier(.4,0,.2,1); }
.quiz-progress-label { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--tm-gray); }

.quiz-step { display: none; }
.quiz-step.active { display: block; animation: quizFade .35s ease both; }
@keyframes quizFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.quiz-question { font-size: 17px; font-weight: 700; color: var(--tm-black); margin: 0 0 16px; }
.quiz-options { display: grid; gap: 8px; }
.quiz-option {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; background: var(--tm-sand); border: 1.5px solid transparent;
  border-radius: var(--border-radius--border-radius-sm);
  font: 600 15px/1.3 Manrope, sans-serif; color: var(--tm-black);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.quiz-option:hover { border-color: var(--tm-black); transform: translateX(3px); }
.quiz-option.selected { border-color: var(--tm-yellow); background: #FFFBE8; }
.quiz-option .dot { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 2px solid var(--tm-sand-dark); transition: .2s ease; }
.quiz-option.selected .dot { border-color: var(--tm-yellow); background: var(--tm-yellow); box-shadow: inset 0 0 0 3px #fff; }

.quiz-fields { display: grid; gap: 12px; }
.quiz-fields input {
  width: 100%; padding: 14px 16px; font: 400 15px Manrope, sans-serif;
  border: 1.5px solid var(--tm-sand-dark); border-radius: var(--border-radius--border-radius-sm);
  background: #fff; color: var(--tm-black);
}
.quiz-fields input:focus { outline: none; border-color: var(--tm-black); }
.quiz-consent { font-size: 12px; line-height: 1.5; color: var(--tm-gray); margin: 0; }

.quiz-nav { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.quiz-back { background: none; border: 0; cursor: pointer; font: 700 14px Manrope, sans-serif; color: var(--tm-gray); padding: 10px 4px; }
.quiz-back:hover { color: var(--tm-black); }
.quiz-next { margin-left: auto; cursor: pointer; border: 0; }
.quiz-next:disabled { opacity: .38; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.quiz-done { display: none; text-align: center; padding: 26px 8px; }
.quiz-done.active { display: block; }
.quiz-tick { width: 56px; height: 56px; border-radius: 50%; background: var(--tm-yellow); display: grid; place-items: center; margin: 0 auto 18px; }
.quiz-done h3 { margin: 0 0 8px; font-size: 21px; }
.quiz-done p  { margin: 0; font-size: 14px; }

/* --- 7. Проблема / Рішення — інтерактивний explorer ---------------------
   Один блок: лід (біль) зверху, нижче список напрямів ліворуч і жива панель
   (фото + опис) праворуч, яка змінюється під обраний напрям. Один центр
   уваги замість двох дзеркальних «сплітів». */
.solution-block { background-color: var(--tm-sand); }

/* Лід — редакторський split: ліворуч ейброу + заголовок, праворуч вступ,
   вирівняні по нижньому краю. Власна жовта лінія на ейброу, тож типову
   лінію над h2 тут вимикаємо. */
.solution-lead {
  /* На всю ширину контейнера — лівий край ліду збігається з картками (90px). */
  display: grid; grid-template-columns: 1.12fr .88fr; gap: 56px;
  align-items: end; margin-bottom: 72px;
}
.solution-lead h2 { margin: 0; font-size: 41px; line-height: 1.1; }
.solution-lead h2::before { content: none; }
.solution-lead p { font-size: 16.5px; line-height: 1.75; color: var(--tm-gray); margin: 0; padding-bottom: 4px; }
.sit-section-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 13px/1 Manrope, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tm-gray); margin-bottom: 22px;
}
.sit-section-eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--tm-yellow); }

/* Ситуації клієнта — суцільні повноекранні картки, що «липнуть» під шапкою
   й накладаються одна на одну при скролі (stacking scroll). Усередині кожної:
   ліворуч великий тонкий номер + «біль», праворуч рішення за вертикальною
   лінією. Наскрізний мотив тонкої жовтої лінії: ейброу, лейбл, маркери. */
.sit-list { position: relative; }
.sit-row {
  position: sticky; top: 96px;
  /* Картки на всю ширину контейнера — бічні відступи (90px) задає .container. */
  /* Висота формується контентом — без фіксованої/завищеної min-height і без
     вертикального центрування, яке лишало порожні зони зверху та знизу. */
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 44px;
  align-items: start;
  padding: 40px 52px;
  background: #FBFAF5; border: 1px solid rgba(12,12,12,.06); border-radius: 28px;
  box-shadow: 0 -10px 30px rgba(12,12,12,.04), 0 40px 80px -50px rgba(12,12,12,.42);
}
.sit-row + .sit-row { margin-top: 30px; }
/* Кожна наступна липне трохи нижче — з-під неї визирає край попередньої. */
.sit-row:nth-child(1) { top: 96px; }
.sit-row:nth-child(2) { top: 112px; }
.sit-row:nth-child(3) { top: 128px; }
.sit-row:nth-child(4) { top: 144px; }
.sit-row:nth-child(5) { top: 160px; }

/* Ліва колонка — номер (тонкий, архітектурний) + ситуація (біль). */
.sit-num { font: 300 88px/.9 Manrope, sans-serif; letter-spacing: -.04em; color: var(--tm-black); margin-bottom: 16px; }
.sit-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 12px/1 Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tm-gray); margin-bottom: 12px;
}
.sit-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--tm-yellow); }
.sit-title { font-size: 30px; line-height: 1.18; letter-spacing: -.02em; margin: 0 0 14px; }
.sit-pain { font-size: 16.5px; line-height: 1.7; color: var(--tm-gray); margin: 0; max-width: 40ch; }

/* Права колонка — рішення, відділене тонкою вертикальною лінією. */
.sit-answer { border-left: 1px solid rgba(12,12,12,.1); padding-left: 44px; }
.sit-answer-label {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 12px/1 Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tm-black); margin-bottom: 14px;
}
.sit-answer-label::before { content: ""; width: 22px; height: 2px; background: var(--tm-yellow); }
.sit-solve { font-size: 16px; line-height: 1.7; color: var(--tm-black); margin: 0 0 16px; }
.sit-points { list-style: none; margin: 0; padding: 0; }
.sit-points.cols-2 { columns: 2; column-gap: 40px; }
.sit-points li {
  position: relative; padding-left: 24px; margin-bottom: 11px;
  font-size: 15.5px; line-height: 1.55; color: var(--tm-gray); break-inside: avoid;
}
.sit-points li:last-child { margin-bottom: 0; }
/* Маркер — короткий жовтий штрих (метафора світлової лінії). */
.sit-points li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 14px; height: 2px; background: var(--tm-yellow);
}
/* Бренди матеріалів — пігулки з наведенням. */
.sit-brands { display: flex; flex-wrap: wrap; gap: 12px; }
.sit-brands li {
  padding: 11px 20px 11px 36px; margin: 0; background: var(--tm-white);
  border: 1px solid rgba(12,12,12,.08); border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--tm-black);
  transition: border-color .25s ease, transform .25s ease;
}
.sit-brands li::before { left: 18px; top: 50%; transform: translateY(-50%); }
.sit-brands li:hover { border-color: var(--tm-yellow); transform: translateY(-2px); }

/* Окремий акцентний блок — тканинні рішення на темній плиті з глибиною. */
.fabric-accent {
  margin-top: 88px; color: var(--tm-white);
  background: linear-gradient(157deg, #17160F 0%, #0A0A0A 60%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--border-radius--border-radius); padding: 60px 60px 52px;
}
.fabric-accent-head { max-width: 620px; margin-bottom: 44px; }
.fabric-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 13px/1 Manrope, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tm-yellow); margin-bottom: 16px;
}
.fabric-eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--tm-yellow); }
.fabric-accent-title { color: var(--tm-white); font-size: 32px; line-height: 1.15; letter-spacing: -.02em; margin: 0; }
.fabric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px; }
.fabric-card-media {
  aspect-ratio: 16 / 10; border-radius: var(--border-radius--border-radius-sm);
  overflow: hidden; margin-bottom: 26px; background: #1a1a1a; border: 1px solid rgba(255,255,255,.08);
}
.fabric-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,0,.2,1); }
.fabric-card:hover .fabric-card-media img { transform: scale(1.05); }
.fabric-card-title { color: var(--tm-white); font-size: 23px; letter-spacing: -.01em; margin: 0 0 12px; }
.fabric-card-desc { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.62); margin: 0 0 22px; }
.fabric-card-label {
  font: 800 12px/1 Manrope, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tm-yellow); margin-bottom: 16px;
}
.fabric-points { list-style: none; margin: 0; padding: 0; }
.fabric-points li {
  position: relative; padding-left: 24px; margin-bottom: 11px;
  font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.82);
}
.fabric-points li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 14px; height: 2px; background: var(--tm-yellow);
}
.fabric-accent-cta {
  margin-top: 48px; padding-top: 44px;
  border-top: 1px solid rgba(255,255,255,.12); text-align: center;
}

/* --- 8. Акордеон напрямів (і FAQ на тій самій механіці) ----------------
   Тепер це частина 2 блоку .solution-block, а не окрема секція, тож власний
   фон і вертикальні відступи прибрано — їх задає .solution-block /
   .solution-directions вище. */
.service-accordion-wrap { width: 100%; cursor: pointer; }
.service-accordion-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.service-accordion-title { color: var(--tm-black); transition: color .25s ease; }
.service-accordion-wrap:hover .service-accordion-title,
.service-accordion-wrap.open .service-accordion-title { color: var(--tm-yellow-deep); }
.service-accordion-icon { transition: transform .3s ease, opacity .3s ease; }
.service-accordion-wrap.open .service-accordion-icon { transform: rotate(-90deg); }

/* Тематичні іконки напрямів (блок «Наші рішення») — як у рефі: лінійна
   іконка праворуч замість стрілки, колір слідує за станом пункту
   (чорна → золота на відкритому/наведеному). FAQ лишається зі стрілкою. */
.service-accordion-icon-wrap { color: var(--tm-black); transition: color .25s ease; flex: none; }
.service-accordion-wrap:hover .service-accordion-icon-wrap,
.service-accordion-wrap.open .service-accordion-icon-wrap { color: var(--tm-yellow-deep); }
.service-dir-icon { width: 26px; height: 26px; display: block; }
.service-accordion-content { height: 0; overflow: hidden; transition: height .35s cubic-bezier(.4,0,.2,1); }
.service-accordion-description { padding-top: 14px; margin: 0; font-size: 15.5px; line-height: 1.7; }
.service-accordion-divider { height: 1px; background: rgba(12,12,12,.12); margin-top: 24px; }

/* Колонка з фото тягнеться під висоту акордеона — інакше під нею
   лишається велика порожнеча. */
.grid-bg-service { align-items: stretch; }
.bg-service-image-wrapper { height: 100%; }
.bg-service-image-wrap { border-radius: var(--border-radius--border-radius); overflow: hidden; position: relative; height: 100%; }
.bg-service-image { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; }

/* --- 9. Кейси ----------------------------------------------------------- */
.section-description { font-size: 17px; line-height: 1.65; color: var(--tm-gray); max-width: 62ch; margin: 14px 0 0; }
.section-title.text-center .section-description { margin-left: auto; margin-right: auto; }

.case-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.case-filter {
  padding: 11px 22px; border-radius: 40px; cursor: pointer;
  font: 700 14px Manrope, sans-serif; color: var(--tm-black);
  border: 1.5px solid rgba(12,12,12,.14); background: transparent; transition: .22s ease;
}
.case-filter:hover { border-color: var(--tm-black); }
/* активний стан — жовтий (ТЗ: жовтий для активних станів і маркерів) */
.case-filter.active { background: var(--tm-yellow); border-color: var(--tm-yellow); color: var(--tm-black); }

.grid-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cases-scroll-hint {
  display: none; margin: 14px 0 0; text-align: right;
  font: 700 13px Manrope, sans-serif; color: var(--tm-gray); letter-spacing: .01em;
}
/* Пагінація робіт — лише на мобільному (керується з app.js). */
.case-pager { display: none; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.case-page {
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  font: 700 15px Manrope, sans-serif; color: var(--tm-black);
  border: 1.5px solid rgba(12,12,12,.14); background: transparent; transition: .2s ease;
}
.case-page:hover { border-color: var(--tm-black); }
.case-page.active { background: var(--tm-yellow); border-color: var(--tm-yellow); }
.case-item {
  position: relative; display: block; overflow: hidden; aspect-ratio: 4/3;
  border-radius: var(--border-radius--border-radius); background: var(--tm-sand-dark); margin: 0;
}
.case-item.wide { grid-column: span 2; aspect-ratio: 8/3; }
.case-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.case-item:hover img { transform: scale(1.06); }
.case-overlay {
  position: absolute; inset: auto 0 0 0; padding: 24px; color: #fff;
  background: linear-gradient(transparent, rgba(12,12,12,.88));
  opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease;
}
.case-item:hover .case-overlay { opacity: 1; transform: none; }
.case-overlay::before { content: ""; display: block; width: 30px; height: 2px; background: var(--tm-yellow); margin-bottom: 12px; }
.case-overlay strong { display: block; font-size: 16px; margin-bottom: 3px; }
.case-overlay span { font-size: 13px; color: rgba(255,255,255,.7); }

/* Клікабельна картка (кейс із деталями). Скидаємо стилі <button>. */
button.case-item {
  width: 100%; padding: 0; border: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.case-item.has-detail { cursor: pointer; }
.case-more {
  display: block; margin-top: 10px; font-size: 13px; font-style: normal;
  font-weight: 700; color: var(--tm-yellow);
}

/* --- Детальне вікно кейсу ---------------------------------------------
   Вікно повністю вміщається в екран із відступами (padding обгортки),
   тож не обрізається зверху. Зображення має обмежену висоту й завжди
   видиме повністю; довгий текст гортається ВСЕРЕДИНІ вікна (.case-modal-info),
   а не за краєм екрана. */
/* z-index вище за navbar (900), щоб вікно перекривало шапку, а не навпаки. */
.case-modal { position: fixed; inset: 0; z-index: 1000; }
.case-modal[hidden] { display: none; }
.case-modal-backdrop { position: fixed; inset: 0; background: rgba(12,12,12,.72); }
.case-modal-wrap {
  position: relative; height: 100%; display: flex;
  align-items: center; justify-content: center;
  padding: 56px 16px 32px; box-sizing: border-box;
}
.case-modal-dialog {
  position: relative; width: min(920px, 92vw); max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--tm-sand, #F4F2EC);
  border-radius: var(--border-radius--border-radius); box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.case-modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--tm-black);
  font-size: 24px; line-height: 42px; text-align: center; transition: .2s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.case-modal-close:hover { background: var(--tm-yellow); }
/* body — прозорий контейнер: hero та info стають прямими flex-елементами
   діалогу, тож обмеження висоти й внутрішній скрол працюють коректно. */
.case-modal-body { display: contents; }
.case-modal-hero {
  flex: 0 0 auto; height: min(42vh, 440px); overflow: hidden;
  border-radius: var(--border-radius--border-radius) var(--border-radius--border-radius) 0 0;
}
.case-modal-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-modal-info {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 30px 34px 36px;
}
.case-modal-tag {
  display: inline-block; font: 700 12px Manrope, sans-serif; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tm-gray, #686868); margin-bottom: 8px;
}
.case-modal-info h3 { margin: 0 0 22px; font-size: 26px; }

.case-specs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(12,12,12,.1); border: 1px solid rgba(12,12,12,.1);
  border-radius: 10px; overflow: hidden; margin: 0 0 26px;
}
.case-spec { background: var(--tm-sand, #F4F2EC); padding: 14px 18px; margin: 0; }
.case-spec dt { font-size: 12px; color: var(--tm-gray, #686868); margin-bottom: 4px; }
.case-spec dd { margin: 0; font-weight: 700; font-size: 15px; }

.case-block { margin-bottom: 20px; }
.case-block h4 {
  margin: 0 0 6px; font-size: 15px; position: relative; padding-top: 12px;
}
.case-block h4::before { content: ""; position: absolute; top: 0; left: 0;
  width: 26px; height: 2px; background: var(--tm-yellow); }
.case-block p { margin: 0; color: var(--tm-gray, #686868); line-height: 1.6; }

.case-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.case-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; display: block; }

@media (max-width: 600px) {
  .case-specs { grid-template-columns: 1fr; }
  .case-gallery { grid-template-columns: repeat(2, 1fr); }
  .case-modal-info { padding: 24px 20px 28px; }
}

/* --- 10. Цифри (мозаїка «як у шаблоні») ---------------------------------
   Окрема СВІТЛА секція — точна копія шаблонного state-section: три картки
   (чорна / жовта / світла) переплетені з фото робіт. Цифра на першій картці
   лежить на білому «нотчі» (метафора тіньового шва), решта — інлайн. */
.state-section { background: var(--tm-sand); }
.state-section .section-title { margin-bottom: 56px; }
/* Перша (чорна) картка цифр — звичайна, як «30+»: число + підзаголовок + опис
   усередині, без «нотч»-язичка. Число — біле (щоб читалось на чорному). */
.state-count-title { color: var(--tm-black); }
.state-item-wrap.one .state-count-title { color: var(--tm-white); }
.state-item-wrap.two .state-count-title, .state-item-wrap.two .state-title, .state-item-wrap.two .state-description { color: var(--tm-black); }
.state-item-wrap.three .state-count-title, .state-item-wrap.three .state-title, .state-item-wrap.three .state-description { color: var(--tm-black); }
/* Третя картка — біла, щоб контрастувала з піщаним тлом секції. */
.state-item-wrap.three { background: var(--tm-white); }
/* Перша (чорна) картка: підзаголовок — жовтий (text-primary-1),
   опис — світлий приглушений, щоб читався на чорному. */
.state-item-wrap .state-description.one { color: rgba(255,255,255,.72); opacity: 1; }
.state-image-wrap { border-radius: var(--border-radius--border-radius); overflow: hidden; min-height: 240px; }
.state-image { width: 100%; height: 100%; object-fit: cover; display: block; }
/* --- 10б. СТА-банер до квіза (блок 5) -----------------------------------
   Чиста конверсійна пауза між кейсами й перевагами: заголовок + кнопка на
   квіз. Темна вставна плита на піщаній секції — як інсет-блок hero: сендові
   поля навколо + скруглення відділяють її від суцільно-чорних «Переваг»
   нижче, тож дві темні площини не зливаються. */
.tm-cta-section { background: var(--tm-sand); }
.tm-cta-plate {
  background: var(--tm-black); border-radius: var(--border-radius--border-radius);
  padding: 56px 60px; display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.tm-cta-copy { max-width: 640px; }
.tm-cta-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin-bottom: 16px;
}
.tm-cta-eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--tm-yellow); flex: none; }
.tm-cta-plate h2 { color: #fff; margin: 0 0 12px; }
.tm-cta-plate h2::before { content: none; }   /* без верхньої жовтої риски — її роль грає eyebrow */
.tm-cta-plate p { color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.6; margin: 0; }
.tm-cta-plate .button-primary { flex: none; }

/* --- 11. Переваги / Цифри -----------------------------------------------
   Розкладка «split-step» із шаблону: липка ліва колонка (заголовок + текст +
   CTA) і стос карток, що чергують жовту / чорну / світлу площини — саме чорні
   картки повертають блоку потрібну частку чорного. Секція на піску, як у
   шаблоні; кутовий кружечок несе фірмову іконку замість номера кроку. */
.advantage-section { background: var(--tm-sand); }
/* Стос карток — зліва (скролиться), інфопанель — справа й закріплена (їде з нами).
   Розкладку задаємо через grid-column, а не порядок у DOM, щоб на мобільному
   заголовок лишався першим. */
/* align-items не чіпаємо: grid-комірка має тягнутися на всю висоту ряду, інакше
   sticky-панель «доїде» лише до кінця власного контенту й від'їде далі. */
/* Заголовок + текст — ліворуч (закріплена панель), стос карток — праворуч. */
.advantage-section .grid-split-step { grid-template-columns: 0.85fr 1fr; }
.advantage-section .grid-split-step > div:first-child { grid-column: 1; grid-row: 1; }
.advantage-section .grid-split-step > .split-step-wrapper { grid-column: 2; grid-row: 1; }
.advantage-section .split-step-sticky-wrap h2 { margin: 0 0 20px; }
.advantage-section .split-step-sticky-wrap .hero-button-list { margin-top: 34px; }
/* Опис блоку переваг — 16px (десктоп і моб). */
.advantage-section .split-step-description { font-size: 16px; margin-bottom: 14px; }

/* Стос карток при скролі: кожна картка «липне» до верху з невеликим наростаючим
   відступом, тож наступна наїжджає й накладається на попередню (ефект колоди
   карт). Фони карток непрозорі (жовтий / чорний / світлий), тінь відділяє шари.
   Sticky спрацьовує після появи блоку — .tm-reveal знімає transform у стані .in,
   тож картки прив'язуються до вікна, а не до контейнера. */
.advantage-section .split-step-wrapper { gap: 26px; }
/* Обгортка стосу лише проявляється прозорістю, БЕЗ translate — інакше transform
   на предку створює containing block і ламає sticky у дочірніх картках. */
.advantage-section .split-step-wrapper.tm-reveal,
.js-reveal .advantage-section .split-step-wrapper.tm-reveal { transform: none; }
.advantage-section .split-step-item {
  position: sticky;
  box-shadow: 0 6px 22px rgba(12,12,12,.06);
}
.advantage-section .split-step-item:nth-child(1)  { top: 108px; }
.advantage-section .split-step-item:nth-child(2)  { top: 124px; }
.advantage-section .split-step-item:nth-child(3)  { top: 140px; }
.advantage-section .split-step-item:nth-child(4)  { top: 156px; }
.advantage-section .split-step-item:nth-child(5)  { top: 172px; }
.advantage-section .split-step-item:nth-child(6)  { top: 188px; }
.advantage-section .split-step-item:nth-child(7)  { top: 204px; }
.advantage-section .split-step-item:nth-child(8)  { top: 220px; }
.advantage-section .split-step-item:nth-child(9)  { top: 236px; }
.advantage-section .split-step-item:nth-child(10) { top: 252px; }
.advantage-section .split-step-item:nth-child(11) { top: 268px; }
.advantage-section .split-step-item:nth-child(12) { top: 284px; }

/* Кутовий виріз — колір фону сайту (пісок), без білих кутів; двоколірна
   (жовто-чорна) іконка читається і на жовтій, і на чорній, і на світлій плиті. */
.advantage-section .step-number-wrapper { background: #F4F2EC; }
.advantage-section .step-number-wrap { background: #F4F2EC; }
.tm-step-icon { width: 40px; height: 40px; object-fit: contain; display: block; }


/* Рядок ключових цифр перенесено сюди з колишнього блоку 5. На чорному тлі:
   число — жовте, підпис — приглушено-білий; тонкі вертикальні розділювачі. */
.adv-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14);
  margin-bottom: 56px;
}
.adv-stat { padding: 30px 32px; }
.adv-stat + .adv-stat { border-left: 1px solid rgba(255,255,255,.14); }
.adv-stat-num {
  font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -.03em;
  color: var(--tm-yellow); margin-bottom: 12px;
}
.adv-stat-label { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.68); }
.adv-stat-label span { color: #fff; font-weight: 700; }

.grid-advantage-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 56px; align-items: start; }
.grid-advantage-intro h2 { margin: 0; }
.grid-advantage-intro p { font-size: 16px; line-height: 1.7; margin: 0 0 16px; }

.grid-advantage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.advantage-card {
  background: var(--tm-sand); border-radius: var(--border-radius--border-radius);
  padding: 30px 26px; position: relative; transition: transform .3s ease, box-shadow .3s ease;
}
.advantage-card::after {
  content: ""; position: absolute; left: 26px; bottom: 22px; height: 2px; width: 0;
  background: var(--tm-yellow); transition: width .35s ease;
}
.advantage-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(12,12,12,.1); }
.advantage-card:hover::after { width: 40px; }
.advantage-icon { width: 48px; height: 48px; object-fit: contain; display: block; margin-bottom: 16px; }
.advantage-card h4 { font-size: 15.5px; margin: 0 0 7px; line-height: 1.35; }
.advantage-card p  { font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; color: var(--tm-gray); }

/* --- 12. Відгуки -------------------------------------------------------- */
/* Секція у стилі google-віджета відгуків: світлий фон, зведена плашка з
   балом і зірками, під нею — сітка світлих карток. Джерело чесно лишається
   Top20 (не Google) — вимога ТЗ. */
.testimonial-section {
  background-color: var(--tm-sand) !important;
  background-image: none !important;
  padding-top: 120px;
}
/* прибираємо темний оверлей і бокові «notch»-плити шаблону — фон тепер світлий */
.testimonial-image-overlay { display: none !important; }
.testimonial-section-shape { display: none !important; }
.testimonial-section-title-center {
  background-color: var(--tm-sand) !important;
  padding-bottom: 0; margin-bottom: 16px;   /* менший відступ до тексту нижче */
}
/* Жовта риска — тепер біля назви блоку (eyebrow), як в інших секціях, а не
   над заголовком. */
.testimonial-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tm-gray); margin-bottom: 12px;
}
.testimonial-eyebrow::before {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--tm-yellow); margin: 0 auto 12px;
}
.testimonial-section-title-center h2::before { content: none; }   /* прибрали риску над заголовком */
.testimonial-section-title { color: var(--tm-black); margin: 0; }
/* Шаблон дає слайдеру margin-top:100–150px (плита заходила на темне фото).
   На світлому фоні це зайва прірва — стягуємо до нормального відступу. */
.testimonial-slider-wrapper { flex-direction: column; margin-top: 30px; }
.testimonial-intro { color: #3c4043; font-size: 17px; line-height: 1.65; text-align: center; max-width: 60ch; margin: 0 auto 36px; }

/* Підсумкова плашка у стилі google-віджета відгуків: світла картка,
   великий бал, золоті зірки, кількість. Джерело — Top20 (не Google). */
.rating-card {
  background: #fff;
  border: 1px solid rgba(12,12,12,.08); box-shadow: 0 18px 44px rgba(0,0,0,.22);
  border-radius: var(--border-radius--border-radius);
  padding: 30px 40px; display: grid; grid-template-columns: auto 1fr auto;
  gap: 36px; align-items: center; margin-bottom: 40px;
}

/* Дволанкова розкладка відгуків: рейтингова картка ліворуч «запінена»
   (position: sticky), каруселька відгуків праворуч гортається — а картка
   лишається на місці й при вертикальному скролі, і при перемотці відгуків.
   Той самий патерн, що у секції FAQ. */
/* Три рівні колонки з однаковим проміжком 24px, як між картками відгуків:
   рейтингова картка займає 1 колонку (= ширина однієї картки відгуку),
   каруселька — 2 колонки (2 картки в ряд). Тож плашка «4,9» рівно така
   завширшки, як картка відгуку поруч. */
.reviews-layout {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start;
}
.reviews-aside { grid-column: 1 / 2; position: sticky; top: 110px; }
.reviews-main  { grid-column: 2 / 4; min-width: 0; }   /* дозволяє каруселі стискатись у грід-колонці */

/* У сайдбарі картка вертикальна: великий бал зверху, опис, кнопка на всю ширину. */
.reviews-aside .rating-card {
  grid-template-columns: 1fr; gap: 24px; margin-bottom: 0;
  text-align: center; padding: 36px 34px;
}
.reviews-aside .rating-score {
  padding-right: 0; padding-bottom: 22px; border-right: 0;
  border-bottom: 1px solid rgba(12,12,12,.1); white-space: normal;
}
.reviews-aside .rating-stars { justify-content: center; }
.reviews-aside .rating-body p { margin-left: auto; margin-right: auto; }
.reviews-aside .rating-card .button-primary { width: 100%; text-align: center; }
.rating-score { text-align: center; padding-right: 36px; border-right: 1px solid rgba(12,12,12,.1); white-space: nowrap; }
.rating-score b { display: block; font-size: 58px; font-weight: 800; color: var(--tm-black); line-height: .95; letter-spacing: -.04em; }
.rating-score span { display: block; margin-top: 8px; font-size: 13px; color: var(--tm-gray); }
.rating-stars { display: flex; gap: 4px; margin-bottom: 12px; }
.rating-stars svg { width: 20px; height: 20px; fill: var(--tm-yellow); }
.rating-body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tm-gray); max-width: 48ch; }
.rating-count { color: var(--tm-black); font-weight: 700; }

/* Каруселька відгуків: три картки в ряд, зсув по сторінках, керування —
   стрілки + крапки-пагінація. Трек ховається за межами вьюпорта. */
.review-grid { display: block; }
.review-viewport { overflow: hidden; }
.review-track {
  display: flex; gap: 24px; align-items: stretch;
  transition: transform .5s cubic-bezier(.4,.15,.2,1); will-change: transform;
}
/* 2 картки в ряд (1 проміжок 24px) — каруселька у вужчій правій колонці */
.review-track .review-card { flex: 0 0 calc((100% - 24px) / 2); }

/* Картки у стилі google-віджета відгуків: велика лапка вгорі, ряд зірок,
   текст, розділювач і «підвал» — кольоровий аватар з ініціалом, ім'я/статус
   та тип клієнта · місто. Джерело чесно лишається Top20 (не Google). */
.review-card {
  background: var(--tm-white); border: 1px solid rgba(12,12,12,.07);
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(12,12,12,.06);
  padding: 30px 32px 26px; display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.review-card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(12,12,12,.13); }

/* Керування каруселькою */
.review-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 34px; }
.review-arrow {
  flex: none; width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid rgba(12,12,12,.18); background: var(--tm-white); color: var(--tm-black);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.review-arrow svg { width: 20px; height: 20px; }
.review-arrow:hover:not(:disabled) { background: var(--tm-black); color: #fff; border-color: var(--tm-black); }
.review-arrow:disabled { opacity: .3; cursor: default; }
.review-dots { display: flex; align-items: center; gap: 8px; }
.review-dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(12,12,12,.22); cursor: pointer; transition: background .25s ease, width .25s ease;
}
.review-dot.active { width: 26px; background: var(--tm-yellow); }

/* Декоративна лапка — нейтральний тон, щоб не конфліктувати з палітрою. */
.review-quote {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
  font-size: 66px; line-height: .6; height: 34px;
  color: rgba(12,12,12,.13); margin-bottom: 20px;
}
.review-stars { display: flex; gap: 4px; margin-bottom: 18px; }
.review-stars svg { width: 22px; height: 22px; fill: var(--tm-yellow); }
.review-text {
  font-size: 16px; line-height: 1.55; font-weight: 600;
  color: var(--tm-black); margin: 0 0 22px; flex: 1;
}
.review-photo { border-radius: 12px; overflow: hidden; margin: 0 0 22px; }
.review-photo img { width: 100%; height: 160px; object-fit: cover; display: block; }
.review-divider { height: 1px; background: rgba(12,12,12,.09); margin: 0 0 20px; }
.review-foot { display: flex; align-items: center; gap: 14px; }
.review-avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; font-weight: 700; line-height: 1;
}
.review-id { min-width: 0; }
.review-name { font-size: 16px; font-weight: 700; color: var(--tm-black); margin: 0; }
.review-role { font-size: 14px; color: var(--tm-gray); margin-top: 3px; }

/* Стан «очікує на публікацію» — трохи приглушений текст, щоб читалося як
   майбутній вигляд секції, а не як справжній відгук. */
.review-card.is-pending .review-text { font-weight: 500; color: rgba(12,12,12,.68); }

.reviews-empty {
  grid-column: 1 / -1; text-align: center; padding: 50px 24px;
  border: 1px dashed rgba(12,12,12,.22); border-radius: var(--border-radius--border-radius);
  color: var(--tm-gray); font-size: 15px;
}
.reviews-empty code { color: #6b5500; }

/* --- 13. FAQ ------------------------------------------------------------
   Один стовпчик: шапка зверху, список питань на всю ширину під нею.
   Питання — з плюсиком у чорному кружечку праворуч і тонкою лінією знизу. */
.faq-section { background: var(--tm-sand); }
/* У жовтому контейнері — ТІЛЬКИ ліва частина (заголовок + текст + CTA).
   Самі питання праворуч — без фону, на піску секції.
   Жовта плита — одна з дозволених ТЗ поверхонь (конверсійна FAQ-картка). */
.grid-faq {
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: start;
}
.faq-sticky-wrap {
  position: sticky; top: 120px; max-width: none;
  background: var(--tm-yellow); border-radius: var(--border-radius--border-radius);
  padding: 48px 44px;
}
.faq-sticky-wrap h2 { margin: 0 0 16px; color: var(--tm-black); }
.faq-sticky-wrap h2::before { content: none; }   /* прибрали лінію над заголовком */
.faq-sticky-wrap .split-step-description { margin-bottom: 30px; color: rgba(12,12,12,.72); }
.faq-sticky-wrap .button-primary { background: var(--tm-black); color: #fff; }
.faq-sticky-wrap .button-primary:hover { background: #242424; color: #fff; }
.faq-sticky-wrap .dark-button-icon { color: var(--tm-black); }
.faq-sticky-wrap .dark-button-icon .button-icon-image { filter: none; }

/* Питання на всю ширину; праворуч — плюс у чорному кружечку (стає мінусом).
   Рівні відступи між питаннями: прибираємо flex-проміжок списку й тримаємо
   симетричний padding заголовка, щоб розділювач стояв рівно посередині між
   сусідніми питаннями (однаково зверху й знизу). */
.faq-section .bg-service-wrap { gap: 0; }
.faq-section .service-accordion-heading { align-items: center; padding: 18px 0; }
.faq-plus {
  display: block; flex: none; position: relative; width: 34px; height: 34px;
  border-radius: 50%; background: var(--tm-black);
}
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 1px;
  transform: translate(-50%, -50%);
}
.faq-plus::before { width: 14px; height: 2px; }
.faq-plus::after  { width: 2px; height: 14px; transition: transform .3s ease; }
.service-accordion-wrap.open .faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
/* Напівпрозорі лінії між питаннями — темні на жовтому тлі. */
.faq-section .service-accordion-divider { margin-top: 0; background-color: var(--tm-black); opacity: .18; }
.faq-section .service-accordion-title { color: var(--tm-black); }
.faq-section .service-accordion-description { color: rgba(12,12,12,.78); }
/* Останній розділювач у списку прибираємо — нижній край плити його заміняє. */
.faq-section .service-accordion-wrap:last-child .service-accordion-divider { display: none; }

/* --- 14. Форма заявки ---------------------------------------------------
   Розкладка «як у шаблоні»: дві рівні колонки (1fr 1fr із base), зображення
   ліворуч — КВАДРАТНЕ (як у шаблоні), картка форми праворуч. Колонки
   вирівняні по верху, тож форма не розтягує фото у портрет. */
/* Фото тягнеться на висоту картки-форми (align-items:stretch за замовч.), тож
   порожнеч під ним немає. Форму робимо компактною, щоб результат був близький
   до квадрата — як зображення у шаблоні. Мінімум — квадрат. */
/* Ліве зображення — фіксований портрет 536×690 (по лівій стороні секції).
   На вужчих екранах масштабується, зберігаючи пропорцію 536:690. */
/* Обидві колонки однакової висоти: фото — еталон (536×690), а картка-форма
   тягнеться до нього (align-items:stretch за замовч.). Форму робимо компактною
   й центруємо по вертикалі, щоб усе вмістилося у висоту фото без порожнеч. */
.quote-image-wrap { min-height: 0; width: 536px; max-width: 100%; }
.quote-image {
  width: 100%; height: 100%; max-width: 536px; aspect-ratio: 536 / 690;
  object-fit: cover; display: block;
}
/* Десктоп: ліва колонка — рівно під фото (536px), права (форма) забирає всю
   решту ширини. Раніше обидві колонки були 1fr, тож фото не заповнювало свою
   половину і між ним та формою зяяла велика порожнеча. Тепер gap = лише
   відступ між колонками, а картка-форма ширша. */
@media (min-width: 768px) {
  .grid-quote { grid-template-columns: 536px minmax(0, 1fr); grid-column-gap: 40px; }
}
.quote-wrapper {
  background-color: var(--tm-white);
  padding: 40px 42px; display: flex; flex-direction: column; justify-content: center;
}
.quote-wrapper h2::before { content: none; }   /* прибрали жовту лінію над заголовком */
.quote-wrapper h2 { font-size: 27px; line-height: 1.14; }
.quote-description { margin: 10px 0 18px; font-size: 15px; line-height: 1.5; }
.quote-form-block label { display: block; margin-bottom: 5px; font-size: 14px; }
.quote-form-block .form-input,
.quote-form-block .form-select { height: 44px; margin-bottom: 0; }
.quote-form-block .input-group { margin-bottom: 11px; }
.quote-form-block .input-group-wrap { margin-bottom: 0; gap: 16px; }
.quote-form-block .button-full { height: 48px; margin-top: 4px; }
.form-textarea { min-height: 110px; resize: vertical; }
.form-note { font-size: 12px; line-height: 1.5; color: var(--tm-gray); margin: 10px 0 0; }

/* Однакова, вирівняна стрілка для всіх select — прибираємо нативну й малюємо
   власний шеврон, точно по центру праворуч (раніше «зʼїжджала»). */
.form-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23686868' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 12px 8px;
  padding-right: 44px;
}
.form-status { display: none; margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-size: 14px; }
.form-status.ok  { display: block; background: rgba(255,208,0,.16); color: #6b5500; border: 1px solid rgba(255,208,0,.5); }
.form-status.err { display: block; background: rgba(200,40,40,.08); color: #a02020; border: 1px solid rgba(200,40,40,.25); }

/* --- 14b. Поп-ап «Розрахувати вартість» --------------------------------
   Кнопки CTA відкривають цю модалку замість прокрутки. Показ — по класу
   .open; фон сторінки блокуємо через .modal-open на <html>. */
html.modal-open { overflow: hidden; }
.tm-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.tm-modal.open { display: flex; }
.tm-modal-backdrop { position: absolute; inset: 0; background: rgba(12,12,12,.62); }
.tm-modal-card {
  position: relative; z-index: 1; width: min(460px, 100%);
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--tm-white); border-radius: 22px;
  padding: 40px 40px 32px; box-shadow: 0 40px 90px rgba(0,0,0,.45);
  animation: tmModalIn .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes tmModalIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.tm-modal-close {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: rgba(12,12,12,.06); color: var(--tm-black);
  font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s ease;
}
.tm-modal-close:hover { background: rgba(12,12,12,.12); }
.tm-modal-card h3 { margin: 0 34px 8px 0; font-size: 24px; line-height: 1.15; color: var(--tm-black); }
.tm-modal-sub { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: var(--tm-gray); }
.tm-modal-card .input-group { margin-bottom: 13px; }
.tm-modal-card label { display: block; margin-bottom: 5px; font-size: 14px; }
.tm-modal-card .form-input, .tm-modal-card .form-select { height: 46px; margin-bottom: 0; }
.tm-modal-card .button-full { height: 50px; margin-top: 6px; }
@media (max-width: 767px) {
  .tm-modal-card { padding: 34px 22px 26px; border-radius: 18px; }
}

/* --- 15. Футер ---------------------------------------------------------- */
/* Чорний — САМЕ на .footer-wrap (як у шаблоні), а не на .footer.
   .footer має padding-top:130px, який мусить лишатися прозорим: у цей зазор
   виступає CTA-плейт (margin-top:-130px), і саме на стику чорного краю та
   плейта фігури shape-02 (top:130px) вирізають кути. Якщо зафарбувати .footer,
   зазор зникає, плейт не виступає — і вирізи ламаються. */
.footer { background-color: transparent; }
.footer-wrap { background-color: var(--tm-black); }
/* Головна CTA-площина сайту — єдине місце, де жовтий працює як фон.
   За ТЗ жовтий допустимий саме для основних CTA.
   Конструкція один-в-один із шаблоном: .footer-cta-wrapper — це кант (у шаблоні
   білий, у нас пісочний) з падінгом 20px по боках і знизу, всередині — жовтий
   плейт .footer-cta-wrap. Виїмки shape-02 мають колір канта (пісок), тому кути
   чорного блока плавно перетікають у кант плейта. Кант мусить збігатися з
   кольором виїмки — інакше пісочні чвертькола стирчать проти жовтого. */
.footer-cta-wrapper { background-color: var(--tm-sand); }
.footer-cta-wrap { background-color: var(--tm-yellow); }
.footer-cta-title { color: var(--tm-black); }
.footer-cta-content p { color: rgba(12,12,12,.72); font-size: 16px; }
/* Кнопка CTA — на всю ширину контейнера картки. */
.footer-cta-wrapper .button-primary { background: var(--tm-black); color: #fff; width: 100%; text-align: center; }
.footer-cta-wrapper .button-primary:hover { background: #242424; color: #fff; }
/* Текст-опис у футері — 16px. */
.footer .text-white { font-size: 16px; }
.footer-logo { width: auto !important; height: 54px; }
.footer-link { transition: color .2s ease; }
.footer-link:hover, .footer-meta-link:hover { color: var(--tm-yellow); }
.footer-meta-icon { flex: none; width: 18px; height: 18px; }
.footer-copyright-wrap { background-color: var(--tm-black); }
.footer-copyright { background-color: var(--tm-sand); }
.footer-copyright-text { color: var(--tm-gray); }
/* Плашка копірайту — точно як у шаблоні: квадратна коробка з бічними
   виїмками-філе shape-01, що плавно з'єднують її з чорним футером. Виїмки
   того ж піщаного кольору, що й плашка (shape-01-sand.svg), тож стик читається
   суцільним. На мобільному база ховає виїмки й вмикає радіус — це лишаємо. */

/* --- 16. Поява при скролі ----------------------------------------------
   ВАЖЛИВО: контент видимий за замовчуванням. Ховаємо його лише тоді, коли
   інлайновий скрипт у <head> підтвердив підтримку IntersectionObserver і
   поставив .js-reveal на <html>. Інакше будь-який збій JS робив би всю
   сторінку порожньою — саме так вона й ламалась.
   ---------------------------------------------------------------------- */
.js-reveal .tm-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js-reveal .tm-reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .tm-reveal { opacity: 1; transform: none; transition: none; }
}

html { scroll-behavior: smooth; scroll-padding-top: 120px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- 17. Адаптив -------------------------------------------------------- */
@media (max-width: 1350px) {
  .nav-link { font-size: 14px; }
  .right-nav-white .nav-phone { display: none; }
}
@media (max-width: 991px) {
  /* Hero у стовпчик: фото окремим блоком, квіз під ним звичайною карткою */
  .hero-wrap-split { padding-top: 130px; padding-bottom: 40px; }
  .hero-content-left-wrap { width: 100%; }
  .hero-image-wrap { position: static; width: 100%; margin-top: 36px; border-radius: var(--border-radius--border-radius); overflow: hidden; }
  .hero-image { height: 300px; }
  .hero-image-wrap::after { display: none; }
  .quiz-card {
    position: static; transform: none; width: 100%; max-width: none;
    margin-top: 20px; box-shadow: 0 18px 44px rgba(0,0,0,.3);
  }
  .grid-cases { grid-template-columns: repeat(2, 1fr); }
  .grid-advantage { grid-template-columns: repeat(2, 1fr); }
  .grid-advantage-intro { grid-template-columns: 1fr; gap: 28px; }
  .advantage-section .grid-split-step { grid-template-columns: 1fr; }
  .advantage-section .grid-split-step > .split-step-wrapper,
  .advantage-section .grid-split-step > div:first-child { grid-column: auto; grid-row: auto; }
  .advantage-section .split-step-sticky-wrap { position: static; }
  /* На одноколонковому розкладі стос карток розпінюємо — звичайний вертикальний
     потік, без накладання (інакше картки на всю ширину пірамідою з'їхали б донизу). */
  .advantage-section .split-step-item { position: static; box-shadow: none; }
  .tm-cta-plate { padding: 40px 32px; }
  .adv-stat-num { font-size: 44px; }
  .adv-stat { padding: 24px 22px; }
  .grid-faq { grid-template-columns: 1fr; gap: 32px; }
  .faq-sticky-wrap { position: static; padding: 40px 36px; }
  /* Відгуки: колонки одна під одною, рейтингова картка перестає бути «запіненою». */
  .reviews-layout { grid-template-columns: 1fr; gap: 32px; }
  .reviews-aside { position: static; }
  .reviews-aside .rating-card { padding: 28px; }
  .review-track .review-card { flex: 0 0 calc((100% - 24px) / 2); }   /* 2 картки в ряд на планшеті */
  .rating-card { grid-template-columns: 1fr; gap: 22px; padding: 28px; }
  .rating-score { border-right: 0; border-bottom: 1px solid rgba(12,12,12,.1); padding: 0 0 20px; text-align: left; }
  /* Лід у стовпчик. Ситуації — статичні картки (stacking лише на десктопі). */
  .solution-lead { grid-template-columns: 1fr; gap: 20px; align-items: start; margin-bottom: 52px; }
  .solution-lead h2 { font-size: 34px; }
  .solution-lead p { padding-bottom: 0; }
  .sit-row {
    position: static; min-height: 0; grid-template-columns: 1fr; gap: 28px;
    padding: 40px 40px; border-radius: 24px;
    box-shadow: 0 22px 46px -34px rgba(12,12,12,.4);
  }
  .sit-row + .sit-row { margin-top: 24px; }
  .sit-num { font-size: 62px; margin-bottom: 16px; }
  .sit-title { font-size: 26px; }
  .sit-answer { border-left: 0; padding-left: 0; border-top: 1px solid rgba(12,12,12,.1); padding-top: 28px; }
  .fabric-accent { padding: 44px 36px; }
  .fabric-grid { gap: 34px; }
  .fabric-accent-title { font-size: 28px; }
}
@media (max-width: 767px) {
  /* Роботи: вертикальний стос карток (по 6 на сторінку + пагінація з app.js),
     а не горизонтальна каруселька. */
  .grid-cases {
    display: grid; grid-template-columns: 1fr; gap: 16px;
    overflow: visible; margin: 0; padding: 0;
  }
  .case-item, .case-item.wide {
    flex: none; width: auto; grid-column: auto; aspect-ratio: 4/3; scroll-snap-align: none;
  }
  /* На тач-екрані hover не спрацьовує, тож підпис фото показуємо завжди —
     інакше під фото немає назви й тегу. */
  .case-overlay { opacity: 1; transform: none; padding: 18px; }
  .case-overlay strong { font-size: 15px; }
  .cases-scroll-hint { display: none; }

  .grid-advantage { grid-template-columns: 1fr; }
  .quiz-card { padding: 24px 20px; }
  .tm-cta-plate { flex-direction: column; align-items: flex-start; gap: 26px; padding: 34px 26px; }
  .tm-cta-plate .button-primary { width: 100%; text-align: center; }
  .adv-stats { grid-template-columns: 1fr; }
  .adv-stat + .adv-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .grid-faq { gap: 26px; }
  .faq-sticky-wrap { padding: 30px 24px; border-radius: var(--border-radius--border-radius-sm); }
  .tm-step-icon { width: 34px; height: 34px; }   /* кружечок меншає до 40px — лишаємо запас */

  /* Переваги: на мобільному картки йдуть звичайним компактним стосом —
     так само, як на десктопі, лише в один стовпчик. Без sticky-«колоди». */
  .advantage-section .split-step-wrapper { gap: 16px; }
  .advantage-section .split-step-item {
    position: relative; margin-bottom: 0; min-height: 0; padding: 28px 24px;
    box-shadow: none;
  }
  /* position стає relative (потрібно для бейджа-іконки), але тоді оживають
     десктопні sticky-зсуви top: 108–284px (секція 17): кожна картка з'їжджає
     вниз, а останні (Гарантія 15 років / Гарантія 1 рік) виїжджають за межі
     секції під відгуки й обрізаються. Скидаємо top для всіх карток. */
  .advantage-section .split-step-item:nth-child(n) { top: auto; }
  /* Відступ «кнопка → перша картка» був завеликий (grid-row-gap 50px + зсув
     top першої картки). Після скидання top лишається зменшити сам gap. */
  .advantage-section .grid-split-step { row-gap: 22px; }

  /* каруселька відгуків — одна картка на екран (керування стрілками/крапками) */
  .review-track .review-card { flex: 0 0 100%; }
  .review-controls { gap: 16px; margin-top: 26px; }
  .review-arrow { width: 46px; height: 46px; }

  /* Ситуації / тканинний акцент на мобільному */
  .solution-lead h2 { font-size: 29px; }
  .sit-points.cols-2 { columns: 1; }
  .sit-title { font-size: 23px; }
  .sit-num { font-size: 52px; }
  .sit-row { padding: 30px 24px; border-radius: 20px; }
  .sit-answer { padding-top: 24px; }
  .fabric-grid { grid-template-columns: 1fr; }
  .fabric-accent { padding: 32px 24px; border-radius: var(--border-radius--border-radius-sm); }
  .fabric-accent-title { font-size: 25px; }
  .fabric-accent-cta .button-primary { width: 100%; text-align: center; }

  /* На мобільному колонки стають одна під одною — жорстка висота фото не
     потрібна, форма дихає з рідним відступом. Фіксована ширина фото (536px)
     розсувала 1fr-колонку ширше за екран, тож секція вилазила за в'юпорт —
     тягнемо обидві колонки на 100% ширини. */
  .grid-quote { grid-template-columns: minmax(0, 1fr); }
  .quote-image-wrap { width: 100%; min-width: 0; }
  .quote-wrapper { padding: 28px 22px; min-width: 0; }
  .quote-image { aspect-ratio: 536 / 460; }
  /* Пара «Телефон + Послуга» та «Локація + Дата» на вузькому екрані стають
     одна під одною, щоб поля не стискались до нечитабельної ширини. */
  .quote-form-block .input-group-wrap { flex-direction: column; gap: 11px; }
  .quote-form-block .input-group-wrap .input-group { width: 100%; margin-bottom: 0; }
}

/* --- 18. Шапка на планшеті/мобільному -----------------------------------
   ВАЖЛИВО: ці правила мають бути в КІНЦІ файлу. Десктопне правило
   .grid-nav-white (секція 4) має ту саму специфічність, тож якщо помістити
   мобільний варіант вище — десктопний перебиває його і бургер з'їжджає.
   ---------------------------------------------------------------------- */
@media (max-width: 991px) {
  .grid-nav-white { grid-template-columns: 1fr auto; column-gap: 16px; }
  .menu-button { justify-self: end; }   /* інакше розтягується на всю колонку */
  .right-nav-white { display: none; }   /* CTA переїжджає в мобільне меню */
  .nav-mobile-cta { display: inline-block; margin-top: 14px; }

  /* Відкрите мобільне меню мусить мати суцільне тло ЗАВЖДИ. На прокрутці
     правило секції 4 (.navbar-white.scrolled .nav-menu-white) робить смугу
     прозорою — доречно для десктопної «пігулки», але відкрите мобільне меню
     тоді лягає прямо на контент сторінки без фону. Повертаємо тло + тінь. */
  .nav-menu-white[data-nav-menu-open],
  .navbar-white.scrolled .nav-menu-white[data-nav-menu-open] {
    background-color: var(--tm-sand);
    box-shadow: 0 16px 34px rgba(12,12,12,.18);
    border-radius: 0 0 var(--border-radius--border-radius) var(--border-radius--border-radius);
  }
}

/* --- 19. Вміщення меню у «пігулку» --------------------------------------
   8 пунктів проти 4 у шаблоні. Нижче ~1500px телефон і широкі відступи
   перестають вміщуватись, і крайні пункти обрізаються «нотчем».
   Має бути в кінці файлу — інакше десктопні правила секції 4 перебивають.
   ---------------------------------------------------------------------- */
@media (max-width: 1500px) {
  .right-nav-white .nav-phone { display: none; }
  .nav-menu-white { margin-left: 62px; margin-right: 62px; }
  .nav-link { font-size: 14.5px; margin-left: 7px; margin-right: 7px; }
}
@media (max-width: 1300px) {
  .nav-menu-white { margin-left: 58px; margin-right: 58px; }
  .nav-link { font-size: 13.5px; margin-left: 5px; margin-right: 5px; }
  .nav-button { font-size: 14px; padding-left: 20px; padding-right: 20px; }
}
/* Нижче ~1150px CTA у шапці вже не лишає місця меню. Ховаємо його —
   кнопка дублюється одразу в hero і в мобільному меню. */
@media (max-width: 1150px) {
  .right-nav-white { display: none; }
  .grid-nav-white { grid-template-columns: auto minmax(0,1fr); }
}

/* --- 20. Hero тільки на мобільному -------------------------------------- */
@media (max-width: 767px) {
  /* Хедер більший і з рівними відступами 16px від країв екрана
     (зверху й з боків). Чорний блок hero піднімаємо під самий верх, щоб
     логотип лежав на темному тлі, а не наполовину на піщаній смузі. */
  .hero-section { padding-top: 0; }
  .hero-wrap-split { margin-top: 0; padding-top: 92px; }
  .navbar-white { top: 16px; }
  .container.nav-container { padding-left: 16px; padding-right: 16px; }
  .logo { height: 42px; }
  /* Бургер був замалий (шаблонні 24px). Збільшуємо саму іконку й ціль дотику. */
  .menu-button { padding: 10px 8px; }
  .menu-button .w-icon-nav-menu { font-size: 36px; line-height: 1; color: #fff; }
  /* На прокрученій піщаній смузі — темний, як логотип і телефон (інакше білий
     бургер зникає на світлому тлі). */
  .navbar-white.scrolled .menu-button .w-icon-nav-menu { color: var(--tm-black); }

  /* Опис hero — дрібніший шрифт (крапку прибрано в HTML) */
  .hero-description { font-size: 15px; line-height: 1.5; }

  /* Обидві кнопки однакові й на всю ширину екрана */
  .hero-button-list { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
  .hero-button-list .button-primary,
  .hero-button-list .button-primary.w-button,
  .hero-button-list .button-outline-white {
    display: flex; align-items: center; justify-content: center; text-align: center;
    width: 100%; box-sizing: border-box; padding: 15px 24px; font-size: 16px;
  }

  /* Фото стелі прибираємо саме на мобільному — лишається лише картка квіза */
  .hero-image { display: none; }
  .hero-image-wrap { margin-top: 24px; border-radius: 0; overflow: visible; }
}

/* --- 21. Точкові правки мобільної версії (мають бути в кінці файлу, щоб
   перебивати правила секцій 991px тієї самої специфічності) --------------- */
@media (max-width: 767px) {
  /* Прибираємо підпис-таглайн у hero. */
  .hero-tagline { display: none; }

  /* (1) Hero: чорний блок з рівним відступом зверху/збоку (10px); шапці —
     бічний відступ. Хедер опущено на 16px нижче (10 + 16 = 26px). */
  .hero-wrap-split { margin-top: 10px; }
  .navbar-white { top: 26px; }
  .container.nav-container { padding-left: 20px; padding-right: 20px; }

  /* (1) Прокручена шапка на мобільному була надто тонкою смугою (~48px):
     логотип майже впритул до країв. Додаємо вертикальні поля, щоб пінната
     смуга «дихала» (~72px). Специфічніша за .container.nav-container (0,3,0),
     тож перебиває її горизонтальні поля, не займаючи їх. */
  .navbar-white.scrolled .nav-container { padding-top: 14px; padding-bottom: 14px; }

  /* (2) Ситуації: без накладання карток — звичайний стос (sticky прибрано,
     діють статичні правила секції 991px). */

  /* (3) СТА-ейброу «Попередній розрахунок за 1 хвилину» — в один рядок,
     але з жовтою рискою. */
  .tm-cta-eyebrow {
    white-space: nowrap; font-size: clamp(9px, 2.7vw, 12.5px);
    letter-spacing: .02em; gap: 8px; margin-bottom: 12px;
  }
  .tm-cta-eyebrow::before { display: block; width: 16px; }
  .tm-cta-plate h2 { font-size: 32px; line-height: 1.15; }

  /* (2) Блок «Наш досвід у цифрах»: усі три картки однакові — фото зверху,
     картка з числом + текстом знизу. Перевертаємо 1-шу і 3-тю пари, у яких
     фото стоїть після картки в розмітці, щоб фото було над карткою. */
  .grid-state .grid-state-item:nth-child(1),
  .grid-state .grid-state-item:nth-child(3) { flex-direction: column-reverse; }
  .state-image-wrap { flex: none; height: 280px; min-height: 0; }

  /* (3) Переваги: на мобільному лишаємо той самий бейдж-плиту з кутовим
     вирізом (shape-02) та іконкою, що й на десктопі — просто в один стовпчик.
     Не прибираємо плиту й фігури, щоб картки читались однаково на всіх ширинах. */

  /* (7) Відгуки: рейтингова плашка стає горизонтальною смугою над відгуками,
     нижче — стандартна каруселька з пагінацією. */
  .reviews-aside, .reviews-main { grid-column: auto; }
  .reviews-aside .rating-card {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
    text-align: left; gap: 12px 18px; padding: 20px 22px;
  }
  .reviews-aside .rating-score {
    display: flex; align-items: baseline; gap: 8px; flex: none;
    padding: 0; border-bottom: 0; text-align: left;
  }
  .reviews-aside .rating-score b { font-size: 40px; }
  .reviews-aside .rating-score span { margin-top: 0; text-align: left; }
  .reviews-aside .rating-body { flex: 1 1 130px; min-width: 130px; }
  .reviews-aside .rating-stars { justify-content: flex-start; margin-bottom: 6px; }
  .reviews-aside .rating-body p { margin: 0; font-size: 13.5px; }
  .reviews-aside .rating-note { display: none; }
  .reviews-aside .rating-card .button-primary { flex: 1 0 100%; width: 100%; }

  /* (4)+(8) FAQ: телефон по центру, шрифт питань — 18px, однакові вертикальні
     відступи навколо кожного питання (симетрично зверху й знизу). */
  .faq-sticky-wrap .hero-button-list { align-items: center; }
  .faq-sticky-wrap .dark-button-icon { justify-content: center; }
  .faq-section .service-accordion-title { font-size: 18px; }
  .faq-section .service-accordion-heading { padding: 16px 0; }
  .faq-section .service-accordion-divider { margin-top: 0; }

  /* (5) Форма заявки: більший відступ між полями й кнопкою «Надіслати». */
  .quote-form-block .button-full { margin-top: 22px; }

  /* (9) Блок «Отримайте розрахунок»: прибираємо зображення. */
  .quote-image-wrap { display: none; }

  /* (6) Футер, CTA-плита «Порахуємо вашу стелю сьогодні». Так само, як на
     десктопі: чорний футер — СУЦІЛЬНИЙ блок на всю ширину із заокругленим
     верхом, а жовта картка просто лежить зверху на межі піску й чорного.
     Жодних окремих «колон/вух» — вони й давали зламаний вигляд. */
  /* Збільшуємо піщаний зазор над чорним футером, щоб над карткою лишалося
     трохи піску (картка не налазить на форму), а чорне заходило рівно під
     нижню половину картки. */
  .footer { padding-top: 200px; }
  .footer-wrap {
    margin-left: 0; margin-right: 0; position: relative;
    border-radius: 40px 40px 0 0;                     /* заокруглений верх чорного блоку */
  }
  .footer-wrap > .container { padding-left: 20px; padding-right: 20px; }
  .footer-shape { display: none; }                    /* прибираємо гострі шаблонні філе */
  /* Картка «плаває» над межею: верхня частина на піску, нижня лежить на
     чорному футері. z-index — щоб була над чорним фоном. */
  .footer-cta-wrapper {
    margin-top: -170px; margin-left: 14px; margin-right: 14px;
    border-radius: 30px; position: relative; z-index: 2;
  }
  .footer-cta-wrap { position: relative; z-index: 2; border-radius: 30px; }

  /* Контент футера на мобільному — по центру. */
  .footer .grid-footer { text-align: center; }
  .footer-list-wrap { align-items: center; }
  .footer-meta-wrap { align-items: center; }
  .footer-meta-item { justify-content: center; }
  .footer-right-wrap { align-items: center; }
  .social-icon-wrap { justify-content: center; }
}

/* --- 22. Нижня навігація (лише моб) -------------------------------------
   Закріплена внизу екрана смуга з двома діями: чорна кнопка-телефон і широка
   жовта CTA «Розрахувати вартість». На десктопі прихована — там працює шапка. */
.tm-bottomnav { display: none; }

@media (max-width: 767px) {
  .tm-bottomnav {
    display: flex; align-items: stretch; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(12, 12, 12, .08);
    box-shadow: 0 -6px 26px rgba(12, 12, 12, .12);
    -webkit-tap-highlight-color: transparent;
  }
  /* Кнопка-телефон — компактна чорна, тягне номер із конфіга (data-phone-link). */
  .tm-bottomnav-phone {
    flex: none; width: 56px; display: flex; align-items: center; justify-content: center;
    border-radius: 14px; background: var(--tm-black); color: #fff; text-decoration: none;
  }
  .tm-bottomnav-phone svg { width: 24px; height: 24px; display: block; }
  .tm-bottomnav-phone:active { background: #262626; }
  /* Жовта CTA — головна дія, займає решту ширини. */
  .tm-bottomnav-cta {
    flex: 1; display: flex; align-items: center; justify-content: center;
    border-radius: 14px; padding: 14px 16px; text-align: center;
    background: var(--tm-yellow); color: var(--tm-black);
    font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap;
  }
  .tm-bottomnav-cta:active { background: #e6bd00; }

  /* Щоб бар не перекривав нижній контент — додаємо чорному футеру запас знизу. */
  .footer { padding-bottom: 84px; }
}

/* --- 23. Секція для дизайнерів та виконробів (B2B) ----------------------
   Редакторська, а не «карткова» розкладка: липка ліва колонка (позиція + теза
   + CTA) і права колонка з трьома технічними рядками 01–03 на тонких лініях,
   під ними — велика темна панель 04 «Тканинні стіни».

   Правила гри тут ті самі, що й на решті сайту:
   • жовтий лишається тонкою лінією та маркером (риски ейброу, лінія рядка на
     наведенні, підкреслення посилання) — жодних жовтих площин;
   • темна плита панелі 04 — той самий градієнт, що у .fabric-accent, тож два
     «тканинні» блоки читаються однією родиною;
   • нічого не з'являється лише на hover: у спокої весь текст на місці, а
     наведення додає прев'ю фото, зум і рух лінії.
   Має бути в КІНЦІ файлу: власні медіа-запити мусять іти після базових правил.
   ---------------------------------------------------------------------- */
.tm-pro { background: var(--tm-sand); }
/* Тонка лінія на всю ширину екрана — «розділювач глави». Вона ж технічна
   деталь у духі креслення: секція для професіоналів починається новим аркушем. */
.tm-pro { border-top: 1px solid rgba(12,12,12,.10); }

/* Асиметрія: ліва колонка вужча за праву (0.82 / 1.18). */
.tm-pro-grid {
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 80px; align-items: start;
}
/* Липка ліва колонка — той самий патерн, що у FAQ (.faq-sticky-wrap) та
   відгуках (.reviews-aside). Sticky стоїть на обгортці, а .tm-reveal — на
   внутрішньому блоці: transform на самому sticky-елементі не потрібен. */
.tm-pro-aside { position: sticky; top: 120px; }

.tm-pro-title { font-size: 41px; line-height: 1.1; margin: 0 0 20px; }
.tm-pro-lead { font-size: 16.5px; line-height: 1.75; color: var(--tm-gray); margin: 0 0 30px; max-width: 44ch; }

/* Ключова теза — жовта вертикальна лінія, як у .hero-accent, але на піску. */
.tm-pro-claim {
  margin: 0 0 32px; padding: 3px 0 3px 20px; border-left: 2px solid var(--tm-yellow);
  font-size: 19px; line-height: 1.45; font-weight: 700; letter-spacing: -.01em;
  color: var(--tm-black);
}

/* Аудиторія — технічний список на тонких лініях (маркер = жовтий штрих). */
.tm-pro-audience {
  list-style: none; margin: 0 0 36px; padding: 0;
  border-top: 1px solid rgba(12,12,12,.10);
}
.tm-pro-audience li {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid rgba(12,12,12,.10);
  font: 700 12.5px/1 Manrope, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tm-black);
}
.tm-pro-audience li::before { content: ""; flex: none; width: 16px; height: 2px; background: var(--tm-yellow); }

.tm-pro-cta { padding-top: 4px; }
/* Дві копії CTA: у лівій колонці (десктоп) і в кінці блоку (одноколонковий
   розклад). Видима завжди рівно одна — display:none прибирає другу і з
   дерева доступності, тож скрінрідер не чує кнопку двічі. */
.tm-pro-cta--end { display: none; }
/* Мікрокопі під CTA — одним рядком на десктопі (клієнт просив «одним реченням»,
   і розрив на два рядки читався як дві окремі фрази). Ширину не обмежуємо: на
   широких екранах речення вкладається в колонку, на вужчих переноситься само. */
.tm-pro-cta-note {
  margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--tm-gray);
  /* Якщо речення все ж не вміщається в рядок (вужчі екрани) — переносимо його
     рівними частинами, щоб воно читалося цілим, а не «обрубаним» після тире. */
  text-wrap: balance;
}

/* --- Рядки 01–03 --------------------------------------------------------
   Три колонки: великий тонкий номер / текст / прев'ю фото. Місце під прев'ю
   зарезервоване завжди, тож при наведенні нічого не «стрибає». */
.tm-pro-rows { border-bottom: 1px solid rgba(12,12,12,.12); }
.tm-pro-row {
  position: relative; display: grid; grid-template-columns: 96px minmax(0,1fr) 172px;
  gap: 28px; align-items: start; padding: 34px 0 36px;
  border-top: 1px solid rgba(12,12,12,.12);
}
/* Жовта лінія «прокреслюється» по верхній межі рядка — метафора світлової лінії. */
.tm-pro-row::after {
  content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px;
  background: var(--tm-yellow); transform: scaleX(0); transform-origin: left center;
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.tm-pro-row:hover::after { transform: scaleX(1); }

.tm-pro-num {
  font: 300 46px/1 Manrope, sans-serif; letter-spacing: -.03em; padding-top: 2px;
  color: rgba(12,12,12,.22); transition: color .45s ease;
}
.tm-pro-row:hover .tm-pro-num { color: var(--tm-black); }

.tm-pro-label {
  font: 800 12px/1 Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tm-gray); margin-bottom: 12px;
}
.tm-pro-row-title { font-size: 23px; line-height: 1.22; letter-spacing: -.02em; margin: 0 0 10px; }
.tm-pro-row-desc { font-size: 15.5px; line-height: 1.7; color: var(--tm-gray); margin: 0; max-width: 46ch; }

.tm-pro-row-media {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--tm-sand-dark);
  border-radius: var(--border-radius--border-radius-sm);
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.tm-pro-row:hover .tm-pro-row-media { opacity: 1; transform: none; }
.tm-pro-row-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.1); transition: transform .9s cubic-bezier(.2,.7,.3,1);
}
.tm-pro-row:hover .tm-pro-row-media img { transform: none; }

/* --- Панель 04 «Тканинні стіни» ----------------------------------------
   Головний акцент секції: велике фото з мінімальною типографікою поверх нього
   і темна плита з описом під ним. Той самий градієнт і скруглення, що у
   .fabric-accent — блоки одної родини. */
.tm-pro-feature {
  position: relative; margin-top: 46px; overflow: hidden; color: var(--tm-white);
  background: linear-gradient(157deg, #17160F 0%, #0A0A0A 60%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--border-radius--border-radius);
}
.tm-pro-feature-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.tm-pro-feature-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02); transition: transform 1.2s cubic-bezier(.2,.7,.3,1);
}
.tm-pro-feature:hover .tm-pro-feature-img { transform: scale(1.07); }
/* Знімки стель світлі, тож підкладка під типографіку мусить бути щільною:
   темно вгорі (під бейджем) і темно внизу (під номером 04). */
.tm-pro-feature-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,12,12,.58) 0%, rgba(12,12,12,.06) 34%, rgba(12,12,12,.78) 100%);
}
/* Світлова пляма за курсором — координати ставить app.js (лише мишка,
   лише без prefers-reduced-motion). Без JS блок просто не проявляється. */
.tm-pro-feature-glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .6s ease; mix-blend-mode: screen;
  background: radial-gradient(420px circle at var(--pro-lx, 72%) var(--pro-ly, 26%),
              rgba(255,255,255,.18), rgba(255,255,255,0) 62%);
}
.tm-pro-feature:hover .tm-pro-feature-glow { opacity: 1; }

.tm-pro-feature-badge {
  position: absolute; z-index: 2; top: 22px; right: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(12,12,12,.52); border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 800 11.5px/1 Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #fff;
}
.tm-pro-feature-badge::before { content: ""; flex: none; width: 16px; height: 2px; background: var(--tm-yellow); }

.tm-pro-feature-mark {
  position: absolute; z-index: 2; left: 34px; bottom: 28px;
  display: flex; align-items: flex-end; gap: 20px;
}
.tm-pro-feature-num { font: 300 72px/.82 Manrope, sans-serif; letter-spacing: -.04em; color: #fff; }
.tm-pro-feature-kicker {
  position: relative; padding-bottom: 9px;
  font: 800 13px/1 Manrope, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #fff;
}
.tm-pro-feature-kicker::before {
  content: ""; position: absolute; left: 0; top: -14px;
  width: 34px; height: 2px; background: var(--tm-yellow);
}

.tm-pro-feature-body { padding: 42px 44px 44px; }
.tm-pro-feature-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 12.5px/1 Manrope, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tm-yellow); margin-bottom: 18px;
}
.tm-pro-feature-eyebrow::before { content: ""; flex: none; width: 34px; height: 2px; background: var(--tm-yellow); }
.tm-pro-feature-title {
  color: var(--tm-white); font-size: 32px; line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 16px; max-width: 32ch;
}
.tm-pro-feature-desc {
  font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.66); margin: 0 0 28px;
  max-width: 64ch; transition: color .45s ease;
}
.tm-pro-feature:hover .tm-pro-feature-desc { color: rgba(255,255,255,.8); }

.tm-pro-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; padding: 0; }
.tm-pro-tags li {
  padding: 10px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  font: 700 12.5px/1 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.86);
  transition: border-color .4s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
/* Стриманий каскадний підйом — «дороге» мікровідчуття без анімаційного шуму. */
.tm-pro-feature:hover .tm-pro-tags li { border-color: rgba(255,208,0,.42); transform: translateY(-3px); }
.tm-pro-feature:hover .tm-pro-tags li:nth-child(2) { transition-delay: .06s; }
.tm-pro-feature:hover .tm-pro-tags li:nth-child(3) { transition-delay: .12s; }

.tm-pro-feature-link {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 7px;
  color: var(--tm-white); font: 700 15px Manrope, sans-serif; text-decoration: none;
}
.tm-pro-feature-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--tm-yellow); transform: scaleX(0); transform-origin: left center;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.tm-pro-feature:hover .tm-pro-feature-link::after,
.tm-pro-feature-link:focus-visible::after { transform: scaleX(1); }
.tm-pro-feature-link svg { flex: none; width: 18px; height: 18px; transition: transform .4s ease; }
.tm-pro-feature-link:hover svg { transform: translateX(5px); }

@media (max-width: 1200px) {
  .tm-pro-grid { gap: 56px; }
  .tm-pro-title { font-size: 36px; }
  .tm-pro-row { grid-template-columns: 80px minmax(0,1fr) 142px; gap: 22px; }
  .tm-pro-feature-body { padding: 36px 34px 38px; }
  .tm-pro-feature-title { font-size: 29px; }
}

/* Планшет і вузький ноутбук: одна колонка, але ієрархія збережена — панель 04
   лишається найважчим елементом. Порогом узято 1100px, а не 991px: у двох
   колонках нижче ~1100px текстова колонка рядків стискається так, що заголовки
   ламаються на 4 рядки. Прев'ю фото прибираємо — на тачі hover усе одно немає. */
@media (max-width: 1100px) {
  .tm-pro-grid { grid-template-columns: 1fr; gap: 46px; }
  .tm-pro-aside { position: static; }
  /* CTA переїжджає під панель «Тканинні стіни»: в один стовпчик кнопка з
     лівої колонки стояла в середині секції — читач бачив «Обговорити проєкт»
     ще до самих переваг. Тепер вона завершує блок. */
  .tm-pro-cta--aside { display: none; }
  /* Без розділювальної лінії: темна плита «Тканинних стін» і так закриває
     список переваг, а хайрлайн одразу під її скругленим краєм читався як
     випадкова риска. Відділяє саме відступ. */
  .tm-pro-cta--end { display: block; margin-top: 32px; padding-top: 0; }
  /* Список аудиторії стає останнім елементом лівої колонки — зайвий
     нижній відступ під ним більше не потрібен. */
  .tm-pro-audience { margin-bottom: 0; }
  .tm-pro-title { font-size: 34px; }
  .tm-pro-lead, .tm-pro-claim, .tm-pro-cta-note, .tm-pro-row-desc { max-width: none; }
  .tm-pro-row { grid-template-columns: 76px minmax(0,1fr); padding: 28px 0 30px; }
  .tm-pro-row-media { display: none; }
  .tm-pro-feature { margin-top: 38px; }
  .tm-pro-feature-mark { left: 26px; bottom: 22px; }
  .tm-pro-feature-num { font-size: 58px; }
  .tm-pro-feature-title { font-size: 27px; }
}

@media (max-width: 767px) {
  .tm-pro-title { font-size: 29px; }
  .tm-pro-lead { font-size: 15.5px; }
  .tm-pro-claim { font-size: 17px; margin-bottom: 28px; }
  .tm-pro-row { grid-template-columns: 56px minmax(0,1fr); gap: 16px; padding: 24px 0 26px; }
  .tm-pro-num { font-size: 36px; }
  .tm-pro-row-title { font-size: 20px; }
  .tm-pro-row-desc { font-size: 15px; }
  .tm-pro-cta .button-primary { display: block; width: 100%; text-align: center; }
  /* Ритм хвоста секції на телефоні: плита → 24px → кнопка → 12px → мікрокопі.
     Раніше між плитою і кнопкою було 66px (відступ + поле під лінію) — кнопка
     «відпливала» від блоку. */
  .tm-pro-cta--end { margin-top: 24px; }
  .tm-pro-cta--end .tm-pro-cta-note { margin-top: 12px; }
  /* Знизу секція теж дихала занадто: власні 50px плюс 120px верхнього поля
     блоку відгуків давали під кнопкою майже порожній екран. */
  .tm-pro.section-spacing { padding-bottom: 24px; }
  .tm-pro-feature { margin-top: 30px; border-radius: var(--border-radius--border-radius-sm); }
  /* Вертикальніший кадр — на телефоні фото мусить лишатися головним акцентом. */
  .tm-pro-feature-media { aspect-ratio: 4 / 3; }
  .tm-pro-feature-badge { top: 14px; right: 14px; padding: 8px 13px; font-size: 10.5px; letter-spacing: .12em; }
  .tm-pro-feature-mark { left: 20px; bottom: 18px; gap: 14px; }
  .tm-pro-feature-num { font-size: 46px; }
  .tm-pro-feature-kicker { font-size: 11.5px; letter-spacing: .16em; padding-bottom: 6px; }
  .tm-pro-feature-body { padding: 28px 22px 30px; }
  .tm-pro-feature-eyebrow { font-size: 11.5px; margin-bottom: 14px; }
  .tm-pro-feature-title { font-size: 23px; }
  .tm-pro-feature-desc { font-size: 15px; margin-bottom: 24px; }
  .tm-pro-tags { gap: 8px; margin-bottom: 26px; }
  .tm-pro-tags li { padding: 9px 14px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tm-pro-row::after, .tm-pro-row-media, .tm-pro-row-media img,
  .tm-pro-feature-img, .tm-pro-feature-glow, .tm-pro-tags li,
  .tm-pro-feature-desc, .tm-pro-feature-link::after, .tm-pro-feature-link svg { transition: none; }
  /* Без анімації прев'ю просто видиме, а не «схоплюється» на наведенні. */
  .tm-pro-row-media { opacity: 1; transform: none; }
  .tm-pro-row-media img, .tm-pro-feature-img { transform: none; }
  .tm-pro-feature:hover .tm-pro-feature-img { transform: none; }
  .tm-pro-feature:hover .tm-pro-tags li { transform: none; }
}

/* --- 23. Плаваюче відео (кутовий програвач) -----------------------------
   Вертикальний огляд об’єкта, закріплений у лівому нижньому куті: їде зі
   сторінкою під час скролу. З’являється не одразу — щоб не перекривати
   hero й не сперечатися з прелоадером. Візуально це та сама мова, що й
   решта сайту: чорна рамка, брендовий радіус, тонка ЖОВТА лінія прогресу
   як метафора світлової лінії (див. .tm-rule, .tm-proof-stat).
   Розмітку створює app.js → initFloatingVideo(). */
.tm-fv {
  position: fixed; z-index: 940;
  left: 26px; bottom: 26px;
  width: 196px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--tm-black);
  box-shadow: 0 18px 44px rgba(12, 12, 12, .34), 0 2px 8px rgba(12, 12, 12, .2);
  /* Стартовий стан — картка відсунута за край і прозора; клас .in вмикає її. */
  opacity: 0; transform: translate3d(-24px, 16px, 0) scale(.96);
  transition: opacity .42s ease, transform .42s cubic-bezier(.22, .8, .28, 1);
  -webkit-tap-highlight-color: transparent;
}
.tm-fv.in { opacity: 1; transform: none; }
/* Закриття: картка їде вниз і зникає, потім JS ставить hidden. */
.tm-fv.out { opacity: 0; transform: translate3d(0, 24px, 0) scale(.94); pointer-events: none; }

/* Кадр вертикальний 9:16 — рівно як у знятому оригіналі (1080×1920), тож
   нічого не обрізаємо. Спершу тут був квадрат: перше джерело, яке дав
   клієнт, було квадратним ре-експортом того самого ролика з білими полями
   з боків, і саме через нього губилися верх і низ кадру. */
.tm-fv-frame {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: var(--tm-black);
  aspect-ratio: 9 / 16; cursor: pointer;
}
.tm-fv-frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Легка градієнтна підкладка знизу — під підпис і кнопку звуку. */
.tm-fv-frame::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(180deg, rgba(12,12,12,0) 0%, rgba(12,12,12,.62) 100%);
  pointer-events: none;
}

/* Підпис-заклик у нижньому лівому куті кадру. */
.tm-fv-cap {
  position: absolute; z-index: 2; left: 11px; bottom: 12px; right: 44px;
  display: flex; align-items: center; gap: 7px;
  color: #fff; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
  text-shadow: 0 1px 6px rgba(12,12,12,.6);
  pointer-events: none;
}
.tm-fv-cap svg { width: 13px; height: 13px; flex: none; fill: var(--tm-yellow); }

/* Кнопка звуку — прозорий кружечок у правому нижньому куті кадру. */
.tm-fv-sound {
  position: absolute; z-index: 3; right: 9px; bottom: 9px;
  width: 30px; height: 30px; padding: 0; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff;
  background: rgba(12, 12, 12, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s ease, color .2s ease;
}
.tm-fv-sound svg { width: 15px; height: 15px; display: block; fill: currentColor; }
.tm-fv-sound:hover { background: var(--tm-yellow); color: var(--tm-black); }

/* Хрестик — виносимо на саму картку, як у референсі. */
.tm-fv-close {
  position: absolute; z-index: 4; top: 8px; right: 8px;
  width: 26px; height: 26px; padding: 0; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-size: 17px; line-height: 1;
  background: rgba(12, 12, 12, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s ease, color .2s ease;
}
.tm-fv-close:hover { background: #fff; color: var(--tm-black); }

/* Тонка жовта лінія прогресу по низу картки — фірмовий мотив. */
.tm-fv-bar {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255, 255, 255, .18);
}
.tm-fv-bar i {
  display: block; height: 100%; width: 0;
  background: var(--tm-yellow); transform-origin: 0 50%;
}

/* --- Вікно розгорнутого відео ------------------------------------------- */
/* Використовує ту саму механіку .tm-modal (.open + html.modal-open). */
/* Вікно веде ВИСОТА, а не ширина: кадр вертикальний 9:16, тож на звичайному
   ноутбуці саме висота вікна впирається першою — при ширині 520 px кадр був
   би 924 px завдовжки і не вліз би. Тому головний доданок у min() — це
   (доступна висота)×9/16, а 520 px лише страхує великі монітори.
   Заодно це тримає масштаб: при висоті вікна ~890 CSS px кадр показується
   приблизно 500×890, тобто на retina ~1000×1780 фізичних — менше за
   нативні 1080×1920 файлу. Отже браузер його ЗМЕНШУЄ, а не розтягує, і
   різкість оригіналу зберігається. Не збільшувати 520 без потреби. */
.tm-vmodal-card {
  position: relative; z-index: 1;
  width: min(calc((100vh - 64px) * 9 / 16), calc(100vw - 32px), 520px);
  border-radius: var(--border-radius--border-radius, 20px);
  overflow: hidden; background: var(--tm-black);
  box-shadow: 0 30px 80px rgba(12, 12, 12, .5);
}
.tm-vmodal-stage { position: relative; width: 100%; aspect-ratio: 9 / 16; background: var(--tm-black); }
.tm-vmodal-stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
.tm-vmodal-close {
  position: absolute; z-index: 2; top: 10px; right: 10px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(12, 12, 12, .55); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tm-vmodal-close:hover { background: #fff; color: var(--tm-black); }

@media (max-width: 991px) {
  .tm-fv { width: 158px; left: 18px; bottom: 18px; border-radius: 15px; }
  .tm-fv-cap { font-size: 10px; left: 9px; bottom: 10px; right: 40px; letter-spacing: .06em; }
}

/* На мобільному внизу стоїть закріплена смуга .tm-bottomnav — піднімаємо
   картку над нею, інакше вона перекриє головну CTA. */
@media (max-width: 767px) {
  .tm-fv {
    width: 128px; left: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
  .tm-fv-close { width: 24px; height: 24px; font-size: 15px; top: 6px; right: 6px; }
  .tm-fv-sound { width: 26px; height: 26px; right: 7px; bottom: 7px; }
  .tm-fv-sound svg { width: 13px; height: 13px; }
  .tm-fv-cap { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tm-fv { transition: opacity .2s linear; transform: none; }
  .tm-fv.in { transform: none; }
  .tm-fv.out { transform: none; }
}