Animated Four-Step Process Section (Tailwind)

<section
  class="relative z-10 sm:p-8 animate-scaleIn animation-delay-400 bg-zinc-950/10 w-full max-w-7xl border-white/10 border rounded-3xl mt-24 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 backdrop-blur">
  <!-- Header -->
  <div class="flex gap-6 sm:px-0 pr-1 pl-1 items-center animate-fadeInUp">
    <span class="inline-flex items-center gap-2 text-sm">
      <span class="text-4xl font-medium text-white">My Process</span>
    </span>
    <span aria-hidden="true" role="separator" aria-orientation="vertical" class="w-px h-10 bg-white/10"></span>
    <span class="text-sm text-neutral-300">how we work together</span>
  </div>
  <div class="h-px bg-white/10 mt-4 animate-fadeIn animation-delay-100"></div>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mt-8">

    <!-- Step 1 -->
    <div class="animate-fadeInUp animation-delay-200">
      <div class="relative">
        <div
          class="w-12 h-12 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center mb-4">
          <span class="text-lg font-semibold text-blue-400">01</span>
        </div>

      </div>
      <h3 class="text-lg font-medium text-white mb-3">Discovery</h3>
      <p class="text-sm text-neutral-400 leading-relaxed">We start with understanding your goals, audience, and
        challenges through detailed consultation.</p>
    </div>

    <!-- Step 2 -->
    <div class="animate-fadeInUp animation-delay-300">
      <div class="relative">
        <div
          class="w-12 h-12 rounded-xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center mb-4">
          <span class="text-lg font-semibold text-purple-400">02</span>
        </div>
        <div class="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-purple-500/20 animate-pulse animation-delay-100">
        </div>
      </div>
      <h3 class="text-lg font-medium text-white mb-3">Strategy</h3>
      <p class="text-sm text-neutral-400 leading-relaxed">Developing a comprehensive plan and approach tailored to your
        specific needs and objectives.</p>
    </div>

    <!-- Step 3 -->
    <div class="animate-fadeInUp animation-delay-400">
      <div class="relative">
        <div
          class="w-12 h-12 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mb-4">
          <span class="text-lg font-semibold text-emerald-400">03</span>
        </div>
        <div class="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-emerald-500/20 animate-pulse animation-delay-200">
        </div>
      </div>
      <h3 class="text-lg font-medium text-white mb-3">Creation</h3>
      <p class="text-sm text-neutral-400 leading-relaxed">Bringing ideas to life through iterative design and
        development with regular feedback loops.</p>
    </div>

    <!-- Step 4 -->
    <div class="animate-fadeInUp animation-delay-500">
      <div class="relative">
        <div
          class="w-12 h-12 rounded-xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center mb-4">
          <span class="text-lg font-semibold text-amber-400">04</span>
        </div>
        <div class="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-amber-500/20 animate-pulse animation-delay-300">
        </div>
      </div>
      <h3 class="text-lg font-medium text-white mb-3">Launch</h3>
      <p class="text-sm text-neutral-400 leading-relaxed">Delivering polished solutions with ongoing support and
        optimization for continued success.</p>
    </div>
  </div>
</section>