Team Bubble Cloud

<section class="ws-team py-20">
  <div class="mx-auto max-w-4xl px-6 text-center">
    <h2 class="text-3xl font-bold text-[var(--ws-team-text,#1a1a1a)] sm:text-4xl">The people behind the product</h2>
    <div class="relative mx-auto mt-16 h-[320px] max-w-2xl sm:h-[360px]">
      <!-- Avatar positions are intentionally organic, not grid-aligned -->
      <a href="#" class="absolute left-[12%] top-[10%] h-16 w-16 overflow-hidden rounded-full shadow-lg ring-2 ring-white transition-transform hover:scale-110 sm:h-20 sm:w-20" title="Product Designer">
        <div class="flex h-full w-full items-center justify-center bg-indigo-100 text-lg font-bold text-indigo-600">AD</div>
      </a>
      <a href="#" class="absolute left-[5%] top-[50%] h-12 w-12 overflow-hidden rounded-full shadow-lg ring-2 ring-white transition-transform hover:scale-110 sm:h-14 sm:w-14" title="Marketing Lead">
        <div class="flex h-full w-full items-center justify-center bg-rose-100 text-sm font-bold text-rose-600">ML</div>
      </a>
      <a href="#" class="absolute left-[28%] top-[42%] h-20 w-20 overflow-hidden rounded-full shadow-lg ring-2 ring-white transition-transform hover:scale-110 sm:h-24 sm:w-24" title="CEO & Founder">
        <div class="flex h-full w-full items-center justify-center bg-amber-100 text-xl font-bold text-amber-700">JK</div>
      </a>
      <a href="#" class="absolute left-[38%] top-[0%] h-14 w-14 overflow-hidden rounded-full shadow-lg ring-2 ring-white transition-transform hover:scale-110 sm:h-16 sm:w-16" title="Frontend Developer">
        <div class="flex h-full w-full items-center justify-center bg-emerald-100 text-sm font-bold text-emerald-600">SR</div>
      </a>
      <a href="#" class="absolute left-[55%] top-[15%] h-16 w-16 overflow-hidden rounded-full shadow-lg ring-2 ring-white transition-transform hover:scale-110 sm:h-20 sm:w-20" title="Backend Developer">
        <div class="flex h-full w-full items-center justify-center bg-sky-100 text-lg font-bold text-sky-600">BN</div>
      </a>
      <a href="#" class="absolute left-[45%] top-[55%] h-14 w-14 overflow-hidden rounded-full shadow-lg ring-2 ring-white transition-transform hover:scale-110 sm:h-16 sm:w-16" title="UI/UX Designer">
        <div class="flex h-full w-full items-center justify-center bg-violet-100 text-sm font-bold text-violet-600">EK</div>
      </a>
      <a href="#" class="absolute left-[70%] top-[8%] h-12 w-12 overflow-hidden rounded-full shadow-lg ring-2 ring-white transition-transform hover:scale-110 sm:h-14 sm:w-14" title="DevOps Engineer">
        <div class="flex h-full w-full items-center justify-center bg-orange-100 text-sm font-bold text-orange-600">DP</div>
      </a>
      <a href="#" class="absolute left-[68%] top-[45%] h-18 w-18 overflow-hidden rounded-full shadow-lg ring-2 ring-white transition-transform hover:scale-110 sm:h-20 sm:w-20" title="CTO">
        <div class="flex h-full w-full items-center justify-center bg-teal-100 text-lg font-bold text-teal-600">RW</div>
      </a>
      <a href="#" class="absolute left-[82%] top-[25%] h-14 w-14 overflow-hidden rounded-full shadow-lg ring-2 ring-white transition-transform hover:scale-110" title="QA Engineer">
        <div class="flex h-full w-full items-center justify-center bg-pink-100 text-sm font-bold text-pink-600">CT</div>
      </a>
      <a href="#" class="absolute left-[22%] top-[72%] h-12 w-12 overflow-hidden rounded-full shadow-lg ring-2 ring-white transition-transform hover:scale-110" title="Data Analyst">
        <div class="flex h-full w-full items-center justify-center bg-cyan-100 text-sm font-bold text-cyan-600">LM</div>
      </a>
      <a href="#" class="absolute left-[60%] top-[70%] h-12 w-12 overflow-hidden rounded-full shadow-lg ring-2 ring-white transition-transform hover:scale-110" title="Support Lead">
        <div class="flex h-full w-full items-center justify-center bg-lime-100 text-sm font-bold text-lime-700">PH</div>
      </a>
    </div>
  </div>
</section>