<section class="relative  flex  items-center justify-center overflow-hidden bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 transition-colors duration-500">
    <!-- Enhanced Video Background -->
    <div class="absolute inset-0 z-0 overflow-hidden">
        <video 
            autoplay 
            muted 
            loop 
            playsinline 
            preload="auto" 
            poster="https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" 
            class="absolute w-full h-full object-cover opacity-50 dark:opacity-40 scale-110"
        >
            <source src="https://static.vecteezy.com/system/resources/previews/006/030/198/mp4/back-view-of-middle-eastern-man-in-traditional-clothing-walking-the-street-free-video.mp4" type="video/mp4">
            <img src="https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" 
                 alt="Business background" 
                 class="absolute w-full h-full object-cover">
            Your browser does not support the video tag.
        </video>
        
        <!-- Multi-layer Gradient Overlay -->
        <div class="absolute inset-0 bg-gradient-to-br from-gray-950/80 via-gray-900/60 to-gray-950/80"></div>
        <div class="absolute inset-0 bg-gradient-to-t from-gold-900/10 via-transparent to-gold-900/10"></div>
        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_rgba(250,204,21,0.1)_0%,_transparent_70%)]"></div>
        
        <!-- Animated Grid Lines -->
        <div class="absolute inset-0">
            <div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-gold-500/20 to-transparent animate-shimmer"></div>
            <div class="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-gold-500/20 to-transparent animate-shimmer" style="animation-delay: 1s"></div>
        </div>
    </div>

    <!-- Animated Background Elements -->
    <div class="absolute inset-0 overflow-hidden">
        <!-- Floating Geometric Shapes -->
        <div class="absolute top-20 left-10 w-32 h-32 opacity-10 animate-float">
            <div class="w-full h-full border-2 border-gold-500/30 rounded-3xl rotate-45"></div>
        </div>
        
        <div class="absolute bottom-32 right-16 w-40 h-40 opacity-10 animate-float" style="animation-delay: 2s">
            <div class="w-full h-full border-2 border-gold-500/20 rounded-full"></div>
        </div>
        
        <div class="absolute top-1/3 left-1/4 w-24 h-24 opacity-5 animate-float" style="animation-delay: 4s">
            <div class="w-full h-full border border-gold-500/10 rounded-lg"></div>
        </div>

        <!-- Animated Data Streams -->
        <div class="absolute top-1/4 right-1/4 w-64 h-64 opacity-5">
            <div class="absolute inset-0 border border-gold-500/10 rounded-full animate-ping" style="animation-delay: 0.5s"></div>
            <div class="absolute inset-4 border border-gold-500/5 rounded-full animate-ping" style="animation-delay: 1s"></div>
        </div>
    </div>

    <!-- Main Content Container -->
    <div class="max-w-7xl mx-auto px-6 relative z-10 py-10">
        <div class="grid lg:grid-cols-12 gap-8 lg:gap-12 items-start">
            <!-- Left Column - Main Content (8 columns on desktop) -->
            <div class="lg:col-span-8">
                <!-- Modern Header with Icon -->
                <div class="flex items-center gap-4 mb-6 animate-slide-up">
                    
                    <div>
                        <div class="text-sm font-semibold text-gold-500 uppercase tracking-wider">{{ t('hero_premium') }}</div>
                        <div class="text-lg font-semibold text-white">{{ t('hero_trusted') }}</div>
                    </div>
                </div>

                <!-- Main Heading with Enhanced Typography -->
                <h1 class="text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight mb-8 animate-slide-up animation-delay-100">
                    <span class="block text-white mb-4">{{ t('hero_title_line1') }}</span>
                    <span class="block bg-gradient-to-r from-gold-400 via-gold-300 to-gold-400 bg-clip-text text-transparent animate-gradient-x py-2">
                        {{ t('hero_title_line2') }}
                    </span>
                    <span class="block text-gray-300 mt-4">{{ t('hero_title_line3') }}</span>
                </h1>

                <!-- Enhanced Description -->
                <div class="mb-12 animate-slide-up animation-delay-200">
                    <p class="text-xl text-gray-300 mb-6 leading-relaxed">
                        {{ t('hero_subtitle') }}
                    </p>
                    
                    <!-- Feature List -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                        <div class="flex items-start gap-3">
                            <div class="w-6 h-6 rounded-full bg-gradient-to-r from-gold-500/20 to-gold-300/10 flex items-center justify-center mt-1">
                                <svg class="w-3 h-3 text-gold-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <span class="text-gray-300">{{ t('hero_feature_1') }}</span>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="w-6 h-6 rounded-full bg-gradient-to-r from-gold-500/20 to-gold-300/10 flex items-center justify-center mt-1">
                                <svg class="w-3 h-3 text-gold-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <span class="text-gray-300">{{ t('hero_feature_2') }}</span>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="w-6 h-6 rounded-full bg-gradient-to-r from-gold-500/20 to-gold-300/10 flex items-center justify-center mt-1">
                                <svg class="w-3 h-3 text-gold-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <span class="text-gray-300">{{ t('hero_feature_3') }}</span>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="w-6 h-6 rounded-full bg-gradient-to-r from-gold-500/20 to-gold-300/10 flex items-center justify-center mt-1">
                                <svg class="w-3 h-3 text-gold-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <span class="text-gray-300">{{ t('hero_feature_4') }}</span>
                        </div>
                    </div>
                </div>

                <!-- Enhanced CTA Section -->
                <div class="mb-16 animate-slide-up animation-delay-300">
                    <div class="flex flex-col sm:flex-row gap-6 mb-8">
                        <a href="/services" class="group relative inline-flex items-center justify-center px-10 py-5 bg-gradient-to-r from-gold-500 to-gold-600 text-white font-bold rounded-2xl hover:shadow-2xl hover:shadow-gold-500/40 transition-all duration-300 gap-4 overflow-hidden btn-gold backdrop-blur-sm border border-gold-400/30 hover:scale-105 flex-1">
                            <span class="relative z-10 text-lg">{{ t('hero_cta_start') }}</span>
                            <svg class="w-6 h-6 relative z-10 transform group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                            </svg>
                            <div class="absolute inset-0 bg-gradient-to-r from-gold-600/0 via-gold-500/30 to-gold-600/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 -translate-x-full group-hover:translate-x-full"></div>
                        </a>

                        <a href="/contact" class="group relative inline-flex items-center justify-center px-10 py-5 border-2 border-gray-600/80 text-gray-300 font-bold rounded-2xl hover:border-gold-500 hover:text-gold-400 transition-all duration-300 gap-4 overflow-hidden backdrop-blur-sm bg-gray-900/40 hover:scale-105 flex-1">
                            <span class="relative z-10 text-lg">{{ t('hero_cta_view') }}</span>
                            <svg class="w-6 h-6 relative z-10 transform group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                            </svg>
                        </a>
                    </div>
                    
                    <div class="flex items-center justify-center gap-6 text-sm text-gray-400">
                        <div class="flex items-center gap-2">
                            <div class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
                            <span>24/7 Support</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 0.5s"></div>
                            <span>Free Consultation</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="w-2 h-2 bg-gold-500 rounded-full animate-pulse" style="animation-delay: 1s"></div>
                            <span>Guaranteed Results</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column - Stats & Info (4 columns on desktop) -->
            <div class="lg:col-span-4">
                <!-- Stats Panel -->
                <div class="backdrop-blur-lg bg-gray-900/50 border border-gray-700/50 rounded-3xl p-8 shadow-2xl animate-slide-up animation-delay-400">
                    <h3 class="text-2xl font-bold text-white mb-8 flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-gold-500/20 to-gold-300/10 flex items-center justify-center">
                            <svg class="w-5 h-5 text-gold-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                            </svg>
                        </div>
                        Performance Metrics
                    </h3>
                    
                    <div class="space-y-6">
                        <!-- Client Growth -->
                        <div class="group">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-gray-400">Client Growth</span>
                                <span class="text-2xl font-bold text-white">{{ $settings['total_clients'] }}</span>
                            </div>
                            <div class="h-2 bg-gray-800 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-gold-500 to-gold-300 rounded-full w-3/4 group-hover:w-full transition-all duration-500"></div>
                            </div>
                        </div>
                        
                        <!-- Revenue Generated -->
                        <div class="group">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-gray-400">Revenue Generated</span>
                                <span class="text-2xl font-bold text-white">{{ $settings['revenue_generated'] }}</span>
                            </div>
                            <div class="h-2 bg-gray-800 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-emerald-500 to-emerald-300 rounded-full w-4/5 group-hover:w-full transition-all duration-500"></div>
                            </div>
                        </div>
                        
                        <!-- Success Rate -->
                        <div class="group">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-gray-400">Success Rate</span>
                                <span class="text-2xl font-bold text-white">98%</span>
                            </div>
                            <div class="h-2 bg-gray-800 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-gold-500 to-gold-300 rounded-full w-9/10 group-hover:w-full transition-all duration-500"></div>
                            </div>
                        </div>
                        
                        <!-- ROI -->
                        <div class="group">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-gray-400">Average ROI</span>
                                <span class="text-2xl font-bold text-white">+285%</span>
                            </div>
                            <div class="h-2 bg-gray-800 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-emerald-500 to-emerald-300 rounded-full w-7/8 group-hover:w-full transition-all duration-500"></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Quick Stats -->
                    <div class="grid grid-cols-2 gap-4 mt-8 pt-8 border-t border-gray-700/50">
                        <div class="text-center">
                            <div class="text-3xl font-bold text-white">42</div>
                            <div class="text-sm text-gray-400">Awards</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold text-white">15+</div>
                            <div class="text-sm text-gray-400">Years Experience</div>
                        </div>
                    </div>
                </div>

                <!-- Trust Badge -->
                <div class="mt-8 backdrop-blur-lg bg-gradient-to-br from-gray-900/40 to-gray-800/20 border border-gray-700/30 rounded-2xl p-6 animate-slide-up animation-delay-500">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-gold-500/20 to-gold-300/10 flex items-center justify-center">
                            <svg class="w-6 h-6 text-gold-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                            </svg>
                        </div>
                        <div>
                            <div class="font-semibold text-white">ISO Certified</div>
                            <div class="text-sm text-gray-400">Quality Management</div>
                        </div>
                    </div>
                    <p class="text-sm text-gray-300">Certified excellence in business consultancy with global standards compliance.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Modern Scroll Indicator -->
    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20">
        <div class="flex flex-col items-center gap-2">
            <span class="text-sm text-gray-400 animate-pulse">Scroll to explore</span>
            <div class="w-6 h-10 border-2 border-gold-500/40 rounded-full flex justify-center backdrop-blur-sm bg-gray-900/40">
                <div class="w-1 h-3 bg-gradient-to-b from-gold-400 to-gold-300 rounded-full mt-2 animate-bounce"></div>
            </div>
        </div>
    </div>
</section>

<style>
/* Enhanced animations */
@keyframes gradient-x {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.animate-gradient-x {
    animation: gradient-x 3s ease infinite;
    background-size: 200% 200%;
}

/* Progress bar widths */
.w-3\/4 { width: 75%; }
.w-4\/5 { width: 80%; }
.w-9\/10 { width: 90%; }
.w-7\/8 { width: 87.5%; }

/* Modern scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #fbbf24, #f59e0b);
    border-radius: 4px;
}

/* Selection color */
::selection {
    background: rgba(250, 204, 21, 0.3);
    color: white;
}

/* Mobile optimizations */
@media (max-width: 1024px) {
    .lg\:col-span-8, .lg\:col-span-4 {
        grid-column: span 12;
    }
    
    .grid-cols-1 {
        gap: 4rem;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.75rem !important;
        line-height: 1.2 !important;
    }
    
    .text-xl {
        font-size: 1.125rem;
    }
    
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
</style>

<script>
// Interactive stats animation
document.addEventListener('DOMContentLoaded', function() {
    // Video handling
    const video = document.querySelector('video');
    if (video) {
        const playPromise = video.play();
        if (playPromise !== undefined) {
            playPromise.catch(error => {
                console.log('Video autoplay failed:', error);
                const fallbackImg = video.querySelector('img');
                if (fallbackImg) {
                    video.style.display = 'none';
                    fallbackImg.style.display = 'block';
                }
            });
        }
        
        video.addEventListener('error', function() {
            const fallbackImg = video.querySelector('img');
            if (fallbackImg) {
                video.style.display = 'none';
                fallbackImg.style.display = 'block';
            }
        });
        
        video.addEventListener('ended', function() {
            video.currentTime = 0;
            video.play();
        });
    }
    
    // Animate progress bars on scroll
    const observerOptions = {
        threshold: 0.5,
        rootMargin: '0px 0px -100px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animated');
            }
        });
    }, observerOptions);
    
    // Observe progress bars
    document.querySelectorAll('.h-2 > div').forEach(bar => {
        observer.observe(bar);
    });
});
</script>