/* Rising Sun Font — ОРИГИНАЛЬНЫЙ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

@font-face {
  font-family: 'Rising Sun';
  src: url('../fonts/rising-sun/risingsun-medium.woff2') format('woff2'),
       url('../fonts/rising-sun/risingsun-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Rising Sun', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================
   GALLERY WATERMARK FIX
   Левый верхний угол всегда видим (для watermark)
   ============================================ */
#era-gallery img,
#era-gallery-mobile img {
  object-position: top left !important;
}

/* ============================================
   FOOTER PHONE TOOLTIP
   Золотистый tooltip при hover на телефон
   ============================================ */
.footer-phone-tooltip,
.footer-address-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: linear-gradient(135deg, rgba(195, 154, 107, 0.95), rgba(180, 140, 95, 0.95));
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: 'Rising Sun', sans-serif;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(195, 154, 107, 0.3);
  pointer-events: none;
}

.footer-phone-tooltip::after,
.footer-address-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(195, 154, 107, 0.95);
}

.footer-phone-tooltip.visible,
.footer-address-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   OFFICE STATUS TAG - Открыто/Закрыто
   ============================================ */
.office-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.3s ease;
}

/* Открыто - зелёный */
.office-status-tag.open {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.office-status-tag.open::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

/* Закрыто - мягкий красноватый */
.office-status-tag.closed {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.office-status-tag.closed::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #f87171;
  border-radius: 50%;
  opacity: 0.8;
}

/* Mobile адаптация */
@media (max-width: 768px) {
  .office-status-tag {
    padding: 3px 8px;
    font-size: 10px;
  }
}

/* ============================================
   MAP MODAL - Модалка с Яндекс.Картой
   ============================================ */
.map-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none; /* Скрыто по умолчанию */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, background 0.4s ease, backdrop-filter 0.4s ease;
}

.map-modal.open {
  display: flex; /* Показываем при открытии */
  opacity: 1;
  visibility: visible;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
}

.map-modal__content {
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.4s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(195, 154, 107, 0.3);
}

.map-modal.open .map-modal__content {
  transform: scale(1) translateY(0);
}

.map-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  background: linear-gradient(135deg, #faf8f5, #f5f0eb);
  border-bottom: 2px solid #c39a6b;
}

.map-modal__title h3 {
  font-family: 'Rising Sun', sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0 0 4px;
}

.map-modal__title p {
  font-family: 'Rising Sun', sans-serif;
  font-size: 14px;
  color: #666;
  margin: 0;
}

.map-modal__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 12px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
}

.map-modal__close:hover {
  background: #c39a6b;
  color: #fff;
}

.map-modal__map {
  width: 100%;
  height: 400px;
}

.map-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 32px;
  background: #f5f0eb;
}

.map-modal__info {
  flex: 1;
}

.map-modal__address {
  font-family: 'Rising Sun', sans-serif;
  font-size: 15px;
  color: #1a1a1a;
  margin: 0 0 4px;
}

.map-modal__hours {
  font-family: 'Rising Sun', sans-serif;
  font-size: 13px;
  color: #666;
  margin: 0;
}

.map-modal__route-info {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-family: 'Rising Sun', sans-serif;
  font-size: 14px;
  color: #c39a6b;
}

.map-modal__route-btn {
  padding: 14px 28px;
  background: linear-gradient(135deg, #c39a6b, #b08a5b);
  border: none;
  border-radius: 12px;
  font-family: 'Rising Sun', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.map-modal__route-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #d4a97a, #c39a6b);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(195, 154, 107, 0.4);
}

.map-modal__route-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

/* ============================================
   ROUTE HINT - Подсказка "Проложить маршрут?"
   ============================================ */
.route-hint {
  position: fixed;
  bottom: 100px;
  right: 24px;
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.95);
  transition: all 0.5s ease;
}

.route-hint.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.route-hint__content {
  background: linear-gradient(135deg, rgba(195, 154, 107, 0.95), rgba(170, 130, 85, 0.95));
  backdrop-filter: blur(10px);
  padding: 16px 20px;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(195, 154, 107, 0.4);
  max-width: 280px;
}

.route-hint__content p {
  font-family: 'Rising Sun', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.4;
}

.route-hint__buttons {
  display: flex;
  gap: 8px;
}

.route-hint__yes {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-family: 'Rising Sun', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.route-hint__yes:hover {
  background: rgba(255, 255, 255, 0.3);
}

.route-hint__no {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 8px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
}

.route-hint__no:hover {
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
}

/* Mobile Map Modal */
@media (max-width: 768px) {
  .map-modal__content {
    width: 95%;
    max-height: 85vh;
    border-radius: 16px;
  }
  
  .map-modal__header {
    padding: 16px 20px;
  }
  
  .map-modal__title h3 {
    font-size: 18px;
  }
  
  .map-modal__title p {
    font-size: 12px;
  }
  
  .map-modal__map {
    height: 300px;
  }
  
  .map-modal__footer {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px;
    gap: 16px;
  }
  
  .map-modal__route-btn {
    width: 100%;
    text-align: center;
  }
  
  .route-hint {
    bottom: 80px;
    right: 16px;
    left: 16px;
  }
  
  .route-hint__content {
    max-width: none;
  }
}

/* ============================================
   VANTA.JS CLOUDS BACKGROUND
   Catalog section animated clouds
   ============================================ */
#projects {
  position: relative;
}

#projects > canvas {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none;
}

#projects .catalog-section {
  position: relative;
  z-index: 1;
}

/* Disable on mobile for performance */
/* Fold (600-900px) может показывать canvas */
@media (max-width: 599px) {
  #projects > canvas {
    display: none !important;
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  #projects > canvas {
    display: none !important;
  }
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Hero section full height */
.era-section--hero {
  min-height: 960px;
}

/* Input placeholder behavior */
input::placeholder {
  color: #686673;
  opacity: 1;
}

input:focus::placeholder {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* ============================================
   Layout Container (Context7 Pattern)
   ============================================ */

/* Контейнер с правильными отступами из Figma */
.era-container {
  width: 100%;
  max-width: 100%;
}

/* Header: всегда fixed, full-width, матовое стекло по умолчанию */
.era-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  width: 100% !important;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo container */
.era-logo {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.era-logo img {
  display: block;
}

/* ============================================
   Social Icons Hover States (Figma 42-11662)
   ============================================ */

/* WhatsApp hover: черный → #48c95f (зеленый) */
.social-whatsapp {
  background-color: #000000 !important;
  transition: background-color 0.3s ease;
}

.social-whatsapp:hover {
  background-color: #48c95f !important;
}

/* Telegram hover: черный → #27a6e5 (синий) */
.social-telegram {
  background-color: #000000 !important;
  transition: background-color 0.3s ease;
}

.social-telegram:hover {
  background-color: #27a6e5 !important;
}

/* ============================================
   Navigation Hover States
   ============================================ */

nav a {
  color: #000000;
  transition: color 0.3s ease;
}

nav a:hover,
nav a.active {
  color: #C39A6B;
}

/* ============================================
   Button Hover States
   ============================================ */

/* CTA button: #C39A6B → #000000 при hover */
header button {
  background-color: #C39A6B !important;
  transition: background-color 0.3s ease;
}

header button:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Technologies section buttons */
#technologies button {
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#technologies button:hover {
  transform: translateX(4px);
}

/* ============================================
   Projects Catalog - Swiper Custom Styles
   ============================================ */

/* Override Swiper default pagination */
.swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  background: #000000 !important;
  opacity: 0.5 !important;
  border-radius: 2px !important;
  transition: opacity 0.3s ease !important;
}

.swiper-pagination-bullet-active {
  opacity: 1 !important;
}

/* Disable default navigation buttons */
.swiper-button-next,
.swiper-button-prev {
  display: none !important;
}

/* Custom navigation buttons opacity on hover */
[class*="swiper-button-next-"],
[class*="swiper-button-prev-"] {
  transition: opacity 0.3s ease;
}

[class*="swiper-button-next-"]:hover,
[class*="swiper-button-prev-"]:hover {
  opacity: 0.7;
}

/* Swiper container reset */
.swiper {
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================
 * ERA Hero — стек карточек уведомлений (push-style)
 * ----------------------------------------------------------
 * Требования к разметке (для агента):
 * 1) Найти первый экран (hero-секция) на лендинге.
 * 2) Обернуть три "сообщения" в отдельный контейнер и дать ему класс:
 *      .era-hero-stack
 *    Пример: <div class="era-hero-stack ...">
 * 3) Каждой карточке внутри задать класс:
 *      .era-hero-card
 *    Пример: <div class="era-hero-card ...">...</div>
 * 4) На самих .era-hero-card НЕЛЬЗЯ использовать tailwind-классы,
 *    которые трогают transform (transform, translate-y-*, scale-*, rotate-*).
 *    Layout делаем только позиционированием + паддинги/бордеры.
 * ========================================================== */

.era-hero-stack {
  position: relative;
  /* контейнер можно выровнять через Tailwind (flex, justify-end и т.п.),
     но сами карточки ниже всегда absolute внутри этого блока */
}

.era-hero-stack {
  /* gap управляется через JS transform */
  position: relative;
}

.era-hero-stack .era-hero-card {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  /* ВНИМАНИЕ: никакого transform из Tailwind.
     Вся анимация делается GSAP по свойству y. */
}

@media (prefers-reduced-motion: reduce) {
  .era-hero-stack .era-hero-card {
    will-change: auto;
  }
}

/* ============================================
   Technologies Section — Mobile vs Desktop
   ============================================ */

/* Desktop: показываем #technologies, скрываем #technologies-mobile */
#technologies {
  display: flex;
}

#technologies-mobile {
  display: none;
}

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

/* Fold (600-900px): показываем mobile версию вместо desktop */
@media (min-width: 600px) and (max-width: 932px) {
  #technologies {
    display: none !important;
  }
  
  #technologies-mobile {
    display: flex !important;
  }
}

/* ============================================
   Technologies Section — Desktop Styles
   Figma Reference: 1920px width
   ============================================ */

/* Desktop container */
.tech-desktop-container {
  padding: 120px clamp(150px, 12.34vw, 237px);
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

/* Top section with text + logo */
.tech-desktop-top {
  padding-right: 96px;
}

/* Logo container */
.tech-desktop-logo {
  width: 300px;
  height: 178.125px;
}

/* Black container */
.tech-desktop-black-box {
  padding: 12px 12px 40px 0;
}

/* White section corner radius */
.tech-desktop-content {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Technologies list */
.tech-desktop-list {
  padding: 32px 62px 32px 32px;
  gap: 24px;
}

/* Technology item */
.tech-desktop-item {
  gap: 12px;
}

/* Technology title */
.tech-desktop-title {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

/* Technology description */
.tech-desktop-desc {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

/* Toggle button */
.tech-desktop-toggle {
  gap: 8px;
}

.tech-desktop-toggle-text {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

/* Form */
.tech-desktop-form {
  padding-left: 32px;
  padding-right: 20px;
}

.tech-desktop-input-wrapper {
  padding: 14px 24px;
}

.tech-desktop-input {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  background: transparent;
  border: none;
  outline: none;
}

.tech-desktop-submit {
  padding: 12px 24px;
}

.tech-desktop-submit-text {
  width: 211px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

/* ============================================
   Technologies Section — Foldable Styles
   Devices: 600-900px (Samsung Fold, etc.)
   Form: vertical layout to fit narrow screen
   ============================================ */
@media (min-width: 600px) and (max-width: 932px) {
  /* Form: vertical layout */
  .tech-desktop-form {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px 20px !important;
  }
  
  /* Inputs container: vertical stack */
  .tech-desktop-form > div:first-child {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  
  /* Each input wrapper: full width */
  .tech-desktop-input-wrapper {
    width: 100% !important;
    flex: none !important;
  }
  
  /* Submit button: full width */
  .tech-desktop-submit {
    width: 100% !important;
    justify-content: center !important;
  }
  
  .tech-desktop-submit-text {
    width: auto !important;
    text-align: center !important;
  }
}

/* ============================================
   Technologies Section — Mobile Styles
   Figma Reference: 375px width
   - Padding: 100px 16px
   - Gap: 40px between sections
   ============================================ */

/* Main container */
#technologies-mobile {
  padding: 100px 16px;
  gap: 40px;
  justify-content: center;
  align-items: center;
}

/* Logo */
.tech-mobile-logo {
  width: 134px;
  height: 80px;
}

/* Text block */
.tech-mobile-text-block {
  gap: 16px;
  text-align: center;
}

.tech-mobile-text-inner {
  gap: 6px;
}

/* Typography - Rising Sun font */
.tech-mobile-subtitle {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #C39A6B;
}

.tech-mobile-title {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: #000000;
}

.tech-mobile-description {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: #000000;
}

/* Black container */
.tech-mobile-container {
  padding-bottom: 32px;
}

/* House image wrapper */
.tech-mobile-house-img {
  height: 250px;
}

/* Image click hint - hidden by default, shown on Fold */
.tech-image-hint {
  display: none;
}

/* Accordion container */
.tech-mobile-accordion {
  gap: 12px;
  padding: 24px 16px 16px;
}

/* Accordion card */
.tech-mobile-card {
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid #B4B5B4;
  line-height: 1.2;
}

.tech-mobile-card-title {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #000000;
}

.tech-mobile-card-desc {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: #000000;
}

/* Toggle button */
.tech-mobile-toggle-btn {
  gap: 4px;
}

.tech-mobile-toggle-icon {
  width: 12px;
  height: 13px;
}

.tech-mobile-toggle-text {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: #C39A6B;
}

/* Form */
.tech-mobile-form-wrapper {
  padding: 32px 26px 0;
  gap: 24px;
}

.tech-mobile-form {
  gap: 24px;
}

.tech-mobile-form-inputs {
  gap: 8px;
}

.tech-mobile-input-wrapper {
  padding: 14px;
  border-radius: 6px;
  background: #FFFFFF;
}

.tech-mobile-input {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  background: transparent;
  color: #000000;
  border: none;
  outline: none;
  width: 100%;
}

.tech-mobile-input::placeholder {
  color: #686673;
}

.tech-mobile-submit-btn {
  padding: 12px 24px;
  border-radius: 6px;
  background: #C39A6B;
  transition: background-color 0.3s ease;
}

.tech-mobile-submit-btn:hover {
  background: #B38A5B;
}

.tech-mobile-submit-text {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: #FFFFFF;
  text-align: center;
}

/* Thanks message */
.tech-mobile-thanks {
  padding: 32px 26px 0;
}

.tech-mobile-thanks-text {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: #FFFFFF;
  text-align: center;
}

.tech-mobile-thanks-highlight {
  color: #C39A6B;
  font-style: italic;
}

/* ============================================
   Technologies Mobile — Foldable Compact Version
   Devices: 600-900px width
   Target: Fit in 750px viewport height
   ============================================ */
@media (min-width: 600px) and (max-width: 932px) {
  /* Reduce overall padding */
  #technologies-mobile {
    padding: 40px 24px !important;
    gap: 20px !important;
  }
  
  /* Hide logo (already visible in hero) */
  .tech-mobile-logo {
    display: none !important;
  }
  
  /* Compact text block */
  .tech-mobile-text-block {
    gap: 8px !important;
  }
  
  .tech-mobile-text-inner {
    gap: 4px !important;
  }
  
  /* Larger subtitle for Fold */
  .tech-mobile-subtitle {
    font-size: 14px !important;
  }
  
  /* Larger title for Fold */
  .tech-mobile-title {
    font-size: 18px !important;
  }
  
  /* Hide long description */
  .tech-mobile-description {
    display: none !important;
  }
  
  /* Reduce black container padding */
  .tech-mobile-container {
    padding-bottom: 8px !important;
  }
  
  /* Smaller house image */
  .tech-mobile-house-img {
    height: 120px !important;
  }
  
  /* Compact accordion */
  .tech-mobile-accordion {
    gap: 6px !important;
    padding: 12px 16px 6px !important;
  }
  
  /* Compact cards */
  .tech-mobile-card {
    gap: 4px !important;
    padding-bottom: 6px !important;
  }
  
  /* Last card no bottom padding */
  .tech-mobile-card:last-child {
    padding-bottom: 0 !important;
  }
  
  .tech-mobile-card-title {
    font-size: 16px !important;
  }
  
  .tech-mobile-card-desc {
    font-size: 13px !important;
  }
  
  /* Compact form */
  .tech-mobile-form-wrapper {
    padding: 16px 16px 0 !important;
    gap: 12px !important;
  }
  
  .tech-mobile-form {
    gap: 12px !important;
  }
  
  .tech-mobile-form-inputs {
    gap: 6px !important;
  }
  
  .tech-mobile-input-wrapper {
    padding: 10px 12px !important;
  }
  
  .tech-mobile-input {
    font-size: 13px !important;
  }
  
  .tech-mobile-submit-btn {
    padding: 10px 20px !important;
  }
  
  .tech-mobile-submit-text {
    font-size: 14px !important;
  }
  
  /* Hide form on Fold (form available in consultation section) */
  .tech-mobile-form-wrapper {
    display: none !important;
  }
  
  .tech-mobile-thanks {
    display: none !important;
  }
  
  /* Smooth morph animations for expand/collapse */
  .tech-mobile-card-desc {
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                transform 0.3s ease !important;
    transform-origin: top;
  }
  
  .tech-mobile-card-desc.hidden {
    opacity: 0;
    transform: scaleY(0.95);
  }
  
  .tech-mobile-card-desc:not(.hidden) {
    opacity: 1;
    transform: scaleY(1);
  }
  
  /* Image container morph animation */
  #tech-image-mobile {
    transition: opacity 0.3s ease, transform 0.3s ease !important;
  }
  
  .tech-mobile-house-img img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  /* Toggle button animation */
  .tech-mobile-toggle-btn {
    transition: opacity 0.25s ease, transform 0.25s ease !important;
  }
  
  .tech-mobile-toggle-btn.hidden {
    opacity: 0 !important;
    transform: translateY(-5px) !important;
  }
  
  /* Card title hover effect */
  .tech-mobile-card-title {
    transition: color 0.2s ease !important;
  }
  
  .tech-mobile-card-title:hover {
    color: #666 !important;
  }
  
  /* ============================================
     Clickable Image Hint for Fold Modal
     Pulse ring + zoom icon to indicate clickable
     ============================================ */
  
  /* Container needs relative for overlay */
  #tech-image-mobile {
    position: relative !important;
    cursor: pointer !important;
  }
  
  /* Zoom icon overlay */
  #tech-image-mobile::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
  
  #tech-image-mobile:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
  
  /* Pulsing ring animation */
  #tech-image-mobile::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: pulse-ring 2.5s ease-out infinite;
    pointer-events: none;
    z-index: 9;
  }
  
  @keyframes pulse-ring {
    0% {
      transform: translate(-50%, -50%) scale(0.8);
      opacity: 0.8;
    }
    50% {
      opacity: 0.4;
    }
    100% {
      transform: translate(-50%, -50%) scale(1.5);
      opacity: 0;
    }
  }
  
  /* Small hint text */
  .tech-image-hint {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.9;
    pointer-events: none;
    z-index: 10;
    animation: fade-hint 3s ease-in-out infinite;
  }
  
  @keyframes fade-hint {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
  }
}

/* ============================================
   Consultation Section — Desktop Styles
   ============================================ */

/* Desktop section with background */
#consultation {
  background-image: image-set(
    url('../img/optimized/consultation-bg-large.webp') type('image/webp'),
    url('../img/optimized/consultation-bg-optimized.jpg') type('image/jpeg')
  );
  background-image: -webkit-image-set(
    url('../img/optimized/consultation-bg-large.webp') type('image/webp'),
    url('../img/optimized/consultation-bg-optimized.jpg') type('image/jpeg')
  );
  background-image: url('../img/optimized/consultation-bg-optimized.jpg');
  background-size: cover;
  background-position: center;
}

.consult-desktop-container {
  padding: 0 clamp(150px, 18.75vw, 360px) 56px;
  gap: clamp(200px, 25.73vw, 494px);
}

.consult-desktop-text-block {
  padding: 0 clamp(60px, 6.4vw, 123px);
  gap: 16px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.consult-desktop-subtitle {
  font-size: clamp(14px, 0.94vw, 18px);
  text-transform: uppercase;
  color: #C39A6B;
}

.consult-desktop-title {
  font-size: clamp(24px, 1.875vw, 36px);
  color: #000000;
}

.consult-desktop-form-block {
  padding: 40px 32px;
  gap: 32px;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.consult-desktop-form-title {
  font-size: 32px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 600;
  line-height: 1.2;
}

.consult-desktop-form {
  gap: 24px;
}

.consult-desktop-inputs {
  flex: 1;
  min-width: 0;
  gap: 12px;
}

.consult-desktop-input {
  flex: 1;
  min-width: 0;
  padding: 14px 24px;
  font-size: 18px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  color: #000000;
  background: #FFFFFF;
  border: none;
  outline: none;
  border-radius: 6px;
  box-sizing: border-box;
}

.consult-desktop-input::placeholder {
  color: #686673;
}

.consult-desktop-submit {
  padding: 12px 24px;
  font-size: 18px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  background: #C39A6B;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.consult-desktop-submit:hover {
  background: #b38a5b;
}

/* Consultation Desktop - Responsive */
@media (max-width: 1440px) {
  .consult-desktop-form-block {
    padding: 32px 24px;
  }
}

@media (max-width: 1280px) {
  .consult-desktop-container {
    padding: 0 clamp(80px, 10vw, 150px) 48px;
  }
  .consult-desktop-text-block {
    padding: 0 clamp(40px, 5vw, 80px);
  }
  .consult-desktop-form-block {
    padding: 28px 20px;
    gap: 24px;
  }
  .consult-desktop-form-title {
    font-size: 28px;
  }
  .consult-desktop-input {
    padding: 12px 20px;
    font-size: 16px;
  }
  .consult-desktop-submit {
    padding: 12px 20px;
    font-size: 16px;
  }
}

@media (max-width: 1024px) {
  .consult-desktop-container {
    padding: 0 clamp(40px, 6vw, 80px) 40px;
  }
  .consult-desktop-text-block {
    padding: 0 clamp(20px, 3vw, 40px);
  }
  .consult-desktop-form-block {
    padding: 24px 16px;
    gap: 20px;
  }
  .consult-desktop-form-title {
    font-size: 24px;
  }
  .consult-desktop-form {
    flex-direction: column;
    gap: 16px;
  }
  .consult-desktop-inputs {
    flex-direction: column;
    gap: 12px;
  }
  .consult-desktop-submit {
    width: 100%;
  }
}

/* ============================================
   Consultation Section — Mobile Styles
   ============================================ */

#consultation-mobile {
  min-height: 600px;
  height: auto;
  display: none;
  position: relative;
  overflow: hidden;
  padding-bottom: 32px;
}

/* Hide desktop on mobile, show mobile */
/* Fold (600-900px) показывает desktop версию */
@media (max-width: 599px) {
  #consultation {
    display: none !important;
  }
  #consultation-mobile {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
  }
}

.consult-mobile-bg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
}

.consult-mobile-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.consult-mobile-text-block {
  position: relative;
  width: 100%;
  max-width: 343px;
  margin: 0 auto;
  padding: 24px 16px 16px;
  gap: 6px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  z-index: 2;
}

.consult-mobile-subtitle {
  font-size: 12px;
  text-transform: uppercase;
  color: #C39A6B;
  width: 100%;
}

.consult-mobile-title {
  font-size: 16px;
  color: #000000;
  width: 100%;
}

.consult-mobile-form-container {
  position: relative;
  width: 100%;
  max-width: 343px;
  margin: auto auto 0;
  padding: 24px 16px 16px 16px;
  gap: 24px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  border-radius: 20px;
  z-index: 2;
}

.consult-mobile-form-title {
  font-family: 'Rising Sun', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: #FFFFFF;
  text-align: center;
}

.consult-mobile-form {
  gap: 24px;
}

.consult-mobile-inputs {
  gap: 8px;
}

.consult-mobile-input {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  color: #000000;
  background: #FFFFFF;
  border: none;
  outline: none;
  border-radius: 6px;
}

.consult-mobile-input::placeholder {
  color: #686673;
}

.consult-mobile-submit {
  width: 100%;
  padding: 12px 24px;
  font-size: 16px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  background: #C39A6B;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.consult-mobile-submit:hover {
  background: #b38a5b;
}

.consult-mobile-thanks {
  position: relative;
  width: 100%;
  max-width: 343px;
  margin: auto auto 0;
  padding: 24px 16px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  border-radius: 20px;
  z-index: 2;
}

.consult-mobile-thanks-text {
  font-family: 'Rising Sun', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: #FFFFFF;
  text-align: center;
}

.consult-mobile-thanks-highlight {
  color: #C39A6B;
  font-style: italic;
}

/* ============================================
   HEADER - Desktop (REFACTORED 25.11.2025)
   ============================================ */

/* Desktop Header - скрыт по умолчанию */
.era-header {
  display: none;
}

/* Показывается на desktop (769px+) */
@media (min-width: 769px) {
  .era-header {
    display: block !important;
  }
}

/* Показывается на foldable устройствах (600-900px) */
@media (min-width: 600px) and (max-width: 932px) {
  .era-header {
    display: block !important;
    /* position управляется scroll-header.js — НЕ ТРОГАТЬ! */
  }
}

/* Retina optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .era-header,
  .mobile-header {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ============================================
   HEADER - Desktop (REFACTORED 25.11.2025)
   Figma Reference: 1920px base
   - Content area: 1446px (1920 - 237*2 padding)
   - Logo: 234px + 56px gap
   - Nav gap: 40px, Contacts gap: 24px, Icons gap: 8px
   
   ВАЖНО: padding и gap для container управляются 
   через scroll-header.js (динамическая анимация)
   НЕ ДОБАВЛЯТЬ CSS rules для .era-header__container padding/gap!
   ============================================ */

/* Header nav typography */
.era-header__nav {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  gap: 40px; /* Figma base */
}

.era-header__nav a {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Адаптивный gap для nav */
@media (max-width: 1600px) {
  .era-header__nav {
    gap: 32px;
  }
}

@media (max-width: 1400px) {
  .era-header__nav {
    gap: 24px;
  }
}

@media (max-width: 1280px) {
  .era-header__nav {
    gap: 20px;
  }
}

@media (max-width: 1024px) {
  .era-header__nav {
    gap: 16px;
  }
}

/* Contacts container */
.era-header__contacts {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  flex-shrink: 0;
  gap: 24px; /* Figma base */
}

/* Адаптивный gap для contacts */
@media (max-width: 1600px) {
  .era-header__contacts {
    gap: 20px;
  }
}

@media (max-width: 1400px) {
  .era-header__contacts {
    gap: 16px;
  }
}

@media (max-width: 1280px) {
  .era-header__contacts {
    gap: 12px;
  }
}

/* Phone visibility */
.era-header__phone {
  white-space: nowrap;
}

/* Скрыть телефон при <1024px */
@media (max-width: 1023px) {
  .era-header__phone {
    display: none;
  }
}

/* Social icons */
.era-header__social {
  gap: 8px; /* Figma */
}

/* Скрыть соцсети при <950px */
@media (max-width: 949px) {
  .era-header__social {
    display: none;
  }
}

/* CTA Button - скрыть при <1536px (Tailwind 2xl) */
.era-btn--header-cta {
  display: none;
}

@media (min-width: 1536px) {
  .era-btn--header-cta {
    display: flex;
  }
}

/* ============================================
   HEADER - Mobile (REFACTORED 25.11.2025)
   ============================================ */

/* Mobile Header */
.mobile-header {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.04);
}

/* Скрывается от 769px и выше */
@media (min-width: 769px) {
  .mobile-header {
    display: none !important;
  }
}

/* Скрывается на foldable устройствах (600-900px) - показываем desktop хедер */
@media (min-width: 600px) and (max-width: 932px) {
  .mobile-header {
    display: none !important;
  }
}

.mobile-header__container {
  padding: 16px 24px;
}

.mobile-header__phone {
  font-family: 'Rising Sun', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

/* Burger Button */
.burger-btn {
  padding: 8px;
  background-color: transparent !important;
  background: none !important;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  position: relative;
}

.burger-btn__lines {
  position: absolute;
  width: 24px;
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.burger-btn__line {
  display: block;
  height: 2px;
  width: 100%;
  background-color: #C39A6B;
  border-radius: 1px;
  transition: all 0.3s ease;
}

/* Burger animation - Active State */
.burger-btn.is-active .burger-btn__line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.burger-btn.is-active .burger-btn__line:nth-child(2) {
  opacity: 0;
}

.burger-btn.is-active .burger-btn__line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Burger hover */
.burger-btn:hover .burger-btn__line {
  opacity: 0.7;
}

.burger-btn:active .burger-btn__line {
  opacity: 0.5;
}

/* ============================================
   MOBILE MENU (REFACTORED 25.11.2025)
   ============================================ */

.mobile-menu__overlay {
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.mobile-menu__sidebar {
  width: min(95vw, 320px);
  height: 100dvh;
  height: 100vh;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 2;
}

/* Dynamic Viewport Height для Android */
@supports (height: 100dvh) {
  .mobile-menu__sidebar {
    height: 100dvh !important;
  }
}

/* Responsive widths */
@media (min-width: 360px) and (max-width: 639px) {
  .mobile-menu__sidebar {
    width: 375px !important;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .mobile-menu__sidebar {
    width: min(90vw, 400px) !important;
  }
}

@media (min-width: 768px) {
  .mobile-menu__sidebar {
    width: min(66vw, 512px) !important;
  }
}

.mobile-menu__content {
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Menu item borders */
.mobile-menu__item {
  border-color: #686673;
  padding: 12px 0;
}

.mobile-menu__item--border-b {
  border-bottom: 1px solid #686673;
  padding-bottom: 12px;
}

/* SHORT SCREENS: reduce menu padding to fit all items without scroll */
@media (max-height: 600px) {
  .mobile-menu__item {
    padding: 8px 0;
  }
  .mobile-menu__item--border-b {
    padding-bottom: 8px;
  }
  .mobile-menu__content {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ============================================
   HERO SECTION (REFACTORED 25.11.2025)
   ============================================ */

/* Hero background - mobile override */
/* ============================================
   HERO SECTION - Desktop (REFACTORED 25.11.2025)
   Figma Reference: 1920px base (node 42-12048)
   ============================================ */

/* Hero section base */
.era-section--hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* WebP with fallback */
  background-image: url('../img/hero-bg.webp');
  background-image: image-set(
    url('../img/optimized/hero-bg-desktop.webp') type('image/webp'),
    url('../img/hero-bg.webp') type('image/webp')
  );
  background-image: -webkit-image-set(
    url('../img/optimized/hero-bg-desktop.webp') type('image/webp'),
    url('../img/hero-bg.webp') type('image/webp')
  );
}

/* Hero Mobile background override */
/* Fold (600-900px) показывает desktop версию */
@media (max-width: 599px) {
  .era-section--hero {
    background-color: #ffffff !important;
    background-size: auto 50% !important;
    background-position: center bottom !important;
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* Hero Desktop - stack positioning */
.era-hero-stack--desktop {
  padding-right: 237px;
  /* gap управляется через JS transform, НЕ CSS gap */
}

/* КРИТИЧНО для анимации! Карточки скрыты до запуска GSAP */
.era-hero-stack .era-hero-card {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  /* ВНИМАНИЕ: никакого transform из CSS/Tailwind.
     Вся анимация делается GSAP по свойству y. */
}

@media (prefers-reduced-motion: reduce) {
  .era-hero-stack .era-hero-card {
    will-change: auto;
  }
}

/* КРИТИЧНО для мобильной анимации! Карточки скрыты до запуска GSAP */
.era-hero-stack-mobile .era-hero-card-mobile {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .era-hero-stack-mobile .era-hero-card-mobile {
    will-change: auto;
  }
}

/* Responsive padding for hero stack */
@media (max-width: 1600px) {
  .era-hero-stack--desktop {
    padding-right: 120px;
  }
}

@media (max-width: 1400px) {
  .era-hero-stack--desktop {
    padding-right: 80px;
  }
}

@media (max-width: 1280px) {
  .era-hero-stack--desktop {
    padding-right: 48px;
  }
}

@media (max-width: 1024px) {
  .era-hero-stack--desktop {
    padding-right: 32px;
  }
}

/* Fold (600-900px) показывает desktop версию */
@media (max-width: 599px) {
  .era-hero-stack--desktop {
    display: none !important;
  }
}

/* Hero Card - glass morphism style */
.era-hero-card {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px 20px 0 20px;
  padding: 24px 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Hero Card - first card fixed width */
.era-hero-card--wide {
  width: 606px;
}

/* Responsive card width */
@media (max-width: 1280px) {
  .era-hero-card--wide {
    width: 500px;
  }
}

@media (max-width: 1024px) {
  .era-hero-card--wide {
    width: 450px;
  }
}

/* Hero Card typography */
.era-hero-card__text {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  font-size: 36px;
  color: #ffffff;
  text-align: right;
}

/* Responsive typography */
@media (max-width: 1280px) {
  .era-hero-card__text {
    font-size: 32px;
  }
}

@media (max-width: 1024px) {
  .era-hero-card__text {
    font-size: 28px;
  }
  
  .era-hero-card {
    padding: 20px 28px;
  }
}

/* ============================================
   HERO SECTION - Mobile (REFACTORED 25.11.2025)
   ============================================ */

/* Hero Mobile container */
.era-hero-mobile {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

/* Fold (600-900px) показывает desktop версию */
@media (max-width: 599px) {
  .era-hero-mobile {
    display: block !important;
  }
}

/* Mobile hero gradient - DISABLED */
.hero-mobile-gradient {
  display: none !important;
}

/* Mobile hero logo position */
.hero-mobile__logo {
  position: absolute;
  top: 136px;
  left: 50%;
  transform: translateX(-50%);
  width: 167px;
  height: 100px;
  z-index: 2;
}

/* Mobile hero cards container */
.hero-mobile__cards {
  position: absolute;
  top: 430px; /* Ближе к низу экрана, над домом */
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 2;
}

/* Mobile hero card */
.hero-mobile__card {
  background: rgba(0, 0, 0, 0.5);
  padding: 16px 24px;
  border-radius: 12px 12px 0 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden;
}

.hero-mobile__card--accent {
  background: rgba(0, 0, 0, 0.8);
}

/* Mobile hero card text */
.hero-mobile__card-text {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  font-size: 18px;
  color: #ffffff;
  text-align: right;
}

/* Золотой цвет применяется через JS анимацию, НЕ через CSS */
/* .hero-mobile__card-text--gold будет анимирован в #C39A6B после появления */

/* Mobile CTA position */
.hero-mobile__cta {
  position: absolute;
  bottom: 16px; /* Привязка к низу экрана вместо фиксированного top */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px); /* 16px отступ с каждой стороны */
  max-width: 343px;
  z-index: 2;
}

/* Short screens (iPhone SE, etc.) - adjust hero layout */
@media (max-height: 667px) and (max-width: 599px) {
  .hero-mobile__logo {
    top: 100px !important;
    width: 140px !important;
    height: 84px !important;
  }
  
  .hero-mobile__cards {
    top: 320px !important;
    gap: 6px !important;
  }
  
  .hero-mobile__card {
    padding: 12px 16px !important;
  }
  
  .hero-mobile__card-text {
    font-size: 16px !important;
  }
}

/* CTA Button styling */
.era-btn {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.era-btn--primary {
  background-color: #C39A6B;
  color: #ffffff;
  border-radius: 6px;
  padding: 12px 24px;
  white-space: nowrap;
}

.era-btn--primary:hover {
  background-color: #000000;
}

/* Full width button modifier */
.era-btn--full {
  width: 100%;
  text-align: center;
}

/* ============================================
   STATS SECTION - Desktop (REFACTORED)
   Figma Reference: 1920px base
   ============================================ */

/* Stats section base */
.stats-desktop {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  overflow: hidden;
  margin-top: 120px;
}

/* Stats background container */
.stats-desktop__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.stats-desktop__bg-inner {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
}

.stats-desktop__bg-wrapper {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: 100%;
}

.stats-desktop__bg-image {
  position: absolute;
  height: 116.59%;
  left: -23.35%;
  max-width: none;
  top: -16.59%;
  width: 146.69%;
}

/* Stats content container */
.stats-desktop__content {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  padding: 80px clamp(150px, 12.34vw, 237px) 32px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.stats-desktop__inner {
  display: flex;
  flex-direction: column;
  gap: 119px;
}

/* Stats text content */
.stats-desktop__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 708px;
  max-width: 45%;
}

.stats-desktop__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.stats-desktop__subtitle {
  color: #c39a6b;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 1.2;
  width: 100%;
}

.stats-desktop__title {
  color: #000000;
  font-size: 36px;
  line-height: 1.2;
  width: 100%;
}

.stats-desktop__paragraphs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  font-size: 20px;
  color: #000000;
  line-height: 1.2;
  width: 100%;
}

.stats-desktop__paragraph {
  width: 100%;
}

.stats-desktop__brand-name {
  font-style: italic;
  color: #c39a6b;
}

/* Stats cards container */
.stats-desktop__cards {
  display: flex;
  gap: 11px;
  align-items: stretch;
  width: 100%;
}

/* Stats card base */
.stats-desktop__card {
  flex: 1;
  display: flex;
  align-items: stretch;
}

.stats-desktop__card-inner {
  width: 100%;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 20px;
  font-family: 'Rising Sun', sans-serif;
  line-height: 1.2;
}

.stats-desktop__card-inner--logo {
  background-color: #c39a6b;
}

.stats-desktop__card-inner--dark {
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  color: #ffffff;
}

.stats-desktop__logo {
  height: 116px;
  width: 134px;
}

.stats-desktop__number {
  font-size: 48px;
  font-weight: 700;
  width: 100%;
}

.stats-desktop__label {
  font-size: 24px;
  width: 100%;
}

/* Stats Desktop - Responsive Adjustments */
@media (max-width: 1600px) {
  .stats-desktop__text {
    width: 100%;
    max-width: 45%;
  }
  .stats-desktop__inner {
    gap: 80px;
  }
  .stats-desktop__number {
    font-size: 42px;
  }
  .stats-desktop__label {
    font-size: 20px;
  }
}

@media (max-width: 1440px) {
  .stats-desktop__text {
    max-width: 50%;
  }
  .stats-desktop__title {
    font-size: 32px;
  }
  .stats-desktop__paragraphs {
    font-size: 18px;
  }
  .stats-desktop__inner {
    gap: 60px;
  }
  .stats-desktop__number {
    font-size: 36px;
  }
  .stats-desktop__label {
    font-size: 18px;
  }
  .stats-desktop__card-inner {
    padding: 20px;
  }
  .stats-desktop__logo {
    height: 90px;
    width: 104px;
  }
}

@media (max-width: 1280px) {
  .stats-desktop__content {
    padding: 60px clamp(80px, 8vw, 150px) 32px;
  }
  .stats-desktop__text {
    max-width: 55%;
  }
  .stats-desktop__title {
    font-size: 28px;
  }
  .stats-desktop__paragraphs {
    font-size: 16px;
  }
  .stats-desktop__inner {
    gap: 48px;
  }
  .stats-desktop__cards {
    gap: 8px;
  }
  .stats-desktop__number {
    font-size: 32px;
  }
  .stats-desktop__label {
    font-size: 16px;
  }
  .stats-desktop__card-inner {
    padding: 16px;
    border-radius: 16px;
  }
  .stats-desktop__logo {
    height: 70px;
    width: 80px;
  }
}

@media (max-width: 1024px) {
  .stats-desktop__content {
    padding: 48px clamp(40px, 5vw, 80px) 24px;
  }
  .stats-desktop__text {
    max-width: 60%;
  }
  .stats-desktop__subtitle {
    font-size: 14px;
  }
  .stats-desktop__title {
    font-size: 24px;
  }
  .stats-desktop__header {
    gap: 12px;
  }
  .stats-desktop__paragraphs {
    font-size: 14px;
    gap: 8px;
  }
  .stats-desktop__inner {
    gap: 32px;
  }
  .stats-desktop__cards {
    gap: 6px;
    flex-wrap: wrap;
  }
  .stats-desktop__card {
    flex: 0 0 calc(33.33% - 4px);
    min-width: 150px;
  }
  .stats-desktop__card:first-child,
  .stats-desktop__card:nth-child(2) {
    flex: 0 0 calc(50% - 3px);
  }
  .stats-desktop__number {
    font-size: 28px;
  }
  .stats-desktop__label {
    font-size: 14px;
  }
  .stats-desktop__card-inner {
    padding: 14px;
    border-radius: 12px;
  }
  .stats-desktop__logo {
    height: 60px;
    width: 70px;
  }
}

/* ============================================
   STATS SECTION - Mobile (REFACTORED)
   Figma Reference: 375px base
   ============================================ */

/* Stats mobile section */
.stats-mobile {
  position: relative;
  width: 100%;
  height: 933px;
  background-color: #ffffff;
  background: #fff;
  overflow: hidden;
  display: none;
}

@media (max-width: 599px) {
  .stats-mobile {
    display: block;
  }
  .stats-desktop {
    display: none;
  }
}

/* =====================================================
   STATS MOBILE - Точно по Figma (375×933)
   Абсолютное позиционирование как в макете
   ===================================================== */

/* .stats-mobile display controlled by media query above */

/* Фоновая картинка - 375×300, top: 633px, центрирована */
.stats-mobile__bg {
  position: absolute;
  left: 50%;
  top: 633px;
  transform: translateX(-50%);
  width: 375px;
  max-width: 100%;
  height: 300px;
  object-fit: cover;
}

/* Карточки - абсолютная позиция left: 16px, top: 470px */
.stats-mobile__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: absolute;
  left: 16px;
  top: 470px;
  width: 343px;
}

.stats-mobile__row {
  display: flex;
  gap: 8px;
  width: 343px;
}

.stats-mobile__row--single {
  flex-direction: column;
}

/* Logo card - 168×109 */
.stats-mobile__logo-card {
  width: 168px;
  height: 109px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #C39A6B;
  border-radius: 16px;
  backdrop-filter: blur(3.57px);
  -webkit-backdrop-filter: blur(3.57px);
}

.stats-mobile__logo {
  width: 92px;
  height: 80px;
}

/* Карточки с фиксированными размерами */
.stats-mobile__card {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 16px;
  font-family: 'Rising Sun', sans-serif;
}

.stats-mobile__card--167 {
  width: 167px;
  flex-shrink: 0;
}

.stats-mobile__card--168 {
  width: 168px;
  flex-shrink: 0;
}

.stats-mobile__number {
  color: #fff;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  margin: 0;
}

.stats-mobile__label {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  margin: 0;
}

/* Текст - абсолютная позиция top: 0, центрирован */
.stats-mobile__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 343px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
}

.stats-mobile__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stats-mobile__subtitle {
  color: #C39A6B;
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0;
}

.stats-mobile__title {
  color: #000;
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
}

.stats-mobile__paragraphs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats-mobile__paragraph {
  color: #000;
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
}

.stats-mobile__brand-name {
  font-style: italic;
  color: #C39A6B;
}

/* ============================================
   Catalog View More Button - По Figma node 42-11973/42-11974
   ============================================ */

/* Outer wrapper - node 42:11973 */
.catalog-view-more-wrapper {
  display: flex;
  align-items: stretch;
  padding: 24px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  height: 100%;
  box-sizing: border-box;
}

/* Inner button - node 42:11974 */
.catalog-view-more-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 32px;
  background: #fff;
  border-radius: 20px;
  flex: 1;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.catalog-view-more-btn:hover {
  opacity: 0.9;
}

.catalog-view-more-btn__logo {
  width: 300px;
  height: 260.38px;
  object-fit: contain;
}

.catalog-view-more-btn__text {
  font-family: 'Rising Sun', sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 120%;
  text-align: center;
  color: #000;
  margin: 0;
}

/* ============================================
   Projects Catalog - Desktop Section
   ============================================ */

/* Section container */
.catalog-section {
  padding-top: 100px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

/* Section header */
.catalog-header {
  padding: 0 606px 120px;
  text-align: center;
}

.catalog-title {
  font-size: 58px;
  font-weight: 500;
  margin-bottom: 82px;
  color: #000000;
}

.catalog-subtitle {
  font-size: 29px;
  font-weight: 500;
  color: #000000;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.4;
}

/* Catalog Header Responsive */
@media (max-width: 1600px) {
  .catalog-header {
    padding: 0 300px 100px;
  }
  .catalog-title {
    font-size: 52px;
    margin-bottom: 60px;
  }
  .catalog-subtitle {
    font-size: 26px;
  }
}

@media (max-width: 1440px) {
  .catalog-header {
    padding: 0 200px 80px;
  }
  .catalog-title {
    font-size: 46px;
    margin-bottom: 50px;
  }
  .catalog-subtitle {
    font-size: 24px;
  }
}

@media (max-width: 1280px) {
  .catalog-header {
    padding: 0 120px 60px;
  }
  .catalog-title {
    font-size: 40px;
    margin-bottom: 40px;
  }
  .catalog-subtitle {
    font-size: 22px;
  }
}

@media (max-width: 1024px) {
  .catalog-header {
    padding: 0 80px 50px;
  }
  .catalog-title {
    font-size: 36px;
    margin-bottom: 32px;
  }
  .catalog-subtitle {
    font-size: 20px;
    max-width: 100%;
  }
}

@media (max-width: 599px) {
  .catalog-header {
    padding: 0 40px 40px;
  }
  .catalog-title {
    font-size: 32px;
    margin-bottom: 24px;
  }
  .catalog-subtitle {
    font-size: 18px;
  }
}

/* Categories container */
.catalog-categories {
  gap: 120px;
}

/* Single category */
.catalog-category {
  gap: 117px;
}

/* Category header (black label) */
.catalog-category__header {
  padding: 16px 32px 16px 269px;
  border-radius: 0 8px 8px 0;
  width: fit-content;
  margin-left: calc(-1 * max(0px, (100vw - 1920px) / 2));
}

.catalog-category__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  font-family: 'Rising Sun', sans-serif;
  margin: 0;
}

/* Cards container */
.catalog-cards {
  padding: 0 237px;
}

.catalog-cards__grid {
  gap: 30px;
}

.catalog-cards__row {
  gap: 30px;
  align-items: stretch;
}

/* Project card outer (dark glass) */
.catalog-card {
  padding: 24px;
  background: rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Project card inner (white) */
.catalog-card__inner {
  padding: 16px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Pagination & Navigation row */
.catalog-card__pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
}

.catalog-card__pagination-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.catalog-card__nav-arrows {
  display: flex;
  gap: 24px;
}

/* Counter (1/4) */
.catalog-card__counter {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: #000000;
  font-family: 'Rising Sun', sans-serif;
}

/* Navigation button */
.catalog-card__nav-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Swiper container */
.catalog-card__swiper {
  border-radius: 16px;
  overflow: hidden;
}

/* Slide image */
.catalog-card__image {
  height: 400px;
  object-fit: cover;
}

/* Project info section */
.catalog-card__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Top row (tech + area) */
.catalog-card__tech-row {
  display: flex;
  gap: 40px;
}

/* Media section (image + pagination) */
.catalog-card__media {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Left column (tech + icons) */
.catalog-card__tech {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.catalog-card__tech-label {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: #C39A6B;
  font-family: 'Rising Sun', sans-serif;
}

.catalog-card__tech-value {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: #000000;
  font-family: 'Rising Sun', sans-serif;
  margin-bottom: 8px;
}

/* Icons row (bedrooms + bathrooms) */
.catalog-card__icons {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

.catalog-card__icon-group {
  display: flex;
  gap: 4px;
  align-items: flex-end;
}

.catalog-card__icon {
  width: 32px;
  height: 32px;
  position: relative;
}

.catalog-card__icon svg {
  display: block;
}

.catalog-card__icon-value {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: #000000;
  font-family: 'Rising Sun', sans-serif;
}

/* Right column (area) */
.catalog-card__area {
  width: 180px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: 'Rising Sun', sans-serif;
}

.catalog-card__area-label {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: #C39A6B;
  text-align: right;
  width: 100%;
}

.catalog-card__area-value {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  color: #000000;
  text-align: right;
  width: 100%;
}

.catalog-card__area-value sup {
  font-size: 0.5em;
  vertical-align: super;
  line-height: 0;
}

/* Rooms list */
.catalog-card__rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.catalog-card__room-label {
  font-size: 18px;
  color: #C39A6B;
}

.catalog-card__room-value {
  font-size: 18px;
  color: #000000;
}

.catalog-card__room-value sup {
  font-size: 11.61px;
}

/* CTA Button */
.catalog-card__cta {
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  width: 100%;
}

.catalog-card__cta-text {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: #FFFFFF;
  font-family: 'Rising Sun', sans-serif;
}

/* =============================================
   CATALOG RESPONSIVE + STICKY HEADERS
   ============================================= */

/* CSS переменная для высоты header (обновляется через JS) */
:root {
  --header-height: 188px; /* Начальное значение, JS обновит */
}

/* Sticky category header - прилипает ниже основного меню */
.catalog-category__header {
  position: sticky;
  top: var(--header-height, 188px); /* Используем CSS переменную */
  z-index: 40; /* Ниже чем меню (z-index: 50) */
  transition: all 0.3s ease;
}

/* Когда header прилип - делаем его компактнее */
.catalog-category__header.is-stuck {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.catalog-category__header.is-stuck .catalog-category__title {
  font-size: 20px;
}

/* Reduce gap between header and cards */
.catalog-category {
  gap: 60px; /* was 117px */
}

/* Cards container with class */
.catalog-category__cards {
  padding: 0 237px;
}

/* Responsive: 1440px and below */
@media (max-width: 1600px) {
  .catalog-category__header {
    top: 70px;
  }
  
  .catalog-category__cards,
  .catalog-cards,
  div[style*="padding: 0 237px"] {
    padding: 0 120px !important;
  }
  
  .catalog-category__header,
  div[style*="padding: 16px 32px 16px 269px"] {
    padding: 16px 32px 16px 150px !important;
  }
  
  .catalog-category {
    gap: 50px;
  }
}

@media (max-width: 1440px) {
  .catalog-category__header {
    top: 60px;
  }
  
  .catalog-category__cards,
  .catalog-cards,
  div[style*="padding: 0 237px"] {
    padding: 0 80px !important;
  }
  
  .catalog-category__header,
  div[style*="padding: 16px 32px 16px 269px"] {
    padding: 16px 32px 16px 100px !important;
  }
  
  .catalog-card {
    padding: 20px;
  }
  
  .catalog-card__inner {
    padding: 14px;
    gap: 20px;
  }
  
  .catalog-card__counter {
    font-size: 20px;
  }
  
  .catalog-card__area-value {
    font-size: 32px;
  }
}

@media (max-width: 1280px) {
  .catalog-category__header {
    top: 50px;
  }
  
  .catalog-category__cards,
  .catalog-cards,
  div[style*="padding: 0 237px"] {
    padding: 0 60px !important;
  }
  
  .catalog-category__header,
  div[style*="padding: 16px 32px 16px 269px"] {
    padding: 16px 24px 16px 80px !important;
  }
  
  .catalog-card {
    padding: 16px;
  }
  
  .catalog-card__inner {
    padding: 12px;
    gap: 16px;
  }
  
  .catalog-card__tech-label,
  .catalog-card__area-label {
    font-size: 12px;
  }
  
  .catalog-card__tech-value {
    font-size: 16px;
  }
  
  .catalog-card__area-value {
    font-size: 28px;
  }
  
  .catalog-card__room-label,
  .catalog-card__room-value {
    font-size: 14px;
  }
  
  .catalog-card__cta {
    padding: 10px 20px;
  }
  
  .catalog-card__cta-text {
    font-size: 16px;
  }
  
  .catalog-cards__row,
  div[style*="gap: 30px"] {
    gap: 20px !important;
  }
}

/* =============================================
   FOLDABLE PHONES + DEVICE COMPATIBILITY
   Samsung Z Fold 5/6/7, Apple devices, etc.
   ============================================= */

/* CSS переменные для динамических viewport units */
:root {
  /* Fallback для старых браузеров */
  --vh: 1vh;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Поддержка динамических viewport units (iOS 15+, Android 12+) */
@supports (height: 100dvh) {
  :root {
    --vh: 1dvh; /* Dynamic viewport height - учитывает адресную строку */
  }
}

/* Foldable devices: Samsung Z Fold series */
/* Основной экран (внутренний дисплей) ~7.6" с aspect ratio ~10:9 */
@media (min-width: 800px) and (max-width: 1000px) and (min-height: 700px) and (max-height: 950px) {
  /* Это характерные размеры для Samsung Z Fold в развёрнутом виде */
  .era-section--hero {
    min-height: calc(100 * var(--vh, 1vh));
  }
  
  .catalog-category__cards {
    padding: 0 80px !important;
  }
  
  .catalog-cards__row {
    gap: 20px !important;
  }
  
  .catalog-card {
    max-width: none;
  }
}

/* Внешний экран Samsung Z Fold (~6.2" с aspect ratio ~23:9) */
@media (min-width: 350px) and (max-width: 450px) and (min-height: 800px) {
  /* Узкий и высокий экран - типичный внешний дисплей Fold */
  .era-section--hero {
    min-height: 100svh; /* Small viewport - всегда фиксированная высота */
  }
}

/* Aspect ratio queries для foldables */
/* Квадратные/почти квадратные экраны (foldables в развёрнутом виде) */
@media (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) and (min-width: 700px) {
  /* Почти квадратный экран - оптимизация контента */
  .catalog-cards__grid {
    gap: 40px;
  }
  
  .project-gallery__container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Очень узкие экраны (cover screen Samsung, flip phones) */
@media (max-aspect-ratio: 1/2) {
  /* Экстремально вертикальный экран */
  .catalog-category__header {
    font-size: 0.85em;
    padding: 12px 16px !important;
  }
}

/* Очень широкие экраны (landscape на foldables, ultra-wide monitors) */
@media (min-aspect-ratio: 21/9) {
  .catalog-category__cards {
    max-width: 1600px;
    margin: 0 auto;
  }
}

/* Safe areas для устройств с вырезами (notch, dynamic island) */
@supports (padding-top: env(safe-area-inset-top)) {
  /* Только mobile-header, т.к. era-header управляется через scroll-header.js */
  .mobile-header {
    padding-top: calc(var(--safe-area-top) + 24px);
  }
  
  .mobile-menu {
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
  }
}

/* Apple устройства - специфичная оптимизация */
/* Safari iOS tap highlight fix */
@media (pointer: coarse) {
  button, a, .catalog-card__cta {
    -webkit-tap-highlight-color: transparent;
  }
}

/* iOS Safari momentum scrolling */
.catalog-category__cards,
.project-gallery__container {
  -webkit-overflow-scrolling: touch;
}

/* Prevent pull-to-refresh on iOS */
body {
  overscroll-behavior-y: none;
}

/* High-DPI (Retina) устройства */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Более чёткие тени для retina */
  .catalog-category__header.is-stuck {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
  
  .catalog-card {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
}

/* Устройства с hover (мышь, тачпад) vs touch */
@media (hover: hover) and (pointer: fine) {
  /* Desktop/laptop с мышью - премиум hover эффект */
  .catalog-card {
    transition: box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  
  .catalog-card:hover {
    /* Без движения - только глубокая тень */
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.08),
      0 16px 40px rgba(0, 0, 0, 0.12);
  }
}

@media (hover: none) and (pointer: coarse) {
  /* Touch-only устройства - отключаем hover эффекты */
  .catalog-card:hover {
    transform: none;
    box-shadow: none;
  }
  
  /* Увеличиваем touch targets */
  .catalog-card__cta {
    min-height: 44px; /* Apple minimum touch target */
  }
  
  a, button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Orientation change handling */
@media (orientation: portrait) and (max-width: 599px) {
  .catalog-cards__row {
    flex-direction: column;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  /* Landscape на телефоне - очень ограниченная высота */
  .era-section--hero {
    min-height: 100svh;
  }
  
  .catalog-category__header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* =============================================
   FOLDABLE DEVICES - DESKTOP WITH REDUCED MARGINS
   Samsung Z Fold 5/6/7 (развёрнутый экран)
   Ширина внутреннего экрана: 600-900px
   
   СТРАТЕГИЯ: Показываем DESKTOP версии с уменьшенными отступами
   Это устраняет проблемы с отдельными fold-версиями
   ============================================= */

/* ========== FOLDABLE UNFOLDED (600-900px) - Desktop с уменьшенными margins ========== */
@media (min-width: 600px) and (max-width: 932px) {
  
  /* ===== HEADER ДЛЯ FOLD: Чистый, пропорциональный ===== */
  /* Стили background/blur/shadow управляются JS (scroll-header.js) прогрессивно */
  .era-header {
    transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease !important;
  }
  
  /* При скролле — стили применяются через JS (scroll-header.js) прогрессивно */
  /* JS управляет background, backdrop-filter и box-shadow напрямую */
  
  .era-header__container {
    padding: 12px 20px !important;
    gap: 16px !important;
    justify-content: space-between !important;
  }
  
  /* Логотип - пропорциональный */
  .era-logo {
    width: 80px !important;
    flex-shrink: 0 !important;
  }
  
  /* Навигация - читаемая, по центру */
  .era-header__nav {
    gap: 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    flex: 1 !important;
    justify-content: center !important;
  }
  
  .era-header__nav a {
    padding: 6px 0 !important;
    position: relative !important;
    color: #000 !important;
    transition: color 0.3s ease !important;
  }
  
  .era-header__nav a:hover {
    color: #C39A6B !important;
  }
  
  /* Hover underline эффект для nav */
  .era-header__nav a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: #C39A6B !important;
    transition: width 0.3s ease !important;
  }
  
  .era-header__nav a:hover::after {
    width: 100% !important;
  }
  
  /* Телефон - скрыт */
  .era-header__phone {
    display: none !important;
  }
  
  /* Соцсети - нормальный размер, видимые */
  .era-header__social {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }
  
  .era-header__social a {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    transition: transform 0.2s ease !important;
  }
  
  .era-header__social a:hover {
    transform: scale(1.1) !important;
  }
  
  .era-header__social a img {
    width: 18px !important;
    height: 18px !important;
  }
  
  /* CTA кнопка - СКРЫТА на Fold (как на планшетах) */
  .era-btn--header-cta {
    display: none !important;
  }
  
  /* Контейнер контактов */
  .era-header__contacts {
    gap: 8px !important;
    align-items: center !important;
  }
  
  /* --- GLOBAL: Показываем MOBILE версии на Fold (компактный layout) --- */
  #technologies {
    display: none !important;
  }
  #technologies-mobile {
    display: flex !important;
  }
  
  #consultation {
    display: block !important;
  }
  #consultation-mobile {
    display: none !important;
  }
  
  .stats-desktop {
    display: block !important;
    margin-top: 60px !important;
    background: #ffffff !important; /* Белый фон для читаемости */
  }
  .stats-mobile {
    display: none !important;
  }
  
  /* --- STATS DESKTOP: Адаптация для Fold --- */
  
  /* Скрываем фоновое изображение дома на Fold */
  .stats-desktop__bg {
    display: none !important;
  }
  
  .stats-desktop__content {
    padding: 40px 24px 32px !important;
  }
  
  .stats-desktop__inner {
    gap: 24px !important;
    flex-direction: column !important;
  }
  
  .stats-desktop__text {
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
  }
  
  .stats-desktop__header {
    gap: 8px !important;
  }
  
  .stats-desktop__subtitle {
    font-size: 14px !important;
    color: #c39a6b !important;
  }
  
  .stats-desktop__title {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  
  .stats-desktop__paragraphs {
    gap: 10px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  
  /* Cards: сетка 2x2 + logo сверху */
  .stats-desktop__cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }
  
  /* Первая карточка (лого) — на всю ширину */
  .stats-desktop__card:first-child {
    grid-column: span 2 !important;
  }
  
  .stats-desktop__card {
    width: 100% !important;
  }
  
  .stats-desktop__card-inner {
    padding: 16px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 90px !important;
  }
  
  .stats-desktop__card-inner--logo {
    min-height: 100px !important;
  }
  
  .stats-desktop__logo {
    width: 100px !important;
    height: auto !important;
    max-height: 70px !important;
    object-fit: contain !important;
  }
  
  .stats-desktop__number {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }
  
  .stats-desktop__label {
    font-size: 11px !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }
  
  #faq {
    display: block !important;
  }
  #faq-mobile {
    display: none !important;
  }
  
  #cta {
    display: block !important;
  }
  #cta-mobile {
    display: none !important;
  }
  
  #era-gallery {
    display: block !important;
  }
  
  #era-gallery-mobile {
    display: none !important;
  }
  
  /* --- HERO SECTION: Desktop с адаптацией --- */
  .era-section--hero {
    min-height: calc(100 * var(--vh, 1vh)) !important;
  }
  
  .era-hero-stack--desktop {
    display: flex !important;
    padding-right: 24px !important;
  }
  
  .era-hero-mobile {
    display: none !important;
  }
  
  .era-hero__subtitle {
    font-size: 12px !important;
  }
  
  .era-hero__title {
    font-size: 28px !important;
  }
  
  .era-hero__description {
    font-size: 14px !important;
  }
  
  .era-hero-card {
    padding: 16px 20px !important;
  }
  
  /* --- TECHNOLOGIES: Уменьшенные отступы --- */
  .tech-desktop-container {
    padding: 60px 32px !important;
  }
  
  .tech-desktop-top {
    padding-right: 24px !important;
  }
  
  .tech-desktop-logo {
    width: 180px !important;
    height: 107px !important;
  }
  
  .tech-desktop-list {
    padding: 24px !important;
    gap: 16px !important;
  }
  
  .tech-desktop-title {
    font-size: 16px !important;
  }
  
  .tech-desktop-desc {
    font-size: 14px !important;
  }
  
  /* --- CONSULTATION: Стили для Fold --- */
  
  /* Секция Consultation — фон как на ПК, дом внизу */
  #consultation {
    background-position: center bottom !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    min-height: 380px !important;
    padding-top: 16px !important;
    padding-bottom: 20px !important;
  }
  
  .consult-desktop-container {
    padding: 0 24px 16px !important;
    justify-content: flex-start !important;
  }
  
  .consult-desktop-text-block {
    padding: 0 16px !important;
    margin-bottom: 6px !important;
  }
  
  .consult-desktop-subtitle {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 4px !important;
  }
  
  .consult-desktop-title {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  
  .consult-desktop-form-block {
    padding: 12px 16px !important;
    max-width: 600px !important;
    margin: 0 auto !important;
  }
  
  .consult-desktop-form-title {
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }
  
  /* Форма ГОРИЗОНТАЛЬНАЯ как на ПК */
  .consult-desktop-form {
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
  }
  
  .consult-desktop-inputs {
    flex-direction: row !important;
    gap: 8px !important;
    flex: 1 !important;
  }
  
  .consult-desktop-input {
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .consult-desktop-submit {
    width: auto !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    height: auto !important;
    min-height: unset !important;
    white-space: nowrap !important;
  }
  
  /* --- STATS: Уменьшенные отступы --- */
  .stats-desktop__content {
    padding: 40px 32px 24px !important;
  }
  
  .stats-desktop__text {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .stats-desktop__subtitle {
    font-size: 12px !important;
  }
  
  .stats-desktop__title {
    font-size: 22px !important;
  }
  
  .stats-desktop__paragraphs {
    font-size: 13px !important;
  }
  
  .stats-desktop__inner {
    gap: 24px !important;
  }
  
  .stats-desktop__cards {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  
  .stats-desktop__card {
    flex: 0 0 calc(33.33% - 4px) !important;
    min-width: 120px !important;
  }
  
  .stats-desktop__card:first-child,
  .stats-desktop__card:nth-child(2) {
    flex: 0 0 calc(50% - 3px) !important;
  }
  
  .stats-desktop__number {
    font-size: 24px !important;
  }
  
  .stats-desktop__label {
    font-size: 11px !important;
  }
  
  .stats-desktop__logo {
    height: 50px !important;
    width: 58px !important;
  }
  
  /* --- CATALOG: Уменьшенные отступы --- */
  .catalog-header {
    padding: 0 32px 40px !important;
  }
  
  .catalog-title {
    font-size: 28px !important;
  }
  
  .catalog-subtitle {
    font-size: 16px !important;
  }
  
  .catalog-cards {
    padding: 0 32px !important;
  }
  
  .catalog-cards__row {
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  .catalog-card {
    max-width: 100% !important;
    width: 100% !important;
    padding: 16px !important;
  }
  
  .catalog-card__image {
    height: 280px !important;
  }
  
  .catalog-category__header {
    padding: 12px 20px 12px 50px !important;
  }
  
  .catalog-category__title {
    font-size: 18px !important;
  }
  
  /* --- FAQ: Уменьшенные отступы --- */
  .faq-desktop__container {
    padding: 40px 32px 60px !important;
  }
  
  .faq-desktop__title {
    font-size: 12px !important;
  }
  
  .faq-desktop__question-text {
    font-size: 16px !important;
  }
  
  .faq-desktop__answer-text {
    font-size: 13px !important;
  }
  
  /* --- CTA: Адаптация для Fold (600-900px) --- */
  #cta {
    padding-top: 300px !important;
    padding-bottom: 24px !important;
  }
  
  /* Контейнер - уменьшаем боковые отступы */
  #cta > .w-full.max-w-\[1920px\] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  
  /* Главная карточка опроса - вертикальная раскладка */
  #cta .bg-black\/50.rounded-\[20px\].flex.items-end {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 24px !important;
    gap: 16px !important;
  }
  
  /* Текст в карточке опроса */
  #cta .bg-black\/50 .text-\[36px\] {
    font-size: 24px !important;
  }
  
  #cta .bg-black\/50 .text-\[18px\] {
    font-size: 14px !important;
  }
  
  /* Кнопка "Пройти опрос" - на всю ширину */
  #cta a.bg-\[\#c39a6b\] {
    width: 100% !important;
    padding: 12px 24px !important;
  }
  
  #cta a.bg-\[\#c39a6b\] .text-\[24px\] {
    font-size: 18px !important;
  }
  
  /* Контейнер двух кнопок - вертикально */
  #cta .flex.w-full[style*="gap: 16px"] {
    flex-direction: column !important;
  }
  
  /* Кнопки "Записаться" и "Бизнес" */
  #cta a.flex-1.bg-black\/50 {
    flex: none !important;
    width: 100% !important;
    padding: 20px 24px !important;
    gap: 16px !important;
  }
  
  #cta a.flex-1 .text-\[24px\] {
    font-size: 16px !important;
  }
  
  /* ===== GALLERY SECTION: Компактная адаптация для Fold ===== */
  /* ВАЖНО: Показываем desktop, скрываем mobile для Fold (600-900px) */
  #era-gallery {
    display: block !important;
    padding: 24px 16px !important;
  }
  
  #era-gallery-mobile {
    display: none !important;
  }
  
  /* Контейнер - уменьшаем боковые отступы */
  #era-gallery > .w-full.max-w-\[1920px\] {
    padding: 0 16px !important;
  }
  
  /* Gap между элементами */
  #era-gallery .flex.flex-col[style*="gap: 56px"] {
    gap: 24px !important;
  }
  
  /* Заголовок секции - компактнее */
  #era-gallery .text-\[\#c39a6b\].text-\[18px\].uppercase {
    font-size: 10px !important;
  }

  #era-gallery .text-black.text-\[36px\] {
    font-size: 14px !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }
  
  /* Контейнер заголовка - убираем внутренний padding */
  #era-gallery .flex.flex-col.gap-\[16px\].text-center {
    padding: 0 !important;
    gap: 8px !important;
  }  /* Сетка изображений - уменьшаем gap и высоту */
  #era-gallery .flex.flex-col.gap-\[24px\] {
    gap: 8px !important;
  }
  
  #era-gallery .flex.gap-\[24px\] {
    gap: 8px !important;
  }
  
  /* Ряд 1: 2 больших фото - высота уменьшена */
  #era-gallery .h-\[450px\] {
    height: 120px !important;
  }
  
  /* Ряд 2: 3 средних фото - высота уменьшена */
  #era-gallery .h-\[350px\] {
    height: 100px !important;
  }
  
  /* Ряд 3: 4 маленьких фото - высота уменьшена */
  #era-gallery .h-\[250px\] {
    height: 80px !important;
  }
  
  /* Скругление картинок - меньше */
  #era-gallery .rounded-\[20px\] {
    border-radius: 8px !important;
  }
  
  /* Gap между сеткой и баром */
  #era-gallery .flex.flex-col.w-full[style*="gap: 40px"] {
    gap: 16px !important;
  }
  
  /* Нижний бар - компактнее */
  #era-gallery .era-gallery-bar {
    padding: 16px 20px !important;
    border-radius: 12px !important;
  }
  
  /* Счётчик - меньше шрифт */
  #era-gallery .era-gallery-counter {
    font-size: 16px !important;
  }
  
  /* Кнопка "Больше фотографий" - меньше */
  #era-gallery #era-gallery-more {
    font-size: 14px !important;
    gap: 8px !important;
  }
  
  #era-gallery #era-gallery-more svg {
    width: 12px !important;
    height: 12px !important;
  }
  
  /* --- FOOTER: Desktop версия адаптирована для Fold (600-900px) --- */
  #footer {
    display: block !important;
  }
  #footer-mobile {
    display: none !important;
  }
  
  /* Главный контейнер - flex-wrap для переноса элементов */
  #footer > div {
    padding: 32px 24px !important;
    gap: 24px 40px !important;
    flex-wrap: wrap !important;
  }
  
  /* Левая колонка (логотип + copyright) */
  #footer > div > div:first-child {
    width: auto !important;
    gap: 24px !important;
  }
  
  /* Уменьшаем логотип */
  #footer .w-\[170px\].h-\[100px\] {
    width: 100px !important;
    height: 60px !important;
  }
  
  /* Центральная часть (Навигация + Контакты) - на всю ширину */
  #footer .flex-1.flex {
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    gap: 24px 40px !important;
    padding-top: 0 !important;
  }
  
  /* Каждая колонка (Навигация, Контакты) */
  #footer .flex-1.flex > .flex-1.flex.flex-col {
    flex: 1 1 calc(50% - 20px) !important;
    min-width: 140px !important;
    gap: 16px !important;
  }
  
  /* Заголовки секций */
  #footer .text-white\/60.text-\[24px\] {
    font-size: 16px !important;
  }
  
  /* Ссылки */
  #footer .text-\[18px\] {
    font-size: 13px !important;
  }
  
  /* Адрес заголовок */
  #footer .text-white.text-\[24px\] {
    font-size: 16px !important;
  }
  
  /* Copyright текст */
  #footer .text-\[16px\] {
    font-size: 12px !important;
  }
  
  /* Кнопка "Наверх" - показываем компактную версию */
  #footer #scroll-to-top {
    display: flex !important;
    position: absolute !important;
    right: 24px !important;
    top: 24px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }
  
  #footer #scroll-to-top img {
    width: 24px !important;
    height: 24px !important;
  }
  
  /* ===== ROUTE HINT для Fold - СЛЕВА внизу (не блокировать контент) ===== */
  .route-hint {
    bottom: 16px !important;
    left: 16px !important;
    right: auto !important;
    transform: none !important;
  }
  
  .route-hint__content {
    padding: 8px 10px !important;
    max-width: 200px !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
  }
  
  .route-hint__content p {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  
  .route-hint__yes {
    padding: 5px 10px !important;
    font-size: 10px !important;
    border-radius: 5px !important;
  }
  
  .route-hint__no {
    width: 26px !important;
    height: 26px !important;
  }
  
  /* ===== Phone Tooltip для Fold - ПОКАЗЫВАЕМ ===== */
  .footer-phone-tooltip {
    display: block !important;
  }
  
  /* ===== FAQ SECTION ===== */
  #faq {
    display: block !important;
    /* Убираем градиент, делаем полностью темный фон для лучшей читаемости */
    background: linear-gradient(to right, #000000 0%, #000000 100%) !important;
  }
  
  #faq-mobile {
    display: none !important;
  }
  
  /* Контейнер - уменьшаем отступы */
  #faq > .w-full.max-w-\[1920px\] {
    padding: 60px 24px 80px 24px !important;
  }
  
  /* Список вопросов - уменьшаем max-width */
  #faq .flex.flex-col[style*="max-width: 1068px"] {
    max-width: 100% !important;
  }
  
  /* Заголовок секции */
  #faq .text-\[\#c39a6b\].text-\[18px\].uppercase {
    font-size: 14px !important;
  }
  
  /* Вопросы - уменьшаем размер шрифта */
  #faq .faq-item .text-white.text-\[24px\] {
    font-size: 18px !important;
  }
  
  /* Ответы - уменьшаем размер шрифта */
  #faq .faq-answer .text-white.text-\[18px\] {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  
  /* Отступы между вопросами */
  #faq .faq-item {
    padding: 20px 0 !important;
  }
  
  /* Пагинация - уменьшаем размер */
  #faq #faq-counter {
    font-size: 18px !important;
  }
  
  /* Кнопка "Больше вопросов" */
  #faq #faq-more-btn .text-\[\#c39a6b\].text-\[24px\] {
    font-size: 16px !important;
  }
  
  /* Пагинация контейнер - компактнее */
  #faq .flex.items-center.justify-between {
    padding: 16px 0 !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  
  /* Фоновая картинка - затемняем больше */
  #faq > .absolute.inset-0 img {
    opacity: 0.3 !important;
  }
}

/* ========== COVER SCREEN / NARROW FOLDABLE (внешний экран Fold) ========== */
/* Samsung Z Fold cover screen: ~374-412px width × 800-900px height */
@media (min-width: 320px) and (max-width: 450px) {
  
  /* Уменьшаем размеры карточек */
  .catalog-card {
    padding: 12px !important;
  }
  
  .catalog-card__inner {
    padding: 10px !important;
    gap: 12px !important;
  }
  
  .catalog-card__image {
    height: 200px !important;
  }
  
  .catalog-card__counter {
    font-size: 16px !important;
  }
  
  .catalog-card__nav-btn svg {
    width: 16px !important;
    height: 12px !important;
  }
  
  .catalog-card__area-value {
    font-size: 24px !important;
  }
  
  .catalog-card__tech-value {
    font-size: 14px !important;
  }
  
  .catalog-card__icon svg {
    width: 20px !important;
    height: 16px !important;
  }
  
  .catalog-card__room-label,
  .catalog-card__room-value {
    font-size: 12px !important;
  }
  
  .catalog-card__cta {
    padding: 10px 16px !important;
  }
  
  .catalog-card__cta-text {
    font-size: 14px !important;
  }
  
  .catalog-category__cards {
    padding: 0 12px !important;
  }
  
  .catalog-category__header {
    padding: 12px 16px 12px 40px !important;
    font-size: 14px !important;
  }
  
  .catalog-category__title {
    font-size: 16px !important;
  }
  
  /* Stats mobile - уменьшаем */
  .stats-mobile__number {
    font-size: 28px !important;
  }
  
  .stats-mobile__label {
    font-size: 12px !important;
  }
  
  .stats-mobile__card-inner {
    padding: 14px !important;
  }
  
  /* Tech mobile */
  .tech-mobile-header {
    font-size: 24px !important;
  }
  
  .tech-mobile-text {
    font-size: 14px !important;
  }
  
  #technologies-mobile {
    padding: 60px 12px !important;
  }
}

/* ========== ASPECT RATIO QUERIES - DISABLED (was causing conflicts) ========== */
/* Этот блок был удалён, т.к. он переопределял foldable правила и показывал
   mobile версии на квадратных экранах Galaxy Fold (29.11.2025) */

/* ============================================
   GALLERY SECTION - Pagination Bar
   Figma Reference: Desktop 1920px, Mobile 375px
   ============================================ */

/* Gallery Bar - Desktop */
.era-gallery-bar {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.era-gallery-pagination {
  display: flex;
  align-items: center;
  gap: 18px;
}

.era-gallery-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.era-gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.6);
  transition: background 0.2s ease;
  cursor: pointer;
}

.era-gallery-dot.active {
  background: #ffffff;
}

.era-gallery-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.era-gallery-counter {
  color: #ffffff;
  font-size: 24px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

/* Gallery Bar - Mobile */
.era-gallery-bar-mobile {
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.era-gallery-pagination-mobile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.era-gallery-dots-mobile {
  display: flex;
  align-items: center;
  gap: 4px;
}

.era-gallery-dots-mobile .era-gallery-dot {
  width: 6px;
  height: 6px;
}

.era-gallery-counter-mobile {
  color: #ffffff;
  font-size: 14px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

/* ============================================
   FAQ SECTION - Desktop (REFACTORED)
   Figma Reference: 1920px base
   ============================================ */

/* FAQ Desktop */
#faq {
  background: linear-gradient(to right, #000000 0%, #000000 55.625%, transparent 55.625%);
}

.faq-desktop__container {
  padding: 80px clamp(150px, 12.34vw, 237px) 120px;
}

.faq-desktop__content {
  gap: 32px;
  max-width: 1068px;
}

.faq-desktop__title {
  color: #c39a6b;
  font-size: 18px;
  text-transform: uppercase;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.faq-desktop__item {
  padding: 32px 0;
  border-bottom: 1px solid #686673;
}

.faq-desktop__question {
  gap: 16px;
}

.faq-desktop__question-text {
  color: #ffffff;
  font-size: 24px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.faq-desktop__answer {
  margin-top: 16px;
}

.faq-desktop__answer-text {
  color: #ffffff;
  font-size: 18px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

/* FAQ Mobile */
#faq-mobile {
  display: none;
  background-color: #000000;
}

.faq-mobile__container {
  padding: 48px 16px 32px;
}

.faq-mobile__content {
  gap: 32px;
}

.faq-mobile__title {
  color: #c39a6b;
  font-size: 12px;
  text-transform: uppercase;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.faq-mobile__item {
  padding: 24px 0;
  border-bottom: 1px solid #686673;
}

.faq-mobile__question {
  gap: 12px;
}

.faq-mobile__question-text {
  color: #ffffff;
  font-size: 16px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.faq-mobile__answer {
  margin-top: 16px;
  padding-bottom: 24px;
}

.faq-mobile__answer-text {
  color: #ffffff;
  font-size: 14px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.4;
}

/* FAQ Responsive */
/* Fold (600-900px) показывает desktop версию */
@media (max-width: 599px) {
  #faq {
    display: none !important;
  }
  #faq-mobile {
    display: block !important;
  }
}

@media (max-width: 1440px) {
  .faq-desktop__question-text {
    font-size: 22px;
  }
  .faq-desktop__answer-text {
    font-size: 16px;
  }
}

@media (max-width: 1280px) {
  .faq-desktop__container {
    padding: 60px clamp(80px, 8vw, 150px) 80px;
  }
  .faq-desktop__question-text {
    font-size: 20px;
  }
  .faq-desktop__answer-text {
    font-size: 15px;
  }
}

@media (max-width: 1024px) {
  .faq-desktop__container {
    padding: 48px clamp(40px, 5vw, 80px) 60px;
  }
  .faq-desktop__title {
    font-size: 14px;
  }
  .faq-desktop__question-text {
    font-size: 18px;
  }
  .faq-desktop__answer-text {
    font-size: 14px;
  }
  .faq-desktop__item {
    padding: 24px 0;
  }
}

/* ============================================
   CTA SECTION - Desktop (REFACTORED)
   Figma Reference: 1920px base
   ============================================ */

/* CTA Desktop */
#cta {
  padding: 636px 0 32px 0;
  margin-top: -80px;
}

.cta-desktop__container {
  padding: 0 clamp(150px, 12.34vw, 237px);
}

.cta-desktop__content {
  gap: 16px;
}

.cta-desktop__card {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 40px;
  gap: 24px;
}

.cta-desktop__card-text {
  gap: 8px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.cta-desktop__card-subtitle {
  color: #ffffff;
  font-size: 18px;
}

.cta-desktop__card-title {
  color: #ffffff;
  font-size: 36px;
}

.cta-desktop__btn-quiz {
  background-color: #c39a6b;
  border-radius: 6px;
  padding: 12px 40px;
  color: #ffffff;
  font-size: 24px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  transition: opacity 0.3s;
}

.cta-desktop__btn-quiz:hover {
  opacity: 0.9;
}

.cta-desktop__buttons {
  gap: 16px;
}

.cta-desktop__btn-link {
  flex: 1;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 32px 32px 32px 40px;
  gap: 24px;
  transition: opacity 0.3s;
}

.cta-desktop__btn-link:hover {
  opacity: 0.9;
}

.cta-desktop__btn-text {
  color: #ffffff;
  font-size: 24px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

/* CTA Mobile */
#cta-mobile {
  display: none;
  height: 733px;
  background-color: #000000;
}

.cta-mobile__bg {
  position: absolute;
  left: 0;
  top: 433px;
  width: 375px;
  height: 300px;
  object-fit: cover;
}

.cta-mobile__container {
  position: absolute;
  left: 16px;
  top: 60px;
  width: 343px;
  gap: 8px;
}

.cta-mobile__card {
  background: rgba(195, 154, 107, 0.2);
  border-radius: 6px;
  padding: 24px 12px 12px;
  gap: 24px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cta-mobile__card-text {
  gap: 4px;
}

.cta-mobile__card-subtitle {
  color: #ffffff;
  font-size: 12px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.cta-mobile__card-title {
  color: #ffffff;
  font-size: 18px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.cta-mobile__btn-quiz {
  background-color: #c39a6b;
  border-radius: 6px;
  padding: 12px 24px;
  color: #ffffff;
  font-size: 16px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.cta-mobile__buttons {
  padding: 0 12px;
  gap: 8px;
}

.cta-mobile__btn-link {
  background: rgba(195, 154, 107, 0.2);
  border-radius: 6px;
  padding: 16px 12px 16px 16px;
  gap: 16px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cta-mobile__btn-text {
  color: #ffffff;
  font-size: 16px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

/* CTA Responsive */
/* Fold (600-900px) показывает desktop версию */
@media (max-width: 599px) {
  #cta {
    display: none !important;
  }
  #cta-mobile {
    display: block !important;
  }
}

@media (max-width: 1440px) {
  #cta {
    padding-top: 500px;
  }
  .cta-desktop__card-title {
    font-size: 32px;
  }
  .cta-desktop__btn-quiz {
    font-size: 20px;
    padding: 12px 32px;
  }
  .cta-desktop__btn-text {
    font-size: 20px;
  }
}

@media (max-width: 1280px) {
  #cta {
    padding-top: 400px;
  }
  .cta-desktop__card {
    padding: 32px;
  }
  .cta-desktop__card-title {
    font-size: 28px;
  }
  .cta-desktop__btn-quiz {
    font-size: 18px;
    padding: 10px 28px;
  }
  .cta-desktop__btn-link {
    padding: 24px;
  }
  .cta-desktop__btn-text {
    font-size: 18px;
  }
}

@media (max-width: 1024px) {
  #cta {
    padding-top: 300px;
  }
  .cta-desktop__card {
    padding: 24px;
    flex-direction: column;
    align-items: stretch;
  }
  .cta-desktop__card-title {
    font-size: 24px;
  }
  .cta-desktop__btn-quiz {
    font-size: 16px;
    padding: 10px 24px;
    width: 100%;
  }
  .cta-desktop__buttons {
    flex-direction: column;
  }
  .cta-desktop__btn-link {
    padding: 20px;
  }
  .cta-desktop__btn-text {
    font-size: 16px;
  }
}

/* ============================================
   FOOTER SECTION - Desktop (REFACTORED)
   Figma Reference: 1920px base
   ============================================ */

/* Footer Desktop */
#footer {
  background-color: #000000;
}

.footer-desktop__container {
  padding: 56px clamp(150px, 12.34vw, 237px);
  gap: 242px;
}

.footer-desktop__left {
  width: 250px;
  gap: 132px;
}

.footer-desktop__logo {
  width: 170px;
  height: 100px;
}

.footer-desktop__copyright {
  gap: 4px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.footer-desktop__copyright-text {
  color: #ffffff;
  font-size: 16px;
}

.footer-desktop__copyright-policy {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
}

.footer-desktop__center {
  gap: 30px;
  padding-top: 14px;
}

.footer-desktop__nav,
.footer-desktop__contacts {
  flex: 1;
  gap: 48px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.footer-desktop__nav-title,
.footer-desktop__contacts-title {
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
}

.footer-desktop__nav-links {
  gap: 16px;
}

.footer-desktop__nav-link {
  color: #ffffff;
  font-size: 18px;
  transition: color 0.3s;
}

.footer-desktop__nav-link:hover {
  color: #c39a6b;
}

.footer-desktop__contacts-info {
  gap: 8px;
}

.footer-desktop__contacts-link {
  color: #ffffff;
  font-size: 18px;
  transition: color 0.3s;
}

.footer-desktop__contacts-link:hover {
  color: #c39a6b;
}

.footer-desktop__address {
  gap: 8px;
}

.footer-desktop__address-title {
  color: #ffffff;
  font-size: 24px;
}

.footer-desktop__address-text {
  gap: 4px;
}

.footer-desktop__address-line {
  color: #ffffff;
  font-size: 18px;
}

.footer-desktop__address-hours {
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
}

.footer-desktop__scroll-top {
  position: absolute;
  right: clamp(150px, 12.34vw, 237px);
  top: 56px;
  width: 70px;
  height: 70px;
  background: rgba(195, 154, 107, 0.2);
  border-radius: 16px;
  border: 1px solid #c39a6b;
  transition: background-color 0.3s;
}

.footer-desktop__scroll-top:hover {
  background: rgba(195, 154, 107, 0.3);
}

/* Footer Mobile */
#footer-mobile {
  display: none;
  background-color: #000000;
  padding: 40px 16px 24px;
}

.footer-mobile__nav {
  gap: 24px;
  margin-bottom: 40px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.footer-mobile__nav-title {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
}

.footer-mobile__nav-links {
  gap: 12px;
}

.footer-mobile__nav-link {
  color: #ffffff;
  font-size: 14px;
}

.footer-mobile__contacts {
  gap: 24px;
  margin-bottom: 40px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

.footer-mobile__contacts-title {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
}

.footer-mobile__contacts-links {
  gap: 12px;
}

.footer-mobile__contacts-link {
  color: #ffffff;
  font-size: 14px;
}

.footer-mobile__address {
  gap: 4px;
  margin-bottom: 40px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.footer-mobile__address-title {
  color: #ffffff;
  font-size: 18px;
}

.footer-mobile__address-text {
  color: #ffffff;
  font-size: 14px;
}

.footer-mobile__address-hours {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.footer-mobile__bottom {
  gap: 24px;
}

.footer-mobile__logo {
  width: 83px;
  height: 50px;
}

.footer-mobile__copyright {
  gap: 4px;
  font-family: 'Rising Sun', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  height: 32px;
}

.footer-mobile__copyright-text {
  color: #ffffff;
  font-size: 12px;
}

.footer-mobile__copyright-policy {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.footer-mobile__scroll-top {
  position: absolute;
  right: 16px;
  top: -20px;
  width: 40px;
  height: 40px;
}

/* Footer Responsive */
/* Fold (600-900px) показывает desktop версию */
@media (max-width: 599px) {
  #footer {
    display: none !important;
  }
  #footer-mobile {
    display: block !important;
  }
}

@media (max-width: 1440px) {
  .footer-desktop__container {
    gap: 150px;
  }
  .footer-desktop__left {
    gap: 80px;
  }
  .footer-desktop__nav-title,
  .footer-desktop__contacts-title,
  .footer-desktop__address-title {
    font-size: 20px;
  }
  .footer-desktop__nav-link,
  .footer-desktop__contacts-link,
  .footer-desktop__address-line,
  .footer-desktop__address-hours {
    font-size: 16px;
  }
}

@media (max-width: 1280px) {
  .footer-desktop__container {
    padding: 48px clamp(80px, 8vw, 150px);
    gap: 100px;
  }
  .footer-desktop__left {
    width: 200px;
    gap: 60px;
  }
  .footer-desktop__logo {
    width: 140px;
    height: 82px;
  }
  .footer-desktop__scroll-top {
    width: 60px;
    height: 60px;
    right: clamp(80px, 8vw, 150px);
    top: 48px;
  }
}

@media (max-width: 1024px) {
  .footer-desktop__container {
    padding: 40px clamp(40px, 5vw, 80px);
    gap: 60px;
    flex-wrap: wrap;
  }
  .footer-desktop__left {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }
  .footer-desktop__center {
    width: 100%;
    padding-top: 0;
  }
  .footer-desktop__nav,
  .footer-desktop__contacts {
    gap: 24px;
  }
  .footer-desktop__nav-title,
  .footer-desktop__contacts-title,
  .footer-desktop__address-title {
    font-size: 18px;
  }
  .footer-desktop__scroll-top {
    position: relative;
    right: auto;
    top: auto;
    width: 50px;
    height: 50px;
  }
}

/* ============================================
   FAQ/CTA/FOOTER - Foldable Devices (600-900px)
   СТРАТЕГИЯ: Показываем DESKTOP версии с адаптацией
   ============================================ */

/* Все Foldable устройства (600-900px) показывают DESKTOP */
/* Правила уже определены в @media (min-width: 600px) and (max-width: 932px) выше */
/* Этот блок был удалён т.к. противоречил новой стратегии */


/* ============================================
   TECHNOLOGIES MODAL (Fold devices 600-900px)
   LUXURY VERTICAL SLIDER with GSAP morphing
   ============================================ */

/* Clickable indicator on tech image for Fold devices */
@media (min-width: 600px) and (max-width: 932px) {
  #tech-image-desktop {
    cursor: pointer;
    position: relative;
  }
  
  #tech-image-desktop::after {
    content: 'Нажмите для подробностей';
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(195, 154, 107, 0.95);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0.9;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 10;
  }
  
  #tech-image-desktop:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
    background: #c39a6b;
  }
}

/* Modal Wrapper */
.tech-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Semi-transparent backdrop */
.tech-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Container - compact luxury */
.tech-modal-container {
  position: relative;
  width: 95%;
  max-width: 720px;
  max-height: 88vh;
  background: #ffffff;
  border-radius: 14px;
  padding: 12px 8px 10px;
  overflow: hidden;
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.35),
    0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Close button - minimal */
#tech-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #888;
  transition: all 0.3s ease;
  z-index: 10;
  padding: 0;
}

#tech-modal-close:hover {
  color: #c39a6b;
  transform: rotate(90deg);
}

/* ===== SLIDER LAYOUT ===== */
.tech-modal-slider {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 8px;
}

/* Vertical Navigation - Left & Right */
.tech-modal-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 4px 0;
  flex-shrink: 0;
}

.tech-modal-nav--left {
  padding-right: 6px;
}

.tech-modal-nav--right {
  padding-left: 6px;
}

/* Navigation Items - Vertical Text */
.tech-modal-nav-item {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transition: all 0.35s ease;
  position: relative;
}

.tech-modal-nav--left .tech-modal-nav-item {
  transform: rotate(180deg);
}

.tech-modal-nav-text {
  font-family: 'Rising Sun', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #aaa;
  transition: all 0.35s ease;
  position: relative;
  white-space: nowrap;
}

/* Luxury underline effect */
.tech-modal-nav-text::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #c39a6b, #d4af7a);
  transform: translateX(-50%);
  transition: width 0.35s ease;
}

.tech-modal-nav-item:hover .tech-modal-nav-text {
  color: #c39a6b;
}

.tech-modal-nav-item:hover .tech-modal-nav-text::after {
  width: 100%;
}

/* Active nav item - gold text with glow */
.tech-modal-nav-item.active .tech-modal-nav-text {
  color: #c39a6b;
  text-shadow: 0 0 15px rgba(195, 154, 107, 0.4);
}

.tech-modal-nav-item.active .tech-modal-nav-text::after {
  width: 100%;
}

/* ===== CENTER IMAGE ===== */
.tech-modal-image-wrapper {
  flex: 1;
  min-height: 240px;
  max-height: 340px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

#tech-modal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, opacity 0.4s ease;
}

.tech-modal-image-wrapper:hover #tech-modal-image {
  transform: scale(1.03);
}

/* Label on image - glass morphism style with gold text (like hero cards) */
.tech-modal-image-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 10px 18px;
  border-radius: 16px 16px 0 16px;
  font-family: 'Rising Sun', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #C39A6B;
  letter-spacing: 0.03em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(195, 154, 107, 0.25);
}

/* ===== DESCRIPTION ===== */
#tech-modal-description {
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

#tech-modal-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: #444;
  margin: 0 0 8px 0;
}

#tech-modal-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

#tech-modal-features li {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #666;
  padding-left: 12px;
  position: relative;
  line-height: 1.35;
}

#tech-modal-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 5px;
  height: 5px;
  background: linear-gradient(135deg, #c39a6b, #d4af7a);
  border-radius: 50%;
}

/* ===== RESPONSIVE ===== */
@media (max-height: 650px) {
  .tech-modal-image-wrapper {
    max-height: 200px;
    min-height: 160px;
  }
  
  #tech-modal-description {
    padding: 10px 12px;
  }
  
  #tech-modal-text {
    font-size: 12px;
    margin-bottom: 8px;
  }
}

@media (max-width: 680px) {
  .tech-modal-nav-text {
    font-size: 11px;
  }
  
  .tech-modal-nav-item {
    padding: 10px 4px;
  }
}