/* ============================================
   KARKASNYE LANDING — Специфичные стили
   ERA Concept Home — Каркасные дома
   ============================================ 
   
   АРХИТЕКТУРА БРЕЙКПОИНТОВ:
   ─────────────────────────
   Desktop XL:    1440px+    (большие мониторы)
   Desktop:       1024-1439px (стандартные мониторы)
   Tablet:        768-1023px  (планшеты landscape)
   Foldable:      650-767px   (складные устройства)
   Mobile:        0-649px     (телефоны)
   
   СТРУКТУРА HERO:
   ─────────────────────────
   .karkasnye-hero              — контейнер (100vh, background)
   .karkasnye-hero::before      — тёмный градиент снизу (z-index: 1)
   .karkasnye-hero__top-gradient — белый SVG градиент сверху (z-index: 1)
   .karkasnye-hero__content     — контент desktop (z-index: 2)
   .karkasnye-hero__mobile      — контент mobile (z-index: 2)
   
   ============================================ */

/* ============================================
   HTML/BODY — Базовые настройки
   ============================================ */
html {
  /* Базовый размер для rem — 16px на 1920px, масштабируется */
  font-size: clamp(14px, 0.833vw + 0.25rem, 18px);
  /* Лучший рендеринг текста на macOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* iOS Safari FIX: 
     - НЕ трогаем overflow на html — ломает touch scroll на iOS 17+!
     - scroll-behavior: auto — smooth тоже ломает iOS Safari scroll
  */
  scroll-behavior: auto !important;
  /* ⚠️ НЕ ДОБАВЛЯТЬ overflow-x: hidden — это БЛОКИРУЕТ touch scroll на iOS Safari! */
}

/* ============================================
   BODY — Белый фон
   ============================================ */
body {
  background: #ffffff;
  min-height: 100vh;
  /* Предотвращаем случайные масштабирования */
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  /* iOS Safari FIX: НЕ используем overflow на body — ломает touch scroll */
  max-width: 100vw;
  width: 100%;
  /* ⚠️ НЕ ДОБАВЛЯТЬ overflow-x: hidden — это БЛОКИРУЕТ touch scroll на iOS Safari! */
}

/* КРИТИЧНО: Mobile header не должен вызывать overflow */
.mobile-header {
  max-width: 100vw;
  overflow: hidden;
}

.mobile-header__container {
  max-width: 100%;
}

/* ============================================
   CSS CUSTOM PROPERTIES (переменные)
   ERA Design System — Модульная сетка на rem
   ============================================ */
:root {
  /* ===== BASE UNITS ===== */
  --base: 0.5rem;      /* 8px при 16px root */
  --module: 5rem;      /* 80px — ключевой модуль */
  
  /* ===== SPACING (rem для масштабируемости) ===== */
  --space-xs: 0.5rem;     /* 8px */
  --space-sm: 1rem;       /* 16px */
  --space-md: 1.5rem;     /* 24px */
  --space-lg: 2rem;       /* 32px */
  --space-xl: 2.5rem;     /* 40px */
  --space-2xl: 3.5rem;    /* 56px */
  --space-3xl: 5rem;      /* 80px = MODULE */
  --space-4xl: 7.5rem;    /* 120px = 1.5 × MODULE */
  --space-5xl: 10rem;     /* 160px = 2 × MODULE */
  
  /* ===== HEIGHTS ===== */
  --header-height: 7.5rem;   /* 120px = 1.5 × MODULE */
  --ribbon-height: 12.5rem;  /* 200px = 2.5 × MODULE */
  --card-height: 12.5rem;    /* 200px = 2.5 × MODULE */
  --btn-height: 3.5rem;      /* 56px = 7 × BASE */
  
  /* ===== SECTION PADDING ===== */
  --section-padding: 5rem;      /* 80px = 1 × MODULE */
  --section-padding-lg: 7.5rem; /* 120px = 1.5 × MODULE */
  
  /* ===== TYPOGRAPHY (rem для масштабируемости) ===== */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 2rem;      /* 32px */
  --text-3xl: 2.5rem;    /* 40px */
  --text-4xl: 3.5rem;    /* 56px — Section headings */
  --text-5xl: 5rem;      /* 80px = MODULE */
  --text-hero: 7.5rem;   /* 120px = 1.5 × MODULE */
  --text-display: 13.5rem; /* 216px — НАДЁЖНОСТЬ */
  
  /* ===== COLORS ===== */
  --color-primary: #C39A6B;
  --color-dark: #1a1a1a;
  --color-black: #000000;
  --color-white: #ffffff;
  
  /* ===== GLASS ===== */
  --glass-bg: rgba(0, 0, 0, 0.08);
  --glass-blur: blur(4px) grayscale(1);
  --glass-dark: #1a1a1a;
  
  /* ===== RADIUS ===== */
  --radius-sm: 0.5rem;   /* 8px */
  --radius-md: 0.75rem;  /* 12px */
  --radius-lg: 1.25rem;  /* 20px */
  --radius-xl: 1.5rem;   /* 24px */
  
  /* ===== ANIMATION ===== */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  
  /* ===== RESPONSIVE PADDING (clamp для адаптивности) ===== */
  --hero-padding: clamp(1rem, 5vw + 0.5rem, 15rem);
  
  /* ===== LEGACY (для совместимости — постепенно убрать) ===== */
  --hero-padding-xl: 237px;       /* Desktop XL — deprecated */
  --hero-padding-desktop: 120px;  /* Desktop — deprecated */
  --hero-padding-tablet: 60px;    /* Tablet — deprecated */
  --hero-padding-foldable: 32px;  /* Foldable */
  --hero-padding-mobile: 16px;    /* Mobile */
  
  /* Высота Hero */
  --hero-height: 960px;
  --hero-min-height: 100vh;
  
  /* Высота SVG градиента (% от hero) */
  --hero-gradient-height: 52.4%;
}

/* ============================================
   HEADER — Стеклянный с ЧБ эффектом
   Точно как лента - тёмное стекло
   ============================================ */
.era-header {
  z-index: 9999 !important; /* КРИТИЧНО: Header ПОВЕРХ всего контента включая Quiz */
  background: rgba(0, 0, 0, 0.08) !important; /* Тёмное стекло как лента */
  backdrop-filter: blur(4px) grayscale(1) !important;
  -webkit-backdrop-filter: blur(4px) grayscale(1) !important;
  box-shadow: none !important; /* Убираем любые тени */
}

/* Mobile Menu — ПОВЕРХ всего контента */
.mobile-menu {
  z-index: 10000 !important; /* Гарантированно поверх Hero и всего */
}

.mobile-menu__overlay {
  z-index: 10000 !important;
  background: rgba(0, 0, 0, 0.6) !important;
}

.mobile-menu__sidebar {
  z-index: 10001 !important; /* Sidebar ещё выше overlay */
}

/* ============================================
   Z-INDEX HIERARCHY — Порядок слоёв
   ============================================
   1. Body content:           z-index: auto (0)
   2. Project showcase:       z-index: 1 (ниже header!)
   3. Hero Ken Burns:         z-index: 5
   4. Header (fixed):         z-index: 9999
   5. Mobile menu:            z-index: 10000-10001
   6. Quiz modal:             z-index: 1 (ниже header)
   ============================================ */

/* Project showcase — НИЖЕ header чтобы картинки не перекрывали меню */
.project-showcase,
.project-showcase__wrapper,
.project-showcase__image-container {
  position: relative;
  z-index: 1 !important;
}

/* Карточка проекта тоже ниже header */
.project-showcase__card {
  z-index: 2 !important; /* Выше картинки, но ниже header */
}

/* ============================================
   KEN BURNS SLIDESHOW — Слайдшоу с эффектом
   ============================================ */
.hero-kenburns-container {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important; /* КРИТИЧНО: Должен быть ПОД контентом, не поверх */
  overflow: hidden;
  background: #000; /* Чёрный фон для кинематографичности */
  pointer-events: none !important; /* КРИТИЧНО: Не блокировать touch scroll! */
}

/* Все изображения абсолютно позиционированы поверх друг друга */
.hero-kenburns-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  /* Начальное состояние — невидимо (GSAP управляет opacity) */
  opacity: 0;
  will-change: transform, opacity;
}

/* Первое изображение видимо по умолчанию */
.hero-kenburns-img:first-of-type {
  opacity: 1;
}

/* ============================================
   HERO VIDEO BACKGROUND — Видеофон (LEGACY)
   ============================================ */
.hero-video-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Градиентный оверлей для плавного перехода в чёрный */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.3) 70%,
    rgba(0, 0, 0, 0.7) 85%,
    rgba(0, 0, 0, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Переход из hero в следующую секцию — чистый чёрный */
.hero-to-white-transition {
  display: none; /* Убираем белую полоску */
}

/* Убираем любые gaps/margins между hero и quality */
.karkasnye-hero {
  margin-bottom: 0 !important;
}

.quality-section {
  margin-top: 0 !important;
}

/* ============================================
   HERO SECTION — BASE (Mobile First)
   ============================================ */
.karkasnye-hero {
  position: relative;
  z-index: 10; /* Hero ПОВЕРХ Quality section */
  /* ЖЁСТКАЯ высота — НЕ min-height! */
  height: 100vh;
  height: 100svh;
  min-height: 0 !important; /* Сброс min-height из custom.css */
  max-height: 100vh;
  max-height: 100svh;
  background-color: #000 !important;
  background-image: none !important;
  /* КРИТИЧНО: overflow hidden со всех сторон */
  overflow: hidden !important;
}

/* Тёмный градиент снизу — теперь через overlay */
.karkasnye-hero::before {
  display: none; /* Отключаем, используем hero-video-overlay */
}

/* Белый SVG градиент сверху — ОТКЛЮЧЁН для анимированных слоёв */
.karkasnye-hero__top-gradient {
  display: none !important; /* Скрываем — мешает анимированным слоям */
  /*
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--hero-gradient-height);
  z-index: 6;
  pointer-events: none;
  */
}

.karkasnye-hero__top-gradient svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Все дочерние элементы поверх градиентов — только z-index, позиция задается индивидуально */
/* ИСКЛЮЧАЕМ Ken Burns контейнер — он должен быть z-index: 0, не блокировать touch */
.karkasnye-hero > *:not(.karkasnye-hero__top-gradient):not(.hero-layer):not(.hero-kenburns-container) {
  z-index: 10;
}

/* ============================================
   HERO CONTENT — MOBILE (default)
   ============================================ */
.karkasnye-hero__content {
  display: none; /* Скрыт на mobile */
  position: absolute;
  bottom: 15%;
  left: 0;
  right: 0;
}

.karkasnye-hero__mobile {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none; /* Не блокировать клики по хедеру */
}

/* Интерактивные элементы внутри hero mobile */
.karkasnye-hero__mobile-content,
.hero-mobile__cta,
.hero-mobile__cta button {
  pointer-events: auto;
}

.karkasnye-hero__mobile-content {
  position: absolute;
  bottom: 80px; /* Выше, чтобы стрелка не налагалась */
  left: var(--hero-padding-mobile);
  right: var(--hero-padding-mobile);
  z-index: 10;
}

/* Glass morphism для мобильной карточки */
.karkasnye-hero__mobile-content.glass-card {
  background: rgba(0, 0, 0, 0.3); /* Более легкий фон */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 20px;
  
  /* Начальное состояние — видима сразу (GSAP анимирует текст внутри) */
  opacity: 1;
  visibility: visible;
  will-change: transform, opacity;
}

.karkasnye-hero__card {
  max-width: 100%;
}

/* Чёрная кнопка (как hover на основном сайте) */
.era-btn--dark {
  background-color: #000000 !important;
  color: #ffffff;
  border-radius: 6px;
  padding: 12px 24px;
  white-space: nowrap;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  box-shadow: none !important; /* Без свечения */
}

.era-btn--dark:hover {
  background-color: #C39A6B !important; /* Инвертируем — на hover золотая */
  box-shadow: none !important;
}

/* ============================================
   GLASS MORPHISM CARD — анимированная ЛЕНТА
   Выезжает от левого края экрана
   Левый край ВСЕГДА за экраном — большой запас для elastic bounce
   ЧБ эффект: grayscale под стеклом
   ============================================ */
.karkasnye-hero__card.glass-card {
  /* Премиальное стекло — минимум размытия, лёгкая непрозрачность */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px) grayscale(1);
  -webkit-backdrop-filter: blur(4px) grayscale(1);
  
  /* ЛЕНТА: скруглён только справа */
  border-radius: 0 20px 20px 0;
  
  /* 
   * ОЧЕНЬ БОЛЬШОЙ ЗАПАС СЛЕВА для elastic bounce:
   * - 800px скрыто за экраном (гарантированно хватит для любого отскока)
   * - padding-left = 800 + 237 + 40 = 1077px
   */
  width: calc(38vw + 800px);
  padding: 24px 30px;
  padding-left: 1077px; /* 800 (скрытое) + 237 (как контент) + 40 (внутренний) */
  margin-left: -800px;
  
  /* ФИКСИРУЕМ ВЫСОТУ — чтобы не прыгала во время матрицы */
  min-height: 180px;
  box-sizing: border-box;
  
  /* Начальное состояние — невидима */
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

/* Текст внутри карточки — изначально скрыт + ФИКСИРОВАННАЯ ВЫСОТА */
.karkasnye-hero__card.glass-card .hero-cta__label {
  opacity: 0;
  visibility: hidden;
  min-height: 18px;
  line-height: 18px;
}

.karkasnye-hero__card.glass-card .hero-cta__title {
  opacity: 0;
  visibility: hidden;
  min-height: 44px;
  line-height: 1.1;
  white-space: nowrap;
  font-size: clamp(18px, 2vw, 28px); /* Уменьшенный размер для 1 строки на всех ПК */
}

.karkasnye-hero__card.glass-card .hero-cta__subtitle {
  opacity: 0;
  visibility: hidden;
  min-height: 48px;
  line-height: 1.5;
}

.karkasnye-hero__card.glass-card .hero-cta__button {
  opacity: 0;
  visibility: hidden;
}

/* Tablet (901-1023px) — padding-left = 800 + 60 + 40 = 900px */
@media (min-width: 901px) {
  .karkasnye-hero__card.glass-card {
    width: calc(45vw + 800px);
    padding: 24px 30px;
    padding-left: 900px;
    min-height: 160px;
  }
}

/* Desktop (1024-1439px) — padding-left = 800 + 120 + 40 = 960px */
@media (min-width: 1024px) {
  .karkasnye-hero__card.glass-card {
    width: calc(42vw + 800px);
    padding: 24px 30px;
    padding-left: 960px;
    min-height: 170px;
  }
}

/* Desktop XL (1440-1727px) — меньший padding для MacBook Pro 14" */
@media (min-width: 1440px) and (max-width: 1727px) {
  .karkasnye-hero__card.glass-card {
    width: calc(45vw + 800px);
    padding: 24px 30px;
    padding-left: 960px; /* Меньше чтобы текст поместился */
    min-height: 180px;
  }
}

/* Desktop XXL (1728px+) — оригинальный padding */
@media (min-width: 1728px) {
  .karkasnye-hero__card.glass-card {
    width: calc(40vw + 800px);
    padding: 24px 30px;
    padding-left: 1077px;
    min-height: 180px;
  }
}

/* ============================================
   HERO CONTENT — FOLDABLE (650px - 900px)
   ============================================ */
@media (min-width: 650px) and (max-width: 900px) {
  .karkasnye-hero__mobile-content {
    left: var(--hero-padding-foldable);
    right: var(--hero-padding-foldable);
    bottom: 100px;
  }
  
  .karkasnye-hero__top-gradient {
    height: 45%; /* Меньше на foldable */
  }
}

/* ============================================
   HERO CONTENT — TABLET (901px - 1023px)
   ============================================ */
@media (min-width: 901px) {
  .karkasnye-hero {
    height: var(--hero-height);
    max-height: 100vh;
  }
  
  .karkasnye-hero__content {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    position: absolute !important;
    bottom: 15% !important; /* Отступ от низа 15% */
    top: auto !important;
    left: 0;
    right: 0;
    padding: 0; /* Убираем padding - лента сама управляет */
  }
  
  .karkasnye-hero__mobile {
    display: none !important;
  }
  
  .karkasnye-hero__card {
    max-width: 500px;
  }
  
  /* Glass card — убираем max-width, используем свой width */
  .karkasnye-hero__card.glass-card {
    max-width: none;
  }
  
  .karkasnye-hero__top-gradient {
    height: 50%;
  }
}

/* ============================================
   HERO CONTENT — DESKTOP (1024px - 1439px)
   ============================================ */
@media (min-width: 1024px) {
  .karkasnye-hero__card {
    max-width: 550px;
  }
  
  .karkasnye-hero__card.glass-card {
    max-width: none;
  }
  
  .karkasnye-hero__top-gradient {
    height: var(--hero-gradient-height);
  }
}

/* ============================================
   HERO CONTENT — DESKTOP XL (1440px+)
   ============================================ */
@media (min-width: 1440px) {
  .karkasnye-hero__card {
    max-width: 600px;
  }
  
  .karkasnye-hero__card.glass-card {
    max-width: none;
  }
}

/* ============================================
   SWIPER GALLERY
   ============================================ */
.karkasnye-gallery-swiper {
  width: 100%;
  padding-bottom: 60px;
}

.karkasnye-gallery-swiper .swiper-slide {
  width: 80%;
  max-width: 1200px;
  border-radius: 16px;
  overflow: hidden;
}

.karkasnye-gallery-swiper .swiper-slide img {
  border-radius: 16px;
}

/* Navigation Arrows */
.karkasnye-gallery-swiper .swiper-button-prev,
.karkasnye-gallery-swiper .swiper-button-next {
  color: #C39A6B;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.karkasnye-gallery-swiper .swiper-button-prev:after,
.karkasnye-gallery-swiper .swiper-button-next:after {
  font-size: 20px;
  font-weight: bold;
}

.karkasnye-gallery-swiper .swiper-button-prev:hover,
.karkasnye-gallery-swiper .swiper-button-next:hover {
  background: #C39A6B;
  color: white;
}

/* Pagination */
.karkasnye-gallery-swiper .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #C39A6B;
  opacity: 0.3;
}

.karkasnye-gallery-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

@media (max-width: 900px) {
  .karkasnye-gallery-swiper .swiper-slide {
    width: 90%;
  }
  
  .karkasnye-gallery-swiper .swiper-button-prev,
  .karkasnye-gallery-swiper .swiper-button-next {
    display: none;
  }
}

/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq-item {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.faq-question {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background-color: rgba(195, 154, 107, 0.05);
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   FORM STYLES
   ============================================ */
#consultation-form select option {
  background: #1a1a1a;
  color: white;
}

#consultation-form input:focus,
#consultation-form select:focus {
  border-color: #C39A6B;
  box-shadow: 0 0 0 3px rgba(195, 154, 107, 0.2);
}

/* ============================================
   CATALOG CARDS HOVER
   ============================================ */
#catalog a {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#catalog a:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* ============================================
   ADVANTAGES CARDS
   ============================================ */
#advantages .grid > div {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#advantages .grid > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(195, 154, 107, 0.15);
}

/* ============================================
   FOOTER RESPONSIVE — для karkasnye
   ВАЖНО: На karkas не используется mobile-sections.js,
   поэтому CSS должен управлять показом футеров
   ============================================ */

/* Mobile: показываем mobile footer, скрываем desktop */
@media (max-width: 599px) {
  #footer {
    display: none !important;
  }
  
  #footer-mobile {
    display: block !important;
  }
}

/* Tablet/Foldable (600-900px): показываем desktop footer с адаптацией */
@media (min-width: 600px) and (max-width: 900px) {
  #footer-mobile {
    display: none !important;
  }
  
  #footer > div {
    flex-direction: column;
    gap: 40px;
    padding: 40px 16px;
  }
  
  #footer > div > div:first-child {
    width: 100%;
    gap: 24px;
    align-items: center;
    text-align: center;
  }
}

/* Desktop (>900px): всё по умолчанию */
@media (min-width: 901px) {
  #footer-mobile {
    display: none !important;
  }
}

/* ============================================
   PROJECT SHOWCASE — Референс Webflow PROJECTS
   
   Design System Values:
   - Section padding: var(--section-padding) = 80px
   - Card height: var(--card-height) = 200px
   - Card padding: var(--space-lg) = 32px
   - Border radius: var(--radius-lg) = 20px
   - Heading: var(--text-4xl) = 56px
   ============================================ */
.project-showcase {
  position: relative;
  width: 100%;
  /* ПРОЗРАЧНЫЙ ФОН — градиент body просвечивает */
  background: transparent;
  padding: var(--section-padding) 0;
  /* ВАЖНО: overflow:hidden ломает absolute позиционирование карточки */
  overflow: visible;
}

/* Все блоки после первого идут встык (без padding-top) */
.project-showcase + .project-showcase {
  padding-top: 0;
}

/* Заголовок ПРОЕКТЫ */
.project-showcase__heading {
  font-family: 'Rising Sun', sans-serif;
  font-size: clamp(32px, 5vw, var(--text-4xl));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  margin: 0 0 var(--space-xl);
  padding-left: var(--space-md);
  text-transform: uppercase;
}

/* ============================================
   ПЕРЕМЕННЫЕ ДЛЯ PROJECT SHOWCASE
   Единая система координат для точного выравнивания
   ============================================ */
.project-showcase {
  /* Переменные для геометрии */
  --showcase-image-width: 85%;  /* % от wrapper, не vw! */
  --showcase-card-width: 45%;
  --showcase-overlap: 30%;      /* Перекрытие карточки на картинку */
  overflow-x: hidden; /* Только горизонтальная обрезка — НЕ блокируем вертикальный scroll! */
  overflow-y: visible;
}

/* Контейнер проекта — 100% без scrollbar проблем */
.project-showcase__wrapper {
  position: relative;
  width: 100%;
  margin-left: 0;
}

/* Картинка — от левого края, используем переменную */
.project-showcase__image-container {
  position: relative;
  width: var(--showcase-image-width);
  margin-left: 0;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.project-showcase__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   КАРТОЧКА — flex контейнер с двумя колонками
   Левая: на прозрачном стекле (на картинке)
   Правая: на чёрном фоне (за картинкой)
   
   ГЕОМЕТРИЯ (обычная версия):
   - Картинка: 0% → 85% (ширина 85%)
   - Карточка: 55% → 100% (ширина 45%)
   - Перекрытие: 55% → 85% = 30%
   - Стекло: 30/45 = 66.67% карточки
   - Чёрный: 15/45 = 33.33% карточки
   ============================================ */
.project-showcase__card {
  position: absolute;
  /* Позиция относительно wrapper (теперь в %) */
  left: calc(var(--showcase-image-width) - var(--showcase-overlap));
  width: var(--showcase-card-width);
  /* Вертикально по центру */
  top: 50%;
  transform: translateY(-50%);
  
  /* Flex для двух колонок */
  display: flex;
  
  /* Скругление только слева */
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: hidden;
  
  z-index: 10;
}

/* Стекло-фон — абсолютно позиционировано */
.project-showcase__card-glass {
  position: absolute;
  inset: 0;
  
  /* Градиент: прозрачный (на картинке) → чёрный (за картинкой) */
  /* Картинка 85vw, карточка от 55vw шириной 45vw */
  /* Часть на картинке = 85vw - 55vw = 30vw из 45vw = 66.67% */
  background: linear-gradient(
    to right,
    var(--glass-bg) 0%,
    var(--glass-bg) 66.67%,
    var(--glass-dark) 66.67%,
    var(--glass-dark) 100%
  );
  
  z-index: 0;
}

/* Blur только на левой части (на картинке) */
.project-showcase__card-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* Ширина = часть на картинке = 30vw / 45vw = 66.67% */
  width: 66.67%;
  height: 100%;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* ============================================
   ЛЕВЫЙ БЛОК — на картинке
   ============================================ */
.project-showcase__card-left {
  position: relative;
  /* Ширина = часть на картинке = 66.67% */
  flex: 0 0 66.67%;
  padding: var(--space-lg);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Заголовок — ЗОЛОТОЙ */
.project-showcase__card-title {
  font-family: 'Rising Sun', sans-serif;
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 12px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Подзаголовок — белый */
.project-showcase__card-subtitle {
  font-family: 'Rising Sun', sans-serif;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-white);
  margin: 0;
  letter-spacing: 0.02em;
}

/* ============================================
   ПРАВЫЙ БЛОК — на чёрном фоне
   ============================================ */
.project-showcase__card-right {
  position: relative;
  flex: 1; /* занимает остальное */
  padding: var(--space-lg);
  padding-left: var(--space-xl); /* отступ от границы */
  z-index: 1;
  display: flex;
  align-items: center;
  min-width: 200px;
}

/* Список характеристик */
.project-showcase__card-specs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-showcase__card-specs li {
  font-family: 'Rising Sun', sans-serif;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.9;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ============================================
   PROJECT SHOWCASE — RESPONSIVE
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
  .project-showcase {
    padding: 60px 0 80px;
  }
  
  .project-showcase__image-container {
    width: 75%;
  }
  
  .project-showcase__card {
    width: calc(25% + 18%);
    min-width: 320px;
    padding: 32px;
  }
}

/* ============================================
   MOBILE — FULLSCREEN PROJECT CARDS
   Один проект = один экран
   Картинка сверху → чёрный блок снизу
   ============================================ */
@media (max-width: 900px) {
  
  /* Секция проекта — почти fullscreen */
  .project-showcase {
    padding: 0;
    min-height: 100svh; /* Один проект = один экран */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden; /* Только горизонтальный — НЕ блокируем scroll! */
    overflow-y: visible; /* ЯВНО разрешаем вертикальный scroll */
    background: #000 !important; /* Убираем белые пробелы между секциями */
  }
  
  /* Убираем отступ между проектами */
  .project-showcase + .project-showcase {
    margin-top: 0;
  }
  
  /* Заголовок ПРОЕКТЫ — только у первого */
  .project-showcase__heading {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 14px;
    letter-spacing: 0.3em;
    margin: 0;
    padding: 0;
    z-index: 10;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
  
  /* Wrapper — вертикальный стек */
  .project-showcase__wrapper {
    position: relative;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    display: flex;
  }
  
/* Картинка — занимает верхнюю часть с навигацией поверх */
  .project-showcase__image-container {
    width: 100%;
    aspect-ratio: unset; /* Убираем aspect-ratio для гибкой высоты */
    height: 55svh; /* Увеличенная высота — навигация поверх */
    min-height: 280px;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    z-index: 10; /* Выше карточки для корректного stacking context */
  }
  
  /* Убираем градиент — теперь есть навигация */
  .project-showcase__image-container::after {
    display: none;
  }
  
  /* Swiper внутри контейнера */
  .project-showcase__swiper {
    width: 100%;
    height: 100%;
  }
  
  .project-showcase__swiper .swiper-slide {
    width: 100%;
    height: 100%;
  }

  .project-showcase__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%; /* Немного выше центра чтобы показать больше дома */
  }
  
  /* Обложка проекта — центрируем нормально */
  .swiper-slide--cover .project-showcase__image {
    object-position: center center;
  }
  
  /* Галерейная навигация — теперь поверх картинки */
  /* Стили выше в секции "МОБИЛЬНАЯ ГАЛЕРЕЯ ПРОЕКТА" */
  
  /* Карточка с инфой — внизу, чёрный фон, КОМПАКТНАЯ */
  .project-showcase__card {
    position: relative;
    left: 0 !important;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: none;
    min-width: auto;
    border-radius: 0;
    padding: 16px 20px 100px; /* Увеличили отступ снизу для стрелки */
    margin-top: 0;
    flex-direction: column;
    flex: 1;
    display: flex;
    background: #000;
    z-index: 1; /* Ниже image-container чтобы навигация работала */
    overflow-y: auto; /* Разрешаем скролл если контент не влезает */
  }
  
  /* Скрываем стеклянный градиент */
  .project-showcase__card-glass {
    display: none;
  }
  
  /* Правый блок — ТОЛЬКО название + subtitle (tabs в навигации) */
  .project-showcase__card-right {
    width: 100%;
    padding: 0;
    flex: 0 0 auto; /* Не растягиваем */
    order: -1; /* Первым! */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  /* Левый блок — спеки — идёт ВТОРЫМ */
  .project-showcase__card-left {
    width: 100%;
    padding: 0;
    order: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 12px;
    text-align: center;
  }
  
  .project-showcase__card-title {
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #C39A6B;
    margin-bottom: 4px;
  }
  
  .project-showcase__card-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
  }
  
  .project-showcase__card-specs {
    display: grid;
    grid-template-columns: repeat(2, auto); /* auto вместо 1fr для центрирования */
    gap: 10px 24px;
    justify-content: center; /* Центрируем grid */
  }
  
  /* Для очень узких экранов уменьшаем gap */
  @media (max-width: 360px) {
    .project-showcase__card-specs {
      gap: 10px 12px;
    }
    .project-showcase__card-specs li {
      font-size: 13px;
    }
  }
  
  .project-showcase__card-specs li {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    padding-left: 12px;
    position: relative;
  }
  
  .project-showcase__card-specs li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: #C39A6B;
    border-radius: 50%;
  }
  
  /* ============================================
     СТРЕЛКИ НАВИГАЦИИ — СКРЫТЫ
     Пользователь попросил убрать, используем native scroll
     ============================================ */
  .project-showcase__next-arrow,
  .universal-next-arrow {
    display: none !important; /* Полностью скрываем стрелки */
  }
  
  /* ============================================
     МОБИЛЬНАЯ ГАЛЕРЕЯ ПРОЕКТА
     Навигация поверх картинки как на ПК
     ============================================ */
  
  /* ПОКАЗЫВАЕМ nav на картинке — КОМПАКТНЫЙ, 1 строка */
  .project-gallery__nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    
    /* Позиционирование внизу картинки */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto !important;
    z-index: 50;
    
    /* Glass-эффект — ЛЕГКИЙ */
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(6px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(120%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    
    /* Flexbox — 1 СТРОКА, всё в ряд */
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: center;
    padding: 6px 8px !important; /* Компактнее */
    gap: 6px;
  }
  
  /* Стрелки в навигации — скрываем (они отдельно на картинке) */
  .project-gallery__arrow {
    display: none !important;
  }
  
  /* Thumbnails — компактный мобильный вид, в одну строку по центру */
  .project-gallery__thumbs {
    display: flex !important;
    gap: 6px !important;
    justify-content: center !important;
    flex: 0 0 auto;
    padding: 0;
    width: 100% !important;
  }
  
  /* Thumbnail — компактный pill с текстом */
  .project-gallery__thumb {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    
    /* ВАЖНО: ЯРКАЯ border для кликабельности */
    border: 2px solid rgba(195, 154, 107, 0.85) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    
    /* Голографическое свечение (Ark Raiders style) */
    animation: thumb-glow-mobile 12s ease-in-out infinite !important;
    
    overflow: visible !important;
    cursor: pointer !important;
  }
  
  /* Поочередные задержки для мобильных кнопок */
  .project-gallery__thumb:nth-child(1) { animation-delay: 0s !important; }
  .project-gallery__thumb:nth-child(2) { animation-delay: 3s !important; }
  .project-gallery__thumb:nth-child(3) { animation-delay: 6s !important; }
  .project-gallery__thumb:nth-child(4) { animation-delay: 9s !important; }
  
  /* Скрываем картинку в thumb — показываем только текст */
  .project-gallery__thumb-img {
    display: none !important;
  }
  
  /* Label — компактный текст */
  .project-gallery__thumb-label {
    position: static !important;
    background: none !important;
    padding: 0 !important;
    font-size: 14px !important;  /* Увеличено на 30%: 11px → 14px */
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    inset: unset !important;
    display: block !important;
  }
  
  /* Активный thumb */
  .project-gallery__thumb--active {
    background: #C39A6B !important;
    border-color: #C39A6B !important;
    box-shadow: 0 3px 10px rgba(195, 154, 107, 0.5) !important;
  }
  
  .project-gallery__thumb--active .project-gallery__thumb-label {
    color: #000 !important;
    font-weight: 600 !important;
  }
  
  /* CTA кнопка — КОМПАКТНАЯ версия */
  .project-gallery__cta {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important; /* Авто-ширина по контенту */
    max-width: none !important;
    margin: 0 auto !important;
    padding: 10px 18px !important; /* Удобно для тапа */
    border-radius: 16px !important; /* Pill-стиль */
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    position: relative !important;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    color: rgba(195, 154, 107, 0.96) !important; /* Золотой текст */
    border: 1px solid rgba(195, 154, 107, 0.62) !important; /* Золотая рамка */
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 30px rgba(195, 154, 107, 0.16) !important;
    white-space: nowrap !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .project-gallery__cta::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 45%, transparent 100%);
    opacity: 0.55;
  }

  .project-gallery__cta::after {
    content: '›';
    position: relative;
    margin-left: 10px;
    font-size: 18px;
    line-height: 1;
    opacity: 0.85;
    transform: translateY(-0.5px);
  }

  .project-gallery__cta:active {
    transform: translateY(1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 22px rgba(195, 154, 107, 0.12) !important;
  }

  .project-gallery__cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(195, 154, 107, 0.35), 0 10px 24px rgba(0, 0, 0, 0.28), 0 10px 28px rgba(195, 154, 107, 0.22) !important;
  }

  @media (hover: hover) {
    .project-gallery__cta:hover {
      background: rgba(0, 0, 0, 0.34) !important;
      border-color: rgba(195, 154, 107, 0.72) !important;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 34px rgba(195, 154, 107, 0.18) !important;
    }
  }
  
  /* --- НОВЫЕ ЭЛЕМЕНТЫ НА КАРТИНКЕ --- */
  
  /* Контейнер для счётчика — только сверху слева */
  .project-showcase__image-controls {
    position: absolute;
    top: 12px;
    left: 12px;
    display: block !important;
    z-index: 15;
  }

  /* Счётчик фото (1/4) */
  .project-showcase__photo-counter {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    font-family: 'Rising Sun', sans-serif;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 12px;
  }

  /* Контейнер стрелок — скрываем, стрелки теперь отдельно по краям */
  .project-showcase__photo-arrows {
    display: none;
  }

  /* Стрелки листания фото — по краям картинки по центру */
  .project-showcase__photo-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #fff;
    transition: all 0.2s ease;
    z-index: 15;
    padding: 0;
  }

  /* Стрелка НАЗАД — слева */
  .project-showcase__photo-arrow--prev {
    left: 0;
  }

  /* Стрелка ВПЕРЁД — справа */
  .project-showcase__photo-arrow--next {
    right: 0;
  }

  .project-showcase__photo-arrow:active {
    opacity: 0.7;
  }

  .project-showcase__photo-arrow svg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  }

  /* Скрыто когда disabled */
  .project-showcase__photo-arrow:disabled {
    opacity: 0.2;
  }
  
  /* --- THUMBNAILS В ЧЁРНОМ БЛОКЕ — СКРЫТЫ (теперь в навигации) --- */
  
  /* Скрываем tabs размеров — они теперь в project-gallery__nav */
  .project-showcase__size-tabs {
    display: none !important;
  }
  
  /* --- КОРРЕКТИРОВКА РАСПОЛОЖЕНИЯ ЭЛЕМЕНТОВ --- */
  
  /* Стрелка навигации — уменьшить отступ снизу */
  .project-showcase__next-arrow {
    bottom: 12px;
  }
  
  /* Specs — чуть компактнее */
  .project-showcase__card-specs {
    gap: 6px;
  }
  
  /* Отключаем анимацию у активного thumb */
  .project-gallery__thumb--active {
    animation: none !important;
  }
  
  /* Голографическое свечение для мобильных (Ark Raiders style) */
  @keyframes thumb-glow-mobile {
    0% {
      box-shadow: 0 3px 10px rgba(195, 154, 107, 0.35);
      border-color: rgba(195, 154, 107, 0.85);
    }
    
    /* Голубое неоновое свечение */
    4% {
      box-shadow: 
        0 0 20px rgba(0, 191, 255, 0.9),
        0 0 40px rgba(0, 191, 255, 0.6),
        0 0 60px rgba(0, 191, 255, 0.3);
      border-color: rgba(0, 191, 255, 1);
    }
    
    /* Фиолетовое свечение */
    8% {
      box-shadow: 
        0 0 20px rgba(138, 43, 226, 0.9),
        0 0 40px rgba(138, 43, 226, 0.6),
        0 0 60px rgba(138, 43, 226, 0.3);
      border-color: rgba(138, 43, 226, 1);
    }
    
    /* Розовое свечение */
    12% {
      box-shadow: 
        0 0 20px rgba(255, 20, 147, 0.9),
        0 0 40px rgba(255, 20, 147, 0.6),
        0 0 60px rgba(255, 20, 147, 0.3);
      border-color: rgba(255, 20, 147, 1);
    }
    
    /* Оранжевое свечение */
    16% {
      box-shadow: 
        0 0 20px rgba(255, 140, 0, 0.9),
        0 0 40px rgba(255, 140, 0, 0.6),
        0 0 60px rgba(255, 140, 0, 0.3);
      border-color: rgba(255, 140, 0, 1);
    }
    
    /* Золотое свечение (пик) */
    20% {
      box-shadow: 
        0 0 20px rgba(195, 154, 107, 0.9),
        0 0 40px rgba(195, 154, 107, 0.6),
        0 0 60px rgba(195, 154, 107, 0.3);
      border-color: rgba(195, 154, 107, 1);
    }
    
    /* Угасание */
    25% {
      box-shadow: 0 3px 10px rgba(195, 154, 107, 0.35);
      border-color: rgba(195, 154, 107, 0.85);
    }
    
    100% {
      box-shadow: 0 3px 10px rgba(195, 154, 107, 0.35);
      border-color: rgba(195, 154, 107, 0.85);
    }
  }
}

/* ============================================
   MOBILE LANDSCAPE — Fold и горизонтальные телефоны
   Картинка занимает больше места при маленькой высоте
   ============================================ */
@media (max-width: 900px) and (orientation: landscape) {
  /* Секция проекта — не fullscreen, скролл между проектами */
  .project-showcase {
    min-height: auto;
    height: auto;
    overflow: hidden; /* Предотвращаем выход картинки за границы */
  }
  
  /* Картинка — фиксированная высота 70% viewport */
  .project-showcase__image-container {
    aspect-ratio: unset !important;
    height: 70vh !important;
    max-height: none !important;
    min-height: 300px;
    width: 100%;
    overflow: hidden; /* Обрезаем картинку чётко */
    position: relative;
    z-index: 1; /* Картинка ниже карточки */
  }
  
  /* Swiper растягиваем на всю высоту */
  .project-showcase__swiper,
  .project-showcase__swiper .swiper-wrapper,
  .project-showcase__swiper .swiper-slide {
    height: 100% !important;
  }
  
  /* Карточка — очень компактная для landscape */
  .project-showcase__card {
    padding: 12px 20px 50px;
    flex: 0 0 auto;
    position: relative;
    z-index: 2; /* Карточка поверх картинки */
    background: #000; /* Гарантируем чёрный фон */
  }
  
  /* Specs в 2 колонки компактнее */
  .project-showcase__card-specs {
    gap: 2px 20px;
  }
  
  .project-showcase__card-specs li {
    font-size: 12px;
    line-height: 1.4;
  }
  
  /* Tabs площадей — компактнее */
  .project-showcase__area-tabs {
    gap: 6px;
    margin-bottom: 8px;
  }
  
  .project-showcase__area-tab {
    padding: 6px 12px;
    font-size: 12px;
  }
  
  /* Заголовок проекта — компактнее */
  .project-showcase__card-title {
    font-size: 20px;
    margin-bottom: 0;
  }
  
  .project-showcase__card-subtitle {
    font-size: 12px;
  }
  
  /* Стрелка навигации — ближе */
  .project-showcase__next-arrow {
    bottom: 6px;
  }
}

/* ============================================
   FOLDABLE LANDSCAPE — компактная навигация галереи
   Устройства 700-900px в ширину, landscape
   Например Samsung Galaxy Fold (829x690)
   ============================================ */
@media (min-width: 700px) and (max-width: 900px) and (orientation: landscape) {
  /* Навигационная панель — ещё компактнее */
  .project-gallery__nav {
    padding: 6px 10px !important;
    gap: 4px !important;
    height: auto !important;
  }
  
  /* Thumbnails — меньше отступы */
  .project-gallery__thumbs {
    gap: 4px !important;
    padding: 0 8px !important;
  }
  
  /* Thumb buttons — ещё компактнее */
  .project-gallery__thumb {
    padding: 3px 8px !important;
    border-radius: 10px !important;
  }
  
  /* Label — меньше шрифт */
  .project-gallery__thumb-label {
    font-size: 10px !important;
  }
  
  /* CTA — компактнее */
  .project-gallery__cta {
    padding: 8px 12px !important;
    font-size: 12px !important;
    max-width: 280px !important;
  }
  
  /* Стрелки листания — ближе к центру картинки (выше nav) */
  .project-showcase__photo-arrow {
    top: calc(50% - 45px) !important; /* Поднимаем выше центра чтобы не перекрывать nav */
  }
  
  /* КРИТИЧЕСКИ ВАЖНО: Карточка НЕ должна перекрывать навигацию! */
  .project-showcase__card {
    padding-bottom: 90px !important; /* Увеличен отступ для компактной навигации высотой ~73px */
    z-index: 1 !important; /* Ниже навигации (z-index: 50) */
  }
}

/* ============================================
   DESKTOP — возврат к стандартному виду
   ============================================ */
@media (min-width: 901px) {
  .project-showcase__next-arrow {
    display: none;
  }
  
  /* На desktop показываем project-gallery__nav */
  .project-gallery__nav {
    display: flex !important;
  }
  
  /* На desktop скрываем новые мобильные элементы */
  .project-showcase__image-controls {
    display: none !important;
  }
  
  .project-showcase__size-tabs {
    display: none !important;
  }
}

/* ============================================
   PROJECT SHOWCASE — REVERSED (зеркальная версия)
   Картинка справа, карточка слева
   Чередование: нечётные слева, чётные справа
   
   ГЕОМЕТРИЯ:
   - Картинка: от 15vw до 100vw (ширина 85vw, margin-left: auto)
   - Карточка: от 0 до 45vw (ширина 45vw)
   - Граница стекло/чёрный: на 15vw (где начинается картинка)
   - Часть на картинке: 45vw - 15vw = 30vw = 66.67% карточки
   - Чёрная часть: 15vw = 33.33% карточки
   ============================================ */

/* Картинка — справа вместо слева */
.project-showcase--reversed .project-showcase__image-container {
  margin-left: auto;
  margin-right: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg); /* скругление слева */
}

/* Карточка — слева вместо справа */
.project-showcase--reversed .project-showcase__card {
  left: 0;
  right: auto;
  /* Скругление справа вместо слева */
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  /* Flex: чёрный слева (33.33%), стекло справа (66.67%) */
  flex-direction: row;
}

/* Стекло-фон — градиент: чёрный → стекло */
/* Зеркально: чёрный слева (33.33%), стекло справа (66.67%) */
.project-showcase--reversed .project-showcase__card-glass {
  background: linear-gradient(
    to right,
    var(--glass-dark) 0%,
    var(--glass-dark) 33.33%,
    var(--glass-bg) 33.33%,
    var(--glass-bg) 100%
  );
}

/* Blur только на правой части (на картинке) */
.project-showcase--reversed .project-showcase__card-glass::before {
  left: auto;
  right: 0;
  width: 66.67%;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* Левый блок — теперь на чёрном фоне (спеки) */
/* ЗЕРКАЛЬНО: такая же ширина как у правого блока в обычной версии */
.project-showcase--reversed .project-showcase__card-left {
  flex: 1; /* Такой же flex как у __card-right в обычной версии */
  min-width: 200px;
  padding: var(--space-lg);
  padding-left: var(--space-xl); /* отступ от края */
  display: flex;
  align-items: center;
}

/* Правый блок — теперь на стекле (заголовок ШАЛЕ) */
/* ЗЕРКАЛЬНО: текст прижат к ПРАВОМУ краю (как у БАРНХАУС к левому) */
.project-showcase--reversed .project-showcase__card-right {
  flex: 0 0 66.67%; /* Широкая часть — на картинке */
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end; /* Текст к правому краю */
  text-align: right;
}

/* ============================================
   PROJECT SHOWCASE REVERSED — RESPONSIVE
   ============================================ */

/* Mobile — обе версии становятся fullscreen вертикальными */
@media (max-width: 900px) {
  .project-showcase--reversed .project-showcase__image-container {
    margin-left: 0;
    border-radius: 0;
  }
  
  .project-showcase--reversed .project-showcase__card {
    flex-direction: column;
    border-radius: 0;
    left: 0 !important;
    background: #000;
  }
  
  .project-showcase--reversed .project-showcase__card-glass {
    display: none;
  }
  
  .project-showcase--reversed .project-showcase__card-glass::before {
    display: none;
  }
  
  .project-showcase--reversed .project-showcase__card-left,
  .project-showcase--reversed .project-showcase__card-right {
    flex: none;
    width: 100%;
    padding: 0;
    text-align: center; /* Унифицировано: всё по центру как у обычных блоков */
    align-items: center; /* Унифицировано: всё по центру */
  }
  
  /* Меняем порядок: название сверху, спеки снизу */
  .project-showcase--reversed .project-showcase__card-right {
    order: -1;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 16px;
  }
  
  .project-showcase--reversed .project-showcase__card-left {
    order: 0;
    padding-top: 0;
  }
  
  /* Название в reversed блоках */
  .project-showcase--reversed .project-showcase__card-title {
    font-size: 28px;
    color: #C39A6B;
    margin-bottom: 4px;
  }
  
  .project-showcase--reversed .project-showcase__card-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
  }
  
  /* Спеки в reversed — grid layout, центрировано */
  .project-showcase--reversed .project-showcase__card-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    text-align: left; /* Атрибуты лучше читаются слева */
  }
  
  /* Tabs площадей в reversed — центрируем */
  .project-showcase--reversed .project-showcase__size-tabs {
    justify-content: center;
  }
}

/* ============================================
   CONSULTATION SECTION — Фон, отступ и белый градиент
   Остальные стили берутся из custom.css (consult-desktop-*)
   ============================================ */
.consultation-section {
  position: relative;
  margin-top: var(--space-4xl); /* Отступ от СКАНДИ */
  background-image: url('assets/img/optimized/consultation-bg.webp') !important;
}

/* Белый градиент сверху — плавный переход от белого фона к картинке */
.consultation-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, #ffffff 0%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}

/* Контент поверх градиента */
.consultation-section .consult-desktop-container {
  position: relative;
  z-index: 1;
  transform: translateY(-50px); /* Поднимаем текст выше */
}

/* ============================================
   QUALITY SECTION — Блок "Надёжность"
   Трафаретный текст с фоновой картинкой
   ============================================ */
.quality-section {
  position: relative;
  z-index: 5; /* Ниже Hero (z-index: 10), но имеет свой контекст */
  width: 100%;
  height: auto;
  min-height: 100svh;
  overflow: hidden; /* Скрываем выступающий quality-bg */
  background: #000;
}

/* Quiz v2 — Clean white, auto height */
#quiz {
  background: #ffffff;
  position: relative;
  z-index: 1;
}

/* Фоновая картинка (видна через трафарет) */
/* PARALLAX: картинка больше контейнера + начинает снизу */
.quality-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130%; /* БОЛЬШЕ секции чтобы при параллаксе не появились пустоты */
  background-image: url('../assets/img/optimized/technologiya/karkasnyj.webp');
  background-size: cover;
  background-position: center;
  z-index: 1;
  will-change: transform; /* Оптимизация GPU */
}

/* Чёрный оверлей */
.quality-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  mix-blend-mode: multiply;
  z-index: 2;
}

/* Контейнер контента — умная сетка */
.quality-content {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 55vh; /* Уменьшено с 75vh */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Контент ближе к верху */
  gap: 40px;
  padding: 100px 0 120px; /* Уменьшен padding снизу */
}

/* Верхняя группа: заголовок + подзаголовок */
.quality-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px; /* Отступ между НАДЁЖНОСТЬ и подзаголовком */
  overflow: hidden; /* Предотвращаем overflow от широкого quality-title */
}

/* Обёртка заголовка */
.quality-title-wrapper {
  width: 100%;
  text-align: center;
}

/* Слово НАДЁЖНОСТЬ — трафарет с картинкой через буквы */
/* Занимает ~40% высоты блока */
/* PARALLAX: background-position анимируется через GSAP */
.quality-title {
  font-family: 'Rising Sun', sans-serif;
  /* 13vw = влезает в viewport (слово ~7.4x font-size) */
  font-size: clamp(60px, 13vw, 220px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Трафаретный эффект: фон видно через буквы */
  background-image: url('../assets/img/optimized/technologiya/karkasnyj.webp');
  background-size: 100vw 200%; /* Высота 200% чтобы было куда двигаться */
  background-position: center 0%; /* Начало: верх картинки */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin: 0;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  gap: 0;
  /* Вытягиваем буквы немного по высоте */
  transform: scaleY(1.1);
  will-change: background-position; /* Оптимизация для анимации */
}

/* Каждая буква */
.quality-char {
  display: inline-block;
  min-width: 0.6em;
  text-align: center;
  opacity: 0;
  transition: none;
  /* Наследуем трафарет от родителя */
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Буква в состоянии "матрица" — белая с полупрозрачностью */
.quality-char.scrambling {
  opacity: 1;
  background: none;
  color: rgba(255,255,255,0.5);
}

/* Буква готова — показывает картинку через себя */
.quality-char.revealed {
  opacity: 1;
  /* Трафарет активен */
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Подзаголовок — чисто белый */
.quality-subtitle {
  font-family: 'Rising Sun', sans-serif;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
  color: #fff;
  text-align: center;
  margin: 0;
  opacity: 0;
  transform: translateY(20px);
}

/* Текстовые блоки — 3 колонки по центру, текст влево */
.quality-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 320px));
  gap: 40px;
  justify-content: center;
  opacity: 0;
  transform: translateY(30px);
}

.quality-feature {
  text-align: left;
  max-width: 320px;
}

.quality-feature-title {
  font-family: 'Rising Sun', sans-serif;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  color: #fff;
  margin: 0 0 12px;
  white-space: nowrap;
}

.quality-feature-text {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 400;
  color: #fff;
  line-height: 1.6;
  margin: 0;
}

/* ============================================
   QUALITY SECTION — RESPONSIVE
   ============================================ */

/* Tablet (768-1024px) */
@media (max-width: 1024px) {
  .quality-section {
    min-height: 70vh;
  }
  
  .quality-content {
    min-height: 70vh;
    padding: 100px 3vw 50px;
  }
  
  .quality-header {
    gap: 30px;
  }
  
  .quality-title {
    font-size: clamp(45px, 9vw, 95px);
  }
  
  .quality-features {
    gap: 24px;
    grid-template-columns: repeat(3, minmax(140px, 200px));
  }
  
  .quality-feature {
    max-width: 200px;
  }
}

/* Mobile (до 900px) — вертикальные блоки */
@media (max-width: 900px) {
  .quality-section {
    /* min-height: auto; — УДАЛЕНО для Parallax */
    min-height: 100svh; /* Возвращаем высоту экрана для sticky эффекта */
  }
  
  .quality-content {
    min-height: auto;
    padding: 60px 16px 40px; /* Уменьшили верхний padding */
    gap: 24px; /* Компактнее */
    justify-content: flex-start;
  }
  
  .quality-header {
    gap: 16px;
  }
  
  /* НАДЁЖНОСТЬ - сразу видима на мобильных (без анимации) */
  .quality-char {
    opacity: 1 !important;
    background: inherit;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  
  .quality-title {
    font-size: clamp(32px, 11vw, 56px); /* Увеличили размер */
    transform: scaleY(1.05);
  }
  
  .quality-subtitle {
    font-size: 16px;
  }
  
  .quality-features {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .quality-feature {
    text-align: left;
    padding: 0 10px;
    max-width: 100%;
  }
  
  .quality-feature-title {
    font-size: 18px;
  }
  
  .quality-feature-text {
    font-size: 14px;
  }
}

/* ============================================
   BENTO GRID — Преимущества каркасных домов
   ТРАФАРЕТ: белый фон с вырезами, за ним картинка
   ============================================ */

.bento-section {
  position: relative;
  width: 100%;
  min-height: 80vh;
  overflow: hidden;
  background: #fff;
}

/* Слой 1: Картинка для параллакса */
.bento-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130%;
  background-image: url('assets/img/bento-bg.webp');
  background-size: cover;
  background-position: center;
  z-index: 1;
  will-change: transform;
}

/* Слой 2: Белый оверлей — JS накладывает на него SVG маску с дырами */
.bento-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 2;
  pointer-events: none;
  /* Маска применяется через JS: mask-image: url(#bentoMask) */
}

/* Контейнер контента — прозрачный, видим сквозь него */
.bento-container {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-4xl) 40px;
  background: transparent; /* ПРОЗРАЧНЫЙ! */
}

/* Header секции */
.bento-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
  position: relative;
  z-index: 3;
}

/* Трафаретный заголовок — текст через который видно фон */
.bento-title-stencil {
  font-family: 'Rising Sun', sans-serif;
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 40px 0;
  text-align: center;
  white-space: nowrap; /* Всегда в одну строку */
  /* Трафаретный эффект: фон видно через буквы */
  background-image: url('assets/img/bento-bg.webp');
  background-size: cover;
  background-position: center;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  /* Позиционирование фона синхронно с основным фоном */
  background-attachment: fixed;
}

.bento-title {
  font-size: var(--text-4xl);
  font-weight: 500;
  color: var(--color-dark);
  margin: 0;
  letter-spacing: -0.02em;
}

/* GRID — прозрачный, карточки = окна */
.bento-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 40px;
  min-height: 800px;
  background: transparent; /* ПРОЗРАЧНЫЙ! */
  position: relative;
  z-index: 3;
  padding: 40px;
  border-radius: var(--radius-xl);
}

/* === КАРТОЧКИ = ПРОЗРАЧНЫЕ ОКНА === */
.bento-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform var(--duration-normal) var(--ease-out);
  /* ПРОЗРАЧНЫЙ ФОН — через них видна картинка */
  background: transparent;
}

.bento-card:hover {
  /* Hover эффект убран по запросу */
}

/* Контент карточки с затемнением для читаемости текста */
.bento-card__content {
  position: relative;
  z-index: 2;
  padding: var(--space-lg);
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
}

/* === Размеры карточек === */

/* Большая акцентная — занимает 2 строки слева */
.bento-card--large {
  grid-column: 1;
  grid-row: 1 / 3;
}

/* Маленькие — справа */
.bento-card--small {
  grid-column: 2;
}

/* Средняя — нижний ряд слева */
.bento-card--medium {
  grid-column: 1;
  grid-row: 3;
}

/* Широкая — нижний ряд справа */
.bento-card--wide {
  grid-column: 2;
  grid-row: 3;
}

/* === Элементы карточки === */
.bento-card__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 var(--space-xs) 0;
  letter-spacing: -0.01em;
}

.bento-card__text {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* Большая карточка — крупнее текст */
.bento-card--large .bento-card__title {
  font-size: var(--text-2xl);
}

.bento-card--large .bento-card__text {
  font-size: var(--text-base);
}

/* === Анимация появления === */
.bento-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.bento-card.will-animate {
  opacity: 0;
  transform: translateY(30px);
}

.bento-card.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.bento-card:nth-child(1).animate-in { animation-delay: 0s; }
.bento-card:nth-child(2).animate-in { animation-delay: 0.1s; }
.bento-card:nth-child(3).animate-in { animation-delay: 0.2s; }
.bento-card:nth-child(4).animate-in { animation-delay: 0.3s; }
.bento-card:nth-child(5).animate-in { animation-delay: 0.4s; }

@keyframes bentoFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === RESPONSIVE === */

/* Desktop меньше */
@media (max-width: 1440px) {
  .bento-container {
    padding: var(--space-4xl) var(--hero-padding-desktop);
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .bento-container {
    padding: var(--space-3xl) var(--hero-padding-tablet);
  }
  
  .bento-title {
    font-size: var(--text-3xl);
  }
  
  .bento-title-stencil {
    font-size: clamp(24px, 4vw, 48px);
  }
  
  .bento-grid {
    min-height: 500px;
    gap: var(--space-sm);
  }
  
  .bento-card__content {
    padding: var(--space-md);
  }
  
  .bento-card__title {
    font-size: var(--text-lg);
  }
  
  .bento-card__text {
    font-size: var(--text-sm);
  }
}

/* Mobile — вертикальный стек */
@media (max-width: 900px) {
  .bento-section {
    min-height: auto;
  }
  
  .bento-container {
    padding: var(--space-2xl) 16px;
  }
  
  .bento-header {
    margin-bottom: var(--space-xl);
  }
  
  .bento-title {
    font-size: var(--text-2xl);
  }
  
  .bento-title-stencil {
    font-size: clamp(20px, 6vw, 32px);
    white-space: normal; /* На мобильных можно переносить */
  }
  
  .bento-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: auto;
  }
  
  .bento-card {
    min-height: 150px;
  }
  
  .bento-card__content {
    padding: var(--space-md);
  }
  
  .bento-card__title {
    font-size: var(--text-lg);
  }
  
  .bento-card__text {
    font-size: var(--text-sm);
  }
  
  .bento-card--large .bento-card__title {
    font-size: var(--text-xl);
  }
}


/* ============================================
   IMMERSIVE CATALOG — Полноэкранная галерея
   Вариант Б: Большое фото + инфо + thumbnails
   ============================================ */

.immersive-catalog {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #000;
  overflow: hidden;
}

/* ===== ФИЛЬТРЫ ===== */
.immersive-catalog__filters {
  position: absolute;
  top: 100px; /* под фиксированным хедером */
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  border-radius: 100px;
}

.immersive-filter {
  padding: 10px 20px;
  font-family: 'Rising Sun', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.immersive-filter:hover {
  color: #fff;
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
}

.immersive-filter.active {
  color: #000;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* ===== MAIN SWIPER ===== */
.immersive-catalog__main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.immersive-swiper-main {
  width: 100%;
  height: 100%;
}

.immersive-swiper-main .swiper-slide {
  overflow: hidden;
}

/* ===== SLIDE CONTENT ===== */
.immersive-slide {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.immersive-slide__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.immersive-slide:hover .immersive-slide__image {
  transform: scale(1.03);
}

.immersive-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.9) 0%,
    rgba(0,0,0,0.5) 30%,
    rgba(0,0,0,0.2) 60%,
    transparent 100%
  );
  pointer-events: none;
}

/* ===== SLIDE INFO ===== */
.immersive-slide__info {
  position: relative;
  z-index: 10;
  padding: 60px clamp(24px, 5vw, 120px);
  padding-bottom: 140px; /* Space for thumbs */
  max-width: 600px;
}

.immersive-slide__style {
  display: inline-block;
  font-family: 'Rising Sun', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.immersive-slide__area {
  font-family: 'Rising Sun', sans-serif;
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 600;
  color: #fff;
  line-height: 1;
  margin: 0 0 24px;
}

.immersive-slide__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.immersive-slide__specs li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Rising Sun', sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,0.85);
}

.immersive-slide__specs .spec-icon {
  font-size: 18px;
}

.immersive-slide__rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 32px;
}

.immersive-slide__rooms span {
  font-family: 'Rising Sun', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  padding: 6px 12px;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
}

.immersive-slide__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-family: 'Rising Sun', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #000;
  background: var(--color-primary);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.immersive-slide__cta:hover {
  background: #d4ab7c;
  transform: translateY(-2px);
}

/* ===== NAVIGATION ARROWS ===== */
.immersive-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.immersive-nav:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.4);
}

.immersive-nav--prev {
  left: 24px;
}

.immersive-nav--next {
  right: 24px;
}

/* ===== COUNTER ===== */
.immersive-counter {
  position: absolute;
  top: 50%;
  right: 100px;
  transform: translateY(-50%);
  z-index: 15;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Rising Sun', sans-serif;
  color: rgba(255,255,255,0.5);
}

.immersive-counter__current {
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}

.immersive-counter__separator {
  font-size: 24px;
  margin: 0 4px;
}

.immersive-counter__total {
  font-size: 24px;
}

/* ===== THUMBNAILS ===== */
.immersive-catalog__thumbs {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 15;
  padding: 24px clamp(16px, 5vw, 120px);
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
}

.immersive-swiper-thumbs {
  width: 100%;
}

.immersive-swiper-thumbs .swiper-slide {
  width: 120px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.immersive-swiper-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.immersive-swiper-thumbs .swiper-slide:hover {
  opacity: 0.8;
}

.immersive-swiper-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border-color: var(--color-primary);
}

/* ===== FOOTER CTA ===== */
.immersive-catalog__footer {
  display: none; /* Скрыт, т.к. CTA есть в слайде */
  position: absolute;
  bottom: 120px;
  right: clamp(24px, 5vw, 120px);
  z-index: 15;
  text-align: right;
}

.immersive-catalog__footer-text {
  font-family: 'Rising Sun', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
}

.era-btn--outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
}

.era-btn--outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}

/* ============================================
   IMMERSIVE CATALOG — RESPONSIVE
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
  .immersive-nav--prev {
    left: 16px;
  }
  
  .immersive-nav--next {
    right: 16px;
  }
  
  .immersive-counter {
    right: 80px;
  }
  
  .immersive-counter__current {
    font-size: 36px;
  }
  
  .immersive-counter__total {
    font-size: 18px;
  }
}

/* Mobile */
@media (max-width: 900px) {
  .immersive-catalog {
    min-height: 100svh; /* Safe viewport height */
  }
  
  .immersive-catalog__filters {
    gap: 6px;
    padding: 16px 12px;
    flex-wrap: wrap;
  }
  
  .immersive-filter {
    padding: 8px 14px;
    font-size: 12px;
  }
  
  .immersive-slide__info {
    padding: 24px 20px;
    padding-bottom: 140px;
  }
  
  .immersive-slide__area {
    font-size: clamp(40px, 12vw, 64px);
    margin-bottom: 16px;
  }
  
  .immersive-slide__specs {
    gap: 12px 16px;
  }
  
  .immersive-slide__specs li {
    font-size: 14px;
  }
  
  .immersive-slide__rooms {
    gap: 6px 10px;
    margin-bottom: 24px;
  }
  
  .immersive-slide__rooms span {
    font-size: 12px;
    padding: 5px 10px;
  }
  
  .immersive-slide__cta {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
  }
  
  /* Скрываем стрелки на мобилке — свайп */
  .immersive-nav {
    display: none;
  }
  
  /* Счётчик перемещаем */
  .immersive-counter {
    position: absolute;
    top: auto;
    bottom: 130px;
    right: 20px;
    transform: none;
  }
  
  .immersive-counter__current {
    font-size: 28px;
  }
  
  .immersive-counter__separator,
  .immersive-counter__total {
    font-size: 16px;
  }
  
  /* Thumbnails меньше */
  .immersive-catalog__thumbs {
    padding: 16px;
  }
  
  .immersive-swiper-thumbs .swiper-slide {
    width: 80px;
    height: 54px;
    border-radius: 6px;
  }
}

/* Small phones */
@media (max-width: 375px) {
  .immersive-filter {
    padding: 6px 10px;
    font-size: 11px;
  }
  
  .immersive-slide__area {
    font-size: 36px;
  }
  
  .immersive-swiper-thumbs .swiper-slide {
    width: 64px;
    height: 44px;
  }
}

/* ============================================
   PROJECT GALLERY — Интерактивная галерея
   Навигация: полоска в стиле glass-карточки
   ============================================ */

/* Контейнер изображения — position для навигации */
.project-showcase__image-container {
  position: relative;
  overflow: hidden;
}

/* Share button (always visible on project images) */
.project-showcase__share-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.project-showcase__share-btn:hover {
  transform: scale(1.05);
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.35);
}

.project-showcase__share-btn:active {
  transform: scale(0.98);
}

.project-showcase__share-btn svg {
  width: 20px;
  height: 20px;
}

/* Share toast */
.era-share-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  z-index: 9999;
  max-width: min(92vw, 420px);
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.era-share-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- НАВИГАЦИОННАЯ ПОЛОСКА (glass-стиль) — DESKTOP ONLY --- */
@media (min-width: 901px) {
  .project-gallery__nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 100;
    
    /* ЛЕГКИЙ Glass-эффект — почти прозрачный, не загораживает картинку */
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px) saturate(110%);
    -webkit-backdrop-filter: blur(4px) saturate(110%);
    
    /* Стеклянная граница сверху */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Flexbox: стрелки по краям, thumbs по центру, CTA справа */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    gap: 12px;
    
    /* GSAP управляет — начинаем невидимым */
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  }

  /* CSS hover для показа навигации */
  .project-showcase__image-container:hover .project-gallery__nav {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- СТРЕЛКИ В ПОЛОСКЕ --- */
.project-gallery__arrow {
  /* Стиль кнопки */
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  
  /* Контент */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  
  /* Анимация */
  transition: all var(--duration-normal) var(--ease-out);
}

/* Hover стрелок */
.project-gallery__arrow:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

/* SVG иконки */
.project-gallery__arrow svg {
  width: 24px;
  height: 24px;
}

/* --- CTA КНОПКА В ПОЛОСКЕ (как era-btn--primary) --- */
.project-gallery__cta {
  flex-shrink: 0;
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
  background-color: #C39A6B;
  margin-left: auto; /* Центрирование между thumbs и стрелкой */
  margin-right: 16px; /* Отступ от стрелки */
  
  /* Текст - КРУПНЫЙ и ЛЕГКИЙ для читаемости */
  font-family: 'Rising Sun', sans-serif;
  font-size: 17px;  /* Увеличено до 17px */
  font-weight: 300; /* ЛЕГКИЙ вес для элегантности */
  letter-spacing: 0.04em; /* Больше воздуха */
  color: #ffffff;
  white-space: nowrap;
  cursor: pointer;
  
  /* Анимация */
  transition: background-color 0.3s ease;
}

.project-gallery__cta:hover {
  background-color: #000000;
}

/* --- КОНТЕЙНЕР МИНИАТЮР --- */
.project-gallery__thumbs {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex: 1;
  padding: 0 16px;
}

/* --- THUMBNAIL С КАРТИНКОЙ --- */
.project-gallery__thumb {
  position: relative;
  width: 100px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  
  /* ВАЖНО: ЯРКАЯ ВИДИМАЯ border для явной кликабельности БЕЗ hover */
  border: 2px solid rgba(195, 154, 107, 0.9);
  
  /* ВАЖНО: СИЛЬНАЯ тень для ощущения "приподнятости" (кликабельности) */
  box-shadow: 0 4px 12px rgba(195, 154, 107, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
  
  /* Анимация */
  transition: all var(--duration-normal) var(--ease-out);
}

/* Картинка внутри thumb */
.project-gallery__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  /* Grayscale как у glass */
  filter: grayscale(1);
  transition: filter var(--duration-normal) var(--ease-out);
}

/* Метраж поверх картинки — в нижней трети */
.project-gallery__thumb-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  
  /* Текст */
  font-family: 'Gotham Pro', sans-serif;
  font-size: 18px;  /* Увеличено на 30%: 14px → 18px */
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  
  /* Градиент снизу для читаемости */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 60%);
  transition: background var(--duration-normal) var(--ease-out);
}

/* Поочередное свечение кнопок (Holographic Ark Raiders style) */
.project-gallery__thumb {
  animation: thumb-glow 12s ease-in-out infinite;
  transition: border-color 0.3s ease-out;
}

.project-gallery__thumb:nth-child(1) {
  animation-delay: 0s;  /* 0-3s */
}
.project-gallery__thumb:nth-child(2) {
  animation-delay: 3s;  /* 3-6s */
}
.project-gallery__thumb:nth-child(3) {
  animation-delay: 6s;  /* 6-9s */
}
.project-gallery__thumb:nth-child(4) {
  animation-delay: 9s;  /* 9-12s */
}

/* Анимация ЯРКОГО голографического свечения с переливами (Ark Raiders style) */
@keyframes thumb-glow {
  0% {
    box-shadow: 0 4px 12px rgba(195, 154, 107, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    border-color: rgba(195, 154, 107, 0.9);
  }
  
  /* Голубое неоновое свечение */
  4% {
    box-shadow: 
      0 0 30px rgba(0, 191, 255, 0.9),
      0 0 60px rgba(0, 191, 255, 0.6),
      0 0 90px rgba(0, 191, 255, 0.3);
    border-color: rgba(0, 191, 255, 1);
  }
  
  /* Фиолетовое свечение */
  8% {
    box-shadow: 
      0 0 30px rgba(138, 43, 226, 0.9),
      0 0 60px rgba(138, 43, 226, 0.6),
      0 0 90px rgba(138, 43, 226, 0.3);
    border-color: rgba(138, 43, 226, 1);
  }
  
  /* Розовое свечение */
  12% {
    box-shadow: 
      0 0 30px rgba(255, 20, 147, 0.9),
      0 0 60px rgba(255, 20, 147, 0.6),
      0 0 90px rgba(255, 20, 147, 0.3);
    border-color: rgba(255, 20, 147, 1);
  }
  
  /* Оранжевое свечение */
  16% {
    box-shadow: 
      0 0 30px rgba(255, 140, 0, 0.9),
      0 0 60px rgba(255, 140, 0, 0.6),
      0 0 90px rgba(255, 140, 0, 0.3);
    border-color: rgba(255, 140, 0, 1);
  }
  
  /* Золотое свечение (пик) */
  20% {
    box-shadow: 
      0 0 30px rgba(195, 154, 107, 0.9),
      0 0 60px rgba(195, 154, 107, 0.6),
      0 0 90px rgba(195, 154, 107, 0.3);
    border-color: rgba(195, 154, 107, 1);
  }
  
  /* Угасание */
  25% {
    box-shadow: 0 4px 12px rgba(195, 154, 107, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    border-color: rgba(195, 154, 107, 0.9);
  }
  
  100% {
    box-shadow: 0 4px 12px rgba(195, 154, 107, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    border-color: rgba(195, 154, 107, 0.9);
  }
}

/* Hover на thumb - ЯРКИЙ ЗАМЕТНЫЙ эффект */
.project-gallery__thumb:hover {
  border-color: #C39A6B;
  box-shadow: 0 6px 24px rgba(195, 154, 107, 0.7), 0 0 0 2px rgba(195, 154, 107, 0.5);
  transform: scale(1.12);
}

.project-gallery__thumb:hover .project-gallery__thumb-img {
  filter: grayscale(0.5);
}

.project-gallery__thumb:hover .project-gallery__thumb-label {
  background: rgba(0, 0, 0, 0.1);
}

/* Активный thumb - с pulse анимацией для привлечения внимания */
.project-gallery__thumb--active {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(195, 154, 107, 0.4);
  animation: subtle-pulse 3s ease-in-out infinite;
}

.project-gallery__thumb--active .project-gallery__thumb-img {
  filter: grayscale(0);
}

.project-gallery__thumb--active .project-gallery__thumb-label {
  background: rgba(195, 154, 107, 0.3);
  color: #fff;
}

/* Subtle pulse анимация для активной кнопки */
@keyframes subtle-pulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(195, 154, 107, 0.4);
  }
  50% {
    box-shadow: 0 4px 16px rgba(195, 154, 107, 0.6);
  }
}

/* --- МОБИЛЬНАЯ АДАПТАЦИЯ --- */
/* Nav теперь показывается на мобиле как tabs метражей (см. выше в mobile media query) */
/* @media (max-width: 768px) {
  .project-gallery__nav {
    display: none !important;
  }
} */

/* --- АНИМАЦИЯ СМЕНЫ ИЗОБРАЖЕНИЯ --- */
.project-showcase__image {
  transition: opacity var(--duration-slow) var(--ease-out);
}

.project-showcase__image.is-loading {
  opacity: 0.5;
}


/* ============================================
   QUIZ SECTION — Многошаговый квиз
   ============================================ */

/* КРИТИЧНО: Quiz секция должна скрывать горизонтальный overflow
   чтобы quiz-track с translateX не вызывал горизонтальный скролл страницы */
#quiz {
  overflow-x: hidden;
}

.quiz-glass-container {
  overflow: hidden; /* Скрываем quiz-track за границами */
}

.quiz-glass-panel {
  overflow: hidden; /* Дополнительная защита от overflow */
}

/* ============================================
   QUIZ COLOR REVEAL — Новая архитектура (16.12.2025)
   ============================================
   Вместо mask-composite: exclude для вырезания дырки,
   используем ::before который АВТОМАТИЧЕСКИ = размеру контейнера.
   
   Архитектура:
   1. #quiz фон = серая картинка (grayscale)
   2. .quiz-color-reveal::before = цветная картинка
   3. .quiz-glass-panel = стеклянная панель поверх
   ============================================ */

/* Фоновый слой секции (СЕРЫЙ) */
.quiz-bg-grayscale {
  background-image: url('assets/img/quiz-bg.webp');
  background-size: cover;
  background-position: center;
  filter: grayscale(100%) brightness(0.4) contrast(1.1) !important; /* Темнее + контрастнее */
  will-change: transform; /* Force GPU layer */
  /* Фоллбэк для старых браузеров */
  -webkit-filter: grayscale(100%) brightness(0.4) contrast(1.1) !important;
}

/* Цветная картинка через ::before — автоматически по размеру panel */
.quiz-color-reveal {
  position: relative;
  isolation: isolate; /* Создаём stacking context */
}

.quiz-color-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2; /* Самый нижний слой: Картинка */
  border-radius: inherit;
  overflow: hidden;
  
  /* Цветная картинка — путь относительно CSS файла (karkasnye/) */
  background-image: url('assets/img/quiz-bg.webp');
  
  /* JS вычисляет размеры и позицию для идеального совпадения с фоном секции */
  background-size: var(--stencil-w, cover) var(--stencil-h, cover);
  background-position: var(--stencil-x, center) var(--stencil-y, center);
  background-repeat: no-repeat;
  
  /* Яркость и насыщенность (оставляем цвет!) */
  filter: brightness(1.05) saturate(1.25) contrast(1.05);
  -webkit-filter: brightness(1.05) saturate(1.25) contrast(1.05); /* Safari фоллбэк */
}

/* Слой блюра и тонировки через ::after — поверх картинки, но под текстом */
.quiz-color-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1; /* Средний слой: Блюр + Тонировка */
  border-radius: inherit;
  
  /* Фирменная прозрачность (как в карточках проектов) */
  background: rgba(0, 0, 0, 0.3); /* Чуть больше затемнения для контраста */
  
  /* Блюр фона (размывает картинку под собой) */
  -webkit-backdrop-filter: blur(8px); /* Safari */
  backdrop-filter: blur(8px); /* Стандарт */
}

/* Контент внутри panel должен быть поверх всего */
.quiz-color-reveal > * {
  position: relative;
  z-index: 1;
}

/* Mobile: немного другие параметры если нужно */
@media (max-width: 768px) {
  .quiz-color-reveal::before {
    /* border-radius наследуется, ничего менять не нужно */
  }
}

/* ============================================
   QUIZ OPTION STYLES
   ============================================ */

/* Чёрный оверлей с дыркой в центре через radial-gradient */
/* mix-blend-mode: multiply делает картинку под чёрным — тёмной */
/* А где прозрачно (дырка) — цветная картинка просвечивает */
.quiz-mask-overlay {
  background: 
    /* Чёрные полосы по краям, прозрачный центр */
    linear-gradient(to right, 
      rgba(0,0,0,0.85) 0%, 
      rgba(0,0,0,0.85) 7.5%, 
      transparent 7.5%, 
      transparent 92.5%, 
      rgba(0,0,0,0.85) 92.5%, 
      rgba(0,0,0,0.85) 100%
    ),
    linear-gradient(to bottom, 
      rgba(0,0,0,0.85) 0%, 
      rgba(0,0,0,0.85) 10%, 
      transparent 10%, 
      transparent 90%, 
      rgba(0,0,0,0.85) 90%, 
      rgba(0,0,0,0.85) 100%
    );
  mix-blend-mode: multiply;
}

/* Мобильная версия — другие пропорции дырки */
@media (max-width: 768px) {
  .quiz-mask-overlay {
    background: 
      linear-gradient(to right, 
        rgba(0,0,0,0.85) 0%, 
        rgba(0,0,0,0.85) 4%, 
        transparent 4%, 
        transparent 96%, 
        rgba(0,0,0,0.85) 96%, 
        rgba(0,0,0,0.85) 100%
      ),
      linear-gradient(to bottom, 
        rgba(0,0,0,0.85) 0%, 
        rgba(0,0,0,0.85) 8%, 
        transparent 8%, 
        transparent 92%, 
        rgba(0,0,0,0.85) 92%, 
        rgba(0,0,0,0.85) 100%
      );
  }
}

/* Quiz Option Buttons — кнопки-тайлы выбора */
.quiz-option,
.quiz-suboption {
  background: rgba(255, 255, 255, 0.1); /* Чуть светлее фон */
  backdrop-filter: blur(8px); /* Блюр внутри кнопки */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Более явная граница */
  border-radius: 12px;
  padding: 16px 20px;
  color: #ffffff; /* Белый текст для контраста */
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тень для объема */
}

.quiz-option:hover,
.quiz-suboption:hover {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  border-color: rgba(195, 154, 107, 0.8);
  color: #ffffff;
  transform: translateY(-2px); /* Легкий подъем */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Selected state */
.quiz-option.selected,
.quiz-suboption.selected {
  background: rgba(195, 154, 107, 0.15);
  border-color: #C39A6B;
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(195, 154, 107, 0.3);
}

/* Focus state for accessibility */
.quiz-option:focus-visible,
.quiz-suboption:focus-visible {
  outline: 2px solid #C39A6B;
  outline-offset: 2px;
}

/* Quiz Step Animation */
.quiz-step {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Track transition */
#quiz-track {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #quiz-track,
  .quiz-step,
  .quiz-option,
  .quiz-suboption,
  #quiz-progress-bar {
    transition: none !important;
  }
}

/* Quiz phone input validation states */
#quiz-phone:focus:invalid {
  border-color: rgba(239, 68, 68, 0.5);
}

#quiz-phone:focus:valid {
  border-color: #C39A6B;
}

/* Quiz Delivery Selector */
.quiz-delivery-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quiz-delivery-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

.quiz-delivery-option.selected {
  background: rgba(195, 154, 107, 0.1);
  border-color: rgba(195, 154, 107, 0.4);
}

/* Delivery input fields animation */
.quiz-delivery-input {
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Quiz checkbox custom styling */
.quiz-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 2px;
}

.quiz-checkbox__check {
  width: 12px;
  height: 12px;
  color: white;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
}

/* Checked state via sibling */
#quiz-consent:checked + .quiz-checkbox,
.quiz-checkbox.checked {
  background: #C39A6B;
  border-color: #C39A6B;
}

#quiz-consent:checked + .quiz-checkbox .quiz-checkbox__check,
.quiz-checkbox.checked .quiz-checkbox__check {
  opacity: 1;
  transform: scale(1);
}

/* Hover state */
.quiz-consent-label:hover .quiz-checkbox {
  border-color: rgba(195, 154, 107, 0.6);
}

/* Focus state */
#quiz-consent:focus-visible + .quiz-checkbox {
  outline: 2px solid #C39A6B;
  outline-offset: 2px;
}

/* Quiz Navigation Buttons */
#quiz-back:disabled,
#quiz-next:disabled,
#quiz-submit:disabled {
  pointer-events: none;
}

/* Subquestion animation */
#quiz-comms-subquestion {
  transition: all 0.3s ease;
}

#quiz-comms-subquestion.hidden {
  display: none;
}

#quiz-comms-subquestion.visible {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .quiz-option,
  .quiz-suboption {
    padding: 14px 16px;
    font-size: 14px;
  }
  
  #quiz-nav {
    padding: 0 8px;
  }
}

/* ============================================
   FAQ SECTION
   ============================================ */

/* Remove default details marker */
.era-faq-item > summary {
  list-style: none;
}
.era-faq-item > summary::-webkit-details-marker {
  display: none;
}

/* Smooth height animation using grid-template-rows */
.era-faq-item > div {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}

.era-faq-item[open] > div {
  grid-template-rows: 1fr;
}

/* Icon rotation */
.era-faq-item[open] summary svg {
  transform: rotate(45deg);
  color: #C39A6B;
}

.era-faq-item[open] summary span.flex-shrink-0 {
  border-color: #C39A6B;
  background-color: rgba(195, 154, 107, 0.1);
}

/* Hover effect for summary */
.era-faq-item > summary:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* Force FAQ visibility on all devices (overriding legacy mobile-sections logic) */
#faq {
  display: block !important;
  /* Mobile: увеличенный верхний padding чтобы "ВАЖНО ЗНАТЬ" был виден */
  padding-top: 60px !important;
  min-height: auto;
}
#faq-mobile {
  display: none !important;
}

/* FAQ Mobile fixes */
@media (max-width: 900px) {
  #faq {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
  }
  
  /* Уменьшаем размер вопросов для компактности */
  .era-faq-item summary {
    padding: 16px !important;
  }
  
  .era-faq-item summary span:first-child {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
}

/* ============================================
   MOBILE UX FIXES (QA Testing 2025)
   BUG-003: Touch targets min 44px
   BUG-005: Ken Burns object-position
   BUG-006: svh для hero viewport
   ============================================ */

@media (max-width: 900px) {
  /* BUG-006: Использование svh для корректной высоты на мобильных */
  .ken-burns-slideshow,
  .project-showcase__slideshow,
  .gallery-section {
    height: 100svh;
    height: 100vh; /* Fallback для старых браузеров */
  }
  
  @supports (height: 100svh) {
    .ken-burns-slideshow,
    .project-showcase__slideshow,
    .gallery-section {
      height: 100svh;
    }
  }
  
  /* BUG-003: Минимальные размеры touch targets по Apple HIG (44x44px) */
  .era-nav-link,
  .era-btn,
  .project-showcase__nav-btn,
  .universal-next-arrow,
  .era-faq-item summary,
  .gallery-nav-button {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* ИСКЛЮЧЕНИЕ: snap-indicator dots — маленькие точки, НЕ touch targets */
  .snap-indicator__dot {
    min-height: unset !important;
    min-width: unset !important;
  }
  
  /* BUG-005: Ken Burns фокус на здании для мобильных (центр сцены) */
  .ken-burns-slideshow__image {
    object-position: center 40%;
  }
  
  /* Улучшенная область касания для кнопок навигации */
  .project-showcase__nav-btn {
    padding: 12px 16px;
  }
}

/* ============================================
   END MOBILE UX FIXES
   ============================================ */

/* ============================================
   SCROLL SNAP — УДАЛЁН
   ============================================
   
   Причина удаления:
   - scroll-snap-type ломает iOS Safari native scroll
   - Пользователь не запрашивал snap navigation
   - Snap indicator (точки) были добавлены без запроса
   
   Вместо этого: 
   - Свободный native scroll
   - Стрелки навигации по клику (GSAP scrollTo)
   ============================================ */

/* ============================================
   HEADER AUTO-HIDE — Mobile Only
   ============================================
   Поведение:
   - При скролле/взаимодействии → header ИСЧЕЗАЕТ
   - При остановке (1 сек бездействия) → header ПОЯВЛЯЕТСЯ плавно
   Glass morphism эффект с плавной анимацией
   ============================================ */
@media (max-width: 900px) {
  .era-header {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
  }
  
  .era-header.header-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  
  .era-header.header-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Зона в верхней части экрана для вызова header кликом */
  .header-show-trigger {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 9998; /* Чуть ниже header */
    background: transparent;
    pointer-events: none; /* Не блокирует scroll */
  }
}

/* ============================================
   UNIVERSAL ARROW — Улучшенная позиция
   ============================================ */
@media (max-width: 900px) {
  .universal-next-arrow {
    /* Позиция внизу, НЕ на тексте */
    bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    z-index: 50;
  }
  
  /* Скрываем стрелку на Quiz, FAQ, Footer */
  #quiz .universal-next-arrow,
  #faq .universal-next-arrow,
  footer .universal-next-arrow,
  .era-section--footer .universal-next-arrow {
    display: none !important;
  }
}
/* Mobile Quiz Padding Fix */
@media (max-width: 768px) {
  .quiz-glass-panel {
    padding: 24px 20px !important;
  }
}

/* ============================================
   HERO MOBILE VIEWPORT FIX — iPhone/Samsung
   Проблема: 100vh включает скрытую область под адресной строкой
   Решение: ЖЁСТКАЯ высота + overflow: hidden
   ============================================ */

/* Переопределяем стили из custom.css для каркасников */
@media (max-width: 900px) {
  /* Hero контейнер — СТРОГО ограничиваем */
  .karkasnye-hero {
    /* ЖЁСТКАЯ высота */
    height: 100vh !important;
    height: 100svh !important;
    min-height: 0 !important; /* Сброс custom.css */
    max-height: 100vh !important;
    max-height: 100svh !important;
    /* КРИТИЧНО: полная обрезка контента */
    overflow: hidden !important;
    /* Не расширяться */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
  
  /* Ken Burns контейнер — СТРОГО внутри Hero */
  .karkasnye-hero .hero-kenburns-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
    /* Не выходить за пределы */
    clip: rect(0, auto, auto, 0);
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
  
  /* Ken Burns картинки — СТРОГО внутри контейнера */
  .karkasnye-hero .hero-kenburns-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    /* transform-origin в центре для Ken Burns */
    transform-origin: center center !important;
  }
  
  /* Mobile контейнер — FLEXBOX layout вместо absolute */
  .karkasnye-hero .karkasnye-hero__mobile {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    
    /* FLEXBOX для контроля позиции */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    
    /* Отступы с учётом safe area */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  
  /* Glass card с контентом — УБИРАЕМ absolute, делаем flex item */
  .karkasnye-hero .karkasnye-hero__mobile-content {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin-bottom: 12px !important; /* Gap между карточкой и кнопкой */
    flex-shrink: 0 !important;
  }
  
  /* CTA кнопка — УБИРАЕМ absolute, делаем flex item */
  .karkasnye-hero .hero-mobile__cta {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    flex-shrink: 0 !important;
  }
}

/* Маленькие экраны (iPhone SE, mini, старые Android) */
@media (max-width: 900px) and (max-height: 700px) {
  .karkasnye-hero .karkasnye-hero__mobile {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  .karkasnye-hero .karkasnye-hero__mobile-content {
    margin-bottom: 8px !important;
  }
  
  .karkasnye-hero .karkasnye-hero__mobile-content.glass-card {
    padding: 16px !important;
  }
  
  /* Уменьшаем размер текста для маленьких экранов */
  .karkasnye-hero .hero-cta__title {
    font-size: 18px !important;
  }
  
  .karkasnye-hero .hero-cta__subtitle {
    font-size: 13px !important;
  }
}

/* Foldable устройства (650-900px) */
@media (min-width: 650px) and (max-width: 900px) {
  .karkasnye-hero .karkasnye-hero__mobile {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  
  .karkasnye-hero .karkasnye-hero__mobile-content {
    margin-bottom: 16px !important;
  }
}

/* ============================================
   QUALITY SECTION v2.0 — Animated Mesh + Cards
   Converted from React/shadcn (v0.dev)
   ============================================ */

/* Main Section Container */
.quality-section-v2 {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  background: #0c0a12; /* Dark purple-black background */
}

/* TOP GRADIENT — Smooth transition from black (Hero) */
/* FIXED 2026-01-18: Уменьшена высота, понижен z-index, смягчён gradient */
.quality-section-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(60px, 12vh, 120px); /* Было 200px — слишком много на мобильных */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,       /* Было #000000 — слишком тёмный */
    rgba(0, 0, 0, 0.2) 50%,
    transparent 100%
  );
  z-index: 4; /* Было 15 — конфликт с Hero z-index: 10 */
  pointer-events: none;
}

/* BOTTOM GRADIENT — Smooth transition to white (Projects) */
.quality-section-v2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 250px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(12, 10, 18, 0.3) 20%,
    rgba(30, 30, 35, 0.6) 40%,
    rgba(80, 80, 85, 0.7) 60%,
    rgba(180, 180, 185, 0.85) 80%,
    #ffffff 100%
  );
  z-index: 4; /* Было 15 — понижаем для консистентности */
  pointer-events: none;
}

/* MOBILE: Ещё меньше gradient height */
@media (max-width: 900px) {
  .quality-section-v2::before {
    height: clamp(40px, 8vh, 80px);
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.3) 0%,
      transparent 100%
    );
  }
}

@media (max-width: 430px) {
  .quality-section-v2::before {
    height: 50px;
  }
}

/* Animated Mesh Gradient Canvas */
.quality-mesh-gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(60px) saturate(150%);
  pointer-events: none;
}

/* Floating Particles Canvas */
.quality-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Dark Overlay for Contrast */
.quality-dark-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 18, 0.7);
  pointer-events: none;
}

/* Vignette Overlay */
.quality-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
}

/* Content Container */
.quality-v2-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 80px 16px 60px;
}

/* Header */
.quality-v2-header {
  text-align: center;
  margin-bottom: 48px;
}

/* Stencil Text Wrapper */
.quality-stencil-wrapper {
  margin-bottom: 24px;
  opacity: 1;
  transform: translateY(0);
}

.quality-section-v2.has-animate .quality-stencil-wrapper:not(.is-visible) {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.quality-stencil-wrapper.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stencil Text - Wood Texture Through Letters */
.quality-stencil-text {
  font-family: 'Rising Sun', sans-serif;
  font-size: clamp(2.5rem, 12vw, 14rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
  /* Stencil Effect */
  background-image: url('assets/img/warm-orange-wood-texture.webp');
  background-size: 200vw 200vh;
  background-position: 50% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: background-position 0.1s ease-out;
}

/* Subtitle */
.quality-v2-subtitle {
  font-family: 'Rising Sun', sans-serif;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  opacity: 1;
  transform: translateY(0);
}

.quality-section-v2.has-animate .quality-v2-subtitle:not(.is-visible) {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
}

.quality-v2-subtitle.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Feature Cards Grid */
.quality-v2-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Feature Card */
.quality-feature-card {
  position: relative;
  cursor: pointer;
  opacity: 1;
  transform: translateY(0);
}

.quality-section-v2.has-animate .quality-feature-card:not(.is-visible) {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.quality-feature-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mouse-following Glow Effect */
.qfc-glow {
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  /* Glow will be positioned via JS */
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212, 165, 68, 0.15), transparent 40%);
}

.quality-feature-card:hover .qfc-glow {
  opacity: 1;
}

/* Border Glow Effect */
.qfc-border-glow {
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  background: radial-gradient(200px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212, 165, 68, 0.4), transparent 40%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
}

.quality-feature-card:hover .qfc-border-glow {
  opacity: 1;
}

/* Card Content */
.qfc-content {
  position: relative;
  height: 100%;
  padding: 32px;
  border-radius: 16px;
  background: rgba(30, 27, 40, 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

/* Background Gradient on Hover */
.qfc-bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212, 165, 68, 0.05) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.quality-feature-card:hover .qfc-bg-gradient {
  opacity: 1;
}

/* Icon */
.qfc-icon {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(212, 165, 68, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4a544;
  margin-bottom: 24px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.quality-feature-card:hover .qfc-icon {
  transform: scale(1.1);
  background: rgba(212, 165, 68, 0.2);
}

/* Stat Row */
.qfc-stat-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}

/* Stat Number - Wood Texture */
.qfc-stat-number {
  font-family: 'Rising Sun', sans-serif;
  font-size: clamp(3rem, 4vw, 4rem);
  font-weight: 900;
  line-height: 1;
  /* Stencil Effect */
  background-image: url('assets/img/warm-orange-wood-texture.webp');
  background-size: 200vw 200vh;
  background-position: 50% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: background-position 0.1s ease-out;
  font-variant-numeric: tabular-nums;
}

/* Stat Label */
.qfc-stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

/* Title */
.qfc-title {
  position: relative;
  font-family: 'Rising Sun', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px;
  transition: color 0.3s ease;
}

.quality-feature-card:hover .qfc-title {
  color: #d4a544;
}

/* Description */
.qfc-description {
  position: relative;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin: 0;
}

/* Decorative Corner Glow */
.qfc-corner-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  overflow: hidden;
  pointer-events: none;
}

.qfc-corner-glow::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 128px;
  height: 128px;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212, 165, 68, 0.2) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  filter: blur(24px);
}

.quality-feature-card:hover .qfc-corner-glow::after {
  opacity: 1;
}

/* Bottom Decorative Line */
.quality-bottom-line {
  margin-top: 80px;
  width: 128px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 165, 68, 0.5), transparent);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.quality-bottom-line.is-visible {
  opacity: 1;
  transform: scaleX(1);
}

/* ============================================
   QUALITY SECTION v2.0 — RESPONSIVE
   ============================================ */

/* Tablet (до 1024px) */
@media (max-width: 1024px) {
  .quality-v2-cards {
    gap: 16px;
  }
  
  .qfc-content {
    padding: 24px;
  }
  
  .qfc-stat-number {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
  }
}

/* Mobile (до 900px) — одна колонка */
@media (max-width: 900px) {
  .quality-v2-content {
    padding: 60px 16px 40px;
    justify-content: flex-start;
  }
  
  .quality-v2-header {
    margin-bottom: 32px;
  }
  
  .quality-stencil-text {
    font-size: clamp(2rem, 11vw, 4rem);
  }
  
  .quality-v2-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 400px;
  }
  
  .qfc-content {
    padding: 20px;
  }
  
  .qfc-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
  }
  
  .qfc-icon svg {
    width: 24px;
    height: 24px;
  }
  
  .qfc-stat-number {
    font-size: 2.5rem;
  }
  
  .qfc-title {
    font-size: 1.125rem;
  }
  
  .qfc-description {
    font-size: 0.875rem;
  }
  
  .quality-bottom-line {
    margin-top: 40px;
  }
}

/* Small Mobile (до 400px) */
@media (max-width: 400px) {
  .quality-stencil-text {
    font-size: 2rem;
  }
  
  .quality-v2-subtitle {
    font-size: 0.875rem;
  }
}

/* ============================================ */
/* FEATURES GOLD SECTION — Clone из ERA-karkas-GOLD */
/* ============================================ */
/* Источник: https://github.com/offflinerpsy/ERA-karkas-GOLD
   Компоненты: FeatureSection.tsx + FireBackground.tsx
   Конверсия: React + Framer Motion → Vanilla CSS + JS
*/

/* === MAIN SECTION === */
.era-features-gold {
  position: relative;
  width: 100%;
  min-height: auto; /* Гибкая высота — включает карточки + квиз */
  background-color: #050505; /* bg-[#050505] */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 1rem 0; /* Убираем нижний паддинг — там будет квиз */
  z-index: 1; /* НИЖЕ хедера (z-index: 9999) */
}

/* === FIRE BACKGROUND (FireBackground.tsx) === */
.era-features-gold__fire {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* Привязка к низу */
  top: auto; /* Убираем top */
  height: 50vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.era-features-gold__fire-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12rem; /* Увеличено */
  background: linear-gradient(to top, rgba(249, 115, 22, 0.5), rgba(234, 88, 12, 0.3), rgba(127, 29, 29, 0.1), transparent);
  filter: blur(40px);
}

.era-features-gold__fire-particles {
  position: absolute;
  inset: 0;
}

.era-features-gold__fire-particle {
  position: absolute;
  bottom: 0;
  border-radius: 9999px;
  background-color: #ff6b1a; /* Ярче */
  mix-blend-mode: screen;
  filter: blur(12px); /* Меньше blur для чёткости */
  opacity: 0;
  animation: fire-rise-gold var(--duration, 5s) ease-in infinite;
  animation-delay: var(--delay, 0s);
}

.era-features-gold__fire-particle--alt {
  background-color: #ffa500; /* Ярче amber */
}

@keyframes fire-rise-gold {
  0% {
    transform: translateY(100%) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.8; /* Ярче */
  }
  50% {
    opacity: 1; /* Максимум */
  }
  100% {
    transform: translateY(-100%) scale(0);
    opacity: 0;
  }
}

.era-features-gold__fire-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #050505, transparent, transparent);
}

/* === MAIN CONTAINER === */
.era-features-gold__container {
  position: relative;
  width: 100%;
  max-width: 80rem; /* max-w-7xl */
  margin: 0 auto;
  padding: 4rem 1rem;
  z-index: 10;
}

@media (min-width: 640px) {
  .era-features-gold__container {
    padding: 4rem 1.5rem;
  }
}

@media (min-width: 1024px) {
  .era-features-gold__container {
    padding: 4rem 2rem;
  }
}

/* === AMBIENT GLOWS === */
.era-features-gold__glow {
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 9999px;
  filter: blur(128px);
  pointer-events: none;
  opacity: 0.1;
}

.era-features-gold__glow--left {
  top: 0;
  left: 25%;
  background-color: rgba(249, 115, 22, 0.1); /* orange-500/10 */
  animation: pulse-glow-gold 8s ease-in-out infinite;
}

.era-features-gold__glow--right {
  bottom: 0;
  right: 25%;
  background-color: rgba(234, 88, 12, 0.1); /* orange-600/10 */
  animation: pulse-glow-gold 10s ease-in-out infinite 1s;
}

@keyframes pulse-glow-gold {
  0%, 100% {
    transform: scale(1);
    opacity: 0.1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.15;
  }
}

/* === HEADER === */
.era-features-gold__header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 10;
}

.era-features-gold__title {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 600;
  color: white;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .era-features-gold__title {
    font-size: 3rem; /* md:text-5xl */
  }
}

@media (min-width: 1024px) {
  .era-features-gold__title {
    font-size: 3.75rem; /* lg:text-6xl */
  }
}

.era-features-gold__title-accent {
  font-family: 'Marck Script', cursive;
  color: #fdba74; /* text-orange-300 */
  filter: drop-shadow(0 0 15px rgba(255, 160, 50, 0.8));
  position: relative;
  display: inline-block;
}

.era-features-gold__title-glow {
  position: absolute;
  inset: 0;
  filter: blur(8px);
  color: #f97316; /* text-orange-500 */
  user-select: none;
  animation: title-glow-pulse-gold 3s infinite;
}

.era-features-gold__title-text {
  position: relative;
  z-index: 10;
}

@keyframes title-glow-pulse-gold {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

/* === CARDS GRID === */
.era-features-gold__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  position: relative;
  z-index: 10;
}

@media (min-width: 640px) {
  .era-features-gold__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .era-features-gold__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

/* === CARD WRAPPER (for reflection) === */
.era-features-gold__card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 1;
  transform: translateY(0);
}

.era-features-gold.has-animate .era-features-gold__card-wrapper:not(.is-visible) {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: calc(var(--delay, 0) * 0.15s);
}

.era-features-gold__card-wrapper.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* === CARD === */
.era-features-gold__card {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1.1; /* Более квадратные как в референсе */
  border-radius: 2rem;
  padding: 2px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0.05), transparent);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.era-features-gold__card:hover {
  transform: translateY(-1rem);
  box-shadow: 0 25px 50px -12px rgba(154, 52, 18, 0.2); /* shadow-orange-900/20 */
}

/* Glass effect */
.era-features-gold__card-border {
  position: absolute;
  inset: 0;
  border-radius: 2rem;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.era-features-gold__card-glass {
  position: absolute;
  inset: 0;
  border-radius: 2rem;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Inner content container */
.era-features-gold__card-inner {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #0a0a0a; /* bg-[#0a0a0a] */
  border-radius: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

/* Architectural pattern */
.era-features-gold__card-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  pointer-events: none;
  background: linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.05) 50%, transparent 75%, transparent 100%);
  background-size: 20px 20px;
}

/* === ICON === */
.era-features-gold__icon-wrapper {
  position: relative;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}

.era-features-gold__card:hover .era-features-gold__icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

.era-features-gold__icon-glow {
  position: absolute;
  inset: 0;
  background-color: rgba(249, 115, 22, 0.2); /* bg-orange-500/20 */
  filter: blur(16px);
  border-radius: 9999px;
  transition: background-color 0.5s ease;
}

.era-features-gold__card:hover .era-features-gold__icon-glow {
  background-color: rgba(249, 115, 22, 0.4); /* group-hover:bg-orange-500/40 */
}

.era-features-gold__icon {
  width: 64px;
  height: 64px;
  color: #fed7aa; /* text-orange-200 */
  filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.9));
  position: relative;
  z-index: 10;
  transition: color 0.3s ease;
}

.era-features-gold__card:hover .era-features-gold__icon {
  color: white;
}

/* === CARD TITLE === */
.era-features-gold__card-title {
  font-size: 1.25rem; /* text-xl */
  text-align: center;
  font-weight: 500;
  color: #fff7ed; /* text-orange-50 */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  line-height: 1.25;
  transition: color 0.3s ease;
  margin: 0;
}

.era-features-gold__card:hover .era-features-gold__card-title {
  color: white;
}

/* Bottom sheen effect */
.era-features-gold__card-sheen {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(249, 115, 22, 0.05), transparent);
  pointer-events: none;
  transition: background 0.5s ease;
}

.era-features-gold__card:hover .era-features-gold__card-sheen {
  background: linear-gradient(to top, rgba(249, 115, 22, 0.1), transparent);
}

/* Top edge highlight */
.era-features-gold__card-highlight {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
}

/* === REFLECTION === */
.era-features-gold__reflection {
  width: 90%;
  height: 8rem;
  margin-top: 0.5rem;
  position: relative;
  overflow: hidden;
  pointer-events: none;
  transform: scaleY(-1);
  transform-origin: top;
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: calc(1s + var(--delay, 0) * 0.2s);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
}

.era-features-gold__card-wrapper.is-visible .era-features-gold__reflection {
  opacity: 0.3;
}

.era-features-gold__reflection-inner {
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(to bottom, #0a0a0a, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 1.5rem;
  filter: grayscale(0.5);
}

.era-features-gold__reflection-icon {
  margin-bottom: 1.5rem;
  opacity: 0.5;
}

.era-features-gold__reflection-icon svg {
  width: 64px;
  height: 64px;
  color: #fb923c; /* text-orange-400 */
  filter: blur(2px);
}

.era-features-gold__reflection-text {
  height: 1rem;
  width: 75%;
  background-color: rgba(255, 237, 213, 0.2); /* bg-orange-100/20 */
  filter: blur(8px);
  border-radius: 9999px;
}

/* === NEXT ARROW (внутри секции) === */
.era-features-gold__next-arrow {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 20;
}

.era-features-gold__next-arrow:hover {
  background: rgba(249, 115, 22, 0.3);
  border-color: rgba(249, 115, 22, 0.5);
  color: white;
  transform: translateX(-50%) translateY(-4px);
}

.era-features-gold__next-arrow svg {
  width: 24px;
  height: 24px;
  animation: bounce-arrow-gold 2s infinite;
}

@keyframes bounce-arrow-gold {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(4px);
  }
  60% {
    transform: translateY(2px);
  }
}

/* === QUIZ WRAPPER (встроен в Features Gold) === */
.era-features-gold__quiz-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 4rem 0 6rem;
  margin-top: 2rem;
}

/* === ENTRANCE ANIMATION (заменяет Framer Motion) === */
.era-features-gold.has-animate .era-features-gold__title:not(.is-visible) {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.era-features-gold.has-animate .era-features-gold__title.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .era-features-gold {
    padding: 3rem 1rem;
  }
  
  .era-features-gold__container {
    padding: 2rem 1rem;
  }
  
  .era-features-gold__header {
    margin-bottom: 2rem;
  }
  
  .era-features-gold__title {
    font-size: 1.875rem;
  }
  
  .era-features-gold__glow {
    width: 16rem;
    height: 16rem;
  }
  
  .era-features-gold__card {
    aspect-ratio: 1/1.2; /* Квадратнее на мобильных */
  }
  
  .era-features-gold__icon {
    width: 48px;
    height: 48px;
  }
  
  .era-features-gold__card-title {
    font-size: 1.125rem;
  }
  
  .era-features-gold__reflection {
    display: none; /* Скрываем reflection на мобильных */
  }
}

@media (max-width: 640px) {
  .era-features-gold__grid {
    gap: 1.5rem;
  }
  
  .era-features-gold__card {
    max-width: 280px;
    margin: 0 auto;
  }
}

/* ============================================
   FOOTER SPACER — Чёрный разделитель
   ============================================ */

/* Скрываем огонь в Features Gold */
.era-features-gold__fire {
  display: none !important;
}

/* Простой чёрный разделитель перед футером */
.footer-spacer {
  width: 100%;
  height: 80px;
  background: #000;
}