<section id="features" class="py-20 relative z-10">
    <div class="container mx-auto px-4 lg:px-8 max-w-7xl">
        <!-- Section Header -->
        <div class="mb-12 md:mb-20 flex flex-col items-center text-center">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-pink-500/10 border border-pink-500/20 mb-6 group/badge">
                <div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-pulse ring-4 ring-pink-500/20"></div>
                <span class="text-[10px] font-bold tracking-widest text-pink-500 uppercase">Capabilities</span>
            </div>
            <h2 class="text-3xl md:text-5xl lg:text-6xl font-bold tracking-tight text-white mb-6">
                Everything you need, <span class="text-zinc-500">nothing you don't.</span>
            </h2>
            <p class="text-zinc-400 max-w-2xl text-sm md:text-lg leading-relaxed">
                Zemail is built for the modern web. From instant API access to premium Gmail domains, 
                we've automated the friction out of temporary email management.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 auto-rows-auto md:auto-rows-[minmax(320px,auto)]">
            {{ $slot }}
        </div>
    </div>
</section>
