<section id="cta" class="pt-16 pb-12 relative overflow-hidden">
    <!-- Massive Cinematic Background Glows -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1000px] h-[600px] bg-gradient-to-r from-pink-500/10 to-emerald-500/10 rounded-full blur-[160px] -z-10"></div>
    <div class="absolute -bottom-24 left-1/2 -translate-x-1/2 w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>

    <div class="container mx-auto px-4 lg:px-8 max-w-7xl">
        <div class="relative p-12 md:p-20 rounded-[40px] bg-zinc-900/40 border border-white/5 backdrop-blur-3xl overflow-hidden flex flex-col items-center text-center shadow-2xl">
            <!-- Decorative Inner Glow -->
            <div class="absolute -top-24 -left-24 w-48 h-48 bg-pink-500/10 rounded-full blur-[40px]"></div>
            <div class="absolute -bottom-24 -right-24 w-48 h-48 bg-emerald-500/10 rounded-full blur-[40px]"></div>

            <!-- Content -->
            <div class="relative z-10">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 mb-8">
                    <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-[pulse_1s_infinite]"></div>
                    <span class="text-[10px] font-bold tracking-widest text-emerald-500 uppercase">Live Metrics</span>
                </div>

                <h2 class="text-4xl md:text-6xl font-black tracking-tighter text-white mb-6 leading-tight">
                    Ready to take back <br class="hidden md:block"> your <span class="bg-gradient-to-r from-pink-500 to-emerald-500 bg-clip-text text-transparent">privacy?</span>
                </h2>
                
                <p class="text-zinc-400 text-lg md:text-xl max-w-xl mx-auto mb-12 leading-relaxed font-medium">
                    Create your first disposable Gmail in seconds. <br class="hidden sm:block text-zinc-600"> 
                    No credit card, no registration, no tracking.
                </p>

                <!-- Live Counters -->
                <div class="grid grid-cols-1 sm:grid-cols-[1fr_auto_1fr] gap-6 md:gap-12 mb-12 max-w-2xl mx-auto items-center justify-center text-center" 
                     x-data="{ 
                        mailboxes: 1248920, 
                        emails: 48291032,
                        numberFormat(val) {
                            return new Intl.NumberFormat().format(val);
                        },
                        init() {
                            setInterval(() => {
                                this.mailboxes += Math.floor(Math.random() * 3) + 1;
                                this.emails += Math.floor(Math.random() * 12) + 2;
                            }, 2000);
                        }
                     }">
                    <!-- Counter 1: Mailboxes -->
                    <div class="flex flex-col items-center sm:items-end">
                        <div class="text-2xl md:text-4xl font-black text-white tabular-nums tracking-tighter" x-text="numberFormat(mailboxes)">1,248,920</div>
                        <div class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mt-1">Mailboxes Created</div>
                    </div>
                    <!-- Divider -->
                    <div class="hidden sm:block w-px h-12 bg-white/10"></div>
                    <!-- Counter 2: Emails -->
                    <div class="flex flex-col items-center sm:items-start">
                        <div class="text-2xl md:text-4xl font-black text-emerald-500 tabular-nums tracking-tighter" x-text="numberFormat(emails)">48,291,032</div>
                        <div class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mt-1">Email Received</div>
                    </div>
                </div>

                <!-- Final CTA Button -->
                <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                    <a href="#hero" class="group relative px-10 py-5 bg-white text-black font-black text-lg rounded-2xl transition-all hover:scale-105 active:scale-95 shadow-[0_0_30px_rgba(255,255,255,0.2)]">
                        <span class="relative z-10 flex items-center gap-2">
                            Get Started for Free
                            <svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                            </svg>
                        </span>
                    </a>
                </div>

                <!-- Trust Badges -->
                <div class="mt-10 flex items-center justify-center gap-6 text-zinc-500">
                    <div class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest">
                        <svg class="w-4 h-4 text-emerald-500/50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                        No CC Required
                    </div>
                    <div class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest">
                        <svg class="w-4 h-4 text-emerald-500/50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                        100% Private
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
