      :root {
            --primary: #10b981;
            --dark-bg: #050505;
            --dark-card: rgba(22, 22, 22, 0.7);
            --glass-border: rgba(255, 255, 255, 0.1);
        }

        /* Base Body Styling */
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            transition: background-color 0.3s, color 0.3s;
        }

        .glass-card {
            background: var(--dark-card);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            transition: background 0.3s, border 0.3s;
        }
        .light .glass-card {
            background: rgba(255, 255, 255, 0.6);
            border-color: rgba(0,0,0,0.08);
        }

        /* Animated Gradient Background */
        body::before {
            content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
            background: radial-gradient(circle at 15% 25%, rgba(16, 185, 129, 0.2), transparent 40%),
                        radial-gradient(circle at 85% 75%, rgba(59, 130, 246, 0.2), transparent 40%);
            animation: gradient-flow 20s ease-in-out infinite;
        }
        .light body::before {
             background: radial-gradient(circle at 15% 25%, rgba(16, 185, 129, 0.1), transparent 40%),
                         radial-gradient(circle at 85% 75%, rgba(59, 130, 246, 0.1), transparent 40%);
        }

        @keyframes gradient-flow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Reveal on Scroll Animation */
        .reveal-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .reveal-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* CSS Marquee for Tools Slider */
        .tools-marquee { overflow: hidden; position: relative; width: 100%; }
        .tools-marquee-content { display: flex; width: fit-content; animation: marquee 30s linear infinite; }
        .tools-marquee:hover .tools-marquee-content { animation-play-state: paused; }
        .tool-icon { flex-shrink: 0; padding: 0 40px; display: flex; justify-content: center; align-items: center; }
        @keyframes marquee {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }
        
        /* Swiper Carousel Styling */
        .swiper-wrapper { will-change: transform; }
        .coverflow-slider .swiper-slide { width: 70%; max-width: 450px; }
        @media (min-width: 768px) { .coverflow-slider .swiper-slide { width: 50%; max-width: 400px; } }
        
        .swiper-button-next, .swiper-button-prev { color: var(--primary) !important; }
        .light .swiper-button-next, .light .swiper-button-prev { color: #050505 !important; }
        .swiper-button-next:after, .swiper-button-prev:after { font-size: 1.75rem !important; font-weight: 800; }