Contact Section with CTA & Social Icons

<div class="sm:px-6 md:px-10 relative max-w-7xl mr-auto ml-auto pt-16 pr-4 pb-16 pl-4">
  <!-- 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">
    <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" 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">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">
    <a href="#contact"
      class="inline-flex items-center gap-2 h-12 px-6 rounded-full bg-white/5 hover:bg-white/10 ring-1 ring-white/10 text-white text-sm font-medium tracking-tight transition shadow-[inset_0_-2px_0_rgba(255,255,255,0.15)] font-sans">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
        data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4" style="stroke-width:1.5">
        <path d="M7 7h10v10" class=""></path>
        <path d="M7 17 17 7" class=""></path>
      </svg>
      Contact Me
    </a>
  </div>

  <!-- Socials -->
  <div class="mt-8 flex items-center justify-center gap-6 text-neutral-400">
    <a href="#" aria-label="X (Twitter)" class="p-2 rounded hover:bg-white/5 hover:text-white transition">
      <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">
      <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">
      <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">
    <a href="mailto:hello@brind.studio"
      class="text-sm text-neutral-300 underline underline-offset-4 hover:text-white font-sans">hello@brind.studio</a>
  </p>

  <!-- Bottom bar -->
  <div class="mt-12 h-px bg-white/5"></div>
  <div class="mt-6 flex items-center justify-between text-xs text-neutral-500">
    <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>