Responsive Hero Banner with CTA Button

<div class="max-w-3xl">
    <h2 class="text-3xl sm:text-4xl lg:text-7xl text-black font-geist tracking-tighter">Design that moves brands forward</h2>
    <p class="sm:text-lg leading-relaxed text-lg font-normal text-black/90 font-geist mt-3">
      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-black/15 text-sm font-medium text-black tracking-tight bg-black/8 backdrop-blur-sm rounded-full pt-2 pr-4 pb-2 pl-4 border border-black/10 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" class=""></path></svg>
        <span class="font-geist">Watch Showreel</span>
      </a>
    </div>
  </div>