Responsive Hero Section with CTA & Social Proof

<div class="max-w-3xl mr-auto ml-auto text-center">
                    <span class="text-xs uppercase tracking-wider text-blue-300/90">New: Voice messages</span>
                    <h1 class="mt-3 text-4xl sm:text-5xl lg:text-6xl leading-tight tracking-tight" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 600">
                        Connect. Collaborate. Create without limits.
                    </h1>
                    <p class="mt-6 text-lg text-gray-300 max-w-xl mx-auto">
                        FlowChat brings teams together with seamless messaging, 
                        smart channels, and powerful collaboration tools.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-3 mt-8 justify-center">
                        <a href="#try" class="inline-flex items-center gap-2 px-5 py-3 rounded-full text-sm bg-blue-400 text-black hover:bg-blue-300 transition-all hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-blue-500">
                            Start chatting
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                        </a>
                        <a href="#product" class="inline-flex items-center gap-2 hover:bg-white/10 transition-all text-gray-100 bg-white/5 border-white/10 border rounded-full px-5 py-3 backdrop-blur-lg">
                            Watch demo
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play w-4 h-4"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
                        </a>
                    </div>

                    <div class="mt-8 flex items-center gap-6 justify-center">
                        <div class="flex -space-x-2">
                            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=160&amp;q=80" alt="" class="w-9 h-9 rounded-full border-2 border-black object-cover">
                            <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=160&amp;q=80" alt="" class="w-9 h-9 rounded-full border-2 border-black object-cover">
                            <img src="https://images.unsplash.com/photo-1500649297466-74794c70acfc?w=160&amp;q=80" alt="" class="w-9 h-9 rounded-full border-2 border-black object-cover">
                            <div class="w-9 h-9 rounded-full border-2 border-black bg-blue-400 flex items-center justify-center text-black text-xs">
                                10k+
                            </div>
                        </div>
                        <div class="">
                            <p class="text-sm text-gray-100">10,000+ teams connected</p>
                            <p class="text-sm text-gray-400">From startups to enterprise</p>
                        </div>
                    </div>
                </div>