bento grid

<!-- Features Section -->
<div class="flex flex-col animate-fade-up delay-200 scroll-mt-24 w-full z-10 relative gap-x-10 gap-y-10" id="features">
    <div class="flex flex-col md:flex-row md:items-end gap-6 pr-1 pl-1 gap-x-6 gap-y-6 justify-between">
        <div class="max-w-2xl">
            <h2 class="md:text-4xl text-3xl text-neutral-900 tracking-tighter mb-4 font-sans font-semibold" style="">
                Enterprise-Grade Precision
            </h2>
            <p class="leading-relaxed text-base font-normal text-neutral-500 font-sans">
                Stop manual data entry. We automate the complexities of crypto accounting so you can close your books
                faster.
            </p>
        </div>
    </div>

    <!-- Bento Grid: Features -->
    <div
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 overflow-hidden shadow-sm bg-neutral-200 rounded-[2rem] gap-px border border-neutral-200">

        <!-- Feature 1: Real-Time FX -->
        <div
            class="group hover:bg-white transition-all duration-300 flex flex-col min-h-[280px] z-10 bg-neutral-50 h-full pt-8 pr-8 pb-8 pl-8 relative justify-between">
            <div class="">
                <div
                    class="w-10 h-10 bg-white rounded-lg border border-neutral-200 flex items-center justify-center mb-6 shadow-sm text-lime-600 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                        class="">
                        <circle cx="12" cy="12" r="10" class=""></circle>
                        <polyline points="12 6 12 12 16 14"></polyline>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-neutral-900 mb-2 tracking-tight font-sans">Real-Time FX
                    Attribution</h3>
                <p class="text-sm text-neutral-500 font-normal leading-relaxed font-sans">
                    We pull the exact USD/EUR price at the specific block-timestamp of every transaction for audit-ready
                    accuracy.
                </p>
            </div>
        </div>

        <!-- Feature 2: AI Matching (Large) -->
        <div
            class="group relative bg-white hover:bg-lime-50/30 transition-colors p-8 flex flex-col justify-between h-full min-h-[280px] md:col-span-2 overflow-hidden z-10">
            <div class="relative z-10 max-w-md">
                <div
                    class="w-10 h-10 bg-lime-50 rounded-lg border border-lime-200 flex items-center justify-center mb-6 shadow-sm text-lime-600 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z">
                        </path>
                        <path d="m12 8.5 4.5 2.5"></path>
                        <path d="m12 15.5 4.5-2.5"></path>
                        <path d="m12 12 4.5-2.5"></path>
                        <path d="m12 12-4.5-2.5"></path>
                        <path d="M12 3.5v17"></path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-neutral-900 mb-2 tracking-tight font-sans">AI Smart-Matching</h3>
                <p class="text-sm text-neutral-500 font-normal leading-relaxed font-sans">
                    Our ML engine pairs incoming wallet addresses with open invoices in your ERP, automatically marking
                    them as "Paid" without human intervention.
                </p>
            </div>
            <div
                class="absolute right-0 bottom-0 top-0 w-1/2 bg-gradient-to-l from-white to-transparent pointer-events-none">
            </div>
            <div
                class="absolute bottom-6 right-6 opacity-10 group-hover:opacity-100 transition-opacity duration-500 text-lime-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 2a10 10 0 1 0 10 10H12V2z"></path>
                    <path d="M12 2a10 10 0 0 1 10 10h-10V2z" transform="rotate(180 12 12)" opacity="0.5"></path>
                </svg>
            </div>
        </div>

        <!-- Feature 3: Gain/Loss Ledger -->
        <div
            class="group hover:bg-white transition-all duration-300 flex flex-col min-h-[280px] bg-neutral-50 h-full p-8 relative justify-between z-10">
            <div class="">
                <div
                    class="w-10 h-10 bg-white rounded-lg border border-neutral-200 flex items-center justify-center mb-6 shadow-sm text-neutral-700 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                        class="">
                        <path d="M12 20v-6"></path>
                        <path d="M6 20V10"></path>
                        <path d="M18 20V4"></path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-neutral-900 mb-2 tracking-tight font-sans">Auto Gain/Loss</h3>
                <p class="text-sm text-neutral-500 font-normal leading-relaxed font-sans">
                    Track "micro-fluctuations" in stablecoin values to ensure your books remain perfectly balanced to
                    the cent.
                </p>
            </div>
        </div>

        <!-- Feature 4: Audit Trail -->
        <div
            class="group hover:bg-white transition-all duration-300 flex flex-col min-h-[280px] bg-neutral-50 h-full p-8 relative justify-between z-10">
            <div class="">
                <div
                    class="w-10 h-10 bg-white rounded-lg border border-neutral-200 flex items-center justify-center mb-6 shadow-sm text-neutral-700 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <path d="m9 15 2 2 4-4"></path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-neutral-900 mb-2 tracking-tight font-sans">Immutable Audit Trail
                </h3>
                <p class="text-sm text-neutral-500 font-normal leading-relaxed font-sans">
                    Every accounting entry is directly linked to its unique blockchain Transaction ID (TXID) as "Proof
                    of Payment".
                </p>
            </div>
        </div>

        <!-- Feature 5: Integration -->
        <div
            class="group hover:bg-white transition-all duration-300 flex flex-col min-h-[280px] bg-neutral-50 h-full p-8 relative justify-between z-10">
            <div class="">
                <div
                    class="w-10 h-10 bg-white rounded-lg border border-neutral-200 flex items-center justify-center mb-6 shadow-sm text-neutral-700 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-neutral-900 mb-2 tracking-tight font-sans">ERP Native Sync</h3>
                <p class="text-sm text-neutral-500 font-normal leading-relaxed font-sans">
                    Seamless integration with QuickBooks Online, NetSuite, and Xero. No CSV exports required.
                </p>
            </div>
        </div>
    </div>
</div>