Hero Section with Image & CTA Buttons

<section
  class="relative z-10 sm:p-8 animate-scaleIn animation-delay-200 bg-neutral-900/60 w-full bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ee9b32bb-e72d-47cb-a983-ddf26a66cef2_1600w.jpg)] max-w-7xl bg-cover border-white/10 border rounded-3xl mt-24 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 backdrop-blur"
  style="height: 600px;">
  <!-- Background layers -->
  <div class="absolute inset-0 overflow-hidden -z-10 rounded-3xl">
    <div
      class="absolute inset-0 bg-gradient-to-tr from-neutral-950 via-slate-900 to-neutral-950 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c06498e9-85e2-4173-a1f6-86b1267897f0_1600w.jpg)] bg-cover invisible">
      <div data-us-project="OMO2zbNkRGUqAVYhB4jD"
        style="width:100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;"></div>
    </div>
    <div class="absolute -left-20 -top-24 bg-transparent w-[70%] h-[140%] blur-3xl rotate-12 invisible"
      style="left: 0; transform: translateX(0) rotate(12deg);">

    </div>
    <div class="absolute -left-20 -top-24 bg-transparent w-[70%] h-[140%] blur-3xl rotate-12 invisible"
      style="left: 0; transform: translateX(0) rotate(12deg);">
      <div aria-hidden="true" class="pointer-events-none select-none absolute bottom-6 left-6"
        style="letter-spacing:-0.02em;">
        <span class="block leading-none" style="font-weight:600; font-size:min(20vw, 280px); line-height:0.8; color: rgba(125, 211, 252, 0.5);">BRIND</span>
      </div>
    </div>

    <!-- Brand name positioned at left to align with header text -->
    <div aria-hidden="true"
      class="pointer-events-none select-none absolute bottom-6 left-6 animate-fadeIn animation-delay-600"
      style="letter-spacing:-0.02em;">
      <span class="block leading-none" style="font-weight:600; font-size:min(20vw, 280px); line-height:0.8; color: rgba(125, 211, 252, 0.5);">BRIND</span>
    </div>
  </div>

  <!-- Content -->
  <div class="relative grid grid-cols-1 lg:grid-cols-12 gap-8 sm:gap-10 items-start">
    <!-- Left: Headline -->
    <div class="lg:col-span-7">
      <h1
        class="text-[44px] sm:text-6xl md:text-7xl leading-[1.05] font-light text-zinc-100 tracking-tighter animate-fadeInLeft animation-delay-300">
        Building Digital Experiences That Captivate</h1>
    </div>

    <!-- Right: Copy + CTAs -->
    <div class="lg:col-span-5">
      <p class="sm:text-base text-sm text-neutral-300 max-w-[42ch] animate-fadeInRight animation-delay-400">Our team
        blends strategy, design, and technology to craft memorable digital experiences that drive results.</p>
      <div class="flex gap-6 animate-fadeInUp animation-delay-500 mt-5 items-center">
        <a href="#work"
          style="align-items: center; background-image: linear-gradient(144deg, rgb(175, 64, 255), rgb(91, 66, 243) 50%, rgb(0, 221, 235)); border: 0px; border-radius: 8px; box-shadow: rgba(151, 65, 252, 0.2) 0px 15px 30px -5px; box-sizing: border-box; color: rgb(255, 255, 255); display: inline-flex; font-size: 14px; justify-content: center; line-height: 1em; max-width: 100%; min-width: auto; padding: 3px; text-decoration: none; user-select: none; touch-action: manipulation; white-space: nowrap; cursor: pointer; height: 50px; margin-top: 1rem; transform: scale(0.9); width: auto;"
          onmouseover="this.querySelector('span').style.background='none'"
          onmouseout="this.querySelector('span').style.backgroundColor='rgb(5, 6, 45)'"
          onmousedown="this.style.transform='scale(0.9)'" onmouseup="this.style.transform='scale(1)'" class="">
          <span style="background: none rgb(5, 6, 45); padding: 16px 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 0.5rem;" class="">Book a call</span>
        </a>
        <a href="#pricing"
          style="align-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; box-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px inset; box-sizing: border-box; color: rgb(255, 255, 255); display: inline-flex; font-size: 14px; justify-content: center; line-height: 1em; max-width: 100%; min-width: auto; padding: 3px; text-decoration: none; user-select: none; touch-action: manipulation; white-space: nowrap; cursor: pointer; height: 50px; margin-top: 1rem; transform: scale(1); width: auto;"
          onmouseover="this.style.backgroundColor='rgba(255, 255, 255, 0.1)'"
          onmouseout="this.style.backgroundColor='rgba(255, 255, 255, 0.05)'"
          onmousedown="this.style.transform='scale(0.9)'" onmouseup="this.style.transform='scale(1)'" class="">
          <span style="padding: 16px 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 0.5rem;" class="">
      View pricing
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" style="width: 16px; height: 16px;"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
    </span>
        </a>
      </div>
    </div>
  </div>
</section>