/* =========================================
   ГЛОБАЛЬНІ НАЛАШТУВАННЯ СКРОЛУ
   ========================================= */
html {
  scroll-behavior: smooth;
  
  /* Відступ, щоб фіксований хедер не перекривав контент при скролі. 
     Якщо твій хедер вищий/нижчий, підкоригуй це значення */
  scroll-padding-top: 100px; 
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* =========================================
   1. ГЛОБАЛЬНІ ЗМІННІ
   ========================================= */
:root {
  --green: #012921;
  --mint: #CCEDD0;
  --white: #FCFFF2;
}

/* =========================================
   2. CSS ОБНУЛЕННЯ
   ========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================================
   2.1. ТИПОГРАФІКА (Desktop First)
   ========================================= */

/* Заголовки (Inter) */
.text-h1, .text-h2, .text-h3, .text-label {
  font-family: 'Inter', sans-serif;
  font-style: normal;
}

/* Наборний текст (Mulish) */
.text-body-m, .text-body-s {
  font-family: 'Mulish', sans-serif;
  font-style: normal;
}

/* --- DESKTOP СТИЛІ --- */

.text-h1 {
  font-size: 116px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -5.8px;
}

.text-h2 {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -2.5px;
}

.text-h3 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.6px;
}

.text-body-m {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.05; /* Увага: раджу замінити на 1.4 */
  letter-spacing: -1.1px; /* Увага: раджу замінити на 0 */
}

.text-body-s {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.05; /* Увага: раджу замінити на 1.4 */
  letter-spacing: -0.8px; /* Увага: раджу замінити на 0 */
}

.text-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1; 
  letter-spacing: 0;
}

/* --- MOBILE СТИЛІ (Адаптив під екрани < 768px) --- */

@media (max-width: 768px) {
  .text-h1 {
    font-size: 64px;
    letter-spacing: -3.2px;
  }

  .text-h2 {
    font-size: 32px;
    letter-spacing: -1.6px;
  }

  .text-h3 {
    font-size: 24px;
    letter-spacing: -1.2px;
  }

  .text-body-m {
    font-size: 16px;
    letter-spacing: -0.8px;
  }

  .text-body-s {
    font-size: 14px;
    letter-spacing: -0.7px;
  }
}

/* =========================================
   ГЛОБАЛЬНІ КОМПОНЕНТИ (Buttons)
   ========================================= */

/* Базовий стиль для всіх кнопок */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  
  /* Типографіку кнопка успадкує від класу .text-label, який ти їй задаси в HTML */
}

/* Модифікатор: Світла (М'ятна) кнопка, як у хедері */
.btn--dark {
  background-color: var(--green);
  border: 1.5px solid var(--green);
  color: var(--white);
}
.btn--dark:hover {
  background-color: transparent;
  color: var(--green);
}

/* Контурна кнопка (I need legal help / marketing) */
.btn--outline {
  background-color: transparent;
  border: 1.5px solid var(--green);
  color: var(--green);
}
.btn--outline:hover {
  background-color: var(--green);
  color: var(--white);
}

.btn--mint {
  background-color: var(--mint); /* Твій світло-зелений */
  border: 1.5px solid var(--mint);
  color: var(--green); /* Темний текст */
}

/* Hover-стан для м'ятної кнопки (з макета) */
.btn--mint:hover {
  background-color: transparent; /* Робимо фон прозорим */
  color: var(--mint); /* Текст стає м'ятним */
}

/* =========================================
   3. ЛЕЙАУТ (СІТКА)
   ========================================= */
.services {
  padding: 64px 64px; /* Відступи секції: 80px зверху/знизу, 20px з боків */
  display: flex;
  justify-content: center; /* Центруємо контейнер по горизонталі */
}

.services__container {
  width: 100%;
  max-width: 1200px; /* Максимальна ширина контенту як у Фігмі */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 рівні колонки */
  gap: 32px; /* Відстань між картками */
}

/* =========================================
   4. КОМПОНЕНТ: КАРТКА ПОСЛУГ (Спільні стилі)
   ========================================= */
.card {
    display: flex;
    height: 550px;
    padding: 32px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;

    /* Налаштування фонового зображення (щоб не плющило) */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card__title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 0px;
}

.card__subtitle {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 0px;
}

.card__description {
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 0px;
  line-height: 1.5;
}

.card__button {
  padding: 16px 40px;
  border-radius: 6px;
  border: 1.5px solid currentColor; /* Бере колір від батьківського елемента */
  text-decoration: none;
  font-weight: 500;
  text-align: center;
  width: fit-content;
  transition: all 0.3s ease; /* Плавна анімація при наведенні */
}

/* =========================================
   5. УНІКАЛЬНІ СТИЛІ КАРТОК (Модифікатори)
   ========================================= */

/* Темна картка (Legal) */
.card--legal {
  color: var(--white); /* Увесь текст всередині стає білим */
  background-image: 
    linear-gradient(202deg, rgba(1, 41, 33, 0.30) 11.33%, #012921 91.02%),
    url('assets/legal-card-image.webp'); /* Встав правильну назву темної картинки */
}

.card--legal .card__button {
  color: var(--white);
  border-color: var(--white);
}

.card--legal .card__button:hover {
  background: var(--white);
  color: var(--green); 
}

/* Світла картка (Marketing) */
.card--marketing {
  color: var(--green); /* Увесь текст всередині стає зеленим */
  background-image: 
    linear-gradient(157deg, rgba(204, 237, 208, 0.30) 10.26%, #CCEDD0 89.74%),
    url('assets/marketing-card-image.webp'); /* Встав правильну назву світлої картинки */
}

.card--marketing .card__button {
  color: var(--green);
  border-color: var(--green);
}

.card--marketing .card__button:hover {
  background: var(--green);
  color: var(--white); 
}

/* =========================================
   6. ХЕДЕР (Навігація)
   ========================================= */

.header {
  width: 100%;
  background-color: var(--green); /* Темно-зелений фон хедера */
  position: sticky; /* Щоб хедер прилипав при скролі (опціонально) */
  top: 0;
  z-index: 100;
}

/* Твій Auto Layout з Фігми */
.header__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  display: flex; /* Вирівнює SVG всередині посилання */
  align-items: center;
}

.header__logo img {
  height: 36px; /* Заміни 48px на реальну висоту лого з Фігми */
  width: auto;  /* Пропорційно зберігає ширину */
}

.header__menu {
  display: flex;
  align-items: center;
  gap: 32px; /* Відстань між лінками - підправ під свій макет */
  list-style: none;
}

.header__link {
  text-decoration: none;
  color: var(--white);
  transition: opacity 0.3s ease;
}

.header__link:hover {
  opacity: 0.7; /* Твоє "трішки підсвічуються" */
}

/* Ховаємо мобільні елементи на десктопі */
.header__burger {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 24px;
  cursor: pointer;
}
.header__cta--mobile {
  display: none;
}
.header__cta--desktop {
  display: inline-flex;
}

/* --- (Глобально) БУРГЕР МЕНЮ --- */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6); /* Темний фон */
  z-index: 90; /* Під хедером, але над сайтом */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.menu-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* --- АДАПТИВ ДЛЯ МОБІЛЬНОГО (Менше 768px) --- */
@media (max-width: 768px) {
  
  /* Додаємо зміну відступів для мобільного контейнера хедера */
  .header__container {
    padding: 16px 12px; 
  }
  
  /* 1. Ховаємо десктопну кнопку */
  .header__cta--desktop {
    display: none;
  }

  /* 2. Показуємо іконку бургера */
  .header__burger {
    display: block;
    z-index: 101; /* Щоб бургер (і хрестик) завжди був поверх меню */
  }

  /* 3. Показуємо кнопку всередині мобільного меню */
  .header__cta--mobile {
    display: inline-flex;
    justify-content: center;
    width: 100%;
  }

  /* 4. код для випадаючого меню */
  .header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: auto;
    background-color: var(--green);
    padding: 16px 20px 48px 20px;
    display: flex;
    flex-direction: column;
    
    transform: translateY(-20px); 
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    z-index: 100; /* Меню над оверлеєм */
  }

  .header__nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .header__menu {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin-bottom: 48px;
  }
}

/* =========================================
   7. HERO СЕКЦІЯ
   ========================================= */
.hero {
  width: 100%;
  background-color: var(--white); 
}

.hero__container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: stretch; /* Змушує обидві колонки бути однакової висоти */
  min-height: 800px; /* Замість жорсткого height даємо гнучкий min-height */
}

/* Ліва колонка */
.hero__content {
  flex: 1;
  padding-left: 64px; /* Твій відступ з макета */
  padding-right: 40px; /* Внутрішній відступ до фотографії */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  color: var(--green);
}

/* Обгортка для кнопок, щоб вони не злипалися */
.hero__buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap; /* Дозволяє кнопкам переноситись на новий рядок, якщо не влазять */
}

/* Права колонка */
.hero__image {
  /* Займає всю праву половину і виходить за межі max-width контейнера вправо */
  flex: 1;
  height: 800px; /* Підганяй під потрібну висоту */
  margin-right: calc((100vw - 100%) / -2); /* Магія CSS: виштовхує блок до краю екрана */
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Картинка заповнить блок, не спотворюючи пропорції */
}

/* =========================================
   8. СЕКЦІЯ SERVICES (What brings you here)
   ========================================= */

.services {
  width: 100%;
  padding: 64px 0 144px 0; /* 64px зверху, 0 з боків, 144px знизу (64px паддінг + 80px геп до наступної секції) */
  display: flex;
  justify-content: center;
  background-color: var(--white);
}

.services__container {
  width: 100%;
  max-width: 1440px; /* Тримаємо одну лінію з хедером і Hero */
  padding: 0 64px; /* Твої 64px з боків з макета */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* Твій gap між заголовком і картками */
}

/* Текстовий блок по центру */
.services__header {
  text-align: center;
  max-width: 700px; /* Обмежуємо ширину, щоб текст гарно переносився */
  display: flex;
  flex-direction: column;
  gap: 16px; /* Відступ між H2 та підзаголовком */
  color: var(--green);
}

/* Сітка з картками */
.services__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px; /* Відстань між картками */
}

/* =========================================
   9. СЕКЦІЯ SERVICES DETAILS (Картки 2x2)
   ========================================= */

.services-details {
  width: 100%;
  padding: 64px 0;
  display: flex;
  justify-content: center;
  background-color: var(--white); /* Колір фону секції, зміни якщо треба бежевий */
}

.services-details__container {
  width: 100%;
  max-width: 1440px;
  padding: 0 64px; /* Бічні відступи */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px; /* Твій gap між заголовком і контентом */
}

.services-details__header {
  text-align: center;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--green);
}

/* Розділяємо на дві рівні половини (Legal та Marketing) */
.services-details__split {
  width: 100%;
  display: flex;
  gap: 64px; /* Відстань між колонкою Legal та Marketing */
  align-items: flex-start;
}

/* Стилі для однієї великої колонки */
.services-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center; /* Центруємо кнопку і заголовок */
  gap: 32px; /* Відстань між заголовком H3, сіткою і кнопкою */
}

.services-column__title {
  color: var(--green);
}

/* Сітка 2x2 всередині колонки */
.services-column__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px; /* Відстань між маленькими картками (підбери по макету, зазвичай 16-24px) */
}

/* =========================================
   ГЛОБАЛЬНИЙ КОМПОНЕНТ: МАЛА КАРТКА
   ========================================= */
.service-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 12px;
  gap: 16px;
  background-color: var(--mint);
  border: 1px solid var(--green);
  border-radius: 4px;
  color: var(--green);
}

.service-card__title {
  width: 100%;
  min-height: 68px; /* Твоя вимога, але безпечна для переповнення */
  /* Оскільки тут display не flex, текст буде йти зверху вниз. 
     Якщо треба центрувати по вертикалі - скажи. */
}

.service-card__text {
  /* Додатково можемо трохи приглушити колір, якщо треба */
  color: var(--green);
}

/* =========================================
   10. СЕКЦІЯ WHY CHOOSE US
   ========================================= */

.why-us {
  width: 100%;
  padding: 64px 0;
  display: flex;
  justify-content: center;
  background-color: var(--white);
}

.why-us__container {
  width: 100%;
  max-width: 1440px;
  padding: 0 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* Відступ між заголовком і спліт-блоком */
}

.why-us__header {
  text-align: center;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--green);
}

/* Обгортка для темної картки та фотографії */
.why-us__content {
  width: 100%;
  display: flex;
  align-items: stretch; /* Робить обидві колонки однакової висоти */
  border-radius: 4px; /* Легке заокруглення кутів, як на макеті */
  overflow: hidden; /* Щоб картинка не вилазила за кути */
}

/* Ліва половина (Темна картка) */
.why-us__card {
  flex: 1;
  background-color: var(--green);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Магія Auto-відступу */
  align-items: flex-start;
  min-height: 560px; /* Забезпечує висоту блоку */
}

.why-us__logo {
  height: 64px; /* Підправ під реальний розмір монограми */
  width: auto;
}

.why-us__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  color: var(--white); /* Білий текст на темному фоні */
}

/* Права половина (Фото) */
.why-us__image {
  flex: 1;
  background-color: #D9D9D9; /* Сіра пустишка */
  display: flex;
  justify-content: center;
  align-items: center;
}

.why-us__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================
   11. СЕКЦІЯ PROCESS
   ========================================= */

.process {
  width: 100%;
  background-color: var(--white); /* Фон поза карткою, якщо потрібен */
  display: flex;
  justify-content: center;
}

.process__container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto; /* Центрує весь блок по центру екрану */
  padding: 128px 0; /* Якщо хочеш, щоб блок бив прямо в краї екрану, зміни на: padding: 128px 0; */
}

/* Обгортка, відносно якої центрується слово Process */
.process__box {
  display: flex;
  width: 100%;
  position: relative; /* КРИТИЧНО: База для абсолютного елемента */
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--green); /* Фон для правої частини */
}

/* МАГІЯ ПЕРЕТИНУ */
.process__label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg); 
  color: var(--white);
  z-index: 10;
  white-space: nowrap; /* КРИТИЧНО: Забороняє слову переноситись на новий рядок перед обертанням */
  pointer-events: none;
}

/* Ліва половина (Фото) */
.process__image {
  flex: 0 0 50%; /* Жорстко фіксуємо 50% ширини */
  max-width: 50%;
  display: flex;
}

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

/* Права половина (Контент) */
.process__content {
  flex: 0 0 50%; /* Жорстко фіксуємо 50% ширини */
  max-width: 50%;
  padding: 64px 64px 64px 120px; 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px; 
  color: var(--white);
}

/* Блок з кроками */
.process__steps {
  display: flex;
  flex-direction: column;
  gap: 32px; /* Відстань між окремими кроками */
}

.step {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Відстань між цифрою і описом кроку */
}

.step__desc {
  opacity: 0.8; /* Трохи приглушуємо додатковий текст, як на макеті */
}

/* =========================================
   12. СЕКЦІЯ FINAL CTA
   ========================================= */

.final-cta {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: var(--white); 
}

.final-cta__container {
  width: 100%;
  max-width: 1440px;
  padding: 128px 64px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Тримає логотип зверху */
  gap: 64px;
}

/* Ліва частина: Текст і кнопка */
.final-cta__text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Кнопка і текст по лівому краю */
  gap: 32px;
}

.final-cta__title {
  display: flex;
  flex-direction: column;
  color: var(--green);
}

.final-cta__title .step-1 { padding-left: 0; }
.final-cta__title .step-2 { padding-left: 50%; }
.final-cta__title .step-3 { padding-left: 100%; }
.final-cta__title .step-4 { padding-left: 150%; }

.final-cta__subtitle {
  color: var(--green);
  padding-left: 0; /* Вирівняно по лівому краю */
  margin-bottom: 8px; /* Додатковий простір перед кнопкою */
}

/* Права частина: Лого */
.final-cta__logo-box {
  display: flex;
  justify-content: flex-end;
}

.final-cta__logo-box img {
  height: 48px;
  width: auto;
}

/* =========================================
   13. ФУТЕР
   ========================================= */

.footer {
  width: 100%;
  background-color: var(--green); /* Темний фон */
  display: flex;
  justify-content: center;
}

.footer__container {
  width: 100%;
  max-width: 1440px;
  padding: 128px 64px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* Притискає лого і списки до однієї нижньої лінії */
}

/* Логотип */
.footer__logo {
  display: flex;
}

.footer__logo img {
  height: 120px; /* Заміни на реальну висоту логотипу з Фігми, на око він тут масивний */
  width: auto;
}

/* Списки посилань (центральний і правий) */
.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px; /* Відстань між рядками, перевір у макеті */
}

.footer__list a {
  text-decoration: none;
  color: var(--mint); /* Або var(--white), залежно від точного кольору в макеті */
  transition: opacity 0.3s ease;
}

.footer__list a:hover {
  opacity: 0.7;
}

/* --- ПЛАНШЕТНИЙ АДАПТИВ ДЛЯ FINAL CTA (до 1024px) --- */
@media (max-width: 1024px) {
  .final-cta__container {
    padding: 96px 32px;
  }

  /* Зменшуємо зсув сходинок, щоб текст не вилітав за екран */
  .final-cta__title .step-1 { padding-left: 0; }
  .final-cta__title .step-2 { padding-left: 8%; }
  .final-cta__title .step-3 { padding-left: 16%; }
  .final-cta__title .step-4 { padding-left: 24%; }

  /* Трохи зменшуємо розмір заголовка на планшетах, якщо він розпирає контейнер */
  .final-cta__title {
    font-size: clamp(36px, 6vw, 64px); 
  }
}

/* =========================================
   14. АДАПТИВ (MOBILE - екрани < 768px)
   ========================================= */

@media (max-width: 768px) {
  
  /* --- HERO SECTION --- */
  
  .hero__container {
    flex-direction: column; /* Ставимо колонки одну під одною */
    min-height: auto; /* Знімаємо десктопну висоту 800px */
    /* Даємо 24px зверху/знизу, але 0 по боках, щоб картинка стала на всю ширину */
    padding: 24px 0; 
    gap: 24px;
  }

  .hero__content {
    /* Додаємо твої 12px марджину/паддінгу ТІЛЬКИ для тексту */
    padding: 0 12px; 
    align-items: flex-end; /* Твоє налаштування з Фігми */
    gap: 24px;
  }

  .hero__content .text-h1 {
    width: 100%;
    align-self: flex-start; /* Примусово повертаємо заголовок наліво */
  }

  .hero__content .text-body-m {
    width: 100%;
    text-align: right; /* Вирівнюємо абзац по правому краю, як на макеті */
  }

  .hero__buttons {
    width: 100%;
    flex-direction: column; /* Ставимо кнопки у стовпчик */
    gap: 12px;
  }

  .hero__buttons .btn {
    width: 100%; /* Розтягуємо кнопки на всю доступну ширину */
  }

  .hero__image {
    width: 100%;
    height: 350px; /* Оскільки це мобільний, задаємо фіксовану висоту для фото */
  }
  
  /* --- СЕКЦІЯ SERVICES (What brings you here) --- */
  
  .services {
    padding: 48px 0 64px 0; /* Зменшуємо гігантські десктопні відступи зверху і знизу */
  }

  .services__container {
    padding: 0 12px; /* Твій відступ з макета */
    gap: 24px;
  }

  .services__grid {
    grid-template-columns: 1fr; /* Картки стають одна під одною */
    gap: 24px;
  }

  .card {
    padding: 24px; /* Зменшуємо внутрішній відступ картки для малих екранів (на десктопі було 40px) */
    min-height: auto; /* Дозволяємо картці розтягуватись по контенту */
  }

  .card__button {
    width: 100%; /* Розтягуємо кнопку на всю доступну ширину */
  }
  /* --- СЕКЦІЯ SERVICES DETAILS (Картки-слайдер) --- */
  
  .services-details {
    padding: 48px 0;
  }

  .services-details__container {
    padding: 0 12px;
    gap: 32px; /* Твій gap з ТЗ */
  }

  .services-details__split {
    flex-direction: column; /* Колонки Legal і Marketing стають одна під одною */
    gap: 48px; /* Відстань між двома великими блоками */
    width: 100%;
  }

  .services-column {
    width: 100%;
    align-items: flex-start; /* Вирівнюємо заголовки по лівому краю, як на макеті */
    gap: 16px; 
  }

  /* --- МАГІЯ СЛАЙДЕРА (Горизонтальний скрол) --- */
  .services-column__grid {
    display: flex; /* Змінюємо Grid на Flex для горизонтального скролу */
    flex-wrap: nowrap; /* Забороняємо карткам переноситись на новий рядок */
    overflow-x: auto; /* Вмикаємо горизонтальний скрол */
    scroll-snap-type: x mandatory; /* Вмикаємо "примагнічування" карток */
    width: 100%;
    gap: 12px; /* Відстань між картками в слайдері */
    padding-bottom: 8px; /* Запас знизу, щоб бордери не обрізались браузером */
    
    /* Ховаємо системний скролбар для естетики */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .services-column__grid::-webkit-scrollbar {
    display: none; /* Ховаємо скролбар для Chrome/Safari */
  }

  .service-card {
    /* Робимо картку шириною 85% від екрану. 
       Це змусить наступну картку "виглядати" з-за правого краю, підказуючи, що тут є скрол */
    flex: 0 0 85%; 
    scroll-snap-align: start; /* При скролі картка рівно примагнічується до лівого краю */
  }

  /* Кнопка на всю ширину */
  .services-column .btn {
    width: 100%;
    margin-top: 16px; /* Додатковий відступ між слайдером і кнопкою (сумарно дасть твої 32px) */
  }
  /* --- СЕКЦІЯ WHY CHOOSE US --- */
  
  .why-us {
    padding: 48px 0;
  }

  .why-us__container {
    padding: 0 12px;
    gap: 16px; /* Твій відступ між заголовком і контентом */
  }

  .why-us__content {
    /* Магія: ставимо колонки в стовпчик, але в ЗВОРОТНОМУ порядку (фото стає зверху) */
    flex-direction: column-reverse; 
  }

  .why-us__image {
    width: 100%;
    height: 320px; /* Фіксуємо висоту фотографії для мобільного */
  }

  .why-us__card {
    padding: 32px 24px; /* Зменшуємо величезні десктопні відступи */
    min-height: auto; /* Дозволяємо картці стиснутись по контенту */
  }

  .why-us__logo {
    display: none; /* Ховаємо логотип, оскільки його немає на мобільному макеті */
  }

  .why-us__text {
    width: 100%;
  }

  /* Перевизначаємо стиль кнопки під мобільний макет (робимо контурною) */
  .why-us__text .btn {
    width: 100%;
    background-color: transparent;
    border-color: var(--mint);
    color: var(--mint);
    margin-top: 8px; /* Додатковий відступ для кнопки */
  }

  /* --- СЕКЦІЯ PROCESS (Мобільна версія) --- */
  
  .process {
    padding: 48px 0;
  }

  .process__container {
    padding: 0 0px; 
  }

  .process__box {
    flex-direction: column; 
    background-color: transparent;
  }

  .process__image {
    width: 100%;
    max-width: 100%; /* Скидаємо десктопні 50% */
    flex: auto; /* Скидаємо десктопну жорстку фіксацію flex */
    height: 350px; 
  }

  .process__content {
    width: 100%;
    max-width: 100%; /* Скидаємо десктопні 50% */
    flex: auto; 
    background-color: var(--green); /* Рятуємо білий текст, заливаючи фон зеленим */
    padding: 64px 24px 32px 24px; 
    gap: 32px;
  }

  .process__content .btn {
    width: 100%;
  }

  .process__label {
    position: absolute;
    left: 50%;
    top: 350px;
    transform: translate(-50%, -50%) rotate(0deg); 
    font-size: 48px; 
    letter-spacing: -2px;
  }

  .process__steps {
    gap: 24px;
  }
  
/* --- СЕКЦІЯ FINAL CTA (Фікс для Safari) --- */
  
  .final-cta {
    padding: 48px 0;
    width: 100%;
    overflow: hidden; /* Перестраховка від вильоту слів за межі секції */
  }

  .final-cta__container {
    padding: 0 12px;
    flex-direction: column-reverse; 
    gap: 48px;
    width: 100%;
    max-width: 100vw; /* Фіксуємо ширину строго по вікну перегляду */
  }

  .final-cta__text-content {
    width: 100%;
    gap: 24px;
  }

  .final-cta__title {
    width: 100%;
  }

  /* Замість % використовуємо фіксовані px для мобільного, щоб next фізично не міг вилетіти за 320px-390px екран */
  .final-cta__title span {
    display: block;
    white-space: nowrap; /* Забороняємо переноси всередині слів */
  }

  .final-cta__title .step-1 { padding-left: 0; }
  .final-cta__title .step-2 { padding-left: 24px; }
  .final-cta__title .step-3 { padding-left: 48px; }
  .final-cta__title .step-4 { padding-left: 72px; }

  .final-cta__subtitle {
    padding-left: 0;
  }

  .final-cta__btn {
    width: 100%;
    margin-top: 16px;
  }

  .final-cta__logo-box {
    width: 100%;
    justify-content: flex-end;
  }

  /* --- ФУТЕР (Мобільна версія) --- */
  
  .footer {
    padding: 0;
  }

  .footer__container {
    flex-direction: column; /* Ставимо всі елементи футера у вертикальний стовпчик */
    align-items: flex-start; /* Вирівнюємо по лівому краю */
    padding: 96px 12px; /* Твої відступи з макета */
    gap: 64px; /* Твій gap між блоками */
  }

  /* Логотип переносимо вниз, як на макеті */
  .footer__logo {
    order: 3; /* Ставимо його третім (останнім) у списку */
  }

  .footer__logo img {
    height: 80px; /* Трохи адаптуємо розмір логотипу під екран телефону */
  }

  /* Навігація стає першою */
  .footer__nav {
    order: 1;
    width: 100%;
  }

  /* Блок з політиками стає другим */
  .footer__legal {
    order: 2;
    width: 100%;
  }

  /* Налаштування списків для мобільного */
  .footer__list {
    gap: 24px; /* Збільшуємо відстань між посиланнями для зручності тапання */
  }

}