<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ROI - FinMox</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>
<body class="bg-white text-gray-900">

    <!-- HEADER -->
    <header class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between text-sm">
        <div class="font-bold text-xl">FinMox</div>
        <nav class="hidden md:flex gap-8">
            <a href="index.php" class="text-gray-600 hover:text-black">Home</a>
            <a href="problem.php" class="text-gray-600 hover:text-black">Problem</a>
            <a href="product.php" class="text-gray-600 hover:text-black">Why FinMox</a>
            <a href="how_it_works.php" class="text-gray-600 hover:text-black">How It Works</a>
            <a href="roi.php" class="text-blue-600 font-semibold">ROI</a>
            <a href="pricing.php" class="text-gray-600 hover:text-black">Pricing</a>
        </nav>
        <div class="flex items-center gap-4">
            <a href="login.php" class="text-gray-600 hover:text-black">Sign In</a>
            <a href="apply.php" class="bg-black text-white px-5 py-2.5 rounded-lg">Apply for Access</a>
        </div>
    </header>

    <!-- CONTENT -->
    <main class="max-w-4xl mx-auto px-6 py-20 text-center">
        <h1 class="text-2xl font-semibold text-blue-500">ROI</h1>
        <p class="mt-2 text-3xl md:text-4xl font-extrabold tracking-tight">Most teams save 20–40 hours per role and reduce time-to-hire dramatically.</p>
        
        <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
            <div>
                <h2 class="text-4xl font-bold">30–40</h2>
                <p class="mt-2 text-sm text-gray-600">Hours Saved / Role</p>
            </div>
            <div>
                <h2 class="text-4xl font-bold">60–80%</h2>
                <p class="mt-2 text-sm text-gray-600">Time‑to‑Hire Reduction</p>
            </div>
            <div>
                <h2 class="text-4xl font-bold">1 Analyst</h2>
                <p class="mt-2 text-sm text-gray-600">Feels Like Adding</p>
            </div>
        </div>

        <div class="mt-20 max-w-2xl mx-auto">
            <p class="text-xl font-semibold">The real win</p>
            <p class="mt-4 text-lg text-gray-700">Faster hiring decisions with clearer evidence — rankings, interview summaries, and standardized outputs your team can trust.</p>
        </div>

        <div class="mt-16 text-sm text-gray-600">
            <p class="font-semibold">Compliance-safe by design</p>
            <ul class="mt-4 space-y-2 inline-block text-left">
                <li>• Human-reviewed outputs</li>
                <li>• No automated hiring decisions</li>
                <li>• Designed with privacy and compliance in mind</li>
            </ul>
        </div>

        <div class="mt-20">
            <a href="pricing.php" class="bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700">View Pricing →</a>
        </div>
    </main>

    <!-- FOOTER -->
    <footer class="max-w-7xl mx-auto px-6 py-12 text-sm text-gray-500 flex justify-between items-center">
        <div>
            <span>FinMox © 2025</span>
            <a href="#" class="ml-4 hover:text-black">Security & Privacy</a>
        </div>
        <div class="flex gap-4 items-center">
            <span>Human‑reviewed outputs</span>
            <span>No automated hiring decisions</span>
            <span>Built for intentional hiring</span>
            <a href="apply.php" class="font-semibold hover:text-black">Apply</a>
            <a href="login.php" class="font-semibold hover:text-black">Sign In</a>
        </div>
    </footer>

</body>
</html>