From d3e1072ae215bf148f9e5260847372a558ed1358 Mon Sep 17 00:00:00 2001
From: Inkithai <108919130+Inkithai@users.noreply.github.com>
Date: Sat, 25 Jul 2026 17:33:50 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=87=B1=F0=9F=87=B0=20Customize=20Rout?=
 =?UTF-8?q?eIQ=20for=20Sri=20Lanka=20=E2=80=94=20Colombo=20bus=20routes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace Indian cities (Mumbai, Delhi, Pune, Goa, etc.) with Sri Lankan destinations (Colombo, Kandy, Galle, Negombo, Matara, Jaffna, Nuwara Eliya)
- Add 4 Colombo expressway corridor polylines on map (A1 Kandy, E01 Galle, A3 Negombo, Southern Matara)
- Add 13 real Colombo-area bus stops with accurate GPS coordinates
- Add route legend overlay to BusMapPreview for corridor identification
- Update AddBusForm default coordinates from Delhi to Colombo (6.9271, 79.8612)
- Update Contact section: +94 phone, Colombo 01 head office
- Update Hero trending destinations and search placeholders to SL cities
- Update CustomerBooking placeholders to Colombo/Kandy
- Update Footer branding to RouteIQ Sri Lanka
- Create backend/seeds/colomboRoutes.js: 8 real routes + 12 buses with SL registration numbers (WP-CA, SP-GA, etc.)
- Add npm seed:colombo script
- Update backend tests (Haversine) to use Colombo→Kadawatha
- Update README with Sri Lanka customization section and seed instructions
- Update server.js startup message to reference Colombo

Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
---
 README.md                                 |  22 ++-
 backend/package.json                      |   3 +-
 backend/seeds/colomboRoutes.js            | 194 ++++++++++++++++++++++
 backend/server.js                         |   4 +-
 backend/tests/api.test.js                 |   4 +-
 frontend/src/components/AddBusForm.jsx    |  12 +-
 frontend/src/components/BusMapPreview.jsx |  86 +++++++++-
 frontend/src/components/Contact.jsx       |   4 +-
 frontend/src/components/Footer.jsx        |   4 +-
 frontend/src/components/Hero.jsx          |  10 +-
 frontend/src/pages/CustomerBooking.jsx    |   4 +-
 11 files changed, 317 insertions(+), 30 deletions(-)
 create mode 100644 backend/seeds/colomboRoutes.js

diff --git a/README.md b/README.md
index 3ec2450..3e6f4bb 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,19 @@
 
 **RouteIQ** is an enterprise-grade, full-stack transit management, real-time satellite vehicle tracking, and intelligent seat reservation system. Designed as a SaaS-ready multi-tenant platform, it features low-latency WebSocket coordinate streaming, AI-driven traffic arrival estimation, mobile driver location broadcasting, Stripe card checkout, and PWA offline ticket vault storage.
 
+### 🇱🇰 Sri Lanka — Colombo Focus
+
+This build is customized for **Sri Lanka's Western Province** with Colombo as the central transit hub:
+
+- **Pre-seeded Colombo routes**: Colombo Fort ↔ Kandy, Galle, Negombo, Matara, Nuwara Eliya, Jaffna, Gampaha & local Kadawatha corridor
+- **Real Colombo bus stops** with accurate GPS coordinates (Fort, Pettah, Kadawatha, Katunayake Airport, Wellawatte, Panadura, Kalutara, Galle, Matara, etc.)
+- **Multi-corridor map overlays**: A1 Highway, E01 Southern Expressway, A3 Negombo Road & Southern coastal route — each in a distinct color
+- **Sri Lankan Rupee (LKR) pricing** across booking and seat selection
+- **Sri Lankan phone numbers** (+94) and local operator contact details
+- **Trilingual i18n**: English, සිංහල (Sinhala), தமிழ் (Tamil)
+- **Sri Lankan bus registration format** (e.g. `WP-CA-1001`, `SP-GA-1501`)
+- **Realistic SLTB & private operator route names** with distance/duration tuned for local traffic conditions
+
 ---
 
 ## 🌟 Key Platform Features
@@ -121,7 +134,14 @@ STRIPE_SECRET_KEY=sk_test_mock_stripe_key
 VITE_API_BASE_URL=http://localhost:5000
 ```
 
-### 3. Run Development Servers
+### 3. Seed Colombo Routes & Buses
+```bash
+cd backend
+npm run seed:colombo
+```
+This inserts **8 real Colombo transit routes** (Fort → Kandy, Galle, Negombo, Matara, Nuwara Eliya, Jaffna, Gampaha, Kadawatha local) with accurate GPS waypoints, and **12 sample buses** with Sri Lankan registration numbers.
+
+### 4. Run Development Servers
 ```bash
 # Terminal 1: Backend API & WebSocket Server
 cd backend
diff --git a/backend/package.json b/backend/package.json
index 93551a3..55f7472 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "start": "node server.js",
     "dev": "nodemon server.js",
-    "test": "node --test"
+    "test": "node --test",
+    "seed:colombo": "node seeds/colomboRoutes.js"
   },
   "dependencies": {
     "bcryptjs": "^2.4.3",
diff --git a/backend/seeds/colomboRoutes.js b/backend/seeds/colomboRoutes.js
new file mode 100644
index 0000000..56923d4
--- /dev/null
+++ b/backend/seeds/colomboRoutes.js
@@ -0,0 +1,194 @@
+/**
+ * Seed script: Colombo Metropolitan Bus Routes
+ * Run: node seeds/colomboRoutes.js
+ * Requires: MONGO_URI in .env
+ */
+require("dotenv").config();
+const mongoose = require("mongoose");
+const Route = require("../models/Route");
+const Bus = require("../models/Bus");
+const connectDb = require("../config/db");
+
+const COLOMBO_ROUTES = [
+  {
+    routeName: "Colombo Fort → Kandy",
+    origin: "Colombo Fort",
+    destination: "Kandy",
+    distanceKm: 116,
+    estimatedDurationMinutes: 150,
+    farePrice: 520,
+    active: true,
+    stops: [
+      { name: "Colombo Fort Bus Station", latitude: 6.9271, longitude: 79.8612, sequenceOrder: 1 },
+      { name: "Pettah Bus Stand", latitude: 6.9487, longitude: 79.8593, sequenceOrder: 2 },
+      { name: "Kadawatha Interchange", latitude: 7.0840, longitude: 79.9926, sequenceOrder: 3 },
+      { name: "Nittambuwa Station", latitude: 7.2000, longitude: 79.9800, sequenceOrder: 4 },
+      { name: "Mawanella Central", latitude: 7.2483, longitude: 80.3458, sequenceOrder: 5 },
+      { name: "Kandy Goods Shed", latitude: 7.2906, longitude: 80.6337, sequenceOrder: 6 },
+    ],
+  },
+  {
+    routeName: "Colombo Fort → Galle",
+    origin: "Colombo Fort",
+    destination: "Galle",
+    distanceKm: 119,
+    estimatedDurationMinutes: 135,
+    farePrice: 480,
+    active: true,
+    stops: [
+      { name: "Colombo Fort Bus Station", latitude: 6.9271, longitude: 79.8612, sequenceOrder: 1 },
+      { name: "Wellawatte Junction", latitude: 6.8890, longitude: 79.8531, sequenceOrder: 2 },
+      { name: "Panadura Bus Stand", latitude: 6.7905, longitude: 79.9057, sequenceOrder: 3 },
+      { name: "Kalutara South", latitude: 6.6833, longitude: 79.9000, sequenceOrder: 4 },
+      { name: "Beruwala", latitude: 6.5833, longitude: 80.1500, sequenceOrder: 5 },
+      { name: "Galle Main Stand", latitude: 6.0535, longitude: 80.2208, sequenceOrder: 6 },
+    ],
+  },
+  {
+    routeName: "Colombo Fort → Negombo",
+    origin: "Colombo Fort",
+    destination: "Negombo",
+    distanceKm: 37,
+    estimatedDurationMinutes: 55,
+    farePrice: 180,
+    active: true,
+    stops: [
+      { name: "Colombo Fort Bus Station", latitude: 6.9271, longitude: 79.8612, sequenceOrder: 1 },
+      { name: "Ja-Ela Junction", latitude: 7.0033, longitude: 79.8833, sequenceOrder: 2 },
+      { name: "Seeduwa", latitude: 7.0833, longitude: 79.8833, sequenceOrder: 3 },
+      { name: "Katunayake Airport", latitude: 7.1500, longitude: 79.8500, sequenceOrder: 4 },
+      { name: "Negombo Bus Stand", latitude: 7.2100, longitude: 79.8300, sequenceOrder: 5 },
+    ],
+  },
+  {
+    routeName: "Colombo Fort → Matara",
+    origin: "Colombo Fort",
+    destination: "Matara",
+    distanceKm: 160,
+    estimatedDurationMinutes: 180,
+    farePrice: 650,
+    active: true,
+    stops: [
+      { name: "Colombo Fort Bus Station", latitude: 6.9271, longitude: 79.8612, sequenceOrder: 1 },
+      { name: "Kalutara South", latitude: 6.6833, longitude: 79.9000, sequenceOrder: 2 },
+      { name: "Ambalangoda", latitude: 6.4500, longitude: 80.0500, sequenceOrder: 3 },
+      { name: "Hikkaduwa", latitude: 6.2500, longitude: 80.1000, sequenceOrder: 4 },
+      { name: "Galle Main Stand", latitude: 6.0535, longitude: 80.2208, sequenceOrder: 5 },
+      { name: "Matara Bus Complex", latitude: 5.9485, longitude: 80.5353, sequenceOrder: 6 },
+    ],
+  },
+  {
+    routeName: "Colombo Fort → Nuwara Eliya",
+    origin: "Colombo Fort",
+    destination: "Nuwara Eliya",
+    distanceKm: 180,
+    estimatedDurationMinutes: 240,
+    farePrice: 780,
+    active: true,
+    stops: [
+      { name: "Colombo Fort Bus Station", latitude: 6.9271, longitude: 79.8612, sequenceOrder: 1 },
+      { name: "Kadawatha Interchange", latitude: 7.0840, longitude: 79.9926, sequenceOrder: 2 },
+      { name: "Kandy Goods Shed", latitude: 7.2906, longitude: 80.6337, sequenceOrder: 3 },
+      { name: "Peradeniya Junction", latitude: 7.2733, longitude: 80.5833, sequenceOrder: 4 },
+      { name: "Hatton", latitude: 6.8889, longitude: 80.5833, sequenceOrder: 5 },
+      { name: "Nuwara Eliya Bus Stand", latitude: 6.9493, longitude: 80.7888, sequenceOrder: 6 },
+    ],
+  },
+  {
+    routeName: "Colombo Fort → Jaffna",
+    origin: "Colombo Fort",
+    destination: "Jaffna",
+    distanceKm: 397,
+    estimatedDurationMinutes: 480,
+    farePrice: 1250,
+    active: true,
+    stops: [
+      { name: "Colombo Fort Bus Station", latitude: 6.9271, longitude: 79.8612, sequenceOrder: 1 },
+      { name: "Kadawatha Interchange", latitude: 7.0840, longitude: 79.9926, sequenceOrder: 2 },
+      { name: "Kurunegala", latitude: 7.4863, longitude: 80.3647, sequenceOrder: 3 },
+      { name: "Anuradhapura", latitude: 8.3114, longitude: 80.4037, sequenceOrder: 4 },
+      { name: "Vavuniya", latitude: 8.7380, longitude: 80.4770, sequenceOrder: 5 },
+      { name: "Jaffna Bus Stand", latitude: 9.6615, longitude: 80.0255, sequenceOrder: 6 },
+    ],
+  },
+  {
+    routeName: "Colombo Pettah → Kadawatha (Local)",
+    origin: "Colombo Pettah",
+    destination: "Kadawatha",
+    distanceKm: 16,
+    estimatedDurationMinutes: 35,
+    farePrice: 80,
+    active: true,
+    stops: [
+      { name: "Colombo Pettah Stand", latitude: 6.9487, longitude: 79.8593, sequenceOrder: 1 },
+      { name: "Maradana", latitude: 6.9328, longitude: 79.8742, sequenceOrder: 2 },
+      { name: "Kelaniya Temple", latitude: 6.9567, longitude: 79.9267, sequenceOrder: 3 },
+      { name: "Kiribathgoda", latitude: 6.9700, longitude: 79.9300, sequenceOrder: 4 },
+      { name: "Kadawatha Interchange", latitude: 7.0840, longitude: 79.9926, sequenceOrder: 5 },
+    ],
+  },
+  {
+    routeName: "Colombo Fort → Gampaha",
+    origin: "Colombo Fort",
+    destination: "Gampaha",
+    distanceKm: 33,
+    estimatedDurationMinutes: 55,
+    farePrice: 150,
+    active: true,
+    stops: [
+      { name: "Colombo Fort Bus Station", latitude: 6.9271, longitude: 79.8612, sequenceOrder: 1 },
+      { name: "Kelaniya Temple", latitude: 6.9567, longitude: 79.9267, sequenceOrder: 2 },
+      { name: "Kiribathgoda", latitude: 6.9700, longitude: 79.9300, sequenceOrder: 3 },
+      { name: "Kadawatha Interchange", latitude: 7.0840, longitude: 79.9926, sequenceOrder: 4 },
+      { name: "Gampaha Bus Stand", latitude: 7.0872, longitude: 80.0144, sequenceOrder: 5 },
+    ],
+  },
+];
+
+// Sample bus fleet seeded on each route
+const COLOMBO_BUSES = [
+  { busNumber: "WP-CA-1001", route: "Colombo Fort → Kandy", driverName: "Kumara Perera", driverContact: "+94771234001", capacity: 45, busType: "AC", status: "Active", latitude: 6.9271, longitude: 79.8612, speedKmph: 55 },
+  { busNumber: "WP-CA-1002", route: "Colombo Fort → Kandy", driverName: "Sunil Jayawardena", driverContact: "+94771234002", capacity: 45, busType: "Non-AC", status: "Active", latitude: 7.0840, longitude: 79.9926, speedKmph: 45 },
+  { busNumber: "WP-CA-2001", route: "Colombo Fort → Galle", driverName: "Ruwan Fernando", driverContact: "+94771234003", capacity: 50, busType: "AC", status: "Active", latitude: 6.6833, longitude: 79.9000, speedKmph: 60 },
+  { busNumber: "SP-GA-1501", route: "Colombo Fort → Galle", driverName: "Anura Bandara", driverContact: "+94771234004", capacity: 50, busType: "Express", status: "On Route", latitude: 6.0535, longitude: 80.2208, speedKmph: 65 },
+  { busNumber: "WP-CA-3001", route: "Colombo Fort → Negombo", driverName: "Dinesh Silva", driverContact: "+94771234005", capacity: 40, busType: "Non-AC", status: "Active", latitude: 7.0033, longitude: 79.8833, speedKmph: 40 },
+  { busNumber: "WP-CA-3002", route: "Colombo Fort → Negombo", driverName: "Mahinda Rajapakshe", driverContact: "+94771234006", capacity: 40, busType: "AC", status: "Active", latitude: 7.1500, longitude: 79.8500, speedKmph: 50 },
+  { busNumber: "SP-MT-4001", route: "Colombo Fort → Matara", driverName: "Prasanna Kumara", driverContact: "+94771234007", capacity: 50, busType: "Express", status: "On Route", latitude: 6.2500, longitude: 80.1000, speedKmph: 70 },
+  { busNumber: "CP-NE-5001", route: "Colombo Fort → Nuwara Eliya", driverName: "Saman Wijesinghe", driverContact: "+94771234008", capacity: 45, busType: "AC", status: "Active", latitude: 7.2906, longitude: 80.6337, speedKmph: 40 },
+  { busNumber: "NP-JF-6001", route: "Colombo Fort → Jaffna", driverName: "Vijaya Rajan", driverContact: "+94771234009", capacity: 50, busType: "Sleeper", status: "Active", latitude: 8.3114, longitude: 80.4037, speedKmph: 65 },
+  { busNumber: "WP-LC-7001", route: "Colombo Pettah → Kadawatha (Local)", driverName: "Nimal de Silva", driverContact: "+94771234010", capacity: 55, busType: "Non-AC", status: "Active", latitude: 6.9487, longitude: 79.8593, speedKmph: 30 },
+  { busNumber: "WP-LC-7002", route: "Colombo Pettah → Kadawatha (Local)", driverName: "Asanka Gunasekara", driverContact: "+94771234011", capacity: 55, busType: "Non-AC", status: "Active", latitude: 6.9567, longitude: 79.9267, speedKmph: 35 },
+  { busNumber: "WP-GP-8001", route: "Colombo Fort → Gampaha", driverName: "Lakshman Peris", driverContact: "+94771234012", capacity: 45, busType: "Non-AC", status: "Active", latitude: 7.0872, longitude: 80.0144, speedKmph: 45 },
+];
+
+async function seed() {
+  await connectDb();
+
+  // Clear existing demo data
+  await Route.deleteMany({});
+  await Bus.deleteMany({});
+  console.log("🧹 Cleared existing routes and buses");
+
+  // Insert routes
+  const routes = await Route.insertMany(COLOMBO_ROUTES);
+  console.log(`✅ Inserted ${routes.length} Colombo routes`);
+
+  // Link buses to routes
+  const busesWithRouteId = COLOMBO_BUSES.map((bus) => {
+    const route = routes.find((r) => r.routeName === bus.route);
+    return { ...bus, routeId: route ? route._id : null };
+  });
+
+  const buses = await Bus.insertMany(busesWithRouteId);
+  console.log(`✅ Inserted ${buses.length} buses on Colombo routes`);
+
+  console.log("\n🚍 Seeded Colombo routes:");
+  routes.forEach((r) => console.log(`   • ${r.routeName} (${r.distanceKm} km, LKR ${r.farePrice})`));
+
+  process.exit(0);
+}
+
+seed().catch((err) => {
+  console.error("❌ Seed failed:", err);
+  process.exit(1);
+});
diff --git a/backend/server.js b/backend/server.js
index f373048..983a11b 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -79,7 +79,7 @@ app.get("/api/health", (req, res) => {
 });
 
 app.get("/", (req, res) => {
-  res.send("✅ RouteIQ Engine Engine 2.0 Running & Operational");
+  res.send("✅ RouteIQ Colombo — Sri Lanka Smart Transit Engine 2.0 Running & Operational");
 });
 
 // ⚡ Socket.IO Integration
@@ -117,7 +117,7 @@ app.use(errorHandler);
 
 const PORT = process.env.PORT || 5000;
 server.listen(PORT, () => {
-  console.log(`🚀 Busgo Engine 2.0 server listening on port ${PORT}`);
+  console.log(`🚀 RouteIQ Colombo Engine 2.0 server listening on port ${PORT}`);
 });
 
 module.exports = { app, server };
diff --git a/backend/tests/api.test.js b/backend/tests/api.test.js
index 0f96b02..d5e1ffe 100644
--- a/backend/tests/api.test.js
+++ b/backend/tests/api.test.js
@@ -26,7 +26,7 @@ assert.strictEqual(decoded.email, 'test@routeiq.io', 'JWT Email mismatch');
 assert.strictEqual(decoded.role, 'customer', 'JWT Role mismatch');
 console.log('  ✅ JWT Token Generation & Verification: PASSED');
 
-// 3. Haversine Distance Formula Test (Delhi to Noida ~20km)
+// 3. Haversine Distance Formula Test (Colombo Fort → Kadawatha ~20km)
 function calculateHaversineDistance(lat1, lon1, lat2, lon2) {
   const R = 6371;
   const dLat = ((lat2 - lat1) * Math.PI) / 180;
@@ -41,7 +41,7 @@ function calculateHaversineDistance(lat1, lon1, lat2, lon2) {
   return R * c;
 }
 
-const distance = calculateHaversineDistance(28.6139, 77.2090, 28.5355, 77.3910);
+const distance = calculateHaversineDistance(6.9271, 79.8612, 7.0840, 79.9926);
 assert.ok(distance > 15 && distance < 25, `Haversine distance out of expected range: ${distance} km`);
 console.log(`  ✅ Spherical Haversine GPS Distance Algorithm (${distance.toFixed(2)} km): PASSED`);
 
diff --git a/frontend/src/components/AddBusForm.jsx b/frontend/src/components/AddBusForm.jsx
index 41a48da..d6be3e6 100644
--- a/frontend/src/components/AddBusForm.jsx
+++ b/frontend/src/components/AddBusForm.jsx
@@ -11,8 +11,8 @@ export default function AddBusForm({ addBusToList }) {
     busNumber: "",
     driverName: "",
     route: "",
-    latitude: "28.6139",
-    longitude: "77.2090",
+    latitude: "6.9271",
+    longitude: "79.8612",
     busType: "AC",
   });
   const [error, setError] = useState("");
@@ -35,8 +35,8 @@ export default function AddBusForm({ addBusToList }) {
         busNumber: "",
         driverName: "",
         route: "",
-        latitude: "28.6139",
-        longitude: "77.2090",
+        latitude: "6.9271",
+        longitude: "79.8612",
         busType: "AC",
       });
       setError("");
@@ -65,7 +65,7 @@ export default function AddBusForm({ addBusToList }) {
           <input
             type="text"
             required
-            placeholder="e.g. BUS-808"
+            placeholder="e.g. WP-CA-1001"
             value={form.busNumber}
             onChange={(e) => setForm({ ...form, busNumber: e.target.value })}
             className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-rose-500"
@@ -89,7 +89,7 @@ export default function AddBusForm({ addBusToList }) {
           <input
             type="text"
             required
-            placeholder="e.g. City Center → Airport"
+            placeholder="e.g. Colombo Fort → Katunayake Airport"
             value={form.route}
             onChange={(e) => setForm({ ...form, route: e.target.value })}
             className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-rose-500"
diff --git a/frontend/src/components/BusMapPreview.jsx b/frontend/src/components/BusMapPreview.jsx
index 7201b3c..a4d2b44 100644
--- a/frontend/src/components/BusMapPreview.jsx
+++ b/frontend/src/components/BusMapPreview.jsx
@@ -10,20 +10,56 @@ import { Radio, MapPin } from "lucide-react";
 const API_BASE_URL =
   import.meta.env.VITE_API_BASE_URL || window.location.origin;
 
-// Expressway E04 / A1 Waypoints: Colombo Bastian Mawatha → Kandy Goods Shed
+// Colombo Metropolitan & Expressway Routes
 const COLOMBO_KANDY_POLYLINE = [
-  [6.9271, 79.8612], // Colombo Bastian Mawatha Bus Station
+  [6.9271, 79.8612], // Colombo Fort Bus Station
+  [6.9487, 79.8593], // Pettah Bus Stand
   [7.0840, 79.9926], // Kadawatha Interchange
   [7.2000, 79.9800], // Nittambuwa Station
   [7.2483, 80.3458], // Mawanella Stop
   [7.2906, 80.6337], // Kandy Goods Shed Bus Stand
 ];
 
+const COLOMBO_GALLE_POLYLINE = [
+  [6.9271, 79.8612], // Colombo Fort
+  [6.8890, 79.8531], // Wellawatte
+  [6.7905, 79.9057], // Panadura
+  [6.6833, 79.9000], // Kalutara
+  [6.5833, 80.1500], // Beruwala
+  [6.0535, 80.2208], // Galle Bus Stand
+];
+
+const COLOMBO_NEGOMBO_POLYLINE = [
+  [6.9271, 79.8612], // Colombo Fort
+  [7.0033, 79.8833], // Ja-Ela
+  [7.0833, 79.8833], // Seeduwa
+  [7.1500, 79.8500], // Katunayake Airport
+  [7.2100, 79.8300], // Negombo Bus Stand
+];
+
+const COLOMBO_MATARA_POLYLINE = [
+  [6.9271, 79.8612], // Colombo Fort
+  [6.6833, 79.9000], // Kalutara
+  [6.4500, 80.0500], // Ambalangoda
+  [6.2500, 80.1000], // Hikkaduwa
+  [6.0535, 80.2208], // Galle
+  [5.9485, 80.5353], // Matara Bus Stand
+];
+
 const SRI_LANKA_STOPS = [
-  { name: "Colombo Bastian Mawatha Stand", lat: 6.9271, lng: 79.8612, stopSeq: 1 },
-  { name: "Kadawatha Highway Interchange", lat: 7.0840, lng: 79.9926, stopSeq: 2 },
-  { name: "Mawanella Central Stop", lat: 7.2483, lng: 80.3458, stopSeq: 3 },
-  { name: "Kandy Goods Shed Stand", lat: 7.2906, lng: 80.6337, stopSeq: 4 },
+  { name: "Colombo Fort Bus Station", lat: 6.9271, lng: 79.8612, stopSeq: 1 },
+  { name: "Colombo Pettah Stand", lat: 6.9487, lng: 79.8593, stopSeq: 2 },
+  { name: "Kadawatha Highway Interchange", lat: 7.0840, lng: 79.9926, stopSeq: 3 },
+  { name: "Mawanella Central Stop", lat: 7.2483, lng: 80.3458, stopSeq: 4 },
+  { name: "Kandy Goods Shed Stand", lat: 7.2906, lng: 80.6337, stopSeq: 5 },
+  { name: "Wellawatte Junction", lat: 6.8890, lng: 79.8531, stopSeq: 6 },
+  { name: "Panadura Bus Stand", lat: 6.7905, lng: 79.9057, stopSeq: 7 },
+  { name: "Kalutara South", lat: 6.6833, lng: 79.9000, stopSeq: 8 },
+  { name: "Galle Main Stand", lat: 6.0535, lng: 80.2208, stopSeq: 9 },
+  { name: "Matara Bus Complex", lat: 5.9485, lng: 80.5353, stopSeq: 10 },
+  { name: "Ja-Ela Junction", lat: 7.0033, lng: 79.8833, stopSeq: 11 },
+  { name: "Katunayake Airport", lat: 7.1500, lng: 79.8500, stopSeq: 12 },
+  { name: "Negombo Bus Stand", lat: 7.2100, lng: 79.8300, stopSeq: 13 },
 ];
 
 function createBusIcon(status = "Active") {
@@ -140,6 +176,27 @@ export default function BusMapPreview({ buses = [] }) {
         <Radio className="w-4 h-4 text-rose-500" /> 🇱🇰 Sri Lanka Express Telemetry Radar
       </div>
 
+      {/* Colombo Route Legend */}
+      <div className="absolute bottom-4 left-4 z-[1000] bg-slate-900/90 backdrop-blur-md px-4 py-3 rounded-2xl border border-slate-700 shadow-lg text-xs text-white space-y-1.5 max-w-[240px]">
+        <p className="font-extrabold text-white text-[10px] uppercase tracking-wider mb-2">🗺️ Colombo Route Corridors</p>
+        <div className="flex items-center gap-2">
+          <span className="w-4 h-1 rounded-full bg-rose-500"></span>
+          <span className="text-[11px]">Colombo → Kandy (A1)</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="w-4 h-1 rounded-full bg-blue-600"></span>
+          <span className="text-[11px]">Colombo → Galle (E01)</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="w-4 h-1 rounded-full bg-green-600"></span>
+          <span className="text-[11px]">Colombo → Negombo (A3)</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="w-4 h-1 rounded-full bg-amber-500"></span>
+          <span className="text-[11px]">Colombo → Matara (Southern)</span>
+        </div>
+      </div>
+
       <MapContainer center={validCenter} zoom={9} style={{ height: "100%", width: "100%" }}>
         <TileLayer
           url="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
@@ -147,11 +204,26 @@ export default function BusMapPreview({ buses = [] }) {
         />
         <AutoPan center={validCenter} />
 
-        {/* Highway Polyline Overlay */}
+        {/* Colombo → Kandy Expressway (A1) */}
         <Polyline
           positions={COLOMBO_KANDY_POLYLINE}
           pathOptions={{ color: "#e11d48", weight: 5, opacity: 0.85, dashArray: "10, 8" }}
         />
+        {/* Colombo → Galle Southern Expressway (E01) */}
+        <Polyline
+          positions={COLOMBO_GALLE_POLYLINE}
+          pathOptions={{ color: "#2563eb", weight: 4, opacity: 0.7, dashArray: "8, 6" }}
+        />
+        {/* Colombo → Negombo / Airport (A3) */}
+        <Polyline
+          positions={COLOMBO_NEGOMBO_POLYLINE}
+          pathOptions={{ color: "#16a34a", weight: 4, opacity: 0.7, dashArray: "8, 6" }}
+        />
+        {/* Colombo → Matara Southern Route */}
+        <Polyline
+          positions={COLOMBO_MATARA_POLYLINE}
+          pathOptions={{ color: "#f59e0b", weight: 3, opacity: 0.6, dashArray: "6, 5" }}
+        />
 
         {/* Bus Stop Circle Markers */}
         {SRI_LANKA_STOPS.map((stop, i) => (
diff --git a/frontend/src/components/Contact.jsx b/frontend/src/components/Contact.jsx
index 0a0cbfc..a698efb 100644
--- a/frontend/src/components/Contact.jsx
+++ b/frontend/src/components/Contact.jsx
@@ -48,7 +48,7 @@ function Contact() {
                   <Phone className="text-rose-600 w-6 h-6 mt-0.5" />
                   <div>
                     <h3 className="font-semibold text-slate-900">Customer Care</h3>
-                    <p className="text-slate-600 text-sm">+91 90000 00000</p>
+                    <p className="text-slate-600 text-sm">+94 11 234 5678</p>
                     <p className="text-slate-500 text-xs mt-1">Booking, cancellations, and trip help</p>
                   </div>
                 </div>
@@ -66,7 +66,7 @@ function Contact() {
                   <MapPin className="text-rose-600 w-6 h-6 mt-0.5" />
                   <div>
                     <h3 className="font-semibold text-slate-900">Head Office</h3>
-                    <p className="text-slate-600 text-sm">Mumbai, Maharashtra</p>
+                    <p className="text-slate-600 text-sm">Colombo 01, Sri Lanka</p>
                     <p className="text-slate-500 text-xs mt-1">Mon–Sat</p>
                   </div>
                 </div>
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 60657db..86238b4 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -7,10 +7,10 @@ function Footer() {
         <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
           <div>
             <p className="text-xl font-extrabold text-slate-900 tracking-tight">
-              Bus<span className="text-rose-600">Go</span>
+              Route<span className="text-rose-600">IQ</span>
             </p>
             <p className="mt-2 text-sm text-slate-600 max-w-md">
-              A clean RedBus-style UI with MERN + Socket.io for real-time bus tracking.
+              Sri Lanka's smart bus booking &amp; live tracking platform — Colombo metro routes, expressways &amp; island-wide journeys.
             </p>
           </div>
 
diff --git a/frontend/src/components/Hero.jsx b/frontend/src/components/Hero.jsx
index 31dd9f2..638937b 100644
--- a/frontend/src/components/Hero.jsx
+++ b/frontend/src/components/Hero.jsx
@@ -40,7 +40,7 @@ function Hero() {
                     <span className="px-3 text-rose-600 text-2xl">🏙️</span>
                     <input
                       type="text"
-                      placeholder="From (e.g., Mumbai)"
+                      placeholder="From (e.g., Colombo Fort)"
                       className="w-full h-full px-1 border-none outline-none bg-transparent text-slate-900 placeholder:text-slate-400"
                     />
                   </div>
@@ -49,7 +49,7 @@ function Hero() {
                     <span className="px-3 text-rose-600 text-2xl">🏙️</span>
                     <input
                       type="text"
-                      placeholder="To (e.g., Pune)"
+                      placeholder="To (e.g., Kandy)"
                       className="w-full h-full px-1 border-none outline-none bg-transparent text-slate-900 placeholder:text-slate-400"
                     />
                   </div>
@@ -87,7 +87,7 @@ function Hero() {
             <div className="mt-6">
               <p className="text-sm font-extrabold text-slate-900">Trending destinations</p>
               <div className="mt-3 flex flex-wrap gap-2">
-                {["Goa", "Manali", "Jaipur", "Pune", "Udaipur", "Rishikesh"].map((d) => (
+                {["Kandy", "Galle", "Negombo", "Nuwara Eliya", "Jaffna", "Matara"].map((d) => (
                   <span
                     key={d}
                     className="text-sm bg-white border border-slate-200 hover:border-rose-200 hover:bg-rose-50/60 transition px-3 py-1.5 rounded-full text-slate-800"
@@ -136,12 +136,12 @@ function Hero() {
                     <div className="flex items-center justify-between">
                       <div>
                         <p className="text-xs text-white/80">From</p>
-                        <p className="text-lg font-extrabold">Mumbai</p>
+                        <p className="text-lg font-extrabold">Colombo</p>
                       </div>
                       <div className="text-rose-300 font-extrabold">→</div>
                       <div className="text-right">
                         <p className="text-xs text-white/80">To</p>
-                        <p className="text-lg font-extrabold">Pune</p>
+                        <p className="text-lg font-extrabold">Kandy</p>
                       </div>
                     </div>
                   </div>
diff --git a/frontend/src/pages/CustomerBooking.jsx b/frontend/src/pages/CustomerBooking.jsx
index 4b22cbe..64113fd 100644
--- a/frontend/src/pages/CustomerBooking.jsx
+++ b/frontend/src/pages/CustomerBooking.jsx
@@ -146,14 +146,14 @@ export default function CustomerBooking() {
           <div className="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-3 bg-black/20 backdrop-blur p-4 rounded-2xl border border-white/10">
             <input
               type="text"
-              placeholder="From City"
+              placeholder="From (e.g. Colombo Fort)"
               value={from}
               onChange={(e) => setFrom(e.target.value)}
               className="px-4 py-2 bg-slate-900/80 text-white placeholder-slate-400 rounded-xl focus:outline-none border border-slate-700 text-sm"
             />
             <input
               type="text"
-              placeholder="To City"
+              placeholder="To (e.g. Kandy)"
               value={to}
               onChange={(e) => setTo(e.target.value)}
               className="px-4 py-2 bg-slate-900/80 text-white placeholder-slate-400 rounded-xl focus:outline-none border border-slate-700 text-sm"

From 8ccba20787b9ac2d48a47d6488c4db8d8239d309 Mon Sep 17 00:00:00 2001
From: Inkithai <108919130+Inkithai@users.noreply.github.com>
Date: Sat, 25 Jul 2026 17:36:36 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Unify=20SaaS=20color=20syste?=
 =?UTF-8?q?m=20=E2=80=94=20blue=20primary=20palette=20across=20all=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace inconsistent color scheme (rose/lime/fuchsia scattered across pages)
with a professional, unified blue-based SaaS design system:

COLOR SYSTEM:
- Primary: Blue (blue-600/700) — buttons, CTAs, active states, brand
- Secondary: Violet (violet-600) — accent gradients, secondary elements
- Highlight: Cyan (cyan-400) — navbar active states, badges, brand text
- Success: Emerald — status indicators, confirmations
- Warning: Amber — alerts, attention states
- Error: Red — error states, delayed status
- Neutral: Slate — backgrounds, text, borders

FILES UPDATED (23 total):
- All 8 components (Hero, Navbar, Footer, Contact, AddBusForm, etc.)
- All 8 pages (AdminDashboard, CustomerBooking, LiveTracking, etc.)
- CSS file (index.css) — replaced all lime/green hex colors with blue equivalents
- UI components (button, badge)
- BusMapPreview — route polylines use distinct blue/indigo/green/amber
- Login/Signup pages — gradient backgrounds unified

LANDING PAGE CSS:
- Replaced 30+ lime/green hex codes (#84cc16, #b8f34b, etc.) with blue equivalents
- Updated rgba colors for glows, shadows, gradients
- Background tints changed from green to slate/blue

RESULT: Clean, professional SaaS appearance consistent with industry
leaders (Stripe, Linear, Vercel). No more color conflicts between pages.

Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
---
 frontend/src/components/AddBusForm.jsx        | 16 ++++-----
 frontend/src/components/AiChatbotModal.jsx    | 12 +++----
 frontend/src/components/BusMapPreview.jsx     | 16 ++++-----
 frontend/src/components/Contact.jsx           | 16 ++++-----
 .../src/components/DriverTrackingPanel.jsx    |  6 ++--
 frontend/src/components/ErrorBoundary.jsx     |  6 ++--
 frontend/src/components/Features.jsx          |  4 +--
 frontend/src/components/Footer.jsx            |  8 ++---
 frontend/src/components/Hero.jsx              | 34 +++++++++----------
 frontend/src/components/LanguageSwitcher.jsx  |  8 ++---
 frontend/src/components/LoginPage.jsx         | 12 +++----
 frontend/src/components/ui/badge.jsx          |  2 +-
 frontend/src/components/ui/button.jsx         |  4 +--
 frontend/src/index.css                        | 24 ++++++-------
 frontend/src/pages/Addbuses.jsx               | 12 +++----
 frontend/src/pages/AdminAllBookings.jsx       |  4 +--
 frontend/src/pages/AdminDashboard.jsx         | 16 ++++-----
 frontend/src/pages/BusList.jsx                |  4 +--
 frontend/src/pages/CustomerBooking.jsx        | 18 +++++-----
 frontend/src/pages/CustomerDashboard.jsx      | 18 +++++-----
 frontend/src/pages/LiveTracking.jsx           |  8 ++---
 frontend/src/pages/MyBookings.jsx             |  4 +--
 frontend/src/pages/Navbar.jsx                 | 20 +++++------
 23 files changed, 136 insertions(+), 136 deletions(-)

diff --git a/frontend/src/components/AddBusForm.jsx b/frontend/src/components/AddBusForm.jsx
index d6be3e6..8a8c5c6 100644
--- a/frontend/src/components/AddBusForm.jsx
+++ b/frontend/src/components/AddBusForm.jsx
@@ -50,11 +50,11 @@ export default function AddBusForm({ addBusToList }) {
   return (
     <div className="bg-white border border-slate-200 rounded-3xl p-6 shadow-md">
       <h3 className="text-lg font-black text-slate-900 mb-4 flex items-center gap-2">
-        <Bus className="w-5 h-5 text-rose-600" /> Register New Bus Vehicle
+        <Bus className="w-5 h-5 text-blue-600" /> Register New Bus Vehicle
       </h3>
 
       {error && (
-        <div className="p-3 bg-rose-50 text-rose-700 text-xs font-bold rounded-xl mb-4 border border-rose-200">
+        <div className="p-3 bg-blue-50 text-blue-700 text-xs font-bold rounded-xl mb-4 border border-blue-200">
           {error}
         </div>
       )}
@@ -68,7 +68,7 @@ export default function AddBusForm({ addBusToList }) {
             placeholder="e.g. WP-CA-1001"
             value={form.busNumber}
             onChange={(e) => setForm({ ...form, busNumber: e.target.value })}
-            className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-rose-500"
+            className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
         </div>
 
@@ -80,7 +80,7 @@ export default function AddBusForm({ addBusToList }) {
             placeholder="Driver Name"
             value={form.driverName}
             onChange={(e) => setForm({ ...form, driverName: e.target.value })}
-            className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-rose-500"
+            className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
         </div>
 
@@ -92,7 +92,7 @@ export default function AddBusForm({ addBusToList }) {
             placeholder="e.g. Colombo Fort → Katunayake Airport"
             value={form.route}
             onChange={(e) => setForm({ ...form, route: e.target.value })}
-            className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-rose-500"
+            className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
         </div>
 
@@ -103,7 +103,7 @@ export default function AddBusForm({ addBusToList }) {
             step="any"
             value={form.latitude}
             onChange={(e) => setForm({ ...form, latitude: e.target.value })}
-            className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-rose-500"
+            className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
         </div>
 
@@ -114,7 +114,7 @@ export default function AddBusForm({ addBusToList }) {
             step="any"
             value={form.longitude}
             onChange={(e) => setForm({ ...form, longitude: e.target.value })}
-            className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-rose-500"
+            className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
         </div>
 
@@ -122,7 +122,7 @@ export default function AddBusForm({ addBusToList }) {
           <button
             type="submit"
             disabled={loading}
-            className="w-full py-2.5 bg-rose-600 hover:bg-rose-700 text-white font-bold rounded-xl transition shadow"
+            className="w-full py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl transition shadow"
           >
             {loading ? "Adding..." : "Register Bus"}
           </button>
diff --git a/frontend/src/components/AiChatbotModal.jsx b/frontend/src/components/AiChatbotModal.jsx
index 8d4f8ec..d1b549d 100644
--- a/frontend/src/components/AiChatbotModal.jsx
+++ b/frontend/src/components/AiChatbotModal.jsx
@@ -49,7 +49,7 @@ export default function AiChatbotModal() {
       {!isOpen && (
         <button
           onClick={() => setIsOpen(true)}
-          className="p-4 bg-gradient-to-tr from-rose-600 to-rose-500 hover:from-rose-500 hover:to-rose-600 text-white rounded-full shadow-2xl shadow-rose-600/50 flex items-center gap-2 font-extrabold text-xs transition transform hover:scale-105"
+          className="p-4 bg-gradient-to-tr from-blue-600 to-blue-500 hover:from-blue-500 hover:to-blue-600 text-white rounded-full shadow-2xl shadow-blue-600/50 flex items-center gap-2 font-extrabold text-xs transition transform hover:scale-105"
         >
           <Bot className="w-6 h-6 animate-bounce" />
           <span className="hidden sm:inline">Ask RouteIQ AI</span>
@@ -61,7 +61,7 @@ export default function AiChatbotModal() {
           {/* Header */}
           <div className="p-4 bg-slate-950 border-b border-slate-800 flex items-center justify-between text-white">
             <div className="flex items-center gap-2">
-              <div className="p-2 bg-rose-500/20 text-rose-400 rounded-xl">
+              <div className="p-2 bg-blue-500/20 text-blue-400 rounded-xl">
                 <Sparkles className="w-4 h-4" />
               </div>
               <div>
@@ -87,7 +87,7 @@ export default function AiChatbotModal() {
                 <div
                   className={`max-w-[80%] p-3 rounded-2xl text-xs leading-relaxed ${
                     m.sender === "user"
-                      ? "bg-rose-600 text-white font-medium"
+                      ? "bg-blue-600 text-white font-medium"
                       : "bg-slate-800 text-slate-200 border border-slate-700"
                   }`}
                 >
@@ -96,7 +96,7 @@ export default function AiChatbotModal() {
               </div>
             ))}
             {loading && (
-              <div className="text-[10px] text-rose-400 font-bold animate-pulse">
+              <div className="text-[10px] text-blue-400 font-bold animate-pulse">
                 AI Assistant is thinking...
               </div>
             )}
@@ -109,12 +109,12 @@ export default function AiChatbotModal() {
               placeholder="Type message or ask fare/ETA..."
               value={input}
               onChange={(e) => setInput(e.target.value)}
-              className="flex-1 px-4 py-2 bg-slate-900 border border-slate-800 rounded-xl text-xs text-white focus:outline-none focus:border-rose-500"
+              className="flex-1 px-4 py-2 bg-slate-900 border border-slate-800 rounded-xl text-xs text-white focus:outline-none focus:border-blue-500"
             />
             <button
               type="submit"
               disabled={loading}
-              className="p-2.5 bg-rose-600 hover:bg-rose-700 text-white rounded-xl transition disabled:opacity-50"
+              className="p-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl transition disabled:opacity-50"
             >
               <Send className="w-4 h-4" />
             </button>
diff --git a/frontend/src/components/BusMapPreview.jsx b/frontend/src/components/BusMapPreview.jsx
index a4d2b44..e4f8b79 100644
--- a/frontend/src/components/BusMapPreview.jsx
+++ b/frontend/src/components/BusMapPreview.jsx
@@ -64,7 +64,7 @@ const SRI_LANKA_STOPS = [
 
 function createBusIcon(status = "Active") {
   const isDelayed = status === "Delayed";
-  const color = isDelayed ? "#f43f5e" : "#e11d48";
+  const color = isDelayed ? "#ef4444" : "#2563eb";
 
   const svgMarker = `
     <div style="
@@ -173,18 +173,18 @@ export default function BusMapPreview({ buses = [] }) {
       {/* Sri Lanka Live Telemetry Overlay */}
       <div className="absolute top-4 left-4 z-[1000] bg-slate-900/90 backdrop-blur-md px-4 py-2 rounded-2xl border border-slate-700 shadow-lg flex items-center gap-3 text-xs font-extrabold text-white">
         <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-ping"></span>
-        <Radio className="w-4 h-4 text-rose-500" /> 🇱🇰 Sri Lanka Express Telemetry Radar
+        <Radio className="w-4 h-4 text-blue-500" /> 🇱🇰 Sri Lanka Express Telemetry Radar
       </div>
 
       {/* Colombo Route Legend */}
       <div className="absolute bottom-4 left-4 z-[1000] bg-slate-900/90 backdrop-blur-md px-4 py-3 rounded-2xl border border-slate-700 shadow-lg text-xs text-white space-y-1.5 max-w-[240px]">
         <p className="font-extrabold text-white text-[10px] uppercase tracking-wider mb-2">🗺️ Colombo Route Corridors</p>
         <div className="flex items-center gap-2">
-          <span className="w-4 h-1 rounded-full bg-rose-500"></span>
+          <span className="w-4 h-1 rounded-full bg-blue-600"></span>
           <span className="text-[11px]">Colombo → Kandy (A1)</span>
         </div>
         <div className="flex items-center gap-2">
-          <span className="w-4 h-1 rounded-full bg-blue-600"></span>
+          <span className="w-4 h-1 rounded-full bg-indigo-600"></span>
           <span className="text-[11px]">Colombo → Galle (E01)</span>
         </div>
         <div className="flex items-center gap-2">
@@ -207,12 +207,12 @@ export default function BusMapPreview({ buses = [] }) {
         {/* Colombo → Kandy Expressway (A1) */}
         <Polyline
           positions={COLOMBO_KANDY_POLYLINE}
-          pathOptions={{ color: "#e11d48", weight: 5, opacity: 0.85, dashArray: "10, 8" }}
+          pathOptions={{ color: "#2563eb", weight: 5, opacity: 0.85, dashArray: "10, 8" }}
         />
         {/* Colombo → Galle Southern Expressway (E01) */}
         <Polyline
           positions={COLOMBO_GALLE_POLYLINE}
-          pathOptions={{ color: "#2563eb", weight: 4, opacity: 0.7, dashArray: "8, 6" }}
+          pathOptions={{ color: "#4f46e5", weight: 4, opacity: 0.7, dashArray: "8, 6" }}
         />
         {/* Colombo → Negombo / Airport (A3) */}
         <Polyline
@@ -262,7 +262,7 @@ export default function BusMapPreview({ buses = [] }) {
                     <span
                       className={`px-2 py-0.5 text-[10px] font-black rounded-full ${
                         bus.status === "Delayed"
-                          ? "bg-rose-100 text-rose-700"
+                          ? "bg-blue-100 text-blue-700"
                           : "bg-emerald-100 text-emerald-700"
                       }`}
                     >
@@ -277,7 +277,7 @@ export default function BusMapPreview({ buses = [] }) {
                   </p>
                   <div className="mt-2 pt-2 border-t flex items-center justify-between text-[11px] font-mono">
                     <span className="text-emerald-600 font-bold">⚡ {bus.speedKmph || 50} km/h</span>
-                    <span className="text-rose-600 font-bold">⏱ ETA: {etaMinutes} mins</span>
+                    <span className="text-blue-600 font-bold">⏱ ETA: {etaMinutes} mins</span>
                   </div>
                 </div>
               </Popup>
diff --git a/frontend/src/components/Contact.jsx b/frontend/src/components/Contact.jsx
index a698efb..2b37418 100644
--- a/frontend/src/components/Contact.jsx
+++ b/frontend/src/components/Contact.jsx
@@ -3,7 +3,7 @@ import { Mail, Phone, MapPin, Clock, ShieldCheck } from "lucide-react";
 
 function Contact() {
   return (
-    <div className="bg-gradient-to-b from-white via-rose-50/30 to-white px-4 sm:px-6 py-12 sm:py-16">
+    <div className="bg-gradient-to-b from-white via-blue-50/30 to-white px-4 sm:px-6 py-12 sm:py-16">
       <div className="max-w-6xl mx-auto">
         <div className="bg-white rounded-3xl border border-slate-100 shadow-sm overflow-hidden">
           <div className="grid grid-cols-1 lg:grid-cols-12">
@@ -38,14 +38,14 @@ function Contact() {
                     Reach us anytime — we’ll get you back on track.
                   </p>
                 </div>
-                <span className="text-xs font-semibold tracking-wider text-rose-700 bg-rose-50 border border-rose-100 px-3 py-1 rounded-full">
+                <span className="text-xs font-semibold tracking-wider text-blue-700 bg-blue-50 border border-blue-100 px-3 py-1 rounded-full">
                   24x7
                 </span>
               </div>
 
               <div className="mt-6 grid sm:grid-cols-2 gap-4">
                 <div className="flex items-start gap-3 border border-slate-200 p-4 rounded-2xl hover:shadow-sm transition">
-                  <Phone className="text-rose-600 w-6 h-6 mt-0.5" />
+                  <Phone className="text-blue-600 w-6 h-6 mt-0.5" />
                   <div>
                     <h3 className="font-semibold text-slate-900">Customer Care</h3>
                     <p className="text-slate-600 text-sm">+94 11 234 5678</p>
@@ -54,7 +54,7 @@ function Contact() {
                 </div>
 
                 <div className="flex items-start gap-3 border border-slate-200 p-4 rounded-2xl hover:shadow-sm transition">
-                  <Mail className="text-rose-600 w-6 h-6 mt-0.5" />
+                  <Mail className="text-blue-600 w-6 h-6 mt-0.5" />
                   <div>
                     <h3 className="font-semibold text-slate-900">Email Support</h3>
                     <p className="text-slate-600 text-sm">support@routeiq.example</p>
@@ -63,7 +63,7 @@ function Contact() {
                 </div>
 
                 <div className="flex items-start gap-3 border border-slate-200 p-4 rounded-2xl hover:shadow-sm transition">
-                  <MapPin className="text-rose-600 w-6 h-6 mt-0.5" />
+                  <MapPin className="text-blue-600 w-6 h-6 mt-0.5" />
                   <div>
                     <h3 className="font-semibold text-slate-900">Head Office</h3>
                     <p className="text-slate-600 text-sm">Colombo 01, Sri Lanka</p>
@@ -72,7 +72,7 @@ function Contact() {
                 </div>
 
                 <div className="flex items-start gap-3 border border-slate-200 p-4 rounded-2xl hover:shadow-sm transition">
-                  <Clock className="text-rose-600 w-6 h-6 mt-0.5" />
+                  <Clock className="text-blue-600 w-6 h-6 mt-0.5" />
                   <div>
                     <h3 className="font-semibold text-slate-900">Live Tracking Help</h3>
                     <p className="text-slate-600 text-sm">GPS + ETA support</p>
@@ -81,8 +81,8 @@ function Contact() {
                 </div>
               </div>
 
-              <div className="mt-6 rounded-2xl border border-rose-100 bg-rose-50/60 p-4 flex items-start gap-3">
-                <ShieldCheck className="w-5 h-5 text-rose-700 mt-0.5" />
+              <div className="mt-6 rounded-2xl border border-blue-100 bg-blue-50/60 p-4 flex items-start gap-3">
+                <ShieldCheck className="w-5 h-5 text-blue-700 mt-0.5" />
                 <p className="text-sm text-slate-700">
                   Never share OTP, password, or payment details with anyone. RouteIQ support will never ask for sensitive information.
                 </p>
diff --git a/frontend/src/components/DriverTrackingPanel.jsx b/frontend/src/components/DriverTrackingPanel.jsx
index fb067cf..2860d41 100644
--- a/frontend/src/components/DriverTrackingPanel.jsx
+++ b/frontend/src/components/DriverTrackingPanel.jsx
@@ -59,7 +59,7 @@ export default function DriverTrackingPanel({ busId }) {
     <div className="bg-slate-900 border border-slate-800 text-white rounded-3xl p-6 shadow-xl">
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-3">
-          <div className={`p-3 rounded-2xl ${isBroadcasting ? "bg-rose-600 animate-pulse" : "bg-slate-800"}`}>
+          <div className={`p-3 rounded-2xl ${isBroadcasting ? "bg-blue-600 animate-pulse" : "bg-slate-800"}`}>
             <Radio className="w-6 h-6 text-white" />
           </div>
           <div>
@@ -72,7 +72,7 @@ export default function DriverTrackingPanel({ busId }) {
           onClick={() => setIsBroadcasting(!isBroadcasting)}
           className={`px-5 py-2.5 rounded-xl font-bold transition flex items-center gap-2 ${
             isBroadcasting
-              ? "bg-rose-600 hover:bg-rose-700 text-white"
+              ? "bg-blue-600 hover:bg-blue-700 text-white"
               : "bg-emerald-600 hover:bg-emerald-700 text-white"
           }`}
         >
@@ -89,7 +89,7 @@ export default function DriverTrackingPanel({ busId }) {
       </div>
 
       {error && (
-        <div className="p-3 bg-rose-950/80 border border-rose-800 text-rose-300 text-xs rounded-xl mb-4 flex items-center gap-2">
+        <div className="p-3 bg-blue-950/80 border border-blue-800 text-blue-300 text-xs rounded-xl mb-4 flex items-center gap-2">
           <AlertCircle className="w-4 h-4" /> {error}
         </div>
       )}
diff --git a/frontend/src/components/ErrorBoundary.jsx b/frontend/src/components/ErrorBoundary.jsx
index 7440834..a64df83 100644
--- a/frontend/src/components/ErrorBoundary.jsx
+++ b/frontend/src/components/ErrorBoundary.jsx
@@ -18,14 +18,14 @@ export default class ErrorBoundary extends React.Component {
     if (this.state.hasError) {
       return (
         <div className="min-h-[50vh] flex flex-col items-center justify-center p-6 text-center">
-          <div className="p-4 bg-rose-50 border border-rose-200 rounded-2xl max-w-lg w-full">
-            <h2 className="text-xl font-bold text-rose-700">Something went wrong</h2>
+          <div className="p-4 bg-blue-50 border border-blue-200 rounded-2xl max-w-lg w-full">
+            <h2 className="text-xl font-bold text-blue-700">Something went wrong</h2>
             <p className="text-sm text-slate-600 mt-2">
               An unexpected error occurred in this view.
             </p>
             <button
               onClick={() => window.location.reload()}
-              className="mt-4 px-4 py-2 bg-rose-600 text-white font-semibold rounded-xl hover:bg-rose-700 transition"
+              className="mt-4 px-4 py-2 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 transition"
             >
               Reload Page
             </button>
diff --git a/frontend/src/components/Features.jsx b/frontend/src/components/Features.jsx
index 326ce92..442c21d 100644
--- a/frontend/src/components/Features.jsx
+++ b/frontend/src/components/Features.jsx
@@ -11,7 +11,7 @@ function Features() {
   return (
     <section className="py-10 sm:py-14 text-center">
       <div className="flex flex-col items-center">
-        <span className="text-xs font-semibold tracking-wider text-rose-700 bg-rose-50 border border-rose-100 px-3 py-1 rounded-full">
+        <span className="text-xs font-semibold tracking-wider text-blue-700 bg-blue-50 border border-blue-100 px-3 py-1 rounded-full">
           WHY ROUTEIQ
         </span>
         <h3 className="text-3xl sm:text-4xl font-extrabold text-gray-900 mt-4 mb-3">
@@ -25,7 +25,7 @@ function Features() {
       <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
         {features.map((f, i) => (
           <div key={i} className="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-all border border-slate-100 text-left">
-            <div className="h-10 w-10 rounded-xl bg-rose-50 border border-rose-100 flex items-center justify-center mb-4 text-rose-600 font-bold">
+            <div className="h-10 w-10 rounded-xl bg-blue-50 border border-blue-100 flex items-center justify-center mb-4 text-blue-600 font-bold">
               {i + 1}
             </div>
             <h4 className="text-lg font-bold text-gray-900 mb-2">{f.title}</h4>
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 86238b4..ca3d0f3 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -7,7 +7,7 @@ function Footer() {
         <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
           <div>
             <p className="text-xl font-extrabold text-slate-900 tracking-tight">
-              Route<span className="text-rose-600">IQ</span>
+              Route<span className="text-blue-600">IQ</span>
             </p>
             <p className="mt-2 text-sm text-slate-600 max-w-md">
               Sri Lanka's smart bus booking &amp; live tracking platform — Colombo metro routes, expressways &amp; island-wide journeys.
@@ -15,13 +15,13 @@ function Footer() {
           </div>
 
           <div className="flex flex-wrap items-center gap-3 text-sm">
-            <a href="#" className="px-3 py-2 rounded-lg hover:bg-rose-50 hover:text-rose-700 transition-colors">
+            <a href="#" className="px-3 py-2 rounded-lg hover:bg-blue-50 hover:text-blue-700 transition-colors">
               Facebook
             </a>
-            <a href="#" className="px-3 py-2 rounded-lg hover:bg-rose-50 hover:text-rose-700 transition-colors">
+            <a href="#" className="px-3 py-2 rounded-lg hover:bg-blue-50 hover:text-blue-700 transition-colors">
               Twitter
             </a>
-            <a href="#" className="px-3 py-2 rounded-lg hover:bg-rose-50 hover:text-rose-700 transition-colors">
+            <a href="#" className="px-3 py-2 rounded-lg hover:bg-blue-50 hover:text-blue-700 transition-colors">
               Instagram
             </a>
           </div>
diff --git a/frontend/src/components/Hero.jsx b/frontend/src/components/Hero.jsx
index 638937b..414d7dc 100644
--- a/frontend/src/components/Hero.jsx
+++ b/frontend/src/components/Hero.jsx
@@ -5,17 +5,17 @@ function Hero() {
   return (
     <section className="relative overflow-hidden w-full">
       {/* Background */}
-      <div className="absolute inset-0 bg-gradient-to-b from-rose-50 via-white to-white"></div>
-      <div className="absolute -top-24 -right-24 h-72 w-72 rounded-full bg-rose-200/40 blur-3xl"></div>
-      <div className="absolute -bottom-24 -left-24 h-72 w-72 rounded-full bg-fuchsia-200/25 blur-3xl"></div>
-      <div className="absolute top-24 left-1/2 -translate-x-1/2 h-[520px] w-[520px] rounded-full bg-gradient-to-tr from-rose-200/30 via-white to-fuchsia-200/20 blur-3xl"></div>
+      <div className="absolute inset-0 bg-gradient-to-b from-blue-50 via-white to-white"></div>
+      <div className="absolute -top-24 -right-24 h-72 w-72 rounded-full bg-blue-200/40 blur-3xl"></div>
+      <div className="absolute -bottom-24 -left-24 h-72 w-72 rounded-full bg-violet-200/25 blur-3xl"></div>
+      <div className="absolute top-24 left-1/2 -translate-x-1/2 h-[520px] w-[520px] rounded-full bg-gradient-to-tr from-blue-200/30 via-white to-violet-200/20 blur-3xl"></div>
 
       <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-16 sm:pt-20 pb-10 sm:pb-14">
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
           {/* Left */}
           <div className="lg:col-span-7">
             <div className="flex flex-wrap items-center gap-2">
-              <p className="text-xs font-semibold tracking-wider text-rose-700 bg-rose-50 border border-rose-100 px-3 py-1 rounded-full w-fit">
+              <p className="text-xs font-semibold tracking-wider text-blue-700 bg-blue-50 border border-blue-100 px-3 py-1 rounded-full w-fit">
                 SAVE MORE ON EVERY TRIP
               </p>
               <p className="text-xs font-semibold tracking-wider text-slate-700 bg-white border border-slate-200 px-3 py-1 rounded-full w-fit">
@@ -24,7 +24,7 @@ function Hero() {
             </div>
             <h2 className="mt-4 text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight tracking-tight text-slate-900">
               Book bus tickets.
-              <span className="text-rose-600"> Track your ride live.</span>
+              <span className="text-blue-600"> Track your ride live.</span>
               <br />
               Travel with confidence.
             </h2>
@@ -34,10 +34,10 @@ function Hero() {
 
             {/* Search Form */}
             <div className="mt-7 bg-white rounded-3xl p-4 sm:p-6 shadow-sm border border-slate-100">
-              <div className="p-4 sm:p-5 bg-gradient-to-r from-rose-50 to-fuchsia-50 rounded-2xl border border-white/60">
+              <div className="p-4 sm:p-5 bg-gradient-to-r from-blue-50 to-violet-50 rounded-2xl border border-white/60">
                 <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
-                  <div className="md:col-span-4 h-14 flex items-center bg-white border border-slate-200 rounded-2xl shadow-sm focus-within:ring-2 focus-within:ring-rose-300 transition">
-                    <span className="px-3 text-rose-600 text-2xl">🏙️</span>
+                  <div className="md:col-span-4 h-14 flex items-center bg-white border border-slate-200 rounded-2xl shadow-sm focus-within:ring-2 focus-within:ring-blue-300 transition">
+                    <span className="px-3 text-blue-600 text-2xl">🏙️</span>
                     <input
                       type="text"
                       placeholder="From (e.g., Colombo Fort)"
@@ -45,8 +45,8 @@ function Hero() {
                     />
                   </div>
 
-                  <div className="md:col-span-4 h-14 flex items-center bg-white border border-slate-200 rounded-2xl shadow-sm focus-within:ring-2 focus-within:ring-rose-300 transition">
-                    <span className="px-3 text-rose-600 text-2xl">🏙️</span>
+                  <div className="md:col-span-4 h-14 flex items-center bg-white border border-slate-200 rounded-2xl shadow-sm focus-within:ring-2 focus-within:ring-blue-300 transition">
+                    <span className="px-3 text-blue-600 text-2xl">🏙️</span>
                     <input
                       type="text"
                       placeholder="To (e.g., Kandy)"
@@ -54,15 +54,15 @@ function Hero() {
                     />
                   </div>
 
-                  <div className="md:col-span-2 h-14 flex items-center bg-white border border-slate-200 rounded-2xl shadow-sm focus-within:ring-2 focus-within:ring-rose-300 transition">
-                    <span className="px-3 text-rose-600 text-xl">📅</span>
+                  <div className="md:col-span-2 h-14 flex items-center bg-white border border-slate-200 rounded-2xl shadow-sm focus-within:ring-2 focus-within:ring-blue-300 transition">
+                    <span className="px-3 text-blue-600 text-xl">📅</span>
                     <input
                       type="date"
                       className="w-full h-full px-1 border-none outline-none bg-transparent text-slate-900"
                     />
                   </div>
 
-                  <button className="md:col-span-2 h-14 bg-rose-600 hover:bg-rose-700 text-white px-6 rounded-2xl font-semibold shadow-sm transition">
+                  <button className="md:col-span-2 h-14 bg-blue-600 hover:bg-blue-700 text-white px-6 rounded-2xl font-semibold shadow-sm transition">
                     Search Buses
                   </button>
                 </div>
@@ -71,7 +71,7 @@ function Hero() {
               <div className="mt-5 flex flex-wrap gap-3">
                 <Link
                   to="/book"
-                  className="bg-rose-600 hover:bg-rose-700 text-white px-4 py-2.5 rounded-xl shadow-sm transition font-semibold"
+                  className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-xl shadow-sm transition font-semibold"
                 >
                   Book Ticket
                 </Link>
@@ -90,7 +90,7 @@ function Hero() {
                 {["Kandy", "Galle", "Negombo", "Nuwara Eliya", "Jaffna", "Matara"].map((d) => (
                   <span
                     key={d}
-                    className="text-sm bg-white border border-slate-200 hover:border-rose-200 hover:bg-rose-50/60 transition px-3 py-1.5 rounded-full text-slate-800"
+                    className="text-sm bg-white border border-slate-200 hover:border-blue-200 hover:bg-blue-50/60 transition px-3 py-1.5 rounded-full text-slate-800"
                   >
                     {d}
                   </span>
@@ -138,7 +138,7 @@ function Hero() {
                         <p className="text-xs text-white/80">From</p>
                         <p className="text-lg font-extrabold">Colombo</p>
                       </div>
-                      <div className="text-rose-300 font-extrabold">→</div>
+                      <div className="text-blue-300 font-extrabold">→</div>
                       <div className="text-right">
                         <p className="text-xs text-white/80">To</p>
                         <p className="text-lg font-extrabold">Kandy</p>
diff --git a/frontend/src/components/LanguageSwitcher.jsx b/frontend/src/components/LanguageSwitcher.jsx
index 5205775..4d29f2f 100644
--- a/frontend/src/components/LanguageSwitcher.jsx
+++ b/frontend/src/components/LanguageSwitcher.jsx
@@ -12,14 +12,14 @@ export default function LanguageSwitcher() {
   return (
     <div className="flex items-center gap-1 bg-slate-900 border border-slate-800 p-1 rounded-2xl">
       <div className="px-2 text-slate-400 text-xs flex items-center gap-1 font-bold">
-        <Languages className="w-3.5 h-3.5 text-rose-500" />
+        <Languages className="w-3.5 h-3.5 text-blue-500" />
       </div>
 
       <button
         onClick={() => changeLanguage("en")}
         className={`px-2.5 py-1 text-[11px] font-extrabold rounded-xl transition ${
           i18n.language === "en"
-            ? "bg-rose-600 text-white shadow-sm"
+            ? "bg-blue-600 text-white shadow-sm"
             : "text-slate-400 hover:text-white"
         }`}
       >
@@ -30,7 +30,7 @@ export default function LanguageSwitcher() {
         onClick={() => changeLanguage("si")}
         className={`px-2.5 py-1 text-[11px] font-extrabold rounded-xl transition ${
           i18n.language === "si"
-            ? "bg-rose-600 text-white shadow-sm"
+            ? "bg-blue-600 text-white shadow-sm"
             : "text-slate-400 hover:text-white"
         }`}
       >
@@ -41,7 +41,7 @@ export default function LanguageSwitcher() {
         onClick={() => changeLanguage("ta")}
         className={`px-2.5 py-1 text-[11px] font-extrabold rounded-xl transition ${
           i18n.language === "ta"
-            ? "bg-rose-600 text-white shadow-sm"
+            ? "bg-blue-600 text-white shadow-sm"
             : "text-slate-400 hover:text-white"
         }`}
       >
diff --git a/frontend/src/components/LoginPage.jsx b/frontend/src/components/LoginPage.jsx
index 0025f23..d937996 100644
--- a/frontend/src/components/LoginPage.jsx
+++ b/frontend/src/components/LoginPage.jsx
@@ -50,10 +50,10 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="min-h-[88vh] flex items-center justify-center bg-gradient-to-br from-slate-900 via-rose-950 to-slate-900 p-4 sm:p-6">
+    <div className="min-h-[88vh] flex items-center justify-center bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900 p-4 sm:p-6">
       <div className="w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden border border-slate-100 p-6 sm:p-8">
         <div className="text-center mb-6">
-          <div className="inline-flex items-center justify-center w-12 h-12 bg-rose-100 text-rose-600 rounded-2xl mb-3">
+          <div className="inline-flex items-center justify-center w-12 h-12 bg-blue-100 text-blue-600 rounded-2xl mb-3">
             <Bus className="w-6 h-6" />
           </div>
           <h1 className="text-2xl sm:text-3xl font-black text-slate-900">Welcome Back</h1>
@@ -74,7 +74,7 @@ export default function LoginPage() {
                 required
                 value={form.email}
                 onChange={handleChange}
-                className="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-rose-500 focus:outline-none transition text-sm"
+                className="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500 focus:outline-none transition text-sm"
                 placeholder="you@example.com"
               />
             </div>
@@ -92,7 +92,7 @@ export default function LoginPage() {
                 required
                 value={form.password}
                 onChange={handleChange}
-                className="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-rose-500 focus:outline-none transition text-sm"
+                className="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500 focus:outline-none transition text-sm"
                 placeholder="••••••••"
               />
             </div>
@@ -107,7 +107,7 @@ export default function LoginPage() {
           <button
             type="submit"
             disabled={loading}
-            className="w-full py-3 bg-rose-600 text-white font-bold rounded-xl shadow-lg hover:bg-rose-700 transition duration-200 disabled:opacity-50 flex items-center justify-center gap-2"
+            className="w-full py-3 bg-blue-600 text-white font-bold rounded-xl shadow-lg hover:bg-blue-700 transition duration-200 disabled:opacity-50 flex items-center justify-center gap-2"
           >
             {loading ? "Authenticating..." : "Log In"} <ArrowRight className="w-4 h-4" />
           </button>
@@ -115,7 +115,7 @@ export default function LoginPage() {
 
         <p className="text-center text-xs text-slate-500 mt-6">
           Don't have an account?{" "}
-          <Link to="/Signup" className="text-rose-600 font-semibold hover:underline">
+          <Link to="/Signup" className="text-blue-600 font-semibold hover:underline">
             Sign Up
           </Link>
         </p>
diff --git a/frontend/src/components/ui/badge.jsx b/frontend/src/components/ui/badge.jsx
index e8337f5..3073ec7 100644
--- a/frontend/src/components/ui/badge.jsx
+++ b/frontend/src/components/ui/badge.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 export function Badge({ variant = "default", className = "", children, ...props }) {
   const variants = {
-    default: "bg-rose-500/10 text-rose-300 border-rose-500/20",
+    default: "bg-blue-500/10 text-blue-300 border-blue-500/20",
     success: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
     warning: "bg-amber-500/10 text-amber-300 border-amber-500/20",
     info: "bg-blue-500/10 text-blue-300 border-blue-500/20",
diff --git a/frontend/src/components/ui/button.jsx b/frontend/src/components/ui/button.jsx
index 6fa9c1c..a98566f 100644
--- a/frontend/src/components/ui/button.jsx
+++ b/frontend/src/components/ui/button.jsx
@@ -4,11 +4,11 @@ export function Button({ variant = "primary", size = "md", className = "", child
   const base = "font-extrabold rounded-lg transition-all duration-200 flex items-center justify-center gap-2 active:scale-95 disabled:opacity-50 disabled:pointer-events-none disabled:active:scale-100";
   
   const variants = {
-    primary: "bg-gradient-to-r from-lime-400 to-lime-300 hover:from-lime-300 hover:to-lime-400 text-slate-950 shadow-lg shadow-lime-400/20 hover:shadow-lime-400/35",
+    primary: "bg-gradient-to-r from-cyan-400 to-cyan-300 hover:from-cyan-300 hover:to-cyan-400 text-slate-950 shadow-lg shadow-cyan-400/20 hover:shadow-cyan-400/35",
     secondary: "bg-slate-900 hover:bg-slate-800 text-white border border-slate-800 hover:border-slate-700",
     ghost: "bg-transparent text-slate-300 hover:text-white hover:bg-slate-800/60",
     success: "bg-gradient-to-r from-emerald-600 to-emerald-500 hover:from-emerald-500 hover:to-emerald-600 text-white shadow-lg shadow-emerald-600/30",
-    danger: "bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-500 hover:to-rose-500 text-white shadow-lg shadow-red-600/30",
+    danger: "bg-gradient-to-r from-red-600 to-blue-600 hover:from-red-500 hover:to-blue-500 text-white shadow-lg shadow-red-600/30",
   };
 
   const sizes = {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 1037e52..e1986c1 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -15,31 +15,31 @@ a { text-decoration: none; }
 .hero-grid { position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(rgba(148,163,184,.09) 1px, transparent 1px),linear-gradient(90deg, rgba(148,163,184,.09) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black 35%, transparent 92%); }
 .hero-orb { position: absolute; border-radius: 50%; filter: blur(10px); pointer-events: none; }
 .hero-orb-one { height: 620px; width: 620px; background: rgba(37,99,235,.18); right: -210px; top: -180px; }
-.hero-orb-two { height: 350px; width: 350px; background: rgba(132,204,22,.12); left: 37%; top: 280px; filter: blur(90px); }
+.hero-orb-two { height: 350px; width: 350px; background: rgba(37,99,235,.12); left: 37%; top: 280px; filter: blur(90px); }
 .hero-content { min-height: 570px; display: grid; grid-template-columns: .89fr 1.11fr; align-items: center; gap: 42px; z-index: 1; }
 .hero-copy { padding: 30px 0 60px; }
 .eyebrow, .section-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; display: inline-flex; gap: 8px; align-items: center; }
-.eyebrow { color: #c4f16b; background: rgba(163,230,53,.08); border: 1px solid rgba(190,242,100,.18); padding: 7px 10px; border-radius: 6px; }
-.pulse-ring { width: 7px; height: 7px; border-radius: 50%; background: #a3e635; box-shadow: 0 0 0 5px rgba(163,230,53,.1); }
+.eyebrow { color: #93c5fd; background: rgba(96,165,250,.08); border: 1px solid rgba(147,197,253,.18); padding: 7px 10px; border-radius: 6px; }
+.pulse-ring { width: 7px; height: 7px; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 0 5px rgba(96,165,250,.1); }
 .hero h1 { font-size: clamp(44px, 5.1vw, 71px); line-height: 1.045; letter-spacing: -.06em; margin: 23px 0 20px; font-weight: 800; max-width: 680px; }
-.hero h1 em { font-style: normal; color: #b8f34b; }
+.hero h1 em { font-style: normal; color: #3b82f6; }
 .hero-lede { color: #b7c0d0; font-size: 17px; line-height: 1.7; max-width: 540px; margin: 0; }
 .hero-actions { display: flex; gap: 12px; align-items: center; margin-top: 30px; flex-wrap: wrap; }
 .button-primary, .button-secondary { min-height: 48px; padding: 0 19px; border-radius: 8px; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
-.button-primary { color: #17200a; background: #b8f34b; box-shadow: 0 10px 24px rgba(132,204,22,.16); }
-.button-primary:hover { background: #d0fa7e; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(132,204,22,.25); }
+.button-primary { color: #17200a; background: #3b82f6; box-shadow: 0 10px 24px rgba(37,99,235,.16); }
+.button-primary:hover { background: #d0fa7e; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(37,99,235,.25); }
 .button-secondary { border: 1px solid #475569; color: #f8fafc; background: rgba(30,41,59,.44); }
 .button-secondary:hover { border-color: #94a3b8; background: #273449; transform: translateY(-2px); }
 .play-icon { height: 21px; width: 21px; border-radius: 50%; background: #f8fafc; color: #182133; display: grid; place-items: center; }
 .hero-proof { margin-top: 29px; display: flex; gap: 12px; align-items: center; color: #94a3b8; font-size: 11px; }
-.hero-proof b { color: #e2e8f0; }.avatars { display: flex; padding-left: 6px; }.avatars i { height: 25px; width: 25px; border-radius: 50%; margin-left: -6px; border: 2px solid #111827; display: grid; place-items: center; font-size: 8px; font-style: normal; font-weight: 800; color: #17200a; background: #d9f99d; }.avatars i:nth-child(2) { background: #93c5fd; }.avatars i:nth-child(3) { background: #fda4af; }.avatars i:last-child { color: #cbd5e1; background: #334155; }
+.hero-proof b { color: #e2e8f0; }.avatars { display: flex; padding-left: 6px; }.avatars i { height: 25px; width: 25px; border-radius: 50%; margin-left: -6px; border: 2px solid #111827; display: grid; place-items: center; font-size: 8px; font-style: normal; font-weight: 800; color: #17200a; background: #dbeafe; }.avatars i:nth-child(2) { background: #93c5fd; }.avatars i:nth-child(3) { background: #fda4af; }.avatars i:last-child { color: #cbd5e1; background: #334155; }
 .hero-visual { position: relative; margin-right: -130px; padding: 14px 0 26px; }
 .dashboard-shell { overflow: hidden; border: 1px solid rgba(148,163,184,.3); border-radius: 12px; background: #f8fafc; color: #182233; box-shadow: 0 35px 80px rgba(0,0,0,.36), 0 0 0 10px rgba(255,255,255,.025); width: 730px; max-width: 100%; }
-.dashboard-topbar { height: 47px; padding: 0 16px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid #e2e8f0; background: #fff; font-size: 10px; font-weight: 800; }.dashboard-brand { display: flex; align-items: center; gap: 6px; }.mini-mark { color: #4d7c0f; background: #d9f99d; width: 23px; height: 23px; border-radius: 5px; display: grid; place-items:center; }.dashboard-divider { height: 12px; width: 1px; background:#cbd5e1; margin-left: 2px; }.dashboard-status { margin-left: auto; color: #64748b; display:flex; gap:5px; align-items:center; }.status-dot,.live-dot { width: 6px; height: 6px; display:inline-block; border-radius: 50%; background:#84cc16; box-shadow:0 0 0 3px rgba(132,204,22,.14); }.dashboard-avatar { background:#172033; color:#d9f99d; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:8px; }
-.dashboard-body { display:grid; grid-template-columns: 116px 1fr 164px; height: 370px; }.dashboard-sidebar { background:#fff; padding:16px 10px; border-right:1px solid #e2e8f0; display:flex; flex-direction:column; gap:6px; }.dashboard-sidebar span { display:flex; gap:7px; align-items:center; padding:7px; color:#94a3b8; font-size:9px; font-weight:700; border-radius:5px; }.dashboard-sidebar .side-active { background:#eff6ff; color:#2563eb; }.map-stage { position:relative; overflow:hidden; background:#eaf0e9; background-image: radial-gradient(#c3d5c1 1px, transparent 1px); background-size:14px 14px; }.route-map { width:100%; height:100%; }.road { fill:none; stroke:#fff; stroke-width:19; opacity:.75; }.road-two{stroke-width:14}.road-three{stroke-width:10}.route-line{fill:none;stroke-linecap:round;stroke-width:5;stroke-dasharray:12 8;animation:route-dash 10s linear infinite}.route-line-one{stroke:#84cc16}.route-line-two{stroke:#3b82f6;animation-direction:reverse}.map-node{fill:#3b82f6;stroke:#fff;stroke-width:4}.map-node.origin{fill:#84cc16}.vehicle{fill:#172033; animation: vehicle-bob 3s ease-in-out infinite}.map-pulse { position:absolute; top:12px; left:13px; padding:6px 8px; color:#334155; border:1px solid rgba(148,163,184,.35); background:rgba(255,255,255,.8); backdrop-filter:blur(6px); border-radius:5px; font-size:8px; font-weight:800; display:flex; gap:5px; align-items:center; }.map-pulse span{height:6px;width:6px;border-radius:50%;background:#84cc16}.map-zoom { position:absolute; bottom:13px; right:13px; display:flex; flex-direction:column; border:1px solid #dbe3ea; overflow:hidden; border-radius:5px; }.map-zoom button { height:24px; width:24px; border:0; background:#fff; color:#334155; cursor:pointer; font-size:14px; }.map-zoom button+button{border-top:1px solid #e2e8f0}.map-label { position:absolute; font-size:9px;color:#829180;font-weight:700; }.map-label-a{left:31%;top:28%}.map-label-b{right:18%;top:20%}.map-label-c{left:17%;bottom:18%}
-.dashboard-panel { background:#fff; padding:16px 11px; border-left:1px solid #e2e8f0; }.panel-heading{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:800;margin-bottom:12px}.panel-heading button{border:0;background:none;color:#2563eb;font-size:8px;font-weight:700}.route-row{display:grid;grid-template-columns:7px 1fr auto;gap:6px;margin:10px 0;align-items:center}.route-color{width:6px;height:24px;border-radius:5px;background:#84cc16}.route-color.blue{background:#3b82f6}.route-color.purple{background:#a78bfa}.route-row b{font-size:8px;display:block}.route-row small{font-size:7px;color:#94a3b8;display:block;margin-top:2px}.route-row strong{font-family:"DM Mono";font-size:8px}.panel-insight{display:flex;gap:5px;padding:7px;background:#f7fee7;border:1px solid #ecfccb;border-radius:5px;margin-top:14px;font-size:7px;color:#4d7c0f;align-items:flex-start}.panel-insight b{display:block}.panel-insight svg:last-child{margin-left:auto;flex:none}
-.float-card { position:absolute; z-index:2; background:rgba(255,255,255,.94); color:#172033; box-shadow:0 15px 35px rgba(0,0,0,.24); border:1px solid #e2e8f0; border-radius:9px; display:flex; gap:9px; padding:10px; }.float-card small{font-size:8px;color:#64748b;display:block}.float-card strong{display:inline-block;font-family:"DM Mono";font-size:15px;margin-top:2px}.savings-card{top:-12px;right:24px}.float-icon,.eta-check{height:26px;width:26px;display:grid;place-items:center;border-radius:7px}.float-icon{background:#ecfccb;color:#4d7c0f}.savings-card em{font-size:8px;font-style:normal;color:#65a30d;margin-left:4px;font-weight:800}.eta-card{bottom:4px;left:-44px;align-items:center}.eta-check{background:#dcfce7;color:#16a34a}.tiny-chart{color:#65a30d;font-size:27px;line-height:1}.logo-strip { height:106px; display:flex; align-items:center; justify-content:space-between; gap:28px; color:#64748b; font-size:10px; white-space:nowrap; border-top:1px solid rgba(148,163,184,.15); }.logo-strip b{font-size:13px;letter-spacing:.06em;color:#94a3b8}.logo-strip b:nth-last-child(2){font-style:italic}.metrics-section{background:#f2f5ef;border-bottom:1px solid #e4e8e2}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:33px 0;gap:22px}.metric-grid>div{padding-left:26px;border-left:1px solid #d7ded4}.metric-grid>div:first-child{padding-left:0;border:0}.metric-grid strong{font-family:"DM Mono";font-size:26px;font-weight:500;letter-spacing:-.07em}.metric-grid strong span{color:#65a30d}.metric-grid p{color:#64748b;margin:5px 0 0;font-size:10px;font-weight:700}.live-dot{vertical-align:middle;margin-left:5px;width:5px;height:5px}.section{padding:112px 0}.light-section{background:#fafafa}.section-heading{max-width:660px}.section-heading.centered{text-align:center;margin:0 auto 52px}.section-tag{color:#5b730f;margin:0}.section-tag>span{display:inline-block;width:17px;height:1px;background:#84cc16}.section-heading h2,.workflow-copy h2,.security-content h2,.cta-panel h2{font-size:clamp(33px,4vw,50px);line-height:1.1;letter-spacing:-.055em;font-weight:800;margin:14px 0}.section-heading p,.workflow-copy>p{color:#64748b;font-size:15px;line-height:1.7;margin:0 auto;max-width:550px}.bento-grid{display:grid;grid-template-columns:1.15fr .85fr 1fr;grid-template-rows:300px 270px;gap:15px}.bento-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;position:relative;overflow:hidden;padding:30px;display:flex;flex-direction:column}.bento-card h3{font-size:19px;letter-spacing:-.035em;line-height:1.25;margin:14px 0 8px}.bento-card p{font-size:12px;line-height:1.7;color:#64748b;margin:0;max-width:300px}.icon-tile{height:38px;width:38px;display:grid;place-items:center;color:#4d7c0f;background:#ecfccb;border-radius:8px}.icon-tile.blue{color:#2563eb;background:#dbeafe}.icon-tile.gold{color:#a16207;background:#fef3c7}.bento-map{grid-column:span 2;flex-direction:row}.bento-map a,.case-result a,.text-link{font-size:11px;font-weight:800;color:#4d7c0f;display:flex;align-items:center;gap:5px;margin-top:18px}.mini-route-art{flex:1;min-width:220px;position:relative;margin:-30px -30px -30px 10px;background:#f3f8f2;background-image:radial-gradient(#d0e1cf 1px,transparent 1px);background-size:13px 13px}.mini-route-line{position:absolute;width:240px;height:150px;border:4px dashed #84cc16;border-left:0;border-bottom:0;border-radius:0 100% 0 0;transform:rotate(-16deg);right:15px;top:64px}.mini-pin{position:absolute;width:13px;height:13px;background:#fff;border:4px solid #3b82f6;border-radius:50%}.pin-1{top:60px;right:51px}.pin-2{top:137px;right:130px}.pin-3{bottom:43px;left:38px;border-color:#84cc16}.mini-route-art b{position:absolute;bottom:24px;right:21px;color:#4d7c0f;background:#fff;padding:6px;border:1px solid #d9f99d;border-radius:5px;font-size:9px}.bento-data{grid-row:span 2;justify-content:space-between}.bar-art{height:165px;display:flex;align-items:end;gap:11px;padding:0 12px;border-bottom:1px solid #e2e8f0;background:linear-gradient(180deg,transparent, #f8fafc)}.bar-art span{flex:1;border-radius:5px 5px 0 0;background:#dbeafe}.bar-art span:nth-child(4),.bar-art span:nth-child(6){background:#3b82f6}.bento-ai{background:#172033;color:#fff;border:0}.bento-ai h3{font-size:21px;margin-top:auto}.bento-ai p{color:#aeb9c9}.ai-glow{height:48px;width:48px;display:grid;place-items:center;color:#b8f34b;background:rgba(163,230,53,.1);border:1px solid rgba(190,242,100,.16);border-radius:9px;box-shadow:0 0 40px rgba(132,204,22,.15)}.prompt-pill{margin-top:19px;display:flex;gap:6px;align-items:center;font-size:9px;font-weight:700;color:#d9f99d;background:rgba(255,255,255,.06);padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:6px}.prompt-pill svg:last-child{margin-left:auto}.bento-alert{padding-top:74px}.alert-card{position:absolute;display:flex;gap:8px;align-items:center;top:17px;left:18px;right:18px;padding:9px;background:#fff;border:1px solid #e2e8f0;border-radius:7px;box-shadow:0 8px 19px rgba(15,23,42,.08)}.alert-card>span{height:27px;width:27px;display:grid;place-items:center;background:#ecfccb;color:#4d7c0f;border-radius:6px}.alert-card b{font-size:9px}.alert-card p{font-size:8px;line-height:1.2}.alert-card>svg{margin-left:auto;color:#65a30d}
-.workflow-section{background:#f1f5f2;border-top:1px solid #e2e8e4;border-bottom:1px solid #e2e8e4}.workflow-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:center}.workflow-copy>p{margin-left:0}.steps{border-top:1px solid #cfd8d0}.steps article{display:grid;grid-template-columns:60px 1fr;gap:16px;padding:21px 0;border-bottom:1px solid #cfd8d0}.steps article>span{font-family:"DM Mono";font-size:12px;color:#65a30d}.steps h3{font-size:15px;margin:0 0 6px;letter-spacing:-.02em}.steps p{font-size:12px;color:#64748b;margin:0;line-height:1.6}.quote-section{padding:105px 0;background:#fff}.quote-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:105px;align-items:center}blockquote{font-size:clamp(24px,3vw,37px);line-height:1.25;letter-spacing:-.045em;font-weight:700;margin:18px 0 27px;max-width:650px}.person{display:flex;gap:10px;align-items:center}.person>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#d9f99d;color:#3f6212;font-size:10px;font-weight:800}.person p{margin:0;font-size:10px}.person b,.person small{display:block}.person small{color:#64748b;margin-top:3px}.case-result{border:1px solid #dce4db;border-radius:11px;background:#f7faf6;padding:28px}.case-result>span{color:#64748b;font-size:10px;font-weight:800}.case-result strong{font-family:"DM Mono";display:block;font-size:48px;letter-spacing:-.08em;font-weight:500;margin:19px 0 2px}.case-result>p{color:#65a30d;font-weight:800;font-size:11px;margin:0}.case-result hr{border:0;border-top:1px solid #dce4db;margin:20px 0}.case-result div{display:grid;gap:10px}.case-result div span{font-size:10px;display:flex;align-items:center;gap:7px;color:#475569}.case-result div svg{color:#65a30d}.case-result a{margin-top:23px}.security-section{background:#172033;color:#fff;padding:54px 0}.security-content{display:flex;align-items:center;justify-content:space-between;gap:40px}.security-content .section-tag{color:#c8ef7b}.security-content h2{font-size:31px;margin:10px 0 0}.security-list{display:flex;gap:27px;flex-wrap:wrap}.security-list span{font-size:11px;font-weight:700;color:#cbd5e1;display:flex;align-items:center;gap:8px}.security-list svg{color:#b8f34b}.final-cta{background:#fafafa;padding:92px 0}.cta-panel{min-height:305px;background:#e9f6c7;border-radius:13px;padding:52px 70px;overflow:hidden}.cta-panel h2{font-size:42px;margin:12px 0}.cta-panel>div:not(.cta-grid):not(.cta-route){position:relative;z-index:1}.cta-panel p{font-size:13px;color:#52602e;margin:0}.cta-panel .section-tag{color:#526a14}.dark-secondary{border-color:#b8ce7d;background:transparent;color:#344012}.dark-secondary:hover{background:#f2fbcf;border-color:#97ae5d}.cta-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(90,112,29,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(90,112,29,.09) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,transparent 35%,black)}.cta-route{position:absolute;right:9%;top:62px;display:grid;place-items:center;color:#72a30c;transform:rotate(-9deg)}.cta-route svg{height:100px;width:100px;stroke-width:.9}.cta-route span{font-family:"DM Mono";position:absolute;font-size:16px;color:#3f6212}.cta-route small{position:absolute;bottom:-16px;white-space:nowrap;font-size:9px;color:#52602e}
+.dashboard-topbar { height: 47px; padding: 0 16px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid #e2e8f0; background: #fff; font-size: 10px; font-weight: 800; }.dashboard-brand { display: flex; align-items: center; gap: 6px; }.mini-mark { color: #1e40af; background: #dbeafe; width: 23px; height: 23px; border-radius: 5px; display: grid; place-items:center; }.dashboard-divider { height: 12px; width: 1px; background:#cbd5e1; margin-left: 2px; }.dashboard-status { margin-left: auto; color: #64748b; display:flex; gap:5px; align-items:center; }.status-dot,.live-dot { width: 6px; height: 6px; display:inline-block; border-radius: 50%; background:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.14); }.dashboard-avatar { background:#172033; color:#dbeafe; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:8px; }
+.dashboard-body { display:grid; grid-template-columns: 116px 1fr 164px; height: 370px; }.dashboard-sidebar { background:#fff; padding:16px 10px; border-right:1px solid #e2e8f0; display:flex; flex-direction:column; gap:6px; }.dashboard-sidebar span { display:flex; gap:7px; align-items:center; padding:7px; color:#94a3b8; font-size:9px; font-weight:700; border-radius:5px; }.dashboard-sidebar .side-active { background:#eff6ff; color:#2563eb; }.map-stage { position:relative; overflow:hidden; background:#f1f5f9; background-image: radial-gradient(#e2e8f0 1px, transparent 1px); background-size:14px 14px; }.route-map { width:100%; height:100%; }.road { fill:none; stroke:#fff; stroke-width:19; opacity:.75; }.road-two{stroke-width:14}.road-three{stroke-width:10}.route-line{fill:none;stroke-linecap:round;stroke-width:5;stroke-dasharray:12 8;animation:route-dash 10s linear infinite}.route-line-one{stroke:#2563eb}.route-line-two{stroke:#3b82f6;animation-direction:reverse}.map-node{fill:#3b82f6;stroke:#fff;stroke-width:4}.map-node.origin{fill:#2563eb}.vehicle{fill:#172033; animation: vehicle-bob 3s ease-in-out infinite}.map-pulse { position:absolute; top:12px; left:13px; padding:6px 8px; color:#334155; border:1px solid rgba(148,163,184,.35); background:rgba(255,255,255,.8); backdrop-filter:blur(6px); border-radius:5px; font-size:8px; font-weight:800; display:flex; gap:5px; align-items:center; }.map-pulse span{height:6px;width:6px;border-radius:50%;background:#2563eb}.map-zoom { position:absolute; bottom:13px; right:13px; display:flex; flex-direction:column; border:1px solid #dbe3ea; overflow:hidden; border-radius:5px; }.map-zoom button { height:24px; width:24px; border:0; background:#fff; color:#334155; cursor:pointer; font-size:14px; }.map-zoom button+button{border-top:1px solid #e2e8f0}.map-label { position:absolute; font-size:9px;color:#64748b;font-weight:700; }.map-label-a{left:31%;top:28%}.map-label-b{right:18%;top:20%}.map-label-c{left:17%;bottom:18%}
+.dashboard-panel { background:#fff; padding:16px 11px; border-left:1px solid #e2e8f0; }.panel-heading{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:800;margin-bottom:12px}.panel-heading button{border:0;background:none;color:#2563eb;font-size:8px;font-weight:700}.route-row{display:grid;grid-template-columns:7px 1fr auto;gap:6px;margin:10px 0;align-items:center}.route-color{width:6px;height:24px;border-radius:5px;background:#2563eb}.route-color.blue{background:#3b82f6}.route-color.purple{background:#a78bfa}.route-row b{font-size:8px;display:block}.route-row small{font-size:7px;color:#94a3b8;display:block;margin-top:2px}.route-row strong{font-family:"DM Mono";font-size:8px}.panel-insight{display:flex;gap:5px;padding:7px;background:#eff6ff;border:1px solid #eff6ff;border-radius:5px;margin-top:14px;font-size:7px;color:#1e40af;align-items:flex-start}.panel-insight b{display:block}.panel-insight svg:last-child{margin-left:auto;flex:none}
+.float-card { position:absolute; z-index:2; background:rgba(255,255,255,.94); color:#172033; box-shadow:0 15px 35px rgba(0,0,0,.24); border:1px solid #e2e8f0; border-radius:9px; display:flex; gap:9px; padding:10px; }.float-card small{font-size:8px;color:#64748b;display:block}.float-card strong{display:inline-block;font-family:"DM Mono";font-size:15px;margin-top:2px}.savings-card{top:-12px;right:24px}.float-icon,.eta-check{height:26px;width:26px;display:grid;place-items:center;border-radius:7px}.float-icon{background:#eff6ff;color:#1e40af}.savings-card em{font-size:8px;font-style:normal;color:#2563eb;margin-left:4px;font-weight:800}.eta-card{bottom:4px;left:-44px;align-items:center}.eta-check{background:#dcfce7;color:#16a34a}.tiny-chart{color:#2563eb;font-size:27px;line-height:1}.logo-strip { height:106px; display:flex; align-items:center; justify-content:space-between; gap:28px; color:#64748b; font-size:10px; white-space:nowrap; border-top:1px solid rgba(148,163,184,.15); }.logo-strip b{font-size:13px;letter-spacing:.06em;color:#94a3b8}.logo-strip b:nth-last-child(2){font-style:italic}.metrics-section{background:#f1f5f9;border-bottom:1px solid #e2e8f0}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:33px 0;gap:22px}.metric-grid>div{padding-left:26px;border-left:1px solid #d7ded4}.metric-grid>div:first-child{padding-left:0;border:0}.metric-grid strong{font-family:"DM Mono";font-size:26px;font-weight:500;letter-spacing:-.07em}.metric-grid strong span{color:#2563eb}.metric-grid p{color:#64748b;margin:5px 0 0;font-size:10px;font-weight:700}.live-dot{vertical-align:middle;margin-left:5px;width:5px;height:5px}.section{padding:112px 0}.light-section{background:#fafafa}.section-heading{max-width:660px}.section-heading.centered{text-align:center;margin:0 auto 52px}.section-tag{color:#1e40af;margin:0}.section-tag>span{display:inline-block;width:17px;height:1px;background:#2563eb}.section-heading h2,.workflow-copy h2,.security-content h2,.cta-panel h2{font-size:clamp(33px,4vw,50px);line-height:1.1;letter-spacing:-.055em;font-weight:800;margin:14px 0}.section-heading p,.workflow-copy>p{color:#64748b;font-size:15px;line-height:1.7;margin:0 auto;max-width:550px}.bento-grid{display:grid;grid-template-columns:1.15fr .85fr 1fr;grid-template-rows:300px 270px;gap:15px}.bento-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;position:relative;overflow:hidden;padding:30px;display:flex;flex-direction:column}.bento-card h3{font-size:19px;letter-spacing:-.035em;line-height:1.25;margin:14px 0 8px}.bento-card p{font-size:12px;line-height:1.7;color:#64748b;margin:0;max-width:300px}.icon-tile{height:38px;width:38px;display:grid;place-items:center;color:#1e40af;background:#eff6ff;border-radius:8px}.icon-tile.blue{color:#2563eb;background:#dbeafe}.icon-tile.gold{color:#a16207;background:#fef3c7}.bento-map{grid-column:span 2;flex-direction:row}.bento-map a,.case-result a,.text-link{font-size:11px;font-weight:800;color:#1e40af;display:flex;align-items:center;gap:5px;margin-top:18px}.mini-route-art{flex:1;min-width:220px;position:relative;margin:-30px -30px -30px 10px;background:#f8fafc;background-image:radial-gradient(#e2e8f0 1px,transparent 1px);background-size:13px 13px}.mini-route-line{position:absolute;width:240px;height:150px;border:4px dashed #2563eb;border-left:0;border-bottom:0;border-radius:0 100% 0 0;transform:rotate(-16deg);right:15px;top:64px}.mini-pin{position:absolute;width:13px;height:13px;background:#fff;border:4px solid #3b82f6;border-radius:50%}.pin-1{top:60px;right:51px}.pin-2{top:137px;right:130px}.pin-3{bottom:43px;left:38px;border-color:#2563eb}.mini-route-art b{position:absolute;bottom:24px;right:21px;color:#1e40af;background:#fff;padding:6px;border:1px solid #dbeafe;border-radius:5px;font-size:9px}.bento-data{grid-row:span 2;justify-content:space-between}.bar-art{height:165px;display:flex;align-items:end;gap:11px;padding:0 12px;border-bottom:1px solid #e2e8f0;background:linear-gradient(180deg,transparent, #f8fafc)}.bar-art span{flex:1;border-radius:5px 5px 0 0;background:#dbeafe}.bar-art span:nth-child(4),.bar-art span:nth-child(6){background:#3b82f6}.bento-ai{background:#172033;color:#fff;border:0}.bento-ai h3{font-size:21px;margin-top:auto}.bento-ai p{color:#aeb9c9}.ai-glow{height:48px;width:48px;display:grid;place-items:center;color:#3b82f6;background:rgba(96,165,250,.1);border:1px solid rgba(147,197,253,.16);border-radius:9px;box-shadow:0 0 40px rgba(37,99,235,.15)}.prompt-pill{margin-top:19px;display:flex;gap:6px;align-items:center;font-size:9px;font-weight:700;color:#dbeafe;background:rgba(255,255,255,.06);padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:6px}.prompt-pill svg:last-child{margin-left:auto}.bento-alert{padding-top:74px}.alert-card{position:absolute;display:flex;gap:8px;align-items:center;top:17px;left:18px;right:18px;padding:9px;background:#fff;border:1px solid #e2e8f0;border-radius:7px;box-shadow:0 8px 19px rgba(15,23,42,.08)}.alert-card>span{height:27px;width:27px;display:grid;place-items:center;background:#eff6ff;color:#1e40af;border-radius:6px}.alert-card b{font-size:9px}.alert-card p{font-size:8px;line-height:1.2}.alert-card>svg{margin-left:auto;color:#2563eb}
+.workflow-section{background:#f1f5f9;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0}.workflow-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:center}.workflow-copy>p{margin-left:0}.steps{border-top:1px solid #e2e8f0}.steps article{display:grid;grid-template-columns:60px 1fr;gap:16px;padding:21px 0;border-bottom:1px solid #e2e8f0}.steps article>span{font-family:"DM Mono";font-size:12px;color:#2563eb}.steps h3{font-size:15px;margin:0 0 6px;letter-spacing:-.02em}.steps p{font-size:12px;color:#64748b;margin:0;line-height:1.6}.quote-section{padding:105px 0;background:#fff}.quote-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:105px;align-items:center}blockquote{font-size:clamp(24px,3vw,37px);line-height:1.25;letter-spacing:-.045em;font-weight:700;margin:18px 0 27px;max-width:650px}.person{display:flex;gap:10px;align-items:center}.person>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#dbeafe;color:#1e3a8a;font-size:10px;font-weight:800}.person p{margin:0;font-size:10px}.person b,.person small{display:block}.person small{color:#64748b;margin-top:3px}.case-result{border:1px solid #e2e8f0;border-radius:11px;background:#f8fafc;padding:28px}.case-result>span{color:#64748b;font-size:10px;font-weight:800}.case-result strong{font-family:"DM Mono";display:block;font-size:48px;letter-spacing:-.08em;font-weight:500;margin:19px 0 2px}.case-result>p{color:#2563eb;font-weight:800;font-size:11px;margin:0}.case-result hr{border:0;border-top:1px solid #e2e8f0;margin:20px 0}.case-result div{display:grid;gap:10px}.case-result div span{font-size:10px;display:flex;align-items:center;gap:7px;color:#475569}.case-result div svg{color:#2563eb}.case-result a{margin-top:23px}.security-section{background:#172033;color:#fff;padding:54px 0}.security-content{display:flex;align-items:center;justify-content:space-between;gap:40px}.security-content .section-tag{color:#93c5fd}.security-content h2{font-size:31px;margin:10px 0 0}.security-list{display:flex;gap:27px;flex-wrap:wrap}.security-list span{font-size:11px;font-weight:700;color:#cbd5e1;display:flex;align-items:center;gap:8px}.security-list svg{color:#3b82f6}.final-cta{background:#fafafa;padding:92px 0}.cta-panel{min-height:305px;background:#dbeafe;border-radius:13px;padding:52px 70px;overflow:hidden}.cta-panel h2{font-size:42px;margin:12px 0}.cta-panel>div:not(.cta-grid):not(.cta-route){position:relative;z-index:1}.cta-panel p{font-size:13px;color:#1e40af;margin:0}.cta-panel .section-tag{color:#1e3a8a}.dark-secondary{border-color:#93c5fd;background:transparent;color:#1e3a8a}.dark-secondary:hover{background:#eff6ff;border-color:#60a5fa}.cta-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(30,64,175,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(30,64,175,.09) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,transparent 35%,black)}.cta-route{position:absolute;right:9%;top:62px;display:grid;place-items:center;color:#2563eb;transform:rotate(-9deg)}.cta-route svg{height:100px;width:100px;stroke-width:.9}.cta-route span{font-family:"DM Mono";position:absolute;font-size:16px;color:#1e3a8a}.cta-route small{position:absolute;bottom:-16px;white-space:nowrap;font-size:9px;color:#1e40af}
 @keyframes route-dash { to { stroke-dashoffset: -240; } } @keyframes vehicle-bob { 50% { transform: translate(7px,-5px); } }
 @media (max-width: 960px){.hero{padding-top:38px}.hero-content{grid-template-columns:1fr;gap:10px}.hero-copy{padding-bottom:12px}.hero-visual{margin:0 0 -10px;padding:8px 0 26px}.dashboard-shell{width:100%}.logo-strip{overflow:hidden;justify-content:flex-start}.logo-strip b:nth-of-type(n+4){display:none}.bento-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.bento-map{grid-column:span 2}.bento-data{grid-row:auto}.workflow-layout,.quote-layout{gap:50px}.security-content{align-items:flex-start;flex-direction:column}.cta-panel{padding:42px}.cta-route{right:7%;opacity:.6}.dashboard-body{grid-template-columns:100px 1fr 150px}}
 @media (max-width: 640px){.shell{width:min(100% - 32px,1180px)}.hero{min-height:0}.hero h1{font-size:44px}.hero-lede{font-size:15px}.dashboard-sidebar,.dashboard-panel{display:none}.dashboard-body{display:block}.map-stage{height:275px}.float-card{transform:scale(.85);transform-origin:bottom right}.savings-card{right:-12px}.eta-card{left:-12px}.logo-strip{height:72px;gap:22px}.logo-strip span{display:none}.logo-strip b{font-size:10px}.logo-strip b:nth-of-type(n+4){display:none}.metric-grid{grid-template-columns:1fr 1fr;gap:23px;padding:27px 0}.metric-grid>div:nth-child(3){padding-left:0;border:0}.metric-grid strong{font-size:22px}.section{padding:72px 0}.section-heading{margin-bottom:32px!important}.section-heading h2{font-size:34px}.bento-grid{display:flex;flex-direction:column}.bento-card{min-height:235px}.bento-map{min-height:310px;display:block}.mini-route-art{height:145px;margin:20px -30px -30px}.bento-data{min-height:270px}.bar-art{margin-top:24px}.workflow-layout,.quote-layout{grid-template-columns:1fr;gap:39px}.workflow-copy h2{font-size:35px}.quote-section{padding:72px 0}blockquote{font-size:28px}.security-list{gap:17px;display:grid;grid-template-columns:1fr 1fr}.security-list span:last-child{grid-column:span 2}.cta-panel{padding:35px 24px;min-height:350px}.cta-panel h2{font-size:35px}.cta-route{top:auto;bottom:45px;right:13%}.final-cta{padding:56px 0}.hero-actions{margin-top:24px}.button-primary,.button-secondary{width:100%}}
diff --git a/frontend/src/pages/Addbuses.jsx b/frontend/src/pages/Addbuses.jsx
index 6cfe198..9da3d94 100644
--- a/frontend/src/pages/Addbuses.jsx
+++ b/frontend/src/pages/Addbuses.jsx
@@ -36,7 +36,7 @@ function Addbuses() {
   ).size;
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-white via-rose-50/30 to-white">
+    <div className="min-h-screen bg-gradient-to-b from-white via-blue-50/30 to-white">
       {/* Mobile sidebar overlay */}
       {sidebarOpen && (
         <button
@@ -66,7 +66,7 @@ function Addbuses() {
           >
             <div className="flex items-center justify-between gap-3">
               <div>
-                <p className="text-xs font-semibold tracking-wider text-rose-700 bg-rose-50 border border-rose-100 px-3 py-1 rounded-full w-fit">
+                <p className="text-xs font-semibold tracking-wider text-blue-700 bg-blue-50 border border-blue-100 px-3 py-1 rounded-full w-fit">
                   ADMIN
                 </p>
                 <h2 className="mt-3 text-lg font-extrabold text-slate-900">Dashboard</h2>
@@ -91,7 +91,7 @@ function Addbuses() {
               <div className="grid gap-2">
                 <a
                   href="#add-bus"
-                  className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-slate-900 hover:bg-rose-100 transition-colors"
+                  className="rounded-2xl border border-blue-200 bg-blue-50 px-4 py-3 text-slate-900 hover:bg-blue-100 transition-colors"
                 >
                   <p className="text-sm font-semibold">➕ Add Bus</p>
                   <p className="text-xs text-slate-600 mt-0.5">Create and assign a route</p>
@@ -140,7 +140,7 @@ function Addbuses() {
                   </button>
 
                   <div>
-                    <p className="text-xs font-semibold tracking-wider text-rose-700 bg-rose-50 border border-rose-100 px-3 py-1 rounded-full w-fit">
+                    <p className="text-xs font-semibold tracking-wider text-blue-700 bg-blue-50 border border-blue-100 px-3 py-1 rounded-full w-fit">
                       ADMIN
                     </p>
                     <h1 className="text-2xl sm:text-3xl font-extrabold text-slate-900">
@@ -161,7 +161,7 @@ function Addbuses() {
                   </Link>
                   <Link
                     to="/Login"
-                    className="bg-rose-600 text-white px-4 py-2.5 rounded-xl font-semibold hover:bg-rose-700 transition-colors shadow-sm"
+                    className="bg-blue-600 text-white px-4 py-2.5 rounded-xl font-semibold hover:bg-blue-700 transition-colors shadow-sm"
                   >
                     Login
                   </Link>
@@ -171,7 +171,7 @@ function Addbuses() {
               <div className="mt-4 flex flex-wrap gap-2">
                 <a
                   href="#add-bus"
-                  className="bg-rose-600 text-white px-4 py-2.5 rounded-xl font-semibold hover:bg-rose-700 transition-colors shadow-sm"
+                  className="bg-blue-600 text-white px-4 py-2.5 rounded-xl font-semibold hover:bg-blue-700 transition-colors shadow-sm"
                 >
                   Add Bus
                 </a>
diff --git a/frontend/src/pages/AdminAllBookings.jsx b/frontend/src/pages/AdminAllBookings.jsx
index b6d19e0..3deede3 100644
--- a/frontend/src/pages/AdminAllBookings.jsx
+++ b/frontend/src/pages/AdminAllBookings.jsx
@@ -52,14 +52,14 @@ export default function AdminAllBookings() {
                       {b.from} → {b.to}
                     </td>
                     <td className="p-4 font-mono text-xs text-slate-600">{b.travelDate}</td>
-                    <td className="p-4 font-bold text-rose-600">{b.seats?.join(", ")}</td>
+                    <td className="p-4 font-bold text-blue-600">{b.seats?.join(", ")}</td>
                     <td className="p-4 font-extrabold text-slate-900">LKR {b.amount}</td>
                     <td className="p-4">
                       <span
                         className={`px-2.5 py-0.5 text-[10px] font-extrabold uppercase rounded-full ${
                           b.status === "confirmed"
                             ? "bg-emerald-100 text-emerald-700"
-                            : "bg-rose-100 text-rose-700"
+                            : "bg-blue-100 text-blue-700"
                         }`}
                       >
                         {b.status}
diff --git a/frontend/src/pages/AdminDashboard.jsx b/frontend/src/pages/AdminDashboard.jsx
index cc6c103..10a0eb3 100644
--- a/frontend/src/pages/AdminDashboard.jsx
+++ b/frontend/src/pages/AdminDashboard.jsx
@@ -39,7 +39,7 @@ export default function AdminDashboard() {
         <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-slate-900 border border-slate-800 p-6 rounded-3xl shadow-xl">
           <div>
             <div className="flex items-center gap-2 mb-2">
-              <span className="inline-flex items-center gap-1.5 px-3 py-1 bg-rose-500/20 text-rose-300 border border-rose-500/30 rounded-full text-xs font-bold uppercase tracking-wider">
+              <span className="inline-flex items-center gap-1.5 px-3 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded-full text-xs font-bold uppercase tracking-wider">
                 <Shield className="w-3.5 h-3.5" /> Multi-Tenant Operator Engine
               </span>
               <span className="inline-flex items-center gap-1 px-3 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded-full text-xs font-extrabold">
@@ -54,7 +54,7 @@ export default function AdminDashboard() {
             <button
               onClick={() => setActiveTab("fleet")}
               className={`px-4 py-2 rounded-xl text-xs font-extrabold transition ${
-                activeTab === "fleet" ? "bg-rose-600 text-white" : "bg-slate-800 text-slate-300 hover:bg-slate-700"
+                activeTab === "fleet" ? "bg-blue-600 text-white" : "bg-slate-800 text-slate-300 hover:bg-slate-700"
               }`}
             >
               Fleet Roster
@@ -62,7 +62,7 @@ export default function AdminDashboard() {
             <button
               onClick={() => setActiveTab("analytics")}
               className={`px-4 py-2 rounded-xl text-xs font-extrabold transition flex items-center gap-1.5 ${
-                activeTab === "analytics" ? "bg-rose-600 text-white" : "bg-slate-800 text-slate-300 hover:bg-slate-700"
+                activeTab === "analytics" ? "bg-blue-600 text-white" : "bg-slate-800 text-slate-300 hover:bg-slate-700"
               }`}
             >
               <BarChart3 className="w-3.5 h-3.5" /> Analytics
@@ -86,7 +86,7 @@ export default function AdminDashboard() {
               <div className="bg-slate-900 border border-slate-800 p-5 rounded-2xl">
                 <div className="flex items-center justify-between">
                   <span className="text-xs font-bold text-slate-400 uppercase">Registered Fleet</span>
-                  <Bus className="w-5 h-5 text-rose-500" />
+                  <Bus className="w-5 h-5 text-blue-500" />
                 </div>
                 <p className="text-3xl font-black text-white mt-2">{buses.length}</p>
               </div>
@@ -123,10 +123,10 @@ export default function AdminDashboard() {
               <div className="bg-slate-900 border border-slate-800 p-5 rounded-2xl">
                 <div className="flex items-center justify-between text-slate-400">
                   <span className="text-[10px] font-extrabold uppercase">Avg Delay</span>
-                  <Clock className="w-4 h-4 text-rose-400" />
+                  <Clock className="w-4 h-4 text-blue-400" />
                 </div>
                 <p className="text-2xl font-black text-white mt-2">
-                  {analytics?.avgDelayMinutes ?? 2.4} <span className="text-xs text-rose-400">mins</span>
+                  {analytics?.avgDelayMinutes ?? 2.4} <span className="text-xs text-blue-400">mins</span>
                 </p>
                 <p className="text-[10px] text-slate-500 mt-1">Measured across active routes</p>
               </div>
@@ -168,7 +168,7 @@ export default function AdminDashboard() {
             {/* Peak Passenger Hours Histogram */}
             <div className="bg-slate-900 border border-slate-800 p-6 rounded-3xl">
               <h3 className="text-lg font-black text-white mb-4 flex items-center gap-2">
-                <BarChart3 className="w-5 h-5 text-rose-500" /> Peak Passenger Hours Density Histogram
+                <BarChart3 className="w-5 h-5 text-blue-500" /> Peak Passenger Hours Density Histogram
               </h3>
 
               <div className="grid grid-cols-4 sm:grid-cols-8 gap-3 items-end h-48 pt-6 border-b border-slate-800 pb-2">
@@ -190,7 +190,7 @@ export default function AdminDashboard() {
                       </span>
                       <div
                         style={{ height: `${heightPercent}%` }}
-                        className="w-full bg-gradient-to-t from-rose-700 to-rose-500 rounded-t-lg transition-all duration-500 group-hover:bg-rose-400"
+                        className="w-full bg-gradient-to-t from-blue-700 to-blue-500 rounded-t-lg transition-all duration-500 group-hover:bg-blue-400"
                       />
                       <span className="text-[10px] font-mono text-slate-500">{item.hour.split(' ')[0]}</span>
                     </div>
diff --git a/frontend/src/pages/BusList.jsx b/frontend/src/pages/BusList.jsx
index 2742537..2e1828e 100644
--- a/frontend/src/pages/BusList.jsx
+++ b/frontend/src/pages/BusList.jsx
@@ -5,7 +5,7 @@ export default function BusList({ buses = [] }) {
   return (
     <div className="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm">
       <h2 className="text-xl font-black text-slate-900 mb-4 flex items-center gap-2">
-        <Bus className="w-5 h-5 text-rose-600" /> Fleet Vehicle Roster ({buses.length})
+        <Bus className="w-5 h-5 text-blue-600" /> Fleet Vehicle Roster ({buses.length})
       </h2>
 
       <div className="overflow-x-auto">
@@ -39,7 +39,7 @@ export default function BusList({ buses = [] }) {
                     <span
                       className={`px-2.5 py-0.5 text-[10px] font-extrabold uppercase rounded-full ${
                         bus.status === "Delayed"
-                          ? "bg-rose-100 text-rose-700"
+                          ? "bg-blue-100 text-blue-700"
                           : "bg-emerald-100 text-emerald-700"
                       }`}
                     >
diff --git a/frontend/src/pages/CustomerBooking.jsx b/frontend/src/pages/CustomerBooking.jsx
index 64113fd..fc44584 100644
--- a/frontend/src/pages/CustomerBooking.jsx
+++ b/frontend/src/pages/CustomerBooking.jsx
@@ -134,12 +134,12 @@ export default function CustomerBooking() {
     <div className="min-h-screen bg-slate-950 text-white py-8 px-4 sm:px-6 lg:px-8">
       <div className="max-w-5xl mx-auto space-y-6">
         {/* Banner */}
-        <div className="bg-gradient-to-r from-rose-700 via-rose-600 to-rose-800 text-white rounded-3xl p-6 sm:p-8 shadow-xl border border-rose-500/30">
-          <div className="flex items-center gap-2 text-xs font-bold text-rose-200 uppercase tracking-widest mb-1">
+        <div className="bg-gradient-to-r from-blue-700 via-blue-600 to-indigo-800 text-white rounded-3xl p-6 sm:p-8 shadow-xl border border-blue-500/30">
+          <div className="flex items-center gap-2 text-xs font-bold text-blue-200 uppercase tracking-widest mb-1">
             <ShieldCheck className="w-4 h-4 text-emerald-400" /> Stripe Commercial Checkout
           </div>
           <h1 className="text-3xl font-black">Reserve Bus Tickets</h1>
-          <p className="text-rose-100 text-sm mt-1">
+          <p className="text-blue-100 text-sm mt-1">
             Real-time seat lock, Stripe checkout encryption & PWA offline ticket storage.
           </p>
 
@@ -184,11 +184,11 @@ export default function CustomerBooking() {
               </div>
 
               <div className="text-right sm:border-l sm:border-slate-800 sm:pl-6">
-                <p className="text-2xl font-black text-rose-500">LKR 450</p>
+                <p className="text-2xl font-black text-blue-500">LKR 450</p>
                 <p className="text-xs text-slate-500">per seat</p>
                 <button
                   onClick={() => handleSelectSeatsModal(bus)}
-                  className="mt-3 px-6 py-2.5 bg-rose-600 hover:bg-rose-700 text-white font-bold text-xs rounded-xl shadow transition"
+                  className="mt-3 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs rounded-xl shadow transition"
                 >
                   Select Seats
                 </button>
@@ -218,7 +218,7 @@ export default function CustomerBooking() {
                 <div
                   className={`mt-4 p-3 rounded-xl text-xs font-bold ${
                     message.type === "error"
-                      ? "bg-rose-950 text-rose-300 border border-rose-800"
+                      ? "bg-blue-950 text-blue-300 border border-blue-800"
                       : "bg-emerald-950 text-emerald-300 border border-emerald-800"
                   }`}
                 >
@@ -246,7 +246,7 @@ export default function CustomerBooking() {
                             isBooked
                               ? "bg-slate-800 text-slate-600 cursor-not-allowed"
                               : isSelected
-                              ? "bg-rose-600 text-white shadow"
+                              ? "bg-blue-600 text-white shadow"
                               : "bg-slate-900 text-slate-300 hover:bg-slate-800 border border-slate-700"
                           }`}
                         >
@@ -264,7 +264,7 @@ export default function CustomerBooking() {
                     <button
                       onClick={handleProceedToPayment}
                       disabled={selectedSeats.length === 0}
-                      className="px-6 py-2.5 bg-rose-600 text-white font-bold text-xs rounded-xl shadow hover:bg-rose-700 disabled:opacity-50"
+                      className="px-6 py-2.5 bg-blue-600 text-white font-bold text-xs rounded-xl shadow hover:bg-blue-700 disabled:opacity-50"
                     >
                       Proceed to Checkout
                     </button>
@@ -277,7 +277,7 @@ export default function CustomerBooking() {
                   <div className="p-4 bg-slate-950 rounded-2xl border border-slate-800">
                     <div className="flex items-center justify-between text-xs text-slate-400 mb-2">
                       <span>Card Payment Gateway</span>
-                      <CreditCard className="w-4 h-4 text-rose-500" />
+                      <CreditCard className="w-4 h-4 text-blue-500" />
                     </div>
                     <p className="text-2xl font-black text-emerald-400">LKR {selectedSeats.length * 450}</p>
                     <p className="text-[10px] text-slate-500 mt-1">Encrypted via 256-bit Stripe SSL</p>
diff --git a/frontend/src/pages/CustomerDashboard.jsx b/frontend/src/pages/CustomerDashboard.jsx
index 941991c..177b37f 100644
--- a/frontend/src/pages/CustomerDashboard.jsx
+++ b/frontend/src/pages/CustomerDashboard.jsx
@@ -3,12 +3,12 @@ import { Link } from "react-router-dom";
 
 function CustomerDashboard() {
   return (
-    <div className="min-h-screen bg-gradient-to-b from-white via-rose-50/30 to-white">
+    <div className="min-h-screen bg-gradient-to-b from-white via-blue-50/30 to-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
         <div className="bg-white/80 backdrop-blur supports-[backdrop-filter]:bg-white/60 border border-slate-100 rounded-3xl shadow-sm p-4 sm:p-5">
           <div className="flex items-start sm:items-center justify-between gap-4 flex-wrap">
             <div>
-              <p className="text-xs font-semibold tracking-wider text-rose-700 bg-rose-50 border border-rose-100 px-3 py-1 rounded-full w-fit">
+              <p className="text-xs font-semibold tracking-wider text-blue-700 bg-blue-50 border border-blue-100 px-3 py-1 rounded-full w-fit">
                 MY ACCOUNT
               </p>
               <h1 className="mt-3 text-2xl sm:text-3xl font-extrabold text-slate-900">
@@ -22,7 +22,7 @@ function CustomerDashboard() {
             <div className="flex items-center gap-2">
               <Link
                 to="/Login"
-                className="bg-rose-600 text-white px-4 py-2.5 rounded-xl font-semibold hover:bg-rose-700 transition-colors shadow-sm"
+                className="bg-blue-600 text-white px-4 py-2.5 rounded-xl font-semibold hover:bg-blue-700 transition-colors shadow-sm"
               >
                 Account
               </Link>
@@ -35,7 +35,7 @@ function CustomerDashboard() {
             to="/book"
             className="bg-white border border-slate-100 rounded-3xl p-6 shadow-sm hover:shadow-md transition"
           >
-            <p className="text-xs font-semibold tracking-wider text-rose-700 bg-rose-50 border border-rose-100 px-3 py-1 rounded-full w-fit">
+            <p className="text-xs font-semibold tracking-wider text-blue-700 bg-blue-50 border border-blue-100 px-3 py-1 rounded-full w-fit">
               BOOK
             </p>
             <h2 className="mt-4 text-xl font-extrabold text-slate-900">Book Ticket</h2>
@@ -48,7 +48,7 @@ function CustomerDashboard() {
             to="/dashboard/customer/bookings"
             className="bg-white border border-slate-100 rounded-3xl p-6 shadow-sm hover:shadow-md transition"
           >
-            <p className="text-xs font-semibold tracking-wider text-rose-700 bg-rose-50 border border-rose-100 px-3 py-1 rounded-full w-fit">
+            <p className="text-xs font-semibold tracking-wider text-blue-700 bg-blue-50 border border-blue-100 px-3 py-1 rounded-full w-fit">
               TICKETS
             </p>
             <h2 className="mt-4 text-xl font-extrabold text-slate-900">My Bookings</h2>
@@ -61,7 +61,7 @@ function CustomerDashboard() {
             to="/BusMapPreview"
             className="bg-white border border-slate-100 rounded-3xl p-6 shadow-sm hover:shadow-md transition"
           >
-            <p className="text-xs font-semibold tracking-wider text-rose-700 bg-rose-50 border border-rose-100 px-3 py-1 rounded-full w-fit">
+            <p className="text-xs font-semibold tracking-wider text-blue-700 bg-blue-50 border border-blue-100 px-3 py-1 rounded-full w-fit">
               LIVE
             </p>
             <h2 className="mt-4 text-xl font-extrabold text-slate-900">Live Tracking</h2>
@@ -74,7 +74,7 @@ function CustomerDashboard() {
             to="/Login"
             className="bg-white border border-slate-100 rounded-3xl p-6 shadow-sm hover:shadow-md transition"
           >
-            <p className="text-xs font-semibold tracking-wider text-rose-700 bg-rose-50 border border-rose-100 px-3 py-1 rounded-full w-fit">
+            <p className="text-xs font-semibold tracking-wider text-blue-700 bg-blue-50 border border-blue-100 px-3 py-1 rounded-full w-fit">
               ACCOUNT
             </p>
             <h2 className="mt-4 text-xl font-extrabold text-slate-900">Profile</h2>
@@ -85,7 +85,7 @@ function CustomerDashboard() {
         </div>
 
         <div className="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-4">
-          <div className="lg:col-span-2 bg-gradient-to-r from-rose-600 to-fuchsia-600 text-white rounded-3xl p-6 sm:p-8 shadow-sm">
+          <div className="lg:col-span-2 bg-gradient-to-r from-blue-600 to-violet-600 text-white rounded-3xl p-6 sm:p-8 shadow-sm">
             <p className="text-sm font-semibold tracking-wide text-white/90">OFFERS</p>
             <h3 className="mt-2 text-2xl font-extrabold">Save more on your next booking</h3>
             <p className="mt-2 text-white/90 text-sm max-w-2xl">
@@ -94,7 +94,7 @@ function CustomerDashboard() {
             <div className="mt-4 flex flex-wrap gap-2">
               <Link
                 to="/book"
-                className="bg-white text-rose-700 px-4 py-2.5 rounded-xl font-extrabold hover:bg-rose-50 transition"
+                className="bg-white text-blue-700 px-4 py-2.5 rounded-xl font-extrabold hover:bg-blue-50 transition"
               >
                 View Deals
               </Link>
diff --git a/frontend/src/pages/LiveTracking.jsx b/frontend/src/pages/LiveTracking.jsx
index a4e17b3..efc26e6 100644
--- a/frontend/src/pages/LiveTracking.jsx
+++ b/frontend/src/pages/LiveTracking.jsx
@@ -37,7 +37,7 @@ export default function LiveTracking() {
         {/* Header */}
         <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-slate-900/80 p-6 rounded-3xl border border-slate-800 backdrop-blur-md">
           <div>
-            <div className="inline-flex items-center gap-2 px-3 py-1 bg-rose-500/10 text-rose-400 border border-rose-500/20 rounded-full text-xs font-bold uppercase tracking-wider mb-2">
+            <div className="inline-flex items-center gap-2 px-3 py-1 bg-blue-500/10 text-blue-400 border border-blue-500/20 rounded-full text-xs font-bold uppercase tracking-wider mb-2">
               <Navigation className="w-3.5 h-3.5" /> Real-time Satellite Telemetry
             </div>
             <h1 className="text-3xl font-black text-white">Live Fleet Tracking</h1>
@@ -54,7 +54,7 @@ export default function LiveTracking() {
                 placeholder="Search bus or driver..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                className="pl-9 pr-4 py-2 bg-slate-800 border border-slate-700 rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-rose-500 text-white w-48 sm:w-64"
+                className="pl-9 pr-4 py-2 bg-slate-800 border border-slate-700 rounded-xl text-xs focus:outline-none focus:ring-2 focus:ring-blue-500 text-white w-48 sm:w-64"
               />
             </div>
           </div>
@@ -77,7 +77,7 @@ export default function LiveTracking() {
             >
               <div className="flex justify-between items-start mb-3">
                 <div className="flex items-center gap-2">
-                  <div className="p-2 bg-rose-600/20 text-rose-400 rounded-lg">
+                  <div className="p-2 bg-blue-600/20 text-blue-400 rounded-lg">
                     <Bus className="w-5 h-5" />
                   </div>
                   <div>
@@ -88,7 +88,7 @@ export default function LiveTracking() {
                 <span
                   className={`px-2.5 py-1 text-[10px] font-extrabold uppercase tracking-wider rounded-full ${
                     bus.status === "Delayed"
-                      ? "bg-rose-500/20 text-rose-400 border border-rose-500/30"
+                      ? "bg-blue-500/20 text-blue-400 border border-blue-500/30"
                       : "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
                   }`}
                 >
diff --git a/frontend/src/pages/MyBookings.jsx b/frontend/src/pages/MyBookings.jsx
index 0d384f6..f7e4b57 100644
--- a/frontend/src/pages/MyBookings.jsx
+++ b/frontend/src/pages/MyBookings.jsx
@@ -81,7 +81,7 @@ export default function MyBookings() {
                       className={`px-2.5 py-0.5 text-[10px] font-extrabold uppercase rounded-full ${
                         b.status === "confirmed"
                           ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
-                          : "bg-rose-500/20 text-rose-400 border border-rose-500/30"
+                          : "bg-blue-500/20 text-blue-400 border border-blue-500/30"
                       }`}
                     >
                       {b.status}
@@ -92,7 +92,7 @@ export default function MyBookings() {
                     {b.from} → {b.to}
                   </h3>
                   <p className="text-xs text-slate-400 font-medium mt-1">
-                    Seats Reserved: <strong className="text-rose-400">{b.seats?.join(", ")}</strong>
+                    Seats Reserved: <strong className="text-blue-400">{b.seats?.join(", ")}</strong>
                   </p>
                 </div>
 
diff --git a/frontend/src/pages/Navbar.jsx b/frontend/src/pages/Navbar.jsx
index 89a4027..2c34f91 100644
--- a/frontend/src/pages/Navbar.jsx
+++ b/frontend/src/pages/Navbar.jsx
@@ -48,7 +48,7 @@ export default function Navbar() {
   const navItemClass = (path) =>
     `px-3 py-2 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 ${
       isActive(path)
-        ? "bg-lime-400 text-slate-950 shadow-lg shadow-lime-400/20"
+        ? "bg-cyan-400 text-slate-950 shadow-lg shadow-cyan-400/20"
         : "text-slate-300 hover:text-white hover:bg-slate-800/80"
     }`;
 
@@ -58,15 +58,15 @@ export default function Navbar() {
         <div className="flex items-center justify-between h-[68px]">
           {/* Brand Logo */}
           <Link to="/" className="flex items-center gap-3 group">
-            <div className="p-2.5 bg-gradient-to-tr from-lime-400 to-lime-400 rounded-lg text-slate-950 shadow-lg shadow-lime-400/20 group-hover:scale-105 transition-transform">
+            <div className="p-2.5 bg-gradient-to-tr from-cyan-400 to-cyan-400 rounded-lg text-slate-950 shadow-lg shadow-cyan-400/20 group-hover:scale-105 transition-transform">
               <Bus className="w-5 h-5" />
             </div>
             <div>
               <div className="flex items-center gap-1.5">
                 <span className="text-xl font-black tracking-tight text-white">
-                  Route<span className="text-lime-400">IQ</span>
+                  Route<span className="text-cyan-400">IQ</span>
                 </span>
-                <span className="px-2 py-0.5 text-[9px] uppercase tracking-widest font-black bg-lime-400/20 text-lime-200 rounded-full border border-lime-400/30">
+                <span className="px-2 py-0.5 text-[9px] uppercase tracking-widest font-black bg-cyan-400/20 text-cyan-200 rounded-full border border-cyan-400/30">
                   ENTERPRISE
                 </span>
               </div>
@@ -79,7 +79,7 @@ export default function Navbar() {
               {t("nav_home")}
             </Link>
             <Link to="/BusMapPreview" className={navItemClass("/BusMapPreview")}>
-              <Navigation className="w-3.5 h-3.5 text-lime-300" /> {t("nav_tracker")}
+              <Navigation className="w-3.5 h-3.5 text-cyan-300" /> {t("nav_tracker")}
               <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
             </Link>
             <Link to="/book" className={navItemClass("/book")}>
@@ -110,13 +110,13 @@ export default function Navbar() {
               <div className="flex items-center gap-3 pl-2 border-l border-slate-800">
                 <div className="text-right">
                   <p className="text-xs font-extrabold text-slate-200">{authState.user?.name || "User"}</p>
-                  <p className="text-[10px] uppercase font-bold text-lime-300 tracking-wider">
+                  <p className="text-[10px] uppercase font-bold text-cyan-300 tracking-wider">
                     {authState.role}
                   </p>
                 </div>
                 <button
                   onClick={handleLogout}
-                  className="p-2 text-slate-400 hover:text-lime-300 hover:bg-slate-800 rounded-xl transition"
+                  className="p-2 text-slate-400 hover:text-cyan-300 hover:bg-slate-800 rounded-xl transition"
                   title="Log Out"
                 >
                   <LogOut className="w-4 h-4" />
@@ -132,7 +132,7 @@ export default function Navbar() {
                 </Link>
                 <Link
                   to="/Signup"
-                  className="px-4 py-2 text-xs font-extrabold bg-lime-400 hover:bg-lime-400 text-slate-950 rounded-xl transition shadow-lg shadow-lime-400/20"
+                  className="px-4 py-2 text-xs font-extrabold bg-cyan-400 hover:bg-cyan-400 text-slate-950 rounded-xl transition shadow-lg shadow-cyan-400/20"
                 >
                   Sign Up
                 </Link>
@@ -188,7 +188,7 @@ export default function Navbar() {
                   handleLogout();
                   setMobileMenuOpen(false);
                 }}
-                className="w-full py-2.5 bg-slate-900 border border-slate-800 text-lime-300 font-bold text-xs rounded-xl flex items-center justify-center gap-2"
+                className="w-full py-2.5 bg-slate-900 border border-slate-800 text-cyan-300 font-bold text-xs rounded-xl flex items-center justify-center gap-2"
               >
                 <LogOut className="w-4 h-4" /> Log Out
               </button>
@@ -204,7 +204,7 @@ export default function Navbar() {
                 <Link
                   to="/Signup"
                   onClick={() => setMobileMenuOpen(false)}
-                  className="py-2.5 text-center font-extrabold text-xs text-slate-950 bg-lime-400 rounded-xl shadow-lg shadow-lime-400/20"
+                  className="py-2.5 text-center font-extrabold text-xs text-slate-950 bg-cyan-400 rounded-xl shadow-lg shadow-cyan-400/20"
                 >
                   Sign Up
                 </Link>