DeFi Curriculum Feature Grid Section

<div class="flex flex-col gap-10 z-10 w-full relative gap-x-10 gap-y-10 m-8 max-w-6xl my-20 mx-auto">

    <!-- Section Header -->
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 px-1">
        <div class="max-w-2xl">
            <h2 class="md:text-5xl text-3xl font-medium text-zinc-900 tracking-tighter mb-4">
                Master the
                <span class="bg-clip-text text-transparent bg-gradient-to-b from-neutral-400 to-neutral-600">DeFi Stack</span>
            </h2>
            <p class="leading-relaxed text-base font-normal text-zinc-500">
                From consensus mechanisms to advanced yield strategies. A complete toolkit designed for the modern
                financial architect.
            </p>
        </div>
        <a href="#"
            class="group flex items-center gap-2 hover:text-indigo-600 transition-colors text-sm font-normal text-zinc-900 pb-1">
            View full syllabus
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                viewBox="0 0 24 24" data-icon="solar:arrow-right-linear" style="font-size: 16px;"
                class="iconify group-hover:translate-x-1 transition-transform iconify--solar">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="1.5" d="M4 12h16m0 0l-6-6m6 6l-6 6" class=""></path>
            </svg>
        </a>
    </div>

    <!-- Bento Grid Container -->
    <div
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 overflow-hidden shadow-zinc-900/5 bg-zinc-200 rounded-[2rem] shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)] gap-x-px gap-y-px">

        <!-- Card 1: Governance (Span 1) -->
        <div
            class="group hover:bg-zinc-50 transition-colors flex flex-col min-h-[340px] bg-white h-full pt-8 pr-8 pb-8 pl-8 relative justify-between">
            <div class="relative z-10">
                <div class="flex items-center gap-2 mb-3 text-zinc-400">
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                        viewBox="0 0 24 24" data-icon="solar:users-group-rounded-bold-duotone" style="font-size: 24px;"
                        class="iconify iconify--solar">
                        <circle cx="15" cy="6" r="3" fill="currentColor" opacity=".4" class=""></circle>
                        <ellipse cx="16" cy="17" fill="currentColor" opacity=".4" rx="5" ry="3" class=""></ellipse>
                        <circle cx="9.001" cy="6" r="4" fill="currentColor" class=""></circle>
                        <ellipse cx="9.001" cy="17.001" fill="currentColor" rx="7" ry="4" class=""></ellipse>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-zinc-900 mb-2 tracking-tight">DAO Governance</h3>
                <p class="text-sm text-zinc-500 font-medium leading-relaxed font-normal">Structure decentralized
                    organizations,
                    manage proposals, and implement voting mechanics.</p>
            </div>

            <!-- Visual: Governance Flow -->
            <div class="flex flex-col flex-grow mt-8 pt-4 pb-4 relative items-center justify-center">
                <!-- Connecting Lines -->
                <div
                    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-[60%] w-32 h-12 border-b border-r border-l border-zinc-200 rounded-b-2xl pointer-events-none">
                </div>
                <div
                    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-[20%] h-6 w-px bg-zinc-200 pointer-events-none">
                </div>

                <!-- Avatars -->
                <div class="flex gap-4 mb-6 relative z-10">
                    <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/578a5bc5-2c9f-4285-8ae6-0d7dafefba84_320w.webp" class="w-10 h-10 rounded-full border-2 border-white shadow-sm object-cover grayscale opacity-80 group-hover:grayscale-0 group-hover:opacity-100 transition-all" alt="User">
                    <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1a99aa12-9c50-44fe-bb7d-5dfef28b7d59_320w.webp" class="w-10 h-10 rounded-full border-2 border-white shadow-sm object-cover grayscale opacity-80 group-hover:grayscale-0 group-hover:opacity-100 transition-all" alt="User">
                    <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2e91b8c7-be64-41b5-8bd8-75efab28bdbe_320w.webp" class="w-10 h-10 rounded-full border-2 border-white shadow-sm object-cover grayscale opacity-80 group-hover:grayscale-0 group-hover:opacity-100 transition-all" alt="User">
                </div>

                <!-- Action Button -->
                <div
                    class="flex text-[10px] uppercase shadow-zinc-900/20 group-hover:scale-105 transition-transform font-bold text-white tracking-wider bg-zinc-900 rounded-full mt-2 px-4 py-2 shadow-lg gap-x-2 gap-y-2 items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                        viewBox="0 0 24 24" data-icon="solar:check-circle-bold-duotone" class="iconify iconify--solar">
                        <path fill="currentColor"
                            d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5"
                            class="">
                        </path>
                        <path fill="currentColor"
                            d="M16.03 8.97a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0"
                            class="">
                        </path>
                    </svg>
                    <span>Cast Vote</span>
                </div>
            </div>
        </div>

        <!-- Card 2: Tokenomics (Span 2) -->
        <div
            class="group relative bg-white hover:bg-zinc-50 transition-colors p-8 flex flex-col justify-between h-full min-h-[340px] md:col-span-2 overflow-hidden">
            <div class="relative z-10 max-w-md">
                <div class="flex items-center gap-2 mb-3 text-zinc-400">
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                        viewBox="0 0 24 24" data-icon="solar:chart-square-bold-duotone" style="font-size: 24px;"
                        class="iconify iconify--solar">
                        <path fill="currentColor"
                            d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22"
                            opacity=".5" class=""></path>
                        <path fill="currentColor"
                            d="M12 5.25a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75m-5 3a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0V9A.75.75 0 0 1 7 8.25m10 4a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0v-5a.75.75 0 0 1 .75-.75"
                            class="">
                        </path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-zinc-900 mb-2 tracking-tight">Tokenomics &amp; Incentives</h3>
                <p class="text-sm text-zinc-500 font-medium leading-relaxed font-normal">Design sustainable economic
                    models,
                    calculate APY curves, and engineer liquidity mining programs that align stakeholder interests.
                </p>
            </div>

            <!-- Visual: Floating Assets -->
            <div class="absolute right-0 bottom-0 top-0 w-full md:w-2/3 pointer-events-none">
                <div class="absolute inset-0 bg-gradient-to-l from-white via-white/80 to-transparent z-10"></div>

                <!-- Floating Card 1 -->
                <div
                    class="absolute top-[20%] right-12 w-48 h-32 bg-white border border-zinc-100 rounded-xl shadow-xl rotate-6 flex flex-col p-4 group-hover:rotate-3 group-hover:scale-105 transition-all duration-700 ease-out z-0">
                    <div class="flex items-center gap-2 mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                            viewBox="0 0 24 24" data-icon="solar:wallet-money-bold-duotone" style="font-size: 24px;"
                            class="">
                            <path fill="currentColor"
                                d="M4.892 9.614c0-.402.323-.728.722-.728H9.47c.4 0 .723.326.723.728a.726.726 0 0 1-.723.729H5.614a.726.726 0 0 1-.722-.729"
                                class="">
                            </path>
                            <path fill="currentColor" fill-rule="evenodd"
                                d="M21.188 10.004q-.094-.005-.2-.004h-2.773C15.944 10 14 11.736 14 14s1.944 4 4.215 4h2.773q.106.001.2-.004c.923-.056 1.739-.757 1.808-1.737c.004-.064.004-.133.004-.197v-4.124c0-.064 0-.133-.004-.197c-.069-.98-.885-1.68-1.808-1.737m-3.217 5.063c.584 0 1.058-.478 1.058-1.067c0-.59-.474-1.067-1.058-1.067s-1.06.478-1.06 1.067c0 .59.475 1.067 1.06 1.067"
                                clip-rule="evenodd" class=""></path>
                            <path fill="currentColor"
                                d="M21.14 10.002c0-1.181-.044-2.448-.798-3.355a4 4 0 0 0-.233-.256c-.749-.748-1.698-1.08-2.87-1.238C16.099 5 14.644 5 12.806 5h-2.112C8.856 5 7.4 5 6.26 5.153c-1.172.158-2.121.49-2.87 1.238c-.748.749-1.08 1.698-1.238 2.87C2 10.401 2 11.856 2 13.694v.112c0 1.838 0 3.294.153 4.433c.158 1.172.49 2.121 1.238 2.87c.749.748 1.698 1.08 2.87 1.238c1.14.153 2.595.153 4.433.153h2.112c1.838 0 3.294 0 4.433-.153c1.172-.158 2.121-.49 2.87-1.238q.305-.308.526-.66c.45-.72.504-1.602.504-2.45l-.15.001h-2.774C15.944 18 14 16.264 14 14s1.944-4 4.215-4h2.773q.079 0 .151.002"
                                opacity=".5" class=""></path>
                            <path fill="currentColor"
                                d="M10.101 2.572L8 3.992l-1.733 1.16C7.405 5 8.859 5 10.694 5h2.112c1.838 0 3.294 0 4.433.153q.344.045.662.114L16 4l-2.113-1.428a3.42 3.42 0 0 0-3.786 0"
                                class="">
                            </path>
                        </svg>
                        <span class="text-xs font-bold text-zinc-900">Liquidity Pool</span>
                    </div>
                    <div class="space-y-2">
                        <div class="h-1.5 w-full bg-zinc-100 rounded-full overflow-hidden">
                            <div class="h-full w-3/4 bg-indigo-500 rounded-full"></div>
                        </div>
                        <div class="h-1.5 w-full bg-zinc-100 rounded-full overflow-hidden">
                            <div class="h-full w-1/2 bg-zinc-300 rounded-full"></div>
                        </div>
                    </div>
                    <div class="mt-auto flex justify-between items-end">
                        <span class="text-[10px] text-zinc-400 font-medium">APR</span>
                        <span class="text-sm font-bold text-zinc-900">12.4%</span>
                    </div>
                </div>

                <!-- Floating Card 2 -->
                <div
                    class="absolute bottom-[15%] right-32 w-16 h-16 bg-white border border-zinc-100 rounded-2xl shadow-lg -rotate-12 flex items-center justify-center group-hover:-rotate-6 group-hover:translate-y-2 transition-all duration-700 delay-100 z-20">
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                        viewBox="0 0 24 24" data-icon="solar:dollar-minimalistic-bold-duotone" style="font-size: 32px;"
                        class="">
                        <path fill="currentColor" fill-rule="evenodd"
                            d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10"
                            clip-rule="evenodd" opacity=".5" class=""></path>
                        <path fill="currentColor"
                            d="M12.75 6a.75.75 0 0 0-1.5 0v.317c-1.63.292-3 1.517-3 3.183c0 1.917 1.813 3.25 3.75 3.25c1.377 0 2.25.906 2.25 1.75s-.873 1.75-2.25 1.75c-1.376 0-2.25-.906-2.25-1.75a.75.75 0 0 0-1.5 0c0 1.666 1.37 2.891 3 3.183V18a.75.75 0 0 0 1.5 0v-.317c1.63-.292 3-1.517 3-3.183c0-1.917-1.813-3.25-3.75-3.25c-1.376 0-2.25-.906-2.25-1.75s.874-1.75 2.25-1.75c1.377 0 2.25.906 2.25 1.75a.75.75 0 0 0 1.5 0c0-1.666-1.37-2.891-3-3.183z"
                            class="">
                        </path>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Card 3: Smart Contracts (Span 1) -->
        <div
            class="group relative bg-white hover:bg-zinc-50 transition-colors p-8 flex flex-col justify-between h-full min-h-[340px]">
            <div class="relative z-10">
                <div class="flex items-center gap-2 mb-3 text-zinc-400">
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                        viewBox="0 0 24 24" data-icon="solar:code-square-bold-duotone" style="font-size: 24px;"
                        class="iconify iconify--solar">
                        <path fill="currentColor"
                            d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12"
                            opacity=".5" class=""></path>
                        <path fill="currentColor"
                            d="M13.488 6.446a.75.75 0 0 1 .53.918l-2.588 9.66a.75.75 0 0 1-1.449-.389l2.589-9.659a.75.75 0 0 1 .918-.53M14.97 8.47a.75.75 0 0 1 1.06 0l.209.208c.635.635 1.165 1.165 1.529 1.642c.384.504.654 1.036.654 1.68s-.27 1.176-.654 1.68c-.364.477-.894 1.007-1.53 1.642l-.208.208a.75.75 0 1 1-1.06-1.06l.171-.172c.682-.682 1.139-1.14 1.434-1.528c.283-.37.347-.586.347-.77s-.064-.4-.347-.77c-.295-.387-.752-.846-1.434-1.528l-.171-.172a.75.75 0 0 1 0-1.06m-7 0a.75.75 0 0 1 1.06 1.06l-.171.172c-.682.682-1.138 1.14-1.434 1.528c-.283.37-.346.586-.346.77s.063.4.346.77c.296.387.752.846 1.434 1.528l.172.172a.75.75 0 1 1-1.061 1.06l-.208-.208c-.636-.635-1.166-1.165-1.53-1.642c-.384-.504-.653-1.036-.653-1.68s.27-1.176.653-1.68c.364-.477.894-1.007 1.53-1.642z"
                            class=""></path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-zinc-900 mb-2 tracking-tight">Smart Contract Logic</h3>
                <p class="leading-relaxed text-sm font-medium text-zinc-500 font-normal">Write secure, gas-efficient
                    Solidity
                    primitives for AMMs, lending pools, and NFT marketplaces.</p>
            </div>

            <!-- Visual: Hex Nodes -->
            <div class="mt-8 flex items-center justify-center py-4 relative flex-grow">
                <div class="group-hover:opacity-100 transition-opacity opacity-80 w-48 h-32 relative">
                    <!-- Center Node -->
                    <div
                        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-14 h-14 bg-zinc-800 rounded-full flex items-center justify-center z-10 shadow-lg ring-4 ring-zinc-200">
                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                            viewBox="0 0 24 24" data-icon="solar:programming-bold-duotone" style="font-size: 20px;"
                            class="text-zinc-300">
                            <path fill="currentColor"
                                d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12"
                                opacity=".5" class=""></path>
                            <path fill="currentColor"
                                d="M6.424 9.52a.75.75 0 0 1 1.056-.096l.277.23c.605.504 1.12.933 1.476 1.328c.379.42.674.901.674 1.518s-.295 1.099-.674 1.518c-.356.395-.871.824-1.476 1.328l-.277.23a.75.75 0 1 1-.96-1.152l.234-.195c.659-.55 1.09-.91 1.366-1.216c.262-.29.287-.427.287-.513s-.025-.222-.287-.513c-.277-.306-.707-.667-1.366-1.216l-.234-.195a.75.75 0 0 1-.096-1.056M17.75 15a.75.75 0 0 1-.75.75h-5a.75.75 0 0 1 0-1.5h5a.75.75 0 0 1 .75.75"
                                class="">
                            </path>
                        </svg>
                    </div>
                    <!-- Satellite Nodes -->
                    <div
                        class="absolute top-0 left-1/2 -translate-x-1/2 w-8 h-8 bg-zinc-100 border border-zinc-300 shadow-sm rounded-full flex items-center justify-center">
                        <div class="w-3 h-3 bg-zinc-400 rounded-full"></div>
                    </div>
                    <div
                        class="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-8 bg-zinc-100 border border-zinc-300 shadow-sm rounded-full flex items-center justify-center">
                        <div class="w-3 h-3 bg-zinc-500 rounded-full"></div>
                    </div>
                    <div
                        class="absolute top-1/2 left-0 -translate-y-1/2 w-8 h-8 bg-zinc-100 border border-zinc-300 shadow-sm rounded-full flex items-center justify-center">
                        <div class="w-3 h-3 bg-zinc-400 rounded-full"></div>
                    </div>
                    <div
                        class="absolute top-1/2 right-0 -translate-y-1/2 w-8 h-8 bg-zinc-100 border border-zinc-300 shadow-sm rounded-full flex items-center justify-center">
                        <div class="w-3 h-3 bg-zinc-500 rounded-full"></div>
                    </div>
                    <!-- Diagonal Nodes -->
                    <div
                        class="absolute top-2 left-4 w-6 h-6 bg-zinc-200 border border-zinc-300 shadow-sm rounded-full flex items-center justify-center">
                        <div class="w-2 h-2 bg-zinc-400 rounded-full"></div>
                    </div>
                    <div
                        class="absolute top-2 right-4 w-6 h-6 bg-zinc-200 border border-zinc-300 shadow-sm rounded-full flex items-center justify-center">
                        <div class="w-2 h-2 bg-zinc-400 rounded-full"></div>
                    </div>
                    <div
                        class="absolute bottom-2 left-4 w-6 h-6 bg-zinc-200 border border-zinc-300 shadow-sm rounded-full flex items-center justify-center">
                        <div class="w-2 h-2 bg-zinc-400 rounded-full"></div>
                    </div>
                    <div
                        class="absolute bottom-2 right-4 w-6 h-6 bg-zinc-200 border border-zinc-300 shadow-sm rounded-full flex items-center justify-center">
                        <div class="w-2 h-2 bg-zinc-400 rounded-full"></div>
                    </div>
                    <!-- Connectors -->
                    <svg class="absolute inset-0 w-full h-full pointer-events-none text-zinc-300" style="z-index: 0;">
                        <line x1="96" y1="64" x2="96" y2="16" stroke="currentColor" stroke-width="1.5" class=""></line>
                        <line x1="96" y1="64" x2="96" y2="112" stroke="currentColor" stroke-width="1.5" class=""></line>
                        <line x1="96" y1="64" x2="16" y2="64" stroke="currentColor" stroke-width="1.5" class=""></line>
                        <line x1="96" y1="64" x2="176" y2="64" stroke="currentColor" stroke-width="1.5" class=""></line>
                        <line x1="96" y1="64" x2="32" y2="16" stroke="currentColor" stroke-width="1" class=""></line>
                        <line x1="96" y1="64" x2="160" y2="16" stroke="currentColor" stroke-width="1" class=""></line>
                        <line x1="96" y1="64" x2="32" y2="112" stroke="currentColor" stroke-width="1" class=""></line>
                        <line x1="96" y1="64" x2="160" y2="112" stroke="currentColor" stroke-width="1" class=""></line>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Card 4: Analytics (Span 1) -->
        <div
            class="group relative bg-white hover:bg-zinc-50 transition-colors p-8 flex flex-col justify-between h-full min-h-[340px] overflow-hidden">
            <div class="relative z-10">
                <div class="flex items-center gap-2 mb-3 text-zinc-400">
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                        viewBox="0 0 24 24" data-icon="solar:graph-up-bold-duotone" style="font-size: 24px;"
                        class="iconify iconify--solar">
                        <path fill="currentColor"
                            d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12"
                            opacity=".5" class=""></path>
                        <path fill="currentColor"
                            d="M14.5 10.75a.75.75 0 0 1 0-1.5H17a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-.69l-2.013 2.013a1.75 1.75 0 0 1-2.474 0l-1.586-1.586a.25.25 0 0 0-.354 0L7.53 14.53a.75.75 0 0 1-1.06-1.06l2.293-2.293a1.75 1.75 0 0 1 2.474 0l1.586 1.586a.25.25 0 0 0 .354 0l2.012-2.013z"
                            class="">
                        </path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-zinc-900 mb-2 tracking-tight">On-Chain Analytics</h3>
                <p class="text-sm text-zinc-500 font-medium leading-relaxed font-normal">Query complex blockchain data,
                    track
                    whale
                    movements, and visualize protocol health.</p>
            </div>

            <!-- Visual: Search UI -->
            <div class="mt-8 relative flex flex-col items-center justify-center flex-grow">
                <div
                    class="w-full bg-zinc-50 border border-zinc-200 rounded-xl p-3 shadow-sm flex items-center gap-3 relative z-10 group-hover:shadow-md transition-all duration-300">
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                        viewBox="0 0 24 24" data-icon="solar:magnifer-linear" style="font-size: 20px;"
                        class="iconify text-zinc-400 iconify--solar">
                        <g fill="none" stroke="currentColor" stroke-width="1.5" class="">
                            <circle cx="11.5" cy="11.5" r="9.5" class=""></circle>
                            <path stroke-linecap="round" d="M18.5 18.5L22 22" class=""></path>
                        </g>
                    </svg>
                    <div class="h-2 w-20 bg-zinc-200 rounded-full"></div>
                    <div class="ml-auto flex items-center gap-1.5">
                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                            viewBox="0 0 24 24" data-icon="simple-icons:ethereum" style="font-size: 14px;" class="">
                            <path fill="currentColor"
                                d="M11.944 17.97L4.58 13.62L11.943 24l7.37-10.38l-7.372 4.35zM12.056 0L4.69 12.223l7.365 4.354l7.365-4.35z"
                                class="">
                            </path>
                        </svg>
                        <span class="text-[10px] font-bold text-zinc-400">ETH</span>
                    </div>
                </div>
                <!-- Floating Elements -->

                <div
                    class="absolute -left-2 bottom-8 w-10 h-10 bg-zinc-900 rounded-lg flex items-center justify-center shadow-lg group-hover:rotate-12 transition-all duration-500 delay-100 z-20">
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                        viewBox="0 0 24 24" data-icon="solar:database-bold-duotone" style="font-size: 20px;"
                        class="iconify text-white iconify--solar">
                        <path fill="currentColor" d="M12 10c4.418 0 8-1.79 8-4s-3.582-4-8-4s-8 1.79-8 4s3.582 4 8 4"
                            class="">
                        </path>
                        <path fill="currentColor"
                            d="M4 12v6c0 2.21 3.582 4 8 4s8-1.79 8-4v-6c0 2.21-3.582 4-8 4s-8-1.79-8-4" opacity=".5"
                            class="">
                        </path>
                        <path fill="currentColor"
                            d="M4 6v6c0 2.21 3.582 4 8 4s8-1.79 8-4V6c0 2.21-3.582 4-8 4S4 8.21 4 6" opacity=".7"
                            class="">
                        </path>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Card 5: Security (Span 1) -->
        <div
            class="group hover:bg-zinc-50 transition-colors flex flex-col min-h-[340px] bg-white h-full pt-8 pr-8 pb-8 pl-8 relative justify-between">
            <div class="relative z-10">
                <div class="flex items-center gap-2 mb-3 text-zinc-400">
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                        viewBox="0 0 24 24" data-icon="solar:shield-check-bold-duotone" style="font-size: 24px;"
                        class="iconify iconify--solar">
                        <path fill="currentColor"
                            d="M3.378 5.082C3 5.62 3 7.22 3 10.417v1.574c0 5.638 4.239 8.375 6.899 9.536c.721.315 1.082.473 2.101.473c1.02 0 1.38-.158 2.101-.473C16.761 20.365 21 17.63 21 11.991v-1.574c0-3.198 0-4.797-.378-5.335c-.377-.537-1.88-1.052-4.887-2.081l-.573-.196C13.595 2.268 12.812 2 12 2s-1.595.268-3.162.805L8.265 3c-3.007 1.03-4.51 1.545-4.887 2.082"
                            opacity=".5" class=""></path>
                        <path fill="currentColor"
                            d="M15.06 10.5a.75.75 0 0 0-1.12-1l-3.011 3.374l-.87-.974a.75.75 0 0 0-1.118 1l1.428 1.6a.75.75 0 0 0 1.119 0z"
                            class="">
                        </path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-zinc-900 mb-2 tracking-tight">Protocol Security</h3>
                <p class="leading-relaxed text-sm font-medium text-zinc-500 font-normal">Identify re-entrancy attacks,
                    front-running risks, and implement defensive architecture.</p>
            </div>

            <!-- Visual: Security Shield -->
            <div class="mt-8 flex items-end justify-center relative flex-grow">
                <div
                    class="flex overflow-hidden group-hover:shadow-lg transition-shadow duration-500 bg-gradient-to-b from-zinc-50 to-zinc-100 w-24 h-24 border-zinc-200 border rounded-full relative scale-50 items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
                        viewBox="0 0 24 24" data-icon="solar:lock-password-unlocked-bold-duotone"
                        style="font-size: 40px;" class="">
                        <path fill="currentColor"
                            d="M2 16c0-2.828 0-4.243.879-5.121C3.757 10 5.172 10 8 10h8c2.828 0 4.243 0 5.121.879C22 11.757 22 13.172 22 16s0 4.243-.879 5.121C20.243 22 18.828 22 16 22H8c-2.828 0-4.243 0-5.121-.879C2 20.243 2 18.828 2 16"
                            opacity=".5" class=""></path>
                        <path fill="currentColor"
                            d="M8 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2m4 0a1 1 0 1 0 0-2a1 1 0 0 0 0 2m5-1a1 1 0 1 1-2 0a1 1 0 0 1 2 0M6.75 8a5.25 5.25 0 0 1 10.335-1.313a.75.75 0 0 0 1.452-.374A6.75 6.75 0 0 0 5.25 8v2.055a24 24 0 0 1 1.5-.051z"
                            class=""></path>
                    </svg>

                    <!-- Scanning Effect -->

                </div>

                <!-- Status Indicators -->
                <div
                    class="absolute top-0 right-4 flex items-center gap-1.5 bg-white border border-zinc-100 px-2 py-1 rounded-full shadow-sm">
                    <div class="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse"></div>
                    <span class="text-[9px] font-bold text-zinc-600 uppercase tracking-wide">Audited</span>
                </div>
            </div>
        </div>

    </div>
</div>