<!DOCTYPE html>
<html lang="en">

<?php
$pagetitle = "Home | Nesvra";
include 'components/head.php' ?>

<body class="bg-white">

    <?php include 'components/navbar.php'; ?>
    <!-- hero section -->
    <section class="relative lg:min-h-screen  min-h-[70vh] w-full overflow-hidden">

        <div class="absolute inset-0 z-0">
            <div class="absolute inset-0 bg-black/50 z-10"></div> <img src="Asset/hero-2.webp"
                class="w-full h-full object-cover bg-fixed"
                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-40 flex flex-col items-start text-left justify-end pb-6">


            <h1 data-aos="fade-right" data-aos-delay="200"
                class="max-w-3xl md:text-5xl text-4xl  font-[400] tracking-[-0.05em] leading-[1.05] text-white ">
                Technology Teams, Software
                and Infrastructure for Growing Businesses

            </h1>

            <p data-aos="fade-right" data-aos-delay="400"
                class="mt-4 max-w-2xl text-sm  text-white/70 font-mono leading-relaxed">
                Whether you are launching a fintech company, modernizing operations, managing existing platforms or looking for a dedicated technology department, Nesvra provides the software, systems, teams and infrastructure you need to move faster.
            </p>

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

                <a href="get-demo.php"
                    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>

                    <span class="font-sans font-[600] tracking-tight text-sm">Explore Live Demos</span>

                    <i data-lucide="arrow-right" class="w-4 h-4 text-white"></i>
                </a>

                <a href="book-strategy-call.php"
                    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>
                    <i data-lucide="message-circle" class="w-4 h-4 text-white"></i>
                    <span class="font-sans font-[500] tracking-tight text-sm">Talk to Our Strategy Team</span>
                </a>

            </div>



        </div>

        <div class="absolute bottom-5 left-1/2 -translate-x-1/2 z-40 w-full max-w-[340px] chat-container">

            <div id="q-bubble" class="chat-entry flex items-center gap-3 mb-2">
                <div class="flex-shrink-0 w-8 h-8 rounded-full overflow-hidden border border-white/10">
                    <img src="https://i.pravatar.cc/100?u=nesvra" alt="User" class="w-full h-full object-cover">
                </div>
                <div class="bg-[#1A1A1A] text-white px-4 py-2.5 rounded-[18px] rounded-bl-none shadow-xl">
                    <p class="chat-text-small font-sans">Do you have a website where I can see more?</p>
                </div>
            </div>

            <div id="a-bubble" class="chat-entry pl-10">
                <div class="bg-royal p-4 rounded-[22px]  shadow-2xl shadow-royal/30">
                    <p class="chat-text-small text-white font-medium mb-3">Check out our product page!</p>

                    <button
                        class="glass-action w-full py-2.5 rounded-xl text-white font-sans text-[13px] font-semibold tracking-tight flex items-center justify-center gap-2">
                        Let's Go!
                        <i data-lucide="arrow-up-right" class="w-3.5 h-3.5 opacity-70"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <section class="relative w-full bg-white border-b border-zinc-100 py-12 overflow-hidden">

        <div class="absolute inset-y-0 left-0 w-24 md:w-48 bg-gradient-to-r from-white to-transparent z-10 pointer-events-none"></div>
        <div class="absolute inset-y-0 right-0 w-24 md:w-48 bg-gradient-to-l from-white to-transparent z-10 pointer-events-none"></div>

        <div class="flex w-full overflow-hidden">

            <div class="animate-marquee flex items-center gap-20 md:gap-32 shrink-0 min-w-full pr-20 md:pr-32">

                <div class="flex flex-col gap-1.5 min-w-max group">
                    <div class="flex items-center gap-2 text-soft">
                        <i class="ri-bank-line text-sm text-electric group-hover:text-brandOrange transition-colors"></i>
                        <span class="font-mono text-[10px] uppercase tracking-[0.2em] font-semibold text-zinc-400">Core Infrastructure</span>
                    </div>
                    <p class="text-dark text-[15px] font-medium tracking-tight">Tier-1 Banks</p>
                </div>

                <div class="flex flex-col gap-1.5 min-w-max group">
                    <div class="flex items-center gap-2 text-soft">
                        <i class="ri-refund-2-line text-sm text-electric group-hover:text-brandOrange transition-colors"></i>
                        <span class="font-mono text-[10px] uppercase tracking-[0.2em] font-semibold text-zinc-400">Transaction Rails</span>
                    </div>
                    <p class="text-dark text-[15px] font-medium tracking-tight">Payment Providers</p>
                </div>

                <div class="flex flex-col gap-1.5 min-w-max group">
                    <div class="flex items-center gap-2 text-soft">
                        <i class="ri-cloud-line text-sm text-electric group-hover:text-brandOrange transition-colors"></i>
                        <span class="font-mono text-[10px] uppercase tracking-[0.2em] font-semibold text-zinc-400">Compute & Scaling</span>
                    </div>
                    <p class="text-dark text-[15px] font-medium tracking-tight">Cloud Providers</p>
                </div>

                <div class="flex flex-col gap-1.5 min-w-max group">
                    <div class="flex items-center gap-2 text-soft">
                        <i class="ri-signal-tower-line text-sm text-electric group-hover:text-brandOrange transition-colors"></i>
                        <span class="font-mono text-[10px] uppercase tracking-[0.2em] font-semibold text-zinc-400">Network Layers</span>
                    </div>
                    <p class="text-dark text-[15px] font-medium tracking-tight">Telecom Operators</p>
                </div>

                <div class="flex flex-col gap-1.5 min-w-max group">
                    <div class="flex items-center gap-2 text-soft">
                        <i class="ri-exchange-funds-line text-sm text-electric group-hover:text-brandOrange transition-colors"></i>
                        <span class="font-mono text-[10px] uppercase tracking-[0.2em] font-semibold text-zinc-400">Digital Banking</span>
                    </div>
                    <p class="text-dark text-[15px] font-medium tracking-tight">High-Growth Fintechs</p>
                </div>

                <div class="flex flex-col gap-1.5 min-w-max group">
                    <div class="flex items-center gap-2 text-soft">
                        <i class="ri-building-line text-sm text-electric group-hover:text-brandOrange transition-colors"></i>
                        <span class="font-mono text-[10px] uppercase tracking-[0.2em] font-semibold text-zinc-400">Global Scale</span>
                    </div>
                    <p class="text-dark text-[15px] font-medium tracking-tight">Commercial Enterprises</p>
                </div>

                <div class="flex flex-col gap-1.5 min-w-max group">
                    <div class="flex items-center gap-2 text-soft">
                        <i class="ri-government-line text-sm text-electric group-hover:text-brandOrange transition-colors"></i>
                        <span class="font-mono text-[10px] uppercase tracking-[0.2em] font-semibold text-zinc-400">Regulated Ecosystems</span>
                    </div>
                    <p class="text-dark text-[15px] font-medium tracking-tight">Sovereign Government</p>
                </div>

            </div>

            <div class="animate-marquee flex items-center gap-20 md:gap-32 shrink-0 min-w-full pr-20 md:pr-32" aria-hidden="true">

                <div class="flex flex-col gap-1.5 min-w-max group">
                    <div class="flex items-center gap-2 text-soft">
                        <i class="ri-bank-line text-sm text-electric"></i>
                        <span class="font-mono text-[10px] uppercase tracking-[0.2em] font-semibold text-zinc-400">Core Infrastructure</span>
                    </div>
                    <p class="text-dark text-[15px] font-medium tracking-tight">Tier-1 Banks</p>
                </div>

                <div class="flex flex-col gap-1.5 min-w-max group">
                    <div class="flex items-center gap-2 text-soft">
                        <i class="ri-refund-2-line text-sm text-electric"></i>
                        <span class="font-mono text-[10px] uppercase tracking-[0.2em] font-semibold text-zinc-400">Transaction Rails</span>
                    </div>
                    <p class="text-dark text-[15px] font-medium tracking-tight">Payment Providers</p>
                </div>

                <div class="flex flex-col gap-1.5 min-w-max group">
                    <div class="flex items-center gap-2 text-soft">
                        <i class="ri-cloud-line text-sm text-electric"></i>
                        <span class="font-mono text-[10px] uppercase tracking-[0.2em] font-semibold text-zinc-400">Compute & Scaling</span>
                    </div>
                    <p class="text-dark text-[15px] font-medium tracking-tight">Cloud Providers</p>
                </div>

                <div class="flex flex-col gap-1.5 min-w-max group">
                    <div class="flex items-center gap-2 text-soft">
                        <i class="ri-signal-tower-line text-sm text-electric"></i>
                        <span class="font-mono text-[10px] uppercase tracking-[0.2em] font-semibold text-zinc-400">Network Layers</span>
                    </div>
                    <p class="text-dark text-[15px] font-medium tracking-tight">Telecom Operators</p>
                </div>

                <div class="flex flex-col gap-1.5 min-w-max group">
                    <div class="flex items-center gap-2 text-soft">
                        <i class="ri-exchange-funds-line text-sm text-electric"></i>
                        <span class="font-mono text-[10px] uppercase tracking-[0.2em] font-semibold text-zinc-400">Digital Banking</span>
                    </div>
                    <p class="text-dark text-[15px] font-medium tracking-tight">High-Growth Fintechs</p>
                </div>

                <div class="flex flex-col gap-1.5 min-w-max group">
                    <div class="flex items-center gap-2 text-soft">
                        <i class="ri-building-line text-sm text-electric"></i>
                        <span class="font-mono text-[10px] uppercase tracking-[0.2em] font-semibold text-zinc-400">Global Scale</span>
                    </div>
                    <p class="text-dark text-[15px] font-medium tracking-tight">Commercial Enterprises</p>
                </div>

                <div class="flex flex-col gap-1.5 min-w-max group">
                    <div class="flex items-center gap-2 text-soft">
                        <i class="ri-government-line text-sm text-electric"></i>
                        <span class="font-mono text-[10px] uppercase tracking-[0.2em] font-semibold text-zinc-400">Regulated Ecosystems</span>
                    </div>
                    <p class="text-dark text-[15px] font-medium tracking-tight">Sovereign Government</p>
                </div>

            </div>

        </div>
    </section>

    <!-- How Nesvra helps businesses -->
    <section class="bg-white py-32 px-4">
        <div class="max-w-7xl mx-auto lg:px-6 px-0">

            <!-- Top Grid Section Header Layout -->
            <div class="grid lg:grid-cols-2 gap-8 items-end mb-14">
                <div class="data-side" data-aos="fade-up" data-aos-duration="1000">
                    <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase block mb-6" data-aos="fade-right" data-aos-duration="900" data-aos-delay="100">
                        How Nesvra helps businesses
                    </span>
                    <h2 class="text-4xl md:text-[2.5rem] font-[400] tracking-tight leading-tight text-dark">
                        Wherever your business is, we move it forward
                    </h2>
                </div>
                <div data-aos="fade-up" data-aos-delay="200">
                    <p class="text-soft text-md border-l-2 border-gray-100 pl-6 font-[400]">
                        Nesvra serves founders launching new technology businesses and established organizations that simply need software, systems, teams and infrastructure to grow. Start something new, modernize what you run, or hand your technology operations to us.
                    </p>
                </div>
            </div>

            <!-- Sticky Card Step 01: Starting Something New -->
            <div class="relative md:sticky top-16 bg-white mb-10 md:mb-0">
                <div class="grid md:grid-cols-2 gap-10 items-center border-t border-gray-200 pt-10 relative" data-aos="fade-up" data-aos-delay="300">

                    <div class="content-side">
                        <span class="font-mono text-[11px] font-bold tracking-[0.15em] text-brandOrange uppercase block mb-1">For Builders</span>
                        <h3 class="text-3xl text-dark font-[400] mb-2">Starting Something New</h3>
                        <p class="text-base text-soft">Launch fintech companies, SaaS businesses, digital banks and marketplaces with a partner who builds the product, architecture and compliance-ready infrastructure with you.</p>

                        <ul class="space-y-4 pt-5 pb-2">
                            <li class="flex items-center gap-4 text-soft font-[400] group">
                                <div class="transition-transform duration-300 group-hover:scale-110">
                                    <i data-lucide="check" class="w-5 h-5 text-brandOrange"></i>
                                </div>
                                <span class="font-mono text-sm">Launch fintech companies</span>
                            </li>
                            <li class="flex items-center gap-4 text-soft font-[400] group">
                                <div class="transition-transform duration-300 group-hover:scale-110">
                                    <i data-lucide="check" class="w-5 h-5 text-brandOrange"></i>
                                </div>
                                <span class="font-mono text-sm">Launch SaaS businesses</span>
                            </li>
                            <li class="flex items-center gap-4 text-soft font-[400] group">
                                <div class="transition-transform duration-300 group-hover:scale-110">
                                    <i data-lucide="check" class="w-5 h-5 text-brandOrange"></i>
                                </div>
                                <span class="font-mono text-sm">Launch digital banks</span>
                            </li>
                            <li class="flex items-center gap-4 text-soft font-[400] group">
                                <div class="transition-transform duration-300 group-hover:scale-110">
                                    <i data-lucide="check" class="w-5 h-5 text-brandOrange"></i>
                                </div>
                                <span class="font-mono text-sm">Launch marketplaces</span>
                            </li>
                        </ul>

                        <a href="solutions-launch-tech-business.php" class="shimmer-effect group relative inline-flex items-center gap-3 px-8 py-4 bg-brandOrange mt-6 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>
                            <span class="font-sans font-[600] tracking-tight text-sm">Launch your business</span>
                            <i data-lucide="arrow-right" class="group-hover:translate-x-1 transition-transform w-4 h-4"></i>
                        </a>
                    </div>

                    <div class="image-side">
                        <div class="aspect-[4/3] w-full rounded-[24px] overflow-hidden border border-zinc-100 shadow-[0_32px_64px_-16px_rgba(0,0,0,0.1)]">
                            <img src="https://images.unsplash.com/photo-1700190827495-f9d8eec1a08c?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?q=80&w=2000" alt="Launch Session" class="w-full h-full object-cover transform transition-transform duration-[2s] group-hover:scale-110" />
                        </div>
                    </div>

                </div>
            </div>

            <!-- Sticky Card Step 02: Growing An Existing Business -->
            <div class="relative md:sticky top-24 bg-white mb-10 md:mb-0">
                <div class="grid md:grid-cols-2 gap-10 items-center border-t border-gray-200 pt-10 relative" data-aos="fade-up" data-aos-delay="300">

                    <div class="content-side">
                        <span class="font-mono text-[11px] font-bold tracking-[0.15em] text-brandOrange uppercase block mb-1"> For Operators</span>
                        <h3 class="text-3xl text-dark font-[400] mb-2">Growing An Existing Business</h3>
                        <p class="text-base text-soft">Modernize how your organization runs with ERP, CRM, accounting and a unified business operating system that connects every department on one platform.</p>

                        <ul class="space-y-4 pt-5 pb-2">
                            <li class="flex items-center gap-4 text-soft font-[400] group">
                                <div class="transition-transform duration-300 group-hover:scale-110">
                                    <i data-lucide="check" class="w-5 h-5 text-brandOrange"></i>
                                </div>
                                <span class="font-mono text-sm">ERP</span>
                            </li>
                            <li class="flex items-center gap-4 text-soft font-[400] group">
                                <div class="transition-transform duration-300 group-hover:scale-110">
                                    <i data-lucide="check" class="w-5 h-5 text-brandOrange"></i>
                                </div>
                                <span class="font-mono text-sm">CRM</span>
                            </li>
                            <li class="flex items-center gap-4 text-soft font-[400] group">
                                <div class="transition-transform duration-300 group-hover:scale-110">
                                    <i data-lucide="check" class="w-5 h-5 text-brandOrange"></i>
                                </div>
                                <span class="font-mono text-sm">Accounting</span>
                            </li>
                            <li class="flex items-center gap-4 text-soft font-[400] group">
                                <div class="transition-transform duration-300 group-hover:scale-110">
                                    <i data-lucide="check" class="w-5 h-5 text-brandOrange"></i>
                                </div>
                                <span class="font-mono text-sm">Business Operating System</span>
                            </li>
                        </ul>

                        <a href="systems.php" class="shimmer-effect group relative inline-flex items-center gap-3 px-8 py-4 bg-brandOrange mt-6 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>
                            <span class="font-sans font-[600] tracking-tight text-sm">Modernize operations</span>
                            <i data-lucide="arrow-right" class="group-hover:translate-x-1 transition-transform w-4 h-4"></i>
                        </a>
                    </div>

                    <div class="image-side">
                        <div class="aspect-[4/3] w-full rounded-[24px] overflow-hidden border border-zinc-100 shadow-[0_32px_64px_-16px_rgba(0,0,0,0.1)]">
                            <img src="https://i.pinimg.com/736x/43/e6/54/43e654ee4a95e5842facf9721f1fc060.jpg?q=80&w=2000" alt="Modernize Operations Session" class="w-full h-full object-cover transform transition-transform duration-[2s] group-hover:scale-110" />
                        </div>
                    </div>

                </div>
            </div>

            <!-- Sticky Card Step 03: Managing Technology -->
            <div class="relative md:sticky top-32 bg-white mb-10 md:mb-0">
                <div class="grid md:grid-cols-2 gap-10 items-center border-t border-gray-200 pt-10 relative" data-aos="fade-up" data-aos-delay="300">

                    <div class="content-side">
                        <span class="font-mono text-[11px] font-bold tracking-[0.15em] text-brandOrange uppercase block mb-1"> For Operators</span>
                        <h3 class="text-3xl text-dark font-[400] mb-2">Managing Technology</h3>
                        <p class="text-base text-soft">Hand your technology operations to a managed department that builds, maintains and improves your platforms, connects providers and keeps everything running.</p>

                        <ul class="space-y-4 pt-5 pb-2">
                            <li class="flex items-center gap-4 text-soft font-[400] group">
                                <div class="transition-transform duration-300 group-hover:scale-110">
                                    <i data-lucide="check" class="w-5 h-5 text-brandOrange"></i>
                                </div>
                                <span class="font-mono text-sm">Tech Team for Hire</span>
                            </li>
                            <li class="flex items-center gap-4 text-soft font-[400] group">
                                <div class="transition-transform duration-300 group-hover:scale-110">
                                    <i data-lucide="check" class="w-5 h-5 text-brandOrange"></i>
                                </div>
                                <span class="font-mono text-sm">Infrastructure Access</span>
                            </li>
                            <li class="flex items-center gap-4 text-soft font-[400] group">
                                <div class="transition-transform duration-300 group-hover:scale-110">
                                    <i data-lucide="check" class="w-5 h-5 text-brandOrange"></i>
                                </div>
                                <span class="font-mono text-sm">Provider Integrations</span>
                            </li>
                            <li class="flex items-center gap-4 text-soft font-[400] group">
                                <div class="transition-transform duration-300 group-hover:scale-110">
                                    <i data-lucide="check" class="w-5 h-5 text-brandOrange"></i>
                                </div>
                                <span class="font-mono text-sm">Platform Management & Maintenance</span>
                            </li>
                        </ul>

                        <a href="solutions-tech-team-for-hire.php" class="shimmer-effect group relative inline-flex items-center gap-3 px-8 py-4 bg-brandOrange mt-6 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>
                            <span class="font-sans font-[600] tracking-tight text-sm">Get your tech department</span>
                            <i data-lucide="arrow-right" class="group-hover:translate-x-1 transition-transform w-4 h-4"></i>
                        </a>
                    </div>

                    <div class="image-side">
                        <div class="aspect-[4/3] w-full rounded-[24px] overflow-hidden border border-zinc-100 shadow-[0_32px_64px_-16px_rgba(0,0,0,0.1)]">
                            <img src="https://i.pinimg.com/736x/c7/4d/8d/c74d8db953a1c199c5b513fdae843aab.jpg?q=80&w=2000" alt="Tech Management Session" class="w-full h-full object-cover transform transition-transform duration-[2s] group-hover:scale-110" />
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </section>

    <!-- technology solutions -->
    <section class="bg-zinc-50 py-24 lg:py-32 px-4 border-y border-zinc-100 overflow-hidden">
        <div class="max-w-7xl mx-auto lg:px-6 px-0">

            <!-- UPPER ROW: Split Layout for Copy & Image -->
            <div class="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center mb-20">

                <!-- LEFT SIDE: Content Block (7 Columns Wide) -->
                <div class="lg:col-span-7 space-y-8" data-aos="fade-right" data-aos-duration="1000">
                    <div>


                        <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase block mb-6" data-aos="fade-right" data-aos-duration="900" data-aos-delay="100">
                            Technology Department as a Service
                        </span>
                        <h2 class="text-4xl md:text-[2.75rem] font-[400] tracking-tight leading-none text-dark mb-6">
                            Technology Department <br class="hidden md:inline" />as a Service
                        </h2>
                        <h4 class="text-xl text-electric font-medium tracking-tight mb-4 italic font-serif">
                            Your technology department, without hiring one.
                        </h4>
                        <p class="text-soft text-base leading-relaxed max-w-2xl font-[400]">
                            Subscribe to a complete technology department managed by Nesvra. This is not staff augmentation, renting developers, or outsourcing. It is a fully managed team that can replace your internal department, complement an existing one, and run your platforms day to day.
                        </p>
                    </div>

                    <!-- Specialized Talent Verticals Grid -->
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        <?php
                        $roles_with_icons = [
                            "Developers" => "terminal",
                            "Designers" => "layers",
                            "Product & Project Managers" => "kanban",
                            "QA Engineers" => "shield-check",
                            "DevOps & Cloud" => "cloud-lightning",
                            "Support & Consultants" => "help-circle"
                        ];
                        foreach ($roles_with_icons as $role => $icon):
                        ?>
                            <div class="flex items-center gap-3.5 p-4 bg-white rounded-2xl border border-zinc-200/50 shadow-sm group hover:border-brandOrange/30 hover:shadow-md transition-all duration-300 cursor-default">
                                <!-- Icon Frame Component with Interactive State Shifting -->
                                <div class="w-9 h-9 rounded-xl bg-zinc-50 border border-zinc-100 flex items-center justify-center text-electric group-hover:bg-brandOrange/10 group-hover:border-brandOrange/20 group-hover:text-brandOrange transition-all duration-300 shrink-0">
                                    <i data-lucide="<?= $icon ?>" class="w-4 h-4 transition-transform duration-300 group-hover:scale-110"></i>
                                </div>

                                <!-- Context Text Label -->
                                <span class="font-sans text-xs md:text-sm font-semibold tracking-tight text-dark group-hover:text-zinc-950 transition-colors duration-300">
                                    <?= $role ?>
                                </span>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <!-- RIGHT SIDE: High-End Tech Team Showcase Image (5 Columns Wide) -->
                <div class="lg:col-span-5" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="200">
                    <div class="relative group">
                        <div class="absolute -inset-4 bg-gradient-to-tr from-brandOrange/10 to-transparent rounded-[32px] blur-2xl opacity-60 group-hover:opacity-80 transition-opacity duration-1000"></div>
                        <div class="relative aspect-[4/3] lg:aspect-[6/6] w-full rounded-[32px] overflow-hidden border border-zinc-200/80 bg-zinc-100 shadow-[0_40px_80px_-15px_rgba(0,0,0,0.08)]">
                            <img src="Asset/TechTeam.webp"
                                alt="Nesvra Technology Team Operational Center"
                                class="w-full h-full object-cover object-center transform transition-transform duration-[3s] ease-out group-hover:scale-105" />
                            <div class="absolute inset-0 bg-gradient-to-t from-zinc-950/40 via-transparent to-transparent pointer-events-none"></div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- LOWER ROW: Full-Width Table & Action Block -->
            <div class="space-y-12 border-t border-zinc-200/60 pt-12" data-aos="fade-up" data-aos-duration="1000">

                <!-- Premium Comparison Capability Matrix (Full Row) -->
                <div class="w-full">
                    <div class="mb-6">
                        <span class="font-mono text-[10px] font-bold tracking-widest text-zinc-400 uppercase">Capability Framework Matrix</span>
                    </div>
                    <div class="w-full overflow-x-auto rounded-2xl border border-zinc-200/60 bg-white shadow-sm">
                        <table class="w-full text-left border-collapse min-w-[600px]">
                            <thead>
                                <tr class="border-b border-zinc-100 bg-zinc-50/70">
                                    <th class="p-4 font-mono text-[10px] uppercase font-bold tracking-wider text-zinc-400">Capability</th>
                                    <th class="p-4 font-mono text-[10px] uppercase font-bold tracking-wider text-zinc-500 text-center">In-house</th>
                                    <th class="p-4 font-mono text-[10px] uppercase font-bold tracking-wider text-zinc-500 text-center">Agency</th>
                                    <th class="p-4 font-mono text-[10px] uppercase font-bold tracking-wider text-zinc-500 text-center">Freelance</th>
                                    <th class="p-4 font-mono text-[10px] uppercase font-bold tracking-wider text-brandOrange text-center bg-brandOrange/[0.02]">Nesvra</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-zinc-100 text-xs text-soft font-[400]">
                                <?php
                                $matrix = [
                                    ["Developers", "✓", "✓", "✓", "✓"],
                                    ["Designers", "—", "✓", "—", "✓"],
                                    ["QA", "—", "✓", "—", "✓"],
                                    ["DevOps", "—", "—", "—", "✓"],
                                    ["Support", "✓", "—", "—", "✓"],
                                    ["Infrastructure Mgmt", "—", "—", "—", "✓"],
                                    ["Platform Maintenance", "✓", "—", "—", "✓"],
                                    ["CTO Guidance", "—", "—", "—", "✓"],
                                    ["Subscription Pricing", "—", "—", "—", "✓"],
                                    ["Scalability", "—", "Limited", "Limited", "✓"]
                                ];
                                foreach ($matrix as $row):
                                ?>
                                    <tr class="hover:bg-zinc-50/50 transition-colors">
                                        <td class="p-4 font-sans font-medium text-dark"><?= $row[0] ?></td>
                                        <td class="p-4 text-center <?= $row[1] === '✓' ? 'text-zinc-950 font-bold' : 'text-zinc-300' ?>"><?= $row[1] ?></td>
                                        <td class="p-4 text-center <?= $row[2] === '✓' ? 'text-zinc-950 font-bold' : ($row[2] === 'Limited' ? 'text-zinc-600 font-medium' : 'text-zinc-300') ?>"><?= $row[2] ?></td>
                                        <td class="p-4 text-center <?= $row[3] === '✓' ? 'text-zinc-950 font-bold' : ($row[3] === 'Limited' ? 'text-zinc-600 font-medium' : 'text-zinc-300') ?>"><?= $row[3] ?></td>
                                        <td class="p-4 text-center text-brandOrange font-bold bg-brandOrange/[0.01] border-x border-brandOrange/5"><?= $row[4] ?></td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Footer Pitch & Interactive Action Triggers -->
                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6 pt-4">
                    <p class="font-sans text-base font-medium text-dark/80 italic max-w-xl">
                        "Think of it as your External CTO Office, billed as a predictable subscription."
                    </p>
                    <div class="flex flex-wrap gap-4 shrink-0">
                        <a href="solutions-tech-team-for-hire.php" 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.03] active:translate-y-[1px] shadow-[0_15px_30px_-5px_rgba(255,138,0,0.35)]">
                            <div class="absolute inset-0 rounded-full border-t border-white/20 pointer-events-none"></div>
                            <span class="font-sans font-[600] tracking-tight text-sm">Get Your Tech Department</span>
                            <i data-lucide="arrow-right" class="group-hover:translate-x-1 transition-transform w-4 h-4"></i>
                        </a>
                        <a href="book-strategy-call.php" class="inline-flex items-center justify-center px-8 py-4 border border-zinc-300 text-dark font-sans font-[600] text-sm rounded-full hover:bg-zinc-950 hover:text-white hover:border-zinc-950 transition-all duration-300">
                            Talk to Sales
                        </a>
                    </div>
                </div>

            </div>

        </div>
    </section>

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

            <!-- Ambient Background Glow -->
            <div class="absolute -top-1 -right-24 w-[300px] h-[200px] bg-white/50 rounded-full blur-[120px] pointer-events-none"></div>

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

            <div class="max-w-7xl mx-auto relative z-10">
                <div class="grid grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12 text-center md:text-left">

                    <?php
                    $stats = [
                        ["value" => "100+", "label" => "Projects delivered"],
                        ["value" => "30+", "label" => "Solutions shipped"],
                        ["value" => "10+", "label" => "Industries served"],
                        ["value" => "99.9%", "label" => "Platform availability"]
                    ];
                    foreach ($stats as $stat):
                    ?>
                        <div class="space-y-2 group text-center ">
                            <!-- Metric Display in Brand Orange -->
                            <div class="font-sans font-[400] text-4xl md:text-5xl text-white tracking-tight transform transition-transform duration-300 group-hover:scale-105">
                                <?= $stat['value'] ?>
                            </div>
                            <!-- Label Text in White -->
                            <div class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase">
                                <?= $stat['label'] ?>
                            </div>
                        </div>
                    <?php endforeach; ?>

                </div>
            </div>

        </section>
    </div>


    <div class="bg-white py-12">
        <section id="solutions-portfolio" class="bg-zinc-50 py-24 px-6 lg:px-14 rounded-[24px] overflow-hidden" data-aos="fade-up" data-aos-duration="1000" data-aos-once="true">
            <div class="max-w-7xl mx-auto">

                <!-- Section Header -->
                <div class="max-w-3xl mb-16" data-aos="fade-up" data-aos-delay="100">

                    <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase block mb-6" data-aos="fade-right" data-aos-duration="900" data-aos-delay="100">
                        Solutions
                    </span>
                    <h2 class="text-4xl md:text-[2.75rem] font-[400] tracking-tight leading-none text-dark mb-6">
                        Technology solutions for <br class="hidden md:inline" />businesses at every stage
                    </h2>
                    <p class="text-soft text-base leading-relaxed font-[400]">
                        Software, systems, teams, and infrastructure—whether you are launching something new or growing an organization that already exists. Pick what you need and add the rest as you go.
                    </p>
                </div>

                <!-- Solutions Grid Matrix -->
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <?php
                    $solutions = [
                        [
                            "tag" => "For Operators",
                            "tag_type" => "operator",
                            "icon" => "users",
                            "title" => "Tech Team for Hire",
                            "desc" => "A subscription-based technology department that replaces or complements your internal team.",
                            "points" => ["Dedicated developers & DevOps", "Designers, QA & project managers", "Ideal for teams without a CTO"],
                            "cta" => "Get your tech department",
                            "link" => "solutions-tech-team-for-hire.php"
                        ],
                        [
                            "tag" => "For Builders",
                            "tag_type" => "builder",
                            "icon" => "laptop",
                            "title" => "Custom Development",
                            "desc" => "Custom software development for web, mobile, and platforms, built to your specification.",
                            "points" => ["Product & platform engineering", "Web, mobile & APIs", "Ideal for founders & SMEs"],
                            "cta" => "Start a build",
                            "link" => "solutions-custom-software-development.php"
                        ],
                        [
                            "tag" => "For Builders",
                            "tag_type" => "builder",
                            "icon" => "rocket",
                            "title" => "Tech Business Setup",
                            "desc" => "Launch a fintech, SaaS, marketplace, or digital bank end to end with expert guidance.",
                            "points" => ["Fintech & SaaS launches", "Architecture & compliance ready", "Ideal for would-be entrepreneurs"],
                            "cta" => "Launch a business",
                            "link" => "solutions-launch-tech-business.php"
                        ],
                        [
                            "tag" => "For Builders",
                            "tag_type" => "builder",
                            "icon" => "landmark",
                            "title" => "Fintech Infrastructure",
                            "desc" => "Wallets, virtual cards, remittance, and core banking software to power financial products.",
                            "points" => ["Core banking & wallets", "Cards & remittance", "Ideal for banks & fintechs"],
                            "cta" => "Explore infrastructure",
                            "link" => "solutions-fintech-infrastructure.php"
                        ],
                        [
                            "tag" => "Builders & Operators",
                            "tag_type" => "hybrid",
                            "icon" => "cpu",
                            "title" => "Infrastructure Access",
                            "desc" => "A single integration that connects you to payments, SMS, email, KYC, AML, and compliance providers.",
                            "points" => ["One unified API", "Provider management built in", "Ideal for product teams"],
                            "cta" => "See providers",
                            "link" => "solutions-infrastructure-access.php"
                        ],
                        [
                            "tag" => "For Operators",
                            "tag_type" => "operator",
                            "icon" => "briefcase",
                            "title" => "Business Operating System",
                            "desc" => "ERP, CRM, and accounting unified into one operating system for the whole organization.",
                            "points" => ["ERP, CRM & accounting", "Enterprise operating system", "Ideal for organizations & enterprises"],
                            "cta" => "Run your business",
                            "link" => "solutions-business-operating-system.php"
                        ]
                    ];

                    $delay = 100;
                    foreach ($solutions as $item):
                        // Premium contextual tag styling classes
                        $tag_classes = " text-zinc-600";
                        if ($item['tag_type'] === 'builder') $tag_classes = " text-brandOrange ";
                        if ($item['tag_type'] === 'operator') $tag_classes = "text-blue-600 ";
                    ?>
                        <!-- Individual Solution Card Layout -->
                        <div class="bg-white rounded-2xl p-6 md:p-8 border border-zinc-200/60 shadow-sm flex flex-col justify-between group hover:border-brandOrange/30 hover:shadow-md transition-all duration-300" data-aos="fade-up" data-aos-delay="<?= $delay ?>">

                            <div class="space-y-6">
                                <!-- Context Badge Tag & Card Icon Container Row -->
                                <div class="flex items-center justify-between">
                                    <span class="inline-block font-mono text-[10px] font-bold tracking-wider uppercase px-2.5 py-1 <?= $tag_classes ?>">
                                        <?= $item['tag'] ?>
                                    </span>

                                    <!-- Decorative Header Icon -->
                                    <div class="w-8 h-8 rounded-lg bg-zinc-50 border border-zinc-100 flex items-center justify-center text-zinc-400 group-hover:bg-brandOrange/10 group-hover:border-brandOrange/20 group-hover:text-brandOrange transition-all duration-300 shrink-0">
                                        <i data-lucide="<?= $item['icon'] ?>" class="w-4 h-4 transition-transform duration-300 group-hover:scale-110"></i>
                                    </div>
                                </div>

                                <!-- Card Primary Typography Header Group -->
                                <div>
                                    <h3 class="text-xl text-dark font-medium tracking-tight mb-2 group-hover:text-zinc-950 transition-colors">
                                        <?= $item['title'] ?>
                                    </h3>
                                    <p class="text-soft text-sm leading-relaxed font-[400]">
                                        <?= $item['desc'] ?>
                                    </p>
                                </div>

                                <!-- Inline Structural Unordered Feature Points -->
                                <ul class="space-y-3 pt-2 border-t border-zinc-100">
                                    <?php foreach ($item['points'] as $point): ?>
                                        <li class="flex items-start gap-2.5 text-xs text-soft font-[400]">
                                            <i data-lucide="check" class="w-3.5 h-3.5 text-brandOrange shrink-0 mt-0.5"></i>
                                            <span><?= $point ?></span>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>

                            <!-- Card Action Interaction Indicator Line -->
                            <a href="<?= $item['link'] ?? '#' ?>" class="pt-8 mt-auto flex items-center justify-between group/btn cursor-pointer">
                                <span class="font-sans text-xs font-semibold tracking-tight text-dark group-hover:text-brandOrange transition-colors">
                                    <?= $item['cta'] ?>
                                </span>
                                <div class="w-7 h-7 rounded-full bg-zinc-50 border border-zinc-100 flex items-center justify-center text-dark group-hover:bg-brandOrange group-hover:text-white group-hover:border-brandOrange transition-all duration-300">
                                    <i data-lucide="arrow-right" class="w-3 h-3 transform transition-transform group-hover:translate-x-0.5"></i>
                                </div>
                            </a>

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

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


    <div class="bg-white p-1 md:p-2">
        <section id="fintech-infrastructure" class="relative bg-zinc-900 py-24 px-6 lg:px-14 rounded-[24px] overflow-hidden">

            <!-- Subtle background glowing accents for luxury dark depth -->
            <div class="absolute top-0 right-1/4 w-96 h-96 bg-brandOrange/5 rounded-full blur-[120px] pointer-events-none"></div>
            <div class="absolute bottom-0 left-1/4 w-96 h-96 bg-amber-500/5 rounded-full blur-[120px] pointer-events-none"></div>

            <div class="max-w-7xl mx-auto relative z-10">

                <!-- Section Header Grid -->
                <div class="grid lg:grid-cols-12 gap-8 items-end mb-16 border-b border-white/5 pb-12">
                    <div class="lg:col-span-7" data-aos="fade-up" data-aos-duration="1000">
                        <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase block mb-4">
                            Fintech Products
                        </span>
                        <h2 class="text-4xl md:text-[2.75rem] font-[400] tracking-tight leading-none text-white mb-2">
                            Fintech infrastructure, <br class="hidden md:inline" />ready to launch
                        </h2>
                    </div>
                    <div class="lg:col-span-5" data-aos="fade-up" data-aos-delay="150">
                        <p class="text-zinc-400 text-sm md:text-base font-[400] leading-relaxed border-l border-zinc-800 pl-6">
                            Issue cards, move money, hold balances and run a digital bank. Regulated services are delivered through licensed partners.
                        </p>
                    </div>
                </div>

                <!-- Features Overlay Grid Matrix -->
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <?php
                    $fintech_features = [
                        [
                            "icon" => "credit-card",
                            "title" => "Virtual Cards",
                            "desc" => "Issue branded virtual cards for customers, teams and spend management.",
                            "img" => "https://images.unsplash.com/photo-1613243555988-441166d4d6fd?q=80&w=600&auto=format&fit=crop"
                        ],
                        [
                            "icon" => "wallet",
                            "title" => "Digital Wallet",
                            "desc" => "Hold balances, send and receive funds, and manage multi-currency wallets.",
                            "img" => "https://images.unsplash.com/photo-1593672715438-d88a70629abe?q=80&w=600&auto=format&fit=crop"
                        ],
                        [
                            "icon" => "landmark",
                            "title" => "Core Banking",
                            "desc" => "Accounts, ledgers and transaction engines to build a digital bank.",
                            "img" => "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=600&auto=format&fit=crop"
                        ],
                        [
                            "icon" => "globe",
                            "title" => "Remittance",
                            "desc" => "Cross-border money movement and payout rails for remittance software.",
                            "img" => "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?q=80&w=600&auto=format&fit=crop"
                        ],
                        [
                            "icon" => "gift",
                            "title" => "Airtime & Giftcards",
                            "desc" => "Airtime top-ups and giftcard issuance to grow value-added services.",
                            "img" => "https://images.unsplash.com/photo-1513151233558-d860c5398176?q=80&w=600&auto=format&fit=crop"
                        ],
                        [
                            "icon" => "webhook",
                            "title" => "Payment APIs",
                            "desc" => "Payment gateway integration through one unified, developer-friendly API.",
                            "img" => "https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=600&auto=format&fit=crop"
                        ]
                    ];

                    $delay = 100;
                    foreach ($fintech_features as $feature):
                    ?>
                        <!-- Individual Image Card Overlay Layer -->
                        <div class="relative h-[280px] rounded-2xl overflow-hidden group border border-white/[0.06] shadow-2xl flex flex-col justify-end p-6 transition-all duration-500 hover:border-brandOrange/30 hover:scale-[1.01]" data-aos="fade-up" data-aos-delay="<?= $delay ?>">

                            <!-- Base Asset Background Image Layer -->
                            <img src="<?= $feature['img'] ?>" alt="<?= $feature['title'] ?>" class="absolute inset-0 w-full h-full object-cover transform transition-transform duration-[2.5s] scale-100 group-hover:scale-105" />

                            <!-- Master Pure-Dark Linear Gradient Mask Overlay -->
                            <div class="absolute inset-0 bg-gradient-to-t from-black via-black/90 to-black/30 transition-opacity duration-300"></div>

                            <!-- Core Textual Content Side Wrapper -->
                            <div class="relative z-10 space-y-3 backdrop-blur-[1px] bg-black/5 p-1 rounded-xl">
                                <!-- Premium Glassmorphic Lucide Icon Container -->
                                <div class="w-9 h-9 rounded-xl bg-white/[0.06] border border-white/10 backdrop-blur-md flex items-center justify-center text-zinc-300 shadow-inner group-hover:bg-brandOrange/10 group-hover:text-brandOrange group-hover:border-brandOrange/20 transition-colors duration-300">
                                    <i data-lucide="<?= $feature['icon'] ?>" class="w-4 h-4"></i>
                                </div>

                                <div>
                                    <h3 class="text-lg font-medium text-white tracking-tight group-hover:text-brandOrange transition-colors duration-300">
                                        <?= $feature['title'] ?>
                                    </h3>
                                    <p class="text-zinc-300 text-xs leading-relaxed font-[400] mt-1.5">
                                        <?= $feature['desc'] ?>
                                    </p>
                                </div>
                            </div>

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

                <!-- Global Action Footer Integration -->
                <div class="flex justify-center mt-12" data-aos="fade-up" data-aos-delay="400">
                    <button class="group relative inline-flex items-center gap-3 px-8 py-3.5 bg-white text-zinc-950 rounded-full font-sans font-semibold tracking-tight text-xs transition-all duration-300 hover:bg-brandOrange hover:text-white hover:shadow-[0_12px_24px_-4px_rgba(255,138,0,0.3)]">
                        <span>All fintech products</span>
                        <i data-lucide="arrow-right" class="w-3.5 h-3.5 transform transition-transform group-hover:translate-x-0.5"></i>
                    </button>
                </div>

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


    <section id="enterprise-systems" class="relative  py-24 px-6 lg:px-14 overflow-hidden">
        <div class="max-w-7xl mx-auto">

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

                <!-- Left Column: Text & Grid Content Architecture -->
                <div class="lg:col-span-7 space-y-12">

                    <!-- Section Header -->
                    <div class="space-y-4" data-aos="fade-up" data-aos-duration="1000">
                        <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase block">
                            Enterprise Systems
                        </span>
                        <h2 class="text-4xl md:text-[2.75rem] font-[400] tracking-tight leading-none text-dark">
                            Run the whole business on <br class="hidden sm:inline" />one operating system
                        </h2>
                        <p class="text-soft text-base font-[400] leading-relaxed max-w-xl pt-2">
                            ERP, CRM and accounting that talk to each other, so finance, sales and operations work from a single source of truth.
                        </p>
                    </div>

                    <!-- Inner Product Micro-Grid -->
                    <div class="grid sm:grid-cols-2 gap-6">
                        <?php
                        $enterprise_modules = [
                            [
                                "icon" => "layers",
                                "title" => "ERP",
                                "desc" => "Plan resources, inventory and operations seamlessly across setups."
                            ],
                            [
                                "icon" => "users",
                                "title" => "CRM",
                                "desc" => "Manage pipeline, customer lifecycles, and automated support desks."
                            ],
                            [
                                "icon" => "pie-chart",
                                "title" => "Accounting",
                                "desc" => "Ledgers, localized invoicing, and compliant automated reporting."
                            ],
                            [
                                "icon" => "cpu",
                                "title" => "Enterprise OS",
                                "desc" => "One unified business operating system running your whole workflow."
                            ]
                        ];

                        foreach ($enterprise_modules as $index => $module):
                        ?>
                            <div class="bg-zinc-50 p-6 rounded-2xl border border-zinc-200/60 shadow-sm group hover:border-brandOrange/20 transition-all duration-300" data-aos="fade-up" data-aos-delay="<?= $index * 50 ?>">
                                <div class="w-9 h-9 rounded-xl bg-zinc-50 border border-zinc-100 flex items-center justify-center text-zinc-400 group-hover:bg-brandOrange/10 group-hover:text-brandOrange group-hover:border-brandOrange/10 transition-colors mb-4">
                                    <i data-lucide="<?= $module['icon'] ?>" class="w-4 h-4"></i>
                                </div>
                                <h3 class="text-base font-medium text-dark mb-1.5 tracking-tight">
                                    <?= $module['title'] ?>
                                </h3>
                                <p class="text-xs text-soft leading-relaxed">
                                    <?= $module['desc'] ?>
                                </p>
                            </div>
                        <?php endforeach; ?>
                    </div>

                </div>

                <!-- Right Column: Editorial Visual Panel (Sticky Feature) -->
                <div class="lg:col-span-5 lg:sticky lg:top-8" data-aos="fade-left" data-aos-duration="1200">
                    <div class="relative aspect-[4/5] sm:aspect-[16/10] lg:aspect-[3/4] w-full rounded-[24px] overflow-hidden border border-zinc-200 shadow-[0_24px_50px_-12px_rgba(0,0,0,0.06)]">

                        <!-- Base High-End Asset Image Layer -->
                        <img src="https://images.unsplash.com/photo-1770947147650-fab067b8d33b?q=80&w=927&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?q=80&w=1200&auto=format&fit=crop" alt="Enterprise Systems Architecture" class="w-full h-full object-cover" />

                        <!-- Soft Dark Gradated Overlay Layer for Visual Depth -->
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent"></div>

                        <!-- Mini Ambient Floating Interface Badge -->
                        <div class="absolute bottom-6 left-6 right-6 backdrop-blur-md bg-white/80 p-4 rounded-xl border border-white/20 flex items-center justify-between shadow-lg">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 rounded-lg bg-dark flex items-center justify-center text-white">
                                    <i data-lucide="terminal" class="w-4 h-4"></i>
                                </div>
                                <div>
                                    <p class="text-[11px] font-mono font-bold text-dark uppercase tracking-wider">System Backbone</p>
                                    <p class="text-xs text-soft">Single Source of Truth Active</p>
                                </div>
                            </div>
                            <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                        </div>

                    </div>
                </div>

            </div>

        </div>
    </section>


    <div class=" px-1 md:px-2 py-24">
        <section id="infrastructure-access" class="relative bg-zinc-900 py-24 px-6 lg:px-14 rounded-[24px] overflow-hidden">

            <!-- Deep radial color glows behind the terminal for a colorful developer aesthetic -->
            <div class="absolute -bottom-10 right-10 w-[500px] h-[500px] bg-gradient-to-tr from-brandOrange/10 via-purple-600/10 to-cyan-500/5 rounded-full blur-[120px] pointer-events-none"></div>
            <div class="absolute top-12 left-1/4 w-80 h-80 bg-blue-600/5 rounded-full blur-[100px] pointer-events-none"></div>

            <div class="max-w-7xl mx-auto relative z-10">
                <div class="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">

                    <!-- Left Panel: Infrastructure Features Copy -->
                    <div class="lg:col-span-6 space-y-8" data-aos="fade-up" data-aos-duration="1000">
                        <div class="space-y-4">
                            <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase block">
                                // Unified SDK Layer
                            </span>
                            <h2 class="text-4xl md:text-[2.75rem] font-[400] tracking-tight leading-none text-white">
                                One integration. <br class="hidden sm:inline" /><span class="bg-gradient-to-r from-white via-zinc-200 to-zinc-500 bg-clip-text text-transparent">Every provider you need.</span>
                            </h2>
                            <p class="text-zinc-400 text-sm md:text-base font-[400] leading-relaxed pt-2">
                                Integrate once and access providers instantly. Nesvra handles provider management behind a single unified API, so your team ships instead of negotiating integrations.
                            </p>
                        </div>

                        <!-- Dynamic Service Matrix Pill Tags -->
                        <div class="flex flex-wrap gap-2.5 pt-2">
                            <?php
                            $providers = [
                                ["label" => "Payment gateways", "icon" => "credit-card"],
                                ["label" => "SMS", "icon" => "message-square"],
                                ["label" => "Email", "icon" => "mail"],
                                ["label" => "KYC", "icon" => "shield-check"],
                                ["label" => "AML", "icon" => "search-code"],
                                ["label" => "Identity Verification", "icon" => "fingerprint"],
                                ["label" => "Compliance", "icon" => "file-check"]
                            ];
                            foreach ($providers as $prov):
                            ?>
                                <div class="inline-flex items-center gap-2 px-4 py-2 bg-white/[0.03] border border-white/[0.06] rounded-xl text-zinc-300 font-sans text-xs font-medium hover:border-brandOrange/30 hover:bg-white/[0.05] hover:text-white transition-all duration-300 cursor-default">
                                    <i data-lucide="<?= $prov['icon'] ?>" class="w-3.5 h-3.5 text-zinc-500"></i>
                                    <span><?= $prov['label'] ?></span>
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <!-- CTA Action Integration -->
                        <div class="pt-4">
                            <a href="solutions-infrastructure-access.php" class="inline-flex items-center gap-2 text-xs font-semibold tracking-tight text-brandOrange hover:text-white group transition-colors duration-300">
                                <span>Explore Infrastructure Access</span>
                                <i data-lucide="arrow-right" class="w-4 h-4 transform transition-transform group-hover:translate-x-1"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Right Panel: Elite IDE / Code Terminal Mockup -->
                    <div class="lg:col-span-6" data-aos="fade-left" data-aos-duration="1200">
                        <div class="w-full bg-zinc-950/80 backdrop-blur-xl border border-white/[0.08] rounded-2xl shadow-[0_32px_64px_-16px_rgba(0,0,0,0.6)] overflow-hidden">

                            <!-- Terminal Title Bar -->
                            <div class="bg-zinc-900/60 border-b border-white/[0.06] px-5 py-3.5 flex items-center justify-between">
                                <div class="flex gap-2">
                                    <span class="w-3 h-3 rounded-full bg-rose-500/60 inline-block"></span>
                                    <span class="w-3 h-3 rounded-full bg-amber-500/60 inline-block"></span>
                                    <span class="w-3 h-3 rounded-full bg-emerald-500/60 inline-block"></span>
                                </div>
                                <div class="flex items-center gap-1.5 bg-white/[0.04] px-3 py-1 rounded-md border border-white/[0.05]">
                                    <i data-lucide="terminal" class="w-3 h-3 text-zinc-500"></i>
                                    <span class="text-[11px] font-mono tracking-tight text-zinc-400">nesvra-sdk</span>
                                </div>
                                <div class="w-12"></div> <!-- Visual Spacer Balance -->
                            </div>

                            <!-- IDE Code Body Area -->
                            <div class="p-6 md:p-8 overflow-x-auto font-mono text-xs md:text-[13px] leading-relaxed tracking-normal text-zinc-300 select-all">
                                <div class="table border-spacing-0 w-full">
                                    <!-- Line 1 -->
                                    <div class="table-row">
                                        <span class="table-cell pr-6 text-zinc-600 text-right select-none w-5">1</span>
                                        <span class="table-cell"><span class="text-purple-400">import</span> { <span class="text-cyan-400">Nesvra</span> } <span class="text-purple-400">from</span> <span class="text-emerald-400">'@nesvra/sdk'</span></span>
                                    </div>
                                    <!-- Line 2 -->
                                    <div class="table-row">
                                        <span class="table-cell pr-6 text-zinc-600 text-right select-none">2</span>
                                        <span class="table-cell"></span>
                                    </div>
                                    <!-- Line 3 -->
                                    <div class="table-row">
                                        <span class="table-cell pr-6 text-zinc-600 text-right select-none">3</span>
                                        <span class="table-cell"><span class="text-purple-400">const</span> <span class="text-zinc-200">nesvra</span> = <span class="text-purple-400">new</span> <span class="text-cyan-400">Nesvra</span>(<span class="text-brandOrange">apiKey</span>)</span>
                                    </div>
                                    <!-- Line 4 -->
                                    <div class="table-row">
                                        <span class="table-cell pr-6 text-zinc-600 text-right select-none">4</span>
                                        <span class="table-cell"></span>
                                    </div>
                                    <!-- Line 5 -->
                                    <div class="table-row">
                                        <span class="table-cell pr-6 text-zinc-600 text-right select-none">5</span>
                                        <span class="table-cell"><span class="text-zinc-500">// one call, any provider</span></span>
                                    </div>
                                    <!-- Line 6 -->
                                    <div class="table-row">
                                        <span class="table-cell pr-6 text-zinc-600 text-right select-none">6</span>
                                        <span class="table-cell"><span class="text-purple-400">await</span> <span class="text-zinc-200">nesvra</span>.<span class="text-amber-300">kyc</span>.<span class="text-blue-400">verify</span>(<span class="text-zinc-400">user</span>)</span>
                                    </div>
                                    <!-- Line 7 -->
                                    <div class="table-row">
                                        <span class="table-cell pr-6 text-zinc-600 text-right select-none">7</span>
                                        <span class="table-cell"><span class="text-purple-400">await</span> <span class="text-zinc-200">nesvra</span>.<span class="text-amber-300">payments</span>.<span class="text-blue-400">charge</span>(<span class="text-zinc-400">order</span>)</span>
                                    </div>
                                    <!-- Line 8 -->
                                    <div class="table-row">
                                        <span class="table-cell pr-6 text-zinc-600 text-right select-none">8</span>
                                        <span class="table-cell"><span class="text-purple-400">await</span> <span class="text-zinc-200">nesvra</span>.<span class="text-amber-300">messaging</span>.<span class="text-blue-400">sms</span>(<span class="text-zinc-400">otp</span>)</span>
                                    </div>
                                </div>
                            </div>

                            <!-- IDE Status Footer Layer -->
                            <div class="bg-zinc-900/40 border-t border-white/[0.05] px-5 py-2 flex items-center justify-between text-[11px] text-zinc-500 font-mono">
                                <div class="flex items-center gap-3">
                                    <span class="flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-brandOrange inline-block"></span> UTF-8</span>
                                    <span>JavaScript / TypeScript</span>
                                </div>
                                <span class="text-zinc-600">Ln 8, Col 32</span>
                            </div>

                        </div>
                    </div>

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


    <div class="bg-white p-1 md:p-2">
        <section id="merchant-ecosystem" class="relative bg-white py-24 px-6 lg:px-14 rounded-[24px] border border-zinc-100 overflow-hidden">

            <!-- Clean, ultra-faint architectural background grid for design depth -->
            <div class="absolute inset-0 bg-[linear-gradient(to_right,#00000002_1px,transparent_1px),linear-gradient(to_bottom,#00000002_1px,transparent_1px)] bg-[size:32px_32px] pointer-events-none"></div>

            <div class="max-w-7xl mx-auto relative z-10">
                <div class="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">

                    <!-- Left Column: Context, Features Matrix & Call to Actions -->
                    <div class="lg:col-span-6 space-y-10" data-aos="fade-up" data-aos-duration="1000">

                        <!-- Section Header Content Block -->
                        <div class="space-y-4">
                            <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase block">
                                Unified Hub Environment
                            </span>
                            <h2 class="text-4xl md:text-[2.75rem] font-[400] tracking-tight leading-none text-zinc-900">
                                Merchant ecosystem. <br />Everything managed from <span class="text-electric italic font-serif ">one dashboard.</span>
                            </h2>
                            <p class="text-zinc-500 text-sm md:text-base font-[400] leading-relaxed pt-2">
                                Every customer is a merchant with a dedicated dashboard. Purchase software, manage subscriptions, connect providers and run your account in one place, without juggling vendors or contracts.
                            </p>
                        </div>

                        <!-- Clean Dual-Column Feature List Matrix -->
                        <div class="grid sm:grid-cols-2 gap-y-3.5 gap-x-6 border-y border-zinc-100 py-6">
                            <?php
                            $merchant_capabilities = [
                                "Buy software",
                                "Manage subscriptions",
                                "Access APIs",
                                "Manage provider integrations",
                                "Billing & invoices",
                                "Documentation",
                                "Support tickets",
                                "Manage teams & API credentials"
                            ];
                            foreach ($merchant_capabilities as $capability):
                            ?>
                                <div class="flex items-center gap-3 group">
                                    <div class="w-5 h-5 rounded-md bg-zinc-50 border border-zinc-200/80 flex items-center justify-center text-electric group-hover:text-brandOrange group-hover:border-brandOrange/20 group-hover:bg-brandOrange/5 transition-colors">
                                        <i data-lucide="check" class="w-3 h-3"></i>
                                    </div>
                                    <span class="text-xs font-medium text-zinc-600 group-hover:text-zinc-900 transition-colors">
                                        <?= $capability ?>
                                    </span>
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <!-- Primary and Secondary Actions Layer -->
                        <div class="flex flex-wrap items-center gap-4">
                            <button class="group inline-flex items-center gap-2 px-6 py-4 bg-royal text-white rounded-xl font-sans font-medium tracking-tight text-xs transition-all duration-300 hover:bg-brandOrange hover:shadow-[0_12px_24px_-4px_rgba(255,138,0,0.25)]">
                                <span>Create Merchant Account</span>
                                <i data-lucide="plus" class="w-3.5 h-3.5 transform transition-transform group-hover:rotate-90"></i>
                            </button>

                            <button class="inline-flex items-center gap-2 px-6 py-4 bg-zinc-100 hover:bg-zinc-200/80 text-zinc-800 rounded-xl font-sans font-medium tracking-tight text-xs transition-colors duration-300">
                                <i data-lucide="log-in" class="w-3.5 h-3.5 text-zinc-500"></i>
                                <span>Merchant Login</span>
                            </button>
                        </div>

                    </div>

                    <div class="lg:col-span-6" data-aos="fade-left" data-aos-duration="1200">
                        <div class="relative bg-zinc-50 border border-zinc-200/60 rounded-[24px] p-4 sm:p-5 shadow-[0_24px_48px_-12px_rgba(0,0,0,0.04)] group">

                            <!-- Premium Browser UI Frame Header Decorator -->
                            <div class="flex items-center justify-between mb-4 pb-4 border-b border-zinc-200/60">
                                <div class="flex gap-1.5">
                                    <span class="w-2 h-2 rounded-full bg-zinc-300 group-hover:bg-rose-400 transition-colors duration-300"></span>
                                    <span class="w-2 h-2 rounded-full bg-zinc-300 group-hover:bg-amber-400 transition-colors duration-300"></span>
                                    <span class="w-2 h-2 rounded-full bg-zinc-300 group-hover:bg-emerald-400 transition-colors duration-300"></span>
                                </div>
                                <div class="bg-zinc-200/50 px-4 py-1 rounded-md text-[10px] font-mono text-zinc-400 tracking-tight w-48 text-center truncate select-none">
                                    merchant.nesvra.com/dashboard
                                </div>
                                <div class="w-8"></div>
                            </div>

                            <!-- Core App / Image Viewport Container -->
                            <div class="relative aspect-[16/11] w-full rounded-xl overflow-hidden bg-white border border-zinc-200/80 shadow-inner">

                                <!-- Real Dashboard Image Layer -->
                                <img src="Asset/AgentDashboard.png" alt="Dashboard Screenshot" class="w-full h-full object-cover object-top" />

                                <!-- Optional: Faint Architectural Grid Overlay on top of the image for that premium tech aesthetic -->
                                <div class="absolute inset-0 bg-[radial-gradient(#e4e4e7_1px,transparent_1px)] [background-size:16px_16px] opacity-20 pointer-events-none"></div>

                            </div>

                        </div>
                    </div>

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

<!-- how it works section -->

    <?php
$steps = [
    [
        'num'   => '01',
        'title' => 'Book consultation',
        'desc'  => 'Tell us where you are and where you want to go in a streamlined architectural roadmap scoping session.',
        'badge' => 'Discovery'
    ],
    [
        'num'   => '02',
        'title' => 'Choose solution',
        'desc'  => 'Select your operational matrix: elite engineering talent pods, business setups, scalable infrastructure, or all three.',
        'badge' => 'Selection'
    ],
    [
        'num'   => '03',
        'title' => 'Build team or platform',
        'desc'  => 'We seamlessly assemble your cross-functional specialists and stand up your dedicated, high-performance operational core.',
        'badge' => 'Assembly'
    ],
    [
        'num'   => '04',
        'title' => 'Launch',
        'desc'  => 'Go live with production-ready technology assets and infrastructure engineered for absolute structural integrity.',
        'badge' => 'Deployment'
    ],
    [
        'num'   => '05',
        'title' => 'Scale',
        'desc'  => 'Grow smoothly with a dedicated technology partner continuously optimization and managing your background operations.',
        'badge' => 'Elasticity'
    ]
];
?>

<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 Nesvra works
            </span>
            <h2 data-aos="fade-right" data-aos-delay="100" class="text-3xl md:text-5xl font-[400] tracking-[-0.04em] leading-[1.1] text-zinc-900 mb-6">
                From idea to scale in <br><span class="italic font-serif text-royal">five streamlined 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">
                We engineer the complex layout behind the scenes so your business can move fast. Define your parameters and unlock high-velocity operational momentum.
            </p>
        </div>

        <!-- Sequential Step Matrix -->
        <div class="relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-x-6 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-2">
                        <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 += 80;
            endforeach;
            ?>
        </div>

    </div>
</section>



    <!-- Industries Section -->
    <section class="py-24 px-[5%] bg-white" id="the-nesvra-advantage">
        <div class="max-w-[1200px] mx-auto text-center">

            <div class="mb-10" data-aos="fade-up">
                <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase">
                    Industries
                </span>
            </div>

            <div class="max-w-4xl mx-auto mb-10" data-aos="fade-up">
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tight text-dark leading-tight">
                    Built for the industries that <br>
                    move <span class="italic font-serif text-royal">economies</span>
                </h2>
                <p class="text-soft text-lg mt-4 max-w-2xl mx-auto leading-relaxed">
                    Launch a fintech startup, modernize hospital operations, digitize manufacturing, deploy CRM for telecom, run logistics systems or manage government workflows. Nesvra builds for new ventures and established organizations alike.
                </p>
            </div>

            <div class="w-full h-[1px] bg-zinc-100 mb-6"></div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start mb-24">

                <!-- Card 1: Banking -->
                <div class="px-8 py-6 text-left md:border-r border-zinc-100 last:border-0 group">
                    <div class="mb-6 opacity-40 group-hover:opacity-100 transition-opacity">
                        <i class="ri-bank-line text-3xl"></i>
                    </div>
                    <h4 class="text-2xl font-medium text-dark mb-2 tracking-tighter">Banking</h4>
                    <p class="text-zinc-500 text-sm leading-relaxed italic font-serif">Core systems & digital banking.</p>
                </div>

                <!-- Card 2: Financial Services -->
                <div class="px-8 py-6 text-left md:border-r border-zinc-100 last:border-0 group">
                    <div class="mb-6 opacity-40 group-hover:opacity-100 transition-opacity">
                        <i class="ri-line-chart-line text-3xl"></i>
                    </div>
                    <h4 class="text-2xl font-medium text-dark mb-2 tracking-tighter">Financial Services</h4>
                    <p class="text-zinc-500 text-sm leading-relaxed italic font-serif">Payments, lending & wallets.</p>
                </div>

                <!-- Card 3: Telecommunications -->
                <div class="px-8 py-6 text-left group">
                    <div class="mb-6 opacity-40 group-hover:opacity-100 transition-opacity">
                        <i class="ri-signal-tower-line text-3xl"></i>
                    </div>
                    <h4 class="text-2xl font-medium text-dark mb-2 tracking-tighter">Telecommunications</h4>
                    <p class="text-zinc-500 text-sm leading-relaxed italic font-serif">Value-added & billing systems.</p>
                </div>

                <!-- Card 4: Ecommerce -->
                <div class="px-8 py-6 text-left md:border-r border-zinc-100 last:border-0 group">
                    <div class="mb-6 opacity-40 group-hover:opacity-100 transition-opacity">
                        <i class="ri-shopping-cart-2-line text-3xl"></i>
                    </div>
                    <h4 class="text-2xl font-medium text-dark mb-2 tracking-tighter">Ecommerce</h4>
                    <p class="text-zinc-500 text-sm leading-relaxed italic font-serif">Marketplaces & checkout.</p>
                </div>

                <!-- Card 5: Healthcare -->
                <div class="px-8 py-6 text-left md:border-r border-zinc-100 last:border-0 group">
                    <div class="mb-6 opacity-40 group-hover:opacity-100 transition-opacity">
                        <i class="ri-pulse-line text-3xl"></i>
                    </div>
                    <h4 class="text-2xl font-medium text-dark mb-2 tracking-tighter">Healthcare</h4>
                    <p class="text-zinc-500 text-sm leading-relaxed italic font-serif">Records & patient platforms.</p>
                </div>

                <!-- Card 6: Education -->
                <div class="px-8 py-6 text-left group">
                    <div class="mb-6 opacity-40 group-hover:opacity-100 transition-opacity">
                        <i class="ri-graduation-cap-line text-3xl"></i>
                    </div>
                    <h4 class="text-2xl font-medium text-dark mb-2 tracking-tighter">Education</h4>
                    <p class="text-zinc-500 text-sm leading-relaxed italic font-serif">Learning & campus systems.</p>
                </div>

                <!-- Card 7: Manufacturing -->
                <div class="px-8 py-6 text-left md:border-r border-zinc-100 last:border-0 group">
                    <div class="mb-6 opacity-40 group-hover:opacity-100 transition-opacity">
                        <i class="ri-instance-line text-3xl"></i>
                    </div>
                    <h4 class="text-2xl font-medium text-dark mb-2 tracking-tighter">Manufacturing</h4>
                    <p class="text-zinc-500 text-sm leading-relaxed italic font-serif">ERP & supply operations.</p>
                </div>

                <!-- Card 8: Logistics -->
                <div class="px-8 py-6 text-left md:border-r border-zinc-100 last:border-0 group">
                    <div class="mb-6 opacity-40 group-hover:opacity-100 transition-opacity">
                        <i class="ri-truck-line text-3xl"></i>
                    </div>
                    <h4 class="text-2xl font-medium text-dark mb-2 tracking-tighter">Logistics</h4>
                    <p class="text-zinc-500 text-sm leading-relaxed italic font-serif">Fleet, tracking & delivery.</p>
                </div>

                <!-- Card 9: Government -->
                <div class="px-8 py-6 text-left group">
                    <div class="mb-6 opacity-40 group-hover:opacity-100 transition-opacity">
                        <i class="ri-government-line text-3xl"></i>
                    </div>
                    <h4 class="text-2xl font-medium text-dark mb-2 tracking-tighter">Government</h4>
                    <p class="text-zinc-500 text-sm leading-relaxed italic font-serif">Citizen & agency platforms.</p>
                </div>

            </div>

        </div>
    </section>

    <!-- Case Studies Section -->
    <section class="py-12 px-[5%] bg-white" id="nesvra-case-studies">
        <div class="max-w-[1200px] mx-auto">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-8 items-start">

                <!-- Left Sticky Sidebar Column -->
                <div class="lg:col-span-4 lg:sticky lg:top-32 text-left" data-aos="fade-up">
                    <div class="mb-8">
                        <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase">
                            {09} Case Studies
                        </span>
                    </div>

                    <h2 class="text-4xl md:text-5xl font-[400] tracking-tight text-dark leading-tight mb-6">
                        Outcomes our <br>
                        partners <span class="italic font-serif text-royal">care about</span>
                    </h2>

                    <p class="text-zinc-500 text-base leading-relaxed mb-8 max-w-sm">
                        We don't measure success in software deployments or completed tasks. We measure it by production timelines slashed and core ecosystem growth accelerated.
                    </p>

                    <!-- Premium Text Action Trigger with Micro-interaction Line -->
                    <a href="#case-studies" class="inline-flex items-center gap-2 group text-sm font-medium text-electric tracking-tight hover:text-brandOrange transition-colors duration-300">
                        <span>View all case studies</span>
                        <div class="relative w-5 h-5 overflow-hidden flex items-center justify-center bg-zinc-50 border border-zinc-100 rounded-full group-hover:border-brandOrange/20 group-hover:bg-brandOrange/5 transition-all duration-300 transform group-hover:translate-x-1">
                            <i class="ri-arrow-right-line text-xs absolute transition-transform duration-300 transform -translate-x-4 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 text-brandOrange"></i>
                            <i class="ri-arrow-right-line text-xs absolute transition-transform duration-300 transform translate-x-0 opacity-100 group-hover:translate-x-4 group-hover:opacity-0 text-zinc-400"></i>
                        </div>
                    </a>
                </div>

                <!-- Right Async Metric Cards Stream -->
                <div class="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-6 w-full">

                    <!-- Card 1: Fintech Launch -->
                    <div class="p-8 border border-zinc-100 bg-white hover:border-zinc-300 transition-all duration-300 flex flex-col justify-between min-h-[220px] group" data-aos="fade-up">
                        <div class="flex items-start justify-between">
                            <span class="text-[11px] font-mono tracking-widest text-zinc-400 uppercase group-hover:text-brandOrange transition-colors">
                                Fintech Launch
                            </span>
                            <div class="w-1.5 h-1.5 rounded-full bg-zinc-200 group-hover:bg-brandOrange transition-colors"></div>
                        </div>
                        <div class="my-6">
                            <div class="text-5xl font-[400] tracking-tight text-dark font-mono group-hover:scale-[1.02] origin-left transition-transform duration-300">
                                11 weeks
                            </div>
                        </div>
                        <p class="text-zinc-500 text-sm italic font-serif leading-relaxed">
                            From kickoff to fully live wallet systems & processing cards.
                        </p>
                    </div>

                    <!-- Card 2: ERP Deployment (Staggered offset style via MT on desktop) -->
                    <div class="p-8 border border-zinc-100 bg-white hover:border-zinc-300 transition-all duration-300 flex flex-col justify-between min-h-[220px] md:mt-6 group" data-aos="fade-up" data-aos-delay="100">
                        <div class="flex items-start justify-between">
                            <span class="text-[11px] font-mono tracking-widest text-zinc-400 uppercase group-hover:text-royal transition-colors">
                                ERP Deployment
                            </span>
                            <div class="w-1.5 h-1.5 rounded-full bg-zinc-200 group-hover:bg-royal transition-colors"></div>
                        </div>
                        <div class="my-6">
                            <div class="text-5xl font-[400] tracking-tight text-dark font-mono group-hover:scale-[1.02] origin-left transition-transform duration-300">
                                -37%
                            </div>
                        </div>
                        <p class="text-zinc-500 text-sm italic font-serif leading-relaxed">
                            Measurable reduction in standard organizational operating costs.
                        </p>
                    </div>

                    <!-- Card 3: Digital Transformation -->
                    <div class="p-8 border border-zinc-100 bg-white hover:border-zinc-300 transition-all duration-300 flex flex-col justify-between min-h-[220px] group" data-aos="fade-up" data-aos-delay="200">
                        <div class="flex items-start justify-between">
                            <span class="text-[11px] font-mono tracking-widest text-zinc-400 uppercase group-hover:text-[#3353E0] transition-colors">
                                Digital Transformation
                            </span>
                            <div class="w-1.5 h-1.5 rounded-full bg-zinc-200 group-hover:bg-[#3353E0] transition-colors"></div>
                        </div>
                        <div class="my-6">
                            <div class="text-5xl font-[400] tracking-tight text-dark font-mono group-hover:scale-[1.02] origin-left transition-transform duration-300">
                                3.4x
                            </div>
                        </div>
                        <p class="text-zinc-500 text-sm italic font-serif leading-relaxed">
                            Compounded growth metric in verified monthly transaction streams.
                        </p>
                    </div>

                    <!-- Card 4: Startup Launch -->
                    <div class="p-8 border border-zinc-100 bg-white hover:border-zinc-300 transition-all duration-300 flex flex-col justify-between min-h-[220px] md:mt-6 group" data-aos="fade-up" data-aos-delay="300">
                        <div class="flex items-start justify-between">
                            <span class="text-[11px] font-mono tracking-widest text-zinc-400 uppercase group-hover:text-[#9CF25C] transition-colors">
                                Startup Launch
                            </span>
                            <div class="w-1.5 h-1.5 rounded-full bg-zinc-200 group-hover:bg-[#9CF25C] transition-colors"></div>
                        </div>
                        <div class="my-6">
                            <div class="text-5xl font-[400] tracking-tight text-dark font-mono group-hover:scale-[1.02] origin-left transition-transform duration-300">
                                50K+
                            </div>
                        </div>
                        <p class="text-zinc-500 text-sm italic font-serif leading-relaxed">
                            Active, transactional users successfully onboarded within year one.
                        </p>
                    </div>

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

    <!-- Nesvra Comparison -->
    <section class="py-24 px-[5%] bg-zinc-50" id="nesvra-comparison">
        <div class="max-w-[1200px] mx-auto">

            <!-- Section Header -->
            <div class="max-w-3xl text-left mb-10" data-aos="fade-up">
                <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase block mb-3">
                    {10} Architectural Comparison
                </span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tight text-dark leading-tight mb-6">
                    Why teams choose Nesvra <br>over the <span class="italic font-serif text-royal">alternatives</span>
                </h2>
                <p class="text-zinc-500 text-base max-w-xl leading-relaxed">
                    See how a single production-ready technology partner compares to hiring internally, relying on legacy agencies, or stitching together fragmented vendors.
                </p>
            </div>

            <!-- Premium Table Frame Container -->
            <div class="w-full overflow-x-auto border border-zinc-200/60 rounded-2xl bg-white shadow-[0_8px_30px_rgb(0,0,0,0.012)] scrollbar-thin">
                <table class="w-full min-w-[800px] text-left border-collapse">
                    <thead>
                        <tr class="border-b border-zinc-100 text-xs font-mono font-bold tracking-widest text-zinc-400 uppercase bg-zinc-50/50">
                            <th class="py-5 px-6 font-medium w-[24%]">Capability</th>
                            <th class="py-5 px-6 font-medium w-[19%]">Hiring internally</th>
                            <th class="py-5 px-6 font-medium w-[19%]">Agencies</th>
                            <th class="py-5 px-6 font-medium w-[19%]">Multiple vendors</th>
                            <th class="py-5 px-6 font-medium w-[19%] bg-royal text-white border-l border-royal/10">Nesvra</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-zinc-100 text-[13px] md:text-sm font-[400]">

                        <!-- Row 1 -->
                        <tr class="group hover:bg-zinc-50/40 transition-colors">
                            <td class="py-5 px-6 text-dark font-medium tracking-tight">Time to launch</td>
                            <td class="py-5 px-6 text-zinc-500/90">Months</td>
                            <td class="py-5 px-6 text-zinc-500/90">Weeks–months</td>
                            <td class="py-5 px-6 text-zinc-500/90">Slow, coordinated</td>
                            <td class="py-5 px-6 font-semibold text-brandOrange bg-royal border-l border-royal/10">Fastest</td>
                        </tr>

                        <!-- Row 2 -->
                        <tr class="group hover:bg-zinc-50/40 transition-colors">
                            <td class="py-5 px-6 text-dark font-medium tracking-tight">Dedicated team</td>
                            <td class="py-5 px-6 text-zinc-500/90">You manage</td>
                            <td class="py-5 px-6 text-zinc-500/90">Shared</td>
                            <td class="py-5 px-6 text-zinc-500/90">Fragmented</td>
                            <td class="py-5 px-6 font-medium text-white bg-royal border-l border-royal/10">
                                <div class="flex items-center gap-2">
                                    <span class="w-1.5 h-1.5 rounded-full bg-brandOrange shrink-0"></span>
                                    <span>Yes, managed</span>
                                </div>
                            </td>
                        </tr>

                        <!-- Row 3 -->
                        <tr class="group hover:bg-zinc-50/40 transition-colors">
                            <td class="py-5 px-6 text-dark font-medium tracking-tight">Infrastructure access</td>
                            <td class="py-5 px-6 text-zinc-500/90">Build yourself</td>
                            <td class="py-5 px-6 text-zinc-500/90">Limited</td>
                            <td class="py-5 px-6 text-zinc-500/90">Many contracts</td>
                            <td class="py-5 px-6 font-medium text-white/90 bg-royal border-l border-royal/10">One integration</td>
                        </tr>

                        <!-- Row 4 -->
                        <tr class="group hover:bg-zinc-50/40 transition-colors">
                            <td class="py-5 px-6 text-dark font-medium tracking-tight">Cost predictability</td>
                            <td class="py-5 px-6 text-zinc-500/90">High fixed cost</td>
                            <td class="py-5 px-6 text-zinc-500/90">Variable</td>
                            <td class="py-5 px-6 text-zinc-500/90">Hard to forecast</td>
                            <td class="py-5 px-6 font-medium text-white/90 bg-royal border-l border-royal/10">Subscription</td>
                        </tr>

                        <!-- Row 5 -->
                        <tr class="group hover:bg-zinc-50/40 transition-colors">
                            <td class="py-5 px-6 text-dark font-medium tracking-tight">You own the code</td>
                            <td class="py-5 px-6 text-zinc-500/90">Yes</td>
                            <td class="py-5 px-6 text-zinc-500/90">Sometimes</td>
                            <td class="py-5 px-6 text-zinc-500/90">Varies</td>
                            <td class="py-5 px-6 font-medium text-white/90 bg-royal border-l border-royal/10">Always</td>
                        </tr>

                        <!-- Row 6 -->
                        <tr class="group hover:bg-zinc-50/40 transition-colors">
                            <td class="py-5 px-6 text-dark font-medium tracking-tight">Single point of contact</td>
                            <td class="py-5 px-6 text-zinc-500/90">Internal only</td>
                            <td class="py-5 px-6 text-zinc-500/90">Account manager</td>
                            <td class="py-5 px-6 text-zinc-500/90">None</td>
                            <td class="py-5 px-6 font-medium text-white/90 bg-royal border-l border-royal/10">One partner</td>
                        </tr>

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

            <!-- Bottom Quick-Anchor Context Links -->
            <div class="mt-8 flex flex-wrap justify-start items-center gap-x-8 gap-y-3 pt-4 border-t border-zinc-200/60">
                <span class="text-xs font-mono tracking-wider text-zinc-400 uppercase">Deep Dives:</span>
                <a href="#in-house" class="text-xs font-medium text-zinc-500 hover:text-brandOrange transition-colors flex items-center gap-1.5 group">
                    In-house vs Nesvra <i class="ri-arrow-right-up-line opacity-60 group-hover:opacity-100 transition-opacity"></i>
                </a>
                <a href="#agencies" class="text-xs font-medium text-zinc-500 hover:text-brandOrange transition-colors flex items-center gap-1.5 group">
                    Agencies vs Nesvra <i class="ri-arrow-right-up-line opacity-60 group-hover:opacity-100 transition-opacity"></i>
                </a>
                <a href="#vendors" class="text-xs font-medium text-zinc-500 hover:text-brandOrange transition-colors flex items-center gap-1.5 group">
                    Multiple vendors vs Nesvra <i class="ri-arrow-right-up-line opacity-60 group-hover:opacity-100 transition-opacity"></i>
                </a>
            </div>

        </div>
    </section>

    <!-- Why choose Nesvra -->
    <section class="py-24 px-[5%] bg-white" id="why-nesvra">
        <div class="max-w-[1200px] mx-auto">

            <!-- Section Header -->
            <div class="max-w-3xl text-left mb-16" data-aos="fade-up">
                <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase block mb-3">
                    Core Value Proposition
                </span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tight text-dark leading-tight mb-6">
                    Why teams choose Nesvra
                </h2>
                <p class="text-zinc-500 text-base max-w-xl leading-relaxed">
                    One partner for your team, software, and core digital infrastructure. Built for modern operators.
                </p>
            </div>

            <!-- Static Fallback / Structural HTML Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

                <!-- Card 1 -->
                <div class="group border border-zinc-100 rounded-2xl p-8 bg-zinc-50/30 hover:bg-white hover:border-zinc-200/80 hover:shadow-[0_20px_50px_-20px_rgba(0,0,0,0.04)] transition-all duration-300 flex flex-col justify-between min-h-[220px]">
                    <div>
                        <div class="w-10 h-10 rounded-xl bg-royal/5 flex items-center justify-center text-royal mb-6 group-hover:bg-royal group-hover:text-white transition-colors duration-300">
                            <i class="ri-team-line text-lg"></i>
                        </div>
                        <h3 class="text-lg font-medium text-dark mb-2 tracking-tight">Dedicated teams</h3>
                        <p class="text-zinc-500 text-[13px] leading-relaxed">Experts who work as a seamless, native extension of your internal company structure.</p>
                    </div>
                </div>

                <!-- Card 2 -->
                <div class="group border border-zinc-100 rounded-2xl p-8 bg-zinc-50/30 hover:bg-white hover:border-zinc-200/80 hover:shadow-[0_20px_50px_-20px_rgba(0,0,0,0.04)] transition-all duration-300 flex flex-col justify-between min-h-[220px]">
                    <div>
                        <div class="w-10 h-10 rounded-xl bg-royal/5 flex items-center justify-center text-royal mb-6 group-hover:bg-royal group-hover:text-white transition-colors duration-300">
                            <i class="ri-git-repository-private-line text-lg"></i>
                        </div>
                        <h3 class="text-lg font-medium text-dark mb-2 tracking-tight">Infrastructure access</h3>
                        <p class="text-zinc-500 text-[13px] leading-relaxed">Production-ready providers and transactional rails available through a single integration.</p>
                    </div>
                </div>

                <!-- Card 3 -->
                <div class="group border border-zinc-100 rounded-2xl p-8 bg-zinc-50/30 hover:bg-white hover:border-zinc-200/80 hover:shadow-[0_20px_50px_-20px_rgba(0,0,0,0.04)] transition-all duration-300 flex flex-col justify-between min-h-[220px]">
                    <div>
                        <div class="w-10 h-10 rounded-xl bg-royal/5 flex items-center justify-center text-royal mb-6 group-hover:bg-royal group-hover:text-white transition-colors duration-300">
                            <i class="ri-rocket-line text-lg"></i>
                        </div>
                        <h3 class="text-lg font-medium text-dark mb-2 tracking-tight">Business setup</h3>
                        <p class="text-zinc-500 text-[13px] leading-relaxed">Launch new vertical digital businesses with continuous strategic and architectural guidance.</p>
                    </div>
                </div>

                <!-- Card 4 -->
                <div class="group border border-zinc-100 rounded-2xl p-8 bg-zinc-50/30 hover:bg-white hover:border-zinc-200/80 hover:shadow-[0_20px_50px_-20px_rgba(0,0,0,0.04)] transition-all duration-300 flex flex-col justify-between min-h-[220px]">
                    <div>
                        <div class="w-10 h-10 rounded-xl bg-royal/5 flex items-center justify-center text-royal mb-6 group-hover:bg-royal group-hover:text-white transition-colors duration-300">
                            <i class="ri-calendar-todo-line text-lg"></i>
                        </div>
                        <h3 class="text-lg font-medium text-dark mb-2 tracking-tight">Subscription model</h3>
                        <p class="text-zinc-500 text-[13px] leading-relaxed">Completely predictable fixed costs. Scale capability up or down natively as your volume grows.</p>
                    </div>
                </div>

                <!-- Card 5 -->
                <div class="group border border-zinc-100 rounded-2xl p-8 bg-zinc-50/30 hover:bg-white hover:border-zinc-200/80 hover:shadow-[0_20px_50px_-20px_rgba(0,0,0,0.04)] transition-all duration-300 flex flex-col justify-between min-h-[220px]">
                    <div>
                        <div class="w-10 h-10 rounded-xl bg-royal/5 flex items-center justify-center text-royal mb-6 group-hover:bg-royal group-hover:text-white transition-colors duration-300">
                            <i class="ri-time-flash-line text-lg"></i>
                        </div>
                        <h3 class="text-lg font-medium text-dark mb-2 tracking-tight">Faster launch, lower cost</h3>
                        <p class="text-zinc-500 text-[13px] leading-relaxed">Ship core modules sooner to realize market returns without an overblown upfront build expense.</p>
                    </div>
                </div>

                <!-- Card 6 -->
                <div class="group border border-zinc-100 rounded-2xl p-8 bg-zinc-50/30 hover:bg-white hover:border-zinc-200/80 hover:shadow-[0_20px_50px_-20px_rgba(0,0,0,0.04)] transition-all duration-300 flex flex-col justify-between min-h-[220px]">
                    <div>
                        <div class="w-10 h-10 rounded-xl bg-royal/5 flex items-center justify-center text-royal mb-6 group-hover:bg-royal group-hover:text-white transition-colors duration-300">
                            <i class="ri-shield-keyhole-line text-lg"></i>
                        </div>
                        <h3 class="text-lg font-medium text-dark mb-2 tracking-tight">Ownership retained</h3>
                        <p class="text-zinc-500 text-[13px] leading-relaxed">Absolute containment. You maintain full ownership of codebases, IPs, and underlying vendor systems.</p>
                    </div>
                </div>

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


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

    <?php
    include 'components/BlogDetails/blog-data.php'
    ?>
    <section class="py-24 px-[4%] max-w-[1250px] bg-white mx-auto" id="featured-blogs">
        <div class="max-w-[1300px] mx-auto">
           <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-12" data-aos="fade-up">
    <!-- Title & Subtitle Cluster -->
    <div class="max-w-3xl">
        <span class="font-mono text-[11px] font-bold tracking-[0.4em] text-electric uppercase block mb-4">
             THE INSIGHTS LAB
        </span>
        <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-dark leading-tight">
            Bold ideas on vision, strategy, culture, and brand built for <span class="italic font-serif text-electric">business impact</span>
        </h2>
    </div>

    <!-- Action Module -->
    <div class="flex-shrink-0">
        <a href="blog.php" class="inline-flex items-center gap-2 bg-white border border-zinc-100 hover:border-electric text-dark hover:text-electric px-6 py-3 rounded-full text-xs font-mono font-bold uppercase tracking-widest transition-all duration-300 shadow-sm hover:shadow-md">
            Visit Blog 
            <span class="font-sans text-[14px] leading-none">→</span>
        </a>
    </div>
</div>

            <?php
            require_once __DIR__ . '/includes/blog-service.php';
            $allIndexPosts = get_all_blogs('all');
            $featuredIndexPosts = array_values(array_filter($allIndexPosts, function ($p) {
                return ($p['featured'] ?? 'no') === 'yes';
            }));
            $heroPost = $featuredIndexPosts[0] ?? ($allIndexPosts[0] ?? null);
            $smallCards = count($featuredIndexPosts) > 1 ? array_slice($featuredIndexPosts, 1, 2) : array_slice($allIndexPosts, 1, 2);
            ?>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 w-full">
                <?php if ($heroPost): 
                    $heroSlug = $heroPost['slug'] ?? $heroPost['id'];
                    $heroUrl  = "blog-details.php?slug=" . urlencode($heroSlug);
                ?>
                    <a href="<?= htmlspecialchars($heroUrl) ?>" class="relative rounded-2xl overflow-hidden lg:row-span-2 min-h-[420px] group cursor-pointer">
                        <img
                            src="<?= htmlspecialchars($heroPost['image']) ?>"
                            alt="<?= htmlspecialchars($heroPost['title']) ?>"
                            class="w-full h-full object-cover absolute inset-0 transition-transform duration-1000 group-hover:scale-105" />
                        <div class="absolute inset-0 bg-gradient-to-t from-dark/80 via-dark/20 to-transparent"></div>

                        <span class="absolute top-8 left-8 bg-white text-dark text-[10px] font-bold uppercase tracking-widest px-5 py-2.5 rounded-full shadow-sm">
                            <?= htmlspecialchars($heroPost['category']) ?>
                        </span>

                        <div class="absolute bottom-0 left-0 right-0 p-10">
                            <h3 class="text-white text-2xl md:text-3xl font-[400] tracking-tighter leading-[1.1] max-w-[90%]">
                                <?= htmlspecialchars($heroPost['title']) ?>
                            </h3>
                        </div>
                    </a>
                <?php endif; ?>

                <?php foreach ($smallCards as $post): 
                    $cardSlug = $post['slug'] ?? $post['id'];
                    $cardUrl  = "blog-details.php?slug=" . urlencode($cardSlug);
                ?>
                    <a href="<?= htmlspecialchars($cardUrl) ?>" class="flex flex-col md:flex-row items-stretch border border-zinc-100 rounded-2xl overflow-hidden bg-white min-h-[200px] p-2 pr-8 group cursor-pointer hover:bg-zinc-50 transition-all duration-500">
                        <div class="relative w-full md:w-56 flex-shrink-0 aspect-[4/3] md:aspect-auto rounded-2xl overflow-hidden">
                            <img
                                src="<?= htmlspecialchars($post['image']) ?>"
                                alt="<?= htmlspecialchars($post['title']) ?>"
                                class="w-full h-full object-cover transition-all duration-700" />
                            <span class="absolute top-4 left-4 bg-white text-dark text-[9px] font-bold uppercase tracking-widest px-4 py-2 rounded-full shadow-sm">
                                <?= htmlspecialchars($post['category']) ?>
                            </span>
                        </div>

                        <div class="flex flex-col justify-between p-2 md:p-6 flex-1">
                            <h4 class="text-xl text-dark tracking-tight leading-tight group-hover:text-electric font-[400] transition-colors">
                                <?= htmlspecialchars($post['title']) ?>
                            </h4>
                            <div class="flex items-center gap-2 mt-4 text-dark font-bold text-[11px] uppercase tracking-widest">
                                <span>Read Blog</span>
                                <div class="w-[22px] h-[22px] rounded-full border-[1.5px] border-dark flex items-center justify-center">
                                    <i class="ri-arrow-right-up-line text-xs"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                <?php endforeach; ?>
            </div>
        </div>
    </section>








    <?php
    $faqs = [
        [
            'icon' => 'ri-rocket-line',
            'q' => 'How do I launch a fintech company?',
            'a' => 'Nesvra helps you launch a fintech company end to end: compliance-ready architecture, core banking software, wallets and cards, payment, KYC and AML integrations, plus a dedicated team to build and operate the platform. Regulated services are delivered through licensed partners.'
        ],
        [
            'icon' => 'ri-price-tag-3-line',
            'q' => 'How much does fintech software cost?',
            'a' => 'Cost depends on scope. Nesvra uses subscription-based teams and infrastructure access so you avoid large upfront builds and pay predictably as you launch and scale. Book a consultation for a tailored estimate.'
        ],
        [
            'icon' => 'ri-calendar-check-line',
            'q' => 'Can I hire developers monthly?',
            'a' => 'Yes. Tech Team for Hire is a subscription-based technology department. You get dedicated developers, designers, QA, DevOps and project managers on a monthly basis, and you can scale the team up or down.'
        ],
        [
            'icon' => 'ri-shield-keyhole-line',
            'q' => 'Do I own the source code?',
            'a' => 'Yes. You retain full ownership of the source code and intellectual property that Nesvra builds for you.'
        ],
        [
            'icon' => 'ri-git-repository-private-line',
            'q' => 'What is Infrastructure Access?',
            'a' => 'Infrastructure Access is a single integration that connects you to payment gateways, SMS, email, KYC, AML, identity verification and compliance providers through one unified API, with provider management handled for you.'
        ],
        [
            'icon' => 'ri-user-search-line',
            'q' => 'Can I access KYC providers through Nesvra?',
            'a' => 'Yes. Through Infrastructure Access you can connect to KYC, AML and identity verification providers with one integration and unified provider management.'
        ],
        [
            'icon' => 'ri-bank-line',
            'q' => 'Can Nesvra build my digital bank?',
            'a' => 'Yes. Nesvra provides core banking software, wallets, virtual cards and remittance, plus the engineering team to design, build and operate a digital bank. Regulated banking services are delivered through licensed partners.'
        ],
        [
            'icon' => 'ri-team-line',
            'q' => 'What is Tech Team for Hire?',
            'a' => 'It is Technology Department as a Service. You subscribe to an entire managed technology department, operated by Nesvra, that can replace an internal team or complement an existing one.'
        ],
        [
            'icon' => 'ri-government-line',
            'q' => 'Is Nesvra a bank?',
            'a' => 'No. Nesvra is a technology company. We provide the software and infrastructure to build financial products, and regulated services are delivered through licensed partners.'
        ],
        [
            'icon' => 'ri-user-star-line',
            'q' => 'Can I hire a dedicated development team without a CTO?',
            'a' => 'Yes. Nesvra provides technology leadership as part of the service, so you get an external CTO office and a managed team without hiring a full-time CTO.'
        ],
        [
            'icon' => 'ri-wallet-3-line',
            'q' => 'What is a digital wallet?',
            'a' => 'A digital wallet lets users hold balances, send and receive money, and pay from a mobile or web app. Nesvra provides wallet software you can brand and launch as your own.'
        ],
        [
            'icon' => 'ri-cpu-line',
            'q' => 'What is core banking software?',
            'a' => 'Core banking software runs accounts, ledgers and transactions. It is the engine behind a digital bank, and Nesvra provides it together with the team to operate it.'
        ],
        [
            'icon' => 'ri-bank-card-line',
            'q' => 'Can Nesvra issue virtual cards?',
            'a' => 'Yes. Nesvra provides a virtual card platform so you can issue branded cards for customers, teams and spend management, with issuance handled through licensed partners.'
        ],
        [
            'icon' => 'ri-exchange-funds-line',
            'q' => 'Do you offer remittance software?',
            'a' => 'Yes. Nesvra provides remittance software and payout rails for cross-border money movement, so you can launch a remittance product faster.'
        ],
        [
            'icon' => 'ri-bubble-chart-line',
            'q' => 'What does ERP software do?',
            'a' => 'ERP software plans and manages resources, inventory, finance and operations in one place. Nesvra offers ERP as part of a unified business operating system alongside CRM and accounting.'
        ],
        [
            'icon' => 'ri-customer-service-2-line',
            'q' => 'Can I get CRM software from Nesvra?',
            'a' => 'Yes. Nesvra provides CRM software to manage pipeline, customers and support, integrated with ERP and accounting in the same operating system.'
        ],
        [
            'icon' => 'ri-time-flash-line',
            'q' => 'How fast can we launch?',
            'a' => 'Because Nesvra provides ready infrastructure and a dedicated team, many fintech and SaaS products launch in weeks rather than months. Timelines depend on scope and compliance requirements.'
        ],
        [
            'icon' => 'ri-global-line',
            'q' => 'What industries do you serve?',
            'a' => 'Nesvra serves banking, financial services, telecommunications, ecommerce, healthcare, education, manufacturing, logistics and government, among others.'
        ],
        [
            'icon' => 'ri-settings-4-line',
            'q' => 'Can Nesvra manage our existing software?',
            'a' => 'Yes. The Tech Team for Hire subscription can take over maintenance, support and ongoing development of platforms you already run, or complement your existing team.'
        ],
        [
            'icon' => 'ri-door-open-line',
            'q' => 'How do we get started?',
            'a' => 'Book a consultation, choose your solution, and Nesvra assembles the team and stands up the platform. From there you launch and scale with a single technology partner.'
        ]
    ];
    ?>

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

            <!-- Section Header -->
            <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">FAQ</span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-royal leading-tight">
                    Answers to common questions. <br>
                    <span class="italic font-serif text-brandOrange">Expert Answers.</span>
                </h2>
            </div>

            <!-- FAQ Layout Grid -->
            <div class="grid md:grid-cols-2 gap-4">
                <?php foreach ($faqs as $faq): ?>
                    <div class="group relative px-8 py-6 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="<?= htmlspecialchars($faq['icon']) ?> text-royal group-hover:text-brandOrange transition-colors text-lg"></i>
                                <h3 class="text-base font-medium text-royal group-hover:text-white transition-colors duration-300 pr-6">
                                    <?= htmlspecialchars($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">
                                    <?= htmlspecialchars($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>

            <!-- Footer Call-to-Action Link -->
            <div class="mt-12 text-center">
                <p class="text-xs text-soft font-[400]">
                    Don't see your question?
                    <a href="#consultation" 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-24 bg-white overflow-hidden" id="tech-vault">
        <div class="max-w-[1200px] mx-auto px-[5%] mb-12 text-center">
            <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-electric block mb-4">Architecture & Infrastructure</span>
            <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-royal leading-tight">
                Built on a modern, <br class="sm:hidden"> <span class="italic font-serif text-brandOrange">proven stack.</span>
            </h2>
        </div>

        <!-- Infinite Carousel Container -->
        <div class="relative w-full flex overflow-x-hidden border-y border-zinc-100 bg-zinc-50/30 py-8 [mask-image:linear-gradient(to_right,transparent,transparent_5%,white_20%,white_80%,transparent_95%,transparent)]">

            <!-- Track 1: Original Items -->
            <div class="animate-marquee flex min-w-full shrink-0 items-center justify-around gap-12 pr-12">

                <!-- Laravel -->
                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-laravel-fill text-3xl text-[#FF2D20] group-hover:drop-shadow-[0_0_12px_rgba(255,45,32,0.2)]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">Laravel</span>
                </div>

                <!-- PHP -->
                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-code-s-slash-line text-3xl text-[#777BB4]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">PHP</span>
                </div>

                <!-- Flutter -->
                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-flutter-fill text-3xl text-[#02569B] group-hover:drop-shadow-[0_0_12px_rgba(2,86,155,0.2)]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">Flutter</span>
                </div>

                <!-- React -->
                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-reactjs-line text-3xl text-[#61DAFB] group-hover:drop-shadow-[0_0_12px_rgba(97,218,251,0.3)]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">React</span>
                </div>

                <!-- Node.js -->
                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-node-tree text-3xl text-[#339933]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">Node.js</span>
                </div>

                <!-- AWS -->
                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-amazon-fill text-3xl text-[#FF9900]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">AWS</span>
                </div>

                <!-- Docker -->
                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-instance-line text-3xl text-[#2496ED]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">Docker</span>
                </div>

                <!-- Kubernetes -->
                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-server-line text-3xl text-[#326CE5]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">Kubernetes</span>
                </div>

                <!-- Database (MySQL / Postgres) -->
                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-database-2-line text-3xl text-[#00758F]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">MySQL</span>
                </div>

                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-database-line text-3xl text-[#336791]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">PostgreSQL</span>
                </div>

                <!-- Redis -->
                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-hard-drive-3-line text-3xl text-[#DC382D]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">Redis</span>
                </div>
            </div>

            <!-- Track 2: Identical Loop Duplicate to prevent layout gaps -->
            <div class="animate-marquee flex min-w-full shrink-0 items-center justify-around gap-12 pr-12 aria-hidden='true'">

                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-laravel-fill text-3xl text-[#FF2D20]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">Laravel</span>
                </div>

                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-code-s-slash-line text-3xl text-[#777BB4]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">PHP</span>
                </div>

                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-flutter-fill text-3xl text-[#02569B]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">Flutter</span>
                </div>

                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-reactjs-line text-3xl text-[#61DAFB]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">React</span>
                </div>

                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-node-tree text-3xl text-[#339933]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">Node.js</span>
                </div>

                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-amazon-fill text-3xl text-[#FF9900]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">AWS</span>
                </div>

                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-instance-line text-3xl text-[#2496ED]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">Docker</span>
                </div>

                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-server-line text-3xl text-[#326CE5]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">Kubernetes</span>
                </div>

                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-database-2-line text-3xl text-[#00758F]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">MySQL</span>
                </div>

                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-database-line text-3xl text-[#336791]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">PostgreSQL</span>
                </div>

                <div class="flex items-center gap-3 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-300 group">
                    <i class="ri-hard-drive-3-line text-3xl text-[#DC382D]"></i>
                    <span class="font-mono text-xs font-semibold uppercase tracking-wider text-dark">Redis</span>
                </div>
            </div>
        </div>
    </section>


    <section class="px-6 py-20 md:py-32 bg-white">
        <div class="max-w-8xl mx-auto">
            <div class="relative w-[90%] mx-auto md:min-h-[500px] min-h-[600px] rounded-[48px] overflow-hidden flex flex-col items-center justify-center text-center px-6">

                <!-- Overlay architecture -->
                <div class="absolute inset-0 bg-black/50 z-10"></div>

                <!-- Background Image Layer -->
                <div class="absolute inset-0 z-0">
                    <img src="Asset/devs.webp"
                        class="w-full h-full object-cover"
                        alt="Action Background" />
                    <div class="absolute inset-0 bg-black/20"></div>
                </div>

                <!-- Foreground Content Module -->
                <div class="relative z-10 max-w-4xl" data-aos="zoom-out">
                    <div class="flex items-center justify-center gap-2 mb-6">
                        <span class="text-white text-[10px] font-black uppercase tracking-[0.3em] px-4 py-2 bg-white/10 backdrop-blur-xl text-white rounded-full border border-white/20">⭐ READY?</span>
                    </div>

                    <h2 class="max-w-5xl text-4xl md:text-5xl font-[400] tracking-[-0.05em] leading-[1.05] text-white mb-4">
                        Ready to launch, grow or <br> modernize with technology?
                    </h2>

                    <!-- Condensed 2-line high-fidelity description -->
                    <p class="mb-8 max-w-2xl mx-auto text-sm md:text-base text-white/70 font-mono leading-relaxed">
                        Nesvra provides the mission-critical software, custom managed engineering teams,
                        and infrastructure rails required to build or transform your global digital venture.
                    </p>

                    <!-- Actions Matrix -->
                    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                        <button class="w-full sm:w-auto group px-8 py-4 bg-white text-black rounded-full font-bold text-sm uppercase tracking-tight transition-all duration-300 hover:scale-105 active:scale-95 shadow-xl">
                            Talk to Sales
                        </button>

                        <button class="w-full sm:w-auto group px-8 py-4 bg-white/10 backdrop-blur-xl text-white rounded-full font-bold text-sm uppercase tracking-tight transition-all duration-300 hover:scale-105 active:translate-y-[2px] border border-white/20">
                            Book a Demo
                        </button>

                        <button class="w-full sm:w-auto group px-8 py-4 bg-white/5 backdrop-blur-md text-white/90 hover:text-white rounded-full font-bold text-sm uppercase tracking-tight transition-all duration-300 hover:bg-white/10 border border-white/10">
                            Create Merchant Account
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>


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



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






    <script>
        const faqs = [{
                q: "Do you have a website where I can see more?",
                a: "Check out our product page!"
            },
            {
                q: "How fast can you scale our team?",
                a: "We can deploy experts in under 48 hours."
            },
            {
                q: "Is the pricing really predictable?",
                a: "Yes, one flat monthly fee. No surprises."
            }
        ];

        let index = 0;
        const qBubble = document.getElementById('q-bubble');
        const aBubble = document.getElementById('a-bubble');

        function runChatLoop() {
            // 1. Reset
            qBubble.classList.remove('active');
            aBubble.classList.remove('active');

            setTimeout(() => {
                // 2. Set Content
                qBubble.querySelector('p').textContent = faqs[index].q;
                aBubble.querySelector('p').textContent = faqs[index].a;

                // 3. Show Question
                qBubble.classList.add('active');

                // 4. Show Answer after delay
                setTimeout(() => {
                    aBubble.classList.add('active');
                }, 1200);

            }, 600);

            index = (index + 1) % faqs.length;
        }

        // Initialize
        setInterval(runChatLoop, 7000);
        runChatLoop();
    </script>

</body>

</html>