Responsive AI Team Hero Section with CTA

<section class="sm:p-8 bg-zinc-900/50 border border-zinc-800 rounded-3xl pt-6 pr-6 pb-6 pl-6 max-w-5xl">
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-10 items-start">
    <!-- Left: Heading + copy -->
    <div class="flex flex-col justify-between min-h-full">
      <div class="">
        <span class="text-sm text-zinc-500 font-normal font-geist" style="">FlowAI®</span>
        <h2
          class="text-[44px] sm:text-6xl lg:text-7xl leading-[0.9] text-zinc-100 mt-2 font-geist font-medium tracking-tighter"
          style="">Meet our AI team.</h2>

        <!-- subtle plus markers -->
        <div class="mt-8 hidden sm:grid grid-cols-3 gap-6 text-zinc-600">
          <div class="flex items-center gap-2">
            <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" data-lucide="plus"
              class="lucide lucide-plus h-4 w-4">
              <path d="M5 12h14"></path>
              <path d="M12 5v14"></path>
            </svg>
            <span class="text-sm font-normal font-geist" style="">Intelligence</span>
          </div>
          <div class="flex items-center gap-2">
            <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" data-lucide="plus"
              class="lucide lucide-plus h-4 w-4">
              <path d="M5 12h14"></path>
              <path d="M12 5v14"></path>
            </svg>
            <span class="text-sm font-normal font-geist" style="">Automation</span>
          </div>
          <div class="flex items-center gap-2">
            <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" data-lucide="plus"
              class="lucide lucide-plus h-4 w-4">
              <path d="M5 12h14"></path>
              <path d="M12 5v14"></path>
            </svg>
            <span class="text-sm font-normal font-geist" style="">Scale</span>
          </div>
        </div>
      </div>

      <div class="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-8">
        <div class="">
          <p class="text-sm text-zinc-100 font-medium tracking-tight font-geist" style="">Join our AI revolution</p>
          <p class="mt-1 text-sm text-zinc-400 font-geist" style="">We're building the future of intelligent workflow
            automation.</p>
          <button class="mt-4 inline-flex items-center gap-2 h-10 px-4 rounded-full bg-zinc-100 text-zinc-900 text-sm font-normal hover:bg-zinc-200 transition font-geist" style="">
                                View openings
                                <span class="inline-flex h-2 w-2 rounded-full bg-zinc-900"></span>
                            </button>
        </div>
        <p class="text-base text-zinc-300 leading-relaxed sm:text-right font-geist" style="">
          Our team combines <span class="font-medium text-zinc-100 font-geist" style="">cutting-edge AI research</span>
          with practical workflow solutions that scale with your business.
        </p>
      </div>
    </div>

    <!-- Right: Team grid -->
    <div class="grid grid-cols-2 gap-4 h-[320px] relative overflow-hidden"
      style="mask: linear-gradient(to bottom, black 60%, transparent 100%); -webkit-mask: linear-gradient(to bottom, black 60%, transparent 100%);">
      <!-- AI Agent 1 -->
      <article
        class="relative overflow-hidden h-[200px] bg-gradient-to-br from-zinc-800 to-zinc-900 border border-zinc-800 rounded-2xl">
        <div
          class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6d09277c-88d3-4681-8a06-18307469ce9f_800w.jpg)] bg-cover">
        </div>
        <div class="absolute top-3 left-3">
          <span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-zinc-100/90 text-zinc-900 border border-zinc-700">
                <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" data-lucide="brain" class="lucide lucide-brain h-3.5 w-3.5"><path d="M12 18V5"></path><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"></path><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"></path><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"></path><path d="M18 18a4 4 0 0 0 2-7.464"></path><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"></path><path d="M6 18a4 4 0 0 1-2-7.464"></path><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"></path></svg>
            </span>
        </div>
        <div class="absolute top-3 right-3">
          <span class="px-2 py-1 rounded-md bg-zinc-900/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-zinc-800 font-geist" style="">ML Engine</span>
        </div>
        <div class="absolute bottom-3 left-3 right-3">
          <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist" style="">Neural.Core</p>
        </div>
      </article>

      <!-- AI Agent 2 -->
      <article
        class="relative overflow-hidden h-[200px] bg-gradient-to-br from-zinc-800 to-zinc-900 border border-zinc-800 rounded-2xl">
        <div
          class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0e60f1bd-bde0-4ec4-8c23-24383a8b650a_800w.jpg)] bg-cover">
        </div>
        <div class="absolute top-3 left-3">
          <span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-zinc-100/90 text-zinc-900 border border-zinc-700">
                <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" data-lucide="zap" class="lucide lucide-zap h-3.5 w-3.5"><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"></path></svg>
            </span>
        </div>
        <div class="absolute top-3 right-3">
          <span class="px-2 py-1 rounded-md bg-zinc-900/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-zinc-800 font-geist" style="">Automation</span>
        </div>
        <div class="absolute bottom-3 left-3 right-3">
          <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist" style="">Auto.Flow</p>
        </div>
      </article>

      <!-- AI Agent 3 -->
      <article
        class="relative overflow-hidden h-[200px] bg-gradient-to-br from-zinc-800 to-zinc-900 border border-zinc-800 rounded-2xl">
        <div
          class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ac4a631c-975f-4482-9cef-2a1f99a48178_800w.jpg)] bg-cover">
        </div>
        <div class="absolute top-3 left-3">
          <span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-zinc-100/90 text-zinc-900 border border-zinc-700">
                <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" data-lucide="trending-up" class="lucide lucide-trending-up h-3.5 w-3.5"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>
            </span>
        </div>
        <div class="absolute top-3 right-3">
          <span class="px-2 py-1 rounded-md bg-zinc-900/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-zinc-800 font-geist" style="">Analytics</span>
        </div>
        <div class="absolute bottom-3 left-3 right-3">
          <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist" style="">Insight.AI</p>
        </div>
      </article>

      <!-- AI Agent 4 -->
      <article
        class="relative overflow-hidden h-[200px] bg-gradient-to-br from-zinc-800 to-zinc-900 border border-zinc-800 rounded-2xl">
        <div
          class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0129262d-84f8-4262-b816-efd622faf4e8_800w.jpg)] bg-cover">
        </div>
        <div class="absolute top-3 left-3">
          <span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-zinc-100/90 text-zinc-900 border border-zinc-700">
                <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" data-lucide="shield-check" class="lucide lucide-shield-check h-3.5 w-3.5"><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"></path><path d="m9 12 2 2 4-4"></path></svg>
            </span>
        </div>
        <div class="absolute top-3 right-3">
          <span class="px-2 py-1 rounded-md bg-zinc-900/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-zinc-800 font-geist" style="">Security</span>
        </div>
        <div class="absolute bottom-3 left-3 right-3">
          <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist" style="">Guard.Net</p>
        </div>
      </article>
    </div>
  </div>
</section>