/* Base Styles */
        body {
            background-color: #000000;
            color: #FFFFFF;
            font-family: 'Roboto', sans-serif;
            overflow-x: hidden;
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-crosshair"><circle cx="12" cy="12" r="10"/><line x1="22" x2="18" y1="12" y2="12"/><line x1="6" x2="2" y1="12" y2="12"/><line x1="12" x2="12" y1="6" y2="2"/><line x1="12" x2="12" y1="22" y2="18"/></svg>') 8 8, auto;
        }
        
        /* 1. Glitch Effect */
        .glitch-text {
            animation: glitch 1.5s infinite alternate;
            text-shadow: 2px 2px #333333;
        }
        @keyframes glitch {
            0% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(3px, 3px); }
            80% { transform: translate(1px, -1px); }
            100% { transform: translate(0); }
        }

        /* 2. Custom Scrollbar for Lookbook */
        .lookbook-scroll {
            scrollbar-width: none; /* Firefox */
        }
        .lookbook-scroll::-webkit-scrollbar {
            display: none; /* Chrome, Safari */
        }

        /* 3. Hero Text Typing Animation */
        #typing-text span {
            display: inline-block;
            overflow: hidden;
            border-right: 0.15em solid #FFFFFF;
            white-space: nowrap;
            margin: 0;
            animation: typing 4s steps(27, end) 1s forwards, 
                       blink-caret 0.75s step-end infinite;
            width: 0;
        }

        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #FFFFFF; }
        }

        /* 4. Marquee Style for Lookbook CTA */
        .marquee {
            white-space: nowrap;
            overflow: hidden;
            display: inline-block;
            animation: marquee 10s linear infinite;
        }
        @keyframes marquee {
            0%   { transform: translate(0, 0); }
            100% { transform: translate(-100%, 0); }
        }

        /* 5. Inversion Hover Effect */
        .invert-hover {
            transition: all 0.2s ease-in-out;
        }
        .invert-hover:hover {
            filter: invert(1);
            color: #000000;
            background-color: #FFFFFF;
        }

        /* 6. Scanline Texture Overlay */
        .scanline-overlay::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: repeating-linear-gradient(
                to bottom,
                transparent 0px,
                transparent 1px,
                rgba(255, 255, 255, 0.05) 1px,
                rgba(255, 255, 255, 0.05) 2px
            );
            z-index: 10;
        }

    .marquee {
    display: inline-flex;
    animation: marqueeScroll 20s linear infinite;
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}