Feature Grid Section with Animated Gradient Cards

<div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4">
            <div class="text-center mb-20 fade-in" style="opacity: 1; transform: translateY(0px);">
                <h2 class="text-4xl sm:text-5xl font-semibold text-white tracking-tight mb-6">
                    Your thoughts, <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-cyan-400">supercharged</span>
                </h2>
                <p class="text-xl text-zinc-400 max-w-2xl mx-auto">
                    Every feature is designed to help your mind work better. Connect ideas, discover patterns, and unlock insights you never knew existed.
                </p>
            </div>

            <div class="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
                <!-- Card 1 - AI-Powered Connections -->
                <div class="break-inside-avoid group rounded-3xl bg-gradient-to-br from-blue-500/10 to-purple-600/10 border border-blue-500/20 hover:border-blue-400/40 transition-all duration-300 hover-lift fade-in fade-in-delay-1 overflow-hidden mb-6" style="opacity: 1; transform: translateY(0px);">
                    <div class="h-48 bg-gradient-to-br from-blue-600/20 to-purple-700/20 relative overflow-hidden">
                        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1640906152676-dace6710d24b?w=600&amp;q=80')] bg-cover bg-center opacity-30 transition-transform duration-500 group-hover:scale-110" style=""></div>
                        <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/74c3cdce-6ed9-47f7-b09b-118af907e21d_800w.jpg)] bg-cover transition-transform duration-500 group-hover:scale-110"></div>
                        <div class="absolute bottom-4 left-4">
                            <div class="h-12 w-12 rounded-2xl bg-white/10 backdrop-blur-xl border border-white/20 flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6 text-white"><path d="M12 18V5"></path><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"></path><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"></path><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"></path><path d="M18 18a4 4 0 0 0 2-7.464" class=""></path><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517" class=""></path><path d="M6 18a4 4 0 0 1-2-7.464"></path><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"></path></svg>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold text-white mb-3 tracking-tight">AI-Powered Connections</h3>
                        <p class="text-zinc-400 leading-relaxed text-sm">Automatically discover meaningful links between your thoughts. Our AI learns your thinking patterns to surface connections you might have missed.</p>
                        <div class="mt-4 flex items-center text-xs text-blue-300">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg>
                            Advanced AI • Machine Learning
                        </div>
                    </div>
                </div>

                <!-- Card 2 - Lightning-Fast Capture -->
                <div class="break-inside-avoid group rounded-3xl bg-gradient-to-br from-emerald-500/10 to-cyan-600/10 border border-emerald-500/20 hover:border-emerald-400/40 transition-all duration-300 hover-lift fade-in fade-in-delay-2 overflow-hidden mb-6" style="opacity: 1; transform: translateY(0px);">
                    <div class="h-32 bg-gradient-to-br from-emerald-600/20 to-cyan-700/20 relative overflow-hidden">
                        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1629946832022-c327f74956e0?w=600&amp;q=80')] bg-cover bg-center opacity-30 transition-transform duration-500 group-hover:scale-110" style=""></div>
                        <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f09193c9-6355-4bd1-b913-9c5728e4dd03_800w.jpg)] bg-cover transition-transform duration-500 group-hover:scale-110"></div>
                        <div class="absolute bottom-3 left-4">
                            <div class="h-10 w-10 rounded-xl bg-white/10 backdrop-blur-xl border border-white/20 flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
                            </div>
                        </div>
                    </div>
                    <div class="p-5">
                        <h3 class="text-lg font-semibold text-white mb-3 tracking-tight">Lightning-Fast Capture</h3>
                        <p class="text-zinc-400 text-sm leading-relaxed">Capture thoughts instantly with voice, text, or visual input. Never lose an idea again.</p>
                        <div class="mt-3 flex items-center text-xs text-emerald-300">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
                            Voice • Text • Visual
                        </div>
                    </div>
                </div>

                <!-- Card 3 - Visual Mind Maps -->
                <div class="break-inside-avoid group rounded-3xl bg-gradient-to-br from-violet-500/10 to-pink-600/10 border border-violet-500/20 hover:border-violet-400/40 transition-all duration-300 hover-lift fade-in fade-in-delay-3 overflow-hidden mb-6" style="opacity: 1; transform: translateY(0px);">
                    <div class="h-40 bg-gradient-to-br from-violet-600/20 to-pink-700/20 relative overflow-hidden">
                        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1724525647065-f948fc102e68?w=600&amp;q=80')] bg-cover bg-center opacity-30 transition-transform duration-500 group-hover:scale-110"></div>
                        <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3bbbf364-3029-4f9e-9987-eb90d946b1b1_800w.jpg)] bg-cover transition-transform duration-500 group-hover:scale-110"></div>
                        <div class="absolute bottom-3 left-4">
                            <div class="h-10 w-10 rounded-xl bg-white/10 backdrop-blur-xl border border-white/20 flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"><rect x="16" y="16" width="6" height="6" rx="1"></rect><rect x="2" y="16" width="6" height="6" rx="1" class=""></rect><rect x="9" y="2" width="6" height="6" rx="1"></rect><path d="M5 1 1-1h12a1 1 0 0 1 1 1v3"></path><path d="M12 12V8"></path></svg>
                            </div>
                        </div>
                    </div>
                    <div class="p-5">
                        <h3 class="text-lg font-semibold text-white mb-3 tracking-tight">Visual Mind Maps</h3>
                        <p class="text-zinc-400 text-sm leading-relaxed">See your ideas come alive in dynamic, interactive mind maps that reveal hidden patterns and connections.</p>
                        <div class="mt-3 flex items-center text-xs text-violet-300">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><rect x="16" y="16" width="6" height="6" rx="1"></rect><rect x="2" y="16" width="6" height="6" rx="1"></rect><rect x="9" y="2" width="6" height="6" rx="1"></rect><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"></path><path d="M12 12V8"></path></svg>
                            Interactive • Dynamic • Visual
                        </div>
                    </div>
                </div>

                <!-- Card 4 - Smart Insights -->
                <div class="break-inside-avoid group rounded-3xl bg-gradient-to-br from-amber-500/10 to-orange-600/10 border border-amber-500/20 hover:border-amber-400/40 transition-all duration-300 hover-lift fade-in overflow-hidden mb-6" style="opacity: 1; transform: translateY(0px);">
                    <div class="h-56 bg-gradient-to-br from-amber-600/20 to-orange-700/20 relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br from-amber-400/30 via-orange-500/20 to-red-600/30 transition-transform duration-500 group-hover:scale-110"></div>
                        <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/96eb5636-6a37-4a34-a637-59576912351f_800w.jpg)] bg-cover transition-transform duration-500 group-hover:scale-110"></div>
                        <div class="absolute bottom-3 left-4">
                            <div class="h-10 w-10 rounded-xl bg-white/10 backdrop-blur-xl border border-white/20 flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>
                            </div>
                        </div>
                    </div>
                    <div class="p-5">
                        <h3 class="text-lg font-semibold text-white mb-3 tracking-tight">Smart Insights</h3>
                        <p class="text-zinc-400 text-sm leading-relaxed">Discover patterns in your thinking over time. Get personalized insights about your creative process and suggestions for new connections that spark innovation.</p>
                        <div class="mt-3 flex items-center text-xs text-amber-300">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>
                            Analytics • Patterns • Insights
                        </div>
                    </div>
                </div>

                <!-- Card 5 - Seamless Collaboration -->
                <div class="break-inside-avoid group rounded-3xl bg-gradient-to-br from-orange-500/10 to-red-600/10 border border-orange-500/20 hover:border-orange-400/40 transition-all duration-300 hover-lift fade-in fade-in-delay-4 overflow-hidden mb-6" style="opacity: 1; transform: translateY(0px);">
                    <div class="h-28 bg-gradient-to-br from-orange-600/20 to-red-700/20 relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br from-orange-400/30 via-red-500/20 to-pink-600/30 transition-transform duration-500 group-hover:scale-110"></div>
                        <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/94a13045-f10f-4f19-b7d6-c4a2162e0772_800w.jpg)] bg-cover transition-transform duration-500 group-hover:scale-110"></div>
                        <div class="absolute bottom-3 left-4">
                            <div class="h-10 w-10 rounded-xl bg-white/10 backdrop-blur-xl border border-white/20 flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>
                            </div>
                        </div>
                    </div>
                    <div class="p-5">
                        <h3 class="text-base font-semibold text-white mb-2 tracking-tight">Seamless Collaboration</h3>
                        <p class="text-zinc-400 text-sm leading-relaxed">Share workspaces and co-create with your team in real-time. Perfect for brainstorming sessions and collaborative thinking.</p>
                        <div class="mt-3 flex items-center text-xs text-orange-300">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>
                            Team • Real-time • Shared
                        </div>
                    </div>
                </div>

                <!-- Card 6 - Universal Sync -->
                <div class="break-inside-avoid group rounded-3xl bg-gradient-to-br from-cyan-500/10 to-blue-600/10 border border-cyan-500/20 hover:border-cyan-400/40 transition-all duration-300 hover-lift fade-in fade-in-delay-5 overflow-hidden mb-6" style="opacity: 1; transform: translateY(0px);">
                    <div class="h-36 bg-gradient-to-br from-cyan-600/20 to-blue-700/20 relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br from-cyan-400/30 via-blue-500/20 to-indigo-600/30 transition-transform duration-500 group-hover:scale-110"></div>
                        <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e0dc3d08-20e4-453f-9867-e5e7bd438fb0_800w.jpg)] bg-cover transition-transform duration-500 group-hover:scale-110"></div>
                        <div class="absolute bottom-3 left-4">
                            <div class="h-10 w-10 rounded-xl bg-white/10 backdrop-blur-xl border border-white/20 flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg>
                            </div>
                        </div>
                    </div>
                    <div class="p-5">
                        <h3 class="text-base font-semibold text-white mb-2 tracking-tight">Universal Sync</h3>
                        <p class="text-zinc-400 text-sm leading-relaxed">Access your thoughts anywhere, anytime across all devices. Seamless synchronization ensures your ideas are always with you.</p>
                        <div class="mt-3 flex items-center text-xs text-cyan-300">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg>
                            Cloud • Cross-platform • Instant
                        </div>
                    </div>
                </div>
            </div>
        </div>