Social Footer with Newsletter and Link Columns

<section class="flex flex-col lg:px-8 lg:pt-20 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll max-w-6xl mr-auto ml-auto pt-20 pr-4 pl-4">
        <div class="sm:px-10 sm:py-10 lg:py-12 bg-gradient-to-br from-blue-500/10 via-blue-500/0 to-blue-500/10 w-full rounded-none pt-8 pr-4 pb-8 pl-4" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 0">
          <!-- FOOTER START -->
          <footer class="text-[11px] uppercase font-medium text-sky-300 tracking-[0.2em] w-full">
            <div class="flex flex-col items-center">
              <!-- Social rail -->
              <div class="grid grid-cols-1 overflow-hidden sm:grid-cols-2 lg:grid-cols-4 bg-slate-950/80 w-full border-slate-800/80 border rounded-sm mt-2">
                <!-- YouTube -->
                <a href="#" class="flex items-center justify-between sm:border-b-0 sm:border-r lg:border-b-0 hover:bg-slate-900/60 transition-colors border-slate-800/80 border-b pt-4 pr-5 pb-4 pl-5">
                  <div class="flex items-center gap-3">
                    <span class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-white/15">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M21.8 8.001a2.503 2.503 0 0 0-1.76-1.77C18.41 5.75 12 5.75 12 5.75s-6.41 0-8.04.48a2.503 2.503 0 0 0-1.76 1.77C1.71 9.64 1.71 12 1.71 12s0 2.36.49 3.999c.24.9.95 1.6 1.86 1.85 1.63.48 7.94.48 7.94.48s6.41 0 8.04-.48a2.503 2.503 0 0 0 1.76-1.77C22.29 14.36 22.29 12 22.29 12s0-2.36-.49-3.999Z" class=""></path>
                        <path d="M10 15.15 15 12 10 8.85v6.3Z" class="text-slate-950"></path>
                      </svg>
                    </span>
                    <span class="text-sm font-medium tracking-tight text-slate-50" style="font-family: Inter, system-ui;">
                      YouTube
                    </span>
                  </div>
                  <span class="text-slate-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M5 12h14" class=""></path>
                      <path d="m12 5 7 7-7 7" class=""></path>
                    </svg>
                  </span>
                </a>

                <!-- X / Twitter -->
                <a href="#" class="flex items-center justify-between px-5 py-4 border-b border-slate-800/80 sm:border-b-0 lg:border-r hover:bg-slate-900/60 transition-colors">
                  <div class="flex items-center gap-3">
                    <span class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-white/15">
                      <span class="text-[11px] font-medium text-slate-50">
                        X
                      </span>
                    </span>
                    <span class="text-sm font-medium tracking-tight text-slate-50" style="font-family: Inter, system-ui;">
                      Twitter
                    </span>
                  </div>
                  <span class="text-slate-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M5 12h14" class=""></path>
                      <path d="m12 5 7 7-7 7" class=""></path>
                    </svg>
                  </span>
                </a>

                <!-- Instagram -->
                <a href="#" class="flex items-center justify-between px-5 py-4 border-b border-slate-800/80 sm:border-b-0 sm:border-r hover:bg-slate-900/60 transition-colors">
                  <div class="flex items-center gap-3">
                    <span class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-white/15">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="18" height="18" rx="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" y1="6.5" x2="17.51" y2="6.5" class=""></line>
                      </svg>
                    </span>
                    <span class="text-sm font-medium tracking-tight text-slate-50" style="font-family: Inter, system-ui;">
                      Instagram
                    </span>
                  </div>
                  <span class="text-slate-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M5 12h14" class=""></path>
                      <path d="m12 5 7 7-7 7" class=""></path>
                    </svg>
                  </span>
                </a>

                <!-- LinkedIn -->
                <a href="#" class="flex items-center justify-between sm:border-t-0 hover:bg-slate-900/60 transition-colors border-slate-800/80 border-t pt-4 pr-5 pb-4 pl-5">
                  <div class="flex items-center gap-3">
                    <span class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-white/15">
                      <span class="text-[10px] font-medium tracking-[0.16em] uppercase text-slate-50">
                        in
                      </span>
                    </span>
                    <span class="text-sm font-medium tracking-tight text-slate-50" style="font-family: Inter, system-ui;">
                      LinkedIn
                    </span>
                  </div>
                  <span class="text-slate-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M5 12h14" class=""></path>
                      <path d="m12 5 7 7-7 7" class=""></path>
                    </svg>
                  </span>
                </a>
              </div>

              <!-- Main footer grid -->
              <div class="mt-10 grid gap-6 sm:gap-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] w-full">
                <!-- Brand + text -->
                <div class="flex flex-col justify-between gap-6">
                  <div class="">
                    <a href="#" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[80px] h-[40px] bg-[url(https://cdn.midjourney.com/4fdcbe53-a079-41fc-a33d-b0cd4c903386/0_2.png?w=800&amp;q=80)] bg-cover rounded"></a>

                    <p class="mt-5 max-w-sm text-sm text-slate-300" style="font-family: Inter, system-ui;">
                      In the new era of expansion, Mira helps revenue teams look
                      ahead with certainty—connecting every client signal to the
                      next best move.
                    </p>
                  </div>

                  <!-- Newsletter -->
                  <form class="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center">
                    <div class="flex-1">
                      <label for="mira-footer-email" class="sr-only">
                        Email
                      </label>
                      <div class="rounded-md bg-slate-950 border border-white/10 flex items-center px-3 py-2">
                        <input id="mira-footer-email" type="email" placeholder="name@email.com" class="w-full bg-transparent text-[13px] text-slate-100 placeholder:text-slate-500 focus:outline-none" style="font-family: Inter, system-ui;">
                      </div>
                    </div>
                    <button type="submit" class="inline-flex items-center justify-center rounded-md border border-white/10 bg-slate-900 px-4 py-2 text-[11px] font-medium tracking-tight text-slate-50 hover:bg-slate-50 hover:text-slate-900 transition-colors" style="font-family: Inter, system-ui;">
                      SUBSCRIBE
                    </button>
                  </form>
                </div>

                <!-- Link columns -->
                <div class="grid gap-8 text-sm text-slate-200 sm:grid-cols-3" style="font-family: Inter, system-ui;">
                  <div>
                    <p class="text-[11px] font-medium uppercase tracking-[0.18em] text-slate-400">
                      Product
                    </p>
                    <ul class="mt-3 space-y-2 text-[13px]">
                      <li>
                        <a href="#" class="hover:text-slate-50">Overview</a>
                      </li>
                      <li>
                        <a href="#" class="hover:text-slate-50">Playbooks</a>
                      </li>
                    </ul>
                  </div>

                  <div>
                    <p class="text-[11px] font-medium uppercase tracking-[0.18em] text-slate-400">
                      Resources
                    </p>
                    <ul class="mt-3 space-y-2 text-[13px]">
                      <li><a href="#" class="hover:text-slate-50">Docs</a></li>
                      <li>
                        <a href="#" class="hover:text-slate-50">
                          API Reference
                        </a>
                      </li>
                    </ul>
                  </div>

                  <div class="">
                    <p class="text-[11px] font-medium uppercase tracking-[0.18em] text-slate-400">
                      Company
                    </p>
                    <ul class="mt-3 space-y-2 text-[13px]">
                      <li><a href="#" class="hover:text-slate-50">About</a></li>
                      <li>
                        <a href="#" class="hover:text-slate-50">Careers</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>

              <!-- Bottom legal -->
              <div class="mt-10 border-t border-slate-900 pt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between text-[11px] text-slate-500 w-full" style="font-family: Inter, system-ui;">
                <p>
                  ©
                  <span id="year">2025</span>
                  Mira Technologies Inc. All rights reserved.
                </p>
                <div class="flex flex-wrap items-center gap-4">
                  <a href="#" class="hover:text-slate-300">Imprint</a>
                  <a href="#" class="hover:text-slate-300">Privacy</a>
                  <a href="#" class="hover:text-slate-300">Cookies</a>
                  <a href="#" class="hover:text-slate-300">Accessibility</a>
                  <a href="#" class="hover:text-slate-300">Terms</a>
                </div>
              </div>
            </div>
          </footer>
          <!-- FOOTER END -->
        </div>
      </section>