From 08816375b1b16480e8969c7a77060792cc5ab15a Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Fri, 19 Dec 2025 13:36:07 +0000
Subject: [PATCH] 12/19/25 V.8

---
 index.php | 143 ++++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 101 insertions(+), 42 deletions(-)

diff --git a/index.php b/index.php
index a0564b2..bc71550 100644
--- a/index.php
+++ b/index.php
@@ -107,64 +107,123 @@
             </section>
         </section>
 
-        <!-- FEATURES PAGE -->
-        <section id="page-features" class="page fade hidden">
-            <section class="panel-strong p-8 lg:p-10">
-                <div class="max-w-3xl">
-                    <div class="inline-flex items-center gap-2 rounded-full border border-black/10 bg-white/70 px-3 py-1 text-xs">
-                        <span class="h-2 w-2 rounded-full bg-black"></span>
-                        What FinMox does
-                    </div>
-                    <h1 class="mt-5 text-4xl font-extrabold tracking-tight">
-                        Hiring execution, standardized — not “another ATS.”
-                    </h1>
-                    <p class="mt-4 text-gray-600">
-                        FinMox enforces role clarity, structured qualification, and automatic outputs so teams move faster without adding risk, headcount, or chaos.
-                    </p>
+<!-- ========================= FEATURES PAGE ========================= -->
+<section id="page-features" class="page fade hidden">
+    <section class="panel-strong p-8 lg:p-10">
+        <!-- Header -->
+        <div class="grid lg:grid-cols-12 gap-10 items-start">
+            <div class="lg:col-span-5">
+                <div class="chip inline-flex px-3 py-1 text-xs">Features</div>
+                <h1 class="mt-5 text-4xl font-extrabold tracking-tight">
+                    Execution features that actually move hiring forward.
+                </h1>
+                <p class="mt-5 text-gray-700">
+                    FinMox is built around one goal: <strong>control hiring execution</strong>. That means locked criteria, structured evaluation, automated movement, and defensible records — without adding admin work.
+                </p>
+                <div class="mt-7 panel p-6">
+                    <div class="text-sm font-semibold">What you get from day one</div>
+                    <ul class="mt-3 text-sm text-gray-700 space-y-2">
+                        <li>✔ Criteria locking + version history (no drift)</li>
+                        <li>✔ Consistent scoring + structured qualification</li>
+                        <li>✔ Candidate movement automation (no chasing)</li>
+                        <li>✔ Audit-friendly documentation as a byproduct of execution</li>
+                    </ul>
                 </div>
-                <div class="mt-10 grid md:grid-cols-3 gap-10">
+                <div class="mt-7 flex flex-wrap gap-3">
+                    <a href="#apply" onclick="openPage('apply'); return false;" class="bg-black text-white px-6 py-3 rounded-2xl text-sm hoverlift">
+                        Apply for access
+                    </a>
+                    <a href="#faq" onclick="openPage('faq'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift">
+                        Read FAQ →
+                    </a>
+                </div>
+            </div>
+            <!-- Right: Feature cards -->
+            <div class="lg:col-span-7">
+                <div class="grid md:grid-cols-3 gap-6">
                     <!-- Candidate Ranking -->
-                    <div class="rounded-3xl bg-[#FAF8F6] p-8 shadow-sm border border-black/5">
-                        <img src="YOUR_APPWIZZY_IMAGE_URL_candidate-ranking.png" class="rounded-2xl mb-6 w-full" alt="Candidate ranking mockup" />
-                        <h3 class="text-xl font-semibold">Candidate Ranking</h3>
-                        <p class="text-gray-600 mt-2">
+                    <div class="panel p-6 hoverlift">
+                        <div class="rounded-2xl mb-6 bg-white border border-black/10 p-4"> <div class="text-xs text-gray-500 mb-3">Candidate Ranking</div> <div class="space-y-2"> <div class="flex justify-between items-center rounded-xl border px-3 py-2"> <span class="text-sm">A. Johnson</span> <span class="text-sm font-semibold">86</span> </div> <div class="flex justify-between items-center rounded-xl border px-3 py-2"> <span class="text-sm">M. Patel</span> <span class="text-sm font-semibold">82</span> </div> <div class="flex justify-between items-center rounded-xl border px-3 py-2 opacity-60"> <span class="text-sm">S. Nguyen</span> <span class="text-sm">74</span> </div> </div> </div>
+                        <h3 class="text-lg font-semibold">Candidate Ranking</h3>
+                        <p class="mt-2 text-sm text-gray-600">
                             Every candidate is scored against your role criteria so decisions don’t drift.
                         </p>
-                        <div class="flex flex-wrap gap-2 mt-4 text-sm text-gray-500">
-                            <span class="bg-white rounded-full px-3 py-1 border border-black/5">Parsing</span>
-                            <span class="bg-white rounded-full px-3 py-1 border border-black/5">Scoring</span>
-                            <span class="bg-white rounded-full px-3 py-1 border border-black/5">Shortlists</span>
+                        <div class="mt-4 flex flex-wrap gap-2 text-xs text-gray-600">
+                            <span class="chip px-3 py-1">Parsing</span>
+                            <span class="chip px-3 py-1">Scoring</span>
+                            <span class="chip px-3 py-1">Shortlists</span>
                         </div>
                     </div>
                     <!-- Interview Automation -->
-                    <div class="rounded-3xl bg-[#FAF8F6] p-8 shadow-sm border border-black/5">
-                        <img src="YOUR_APPWIZZY_IMAGE_URL_interview-automation.png" class="rounded-2xl mb-6 w-full" alt="Interview automation mockup" />
-                        <h3 class="text-xl font-semibold">Interview Automation</h3>
-                        <p class="text-gray-600 mt-2">
+                    <div class="panel p-6 hoverlift">
+                        <div class="rounded-2xl mb-6 bg-white border border-black/10 p-4"> <div class="text-xs text-gray-500 mb-3">Interview Automation</div> <div class="space-y-3"> <div class="rounded-xl border px-3 py-2 text-sm"> Question set generated </div> <div class="rounded-xl border px-3 py-2 text-sm"> Interview summary created </div> <div class="rounded-xl border px-3 py-2 text-sm font-semibold"> Recommendation: Proceed </div> </div> </div>
+                        <h3 class="text-lg font-semibold">Interview Automation</h3>
+                        <p class="mt-2 text-sm text-gray-600">
                             Role-specific questions, summaries, and recommendations — reviewable and exportable.
                         </p>
-                        <div class="flex flex-wrap gap-2 mt-4 text-sm text-gray-500">
-                            <span class="bg-white rounded-full px-3 py-1 border border-black/5">Question sets</span>
-                            <span class="bg-white rounded-full px-3 py-1 border border-black/5">Summaries</span>
-                            <span class="bg-white rounded-full px-3 py-1 border border-black/5">Recommendations</span>
+                        <div class="mt-4 flex flex-wrap gap-2 text-xs text-gray-600">
+                            <span class="chip px-3 py-1">Question sets</span>
+                            <span class="chip px-3 py-1">Summaries</span>
+                            <span class="chip px-3 py-1">Recommendations</span>
                         </div>
                     </div>
                     <!-- Compliance & Analytics -->
-                    <div class="rounded-3xl bg-[#FAF8F6] p-8 shadow-sm border border-black/5">
-                        <img src="YOUR_APPWIZZY_IMAGE_URL_compliance-analytics.png" class="rounded-2xl mb-6 w-full" alt="Compliance and analytics mockup" />
-                        <h3 class="text-xl font-semibold">Compliance & Analytics</h3>
-                        <p class="text-gray-600 mt-2">
-                            Track performance, risk, and compliance in real-time without manual data entry.
+                    <div class="panel p-6 hoverlift">
+                        <div class="rounded-2xl mb-6 bg-white border border-black/10 p-4"> <div class="text-xs text-gray-500 mb-3">Compliance & Analytics</div> <div class="space-y-3"> <div class="rounded-xl border px-3 py-2 text-sm"> Decision log updated </div> <div class="rounded-xl border px-3 py-2 text-sm"> Audit trail exported </div> <div class="rounded-xl border px-3 py-2 text-sm font-semibold"> Bottleneck identified </div> </div> </div>
+                        <h3 class="text-lg font-semibold">Compliance & Analytics</h3>
+                        <p class="mt-2 text-sm text-gray-600">
+                            Automatic decision trails + execution analytics so you can defend outcomes and fix bottlenecks.
                         </p>
-                        <div class="flex flex-wrap gap-2 mt-4 text-sm text-gray-500">
-                            <span class="bg-white rounded-full px-3 py-1 border border-black/5">Dashboards</span>
-                            <span class="bg-white rounded-full px-3 py-1 border border-black/5">Audit trails</span>
-                            <span class="bg-white rounded-full px-3 py-1 border border-black/5">Alerts</span>
+                        <div class="mt-4 flex flex-wrap gap-2 text-xs text-gray-600">
+                            <span class="chip px-3 py-1">Decision log</span>
+                            <span class="chip px-3 py-1">Audit exports</span>
+                            <span class="chip px-3 py-1">Bottleneck insights</span>
                         </div>
                     </div>
+                </div> <!-- /grid -->
+                <!-- Supporting callouts -->
+                <div class="mt-6 panel p-6">
+                    <div class="text-sm font-semibold">What “execution control” means in practice</div>
+                    <div class="mt-4 grid sm:grid-cols-2 gap-4">
+                        <div class="panel-strong p-5">
+                            <div class="text-xs text-gray-500">Criteria is locked</div>
+                            <div class="mt-2 text-sm text-gray-700">
+                                Roles don’t silently change mid-process. If criteria changes, it’s versioned and recorded.
+                            </div>
+                        </div>
+                        <div class="panel-strong p-5">
+                            <div class="text-xs text-gray-500">Overrides are captured</div>
+                            <div class="mt-2 text-sm text-gray-700">
+                                If someone chooses a candidate that scored lower, FinMox requires rationale for defensibility.
+                            </div>
+                        </div>
+                        <div class="panel-strong p-5">
+                            <div class="text-xs text-gray-500">Movement is automated</div>
+                            <div class="mt-2 text-sm text-gray-700">
+                                Follow-ups, handoffs, and reminders reduce drop-off and stalled candidates.
+                            </div>
+                        </div>
+                        <div class="panel-strong p-5">
+                            <div class="text-xs text-gray-500">Records are automatic</div>
+                            <div class="mt-2 text-sm text-gray-700">
+                                If it happened in FinMox, it’s already documented — no extra admin work.
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-6 flex flex-wrap gap-3">
+                        <a href="#how" onclick="openPage('how'); return false;" class="bg-black text-white px-6 py-3 rounded-2xl text-sm hoverlift">
+                            See how it works →
+                        </a>
+                        <a href="#apply" onclick="openPage('apply'); return false;" class="chip px-6 py-3 rounded-2xl text-sm hoverlift">
+                            Apply for access
+                        </a>
+                    </div>
                 </div>
-            </section>
-        </section>
+            </div> <!-- /Right Column -->
+        </div> <!-- /Grid -->
+    </section>
+</section>
+<!-- ========================= END FEATURES PAGE ========================= -->
 
                 <!-- ========================= PROBLEM PAGE ========================= -->
         <section id="page-problem" class="page fade hidden">