<!DOCTYPE html>
<html lang="en">
<?php
$pagetitle = "Government Technology | Public Programs & Operations Platforms You Own | Nesvra";
include 'components/head.php';
?>

<body class="bg-white">

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

    <!-- HERO -->
    <section class="relative max-h-[80dvh] h-fit w-full overflow-hidden">
        <div class="absolute inset-0 z-0">
            <div class="absolute inset-0 bg-black/40 z-10"></div>
            <img src="Asset/government.webp"
                class="w-full h-full object-cover mix-blend-luminosity opacity-90"
                style="background-attachment: fixed; background-position: center;"
                alt="Nesvra Government Technology" />
        </div>
        <div class="relative z-20 h-full w-full max-w-8xl mx-auto px-4 md:px-16 pt-32 md:pt-44 pb-16 flex flex-col items-start text-left">
            <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase mb-4" data-aos="fade-right" data-aos-delay="100">
                Technology for government · software you own
            </span>
            <h1 data-aos="fade-right" data-aos-delay="200"
                class="max-w-4xl text-4xl md:text-5xl font-[400] tracking-[-0.04em] leading-[1.08] text-white">
                Public programs and operations on software
                <br class="hidden md:block">
                <span class="italic font-serif text-white/90">you own outright</span>
            </h1>
            <p data-aos="fade-right" data-aos-delay="300"
                class="mt-4 max-w-2xl text-xs md:text-sm text-white/70 font-mono leading-relaxed mb-4">
                Government agencies and public institutions run disbursements, records, operations and finance on Nesvra — with the control and on-premise options the public sector requires, on software they own.
            </p>
            <div data-aos="fade-up" data-aos-delay="500" class="flex items-center gap-4">
                <a href="book-strategy-call.php" class="inline-flex items-center gap-3 px-5 md:px-8 py-4 bg-brandOrange text-white rounded-full font-sans font-[600] text-sm tracking-tight hover:scale-[1.05] transition-all shadow-[0_15px_30px_-5px_rgba(255,138,0,0.4)]">
                    Talk to Sales <i data-lucide="move-right" class="w-4 h-4 text-white"></i>
                </a>
                <a href="#solutions" class="inline-flex items-center gap-3 px-5 md:px-8 py-4 bg-[#111] text-white rounded-full font-sans font-[500] text-sm tracking-tight hover:scale-[1.05] transition-all border border-white/10">
                    Explore solutions <i class="ri-arrow-down-line"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- THE CHALLENGE -->
    <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">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-start mb-16">
                <div class="lg:col-span-6 flex flex-col items-start">
                    <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase mb-4" data-aos="fade-right" data-aos-delay="100">The Challenge</span>
                    <h2 data-aos="fade-right" data-aos-delay="200" class="text-3xl md:text-5xl font-[400] tracking-[-0.04em] leading-[1.1] text-dark">
                        The public sector needs control, transparency and <span class="italic font-serif text-electric">accountability</span>
                    </h2>
                </div>
                <div class="lg:col-span-6 lg:pt-8">
                    <p data-aos="fade-left" data-aos-delay="300" class="max-w-2xl text-sm md:text-base text-slate-600 font-sans leading-relaxed">
                        Agencies manage programs, records, staff and funds under intense scrutiny — and rented or fragmented systems make transparency, access control and data residency hard to guarantee to citizens and auditors.
                    </p>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <?php
                $challenges = [
                    ['icon'=>'archive',      'title'=>'Fragmented records',       'desc'=>'Citizen and program data siloed across departments.'],
                    ['icon'=>'banknote',     'title'=>'Disbursement complexity',  'desc'=>'Payment programs and beneficiary management to coordinate.'],
                    ['icon'=>'shield-check', 'title'=>'Accountability pressure',  'desc'=>'Audit trails, approvals and transparency demands.'],
                    ['icon'=>'globe',        'title'=>'Data residency',           'desc'=>'Regulatory requirements to keep data in-country.'],
                    ['icon'=>'users',        'title'=>'Staff management',         'desc'=>'Large civil service teams and payroll to run.'],
                    ['icon'=>'lock',         'title'=>'Vendor lock-in',           'desc'=>'Core government systems controlled by outside vendors.'],
                ];
                foreach ($challenges as $i => $c):
                    $delay = 100 + ($i * 50);
                ?>
                <div data-aos="fade-up" data-aos-delay="<?= $delay ?>"
                     class="group relative overflow-hidden rounded-3xl border border-slate-200/60 bg-gradient-to-b from-slate-50/50 to-transparent p-8 transition-all duration-500 hover:border-slate-300/80 hover:bg-white hover:scale-[1.02] hover:shadow-[0_30px_60px_-15px_rgba(0,0,0,0.05)]">
                    <div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-slate-50 text-slate-700 border border-slate-200/40 shadow-sm transition-transform duration-500 group-hover:scale-110 group-hover:bg-slate-100 group-hover:text-brandOrange">
                        <i data-lucide="<?= $c['icon'] ?>" class="w-5 h-5 stroke-[1.5]"></i>
                    </div>
                    <h3 class="text-lg font-sans font-[600] tracking-tight text-slate-900 mb-2"><?= $c['title'] ?></h3>
                    <p class="text-sm text-slate-500 font-sans leading-relaxed"><?= $c['desc'] ?></p>
                    <div class="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-slate-200 to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500"></div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- HOW NESVRA HELPS -->
    <section class="relative w-full py-24 md:py-32 bg-white border-t border-royal/5 z-20">
        <div class="w-full max-w-8xl mx-auto px-4 md:px-16">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 items-start">
                <div class="lg:col-span-5 flex flex-col items-start lg:sticky lg:top-32">
                    <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-electric uppercase mb-4" data-aos="fade-right" data-aos-delay="100">How Nesvra helps</span>
                    <h2 data-aos="fade-right" data-aos-delay="200" class="text-3xl md:text-5xl font-[400] tracking-[-0.04em] leading-[1.1] text-dark mb-6">
                        A public sector stack <span class="italic font-serif text-brandOrange">you own</span>
                    </h2>
                    <p data-aos="fade-right" data-aos-delay="300" class="max-w-md text-sm md:text-base text-soft font-sans leading-relaxed mb-8">
                        Run public programs on software you own and host where regulations require — with built-in controls, audit trails and on-premise deployment options.
                    </p>
                    <div data-aos="fade-up" data-aos-delay="400" class="inline-flex items-center gap-3 px-4 py-2 rounded-full border border-electric/10 bg-electric/5">
                        <span class="flex h-2 w-2 rounded-full bg-electric"></span>
                        <span class="text-[12px] font-sans font-semibold text-royal tracking-tight">Full sovereign technology control</span>
                    </div>
                </div>
                <div class="lg:col-span-7 space-y-6">
                    <?php
                    $solutions_help = [
                        ['icon'=>'banknote',     'tag'=>'01 / PROGRAMS',   'title'=>'Run disbursements',  'desc'=>'Programs, payouts and beneficiary management on owned software — with payment rails through Infrastructure Access.'],
                        ['icon'=>'clipboard-list','tag'=>'02 / RECORDS',   'title'=>'Manage records',     'desc'=>'Citizen and program data held in a controlled, auditable owned system — deployable on-premise for data residency.'],
                        ['icon'=>'shield-check', 'tag'=>'03 / GOVERNANCE', 'title'=>'Built-in controls',  'desc'=>'Role-based access, maker-checker approval workflows and immutable audit logs built into every transaction.'],
                        ['icon'=>'server',       'tag'=>'04 / SOVEREIGNTY','title'=>'On-premise ready',   'desc'=>'Deploy fully on-premise or in a sovereign cloud — you own the software and the deployment decision entirely.'],
                    ];
                    foreach ($solutions_help as $i => $s):
                        $delay = 100 + ($i * 75);
                    ?>
                    <div data-aos="fade-up" data-aos-delay="<?= $delay ?>"
                         class="group relative overflow-hidden rounded-3xl border border-royal/10 bg-white p-8 transition-all duration-500 hover:border-electric/30 hover:shadow-[0_30px_60px_-15px_rgba(8,31,92,0.06)]">
                        <div class="flex flex-col sm:flex-row items-start gap-6">
                            <div class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-royal/5 text-royal border border-royal/10 shadow-sm transition-all duration-500 group-hover:scale-110 group-hover:bg-royal group-hover:text-white">
                                <i data-lucide="<?= $s['icon'] ?>" class="w-5 h-5 stroke-[1.5]"></i>
                            </div>
                            <div class="space-y-2">
                                <div class="flex flex-col gap-2">
                                    <span class="font-mono text-[11px] font-bold tracking-wider text-brandOrange/60"><?= $s['tag'] ?></span>
                                    <h3 class="text-lg font-sans font-[600] tracking-tight text-dark"><?= $s['title'] ?></h3>
                                </div>
                                <p class="text-sm text-soft font-sans leading-relaxed"><?= $s['desc'] ?></p>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </section>

    <!-- SOLUTIONS GRID -->
    <?php
    $gov_solutions = [
        ['title'=>'Business OS',        'tagline'=>'01 / PLATFORM',   'desc'=>'Run citizens, programs, finance, operations and staff on one owned platform.',     'image'=>'https://i.pinimg.com/736x/9d/37/be/9d37be2a0249c1be39f53efa97e2e436.jpg', 'icon'=>'layout-dashboard','link'=>'#explore-biz-os'],
        ['title'=>'Enterprise OS',      'tagline'=>'02 / SCALE',      'desc'=>'Operate the entire institution from one unified portal with full audit visibility.', 'image'=>'https://i.pinimg.com/736x/f5/a4/a3/f5a4a3d79054f0e1b874fc5442765ac1.jpg', 'icon'=>'shield',          'link'=>'#explore-enterprise'],
        ['title'=>'Infrastructure Access','tagline'=>'03 / RAILS',    'desc'=>'Payments, KYC, identity and disbursement rails all behind one unified API.',        'image'=>'https://i.pinimg.com/1200x/ae/96/6a/ae966a362a646d500b48e6947c1407db.jpg', 'icon'=>'cpu',             'link'=>'#explore-infra'],
        ['title'=>'Accounting',         'tagline'=>'04 / FINANCE',    'desc'=>'Budget ledgers, payables, payroll, tax and automated regulatory reporting.',        'image'=>'https://i.pinimg.com/1200x/c1/73/ab/c173abc42a871dd6a8ac6202df9f1d18.jpg', 'icon'=>'pie-chart',       'link'=>'#explore-accounting'],
        ['title'=>'CRM',                'tagline'=>'05 / CITIZENS',   'desc'=>'Citizen records, case management and service pipelines on one unified record.',     'image'=>'https://i.pinimg.com/736x/9d/37/be/9d37be2a0249c1be39f53efa97e2e436.jpg', 'icon'=>'users',           'link'=>'#explore-crm'],
        ['title'=>'Tech Team for Hire', 'tagline'=>'06 / ENGINEERING','desc'=>'A dedicated engineering department to build bespoke public-sector systems.',        'image'=>'Asset/TechTeam.webp',                                                       'icon'=>'terminal',        'link'=>'#explore-team'],
    ];
    ?>
    <section id="solutions" class="relative w-full py-24 overflow-hidden z-20">
        <div class="w-full max-w-8xl mx-auto px-4 md:px-16">
            <div class="flex flex-col items-start mb-16">
                <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase mb-4" data-aos="fade-right" data-aos-delay="100">Solutions for Government</span>
                <h2 data-aos="fade-right" data-aos-delay="200" class="text-3xl md:text-5xl font-[400] tracking-[-0.04em] leading-[1.1] text-dark mb-4">
                    Platforms for <span class="italic font-serif text-royal">public institutions</span>
                </h2>
                <p data-aos="fade-right" data-aos-delay="300" class="max-w-xl text-sm md:text-base text-soft font-sans leading-relaxed">
                    Run programs, records, operations and finance on owned, on-premise-ready software.
                </p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <?php $delay = 100; foreach ($gov_solutions as $solution): ?>
                <div data-aos="fade-up" data-aos-delay="<?= $delay ?>"
                     class="group relative h-[450px] w-full overflow-hidden rounded-[32px] border border-royal/10 bg-white transition-all duration-500 hover:scale-[1.01] hover:shadow-[0_40px_80px_-15px_rgba(8,31,92,0.12)]">
                    <img src="<?= $solution['image'] ?>" class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105" alt="<?= $solution['title'] ?>" />
                    <div class="absolute -bottom-[67px] group-hover:bottom-0 h-[50%] rounded-[32px] bg-white/40 backdrop-blur-xl border border-white/40 p-8 flex flex-col justify-between transition-all duration-500 group-hover:bg-white/60 group-hover:border-white/60">
                        <div class="space-y-3">
                            <div class="flex items-center justify-between">
                                <span class="font-mono text-[10px] font-bold tracking-wider text-royal/60 group-hover:text-brandOrange"><?= $solution['tagline'] ?></span>
                                <div class="text-royal/80"><i data-lucide="<?= $solution['icon'] ?>" class="w-4 h-4 stroke-[1.5]"></i></div>
                            </div>
                            <h3 class="text-xl font-sans font-[600] tracking-tight text-dark"><?= $solution['title'] ?></h3>
                            <p class="text-sm text-soft font-sans leading-relaxed"><?= $solution['desc'] ?></p>
                        </div>
                        <div class="pt-3">
                            <a href="<?= $solution['link'] ?>" class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-white text-dark rounded-full font-sans font-[600] text-xs tracking-wide uppercase border border-royal/5 shadow-sm group-hover:bg-royal group-hover:text-white hover:scale-105 transition-all duration-300">
                                Explore <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <?php $delay = min($delay + 100, 600); endforeach; ?>
            </div>
        </div>
    </section>

    <!-- WHAT YOU CAN RUN -->
    <?php
    $capabilities = [
        ['icon'=>'banknote',     'title'=>'Disbursements',  'desc'=>'Programs, payouts and beneficiary tracking.'],
        ['icon'=>'clipboard-list','title'=>'Records',       'desc'=>'Citizen data and program documentation.'],
        ['icon'=>'users',        'title'=>'Staff and HR',   'desc'=>'Civil service scheduling and payroll.'],
        ['icon'=>'wallet',       'title'=>'Finance',        'desc'=>'Budgets, accounting and reporting.'],
        ['icon'=>'shield-check', 'title'=>'Controls',       'desc'=>'Access management, approvals and audit.'],
        ['icon'=>'bar-chart-3',  'title'=>'Reporting',      'desc'=>'Transparency dashboards and oversight.'],
    ];
    ?>
    <section class="relative w-full py-24 bg-white overflow-hidden border-t border-royal/5 z-20">
        <div class="w-full max-w-8xl mx-auto px-4 md:px-16">
            <div class="flex flex-col items-start mb-16 max-w-3xl">
                <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase mb-4" data-aos="fade-right" data-aos-delay="100">What you can run</span>
                <h2 data-aos="fade-right" data-aos-delay="200" class="text-3xl md:text-5xl font-[400] tracking-[-0.04em] leading-[1.1] text-dark mb-4">
                    Run every function <span class="italic font-serif text-royal">of government</span>
                </h2>
                <p data-aos="fade-right" data-aos-delay="300" class="text-sm md:text-base text-soft font-sans leading-relaxed">
                    Deploy owned public-sector infrastructure across every institutional function with the controls and sovereignty government demands.
                </p>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <?php $delay = 100; foreach ($capabilities as $cap): ?>
                <div data-aos="fade-up" data-aos-delay="<?= $delay ?>"
                     class="group flex flex-col items-start space-y-5 p-8 border border-royal/10 rounded-xl bg-white transition-all duration-300 hover:border-royal/30 hover:shadow-[0_20px_40px_-15px_rgba(8,31,92,0.03)]">
                    <div class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-royal/[0.03] text-royal border border-royal/5 transition-all duration-300 group-hover:bg-royal group-hover:text-white">
                        <i data-lucide="<?= $cap['icon'] ?>" class="w-4 h-4 stroke-[1.5]"></i>
                    </div>
                    <div class="space-y-1.5">
                        <h3 class="text-base font-sans font-[600] tracking-tight text-dark transition-colors duration-300 group-hover:text-royal"><?= $cap['title'] ?></h3>
                        <p class="text-xs md:text-sm text-soft font-sans leading-relaxed"><?= $cap['desc'] ?></p>
                    </div>
                </div>
                <?php $delay = min($delay + 50, 600); endforeach; ?>
            </div>
        </div>
    </section>

    <!-- OWNERSHIP FEATURES -->
    <?php
    $ownership = [
        ['icon'=>'banknote','title'=>'One-time investment',         'desc'=>'Acquire once — no recurring subscription fees or per-user license costs.'],
        ['icon'=>'shield',  'title'=>'Lifetime ownership',          'desc'=>'Complete code tenure with full data sovereignty and no vendor exit risk.'],
        ['icon'=>'code-2',  'title'=>'Source code included',        'desc'=>'100% access to configure workflows, controls and agency-specific modules.'],
        ['icon'=>'server',  'title'=>'Cloud or on-premise',         'desc'=>'Deploy on sovereign cloud or fully on-premise for data residency requirements.'],
        ['icon'=>'cpu',     'title'=>'Deployment assistance',       'desc'=>'White-glove engineering support to safely go live in your environment.'],
        ['icon'=>'layers',  'title'=>'Optional managed operations', 'desc'=>'Offload infrastructure management to our dedicated government-grade teams.'],
    ];
    ?>
    <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">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-end mb-16 md:mb-24">
                <div class="lg:col-span-7 flex flex-col items-start">
                    <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase mb-4" data-aos="fade-right" data-aos-delay="100">Own your technology</span>
                    <h2 data-aos="fade-right" data-aos-delay="200" class="text-3xl md:text-5xl font-[400] tracking-[-0.04em] leading-[1.1] text-dark mb-2">
                        Software you own, built <span class="italic font-serif text-royal">for government</span>
                    </h2>
                </div>
                <div class="lg:col-span-5 flex flex-col items-start lg:items-end justify-end">
                    <p data-aos="fade-left" data-aos-delay="300" class="max-w-md text-sm md:text-base text-soft font-sans leading-relaxed mb-6 lg:text-right">
                        Run public programs on software you own and host where required. Acquire once, own the source code, and run it your way with no annual license fees.
                    </p>
                    <a href="#talk-to-sales" data-aos="fade-up" data-aos-delay="400"
                       class="group inline-flex items-center gap-3 text-xs font-sans font-bold tracking-wider text-brandOrange uppercase transition-all duration-300 hover:text-royal">
                        Talk to Sales
                        <div class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-brandOrange/20 text-brandOrange transition-all duration-300 group-hover:border-royal group-hover:text-royal group-hover:translate-x-1">
                            <i data-lucide="arrow-right" class="w-3.5 h-3.5 stroke-[2]"></i>
                        </div>
                    </a>
                </div>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12">
                <?php $delay = 100; foreach ($ownership as $f): ?>
                <div data-aos="fade-up" data-aos-delay="<?= $delay ?>" class="group flex flex-col items-start space-y-3">
                    <div class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-royal/[0.03] text-royal border border-royal/5 transition-all duration-300 group-hover:bg-royal group-hover:text-white">
                        <i data-lucide="<?= $f['icon'] ?>" class="w-4 h-4 stroke-[1.5]"></i>
                    </div>
                    <div class="space-y-1">
                        <h3 class="text-base font-sans font-[600] tracking-tight text-dark transition-colors duration-300 group-hover:text-royal"><?= $f['title'] ?></h3>
                        <p class="text-xs md:text-sm text-soft font-sans leading-relaxed"><?= $f['desc'] ?></p>
                    </div>
                </div>
                <?php $delay = min($delay + 50, 600); endforeach; ?>
            </div>
        </div>
    </section>

    <!-- FAQ -->
    <?php
    $faqs = [
        ['q'=>'Can it run disbursement programs?',          'a'=>'Yes. Programs, payouts and beneficiary management run on owned software, with payment rails through Infrastructure Access. <br><small class="block mt-2 opacity-60">• Program Management • Beneficiary Payouts</small>', 'icon'=>'ri-money-dollar-circle-line'],
        ['q'=>'Can we host on-premise for data residency?', 'a'=>'Yes. Deploy fully on-premise or in a sovereign cloud, since you own the software and the infrastructure decision. <br><small class="block mt-2 opacity-60">• On-Premise Deployment • Sovereign Cloud</small>',       'icon'=>'ri-server-line'],
        ['q'=>'Are there controls and audit trails?',       'a'=>'Yes. Role-based access control, maker-checker approvals and immutable audit logs are built into every workflow. <br><small class="block mt-2 opacity-60">• RBAC • Immutable Audit Logs</small>',                       'icon'=>'ri-shield-check-line'],
        ['q'=>'Does it handle finance and payroll?',        'a'=>'Yes. Budget ledgers, accounting, civil service payroll and regulatory reporting are all included. <br><small class="block mt-2 opacity-60">• Budget Management • Payroll Module</small>',                            'icon'=>'ri-bank-line'],
        ['q'=>'Do we own the software?',                   'a'=>'Yes. Every Nesvra product includes full source code ownership with no recurring license fees or vendor restrictions. <br><small class="block mt-2 opacity-60">• Full Source Code • Perpetual Ownership</small>',      'icon'=>'ri-code-s-slash-line'],
        ['q'=>'Can Nesvra build agency-specific systems?',  'a'=>'Yes. The Tech Team can build and deploy bespoke public-sector systems that you own and host where required. <br><small class="block mt-2 opacity-60">• Custom Systems • White-Glove Delivery</small>',              'icon'=>'ri-settings-3-line'],
    ];
    ?>
    <section class="py-24 px-[5%] bg-white overflow-hidden" id="faq-vault">
        <div class="max-w-[1200px] mx-auto">
            <div class="text-center mb-16">
                <span class="font-mono text-[10px] uppercase tracking-[0.4em] text-royal block mb-4">Government Technology</span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-royal leading-tight">
                    Common Questions. <br><span class="italic font-serif text-brandOrange">Expert Answers.</span>
                </h2>
            </div>
            <div class="grid md:grid-cols-2 gap-4">
                <?php foreach ($faqs as $faq): ?>
                <div class="group relative p-8 rounded-[24px] bg-zinc-50/50 border border-zinc-100/80 transition-all duration-500 hover:bg-royal hover:shadow-xl hover:shadow-royal/10 overflow-hidden cursor-pointer">
                    <div class="relative z-10">
                        <div class="flex items-center gap-4 mb-2">
                            <i class="<?= $faq['icon'] ?> text-royal group-hover:text-brandOrange transition-colors"></i>
                            <h3 class="text-sm font-bold text-royal group-hover:text-white transition-colors duration-300 pr-6"><?= $faq['q'] ?></h3>
                        </div>
                        <div class="max-h-0 opacity-0 group-hover:max-h-[300px] group-hover:opacity-100 transition-all duration-500 ease-in-out overflow-hidden">
                            <div class="pt-4 text-zinc-500 group-hover:text-white/70 text-[13px] leading-relaxed"><?= $faq['a'] ?></div>
                        </div>
                    </div>
                    <div class="absolute top-8 right-8">
                        <div class="w-6 h-6 rounded-full border border-zinc-200 group-hover:border-white/20 flex items-center justify-center transition-all">
                            <i class="ri-add-line text-xs text-royal group-hover:text-white group-hover:rotate-45 transition-all"></i>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            <div class="mt-12 text-center">
                <p class="text-xs text-zinc-500 font-[400]">Don't see your specific requirement? <a href="#demo" class="text-royal border-b border-royal/20 hover:text-brandOrange hover:border-brandOrange transition-all ml-1">Talk to our engineering team</a></p>
            </div>
        </div>
    </section>

    <!-- FINAL CTA -->
    <section class="py-24 px-[5%] bg-white overflow-hidden" id="final-call">
        <div class="max-w-[1200px] mx-auto">
            <div class="relative w-full md:h-[450px] rounded-[32px] border border-zinc-900/5 overflow-hidden flex items-center justify-center group bg-zinc-950">
                <div class="absolute inset-0 z-0">
                    <img src="Asset/government.webp" alt="Government Technology" class="w-full h-full object-cover opacity-60 scale-100 group-hover:scale-[1.03] transition-transform duration-[1200ms] ease-out">
                    <div class="absolute inset-0 bg-black/30"></div>
                </div>
                <div class="relative z-10 w-full px-6 py-20 md:py-0 text-center">
                    <div class="max-w-[720px] mx-auto" data-aos="fade-up" data-aos-duration="800">
                        <h2 class="text-4xl md:text-6xl font-[400] tracking-tighter text-white leading-[1.1] mb-6">
                            Ready to own your <br><span class="italic font-serif text-brandOrange">government technology?</span>
                        </h2>
                        <p class="text-white/70 text-sm md:text-base mb-10 max-w-[540px] mx-auto leading-relaxed tracking-tight font-light">
                            Run programs, records, operations and finance on software you own — hosted where you require, with the controls government demands.
                        </p>
                        <div class="flex flex-col sm:flex-row items-center justify-center gap-4 max-w-xl mx-auto">
                            <a href="book-strategy-call.php" class="w-full sm:w-auto px-8 py-4 bg-brandOrange text-white rounded-full font-medium text-xs uppercase tracking-widest hover:bg-white hover:text-royal transition-all duration-300 shadow-lg shadow-brandOrange/10 flex items-center justify-center gap-2 group/btn">
                                <span>Book Strategy Call</span><i class="ri-arrow-right-line text-xs transition-transform duration-300 group-hover/btn:translate-x-1"></i>
                            </a>
                            <a href="get-demo.php" class="w-full sm:w-auto px-8 py-4 bg-white/10 backdrop-blur-md text-white rounded-full font-medium text-xs uppercase tracking-widest hover:bg-white hover:text-royal transition-all duration-300 border border-white/10 flex items-center justify-center gap-2 group/btn2">
                                <span>Request Demo</span><i class="ri-play-circle-line text-xs text-brandOrange"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="absolute top-0 right-0 w-80 h-80 bg-blue-500/10 rounded-full blur-[120px] pointer-events-none"></div>
                <div class="absolute bottom-0 left-0 w-80 h-80 bg-brandOrange/10 rounded-full blur-[120px] pointer-events-none"></div>
            </div>
        </div>
    </section>

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

</body>
</html>