Gradient Pricing Card with Features & CTA

<div class="relative overflow-hidden ring-1 ring-white/20 transition-all duration-300 ease-out hover:-translate-y-0.5 hover:ring-cyan-400/40 hover:shadow-[0_10px_40px_-10px_rgba(34,211,238,0.35)] rounded-2xl shadow-inner" style="
          background-color: hsl(222, 47%, 11%);
          background-image:
            radial-gradient(at 88% 40%, hsl(222, 47%, 11%) 0px, transparent 85%),
            radial-gradient(at 49% 30%, hsl(222, 47%, 11%) 0px, transparent 85%),
            radial-gradient(at 14% 26%, hsl(222, 47%, 11%) 0px, transparent 85%),
            radial-gradient(at 0% 64%, hsl(188, 95%, 55%) 0px, transparent 85%),
            radial-gradient(at 41% 94%, hsl(205, 92%, 62%) 0px, transparent 85%),
            radial-gradient(at 100% 99%, hsl(195, 100%, 55%) 0px, transparent 85%);
        ">
        <div class="relative pt-6 pr-6 pb-6 pl-6">
          <!-- Header -->
          <div class="flex flex-col gap-2 mb-6">
            <div class="flex items-center justify-between">
              <span class="text-lg font-semibold tracking-tight text-white">Growth Pro</span>
              <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-cyan-500/20 to-blue-500/20 text-cyan-300 ring-1 ring-cyan-400/30">
                Popular
              </span>
            </div>
            <p class="text-sm leading-relaxed text-slate-400 pr-2">
              Perfect for businesses ready to scale their content marketing and drive explosive growth.
            </p>
          </div>

          <!-- Pricing -->
          <div class="flex items-end gap-2 mb-6">
            <span class="text-3xl font-semibold tracking-tight text-white">$2,499</span>
            <span class="text-sm text-slate-400 mb-1">/month</span>
          </div>

          <!-- Divider -->
          

          <!-- Features -->
          <ul class="flex flex-col gap-3 mb-8">
            <li class="flex items-center gap-3">
              <span class="grid place-items-center w-5 h-5 rounded-full bg-white/10 backdrop-blur-sm shadow-sm ring-1 ring-white/20 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5" class="text-white"></path>
                </svg>
              </span>
              <span class="text-sm text-slate-100">10 Launch Week Campaigns</span>
            </li>

            <li class="flex items-center gap-3">
              <span class="grid place-items-center w-5 h-5 rounded-full bg-white/10 backdrop-blur-sm shadow-sm ring-1 ring-white/20 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5" class="text-white"></path>
                </svg>
              </span>
              <span class="text-sm text-slate-100">10 Premium Influencer Posts</span>
            </li>

            <li class="flex items-center gap-3">
              <span class="grid place-items-center w-5 h-5 rounded-full bg-white/10 backdrop-blur-sm shadow-sm ring-1 ring-white/20 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5" class="text-white"></path>
                </svg>
              </span>
              <span class="text-sm text-slate-100">100,000+ Guaranteed Views</span>
            </li>

            <li class="flex items-center gap-3">
              <span class="grid place-items-center w-5 h-5 rounded-full bg-white/10 backdrop-blur-sm shadow-sm ring-1 ring-white/20 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5" class="text-white"></path>
                </svg>
              </span>
              <span class="text-sm text-slate-100">10 Strategic Reddit Posts</span>
            </li>

            <li class="flex items-center gap-3">
              <span class="grid place-items-center w-5 h-5 rounded-full bg-white/10 backdrop-blur-sm shadow-sm ring-1 ring-white/20 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5" class="text-white"></path>
                </svg>
              </span>
              <span class="text-sm text-slate-100">Weekly Strategy Consultations</span>
            </li>

            <li class="flex items-center gap-3">
              <span class="grid place-items-center w-5 h-5 rounded-full bg-white/10 backdrop-blur-sm shadow-sm ring-1 ring-white/20 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5" class="text-white"></path>
                </svg>
              </span>
              <span class="text-sm text-slate-100">Priority Support &amp; Analytics</span>
            </li>
          </ul>

          <!-- CTA Button -->
          <button class="w-full inline-flex items-center justify-center rounded-lg px-4 py-3 text-sm font-medium text-white bg-gradient-to-r from-sky-500 to-cyan-400 shadow-[inset_0_-2px_25px_-4px_rgba(255,255,255,0.35)] ring-1 ring-white/10 hover:ring-cyan-300/50 hover:from-sky-400 hover:to-cyan-300 hover:shadow-lg transition-all duration-300 focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-400/60">
            Start Growing Today
          </button>

          <!-- Footer note -->
          <p class="text-xs text-white/90 bg-white/10 backdrop-blur-sm text-center mt-4 px-3 py-2 rounded-lg ring-1 ring-white/20">
            14-day money-back guarantee
          </p>
        </div>
      </div>