@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #0f172a; /* slate-900 */
            color: #f8fafc; /* slate-50 */
            overflow-x: hidden; /* Prevent horizontal scroll from animations */
        }   

        @media (min-width: 768px) {
            .md\:text-6xl {
                line-height: 1.12 !important;
            }

            .px-4{
                padding-left: 5rem !important;
                padding-right: 5rem !important; 
            }  
        }    
        
        .hero-gradient-animated {
            background: linear-gradient(135deg, rgba(88, 52, 135, 0.85) 0%, rgba(15, 23, 42, 0.9) 50%, rgba(88, 52, 135, 0.7) 100%);
            background-size: 200% 200%;
            animation: gradientAnimation 15s ease infinite;
        }

        @keyframes gradientAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .service-card, .benefit-item, .differentiator-item, .testimonial-card, .faq-item {
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }
        .service-card:hover, .benefit-item:hover, .differentiator-item:hover, .testimonial-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 15px 30px rgba(88, 52, 135, 0.35);
            border-color: #a855f7; /* purple-500 */
        }
        .service-card .service-icon, .differentiator-item .diff-icon {
            transition: transform 0.3s ease;
        }
        .service-card:hover .service-icon, .differentiator-item:hover .diff-icon {
            transform: rotateY(360deg) scale(1.1);
        }
        
        .process-step-line {
            content: '';
            position: absolute;
            top: 0;
            left: 23px; /* Adjusted for 1.5rem icon width / 2 */
            height: 0; /* Animated by JS */
            width: 4px;
            background: #7e22ce; /* purple-700 */
            transition: height 1s ease-out;
            z-index: 0;
        }
        .process-step-circle {
            transition: transform 0.3s ease, background-color 0.3s ease;
        }
        .process-step:hover .process-step-circle {
            transform: scale(1.15);
            background-color: #9333ea; /* purple-600 */
        }
        
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out, padding 0.5s ease-out;
            padding-top: 0;
            padding-bottom: 0;
        }
        .faq-item.open .faq-answer {
            max-height: 300px; /* Adjust as needed for content */
            padding-top: 0.75rem; /* mt-3 */
            padding-bottom: 0.75rem; /* mb-3 */
        }
        .faq-icon {
            transition: transform 0.3s ease;
        }
        .faq-item.open .faq-icon {
            transform: rotate(180deg);
        }

        /* Scroll-triggered Animations */
        .animate-on-scroll {
            opacity: 0;
            transition: opacity 0.7s ease-out, transform 0.7s ease-out;
        }
        .fade-in { transform: translateY(30px); }
        .fade-in.is-visible { opacity: 1; transform: translateY(0); }

        .slide-in-left { transform: translateX(-50px); }
        .slide-in-left.is-visible { opacity: 1; transform: translateX(0); }
        
        .slide-in-right { transform: translateX(50px); }
        .slide-in-right.is-visible { opacity: 1; transform: translateX(0); }

        .scale-up { transform: scale(0.9); }
        .scale-up.is-visible { opacity: 1; transform: scale(1); }

        .nav-link-underline::after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: #a855f7; /* purple-500 */
            transition: width .3s;
            margin-top: 2px;
        }
        .nav-link-underline:hover::after, .nav-link-underline.active::after {
            width: 100%;
        }

        /* Mobile Menu */
        #mobile-menu {
            transition: transform 0.3s ease-in-out;
        }
        #mobile-menu.hidden {
            transform: translateX(100%);
        }

        .hero-text-reveal > * {
            opacity: 0;
            transform: translateY(20px);
            animation: textReveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }
        @keyframes textReveal {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .hero-text-reveal h1 { animation-delay: 0.2s; }
        .hero-text-reveal p { animation-delay: 0.4s; }
        .hero-text-reveal div { animation-delay: 0.6s; }

        /* Button hover glow */
        .btn-glow {
            position: relative;
            overflow: hidden;
        }
        .btn-glow:hover::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300%;
            height: 300%;
            background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, rgba(168, 85, 247, 0) 70%);
            transform: translate(-50%, -50%);
            animation: glowPulse 1.5s linear infinite;
            pointer-events: none;
        }
        @keyframes glowPulse {
            0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
            50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
            100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
        }