/* Design Tokens & Theme Variables */
:root {
    --bg-dark: #05050d;
    --bg-card: rgba(13, 13, 33, 0.65);
    --bg-nav: rgba(5, 5, 13, 0.75);
    
    --color-cyan: #00e5ff;
    --color-magenta: #ff007f;
    --color-violet: #7a00ff;
    --color-gold: #ffd700;
    
    --text-main: #ffffff;
    --text-muted: #b5b5c9;
    --text-cyan-glow: 0 0 10px rgba(0, 229, 255, 0.5), 0 0 20px rgba(0, 229, 255, 0.2);
    --text-magenta-glow: 0 0 10px rgba(255, 0, 127, 0.5), 0 0 20px rgba(255, 0, 127, 0.2);
    
    --border-glass: rgba(255, 255, 255, 0.08);
    --border-glow-cyan: 0 0 15px rgba(0, 229, 255, 0.3);
    --border-glow-magenta: 0 0 15px rgba(255, 0, 127, 0.3);
    
    --font-outfit: 'Outfit', sans-serif;
    --font-playfair: 'Playfair Display', serif;
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

/* Nav links jump to #anchors; stop short of the fixed navbar so the
   section heading isn't hidden under it. */
html {
    scroll-padding-top: 72px;
}

/* Native dropdown lists ignore the page theme and fall back to white,
   which hid the white option text. */
select {
    color-scheme: dark;
}
select option,
select optgroup {
    background-color: #0b0b1f;
    color: #fff;
}

/* Date & time fields: the browser draws their calendar / clock icon black,
   which vanished on the dark fields. Dark scheme for the picker that opens;
   the icon itself forced to white (black -> invert). */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    color-scheme: dark;
}
input::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1);
    opacity: 0.85;
    cursor: pointer;
}
input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-outfit);
    /* Playfair Display draws old-style figures by default (the 9 in "The 9
       Dimensions" drops below the line); level numbers everywhere. */
    font-variant-numeric: lining-nums;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Starfield Canvas Background */
#starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -99;
    pointer-events: none;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
    background: rgba(122, 0, 255, 0.3);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-violet);
}

/* Layout Elements */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.max-w-md {
    max-width: 800px;
}

.section {
    padding: 100px 0;
    position: relative;
    z-index: 1;
}

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

.section-tag {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--color-cyan);
    text-shadow: var(--text-cyan-glow);
    margin-bottom: 12px;
    display: inline-block;
}

.section-title {
    font-family: var(--font-playfair);
    font-size: 2.8rem;
    font-weight: 500;
    margin-bottom: 24px;
    letter-spacing: 1px;
}

.section-desc {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 650px;
    margin-bottom: 20px;
    font-weight: 300;
}

.subtitle-desc {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 50px auto;
    font-weight: 300;
}

/* Grid helper */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Premium Buttons & Animations */
.cta-btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: none;
}

.shimmer-btn {
    background: linear-gradient(120deg, var(--color-violet), var(--color-magenta), var(--color-cyan), var(--color-violet));
    background-size: 300% 100%;
    color: white;
    box-shadow: 0 4px 15px rgba(122, 0, 255, 0.4);
    animation: shimmer 8s linear infinite;
}

.shimmer-btn:hover {
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.7);
    transform: translateY(-2px);
}

.secondary-btn {
    background: transparent;
    border: 1px solid var(--border-glass);
    color: white;
    backdrop-filter: blur(10px);
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-cyan);
    box-shadow: var(--border-glow-cyan);
    transform: translateY(-2px);
}

@keyframes shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* Sticky Blurred Glass Navigation Bar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: var(--bg-nav);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-glass);
    transition: var(--transition-smooth);
}

/* Near-opaque once scrolled, so the blur isn't visible but still cost a re-blur every frame */
.navbar.scrolled {
    padding: 10px 0;
    background-color: rgba(5, 5, 13, 0.95);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.nav-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Brand mark (assets/logo.webp) with the name beneath it. */
.logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    line-height: 1;
}

.logo-img {
    display: block;
    height: 44px;
    width: auto;
}

.logo-img.logo-sm { height: 36px; }
.logo-img.logo-lg { height: 72px; }

.logo-name {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #fff;
    white-space: nowrap; /* keep "Infinity-Z" from breaking at the hyphen */
}

.logo-name span {
    color: var(--color-cyan);
    text-shadow: var(--text-cyan-glow);
}

.logo-img.logo-sm + .logo-name { font-size: 0.68rem; }
.logo-img.logo-lg + .logo-name { font-size: 1.15rem; }

.nav-links {
    display: flex;
    gap: 32px;
}

.nav-item {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 400;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
    position: relative;
    padding: 6px 0;
}

.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-cyan), var(--color-magenta));
    transition: var(--transition-smooth);
}

.nav-item:hover {
    color: white;
}

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

.nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.menu-toggle {
    display: none;
    flex: 0 0 auto; /* never squeezed, or the bars go out of line */
    width: 40px;
    height: 40px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* Three bars of the same size on the same left edge: the middle one is the
   span, the others its ::before / ::after, 7px above and below. */
.hamburger,
.hamburger::before,
.hamburger::after {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: white;
    transition: var(--transition-smooth);
}

.hamburger {
    position: relative;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
}

.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; }

/* Mobile Menu Show States */
.menu-open .hamburger { background: transparent; }
.menu-open .hamburger::before { transform: rotate(45deg); top: 0; }
.menu-open .hamburger::after { transform: rotate(-45deg); top: 0; }

/* Hero Section */
/* At least one screen tall, and taller when the content needs it, so nothing
   is cut off under the fixed navbar or past the bottom on short screens.
   svh: the screen with the mobile browser's bars showing. */
.hero-section {
    min-height: 100vh;
    min-height: 100svh;
    padding: 110px 0 70px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-align: center;
}

/* Cosmic hero canvas — full-bleed, behind hero content */
.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(5,5,13,0.3) 0%, rgba(5,5,13,0.85) 90%);
    z-index: -1;
}

.hero-content {
    z-index: 10;
    max-width: 900px;
    padding: 0 24px;
}

.hero-title {
    font-family: var(--font-playfair);
    font-size: 4.8rem;
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 20px;
    color: white;
}

.hero-title .highlight {
    background: linear-gradient(90deg, var(--color-cyan), var(--color-magenta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.animate-glow {
    text-shadow: 0 0 40px rgba(122, 0, 255, 0.2);
}

.hero-subtitle {
    font-size: 1.3rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 50px;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.hero-btn {
    padding: 16px 48px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* Scroll indicator bounce */
.scroll-indicator {
    display: inline-block;
    width: 30px;
    height: 50px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    position: relative;
    margin-top: 20px;
}

.scroll-indicator::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 6px;
    height: 10px;
    background-color: var(--color-cyan);
    border-radius: 3px;
    transform: translateX(-50%);
    animation: scroll-bounce 1.5s infinite;
}

@keyframes scroll-bounce {
    0% { top: 8px; opacity: 1; }
    100% { top: 25px; opacity: 0; }
}

/* "Swipe down" hint for touch screens, in place of the mouse: a finger
   dragging down the screen. Pinned to the bottom of the first screen and
   gone once the visitor scrolls (main.js). */
.swipe-hint {
    display: none;
}

.swipe-track {
    position: relative;
    width: 30px;
    height: 44px;
}

/* The line the finger draws as it drags down */
.swipe-track::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 3px;
    width: 2px;
    height: 0;
    border-radius: 2px;
    background: linear-gradient(to bottom, rgba(0, 229, 255, 0), var(--color-cyan));
    transform: translateX(-50%);
    animation: swipe-trail 1.8s ease-in-out infinite;
}

.swipe-finger {
    position: absolute;
    top: 0;
    left: 50%;
    width: 26px;
    height: 26px;
    margin-left: -10px; /* the fingertip, not the hand, sits on the line */
    color: white;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.7));
    animation: swipe-finger 1.8s ease-in-out infinite;
}

@keyframes swipe-finger {
    0%   { transform: translateY(-2px); opacity: 0; }
    15%  { opacity: 1; }
    70%  { transform: translateY(16px); opacity: 1; }
    100% { transform: translateY(20px); opacity: 0; }
}

@keyframes swipe-trail {
    0%   { height: 0; opacity: 0; }
    15%  { opacity: 0.9; }
    70%  { height: 18px; opacity: 0.9; }
    100% { height: 20px; opacity: 0; }
}

/* About / Story Section styling */
.about-section {
    background: linear-gradient(180deg, rgba(5,5,13,0) 0%, rgba(13,13,33,0.4) 100%);
}

.about-image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.glow-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    z-index: 5;
    box-shadow: inset 0 0 20px rgba(122, 0, 255, 0.1);
    pointer-events: none;
    transition: var(--transition-smooth);
}

.about-image-wrapper:hover .glow-border {
    border-color: var(--color-cyan);
    box-shadow: inset 0 0 25px rgba(0, 229, 255, 0.2), 0 0 30px rgba(0, 229, 255, 0.1);
}

.about-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    animation: imageBreathing 24s ease-in-out infinite;
}

.about-image-wrapper:hover .about-img {
    transform: scale(1.08) translate(-2px, -2px);
}

/* Zones Slider styling */
.zones-section {
    background: linear-gradient(180deg, rgba(13,13,33,0.4) 0%, rgba(5,5,13,0.6) 100%);
    overflow: hidden;
}

.zones-carousel-container {
    position: relative;
    width: 100%;
    max-width: 1300px;
    margin: 50px auto 0 auto;
    padding: 0 60px;
}

.zones-track-wrapper {
    overflow-x: auto;
    scroll-behavior: smooth;
    display: flex;
    scrollbar-width: none; /* Firefox */
}

.zones-track-wrapper::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.zones-track {
    display: flex;
    gap: 30px;
    padding: 20px 0;
}

.zone-card {
    flex: 0 0 380px;
    /* Opaque enough to stand in for a backdrop blur, which re-blurred every frame over the animated starfield */
    background: rgba(13, 13, 33, 0.85);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    overflow: hidden;
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.1s ease;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.zone-card:hover {
    border-color: var(--color-cyan);
    box-shadow: 0 15px 35px rgba(0, 229, 255, 0.25), 0 5px 15px rgba(0,0,0,0.4);
}

.zone-img-box {
    width: 100%;
    height: 260px;
    overflow: hidden;
    position: relative;
}

.zone-img-box img,
.zone-img-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: scale(1.03);
}

.zone-card:not(.hovered) .zone-img-box img {
    animation: imageBreathing 20s ease-in-out infinite;
}

.zone-card:nth-child(1) .zone-img-box img { animation-duration: 22s; animation-delay: -1s; }
.zone-card:nth-child(2) .zone-img-box img { animation-duration: 18s; animation-delay: -4s; }
.zone-card:nth-child(3) .zone-img-box img { animation-duration: 26s; animation-delay: -2s; }
.zone-card:nth-child(4) .zone-img-box img { animation-duration: 21s; animation-delay: -6s; }
.zone-card:nth-child(5) .zone-img-box img { animation-duration: 25s; animation-delay: -3s; }
.zone-card:nth-child(6) .zone-img-box img { animation-duration: 19s; animation-delay: -5s; }

.zone-img-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    /* Plain alpha, not mix-blend-mode: a blend re-composited against the zooming image every frame */
    background: radial-gradient(circle, rgba(0, 229, 255, 0.10) 0%, rgba(255, 0, 127, 0.04) 50%, transparent 100%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: lightDrift 15s ease-in-out infinite alternate;
}

@keyframes imageBreathing {
    0% { transform: scale(1.03) translate(0, 0); }
    50% { transform: scale(1.09) translate(-1px, -2px); }
    100% { transform: scale(1.03) translate(0, 0); }
}

@keyframes lightDrift {
    0% { transform: translate(-30%, -30%) rotate(0deg); }
    50% { transform: translate(-60%, -40%) rotate(180deg); }
    100% { transform: translate(-30%, -50%) rotate(360deg); }
}

.zone-content {
    padding: 30px;
    flex-grow: 1;
}

.zone-num {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-magenta);
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.zone-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: white;
    margin-bottom: 12px;
    transition: var(--transition-smooth);
}

.zone-card:hover .zone-title {
    color: var(--color-cyan);
    text-shadow: var(--text-cyan-glow);
}

.zone-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 300;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(13,13,33,0.8);
    border: 1px solid var(--border-glass);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-smooth);
}

.carousel-control:hover {
    background: var(--color-violet);
    border-color: var(--color-cyan);
    box-shadow: var(--border-glow-cyan);
}

.carousel-control.prev { left: 5px; }
.carousel-control.next { right: 5px; }

/* Testimonials section */
.reviews-section {
    background: linear-gradient(180deg, rgba(5,5,13,0.6) 0%, rgba(13,13,33,0.3) 100%);
}

.reviews-slider-container {
    max-width: 850px;
    margin: 60px auto 0 auto;
    overflow: hidden;
    position: relative;
    padding: 0 20px;
}

.reviews-wrapper {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.review-card {
    flex: 0 0 100%;
    padding: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    text-align: center;
}

.stars-rating {
    color: var(--color-gold);
    font-size: 1.4rem;
    margin-bottom: 20px;
    letter-spacing: 4px;
}

.review-quote {
    font-size: 1.3rem;
    font-family: var(--font-playfair);
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 25px;
    font-weight: 300;
}

.review-author {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-cyan);
}

.offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.offer-card {
    padding: 30px;
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.offer-card h3 {
    /* Offers often carry dates and prices, so a sans with plain numbers. */
    font-family: var(--font-outfit);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-gold);
    margin-bottom: 10px;
}

.offer-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.offer-card .offer-ends {
    margin-top: 14px;
    color: var(--color-cyan);
    font-size: 0.85rem;
    font-weight: 600;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.dot.active {
    background: var(--color-cyan);
    box-shadow: var(--border-glow-cyan);
    width: 24px;
    border-radius: 5px;
}

/* Directions & Map styling */
.directions-section {
    background: linear-gradient(180deg, rgba(13,13,33,0.3) 0%, rgba(5,5,13,0.8) 100%);
}

.info-block {
    margin-top: 35px;
}

.info-block h4 {
    font-size: 1.2rem;
    color: var(--color-magenta);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-block p {
    font-size: 1.05rem;
    color: var(--text-muted);
    font-weight: 300;
}

.small-note {
    font-size: 0.85rem !important;
    margin-top: 6px;
    opacity: 0.7;
}

.map-mockup {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 350px;
}

.map-inner {
    width: 100%;
    height: 100%;
    background: #0d0d21;
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

.map-marker {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.marker-pulse {
    position: absolute;
    width: 40px;
    height: 40px;
    background: var(--color-cyan);
    border-radius: 50%;
    opacity: 0.4;
    animation: marker-glow-pulse 2s infinite;
}

.marker-dot {
    width: 12px;
    height: 12px;
    background: var(--color-cyan);
    border-radius: 50%;
    z-index: 2;
    box-shadow: var(--text-cyan-glow);
}

@keyframes marker-glow-pulse {
    0% { transform: scale(0.3); opacity: 0.8; }
    100% { transform: scale(2.2); opacity: 0; }
}

.map-label {
    position: absolute;
    bottom: 30px;
    background: rgba(5,5,13,0.9);
    border: 1px solid var(--color-cyan);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: var(--border-glow-cyan);
}

/* FAQ accordion styling */
.faqs-section {
    background-color: var(--bg-dark);
}

.accordion {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.accordion-item {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: var(--transition-smooth);
}

.accordion-item:hover {
    border-color: rgba(122,0,255,0.4);
}

.accordion-header {
    width: 100%;
    padding: 24px;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-outfit);
}

.accordion-header .icon {
    font-size: 1.3rem;
    color: var(--color-cyan);
    transition: var(--transition-smooth);
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease;
    padding: 0 24px;
}

.accordion-body p {
    color: var(--text-muted);
    font-size: 0.95rem;
    padding-bottom: 24px;
    font-weight: 300;
}

.accordion-item.active {
    border-color: var(--color-cyan);
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.05);
}

.accordion-item.active .accordion-header .icon {
    transform: rotate(45deg);
    color: var(--color-magenta);
}

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

/* Footer Section */
.main-footer {
    border-top: 1px solid var(--border-glass);
    background-color: #030308;
    padding: 80px 0 30px 0;
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 50px;
}

.footer-brand .logo {
    margin-bottom: 18px;
}

.footer-brand .logo-img {
    height: 56px;
}

.footer-brand .logo-name {
    font-size: 0.95rem;
}

.footer-brand p {
    color: var(--text-muted);
    font-size: 0.95rem;
    max-width: 300px;
    font-weight: 300;
}

.footer-links h4, .footer-socials h4 {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    margin-bottom: 20px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.footer-links a:hover {
    color: var(--color-cyan);
    padding-left: 4px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-glass);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.social-icons a:hover {
    background: var(--color-cyan);
    border-color: var(--color-cyan);
    color: var(--bg-dark);
    box-shadow: var(--border-glow-cyan);
    transform: scale(1.1);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 30px;
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
}

/* ========================================================
   BOOKING MODULE PAGE STYLES
   ======================================================== */
.booking-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-dark);
}

.booking-container {
    max-width: 1300px;
    margin: 110px auto 40px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    width: 100%;
    flex-grow: 1;
    position: relative;
    z-index: 10;
}

/* Sidebar Progress Navigator */
.booking-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(12px);
    height: fit-content;
    position: sticky;
    top: 110px;
    overflow: hidden;
}

.sidebar-glow {
    position: absolute;
    top: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(122,0,255,0.2) 0%, transparent 70%);
    filter: blur(20px);
}

.sidebar-title {
    font-size: 1rem;
    letter-spacing: 4px;
    color: var(--color-magenta);
    text-shadow: var(--text-magenta-glow);
    margin-bottom: 25px;
}

.progress-steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 35px;
}

.step-link {
    display: flex;
    align-items: center;
    gap: 16px;
    opacity: 0.4;
    transition: var(--transition-smooth);
}

.step-link.active {
    opacity: 1;
}

.step-link.completed {
    opacity: 0.85;
}

.step-link .step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-smooth);
}

.step-link.active .step-num {
    border-color: var(--color-cyan);
    color: var(--bg-dark);
    background: var(--color-cyan);
    box-shadow: var(--border-glow-cyan);
}

.step-link.completed .step-num {
    border-color: var(--color-magenta);
    color: white;
    background: var(--color-magenta);
    box-shadow: var(--border-glow-magenta);
}

.step-link .step-name {
    font-size: 0.95rem;
    font-weight: 600;
}

.summary-card {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 25px;
}

.summary-card h4 {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.summary-divider {
    height: 1px;
    background: rgba(255,255,255,0.05);
    margin: 12px 0;
}

.summary-line {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.summary-line strong {
    color: white;
}

.summary-tickets-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
}

.summary-ticket-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.15rem;
    color: white;
    margin-top: 10px;
}

.summary-total span {
    color: var(--color-cyan);
    font-weight: 800;
    text-shadow: var(--text-cyan-glow);
}

/* Booking Card Panel */
.booking-box {
    min-height: 500px;
}

.glass-card {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    height: 100%;
}

.booking-step {
    display: none;
    animation: fade-in 0.4s ease-out;
}

.booking-step.active {
    display: block;
}

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

.step-heading {
    font-family: var(--font-playfair);
    font-size: 2.2rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.step-subheading {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 35px;
    font-weight: 300;
}

.step-footer {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 25px;
}

.nav-btn {
    padding: 12px 28px;
    border-radius: 100px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: none;
}

.nav-btn.next-btn {
    background: var(--color-cyan);
    color: var(--bg-dark);
}

.nav-btn.next-btn:hover:not(:disabled) {
    box-shadow: var(--border-glow-cyan);
    transform: translateY(-2px);
}

.nav-btn.next-btn:disabled {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.2);
    cursor: not-allowed;
}

.nav-btn.prev-btn {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid var(--border-glass);
}

.nav-btn.prev-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Premium Calendar Styling */
.calendar-wrapper {
    background: rgba(5, 5, 13, 0.4);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 24px;
    max-width: 480px;
    margin: 0 auto;
}

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

.calendar-header h3 {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.cal-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-glass);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.cal-btn:hover {
    background: var(--color-cyan);
    color: var(--bg-dark);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 0.85rem;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 10px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.95rem;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: var(--transition-smooth);
}

.calendar-day.empty {
    cursor: default;
    background: transparent !important;
}

.calendar-day.past {
    opacity: 0.15;
    cursor: not-allowed;
}

.calendar-day:hover:not(.empty):not(.past) {
    background: rgba(255,255,255,0.06);
    box-shadow: inset 0 0 10px rgba(255,255,255,0.05);
}

.calendar-day.selected {
    background: var(--color-cyan) !important;
    color: var(--bg-dark) !important;
    font-weight: 700;
    box-shadow: var(--border-glow-cyan);
}

.calendar-day .day-indicator {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    position: absolute;
    bottom: 5px;
}

.calendar-day .day-indicator.green { background-color: #00ff66; }
.calendar-day .day-indicator.orange { background-color: var(--color-cyan); }

.calendar-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}

.legend-dot.green { background: #00ff66; }
.legend-dot.orange { background: var(--color-cyan); }

/* Ticket details layout */
.tickets-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ticket-row-card {
    background: rgba(5, 5, 13, 0.4);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticket-info h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.ticket-info .price {
    font-size: 1.15rem;
    color: var(--color-cyan);
    font-weight: 700;
    margin-bottom: 8px;
}

.ticket-info .price span {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 300;
}

.ticket-info .desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 480px;
    font-weight: 300;
}

.ticket-counter {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-glass);
    border-radius: 100px;
    padding: 4px;
}

.counter-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: none;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-smooth);
}

.counter-btn:hover {
    background: var(--color-cyan);
    color: var(--bg-dark);
}

.counter-val {
    font-size: 1.1rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}

/* Timeslot stream tabs */
.batch-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 35px;
}

.batch-tab {
    background: rgba(5,5,13,0.4);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.batch-tab:hover {
    border-color: rgba(0, 229, 255, 0.3);
}

.batch-tab.active {
    background: var(--bg-card);
    border-color: var(--color-cyan);
    box-shadow: var(--border-glow-cyan);
    color: white;
}

.batch-icon {
    font-size: 1.6rem;
}

.batch-name {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
}

.batch-hours {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Slots grid styling */
.slots-container {
    min-height: 200px;
}

.slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}

.slot-btn {
    background: rgba(5,5,13,0.3);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    padding: 14px 10px;
    color: white;
    cursor: pointer;
    font-family: var(--font-outfit);
    text-align: center;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.slot-btn:hover:not(.sold-out) {
    border-color: var(--color-cyan);
    background: rgba(0,229,255,0.05);
}

.slot-btn.selected {
    background: var(--color-cyan) !important;
    border-color: var(--color-cyan) !important;
    color: var(--bg-dark) !important;
    box-shadow: var(--border-glow-cyan);
    font-weight: 600;
}

.slot-btn.selected .slot-cap {
    color: var(--bg-dark);
    opacity: 0.8;
}

.slot-time {
    font-size: 1rem;
    font-weight: 600;
}

.slot-cap {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.slot-cap.green { color: #00ff66; }
.slot-cap.orange { color: #ff9900; }
.slot-cap.red { color: var(--color-magenta); }

/* Not enough seats left for every ticket in the order */
.slot-btn.too-few {
    opacity: 0.5;
    cursor: not-allowed;
    border-style: dashed;
}

.slot-btn.sold-out {
    opacity: 0.2;
    cursor: not-allowed;
    border-color: transparent;
}

.slot-btn.sold-out .slot-cap {
    color: var(--color-magenta);
}

/* Voyager Details & Payment Form Layout */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.form-group-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.subsection-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-cyan);
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-group input {
    background: rgba(5, 5, 13, 0.5);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    padding: 12px 16px;
    color: white;
    font-family: var(--font-outfit);
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-cyan);
    box-shadow: var(--border-glow-cyan);
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group.invalid input {
    border-color: var(--color-magenta);
    box-shadow: 0 0 10px rgba(255,0,127,0.15);
}

.error-msg {
    font-size: 0.78rem;
    color: var(--color-magenta);
    display: none;
}

.form-group.invalid .error-msg {
    display: block;
}

/* Interactive Credit Card Preview */
.credit-card-preview {
    width: 100%;
    max-width: 320px;
    height: 180px;
    margin: 0 auto 10px auto;
    perspective: 1000px;
}

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background: linear-gradient(135deg, #1b004a 0%, #3a005c 40%, #7a00ff 100%);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

.card-chip {
    width: 36px;
    height: 28px;
    background: linear-gradient(135deg, #ffe066 0%, #f5b041 100%);
    border-radius: 4px;
}

.card-number-label {
    font-size: 1.25rem;
    letter-spacing: 2px;
    font-weight: 600;
    margin: 15px 0;
    font-family: Courier, monospace;
}

.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.card-small-label {
    display: block;
    font-size: 0.6rem;
    opacity: 0.6;
    letter-spacing: 1px;
}

.card-name-label, .card-exp-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
}

.payment-action-box {
    margin-top: 35px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.terms-text {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    max-width: 500px;
}

.submit-payment-btn {
    width: 100%;
    max-width: 400px;
    padding: 14px;
    font-size: 1.05rem;
}

/* Simulated Payment processing loader modal */
.payment-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5,5,13,0.92);
    border-radius: 20px;
    z-index: 100;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
}

.payment-loader-overlay.active {
    display: flex;
}

.cosmic-spinner {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 25px;
}

.spinner-ring {
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: var(--color-cyan);
    border-bottom-color: var(--color-magenta);
    border-radius: 50%;
    animation: spinner-spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-cyan);
    box-shadow: var(--text-cyan-glow);
}

@keyframes spinner-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.payment-loader-overlay h3 {
    font-size: 1.3rem;
    margin-bottom: 8px;
    color: white;
}

.payment-loader-overlay p {
    color: var(--text-muted);
    font-size: 0.9rem;
    max-width: 480px;
    line-height: 1.6;
}

.payment-loader-overlay p a { color: var(--color-cyan); white-space: nowrap; }

/* Nothing more happening on this page (e.g. "still confirming, we'll email
   your ticket"): the message without the spinner */
.payment-loader-overlay.done .cosmic-spinner { display: none; }

/* STEP 5: Success Ticket & QR Code Receipt Card */
.success-icon-wrapper {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.success-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 255, 102, 0.1);
    animation: marker-glow-pulse 2s infinite;
}

.success-checkmark {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #00ff66;
    color: var(--bg-dark);
    font-size: 1.8rem;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.5);
}

.text-glow {
    text-shadow: 0 0 20px rgba(0,255,102,0.3);
}

.ticket-receipt-card {
    background: linear-gradient(135deg, #0d0d21 0%, #06060f 100%);
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 16px;
    padding: 30px;
    max-width: 540px;
    margin: 40px auto;
    position: relative;
    text-align: left;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

.receipt-glow {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.15) 0%, transparent 75%);
    pointer-events: none;
}

.receipt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.receipt-id {
    font-family: monospace;
    color: var(--color-cyan);
    font-size: 0.9rem;
}

.receipt-body {
    display: flex;
    gap: 30px;
    align-items: center;
}

.receipt-details {
    flex-grow: 1;
}

.receipt-row {
    font-size: 0.92rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.receipt-row strong {
    color: white;
}

.receipt-ticket-summary {
    font-size: 0.85rem;
    color: var(--color-cyan);
    margin-bottom: 3px;
}

.receipt-qr-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#qrContainer {
    background: white;
    padding: 8px;
    border-radius: 8px;
    width: 110px;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* Never let the generated QR spill out of its white box onto the label,
   whatever size booking.js asks qrcode.js to render at. */
#qrContainer img,
#qrContainer canvas {
    max-width: 100%;
    max-height: 100%;
}

.qr-scan-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.success-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
}

/* ========================================================
   RESPONSIVE OVERRIDES
   ======================================================== */
@media (max-width: 1024px) {
    .grid-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .about-image-wrapper {
        max-width: 500px;
        margin: 0 auto;
        width: 100%;
    }
    
    .booking-container {
        grid-template-columns: minmax(0, 1fr); /* plain 1fr can't shrink below its content */
        margin-top: 90px;
    }
    
    .booking-sidebar {
        position: relative;
        top: 0;
        width: 100%;
    }
    
    .progress-steps {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 10px;
        gap: 24px;
    }
    
    .step-link {
        flex: 0 0 auto;
    }
}

@media (max-width: 768px) {
    /* Compact navbar, 72px tall (the mobile menu and scroll-padding-top assume it) */
    .navbar,
    .navbar.scrolled {
        padding: 0;
    }

    .nav-container {
        padding: 10px 16px;
        gap: 12px;
    }

    .nav-actions {
        gap: 8px;
    }

    .nav-actions .cta-btn {
        padding: 10px 18px;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .menu-toggle {
        display: flex;
    }

    /* Hero: smaller type, nothing past the edges (stats and countdown: below their own styles) */
    /* The gaps shrink on shorter screens (svh) so the whole hero, the Book
       button included, fits above the swipe hint on most phones. */
    .hero-section {
        padding: calc(72px + clamp(12px, 3svh, 32px)) 0 76px; /* below: room for the swipe hint */
    }

    .hero-content {
        padding: 0 18px;
    }

    .hero-title {
        font-size: clamp(2.1rem, 10vw, 2.9rem);
        margin-bottom: 10px;
    }

    .hero-subtitle {
        font-size: 0.8rem;
        letter-spacing: 2.5px;
        margin-bottom: clamp(16px, 3svh, 28px);
    }

    .hero-btn {
        padding: 14px 36px;
        font-size: 1rem;
    }

    /* Booking page */
    .booking-container {
        padding: 0 16px;
    }

    .booking-sidebar {
        padding: 20px;
    }

    .glass-card {
        padding: 24px 16px;
    }

    .logo-img {
        height: 36px;
    }

    .logo-name {
        font-size: 0.68rem;
    }

    .section-title {
        font-size: 2.2rem;
    }
    
    .nav-links {
        display: none; /* Injected dynamically into mobile drawer */
    }
    
    .carousel-control {
        width: 40px;
        height: 40px;
    }
    
    .carousel-control.prev { left: -5px; }
    .carousel-control.next { right: -5px; }
    
    .zones-carousel-container {
        padding: 0 35px;
    }
    
    .zone-card {
        flex: 0 0 300px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .batch-tabs {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .receipt-body {
        flex-direction: column-reverse;
        align-items: center;
        gap: 20px;
    }
    
    .receipt-details {
        width: 100%;
    }
}

@media (max-width: 768px), (hover: none) {
    .hero-actions .scroll-indicator {
        display: none;
    }

    .swipe-hint {
        display: flex;
        align-items: center;
        gap: 4px;
        position: fixed;
        left: 50%;
        bottom: calc(12px + env(safe-area-inset-bottom));
        transform: translateX(-50%);
        z-index: 50;
        padding: 2px 16px 2px 8px;
        border-radius: 999px;
        border: 1px solid rgba(0, 229, 255, 0.22);
        background: rgba(5, 5, 13, 0.7);
        white-space: nowrap;
        color: var(--color-cyan);
        font-size: 0.66rem;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        text-decoration: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    .swipe-hint.show {
        opacity: 1;
        visibility: visible;
    }

    .swipe-hint.show.gone {
        opacity: 0;
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .swipe-finger,
    .swipe-track::before {
        animation: none;
    }

    .swipe-finger {
        transform: translateY(8px);
    }
}

/* Mobile Navigation Drawer overlay injected via JS */
.mobile-nav-overlay {
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    height: calc(100vh - 72px);
    background: rgba(5, 5, 13, 0.98);
    z-index: 99;
    display: flex;
    flex-direction: column;
    padding: 40px 24px;
    gap: 24px;
    overflow-y: auto; /* short phones: scroll to the last links */
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-top: 1px solid var(--border-glass);
}

.mobile-nav-overlay.active {
    transform: translateX(0);
}

.mobile-nav-overlay .nav-item {
    font-size: 1.5rem;
    font-family: var(--font-playfair);
    color: white;
}

/* Tablets: the menu links don't fit beside the logo and the button, so they
   go in the drawer as on phones. The navbar is taller here (97px, 117px once
   scrolled): the drawer starts behind it and pads its links past it. */
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-links { display: none; }
    .menu-toggle { display: flex; }
    .mobile-nav-overlay {
        top: 0;
        height: 100vh;
        padding-top: 157px;
    }
}

/* ========================================================
   HERO — ENTRANCE ANIMATIONS (staggered on page load)
   ======================================================== */
.hero-content .hero-title,
.hero-content .hero-subtitle,
.hero-content .hero-stats-bar,
.hero-content .hero-countdown-wrap,
.hero-content .hero-actions {
    opacity: 0;
    transform: translateY(36px);
}

.hero-loaded .hero-title {
    animation: heroReveal 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.2s forwards;
}
.hero-loaded .hero-subtitle {
    animation: heroReveal 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.5s forwards;
}
.hero-loaded .hero-stats-bar {
    animation: heroReveal 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.75s forwards;
}
.hero-loaded .hero-countdown-wrap {
    animation: heroReveal 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.95s forwards;
}
.hero-loaded .hero-actions {
    animation: heroReveal 1s cubic-bezier(0.25, 0.8, 0.25, 1) 1.15s forwards;
}

@keyframes heroReveal {
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================================
   HERO — STATS BAR
   ======================================================== */
.hero-stats-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 28px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 100px;
    padding: 14px 8px;
    backdrop-filter: blur(8px);
    max-width: 640px; /* room for all four stats on one line */
    margin-left: auto;
    margin-right: auto;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px;
    position: relative;
}

.hero-stat + .hero-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 28px;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.hero-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-cyan);
    text-shadow: var(--text-cyan-glow);
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.hero-stat-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 3px;
    white-space: nowrap;
}

/* ========================================================
   HERO — LIVE COUNTDOWN STRIP
   ======================================================== */
.hero-countdown-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 229, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 100px;
    padding: 9px 22px;
    margin-bottom: 36px;
    backdrop-filter: blur(8px);
}

.countdown-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00ff66;
    box-shadow: 0 0 8px rgba(0, 255, 102, 0.9);
    flex-shrink: 0;
    animation: liveBlip 1.4s ease-in-out infinite;
}

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

.countdown-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    white-space: nowrap;
}

.countdown-time {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-cyan);
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
}

.countdown-open-now {
    color: #00ff66 !important;
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.6);
}

/* Phones: the stats as a 2 x 2 grid and the countdown free to wrap (after
   the styles above, so these win) */
@media (max-width: 768px) {
    .hero-stats-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 10px;
        border-radius: 22px;
        padding: 12px 6px;
        margin-bottom: clamp(14px, 2.5svh, 24px);
    }

    .hero-stat-value {
        font-size: 1.35rem;
    }

    .hero-stat {
        padding: 0 6px;
    }

    .hero-stat:nth-child(odd)::before {
        display: none; /* dividers only between the two columns */
    }

    .hero-stat-label {
        letter-spacing: 1.5px;
    }

    .hero-countdown-wrap {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 4px;
        max-width: 100%;
        border-radius: 18px;
        padding: 8px 14px;
        margin-bottom: clamp(16px, 3svh, 28px);
    }

    .countdown-label {
        white-space: normal;
        letter-spacing: 1.5px;
        font-size: 0.72rem;
    }

    .countdown-time {
        white-space: nowrap;
    }
}

/* Short phone screens (e.g. an iPhone SE with Safari's bars showing): a
   little smaller still, so the Book button stays clear of the swipe hint. */
@media (max-width: 768px) and (max-height: 600px) {
    .hero-title {
        font-size: clamp(1.9rem, 9vw, 2.5rem);
    }

    .hero-stats-bar {
        row-gap: 6px;
        padding: 10px 6px;
    }

    .hero-stat-value {
        font-size: 1.2rem;
    }
}

/* ========================================================
   SCROLL-REVEAL SYSTEM (IntersectionObserver driven)
   ======================================================== */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.reveal.reveal-left  { transform: translateX(-50px); }
.reveal.reveal-right { transform: translateX(50px); }

/* Nothing may make the page wider than the screen (a sideways wiggle on
   phones). clip, unlike hidden, keeps position: sticky working inside. */
main:not(.admin-main) {
    overflow-x: clip;
}

@media (max-width: 1024px) {
    .reveal.reveal-left,
    .reveal.reveal-right { transform: translateY(40px); }
}
.reveal.reveal-scale { transform: scale(0.92); }

.reveal.visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.18s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.45s; }
.reveal-delay-5 { transition-delay: 0.60s; }

/* ========================================================
   CURSOR GLOW TRAIL
   ======================================================== */
.cursor-glow {
    position: fixed;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(122, 0, 255, 0.07) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    will-change: left, top;
    transition: left 0.08s linear, top 0.08s linear;
}

/* ========================================================
   HERO VIDEO FALLBACK — animated nebula gradient
   ======================================================== */
.hero-bg-fallback {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(122, 0, 255, 0.20) 0%, transparent 52%),
        radial-gradient(ellipse at 80% 70%, rgba(0, 229, 255, 0.13) 0%, transparent 50%),
        radial-gradient(ellipse at 55% 50%, rgba(255, 0, 127, 0.08) 0%, transparent 55%);
    z-index: -3;
    animation: bgNebulaPulse 14s ease-in-out infinite alternate;
}

/* Opacity only: animating filter (hue-rotate) repainted the whole hero every frame */
@keyframes bgNebulaPulse {
    0%   { opacity: 0.7; }
    100% { opacity: 1; }
}

/* ========================================================
   NEBULA WISPS OVERLAY (floating hero atmosphere)
   ======================================================== */
.nebula-container {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.nebula-wisp {
    position: absolute;
    border-radius: 50%;
    filter: blur(65px);
    animation: wispDrift linear infinite;
}

.nebula-wisp:nth-child(1) {
    width: 520px; height: 320px;
    background: radial-gradient(circle, rgba(122, 0, 255, 0.18), transparent 70%);
    top: 5%; left: -12%;
    animation-duration: 28s;
    animation-delay: 0s;
}
.nebula-wisp:nth-child(2) {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.12), transparent 70%);
    top: 35%; right: -12%;
    animation-duration: 34s;
    animation-delay: -12s;
}
.nebula-wisp:nth-child(3) {
    width: 380px; height: 260px;
    background: radial-gradient(circle, rgba(255, 0, 127, 0.10), transparent 70%);
    bottom: 8%; left: 25%;
    animation-duration: 22s;
    animation-delay: -6s;
}

@keyframes wispDrift {
    0%   { opacity: 0;   transform: scale(0.85) translate(0px,  0px); }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0;   transform: scale(1.18) translate(25px, -18px); }
}

/* ========================================================
   HERO VIDEO — hide on error fallback
   ======================================================== */
.hero-video.hidden {
    display: none;
}

/* Print override for confirmation pass receipt.
   Everything except the receipt and the elements wrapping it is taken out
   of the layout with display:none — visibility:hidden (what this used to
   do) keeps every hidden element's space, which printed as pages of blank
   paper around the pass. The wrappers are kept but stripped of their own
   spacing so the pass sits at the top of a single page. */
@media print {
    @page {
        margin: 12mm;
    }
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        background: white !important;
    }
    body *:not(:has(#ticketReceipt)):not(#ticketReceipt):not(#ticketReceipt *) {
        display: none !important;
    }
    body *:has(#ticketReceipt) {
        display: block !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        border: none !important;
        background: none !important;
        box-shadow: none !important;
        transform: none !important;
    }
    #ticketReceipt {
        margin: 0 auto;
        border: 1px dashed #999;
        box-shadow: none;
        background: white !important;
        color: black !important;
        break-inside: avoid;
    }
    .receipt-glow {
        display: none;
    }
    #ticketReceipt * {
        color: black !important;
    }
    .receipt-id {
        color: black !important;
        font-weight: bold;
    }
    #qrContainer {
        border: 1px solid #ccc;
    }
}