/* ==========================================================================
   1. ПЕРЕМЕННЫЕ И СИСТЕМНЫЕ НАСТРОЙКИ (SYSTEM & THEME)
   ========================================================================== */
:root {
  /* Базовые глубокие фоны (Дымный торф, Обугленный дуб) */
  --bg-black: #0D0C0B;        
  --bg-secondary: #141211;    
  --bg-card: rgba(23, 20, 18, 0.65); 
  
  /* Алкогольная группа (Виски, Бурбон, Мед) */
  --neon-gold: hsl(35, 100%, 50%);       
  --whiskey-honey: #EFA642;   
  --neon-glow: rgba(212, 126, 42, 0.25);
  
  /* Сталь и Лед (Холодный контраст для брутальности) */
  --steel-blade: #CBD5E1;     
  --ice-cube: rgba(230, 242, 255, 0.07); 
  
  /* Текст */
  --text-white: #F4F4F5;      
  --text-gray: #BAAFA6;       
  --text-muted: #6E6257;      
  
  /* Бордюры и Стекло */
  --glass-border: rgba(212, 126, 42, 0.12); 
  --steel-border: rgba(203, 213, 225, 0.08); 
  --modal-overlay-bg: rgba(10, 8, 7, 0.92);
  
  /* Шрифтовые гарнитуры */
  --font-poster: 'Oswald', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  /* --- НАШИ НОВЫЕ ПЕРЕМЕННЫЕ ДЛЯ ГРАДИЕНТОВ (ВНУТРИ ROOT) --- */
  --whiskey-grad-start: #ffdf50; 
  --whiskey-grad-mid: #D47E2A;   
  --whiskey-grad-end: #8A430B;   

  --steel-grad-start: #FFFFFF;
  --steel-grad-mid: #e3e3e3;
  --steel-grad-end: #596372;
}

.text-gradient-whiskey {
  background: linear-gradient(135deg, var(--whiskey-grad-start) 0%, var(--whiskey-grad-mid) 50%, var(--whiskey-grad-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  filter: drop-shadow(0px 2px 10px rgba(212, 126, 42, 0.15));
}

/* Холодный стальной градиент для контрастных заголовков */
.text-gradient-steel {
  background: linear-gradient(135deg, var(--steel-grad-start) 0%, var(--steel-grad-mid) 55%, var(--steel-grad-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Сброс базовых стилей и стабилизация */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-black);
  color: var(--text-white);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === ГЛОБАЛЬНАЯ СЕТКА КОНТЕЙНЕРОВ === */
.container {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 70px;
  padding-right: 70px;
}

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

section {
  padding-top: 160px;
  padding-bottom: 160px;
  position: relative;
  width: 100%;
}

.poster-text {
  font-family: var(--font-poster);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ==========================================================================
   2. АНИМИРОВАННЫЙ АТМОСФЕРНЫЙ ФОН (HERO & GLOBAL SPHERES)
   ========================================================================== */
/* Живые сферы свечения */
.bg-amber-glow {
  position: absolute;
  width: 750px;
  height: 750px;
  pointer-events: none;
  z-index: 0;
  filter: blur(130px);
  animation: globalFloat 20s infinite alternate ease-in-out;
}
/* Янтарный бурбон слева */
.sphere-1 { 
  top: -5%; 
  left: -15%; 
  background: radial-gradient(circle, rgba(212, 126, 42, 0.12) 0%, transparent 70%);
}
/* Холодный стальной лед справа */
.sphere-2 { 
  top: 35%; 
  right: -20%; 
  background: radial-gradient(circle, rgba(203, 213, 225, 0.06) 0%, transparent 75%);
  animation-duration: 28s; 
}
/* Плотный медовый виски снизу */
.sphere-3 { 
  bottom: -10%; 
  left: 15%; 
  background: radial-gradient(circle, rgba(239, 166, 66, 0.09) 0%, transparent 70%);
  animation-duration: 24s; 
}

@keyframes globalFloat {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(50px, 40px) scale(1.15); }
}

/* Анимированный брутальный бэкграунд на Hero секции */
.hero-animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #020202; /* Заглушка, пока видео загружается */
  z-index: 0;
  overflow: hidden;
}

/* Стилизация и сильное затемнение видео */
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Чтобы видео не растягивалось, а идеально заполняло экран */
  transform: translate(-50%, -50%);
  z-index: 0;
  
  /* Эффекты брутальности и читаемости текста */
  opacity: 0.45; /* Прозрачность: 0.25 делает его очень темным и ненавязчивым */
  filter: brightness(0.5) contrast(1.2) grayscale(0.4); /* Приглушаем яркость и цвета */
}

/* Геометрическая сетка в стиле индастриал (вынесена поверх видео) */
.hero-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(212, 126, 42, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203, 213, 225, 0.01) 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: center center;
  z-index: 1;
  pointer-events: none;
}

/* Плавное затемнение к нижней части экрана (переход в черный) */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 30%, var(--bg-black) 100%);
  z-index: 2; /* Перекрывает и видео, и сетку */
  pointer-events: none;
}

/* ==========================================================================
   3. СТАБИЛИЗАЦИЯ БУКВ ПРИ НАВЕДЕНИИ (БЕЗ СДВИГА КООРДИНАТ)
   ========================================================================== */
.glow-letters {
  display: block;
}

.glow-letters div {
  display: block;
  white-space: nowrap;
}

.glow-letters span {
  display: inline-block;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), text-shadow 0.25s, color 0.25s;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
}

/* Текст остается на тех же координатах, но буквы растут строго из своего центра */
.glow-letters span:hover {
  transform: scale(1.35);
  z-index: 5;
}

/* ЛОГИКА ЦВЕТОВОЙ ИНВЕРСИИ */
/* Белая строка: при наведении становится желтой */
.glow-letters .line-white span {
  color: var(--text-white);
}
.glow-letters .line-white span:hover {
  color: var(--neon-gold);
  text-shadow: 0 0 15px var(--neon-gold), 0 0 30px rgba(255, 190, 26, 0.6);
}

/* Желтая строка: при наведении становится белой */
.glow-letters .line-gold span {
  color: var(--neon-gold);
  text-shadow: 0 0 8px rgba(255, 190, 26, 0.15);
}
.glow-letters .line-gold span:hover {
  color: var(--text-white);
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
}

/* Специфика для внутренних страниц, где заголовок по умолчанию белый */
.luxury-title.glow-letters .line-white span,
.luxury-title.glow-letters .line-gold span {
  color: var(--text-white);
}
.luxury-title.glow-letters .line-white span:hover,
.luxury-title.glow-letters .line-gold span:hover {
  color: var(--neon-gold);
  text-shadow: 0 0 15px var(--neon-gold);
}

/* ==========================================================================
   4. GLASSMORPHISM ТАБЛИЧКИ И ДЕКОР
   ========================================================================== */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px; /* Закругляє кути карточки */
  border: 1px solid var(--glass-border);
  border-image: linear-gradient(135deg, var(--steel-border), var(--glass-border)) 1;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.03);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
  overflow: hidden; /* Гарантує, що контент усередині не вилізатиме за закруглені краї */
}

.glass-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(14, 14, 17, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid var(--glass-border);
  padding: 12px 26px;
  color: var(--text-white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family: var(--font-poster);
}

.animated-float {
  animation: badgeFloat 4s infinite ease-in-out;
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.icon-flash {
  color: var(--neon-gold);
  animation: flashEffect 2s infinite steps(2);
}

@keyframes flashEffect {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* ==========================================================================
   5. ФИКСИРОВАННАЯ ШАПКА И НАВИГАЦИЯ (HEADER)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(3, 3, 3, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.3s ease;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 105px;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 70px;
  padding-right: 70px;
}

.logo-gold {
  font-family: var(--font-poster);
  font-size: 30px;
  color: var(--steel-blade);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.logo-gold span {
  background: linear-gradient(135deg, #fff197 0%, var(--whiskey-honey) 40%, var(--neon-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(212, 126, 42, 0.3));
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 45px;
}

.nav-menu a {
  color: var(--text-gray);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  padding: 6px 0;
}

.nav-menu a:hover,
.nav-menu a.active-link {
  color: var(--neon-gold);
  text-shadow: 0 0 10px var(--neon-glow);
}

/* Бургер-меню для мобильных устройств */
.burger-menu {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 18px;
  cursor: pointer;
}

.burger-menu span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--text-white);
  transition: all 0.3s ease;
}

/* ==========================================================================
   6. КНОПКИ И ЭЛЕМЕНТЫ УПРАВЛЕНИЯ (BUTTONS)
   ========================================================================== */
.btn {
  background: transparent;
  border: none;
  padding: 18px 38px;
  font-family: var(--font-poster);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn-nav {
  border: 1px solid var(--neon-gold);
  color: var(--whiskey-honey);
  background: rgba(212, 126, 42, 0.03);
  padding: 12px 28px;
}

.btn-nav:hover {
  background: var(--neon-gold);
  color: #000;
  box-shadow: 0 0 25px var(--neon-glow);
}

.btn-luxury-solid {
  background: linear-gradient(135deg, var(--whiskey-honey), var(--neon-gold));
  color: #0F0E0D;
  box-shadow: 0 4px 20px rgba(212, 126, 42, 0.2);
}

.btn-luxury-solid:hover {
  background: var(--text-white);
  color: #000;
  box-shadow: 0 15px 35px rgba(255, 255, 255, 0.15);
}

.btn-luxury-outline {
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-white);
}

.btn-luxury-outline:hover {
  border-color: var(--neon-gold);
  color: var(--neon-gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 25px var(--neon-glow);
}

/* ==========================================================================
   7. ГЛАВНАЯ СЕКЦИЯ HERO (ИНДЕКСНАЯ СТРАНИЦА)
   ========================================================================== */
.hero-section {
  height: 100vh;
  min-height: 800px;
  width: 100%;
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.hero-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  column-gap: 70px;
  align-items: center;
  width: 100%;
}

.hero-title {
  font-family: var(--font-poster);
  font-size: 5vw;
  line-height: 1.05;
  margin-top: 25px;
  margin-bottom: 30px;
}

.hero-description {
  color: var(--text-gray);
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
  max-width: 580px;
  margin-bottom: 45px;
}

.hero-cta {
  display: flex;
  gap: 20px;
}

.hero-glass-panel {
  padding: 50px;
  position: relative;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.panel-header h3 {
  font-family: var(--font-poster);
  font-size: 24px;
  letter-spacing: 1px;
}

.pulse-dot {
  width: 9px;
  height: 9px;
  background: var(--neon-gold);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--neon-gold);
  animation: criticalPulse 2s infinite;
}

@keyframes criticalPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.3; }
}

.panel-text {
  color: var(--text-gray);
  line-height: 1.8;
  font-size: 14px;
}

/* ==========================================================================
   8. ВНУТРЕННЯЯ СТРАНИЦА: СЕКЦИЯ ВВЕДЕНИЯ (PAGE INTRO)
   ========================================================================== */
.page-intro {
  padding-top: 220px;
  padding-bottom: 90px;
  z-index: 2;
}

.luxury-title {
  font-size: 56px;
  line-height: 1.1;
  margin-top: 15px;
  margin-bottom: 25px;
  letter-spacing: 3px;
}

.section-subtitle {
  font-size: 16px;
  color: var(--text-gray);
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* ==========================================================================
   9. СЕКЦИЯ УСЛУГ И ТАБОВ (SERVICES & PRICING)
   ========================================================================== */
.services-section {
  padding-top: 0;
  padding-bottom: 150px;
  z-index: 2;
}

/* Навигационная панель переключателей */
.master-tabs-box {
  width: 100%;
  margin-bottom: 60px;
}

.tabs-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px;
  background: rgba(10, 10, 12, 0.8);
}

.tab-btn {
  background: transparent;
  border: none;
  padding: 20px 15px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.tab-btn .tab-title {
  font-size: 18px;
  color: var(--text-gray);
  transition: color 0.3s ease;
}

.tab-btn .tab-desc {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-body);
  transition: color 0.3s ease;
}

.tab-btn:hover .tab-title {
  color: var(--text-white);
}

.tab-btn.active {
  background: rgba(255, 190, 26, 0.06);
  border: 1px solid rgba(255, 190, 26, 0.25);
}

.tab-btn.active .tab-title {
  color: var(--neon-gold);
  text-shadow: 0 0 10px var(--neon-glow);
}

.tab-btn.active .tab-desc {
  color: var(--text-gray);
}

/* Оформление строк прайс-листа */
.luxury-menu-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.menu-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px;
}

.menu-item-row:hover {
  border-color: rgba(255, 190, 26, 0.35);
  box-shadow: 0 25px 50px rgba(255, 190, 26, 0.08);
}

.item-main-info {
  flex: 1;
  padding-right: 50px;
}

.item-title-line {
  display: flex;
  align-items: baseline;
  margin-bottom: 14px;
  width: 100%;
}

.item-title-line h3 {
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--text-white);
  white-space: nowrap;
}

.item-dots {
  flex: 1;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
  top: -4px;
}

.price-display {
  font-family: var(--font-poster);
  font-size: 24px;
  font-weight: 700;
  color: var(--neon-gold);
  white-space: nowrap;
}

.item-description {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-gray);
  max-width: 850px;
}

/* Кнопка заказа с вектором */
.btn-book-arrow {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-white);
  font-family: var(--font-poster);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 16px 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}

.btn-book-arrow i {
  font-size: 11px;
  transition: transform 0.3s ease;
}

.btn-book-arrow:hover {
  border-color: var(--neon-gold);
  color: var(--neon-gold);
  background: rgba(255, 190, 26, 0.02);
}

.btn-book-arrow:hover i {
  transform: translateX(6px);
}

/* ==========================================================================
   10. СЕКЦИЯ О КЛУБЕ И СТАТИСТИКА (ABOUT SECTION)
   ========================================================================== */
.about-section {
  background-color: #050506;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  column-gap: 90px;
  align-items: center;
}

.about-image-container {
  position: relative;
  width: 100%;
  height: 600px;
}

.about-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%) brightness(85%);
}

.image-glass-overlay {
  position: absolute;
  bottom: -30px;
  right: -30px;
  padding: 35px;
  max-width: 280px;
}

.image-glass-overlay h4 {
  font-family: var(--font-poster);
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 8px;
  color: var(--neon-gold);
}

.image-glass-overlay p {
  font-size: 12px;
  color: var(--text-gray);
  line-height: 1.5;
}

.section-tag {
  font-family: var(--font-poster);
  color: var(--neon-gold);
  font-size: 13px;
  letter-spacing: 3px;
  display: block;
  margin-bottom: 18px;
}

.section-title {
  font-size: 42px;
  line-height: 1.15;
  margin-bottom: 30px;
}

.text-muted {
  color: var(--text-gray);
  line-height: 1.8;
  font-size: 15px;
  margin-bottom: 45px;
}

.mini-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.m-stat {
  padding: 30px 20px;
  text-align: center;
}

.m-stat h3 {
  font-family: var(--font-poster);
  font-size: 36px;
  color: var(--neon-gold);
  margin-bottom: 5px;
}

.m-stat p {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-gray);
}

/* ==========================================================================
   11. ИНТЕРАКТИВНЫЙ ГОРИЗОНТАЛЬНЫЙ СЛАЙДЕР (LOOKBOOK)
   ========================================================================== */
.horizontal-looks-section {
  background: #020203;
  overflow: hidden;
}

.section-header-left {
  max-width: 750px;
  margin-bottom: 70px;
}

.vintage-subtitle {
  font-size: 46px;
  line-height: 1.1;
  margin-top: 15px;
  margin-bottom: 25px;
}

.looks-scroll-container {
  display: flex;
  gap: 35px;
  overflow-x: auto;
  padding-left: 70px;
  padding-right: 70px;
  padding-bottom: 40px;
  scroll-snap-type: x mandatory;
}

.looks-scroll-container::-webkit-scrollbar {
  height: 4px;
}

.looks-scroll-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.01);
}

.looks-scroll-container::-webkit-scrollbar-thumb {
  background: var(--neon-gold);
}

.look-card {
  flex: 0 0 400px;
  scroll-snap-align: start;
  padding: 20px;
}

.look-img-wrapper {
  width: 100%;
  height: 480px;
  overflow: hidden;
  margin-bottom: 20px;
}

.look-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(40%) brightness(75%);
  transition: transform 0.7s cubic-bezier(0.15, 1, 0.3, 1), filter 0.5s ease;
}

.look-card:hover .look-img-wrapper img {
  transform: scale(1.06);
  filter: grayscale(0%) brightness(95%);
}

.look-info h4 {
  font-size: 20px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.look-info span {
  font-size: 13px;
  color: var(--text-gray);
}

/* ==========================================================================
   12. АККОРДЕОНЫ И ЧАСТЫЕ ВОПРОСЫ (FAQ SECTION)
   ========================================================================== */
.faq-section {
  background-color: #050506;
}

.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  column-gap: 80px;
}

.accordion-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.accordion-item {
  border-color: rgba(255, 255, 255, 0.04);
}

.accordion-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 40px;
  cursor: pointer;
  user-select: none;
}

.accordion-trigger span {
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--text-white);
  transition: color 0.3s ease;
}

.accordion-trigger i {
  color: var(--text-gray);
  font-size: 14px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item:hover {
  border-color: rgba(255, 190, 26, 0.25);
}

.accordion-item:hover .accordion-trigger span {
  color: var(--neon-gold);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding-left: 40px;
  padding-right: 40px;
}

.accordion-content p {
  color: var(--text-gray);
  font-size: 14px;
  line-height: 1.8;
  padding-bottom: 30px;
}

/* Класс активации аккордеона */
.accordion-item.active {
  border-color: var(--glass-border);
  background: rgba(14, 14, 17, 0.8);
}

.accordion-item.active .accordion-trigger i {
  transform: rotate(45deg);
  color: var(--neon-gold);
}

.accordion-item.active .accordion-content {
  max-height: 200px;
}

/* ==========================================================================
   13. ИДЕАЛЬНО КРУГЛЫЕ СОЦ СЕТИ И СТРУКТУРА ФУТЕРА (FOOTER)
   ========================================================================== */
.site-footer {
  background: #020202;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 120px;
  padding-bottom: 50px;
  position: relative;
  z-index: 2;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  column-gap: 120px;
  margin-bottom: 70px;
}

.brand-text {
  color: var(--text-gray);
  font-size: 14px;
  line-height: 1.8;
  margin-top: 25px;
  margin-bottom: 35px;
  max-width: 400px;
}

/* ИКОНКИ СЕТЕЙ: ИДЕАЛЬНЫЙ СТАБИЛЬНЫЙ КРУГ */
.social-links {
  display: flex;
  gap: 20px;
}

.social-links a {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%; /* Строгий круг */
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-white);
  text-decoration: none;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.01);
  transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s;
  will-change: transform;
}

.social-links a:hover {
  border-color: var(--neon-gold);
  color: #000;
  background: var(--neon-gold);
  box-shadow: 0 0 25px var(--neon-glow);
}

.footer-info {
  padding: 45px;
}

.footer-info h4 {
  font-size: 20px;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

.info-text {
  font-size: 14px;
  color: var(--text-gray);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
}

.info-text i {
  margin-right: 15px;
  font-size: 14px;
  width: 15px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #555555;
}

.privacy-link {
  color: #555555;
  text-decoration: none;
  transition: color 0.3s ease;
}

.privacy-link:hover {
  color: var(--text-gray);
}

/* ==========================================================================
   14. ПРЕМИАЛЬНОЕ МОДАЛЬНОЕ ОКНО (MODAL OVERLAY & BOX)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--modal-overlay-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  z-index: 200;
  display: none; /* Контролируется через JS */
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 20px;
}

.modal-box-luxury {
  width: 100%;
  max-width: 520px;
  padding: 50px;
  position: relative;
  border-color: rgba(255, 190, 26, 0.25);
  transform: translateY(30px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Состояние открытия для анимации через скрипт */
.modal-overlay.open {
  display: flex;
}

.modal-overlay.open .modal-box-luxury {
  transform: translateY(0);
}

.modal-header-luxury {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
}

.modal-header-luxury h3 {
  font-size: 24px;
  letter-spacing: 1px;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-gray);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease;
  position: relative;
  top: -2px;
}

.modal-close-btn:hover {
  color: var(--neon-gold);
}

/* Стилизация полей ввода внутри модалки */
.input-group-luxury {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 25px;
}

.input-group-luxury label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-gray);
}

.glass-input {
  width: 100%;
  background: rgba(3, 3, 3, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 20px;
  color: var(--text-white);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-input:focus {
  outline: none;
  border-color: var(--neon-gold);
  box-shadow: 0 0 15px rgba(255, 190, 26, 0.15);
}

.btn-block {
  width: 100%;
  margin-top: 10px;
}

/* ==========================================================================
   15. ПОЛНАЯ АДАПТИВНОСТЬ (RESPONSIVE CONFIG)
   ========================================================================== */
@media (max-width: 1200px) {
  .container { padding-left: 40px; padding-right: 40px; }
  .hero-container { grid-template-columns: 1fr; row-gap: 60px; text-align: center; }
  .hero-description { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .about-grid { grid-template-columns: 1fr; row-gap: 70px; }
  .about-image-container { height: 480px; }
  .faq-layout { grid-template-columns: 1fr; row-gap: 50px; }
}

@media (max-width: 992px) {
  .site-header { 
    background: #030303; 
  }
  .burger-menu { 
    display: flex; 
    z-index: 101; 
  }
  
  .nav-menu {
    position: absolute; 
    top: 100%; /* Выезжает ровно из-под шапки */
    left: 0; 
    width: 100%; 
    height: auto; /* Высота подстраивается под контент, а не на весь экран */
    background: #0a0a0b;
    flex-direction: column; 
    padding: 30px 40px; 
    gap: 25px; 
    
    /* Начальное состояние для анимации (аккуратно спрятано наверх) */
    transform: translateY(-20px); 
    opacity: 0;
    pointer-events: none; 
    
    border-bottom: 1px solid rgba(255, 190, 26, 0.15); /* Премиальный золотой бортик снизу */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7); /* Тень, как у модалки, чтобы отделять от фона */
    z-index: 100;
  }

  /* Ссылки внутри мобильного меню изначально чуть сдвинуты */
  .nav-menu a, .nav-menu .btn-nav {
    opacity: 0;
    transform: translateY(10px);
    width: 100%;
    text-align: center;
  }

  .nav-menu.mobile-open { display: flex; }
  .menu-item-row { flex-direction: column; align-items: flex-start; gap: 30px; }
  .item-main-info { padding-right: 0; }
  .footer-grid { grid-template-columns: 1fr; row-gap: 50px; }
}

@media (max-width: 768px) {
  .container { padding-left: 24px; padding-right: 24px; }
  .hero-title { font-size: 38px; }
  .luxury-title { font-size: 36px; }
  .tabs-nav { grid-template-columns: 1fr; row-gap: 5px; }
  .item-title-line { flex-direction: column; gap: 8px; }
  .item-dots { display: none; }
  .footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
  .modal-box-luxury { padding: 35px 24px; }
}

/* КЛАССЫ ДЛЯ ПЛАВНОГО СТАРТА АНИМАЦИИ GSAP */
.hero-text-block, 
.hero-glass-panel,
.about-text-content, 
.luxury-menu-wrapper .menu-item-row, 
.accordion-item,
.services-hero-content {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

.review-main-card a.phone-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: var(--accent-gold);
  transition: all 0.3s ease;
}

/* Дополнительные стили для новых секций и GSAP предзагрузки */
.workflow-intro, .workflow-step-card, .reviews-section {
  will-change: transform, opacity;
}

.phone-hover-link:hover {
  background: rgba(255, 190, 26, 0.1);
  border-color: var(--neon-gold) !important;
  color: var(--neon-gold) !important;
}

/* Фикс для стартовой невидимости анимируемых элементов */
.hero-text-block, 
.hero-glass-panel,
.about-text-content,
.accordion-item {
  opacity: 0;
  transform: translateY(30px);
}

/* Фикс отступа между галереей и принципом работы */
.workflow-section {
  margin-top: 25px !important; /* Уменьшаем верхний отступ секции */
}

/* Если у твоей секции галереи снизу тоже задан большой отступ, прижимаем её */
.portfolio-section, 
section.gallery-section { 
  margin-bottom: 25px !important;
}

/* ==========================================================================\n   СТРАНИЦА ОШИБКИ 404 (ERROR PAGE)\n   ========================================================================== */
.error-page-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: var(--bg-black);
  overflow: hidden; /* Исключаем появление скроллов из-за фоновых сфер */
}

.error-container {
  width: 100%;
  max-width: 600px;
  text-align: center;
  z-index: 10;
}

.error-card {
  padding: 60px 40px;
  border-radius: 24px; /* Крутые закругления, как мы настраивали */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.error-code {
  font-family: var(--font-poster);
  font-size: clamp(100px, 15vw, 150px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  margin: 0;
  text-shadow: 0 0 40px var(--neon-glow);
}

.error-title {
  font-size: clamp(22px, 4vw, 32px);
  color: var(--text-white);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.error-text {
  font-size: 16px;
  color: var(--text-gray);
  line-height: 1.6;
  max-width: 460px;
  margin-bottom: 15px;
}

.error-actions {
  display: inline-block;
  margin-top: 10px;
}

/* Адаптив под мелкие экраны */
@media (max-width: 576px) {
  .error-card {
    padding: 40px 24px;
  }
}