Three-Step Design Process Section

<section class="sm:px-6 md:px-10 w-full max-w-7xl mt-20 mr-auto ml-auto pr-4 pl-4">
        <div class="bg-neutral-950 rounded-3xl p-8 sm:p-12 relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-transparent to-pink-900/20"></div>
            <div class="relative">
                <h2 class="text-3xl sm:text-4xl text-white font-medium tracking-tight mb-8" style="font-family: 'Playfair Display', serif;">
                    Design Process
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="relative">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center">
                                <span class="text-white text-sm font-semibold">01</span>
                            </div>
                            <h3 class="text-white text-lg font-medium">Discovery &amp; Strategy</h3>
                        </div>
                        <p class="text-neutral-300 text-sm leading-relaxed">
                            Deep dive into nightlife culture, competitor analysis, and brand positioning workshops to establish the core identity and values.
                        </p>
                        <div class="mt-4 space-y-1 text-xs text-neutral-400">
                            <div class="">• Market research &amp; analysis</div>
                            <div class="">• Brand positioning workshop</div>
                            <div class="">• Stakeholder interviews</div>
                        </div>
                    </div>

                    <div class="relative">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center">
                                <span class="text-white text-sm font-semibold">02</span>
                            </div>
                            <h3 class="text-white text-lg font-medium">Visual Exploration</h3>
                        </div>
                        <p class="text-neutral-300 text-sm leading-relaxed">
                            Mood boards, typography experiments, and color explorations to find the perfect balance between luxury and energy.
                        </p>
                        <div class="mt-4 space-y-1 text-xs text-neutral-400">
                            <div class="">• Mood board creation</div>
                            <div>• Typography exploration</div>
                            <div>• Color system development</div>
                        </div>
                    </div>

                    <div class="relative">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center">
                                <span class="text-black text-sm font-semibold">03</span>
                            </div>
                            <h3 class="text-white text-lg font-medium">System &amp; Launch</h3>
                        </div>
                        <p class="text-neutral-300 text-sm leading-relaxed">
                            Comprehensive brand guidelines, application across all touchpoints, and successful launch across three venues.
                        </p>
                        <div class="mt-4 space-y-1 text-xs text-neutral-400">
                            <div class="">• Brand guidelines creation</div>
                            <div class="">• Touchpoint implementation</div>
                            <div>• Launch strategy &amp; support</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>