<!DOCTYPE html>
<html lang="en">
<?php
$pagetitle = "Custom Software Development | Build Your Unique Platform | Nesvra";
include 'components/head.php';
?>

<body class="bg-white">

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

    <!-- HERO -->
    <section class="relative max-h-[89dvh] h-fit w-full overflow-hidden">
        <div class="absolute inset-0 z-0">
            <div class="absolute inset-0 bg-black/50 z-10"></div>
            <img src="https://images.unsplash.com/photo-1518644730709-0835105d9daa?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?q=80&w=888&auto=format&fit=crop"
            
                class="w-full h-full object-cover"
                style="background-attachment: fixed; background-position: center;"
                alt="Custom Software Development" />
        </div>
        <div class="relative z-20 h-full w-full max-w-8xl mx-auto px-4 md:px-16 pt-32 md:pt-48 pb-12 flex flex-col items-start text-left">
            <span class="font-mono text-[11px] font-bold tracking-[0.4em] text-brandOrange uppercase mb-3">Custom Software Development</span>
            <h1 data-aos="fade-right" data-aos-delay="200"
                class="max-w-4xl text-4xl md:text-5xl font-[400] tracking-[-0.05em] leading-[1.05] text-white">
                Have a Unique Platform Idea? <br class="hidden md:block">
                <span class="italic font-serif">We Build It.</span>
            </h1>
            <p data-aos="fade-right" data-aos-delay="400"
                class="mt-3 max-w-2xl text-sm text-white/70 font-mono leading-relaxed">
                Custom software development for unique business requirements any platform, any industry, any scale. From concept to production with Nesvra's expert engineering team.
            </p>
            <div data-aos="fade-up" data-aos-delay="600" class="mt-4 flex items-center gap-4">
                <a href="/get-demo"
                    class="inline-flex items-center gap-3  px-6 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)]">

                    <i data-lucide="calendar-days" class="w-4 h-4 text-white"></i>
                    <span>
                        Get a <span class="max-sm:hidden"> Free Platform</span> Demo </span>
                </a>
                <a href="#pricing"
                    class="inline-flex items-center gap-3  px-6 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">
                    View Pricing
                    <i class="ri-arrow-right-line"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- TRUST STRIP -->
    <section class="py-6 px-[5%] bg-white border-b border-zinc-100 ">
        <div class="max-w-[1200px] mx-auto">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-0 divide-x divide-zinc-100">
                <?php
                $trust = [
                    ["50+ Platforms",   "Launched & in production", "ri-rocket-line"],
                    ["4.9/5",           "Average client rating",    "ri-star-fill"],
                    ["SOC 2 Type II",   "Security standard",        "ri-shield-keyhole-line"],
                    ["99.9% Uptime",    "SLA guarantee",            "ri-server-line"],
                ];
                foreach ($trust as [$val, $label, $icon]):
                ?>
                    <div class="flex flex-col items-center text-center px-6 py-5 group">

                        <span class="text-lg font-semibold text-royal tracking-tighter flex items-center justify-center gap-2">
                            <div class="text-brandOrange text-xl transition-transform duration-300 group-hover:scale-110 flex items-center">
                                <i class="<?= $icon ?>"></i>
                            </div>
                            <?= $val ?>
                        </span>
                        <span class="text-[10px] font-mono uppercase tracking-widest text-soft mt-1"><?= $label ?></span>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- WHY NESVRA -->
    <section class="py-24 px-[5%] bg-white overflow-hidden" id="overview">
        <div class="max-w-[1200px] mx-auto">
            <div class="grid lg:grid-cols-2 gap-20 items-start">
                <div data-aos="fade-right">
                    <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase block mb-6">{01} Why Nesvra</span>
                    <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-royal leading-[1.1] mb-6">
                        End-to-end platforms that drive <span class="italic font-serif text-electric">real business value.</span>
                    </h2>
                    <p class="text-soft text-lg leading-relaxed">
                        From ideation to deployment and beyond — we build platforms that scale with your ambition. No generic tools, no off-the-shelf compromises. Every line of code built around your specific workflow and goals.
                    </p>
                </div>
                <div class="flex flex-col gap-6" data-aos="fade-left" data-aos-delay="150">
                    <?php
                    $why = [
                        ["ri-tools-line",       "What We Build",        "Custom web apps, mobile platforms, enterprise portals, API-first systems, and complex fintech infrastructure tailored to your unique workflows."],
                        ["ri-sparkling-line",    "The Nesvra Advantage", "Dedicated squad of architects, engineers, QA, and PMs. Agile delivery, transparent roadmaps, and CTO-level strategy — without overhead."],
                        ["ri-box-3-line",        "What You Get",        "Full source code ownership, cloud infrastructure, CI/CD pipelines, security hardening, and ongoing maintenance. Complete technology partnership."],
                    ];
                    foreach ($why as [$icon, $title, $desc]):
                    ?>
                        <div class="flex gap-5 items-start p-6 bg-[#F8F9FA] rounded-[20px] border border-zinc-100 hover:border-royal/20 transition-all duration-300 group">
                            <i class="<?= $icon ?> text-2xl text-soft group-hover:text-electric transition-colors mt-0.5 flex-shrink-0"></i>
                            <div>
                                <h4 class="text-base font-semibold text-royal tracking-tight mb-1"><?= $title ?></h4>
                                <p class="text-soft text-sm leading-relaxed"><?= $desc ?></p>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </section>

    <!-- CAPABILITIES -->
    <section class="py-24 px-[5%] bg-[#f3f3f3]" id="capabilities">
        <div class="max-w-[1200px] mx-auto">
            <div class="text-center mb-16" data-aos="fade-up">
                <span class="font-mono text-[11px] font-bold tracking-[0.4em] text-brandOrange uppercase block mb-3">{02} Development Ecosystem</span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-dark leading-[1.1]">
                    Every phase of your software lifecycle, <span class="italic font-serif text-royal">managed by experts.</span>
                </h2>
            </div>
            <div class="flex flex-col gap-8">
                <?php
                $caps = [
                    ["Requirements Analysis & Scoping",   "Deep discovery sessions, user story mapping, and technical specification documents that eliminate ambiguity before a single line of code is written."],
                    ["Technical Architecture Design",     "Scalable, secure cloud-native architectures with microservices or monoliths based on your scale requirements and team preferences."],
                    ["UI/UX Design & Prototyping",        "User-centered design, interactive prototypes, and design systems that create delightful, conversion-optimised product experiences."],
                    ["Agile Development Methodology",     "Two-week sprints, daily standups, continuous integration, and full transparency via Jira or Linear. You see progress every single week."],
                    ["Quality Assurance & Testing",       "Automated unit tests, integration tests, end-to-end testing, and manual QA — zero regression in production."],
                    ["Cloud Deployment & DevOps",         "AWS/Azure/GCP setup, CI/CD pipelines, container orchestration (Kubernetes), and auto-scaling built for enterprise workloads."],
                    ["Technology Stack Flexibility",      "React, Vue, Angular, Node.js, Python, Go, Java, .NET — stack-agnostic engineering that chooses what fits your specific goals."],
                    ["Security Hardening & Compliance",   "OWASP best practices, GDPR/CCPA, PCI DSS, SOC 2, HIPAA — compliance-first engineering from architecture design onward."],
                    ["Ongoing Maintenance & Support",     "24/7 monitoring, security patches, performance optimisation, and feature enhancements post-launch with defined SLAs."],
                ];
                foreach ($caps as $i => [$title, $desc]):
                ?>
                    <div class="flex gap-5 md:gap-8 group" data-aos="fade-up" data-aos-delay="<?= min($i * 50, 250) ?>">
                        <span class="font-mono text-brandOrange font-semibold text-base mt-1 tracking-tighter shrink-0">0<?= $i + 1 ?>.</span>
                        <div class="flex flex-col border-b border-zinc-200 pb-8 w-full">
                            <h4 class="text-lg font-semibold text-royal tracking-tighter mb-2 group-hover:text-electric transition-colors"><?= $title ?></h4>
                            <p class="text-soft text-base leading-relaxed"><?= $desc ?></p>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- USE CASES TABS -->
    <section class="py-24 px-[5%] bg-white " id="use-cases" x-data="{ active: 'fintech' }">
        <div class="max-w-[1200px] mx-auto">
            <div class="text-center mb-16" data-aos="fade-up">
                <span class="font-mono text-[11px] font-bold tracking-[0.4em] text-brandOrange uppercase block mb-3">{03} Use Cases</span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-dark leading-[1.1]">
                    Built for your <span class="italic font-serif text-royal">industry & use case.</span>
                </h2>
                <p class="text-soft text-lg mt-4 max-w-xl mx-auto">We've delivered platforms that power businesses across sectors.</p>
            </div>
            <?php
            $capabilities = [
                [
                    'tag' => 'Unique Fintech Product',
                    'title' => 'PCI-DSS compliant, secure fintech platforms with <span class="italic font-serif">real-time processing.</span>',
                    'desc' => 'From digital wallets to lending platforms — payment gateway integrations, KYC/AML workflows, and real-time transaction processing. We\'ve built neobanks, investment dashboards, and remittance platforms that process millions in daily volume.',
                    'features' => ["KYC/AML workflows", "Payment gateways", "Real-time ledger"],
                    'accent' => 'brandOrange'
                ],
                [
                    'tag' => 'Industry-Specific SaaS Platform',
                    'title' => 'Multi-tenant SaaS built for your <span class="italic font-serif">vertical market.</span>',
                    'desc' => 'Subscription billing, user roles, analytics dashboards, and white-label capabilities. Built for logistics, healthcare, real estate, or any vertical SaaS model that needs to serve hundreds of enterprise clients at once.',
                    'features' => ["Multi-tenancy", "Subscription billing", "White-label ready"],
                    'accent' => 'electric'
                ],
                [
                    'tag' => 'Enterprise Internal Tool',
                    'title' => 'Replace spreadsheets and disconnected systems with <span class="italic font-serif">purpose-built tools.</span>',
                    'desc' => 'Custom CRMs, ERPs, inventory management, HR portals, and workflow automation tools — boosting internal productivity by 40%+ while giving leadership real-time operational visibility.',
                    'features' => ["Custom CRM/ERP", "Workflow automation", "Role-based access"],
                    'accent' => 'brandOrange'
                ],
                [
                    'tag' => 'Complex Integration Platform',
                    'title' => 'Unify disconnected systems into a <span class="italic font-serif">single source of truth.</span>',
                    'desc' => 'API gateways, data synchronisation hubs, and middleware solutions connecting CRMs, ERPs, marketing tools, and legacy systems into a unified data fabric that eliminates manual reconciliation.',
                    'features' => ["API gateways", "Data sync hubs", "Legacy migration"],
                    'accent' => 'electric'
                ]
            ];
            ?>

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

                                <div class="md:col-span-5" data-aos="fade-up">
                                    <span class="font-mono text-[10px] uppercase tracking-[0.3em] text-<?= $item['accent'] ?> mb-4 block font-bold">
                                        // Scope of Expertise
                                    </span>
                                    <h3 class="text-3xl lg:text-4xl text-royal font-medium tracking-tighter mb-6 leading-[1.15]">
                                        <?= $item['title'] ?>
                                    </h3>
                                    <p class="text-base text-soft leading-relaxed">
                                        <?= $item['desc'] ?>
                                    </p>
                                </div>

                                <div class="md:col-span-7" data-aos="fade-up">
                                    <div class="p-8 md:p-12 bg-[#F8F9FA] rounded-[32px] border border-zinc-100 shadow-[0_24px_48px_-12px_rgba(8,31,92,0.04)] relative overflow-hidden group-hover:border-zinc-200 transition-all duration-500">

                                        <div class="absolute top-0 left-0 right-0 h-1.5 bg-zinc-100 group-hover:bg-<?= $item['accent'] ?> transition-colors duration-500"></div>

                                        <span class="font-mono text-[10px] uppercase tracking-widest text-<?= $item['accent'] ?> font-bold block mb-6">
                                            Architecture Capabilities — <?= $item['tag'] ?>
                                        </span>

                                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 relative z-10">
                                            <?php foreach ($item['features'] as $f): ?>
                                                <div class="p-4 bg-white rounded-[20px] border border-zinc-100 text-center transition-all duration-500 hover:-translate-y-1 hover:shadow-[0_12px_24px_rgba(8,31,92,0.06)] flex items-center justify-center min-h-[64px]">
                                                    <span class="text-xs font-bold text-royal leading-tight tracking-tight"><?= $f ?></span>
                                                </div>
                                            <?php endforeach; ?>
                                        </div>

                                    </div>
                                </div>

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

    <!-- ARCHITECTURE OVERVIEW -->
    <section class="py-24 px-[5%] bg-[#f3f3f3]" id="architecture">
        <div class="max-w-[1200px] mx-auto">
            <div class="text-center mb-16" data-aos="fade-up">
                <span class="font-mono text-[11px] font-bold tracking-[0.4em] text-brandOrange uppercase block mb-3">{04} Technical Architecture</span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-dark leading-[1.1]">
                    Modern, scalable <span class="italic font-serif text-royal">system design.</span>
                </h2>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-12" data-aos="fade-up" data-aos-delay="100">
                <?php
                $arch = [
                    ["ri-window-line",       "Frontend",   "React / Vue / Angular"],
                    ["ri-shield-line",        "API Layer",  "Gateway + Auth + Rate limiting"],
                    ["ri-server-line",        "Backend",    "Microservices / Monolith"],
                    ["ri-database-2-line",    "Data Layer", "PostgreSQL / Redis / S3"],
                    ["ri-cloud-line",         "Cloud",      "AWS / GCP / Azure"],
                ];
                foreach ($arch as $i => [$icon, $title, $sub]):
                ?>
                    <div class="flex flex-col items-center text-center p-6 bg-white rounded-[20px] border border-zinc-100 group hover:border-royal/20 hover:shadow-lg hover:shadow-royal/5 transition-all duration-300" data-aos="fade-up" data-aos-delay="<?= $i * 60 ?>">
                        <i class="<?= $icon ?> text-2xl text-soft group-hover:text-electric transition-colors mb-3"></i>
                        <h4 class="text-sm font-semibold text-royal tracking-tight"><?= $title ?></h4>
                        <p class="text-soft text-[11px] mt-1 leading-relaxed"><?= $sub ?></p>
                    </div>
                <?php endforeach; ?>
            </div>
            <!-- Key principles -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6" data-aos="fade-up">
                <?php
                $principles = [
                    ["ri-recycle-line",      "Auto-scaling",     "Infrastructure grows automatically with your traffic — zero manual intervention."],
                    ["ri-lock-2-line",       "Security-first",   "End-to-end encryption, OWASP compliance, and regular penetration testing."],
                    ["ri-pulse-line",        "99.9% Uptime",     "Load balancers, failover, and multi-region deployment as standard."],
                ];
                foreach ($principles as [$icon, $title, $desc]):
                ?>
                    <div class="p-6 bg-white border border-zinc-100 rounded-[20px] flex gap-4 items-start group hover:border-royal/20 transition-all">
                        <i class="<?= $icon ?> text-2xl text-soft group-hover:text-electric transition-colors mt-0.5 flex-shrink-0"></i>
                        <div>
                            <h4 class="text-base font-semibold text-royal tracking-tight mb-1"><?= $title ?></h4>
                            <p class="text-soft text-sm leading-relaxed"><?= $desc ?></p>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- MONETIZATION -->
    <section class="py-24 px-[5%] bg-white" id="monetization">
        <div class="max-w-[1200px] mx-auto">
            <div class="text-center mb-14" data-aos="fade-up">
                <span class="font-mono text-[11px] font-bold tracking-[0.4em] text-brandOrange uppercase block mb-3">{05} Revenue Acceleration</span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-dark leading-[1.1]">
                    How businesses monetize their <span class="italic font-serif text-royal">custom platform.</span>
                </h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <?php
                $monetize = [
                    ["ri-repeat-2-line",         "Subscription Models",    "SaaS recurring revenue with tiered pricing, freemium, or usage-based billing. Build predictable ARR from day one."],
                    ["ri-bank-card-line",         "Transaction Fees",       "Marketplaces and fintech platforms earning per transaction or volume. Scales revenue automatically with growth."],
                    ["ri-bar-chart-box-line",     "Data Monetization",      "Anonymised insights, analytics dashboards, and premium data reports that create a second revenue stream."],
                ];
                foreach ($monetize as $i => [$icon, $title, $desc]):
                ?>
                    <div class="p-8 bg-[#F8F9FA] border border-zinc-100 rounded-[28px] flex flex-col gap-4 group hover:border-royal/20 hover:bg-white hover:shadow-lg hover:shadow-royal/5 transition-all duration-400" data-aos="fade-up" data-aos-delay="<?= $i * 100 ?>">
                        <i class="<?= $icon ?> text-3xl text-soft group-hover:text-electric transition-colors"></i>
                        <div>
                            <h3 class="text-xl font-[400] tracking-tighter text-royal mb-2"><?= $title ?></h3>
                            <p class="text-soft text-sm leading-relaxed"><?= $desc ?></p>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- PRICING -->
    <section class="py-24 px-[5%] bg-[#f3f3f3]" id="pricing">
        <div class="max-w-[1200px] mx-auto">
            <div class="text-center mb-16" data-aos="fade-up">
                <span class="font-mono text-[11px] font-bold tracking-[0.4em] text-brandOrange uppercase block mb-3">{06} Engagement Models</span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-dark leading-[1.1]">
                    Choose your <span class="italic font-serif text-royal">engagement model.</span>
                </h2>
                <p class="text-soft text-lg mt-4 max-w-xl mx-auto">Discovery call required for exact quote. Custom pricing based on project scope.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-stretch mb-16">
                <?php
                $plans = [
                    ["Starter",    "$25K+",           "/ project",  false, "MVP in 8–12 weeks", [
                        "2–3 engineers + PM",
                        "Basic UI/UX design",
                        "Core feature set",
                        "Cloud deployment",
                        "30-day post-launch support",
                    ]],
                    ["Growth",     "$50K – $120K",    "/ project",  true,  "Full-featured platform", [
                        "4–6 engineers + QA + PM",
                        "Advanced UI/UX + design system",
                        "API integrations + third-party",
                        "DevOps + CI/CD pipeline",
                        "3 months post-launch support",
                        "Fractional CTO advisory",
                    ]],
                    ["Enterprise", "$150K+",          "/ custom",   false, "Multi-team, multi-product", [
                        "Dedicated architect + CTO",
                        "Compliance (SOC2, HIPAA, PCI)",
                        "Multi-team engineering squads",
                        "24/7 SLA + dedicated support",
                        "Long-term maintenance program",
                    ]],
                ];
                foreach ($plans as [$title, $price, $period, $popular, $highlight, $features]):
                ?>
                    <div class="flex flex-col <?= $popular ? 'bg-white border-2 border-royal shadow-2xl shadow-royal/10 scale-[1.02] z-10' : 'bg-white border border-zinc-100 hover:border-royal/20' ?> rounded-[32px] p-8 transition-all duration-500 relative overflow-hidden" data-aos="fade-up">
                        <?php if ($popular): ?>
                            <div class="absolute top-0 right-0 bg-brandOrange text-white px-5 py-1.5 rounded-bl-2xl font-mono text-[9px] uppercase tracking-widest font-bold">Most Popular</div>
                        <?php endif; ?>
                        <div class="mb-6">
                            <h3 class="text-xl font-semibold text-royal tracking-tight mb-1"><?= $title ?></h3>
                            <div class="flex items-baseline gap-1 mt-3">
                                <span class="text-3xl font-semibold text-dark tracking-tighter"><?= $price ?></span>
                                <span class="text-sm text-soft"><?= $period ?></span>
                            </div>
                            <p class="font-mono text-[10px] uppercase tracking-widest text-electric mt-2"><?= $highlight ?></p>
                        </div>
                        <ul class="flex flex-col gap-3 mb-8 flex-grow">
                            <?php foreach ($features as $f): ?>
                                <li class="flex items-start gap-3 text-sm text-soft">
                                    <span class="text-electric mt-0.5 flex-shrink-0">✓</span><?= $f ?>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                        <div class="border-t border-zinc-100 pt-6">
                            <a href="/get-demo"
                                class="w-full py-4 rounded-full text-center block text-xs font-bold uppercase tracking-widest transition-all <?= $popular ? 'bg-royal text-white hover:bg-electric' : 'border border-royal text-royal hover:bg-royal hover:text-white' ?>">
                                <?= $popular ? 'Get Quote →' : 'Contact Sales →' ?>
                            </a>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

            <!-- Comparison table -->
            <div data-aos="fade-up">
                <h3 class="text-2xl font-[400] tracking-tighter text-royal text-center mb-8">How we compare</h3>
                <div class="overflow-x-auto rounded-[20px] border border-zinc-100">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="bg-[#F8F9FA]">
                                <th class="text-left p-4 font-semibold text-dark">Criteria</th>
                                <th class="text-left p-4 font-semibold text-royal">Nesvra Custom</th>
                                <th class="text-left p-4 font-semibold text-dark">Build from Scratch</th>
                                <th class="text-left p-4 font-semibold text-dark">Alternative Providers</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-zinc-100">
                            <tr>
                                <td class="p-4 text-soft">Time to Launch</td>
                                <td class="p-4 text-royal font-medium">✓ 8–16 weeks (MVP)</td>
                                <td class="p-4 text-soft">✗ 6–12 months</td>
                                <td class="p-4 text-soft">⚠ 4–9 months</td>
                            </tr>
                            <tr class="bg-zinc-50/50">
                                <td class="p-4 text-soft">Upfront Cost</td>
                                <td class="p-4 text-royal font-medium">✓ Predictable fixed price</td>
                                <td class="p-4 text-soft">✗ $200K+ for senior team</td>
                                <td class="p-4 text-soft">⚠ High agency fees</td>
                            </tr>
                            <tr>
                                <td class="p-4 text-soft">Compliance Ready</td>
                                <td class="p-4 text-royal font-medium">✓ SOC2, GDPR, HIPAA, PCI</td>
                                <td class="p-4 text-soft">✗ Self-managed, costly</td>
                                <td class="p-4 text-soft">⚠ Varies widely</td>
                            </tr>
                            <tr class="bg-zinc-50/50">
                                <td class="p-4 text-soft">Ongoing Support</td>
                                <td class="p-4 text-royal font-medium">✓ Included maintenance plans</td>
                                <td class="p-4 text-soft">✗ Requires separate hiring</td>
                                <td class="p-4 text-soft">⚠ Often hourly billing</td>
                            </tr>
                            <tr>
                                <td class="p-4 text-soft">Strategic Advisory</td>
                                <td class="p-4 text-royal font-medium">✓ Fractional CTO included</td>
                                <td class="p-4 text-soft">✗ None</td>
                                <td class="p-4 text-soft">✗ Rare</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ -->
    <section class="py-24 px-[5%] bg-white" id="faq">
        <div class="max-w-[1100px] mx-auto">
            <div class="text-center mb-16" data-aos="fade-up">
                <span class="font-mono text-[11px] font-bold tracking-[0.4em] text-brandOrange uppercase block mb-3">{07} FAQ</span>
                <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-dark leading-[1.1]">
                    Questions about <span class="italic font-serif text-royal">custom development.</span>
                </h2>
            </div>
            <div class="grid md:grid-cols-2 gap-4">
                <?php
                $faqs = [
                    [
                        "ri-timer-2-line",
                        "How long does it take to build a custom platform?",
                        "Timeline depends on complexity. An MVP typically takes 8–16 weeks. Full enterprise platforms range from 4–9 months. We follow agile sprints with regular deliverables every two weeks."
                    ],
                    [
                        "ri-shield-check-line",
                        "What compliance standards do you support?",
                        "We build platforms compliant with SOC 2, GDPR, CCPA, PCI DSS, HIPAA, and other industry-specific regulations as required by your business and markets."
                    ],
                    [
                        "ri-code-box-line",
                        "Do I own the source code and IP?",
                        "Yes — 100%. You retain full ownership of all source code, intellectual property, and assets created during the engagement. No licensing, no royalties."
                    ],
                    [
                        "ri-links-line",
                        "Can you integrate with my existing systems?",
                        "Absolutely. Our API-first approach ensures seamless integration with CRMs, ERPs, payment gateways, and any third-party services you currently use."
                    ],
                    [
                        "ri-stack-line",
                        "What technology stack do you use?",
                        "We're stack-agnostic: React, Vue, Angular for frontend; Node.js, Python, Go, Java for backend; AWS, Azure, GCP for cloud. We choose what fits your specific goals."
                    ],
                    [
                        "ri-customer-service-2-line",
                        "Do you offer ongoing maintenance after launch?",
                        "Yes. Optional maintenance and support packages include bug fixes, security updates, performance monitoring, and feature enhancements post-launch."
                    ],
                    [
                        "ri-money-dollar-circle-line",
                        "How do you handle project scope and pricing?",
                        "We start with a discovery call to understand requirements, then provide a fixed-price quote or time-and-materials engagement based on your preferences and risk tolerance."
                    ],
                    [
                        "ri-building-2-line",
                        "What industries do you specialise in?",
                        "We've built platforms for fintech, healthcare, logistics, retail, real estate, education, and enterprise SaaS. Our approach adapts to any domain."
                    ],
                ];
                foreach ($faqs as [$icon, $q, $a]):
                ?>
                    <div class="group relative p-8 rounded-[24px] bg-[#F8F9FA] 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-start gap-4 mb-2">
                                <i class="<?= $icon ?> text-royal group-hover:text-brandOrange transition-colors mt-0.5 flex-shrink-0"></i>
                                <h3 class="text-base font-semibold text-royal group-hover:text-white transition-colors duration-300 pr-6 tracking-tight"><?= $q ?></h3>
                            </div>
                            <div class="max-h-0 opacity-0 group-hover:max-h-[200px] group-hover:opacity-100 transition-all duration-500 ease-in-out overflow-hidden pl-8">
                                <p class="pt-2 text-zinc-500 group-hover:text-white/70 text-sm leading-relaxed"><?= $a ?></p>
                            </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>
    </section>

    <!-- FINAL CTA -->
    <section class="py-20 px-[5%] bg-white overflow-hidden">
        <div class="max-w-[1200px] mx-auto">
            <div class="relative w-full md:h-[500px] rounded-[40px] overflow-hidden flex items-center justify-center group">
                <div class="absolute inset-0 z-0">
                    <img src="https://images.unsplash.com/photo-1518644730709-0835105d9daa?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?q=80&w=870&auto=format&fit=crop"
                        alt="Build your platform"
                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000">
                    <div class="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
                </div>
                <div class="relative z-10 w-full px-8 py-16 md:py-0 text-center">
                    <div class="max-w-[800px] mx-auto" data-aos="zoom-in">
                        <span class="font-mono text-[11px] uppercase tracking-[0.4em] text-brandOrange block mb-4">Ready to launch?</span>
                        <h2 class="text-4xl md:text-6xl font-[400] tracking-tighter text-white leading-tight mb-4">
                            From concept to <span class="italic font-serif text-brandOrange">production.</span>
                        </h2>
                        <p class="text-white/80 text-lg mb-8 max-w-[600px] mx-auto leading-relaxed">Let's build your platform. Book a free strategy session and get a custom development roadmap within 48 hours.</p>
                        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                            <a href="/get-demo" class="w-full sm:w-auto px-10 py-5 bg-white text-royal rounded-full font-bold text-xs uppercase tracking-widest hover:bg-brandOrange hover:text-white transition-all shadow-xl">
                                Book Free Demo →
                            </a>
                            <a href="#pricing" class="w-full sm:w-auto px-10 py-5 bg-brandOrange text-white rounded-full font-bold text-xs uppercase tracking-widest hover:bg-white hover:text-royal transition-all shadow-xl">
                                Request Pricing
                            </a>
                        </div>
                    </div>
                </div>
                <div class="absolute top-10 right-10 w-32 h-32 bg-electric/20 rounded-full blur-3xl pointer-events-none"></div>
                <div class="absolute -bottom-10 -left-10 w-48 h-48 bg-brandOrange/20 rounded-full blur-3xl pointer-events-none"></div>
            </div>
        </div>
    </section>

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

</body>

</html>