Cta Business Dark

                <!--
@type: Call To Action (CTA)
@industry: Business
@style: Dark
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->

<style>
  @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;500;800&display=swap');
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #e5e5e5;
    background-color: #0a0a0a;
    background-image:
      radial-gradient(at 0% 0%, hsla(84, 81%, 44%, 0.15) 0px, transparent 50%),
      radial-gradient(at 100% 0%, hsla(152, 77%, 37%, 0.15) 0px, transparent 50%),
      radial-gradient(at 50% 100%, hsla(0, 0%, 5%, 1) 0px, transparent 80%);
  }
  body:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: contrast(150%) brightness(1000%);
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.02;
  }
  .bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, 60px);
    gap: 1.5rem;
  }
  @media (max-width: 1024px) {
    .bento-grid {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 60px);
    }
  }
  @media (max-width: 768px) {
    .bento-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 60px);
    }
  }
  .text-glow {
    text-shadow: 0 0 30px rgba(163, 230, 53, 0.3);
  }
  .glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
  }
  @keyframes marquee {
  0% {transform: translateX(0);}
  100% {transform: translateX(-50%);}
  }
</style>

<section class="relative z-10 max-w-[1200px] mx-auto px-10 py-20">
  <div class="relative glass-card rounded-[4rem] overflow-hidden p-1 border-white/5">
    <div
      class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/4 w-96 h-96 bg-lime-500/20 blur-[120px] rounded-full">
    </div>
    <div
      class="absolute bottom-0 left-0 translate-y-1/2 -translate-x-1/4 w-96 h-96 bg-green-600/20 blur-[120px] rounded-full">
    </div>

    <div class="relative bg-neutral-950/80 rounded-[3.8rem] px-6 md:px-8 py-16 md:py-20 flex flex-col items-center text-center">

      <div class="max-w-3xl space-y-8">
        <div class="inline-block relative">
          <div class="relative px-4 py-1.5 glass-card rounded-md border-lime-500/30">
            <span class="text-[10px] font-black uppercase tracking-[0.3em] text-lime-400">Next Chapter</span>
          </div>
        </div>

        <h2 class="text-4xl md:text-7xl font-extrabold text-white tracking-tighter leading-tight">
          Ready to rewrite your <br />
          <span class="bg-clip-text text-transparent bg-gradient-to-r from-lime-400 via-green-400 to-emerald-500">
            growth narrative?
          </span>
        </h2>

        <p class="text-lg md:text-xl text-neutral-400 font-light leading-relaxed">
          Stop chasing metrics. Start building an <span class="text-white font-medium">unstoppable legacy</span>. Our
          systems don't just optimize, they evolve. Join the exclusive circle of industries redefining the 2026 digital
          landscape.
        </p>

        <div class="flex flex-col sm:flex-row items-center justify-center gap-6">
          <button
            class="group relative px-12 py-6 bg-gradient-to-r from-lime-400 to-green-500 text-black font-black rounded-2xl transition-all hover:scale-105 hover:shadow-[0_0_40px_rgba(163,230,53,0.4)] overflow-hidden">
            <span class="relative z-10 flex items-center gap-2">
              CLAIM YOUR DOMAIN
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                class="transition-transform group-hover:translate-x-1">
                <path d="M5 12h14" />
                <path d="m12 5 7 7-7 7" />
              </svg>
            </span>
          </button>

          <button
            class="px-10 py-6 text-white font-bold rounded-2xl border border-white/10 hover:bg-white/5 transition-colors">
            VIEW CASE STUDIES
          </button>
        </div>

        <div class="flex flex-col items-center gap-4">
          <p class="text-[10px] uppercase tracking-[0.4em] text-neutral-500 font-bold">Trusted by</p>
          <div
            class="flex flex-wrap justify-center gap-4 opacity-30 hover:opacity-100 transition-opacity duration-700 grayscale hover:grayscale-0">
            <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="Customer" class="w-10 h-10 rounded-full border-2 border-white object-cover">
            <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp" alt="Customer" class="w-10 h-10 rounded-full border-2 border-white object-cover">
            <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" alt="Customer" class="w-10 h-10 rounded-full border-2 border-white object-cover">
            <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-4.webp" alt="Customer" class="w-10 h-10 rounded-full border-2 border-white object-cover">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>