Futuristic Customer Stories Marquee Section

<div class="bg-[#030303] font-['Inter',sans-serif] text-zinc-400 flex flex-col items-center min-h-screen relative overflow-x-hidden antialiased py-20 px-4 sm:px-8">

    <!-- WebGL Starfield Background -->
    <canvas id="webgl-stars" class="fixed inset-0 z-0 pointer-events-none opacity-60"></canvas>

    <!-- WebGL-style Noise Overlay -->
    <div class="fixed inset-0 opacity-[0.04] pointer-events-none z-50 mix-blend-overlay" style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noise%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%224%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noise)%22/%3E%3C/svg%3E');"></div>

    <!-- Animated Ambient Lights -->
    <div id="light1" class="absolute top-[-10%] left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-emerald-600/10 blur-[120px] rounded-full pointer-events-none z-0"></div>
    <div id="light2" class="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] bg-amber-600/10 blur-[100px] rounded-full pointer-events-none z-0"></div>

    <!-- Header Section -->
    <div class="relative z-10 w-full max-w-4xl mx-auto mb-20 flex flex-col items-center text-center">
        <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-zinc-900/80 shadow-[inset_0_1px_1px_rgba(255,255,255,0.1),_0_4px_10px_rgba(0,0,0,0.5)] border border-zinc-700/50 mb-8 backdrop-blur-md">
            <span class="flex h-2 w-2 relative">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.8)]"></span>
            </span>
            <span class="text-xs font-light text-emerald-300 tracking-wide uppercase drop-shadow-[0_0_5px_rgba(16,185,129,0.5)]">System Diagnostics</span>
        </div>

        <h1 class="text-4xl sm:text-5xl font-extralight text-white tracking-tight mb-6 drop-shadow-[0_2px_10px_rgba(255,255,255,0.1)]">
            Powered by <span class="text-transparent bg-clip-text bg-gradient-to-b from-emerald-300 to-emerald-600 drop-shadow-[0_0_15px_rgba(16,185,129,0.4)]">Innovators</span>
        </h1>
        <p class="text-lg text-zinc-400 font-extralight max-w-xl mx-auto leading-relaxed">
            From agile startups to massive scale networks, leading developers rely on our framework to power their most complex architectures.
        </p>
    </div>

    <!-- Infinite Marquee Section -->
    <div class="relative z-10 w-full max-w-[100vw] overflow-hidden py-10">
        <div class="absolute top-0 left-0 w-32 h-full bg-gradient-to-r from-[#030303] to-transparent z-20 pointer-events-none"></div>
        <div class="absolute top-0 right-0 w-32 h-full bg-gradient-to-l from-[#030303] to-transparent z-20 pointer-events-none"></div>

        <div id="marquee-track" class="flex w-max">
            <!-- CRT Card 1 (Emerald) -->
            <div class="w-[380px] shrink-0 mr-6 p-3 rounded-[32px] bg-zinc-800 shadow-[inset_0_2px_4px_rgba(255,255,255,0.1),_0_20px_40px_-10px_rgba(0,0,0,0.9),_0_0_0_1px_rgba(0,0,0,1)] flex flex-col relative">
                <div class="absolute bottom-3 right-6 w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.8)] animate-pulse"></div>
                <div class="absolute bottom-3 right-10 w-2 h-2 rounded-full bg-zinc-700 shadow-[inset_0_1px_2px_rgba(0,0,0,0.8)]"></div>
                
                <div class="relative h-full rounded-[20px] bg-[#020a02] p-6 shadow-[inset_0_0_40px_rgba(0,0,0,1)] border-[6px] border-zinc-950 flex flex-col justify-between overflow-hidden">
                    <div class="absolute inset-0 pointer-events-none z-20 opacity-30 mix-blend-overlay" style="background: repeating-linear-gradient(0deg, #000, #000 2px, transparent 2px, transparent 4px);"></div>
                    <div class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-white/5 to-transparent pointer-events-none z-10 rounded-t-[14px]"></div>
                    <div class="absolute inset-0 bg-emerald-500/5 mix-blend-screen pointer-events-none z-10 animate-pulse" style="animation-duration: 4s;"></div>

                    <div class="relative z-30 mb-6">
                        <div class="flex gap-1 mb-4 text-emerald-400 drop-shadow-[0_0_8px_rgba(52,211,153,0.8)]">
                            <iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon>
                        </div>
                        <p class="text-sm text-emerald-400/90 font-light leading-relaxed drop-shadow-[0_0_3px_rgba(52,211,153,0.6)]">
                            "The deployment workflow underwent a total paradigm shift with <span class="text-emerald-200 drop-shadow-[0_0_5px_rgba(167,243,208,0.8)]">automated scaling</span>. We went from manual bottlenecks to instant rollouts. Pure efficiency."
                        </p>
                    </div>
                    <div class="relative z-30 flex items-center gap-4">
                        <div class="relative p-0.5 rounded-full bg-emerald-950 shadow-[0_0_10px_rgba(16,185,129,0.2)]">
                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=64&h=64&q=80" alt="Sarah Jenkins" class="w-10 h-10 rounded-full border-[1.5px] border-emerald-500/50 object-cover opacity-80 mix-blend-luminosity grayscale sepia-[.5] hue-rotate-[90deg]">
                        </div>
                        <div>
                            <div class="text-sm text-emerald-300 font-light drop-shadow-[0_0_4px_rgba(110,231,183,0.6)]">Elena Rostova</div>
                            <div class="text-xs text-emerald-500/70 font-extralight uppercase tracking-widest">Lead Architect</div>
                        </div>
                        <iconify-icon icon="solar:verified-check-linear" class="ml-auto text-emerald-400 text-xl drop-shadow-[0_0_6px_rgba(52,211,153,0.8)]" style="stroke-width: 1.5;"></iconify-icon>
                    </div>
                </div>
            </div>

            <!-- CRT Card 2 (Amber) -->
            <div class="w-[380px] shrink-0 mr-6 p-3 rounded-[32px] bg-zinc-800 shadow-[inset_0_2px_4px_rgba(255,255,255,0.1),_0_20px_40px_-10px_rgba(0,0,0,0.9),_0_0_0_1px_rgba(0,0,0,1)] flex flex-col relative">
                <div class="absolute bottom-3 right-6 w-2 h-2 rounded-full bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.8)] animate-pulse" style="animation-delay: 0.5s;"></div>
                <div class="absolute bottom-3 right-10 w-2 h-2 rounded-full bg-zinc-700 shadow-[inset_0_1px_2px_rgba(0,0,0,0.8)]"></div>
                
                <div class="relative h-full rounded-[20px] bg-[#0a0500] p-6 shadow-[inset_0_0_40px_rgba(0,0,0,1)] border-[6px] border-zinc-950 flex flex-col justify-between overflow-hidden">
                    <div class="absolute inset-0 pointer-events-none z-20 opacity-30 mix-blend-overlay" style="background: repeating-linear-gradient(0deg, #000, #000 2px, transparent 2px, transparent 4px);"></div>
                    <div class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-white/5 to-transparent pointer-events-none z-10 rounded-t-[14px]"></div>
                    <div class="absolute inset-0 bg-amber-500/5 mix-blend-screen pointer-events-none z-10 animate-pulse" style="animation-duration: 3s;"></div>

                    <div class="relative z-30 mb-6">
                        <div class="flex gap-1 mb-4 text-amber-400 drop-shadow-[0_0_8px_rgba(251,191,36,0.8)]">
                            <iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon>
                        </div>
                        <p class="text-sm text-amber-400/90 font-light leading-relaxed drop-shadow-[0_0_3px_rgba(251,191,36,0.6)]">
                            "Migrating our core financial systems to these isolated containers was seamless. The <span class="text-amber-200 drop-shadow-[0_0_5px_rgba(253,230,138,0.8)]">advanced telemetry</span> provides visibility we never thought possible."
                        </p>
                    </div>
                    <div class="relative z-30 flex items-center gap-4">
                        <div class="relative p-0.5 rounded-full bg-amber-950 shadow-[0_0_10px_rgba(245,158,11,0.2)]">
                            <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=64&h=64&q=80" alt="David Chen" class="w-10 h-10 rounded-full border-[1.5px] border-amber-500/50 object-cover opacity-80 mix-blend-luminosity grayscale sepia-[.5] hue-rotate-[10deg]">
                        </div>
                        <div>
                            <div class="text-sm text-amber-300 font-light drop-shadow-[0_0_4px_rgba(252,211,77,0.6)]">Marcus Vance</div>
                            <div class="text-xs text-amber-500/70 font-extralight uppercase tracking-widest">VP Engineering</div>
                        </div>
                        <iconify-icon icon="solar:shield-check-linear" class="ml-auto text-amber-400 text-xl drop-shadow-[0_0_6px_rgba(251,191,36,0.8)]" style="stroke-width: 1.5;"></iconify-icon>
                    </div>
                </div>
            </div>

            <!-- CRT Card 3 (Cyan) -->
            <div class="w-[380px] shrink-0 mr-6 p-3 rounded-[32px] bg-zinc-800 shadow-[inset_0_2px_4px_rgba(255,255,255,0.1),_0_20px_40px_-10px_rgba(0,0,0,0.9),_0_0_0_1px_rgba(0,0,0,1)] flex flex-col relative">
                <div class="absolute bottom-3 right-6 w-2 h-2 rounded-full bg-cyan-500 shadow-[0_0_8px_rgba(6,182,212,0.8)] animate-pulse" style="animation-delay: 1s;"></div>
                <div class="absolute bottom-3 right-10 w-2 h-2 rounded-full bg-zinc-700 shadow-[inset_0_1px_2px_rgba(0,0,0,0.8)]"></div>
                
                <div class="relative h-full rounded-[20px] bg-[#00050a] p-6 shadow-[inset_0_0_40px_rgba(0,0,0,1)] border-[6px] border-zinc-950 flex flex-col justify-between overflow-hidden">
                    <div class="absolute inset-0 pointer-events-none z-20 opacity-30 mix-blend-overlay" style="background: repeating-linear-gradient(0deg, #000, #000 2px, transparent 2px, transparent 4px);"></div>
                    <div class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-white/5 to-transparent pointer-events-none z-10 rounded-t-[14px]"></div>
                    <div class="absolute inset-0 bg-cyan-500/5 mix-blend-screen pointer-events-none z-10 animate-pulse" style="animation-duration: 5s;"></div>

                    <div class="relative z-30 mb-6">
                        <div class="flex gap-1 mb-4 text-cyan-400 drop-shadow-[0_0_8px_rgba(34,211,238,0.8)]">
                            <iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm text-cyan-900 drop-shadow-none"></iconify-icon>
                        </div>
                        <p class="text-sm text-cyan-400/90 font-light leading-relaxed drop-shadow-[0_0_3px_rgba(34,211,238,0.6)]">
                            "Adopting the decentralized caching layer was remarkably intuitive. The <span class="text-cyan-200 drop-shadow-[0_0_5px_rgba(165,243,252,0.8)]">traffic routing</span> operates flawlessly under intense loads."
                        </p>
                    </div>
                    <div class="relative z-30 flex items-center gap-4">
                        <div class="relative p-0.5 rounded-full bg-cyan-950 shadow-[0_0_10px_rgba(6,182,212,0.2)]">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=64&h=64&q=80" alt="Maya Patel" class="w-10 h-10 rounded-full border-[1.5px] border-cyan-500/50 object-cover opacity-80 mix-blend-luminosity grayscale sepia-[.5] hue-rotate-[180deg]">
                        </div>
                        <div>
                            <div class="text-sm text-cyan-300 font-light drop-shadow-[0_0_4px_rgba(103,232,249,0.6)]">Kira Solis</div>
                            <div class="text-xs text-cyan-500/70 font-extralight uppercase tracking-widest">Cloud Architect</div>
                        </div>
                        <iconify-icon icon="solar:code-circle-linear" class="ml-auto text-cyan-400 text-xl drop-shadow-[0_0_6px_rgba(34,211,238,0.8)]" style="stroke-width: 1.5;"></iconify-icon>
                    </div>
                </div>
            </div>

            <!-- Duplicated Cards for Seamless Loop -->
            <div class="w-[380px] shrink-0 mr-6 p-3 rounded-[32px] bg-zinc-800 shadow-[inset_0_2px_4px_rgba(255,255,255,0.1),_0_20px_40px_-10px_rgba(0,0,0,0.9),_0_0_0_1px_rgba(0,0,0,1)] flex flex-col relative">
                <div class="absolute bottom-3 right-6 w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.8)] animate-pulse"></div>
                <div class="absolute bottom-3 right-10 w-2 h-2 rounded-full bg-zinc-700 shadow-[inset_0_1px_2px_rgba(0,0,0,0.8)]"></div>
                <div class="relative h-full rounded-[20px] bg-[#020a02] p-6 shadow-[inset_0_0_40px_rgba(0,0,0,1)] border-[6px] border-zinc-950 flex flex-col justify-between overflow-hidden">
                    <div class="absolute inset-0 pointer-events-none z-20 opacity-30 mix-blend-overlay" style="background: repeating-linear-gradient(0deg, #000, #000 2px, transparent 2px, transparent 4px);"></div>
                    <div class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-white/5 to-transparent pointer-events-none z-10 rounded-t-[14px]"></div>
                    <div class="relative z-30 mb-6">
                        <div class="flex gap-1 mb-4 text-emerald-400 drop-shadow-[0_0_8px_rgba(52,211,153,0.8)]">
                            <iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon>
                        </div>
                        <p class="text-sm text-emerald-400/90 font-light leading-relaxed drop-shadow-[0_0_3px_rgba(52,211,153,0.6)]">
                            "The deployment workflow underwent a total paradigm shift with <span class="text-emerald-200 drop-shadow-[0_0_5px_rgba(167,243,208,0.8)]">automated scaling</span>. We went from manual bottlenecks to instant rollouts. Pure efficiency."
                        </p>
                    </div>
                    <div class="relative z-30 flex items-center gap-4">
                        <div class="relative p-0.5 rounded-full bg-emerald-950 shadow-[0_0_10px_rgba(16,185,129,0.2)]">
                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=64&h=64&q=80" alt="Sarah Jenkins" class="w-10 h-10 rounded-full border-[1.5px] border-emerald-500/50 object-cover opacity-80 mix-blend-luminosity grayscale sepia-[.5] hue-rotate-[90deg]">
                        </div>
                        <div>
                            <div class="text-sm text-emerald-300 font-light drop-shadow-[0_0_4px_rgba(110,231,183,0.6)]">Elena Rostova</div>
                            <div class="text-xs text-emerald-500/70 font-extralight uppercase tracking-widest">Lead Architect</div>
                        </div>
                        <iconify-icon icon="solar:verified-check-linear" class="ml-auto text-emerald-400 text-xl drop-shadow-[0_0_6px_rgba(52,211,153,0.8)]" style="stroke-width: 1.5;"></iconify-icon>
                    </div>
                </div>
            </div>

            <div class="w-[380px] shrink-0 mr-6 p-3 rounded-[32px] bg-zinc-800 shadow-[inset_0_2px_4px_rgba(255,255,255,0.1),_0_20px_40px_-10px_rgba(0,0,0,0.9),_0_0_0_1px_rgba(0,0,0,1)] flex flex-col relative">
                <div class="absolute bottom-3 right-6 w-2 h-2 rounded-full bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.8)] animate-pulse" style="animation-delay: 0.5s;"></div>
                <div class="absolute bottom-3 right-10 w-2 h-2 rounded-full bg-zinc-700 shadow-[inset_0_1px_2px_rgba(0,0,0,0.8)]"></div>
                <div class="relative h-full rounded-[20px] bg-[#0a0500] p-6 shadow-[inset_0_0_40px_rgba(0,0,0,1)] border-[6px] border-zinc-950 flex flex-col justify-between overflow-hidden">
                    <div class="absolute inset-0 pointer-events-none z-20 opacity-30 mix-blend-overlay" style="background: repeating-linear-gradient(0deg, #000, #000 2px, transparent 2px, transparent 4px);"></div>
                    <div class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-white/5 to-transparent pointer-events-none z-10 rounded-t-[14px]"></div>
                    <div class="relative z-30 mb-6">
                        <div class="flex gap-1 mb-4 text-amber-400 drop-shadow-[0_0_8px_rgba(251,191,36,0.8)]">
                            <iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon>
                        </div>
                        <p class="text-sm text-amber-400/90 font-light leading-relaxed drop-shadow-[0_0_3px_rgba(251,191,36,0.6)]">
                            "Migrating our core financial systems to these isolated containers was seamless. The <span class="text-amber-200 drop-shadow-[0_0_5px_rgba(253,230,138,0.8)]">advanced telemetry</span> provides visibility we never thought possible."
                        </p>
                    </div>
                    <div class="relative z-30 flex items-center gap-4">
                        <div class="relative p-0.5 rounded-full bg-amber-950 shadow-[0_0_10px_rgba(245,158,11,0.2)]">
                            <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=64&h=64&q=80" alt="David Chen" class="w-10 h-10 rounded-full border-[1.5px] border-amber-500/50 object-cover opacity-80 mix-blend-luminosity grayscale sepia-[.5] hue-rotate-[10deg]">
                        </div>
                        <div>
                            <div class="text-sm text-amber-300 font-light drop-shadow-[0_0_4px_rgba(252,211,77,0.6)]">Marcus Vance</div>
                            <div class="text-xs text-amber-500/70 font-extralight uppercase tracking-widest">VP Engineering</div>
                        </div>
                        <iconify-icon icon="solar:shield-check-linear" class="ml-auto text-amber-400 text-xl drop-shadow-[0_0_6px_rgba(251,191,36,0.8)]" style="stroke-width: 1.5;"></iconify-icon>
                    </div>
                </div>
            </div>

            <div class="w-[380px] shrink-0 mr-6 p-3 rounded-[32px] bg-zinc-800 shadow-[inset_0_2px_4px_rgba(255,255,255,0.1),_0_20px_40px_-10px_rgba(0,0,0,0.9),_0_0_0_1px_rgba(0,0,0,1)] flex flex-col relative">
                <div class="absolute bottom-3 right-6 w-2 h-2 rounded-full bg-cyan-500 shadow-[0_0_8px_rgba(6,182,212,0.8)] animate-pulse" style="animation-delay: 1s;"></div>
                <div class="absolute bottom-3 right-10 w-2 h-2 rounded-full bg-zinc-700 shadow-[inset_0_1px_2px_rgba(0,0,0,0.8)]"></div>
                <div class="relative h-full rounded-[20px] bg-[#00050a] p-6 shadow-[inset_0_0_40px_rgba(0,0,0,1)] border-[6px] border-zinc-950 flex flex-col justify-between overflow-hidden">
                    <div class="absolute inset-0 pointer-events-none z-20 opacity-30 mix-blend-overlay" style="background: repeating-linear-gradient(0deg, #000, #000 2px, transparent 2px, transparent 4px);"></div>
                    <div class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-white/5 to-transparent pointer-events-none z-10 rounded-t-[14px]"></div>
                    <div class="relative z-30 mb-6">
                        <div class="flex gap-1 mb-4 text-cyan-400 drop-shadow-[0_0_8px_rgba(34,211,238,0.8)]">
                            <iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm"></iconify-icon><iconify-icon icon="solar:star-bold" class="text-sm text-cyan-900 drop-shadow-none"></iconify-icon>
                        </div>
                        <p class="text-sm text-cyan-400/90 font-light leading-relaxed drop-shadow-[0_0_3px_rgba(34,211,238,0.6)]">
                            "Adopting the decentralized caching layer was remarkably intuitive. The <span class="text-cyan-200 drop-shadow-[0_0_5px_rgba(165,243,252,0.8)]">traffic routing</span> operates flawlessly under intense loads."
                        </p>
                    </div>
                    <div class="relative z-30 flex items-center gap-4">
                        <div class="relative p-0.5 rounded-full bg-cyan-950 shadow-[0_0_10px_rgba(6,182,212,0.2)]">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=64&h=64&q=80" alt="Maya Patel" class="w-10 h-10 rounded-full border-[1.5px] border-cyan-500/50 object-cover opacity-80 mix-blend-luminosity grayscale sepia-[.5] hue-rotate-[180deg]">
                        </div>
                        <div>
                            <div class="text-sm text-cyan-300 font-light drop-shadow-[0_0_4px_rgba(103,232,249,0.6)]">Kira Solis</div>
                            <div class="text-xs text-cyan-500/70 font-extralight uppercase tracking-widest">Cloud Architect</div>
                        </div>
                        <iconify-icon icon="solar:code-circle-linear" class="ml-auto text-cyan-400 text-xl drop-shadow-[0_0_6px_rgba(34,211,238,0.8)]" style="stroke-width: 1.5;"></iconify-icon>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Metrics Row -->
    <div class="relative z-10 w-full max-w-5xl mx-auto mt-16 grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
        <div class="bg-zinc-900/50 backdrop-blur-sm p-5 rounded-2xl shadow-[inset_0_1px_10px_rgba(0,0,0,1),_0_1px_0_rgba(255,255,255,0.05)] border border-zinc-800 flex flex-col items-center justify-center relative overflow-hidden">
            <div class="absolute top-0 left-1/4 w-1/2 h-[1px] bg-gradient-to-r from-transparent via-emerald-500/50 to-transparent"></div>
            <div class="text-3xl font-extralight text-emerald-400 tracking-tight drop-shadow-[0_0_12px_rgba(52,211,153,0.6)] mb-1">99.999%</div>
            <div class="text-xs text-zinc-500 uppercase tracking-widest font-light">Reliability</div>
        </div>
        <div class="bg-zinc-900/50 backdrop-blur-sm p-5 rounded-2xl shadow-[inset_0_1px_10px_rgba(0,0,0,1),_0_1px_0_rgba(255,255,255,0.05)] border border-zinc-800 flex flex-col items-center justify-center relative overflow-hidden">
            <div class="absolute top-0 left-1/4 w-1/2 h-[1px] bg-gradient-to-r from-transparent via-amber-500/50 to-transparent"></div>
            <div class="text-3xl font-extralight text-amber-400 tracking-tight drop-shadow-[0_0_12px_rgba(251,191,36,0.6)] mb-1">1B+</div>
            <div class="text-xs text-zinc-500 uppercase tracking-widest font-light">Events/Day</div>
        </div>
        <div class="bg-zinc-900/50 backdrop-blur-sm p-5 rounded-2xl shadow-[inset_0_1px_10px_rgba(0,0,0,1),_0_1px_0_rgba(255,255,255,0.05)] border border-zinc-800 flex flex-col items-center justify-center relative overflow-hidden">
            <div class="absolute top-0 left-1/4 w-1/2 h-[1px] bg-gradient-to-r from-transparent via-cyan-500/50 to-transparent"></div>
            <div class="text-3xl font-extralight text-cyan-400 tracking-tight drop-shadow-[0_0_12px_rgba(34,211,238,0.6)] mb-1">45ms</div>
            <div class="text-xs text-zinc-500 uppercase tracking-widest font-light">Response</div>
        </div>
        <div class="bg-zinc-900/50 backdrop-blur-sm p-5 rounded-2xl shadow-[inset_0_1px_10px_rgba(0,0,0,1),_0_1px_0_rgba(255,255,255,0.05)] border border-zinc-800 flex flex-col items-center justify-center relative overflow-hidden">
            <div class="absolute top-0 left-1/4 w-1/2 h-[1px] bg-gradient-to-r from-transparent via-purple-500/50 to-transparent"></div>
            <div class="text-3xl font-extralight text-purple-400 tracking-tight drop-shadow-[0_0_12px_rgba(168,85,247,0.6)] mb-1">Global</div>
            <div class="text-xs text-zinc-500 uppercase tracking-widest font-light">Coverage</div>
        </div>
    </div>

    <!-- Call to Action -->
    <div class="relative z-10 mt-20 mb-10 text-center flex flex-col items-center">
        <button class="group relative inline-flex items-center gap-3 px-8 py-3.5 bg-zinc-800 text-emerald-400 rounded-full text-sm font-light shadow-[0_0_15px_rgba(16,185,129,0.3),_inset_0_1px_1px_rgba(255,255,255,0.1)] border border-emerald-500/30 transition-transform active:scale-95 hover:bg-zinc-700 hover:shadow-[0_0_25px_rgba(16,185,129,0.5)]">
            <span class="drop-shadow-[0_0_5px_rgba(52,211,153,0.8)]">Initialize Sequence</span>
            <iconify-icon icon="solar:arrow-right-linear" class="group-hover:translate-x-1 transition-transform drop-shadow-[0_0_5px_rgba(52,211,153,0.8)]" style="stroke-width: 1.5;"></iconify-icon>
        </button>
        <p class="mt-6 text-xs text-zinc-500 font-extralight">Secure connection. Terminal access granted.</p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // WebGL Starfield
            const canvas = document.getElementById('webgl-stars');
            const gl = canvas.getContext('webgl');
            if (gl) {
                const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; gl.viewport(0, 0, canvas.width, canvas.height); };
                window.addEventListener('resize', resize);
                resize();

                const vs = gl.createShader(gl.VERTEX_SHADER);
                gl.shaderSource(vs, `attribute vec3 position; uniform float time; varying float vAlpha; void main() { float z = mod(position.z - time * 0.1, 1.0); vec2 pos = position.xy / (z * 2.0); gl_Position = vec4(pos, 0.0, 1.0); gl_PointSize = (1.0 - z) * 2.5; vAlpha = (1.0 - z) * 0.8; }`);
                gl.compileShader(vs);

                const fs = gl.createShader(gl.FRAGMENT_SHADER);
                gl.shaderSource(fs, `precision mediump float; varying float vAlpha; void main() { gl_FragColor = vec4(0.6, 1.0, 0.8, vAlpha); }`);
                gl.compileShader(fs);

                const prog = gl.createProgram();
                gl.attachShader(prog, vs); gl.attachShader(prog, fs); gl.linkProgram(prog); gl.useProgram(prog);

                const stars = new Float32Array(3000);
                for(let i=0; i<3000; i+=3) { stars[i] = (Math.random() - 0.5) * 4.0; stars[i+1] = (Math.random() - 0.5) * 4.0; stars[i+2] = Math.random(); }

                const buf = gl.createBuffer();
                gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, stars, gl.STATIC_DRAW);

                const posLoc = gl.getAttribLocation(prog, "position");
                gl.enableVertexAttribArray(posLoc); gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);

                const timeLoc = gl.getUniformLocation(prog, "time");
                let start = performance.now();
                const draw = (now) => {
                    gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT);
                    gl.uniform1f(timeLoc, (now - start) / 1000.0);
                    gl.drawArrays(gl.POINTS, 0, 1000);
                    requestAnimationFrame(draw);
                };
                draw(start);
            }

            // Infinite Marquee Animation
            const track = document.getElementById('marquee-track');
            track.animate([
                { transform: 'translateX(0)' },
                { transform: 'translateX(-50%)' }
            ], { duration: 40000, iterations: Infinity, easing: 'linear' });

            // Ambient Lights Breathing Animation
            const light1 = document.getElementById('light1');
            const light2 = document.getElementById('light2');
            
            light1.animate([
                { transform: 'translate(-50%, 0) scale(1)', opacity: 0.1 },
                { transform: 'translate(-45%, 5%) scale(1.1)', opacity: 0.2 },
                { transform: 'translate(-50%, 0) scale(1)', opacity: 0.1 }
            ], { duration: 12000, iterations: Infinity, easing: 'ease-in-out' });

            light2.animate([
                { transform: 'translate(0, 0) scale(1)', opacity: 0.1 },
                { transform: 'translate(-5%, -5%) scale(1.2)', opacity: 0.2 },
                { transform: 'translate(0, 0) scale(1)', opacity: 0.1 }
            ], { duration: 15000, iterations: Infinity, easing: 'ease-in-out', delay: 2000 });
        });
    </script>
</div>