From e339cf466d8a90fe0b2ec041574b054517d61d9e Mon Sep 17 00:00:00 2001
From: Hamza-Ayed <hamzaayedflutter@gmail.com>
Date: Tue, 26 May 2026 22:22:29 +0300
Subject: [PATCH] Deploy: 2026-05-26 22:22:29

---
 backend/public/landing.html | 608 ++++++++++++++++--------------------
 1 file changed, 271 insertions(+), 337 deletions(-)

diff --git a/backend/public/landing.html b/backend/public/landing.html
index 343a085..fb27671 100644
--- a/backend/public/landing.html
+++ b/backend/public/landing.html
@@ -12,20 +12,20 @@
     
     <style>
         :root {
-            --bg-color: #0b071e;
-            --panel-bg: rgba(22, 16, 48, 0.7);
-            --border-color: rgba(255, 255, 255, 0.08);
+            --bg-color: #ffffff;
+            --panel-bg: #f8f9fa;
+            --border-color: #dadce0;
             
-            --primary: #9d4edd;
-            --primary-glow: rgba(157, 78, 221, 0.2);
-            --secondary: #240046;
-            --accent: #00f5d4;
-            --accent-glow: rgba(0, 245, 212, 0.15);
+            --primary: #1a73e8; /* Google Blue */
+            --primary-hover: #1557b0;
+            --primary-glow: rgba(26, 115, 232, 0.08);
             
-            --text-main: #f8f9fa;
-            --text-muted: #b3b3b3;
-            --success: #00f5d4;
-            --warning: #ffb703;
+            --success: #34a853; /* Google Green */
+            --warning: #fbbc05; /* Google Yellow */
+            --danger: #ea4335; /* Google Red */
+            
+            --text-main: #202124;
+            --text-muted: #5f6368;
         }
 
         * {
@@ -43,37 +43,6 @@
             position: relative;
         }
 
-        /* Ambient Glow Backgrounds */
-        .glow-sphere {
-            position: absolute;
-            border-radius: 50%;
-            filter: blur(140px);
-            z-index: -1;
-            pointer-events: none;
-            opacity: 0.6;
-        }
-        .glow-1 {
-            top: -10%;
-            left: -10%;
-            width: 45vw;
-            height: 45vw;
-            background: radial-gradient(circle, var(--primary) 0%, rgba(0,0,0,0) 70%);
-        }
-        .glow-2 {
-            top: 35%;
-            right: -10%;
-            width: 50vw;
-            height: 50vw;
-            background: radial-gradient(circle, var(--accent) 0%, rgba(0,0,0,0) 70%);
-        }
-        .glow-3 {
-            bottom: -5%;
-            left: 10%;
-            width: 35vw;
-            height: 35vw;
-            background: radial-gradient(circle, #5a189a 0%, rgba(0,0,0,0) 70%);
-        }
-
         /* Container & Grid layout */
         .container {
             max-width: 1200px;
@@ -84,9 +53,7 @@
         /* Navbar Styling */
         header {
             border-bottom: 1px solid var(--border-color);
-            backdrop-filter: blur(16px);
-            -webkit-backdrop-filter: blur(16px);
-            background: rgba(11, 7, 30, 0.8);
+            background: #ffffff;
             position: sticky;
             top: 0;
             z-index: 100;
@@ -95,36 +62,33 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            height: 80px;
+            height: 70px;
         }
         .logo {
             display: flex;
             align-items: center;
-            gap: 0.75rem;
+            gap: 0.5rem;
             text-decoration: none;
             color: var(--text-main);
-            font-weight: 800;
-            font-size: 1.6rem;
-            letter-spacing: -0.5px;
+            font-weight: 700;
+            font-size: 1.5rem;
         }
         .logo-icon {
-            width: 42px;
-            height: 42px;
-            background: linear-gradient(135deg, var(--primary), var(--accent));
-            border-radius: 14px;
+            width: 32px;
+            height: 32px;
+            border-radius: 8px;
             display: flex;
             align-items: center;
             justify-content: center;
-            box-shadow: 0 4px 20px rgba(157, 78, 221, 0.4);
         }
         .logo-icon svg {
             width: 24px;
             height: 24px;
-            fill: white;
+            fill: var(--primary);
         }
         .nav-links {
             display: flex;
-            gap: 2rem;
+            gap: 1.75rem;
             list-style: none;
             align-items: center;
         }
@@ -133,58 +97,62 @@
             text-decoration: none;
             font-weight: 600;
             font-size: 0.95rem;
-            transition: color 0.3s ease;
+            transition: color 0.2s ease;
         }
         .nav-links a:hover {
-            color: var(--text-main);
+            color: var(--primary);
         }
         .btn {
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            padding: 0.75rem 1.6rem;
-            border-radius: 12px;
+            padding: 0.6rem 1.25rem;
+            border-radius: 6px;
             font-weight: 700;
             text-decoration: none;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            transition: all 0.2s ease;
             cursor: pointer;
-            border: none;
-            font-size: 0.95rem;
+            border: 1px solid transparent;
+            font-size: 0.9rem;
         }
         .btn-primary {
-            background: linear-gradient(135deg, var(--primary), #e0aaff);
-            color: #0b071e;
-            box-shadow: 0 4px 20px rgba(157, 78, 221, 0.35);
+            background-color: var(--primary);
+            color: #ffffff !important;
         }
         .btn-primary:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 25px rgba(157, 78, 221, 0.5);
-            background: linear-gradient(135deg, #e0aaff, var(--primary));
+            background-color: var(--primary-hover);
         }
         .btn-secondary {
-            background: rgba(255, 255, 255, 0.04);
-            color: var(--text-main);
+            background-color: #ffffff;
+            color: var(--text-muted) !important;
             border: 1px solid var(--border-color);
         }
         .btn-secondary:hover {
-            background: rgba(255, 255, 255, 0.08);
-            border-color: rgba(255, 255, 255, 0.2);
-            transform: translateY(-2px);
+            background-color: #f8f9fa;
+            color: var(--text-main) !important;
         }
         .btn-accent {
-            background: linear-gradient(135deg, var(--accent), #e0aaff);
-            color: #0b071e;
-            box-shadow: 0 4px 20px rgba(0, 245, 212, 0.3);
+            background-color: var(--primary);
+            color: #ffffff !important;
         }
         .btn-accent:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 25px rgba(0, 245, 212, 0.5);
+            background-color: var(--primary-hover);
+        }
+        
+        .nav-links a.btn-primary {
+            color: #ffffff !important;
+        }
+        .nav-links a.btn-secondary {
+            color: var(--text-muted) !important;
+        }
+        .nav-links a.btn-accent {
+            color: #ffffff !important;
         }
 
         /* Hero Section */
         .hero {
-            padding: 6rem 0;
-            position: relative;
+            padding: 5rem 0;
+            background: #ffffff;
         }
         .hero-grid {
             display: grid;
@@ -193,74 +161,65 @@
             align-items: center;
         }
         .hero-content h1 {
-            font-size: 3.5rem;
+            font-size: 3rem;
             font-weight: 800;
-            line-height: 1.25;
+            line-height: 1.3;
             margin-bottom: 1.5rem;
-            background: linear-gradient(to left, #ffffff, #e0aaff, #00f5d4);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+            color: var(--text-main);
         }
+        .hero-content h1 span.highlight-blue { color: var(--primary); }
+        .hero-content h1 span.highlight-green { color: var(--success); }
+        .hero-content h1 span.highlight-yellow { color: var(--warning); }
+        
         .hero-content p {
-            font-size: 1.2rem;
+            font-size: 1.1rem;
             color: var(--text-muted);
             line-height: 1.8;
             margin-bottom: 2.5rem;
         }
         .hero-actions {
             display: flex;
-            gap: 1.25rem;
+            gap: 1rem;
         }
         .hero-visual {
-            position: relative;
             display: flex;
             justify-content: center;
         }
         .mockup-wrapper {
-            position: relative;
-            background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
-            border: 1px solid rgba(255,255,255,0.1);
-            border-radius: 24px;
-            padding: 0.5rem;
-            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-            overflow: hidden;
+            background: #ffffff;
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            padding: 0.35rem;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
             width: 100%;
-            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        .mockup-wrapper:hover {
-            transform: translateY(-5px) scale(1.01);
-            border-color: rgba(157, 78, 221, 0.4);
         }
         .mockup-img {
             width: 100%;
             height: auto;
-            border-radius: 18px;
+            border-radius: 8px;
             display: block;
         }
 
         /* Features Section */
         .features {
-            padding: 6.5rem 0;
+            padding: 5rem 0;
             border-top: 1px solid var(--border-color);
+            background-color: #f8f9fa;
         }
         .section-header {
             text-align: center;
-            max-width: 650px;
-            margin: 0 auto 4.5rem auto;
+            max-width: 600px;
+            margin: 0 auto 3.5rem auto;
         }
         .section-header h2 {
-            font-size: 2.5rem;
-            font-weight: 800;
+            font-size: 2.2rem;
+            font-weight: 700;
             margin-bottom: 1rem;
-            background: linear-gradient(to left, #ffffff, #e0aaff);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+            color: var(--text-main);
         }
         .section-header p {
             color: var(--text-muted);
-            font-size: 1.1rem;
+            font-size: 1.05rem;
             line-height: 1.6;
         }
         .features-grid {
@@ -269,101 +228,188 @@
             gap: 2rem;
         }
         .feature-card {
-            background: var(--panel-bg);
+            background: #ffffff;
             border: 1px solid var(--border-color);
-            border-radius: 24px;
-            padding: 2.5rem;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
+            border-radius: 12px;
+            padding: 2.2rem;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
         }
         .feature-card:hover {
-            transform: translateY(-8px);
-            border-color: rgba(157, 78, 221, 0.4);
-            box-shadow: 0 12px 30px rgba(157, 78, 221, 0.15);
+            transform: translateY(-4px);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
         }
         .feature-icon {
-            width: 60px;
-            height: 60px;
-            border-radius: 14px;
-            background: rgba(157, 78, 221, 0.1);
-            border: 1px solid rgba(157, 78, 221, 0.2);
-            color: var(--primary);
+            width: 48px;
+            height: 48px;
+            border-radius: 10px;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 1.8rem;
-            margin-bottom: 1.5rem;
-            box-shadow: 0 4px 15px rgba(157, 78, 221, 0.1);
-        }
-        .feature-card:nth-child(even) .feature-icon {
-            background: rgba(0, 245, 212, 0.1);
-            border: 1px solid rgba(0, 245, 212, 0.2);
-            color: var(--accent);
-            box-shadow: 0 4px 15px rgba(0, 245, 212, 0.1);
+            font-size: 1.5rem;
+            margin-bottom: 1.25rem;
         }
+        /* Colorful Google-like feature icon backgrounds */
+        .feature-card:nth-child(1) .feature-icon { background: rgba(26, 115, 232, 0.1); color: var(--primary); }
+        .feature-card:nth-child(2) .feature-icon { background: rgba(52, 168, 83, 0.1); color: var(--success); }
+        .feature-card:nth-child(3) .feature-icon { background: rgba(251, 188, 5, 0.1); color: var(--warning); }
+        .feature-card:nth-child(4) .feature-icon { background: rgba(234, 67, 53, 0.1); color: var(--danger); }
+        .feature-card:nth-child(5) .feature-icon { background: rgba(26, 115, 232, 0.1); color: var(--primary); }
+        .feature-card:nth-child(6) .feature-icon { background: rgba(52, 168, 83, 0.1); color: var(--success); }
+
         .feature-card h3 {
-            font-size: 1.35rem;
+            font-size: 1.25rem;
             font-weight: 700;
             margin-bottom: 0.75rem;
             color: var(--text-main);
         }
         .feature-card p {
             color: var(--text-muted);
-            font-size: 0.98rem;
+            font-size: 0.95rem;
             line-height: 1.6;
         }
 
+        /* Interactive Chat Simulator Section */
+        .chat-demo {
+            padding: 5rem 0;
+            background-color: #ffffff;
+            border-top: 1px solid var(--border-color);
+        }
+        .chat-container {
+            max-width: 600px;
+            margin: 0 auto;
+            background: #ffffff;
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+        }
+        .chat-header {
+            background: #f8f9fa;
+            border-bottom: 1px solid var(--border-color);
+            padding: 1rem 1.25rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .chat-header-user {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+        .chat-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background: var(--primary);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #ffffff;
+            font-weight: 700;
+            font-size: 1rem;
+        }
+        .chat-header-info h4 {
+            font-size: 0.95rem;
+            font-weight: 700;
+            color: var(--text-main);
+        }
+        .chat-header-info span {
+            font-size: 0.75rem;
+            color: var(--success);
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+        }
+        .chat-body {
+            height: 300px;
+            padding: 1.25rem;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 0.85rem;
+            background: #ffffff;
+        }
+        .msg {
+            max-width: 80%;
+            padding: 0.75rem 1rem;
+            border-radius: 12px;
+            font-size: 0.92rem;
+            line-height: 1.5;
+        }
+        .msg-in {
+            align-self: flex-start;
+            background: #f1f3f4;
+            color: var(--text-main);
+            border-bottom-right-radius: 4px;
+        }
+        .msg-out {
+            align-self: flex-end;
+            background: #e8f0fe;
+            color: var(--primary);
+            border-bottom-left-radius: 4px;
+        }
+        .chat-footer {
+            padding: 0.85rem 1.25rem;
+            background: #f8f9fa;
+            border-top: 1px solid var(--border-color);
+            display: flex;
+            gap: 0.75rem;
+        }
+        .chat-input {
+            flex-grow: 1;
+            background: #ffffff;
+            border: 1px solid var(--border-color);
+            padding: 0.6rem 1rem;
+            border-radius: 8px;
+            color: var(--text-main);
+            outline: none;
+            font-size: 0.9rem;
+        }
+        .chat-input:focus {
+            border-color: var(--primary);
+        }
+
         /* Pricing Section */
         .pricing {
-            padding: 6.5rem 0;
+            padding: 5rem 0;
             border-top: 1px solid var(--border-color);
+            background-color: #f8f9fa;
         }
         .pricing-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-            gap: 2rem;
-            align-items: stretch;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1.5rem;
             margin: 0 auto;
         }
         .price-card {
-            background: var(--panel-bg);
+            background: #ffffff;
             border: 1px solid var(--border-color);
-            border-radius: 24px;
-            padding: 2.5rem 2rem;
+            border-radius: 12px;
+            padding: 2.2rem 1.5rem;
             text-align: center;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             position: relative;
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        .price-card:hover {
-            transform: translateY(-5px);
-            border-color: rgba(255, 255, 255, 0.15);
         }
         .price-card.featured {
-            border-color: var(--primary);
-            box-shadow: 0 10px 40px rgba(157, 78, 221, 0.15);
-            background: linear-gradient(180deg, rgba(22, 16, 48, 0.9) 0%, rgba(36, 0, 70, 0.6) 100%);
+            border: 2px solid var(--primary);
+            box-shadow: 0 4px 20px rgba(26, 115, 232, 0.08);
         }
         .price-card.featured .popular-tag {
             position: absolute;
             top: -12px;
             left: 50%;
             transform: translateX(-50%);
-            background: linear-gradient(135deg, var(--primary), #e0aaff);
-            color: #0b071e;
-            padding: 0.3rem 1.2rem;
-            border-radius: 30px;
-            font-size: 0.8rem;
-            font-weight: 800;
-            box-shadow: 0 4px 15px rgba(157, 78, 221, 0.4);
+            background: var(--primary);
+            color: #ffffff;
+            padding: 0.25rem 1rem;
+            border-radius: 20px;
+            font-size: 0.75rem;
+            font-weight: 700;
         }
         .price-name {
-            font-size: 1.35rem;
+            font-size: 1.25rem;
             font-weight: 700;
             color: var(--text-main);
             margin-bottom: 0.5rem;
@@ -371,11 +417,11 @@
         .price-desc {
             font-size: 0.85rem;
             color: var(--text-muted);
-            margin-bottom: 1.5rem;
+            margin-bottom: 1.25rem;
         }
         .price-val {
-            font-size: 2.8rem;
-            font-weight: 800;
+            font-size: 2.4rem;
+            font-weight: 700;
             color: var(--text-main);
             margin-bottom: 1.5rem;
             display: flex;
@@ -384,138 +430,37 @@
             gap: 0.25rem;
         }
         .price-val span {
-            font-size: 1.1rem;
+            font-size: 0.95rem;
             font-weight: 600;
             color: var(--text-muted);
         }
         .price-features {
             list-style: none;
-            margin-bottom: 2.5rem;
+            margin-bottom: 2rem;
             text-align: right;
             display: flex;
             flex-direction: column;
-            gap: 0.85rem;
+            gap: 0.75rem;
         }
         .price-features li {
-            font-size: 0.92rem;
-            color: var(--text-main);
+            font-size: 0.9rem;
+            color: var(--text-muted);
             display: flex;
             align-items: center;
-            gap: 0.65rem;
+            gap: 0.5rem;
         }
         .price-features li svg {
             width: 16px;
             height: 16px;
-            fill: var(--accent);
+            fill: var(--success);
             flex-shrink: 0;
         }
 
-        /* Simulated Chat Area */
-        .chat-demo {
-            padding: 6.5rem 0;
-            border-top: 1px solid var(--border-color);
-        }
-        .chat-container {
-            max-width: 650px;
-            margin: 0 auto;
-            background: var(--panel-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 24px;
-            overflow: hidden;
-            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-        }
-        .chat-header {
-            background: rgba(255, 255, 255, 0.03);
-            border-bottom: 1px solid var(--border-color);
-            padding: 1.2rem 1.5rem;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-        .chat-header-user {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-        .chat-avatar {
-            width: 45px;
-            height: 45px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, var(--primary), var(--accent));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #0b071e;
-            font-weight: 800;
-            font-size: 1.2rem;
-        }
-        .chat-header-info h4 {
-            font-size: 1.05rem;
-            font-weight: 700;
-        }
-        .chat-header-info span {
-            font-size: 0.8rem;
-            color: var(--success);
-            display: flex;
-            align-items: center;
-            gap: 0.35rem;
-        }
-        .chat-body {
-            height: 350px;
-            padding: 1.5rem;
-            overflow-y: auto;
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-        }
-        .msg {
-            max-width: 80%;
-            padding: 0.85rem 1.2rem;
-            border-radius: 16px;
-            font-size: 0.95rem;
-            line-height: 1.5;
-        }
-        .msg-in {
-            align-self: flex-start;
-            background: rgba(255, 255, 255, 0.05);
-            color: var(--text-main);
-            border-bottom-right-radius: 4px;
-            border: 1px solid rgba(255, 255, 255, 0.03);
-        }
-        .msg-out {
-            align-self: flex-end;
-            background: linear-gradient(135deg, var(--primary), #7209b7);
-            color: white;
-            border-bottom-left-radius: 4px;
-        }
-        .chat-footer {
-            padding: 1rem 1.5rem;
-            background: rgba(0, 0, 0, 0.2);
-            border-top: 1px solid var(--border-color);
-            display: flex;
-            gap: 1rem;
-        }
-        .chat-input {
-            flex-grow: 1;
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid var(--border-color);
-            padding: 0.75rem 1.2rem;
-            border-radius: 12px;
-            color: white;
-            outline: none;
-            font-size: 0.95rem;
-        }
-        .chat-input:focus {
-            border-color: var(--primary);
-        }
-
         /* Coming Soon / Roadmap Section */
         .roadmap {
-            padding: 6.5rem 0;
+            padding: 5rem 0;
             border-top: 1px solid var(--border-color);
-            background: linear-gradient(180deg, rgba(8,11,17,0) 0%, rgba(157, 78, 221, 0.03) 50%, rgba(8,11,17,0) 100%);
+            background: #ffffff;
         }
         .roadmap-grid {
             display: grid;
@@ -523,97 +468,85 @@
             gap: 2rem;
         }
         .roadmap-card {
-            background: rgba(22, 16, 48, 0.4);
+            background: #f8f9fa;
             border: 1px solid var(--border-color);
-            border-radius: 24px;
-            padding: 2.2rem;
+            border-radius: 12px;
+            padding: 2rem;
             position: relative;
-            overflow: hidden;
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-        }
-        .roadmap-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 3px;
-            background: linear-gradient(90deg, var(--primary), var(--accent));
         }
         .badge-soon {
             position: absolute;
-            top: 1.2rem;
-            left: 1.2rem;
-            background: rgba(255, 183, 3, 0.15);
-            border: 1px solid rgba(255, 183, 3, 0.3);
-            color: var(--warning);
-            padding: 0.25rem 0.75rem;
-            border-radius: 30px;
+            top: 1rem;
+            left: 1rem;
+            background: rgba(251, 188, 5, 0.15);
+            border: 1px solid rgba(251, 188, 5, 0.3);
+            color: #d97706;
+            padding: 0.2rem 0.6rem;
+            border-radius: 20px;
             font-size: 0.75rem;
             font-weight: 700;
         }
         .roadmap-card h3 {
-            font-size: 1.3rem;
+            font-size: 1.25rem;
             font-weight: 700;
-            margin-top: 1.5rem;
-            margin-bottom: 0.75rem;
+            margin-top: 1.25rem;
+            margin-bottom: 0.5rem;
             color: var(--text-main);
         }
         .roadmap-card p {
             color: var(--text-muted);
-            font-size: 0.92rem;
+            font-size: 0.9rem;
             line-height: 1.6;
         }
 
         /* Footer */
         footer {
             border-top: 1px solid var(--border-color);
-            background: #060411;
-            padding: 5rem 0 2rem 0;
+            background: #f8f9fa;
+            padding: 4rem 0 2rem 0;
             color: var(--text-muted);
-            font-size: 0.9rem;
+            font-size: 0.88rem;
         }
         .footer-grid {
             display: grid;
             grid-template-columns: 2fr 1fr 1fr;
             gap: 4rem;
-            margin-bottom: 3.5rem;
+            margin-bottom: 3rem;
         }
         .footer-logo {
-            font-size: 1.5rem;
-            font-weight: 800;
+            font-size: 1.4rem;
+            font-weight: 700;
             color: var(--text-main);
-            margin-bottom: 1.2rem;
+            margin-bottom: 1rem;
             display: flex;
             align-items: center;
             gap: 0.5rem;
         }
         .footer-col h5 {
             color: var(--text-main);
-            font-size: 1.05rem;
+            font-size: 1rem;
             font-weight: 700;
-            margin-bottom: 1.25rem;
+            margin-bottom: 1.1rem;
         }
         .footer-links {
             list-style: none;
             display: flex;
             flex-direction: column;
-            gap: 0.75rem;
+            gap: 0.6rem;
         }
         .footer-links a {
             color: var(--text-muted);
             text-decoration: none;
-            transition: color 0.3s ease;
+            transition: color 0.2s ease;
         }
         .footer-links a:hover {
-            color: var(--text-main);
+            color: var(--primary);
         }
         .copyright {
             text-align: center;
             padding-top: 2rem;
             border-top: 1px solid var(--border-color);
-            color: rgba(255,255,255,0.3);
+            color: var(--text-muted);
         }
 
         /* Responsive adjustments */
@@ -628,7 +561,7 @@
             }
             .footer-grid {
                 grid-template-columns: 1fr;
-                gap: 2.5rem;
+                gap: 2rem;
             }
             .nav-links {
                 display: none;
@@ -638,11 +571,6 @@
 </head>
 <body>
 
-    <!-- Ambient Glowing Spheres -->
-    <div class="glow-sphere glow-1"></div>
-    <div class="glow-sphere glow-2"></div>
-    <div class="glow-sphere glow-3"></div>
-
     <!-- Header / Navbar -->
     <header>
         <div class="container nav-container">
@@ -659,7 +587,7 @@
                 <li><a href="#demo">التجربة التفاعلية</a></li>
                 <li><a href="#coming-soon">قريباً</a></li>
                 <li><a href="/login" class="btn btn-secondary" style="padding: 0.5rem 1.25rem;">تسجيل الدخول</a></li>
-                <li><a href="/register" class="btn btn-accent" style="padding: 0.5rem 1.25rem;">ابدأ مجاناً</a></li>
+                <li><a href="/register" class="btn btn-primary" style="padding: 0.5rem 1.25rem;">ابدأ مجاناً</a></li>
             </ul>
         </div>
     </header>
@@ -671,7 +599,7 @@
                 <h1>أتمتة خدمة العملاء والردود الذكية المتكاملة</h1>
                 <p>منصة نبيه تمنحك إمكانية ربط قنوات الاتصال والواتساب وتشغيل مساعد ذكي مدعوم بـ AI يقوم بقراءة الرسائل والصور والإجابة على العملاء فورياً لزيادة مبيعات متجرك وتفعيل أتمتة الدعم والعمليات بمعدل 5 أضعاف.</p>
                 <div class="hero-actions">
-                    <a href="/register" class="btn btn-accent">ابدأ تجربتك المجانية (14 يوم)</a>
+                    <a href="/register" class="btn btn-primary">ابدأ تجربتك المجانية (14 يوم)</a>
                     <a href="#demo" class="btn btn-secondary">جرب المحاكاة التفاعلية</a>
                 </div>
             </div>
@@ -710,11 +638,23 @@
                     <p>الربط المباشر مع سلة (Salla) و WooCommerce لإرسال تحديثات حالة الطلب تلقائياً وتذكير العملاء بالسلات المتروكة.</p>
                 </div>
                 
+                <div class="feature-card">
+                    <div class="feature-icon">💬</div>
+                    <h3>ربط قنوات ماسنجر وإنستغرام</h3>
+                    <p>استقبل وأرسل الرسائل لصفحات الفيسبوك وحسابات الإنستغرام (Meta APIs) مع تشغيل أتمتة الردود والمحادثات من مكان واحد.</p>
+                </div>
+                
                 <div class="feature-card">
                     <div class="feature-icon">📢</div>
                     <h3>حملات الرسائل الجماعية</h3>
                     <p>أرسل عروضك وحملاتك التسويقية إلى قائمة عملائك بكبسة زر واحدة، مع متابعة فورية لمعدلات التسليم والقراءة.</p>
                 </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">🔍</div>
+                    <h3>تحليل مستندات وصور (OCR)</h3>
+                    <p>استخراج البيانات تلقائياً من الفواتير والبطاقات الشخصية ورخص القيادة ومطابقتها فورياً عبر الذكاء الاصطناعي.</p>
+                </div>
             </div>
         </div>
     </section>
@@ -744,7 +684,7 @@
                 
                 <div class="chat-footer">
                     <input type="text" id="chat-input" class="chat-input" placeholder="مثال: 'كم سعر الباقة الفضية؟' أو 'أريد تجربة الخدمة'" onkeypress="handleKeyPress(event)">
-                    <button class="btn btn-accent" style="padding: 0.5rem 1.25rem;" onclick="sendMessage()">إرسال</button>
+                    <button class="btn btn-primary" style="padding: 0.5rem 1.25rem;" onclick="sendMessage()">إرسال</button>
                 </div>
             </div>
         </div>
@@ -809,7 +749,7 @@
                             <li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> محادثات تفاعلية ومساعد ذكي AI</li>
                         </ul>
                     </div>
-                    <a href="/register" class="btn btn-accent">اشترك الآن</a>
+                    <a href="/register" class="btn btn-primary">اشترك الآن</a>
                 </div>
 
                 <!-- Professional (Plan ID: 3) -->
@@ -843,19 +783,13 @@
             
             <div class="roadmap-grid">
                 <div class="roadmap-card">
-                    <span class="badge-soon">الربع الحالي</span>
+                    <span class="badge-soon">قريباً</span>
                     <h3>بوتات تيليجرام (Telegram)</h3>
                     <p>أتمتة المحادثات والرد التلقائي وإدارة مجموعات وقنوات التيليجرام بمساعد الذكاء الاصطناعي مباشرة.</p>
                 </div>
                 
                 <div class="roadmap-card">
-                    <span class="badge-soon">الربع الحالي</span>
-                    <h3>ماسنجر وإنستغرام (Meta APIs)</h3>
-                    <p>استقبال وإرسال الرسائل لصفحات الفيسبوك وحسابات الإنستغرام وإطلاق ردود ذكية ومسارات حجز تلقائية.</p>
-                </div>
-                
-                <div class="roadmap-card">
-                    <span class="badge-soon">قريباً جداً</span>
+                    <span class="badge-soon">قريباً</span>
                     <h3>تكامل شوبيفاي المباشر (Shopify)</h3>
                     <p>تزامن فوري للمنتجات وحالة الطلب وتتبع الشحنات لعملاء متاجر شوبيفاي لتقليل تذاكر الدعم الفني.</p>
                 </div>
@@ -868,7 +802,7 @@
         <div class="container footer-grid">
             <div class="footer-col">
                 <div class="footer-logo">
-                    <span style="font-weight: 800; color: white;">نبيه</span>
+                    <span style="font-weight: 800; color: var(--text-main);">نبيه</span>
                 </div>
                 <p style="line-height: 1.6; margin-bottom: 1.5rem;">منصة المحادثة الفورية المتكاملة لربط أعمالك مع الذكاء الاصطناعي وأتمتة خدمة العملاء على مدار الساعة.</p>
             </div>