    <!DOCTYPE html>
    <html lang="en">
    <?php
    $pagetitle = "Core Banking Software | Own Your Banking Platform | Nesvra";
    include 'components/head.php';
    ?>

    <body class="bg-white">


        <?php include 'components/navbar.php'; ?>

        <!--  HERO                                   -->
        <!-- ═══════════════════════════════════════ -->
        <section class="relative max-h-[82dvh] h-fit w-full overflow-hidden">
            <div class="absolute inset-0 z-0">
                <div class="absolute inset-0 bg-black/40 z-10"></div>
                <img src="https://plus.unsplash.com/premium_photo-1682096219922-1b05c4e9875c?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                    class="w-full h-full object-cover"
                    style="background-attachment: fixed; background-position: center;"
                    alt="Core Banking Platform" />
            </div>
            <div class="relative z-20 h-full w-full max-w-8xl mx-auto px-4 md:px-16 pt-32 md:pt-48 pb-12 flex flex-col items-start text-left">
                <span class="font-mono text-[11px] font-semibold tracking-[0.4em] text-brandOrange uppercase mb-3" data-aos="fade-right">
                    Own your banking core · one-time investment
                </span>
                <h1 data-aos="fade-right" data-aos-delay="100"
                    class="max-w-4xl text-4xl md:text-5xl font-[400] tracking-[-0.05em] leading-[1.05] text-white">
                    Build, Launch & Own an Enterprise <br class="hidden md:block">
                    <span class="italic font-serif">Core Banking Platform Without Compromise </span>
                </h1>
                <p data-aos="fade-right" data-aos-delay="300"
                    class="mt-4 max-w-2xl text-sm text-white/70 font-mono leading-relaxed">
                    Everything you need to operate a modern financial institution from deposits and lending to branches and digital banking on a platform that gives you complete ownership, flexibility, and scalability.
                </p>
                <div data-aos="fade-up" data-aos-delay="500" class="mt-6 flex flex-wrap gap-4">
                    <a href="checkout?product=core-banking"
                        class="group relative inline-flex items-center gap-3 px-8 py-4 bg-brandOrange text-white rounded-full transition-all duration-300 hover:scale-[1.05] shadow-[0_15px_30px_-5px_rgba(255,138,0,0.4)]">
                        <span class="font-semibold text-sm tracking-tight">Acquire Core Banking</span>
                        <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
                    </a>
                    <a href="get-demo?product=core-banking"
                        class="group relative inline-flex items-center gap-3 px-8 py-4 bg-[#111] text-white rounded-full transition-all duration-300 hover:scale-[1.05] border border-white/10">
                        <i data-lucide="play-circle" class="w-4 h-4 text-brandOrange"></i>
                        <span class="font-[500] text-sm tracking-tight">Schedule Live Demo</span>
                    </a>
                </div>
            </div>
        </section>

        <!-- Ultra-Sleek Post-Hero Feature Ribbon -->
        <section class="py-10 px-[5%] bg-white border-b border-zinc-100 overflow-hidden">
            <div class="max-w-[1100px] mx-auto">
                <div class="flex flex-wrap items-center justify-between gap-y-6 gap-x-8">

                    <!-- Item 1 -->
                    <div class="flex items-center gap-3 group cursor-default" data-aos="fade-up" data-aos-delay="0">
                        <div class="w-7 h-7 rounded-full bg-zinc-50 border border-zinc-100/80 flex items-center justify-center transition-all duration-300 group-hover:bg-royal group-hover:border-royal group-hover:scale-105">
                            <i class="ri-shield-check-line text-royal group-hover:text-brandOrange transition-colors text-xs"></i>
                        </div>
                        <span class="text-xs font-medium uppercase tracking-[0.15em] text-royal/80 group-hover:text-royal transition-colors">
                            Lifetime Ownership
                        </span>
                    </div>

                    <!-- Divider Line (Hidden on Mobile) -->
                    <div class="hidden md:block h-3 w-[1px] bg-zinc-200"></div>

                    <!-- Item 2 -->
                    <div class="flex items-center gap-3 group cursor-default" data-aos="fade-up" data-aos-delay="100">
                        <div class="w-7 h-7 rounded-full bg-zinc-50 border border-zinc-100/80 flex items-center justify-center transition-all duration-300 group-hover:bg-royal group-hover:border-royal group-hover:scale-105">
                            <i class="ri-code-s-slash-line text-royal group-hover:text-brandOrange transition-colors text-xs"></i>
                        </div>
                        <span class="text-xs font-medium uppercase tracking-[0.15em] text-royal/80 group-hover:text-royal transition-colors">
                            Source Code Included
                        </span>
                    </div>

                    <!-- Divider Line (Hidden on Mobile) -->
                    <div class="hidden md:block h-3 w-[1px] bg-zinc-200"></div>

                    <!-- Item 3 -->
                    <div class="flex items-center gap-3 group cursor-default" data-aos="fade-up" data-aos-delay="200">
                        <div class="w-7 h-7 rounded-full bg-zinc-50 border border-zinc-100/80 flex items-center justify-center transition-all duration-300 group-hover:bg-royal group-hover:border-royal group-hover:scale-105">
                            <i class="ri-terminal-box-line text-royal group-hover:text-brandOrange transition-colors text-xs"></i>
                        </div>
                        <span class="text-xs font-medium uppercase tracking-[0.15em] text-royal/80 group-hover:text-royal transition-colors">
                            API Ready
                        </span>
                    </div>

                    <!-- Divider Line (Hidden on Mobile) -->
                    <div class="hidden md:block h-3 w-[1px] bg-zinc-200"></div>

                    <!-- Item 4 -->
                    <div class="flex items-center gap-3 group cursor-default" data-aos="fade-up" data-aos-delay="300">
                        <div class="w-7 h-7 rounded-full bg-zinc-50 border border-zinc-100/80 flex items-center justify-center transition-all duration-300 group-hover:bg-royal group-hover:border-royal group-hover:scale-105">
                            <i class="ri-global-line text-royal group-hover:text-brandOrange transition-colors text-xs"></i>
                        </div>
                        <span class="text-xs font-medium uppercase tracking-[0.15em] text-royal/80 group-hover:text-royal transition-colors">
                            Multi-Currency
                        </span>
                    </div>

                </div>
            </div>
        </section>


        <!-- The Architecture Friction Section -->
        <section class="py-24 px-[5%] bg-white overflow-hidden" id="problem">
            <div class="max-w-7xl mx-auto">

                <!-- Editorial Header Block -->
                <div class="grid md:grid-cols-12 gap-8 md:gap-16 items-start mb-24">
                    <div class="md:col-span-5" data-aos="fade-up">
                        <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-electric block mb-4">The Architectural Ceiling</span>
                        <h2 class="text-4xl md:text-[44px] font-[400] tracking-tighter text-royal leading-[1.1]">
                            Most institutions never outgrow their <span class="italic font-serif text-brandOrange">first software bottleneck.</span>
                        </h2>
                    </div>
                    <div class="md:col-span-7 pt-2 md:pt-8 text-zinc-500 text-sm md:text-base leading-relaxed font-[300]" data-aos="fade-up" data-aos-delay="100">
                        Small banks, cooperatives, and fintechs often launch on disconnected infrastructure. Customer records sit stranded in spreadsheets, accounting runs blind elsewhere, and compliance teams burn hours manually matching transactions.
                        <span class="block mt-4 font-normal text-royal">
                            As volume accelerates, operational debt mounts, service breaks, and growth hits an invisible wall. Nesvra consolidates your entire institution into a single engineering core.
                        </span>
                    </div>
                </div>

                <!-- High-Fidelity Friction Matrix -->
                <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-3">

                    <!-- Friction 1 -->
                    <div class="group relative p-8 rounded-[20px] bg-zinc-50/50 border border-zinc-100/80 transition-all duration-500 hover:bg-royal overflow-hidden" data-aos="fade-up" data-aos-delay="0">
                        <div class="relative z-10 flex flex-col h-full justify-between min-h-[160px]">
                            <div>
                                <div class="w-9 h-9 rounded-xl bg-white border border-zinc-100 flex items-center justify-center mb-6 group-hover:bg-white/10 group-hover:border-white/10 transition-all">
                                    <i class="ri-table-line text-royal group-hover:text-brandOrange text-base transition-colors"></i>
                                </div>
                                <h3 class="text-base font-semibold tracking-tight text-royal group-hover:text-white transition-colors duration-300 mb-2">
                                    Spreadsheet Silos
                                </h3>
                                <p class="text-[13px] text-zinc-500 group-hover:text-white/70 leading-relaxed font-[300]">
                                    Customer records and ledgers scattered across unverified sheets, stripping away your single source of truth.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Friction 2 -->
                    <div class="group relative p-8 rounded-[20px] bg-zinc-50/50 border border-zinc-100/80 transition-all duration-500 hover:bg-royal overflow-hidden" data-aos="fade-up" data-aos-delay="100">
                        <div class="relative z-10 flex flex-col h-full justify-between min-h-[160px]">
                            <div>
                                <div class="w-9 h-9 rounded-xl bg-white border border-zinc-100 flex items-center justify-center mb-6 group-hover:bg-white/10 group-hover:border-white/10 transition-all">
                                    <i class="ri-calculator-line text-royal group-hover:text-brandOrange text-base transition-colors"></i>
                                </div>
                                <h3 class="text-base font-semibold tracking-tight text-royal group-hover:text-white transition-colors duration-300 mb-2">
                                    Manual Reconciliation
                                </h3>
                                <p class="text-[13px] text-zinc-500 group-hover:text-white/70 leading-relaxed font-[300]">
                                    Finance and compliance teams forced to match transaction rows by hand, bleeding hours of core engineering time.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Friction 3 -->
                    <div class="group relative p-8 rounded-[20px] bg-zinc-50/50 border border-zinc-100/80 transition-all duration-500 hover:bg-royal overflow-hidden" data-aos="fade-up" data-aos-delay="200">
                        <div class="relative z-10 flex flex-col h-full justify-between min-h-[160px]">
                            <div>
                                <div class="w-9 h-9 rounded-xl bg-white border border-zinc-100 flex items-center justify-center mb-6 group-hover:bg-white/10 group-hover:border-white/10 transition-all">
                                    <i class="ri-hourglass-2-line text-royal group-hover:text-brandOrange text-base transition-colors"></i>
                                </div>
                                <h3 class="text-base font-semibold tracking-tight text-royal group-hover:text-white transition-colors duration-300 mb-2">
                                    Stalled Loan Cycles
                                </h3>
                                <p class="text-[13px] text-zinc-500 group-hover:text-white/70 leading-relaxed font-[300]">
                                    Approvals, dynamic scoring, and capital disbursements taking full operational days instead of automated minutes.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Friction 4 -->
                    <div class="group relative p-8 rounded-[20px] bg-zinc-50/50 border border-zinc-100/80 transition-all duration-500 hover:bg-royal overflow-hidden" data-aos="fade-up" data-aos-delay="300">
                        <div class="relative z-10 flex flex-col h-full justify-between min-h-[160px]">
                            <div>
                                <div class="w-9 h-9 rounded-xl bg-white border border-zinc-100 flex items-center justify-center mb-6 group-hover:bg-white/10 group-hover:border-white/10 transition-all">
                                    <i class="ri-puzzle-line text-royal group-hover:text-brandOrange text-base transition-colors"></i>
                                </div>
                                <h3 class="text-base font-semibold tracking-tight text-royal group-hover:text-white transition-colors duration-300 mb-2">
                                    Fragmented SaaS Stacks
                                </h3>
                                <p class="text-[13px] text-zinc-500 group-hover:text-white/70 leading-relaxed font-[300]">
                                    An expensive web of disconnected tooling subscriptions that fail to talk to or sync data natively.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Friction 5 -->
                    <div class="group relative p-8 rounded-[20px] bg-zinc-50/50 border border-zinc-100/80 transition-all duration-500 hover:bg-royal overflow-hidden" data-aos="fade-up" data-aos-delay="400">
                        <div class="relative z-10 flex flex-col h-full justify-between min-h-[160px]">
                            <div>
                                <div class="w-9 h-9 rounded-xl bg-white border border-zinc-100 flex items-center justify-center mb-6 group-hover:bg-white/10 group-hover:border-white/10 transition-all">
                                    <i class="ri-line-chart-line text-royal group-hover:text-brandOrange text-base transition-colors"></i>
                                </div>
                                <h3 class="text-base font-semibold tracking-tight text-royal group-hover:text-white transition-colors duration-300 mb-2">
                                    Linear Cost Scaling
                                </h3>
                                <p class="text-[13px] text-zinc-500 group-hover:text-white/70 leading-relaxed font-[300]">
                                    Operational overhead and resource consumption outrunning actual business margins as transactional volumes rise.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Friction 6 -->
                    <div class="group relative p-8 rounded-[20px] bg-zinc-50/50 border border-zinc-100/80 transition-all duration-500 hover:bg-royal overflow-hidden" data-aos="fade-up" data-aos-delay="500">
                        <div class="relative z-10 flex flex-col h-full justify-between min-h-[160px]">
                            <div>
                                <div class="w-9 h-9 rounded-xl bg-white border border-zinc-100 flex items-center justify-center mb-6 group-hover:bg-white/10 group-hover:border-white/10 transition-all">
                                    <i class="ri-prohibited-line text-royal group-hover:text-brandOrange text-base transition-colors"></i>
                                </div>
                                <h3 class="text-base font-semibold tracking-tight text-royal group-hover:text-white transition-colors duration-300 mb-2">
                                    The Software Ceiling
                                </h3>
                                <p class="text-[13px] text-zinc-500 group-hover:text-white/70 leading-relaxed font-[300]">
                                    Your foundation infrastructure fundamentally becomes the primary inhibitor of your financial enterprise expansion.
                                </p>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </section>



        <!-- The Operational Outcome Transformation Section -->
        <section class="py-24 px-[5%] bg-zinc-50/40 border-t border-b border-zinc-100 overflow-hidden" id="outcome">
            <div class="max-w-7xl mx-auto">

                <!-- Section Header Module -->
                <div class="max-w-2xl mb-20" data-aos="fade-up">
                    <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-electric block mb-4">The Shift</span>
                    <h2 class="text-4xl md:text-[44px] font-[400] tracking-tighter text-royal leading-tight mb-6">
                        The Outcome. <br />
                        <span class="italic font-serif text-brandOrange">What changes after deployment.</span>
                    </h2>
                    <p class="text-zinc-500 text-sm md:text-base leading-relaxed font-[300]">
                        The exact same institution, now running seamlessly on one unified ledger engine instead of an expensive patchwork of disconnected tools. Manual overhead gives way to automated, real-time core processing—and growth completely stops being a software limitation.
                    </p>
                </div>

                <!-- Comparative Transformation Matrix Board -->
                <div class="grid md:grid-cols-2 gap-8 md:gap-0 bg-white border border-zinc-200/80 rounded-[32px] shadow-[0_32px_64px_-24px_rgba(8,31,92,0.04)] overflow-hidden" data-aos="fade-up" data-aos-delay="100">

                    <!-- BEFORE STACK: Legacy Friction Block -->
                    <div class="p-8 md:p-12 bg-zinc-50/50 flex flex-col justify-between">
                        <div>
                            <div class="flex items-center gap-3 mb-8">
                                <div class="w-8 h-8 rounded-lg bg-zinc-200/60 flex items-center justify-center">
                                    <i class="ri-close-circle-line text-zinc-500 text-base"></i>
                                </div>
                                <h3 class="text-xs font-mono font-bold tracking-[0.2em] text-zinc-400 uppercase">
                                    Before Nesvra
                                </h3>
                            </div>

                            <!-- Friction Rows -->
                            <div class="space-y-5">
                                <div class="flex items-start gap-4 opacity-75">
                                    <i class="ri-subtract-line text-zinc-400 mt-0.5 text-sm flex-shrink-0"></i>
                                    <div class="space-y-0.5">
                                        <h4 class="text-[14px] font-medium text-royal/90">Manual reconciliation</h4>
                                        <p class="text-[12px] text-zinc-400 font-[300]">Teams spend hours parsing rows and matching actions by hand.</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4 opacity-75">
                                    <i class="ri-subtract-line text-zinc-400 mt-0.5 text-sm flex-shrink-0"></i>
                                    <div class="space-y-0.5">
                                        <h4 class="text-[14px] font-medium text-royal/90">Multiple software subscriptions</h4>
                                        <p class="text-[12px] text-zinc-400 font-[300]">Paying for disparate specialized SaaS products that fail to communicate.</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4 opacity-75">
                                    <i class="ri-subtract-line text-zinc-400 mt-0.5 text-sm flex-shrink-0"></i>
                                    <div class="space-y-0.5">
                                        <h4 class="text-[14px] font-medium text-royal/90">Slow account opening</h4>
                                        <p class="text-[12px] text-zinc-400 font-[300]">Onboarding cycles and compliance vetting takes up to days, lowering conversion.</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4 opacity-75">
                                    <i class="ri-subtract-line text-zinc-400 mt-0.5 text-sm flex-shrink-0"></i>
                                    <div class="space-y-0.5">
                                        <h4 class="text-[14px] font-medium text-royal/90">Limited analytics & reporting</h4>
                                        <p class="text-[12px] text-zinc-400 font-[300]">Assembling institutional insight demands slow manual report creation layers.</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4 opacity-75">
                                    <i class="ri-subtract-line text-zinc-400 mt-0.5 text-sm flex-shrink-0"></i>
                                    <div class="space-y-0.5">
                                        <h4 class="text-[14px] font-medium text-royal/90">Fragmented customer profiles</h4>
                                        <p class="text-[12px] text-zinc-400 font-[300]">Identity metrics, ledger balance records, and data vectors sit stranded.</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4 opacity-75">
                                    <i class="ri-subtract-line text-zinc-400 mt-0.5 text-sm flex-shrink-0"></i>
                                    <div class="space-y-0.5">
                                        <h4 class="text-[14px] font-medium text-royal/90">High operational costs</h4>
                                        <p class="text-[12px] text-zinc-400 font-[300]">Resource consumption moves dynamically parallel alongside balance scale lines.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-12 pt-6 border-t border-zinc-200/60 hidden md:block">
                            <span class="text-xs text-zinc-400 font-[300]">Fragile system mechanics</span>
                        </div>
                    </div>

                    <!-- AFTER STACK: Premium Velocity Core Block -->
                    <div class="p-8 md:p-12 bg-royal relative overflow-hidden flex flex-col justify-between border-t md:border-t-0 md:border-l border-zinc-800">
                        <!-- Subtle Gradient Accent Overlays -->
                        <div class="absolute -right-24 -top-24 w-64 h-64 rounded-full bg-brandOrange/10 blur-[80px] pointer-events-none"></div>
                        <div class="absolute -left-24 -bottom-24 w-64 h-64 rounded-full bg-electric/10 blur-[80px] pointer-events-none"></div>

                        <div class="relative z-10">
                            <div class="flex items-center justify-between mb-8">
                                <div class="flex items-center gap-3">
                                    <div class="w-8 h-8 rounded-lg bg-white/10 border border-white/10 flex items-center justify-center">
                                        <i class="ri-checkbox-circle-line text-brandOrange text-base"></i>
                                    </div>
                                    <h3 class="text-xs font-mono font-bold tracking-[0.2em] text-white/60 uppercase">
                                        After Nesvra
                                    </h3>
                                </div>
                                <span class="font-mono text-[9px] uppercase tracking-widest text-brandOrange border border-brandOrange/20 px-2 py-0.5 bg-brandOrange/5 rounded">
                                    Optimized Rails
                                </span>
                            </div>

                            <!-- Optimized Capability Rows -->
                            <div class="space-y-5">
                                <div class="flex items-start gap-4 group">
                                    <div class="w-5 h-5 rounded-full bg-brandOrange/10 border border-brandOrange/20 flex items-center justify-center mt-0.5 flex-shrink-0 transition-transform duration-300 group-hover:scale-110">
                                        <i class="ri-check-line text-brandOrange text-xs"></i>
                                    </div>
                                    <div class="space-y-0.5">
                                        <h4 class="text-[14px] font-medium text-white transition-colors duration-300 group-hover:text-brandOrange">Real-time processing</h4>
                                        <p class="text-[12px] text-white/60 font-[300]">Transactions resolve, execute, and post ledger updates instantly sub-second.</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4 group">
                                    <div class="w-5 h-5 rounded-full bg-brandOrange/10 border border-brandOrange/20 flex items-center justify-center mt-0.5 flex-shrink-0 transition-transform duration-300 group-hover:scale-110">
                                        <i class="ri-check-line text-brandOrange text-xs"></i>
                                    </div>
                                    <div class="space-y-0.5">
                                        <h4 class="text-[14px] font-medium text-white transition-colors duration-300 group-hover:text-brandOrange">Single integrated platform</h4>
                                        <p class="text-[12px] text-white/60 font-[300]">Your entire financial pipeline hosted within a single engineered infrastructure ecosystem.</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4 group">
                                    <div class="w-5 h-5 rounded-full bg-brandOrange/10 border border-brandOrange/20 flex items-center justify-center mt-0.5 flex-shrink-0 transition-transform duration-300 group-hover:scale-110">
                                        <i class="ri-check-line text-brandOrange text-xs"></i>
                                    </div>
                                    <div class="space-y-0.5">
                                        <h4 class="text-[14px] font-medium text-white transition-colors duration-300 group-hover:text-brandOrange">Digital onboarding</h4>
                                        <p class="text-[12px] text-white/60 font-[300]">Verify users instantly via native built-in KYC matching configurations.</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4 group">
                                    <div class="w-5 h-5 rounded-full bg-brandOrange/10 border border-brandOrange/20 flex items-center justify-center mt-0.5 flex-shrink-0 transition-transform duration-300 group-hover:scale-110">
                                        <i class="ri-check-line text-brandOrange text-xs"></i>
                                    </div>
                                    <div class="space-y-0.5">
                                        <h4 class="text-[14px] font-medium text-white transition-colors duration-300 group-hover:text-brandOrange">Instant reporting</h4>
                                        <p class="text-[12px] text-white/60 font-[300]">Run deep balance updates and technical statement auditing metrics in real-time.</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4 group">
                                    <div class="w-5 h-5 rounded-full bg-brandOrange/10 border border-brandOrange/20 flex items-center justify-center mt-0.5 flex-shrink-0 transition-transform duration-300 group-hover:scale-110">
                                        <i class="ri-check-line text-brandOrange text-xs"></i>
                                    </div>
                                    <div class="space-y-0.5">
                                        <h4 class="text-[14px] font-medium text-white transition-colors duration-300 group-hover:text-brandOrange">Unified customer profiles</h4>
                                        <p class="text-[12px] text-white/60 font-[300]">A holistic, encrypted overview of user attributes mapping explicitly across all products.</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-4 group">
                                    <div class="w-5 h-5 rounded-full bg-brandOrange/10 border border-brandOrange/20 flex items-center justify-center mt-0.5 flex-shrink-0 transition-transform duration-300 group-hover:scale-110">
                                        <i class="ri-check-line text-brandOrange text-xs"></i>
                                    </div>
                                    <div class="space-y-0.5">
                                        <h4 class="text-[14px] font-medium text-white transition-colors duration-300 group-hover:text-brandOrange">Automated operations</h4>
                                        <p class="text-[12px] text-white/60 font-[300]">System mechanics manage heavy task loops dynamically, keeping margin costs entirely flat.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-12 pt-6 border-t border-white/10 text-right relative z-10 hidden md:block">
                            <span class="text-xs text-white/40 font-mono">Future-Proof Architecture Engine</span>
                        </div>
                    </div>

                </div>

            </div>
        </section>


        <!-- The Launchable Products Grid Section -->
        <section class="py-24 px-[5%] bg-white overflow-hidden" id="products">
            <div class="max-w-[1200px] mx-auto cursor-pointer">

                <!-- Section Header Module -->
                <div class="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-24">
                    <div class="max-w-2xl">
                        <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange block mb-4">Deployable Modules</span>
                        <h2 class="text-4xl md:text-[2.5rem] font-[400] tracking-tighter text-royal leading-tight">
                            Products you can launch. <br />
                            <span class="italic font-serif text-soft">Build exactly what your market needs.</span>
                        </h2>
                    </div>
                    <p class="text-zinc-500 text-sm md:text-base leading-relaxed font-[300] max-w-sm md:mb-2">
                        Configure flexible savings protocols, custom lending lines, institutional treasury, automated payments, and modern delivery channels—all spinning out of one native core engine.
                    </p>
                </div>

                <!-- Interactive Catalog Matrix Grid with Hover-Focus Isolation Blur -->
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 group/grid">

                    <!-- MODULE 1: SAVINGS ENGINE -->
                    <div class="p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.06)]">
                        <div>
                            <div class="flex items-center mb-2 gap-3">
                                <i class="ri-bank-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal ">Savings Products</h3>
                            </div>

                            <p class="text-xs text-zinc-400 font-[300] mb-8">Deploy high-yield, flexible, or locked liability instruments with customizable automated interest rules.</p>

                            <!-- Nested Token Badges -->
                            <div class="flex flex-wrap gap-2">
                                <span class="text-[12px] text-zinc-600 bg-white border border-zinc-200 px-3 py-1 rounded-full font-[300] transition-colors group-hover:border-zinc-300">Interest savings</span>
                                <span class="text-[12px] text-zinc-600 bg-white border border-zinc-200 px-3 py-1 rounded-full font-[300] transition-colors group-hover:border-zinc-300">Target savings</span>
                                <span class="text-[12px] text-zinc-600 bg-white border border-zinc-200 px-3 py-1 rounded-full font-[300] transition-colors group-hover:border-zinc-300">Fixed deposits</span>
                                <span class="text-[12px] text-zinc-600 bg-white border border-zinc-200 px-3 py-1 rounded-full font-[300] transition-colors group-hover:border-zinc-300">Children savings</span>
                                <span class="text-[12px] text-zinc-600 bg-white border border-zinc-200 px-3 py-1 rounded-full font-[300] transition-colors group-hover:border-zinc-300">Joint structures</span>
                                <span class="text-[12px] text-zinc-600 bg-white border border-zinc-200 px-3 py-1 rounded-full font-[300] transition-colors group-hover:border-zinc-300">Cooperative pools</span>
                                <span class="text-[12px] text-zinc-600 bg-white border border-zinc-200 px-3 py-1 rounded-full font-[300] transition-colors group-hover:border-zinc-300">Salary accounts</span>
                            </div>
                        </div>
                    </div>

                    <!-- MODULE 2: LENDING CORE -->
                    <div class="p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.06)] lg:col-span-2">
                        <div>
                            <div class="flex items-center mb-2 gap-3">
                                <i class="ri-hand-coin-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">Lending Protocols</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] mb-8">Asset credit lines tailored for instant underwriting. Configure unique dynamic amortization metrics, global risk parameters, and automatic collections pipelines.</p>

                            <!-- Nested Token Badges Layout -->
                            <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                                <div class="bg-white border border-zinc-100 p-3 rounded-xl flex items-center gap-2 transition-colors group-hover:border-zinc-200">
                                    <span class="w-1.5 h-1.5 rounded-full bg-brandOrange"></span>
                                    <span class="text-[13px] font-medium text-royal/90">Consumer loans</span>
                                </div>
                                <div class="bg-white border border-zinc-100 p-3 rounded-xl flex items-center gap-2 transition-colors group-hover:border-zinc-200">
                                    <span class="w-1.5 h-1.5 rounded-full bg-brandOrange"></span>
                                    <span class="text-[13px] font-medium text-royal/90">Salary advances</span>
                                </div>
                                <div class="bg-white border border-zinc-100 p-3 rounded-xl flex items-center gap-2 transition-colors group-hover:border-zinc-200">
                                    <span class="w-1.5 h-1.5 rounded-full bg-brandOrange"></span>
                                    <span class="text-[13px] font-medium text-royal/90">Payroll lending</span>
                                </div>
                                <div class="bg-white border border-zinc-100 p-3 rounded-xl flex items-center gap-2 transition-colors group-hover:border-zinc-200">
                                    <span class="w-1.5 h-1.5 rounded-full bg-brandOrange"></span>
                                    <span class="text-[13px] font-medium text-royal/90">SME credit lines</span>
                                </div>
                                <div class="bg-white border border-zinc-100 p-3 rounded-xl flex items-center gap-2 transition-colors group-hover:border-zinc-200">
                                    <span class="w-1.5 h-1.5 rounded-full bg-brandOrange"></span>
                                    <span class="text-[13px] font-medium text-royal/90">Mortgage loans</span>
                                </div>
                                <div class="bg-white border border-zinc-100 p-3 rounded-xl flex items-center gap-2 transition-colors group-hover:border-zinc-200">
                                    <span class="w-1.5 h-1.5 rounded-full bg-brandOrange"></span>
                                    <span class="text-[13px] font-medium text-royal/90">Agricultural credit</span>
                                </div>
                                <div class="bg-white/40 border border-zinc-100/60 p-3 rounded-xl sm:col-span-3">
                                    <span class="text-[12px] text-zinc-400 font-[300]">Includes structural frameworks for: Micro-credit variants, Group lending pools, and collateral tracking vectors.</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- MODULE 3: TREASURY SUITE -->
                    <div class="p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.06)]">
                        <div>
                            <div class="flex items-center mb-2 gap-3">
                                <i class="ri-safe-2-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">Treasury & Wealth</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] mb-8">Manage high-ticket institutional balances, fixed investments, and programmatic fund positions securely.</p>

                            <div class="space-y-2">
                                <div class="bg-white px-4 py-2.5 rounded-xl border border-zinc-200/60 flex justify-between items-center text-[12px] text-royal transition-colors group-hover:border-zinc-300">
                                    <span>Fixed institutional placements</span>
                                    <i class="ri-arrow-right-up-line text-zinc-400"></i>
                                </div>
                                <div class="bg-white px-4 py-2.5 rounded-xl border border-zinc-200/60 flex justify-between items-center text-[12px] text-royal transition-colors group-hover:border-zinc-300">
                                    <span>Money market pipelines</span>
                                    <i class="ri-arrow-right-up-line text-zinc-400"></i>
                                </div>
                                <div class="bg-white px-4 py-2.5 rounded-xl border border-zinc-200/60 flex justify-between items-center text-[12px] text-royal transition-colors group-hover:border-zinc-300">
                                    <span>Corporate investment layers</span>
                                    <i class="ri-arrow-right-up-line text-zinc-400"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- MODULE 4: PAYMENTS & BALANCES -->
                    <div class="p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.06)]">
                        <div>
                            <div class="flex items-center mb-2 gap-3">
                                <i class="ri-wallet-3-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">Payment & Accounts</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] mb-8">Generate transactional rails effortlessly. Issue virtual accounts instantly and process transactional ledgers at scale.</p>

                            <div class="flex flex-wrap gap-1.5">
                                <span class="text-[11px] font-mono tracking-tight bg-royal text-white px-2.5 py-1 rounded">Current Accounts</span>
                                <span class="text-[11px] font-mono tracking-tight bg-zinc-200 text-royal px-2.5 py-1 rounded">Virtual accounts</span>
                                <span class="text-[11px] font-mono tracking-tight bg-zinc-200 text-royal px-2.5 py-1 rounded">NIP / Instant Transfers</span>
                                <span class="text-[11px] font-mono tracking-tight bg-zinc-200 text-royal px-2.5 py-1 rounded">Card Issuance</span>
                                <span class="text-[11px] font-mono tracking-tight bg-zinc-200 text-royal px-2.5 py-1 rounded">Digital Wallets</span>
                                <span class="text-[11px] font-mono tracking-tight bg-zinc-200 text-royal px-2.5 py-1 rounded">Merchant nodes</span>
                            </div>
                        </div>
                    </div>

                    <!-- MODULE 5: CHANNELS LAYER -->
                    <div class="p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.06)]">
                        <div>
                            <div class="flex items-center mb-2 gap-3">
                                <i class="ri-cpu-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">Banking Channels</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] mb-8">Deliver services into your end-user interfaces seamlessly via our optimized, secure interaction networks.</p>

                            <div class="space-y-1.5">
                                <div class="flex items-center justify-between text-[13px] text-royal/90 py-1 border-b border-zinc-100">
                                    <span>Agency & Agent Banking Infrastructure</span>
                                    <span class="text-[10px] font-mono text-zinc-400">POS Native</span>
                                </div>
                                <div class="flex items-center justify-between text-[13px] text-royal/90 py-1 border-b border-zinc-100">
                                    <span>Mobile & Web Internet Banking applications</span>
                                    <span class="text-[10px] font-mono text-zinc-400">SDKs</span>
                                </div>
                                <div class="flex items-center justify-between text-[13px] text-royal/90 py-1 border-b border-zinc-100">
                                    <span>Interactive USSD & WhatsApp Engines</span>
                                    <span class="text-[10px] font-mono text-zinc-400">Conversational</span>
                                </div>
                                <div class="flex items-center justify-between text-[13px] text-royal/90 py-1">
                                    <span>Institutional Merchant Web Portals</span>
                                    <span class="text-[10px] font-mono text-zinc-400">B2B Core</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- Sticky Bottom Visual Micro-Prompt Anchor -->
                <div class="mt-16 text-center border-t border-zinc-100 pt-12">
                    <p class="text-xs font-mono text-zinc-400 tracking-wider">
                        All parameters accessible natively over RESTful APIs. Designed to spin up in minutes.
                    </p>
                </div>

            </div>
        </section>



        <section class="py-24 px-[5%] bg-white overflow-hidden" id="product-pillars">
            <div class="max-w-[1200px] mx-auto">

                <!-- Editorial Header -->
                <div class="mb-12">
                    <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange block mb-2">Financial Core Modules</span>
                    <h2 class="text-4xl md:text-[2.5rem] font-[400] tracking-tighter text-royal leading-tight mb-3">
                        Banks buy products, not modules.
                    </h2>
                    <p class="text-zinc-500 text-base max-w-xl leading-relaxed">
                        Launch any of these directly on the Nesvra platform, pre-configured for your regional market, compliance rules, and risk appetite.
                    </p>
                </div>

                <!-- Product Pillar Grid -->
                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">

                    <!-- Pillar 1: Deposits & Liability -->
                    <div class="p-8 border border-zinc-200 rounded-[24px] hover:border-royal transition-all duration-300">
                        <div class="flex items-center gap-3 mb-8">
                            <i class="ri-bank-line text-brandOrange text-xl"></i>
                            <h3 class="text-sm font-semibold text-royal uppercase tracking-wider">Liability</h3>
                        </div>
                        <ul class="space-y-4 text-sm text-zinc-500 font-[300]">
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Savings Accounts</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Current Accounts</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Fixed Deposits</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Target Savings</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Salary Accounts</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Cooperative Savings</li>
                        </ul>
                    </div>

                    <!-- Pillar 2: Lending & Credit -->
                    <div class="p-8 border border-zinc-200 rounded-[24px] hover:border-royal transition-all duration-300">
                        <div class="flex items-center gap-3 mb-8">
                            <i class="ri-hand-coin-line text-brandOrange text-xl"></i>
                            <h3 class="text-sm font-semibold text-royal uppercase tracking-wider">Credit</h3>
                        </div>
                        <ul class="space-y-4 text-sm text-zinc-500 font-[300]">
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Mortgage</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Payroll Loans</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Consumer Loans</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> SME Loans</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Group Lending</li>
                        </ul>
                    </div>

                    <!-- Pillar 3: Payments & Wealth -->
                    <div class="p-8 border border-zinc-200 rounded-[24px] hover:border-royal transition-all duration-300">
                        <div class="flex items-center gap-3 mb-8">
                            <i class="ri-wallet-3-line text-brandOrange text-xl"></i>
                            <h3 class="text-sm font-semibold text-royal uppercase tracking-wider">Payments</h3>
                        </div>
                        <ul class="space-y-4 text-sm text-zinc-500 font-[300]">
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Merchant Accounts</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Cards Issuance</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Digital Wallets</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Escrow Services</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Treasury Products</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Investment Accounts</li>
                        </ul>
                    </div>

                    <!-- Pillar 4: Channels & Specialized -->
                    <div class="p-8 border border-zinc-200 rounded-[24px] hover:border-royal transition-all duration-300">
                        <div class="flex items-center gap-3 mb-8">
                            <i class="ri-cpu-line text-brandOrange text-xl"></i>
                            <h3 class="text-sm font-semibold text-royal uppercase tracking-wider">Channels</h3>
                        </div>
                        <ul class="space-y-4 text-sm text-zinc-500 font-[300]">
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Agency Banking</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> Islamic Banking</li>
                            <li class="flex items-center gap-2"><i class="ri-check-line text-brandOrange"></i> API Integration</li>
                        </ul>
                    </div>

                </div>
            </div>
        </section>


        <!-- The Unified Banking Engine Architecture Board -->
        <section class="py-32 px-[5%] bg-zinc-950 text-white border-t border-zinc-900 overflow-hidden" id="architecture">
            <div class="max-w-[1200px] mx-auto">

                <!-- Premium Section Header -->
                <div class="max-w-3xl mb-24" data-aos="fade-up">
                    <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange block mb-4">Core Infrastructure Architecture</span>
                    <h2 class="text-4xl md:text-[2.7rem] font-[400] tracking-tighter text-white leading-tight mb-4">
                        One unified ledger platform. <br />
                        <span class="italic font-serif text-electric">Every single banking module native.</span>
                    </h2>
                    <p class="text-zinc-400 text-sm md:text-base leading-relaxed font-[300]">
                        A complete operational core engineered down to raw primitives. Move away from fragile external layers—configure accounts, automated lending rails, regulatory guardrails, high-volume switching engines, and intelligence suites from one continuous kernel.
                    </p>
                </div>

                <!-- High-Density Systems Matrix Block with Focus Isolation Blur -->
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5 group/grid">

                    <!-- PILLAR 1: CORE ENGINE & LEDGERS -->
                    <div class="p-8 rounded-[24px] bg-zinc-900/40 border border-zinc-800/80 transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-zinc-700/80 hover:bg-zinc-900/80">
                        <div class="flex items-center mb-6 gap-3">
                            <i class="ri-cpu-line text-brandOrange text-xl"></i>
                            <h3 class="text-base font-medium text-white">Core Engine & Ledgers</h3>
                        </div>
                        <div class="flex flex-wrap gap-1.5">
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">General Ledger</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Accounts</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Deposits</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Savings</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Fixed Deposits</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Accounting</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Interest Engine</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Charges & Fees</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Statements</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Limits</span>
                        </div>
                    </div>

                    <!-- PILLAR 2: CREDIT ARCHITECTURE -->
                    <div class="p-8 rounded-[24px] bg-zinc-900/40 border border-zinc-800/80 transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-zinc-700/80 hover:bg-zinc-900/80">
                        <div class="flex items-center mb-6 gap-3">
                            <i class="ri-hand-coin-line text-brandOrange text-xl"></i>
                            <h3 class="text-base font-medium text-white">Credit Architecture</h3>
                        </div>
                        <div class="flex flex-wrap gap-1.5">
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Loans Core</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Loan Origination</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Loan Repayment</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Credit Scoring</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Collateral Mgmt</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Provisioning Engine</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Collections</span>
                        </div>
                    </div>

                    <!-- PILLAR 3: SWITCHING, CARD & PAYMENTS RAIL -->
                    <div class="p-8 rounded-[24px] bg-zinc-900/40 border border-zinc-800/80 transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-zinc-700/80 hover:bg-zinc-900/80">
                        <div class="flex items-center mb-6 gap-3">
                            <i class="ri-exchange-funds-line text-brandOrange text-xl"></i>
                            <h3 class="text-base font-medium text-white">Transaction & Card Rails</h3>
                        </div>
                        <div class="flex flex-wrap gap-1.5">
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Transaction Switching</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Card Issuing</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Cards Management</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Card Controls</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Wallets Engine</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Bulk Payments</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Standing Orders</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Direct Debits</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Settlement System</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Dispute Mgmt</span>
                        </div>
                    </div>

                    <!-- PILLAR 4: RISK, COMPLIANCE & SECURITY -->
                    <div class="p-8 rounded-[24px] bg-zinc-900/40 border border-zinc-800/80 transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-zinc-700/80 hover:bg-zinc-900/80">
                        <div class="flex items-center mb-6 gap-3">
                            <i class="ri-shield-keyhole-line text-brandOrange text-xl"></i>
                            <h3 class="text-base font-medium text-white">Trust & Compliance</h3>
                        </div>
                        <div class="flex flex-wrap gap-1.5">
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Compliance Guard</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">AML Monitor</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Fraud Detection</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Identity Verification</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">KYC Automation</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">KYB Corporate</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Real-time Reconciliation</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Audit Logging</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Escrow Subsystems</span>
                        </div>
                    </div>

                    <!-- PILLAR 5: BUSINESS OPERATIONS & CHANNELS -->
                    <div class="p-8 rounded-[24px] bg-zinc-900/40 border border-zinc-800/80 transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-zinc-700/80 hover:bg-zinc-900/80">
                        <div class="flex items-center mb-6 gap-3">
                            <i class="ri-git-branch-line text-brandOrange text-xl"></i>
                            <h3 class="text-base font-medium text-white">Commercial Channels</h3>
                        </div>
                        <div class="flex flex-wrap gap-1.5">
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Merchant Banking</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Agency Banking</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Customer Management</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">CRM Interface</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Branch Management</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Teller Operations</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Vault Management</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Cheque Processing</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Payroll Systems</span>
                        </div>
                    </div>

                    <!-- PILLAR 6: OPEN INTERFACES, INTEL & DISTRIBUTED SYSTEMS -->
                    <div class="p-8 rounded-[24px] bg-zinc-900/40 border border-zinc-800/80 transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-zinc-700/80 hover:bg-zinc-900/80">
                        <div class="flex items-center mb-6 gap-3">
                            <i class="ri-terminal-window-line text-brandOrange text-xl"></i>
                            <h3 class="text-base font-medium text-white">Distributed Systems</h3>
                        </div>
                        <div class="flex flex-wrap gap-1.5">
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Open Banking Protocol</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">API Gateway</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Workflow Engine</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Treasury Management</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Liquidity Pooling</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Multi-Entity Matrix</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Multi-Country Config</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Multi-Currency Engine</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Maker-Checker Controls</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Developer Sandbox</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Webhooks Subsystem</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Data Export Pipelines</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Mobile Core SDKs</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Analytical Dashboards</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Regulatory Reporting</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Tax Automation</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Document Archival</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Customer Access Portals</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Admin Core Console</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Role Management Matrix</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">Real-time Notifications</span>
                            <span class="text-[11px] font-mono bg-zinc-900 text-zinc-300 border border-zinc-800 px-2.5 py-1 rounded">System Reporting Suites</span>
                        </div>
                    </div>

                </div>

                <!-- Infrastructure Status Micro-Badge Asset -->
                <div class="mt-20 flex flex-wrap items-center justify-between border-t border-zinc-900 pt-10 gap-4">
                    <p class="text-xs font-mono text-zinc-500 tracking-wider">
                        Full-stack orchestration kernel. Zero deployment dependencies.
                    </p>
                    <div class="flex items-center gap-2 text-zinc-400 font-mono text-[11px]">
                        <span class="w-2 h-2 rounded-full bg-[#9CF25C] animate-pulse"></span>
                        <span>Active Core Framework 2.4.0</span>
                    </div>
                </div>

            </div>
        </section>



        <!-- The Institutional Use Cases Board Section -->
        <section class="py-24 px-[5%] bg-white border-b border-zinc-100 overflow-hidden" id="use-cases">
            <div class="max-w-[1200px] mx-auto">

                <!-- Section Header Module -->
                <div class="max-w-3xl mb-24">
                    <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange block mb-4">Market Segmentation</span>
                    <h2 class="text-4xl md:text-[52px] font-[400] tracking-tighter text-royal leading-tight mb-6">
                        Built for the institutions <br />
                        <span class="italic font-serif text-zinc-400">that move communities.</span>
                    </h2>
                    <p class="text-zinc-500 text-sm md:text-base leading-relaxed font-[300]">
                        From a single micro-cooperative pool to a high-volume national social program—the exact same native core ledger architecture instantly adapts to configure the specific products, operational scale, and risk controls each entity requires.
                    </p>
                </div>

                <!-- Solutions Matrix Layout with Focus Isolation Blur -->
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 group/grid">

                    <!-- SOLUTION 1: COMMERCIAL BANKS -->
                    <div class="p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.06)] lg:col-span-2">
                        <div>
                            <div class="flex items-center mb-4 gap-3">
                                <i class="ri-bank-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">Commercial Banks</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] leading-relaxed mb-8 max-w-xl">
                                Orchestrate a high-volume retail or wholesale commercial enterprise natively. Seamlessly deploy complex asset structures, multi-layered treasury placement suites, high-yield liability tracking engines, and distributed branch clearing channels.
                            </p>
                        </div>
                        <div class="flex flex-wrap gap-2 pt-4 border-t border-zinc-100/60">
                            <span class="text-[11px] font-mono tracking-tight text-zinc-500 uppercase">Core Ledgers</span>
                            <span class="text-[11px] text-zinc-400 font-[300]">•</span>
                            <span class="text-[11px] font-mono tracking-tight text-zinc-500 uppercase">Treasury Placements</span>
                            <span class="text-[11px] text-zinc-400 font-[300]">•</span>
                            <span class="text-[11px] font-mono tracking-tight text-zinc-500 uppercase">Multi-Entity Rails</span>
                        </div>
                    </div>

                    <!-- SOLUTION 2: MICROFINANCE BANKS -->
                    <div class="p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.06)]">
                        <div>
                            <div class="flex items-center mb-4 gap-3">
                                <i class="ri-store-2-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">Microfinance Banks</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] leading-relaxed mb-8">
                                Stand up a production-ready, regulatory-compliant digital banking core within weeks. Securely register distributed depositors and underwrite uncollateralized borrowers from day one.
                            </p>
                        </div>
                        <div class="pt-4 border-t border-zinc-100/60">
                            <span class="text-[11px] font-mono text-brandOrange bg-brandOrange/5 border border-brandOrange/10 px-2 py-0.5 rounded">Fast-Track Engine Deployment</span>
                        </div>
                    </div>

                    <!-- SOLUTION 3: DIGITAL BANKS -->
                    <div class="p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.06)]">
                        <div>
                            <div class="flex items-center mb-4 gap-3">
                                <i class="ri-smartphone-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">Digital Banks</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] leading-relaxed mb-8">
                                Launch a scalable neobank platform natively. Configure global multi-currency account structures, instant card processing networks, and encrypted digital storage wallets without third-party ledger dependencies.
                            </p>
                        </div>
                        <div class="flex gap-2 text-[11px] font-mono text-zinc-400">
                            <span>Virtual Accounts</span><span>/</span><span>Card Issuance</span>
                        </div>
                    </div>

                    <!-- SOLUTION 4: FINTECHS -->
                    <div class="p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.06)]">
                        <div>
                            <div class="flex items-center mb-4 gap-3">
                                <i class="ri-rocket-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">Fintechs</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] leading-relaxed mb-8">
                                Embed production-grade transactional pipelines directly via robust RESTful APIs. Spin up fully compliant accounts, automated lending layers, and merchant networks natively.
                            </p>
                        </div>
                        <div class="flex gap-2 text-[11px] font-mono text-zinc-400">
                            <span>Open API Gateway</span><span>/</span><span>SDK Nodes</span>
                        </div>
                    </div>

                    <!-- SOLUTION 5: CREDIT UNIONS -->
                    <div class="p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.06)]">
                        <div>
                            <div class="flex items-center mb-4 gap-3">
                                <i class="ri-team-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">Credit Unions</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] leading-relaxed mb-8">
                                Serve thousands of members reliably within a single integrated environment. Streamline pooled capital assets, shared account hierarchies, and automated credit collections effortlessly.
                            </p>
                        </div>
                        <div class="flex gap-2 text-[11px] font-mono text-zinc-400">
                            <span>Shared Asset Nodes</span>
                        </div>
                    </div>

                    <!-- SOLUTION 6: SAVINGS GROUPS -->
                    <div class="p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.06)]">
                        <div>
                            <div class="flex items-center mb-4 gap-3">
                                <i class="ri-copper-coin-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">Savings Groups</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] leading-relaxed mb-8">
                                Deploy micro-savings frameworks, targeted accumulation engines, and group rotational payout features entirely over sovereign technology infrastructure that you own and control.
                            </p>
                        </div>
                        <div class="flex gap-2 text-[11px] font-mono text-zinc-400">
                            <span>Sovereign Storage</span>
                        </div>
                    </div>

                    <!-- SOLUTION 7: COOPERATIVES -->
                    <div class="p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.06)]">
                        <div>
                            <div class="flex items-center mb-4 gap-3">
                                <i class="ri-group-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">Cooperatives</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] leading-relaxed mb-8">
                                Completely digitize contribution cycles, localized member lending tracks, and transactional audit trails. Retract manual spreadsheets in favor of automated real-time settlement tracking.
                            </p>
                        </div>
                        <div class="flex gap-2 text-[11px] font-mono text-zinc-400">
                            <span>Ledger Automation</span>
                        </div>
                    </div>

                    <!-- SOLUTION 8: GOVERNMENT FUNDS -->
                    <div class="p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.06)]">
                        <div>
                            <div class="flex items-center mb-4 gap-3">
                                <i class="ri-government-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">Government Funds</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] leading-relaxed mb-8">
                                Execute broad national or regional financial disbursements and social safety netting programs safely with strict balance separation, instant programmatic payouts, and real-time auditable reporting.
                            </p>
                        </div>
                        <div class="flex gap-2 text-[11px] font-mono text-zinc-400">
                            <span>Auditable Ledger Nodes</span>
                        </div>
                    </div>

                    <!-- SOLUTION 9: INVESTMENT FIRMS -->
                    <div class="p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.06)]">
                        <div>
                            <div class="flex items-center mb-4 gap-3">
                                <i class="ri-line-chart-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">Investment Firms</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] leading-relaxed mb-8">
                                Manage high-ticket institutional treasury frameworks, fixed asset deployments, and high-yield wealth management products with absolute configuration granularity and compliance guardrails.
                            </p>
                        </div>
                        <div class="flex gap-2 text-[11px] font-mono text-zinc-400">
                            <span>Treasury Operations</span>
                        </div>
                    </div>

                </div>

            </div>
        </section>



        <!-- Build vs Buy Comparison Section -->
        <section class="py-24 px-[5%] bg-zinc-50 border-b border-zinc-200/40 overflow-hidden" id="build-vs-buy">
            <div class="max-w-[1100px] mx-auto">

                <!-- Section Header Module -->
                <div class="max-w-2xl mb-16" data-aos="fade-up">
                    <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange block mb-4">Financial Decision Framework</span>
                    <h2 class="text-3xl md:text-[40px] font-[400] tracking-tighter text-royal leading-tight mb-4">
                        Building in-house vs. buying Nesvra
                    </h2>
                    <p class="text-zinc-500 text-sm font-[300] leading-relaxed">
                        A transparent architectural comparison evaluating total capital expenditure, development velocity, and long-term tech stack sovereignty.
                    </p>
                </div>

                <!-- Premium Financial Matrix Table Container -->
                <div class="w-full overflow-x-auto border border-zinc-200 rounded-2xl bg-white shadow-sm" data-aos="fade-up" data-aos-delay="100">
                    <table class="w-full text-left border-collapse min-w-[650px]">
                        <thead>
                            <tr class="border-b border-zinc-200 bg-zinc-50/70">
                                <th class="p-5 font-mono text-[11px] uppercase tracking-wider text-zinc-400 font-medium w-[40%]">Evaluation Vector</th>
                                <th class="p-5 font-mono text-[11px] uppercase tracking-wider text-zinc-400 font-medium w-[30%]">Building In-House</th>
                                <th class="p-5 font-mono text-[11px] uppercase tracking-wider text-brandOrange font-semibold w-[30%] bg-zinc-50/40">Deploying Nesvra</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-zinc-100 text-[14px]">
                            <!-- Row 1: Engineering Team -->
                            <tr class="hover:bg-zinc-50/40 transition-colors">
                                <td class="p-5 font-medium text-royal">Engineering Team</td>
                                <td class="p-5 text-zinc-500 font-[300]">$180,000 / year</td>
                                <td class="p-5 text-royal font-medium bg-zinc-50/10">Included</td>
                            </tr>
                            <!-- Row 2: Core banking software -->
                            <tr class="hover:bg-zinc-50/40 transition-colors">
                                <td class="p-5 font-medium text-royal">Core Banking Software</td>
                                <td class="p-5 text-zinc-500 font-[300]">Build from scratch</td>
                                <td class="p-5 text-royal font-medium bg-zinc-50/10">Included</td>
                            </tr>
                            <!-- Row 3: Mobile banking -->
                            <tr class="hover:bg-zinc-50/40 transition-colors">
                                <td class="p-5 font-medium text-royal">Mobile Banking</td>
                                <td class="p-5 text-zinc-500 font-[300]">Extra development overhead</td>
                                <td class="p-5 text-royal font-medium bg-zinc-50/10">Included</td>
                            </tr>
                            <!-- Row 4: API documentation -->
                            <tr class="hover:bg-zinc-50/40 transition-colors">
                                <td class="p-5 font-medium text-royal">API Documentation</td>
                                <td class="p-5 text-zinc-500 font-[300]">Extra technical resource fees</td>
                                <td class="p-5 text-royal font-medium bg-zinc-50/10">Included</td>
                            </tr>
                            <!-- Row 5: Maintenance -->
                            <tr class="hover:bg-zinc-50/40 transition-colors">
                                <td class="p-5 font-medium text-royal">Maintenance</td>
                                <td class="p-5 text-zinc-500 font-[300]">Continuous internal sprint cycles</td>
                                <td class="p-5 text-zinc-400 font-[300] bg-zinc-50/10">Optional / Managed</td>
                            </tr>
                            <!-- Row 6: Deployment time (High Contrast Variable) -->
                            <tr class="hover:bg-zinc-50/40 transition-colors">
                                <td class="p-5 font-medium text-royal">Deployment Time</td>
                                <td class="p-5 text-zinc-500 font-[300]">12–24 months</td>
                                <td class="p-5 text-brandOrange font-semibold bg-zinc-50/30">4–8 weeks</td>
                            </tr>
                            <!-- Row 7: Source code -->
                            <tr class="hover:bg-zinc-50/40 transition-colors">
                                <td class="p-5 font-medium text-royal">Source Code</td>
                                <td class="p-5 text-zinc-500 font-[300]">Yes</td>
                                <td class="p-5 text-royal font-medium bg-zinc-50/10">Yes</td>
                            </tr>
                            <!-- Row 8: Ownership -->
                            <tr class="hover:bg-zinc-50/40 transition-colors">
                                <td class="p-5 font-medium text-royal">Ownership</td>
                                <td class="p-5 text-zinc-500 font-[300]">Yes</td>
                                <td class="p-5 text-royal font-medium bg-zinc-50/10">Yes</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Strategic Executive Summary Footnote -->
                <div class="mt-8 p-6 rounded-2xl bg-white border border-zinc-200 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 shadow-sm" data-aos="fade-up" data-aos-delay="150">
                    <div class="max-w-xl">
                        <h4 class="text-xs font-semibold uppercase tracking-wider text-royal mb-1">Architectural Takeaway</h4>
                        <p class="text-xs text-zinc-400 font-[300] leading-relaxed">
                            Building in-house demands massive capital risk and up to 2 years of layout architecture time. Nesvra offers identical source code control and ownership parameters out-of-the-box, optimized to hit production lines in weeks.
                        </p>
                    </div>
                    <a href="#contact" class="px-5 py-2.5 rounded-xl bg-royal text-white font-medium text-xs whitespace-nowrap hover:bg-royal/90 transition-all shadow-sm">
                        Request Engine Demo
                    </a>
                </div>

            </div>
        </section>

        <!-- Structural Core Platform Comparison Matrix -->
        <section class="py-24 px-[5%] bg-white border-b border-zinc-100" id="platform-comparison">
            <div class="max-w-[1100px] mx-auto">

                <!-- Section Header Module -->
                <div class="max-w-2xl mb-16">
                    <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange block mb-4">Architecture Topology Matrix</span>
                    <h2 class="text-3xl md:text-[40px] font-[400] tracking-tighter text-royal leading-tight mb-4">
                        How Nesvra compares
                    </h2>
                    <p class="text-zinc-500 text-sm font-[300] leading-relaxed">
                        Evaluating the stark infrastructural tradeoffs between completely owned platform software, a rented subscription cloud core, and custom engineering from scratch.
                    </p>
                </div>

                <!-- Premium Financial Matrix Table Container -->
                <div class="w-full overflow-x-auto border border-zinc-200/80 rounded-2xl bg-white shadow-[0_8px_30px_rgb(0,0,0,0.01)]">
                    <table class="w-full text-left border-collapse min-w-[700px]">
                        <thead>
                            <tr class="border-b border-zinc-200 bg-zinc-50/50">
                                <th class="p-5 font-mono text-[11px] uppercase tracking-wider text-zinc-400 font-medium w-[31%]">Strategic Variables</th>
                                <th class="p-5 font-mono text-[11px] uppercase tracking-wider text-brandOrange font-semibold w-[23%] bg-brandOrange/[0.02]">Nesvra</th>
                                <th class="p-5 font-mono text-[11px] uppercase tracking-wider text-zinc-400 font-medium w-[23%]">SaaS Core</th>
                                <th class="p-5 font-mono text-[11px] uppercase tracking-wider text-zinc-400 font-medium w-[23%]">In-House Build</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-zinc-100 text-[14px]">
                            <!-- Row 1: Source code -->
                            <tr class="hover:bg-zinc-50/30 transition-colors">
                                <td class="p-5 font-medium text-royal">Source Code Access</td>
                                <td class="p-5 text-brandOrange bg-brandOrange/[0.01]">
                                    <i class="ri-check-line text-lg"></i>
                                </td>
                                <td class="p-5 text-zinc-300">
                                    <i class="ri-close-line text-lg"></i>
                                </td>
                                <td class="p-5 text-zinc-400 font-[300]">
                                    <i class="ri-check-line text-lg"></i>
                                </td>
                            </tr>
                            <!-- Row 2: One-time cost -->
                            <tr class="hover:bg-zinc-50/30 transition-colors">
                                <td class="p-5 font-medium text-royal">One-Time License CapEx</td>
                                <td class="p-5 text-brandOrange bg-brandOrange/[0.01]">
                                    <i class="ri-check-line text-lg"></i>
                                </td>
                                <td class="p-5 text-zinc-300">
                                    <i class="ri-close-line text-lg"></i>
                                </td>
                                <td class="p-5 text-zinc-300">
                                    <i class="ri-close-line text-lg"></i>
                                </td>
                            </tr>
                            <!-- Row 3: Lifetime ownership -->
                            <tr class="hover:bg-zinc-50/30 transition-colors">
                                <td class="p-5 font-medium text-royal">Lifetime Sovereign Ownership</td>
                                <td class="p-5 text-brandOrange bg-brandOrange/[0.01]">
                                    <i class="ri-check-line text-lg"></i>
                                </td>
                                <td class="p-5 text-zinc-300">
                                    <i class="ri-close-line text-lg"></i>
                                </td>
                                <td class="p-5 text-zinc-400 font-[300]">
                                    <i class="ri-check-line text-lg"></i>
                                </td>
                            </tr>
                            <!-- Row 4: No revenue share -->
                            <tr class="hover:bg-zinc-50/30 transition-colors">
                                <td class="p-5 font-medium text-royal">Zero Volumetric Revenue Share</td>
                                <td class="p-5 text-brandOrange bg-brandOrange/[0.01]">
                                    <i class="ri-check-line text-lg"></i>
                                </td>
                                <td class="p-5 text-zinc-500 font-[300]">Sometimes Variable</td>
                                <td class="p-5 text-zinc-400 font-[300]">
                                    <i class="ri-check-line text-lg"></i>
                                </td>
                            </tr>
                            <!-- Row 5: Multi-country -->
                            <tr class="hover:bg-zinc-50/30 transition-colors">
                                <td class="p-5 font-medium text-royal">Multi-Country Deployment Matrix</td>
                                <td class="p-5 text-brandOrange bg-brandOrange/[0.01]">
                                    <i class="ri-check-line text-lg"></i>
                                </td>
                                <td class="p-5 text-zinc-400 font-[300]">
                                    <i class="ri-check-line text-lg"></i>
                                </td>
                                <td class="p-5 text-zinc-400 font-[300]">
                                    <i class="ri-check-line text-lg"></i>
                                </td>
                            </tr>
                            <!-- Row 6: Customizable -->
                            <tr class="hover:bg-zinc-50/30 transition-colors">
                                <td class="p-5 font-medium text-royal">Customizable Kernels & Logic</td>
                                <td class="p-5 text-brandOrange bg-brandOrange/[0.01]">
                                    <i class="ri-check-line text-lg"></i>
                                </td>
                                <td class="p-5 text-zinc-500 font-[300]">Highly Limited</td>
                                <td class="p-5 text-zinc-400 font-[300]">
                                    <i class="ri-check-line text-lg"></i>
                                </td>
                            </tr>
                            <!-- Row 7: Time to deploy -->
                            <tr class="hover:bg-zinc-50/30 transition-colors">
                                <td class="p-5 font-medium text-royal">Operational Time to Deploy</td>
                                <td class="p-5 text-brandOrange font-semibold bg-brandOrange/[0.03]">4–8 weeks</td>
                                <td class="p-5 text-zinc-500 font-[300]">2–4 weeks</td>
                                <td class="p-5 text-zinc-400 font-[300]">18 months</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </section>

        <!-- Outer White Frame Wrapper -->
        <div class="bg-white p-1 md:p-2">

            <!-- The Institutional Compliance & Security Matrix Block -->
            <section id="compliance-matrix" class="relative bg-royal py-16 px-6 lg:px-14 overflow-hidden rounded-[24px] text-white" data-aos="fade-up" data-aos-duration="1000" data-aos-once="true">

                <!-- Ambient Radial Top-Right Light Glow Orb -->
                <div class="absolute -top-24 -right-24 w-[600px] h-[600px] bg-white/10 rounded-full blur-[120px] pointer-events-none"></div>

                <!-- Infrastructure Micro-Dot Blueprint Matrix Background Grid -->
                <div class="absolute inset-0 pointer-events-none opacity-[0.08]"
                    style="background-image: radial-gradient(#ffffff 1px, transparent 1px); background-size: 32px 32px;">
                </div>

                <!-- Z-Indexed Content Blueprint Container -->
                <div class="relative z-10 max-w-[1300px] mx-auto">

                    <!-- Section Header Module -->
                    <div class="max-w-3xl mb-12">
                        <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange block mb-4">Regulatory Guardrails</span>
                        <h2 class="text-white text-4xl md:text-5xl font-[400]tracking-[-0.05em] leading-[1.05] mb-3 max-w-3xl">
                            Built for compliance <br />
                            <span class="italic font-serif ">Controls regulators expect, built in</span>
                        </h2>
                        <p class="text-blue-100 text-sm md:text-base leading-relaxed font-[300] max-w-2xl">
                            Operate with the checks, monitoring and reporting that regulated institutions require. Nesvra provides the technology; regulated activities run through the appropriate licenses or licensed partners.
                        </p>
                    </div>

                    <!-- High-Density Compliance Grid with Focus Isolation Blur -->
                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 group/grid">

                        <!-- COLUMN 1: GOVERNANCE & LEDGERS -->
                        <div class="p-8 rounded-[24px] bg-blue-900/20 border border-blue-400/20 backdrop-blur-sm transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-white/30 hover:bg-blue-900/40">
                            <div class="flex items-center mb-6 gap-3">
                                <i class="ri-git-repository-private-line text-brandOrange text-xl"></i>
                                <h3 class="text-base font-medium text-white">Governance & Ledgers</h3>
                            </div>
                            <div class="space-y-4">
                                <div class="flex items-center gap-3">
                                    <i class="ri-checkbox-circle-line text-brandOrange"></i>
                                    <span class="text-sm font-medium text-white">Maker Checker</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <i class="ri-checkbox-circle-line text-brandOrange"></i>
                                    <span class="text-sm font-medium text-white">Audit Logs</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <i class="ri-checkbox-circle-line text-brandOrange"></i>
                                    <span class="text-sm font-medium text-white">General Ledger</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <i class="ri-checkbox-circle-line text-brandOrange"></i>
                                    <span class="text-sm font-medium text-white">IFRS Reports</span>
                                </div>
                            </div>
                        </div>

                        <!-- COLUMN 2: SCREENING & MONITORING -->
                        <div class="p-8 rounded-[24px] bg-blue-900/20 border border-blue-400/20 backdrop-blur-sm transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-white/30 hover:bg-blue-900/40">
                            <div class="flex items-center mb-6 gap-3">
                                <i class="ri-shield-user-line text-brandOrange text-xl"></i>
                                <h3 class="text-base font-medium text-white">Screening & Monitoring</h3>
                            </div>
                            <div class="space-y-4">
                                <div class="flex items-center gap-3">
                                    <i class="ri-checkbox-circle-line text-brandOrange"></i>
                                    <span class="text-sm font-medium text-white">KYC</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <i class="ri-checkbox-circle-line text-brandOrange"></i>
                                    <span class="text-sm font-medium text-white">CDD</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <i class="ri-checkbox-circle-line text-brandOrange"></i>
                                    <span class="text-sm font-medium text-white">AML</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <i class="ri-checkbox-circle-line text-brandOrange"></i>
                                    <span class="text-sm font-medium text-white">PEP Screening</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <i class="ri-checkbox-circle-line text-brandOrange"></i>
                                    <span class="text-sm font-medium text-white">Sanctions Screening</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <i class="ri-checkbox-circle-line text-brandOrange"></i>
                                    <span class="text-sm font-medium text-white">Suspicious Activity Monitoring</span>
                                </div>
                            </div>
                        </div>

                        <!-- COLUMN 3: SECURITY & REPORTING -->
                        <div class="p-8 rounded-[24px] bg-blue-900/20 border border-blue-400/20 backdrop-blur-sm transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[2px] group-hover/grid:opacity-40 group hover:border-white/30 hover:bg-blue-900/40 md:col-span-2 lg:col-span-1">
                            <div class="flex items-center mb-6 gap-3">
                                <i class="ri-lock-password-line text-brandOrange text-xl"></i>
                                <h3 class="text-base font-medium text-white">Security & Oversight</h3>
                            </div>
                            <div class="space-y-4">
                                <div class="flex items-center gap-3">
                                    <i class="ri-checkbox-circle-line text-brandOrange"></i>
                                    <span class="text-sm font-medium text-white">Regulatory Reporting</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <i class="ri-checkbox-circle-line text-brandOrange"></i>
                                    <span class="text-sm font-medium text-white">GDPR</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <i class="ri-checkbox-circle-line text-brandOrange"></i>
                                    <span class="text-sm font-medium text-white">PCI DSS</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <i class="ri-checkbox-circle-line text-brandOrange"></i>
                                    <span class="text-sm font-medium text-white">ISO 27001</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- Infrastructure Attestation Footnote Asset -->
                    <div class="mt-20 flex flex-wrap items-center justify-between border-t border-white/10 pt-10 gap-4">
                        <p class="text-xs font-mono text-blue-200/60 tracking-wider">
                            Auditable architecture layers. Configurable for regional regulatory systems.
                        </p>

                    </div>

                </div>
            </section>
        </div>


        <section class="py-32 px-[5%] bg-white border-b border-zinc-100 overflow-hidden" id="deployment-models">
            <div class="max-w-[1200px] mx-auto">

                <div class="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
                    <div class="max-w-2xl">
                        <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange block mb-4">Infrastructure Sovereignty</span>
                        <h2 class="text-3xl md:text-[40px] font-[400] tracking-tighter text-royal leading-tight mb-4">
                            Deploy your way. <br />
                            <span class="italic font-serif text-zinc-400">Run it wherever your institution requires.</span>
                        </h2>
                        <p class="text-zinc-500 text-sm font-[300] leading-relaxed">
                            Because you completely own the core source code, you choose the underlying execution model—ranging from fully isolated public hyper-scalers to sovereign bare-metal arrays.
                        </p>
                    </div>


                </div>

                <div class="flex gap-6 overflow-x-auto pb-8 snap-x snap-mandatory scrollbar-none group/grid -mx-[5%] px-[5%] lg:mx-0 lg:px-0">

                    <div class="min-w-[300px] md:min-w-[380px] snap-start p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[1px] group-hover/grid:opacity-60 hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.05)]">
                        <div>
                            <div class="flex items-center mb-6 gap-3">
                                <i class="ri-cloud-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">Cloud Hosted</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] leading-relaxed mb-8">
                                Deploy your architecture on hyper-scale public clouds with infinite elastic resource adjustments and minimal configuration friction.
                            </p>
                        </div>
                        <div class="space-y-2 pt-6 border-t border-zinc-100">
                            <div class="flex items-center justify-between text-xs font-mono">
                                <span class="text-zinc-500">AWS</span>
                                <span class="text-zinc-300">Supported</span>
                            </div>
                            <div class="flex items-center justify-between text-xs font-mono">
                                <span class="text-zinc-500">Azure</span>
                                <span class="text-zinc-300">Supported</span>
                            </div>
                            <div class="flex items-center justify-between text-xs font-mono">
                                <span class="text-zinc-500">GCP</span>
                                <span class="text-zinc-300">Supported</span>
                            </div>
                        </div>
                    </div>

                    <div class="min-w-[300px] md:min-w-[380px] snap-start p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[1px] group-hover/grid:opacity-60 hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.05)]">
                        <div>
                            <div class="flex items-center mb-6 gap-3">
                                <i class="ri-git-merge-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">Private & Hybrid Cloud</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] leading-relaxed mb-8">
                                Isolate computing clusters using localized configurations or bridge external resources with strict encryption rails.
                            </p>
                        </div>
                        <div class="space-y-2 pt-6 border-t border-zinc-100">
                            <div class="flex items-center justify-between text-xs font-mono">
                                <span class="text-zinc-500">Private Cloud</span>
                                <span class="text-zinc-300">Native</span>
                            </div>
                            <div class="flex items-center justify-between text-xs font-mono">
                                <span class="text-zinc-500">Hybrid</span>
                                <span class="text-zinc-300">Native</span>
                            </div>
                            <div class="flex items-center justify-between text-xs font-mono">
                                <span class="text-zinc-500">Kubernetes</span>
                                <span class="text-zinc-300">Orchestrated</span>
                            </div>
                            <div class="flex items-center justify-between text-xs font-mono">
                                <span class="text-zinc-500">Docker</span>
                                <span class="text-zinc-300">Containerized</span>
                            </div>
                        </div>
                    </div>

                    <div class="min-w-[300px] md:min-w-[380px] snap-start p-8 rounded-[24px] border border-zinc-200/80 bg-zinc-50/30 flex flex-col justify-between transition-all duration-500 hover:!blur-none hover:!opacity-100 group-hover/grid:blur-[1px] group-hover/grid:opacity-60 hover:border-royal/20 hover:bg-white hover:shadow-[0_32px_64px_-24px_rgba(8,31,92,0.05)]">
                        <div>
                            <div class="flex items-center mb-6 gap-3">
                                <i class="ri-server-line text-brandOrange text-xl"></i>
                                <h3 class="text-lg font-medium text-royal">On-Premise Infrastructure</h3>
                            </div>
                            <p class="text-xs text-zinc-400 font-[300] leading-relaxed mb-8">
                                Retain total processing sovereignty by anchoring software modules to physical bare-metal hardware arrays in your clean rooms.
                            </p>
                        </div>
                        <div class="space-y-2 pt-6 border-t border-zinc-100">
                            <div class="flex items-center justify-between text-xs font-mono">
                                <span class="text-zinc-500">On-Premise</span>
                                <span class="text-zinc-300">Supported</span>
                            </div>
                            <div class="flex items-center justify-between text-xs font-mono">
                                <span class="text-zinc-500">Disaster Recovery</span>
                                <span class="text-zinc-300">Synchronized</span>
                            </div>
                            <div class="flex items-center justify-between text-xs font-mono">
                                <span class="text-zinc-500">HA Cluster</span>
                                <span class="text-zinc-300">Enabled</span>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </section>


        <section class="py-32 px-[5%] bg-white border-b border-zinc-100" id="economics">
            <div class="max-w-[1200px] mx-auto">

                <div class="grid lg:grid-cols-12 gap-12 lg:gap-20 items-start">

                    <div class="lg:col-span-5 max-w-xl">
                        <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange block mb-4">Capital Allocation Strategy</span>
                        <h2 class="text-3xl md:text-[44px] font-[400] tracking-tighter text-royal leading-tight mb-6">
                            The economics. <br />
                            <span class="italic font-serif text-soft">Building internally could cost over $500,000.</span>
                        </h2>
                        <p class="text-zinc-500 text-sm font-[300] leading-relaxed mb-8">
                            A banking core engineered from scratch demands a dedicated infrastructure unit, continuous QA pipelines, and twelve to twenty-four months of capital burn before your first transactional baseline launch.
                        </p>
                        <p class="text-zinc-500 text-sm font-[300] leading-relaxed mb-10">
                            With Nesvra, you deploy a production-hardened platform kernel for a fraction of the cost—moving your go-live runway from years down to weeks.
                        </p>

                        <div class="p-6 rounded-2xl bg-zinc-50 border border-zinc-200/60 flex items-center justify-between gap-4">
                            <div>
                                <span class="block font-mono text-[10px] text-zinc-400 uppercase tracking-wider mb-1">In-House Build</span>
                                <span class="text-xl font-medium text-zinc-400 line-through">≈ $550,000</span>
                            </div>
                            <div class="text-zinc-300">
                                <i class="ri-arrow-right-line text-xl"></i>
                            </div>
                            <div>
                                <span class="block font-mono text-[10px] text-brandOrange uppercase tracking-wider mb-1">Nesvra Enterprise</span>
                                <span class="text-2xl font-semibold text-royal">$60,000</span>
                            </div>
                        </div>

                        <span class="block mt-4 text-[11px] font-mono text-zinc-400 italic">
                            * Figures shown are illustrative engineering market estimates.
                        </span>
                    </div>

                    <div class="lg:col-span-7 w-full border border-zinc-200 rounded-[24px] bg-zinc-50/20 p-6 md:p-8">
                        <div class="flex items-center justify-between pb-6 border-b border-zinc-200">
                            <div class="flex items-center gap-3">
                                <i class="ri-terminal-box-line text-royal text-lg"></i>
                                <h3 class="text-sm font-mono uppercase tracking-wider text-royal font-medium">In-House Resource Allocation Ledger</h3>
                            </div>
                            <span class="text-[11px] font-mono text-zinc-400">Est. Runway: 12-24 Mo</span>
                        </div>

                        <div class="divide-y divide-zinc-100 font-mono text-xs text-zinc-600">
                            <div class="flex justify-between py-4 items-center">
                                <span class="text-royal font-medium">Backend Engineers</span>
                                <span class="text-zinc-500">$150,000</span>
                            </div>
                            <div class="flex justify-between py-4 items-center">
                                <span class="text-royal font-medium">Frontend Engineers</span>
                                <span class="text-zinc-500">$80,000</span>
                            </div>
                            <div class="flex justify-between py-4 items-center">
                                <span class="text-royal font-medium">QA Engineers</span>
                                <span class="text-zinc-500">$40,000</span>
                            </div>
                            <div class="flex justify-between py-4 items-center">
                                <span class="text-royal font-medium">DevOps Infrastructure</span>
                                <span class="text-zinc-500">$50,000</span>
                            </div>
                            <div class="flex justify-between py-4 items-center">
                                <span class="text-royal font-medium">Compliance & SecOps</span>
                                <span class="text-zinc-500">$70,000</span>
                            </div>
                            <div class="flex justify-between py-4 items-center">
                                <span class="text-royal font-medium">Project Management</span>
                                <span class="text-zinc-500">$40,000</span>
                            </div>
                            <div class="flex justify-between py-4 items-center">
                                <span class="text-royal font-medium">Native Mobile Apps (iOS/Android)</span>
                                <span class="text-zinc-500">$60,000</span>
                            </div>
                            <div class="flex justify-between py-4 items-center">
                                <span class="text-royal font-medium">Hyper-scaler Compute Infrastructure</span>
                                <span class="text-zinc-500">$60,000</span>
                            </div>

                            <div class="flex justify-between pt-6 pb-2 items-center text-sm border-t-2 border-zinc-200">
                                <span class="font-sans font-medium text-royal text-base">Estimated Total CapEx</span>
                                <span class="font-mono font-semibold text-royal text-lg">≈ $550,000</span>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </section>









        <!-- Deployment Journey Timeline Section -->
        <section class="py-24 px-[5%] bg-black relative overflow-hidden text-white" id="deployment-journey">

            <!-- Fine-grain Infrastructure Micro-Dot Matrix Overlay -->
            <div class="absolute inset-0 pointer-events-none opacity-[0.05]"
                style="background-image: radial-gradient(#ffffff 1px, transparent 1px); background-size: 32px 32px;">
            </div>

            <div class="max-w-[1000px] mx-auto relative z-10">

                <!-- Section Header Module -->
                <div class="max-w-2xl mb-24">
                    <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange block mb-4">Implementation Protocol</span>
                    <h2 class="text-3xl md:text-[40px] font-[400] tracking-tighter text-white leading-tight mb-4">
                        Deployment journey. <br />
                        <span class="italic font-serif text-zinc-500">Live in about six weeks.</span>
                    </h2>
                </div>

                <!-- Vertical Step-by-Step Timeline Track -->
                <div class="relative pl-6 md:pl-8 border-l border-zinc-800 space-y-16">

                    <!-- STEP 1: WEEK 1 -->
                    <div class="relative group">
                        <!-- Timeline Node Marker Point -->
                        <div class="absolute -left-[31px] md:-left-[39px] top-1.5 w-4 h-4 rounded-full border-2 border-brandOrange bg-black group-hover:bg-brandOrange transition-colors duration-300"></div>

                        <div class="grid md:grid-cols-4 gap-2 md:gap-6">
                            <div class="md:col-span-1">
                                <span class="font-mono text-xs font-semibold uppercase tracking-wider text-brandOrange  px-2.5 py-1 ">Week 1</span>
                            </div>
                            <div class="md:col-span-3">
                                <h3 class="text-base font-medium text-white mb-2">Infrastructure</h3>
                                <p class="text-sm text-zinc-400 font-[300] leading-relaxed">
                                    Provision core technical execution environments and completely stand up the primary native platform infrastructure layer.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- STEP 2: WEEK 2 -->
                    <div class="relative group">
                        <div class="absolute -left-[31px] md:-left-[39px] top-1.5 w-4 h-4 rounded-full border-2 border-zinc-800 bg-black group-hover:border-brandOrange group-hover:bg-brandOrange transition-colors duration-300"></div>

                        <div class="grid md:grid-cols-4 gap-2 md:gap-6">
                            <div class="md:col-span-1">
                                <span class="font-mono text-xs font-medium uppercase tracking-wider text-zinc-500">Week 2</span>
                            </div>
                            <div class="md:col-span-3">
                                <h3 class="text-base font-medium text-white mb-2">Configuration</h3>
                                <p class="text-sm text-zinc-400 font-[300] leading-relaxed">
                                    Initialize individual database entities, localized branches, cryptographic user roles, and fine-grained access permission policies.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- STEP 3: WEEK 3 -->
                    <div class="relative group">
                        <div class="absolute -left-[31px] md:-left-[39px] top-1.5 w-4 h-4 rounded-full border-2 border-zinc-800 bg-black group-hover:border-brandOrange group-hover:bg-brandOrange transition-colors duration-300"></div>

                        <div class="grid md:grid-cols-4 gap-2 md:gap-6">
                            <div class="md:col-span-1">
                                <span class="font-mono text-xs font-medium uppercase tracking-wider text-zinc-500">Week 3</span>
                            </div>
                            <div class="md:col-span-3">
                                <h3 class="text-base font-medium text-white mb-2">Product Setup</h3>
                                <p class="text-sm text-zinc-400 font-[300] leading-relaxed">
                                    Programmatically define asset metrics for custom savings tiers, dynamic loan underwriting parameters, institutional treasury allocations, and user channel configurations.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- STEP 4: WEEK 4 -->
                    <div class="relative group">
                        <div class="absolute -left-[31px] md:-left-[39px] top-1.5 w-4 h-4 rounded-full border-2 border-zinc-800 bg-black group-hover:border-brandOrange group-hover:bg-brandOrange transition-colors duration-300"></div>

                        <div class="grid md:grid-cols-4 gap-2 md:gap-6">
                            <div class="md:col-span-1">
                                <span class="font-mono text-xs font-medium uppercase tracking-wider text-zinc-500">Week 4</span>
                            </div>
                            <div class="md:col-span-3">
                                <h3 class="text-base font-medium text-white mb-2">Integrations</h3>
                                <p class="text-sm text-zinc-400 font-[300] leading-relaxed">
                                    Connect external clearings, validation providers, and regional financial rails directly through sovereign Infrastructure Access protocols.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- STEP 5: WEEK 5 -->
                    <div class="relative group">
                        <div class="absolute -left-[31px] md:-left-[39px] top-1.5 w-4 h-4 rounded-full border-2 border-zinc-800 bg-black group-hover:border-brandOrange group-hover:bg-brandOrange transition-colors duration-300"></div>

                        <div class="grid md:grid-cols-4 gap-2 md:gap-6">
                            <div class="md:col-span-1">
                                <span class="font-mono text-xs font-medium uppercase tracking-wider text-zinc-500">Week 5</span>
                            </div>
                            <div class="md:col-span-3">
                                <h3 class="text-base font-medium text-white mb-2">Testing</h3>
                                <p class="text-sm text-zinc-400 font-[300] leading-relaxed">
                                    Rigorously simulate edge-case ledger flows, validate transactional security risk controls, and double-check programmatic reporting compliance loops.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- STEP 6: WEEK 6 -->
                    <div class="relative group">
                        <!-- Final Milestone Highlight Marker -->
                        <div class="absolute -left-[35px] md:-left-[43px] top-0.5 w-6 h-6 rounded-full bg-white/5 flex items-center justify-center">
                            <div class="w-3 h-3 rounded-full bg-brandOrange"></div>
                        </div>

                        <div class="grid md:grid-cols-4 gap-2 md:gap-6">
                            <div class="md:col-span-1">
                                <span class="font-mono text-xs font-bold uppercase tracking-wider text-black bg-brandOrange px-2.5 py-1 rounded">Week 6</span>
                            </div>
                            <div class="md:col-span-3">
                                <h3 class="text-base font-semibold text-white mb-2">Go Live</h3>
                                <p class="text-sm text-zinc-400 font-[300] leading-relaxed">
                                    Safely deploy production access parameters to consumers with dedicated structural platform support personnel positioned on active standby.
                                </p>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </section>


        <!-- Why Ownership Changes Everything Section -->
        <section class="py-32 px-[5%] bg-white border-b border-zinc-100" id="ownership-paradigm">
            <div class="max-w-[1200px] mx-auto">

                <!-- Split Layout Grid Matrix -->
                <div class="grid lg:grid-cols-12 gap-12 lg:gap-20 items-center">

                    <!-- LEFT SIDE: EDITORIAL NARRATIVE & VALUE PROPOSITIONS (7 Cols) -->
                    <div class="lg:col-span-7">
                        <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange block mb-4">Strategic Paradigm</span>
                        <h2 class="text-3xl md:text-[44px] font-[400] tracking-tighter text-royal leading-tight mb-8">
                            Why ownership changes everything. <br />
                            <span class="italic font-serif text-zinc-400">Buy once and you own a banking institution, not a subscription.</span>
                        </h2>

                        <!-- Core Editorial Copy Blocks -->
                        <div class="space-y-4 text-zinc-500 text-base font-[300] leading-relaxed mb-12">
                            <p>
                                Most core banking platforms are subscription-based, locking financial institutions into recurring licensing fees, limited customization, and vendor-controlled roadmaps. As your institution grows, costs increase while ownership and flexibility remain out of your hands.
                            </p>

                            <p>
                                Nesvra changes the model by giving you complete ownership of your core banking platform through a one-time investment. You receive the full source code, deploy it your way, customize it for your market, and scale without recurring licensing fees turning your banking technology into a long-term business asset.
                            </p>
                        </div>

                        <!-- Three-Column Structural Value Rows -->
                        <div class="grid sm:grid-cols-3 gap-6 pt-8 border-t border-zinc-100">

                            <!-- PILLAR 1 -->
                            <div>
                                <div class="flex items-center gap-2 mb-2">
                                    <i class="ri-key-2-line text-brandOrange text-lg"></i>
                                    <h3 class="text-base font-medium text-royal">Own it for life</h3>
                                </div>
                                <p class="text-sm text-zinc-400 font-[300] leading-relaxed">
                                    Full source code and IP access with zero annual license fees or revenue sharing metrics.
                                </p>
                            </div>

                            <!-- PILLAR 2 -->
                            <div>
                                <div class="flex items-center gap-2 mb-2">
                                    <i class="ri-tools-line text-brandOrange text-lg"></i>
                                    <h3 class="text-base font-medium text-royal">Customize freely</h3>
                                </div>
                                <p class="text-sm text-zinc-400 font-[300] leading-relaxed">
                                    Shape financial products and transactional workflows without waiting on a vendor's timeline.
                                </p>
                            </div>

                            <!-- PILLAR 3 -->
                            <div>
                                <div class="flex items-center gap-2 mb-2">
                                    <i class="ri-line-chart-line text-brandOrange text-lg"></i>
                                    <h3 class="text-base font-medium text-royal">Predictable cost</h3>
                                </div>
                                <p class="text-sm text-zinc-400 font-[300] leading-relaxed">
                                    One upfront investment instead of an operational invoice that tracks up with account volumes.
                                </p>
                            </div>

                        </div>
                    </div>

                    <!-- RIGHT SIDE: PREMIUM ARCHITECTURAL IMAGE HOLDER (5 Cols) -->
                    <div class="lg:col-span-5 w-full">
                        <div class="relative aspect-[4/5] w-full rounded-[24px] bg-zinc-50 border border-zinc-200 overflow-hidden flex items-center justify-center group">

                            <!-- Clean Structural Blueprint Background Lines -->
                            <div class="absolute inset-0 pointer-events-none opacity-[0.03]"
                                style="background-image: linear-gradient(to right, #000 1px, transparent 1px), linear-gradient(to bottom, #000 1px, transparent 1px); background-size: 40px 40px;">
                            </div>

                            <!-- Image Component Tag (Replace src with your actual interface graphic or model asset) -->
                            <img src="https://plus.unsplash.com/premium_photo-1661512399328-1460a8d6a235?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?q=80&w=1000&auto=format&fit=crop"
                                alt="Nesvra Core Infrastructure Sovereignty"
                                class="absolute inset-0 w-full h-full object-cover grayscale opacity-90 group-hover:scale-[1.02] transition-transform duration-700 ease-out" />

                            <!-- Subtle Internal Frame Border Overlay -->
                            <div class="absolute inset-0 rounded-[24px] border border-black/5 pointer-events-none"></div>

                            <!-- Ambient Floating Code Asset Label -->
                            <div class="absolute bottom-6 left-6 right-6 bg-white/90 backdrop-blur-md border border-zinc-200/50 p-4 rounded-xl flex items-center justify-between shadow-sm">
                                <div class="flex items-center gap-3">
                                    <div class="w-8 h-8 rounded-lg bg-royal flex items-center justify-center text-white">
                                        <i class="ri-code-s-slash-line text-sm"></i>
                                    </div>
                                    <div>
                                        <span class="block text-xs font-mono font-medium text-royal">nesvra-core-kernel/</span>
                                        <span class="block text-[10px] font-mono text-zinc-400">IP Ownership Transferred</span>
                                    </div>
                                </div>
                                <span class="text-[10px] font-mono text-brandOrange bg-brandOrange/5 px-2 py-0.5 rounded border border-brandOrange/10">Immutable</span>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </section>


        <!-- Infrastructure Access Integration Grid Section -->
        <section class="py-32 px-[5%] bg-white border-b border-zinc-100" id="infrastructure-access">
            <div class="max-w-[1200px] mx-auto">

                <!-- Left-Right Split Structural Layout Grid -->
                <div class="grid lg:grid-cols-12 gap-12 lg:gap-20 items-start">

                    <!-- Left Side: Editorial Context & Trigger Action -->
                    <div class="lg:col-span-5 max-w-xl lg:sticky lg:top-24">
                        <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange block mb-4">Unified Connectivity</span>
                        <h2 class="text-3xl md:text-[44px] font-[400] tracking-tighter text-royal leading-tight mb-6">
                            Need banking infrastructure too? <br />
                            <span class="italic font-serif text-zinc-400">Access everything needed to power your institution.</span>
                        </h2>
                        <p class="text-zinc-500 text-sm font-[300] leading-relaxed mb-10">
                            Connect the financial rails and utility providers your institution runs on through a single point of orchestration. Nesvra Infrastructure Access brings card networks, KYC validation loops, national registries, and transaction monitoring behind a unified API—maximizing what your platform can execute on day one.
                        </p>

                        <!-- Premium High-Fidelity Call To Action Link -->
                        <div>
                            <a href="#explore-access" class="inline-flex items-center gap-3 font-mono text-xs font-semibold text-royal border border-zinc-300 hover:border-royal bg-white px-6 py-4 rounded-full transition-all group">
                                <span>Explore Infrastructure Access</span>
                                <i class="ri-arrow-right-line text-brandOrange transition-transform duration-300 group-hover:translate-x-1"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Right Side: Clean High-Density Integration Matrix Ledger -->
                    <div class="lg:col-span-7 w-full border border-zinc-200 rounded-[24px] bg-zinc-50/20 p-6 md:p-8">

                        <div class="flex items-center justify-between pb-6 border-b border-zinc-200 mb-8">
                            <div class="flex items-center gap-3">
                                <i class="ri-git-branch-line text-royal text-lg"></i>
                                <h3 class="text-sm font-mono uppercase tracking-wider text-royal font-medium">Unified Core API Ecosystem</h3>
                            </div>
                            <span class="text-[11px] font-mono text-zinc-400">Single Integration Endpoint</span>
                        </div>

                        <!-- Integration Categories Layout Grid -->
                        <div class="grid sm:grid-cols-2 gap-8">

                            <!-- CATEGORY 1: CARD SCHEMES & LOCAL RAILS -->
                            <div class="space-y-4">
                                <h4 class="text-xs font-mono uppercase tracking-wider text-zinc-400 border-b border-zinc-100 pb-2">Card Schemes & Rails</h4>
                                <ul class="space-y-2.5 font-mono text-xs text-zinc-600">
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-royal"></span>Visa</li>
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-royal"></span>Mastercard</li>
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-royal"></span>Verve</li>
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-royal"></span>NIBSS Clearing Rails</li>
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-royal"></span>Card Issuing Engine</li>
                                </ul>
                            </div>

                            <!-- CATEGORY 2: IDENTITY & VERIFICATION -->
                            <div class="space-y-4">
                                <h4 class="text-xs font-mono uppercase tracking-wider text-zinc-400 border-b border-zinc-100 pb-2">Identity & Verification</h4>
                                <ul class="space-y-2.5 font-mono text-xs text-zinc-600">
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-[#66B6FA]"></span>Identity Verification</li>
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-[#66B6FA]"></span>BVN Core Registry</li>
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-[#66B6FA]"></span>NIN Validation</li>
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-[#66B6FA]"></span>KYC Automated Profiles</li>
                                </ul>
                            </div>

                            <!-- CATEGORY 3: COMPLIANCE & SECURITY -->
                            <div class="space-y-4">
                                <h4 class="text-xs font-mono uppercase tracking-wider text-zinc-400 border-b border-zinc-100 pb-2">Compliance & Security</h4>
                                <ul class="space-y-2.5 font-mono text-xs text-zinc-600">
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-brandOrange"></span>Fraud Detection Engine</li>
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-brandOrange"></span>AML Screening Realtime</li>
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-brandOrange"></span>Credit Bureau Protocols</li>
                                </ul>
                            </div>

                            <!-- CATEGORY 4: CHANNELS & CORE UTILITIES -->
                            <div class="space-y-4">
                                <h4 class="text-xs font-mono uppercase tracking-wider text-zinc-400 border-b border-zinc-100 pb-2">Channels & Services</h4>
                                <ul class="space-y-2.5 font-mono text-xs text-zinc-600">
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-zinc-400"></span>USSD Telephony Node</li>
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-zinc-400"></span>FX Transaction Liquidity</li>
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-zinc-400"></span>SMS Notification Gateway</li>
                                    <li class="flex items-center gap-2.5"><span class="w-1.5 h-1.5 rounded-full bg-zinc-400"></span>Transactional Email Engine</li>
                                </ul>
                            </div>

                        </div>

                        <!-- Footnote Connectivity Verification Marker -->
                        <div class="mt-8 pt-6 border-t border-zinc-100 flex items-center justify-between text-[11px] font-mono text-zinc-400">
                            <span>Protocol: HTTPS/REST/JSON</span>
                            <div class="flex items-center gap-1.5 text-emerald-600 font-medium">
                                <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                                <span>Rails Operational</span>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </section>






        <!-- Case Study Analysis Block -->
        <section class="py-32 px-[5%] bg-white border-b border-zinc-100" id="case-study">
            <div class="max-w-[1200px] mx-auto">

                <!-- Left-Right Structural Layout Split -->
                <div class="grid lg:grid-cols-12 gap-12 lg:gap-20 items-start">

                    <!-- Left Side: Narrative Context Column -->
                    <div class="lg:col-span-5 max-w-xl">
                        <div class="flex items-center gap-3 mb-4">
                            <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange block">Case Study</span>
                            <span class="text-zinc-300">•</span>
                            <span class="font-mono text-[10px] uppercase tracking-wider text-zinc-400 block">Illustrative Analysis</span>
                        </div>
                        <h2 class="text-3xl md:text-[44px] font-[400] tracking-tighter text-royal leading-tight mb-6">
                            How a cooperative digitized 30,000 members.
                        </h2>
                        <p class="text-zinc-500 text-sm font-[300] leading-relaxed mb-8">
                            A prominent member-owned cooperative completely replaced fragmented legacy spreadsheets and disconnected accounting tools with Nesvra Core Banking—successfully unifying savings pipelines, active credit facilities, and complex member records on a singular software platform they own permanently.
                        </p>
                        <div class="pt-6 border-t border-zinc-100">
                            <span class="block font-mono text-[11px] text-zinc-400">
                                Operational Scope: Sovereign Core, Ledger Migration, Product Setup.
                            </span>
                        </div>
                    </div>

                    <!-- Right Side: Structural Asymmetric Metrics Grid Matrix -->
                    <div class="lg:col-span-7 w-full space-y-6">

                        <!-- Absolute Hero Outsized Metric Card -->
                        <div class="p-8 md:p-10 rounded-[24px] bg-zinc-50 border border-zinc-200/80 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
                            <div>
                                <span class="block text-5xl md:text-6xl font-[400] tracking-tighter text-royal mb-1">30,000</span>
                                <span class="font-mono text-xs uppercase tracking-wider text-zinc-400 font-medium">Active Members Transacted & Served</span>
                            </div>
                            <div class="px-4 py-2 bg-royal/5 border border-royal/10 rounded-xl">
                                <span class="text-xs font-mono font-medium text-royal">100% Migration Success</span>
                            </div>
                        </div>

                        <!-- Secondary 2x2 Clean Numerical Grid Layout -->
                        <div class="grid sm:grid-cols-2 gap-6">

                            <!-- METRIC 1 -->
                            <div class="p-8 rounded-[24px] border border-zinc-200 bg-white shadow-sm flex flex-col justify-between min-h-[160px]">
                                <span class="block text-3xl md:text-4xl font-[400] tracking-tight text-royal mb-4">12</span>
                                <div>
                                    <h4 class="text-xs font-medium text-royal mb-1">Centralized Branches</h4>
                                    <p class="text-[11px] text-zinc-400 font-mono">Unified under one immutable database node.</p>
                                </div>
                            </div>

                            <!-- METRIC 2 -->
                            <div class="p-8 rounded-[24px] border border-zinc-200 bg-white shadow-sm flex flex-col justify-between min-h-[160px]">
                                <span class="block text-3xl md:text-4xl font-[400] tracking-tight text-brandOrange mb-4">85%</span>
                                <div>
                                    <h4 class="text-xs font-medium text-royal mb-1">Less Manual Labor</h4>
                                    <p class="text-[11px] text-zinc-400 font-mono">Eliminated manual processing errors entirely.</p>
                                </div>
                            </div>

                            <!-- METRIC 3 -->
                            <div class="p-8 rounded-[24px] border border-zinc-200 bg-white shadow-sm flex flex-col justify-between min-h-[160px]">
                                <span class="block text-3xl md:text-4xl font-[400] tracking-tight text-[#66B6FA] mb-4">4 Wks</span>
                                <div>
                                    <h4 class="text-xs font-medium text-royal mb-1">Time to Deploy</h4>
                                    <p class="text-[11px] text-zinc-400 font-mono">From environment setup to active internal testing.</p>
                                </div>
                            </div>

                            <!-- METRIC 4 -->
                            <div class="p-8 rounded-[24px] border border-zinc-200 bg-white shadow-sm flex flex-col justify-between min-h-[160px]">
                                <span class="block text-3xl md:text-4xl font-[400] tracking-tight text-royal mb-4">3×</span>
                                <div>
                                    <h4 class="text-xs font-medium text-royal mb-1">Faster Loan Approvals</h4>
                                    <p class="text-[11px] text-zinc-400 font-mono">Automated score matching algorithms applied.</p>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
            </div>
        </section>





        <!-- High-Fidelity Outcomes Dashboard Section -->
        <section class="py-32 px-[5%] bg-white border-b border-zinc-100" id="institutional-outcomes">
            <div class="max-w-[1200px] mx-auto">

                <!-- Section Structural Header -->
                <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-16 pb-8 border-b border-zinc-200">
                    <div class="max-w-xl">
                        <div class="flex items-center gap-3 mb-4">
                            <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange block">Active Network Telemetry</span>
                            <span class="text-zinc-300 font-mono text-[10px]">•</span>
                            <span class="font-mono text-[10px] uppercase tracking-wider text-zinc-400 block">Illustrative Impact Metrics</span>
                        </div>
                        <h2 class="text-3xl md:text-4xl font-[400] tracking-tighter text-royal">
                            Institutions running on Nesvra.
                        </h2>
                    </div>
                    <div class="flex items-center gap-2 font-mono text-[11px] text-zinc-400 bg-zinc-50 px-3 py-1.5 rounded-lg border border-zinc-200/60">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                        <span>System Production Logs</span>
                    </div>
                </div>

                <!-- Dashboard Node Matrix Stack -->
                <div class="space-y-6">

                    <!-- NODE 1: Regional Cooperative Society -->
                    <div class="border border-zinc-200 rounded-[20px] bg-zinc-50/30 p-6 md:p-8 hover:border-royal transition-colors duration-300">
                        <div class="grid lg:grid-cols-12 gap-6 items-center">

                            <!-- Institutional Ident Block -->
                            <div class="lg:col-span-4">

                                <h3 class="text-lg font-medium text-royal flex items-center gap-2">
                                    Regional Cooperative Society
                                </h3>
                            </div>

                            <!-- Metrics Data Grid -->
                            <div class="lg:col-span-8 grid grid-cols-3 gap-4 border-t lg:border-t-0 lg:border-l border-zinc-200 pt-6 lg:pt-0 lg:pl-8">
                                <div>
                                    <span class="block text-2xl md:text-3xl font-[400] tracking-tight text-royal">35,000</span>
                                    <span class="block font-mono text-[10px] text-zinc-400 uppercase tracking-wider mt-1">Active Members</span>
                                </div>
                                <div>
                                    <span class="block text-2xl md:text-3xl font-[400] tracking-tight text-royal">7</span>
                                    <span class="block font-mono text-[10px] text-zinc-400 uppercase tracking-wider mt-1">Branches Unified</span>
                                </div>
                                <div>
                                    <span class="block text-2xl md:text-3xl font-[400] tracking-tight text-brandOrange">4 Wks</span>
                                    <span class="block font-mono text-[10px] text-zinc-400 uppercase tracking-wider mt-1">Deployment Runway</span>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- NODE 2: Digital Lender -->
                    <div class="border border-zinc-200 rounded-[20px] bg-zinc-50/30 p-6 md:p-8 hover:border-royal transition-colors duration-300">
                        <div class="grid lg:grid-cols-12 gap-6 items-center">

                            <!-- Institutional Ident Block -->
                            <div class="lg:col-span-4">

                                <h3 class="text-lg font-medium text-royal flex items-center gap-2">
                                    Digital Lender Platform
                                </h3>
                            </div>

                            <!-- Metrics Data Grid -->
                            <div class="lg:col-span-8 grid grid-cols-3 gap-4 border-t lg:border-t-0 lg:border-l border-zinc-200 pt-6 lg:pt-0 lg:pl-8">
                                <div>
                                    <span class="block text-2xl md:text-3xl font-[400] tracking-tight text-royal">120,000</span>
                                    <span class="block font-mono text-[10px] text-zinc-400 uppercase tracking-wider mt-1">Accounts Provisioned</span>
                                </div>
                                <div>
                                    <span class="block text-2xl md:text-3xl font-[400] tracking-tight text-[#66B6FA]">85%</span>
                                    <span class="block font-mono text-[10px] text-zinc-400 uppercase tracking-wider mt-1">Faster Approval</span>
                                </div>
                                <div>
                                    <span class="block text-2xl md:text-3xl font-[400] tracking-tight text-royal">3×</span>
                                    <span class="block font-mono text-[10px] text-zinc-400 uppercase tracking-wider mt-1">Throughput Delta</span>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- NODE 3: Community Bank -->
                    <div class="border border-zinc-200 rounded-[20px] bg-zinc-50/30 p-6 md:p-8 hover:border-royal transition-colors duration-300">
                        <div class="grid lg:grid-cols-12 gap-6 items-center">

                            <!-- Institutional Ident Block -->
                            <div class="lg:col-span-4">

                                <h3 class="text-lg font-medium text-royal flex items-center gap-2">
                                    Community Retail Bank
                                </h3>
                            </div>

                            <!-- Metrics Data Grid -->
                            <div class="lg:col-span-8 grid grid-cols-3 gap-4 border-t lg:border-t-0 lg:border-l border-zinc-200 pt-6 lg:pt-0 lg:pl-8">
                                <div>
                                    <span class="block text-xl md:text-2xl font-[400] tracking-tight text-royal mt-1 lg:mt-2">Legacy</span>
                                    <span class="block font-mono text-[10px] text-zinc-400 uppercase tracking-wider mt-2 lg:mt-3">Database Migration</span>
                                </div>
                                <div>
                                    <span class="block text-2xl md:text-3xl font-[400] tracking-tight text-royal">1</span>
                                    <span class="block font-mono text-[10px] text-zinc-400 uppercase tracking-wider mt-1">Unified Core Kernel</span>
                                </div>
                                <div>
                                    <span class="block text-2xl md:text-3xl font-[400] tracking-tight text-emerald-600">99.9%</span>
                                    <span class="block font-mono text-[10px] text-zinc-400 uppercase tracking-wider mt-1">Uptime Baseline</span>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>

            </div>
        </section>



        <!-- Testimonial Transition Section -->
        <section class="py-32 px-[5%] bg-zinc-50 border-b border-zinc-100 flex items-center justify-center min-h-[550px]" id="testimonials">
            <div class="max-w-[800px] mx-auto text-center">

                <!-- Subtle Section Label -->
                <div class="mb-14">
                    <span class="font-mono text-xs uppercase tracking-widest text-brandOrange block mb-3">In their words</span>
                    <p class="text-xs text-zinc-400 font-light">Why institutions choose ownership</p>
                </div>

                <!-- Large Decorative Quote Mark -->
                <div class="text-zinc-200 text-6xl font-serif leading-none select-none h-4 -mb-2">“</div>

                <!-- Active Testimonial Viewport Frame -->
                <div class="relative min-h-[160px] flex items-center justify-center">

                    <!-- QUOTE 1 -->
                    <div class="testimonial-slide transition-all duration-700 ease-in-out opacity-100 scale-100 block position-absolute">
                        <blockquote class="text-xl md:text-2xl font-normal text-royal leading-relaxed tracking-tight max-w-2xl mx-auto mb-6">
                            We evaluated several providers and chose Nesvra because we wanted complete ownership rather than another annual license fee.
                        </blockquote>
                        <cite class="not-italic font-mono text-xs uppercase tracking-wider text-zinc-400 block">
                            — CEO · Microfinance Institution
                        </cite>
                    </div>

                    <!-- QUOTE 2 -->
                    <div class="testimonial-slide transition-all duration-700 ease-in-out opacity-0 scale-95 hidden position-absolute">
                        <blockquote class="text-xl md:text-2xl font-normal text-royal leading-relaxed tracking-tight max-w-2xl mx-auto mb-6">
                            Having the source code allowed us to customize products for our market.
                        </blockquote>
                        <cite class="not-italic font-mono text-xs uppercase tracking-wider text-zinc-400 block">
                            — Founder · Fintech Startup
                        </cite>
                    </div>

                </div>

                <!-- Minimal Nav Dots -->
                <div class="flex items-center justify-center gap-2.5 mt-14">
                    <button class="testimonial-dot w-1.5 h-1.5 rounded-full bg-royal transition-all duration-300" onclick="setSlide(0)" aria-label="Slide 1"></button>
                    <button class="testimonial-dot w-1.5 h-1.5 rounded-full bg-zinc-300 hover:bg-zinc-400 transition-all duration-300" onclick="setSlide(1)" aria-label="Slide 2"></button>
                </div>

            </div>
        </section>

        <!-- Fluid Transitions Controller Script -->
        <script>
            let currentSlide = 0;
            const slides = document.querySelectorAll('.testimonial-slide');
            const dots = document.querySelectorAll('.testimonial-dot');
            const slideInterval = 6000; // Changes every 6 seconds

            function setSlide(index) {
                // Out of bounds safety check
                if (index >= slides.length) index = 0;
                if (index < 0) index = slides.length - 1;

                slides.forEach((slide, i) => {
                    if (i === index) {
                        // Fade In and Scale Up smoothly
                        slide.classList.remove('hidden');
                        setTimeout(() => {
                            slide.classList.remove('opacity-0', 'scale-95');
                            slide.classList.add('opacity-100', 'scale-100');
                        }, 50);
                    } else {
                        // Fade Out and Scale Down smoothly
                        slide.classList.remove('opacity-100', 'scale-100');
                        slide.classList.add('opacity-0', 'scale-95');
                        setTimeout(() => {
                            slide.classList.add('hidden');
                        }, 700); // Matches Tailwind duration-700
                    }
                });

                // Update active status on dots
                dots.forEach((dot, i) => {
                    if (i === index) {
                        dot.classList.remove('bg-zinc-300');
                        dot.classList.add('bg-royal');
                    } else {
                        dot.classList.remove('bg-royal');
                        dot.classList.add('bg-zinc-300');
                    }
                });

                currentSlide = index;
            }

            // Auto-rotation engine
            let autoRotate = setInterval(() => {
                setSlide(currentSlide + 1);
            }, slideInterval);

            // Reset rotation timer if user clicks manually
            function resetTimer() {
                clearInterval(autoRotate);
                autoRotate = setInterval(() => {
                    setSlide(currentSlide + 1);
                }, slideInterval);
            }

            dots.forEach(dot => dot.addEventListener('click', resetTimer));
        </script>







        <!-- High-Fidelity Fixed Sticky Reveal Section -->
        <section class="relative bg-white border-b border-zinc-100 w-full h-auto lg:h-[250vh] mb-8" id="delivery-package">

            <!-- Inner Layout Frame: Spans full parent scroll height on desktop -->
            <div class="max-w-[1300px] mx-auto px-[5%] h-full relative">
                <div class="grid lg:grid-cols-12 gap-12 lg:gap-20 items-start h-full">

                    <!-- LEFT COLUMN: Pins perfectly in view while scrolling parent track -->
                    <div class="lg:col-span-5 pt-24 lg:pt-32 lg:sticky lg:top-32 mb-4 lg:mb-0">
                        <span class="font-mono text-xs uppercase tracking-widest text-brandOrange block mb-4">What you receive</span>
                        <h2 class="text-3xl md:text-[44px] font-normal tracking-tight text-royal leading-tight mb-6">
                            Exactly what is included in your purchase.
                        </h2>
                        <p class="text-zinc-500 text-sm font-light leading-relaxed max-w-md">
                            Every acquisition is a complete, production-ready deployable package, securely signed and delivered instantly to your core enterprise merchant ecosystem account.
                        </p>
                    </div>

                    <!-- RIGHT COLUMN: Stacked Cards with incremental offsets for continuous stacking -->
                    <div class="lg:col-span-7 pt-0 lg:pt-32 space-y-12 lg:space-y-16 pb-32">

                        <!-- LAYER 01 -->
                        <div class="sticky top-32 bg-white border border-zinc-200 rounded-[24px] p-8 md:p-10 shadow-sm transition-all duration-500 hover:border-royal">
                            <div class="flex items-center justify-between pb-6 border-b border-zinc-100 mb-6">
                                <h3 class="text-lg font-medium text-royal">01 // Core Software Engines</h3>
                                <span class="text-[10px] font-mono uppercase tracking-wider px-2.5 py-1 bg-zinc-50 border border-zinc-200 text-zinc-400 rounded-md">Source Node</span>
                            </div>
                            <ul class="grid sm:grid-cols-2 gap-4 font-mono text-xs text-zinc-600">
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-royal"></span>Core banking source code</li>
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-royal"></span>Database schema</li>
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-royal"></span>Mobile banking APIs</li>
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-royal"></span>White-label rights</li>
                            </ul>
                        </div>

                        <!-- LAYER 02 -->
                        <div class="sticky top-40 bg-white border border-zinc-200 rounded-[24px] p-8 md:p-10 shadow-md transition-all duration-500 hover:border-royal">
                            <div class="flex items-center justify-between pb-6 border-b border-zinc-100 mb-6">
                                <h3 class="text-lg font-medium text-royal">02 // Interface Endpoints</h3>
                                <span class="text-[10px] font-mono uppercase tracking-wider px-2.5 py-1 bg-zinc-50 border border-zinc-200 text-zinc-400 rounded-md">Ready UI</span>
                            </div>
                            <ul class="grid sm:grid-cols-2 gap-4 font-mono text-xs text-zinc-600">
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-[#66B6FA]"></span>Admin dashboard</li>
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-[#66B6FA]"></span>Internet banking portal</li>
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-[#66B6FA]"></span>Web banking portal</li>
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-[#66B6FA]"></span>Merchant dashboard access</li>
                            </ul>
                        </div>

                        <!-- LAYER 03 -->
                        <div class="sticky top-48 bg-white border border-zinc-200 rounded-[24px] p-8 md:p-10 shadow-lg transition-all duration-500 hover:border-royal">
                            <div class="flex items-center justify-between pb-6 border-b border-zinc-100 mb-6">
                                <h3 class="text-lg font-medium text-royal">03 // DevOps & Deployment Infrastructure</h3>
                                <span class="text-[10px] font-mono uppercase tracking-wider px-2.5 py-1 bg-zinc-50 border border-zinc-200 text-zinc-400 rounded-md">Infrastructure</span>
                            </div>
                            <ul class="grid sm:grid-cols-2 gap-4 font-mono text-xs text-zinc-600">
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-brandOrange"></span>Docker containers</li>
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-brandOrange"></span>CI/CD pipelines</li>
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-brandOrange"></span>Deployment guide</li>
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-brandOrange"></span>Sample configurations</li>
                            </ul>
                        </div>

                        <!-- LAYER 04 -->
                        <div class="sticky top-56 bg-white border border-zinc-200 rounded-[24px] p-8 md:p-10 shadow-xl transition-all duration-500 hover:border-royal">
                            <div class="flex items-center justify-between pb-6 border-b border-zinc-100 mb-6">
                                <h3 class="text-lg font-medium text-royal">04 // Lifecycle & Integration Support</h3>
                                <span class="text-[10px] font-mono uppercase tracking-wider px-2.5 py-1 bg-zinc-50 border border-zinc-200 text-zinc-400 rounded-md">Success</span>
                            </div>
                            <ul class="grid sm:grid-cols-2 gap-4 font-mono text-xs text-zinc-600">
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>API documentation</li>
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>User manuals</li>
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>90–365 days support</li>
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>Training sessions</li>
                                <li class="flex items-center gap-3"><span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>Test credentials</li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </section>






        <!-- Post-Purchase Premium Journey Section -->
        <section class="py-24 md:py-32 px-[5%] bg-zinc-50 border-b border-zinc-100" id="purchase-journey">
            <div class="max-w-[1400px] mx-auto">

                <!-- Premium Section Header Module -->
                <div class="max-w-3xl mb-16 md:mb-24">
                    <span class="font-mono text-xs uppercase tracking-widest text-brandOrange block mb-3">Protocol Sequence</span>
                    <h2 class="text-3xl md:text-5xl font-normal tracking-tight text-royal leading-tight mb-6">
                        What happens after purchase. <br class="hidden md:block" />
                        <span class="italic font-serif text-zinc-400">From acquisition to deployment, in clear steps.</span>
                    </h2>
                    <p class="text-zinc-500 text-sm md:text-base font-light leading-relaxed max-w-2xl">
                        Acquiring is a structural, guided engineering process. Here is exactly what happens when you initialize the platform.
                    </p>
                </div>

                <div class="relative grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12 md:gap-y-16 pl-6 sm:pl-8 md:pl-0">

                    <!-- Mobile/Tablet Only: Vertical Line Track Node -->
                    <div class="absolute left-1 sm:left-2 top-2 bottom-2 w-[1px] bg-zinc-200 md:hidden pointer-events-none"></div>

                    <!-- STEP 01 -->
                    <div class="relative group">
                        <!-- Node Marker Dot -->
                        <div class="absolute -left-7 sm:-left-8 top-1.5 w-3 h-3 rounded-full border-2 border-brandOrange bg-white md:static md:mb-6 group-hover:bg-brandOrange transition-all duration-300"></div>
                        <!-- Content Block -->
                        <div>
                            <span class="block font-mono text-xs font-semibold text-brandOrange uppercase mb-1.5">01 // Initialization</span>
                            <h3 class="text-base font-medium text-royal mb-2 group-hover:text-brandOrange transition-colors duration-300">Create merchant account</h3>
                            <p class="text-xs text-zinc-500 font-light leading-relaxed max-w-sm">Log in or create your primary merchant profile to begin setup protocols.</p>
                        </div>
                    </div>

                    <!-- STEP 02 -->
                    <div class="relative group">
                        <div class="absolute -left-7 sm:-left-8 top-1.5 w-3 h-3 rounded-full border-2 border-zinc-300 bg-white md:static md:mb-6 group-hover:border-brandOrange group-hover:bg-brandOrange transition-all duration-300"></div>
                        <div>
                            <span class="block font-mono text-xs font-medium text-zinc-400 uppercase mb-1.5">02 // Validation</span>
                            <h3 class="text-base font-medium text-royal mb-2 group-hover:text-brandOrange transition-colors duration-300">Secure checkout</h3>
                            <p class="text-xs text-zinc-500 font-light leading-relaxed max-w-sm">Confirm your instance scale deployment parameters and complete payment securely.</p>
                        </div>
                    </div>

                    <!-- STEP 03 -->
                    <div class="relative group">
                        <div class="absolute -left-7 sm:-left-8 top-1.5 w-3 h-3 rounded-full border-2 border-zinc-300 bg-white md:static md:mb-6 group-hover:border-brandOrange group-hover:bg-brandOrange transition-all duration-300"></div>
                        <div>
                            <span class="block font-mono text-xs font-medium text-zinc-400 uppercase mb-1.5">03 // Audit Ledger</span>
                            <h3 class="text-base font-medium text-royal mb-2 group-hover:text-brandOrange transition-colors duration-300">Invoice generated</h3>
                            <p class="text-xs text-zinc-500 font-light leading-relaxed max-w-sm">Instantly receive your auditable documentation generated securely in the ecosystem dashboard.</p>
                        </div>
                    </div>

                    <!-- STEP 04 -->
                    <div class="relative group">
                        <div class="absolute -left-7 sm:-left-8 top-1.5 w-3 h-3 rounded-full border-2 border-zinc-300 bg-white md:static md:mb-6 group-hover:border-brandOrange group-hover:bg-brandOrange transition-all duration-300"></div>
                        <div>
                            <span class="block font-mono text-xs font-medium text-zinc-400 uppercase mb-1.5">04 // Configuration</span>
                            <h3 class="text-base font-medium text-royal mb-2 group-hover:text-brandOrange transition-colors duration-300">Deployment metrics</h3>
                            <p class="text-xs text-zinc-500 font-light leading-relaxed max-w-sm">Detail your precise asset products, expected volume capacity, and choice of cloud hosting environment.</p>
                        </div>
                    </div>

                    <!-- STEP 05 -->
                    <div class="relative group">
                        <div class="absolute -left-7 sm:-left-8 top-1.5 w-3 h-3 rounded-full border-2 border-zinc-300 bg-white md:static md:mb-6 group-hover:border-brandOrange group-hover:bg-brandOrange transition-all duration-300"></div>
                        <div>
                            <span class="block font-mono text-xs font-medium text-zinc-400 uppercase mb-1.5">05 // Alignment</span>
                            <h3 class="text-base font-medium text-royal mb-2 group-hover:text-brandOrange transition-colors duration-300">Project kickoff</h3>
                            <p class="text-xs text-zinc-500 font-light leading-relaxed max-w-sm">Your isolated deployment track is explicitly scheduled and core architecture engineers align.</p>
                        </div>
                    </div>

                    <!-- STEP 06 -->
                    <div class="relative group">
                        <div class="absolute -left-7 sm:-left-8 top-1.5 w-3 h-3 rounded-full border-2 border-zinc-300 bg-white md:static md:mb-6 group-hover:border-brandOrange group-hover:bg-brandOrange transition-all duration-300"></div>
                        <div>
                            <span class="block font-mono text-xs font-medium text-zinc-400 uppercase mb-1.5">06 // Handover</span>
                            <h3 class="text-base font-medium text-royal mb-2 group-hover:text-brandOrange transition-colors duration-300">Delivery & Deployment</h3>
                            <p class="text-xs text-zinc-500 font-light leading-relaxed max-w-sm">Receive full verified platform source code nodes and map your infrastructure launch rails to go live.</p>
                        </div>
                    </div>

                    <!-- STEP 07: THE TERMINAL PREMIUM SOVEREIGN BOX (Spans 2 columns on desktop for visual weight) -->
                    <div class="relative lg:col-span-2 bg-zinc-50 border border-zinc-200/80 rounded-[20px] p-6 md:p-8 shadow-sm hover:border-royal transition-all duration-500 group">
                        <div class="flex items-center gap-2 mb-3 text-brandOrange">
                            <svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
                                <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                            </svg>
                            <span class="font-mono text-xs uppercase tracking-wider font-semibold">Sovereign Asset Status</span>
                        </div>
                        <h3 class="text-lg font-medium text-royal mb-2">You own it from here</h3>
                        <p class="text-xs text-zinc-500 font-light leading-relaxed max-w-xl">
                            Lifetime ownership tier with full system root code file rights. Zero recurring software subscription renewal systems or dynamic transaction revenue sharing models.
                        </p>
                    </div>

                </div>

            </div>
        </section>


        <section class="pt-32 pb-16 px-[5%] bg-white" id="pricing-intro">
            <div class="max-w-[1400px] mx-auto">

                <div class="max-w-3xl mb-20">
                    <span class="font-mono text-xs uppercase tracking-widest text-brandOrange block mb-3">Sovereign Licensing</span>
                    <h2 class="text-3xl md:text-5xl font-normal tracking-tight text-royal leading-tight mb-6">
                        One-time investment. <br />
                        <span class="italic font-serif text-zinc-400">Lifetime ownership.</span>
                    </h2>
                    <p class="text-zinc-500 text-sm md:text-base font-light leading-relaxed max-w-2xl">
                        Purchase once and own your banking software forever. No monthly subscription fees, no annual license renewals, and zero revenue sharing metrics. Compare the blueprint line by line.
                    </p>
                </div>

                <div class="border border-zinc-200 rounded-[24px] bg-zinc-50/40 p-8 md:p-12">

                    <div class="flex flex-col sm:flex-row sm:items-center justify-between pb-8 border-b border-zinc-200 mb-10 gap-4">
                        <div class="flex items-center gap-3">
                            <div class="w-2 h-2 rounded-full bg-brandOrange"></div>
                            <h3 class="text-sm font-mono uppercase tracking-wider text-royal font-medium">Core Asset Deliverables</h3>
                        </div>
                        <span class="text-xs font-mono text-zinc-400">Purchase with confidence</span>
                    </div>

                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-6">

                        <div class="space-y-5">
                            <div class="flex items-start gap-3.5 group">
                                <div class="mt-0.5 w-4 h-4 rounded-full bg-emerald-50 border border-emerald-200 flex items-center justify-center flex-shrink-0">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                </div>
                                <span class="text-sm font-medium text-royal tracking-tight">One-time investment</span>
                            </div>

                            <div class="flex items-start gap-3.5 group">
                                <div class="mt-0.5 w-4 h-4 rounded-full bg-emerald-50 border border-emerald-200 flex items-center justify-center flex-shrink-0">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                </div>
                                <span class="text-sm font-medium text-royal tracking-tight">Lifetime ownership</span>
                            </div>

                            <div class="flex items-start gap-3.5 group">
                                <div class="mt-0.5 w-4 h-4 rounded-full bg-emerald-50 border border-emerald-200 flex items-center justify-center flex-shrink-0">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                </div>
                                <span class="text-sm font-medium text-royal tracking-tight">Full source code included</span>
                            </div>

                            <div class="flex items-start gap-3.5 group">
                                <div class="mt-0.5 w-4 h-4 rounded-full bg-emerald-50 border border-emerald-200 flex items-center justify-center flex-shrink-0">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                </div>
                                <span class="text-sm font-medium text-royal tracking-tight">No revenue sharing</span>
                            </div>
                        </div>

                        <div class="space-y-5">
                            <div class="flex items-start gap-3.5 group">
                                <div class="mt-0.5 w-4 h-4 rounded-full bg-emerald-50 border border-emerald-200 flex items-center justify-center flex-shrink-0">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                </div>
                                <span class="text-sm font-medium text-royal tracking-tight">No annual license fees</span>
                            </div>

                            <div class="flex items-start gap-3.5 group">
                                <div class="mt-0.5 w-4 h-4 rounded-full bg-emerald-50 border border-emerald-200 flex items-center justify-center flex-shrink-0">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                </div>
                                <span class="text-sm font-medium text-royal tracking-tight">Merchant dashboard access</span>
                            </div>

                            <div class="flex items-start gap-3.5 group">
                                <div class="mt-0.5 w-4 h-4 rounded-full bg-emerald-50 border border-emerald-200 flex items-center justify-center flex-shrink-0">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                </div>
                                <span class="text-sm font-medium text-royal tracking-tight">Secure checkout</span>
                            </div>

                            <div class="flex items-start gap-3.5 group">
                                <div class="mt-0.5 w-4 h-4 rounded-full bg-emerald-50 border border-emerald-200 flex items-center justify-center flex-shrink-0">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                </div>
                                <span class="text-sm font-medium text-royal tracking-tight">Invoice generation</span>
                            </div>
                        </div>

                        <div class="space-y-5">
                            <div class="flex items-start gap-3.5 group">
                                <div class="mt-0.5 w-4 h-4 rounded-full bg-emerald-50 border border-emerald-200 flex items-center justify-center flex-shrink-0">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                </div>
                                <span class="text-sm font-medium text-royal tracking-tight">Deployment assistance</span>
                            </div>

                            <div class="flex items-start gap-3.5 group">
                                <div class="mt-0.5 w-4 h-4 rounded-full bg-emerald-50 border border-emerald-200 flex items-center justify-center flex-shrink-0">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                </div>
                                <span class="text-sm font-medium text-royal tracking-tight">Technical documentation</span>
                            </div>

                            <div class="flex items-start gap-3.5 group">
                                <div class="mt-0.5 w-4 h-4 rounded-full bg-royal/5 border border-royal/20 flex items-center justify-center flex-shrink-0">
                                    <span class="w-1.5 h-1.5 rounded-full bg-royal"></span>
                                </div>
                                <span class="text-sm font-medium text-royal tracking-tight flex items-center gap-2">
                                    Optional managed operations
                                    <span class="text-[9px] font-mono tracking-normal bg-royal text-white px-1.5 py-0.5 rounded">SLA</span>
                                </span>
                            </div>
                        </div>

                    </div>

                </div>

                <?php
                // High-density structured database matrix for core financial engines
                $banking_plans = [
                    "starter" => [
                        "title" => "Core Banking Starter",
                        "desc" => "Startups and emerging micro-finance institutions.",
                        "price" => "15,000",
                        "cta_main" => "Acquire Starter Tier",
                        "highlight" => "90 days structural engineering support",
                        "channels" => ["Web Application", "Customer Portal", "Admin Portal"],
                        "groups" => [
                            "Account & Customer Operations" => [
                                "Customer management",
                                "Individual accounts",
                                "Savings accounts",
                                "Current accounts",
                                "Joint accounts",
                                "Account opening",
                                "Digital onboarding",
                                "KYC verification"
                            ],
                            "Transaction & Ledger Rails" => [
                                "Transaction processing",
                                "Internal transfers",
                                "Deposits and withdrawals",
                                "Transaction history",
                                "Account statements",
                                "Standing orders",
                                "Charges and fees",
                                "Interest on savings",
                                "Statements export"
                            ],
                            "Governance & Infrastructure" => [
                                "Customer profiles",
                                "Document upload",
                                "User roles and permissions",
                                "Maker checker (basic)",
                                "Branch (single)",
                                "Notifications (email)",
                                "Reports (standard)",
                                "Dashboards",
                                "Audit trail",
                                "Data export",
                                "Role-based access",
                                "Multi-user access",
                                "Source code ownership",
                                "Self-host or managed hosting",
                                "Technical documentation",
                                "Deployment assistance",
                                "Security best practices",
                                "Backup guidance",
                                "Lifetime ownership"
                            ]
                        ]
                    ],
                    "growth" => [
                        "title" => "Core Banking Growth",
                        "desc" => "Fintech platforms, fast-scaling neobanks, and growing institutions.",
                        "price" => "30,000",
                        "cta_main" => "Acquire Growth Tier",
                        "highlight" => "180 days structural engineering support",
                        "popular" => true,
                        "channels" => ["Web App", "Customer Portal", "Admin Portal", "iOS App Native", "Android App Native", "Internet Banking", "USSD Banking"],
                        "groups" => [
                            "Everything in Starter, plus:" => [
                                "Loan management",
                                "Loan origination",
                                "Loan repayment schedules",
                                "Consumer loans",
                                "Salary advances",
                                "SME loans",
                                "Group lending"
                            ],
                            "Advanced Financial Architecture" => [
                                "Fixed deposits",
                                "Recurring and target savings",
                                "Accounting module",
                                "Chart of accounts",
                                "Multi currency",
                                "Bulk transfers",
                                "Standing orders (advanced)",
                                "Direct debits"
                            ],
                            "Developer Integration & Control" => [
                                "API access",
                                "Developer documentation",
                                "Webhooks",
                                "Sandbox environment",
                                "Approval workflows",
                                "Maker checker (full)",
                                "Audit logs",
                                "Charges and commissions engine",
                                "Interest engine",
                                "Statements (advanced)",
                                "Notifications (SMS and email)",
                                "Limits management",
                                "Reconciliation (basic)",
                                "Reporting suite"
                            ]
                        ]
                    ],
                    "enterprise" => [
                        "title" => "Core Banking Enterprise",
                        "desc" => "Regulated commercial banks, major MFIs, and national operators.",
                        "price" => "60,000",
                        "cta_main" => "Acquire Enterprise Tier",
                        "highlight" => "365 days priority engineering SLA support",
                        "channels" => ["Web App Suite", "Native Mobile Apps", "Internet Banking Portal", "USSD Node", "WhatsApp Banking"],
                        "groups" => [
                            "Everything in Growth, plus:" => [
                                "General ledger",
                                "Treasury management",
                                "Liquidity management",
                                "Money market products",
                                "Investment accounts",
                                "Branch management",
                                "Teller and vault operations"
                            ],
                            "Cards & Value Added Chains" => [
                                "Card management",
                                "Card issuing and controls",
                                "Agent banking",
                                "Agency banking",
                                "Merchant banking",
                                "Open banking APIs",
                                "API gateway",
                                "Switching",
                                "Settlement",
                                "Escrow"
                            ],
                            "Risk, Compliance & Tooling" => [
                                "AML monitoring",
                                "Fraud monitoring",
                                "Transaction monitoring",
                                "Regulatory reporting",
                                "Tax management",
                                "Workflow engine",
                                "Custom branding",
                                "Multi entity",
                                "Multi country",
                                "Collateral management",
                                "Provisioning",
                                "Dispute management",
                                "Cheque management",
                                "Credit scoring",
                                "Priority support",
                                "Dedicated success manager"
                            ]
                        ]
                    ],
                    "enterprise_plus" => [
                        "title" => "Core Banking Enterprise+",
                        "desc" => "Multi-institution conglomerates and complex sovereign cloud tier deployments.",
                        "price" => "Custom",
                        "cta_main" => "Talk to Sales Team",
                        "highlight" => "Custom SLAs & Tailored 24/7/365 white-glove onboarding",
                        "channels" => ["Unified Multi-tenant Infrastructure Framework"],
                        "groups" => [
                            "Everything in Enterprise, plus:" => [
                                "Unlimited institutions",
                                "Unlimited entities and branches",
                                "Custom modules",
                                "Custom integrations",
                                "Dedicated engineering pod",
                                "Tailored deployment architecture",
                                "High-availability setup"
                            ],
                            "Advanced Engineering Operations" => [
                                "On-premise deployment option",
                                "Docker and CI/CD pipelines",
                                "Performance and load engineering",
                                "Security review and hardening",
                                "Custom SLAs",
                                "24/7 priority support",
                                "Quarterly roadmap reviews",
                                "Migration from legacy core solutions",
                                "White-glove institutional onboarding"
                            ]
                        ]
                    ]
                ];
                ?>

                <section class="py-24 bg-white border-b border-zinc-100" id="premium-pricing-engine">
                    <div class="max-w-[1400px] mx-auto">

                        <div class="flex items-center justify-start lg:justify-center overflow-x-auto scrollbar-none border-b border-zinc-200 mb-16 pb-px">
                            <div class="flex space-x-10">
                                <?php foreach ($banking_plans as $key => $plan): ?>
                                    <button
                                        onclick="switchPricingTab('<?= $key ?>')"
                                        id="tab-btn-<?= $key ?>"
                                        class="pricing-tab-btn relative pb-5 text-sm font-medium transition-all duration-300 whitespace-nowrap focus:outline-none <?= isset($plan['popular']) ? 'text-royal font-semibold' : 'text-zinc-400 hover:text-royal' ?>">

                                        <span class="flex items-center gap-2">
                                            <?= $plan['title'] ?>
                                            <?php if (isset($plan['popular'])): ?>
                                                <span class="bg-brandOrange text-white text-[8px] font-mono tracking-widest uppercase font-bold px-2 py-0.5 rounded-full shadow-sm">Popular</span>
                                            <?php endif; ?>
                                        </span>

                                        <div id="tab-line-<?= $key ?>" class="pricing-tab-line absolute bottom-0 left-0 right-0 h-0.5 bg-royal transition-all duration-300 <?= isset($plan['popular']) ? 'opacity-100' : 'opacity-0' ?>"></div>
                                    </button>
                                <?php endforeach; ?>
                            </div>
                        </div>

                        <div class="relative bg-zinc-50 border border-zinc-200/80 rounded-[32px] shadow-sm overflow-hidden min-h-[620px]">

                            <?php foreach ($banking_plans as $key => $plan): ?>
                                <div id="plan-panel-<?= $key ?>" class="pricing-panel flex flex-col lg:flex-row items-stretch <?= isset($plan['popular']) ? '' : 'hidden' ?>">

                                    <div class="w-full lg:w-[420px] bg-white border-b lg:border-b-0 lg:border-r border-zinc-200 p-8 md:p-12 flex flex-col justify-between flex-shrink-0 relative">

                                        <div>
                                            <div class="flex items-center gap-2 mb-6">
                                                <span class="w-1.5 h-1.5 rounded-full bg-brandOrange"></span>
                                                <span class="font-mono text-[10px] tracking-widest text-zinc-400 uppercase font-medium">Sovereign Architecture</span>
                                            </div>

                                            <h3 class="text-3xl font-normal text-royal tracking-tight mb-3"><?= $plan['title'] ?></h3>
                                            <p class="text-xs text-zinc-500 font-light leading-relaxed mb-8"><?= $plan['desc'] ?></p>

                                            <div class="bg-zinc-50/70 border border-zinc-100 rounded-2xl p-6 mb-8">
                                                <p class="text-[10px] font-mono uppercase tracking-wider text-zinc-400 mb-1.5">Capital Commitment</p>
                                                <div class="flex items-baseline text-brandOrange">
                                                    <?php if ($plan['price'] !== 'Custom'): ?><span class="text-4xl font-light tracking-tight mr-1">$</span><?php endif; ?>
                                                    <span class="text-5xl md:text-6xl font-normal tracking-tighter leading-none"><?= $plan['price'] ?></span>
                                                </div>
                                                <div class="border-t border-dashed border-zinc-200 mt-4 pt-3">
                                                    <p class="text-[10px] font-mono uppercase tracking-wide text-zinc-500 flex items-center gap-1.5">
                                                        <span class="w-1 h-1 rounded-full bg-emerald-500"></span> One-time outlay · lifetime ownership
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="mb-8">
                                                <h4 class="text-[10px] font-mono uppercase tracking-wider text-royal font-semibold mb-3">Target Platform Deployments:</h4>
                                                <div class="flex flex-wrap gap-1.5">
                                                    <?php foreach ($plan['channels'] as $channel): ?>
                                                        <span class="text-[10px] bg-zinc-50 border border-zinc-200 text-zinc-600 px-2.5 py-1 rounded-lg font-medium"><?= $channel ?></span>
                                                    <?php endforeach; ?>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="space-y-3 pt-6 border-t border-zinc-100">
                                            <a href="#checkout" class="w-full py-4 bg-royal text-white rounded-xl text-center flex items-center justify-center gap-2 text-xs font-bold uppercase tracking-widest hover:bg-brandOrange shadow-sm transition-all duration-300">
                                                <span><?= $plan['cta_main'] ?></span>
                                                <i class="ri-arrow-right-line text-sm opacity-90"></i>
                                            </a>
                                            <a href="#demo" class="w-full py-3.5 border border-zinc-200 text-royal bg-white rounded-xl text-center flex items-center justify-center gap-2 text-xs font-bold uppercase tracking-widest hover:border-royal hover:bg-zinc-50 transition-all duration-300">
                                                <i class="ri-terminal-window-line text-sm text-zinc-400"></i>
                                                <span>Request Tech Demo</span>
                                            </a>
                                            <p class="text-center text-[9px] font-mono text-zinc-400 uppercase tracking-widest pt-2">
                                                <i class="ri-shield-check-line text-emerald-500 align-middle mr-1 text-xs"></i><?= $plan['highlight'] ?>
                                            </p>
                                        </div>
                                    </div>

                                    <div class="flex-grow p-8 md:p-12 max-h-[none] lg:max-h-[820px] overflow-y-auto custom-scrollbar bg-zinc-50/30">
                                        <div class="space-y-12">
                                            <?php foreach ($plan['groups'] as $group_title => $items): ?>
                                                <div>
                                                    <h4 class="text-xs font-mono uppercase tracking-wider text-royal font-bold pb-3 border-b border-zinc-200 mb-6 flex items-center justify-between">
                                                        <span><?= $group_title ?></span>
                                                        <span class="text-[9px] font-normal tracking-normal text-zinc-400 normal-case font-sans"><?= count($items) ?> core modules included</span>
                                                    </h4>

                                                    <div class="grid sm:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-4">
                                                        <?php foreach ($items as $item): ?>
                                                            <div class="flex items-start gap-2.5 group">
                                                                <div class="mt-0.5 flex-shrink-0 w-4 h-4 rounded-full bg-emerald-50 border border-emerald-100 flex items-center justify-center">
                                                                    <i class="ri-check-line text-[10px] text-emerald-600 font-bold"></i>
                                                                </div>
                                                                <span class="text-xs text-zinc-600 font-light tracking-tight group-hover:text-royal transition-colors"><?= $item ?></span>
                                                            </div>
                                                        <?php endforeach; ?>
                                                    </div>
                                                </div>
                                            <?php endforeach; ?>
                                        </div>
                                    </div>

                                </div>
                            <?php endforeach; ?>

                        </div>
                    </div>
                </section>

                <script>
                    function switchPricingTab(activeKey) {
                        // Hide all feature card views
                        document.querySelectorAll('.pricing-panel').forEach(panel => {
                            panel.classList.add('hidden');
                        });

                        // Deactivate active indicators on header tracking elements
                        document.querySelectorAll('.pricing-tab-btn').forEach(btn => {
                            btn.classList.remove('text-royal', 'font-semibold');
                            btn.classList.add('text-zinc-400');
                        });
                        document.querySelectorAll('.pricing-tab-line').forEach(line => {
                            line.classList.remove('opacity-100');
                            line.classList.add('opacity-0');
                        });

                        // Unveil targeted architecture node components
                        document.getElementById('plan-panel-activeKey'.replace('activeKey', activeKey)).classList.remove('hidden');
                        document.getElementById('tab-btn-activeKey'.replace('activeKey', activeKey)).classList.add('text-royal', 'font-semibold');
                        document.getElementById('tab-btn-activeKey'.replace('activeKey', activeKey)).classList.remove('text-zinc-400');
                        document.getElementById('tab-line-activeKey'.replace('activeKey', activeKey)).classList.add('opacity-100');
                        document.getElementById('tab-line-activeKey'.replace('activeKey', activeKey)).classList.remove('opacity-0');
                    }
                </script>

                <style>
                    /* Optional refined scrollbar styling for the right feature pane */
                    .custom-scrollbar::-webkit-scrollbar {
                        width: 6px;
                    }

                    .custom-scrollbar::-webkit-scrollbar-track {
                        background: transparent;
                    }

                    .custom-scrollbar::-webkit-scrollbar-thumb {
                        background: #e4e4e7;
                        border-radius: 10px;
                    }

                    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
                        background: #d4d4d8;
                    }
                </style>




            </div>
        </section>



        <?php
        $matrix_categories = [
            "Core Banking Operations" => [
                "Accounts and savings" => ["starter" => true, "growth" => true, "enterprise" => true, "enterprise_plus" => true],
                "Loans and lending" => ["starter" => false, "growth" => true, "enterprise" => true, "enterprise_plus" => true],
                "Multi currency" => ["starter" => false, "growth" => true, "enterprise" => true, "enterprise_plus" => true],
            ],
            "Integration & Access Channels" => [
                "API access" => ["starter" => false, "growth" => true, "enterprise" => true, "enterprise_plus" => true],
                "Mobile applications" => ["starter" => false, "growth" => true, "enterprise" => true, "enterprise_plus" => true],
                "Open banking APIs" => ["starter" => false, "growth" => false, "enterprise" => true, "enterprise_plus" => true],
            ],
            "Enterprise Infrastructure" => [
                "General ledger" => ["starter" => false, "growth" => false, "enterprise" => true, "enterprise_plus" => true],
                "Treasury and liquidity" => ["starter" => false, "growth" => false, "enterprise" => true, "enterprise_plus" => true],
                "Card management" => ["starter" => false, "growth" => false, "enterprise" => true, "enterprise_plus" => true],
                "Agency and agent banking" => ["starter" => false, "growth" => false, "enterprise" => true, "enterprise_plus" => true],
                "Multi entity and country" => ["starter" => false, "growth" => false, "enterprise" => true, "enterprise_plus" => true],
                "On-premise deployment" => ["starter" => false, "growth" => false, "enterprise" => true, "enterprise_plus" => true],
                "Unlimited institutions" => ["starter" => false, "growth" => false, "enterprise" => false, "enterprise_plus" => true],
            ],
            "Security & DevOps Rails" => [
                "AML and fraud monitoring" => ["starter" => false, "growth" => false, "enterprise" => true, "enterprise_plus" => true],
                "CI/CD pipelines" => ["starter" => false, "growth" => false, "enterprise" => false, "enterprise_plus" => true],
                "Dedicated engineering pod" => ["starter" => false, "growth" => false, "enterprise" => false, "enterprise_plus" => true],
            ],
            "Sovereign Protocols" => [
                "Source code & lifetime ownership" => ["starter" => "✓", "growth" => "✓", "enterprise" => "✓", "enterprise_plus" => "✓"],
                "Support window / SLAs" => ["starter" => "90 Days", "growth" => "180 Days", "enterprise" => "365 Days", "enterprise_plus" => "24/7 Priority"],
            ]
        ];
        ?>

        <section class="py-24 px-[5%] bg-zinc-50" id="matrix-comparison-engine">
            <div class="max-w-[1400px] mx-auto">

                <!-- Header Introduction Block -->
                <div class="mb-12 max-w-2xl">
                    <h2 class="text-3xl font-normal tracking-tight text-royal mb-3">Architectural Comparison</h2>
                    <p class="text-xs text-zinc-500 font-light leading-relaxed">
                        Every tier awards absolute source code control and perpetual sovereignty. Higher operational nodes inject deeper ledger mechanics, custom infrastructure, and direct engineering alignment.
                    </p>
                </div>

                <!-- Dashboard Wrapper Table Panel -->
                <div class="bg-white border border-zinc-200 rounded-[24px] shadow-sm overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="w-full text-left border-collapse min-w-[800px]">

                            <!-- Table Head Columns -->
                            <thead>
                                <tr class="bg-zinc-50/70 border-b border-zinc-200">
                                    <th class="p-6 text-xs font-mono uppercase tracking-wider text-royal font-bold w-[35%]">Capability Framework</th>
                                    <th class="p-6 text-xs font-mono uppercase tracking-wider text-royal font-bold text-center w-[16%]">Starter</th>
                                    <th class="p-6 text-xs font-mono uppercase tracking-wider text-royal font-bold text-center w-[16%]">Growth</th>
                                    <th class="p-6 text-xs font-mono uppercase tracking-wider text-royal font-bold text-center w-[16%]">Enterprise</th>
                                    <th class="p-6 text-xs font-mono uppercase tracking-wider text-royal font-bold text-center w-[16%] bg-zinc-50/40">Enterprise+</th>
                                </tr>
                            </thead>

                            <!-- Table Body Rows -->
                            <tbody class="divide-y divide-zinc-100">
                                <?php foreach ($matrix_categories as $category_name => $features): ?>

                                    <!-- Header Sub-category section -->
                                    <tr class="bg-zinc-50/30">
                                        <td colspan="5" class="px-6 py-3.5 text-[10px] font-mono font-bold tracking-widest uppercase text-zinc-400 border-y border-zinc-100">
                                            <?= $category_name ?>
                                        </td>
                                    </tr>

                                    <?php foreach ($features as $feature_name => $tiers): ?>
                                        <tr class="hover:bg-zinc-50/40 transition-colors group">

                                            <!-- Feature Description Node -->
                                            <td class="p-6 text-xs font-light tracking-tight text-zinc-600 group-hover:text-royal transition-colors">
                                                <?= $feature_name ?>
                                            </td>

                                            <!-- Render Columns Loops dynamically -->
                                            <?php foreach (["starter", "growth", "enterprise", "enterprise_plus"] as $t_key): ?>
                                                <td class="p-6 text-center text-xs <?= $t_key === 'enterprise_plus' ? 'bg-zinc-50/10' : '' ?>">
                                                    <?php if (is_bool($tiers[$t_key])): ?>
                                                        <?php if ($tiers[$t_key] === true): ?>
                                                            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-emerald-50 border border-emerald-100">
                                                                <i class="ri-check-line text-[10px] text-emerald-600 font-bold"></i>
                                                            </span>
                                                        <?php else: ?>
                                                            <span class="text-zinc-300 font-light">—</span>
                                                        <?php endif; ?>
                                                    <?php else: ?>
                                                        <!-- Custom Explicit Values Display Label -->
                                                        <span class="font-mono text-[11px] font-medium <?= $tiers[$t_key] === '24/7 Priority' ? 'text-brandOrange font-semibold' : 'text-royal' ?>">
                                                            <?= $tiers[$t_key] ?>
                                                        </span>
                                                    <?php endif; ?>
                                                </td>
                                            <?php endforeach; ?>

                                        </tr>
                                    <?php endforeach; ?>

                                <?php endforeach; ?>
                            </tbody>

                        </table>
                    </div>
                </div>

            </div>
        </section>






        <?php
        $faqs = [
            [
                "q" => "Do I own the source code?",
                "a" => "Yes. Every plan includes full source code ownership with no revenue sharing and no annual license fees. <br><small class='block mt-2 opacity-60'>• 100% Unencrypted • Complete Customization • No Lock-in</small>",
                "icon" => "ri-code-box-line"
            ],
            [
                "q" => "Do I own the intellectual property (IP)?",
                "a" => "Yes. The intellectual property in your deployment, including all custom modules built for you, belongs entirely to you. <br><small class='block mt-2 opacity-60'>• Institutional Sovereignty • Private Repository Asset</small>",
                "icon" => "ri-shield-keyhole-line"
            ],
            [
                "q" => "Is this a one-time payment?",
                "a" => "Yes. You pay once and own the software for life, with no recurring subscription tiers, monthly fees, or mandatory renewals. <br><small class='block mt-2 opacity-60'>• Perpetual License • CAPEX Optimized • Optional Support Contracts</small>",
                "icon" => "ri-price-tag-3-line"
            ],
            [
                "q" => "Can I white-label the platform?",
                "a" => "Yes. Custom branding variables are exposed natively on Enterprise, and source code ownership lets you fully rebrand any module. <br><small class='block mt-2 opacity-60'>• Neutral Platform Architecture • Bespoke Client Styling</small>",
                "icon" => "ri-palette-line"
            ],
            [
                "q" => "Can I connect Visa & Mastercard rails?",
                "a" => "Yes. Card processing and global scheme connectivity can be provisioned natively via Infrastructure Access layers and chosen card processors. <br><small class='block mt-2 opacity-60'>• Tokenization Engine • PCI-DSS Compatible Interfaces</small>",
                "icon" => "ri-bank-card-line"
            ],
            [
                "q" => "Can I connect local and regional switches?",
                "a" => "Yes. The modular switching framework supports deep low-level API integrations with local regional clearing nodes and central bank switches. <br><small class='block mt-2 opacity-60'>• ISO 8583 Bridge Mapping • Real-time Clearing Rails</small>",
                "icon" => "ri-git-merge-line"
            ],
            [
                "q" => "Can I support multiple separate institutions?",
                "a" => "Yes. Multi-entity routing is native from the Enterprise tier, and Enterprise+ unlocks unlimited isolated tenant domains. <br><small class='block mt-2 opacity-60'>• Multi-tenant Ledger • Sovereign Instance Partitioning</small>",
                "icon" => "ri-git-repository-line"
            ],
            [
                "q" => "Can I support non-interest & Islamic banking?",
                "a" => "Yes. Specialized profit-sharing formulas and zero-interest parameters are fully customizable through our flexible product and interest engines. <br><small class='block mt-2 opacity-60'>• Custom Calculation Hooks • Sharia-Compliant Rule Layouts</small>",
                "icon" => "ri-scales-line"
            ],
            [
                "q" => "Can I host on AWS or Microsoft Azure?",
                "a" => "Yes. You can deploy across any major public cloud framework. Nesvra supplies native deployment scripts and engineering architecture guidance. <br><small class='block mt-2 opacity-60'>• AWS CloudFormation • Azure DevOps Blueprints</small>",
                "icon" => "ri-cloud-line"
            ],
            [
                "q" => "Can I deploy on-premise for regulatory needs?",
                "a" => "Yes. On-premise private cloud containment is standard practice and fully supported on Enterprise and Enterprise+ frameworks. <br><small class='block mt-2 opacity-60'>• Air-gapped Compatibilities • Complete Database Sovereignty</small>",
                "icon" => "ri-server-line"
            ],
            [
                "q" => "Do I get Docker containers and CI/CD pipelines?",
                "a" => "Yes. System Docker files are provided out of the box, and automated Git-driven CI/CD pipelines are fully pre-configured on Enterprise+. <br><small class='block mt-2 opacity-60'>• Containerized Microservices • Automated Testing Clusters</small>",
                "icon" => "ri-terminal-window-line"
            ],
            [
                "q" => "Is comprehensive technical documentation included?",
                "a" => "Yes. Complete structural and API developer manuals are provisioned, starting natively with the Growth environment tier. <br><small class='block mt-2 opacity-60'>• OpenAPI Swagger Schema • Database Schema Visualizations</small>",
                "icon" => "ri-book-read-line"
            ],
            [
                "q" => "Can I add USSD and POS terminal networks?",
                "a" => "Yes. USSD matrix configurations unlock on the Growth plan, while POS merchant terminal acquiring integrates directly into the merchant core. <br><small class='block mt-2 opacity-60'>• Session Gateways • ISO Terminal Message Processing</small>",
                "icon" => "ri-smartphone-line"
            ],
            [
                "q" => "Can I integrate custom workflows & Maker-Checker approvals?",
                "a" => "Yes. Basic authorization comes standard. Advanced multi-stage Maker-Checker security controls unlock on Growth and Enterprise tiers. <br><small class='block mt-2 opacity-60'>• Granular Dual-Control Rules • Full Cryptographic Audit Logs</small>",
                "icon" => "ri-user-shared-line"
            ],
            [
                "q" => "Does it natively support multi-currency balances?",
                "a" => "Yes. Multi-currency ledgers are active from the Growth tier, and full cross-border multi-country infrastructure profiles run on Enterprise. <br><small class='block mt-2 opacity-60'>• Real-time FX Peg Adjustments • Multi-asset Sub-ledgers</small>",
                "icon" => "ri-global-line"
            ],
            [
                "q" => "Can I integrate biometric or national ID checks?",
                "a" => "Yes. Advanced eKYC checks, biometric data structures, and national identification APIs tie directly via our core hook modules. <br><small class='block mt-2 opacity-60'>• Structural Hook Architecture • Identity Provider Adaptors</small>",
                "icon" => "ri-fingerprint-line"
            ],
            [
                "q" => "Can I create custom loan & recurring savings tiers?",
                "a" => "Yes. The loan origination mechanics and target/fixed savings engines let you script dynamic amortization terms and interest rates. <br><small class='block mt-2 opacity-60'>• Flexible Term Calculators • Automatic Liquidation Rules</small>",
                "icon" => "ri-refund-2-line"
            ],
            [
                "q" => "Can Nesvra manage hosting operations for us?",
                "a" => "Yes. While complete self-hosting is standard, you can choose to offload your framework management to Nesvra’s fully isolated cloud operations. <br><small class='block mt-2 opacity-60'>• Isolated Zero-Knowledge Clouds • Monitored Infrastructure</small>",
                "icon" => "ri-service-line"
            ],
            [
                "q" => "Can we migrate data from our current core system?",
                "a" => "Yes. Structural legacy data migrations are supported, backed by comprehensive white-glove engineering alignments on Enterprise+. <br><small class='block mt-2 opacity-60'>• Schema Translation Tools • Verified Ledger Reconciliation</small>",
                "icon" => "ri-arrow-left-right-line"
            ],
            [
                "q" => "How long does a live production deployment take?",
                "a" => "Typically 4 to 8 weeks. This presents an elite path forward compared to the 12 to 24-month horizon required to spec an institutional build in-house. <br><small class='block mt-2 opacity-60'>• Pre-engineered Core Primitives • Fast Market Alignment</small>",
                "icon" => "ri-flashlight-line"
            ],
            [
                "q" => "Do I need an active banking license to operate?",
                "a" => "Nesvra supplies the underlying technology layer, not the operational license. Regulated banking activities require matching institutional permits. <br><small class='block mt-2 opacity-60'>• Sandbox Testing Permitted • Partner Bank Models Supported</small>",
                "icon" => "ri-auction-line"
            ],
            [
                "q" => "Can the architecture scale to millions of accounts?",
                "a" => "Yes. The core software environment is engineered for horizontally scaled high-availability, with targeted optimizations built into Enterprise+. <br><small class='block mt-2 opacity-60'>• Scalable Connection Pools • Sub-millisecond Execution Ledger</small>",
                "icon" => "ri-dashboard-3-line"
            ]
        ];
        ?>

        <section class="py-24 px-[5%] bg-white overflow-hidden" id="faq-vault">
            <div class="max-w-[1200px] mx-auto">

                <div class="text-center mb-16">
                    <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-royal block mb-4">Core Architecture</span>
                    <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-royal leading-tight">
                        Common Questions. <br>
                        <span class="italic font-serif text-brandOrange">Expert Answers.</span>
                    </h2>
                </div>

                <div class="grid md:grid-cols-2 gap-4">
                    <?php foreach ($faqs as $faq): ?>
                        <div class="group relative p-8 rounded-[24px] bg-zinc-50/50 border border-zinc-100/80 transition-all duration-500 hover:bg-royal hover:shadow-xl hover:shadow-royal/10 overflow-hidden cursor-pointer">

                            <div class="relative z-10">
                                <div class="flex items-center gap-4 mb-2">
                                    <i class="<?= $faq['icon'] ?> text-royal group-hover:text-brandOrange transition-colors"></i>
                                    <h3 class="text-sm font-bold text-royal group-hover:text-white transition-colors duration-300 pr-6">
                                        <?= $faq['q'] ?>
                                    </h3>
                                </div>

                                <div class="max-h-0 opacity-0 group-hover:max-h-[300px] group-hover:opacity-100 transition-all duration-500 ease-in-out overflow-hidden">
                                    <div class="pt-4 text-zinc-500 group-hover:text-white/70 text-[13px] leading-relaxed">
                                        <?= $faq['a'] ?>
                                    </div>
                                </div>
                            </div>

                            <div class="absolute top-8 right-8">
                                <div class="w-6 h-6 rounded-full border border-zinc-200 group-hover:border-white/20 flex items-center justify-center transition-all">
                                    <i class="ri-add-line text-xs text-royal group-hover:text-white group-hover:rotate-45 transition-all"></i>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>

                <div class="mt-12 text-center">
                    <p class="text-xs text-zinc-500 font-[400]">
                        Don't see your specific infrastructure requirement?
                        <a href="#demo" class="text-royal border-b border-royal/20 hover:text-brandOrange hover:border-brandOrange transition-all ml-1">
                            Talk to our engineering team
                        </a>
                    </p>
                </div>

            </div>
        </section>




        <section class="py-24 px-[5%] bg-white overflow-hidden" id="final-call">
            <div class="max-w-[1200px] mx-auto">
                <!-- Main Card Container with Subtle High-Fidelity Glass-Border Stroke -->
                <div class="relative w-full md:h-[450px] rounded-[32px] border border-zinc-900/5 overflow-hidden flex items-center justify-center group bg-zinc-950">

                    <!-- Asset Layer with Zoom & Smooth Backdrop Darkening -->
                    <div class="absolute inset-0 z-0">
                        <img src="https://plus.unsplash.com/premium_photo-1682096219922-1b05c4e9875c?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?auto=format&fit=crop&q=80"
                            alt="Global Connectivity"
                            class="w-full h-full object-cover opacity-60 scale-100 group-hover:scale-[1.03] transition-transform duration-[1200ms] ease-out">

                        <div class="absolute inset-0 bg-black/30"></div>
                    </div>

                    <!-- Foreground Content Module -->
                    <div class="relative z-10 w-full px-6 py-20 md:py-0 text-center">
                        <div class="max-w-[720px] mx-auto" data-aos="fade-up" data-aos-duration="800">

                            <!-- Monospace Pre-Header Tag -->
                            <!-- <span class="inline-block font-mono text-[10px] uppercase tracking-[0.4em] text-brandOrange mb-6 bg-brandOrange/10 px-3 py-1 rounded-full border border-brandOrange">
                        Immediate Deployment Available
                    </span> -->

                            <h2 class="text-4xl md:text-6xl font-[400] tracking-tighter text-white leading-[1.1] mb-6">
                                Ready to own your <br>
                                <span class="italic font-serif text-brandOrange">banking software?</span>
                            </h2>

                            <p class="text-white/70 text-sm md:text-base mb-10 max-w-[540px] mx-auto leading-relaxed tracking-tight font-light">
                                One-time investment, lifetime ownership and full source code. Deploy it yourself or let Nesvra manage it for you.
                            </p>

                            <!-- Interactive Micro-engineered Button Clusters -->
                            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 max-w-xl mx-auto">

                                <!-- Primary Conversion Call -->
                                <a href="checkout?product=core-banking" class="w-full sm:w-auto px-8 py-4 bg-brandOrange text-white rounded-full font-medium text-xs uppercase tracking-widest hover:bg-white hover:text-royal transition-all duration-300 shadow-lg shadow-brandOrange/10 flex items-center justify-center gap-2 group/btn">
                                    <span>Acquire Core Banking</span>
                                    <i class="ri-arrow-right-line text-xs transition-transform duration-300 group-hover/btn:translate-x-1"></i>
                                </a>

                                <!-- High-Fidelity Glassmorphic Secondary Call -->
                                <a href="get-demo.php?product=core-banking" class="w-full sm:w-auto px-8 py-4 bg-white/10 backdrop-blur-md text-white rounded-full font-medium text-xs uppercase tracking-widest hover:bg-white hover:text-royal transition-all duration-300 border border-white/10 flex items-center justify-center gap-2 group/btn2">
                                    <span>Request Demo</span>
                                    <i class="ri-play-circle-line text-sm text-brandOrange transition-transform duration-300 group-hover/btn2:scale-110"></i>
                                </a>

                            </div>

                        </div>
                    </div>

                    <!-- Ambient Luxury Soft Blur Glows -->
                    <div class="absolute top-0 right-0 w-80 h-80 bg-blue-500/10 rounded-full blur-[120px] pointer-events-none"></div>
                    <div class="absolute bottom-0 left-0 w-80 h-80 bg-brandOrange/10 rounded-full blur-[120px] pointer-events-none"></div>
                </div>
            </div>
        </section>





        <?php include 'components/Scroll-to-top.php'; ?>
        <?php include 'components/footer.php'; ?>

    </body>

    </html>