Gradient Hero Section with CTA and Stats

<div class="relative overflow-hidden bg-white/5 border-white/10 border rounded-2xl w-full min-h-[300px]">
  <div class="absolute inset-0 bg-gradient-to-tr from-blue-500/10 via-transparent to-purple-500/10 pointer-events-none"></div>
  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b1c8bd29-43a2-426c-9dd1-916b14f8554d_3840w.jpg" alt="Creative team working on design projects" class="w-full h-full object-cover" loading="eager">
  <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 via-transparent to-transparent pointer-events-none"></div>

  <div class="absolute inset-0 flex items-end">
    <div class="w-full sm:p-8 pt-6 pr-6 pb-6 pl-6">
  <div class="max-w-3xl">
    <h2 class="text-3xl sm:text-4xl lg:text-7xl text-white font-geist tracking-tighter drop-shadow-lg">Design that moves brands forward</h2>
    <p class="sm:text-lg leading-relaxed text-lg font-normal text-white/90 font-geist mt-3 drop-shadow-sm">
      We craft brand identities, digital products, and strategic campaigns for ambitious teams. From concept to launch, our studio blends clarity, utility, and aesthetics to create work that performs and endures. Explore a curated reel of recent collaborations and outcomes.
    </p>
    <div class="mt-4">
      <a href="#showreel" class="inline-flex items-center gap-2 hover:bg-white/15 text-sm font-medium text-white tracking-tight bg-white/8 backdrop-blur-sm rounded-full pt-2 pr-4 pb-2 pl-4 border border-white/15 shadow-sm transition-all duration-300">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play w-4 h-4 stroke-1.5"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
        <span class="font-geist">Watch Showreel</span>
      </a>
    </div>
  </div>

  <div class="mt-6 grid grid-cols-2 sm:grid-cols-4 gap-3">
    <div class="rounded-xl bg-white/6 backdrop-blur-sm border border-white/10 p-3 shadow-sm hover:bg-white/10 transition-all duration-300">
      <div class="text-xl font-semibold tracking-tight text-white font-geist drop-shadow-sm">200+</div>
      <p class="text-[11px] text-white/80 mt-0.5 font-geist">Projects Delivered</p>
    </div>
    <div class="rounded-xl bg-white/6 backdrop-blur-sm border border-white/10 p-3 shadow-sm hover:bg-white/10 transition-all duration-300">
      <div class="text-xl font-semibold tracking-tight text-white font-geist drop-shadow-sm">50+</div>
      <p class="text-[11px] text-white/80 mt-0.5 font-geist">Clients Worldwide</p>
    </div>
    <div class="rounded-xl bg-white/6 backdrop-blur-sm border border-white/10 p-3 shadow-sm hover:bg-white/10 transition-all duration-300">
      <div class="text-xl font-semibold tracking-tight text-white font-geist drop-shadow-sm">8</div>
      <p class="text-[11px] text-white/80 mt-0.5 font-geist">Years in Practice</p>
    </div>
    <div class="rounded-xl bg-white/6 backdrop-blur-sm border border-white/10 p-3 shadow-sm hover:bg-white/10 transition-all duration-300">
      <div class="text-xl font-semibold tracking-tight text-white font-geist drop-shadow-sm">12</div>
      <p class="text-[11px] text-white/80 mt-0.5 font-geist">Team Members</p>
    </div>
  </div>
</div>
  </div>
</div>