/* ==============================================================================
   LEFORTOVO & PEROVO ENHANCEMENTS & LAYOUT COLLISION FIXES
   Eliminates all overlapping, aligns all buttons, fixes desktop display
   ============================================================================== */

/* --- 1. CRITICAL: RESET SECTION COLLISIONS & OVERLAPS --- */
/* Reset extreme competitor negative margins and fixed wrapper heights that cause sections to stack on top of each other */

.intro-stack,
.story-games-wrap,
.spot-fifth-wrap {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  margin-top: 0 !important;
}

#experience {
  position: relative !important;
  transform: none !important;
}

.gallery-1 {
  position: relative !important;
  transform: none !important;
}

.features {
  position: relative !important;
  transform: none !important;
  overflow: visible !important;
}

.gallery-2 {
  position: relative !important;
  transform: none !important;
}

.story-games-wrap > .rules {
  margin-top: 60px !important;
  transform: none !important;
}

.rules {
  position: relative !important;
  transform: none !important;
  overflow: visible !important;
}

.audience {
  position: relative !important;
  margin-top: 60px !important;
  transform: none !important;
  overflow: visible !important;
  z-index: 5 !important;
}

.private {
  position: relative !important;
  transform: none !important;
  margin-top: 40px !important;
}

.spot-fifth-wrap {
  margin-top: 40px !important;
}

.faq-wrapper {
  position: relative !important;
  width: 100% !important;
  margin-top: 60px !important;
  margin-bottom: 40px !important;
  transform: none !important;
}

.faq {
  position: relative !important;
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 60px 24px !important;
  padding-inline: 24px !important;
  box-sizing: border-box !important;
  transform: none !important;
}

.faq-inner {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 340px 1fr !important;
  column-gap: 50px !important;
  row-gap: 30px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.faq-heading {
  position: sticky !important;
  top: 100px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(32px, 3.5vw, 48px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #fff !important;
}

.faq-list {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  transform: none !important;
}

.faq-item {
  position: relative !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  padding: 22px 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.faq-item summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  font-size: clamp(16px, 1.2vw, 20px) !important;
  font-weight: 600 !important;
  color: #fff !important;
  line-height: 1.4 !important;
  gap: 20px !important;
  user-select: none !important;
}

.faq-item summary::-webkit-details-marker {
  display: none !important;
}

.faq-item summary::marker {
  display: none !important;
}

.faq-item p {
  margin: 16px 0 8px 0 !important;
  padding-right: 20px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.faq-toggle {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: rgba(142, 68, 173, 0.4) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.faq-item summary:hover .faq-toggle {
  background: rgba(168, 85, 247, 0.7) !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.5) !important;
}

.faq-icon {
  width: 14px !important;
  height: 14px !important;
  filter: brightness(0) invert(1) !important;
}

@media (max-width: 900px) {
  .faq {
    padding: 40px 16px !important;
    padding-inline: 16px !important;
  }
  .faq-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .faq-heading {
    position: static !important;
  }
}

/* --- 6. FAQ SECTION --- */
.faq {
  position: relative !important;
  padding: 60px 20px !important;
  overflow: visible !important;
}

.faq-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-bottom: 16px !important;
}

.faq-item summary {
  font-family: var(--font-heading), 'Oswald', sans-serif !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: var(--white) !important;
}

.faq-item summary::-webkit-details-marker {
  display: none !important;
}

.faq-item p {
  font-family: var(--font-body), sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-top: 12px !important;
}

/* --- 7. CONTACTS SECTION --- */
.club-contacts {
  position: relative !important;
  padding: 60px 20px 40px !important;
  overflow: visible !important;
  transform: none !important;
  margin-top: 20px !important;
}

.club-contacts-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  max-width: 900px !important;
  margin: 30px auto 0 !important;
}

.club-contacts-item {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  padding: 28px 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.club-contacts-city {
  font-family: var(--font-heading), 'Oswald', sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--white) !important;
  margin: 0 0 6px !important;
}

.club-contacts-phone {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-decoration: none !important;
  margin: 8px 0 14px !important;
  display: inline-block !important;
}

.club-contacts-socials {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.club-contacts-social {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.2s ease, background 0.2s ease !important;
}

.club-contacts-social:hover {
  transform: scale(1.08) !important;
  background: rgba(168, 85, 247, 0.2) !important;
}

/* --- 8. CTA FINAL SECTION --- */
.cta-final {
  position: relative !important;
  padding: 60px 20px 0 !important;
  overflow: visible !important;
  transform: none !important;
  text-align: center !important;
  margin-top: 40px !important;
}

.cta-inner {
  position: relative !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.cta-title {
  font-family: var(--font-heading), 'Oswald', sans-serif !important;
  font-size: clamp(32px, 5vw, 64px) !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  transform: none !important;
}

.cta-title-stack {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.cta-title-line {
  display: block !important;
}

.cta-title-line--wide {
  display: block !important;
}

.cta-title-line--narrow {
  display: none !important;
}

.cta-subtitle-line--wide {
  display: block !important;
}

.cta-subtitle-line--narrow {
  display: none !important;
}

.cta-subtitle {
  position: relative !important;
  margin: 16px auto 28px !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.5 !important;
  max-width: 500px !important;
}

.cta-inner .btn.btn-purple {
  display: inline-flex !important;
  position: relative !important;
  z-index: 5 !important;
  margin: 0 auto !important;
}

.cta-raccoon {
  position: relative !important;
  max-width: 380px !important;
  margin: 40px auto 0 !important;
  line-height: 0 !important;
  z-index: 2 !important;
}

.cta-raccoon-img {
  width: 100% !important;
  height: auto !important;
  max-height: 380px !important;
  object-fit: contain !important;
  display: block !important;
}

/* --- 9. SITE FOOTER --- */
.site-footer {
  position: relative !important;
  padding: 40px 20px 30px !important;
  overflow: hidden !important;
  transform: none !important;
  margin-top: 20px !important;
  z-index: 3 !important;
  background: rgba(10, 6, 16, 0.95) !important;
}

.footer-divider {
  width: 100% !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  margin-bottom: 30px !important;
}

.footer-inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

.footer-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.footer-logo-img {
  width: 200px !important;
  height: auto !important;
}

.footer-contact {
  text-align: right !important;
}

.footer-contact-label {
  font-size: 13px !important;
  color: var(--muted) !important;
  margin: 0 0 4px !important;
}

.footer-phone {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-decoration: none !important;
}

.footer-bottom {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.footer-docs {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.footer-docs a {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.footer-docs a:hover {
  color: var(--gold) !important;
}

.footer-legal {
  display: flex !important;
  gap: 24px !important;
}

.footer-legal-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.footer-legal-label {
  font-size: 11px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
}

.footer-legal-value {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* --- 2. HERO SECTION & BUTTON ALIGNMENT --- */
.hero {
  position: relative !important;
  overflow: visible !important;
}

.hero .btn.btn-purple {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* --- 5. ABOUT SECTION: PROPORTIONAL CINEMATIC VIDEO & ACCENTS --- */
.about {
  display: block !important;
  position: relative !important;
  z-index: 4 !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 40px auto 60px !important;
  padding: 0 20px !important;
  height: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.about-inner {
  position: relative !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.about-media {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 1200px !important;
  height: 600px !important;
  margin: 0 auto !important;
  border-radius: 48px !important;
  overflow: hidden !important;
  box-shadow: 0 0 28px rgba(164, 73, 245, 0.8), 0 0 140px 28px rgba(164, 73, 245, 0.6) !important;
  background: #1a0a24 !important;
  z-index: 2 !important;
}

.about-media-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(10, 5, 20, 0.35) 45%, rgba(10, 5, 20, 0.88) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.about-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center bottom !important;
  display: block !important;
}

.about-title {
  position: absolute !important;
  top: auto !important;
  bottom: 36px !important;
  left: 44px !important;
  right: 44px !important;
  max-width: 650px !important;
  margin: 0 !important;
  z-index: 5 !important;
  font-family: var(--second-family) !important;
  font-weight: 500 !important;
  font-size: clamp(30px, 3.8vw, 54px) !important;
  line-height: 106% !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--white) !important;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9) !important;
  transform: none !important;
}

.about-title-line {
  display: block !important;
}

.about-title-line--gold {
  color: var(--gold) !important;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9) !important;
}

.about-stats {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 50px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 44px auto 0 !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
}

.about-stat {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
}

.about-stat:nth-child(2) {
  left: auto !important;
  width: 100% !important;
  margin: 0 !important;
}

.about-stat-title {
  margin: 0 0 14px !important;
  font-family: var(--second-family) !important;
  font-weight: 500 !important;
  font-size: clamp(24px, 2.4vw, 34px) !important;
  line-height: 120% !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
}

.about-stat-text {
  margin: 0 !important;
  font-family: var(--font-family) !important;
  font-weight: 400 !important;
  font-size: clamp(14px, 1.15vw, 17px) !important;
  line-height: 155% !important;
  color: var(--white-dim) !important;
}

@media (max-width: 768px) {
  .about {
    margin: 20px auto 40px !important;
    padding: 0 16px !important;
  }
  .about-media {
    height: clamp(240px, 55vw, 380px) !important;
    border-radius: 24px !important;
  }
  .about-title {
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    font-size: clamp(22px, 5.2vw, 32px) !important;
  }
  .about-stats {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-top: 28px !important;
  }
}


/* --- 7. CORPORATE & PRIVATE EVENTS (#private) --- */
.private {
  position: relative !important;
  overflow: visible !important;
  padding: 50px 120px 120px !important;
  margin-top: 120px !important;
  text-align: center !important;
  isolation: isolate !important;
  display: block !important;
  transform: none !important;
}

.private::before,
.private::after {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.private::after {
  content: "" !important;
  inset: -80px -10% -120px !important;
  background: radial-gradient(70% 55% at 70% 35%, rgba(242, 182, 38, 0.28) 0%, rgba(242, 182, 38, 0.12) 38%, transparent 68%),
              radial-gradient(60% 50% at 25% 70%, rgba(242, 182, 38, 0.18) 0%, rgba(242, 182, 38, 0.06) 42%, transparent 70%),
              radial-gradient(80% 45% at 50% 90%, rgba(242, 182, 38, 0.14) 0%, transparent 65%) !important;
}

.private::before {
  content: "" !important;
  inset: -279px auto -220px 50% !important;
  width: 1231px !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  background: url("../images/corporates.webp") center top / 1231px auto no-repeat !important;
  opacity: 0.96 !important;
  filter: brightness(1.52) saturate(1.14) !important;
  mask-image: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 78%, rgba(0, 0, 0, 0.88) 90%, rgba(0, 0, 0, 0.62) 97%, rgba(0, 0, 0, 0.38) 100%) !important;
}

.private-title {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(1020px, 100%) !important;
  max-width: 100% !important;
  margin: 0 auto 36px !important;
  font-family: var(--second-family, 'Oswald', sans-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(36px, 4.5vw, 78px) !important;
  line-height: 103% !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

.private-title-block {
  display: flex !important;
  flex-direction: column !important;
  width: max-content !important;
  max-width: 100% !important;
}

.private-title-block--left {
  align-self: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  color: var(--accent-yellow, #f2b626) !important;
}

.private-title-block--right {
  align-self: flex-end !important;
  align-items: flex-end !important;
  text-align: right !important;
  margin-top: 45px !important;
  color: var(--white, #fff) !important;
}

.private-title-line {
  display: block !important;
  white-space: nowrap !important;
}

.private-title-line--mobile {
  display: none !important;
}

.private-title-line--yellow {
  color: var(--accent-yellow, #f2b626) !important;
}

.private-title-line--white {
  color: var(--white, #fff) !important;
}

.private-title-dash {
  display: inline-block !important;
  font-size: 0.62em !important;
  line-height: 1 !important;
  vertical-align: 0.12em !important;
  font-weight: 500 !important;
}

.private-cards {
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0px, 1fr)) !important;
  width: min(1020px, 100%) !important;
  margin: 0 auto 64px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  gap: 0 !important;
}

@media (min-width: 1200px) {
  .private-cards {
    position: absolute !important;
    top: 772px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 1020px !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  .private > .btn,
  .private-cta {
    position: absolute !important;
    z-index: 4 !important;
    top: 1080px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 40px 0 0 !important;
  }
}

.private-cards .private-card {
  border-radius: 0 !important;
}

.private-cards .private-card:first-child {
  border-radius: 8px 0px 0px 8px !important;
}

.private-cards .private-card:last-child {
  border-radius: 0px 8px 8px 0px !important;
}

.private-card {
  --private-icon-width: 150px;
  width: 100% !important;
  min-width: 0px !important;
  min-height: 278px !important;
  padding: 62px max(20px, calc((100% - var(--private-icon-width)) / 2)) !important;
  border-radius: 0px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px !important;
  text-align: center !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease !important;
}

.private-card:hover {
  filter: brightness(1.06) saturate(1.05) !important;
  transform: translateY(-2px) !important;
}

.private-card h3 {
  margin: 0px !important;
  font-family: var(--font-family, 'Tektur', sans-serif) !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 144% !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--black, #141414) !important;
  white-space: normal !important;
}

.private-icon {
  width: 150px !important;
  height: 120px !important;
  min-width: 150px !important;
  min-height: 120px !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}

.private-card-beige {
  background: rgb(220, 201, 168) !important;
  color: var(--black, #141414) !important;
}

.private-card-yellow {
  background: rgb(232, 184, 48) !important;
  color: var(--black, #141414) !important;
}

.private-card-purple {
  background: rgb(155, 77, 255) !important;
  color: var(--black, #141414) !important;
}

.private > .btn,
.private-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 70px !important;
  border-radius: 8px !important;
  background: rgb(164, 73, 245) !important;
  box-shadow: 0 0 100px 0 rgba(164, 73, 245, 0.95), 0 0 42px 0 rgba(164, 73, 245, 0.88) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  font-family: var(--second-family, 'Oswald', sans-serif) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 133% !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.private-cta:hover {
  background: rgb(178, 92, 255) !important;
  box-shadow: 0 0 120px 0 rgba(164, 73, 245, 1), 0 0 50px 0 rgba(164, 73, 245, 0.95) !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 900px) {
  .private {
    padding-inline: 30px !important;
    margin-top: 60px !important;
  }
  .private-title {
    margin-bottom: 24px !important;
    font-size: clamp(28px, 7vw, 48px) !important;
  }
  .private-title-block--left,
  .private-title-block--right {
    width: 100% !important;
    max-width: 100% !important;
  }
  .private-title-block--right {
    align-self: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin-top: 16px !important;
  }
  .private-title-line {
    white-space: normal !important;
  }
}

/* --- 8. 1-STEP QUICK BOOKING MODAL --- */
.quick-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: rgba(8, 8, 10, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.quick-modal[aria-hidden="false"] {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.quick-modal__dialog {
  position: relative !important;
  width: 100% !important;
  max-width: 440px !important;
  background: #141418 !important;
  border: 1px solid rgba(164, 73, 245, 0.4) !important;
  border-radius: 18px !important;
  padding: 36px 30px !important;
  box-shadow: 0 0 50px rgba(164, 73, 245, 0.35) !important;
}

.quick-modal__close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px !important;
}

.quick-modal__title {
  font-family: var(--second-family) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin: 0 0 8px !important;
}

.quick-modal__subtitle {
  font-family: var(--font-family) !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  margin: 0 0 20px !important;
  line-height: 1.45 !important;
}

.quick-modal__field label,
.quick-modal label {
  display: block !important;
  font-family: var(--second-family, 'Oswald', sans-serif) !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #dcc9a8 !important;
  margin-bottom: 6px !important;
}

.quick-modal__input,
.quick-modal input[type="text"],
.quick-modal input[type="tel"],
.quick-modal input[type="number"],
.quick-modal select,
.quick-modal textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 13px 16px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  color: #fff !important;
  margin-top: 4px !important;
  margin-bottom: 14px !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.quick-modal__input:focus,
.quick-modal input:focus,
.quick-modal select:focus,
.quick-modal textarea:focus {
  outline: none !important;
  border-color: var(--purple, #a449f5) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 16px rgba(164, 73, 245, 0.4) !important;
}

.quick-modal select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23dcc9a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 40px !important;
  cursor: pointer !important;
}

.quick-modal select option {
  background: #17161c !important;
  color: #fff !important;
  padding: 10px !important;
}

.quick-modal__consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  line-height: 1.4 !important;
  margin-bottom: 20px !important;
}

.quick-modal__consent input {
  margin-top: 2px !important;
  accent-color: var(--purple) !important;
}

.quick-modal__consent a {
  color: var(--gold) !important;
  text-decoration: underline !important;
}

.quick-modal__btn {
  width: 100% !important;
  padding: 15px 20px !important;
}

.quick-modal__success {
  text-align: center !important;
  padding: 10px 0 !important;
}

.quick-modal__success-icon {
  font-size: 48px !important;
  margin-bottom: 14px !important;
}

.quick-modal__success h3 {
  font-family: var(--second-family) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  color: #fff !important;
  margin: 0 0 10px !important;
}

.quick-modal__success p {
  font-size: 14px !important;
  color: var(--muted) !important;
  line-height: 1.5 !important;
  margin-bottom: 22px !important;
}

/* ==============================================================================
   RESPONSIVE UX POLISH (MOBILE)
   ============================================================================== */

@media (max-width: 768px) {
  /* Compact Site Header */
  .site-header {
    padding: 10px 16px !important;
    height: 60px !important;
  }

  .site-logo-img {
    width: 130px !important;
    height: auto !important;
  }

  .header-callback {
    display: none !important;
  }

  .site-menu-btn {
    height: 40px !important;
    padding: 4px 10px !important;
  }

  /* About Video Card */
  .about {
    padding: 30px 14px !important;
  }

  .about-media {
    border-radius: 18px !important;
    min-height: 280px !important;
  }

  .about-title {
    font-size: 24px !important;
    bottom: 20px !important;
    left: 16px !important;
    right: 16px !important;
  }

  /* Fix gap before Rules */
  .features-inner {
    min-height: auto !important;
  }
  .story-games-wrap > .rules,
  .rules {
    margin-top: -150px !important;
    transform: none !important;
  }

  /* Mobile Private Section */
  .private {
    margin-top: 40px !important;
    transform: none !important;
    position: relative !important;
    z-index: 7 !important;
    padding-inline: 0px !important;
    padding-top: 20px !important;
    padding-bottom: 60px !important;
  }

  .private::before {
    left: 50% !important;
    right: auto !important;
    width: 947px !important;
    transform: translateX(-40%) translateY(-100px) !important;
    background-size: 947px auto !important;
  }

  .private-title {
    font-family: var(--second-family, 'Oswald', sans-serif) !important;
    font-weight: 500 !important;
    font-size: 44px !important;
    line-height: 100% !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-inline: 15px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .private-title-block--right {
    align-self: flex-end !important;
    align-items: flex-end !important;
    text-align: right !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-top: 20px !important;
  }

  .private-title-line--desk {
    display: none !important;
  }

  .private-title-line--mobile {
    display: block !important;
    white-space: nowrap !important;
  }

  .private-cards {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 36px !important;
    margin-bottom: 0px !important;
    padding: 15px 15px 0px !important;
    box-sizing: border-box !important;
    border-radius: 0px !important;
    overflow: visible !important;
    transform: none !important;
    gap: 0 !important;
  }

  .private-cards .private-card:nth-child(1) {
    order: 3 !important;
    border-radius: 0px 0px 10px 10px !important;
    padding: 45px 65px 35px !important;
  }

  .private-cards .private-card:nth-child(1) h3 {
    white-space: normal !important;
  }

  .private-cards .private-card:nth-child(1) .private-icon {
    width: 65px !important;
    height: 75px !important;
    min-width: 80px !important;
    min-height: 60px !important;
  }

  .private-cards .private-card:nth-child(2) {
    order: 2 !important;
    border-radius: 0 !important;
  }

  .private-cards .private-card:nth-child(3) {
    order: 1 !important;
    border-radius: 10px 10px 0px 0px !important;
    gap: 10px !important;
  }

  .private-card {
    width: 100% !important;
    min-height: auto !important;
    padding: 30px 65px 20px !important;
    gap: 5px !important;
  }

  .private-icon {
    width: 120px !important;
    height: 90px !important;
    min-width: 120px !important;
    min-height: 90px !important;
  }

  .private > .btn,
  .private-cta {
    width: calc(100% - 30px) !important;
    max-width: none !important;
    margin: 40px 15px 0 !important;
    padding-inline: 25px !important;
    box-sizing: border-box !important;
    transform: none !important;
    position: relative !important;
    z-index: 3 !important;
    font-size: 16px !important;
    font-family: var(--second-family, 'Oswald', sans-serif) !important;
    font-weight: 500 !important;
    line-height: 138% !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--white, #fff) !important;
    box-shadow: 0 0 100px 0 rgba(164, 73, 245, 0.95), 0 0 42px 0 rgba(164, 73, 245, 0.88) !important;
  }

  /* Mobile FAQ */
  .faq {
    padding: 40px 14px !important;
  }

  .faq-heading {
    font-size: clamp(32px, 8vw, 48px) !important;
    line-height: 1.05 !important;
    margin-bottom: 20px !important;
  }

  .faq-item summary {
    font-size: 17px !important;
    padding: 4px 0 !important;
  }

  .faq-item p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Mobile Contacts */
  .club-contacts {
    padding: 40px 14px !important;
    margin-top: 10px !important;
  }

  .club-contacts-title {
    font-size: clamp(36px, 9vw, 52px) !important;
    line-height: 1.05 !important;
    margin-bottom: 24px !important;
  }

  .club-contacts-list {
    grid-template-columns: 1fr !important;
    max-width: 380px !important;
    gap: 16px !important;
    margin: 0 auto !important;
  }

  .club-contacts-item {
    width: 100% !important;
    padding: 22px 18px !important;
    border-radius: 16px !important;
  }

  .club-contacts-city {
    font-size: 20px !important;
  }

  .club-contacts-phone {
    font-size: 17px !important;
  }

  /* Mobile CTA Final */
  .cta-final {
    padding: 40px 14px 0 !important;
    margin-top: 20px !important;
  }

  .cta-title {
    font-size: clamp(30px, 8vw, 44px) !important;
    margin-bottom: 12px !important;
    transform: none !important;
  }

  .cta-title-line--wide {
    display: none !important;
  }

  .cta-title-line--narrow {
    display: block !important;
  }

  .cta-subtitle-line--wide {
    display: none !important;
  }

  .cta-subtitle-line--narrow {
    display: block !important;
  }

  .cta-subtitle {
    position: relative !important;
    margin: 14px auto 24px !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .cta-inner .btn.btn-purple {
    margin: 0 auto !important;
    position: relative !important;
    z-index: 5 !important;
  }

  .cta-raccoon {
    max-width: 250px !important;
    margin-top: 36px !important;
    margin-inline: auto !important;
    transform: none !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .cta-raccoon-img {
    width: 100% !important;
    max-width: 250px !important;
    max-height: 250px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Mobile Footer */
  .site-footer {
    padding: 30px 14px 24px !important;
    margin-top: 10px !important;
  }

  .footer-inner {
    gap: 24px !important;
  }

  .footer-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .footer-contact {
    text-align: left !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding-top: 16px !important;
  }

  .footer-legal {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ==============================================================================
   RESPONSIVE SECTION SPACING & GALLERY CONTAINER NORMALIZATION (TABLET & MOBILE)
   Eliminates all 300px+ empty black voids and toxic translateY cascade
   ============================================================================== */
@media (max-width: 990px) {
  /* Reset all toxic transforms across all sections */
  #experience,
  .gallery-1,
  .features,
  .rules,
  .story-games-wrap > .rules,
  .gallery-2,
  .faq-wrapper,
  #faq,
  #contacts,
  .cta-final {
    transform: none !important;
  }

  /* Fix Gallery 1 box height to match its scale(0.5) visual height */
  .gallery.gallery-1 {
    height: 380px !important;
    min-height: 0 !important;
    margin-top: 15px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  .gallery.gallery-1 .gallery-marquee {
    height: 380px !important;
    min-height: 0 !important;
  }

  /* Experience section clean margins */
  #experience {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
  }

  /* Features section clean margins */
  .features {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Rules section clean margins */
  .rules,
  .story-games-wrap > .rules {
    margin-top: -150px !important;
    margin-bottom: 0 !important;
  }

  /* Fix Gallery 2 box height to match its scale(0.51) visual height */
  .gallery.gallery-2 {
    height: 350px !important;
    min-height: 0 !important;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  .gallery.gallery-2 .gallery-marquee {
    height: 350px !important;
    min-height: 0 !important;
  }

  /* FAQ clean margins */
  .faq-wrapper {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
  }
  #faq {
    padding-top: 20px !important;
    padding-bottom: 30px !important;
  }

  /* Contacts and CTA */
  #contacts {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  .cta-final {
    padding-top: 30px !important;
    margin-top: 10px !important;
  }
}