:root {
            --midnight: #08090A;
            --charcoal: #121417;
            --emerald: #2D5A4C;
            --soft-white: #F8F9FA;
            --muted-gold: #C5A059;
        }

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

        .font-serif { font-family: 'Playfair Display', serif; }

        /* Elegant Scrollbar */
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: var(--midnight); }
        ::-webkit-scrollbar-thumb { background: var(--emerald); border-radius: 10px; }

        /* Glassmorphism & UI */
        .glass {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .card-hover {
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .card-hover:hover {
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-8px);
            border-color: var(--emerald);
        }

        .btn-primary {
            background-color: var(--emerald);
            color: white;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-color: #3d7a67;
            letter-spacing: 1px;
        }

        .nav-link {
            position: relative;
            opacity: 0.7;
            transition: opacity 0.3s;
        }

        .nav-link:hover { opacity: 1; }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -4px;
            left: 0;
            background-color: var(--emerald);
            transition: width 0.3s;
        }
        .nav-link:hover::after { width: 100%; }

        /* Animations */
        .fade-in {
            animation: fadeIn 1.2s ease forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .market-line {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: dash 5s linear infinite;
        }

        @keyframes dash {
            to { stroke-dashoffset: 0; }
        }

        .active-filter {
            color: var(--emerald);
            border-bottom: 2px solid var(--emerald);
        }

        /* Cart Sidebar */
        #cart-sidebar {
            transition: transform 0.6s cubic-bezier(0.82, 0.08, 0.25, 1);
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .bg-mesh {
            background-image: radial-gradient(at 0% 0%, hsla(161,33%,18%,0.15) 0, transparent 50%), 
                              radial-gradient(at 50% 0%, hsla(161,33%,18%,0.05) 0, transparent 50%);
        }