:root {
            --neon-pink: #F806CC;
            --deep-indigo: #270082;
            --gold: #ECB365;
            --white: #ffffff;
        }

        body {
            background-color: var(--white);
            color: var(--deep-indigo);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* --- GLOBAL STYLES --- */
        .handwritten { font-family: 'Edu VIC WA NT Hand', cursive; }
        
        .bg-indigo { background-color: var(--deep-indigo); }
        .bg-pink { background-color: var(--neon-pink); }
        .bg-gold { background-color: var(--gold); }
        .text-pink { color: var(--neon-pink); }
        .text-gold { color: var(--gold); }
        .border-pink { border-color: var(--neon-pink); }

        /* --- COUPON CUT-OUT DESIGN --- */
        .coupon-card {
            background: white;
            position: relative;
            border: 3px dashed var(--deep-indigo);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
        }

        .coupon-card::before, .coupon-card::after {
            content: "";
            position: absolute;
            width: 34px;
            height: 34px;
            background: transparent;
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
            border: 3px dashed var(--deep-indigo);
            z-index: 10;
        }
        .coupon-card::before { left: -20px; background: inherit; border-left: none; }
        .coupon-card::after { right: -20px; background: inherit; border-right: none; }

        .coupon-card:hover {
            transform: rotate(-1.5deg) translateY(-5px);
            box-shadow: 12px 12px 0px var(--neon-pink);
            z-index: 20;
        }

        /* --- ANIMATIONS --- */
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .marquee-content {
            display: inline-flex;
            animation: marquee 40s linear infinite;
        }
        .marquee-content:hover { animation-play-state: paused; }

        .reveal-node { opacity: 0; transform: translateY(40px); transition: all 0.7s ease; }
        .reveal-node.active { opacity: 1; transform: translateY(0); }

        /* --- SEARCH MODAL --- */
        #search-overlay {
            backdrop-filter: blur(10px);
            background: rgba(39, 0, 130, 0.95);
        }

        /* --- HERO BG ANIMATION --- */
        .hero-bg {
            background: linear-gradient(-45deg, #F806CC, #270082, #F806CC, #270082);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .page { display: none; }
        .page.active { display: block; }

        /* --- HAMBURGER --- */
        .hamburger-line {
            width: 30px;
            height: 4px;
            background: white;
            margin: 6px 0;
            transition: 0.4s;
        }
        .open .line1 { transform: rotate(-45deg) translate(-5px, 6px); }
        .open .line2 { opacity: 0; }
        .open .line3 { transform: rotate(45deg) translate(-5px, -6px); }