Responsive Contact Footer with CTA Links

<footer id="contact" class="max-w-7xl sm:px-6 sm:mt-24 mt-16 mr-auto mb-10 ml-auto pr-4 pl-4">
      <div class="rounded-2xl p-6 sm:p-8 ring-1 ring-white/10 bg-white/5">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
          <div>
            <p class="text-sm text-neutral-400">Open for new collaborations</p>
            <h3 class="mt-1 text-xl sm:text-2xl tracking-tight font-semibold text-white">Let’s build something considered.</h3>
          </div>
          <div class="flex items-center gap-3">
            <a href="mailto:hello@kyro.studio" class="inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium tracking-tight text-white bg-white/10 hover:bg-white/20">
              <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="mail" class="lucide lucide-mail w-4 h-4"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect></svg>
              <span>hello@kyro.studio</span>
            </a>
            <a href="#" class="inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium tracking-tight text-white bg-emerald-500/90 hover:bg-emerald-500">
              <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="message-square" class="lucide lucide-message-square w-4 h-4"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" class=""></path></svg>
              <span>Message</span>
            </a>
          </div>
        </div>
      </div>
      <p class="mt-6 text-xs text-neutral-500">© <span id="year">2025</span> Kyro Studio</p>
    </footer>