/* ИСХОДНИК 70==================================================
   Змінні та глобальні налаштування
================================================== */
:root {
    --bg-dark: #1E2428;
    --bg-card: rgba(18, 26, 36, 0.7);
    --red-accent: #c41515;
    --red-glow: #e62424;
    --red-gradient: linear-gradient(135deg, #c41515 0%, #750808 100%);
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.1);
  }
  
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 85px; /* Ідеальна точка зупинки для хедера */
  }
  
  body {
    background-color: #1E2428;
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    overflow-x: hidden;
  }
  
  .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .container-fluid {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  
  /* ==================================================
     Header та Навігація
  ================================================== */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
  }
  
  header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, rgba(32, 160, 185, 0.28) 0%, rgba(5, 110, 160, 0.24) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: clamp(6px, 0.6vw, 10px) 0;
  }
  
  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0 clamp(20px, 3.5vw, 55px);
  }
  
  .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  
  .logo-img {
    height: clamp(42px, 3vw, 56px);
    width: auto;
    object-fit: contain;
    display: block;
  }
  
  nav ul {
    display: flex;
    list-style: none;
    gap: clamp(16px, 1.5vw, 28px);
    align-items: center;
  }
  
  nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: clamp(0.9rem, 1vw, 1.1rem);
    font-weight: 700;
    transition: opacity 0.2s ease;
    white-space: nowrap;
  }
  
  nav a:hover {
    opacity: 0.8;
  }
  
  .btn-header {
    background: radial-gradient(circle at 50% 30%, #e61919 0%, #b30b0b 70%, #750000 100%);
    color: #ffffff !important;
    padding: clamp(7px, 0.6vw, 10px) clamp(20px, 1.6vw, 30px);
    border-radius: 24px;
    font-weight: 700;
    font-size: clamp(0.9rem, 0.95vw, 1.1rem);
    box-shadow: 0 0 14px rgba(230, 25, 25, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .btn-header:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(230, 25, 25, 0.7);
  }
  
  /* ==================================================
     Єдиний фоновий контейнер (Hero + Attraction + Quest)
  ================================================== */
  .top-sections-wrapper {
    position: relative;
    width: 100%;
    background-color: #0b1419;
    background-image: 
      linear-gradient(
        to bottom, 
        rgba(11, 20, 25, 0.2) 0%, 
        transparent 35%, 
        transparent 72%, 
        rgba(15, 52, 62, 0.7) 90%, 
        #0f343e 100% /* М'яко переводить темну воду в точний тон наступної секції */
      ),
      url('img/bg_forest.jpg');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  /* ==================================================
     1. Головний екран (Hero) — Збільшений адаптивний будинок
  ================================================== */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: transparent;
    padding: 40px clamp(24px, 4vw, 80px) 60px;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
  }
  
  .hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    /* Зроблено трохи ширшим (діапазон 64vw - 80vw замість 60vw - 76vw) */
    width: clamp(64vw, 72vw, 80vw);
    height: 100%;
    background-image: url('img/house_hero.jpg');
    /* Піднято вище на 25px: top -55px замість -30px */
    background-position: right 0 top -55px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    -webkit-mask-image: radial-gradient(
      ellipse 95% 95% at 85% 42%,
      rgba(0, 0, 0, 1) 48%,
      rgba(0, 0, 0, 0.75) 68%,
      transparent 96%
    );
    mask-image: radial-gradient(
      ellipse 95% 95% at 85% 42%,
      rgba(0, 0, 0, 1) 48%,
      rgba(0, 0, 0, 0.75) 68%,
      transparent 96%
    );
    z-index: 1;
    pointer-events: none;
  }
  
  .hero-content {
    position: relative;
    z-index: 2;
    /* Дозволяємо блоку розширюватись на 2K/4K моніторах */
    max-width: clamp(480px, 42vw, 1150px);
    margin-left: clamp(24px, 7vw, 240px);
    text-align: left;
  }
  
  /* Заголовок: 55px на 1920px -> 74px на 2560px */
  .hero-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2rem, 2.9vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.12;
    color: #ffffff;
    margin-bottom: clamp(14px, 1.4vw, 36px);
  }
  
  .hero-subtitles {
    list-style: disc;
    padding-left: clamp(20px, 1.6vw, 36px);
    margin-bottom: clamp(16px, 1.8vw, 42px);
  }
  
  /* Підзаголовки: ~27px на 1920px -> ~36px на 2560px */
  .hero-subtitles li {
    color: #ffffff;
    line-height: 1.35;
    font-size: clamp(1.1rem, 1.4vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.3px;
  }
  
  .hero-desc-block {
    margin-bottom: clamp(20px, 2.2vw, 52px);
  }
  
  /* Опис: ~20px на 1920px -> ~27px на 2560px */
  .hero-desc-block p {
    font-size: clamp(0.95rem, 1.05vw, 1.9rem);
    color: #cbd5e1;
    margin-bottom: 12px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.2px;
  }
  
  /* Кнопка: ~30px на 1920px -> ~41px на 2560px */
  .hero-cta-btn {
    display: inline-block;
    background: radial-gradient(circle at 50% 30%, #f01414 0%, #b80505 60%, #700000 100%);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    padding: clamp(12px, 1.1vw, 28px) clamp(32px, 3.2vw, 84px);
    font-size: clamp(1.15rem, 1.6vw, 2.9rem);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.3px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(220, 20, 20, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .hero-cta-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 35px rgba(240, 20, 20, 0.7);
  }
  
  .hero-cta-btn:active {
    transform: translateY(1px);
  }
  
  /* ==================================================
     Заголовки-плашки
  ================================================== */
  .section-title-badge-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: clamp(16px, 1.6vw, 28px);
    z-index: 5;
  }
  
  .section-title-badge {
    background: rgba(45, 30, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: clamp(6px, 0.6vw, 12px) clamp(22px, 2.5vw, 54px);
    border-radius: 8px;
    color: #ffffff;
    font-size: clamp(1.25rem, 1.7vw, 2.3rem);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.3px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
  }
  
  /* ==================================================
     2. Секція Атракціон
  ================================================== */
  .attraction-section {
    position: relative;
    width: 100%;
    padding: 50px 0 50px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }
  
  .attraction-full-stage {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin-top: -60px;
  }
  
  .attraction-left-flush {
    flex: 0 0 45%;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: -100px;
  }
  
  .clown-img-flush {
    width: 100%;
    max-width: 40vw;
    height: auto;
    display: block;
  }
  
  .attraction-right-card-wrap {
    flex: 0 0 55%;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    padding-right: 8vw;
    padding-left: 2vw;
    margin: 0;
    margin-top: 45px;
  }
  
  .attraction-glass-card {
    width: 100%;
    /* Знято обмеження 980px — на 2560px ширина розширюється до ~1280px */
    max-width: clamp(620px, 50vw, 1320px);
    background: linear-gradient(
      90deg, 
      rgba(14, 44, 56, 0.62) 0%, 
      rgba(16, 32, 42, 0.58) 35%, 
      rgba(48, 20, 28, 0.52) 65%, 
      rgba(72, 16, 24, 0.58) 100%
    );
    background-clip: padding-box !important;
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    border-radius: 24px;
    padding: clamp(26px, 2.6vw, 64px) clamp(28px, 3.2vw, 76px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    border-right: 1px solid rgba(180, 30, 30, 0.35);
    box-shadow: 
      0 25px 50px rgba(0, 0, 0, 0.55), 
      inset 0 1px 1px rgba(255, 255, 255, 0.2);
  }
  
  /* Заголовок всередині картки */
  .glass-main-heading {
    font-size: clamp(1.25rem, 1.6vw, 2.6rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: clamp(14px, 1.2vw, 26px);
    line-height: 1.3;
    letter-spacing: -0.4px;
  }
  
  .glass-subheading {
    font-size: clamp(1.15rem, 1.45vw, 2.3rem);
    font-weight: 600;
    letter-spacing: -0.3px;
    color: #ffffff;
    margin-bottom: clamp(12px, 1.1vw, 22px);
  }
  
  .glass-bullets {
    list-style: disc;
    padding-left: clamp(24px, 1.6vw, 36px);
    margin-bottom: clamp(16px, 1.4vw, 32px);
  }
  
  .glass-bullets li {
    font-size: clamp(0.95rem, 1.15vw, 1.85rem);
    color: #f1f5f9;
    margin-bottom: clamp(6px, 0.5vw, 12px);
    font-weight: 500;
    line-height: 1.4;
  }
  
  .glass-text-block {
    margin-bottom: clamp(18px, 1.6vw, 36px);
  }
  
  .glass-text-block p {
    font-size: clamp(1.05rem, 1.25vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.3px;
    color: #ffffff;
    line-height: 1.45;
  }
  
  .glass-cta-btn {
    display: inline-block;
    background: radial-gradient(circle at 50% 30%, #e61919 0%, #aa0909 70%, #660000 100%);
    color: #ffffff;
    text-decoration: none;
    padding: clamp(12px, 1vw, 22px) clamp(36px, 2.5vw, 64px);
    border-radius: 40px;
    font-size: clamp(1.1rem, 1.2vw, 1.9rem);
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(220, 20, 20, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .glass-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 30px rgba(240, 25, 25, 0.6);
  }
  
  /* ==================================================
     3. Секція Квест
  ================================================== */
  .quest-section {
    position: relative;
    width: 100%;
    padding: 45px 0 30px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }
  
  .quest-section .section-title-badge-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 24px;
    z-index: 5;
  }
  
  .quest-full-stage {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin-top: 0;
  }
  
  .quest-left-card-wrap {
    flex: 0 0 54%;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-start;
    padding-left: 8vw;
    padding-right: 2vw;
    margin: 0;
    margin-top: -45px;
  }
  
  .quest-glass-card {
    width: 100%;
    max-width: clamp(620px, 50vw, 1320px);
    background: linear-gradient(
      90deg, 
      rgba(72, 16, 24, 0.58) 0%, 
      rgba(48, 20, 28, 0.52) 35%, 
      rgba(16, 32, 42, 0.58) 65%, 
      rgba(14, 44, 56, 0.62) 100%
    );
    background-clip: padding-box !important;
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    border-radius: 24px;
    padding: clamp(26px, 2.6vw, 64px) clamp(28px, 3.2vw, 76px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    border-left: 1px solid rgba(180, 30, 30, 0.35);
    box-shadow: 
      0 25px 50px rgba(0, 0, 0, 0.55), 
      inset 0 1px 1px rgba(255, 255, 255, 0.2);
  }
  
  .quest-desc-text {
    font-size: clamp(0.92rem, 1.1vw, 1.75rem);
    color: #f1f5f9;
    line-height: 1.4;
    margin-bottom: clamp(12px, 1.1vw, 24px);
    font-weight: 500;
  }
  
  .quest-warning-block {
    font-size: clamp(1rem, 1.2vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.3px;
    color: #ffffff;
    line-height: 1.35;
    margin-bottom: clamp(12px, 1.1vw, 24px);
  }
  
  .quest-details-text {
    font-size: clamp(0.92rem, 1.1vw, 1.75rem);
    color: #e2e8f0;
    line-height: 1.4;
    margin-bottom: clamp(14px, 1.3vw, 28px);
    font-weight: 500;
  }
  
  .quest-team-title {
    font-size: clamp(1.1rem, 1.35vw, 2.15rem);
    font-weight: 600;
    letter-spacing: -0.3px;
    color: #ffffff;
    margin-bottom: clamp(18px, 1.6vw, 36px);
  }
  
  .quest-cta-btn {
    display: inline-block;
    background: radial-gradient(circle at 50% 30%, #e61919 0%, #aa0909 70%, #660000 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: clamp(12px, 1vw, 22px) clamp(34px, 2.4vw, 60px);
    border-radius: 40px;
    font-size: clamp(1.1rem, 1.2vw, 1.9rem);
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(220, 20, 20, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
  }
  
  .quest-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 30px rgba(240, 25, 25, 0.6);
  }
  
  .quest-right-flush {
    flex: 0 0 46%;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  .witch-img-flush {
    width: 100%;
    max-width: 44vw;
    height: auto;
    display: block;
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  }
  
  /* ==================================================
     4. Секція: Наші переваги та Що обрати (Безшовний градієнт)
  ================================================== */
  .advantages-section {
    position: relative;
    width: 100%;
    margin-top: -2px;
    background: linear-gradient(
      180deg, 
      #0f343e 0%, 
      #15414d 40%, 
      #24555c 100% /* Точний колір верхньої кромки картинки bg2.jpg */
    ) !important;
    overflow: hidden;
    z-index: 2;
  }
  
  .advantages-section .container {
    max-width: 100% !important;
    width: 94vw;
    margin: 0 auto;
    padding: 0;
  }
  
  .section-clean-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.2rem, 3.8vw, 4rem);
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin-bottom: clamp(35px, 4vw, 60px);
    letter-spacing: -1px;
    background: none;
    border: none;
    padding: 0;
  }
  
  .adv-minimal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5vw;
    margin-bottom: 4vw;
    width: 100%;
  }
  
  .adv-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  
  .adv-circle-icon {
    width: 5.5vw;
    height: 5.5vw;
    min-width: 60px;
    min-height: 60px;
    max-width: 110px;
    max-height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #ff4b1f 0%, #e61919 65%, #a80000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2vw;
    box-shadow: 0 0.8vw 2vw rgba(230, 25, 25, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
  }
  
  .adv-circle-icon:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 30px rgba(255, 50, 50, 0.65);
  }
  
  .adv-circle-icon .adv-custom-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: screen; 
    transform: scale(2.6); 
    display: block;
    pointer-events: none;
  }
  
  .adv-col-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 1.25vw, 1.45rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.8vw;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: -0.3px;
  }
  
  .adv-col-text {
    font-size: clamp(0.85rem, 0.95vw, 1.05rem);
    color: #cbd5e1;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 32ch;
    margin: 0 auto;
  }
  
  /* ==================================================
     Блок: Не знаєш, що обрати?
  ================================================== */
  .choice-block {
    position: relative;
    z-index: 3;
    text-align: center;
    width: 90vw;
    max-width: clamp(820px, 68vw, 1500px) !important;
    margin: 0 auto clamp(40px, 4.5vw, 85px) !important;
    padding: clamp(20px, 2.5vw, 40px) 20px 0 !important;
    padding: 0 20px;
  }
  
  .choice-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -1px;
    font-size: clamp(2.4rem, 3.4vw, 4.8rem);
    color: #ffffff;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
    margin-top: 0;
    margin-bottom: clamp(18px, 1.8vw, 32px);
  }
  
  .choice-glass-card {
    width: 100%;
    background: rgba(102, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(220, 50, 60, 0.35);
    border-top: 1.5px solid rgba(255, 140, 150, 0.45);
    border-radius: 20px;
    padding: clamp(20px, 2.5vw, 25px) clamp(1px, 3.5vw, 7px);
    box-shadow: 
      0 20px 45px rgba(0, 0, 0, 0.5), 
      0 0 30px rgba(102, 0, 0, 0.3),
      inset 0 1px 1px rgba(255, 255, 255, 0.2);
  }
  
  .choice-glass-card p {
    font-size: clamp(1.2rem, 1.5vw, 2.2rem);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 8px;
  }
  
  .choice-glass-card p:last-child {
    margin-bottom: 0;
  }
  
  .choice-glass-card strong {
    color: #ffffff;
    font-weight: 800;
  }
  
 /* ==================================================
   5. Секція Вартість — Структура за макетом
================================================== */
.pricing {
    padding-top: clamp(25px, 2.5vw, 50px);
    padding-bottom: clamp(60px, 6vw, 110px);
    background-color: #0a1114;
    position: relative;
    width: 100%;
  }
  
  .pricing .container {
    max-width: clamp(1140px, 92vw, 1750px) !important;
    width: 92vw;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .pricing-tabs-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(30px, 4vw, 70px) !important;
    width: 100% !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .pricing-tab-btn,
a.pricing-tab-btn {
  padding: clamp(20px, 2.2vw, 42px) 0;
  border: none;
  background: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  font-size: clamp(1.5rem, 2.1vw, 2.85rem);
  font-weight: 900;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 2;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-align: left;
  transition: color 0.3s ease, transform 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

/* Опускаємо верхню крайню лінію впритул до першого таба ("КВЕСТ") */
  .pricing-tab-btn:last-child {
    border-bottom: none;
  }
  

  
  
  
  
  /* Контентна частина */
  .pricing-tabs-content {
    flex: 1 !important;
  }
  

  
  .pricing-note {
    margin-top: clamp(8px, 1vw, 16px);
    color: #ffffff;
  }
  
  @keyframes fadeInPricing {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  /* Адаптивність */
  @media (max-width: 992px) {
    .pricing-tabs-wrapper {
      flex-direction: column;
      border: none;
      gap: 35px;
    }
  
    .pricing-tabs-menu {
      width: 100%;
      border-top: 1.5px solid rgba(255, 255, 255, 0.4);
      border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
    }
  
    .pricing-tab-btn {
      font-size: 2.4rem;
      justify-content: center;
    }
  
    .pricing-pane {
      flex-direction: column;
      text-align: center;
    }
  
    .pricing-image-box {
      flex: 0 0 100%;
      max-width: 520px;
    }
  
    .pricing-info-box {
      flex: 0 0 100%;
    }
  }

  


  /* ==================================================
   Єдиний фоновий контейнер (Вибір + Вартість + Акції + FAQ)
================================================== */

  
  /* Робимо самі секції всередині прозорими */
  .pricing,
  .promotions-section,
  .faq {
    background-color: transparent;
    border-top: none;
  }
  
  /* Відступи для блоку "Не знаєш, що обрати?" */
  .choice-block {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto clamp(50px, 6vw, 90px);
    padding: 0 20px;
  }

  /* ==================================================
   Секція Акції — Повна відповідність макету
================================================== */
  .promotions-section {
    padding-top: clamp(25px, 2.5vw, 50px);
    padding-bottom: clamp(60px, 6vw, 110px);
    background-color: #0a1114;
    border-top: 1px solid var(--border-color);
    position: relative;
    width: 100%;
  }

  
  .promotions-section .container {
    max-width: clamp(1140px, 92vw, 1750px);
    width: 92vw;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .promo-tabs-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(30px, 4vw, 70px);
    width: 100%;
    border-top: 1.5px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  }
  
  /* Ліве меню з великими кнопками */
  .promo-tabs-menu {
    flex: 0 0 clamp(280px, 32vw, 520px);
    display: flex;
    flex-direction: column;
  }
  /* Контентна частина */
  .promo-tabs-content {
    flex: 1;
  }
  
  .promo-pane {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 3.5vw, 60px);
    animation: fadeInPromo 0.35s ease-out;
  }
  
  .promo-pane.active {
    display: flex;
  }
  
  /* Картинка */
  .pricing-image-box,
  .promo-image-box {
    flex: 0 0 55%;
    max-width: 55%;
  }

  .pricing-image-box img,
  .promo-image-box img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85);
    display: block;
  }
  
  /* Текстовий блок праворуч */
  .pricing-info-box,
  .promo-info-box {
    flex: 0 0 40%;
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.45rem);
    line-height: 1.65;
    color: #ffffff;
    font-weight: 500;
  }
  
  .pricing-info-box p,
  .promo-info-box p {
    margin-bottom: clamp(6px, 0.7vw, 12px);
  }
  
  .pricing-info-box strong,
  .promo-info-box strong {
    font-weight: 700;
    color: #ffffff;
  }
  
  @keyframes fadeInPromo {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  /* Адаптивність */
  @media (max-width: 992px) {
    .promo-tabs-wrapper {
      flex-direction: column;
      border: none;
      gap: 35px;
    }
  
    .promo-tabs-menu {
      width: 100%;
      border-top: 1.5px solid rgba(255, 255, 255, 0.4);
      border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
    }
  
    .promo-tab-btn {
      font-size: 2.4rem;
      justify-content: center;
    }
  
    .promo-pane {
      flex-direction: column;
      text-align: center;
    }
  
    .promo-image-box {
      flex: 0 0 100%;
      max-width: 520px;
    }
  
    .promo-info-box {
      flex: 0 0 100%;
    }
  }

/* ==================================================
   5. Секція Вартість та Секція Акції (Розширений адаптив)
================================================== */
.pricing,
.promotions-section {
  padding: clamp(50px, 5vw, 110px) 0;
  background-color: transparent;
  border: none;
  position: relative;
  width: 100%;
  scroll-margin-top: 85px;
}

.promotions-section {
  border-top: 1px solid var(--border-color);
}

/* Робимо контейнер ширшим, щоб заповнити екран */
.pricing .container,
.promotions-section .container {
    max-width: clamp(1200px, 88vw, 2100px);
    width: 88vw;
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 60px);
}

/* Заголовки секцій */
.section-clean-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.4rem, 4vw, 4.8rem);
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    letter-spacing: -1px;
    /* Піднімає тільки сам заголовок вище */
    margin-top: clamp(-20px, -2vw, -45px);
    /* Компенсує зсув, залишаючи кнопки й картинки на їхніх початкових місцях */
    margin-bottom: clamp(55px, 6vw, 100px);
  }

/* Обертка для табів */
.tabs-wrapper,
.promo-tabs-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 5vw, 90px);
  width: 100%;
}

.pricing-tabs-wrapper,
.promo-tabs-wrapper {
  display: flex;
  align-items: center !important;
  padding: 0 !important;
  justify-content: space-between;
  gap: clamp(40px, 5vw, 100px);
  width: 100%;
  border-top: 1.5px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
}

.pricing-tabs-menu,
.promo-tabs-menu {
  flex: 0 0 clamp(320px, 38vw, 680px);
  display: flex;
  flex-direction: column;
}



.pricing-tab-btn:last-child,
.promo-tab-btn:last-child {
  border-bottom: none;
}

.pricing-tab-btn::before,
.promo-tab-btn::before {
  content: '→';
  color: #e61919;
  font-size: clamp(1.6rem, 2.2vw, 3.2rem);
  margin-right: clamp(10px, 1.2vw, 24px);
  font-family: Arial, sans-serif;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
}

.pricing-tab-btn.active::before,
.promo-tab-btn.active::before {
  opacity: 1;
  transform: translateX(0);
  width: clamp(28px, 2.6vw, 55px);
}

.pricing-tabs-content,
.promo-tabs-content {
  flex: 1;
}

.pricing-pane,
.promo-pane {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 3.5vw, 70px);
  animation: fadeInPricing 0.35s ease-out;
}

.pricing-pane.active,
.promo-pane.active {
  display: flex;
}

.pricing-image-box,
.promo-image-box {
    flex: 0 0 clamp(240px, 32vw, 440px) !important;
    max-width: clamp(240px, 32vw, 440px) !important;
}

.pricing-image-box img,
.promo-image-box img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85);
  display: block;
}

.pricing-info-box,
.promo-info-box {
  flex: 0 0 42%;
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.1rem, 1.35vw, 1.85rem);
  line-height: 1.6;
  color: #ffffff;
  font-weight: 400;
}

.pricing-info-box p,
.promo-info-box p {
  margin-bottom: clamp(8px, 0.9vw, 16px);
}

.pricing-info-box strong,
.promo-info-box strong {
  font-weight: 700;
  color: #ffffff;
}

.pricing-note {
  margin-top: clamp(10px, 1.2vw, 20px);
  color: #cbd5e1;
}

/* Ліве меню з кнопками (займає 42-45% ширини) */
.tabs-menu,
.pricing-tabs-menu,
.promo-tabs-menu {
  flex: 0 0 clamp(360px, 42vw, 700px);
  display: flex;
  flex-direction: column;
}

/* Кнопки перемикання */
.tab-btn,
.promo-tab-btn {
  padding: clamp(20px, 2.2vw, 42px) 0;
  border: none;
  background: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  font-size: clamp(1.5rem, 2.1vw, 2.85rem);
  font-weight: 900;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.15;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-align: left;
  transition: color 0.3s ease, transform 0.2s ease;
}

.pricing-tab-btn,
.promo-tab-btn {
    font-size: clamp(1.5rem, 2.1vw, 2.85rem);
    white-space: nowrap;
    letter-spacing: 0.5px;
  }

.tab-btn:first-child,
.promo-tab-btn:first-child {
  border-top: 1.5px solid rgba(255, 255, 255, 0.35);
}

.tab-btn:hover,
.promo-tab-btn:hover {
  color: #f1f5f9;
}

/* Червона стрілочка біля активної кнопки */
.tab-btn::before,
.promo-tab-btn::before {
  content: '→';
  color: var(--red-glow);
  font-size: clamp(1.8rem, 2.8vw, 3.8rem);
  margin-right: clamp(12px, 1.5vw, 24px);
  font-family: Arial, sans-serif;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
}

.tab-btn.active::before,
.promo-tab-btn.active::before {
  opacity: 1;
  transform: translateX(0);
  width: clamp(35px, 3.2vw, 65px);
}

/* Права частина з контентом */
.tabs-content-area,
.promo-tabs-content-area {
  flex: 1;
  width: 100%;
}

.tab-pane,
.pricing-pane,
.promo-pane {
  display: none;
  align-items: center;
  gap: clamp(28px, 3.5vw, 60px);
  animation: fadeInTabScale 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-pane.active,
.promo-pane.active {
  display: flex;
}

/* Картинка всередині табу */
.tab-image,
.promo-image {
  flex: 1 1 50%;
}

.tab-image img,
.promo-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.85);
  display: block;
}

/* Текстовий опис біля картинки */
.tab-info,
.promo-info {
  flex: 1 1 50%;
  font-size: clamp(1.05rem, 1.35vw, 1.95rem);
  line-height: 1.6;
  color: #e2e8f0;
}

.tab-info p,
.promo-info p {
  margin-bottom: clamp(8px, 1vw, 18px);
}

.tab-info p:last-child,
.promo-info p:last-child {
  margin-bottom: 0;
}

.tab-info strong,
.promo-info strong {
  color: #ffffff;
  font-size: clamp(1.2rem, 1.6vw, 2.3rem);
  font-weight: 700;
  display: inline-block;
  margin-bottom: 4px;
}

a.tab-btn.promo-nav-link {
  text-decoration: none;
  display: flex;
  align-items: center;
}

@keyframes fadeInTabScale {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==================================================
   Адаптивність (Планшети та Мобільні)
================================================== */
@media (max-width: 992px) {
  .tabs-wrapper,
  .promo-tabs-wrapper {
    flex-direction: column;
    gap: 40px;
  }

  .tabs-menu,
  .promo-tabs-menu {
    width: 100%;
    flex: 0 0 100%;
  }

  .tab-btn,
  .promo-tab-btn {
    font-size: 2.2rem;
    justify-content: center;
    text-align: center;
  }

  .tab-pane,
  .promo-pane {
    flex-direction: column;
    text-align: center;
  }

  .tab-image,
  .promo-image {
    max-width: 550px;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .tab-btn,
  .promo-tab-btn {
    font-size: 1.6rem;
    padding: 16px 0;
  }

  .tab-info,
  .promo-info {
    font-size: 0.95rem;
  }
}
  
  
/* ==================================================
   6. Акордеон FAQ
================================================== */
.faq {
    padding-top: clamp(40px, 4.5vw, 90px);
    padding-bottom: 0;
    margin-bottom: 0;
    background-color: transparent !important;
    scroll-margin-top: 85px;
  }

  .faq .container {
    max-width: clamp(1000px, 75vw, 1600px) !important;
    width: 75vw;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  /* Прибираємо розрив на стику між двома фонами */
  .faq-continued {
    padding-top: 12px;
    margin-top: 0;
  }
  
  .accordion {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Однаковий крок між усіма питаннями */
  }

.accordion {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1vw, 20px);
  }
  
  .accordion-item {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  .accordion-header {
    width: 100%;
    padding: clamp(16px, 1.4vw, 26px) clamp(20px, 1.8vw, 32px);
    text-align: left;
    background: none;
    border: none;
    color: #ffffff;
    font-size: clamp(1.15rem, 1.35vw, 1.95rem);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: inherit;
  }
  
  .accordion-header::after {
    content: '+';
    font-size: clamp(1.4rem, 1.7vw, 2.4rem);
    color: var(--red-glow);
  }
  
  .accordion-item.active .accordion-header::after {
    content: '−';
  }
  
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 clamp(20px, 1.8vw, 32px);
    color: #cbd5e1;
    font-size: clamp(1rem, 1.15vw, 1.6rem);
    line-height: 1.6;
  }
  
  /* .accordion-item.active .accordion-content {
    padding: 0 clamp(20px, 1.8vw, 32px) clamp(16px, 1.4vw, 26px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-image: linear-gradient(
    90deg, 
    rgba(230, 25, 25, 0.5) 0%, 
    rgba(255, 255, 255, 0.15) 50%, 
    transparent 100%
  ) 1;
  padding-top: clamp(14px, 1.3vw, 22px) !important;
  margin-top: 4px;
  } */

  /* .accordion-item.active .accordion-content {
    background: rgba(255, 255, 255, 1);
    border-radius: 0 0 12px 12px;
    padding: clamp(16px, 1.4vw, 24px) clamp(20px, 1.8vw, 32px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #111111 !important; 
  }
  
  .accordion-item.active .accordion-content p {
    color: #111111 !important; 
  } */

  
  .accordion-item.active .accordion-content {
    border-left: 2.5px solid var(--red-glow);
    margin-left: clamp(20px, 1.8vw, 32px);
    margin-top: 8px;
    margin-bottom: 12px;
    padding-left: 14px !important;
    padding-top: 4px !important;
  }
  
  .accordion-content p {
    margin-bottom: 8px;
  }
  
  .accordion-content p:last-child {
    margin-bottom: 0;
  }
  
  /* ==================================================
     7. Контакти
  ================================================== */
  .contacts {
    padding: 70px 0;
    text-align: center;
  }
  


  /* ==================================================
   Скляна плашка контактів з градієнтом B30A0E -> AA1016
================================================== */
/* ==================================================
   Скляна плашка контактів з твоїм градієнтом
================================================== */

.all-bottom-wrapper section.contacts .contact-card {
  width: 100% !important;
  max-width: clamp(750px, 58vw, 980px) !important;
  
  /* Твій градієнт */
  background: linear-gradient(
    90deg, 
    rgba(14, 44, 56, 0.62) 0%, 
    rgba(16, 32, 42, 0.58) 35%, 
    rgba(48, 20, 28, 0.52) 65%, 
    rgba(72, 16, 24, 0.58) 100%
  ) !important;
  
  /* Відсікає просочування градієнта під лінію рамки */
  background-clip: padding-box !important;
  
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-radius: 22px !important;
  
  /* Повне скидання кольорових рамок (залишаємо тільки єдине нейтральне скло) */
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  
  /* М'яка тінь без різких внутрішніх зрізів */
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65) !important;
  
  padding: clamp(24px, 2.8vw, 44px) clamp(30px, 4vw, 65px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: hidden !important;
}
  
  .contact-address {
    font-size: 1.1rem;
    margin-bottom: 20px;
  }
  
  .contact-address span {
    color: var(--text-muted);
    font-size: 0.9rem;
  }
  
  .contact-phone {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--red-glow);
  }
  
  .contact-hours {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 10px;
  }
  
  /* ==================================================
     Footer
  ================================================== */
  footer {
    border-top: 1px solid var(--border-color);
    padding: 20px 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
  }
  
  /* ==================================================
     Модальне вікно Бронювання
  ================================================== */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  .modal-window {
    position: relative;
    width: 90%;
    max-width: 580px;
    background: linear-gradient(
      180deg, 
      rgba(215, 222, 228, 0.72) 0%, 
      rgba(210, 160, 168, 0.65) 35%, 
      rgba(205, 105, 115, 0.75) 100%
    );
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-radius: 28px;
    padding: 44px 50px 48px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-top: 1.5px solid rgba(255, 255, 255, 0.6);
    box-shadow: 
      0 25px 50px rgba(0, 0, 0, 0.4), 
      inset 0 1px 2px rgba(255, 255, 255, 0.5);
    transform: scale(0.92);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .modal-overlay.active .modal-window {
    transform: scale(1);
  }
  
  .modal-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
  }
  
  .modal-close:hover {
    color: #ffffff;
    transform: scale(1.1);
  }
  
  .modal-title {
    text-align: center;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 28px;
    letter-spacing: 0.2px;
  }
  
  .form-group {
    margin-bottom: 20px;
    text-align: left;
  }
  
  .form-group label {
    display: block;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    margin-left: 12px;
  }
  
  .form-group input {
    width: 100%;
    height: 52px;
    background: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 0 20px;
    font-size: 1.15rem;
    font-family: 'Inter', sans-serif;
    color: #111;
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
  }
  
  .form-group input:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
  }
  
  .modal-btn-wrapper {
    margin-top: 36px;
    display: flex;
    justify-content: center;
  }
  
  .modal-submit-btn {
    background: rgba(140, 45, 55, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 50px;
    padding: 12px 18px;
    outline: none;
    cursor: pointer;
    box-shadow: 
      0 10px 25px rgba(0, 0, 0, 0.35), 
      inset 0 1px 2px rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: transparent;
  }
  
  .modal-submit-btn::before {
    content: 'Забронювати';
    display: block;
    background: radial-gradient(ellipse 90% 80% at 50% 30%, #ff0808 0%, #d60000 65%, #940000 100%);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 13px 44px;
    border-radius: 36px;
    box-shadow: 
      0 6px 18px rgba(0, 0, 0, 0.5), 
      inset 0 1px 2px rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    line-height: 1.2;
  }
  
  .modal-submit-btn:hover {
    transform: translateY(-2px);
    background: rgba(160, 50, 62, 0.55);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  }
  
  .modal-submit-btn:active {
    transform: translateY(1px);
  }
  
  @media (max-width: 600px) {
    .modal-submit-btn {
      padding: 8px 12px;
    }
    .modal-submit-btn::before {
      font-size: 1.25rem;
      padding: 10px 30px;
    }
  }




/* ==================================================
   Єдина суцільна фонова секція
================================================== */
.all-bottom-wrapper {
    position: relative;
    width: 100%;
    background-color: transparent !important;
    background-image: 
      linear-gradient(
        to bottom, 
        #24555c 0%,                  /* Збігається з низом попередньої секції на 100% */
        rgba(36, 85, 92, 0.8) 8%,    /* Плавно розчиняється в картинку */
        rgba(36, 85, 92, 0.3) 18%, 
        transparent 30%,            
        transparent 85%, 
        rgba(10, 17, 20, 0.85) 98%, 
        #0a1114 100%
      ),
      url('img/bg3_copy.png') !important;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% max(100%, 520vh);
    padding-top: clamp(25px, 3vw, 50px) !important;
    padding-bottom: 0 !important;
    margin-top: -3px; /* Перекриває можливий мікро-розрив у 1px */
    margin-bottom: 0 !important;
    border: none !important;
  }

  .all-bottom-wrapper {
    padding-top: 0 !important;
  }
  
  /* 2. Піднімаємо сам блок "Не знаєш, що обрати?" вище */
  .choice-block {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: clamp(800px, 66vw, 1400px) !important;
    margin: clamp(-25px, -2vw, -10px) auto clamp(35px, 4vw, 75px) !important; /* Негативний margin-top піднімає блок вгору */
    padding: 0 20px !important;
  }
  
  /* Прибираємо індивідуальні фони для внутрішніх секцій */
  .pricing,
  .promotions-section,
  .faq,
  .contacts,
  .final-cta {
    background-color: transparent;
    border: none;
  }
  
  /* FAQ — єдиний список без стиків */
  .faq {
    padding-top: clamp(30px, 3.5vw, 60px);
    padding-bottom: 0;
  }
  
  .accordion {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .choice-block {
    max-width: clamp(760px, 65vw, 1500px); /* Оптимальна ширина для розміщення тексту рівно у 2 рядки */
    margin: 0 auto clamp(35px, 4vw, 70px);
    padding: 0 20px;
  }

  .choice-block .choice-glass-card {
    background: linear-gradient(
      90deg, 
      rgba(170, 16, 22, 0.39) 0%, 
      rgba(179, 10, 14, 0.39) 100%
    );
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  }
  
  .choice-block .choice-glass-card p {
    color: #ffffff;
    font-size: clamp(1.2rem, 1.45vw, 2.1rem);
    font-weight: 500;
    line-height: 1.6;
  }
  
  .choice-block .choice-glass-card strong {
    color: #ffffff;
    font-weight: 800;
  }


/* ==================================================
   Секція: Контакти (точна копія макета)
================================================== */
.contacts {
    padding: clamp(30px, 3.5vw, 60px) 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent !important;
    border: none !important;
  }
  
  .contacts .container {
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
  }
  
  .contacts .section-clean-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 3.2vw, 4rem);
    color: #ffffff;
    margin-bottom: clamp(20px, 2.2vw, 36px);
    text-align: center;
  }
  
  /* Широка прямокутна плашка */

  /* ==================================================
   Повне знешкодження червоної лінії на картці контактів
================================================== */

  


/* 3. Якщо лінія йде від лівого краю екрана або сусідніх контейнерів */
.all-bottom-wrapper {
  border-left: none !important;
}
  
  /* Текст адреси рівно в 2 рядки */
  .contact-address {
    text-align: center;
    margin-bottom: clamp(20px, 2.5vw, 36px);
    width: 100%;
  }
  
  .address-main {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.05rem, 1.25vw, 1.55rem);
    color: #cbd5e1;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
  }
  
  .address-sub {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.95rem, 1.15vw, 1.4rem);
    color: #94a3b8;
    font-weight: 400;
    margin: 0;
  }
  
  /* Горизонтальний ряд із двома симетричними колонками */
  .contact-main-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(50px, 7vw, 110px);
    width: 100%;
  }
  
  /* Ліва колонка */
  .contact-location-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: 10px;
    overflow: visible;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  
  .contact-location-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
  }
  
  .location-pin-svg {
    width: clamp(70px, 5.8vw, 96px); /* Збільшений чіткий розмір */
    height: auto;
    fill: #ffffff;
    display: block;
    overflow: visible;
    flex-shrink: 0;
  }
  
  .contact-location-btn span {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.35rem);
    color: #cbd5e1;
    font-weight: 500;
    white-space: nowrap;
  }
  
  /* Права колонка */
  .contact-info-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .contact-phones {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .phone-link {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.15rem, 1.4vw, 1.8rem);
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    letter-spacing: 0.5px;
  }
  
  .phone-svg {
    width: clamp(18px, 1.2vw, 24px);
    height: clamp(18px, 1.2vw, 24px);
    fill: #94a3b8;
  }
  
  /* Соцмережі під номерами телефонів */
  .contact-socials {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    padding-left: 28px; /* Вирівнює іконки під цифрами номерів */
  }
  
  .social-circle-btn {
    width: clamp(32px, 2.2vw, 40px);
    height: clamp(32px, 2.2vw, 40px);
    border-radius: 50%;
    background: #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1a0406;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
  }
  
  .social-circle-btn:hover {
    transform: scale(1.08);
    background: #ffffff;
  }
  
  .social-svg {
    width: clamp(16px, 1.1vw, 20px);
    height: clamp(16px, 1.1vw, 20px);
  }



  /* ==================================================
   5. Секція Вартість та Секція Акції (Єдиний дизайн 1 в 1)
================================================== */
.pricing,
.promotions-section {
  padding: clamp(50px, 5vw, 110px) 0;
  background-color: transparent !important;
  border: none !important;
  position: relative;
  width: 100%;
  scroll-margin-top: 85px;
}

.pricing .container,
.promotions-section .container {
  max-width: clamp(1200px, 88vw, 2100px) !important;
  width: 88vw;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 60px);
}

.pricing-tabs-wrapper,
.promo-tabs-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(40px, 5vw, 100px) !important;
  width: 100% !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Меню табів ліворуч */
.pricing-tabs-menu,
.promo-tabs-menu {
  flex: 0 0 clamp(320px, 36vw, 650px) !important;
  display: flex !important;
  flex-direction: column !important;
}

.pricing-tab-btn,
.promo-tab-btn,
a.pricing-tab-btn,
a.promo-tab-btn {
  padding: clamp(18px, 2vw, 36px) 0 !important;
  border: none !important;
  background: transparent !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  font-size: clamp(1.4rem, 2vw, 2.85rem) !important;
  font-weight: 800 !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: -0.3px !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  outline: none !important;
  transition: color 0.25s ease !important;
}

.pricing-tab-btn:last-child,
.promo-tab-btn:last-child {
  border-bottom: none !important;
}

/* Червона стрілка для активного табу */
.pricing-tab-btn::before,
.promo-tab-btn::before {
  content: '→' !important;
  color: #e61919 !important;
  font-size: clamp(1.8rem, 2.4vw, 3.4rem) !important;
  margin-right: clamp(10px, 1.2vw, 22px) !important;
  font-family: Arial, sans-serif !important;
  opacity: 0 !important;
  transform: translateX(-20px) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: 0 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.pricing-tab-btn.active::before,
.promo-tab-btn.active::before {
  opacity: 1 !important;
  transform: translateX(0) !important;
  width: clamp(28px, 2.6vw, 55px) !important;
}

/* Контентна частина справа */
.pricing-tabs-content,
.promo-tabs-content {
  flex: 1 !important;
}

.pricing-pane,
.promo-pane {
  display: none;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(28px, 3.5vw, 70px) !important;
  animation: fadeInPricing 0.35s ease-out !important;
}

.pricing-image-box,
.promo-image-box,
.tab-image {
  margin-left: clamp(-27px, -4vw, -10px) !important; /* Чим більше мінус, тим сильніше зсув вліво */
}



.pricing-pane.active,
.promo-pane.active {
  display: flex !important;
}

/* Картинка */
.pricing-image-box,
.promo-image-box {
  flex: 0 0 54% !important;
  max-width: 54% !important;
}

.pricing-image-box img,
.promo-image-box img {
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85) !important;
  display: block !important;
}

/* Текстовий блок з описом */
.pricing-info-box,
.promo-info-box {
  flex: 0 0 42% !important;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(1.05rem, 1.25vw, 1.75rem) !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}

.pricing-info-box p,
.promo-info-box p {
  margin-bottom: clamp(8px, 0.8vw, 14px) !important;
}

.pricing-info-box strong,
.promo-info-box strong {
  font-weight: 800 !important;
  color: #ffffff !important;
}

.pricing-note {
  margin-top: clamp(10px, 1.1vw, 18px) !important;
  color: #ffffff !important;
}

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

/* Адаптивність для планшетів та мобільних */
@media (max-width: 992px) {
  .pricing-tabs-wrapper,
  .promo-tabs-wrapper {
    flex-direction: column !important;
    border: none !important;
    gap: 35px !important;
  }

  .pricing-tabs-menu,
  .promo-tabs-menu {
    width: 100% !important;
    flex: 0 0 100% !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  }

  .pricing-tab-btn,
  .promo-tab-btn {
    font-size: 2.2rem !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .pricing-pane,
  .promo-pane {
    flex-direction: column !important;
    text-align: center !important;
  }

  .pricing-image-box,
  .promo-image-box {
    flex: 0 0 100% !important;
    max-width: 520px !important;
  }

  .pricing-info-box,
  .promo-info-box {
    flex: 0 0 100% !important;
  }
}

/* ==================================================
   Секція: Готовий перевірити себе? (Точно за макетом)
================================================== */
.final-cta {
    padding: clamp(40px, 4.5vw, 85px) 0 clamp(60px, 6vw, 110px);
    background: transparent !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .final-cta .container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
  }
  
  .final-cta .section-clean-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 3.2vw, 4.2rem);
    color: #ffffff;
    margin-bottom: clamp(24px, 2.5vw, 42px);
    text-align: center;
  }
  
  /* Скляна картка з точним градієнтом та лівим вирівнюванням тексту */
  .final-glass-card {
    width: 100%;
    max-width: clamp(750px, 58vw, 980px);
    background: linear-gradient(
      90deg, 
      rgba(14, 44, 56, 0.62) 0%, 
      rgba(16, 32, 42, 0.58) 35%, 
      rgba(48, 20, 28, 0.52) 65%, 
      rgba(72, 16, 24, 0.58) 100%
    ) !important;
    background-clip: padding-box !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1.5px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65);
    padding: clamp(28px, 3.2vw, 50px) clamp(32px, 4vw, 64px);
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Базове вирівнювання контенту по лівому краю */
  }
  
  /* Тільки заголовок розташований по центру та збільшений */
  .final-card-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.8rem, 2.5vw, 3.2rem) !important;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: clamp(0.5px, 0.1vw, 2px); /* Розширює текст по горизонталі */
    line-height: 1.2;
    text-align: left !important; /* Починається точно там, де й інший текст */
    width: 100%;
    margin-bottom: clamp(18px, 1.8vw, 28px);
    white-space: normal;
  }
  
  /* Решта тексту залишається зліва */
  .final-lead-text {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.05rem, 1.25vw, 1.55rem);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: clamp(8px, 0.9vw, 14px);
    line-height: 1.3;
    text-align: left;
  }
  
  .final-main-text {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.2rem, 1.5vw, 1.95rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.35;
    letter-spacing: -0.3px;
    margin: 0;
    text-align: left;
  }
  
  /* Обгортка кнопки */
  .final-btn-wrap {
    margin-top: clamp(35px, 3.8vw, 60px);
    background: rgba(140, 45, 55, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 60px;
    padding: clamp(10px, 0.8vw, 16px) clamp(14px, 1.1vw, 22px);
    outline: none;
    cursor: pointer;
    box-shadow: 
      0 12px 30px rgba(0, 0, 0, 0.4), 
      inset 0 1px 2px rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .final-btn-wrap:hover {
    transform: translateY(-2px);
    background: rgba(160, 50, 62, 0.55);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.5);
  }
  
  .final-btn-wrap .hero-cta-btn {
    font-size: clamp(1.35rem, 1.6vw, 2.25rem) !important;
    padding: clamp(14px, 1.15vw, 24px) clamp(46px, 3.2vw, 76px) !important;
    border-radius: 50px !important;
    letter-spacing: -0.2px;
    box-shadow: 
      0 8px 22px rgba(0, 0, 0, 0.5), 
      inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
  }

  .all-bottom-wrapper {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .final-cta {
    padding: clamp(40px, 4.5vw, 85px) 0 clamp(40px, 5vw, 80px) 0 !important;
    background: transparent !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
  }
  
  .final-cta .container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 0 !important;
  }
  
  .final-text-top {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.1rem, 1.35vw, 1.85rem) !important;
    font-weight: 400 !important; /* Звичайний, не жирний */
    color: #cbd5e1 !important;
    line-height: 1.35;
    margin-bottom: 6px !important;
    text-align: left;
  }
  
  /* Нижній рядок: трохи більший розмір і розтягнення по довжині */
  .final-text-bottom {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.25rem, 1.6vw, 2.15rem) !important; /* Розмір трохи більший */
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: clamp(1.5px, 0.25vw, 3.5px) !important; /* Підганяє візуальну ширину під верхній рядок */
    line-height: 1.3;
    margin: 0 !important;
    text-align: left;
  }
  
  .final-text-bottom strong {
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.35);
  }

  /* ==================================================
     Фінальний підвал (Плашка в самому низу)
  ================================================== */
  .site-footer {
    width: 100%;
    background: #0a1114;
    margin: 0;
    padding: 0;
    border-top: none;
    display: flex;
    flex-direction: column;
  }
  
  /* Суцільна червона плашка графіка роботи на всю ширину */
  .work-hours-strip {
    width: 100%;
    background: linear-gradient(180deg, #78080c 0%, #5a0407 100%);
    padding: clamp(14px, 1.4vw, 22px) 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.45);
  }
  
  .work-hours-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 3vw, 48px);
    max-width: 1200px;
    width: 100%;
  }
  
  .work-hours-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.15rem, 1.35vw, 1.85rem);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.2px;
    white-space: nowrap;
  }
  
  .work-hours-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .work-hours-list p {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 1.15vw, 1.55rem);
    font-weight: 500;
    color: #ffffff;
    line-height: 1.35;
    margin: 0;
    white-space: nowrap;
  }
  
  /* Копірайт під плашкою в самому низу */
  .footer-copyright {
    background: #060b0d;
    padding: 14px 20px;
    text-align: center;
  }
  
  .footer-copyright p {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
  }
  
  /* Мобільна адаптація */
  @media (max-width: 600px) {
    .work-hours-content {
      flex-direction: column;
      gap: 6px;
      text-align: center;
    }
  }

  .pricing-info-box .pricing-subtext {
  display: block; /* Переносить на новий рядок */
  margin-top: 2px; /* Мінімальний акуратний відступ */
  font-size: 0.9em; /* Трохи компактніший розмір */
  color: #ffffff;
  line-height: 1.2;
}

.promo-info-box .promo-subtext,
.pricing-info-box .promo-subtext {
  display: block; /* Переносить на новий рядок */
  margin-top: 2px; /* Мінімальний акуратний відступ під заголовком */
  font-size: 0.9em; /* Робить шрифт трохи компактнішим */
  color: #cbd5e1;
  line-height: 1.2;
}



/* ==================================================
   Секція Акції: збільшений текст та щільні відступи
================================================== */

/* 1. Текст звичайного опису (збільшено) */
.promo-info-box p {
    font-size: clamp(1rem, 1.2vw, 1.55rem) !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    margin-bottom: clamp(14px, 1.4vw, 24px) !important;
  }
  
  /* 2. Жирний заголовок (збільшено та притиснуто до опису) */
  .promo-info-box strong {
    font-size: clamp(1.2rem, 1.45vw, 1.95rem) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    display: block;
    margin-bottom: 2px !important;
  }
  
  /* 3. Уточнення / підзаголовок у span (збільшено) */
  .promo-info-box span,
  .promo-info-box .promo-subtext {
    display: block;
    font-size: clamp(0.92rem, 1.05vw, 1.35rem) !important;
    color: #ffffff !important;
    margin-top: 1px !important;
    line-height: 1.3 !important;
  }
  
  /* 4. Мінімальний зазор, якщо strong лежить в окремому <p> */
  .promo-info-box p:has(> strong:only-child) {
    margin-bottom: 2px !important;
  }
  
  .promo-info-box p:has(> strong:only-child) + p {
    margin-top: 0 !important;
    margin-bottom: clamp(14px, 1.4vw, 24px) !important;
  }


  .pricing {
    position: relative;
    overflow: visible;
  }
  
  .pricing::before {
    content: '';
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 145vw;
    height: 160%;
    background: radial-gradient(
      ellipse 75% 60% at 50% 50%,
      rgba(102, 0, 0, 0.65) 0%,
      rgba(102, 0, 0, 0.45) 45%,
      rgba(102, 0, 0, 0.18) 75%,
      transparent 100%
    );
    filter: blur(30px);
    pointer-events: none;
    z-index: 1;
  }


  /* Контент завжди поверх світіння */
  .pricing .container {
    position: relative;
    z-index: 2;
  }
  
  /* ==================================================
     Адаптивність (Responsive)
  ================================================== */
  @media (max-width: 1200px) {
    .hero::before {
      width: 70vw;
    }
    .attraction-full-stage,
    .quest-full-stage {
      flex-direction: column;
      gap: 40px;
      padding: 0 20px;
      margin-top: 0;
    }
    .attraction-left-flush,
    .quest-right-flush {
      flex: 0 0 100%;
      justify-content: center;
      margin-top: 0;
    }
    .attraction-right-card-wrap,
    .quest-left-card-wrap {
      flex: 0 0 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      justify-content: center;
      margin-top: 0;
    }
    .attraction-glass-card,
    .quest-glass-card {
      max-width: 100%;
    }
    .clown-img-flush,
    .witch-img-flush {
      max-width: 600px;
    }
  }
  
  @media (max-width: 992px) {
    .hero {
      background-position: 70% center;
      padding: 40px 20px 60px;
    }
    .hero-title {
      font-size: 2.5rem;
    }
    .hero-subtitles li {
      font-size: 1.3rem;
    }
    .section-clean-title,
    .choice-title {
      font-size: 2.4rem;
    }
    .adv-minimal-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 40px 20px;
    }
    .choice-glass-card p {
      font-size: 1.2rem;
    }
  }
  
  @media (max-width: 868px) {
    .tabs-wrapper {
      flex-direction: column;
      gap: 30px;
    }
    .tabs-menu {
      width: 100%;
    }
    .tab-btn {
      font-size: 2rem;
      justify-content: center;
    }
    .tab-pane {
      flex-direction: column;
      text-align: center;
    }
  }
  
  @media (max-width: 768px) {
    .nav-container {
      padding: 0 20px;
    }
    nav ul {
      display: none;
    }
    .hero {
      background-image: 
        linear-gradient(to top, #1E2428 50%, rgba(30, 36, 40, 0.7) 100%),
        url('img/house_hero.jpg');
      background-position: center top;
    }
    .hero::before {
      display: none;
    }
    .hero-title {
      font-size: 2.1rem;
    }
    .hero-subtitles li {
      font-size: 1.15rem;
    }
    .hero-cta-btn {
      font-size: 1.4rem;
      padding: 14px 40px;
      width: 100%;
      text-align: center;
    }
    .section-title-badge {
      font-size: 1.3rem;
      padding: 8px 24px;
      text-align: center;
    }
    .attraction-glass-card,
    .quest-glass-card {
      padding: 28px 22px;
    }
    .glass-main-heading {
      font-size: 1.35rem;
    }
    .glass-subheading {
      font-size: 1.2rem;
    }
    .glass-bullets li {
      font-size: 1rem;
    }
    .glass-text-block p,
    .quest-details-text p {
      font-size: 1.05rem;
    }
    .quest-warning-block {
      font-size: 1.1rem;
    }
    .quest-team-title {
      font-size: 1.25rem;
    }
    .glass-cta-btn,
    .quest-cta-btn {
      font-size: 1rem;
      padding: 12px 30px;
    }
    .section-clean-title,
    .choice-title {
      font-size: 1.85rem;
    }
    .adv-minimal-grid {
      grid-template-columns: 1fr;
      gap: 35px;
    }
    .choice-glass-card {
      padding: 26px 20px;
    }
    .choice-glass-card p {
      font-size: 1.05rem;
      line-height: 1.5;
    }
  }


/* ==================================================
   Гарантоване приховування персонажів на звужених екранах і смартфонах
================================================== */
@media (max-width: 1024px) {
    /* Приховуємо сам елемент */
    .hide-on-mobile {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      background-image: none !important; /* Прибирає фонову картинку, якщо вона задана */
    }
  
    /* Якщо фон заданий на саму секцію (наприклад hero або pricing) */
    .hero.hide-on-mobile,
    .pricing.hide-on-mobile,
    .house-bg.hide-on-mobile {
      background-image: none !important;
    }
  }

  @media (max-width: 1024px) {
    /* Повністю вимикаємо будинок у шапці на смартфонах і планшетах */
    .hero::before {
      display: none !important;
      background-image: none !important;
    }
  }


  /* ==================================================
   Виправлення пропорцій та сплющування фонів на мобільних
================================================== */
@media (max-width: 1024px) {
    html,
    body {
      overflow-x: hidden !important;
    }
  
    /* Нижня єдина фонова секція (Вартість, Акції, FAQ, Контакти) */
    .all-bottom-wrapper {
      /* Робить картинку широкою за рахунок прив'язки до висоти без стискання по боках */
      background-size: auto max(100%, 450vh) !important;
      background-position: center top !important;
      background-repeat: no-repeat !important;
    }
  
    /* Верхня обгортка (Hero + Атракціон + Квест) */
    .top-sections-wrapper {
      background-size: cover !important;
      background-position: center bottom !important;
      background-repeat: no-repeat !important;
    }
  }



  /* ==================================================
   Бургер-кнопка в шапці (по замовчуванню прихована на ПК)
================================================== */
.burger-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 101;
  }
  
  .burger-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #ffffff;
    border-radius: 4px;
    transition: all 0.3s ease;
  }
  
  /* ==================================================
     Скляне модальне бургер-меню (Точно за макетом)
  ================================================== */
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  .mobile-menu-card {
    position: relative;
    width: 82%;
    max-width: 320px;
    /* Градієнт із макета: темно-сірий зверху переходить у глибокий бордовий */
    background: linear-gradient(
      180deg,
      rgba(120, 115, 120, 0.7) 0%,
      rgba(110, 80, 85, 0.75) 40%,
      rgba(130, 45, 55, 0.85) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1.5px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65);
    padding: 40px 24px 34px;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .mobile-menu-overlay.active .mobile-menu-card {
    transform: scale(1);
  }
  
  /* Хрестик закриття */
  .mobile-menu-close {
    position: absolute;
    top: 16px;
    right: 22px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 26px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
  }
  
  .mobile-menu-close:hover {
    color: #ffffff;
  }
  
  /* Список посилань */
  .mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .mobile-nav ul li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.2px;
    display: block;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  
  .mobile-nav ul li a:active {
    transform: scale(0.96);
    opacity: 0.8;
  }
  
  /* Червона кнопка «Запис» */
  .mobile-menu-cta-btn {
    display: inline-block;
    background: radial-gradient(circle at 50% 30%, #ff1a1a 0%, #d40000 65%, #940000 100%);
    color: #ffffff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    padding: 10px 42px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(220, 20, 20, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.4);
    cursor: pointer;
  }
  
  /* ==================================================
     Показ кнопки бургера на мобільних пристроях
  ================================================== */
  @media (max-width: 992px) {
    header nav {
      display: none !important; /* Ховаємо десктопне меню */
    }
  
    .burger-btn {
      display: flex !important; /* Вмикаємо бургер */
    }
  }

  @media (max-width: 768px) {
    /* Дозволяємо тексту адреси природно переноситися на мобільних */
    .address-main {
      white-space: normal !important;
      font-size: 1rem !important;
      line-height: 1.35;
      padding: 0 5px;
    }
  }

  /* ==================================================
   Завжди видимий (закріплений) хедер
================================================== */
header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }
  
  /* Компенсація висоти хедера для першого екрана, щоб контент не ховався під ним */
  body {
    padding-top: clamp(30px, 4vw, 75px);
  }

  /* ==================================================
   Видалення зайвого розриву в Атракціоні 1 в 1 як у Квесті
================================================== */
.attraction-section {
    padding: 45px 0 45px !important;
  }
  
  .attraction-section .section-title-badge-wrapper {
    margin-bottom: 24px !important;
  }
  
  .attraction-full-stage {
    margin-top: 0 !important;
  }
  
  .attraction-right-card-wrap {
    margin-top: -45px !important;
  }
  
  /* Прибираємо прихований блок клоуна зверху на мобільних і планшетах */
  @media (max-width: 1200px) {
    .attraction-left-flush {
      display: none !important;
      margin: 0 !important;
      padding: 0 !important;
      height: 0 !important;
    }
  
    .attraction-full-stage {
      gap: 0 !important;
    }
  
    .attraction-right-card-wrap {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }
  }

  /* ==================================================
   Відновлення фону на мобільному першому екрані (Hero)
================================================== */
@media (max-width: 768px) {
    .hero {
      background: transparent !important;
      background-image: none !important;
    }
    
    .top-sections-wrapper {
      background-size: cover !important;
      background-position: center top !important;
    }
  }

  /* ==================================================
   Вирівнювання розмірів і перенесення тексту табів у Вартість та Акції на мобільних
================================================== */
@media (max-width: 992px) {
    /* Задаємо єдиний адаптивний розмір шрифту всім табам (Вартість, Кнопка Акції, Таби Акцій) */
    .pricing-tab-btn,
    .promo-tab-btn,
    a.pricing-tab-btn,
    a.promo-tab-btn,
    .promo-link {
      font-size: clamp(1.15rem, 4.5vw, 1.45rem) !important;
      white-space: normal !important; /* Дозволяє довгим назвам переноситися на новий рядок */
      text-align: center !important;
      justify-content: center !important;
      line-height: 1.25 !important;
      padding: 14px 10px !important;
      letter-spacing: 0.5px !important;
    }
  
    /* Прибираємо фіксовану ширину стрілочки, щоб вона не зміщувала текст */
    .pricing-tab-btn.active::before,
    .promo-tab-btn.active::before {
      display: none !important;
    }
  }

/* ==================================================
   Тонке мікро-коригування відстані Hero -> Атракціон на мобільних
================================================== */
@media (max-width: 992px) {
    .hero {
      /* Зменшуємо нижній відступ першого екрана лише на 10px (було 60px) */
      padding-bottom: 50px !important;
    }
  
    .attraction-section {
      /* Зменшуємо верхній відступ атракціону лише на 10px (було 50px) */
      padding-top: 20px !important;
    }
  }

  /* ==================================================
   Центрування скляних карток Атракціон та Квест на мобільних
================================================== */
@media (max-width: 992px) {
    .attraction-right-card-wrap,
    .quest-left-card-wrap {
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  
    .attraction-glass-card,
    .quest-glass-card {
      margin: 0 auto !important;
      width: 100% !important;
      max-width: 100% !important;
    }
  }

  /* ==================================================
   Центрування тексту першого екрана (Hero) на мобільних
================================================== */
@media (max-width: 992px) {
    .hero {
      justify-content: center !important;
    }
  
    .hero-content {
      margin-left: auto !important;
      margin-right: auto !important;
      text-align: center !important;
      max-width: 100% !important;
    }
  
    .hero-subtitles {
      list-style: none !important;
      padding-left: 0 !important;
    }
  
    .hero-subtitles li {
      text-align: center !important;
    }
  
    .hero-desc-block p {
      text-align: center !important;
    }
  }

  /* ==================================================
   Повний показ тексту та правильний відступ секції «Наші переваги»
================================================== */
.advantages-section {
    scroll-margin-top: 80px !important; /* Робить заголовок повністю видимим під фіксованим хедером */
  }
  
  @media (max-width: 992px) {
    /* Знімаємо обмеження у 2 рядки, щоб відображався весь текст */
    .adv-col-text {
      display: block !important;
      -webkit-line-clamp: unset !important;
      line-clamp: unset !important;
      overflow: visible !important;
      max-width: 100% !important;
    }
  
    /* Дозволяємо заголовкам карток переноситися без обрізання */
    .adv-col-title {
      white-space: normal !important;
    }
  }

  /* ==================================================
   Точна точка зупинки для «Наші переваги» на мобільних
================================================== */
@media (max-width: 992px) {
    .advantages-section {
      /* Зсуваємо точку прицілу нижче (заголовок підтискається ближче до хедера, щоб помістилися всі пункти) */
      scroll-margin-top: 15px !important;
      padding-top: 25px !important;
    }
  
    .advantages-section .section-clean-title {
      margin-bottom: 25px !important;
    }
  
    .adv-minimal-grid {
      gap: 20px !important;
      margin-bottom: 30px !important;
    }
  }

  /* ==================================================
   Збільшений будинок фоном на мобільних
================================================== */
@media (max-width: 992px) {
    .hero {
      position: relative !important;
      background: transparent !important;
      overflow: hidden !important;
    }
  
    .hero::before {
      content: '' !important;
      display: block !important;
      position: absolute !important;
      top: 60% !important;
      left: 1% !important;
      /* Збільшує будинок фізично без викривлення пропорцій */
      transform: translate(-50%, -50%) scale(1.2) !important;
      width: 170% !important;
      height: 180% !important;
      background-image: url('img/house_hero.jpg') !important;
      background-size: contain !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
      opacity: 0.85 !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
      z-index: 1 !important;
      pointer-events: none !important;
    }
  
    .hero-content {
      position: relative !important;
      z-index: 2 !important;
      text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.9) !important;
    }
  }

  /* ==================================================
   Збільшений текст для першого екрана (Hero) на мобільних
================================================== */
@media (max-width: 992px) {
    /* Головний заголовок */
    .hero-title {
      font-size: clamp(2.3rem, 6.5vw, 3.2rem) !important;
      line-height: 1.15 !important;
      margin-bottom: 18px !important;
    }
  
    /* Підзаголовки (список) */
    .hero-subtitles li {
      font-size: clamp(1.25rem, 4vw, 1.6rem) !important;
      line-height: 1.4 !important;
      margin-bottom: 6px !important;
    }
  
    /* Текст опису */
    .hero-desc-block p {
      font-size: clamp(1.1rem, 3.5vw, 1.35rem) !important;
      line-height: 1.55 !important;
    }
  
    /* Кнопка дії */
    .hero-cta-btn {
      font-size: clamp(1.25rem, 4vw, 1.55rem) !important;
      padding: 14px 44px !important;
    }
  }


  /* ==================================================
   Виправлення перекриття димкою заголовка та тексту Акцій
================================================== */
.promotions-section {
  position: relative !important;
  z-index: 5 !important; /* Піднімає всю секцію над розмитим світінням */
}

.promotions-section .container {
  position: relative !important;
  z-index: 6 !important;
}

/* Обмежуємо висоту димки, щоб вона не вилазила за межі вартості */
.pricing::before {
  height: 110% !important;
  top: 50% !important;
  pointer-events: none !important;
}


/* ==================================================
   Зміщення точки зупинки навігації нижче на мобільних
================================================== */
@media (max-width: 992px) {
    /* Вартість, Акції та FAQ */
    .pricing,
    .promotions-section,
    .faq,
    #pricing,
    #promo,
    #promotions,
    #faq {
      scroll-margin-top: -30px !important; /* Чим менша цифра (наприклад, 20px чи 10px), тим ще нижче опускатиме екран */
    }
  }

  /* ==================================================
   Покращення читабельності жирного тексту в секції Квест
================================================== */
.quest-warning-block {
    letter-spacing: 1.5px !important; /* Розширює відстань між літерами замість злипання */
  }

  /* ==================================================
   Hero на мобільних: трохи більший будинок без обрізання
================================================== */
@media (max-width: 992px) {
    .hero {
      position: relative !important;
      min-height: 100vh !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      padding: 70px 20px 36px !important;
      overflow: hidden !important;
      background-color: transparent !important;
      background-image: url('img/house_hero.jpg') !important;
      /* Опущено трохи нижче (top 31% замість 26%) зі збереженням зрізу праворуч */
      background-position: right -60px top 31% !important;
      background-repeat: no-repeat !important;
      /* Збільшено розмір (з 430px до 470px) */
      background-size: auto 470px !important;
    }
  
    .hero::before {
      display: none !important;
    }
  
    .hero-content {
      position: relative !important;
      z-index: 2 !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      display: flex !important;
      flex-direction: column !important;
    }
  
    /* Верхній заголовок */
    .hero-title {
      font-size: 1.95rem !important;
      font-weight: 800 !important;
      line-height: 1.2 !important;
      text-align: left !important;
      margin-top: 0 !important;
      margin-bottom: 22px !important;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95) !important;
    }
  
    /* Список */
    .hero-subtitles {
      list-style: disc !important;
      padding-left: 24px !important;
      margin-bottom: 0 !important;
      text-align: left !important;
      max-width: 65% !important;
    }
  
    .hero-subtitles li {
      font-size: 1.4rem !important;
      font-weight: 800 !important;
      line-height: 1.3 !important;
      margin-bottom: 14px !important;
      text-align: left !important;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95) !important;
    }
  
    /* Нижній опис */
    .hero-desc-block {
      margin-top: clamp(60px, 12vh, 90px) !important;
      margin-bottom: 26px !important;
      text-align: center !important;
      width: 100% !important;
    }
  
    .hero-desc-block p {
      font-size: 0.95rem !important;
      line-height: 1.55 !important;
      margin-bottom: 14px !important;
      text-align: center !important;
      max-width: 90% !important;
      margin-left: auto !important;
      margin-right: auto !important;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95) !important;
    }
  
    /* Кнопка */
    .hero-cta-btn {
      display: block !important;
      width: 100% !important;
      max-width: 290px !important;
      margin: 0 auto !important;
      text-align: center !important;
      font-size: 1.35rem !important;
      font-weight: 700 !important;
      padding: 13px 20px !important;
    }
  }

  @media (max-width: 992px) {
    /* Верхній заголовок: прибираємо 800/700, робимо звичайним */
    .hero-title {
      font-weight: 500 !important; /* Якщо треба зовсім тонкий — став 400 */
    }
  
    /* Список із крапками («Один будинок...») */
    .hero-subtitles li {
      font-weight: 400 !important;
    }
  
    /* Нижній опис (Атракціон / Квест) */
    .hero-desc-block p,
    .hero-desc-block strong,
    .hero-desc-block b {
      font-weight: 400 !important;
    }
  }

  /* Червоний колір тільки на мобільних пристроях */

    .hero-title span,
    .hero-title strong,
    .hero-title .accent,
    .hero-title .red-text {
      color: #FF1618 !important;
    }

  /* Центрування тексту в кнопці секції «Атракціон» */
.attraction-section .glass-cta-btn {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }



/* ==================================================
   Зсув кнопки «Акції» тільки для мобільних пристроїв
================================================== */
@media (max-width: 992px) {
    .pricing-tab-btn.promo-link,
    a.pricing-tab-btn.promo-link {
      position: relative !important;
      right: 5px !important; /* Чим більше значення, тим сильніше зсув ліворуч */
    }
  }
/* Збільшення відстані між пунктами навігації */
header nav ul {
    gap: clamp(24px, 2.2vw, 42px) !important;
  }
  
  /* Якщо маєш на увазі відстань між посиланнями в мобільному бургер-меню */
  .mobile-nav ul {
    gap: 22px !important;
  }

  /* ==================================================
   Заголовки-плашки «Атракціон» та «Квест» (оптимальний розмір)
================================================== */
@media (max-width: 992px) {
    .section-title-badge {
      /* Збалансований розмір: чіткий, помітний, але вміщується в один рядок */
      font-size: clamp(1.05rem, 4.3vw, 1.25rem) !important;
      white-space: nowrap !important;
      padding: 8px 16px !important;
      width: auto !important;
      max-width: calc(100% - 24px) !important;
      margin: 0 auto !important;
      text-align: center !important;
      box-sizing: border-box !important;
      letter-spacing: -0.2px !important; /* Легке ущільнення літер, щоб влізло на вузьких екранах */
    }
  
    .section-title-badge-wrapper {
      padding-left: 12px !important;
      padding-right: 12px !important;
      display: flex !important;
      justify-content: center !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
  }


  /* ==================================================
   Адаптація контактів під мобільні екрани
================================================== */
@media (max-width: 992px) {
    /* Внутрішні поля картки, щоб контент не виходив за краї */
    .contact-card {
      padding: 20px 14px !important;
      box-sizing: border-box !important;
      overflow: visible !important;
    }
  
    /* Перебудова в один стовпчик: зверху кнопка, знизу контакти */
    .contact-main-row {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 18px !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  
    /* Кнопка «Місцезнаходження» стає акуратною по центру */
    .contact-location-btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: auto !important;
      min-width: 220px !important;
      padding: 10px 18px !important;
      margin: 0 auto !important;
      white-space: nowrap !important;
    }
  
    /* Колонка з телефонами та соцмережами */
    .contact-info-col {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      margin: 0 !important;
      gap: 14px !important;
    }
  
    /* Номери телефонів: чітко видно, не обрізаються */
    .contact-phones {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 10px !important;
      width: 100% !important;
    }
  
    .contact-phones .phone-link {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 1.05rem !important;
      white-space: nowrap !important;
      width: auto !important;
      gap: 8px !important;
    }
  
    .contact-phones .phone-svg {
      width: 18px !important;
      height: 18px !important;
      flex-shrink: 0 !important;
    }
  
    /* Іконки соцмереж по центру під телефонами */
    .contact-socials {
      display: flex !important;
      justify-content: center !important;
      gap: 14px !important;
      margin-top: 4px !important;
    }
  }

  /* ==================================================
   Адаптивні плашки-заголовки (не виходять за рамки)
================================================== */
@media (max-width: 992px) {
    .section-title-badge-wrapper {
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      padding: 0 12px !important;
      box-sizing: border-box !important;
    }
  
    .section-title-badge {
      /* Шрифт гнучко зменшується від 0.85rem до 1.2rem залежно від ширини екрана */
      font-size: clamp(0.85rem, 4vw, 1.2rem) !important;
      line-height: 1.25 !important;
      text-align: center !important;
      
      /* Дозволяємо перенос слів, якщо екран критично вузький */
      white-space: normal !important;
      word-break: normal !important;
      overflow-wrap: break-word !important;
      
      /* Габарити та відступи */
      max-width: 100% !important;
      width: fit-content !important;
      padding: 8px 16px !important;
      box-sizing: border-box !important;
    }
  }

  /* ==================================================
   Зменшення відстані між Hero та секцією «Атракціон»
================================================== */
@media (max-width: 992px) {
    /* 1. Дозволяємо Hero підлаштовуватися під контент без зайвої висоти */
    .hero {
      min-height: auto !important;
      padding-bottom: 4% !important; /* Невеликий нижній відступ у відсотках */
      margin-bottom: 0 !important;
    }
  
    /* 2. Зменшуємо верхній відступ другої секції */
    .attraction-section {
      padding-top: 5% !important;   /* Відступ у відсотках замість великих фіксованих пікселів */
      margin-top: 0 !important;
    }
  
    /* 3. Притискаємо плашку-бейдж ближче до верху секції */
    .section-title-badge-wrapper {
      margin-top: 0 !important;
      margin-bottom: 3% !important;
    }
  }

  /* ==================================================
   Секція Hero на весь перший екран зі збереженням скролу
================================================== */
@media (max-width: 992px) {
    /* Батьківська обгортка не повинна додавати зайвих відступів */
    .top-sections-wrapper {
      padding-top: 0 !important;
      margin-top: 0 !important;
    }
  
    /* Hero займає рівно видиму область і має невеликий відступ знизу до наступної секції */
  .hero {
    min-height: calc(100dvh - 70px) !important;
    height: calc(100dvh - 70px) !important;
    max-height: calc(100dvh - 70px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: clamp(24px, 4vh, 50px) 20px clamp(16px, 3vh, 32px) !important;
    /* Невеликий акуратний відступ знизу */
    margin-bottom: clamp(24px, 4vh, 40px) !important;
  }
  
    /* Контейнер розтягується на всю висоту для правильного розподілу */
    .hero .container-fluid {
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
    }
  
    .hero-content {
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      margin: 0 !important;
    }
  
    /* Нижній блок опису не розштовхує екран */
    .hero-desc-block {
      margin-top: auto !important;
      margin-bottom: clamp(12px, 2vh, 24px) !important;
    }
  
    /* Кнопка залишається на видному місці внизу екрана */
    .hero-cta-btn {
      margin-top: 0 !important;
    }
  }

  /* ==================================================
   Збільшення та зміщення вниз заголовка і підзаголовків Hero
================================================== */
@media (max-width: 992px) {
    /* Головний заголовок: опускаємо нижче і збільшуємо */
    .hero-title {
      margin-top: clamp(24px, 5vh, 48px) !important; /* Опускає заголовок нижче */
      font-size: clamp(1.9rem, 6.2vw, 2.5rem) !important; /* Робить текст трохи більшим */
      line-height: 1.25 !important;
      margin-bottom: 16px !important;
    }
  
    /* Підзаголовки: збільшуємо шрифт і робимо комфортніший відступ */
    .hero-subtitles {
      font-size: clamp(1.1rem, 3.8vw, 1.35rem) !important; /* Трохи більший розмір */
      line-height: 1.4 !important;
      margin-bottom: 24px !important;
    }
  
    .hero-subtitles li {
      margin-bottom: 6px !important;
    }
  }

/* ==================================================
   Легке опускання будинку на мобільних
================================================== */
@media (max-width: 992px) {

    /* Якщо будинок заданий через background-image */
    .hero,
    .top-sections-wrapper {
      background-position: center calc(50% + 15px) !important;
    }
  
    /* Якщо через псевдоелемент (::before / ::after) */
    .hero::before,
    .hero::after,
    .top-sections-wrapper::before {
      top: 12px !important;
    }
  
    /* Якщо через тег <img> */
    .hero-img,
    .house-img,
    .hero-bg-img {
      transform: translateY(12px) !important;
    }
  }

  /* ==================================================
   Підняття блоку опису та кнопки Hero трохи вгору
================================================== */
@media (max-width: 992px) {
    .hero-desc-block {
      /* Зсуваємо опис вгору на 20px */
      transform: translateY(-20px) !important;
      margin-bottom: 14px !important;
    }
  
    .hero-cta-btn {
      /* Зсуваємо кнопку вслід за описом вгору */
      transform: translateY(-20px) !important;
    }
  }

  @media (max-width: 992px) {
    .hero,
    .top-sections-wrapper {
      /* Перше значення — по горизонталі (зсув вліво), друге — по вертикалі */
      background-position: 80% calc(50% + 15px) !important;
    }
  }

  /* ==================================================
   Опускання підзаголовка Hero трохи нижче
================================================== */
@media (max-width: 992px) {
    .hero-subtitles {
      margin-top: 18px !important; /* Відштовхує текст вниз від головного заголовка */
      /* або через transform, якщо відступ не спрацьовує: */
      /* transform: translateY(15px) !important; */
    }

  }
  /* ==================================================
   Збільшення відстані між рядками підзаголовка
================================================== */
@media (max-width: 992px) {
    .hero-subtitles {
      display: flex !important;
      flex-direction: column !important;
      gap: 20px !important; /* Відстань між рядками */
    }
  
    .hero-subtitles li {
      margin-bottom: 0 !important;
    }
  }

  /* Робимо текст «Прокляття Відьми» трохи щільнішим/жирнішим */
.hero-title span, .hero-subtitle {
    font-weight: 700 !important; /* Напівжирний акцент між стандартним 700 і максимальним 900 */
  }

  /* Примусове збільшення розміру тексту списку на мобільних */
@media (max-width: 992px) {
    .hero-subtitles,
    .hero-subtitles li {
      font-size: 28px !important; /* Якщо замало, постав 1.45rem або 22px */
      line-height: 1.35 !important;
    }
  }

  /* ==================================================
   Мікро-збільшення будинку на мобільних
================================================== */
@media (max-width: 992px) {
    .hero {
      background-size: auto 600px !important; /* було 470px, стало м'яко більшим */
    }
  }

/* ==================================================
   Адаптивний збалансований розмір плашок Атракціон та Квест
================================================== */
@media (max-width: 992px) {
    .section-title-badge,
    .section-title-badge *,
    .attraction-section .section-title-badge,
    .quest-section .section-title-badge {
      /* Плавний діапазон від 18px на маленьких телефонах до 21px на великих */
      font-size: clamp(1.12rem, 5vw, 1.325em) !important;
      line-height: 1.25 !important;
    }
  }

  /* ==================================================
   Виправлення зміщення нижньої кнопки «Забронювати»
================================================== */
.final-btn-wrap .hero-cta-btn {
    transform: none !important; /* Скидає небажаний зсув вгору */
    margin: 0 !important;
  }
  
  /* Якщо піднімається вся конструкція з обгорткою (за потреби) */
  @media (max-width: 992px) {
    .final-btn-wrap {
      transform: none !important;
    }
  }


  /* ==================================================
   Повне приховування плашки та віджета Netlify
================================================== */
[data-netlify-drawer],
#netlify-drawer,
.netlify-badge,
iframe[src*="netlify"],
div[class*="netlify-drawer"],
div[id*="netlify"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 992px) {
    /* Секція Квест */
    .quest-section,
    .quest,
    #quest,
    #quests {
      scroll-margin-top: -50px !important; /* Чим більша цифра (наприклад, 100px або 120px), тим вище зупиниться екран над квестом */
    }
  }


  @media (max-width: 1200px) {
    .attraction-left-flush {
      display: none !important;
    }
  }

  /* ==================================================
   Мобільна версія: Клоун і Відьма стають фоном для тексту
================================================== */
@media (max-width: 992px) {
    /* 1. Повністю приховуємо окремі блоки з картинками */
    .attraction-left-flush,
    .clown-img-flush,
    .quest-right-flush,
    .witch-img-flush {
      display: none !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  
    /* 2. Картка Атракціону: клоун на фоні, напівпрозоре затемнення */
    .attraction-glass-card {
      background-image: 
        linear-gradient(rgba(10, 17, 20, 0.45), rgba(10, 17, 20, 0.65)),
        url('img/atr.jpg') !important;
      background-size: cover !important;
      background-position: center top !important;
      background-repeat: no-repeat !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }
  
    /* 3. Картка Квесту: відьма на фоні, напівпрозоре затемнення */
    .quest-glass-card {
      background-image: 
        linear-gradient(rgba(10, 17, 20, 0.45), rgba(10, 17, 20, 0.65)),
        url('img/witch.jpg') !important;
      background-size: cover !important;
      background-position: center top !important;
      background-repeat: no-repeat !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }
  
    /* 4. Чітка тінь на текст, щоб він легко читався поверх малюнка */
    .attraction-glass-card *,
    .quest-glass-card * {
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.8) !important;
    }
  }

  /* ==================================================
   Мобільна версія: Клоун і Відьма стають фоном для тексту
================================================== */
@media (max-width: 992px) {
    /* 1. Повністю приховуємо окремі блоки з картинками */
    .attraction-left-flush,
    .clown-img-flush,
    .quest-right-flush,
    .witch-img-flush {
      display: none !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  
    /* 2. Картка Атракціону: клоун на фоні, напівпрозоре затемнення */
    .attraction-glass-card {
      background-image: 
        linear-gradient(rgba(10, 17, 20, 0.45), rgba(10, 17, 20, 0.65)),
        url('img/atr.jpg') !important;
      background-size: cover !important;
      background-position: center top !important;
      background-repeat: no-repeat !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }
  
    /* 3. Картка Квесту: відьма на фоні, напівпрозоре затемнення */
    .quest-glass-card {
      background-image: 
        linear-gradient(rgba(10, 17, 20, 0.45), rgba(10, 17, 20, 0.65)),
        url('img/witch.jpg') !important;
      background-size: cover !important;
      background-position: center top !important;
      background-repeat: no-repeat !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }
  
    /* 4. Чітка тінь на текст, щоб він легко читався поверх малюнка */
    .attraction-glass-card *,
    .quest-glass-card * {
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.8) !important;
    }
  }

  @media (max-width: 992px) {
    .attraction-glass-card {
      background-image: 
        linear-gradient(rgba(10, 17, 20, 0.45), rgba(10, 17, 20, 0.65)),
        url('img/atr.jpg') !important;
      background-size: cover !important;
      /* Зсув картинки по горизонталі праворуч, щоб обличчя стало по центру */
      background-position: 20% top !important;
      background-repeat: no-repeat !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }
  }

  @media (max-width: 992px) {
    /* Повне вимкнення зовнішніх і внутрішніх тіней карток */
    .attraction-glass-card,
    .quest-glass-card {
      box-shadow: none !important;
      -webkit-box-shadow: none !important;
    }
  }


  @media (max-width: 992px) {
    /* Секція Наші переваги */
    .advantages-section,
    .advantages,
    #advantages,
    #benefits {
      scroll-margin-top: -25px !important; /* Чим менша цифра (наприклад, -40px чи -50px), тим ще нижче опускатиме екран */
    }
  }

/* ==================================================
   Фіксація хедера у Safari на iOS (iPhone) без артефактів на ПК
================================================== */
header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    /* Зберігаємо оригінальні вертикальні відступи */
    padding-top: clamp(6px, 0.6vw, 10px) !important;
    padding-bottom: clamp(6px, 0.6vw, 10px) !important;
  }
  
  /* Специфічні правила для iOS Safari діють виключно на смартфонах/планшетах */
  @media (max-width: 992px) {
    header {
      position: -webkit-sticky !important;
      position: fixed !important;
      /* Додає відступ безпечної зони iPhone, не ламаючи базовий паддінг */
      padding-top: calc(clamp(6px, 0.6vw, 10px) + env(safe-area-inset-top, 0px)) !important;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  }

  /* ==================================================
   ІНТУЇТИВНІ КНОПКИ: Вартість та Акції (Mobile)
================================================== */
@media (max-width: 992px) {
    .pricing,
    .promotions-section {
      padding: 30px 0 40px !important;
    }
  
    .pricing .container,
    .promotions-section .container {
      width: 100% !important;
      padding: 0 14px !important;
    }
  
    .pricing-tabs-wrapper,
    .promo-tabs-wrapper {
      display: flex !important;
      flex-direction: column !important;
      gap: 16px !important;
      border: none !important;
      padding: 0 !important;
    }
  
    /* Панель кнопок перемикання */
    .pricing-tabs-menu,
    .promo-tabs-menu {
      flex: none !important;
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      background: transparent !important;
      padding: 0 !important;
      border: none !important;
    }
  
    /* Вигляд окремої кнопки: масивна картка з рамкою та індикатором */
    .pricing-tab-btn,
    .promo-tab-btn,
    a.pricing-tab-btn,
    a.promo-tab-btn,
    .tab-btn {
      position: relative !important;
      width: 100% !important;
      padding: 14px 18px !important;
      background: rgba(22, 33, 44, 0.85) !important;
      border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
      border-radius: 14px !important;
      color: #cbd5e1 !important;
      font-size: 1.05rem !important;
      font-weight: 800 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      text-align: left !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
      transition: all 0.2s ease !important;
      cursor: pointer !important;
    }
  
    /* Додаємо явний заклик до дії праворуч усередині неактивної кнопки */
    .pricing-tab-btn::after,
    .promo-tab-btn::after,
    .tab-btn::after {
      content: 'Натисни 👆' !important;
      font-size: 0.78rem !important;
      font-weight: 600 !important;
      color: #94a3b8 !important;
      background: rgba(255, 255, 255, 0.08) !important;
      padding: 4px 10px !important;
      border-radius: 20px !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
    }
  
    /* Прибираємо старі десктопні стрілки зліва */
    .pricing-tab-btn::before,
    .promo-tab-btn::before,
    .tab-btn::before {
      display: none !important;
      content: none !important;
    }
  
    /* АКТИВНА кнопка: червоне неонове підсвічування та статус «Відкрито» */
    .pricing-tab-btn.active,
    .promo-tab-btn.active,
    .tab-btn.active {
      background: linear-gradient(135deg, rgba(200, 20, 20, 0.95) 0%, rgba(130, 8, 8, 0.95) 100%) !important;
      border-color: #ff4d4d !important;
      color: #ffffff !important;
      box-shadow: 0 6px 20px rgba(220, 20, 20, 0.5) !important;
      transform: scale(1.01) !important;
    }
  
    .pricing-tab-btn.active::after,
    .promo-tab-btn.active::after,
    .tab-btn.active::after {
      content: 'Обрано ✓' !important;
      color: #ffffff !important;
      background: rgba(0, 0, 0, 0.3) !important;
      font-weight: 700 !important;
    }
  
    /* Картка з інформацією, що розкривається під кнопками */
    .pricing-tabs-content,
    .promo-tabs-content {
      width: 100% !important;
    }
  
    .pricing-pane,
    .promo-pane {
      width: 100% !important;
      display: none;
      flex-direction: column !important;
      gap: 14px !important;
      background: rgba(14, 22, 28, 0.9) !important;
      border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
      border-radius: 16px !important;
      padding: 16px !important;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
    }
  
    .pricing-pane.active,
    .promo-pane.active {
      display: flex !important;
      animation: slideDownInfo 0.3s ease-out !important;
    }
  
    /* Фото всередині картки */
    .pricing-image-box,
    .promo-image-box {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
    }
  
    .pricing-image-box img,
    .promo-image-box img {
      width: 100% !important;
      height: 190px !important;
      object-fit: cover !important;
      border-radius: 10px !important;
      display: block !important;
    }
  
    /* Текст опису та ціни */
    .pricing-info-box,
    .promo-info-box {
      width: 100% !important;
      text-align: left !important;
    }
  
    .pricing-info-box p,
    .promo-info-box p {
      font-size: 0.95rem !important;
      line-height: 1.45 !important;
      color: #e2e8f0 !important;
      margin-bottom: 8px !important;
    }
  
    .pricing-info-box strong,
    .promo-info-box strong {
      font-size: 1.25rem !important;
      color: #ff3333 !important;
      display: block !important;
      margin-bottom: 4px !important;
    }
  }
  
  @keyframes slideDownInfo {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }


  @media (max-width: 992px) {
    /* Неактивна кнопка: тонка стрілка вправо */
    .pricing-tab-btn::after,
    .promo-tab-btn::after,
    .tab-btn::after {
      content: '›' !important;
      font-size: 1.4rem !important;
      line-height: 1 !important;
      color: rgba(255, 255, 255, 0.4) !important;
      background: transparent !important;
      padding: 0 !important;
    }
  
    /* Активна кнопка: червона стрілка або крапка */
    .pricing-tab-btn.active::after,
    .promo-tab-btn.active::after,
    .tab-btn.active::after {
      content: '●' !important;
      font-size: 0.8rem !important;
      color: #ffffff !important;
      background: transparent !important;
    }
  }

  /* ==================================================
   Скидання зсуву для кнопки Акції на мобільних
================================================== */
@media (max-width: 992px) {
    .pricing-tab-btn.promo-link,
    a.pricing-tab-btn.promo-link,
    .promo-link {
      position: static !important;
      right: 0 !important;
      left: 0 !important;
      margin: 0 !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
  }
  /* ==================================================
   Корекція точки зупинки скролу до Акцій на мобільних
================================================== */
@media (max-width: 992px) {
    .promotions-section,
    #promo,
    #promotions {
      scroll-margin-top: -10px !important; /* Чим більше значення, тим вище зупиниться екран */
    }
  }


  /* ==================================================
   Вимкнення тіней тексту (збережено тільки для «Прокляття Відьми»)
================================================== */
@media (max-width: 992px) {
    /* 1. Скидаємо тіні з усього Hero */
    .hero,
    .hero *,
    .hero-content,
    .hero-content *,
    .hero-title,
    .hero-subtitles,
    .hero-subtitles li,
    .hero-desc-block,
    .hero-desc-block *,
    .hero-cta-btn {
      text-shadow: none !important;
    }
  
    /* 2. Залишаємо тінь ТІЛЬКИ на «Прокляття Відьми» */
    .hero-title span,
    .hero-title strong,
    .hero-title .accent,
    .hero-title .red-text {
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.70) !important;
    }
  
    /* 3. Скидаємо тіні в Атракціоні */
    .attraction-section,
    .attraction-section *,
    .attraction-glass-card,
    .attraction-glass-card * {
      text-shadow: none !important;
    }
  
    /* 4. Скидаємо тіні в Квесті */
    .quest-section,
    .quest-section *,
    .quest-glass-card,
    .quest-glass-card * {
      text-shadow: none !important;
    }
  }