Dark CTA Footer Section with Ambient Glow

<section class="relative w-full bg-[#050505] pt-32 pb-12 overflow-hidden text-[#F2F0EB]">
  <!-- Ambient Glow Effects -->
  <div
    class="absolute top-0 left-1/2 -translate-x-1/2 w-[500px] h-[300px] bg-stone-800/20 blur-[100px] rounded-full pointer-events-none select-none"
    style="filter: blur(100px);"></div>
  <div
    class="absolute bottom-0 left-0 w-[600px] h-[400px] bg-gradient-to-tr from-stone-800/30 via-stone-900/10 to-transparent blur-[120px] rounded-full pointer-events-none select-none"
    style="filter: blur(120px);"></div>

  <div class="relative z-10 mx-auto max-w-7xl px-6 md:px-12">
    <!-- CTA Section -->
    <div class="mb-32 flex flex-col items-center text-center reveal-item">
      <!-- Floating Icon -->
      <div class="mb-10 relative group">
        <div
          class="absolute -inset-0.5 rounded-2xl bg-gradient-to-b from-stone-700 to-stone-900 opacity-40 blur transition duration-500 group-hover:opacity-100"
          style="filter: blur(8px);"></div>
        <div
          class="relative flex h-16 w-16 items-center justify-center rounded-2xl border border-stone-800 bg-[#0A0A0A] shadow-2xl">
          <iconify-icon icon="solar:programming-linear" class="text-3xl text-white"></iconify-icon>
        </div>
      </div>

      <!-- Headline -->
      <h2 class="mb-6 max-w-3xl font-dm-sans text-5xl font-light tracking-tighter text-white md:text-6xl">
        Start Integrating Today.
      </h2>
      <p class="mb-10 max-w-lg font-sans text-lg text-stone-400 font-light leading-relaxed">
        Empower your infrastructure with the intelligence it deserves. Join the vanguard of algorithmic excellence.
      </p>

      <!-- Action Buttons -->
      <div class="flex flex-col items-center gap-4 sm:flex-row">
        <a href="#"
          class="group relative flex items-center gap-2 rounded-full bg-[#F2F0EB] px-8 py-4 text-sm font-medium text-stone-950 transition-all hover:bg-white hover:scale-105">
          <span>Initiate Deployment</span>
          <iconify-icon icon="solar:arrow-right-linear"
            class="transition-transform group-hover:translate-x-1"></iconify-icon>
        </a>
        <a href="#"
          class="group flex items-center gap-2 rounded-full border border-stone-800 bg-stone-900/30 px-8 py-4 text-sm font-medium text-stone-300 backdrop-blur-sm transition-colors hover:border-stone-700 hover:bg-stone-800 hover:text-white">
          <span>Technical Specifications</span>
        </a>
      </div>
    </div>

    <!-- Footer Bottom -->
    <div class="border-t border-stone-800/60 pt-16 reveal-item delay-200">
      <div class="grid grid-cols-1 gap-16 lg:grid-cols-12">

        <!-- Brand Column -->
        <div class="flex flex-col justify-between lg:col-span-5">
          <div class="space-y-6">
            <div class="flex items-center gap-2">
              <iconify-icon icon="solar:tornado-small-outline" class="text-3xl"
                style="color: rgb(242, 240, 235)"></iconify-icon>
              <span class="font-dm-sans text-2xl font-light tracking-tighter text-white">Etheria</span>
            </div>
            <p class="max-w-xs font-sans text-sm font-normal leading-relaxed text-stone-500">
              The ultimate architect of intelligence. Curating a future where data and strategy exist in perfect
              harmony.
            </p>
          </div>

          <!-- Social Icons -->
          <div class="mt-8 flex gap-5 md:mt-12">
            <a href="#"
              class="group rounded-full bg-stone-900/50 p-2.5 text-stone-400 transition-all hover:bg-stone-800 hover:text-white border border-stone-800/50">
              <iconify-icon icon="ri:twitter-x-fill" width="18"></iconify-icon>
            </a>
            <a href="#"
              class="group rounded-full bg-stone-900/50 p-2.5 text-stone-400 transition-all hover:bg-stone-800 hover:text-white border border-stone-800/50">
              <iconify-icon icon="ri:linkedin-fill" width="18"></iconify-icon>
            </a>
            <a href="#"
              class="group rounded-full bg-stone-900/50 p-2.5 text-stone-400 transition-all hover:bg-stone-800 hover:text-white border border-stone-800/50">
              <iconify-icon icon="ri:github-fill" width="18"></iconify-icon>
            </a>
          </div>
        </div>

        <!-- Spacer -->
        <div class="hidden lg:col-span-1 lg:block"></div>

        <!-- Links Columns -->
        <div class="col-span-1 grid grid-cols-2 gap-10 sm:grid-cols-3 lg:col-span-6 lg:gap-12">
          <div>
            <h3 class="mb-6 font-sans text-xs font-semibold uppercase tracking-widest text-white/40">Expertise</h3>
            <ul class="space-y-4 font-sans text-sm text-stone-500">
              <li><a href="#" class="transition-colors hover:text-stone-300">Neural Labs</a></li>
              <li><a href="#" class="transition-colors hover:text-stone-300">Strategy</a></li>
              <li><a href="#" class="transition-colors hover:text-stone-300">Case Studies</a></li>
              <li><a href="#" class="transition-colors hover:text-stone-300">Infrastructure</a></li>
            </ul>
          </div>
          <div>
            <h3 class="mb-6 font-sans text-xs font-semibold uppercase tracking-widest text-white/40">Resources</h3>
            <ul class="space-y-4 font-sans text-sm text-stone-500">
              <li><a href="#" class="transition-colors hover:text-stone-300">Documentation</a></li>
              <li><a href="#" class="transition-colors hover:text-stone-300">Research</a></li>
              <li><a href="#" class="transition-colors hover:text-stone-300">API Status</a></li>
              <li><a href="#" class="transition-colors hover:text-stone-300">Changelog</a></li>
            </ul>
          </div>
          <div class="col-span-2 sm:col-span-1">
            <h3 class="mb-6 font-sans text-xs font-semibold uppercase tracking-widest text-white/40">Legal</h3>
            <ul class="space-y-4 font-sans text-sm text-stone-500">
              <li><a href="#" class="transition-colors hover:text-stone-300">Privacy</a></li>
              <li><a href="#" class="transition-colors hover:text-stone-300">Terms</a></li>
              <li><a href="#" class="transition-colors hover:text-stone-300">Security</a></li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Copyright Line -->
      <div
        class="mt-24 flex flex-col justify-between gap-6 border-t border-stone-800/40 pt-8 sm:flex-row sm:items-center">
        <p class="font-sans text-[10px] uppercase tracking-[0.2em] text-stone-600">
          © 2026 Etheria Intelligence Systems. All rights reserved.
        </p>
        <div class="flex items-center gap-6">
          <span class="flex items-center gap-2 font-sans text-[10px] uppercase tracking-[0.2em] text-stone-600">
                        <span class="block h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
          System Operational
          </span>
          <span class="font-sans text-[10px] uppercase tracking-[0.2em] text-stone-600">
                        San Francisco / Tokyo
                    </span>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <script>
    (function() {
            const observerOptions = {
                root: null,
                threshold: 0.1
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('reveal-active');
                    }
                });
            }, observerOptions);

            document.querySelectorAll('.reveal-item').forEach(el => observer.observe(el));
        })();
  </script>
</section>