Animated Contact Section with CTA & Social Links

<div class="relative z-10 sm:p-8 animate-scaleIn animation-delay-600 w-full max-w-7xl border-white/10 border rounded-3xl mt-24 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 backdrop-blur">
  <!-- Soft radial glow -->
  <div aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden">
    <div class="absolute left-0 bottom-0 w-[60%] h-[80%] rounded-[40%] bg-gradient-to-tr from-white/5 to-transparent blur-3xl">
    </div>
  </div>

  <!-- Eyebrow -->
  <div class="flex items-center justify-center gap-4 text-neutral-400 text-sm animate-fadeInUp animation-delay-100">
    <span class="h-px w-12 bg-white/10"></span>
    <span class="italic font-sans">Reach out anytime</span>
    <span class="h-px w-12 bg-white/10"></span>
  </div>

  <!-- Heading -->
  <h2 class="mt-4 text-4xl sm:text-6xl text-white text-center font-sans font-light tracking-tighter animate-fadeInUp animation-delay-200" style="">
    Let's Stay <span class="text-white/90 font-sans font-light tracking-tighter" style="">Connected</span>
  </h2>

  <!-- Copy -->
  <p class="mt-4 text-sm sm:text-base text-neutral-400 max-w-xl mx-auto text-center font-sans animate-fadeInUp animation-delay-300">Got questions or want to
    collaborate? Feel free to reach out—We're open to new projects or just a casual chat!</p>

  <!-- CTA -->
  <div class="mt-6 flex justify-center animate-fadeInUp animation-delay-400">
    <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(1); 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="">Contact me</span>
  </a>
  
</div>
  </div>

  <!-- Socials -->
  <div class="mt-8 flex items-center justify-center gap-6 text-neutral-400 animate-fadeInUp animation-delay-500">
    <a href="#" aria-label="X (Twitter)" class="p-2 rounded hover:bg-white/5 hover:text-white transition hover:scale-110 duration-200">
      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="twitter" class="lucide lucide-twitter w-5 h-5"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" class=""></path></svg>
    </a>
    <span class="h-6 w-px bg-white/10"></span>
    <a href="#" aria-label="Instagram" class="p-2 rounded hover:bg-white/5 hover:text-white transition hover:scale-110 duration-200">
      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="instagram" class="lucide lucide-instagram w-5 h-5"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line></svg>
    </a>
    <span class="h-6 w-px bg-white/10"></span>
    <a href="#" aria-label="Facebook" class="p-2 rounded hover:bg-white/5 hover:text-white transition hover:scale-110 duration-200">
      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="facebook" class="lucide lucide-facebook w-5 h-5"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" class=""></path></svg>
    </a>
  </div>

  <!-- Email -->
  <p class="mt-6 text-center animate-fadeInUp animation-delay-600">
    <a href="mailto:hello@brind.studio" class="text-sm text-neutral-300 underline underline-offset-4 hover:text-white font-sans hover:scale-105 inline-block transition-all duration-200">hello@brind.studio</a>
  </p>

  <!-- Bottom bar -->
  <div class="mt-12 h-px bg-white/5 animate-fadeIn animation-delay-600"></div>
  <div class="mt-6 flex items-center justify-between text-xs text-neutral-500 animate-fadeInUp animation-delay-600">
    <p class="font-sans">© <span id="year" class="font-sans">2025</span> BRIND</p>
    <div class="hidden sm:block text-neutral-500"></div>
  </div>
</div>