Glassmorphic Three-Step Process Section

<div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4">
  <div class="text-center mb-12">
    <span class="inline-flex items-center gap-2 px-3.5 py-1 text-xs font-medium border border-white/10 text-zinc-400 tracking-wide" style="background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(8px);">
                    Process
                </span>
    <h2 class="mt-4 text-4xl sm:text-6xl font-light tracking-tight">How It Works</h2>
    <p class="mt-3 sm:text-xl text-neutral-400 font-light">Our proven three-step process to bring your creative vision
      to life</p>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="relative overflow-hidden sm:p-8 border-white/10 border pt-8 pr-6 pb-8 pl-6"
      style="background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);">
      <!-- Corner accents -->
      <div class="pointer-events-none absolute left-1 top-1 w-3 h-3"
        style="border-top: 1px solid rgba(255,255,255,0.25); border-left: 1px solid rgba(255,255,255,0.25);"></div>
      <div class="pointer-events-none absolute right-1 top-1 w-3 h-3"
        style="border-top: 1px solid rgba(255,255,255,0.25); border-right: 1px solid rgba(255,255,255,0.25);"></div>
      <div class="pointer-events-none absolute left-1 bottom-1 w-3 h-3"
        style="border-bottom: 1px solid rgba(255,255,255,0.25); border-left: 1px solid rgba(255,255,255,0.25);"></div>
      <div class="pointer-events-none absolute right-1 bottom-1 w-3 h-3"
        style="border-bottom: 1px solid rgba(255,255,255,0.25); border-right: 1px solid rgba(255,255,255,0.25);"></div>

      <div class="absolute inset-0 pointer-events-none"
        style="background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px);"></div>

      <div class="relative text-center max-w-3xl mx-auto">
        <!-- Step pill with side bars -->
        <div class="relative inline-flex items-center justify-center">
          <span class="absolute -left-2 h-8 w-px bg-gradient-to-b from-white/70 to-white/10"></span>
          <span class="px-4 py-1.5 text-sm font-medium text-neutral-200 border border-white/10" style="background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px);">
                                step 1
                            </span>
          <span class="absolute -right-2 h-8 w-px bg-gradient-to-b from-white/70 to-white/10"></span>
        </div>

        <!-- Title -->
        <h3 class="mt-6 sm:mt-8 text-3xl sm:text-4xl font-light tracking-tight text-neutral-200">
          Discovery &amp; Strategy
        </h3>

        <!-- Description -->
        <p class="mt-6 sm:text-xl text-lg text-neutral-400 max-w-3xl mx-auto font-light">
          We dive deep into your brand, goals, and audience to develop a creative strategy that drives results.
        </p>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="relative overflow-hidden sm:p-8 border-white/10 border pt-8 pr-6 pb-8 pl-6"
      style="background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);">
      <!-- Corner accents -->
      <div class="pointer-events-none absolute left-1 top-1 w-3 h-3"
        style="border-top: 1px solid rgba(255,255,255,0.25); border-left: 1px solid rgba(255,255,255,0.25);"></div>
      <div class="pointer-events-none absolute right-1 top-1 w-3 h-3"
        style="border-top: 1px solid rgba(255,255,255,0.25); border-right: 1px solid rgba(255,255,255,0.25);"></div>
      <div class="pointer-events-none absolute left-1 bottom-1 w-3 h-3"
        style="border-bottom: 1px solid rgba(255,255,255,0.25); border-left: 1px solid rgba(255,255,255,0.25);"></div>
      <div class="pointer-events-none absolute right-1 bottom-1 w-3 h-3"
        style="border-bottom: 1px solid rgba(255,255,255,0.25); border-right: 1px solid rgba(255,255,255,0.25);"></div>

      <div class="absolute inset-0 pointer-events-none"
        style="background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px);"></div>

      <div class="relative text-center max-w-3xl mx-auto">
        <!-- Step pill with side bars -->
        <div class="relative inline-flex items-center justify-center">
          <span class="absolute -left-2 h-8 w-px bg-gradient-to-b from-white/70 to-white/10"></span>
          <span class="px-4 py-1.5 text-sm font-medium text-neutral-200 border border-white/10" style="background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px);">
                                step 2
                            </span>
          <span class="absolute -right-2 h-8 w-px bg-gradient-to-b from-white/70 to-white/10"></span>
        </div>

        <!-- Title -->
        <h3 class="mt-6 sm:mt-8 text-3xl sm:text-4xl font-light tracking-tight text-neutral-200">
          Design &amp; Create
        </h3>

        <!-- Description -->
        <p class="mt-6 sm:text-xl text-lg text-neutral-400 max-w-3xl mx-auto font-light">
          Our team crafts stunning visuals and experiences that capture your brand essence and engage your audience.
        </p>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="relative overflow-hidden sm:p-8 border-white/10 border pt-8 pr-6 pb-8 pl-6"
      style="background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);">
      <!-- Corner accents -->
      <div class="pointer-events-none absolute left-1 top-1 w-3 h-3"
        style="border-top: 1px solid rgba(255,255,255,0.25); border-left: 1px solid rgba(255,255,255,0.25);"></div>
      <div class="pointer-events-none absolute right-1 top-1 w-3 h-3"
        style="border-top: 1px solid rgba(255,255,255,0.25); border-right: 1px solid rgba(255,255,255,0.25);"></div>
      <div class="pointer-events-none absolute left-1 bottom-1 w-3 h-3"
        style="border-bottom: 1px solid rgba(255,255,255,0.25); border-left: 1px solid rgba(255,255,255,0.25);"></div>
      <div class="pointer-events-none absolute right-1 bottom-1 w-3 h-3"
        style="border-bottom: 1px solid rgba(255,255,255,0.25); border-right: 1px solid rgba(255,255,255,0.25);"></div>

      <div class="absolute inset-0 pointer-events-none"
        style="background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px);"></div>

      <div class="relative text-center max-w-3xl mx-auto">
        <!-- Step pill with side bars -->
        <div class="relative inline-flex items-center justify-center">
          <span class="absolute -left-2 h-8 w-px bg-gradient-to-b from-white/70 to-white/10"></span>
          <span class="px-4 py-1.5 text-sm font-medium text-neutral-200 border border-white/10" style="background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px);">
                                step 3
                            </span>
          <span class="absolute -right-2 h-8 w-px bg-gradient-to-b from-white/70 to-white/10"></span>
        </div>

        <!-- Title -->
        <h3 class="mt-6 sm:mt-8 text-3xl sm:text-4xl font-light tracking-tight text-neutral-200">
          Launch &amp; Support
        </h3>

        <!-- Description -->
        <p class="mt-6 sm:text-xl text-lg text-neutral-400 max-w-3xl mx-auto font-light">
          We deliver polished results and provide ongoing support to ensure your project's continued success.
        </p>
      </div>
    </div>
  </div>

  <div class="mt-12">
    <div class="mx-auto max-w-5xl">
      <div class="h-px w-full bg-gradient-to-r from-transparent via-neutral-800 to-transparent"></div>
      <div class="mt-8 flex flex-col items-center justify-between gap-4 sm:flex-row">
        <p class="text-center sm:text-left text-lg text-neutral-300 font-light">Ready to start your creative journey
          with us?</p>
        <button class="inline-flex items-center gap-2 border px-4 py-2.5 text-sm font-medium border-blue-500/60 text-blue-400 hover:bg-blue-500/10" style="background: rgba(59, 130, 246, 0.05); backdrop-filter: blur(8px);">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                                <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" class=""></path>
                            </svg>
                            Start Your Project
                        </button>
      </div>
    </div>
  </div>
</div>