.hero {
                        color: #ffffff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            min-height: 50vh;
            padding: 2rem;
            max-width: 1400px;
            margin: 0 auto;
            align-items: center;
            gap: 4rem;
        }
        
        .hero-content {
            flex: 1;
        }

        
        .hero-subhead {
            font-size: 1.25rem;
            margin-bottom: 2.5rem;
            color: #a8b2d1;
            max-width: 90%;
        }
        
        .hero-buttons {
            display: flex;
            gap: 1rem;
        }
        

        

        

        

        .animation-container {
            flex: 1;
            height: 500px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* AI Brain Visualization */
        .ai-brain {
            position: relative;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            background: rgba(0, 245, 212, 0.05);
            box-shadow: 0 0 100px rgba(0, 245, 212, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        
        .brain-inner {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(0, 187, 249, 0.1);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: pulse 4s infinite ease-in-out;
        }
        
        .brain-core {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #0095ff 0%, #00bbf9 100%);
            animation: glow 3s infinite alternate;
            box-shadow: 0 0 50px rgb(0 179 245 / 50%);
        }
        
        /* Neural Connections */
        .neural-connection {
            position: absolute;
            background: linear-gradient(90deg, #0095ff, #00bbf9);
            height: 2px;
            transform-origin: center;
        }
        
        /* Data Nodes */
        .data-node {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: linear-gradient(135deg, #0095ff 0%, #00bbf9 100%);
            z-index: 10;
        }
        
        /* Data Flow Lines */
        .data-flow {
            position: absolute;
            width: 4px;
            height: 100px;
            background: linear-gradient(to bottom, transparent, #0095ff, transparent);
            opacity: 0.7;
        }
        
        /* Data Points */
        .data-point {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #00bbf9;
            opacity: 0;
        }
        
        /* Data Processing Visualization */
        .data-processing {
            position: absolute;
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .processing-ring {
            position: absolute;
            width: 250px;
            height: 250px;
            border: 2px solid rgba(0, 245, 212, 0.2);
            border-radius: 50%;
            border-top-color: #0095ff;
            border-bottom-color: #00bbf9;
            animation: rotate 10s infinite linear;
        }
        
        .processing-ring:nth-child(2) {
            width: 200px;
            height: 200px;
            animation: rotate 8s infinite linear reverse;
        }
        
        .processing-ring:nth-child(3) {
            width: 150px;
            height: 150px;
            animation: rotate 6s infinite linear;
        }
        
        /* Output Visualization */
        .output-visualization {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        
        .insight-node {
            position: absolute;
            background: linear-gradient(135deg, #0095ff 0%, #cc00ff 100%);
            border-radius: 8px;
            padding: 10px;
            font-size: 0.8rem;
            font-weight: 600;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            opacity: 0;
            box-shadow: 0 5px 15px rgba(0, 245, 212, 0.3);
        }
        
        /* Animations */
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        @keyframes glow {
            0% { box-shadow: 0 0 20px rgba(0, 245, 212, 0.5); }
            100% { box-shadow: 0 0 50px rgba(0, 245, 212, 0.8), 0 0 70px rgba(0, 187, 249, 0.6); }
        }
        
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        
        @keyframes dataFlow {
            0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
            5% { opacity: 1; }
            95% { opacity: 1; }
            100% { transform: translateY(100px) rotate(360deg); opacity: 0; }
        }
        
        /* Responsive Design */
        @media (max-width: 968px) {
            .hero {
                flex-direction: column;
                text-align: center;
                padding-top: 4rem;
            }
            
            .hero-subhead {
                max-width: 100%;
            }
            
            .hero-buttons {
                justify-content: center;
            }
            
            .animation-container {
                width: 100%;
                height: 400px;
            }
        }
        
        @media (max-width: 480px) {
            h1 {
                font-size: 2.5rem;
            }
            
            .hero-subhead {
                font-size: 1rem;
            }
            
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .btn {
                width: 200px;
            }
        }