Security Certification Info Card with Radar Visual

<div class="relative">
            <div class="ring-1 ring-white/10 bg-neutral-900/60 rounded-3xl backdrop-blur max-w-xl">
              <div class="relative overflow-hidden rounded-t-3xl">
                <div class="h-56 sm:h-64">
                  <!-- Radar-style visual -->
                  <div class="relative h-full w-full">
                    <div class="absolute inset-0">
                      <div class="absolute left-1/2 top-1/2 h-[520px] w-[520px] -translate-x-1/2 -translate-y-1/2 ring-1 ring-white/10 rounded-full"></div>
                      <div class="absolute left-1/2 top-1/2 h-[380px] w-[380px] -translate-x-1/2 -translate-y-1/2 rounded-full ring-1 ring-white/10"></div>
                      <div class="absolute left-1/2 top-1/2 h-[260px] w-[260px] -translate-x-1/2 -translate-y-1/2 rounded-full ring-1 ring-white/10"></div>
                      <div class="absolute left-1/2 top-1/2 h-[140px] w-[140px] -translate-x-1/2 -translate-y-1/2 rounded-full ring-1 ring-white/10"></div>
                      <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
                        <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="target" class="lucide lucide-target h-6 w-6 text-white/70"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg>
                      </div>
                      <!-- Nodes -->
                      <div class="absolute -left-6 top-10 h-28 w-28 rounded-full bg-gradient-to-b from-white/5 to-transparent ring-1 ring-white/10"></div>
                      <div class="absolute right-6 top-6 h-24 w-24 rounded-full bg-gradient-to-b from-white/5 to-transparent ring-1 ring-white/10"></div>
                      <div class="absolute bottom-0 left-12 h-28 w-28 translate-y-1/3 rounded-full bg-gradient-to-b from-white/5 to-transparent ring-1 ring-white/10"></div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="sm:p-8 pt-6 pr-6 pb-6 pl-6 space-y-3">
                <div class="flex items-center gap-2">
                  <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-5 w-5 text-emerald-300"><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" class=""></path><path d="m9 12 2 2 4-4"></path></svg>
                  <span class="text-sm text-neutral-300">Updated standard &amp; copy</span>
                </div>
                <h2 class="text-2xl font-semibold tracking-tight text-white">ISO/IEC 27001 Certification</h2>
                <p class="text-sm leading-relaxed text-neutral-300">
                  HelioTrust aligns with ISO/IEC 27001 controls to safeguard customer data, with automated evidence and continuous monitoring replacing manual checklists.
                </p>
                <div class="mt-3 flex items-center gap-3">
                  <span class="inline-flex items-center gap-1.5 rounded-md bg-emerald-400/10 px-2 py-1 text-xs text-emerald-300 ring-1 ring-emerald-400/20">
                    <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="activity" class="lucide lucide-activity h-3.5 w-3.5"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg>
                    Continuous
                  </span>
                  <span class="inline-flex items-center gap-1.5 rounded-md bg-indigo-400/10 px-2 py-1 text-xs text-indigo-300 ring-1 ring-indigo-400/20">
                    <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="database" class="lucide lucide-database h-3.5 w-3.5"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5V19A9 3 0 0 0 21 19V5"></path><path d="M3 12A9 3 0 0 0 21 12"></path></svg>
                    Evidence
                  </span>
                </div>
              </div>
            </div>
          </div>