Glassmorphic Feature List Card

<div class="relative">
          <div class="absolute -inset-1 rounded-3xl bg-gradient-to-br from-white/10 to-white/0 blur-xl"></div>
          <div class="relative sm:p-8 bg-white/5 border-white/10 border rounded-3xl pt-6 pr-6 pb-6 pl-6 shadow-2xl backdrop-blur-xl">
            <div class="sm:p-4 bg-gradient-to-b from-slate-900/30 to-slate-900/10 border-white/10 border rounded-2xl pt-2 pr-2 pb-2 pl-2">
              <!-- Row 1 -->
              <div class="flex items-center gap-5 sm:gap-7 p-4 sm:p-6">
                <div class="relative">
                  <div class="h-14 w-14 rounded-full bg-white/5 ring-1 ring-white/15 backdrop-blur-md grid place-items-center shadow-[inset_0_1px_0_rgba(255,255,255,0.15),0_10px_30px_-10px_rgba(99,102,241,0.5)]">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up h-6 w-6 text-white/90"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
                  </div>
                </div>
                <div class="">
                  <div class="text-2xl font-semibold tracking-tight leading-none">Smarter</div>
                  <div class="text-2xl text-white/80 leading-tight">Pricing</div>
                </div>
              </div>
              <div class="h-px bg-gradient-to-r from-transparent via-white/10 to-transparent mx-4"></div>
              <!-- Row 2 -->
              <div class="flex items-center gap-5 sm:gap-7 p-4 sm:p-6">
                <div class="h-14 w-14 rounded-full bg-white/5 ring-1 ring-white/15 backdrop-blur-md grid place-items-center shadow-[inset_0_1px_0_rgba(255,255,255,0.15),0_10px_30px_-10px_rgba(147,51,234,0.45)]">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles h-6 w-6 text-white/90"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>
                </div>
                <div>
                  <div class="text-2xl font-semibold tracking-tight leading-none">Seamless</div>
                  <div class="text-2xl text-white/80 leading-tight">Experience</div>
                </div>
              </div>
              <div class="h-px bg-gradient-to-r from-transparent via-white/10 to-transparent mx-4"></div>
              <!-- Row 3 -->
              <div class="flex items-center gap-5 sm:gap-7 p-4 sm:p-6">
                <div class="h-14 w-14 rounded-full bg-white/5 ring-1 ring-white/15 backdrop-blur-md grid place-items-center shadow-[inset_0_1px_0_rgba(255,255,255,0.15),0_10px_30px_-10px_rgba(34,197,94,0.35)]">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="lock" class="lucide lucide-lock h-6 w-6 text-white/90"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                </div>
                <div>
                  <div class="text-2xl font-semibold tracking-tight leading-none">Trusted</div>
                  <div class="text-2xl text-white/80 leading-tight">Protection</div>
                </div>
              </div>
              <div class="h-px bg-gradient-to-r from-transparent via-white/10 to-transparent mx-4"></div>
              <!-- Row 4 -->
              <div class="flex items-center gap-5 sm:gap-7 p-4 sm:p-6">
                <div class="h-14 w-14 rounded-full bg-white/5 ring-1 ring-white/15 backdrop-blur-md grid place-items-center shadow-[inset_0_1px_0_rgba(255,255,255,0.15),0_10px_30px_-10px_rgba(59,130,246,0.4)]">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield-check" class="lucide lucide-shield-check h-6 w-6 text-white/90"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>
                </div>
                <div>
                  <div class="text-2xl font-semibold tracking-tight leading-none">Enterprise</div>
                  <div class="text-2xl text-white/80 leading-tight">Security</div>
                </div>
              </div>
            </div>
            <div class="mt-5 flex items-center justify-between text-xs text-white/60 px-1">
              <span class="">PCI-DSS • ISO 27001</span>
              <span>99.99% uptime</span>
            </div>
          </div>
        </div>