CTA Ticker Sale

<style>
  @keyframes ws-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .ws-ticker-track { animation: none !important; }
  }
</style>

<section class="ws-cta relative overflow-hidden bg-[var(--ws-cta-bg)] py-20 text-white">

  <!-- Ticker background text -->
  <div class="pointer-events-none absolute inset-0 flex items-center overflow-hidden">
    <div
      class="ws-ticker-track flex whitespace-nowrap text-7xl font-black uppercase tracking-tighter text-white opacity-[0.07]"
      style="animation: ws-ticker 18s linear infinite;"
      aria-hidden="true"
    >
      <!-- Duplicated to create seamless loop -->
      <span class="pr-16">SALE &middot; 40% OFF &middot; LIMITED TIME &middot; SALE &middot; 40% OFF &middot; LIMITED TIME &middot; SALE &middot; 40% OFF &middot; LIMITED TIME &middot;&nbsp;</span>
      <span class="pr-16">SALE &middot; 40% OFF &middot; LIMITED TIME &middot; SALE &middot; 40% OFF &middot; LIMITED TIME &middot; SALE &middot; 40% OFF &middot; LIMITED TIME &middot;&nbsp;</span>
    </div>
  </div>

  <!-- Foreground content -->
  <div class="relative z-10 mx-auto max-w-3xl px-6 text-center">
    <p class="mb-4 inline-flex rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-white/80">
      Flash Sale — Ends Sunday
    </p>
    <h2 class="text-balance text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
      40% off everything.
    </h2>
    <p class="mt-4 text-lg text-slate-300">
      Our biggest sale of the year. All plans, all features — no code needed.
    </p>
    <div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
      <a href="#" class="inline-flex rounded-xl bg-white px-7 py-3.5 text-sm font-bold text-slate-900 transition hover:bg-slate-100"> <!-- ws-ok -->
        Claim your discount
      </a>
      <a href="#" class="inline-flex rounded-xl border border-white/25 bg-white/5 px-7 py-3.5 text-sm font-semibold text-white transition hover:bg-white/10">
        View all plans
      </a>
    </div>
    <p class="mt-5 text-xs text-slate-500">Offer valid until 2026-03-31. No code required at checkout.</p>
  </div>

</section>