/* ============================
   ПЕРЕМЕННЫЕ (ЦВЕТА И НАСТРОЙКИ)
============================ */
:root {
  --primary: #2d3748;              /* Тёмно-синий цвет для футера */
  --accent: #d97706;               /* Оранжевый акцентный цвет */
  --accent-hover: #b45309;         /* Тёмно-оранжевый для ховера */
  --bg: #fdfbf7;                   /* Светло-бежевый фон страницы */
  --bg-card: #ffffff;              /* Белый фон карточек */
  --text: #1a202c;                 /* Тёмный цвет текста */
  --text-muted: #718096;           /* Серый цвет для второстепенного текста */
  --border: rgba(0,0,0,0.08);      /* Полупрозрачная граница */
  
  --font-head: 'Playfair Display', serif;  /* Шрифт для заголовков */
  --font-body: 'Inter', sans-serif;        /* Шрифт для основного текста */
  
  --radius: 16px;                  /* Скругление углов */
  --shadow: 0 10px 30px rgba(0,0,0,0.06);      /* Тень для карточек */
  --shadow-hover: 0 20px 40px rgba(0,0,0,0.12); /* Тень при наведении */
  --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Плавная анимация */
  --container: 1200px;             /* Максимальная ширина контейнера */
}

/* ============================
   СБРОС СТИЛЕЙ
============================ */
*, *::before, *::after { 
  box-sizing: border-box;  /* Включает padding и border в общую ширину элемента */
  margin: 0;               /* Убирает внешние отступы */
  padding: 0;              /* Убирает внутренние отступы */
}

html { 
  scroll-behavior: smooth;  /* Плавная прокрутка при клике на якорные ссылки */
}

/* ============================
   BODY (ОСНОВНОЙ КОНТЕЙНЕР)
============================ */
body {
  font-family: var(--font-body);              /* Применяем шрифт Inter */
  background: var(--bg);                      /* Светло-бежевый фон */
  color: var(--text);                         /* Тёмный текст */
  line-height: 1.6;                           /* Межстрочный интервал */
  overflow-x: hidden;                         /* Скрываем горизонтальную прокрутку */
  -webkit-font-smoothing: antialiased;        /* Сглаживание шрифтов для iOS */
  
  /* ОТСТУПЫ ДЛЯ iOS (ЧЁЛКА И НИЖНЯЯ ПАНЕЛЬ) */
  padding-top: env(safe-area-inset-top);         /* Отступ сверху под чёлку iPhone */
  padding-bottom: env(safe-area-inset-bottom);   /* Отступ снизу под панель Home */
}

/* ============================
   ИЗОБРАЖЕНИЯ И ССЫЛКИ
============================ */
img { 
  max-width: 100%;           /* Картинки не выходят за пределы родителя */
  height: auto;              /* Сохраняем пропорции */
  display: block;            /* Убираем отступы под картинками */
  object-fit: cover;         /* Заполняем область без искажений */
}

a { 
  text-decoration: none;     /* Убираем подчёркивание ссылок */
  color: inherit;            /* Наследуем цвет текста */
  transition: var(--transition);  /* Плавная анимация при наведении */
}

ul { 
  list-style: none;          /* Убираем маркеры списков */
}

/* ============================
   CONTAINER (ОГРАНИЧИТЕЛЬ ШИРИНЫ)
============================ */
.container {
  max-width: var(--container);                    /* Макс. ширина 1200px */
  margin: 0 auto;                                 /* Центрируем контейнер */
  /* Отступы по бокам с учётом safe area для iOS */
  padding: 0 max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
}

.section { 
  padding: 100px 0;    /* Вертикальные отступы секции 100px */
}

/* ============================
   КНОПКИ (UI COMPONENTS)
============================ */
.btn {
  display: inline-flex;              /* Flexbox для центрирования содержимого */
  align-items: center;               /* Вертикальное центрирование */
  justify-content: center;           /* Горизонтальное центрирование */
  padding: 16px 32px;                /* Внутренние отступы: 16px сверху/снизу, 32px по бокам */
  font-size: 0.95rem;                /* Размер шрифта */
  font-weight: 500;                  /* Жирность шрифта */
  border-radius: 50px;               /* Сильное скругление (овальная кнопка) */
  cursor: pointer;                   /* Курсор-рука при наведении */
  transition: var(--transition);     /* Плавная анимация */
  border: 1px solid transparent;     /* Прозрачная граница (резервируем место) */
  letter-spacing: 0.5px;             /* Межбуквенный интервал */
  min-height: 50px;                  /* Минимальная высота для удобного тапа на iOS */
}

/* Основная кнопка (оранжевая) */
.btn--primary { 
  background: var(--accent);   /* Оранжевый фон */
  color: #fff;                 /* Белый текст */
}

.btn--primary:hover { 
  background: var(--accent-hover);           /* Тёмно-оранжевый при наведении */
  transform: translateY(-3px);               /* Приподнимаем кнопку на 3px */
  box-shadow: 0 10px 20px rgba(217, 119, 6, 0.25);  /* Тень под кнопкой */
}

/* Прозрачная кнопка с белой рамкой */
.btn--outline { 
  background: transparent;                   /* Прозрачный фон */
  border: 1px solid #fff;                    /* Белая рамка */
  color: #fff;                               /* Белый текст */
  backdrop-filter: blur(4px);                /* Размытие фона под кнопкой */
}

.btn--outline:hover { 
  background: #fff;    /* Белый фон при наведении */
  color: var(--text);  /* Тёмный текст при наведении */
}

/* ============================
   ЗАГОЛОВКИ
============================ */
h1, h2, h3 { 
  font-family: var(--font-head);   /* Шрифт Playfair Display */
  font-weight: 700;                /* Жирный */
  line-height: 1.2;                /* Межстрочный интервал */
}

h1 { 
  font-size: clamp(2.5rem, 6vw, 4.5rem);  /* Адаптивный размер: мин 2.5rem, макс 4.5rem */
  margin-bottom: 1.5rem;                    /* Отступ снизу */
  word-break: break-word;                   /* Перенос длинных слов */
}

h2 { 
  font-size: clamp(2rem, 4vw, 3rem);  /* Адаптивный размер */
  text-align: center;                  /* Центрируем */
  margin-bottom: 1rem;                 /* Отступ снизу */
}

h3 { 
  font-size: 1.5rem;    /* Фиксированный размер */
  margin-bottom: 0.5rem; /* Отступ снизу */
}

/* Основной текст абзаца */
p { 
  color: var(--text-muted);   /* Серый цвет */
  margin-bottom: 1.5rem;      /* Отступ снизу */
  font-size: 1.05rem;         /* Размер шрифта */
}

/* Подзаголовок секции */
.section-sub { 
  text-align: center;      /* Центрируем */
  max-width: 600px;        /* Максимальная ширина */
  margin: 0 auto 3.5rem;   /* Центрируем + отступ снизу 3.5rem */
  font-size: 1.1rem;       /* Размер шрифта */
}

/* ============================
   АНИМАЦИЯ ПОЯВЛЕНИЯ ПРИ СКРОЛЛЕ
============================ */
.reveal { 
  opacity: 0;                           /* Скрыто по умолчанию */
  transform: translateY(40px);          /* Сдвинуто вниз на 40px */
  transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);  /* Плавное появление */
}

.reveal.active { 
  opacity: 1;                /* Видимо */
  transform: translateY(0);  /* На своём месте */
}

/* ============================
   HEADER (ШАПКА САЙТА)
============================ */
header {
  position: fixed;           /* Фиксируем при прокрутке */
  top: 0;                    /* Прижимаем к верху */
  left: 0;                   /* Прижимаем к левому краю */
  right: 0;                  /* Прижимаем к правому краю */
  z-index: 1000;             /* Поверх всего контента */
  padding: 20px 0;           /* Отступы сверху/снизу */
  transition: var(--transition);  /* Плавное изменение */
}

/* Хедер при прокрутке (добавляется класс JS-ом) */
header.scrolled {
  background: rgba(253, 251, 247, 0.95);  /* Полупрозрачный бежевый фон */
  backdrop-filter: blur(12px);             /* Размытие контента под хедером */
  padding: 15px 0;                         /* Уменьшаем отступы */
  box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Лёгкая тень */
}

/* Внутренний контейнер хедера */
.nav-inner { 
  display: flex;                    /* Flexbox */
  justify-content: space-between;   /* Логотип слева, меню справа */
  align-items: center;              /* Вертикальное центрирование */
}

/* Логотип */
.logo {
  font-family: var(--font-head);   /* Playfair Display */
  font-size: 1.6rem;               /* Размер шрифта */
  font-weight: 700;                /* Жирный */
  color: var(--text);              /* Тёмный цвет */
  position: relative;              /* Для позиционирования */
  z-index: 1001;                   /* Поверх меню на мобильных */
}

.logo span { 
  color: var(--accent);    /* Оранжевый цвет для слова "Travel" */
}

/* Навигационные ссылки */
.nav-links { 
  display: flex;    /* Горизонтальное меню */
  gap: 32px;        /* Расстояние между пунктами 32px */
}

.nav-links a { 
  font-size: 0.95rem;           /* Размер шрифта */
  font-weight: 500;             /* Полужирный */
  position: relative;           /* Для позиционирования подчёркивания */
}

/* Анимированное подчёркивание ссылок */
.nav-links a::after {
  content: '';                   /* Псевдоэлемент */
  position: absolute;            /* Абсолютное позиционирование */
  bottom: -4px;                  /* Чуть ниже текста */
  left: 0;                       /* Слева */
  width: 0;                      /* Изначально невидимо */
  height: 2px;                   /* Толщина линии 2px */
  background: var(--accent);     /* Оранжевый цвет */
  transition: var(--transition); /* Плавная анимация */
}

.nav-links a:hover::after { 
  width: 100%;    /* При наведении линия растягивается на всю ширину */
}

/* Кнопка-бургер (меню на мобильных) */
.burger {
  display: none;                 /* Скрыто на десктопе */
  background: none;              /* Без фона */
  border: none;                  /* Без рамки */
  color: var(--text);            /* Тёмный цвет иконки */
  cursor: pointer;               /* Курсор-рука */
  font-size: 1.8rem;             /* Размер иконки */
  z-index: 1001;                 /* Поверх меню */
  padding: 5px;                  /* Небольшой отступ */
  line-height: 1;                /* Убираем лишние отступы */
}

/* ============================
   HERO (ГЛАВНЫЙ ЭКРАН)
============================ */
.hero {
  position: relative;            /* Для позиционирования псевдоэлементов */
  height: 100vh;                 /* Высота на весь экран */
  min-height: 750px;             /* Минимальная высота 750px */
  display: flex;                 /* Flexbox */
  align-items: center;           /* Вертикальное центрирование */
  justify-content: center;       /* Горизонтальное центрирование */
  overflow: hidden;              /* Скрываем всё, что выходит за границы */
  text-align: center;            /* Центрируем текст */
  color: #fff;                   /* Белый текст */
  z-index: 1;                    /* Слой */
}

/* Фоновое изображение героя */
.hero-bg {
  position: absolute;            /* Абсолютное позиционирование */
  inset: 0;                      /* Растягиваем на весь parent (top:0, right:0, bottom:0, left:0) */
  z-index: -2;                   /* Самый нижний слой */
  background: url('../img/hero-bg.jpg') center/cover no-repeat;  /* Картинка по центру, масштаб cover */
  will-change: transform;        /* Оптимизация для parallax эффекта */
}

/* Затемняющий градиент поверх фона */
.hero::before {
  content: '';                   /* Пустой псевдоэлемент */
  position: absolute;            /* Абсолютное позиционирование */
  inset: 0;                      /* На весь экран */
  z-index: -1;                   /* Поверх фона, но под контентом */
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);  /* Градиент от прозрачного к чёрному */
}

/* Контейнер контента героя */
.hero-content {
  position: relative;            /* Для z-index */
  z-index: 2;                    /* Поверх градиента */
  max-width: 900px;              /* Максимальная ширина */
  padding: 20px;                 /* Внутренние отступы */
}

/* Подзаголовок героя */
.hero-sub {
  font-size: 1.2rem;             /* Размер шрифта */
  margin-bottom: 2rem;           /* Отступ снизу */
  color: rgba(255,255,255,0.9);  /* Почти белый цвет */
  font-weight: 300;              /* Тонкий шрифт */
}

/* Контейнер кнопок */
.hero-actions {
  display: flex;                 /* Flexbox */
  gap: 12px;                     /* Расстояние между кнопками */
  justify-content: center;       /* Центрируем */
  flex-wrap: wrap;               /* Перенос на новую строку если не помещается */
}

/* Статистика под кнопками */
.hero-stats {
  margin-top: 4rem;              /* Отступ сверху */
  display: flex;                 /* Flexbox */
  justify-content: center;       /* Центрируем */
  gap: 40px;                     /* Расстояние между элементами */
  flex-wrap: wrap;               /* Перенос */
}

/* Элемент статистики */
.stat {
  text-align: center;            /* Центрируем текст */
  border-left: 1px solid rgba(255,255,255,0.3);  /* Вертикальная разделительная линия */
  padding-left: 20px;            /* Отступ слева */
}

/* Первый элемент статистики (без левой границы) */
.stat:first-child { 
  border-left: none;    /* Убираем линию */
  padding-left: 0;      /* Убираем отступ */
}

/* Число в статистике */
.stat__num {
  font-family: var(--font-head);   /* Playfair Display */
  font-size: 2rem;                 /* Крупный размер */
  color: #fff;                     /* Белый цвет */
  display: block;                  /* Блочный элемент */
  font-weight: 700;                /* Жирный */
}

/* Подпись под числом */
.stat__label {
  font-size: 0.85rem;              /* Мелкий текст */
  text-transform: uppercase;       /* Заглавные буквы */
  letter-spacing: 1px;             /* Увеличенный интервал */
  color: rgba(255,255,255,0.7);    /* Полупрозрачный белый */
}

/* ============================
   КАРТОЧКИ (DESTINATIONS)
============================ */
.card-grid {
  display: grid;                              /* CSS Grid */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  /* Адаптивные колонки: минимум 300px */
  gap: 24px;                                  /* Расстояние между карточками */
}

/* Отдельная карточка */
.card {
  background: var(--bg-card);    /* Белый фон */
  border-radius: var(--radius);  /* Скругление 16px */
  overflow: hidden;              /* Обрезаем всё, что выходит за границы */
  box-shadow: var(--shadow);     /* Тень */
  transition: var(--transition); /* Плавная анимация */
  display: flex;                 /* Flexbox */
  flex-direction: column;        /* Вертикальное расположение */
}

.card:hover { 
  transform: translateY(-8px);           /* Приподнимаем на 8px */
  box-shadow: var(--shadow-hover);       /* Усиливаем тень */
}

/* Контейнер для картинки карточки */
.card__img {
  height: 240px;               /* Фиксированная высота */
  width: 100%;                 /* Полная ширина */
  overflow: hidden;            /* Обрезаем */
  background: #e2e8f0;         /* Серый фон (заглушка) */
}

.card__img img {
  width: 100%;                 /* На всю ширину */
  height: 100%;                /* На всю высоту */
  transition: var(--transition); /* Плавное увеличение */
}

.card:hover .card__img img { 
  transform: scale(1.05);    /* Увеличиваем картинку на 5% */
}

/* Контент карточки */
.card__content {
  padding: 24px;               /* Внутренние отступы */
  flex: 1;                     /* Занимает всё доступное пространство */
  display: flex;               /* Flexbox */
  flex-direction: column;      /* Вертикально */
}

/* Теги (метки) карточки */
.card__tags { 
  display: flex;               /* Flexbox */
  gap: 8px;                    /* Расстояние между тегами */
  margin-bottom: 12px;         /* Отступ снизу */
}

/* Отдельный тег */
.tag {
  font-size: 0.75rem;          /* Мелкий текст */
  text-transform: uppercase;   /* Заглавные буквы */
  letter-spacing: 0.5px;       /* Интервал */
  color: var(--accent);        /* Оранжевый цвет */
  font-weight: 600;            /* Полужирный */
}

/* Описание карточки */
.card__desc { 
  font-size: 0.95rem;          /* Размер шрифта */
  margin-bottom: 1.5rem;       /* Отступ снизу */
  flex: 1;                     /* Растягивается */
}

/* Подвал карточки */
.card__footer {
  display: flex;                    /* Flexbox */
  justify-content: space-between;   /* Цена слева, кнопка справа */
  align-items: center;              /* Вертикальное центрирование */
  border-top: 1px solid var(--border);  /* Верхняя граница */
  padding-top: 16px;                /* Отступ сверху */
}

/* Цена */
.price {
  font-family: var(--font-head);   /* Playfair Display */
  font-size: 1.4rem;               /* Крупный текст */
  color: var(--text);              /* Тёмный цвет */
}

.price span {
  font-size: 0.9rem;               /* Мелкий текст */
  color: var(--text-muted);        /* Серый цвет */
  font-family: var(--font-body);   /* Inter */
}

/* ============================
   ПРЕИМУЩЕСТВА (FEATURES)
============================ */
.features-grid {
  display: grid;                              /* Grid */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  /* Адаптивные колонки */
  gap: 32px;                                  /* Расстояние */
}

/* Отдельная фича */
.feature {
  text-align: center;            /* Центрируем текст */
  padding: 32px 20px;            /* Внутренние отступы */
  background: #fff;              /* Белый фон */
  border-radius: var(--radius);  /* Скругление */
  border: 1px solid var(--border);  /* Лёгкая рамка */
  transition: var(--transition); /* Анимация */
}

.feature:hover { 
  border-color: var(--accent);        /* Оранжевая рамка */
  transform: translateY(-5px);        /* Приподнимаем */
}

/* Иконка фичи */
.feature__icon {
  font-size: 2.5rem;             /* Крупный размер эмодзи */
  margin-bottom: 16px;           /* Отступ снизу */
  display: block;                /* Блочный элемент */
}

/* ============================
   ЦЕНЫ (PRICING)
============================ */
.pricing-grid {
  display: grid;                              /* Grid */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));  /* Адаптивные колонки */
  gap: 24px;                                  /* Расстояние */
  align-items: center;                        /* Вертикальное выравнивание */
}

/* Карточка цены */
.price-card {
  background: #fff;              /* Белый фон */
  padding: 40px 32px;            /* Внутренние отступы */
  border-radius: var(--radius);  /* Скругление */
  border: 1px solid var(--border);  /* Рамка */
  transition: var(--transition); /* Анимация */
  position: relative;            /* Для абсолютного позиционирования бейджа */
}

.price-card:hover { 
  border-color: var(--accent);        /* Оранжевая рамка */
  box-shadow: var(--shadow-hover);    /* Тень */
}

/* Выделенная карточка (популярный тариф) */
.price-card--featured {
  border: 2px solid var(--accent);        /* Жирная оранжевая рамка */
  transform: scale(1.05);                 /* Увеличиваем на 5% */
  z-index: 2;                             /* Поверх остальных */
  background: #fff;                       /* Белый фон */
  box-shadow: var(--shadow-hover);        /* Тень */
}

/* Бейдж "Хит продаж" */
.price-card__badge {
  position: absolute;            /* Абсолютное позиционирование */
  top: -12px;                    /* Чуть выше карточки */
  right: 24px;                   /* Справа */
  background: var(--accent);     /* Оранжевый фон */
  color: #fff;                   /* Белый текст */
  padding: 4px 12px;             /* Внутренние отступы */
  border-radius: 20px;           /* Сильное скругление */
  font-size: 0.75rem;            /* Мелкий текст */
  font-weight: 600;              /* Полужирный */
  text-transform: uppercase;     /* Заглавные буквы */
}

/* Список преимуществ тарифа */
.price-card__list { 
  margin: 24px 0;    /* Отступы сверху и снизу */
}

.price-card__list li {
  margin-bottom: 12px;             /* Отступ между пунктами */
  display: flex;                   /* Flexbox */
  align-items: center;             /* Вертикальное центрирование */
  gap: 10px;                       /* Расстояние между галочкой и текстом */
  font-size: 0.95rem;              /* Размер текста */
  color: var(--text-muted);        /* Серый цвет */
}

.price-card__list li::before { 
  content: '✓';             /* Галочка */
  color: var(--accent);     /* Оранжевый цвет */
  font-weight: bold;        /* Жирная */
}

/* Заголовок тарифа */
.price-card__title { 
  font-size: 1.8rem;       /* Крупный текст */
  margin-bottom: 8px;      /* Отступ снизу */
}

/* Цена тарифа */
.price-card__amount {
  font-size: 2.5rem;             /* Очень крупный текст */
  font-family: var(--font-head); /* Playfair Display */
  color: var(--accent);          /* Оранжевый */
  margin-bottom: 16px;           /* Отступ снизу */
}

.price-card__amount span {
  font-size: 1rem;               /* Обычный размер */
  color: var(--text-muted);      /* Серый */
  font-family: var(--font-body); /* Inter */
}

/* ============================
   ГАЛЕРЕЯ
============================ */
.gallery-grid {
  display: grid;                              /* Grid */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  /* Адаптивные колонки */
  gap: 16px;                                  /* Расстояние */
}

/* Элемент галереи */
.gallery-item {
  border-radius: var(--radius);  /* Скругление */
  overflow: hidden;              /* Обрезаем */
  height: 300px;                 /* Фиксированная высота */
  background: #e2e8f0;           /* Серый фон (заглушка) */
}

.gallery-item img {
  width: 100%;                 /* На всю ширину */
  height: 100%;                /* На всю высоту */
  transition: var(--transition); /* Плавное увеличение */
}

.gallery-item:hover img { 
  transform: scale(1.1);    /* Увеличиваем на 10% */
}

/* ============================
   ФОРМА КОНТАКТОВ
============================ */
.contact-box {
  background: #fff;              /* Белый фон */
  padding: 48px;                 /* Внутренние отступы */
  border-radius: var(--radius);  /* Скругление */
  box-shadow: var(--shadow);     /* Тень */
  max-width: 700px;              /* Максимальная ширина */
  margin: 0 auto;                /* Центрируем */
}

/* Строка формы (два поля в ряд) */
.form-row {
  display: flex;                 /* Flexbox */
  gap: 16px;                     /* Расстояние между полями */
  margin-bottom: 16px;           /* Отступ снизу */
}

/* Поле ввода */
.form-input {
  flex: 1;                       /* Растягивается */
  padding: 16px;                 /* Внутренние отступы */
  background: var(--bg);         /* Бежевый фон */
  border: 1px solid var(--border);  /* Лёгкая рамка */
  border-radius: 8px;            /* Скругление */
  font-size: 1rem;               /* Размер шрифта */
  outline: none;                 /* Убираем стандартную обводку */
  transition: var(--transition); /* Плавное изменение */
}

.form-input:focus { 
  border-color: var(--accent);   /* Оранжевая рамка при фокусе */
  background: #fff;              /* Белый фон */
}

/* Текстовое поле (textarea) */
.form-textarea {
  width: 100%;                   /* На всю ширину */
  padding: 16px;                 /* Внутренние отступы */
  background: var(--bg);         /* Бежевый фон */
  border: 1px solid var(--border);  /* Рамка */
  border-radius: 8px;            /* Скругление */
  font-size: 1rem;               /* Размер шрифта */
  resize: vertical;              /* Можно растягивать только по вертикали */
  min-height: 120px;             /* Минимальная высота */
  outline: none;                 /* Убираем обводку */
  transition: var(--transition); /* Анимация */
  font-family: var(--font-body); /* Шрифт Inter */
}

.form-textarea:focus { 
  border-color: var(--accent);   /* Оранжевая рамка */
  background: #fff;              /* Белый фон */
}

/* ============================
   FOOTER (ПОДВАЛ)
============================ */
footer {
  background: var(--primary);    /* Тёмно-синий фон */
  color: #fff;                   /* Белый текст */
  padding: 60px 0 30px;          /* Отступы: 60px сверху, 30px снизу */
}

/* Сетка футера */
.footer-grid {
  display: grid;                              /* Grid */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  /* Адаптивные колонки */
  gap: 40px;                                  /* Расстояние */
  margin-bottom: 40px;                        /* Отступ снизу */
}

/* Колонка футера */
.footer-col h4 {
  font-family: var(--font-head);   /* Playfair Display */
  font-size: 1.3rem;               /* Размер */
  margin-bottom: 20px;             /* Отступ снизу */
}

.footer-col a {
  display: block;              /* Блочный элемент */
  color: rgba(255,255,255,0.7);  /* Полупрозрачный белый */
  margin-bottom: 10px;         /* Отступ снизу */
}

.footer-col a:hover { 
  color: var(--accent);    /* Оранжевый при наведении */
}

/* Нижняя полоса футера */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);  /* Полупрозрачная линия сверху */
  padding-top: 30px;             /* Отступ сверху */
  text-align: center;            /* Центрируем */
  color: rgba(255,255,255,0.5);  /* Полупрозрачный белый */
  font-size: 0.9rem;             /* Мелкий текст */
}

/* ============================
   МОБИЛЬНАЯ ВЕРСИЯ И iOS FIXES
============================ */
@media (max-width: 768px) {
  /* Хедер фиксированный и плотный */
  header {
    position: fixed !important;
    top: 0 !important;
    background: #fdfbf7 !important;
    padding: 12px 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    z-index: 1000 !important;
  }

  /* HERO: ровно высота экрана, без лишних +px */
  .hero {
    min-height: 100vh !important;
    padding-top: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрируем всё по вертикали */
  }

  /* Отступ только для текста, чтобы уйти от хедера */
  .hero-content {
    padding-top: 150px !important;
    padding-bottom: 20px;
  }

  /* Уплотняем внутренние отступы, чтобы статистика влезла */
  .hero-sub { margin-bottom: 1rem; font-size: 0.95rem; }
  .hero-actions { margin-top: 1rem; gap: 10px; }
  .hero-stats { margin-top: 1.5rem; gap: 15px; }
  
  .stat { 
    border-left: none; 
    padding-left: 0; 
    border-bottom: 1px solid rgba(255,255,255,0.2); 
    padding-bottom: 8px; 
    width: 100%; 
  }
  .stat__num { font-size: 1.6rem; }
  .stat__label { font-size: 0.7rem; }

  /* Меню и остальные элементы */
  .nav-links { 
    position: fixed; top: 0; right: -100%; width: 75%; height: 100vh; 
    background: #fff; flex-direction: column; padding: 90px 25px 30px;
    transition: var(--transition); box-shadow: -10px 0 30px rgba(0,0,0,0.1); z-index: 1000;
  }
  .nav-links.open { right: 0; }
  .burger { 
  display: block !important; 
  font-size: 0.9rem !important; /* Визуально в 2 раза меньше */
  padding: 2px !important;      /* Компенсируем отступы, чтобы оставалось кликабельным */
}
  
  .hero-actions .btn { width: 100%; max-width: 280px; min-height: 48px; font-size: 0.95rem; }
  .price-card--featured { transform: none; }
  .form-row { flex-direction: column; }
  .btn { min-height: 48px; font-size: 0.95rem; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item { height: 180px; }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item { height: 220px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .contact-box { padding: 24px; }
}