<!DOCTYPE html>
<html lang="en">
<?php
$pagetitle = "Infrastructure Access | One Integration, Every Provider | Nesvra";
include 'components/head.php';
?>

<body class="bg-white">

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

    <!-- ═══════════════════════════════════════ -->
    <!--  HERO                                   -->
    <!-- ═══════════════════════════════════════ -->

    <section class="relative max-h-[89dvh] h-fit w-full overflow-hidden">
        <div class="absolute inset-0 z-0">
            <div class="absolute inset-0 bg-black/40 z-10"></div>
            <img src="Asset/infastructure-access.webp"
                class="w-full h-full object-cover mix-blend-luminosity opacity-90"
                style="background-attachment: fixed; background-position: center;"
                alt="Nesvra Education Technology Platform" />
        </div>

        <div class="relative z-20 h-full w-full max-w-8xl mx-auto px-4 md:px-16 pt-32 md:pt-44 pb-16 flex flex-col items-start text-left">

            <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase mb-4" data-aos="fade-right" data-aos-delay="100">
                One platform for business infrastructure
            </span>

            <h1 data-aos="fade-right" data-aos-delay="200"
                class="max-w-4xl text-4xl md:text-5xl font-[400] tracking-[-0.04em] leading-[1.08] text-white">
                One integration. Access the

                <br class="hidden md:block">
                <span class="italic font-serif text-white/90">infrastructure your business needs</span>
            </h1>

            <p data-aos="fade-right" data-aos-delay="300"
                class="mt-4 max-w-2xl text-xs md:text-sm text-white/70 font-mono leading-relaxed mb-4">
                Payments, messaging, identity verification, compliance, cloud services, enterprise systems and fintech capabilities, accessible through a single platform, unified API and merchant dashboard.
            </p>

            <div data-aos="fade-up" data-aos-delay="500" class="flex items-center gap-4">
                <a href="book-strategy-call.php?subject=Infrastructure+Access"
                    class="inline-flex items-center gap-3 px-5 md:px-8 py-4 bg-brandOrange text-white rounded-full font-sans font-[600] text-sm tracking-tight hover:scale-[1.05] transition-all shadow-[0_15px_30px_-5px_rgba(255,138,0,0.4)]">
                    Request Platform Access
                    <i data-lucide="arrow-right" class="w-4 h-4 text-white"></i>
                </a>
                <a href="get-demo.php"
                    class="inline-flex items-center gap-3 px-5 md:px-8 py-4 bg-[#111] text-white rounded-full font-sans font-[500] text-sm tracking-tight hover:scale-[1.05] transition-all border border-white/10">

                    <i class="ri-play-circle-line text-brandOrange"></i>
                    Explore Demos
                </a>
            </div>
        </div>
    </section>

    <!-- ─── PLATFORM FEATURE TRUST STRIP ─── -->
    <section class="py-6 px-[5%] bg-white border-b border-zinc-100" id="feature-strip">
        <div class="max-w-[1200px] mx-auto">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-0 divide-x divide-zinc-100">
                <?php
                $trust = [
                    ["Global Ready",     "Cross-border scale ready", "ri-global-line"],
                    ["Unified API",      "Single point integration", "ri-instance-line"],
                    ["Merchant Hub",     "Complete operations control",  "ri-dashboard-3-line"],
                    ["Sub Access",       "Predictable utility setup", "ri-key-2-line"],
                ];
                foreach ($trust as [$val, $label, $icon]):
                ?>
                    <div class="flex flex-col items-center text-center px-4 py-5 group">
                        <span class="text-sm md:text-base font-semibold text-royal tracking-tight flex items-center justify-center gap-2">
                            <div class="text-brandOrange text-base md:text-lg transition-transform duration-300 group-hover:scale-110 flex items-center">
                                <i class="<?= $icon ?>"></i>
                            </div>
                            <?= $val ?>
                        </span>
                        <span class="text-[9px] md:text-[10px] font-mono uppercase tracking-widest text-zinc-400 mt-1 transition-colors duration-300 group-hover:text-zinc-500">
                            <?= $label ?>
                        </span>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>


    <section class="py-24 px-[5%] bg-white border-b border-zinc-100" id="infrastructure-benefit">
        <div class="max-w-[1100px] mx-auto">

            <!-- Section Header Module -->
            <div class="text-center mb-16" data-aos="fade-up">
                <span class="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-400 block mb-2"> Infrastructure Access</span>
                <h2 class="text-3xl md:text-4xl font-normal tracking-tight text-zinc-900 leading-[1.15]">
                    Stop managing vendors. <span class="italic font-serif text-royal">Start building businesses.</span>
                </h2>
                <p class="text-zinc-500 text-sm md:text-base mt-4 max-w-xl mx-auto">
                    Sourcing and maintaining providers yourself takes months of operational drain. With Nesvra, it takes a single, unified integration layer.
                </p>
            </div>

            <!-- Split Grid Matrix -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch mt-12">

                <!-- Column A: Traditional Legacy Setup -->
                <div class="border border-zinc-200/60 rounded-3xl p-8 bg-zinc-50/40 flex flex-col justify-between" data-aos="fade-right">
                    <div>
                        <div class="flex items-center gap-2 mb-6">
                            <div class="flex h-6 w-6 items-center justify-center rounded-full bg-red-50 text-red-500 text-xs font-bold">
                                <i class="ri-close-line"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-semibold text-zinc-900 tracking-tight">Traditional approach</h3>
                                <p class="text-[11px] font-mono uppercase text-zinc-400 tracking-wider">Many vendors, months of complex work</p>
                            </div>
                        </div>

                        <ul class="space-y-3.5 border-t border-zinc-200/50 pt-6">
                            <?php
                            $traditional = [
                                "Find reliable providers across jurisdictions",
                                "Apply and pass vetting processes individually",
                                "Negotiate separate enterprise contract terms",
                                "Manage and authenticate multiple disconnected APIs",
                                "Track, reconcile, and balance fragmented invoices",
                                "Handle ongoing support loops across distinct vendors",
                                "Maintain separate underlying data integrations over time"
                            ];
                            foreach ($traditional as $item):
                            ?>
                                <li class="flex items-start gap-3 text-xs text-zinc-500 font-sans">
                                    <span class="text-red-400/80 text-sm leading-none mt-0.5 flex-shrink-0">✕</span>
                                    <span><?= $item ?></span>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>

                    <div class="mt-8 pt-6 border-t border-zinc-200/40 text-[10px] font-mono uppercase text-zinc-400 tracking-widest">
                        // Fragile operational scaling overhead
                    </div>
                </div>

                <!-- Column B: Premium Unified Nesvra Protocol -->
                <div class="border-2 border-royal/40 rounded-3xl p-8 bg-white shadow-xl shadow-royal/5 flex flex-col justify-between relative overflow-hidden" data-aos="fade-left">
                    <!-- Aura Gradient -->
                    <div class="absolute -top-24 -right-24 w-48 h-48 bg-royal/5 rounded-full blur-[80px] pointer-events-none"></div>

                    <div>
                        <div class="flex items-center justify-between mb-6">
                            <div class="flex items-center gap-2">
                                <div class="flex h-6 w-6 items-center justify-center rounded-full bg-royal text-white text-xs font-bold shadow-sm">
                                    <i class="ri-check-line"></i>
                                </div>
                                <div>
                                    <h3 class="text-sm font-semibold text-royal tracking-tight">With Nesvra</h3>
                                    <p class="text-[11px] font-mono uppercase text-brandOrange tracking-wider font-semibold">One of everything, instantly</p>
                                </div>
                            </div>
                            <span class="font-mono text-[9px] uppercase tracking-widest text-royal font-bold bg-royal/5 px-2 py-0.5 rounded-md">Unified Stack</span>
                        </div>

                        <ul class="space-y-3.5 border-t border-zinc-100 pt-6">
                            <?php
                            $nesvra_approach = [
                                "One core global merchant account",
                                "One operational telemetry dashboard",
                                "One clean, versioned API reference",
                                "One comprehensive monthly automated invoice",
                                "One dedicated operational support team",
                                "One streamlined integration lifecycle",
                                "Maintained and performance-optimized for you"
                            ];
                            foreach ($nesvra_approach as $item):
                            ?>
                                <li class="flex items-start gap-3 text-xs text-zinc-900 font-sans font-medium transition-transform duration-300 hover:translate-x-0.5">
                                    <span class="text-brandOrange text-sm leading-none mt-0.5 flex-shrink-0 font-bold">✓</span>
                                    <span><?= $item ?></span>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>

                    <div class="mt-8 pt-6 border-t border-zinc-100 flex items-center justify-between">
                        <span class="text-[10px] font-mono uppercase text-zinc-400 tracking-widest">
                            // Sovereign enterprise architecture
                        </span>
                        <a href="#integration" class="text-[10px] font-mono uppercase tracking-wider text-royal font-bold inline-flex items-center gap-1 group-hover:text-brandOrange transition-colors">
                            View Schema →
                        </a>
                    </div>
                </div>

            </div>

        </div>
    </section>







    <?php
    $infrastructure_categories = [
        [
            'title'    => 'Payments Infrastructure',
            'desc'     => 'Move money in and out with ease.',
            'icon'     => 'ri-bank-card-line',
            'badge'    => 'MONEY_MOVEMENT',
            'features' => ['Payment gateways', 'Payment links', 'Collections', 'Checkout', 'Subscriptions', 'Recurring billing', 'Escrow', 'Payouts']
        ],
        [
            'title'    => 'Banking Infrastructure',
            'desc'     => 'Accounts and ledgers at the core.',
            'icon'     => 'ri-bank-line',
            'badge'    => 'LEDGER_CORE',
            'features' => ['Accounts', 'Ledgers', 'Savings', 'Lending', 'Statements', 'Transactions', 'Bank transfers']
        ],
        [
            'title'    => 'Card Infrastructure',
            'desc'     => 'Issue and control cards programmatically.',
            'icon'     => 'ri-id-card-line',
            'badge'    => 'PROGRAMMATIC_ISSUANCE',
            'features' => ['Virtual cards', 'Physical cards', 'Expense cards', 'Corporate cards', 'Card controls']
        ],
        [
            'title'    => 'Remittance Infrastructure',
            'desc'     => 'Move money across borders.',
            'icon'     => 'ri-global-line',
            'badge'    => 'FX_BORDERLESS',
            'features' => ['Cross-border transfers', 'FX services', 'International payouts', 'Settlement services']
        ],
        [
            'title'    => 'Identity Infrastructure',
            'desc'     => 'Verify people and businesses.',
            'icon'     => 'ri-fingerprint-line',
            'badge'    => 'TRUST_VERIFICATION',
            'features' => ['KYC', 'KYB', 'Identity verification', 'Document verification', 'Biometric verification', 'Address verification']
        ],
        [
            'title'    => 'Compliance Infrastructure',
            'desc'     => 'Stay ahead of risk and regulation.',
            'icon'     => 'ri-shield-check-line',
            'badge'    => 'RISK_MITIGATION',
            'features' => ['AML screening', 'PEP checks', 'Watchlists', 'Transaction monitoring', 'Fraud detection']
        ],
        [
            'title'    => 'Messaging Infrastructure',
            'desc'     => 'Reach users on every channel.',
            'icon'     => 'ri-message-3-line',
            'badge'    => 'OMNICHANNEL_REACH',
            'features' => ['SMS', 'Email', 'WhatsApp', 'Push notifications', 'Voice services', 'OTP delivery']
        ],
        [
            'title'    => 'Authentication Infrastructure',
            'desc'     => 'Secure access and identity.',
            'icon'     => 'ri-lock-password-line',
            'badge'    => 'ACCESS_CONTROL',
            'features' => ['SSO', 'Multi-factor authentication', 'User management', 'Role management', 'Access control']
        ],
        [
            'title'    => 'Cloud Infrastructure',
            'desc'     => 'Run and scale your platform.',
            'icon'     => 'ri-cloud-line',
            'badge'    => 'PLATFORM_COMPUTE',
            'features' => ['Hosting', 'CDN', 'Object storage', 'Databases', 'Backups', 'Monitoring']
        ],
        [
            'title'    => 'ERP Integrations',
            'desc'     => 'Connect your operations.',
            'icon'     => 'ri-git-merge-line',
            'badge'    => 'ENTERPRISE_CORE',
            'features' => ['Inventory', 'Procurement', 'Human resources', 'Payroll', 'Operations']
        ],
        [
            'title'    => 'CRM Integrations',
            'desc'     => 'Manage every customer relationship.',
            'icon'     => 'ri-customer-service-2-line',
            'badge'    => 'RELATIONSHIP_HUB',
            'features' => ['Customer management', 'Sales pipelines', 'Support tickets', 'Marketing automation']
        ],
        [
            'title'    => 'Accounting Integrations',
            'desc'     => 'Keep the books in order.',
            'icon'     => 'ri-calculator-line',
            'badge'    => 'LEDGER_SYNC',
            'features' => ['Bookkeeping', 'Invoicing', 'Tax management', 'Financial reporting']
        ],
        [
            'title'    => 'Ecommerce Integrations',
            'desc'     => 'Sell and fulfil online.',
            'icon'     => 'ri-shopping-bag-3-line',
            'badge'    => 'DIGITAL_COMMERCE',
            'features' => ['Storefronts', 'Orders', 'Catalogues', 'Shipping', 'Subscriptions']
        ],
        [
            'title'    => 'Fraud Prevention',
            'desc'     => 'Detect and stop bad actors.',
            'icon'     => 'ri-radar-line',
            'badge'    => 'INTELLIGENT_DEFENSE',
            'features' => ['Risk scoring', 'Behavior analytics', 'Fraud detection', 'Transaction intelligence']
        ],
        [
            'title'    => 'AI Services',
            'desc'     => 'Add intelligence to your product.',
            'icon'     => 'ri-robot-line',
            'badge'    => 'COGNITIVE_COMPUTE',
            'features' => ['Language models', 'AI assistants', 'Document processing', 'Embeddings', 'OCR', 'Speech services']
        ],
        [
            'title'    => 'Document Services',
            'desc'     => 'Generate and manage documents.',
            'icon'     => 'ri-file-text-line',
            'badge'    => 'DOCUMENT_WORKFLOWS',
            'features' => ['E-signatures', 'PDF generation', 'File storage', 'Document workflows']
        ],
        [
            'title'    => 'Logistics Services',
            'desc'     => 'Move goods and track delivery.',
            'icon'     => 'ri-truck-line',
            'badge'    => 'FULFILLMENT_CHAIN',
            'features' => ['Shipment tracking', 'Delivery management', 'Route optimization']
        ],
        [
            'title'    => 'Maps Services',
            'desc'     => 'Add location to anything.',
            'icon'     => 'ri-map-pin-5-line',
            'badge'    => 'GEO_INTELLIGENCE',
            'features' => ['Maps', 'Geocoding', 'Address lookup', 'Location intelligence']
        ]
    ];
    ?>

    <!-- ─── INFRASTRUCTURE CATEGORIES MATRIX (FLEX WRAP RUNWAY) ─── -->
    <section class="py-24 bg-zinc-50/50 border-b border-zinc-100" id="infrastructure-categories">
        <div class="max-w-6xl mx-auto px-6">

            <!-- Section Structural Header Block -->
            <div class="max-w-3xl mb-16" data-aos="fade-up">
                <span class="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-400 block mb-2"> Infrastructure categories</span>
                <h2 class="text-3xl font-normal tracking-tight text-zinc-900 leading-[1.15]">
                    Explore available <span class="italic font-serif text-royal">infrastructure capabilities.</span>
                </h2>
                <p class="text-zinc-500 text-xs md:text-sm leading-relaxed mt-4">
                    Access sovereign infrastructure categories tailored for and utilized by high-growth startups, SMEs, traditional enterprise systems, fintech operators, banks, healthcare networks, telecommunications groups, and public sector operations.
                </p>
            </div>

            <!-- Three-Column Architecture Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-stretch">
                <?php foreach ($infrastructure_categories as $index => $cat): ?>
                    <div class="group bg-white border border-zinc-200/70 rounded-3xl p-6 flex flex-col justify-between transition-all duration-500 ease-out hover:border-royal/40 hover:shadow-[0_30px_60px_-15px_rgba(51,83,224,0.06)] hover:scale-[1.01]" data-aos="fade-up" data-aos-delay="<?= $index * 100 ?>">

                        <div>
                            <!-- Header Line with Icon & Tag Badge -->
                            <div class="flex items-center justify-between mb-5">
                                <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-zinc-50 border border-zinc-200/60 text-zinc-400 transition-colors duration-300 group-hover:text-royal group-hover:bg-royal/[0.02] group-hover:border-royal/20 shadow-sm flex-shrink-0">
                                    <i class="<?= $cat['icon'] ?> text-base leading-none"></i>
                                </div>
                                <span class="font-mono text-[9px] font-semibold tracking-widest text-zinc-400 uppercase bg-zinc-50 border border-zinc-100 px-2 py-0.5 rounded-md">
                                    <?= $cat['badge'] ?>
                                </span>
                            </div>

                            <!-- Card Core Info Text -->
                            <div class="space-y-1 mb-6">
                                <h3 class="text-base font-medium text-zinc-900 tracking-tight transition-colors duration-200 group-hover:text-royal">
                                    <?= $cat['title'] ?>
                                </h3>
                                <p class="text-zinc-500 text-xs leading-relaxed">
                                    <?= $cat['desc'] ?>
                                </p>
                            </div>

                            <!-- Scalable Horizontal Flex Wrap Matrix -->
                            <div class="border-t border-zinc-100/80 pt-5">
                                <div class="flex flex-wrap gap-2">
                                    <?php foreach ($cat['features'] as $feat): ?>
                                        <span class="px-2.5 py-1 bg-zinc-50 border border-zinc-200/50 text-zinc-600 font-sans text-xs rounded-lg transition-all duration-300 hover:bg-white hover:border-royal/30 hover:text-royal cursor-default">
                                            <?= $feat ?>
                                        </span>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>



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

        </div>
    </section>



    <!-- ─── MERCHANT DASHBOARD SPLIT SECTION ─── -->
    <section class="py-24 bg-white border-b border-zinc-100 overflow-hidden" id="merchant-dashboard">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">

                <!-- Left Side: Immersive Premium Mockup Framework -->
                <div class="lg:col-span-6 relative order-2 lg:order-1" data-aos="fade-right">
                    <!-- Decorative Layered Background Blur -->
                    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-72 h-72 bg-royal/5 rounded-full blur-3xl pointer-events-none"></div>

                    <!-- Premium High-Fidelity UI Interface Wrapper -->
                    <div class="relative bg-zinc-900 rounded-[2rem] p-3 shadow-[0_40px_80px_-15px_rgba(51,83,224,0.12)] border border-zinc-800">
                        <div class="rounded-[1.5rem] overflow-hidden border border-zinc-700/50 bg-zinc-950 aspect-[4/3] flex items-center justify-center relative">
                            <!-- Simulated Operational Dashboard Image Element -->
                            <img src="https://encrypted-tbn0.gstatic.com/licensed-image?q=tbn:ANd9GcREYnY48qAqW_5c9jMTGuQFnNrNHmDoInCwvuWa5HFSECjCmX2gku6HU0pAYh_E_iWpSG7wUuWPfcdLsKg"
                                alt="Nesvra Sovereign Merchant Core Telemetry Interface"
                                class="w-full h-full object-cover opacity-90 transition-transform duration-700 hover:scale-105" />

                            <!-- Floating Micro-Interaction UI Component Overlays -->
                            <div class="absolute bottom-4 left-4 bg-white/10 backdrop-blur-md border border-white/10 px-3 py-2 rounded-xl flex items-center gap-2 shadow-lg">
                                <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                                <span class="font-mono text-[9px] text-white uppercase tracking-widest">System live // 100% operational</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Side: Structured Content Engine -->
                <div class="lg:col-span-6 space-y-8 order-1 lg:order-2" data-aos="fade-left">
                    <div>
                        <span class="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-400 block mb-2"> Merchant dashboard</span>
                        <h2 class="text-3xl md:text-4xl font-normal tracking-tight text-zinc-900 leading-[1.15]">
                            Manage everything from one <span class="italic font-serif text-royal">unified command center.</span>
                        </h2>
                    </div>

                    <!-- Structured Matrix Layout of Dashboard Offerings -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-4 pt-4 border-t border-zinc-100">
                        <?php
                        $dashboard_features = [
                            ['label' => 'Purchase software',      'icon' => 'ri-apps-2-line'],
                            ['label' => 'Manage subscriptions',   'icon' => 'ri-repeat-line'],
                            ['label' => 'Generate API keys',      'icon' => 'ri-key-line'],
                            ['label' => 'View invoices',          'icon' => 'ri-file-list-3-line'],
                            ['label' => 'Manage providers',       'icon' => 'ri-node-tree'],
                            ['label' => 'Access documentation',   'icon' => 'ri-book-open-line'],
                            ['label' => 'Support center',         'icon' => 'ri-customer-service-2-line'],
                            ['label' => 'Usage analytics',        'icon' => 'ri-bar-chart-box-line'],
                            ['label' => 'Manage teams',           'icon' => 'ri-team-line'],
                            ['label' => 'Billing control',        'icon' => 'ri-bank-card-line'],
                            ['label' => 'Service requests',       'icon' => 'ri-git-pull-request-line'],
                            ['label' => 'Compliance status',      'icon' => 'ri-shield-check-line']
                        ];
                        foreach ($dashboard_features as $feat):
                        ?>
                            <div class="group flex items-center gap-3 py-1.5 transition-colors duration-200">
                                <div class="flex h-7 w-7 items-center justify-center rounded-lg bg-zinc-50 border border-zinc-200/50 text-zinc-400 group-hover:text-royal group-hover:border-royal/30 group-hover:bg-royal/[0.01] transition-all duration-300">
                                    <i class="<?= $feat['icon'] ?> text-xs leading-none"></i>
                                </div>
                                <span class="text-xs text-zinc-600 font-sans group-hover:text-zinc-900 transition-colors duration-200">
                                    <?= $feat['label'] ?>
                                </span>
                            </div>
                        <?php endforeach; ?>
                    </div>

                    <!-- Strategic Call to Action Block -->
                    <div class="pt-6 border-t border-zinc-100 flex flex-sm-row items-center gap-4">
                        <a href="book-strategy-call.php?subject=Infrastructure+Access" class="px-6 py-3 bg-royal hover:bg-royal/90 text-white font-sans text-xs font-medium rounded-full shadow-lg shadow-royal/10 transition-all duration-300 hover:scale-[1.02]">
                            Request Platform Access <i class="ri-arrow-right-line"></i>
                        </a>

                    </div>
                </div>

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


    <?php
    $target_sectors = [
        ['title' => 'Fintech Companies',  'icon' => 'ri-rocket-line'],
        ['title' => 'Banks',              'icon' => 'ri-bank-line'],
        ['title' => 'SMEs',               'icon' => 'ri-building-4-line'],
        ['title' => 'Healthcare',         'icon' => 'ri-pulse-line'],
        ['title' => 'Education',          'icon' => 'ri-graduation-cap-line'],
        ['title' => 'Telecommunications', 'icon' => 'ri-radar-line'],
        ['title' => 'Government',         'icon' => 'ri-government-line'],
        ['title' => 'Manufacturers',      'icon' => 'ri-building-line'], // Fixed Remix class
        ['title' => 'Ecommerce',          'icon' => 'ri-shopping-bag-3-line'],
        ['title' => 'Logistics',          'icon' => 'ri-truck-line']
    ];
    ?>

    <!-- ─── WHO USES IT MATRIX ─── -->
    <section class="py-24 bg-zinc-50/40 border-b border-zinc-100" id="target-demographics">
        <div class="max-w-6xl mx-auto px-6">

            <!-- Section Structural Header Block -->
            <div class="text-center mb-16" data-aos="fade-up">
                <span class="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-400 block mb-2"> Who uses it</span>
                <h2 class="text-3xl font-normal tracking-tight text-zinc-900 leading-[1.15]">
                    Built for every kind of <span class="italic font-serif text-royal">organization.</span>
                </h2>
                <p class="text-zinc-500 text-xs md:text-sm max-w-xl mx-auto mt-4">
                    From high-growth fintech protocols to sovereign state layers, our systems deliver enterprise-grade performance across critical operational vectors.
                </p>
            </div>

            <!-- 5-Column Grid Structure on Large Screens, Responsive Wrap Below -->
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                <?php foreach ($target_sectors as $index => $sector): ?>
                    <div class="group bg-white border border-zinc-200/50 rounded-2xl p-5 flex flex-col items-center text-center transition-all duration-300 hover:border-royal/30 hover:shadow-[0_20px_40px_-10px_rgba(51,83,224,0.04)]" data-aos="fade-up" data-aos-delay="<?= $index * 40 ?>">

                        <!-- Icon Bracket Matrix -->
                        <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-zinc-50 border border-zinc-100 text-zinc-400 transition-colors duration-300 group-hover:text-royal group-hover:bg-royal/[0.01] group-hover:border-royal/10 shadow-sm mb-3">
                            <i class="<?= $sector['icon'] ?> text-base leading-none"></i>
                        </div>

                        <h3 class="text-xs font-medium text-zinc-800 tracking-tight transition-colors duration-200 group-hover:text-zinc-950 font-sans">
                            <?= $sector['title'] ?>
                        </h3>

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

        </div>
    </section>



    <?php
    $steps = [
        [
            'num'   => '01',
            'title' => 'Create merchant account',
            'desc'  => 'Sign up and seamlessly set up your organization profile in our unified system.',
            'badge' => 'Onboarding'
        ],
        [
            'num'   => '02',
            'title' => 'Subscribe to services',
            'desc'  => 'Pick the exact technical infrastructure categories your business requires to scale.',
            'badge' => 'Allocation'
        ],
        [
            'num'   => '03',
            'title' => 'Get API credentials',
            'desc'  => 'Instantly generate production and sandbox keys directly from your central merchant dashboard.',
            'badge' => 'Security'
        ],
        [
            'num'   => '04',
            'title' => 'Integrate once',
            'desc'  => 'Connect the unified API a single time and eliminate legacy multi-vendor engineering cycles.',
            'badge' => 'Integration'
        ],
        [
            'num'   => '05',
            'title' => 'Start using infrastructure',
            'desc'  => 'Ship features at high-velocity with everything maintained and optimized for you.',
            'badge' => 'Production'
        ]
    ];
    ?>

    <section class="relative w-full py-24 md:py-32 bg-white overflow-hidden z-20">
        <div class="w-full max-w-8xl mx-auto px-4 md:px-16">

            <!-- Structural Header Area -->

            <div class="max-w-3xl mb-16">
                <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase mb-4 block" data-aos="fade-right">
                    How it works
                </span>
                <h2 data-aos="fade-right" data-aos-delay="100" class="text-3xl md:text-4xl font-[400] tracking-[-0.04em] leading-[1.1] text-zinc-900 mb-6">
                    From account to infrastructure <br>in <span class="italic font-serif text-royal">five steps</span>
                </h2>
                <p data-aos="fade-right" data-aos-delay="200" class="text-sm md:text-base text-zinc-500 font-sans leading-relaxed max-w-xl">
                    Eliminate traditional procurement delays, fragmented contract legalities, and fragile multi-vendor codebases. Configure your organization, unlock access keys, and run your business on a single layer.
                </p>
            </div>

            <!-- Sequential Step Matrix -->
            <div class="relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-x-8 gap-y-16">

                <!-- Desktop Connecting Track Line -->
                <div class="hidden lg:block absolute top-[28px] left-4 right-4 h-[1px] bg-zinc-100 z-0"></div>

                <?php
                $delay = 100;
                foreach ($steps as $step):
                ?>
                    <div data-aos="fade-up" data-aos-delay="<?= $delay ?>" class="relative flex flex-col items-start space-y-4 group z-10">

                        <!-- Structural Index Node -->
                        <div class="flex items-center justify-between w-full lg:pr-4">
                            <div class="font-serif italic text-2xl text-brandOrange tracking-tighter bg-white pr-4 z-10 transition-colors duration-300 group-hover:text-royal">
                                <?= $step['num'] ?>
                            </div>
                            <span class="font-mono text-[9px] uppercase tracking-widest text-zinc-400 bg-zinc-50 px-2 py-0.5 rounded border border-zinc-100">
                                <?= $step['badge'] ?>
                            </span>
                        </div>

                        <!-- Copy Content Cluster -->
                        <div class="space-y-2 pt-2">
                            <h3 class="text-base font-sans font-[600] tracking-tight text-zinc-900 transition-colors duration-300 group-hover:text-royal">
                                <?= $step['title'] ?>
                            </h3>
                            <p class="text-xs md:text-sm text-zinc-500 font-sans leading-relaxed">
                                <?= $step['desc'] ?>
                            </p>
                        </div>

                    </div>
                <?php
                    $delay += 100;
                endforeach;
                ?>
            </div>

        </div>
    </section>



    <?php
    $why_nesvra = [
        [
            'title' => 'One API',
            'desc'  => 'Integrate a single time and reach every category.',
            'icon'  => 'ri-code-s-slash-line'
        ],
        [
            'title' => 'One merchant dashboard',
            'desc'  => 'Manage services, keys, billing and support in one place.',
            'icon'  => 'ri-dashboard-3-line'
        ],
        [
            'title' => 'Global ready',
            'desc'  => 'Built for businesses operating across markets.',
            'icon'  => 'ri-global-line'
        ],
        [
            'title' => 'Subscription pricing',
            'desc'  => 'Predictable costs that scale with usage.',
            'icon'  => 'ri-calendar-todo-line'
        ],
        [
            'title' => 'Dedicated support',
            'desc'  => 'One team across every service you use.',
            'icon'  => 'ri-customer-service-2-line'
        ],
        [
            'title' => 'Faster time to market',
            'desc'  => 'Skip months of sourcing and contracting.',
            'icon'  => 'ri-speed-up-line'
        ],
        [
            'title' => 'Reduced vendor management',
            'desc'  => 'No more juggling many providers and invoices.',
            'icon'  => 'ri-repeat-fill'
        ],
        [
            'title' => 'Scalable architecture',
            'desc'  => 'Grows from first launch to enterprise scale.',
            'icon'  => 'ri-node-tree'
        ],
        [
            'title' => 'Technology partner',
            'desc'  => 'An operating partner, not just another vendor.',
            'icon'  => 'ri-hand-heart-line'
        ]
    ];
    ?>


    <!-- ─── WHY NESVRA GRID SYSTEM ─── -->
    <section class="py-24 bg-white border-b border-zinc-100" id="why-nesvra">
        <div class="max-w-7xl mx-auto px-6">

            <!-- Section Structural Header Block -->
            <div class="max-w-3xl mb-16" data-aos="fade-up">
                <span class="font-mono text-[10px] uppercase tracking-[0.3em] text-brandOrange block mb-2">{08} Value proposition</span>
                <h2 class="text-3xl md:text-4xl font-normal tracking-tight text-zinc-900 leading-[1.15]">
                    Why Nesvra. <br><span class="italic font-serif text-royal">One partner for your whole infrastructure.</span>
                </h2>
            </div>

            <!-- Three-Column Proposition Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12 items-stretch">
                <?php foreach ($why_nesvra as $index => $item): ?>
                    <div class="group flex flex-col justify-between transition-all duration-300" data-aos="fade-up" data-aos-delay="<?= $index * 50 ?>">

                        <div>
                            <!-- Minimal Icon Container Matrix -->
                            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-zinc-50 border border-zinc-200/60 text-zinc-400 transition-all duration-300 group-hover:text-royal group-hover:bg-royal/[0.02] group-hover:border-royal/20 shadow-sm mb-5">
                                <i class="<?= $item['icon'] ?> text-electric leading-none"></i>
                            </div>

                            <!-- Proposition Text Core -->
                            <div class="space-y-2">
                                <h3 class="text-sm font-medium text-zinc-900 tracking-tight transition-colors duration-200 group-hover:text-royal">
                                    <?= $item['title'] ?>
                                </h3>
                                <p class="text-zinc-500 text-xs leading-relaxed max-w-sm">
                                    <?= $item['desc'] ?>
                                </p>
                            </div>
                        </div>

                        <!-- Subtle Horizontal Rule Intercept -->
                        <div class="mt-6 border-b border-zinc-100 group-hover:border-royal/10 transition-colors duration-300 w-12"></div>

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

        </div>
    </section>



    <?php
    $faqs = [
        [
            'q'    => 'What is Infrastructure Access?',
            'a'    => 'Infrastructure Access is a single platform that connects your business to dozens of provider categories, from payments and identity to messaging, compliance, cloud and enterprise systems, through one account, one integration and one merchant dashboard. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Aggregated Layer • Unified Core</small>',
            'icon' => 'ri-apps-2-line'
        ],
        [
            'q'    => 'How does Infrastructure Access work?',
            'a'    => 'You create a merchant account, subscribe to the services you need, generate API credentials, integrate once, and start using infrastructure. Nesvra manages the underlying providers behind a single unified API. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• 5-Step Workflow • Automated Orchestration</small>',
            'icon' => 'ri-git-commit-line'
        ],
        [
            'q'    => 'Do I need separate provider accounts?',
            'a'    => 'No. Instead of applying to, contracting with and integrating each provider individually, you connect once to Nesvra and access them through one relationship. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Single Relationship • Zero Vendor Bloat</small>',
            'icon' => 'ri-split-cells-horizontal'
        ],
        [
            'q'    => 'Can I use only messaging services?',
            'a'    => 'Yes. You subscribe only to the categories you need, such as messaging on its own, and add others later as your requirements grow. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Granular Subscriptions • Dynamic Allocation</small>',
            'icon' => 'ri-message-3-line'
        ],
        [
            'q'    => 'Can I access compliance tools?',
            'a'    => 'Yes. Compliance infrastructure includes AML screening, PEP checks, watchlists, transaction monitoring and fraud detection, available through the same integration. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Risk Mitigation • Real-Time AML/PEP Screening</small>',
            'icon' => 'ri-shield-check-line'
        ],
        [
            'q'    => 'Do I receive API keys?',
            'a'    => 'Yes. You generate and manage API credentials directly from your merchant dashboard, with separate keys for your projects and environments. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Programmatic Management • Multi-Environment Tokens</small>',
            'icon' => 'ri-key-line'
        ],
        [
            'q'    => 'Can enterprises use Infrastructure Access?',
            'a'    => 'Yes. Startups, SMEs and large enterprises all use Infrastructure Access, with scalable architecture and support that grows with you. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Elastic Architecture • Enterprise SLA Available</small>',
            'icon' => 'ri-building-line'
        ],
        [
            'q'    => 'Do I need technical knowledge?',
            'a'    => 'Your team needs basic integration ability to connect the unified API, but Nesvra removes the work of sourcing, contracting and maintaining providers. Documentation and support guide you through setup. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Clear Documentation • Accelerated Integration</small>',
            'icon' => 'ri-terminal-box-line'
        ],
        [
            'q'    => 'Can I upgrade later?',
            'a'    => 'Yes. Subscriptions are flexible, so you can add categories, increase usage or move to higher tiers at any time. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Elastic Scaling • On-Demand Tier Adjustments</small>',
            'icon' => 'ri-arrow-up-circle-line'
        ],
        [
            'q'    => 'Do you support global businesses?',
            'a'    => 'Yes. Nesvra is a US based technology company serving businesses globally, and the platform is built to be global ready. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• US Incorporation • Cross-Border Jurisdictions</small>',
            'icon' => 'ri-global-line'
        ],
        [
            'q'    => 'How do subscriptions work?',
            'a'    => 'You pay a predictable subscription for the services you use, billed through one invoice, instead of negotiating and tracking many separate vendor contracts. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Single Line Ledger • OpEx Optimization</small>',
            'icon' => 'ri-bank-card-line'
        ],
        [
            'q'    => 'Can I manage multiple projects?',
            'a'    => 'Yes. You can manage multiple projects, environments and teams from a single merchant dashboard, each with its own credentials. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Multi-Tenant Controls • Isolated Environments</small>',
            'icon' => 'ri-node-tree'
        ],
        [
            'q'    => 'Can startups use Infrastructure Access?',
            'a'    => 'Yes. Startups use Infrastructure Access to launch quickly without months of provider sourcing, getting to market faster with less overhead. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Fast-Track TTM • Minimum Capital Burn</small>',
            'icon' => 'ri-rocket-line'
        ],
        [
            'q'    => 'Can I integrate ERP systems?',
            'a'    => 'Yes. ERP integrations cover inventory, procurement, human resources, payroll and operations, alongside CRM and accounting integrations. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Operational Sync • Unified Back-Office Ecosystem</small>',
            'icon' => 'ri-git-merge-line'
        ],
        [
            'q'    => 'Do you support authentication services?',
            'a'    => 'Yes. Authentication infrastructure includes SSO, multi-factor authentication, user management, role management and access control. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Identity Access Management • Zero-Trust Foundations</small>',
            'icon' => 'ri-lock-password-line'
        ],
        [
            'q'    => 'Which payment capabilities are included?',
            'a'    => 'Payments infrastructure includes gateways, payment links, collections, checkout, subscriptions, recurring billing, escrow and payouts. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• High-Volume Rails • End-to-End Money Movement</small>',
            'icon' => 'ri-exchange-funds-line'
        ],
        [
            'q'    => 'Can I issue cards?',
            'a'    => 'Yes. Card infrastructure supports virtual, physical, expense and corporate cards, with programmatic card controls. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Programmatic Issuance • Ledger Intercept Rules</small>',
            'icon' => 'ri-id-card-line'
        ],
        [
            'q'    => 'Is support included?',
            'a'    => 'Yes. You work with one dedicated support team across every service, instead of contacting each provider separately. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Consolidated Support • Specialized Response Pods</small>',
            'icon' => 'ri-customer-service-2-line'
        ],
        [
            'q'    => 'How is this different from buying providers directly?',
            'a'    => 'Direct provider relationships mean many applications, contracts, APIs, invoices and support channels. Nesvra collapses all of that into one account, one integration, one invoice and one dashboard. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Structural Consolidation • Low Maintenance Overhead</small>',
            'icon' => 'ri-repeat-split-line'
        ],
        [
            'q'    => 'How do I get started?',
            'a'    => 'Get started to create your merchant account, or talk to sales for a tailored walkthrough. You can subscribe to your first services and receive API credentials right away. <br><small class="block mt-2 opacity-60 font-mono text-[10px] uppercase tracking-wider text-royal">• Immediate Activation • Sandbox Testing Instant</small>',
            'icon' => 'ri-play-circle-line'
        ]
    ];
    ?>


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

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

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

                        <div class="relative z-10">
                            <div class="flex items-center gap-4 mb-2">
                                <i class="<?= $faq['icon'] ?> text-royal group-hover:text-brandOrange transition-colors"></i>
                                <h3 class="text-[15px] font-semibold 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-[14px] leading-relaxed">
                                    <?= $faq['a'] ?>
                                </div>
                            </div>
                        </div>

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

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

        </div>
    </section>



    <!-- FINAL CTA -->
    <section class="py-24 px-[5%] bg-white overflow-hidden" id="final-call">
        <div class="max-w-[1200px] mx-auto">
            <div class="relative w-full md:h-[450px] rounded-[32px] border border-zinc-900/5 overflow-hidden flex items-center justify-center group bg-zinc-950">
                <div class="absolute inset-0 z-0">
                    <img src="Asset/infastructure-access.webp" alt="Manufacturing Technology" class="w-full h-full object-cover opacity-60 scale-100 group-hover:scale-[1.03] transition-transform duration-[1200ms] ease-out">
                    <div class="absolute inset-0 bg-black/30"></div>
                </div>
                <div class="relative z-10 w-full px-6 py-20 md:py-0 text-center">
                    <div class="max-w-[720px] mx-auto" data-aos="fade-up" data-aos-duration="800">
                        <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-white leading-[1.1] mb-6">
                           Ready to access business  <br><span class="italic font-serif text-brandOrange">infrastructure without the complexity?</span>
                        </h2>
                        <p class="text-white/70 text-sm md:text-base mb-10 max-w-[540px] mx-auto leading-relaxed tracking-tight font-light">
                           Connect once and access the tools, services and infrastructure your business needs to launch, operate and grow globally.
                        </p>
                        <div class="flex flex-col sm:flex-row items-center justify-center gap-4 max-w-xl mx-auto">
                            <a href="book-strategy-call.php?subject=Infrastructure+Access" class="w-full sm:w-auto px-8 py-4 bg-brandOrange text-white rounded-full font-medium text-xs uppercase tracking-widest hover:bg-white hover:text-royal transition-all duration-300 shadow-lg shadow-brandOrange/10 flex items-center justify-center gap-2 group/btn">
                                <span>Book Strategy Call</span><i class="ri-arrow-right-line text-xs transition-transform duration-300 group-hover/btn:translate-x-1"></i>
                            </a>
                            <a href="get-demo.php" class="w-full sm:w-auto px-8 py-4 bg-white/10 backdrop-blur-md text-white rounded-full font-medium text-xs uppercase tracking-widest hover:bg-white hover:text-royal transition-all duration-300 border border-white/10 flex items-center justify-center gap-2 group/btn2">
                                <span>Explore Demos</span><i class="ri-play-circle-line text-xs opacity-60"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="absolute top-0 right-0 w-80 h-80 bg-blue-500/10 rounded-full blur-[120px] pointer-events-none"></div>
                <div class="absolute bottom-0 left-0 w-80 h-80 bg-brandOrange/10 rounded-full blur-[120px] pointer-events-none"></div>
            </div>
        </div>
    </section>



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

</body>

</html>