From 8fa61c25c2f65dd9d192c4479ad76ad18022aec0 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Wed, 17 Dec 2025 23:57:25 +0000
Subject: [PATCH] December 17th,2025 V.27

---
 assets/css/custom.css | 11 +++++++++--
 assets/js/main.js     |  6 ++----
 how_it_works.php      |  2 +-
 pricing.php           |  2 +-
 problem.php           |  2 +-
 product.php           |  8 ++++----
 roi.php               |  2 +-
 7 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index 01bd8f9..35c11a6 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -357,11 +357,18 @@ h3 { font-size: 20px; line-height: 1.5; }
     border-color: transparent;
     color: #6B7280;
     transition: all 0.3s ease;
+    padding: 1rem 1.5rem;
+    font-weight: 600;
+}
+
+#human-in-loop-tabs .tab-button:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
 }
 
 #human-in-loop-tabs .tab-button.active-tab {
-    border-color: #4F46E5;
-    color: #4F46E5;
+    border-color: var(--primary-color);
+    color: var(--primary-color);
     background-color: #F9FAFB;
 }
 
diff --git a/assets/js/main.js b/assets/js/main.js
index f0249ad..54e9f2a 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -11,16 +11,14 @@ document.addEventListener('DOMContentLoaded', function () {
 
             // Deactivate all tabs and hide all content
             tabs.forEach(t => {
-                t.classList.remove('active-tab', 'border-blue-600', 'text-blue-600', 'bg-blue-50');
-                t.classList.add('text-gray-500', 'border-transparent', 'hover:text-blue-600', 'hover:border-blue-600');
+                t.classList.remove('active-tab');
             });
             contents.forEach(c => {
                 c.classList.add('hidden');
             });
 
             // Activate the clicked tab and show its content
-            tab.classList.add('active-tab', 'border-blue-600', 'text-blue-600', 'bg-blue-50');
-            tab.classList.remove('text-gray-500', 'border-transparent', 'hover:text-blue-600', 'hover:border-blue-600');
+            tab.classList.add('active-tab');
             
             const activeContent = tabsContainer.querySelector(`#${target}`);
             if (activeContent) {
diff --git a/how_it_works.php b/how_it_works.php
index 2fc4a87..44d52e0 100644
--- a/how_it_works.php
+++ b/how_it_works.php
@@ -19,7 +19,7 @@
             <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-black font-semibold">How It Works</a>
+            <a href="how_it_works.php" class="text-blue-600 font-semibold">How It Works</a>
             <a href="roi.php" class="text-gray-600 hover:text-black">ROI</a>
             <a href="pricing.php" class="text-gray-600 hover:text-black">Pricing</a>
         </nav>
diff --git a/pricing.php b/pricing.php
index 1343c37..c06da27 100644
--- a/pricing.php
+++ b/pricing.php
@@ -21,7 +21,7 @@
             <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-gray-600 hover:text-black">ROI</a>
-            <a href="pricing.php" class="text-gray-600 hover:text-black font-semibold">Pricing</a>
+            <a href="pricing.php" class="text-blue-600 font-semibold">Pricing</a>
         </nav>
         <div class="flex gap-3">
             <a href="login.php" class="text-sm flex items-center">Sign In</a>
diff --git a/problem.php b/problem.php
index d0af150..28d4ff2 100644
--- a/problem.php
+++ b/problem.php
@@ -20,7 +20,7 @@
         <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 font-semibold">Problem</a>
+            <a href="problem.php" class="text-blue-600 font-semibold">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-gray-600 hover:text-black">ROI</a>
diff --git a/product.php b/product.php
index 8f61e3b..dd8c18f 100644
--- a/product.php
+++ b/product.php
@@ -17,7 +17,7 @@
         <nav class="hidden md:flex gap-8 text-sm">
             <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-indigo-600 font-semibold">Why FinMox</a>
+            <a href="product.php" class="text-blue-600 font-semibold">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-gray-600 hover:text-black">ROI</a>
             <a href="pricing.php" class="text-gray-600 hover:text-black">Pricing</a>
@@ -57,9 +57,9 @@
             <div id="human-in-loop-tabs" class="mt-10 max-w-4xl mx-auto">
                 <!-- Tab Buttons -->
                                         <div class="flex justify-center border-b border-gray-200">
-                                            <button data-tab="automation" class="tab-button active-tab text-base font-semibold py-3 px-6 border-b-2 border-blue-600 text-blue-600 bg-blue-50">Automation</button>
-                                            <button data-tab="ai-outputs" class="tab-button text-base font-semibold py-3 px-6 border-b-2 border-transparent text-gray-500 hover:text-blue-600 hover:border-blue-600">AI Outputs</button>
-                                            <button data-tab="security" class="tab-button text-base font-semibold py-3 px-6 border-b-2 border-transparent text-gray-500 hover:text-blue-600 hover:border-blue-600">Security</button>
+                                            <button data-tab="automation" class="tab-button active-tab">Automation</button>
+                                            <button data-tab="ai-outputs" class="tab-button">AI Outputs</button>
+                                            <button data-tab="security" class="tab-button">Security</button>
                                         </div>                <!-- Tab Content -->
                 <div class="mt-8 text-left">
                     <div id="automation" class="tab-content">
diff --git a/roi.php b/roi.php
index c4edc6d..75fa58e 100644
--- a/roi.php
+++ b/roi.php
@@ -20,7 +20,7 @@
             <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-black font-semibold">ROI</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">