:root {
            --brown: #452829;
            --purple: #8C00FF;
            --beige: #E8D1C5;
            --white: #ffffff;
        }

        body {
            font-family: 'Quicksand', sans-serif;
            background-color: var(--white);
            color: var(--brown);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* --- Animation System --- */
        .reveal-left {
            opacity: 0;
            transform: translateX(-150px);
            transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .reveal-left.active {
            opacity: 1;
            transform: translateX(0);
        }

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

        .hover-zoom {
            overflow: hidden;
        }
        .hover-zoom img {
            transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .hover-zoom:hover img {
            transform: scale(1.1);
        }

        /* --- Layout & Colors --- */
        .bg-brown { background-color: var(--brown); }
        .bg-purple { background-color: var(--purple); }
        .bg-beige { background-color: var(--beige); }
        .text-purple { color: var(--purple); }
        .text-brown { color: var(--brown); }
        .border-purple { border-color: var(--purple); }
        .border-brown { border-color: var(--brown); }

        /* Custom Scrollbar for horizontal product scroll */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* Header Hover Effect */
        .nav-link {
            position: relative;
            transition: color 0.3s ease;
        }
        .nav-link:hover { color: var(--purple); }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--purple);
            transition: width 0.3s ease;
        }
        .nav-link:hover::after { width: 100%; }

        /* Hero Animation Background */
        @keyframes subtleZoom {
            from { transform: scale(1); }
            to { transform: scale(1.15); }
        }
        .hero-bg-anim {
            animation: subtleZoom 20s infinite alternate ease-in-out;
        }

        /* Mobile Menu */
        #mobile-nav {
            transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        }

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