:root {
            --color-lime: #A3D900;
            --color-orange: #FF7F11;
            --color-charcoal: #333333;
            --color-light-gray: #F5F5F5;
            --font-heading: 'Poppins', sans-serif;
            --font-body: 'Inter', sans-serif;
        }
        body {
            font-family: var(--font-body);
            color: var(--color-charcoal);
            background-color: var(--color-light-gray);
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
            font-weight: 700;
        }
        
    

        /* --- Active Nav Link --- */
        .nav-link.active {
            color: var(--color-lime);
            border-bottom: 2px solid var(--color-lime);
        }

        /* --- Card Hover --- */
        .card-hover {
            @apply transition-all duration-300 rounded-lg overflow-hidden hover:shadow-2xl hover:-translate-y-2;
        }

        /* --- Hero Slideshow --- */
        .slide {
            animation: slideShow 12s infinite;
        }
        @keyframes slideShow {
            0%, 25%, 100% { opacity: 0; }
            5%, 20% { opacity: 1; }
        }

        /* --- Vertical Tool Scroll --- */
        .tool-scroll-track {
            animation: verticalScroll 15s linear infinite;
        }
        @keyframes verticalScroll {
            0% { transform: translateY(0); }
            100% { transform: translateY(-50%); }
        }

        /* --- Floating Gears --- */
        .floating-gear {
            animation: float 10s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(45deg); }
        }
        
        /* --- Typewriter --- */
        .typewriter h1 {
            overflow: hidden;
            border-right: .15em solid var(--color-orange);
            white-space: nowrap;
            margin: 0 auto;
            animation: 
                typing 3.5s steps(30, end),
                blink-caret .75s step-end infinite;
        }
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: var(--color-orange); }
        }
        
        /* --- Fade-in on Scroll --- */
        .fade-in-section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* --- Cart Count Bubble --- */
        #cart-count {
            @apply absolute -top-2 -right-3 bg-orange-500 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center;
            display: none; /* Hidden by default */
        }