:root {
            --teal: #5F9598;
            --cream: #FFE2AF;
            --dark: #2A2A2A;
        }

        body {
            background-color: var(--cream);
            color: var(--dark);
            font-family: 'Space Grotesk', sans-serif;
            margin: 0;
            overflow-x: hidden;
        }

        .creepster { font-family: "Creepster", system-ui; font-weight: 400; }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: var(--cream); }
        ::-webkit-scrollbar-thumb { background: var(--teal); }

        .bg-teal { background-color: var(--teal); }
        .text-teal { color: var(--teal); }
        .border-teal { border-color: var(--teal); }
        .bg-cream { background-color: var(--cream); }
        .text-cream { color: var(--cream); }
        .bg-dark { background-color: var(--dark); }
        .text-dark { color: var(--dark); }

        .btn-action {
            background-color: var(--teal);
            color: var(--cream);
            padding: 12px 24px;
            border-radius: 4px;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
        }
        .btn-action:hover {
            background-color: var(--dark);
            transform: scale(1.05);
        }

        .nav-link {
            position: relative;
            cursor: pointer;
            padding: 5px 0;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0;
            width: 0; height: 2px;
            background: var(--teal);
            transition: width 0.3s;
        }
        .nav-link:hover::after { width: 100%; }

        .page { display: none; min-height: 100vh; }
        .page.active { display: block; animation: pageIn 0.6s ease-out; }
        @keyframes pageIn {
            from { opacity: 0; filter: blur(10px); }
            to { opacity: 1; filter: blur(0); }
        }

        /* Modal / Popup */
        .modal-overlay {
            position: fixed; inset: 0; background: rgba(42, 42, 42, 0.9);
            z-index: 9999; display: none; align-items: center; justify-content: center;
            padding: 20px;
        }
        .modal-body {
            background: var(--cream); width: 100%; max-width: 800px;
            max-height: 80vh; overflow-y: auto; padding: 40px; border: 4px solid var(--teal);
        }

        .cart-count {
            background: var(--dark); color: var(--cream);
            font-size: 10px; padding: 2px 6px; border-radius: 50%;
            position: absolute; top: -5px; right: -5px;
        }

        .section-long { padding: 100px 20px; }