Premium Pricing Card with Animated Border

<div class="w-full max-w-[24rem] flex items-center justify-center">
  <div class="group relative w-full">
    <!-- Rotating blur background with proper masking -->
    <div class="absolute inset-0 rounded-2xl overflow-hidden">
      <div
        class="pointer-events-none absolute -inset-10 rounded-full bg-gradient-to-r from-transparent via-cyan-400/30 to-transparent blur-xl opacity-60 animate-spin [animation-duration:8s]">
      </div>
      <div
        class="pointer-events-none absolute -inset-20 rounded-full bg-gradient-to-r from-transparent via-sky-500/20 to-transparent blur-2xl opacity-40 animate-spin [animation-duration:16s] [animation-direction:reverse]">
      </div>
    </div>

    <!-- Border gradient -->
    <div
      class="absolute inset-0 rounded-2xl p-px bg-gradient-to-b from-cyan-300/50 via-slate-600/80 to-blue-900/60 transition-opacity duration-300 group-hover:opacity-100">
    </div>

    <!-- Card -->
    <div
      class="relative rounded-2xl overflow-hidden shadow-inner 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)]"
      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 p-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 -->
        <hr class="mb-6 border-t border-white/10" />

        <!-- 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 & 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>
  </div>
</div>