diff --git a/apps/dashboard/src/app/(dashboard)/billing/page.tsx b/apps/dashboard/src/app/(dashboard)/billing/page.tsx
index 1c3a058..7d9ac37 100644
--- a/apps/dashboard/src/app/(dashboard)/billing/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/billing/page.tsx
@@ -565,7 +565,7 @@ export default function BillingPage() {
       </div>
 
       {paymentModalRow ? (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#07101e]/30 backdrop-blur-sm" onClick={(event) => {
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-blue-950/30 backdrop-blur-sm" onClick={(event) => {
           if (event.target === event.currentTarget && !submittingPayment) setPaymentModalRow(null)
         }}>
           <div className="w-full max-w-lg rounded-3xl bg-white p-6 shadow-2xl">
diff --git a/apps/dashboard/src/app/(dashboard)/fleet/[id]/page.tsx b/apps/dashboard/src/app/(dashboard)/fleet/[id]/page.tsx
index 1873ced..6b28b61 100644
--- a/apps/dashboard/src/app/(dashboard)/fleet/[id]/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/fleet/[id]/page.tsx
@@ -538,7 +538,7 @@ export default function FleetDetailPage() {
                   <img src={src} alt={`new photo ${i + 1}`} className="object-cover w-full h-full" />
                   <button
                     onClick={() => removeNewPhoto(i)}
-                    className="absolute top-2 right-2 p-1.5 bg-[#07101e]/60 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"
+                    className="absolute top-2 right-2 p-1.5 bg-blue-950/60 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"
                   >
                     <X className="w-3.5 h-3.5" />
                   </button>
diff --git a/apps/dashboard/src/app/(dashboard)/fleet/page.tsx b/apps/dashboard/src/app/(dashboard)/fleet/page.tsx
index ca2d1f8..5e3b35f 100644
--- a/apps/dashboard/src/app/(dashboard)/fleet/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/fleet/page.tsx
@@ -111,7 +111,7 @@ function MaintenanceModal({ vehicleId, vehicleName, open, onClose, onSaved }: Ma
   if (!open) return null
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#07101e]/40" onClick={(e) => { if (e.target === e.currentTarget) handleClose() }}>
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-blue-950/40" onClick={(e) => { if (e.target === e.currentTarget) handleClose() }}>
       <div className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6">
         <h2 className="text-lg font-semibold text-slate-900 mb-1">{f.logMaintenance}</h2>
         <p className="text-sm text-slate-500 mb-5">{f.maintenanceSubtitle(vehicleName)}</p>
@@ -370,7 +370,7 @@ function AddVehicleModal({ open, onClose, onSaved }: AddVehicleModalProps) {
   const presetModels = form.make && MODELS_BY_MAKE[form.make] ? MODELS_BY_MAKE[form.make] : null
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#07101e]/40" onClick={(e) => { if (e.target === e.currentTarget) handleClose() }}>
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-blue-950/40" onClick={(e) => { if (e.target === e.currentTarget) handleClose() }}>
       <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 p-6 max-h-[90vh] overflow-y-auto">
         <h2 className="text-lg font-semibold text-slate-900 mb-5">{f.addNewVehicle}</h2>
         {error && (
@@ -562,7 +562,7 @@ function AddVehicleModal({ open, onClose, onSaved }: AddVehicleModalProps) {
                     <button
                       type="button"
                       onClick={() => removePhoto(i)}
-                      className="absolute top-1 right-1 p-0.5 bg-[#07101e]/60 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+                      className="absolute top-1 right-1 p-0.5 bg-blue-950/60 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
                     >
                       <X className="w-3 h-3" />
                     </button>
diff --git a/apps/dashboard/src/app/(dashboard)/layout.tsx b/apps/dashboard/src/app/(dashboard)/layout.tsx
index 1434906..59cb7cd 100644
--- a/apps/dashboard/src/app/(dashboard)/layout.tsx
+++ b/apps/dashboard/src/app/(dashboard)/layout.tsx
@@ -3,7 +3,7 @@ import TopBar from '@/components/layout/TopBar'
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex min-h-screen bg-[linear-gradient(180deg,#ffffff_0%,#f5f8ff_28%,#eef4ff_58%,#ffffff_100%)] transition-colors dark:bg-[linear-gradient(180deg,#0a1128_0%,#0d1b38_35%,#07101e_100%)] print:block print:min-h-0 print:bg-white">
+    <div className="flex min-h-screen bg-[linear-gradient(180deg,#ffffff_0%,#f5f8ff_28%,#eef4ff_58%,#ffffff_100%)] transition-colors dark:bg-[linear-gradient(180deg,#0f1f4a_0%,#112d6e_35%,#0d1f4f_100%)] print:block print:min-h-0 print:bg-white">
       <div className="print:hidden">
         <Sidebar />
       </div>
diff --git a/apps/dashboard/src/app/(dashboard)/notifications/page.tsx b/apps/dashboard/src/app/(dashboard)/notifications/page.tsx
index e88861e..a127be7 100644
--- a/apps/dashboard/src/app/(dashboard)/notifications/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/notifications/page.tsx
@@ -350,7 +350,7 @@ export default function DashboardNotificationsPage() {
             <select
               value={filterChannel}
               onChange={(e) => setFilterChannel(e.target.value)}
-              className="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-blue-900 dark:bg-[#0d1b38] dark:text-slate-200"
+              className="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-blue-900 dark:bg-blue-950 dark:text-slate-200"
             >
               <option value="">{copy.allChannels}</option>
               {COMPANY_CHANNELS.map((ch) => (
@@ -360,7 +360,7 @@ export default function DashboardNotificationsPage() {
             <select
               value={filterStatus}
               onChange={(e) => setFilterStatus(e.target.value)}
-              className="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-blue-900 dark:bg-[#0d1b38] dark:text-slate-200"
+              className="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-blue-900 dark:bg-blue-950 dark:text-slate-200"
             >
               <option value="">{copy.allStatuses}</option>
               {Object.keys(copy.statuses).map((s) => (
@@ -377,7 +377,7 @@ export default function DashboardNotificationsPage() {
             <div className="card overflow-hidden">
               <div className="overflow-x-auto">
                 <table className="min-w-full text-sm">
-                  <thead className="bg-slate-50 dark:bg-[#0d1b38]">
+                  <thead className="bg-slate-50 dark:bg-blue-950">
                     <tr>
                       <th className="whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{copy.date}</th>
                       <th className="whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{copy.event}</th>
@@ -389,7 +389,7 @@ export default function DashboardNotificationsPage() {
                   </thead>
                   <tbody className="divide-y divide-slate-100 dark:divide-blue-900/50">
                     {history.map((item) => (
-                      <tr key={item.id} className="hover:bg-slate-50/60 dark:hover:bg-[#0d1b38]/60">
+                      <tr key={item.id} className="hover:bg-slate-50/60 dark:hover:bg-blue-900/20">
                         <td className="whitespace-nowrap px-4 py-3 text-xs text-slate-500 dark:text-slate-400">
                           {new Date(item.createdAt).toLocaleString()}
                         </td>
@@ -428,7 +428,7 @@ export default function DashboardNotificationsPage() {
         <div className="card overflow-hidden">
           <div className="overflow-x-auto">
             <table className="min-w-full text-sm">
-              <thead className="bg-slate-50 dark:bg-[#0d1b38]">
+              <thead className="bg-slate-50 dark:bg-blue-950">
                 <tr>
                   <th className="px-4 py-3 text-left font-semibold text-slate-600 dark:text-slate-300">{copy.event}</th>
                   {COMPANY_CHANNELS.map((channel) => (
diff --git a/apps/dashboard/src/app/(dashboard)/offers/page.tsx b/apps/dashboard/src/app/(dashboard)/offers/page.tsx
index de17056..21ce8b1 100644
--- a/apps/dashboard/src/app/(dashboard)/offers/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/offers/page.tsx
@@ -540,7 +540,7 @@ export default function OffersPage() {
 
       {/* Create / Edit Modal */}
       {modalOpen && (
-        <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-[#07101e]/50 p-4">
+        <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-blue-950/50 p-4">
           <div className="relative w-full max-w-2xl my-8 card p-6" dir={isRtl ? 'rtl' : 'ltr'}>
             <h3 className="text-lg font-semibold text-slate-900 mb-5">
               {editing ? t.editOffer : t.createOffer}
@@ -778,7 +778,7 @@ export default function OffersPage() {
 
       {/* Delete confirmation */}
       {deleteTarget && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#07101e]/50 p-4">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-blue-950/50 p-4">
           <div className="card p-6 w-full max-w-sm" dir={isRtl ? 'rtl' : 'ltr'}>
             <h3 className="text-base font-semibold text-slate-900 mb-2">{t.deleteOffer}</h3>
             <p className="text-sm text-slate-600 mb-5">{t.confirmDelete}</p>
diff --git a/apps/dashboard/src/app/(dashboard)/online-reservations/page.tsx b/apps/dashboard/src/app/(dashboard)/online-reservations/page.tsx
index e9be6c9..91ff9a0 100644
--- a/apps/dashboard/src/app/(dashboard)/online-reservations/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/online-reservations/page.tsx
@@ -45,7 +45,7 @@ const STATUS_LABEL: Record<string, string> = {
 function DeclineModal({ onConfirm, onCancel, loading }: { onConfirm: (reason: string) => void; onCancel: () => void; loading: boolean }) {
   const [reason, setReason] = useState('')
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#07101e]/40 p-4" onClick={onCancel}>
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-blue-950/40 p-4" onClick={onCancel}>
       <div className="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl" onClick={(e) => e.stopPropagation()}>
         <h3 className="text-base font-semibold text-slate-900">Decline reservation</h3>
         <p className="mt-1 text-sm text-slate-500">Optionally provide a reason — it will be visible in the reservation record.</p>
diff --git a/apps/dashboard/src/app/(dashboard)/reports/page.tsx b/apps/dashboard/src/app/(dashboard)/reports/page.tsx
index c2d261c..04d5068 100644
--- a/apps/dashboard/src/app/(dashboard)/reports/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/reports/page.tsx
@@ -145,7 +145,7 @@ export default function ReportsPage() {
             <button
               key={option}
               onClick={() => setPeriod(option)}
-              className={`rounded-full px-4 py-2 text-sm font-semibold ${period === option ? 'bg-slate-900 text-white' : 'border border-slate-300 text-slate-700'}`}
+              className={`rounded-full px-4 py-2 text-sm font-semibold ${period === option ? 'bg-blue-900 text-white' : 'border border-slate-300 text-slate-700'}`}
             >
               {copy.periodLabels[option]}
             </button>
diff --git a/apps/dashboard/src/app/(dashboard)/reservations/[id]/page.tsx b/apps/dashboard/src/app/(dashboard)/reservations/[id]/page.tsx
index b2b3d54..bd18934 100644
--- a/apps/dashboard/src/app/(dashboard)/reservations/[id]/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/reservations/[id]/page.tsx
@@ -782,7 +782,7 @@ export default function ReservationDetailPage() {
                       <p className="mt-1 text-sm text-slate-600">{r.driverChargeLabel} {formatCurrency(driver.totalCharge, 'MAD')}</p>
                     </div>
                     {driver.requiresApproval && !driver.approvedAt ? (
-                      <button onClick={() => approveDriver(driver.id)} disabled={acting} className="rounded-full bg-slate-900 px-4 py-2 text-xs font-semibold text-white">
+                      <button onClick={() => approveDriver(driver.id)} disabled={acting} className="rounded-full bg-orange-600 px-4 py-2 text-xs font-semibold text-white">
                         {r.approveBtn}
                       </button>
                     ) : (
diff --git a/apps/dashboard/src/app/(dashboard)/subscription/page.tsx b/apps/dashboard/src/app/(dashboard)/subscription/page.tsx
index 4fd8d49..1225e13 100644
--- a/apps/dashboard/src/app/(dashboard)/subscription/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/subscription/page.tsx
@@ -424,7 +424,7 @@ export default function SubscriptionPage() {
               key={p}
               onClick={() => setBillingPeriod(p)}
               className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors ${
-                billingPeriod === p ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
+                billingPeriod === p ? 'bg-blue-900 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
               }`}
             >
               {p === 'MONTHLY' ? copy.monthly : copy.annual}
diff --git a/apps/dashboard/src/app/forgot-password/ForgotPasswordPageClient.tsx b/apps/dashboard/src/app/forgot-password/ForgotPasswordPageClient.tsx
index adffd88..0385075 100644
--- a/apps/dashboard/src/app/forgot-password/ForgotPasswordPageClient.tsx
+++ b/apps/dashboard/src/app/forgot-password/ForgotPasswordPageClient.tsx
@@ -93,7 +93,7 @@ export default function ForgotPasswordPageClient({ embedded = false }: { embedde
                   width={104}
                   height={104}
                   priority
-                  className="h-24 w-24 rounded-[1.75rem] border border-stone-200 bg-white p-1.5 shadow-sm transition-colors dark:border-blue-800 dark:bg-[#0d1b38]"
+                  className="h-24 w-24 rounded-[1.75rem] border border-stone-200 bg-white p-1.5 shadow-sm transition-colors dark:border-blue-800 dark:bg-blue-950"
                 />
               </a>
             </div>
@@ -101,7 +101,7 @@ export default function ForgotPasswordPageClient({ embedded = false }: { embedde
             <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">{dict.subtitle}</p>
           </div>
 
-          <section className="rounded-[2rem] border border-stone-200 bg-white p-8 shadow-sm transition-colors dark:border-blue-900 dark:bg-[#0d1b38]">
+          <section className="rounded-[2rem] border border-stone-200 bg-white p-8 shadow-sm transition-colors dark:border-blue-900 dark:bg-blue-950">
             {sent ? (
               <div className="space-y-4 text-center">
                 <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-950/50">
diff --git a/apps/dashboard/src/app/reset-password/ResetPasswordPageClient.tsx b/apps/dashboard/src/app/reset-password/ResetPasswordPageClient.tsx
index f02f393..c72fdd0 100644
--- a/apps/dashboard/src/app/reset-password/ResetPasswordPageClient.tsx
+++ b/apps/dashboard/src/app/reset-password/ResetPasswordPageClient.tsx
@@ -204,7 +204,7 @@ function ResetShell({
             <h1 className="mt-3 text-3xl font-black tracking-tight text-stone-900 dark:text-stone-100">{title}</h1>
             {subtitle && <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">{subtitle}</p>}
           </div>
-          <section className="rounded-[2rem] border border-stone-200 bg-white p-8 shadow-sm transition-colors dark:border-blue-900 dark:bg-[#0d1b38]">
+          <section className="rounded-[2rem] border border-stone-200 bg-white p-8 shadow-sm transition-colors dark:border-blue-900 dark:bg-blue-950">
             {children}
           </section>
         </div>
diff --git a/apps/dashboard/src/app/sign-in/[[...sign-in]]/SignInPageClient.tsx b/apps/dashboard/src/app/sign-in/[[...sign-in]]/SignInPageClient.tsx
index dfc30c4..4f1d02d 100644
--- a/apps/dashboard/src/app/sign-in/[[...sign-in]]/SignInPageClient.tsx
+++ b/apps/dashboard/src/app/sign-in/[[...sign-in]]/SignInPageClient.tsx
@@ -150,7 +150,7 @@ export default function SignInPageClient({ embedded = false }: { embedded?: bool
                   width={104}
                   height={104}
                   priority
-                  className="h-24 w-24 rounded-[1.75rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm transition-colors dark:border-blue-800 dark:bg-[#0d1b38]/80"
+                  className="h-24 w-24 rounded-[1.75rem] border border-stone-200/80 bg-white/85 p-1.5 shadow-sm transition-colors dark:border-blue-800 dark:bg-blue-950/80"
                 />
               </a>
             </div>
@@ -181,7 +181,7 @@ export default function SignInPageClient({ embedded = false }: { embedded?: bool
             </div>
           </div>
 
-          <section className="rounded-[2rem] border border-stone-200/80 bg-white/82 p-8 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:border-blue-900 dark:bg-[#0d1b38]/78 dark:shadow-[0_30px_80px_rgba(0,0,0,0.26)]">
+          <section className="rounded-[2rem] border border-stone-200/80 bg-white/82 p-8 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:border-blue-900 dark:bg-blue-950/78 dark:shadow-[0_30px_80px_rgba(0,0,0,0.26)]">
             <LocalSignInForm dict={dict} />
           </section>
         </div>
@@ -334,7 +334,7 @@ function LocalSignInForm({
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="owner@company.com"
-              className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-[#07101e]/80 dark:text-stone-100 dark:placeholder:text-stone-500"
+              className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-blue-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
             />
           </div>
 
@@ -347,7 +347,7 @@ function LocalSignInForm({
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="••••••••"
-                className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 pr-10 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-[#07101e]/80 dark:text-stone-100 dark:placeholder:text-stone-500"
+                className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 pr-10 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-blue-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
               />
               <button
                 type="button"
@@ -372,7 +372,7 @@ function LocalSignInForm({
           <button
             type="submit"
             disabled={loading}
-            className="inline-flex w-full justify-center rounded-full bg-stone-950 px-6 py-3 text-sm font-semibold text-white transition hover:bg-stone-800 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300"
+            className="inline-flex w-full justify-center rounded-full bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300"
           >
             {loading ? dict.signingIn : dict.signIn}
           </button>
@@ -385,7 +385,7 @@ function LocalSignInForm({
         </form>
       ) : (
         <form onSubmit={handleTotp} className="space-y-5">
-          <div className="rounded-[1.5rem] border border-stone-200/80 bg-stone-50/90 px-4 py-4 text-center text-sm text-stone-600 dark:border-blue-800 dark:bg-[#07101e]/50 dark:text-stone-300">
+          <div className="rounded-[1.5rem] border border-stone-200/80 bg-stone-50/90 px-4 py-4 text-center text-sm text-stone-600 dark:border-blue-800 dark:bg-blue-950/50 dark:text-stone-300">
             {dict.enterCode}
           </div>
 
@@ -400,14 +400,14 @@ function LocalSignInForm({
               value={totpCode}
               onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, ''))}
               placeholder="000000"
-              className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-center text-xl tracking-[0.45em] text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-[#07101e]/80 dark:text-stone-100 dark:placeholder:text-stone-500"
+              className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-center text-xl tracking-[0.45em] text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-blue-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
             />
           </div>
 
           <button
             type="submit"
             disabled={loading}
-            className="inline-flex w-full justify-center rounded-full bg-stone-950 px-6 py-3 text-sm font-semibold text-white transition hover:bg-stone-800 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300"
+            className="inline-flex w-full justify-center rounded-full bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300"
           >
             {loading ? dict.verifying : dict.verify}
           </button>
diff --git a/apps/dashboard/src/app/sign-up/[[...sign-up]]/page.tsx b/apps/dashboard/src/app/sign-up/[[...sign-up]]/page.tsx
index 86b152e..36c203e 100644
--- a/apps/dashboard/src/app/sign-up/[[...sign-up]]/page.tsx
+++ b/apps/dashboard/src/app/sign-up/[[...sign-up]]/page.tsx
@@ -544,7 +544,7 @@ export default function SignUpPage() {
                   width={104}
                   height={104}
                   priority
-                  className="h-24 w-24 rounded-[1.75rem] border border-blue-100 bg-white p-1.5 shadow-sm transition-colors dark:border-slate-700 dark:bg-slate-900"
+                  className="h-24 w-24 rounded-[1.75rem] border border-blue-100 bg-white p-1.5 shadow-sm transition-colors dark:border-slate-700 dark:bg-blue-950"
                 />
               </a>
             </div>
@@ -586,7 +586,7 @@ export default function SignUpPage() {
                   width={104}
                   height={104}
                   priority
-                  className="h-24 w-24 rounded-[1.75rem] border border-blue-100 bg-white p-1.5 shadow-sm transition-colors dark:border-slate-700 dark:bg-slate-900"
+                  className="h-24 w-24 rounded-[1.75rem] border border-blue-100 bg-white p-1.5 shadow-sm transition-colors dark:border-slate-700 dark:bg-blue-950"
                 />
               </a>
             </div>
@@ -597,7 +597,7 @@ export default function SignUpPage() {
 
           <div className="grid gap-3 sm:grid-cols-4">
             {dict.steps.map((label, index) => (
-              <div key={label} className={`rounded-full px-4 py-2 text-center text-sm font-semibold ${index + 1 <= step ? 'bg-slate-900 text-white' : 'border border-slate-200 bg-white text-slate-500'}`}>
+              <div key={label} className={`rounded-full px-4 py-2 text-center text-sm font-semibold ${index + 1 <= step ? 'bg-blue-900 text-white' : 'border border-slate-200 bg-white text-slate-500'}`}>
                 {label}
               </div>
             ))}
@@ -633,7 +633,7 @@ export default function SignUpPage() {
                         }}
                         className={`rounded-2xl border py-3 text-sm font-semibold transition ${
                           form.preferredLanguage === lang
-                            ? 'border-slate-900 bg-slate-900 text-white'
+                            ? 'border-blue-900 bg-blue-900 text-white'
                             : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50'
                         }`}
                       >
@@ -718,7 +718,7 @@ export default function SignUpPage() {
                       key={plan}
                       type="button"
                       onClick={() => setForm((current) => ({ ...current, plan }))}
-                      className={`rounded-3xl border p-5 text-left ${form.plan === plan ? 'border-slate-900 bg-slate-900 text-white' : 'border-slate-200 bg-white text-slate-900'}`}
+                      className={`rounded-3xl border p-5 text-left ${form.plan === plan ? 'border-blue-900 bg-blue-900 text-white' : 'border-slate-200 bg-white text-slate-900'}`}
                     >
                       <p className="text-xs font-semibold uppercase tracking-[0.16em]">{plan}</p>
                       <p className="mt-3 text-sm opacity-80">{dict.planDescriptions[plan]}</p>
diff --git a/apps/dashboard/src/components/I18nProvider.tsx b/apps/dashboard/src/components/I18nProvider.tsx
index 5c1ca7a..fb7d75c 100644
--- a/apps/dashboard/src/components/I18nProvider.tsx
+++ b/apps/dashboard/src/components/I18nProvider.tsx
@@ -1579,7 +1579,7 @@ export function DashboardLanguageSwitcher() {
       <button
         type="button"
         onClick={() => setOpen((o) => !o)}
-        className="flex w-full items-center justify-between gap-1.5 rounded-xl border border-stone-200/80 bg-white/95 px-3 py-2 text-xs font-semibold text-stone-700 shadow-sm transition hover:bg-stone-50 dark:border-blue-800 dark:bg-[#0d1b38]/85 dark:text-stone-200 dark:hover:bg-[#162038]"
+        className="flex w-full items-center justify-between gap-1.5 rounded-xl border border-stone-200/80 bg-white/95 px-3 py-2 text-xs font-semibold text-stone-700 shadow-sm transition hover:bg-stone-50 dark:border-blue-800 dark:bg-blue-950/85 dark:text-stone-200 dark:hover:bg-blue-900/40"
       >
         <span className="flex items-center gap-1.5">
           <span aria-hidden="true">{current.flag}</span>
@@ -1591,7 +1591,7 @@ export function DashboardLanguageSwitcher() {
       </button>
 
       {open && (
-        <div className="absolute bottom-full left-0 mb-1.5 w-full overflow-hidden rounded-xl border border-stone-200/80 bg-white shadow-lg dark:border-blue-800 dark:bg-[#0d1b38]">
+        <div className="absolute bottom-full left-0 mb-1.5 w-full overflow-hidden rounded-xl border border-stone-200/80 bg-white shadow-lg dark:border-blue-800 dark:bg-blue-950">
           {(['en', 'fr', 'ar'] as DashboardLanguage[]).map((value) => {
             const meta = languageMeta[value]
             const active = value === language
@@ -1603,7 +1603,7 @@ export function DashboardLanguageSwitcher() {
                 className={`flex w-full items-center gap-2 px-3 py-2 text-xs font-semibold transition-colors ${
                   active
                     ? 'bg-blue-900 text-white dark:bg-orange-500 dark:text-white'
-                    : 'text-stone-700 hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-[#162038]'
+                    : 'text-stone-700 hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-blue-900/40'
                 }`}
               >
                 <span aria-hidden="true">{meta.flag}</span>
@@ -1643,7 +1643,7 @@ export function DashboardThemeSwitcher() {
       <button
         type="button"
         onClick={() => setOpen((o) => !o)}
-        className="flex w-full items-center justify-between gap-1.5 rounded-xl border border-stone-200/80 bg-white/95 px-3 py-2 text-xs font-semibold text-stone-700 shadow-sm transition hover:bg-stone-50 dark:border-blue-800 dark:bg-[#0d1b38]/85 dark:text-stone-200 dark:hover:bg-[#162038]"
+        className="flex w-full items-center justify-between gap-1.5 rounded-xl border border-stone-200/80 bg-white/95 px-3 py-2 text-xs font-semibold text-stone-700 shadow-sm transition hover:bg-stone-50 dark:border-blue-800 dark:bg-blue-950/85 dark:text-stone-200 dark:hover:bg-blue-900/40"
       >
         <span className="flex items-center gap-1.5">
           {theme === 'light' ? (
@@ -1663,7 +1663,7 @@ export function DashboardThemeSwitcher() {
       </button>
 
       {open && (
-        <div className="absolute bottom-full left-0 mb-1.5 w-full overflow-hidden rounded-xl border border-stone-200/80 bg-white shadow-lg dark:border-blue-800 dark:bg-[#0d1b38]">
+        <div className="absolute bottom-full left-0 mb-1.5 w-full overflow-hidden rounded-xl border border-stone-200/80 bg-white shadow-lg dark:border-blue-800 dark:bg-blue-950">
           {(['light', 'dark'] as DashboardTheme[]).map((value) => {
             const active = value === theme
             return (
@@ -1674,7 +1674,7 @@ export function DashboardThemeSwitcher() {
                 className={`flex w-full items-center gap-2 px-3 py-2 text-xs font-semibold transition-colors ${
                   active
                     ? 'bg-blue-900 text-white dark:bg-orange-500 dark:text-white'
-                    : 'text-stone-700 hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-[#162038]'
+                    : 'text-stone-700 hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-blue-900/40'
                 }`}
               >
                 {value === 'light' ? (
diff --git a/apps/dashboard/src/components/VehicleCalendar.tsx b/apps/dashboard/src/components/VehicleCalendar.tsx
index 0353757..7c1301f 100644
--- a/apps/dashboard/src/components/VehicleCalendar.tsx
+++ b/apps/dashboard/src/components/VehicleCalendar.tsx
@@ -336,7 +336,7 @@ export default function VehicleCalendar({ vehicleId }: Props) {
 
       {/* Add Block Modal */}
       {showModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-[#07101e]/40 backdrop-blur-sm" onClick={closeModal}>
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-blue-950/40 backdrop-blur-sm" onClick={closeModal}>
           <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md p-6 space-y-4" onClick={(e) => e.stopPropagation()}>
             <div className="flex items-center justify-between">
               <h4 className="text-base font-semibold text-slate-900">{c.modalTitle}</h4>
diff --git a/apps/dashboard/src/components/layout/PublicFooter.tsx b/apps/dashboard/src/components/layout/PublicFooter.tsx
index 30fad29..203edab 100644
--- a/apps/dashboard/src/components/layout/PublicFooter.tsx
+++ b/apps/dashboard/src/components/layout/PublicFooter.tsx
@@ -111,7 +111,7 @@ export default function PublicFooter() {
   }, [])
 
   return (
-    <footer className="border-t border-stone-200/80 bg-white/72 px-4 py-8 text-stone-600 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-[#07101e]/72 dark:text-stone-300">
+    <footer className="border-t border-stone-200/80 bg-white/72 px-4 py-8 text-stone-600 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-blue-950/72 dark:text-stone-300">
       <div className="mx-auto flex max-w-7xl flex-col items-center gap-5 px-0 text-center sm:px-2 lg:px-0">
         <nav className="flex flex-wrap items-center justify-center gap-y-3 text-sm">
           {footerContent.primary.map((item, index) => (
@@ -144,7 +144,7 @@ export default function PublicFooter() {
               <ChevronDown className={`h-4 w-4 transition-transform ${localeMenuOpen ? 'rotate-180' : ''}`} />
             </button>
             {localeMenuOpen ? (
-              <div className="absolute left-1/2 top-full z-20 mt-3 w-56 -translate-x-1/2 overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-[#07101e]/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
+              <div className="absolute left-1/2 top-full z-20 mt-3 w-56 -translate-x-1/2 overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
                 {availableLocaleOptions.map((option) => (
                   <button
                     key={option.value}
@@ -153,7 +153,7 @@ export default function PublicFooter() {
                       setLanguage(option.value)
                       setLocaleMenuOpen(false)
                     }}
-                    className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-[#0d1b38] dark:hover:text-white"
+                    className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
                   >
                     <span aria-hidden="true" className="text-base leading-none">{option.flag}</span>
                     <span>{option.label}</span>
diff --git a/apps/dashboard/src/components/layout/PublicHeader.tsx b/apps/dashboard/src/components/layout/PublicHeader.tsx
index fa5d967..404d612 100644
--- a/apps/dashboard/src/components/layout/PublicHeader.tsx
+++ b/apps/dashboard/src/components/layout/PublicHeader.tsx
@@ -105,7 +105,7 @@ export default function PublicHeader() {
   const signUpHref = `/sign-up?${signUpParams.toString()}`
 
   return (
-    <header className="sticky top-0 z-30 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl shadow-[0_10px_30px_rgba(15,23,42,0.06)] transition-colors dark:border-blue-900 dark:bg-[#07101e]/76 dark:shadow-[0_10px_30px_rgba(0,0,0,0.28)]">
+    <header className="sticky top-0 z-30 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl shadow-[0_10px_30px_rgba(15,23,42,0.06)] transition-colors dark:border-blue-900 dark:bg-blue-950/76 dark:shadow-[0_10px_30px_rgba(0,0,0,0.28)]">
       <div className="mx-auto flex max-w-7xl flex-col gap-1.5 px-4 py-1.5 sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:gap-3 lg:px-8 lg:py-2">
         <a href={marketplaceUrl} className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-[0.14em] text-blue-950 dark:text-slate-100 sm:text-sm sm:tracking-[0.2em]">
           <Image
@@ -121,13 +121,13 @@ export default function PublicHeader() {
 
         <div className="flex flex-col gap-1.5 lg:flex-row lg:items-center lg:gap-3">
           <nav className="flex items-center gap-0.5 overflow-x-auto">
-            <a href={marketplaceUrl} className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-300 dark:hover:bg-[#162038] dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm">
+            <a href={marketplaceUrl} className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm">
               {dict.home}
             </a>
-            <a href={`${marketplaceUrl}/explore`} className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-300 dark:hover:bg-[#162038] dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm">
+            <a href={`${marketplaceUrl}/explore`} className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm">
               {dict.marketplace}
             </a>
-            <a href={signInHref} className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-300 dark:hover:bg-[#162038] dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm">
+            <a href={signInHref} className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm">
               {dict.signIn}
             </a>
             <Link href={signUpHref} className="ml-1 rounded-full bg-blue-900 px-3 py-1 text-[12px] font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300 sm:ml-2 sm:px-5 sm:py-2 sm:text-sm">
@@ -135,12 +135,12 @@ export default function PublicHeader() {
             </Link>
           </nav>
           <div className="shrink-0">
-            <div className="flex items-center self-start rounded-full border border-stone-200/80 bg-white/95 p-0.5 shadow-sm dark:border-blue-800 dark:bg-[#0d1b38]/85 sm:self-auto sm:p-1">
+            <div className="flex items-center self-start rounded-full border border-stone-200/80 bg-white/95 p-0.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/85 sm:self-auto sm:p-1">
               <div ref={localeMenuRef} className="relative">
                 <button
                   type="button"
                   onClick={toggleLocaleMenu}
-                  className="inline-flex min-w-[4.75rem] items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-[11px] font-semibold text-stone-700 transition hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-[#162038] sm:min-w-[5.25rem] sm:px-3 sm:py-2 sm:text-xs"
+                  className="inline-flex min-w-[4.75rem] items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-[11px] font-semibold text-stone-700 transition hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-blue-900/40 sm:min-w-[5.25rem] sm:px-3 sm:py-2 sm:text-xs"
                   aria-expanded={localeMenuOpen}
                   aria-haspopup="menu"
                 >
@@ -149,7 +149,7 @@ export default function PublicHeader() {
                   <ChevronDown className={`h-3.5 w-3.5 transition-transform ${localeMenuOpen ? 'rotate-180' : ''}`} />
                 </button>
                 {localeMenuOpen ? (
-                  <div className={`absolute top-full z-30 mt-2 w-48 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-[#07101e]/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}>
+                  <div className={`absolute top-full z-30 mt-2 w-48 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}>
                     {availableLanguages.map((option) => (
                       <button
                         key={option.value}
@@ -158,7 +158,7 @@ export default function PublicHeader() {
                           setLanguage(option.value)
                           setLocaleMenuOpen(false)
                         }}
-                        className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-[#0d1b38] dark:hover:text-white"
+                        className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
                       >
                         <span aria-hidden="true">{option.flag}</span>
                         <span>{option.shortLabel}</span>
@@ -172,7 +172,7 @@ export default function PublicHeader() {
                 <button
                   type="button"
                   onClick={toggleThemeMenu}
-                  className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 transition hover:bg-stone-100 dark:hover:bg-[#162038] sm:px-2.5 sm:py-1.5"
+                  className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 transition hover:bg-stone-100 dark:hover:bg-blue-900/40 sm:px-2.5 sm:py-1.5"
                   aria-expanded={themeMenuOpen}
                   aria-haspopup="menu"
                 >
@@ -182,7 +182,7 @@ export default function PublicHeader() {
                   <ChevronDown className={`h-3.5 w-3.5 text-stone-500 transition-transform dark:text-stone-400 ${themeMenuOpen ? 'rotate-180' : ''}`} />
                 </button>
                 {themeMenuOpen ? (
-                  <div className={`absolute top-full z-30 mt-2 w-44 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-[#07101e]/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}>
+                  <div className={`absolute top-full z-30 mt-2 w-44 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}>
                     {themeOptions
                       .filter((option) => option.value !== theme)
                       .map((option) => (
@@ -193,7 +193,7 @@ export default function PublicHeader() {
                             setTheme(option.value)
                             setThemeMenuOpen(false)
                           }}
-                          className="flex w-full items-center justify-between px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-[#0d1b38] dark:hover:text-white"
+                          className="flex w-full items-center justify-between px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
                         >
                           <span>{option.label}</span>
                         </button>
diff --git a/apps/dashboard/src/components/layout/PublicShell.tsx b/apps/dashboard/src/components/layout/PublicShell.tsx
index b153a80..9b610c6 100644
--- a/apps/dashboard/src/components/layout/PublicShell.tsx
+++ b/apps/dashboard/src/components/layout/PublicShell.tsx
@@ -11,7 +11,7 @@ export default function PublicShell({
   embedded?: boolean
 }) {
   return (
-    <div className="flex min-h-screen flex-col bg-[linear-gradient(180deg,#ffffff_0%,#f5f8ff_28%,#eef4ff_58%,#ffffff_100%)] text-blue-950 transition-colors dark:bg-[linear-gradient(180deg,#0a1128_0%,#0d1b38_35%,#07101e_100%)] dark:text-slate-100">
+    <div className="flex min-h-screen flex-col bg-[linear-gradient(180deg,#ffffff_0%,#f5f8ff_28%,#eef4ff_58%,#ffffff_100%)] text-blue-950 transition-colors dark:bg-[linear-gradient(180deg,#0f1f4a_0%,#112d6e_35%,#0d1f4f_100%)] dark:text-slate-100">
       {embedded ? null : <PublicHeader />}
       <div className="flex flex-1 flex-col">{children}</div>
       {embedded ? null : <PublicFooter />}
diff --git a/apps/dashboard/src/components/layout/Sidebar.tsx b/apps/dashboard/src/components/layout/Sidebar.tsx
index c2e3393..908b3de 100644
--- a/apps/dashboard/src/components/layout/Sidebar.tsx
+++ b/apps/dashboard/src/components/layout/Sidebar.tsx
@@ -182,7 +182,7 @@ export default function Sidebar() {
       {/* Mobile backdrop */}
       {open && (
         <div
-          className="fixed inset-0 z-30 bg-[#07101e]/50 lg:hidden"
+          className="fixed inset-0 z-30 bg-blue-950/50 lg:hidden"
           onClick={() => setOpen(false)}
         />
       )}
@@ -233,7 +233,7 @@ export default function Sidebar() {
                 href={item.href}
                 className={[
                   'flex items-center gap-3 rounded-2xl px-3 py-2.5 text-sm font-medium transition-colors',
-                  active ? 'bg-orange-500 text-white' : 'text-slate-400 hover:bg-[#162038] hover:text-white',
+                  active ? 'bg-orange-500 text-white' : 'text-slate-400 hover:bg-blue-900/40 hover:text-white',
                 ].join(' ')}
               >
                 <Icon className="h-4 w-4 flex-shrink-0" />
@@ -255,7 +255,7 @@ export default function Sidebar() {
           </div>
           <button
             onClick={signOut}
-            className="mt-2 flex w-full items-center gap-3 rounded-2xl px-3 py-2 text-sm text-slate-400 transition-colors hover:bg-[#162038] hover:text-white"
+            className="mt-2 flex w-full items-center gap-3 rounded-2xl px-3 py-2 text-sm text-slate-400 transition-colors hover:bg-blue-900/40 hover:text-white"
           >
             <LogOut className="h-4 w-4" />
             {dict.signOut}
diff --git a/apps/dashboard/src/components/layout/TopBar.tsx b/apps/dashboard/src/components/layout/TopBar.tsx
index 9020cd6..c3cf8da 100644
--- a/apps/dashboard/src/components/layout/TopBar.tsx
+++ b/apps/dashboard/src/components/layout/TopBar.tsx
@@ -177,14 +177,14 @@ export default function TopBar() {
   }
 
   return (
-    <header className="flex h-16 items-center justify-between border-b border-stone-200/80 bg-white/78 px-6 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-[#07101e]/76">
+    <header className="flex h-16 items-center justify-between border-b border-stone-200/80 bg-white/78 px-6 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-blue-950/76">
       <h1 className="text-lg font-semibold text-blue-950 dark:text-stone-50">{title}</h1>
 
       <div className="flex items-center gap-3">
         <div className="relative">
           <button
             onClick={() => setShowNotifs(!showNotifs)}
-            className="relative rounded-2xl p-2 text-stone-500 transition-colors hover:bg-stone-100 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-[#162038] dark:hover:text-stone-100"
+            className="relative rounded-2xl p-2 text-stone-500 transition-colors hover:bg-stone-100 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-blue-900/40 dark:hover:text-stone-100"
           >
             <Bell className="h-5 w-5" />
             {unreadCount > 0 ? (
@@ -195,7 +195,7 @@ export default function TopBar() {
           </button>
 
           {showNotifs ? (
-            <div className="absolute right-0 top-full z-50 mt-2 w-80 rounded-[1.75rem] border border-stone-200/80 bg-white/95 p-4 shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-[#07101e]/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
+            <div className="absolute right-0 top-full z-50 mt-2 w-80 rounded-[1.75rem] border border-stone-200/80 bg-white/95 p-4 shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
               <div className="mb-2 flex items-center justify-between gap-2">
                 <p className="text-sm font-medium text-blue-950 dark:text-stone-100">{dict.notifications}</p>
                 <button
@@ -221,7 +221,7 @@ export default function TopBar() {
                       type="button"
                       onClick={() => openNotificationsInbox(notification.id)}
                       className={[
-                        'w-full rounded-2xl px-3 py-2 text-left transition-colors hover:bg-stone-100 dark:hover:bg-[#162038]',
+                        'w-full rounded-2xl px-3 py-2 text-left transition-colors hover:bg-stone-100 dark:hover:bg-blue-900/40',
                         notification.readAt ? 'opacity-80' : '',
                       ].join(' ')}
                     >
diff --git a/apps/dashboard/src/components/reservations/DamageInspectionCard.tsx b/apps/dashboard/src/components/reservations/DamageInspectionCard.tsx
index 48994a8..958fd57 100644
--- a/apps/dashboard/src/components/reservations/DamageInspectionCard.tsx
+++ b/apps/dashboard/src/components/reservations/DamageInspectionCard.tsx
@@ -187,7 +187,7 @@ export default function DamageInspectionCard({
                 type="button"
                 onClick={() => setDamageType(option)}
                 disabled={!editable}
-                className={`rounded-full px-3 py-1.5 font-semibold ${damageType === option ? 'bg-slate-900 text-white' : 'bg-white text-slate-600'}`}
+                className={`rounded-full px-3 py-1.5 font-semibold ${damageType === option ? 'bg-blue-700 text-white' : 'bg-white text-slate-600'}`}
               >
                 {r.damageTypeLabels[option]}
               </button>
@@ -214,7 +214,7 @@ export default function DamageInspectionCard({
                 {r.inspectionCardTitle('CHECKIN')}
               </span>
               <span className="inline-flex items-center gap-2">
-                <span className="h-3.5 w-3.5 rounded-full bg-slate-900" />
+                <span className="h-3.5 w-3.5 rounded-full bg-blue-700" />
                 {r.inspectionCardTitle('CHECKOUT')}
               </span>
             </div>
diff --git a/apps/dashboard/src/components/team/EditMemberModal.tsx b/apps/dashboard/src/components/team/EditMemberModal.tsx
index c1d7536..983bb42 100644
--- a/apps/dashboard/src/components/team/EditMemberModal.tsx
+++ b/apps/dashboard/src/components/team/EditMemberModal.tsx
@@ -177,7 +177,7 @@ export default function EditMemberModal({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-[#07101e]/30 backdrop-blur-sm"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-blue-950/30 backdrop-blur-sm"
       onClick={(e) => { if (e.target === e.currentTarget && !busy) onClose() }}
     >
       <div
diff --git a/apps/dashboard/src/components/team/InviteModal.tsx b/apps/dashboard/src/components/team/InviteModal.tsx
index 014e5da..66eb3d3 100644
--- a/apps/dashboard/src/components/team/InviteModal.tsx
+++ b/apps/dashboard/src/components/team/InviteModal.tsx
@@ -136,7 +136,7 @@ export default function InviteModal({ open, onClose, onInvite }: Props) {
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-[#07101e]/30 backdrop-blur-sm"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-blue-950/30 backdrop-blur-sm"
       onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
     >
       <div
diff --git a/apps/marketplace/src/app/(public)/HomeContent.tsx b/apps/marketplace/src/app/(public)/HomeContent.tsx
index 5f761f9..69ba083 100644
--- a/apps/marketplace/src/app/(public)/HomeContent.tsx
+++ b/apps/marketplace/src/app/(public)/HomeContent.tsx
@@ -52,7 +52,7 @@ export default function HomeContent() {
         <div className="shell relative py-10 sm:py-14 lg:py-20">
           <div className={`grid gap-8 ${hasSection('hero') && hasSection('surface') ? 'lg:grid-cols-[minmax(0,1.15fr)_24rem] lg:items-stretch xl:grid-cols-[minmax(0,1.2fr)_28rem]' : ''}`}>
             {hasSection('hero') ? (
-            <div className="rounded-[2rem] border border-stone-200/80 bg-white/80 p-7 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur dark:border-blue-900 dark:bg-[#0d1b38]/70">
+            <div className="rounded-[2rem] border border-stone-200/80 bg-white/80 p-7 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/70">
               <p className="text-xs font-bold uppercase tracking-[0.32em] text-orange-700 dark:text-orange-300">{dict.heroKicker}</p>
               <h1 className="mt-5 max-w-4xl text-5xl font-black leading-none tracking-[-0.04em] text-blue-950 dark:text-stone-50 sm:text-6xl lg:text-7xl">
                 {dict.heroTitle}
@@ -70,7 +70,7 @@ export default function HomeContent() {
                 </a>
                 <a
                   href="/explore"
-                  className="rounded-full border border-stone-300 bg-white/85 px-6 py-3 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-blue-800 dark:bg-[#07101e]/30 dark:text-stone-200 dark:hover:border-stone-200 dark:hover:text-white"
+                  className="rounded-full border border-stone-300 bg-white/85 px-6 py-3 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-blue-800 dark:bg-blue-950/30 dark:text-stone-200 dark:hover:border-stone-200 dark:hover:text-white"
                 >
                   {dict.exploreVehicles}
                 </a>
@@ -78,7 +78,7 @@ export default function HomeContent() {
 
               <div className="mt-10 grid gap-3 sm:grid-cols-3">
                 {dict.metrics.map(({ value, label }) => (
-                  <div key={value} className="rounded-[1.5rem] border border-stone-200/80 bg-stone-50/90 p-4 dark:border-blue-900 dark:bg-[#07101e]/50">
+                  <div key={value} className="rounded-[1.5rem] border border-stone-200/80 bg-stone-50/90 p-4 dark:border-blue-900 dark:bg-blue-950/50">
                     <p className="text-xs font-bold tracking-[0.28em] text-stone-400 dark:text-stone-500">{value}</p>
                     <p className="mt-3 text-sm font-semibold leading-6 text-stone-900 dark:text-stone-100">{label}</p>
                   </div>
@@ -126,7 +126,7 @@ export default function HomeContent() {
           </div>
 
           {hasSection('audiences') ? <div className="mt-8 grid gap-4 lg:grid-cols-[1.15fr_0.85fr]">
-            <article className="rounded-[2rem] border border-stone-200/80 bg-white/80 p-7 backdrop-blur dark:border-blue-900 dark:bg-[#0d1b38]/60">
+            <article className="rounded-[2rem] border border-stone-200/80 bg-white/80 p-7 backdrop-blur dark:border-blue-900 dark:bg-blue-950/60">
               <p className="text-xs font-bold uppercase tracking-[0.24em] text-stone-500 dark:text-stone-400">{dict.companyKicker}</p>
               <h2 className="mt-4 text-2xl font-black tracking-[-0.03em] text-blue-950 dark:text-stone-50 sm:text-3xl">{dict.companyTitle}</h2>
               <p className="mt-4 max-w-3xl text-sm leading-7 text-stone-600 dark:text-stone-300">{dict.companyBody}</p>
@@ -148,7 +148,7 @@ export default function HomeContent() {
               className={`rounded-[2rem] border p-7 shadow-sm ${
                 index === 1
                   ? 'border-orange-700 bg-orange-600 text-white dark:border-orange-500 dark:bg-orange-500 dark:text-white'
-                  : 'border-stone-200 bg-white dark:border-blue-900 dark:bg-[#0d1b38]'
+                  : 'border-stone-200 bg-white dark:border-blue-900 dark:bg-blue-950'
               }`}
             >
               <p
@@ -178,7 +178,7 @@ export default function HomeContent() {
             <p className="text-xs font-bold uppercase tracking-[0.24em] text-stone-500 dark:text-stone-400">{dict.featureLabel}</p>
             <div className="mt-6 space-y-3">
               {dict.features.map((item, index) => (
-                <div key={item} className="flex items-start gap-4 rounded-[1.25rem] border border-stone-200/80 bg-white/85 px-4 py-4 dark:border-blue-800 dark:bg-[#07101e]/40">
+                <div key={item} className="flex items-start gap-4 rounded-[1.25rem] border border-stone-200/80 bg-white/85 px-4 py-4 dark:border-blue-800 dark:bg-blue-950/40">
                   <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-orange-600 text-xs font-bold text-white dark:bg-orange-500 dark:text-white">
                     {index + 1}
                   </span>
@@ -190,7 +190,7 @@ export default function HomeContent() {
           ) : <div />}
 
           {hasSection('steps') ? (
-          <div className="rounded-[2rem] border border-stone-200 bg-white p-8 shadow-sm dark:border-blue-900 dark:bg-[#0d1b38]">
+          <div className="rounded-[2rem] border border-stone-200 bg-white p-8 shadow-sm dark:border-blue-900 dark:bg-blue-950">
             <div className="flex items-end justify-between gap-4">
               <div>
                 <p className="text-xs font-bold uppercase tracking-[0.24em] text-orange-700 dark:text-orange-300">{dict.readyKicker}</p>
@@ -200,7 +200,7 @@ export default function HomeContent() {
 
             <div className="mt-8 space-y-4">
               {dict.steps.map(({ step, title, body }) => (
-                <article key={step} className="rounded-[1.5rem] border border-stone-200 bg-stone-50 p-5 dark:border-blue-900 dark:bg-[#07101e]">
+                <article key={step} className="rounded-[1.5rem] border border-stone-200 bg-stone-50 p-5 dark:border-blue-900 dark:bg-blue-950">
                   <p className="text-xs font-bold uppercase tracking-[0.24em] text-stone-500 dark:text-stone-400">
                     {dict.stepLabel} {step}
                   </p>
diff --git a/apps/marketplace/src/app/(public)/explore/ExploreSearchForm.tsx b/apps/marketplace/src/app/(public)/explore/ExploreSearchForm.tsx
index 529cad2..408cd02 100644
--- a/apps/marketplace/src/app/(public)/explore/ExploreSearchForm.tsx
+++ b/apps/marketplace/src/app/(public)/explore/ExploreSearchForm.tsx
@@ -26,8 +26,8 @@ function toUtcDateTime(date: string, time: string) {
   return `${date}T${time || '10:00'}:00.000Z`
 }
 
-const inputBase = 'w-full border-0 bg-white dark:bg-[#162038] px-4 py-4 text-sm text-stone-900 dark:text-stone-100 outline-none placeholder:text-stone-400 dark:placeholder:text-stone-500'
-const selectBase = 'w-full border-0 bg-white dark:bg-[#162038] py-4 text-sm text-stone-900 dark:text-stone-100 outline-none'
+const inputBase = 'w-full border-0 bg-white dark:bg-blue-900/30 px-4 py-4 text-sm text-stone-900 dark:text-stone-100 outline-none placeholder:text-stone-400 dark:placeholder:text-stone-500'
+const selectBase = 'w-full border-0 bg-white dark:bg-blue-900/30 py-4 text-sm text-stone-900 dark:text-stone-100 outline-none'
 
 export default function ExploreSearchForm({
   pickupLocation,
@@ -109,11 +109,11 @@ export default function ExploreSearchForm({
   }
 
   return (
-    <div className="mt-8 rounded-[1.75rem] bg-white dark:bg-[#0d1b38] p-5 text-stone-900 dark:text-stone-100 shadow-[0_24px_80px_rgba(0,0,0,0.16)]">
+    <div className="mt-8 rounded-[1.75rem] bg-white dark:bg-blue-950 p-5 text-stone-900 dark:text-stone-100 shadow-[0_24px_80px_rgba(0,0,0,0.16)]">
       <h2 className="text-3xl font-black tracking-tight text-stone-900 dark:text-stone-100">{dict.searchTitle}</h2>
       <form onSubmit={handleSubmit} className="mt-5 space-y-4">
         <div className="grid gap-px overflow-hidden rounded-[1.35rem] border border-stone-200 dark:border-blue-800 bg-stone-200 dark:bg-stone-700 md:grid-cols-2">
-          <label className="flex items-center gap-3 bg-white dark:bg-[#162038] px-4">
+          <label className="flex items-center gap-3 bg-white dark:bg-blue-900/30 px-4">
             <MapPin className="h-5 w-5 text-stone-300 dark:text-stone-500" />
             <select
               name="pickupLocation"
@@ -127,16 +127,16 @@ export default function ExploreSearchForm({
               ))}
             </select>
           </label>
-          <div className="bg-white dark:bg-[#162038] px-4 py-3">
+          <div className="bg-white dark:bg-blue-900/30 px-4 py-3">
             <div className="flex items-center justify-between gap-3">
               <span className="text-xs font-semibold uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500">{dict.dropoffLocation}</span>
-              <div className="inline-flex rounded-full border border-stone-200 dark:border-blue-800 bg-stone-100 dark:bg-[#0d1b38] p-1">
+              <div className="inline-flex rounded-full border border-stone-200 dark:border-blue-800 bg-stone-100 dark:bg-blue-950 p-1">
                 <button
                   type="button"
                   onClick={() => setFilters((current) => ({ ...current, dropoffMode: 'same', dropoffLocation: '' }))}
                   className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
                     filters.dropoffMode === 'same'
-                      ? 'bg-stone-900 text-white dark:bg-orange-400 dark:text-stone-900'
+                      ? 'bg-blue-900 text-white dark:bg-orange-400 dark:text-white'
                       : 'text-stone-500 dark:text-stone-400'
                   }`}
                 >
@@ -147,7 +147,7 @@ export default function ExploreSearchForm({
                   onClick={() => setFilters((current) => ({ ...current, dropoffMode: 'different' }))}
                   className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
                     filters.dropoffMode === 'different'
-                      ? 'bg-stone-900 text-white dark:bg-orange-400 dark:text-stone-900'
+                      ? 'bg-blue-900 text-white dark:bg-orange-400 dark:text-white'
                       : 'text-stone-500 dark:text-stone-400'
                   }`}
                 >
@@ -171,7 +171,7 @@ export default function ExploreSearchForm({
                 </select>
               </label>
             ) : (
-              <div className="mt-3 flex items-center gap-3 rounded-2xl bg-stone-50 px-4 py-4 text-sm font-medium text-stone-500 dark:bg-[#0d1b38] dark:text-stone-300">
+              <div className="mt-3 flex items-center gap-3 rounded-2xl bg-stone-50 px-4 py-4 text-sm font-medium text-stone-500 dark:bg-blue-950 dark:text-stone-300">
                 <MapPin className="h-5 w-5 text-stone-300 dark:text-stone-500" />
                 <span>{filters.pickupLocation || dict.sameAsPickup}</span>
               </div>
@@ -180,7 +180,7 @@ export default function ExploreSearchForm({
         </div>
 
         <div className="grid gap-px overflow-hidden rounded-[1.35rem] border border-stone-200 dark:border-blue-800 bg-stone-200 dark:bg-stone-700 md:grid-cols-4">
-          <label className="flex items-center gap-3 bg-white dark:bg-[#162038] px-4">
+          <label className="flex items-center gap-3 bg-white dark:bg-blue-900/30 px-4">
             <CalendarDays className="h-5 w-5 text-stone-500 dark:text-stone-400" />
             <div className="flex w-full flex-col py-3">
               <span className="text-xs font-semibold uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500">{dict.pickupDate}</span>
@@ -194,7 +194,7 @@ export default function ExploreSearchForm({
               />
             </div>
           </label>
-          <label className="flex items-center gap-3 bg-white dark:bg-[#162038] px-4">
+          <label className="flex items-center gap-3 bg-white dark:bg-blue-900/30 px-4">
             <Clock3 className="h-5 w-5 text-stone-500 dark:text-stone-400" />
             <div className="flex w-full flex-col py-3">
               <span className="text-xs font-semibold uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500">{dict.hour}</span>
@@ -207,7 +207,7 @@ export default function ExploreSearchForm({
               />
             </div>
           </label>
-          <label className="flex items-center gap-3 bg-white dark:bg-[#162038] px-4">
+          <label className="flex items-center gap-3 bg-white dark:bg-blue-900/30 px-4">
             <CalendarDays className="h-5 w-5 text-stone-500 dark:text-stone-400" />
             <div className="flex w-full flex-col py-3">
               <span className="text-xs font-semibold uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500">{dict.returnDate}</span>
@@ -221,7 +221,7 @@ export default function ExploreSearchForm({
               />
             </div>
           </label>
-          <label className="flex items-center gap-3 bg-white dark:bg-[#162038] px-4">
+          <label className="flex items-center gap-3 bg-white dark:bg-blue-900/30 px-4">
             <Clock3 className="h-5 w-5 text-stone-500 dark:text-stone-400" />
             <div className="flex w-full flex-col py-3">
               <span className="text-xs font-semibold uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500">{dict.hour}</span>
@@ -237,7 +237,7 @@ export default function ExploreSearchForm({
         </div>
 
         <div className="relative z-10 grid gap-px overflow-visible rounded-[1.35rem] border border-stone-200 dark:border-blue-800 bg-stone-200 dark:bg-stone-700 lg:grid-cols-[1.1fr_1.1fr_1.35fr]">
-          <label className="flex items-center gap-3 rounded-t-[1.35rem] bg-white dark:bg-[#162038] px-4 lg:rounded-l-[1.35rem] lg:rounded-tr-none">
+          <label className="flex items-center gap-3 rounded-t-[1.35rem] bg-white dark:bg-blue-900/30 px-4 lg:rounded-l-[1.35rem] lg:rounded-tr-none">
             <TicketPercent className="h-5 w-5 text-stone-300 dark:text-stone-500" />
             <input
               name="promoCode"
@@ -247,7 +247,7 @@ export default function ExploreSearchForm({
               className={`${inputBase} pl-2`}
             />
           </label>
-          <label className="flex items-center justify-between gap-3 bg-white dark:bg-[#162038] px-4 py-3">
+          <label className="flex items-center justify-between gap-3 bg-white dark:bg-blue-900/30 px-4 py-3">
             <div className="flex min-w-0 items-center gap-3">
               <span className="text-sm font-semibold text-stone-600 dark:text-stone-300">{dict.myAge}</span>
               <select
@@ -275,16 +275,16 @@ export default function ExploreSearchForm({
                 <Info className="h-5 w-5" />
               </button>
               {ageHelpOpen ? (
-                <div className="absolute bottom-[calc(100%+0.85rem)] right-0 z-30 w-72 rounded-2xl border border-orange-300 dark:border-orange-600 bg-white dark:bg-[#0d1b38] px-4 py-3 text-left text-sm leading-6 text-stone-700 dark:text-stone-200 shadow-[0_16px_40px_rgba(0,0,0,0.14)]">
+                <div className="absolute bottom-[calc(100%+0.85rem)] right-0 z-30 w-72 rounded-2xl border border-orange-300 dark:border-orange-600 bg-white dark:bg-blue-950 px-4 py-3 text-left text-sm leading-6 text-stone-700 dark:text-stone-200 shadow-[0_16px_40px_rgba(0,0,0,0.14)]">
                   {dict.ageDescription}
-                  <span className="absolute right-6 top-full h-3 w-3 -translate-y-1/2 rotate-45 border-b border-r border-orange-300 dark:border-orange-600 bg-white dark:bg-[#0d1b38]" />
+                  <span className="absolute right-6 top-full h-3 w-3 -translate-y-1/2 rotate-45 border-b border-r border-orange-300 dark:border-orange-600 bg-white dark:bg-blue-950" />
                 </div>
               ) : null}
             </div>
           </label>
           <button
             type="submit"
-            className="min-h-[76px] rounded-b-[1.35rem] bg-stone-900 px-6 text-sm font-black uppercase tracking-[0.08em] text-white transition hover:bg-orange-700 dark:bg-orange-400 dark:text-stone-900 dark:hover:bg-orange-300 lg:rounded-b-none lg:rounded-r-[1.35rem]"
+            className="min-h-[76px] rounded-b-[1.35rem] bg-orange-600 px-6 text-sm font-black uppercase tracking-[0.08em] text-white transition hover:bg-orange-700 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300 lg:rounded-b-none lg:rounded-r-[1.35rem]"
           >
             {dict.search}
           </button>
diff --git a/apps/marketplace/src/app/(public)/explore/ExploreVehicleGrid.tsx b/apps/marketplace/src/app/(public)/explore/ExploreVehicleGrid.tsx
index 37b79ba..16b0379 100644
--- a/apps/marketplace/src/app/(public)/explore/ExploreVehicleGrid.tsx
+++ b/apps/marketplace/src/app/(public)/explore/ExploreVehicleGrid.tsx
@@ -64,19 +64,19 @@ export default function ExploreVehicleGrid({ vehicles, dict }: { vehicles: Vehic
       </div>
       <div className="mt-4 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
         {vehicles.map((vehicle) => (
-          <article key={vehicle.id} className="card overflow-hidden">
-            <div className="aspect-[16/10] bg-stone-100 dark:bg-[#162038]">
+          <article key={vehicle.id} className="card">
+            <div className="aspect-[16/10] overflow-hidden rounded-t-[2rem] bg-stone-100 dark:bg-blue-900/30">
               {vehicle.photos[0] ? (
                 // eslint-disable-next-line @next/next/no-img-element
                 <img src={vehicle.photos[0]} alt={`${vehicle.make} ${vehicle.model}`} className="h-full w-full object-cover" />
               ) : null}
             </div>
-            <div className="p-5">
-              <div className="flex items-start justify-between gap-4">
-                <div>
-                  <p className="text-xs uppercase tracking-[0.16em] text-stone-500 dark:text-stone-400">{vehicle.company.brand?.displayName ?? dict.rentalCompany}</p>
-                  <h3 className="mt-2 text-xl font-bold text-stone-900 dark:text-stone-100">{vehicle.make} {vehicle.model}</h3>
-                  <p className="mt-1 text-sm text-stone-500 dark:text-stone-400">{vehicle.year} · {vehicle.category}</p>
+            <div className="p-4">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-xs uppercase tracking-[0.16em] text-stone-500 dark:text-stone-400">{vehicle.company.brand?.displayName ?? dict.rentalCompany}</p>
+                  <h3 className="mt-2 truncate text-lg font-bold text-stone-900 dark:text-stone-100">{vehicle.make} {vehicle.model}</h3>
+                  <p className="mt-1 truncate text-sm text-stone-500 dark:text-stone-400">{vehicle.year} · {vehicle.category}</p>
                 </div>
                 <span className={`shrink-0 rounded-full px-3 py-1 text-xs font-semibold ${vehicle.availability === false ? 'bg-rose-100 text-rose-700 dark:bg-rose-950/50 dark:text-rose-400' : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-400'}`}>
                   {getStatusCopy(vehicle, dict)}
@@ -87,14 +87,14 @@ export default function ExploreVehicleGrid({ vehicles, dict }: { vehicles: Vehic
                   {vehicle.nextAvailableAt ? `${dict.availableFrom} ${formatAvailabilityDate(vehicle.nextAvailableAt)}` : dict.unavailableNoDate}
                 </p>
               )}
-              <div className="mt-5 flex items-end justify-between">
-                <div>
+              <div className="mt-4 flex items-end justify-between gap-3">
+                <div className="min-w-0">
                   <p className="text-sm text-stone-500 dark:text-stone-400">{dict.from}</p>
-                  <p className="text-2xl font-black text-stone-900 dark:text-stone-100">{formatCents(vehicle.dailyRate)}</p>
+                  <p className="truncate text-xl font-black text-stone-900 dark:text-stone-100">{formatCents(vehicle.dailyRate)}</p>
                 </div>
                 <Link
                   href={`/explore/${vehicle.company.slug}/vehicles/${vehicle.id}`}
-                  className="rounded-full bg-stone-900 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-white dark:text-stone-900 dark:hover:bg-stone-100"
+                  className="shrink-0 rounded-full bg-blue-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400"
                 >
                   {dict.viewVehicle}
                 </Link>
diff --git a/apps/marketplace/src/app/(public)/explore/[slug]/page.tsx b/apps/marketplace/src/app/(public)/explore/[slug]/page.tsx
index bd57f5e..95cf48f 100644
--- a/apps/marketplace/src/app/(public)/explore/[slug]/page.tsx
+++ b/apps/marketplace/src/app/(public)/explore/[slug]/page.tsx
@@ -89,7 +89,7 @@ export default async function CompanyProfilePage({ params }: { params: { slug: s
             <h1 className="mt-3 text-3xl font-black text-stone-900 dark:text-stone-100">{dict.unavailableTitle}</h1>
             <p className="mt-3 text-stone-600 dark:text-stone-400">{dict.unavailableBody}</p>
             <div className="mt-6">
-              <Link href="/explore" className="rounded-full bg-stone-900 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-white dark:text-stone-900 dark:hover:bg-stone-100">{dict.backToExplore}</Link>
+              <Link href="/explore" className="rounded-full bg-blue-900 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400">{dict.backToExplore}</Link>
             </div>
           </section>
         </div>
@@ -129,24 +129,24 @@ export default async function CompanyProfilePage({ params }: { params: { slug: s
           <h2 className="text-2xl font-bold text-stone-900 dark:text-stone-100">{dict.fleet}</h2>
           <div className="mt-4 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
             {company.vehicles.map((vehicle) => (
-              <article key={vehicle.id} className="card overflow-hidden">
-                <div className="aspect-[16/10] bg-stone-100 dark:bg-[#162038]">
+              <article key={vehicle.id} className="card">
+                <div className="aspect-[16/10] overflow-hidden rounded-t-[2rem] bg-stone-100 dark:bg-blue-900/30">
                   {vehicle.photos[0] ? (
                     // eslint-disable-next-line @next/next/no-img-element
                     <img src={vehicle.photos[0]} alt={`${vehicle.make} ${vehicle.model}`} className="h-full w-full object-cover" />
                   ) : null}
                 </div>
-                <div className="p-5">
-                  <h3 className="text-xl font-bold text-stone-900 dark:text-stone-100">{vehicle.make} {vehicle.model}</h3>
-                  <p className="mt-1 text-sm text-stone-500 dark:text-stone-400">{vehicle.category}</p>
+                <div className="p-4">
+                  <h3 className="truncate text-lg font-bold text-stone-900 dark:text-stone-100">{vehicle.make} {vehicle.model}</h3>
+                  <p className="mt-1 truncate text-sm text-stone-500 dark:text-stone-400">{vehicle.category}</p>
                   {!vehicle.availability && (
                     <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">
                       {vehicle.nextAvailableAt ? `${dict.availableFrom} ${new Date(vehicle.nextAvailableAt).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric' })}` : dict.unavailableNoDate}
                     </p>
                   )}
-                  <div className="mt-4 flex items-end justify-between">
-                    <p className="text-xl font-black text-stone-900 dark:text-stone-100">{formatCurrency(vehicle.dailyRate, 'MAD')}</p>
-                    <Link href={`/explore/${params.slug}/vehicles/${vehicle.id}`} className="rounded-full bg-stone-900 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-white dark:text-stone-900 dark:hover:bg-stone-100">{dict.viewVehicle}</Link>
+                  <div className="mt-4 flex items-end justify-between gap-3">
+                    <p className="min-w-0 truncate text-xl font-black text-stone-900 dark:text-stone-100">{formatCurrency(vehicle.dailyRate, 'MAD')}</p>
+                    <Link href={`/explore/${params.slug}/vehicles/${vehicle.id}`} className="shrink-0 rounded-full bg-blue-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400">{dict.viewVehicle}</Link>
                   </div>
                 </div>
               </article>
diff --git a/apps/marketplace/src/app/(public)/explore/[slug]/vehicles/[id]/page.tsx b/apps/marketplace/src/app/(public)/explore/[slug]/vehicles/[id]/page.tsx
index 7cd1428..a13ac2c 100644
--- a/apps/marketplace/src/app/(public)/explore/[slug]/vehicles/[id]/page.tsx
+++ b/apps/marketplace/src/app/(public)/explore/[slug]/vehicles/[id]/page.tsx
@@ -117,7 +117,7 @@ export default async function VehicleDetailPage({ params }: { params: { slug: st
             <h1 className="mt-3 text-3xl font-black text-stone-900 dark:text-stone-100">{dict.unavailableTitle}</h1>
             <p className="mt-3 text-stone-600 dark:text-stone-400">{dict.unavailableBody}</p>
             <div className="mt-6 flex gap-3">
-              <Link href={`/explore/${params.slug}`} className="rounded-full bg-stone-900 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-white dark:text-stone-900 dark:hover:bg-stone-100">{dict.backToFleet}</Link>
+              <Link href={`/explore/${params.slug}`} className="rounded-full bg-blue-900 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400">{dict.backToFleet}</Link>
               <Link href="/explore" className="rounded-full border border-stone-200 px-5 py-2.5 text-sm font-semibold text-stone-700 transition hover:border-stone-400 dark:border-blue-800 dark:text-stone-300 dark:hover:border-stone-500">{dict.backToExplore}</Link>
             </div>
           </section>
@@ -152,12 +152,12 @@ export default async function VehicleDetailPage({ params }: { params: { slug: st
 
             {/* Hero photo */}
             {heroPhoto ? (
-              <div className="overflow-hidden rounded-3xl bg-stone-100 dark:bg-[#162038] aspect-[16/9]">
+              <div className="overflow-hidden rounded-3xl bg-stone-100 dark:bg-blue-900/30 aspect-[16/9]">
                 {/* eslint-disable-next-line @next/next/no-img-element */}
                 <img src={heroPhoto} alt={`${vehicle.make} ${vehicle.model}`} className="h-full w-full object-cover" />
               </div>
             ) : (
-              <div className="overflow-hidden rounded-3xl bg-stone-100 dark:bg-[#162038] aspect-[16/9] flex items-center justify-center text-sm text-stone-400">{dict.noPhotos}</div>
+              <div className="overflow-hidden rounded-3xl bg-stone-100 dark:bg-blue-900/30 aspect-[16/9] flex items-center justify-center text-sm text-stone-400">{dict.noPhotos}</div>
             )}
 
             {/* Gallery */}
@@ -166,7 +166,7 @@ export default async function VehicleDetailPage({ params }: { params: { slug: st
                 <p className="mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-stone-400 dark:text-stone-500">{dict.photos}</p>
                 <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
                   {galleryPhotos.map((photo, index) => (
-                    <div key={`${photo}-${index}`} className="overflow-hidden rounded-2xl bg-stone-100 dark:bg-[#162038] aspect-[4/3]">
+                    <div key={`${photo}-${index}`} className="overflow-hidden rounded-2xl bg-stone-100 dark:bg-blue-900/30 aspect-[4/3]">
                       {/* eslint-disable-next-line @next/next/no-img-element */}
                       <img src={photo} alt={`${vehicle.make} ${vehicle.model} ${index + 2}`} className="h-full w-full object-cover" />
                     </div>
@@ -212,7 +212,7 @@ export default async function VehicleDetailPage({ params }: { params: { slug: st
                   <p className="text-xs font-medium uppercase tracking-[0.14em] text-stone-400 dark:text-stone-500 mb-3">{dict.features}</p>
                   <div className="flex flex-wrap gap-2">
                     {vehicle.features.map((feature) => (
-                      <span key={feature} className="rounded-full bg-stone-100 dark:bg-[#162038] px-3 py-1 text-xs font-medium text-stone-700 dark:text-stone-300">{feature}</span>
+                      <span key={feature} className="rounded-full bg-stone-100 dark:bg-blue-900/30 px-3 py-1 text-xs font-medium text-stone-700 dark:text-stone-300">{feature}</span>
                     ))}
                   </div>
                 </div>
@@ -226,7 +226,7 @@ export default async function VehicleDetailPage({ params }: { params: { slug: st
                 <p className="text-sm text-stone-500 dark:text-stone-400">{vehicle.company.brand?.displayName ?? dict.rentalCompany}</p>
                 <div className="flex flex-wrap gap-3">
                   {vehicle.company.brand?.publicPhone && (
-                    <a href={`tel:${vehicle.company.brand.publicPhone}`} className="inline-flex items-center gap-2 rounded-full border border-stone-300 dark:border-blue-800 px-4 py-2 text-sm font-semibold text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-[#162038] transition">
+                    <a href={`tel:${vehicle.company.brand.publicPhone}`} className="inline-flex items-center gap-2 rounded-full border border-stone-300 dark:border-blue-800 px-4 py-2 text-sm font-semibold text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-blue-900/40 transition">
                       {dict.phone}: {vehicle.company.brand.publicPhone}
                     </a>
                   )}
@@ -270,7 +270,7 @@ export default async function VehicleDetailPage({ params }: { params: { slug: st
 
               <Link
                 href={`/explore/${params.slug}`}
-                className="block rounded-full border border-stone-300 dark:border-blue-800 px-6 py-3 text-center text-sm font-semibold text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-[#162038] transition"
+                className="block rounded-full border border-stone-300 dark:border-blue-800 px-6 py-3 text-center text-sm font-semibold text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-blue-900/40 transition"
               >
                 {dict.backToFleet}
               </Link>
diff --git a/apps/marketplace/src/app/(public)/explore/page.tsx b/apps/marketplace/src/app/(public)/explore/page.tsx
index 326b996..f7da186 100644
--- a/apps/marketplace/src/app/(public)/explore/page.tsx
+++ b/apps/marketplace/src/app/(public)/explore/page.tsx
@@ -255,10 +255,10 @@ export default async function ExplorePage({ searchParams }: { searchParams?: Rec
   return (
     <main className="site-page">
       <div className="site-section space-y-10">
-        <section className="site-panel-contrast bg-[linear-gradient(135deg,#1c1917,#57534e)] dark:bg-[linear-gradient(135deg,#0c0a09,#292524)] px-8 py-12">
+        <section className="site-panel-contrast bg-[linear-gradient(135deg,#0f2460,#1a3a8f)] dark:bg-[linear-gradient(135deg,#0a1735,#112d6e)] px-8 py-12">
           <p className="site-kicker text-orange-300 dark:text-orange-300">{dict.kicker}</p>
           <h1 className="mt-4 text-4xl font-black tracking-tight">{dict.title}</h1>
-          <p className="mt-4 max-w-2xl text-stone-300">{dict.body}</p>
+          <p className="mt-4 max-w-2xl text-blue-100 dark:text-blue-100">{dict.body}</p>
           <ExploreSearchForm
             pickupLocation={pickupLocation}
             dropoffLocation={dropoffLocation}
@@ -281,9 +281,9 @@ export default async function ExplorePage({ searchParams }: { searchParams?: Rec
           </div>
           <div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
             {offers.map((offer) => (
-              <Link key={offer.id} href={`/explore/${offer.company.brand?.subdomain ?? ''}#offers`} className="card p-5 hover:border-orange-300 dark:hover:border-orange-500 transition-colors">
-                <p className="text-xs uppercase tracking-[0.18em] text-orange-700 dark:text-orange-400">{offer.company.brand?.displayName ?? dict.company}</p>
-                <h3 className="mt-3 text-lg font-semibold text-stone-900 dark:text-stone-100">{offer.title}</h3>
+              <Link key={offer.id} href={`/explore/${offer.company.brand?.subdomain ?? ''}#offers`} className="card flex flex-col p-5 transition-colors hover:border-orange-300 dark:hover:border-orange-500">
+                <p className="truncate text-xs uppercase tracking-[0.18em] text-orange-700 dark:text-orange-400">{offer.company.brand?.displayName ?? dict.company}</p>
+                <h3 className="mt-3 truncate text-lg font-semibold text-stone-900 dark:text-stone-100">{offer.title}</h3>
                 <p className="mt-3 text-3xl font-black text-stone-900 dark:text-stone-100">{offer.discountValue}%</p>
                 <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">{dict.validUntil} {new Date(offer.validUntil).toLocaleDateString()}</p>
               </Link>
@@ -298,7 +298,7 @@ export default async function ExplorePage({ searchParams }: { searchParams?: Rec
           <h2 className="text-2xl font-bold text-stone-900 dark:text-stone-100">{dict.browseByCategory}</h2>
           <div className="mt-4 flex flex-wrap gap-3">
             {dict.categories.map((categoryName, index) => (
-              <Link key={CATEGORY_VALUES[index] ?? categoryName} href={`/explore?category=${CATEGORY_VALUES[index]}`} className="rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-semibold text-stone-700 transition hover:border-stone-400 dark:border-blue-800 dark:bg-[#0d1b38] dark:text-stone-300 dark:hover:border-stone-500">
+              <Link key={CATEGORY_VALUES[index] ?? categoryName} href={`/explore?category=${CATEGORY_VALUES[index]}`} className="rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-semibold text-stone-700 transition hover:border-stone-400 dark:border-blue-800 dark:bg-blue-950 dark:text-stone-300 dark:hover:border-stone-500">
                 {categoryName}
               </Link>
             ))}
@@ -312,12 +312,12 @@ export default async function ExplorePage({ searchParams }: { searchParams?: Rec
           </div>
           <div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
             {companies.map((company) => (
-              <Link key={company.id} href={`/explore/${company.brand?.subdomain ?? ''}`} className="card p-5 hover:border-orange-300 dark:hover:border-orange-500 transition-colors">
-                <p className="text-xs uppercase tracking-[0.18em] text-stone-500 dark:text-stone-400">{company.brand?.publicCity ?? dict.marketplacePartner}</p>
-                <h3 className="mt-3 text-lg font-semibold text-stone-900 dark:text-stone-100">{company.brand?.displayName ?? dict.rentalCompany}</h3>
+              <Link key={company.id} href={`/explore/${company.brand?.subdomain ?? ''}`} className="card flex flex-col p-5 transition-colors hover:border-orange-300 dark:hover:border-orange-500">
+                <p className="truncate text-xs uppercase tracking-[0.18em] text-stone-500 dark:text-stone-400">{company.brand?.publicCity ?? dict.marketplacePartner}</p>
+                <h3 className="mt-3 truncate text-lg font-semibold text-stone-900 dark:text-stone-100">{company.brand?.displayName ?? dict.rentalCompany}</h3>
                 <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">{dict.rating} {company.brand?.marketplaceRating?.toFixed(1) ?? dict.new}</p>
                 <p className="mt-1 text-sm text-stone-500 dark:text-stone-400">{company._count.vehicles} {dict.publishedVehicles}</p>
-                <span className="mt-4 inline-flex rounded-full bg-stone-900 px-4 py-2 text-sm font-semibold text-white dark:bg-white dark:text-stone-900">{dict.viewFleet}</span>
+                <span className="mt-4 inline-flex self-start rounded-full bg-blue-900 px-4 py-2 text-sm font-semibold text-white dark:bg-orange-500 dark:text-white">{dict.viewFleet}</span>
               </Link>
             ))}
           </div>
diff --git a/apps/marketplace/src/app/(public)/pricing/PricingClient.tsx b/apps/marketplace/src/app/(public)/pricing/PricingClient.tsx
index 29f29bf..f267281 100644
--- a/apps/marketplace/src/app/(public)/pricing/PricingClient.tsx
+++ b/apps/marketplace/src/app/(public)/pricing/PricingClient.tsx
@@ -112,14 +112,14 @@ export default function PricingClient({ initialPricing = DEFAULT_PRICING }: { in
   return (
     <div className="space-y-10">
       {/* Billing toggle */}
-      <div className="flex items-center justify-center gap-1 rounded-full border border-stone-200 bg-white p-1 shadow-sm dark:border-blue-800 dark:bg-[#0d1b38]">
+      <div className="flex items-center justify-center gap-1 rounded-full border border-stone-200 bg-white p-1 shadow-sm dark:border-blue-800 dark:bg-blue-950">
         {(['monthly', 'annual'] as Billing[]).map((b) => (
           <button
             key={b}
             onClick={() => setBilling(b)}
             className={`relative rounded-full px-5 py-2 text-sm font-semibold transition-colors ${
               billing === b
-                ? 'bg-stone-900 text-white dark:bg-white dark:text-stone-900'
+                ? 'bg-blue-900 text-white dark:bg-orange-400 dark:text-white'
                 : 'text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100'
             }`}
           >
@@ -154,7 +154,7 @@ export default function PricingClient({ initialPricing = DEFAULT_PRICING }: { in
               key={plan.key}
               className={`card relative flex flex-col overflow-hidden ${
                 plan.highlight
-                  ? 'border-orange-400 ring-2 ring-orange-400 ring-offset-2 dark:ring-offset-[#07101e]'
+                  ? 'border-orange-400 ring-2 ring-orange-400 ring-offset-2 dark:ring-offset-blue-950'
                   : ''
               }`}
             >
@@ -207,7 +207,7 @@ export default function PricingClient({ initialPricing = DEFAULT_PRICING }: { in
                   className={`mt-10 block rounded-full px-6 py-3 text-center text-sm font-semibold transition-colors ${
                     plan.highlight
                       ? 'bg-orange-500 text-white hover:bg-orange-600 dark:bg-orange-400 dark:text-stone-900 dark:hover:bg-orange-300'
-                      : 'bg-stone-900 text-white hover:bg-orange-700 dark:bg-white dark:text-stone-900 dark:hover:bg-stone-100'
+                      : 'bg-blue-900 text-white hover:bg-orange-700 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400'
                   }`}
                 >
                   {dict.getStarted}
diff --git a/apps/marketplace/src/app/(public)/review/page.tsx b/apps/marketplace/src/app/(public)/review/page.tsx
index 08152de..7aa0ba4 100644
--- a/apps/marketplace/src/app/(public)/review/page.tsx
+++ b/apps/marketplace/src/app/(public)/review/page.tsx
@@ -155,7 +155,7 @@ function ReviewPageContent() {
             // eslint-disable-next-line @next/next/no-img-element
             <img src={info.vehiclePhoto} alt={info.vehicle} className="h-16 w-24 flex-shrink-0 rounded-xl object-cover" />
           ) : (
-            <div className="h-16 w-24 flex-shrink-0 rounded-xl bg-stone-100 dark:bg-[#162038]" />
+            <div className="h-16 w-24 flex-shrink-0 rounded-xl bg-stone-100 dark:bg-blue-900/30" />
           )}
           <div className="min-w-0">
             <p className="truncate text-xs uppercase tracking-widest text-stone-400 dark:text-stone-500">{info?.companyName}</p>
@@ -176,7 +176,7 @@ function ReviewPageContent() {
               value={comment}
               onChange={(e) => setComment(e.target.value)}
               placeholder="Tell us about your rental experience…"
-              className="w-full resize-none rounded-xl border border-stone-200 dark:border-blue-800 bg-white dark:bg-[#0d1b38] px-4 py-3 text-sm text-stone-900 dark:text-stone-100 placeholder:text-stone-400 dark:placeholder:text-stone-500 focus:outline-none focus:ring-2 focus:ring-stone-900 dark:focus:ring-stone-400"
+              className="w-full resize-none rounded-xl border border-stone-200 dark:border-blue-800 bg-white dark:bg-blue-950 px-4 py-3 text-sm text-stone-900 dark:text-stone-100 placeholder:text-stone-400 dark:placeholder:text-stone-500 focus:outline-none focus:ring-2 focus:ring-stone-900 dark:focus:ring-stone-400"
             />
           </div>
 
@@ -187,7 +187,7 @@ function ReviewPageContent() {
           <button
             type="submit"
             disabled={submitState === 'submitting'}
-            className="w-full rounded-full bg-stone-900 py-3 text-sm font-semibold text-white transition-colors hover:bg-orange-700 disabled:opacity-60 dark:bg-white dark:text-stone-900 dark:hover:bg-stone-100"
+            className="w-full rounded-full bg-orange-600 py-3 text-sm font-semibold text-white transition-colors hover:bg-orange-700 disabled:opacity-60 dark:bg-orange-500 dark:text-white dark:hover:bg-orange-400"
           >
             {submitState === 'submitting' ? 'Submitting…' : 'Submit review'}
           </button>
diff --git a/apps/marketplace/src/app/globals.css b/apps/marketplace/src/app/globals.css
index eb8dfb4..a493d66 100644
--- a/apps/marketplace/src/app/globals.css
+++ b/apps/marketplace/src/app/globals.css
@@ -8,7 +8,7 @@ body {
 
 html.dark body {
   background-image:
-    linear-gradient(180deg, #0a1128 0%, #0d1b38 35%, #07101e 100%);
+    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
 }
 
 .shell {
@@ -16,7 +16,7 @@ html.dark body {
 }
 
 .card {
-  @apply rounded-[2rem] border p-0 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
+  @apply rounded-[2rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
   border-color: rgb(231 229 228 / 0.8);
   background-color: rgb(255 255 255 / 0.82);
 }
@@ -35,7 +35,7 @@ html.dark .card {
 html.dark .site-page {
   @apply text-slate-100;
   background-image:
-    linear-gradient(180deg, #0a1128 0%, #0d1b38 35%, #07101e 100%);
+    linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%);
 }
 
 .site-glow {
@@ -80,7 +80,7 @@ html.dark .site-panel-muted {
 .site-panel-contrast {
   @apply rounded-[2rem] border p-7 text-white shadow-[0_30px_80px_rgba(28,25,23,0.18)] transition-colors sm:p-8;
   border-color: rgb(14 40 90 / 0.8);
-  background-color: rgb(6 13 30);
+  background-color: rgb(10 25 75);
 }
 
 html.dark .site-panel-contrast {
diff --git a/apps/marketplace/src/components/BookingForm.tsx b/apps/marketplace/src/components/BookingForm.tsx
index 73c6db6..a4bc299 100644
--- a/apps/marketplace/src/components/BookingForm.tsx
+++ b/apps/marketplace/src/components/BookingForm.tsx
@@ -262,7 +262,7 @@ export default function BookingForm({
         </p>
       ) : null}
 
-      <div className="space-y-4 rounded-2xl border border-stone-200 bg-stone-50 p-4 dark:border-blue-800 dark:bg-[#0d1b38]">
+      <div className="space-y-4 rounded-2xl border border-stone-200 bg-stone-50 p-4 dark:border-blue-800 dark:bg-blue-950">
         <p className="text-sm font-semibold text-stone-900 dark:text-stone-100">{t.renterIdentity}</p>
         <div className="grid grid-cols-2 gap-3">
           <div className="space-y-1">
@@ -271,7 +271,7 @@ export default function BookingForm({
               required
               value={firstName}
               onChange={(e) => setFirstName(e.target.value)}
-              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
             />
           </div>
           <div className="space-y-1">
@@ -280,7 +280,7 @@ export default function BookingForm({
               required
               value={lastName}
               onChange={(e) => setLastName(e.target.value)}
-              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
             />
           </div>
         </div>
@@ -293,7 +293,7 @@ export default function BookingForm({
               type="date"
               value={dateOfBirth}
               onChange={(e) => setDateOfBirth(e.target.value)}
-              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
             />
           </div>
           <div className="space-y-1">
@@ -302,7 +302,7 @@ export default function BookingForm({
               required
               value={nationality}
               onChange={(e) => setNationality(e.target.value)}
-              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
             />
           </div>
         </div>
@@ -313,7 +313,7 @@ export default function BookingForm({
             required
             value={identityDocumentNumber}
             onChange={(e) => setIdentityDocumentNumber(e.target.value)}
-            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
           />
         </div>
 
@@ -324,7 +324,7 @@ export default function BookingForm({
             value={fullAddress}
             onChange={(e) => setFullAddress(e.target.value)}
             rows={3}
-            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
           />
         </div>
       </div>
@@ -336,11 +336,11 @@ export default function BookingForm({
           type="email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
-          className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+          className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
         />
       </div>
 
-      <div className="space-y-4 rounded-2xl border border-stone-200 bg-stone-50 p-4 dark:border-blue-800 dark:bg-[#0d1b38]">
+      <div className="space-y-4 rounded-2xl border border-stone-200 bg-stone-50 p-4 dark:border-blue-800 dark:bg-blue-950">
         <p className="text-sm font-semibold text-stone-900 dark:text-stone-100">{t.driverLicenseSection}</p>
         <div className="space-y-1">
           <label className="text-xs font-medium text-stone-600 dark:text-stone-400">{t.driverLicense} <span className="text-red-500">*</span></label>
@@ -348,7 +348,7 @@ export default function BookingForm({
             required
             value={driverLicense}
             onChange={(e) => setDriverLicense(e.target.value)}
-            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
           />
         </div>
 
@@ -360,7 +360,7 @@ export default function BookingForm({
               type="date"
               value={licenseIssuedAt}
               onChange={(e) => setLicenseIssuedAt(e.target.value)}
-              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
             />
           </div>
           <div className="space-y-1">
@@ -370,7 +370,7 @@ export default function BookingForm({
               type="date"
               value={licenseExpiry}
               onChange={(e) => setLicenseExpiry(e.target.value)}
-              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
             />
           </div>
         </div>
@@ -382,7 +382,7 @@ export default function BookingForm({
               required
               value={licenseCountry}
               onChange={(e) => setLicenseCountry(e.target.value)}
-              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
             />
           </div>
           <div className="space-y-1">
@@ -391,7 +391,7 @@ export default function BookingForm({
               required
               value={licenseCategory}
               onChange={(e) => setLicenseCategory(e.target.value)}
-              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+              className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
             />
           </div>
         </div>
@@ -401,7 +401,7 @@ export default function BookingForm({
           <input
             value={internationalLicenseNumber}
             onChange={(e) => setInternationalLicenseNumber(e.target.value)}
-            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
           />
         </div>
       </div>
@@ -413,7 +413,7 @@ export default function BookingForm({
           type="tel"
           value={phone}
           onChange={(e) => setPhone(e.target.value)}
-          className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+          className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
         />
       </div>
 
@@ -423,7 +423,7 @@ export default function BookingForm({
           <select
             value={pickupLocation}
             onChange={(e) => setPickupLocation(e.target.value)}
-            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
           >
             {pickupOptions.map((location) => (
               <option key={location} value={location}>{location}</option>
@@ -433,14 +433,14 @@ export default function BookingForm({
       ) : null}
 
       {allowDifferentDropoff ? (
-        <div className="space-y-3 rounded-2xl border border-stone-200 bg-stone-50 p-4 dark:border-blue-800 dark:bg-[#0d1b38]">
-          <div className="inline-flex rounded-full border border-stone-200 dark:border-blue-800 bg-white dark:bg-[#162038] p-1">
+        <div className="space-y-3 rounded-2xl border border-stone-200 bg-stone-50 p-4 dark:border-blue-800 dark:bg-blue-950">
+          <div className="inline-flex rounded-full border border-stone-200 dark:border-blue-800 bg-white dark:bg-blue-900/30 p-1">
             <button
               type="button"
               onClick={() => setDropoffMode('same')}
               className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
                 dropoffMode === 'same'
-                  ? 'bg-stone-900 text-white dark:bg-orange-400 dark:text-stone-900'
+                  ? 'bg-blue-900 text-white dark:bg-orange-400 dark:text-white'
                   : 'text-stone-500 dark:text-stone-400'
               }`}
             >
@@ -451,7 +451,7 @@ export default function BookingForm({
               onClick={() => setDropoffMode('different')}
               className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
                 dropoffMode === 'different'
-                  ? 'bg-stone-900 text-white dark:bg-orange-400 dark:text-stone-900'
+                  ? 'bg-blue-900 text-white dark:bg-orange-400 dark:text-white'
                   : 'text-stone-500 dark:text-stone-400'
               }`}
             >
@@ -465,7 +465,7 @@ export default function BookingForm({
               <select
                 value={returnLocation}
                 onChange={(e) => setReturnLocation(e.target.value)}
-                className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+                className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
               >
                 {dropoffOptions.map((location) => (
                   <option key={location} value={location}>{location}</option>
@@ -487,7 +487,7 @@ export default function BookingForm({
             value={startDate}
             min={new Date().toISOString().slice(0, 10)}
             onChange={(e) => setStartDate(e.target.value)}
-            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
           />
         </div>
         <div className="space-y-1">
@@ -498,7 +498,7 @@ export default function BookingForm({
             value={endDate}
             min={startDate || new Date().toISOString().slice(0, 10)}
             onChange={(e) => setEndDate(e.target.value)}
-            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+            className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
           />
         </div>
       </div>
@@ -519,14 +519,14 @@ export default function BookingForm({
           value={notes}
           onChange={(e) => setNotes(e.target.value)}
           rows={3}
-          className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-[#162038] dark:text-stone-100 dark:focus:border-stone-500"
+          className="w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-stone-900 outline-none focus:border-stone-400 dark:border-blue-800 dark:bg-blue-900/30 dark:text-stone-100 dark:focus:border-stone-500"
         />
       </div>
 
       <button
         type="submit"
         disabled={submitting}
-        className="w-full rounded-full bg-stone-900 px-6 py-3 text-center text-sm font-semibold text-white transition hover:bg-orange-700 disabled:opacity-60 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300"
+        className="w-full rounded-full bg-orange-600 px-6 py-3 text-center text-sm font-semibold text-white transition hover:bg-orange-700 disabled:opacity-60 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300"
       >
         {submitting ? t.submitting : t.submit}
       </button>
diff --git a/apps/marketplace/src/components/MarketplaceFooter.tsx b/apps/marketplace/src/components/MarketplaceFooter.tsx
index 304a5ee..b6e1090 100644
--- a/apps/marketplace/src/components/MarketplaceFooter.tsx
+++ b/apps/marketplace/src/components/MarketplaceFooter.tsx
@@ -47,7 +47,7 @@ export default function MarketplaceFooter({
   }, [])
 
   return (
-    <footer className="border-t border-stone-200/80 bg-white/72 px-4 py-8 text-stone-600 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-[#07101e]/72 dark:text-stone-300">
+    <footer className="border-t border-stone-200/80 bg-white/72 px-4 py-8 text-stone-600 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-blue-950/72 dark:text-stone-300">
       <div className="shell flex flex-col items-center gap-5 text-center">
         <nav className="flex flex-wrap items-center justify-center gap-y-3 text-sm">
           {primaryItems.map((item, index) => (
@@ -80,7 +80,7 @@ export default function MarketplaceFooter({
               <ChevronDown className={`h-4 w-4 transition-transform ${localeMenuOpen ? 'rotate-180' : ''}`} />
             </button>
             {localeMenuOpen ? (
-              <div className="absolute left-1/2 top-full z-20 mt-3 w-56 -translate-x-1/2 overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-[#07101e]/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
+              <div className="absolute left-1/2 top-full z-20 mt-3 w-56 -translate-x-1/2 overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
                 {localeOptions.map((option) => (
                   <button
                     key={option.value}
@@ -89,7 +89,7 @@ export default function MarketplaceFooter({
                       onSelectLanguage(option.value)
                       setLocaleMenuOpen(false)
                     }}
-                    className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-[#0d1b38] dark:hover:text-white"
+                    className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
                   >
                     <span aria-hidden="true" className="text-base leading-none">{option.flag}</span>
                     <span>{option.label}</span>
diff --git a/apps/marketplace/src/components/MarketplaceHeader.tsx b/apps/marketplace/src/components/MarketplaceHeader.tsx
index c41875a..62cbfca 100644
--- a/apps/marketplace/src/components/MarketplaceHeader.tsx
+++ b/apps/marketplace/src/components/MarketplaceHeader.tsx
@@ -87,7 +87,7 @@ export default function MarketplaceHeader({
   const signInHref = `${dashboardUrl}/sign-in?${signInParams.toString()}`
 
   return (
-    <header className="sticky top-0 z-50 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl shadow-[0_10px_30px_rgba(15,23,42,0.08)] transition-colors dark:border-blue-900 dark:bg-[#07101e]/76 dark:shadow-[0_10px_30px_rgba(0,0,0,0.32)]">
+    <header className="sticky top-0 z-50 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl shadow-[0_10px_30px_rgba(15,23,42,0.08)] transition-colors dark:border-blue-900 dark:bg-blue-950/76 dark:shadow-[0_10px_30px_rgba(0,0,0,0.32)]">
       <div className="shell flex min-h-14 flex-col gap-1.5 py-1.5 lg:flex-row lg:items-center lg:justify-between lg:gap-3 lg:py-2">
         <div className="flex items-center justify-between gap-3">
           <Link href="/" className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-[0.14em] text-stone-900 dark:text-stone-100 sm:text-sm sm:tracking-[0.2em]">
@@ -107,19 +107,19 @@ export default function MarketplaceHeader({
           <nav className="flex items-center gap-0.5 overflow-x-auto">
             <Link
               href="/"
-              className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-[#162038] dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
+              className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
             >
               {dict.marketplace}
             </Link>
             <Link
               href="/explore"
-              className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-[#162038] dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
+              className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
             >
               {dict.explore}
             </Link>
             <Link
               href={signInHref}
-              className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-[#162038] dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
+              className="rounded-full px-2.5 py-1 text-[12px] font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100 sm:px-4 sm:py-2 sm:text-sm"
             >
               {dict.signIn}
             </Link>
@@ -128,7 +128,7 @@ export default function MarketplaceHeader({
                 href={dashboardUrl}
                 className="ml-1 flex items-center gap-1.5 rounded-full bg-orange-600 px-3 py-1 text-[12px] font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400 sm:ml-2 sm:gap-2 sm:px-4 sm:py-2 sm:text-sm"
               >
-                <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-[10px] font-black dark:bg-[#07101e]/20">
+                <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-[10px] font-black dark:bg-blue-950/20">
                   {companyName.charAt(0).toUpperCase()}
                 </span>
                 {companyName}
@@ -142,12 +142,12 @@ export default function MarketplaceHeader({
               </Link>
             )}
           </nav>
-          <div className="flex items-center self-start rounded-full border border-stone-200/80 bg-white/95 p-0.5 shadow-sm dark:border-blue-800 dark:bg-[#0d1b38]/85 sm:self-auto sm:p-1">
+          <div className="flex items-center self-start rounded-full border border-stone-200/80 bg-white/95 p-0.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/85 sm:self-auto sm:p-1">
             <div ref={localeMenuRef} className="relative">
               <button
                 type="button"
                 onClick={toggleLocaleMenu}
-                className="inline-flex min-w-[4.75rem] items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-[11px] font-semibold text-stone-700 transition hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-[#162038] sm:min-w-[5.25rem] sm:px-3 sm:py-2 sm:text-xs"
+                className="inline-flex min-w-[4.75rem] items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-[11px] font-semibold text-stone-700 transition hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-blue-900/40 sm:min-w-[5.25rem] sm:px-3 sm:py-2 sm:text-xs"
                 aria-expanded={localeMenuOpen}
                 aria-haspopup="menu"
               >
@@ -156,7 +156,7 @@ export default function MarketplaceHeader({
                 <ChevronDown className={`h-3.5 w-3.5 transition-transform ${localeMenuOpen ? 'rotate-180' : ''}`} />
               </button>
               {localeMenuOpen ? (
-                <div className={`absolute top-full z-30 mt-2 w-44 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-[#07101e]/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}>
+                <div className={`absolute top-full z-30 mt-2 w-44 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}>
                   {localeOptions.map((option) => (
                     <button
                       key={option.value}
@@ -165,7 +165,7 @@ export default function MarketplaceHeader({
                         onSelectLanguage(option.value)
                         setLocaleMenuOpen(false)
                       }}
-                      className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-[#0d1b38] dark:hover:text-white"
+                      className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
                     >
                       <span aria-hidden="true">{option.flag}</span>
                       <span>{option.shortLabel}</span>
@@ -179,17 +179,17 @@ export default function MarketplaceHeader({
               <button
                 type="button"
                 onClick={toggleThemeMenu}
-                className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 transition hover:bg-stone-100 dark:hover:bg-[#162038] sm:px-2.5 sm:py-1.5"
+                className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 transition hover:bg-stone-100 dark:hover:bg-blue-900/40 sm:px-2.5 sm:py-1.5"
                 aria-expanded={themeMenuOpen}
                 aria-haspopup="menu"
               >
-                <span className="rounded-full bg-stone-900 px-3 py-1 text-[11px] font-semibold text-white dark:bg-orange-400 dark:text-white sm:px-3.5 sm:py-1.5 sm:text-xs">
+                <span className="rounded-full bg-blue-900 px-3 py-1 text-[11px] font-semibold text-white dark:bg-orange-400 dark:text-white sm:px-3.5 sm:py-1.5 sm:text-xs">
                   {currentTheme.label}
                 </span>
                 <ChevronDown className={`h-3.5 w-3.5 text-stone-500 transition-transform dark:text-stone-400 ${themeMenuOpen ? 'rotate-180' : ''}`} />
               </button>
               {themeMenuOpen ? (
-                <div className={`absolute top-full z-30 mt-2 w-44 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-[#07101e]/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}>
+                <div className={`absolute top-full z-30 mt-2 w-44 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}>
                   {themeOptions
                     .filter((option) => option.value !== theme)
                     .map((option) => (
@@ -200,7 +200,7 @@ export default function MarketplaceHeader({
                           setTheme(option.value)
                           setThemeMenuOpen(false)
                         }}
-                        className="flex w-full items-center justify-between px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-[#0d1b38] dark:hover:text-white"
+                        className="flex w-full items-center justify-between px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
                       >
                         <span>{option.label}</span>
                       </button>
diff --git a/apps/marketplace/src/components/RenterShell.tsx b/apps/marketplace/src/components/RenterShell.tsx
index 4125c3f..af6346d 100644
--- a/apps/marketplace/src/components/RenterShell.tsx
+++ b/apps/marketplace/src/components/RenterShell.tsx
@@ -103,7 +103,7 @@ export default function RenterShell({ children }: { children: React.ReactNode })
     <div className="site-page flex min-h-screen">
       {open && (
         <div
-          className="fixed inset-0 z-30 bg-[#07101e]/50 lg:hidden"
+          className="fixed inset-0 z-30 bg-blue-950/50 lg:hidden"
           onClick={() => setOpen(false)}
         />
       )}
@@ -113,7 +113,7 @@ export default function RenterShell({ children }: { children: React.ReactNode })
           onClick={() => setOpen(true)}
           aria-label="Open sidebar"
           className={[
-            'fixed top-1/2 z-50 -translate-y-1/2 flex items-center justify-center w-6 h-14 bg-[#0d1b38] text-white shadow-lg lg:hidden',
+            'fixed top-1/2 z-50 -translate-y-1/2 flex items-center justify-center w-6 h-14 bg-blue-950 text-white shadow-lg lg:hidden',
             isRtl ? 'right-0 rounded-l-lg' : 'left-0 rounded-r-lg',
           ].join(' ')}
         >
@@ -123,7 +123,7 @@ export default function RenterShell({ children }: { children: React.ReactNode })
 
       <aside
         className={[
-          'fixed inset-y-0 z-40 flex w-64 flex-col bg-[#0d1b38] transition-transform duration-300',
+          'fixed inset-y-0 z-40 flex w-64 flex-col bg-blue-950 transition-transform duration-300',
           isRtl ? 'right-0' : 'left-0',
           'lg:translate-x-0',
           open ? 'translate-x-0' : isRtl ? 'translate-x-full' : '-translate-x-full',
@@ -150,7 +150,7 @@ export default function RenterShell({ children }: { children: React.ReactNode })
                   'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
                   active
                     ? 'bg-orange-500 text-white'
-                    : 'text-slate-400 hover:bg-[#162038] hover:text-white',
+                    : 'text-slate-400 hover:bg-blue-900/40 hover:text-white',
                 ].join(' ')}
               >
                 <Icon className="h-4 w-4 flex-shrink-0" />
@@ -176,7 +176,7 @@ export default function RenterShell({ children }: { children: React.ReactNode })
           </div>
           <button
             onClick={signOut}
-            className="mt-2 flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-400 transition-colors hover:bg-[#162038] hover:text-white"
+            className="mt-2 flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-400 transition-colors hover:bg-blue-900/40 hover:text-white"
           >
             <LogOut className="h-4 w-4" />
             {dict.signOut}
@@ -187,7 +187,7 @@ export default function RenterShell({ children }: { children: React.ReactNode })
           onClick={() => setOpen(false)}
           aria-label="Close sidebar"
           className={[
-            'absolute top-1/2 z-10 -translate-y-1/2 flex items-center justify-center w-5 h-14 bg-[#0d1b38] text-white shadow-lg lg:hidden',
+            'absolute top-1/2 z-10 -translate-y-1/2 flex items-center justify-center w-5 h-14 bg-blue-950 text-white shadow-lg lg:hidden',
             isRtl ? '-left-5 rounded-l-lg' : '-right-5 rounded-r-lg',
           ].join(' ')}
         >
@@ -201,7 +201,7 @@ export default function RenterShell({ children }: { children: React.ReactNode })
           isRtl ? 'lg:mr-64' : 'lg:ml-64',
         ].join(' ')}
       >
-        <header className="flex h-16 items-center justify-between border-b border-stone-200/80 bg-white/80 px-6 backdrop-blur transition-colors dark:border-blue-900 dark:bg-[#0d1b38]/70">
+        <header className="flex h-16 items-center justify-between border-b border-stone-200/80 bg-white/80 px-6 backdrop-blur transition-colors dark:border-blue-900 dark:bg-blue-950/70">
           <h1 className="text-lg font-semibold text-stone-900 dark:text-stone-100">{pageTitle}</h1>
           <div className="flex h-8 w-8 items-center justify-center rounded-full bg-orange-500 text-xs font-semibold text-white">
             {userInitials}
@@ -212,7 +212,7 @@ export default function RenterShell({ children }: { children: React.ReactNode })
           {children}
         </main>
 
-        <footer className="border-t border-stone-200/80 bg-white/80 px-6 py-4 backdrop-blur transition-colors dark:border-blue-900 dark:bg-[#0d1b38]/70">
+        <footer className="border-t border-stone-200/80 bg-white/80 px-6 py-4 backdrop-blur transition-colors dark:border-blue-900 dark:bg-blue-950/70">
           <p className="text-center text-xs text-stone-400 dark:text-stone-500">
             &copy; {new Date().getFullYear()} RentalDriveGo. {dict.rights}
           </p>
diff --git a/apps/marketplace/src/components/WorkspaceFrame.tsx b/apps/marketplace/src/components/WorkspaceFrame.tsx
index d889736..2ee0cbd 100644
--- a/apps/marketplace/src/components/WorkspaceFrame.tsx
+++ b/apps/marketplace/src/components/WorkspaceFrame.tsx
@@ -107,7 +107,7 @@ export default function WorkspaceFrame({ target }: { target: FrameId }) {
     <iframe
       title={config.label}
       src={src}
-      className="block w-full border-0 bg-white dark:bg-[#07101e]"
+      className="block w-full border-0 bg-white dark:bg-blue-950"
       style={{ height: FRAME_HEIGHT }}
     />
   ) : (
diff --git a/apps/marketplace/src/components/WorkspaceTabs.tsx b/apps/marketplace/src/components/WorkspaceTabs.tsx
index c4ea32a..c77d164 100644
--- a/apps/marketplace/src/components/WorkspaceTabs.tsx
+++ b/apps/marketplace/src/components/WorkspaceTabs.tsx
@@ -84,7 +84,7 @@ export default function WorkspaceTabs() {
   return (
     <main className={`min-h-screen transition-colors ${
       theme === 'dark'
-        ? 'bg-[radial-gradient(circle_at_top,rgba(234,88,12,0.20),transparent_28%),linear-gradient(180deg,#07101e,#0d1b38)]'
+        ? 'bg-[radial-gradient(circle_at_top,rgba(234,88,12,0.20),transparent_28%),linear-gradient(180deg,#0f1f4a,#112d6e)]'
         : 'bg-[radial-gradient(circle_at_top,rgba(234,88,12,0.08),transparent_28%),linear-gradient(180deg,#f5f8ff,white)]'
     }`}>
       <div className="shell py-16 sm:py-20">
@@ -97,7 +97,7 @@ export default function WorkspaceTabs() {
                 width={72}
                 height={72}
                 className={`h-16 w-16 rounded-2xl object-contain p-1 shadow-sm ${
-                  theme === 'dark' ? 'border border-orange-500/40 bg-[#0d1b38]' : 'border border-orange-200 bg-white'
+                  theme === 'dark' ? 'border border-orange-500/40 bg-blue-950' : 'border border-orange-200 bg-white'
                 }`}
               />
             </Link>
@@ -121,7 +121,7 @@ export default function WorkspaceTabs() {
 
         <section className={`mt-10 overflow-hidden rounded-[2rem] border shadow-xl transition-colors ${
           theme === 'dark'
-            ? 'border-blue-900 bg-[#0d1b38] shadow-black/20'
+            ? 'border-blue-900 bg-blue-950 shadow-black/20'
             : 'border-stone-200 bg-white shadow-stone-200/40'
         }`}>
           <div className={`px-6 py-6 ${theme === 'dark' ? 'border-b border-stone-800' : 'border-b border-stone-200'}`}>
@@ -155,7 +155,7 @@ export default function WorkspaceTabs() {
                   className={`rounded-full px-5 py-2.5 text-sm font-semibold transition ${
                     theme === 'dark'
                       ? 'bg-orange-400 text-blue-950 hover:bg-orange-300'
-                      : 'bg-[#0d1b38] text-white hover:bg-[#162038]'
+                      : 'bg-blue-950 text-white hover:bg-blue-900/40'
                   }`}
                 >
                   {copy.exploreVehicles}
@@ -164,7 +164,7 @@ export default function WorkspaceTabs() {
                   href="/pricing"
                   className={`rounded-full border px-5 py-2.5 text-sm font-semibold transition ${
                     theme === 'dark'
-                      ? 'border-blue-800 text-slate-200 hover:border-blue-600 hover:bg-[#162038]'
+                      ? 'border-blue-800 text-slate-200 hover:border-blue-600 hover:bg-blue-900/40'
                       : 'border-stone-300 text-stone-700 hover:border-stone-400 hover:bg-stone-50'
                   }`}
                 >
@@ -175,7 +175,7 @@ export default function WorkspaceTabs() {
           </div>
 
           <div className={`grid gap-6 px-6 py-8 lg:grid-cols-[1.4fr_0.9fr] ${
-            theme === 'dark' ? 'bg-[#07101e]' : 'bg-stone-50'
+            theme === 'dark' ? 'bg-blue-950' : 'bg-stone-50'
           }`}>
             <div className="rounded-[1.5rem] bg-[linear-gradient(135deg,#06132e,#0d1b38)] p-8 text-white">
               <p className="text-xs font-semibold uppercase tracking-[0.24em] text-orange-300">{copy.nowServing}</p>
@@ -189,7 +189,7 @@ export default function WorkspaceTabs() {
 
             <div className="grid gap-4">
               <div className={`rounded-[1.5rem] border p-5 ${
-                theme === 'dark' ? 'border-blue-900 bg-[#0d1b38]' : 'border-stone-200 bg-white'
+                theme === 'dark' ? 'border-blue-900 bg-blue-950' : 'border-stone-200 bg-white'
               }`}>
                 <p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
                   theme === 'dark' ? 'text-stone-400' : 'text-stone-500'
@@ -212,7 +212,7 @@ export default function WorkspaceTabs() {
               </div>
 
               <div className={`rounded-[1.5rem] border p-5 ${
-                theme === 'dark' ? 'border-blue-900 bg-[#0d1b38]' : 'border-stone-200 bg-white'
+                theme === 'dark' ? 'border-blue-900 bg-blue-950' : 'border-stone-200 bg-white'
               }`}>
                 <p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
                   theme === 'dark' ? 'text-stone-400' : 'text-stone-500'