/* =============================================
   SPARSH — Cinematic Hero Section Styles
   ============================================= */

/* ---------- RESET & BASE ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color Palette */
    --sky-deep: #0a0e1a;
    --sky-mid: #1a2744;
    --sky-light: #4a6fa5;
    --cloud-white: #e8edf5;
    --warm-cream: #f5ead6;
    --warm-glow: rgba(255, 220, 180, 0.08);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-muted: rgba(255, 255, 255, 0.5);
    --accent-gold: #61B564;
    --accent-soft: rgba(97, 181, 100, 0.15);

    /* Typography */
    --font-display: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Sizing */
    --hero-height: 100vh;
}

html {
    scroll-behavior: auto;
    /* GSAP handles smoothness */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Clamp horizontal overflow so the off-canvas shooting-stars and
       wide aurora gradients can't spawn a horizontal scrollbar that
       reads as a thin vertical line at the page edges. */
    overflow-x: hidden;
    /* Dreamy midnight fallback — matches the dimmest band of the
       body::before pseudo so any seam between the hero ambient and the
       fixed sky is invisible. Never goes near-black. */
    background-color: #0a1226;
}

/* Lenis Smooth Scroll Recommended CSS */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* ========================================
   COMMON SECTION & TYPOGRAPHY STYLES
   (Shared across About, Products, etc.)
   ========================================= */
.about-section {
    padding: 120px 5%;
    position: relative;
    z-index: 10;
}

.about-container {
    /* Narrative-section width — keeps long paragraphs and headings at a
       readable measure, matching the inner text width of the dealer /
       support / content (page-body) pages. Sections that need to span
       wider (grids, leadership cards) override this — see
       .leadership-section .about-container in about.css. */
    max-width: 900px;
    margin: 0 auto;
}

.about-intro-section .about-container {
    max-width: 1180px;
}

.about-heading {
    font-family: 'Inter', sans-serif;
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: 400;
}

.about-subheading {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 400;
}

.about-body {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

.about-label {
    color: #61B564;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
}

.about-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 5%;
    position: relative;
    overflow: hidden;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
}

.about-hero-content .about-heading {
    margin-bottom: 30px;
}

.about-hero-content .about-body {
    margin: 0 auto;
    max-width: 700px;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* Animations */
.reveal {
    opacity: 0;
    transform: translateY(50px);
}

body {
    font-family: var(--font-body);
    background: var(--sky-deep);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.6;
}

img {
    display: block;
    max-width: none;
    /* Allow scaling beyond container */
    user-select: none;
    -webkit-user-drag: none;
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ========================================
   PREMIUM NAVBAR STYLES
   ========================================= */
.navbar {
    position: fixed;
    bottom: 60px;
    /* Moved higher up */
    left: 50%;
    transform: translateX(-50%);
    --nav-blur: 05px;
    --nav-saturate: 200%;
    --nav-opacity: 0.4;

    width: 65%;
    max-width: 1400px;
    z-index: 1000;
    padding: 15px 40px;
    background: rgba(10, 15, 30, var(--nav-opacity));
    /* Midnight dark glass */
    backdrop-filter: blur(var(--nav-blur)) saturate(var(--nav-saturate));
    -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(var(--nav-saturate));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    /* Cinematic Glow & Shadow */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);

    /* Floating Animation */
    animation: navFloat 5s ease-in-out infinite;
}

@keyframes navFloat {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

.navbar.navbar-top {
    bottom: auto;
    top: 40px;
    animation: navFloatTop 5s ease-in-out infinite;
}

@keyframes navFloatTop {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

.navbar.navbar-top .dropdown-content {
    bottom: auto;
    top: 150%;
    transform: translateX(-50%) translateY(20px);
}

.navbar.navbar-top .dropdown:hover .dropdown-content {
    transform: translateX(-50%) translateY(10px);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.nav-logo img {
    height: 54px;
    width: auto;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-logo:hover img {
    transform: scale(1.05);
}

/* Logo styles removed as requested */

.nav-links {
    display: flex;
    list-style: none;
    gap: 36px;
    align-items: center;
    margin: 0 32px;
}

.nav-links li a {
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-feature-settings: "ss01", "cv11";
    font-optical-sizing: auto;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0);
}

.nav-links li a:hover,
.nav-links li a.active {
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.7),
        0 0 30px rgba(255, 255, 255, 0.3);
    /* Premium white glow + lift on the active/hovered item */
    transform: translateY(-2px);
}

/* On sub-pages, the active/hovered state is brand green */
body:not(.home-page) .nav-links li a:hover,
body:not(.home-page) .nav-links li a.active {
    color: #61B564;
    text-shadow: 0 0 15px rgba(97, 181, 100, 0.6),
        0 0 30px rgba(97, 181, 100, 0.2);
}

/* Dropdown Logic */
.dropdown {
    position: relative;
}

.dropbtn i {
    font-size: 10px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.dropdown:hover .dropbtn i {
    transform: rotate(180deg);
}

.dropdown-content {
    position: absolute;
    bottom: 150%;
    /* Changed to open upwards */
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    /* Adjust spacing above the pill */
    background: rgba(10, 14, 26, 0.95);
    backdrop-filter: blur(20px);
    min-width: 200px;
    border-radius: 12px;
    padding: 15px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.dropdown:hover .dropdown-content {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px);
}

.dropdown-content a {
    font-family: 'Inter', sans-serif;
    display: block;
    padding: 12px 25px;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-align: center;
}

.dropdown-content a:hover {
    background: rgba(97, 181, 100, 0.1);
    color: #61B564 !important;
}

/* Nav Search */
.nav-search {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 5px 15px;
    margin-left: 8px;
    transition: all 0.3s ease;
}

/* Navbar-scoped social icons (used on legal/blog/faq pages) */
.navbar .social-links {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 8px;
}

.navbar .social-links a {
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.navbar .social-links a:hover {
    color: #fff;
    transform: translateY(-2px);
}

.nav-search:focus-within {
    border-color: var(--accent-gold);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 20px rgba(97, 181, 100, 0.2);
}

.nav-search input {
    background: none;
    border: none;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.8rem;
    padding: 5px 5px;
    width: 100px;
    outline: none;
}

.nav-search input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.nav-search i {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

/* Homepage audio toggle */
.home-audio-control {
    position: fixed;
    top: 38px;
    right: 38px;
    z-index: 1200;
}

.home-audio-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(10, 15, 30, 0.48);
    color: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.home-audio-toggle:hover,
.home-audio-toggle:focus-visible {
    color: #fff;
    border-color: rgba(97, 181, 100, 0.62);
    background: rgba(10, 15, 30, 0.68);
    transform: translateY(-1px);
    outline: none;
}

.home-audio-toggle.is-playing {
    color: #ffffff;
    background: rgba(97, 181, 100, 0.28);
    border-color: rgba(97, 181, 100, 0.72);
}

.home-audio-toggle.is-loading {
    pointer-events: none;
    opacity: 0.68;
}

@media (max-width: 768px) {
    .home-audio-control {
        top: auto;
        right: 24px;
        bottom: 24px;
        left: auto;
        transform: none;
        z-index: 1200;
    }

    .home-audio-toggle {
        width: 48px;
        height: 48px;
    }
}

/* =============================================
   HERO SCENE — Pinned Fullscreen Container
   ============================================= */

.hero-scene {
    position: relative;
    width: 100%;
    height: 800vh;
    /* Increased for the deep portrait zoom and office reveal */
    overflow: hidden;
    z-index: 10;
}

.hero-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: visible;
    /* Prevents sharp clipping at the top/bottom edges of the container */
    pointer-events: none;
    /* Force each fixed layer onto its own GPU compositor layer. With ~10
       layers transformed independently by the scrub timeline, this avoids
       cascading repaints when one layer animates — the browser can move
       a single texture instead of redrawing the stack. Pure perf, no
       visual change. */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}


/* ---------- LAYER 0: PARALLAX BACKGROUND SYSTEM ---------- */

.bg-parallax-layer {
    will-change: transform;
}

.parallax-img {
    width: 110vw;
    height: auto;
    /* Maintains natural aspect ratio of the cropped clouds */
    position: absolute;
    bottom: -5vh;
    /* Anchor all clouds to the bottom */
    left: -5vw;
    will-change: transform;
    pointer-events: none;
}

#bg-night-sky {
    z-index: 1;
    background: linear-gradient(180deg, #02050f 0%, #060b1e 40%, #0a1128 100%);
}

.moon {
    /* MANUALLY ADJUST MOON POSITION HERE */
    --moon-top: 04%;
    --moon-left: 72%;
    --moon-rotation: -15deg;

    position: absolute;
    top: var(--moon-top);
    left: var(--moon-left);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: transparent;
    /* Create a crescent moon using box-shadow */
    box-shadow: -15px 15px 0 0 #fffdeb;
    filter: drop-shadow(0 0 15px rgba(255, 253, 235, 0.4)) drop-shadow(0 0 40px rgba(255, 253, 235, 0.2));
    transform: rotate(var(--moon-rotation));
    will-change: transform;
    animation: moonFloat 6s ease-in-out infinite;
}

@keyframes moonFloat {

    0%,
    100% {
        transform: rotate(-15deg) translateY(0);
    }

    50% {
        transform: rotate(-15deg) translateY(-20px);
    }
}

/* ---------- LAYER 1.5: NATURAL CLOUDS ---------- */

.natural-clouds {
    z-index: 3;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.single-bg-clouds {
    position: absolute;
    bottom: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    /* Increased height for better coverage */
    object-fit: cover;
    z-index: 3;
}

/* ---------- LAYER 1.8: STREET BACKGROUND ---------- */
.street-reveal-layer {
    z-index: 2;
    opacity: 1;
    /* Always opaque, but starts off-screen */
}

.street-img-bg {
    width: 100%;
    height: 120vh;
    /* Increased height to cover gaps during upward movement and zoom */
    object-fit: cover;
    object-position: center 30%;
    transform-origin: 77% 52%;
    /* Shifted more to the right */
}

/* Street text styles moved to Act 2 section at line 1315 for easier adjustment */

/* ---------- LAYER 1.9: WINDOW CLOSE-UP ---------- */
.window-closeup-layer {
    z-index: -1;
    /* Cold Storage */
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    background: transparent;
    transform: translateZ(0);
}

.window-zoom-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
}

/* The <picture> that serves the phone-sized window-closeup must not break
   the layout chain: .window-img-inner sizes with height:100%, a percentage,
   which needs a parent with a definite height. <picture> is display:inline
   by default. Chromium happens to resolve it against the wrapper anyway,
   but that is not something to rely on cross-browser — and Safari is the
   target here — so the box is made explicit. (.street-img-bg gets away
   without this only because it sizes in vh, not %.) */
.window-zoom-wrapper picture {
    display: block;
    width: 100%;
    height: 100%;
}

.window-img-inner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.window-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 67% 38%, transparent 10%, rgba(0, 0, 0, 0.8) 70%);
    opacity: 0;
    z-index: 20;
    /* Below children */
    pointer-events: none;
    will-change: opacity;
}

/* ---------- ACT 5: SLEEPING SCENE (FINAL) ---------- */
.sleeping-scene-layer {
    z-index: -1;
    /* Cold Storage */
    opacity: 0;
    visibility: hidden;
    /* HIDDEN to prevent artifacts */
    pointer-events: none;
    will-change: opacity, transform;

    /* Manual Adjustment Variables */
    --mask-x: 50%;
    --mask-y: 50%;
    --mask-radius: 0%;
    --mask-fade: 0%;

    /* Mask is set dynamically in JS to prevent patches */
    mask-image: none;
    -webkit-mask-image: none;
}

.sleeping-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    will-change: transform;
}

.final-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, transparent 20%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
    opacity: 0;
    /* Hidden initially */
    visibility: hidden;
}

.office-scene-layer {
    z-index: -1;
    /* Cold Storage */
    opacity: 0;
    visibility: hidden;
    /* HIDDEN to prevent artifacts */
    pointer-events: none;
    will-change: opacity, transform, backdrop-filter;
    background: transparent;
}

.office-reveal-container {
    position: absolute;
    inset: 0;
    z-index: 44;
    overflow: hidden;
    /* Mask is set dynamically in JS to prevent patches */
    --mask-radius: 0%;
    --mask-fade: 0%;
    mask-image: none;
    -webkit-mask-image: none;

    opacity: 0;
    will-change: mask-image, -webkit-mask-image, opacity;
}

.office-man-container {
    position: absolute;
    inset: 0;
    z-index: 45;
    pointer-events: none;
    will-change: filter, opacity;
}

#office-man {
    transform: scale(0.8);
    transform-origin: center center;
}

.sleeping-man-container {
    position: absolute;
    inset: 0;
    z-index: 65;
    /* Above the scene layer */
    pointer-events: none;
    will-change: transform, opacity;
}

#man-sleep {
    transform: scale(0.8);
    transform-origin: center center;
}

.office-img-static {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: -35% -230%;
    /* Face anchor */
    will-change: transform;
}

.office-overlay-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
    z-index: 41;
    opacity: 0;
    /* Hidden initially */
    visibility: hidden;
}

/* ---------- CHILDREN PLAYING ON BED ---------- */
.bed-children-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    /* Pop to the very front */
}

.bed-child {
    position: absolute;
    opacity: 0;
    will-change: transform, opacity;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3));
}

.child-boy {
    width: 20vw;
    max-width: 500px;
    bottom: 20%;
    left: 40%;
    /* Positioned on the left side of the bed */
}

.child-girl {
    width: 16.2vw;
    max-width: 450px;
    bottom: 10%;
    left: 58%;
    /* Positioned on the right side of the bed */
    animation: floatGirl 3.5s ease-in-out infinite;
    animation-delay: 0.5s;
}

.floating-pillow {
    position: absolute;
    width: 9vw;
    max-width: 162px;
    top: 35%;
    left: 56%;
    transform: translateX(-50%);
    opacity: 0;
    will-change: transform, opacity;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3)) brightness(1.2) contrast(1.1);
    animation: floatPillow 3.5s ease-in-out infinite;
    animation-delay: 0.5s;
}

/* Floating Keyframes */
@keyframes floatBoy {

    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-4px) rotate(1deg);
    }
}

@keyframes floatGirl {

    0%,
    100% {
        transform: translateY(0) rotate(1deg);
    }

    50% {
        transform: translateY(-5px) rotate(-1deg);
    }
}

@keyframes floatPillow {

    0%,
    100% {
        transform: translateX(-50%) translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateX(-50%) translateY(-3px) rotate(2deg);
    }
}

/* ---------- LAYER 1.6: FRONT CLOUD BLOBS ---------- */

.clouds-front {
    z-index: 8;
    /* Sits above the boy (6) */
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.cloud-blob {
    position: absolute;
    width: 45vw;
    min-width: 400px;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2));
    will-change: transform;
    animation: blobFloat 15s ease-in-out infinite;
    /* Clouds cast shadow on the text behind them */
    filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.4));
}

.blob-left {
    animation-delay: 0s;
}

.blob-right {
    animation-delay: -3s;
}

.blob-center {
    animation-delay: -6s;
}

.blob-left-2 {
    animation-delay: -9s;
}

.blob-right-2 {
    animation-delay: -12s;
}

.blob-back-left {
    animation-delay: -4s;
}

.blob-back-right {
    animation-delay: -8s;
}

.blob-left {
    left: -5vw;
    bottom: 10%;
}

.blob-right {
    right: -5vw;
    bottom: 5%;
}

.blob-center {
    left: 15vw;
    bottom: -30%;
    width: 60vw;
    z-index: 10;
}

.blob-center-left {
    left: 2vw;
    bottom: -20%;
    width: 55vw;
    z-index: 11;
    animation-delay: -5s;
}

.blob-left-2 {
    left: -10vw;
    bottom: -25%;
    width: 70vw;
    z-index: 12;
}

.blob-right-2 {
    right: -10vw;
    bottom: -20%;
    width: 60vw;
}

.blob-large-left {
    left: -15vw;
    bottom: -25%;
    width: 65vw;
    z-index: 15;
    /* Front-most layer */
    animation-delay: -2s;
    filter: blur(4px) drop-shadow(0 20px 50px rgba(0, 0, 0, 0.3));
}

.blob-large-right {
    right: -15vw;
    bottom: -25%;
    width: 50vw;
    z-index: 15;
    /* Front-most layer */
    animation-delay: -7s;
    filter: blur(4px) drop-shadow(0 20px 50px rgba(0, 0, 0, 0.3));
}

.blob-footer-1 {
    bottom: -45%;
    left: -10%;
    width: 100vw;
    opacity: 0.8;
    filter: blur(8px);
    z-index: -1;
}

.blob-footer-2 {
    bottom: -50%;
    right: -10%;
    width: 110vw;
    opacity: 0.7;
    filter: blur(12px);
    z-index: -2;
}

/* ---------- LAYER 1.3: BACK CLOUD BLOBS ---------- */
.clouds-back {
    z-index: 4;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.blob-back-left {
    left: -8vw;
    top: 10%;
    width: 50vw;
    opacity: 0.95;
    /* More solid */
    filter: blur(2px) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
}

.blob-back-right {
    right: -10vw;
    top: 20%;
    width: 55vw;
    opacity: 0.9;
    /* More solid */
    filter: blur(3px) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
}

.blob-back-3 {
    position: absolute;
    left: 10vw;
    top: 02%;
    width: 80vw;
    opacity: 0.85;
    filter: blur(4px);
    z-index: 3;
    animation: blobFloat 18s ease-in-out infinite;
    animation-delay: -2s;
}

.cloud-fog-transition {
    position: absolute;
    bottom: -5vh;
    left: 0;
    width: 100%;
    height: 30vh;
    background: linear-gradient(to bottom, transparent, rgba(232, 237, 245, 0.4), transparent);
    pointer-events: none;
    z-index: 15;
    /* Sits above clouds but moves with them */
    filter: blur(20px);
    will-change: transform, opacity;
}

.blob-back-4 {
    position: absolute;
    right: 5vw;
    top: 25%;
    width: 50vw;
    opacity: 0.85;
    filter: blur(3px);
    z-index: 3;
    animation: blobFloat 20s ease-in-out infinite;
    animation-delay: -6s;
}

@keyframes blobFloat {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(15px, -10px) rotate(0.5deg);
    }

    50% {
        transform: translate(0, -20px) rotate(0deg);
    }

    75% {
        transform: translate(-15px, -10px) rotate(-0.5deg);
    }
}

/* ---------- LAYER 2: PARTICLE CANVAS ---------- */

.hero-particles {
    z-index: 2;
    opacity: 0.4;
}


/* ---------- LAYER 2: BACK FEATHERS ---------- */

.feathers-back {
    z-index: 3;
    opacity: 1;
    /* Visible from the start */
    will-change: opacity;
}

.feather {
    position: absolute;
    will-change: transform;
    pointer-events: none;
    filter: brightness(1.1);
}

/* Back feathers — smaller, blurred, distant */
.feather-back-1 {
    --base-rotation: 25deg;
    width: 80px;
    top: 20%;
    left: 10%;
    filter: blur(3px) brightness(1.2);
    opacity: 0.5;
    transform: rotate(var(--base-rotation));
    animation: featherSwing1 8s ease-in-out infinite;
}

.feather-back-2 {
    --base-rotation: -15deg;
    width: 60px;
    top: 55%;
    right: 15%;
    filter: blur(4px) brightness(1.1);
    opacity: 0.4;
    transform: rotate(var(--base-rotation));
    animation: featherSwing2 10s ease-in-out infinite;
}

.feather-back-3 {
    --base-rotation: 40deg;
    width: 75px;
    top: 35%;
    left: 65%;
    filter: blur(2px) brightness(1.15);
    opacity: 0.45;
    transform: rotate(var(--base-rotation));
    animation: featherSwing1 9s ease-in-out infinite 1s;
}



/* ---------- LAYER 3 & 4: SUBJECT ---------- */

.subject-layer {
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity;
}

.subject-img {
    position: absolute;
    will-change: transform, opacity;
}

/* Single image: starts at large scale, centered on face */
#subject-full {
    z-index: 6;
    /* Bring to front for the zoom */
}

.subject-single-img {
    width: 65vw;
    max-width: 900px;
    margin-top: 25vh;
    /* Shift the boy heavily to the lower side */
    opacity: 1;
}


/* ---------- LAYER 5: FRONT FEATHERS ---------- */

.feathers-front {
    z-index: 10;
    opacity: 1;
    /* Visible from the start */
    will-change: opacity;
}

/* Front feathers — larger, sharper, closer */
.feather-front-1 {
    --base-rotation: 20deg;
    width: 120px;
    top: 15%;
    left: 5%;
    transform: rotate(var(--base-rotation));
    opacity: 0.8;
    animation: featherSwing2 7s ease-in-out infinite;
}

.feather-front-2 {
    --base-rotation: -30deg;
    width: 100px;
    top: 60%;
    right: 8%;
    transform: rotate(var(--base-rotation));
    opacity: 0.7;
    animation: featherSwing1 11s ease-in-out infinite;
}

.feather-front-3 {
    --base-rotation: 45deg;
    width: 150px;
    top: 40%;
    left: 75%;
    transform: rotate(var(--base-rotation));
    opacity: 0.6;
    filter: blur(1px);
    animation: featherSwing2 9s ease-in-out infinite 0.5s;
}

.feather-front-4 {
    --base-rotation: -20deg;
    width: 90px;
    top: 75%;
    left: 30%;
    transform: rotate(var(--base-rotation));
    opacity: 0.65;
    animation: featherSwing1 8.5s ease-in-out infinite 2s;
}

.feather-front-5 {
    --base-rotation: 35deg;
    width: 110px;
    top: 25%;
    right: 25%;
    transform: rotate(var(--base-rotation));
    opacity: 0.55;
    filter: blur(0.5px);
    animation: featherSwing2 12s ease-in-out infinite;
}

/* --- Feather Animation Keyframes --- */
@keyframes featherSwing1 {

    0%,
    100% {
        transform: rotate(var(--base-rotation)) translateX(0) translateY(0);
    }

    50% {
        transform: rotate(calc(var(--base-rotation) + 8deg)) translateX(30px) translateY(-15px);
    }
}

@keyframes featherSwing2 {

    0%,
    100% {
        transform: rotate(var(--base-rotation)) translateX(0) translateY(0);
    }

    50% {
        transform: rotate(calc(var(--base-rotation) - 10deg)) translateX(-40px) translateY(-10px);
    }
}


/* ---------- LAYER 6: FEATHER TRANSITION ---------- */

.feather-transition {
    z-index: 15;
    opacity: 0;
    will-change: opacity;
}

.feather-trans-1 {
    width: 180px;
    bottom: -20%;
    left: 5%;
    transform: rotate(10deg) translateY(100px);
    opacity: 0.9;
}

.feather-trans-2 {
    width: 150px;
    bottom: -15%;
    left: 25%;
    transform: rotate(-25deg) translateY(80px);
    opacity: 0.85;
}

.feather-trans-3 {
    width: 200px;
    bottom: -25%;
    left: 45%;
    transform: rotate(15deg) translateY(120px);
    opacity: 0.95;
}

.feather-trans-4 {
    width: 160px;
    bottom: -18%;
    right: 10%;
    transform: rotate(-10deg) translateY(90px);
    opacity: 0.88;
}

.feather-trans-5 {
    width: 130px;
    bottom: -10%;
    right: 30%;
    transform: rotate(30deg) translateY(70px);
    opacity: 0.8;
}

.feather-trans-6 {
    width: 220px;
    bottom: -30%;
    left: 15%;
    transform: rotate(-5deg) translateY(140px);
    opacity: 0.92;
    filter: blur(2px);
}

.feather-trans-7 {
    width: 170px;
    bottom: -22%;
    right: 45%;
    transform: rotate(20deg) translateY(110px);
    opacity: 0.87;
    filter: blur(1px);
}

.feather-trans-8 {
    width: 250px;
    bottom: -35%;
    left: 35%;
    transform: rotate(-15deg) translateY(160px);
    opacity: 0.93;
    filter: blur(3px);
}

/* ---------- LAYER 7: HERO TEXT ---------- */

.hero-text-container {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    overflow: visible;

    /* Behind front clouds (10) but in front of back clouds (8) */
    pointer-events: none;
}

.hero-main-text {
    font-family: 'Inter', sans-serif;
    font-size: clamp(5rem, 16vw, 12rem);
    /* Increased to 200% of previous max */
    font-weight: 800;
    text-align: center;
    line-height: 0.9;
    letter-spacing: 0;
    text-transform: none;

    /* Title case from HTML */

    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 30vh;
    /* Positioned such that the bottom is at the top of the boy */
    will-change: transform, opacity;
}

.text-glow-source {
    position: absolute;
    top: 5%;
    /* Shifted higher to only affect the top of the text */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120vw;
    height: 60vh;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
    opacity: 0.8;
}

.text-glow-source svg {
    width: 100%;
    height: 100%;
    filter: blur(60px);
}

.text-line-1-wrapper {
    display: grid;
    place-items: center;
    position: relative;
    white-space: nowrap;
    overflow: visible;
    width: auto;
    top: -20px;
}

.text-line-1 {
    display: block;
    grid-area: 1 / 1;
    /* Night Gradient Fill — applied per-span so absolute children render correctly */
    background: linear-gradient(to bottom, #fff7df 0%, #dfe7ff 26%, #5868c9 66%, #101848 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 40px;
    width: auto;
    will-change: opacity, filter;
}

.text-line-1-swap {
    width: auto;
    opacity: 0;
    visibility: hidden;
}


/* ---------- LAYER 7: TEXT OVERLAYS ---------- */

.hero-text-layer {
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}


/* --- Brand Logo --- */

.brand-logo {
    position: absolute;
    top: 36px;
    left: 48px;
    z-index: 25;
    opacity: 1;
    will-change: transform, opacity;
    pointer-events: auto;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.45em;
    color: var(--text-primary);
    text-transform: uppercase;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    position: relative;
}

.brand-name::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(97, 181, 100, 0.6),
            transparent);
}


/* --- Primary Tagline --- */

.hero-text-primary {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 21;
    text-align: center;
    opacity: 1;
    will-change: transform, opacity;
}

.tagline-primary {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 4.2rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.3;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.tagline-line {
    display: block;
}


/* --- Secondary Text --- */

.hero-text-secondary {
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 21;
    text-align: center;
    opacity: 1;
    will-change: transform, opacity;
}

.tagline-secondary {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}


/* --- CTA Button --- */

.hero-cta {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 22;
    opacity: 1;
    will-change: transform, opacity;
    pointer-events: auto;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: var(--text-primary);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(97, 181, 100, 0.1),
            rgba(255, 255, 255, 0.05));
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: inherit;
}

.cta-btn:hover {
    border-color: rgba(97, 181, 100, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(97, 181, 100, 0.15);
}

.cta-btn:hover::before {
    opacity: 1;
}

.cta-arrow {
    display: flex;
    align-items: center;
    transition: transform 0.4s ease;
}

.cta-btn:hover .cta-arrow {
    transform: translateX(4px);
}


/* ---------- LAYER 8: VIGNETTE ---------- */

.hero-vignette {
    z-index: 18;
    background: radial-gradient(ellipse 80% 80% at center,
            transparent 30%,
            rgba(10, 14, 26, 0.5) 100%);
}


/* ---------- LAYER 9: DREAMY GLOW ---------- */

.hero-glow {
    z-index: 4;
    opacity: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 50%,
            rgba(255, 220, 180, 0.08),
            transparent 70%);
    will-change: opacity;
}


/* =============================================
   ACT 2 — STREET NIGHT SCENE
   Sits directly under the hero. As hero slides
   up, this is revealed underneath — creating
   a "descending through the clouds" transition.
   ============================================= */

/* ---------- ACT 2: STREET TEXT POSITIONING ---------- */
.street-text-overlay {
    /* Unified vertical-centered, left-anchored placement shared
       by all four hero act text overlays. Vertical centering is
       applied via gsap (yPercent: -50) so the entrance x animation
       on the timeline doesn't clobber it. */
    position: absolute;
    top: 60%;
    left: 6.25%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    pointer-events: none;
    z-index: 10;
    text-align: left;
}

.street-text-top {
    font-family: 'Inter', sans-serif;
    font-size: clamp(33px, 6.2vw, 83px);
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.025em;
    font-feature-settings: "ss01", "cv11";
    font-optical-sizing: auto;
    background: linear-gradient(180deg,
            #ffffff 0%,
            #f4f7ff 35%,
            #d6dff5 75%,
            #aab8d6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Glow moved to the overlay wrappers below. drop-shadow on the SAME
       element as background-clip:text + transparent fill triggers the
       Chromium-on-Windows ghost-glyph rasterization bug (text painted
       twice at wrong line offsets). Parent-level drop-shadow produces the
       identical halo from the rendered glyph pixels, minus the bug. */
    filter: none;
    line-height: 1.1;
}

/* Story text glow — applied on the wrappers (which contain only the
   .street-text-top spans), not on the clipped spans themselves. Same
   visual halo, avoids the Windows ghost-text bug documented above. */
.street-text-overlay,
.bedroom-text-overlay,
.office-text-overlay,
.final-text-overlay {
    filter:
        drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 40px rgba(255, 244, 244, 0.31));
}

/* Flipping Text Logic */
.flipping-text-container {
    position: relative;
    height: 1.1em;
    /* Matches the .street-text-top line-height so the flipping word
       sits on the same vertical rhythm as the static lines above
       and below it (no visual squash on the act 2 stack). */
    overflow: visible;
    perspective: 1000px;
    display: flex;
    align-items: center;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Smoothly transition container width */
    will-change: width;
}

.flipping-word {
    display: block;
    position: relative;
    transform-origin: center bottom;
    transition: transform 0.8s cubic-bezier(0.6, 0, 0.4, 1), opacity 0.8s ease;
    backface-visibility: hidden;
    white-space: nowrap;
}

.flipping-word.active {
    transform: translateY(0) rotateX(0deg);
    opacity: 1;
    z-index: 2;
}

.flipping-word.out {
    transform: translateY(0%) rotateX(-90deg);
    opacity: 0;
    position: absolute;
    z-index: 1;
}

.flipping-word.in {
    transform: translateY(-10%) rotateX(90deg);
    opacity: 0;
    position: absolute;
    z-index: 1;
}

.street-text-bottom {
    font-family: 'Inter', sans-serif;
    font-size: clamp(16px, 2vw, 36px);
    font-weight: 500;
    letter-spacing: 1px;
    /* Tight tracking as requested */
    color: #fff;
    /* Changed to white */
    opacity: 1;
    /* Slightly muted for hierarchy */
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8),
        /* Deepened shadow for contrast */
        0 0 20px rgba(255, 255, 255, 0.849),
        /* Primary glow layer */
        0 0 40px rgba(255, 244, 244, 0.308);
    /* Atmospheric bloom */
    text-transform: uppercase;
}

/* ---------- BEDROOM TEXT OVERLAY ---------- */
.bedroom-text-overlay {
    position: absolute;
    top: 50%;
    left: 6.25%;
    /* Vertical centering via gsap (yPercent: -50). */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    pointer-events: none;
    z-index: 30;
    opacity: 0;
    text-align: left;
    will-change: opacity, transform;
}

/* ---------- OFFICE TEXT OVERLAY ---------- */
.office-text-overlay {
    position: absolute;
    top: 50%;
    left: 6.25%;
    /* Vertical centering is via gsap (yPercent: -50) so it
       composes with the entrance x animation. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    text-align: left;
    will-change: opacity, transform;
}

.office-text-overlay .street-text-top {
    font-style: italic;
}

/* ---------- FINAL TEXT OVERLAY ---------- */
.final-text-overlay {
    position: absolute;
    top: 50%;
    left: 6.25%;
    /* Vertical centering via gsap (yPercent: -50). */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    pointer-events: none;
    z-index: 70;
    opacity: 0;
    text-align: left;
    will-change: opacity, transform;
}

.final-sparsh-logo {
    height: clamp(69px, 11.5vw, 149px);
    width: auto;
    display: block;
    filter:
        drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
}

/* ---------- FINAL RIGHT CTAS ---------- */
.final-right-ctas {
    position: absolute;
    top: 50%;
    right: 6.25%;
    /* Vertical centering via gsap or css. Let's use CSS for base. */
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 25px;
    z-index: 70;
    opacity: 0;
    pointer-events: auto;
}

.final-right-btn {
    display: inline-flex;
    align-items: center;
    padding: 16px 42px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    color: #fff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.final-right-btn.explore-products {
    font-weight: 700;
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    border-color: #fff;
    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.4),
        0 0 40px rgba(255, 255, 255, 0.2);
}

.final-right-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(-8px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.final-right-btn.explore-products:hover {
    background: #ffffff;
    transform: translateX(-10px) scale(1.05);
    box-shadow:
        0 0 30px rgba(255, 255, 255, 0.6),
        0 0 60px rgba(255, 255, 255, 0.3),
        0 20px 50px rgba(0, 0, 0, 0.5);
}

@media (max-width: 850px) {
    .final-right-ctas {
        display: none !important;
    }
}

/* End of Hero Layers */


/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
    .brand-logo {
        top: 20px;
        left: 24px;
    }

    .brand-name {
        font-size: 1.2rem;
        letter-spacing: 0.35em;
    }

    .subject-single-img {
        width: 90vw;
    }

    .hero-text-secondary {
        bottom: 26%;
    }

    .hero-cta {
        bottom: 14%;
    }

    .cta-btn {
        padding: 14px 28px;
        font-size: 0.8rem;
    }

    /* Reduce feather sizes on mobile */
    .feather-front-1 {
        width: 60px;
    }

    .feather-front-2 {
        width: 50px;
    }

    .feather-front-3 {
        width: 70px;
    }

    .feather-front-4 {
        width: 45px;
    }

    .feather-front-5 {
        width: 55px;
    }

    .feather-trans-1 {
        width: 100px;
    }

    .feather-trans-2 {
        width: 80px;
    }

    .feather-trans-3 {
        width: 120px;
    }

    .feather-trans-4 {
        width: 90px;
    }

    .feather-trans-5 {
        width: 70px;
    }

    .feather-trans-6 {
        width: 130px;
    }

    .feather-trans-7 {
        width: 100px;
    }

    .feather-trans-8 {
        width: 150px;
    }
}

@media (max-width: 480px) {
    .tagline-primary {
        font-size: clamp(1.5rem, 6vw, 2.2rem);
    }

    .tagline-secondary {
        font-size: 0.85rem;
        letter-spacing: 0.1em;
    }
}


/* ---------- PRODUCTS PAGE UPGRADE ---------- */

.products-page {
    background: #030305;
    color: #fff;
    overflow-x: hidden;
}

/* Starry Background — base midnight sky.
   The flowing aurora light waves are layered above as separate
   pseudo-elements so each can animate on its own cadence.

   NOTE: Was previously `position: fixed` which glued the moon and
   stars to the viewport, causing them to overlap content on scroll.
   Now absolute so the ambient layer (moon + stars) scrolls with the
   page like the hero clouds — the moon "goes up with the clouds." */
.products-bg-ambient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, #0a0f1e 0%, #030305 100%);
    /* Soft fade at the bottom so the hero ambient melts into the page
       sky instead of cutting hard at 100vh. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}

/* Every non-homepage must be TRANSPARENT at the body level so the
   fixed `body::before` night-sky gradient (defined at end of file)
   can show through. Per CSS painting order, an opaque body bg paints
   AFTER a negative-z-index pseudo-element and would occlude it; making
   body transparent lets the fixed pseudo paint into the viewport on
   every scroll position. The `html` element carries the solid midnight
   fallback. The `html` prefix bumps specificity above pages.css and
   dealers.css overrides which load after style.css. */
html body.content-page,
html body.products-page,
html body.about-page,
html body.dealer-page,
html body.support-page,
html body.legal-page,
html body.foam-page,
html body.location-page,
html body.sku-page,
html body.pdp-page,
html body.blog-page,
html body.guide-page,
html body.faq-page,
html body.business-page,
html body.dealership-state-page {
    background: transparent;
}

/* Aurora light wave — primary sheet (cool teal → indigo, sweeping
   diagonally across the upper half of the viewport). */
.products-bg-ambient::before {
    content: '';
    position: absolute;
    inset: -20% -10%;
    background:
        linear-gradient(115deg,
            transparent 20%,
            rgba(70, 180, 200, 0.18) 35%,
            rgba(80, 130, 220, 0.28) 45%,
            rgba(120, 90, 220, 0.22) 55%,
            transparent 72%);
    filter: blur(60px);
    mix-blend-mode: screen;
    opacity: 0.75;
    animation: auroraSweep 22s ease-in-out infinite alternate;
    pointer-events: none;
    transform-origin: 50% 50%;
}

/* Aurora light wave — secondary sheet (warmer green-teal,
   slower, drifting in the opposite direction). */
.products-bg-ambient::after {
    content: '';
    position: absolute;
    inset: -25% -15%;
    background:
        linear-gradient(-65deg,
            transparent 25%,
            rgba(40, 200, 160, 0.14) 40%,
            rgba(70, 150, 230, 0.22) 50%,
            rgba(140, 100, 220, 0.16) 60%,
            transparent 78%);
    filter: blur(80px);
    mix-blend-mode: screen;
    opacity: 0.65;
    animation: auroraSweep2 32s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes auroraSweep {
    0% {
        transform: translate3d(-6%, -4%, 0) skewY(-3deg) scale(1.05);
        opacity: 0.55;
    }

    50% {
        opacity: 0.85;
    }

    100% {
        transform: translate3d(8%, 6%, 0) skewY(2deg) scale(1.1);
        opacity: 0.6;
    }
}

@keyframes auroraSweep2 {
    0% {
        transform: translate3d(8%, 6%, 0) skewY(2deg) scale(1.08);
        opacity: 0.45;
    }

    50% {
        opacity: 0.75;
    }

    100% {
        transform: translate3d(-10%, -4%, 0) skewY(-4deg) scale(1.12);
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {

    .products-bg-ambient::before,
    .products-bg-ambient::after {
        animation: none !important;
    }
}

.stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1.2px 1.2px at 10% 10%, #fff, transparent),
        radial-gradient(1px 1px at 20% 50%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 50% 30%, #fff, transparent),
        radial-gradient(1px 1px at 80% 80%, #fff, transparent),
        radial-gradient(2px 2px at 30% 90%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 70% 20%, #fff, transparent),
        radial-gradient(1px 1px at 40% 60%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 90% 10%, #fff, transparent),
        radial-gradient(1px 1px at 15% 85%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 60% 75%, #fff, transparent);
    background-size: 400px 400px;
    opacity: 0.5;
    animation: starsTwinkle 12s linear infinite;
}

@keyframes starsTwinkle {
    0% {
        opacity: 0.3;
        transform: translateY(0);
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 0.3;
        transform: translateY(-30px);
    }
}

/* Shooting Stars (Top-Right to Bottom-Left) */
.shooting-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.shooting-star {
    position: absolute;
    width: 150px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    filter: drop-shadow(0 0 5px #fff);
    border-radius: 999px;
    transform: rotate(110deg);
    /* Steeper angle: Top to Bottom */
    opacity: 0;
    animation: shooting-diagonal 3s linear infinite;
}

.shooting-star::before {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff, 0 0 20px #fff;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes shooting-diagonal {
    0% {
        transform: rotate(110deg) translateX(0);
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    100% {
        transform: rotate(110deg) translateX(2000px);
        /* Move all the way across */
        opacity: 0;
    }
}

/* Hero Section */
.products-hero {
    position: relative;
    width: 100%;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 180px 5% 100px;
    text-align: center;
    z-index: 10;
}

.products-hero-container {
    max-width: 1200px;
    width: 100%;
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.products-hero-text {
    opacity: 1;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.big-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    line-height: 1.1;
    margin-bottom: 25px;
    color: #ffffff;
    font-weight: 400;
    text-align: center;
}

.big-title .highlight {
    font-family: 'Inter', sans-serif;
    color: #61B564;
    font-style: italic;
    text-shadow: 0 0 40px rgba(97, 181, 100, 0.4);
}

.products-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 700px;
    margin: 0 auto;
    font-weight: 300;
    letter-spacing: 0.02em;
}

/* Legacy .hero-cloud / .cloud-left / .cloud-right kept as no-op for
   any stragglers — every page now uses the unified .deco-cloud system. */
.hero-cloud {
    display: none;
}

@keyframes cloudFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.05);
    }
}

/* Product Selection Toggle (Glass Style) */
.collection-toggle {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 12px;
    z-index: 100;
}

.toggle-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
    padding: 14px 36px;
    border-radius: 40px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 2px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.toggle-btn:hover {
    color: #fff;
    border-color: rgba(97, 181, 100, 0.5);
    background: rgba(97, 181, 100, 0.1);
    transform: translateY(-2px);
}

.toggle-btn.active {
    background: #61B564;
    color: #000;
    border-color: #61B564;
    box-shadow: 0 10px 30px rgba(97, 181, 100, 0.4);
}


/* Product Cards */
.products-gallery {
    padding: 40px 5% 150px;
}

.gallery-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 50px;
}

/* Hide mobile-only elements by default */
.mobile-filter-bar,
.sidebar-header-mobile {
    display: none;
}

.product-card {
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    cursor: pointer;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.product-card:hover {
    transform: translateY(-20px) scale(1.02);
    border-color: rgba(97, 181, 100, 0.4);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(97, 181, 100, 0.05);
}

.product-image-container {
    position: relative;
    padding: 50px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image {
    width: 100%;
    height: auto;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.product-card:hover .product-image {
    transform: scale(1.1) rotate(3deg);
}

.product-badge {
    position: absolute;
    top: 25px;
    right: 25px;
    background: #61B564;
    color: #000;
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-details {
    padding: 40px;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-tags {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.product-tags span {
    font-size: 0.8rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-price-row {
    margin: 15px 0 25px;
    display: flex;
    align-items: center;
}

.card-price {
    font-size: 1.6rem;
    font-weight: 700;
    color: #61B564;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.5px;
}


.product-tags i {
    color: #61B564;
}

.product-name {
    font-family: 'Inter', sans-serif;
    font-size: 2.2rem;
    margin-bottom: 15px;
    line-height: 1.2;
}

.product-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin-bottom: 30px;
}

.product-highlights,
.sku-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    font-family: 'Inter', sans-serif;
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

.product-highlights li,
.sku-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.product-highlights li + li,
.sku-highlights li + li {
    margin-top: 10px;
}

.highlight-dot {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #61B564;
    box-shadow: 0 0 0 4px rgba(97, 181, 100, 0.12);
    margin-top: 0.58em;
}

.highlight-text {
    flex: 1 1 auto;
    color: rgba(255, 255, 255, 0.72);
}

.product-action {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
    padding-top: 20px;
}

/* ---- Get a Quote / WhatsApp pair (product card CTA) ---- */
.quote-btn {
    flex: 1;
    height: 56px;
    background: linear-gradient(135deg, #6cc66f 0%, #4a9d4d 100%);
    color: #fff;
    border: none;
    padding: 0 26px;
    border-radius: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition:
        transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.4s ease,
        background 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    white-space: nowrap;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 10px 26px rgba(74, 157, 77, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Soft inner highlight at the top edge */
.quote-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 70% 100% at 50% -20%,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0) 65%);
    pointer-events: none;
}

/* Sweeping shine on hover */
.quote-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(110deg,
            transparent 0%,
            rgba(255, 255, 255, 0.35) 50%,
            transparent 100%);
    transform: skewX(-18deg);
    transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.quote-btn:hover {
    background: linear-gradient(135deg, #75d178 0%, #54ae57 100%);
    transform: translateY(-3px);
    box-shadow:
        0 16px 34px rgba(74, 157, 77, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.quote-btn:hover::before {
    left: 130%;
}

.quote-btn:active {
    transform: translateY(-1px);
    box-shadow:
        0 6px 14px rgba(74, 157, 77, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.quote-btn-transparent {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: none;
    color: #fff;
}

.quote-btn-transparent:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #61B564;
    box-shadow: 0 10px 25px rgba(97, 181, 100, 0.15);
}

.quote-btn-transparent::before,
.quote-btn-transparent::after {
    display: none;
}

.call-btn-mobile {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: none;
    /* Hidden by default on desktop */
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.3rem;
    transition: all 0.4s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.call-btn-mobile:active {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(0.95);
}

.whatsapp-btn-small {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #25D366 0%, #1ebd5b 100%);
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.55rem;
    transition:
        transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.4s ease,
        background 0.4s ease;
    text-decoration: none;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 10px 26px rgba(37, 211, 102, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Glossy highlight on the WhatsApp tile */
.whatsapp-btn-small::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 28% 22%,
            rgba(255, 255, 255, 0.36) 0%,
            rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}

.whatsapp-btn-small i {
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

.whatsapp-btn-small:hover {
    background: linear-gradient(135deg, #2eea73 0%, #25cd66 100%);
    transform: translateY(-3px) scale(1.05);
    box-shadow:
        0 16px 34px rgba(37, 211, 102, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.whatsapp-btn-small:hover i {
    transform: scale(1.12) rotate(-6deg);
}

.whatsapp-btn-small:active {
    transform: translateY(-1px) scale(1);
    box-shadow:
        0 6px 14px rgba(37, 211, 102, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

@media (max-width: 968px) {
    .big-title {
        font-size: 3.5rem;
    }

    .gallery-container {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   PRODUCT DETAIL PAGE
   ========================================================================== */

.product-detail-page {
    background: #020617;
    color: #fff;
    overflow-x: hidden;
}

.detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.product-detail-hero {
    padding-top: 140px;
    padding-bottom: 80px;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: start;
}

/* Image Gallery */
.main-image-wrapper {
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    margin-bottom: 20px;
}

.main-image-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5));
}

/* Info Panel */
.series-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(97, 181, 100, 0.1);
    color: #61B564;
    border: 1px solid rgba(97, 181, 100, 0.3);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.product-title {
    font-family: 'Inter', sans-serif;
    font-size: 3.5rem;
    margin-bottom: 10px;
    line-height: 1.1;
}

.product-tagline {
    font-size: 1.2rem;
    color: #94a3b8;
    margin-bottom: 30px;
    font-weight: 300;
}

.price-section {
    margin-bottom: 40px;
}

.price-section .currency {
    font-size: 1.5rem;
    color: #61B564;
}

.price-section .amount {
    font-size: 3rem;
    font-weight: 600;
    margin: 0 5px;
}

.price-suffix {
    color: #64748b;
    font-size: 0.9rem;
}

.config-group {
    margin-bottom: 25px;
}

.config-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.pill-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pill-selector .pill {
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.pill-selector .pill:hover {
    background: rgba(255, 255, 255, 0.1);
}

.pill-selector .pill.active {
    background: #fff;
    color: #020617;
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.glass-select {
    width: 100%;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    cursor: pointer;
}

.glass-select option {
    background: #0f172a;
}

.warranty-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    color: #61B564;
    font-size: 0.9rem;
}

.action-buttons {
    display: flex;
    gap: 15px;
}

.gold-btn {
    flex: 1;
    padding: 18px;
    background: #61B564;
    color: #000;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gold-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(97, 181, 100, 0.4);
}

.glass-btn {
    width: 60px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

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

/* Highlights Strip */
.highlights-strip {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 60px 0;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.highlight-item h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.highlight-item p {
    color: #64748b;
    font-size: 0.85rem;
}

.icon-circle {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
    background: rgba(97, 181, 100, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #61B564;
    font-size: 1.2rem;
}

/* Anatomy Section */
.material-layers-section {
    padding: 100px 0;
}

.section-title {
    font-family: 'Inter', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 60px;
}

.layers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.layer-stack {
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
}

.layer-bar {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 0.8rem;
    color: #94a3b8;
    position: relative;
    overflow: hidden;
}

.layer-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #61B564;
}

.layer-info-item {
    margin-bottom: 30px;
}

.layer-info-item h4 {
    font-size: 1.2rem;
    color: #61B564;
    margin-bottom: 5px;
}

.layer-info-item p {
    color: #94a3b8;
    line-height: 1.6;
}

/* Pricing Table */
.pricing-table-section {
    padding-bottom: 100px;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
}

.price-table th {
    text-align: left;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #64748b;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.price-table td {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.price-table tr:last-child td {
    border-bottom: none;
}

@media (max-width: 992px) {
    .detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .product-title {
        font-size: 2.5rem;
    }

    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .layers-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* --- PREMIUM LAYER VISUALIZATION --- */
.layers-visual {
    position: relative;
    padding: 20px;
    background: radial-gradient(circle at center, rgba(97, 181, 100, 0.05) 0%, transparent 80%);
    border-radius: 40px;
}

.layer-stack {
    display: flex;
    flex-direction: column-reverse;
    gap: 15px;
    perspective: 1000px;
}

.layer-bar {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: rotateX(10deg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.layer-bar:hover {
    transform: rotateX(0deg) translateY(-5px) scale(1.02);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(97, 181, 100, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.layer-bar span {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.layer-bar::after {
    content: '?';
    color: #61B564;
    opacity: 0;
    transition: all 0.3s ease;
    transform: translateX(-10px);
}

.layer-bar:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* --- PRICE TABLE ENHANCEMENTS --- */
.price-table-wrapper {
    padding: 30px;
    margin-top: 40px;
    border-radius: 30px;
}

.price-table th {
    font-family: 'Inter', sans-serif;
    letter-spacing: 2px;
    border-bottom: 2px solid rgba(97, 181, 100, 0.2);
    padding-bottom: 15px;
}

.price-table td {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
}

.price-table tr:hover td {
    color: #61B564;
    background: rgba(97, 181, 100, 0.03);
}

/* (Old central radial-glow rule removed — superseded by the
   aurora light-wave ::before / ::after defined earlier.) */

/* --- IMPROVED PRODUCT TAGS (GREEN) --- */
.product-tags {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.product-tags span {
    color: #61B564 !important;
    /* Force Brand Green */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(97, 181, 100, 0.2);
}

.product-tags i {
    font-size: 0.75rem;
    filter: drop-shadow(0 0 5px rgba(97, 181, 100, 0.4));
}

/* --- CINEMATIC SHOOTING STARS (DIAGONAL TRAILS) --- */
.shooting-star {
    position: absolute;
    width: 150px;
    height: 2px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
    transform: rotate(-45deg);
    pointer-events: none;
    z-index: 1;
    animation: shootingAnim 3s ease-in infinite;
    opacity: 0;
}

@keyframes shootingAnim {
    0% {
        transform: rotate(-45deg) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: rotate(-45deg) translateX(-1500px);
        opacity: 0;
    }
}

/* --- FORCED GALLERY VISIBILITY --- */
.products-page .products-gallery {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 500px;
    padding-top: 100px;
    background: transparent;
    z-index: 10;
    position: relative;
}

.gallery-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 40px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.product-card {
    opacity: 1 !important;
    transform: none !important;
    display: flex !important;
}

/* Lead Gen Buttons */
.btn-quote:hover {
    background: #e5c158 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(97, 181, 100, 0.3);
}

.btn-whatsapp:hover {
    background: #20ba5a !important;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

/* --- PRODUCTS FILTER BAR (REFINED) --- */
.filters-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 0 auto 60px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: fit-content;
    flex-wrap: wrap;
    position: relative;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-group label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-gold);
    font-weight: 700;
    opacity: 0.8;
}

.filter-group select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 20px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    min-width: 180px;
}

.filter-group select:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.filter-group select:focus {
    border-color: var(--accent-gold);
    background: rgba(97, 181, 100, 0.1);
    box-shadow: 0 0 20px rgba(97, 181, 100, 0.2);
}

/* --- SERIES HEADERS (REFINED) --- */
.series-header {
    grid-column: 1 / -1;
    margin-top: 60px;
    margin-bottom: 30px;
    position: relative;
    padding-left: 20px;
}

.series-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 100%;
    background: var(--accent-gold);
    border-radius: 2px;
    box-shadow: 0 0 15px var(--accent-gold);
}

.series-header h2 {
    font-family: 'Inter', sans-serif;
    font-size: 2.5rem;
    color: #fff;
    font-weight: 300;
    letter-spacing: 1px;
}

.product-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 20px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.product-specs span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-specs i {
    color: var(--accent-gold);
    width: 16px;
}

.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 100px 0;
    font-size: 1.2rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .filters-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .filter-group select {
        width: 100%;
        max-width: 300px;
    }
}

/* --- CUSTOM SELECT (GLASSMORPHED) --- */
.custom-select {
    position: relative;
    min-width: 200px;
}

.select-trigger {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 20px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.custom-select.open .select-trigger {
    border-color: var(--accent-gold);
    background: rgba(97, 181, 100, 0.1);
}

.select-trigger i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.custom-select.open .select-trigger i {
    transform: rotate(180deg);
}

.select-options {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    background: rgba(10, 15, 30, 0.92);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow-y: auto;
    max-height: 250px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}


.select-options::-webkit-scrollbar {
    width: 5px;
}

.select-options::-webkit-scrollbar-track {
    background: transparent;
}

.select-options::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.select-options::-webkit-scrollbar-thumb:hover {
    background: var(--accent-gold);
}

.custom-select.open .select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.option {
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.option.active {
    background: rgba(97, 181, 100, 0.2);
    color: var(--accent-gold);
    font-weight: 600;
}

/* --- PRODUCTS MAIN LAYOUT (SIDEBAR) --- */
.products-main-layout {
    display: flex;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    align-items: flex-start;
}

.filters-sidebar {
    width: 280px;
    position: sticky;
    top: 120px;
    /* Adjust based on navbar height */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    z-index: 100;
}

.gallery-container {
    flex-grow: 1;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 30px !important;
}

/* Adjust Custom Select for Sidebar */
.filters-sidebar .custom-select {
    width: 100%;
}

.filters-sidebar .select-options {
    position: absolute;
    top: 0;
    left: calc(100% + 15px);
    width: 240px;
    transform: translateX(10px);
}

.filters-sidebar .custom-select.open .select-options {
    transform: translateX(0);
}

@media (max-width: 1100px) {
    .products-main-layout {
        flex-direction: column;
        padding: 0 20px;
    }

    .filters-sidebar {
        width: 100%;
        position: relative;
        top: 0;
        margin-bottom: 40px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .filters-sidebar .filter-group {
        min-width: 200px;
    }

    .filters-sidebar .select-options {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        width: 100%;
        transform: translateY(-10px);
    }

    .filters-sidebar .custom-select.open .select-options {
        transform: translateY(0);
    }
}


/* =============================================
   MAIN PAGE HEADING — Inter Bold Italic
   Applies to the primary <h1> hero heading on
   each page (home, about, products, support, faqs,
   legal, blog index, individual blog posts).
   ============================================= */
.hero-main-text,
.about-heading,
.page-hero h1,
.blog-post>h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-style: italic;
}


/* =============================================
   DREAMY HEADING TREATMENT (sitewide)
   Premium silver→moonlit gradient text fill plus a
   soft multi-layer halo via drop-shadow filters
   (filter is used instead of text-shadow because
   text-shadow does not render on transparent fill).
   More-specific rules (hero overlays, .page-hero h1)
   override this where they need their own treatment.
   ============================================= */
h1,
h2,
h3,
h4,
h5,
h6,
.about-heading,
.about-subheading,
.section-title,
.section-heading,
.products-title,
.product-name,
.pdp-title,
.cta-heading,
.hero-title,
.hero-main-text,
.tagline-primary,
.tagline-secondary {
    background: linear-gradient(180deg,
            #ffffff 0%,
            #f4f7ff 35%,
            #d6dff5 75%,
            #aab8d6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* NO `filter` here. background-clip:text + transparent fill combined
       with drop-shadow filters triggers a Chromium-on-Windows GPU
       rasterization bug: glyph fragments get painted twice at wrong line
       offsets (ghost/overlapping headings). Mac's Metal backend doesn't
       reproduce, which is why it only showed on Windows. The halo the
       drop-shadows provided was near-invisible (≤0.18 alpha); the
       gradient alone carries the dreamy treatment. sleep-library.css
       already guards its clipped heading with `filter: none` for the
       same reason — keep it that way. */
    filter: none;
}

body.home-page .hero-main-text {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: inherit;
    -webkit-text-fill-color: currentColor;
    filter: none;
    text-shadow: none;
}

/* Italic accent inside a hero heading keeps its own colour
   (e.g. green "with Sparsh") — exempt from the gradient. */
.about-heading em,
.about-heading i,
.about-heading .accent,
.section-title em,
.section-title .accent,
.page-hero h1 .accent {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--accent-gold, #61B564);
    -webkit-text-fill-color: currentColor;
}

/* Inline-styled coloured text (e.g. <span style="color:#61B564">) needs
   the fill colour reset back to currentColor so the inline color wins. */
h1 [style*="color"],
h2 [style*="color"],
h3 [style*="color"],
.about-heading [style*="color"],
.section-title [style*="color"] {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
}

/* Hero overlay text now uses the same premium gradient + drop-shadow
   glow as the rest of the site — the .street-text-top rule above
   already provides the bespoke shadow stack, so no exemption needed. */


/* =============================================
   PREMIUM MINIMAL FOOTER
   Generous spacing, refined typography, subtle
   hover states, single thin divider between the
   main block and the legal/credit strip.
   ============================================= */
.footer {
    position: relative;
    z-index: 5;
    background:
        linear-gradient(180deg,
            rgba(8, 12, 24, 0) 0%,
            rgba(8, 12, 24, 0.6) 30%,
            rgba(8, 12, 24, 0.85) 100%);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Inter', sans-serif;
    margin-top: 120px;
    padding: 80px 24px 28px;
}

.footer::before {
    /* Hairline top divider */
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1180px, 90%);
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.12) 30%,
            rgba(255, 255, 255, 0.12) 70%,
            transparent 100%);
}

.footer-container {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) 2fr;
    gap: 80px;
    align-items: flex-start;
}

/* ---- Brand column ---- */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
}

.footer-brand img,
.footer-logo-link img {
    height: 52px;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.12));
}

.footer-tagline {
    font-size: 0.92rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
    max-width: 360px;
    margin: 0;
}

.footer-socials {
    display: flex;
    gap: 12px;
}

.footer-socials a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.02);
}

.footer-socials a:hover {
    color: #fff;
    border-color: rgba(97, 181, 100, 0.55);
    background: rgba(97, 181, 100, 0.12);
    transform: translateY(-2px);
}

/* ---- Link columns ---- */
.footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: 48px;
}

.link-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.link-group h4 {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-gold, #61B564);
    margin: 0 0 14px;
    /* Override the dreamy heading gradient/drop-shadow from the
       sitewide rule — these footer eyebrows want a flat gold tone. */
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: var(--accent-gold, #61B564);
    filter: none;
    text-shadow: none;
}

.link-group a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 2px 0;
    width: max-content;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.link-group a:hover {
    color: #fff;
    border-bottom-color: rgba(97, 181, 100, 0.6);
}

.link-group p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.88rem;
    line-height: 1.65;
    margin: 0;
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.85);
    margin-top: 8px;
}

/* ---- Bottom strip (legal + credit) ---- */
.footer-bottom {
    max-width: 1180px;
    margin: 56px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-bottom .footer-copy,
.footer-bottom p {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.25s ease;
    border-bottom: 1px solid transparent;
}

.footer-legal a:hover {
    color: #fff;
    border-bottom-color: rgba(97, 181, 100, 0.6);
}

/* The old separator dots are gone — gap handles the spacing now.
   But keep this rule so legacy markup with <span class="sep"> renders nothing weird. */
.footer-legal .sep {
    display: none;
}

.footer-credits,
.footer-credit {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    margin: 0;
}

.footer-credits a,
.footer-credit a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-credits a:hover,
.footer-credit a:hover {
    color: var(--accent-gold, #61B564);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .footer {
        padding: 64px 24px 24px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .footer-bottom {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .footer-links {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* =================================================================
   FULL-PAGE DREAMY NIGHT SKY (and daytime aurora light-mode mirror)
   =================================================================
   A fixed-position pseudo-element paints the sky into the viewport
   on every non-homepage. Decoupled from `background-attachment: fixed`
   so the sky covers every section, every scroll position, every
   browser — never collapses to flat black below the hero.

   z-index: -3 sits below `.products-bg-ambient` (z-index: -1) so the
   moon/aurora/stars still float above the deep sky in the hero band,
   then scroll out with the hero exactly as before. */
body.content-page::before,
body.products-page::before,
body.about-page::before,
body.dealer-page::before,
body.support-page::before,
body.legal-page::before,
body.foam-page::before,
body.location-page::before,
body.sku-page::before,
body.pdp-page::before,
body.blog-page::before,
body.guide-page::before,
body.faq-page::before,
body.business-page::before,
body.dealership-state-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    /* Uniformly dreamy midnight — never approaches black. The bottom
       of the gradient sits at #0a1226 which matches the html fallback,
       so any pixel below the hero ambient still reads as midnight blue,
       not a flat black band. Two subtle radial highlights add depth. */
    background:
        radial-gradient(ellipse 70% 40% at 18% 22%, rgba(80, 130, 200, 0.14), transparent 65%),
        radial-gradient(ellipse 60% 35% at 82% 28%, rgba(115, 85, 190, 0.12), transparent 65%),
        linear-gradient(180deg, #131c3a 0%, #0e1530 35%, #0c1328 70%, #0a1226 100%);
}

/* Starfield layer — a second pseudo on body that extends the hero's
   star-twinkle feeling across the entire page. Fixed, viewport-anchored,
   sits above the sky pseudo (-2) but still below `.products-bg-ambient`
   (-1) so the hero retains its richer moon/aurora overlay. */
body.content-page::after,
body.products-page::after,
body.about-page::after,
body.dealer-page::after,
body.support-page::after,
body.legal-page::after,
body.foam-page::after,
body.location-page::after,
body.sku-page::after,
body.pdp-page::after,
body.blog-page::after,
body.guide-page::after,
body.faq-page::after,
body.business-page::after,
body.dealership-state-page::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        radial-gradient(1.2px 1.2px at 8% 14%, rgba(255, 255, 255, 0.85), transparent 60%),
        radial-gradient(1px 1px at 22% 38%, rgba(255, 255, 255, 0.7), transparent 60%),
        radial-gradient(1.4px 1.4px at 41% 12%, rgba(255, 255, 255, 0.9), transparent 60%),
        radial-gradient(1px 1px at 56% 58%, rgba(255, 255, 255, 0.6), transparent 60%),
        radial-gradient(1.2px 1.2px at 70% 22%, rgba(255, 255, 255, 0.8), transparent 60%),
        radial-gradient(1px 1px at 88% 48%, rgba(255, 255, 255, 0.7), transparent 60%),
        radial-gradient(1.3px 1.3px at 15% 72%, rgba(255, 255, 255, 0.75), transparent 60%),
        radial-gradient(1px 1px at 33% 88%, rgba(255, 255, 255, 0.6), transparent 60%),
        radial-gradient(1.4px 1.4px at 62% 78%, rgba(255, 255, 255, 0.85), transparent 60%),
        radial-gradient(1px 1px at 79% 92%, rgba(255, 255, 255, 0.6), transparent 60%),
        radial-gradient(1.2px 1.2px at 93% 8%, rgba(255, 255, 255, 0.75), transparent 60%),
        radial-gradient(1px 1px at 47% 33%, rgba(255, 255, 255, 0.55), transparent 60%);
    opacity: 0.55;
}

/* Light-mode mirror: the same fixed pseudo, retuned to the daytime
   aurora palette so the dreamy continuity holds in both themes. */
body.light-mode:not(.home-page)::before {
    background:
        radial-gradient(ellipse 120% 60% at 15% 0%, rgba(120, 200, 255, 0.40) 0%, transparent 60%),
        radial-gradient(ellipse 100% 50% at 85% 5%, rgba(97, 181, 100, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(160, 210, 255, 0.28) 0%, transparent 50%),
        radial-gradient(ellipse 60% 30% at 30% 20%, rgba(97, 181, 100, 0.15) 0%, transparent 45%),
        radial-gradient(ellipse 70% 25% at 70% 15%, rgba(100, 170, 240, 0.18) 0%, transparent 40%),
        linear-gradient(170deg, #d6eeff 0%, #e8f5e9 35%, #dff0fb 60%, #eef4fc 100%);
    background-blend-mode: normal;
}

/* In light mode, the body must also be transparent so the aurora pseudo
   shows through. theme-toggle.css sets a body bg gradient — override it
   here (higher specificity via `html` prefix) and let the pseudo paint. */
html body.light-mode:not(.home-page) {
    background: transparent;
}

/* Light-mode fallback on html so the daytime palette is visible behind
   the aurora pseudo (analogous to the dark-mode `html { #050813 }`). */
/* Light-mode fallback on html so the daytime palette is visible behind
   the aurora pseudo (analogous to the dark-mode `html { #050813 }`). */
html:has(body.light-mode:not(.home-page)) {
    background-color: #eef4fc;
}

/* =============================================
   PRELOADER SYSTEM
   ============================================= */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #02050f 0%, #060b1e 40%, #0a1128 100%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: all;
    will-change: opacity;
    overflow: visible;
}

#preloader.fade-out {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

#preloader-moon {
    position: absolute;
    top: 4%;
    left: 72%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: transparent;
    box-shadow: -15px 15px 0 0 #fffdeb;
    filter: drop-shadow(0 0 15px rgba(255, 253, 235, 0.4)) drop-shadow(0 0 40px rgba(255, 253, 235, 0.2));
    transform: rotate(-15deg);
    will-change: transform;
    animation: moonFloatPre 6s ease-in-out infinite;
}

@keyframes moonFloatPre {

    0%,
    100% {
        transform: rotate(-15deg) translateY(0);
    }

    50% {
        transform: rotate(-15deg) translateY(-20px);
    }
}

#preloader-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#preloader-shooting-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
}

#preloader-content {
    position: relative;
    width: 42%;
    max-width: 280px;
    aspect-ratio: 948.5 / 522.8;
    display: flex;
    justify-content: center;
    align-items: center;
}

#preloader-logo {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

#preloader-logo .st-pre {
    fill: #FFFFFF;
}

/* ── Loading Bar ── */
#preloader-bar-track {
    position: relative;
    margin-top: 80px;
    width: 55%;
    max-width: 400px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15), 0 0 30px rgba(255, 255, 255, 0.05);
}

#preloader-bar-fill {
    width: 0%;
    height: 100%;
    background: #61B564;
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(97, 181, 100, 0.9), 0 0 50px rgba(97, 181, 100, 0.5), 0 0 80px rgba(97, 181, 100, 0.25);
    will-change: width;
}

#preloader-bar-percent {
    margin-top: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

@media (max-width: 768px) {
    #preloader-bar-track {
        margin-top: 40px;
    }
}

@media (max-width: 480px) {
    #preloader-bar-track {
        margin-top: 36px;
    }
}

/* Scroll lock gate for the body and html while preloader plays */
html.preloader-active {
    overflow: hidden !important;
    height: 100vh !important;
}

html.preloader-active body {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Bypass rule for returning users */
html.preloader-bypass #preloader {
    display: none !important;
}