<!DOCTYPE html>
<html lang="en">
<?php
$pagetitle = "Remittance | Nesvra";
include 'components/head.php' ?>

<body class="bg-white">

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

    <section class="relative max-h-[84dvh] h-fit w-full overflow-hidden">

        <div class="absolute inset-0 z-0">
            <div class="absolute inset-0 bg-black/30 z-10"></div> <img src="https://i.pinimg.com/1200x/df/9c/df/df9cdf0291e56c76372b4284456f06e2.jpg"
                class="w-full h-full object-cover bg-fixed bg-top"
                style="background-attachment: fixed; background-position: center;" alt="Nesvra Infrastructure" />
        </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">


            <h1 data-aos="fade-right" data-aos-delay="200"
                class="max-w-3xl text-4xl md:text-5xl font-[400] tracking-[-0.05em] leading-[1.05] text-white ">
                Launch a Global Remittance Platform <br class="hidden md:block"> <span class="italic font-serif"> with Enterprise-Grade Infrastructure </span>

            </h1>

            <p data-aos="fade-right" data-aos-delay="400"
                class="mt-3 max-w-3xl text-sm  text-white/70 font-mono md:leading-relaxed leading-snug">
                Build and own a white-label cross-border money transfer platform with multi-currency wallets, compliance-ready infrastructure, and global payouts launch faster, scale worldwide, and keep full control.
            </p>

            <div data-aos="fade-up" data-aos-delay="600" class="mt-4 flex flex-wrap gap-4">

                <a href="get-demo?product=remittance"
                    class="shimmer-effect 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] active:translate-y-[2px] shadow-[0_15px_30px_-5px_rgba(255,138,0,0.4)]">

                    <div class="absolute inset-0 rounded-full border-t border-white/30 pointer-events-none"></div>

                    <div class="absolute inset-0 rounded-full bg-gradient-to-b from-white/10 to-transparent opacity-50">
                    </div>

                    <i data-lucide="play-circle" class="w-4 h-4 text-white"></i>
                    <span class="font-sans font-[600] tracking-tight text-sm"> Schedule Live Demo </span>
                </a>

                    <a href="#investment-plans"
                        class="shimmer-effect 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] active:scale-[0.95] shadow-[0_20px_50px_-10px_rgba(0,0,0,0.5)]">
                        <div class="absolute inset-0 rounded-full border border-white/10 pointer-events-none"></div>
                        <span class="font-sans font-[500] tracking-tight text-sm"> See Profit & ROI Potential</span>
                        <i data-lucide="arrow-right" class="group-hover:translate-x-1 transition-transform w-4 h-4"></i>
                    </a>

            </div>





        </div>


    </section>

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

            <div class="mb-10" data-aos="fade-up" data-aos-duration="1000">
                <span class="font-mono text-[11px] uppercase tracking-[0.4em] text-brandOrange">{01} THE SMART INVESTMENT — YOUR FINTECH DESTINY</span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter mt-6 text-royal max-w-[900px] mx-auto leading-[1.1]">
                    From Zero to Global <span class="italic font-serif  text-electric"> <br>
                        Remittance Leader.</span>
                </h2>
                <p class="text-soft text-lg mt-3 max-w-[800px] mx-auto font-sans leading-relaxed">
                    Stop gambling on developers. Stop bleeding cash. Nesvra transforms your vision into a live, revenue-generating remittance business with zero technical headaches.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-0 border border-gray-100 rounded-[32px] overflow-hidden shadow-[0_40px_100px_-20px_rgba(8,31,92,0.05)]" data-aos="fade-up" data-aos-delay="200">

                <div class="p-10 border-r border-b lg:border-b-0 border-gray-100 flex flex-col gap-4 group hover:bg-gray-50 transition-colors text-left">
                    <div class="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center text-royal group-hover:bg-royal group-hover:text-white transition-all">
                        <i class="ri-flashlight-line text-xl"></i>
                    </div>
                    <div class="mt-4">
                        <h3 class="text-4xl font-semibold tracking-tighter text-royal">12x</h3>
                        <p class="font-mono text-[10px] uppercase tracking-wider text-electric mt-2">Velocity Unleashed</p>
                        <p class="text-[13px] text-soft mt-4 leading-snug">Faster launch than building from scratch. Go live in weeks, not years.</p>
                    </div>
                </div>

                <div class="p-10 border-r border-b lg:border-b-0 border-gray-100 flex flex-col gap-4 group hover:bg-gray-50 transition-colors text-left">
                    <div class="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center text-royal group-hover:bg-royal group-hover:text-white transition-all">
                        <i class="ri-funds-line text-xl"></i>
                    </div>
                    <div class="mt-4">
                        <h3 class="text-4xl font-semibold tracking-tighter text-royal">94%</h3>
                        <p class="font-mono text-[10px] uppercase tracking-wider text-soft mt-2">Capital Efficiency</p>
                        <p class="text-[13px] text-soft mt-4 leading-snug">Cost reduction compared to traditional software development cycles.</p>
                    </div>
                </div>

                <div class="p-10 border-r border-b lg:border-b-0 border-gray-100 flex flex-col gap-4 group hover:bg-gray-50 transition-colors text-left">
                    <div class="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center text-royal group-hover:bg-royal group-hover:text-white transition-all">
                        <i class="ri-safe-2-line text-xl"></i>
                    </div>
                    <div class="mt-4">
                        <h3 class="text-4xl font-semibold tracking-tighter text-royal">$150K+</h3>
                        <p class="font-mono text-[10px] uppercase tracking-wider text-brandOrange mt-2">Immediate Savings</p>
                        <p class="text-[13px] text-soft mt-4 leading-snug">The amount saved in upfront dev costs and carrier integration fees.</p>
                    </div>
                </div>

                <div class="p-10 flex flex-col gap-4 bg-royal group relative overflow-hidden text-left">
                    <div class="absolute -top-10 -right-10 w-32 h-32 bg-electric/20 blur-[60px] rounded-full"></div>

                    <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-white relative z-10">
                        <i class="ri-code-s-slash-line text-xl"></i>
                    </div>
                    <div class="mt-4 relative z-10">
                        <h3 class="text-4xl font-semibold tracking-tighter text-white">100%</h3>
                        <p class="font-mono text-[10px] uppercase tracking-wider text-brandOrange mt-2">Total IP Autonomy</p>
                        <p class="text-[13px] text-white/70 mt-4 leading-snug">Code ownership delivered. No monthly per-user fees. You own it forever.</p>
                    </div>
                </div>

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




    <section class="py-24 px-[5%] bg-white" id="infrastructure-stack">
        <div class="max-w-[1200px] mx-auto">

            <div class="text-center mb-20" data-aos="fade-up">
                <span class="font-mono text-[11px] uppercase tracking-[0.4em] text-electric block mb-4">{02}Enterprise-Grade Infrastructure</span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-royal leading-tight">
                    The Most Advanced Remittance Ecosystem <br>
                    <span class="italic font-serif text-brandOrange">Built for Scale & Trust.</span>
                </h2>
                <p class="text-soft text-lg mt-8 max-w-[750px] mx-auto leading-relaxed font-sans">
                    Everything you need to launch, operate, and dominate cross-border payments—from user dashboards to admin controls, all pre-built, battle-tested, and ready to deploy.
                </p>
            </div>

            <div id="user-dashboard-features">
                <div class="max-w-[1250px] mx-auto">

                    <div class="flex items-center gap-6 mb-4" data-aos="fade-right">
                        <div class="w-14 h-14 rounded-2xl bg-royal flex items-center justify-center shadow-lg shadow-royal/20">
                            <i class="ri-user-settings-line text-white text-2xl"></i>
                        </div>
                        <h2 class="text-3xl md:text-4xl font-[400] tracking-tighter text-royal">
                            Intuitive User Dashboard <span class="text-electric">Built for Conversion</span>
                        </h2>
                    </div>

                    <div class="grid lg:grid-cols-3 gap-6">

                        <div class="bg-white p-10 rounded-[32px] border border-zinc-100 shadow-[0_20px_50px_-20px_rgba(0,0,0,0.05)] hover:shadow-xl hover:-translate-y-1 transition-all duration-500 group">
                            <div class="flex items-center gap-4 mb-6">
                                <i class="ri-pulse-line text-2xl text-royal group-hover:text-electric transition-colors"></i>
                                <h3 class="text-xl font-[400] text-royal tracking-tight">Real‑Time Financial Hub</h3>
                            </div>

                            <ul class="space-y-6">
                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-[13px] leading-relaxed text-soft"><span class="font-bold text-royal">Available Balance</span> — Live CAD balance, instant sync after every transaction</p>
                                    </div>
                                </li>
                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-[13px] leading-relaxed text-soft"><span class="font-bold text-royal">Processing Payments</span> — Track funds in transit with settlement ETA</p>
                                    </div>
                                </li>
                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-[13px] leading-relaxed text-soft"><span class="font-bold text-royal">Completed History</span> — Full audit trail, downloadable receipts & statements</p>
                                    </div>
                                </li>
                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-[13px] leading-relaxed text-soft"><span class="font-bold text-royal">Live Exchange Rates</span> — CAD/XAF, CAD/USD, CAD/AED + 40+ currencies</p>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="bg-white p-10 rounded-[32px] border border-zinc-100 shadow-[0_20px_50px_-20px_rgba(0,0,0,0.05)] hover:shadow-xl hover:-translate-y-1 transition-all duration-500 group">
                            <div class="flex items-center gap-4 mb-6">
                                <i class="ri-flashlight-line text-2xl text-royal group-hover:text-brandOrange transition-colors"></i>
                                <h3 class="text-xl font-[400] text-royal tracking-tight">Quick Actions & Navigation</h3>
                            </div>

                            <ul class="space-y-6">
                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-[13px] leading-relaxed text-soft"><span class="font-bold text-royal">Send Money</span> — One-click initiation, smart recipient selection</p>
                                    </div>
                                </li>
                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-[13px] leading-relaxed text-soft"><span class="font-bold text-royal">Transaction History</span> — Filter by date/status/amount, export CSV/PDF</p>
                                    </div>
                                </li>
                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-[13px] leading-relaxed text-soft"><span class="font-bold text-royal">Recipients Management</span> — Save frequent contacts, quick-repeat transfers</p>
                                    </div>
                                </li>
                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-[13px] leading-relaxed text-soft"><span class="font-bold text-royal">Track Transfer</span> — Real-time status: Pending → Processing → Completed</p>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="bg-white p-10 rounded-[32px] border border-zinc-100 shadow-[0_20px_50px_-20px_rgba(0,0,0,0.05)] hover:shadow-xl hover:-translate-y-1 transition-all duration-500 group">
                            <div class="flex items-center gap-4 mb-6">
                                <i class="ri-shield-user-line text-2xl text-royal group-hover:text-electric transition-colors"></i>
                                <h3 class="text-xl font-[400] text-royal tracking-tight">Security & Rewards Engine</h3>
                            </div>

                            <ul class="space-y-6">
                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-[13px] leading-relaxed text-soft"><span class="font-bold text-royal">2FA Security</span> — Google Authenticator, SMS, or email verification</p>
                                    </div>
                                </li>
                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-[13px] leading-relaxed text-soft"><span class="font-bold text-royal">Self‑Service Reset</span> — Strong policy enforcement & secure recovery</p>
                                    </div>
                                </li>
                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-[13px] leading-relaxed text-soft"><span class="font-bold text-royal">Support Ticket System</span> — SLA‑backed request tracking & resolution</p>
                                    </div>
                                </li>
                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-[13px] leading-relaxed text-soft"><span class="font-bold text-royal">Invite Friends</span> — Referral links, automated commission payouts</p>
                                    </div>
                                </li>
                            </ul>
                        </div>

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

            <div id="admin-control-center" class="mt-20">
                <div class="max-w-[1250px] mx-auto ">

                    <div class="flex items-center gap-6 mb-4" data-aos="fade-right">
                        <div class="w-14 h-14 rounded-2xl bg-royal flex items-center justify-center shadow-lg shadow-royal/20">
                            <i class="ri-dashboard-3-line text-white text-2xl"></i>
                        </div>
                        <h2 class="text-3xl md:text-4xl font-[400] tracking-tighter text-royal">
                            Complete Admin Control Center <span class="text-electric">Full Operational Power</span>
                        </h2>
                    </div>

                    <div class="grid lg:grid-cols-3 gap-6">

                        <!-- Advanced User Management -->
                        <div class="bg-white p-10 rounded-[32px] border border-zinc-100 shadow-[0_20px_50px_-20px_rgba(0,0,0,0.05)] hover:shadow-xl hover:-translate-y-1 transition-all duration-500 group">
                            <div class="flex items-center gap-4 mb-6">
                                <i class="ri-team-line text-2xl text-royal group-hover:text-electric transition-colors"></i>
                                <h3 class="text-xl font-[400] text-royal tracking-tight">
                                    Advanced User Management
                                </h3>
                            </div>

                            <ul class="space-y-6">

                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <p class="text-[13px] leading-relaxed text-soft">
                                        <span class="font-bold text-royal">User Analytics</span> — Active, suspended, unverified users and KYC status insights.
                                    </p>
                                </li>

                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <p class="text-[13px] leading-relaxed text-soft">
                                        <span class="font-bold text-royal">Personal & Business Accounts</span> — Separate limits, permissions, and compliance controls.
                                    </p>
                                </li>

                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <p class="text-[13px] leading-relaxed text-soft">
                                        <span class="font-bold text-royal">User Detail View</span> — KYC documents, verification history, and security logs.
                                    </p>
                                </li>

                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <p class="text-[13px] leading-relaxed text-soft">
                                        <span class="font-bold text-royal">Transaction Limits</span> — Configure per-transfer, daily, and monthly thresholds.
                                    </p>
                                </li>

                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <p class="text-[13px] leading-relaxed text-soft">
                                        <span class="font-bold text-royal">Refund Management</span> — Balance adjustments with complete audit trails.
                                    </p>
                                </li>

                            </ul>
                        </div>

                        <!-- Compliance & KYC Automation -->
                        <div class="bg-white p-10 rounded-[32px] border border-zinc-100 shadow-[0_20px_50px_-20px_rgba(0,0,0,0.05)] hover:shadow-xl hover:-translate-y-1 transition-all duration-500 group">
                            <div class="flex items-center gap-4 mb-6">
                                <i class="ri-shield-check-line text-2xl text-royal group-hover:text-brandOrange transition-colors"></i>
                                <h3 class="text-xl font-[400] text-royal tracking-tight">
                                    Compliance & KYC Automation
                                </h3>
                            </div>

                            <ul class="space-y-6">

                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <p class="text-[13px] leading-relaxed text-soft">
                                        <span class="font-bold text-royal">Automated KYC</span> — ID verification and facial recognition workflows.
                                    </p>
                                </li>

                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <p class="text-[13px] leading-relaxed text-soft">
                                        <span class="font-bold text-royal">AML Screening</span> — OFAC, UN, EU sanctions, PEP, and adverse media checks.
                                    </p>
                                </li>

                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <p class="text-[13px] leading-relaxed text-soft">
                                        <span class="font-bold text-royal">KYC Queues</span> — Batch approval, rejection, and automated notifications.
                                    </p>
                                </li>

                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <p class="text-[13px] leading-relaxed text-soft">
                                        <span class="font-bold text-royal">Transaction Monitoring</span> — Flag suspicious activity and generate alerts.
                                    </p>
                                </li>

                            </ul>
                        </div>

                        <!-- Financial Operations Suite -->
                        <div class="bg-white p-10 rounded-[32px] border border-zinc-100 shadow-[0_20px_50px_-20px_rgba(0,0,0,0.05)] hover:shadow-xl hover:-translate-y-1 transition-all duration-500 group">
                            <div class="flex items-center gap-4 mb-6">
                                <i class="ri-bank-card-line text-2xl text-royal group-hover:text-electric transition-colors"></i>
                                <h3 class="text-xl font-[400] text-royal tracking-tight">
                                    Financial Operations Suite
                                </h3>
                            </div>

                            <ul class="space-y-6">

                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <p class="text-[13px] leading-relaxed text-soft">
                                        <span class="font-bold text-royal">Send Money Management</span> — Approve, reject, review, and override transfers.
                                    </p>
                                </li>

                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <p class="text-[13px] leading-relaxed text-soft">
                                        <span class="font-bold text-royal">Agent Deposits & Withdrawals</span> — Reconcile balances and commission payouts.
                                    </p>
                                </li>

                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <p class="text-[13px] leading-relaxed text-soft">
                                        <span class="font-bold text-royal">Remittance Configuration</span> — Control payout methods and FX spreads.
                                    </p>
                                </li>

                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <p class="text-[13px] leading-relaxed text-soft">
                                        <span class="font-bold text-royal">Country Management</span> — Enable jurisdictions and configure regulatory rules.
                                    </p>
                                </li>

                                <li class="flex items-start gap-4">
                                    <div class="mt-1 w-5 h-5 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                                        <i class="ri-checkbox-circle-fill text-green-500 text-sm"></i>
                                    </div>
                                    <p class="text-[13px] leading-relaxed text-soft">
                                        <span class="font-bold text-royal">Security Logs</span> — Complete audit trail of all administrative actions.
                                    </p>
                                </li>

                            </ul>
                        </div>

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

        </div>
    </section>

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

            <div class="text-center mb-16" data-aos="fade-up">
                <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-electric block mb-4">The Complete Ecosystem</span>
                <h2 class="text-3xl md:text-5xl font-[400] tracking-tighter text-royal">
                    Everything Included. <span class="italic font-serif text-brandOrange">Built for Scale.</span>
                </h2>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 relative border-t border-zinc-100">

                <div class="relative p-10 flex flex-col items-center text-center border-b md:border-r border-zinc-100 group">
                    <div class="hidden md:block absolute -right-[10px] -bottom-[1px] w-[20px] h-[2px] bg-brandOrange z-10"></div>
                    <div class="hidden md:block absolute -right-[1px] -bottom-[10px] w-[2px] h-[20px] bg-brandOrange z-10"></div>

                    <i class="ri-global-line text-3xl text-zinc-300 group-hover:text-royal transition-all duration-300 mb-6"></i>
                    <h3 class="text-lg font-bold text-royal tracking-tight mb-3">150+ Countries</h3>
                    <p class="text-[12px] text-soft leading-relaxed">Bank transfers, mobile wallets, and cash pickup with real-time FX markups.</p>
                </div>

                <div class="relative p-10 flex flex-col items-center text-center border-b md:border-r border-zinc-100 group">
                    <div class="hidden md:block absolute -right-[10px] -bottom-[1px] w-[20px] h-[2px] bg-brandOrange z-10"></div>
                    <div class="hidden md:block absolute -right-[1px] -bottom-[10px] w-[2px] h-[20px] bg-brandOrange z-10"></div>

                    <i class="ri-shield-flash-line text-3xl text-zinc-300 group-hover:text-royal transition-all duration-300 mb-6"></i>
                    <h3 class="text-lg font-bold text-royal tracking-tight mb-3">AI-Powered Fraud Suite</h3>
                    <p class="text-[12px] text-soft leading-relaxed">Automated AML screening and KYC verification with Veriff/Onfido integration.</p>
                </div>

                <div class="relative p-10 flex flex-col items-center text-center border-b border-zinc-100 group">
                    <div class="hidden md:block absolute -left-[10px] -bottom-[1px] w-[20px] h-[2px] bg-brandOrange z-10 md:hidden"></div>

                    <i class="ri-smartphone-line text-3xl text-zinc-300 group-hover:text-royal transition-all duration-300 mb-6"></i>
                    <h3 class="text-lg font-bold text-royal tracking-tight mb-3">White-Label Mobile Apps</h3>
                    <p class="text-[12px] text-soft leading-relaxed">Biometric login, QR payments, and fully customizable UI for iOS and Android.</p>
                </div>

                <div class="relative p-10 flex flex-col items-center text-center border-b md:border-r border-zinc-100 group">
                    <div class="hidden md:block absolute -right-[10px] -top-[1px] w-[20px] h-[2px] bg-brandOrange z-10"></div>
                    <div class="hidden md:block absolute -right-[1px] -top-[10px] w-[2px] h-[20px] bg-brandOrange z-10"></div>

                    <i class="ri-dashboard-fill text-3xl text-zinc-300 group-hover:text-royal transition-all duration-300 mb-6"></i>
                    <h3 class="text-lg font-bold text-royal tracking-tight mb-3">Super-Admin Controls</h3>
                    <p class="text-[12px] text-soft leading-relaxed">KYC workflows, revenue analytics, and agent portal with commission tracking.</p>
                </div>

                <div class="relative p-10 flex flex-col items-center text-center border-b md:border-r border-zinc-100 group">
                    <div class="hidden md:block absolute -right-[10px] -top-[1px] w-[20px] h-[2px] bg-brandOrange z-10"></div>
                    <div class="hidden md:block absolute -right-[1px] -top-[10px] w-[2px] h-[20px] bg-brandOrange z-10"></div>

                    <i class="ri-terminal-window-line text-3xl text-zinc-300 group-hover:text-royal transition-all duration-300 mb-6"></i>
                    <h3 class="text-lg font-bold text-royal tracking-tight mb-3">API-First Architecture</h3>
                    <p class="text-[12px] text-soft leading-relaxed">RESTful APIs and sandbox environments to embed remittance anywhere.</p>
                </div>

                <div class="relative p-10 flex flex-col items-center text-center border-b border-zinc-100 group">
                    <i class="ri-pie-chart-2-line text-3xl text-zinc-300 group-hover:text-royal transition-all duration-300 mb-6"></i>
                    <h3 class="text-lg font-bold text-royal tracking-tight mb-3">Revenue Automation</h3>
                    <p class="text-[12px] text-soft leading-relaxed">Tiered pricing, FX spread markup, and automated referral commissions.</p>
                </div>

                <div class="relative p-10 flex flex-col items-center text-center md:border-r border-zinc-100 group">
                    <i class="ri-lock-2-line text-3xl text-zinc-300 group-hover:text-royal transition-all duration-300 mb-6"></i>
                    <h3 class="text-lg font-bold text-royal tracking-tight mb-3">PCI-DSS & GDPR Ready</h3>
                    <p class="text-[12px] text-soft leading-relaxed">AES-256 encryption and SOC2 compliant infrastructure for total trust.</p>
                </div>

                <div class="relative p-10 flex flex-col items-center text-center md:border-r border-zinc-100 group">
                    <i class="ri-translate-2 text-3xl text-zinc-300 group-hover:text-royal transition-all duration-300 mb-6"></i>
                    <h3 class="text-lg font-bold text-royal tracking-tight mb-3">Global Localization</h3>
                    <p class="text-[12px] text-soft leading-relaxed">English, French, Arabic, and more. Localized onboarding for every region.</p>
                </div>

                <div class="relative p-10 flex flex-col items-center text-center group">
                    <i class="ri-scales-3-line text-3xl text-zinc-300 group-hover:text-royal transition-all duration-300 mb-6"></i>
                    <h3 class="text-lg font-bold text-royal tracking-tight mb-3">Legal & Launch Pages</h3>
                    <p class="text-[12px] text-soft leading-relaxed">Privacy policies, TOS, and SEO-optimized marketing sites ready to deploy.</p>
                </div>

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


    <section class="py-24 px-[5%] bg-white" id="final-cta">
        <div class="max-w-[1200px] mx-auto">

            <div class="relative w-full rounded-[48px] bg-[#0A0A0B] overflow-hidden p-8 md:p-20 text-center border border-white/5 shadow-2xl">

                <div class="absolute -top-24 -left-24 w-64 h-64 bg-royal/20 rounded-full blur-[100px] pointer-events-none"></div>
                <div class="absolute -bottom-24 -right-24 w-64 h-64 bg-brandOrange/10 rounded-full blur-[100px] pointer-events-none"></div>

                <div class="relative z-10 max-w-[850px] mx-auto">
                    <h2 class="text-4xl md:text-6xl font-[400] tracking-tighter text-white leading-[1.1] mb-8" data-aos="fade-up">
                        Ready to Launch Your <br>
                        <span class="italic font-serif text-brandOrange text-5xl md:text-7xl">Remittance Empire?</span>
                    </h2>

                    <p class="text-zinc-400 text-lg md:text-xl mb-8 leading-relaxed font-light" data-aos="fade-up" data-aos-delay="100">
                        Everything you see user dashboard, admin panel, mobile apps, and compliance suite delivered in <span class="text-white font-bold underline decoration-brandOrange/40 underline-offset-4">2 weeks</span>. Full ownership, zero royalties.
                    </p>

                    <div class="flex flex-col sm:flex-row items-center justify-center gap-4 " data-aos="fade-up" data-aos-delay="200">
                        <a href="checkout.php?product=remittance" class="w-full sm:w-auto px-10 py-5 bg-white text-black rounded-full font-bold text-sm uppercase tracking-widest hover:bg-brandOrange hover:text-white transition-all flex items-center justify-center gap-2 group">
                            Get Started Today
                            <i class="ri-arrow-right-line group-hover:translate-x-1 transition-transform"></i>
                        </a>
                        <a href="get-demo.php?product=remittance" class="w-full sm:w-auto px-10 py-5 bg-white/5 border border-white/10 text-white rounded-full font-bold text-sm uppercase tracking-widest hover:bg-white/10 transition-all">
                            Schedule Live Demo
                        </a>
                    </div>


                </div>

            </div>

            <p class="mt-8 text-center text-zinc-400 text-[11px] font-mono uppercase tracking-[0.3em] opacity-50">
                Limited slots available for Q3 deployments — Reserve your spot
            </p>

        </div>
    </section>

    <section class="py-24 px-[5%] bg-white hide-on-mobile" id="remittance-orchestration">
        <div class="max-w-[1400px] mx-auto">

            <div class="text-center mb-14" data-aos="fade-up">
                <span class="font-mono text-[11px] uppercase tracking-[0.4em] text-electric">{03} THE INFRASTRUCTURE</span>
                <h2 class="text-4xl md:text-6xl font-[400] tracking-tighter mt-6 text-royal leading-[1.1]">
                    Built-In Payment <br>
                    <span class="italic font-serif text-soft">Orchestration</span>
                </h2>
                <p class="text-soft text-lg mt-8 max-w-[800px] mx-auto leading-relaxed">
                    Your white-label platform comes with enterprise-grade payment integrations pre-configured. Launch with global reach no additional development required.
                </p>
            </div>

            <?php
            $payment_orchestration = [
                [
                    'title' => 'Cards & Bank Rails',
                    'desc' => 'Built-in connectors for global card processing and bank transfers. Our engine handles ACH, SEPA, and SWIFT rails with instant & batch processing capabilities for enterprise reliability.',
                    'features' => ['Stripe & PayPal ready', 'ACH/SEPA/SWIFT rails', 'Recurring billing module', 'Escrow infrastructure', 'Visa/Mastercard/Amex'],
                    'monetization' => 'Impact: Global Card & Bank Connectivity',
                    'image' => 'https://i.pinimg.com/736x/5c/7c/78/5c7c78bd3899fbd7857bb52dadae1b1e.jpg?auto=format&fit=crop&q=80',
                    'accent' => 'brandOrange'
                ],
                [
                    'title' => 'Mobile Money Network',
                    'desc' => 'Direct carrier-grade integrations for Africa, Asia, and the Middle East. Serve the unbanked market instantly with M-Pesa, MTN, and Orange Money connectivity built into your core.',
                    'features' => ['M-Pesa (5+ countries)', 'Orange & MTN MoMo', 'JazzCash & Easypaisa', 'Bulk disbursements API', 'Real-time settlement'],
                    'monetization' => 'Revenue: Serve 40+ Unbanked Markets',
                    'image' => 'https://i.pinimg.com/1200x/d8/87/3a/d8873ada29147e68bf38f6bfc19c9280.jpg?auto=format&fit=crop&q=80',
                    'accent' => 'electric'
                ],
                [
                    'title' => 'Crypto & Stablecoin Bridge',
                    'desc' => 'Built-in crypto on/off-ramp infrastructure. Enable borderless settlements using USDT and USDC with zero FX volatility. Licensed custodians and insured cold storage come standard.',
                    'features' => ['USDT (TRC20/ERC20)', 'Instant fiat conversion', 'Insured cold storage', 'Under 30s settlements', 'Zero FX volatility'],
                    'monetization' => 'Efficiency: Borderless Crypto Settlement',
                    'image' => 'https://i.pinimg.com/736x/96/ed/e9/96ede975caf4ec2657e6906958f42af6.jpg?auto=format&fit=crop&q=80',
                    'accent' => 'brandOrange'
                ],
                [
                    'title' => 'Banking & Open Finance',
                    'desc' => 'Institutional-grade connectivity to global banking networks. Pre-integrated with Plaid, Yodlee, and Tink for instant account verification and transaction enrichment.',
                    'features' => ['Plaid/Yodlee/Tink', 'SWIFT gpi ready', 'ISO 20022 compliant', 'Real-time balance checks', 'PSD2 Compliant'],
                    'monetization' => 'Trust: Tier-1 Banking Integration',
                    'image' => 'https://i.pinimg.com/736x/9a/56/dc/9a56dcc42d6e1a41fff6ff9e6fee2212.jpg?auto=format&fit=crop&q=80',
                    'accent' => 'electric'
                ]
            ];
            ?>

            <div class="mx-auto px-[3%]">
                <div class="space-y-32">
                    <?php foreach ($payment_orchestration as $item): ?>
                        <div class="relative md:sticky top-24 bg-white mb-20 md:mb-0">
                            <div class="grid md:grid-cols-2 gap-16 items-center border-t border-gray-100 pt-16 group">

                                <div class="content-side" data-aos="fade-up">
                                    <span class="font-mono text-[10px] uppercase tracking-[0.3em] text-<?= $item['accent'] ?> mb-4 block font-bold">Payment Rails</span>
                                    <h3 class="text-4xl text-royal font-[400] tracking-tighter mb-6 leading-tight"><?= $item['title'] ?></h3>
                                    <p class="text-base text-soft leading-relaxed mb-8"><?= $item['desc'] ?></p>

                                    <ul class="grid grid-cols-1 sm:grid-cols-2 gap-y-4 mb-10">
                                        <?php foreach ($item['features'] as $feature): ?>
                                            <li class="flex items-center gap-4 text-soft group/list">
                                                <div class="w-5 h-5 rounded-full bg-<?= $item['accent'] ?>/10 flex items-center justify-center transition-transform duration-300 group-hover/list:scale-110">
                                                    <i data-lucide="check" class="w-3 h-3 text-<?= $item['accent'] ?>"></i>
                                                </div>
                                                <span class="font-mono text-[12px] tracking-tight"><?= $feature ?></span>
                                            </li>
                                        <?php endforeach; ?>
                                    </ul>

                                    <div class="inline-block px-4 py-2 bg-gray-50 rounded-lg border border-gray-100 mb-8">
                                        <span class="font-mono text-[10px] uppercase tracking-widest text-<?= $item['accent'] ?> font-bold">
                                            <?= $item['monetization'] ?>
                                        </span>
                                    </div>
                                </div>

                                <div class="image-side" data-aos="fade-up">
                                    <div class="aspect-[4/3] w-full rounded-[32px] overflow-hidden border border-gray-100 shadow-[0_32px_64px_-16px_rgba(8,31,92,0.1)] relative">
                                        <div class="absolute inset-0 bg-gradient-to-tr from-<?= $item['accent'] ?>/5 to-transparent pointer-events-none z-10"></div>

                                        <img src="<?= $item['image'] ?>"
                                            alt="<?= $item['title'] ?>"
                                            class="w-full h-full object-cover transform transition-transform duration-[2.5s] group-hover:scale-110" />

                                        <div class="absolute bottom-6 left-6 z-20 flex items-center gap-2 px-3 py-1.5 bg-white/90 backdrop-blur-md rounded-full border border-gray-200">
                                            <div class="w-1.5 h-1.5 rounded-full bg-<?= $item['accent'] ?> animate-pulse"></div>
                                            <span class="font-mono text-[9px] uppercase tracking-widest text-royal font-bold">Network Integrated</span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>

        </div>
    </section>


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

            <div class="grid grid-cols-1 md:grid-cols-3 relative border-t border-zinc-100">

                <div class="relative p-12 flex flex-col items-center text-center border-b md:border-r border-zinc-100 group transition-all duration-500 hover:bg-zinc-50/50">
                    <div class="hidden md:block absolute -right-[10px] -bottom-[1px] w-[20px] h-[2px] bg-electric z-10"></div>
                    <div class="hidden md:block absolute -right-[1px] -bottom-[10px] w-[2px] h-[20px] bg-electric z-10"></div>

                    <div class="w-12 h-12 rounded-full bg-zinc-50 flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
                        <i class="ri-route-line text-2xl text-zinc-400 group-hover:text-royal"></i>
                    </div>
                    <h3 class="text-xl font-bold text-royal tracking-tight mb-4">Smart Routing Engine</h3>
                    <p class="text-[13px] text-soft leading-relaxed max-w-[280px]">
                        Built-in AI routing that automatically selects <span class="text-royal font-[400]">lowest cost & highest success</span> rate corridors.
                    </p>
                </div>

                <div class="relative p-12 flex flex-col items-center text-center border-b md:border-r border-zinc-100 group transition-all duration-500 hover:bg-zinc-50/50">
                    <div class="hidden md:block absolute -right-[10px] -bottom-[1px] w-[20px] h-[2px] bg-electric z-10"></div>
                    <div class="hidden md:block absolute -right-[1px] -bottom-[10px] w-[2px] h-[20px] bg-electric z-10"></div>

                    <div class="w-12 h-12 rounded-full bg-zinc-50 flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
                        <i class="ri-shield-check-line text-2xl text-zinc-400 group-hover:text-royal"></i>
                    </div>
                    <h3 class="text-xl font-bold text-royal tracking-tight mb-4">Built-in Fraud Shield</h3>
                    <p class="text-[13px] text-soft leading-relaxed max-w-[280px]">
                        Machine learning detection, 3D Secure, and <span class="text-royal font-[400]">chargeback protection</span> — ready to deploy.
                    </p>
                </div>

                <div class="relative p-12 flex flex-col items-center text-center border-b border-zinc-100 group transition-all duration-500 hover:bg-zinc-50/50">
                    <div class="w-12 h-12 rounded-full bg-zinc-50 flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
                        <i class="ri-flashlight-line text-2xl text-zinc-400 group-hover:text-royal"></i>
                    </div>
                    <h3 class="text-xl font-bold text-royal tracking-tight mb-4">Instant Settlement</h3>
                    <p class="text-[13px] text-soft leading-relaxed max-w-[280px]">
                        Real-time payouts to 180+ countries with <span class="text-royal font-[400]">same-day FX conversion</span> built into the platform.
                    </p>
                </div>

            </div>

            <div class="mt-12 flex items-center justify-center gap-4 opacity-30 group">
                <span class="w-1.5 h-1.5 rounded-full bg-electric animate-pulse"></span>
                <span class="font-mono text-[10px] uppercase tracking-[0.3em] text-royal">Enterprise Intelligence Active</span>
            </div>

        </div>
    </section>


    <section class="py-12 px-[5%] bg-white">
        <div class="max-w-[1400px] mx-auto bg-[#0A0A0B] rounded-[40px] p-12 md:p-16 relative overflow-hidden shadow-2xl" data-aos="fade-up">

            <div class="absolute top-0 left-1/2 -translate-x-1/2 w-1/2 h-full bg-royal/5 blur-[120px] pointer-events-none"></div>

            <div class="relative z-10 grid grid-cols-2 md:grid-cols-5 gap-12 md:gap-8 items-center">

                <div class="flex flex-col items-center text-center" data-aos="fade-up" data-aos-delay="100">
                    <span class="text-3xl md:text-4xl font-bold text-white tracking-tighter mb-2">30+</span>
                    <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-zinc-500 leading-tight">Pre-Integrated <br> Gateways</span>
                </div>

                <div class="flex flex-col items-center text-center" data-aos="fade-up" data-aos-delay="200">
                    <span class="text-3xl md:text-4xl font-bold text-white tracking-tighter mb-2">180+</span>
                    <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-zinc-500 leading-tight">Coverage <br> Countries</span>
                </div>

                <div class="flex flex-col items-center text-center" data-aos="fade-up" data-aos-delay="300">
                    <span class="text-3xl md:text-4xl font-bold text-white tracking-tighter mb-2">200+</span>
                    <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-zinc-500 leading-tight">Payout <br> Methods</span>
                </div>

                <div class="flex flex-col items-center text-center" data-aos="fade-up" data-aos-delay="400">
                    <span class="text-3xl md:text-4xl font-bold text-white tracking-tighter mb-2">24/7</span>
                    <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-zinc-500 leading-tight">Transaction <br> Monitoring</span>
                </div>

                <div class="flex flex-col items-center text-center" data-aos="fade-up" data-aos-delay="500">
                    <span class="text-3xl md:text-4xl font-bold text-electric tracking-tighter mb-2">API-First</span>
                    <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-zinc-500 leading-tight">Architecture <br> Core</span>
                </div>

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



    <section class="py-24 px-[5%] bg-white overflow-hidden" id="regulatory-compliance">
        <div class="max-w-[1400px] mx-auto">
            <div class="grid md:grid-cols-2 gap-16 md:gap-24 items-center">

                <div class="order-2 md:order-1" data-aos="fade-right">
                    <span class="font-mono text-[11px] uppercase tracking-[0.4em] text-electric block mb-6">{04} Security & Governance</span>

                    <h2 class="text-4xl md:text-6xl font-[400] tracking-tighter text-royal leading-[1.1] mb-8">
                        Regulatory-Ready <br>
                        <span class="italic font-serif text-soft">From Day One</span>
                    </h2>

                    <p class="text-soft text-lg mb-12 leading-relaxed">
                        Navigating remittance regulations is the #1 killer of fintech startups. Nesvra bakes compliance into the core of every transaction, ensuring you stay protected while you scale.
                    </p>

                    <ul class="space-y-6">
                        <li class="flex items-start gap-5 group">
                            <div class="mt-1 w-6 h-6 rounded-full bg-royal/5 flex items-center justify-center flex-shrink-0 group-hover:bg-royal transition-colors">
                                <i class="ri-shield-user-line text-royal text-xs group-hover:text-white"></i>
                            </div>
                            <p class="text-zinc-600 text-[15px] leading-snug">
                                <span class="font-bold text-royal">Automated KYC</span> — Document verification and biometric liveness checks integrated.
                            </p>
                        </li>
                        <li class="flex items-start gap-5 group">
                            <div class="mt-1 w-6 h-6 rounded-full bg-royal/5 flex items-center justify-center flex-shrink-0 group-hover:bg-royal transition-colors">
                                <i class="ri-broadcast-line text-royal text-xs group-hover:text-white"></i>
                            </div>
                            <p class="text-zinc-600 text-[15px] leading-snug">
                                <span class="font-bold text-royal">Real-time AML Screening</span> — Against global sanctions lists including OFAC, EU, and UN.
                            </p>
                        </li>
                        <li class="flex items-start gap-5 group">
                            <div class="mt-1 w-6 h-6 rounded-full bg-royal/5 flex items-center justify-center flex-shrink-0 group-hover:bg-royal transition-colors">
                                <i class="ri-eye-line text-royal text-xs group-hover:text-white"></i>
                            </div>
                            <p class="text-zinc-600 text-[15px] leading-snug">
                                <span class="font-bold text-royal">Transaction Monitoring</span> — Suspicious activity reporting (SAR) and behavioral analytics.
                            </p>
                        </li>
                        <li class="flex items-start gap-5 group">
                            <div class="mt-1 w-6 h-6 rounded-full bg-royal/5 flex items-center justify-center flex-shrink-0 group-hover:bg-royal transition-colors">
                                <i class="ri-database-2-line text-royal text-xs group-hover:text-white"></i>
                            </div>
                            <p class="text-zinc-600 text-[15px] leading-snug">
                                <span class="font-bold text-royal">Data Residency</span> — Flexible hosting options in EU, US, or your specific region.
                            </p>
                        </li>
                    </ul>
                </div>

                <div class="order-1 md:order-2 relative" data-aos="fade-left">
                    <div class="absolute -inset-4 bg-royal/5 blur-3xl rounded-full"></div>

                    <div class="relative aspect-[3/5] md:aspect-square w-full rounded-[40px] overflow-hidden border border-zinc-100 shadow-2xl">
                        <img src="https://i.pinimg.com/1200x/35/fe/8a/35fe8a5813742aef8b7e1f639437117b.jpg"
                            alt="Regulatory Compliance Dashboard"
                            class="w-full h-full object-cover transform hover:scale-105 transition-transform duration-[3s]">

                        <div class="absolute bottom-10 left-10 right-10 p-6 bg-white/80 backdrop-blur-xl rounded-3xl border border-white/20 shadow-xl">
                            <div class="flex items-center gap-4">
                                <div class="w-10 h-10 rounded-full bg-green-500/10 flex items-center justify-center">
                                    <i class="ri-check-double-line text-green-600"></i>
                                </div>
                                <div>
                                    <h4 class="text-royal font-bold text-sm tracking-tight">System Status: Compliant</h4>
                                    <p class="text-soft text-[10px] font-mono uppercase tracking-widest">Active Audit Trail Logged</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

    <section class="py-24 px-[5%] bg-white overflow-hidden" id="infrastructure-scaling">
        <div class="max-w-[1400px] mx-auto">
            <div class="grid md:grid-cols-2 gap-16 md:gap-24 items-center">

                <div class="relative" data-aos="fade-right">
                    <div class="absolute -inset-4 bg-electric/5 blur-3xl rounded-full"></div>

                    <div class="relative  md:aspect-square w-full rounded-[40px] overflow-hidden border border-zinc-100 shadow-2xl">
                        <img src="https://i.pinimg.com/736x/99/2e/81/992e8106461e14bbb52de8c8ee331c52.jpg"
                            alt="High-performance Server Infrastructure"
                            class="w-full h-full object-cover transform hover:scale-105 transition-transform duration-[3s]">

                        <div class="absolute top-10 right-10 p-5 bg-royal/90 backdrop-blur-xl rounded-2xl border border-white/10 shadow-xl">
                            <div class="flex flex-col gap-1">
                                <span class="font-mono text-[9px] uppercase tracking-widest text-electric font-bold">Uptime Status</span>
                                <div class="flex items-center gap-2">
                                    <div class="w-2 h-2 rounded-full bg-green-400 animate-ping"></div>
                                    <span class="text-white font-bold text-lg">99.99%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div data-aos="fade-left">
                    <span class="font-mono text-[11px] uppercase tracking-[0.4em] text-brandOrange block mb-6 font-bold">Infinite Scalability</span>

                    <h2 class="text-4xl md:text-6xl font-[400] tracking-tighter text-royal leading-[1.1] mb-8">
                        From Startup <br>
                        <span class="italic font-serif text-soft">To Unicorn</span>
                    </h2>

                    <p class="text-soft text-lg mb-10 leading-relaxed max-w-[550px]">
                        Microservices architecture, auto-scaling Kubernetes clusters, and load balancing ready for <span class="text-royal font-bold">1M+ users</span>. Your infrastructure grows as your transaction volume explodes.
                    </p>

                    <div class="grid grid-cols-3 gap-6 py-8 border-t border-b border-zinc-100 mb-10">
                        <div>
                            <h4 class="text-2xl md:text-3xl font-bold text-royal tracking-tighter">10k+</h4>
                            <p class="font-mono text-[10px] uppercase tracking-widest text-zinc-400 mt-1">TPS Capacity</p>
                        </div>
                        <div>
                            <h4 class="text-2xl md:text-3xl font-bold text-royal tracking-tighter"></h4>
                            <p class="font-mono text-[10px] uppercase tracking-widest text-zinc-400 mt-1">Avg Latency</p>
                        </div>
                        <div>
                            <h4 class="text-2xl md:text-3xl font-bold text-royal tracking-tighter">Global</h4>
                            <p class="font-mono text-[10px] uppercase tracking-widest text-zinc-400 mt-1">CDN Edge</p>
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-3">
                        <span class="px-4 py-1.5 rounded-full bg-zinc-50 border border-zinc-100 text-[11px] font-mono text-soft uppercase tracking-wider italic">Kubernetes</span>
                        <span class="px-4 py-1.5 rounded-full bg-zinc-50 border border-zinc-100 text-[11px] font-mono text-soft uppercase tracking-wider italic">AWS/GCP Ready</span>
                        <span class="px-4 py-1.5 rounded-full bg-zinc-50 border border-zinc-100 text-[11px] font-mono text-soft uppercase tracking-wider italic">Microservices</span>
                    </div>
                </div>

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


    <?php
    $plans = [
        [
            "title" => "Essential",
            "badge" => "Perfect for startups & MVPs",
            "price" => "3,000",
            "sub" => "No monthly fees — ever",
            "accent" => "royal",
            "highlight" => "Web Platform + Admin Dashboard",
            "btn" => "Start Your MVP →",
            "features" => [
                "Core Remittance Engine — Send & receive money globally",
                "Basic KYC/AML — Identity verification & document upload",
                "1 Payment Gateway Integration (Stripe, PayPal, or Wise)",
                "Basic Transaction Reports — Track all activity",
                "Full Control Panel — Manage users & operations",
                "1-Year Standard Technical Support"
            ]
        ],
        [
            "title" => "Professional",
            "badge" => "MOST POPULAR — 80% of founders choose this",
            "price" => "4,000",
            "sub" => "+ Free 1-year priority support",
            "accent" => "brandOrange",
            "highlight" => "Web Platform + Android App",
            "popular" => true,
            "btn" => "Claim Your Platform →",
            "features" => [
                "<strong>Everything in Essential +</strong>",
                "Native Android App — Reach 2.5B+ users",
                "Advanced AML & Fraud AI — Real-time risk scoring",
                "10+ Gateway Integrations — Multi-currency & local payouts",
                "Priority 24/7 Support — Dedicated Slack channel",
                "Analytics Dashboard — Behavior & conversion funnels",
                "Compliance-Ready — Audit logs & regulatory reporting"
            ]
        ],
        [
            "title" => "Enterprise",
            "badge" => "Total ownership & scale",
            "price" => "5,000",
            "sub" => "Full IP + source code",
            "accent" => "electric",
            "highlight" => "Web + iOS + Android Apps",
            "btn" => "Scale Globally →",
            "features" => [
                "<strong>Everything in Professional +</strong>",
                "Full iOS Native App — Complete mobile experience",
                "Full Source Code Delivery — 100% ownership",
                "White-Glove Deployment — 1-week handover & CI/CD setup",
                "Scalability Architecture — Handle 1M+ transactions",
                "Dedicated Success Manager — Strategic growth roadmap",
                "Custom Security Audit — Penetration testing & SOC2 prep"
            ]
        ]
    ];
    ?>

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

            <div class="text-center mb-12" data-aos="fade-up">
                <span class="font-mono text-[11px] uppercase tracking-[0.4em] text-electric">One-Time Investment</span>
                <h2 class="text-5xl md:text-6xl font-[400] tracking-tighter text-royal mt-6">
                    Lifetime <span class="italic font-serif text-brandOrange">Ownership.</span>
                </h2>
            </div>

            <div class="grid lg:grid-cols-3 gap-8 items-stretch">
                <?php foreach ($plans as $plan): ?>
                    <div class="flex flex-col h-full p-10 rounded-[32px] overflow-hidden <?= isset($plan['popular']) ? 'bg-white border-2 border-royal shadow-2xl scale-105 z-10' : 'bg-zinc-50 border border-zinc-100 hover:border-royal/20 transition-all duration-500' ?>" data-aos="fade-up">

                        <?php if (isset($plan['popular'])): ?>
                            <div class="absolute top-0 right-0 bg-brandOrange text-white px-6 py-2 rounded-bl-2xl font-mono text-[9px] uppercase tracking-widest font-bold">
                                Most Popular
                            </div>
                        <?php endif; ?>

                        <div class="mb-8">
                            <p class="font-mono text-[10px] uppercase tracking-widest text-<?= $plan['accent'] ?> font-bold mb-2"><?= $plan['badge'] ?></p>
                            <h3 class="text-3xl font-bold text-royal tracking-tight mb-2"><?= $plan['title'] ?></h3>
                            <div class="flex items-baseline gap-1 mb-4">
                                <span class="text-5xl font-bold text-royal tracking-tighter">$<?= $plan['price'] ?></span>
                                <span class="text-[10px] font-mono text-soft uppercase">One-time</span>
                            </div>
                            <div class="inline-block px-3 py-1 bg-royal/5 rounded-md">
                                <p class="text-[10px] font-bold text-royal uppercase tracking-tight">Included: <?= $plan['sub'] ?></p>
                            </div>
                        </div>

                        <ul class="space-y-4 mb-10 flex-grow">
                            <?php foreach ($plan['features'] as $feature): ?>
                                <li class="flex items-start gap-3 text-xs text-soft leading-relaxed">
                                    <i class="ri-checkbox-circle-fill text-<?= $plan['accent'] ?> mt-0.5"></i>
                                    <span><?= $feature ?></span>
                                </li>
                            <?php endforeach; ?>
                        </ul>

                        <div class="border-t border-zinc-200 pt-8">
                            <a href="checkout.php?product=remittance&plan=<?= strtolower(explode(' ', $plan['name'])[0]) ?>" class="w-full py-4 <?= isset($plan['popular']) ? 'bg-royal text-white' : 'border border-royal text-royal' ?> rounded-full text-center block text-xs font-bold uppercase tracking-widest hover:bg-black hover:text-white hover:border-black transition-all">
                                <?= $plan['btn'] ?> →
                            </a>
                            <p class="text-center text-[9px] font-mono <?= isset($plan['popular']) ? 'text-brandOrange font-bold' : 'text-soft' ?> uppercase mt-4 tracking-widest">
                                <?= $plan['highlight'] ?>
                            </p>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>


    <section class="pb-24 px-[5%] bg-white">
        <div class="max-w-[1200px] mx-auto">

            <div class="relative w-full rounded-[40px] bg-zinc-50 border border-zinc-100 p-8 md:p-12 overflow-hidden">

                <div class="absolute inset-0 opacity-[0.03] pointer-events-none" style="background-image: radial-gradient(#000 1px, transparent 1px); background-size: 20px 20px;"></div>

                <div class="relative z-10 grid grid-cols-1 md:grid-cols-4 gap-12 md:gap-8 items-start">

                    <div class="group" data-aos="fade-up" data-aos-delay="100">
                        <div class="w-10 h-10 rounded-xl bg-white shadow-sm flex items-center justify-center mb-6 group-hover:bg-brandOrange transition-colors duration-300">
                            <i class="ri-shield-flash-line text-xl text-royal group-hover:text-white"></i>
                        </div>
                        <h4 class="text-sm font-bold text-royal tracking-tight mb-2">30-Day Money-Back</h4>
                        <p class="text-[11px] text-soft leading-relaxed font-mono uppercase tracking-wider">
                            No questions asked, full refund if not satisfied
                        </p>
                    </div>

                    <div class="group" data-aos="fade-up" data-aos-delay="200">
                        <div class="w-10 h-10 rounded-xl bg-white shadow-sm flex items-center justify-center mb-6 group-hover:bg-brandOrange transition-colors duration-300">
                            <i class="ri-key-2-line text-xl text-royal group-hover:text-white"></i>
                        </div>
                        <h4 class="text-sm font-bold text-royal tracking-tight mb-2">Lifetime Ownership</h4>
                        <p class="text-[11px] text-soft leading-relaxed font-mono uppercase tracking-wider">
                            No recurring fees, no royalties, ever
                        </p>
                    </div>

                    <div class="group" data-aos="fade-up" data-aos-delay="300">
                        <div class="w-10 h-10 rounded-xl bg-white shadow-sm flex items-center justify-center mb-6 group-hover:bg-brandOrange transition-colors duration-300">
                            <i class="ri-hand-coin-line text-xl text-royal group-hover:text-white"></i>
                        </div>
                        <h4 class="text-sm font-bold text-royal tracking-tight mb-2">No Hidden Fees</h4>
                        <p class="text-[11px] text-soft leading-relaxed font-mono uppercase tracking-wider">
                            What you see is what you pay — transparent
                        </p>
                    </div>

                    <div class="group" data-aos="fade-up" data-aos-delay="400">
                        <div class="w-10 h-10 rounded-xl bg-white shadow-sm flex items-center justify-center mb-6 group-hover:bg-brandOrange transition-colors duration-300">
                            <i class="ri-rocket-line text-xl text-royal group-hover:text-white"></i>
                        </div>
                        <h4 class="text-sm font-bold text-royal tracking-tight mb-2">Launch in 2-4 Weeks</h4>
                        <p class="text-[11px] text-soft leading-relaxed font-mono uppercase tracking-wider">
                            From purchase to go-live, we handle deployment
                        </p>
                    </div>

                </div>
            </div>

            <div class="mt-8 flex items-center justify-center gap-3" data-aos="fade-up">
                <div class="h-[1px] w-12 bg-zinc-100"></div>
                <span class="text-[10px] font-mono text-zinc-400 uppercase tracking-[0.4em]">Secure. Transparent. Scalable.</span>
                <div class="h-[1px] w-12 bg-zinc-100"></div>
            </div>

        </div>
    </section>



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

            <div class="text-center mb-16" data-aos="fade-up">
                <span class="font-mono text-[11px] uppercase tracking-[0.4em] text-brandOrange font-bold">ROI Analysis</span>
                <h2 class="text-4xl md:text-6xl font-[400] tracking-tighter text-royal mt-6 leading-[1.1]">
                    The Smartest Investment <br>
                    <span class="italic font-serif text-soft">You'll Ever Make</span>
                </h2>
                <p class="text-soft text-lg mt-8 max-w-[700px] mx-auto leading-relaxed">
                    Stop burning cash on custom development. Get a battle-tested, white-label money transfer platform in weeks — not years.
                </p>
            </div>

            <div class="grid md:grid-cols-2 gap-8 items-stretch">

                <div class="p-10 md:p-14 rounded-[48px] bg-zinc-50 border border-zinc-100 group" data-aos="fade-right">
                    <div class="flex items-center gap-4 mb-8">
                        <div class="w-12 h-12 rounded-2xl bg-zinc-200/50 flex items-center justify-center">
                            <i class="ri-close-circle-line text-zinc-400 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-zinc-400 tracking-tight">Traditional Custom Dev</h3>
                    </div>

                    <div class="mb-10">
                        <span class="text-5xl font-bold text-zinc-300 tracking-tighter">$120K–$200K</span>
                        <p class="text-zinc-400 font-mono text-[11px] uppercase tracking-widest mt-4">Estimated Capital Expenditure</p>
                    </div>

                    <ul class="space-y-4">
                        <li class="flex items-center gap-3 text-zinc-400 text-sm">
                            <i class="ri-time-line"></i> 12–18 months development
                        </li>
                        <li class="flex items-center gap-3 text-zinc-400 text-sm">
                            <i class="ri-team-line"></i> Massive engineering overhead
                        </li>
                        <li class="flex items-center gap-3 text-zinc-400 text-sm">
                            <i class="ri-error-warning-line"></i> High risk of project failure
                        </li>
                    </ul>
                </div>

                <div class="p-10 md:p-14 rounded-[48px] bg-royal text-white relative overflow-hidden shadow-2xl shadow-royal/20 group" data-aos="fade-left">
                    <div class="absolute -top-24 -right-24 w-64 h-64 bg-electric/20 rounded-full blur-[100px]"></div>

                    <div class="relative z-10">
                        <div class="flex items-center gap-4 mb-8">
                            <div class="w-12 h-12 rounded-2xl bg-white/10 backdrop-blur-md flex items-center justify-center">
                                <i class="ri-checkbox-circle-line text-electric text-2xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-white tracking-tight">Nesvra Solution</h3>
                        </div>

                        <div class="mb-10">
                            <span class="text-5xl font-bold text-white tracking-tighter">$3,000–$5,000</span>
                            <p class="text-white/40 font-mono text-[11px] uppercase tracking-widest mt-4">One-Time Investment</p>
                        </div>

                        <ul class="space-y-4 mb-12">
                            <li class="flex items-center gap-3 text-white/80 text-sm">
                                <i class="ri-flashlight-line text-electric"></i> Launch in 2–4 weeks
                            </li>
                            <li class="flex items-center gap-3 text-white/80 text-sm">
                                <i class="ri-key-2-line text-electric"></i> Full ownership, zero royalties
                            </li>
                            <li class="flex items-center gap-3 text-white/80 text-sm">
                                <i class="ri-seedling-line text-electric"></i> Infinite scalability included
                            </li>
                        </ul>

                        <div class="inline-flex items-center gap-3 px-6 py-3 bg-green-500/10 border border-green-500/20 rounded-2xl">
                            <span class="text-green-400 font-bold text-2xl tracking-tighter">Save 92–97%</span>
                            <span class="w-[1px] h-4 bg-green-500/20"></span>
                            <span class="text-[9px] font-mono uppercase tracking-widest text-green-400/70">Total ROI</span>
                        </div>
                    </div>
                </div>

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


    <div class="bg-white p-1 md:p-2 overflow-hidden">
        <section id="launch-accelerator" class="relative bg-royal py-20 px-6 lg:px-14 overflow-hidden rounded-[24px]" data-aos="fade-up" data-aos-duration="1000" data-aos-once="true">

            <div class="absolute -bottom-24 -left-24 w-[500px] h-[500px] bg-white/5 rounded-full blur-[100px] pointer-events-none"></div>
            <div class="absolute -top-24 -right-24 w-[400px] h-[400px] bg-electric/10 rounded-full blur-[80px] pointer-events-none"></div>

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

                <div class="text-center mb-16">
                    <span class="font-mono text-[11px] uppercase tracking-[0.4em] text-electric block mb-4">Go Live Faster. Scale Smarter.</span>
                    <h2 class="text-4xl md:text-6xl font-[400] tracking-tighter text-white leading-[1.1]">
                        Launch <br> <span class="italic font-serif text-brandOrange">Accelerator</span>
                    </h2>
                    <p class="text-white/60 text-lg mt-6 max-w-[800px] mx-auto leading-relaxed">
                        Turn Your Money Transfer App Into a Revenue Engine. Skip the complexity. Our premium add-ons are designed to <span class="text-white font-[400]">fast-track compliance, maximize trust, and drive acquisition.</span>
                    </p>
                </div>

                <div class="grid lg:grid-cols-2 gap-6">

                    <div class="bg-white/5 backdrop-blur-md border border-white/10 p-8 rounded-[32px] group hover:bg-white/10 transition-all flex flex-col justify-between">
                        <div>
                            <div class="flex justify-between items-start mb-8">
                                <div class="w-14 h-14 rounded-2xl bg-brandOrange text-white flex items-center justify-center shadow-lg shadow-brandOrange/20">
                                    <i class="ri-apps-2-line text-3xl"></i>
                                </div>
                                <span class="text-3xl font-bold text-white tracking-tighter">$250 <span class="text-xs text-white/40 font-normal">/ store</span></span>
                            </div>
                            <span class="font-mono text-[10px] text-electric uppercase tracking-widest block mb-2">Essential</span>
                            <h3 class="text-2xl font-bold text-white mb-4">App Store Domination</h3>
                            <p class="text-white/60 text-sm leading-relaxed mb-6">Full-cycle submission and compliance handling. We navigate guidelines so your money transfer app gets approved fast — no delays, no rejections.</p>

                            <ul class="space-y-3 mb-8">
                                <li class="flex items-center gap-3 text-[11px] text-white/80 font-mono uppercase tracking-wider"><i class="ri-checkbox-circle-line text-brandOrange"></i> Financial services compliance check</li>
                                <li class="flex items-center gap-3 text-[11px] text-white/80 font-mono uppercase tracking-wider"><i class="ri-checkbox-circle-line text-brandOrange"></i> ASO keyword optimization</li>
                                <li class="flex items-center gap-3 text-[11px] text-white/80 font-mono uppercase tracking-wider"><i class="ri-checkbox-circle-line text-brandOrange"></i> 14-day priority turnaround</li>
                            </ul>
                        </div>
                        <a href="book-strategy-call.php?subject=App+Store+Deployment+Add-on" class="inline-flex items-center gap-2 text-electric font-bold text-xs uppercase tracking-widest hover:gap-4 transition-all">Secure slot →</a>
                    </div>

                    <div class="bg-white/5 backdrop-blur-md border border-white/10 p-8 rounded-[32px] group hover:bg-white/10 transition-all flex flex-col justify-between">
                        <div>
                            <div class="flex justify-between items-start mb-8">
                                <div class="w-14 h-14 rounded-2xl bg-electric text-white flex items-center justify-center shadow-lg shadow-electric/20">
                                    <i class="ri-quill-pen-line text-3xl"></i>
                                </div>
                                <span class="text-3xl font-bold text-white tracking-tighter">$250 <span class="text-xs text-white/40 font-normal">Complete</span></span>
                            </div>
                            <span class="font-mono text-[10px] text-brandOrange uppercase tracking-widest block mb-2">Trust First</span>
                            <h3 class="text-2xl font-bold text-white mb-4">Fintech Identity & Trust Kit</h3>
                            <p class="text-white/60 text-sm leading-relaxed mb-6">Logo, app icon, and brand colors designed to convey security and speed. Because in remittance, perception = conversion.</p>

                            <ul class="space-y-3 mb-8">
                                <li class="flex items-center gap-3 text-[11px] text-white/80 font-mono uppercase tracking-wider"><i class="ri-checkbox-circle-line text-electric"></i> Premium logo + Responsive icon suite</li>
                                <li class="flex items-center gap-3 text-[11px] text-white/80 font-mono uppercase tracking-wider"><i class="ri-checkbox-circle-line text-electric"></i> Bank-grade color psychology</li>
                                <li class="flex items-center gap-3 text-[11px] text-white/80 font-mono uppercase tracking-wider"><i class="ri-checkbox-circle-line text-electric"></i> Social brand kit + trust badges</li>
                            </ul>
                        </div>
                        <a href="book-strategy-call.php?subject=Fintech+Identity+Kit+Add-on" class="inline-flex items-center gap-2 text-brandOrange font-bold text-xs uppercase tracking-widest hover:gap-4 transition-all">Build authority →</a>
                    </div>

                    <div class="bg-white/5 border border-white/10 p-8 rounded-[32px] hover:bg-white/10 transition-all flex flex-col justify-between">
                        <div>
                            <div class="flex justify-between items-start mb-8">
                                <div class="w-14 h-14 rounded-2xl border border-white/20 text-white flex items-center justify-center">
                                    <i class="ri-rocket-2-line text-3xl"></i>
                                </div>
                                <span class="text-3xl font-bold text-white tracking-tighter">$150 <span class="text-xs text-white/40 font-normal">Setup</span></span>
                            </div>
                            <span class="font-mono text-[10px] text-electric uppercase tracking-widest block mb-2">Launch Ready</span>
                            <h3 class="text-2xl font-bold text-white mb-4">Social Launch Engine</h3>
                            <p class="text-white/60 text-sm leading-relaxed mb-6">LinkedIn, Twitter, and Instagram setup with branding, bio optimization, and a content calendar to build early adopters.</p>

                            <ul class="space-y-3 mb-8">
                                <li class="flex items-center gap-3 text-[11px] text-white/80 font-mono uppercase tracking-wider"><i class="ri-check-line text-electric"></i> 3 platform profiles + visual sync</li>
                                <li class="flex items-center gap-3 text-[11px] text-white/80 font-mono uppercase tracking-wider"><i class="ri-check-line text-electric"></i> 7 days of launch-ready content</li>
                                <li class="flex items-center gap-3 text-[11px] text-white/80 font-mono uppercase tracking-wider"><i class="ri-check-line text-electric"></i> Growth hooks & engagement strategy</li>
                            </ul>
                        </div>
                        <a href="book-strategy-call.php?subject=Social+Launch+Engine+Add-on" class="inline-flex items-center gap-2 text-white/40 font-bold text-xs uppercase tracking-widest hover:text-white transition-all">Go viral →</a>
                    </div>

                    <div class="bg-white/5 border border-white/10 p-8 rounded-[32px] hover:bg-white/10 transition-all flex flex-col justify-between">
                        <div>
                            <div class="flex justify-between items-start mb-8">
                                <div class="w-14 h-14 rounded-2xl border border-white/20 text-white flex items-center justify-center">
                                    <i class="ri-line-chart-line text-3xl"></i>
                                </div>
                                <span class="text-3xl font-bold text-white tracking-tighter">$400 <span class="text-xs text-white/40 font-normal">Bundle</span></span>
                            </div>
                            <span class="font-mono text-[10px] text-brandOrange uppercase tracking-widest block mb-2">Growth</span>
                            <h3 class="text-2xl font-bold text-white mb-4">Marketing & Growth Stack</h3>
                            <p class="text-white/60 text-sm leading-relaxed mb-6">Landing page, SEO, and referral campaign mechanics designed to acquire users at a lower CPA from day one.</p>

                            <ul class="space-y-3 mb-8">
                                <li class="flex items-center gap-3 text-[11px] text-white/80 font-mono uppercase tracking-wider"><i class="ri-check-line text-brandOrange"></i> High-converting remittance landing page</li>
                                <li class="flex items-center gap-3 text-[11px] text-white/80 font-mono uppercase tracking-wider"><i class="ri-check-line text-brandOrange"></i> Referral system design + analytics</li>
                                <li class="flex items-center gap-3 text-[11px] text-white/80 font-mono uppercase tracking-wider"><i class="ri-check-line text-brandOrange"></i> Local SEO for money transfer keywords</li>
                            </ul>
                        </div>
                        <a href="book-strategy-call.php?subject=Marketing+Growth+Stack+Add-on" class="inline-flex items-center gap-2 text-white/40 font-bold text-xs uppercase tracking-widest hover:text-white transition-all">Scale now →</a>
                    </div>

                    <div class="lg:col-span-2 bg-white/5 border border-white/10 p-8 rounded-[32px] flex flex-col md:flex-row md:items-center justify-between gap-6 hover:bg-white/10 transition-all group">
                        <div class="flex items-center gap-6">
                            <div class="w-16 h-16 rounded-2xl bg-white/10 text-white flex items-center justify-center">
                                <i class="ri-bank-line text-4xl"></i>
                            </div>
                            <div>
                                <span class="font-mono text-[9px] uppercase tracking-[0.3em] text-electric">Regulatory Fast-Track</span>
                                <h4 class="text-xl font-bold text-white tracking-tight">Licensing & Compliance Accelerator</h4>
                                <p class="text-white/50 text-xs mt-1">90-min strategy call + custom compliance roadmap + 48h priority support.</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-8">
                            <div class="text-right">
                                <span class="block text-white font-bold text-3xl tracking-tighter">$600</span>
                                <span class="text-[9px] font-mono text-white/30 uppercase tracking-widest">per consultation</span>
                            </div>
                            <a href="book-strategy-call.php?subject=Licensing+Compliance+Accelerator" class="w-12 h-12 rounded-full border border-white/10 flex items-center justify-center group-hover:bg-white group-hover:text-royal transition-all">
                                <i class="ri-arrow-right-up-line text-xl"></i>
                            </a>
                        </div>
                    </div>

                </div>

                <div class="mt-16 text-center border-t border-white/10 pt-10">
                    <p class="font-mono text-[10px] uppercase tracking-[0.5em] text-white/40">Focus on moving money, not managing bottlenecks</p>
                </div>

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




    <?php
    $faqs = [
        [
            "q" => "Do I need a money transmitter license?",
            "a" => "Our platform is built to meet global compliance standards, but specific licensing depends on your operating country. We help bridge that gap. <br><small class='block mt-2 opacity-60'>• Compliance documentation provided • Partner referrals available • Built-in KYC/AML system</small>",
            "icon" => "ri-shield-user-line"
        ],
        [
            "q" => "How quickly can I start making money?",
            "a" => "You can launch within 3–5 weeks and start generating revenue immediately through three distinct built-in streams. <br><small class='block mt-2 opacity-60'>• Transaction fees • Currency exchange margins • Subscription plans</small>",
            "icon" => "ri-rocket-line"
        ],
        [
            "q" => "Can I customize the platform?",
            "a" => "Yes — you get 100% full source code ownership. There is no vendor lock-in, meaning you can modify every pixel and logic gate. <br><small class='block mt-2 opacity-60'>• Custom Branding • UI/UX Flexibility • Private Server Deployment</small>",
            "icon" => "ri-code-s-slash-line"
        ],
        [
            "q" => "Which countries are supported?",
            "a" => "The infrastructure supports over 150 countries out-of-the-box, allowing you to dominate global corridors instantly. <br><small class='block mt-2 opacity-60'>🌍 Bank Transfers • 📱 Mobile Money • 💵 Cash Pickups</small>",
            "icon" => "ri-global-line"
        ],
        [
            "q" => "What support do I get?",
            "a" => "We don't just hand over code. You get full onboarding, technical documentation, and ongoing assistance to ensure a smooth launch. <br><small class='block mt-2 opacity-60'>• 1-Year Tech Support • Documentation • Lifetime Updates</small>",
            "icon" => "ri-customer-service-2-line"
        ],
        [
            "q" => "Is the platform scalable?",
            "a" => "Absolutely. Built on a microservices-ready architecture, it is designed to handle thousands of concurrent users and high transaction volumes. <br><small class='block mt-2 opacity-60'>• High-load tested • Auto-scaling ready • 99.9% Uptime logic</small>",
            "icon" => "ri-database-2-line"
        ]
    ];
    ?>

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

            <div class="text-center mb-16" data-aos="fade-up">
                <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-electric block mb-4">Expert Insights</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 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-base 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-soft font-[400]">
                    Don't see your question?
                    <a href="mailto:support@alphadev.com" class="text-royal border-b border-royal/20 hover:text-brandOrange hover:border-brandOrange transition-all ml-1">
                        Talk to our technical team
                    </a>
                </p>
            </div>

        </div>
    </section>


    <section class="py-20 px-[5%] bg-white overflow-hidden" id="final-call">
        <div class="max-w-[1200px] mx-auto">
            <div class="relative w-full md:h-[500px] rounded-[40px] overflow-hidden flex items-center justify-center group">

                <div class="absolute inset-0 z-0">
                    <img src="https://i.pinimg.com/1200x/df/9c/df/df9cdf0291e56c76372b4284456f06e2.jpg?auto=format&fit=crop&q=80"
                        alt="Global Remittance"
                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000">
                    <div class="absolute inset-0 bg-gradient-to-b from-black/40 via-royal/40 to-royal/60"></div>
                </div>

                <div class="relative z-10 w-full px-8 py-16 md:py-0 text-center">
                    <div class="max-w-[800px] mx-auto" data-aos="zoom-in">

                        <h2 class="text-4xl md:text-6xl font-[400] mt-4 tracking-tighter text-white leading-tight mb-3">
                            The Remittance Revolution <br>
                            <span class="italic font-serif text-brandOrange">Starts Today</span>
                        </h2>

                        <p class="text-white/80 text-lg mb-6 max-w-[600px] mx-auto leading-relaxed">
                            Stop dreaming about disrupting cross-border payments. Launch your platform, own your code, and start capturing market share now.
                        </p>

                        <div class="flex flex-wrap items-center justify-center gap-6 mb-6">
                            <div class="flex items-center gap-2 text-white font-mono text-[10px] uppercase tracking-widest">
                                <i class="ri-checkbox-circle-fill text-brandOrange"></i> Full ownership
                            </div>
                            <div class="flex items-center gap-2 text-white font-mono text-[10px] uppercase tracking-widest">
                                <i class="ri-checkbox-circle-fill text-brandOrange"></i> Global compliance ready
                            </div>
                            <div class="flex items-center gap-2 text-white font-mono text-[10px] uppercase tracking-widest">
                                <i class="ri-checkbox-circle-fill text-brandOrange"></i> White-glove onboarding
                            </div>
                        </div>

                        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                            <a href="get-demo?product=remittance" class="w-full sm:w-auto px-10 py-5 bg-white text-royal rounded-full font-bold text-xs uppercase tracking-widest hover:bg-brandOrange hover:text-white transition-all shadow-xl">
                                Schedule Live Demo →
                            </a>
                            <a href="checkout?product=remittance" class="w-full sm:w-auto px-10 py-5 bg-brandOrange text-white rounded-full font-bold text-xs uppercase tracking-widest hover:bg-white hover:text-royal transition-all shadow-xl">
                                Purchase Now
                            </a>
                        </div>

                    </div>
                </div>

                <div class="absolute top-10 right-10 w-32 h-32 bg-electric/20 rounded-full blur-3xl pointer-events-none"></div>
                <div class="absolute -bottom-10 -left-10 w-48 h-48 bg-brandOrange/20 rounded-full blur-3xl pointer-events-none"></div>
            </div>
        </div>
    </section>









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


</body>

</html>