Responsive 'How It Works' Bento Grid Steps Section

<div class="max-w-7xl mr-auto ml-auto pt-6 pr-6 pb-6 pl-6">
  <div class="text-center max-w-3xl mx-auto mb-16 scroll-animate fade-up visible">
    <h2 class="text-4xl sm:text-5xl font-light tracking-tight text-white font-bricolage mb-6">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-emerald-400">How it</span> works
    </h2>
    <p class="text-xl text-gray-300 font-geist font-light scroll-animate fade-up delay-200 visible">From setup to cash
      in days. A fast, guided flow your team can launch over lunch.</p>
    <div
      class="inline-flex items-center gap-2 rounded-xl border border-blue-400/20 bg-blue-400/10 px-3 py-2 mt-4 scroll-animate scale-in delay-300 visible">
      <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" data-lucide="timer"
        class="lucide lucide-timer h-4 w-4 text-blue-300">
        <line x1="10" x2="14" y1="2" y2="2" class=""></line>
        <line x1="12" x2="15" y1="14" y2="11" class=""></line>
        <circle cx="12" cy="14" r="8" class=""></circle>
      </svg>
      <span class="text-sm text-blue-200 font-geist">Avg setup: 12 minutes</span>
    </div>
  </div>

  <!-- Bento Grid Steps -->
  <div class="space-y-8">
    <!-- Row 1: 1/3 - 2/3 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 xl:gap-8">
      <!-- Step 1 - 1/3 Column -->
      <div
        class="bg-gradient-to-br from-blue-900/20 to-indigo-900/20 border border-blue-400/20 rounded-2xl p-8 hover:border-blue-400/40 transition-all duration-300 backdrop-blur-xl scroll-animate fade-left delay-400 visible">
        <div class="h-12 w-12 rounded-xl bg-blue-500/15 flex items-center justify-center mb-6">
          <span class="text-xl font-semibold text-blue-200 font-geist">1</span>
        </div>
        <h3 class="text-xl font-semibold text-white font-geist mb-3">Connect your stack</h3>
        <p class="text-gray-300 font-geist font-light mb-4">Securely link banks and accounting. We sync charts,
          customers, and invoices in real time.</p>
        <div class="flex flex-wrap gap-2 text-xs text-gray-400 font-geist">
          <span class="inline-flex items-center gap-1 bg-white/5 border border-white/10 px-2 py-1 rounded-md">
                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path></svg>
                  OAuth &amp; read-only
                </span>
          <span class="inline-flex items-center gap-1 bg-white/5 border border-white/10 px-2 py-1 rounded-md">
                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-indigo-400"><path d="M9 17H7A5 5 0 0 1 7 7h2" class=""></path><path d="M15 7h2a5 5 0 1 1 0 10h-2" class=""></path><line x1="8" x2="16" y1="12" y2="12" class=""></line></svg>
                  Webhooks enabled
                </span>
        </div>
      </div>

      <!-- Step 2 - 2/3 Column -->
      <div
        class="lg:col-span-2 bg-gradient-to-br from-purple-900/20 to-pink-900/20 border border-purple-400/20 rounded-2xl p-8 hover:border-purple-400/40 transition-all duration-300 backdrop-blur-xl scroll-animate fade-right delay-500 visible">
        <div class="flex flex-col md:flex-row md:items-center">
          <div class="md:w-1/2 mb-6 md:mb-0">
            <div class="h-12 w-12 rounded-xl bg-purple-500/15 flex items-center justify-center mb-6">
              <span class="text-xl font-semibold text-purple-200 font-geist">2</span>
            </div>
            <h3 class="text-xl font-semibold text-white font-geist mb-3">Create or import invoices</h3>
            <p class="text-gray-300 font-geist font-light">Spin up branded invoices or pull existing ones—taxes, terms,
              and line items included.</p>
          </div>
          <div class="md:w-1/2 md:pl-8">
            <div class="grid grid-cols-2 gap-3">
              <div class="bg-white/5 border border-white/10 rounded-lg p-3">
                <div class="flex items-center justify-between mb-2">
                  <span class="text-xs text-gray-300 font-geist">Template</span>
                  <span class="text-xs text-emerald-300 font-geist">Brand-ready</span>
                </div>
                <p class="text-sm text-white font-geist">INV-2024-0342</p>
              </div>
              <div class="bg-white/5 border border-white/10 rounded-lg p-3">
                <div class="flex items-center justify-between mb-2">
                  <span class="text-xs text-gray-300 font-geist">Terms</span>
                  <span class="text-xs text-blue-300 font-geist">Net 15</span>
                </div>
                <p class="text-sm text-white font-geist">Late fee 1.5%</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Row 2: 2/3 - 1/3 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 xl:gap-8">
      <!-- Step 3 - 2/3 Column -->
      <div
        class="lg:col-span-2 bg-gradient-to-br from-amber-900/20 to-orange-900/20 border border-amber-400/20 rounded-2xl p-8 hover:border-amber-400/40 transition-all duration-300 backdrop-blur-xl scroll-animate fade-left delay-400 visible">
        <div class="flex flex-col md:flex-row md:items-center">
          <div class="md:w-1/2 mb-6 md:mb-0">
            <div class="h-12 w-12 rounded-xl bg-amber-500/15 flex items-center justify-center mb-6">
              <span class="text-xl font-semibold text-amber-200 font-geist">3</span>
            </div>
            <h3 class="text-xl font-semibold text-white font-geist mb-3">Automate reminders</h3>
            <p class="text-gray-300 font-geist font-light">Personalized nudges by timezone and behavior—no spam, just
              results.</p>
          </div>
          <div class="md:w-1/2 md:pl-8">
            <div class="space-y-3">
              <div class="bg-gradient-to-r from-amber-900/30 to-black/50 p-3 rounded-lg border border-amber-400/30">
                <div class="flex items-center justify-between">
                  <span class="text-sm text-gray-300 font-geist">Faster Payment</span>
                  <span class="text-amber-300 font-semibold">+18%</span>
                </div>
              </div>
              <div class="bg-gradient-to-r from-amber-900/30 to-black/50 p-3 rounded-lg border border-amber-400/30">
                <div class="flex items-center justify-between">
                  <span class="text-sm text-gray-300 font-geist">Smart Windows</span>
                  <span class="text-amber-300 font-semibold">Active</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Step 4 - 1/3 Column -->
      <div
        class="bg-gradient-to-br from-emerald-900/20 to-green-900/20 border border-emerald-400/20 rounded-2xl p-8 hover:border-emerald-400/40 transition-all duration-300 backdrop-blur-xl scroll-animate fade-right delay-500 visible">
        <div class="h-12 w-12 rounded-xl bg-emerald-500/15 flex items-center justify-center mb-6">
          <span class="text-xl font-semibold text-emerald-200 font-geist">4</span>
        </div>
        <h3 class="text-xl font-semibold text-white font-geist mb-3">Get paid &amp; auto-reconcile</h3>
        <p class="text-gray-300 font-geist font-light mb-4">Funds settle to your account while ML rules match payments
          to invoices.</p>
        <div class="flex flex-wrap gap-2 text-xs text-gray-400 font-geist">
          <span class="inline-flex items-center gap-1 bg-white/5 border border-white/10 px-2 py-1 rounded-md">
                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path></svg>
                  92% auto-match
                </span>
          <span class="inline-flex items-center gap-1 bg-white/5 border border-white/10 px-2 py-1 rounded-md">
                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-purple-400"><path d="M12 8V4H8" class=""></path><rect width="16" height="12" x="4" y="8" rx="2" class=""></rect><path d="M2 14h2" class=""></path><path d="M20 14h2" class=""></path><path d="M15 13v2" class=""></path><path d="M9 13v2" class=""></path></svg>
                  SCA checkout
                </span>
        </div>
      </div>
    </div>
  </div>

  <!-- CTA Section -->



</div>