Four-Step Process Section with Animated Cards

<div class="grid grid-cols-12 gap-6 bg-neutral-950/90 border-neutral-800 border rounded-3xl pt-24 pb-24 max-w-7xl">
  <div class="col-span-12 md:col-span-10 md:col-start-2">
    <div class="fade-in-up mb-16 visible">
      <h2 class="text-[44px] sm:text-[56px] md:text-[74px] font-light tracking-tighter font-playfair mb-6">My Process
      </h2>
      <p class="text-lg text-neutral-300/90 font-geist max-w-2xl">
        A structured approach to design that ensures every solution is grounded in user needs and business objectives.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
      <!-- Step 1 -->
      <div
        class="fade-in-up bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/30eeab2d-e97c-4b45-b740-6695c7862813_1600w.jpg)] bg-cover border-zinc-800 border rounded-2xl pt-6 pr-6 pb-6 pl-6 space-y-6 visible">
        <div class="flex items-center gap-4">
          <div
            class="w-12 h-12 rounded-full border border-neutral-700 flex items-center justify-center text-sm font-medium font-geist">
            01</div>
          <h3 class="text-2xl font-light font-playfair">Research &amp; Discovery</h3>
        </div>
        <p class="text-neutral-300/80 leading-relaxed font-geist pl-16">
          Deep dive into user needs, business goals, and market landscape through interviews, surveys, and competitive
          analysis to establish a solid foundation.
        </p>
        <div class="pl-16">
          <div class="space-y-2 text-sm text-neutral-400 font-geist">
            <div class="">• User interviews &amp; surveys</div>
            <div class="">• Competitive analysis</div>
            <div class="">• Stakeholder workshops</div>
            <div class="">• Requirements gathering</div>
          </div>
        </div>
      </div>

      <!-- Step 2 -->
      <div class="fade-in-up stagger-delay-1 border-zinc-800 border rounded-2xl pt-6 pr-6 pb-6 pl-6 space-y-6 visible">
        <div class="flex items-center gap-4">
          <div
            class="w-12 h-12 rounded-full border border-neutral-700 flex items-center justify-center text-sm font-medium font-geist">
            02</div>
          <h3 class="text-2xl font-light font-playfair">Define &amp; Strategize</h3>
        </div>
        <p class="text-neutral-300/80 leading-relaxed font-geist pl-16">
          Synthesize research findings into actionable insights, define user personas, and establish clear design
          principles and success metrics.
        </p>
        <div class="pl-16">
          <div class="space-y-2 text-sm text-neutral-400 font-geist">
            <div class="">• User personas &amp; journeys</div>
            <div class="">• Problem definition</div>
            <div class="">• Design principles</div>
            <div class="">• Success metrics</div>
          </div>
        </div>
      </div>

      <!-- Step 3 -->
      <div class="fade-in-up stagger-delay-2 border-zinc-800 border rounded-2xl pt-6 pr-6 pb-6 pl-6 space-y-6 visible">
        <div class="flex items-center gap-4">
          <div
            class="w-12 h-12 rounded-full border border-neutral-700 flex items-center justify-center text-sm font-medium font-geist">
            03</div>
          <h3 class="text-2xl font-light font-playfair">Ideate &amp; Prototype</h3>
        </div>
        <p class="text-neutral-300/80 leading-relaxed font-geist pl-16">
          Generate multiple solutions through sketching and ideation, then create low to high-fidelity prototypes for
          testing and validation.
        </p>
        <div class="pl-16">
          <div class="space-y-2 text-sm text-neutral-400 font-geist">
            <div class="">• Sketching &amp; wireframes</div>
            <div class="">• Information architecture</div>
            <div class="">• Interactive prototypes</div>
            <div class="">• Design iterations</div>
          </div>
        </div>
      </div>

      <!-- Step 4 -->
      <div
        class="fade-in-up stagger-delay-3 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/d332ff93-b258-4594-bf65-7ccd8793ff59_1600w.jpg)] bg-cover border-zinc-800 border rounded-2xl pt-6 pr-6 pb-6 pl-6 space-y-6 visible">
        <div class="flex items-center gap-4">
          <div
            class="w-12 h-12 rounded-full border border-neutral-700 flex items-center justify-center text-sm font-medium font-geist">
            04</div>
          <h3 class="text-2xl font-light font-playfair">Test &amp; Refine</h3>
        </div>
        <p class="text-neutral-300/80 leading-relaxed font-geist pl-16">
          Validate designs through user testing, gather feedback, and iterate based on insights to ensure the solution
          meets user needs effectively.
        </p>
        <div class="pl-16">
          <div class="space-y-2 text-sm text-neutral-400 font-geist">
            <div class="">• Usability testing</div>
            <div class="">• A/B testing</div>
            <div class="">• Design handoff</div>
            <div class="">• Post-launch analysis</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>