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

body {
    font-family: 'Manrope', sans-serif;
    overflow-x: hidden;
}

h1,
h2,
h3,
.nav-item {
    font-family: 'Epilogue', sans-serif;
}

/* --- Extracted Inline Styles --- */
.hero-scrolling-bg { color: #233914; }
.text-brand-darkgreen { color: #233914; }
.text-brand-dark { color: #1a2a0f; }
.hero-parallax-bg { background-color: rgba(193, 208, 74, 0.2); }
.bg-grid-pattern {
    background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M54.627 0l.83.83-54.627 54.627-.83-.83z\' fill=\'%231a2a0f\' fill-rule=\'evenodd\'/%3E%3C/svg%3E');
}
.lineup-section-bg {
    background: radial-gradient(circle at 30% 30%, rgba(193, 208, 74, 0.15) 0%, transparent 50%), 
                radial-gradient(circle at 70% 70%, rgba(230, 139, 43, 0.1) 0%, transparent 60%);
}
.inquiry-section-bg {
    background: linear-gradient(135deg, #233914 0%, #2f4f1a 100%);
}
.inquiry-snowflake-style {
    font-variation-settings: 'FILL' 1;
    font-size: 240px;
}
.product-panel-scroll {
    overscroll-behavior: contain;
    max-height: 15rem; /* max-h-60 */
    overflow-y: auto;
}
.kinetic-typography-stroke {
    -webkit-text-stroke: 1px rgba(193, 208, 74, 0.4);
}
.font-variation-fill {
    font-variation-settings: 'FILL' 1;
}
.will-change-transform { will-change: transform; }
.will-change-transform-opacity { will-change: transform, opacity; }

:root {
    --vida-green: #c1d04a;
    --vida-orange: #e68b2b;
    --vida-forest: #233914;
}

.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.magnetic-btn {
    position: relative;
}

@keyframes shake {

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

    25% {
        transform: translateX(-8px);
    }

    75% {
        transform: translateX(8px);
    }
}

.shake-animation {
    animation: shake 0.3s ease-in-out;
}

@keyframes floatBubble {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        transform: translateY(-20vh) scale(1);
        opacity: 0;
    }
}

.bubble {
    position: fixed;
    bottom: -20px;
    background: radial-gradient(circle, rgba(193, 208, 74, 0.3) 0%, rgba(230, 139, 43, 0.2) 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: floatBubble linear infinite;
}

.hero-char {
    display: inline-block;
    will-change: transform, opacity;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--vida-green);
    border-radius: 4px;
}

/* ====== GSAP INITIAL STATES — prevents flash before animations fire ====== */
#mainNav {
    opacity: 0;
    transform: translateY(-100px);
}

.hero-word {
    opacity: 0;
    transform: translateY(50px);
}

#heroSubtext {
    opacity: 0;
    transform: translateY(40px);
}

.hero-btn-wrapper {
    opacity: 0;
    transform: translateY(30px);
}

#floatingBottle {
    opacity: 0;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - 1.5rem));
    }
}

.animate-marquee {
    animation: marquee 35s linear infinite;
}