/* Сброс стилей */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* ВАЖНО: Отступы и рамки теперь включаются в ширину элемента, а не добавляются к ней */
}


body {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  line-height: 1.6;
  background-color: #f4e2b7; /* Общий фон для страницы, чтобы переходы были без швов */
}

/* Шрифты */
h1, h2, h3 {
  font-family: 'Helvetica', sans-serif;
}

/* Header */
header {
  background-color: #000000;
  position: sticky;
  top: 0;
  z-index: 999;
  padding: 1rem 0;
  width: 100%;
}

/* 1. Делаем NAV контейнером для позиционирования */
header nav {
  position: relative; /* Это ключ к новому расположению! */
  display: flex;
  justify-content: flex-end; /* Все элементы по умолчанию прижимаем вправо */
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 40px; /* Задаем фиксированную высоту для стабильного позиционирования */
}

/* 2. Позиционируем меню абсолютно по центру */
header nav ul {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Магическая формула центрирования */
  
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0; /* Убираем возможные отступы у списка */
}

/* Ссылки меню с подчеркиванием (остается как было) */
header nav ul li a {
  position: relative;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  padding-bottom: 5px;
  transition: color 0.3s ease;
}

header nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #fff;
  transition: width 0.3s ease-out;
}

header nav ul li a:hover {
  color: #fff;
}

header nav ul li a:hover::after {
  width: 100%;
}

/* 3. Правая группа (иконки + кнопка) остается без изменений */
.nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.social-icons {
  display: flex;
  gap: 0.8rem;
}

.social-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

.social-icon img {
  width: 28px;
  height: 28px;
  display: block;
}

.social-icon:hover {
  transform: scale(1.1);
}

/* Кнопка "Связаться" (остается как было) */
.contact-button {
  display: inline-block;
  background-color: #4a250b;
  color: #fff;
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* 4. ДОБАВЛЯЕМ ЭФФЕКТЫ ДЛЯ КНОПКИ "СВЯЗАТЬСЯ" */
.contact-button {
    position: relative; /* Добавляем для позиционирования линии */
    padding-bottom: calc(0.6rem + 5px); /* Увеличиваем нижний отступ, чтобы было место для линии */
    padding-top: calc(0.6rem - 5px); /* Уменьшаем верхний, чтобы кнопка не стала выше */
}

.contact-button:hover {
  background-color: #6a4a3a;
  transform: scale(1.05);
}

/* Линия для кнопки "Связаться" */
.contact-button::after {
  content: '';
  position: absolute;
  bottom: 5px; /* Располагаем линию чуть выше нижнего края кнопки */
  left: 50%;
  transform: translateX(-50%); /* Центрируем линию */
  width: 0; /* Изначально невидима */
  height: 2px;
  background-color: #fff; /* Белая линия на темном фоне */
  transition: width 0.3s ease-out;
}

.contact-button:hover::after {
  width: 80%; /* Растягиваем на 80% ширины, чтобы не вылезала за текст */
}

/* Hero Section */
.hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.hero-container {
  max-width: 1200px;
  display: flex;
  gap: 4rem;
}

.hero-text {
  position: absolute;
  flex: 1;
  text-align: left;
}

.hero-text h1 {
  position: absolute;
  left: -650px;
  top: -250px;
  font-size: 5rem;
  line-height: 1.2; 
  margin-bottom: -40px;
  color: #fff;
}

.hero-text p {
  position: absolute;
  left: -650px;
  top: -40px;
  font-size: 1.5rem;
  margin-bottom: 100px;
  color: #ccc;
}

/* About Me Section */
.about-me {
  background-color: #f4e2b7;
  padding: 2rem 0;
  position: relative;
}

.about-me::before {
  content: "";
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 100%;
  height: 50px;
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.about-title {
  font-size: 3rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: #3d2c22;
}

.about-subtitle {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: #3d2c22;
}

.about-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  color: #3d2c22;
}

.about-left, .about-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.9rem;
}

.aboutMe{
  position: relative;
  top: 300px;
}

.about-image1, .about-image2, .about-image3 {
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}
.about-image1 { max-width: 200px; height: auto; top: -100px; left: -10px; }
.about-image2 { max-width: 200px; height: auto; top: -100px; right: -100px; }
.about-image3 { max-width: 500px; height: 300px; top: 100px; right: 350px; }

.about-rightArrow{ max-width: 250px; height: 250px; position: relative; top: -550px; right: 150px; }
.about-leftArrow { max-width: 150px; height: 150px; position: relative; top: -125px; left: 120px; transform: rotate(-15deg); }
.arrow-text { font-size: 0.9rem; text-align: center; position: relative; top: 50px; right: -220px; }
.highlighted-text { font-size: 0.9rem; text-align: justify; position: relative; top: -100px; right: -100px; }

/* Services Section */
.services {
  background-color:#3d2c22;
  padding: 4rem 2rem;
  text-align: center
}

.services-title {
  font-size: 3rem;
  margin-bottom: 2rem;
  color: #fff;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  align-items: start; /* <-- ДОБАВЛЕНО: Выравниваем карточки по верхнему краю */
}

/* Стили для карточки-ссылки */
.service-card {
  display: block;
  text-decoration: none; /* Убираем стандартное подчеркивание */
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.5s ease;
  cursor: pointer;
}

/* Убираем синий цвет у текста внутри карточки-ссылки */
.service-card,
.service-card .service-title,
.service-card .service-text {
  color: #fff; /* Устанавливаем белый цвет для всего текста */
}

/* Остальные стили для контента остаются без изменений */
.service-card:hover { transform: scale(1.05); }
.service-image { width: 100%; object-fit: cover; /* Замените contain на cover для лучшего вида */ aspect-ratio: 1 / 1.2; /* Зададим пропорции, чтобы картинки были одинаковой высоты */ }
.service-content { padding: 1.5rem 1rem; }
.service-title { font-size: 1.5rem; margin-bottom: 0.5rem; text-transform: uppercase; }
.service-text { font-size: 1rem; color: #ccc; }


/* =================================== */
/* ====== СТИЛИ ДЛЯ БЛОКА СЪЕМКА ====== */
/* =================================== */
/* =================================== */
/* ====== СТИЛИ ДЛЯ БЛОКА СЪЕМКА (ИСПРАВЛЕНО) ====== */
/* =================================== */

/* =================================== */
/* ====== ФИНАЛЬНЫЕ СТИЛИ ДЛЯ БЛОКА "СЪЕМКА" ====== */
/* =================================== */

.shooting-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.shooting-section {
  padding: 80px 0;
  text-align: center;
}

/* Секции с темным фоном */
.shooting-intro, .shooting-title-only {
  background-color: #3d2c22;
  color: #fdfbf9;
}

/* Секции галерей - СВЕТЛЫЕ, как в эталоне */
.shooting-gallery {
  background-color: #f4e2b7; /* Светло-серый фон */
  padding: 60px 0;
}

/* ЭФФЕКТ РВАНОЙ БУМАГИ */
.torn-paper {
  height: 80px;
  width: 100%;
  mask-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0H0V84.334C2.66667 83.4447 9.6 84.334 15 87C23.8 91.4 24.8333 96.1667 30.5 97.5C36.1667 98.8334 41.4 94.6667 47.5 93.5C53.6 92.3334 57.8333 95 63.5 95C69.1667 95 74.2 88.8334 79.5 87C84.8 85.1667 90.6667 86.1667 100 84.334V0Z' fill='black'/%3E%3C/svg%3E%0A");
  mask-size: 100px 100px;
  mask-position: bottom;
  margin-top: -1px;
}

.torn-paper.from-dark {
  background-color: #3d2c22; /* Переход от темного фона */
}

.torn-paper.from-light {
  background-color: #f4e2b7; /* Переход от светлого фона */
}

/* Типографика */
.shooting-main-title {
  font-family: 'Helvetica', sans-serif;
  font-size: clamp(48px, 10vw, 140px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 20px;
  color: #fdfbf9;
}

.shooting-subtitle { font-size: 18px; color: #f5e1bd; margin-bottom: 30px; }
.shooting-description { max-width: 700px; margin: 0 auto 60px; font-size: 16px; line-height: 1.7; color: #fdfbf9; }
.shooting-section-title { 
  font-family: 'Helvetica', sans-serif; 
  font-size: 48px; 
  margin-top: 20px;
  font-weight: 700; 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  color: #f5e1bd; 
}


/* Галереи */
.shooting-gallery-grid { display: grid; gap: 30px; }
.video-gallery { grid-template-columns: repeat(3, 1fr); }
.photo-gallery { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.shooting-gallery-item {
  background-color: #3d2c22;
  padding: 5px;
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0,0,0,0.05);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 12 / 16;
}

.shooting-gallery-item img,
.shooting-gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, filter 0.4s ease;
  background-color: #3d2c22;
  padding: 5px;
  border-radius: 10px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
}

.shooting-gallery-item:hover img,
.shooting-gallery-item:hover video {
  transform: scale(1.08);
  filter: brightness(0.9);
}



/* СТИЛИ ДЛЯ ЛАЙТБОКСА */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

.lightbox-content {
  max-width: 90%;
  max-height: 90%;
}

#lightbox-video-player {
  width: 100%;
  height: 100%;
  max-width: 80vw;
  max-height: 80vh;
}

.close-lightbox {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

/* =================================== */
/* ====== СТИЛИ ДЛЯ БЛОКА МОДЕЛЬ ====== */
/* =================================== */


.model-section {
  background-color: #3d2c22; /* Ваш фирменный коричневый цвет */
  padding: 80px 20px;
  color: #fdfbf9; /* Светлый цвет текста */
  overflow: hidden; /* Предотвратит случайные горизонтальные прокрутки */
}

.model-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Заголовок с иконкой */
.model-title-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 60px;
}

.model-title {
  font-family: 'Helvetica', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem); /* Адаптивный размер шрифта */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
}

.sparkle-icon {
  width: 50px;
  height: auto;
}

/* Основной контент: сетка из 2-х колонок */
.model-main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Левая часть с фото (самое интересное) */
.model-gallery {
  position: relative; /* Обязательно для позиционирования дочерних элементов */
  min-height: 550px; /* Даем контейнеру высоту, чтобы фото не выпадали */
}

.model-gallery-item {
  position: absolute; /* Позиционируем фото внутри родителя */
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  max-width: 320px; /* Ограничим максимальный размер */
  width: 60%; /* Ширина относительно родителя */
}

.model-gallery-item img {
  width: 100%;
  display: block;
}

/* Позиционируем первое фото */
.model-gallery-item:nth-child(1) {
  top: 0;
  left: 0;
  z-index: 1; /* Чтобы оно было поверх второго */
  transform: rotate(-5deg);
}

/* Позиционируем второе фото */
.model-gallery-item:nth-child(2) {
  top: 300px;
  max-width: 100%; /* Максимальная ширина – 100% */
  max-height: 500px; /* Максимальная высота – 500px */
  height: auto; /* Высота автоматическая */
  right: 0;
  z-index: 2;
  transform: rotate(5deg);
}

/* Правая часть с текстом */
.model-description {
  position: relative; /* Для позиционирования стрелки */
  padding-bottom: 100px; /* Оставляем место для стрелки внизу */
}

.model-description p {
  position: relative;
  top: -100px;
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  max-width: 450px; /* Ограничим ширину текста для читаемости */
}

.arrow-icon {
  position: absolute;
  bottom: 0;
  top: 150px;
  right: 200px;
  width: 400px;
  height: auto;
}
/* =================================== */
/* ====== СТИЛИ ДЛЯ СЕКЦИИ С ЦЕНАМИ (ФИНАЛЬНАЯ ВЕРСИЯ CSS) ====== */
/* =================================== */
.pricing-section {
  background-color: #3d2c22;
  padding: 5rem 2rem;
}

/* ИЗМЕНЕНИЯ В ГЛАВНОМ КОНТЕЙНЕРЕ */
.pricing-container {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  align-items: stretch; /* <-- ЗАСТАВЛЯЕМ КОЛОНКИ РАСТЯГИВАТЬСЯ ПО ВЫСОТЕ */
}

/* ИЗМЕНЕНИЯ В КОЛОНКАХ */
.price-column {
  display: flex;
  flex-direction: column;
  /* flex-grow и height: 100% здесь не нужны, grid сделает все сам */
}

.price-card {
  background-color: #f4e2b7;
  color: #3d2c22;
  padding: 1.2rem 2rem;
  border-radius: 25px;
  text-align: center;
  margin-bottom: 1.5rem; /* Отступ между карточкой и медиа */
}

.price-card h3 {
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
}

.price-card p {
  font-family: 'Helvetica', sans-serif;
  font-size: 1rem;
  color: #3d2c22;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.photo-item {
  overflow: hidden;
  border-radius: 10px;
}

.photo-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 25/70;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.photo-item:hover img {
  transform: scale(1.1);
}

.price-video-item {
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.price-video-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.price-video-item:hover {
  transform: scale(1.03);
}


/* =================================== */
/* ====== СТИЛИ ДЛЯ СЕКЦИИ С УСЛУГАМИ (REELS/ОБЗОР) ====== */
/* =================================== */
.services-promo-section {
  background-color: #3d2c22;
  padding: 5rem 2rem;
}

.services-promo-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}

.service-card-promo {
  background-color: #f4e2b7;
  border-radius: 15px;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  border: 4px solid #3d2c22;
}

.service-card-text h2 {
  font-family: 'Helvetica', sans-serif;
  font-size: 2.5rem;
  color: #3d2c22;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.service-card-text .price {
  font-family: 'Helvetica', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #c5412b;
}

.service-card-images {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 250px;
}

.image-wrapper {
  position: absolute;
  width: 50%;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, z-index 0s 0.15s;
  cursor: pointer; /* Показываем, что можно нажать */
}

/* Стили для видео внутри обертки */
.image-wrapper video {
  width: 70%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Наведение на обертку для выдвижения видео вперед */
.image-wrapper:hover {
    transform: scale(1.5) rotate(1deg) !important;
    z-index: 10;
    transition: transform 0.3s ease;
}

/* Расположение и наклон */
.rotate-left { transform: translateX(-70%) rotate(-10deg); z-index: 1;}
.rotate-right { transform: translateX(0) rotate(8deg); z-index: 2;}
.rotate-left-more { transform: translateX(70%) rotate(-15deg); z-index: 3;}


/* Curs Section */
.curs {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.text-container {
  position: absolute;
  left: 20px;
  top: 20px;
  color: #4a250b;
  font-size: 2rem;
}

.curs-grid {
  max-width: 1200px;
  display: flex;
  gap: 4rem;
}

.curs-card {
  position: relative;
  max-width: 100%;
  height: auto;
}

.curs-content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 200px;
  left: 300px; /* Скорректировано для лучшего центрирования */
  width: 100%;
}

.curs-button {
  position: relative;
  top: -150px;
  right: 350px;
  display: inline-block;
  background-color: #f0e6d2;
  color: #3d2c22;
  font-size: 2.2rem;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  padding: 2rem 3rem;
  border: 4px solid #4a250b;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.curs-button:hover {
  background-color: #e6d8bc;
  transform: scale(1.03);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* =================================== */
/* ====== СТИЛИ ДЛЯ БЛОКА SMM ====== */
/* =================================== */

.smm-specialist-section {
  background-color: #3d2c22; /* Ваш фирменный темно-коричневый */
  color: #fdfbf9;
  padding: 80px 0;
  font-family: 'Helvetica', sans-serif;
}

.smm-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Заголовки */
.smm-title {
  font-size: clamp(40px, 8vw, 90px);
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  font-family: 'Helvetica', sans-serif;
  color: #fff;
}

.smm-subtitle {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 60px;
  line-height: 1.6;
}

/* Двухколоночный блок (обязанности + фото) */
.smm-main-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 50px;
  align-items: start;
}

/* Левая колонка со списком */
.smm-duties {
  text-align: left;
}

.duties-title {
  font-weight: 700;
  margin-bottom: 20px;
  font-family: 'Helvetica', sans-serif;
  color: #fff;
}

.duties-list {
  list-style: none;
  padding: 0;
}

.duties-list li {
  padding-left: 25px;
  position: relative;
  margin-bottom: 15px;
  line-height: 1.7;
}

.duties-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 0;
  color: #c7b7ae; /* Приглушенный цвет для тире */
  font-weight: 700;
}

/* Правая колонка с фото */
.smm-photo img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* Разделитель */
.smm-divider {
  border: none;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 60px 0;
}

/* Сетка с кейсами */
.smm-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 60px; /* Отступ по вертикали и горизонтали */
}

.case-item {
  text-align: left;
}

.case-title {
  font-size: 14px;
  text-transform: uppercase;
  color: #c7b7ae;
  margin-bottom: 15px;
  font-weight: 400;
  letter-spacing: 0.05em;
  font-family: 'Helvetica', sans-serif;
}

.case-item img {
  width: 100%;
  border-radius: 8px;
}

.case-item.text-only {
  display: flex;
  align-items: flex-end; /* Прижимаем текст к низу */
}

.case-title.right-aligned {
  text-align: right;
  width: 100%;
  position: relative;
  top: -880px;
  right: 150px;
}
  
  /* Складываем кейсы в одну колонку */
  .smm-cases-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .case-item.text-only {
    align-items: flex-start; /* На мобильных текст лучше сверху */
    text-align: left; /* И выравниваем по левому краю */
  }

  .case-title.right-aligned {
    text-align: left;
  }

/* =================================== */
/* ====== СТИЛИ ДЛЯ ФУТЕРА (ИСПРАВЛЕНО) ====== */
/* =================================== */

footer {
  background-color: #1c1c1c;
  color: #fff;
  padding: 80px 20px 40px; /* Увеличили верхний отступ, уменьшили нижний */
  font-family: 'Helvetica', sans-serif;
}

.footer-container {
  max-width: 1100px;
  margin: 0 auto;
}

.footer-title {
  font-family: 'Helvetica', sans-serif;
  text-align: center;
  font-size: 2.5rem; /* Немного уменьшили для баланса */
  letter-spacing: 0.2em; /* Увеличили разрядку */
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 80px; /* Увеличили отступ */
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 колонки, как на референсе */
  gap: 40px;
  margin-bottom: 80px; /* Увеличили отступ */
  padding-bottom: 60px; /* Добавили отступ до линии */
  border-bottom: 1px solid #333; /* Линия-разделитель */
}

.footer-column h3 {
  font-size: 0.8rem; /* Чуть меньше */
  color: #888;
  margin-bottom: 25px; /* Увеличили отступ */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400; /* Нежирный */
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 20px; /* Отступ между ссылками */
}

/* Стили для ВСЕХ ссылок в колонках */
.footer-column a {
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: bold;
  position: relative;
  transition: color 0.3s ease;
  padding-bottom: 5px; /* Даем место для линии */
}

/* Эффект подчеркивания для ссылок */
.footer-column a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px; /* Тонкая линия */
  bottom: 0;
  left: 0;
  background-color: #fff;
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.footer-column a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Нижняя часть футера (копирайт и разработчик) */
.footer-bottom {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem; /* Чуть крупнее для читаемости */
  color: #888;
}

.footer-bottom .developer {
  color: #888; /* Наследуем серый цвет */
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-bottom .developer:hover {
  color: #fff; /* Становится белым при наведении */
}

/* ============================================== */
/* ==== СТИЛИ ДЛЯ РАСКРЫВАЮЩЕГОСЯ БЛОКА КУРСА ==== */
/* ============================================== */

.course-details {
  background-color: #3d2c22; /* Темно-коричневый фон, как у секции "Услуги" */
  color: #fdfbf9;
  
  /* Секрет анимации: изначально блок "схлопнут" */
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  
  /* Плавный переход для высоты и отступов */
  transition: max-height 0.8s ease-in-out, padding 0.8s ease-in-out;
}

/* Класс, который будет добавляться через JS для "раскрытия" блока */
.course-details.is-visible {
  max-height: 5000px; /* Огромное значение, чтобы точно хватило на весь контент */
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.course-details-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.course-details h2 {
  font-family: 'Helvetica', sans-serif;
  font-size: 2.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.course-details h2:first-child {
  margin-top: 0;
}

.course-details p, .course-details ul {
  font-family: 'Helvetica', sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.course-details ul {
  list-style-position: inside; /* Чтобы маркеры были внутри блока */
  padding-left: 1rem;
}

/* Стили для таблицы с тарифами */
.pricing-table-wrapper {
  margin-top: 4rem;
  background-color: #f4e2b7; /* Пастельно-желтый, как в "О себе" */
  color: #3d2c22; /* Темный текст на светлом фоне */
  padding: 2.5rem;
  border-radius: 8px;
}

.pricing-table-wrapper h3 {
  text-align: center;
  font-family: 'Helvetica', sans-serif;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.pricing-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.pricing-tier h4 {
  font-family: 'Helvetica', sans-serif;
  font-size: 1.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #d3c1a2;
}

.pricing-tier ul {
  list-style: none;
  padding: 0;
}

.pricing-tier li {
  margin-bottom: 0.75rem;
}

/* Вертикальный разделитель для второй колонки */
.pricing-tier:last-child {
  border-left: 1px solid #d3c1a2;
  padding-left: 2rem;
}
/* ============================================== */
/* ======== СТИЛИ ДЛЯ КНОПОК ПОКУПКИ КУРСА ======== */
/* ============================================== */

.buy-button {
  display: inline-flex; /* Используем flexbox */
  flex-direction: column; /* Располагаем элементы в колонку, один под другим */
  align-items: center; /* Центрируем по горизонтали */
  padding: 1rem 2rem; /* Можете настроить отступы */
  border-radius: 10px;
  line-height: 1.3; /* Уменьшаем межстрочный интервал */
  background-color: #3d2c22; /* Темный фон, как у основной секции */
  color: #fdfbf9; /* Светлый текст */
  text-decoration: none; /* Убираем подчеркивание у ссылки */
  font-family: 'Helvetica', sans-serif;
  font-weight: bold;
  text-align: center;
  margin-top: 2.5rem; /* Отступ сверху от списка */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Плавные переходы */
}

.buy-button .action-text {
  font-size: 1.1rem;
  font-weight: bold;
}

/* Контейнер для цен */
.buy-button .price-container {
  display: flex;
  align-items: baseline; /* Выравниваем по базовой линии текста */
  gap: 0.7rem; /* Расстояние между ценами */
  margin-top: 5px;
}

/* Старая, перечеркнутая цена */
.buy-button .old-price {
  font-size: 1rem;
  color: #a0a0a0; /* Тусклый цвет */
  text-decoration: line-through; /* Явное перечеркивание */
}

/* Новая, актуальная цена */
.buy-button .new-price {
  font-size: 1.5rem; /* Делаем крупнее */
  font-weight: bold;
  color: #fff; /* Яркий белый цвет */
}

.buy-button:hover {
  background-color: #503323; /* Чуть более светлый коричневый при наведении */
  transform: translateY(-3px); /* Легкий эффект "поднятия" кнопки */
}


/* ============================================== */
/* ========= СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА ОПЛАТЫ ========= */
/* ============================================== */

/* Стили для блока с QR-кодом */
.qr-code-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.qr-code-block h4 {
  margin-bottom: 5px;
}

.qr-code-block p {
  margin-top: 0;
  color: #666;
}

.qr-code-block #qr-image {
  max-width: 250px; /* Можете изменить размер по вкусу */
  width: 100%;
  margin: 15px 0;
  border-radius: 8px;
  border: 1px solid #eee;
}

.qr-code-block .order-total {
  width: 100%;
  margin-bottom: 20px;
}

.qr-code-block .small-text {
  font-size: 12px;
  color: #888;
  margin-top: 15px;
}

/* Убедитесь, что у вас есть этот класс для скрытия элементов */
.hidden {
  display: none !important;
}


.payment-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001; /* Выше, чем лайтбокс для видео */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.payment-modal-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

.payment-modal-content {
  background-color: #fff;
  color: #1a1a1a;
  padding: 2rem 2.5rem;
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.close-modal-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  color: #aaa;
  background: none;
  border: none;
  cursor: pointer;
}

.payment-modal-content h3 {
  font-family: 'Helvetica', sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.order-summary {
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding: 1rem 0;
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
}

.order-item span:first-child {
  font-weight: 500;
}

.order-total {
  display: flex;
  justify-content: flex-end;
  font-weight: bold;
  padding: 1rem 0;
  margin-bottom: 2rem;
}

.form-field {
  margin-bottom: 1.25rem;
}

.form-field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.form-field input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #f7f7f7;
}

.submit-payment-btn {
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: 50px; /* Сильно скругленные углы */
  background-color: #3d2c22; /* Фиолетовый цвет */
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-payment-btn:hover {
  background-color: #3d2c22;
}

.policy-agreement {
  font-size: 0.8rem;
  text-align: center;
  color: #888;
  margin-top: 1rem;
}

.policy-agreement a {
  color: #3d2c22;
  text-decoration: underline;
}

.success-message {
  text-align: center;
}

.success-message h4 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.success-message p {
    line-height: 1.6;
    margin-bottom: 2rem;
}

.close-modal-btn-success {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 50px;
    background-color: #e0e0e0;
    color: #333;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
}

/* =================================================================== */
/* ======       СТИЛИ ДЛЯ МОБИЛЬНОГО МЕНЮ (ИСПРАВЛЕНО)          ====== */
/* =================================================================== */

/* --- Кнопка-гамбургер --- */
.menu-toggle {
  display: none; /* Скрыта по умолчанию, появится в медиа-запросе */
  position: fixed; /* ИЗМЕНЕНО: Позиционируем относительно окна, а не шапки */
  top: 30px;       /* Отступ сверху */
  right: 20px;     /* Отступ справа */
  width: 30px;
  height: 25px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1100; /* ВАЖНО: z-index ВЫШЕ, чем у панели меню */
}

.menu-overlay {
  position: fixed; /* Чтобы он покрывал весь экран, даже при скролле */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
  
  /* 
    ВАЖНО: z-index должен быть НИЖЕ, чем у панели меню (.mobile-nav-panel), 
    но ВЫШЕ, чем у остального контента страницы.
    У вас .mobile-nav-panel имеет z-index: 1050, поэтому 1049 - идеальное значение.
  */
  z-index: 1049; 
  
  /* По умолчанию фон скрыт и некликабелен */
  opacity: 0;
  pointer-events: none; /* Элемент не будет реагировать на мышь */
  transition: opacity 0.4s ease-in-out; /* Та же анимация, что и у меню */
}

/* Когда меню открыто (на body есть класс .menu-open), показываем фон */
.menu-open .menu-overlay {
  opacity: 1;
  pointer-events: auto; /* Делаем элемент кликабельным */
}

.menu-toggle span {
  display: block; /* Убедимся, что это блочный элемент */
  width: 30px;
  height: 3px;
  background-color: #fff; /* Цвет палочек */
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  margin-bottom: 5px; /* Добавим отступ между палочками */
}
.menu-toggle span:last-child {
  margin-bottom: 0;
}

/* --- Анимация в крестик при открытии --- */
/* Меняем цвет палочек на белый, когда меню открыто, т.к. фон тёмный */
.menu-open .menu-toggle span {
  background-color: #fff;
}
.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}
.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- Выезжающая панель меню --- */
/* --- Выезжающая панель меню --- */
.mobile-nav-panel {
  position: fixed; /* ИСПРАВЛЕНО: Приклеиваем к экрану */
  top: 0;
  right: -100%;
  width: 85%;   
  max-width: 320px;
  height: 100vh;
  background-color: #1c1c1c;
  z-index: 1050;
  transition: right 0.4s ease-in-out;
  padding: 100px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: -5px 0 15px rgba(0,0,0,0.2);
  overflow-y: auto;
}

/* Показываем панель при добавлении класса .menu-open к body */
.menu-open .mobile-nav-panel {
  right: 0;
}

/* Стили для ссылок внутри мобильного меню */
.mobile-nav-panel ul {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
  text-align: center;
}

.mobile-nav-panel ul li a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  font-size: 1.5rem;
  position: relative;
  padding-bottom: 5px;
}

.mobile-nav-panel ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: #fff;
  transition: width 0.3s ease-out;
}

.mobile-nav-panel ul li a:hover::after {
  width: 100%;
}

.mobile-nav-panel .nav-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* =================================================================== */
/* ======     ГЛАВНЫЙ БЛОК АДАПТИВНЫХ СТИЛЕЙ (до 992px)      ====== */
/* =================================================================== */

@media (max-width: 992px) {

  /* --- HEADER --- */
  /* Скрываем десктопную навигацию и показываем кнопку-гамбургер */
  header nav > ul,
  header nav > .nav-right {
      display: none;
  }
  .menu-toggle {
      display: block; /* ИЗМЕНЕНО: был flex, но block тоже сработает */
  }

/* --- HERO SECTION (ИСПРАВЛЕНО) --- /
.hero {
/ ИЗМЕНЕНО: Прижимаем контент к верху, а не к центру /
align-items: flex-start;
/ ДОБАВЛЕНО: Добавляем отступ сверху, чтобы текст не прилипал к шапке */

.hero-text {
transform: translateY(-150px);
position: static;
text-align: left;
padding: 0 1.5rem;
}
.hero-text h1, .hero-text p {
position: static;
max-width: 100%;
}
.hero-text h1 {
font-size: 2.8rem;
margin-bottom: 1rem;
line-height: 1.1;
}
.hero-text p {
font-size: 1.1rem;
margin-bottom: 2rem;
}

/* ===================================================================== */
/* ======   ФИНАЛЬНОЕ РЕШЕНИЕ ДЛЯ СЕКЦИИ "ОБО МНЕ" (ПЕРЕМЕШИВАНИЕ) ====== */
/* ===================================================================== */

/* --- Общие настройки контейнеров --- */
.about-me {
  padding-top: 4rem;
}
.about-container {
  padding: 0 1rem;
}

/* --- ШАГ 1: Главный трюк. "Растворяем" контейнеры .about-left и .about-right,
 чтобы все их дочерние элементы стали прямыми детьми .about-block --- */
.about-block {
  display: flex;
  flex-direction: column; /* Все элементы будут в одной колонке */
  align-items: center;  /* Выравниваем все по левому краю */
  gap: 1.5rem;              /* Отступ между всеми элементами */
}
.about-block .about-left,
.about-block .about-right {
  display: contents; /* Этот CSS "удаляет" div'ы, поднимая их контент на уровень выше */
}


/* --- ШАГ 2: Задаем точный порядок для КАЖДОГО элемента --- */

/* Контейнер <ul> нам тоже не нужен, "растворяем" и его */
.about-block ul {
  display: contents;
}

/* Теперь назначаем каждому элементу свой номер в очереди */
.about-block .aboutMe { order: 1; }          /* Текст "За 1 год..." */
.about-block .about-image1 { order: 2; }     /* Картинка 1 */
.about-block .arrow-text { order: 3; }       /* Текст "Меня приглашают..." */
.about-block .about-image2 { order: 4; }     /* Картинка 2 */
.about-block .highlighted-text { order: 5; } /* Текст "Прокачала навык..." */
.about-block .about-image3 { order: 6; }     /* Картинка 3 */


/* --- ШАГ 3: Общие стили для всех текстовых блоков --- */
.about-block li,
.about-block p {
  position: static !important;
  transform: none !important;
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}


/* --- ШАГ 4: Общие стили для всех картинок и скрытие стрелок --- */
.about-block img {
  position: static !important;
  transform: none !important;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0;
  border-radius: 20px;
  object-fit: cover;
}
.about-block .about-leftArrow,
.about-block .about-rightArrow {
  display: none !important;
}

  /* --- SERVICES SECTION ("СЪЕМКИ") --- */
  .services-grid,
  .video-gallery,
  .pricing-container,
  .smm-cases-grid,
  .footer-grid,
  .pricing-table {
      grid-template-columns: 1fr; /* Все гриды делаем в одну колонку */
  }

  /* ИСПРАВЛЕНИЕ для секции "СЪЕМКА" с обрезанной картинкой */
  .service-card-promo, .smm-main-content {
      display: block; /* Убираем грид или флекс, чтобы контент шел по порядку */
  }
  /* Сбрасываем абсолютное позиционирование для элементов, которые съехали */
  .model-gallery-item, .model-description p, .curs-button, .case-title.right-aligned {
    position: static;
    transform: none;
    text-align: center; /* Центрируем текст и кнопки */
    margin: 1rem auto;
}

.curs {
  display: flex;
  align-items: center; 
  justify-content: center;
  min-height: 50vh;
  padding: 8rem 1rem 3rem;
  height: auto;

}
.curs-content {
    position: static;
    transform: none;
}
.curs-button {
  position: static; /* Оставляем как было */

  /* УМЕНЬШАЕМ РАЗМЕРЫ ДЛЯ МОБИЛЬНЫХ */
  font-size: 0.8rem;       /* Было 1.8rem. Делаем шрифт заметно меньше. */
  padding: 0.8rem 1.5rem;  /* Было 1.5rem 2rem. Делаем отступы компактнее. */
  
  /* Дополнительно для красивого переноса строк */
  line-height: 1.4; 
  
  /* Чтобы кнопка не была слишком широкой на экранах ~400px */
  max-width: 90%; 
  transform: translate(-15px, 50px);
}

/* --- Раскрывающийся блок курса --- */
.pricing-tier:last-child {
  border-left: none;
  padding-left: 0;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #d3c1a2;
}
.buy-button {
    display: block; /* Растягиваем на всю ширину */
}

/* --- Футер --- */
.footer-title {
  font-size: 2rem;
  margin-bottom: 40px;
}
.footer-grid {
  grid-template-columns: 1fr; /* Все колонки в один ряд */
  text-align: center;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 40px;
}
.footer-bottom {
  flex-direction: column; /* Копирайт и разработчик друг под другом */
  gap: 1rem;
  padding-top: 20px;
  border-top: 1px solid #333;
}

/* ================================================= */
/* ========= АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ ОПЛАТЫ ========= */
/* ================================================= */

.payment-modal-overlay {
  align-items: flex-start; 
  overflow-y: auto;
  padding: 1rem; 
}

.payment-modal-content {
  max-width: 100%;
  padding: 2rem 1.5rem; 
}

.payment-modal-content h3,
.success-message h4,
.qr-code-block h4 {
  font-size: 1.3rem;
}

.qr-code-block #qr-image {
  max-width: 200px;
}

.form-field input {
  padding: 0.7rem 0.9rem;
}

.submit-payment-btn,
.close-modal-btn-success {
  padding: 0.9rem;
  font-size: 1rem;
}
  
  /* ИСПРАВЛЕНИЕ для секции "МОДЕЛЬ" */
  .model-main-content {
      display: flex;
      flex-direction: column;
      align-items: center; /* Центрируем карточки по горизонтали */
      gap: 2rem;
  }

  /* ИСПРАВЛЕНИЕ для секции "UGC" */
  /* Предположим, что у контейнера с видео/картинками есть класс .gallery-items */
  .service-card .gallery-items, /* Найди настоящий класс этого контейнера */
  .ugc-gallery { /* или такое название */
      display: flex;
      justify-content: center; /* Центрирование по горизонтали */
      flex-wrap: wrap;         /* Перенос на новую строку */
      gap: 1rem;               /* Отступы между элементами */
  }
  .service-card .gallery-items img {
      max-width: 45%; /* Чтобы по две картинки в ряд помещалось */
      height: auto;
      flex-grow: 1; /* Растягиваем, чтобы заполнить место */
  }

  /* 1. Превращаем контейнер с картинками в гибкий контейнер */
.service-card-images {
  display: flex;         /* Включаем Flexbox */
  flex-wrap: wrap;       /* Разрешаем перенос элементов на новую строку */
  justify-content: center; /* Центрируем элементы по горизонтали */
  gap: 1rem;             /* Добавляем красивый отступ между элементами */
  margin-top: 2rem;      /* Добавим отступ сверху от заголовка карточки */
}

/* 2. Сбрасываем стили для каждой отдельной картинки/видео */
/* 2. Сбрасываем стили для каждой отдельной картинки/видео */
.service-card-images .image-wrapper {
  position: static;
  transform: none !important;
  width: 45%;                 /* ИЗМЕНЕНО: Немного увеличиваем ширину */
  max-width: 400px;           /* ИЗМЕНЕНО: Заметно увеличиваем максимальный размер */
  margin: 0;
}

/* 3. ЗАСТАВЛЯЕМ ВИДЕО/КАРТИНКИ ЗАПОЛНИТЬ ЭТОТ КОНТЕЙНЕР */
.service-card-images .image-wrapper video,
.service-card-images .image-wrapper img {
    width: 100%;
}

  .arrow-icon {
    display: none;
}


  /* --- ОСТАЛЬНЫЕ ОБЩИЕ ИСПРАВЛЕНИЯ --- */
  .footer-bottom, .curs-content {
      flex-direction: column;
      text-align: center;
      gap: 1rem;
  }
  .curs .text-container { display: none; }
  .curs { height: auto; padding: 3rem 0; }
  .pricing-tier:last-child {
      border-left: none;
      padding-left: 0;
      border-top: 1px solid #d3c1a2;
      padding-top: 2rem;
  }
}

/* =================================================================== */
/* ======      СТИЛИ ДЛЯ ОЧЕНЬ МАЛЕНЬКИХ ЭКРАНОВ (до 480px)   ====== */
/* =================================================================== */
@media (max-width: 480px) {
  .hero-text h1 { font-size: 2.2rem !important; }
  h2 { font-size: 1.8rem !important; }
  section, footer { padding-left: 1rem; padding-right: 1rem; }
}