@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
        
        * {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        :root {
            --primary-blue: #003D6D;
            --primary-orange: #FF6B35;
            --accent-yellow: #FFC107;
            --light-gray: #F8FAFC;
        }
        
        body {
            background: #ffffff;
        }
        
        .hero-gradient {
            background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
            position: relative;
            overflow: hidden;
        }
        
        /* Animated Background Icons */
        .floating-icon {
            position: absolute;
            opacity: 0.08;
            animation: float 20s infinite ease-in-out;
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0px) translateX(0px) rotate(0deg);
            }
            25% {
                transform: translateY(-30px) translateX(20px) rotate(5deg);
            }
            50% {
                transform: translateY(-60px) translateX(-20px) rotate(-5deg);
            }
            75% {
                transform: translateY(-30px) translateX(20px) rotate(5deg);
            }
        }
        
        .floating-icon:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; font-size: 4rem; }
        .floating-icon:nth-child(2) { top: 20%; right: 10%; animation-delay: 2s; font-size: 3rem; }
        .floating-icon:nth-child(3) { top: 40%; left: 15%; animation-delay: 4s; font-size: 3.5rem; }
        .floating-icon:nth-child(4) { top: 60%; right: 5%; animation-delay: 6s; font-size: 4rem; }
        .floating-icon:nth-child(5) { top: 70%; left: 10%; animation-delay: 8s; font-size: 3rem; }
        .floating-icon:nth-child(6) { top: 30%; right: 20%; animation-delay: 10s; font-size: 3.5rem; }
        
        .text-gradient {
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .fade-in {
            animation: fadeIn 0.8s ease-out forwards;
            opacity: 0;
        }
        
        @keyframes fadeIn {
            to { opacity: 1; }
        }
        
        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
        .delay-4 { animation-delay: 0.4s; }
        
        .btn-primary {
            background: var(--primary-blue);
            color: #fff;
            transition: all 0.2s ease;
        }
        
        .btn-primary:hover {
            background: #002952;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 61, 109, 0.3);
        }
        
        .btn-secondary {
            background: #fff;
            color: var(--primary-blue);
            border: 1px solid #e5e7eb;
            transition: all 0.2s ease;
        }
        
        .btn-secondary:hover {
            border-color: var(--primary-blue);
            background: #fafafa;
        }
        
        .btn-orange {
            background: var(--primary-orange);
            color: #fff;
            transition: all 0.2s ease;
        }
        
        .btn-orange:hover {
            background: #E55A2A;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
        }
        
        .feature-card {
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-4px);
        }
        
        .screenshot-shadow {
            box-shadow: 0 20px 60px rgba(0, 61, 109, 0.12);
        }
        
        .subtle-border {
            border: 1px solid rgba(0, 0, 0, 0.06);
        }
        
        .nav-blur {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
        }
        
        .text-balance {
            text-wrap: balance;
        }
        
        .accent-dot {
            background: var(--primary-orange);
        }

        /* Carousel Styles */
        .carousel-slide {
            opacity: 0;
            transform: scale(0.95);
            transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
        }

        .carousel-slide.active {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
        }

        .carousel-slide img {
            transition: transform 0.3s ease;
        }

        .carousel-slide.active img {
            animation: zoomIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        @keyframes zoomIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .carousel-dot.active {
            width: 24px;
            background: var(--primary-blue);
        }

        .carousel-dot {
            cursor: pointer;
        }