Subtle Blurred Circular Background Glow

<!-- Ambient background glow -->
<div
    class="fixed top-[-20%] left-[-10%] w-[60vw] h-[60vw] rounded-full bg-white/[0.015] blur-[120px] pointer-events-none">
</div>

<div class="max-w-6xl w-full mx-auto relative z-10">

    <!-- Header -->
    <div class="mb-12 md:mb-16">
        <div class="text-xs font-medium tracking-tighter text-neutral-400 mb-6 flex items-center gap-2">
            <span class="w-1.5 h-1.5 rounded-full bg-neutral-500"></span>
            NEXUS
        </div>
        <h2 class="text-3xl md:text-4xl font-medium tracking-tight text-neutral-100 mb-4">Infrastructure Topology</h2>
        <p class="text-sm text-neutral-500 max-w-lg leading-relaxed">Enterprise-grade routing, execution, and security
            primitives engineered for autonomous neural networks.</p>
    </div>

    <!-- 3x2 Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-5">

        <!-- Card 1: Neural Routing -->
        <div
            class="group relative flex flex-col justify-between overflow-hidden rounded-[24px] bg-white/[0.015] p-7 ring-1 ring-white/[0.04] transition-all duration-500 ease-out hover:-translate-y-1 hover:bg-white/[0.02] hover:ring-white/[0.08] hover:shadow-[0_16px_32px_-8px_rgba(0,0,0,0.5)] min-h-[320px]">
            <div
                class="absolute inset-0 z-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100">
            </div>
            <div class="absolute inset-0 z-0 rounded-[24px] shadow-[inset_0_1px_1px_rgba(255,255,255,0.03)]"></div>

            <div class="relative z-10 mb-8">
                <h3 class="mb-2 text-xs font-medium uppercase tracking-[0.15em] text-neutral-500">Neural Routing</h3>
                <p class="text-sm text-neutral-400 leading-relaxed">Dynamic traffic distribution across globally
                    distributed inference nodes.</p>
            </div>

            <div class="relative z-10 flex flex-1 items-center justify-center">
                <div class="relative w-full h-full flex items-center justify-center">
                    <div class="absolute w-full h-[1px] bg-gradient-to-r from-transparent via-white/10 to-transparent">
                    </div>
                    <div class="absolute h-full w-[1px] bg-gradient-to-b from-transparent via-white/10 to-transparent">
                    </div>

                    <div
                        class="absolute top-[20%] left-[20%] w-1.5 h-1.5 rounded-full bg-white/20 ring-1 ring-white/10">
                    </div>
                    <div class="absolute bottom-[30%] right-[15%] w-2 h-2 rounded-full bg-white/10 ring-1 ring-white/5">
                    </div>
                    <div class="absolute top-[35%] right-[25%] w-1 h-1 rounded-full bg-white/30"></div>

                    <div
                        class="w-12 h-12 rounded-full bg-[#0a0a0a] ring-1 ring-white/10 flex items-center justify-center z-10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)] transition-transform duration-500 group-hover:scale-110">
                        <iconify-icon icon="solar:network-linear" class="text-neutral-300 text-xl"
                            stroke-width="1.5"></iconify-icon>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card 2: Execution Engine (Neumorphic Button) -->
        <div
            class="group relative flex flex-col justify-between overflow-hidden rounded-[24px] bg-white/[0.015] p-7 ring-1 ring-white/[0.04] transition-all duration-500 ease-out hover:-translate-y-1 hover:bg-white/[0.02] hover:ring-white/[0.08] hover:shadow-[0_16px_32px_-8px_rgba(0,0,0,0.5)] min-h-[320px]">
            <div
                class="absolute inset-0 z-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100">
            </div>
            <div class="absolute inset-0 z-0 rounded-[24px] shadow-[inset_0_1px_1px_rgba(255,255,255,0.03)]"></div>

            <div class="relative z-10 mb-8">
                <h3 class="mb-2 text-xs font-medium uppercase tracking-[0.15em] text-neutral-500">Execution Engine</h3>
                <p class="text-sm text-neutral-400 leading-relaxed">Low-latency compute environments for intensive,
                    continuous AI workloads.</p>
            </div>

            <div class="relative z-10 flex flex-1 items-center justify-center">
                <button class="relative px-5 py-2.5 rounded-full bg-[#0a0a0a] text-xs font-medium text-neutral-300 tracking-wide ring-1 ring-white/[0.06] flex items-center gap-2 shadow-[inset_0_1px_1px_rgba(255,255,255,0.05),0_8px_16px_rgba(0,0,0,0.4)] transition-all duration-300 hover:bg-[#111] hover:ring-white/[0.12] hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.1),0_8px_20px_rgba(0,0,0,0.6)] group-hover:scale-105">
                        <iconify-icon icon="solar:play-linear" class="text-neutral-400" stroke-width="1.5"></iconify-icon>
                        Initialize Core
                    </button>
            </div>
        </div>

        <!-- Card 3: Threat Inspection -->
        <div
            class="group relative flex flex-col justify-between overflow-hidden rounded-[24px] bg-white/[0.015] p-7 ring-1 ring-white/[0.04] transition-all duration-500 ease-out hover:-translate-y-1 hover:bg-white/[0.02] hover:ring-white/[0.08] hover:shadow-[0_16px_32px_-8px_rgba(0,0,0,0.5)] min-h-[320px]">
            <div
                class="absolute inset-0 z-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100">
            </div>
            <div class="absolute inset-0 z-0 rounded-[24px] shadow-[inset_0_1px_1px_rgba(255,255,255,0.03)]"></div>

            <div class="relative z-10 mb-8">
                <h3 class="mb-2 text-xs font-medium uppercase tracking-[0.15em] text-neutral-500">Threat Inspection</h3>
                <p class="text-sm text-neutral-400 leading-relaxed">Deep packet inspection and precise anomaly detection
                    for model inputs.</p>
            </div>

            <div class="relative z-10 flex flex-1 items-center justify-center">
                <div class="relative w-32 h-24 flex items-center justify-center">
                    <div
                        class="flex flex-col gap-2.5 w-full opacity-30 transition-opacity duration-500 group-hover:opacity-50">
                        <div class="h-1.5 w-full bg-neutral-400 rounded-full"></div>
                        <div class="h-1.5 w-3/4 bg-neutral-400 rounded-full"></div>
                        <div class="h-1.5 w-5/6 bg-neutral-400 rounded-full"></div>
                        <div class="h-1.5 w-1/2 bg-neutral-400 rounded-full"></div>
                    </div>

                    <div
                        class="absolute top-1/2 left-1/2 -translate-x-1/4 -translate-y-1/2 w-12 h-12 rounded-full bg-[#0a0a0a]/90 backdrop-blur-md ring-1 ring-white/10 flex items-center justify-center shadow-[0_8px_16px_rgba(0,0,0,0.8),inset_0_1px_1px_rgba(255,255,255,0.1)] transition-transform duration-500 group-hover:-translate-y-3/4 group-hover:-translate-x-1/2">
                        <iconify-icon icon="solar:magnifer-linear" class="text-neutral-300 text-xl"
                            stroke-width="1.5"></iconify-icon>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card 4: State Vault -->
        <div
            class="group relative flex flex-col justify-between overflow-hidden rounded-[24px] bg-white/[0.015] p-7 ring-1 ring-white/[0.04] transition-all duration-500 ease-out hover:-translate-y-1 hover:bg-white/[0.02] hover:ring-white/[0.08] hover:shadow-[0_16px_32px_-8px_rgba(0,0,0,0.5)] min-h-[320px]">
            <div
                class="absolute inset-0 z-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100">
            </div>
            <div class="absolute inset-0 z-0 rounded-[24px] shadow-[inset_0_1px_1px_rgba(255,255,255,0.03)]"></div>

            <div class="relative z-10 mb-8">
                <h3 class="mb-2 text-xs font-medium uppercase tracking-[0.15em] text-neutral-500">State Vault</h3>
                <p class="text-sm text-neutral-400 leading-relaxed">Encrypted persistence layer for isolated, stateful
                    agent interactions.</p>
            </div>

            <div class="relative z-10 flex flex-1 items-center justify-center">
                <div class="flex flex-col gap-1.5 transition-transform duration-500 group-hover:scale-105">
                    <div
                        class="w-16 h-5 rounded-md border border-white/5 bg-gradient-to-b from-white/[0.04] to-transparent shadow-[inset_0_1px_0_rgba(255,255,255,0.02)]">
                    </div>
                    <div
                        class="w-16 h-5 rounded-md border border-white/10 bg-gradient-to-b from-white/[0.08] to-transparent shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] relative overflow-hidden">
                        <div
                            class="absolute left-2 top-1/2 -translate-y-1/2 w-1 h-1 rounded-full bg-neutral-300 shadow-[0_0_6px_rgba(255,255,255,0.6)]">
                        </div>
                    </div>
                    <div
                        class="w-16 h-5 rounded-md border border-white/5 bg-gradient-to-b from-white/[0.04] to-transparent shadow-[inset_0_1px_0_rgba(255,255,255,0.02)]">
                    </div>
                </div>
            </div>
        </div>

        <!-- Card 5: Telemetry Stream -->
        <div
            class="group relative flex flex-col justify-between overflow-hidden rounded-[24px] bg-white/[0.015] p-7 ring-1 ring-white/[0.04] transition-all duration-500 ease-out hover:-translate-y-1 hover:bg-white/[0.02] hover:ring-white/[0.08] hover:shadow-[0_16px_32px_-8px_rgba(0,0,0,0.5)] min-h-[320px]">
            <div
                class="absolute inset-0 z-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100">
            </div>
            <div class="absolute inset-0 z-0 rounded-[24px] shadow-[inset_0_1px_1px_rgba(255,255,255,0.03)]"></div>

            <div class="relative z-10 mb-8">
                <h3 class="mb-2 text-xs font-medium uppercase tracking-[0.15em] text-neutral-500">Telemetry Stream</h3>
                <p class="text-sm text-neutral-400 leading-relaxed">Real-time observability and granular performance
                    metrics aggregation.</p>
            </div>

            <div class="relative z-10 flex flex-1 items-center justify-center">
                <div class="flex items-end gap-1.5 h-12">
                    <div
                        class="w-1.5 h-[30%] rounded-t-sm bg-white/10 transition-all duration-500 group-hover:bg-white/20 group-hover:h-[40%]">
                    </div>
                    <div
                        class="w-1.5 h-[60%] rounded-t-sm bg-white/10 transition-all duration-500 group-hover:bg-white/20 group-hover:h-[80%] delay-75">
                    </div>
                    <div
                        class="w-1.5 h-[100%] rounded-t-sm bg-white/20 shadow-[0_0_8px_rgba(255,255,255,0.1)] transition-all duration-500 group-hover:bg-white/30 group-hover:shadow-[0_0_12px_rgba(255,255,255,0.2)] delay-150">
                    </div>
                    <div
                        class="w-1.5 h-[40%] rounded-t-sm bg-white/10 transition-all duration-500 group-hover:bg-white/20 group-hover:h-[50%] delay-200">
                    </div>
                    <div
                        class="w-1.5 h-[70%] rounded-t-sm bg-white/10 transition-all duration-500 group-hover:bg-white/20 group-hover:h-[90%] delay-300">
                    </div>
                </div>
            </div>
        </div>

        <!-- Card 6: Access Control -->
        <div
            class="group relative flex flex-col justify-between overflow-hidden rounded-[24px] bg-white/[0.015] p-7 ring-1 ring-white/[0.04] transition-all duration-500 ease-out hover:-translate-y-1 hover:bg-white/[0.02] hover:ring-white/[0.08] hover:shadow-[0_16px_32px_-8px_rgba(0,0,0,0.5)] min-h-[320px]">
            <div
                class="absolute inset-0 z-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100">
            </div>
            <div class="absolute inset-0 z-0 rounded-[24px] shadow-[inset_0_1px_1px_rgba(255,255,255,0.03)]"></div>

            <div class="relative z-10 mb-8">
                <h3 class="mb-2 text-xs font-medium uppercase tracking-[0.15em] text-neutral-500">Access Control</h3>
                <p class="text-sm text-neutral-400 leading-relaxed">Identity and zero-trust policy management for secure
                    API utilization.</p>
            </div>

            <div class="relative z-10 flex flex-1 items-center justify-center">
                <div class="relative flex items-center justify-center w-24 h-24">
                    <div
                        class="absolute inset-0 rounded-full border border-white/[0.02] transition-transform duration-700 group-hover:scale-110">
                    </div>
                    <div
                        class="absolute inset-3 rounded-full border border-white/[0.04] transition-transform duration-500 group-hover:scale-105">
                    </div>

                    <div
                        class="w-10 h-10 rounded-full bg-[#0a0a0a] ring-1 ring-white/10 flex items-center justify-center z-10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)] transition-colors duration-500 group-hover:bg-[#111]">
                        <iconify-icon icon="solar:shield-keyhole-linear" class="text-neutral-300 text-lg"
                            stroke-width="1.5"></iconify-icon>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>