feat: monochrome black & white rebrand + new Pudu robots

- Convert site from royal-blue theme to black/white monochrome (desaturate
  all blue-hued colors; keep WhatsApp green and error red)
- Swap blue circular brand logo for mono YS mark; regenerate favicon/PWA icons
- Add 6 Pudu robots (CC1 Pro, MT1 Max, MT1 Vac, T600, T600 Underride, BG1 Pro)
- Fix favicon.ico to RGBA (Next 16 Turbopack decode) and Stripe apiVersion type

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

scripts/prod-check.mjs

@@ -1,23 +0,0 @@
-import { chromium } from 'playwright';
-const browser = await chromium.launch();
-const ctx = await browser.newContext({ viewport: { width: 390, height: 844 }, isMobile: true, hasTouch: true, deviceScaleFactor: 2 });
-const page = await ctx.newPage();
-await page.goto('https://yslootahrobotics.com/', { waitUntil: 'networkidle', timeout: 60000 });
-await page.waitForSelector('footer', { timeout: 30000 });
-await page.waitForTimeout(3000);
-const r = await page.evaluate(() => {
-  const footer = document.querySelector('footer');
-  if (!footer) return { error: 'no footer' };
-  const body = document.body;
-  const fRect = footer.getBoundingClientRect();
-  return {
-    bodyScrollHeight: body.scrollHeight,
-    footerBottomAbs: Math.round(fRect.bottom + window.scrollY),
-    spaceBelowFooter: Math.round(body.scrollHeight - (fRect.bottom + window.scrollY)),
-    bodyDisplay: getComputedStyle(body).display,
-    bodyMinHeight: getComputedStyle(body).minHeight,
-    footerMarginTop: getComputedStyle(footer).marginTop,
-  };
-});
-console.log(JSON.stringify(r, null, 2));
-await browser.close();

src/app/about/page.tsx

@@ -26,7 +26,7 @@ export default function AboutPage() {
             <h1 style={{ margin: 0, fontSize: 'clamp(2rem, 5vw, 3.4rem)', fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
               <span className="text-gradient" style={{ fontWeight: 500 }}>In Tech We Innovate. In Trust We Lead.</span>
             </h1>
-            <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
+            <p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
               YS Lootah Robotics is part of the Yousuf Saeed Lootah Investment Group a trusted UAE technology and robotics partner helping businesses innovate, automate, and deploy intelligent robotic solutions. The UAE&apos;s dedicated destination for selected Unitree and Pudu Robotics solutions.
             </p>
           </div>

src/app/accessories/[slug]/page.tsx

@@ -376,22 +376,22 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
           list-style: none; margin: 0; padding: 0;
           display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
           font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
-          color: #8891C7;
+          color: #a8a8a8;
         }
-        .acc-breadcrumbs a { color: #8891C7; text-decoration: none; transition: color 0.25s; }
+        .acc-breadcrumbs a { color: #a8a8a8; text-decoration: none; transition: color 0.25s; }
         .acc-breadcrumbs a:hover { color: #FFFFFF; }
         .acc-breadcrumbs li[aria-current="page"] { color: #FFFFFF; }
-        .acc-breadcrumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #4a4f63; }
+        .acc-breadcrumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #575757; }
 
         /* HERO */
         .acc-hero {
           position: relative; overflow: hidden;
           border-radius: 26px;
-          border: 1px solid rgba(74, 102, 216, 0.22);
+          border: 1px solid rgba(145, 145, 145, 0.22);
           background:
-            radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.20), transparent 55%),
+            radial-gradient(ellipse 70% 100% at 0% 0%, rgba(127, 127, 127, 0.20), transparent 55%),
             radial-gradient(ellipse 60% 80% at 100% 100%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
-            linear-gradient(135deg, rgba(14, 13, 22, 0.95), rgba(6, 6, 10, 0.97));
+            linear-gradient(135deg, rgba(18, 18, 18, 0.95), rgba(8, 8, 8, 0.97));
           box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
         }
         .acc-hero-glow {
@@ -403,8 +403,8 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
         .acc-hero-grid {
           position: absolute; inset: 0;
           background:
-            linear-gradient(rgba(74, 102, 216, 0.05) 1px, transparent 1px),
+            linear-gradient(rgba(145, 145, 145, 0.05) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(74, 102, 216, 0.05) 1px, transparent 1px);
+            linear-gradient(90deg, rgba(145, 145, 145, 0.05) 1px, transparent 1px);
           background-size: 56px 56px;
           mask-image: radial-gradient(ellipse 70% 90% at 70% 60%, #000 25%, transparent 80%);
           -webkit-mask-image: radial-gradient(ellipse 70% 90% at 70% 60%, #000 25%, transparent 80%);
@@ -422,24 +422,24 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
           aspect-ratio: 5 / 4;
           border-radius: 20px;
           overflow: hidden;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
           background:
-            radial-gradient(ellipse 38% 18% at 50% 80%, rgba(200, 210, 240, 0.16), transparent 70%),
+            radial-gradient(ellipse 38% 18% at 50% 80%, rgba(220, 220, 220, 0.16), transparent 70%),
             radial-gradient(ellipse 55% 55% at 50% 50%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 65%),
-            linear-gradient(180deg, rgba(10, 10, 16, 0.95), rgba(4, 4, 8, 0.98));
+            linear-gradient(180deg, rgba(13, 13, 13, 0.95), rgba(6, 6, 6, 0.98));
           box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
         }
         .acc-hero-stage {
           position: absolute; bottom: 0; left: 0; right: 0;
           height: 35%;
-          background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(200, 210, 240, 0.10), transparent 70%);
+          background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(220, 220, 220, 0.10), transparent 70%);
           pointer-events: none;
         }
         .acc-hero-grid-inner {
           position: absolute; inset: 0;
           background-image:
-            linear-gradient(rgba(222, 224, 240, 0.05) 1px, transparent 1px),
+            linear-gradient(rgba(231, 231, 231, 0.05) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(222, 224, 240, 0.05) 1px, transparent 1px);
+            linear-gradient(90deg, rgba(231, 231, 231, 0.05) 1px, transparent 1px);
           background-size: 32px 32px;
           mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%);
           -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%);
@@ -463,13 +463,13 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
         }
         .acc-hero-title :global(.text-gradient) { font-weight: 500; }
         .acc-hero-tagline {
-          margin: 0; color: #DEE0F0;
+          margin: 0; color: #e7e7e7;
           font-size: clamp(0.98rem, 1.8vw, 1.12rem);
           line-height: 1.55;
           font-weight: 500;
         }
         .acc-hero-desc {
-          margin: 0; color: #C9CCDE;
+          margin: 0; color: #d4d4d4;
           font-size: clamp(0.9rem, 1.6vw, 1rem);
           line-height: 1.65;
           max-width: 560px;
@@ -488,10 +488,10 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
         .acc-block {
           padding: clamp(1.2rem, 2vw, 1.6rem);
           border-radius: 20px;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
           background:
             radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 60%),
-            linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96));
+            linear-gradient(180deg, rgba(26, 26, 26, 0.92), rgba(12, 12, 12, 0.96));
           display: flex; flex-direction: column; gap: 1rem;
         }
         .acc-block header { display: flex; flex-direction: column; gap: 0.45rem; }
@@ -505,31 +505,31 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
         }
         .acc-feature-list li {
           display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem;
-          color: #DEE0F0; font-size: 0.92rem; line-height: 1.55;
+          color: #e7e7e7; font-size: 0.92rem; line-height: 1.55;
         }
         .acc-feature-check {
           display: inline-flex; align-items: center; justify-content: center;
           width: 22px; height: 22px; border-radius: 999px;
-          background: rgba(127, 214, 208, 0.18);
+          background: rgba(171, 171, 171, 0.18);
-          border: 1px solid rgba(127, 214, 208, 0.4);
+          border: 1px solid rgba(171, 171, 171, 0.4);
-          color: #7FD6D0;
+          color: #ababab;
           margin-top: 2px;
         }
         .acc-compat-list li {
           display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.55rem;
-          color: #DEE0F0; font-size: 0.92rem;
+          color: #e7e7e7; font-size: 0.92rem;
           padding: 0.55rem 0.7rem;
           border-radius: 10px;
-          border: 1px solid rgba(222, 224, 240, 0.08);
+          border: 1px solid rgba(231, 231, 231, 0.08);
-          background: linear-gradient(135deg, rgba(20, 19, 26, 0.6), rgba(10, 10, 14, 0.8));
+          background: linear-gradient(135deg, rgba(23, 23, 23, 0.6), rgba(12, 12, 12, 0.8));
         }
         .acc-compat-icon { color: var(--acc); font-weight: 800; font-size: 1.1rem; line-height: 1; }
-        .acc-block-empty { margin: 0; color: #C9CCDE; font-size: 0.92rem; line-height: 1.55; }
+        .acc-block-empty { margin: 0; color: #d4d4d4; font-size: 0.92rem; line-height: 1.55; }
 
         .acc-meta-grid {
           margin-top: auto;
           padding-top: 1rem;
-          border-top: 1px solid rgba(74, 102, 216, 0.18);
+          border-top: 1px solid rgba(145, 145, 145, 0.18);
           display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: 0.7rem;
         }
@@ -538,7 +538,7 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
         }
         .acc-meta span {
           font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase;
-          color: #8891C7; font-weight: 800;
+          color: #a8a8a8; font-weight: 800;
         }
         .acc-meta strong { color: #FFFFFF; font-weight: 600; font-size: 0.88rem; letter-spacing: -0.005em; }
 
@@ -546,17 +546,17 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
         .acc-cta {
           position: relative; overflow: hidden;
           border-radius: 26px;
-          border: 1px solid rgba(74, 102, 216, 0.26);
+          border: 1px solid rgba(145, 145, 145, 0.26);
           background:
-            radial-gradient(ellipse 60% 100% at 100% 0%, rgba(58, 85, 196, 0.22), transparent 60%),
+            radial-gradient(ellipse 60% 100% at 100% 0%, rgba(127, 127, 127, 0.22), transparent 60%),
-            linear-gradient(135deg, rgba(18, 16, 28, 0.95), rgba(8, 8, 12, 0.97));
+            linear-gradient(135deg, rgba(22, 22, 22, 0.95), rgba(10, 10, 10, 0.97));
           box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
           scroll-margin-top: clamp(80px, 12vh, 120px);
         }
         .acc-cta-glow {
           position: absolute; width: 480px; height: 480px; border-radius: 999px;
           top: -160px; left: -160px;
-          background: radial-gradient(circle, rgba(74, 102, 216, 0.45), transparent 70%);
+          background: radial-gradient(circle, rgba(145, 145, 145, 0.45), transparent 70%);
           filter: blur(100px); opacity: 0.55; pointer-events: none;
         }
         .acc-cta-inner {
@@ -575,7 +575,7 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
           font-size: clamp(1.55rem, 3vw, 2rem);
           font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.1;
         }
-        .acc-cta-text p { margin: 0; color: #DEE0F0; font-size: 0.95rem; line-height: 1.65; }
+        .acc-cta-text p { margin: 0; color: #e7e7e7; font-size: 0.95rem; line-height: 1.65; }
         .acc-cta-actions {
           display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-start;
         }
@@ -600,35 +600,35 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
           display: flex; flex-direction: column; gap: 0.35rem;
           padding: 1.1rem 1.15rem;
           border-radius: 18px;
-          border: 1px solid rgba(120, 140, 255, 0.22);
+          border: 1px solid rgba(188, 188, 188, 0.22);
           background:
             radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
-            linear-gradient(135deg, rgba(80, 110, 255, 0.10), rgba(255, 255, 255, 0.03));
+            linear-gradient(135deg, rgba(168, 168, 168, 0.10), rgba(255, 255, 255, 0.03));
           overflow: hidden;
           transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
         }
         .acc-highlight::before {
           content: ''; position: absolute;
           top: 0; right: 16px; width: 28px; height: 1px;
-          background: linear-gradient(90deg, transparent, rgba(180, 195, 255, 0.55));
+          background: linear-gradient(90deg, transparent, rgba(218, 218, 218, 0.55));
         }
         .acc-highlight:hover {
-          border-color: rgba(120, 140, 255, 0.55);
+          border-color: rgba(188, 188, 188, 0.55);
           transform: translateY(-2px);
           box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 22px color-mix(in srgb, var(--acc) 18%, transparent);
         }
         .acc-highlight-value {
           font-size: clamp(1.7rem, 3.2vw, 2.4rem);
           font-weight: 500; letter-spacing: -0.03em; line-height: 1;
-          background: linear-gradient(180deg, #FFFFFF, #B5BDDB);
+          background: linear-gradient(180deg, #FFFFFF, #c8c8c8);
           -webkit-background-clip: text; background-clip: text; color: transparent;
         }
         .acc-highlight-label {
           font-size: 0.66rem; letter-spacing: 0.22em;
-          text-transform: uppercase; font-weight: 800; color: #DEE0F0;
+          text-transform: uppercase; font-weight: 800; color: #e7e7e7;
         }
         .acc-highlight-sub {
-          font-size: 0.78rem; color: #8891C7; line-height: 1.3;
+          font-size: 0.78rem; color: #a8a8a8; line-height: 1.3;
         }
 
         /* FEATURE SECTIONS — full-bleed alternating */
@@ -643,10 +643,10 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
           gap: clamp(1.25rem, 3vw, 2rem);
           padding: clamp(1.5rem, 3vw, 2.25rem);
           border-radius: 24px;
-          border: 1px solid rgba(74, 102, 216, 0.20);
+          border: 1px solid rgba(145, 145, 145, 0.20);
           background:
             radial-gradient(ellipse 70% 80% at 0% 100%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
-            linear-gradient(135deg, rgba(18, 17, 26, 0.95), rgba(8, 8, 12, 0.97));
+            linear-gradient(135deg, rgba(22, 22, 22, 0.95), rgba(10, 10, 10, 0.97));
           box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
           overflow: hidden;
           align-items: center;
@@ -664,14 +664,14 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
           aspect-ratio: 16 / 11;
           border-radius: 18px;
           overflow: hidden;
-          background: #0a0a0e;
+          background: #0c0c0c;
-          border: 1px solid rgba(222, 224, 240, 0.08);
+          border: 1px solid rgba(231, 231, 231, 0.08);
           min-height: 200px;
         }
         .acc-feature-media-overlay {
           position: absolute; inset: 0;
           background:
-            linear-gradient(180deg, rgba(10, 10, 14, 0.08) 0%, rgba(10, 10, 14, 0.02) 40%, rgba(10, 10, 14, 0.55) 100%),
+            linear-gradient(180deg, rgba(12, 12, 12, 0.08) 0%, rgba(12, 12, 12, 0.02) 40%, rgba(12, 12, 12, 0.55) 100%),
             radial-gradient(ellipse 60% 70% at 100% 0%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 65%);
           pointer-events: none;
         }
@@ -689,7 +689,7 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
           line-height: 1.1;
         }
         .acc-feature-body p {
-          margin: 0; color: #DEE0F0;
+          margin: 0; color: #e7e7e7;
           font-size: clamp(0.95rem, 1.8vw, 1.05rem);
           line-height: 1.65;
         }
@@ -699,7 +699,7 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
         }
         .acc-feature-bullets li {
           display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem;
-          color: #DEE0F0; font-size: 0.92rem; line-height: 1.55;
+          color: #e7e7e7; font-size: 0.92rem; line-height: 1.55;
         }
 
         /* PARAMS DIAGRAM */
@@ -707,15 +707,15 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
           margin: 0;
           padding: clamp(1.2rem, 2.4vw, 1.8rem);
           border-radius: 22px;
-          border: 1px solid rgba(74, 102, 216, 0.22);
+          border: 1px solid rgba(145, 145, 145, 0.22);
           background:
             radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 60%),
-            linear-gradient(180deg, rgba(14, 13, 22, 0.95), rgba(8, 8, 12, 0.97));
+            linear-gradient(180deg, rgba(18, 18, 18, 0.95), rgba(10, 10, 10, 0.97));
           display: flex; flex-direction: column; gap: 1rem;
           box-shadow: 0 22px 52px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
         }
         .acc-params-figure figcaption {
-          color: #8891C7; font-size: 0.78rem;
+          color: #a8a8a8; font-size: 0.78rem;
           letter-spacing: 0.04em; text-align: center;
         }
 
@@ -731,15 +731,15 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
         }
         .acc-spec-group {
           border-radius: 18px;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
-          background: linear-gradient(180deg, rgba(20, 19, 26, 0.85), rgba(10, 10, 14, 0.94));
+          background: linear-gradient(180deg, rgba(23, 23, 23, 0.85), rgba(12, 12, 12, 0.94));
           overflow: hidden;
         }
         .acc-spec-head {
           display: flex; align-items: center; justify-content: space-between;
           gap: 0.75rem; padding: 0.9rem 1.1rem;
-          border-bottom: 1px solid rgba(74, 102, 216, 0.18);
+          border-bottom: 1px solid rgba(145, 145, 145, 0.18);
-          background: linear-gradient(180deg, rgba(74, 102, 216, 0.08), rgba(20, 19, 26, 0.6));
+          background: linear-gradient(180deg, rgba(145, 145, 145, 0.08), rgba(23, 23, 23, 0.6));
         }
         .acc-spec-head h3 {
           margin: 0; font-size: 0.95rem; font-weight: 600;
@@ -755,7 +755,7 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
           padding: 0.22rem 0.55rem;
           border-radius: 999px;
           border: 1px solid color-mix(in srgb, var(--acc) 38%, transparent);
-          background: rgba(10, 10, 14, 0.6);
+          background: rgba(12, 12, 12, 0.6);
         }
         .acc-spec-table {
           width: 100%;
@@ -767,17 +767,17 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
           padding: 0.7rem 1.1rem;
           text-align: left;
           vertical-align: top;
-          border-bottom: 1px solid rgba(222, 224, 240, 0.06);
+          border-bottom: 1px solid rgba(231, 231, 231, 0.06);
         }
         .acc-spec-table tr:last-child th,
         .acc-spec-table tr:last-child td { border-bottom: none; }
         .acc-spec-table th {
-          color: #A6B2D8;
+          color: #bfbfbf;
           font-weight: 600;
           width: 38%;
         }
         .acc-spec-table td {
-          color: #DEE0F0;
+          color: #e7e7e7;
           font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
           font-size: 0.82rem;
           letter-spacing: 0.01em;
@@ -788,8 +788,8 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
           display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
           padding: clamp(1.2rem, 2.4vw, 1.8rem);
           border-radius: 18px;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
-          background: linear-gradient(180deg, rgba(18, 17, 24, 0.85), rgba(10, 10, 14, 0.94));
+          background: linear-gradient(180deg, rgba(21, 21, 21, 0.85), rgba(12, 12, 12, 0.94));
         }
         @media (min-width: 820px) { .acc-foot { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; } }
         .acc-foot-block { display: flex; flex-direction: column; gap: 0.55rem; }
@@ -798,14 +798,14 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
           display: flex; flex-direction: column; gap: 0.45rem;
         }
         .acc-foot-list li {
-          color: #C9CCDE; font-size: 0.82rem; line-height: 1.55;
+          color: #d4d4d4; font-size: 0.82rem; line-height: 1.55;
         }
         .acc-foot-list sup {
           color: color-mix(in srgb, var(--acc) 70%, white);
           font-weight: 800;
           margin-right: 0.25rem;
         }
-        .acc-foot-block p { margin: 0; color: #C9CCDE; font-size: 0.82rem; line-height: 1.55; }
+        .acc-foot-block p { margin: 0; color: #d4d4d4; font-size: 0.82rem; line-height: 1.55; }
 
         /* RELATED */
         .acc-related { display: flex; flex-direction: column; gap: 1.25rem; }
@@ -837,10 +837,10 @@ function RelatedCard({ accessory }: { accessory: Accessory }) {
         overflow: 'hidden',
         textDecoration: 'none',
         color: '#FFFFFF',
-        border: '1px solid rgba(222, 224, 240, 0.10)',
+        border: '1px solid rgba(231, 231, 231, 0.10)',
         background:
-          `radial-gradient(ellipse 80% 60% at 100% 0%, ${accent}1A, transparent 60%), linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96))`,
+          `radial-gradient(ellipse 80% 60% at 100% 0%, ${accent}1A, transparent 60%), linear-gradient(180deg, rgba(26, 26, 26, 0.92), rgba(12, 12, 12, 0.96))`,
-        boxShadow: '0 1px 0 rgba(222, 224, 240, 0.04) inset, 0 14px 28px rgba(0, 0, 0, 0.36)',
+        boxShadow: '0 1px 0 rgba(231, 231, 231, 0.04) inset, 0 14px 28px rgba(0, 0, 0, 0.36)',
         transition: 'transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s, box-shadow 0.4s',
       }}
     >
@@ -848,9 +848,9 @@ function RelatedCard({ accessory }: { accessory: Accessory }) {
         style={{
           position: 'relative',
           aspectRatio: '16 / 11',
-          background: '#0a0a0e',
+          background: '#0c0c0c',
           overflow: 'hidden',
-          borderBottom: '1px solid rgba(222, 224, 240, 0.06)',
+          borderBottom: '1px solid rgba(231, 231, 231, 0.06)',
         }}
       >
         <Image
@@ -875,8 +875,8 @@ function RelatedCard({ accessory }: { accessory: Accessory }) {
           {accessory.brandLabel}
         </span>
         <h3 style={{ margin: 0, fontSize: '1rem', fontWeight: 600, color: '#FFFFFF', letterSpacing: '-0.005em' }}>{accessory.name}</h3>
-        <p style={{ margin: 0, color: '#C9CCDE', fontSize: '0.84rem', lineHeight: 1.55, flex: 1 }}>{accessory.tagline}</p>
+        <p style={{ margin: 0, color: '#d4d4d4', fontSize: '0.84rem', lineHeight: 1.55, flex: 1 }}>{accessory.tagline}</p>
-        <span style={{ marginTop: '0.5rem', display: 'inline-flex', alignItems: 'center', gap: '0.4rem', fontSize: '0.74rem', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#DEE0F0' }}>
+        <span style={{ marginTop: '0.5rem', display: 'inline-flex', alignItems: 'center', gap: '0.4rem', fontSize: '0.74rem', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#e7e7e7' }}>
           View accessory <ArrowRight size={13} strokeWidth={2} />
         </span>
       </div>

src/app/accessories/page.tsx

@@ -27,11 +27,11 @@ export default function AccessoriesIndexPage() {
             gap: 'clamp(2rem, 4vw, 3rem)',
           }}
         >
-          <nav aria-label="Breadcrumb" style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center', fontSize: '0.7rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: '#8891C7' }}>
+          <nav aria-label="Breadcrumb" style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center', fontSize: '0.7rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: '#a8a8a8' }}>
-            <Link href="/" style={{ color: '#8891C7', textDecoration: 'none' }}>Home</Link>
+            <Link href="/" style={{ color: '#a8a8a8', textDecoration: 'none' }}>Home</Link>
-            <span aria-hidden style={{ display: 'inline-flex', alignItems: 'center', color: '#4a4f63' }}><ChevronRight size={12} /></span>
+            <span aria-hidden style={{ display: 'inline-flex', alignItems: 'center', color: '#575757' }}><ChevronRight size={12} /></span>
-            <Link href="/robots/" style={{ color: '#8891C7', textDecoration: 'none' }}>Robots</Link>
+            <Link href="/robots/" style={{ color: '#a8a8a8', textDecoration: 'none' }}>Robots</Link>
-            <span aria-hidden style={{ display: 'inline-flex', alignItems: 'center', color: '#4a4f63' }}><ChevronRight size={12} /></span>
+            <span aria-hidden style={{ display: 'inline-flex', alignItems: 'center', color: '#575757' }}><ChevronRight size={12} /></span>
             <span aria-current="page" style={{ color: '#FFFFFF' }}>Accessories</span>
           </nav>
 
@@ -42,7 +42,7 @@ export default function AccessoriesIndexPage() {
                 {ACCESSORIES.length} accessories — dexterous hands, arms, sensors, IoT modules.
               </span>
             </h1>
-            <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.65 }}>
+            <p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.65 }}>
               Robot platforms get their full capability from accessories. Browse Unitree dexterous hands and arms, perception sensors, and Pudu dispatch, docking, modular attachments, and building IoT modules — all available in the UAE through YS Lootah Robotics.
             </p>
           </div>

src/app/admin/login/page.tsx

@@ -42,8 +42,8 @@ export default function AdminLoginPage() {
             width: '48px',
             height: '48px',
             borderRadius: '12px',
-            background: 'rgba(59, 130, 246, 0.08)',
+            background: 'rgba(153, 153, 153, 0.08)',
-            border: '1px solid rgba(59, 130, 246, 0.2)',
+            border: '1px solid rgba(153, 153, 153, 0.2)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -52,10 +52,10 @@ export default function AdminLoginPage() {
           }}>
             🔐
           </div>
-          <h1 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#0a0a0c', margin: 0, marginBottom: '0.25rem' }}>
+          <h1 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#0b0b0b', margin: 0, marginBottom: '0.25rem' }}>
             Admin Login
           </h1>
-          <p style={{ fontSize: '0.8rem', color: '#8891C7', margin: 0 }}>
+          <p style={{ fontSize: '0.8rem', color: '#a8a8a8', margin: 0 }}>
             Lootah Robotics G1 Configurator
           </p>
         </div>
@@ -71,7 +71,7 @@ export default function AdminLoginPage() {
               value={username}
               onChange={(e) => setUsername(e.target.value)}
               style={inputStyle}
-              onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.5)')}
+              onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(153, 153, 153, 0.5)')}
               onBlur={(e) => (e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.1)')}
               placeholder="admin"
             />
@@ -86,7 +86,7 @@ export default function AdminLoginPage() {
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               style={inputStyle}
-              onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.5)')}
+              onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(153, 153, 153, 0.5)')}
               onBlur={(e) => (e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.1)')}
               placeholder="••••••••"
             />
@@ -111,9 +111,9 @@ export default function AdminLoginPage() {
             style={{
               padding: '0.7rem',
               borderRadius: '0.5rem',
-              border: '1px solid rgba(59, 130, 246, 0.3)',
+              border: '1px solid rgba(153, 153, 153, 0.3)',
-              background: loading ? 'rgba(39, 63, 148, 0.1)' : 'rgba(59, 130, 246, 0.08)',
+              background: loading ? 'rgba(94, 94, 94, 0.1)' : 'rgba(153, 153, 153, 0.08)',
-              color: loading ? '#8891C7' : '#2563eb',
+              color: loading ? '#a8a8a8' : '#888888',
               fontSize: '0.875rem',
               fontWeight: 600,
               cursor: loading ? 'not-allowed' : 'pointer',
@@ -153,7 +153,7 @@ const labelStyle: React.CSSProperties = {
   display: 'block',
   fontSize: '0.75rem',
   fontWeight: 600,
-  color: '#374151',
+  color: '#444444',
   marginBottom: '0.375rem',
   letterSpacing: '0.02em',
 };
@@ -164,7 +164,7 @@ const inputStyle: React.CSSProperties = {
   borderRadius: '0.5rem',
   border: '1px solid rgba(0, 0, 0, 0.1)',
   background: '#ffffff',
-  color: '#0a0a0c',
+  color: '#0b0b0b',
   fontSize: '0.875rem',
   outline: 'none',
   transition: 'border-color 0.2s ease',

src/app/admin/page.tsx

@@ -85,7 +85,7 @@ export default function AdminPage() {
             if (existingPersona) {
               personaStore.getState().updatePersona(server.id, { modelPath: mergedModelPath });
             } else {
-              personaStore.getState().addPersona({ id: server.id, label: server.label, description: server.label, colors: { torso: '#3b82f6', legs: '#3b82f6' }, modelPath: mergedModelPath });
+              personaStore.getState().addPersona({ id: server.id, label: server.label, description: server.label, colors: { torso: '#999999', legs: '#999999' }, modelPath: mergedModelPath });
             }
           }
         }
@@ -199,7 +199,7 @@ export default function AdminPage() {
           id: itemId,
           label: item?.label ?? itemId,
           description: item?.label ?? itemId,
-          colors: { torso: '#3b82f6', legs: '#3b82f6' },
+          colors: { torso: '#999999', legs: '#999999' },
           modelPath,
         });
       }
@@ -241,7 +241,7 @@ export default function AdminPage() {
             id,
             label: item.label,
             description: item.label,
-            colors: { torso: '#3b82f6', legs: '#3b82f6' },
+            colors: { torso: '#999999', legs: '#999999' },
             modelPath,
           });
           count++;
@@ -306,7 +306,7 @@ export default function AdminPage() {
         id,
         label,
         description: label,
-        colors: { torso: '#3b82f6', legs: '#3b82f6' },
+        colors: { torso: '#999999', legs: '#999999' },
         modelPath,
       });
     }
@@ -318,7 +318,7 @@ export default function AdminPage() {
   // --------------- PERSONAS ---------------
   const personas = usePersonaStore((s) => s.personas);
   const isPersonaHydrated = usePersonaStore((s) => s.isHydrated);
-  const [newPersona, setNewPersona] = useState({ label: '', description: '', torso: '#3b82f6', legs: '#3b82f6' });
+  const [newPersona, setNewPersona] = useState({ label: '', description: '', torso: '#999999', legs: '#999999' });
   const [personaError, setPersonaError] = useState('');
   const [personaSaved, setPersonaSaved] = useState(false);
 
@@ -337,7 +337,7 @@ export default function AdminPage() {
       description,
       colors: { torso: newPersona.torso, legs: newPersona.legs },
     });
-    setNewPersona({ label: '', description: '', torso: '#3b82f6', legs: '#3b82f6' });
+    setNewPersona({ label: '', description: '', torso: '#999999', legs: '#999999' });
     setPersonaSaved(true);
     setTimeout(() => setPersonaSaved(false), 2000);
   };
@@ -488,7 +488,7 @@ export default function AdminPage() {
     new Date(ts * 1000).toLocaleDateString('en-AE', { day: 'numeric', month: 'short', year: 'numeric' });
 
   if (!isPricingHydrated) {
-    return <div style={pageStyle}><p style={{ color: '#6a73a5' }}>Loading…</p></div>;
+    return <div style={pageStyle}><p style={{ color: '#888888' }}>Loading…</p></div>;
   }
 
   return (
@@ -497,10 +497,10 @@ export default function AdminPage() {
         {/* HEADER */}
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
           <div>
-            <h1 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#0a0a0c', margin: 0, marginBottom: '0.2rem' }}>
+            <h1 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#0b0b0b', margin: 0, marginBottom: '0.2rem' }}>
               Admin Dashboard
             </h1>
-            <p style={{ fontSize: '0.75rem', color: '#8891C7', margin: 0 }}>Lootah Robotics G1 Configurator</p>
+            <p style={{ fontSize: '0.75rem', color: '#a8a8a8', margin: 0 }}>Lootah Robotics G1 Configurator</p>
           </div>
           <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
             <button onClick={() => setShowPwModal(true)} style={ghostBtnStyle}>Change Password</button>
@@ -526,8 +526,8 @@ export default function AdminPage() {
                 padding: '0.4rem 0.875rem',
                 borderRadius: '0.375rem',
                 border: 'none',
-                background: activeTab === t ? 'rgba(59,130,246,0.08)' : 'transparent',
+                background: activeTab === t ? 'rgba(153, 153, 153, 0.08)' : 'transparent',
-                color: activeTab === t ? '#2563eb' : '#6a73a5',
+                color: activeTab === t ? '#888888' : '#888888',
                 fontSize: '0.8rem',
                 fontWeight: activeTab === t ? 600 : 400,
                 cursor: 'pointer',
@@ -553,20 +553,20 @@ export default function AdminPage() {
                         value={editedLabels[item.id] ?? item.label}
                         onChange={(e) => setEditedLabels((prev) => ({ ...prev, [item.id]: e.target.value }))}
                         style={tableInputStyle}
-                        onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(59,130,246,0.5)')}
+                        onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(153, 153, 153, 0.5)')}
                         onBlur={(e) => (e.currentTarget.style.borderColor = 'rgba(0,0,0,0.1)')}
                         aria-label={`Label for ${item.label}`}
                     />
                   </div>
-                  <div style={{ fontSize: '0.7rem', color: '#8891C7', fontFamily: 'monospace', paddingLeft: '0.25rem' }}>{item.id}</div>
+                  <div style={{ fontSize: '0.7rem', color: '#a8a8a8', fontFamily: 'monospace', paddingLeft: '0.25rem' }}>{item.id}</div>
                   <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
-                    <span style={{ fontSize: '0.7rem', color: '#8891C7' }}>AED</span>
+                    <span style={{ fontSize: '0.7rem', color: '#a8a8a8' }}>AED</span>
                     <input
                       type="text"
                       value={formatPrice(editedPrices[item.id] ?? item.price)}
                       onChange={(e) => handlePriceChange(item.id, e.target.value)}
                       style={tableInputStyle}
-                      onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(59,130,246,0.5)')}
+                      onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(153, 153, 153, 0.5)')}
                       onBlur={(e) => (e.currentTarget.style.borderColor = 'rgba(0,0,0,0.1)')}
                       aria-label={`Price for ${item.label}`}
                     />
@@ -584,7 +584,7 @@ export default function AdminPage() {
                     ) : null}
                     <label
                       title="Upload / replace .glb"
-                      style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem', cursor: rowGlbUploading[item.id] ? 'wait' : 'pointer', fontSize: '0.7rem', color: rowGlbUploading[item.id] ? '#2563eb' : '#8891C7', background: rowGlbUploading[item.id] ? 'rgba(59,130,246,0.06)' : 'transparent', border: `1px dashed ${rowGlbUploading[item.id] ? 'rgba(59,130,246,0.3)' : 'rgba(0,0,0,0.12)'}`, borderRadius: '0.375rem', padding: '0.2rem 0.45rem', whiteSpace: 'nowrap' }}
+                      style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem', cursor: rowGlbUploading[item.id] ? 'wait' : 'pointer', fontSize: '0.7rem', color: rowGlbUploading[item.id] ? '#888888' : '#a8a8a8', background: rowGlbUploading[item.id] ? 'rgba(153, 153, 153, 0.06)' : 'transparent', border: `1px dashed ${rowGlbUploading[item.id] ? 'rgba(153, 153, 153, 0.3)' : 'rgba(0,0,0,0.12)'}`, borderRadius: '0.375rem', padding: '0.2rem 0.45rem', whiteSpace: 'nowrap' }}
                     >
                       <input type="file" accept=".glb" style={{ display: 'none' }} onChange={(e) => {
                         const f = e.target.files?.[0] ?? null;
@@ -613,7 +613,7 @@ export default function AdminPage() {
 
             {/* Add new pricing item */}
             <div style={{ marginTop: '1rem', padding: '1rem 1.25rem', background: 'rgba(248,248,246,0.6)', border: '1px solid rgba(0,0,0,0.06)', borderRadius: '0.75rem' }}>
-              <p style={{ fontSize: '0.75rem', fontWeight: 600, color: '#374151', marginBottom: '0.75rem', marginTop: 0 }}>Add Pricing Item</p>
+              <p style={{ fontSize: '0.75rem', fontWeight: 600, color: '#444444', marginBottom: '0.75rem', marginTop: 0 }}>Add Pricing Item</p>
               <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 120px', gap: '0.5rem', alignItems: 'flex-end' }}>
                 <div>
                   <label style={labelStyle}>ID (slug)</label>
@@ -638,11 +638,11 @@ export default function AdminPage() {
                   gap: '0.625rem',
                   padding: '0.5rem 0.75rem',
                   borderRadius: '0.375rem',
-                  border: `1px dashed ${addItemGlb ? 'rgba(59,130,246,0.4)' : 'rgba(0,0,0,0.15)'}`,
+                  border: `1px dashed ${addItemGlb ? 'rgba(153, 153, 153, 0.4)' : 'rgba(0,0,0,0.15)'}`,
-                  background: addItemGlb ? 'rgba(59,130,246,0.04)' : '#fff',
+                  background: addItemGlb ? 'rgba(153, 153, 153, 0.04)' : '#fff',
                   cursor: 'pointer',
                   fontSize: '0.8rem',
-                  color: addItemGlb ? '#2563eb' : '#8891C7',
+                  color: addItemGlb ? '#888888' : '#a8a8a8',
                   transition: 'all 0.2s',
                 }}>
                   <input
@@ -658,7 +658,7 @@ export default function AdminPage() {
                   {addItemGlb && (
                     <button
                       onClick={(e) => { e.preventDefault(); setAddItemGlb(null); }}
-                      style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', color: '#8891C7', fontSize: '0.75rem', padding: '0 2px' }}
+                      style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', color: '#a8a8a8', fontSize: '0.75rem', padding: '0 2px' }}
                     >✕</button>
                   )}
                 </label>
@@ -674,7 +674,7 @@ export default function AdminPage() {
                 <button onClick={handleAddItem} disabled={addItemUploading} style={secondaryBtnStyle}>
                   {addItemUploading ? 'Uploading…' : 'Add Item'}
                 </button>
-                <button onClick={handleSavePrices} style={{ ...primaryBtnStyle, background: priceSaved ? 'rgba(34,197,94,0.08)' : 'rgba(59,130,246,0.08)', color: priceSaved ? '#16a34a' : '#2563eb' }}>
+                <button onClick={handleSavePrices} style={{ ...primaryBtnStyle, background: priceSaved ? 'rgba(34,197,94,0.08)' : 'rgba(153, 153, 153, 0.08)', color: priceSaved ? '#16a34a' : '#888888' }}>
                   {priceSaved ? 'Saved!' : 'Save Prices'}
                 </button>
               </div>
@@ -686,23 +686,23 @@ export default function AdminPage() {
         {activeTab === 'personas' && (
           <div>
             {!isPersonaHydrated ? (
-              <p style={{ color: '#6a73a5', fontSize: '0.85rem' }}>Loading personas…</p>
+              <p style={{ color: '#888888', fontSize: '0.85rem' }}>Loading personas…</p>
             ) : (
               <TableCard>
                 <TableHeader cols="1fr 80px 80px 56px" labels={['Persona', 'Torso', 'Legs', '']} />
                 {personas.map((p, i) => (
                   <div key={p.id} style={{ display: 'grid', gridTemplateColumns: '1fr 80px 80px 56px', padding: '0.875rem 1.25rem', alignItems: 'center', borderBottom: i < personas.length - 1 ? '1px solid rgba(0,0,0,0.04)' : 'none' }}>
                     <div>
-                      <div style={{ fontSize: '0.85rem', color: '#374151', fontWeight: 500 }}>{p.label}</div>
+                      <div style={{ fontSize: '0.85rem', color: '#444444', fontWeight: 500 }}>{p.label}</div>
-                      <div style={{ fontSize: '0.7rem', color: '#8891C7' }}>{p.description}</div>
+                      <div style={{ fontSize: '0.7rem', color: '#a8a8a8' }}>{p.description}</div>
                     </div>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
                       <div style={{ width: 20, height: 20, borderRadius: 4, backgroundColor: p.colors.torso, border: '1px solid rgba(0,0,0,0.1)', flexShrink: 0 }} />
-                      <span style={{ fontSize: '0.7rem', color: '#8891C7', fontFamily: 'monospace' }}>{p.colors.torso}</span>
+                      <span style={{ fontSize: '0.7rem', color: '#a8a8a8', fontFamily: 'monospace' }}>{p.colors.torso}</span>
                     </div>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
                       <div style={{ width: 20, height: 20, borderRadius: 4, backgroundColor: p.colors.legs, border: '1px solid rgba(0,0,0,0.1)', flexShrink: 0 }} />
-                      <span style={{ fontSize: '0.7rem', color: '#8891C7', fontFamily: 'monospace' }}>{p.colors.legs}</span>
+                      <span style={{ fontSize: '0.7rem', color: '#a8a8a8', fontFamily: 'monospace' }}>{p.colors.legs}</span>
                     </div>
                     <div style={{ display: 'flex', justifyContent: 'center' }}>
                       {p.id !== 'none' && (
@@ -716,7 +716,7 @@ export default function AdminPage() {
 
             {/* Add new persona */}
             <div style={{ marginTop: '1rem', padding: '1rem 1.25rem', background: 'rgba(248,248,246,0.6)', border: '1px solid rgba(0,0,0,0.06)', borderRadius: '0.75rem' }}>
-              <p style={{ fontSize: '0.75rem', fontWeight: 600, color: '#374151', marginBottom: '0.75rem', marginTop: 0 }}>Add Persona</p>
+              <p style={{ fontSize: '0.75rem', fontWeight: 600, color: '#444444', marginBottom: '0.75rem', marginTop: 0 }}>Add Persona</p>
               <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem' }}>
                 <div>
                   <label style={labelStyle}>Label</label>
@@ -744,7 +744,7 @@ export default function AdminPage() {
               {personaError && <p style={errorTextStyle}>{personaError}</p>}
               <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem', marginTop: '0.75rem' }}>
                 <button onClick={() => personaStore.getState().resetPersonas()} style={dangerBtnStyle}>Reset to Defaults</button>
-                <button onClick={handleAddPersona} style={{ ...primaryBtnStyle, background: personaSaved ? 'rgba(34,197,94,0.08)' : 'rgba(59,130,246,0.08)', color: personaSaved ? '#16a34a' : '#2563eb' }}>
+                <button onClick={handleAddPersona} style={{ ...primaryBtnStyle, background: personaSaved ? 'rgba(34,197,94,0.08)' : 'rgba(153, 153, 153, 0.08)', color: personaSaved ? '#16a34a' : '#888888' }}>
                   {personaSaved ? 'Added!' : 'Add Persona'}
                 </button>
               </div>
@@ -762,7 +762,7 @@ export default function AdminPage() {
             </div>
             {ordersError && <p style={errorTextStyle}>{ordersError}</p>}
             {!ordersLoading && orders.length === 0 && !ordersError && (
-              <p style={{ color: '#8891C7', fontSize: '0.85rem', textAlign: 'center', padding: '2rem' }}>No orders found.</p>
+              <p style={{ color: '#a8a8a8', fontSize: '0.85rem', textAlign: 'center', padding: '2rem' }}>No orders found.</p>
             )}
             {orders.length > 0 && (
               <TableCard>
@@ -791,18 +791,18 @@ export default function AdminPage() {
             </div>
             {contactsError && <p style={errorTextStyle}>{contactsError}</p>}
             {!contactsLoading && contacts.length === 0 && !contactsError && (
-              <p style={{ color: '#8891C7', fontSize: '0.85rem', textAlign: 'center', padding: '2rem' }}>No contact inquiries yet.</p>
+              <p style={{ color: '#a8a8a8', fontSize: '0.85rem', textAlign: 'center', padding: '2rem' }}>No contact inquiries yet.</p>
             )}
             {contacts.length > 0 && (
               <TableCard>
                 <TableHeader cols="1.5fr 1fr 1fr 2.5fr 1fr" labels={['Name', 'Email', 'Phone', 'Message', 'Date']} />
                 {contacts.map((c, i) => (
                   <div key={c.id} style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 2.5fr 1fr', padding: '1rem 1.25rem', alignItems: 'flex-start', borderBottom: i < contacts.length - 1 ? '1px solid rgba(0,0,0,0.04)' : 'none', gap: '1rem' }}>
-                    <div style={{ fontSize: '0.85rem', fontWeight: 500, color: '#1e293b' }}>{c.name}</div>
+                    <div style={{ fontSize: '0.85rem', fontWeight: 500, color: '#2d2d2d' }}>{c.name}</div>
-                    <div style={{ fontSize: '0.8rem', color: '#6a73a5' }}><a href={`mailto:${c.email}`} style={{ color: '#3b82f6', textDecoration: 'none' }}>{c.email}</a></div>
+                    <div style={{ fontSize: '0.8rem', color: '#888888' }}><a href={`mailto:${c.email}`} style={{ color: '#999999', textDecoration: 'none' }}>{c.email}</a></div>
-                    <div style={{ fontSize: '0.8rem', color: '#6a73a5' }}>{c.phone ? <a href={`tel:${c.phone}`} style={{ color: '#6a73a5', textDecoration: 'none' }}>{c.phone}</a> : '-'}</div>
+                    <div style={{ fontSize: '0.8rem', color: '#888888' }}>{c.phone ? <a href={`tel:${c.phone}`} style={{ color: '#888888', textDecoration: 'none' }}>{c.phone}</a> : '-'}</div>
-                    <div style={{ fontSize: '0.8rem', color: '#475569', whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>{c.message}</div>
+                    <div style={{ fontSize: '0.8rem', color: '#585858', whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>{c.message}</div>
-                    <div style={{ fontSize: '0.75rem', color: '#8891C7' }}>{new Date(c.createdAt).toLocaleDateString('en-AE')}</div>
+                    <div style={{ fontSize: '0.75rem', color: '#a8a8a8' }}>{new Date(c.createdAt).toLocaleDateString('en-AE')}</div>
                   </div>
                 ))}
               </TableCard>
@@ -813,15 +813,15 @@ export default function AdminPage() {
         {/* SETTINGS TAB */}
         {activeTab === 'settings' && (
           <div>
-            <h2 style={{ fontSize: '1rem', fontWeight: 700, color: '#0a0a0c', margin: '0 0 1rem' }}>App Settings</h2>
+            <h2 style={{ fontSize: '1rem', fontWeight: 700, color: '#0b0b0b', margin: '0 0 1rem' }}>App Settings</h2>
             {settingError && <p style={{ color: '#dc2626', fontSize: '0.8rem', marginBottom: '0.75rem' }}>{settingError}</p>}
             {settingsLoading ? (
-              <p style={{ color: '#6a73a5', fontSize: '0.875rem' }}>Loading…</p>
+              <p style={{ color: '#888888', fontSize: '0.875rem' }}>Loading…</p>
             ) : (
               <TableCard>
                 <TableHeader cols="1fr 1.5fr 110px 50px" labels={['Key', 'Value', '', '']} />
                 {settings.length === 0 && (
-                  <p style={{ padding: '1rem', color: '#8891C7', fontSize: '0.8rem' }}>No settings yet.</p>
+                  <p style={{ padding: '1rem', color: '#a8a8a8', fontSize: '0.8rem' }}>No settings yet.</p>
                 )}
                 {settings.map((s, i) => (
                   <SettingRow
@@ -837,8 +837,8 @@ export default function AdminPage() {
             )}
 
             {/* Add new setting */}
-            <div style={{ marginTop: '1.25rem', padding: '1rem', background: '#FBFBFD', borderRadius: '0.75rem', border: '1px solid rgba(0,0,0,0.06)' }}>
+            <div style={{ marginTop: '1.25rem', padding: '1rem', background: '#fcfcfc', borderRadius: '0.75rem', border: '1px solid rgba(0,0,0,0.06)' }}>
-              <h3 style={{ fontSize: '0.875rem', fontWeight: 600, color: '#0a0a0c', margin: '0 0 0.75rem' }}>Add Setting</h3>
+              <h3 style={{ fontSize: '0.875rem', fontWeight: 600, color: '#0b0b0b', margin: '0 0 0.75rem' }}>Add Setting</h3>
               <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr auto', gap: '0.5rem', alignItems: 'flex-end' }}>
                 <div>
                   <label style={labelStyle}>Key</label>
@@ -869,7 +869,7 @@ export default function AdminPage() {
       {showPwModal && (
         <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 50 }}>
           <div style={{ background: '#fff', borderRadius: '1rem', padding: '1.5rem', width: '100%', maxWidth: '380px', boxShadow: '0 20px 60px rgba(0,0,0,0.15)' }}>
-            <h2 style={{ fontSize: '1rem', fontWeight: 700, color: '#0a0a0c', margin: '0 0 1.25rem' }}>Change Password</h2>
+            <h2 style={{ fontSize: '1rem', fontWeight: 700, color: '#0b0b0b', margin: '0 0 1.25rem' }}>Change Password</h2>
             <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
               {(['current', 'next', 'confirm'] as const).map((field) => (
                 <div key={field}>
@@ -918,8 +918,8 @@ function SettingRow({
   useEffect(() => { setEditVal(setting.value); }, [setting.value]);
 
   return (
-    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr 110px 50px', gap: '0.75rem', padding: '0.625rem 1rem', alignItems: 'center', background: index % 2 === 0 ? '#fff' : '#FBFBFD', borderTop: index > 0 ? '1px solid rgba(0,0,0,0.04)' : 'none' }}>
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr 110px 50px', gap: '0.75rem', padding: '0.625rem 1rem', alignItems: 'center', background: index % 2 === 0 ? '#fff' : '#fcfcfc', borderTop: index > 0 ? '1px solid rgba(0,0,0,0.04)' : 'none' }}>
-      <span style={{ fontSize: '0.8rem', fontFamily: 'monospace', color: '#334155' }}>{setting.key}</span>
+      <span style={{ fontSize: '0.8rem', fontFamily: 'monospace', color: '#444444' }}>{setting.key}</span>
       <input
         value={editVal}
         onChange={(e) => setEditVal(e.target.value)}
@@ -979,13 +979,13 @@ function OrderRow({
   const fieldStyle: React.CSSProperties = {
     fontSize: '0.63rem',
     fontWeight: 600,
-    color: '#8891C7',
+    color: '#a8a8a8',
     textTransform: 'uppercase',
     letterSpacing: '0.04em',
   };
   const valueStyle: React.CSSProperties = {
     fontSize: '0.8rem',
-    color: '#374151',
+    color: '#444444',
     marginTop: '0.1rem',
     wordBreak: 'break-word',
   };
@@ -995,11 +995,11 @@ function OrderRow({
       {/* Collapsed row */}
       <div style={{ display: 'grid', gridTemplateColumns: '1fr 130px 90px 100px 28px', padding: '0.75rem 1.25rem', alignItems: 'center' }}>
         <div>
-          <div style={{ fontSize: '0.85rem', color: '#374151', fontWeight: 500 }}>{name}</div>
+          <div style={{ fontSize: '0.85rem', color: '#444444', fontWeight: 500 }}>{name}</div>
-          {email && <div style={{ fontSize: '0.7rem', color: '#8891C7' }}>{email}</div>}
+          {email && <div style={{ fontSize: '0.7rem', color: '#a8a8a8' }}>{email}</div>}
-          <div style={{ fontSize: '0.65rem', color: '#DEE0F0', fontFamily: 'monospace', marginTop: '0.1rem' }}>{order.id}</div>
+          <div style={{ fontSize: '0.65rem', color: '#e7e7e7', fontFamily: 'monospace', marginTop: '0.1rem' }}>{order.id}</div>
         </div>
-        <div style={{ fontSize: '0.85rem', color: '#374151', fontWeight: 500 }}>{formatAmount(order.amount, order.currency)}</div>
+        <div style={{ fontSize: '0.85rem', color: '#444444', fontWeight: 500 }}>{formatAmount(order.amount, order.currency)}</div>
         <div>
           <span style={{
             display: 'inline-block',
@@ -1008,17 +1008,17 @@ function OrderRow({
             fontSize: '0.65rem',
             fontWeight: 600,
             textTransform: 'uppercase',
-            background: order.status === 'succeeded' ? 'rgba(34,197,94,0.1)' : order.status === 'canceled' ? 'rgba(239,68,68,0.08)' : 'rgba(39, 63, 148,0.15)',
+            background: order.status === 'succeeded' ? 'rgba(34,197,94,0.1)' : order.status === 'canceled' ? 'rgba(239,68,68,0.08)' : 'rgba(94, 94, 94, 0.15)',
-            color: order.status === 'succeeded' ? '#16a34a' : order.status === 'canceled' ? '#dc2626' : '#6a73a5',
+            color: order.status === 'succeeded' ? '#16a34a' : order.status === 'canceled' ? '#dc2626' : '#888888',
           }}>
             {order.status}
           </span>
         </div>
-        <div style={{ fontSize: '0.75rem', color: '#8891C7' }}>{formatDate(order.created)}</div>
+        <div style={{ fontSize: '0.75rem', color: '#a8a8a8' }}>{formatDate(order.created)}</div>
         <button
           onClick={handleExpand}
           title={expanded ? 'Collapse' : 'Show details'}
-          style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#8891C7', fontSize: '0.7rem', padding: '2px 4px', borderRadius: 4 }}
+          style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#a8a8a8', fontSize: '0.7rem', padding: '2px 4px', borderRadius: 4 }}
         >
           {expanded ? '▲' : '▼'}
         </button>
@@ -1066,23 +1066,23 @@ function OrderRow({
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
                   {priceLines.map((line, i) => (
                     <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                      <span style={{ fontSize: '0.78rem', color: '#374151' }}>{line.label}</span>
+                      <span style={{ fontSize: '0.78rem', color: '#444444' }}>{line.label}</span>
-                      <span style={{ fontSize: '0.78rem', color: '#374151', fontFamily: 'monospace' }}>
+                      <span style={{ fontSize: '0.78rem', color: '#444444', fontFamily: 'monospace' }}>
                         AED {new Intl.NumberFormat('en-AE').format(line.price)}
                       </span>
                     </div>
                   ))}
                   <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: '0.4rem', marginTop: '0.1rem', borderTop: '1px solid rgba(0,0,0,0.07)' }}>
-                    <span style={{ fontSize: '0.82rem', fontWeight: 700, color: '#0a0a0c' }}>Total</span>
+                    <span style={{ fontSize: '0.82rem', fontWeight: 700, color: '#0b0b0b' }}>Total</span>
-                    <span style={{ fontSize: '0.88rem', fontWeight: 700, color: '#0a0a0c', fontFamily: 'monospace' }}>
+                    <span style={{ fontSize: '0.88rem', fontWeight: 700, color: '#0b0b0b', fontFamily: 'monospace' }}>
                       {formatAmount(order.amount, order.currency)}
                     </span>
                   </div>
                 </div>
               ) : (
                 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <span style={{ fontSize: '0.78rem', color: '#6a73a5' }}>Total (legacy order)</span>
+                  <span style={{ fontSize: '0.78rem', color: '#888888' }}>Total (legacy order)</span>
-                  <span style={{ fontSize: '0.88rem', fontWeight: 700, color: '#0a0a0c', fontFamily: 'monospace' }}>
+                  <span style={{ fontSize: '0.88rem', fontWeight: 700, color: '#0b0b0b', fontFamily: 'monospace' }}>
                     {formatAmount(order.amount, order.currency)}
                   </span>
                 </div>
@@ -1090,16 +1090,16 @@ function OrderRow({
             </SectionBox>
 
             {/* Payment ID */}
-            <div style={{ fontSize: '0.65rem', color: '#DEE0F0', fontFamily: 'monospace' }}>
+            <div style={{ fontSize: '0.65rem', color: '#e7e7e7', fontFamily: 'monospace' }}>
               Payment ID: {order.id}
             </div>
           </div>
 
           {/* Right: snapshot */}
           <div style={{ display: 'flex', flexDirection: 'column', gap: '0.375rem' }}>
-            <div style={{ fontSize: '0.63rem', fontWeight: 600, color: '#8891C7', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Robot Snapshot</div>
+            <div style={{ fontSize: '0.63rem', fontWeight: 600, color: '#a8a8a8', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Robot Snapshot</div>
             {snapshot === 'loading' && (
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(248,248,246,0.8)', borderRadius: '0.5rem', minHeight: 120, fontSize: '0.75rem', color: '#8891C7' }}>Loading…</div>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(248,248,246,0.8)', borderRadius: '0.5rem', minHeight: 120, fontSize: '0.75rem', color: '#a8a8a8' }}>Loading…</div>
             )}
             {snapshot && snapshot !== 'loading' && snapshot !== 'none' && (
               /* eslint-disable-next-line @next/next/no-img-element */
@@ -1110,7 +1110,7 @@ function OrderRow({
               />
             )}
             {snapshot === 'none' && (
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(248,248,246,0.8)', borderRadius: '0.5rem', minHeight: 80, fontSize: '0.72rem', color: '#DEE0F0' }}>No snapshot</div>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(248,248,246,0.8)', borderRadius: '0.5rem', minHeight: 80, fontSize: '0.72rem', color: '#e7e7e7' }}>No snapshot</div>
             )}
           </div>
         </div>
@@ -1122,7 +1122,7 @@ function OrderRow({
 function SectionBox({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div style={{ background: 'rgba(248,248,246,0.8)', borderRadius: '0.5rem', padding: '0.75rem 1rem' }}>
-      <div style={{ fontSize: '0.6rem', fontWeight: 700, color: '#8891C7', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '0.5rem' }}>{title}</div>
+      <div style={{ fontSize: '0.6rem', fontWeight: 700, color: '#a8a8a8', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '0.5rem' }}>{title}</div>
       {children}
     </div>
   );
@@ -1138,8 +1138,8 @@ function InfoField({ label, value }: { label: string; value?: string | null }) {
   if (!value) return null;
   return (
     <div>
-      <div style={{ fontSize: '0.63rem', fontWeight: 600, color: '#8891C7', textTransform: 'uppercase', letterSpacing: '0.04em' }}>{label}</div>
+      <div style={{ fontSize: '0.63rem', fontWeight: 600, color: '#a8a8a8', textTransform: 'uppercase', letterSpacing: '0.04em' }}>{label}</div>
-      <div style={{ fontSize: '0.8rem', color: '#374151', marginTop: '0.1rem', wordBreak: 'break-word' }}>{value}</div>
+      <div style={{ fontSize: '0.8rem', color: '#444444', marginTop: '0.1rem', wordBreak: 'break-word' }}>{value}</div>
     </div>
   );
 }
@@ -1147,8 +1147,8 @@ function InfoField({ label, value }: { label: string; value?: string | null }) {
 function StatCard({ label, value }: { label: string; value: string }) {
   return (
     <div style={{ background: 'rgba(255,255,255,0.95)', border: '1px solid rgba(0,0,0,0.06)', borderRadius: '0.75rem', padding: '1rem 1.25rem' }}>
-      <div style={{ fontSize: '0.7rem', fontWeight: 600, color: '#8891C7', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '0.25rem' }}>{label}</div>
+      <div style={{ fontSize: '0.7rem', fontWeight: 600, color: '#a8a8a8', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '0.25rem' }}>{label}</div>
-      <div style={{ fontSize: '1.25rem', fontWeight: 700, color: '#0a0a0c' }}>{value}</div>
+      <div style={{ fontSize: '1.25rem', fontWeight: 700, color: '#0b0b0b' }}>{value}</div>
     </div>
   );
 }
@@ -1165,7 +1165,7 @@ function TableHeader({ cols, labels }: { cols: string; labels: string[] }) {
   return (
     <div style={{ display: 'grid', gridTemplateColumns: cols, padding: '0.6rem 1.25rem', borderBottom: '1px solid rgba(0,0,0,0.04)', background: 'rgba(248,248,246,0.5)' }}>
       {labels.map((l) => (
-        <span key={l} style={{ fontSize: '0.65rem', fontWeight: 600, color: '#6a73a5', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{l}</span>
+        <span key={l} style={{ fontSize: '0.65rem', fontWeight: 600, color: '#888888', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{l}</span>
       ))}
     </div>
   );
@@ -1193,7 +1193,7 @@ const labelStyle: React.CSSProperties = {
   display: 'block',
   fontSize: '0.7rem',
   fontWeight: 600,
-  color: '#374151',
+  color: '#444444',
   marginBottom: '0.25rem',
   letterSpacing: '0.02em',
 };
@@ -1204,7 +1204,7 @@ const formInputStyle: React.CSSProperties = {
   borderRadius: '0.375rem',
   border: '1px solid rgba(0,0,0,0.1)',
   background: '#ffffff',
-  color: '#0a0a0c',
+  color: '#0b0b0b',
   fontSize: '0.8rem',
   outline: 'none',
   boxSizing: 'border-box',
@@ -1216,7 +1216,7 @@ const tableInputStyle: React.CSSProperties = {
   borderRadius: '0.375rem',
   border: '1px solid rgba(0,0,0,0.1)',
   background: '#ffffff',
-  color: '#0a0a0c',
+  color: '#0b0b0b',
   fontSize: '0.8rem',
   fontFamily: 'monospace',
   textAlign: 'right' as const,
@@ -1228,7 +1228,7 @@ const ghostBtnStyle: React.CSSProperties = {
   borderRadius: '0.375rem',
   border: '1px solid rgba(0,0,0,0.1)',
   background: 'transparent',
-  color: '#374151',
+  color: '#444444',
   fontSize: '0.75rem',
   cursor: 'pointer',
 };
@@ -1236,9 +1236,9 @@ const ghostBtnStyle: React.CSSProperties = {
 const primaryBtnStyle: React.CSSProperties = {
   padding: '0.5rem 1.25rem',
   borderRadius: '0.375rem',
-  border: '1px solid rgba(59,130,246,0.3)',
+  border: '1px solid rgba(153, 153, 153, 0.3)',
-  background: 'rgba(59,130,246,0.08)',
+  background: 'rgba(153, 153, 153, 0.08)',
-  color: '#2563eb',
+  color: '#888888',
   fontSize: '0.8rem',
   fontWeight: 600,
   cursor: 'pointer',
@@ -1249,7 +1249,7 @@ const secondaryBtnStyle: React.CSSProperties = {
   borderRadius: '0.375rem',
   border: '1px solid rgba(0,0,0,0.1)',
   background: 'rgba(248,248,246,0.8)',
-  color: '#374151',
+  color: '#444444',
   fontSize: '0.8rem',
   cursor: 'pointer',
 };

src/app/api/create-payment-intent/route.ts

@@ -6,7 +6,7 @@ if (!process.env.STRIPE_SECRET_KEY) {
 }
 
 const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || '', {
-  apiVersion: '2026-03-25.dahlia',
+  apiVersion: '2026-03-25.dahlia' as any,
 });
 
 export async function POST(request: Request) {

src/app/book-demo/page.tsx

@@ -21,7 +21,7 @@ export default function BookDemoPage() {
             <h1 style={{ margin: 0, fontSize: 'clamp(2rem, 5vw, 3.2rem)', fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
               <span className="text-gradient" style={{ fontWeight: 500 }}>See the future in person.</span>
             </h1>
-            <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
+            <p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
               Book a live robot demo at our Dubai showroom or schedule an on-site demo at your venue. Our team will tailor the demo to your use case before you arrive.
             </p>
 
@@ -32,8 +32,8 @@ export default function BookDemoPage() {
                 'Walk through configuration and deployment options',
                 'Get UAE-specific pricing and availability',
               ].map((b) => (
-                <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.625rem', color: '#DEE0F0', lineHeight: 1.55 }}>
+                <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.625rem', color: '#e7e7e7', lineHeight: 1.55 }}>
-                  <span style={{ width: 8, height: 8, marginTop: 8, borderRadius: 999, background: '#DEE0F0', flex: 'none' }} />
+                  <span style={{ width: 8, height: 8, marginTop: 8, borderRadius: 999, background: '#e7e7e7', flex: 'none' }} />
                   {b}
                 </li>
               ))}

src/app/brands/page.tsx

@@ -28,10 +28,10 @@ export default function BrandsPage() {
                 Selected Unitree and Pudu solutions in the UAE.
               </span>
             </h1>
-            <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
+            <p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
               YS Lootah Robotics holds UAE sales rights for selected Unitree and Pudu Robotics solutions with on-the-ground sales, demo, and deployment support across Dubai and the UAE.
             </p>
-            <p style={{ margin: 0, color: '#6a73a5', fontSize: '0.82rem', lineHeight: 1.6 }}>
+            <p style={{ margin: 0, color: '#888888', fontSize: '0.82rem', lineHeight: 1.6 }}>
               Brand names and product trademarks are property of their respective owners. Available in the UAE through YS Lootah Robotics.
             </p>
           </div>
@@ -57,7 +57,7 @@ export default function BrandsPage() {
                       {robots.length} model{robots.length === 1 ? '' : 's'}
                     </span>
                   </div>
-                  <p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, maxWidth: 800, marginBottom: '1.5rem' }}>
+                  <p style={{ margin: 0, color: '#e7e7e7', lineHeight: 1.7, maxWidth: 800, marginBottom: '1.5rem' }}>
                     {brand.description}
                   </p>
                   <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.625rem', marginBottom: '2rem' }}>

src/app/bu-sunaidah/page.tsx

@@ -63,7 +63,7 @@ const PILLARS = [
   },
 ];
 
-const ACCENT = '#3a55c4';
+const ACCENT = '#7f7f7f';
 
 function formatDate(iso: string): string {
   try {
@@ -382,12 +382,12 @@ export default async function BuSunaidahPage() {
         .bs-crumbs ol {
           list-style: none; margin: 0; padding: 0;
           display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
-          font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8891C7;
+          font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: #a8a8a8;
         }
-        .bs-crumbs a { color: #8891C7; text-decoration: none; transition: color 0.25s; }
+        .bs-crumbs a { color: #a8a8a8; text-decoration: none; transition: color 0.25s; }
         .bs-crumbs a:hover { color: #FFFFFF; }
         .bs-crumbs li[aria-current="page"] { color: #FFFFFF; }
-        .bs-crumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #4a4f63; }
+        .bs-crumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #575757; }
 
         /* BLOCKS */
         .bs-block { display: flex; flex-direction: column; gap: clamp(1.2rem, 2.2vw, 1.75rem); }
@@ -412,29 +412,29 @@ export default async function BuSunaidahPage() {
           display: flex; flex-direction: column; gap: 0.6rem;
           padding: 1.2rem 1.2rem 1.25rem;
           border-radius: 18px;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
           background:
             radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
-            linear-gradient(180deg, rgba(22, 21, 30, 0.9), rgba(10, 10, 14, 0.96));
+            linear-gradient(180deg, rgba(26, 26, 26, 0.9), rgba(12, 12, 12, 0.96));
           transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
         }
         .bs-pillar:hover {
           transform: translateY(-3px);
-          border-color: rgba(74, 102, 216, 0.42);
+          border-color: rgba(145, 145, 145, 0.42);
-          box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(58, 85, 196, 0.18);
+          box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(127, 127, 127, 0.18);
         }
         .bs-pillar-icon {
           display: inline-flex; align-items: center; justify-content: center;
           width: 40px; height: 40px; border-radius: 12px;
           color: color-mix(in srgb, var(--acc) 82%, white);
           border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
-          background: color-mix(in srgb, var(--acc) 12%, rgba(14, 13, 18, 0.6));
+          background: color-mix(in srgb, var(--acc) 12%, rgba(16, 16, 16, 0.6));
         }
         .bs-pillar h3 {
           margin: 0; font-size: 1.02rem; font-weight: 600;
           color: #FFFFFF; letter-spacing: -0.005em;
         }
-        .bs-pillar p { margin: 0; color: #C9CCDE; font-size: 0.88rem; line-height: 1.55; }
+        .bs-pillar p { margin: 0; color: #d4d4d4; font-size: 0.88rem; line-height: 1.55; }
 
         /* REEL */
         .bs-reel {
@@ -444,18 +444,18 @@ export default async function BuSunaidahPage() {
           border-radius: 22px;
           overflow: hidden;
           isolation: isolate;
-          border: 1px solid rgba(74, 102, 216, 0.28);
+          border: 1px solid rgba(145, 145, 145, 0.28);
           background:
-            radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.22), transparent 55%),
+            radial-gradient(ellipse 70% 100% at 0% 0%, rgba(127, 127, 127, 0.22), transparent 55%),
-            radial-gradient(ellipse 60% 80% at 100% 100%, rgba(136, 145, 199, 0.16), transparent 60%),
+            radial-gradient(ellipse 60% 80% at 100% 100%, rgba(168, 168, 168, 0.16), transparent 60%),
-            linear-gradient(180deg, #0a0a0e 0%, #050508 100%);
+            linear-gradient(180deg, #0c0c0c 0%, #070707 100%);
           box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
         }
         .bs-reel-glow {
           position: absolute;
           inset: -20% -10% auto auto;
           width: 60%; height: 80%;
-          background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(58, 85, 196, 0.5), transparent 70%);
+          background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(127, 127, 127, 0.5), transparent 70%);
           filter: blur(40px);
           pointer-events: none;
           z-index: 0;
@@ -466,23 +466,23 @@ export default async function BuSunaidahPage() {
           z-index: 3;
           pointer-events: none;
         }
-        .bs-corner-tl { top: 8px; left: 8px; border-top: 1px solid rgba(222, 224, 240, 0.32); border-left: 1px solid rgba(222, 224, 240, 0.32); }
+        .bs-corner-tl { top: 8px; left: 8px; border-top: 1px solid rgba(231, 231, 231, 0.32); border-left: 1px solid rgba(231, 231, 231, 0.32); }
-        .bs-corner-tr { top: 8px; right: 8px; border-top: 1px solid rgba(222, 224, 240, 0.32); border-right: 1px solid rgba(222, 224, 240, 0.32); }
+        .bs-corner-tr { top: 8px; right: 8px; border-top: 1px solid rgba(231, 231, 231, 0.32); border-right: 1px solid rgba(231, 231, 231, 0.32); }
-        .bs-corner-bl { bottom: 8px; left: 8px; border-bottom: 1px solid rgba(222, 224, 240, 0.32); border-left: 1px solid rgba(222, 224, 240, 0.32); }
+        .bs-corner-bl { bottom: 8px; left: 8px; border-bottom: 1px solid rgba(231, 231, 231, 0.32); border-left: 1px solid rgba(231, 231, 231, 0.32); }
-        .bs-corner-br { bottom: 8px; right: 8px; border-bottom: 1px solid rgba(222, 224, 240, 0.32); border-right: 1px solid rgba(222, 224, 240, 0.32); }
+        .bs-corner-br { bottom: 8px; right: 8px; border-bottom: 1px solid rgba(231, 231, 231, 0.32); border-right: 1px solid rgba(231, 231, 231, 0.32); }
         .bs-reel-media {
           position: absolute;
           inset: 0;
           width: 100%; height: 100%;
           border: 0;
-          background: #050508;
+          background: #070707;
           z-index: 1;
         }
         .bs-reel-placeholder { position: absolute; inset: 0; z-index: 1; }
         .bs-reel-overlay {
           position: absolute;
           inset: 0;
-          background: linear-gradient(180deg, rgba(8, 8, 12, 0.0) 35%, rgba(8, 8, 12, 0.85) 100%);
+          background: linear-gradient(180deg, rgba(10, 10, 10, 0.0) 35%, rgba(10, 10, 10, 0.85) 100%);
           pointer-events: none;
           z-index: 2;
         }
@@ -502,10 +502,10 @@ export default async function BuSunaidahPage() {
           border-radius: 999px;
           background:
             radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.32), transparent 60%),
-            linear-gradient(135deg, #5a76e8, #273F94);
+            linear-gradient(135deg, #a1a1a1, #5e5e5e);
           color: #FFFFFF;
           border: 1px solid rgba(255, 255, 255, 0.22);
-          box-shadow: 0 18px 32px rgba(58, 85, 196, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
+          box-shadow: 0 18px 32px rgba(127, 127, 127, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
           flex: none;
         }
         .bs-reel-eyebrow {
@@ -514,7 +514,7 @@ export default async function BuSunaidahPage() {
           letter-spacing: 0.28em;
           text-transform: uppercase;
           font-weight: 800;
-          color: #DEE0F0;
+          color: #e7e7e7;
           margin-bottom: 0.2rem;
         }
         .bs-reel-caption {
@@ -540,11 +540,11 @@ export default async function BuSunaidahPage() {
           min-height: 76px;
           padding: 0.9rem 1rem;
           border-radius: 14px;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
-          background: linear-gradient(135deg, rgba(20, 19, 26, 0.78), rgba(10, 10, 14, 0.94));
+          background: linear-gradient(135deg, rgba(23, 23, 23, 0.78), rgba(12, 12, 12, 0.94));
           transition: border-color 0.3s, transform 0.3s;
         }
-        .bs-press-cell:hover { border-color: rgba(74, 102, 216, 0.35); transform: translateY(-2px); }
+        .bs-press-cell:hover { border-color: rgba(145, 145, 145, 0.35); transform: translateY(-2px); }
         .bs-press-cell a {
           display: inline-flex; align-items: center; justify-content: center;
           text-decoration: none;
@@ -561,7 +561,7 @@ export default async function BuSunaidahPage() {
           letter-spacing: 0.16em;
           text-transform: uppercase;
           font-weight: 700;
-          color: #C9CCDE;
+          color: #d4d4d4;
         }
 
         .bs-press-quotes {
@@ -575,39 +575,39 @@ export default async function BuSunaidahPage() {
           display: flex; flex-direction: column; gap: 0.65rem;
           padding: 1.15rem 1.2rem 1.15rem;
           border-radius: 18px;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
           background:
             radial-gradient(ellipse 75% 50% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%),
-            linear-gradient(180deg, rgba(22, 21, 30, 0.9), rgba(10, 10, 14, 0.96));
+            linear-gradient(180deg, rgba(26, 26, 26, 0.9), rgba(12, 12, 12, 0.96));
         }
         .bs-press-quote-mark {
           display: inline-flex; align-items: center; justify-content: center;
           width: 30px; height: 30px;
           border-radius: 999px;
           color: color-mix(in srgb, var(--acc) 82%, white);
-          background: color-mix(in srgb, var(--acc) 14%, rgba(14, 13, 18, 0.6));
+          background: color-mix(in srgb, var(--acc) 14%, rgba(16, 16, 16, 0.6));
           border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent);
         }
-        .bs-press-quote p { margin: 0; color: #ECEEF6; font-size: 0.97rem; line-height: 1.65; }
+        .bs-press-quote p { margin: 0; color: #f1f1f1; font-size: 0.97rem; line-height: 1.65; }
         .bs-press-quote footer {
-          color: #8891C7;
+          color: #a8a8a8;
           font-size: 0.7rem;
           letter-spacing: 0.18em;
           text-transform: uppercase;
           font-weight: 700;
         }
-        .bs-press-quote footer a { color: #8891C7; text-decoration: none; }
+        .bs-press-quote footer a { color: #a8a8a8; text-decoration: none; }
         .bs-press-quote footer a:hover { color: #FFFFFF; }
-        .bs-press-date { color: #5a627e; }
+        .bs-press-date { color: #6c6c6c; }
 
         /* INSTAGRAM LINK */
         .bs-ig-link {
           display: inline-flex; align-items: center; gap: 0.5rem;
           padding: 0.55rem 0.85rem;
           border-radius: 999px;
-          border: 1px solid rgba(222, 224, 240, 0.22);
+          border: 1px solid rgba(231, 231, 231, 0.22);
-          background: rgba(14, 13, 18, 0.55);
+          background: rgba(16, 16, 16, 0.55);
-          color: #DEE0F0;
+          color: #e7e7e7;
           font-size: 0.72rem;
           font-weight: 700;
           letter-spacing: 0.18em;
@@ -617,9 +617,9 @@ export default async function BuSunaidahPage() {
           transition: border-color 0.25s, color 0.25s, background 0.25s;
         }
         .bs-ig-link:hover {
-          border-color: rgba(222, 224, 240, 0.55);
+          border-color: rgba(231, 231, 231, 0.55);
           color: #FFFFFF;
-          background: rgba(58, 85, 196, 0.18);
+          background: rgba(127, 127, 127, 0.18);
         }
 
         /* INSTAGRAM EMBED GRID */
@@ -633,8 +633,8 @@ export default async function BuSunaidahPage() {
           position: relative;
           border-radius: 18px;
           overflow: hidden;
-          border: 1px solid rgba(222, 224, 240, 0.12);
+          border: 1px solid rgba(231, 231, 231, 0.12);
-          background: rgba(14, 13, 18, 0.6);
+          background: rgba(16, 16, 16, 0.6);
           box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
           height: 720px;
           width: 100%;
@@ -652,7 +652,7 @@ export default async function BuSunaidahPage() {
           height: calc(100% + 54px);
           display: block;
           border: 0;
-          background: #0a0a0e;
+          background: #0c0c0c;
         }
 
         /* INSTAGRAM FALLBACK CARD */
@@ -661,11 +661,11 @@ export default async function BuSunaidahPage() {
           display: block;
           overflow: hidden;
           border-radius: 22px;
-          border: 1px solid rgba(74, 102, 216, 0.28);
+          border: 1px solid rgba(145, 145, 145, 0.28);
           background:
-            radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.22), transparent 55%),
+            radial-gradient(ellipse 70% 100% at 0% 0%, rgba(127, 127, 127, 0.22), transparent 55%),
-            radial-gradient(ellipse 60% 80% at 100% 100%, rgba(136, 145, 199, 0.16), transparent 60%),
+            radial-gradient(ellipse 60% 80% at 100% 100%, rgba(168, 168, 168, 0.16), transparent 60%),
-            linear-gradient(135deg, rgba(14, 13, 22, 0.95), rgba(6, 6, 10, 0.97));
+            linear-gradient(135deg, rgba(18, 18, 18, 0.95), rgba(8, 8, 8, 0.97));
           text-decoration: none;
           color: inherit;
           box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
@@ -673,22 +673,22 @@ export default async function BuSunaidahPage() {
         }
         .bs-ig-fallback:hover {
           transform: translateY(-3px);
-          border-color: rgba(74, 102, 216, 0.55);
+          border-color: rgba(145, 145, 145, 0.55);
-          box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 32px rgba(58, 85, 196, 0.28);
+          box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 32px rgba(127, 127, 127, 0.28);
         }
         .bs-ig-fallback-glow {
           position: absolute;
           width: 440px; height: 440px; border-radius: 999px;
           top: -180px; left: -160px;
-          background: radial-gradient(circle, rgba(74, 102, 216, 0.4), transparent 70%);
+          background: radial-gradient(circle, rgba(145, 145, 145, 0.4), transparent 70%);
           filter: blur(100px);
           pointer-events: none;
         }
         .bs-ig-fallback-grid {
           position: absolute; inset: 0;
           background:
-            linear-gradient(rgba(74, 102, 216, 0.05) 1px, transparent 1px),
+            linear-gradient(rgba(145, 145, 145, 0.05) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(74, 102, 216, 0.05) 1px, transparent 1px);
+            linear-gradient(90deg, rgba(145, 145, 145, 0.05) 1px, transparent 1px);
           background-size: 56px 56px;
           mask-image: radial-gradient(ellipse 60% 80% at 70% 50%, #000 25%, transparent 80%);
           -webkit-mask-image: radial-gradient(ellipse 60% 80% at 70% 50%, #000 25%, transparent 80%);
@@ -706,11 +706,11 @@ export default async function BuSunaidahPage() {
           display: inline-flex; align-items: center; justify-content: center;
           width: 54px; height: 54px; border-radius: 16px;
           color: #FFFFFF;
-          border: 1px solid rgba(222, 224, 240, 0.25);
+          border: 1px solid rgba(231, 231, 231, 0.25);
           background:
             radial-gradient(ellipse 60% 60% at 30% 30%, rgba(255, 84, 165, 0.55), transparent 60%),
             radial-gradient(ellipse 60% 60% at 70% 70%, rgba(255, 165, 84, 0.45), transparent 60%),
-            linear-gradient(135deg, rgba(58, 85, 196, 0.6), rgba(20, 20, 28, 0.85));
+            linear-gradient(135deg, rgba(127, 127, 127, 0.6), rgba(24, 24, 24, 0.85));
           box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
         }
         .bs-ig-fallback-handle {
@@ -718,7 +718,7 @@ export default async function BuSunaidahPage() {
           font-size: 0.7rem;
           letter-spacing: 0.24em;
           text-transform: uppercase;
-          color: #8891C7;
+          color: #a8a8a8;
           font-weight: 700;
           margin-bottom: 0.2rem;
         }
@@ -732,23 +732,23 @@ export default async function BuSunaidahPage() {
         .bs-cta {
           position: relative; overflow: hidden;
           border-radius: 26px;
-          border: 1px solid rgba(74, 102, 216, 0.26);
+          border: 1px solid rgba(145, 145, 145, 0.26);
           background:
-            radial-gradient(ellipse 60% 100% at 100% 0%, rgba(58, 85, 196, 0.22), transparent 60%),
+            radial-gradient(ellipse 60% 100% at 100% 0%, rgba(127, 127, 127, 0.22), transparent 60%),
-            linear-gradient(135deg, rgba(18, 16, 28, 0.95), rgba(8, 8, 12, 0.97));
+            linear-gradient(135deg, rgba(22, 22, 22, 0.95), rgba(10, 10, 10, 0.97));
           box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
         }
         .bs-cta-glow {
           position: absolute; width: 480px; height: 480px; border-radius: 999px;
           top: -160px; left: -160px;
-          background: radial-gradient(circle, rgba(74, 102, 216, 0.45), transparent 70%);
+          background: radial-gradient(circle, rgba(145, 145, 145, 0.45), transparent 70%);
           filter: blur(100px); opacity: 0.55; pointer-events: none;
         }
         .bs-cta-grid {
           position: absolute; inset: 0;
           background:
-            linear-gradient(rgba(74, 102, 216, 0.05) 1px, transparent 1px),
+            linear-gradient(rgba(145, 145, 145, 0.05) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(74, 102, 216, 0.05) 1px, transparent 1px);
+            linear-gradient(90deg, rgba(145, 145, 145, 0.05) 1px, transparent 1px);
           background-size: 56px 56px;
           mask-image: radial-gradient(ellipse 60% 90% at 70% 50%, #000 25%, transparent 80%);
           -webkit-mask-image: radial-gradient(ellipse 60% 90% at 70% 50%, #000 25%, transparent 80%);
@@ -770,7 +770,7 @@ export default async function BuSunaidahPage() {
           font-size: clamp(1.65rem, 3vw, 2.25rem);
           font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.1;
         }
-        .bs-cta-text p { margin: 0; color: #DEE0F0; font-size: 0.95rem; line-height: 1.65; }
+        .bs-cta-text p { margin: 0; color: #e7e7e7; font-size: 0.95rem; line-height: 1.65; }
         .bs-cta-actions {
           display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-start;
         }

src/app/configure/page.tsx

@@ -285,29 +285,29 @@ export default function ConfigurePage() {
         .cfg-hero {
           position: relative;
           overflow: hidden;
-          border-bottom: 1px solid rgba(74, 102, 216, 0.16);
+          border-bottom: 1px solid rgba(145, 145, 145, 0.16);
           background:
-            radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.18), transparent 55%),
+            radial-gradient(ellipse 70% 100% at 0% 0%, rgba(127, 127, 127, 0.18), transparent 55%),
-            radial-gradient(ellipse 60% 80% at 100% 100%, rgba(136, 145, 199, 0.14), transparent 60%),
+            radial-gradient(ellipse 60% 80% at 100% 100%, rgba(168, 168, 168, 0.14), transparent 60%),
-            linear-gradient(135deg, rgba(14, 13, 22, 0.95), rgba(6, 6, 10, 0.97));
+            linear-gradient(135deg, rgba(18, 18, 18, 0.95), rgba(8, 8, 8, 0.97));
         }
         .cfg-hero-glow {
           position: absolute; width: 580px; height: 580px; border-radius: 999px;
           top: -220px; right: -180px;
-          background: radial-gradient(circle, rgba(120, 140, 255, 0.34), transparent 70%);
+          background: radial-gradient(circle, rgba(188, 188, 188, 0.34), transparent 70%);
           filter: blur(120px); opacity: 0.55; pointer-events: none;
         }
         .cfg-hero-glow-b {
           position: absolute; width: 460px; height: 460px; border-radius: 999px;
           bottom: -200px; left: -150px;
-          background: radial-gradient(circle, rgba(74, 102, 216, 0.32), transparent 70%);
+          background: radial-gradient(circle, rgba(145, 145, 145, 0.32), transparent 70%);
           filter: blur(110px); opacity: 0.45; pointer-events: none;
         }
         .cfg-hero-grid {
           position: absolute; inset: 0;
           background:
-            linear-gradient(rgba(74, 102, 216, 0.05) 1px, transparent 1px),
+            linear-gradient(rgba(145, 145, 145, 0.05) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(74, 102, 216, 0.05) 1px, transparent 1px);
+            linear-gradient(90deg, rgba(145, 145, 145, 0.05) 1px, transparent 1px);
           background-size: 56px 56px;
           mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 25%, transparent 80%);
           -webkit-mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 25%, transparent 80%);
@@ -328,8 +328,8 @@ export default function ConfigurePage() {
           width: fit-content;
         }
         .cfg-dot {
-          width: 7px; height: 7px; border-radius: 999px; background: #DEE0F0;
+          width: 7px; height: 7px; border-radius: 999px; background: #e7e7e7;
-          box-shadow: 0 0 14px rgba(222, 224, 240, 0.85);
+          box-shadow: 0 0 14px rgba(231, 231, 231, 0.85);
         }
         .cfg-hero-title {
           margin: 0;
@@ -342,7 +342,7 @@ export default function ConfigurePage() {
         .cfg-hero-title :global(.text-gradient) { font-weight: 500; }
         .cfg-hero-sub {
           margin: 0;
-          color: #DEE0F0;
+          color: #e7e7e7;
           font-size: clamp(0.95rem, 1.8vw, 1.1rem);
           line-height: 1.65;
           max-width: 560px;
@@ -353,9 +353,9 @@ export default function ConfigurePage() {
         }
         .cfg-hero-checks li {
           display: inline-flex; align-items: center; gap: 0.55rem;
-          color: #DEE0F0; font-size: 0.92rem; line-height: 1.5;
+          color: #e7e7e7; font-size: 0.92rem; line-height: 1.5;
         }
-        .cfg-hero-checks li :global(svg) { color: #7FD6D0; flex: none; }
+        .cfg-hero-checks li :global(svg) { color: #ababab; flex: none; }
         .cfg-hero-actions {
           display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.65rem;
         }
@@ -371,9 +371,9 @@ export default function ConfigurePage() {
           display: flex; flex-direction: column; gap: 0.3rem;
           padding: 0.95rem 1rem;
           border-radius: 16px;
-          border: 1px solid rgba(120, 140, 255, 0.22);
+          border: 1px solid rgba(188, 188, 188, 0.22);
           background:
-            linear-gradient(135deg, rgba(80, 110, 255, 0.12), rgba(255, 255, 255, 0.03));
+            linear-gradient(135deg, rgba(168, 168, 168, 0.12), rgba(255, 255, 255, 0.03));
           overflow: hidden;
           min-height: 86px;
           transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
@@ -381,22 +381,22 @@ export default function ConfigurePage() {
         .cfg-stat::before {
           content: ''; position: absolute;
           top: 0; right: 14px; width: 24px; height: 1px;
-          background: linear-gradient(90deg, transparent, rgba(180, 195, 255, 0.55));
+          background: linear-gradient(90deg, transparent, rgba(218, 218, 218, 0.55));
         }
         .cfg-stat:hover {
-          border-color: rgba(120, 140, 255, 0.45);
+          border-color: rgba(188, 188, 188, 0.45);
           transform: translateY(-1px);
-          box-shadow: 0 10px 22px rgba(0, 0, 0, 0.38), 0 0 18px rgba(74, 102, 216, 0.18);
+          box-shadow: 0 10px 22px rgba(0, 0, 0, 0.38), 0 0 18px rgba(145, 145, 145, 0.18);
         }
         .cfg-stat-value {
           font-size: clamp(1.4rem, 2.4vw, 1.85rem);
           font-weight: 500; letter-spacing: -0.025em; line-height: 1;
-          background: linear-gradient(180deg, #FFFFFF, #B5BDDB);
+          background: linear-gradient(180deg, #FFFFFF, #c8c8c8);
           -webkit-background-clip: text; background-clip: text; color: transparent;
         }
         .cfg-stat-label {
           font-size: 0.64rem; letter-spacing: 0.22em;
-          text-transform: uppercase; font-weight: 700; color: #A6B2D8;
+          text-transform: uppercase; font-weight: 700; color: #bfbfbf;
         }
 
         @media (min-width: 920px) {
@@ -417,31 +417,31 @@ export default function ConfigurePage() {
           display: flex; flex-direction: column; gap: 0.6rem;
           padding: 1.2rem 1.2rem 1.3rem;
           border-radius: 18px;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
           background:
-            radial-gradient(ellipse 80% 60% at 100% 0%, rgba(74, 102, 216, 0.14), transparent 60%),
+            radial-gradient(ellipse 80% 60% at 100% 0%, rgba(145, 145, 145, 0.14), transparent 60%),
-            linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96));
+            linear-gradient(180deg, rgba(26, 26, 26, 0.92), rgba(12, 12, 12, 0.96));
           transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
         }
         .cfg-step:hover {
-          border-color: rgba(74, 102, 216, 0.42);
+          border-color: rgba(145, 145, 145, 0.42);
           transform: translateY(-3px);
-          box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 22px rgba(58, 85, 196, 0.18);
+          box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 22px rgba(127, 127, 127, 0.18);
         }
         .cfg-step-num {
           position: absolute; top: 0.85rem; right: 1rem;
           font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-          font-size: 0.7rem; letter-spacing: 0.22em; font-weight: 800; color: #8891C7;
+          font-size: 0.7rem; letter-spacing: 0.22em; font-weight: 800; color: #a8a8a8;
         }
         .cfg-step-icon {
           display: inline-flex; align-items: center; justify-content: center;
           width: 40px; height: 40px; border-radius: 12px;
-          color: #DEE0F0;
+          color: #e7e7e7;
-          background: rgba(74, 102, 216, 0.16);
+          background: rgba(145, 145, 145, 0.16);
-          border: 1px solid rgba(74, 102, 216, 0.38);
+          border: 1px solid rgba(145, 145, 145, 0.38);
         }
         .cfg-step h3 { margin: 0; font-size: 1.02rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.005em; }
-        .cfg-step p { margin: 0; color: #C9CCDE; font-size: 0.9rem; line-height: 1.6; }
+        .cfg-step p { margin: 0; color: #d4d4d4; font-size: 0.9rem; line-height: 1.6; }
 
         /* CONFIGURATOR FRAME */
         .cfg-frame { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vw, 1.75rem); scroll-margin-top: clamp(80px, 12vh, 120px); }
@@ -457,40 +457,40 @@ export default function ConfigurePage() {
           display: inline-flex; align-items: center; gap: 0.45rem;
           font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
           text-transform: uppercase;
-          color: #DEE0F0;
+          color: #e7e7e7;
           text-decoration: none;
           padding: 0.6rem 0.95rem;
           border-radius: 999px;
-          border: 1px solid rgba(222, 224, 240, 0.18);
+          border: 1px solid rgba(231, 231, 231, 0.18);
-          background: rgba(20, 19, 26, 0.7);
+          background: rgba(23, 23, 23, 0.7);
           transition: color 0.3s, border-color 0.3s, gap 0.3s;
         }
-        .cfg-frame-spec:hover { color: #FFFFFF; border-color: rgba(74, 102, 216, 0.5); gap: 0.65rem; }
+        .cfg-frame-spec:hover { color: #FFFFFF; border-color: rgba(145, 145, 145, 0.5); gap: 0.65rem; }
         .cfg-frame-shell {
           border-radius: 24px;
           overflow: hidden;
-          border: 1px solid rgba(74, 102, 216, 0.22);
+          border: 1px solid rgba(145, 145, 145, 0.22);
           box-shadow:
             0 30px 80px rgba(0, 0, 0, 0.55),
             inset 0 1px 0 rgba(255, 255, 255, 0.04),
-            0 0 28px rgba(58, 85, 196, 0.18);
+            0 0 28px rgba(127, 127, 127, 0.18);
-          background: linear-gradient(180deg, rgba(10, 10, 14, 0.95), rgba(6, 6, 10, 0.98));
+          background: linear-gradient(180deg, rgba(12, 12, 12, 0.95), rgba(8, 8, 8, 0.98));
         }
         .cfg-frame-bar {
           display: flex; align-items: center; justify-content: space-between;
           padding: 0.7rem 1rem;
-          border-bottom: 1px solid rgba(74, 102, 216, 0.18);
+          border-bottom: 1px solid rgba(145, 145, 145, 0.18);
-          background: linear-gradient(180deg, rgba(14, 13, 22, 0.95), rgba(8, 8, 12, 0.97));
+          background: linear-gradient(180deg, rgba(18, 18, 18, 0.95), rgba(10, 10, 10, 0.97));
         }
         .cfg-mono {
           font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-          font-size: 0.62rem; letter-spacing: 0.28em; font-weight: 800; color: #DEE0F0;
+          font-size: 0.62rem; letter-spacing: 0.28em; font-weight: 800; color: #e7e7e7;
           display: inline-flex; align-items: center; gap: 0.45rem;
         }
-        .cfg-mono-mute { color: #8891C7; }
+        .cfg-mono-mute { color: #a8a8a8; }
         .cfg-live-dot {
-          width: 7px; height: 7px; border-radius: 999px; background: #7FD6D0;
+          width: 7px; height: 7px; border-radius: 999px; background: #ababab;
-          box-shadow: 0 0 10px rgba(127, 214, 208, 0.7);
+          box-shadow: 0 0 10px rgba(171, 171, 171, 0.7);
         }
 
         /* POST CONFIG */
@@ -503,26 +503,26 @@ export default function ConfigurePage() {
           display: flex; flex-direction: column; gap: 0.55rem;
           padding: 1.2rem 1.2rem 1.25rem;
           border-radius: 18px;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
           background:
-            radial-gradient(ellipse 80% 60% at 100% 0%, rgba(127, 214, 208, 0.10), transparent 60%),
+            radial-gradient(ellipse 80% 60% at 100% 0%, rgba(171, 171, 171, 0.10), transparent 60%),
-            linear-gradient(180deg, rgba(22, 21, 30, 0.9), rgba(10, 10, 14, 0.96));
+            linear-gradient(180deg, rgba(26, 26, 26, 0.9), rgba(12, 12, 12, 0.96));
           transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
         }
         .cfg-post-card:hover {
-          border-color: rgba(127, 214, 208, 0.38);
+          border-color: rgba(171, 171, 171, 0.38);
           transform: translateY(-3px);
-          box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(127, 214, 208, 0.14);
+          box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(171, 171, 171, 0.14);
         }
         .cfg-post-icon {
           display: inline-flex; align-items: center; justify-content: center;
           width: 36px; height: 36px; border-radius: 10px;
-          color: #7FD6D0;
+          color: #ababab;
-          background: rgba(127, 214, 208, 0.16);
+          background: rgba(171, 171, 171, 0.16);
-          border: 1px solid rgba(127, 214, 208, 0.38);
+          border: 1px solid rgba(171, 171, 171, 0.38);
         }
         .cfg-post-card h3 { margin: 0; font-size: 1rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.005em; }
-        .cfg-post-card p { margin: 0; color: #C9CCDE; font-size: 0.88rem; line-height: 1.55; }
+        .cfg-post-card p { margin: 0; color: #d4d4d4; font-size: 0.88rem; line-height: 1.55; }
 
         /* PILLARS */
         .cfg-pillars-grid {
@@ -536,21 +536,21 @@ export default function ConfigurePage() {
           display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.7rem;
           padding: 0.95rem 1.05rem;
           border-radius: 16px;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
           background:
-            radial-gradient(ellipse 80% 60% at 100% 0%, rgba(74, 102, 216, 0.12), transparent 60%),
+            radial-gradient(ellipse 80% 60% at 100% 0%, rgba(145, 145, 145, 0.12), transparent 60%),
-            linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96));
+            linear-gradient(180deg, rgba(26, 26, 26, 0.92), rgba(12, 12, 12, 0.96));
           transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
         }
         .cfg-pillars-grid li:hover {
-          border-color: rgba(74, 102, 216, 0.42);
+          border-color: rgba(145, 145, 145, 0.42);
           transform: translateY(-2px);
-          box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 18px rgba(58, 85, 196, 0.16);
+          box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 18px rgba(127, 127, 127, 0.16);
         }
         .cfg-pillars-grid li :global(svg) {
-          color: #DEE0F0;
+          color: #e7e7e7;
-          background: rgba(74, 102, 216, 0.16);
+          background: rgba(145, 145, 145, 0.16);
-          border: 1px solid rgba(74, 102, 216, 0.38);
+          border: 1px solid rgba(145, 145, 145, 0.38);
           border-radius: 10px;
           padding: 8px;
           width: 32px; height: 32px;
@@ -558,7 +558,7 @@ export default function ConfigurePage() {
         }
         .cfg-pillars-grid li div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
         .cfg-pillars-grid li span { color: #FFFFFF; font-size: 0.82rem; font-weight: 600; letter-spacing: -0.005em; }
-        .cfg-pillars-grid li small { color: #8891C7; font-size: 0.7rem; }
+        .cfg-pillars-grid li small { color: #a8a8a8; font-size: 0.7rem; }
 
         /* FAQ */
         .cfg-faq { display: flex; flex-direction: column; gap: clamp(1rem, 2.5vw, 1.5rem); }
@@ -570,11 +570,11 @@ export default function ConfigurePage() {
           position: relative;
           padding: 1rem 1.15rem;
           border-radius: 14px;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
-          background: linear-gradient(135deg, rgba(20, 19, 26, 0.85), rgba(10, 10, 14, 0.94));
+          background: linear-gradient(135deg, rgba(23, 23, 23, 0.85), rgba(12, 12, 12, 0.94));
           transition: border-color 0.3s;
         }
-        .cfg-faq-item[open] { border-color: rgba(74, 102, 216, 0.42); }
+        .cfg-faq-item[open] { border-color: rgba(145, 145, 145, 0.42); }
         .cfg-faq-item summary {
           display: flex; align-items: center; justify-content: space-between; gap: 1rem;
           cursor: pointer; list-style: none;
@@ -586,16 +586,16 @@ export default function ConfigurePage() {
           display: inline-flex; align-items: center; justify-content: center;
           width: 26px; height: 26px;
           border-radius: 999px;
-          border: 1px solid rgba(222, 224, 240, 0.18);
+          border: 1px solid rgba(231, 231, 231, 0.18);
-          color: #DEE0F0;
+          color: #e7e7e7;
           font-size: 0.95rem;
           transition: transform 0.3s, background 0.3s;
           flex: none;
         }
-        .cfg-faq-item[open] .cfg-faq-icon { transform: rotate(45deg); background: rgba(74, 102, 216, 0.2); }
+        .cfg-faq-item[open] .cfg-faq-icon { transform: rotate(45deg); background: rgba(145, 145, 145, 0.2); }
         .cfg-faq-item p {
           margin: 0.75rem 0 0;
-          color: #C9CCDE;
+          color: #d4d4d4;
           font-size: 0.9rem;
           line-height: 1.65;
         }
@@ -605,23 +605,23 @@ export default function ConfigurePage() {
           position: relative;
           overflow: hidden;
           border-radius: 26px;
-          border: 1px solid rgba(74, 102, 216, 0.26);
+          border: 1px solid rgba(145, 145, 145, 0.26);
           background:
-            radial-gradient(ellipse 60% 100% at 100% 0%, rgba(58, 85, 196, 0.22), transparent 60%),
+            radial-gradient(ellipse 60% 100% at 100% 0%, rgba(127, 127, 127, 0.22), transparent 60%),
-            linear-gradient(135deg, rgba(18, 16, 28, 0.95), rgba(8, 8, 12, 0.97));
+            linear-gradient(135deg, rgba(22, 22, 22, 0.95), rgba(10, 10, 10, 0.97));
           box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
         }
         .cfg-cta-glow {
           position: absolute; width: 480px; height: 480px; border-radius: 999px;
           top: -160px; left: -160px;
-          background: radial-gradient(circle, rgba(74, 102, 216, 0.45), transparent 70%);
+          background: radial-gradient(circle, rgba(145, 145, 145, 0.45), transparent 70%);
           filter: blur(100px); opacity: 0.55; pointer-events: none;
         }
         .cfg-cta-grid-bg {
           position: absolute; inset: 0;
           background:
-            linear-gradient(rgba(74, 102, 216, 0.05) 1px, transparent 1px),
+            linear-gradient(rgba(145, 145, 145, 0.05) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(74, 102, 216, 0.05) 1px, transparent 1px);
+            linear-gradient(90deg, rgba(145, 145, 145, 0.05) 1px, transparent 1px);
           background-size: 56px 56px;
           mask-image: radial-gradient(ellipse 60% 90% at 70% 50%, #000 25%, transparent 80%);
           -webkit-mask-image: radial-gradient(ellipse 60% 90% at 70% 50%, #000 25%, transparent 80%);
@@ -645,7 +645,7 @@ export default function ConfigurePage() {
           font-size: clamp(1.65rem, 3vw, 2.25rem);
           font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.1;
         }
-        .cfg-cta-text p { margin: 0; color: #DEE0F0; font-size: 0.95rem; line-height: 1.65; }
+        .cfg-cta-text p { margin: 0; color: #e7e7e7; font-size: 0.95rem; line-height: 1.65; }
         .cfg-cta-actions {
           display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-start;
         }

src/app/contact/page.tsx

@@ -21,7 +21,7 @@ export default function ContactPage() {
             <h1 style={{ margin: 0, fontSize: 'clamp(2rem, 5vw, 3.2rem)', fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
               <span className="text-gradient" style={{ fontWeight: 500 }}>Talk to our Dubai robotics team.</span>
             </h1>
-            <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
+            <p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
               Tell us about your venue, timeline, and use case. We will recommend a robot, share availability, and book a live demo at our Dubai showroom.
             </p>
 
@@ -60,13 +60,13 @@ function ContactRow({ label, value, href, external = false }: { label: string; v
         alignItems: 'center',
         gap: '1rem',
         padding: '0.75rem 0',
-        borderBottom: '1px solid rgba(39, 63, 148,0.1)',
+        borderBottom: '1px solid rgba(94, 94, 94, 0.1)',
         textDecoration: 'none',
-        color: '#FBFBFD',
+        color: '#fcfcfc',
       }}
     >
-      <span style={{ fontSize: '0.7rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8891C7' }}>{label}</span>
+      <span style={{ fontSize: '0.7rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#a8a8a8' }}>{label}</span>
-      <span style={{ fontSize: '0.95rem', color: '#FBFBFD', textAlign: 'right' }}>{value}</span>
+      <span style={{ fontSize: '0.95rem', color: '#fcfcfc', textAlign: 'right' }}>{value}</span>
     </a>
   );
 }

src/app/globals.css

@@ -1,48 +1,48 @@
 @import "tailwindcss";
 
 @theme {
-  /* === Luxury robotics Graphite + Royal Blue + Silver === */
+  /* === Luxury robotics — monochrome Black + Graphite + Silver === */
-  --color-bg: #0a0a0c;
+  --color-bg: #0b0b0b;
-  --color-bg-2: #16151a;
+  --color-bg-2: #181818;
-  --color-bg-3: #1c1b21;
+  --color-bg-3: #1e1e1e;
   --color-bg-4: #221f20;
   --color-surface: rgba(34, 31, 32, 0.7);
-  --color-primary: #0a0a0c;
+  --color-primary: #0b0b0b;
-  --color-secondary: #16151a;
+  --color-secondary: #181818;
 
-  /* Logo palette */
+  /* Logo palette (grayscale — legacy names retained) */
-  --color-blue: #273F94;
+  --color-blue: #5e5e5e;
-  --color-blue-deep: #1a2e6e;
+  --color-blue-deep: #444444;
-  --color-blue-bright: #3a55c4;
+  --color-blue-bright: #7f7f7f;
-  --color-silver: #DEE0F0;
+  --color-silver: #e7e7e7;
-  --color-silver-soft: #D7DBEA;
+  --color-silver-soft: #e1e1e1;
-  --color-steel: #8891C7;
+  --color-steel: #a8a8a8;
   --color-graphite: #221F20;
-  --color-white: #FBFBFD;
+  --color-white: #fcfcfc;
 
   /* Accent aliases (kept for legacy class names) */
-  --color-gold: #DEE0F0;
+  --color-gold: #e7e7e7;
-  --color-accent: #273F94;
+  --color-accent: #5e5e5e;
-  --color-accent-2: #D7DBEA;
+  --color-accent-2: #e1e1e1;
-  --color-accent-3: #8891C7;
+  --color-accent-3: #a8a8a8;
-  --color-accent-hover: #3a55c4;
+  --color-accent-hover: #7f7f7f;
 
   /* Text */
-  --color-text-primary: #FBFBFD;
+  --color-text-primary: #fcfcfc;
-  --color-text-secondary: #DEE0F0;
+  --color-text-secondary: #e7e7e7;
-  --color-text-muted: #8891C7;
+  --color-text-muted: #a8a8a8;
-  --color-text-dim: #6a73a5;
+  --color-text-dim: #888888;
 
   /* Borders */
-  --color-border: rgba(199, 207, 230, 0.18);
+  --color-border: rgba(215, 215, 215, 0.18);
-  --color-border-strong: rgba(199, 207, 230, 0.36);
+  --color-border-strong: rgba(215, 215, 215, 0.36);
-  --color-border-light: rgba(199, 207, 230, 0.08);
+  --color-border-light: rgba(215, 215, 215, 0.08);
   --color-border-neutral: rgba(255, 255, 255, 0.08);
 
   /* Glass */
-  --color-glass-bg: rgba(28, 27, 33, 0.6);
+  --color-glass-bg: rgba(30, 30, 30, 0.6);
-  --color-glass-border: rgba(199, 207, 230, 0.22);
+  --color-glass-border: rgba(215, 215, 215, 0.22);
-  --color-glass-highlight: rgba(222, 224, 240, 0.06);
+  --color-glass-highlight: rgba(231, 231, 231, 0.06);
 
   /* Spacing */
   --spacing-xs: 0.25rem;
@@ -60,8 +60,8 @@
   --radius-2xl: 1.5rem;
 
   /* Shadows */
-  --shadow-glow: 0 0 30px rgba(39, 63, 148, 0.32);
+  --shadow-glow: 0 0 30px rgba(94, 94, 94, 0.32);
-  --shadow-glow-lg: 0 0 60px rgba(39, 63, 148, 0.4);
+  --shadow-glow-lg: 0 0 60px rgba(94, 94, 94, 0.4);
   --shadow-card: 0 14px 50px rgba(0, 0, 0, 0.6);
 
   /* Transitions */
@@ -101,10 +101,10 @@ body > footer { flex: 0 0 auto; }
 
 body {
   background:
-    radial-gradient(1200px 700px at 80% -10%, rgba(39, 63, 148, 0.18), transparent 60%),
+    radial-gradient(1200px 700px at 80% -10%, rgba(94, 94, 94, 0.18), transparent 60%),
-    radial-gradient(900px 500px at -10% 30%, rgba(58, 85, 196, 0.10), transparent 60%),
+    radial-gradient(900px 500px at -10% 30%, rgba(127, 127, 127, 0.10), transparent 60%),
-    radial-gradient(800px 500px at 50% 110%, rgba(136, 145, 199, 0.10), transparent 60%),
+    radial-gradient(800px 500px at 50% 110%, rgba(168, 168, 168, 0.10), transparent 60%),
-    linear-gradient(180deg, #050507 0%, #0a0a0c 50%, #050507 100%);
+    linear-gradient(180deg, #060606 0%, #0b0b0b 50%, #060606 100%);
   background-attachment: fixed;
 }
 
@@ -118,7 +118,7 @@ html {
 }
 
 ::selection {
-  background-color: rgba(39, 63, 148, 0.55);
+  background-color: rgba(94, 94, 94, 0.55);
   color: #ffffff;
 }
 
@@ -145,7 +145,7 @@ html {
 
 /* === Typography gradients (metallic silver-blue) === */
 .text-gradient {
-  background: linear-gradient(135deg, #FFFFFF 0%, #DEE0F0 50%, #8891C7 100%);
+  background: linear-gradient(135deg, #FFFFFF 0%, #e7e7e7 50%, #a8a8a8 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -153,7 +153,7 @@ html {
 }
 
 .text-gradient-accent {
-  background: linear-gradient(135deg, #FFFFFF 0%, #DEE0F0 50%, #8891C7 100%);
+  background: linear-gradient(135deg, #FFFFFF 0%, #e7e7e7 50%, #a8a8a8 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -173,7 +173,7 @@ html {
   inset: 0;
   border-radius: inherit;
   padding: 1px;
-  background: linear-gradient(135deg, rgba(222, 224, 240, 0.55), rgba(136, 145, 199, 0.3) 45%, rgba(39, 63, 148, 0.0) 100%);
+  background: linear-gradient(135deg, rgba(231, 231, 231, 0.55), rgba(168, 168, 168, 0.3) 45%, rgba(94, 94, 94, 0.0) 100%);
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
@@ -185,10 +185,10 @@ html {
   position: absolute;
   inset: 0;
   background:
-    radial-gradient(ellipse 70% 60% at 60% 40%, rgba(39, 63, 148, 0.32) 0%, transparent 60%),
+    radial-gradient(ellipse 70% 60% at 60% 40%, rgba(94, 94, 94, 0.32) 0%, transparent 60%),
-    radial-gradient(ellipse 60% 50% at 20% 70%, rgba(58, 85, 196, 0.22) 0%, transparent 55%),
+    radial-gradient(ellipse 60% 50% at 20% 70%, rgba(127, 127, 127, 0.22) 0%, transparent 55%),
-    radial-gradient(ellipse 80% 70% at 80% 100%, rgba(136, 145, 199, 0.18) 0%, transparent 60%),
+    radial-gradient(ellipse 80% 70% at 80% 100%, rgba(168, 168, 168, 0.18) 0%, transparent 60%),
-    linear-gradient(180deg, #07080c 0%, #0a0a10 50%, #050507 100%);
+    linear-gradient(180deg, #0a0a0a 0%, #0d0d0d 50%, #060606 100%);
   animation: heroShift 16s ease-in-out infinite alternate;
 }
 
@@ -202,8 +202,8 @@ html {
   position: absolute;
   inset: 0;
   background-image:
-    linear-gradient(rgba(199, 207, 230, 0.05) 1px, transparent 1px),
+    linear-gradient(rgba(215, 215, 215, 0.05) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(199, 207, 230, 0.05) 1px, transparent 1px);
+    linear-gradient(90deg, rgba(215, 215, 215, 0.05) 1px, transparent 1px);
   background-size: 48px 48px;
   mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000 30%, transparent 80%);
   -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000 30%, transparent 80%);
@@ -218,7 +218,7 @@ html {
 }
 
 .shimmer {
-  background: linear-gradient(110deg, transparent 35%, rgba(222, 224, 240, 0.14) 50%, transparent 65%);
+  background: linear-gradient(110deg, transparent 35%, rgba(231, 231, 231, 0.14) 50%, transparent 65%);
   background-size: 200% 100%;
   animation: shimmer 3.5s linear infinite;
 }
@@ -229,7 +229,7 @@ html {
   position: absolute;
   inset: 0;
   pointer-events: none;
-  background: linear-gradient(110deg, transparent 30%, rgba(199, 207, 230, 0.07) 50%, transparent 70%);
+  background: linear-gradient(110deg, transparent 30%, rgba(215, 215, 215, 0.07) 50%, transparent 70%);
   background-size: 250% 100%;
   animation: lightSweep 9s ease-in-out infinite;
   mix-blend-mode: screen;
@@ -250,8 +250,8 @@ html {
 @keyframes spin { to { transform: rotate(360deg); } }
 
 @keyframes pulseGlow {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(39, 63, 148, 0.55), 0 0 40px rgba(39, 63, 148, 0.32); }
+  0%, 100% { box-shadow: 0 0 0 0 rgba(94, 94, 94, 0.55), 0 0 40px rgba(94, 94, 94, 0.32); }
-  50% { box-shadow: 0 0 0 12px rgba(39, 63, 148, 0), 0 0 60px rgba(39, 63, 148, 0.55); }
+  50% { box-shadow: 0 0 0 12px rgba(94, 94, 94, 0), 0 0 60px rgba(94, 94, 94, 0.55); }
 }
 
 /* Scroll indicator */
@@ -279,8 +279,8 @@ html {
 /* === Scrollbar === */
 ::-webkit-scrollbar { width: 8px; height: 8px; }
 ::-webkit-scrollbar-track { background: var(--color-bg-2); }
-::-webkit-scrollbar-thumb { background: rgba(136, 145, 199, 0.28); border-radius: var(--radius-sm); }
+::-webkit-scrollbar-thumb { background: rgba(168, 168, 168, 0.28); border-radius: var(--radius-sm); }
-::-webkit-scrollbar-thumb:hover { background: rgba(39, 63, 148, 0.7); }
+::-webkit-scrollbar-thumb:hover { background: rgba(94, 94, 94, 0.7); }
 
 /* === CTA Button System === */
 /* Reusable across all sections — primary | secondary | ghost | link, sizes sm | md | lg.
@@ -306,7 +306,7 @@ html {
   user-select: none;
 }
 .cta-btn:focus-visible {
-  outline: 2px solid #DEE0F0;
+  outline: 2px solid #e7e7e7;
   outline-offset: 3px;
 }
 .cta-btn:disabled,
@@ -327,8 +327,8 @@ html {
   align-items: center;
   justify-content: center;
   border-radius: 999px;
-  background: rgba(222, 224, 240, 0.12);
+  background: rgba(231, 231, 231, 0.12);
-  border: 1px solid rgba(222, 224, 240, 0.22);
+  border: 1px solid rgba(231, 231, 231, 0.22);
   color: currentColor;
   transition: transform 0.35s, background 0.35s, border-color 0.35s;
   flex-shrink: 0;
@@ -337,22 +337,22 @@ html {
 .cta-md .cta-arrow { width: 24px; height: 24px; }
 .cta-lg .cta-arrow { width: 26px; height: 26px; }
 
-/* PRIMARY — filled gradient, strongest emphasis */
+/* PRIMARY — bright silver-white pill, strongest emphasis on the near-black stage */
 .cta-primary {
-  background: linear-gradient(135deg, #5a76e8 0%, #4a66d8 35%, #2f4cb4 70%, #273F94 100%);
+  background: linear-gradient(135deg, #ffffff 0%, #ededed 45%, #cfcfcf 100%);
-  color: #FFFFFF;
+  color: #0b0b0b;
   box-shadow:
-    0 24px 56px rgba(39, 63, 148, 0.55),
+    0 24px 56px rgba(0, 0, 0, 0.55),
-    0 0 0 1px rgba(222, 224, 240, 0.22),
+    0 0 0 1px rgba(255, 255, 255, 0.5),
-    0 0 32px rgba(74, 102, 216, 0.4),
+    0 0 32px rgba(231, 231, 231, 0.28),
-    inset 0 1px 0 rgba(255, 255, 255, 0.24);
+    inset 0 1px 0 rgba(255, 255, 255, 0.7);
 }
 .cta-primary::before {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
+  background: linear-gradient(120deg, transparent 30%, rgba(0, 0, 0, 0.08) 50%, transparent 70%);
   transform: translateX(-100%);
   transition: transform 0.7s ease;
   pointer-events: none;
@@ -360,78 +360,78 @@ html {
 .cta-primary:hover {
   transform: translateY(-2px);
   box-shadow:
-    0 30px 66px rgba(39, 63, 148, 0.7),
+    0 30px 66px rgba(0, 0, 0, 0.7),
-    0 0 0 1px rgba(222, 224, 240, 0.32),
+    0 0 0 1px rgba(255, 255, 255, 0.7),
-    0 0 44px rgba(74, 102, 216, 0.55),
+    0 0 44px rgba(231, 231, 231, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
 }
 .cta-primary:hover::before { transform: translateX(100%); }
 .cta-primary .cta-arrow {
-  background: rgba(255, 255, 255, 0.18);
+  background: rgba(11, 11, 11, 0.1);
-  border-color: rgba(255, 255, 255, 0.24);
+  border-color: rgba(11, 11, 11, 0.2);
 }
 .cta-primary:hover .cta-arrow {
-  background: rgba(255, 255, 255, 0.32);
+  background: rgba(11, 11, 11, 0.18);
-  border-color: rgba(255, 255, 255, 0.4);
+  border-color: rgba(11, 11, 11, 0.32);
 }
 
 /* SECONDARY — glassmorphism, supporting actions */
 .cta-secondary {
-  border-color: rgba(222, 224, 240, 0.55);
+  border-color: rgba(231, 231, 231, 0.55);
   background:
-    linear-gradient(135deg, rgba(58, 85, 196, 0.16), rgba(14, 13, 18, 0.55) 60%),
+    linear-gradient(135deg, rgba(127, 127, 127, 0.16), rgba(16, 16, 16, 0.55) 60%),
-    rgba(14, 13, 18, 0.55);
+    rgba(16, 16, 16, 0.55);
   color: #FFFFFF;
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   box-shadow:
     0 14px 32px rgba(0, 0, 0, 0.55),
-    inset 0 1px 0 rgba(222, 224, 240, 0.22),
+    inset 0 1px 0 rgba(231, 231, 231, 0.22),
-    0 0 0 1px rgba(58, 85, 196, 0.18);
+    0 0 0 1px rgba(127, 127, 127, 0.18);
 }
 .cta-secondary::before {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  background: linear-gradient(120deg, transparent 30%, rgba(222, 224, 240, 0.16) 50%, transparent 70%);
+  background: linear-gradient(120deg, transparent 30%, rgba(231, 231, 231, 0.16) 50%, transparent 70%);
   transform: translateX(-100%);
   transition: transform 0.7s ease;
   pointer-events: none;
 }
 .cta-secondary:hover {
-  border-color: rgba(222, 224, 240, 0.82);
+  border-color: rgba(231, 231, 231, 0.82);
   background:
-    linear-gradient(135deg, rgba(74, 102, 216, 0.3), rgba(20, 22, 38, 0.62) 60%),
+    linear-gradient(135deg, rgba(145, 145, 145, 0.3), rgba(29, 29, 29, 0.62) 60%),
-    rgba(20, 22, 38, 0.62);
+    rgba(29, 29, 29, 0.62);
   transform: translateY(-2px);
   box-shadow:
     0 22px 46px rgba(0, 0, 0, 0.62),
-    inset 0 1px 0 rgba(222, 224, 240, 0.3),
+    inset 0 1px 0 rgba(231, 231, 231, 0.3),
-    0 0 0 1px rgba(58, 85, 196, 0.5),
+    0 0 0 1px rgba(127, 127, 127, 0.5),
-    0 0 32px rgba(58, 85, 196, 0.4);
+    0 0 32px rgba(127, 127, 127, 0.4);
 }
 .cta-secondary:hover::before { transform: translateX(100%); }
 
 /* GHOST — outline, low-emphasis action */
 .cta-ghost {
-  border-color: rgba(222, 224, 240, 0.28);
+  border-color: rgba(231, 231, 231, 0.28);
   background: transparent;
-  color: #ECEEF6;
+  color: #f1f1f1;
 }
 .cta-ghost:hover {
-  border-color: rgba(222, 224, 240, 0.6);
+  border-color: rgba(231, 231, 231, 0.6);
-  background: rgba(58, 85, 196, 0.14);
+  background: rgba(127, 127, 127, 0.14);
   color: #FFFFFF;
   transform: translateY(-2px);
 }
 .cta-ghost .cta-arrow {
-  background: rgba(222, 224, 240, 0.08);
+  background: rgba(231, 231, 231, 0.08);
-  border-color: rgba(222, 224, 240, 0.2);
+  border-color: rgba(231, 231, 231, 0.2);
 }
 .cta-ghost:hover .cta-arrow {
-  background: rgba(58, 85, 196, 0.22);
+  background: rgba(127, 127, 127, 0.22);
-  border-color: rgba(222, 224, 240, 0.4);
+  border-color: rgba(231, 231, 231, 0.4);
 }
 
 /* LINK — text-only for minor inline links */
@@ -439,7 +439,7 @@ html {
   padding: 0.45rem 0;
   border: none;
   background: transparent;
-  color: #DEE0F0;
+  color: #e7e7e7;
   font-size: 0.72rem;
   letter-spacing: 0.2em;
   border-bottom: 1px solid transparent;
@@ -449,7 +449,7 @@ html {
 }
 .cta-link:hover {
   color: #FFFFFF;
-  border-bottom-color: rgba(222, 224, 240, 0.55);
+  border-bottom-color: rgba(231, 231, 231, 0.55);
   transform: translateX(2px);
 }
 .cta-link .cta-arrow {
@@ -492,53 +492,53 @@ html {
 }
 .btn:hover { transform: translateY(-2px); }
 .btn-primary {
-  background: linear-gradient(135deg, #5a76e8 0%, #4a66d8 35%, #2f4cb4 70%, #273F94 100%);
+  background: linear-gradient(135deg, #ffffff 0%, #ededed 45%, #cfcfcf 100%);
-  color: #FFFFFF;
+  color: #0b0b0b;
   box-shadow:
-    0 24px 56px rgba(39, 63, 148, 0.55),
+    0 24px 56px rgba(0, 0, 0, 0.55),
-    0 0 0 1px rgba(222, 224, 240, 0.22),
+    0 0 0 1px rgba(255, 255, 255, 0.5),
-    0 0 32px rgba(74, 102, 216, 0.4),
+    0 0 32px rgba(231, 231, 231, 0.28),
-    inset 0 1px 0 rgba(255, 255, 255, 0.24);
+    inset 0 1px 0 rgba(255, 255, 255, 0.7);
 }
 .btn-primary:hover {
   box-shadow:
-    0 30px 66px rgba(39, 63, 148, 0.7),
+    0 30px 66px rgba(0, 0, 0, 0.7),
-    0 0 0 1px rgba(222, 224, 240, 0.32),
+    0 0 0 1px rgba(255, 255, 255, 0.7),
-    0 0 44px rgba(74, 102, 216, 0.55),
+    0 0 44px rgba(231, 231, 231, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
 }
 .btn-ghost {
   background:
-    linear-gradient(135deg, rgba(58, 85, 196, 0.16), rgba(14, 13, 18, 0.55) 60%),
+    linear-gradient(135deg, rgba(127, 127, 127, 0.16), rgba(16, 16, 16, 0.55) 60%),
-    rgba(14, 13, 18, 0.55);
+    rgba(16, 16, 16, 0.55);
   color: #FFFFFF;
-  border-color: rgba(222, 224, 240, 0.55);
+  border-color: rgba(231, 231, 231, 0.55);
   backdrop-filter: blur(14px);
   box-shadow:
     0 14px 32px rgba(0, 0, 0, 0.55),
-    inset 0 1px 0 rgba(222, 224, 240, 0.22),
+    inset 0 1px 0 rgba(231, 231, 231, 0.22),
-    0 0 0 1px rgba(58, 85, 196, 0.18);
+    0 0 0 1px rgba(127, 127, 127, 0.18);
 }
 .btn-ghost:hover {
-  border-color: rgba(222, 224, 240, 0.82);
+  border-color: rgba(231, 231, 231, 0.82);
   background:
-    linear-gradient(135deg, rgba(74, 102, 216, 0.3), rgba(20, 22, 38, 0.62) 60%),
+    linear-gradient(135deg, rgba(145, 145, 145, 0.3), rgba(29, 29, 29, 0.62) 60%),
-    rgba(20, 22, 38, 0.62);
+    rgba(29, 29, 29, 0.62);
   color: #FFFFFF;
   box-shadow:
     0 22px 46px rgba(0, 0, 0, 0.62),
-    inset 0 1px 0 rgba(222, 224, 240, 0.3),
+    inset 0 1px 0 rgba(231, 231, 231, 0.3),
-    0 0 0 1px rgba(58, 85, 196, 0.5),
+    0 0 0 1px rgba(127, 127, 127, 0.5),
-    0 0 32px rgba(58, 85, 196, 0.4);
+    0 0 32px rgba(127, 127, 127, 0.4);
 }
 .btn-outline {
   background: transparent;
-  color: #ECEEF6;
+  color: #f1f1f1;
-  border-color: rgba(222, 224, 240, 0.28);
+  border-color: rgba(231, 231, 231, 0.28);
 }
 .btn-outline:hover {
-  background: rgba(58, 85, 196, 0.14);
+  background: rgba(127, 127, 127, 0.14);
-  border-color: rgba(222, 224, 240, 0.6);
+  border-color: rgba(231, 231, 231, 0.6);
   color: #FFFFFF;
 }
 
@@ -580,7 +580,7 @@ html {
 /* === Cards === */
 .card {
   position: relative;
-  background: rgba(22, 21, 26, 0.72);
+  background: rgba(24, 24, 24, 0.72);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--color-border);
@@ -590,8 +590,8 @@ html {
 }
 .card:hover {
   transform: translateY(-6px);
-  border-color: rgba(136, 145, 199, 0.55);
+  border-color: rgba(168, 168, 168, 0.55);
-  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(39, 63, 148, 0.22);
+  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(94, 94, 94, 0.22);
 }
 
 /* === Configurator (preserve previous theme rules) === */

src/app/industries/[slug]/page.tsx

@@ -461,23 +461,23 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           font-size: 0.7rem;
           letter-spacing: 0.18em;
           text-transform: uppercase;
-          color: #8891C7;
+          color: #a8a8a8;
         }
-        .ip-breadcrumbs a { color: #8891C7; text-decoration: none; transition: color 0.25s; }
+        .ip-breadcrumbs a { color: #a8a8a8; text-decoration: none; transition: color 0.25s; }
         .ip-breadcrumbs a:hover { color: #FFFFFF; }
         .ip-breadcrumbs li[aria-current="page"] { color: #FFFFFF; }
-        .ip-breadcrumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #4a4f63; }
+        .ip-breadcrumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #575757; }
 
         /* HERO */
         .ip-hero {
           position: relative;
           overflow: hidden;
           border-radius: 26px;
-          border: 1px solid rgba(74, 102, 216, 0.20);
+          border: 1px solid rgba(145, 145, 145, 0.20);
           background:
-            radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.20), transparent 55%),
+            radial-gradient(ellipse 70% 100% at 0% 0%, rgba(127, 127, 127, 0.20), transparent 55%),
-            radial-gradient(ellipse 60% 80% at 100% 100%, rgba(136, 145, 199, 0.16), transparent 60%),
+            radial-gradient(ellipse 60% 80% at 100% 100%, rgba(168, 168, 168, 0.16), transparent 60%),
-            linear-gradient(135deg, rgba(14, 13, 22, 0.95), rgba(6, 6, 10, 0.97));
+            linear-gradient(135deg, rgba(18, 18, 18, 0.95), rgba(8, 8, 8, 0.97));
           box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
         }
         .ip-hero-glow {
@@ -489,14 +489,14 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
         .ip-hero-glow-b {
           position: absolute; width: 460px; height: 460px; border-radius: 999px;
           bottom: -200px; left: -150px;
-          background: radial-gradient(circle, rgba(74, 102, 216, 0.32), transparent 70%);
+          background: radial-gradient(circle, rgba(145, 145, 145, 0.32), transparent 70%);
           filter: blur(110px); opacity: 0.5; pointer-events: none;
         }
         .ip-hero-grid {
           position: absolute; inset: 0;
           background:
-            linear-gradient(rgba(74, 102, 216, 0.05) 1px, transparent 1px),
+            linear-gradient(rgba(145, 145, 145, 0.05) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(74, 102, 216, 0.05) 1px, transparent 1px);
+            linear-gradient(90deg, rgba(145, 145, 145, 0.05) 1px, transparent 1px);
           background-size: 56px 56px;
           mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 25%, transparent 80%);
           -webkit-mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 25%, transparent 80%);
@@ -515,8 +515,8 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           width: fit-content;
         }
         .ip-dot {
-          width: 7px; height: 7px; border-radius: 999px; background: #DEE0F0;
+          width: 7px; height: 7px; border-radius: 999px; background: #e7e7e7;
-          box-shadow: 0 0 14px rgba(222, 224, 240, 0.85);
+          box-shadow: 0 0 14px rgba(231, 231, 231, 0.85);
         }
         .ip-hero-title {
           margin: 0;
@@ -525,7 +525,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
         }
         .ip-hero-title .text-gradient { font-weight: 500; }
         .ip-hero-sub {
-          margin: 0; color: #DEE0F0;
+          margin: 0; color: #e7e7e7;
           font-size: clamp(0.95rem, 1.8vw, 1.1rem); line-height: 1.65; max-width: 560px;
         }
         .ip-hero-tags {
@@ -536,9 +536,9 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           display: inline-flex; align-items: center; gap: 0.3rem;
           padding: 0.35rem 0.65rem;
           border-radius: 999px;
-          border: 1px solid rgba(120, 140, 255, 0.28);
+          border: 1px solid rgba(188, 188, 188, 0.28);
-          background: rgba(58, 85, 196, 0.12);
+          background: rgba(127, 127, 127, 0.12);
-          color: #DEE0F0;
+          color: #e7e7e7;
           font-size: 0.72rem;
           font-weight: 600;
           letter-spacing: 0.02em;
@@ -553,8 +553,8 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           aspect-ratio: 4 / 3;
           border-radius: 20px;
           overflow: hidden;
-          border: 1px solid color-mix(in srgb, var(--acc) 35%, rgba(74, 102, 216, 0.20));
+          border: 1px solid color-mix(in srgb, var(--acc) 35%, rgba(145, 145, 145, 0.20));
-          background: #0a0a0e;
+          background: #0c0c0c;
           box-shadow:
             0 22px 60px rgba(0, 0, 0, 0.55),
             inset 0 1px 0 rgba(255, 255, 255, 0.05),
@@ -571,7 +571,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           position: absolute;
           inset: 0;
           background:
-            linear-gradient(180deg, rgba(10, 10, 14, 0.15) 0%, rgba(10, 10, 14, 0.05) 35%, rgba(10, 10, 14, 0.80) 100%),
+            linear-gradient(180deg, rgba(12, 12, 12, 0.15) 0%, rgba(12, 12, 12, 0.05) 35%, rgba(12, 12, 12, 0.80) 100%),
             radial-gradient(ellipse 100% 70% at 100% 0%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 65%);
           pointer-events: none;
         }
@@ -587,19 +587,19 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           justify-content: space-between;
           gap: 0.6rem;
           padding: 0.9rem 1.05rem;
-          border-top: 1px solid rgba(222, 224, 240, 0.10);
+          border-top: 1px solid rgba(231, 231, 231, 0.10);
-          background: linear-gradient(180deg, rgba(10, 10, 14, 0.0), rgba(10, 10, 14, 0.55));
+          background: linear-gradient(180deg, rgba(12, 12, 12, 0.0), rgba(12, 12, 12, 0.55));
           backdrop-filter: blur(6px);
           -webkit-backdrop-filter: blur(6px);
         }
         .ip-mono {
           font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-          font-size: 0.6rem; letter-spacing: 0.3em; font-weight: 800; color: #DEE0F0;
+          font-size: 0.6rem; letter-spacing: 0.3em; font-weight: 800; color: #e7e7e7;
         }
-        .ip-live { color: #7FD6D0; display: inline-flex; align-items: center; gap: 0.4rem; }
+        .ip-live { color: #ababab; display: inline-flex; align-items: center; gap: 0.4rem; }
         .ip-live-dot {
-          width: 7px; height: 7px; border-radius: 999px; background: #7FD6D0;
+          width: 7px; height: 7px; border-radius: 999px; background: #ababab;
-          box-shadow: 0 0 10px rgba(127, 214, 208, 0.7);
+          box-shadow: 0 0 10px rgba(171, 171, 171, 0.7);
         }
 
         @media (min-width: 920px) {
@@ -624,16 +624,16 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           gap: 0.75rem;
           padding: 0.85rem 1rem;
           border-radius: 14px;
-          border: 1px solid rgba(120, 140, 255, 0.22);
+          border: 1px solid rgba(188, 188, 188, 0.22);
-          background: linear-gradient(135deg, rgba(80, 110, 255, 0.10), rgba(255, 255, 255, 0.03));
+          background: linear-gradient(135deg, rgba(168, 168, 168, 0.10), rgba(255, 255, 255, 0.03));
           align-items: center;
         }
         .ip-trust-icon {
           display: inline-flex; align-items: center; justify-content: center;
           width: 32px; height: 32px; border-radius: 10px;
-          color: #DEE0F0;
+          color: #e7e7e7;
-          background: rgba(74, 102, 216, 0.18);
+          background: rgba(145, 145, 145, 0.18);
-          border: 1px solid rgba(74, 102, 216, 0.45);
+          border: 1px solid rgba(145, 145, 145, 0.45);
         }
         .ip-trust-label {
           display: block;
@@ -641,7 +641,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           letter-spacing: -0.005em;
         }
         .ip-trust-sub {
-          display: block; font-size: 0.7rem; color: #8891C7; margin-top: 0.1rem;
+          display: block; font-size: 0.7rem; color: #a8a8a8; margin-top: 0.1rem;
         }
         @media (min-width: 820px) {
           .ip-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
@@ -659,23 +659,23 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           display: flex; flex-direction: column; gap: 0.25rem;
           padding: 0.95rem 1rem;
           border-radius: 16px;
-          border: 1px solid color-mix(in srgb, var(--acc) 28%, rgba(120, 140, 255, 0.18));
+          border: 1px solid color-mix(in srgb, var(--acc) 28%, rgba(188, 188, 188, 0.18));
           background:
             radial-gradient(ellipse 70% 100% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 65%),
-            linear-gradient(135deg, rgba(80, 110, 255, 0.10), rgba(255, 255, 255, 0.03));
+            linear-gradient(135deg, rgba(168, 168, 168, 0.10), rgba(255, 255, 255, 0.03));
           overflow: hidden;
           transition: border-color 0.3s, transform 0.3s;
         }
         .ip-proof-card:hover {
           transform: translateY(-2px);
-          border-color: color-mix(in srgb, var(--acc) 55%, rgba(120, 140, 255, 0.35));
+          border-color: color-mix(in srgb, var(--acc) 55%, rgba(188, 188, 188, 0.35));
         }
         .ip-proof-value {
           font-size: clamp(1.15rem, 3vw, 1.7rem);
           font-weight: 600;
           letter-spacing: -0.025em;
           line-height: 1;
-          background: linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--acc) 65%, #B5BDDB));
+          background: linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--acc) 65%, #c8c8c8));
           -webkit-background-clip: text;
           background-clip: text;
           color: transparent;
@@ -685,7 +685,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           letter-spacing: 0.2em;
           text-transform: uppercase;
           font-weight: 700;
-          color: #A6B2D8;
+          color: #bfbfbf;
         }
         @media (min-width: 720px) {
           .ip-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@@ -712,14 +712,14 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           overflow: hidden;
           background:
             radial-gradient(ellipse 70% 50% at 50% 60%, color-mix(in srgb, var(--acc) 18%, transparent) 0%, transparent 65%),
-            linear-gradient(180deg, rgba(28, 27, 33, 0.78), rgba(8, 8, 10, 0.95));
+            linear-gradient(180deg, rgba(30, 30, 30, 0.78), rgba(9, 9, 9, 0.95));
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
           box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
           transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
         }
         .ip-gallery-card:hover .ip-gallery-imgwrap {
           transform: translateY(-3px);
-          border-color: color-mix(in srgb, var(--acc) 45%, rgba(120, 140, 255, 0.28));
+          border-color: color-mix(in srgb, var(--acc) 45%, rgba(188, 188, 188, 0.28));
           box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55), 0 0 26px color-mix(in srgb, var(--acc) 18%, transparent);
         }
         .ip-gallery-credit {
@@ -728,10 +728,10 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           right: 0.55rem;
           padding: 0.22rem 0.55rem;
           border-radius: 999px;
-          background: rgba(8, 8, 12, 0.72);
+          background: rgba(10, 10, 10, 0.72);
-          border: 1px solid rgba(222, 224, 240, 0.18);
+          border: 1px solid rgba(231, 231, 231, 0.18);
           backdrop-filter: blur(8px);
-          color: #DEE0F0;
+          color: #e7e7e7;
           font-size: 0.56rem;
           letter-spacing: 0.22em;
           text-transform: uppercase;
@@ -740,7 +740,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
         .ip-gallery-cap {
           margin: 0;
           padding: 0 0.15rem;
-          color: #C9CCDE;
+          color: #d4d4d4;
           font-size: 0.82rem;
           line-height: 1.5;
         }
@@ -760,15 +760,15 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           display: flex; flex-direction: column; gap: 0.55rem;
           padding: 1.15rem 1.2rem 1.2rem;
           border-radius: 18px;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
           background:
             radial-gradient(ellipse 75% 50% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%),
-            linear-gradient(180deg, rgba(22, 21, 30, 0.9), rgba(10, 10, 14, 0.96));
+            linear-gradient(180deg, rgba(26, 26, 26, 0.9), rgba(12, 12, 12, 0.96));
           transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
         }
         .ip-case:hover {
           transform: translateY(-3px);
-          border-color: rgba(74, 102, 216, 0.42);
+          border-color: rgba(145, 145, 145, 0.42);
           box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5);
         }
         .ip-case-brand {
@@ -781,13 +781,13 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           padding: 0.3rem 0.55rem;
           border-radius: 999px;
           border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
-          background: color-mix(in srgb, var(--acc) 10%, rgba(14, 13, 18, 0.55));
+          background: color-mix(in srgb, var(--acc) 10%, rgba(16, 16, 16, 0.55));
         }
         .ip-case h3 {
           margin: 0; font-size: 1.02rem; font-weight: 600;
           color: #FFFFFF; letter-spacing: -0.005em;
         }
-        .ip-case p { margin: 0; color: #C9CCDE; font-size: 0.88rem; line-height: 1.55; }
+        .ip-case p { margin: 0; color: #d4d4d4; font-size: 0.88rem; line-height: 1.55; }
 
         /* BLOCKS */
         .ip-block { display: flex; flex-direction: column; gap: clamp(1.2rem, 2.2vw, 1.75rem); }
@@ -810,17 +810,17 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem;
           padding: 1.05rem 1.15rem;
           border-radius: 16px;
-          border: 1px solid rgba(222, 224, 240, 0.08);
+          border: 1px solid rgba(231, 231, 231, 0.08);
-          background: linear-gradient(135deg, rgba(20, 19, 26, 0.78), rgba(10, 10, 14, 0.94));
+          background: linear-gradient(135deg, rgba(23, 23, 23, 0.78), rgba(12, 12, 12, 0.94));
           transition: border-color 0.3s, transform 0.3s;
         }
-        .ip-problem:hover { border-color: rgba(74, 102, 216, 0.32); transform: translateY(-2px); }
+        .ip-problem:hover { border-color: rgba(145, 145, 145, 0.32); transform: translateY(-2px); }
         .ip-problem-num {
           font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
           font-size: 0.7rem; letter-spacing: 0.22em; font-weight: 800;
-          color: #8891C7; padding-top: 0.15rem;
+          color: #a8a8a8; padding-top: 0.15rem;
         }
-        .ip-problem p { margin: 0; color: #DEE0F0; font-size: 0.92rem; line-height: 1.55; }
+        .ip-problem p { margin: 0; color: #e7e7e7; font-size: 0.92rem; line-height: 1.55; }
 
         /* SOLUTIONS */
         .ip-solutions {
@@ -832,47 +832,47 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           display: flex; flex-direction: column; gap: 0.65rem;
           padding: 1.2rem 1.2rem 1.25rem;
           border-radius: 18px;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
           background:
             radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
-            linear-gradient(180deg, rgba(22, 21, 30, 0.9), rgba(10, 10, 14, 0.96));
+            linear-gradient(180deg, rgba(26, 26, 26, 0.9), rgba(12, 12, 12, 0.96));
           transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
         }
         .ip-solution:hover {
           transform: translateY(-3px);
-          border-color: rgba(74, 102, 216, 0.42);
+          border-color: rgba(145, 145, 145, 0.42);
-          box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(58, 85, 196, 0.18);
+          box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(127, 127, 127, 0.18);
         }
         .ip-solution-icon {
           display: inline-flex; align-items: center; justify-content: center;
           width: 40px; height: 40px; border-radius: 12px;
           color: color-mix(in srgb, var(--acc) 82%, white);
           border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
-          background: color-mix(in srgb, var(--acc) 12%, rgba(14, 13, 18, 0.6));
+          background: color-mix(in srgb, var(--acc) 12%, rgba(16, 16, 16, 0.6));
         }
         .ip-solution h3 {
           margin: 0; font-size: 1.02rem; font-weight: 600;
           color: #FFFFFF; letter-spacing: -0.005em;
         }
-        .ip-solution p { margin: 0; color: #C9CCDE; font-size: 0.86rem; line-height: 1.55; flex: 1; }
+        .ip-solution p { margin: 0; color: #d4d4d4; font-size: 0.86rem; line-height: 1.55; flex: 1; }
         .ip-solution-tags {
           display: flex; flex-direction: column; gap: 0.4rem;
-          padding-top: 0.7rem; border-top: 1px solid rgba(222, 224, 240, 0.07);
+          padding-top: 0.7rem; border-top: 1px solid rgba(231, 231, 231, 0.07);
         }
         .ip-tag-label {
           font-size: 0.55rem; letter-spacing: 0.24em; text-transform: uppercase;
-          font-weight: 800; color: #8891C7;
+          font-weight: 800; color: #a8a8a8;
         }
         .ip-solution-tags ul {
           list-style: none; margin: 0; padding: 0;
           display: flex; flex-wrap: wrap; gap: 0.3rem;
         }
         .ip-solution-tags li {
-          font-size: 0.7rem; font-weight: 600; color: #DEE0F0;
+          font-size: 0.7rem; font-weight: 600; color: #e7e7e7;
           padding: 0.2rem 0.55rem;
           border-radius: 999px;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
-          background: rgba(20, 19, 26, 0.65);
+          background: rgba(23, 23, 23, 0.65);
         }
 
         /* USE CASES */
@@ -887,15 +887,15 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           align-items: center;
           padding: 0.95rem 1.05rem;
           border-radius: 14px;
-          border: 1px solid rgba(222, 224, 240, 0.08);
+          border: 1px solid rgba(231, 231, 231, 0.08);
-          background: linear-gradient(135deg, rgba(18, 18, 26, 0.78), rgba(8, 8, 12, 0.92));
+          background: linear-gradient(135deg, rgba(22, 22, 22, 0.78), rgba(10, 10, 10, 0.92));
-          color: #DEE0F0; font-size: 0.92rem; line-height: 1.45;
+          color: #e7e7e7; font-size: 0.92rem; line-height: 1.45;
           transition: border-color 0.3s, transform 0.3s;
         }
-        .ip-usecase:hover { border-color: rgba(74, 102, 216, 0.35); transform: translateX(2px); }
+        .ip-usecase:hover { border-color: rgba(145, 145, 145, 0.35); transform: translateX(2px); }
         .ip-usecase-num {
           font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-          font-size: 0.7rem; letter-spacing: 0.18em; font-weight: 800; color: #8891C7;
+          font-size: 0.7rem; letter-spacing: 0.18em; font-weight: 800; color: #a8a8a8;
         }
 
         /* BENEFITS */
@@ -908,23 +908,23 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           position: relative;
           padding: 1.15rem 1.2rem 1.1rem;
           border-radius: 16px;
-          border: 1px solid rgba(222, 224, 240, 0.08);
+          border: 1px solid rgba(231, 231, 231, 0.08);
-          background: linear-gradient(135deg, rgba(20, 19, 26, 0.82), rgba(10, 10, 14, 0.94));
+          background: linear-gradient(135deg, rgba(23, 23, 23, 0.82), rgba(12, 12, 12, 0.94));
           transition: border-color 0.3s, transform 0.3s;
         }
-        .ip-benefit:hover { border-color: rgba(74, 102, 216, 0.32); transform: translateY(-2px); }
+        .ip-benefit:hover { border-color: rgba(145, 145, 145, 0.32); transform: translateY(-2px); }
         .ip-benefit-check {
           display: inline-flex; align-items: center; justify-content: center;
           width: 22px; height: 22px; border-radius: 999px;
-          background: rgba(127, 214, 208, 0.18);
+          background: rgba(171, 171, 171, 0.18);
-          border: 1px solid rgba(127, 214, 208, 0.4);
+          border: 1px solid rgba(171, 171, 171, 0.4);
-          color: #7FD6D0;
+          color: #ababab;
           margin-bottom: 0.55rem;
         }
         .ip-benefit h3 {
           margin: 0 0 0.35rem; font-size: 0.98rem; font-weight: 600; color: #FFFFFF;
         }
-        .ip-benefit p { margin: 0; color: #C9CCDE; font-size: 0.86rem; line-height: 1.5; }
+        .ip-benefit p { margin: 0; color: #d4d4d4; font-size: 0.86rem; line-height: 1.5; }
 
         /* SUGGESTED ROBOTS */
         .ip-robots {
@@ -936,16 +936,16 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           display: flex; flex-direction: column; gap: 0.55rem;
           padding: 1.2rem 1.25rem 1.2rem;
           border-radius: 18px;
-          border: 1px solid rgba(74, 102, 216, 0.24);
+          border: 1px solid rgba(145, 145, 145, 0.24);
           background:
             radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 20%, transparent), transparent 60%),
-            linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96));
+            linear-gradient(180deg, rgba(26, 26, 26, 0.92), rgba(12, 12, 12, 0.96));
           transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
         }
         .ip-robot:hover {
           transform: translateY(-3px);
-          border-color: rgba(74, 102, 216, 0.5);
+          border-color: rgba(145, 145, 145, 0.5);
-          box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55), 0 0 28px rgba(58, 85, 196, 0.22);
+          box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55), 0 0 28px rgba(127, 127, 127, 0.22);
         }
         .ip-robot-head {
           display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
@@ -957,12 +957,12 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
         .ip-robot-arrow {
           display: inline-flex; align-items: center; justify-content: center;
           width: 26px; height: 26px; border-radius: 999px;
-          color: #DEE0F0;
+          color: #e7e7e7;
-          border: 1px solid rgba(222, 224, 240, 0.14);
+          border: 1px solid rgba(231, 231, 231, 0.14);
-          background: rgba(14, 13, 18, 0.6);
+          background: rgba(16, 16, 16, 0.6);
         }
         .ip-robot h3 { margin: 0; font-size: 1.08rem; font-weight: 600; color: #FFFFFF; }
-        .ip-robot p { margin: 0; color: #C9CCDE; font-size: 0.88rem; line-height: 1.55; flex: 1; }
+        .ip-robot p { margin: 0; color: #d4d4d4; font-size: 0.88rem; line-height: 1.55; flex: 1; }
         .ip-robot-chips {
           list-style: none; margin: 0; padding: 0;
           display: flex; flex-wrap: wrap; gap: 0.3rem;
@@ -976,14 +976,14 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           padding: 0.25rem 0.55rem;
           border-radius: 999px;
           border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
-          background: color-mix(in srgb, var(--acc) 10%, rgba(14, 13, 18, 0.55));
+          background: color-mix(in srgb, var(--acc) 10%, rgba(16, 16, 16, 0.55));
-          color: #DEE0F0;
+          color: #e7e7e7;
         }
         .ip-robot-link {
           display: inline-flex; align-items: center; gap: 0.45rem;
           margin-top: 0.55rem; padding-top: 0.7rem;
-          border-top: 1px solid rgba(222, 224, 240, 0.07);
+          border-top: 1px solid rgba(231, 231, 231, 0.07);
-          font-size: 0.8rem; font-weight: 600; color: #DEE0F0;
+          font-size: 0.8rem; font-weight: 600; color: #e7e7e7;
           text-decoration: none;
           transition: color 0.25s, gap 0.25s;
         }
@@ -1004,15 +1004,15 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           display: flex; flex-direction: column; gap: 0.45rem;
           padding: 1.15rem 1.15rem 1.2rem;
           border-radius: 16px;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
           background:
             radial-gradient(ellipse 80% 60% at 0% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%),
-            linear-gradient(180deg, rgba(20, 19, 26, 0.85), rgba(8, 8, 12, 0.95));
+            linear-gradient(180deg, rgba(23, 23, 23, 0.85), rgba(10, 10, 10, 0.95));
           transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
         }
         .ip-step:hover {
           transform: translateY(-2px);
-          border-color: color-mix(in srgb, var(--acc) 38%, rgba(120, 140, 255, 0.32));
+          border-color: color-mix(in srgb, var(--acc) 38%, rgba(188, 188, 188, 0.32));
           box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45), 0 0 22px color-mix(in srgb, var(--acc) 16%, transparent);
         }
         .ip-step-num {
@@ -1020,11 +1020,11 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           font-size: 0.68rem;
           letter-spacing: 0.22em;
           font-weight: 800;
-          color: color-mix(in srgb, var(--acc) 70%, #B5BDDB);
+          color: color-mix(in srgb, var(--acc) 70%, #c8c8c8);
           padding: 0.2rem 0.5rem;
           border-radius: 999px;
           border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent);
-          background: color-mix(in srgb, var(--acc) 8%, rgba(14, 13, 18, 0.55));
+          background: color-mix(in srgb, var(--acc) 8%, rgba(16, 16, 16, 0.55));
           align-self: flex-start;
         }
         .ip-step h3 {
@@ -1036,7 +1036,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
         }
         .ip-step p {
           margin: 0;
-          color: #C9CCDE;
+          color: #d4d4d4;
           font-size: 0.84rem;
           line-height: 1.55;
         }
@@ -1045,23 +1045,23 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
         .ip-cta {
           position: relative; overflow: hidden;
           border-radius: 26px;
-          border: 1px solid rgba(74, 102, 216, 0.26);
+          border: 1px solid rgba(145, 145, 145, 0.26);
           background:
-            radial-gradient(ellipse 60% 100% at 100% 0%, rgba(58, 85, 196, 0.22), transparent 60%),
+            radial-gradient(ellipse 60% 100% at 100% 0%, rgba(127, 127, 127, 0.22), transparent 60%),
-            linear-gradient(135deg, rgba(18, 16, 28, 0.95), rgba(8, 8, 12, 0.97));
+            linear-gradient(135deg, rgba(22, 22, 22, 0.95), rgba(10, 10, 10, 0.97));
           box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
         }
         .ip-cta-glow {
           position: absolute; width: 480px; height: 480px; border-radius: 999px;
           top: -160px; left: -160px;
-          background: radial-gradient(circle, rgba(74, 102, 216, 0.45), transparent 70%);
+          background: radial-gradient(circle, rgba(145, 145, 145, 0.45), transparent 70%);
           filter: blur(100px); opacity: 0.55; pointer-events: none;
         }
         .ip-cta-grid {
           position: absolute; inset: 0;
           background:
-            linear-gradient(rgba(74, 102, 216, 0.05) 1px, transparent 1px),
+            linear-gradient(rgba(145, 145, 145, 0.05) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(74, 102, 216, 0.05) 1px, transparent 1px);
+            linear-gradient(90deg, rgba(145, 145, 145, 0.05) 1px, transparent 1px);
           background-size: 56px 56px;
           mask-image: radial-gradient(ellipse 60% 90% at 70% 50%, #000 25%, transparent 80%);
           -webkit-mask-image: radial-gradient(ellipse 60% 90% at 70% 50%, #000 25%, transparent 80%);
@@ -1083,7 +1083,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           font-size: clamp(1.65rem, 3vw, 2.25rem);
           font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.1;
         }
-        .ip-cta-text p { margin: 0; color: #DEE0F0; font-size: 0.95rem; line-height: 1.65; }
+        .ip-cta-text p { margin: 0; color: #e7e7e7; font-size: 0.95rem; line-height: 1.65; }
         .ip-cta-actions {
           display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-start;
         }

src/app/industries/page.tsx

@@ -38,7 +38,7 @@ const PROOF = [
 ];
 
 export default function IndustriesPage() {
-  const accent = '#3a55c4';
+  const accent = '#7f7f7f';
 
   return (
     <>
@@ -161,11 +161,11 @@ export default function IndustriesPage() {
           position: relative;
           overflow: hidden;
           border-radius: 26px;
-          border: 1px solid rgba(74, 102, 216, 0.20);
+          border: 1px solid rgba(145, 145, 145, 0.20);
           background:
-            radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.20), transparent 55%),
+            radial-gradient(ellipse 70% 100% at 0% 0%, rgba(127, 127, 127, 0.20), transparent 55%),
-            radial-gradient(ellipse 60% 80% at 100% 100%, rgba(136, 145, 199, 0.16), transparent 60%),
+            radial-gradient(ellipse 60% 80% at 100% 100%, rgba(168, 168, 168, 0.16), transparent 60%),
-            linear-gradient(135deg, rgba(14, 13, 22, 0.95), rgba(6, 6, 10, 0.97));
+            linear-gradient(135deg, rgba(18, 18, 18, 0.95), rgba(8, 8, 8, 0.97));
           box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
         }
         .ind-hero-glow {
@@ -177,14 +177,14 @@ export default function IndustriesPage() {
         .ind-hero-glow-b {
           position: absolute; width: 460px; height: 460px; border-radius: 999px;
           bottom: -200px; left: -150px;
-          background: radial-gradient(circle, rgba(74, 102, 216, 0.32), transparent 70%);
+          background: radial-gradient(circle, rgba(145, 145, 145, 0.32), transparent 70%);
           filter: blur(110px); opacity: 0.5; pointer-events: none;
         }
         .ind-hero-grid {
           position: absolute; inset: 0;
           background:
-            linear-gradient(rgba(74, 102, 216, 0.05) 1px, transparent 1px),
+            linear-gradient(rgba(145, 145, 145, 0.05) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(74, 102, 216, 0.05) 1px, transparent 1px);
+            linear-gradient(90deg, rgba(145, 145, 145, 0.05) 1px, transparent 1px);
           background-size: 56px 56px;
           mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 25%, transparent 80%);
           -webkit-mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 25%, transparent 80%);
@@ -203,8 +203,8 @@ export default function IndustriesPage() {
           width: fit-content;
         }
         .ind-dot {
-          width: 7px; height: 7px; border-radius: 999px; background: #DEE0F0;
+          width: 7px; height: 7px; border-radius: 999px; background: #e7e7e7;
-          box-shadow: 0 0 14px rgba(222, 224, 240, 0.85);
+          box-shadow: 0 0 14px rgba(231, 231, 231, 0.85);
           animation: ind-pulse 2.2s ease-in-out infinite;
         }
         @keyframes ind-pulse {
@@ -218,7 +218,7 @@ export default function IndustriesPage() {
         }
         .ind-hero-title .text-gradient { font-weight: 500; }
         .ind-hero-sub {
-          margin: 0; color: #DEE0F0;
+          margin: 0; color: #e7e7e7;
           font-size: clamp(0.95rem, 1.8vw, 1.1rem); line-height: 1.65; max-width: 560px;
         }
 
@@ -230,8 +230,8 @@ export default function IndustriesPage() {
           aspect-ratio: 4 / 3;
           border-radius: 20px;
           overflow: hidden;
-          border: 1px solid color-mix(in srgb, var(--acc) 35%, rgba(74, 102, 216, 0.20));
+          border: 1px solid color-mix(in srgb, var(--acc) 35%, rgba(145, 145, 145, 0.20));
-          background: #0a0a0e;
+          background: #0c0c0c;
           box-shadow:
             0 22px 60px rgba(0, 0, 0, 0.55),
             inset 0 1px 0 rgba(255, 255, 255, 0.05),
@@ -243,12 +243,12 @@ export default function IndustriesPage() {
           grid-template-columns: 1fr 1fr;
           grid-template-rows: 1fr 1fr;
           gap: 2px;
-          background: rgba(74, 102, 216, 0.25);
+          background: rgba(145, 145, 145, 0.25);
         }
         .ind-collage-tile {
           position: relative;
           overflow: hidden;
-          background: #0a0a0e;
+          background: #0c0c0c;
         }
         .ind-collage-tile :global(img) {
           transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
@@ -261,7 +261,7 @@ export default function IndustriesPage() {
         .ind-collage-overlay {
           position: absolute; inset: 0;
           background:
-            linear-gradient(180deg, rgba(10, 10, 14, 0.10) 0%, rgba(10, 10, 14, 0.55) 100%),
+            linear-gradient(180deg, rgba(12, 12, 12, 0.10) 0%, rgba(12, 12, 12, 0.55) 100%),
             radial-gradient(ellipse 100% 70% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 65%);
           pointer-events: none;
         }
@@ -283,19 +283,19 @@ export default function IndustriesPage() {
           justify-content: space-between;
           gap: 0.6rem;
           padding: 0.9rem 1.05rem;
-          border-top: 1px solid rgba(222, 224, 240, 0.10);
+          border-top: 1px solid rgba(231, 231, 231, 0.10);
-          background: linear-gradient(180deg, rgba(10, 10, 14, 0.0), rgba(10, 10, 14, 0.65));
+          background: linear-gradient(180deg, rgba(12, 12, 12, 0.0), rgba(12, 12, 12, 0.65));
           backdrop-filter: blur(6px);
           -webkit-backdrop-filter: blur(6px);
         }
         .ind-mono {
           font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-          font-size: 0.6rem; letter-spacing: 0.3em; font-weight: 800; color: #DEE0F0;
+          font-size: 0.6rem; letter-spacing: 0.3em; font-weight: 800; color: #e7e7e7;
         }
-        .ind-live { color: #7FD6D0; display: inline-flex; align-items: center; gap: 0.4rem; }
+        .ind-live { color: #ababab; display: inline-flex; align-items: center; gap: 0.4rem; }
         .ind-live-dot {
-          width: 7px; height: 7px; border-radius: 999px; background: #7FD6D0;
+          width: 7px; height: 7px; border-radius: 999px; background: #ababab;
-          box-shadow: 0 0 10px rgba(127, 214, 208, 0.7);
+          box-shadow: 0 0 10px rgba(171, 171, 171, 0.7);
         }
 
         @media (min-width: 920px) {
@@ -321,16 +321,16 @@ export default function IndustriesPage() {
           gap: 0.75rem;
           padding: 0.85rem 1rem;
           border-radius: 14px;
-          border: 1px solid rgba(120, 140, 255, 0.22);
+          border: 1px solid rgba(188, 188, 188, 0.22);
-          background: linear-gradient(135deg, rgba(80, 110, 255, 0.10), rgba(255, 255, 255, 0.03));
+          background: linear-gradient(135deg, rgba(168, 168, 168, 0.10), rgba(255, 255, 255, 0.03));
           align-items: center;
         }
         .ind-trust-icon {
           display: inline-flex; align-items: center; justify-content: center;
           width: 32px; height: 32px; border-radius: 10px;
-          color: #DEE0F0;
+          color: #e7e7e7;
-          background: rgba(74, 102, 216, 0.18);
+          background: rgba(145, 145, 145, 0.18);
-          border: 1px solid rgba(74, 102, 216, 0.45);
+          border: 1px solid rgba(145, 145, 145, 0.45);
         }
         .ind-trust-label {
           display: block;
@@ -338,7 +338,7 @@ export default function IndustriesPage() {
           letter-spacing: -0.005em;
         }
         .ind-trust-sub {
-          display: block; font-size: 0.7rem; color: #8891C7; margin-top: 0.1rem;
+          display: block; font-size: 0.7rem; color: #a8a8a8; margin-top: 0.1rem;
         }
         @media (min-width: 820px) {
           .ind-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
@@ -356,23 +356,23 @@ export default function IndustriesPage() {
           display: flex; flex-direction: column; gap: 0.25rem;
           padding: 0.95rem 1rem;
           border-radius: 16px;
-          border: 1px solid color-mix(in srgb, var(--acc) 28%, rgba(120, 140, 255, 0.18));
+          border: 1px solid color-mix(in srgb, var(--acc) 28%, rgba(188, 188, 188, 0.18));
           background:
             radial-gradient(ellipse 70% 100% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 65%),
-            linear-gradient(135deg, rgba(80, 110, 255, 0.10), rgba(255, 255, 255, 0.03));
+            linear-gradient(135deg, rgba(168, 168, 168, 0.10), rgba(255, 255, 255, 0.03));
           overflow: hidden;
           transition: border-color 0.3s, transform 0.3s;
         }
         .ind-proof-card:hover {
           transform: translateY(-2px);
-          border-color: color-mix(in srgb, var(--acc) 55%, rgba(120, 140, 255, 0.35));
+          border-color: color-mix(in srgb, var(--acc) 55%, rgba(188, 188, 188, 0.35));
         }
         .ind-proof-value {
           font-size: clamp(1.05rem, 2.6vw, 1.5rem);
           font-weight: 600;
           letter-spacing: -0.025em;
           line-height: 1.1;
-          background: linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--acc) 65%, #B5BDDB));
+          background: linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--acc) 65%, #c8c8c8));
           -webkit-background-clip: text;
           background-clip: text;
           color: transparent;
@@ -382,7 +382,7 @@ export default function IndustriesPage() {
           letter-spacing: 0.2em;
           text-transform: uppercase;
           font-weight: 700;
-          color: #A6B2D8;
+          color: #bfbfbf;
         }
         @media (min-width: 720px) {
           .ind-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }

src/app/layout.tsx

@@ -45,7 +45,7 @@ export const metadata: Metadata = {
 export const viewport: Viewport = {
   width: 'device-width',
   initialScale: 1,
-  themeColor: '#0a0a0c',
+  themeColor: '#0b0b0b',
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -160,7 +160,7 @@ function SectionHeading({ eyebrow, title, description }: { eyebrow: string; titl
         <span className="text-gradient" style={{ fontWeight: 500 }}>{title}</span>
       </h2>
       {description && (
-        <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
+        <p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
           {description}
         </p>
       )}

src/app/privacy-policy/page.tsx

@@ -6,35 +6,35 @@ export default function PrivacyPolicyPage() {
   return (
     <>
       <Navbar />
-      <div style={{ background: '#050508', minHeight: '100vh', color: '#ffffff', fontFamily: 'Inter, sans-serif' }}>
+      <div style={{ background: '#070707', minHeight: '100vh', color: '#ffffff', fontFamily: 'Inter, sans-serif' }}>
         <main style={{ maxWidth: '800px', margin: '0 auto', padding: '12rem 1.5rem 6rem', lineHeight: 1.8 }}>
           <h1 style={{ fontSize: '3rem', fontWeight: 200, marginBottom: '1rem', letterSpacing: '-0.03em' }}>Privacy <span style={{ color: 'var(--color-gold)', fontWeight: 500 }}>Policy</span></h1>
-          <p style={{ color: '#8891C7', fontSize: '1rem', marginBottom: '4rem' }}>Effective Date: {new Date().toLocaleDateString('en-AE')}</p>
+          <p style={{ color: '#a8a8a8', fontSize: '1rem', marginBottom: '4rem' }}>Effective Date: {new Date().toLocaleDateString('en-AE')}</p>
           
           <section style={{ marginBottom: '3rem' }}>
             <h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>1. Information We Collect</h2>
-            <p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
+            <p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
               At YS Lootah Robotics, we collect information you provide directly to us when you request information, use the G1 Customizer, or contact us. This includes your name, email address, phone number, and any other information you choose to provide in your message.
             </p>
           </section>
 
           <section style={{ marginBottom: '3rem' }}>
             <h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>2. How We Use Your Information</h2>
-            <p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
+            <p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
               We use the information we collect to respond to your inquiries, deliver our robotics enterprise solutions, maintain our dashboard, and communicate with you about your custom humanoid configurations.
             </p>
           </section>
 
           <section style={{ marginBottom: '3rem' }}>
             <h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>3. Data Security</h2>
-            <p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
+            <p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
               We implement robust security measures designed to protect your personal information. Your contact data is stored securely in our private databases strictly for administrative and operational purposes.
             </p>
           </section>
 
           <section style={{ marginBottom: '3rem' }}>
             <h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>4. Contact Us</h2>
-            <p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
+            <p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
               If you have questions or concerns about this Privacy Policy, please reach out to us at:
               <br/><br/>
               <strong>YS Lootah Robotics</strong><br/>

src/app/robots/CatalogClient.tsx

@@ -71,7 +71,7 @@ function CatalogInner() {
       </div>
 
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '0.5rem' }}>
-        <span style={{ color: '#8891C7', fontSize: '0.85rem' }}>
+        <span style={{ color: '#a8a8a8', fontSize: '0.85rem' }}>
           {filtered.length} robot{filtered.length === 1 ? '' : 's'} found
         </span>
         {(filter.brand !== 'all' || filter.category !== 'all') && (
@@ -81,7 +81,7 @@ function CatalogInner() {
             style={{
               background: 'transparent',
               border: 'none',
-              color: '#DEE0F0',
+              color: '#e7e7e7',
               fontSize: '0.78rem',
               letterSpacing: '0.14em',
               textTransform: 'uppercase',
@@ -95,9 +95,9 @@ function CatalogInner() {
       </div>
 
       {filtered.length === 0 ? (
-        <div className="card" style={{ padding: '2rem', textAlign: 'center', color: '#DEE0F0' }}>
+        <div className="card" style={{ padding: '2rem', textAlign: 'center', color: '#e7e7e7' }}>
           No robots match these filters yet. Try a different brand or category, or{' '}
-          <a href="/contact/" style={{ color: '#DEE0F0', textDecoration: 'none' }}>contact us</a> for tailored options.
+          <a href="/contact/" style={{ color: '#e7e7e7', textDecoration: 'none' }}>contact us</a> for tailored options.
         </div>
       ) : (
         <div
@@ -118,7 +118,7 @@ function CatalogInner() {
 
 export function CatalogClient() {
   return (
-    <Suspense fallback={<div className="card" style={{ padding: '2rem', color: '#DEE0F0' }}>Loading catalog…</div>}>
+    <Suspense fallback={<div className="card" style={{ padding: '2rem', color: '#e7e7e7' }}>Loading catalog…</div>}>
       <CatalogInner />
     </Suspense>
   );

src/app/robots/[slug]/page.tsx

@@ -43,12 +43,12 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
 
       <main style={{ paddingTop: 'clamp(6rem, 10vw, 8rem)', paddingBottom: 'clamp(4rem, 8vw, 6rem)' }}>
         <div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(3rem, 6vw, 5rem)' }}>
-          <nav style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', fontSize: '0.78rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: '#8891C7' }}>
+          <nav style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', fontSize: '0.78rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: '#a8a8a8' }}>
-            <Link href="/" style={{ color: '#8891C7', textDecoration: 'none' }}>Home</Link>
+            <Link href="/" style={{ color: '#a8a8a8', textDecoration: 'none' }}>Home</Link>
             <span>/</span>
-            <Link href="/robots/" style={{ color: '#8891C7', textDecoration: 'none' }}>Robots</Link>
+            <Link href="/robots/" style={{ color: '#a8a8a8', textDecoration: 'none' }}>Robots</Link>
             <span>/</span>
-            <span style={{ color: '#DEE0F0' }}>{robot.name}</span>
+            <span style={{ color: '#e7e7e7' }}>{robot.name}</span>
           </nav>
 
           <section
@@ -73,8 +73,8 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
                     padding: '0.3rem 0.55rem',
                     borderRadius: 999,
                     background: 'rgba(5, 5, 5,0.6)',
-                    border: '1px solid rgba(39, 63, 148,0.2)',
+                    border: '1px solid rgba(94, 94, 94, 0.2)',
-                    color: '#8891C7',
+                    color: '#a8a8a8',
                     fontSize: '0.62rem',
                     letterSpacing: '0.2em',
                     textTransform: 'uppercase',
@@ -94,8 +94,8 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
                   {robot.name}
                 </span>
               </h1>
-              <p style={{ margin: 0, color: '#DEE0F0', fontSize: '1.05rem', lineHeight: 1.5 }}>{robot.tagline}</p>
+              <p style={{ margin: 0, color: '#e7e7e7', fontSize: '1.05rem', lineHeight: 1.5 }}>{robot.tagline}</p>
-              <p style={{ margin: 0, color: '#DEE0F0', fontSize: '1rem', lineHeight: 1.7 }}>{robot.longDescription}</p>
+              <p style={{ margin: 0, color: '#e7e7e7', fontSize: '1rem', lineHeight: 1.7 }}>{robot.longDescription}</p>
 
               <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.625rem' }}>
                 <a className="btn btn-primary" href="#inquire">Request quotation</a>
@@ -123,14 +123,14 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
               <Block title="Key features">
                 <ul style={{ margin: 0, paddingLeft: '1.1rem', display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
                   {robot.features.map((f) => (
-                    <li key={f} style={{ color: '#DEE0F0', lineHeight: 1.6 }}>{f}</li>
+                    <li key={f} style={{ color: '#e7e7e7', lineHeight: 1.6 }}>{f}</li>
                   ))}
                 </ul>
               </Block>
               <Block title="Use cases">
                 <ul style={{ margin: 0, paddingLeft: '1.1rem', display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
                   {robot.useCases.map((u) => (
-                    <li key={u} style={{ color: '#DEE0F0', lineHeight: 1.6 }}>{u}</li>
+                    <li key={u} style={{ color: '#e7e7e7', lineHeight: 1.6 }}>{u}</li>
                   ))}
                 </ul>
               </Block>
@@ -156,7 +156,7 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
                       Request a quotation for {robot.name}.
                     </span>
                   </h2>
-                  <p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7 }}>
+                  <p style={{ margin: 0, color: '#e7e7e7', lineHeight: 1.7 }}>
                     Tell us about your venue, timeline, and use case. We will respond with availability, configuration options, and pricing for the UAE.
                   </p>
                 </div>
@@ -166,7 +166,7 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
               <div className="card" style={{ padding: 'clamp(1.5rem, 4vw, 2.25rem)', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                 <span className="eyebrow">Talk to an advisor</span>
                 <h3 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>Prefer a quick conversation?</h3>
-                <p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7 }}>
+                <p style={{ margin: 0, color: '#e7e7e7', lineHeight: 1.7 }}>
                   Call our Dubai team or message us on WhatsApp we will share availability and demo slots for {robot.name}.
                 </p>
                 <a className="btn btn-ghost" href="tel:+971559482728">Call +971 55 948 2728</a>

src/app/robots/page.tsx

@@ -146,41 +146,41 @@ export default function RobotsPage() {
           list-style: none; margin: 0; padding: 0;
           display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
           font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
-          color: #8891C7;
+          color: #a8a8a8;
         }
-        .rb-crumbs a { color: #8891C7; text-decoration: none; transition: color 0.25s; }
+        .rb-crumbs a { color: #a8a8a8; text-decoration: none; transition: color 0.25s; }
         .rb-crumbs a:hover { color: #FFFFFF; }
         .rb-crumbs li[aria-current="page"] { color: #FFFFFF; }
-        .rb-crumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #4a4f63; }
+        .rb-crumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #575757; }
 
         /* HERO */
         .rb-hero {
           position: relative; overflow: hidden;
           border-radius: 26px;
-          border: 1px solid rgba(74, 102, 216, 0.20);
+          border: 1px solid rgba(145, 145, 145, 0.20);
           background:
-            radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.20), transparent 55%),
+            radial-gradient(ellipse 70% 100% at 0% 0%, rgba(127, 127, 127, 0.20), transparent 55%),
-            radial-gradient(ellipse 60% 80% at 100% 100%, rgba(136, 145, 199, 0.16), transparent 60%),
+            radial-gradient(ellipse 60% 80% at 100% 100%, rgba(168, 168, 168, 0.16), transparent 60%),
-            linear-gradient(135deg, rgba(14, 13, 22, 0.95), rgba(6, 6, 10, 0.97));
+            linear-gradient(135deg, rgba(18, 18, 18, 0.95), rgba(8, 8, 8, 0.97));
           box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
         }
         .rb-hero-glow {
           position: absolute; width: 580px; height: 580px; border-radius: 999px;
           top: -220px; right: -180px;
-          background: radial-gradient(circle, rgba(120, 140, 255, 0.34), transparent 70%);
+          background: radial-gradient(circle, rgba(188, 188, 188, 0.34), transparent 70%);
           filter: blur(120px); opacity: 0.55; pointer-events: none;
         }
         .rb-hero-glow-b {
           position: absolute; width: 460px; height: 460px; border-radius: 999px;
           bottom: -200px; left: -150px;
-          background: radial-gradient(circle, rgba(74, 102, 216, 0.30), transparent 70%);
+          background: radial-gradient(circle, rgba(145, 145, 145, 0.30), transparent 70%);
           filter: blur(110px); opacity: 0.45; pointer-events: none;
         }
         .rb-hero-grid {
           position: absolute; inset: 0;
           background:
-            linear-gradient(rgba(74, 102, 216, 0.05) 1px, transparent 1px),
+            linear-gradient(rgba(145, 145, 145, 0.05) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(74, 102, 216, 0.05) 1px, transparent 1px);
+            linear-gradient(90deg, rgba(145, 145, 145, 0.05) 1px, transparent 1px);
           background-size: 56px 56px;
           mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 25%, transparent 80%);
           -webkit-mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 25%, transparent 80%);
@@ -199,8 +199,8 @@ export default function RobotsPage() {
           width: fit-content;
         }
         .rb-dot {
-          width: 7px; height: 7px; border-radius: 999px; background: #DEE0F0;
+          width: 7px; height: 7px; border-radius: 999px; background: #e7e7e7;
-          box-shadow: 0 0 14px rgba(222, 224, 240, 0.85);
+          box-shadow: 0 0 14px rgba(231, 231, 231, 0.85);
         }
         .rb-hero-title {
           margin: 0;
@@ -210,7 +210,7 @@ export default function RobotsPage() {
         }
         .rb-hero-title :global(.text-gradient) { font-weight: 500; }
         .rb-hero-sub {
-          margin: 0; color: #DEE0F0;
+          margin: 0; color: #e7e7e7;
           font-size: clamp(0.95rem, 1.8vw, 1.08rem);
           line-height: 1.65;
           max-width: 600px;
@@ -226,9 +226,9 @@ export default function RobotsPage() {
           display: inline-flex; align-items: center;
           padding: 0.45rem 0.85rem;
           border-radius: 999px;
-          border: 1px solid rgba(222, 224, 240, 0.14);
+          border: 1px solid rgba(231, 231, 231, 0.14);
-          background: rgba(20, 19, 26, 0.6);
+          background: rgba(23, 23, 23, 0.6);
-          color: #DEE0F0;
+          color: #e7e7e7;
           font-size: 0.7rem; font-weight: 700;
           letter-spacing: 0.12em; text-transform: uppercase;
           text-decoration: none;
@@ -236,8 +236,8 @@ export default function RobotsPage() {
         }
         .rb-jump li a:hover {
           color: #FFFFFF;
-          border-color: rgba(74, 102, 216, 0.5);
+          border-color: rgba(145, 145, 145, 0.5);
-          background: rgba(28, 27, 38, 0.7);
+          background: rgba(33, 33, 33, 0.7);
         }
 
         /* HERO STATS */
@@ -251,9 +251,9 @@ export default function RobotsPage() {
           display: flex; flex-direction: column; gap: 0.3rem;
           padding: 0.95rem 1rem;
           border-radius: 16px;
-          border: 1px solid rgba(120, 140, 255, 0.22);
+          border: 1px solid rgba(188, 188, 188, 0.22);
           background:
-            linear-gradient(135deg, rgba(80, 110, 255, 0.12), rgba(255, 255, 255, 0.03));
+            linear-gradient(135deg, rgba(168, 168, 168, 0.12), rgba(255, 255, 255, 0.03));
           overflow: hidden;
           min-height: 86px;
           transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
@@ -261,22 +261,22 @@ export default function RobotsPage() {
         .rb-stat::before {
           content: ''; position: absolute;
           top: 0; right: 14px; width: 24px; height: 1px;
-          background: linear-gradient(90deg, transparent, rgba(180, 195, 255, 0.55));
+          background: linear-gradient(90deg, transparent, rgba(218, 218, 218, 0.55));
         }
         .rb-stat:hover {
-          border-color: rgba(120, 140, 255, 0.45);
+          border-color: rgba(188, 188, 188, 0.45);
           transform: translateY(-1px);
-          box-shadow: 0 10px 22px rgba(0, 0, 0, 0.38), 0 0 18px rgba(74, 102, 216, 0.18);
+          box-shadow: 0 10px 22px rgba(0, 0, 0, 0.38), 0 0 18px rgba(145, 145, 145, 0.18);
         }
         .rb-stat-value {
           font-size: clamp(1.55rem, 2.6vw, 2rem);
           font-weight: 500; letter-spacing: -0.025em; line-height: 1;
-          background: linear-gradient(180deg, #FFFFFF, #B5BDDB);
+          background: linear-gradient(180deg, #FFFFFF, #c8c8c8);
           -webkit-background-clip: text; background-clip: text; color: transparent;
         }
         .rb-stat-label {
           font-size: 0.64rem; letter-spacing: 0.22em;
-          text-transform: uppercase; font-weight: 700; color: #A6B2D8;
+          text-transform: uppercase; font-weight: 700; color: #bfbfbf;
         }
 
         @media (min-width: 920px) {
@@ -301,7 +301,7 @@ export default function RobotsPage() {
         }
         .rb-section-head h2 :global(.text-gradient) { font-weight: 500; }
         .rb-section-head p {
-          margin: 0; color: #DEE0F0;
+          margin: 0; color: #e7e7e7;
           font-size: clamp(0.92rem, 2vw, 1.02rem);
           line-height: 1.65;
         }

src/app/terms-of-service/page.tsx

@@ -6,35 +6,35 @@ export default function TermsOfServicePage() {
   return (
     <>
       <Navbar />
-      <div style={{ background: '#050508', minHeight: '100vh', color: '#ffffff', fontFamily: 'Inter, sans-serif' }}>
+      <div style={{ background: '#070707', minHeight: '100vh', color: '#ffffff', fontFamily: 'Inter, sans-serif' }}>
         <main style={{ maxWidth: '800px', margin: '0 auto', padding: '12rem 1.5rem 6rem', lineHeight: 1.8 }}>
           <h1 style={{ fontSize: '3rem', fontWeight: 200, marginBottom: '1rem', letterSpacing: '-0.03em' }}>Terms of <span style={{ color: 'var(--color-gold)', fontWeight: 500 }}>Service</span></h1>
-          <p style={{ color: '#8891C7', fontSize: '1rem', marginBottom: '4rem' }}>Effective Date: {new Date().toLocaleDateString('en-AE')}</p>
+          <p style={{ color: '#a8a8a8', fontSize: '1rem', marginBottom: '4rem' }}>Effective Date: {new Date().toLocaleDateString('en-AE')}</p>
           
           <section style={{ marginBottom: '3rem' }}>
             <h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>1. Acceptance of Terms</h2>
-            <p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
+            <p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
               By accessing and utilizing the YS Lootah Robotics web platform and the G1 Configurator, you accept and agree to be bound by the terms and provisions of this agreement.
             </p>
           </section>
 
           <section style={{ marginBottom: '3rem' }}>
             <h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>2. Use of the Site & Configurator</h2>
-            <p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
+            <p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
               The 3D G1 Configurator is provided for informational and demonstrative purposes to showcase the capabilities of YS Lootah technologies. You agree to use this site strictly for lawful purposes resulting in enterprise robotics inquiries and configurations.
             </p>
           </section>
 
           <section style={{ marginBottom: '3rem' }}>
             <h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>3. Intellectual Property Rights</h2>
-            <p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
+            <p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
               All original content on this website, including but not limited to text, graphics, 3D models (GLB files), logos, and software, is the property of YS Lootah Robotics and is protected by United Arab Emirates and international copyright laws.
             </p>
           </section>
           
           <section style={{ marginBottom: '3rem' }}>
             <h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>4. Disclaimer of Warranties</h2>
-            <p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
+            <p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
               The materials on our platform are provided "as is". We make no warranties, expressed or implied, and hereby disclaim to the fullest extent permitted by law all warranties regarding the immediate enterprise availability of the rendered concepts displayed in the Configurator.
             </p>
           </section>

src/components/CheckoutOverlay.tsx

@@ -88,13 +88,13 @@ export function CheckoutOverlay() {
         overflowY: 'auto',
         margin: '1rem',
         background: 'rgba(255, 255, 255, 0.95)',
-        border: '1px solid rgba(59, 130, 246, 0.08)',
+        border: '1px solid rgba(153, 153, 153, 0.08)',
         borderRadius: '1rem',
-        boxShadow: '0 24px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(59, 130, 246, 0.1)',
+        boxShadow: '0 24px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(153, 153, 153, 0.1)',
       }}>
         {/* Header with progress */}
         {step !== 'confirmed' && (
-          <div style={{ padding: '1.25rem 1.5rem', borderBottom: '1px solid rgba(59, 130, 246, 0.1)' }}>
+          <div style={{ padding: '1.25rem 1.5rem', borderBottom: '1px solid rgba(153, 153, 153, 0.1)' }}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
               <button
                 onClick={handleBack}
@@ -103,7 +103,7 @@ export function CheckoutOverlay() {
                   borderRadius: '0.375rem',
                   border: '1px solid rgba(0, 0, 0, 0.08)',
                   background: 'transparent',
-                  color: '#8891C7',
+                  color: '#a8a8a8',
                   cursor: 'pointer',
                   fontSize: '0.75rem',
                   transition: 'all 0.2s ease',
@@ -111,7 +111,7 @@ export function CheckoutOverlay() {
               >
                 Back
               </button>
-              <h2 style={{ fontSize: '0.9rem', fontWeight: 600, color: '#0a0a0c', margin: 0 }}>
+              <h2 style={{ fontSize: '0.9rem', fontWeight: 600, color: '#0b0b0b', margin: 0 }}>
                 Checkout
               </h2>
               <button
@@ -122,7 +122,7 @@ export function CheckoutOverlay() {
                   borderRadius: '50%',
                   border: '1px solid rgba(0, 0, 0, 0.08)',
                   background: 'transparent',
-                  color: '#8891C7',
+                  color: '#a8a8a8',
                   cursor: 'pointer',
                   fontSize: '0.9rem',
                   display: 'flex',
@@ -147,15 +147,15 @@ export function CheckoutOverlay() {
                       height: '3px',
                       borderRadius: '2px',
                       background: isComplete
-                        ? '#3b82f6'
+                        ? '#999999'
                         : isActive
-                          ? 'linear-gradient(90deg, #3b82f6, rgba(59, 130, 246, 0.2))'
+                          ? 'linear-gradient(90deg, #999999, rgba(153, 153, 153, 0.2))'
                           : 'rgba(0, 0, 0, 0.06)',
                       transition: 'all 0.3s ease',
                     }} />
                     <span style={{
                       fontSize: '0.65rem',
-                      color: isActive ? '#2563eb' : isComplete ? '#3b82f6' : '#6a73a5',
+                      color: isActive ? '#888888' : isComplete ? '#999999' : '#888888',
                       fontWeight: isActive ? 600 : 400,
                       textAlign: 'center',
                     }}>
@@ -179,7 +179,7 @@ export function CheckoutOverlay() {
                 appearance: {
                   theme: 'stripe',
                   variables: {
-                    colorPrimary: '#2563eb',
+                    colorPrimary: '#888888',
                     borderRadius: '0.375rem',
                     fontFamily: 'inherit',
                   },
@@ -204,9 +204,9 @@ export function CheckoutOverlay() {
                     style={{
                       padding: '0.5rem 1rem',
                       borderRadius: '0.375rem',
-                      border: '1px solid rgba(59, 130, 246, 0.5)',
+                      border: '1px solid rgba(153, 153, 153, 0.5)',
-                      background: 'rgba(59, 130, 246, 0.08)',
+                      background: 'rgba(153, 153, 153, 0.08)',
-                      color: '#2563eb',
+                      color: '#888888',
                       cursor: 'pointer',
                       fontSize: '0.8rem',
                       fontWeight: 600,
@@ -216,7 +216,7 @@ export function CheckoutOverlay() {
                   </button>
                 </div>
               ) : (
-                <span style={{ color: '#8891C7' }}>Initializing secure payment...</span>
+                <span style={{ color: '#a8a8a8' }}>Initializing secure payment...</span>
               )}
             </div>
           ) : null}

src/components/ConfigPanel.tsx

@@ -87,17 +87,17 @@ export function ConfigPanel() {
                   padding: '0.65rem 0.75rem',
                   borderRadius: '12px',
                   border: isActive
-                    ? '1px solid rgba(120, 140, 255, 0.55)'
+                    ? '1px solid rgba(188, 188, 188, 0.55)'
-                    : '1px solid rgba(222, 224, 240, 0.10)',
+                    : '1px solid rgba(231, 231, 231, 0.10)',
                   background: isActive
-                    ? 'linear-gradient(135deg, rgba(80, 110, 255, 0.16), rgba(28, 27, 38, 0.85))'
+                    ? 'linear-gradient(135deg, rgba(168, 168, 168, 0.16), rgba(33, 33, 33, 0.85))'
-                    : 'linear-gradient(135deg, rgba(22, 21, 30, 0.78), rgba(14, 13, 20, 0.92))',
+                    : 'linear-gradient(135deg, rgba(26, 26, 26, 0.78), rgba(17, 17, 17, 0.92))',
                   cursor: 'pointer',
                   transition: 'all 0.25s ease',
                   textAlign: 'left',
                   width: '100%',
                   boxShadow: isActive
-                    ? '0 8px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(74, 102, 216, 0.22)'
+                    ? '0 8px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(145, 145, 145, 0.22)'
                     : '0 4px 10px rgba(0, 0, 0, 0.3)',
                 }}
               >
@@ -123,7 +123,7 @@ export function ConfigPanel() {
                   <div style={{
                     fontSize: '0.85rem',
                     fontWeight: isActive ? 600 : 500,
-                    color: isActive ? '#FFFFFF' : '#DEE0F0',
+                    color: isActive ? '#FFFFFF' : '#e7e7e7',
                     marginBottom: '2px',
                     letterSpacing: '-0.005em',
                   }}>
@@ -131,7 +131,7 @@ export function ConfigPanel() {
                   </div>
                   <div style={{
                     fontSize: '0.7rem',
-                    color: isActive ? '#A6B2D8' : '#8891C7',
+                    color: isActive ? '#bfbfbf' : '#a8a8a8',
                     lineHeight: 1.35,
                   }}>
                     {persona.description}
@@ -141,22 +141,22 @@ export function ConfigPanel() {
                 {isActive && loadingPersona === persona.id ? (
                   <div style={{
                     width: '22px', height: '22px', borderRadius: '50%',
-                    border: '2px solid rgba(120, 140, 255, 0.22)',
+                    border: '2px solid rgba(188, 188, 188, 0.22)',
-                    borderTopColor: '#7FD6D0',
+                    borderTopColor: '#ababab',
                     animation: 'spin 0.8s linear infinite',
                     flexShrink: 0,
                   }} />
                 ) : isActive ? (
                   <div style={{
                     width: '22px', height: '22px', borderRadius: '50%',
-                    background: 'rgba(127, 214, 208, 0.18)',
+                    background: 'rgba(171, 171, 171, 0.18)',
-                    border: '1px solid rgba(127, 214, 208, 0.4)',
+                    border: '1px solid rgba(171, 171, 171, 0.4)',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
                     flexShrink: 0,
                   }}>
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#7FD6D0" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round">
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#ababab" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round">
                       <polyline points="20 6 9 17 4 12" />
                     </svg>
                   </div>
@@ -183,23 +183,23 @@ export function ConfigPanel() {
                   padding: '0.7rem 0.8rem',
                   borderRadius: '12px',
                   border: isActive
-                    ? '1px solid rgba(120, 140, 255, 0.55)'
+                    ? '1px solid rgba(188, 188, 188, 0.55)'
-                    : '1px solid rgba(222, 224, 240, 0.10)',
+                    : '1px solid rgba(231, 231, 231, 0.10)',
                   background: isActive
-                    ? 'linear-gradient(135deg, rgba(80, 110, 255, 0.16), rgba(28, 27, 38, 0.85))'
+                    ? 'linear-gradient(135deg, rgba(168, 168, 168, 0.16), rgba(33, 33, 33, 0.85))'
-                    : 'linear-gradient(135deg, rgba(22, 21, 30, 0.78), rgba(14, 13, 20, 0.92))',
+                    : 'linear-gradient(135deg, rgba(26, 26, 26, 0.78), rgba(17, 17, 17, 0.92))',
                   cursor: 'pointer',
                   transition: 'all 0.25s ease',
                   textAlign: 'left',
                   boxShadow: isActive
-                    ? '0 8px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(74, 102, 216, 0.22)'
+                    ? '0 8px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(145, 145, 145, 0.22)'
                     : '0 4px 10px rgba(0, 0, 0, 0.28)',
                 }}
               >
                 <div style={{
                   fontSize: '0.85rem',
                   fontWeight: isActive ? 600 : 500,
-                  color: isActive ? '#FFFFFF' : '#DEE0F0',
+                  color: isActive ? '#FFFFFF' : '#e7e7e7',
                   marginBottom: '3px',
                   letterSpacing: '-0.005em',
                 }}>
@@ -207,7 +207,7 @@ export function ConfigPanel() {
                 </div>
                 <div style={{
                   fontSize: '0.68rem',
-                  color: '#8891C7',
+                  color: '#a8a8a8',
                   lineHeight: 1.35,
                 }}>
                   {opt.description}
@@ -260,8 +260,8 @@ function ColorInput({ label, value, onChange }: { label: string; value: string;
         gap: '0.75rem',
         padding: '0.6rem 0.7rem',
         borderRadius: '12px',
-        border: '1px solid rgba(222, 224, 240, 0.10)',
+        border: '1px solid rgba(231, 231, 231, 0.10)',
-        background: 'linear-gradient(135deg, rgba(22, 21, 30, 0.78), rgba(14, 13, 20, 0.92))',
+        background: 'linear-gradient(135deg, rgba(26, 26, 26, 0.78), rgba(17, 17, 17, 0.92))',
       }}
     >
       <label
@@ -274,7 +274,7 @@ function ColorInput({ label, value, onChange }: { label: string; value: string;
           width: '40px',
           height: '40px',
           borderRadius: '10px',
-          border: '1px solid rgba(120, 140, 255, 0.45)',
+          border: '1px solid rgba(188, 188, 188, 0.45)',
           background: value,
           backgroundImage: 'linear-gradient(135deg, rgba(255,255,255,0.18), rgba(0,0,0,0.18))',
           cursor: 'pointer',
@@ -306,7 +306,7 @@ function ColorInput({ label, value, onChange }: { label: string; value: string;
       </label>
       <div style={{ flex: 1 }}>
         <div style={{ fontSize: '0.82rem', color: '#FFFFFF', fontWeight: 600, marginBottom: '2px', letterSpacing: '-0.005em' }}>{label}</div>
-        <div style={{ fontSize: '0.7rem', color: '#8891C7', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', letterSpacing: '0.08em' }}>{value.toUpperCase()}</div>
+        <div style={{ fontSize: '0.7rem', color: '#a8a8a8', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', letterSpacing: '0.08em' }}>{value.toUpperCase()}</div>
       </div>
     </div>
   );
@@ -315,18 +315,18 @@ function ColorInput({ label, value, onChange }: { label: string; value: string;
 const sectionWrap: React.CSSProperties = {
   borderRadius: '14px',
   padding: '0.9rem 0.95rem 1rem',
-  border: '1px solid rgba(222, 224, 240, 0.08)',
+  border: '1px solid rgba(231, 231, 231, 0.08)',
-  background: 'linear-gradient(180deg, rgba(20, 19, 26, 0.55), rgba(10, 10, 14, 0.75))',
+  background: 'linear-gradient(180deg, rgba(23, 23, 23, 0.55), rgba(12, 12, 12, 0.75))',
 };
 
 const sectionTitleStyle: React.CSSProperties = {
   fontSize: '0.65rem',
   fontWeight: 800,
-  color: '#8891C7',
+  color: '#a8a8a8',
   textTransform: 'uppercase',
   letterSpacing: '0.24em',
   margin: 0,
   paddingBottom: '0.6rem',
-  borderBottom: '1px solid rgba(74, 102, 216, 0.18)',
+  borderBottom: '1px solid rgba(145, 145, 145, 0.18)',
   marginBottom: '0.85rem',
 };

src/components/ConfiguratorSection.tsx

@@ -22,7 +22,7 @@ export function ConfiguratorSection() {
         width: '100%',
         height: '100vh',
         background:
-          'radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.10), transparent 55%), radial-gradient(ellipse 60% 80% at 100% 100%, rgba(136, 145, 199, 0.08), transparent 60%), linear-gradient(135deg, rgba(14, 13, 22, 0.98), rgba(6, 6, 10, 0.99))',
+          'radial-gradient(ellipse 70% 100% at 0% 0%, rgba(127, 127, 127, 0.10), transparent 55%), radial-gradient(ellipse 60% 80% at 100% 100%, rgba(168, 168, 168, 0.08), transparent 60%), linear-gradient(135deg, rgba(18, 18, 18, 0.98), rgba(8, 8, 8, 0.99))',
       }}
       aria-label={t('app.title')}
     >
@@ -41,10 +41,10 @@ export function ConfiguratorSection() {
             width: '420px',
             height: '100%',
             background:
-              'linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96))',
+              'linear-gradient(180deg, rgba(26, 26, 26, 0.92), rgba(12, 12, 12, 0.96))',
             backdropFilter: 'blur(20px)',
             WebkitBackdropFilter: 'blur(20px)',
-            borderRight: '1px solid rgba(74, 102, 216, 0.18)',
+            borderRight: '1px solid rgba(145, 145, 145, 0.18)',
             boxShadow: '4px 0 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04)',
             display: 'flex',
             flexDirection: 'column',
@@ -76,7 +76,7 @@ export function ConfiguratorSection() {
               style={{
                 width: '40px',
                 height: '4px',
-                backgroundColor: 'rgba(222, 224, 240, 0.18)',
+                backgroundColor: 'rgba(231, 231, 231, 0.18)',
                 borderRadius: '2px',
                 transition: 'width 0.2s, background-color 0.2s',
               }}
@@ -87,7 +87,7 @@ export function ConfiguratorSection() {
           <header
             style={{
               padding: '1rem 1.5rem 1.25rem',
-              borderBottom: '1px solid rgba(74, 102, 216, 0.16)',
+              borderBottom: '1px solid rgba(145, 145, 145, 0.16)',
               position: 'relative',
               zIndex: 1,
               display: 'flex',
@@ -100,7 +100,7 @@ export function ConfiguratorSection() {
                 fontSize: '0.58rem',
                 letterSpacing: '0.28em',
                 textTransform: 'uppercase',
-                color: '#8891C7',
+                color: '#a8a8a8',
                 fontWeight: 800,
                 display: 'inline-flex',
                 alignItems: 'center',
@@ -111,8 +111,8 @@ export function ConfiguratorSection() {
                 aria-hidden
                 style={{
                   width: 6, height: 6, borderRadius: 999,
-                  background: '#7FD6D0',
+                  background: '#ababab',
-                  boxShadow: '0 0 8px rgba(127, 214, 208, 0.7)',
+                  boxShadow: '0 0 8px rgba(171, 171, 171, 0.7)',
                 }}
               />
               Live build · Unitree G1
@@ -156,7 +156,7 @@ export function ConfiguratorSection() {
             width: '100%',
             height: '100%',
             background:
-              'radial-gradient(ellipse 100% 70% at 50% 45%, rgba(80, 110, 200, 0.22), transparent 70%), radial-gradient(ellipse 60% 24% at 50% 92%, rgba(220, 228, 245, 0.20), transparent 70%), linear-gradient(180deg, rgba(24, 26, 40, 0.98), rgba(12, 13, 22, 1))',
+              'radial-gradient(ellipse 100% 70% at 50% 45%, rgba(140, 140, 140, 0.22), transparent 70%), radial-gradient(ellipse 60% 24% at 50% 92%, rgba(233, 233, 233, 0.20), transparent 70%), linear-gradient(180deg, rgba(32, 32, 32, 0.98), rgba(17, 17, 17, 1))',
           }}
           role="main"
           aria-label={t('app.title')}
@@ -167,7 +167,7 @@ export function ConfiguratorSection() {
               position: 'absolute',
               inset: 0,
               backgroundImage:
-                'linear-gradient(rgba(74, 102, 216, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 102, 216, 0.06) 1px, transparent 1px)',
+                'linear-gradient(rgba(145, 145, 145, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(145, 145, 145, 0.06) 1px, transparent 1px)',
               backgroundSize: '56px 56px',
               maskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%)',
               WebkitMaskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%)',
@@ -185,7 +185,7 @@ export function ConfiguratorSection() {
                 alignItems: 'center',
                 justifyContent: 'center',
                 background:
-                  'radial-gradient(ellipse 60% 50% at 50% 50%, rgba(58, 85, 196, 0.18), transparent 70%), rgba(8, 8, 14, 0.95)',
+                  'radial-gradient(ellipse 60% 50% at 50% 50%, rgba(127, 127, 127, 0.18), transparent 70%), rgba(11, 11, 11, 0.95)',
                 zIndex: 10,
               }}
               role="status"
@@ -195,8 +195,8 @@ export function ConfiguratorSection() {
                 style={{
                   width: '52px',
                   height: '52px',
-                  border: '3px solid rgba(74, 102, 216, 0.18)',
+                  border: '3px solid rgba(145, 145, 145, 0.18)',
-                  borderTopColor: '#7FD6D0',
+                  borderTopColor: '#ababab',
                   borderRadius: '50%',
                   animation: 'spin 0.9s linear infinite',
                 }}
@@ -205,7 +205,7 @@ export function ConfiguratorSection() {
                 style={{
                   marginTop: '1.1rem',
                   fontSize: '0.7rem',
-                  color: '#8891C7',
+                  color: '#a8a8a8',
                   letterSpacing: '0.22em',
                   textTransform: 'uppercase',
                   fontWeight: 700,
@@ -231,8 +231,8 @@ export function ConfiguratorSection() {
       <style jsx>{`
         :global(.cfg-canvas button[aria-label="Capture 3D scene snapshot"]:hover),
         :global(.cfg-canvas button[aria-label="Share configuration link"]:hover) {
-          border-color: rgba(74, 102, 216, 0.7) !important;
+          border-color: rgba(145, 145, 145, 0.7) !important;
-          background: rgba(28, 27, 38, 0.88) !important;
+          background: rgba(33, 33, 33, 0.88) !important;
           color: #FFFFFF !important;
           transform: translateY(-1px) !important;
         }

src/components/FooterAndContact.tsx

@@ -56,11 +56,11 @@ export function FooterAndContact() {
             <div className="ft-logo-row">
               <span className="ft-logo">
                 <Image
-                  src="/images/brands/ys-lootah-robotics-logo.webp"
+                  src="/images/brands/lootah-mark-white.png"
                   alt="YS Lootah Robotics logo"
                   fill
                   sizes="46px"
-                  style={{ objectFit: 'cover' }}
+                  style={{ objectFit: 'contain' }}
                 />
               </span>
               <span className="ft-name-stack">
@@ -194,8 +194,8 @@ export function FooterAndContact() {
           position: relative;
           isolation: isolate;
           z-index: 10;
-          background: linear-gradient(180deg, #030307 0%, #020409 100%);
+          background: linear-gradient(180deg, #050505 0%, #060606 100%);
-          color: #DEE0F0;
+          color: #e7e7e7;
           overflow: hidden;
         }
         .ft-top-line {
@@ -204,16 +204,16 @@ export function FooterAndContact() {
           left: 12%;
           right: 12%;
           height: 1px;
-          background: linear-gradient(90deg, transparent, rgba(74, 102, 216, 0.6), transparent);
+          background: linear-gradient(90deg, transparent, rgba(145, 145, 145, 0.6), transparent);
-          box-shadow: 0 0 24px rgba(74, 102, 216, 0.35);
+          box-shadow: 0 0 24px rgba(145, 145, 145, 0.35);
           z-index: 1;
         }
         .ft-bg {
           position: absolute;
           inset: 0;
           background:
-            radial-gradient(ellipse 50% 60% at 20% 0%, rgba(58, 85, 196, 0.16), transparent 60%),
+            radial-gradient(ellipse 50% 60% at 20% 0%, rgba(127, 127, 127, 0.16), transparent 60%),
-            radial-gradient(ellipse 60% 70% at 90% 100%, rgba(136, 145, 199, 0.08), transparent 60%);
+            radial-gradient(ellipse 60% 70% at 90% 100%, rgba(168, 168, 168, 0.08), transparent 60%);
           pointer-events: none;
           z-index: 0;
         }
@@ -221,8 +221,8 @@ export function FooterAndContact() {
           position: absolute;
           inset: 0;
           background-image:
-            linear-gradient(rgba(199, 207, 230, 0.035) 1px, transparent 1px),
+            linear-gradient(rgba(215, 215, 215, 0.035) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(199, 207, 230, 0.035) 1px, transparent 1px);
+            linear-gradient(90deg, rgba(215, 215, 215, 0.035) 1px, transparent 1px);
           background-size: 56px 56px;
           mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, #000 30%, transparent 85%);
           -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, #000 30%, transparent 85%);
@@ -243,11 +243,11 @@ export function FooterAndContact() {
           gap: 1.25rem;
           padding: 1.4rem 1.5rem;
           border-radius: 18px;
-          border: 1px solid rgba(222, 224, 240, 0.12);
+          border: 1px solid rgba(231, 231, 231, 0.12);
           background:
-            radial-gradient(ellipse 60% 80% at 0% 50%, rgba(58, 85, 196, 0.18), transparent 60%),
+            radial-gradient(ellipse 60% 80% at 0% 50%, rgba(127, 127, 127, 0.18), transparent 60%),
-            radial-gradient(ellipse 50% 80% at 100% 50%, rgba(136, 145, 199, 0.1), transparent 60%),
+            radial-gradient(ellipse 50% 80% at 100% 50%, rgba(168, 168, 168, 0.1), transparent 60%),
-            linear-gradient(180deg, rgba(22, 21, 30, 0.7), rgba(10, 10, 14, 0.9));
+            linear-gradient(180deg, rgba(26, 26, 26, 0.7), rgba(12, 12, 12, 0.9));
           margin-bottom: clamp(2rem, 4vw, 3rem);
           backdrop-filter: blur(14px);
         }
@@ -257,7 +257,7 @@ export function FooterAndContact() {
           letter-spacing: 0.3em;
           text-transform: uppercase;
           font-weight: 800;
-          color: #8891C7;
+          color: #a8a8a8;
         }
         .ft-cta-title {
           margin: 0;
@@ -269,7 +269,7 @@ export function FooterAndContact() {
         }
         .ft-cta-desc {
           margin: 0;
-          color: #B5BDDB;
+          color: #c8c8c8;
           font-size: 0.92rem;
           line-height: 1.55;
           max-width: 520px;
@@ -294,7 +294,7 @@ export function FooterAndContact() {
           font-size: 0.66rem;
           letter-spacing: 0.26em;
           text-transform: uppercase;
-          color: #8891C7;
+          color: #a8a8a8;
           font-weight: 800;
         }
 
@@ -310,11 +310,7 @@ export function FooterAndContact() {
           position: relative;
           width: 46px;
           height: 46px;
-          border-radius: 50%;
-          overflow: hidden;
           flex: none;
-          box-shadow: 0 0 18px rgba(39, 63, 148, 0.4);
-          border: 1px solid rgba(74, 102, 216, 0.5);
         }
         .ft-name-stack { display: flex; flex-direction: column; line-height: 1; }
         .ft-name {
@@ -328,13 +324,13 @@ export function FooterAndContact() {
           font-size: 0.7rem;
           font-weight: 500;
           letter-spacing: 0.32em;
-          color: #DEE0F0;
+          color: #e7e7e7;
           text-transform: uppercase;
           margin-top: 4px;
         }
         .ft-tag {
           margin: 0 0 0.7rem;
-          color: #DEE0F0;
+          color: #e7e7e7;
           font-size: 0.7rem;
           letter-spacing: 0.22em;
           text-transform: uppercase;
@@ -342,7 +338,7 @@ export function FooterAndContact() {
         }
         .ft-desc {
           margin: 0;
-          color: #8891C7;
+          color: #a8a8a8;
           line-height: 1.65;
           font-size: 0.9rem;
           max-width: 340px;
@@ -358,10 +354,10 @@ export function FooterAndContact() {
           position: relative;
           padding: 1.1rem 1.15rem 1.15rem;
           border-radius: 14px;
-          border: 1px solid rgba(222, 224, 240, 0.1);
+          border: 1px solid rgba(231, 231, 231, 0.1);
           background:
-            radial-gradient(ellipse 70% 50% at 100% 0%, rgba(58, 85, 196, 0.12), transparent 65%),
+            radial-gradient(ellipse 70% 50% at 100% 0%, rgba(127, 127, 127, 0.12), transparent 65%),
-            linear-gradient(180deg, rgba(20, 19, 26, 0.5), rgba(10, 10, 14, 0.78));
+            linear-gradient(180deg, rgba(23, 23, 23, 0.5), rgba(12, 12, 12, 0.78));
           backdrop-filter: blur(10px);
           min-width: 0;
         }
@@ -378,7 +374,7 @@ export function FooterAndContact() {
           grid-template-columns: 22px minmax(0, 1fr);
           align-items: start;
           gap: 0.65rem;
-          color: #DEE0F0;
+          color: #e7e7e7;
           text-decoration: none;
           font-size: 0.85rem;
           line-height: 1.45;
@@ -392,18 +388,18 @@ export function FooterAndContact() {
           width: 22px;
           height: 22px;
           border-radius: 7px;
-          background: rgba(74, 102, 216, 0.12);
+          background: rgba(145, 145, 145, 0.12);
-          border: 1px solid rgba(74, 102, 216, 0.28);
+          border: 1px solid rgba(145, 145, 145, 0.28);
-          color: #DEE0F0;
+          color: #e7e7e7;
           margin-top: 1px;
           transition: background 0.25s, border-color 0.25s;
         }
         .ft-contact-row:hover .ft-contact-ico {
-          background: rgba(74, 102, 216, 0.22);
+          background: rgba(145, 145, 145, 0.22);
-          border-color: rgba(74, 102, 216, 0.5);
+          border-color: rgba(145, 145, 145, 0.5);
         }
         .ft-contact-text { min-width: 0; word-break: break-word; }
-        .ft-contact-text-soft { color: #8891C7; }
+        .ft-contact-text-soft { color: #a8a8a8; }
         .ft-wa {
           display: inline-flex;
           align-items: center;
@@ -412,7 +408,7 @@ export function FooterAndContact() {
           border-radius: 999px;
           background:
             linear-gradient(135deg, rgba(37, 211, 102, 0.16), rgba(18, 140, 126, 0.16)),
-            rgba(14, 13, 18, 0.7);
+            rgba(16, 16, 16, 0.7);
           border: 1px solid rgba(37, 211, 102, 0.35);
           color: #DCFBE8;
           font-size: 0.72rem;
@@ -426,7 +422,7 @@ export function FooterAndContact() {
           border-color: rgba(37, 211, 102, 0.65);
           background:
             linear-gradient(135deg, rgba(37, 211, 102, 0.28), rgba(18, 140, 126, 0.28)),
-            rgba(14, 13, 18, 0.75);
+            rgba(16, 16, 16, 0.75);
           transform: translateY(-1px);
         }
         .ft-wa-ico {
@@ -447,26 +443,26 @@ export function FooterAndContact() {
           flex-wrap: wrap;
           gap: 0.85rem 1.5rem;
           padding-top: 1.5rem;
-          border-top: 1px solid rgba(222, 224, 240, 0.08);
+          border-top: 1px solid rgba(231, 231, 231, 0.08);
           align-items: center;
           justify-content: space-between;
         }
-        .ft-bot-copy { margin: 0; font-size: 0.78rem; color: #6a73a5; }
+        .ft-bot-copy { margin: 0; font-size: 0.78rem; color: #888888; }
-        .ft-bot-credit { margin: 0; font-size: 0.74rem; color: #6a73a5; }
+        .ft-bot-credit { margin: 0; font-size: 0.74rem; color: #888888; }
         .ft-bot-legal { display: flex; gap: 0.85rem; align-items: center; }
         .ft-bot-dot {
           width: 3px;
           height: 3px;
           border-radius: 999px;
-          background: rgba(106, 115, 165, 0.6);
+          background: rgba(136, 136, 136, 0.6);
         }
         .ft-bot-link {
           font-size: 0.78rem;
-          color: #8891C7;
+          color: #a8a8a8;
           text-decoration: none;
           transition: color 0.25s;
         }
-        .ft-bot-link:hover { color: #DEE0F0; }
+        .ft-bot-link:hover { color: #e7e7e7; }
 
         /* RESPONSIVE */
         @media (min-width: 760px) {
@@ -521,7 +517,7 @@ function ColumnGroup({ title, items }: { title: string; items: { label: string;
           font-size: 0.66rem;
           letter-spacing: 0.26em;
           text-transform: uppercase;
-          color: #8891C7;
+          color: #a8a8a8;
           font-weight: 800;
         }
         .cg-list {
@@ -538,7 +534,7 @@ function ColumnGroup({ title, items }: { title: string; items: { label: string;
           align-items: center;
           gap: 0.5rem;
           font-size: 0.88rem;
-          color: #DEE0F0;
+          color: #e7e7e7;
           text-decoration: none;
           padding: 1px 0;
           transition: color 0.25s, transform 0.25s;
@@ -546,7 +542,7 @@ function ColumnGroup({ title, items }: { title: string; items: { label: string;
         .cg-link-bar {
           width: 0;
           height: 1px;
-          background: linear-gradient(90deg, #4a66d8, #8891C7);
+          background: linear-gradient(90deg, #919191, #a8a8a8);
           transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
         }
         .cg-link:hover { color: #FFFFFF; transform: translateX(3px); }
@@ -577,17 +573,17 @@ function SocialLink({ href, label, path }: { href: string; label: string; path:
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          background: rgba(14, 13, 18, 0.7);
+          background: rgba(16, 16, 16, 0.7);
-          border: 1px solid rgba(222, 224, 240, 0.12);
+          border: 1px solid rgba(231, 231, 231, 0.12);
-          color: #8891C7;
+          color: #a8a8a8;
           transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s;
         }
         .sl:hover {
           color: #FFFFFF;
-          border-color: rgba(74, 102, 216, 0.55);
+          border-color: rgba(145, 145, 145, 0.55);
-          background: rgba(58, 85, 196, 0.16);
+          background: rgba(127, 127, 127, 0.16);
           transform: translateY(-2px);
-          box-shadow: 0 8px 20px rgba(58, 85, 196, 0.25);
+          box-shadow: 0 8px 20px rgba(127, 127, 127, 0.25);
         }
       `}</style>
     </a>

src/components/InteractiveHotspot.tsx

@@ -75,8 +75,8 @@ export function InteractiveHotspot({
       >
         <sphereGeometry args={[0.025, 16, 16]} />
         <meshStandardMaterial
-          color={hovered ? '#3b82f6' : '#f59e0b'}
+          color={hovered ? '#999999' : '#f59e0b'}
-          emissive={hovered ? '#3b82f6' : '#f59e0b'}
+          emissive={hovered ? '#999999' : '#f59e0b'}
           emissiveIntensity={hovered ? 0.8 : 0.4}
           transparent
           opacity={0.9}
@@ -110,13 +110,13 @@ export function InteractiveHotspot({
             style={{
               background: 'rgba(255, 255, 255, 0.95)',
               backdropFilter: 'blur(8px)',
-              border: '1px solid rgba(59, 130, 246, 0.3)',
+              border: '1px solid rgba(153, 153, 153, 0.3)',
               borderRadius: '8px',
               padding: '8px 12px',
               whiteSpace: 'nowrap',
               fontFamily: 'system-ui, -apple-system, sans-serif',
               fontSize: '12px',
-              color: '#0a0a0c',
+              color: '#0b0b0b',
               boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
               animation: 'fadeIn 0.15s ease-out',
             }}
@@ -125,7 +125,7 @@ export function InteractiveHotspot({
             <div
               style={{
                 fontSize: '10px',
-                color: '#8891C7',
+                color: '#a8a8a8',
                 display: 'flex',
                 alignItems: 'center',
                 gap: 4,
@@ -133,7 +133,7 @@ export function InteractiveHotspot({
             >
               <span
                 style={{
-                  background: '#3b82f6',
+                  background: '#999999',
                   color: 'white',
                   padding: '2px 6px',
                   borderRadius: '4px',

src/components/LanguageSwitcher.tsx

@@ -23,7 +23,7 @@ export function LanguageSwitcher() {
         backgroundColor: 'rgba(0, 0, 0, 0.04)',
         border: '1px solid rgba(0, 0, 0, 0.08)',
         borderRadius: '0.5rem',
-        color: '#0a0a0c',
+        color: '#0b0b0b',
         cursor: 'pointer',
         fontSize: '0.875rem',
         fontWeight: 500,

src/components/Navbar.tsx

@@ -61,7 +61,7 @@ export function Navbar() {
           background: scrolled ? 'rgba(5, 5, 5, 0.78)' : 'linear-gradient(180deg, rgba(5, 5, 5,0.6), rgba(5, 5, 5,0))',
           backdropFilter: scrolled ? 'blur(18px)' : 'blur(8px)',
           WebkitBackdropFilter: scrolled ? 'blur(18px)' : 'blur(8px)',
-          borderBottom: scrolled ? '1px solid rgba(39, 63, 148,0.14)' : '1px solid transparent',
+          borderBottom: scrolled ? '1px solid rgba(94, 94, 94, 0.14)' : '1px solid transparent',
           transition: 'all 0.35s cubic-bezier(0.16,1,0.3,1)',
         }}
       >
@@ -83,19 +83,15 @@ export function Navbar() {
                 position: 'relative',
                 width: 40,
                 height: 40,
-                borderRadius: '50%',
-                overflow: 'hidden',
                 flex: 'none',
-                boxShadow: '0 0 18px rgba(39, 63, 148, 0.35)',
-                border: '1px solid rgba(39, 63, 148,0.4)',
               }}
             >
               <Image
-                src="/images/brands/ys-lootah-robotics-logo.webp"
+                src="/images/brands/lootah-mark-white.png"
                 alt="YS Lootah Robotics logo"
                 fill
                 sizes="40px"
-                style={{ objectFit: 'cover' }}
+                style={{ objectFit: 'contain' }}
                 priority
               />
             </span>
@@ -103,7 +99,7 @@ export function Navbar() {
               <span style={{ fontSize: '0.95rem', fontWeight: 700, letterSpacing: '0.16em', color: '#ffffff', textTransform: 'uppercase' }}>
                 YS Lootah
               </span>
-              <span style={{ fontSize: '0.7rem', fontWeight: 500, letterSpacing: '0.32em', color: '#DEE0F0', textTransform: 'uppercase', marginTop: 3 }}>
+              <span style={{ fontSize: '0.7rem', fontWeight: 500, letterSpacing: '0.32em', color: '#e7e7e7', textTransform: 'uppercase', marginTop: 3 }}>
                 Robotics
               </span>
             </span>
@@ -116,7 +112,7 @@ export function Navbar() {
                 href={l.href}
                 style={{
                   position: 'relative',
-                  color: isActive(l.href) ? '#DEE0F0' : '#DEE0F0',
+                  color: isActive(l.href) ? '#e7e7e7' : '#e7e7e7',
                   fontSize: '0.78rem',
                   fontWeight: 600,
                   textDecoration: 'none',
@@ -124,7 +120,7 @@ export function Navbar() {
                   textTransform: 'uppercase',
                   transition: 'color 0.2s',
                   paddingBottom: 4,
-                  borderBottom: isActive(l.href) ? '1px solid #DEE0F0' : '1px solid transparent',
+                  borderBottom: isActive(l.href) ? '1px solid #e7e7e7' : '1px solid transparent',
                 }}
               >
                 {l.label}
@@ -150,9 +146,9 @@ export function Navbar() {
                 width: 42,
                 height: 42,
                 borderRadius: 12,
-                border: '1px solid rgba(39, 63, 148,0.2)',
+                border: '1px solid rgba(94, 94, 94, 0.2)',
                 background: 'rgba(15, 12, 8,0.6)',
-                color: '#FBFBFD',
+                color: '#fcfcfc',
                 cursor: 'pointer',
                 display: 'none',
                 alignItems: 'center',
@@ -198,11 +194,11 @@ export function Navbar() {
             style={{
               fontSize: '1.5rem',
               fontWeight: 500,
-              color: isActive(l.href) ? '#DEE0F0' : '#FBFBFD',
+              color: isActive(l.href) ? '#e7e7e7' : '#fcfcfc',
               textDecoration: 'none',
               letterSpacing: '-0.01em',
               padding: '0.75rem 0',
-              borderBottom: '1px solid rgba(39, 63, 148,0.12)',
+              borderBottom: '1px solid rgba(94, 94, 94, 0.12)',
               display: 'flex',
               justifyContent: 'space-between',
               alignItems: 'center',

src/components/PayloadMesh.tsx

@@ -30,24 +30,24 @@ const getModelPath = (type: string): string | null => {
 // Placeholder materials by payload type - visually distinct and bright
 const PLACEHOLDER_MATERIALS: Record<string, THREE.MeshStandardMaterial> = {
   camera: new THREE.MeshStandardMaterial({
-    color: '#3b82f6',
+    color: '#999999',
     metalness: 0.6,
     roughness: 0.4,
-    emissive: '#3b82f6',
+    emissive: '#999999',
     emissiveIntensity: 0.5,
   }),
   ptzcamera: new THREE.MeshStandardMaterial({
-    color: '#3b82f6',
+    color: '#999999',
     metalness: 0.6,
     roughness: 0.4,
-    emissive: '#3b82f6',
+    emissive: '#999999',
     emissiveIntensity: 0.5,
   }),
   ptz: new THREE.MeshStandardMaterial({
-    color: '#3b82f6',
+    color: '#999999',
     metalness: 0.6,
     roughness: 0.4,
-    emissive: '#3b82f6',
+    emissive: '#999999',
     emissiveIntensity: 0.5,
   }),
   light: new THREE.MeshStandardMaterial({
@@ -65,17 +65,17 @@ const PLACEHOLDER_MATERIALS: Record<string, THREE.MeshStandardMaterial> = {
     emissiveIntensity: 0.6,
   }),
   speaker: new THREE.MeshStandardMaterial({
-    color: '#a855f7',
+    color: '#a6a6a6',
     metalness: 0.5,
     roughness: 0.5,
-    emissive: '#a855f7',
+    emissive: '#a6a6a6',
     emissiveIntensity: 0.5,
   }),
   default: new THREE.MeshStandardMaterial({
-    color: '#3b82f6',
+    color: '#999999',
     metalness: 0.6,
     roughness: 0.4,
-    emissive: '#3b82f6',
+    emissive: '#999999',
     emissiveIntensity: 0.5,
   }),
 };
@@ -94,7 +94,7 @@ function PayloadLoader({ modelPath }: { modelPath: string }) {
       if (child instanceof THREE.Mesh) {
         if (child.material) {
           child.material = new THREE.MeshStandardMaterial({
-            color: '#6a73a5',
+            color: '#888888',
             metalness: 0.6,
             roughness: 0.4,
           });

src/components/PricingEngine.tsx

@@ -6,7 +6,7 @@ import { usePricingStore, pricingStore } from '@/store/usePricingStore';
 import { orderStore } from '@/store/useOrderStore';
 import { snapshotStore } from '@/store/useSnapshotStore';
 
-const DEFAULT_COLOR = '#96a2b6';
+const DEFAULT_COLOR = '#a6a6a6';
 
 function formatAED(price: number): string {
   return new Intl.NumberFormat('en-AE').format(price);
@@ -65,19 +65,19 @@ export function PricingEngine() {
       padding: '1rem 1rem 1.05rem',
       borderRadius: '14px',
       background:
-        'radial-gradient(ellipse 80% 60% at 100% 0%, rgba(74, 102, 216, 0.18), transparent 60%), linear-gradient(180deg, rgba(28, 27, 38, 0.92), rgba(12, 12, 18, 0.96))',
+        'radial-gradient(ellipse 80% 60% at 100% 0%, rgba(145, 145, 145, 0.18), transparent 60%), linear-gradient(180deg, rgba(33, 33, 33, 0.92), rgba(15, 15, 15, 0.96))',
-      border: '1px solid rgba(74, 102, 216, 0.28)',
+      border: '1px solid rgba(145, 145, 145, 0.28)',
       boxShadow: '0 14px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04)',
     }}>
       <h3 style={{
         fontSize: '0.62rem',
         fontWeight: 800,
-        color: '#8891C7',
+        color: '#a8a8a8',
         textTransform: 'uppercase',
         letterSpacing: '0.26em',
         margin: 0,
         paddingBottom: '0.55rem',
-        borderBottom: '1px solid rgba(74, 102, 216, 0.22)',
+        borderBottom: '1px solid rgba(145, 145, 145, 0.22)',
       }}>
         Price Breakdown
       </h3>
@@ -96,16 +96,16 @@ export function PricingEngine() {
           justifyContent: 'space-between',
           alignItems: 'baseline',
           paddingTop: '0.65rem',
-          borderTop: '1px solid rgba(74, 102, 216, 0.22)',
+          borderTop: '1px solid rgba(145, 145, 145, 0.22)',
           marginTop: '0.2rem',
         }}
       >
-        <span style={{ fontSize: '0.7rem', fontWeight: 700, color: '#A6B2D8', letterSpacing: '0.18em', textTransform: 'uppercase' }}>Total</span>
+        <span style={{ fontSize: '0.7rem', fontWeight: 700, color: '#bfbfbf', letterSpacing: '0.18em', textTransform: 'uppercase' }}>Total</span>
         <span
           style={{
             fontSize: '1.15rem',
             fontWeight: 700,
-            background: 'linear-gradient(180deg, #FFFFFF, #B5BDDB)',
+            background: 'linear-gradient(180deg, #FFFFFF, #c8c8c8)',
             WebkitBackgroundClip: 'text',
             backgroundClip: 'text',
             color: 'transparent',
@@ -123,9 +123,9 @@ export function PricingEngine() {
           marginTop: '0.65rem',
           padding: '0.85rem',
           borderRadius: '12px',
-          border: '1px solid rgba(120, 140, 255, 0.55)',
+          border: '1px solid rgba(188, 188, 188, 0.55)',
           background:
-            'linear-gradient(135deg, rgba(80, 110, 255, 0.32), rgba(40, 55, 145, 0.85))',
+            'linear-gradient(135deg, rgba(168, 168, 168, 0.32), rgba(93, 93, 93, 0.85))',
           color: '#FFFFFF',
           cursor: 'pointer',
           fontSize: '0.78rem',
@@ -134,15 +134,15 @@ export function PricingEngine() {
           textTransform: 'uppercase',
           transition: 'all 0.25s ease',
           textAlign: 'center',
-          boxShadow: '0 10px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(74, 102, 216, 0.32)',
+          boxShadow: '0 10px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(145, 145, 145, 0.32)',
         }}
         onMouseEnter={(e) => {
           e.currentTarget.style.transform = 'translateY(-1px)';
-          e.currentTarget.style.boxShadow = '0 14px 30px rgba(0, 0, 0, 0.55), 0 0 24px rgba(74, 102, 216, 0.45)';
+          e.currentTarget.style.boxShadow = '0 14px 30px rgba(0, 0, 0, 0.55), 0 0 24px rgba(145, 145, 145, 0.45)';
         }}
         onMouseLeave={(e) => {
           e.currentTarget.style.transform = 'translateY(0)';
-          e.currentTarget.style.boxShadow = '0 10px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(74, 102, 216, 0.32)';
+          e.currentTarget.style.boxShadow = '0 10px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(145, 145, 145, 0.32)';
         }}
       >
         Proceed to Order
@@ -158,8 +158,8 @@ function PriceLine({ label, price }: { label: string; price: number }) {
       justifyContent: 'space-between',
       alignItems: 'center',
     }}>
-      <span style={{ fontSize: '0.78rem', color: '#C9CCDE' }}>{label}</span>
+      <span style={{ fontSize: '0.78rem', color: '#d4d4d4' }}>{label}</span>
-      <span style={{ fontSize: '0.78rem', color: '#DEE0F0', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', letterSpacing: '0.02em' }}>
+      <span style={{ fontSize: '0.78rem', color: '#e7e7e7', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', letterSpacing: '0.02em' }}>
         AED {formatAED(price)}
       </span>
     </div>

src/components/RobotCanvas.tsx

@@ -24,12 +24,12 @@ function Loader() {
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.75rem' }}>
         <div style={{
           width: '48px', height: '48px',
-          border: '3px solid rgba(59, 130, 246, 0.15)',
+          border: '3px solid rgba(153, 153, 153, 0.15)',
-          borderTopColor: '#3b82f6',
+          borderTopColor: '#999999',
           borderRadius: '50%',
           animation: 'spin 1s linear infinite',
         }} />
-        <p style={{ fontSize: '0.875rem', color: '#6a73a5', fontFamily: 'system-ui, sans-serif' }}>
+        <p style={{ fontSize: '0.875rem', color: '#888888', fontFamily: 'system-ui, sans-serif' }}>
           {progress.toFixed(0)}% loaded
         </p>
       </div>
@@ -51,13 +51,13 @@ function SceneContent({ onCapture }: { onCapture: (gl: WebGLRenderer, scene: Sce
       <SceneCapture onCapture={onCapture} />
       <Environment preset="studio" environmentIntensity={2.2} />
       <ambientLight intensity={3.4} />
-      <hemisphereLight args={['#ffffff', '#3a4a78', 2.6]} />
+      <hemisphereLight args={['#ffffff', '#595959', 2.6]} />
       {/* Key — front-right, strong white */}
       <directionalLight position={[5, 5, 5]} intensity={6.0} color="#ffffff" castShadow shadow-mapSize={[1024, 1024]} />
       {/* Fill — front-left, cool tint */}
-      <directionalLight position={[-4, 3, 2]} intensity={4.0} color="#e8f0ff" />
+      <directionalLight position={[-4, 3, 2]} intensity={4.0} color="#f4f4f4" />
       {/* Rim — behind */}
-      <directionalLight position={[0, 3, -5]} intensity={2.8} color="#A6B2D8" />
+      <directionalLight position={[0, 3, -5]} intensity={2.8} color="#bfbfbf" />
       {/* Top spotlight */}
       <spotLight position={[0, 8, 0]} intensity={4.5} angle={0.8} penumbra={0.45} color="#ffffff" />
       {/* Front fill — direct face/torso */}
@@ -65,13 +65,13 @@ function SceneContent({ onCapture }: { onCapture: (gl: WebGLRenderer, scene: Sce
       {/* Face spotlight — soft direct head light */}
       <spotLight position={[0, 2.2, 4.2]} intensity={3.0} angle={0.55} penumbra={0.6} color="#ffffff" />
       {/* Bottom fill — lift the legs */}
-      <directionalLight position={[0, -1, 4]} intensity={1.4} color="#dfe8ff" />
+      <directionalLight position={[0, -1, 4]} intensity={1.4} color="#efefef" />
       {/* Side accents */}
       <pointLight position={[3, 1.5, 3]} intensity={2.4} color="#ffffff" distance={10} />
-      <pointLight position={[-3, 1.5, 3]} intensity={2.4} color="#dfe8ff" distance={10} />
+      <pointLight position={[-3, 1.5, 3]} intensity={2.4} color="#efefef" distance={10} />
       {/* Back side accents — define silhouette */}
-      <pointLight position={[2.5, 2.5, -2]} intensity={1.6} color="#b0c4ff" distance={10} />
+      <pointLight position={[2.5, 2.5, -2]} intensity={1.6} color="#d8d8d8" distance={10} />
-      <pointLight position={[-2.5, 2.5, -2]} intensity={1.6} color="#b0c4ff" distance={10} />
+      <pointLight position={[-2.5, 2.5, -2]} intensity={1.6} color="#d8d8d8" distance={10} />
       <RobotModel />
       <OrbitControls
         target={[0, 0.5, 0]}
@@ -167,7 +167,7 @@ export function RobotCanvas() {
         gl={{ antialias: true, powerPreference: 'high-performance' }}
         style={{
           background:
-            'radial-gradient(ellipse 45% 22% at 50% 82%, rgba(220, 228, 245, 0.32), transparent 70%), radial-gradient(ellipse 70% 65% at 50% 45%, rgba(80, 110, 200, 0.38), transparent 65%), linear-gradient(180deg, #1c1d2c 0%, #0f1018 60%, #0a0b13 100%)',
+            'radial-gradient(ellipse 45% 22% at 50% 82%, rgba(233, 233, 233, 0.32), transparent 70%), radial-gradient(ellipse 70% 65% at 50% 45%, rgba(140, 140, 140, 0.38), transparent 65%), linear-gradient(180deg, #242424 0%, #141414 60%, #0f0f0f 100%)',
         }}
       >
         <Suspense fallback={<Loader />}>
@@ -181,9 +181,9 @@ export function RobotCanvas() {
         style={{
           ...btnBase,
           left: '1rem',
-          backgroundColor: 'rgba(20, 19, 26, 0.78)',
+          backgroundColor: 'rgba(23, 23, 23, 0.78)',
-          border: '1px solid rgba(74, 102, 216, 0.36)',
+          border: '1px solid rgba(145, 145, 145, 0.36)',
-          color: '#DEE0F0',
+          color: '#e7e7e7',
           boxShadow: '0 8px 22px rgba(0, 0, 0, 0.45)',
           letterSpacing: '0.04em',
         }}
@@ -200,9 +200,9 @@ export function RobotCanvas() {
         style={{
           ...btnBase,
           left: '8.5rem',
-          backgroundColor: shareStatus === 'copied' ? 'rgba(127, 214, 208, 0.18)' : 'rgba(20, 19, 26, 0.78)',
+          backgroundColor: shareStatus === 'copied' ? 'rgba(171, 171, 171, 0.18)' : 'rgba(23, 23, 23, 0.78)',
-          border: `1px solid ${shareStatus === 'copied' ? 'rgba(127, 214, 208, 0.6)' : 'rgba(74, 102, 216, 0.36)'}`,
+          border: `1px solid ${shareStatus === 'copied' ? 'rgba(171, 171, 171, 0.6)' : 'rgba(145, 145, 145, 0.36)'}`,
-          color: shareStatus === 'copied' ? '#7FD6D0' : '#DEE0F0',
+          color: shareStatus === 'copied' ? '#ababab' : '#e7e7e7',
           boxShadow: '0 8px 22px rgba(0, 0, 0, 0.45)',
           letterSpacing: '0.04em',
         }}

src/components/RobotModel.tsx

@@ -81,7 +81,7 @@ function BaseBodyMesh({ glbPath, primaryColor, visible }: { glbPath: string; pri
       if (child instanceof THREE.Mesh) {
         if (!child.material) {
           child.material = new THREE.MeshStandardMaterial({
-            color: '#96a2b6',
+            color: '#a6a6a6',
             metalness: 0.8,
             roughness: 0.2,
           });

src/components/ScrollOverlays.tsx

@@ -172,26 +172,26 @@ export function ScrollOverlays() {
       {/* 1. Brand Intro */}
       <OverlaySection progress={scrollYProgress} {...SECTION_CONFIGS[0]} className="overlay-brand">
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '1rem', marginBottom: '1rem' }}>
-          <div style={{ width: '30px', height: '1px', background: 'linear-gradient(90deg, transparent, #273F94)' }} />
+          <div style={{ width: '30px', height: '1px', background: 'linear-gradient(90deg, transparent, #5e5e5e)' }} />
-          <span style={{ fontSize: '0.75rem', fontWeight: 600, color: '#273F94', letterSpacing: '0.4em', textTransform: 'uppercase' }}>
+          <span style={{ fontSize: '0.75rem', fontWeight: 600, color: '#5e5e5e', letterSpacing: '0.4em', textTransform: 'uppercase' }}>
             YS Lootah Robotics
           </span>
-          <div style={{ width: '30px', height: '1px', background: 'linear-gradient(90deg, #273F94, transparent)' }} />
+          <div style={{ width: '30px', height: '1px', background: 'linear-gradient(90deg, #5e5e5e, transparent)' }} />
         </div>
-        <p style={{ fontSize: '0.9rem', color: '#6a73a5', fontWeight: 400, letterSpacing: '0.15em', margin: 0 }}>
+        <p style={{ fontSize: '0.9rem', color: '#888888', fontWeight: 400, letterSpacing: '0.15em', margin: 0 }}>
           Pioneering Humanoid Robotics in the UAE
         </p>
       </OverlaySection>
 
       {/* 2. Hero */}
       <OverlaySection progress={scrollYProgress} {...SECTION_CONFIGS[1]}>
-        <motion.h1 className="overlay-hero-heading" style={{ fontWeight: 200, color: '#0a0a0c', lineHeight: 1.0, letterSpacing: '-0.04em', margin: 0 }}>
+        <motion.h1 className="overlay-hero-heading" style={{ fontWeight: 200, color: '#0b0b0b', lineHeight: 1.0, letterSpacing: '-0.04em', margin: 0 }}>
           The Future
         </motion.h1>
-        <motion.h1 className="overlay-hero-heading" style={{ fontWeight: 200, color: '#0a0a0c', lineHeight: 1.0, letterSpacing: '-0.04em', margin: '0.1em 0 0' }}>
+        <motion.h1 className="overlay-hero-heading" style={{ fontWeight: 200, color: '#0b0b0b', lineHeight: 1.0, letterSpacing: '-0.04em', margin: '0.1em 0 0' }}>
-          of <span style={{ color: '#273F94', fontWeight: 400 }}>Robotics</span>
+          of <span style={{ color: '#5e5e5e', fontWeight: 400 }}>Robotics</span>
         </motion.h1>
-        <p style={{ fontSize: '1rem', color: '#475569', lineHeight: 1.7, margin: '1.5rem 0 0', fontWeight: 300 }}>
+        <p style={{ fontSize: '1rem', color: '#585858', lineHeight: 1.7, margin: '1.5rem 0 0', fontWeight: 300 }}>
           Meet the G1 Humanoid Robot. Fully customizable, enterprise-ready, designed for the world of tomorrow.
         </p>
       </OverlaySection>
@@ -199,24 +199,24 @@ export function ScrollOverlays() {
       {/* 3. Head Reveal */}
       <OverlaySection progress={scrollYProgress} {...SECTION_CONFIGS[2]}>
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
-          <div style={{ width: '50px', height: '2px', background: '#273F94', marginBottom: '1.5rem' }} />
+          <div style={{ width: '50px', height: '2px', background: '#5e5e5e', marginBottom: '1.5rem' }} />
-          <div style={{ fontSize: '0.65rem', fontWeight: 600, color: '#273F94', letterSpacing: '0.3em', textTransform: 'uppercase', marginBottom: '1rem' }}>
+          <div style={{ fontSize: '0.65rem', fontWeight: 600, color: '#5e5e5e', letterSpacing: '0.3em', textTransform: 'uppercase', marginBottom: '1rem' }}>
             Intelligent by Design
           </div>
-          <h2 className="overlay-heading" style={{ fontWeight: 300, color: '#0a0a0c', lineHeight: 1.1, margin: '0 0 1rem', letterSpacing: '-0.03em' }}>
+          <h2 className="overlay-heading" style={{ fontWeight: 300, color: '#0b0b0b', lineHeight: 1.1, margin: '0 0 1rem', letterSpacing: '-0.03em' }}>
             Vision That<br />Understands
           </h2>
-          <p style={{ fontSize: '0.95rem', color: '#475569', lineHeight: 1.6, margin: 0, fontWeight: 300 }}>
+          <p style={{ fontSize: '0.95rem', color: '#585858', lineHeight: 1.6, margin: 0, fontWeight: 300 }}>
             Advanced computer vision and neural processing. The G1 sees, interprets, and responds to the world in real-time.
           </p>
           <div style={{ display: 'flex', gap: '2.5rem', marginTop: '2rem' }}>
             <div style={{ textAlign: 'center' }}>
-              <div className="overlay-stat" style={{ fontWeight: 300, color: '#0a0a0c', fontFamily: 'monospace' }}>360°</div>
+              <div className="overlay-stat" style={{ fontWeight: 300, color: '#0b0b0b', fontFamily: 'monospace' }}>360°</div>
-              <div style={{ fontSize: '0.65rem', color: '#6a73a5', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: '0.5rem' }}>Field of View</div>
+              <div style={{ fontSize: '0.65rem', color: '#888888', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: '0.5rem' }}>Field of View</div>
             </div>
             <div style={{ textAlign: 'center' }}>
-              <div className="overlay-stat" style={{ fontWeight: 300, color: '#0a0a0c', fontFamily: 'monospace' }}>{'<'}50ms</div>
+              <div className="overlay-stat" style={{ fontWeight: 300, color: '#0b0b0b', fontFamily: 'monospace' }}>{'<'}50ms</div>
-              <div style={{ fontSize: '0.65rem', color: '#6a73a5', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: '0.5rem' }}>Response Time</div>
+              <div style={{ fontSize: '0.65rem', color: '#888888', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: '0.5rem' }}>Response Time</div>
             </div>
           </div>
         </div>
@@ -224,14 +224,14 @@ export function ScrollOverlays() {
 
       {/* 4. Customization */}
       <OverlaySection progress={scrollYProgress} {...SECTION_CONFIGS[3]}>
-        <div style={{ width: '50px', height: '2px', background: '#273F94', marginBottom: '1.5rem' }} />
+        <div style={{ width: '50px', height: '2px', background: '#5e5e5e', marginBottom: '1.5rem' }} />
-        <div style={{ fontSize: '0.65rem', fontWeight: 600, color: '#273F94', letterSpacing: '0.3em', textTransform: 'uppercase', marginBottom: '1rem' }}>
+        <div style={{ fontSize: '0.65rem', fontWeight: 600, color: '#5e5e5e', letterSpacing: '0.3em', textTransform: 'uppercase', marginBottom: '1rem' }}>
           Your Identity
         </div>
-        <h2 className="overlay-heading" style={{ fontWeight: 300, color: '#0a0a0c', lineHeight: 1.1, margin: '0 0 1rem', letterSpacing: '-0.03em' }}>
+        <h2 className="overlay-heading" style={{ fontWeight: 300, color: '#0b0b0b', lineHeight: 1.1, margin: '0 0 1rem', letterSpacing: '-0.03em' }}>
           Dress for Any<br />Mission
         </h2>
-        <p style={{ fontSize: '0.95rem', color: '#475569', lineHeight: 1.6, margin: 0, fontWeight: 300 }}>
+        <p style={{ fontSize: '0.95rem', color: '#585858', lineHeight: 1.6, margin: 0, fontWeight: 300 }}>
           From traditional Emarati Kandura to industrial safety gear and professional business attire. Configure every detail to match your brand.
         </p>
         <div style={{ display: 'flex', gap: '1rem', marginTop: '2rem', flexWrap: 'wrap' }}>
@@ -252,9 +252,9 @@ export function ScrollOverlays() {
                 padding: '0.6rem 1.25rem',
                 borderRadius: '2rem',
                 background: 'rgba(255, 255, 255, 0.5)',
-                border: '1px solid rgba(39, 63, 148, 0.3)',
+                border: '1px solid rgba(94, 94, 94, 0.3)',
                 fontSize: '0.75rem',
-                color: '#0a0a0c',
+                color: '#0b0b0b',
                 letterSpacing: '0.1em',
                 fontWeight: 600,
                 cursor: 'pointer',
@@ -268,11 +268,11 @@ export function ScrollOverlays() {
                 e.currentTarget.style.background = 'var(--color-gold)';
                 e.currentTarget.style.color = '#ffffff';
                 e.currentTarget.style.transform = 'translateY(-2px)';
-                e.currentTarget.style.boxShadow = '0 6px 16px rgba(39, 63, 148, 0.3)';
+                e.currentTarget.style.boxShadow = '0 6px 16px rgba(94, 94, 94, 0.3)';
               }}
               onMouseOut={(e) => {
                 e.currentTarget.style.background = 'rgba(255, 255, 255, 0.5)';
-                e.currentTarget.style.color = '#0a0a0c';
+                e.currentTarget.style.color = '#0b0b0b';
                 e.currentTarget.style.transform = 'translateY(0)';
                 e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';
               }}
@@ -286,24 +286,24 @@ export function ScrollOverlays() {
       {/* 5. Mobility */}
       <OverlaySection progress={scrollYProgress} {...SECTION_CONFIGS[4]}>
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
-          <div style={{ width: '50px', height: '2px', background: '#273F94', marginBottom: '1.5rem' }} />
+          <div style={{ width: '50px', height: '2px', background: '#5e5e5e', marginBottom: '1.5rem' }} />
-          <div style={{ fontSize: '0.65rem', fontWeight: 600, color: '#273F94', letterSpacing: '0.3em', textTransform: 'uppercase', marginBottom: '1rem' }}>
+          <div style={{ fontSize: '0.65rem', fontWeight: 600, color: '#5e5e5e', letterSpacing: '0.3em', textTransform: 'uppercase', marginBottom: '1rem' }}>
             Advanced Mobility
           </div>
-          <h2 className="overlay-heading" style={{ fontWeight: 300, color: '#0a0a0c', lineHeight: 1.1, margin: '0 0 1rem', letterSpacing: '-0.03em' }}>
+          <h2 className="overlay-heading" style={{ fontWeight: 300, color: '#0b0b0b', lineHeight: 1.1, margin: '0 0 1rem', letterSpacing: '-0.03em' }}>
             23 Degrees of<br />Freedom
           </h2>
-          <p style={{ fontSize: '0.95rem', color: '#475569', lineHeight: 1.6, margin: 0, fontWeight: 300 }}>
+          <p style={{ fontSize: '0.95rem', color: '#585858', lineHeight: 1.6, margin: 0, fontWeight: 300 }}>
             State-of-the-art locomotion enabling natural human-like movement, balance, and agility across any terrain.
           </p>
           <div style={{ display: 'flex', gap: '2.5rem', marginTop: '2rem' }}>
             <div style={{ textAlign: 'center' }}>
-              <div className="overlay-stat" style={{ fontWeight: 300, color: '#0a0a0c', fontFamily: 'monospace' }}>2m/s</div>
+              <div className="overlay-stat" style={{ fontWeight: 300, color: '#0b0b0b', fontFamily: 'monospace' }}>2m/s</div>
-              <div style={{ fontSize: '0.65rem', color: '#6a73a5', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: '0.5rem' }}>Max Speed</div>
+              <div style={{ fontSize: '0.65rem', color: '#888888', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: '0.5rem' }}>Max Speed</div>
             </div>
             <div style={{ textAlign: 'center' }}>
-              <div className="overlay-stat" style={{ fontWeight: 300, color: '#0a0a0c', fontFamily: 'monospace' }}>127kg</div>
+              <div className="overlay-stat" style={{ fontWeight: 300, color: '#0b0b0b', fontFamily: 'monospace' }}>127kg</div>
-              <div style={{ fontSize: '0.65rem', color: '#6a73a5', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: '0.5rem' }}>Payload</div>
+              <div style={{ fontSize: '0.65rem', color: '#888888', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: '0.5rem' }}>Payload</div>
             </div>
           </div>
         </div>
@@ -325,7 +325,7 @@ export function ScrollOverlays() {
           opacity: useTransform(scrollYProgress, [0, 0.05], [1, 0]),
         }}
       >
-        <span style={{ fontSize: '0.65rem', fontWeight: 500, color: '#6a73a5', letterSpacing: '0.3em', textTransform: 'uppercase', marginBottom: '1rem' }}>
+        <span style={{ fontSize: '0.65rem', fontWeight: 500, color: '#888888', letterSpacing: '0.3em', textTransform: 'uppercase', marginBottom: '1rem' }}>
           Scroll to Explore
         </span>
         <div className="scroll-indicator" />

src/components/ScrollScene.tsx

@@ -158,18 +158,18 @@ function LightOrbs() {
     <>
       {/* Orbiting blue point light (no visible mesh) */}
       <group ref={blueOrbRef}>
-        <pointLight ref={bluePointRef} color="#4a7aff" intensity={2.0} distance={5} decay={2} />
+        <pointLight ref={bluePointRef} color="#a5a5a5" intensity={2.0} distance={5} decay={2} />
       </group>
 
       {/* Orbiting gold point light (no visible mesh) */}
       <group ref={goldOrbRef}>
-        <pointLight ref={goldPointRef} color="#273F94" intensity={1.8} distance={4.5} decay={2} />
+        <pointLight ref={goldPointRef} color="#5e5e5e" intensity={1.8} distance={4.5} decay={2} />
       </group>
 
       {/* Halo ring above head - visible during close-up */}
       <mesh ref={haloRef} position={[0, 1.6, 0]} rotation={[Math.PI / 2, 0, 0]}>
         <torusGeometry args={[0.25, 0.008, 16, 64]} />
-        <meshBasicMaterial color="#273F94" transparent opacity={0} />
+        <meshBasicMaterial color="#5e5e5e" transparent opacity={0} />
       </mesh>
     </>
   );
@@ -219,10 +219,10 @@ function ScrollLighting() {
 
   return (
     <>
-      <directionalLight ref={rimLightRef} position={[0, 3, -5]} intensity={3.0} color="#4a7aff" />
+      <directionalLight ref={rimLightRef} position={[0, 3, -5]} intensity={3.0} color="#a5a5a5" />
-      <spotLight ref={goldSpotRef} position={[0.5, 2.5, 2]} intensity={0} color="#273F94" angle={0.5} penumbra={0.8} />
+      <spotLight ref={goldSpotRef} position={[0.5, 2.5, 2]} intensity={0} color="#5e5e5e" angle={0.5} penumbra={0.8} />
-      <directionalLight ref={leftSideRef} position={[-5, 3, 2]} intensity={0.8} color="#e8f0ff" />
+      <directionalLight ref={leftSideRef} position={[-5, 3, 2]} intensity={0.8} color="#f4f4f4" />
-      <directionalLight ref={rightSideRef} position={[5, 2, 3]} intensity={0.8} color="#e0e8ff" />
+      <directionalLight ref={rightSideRef} position={[5, 2, 3]} intensity={0.8} color="#f0f0f0" />
       <directionalLight ref={fillRef} position={[0, 2, 5]} intensity={0.8} color="#ffffff" />
     </>
   );
@@ -236,12 +236,12 @@ function Loader() {
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.75rem' }}>
         <div style={{
           width: '48px', height: '48px',
-          border: '3px solid rgba(39, 63, 148, 0.15)',
+          border: '3px solid rgba(94, 94, 94, 0.15)',
-          borderTopColor: '#273F94',
+          borderTopColor: '#5e5e5e',
           borderRadius: '50%',
           animation: 'spin 1s linear infinite',
         }} />
-        <p style={{ fontSize: '0.8rem', color: '#6a73a5', fontFamily: 'Inter, system-ui, sans-serif' }}>
+        <p style={{ fontSize: '0.8rem', color: '#888888', fontFamily: 'Inter, system-ui, sans-serif' }}>
           {progress.toFixed(0)}%
         </p>
       </div>

src/components/SnapshotButton.tsx

@@ -44,10 +44,10 @@ function SnapshotButtonInner({ gl, scene, camera, filename = 'g1-robot', onSnaps
       disabled={isCapturing}
       style={{
         padding: '0.5rem 1rem',
-        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+        backgroundColor: 'rgba(153, 153, 153, 0.1)',
-        border: '1px solid rgba(59, 130, 246, 0.3)',
+        border: '1px solid rgba(153, 153, 153, 0.3)',
         borderRadius: '0.5rem',
-        color: '#FBFBFD',
+        color: '#fcfcfc',
         cursor: isCapturing ? 'wait' : 'pointer',
         fontSize: '0.875rem',
         fontWeight: 500,
@@ -58,11 +58,11 @@ function SnapshotButtonInner({ gl, scene, camera, filename = 'g1-robot', onSnaps
       }}
       onMouseEnter={(e) => {
         if (!isCapturing) {
-          e.currentTarget.style.backgroundColor = 'rgba(59, 130, 246, 0.2)';
+          e.currentTarget.style.backgroundColor = 'rgba(153, 153, 153, 0.2)';
         }
       }}
       onMouseLeave={(e) => {
-        e.currentTarget.style.backgroundColor = 'rgba(59, 130, 246, 0.1)';
+        e.currentTarget.style.backgroundColor = 'rgba(153, 153, 153, 0.1)';
       }}
       aria-label="Capture 3D scene snapshot"
     >

src/components/checkout/ConfirmationStep.tsx

@@ -39,10 +39,10 @@ export function ConfirmationStep() {
       </div>
 
       <div>
-        <h3 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#0a0a0c', margin: 0, marginBottom: '0.5rem' }}>
+        <h3 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#0b0b0b', margin: 0, marginBottom: '0.5rem' }}>
           Order Confirmed!
         </h3>
-        <p style={{ fontSize: '0.8rem', color: '#8891C7', margin: 0 }}>
+        <p style={{ fontSize: '0.8rem', color: '#a8a8a8', margin: 0 }}>
           Thank you for your order. Your G1 Robot is being prepared.
         </p>
       </div>
@@ -51,13 +51,13 @@ export function ConfirmationStep() {
       <div style={{
         padding: '0.75rem 1.5rem',
         borderRadius: '0.5rem',
-        background: 'rgba(59, 130, 246, 0.04)',
+        background: 'rgba(153, 153, 153, 0.04)',
-        border: '1px solid rgba(59, 130, 246, 0.2)',
+        border: '1px solid rgba(153, 153, 153, 0.2)',
       }}>
-        <div style={{ fontSize: '0.65rem', color: '#6a73a5', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '0.25rem' }}>
+        <div style={{ fontSize: '0.65rem', color: '#888888', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '0.25rem' }}>
           Order ID
         </div>
-        <div style={{ fontSize: '1.1rem', fontWeight: 700, color: '#2563eb', fontFamily: 'monospace', letterSpacing: '0.05em' }}>
+        <div style={{ fontSize: '1.1rem', fontWeight: 700, color: '#888888', fontFamily: 'monospace', letterSpacing: '0.05em' }}>
           {orderId}
         </div>
       </div>
@@ -72,16 +72,16 @@ export function ConfirmationStep() {
         textAlign: 'left',
       }}>
         <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
-          <span style={{ fontSize: '0.75rem', color: '#8891C7' }}>Configuration</span>
+          <span style={{ fontSize: '0.75rem', color: '#a8a8a8' }}>Configuration</span>
-          <span style={{ fontSize: '0.75rem', color: '#374151' }}>{personaSummary}</span>
+          <span style={{ fontSize: '0.75rem', color: '#444444' }}>{personaSummary}</span>
         </div>
         <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
-          <span style={{ fontSize: '0.75rem', color: '#8891C7' }}>Ship to</span>
+          <span style={{ fontSize: '0.75rem', color: '#a8a8a8' }}>Ship to</span>
-          <span style={{ fontSize: '0.75rem', color: '#374151' }}>{shipping.name}, {shipping.city}</span>
+          <span style={{ fontSize: '0.75rem', color: '#444444' }}>{shipping.name}, {shipping.city}</span>
         </div>
         <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: '0.5rem', borderTop: '1px solid rgba(0, 0, 0, 0.06)' }}>
-          <span style={{ fontSize: '0.85rem', fontWeight: 600, color: '#374151' }}>Total Paid</span>
+          <span style={{ fontSize: '0.85rem', fontWeight: 600, color: '#444444' }}>Total Paid</span>
-          <span style={{ fontSize: '0.85rem', fontWeight: 700, color: '#0a0a0c', fontFamily: 'monospace' }}>AED {formatAED(orderTotal)}</span>
+          <span style={{ fontSize: '0.85rem', fontWeight: 700, color: '#0b0b0b', fontFamily: 'monospace' }}>AED {formatAED(orderTotal)}</span>
         </div>
       </div>
 
@@ -92,9 +92,9 @@ export function ConfirmationStep() {
           marginTop: '0.5rem',
           padding: '0.75rem 1.5rem',
           borderRadius: '0.375rem',
-          border: '1px solid rgba(59, 130, 246, 0.5)',
+          border: '1px solid rgba(153, 153, 153, 0.5)',
-          background: 'rgba(59, 130, 246, 0.08)',
+          background: 'rgba(153, 153, 153, 0.08)',
-          color: '#2563eb',
+          color: '#888888',
           cursor: 'pointer',
           fontSize: '0.85rem',
           fontWeight: 600,

src/components/checkout/PaymentStep.tsx

@@ -32,7 +32,7 @@ export function PaymentStep() {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-      <h3 style={{ fontSize: '1rem', fontWeight: 600, color: '#0a0a0c', margin: 0 }}>
+      <h3 style={{ fontSize: '1rem', fontWeight: 600, color: '#0b0b0b', margin: 0 }}>
         Payment Details
       </h3>
 
@@ -69,9 +69,9 @@ export function PaymentStep() {
           marginTop: '0.5rem',
           padding: '0.75rem',
           borderRadius: '0.375rem',
-          border: '1px solid rgba(59, 130, 246, 0.5)',
+          border: '1px solid rgba(153, 153, 153, 0.5)',
-          background: isLoading ? 'rgba(59, 130, 246, 0.15)' : 'rgba(59, 130, 246, 0.08)',
+          background: isLoading ? 'rgba(153, 153, 153, 0.15)' : 'rgba(153, 153, 153, 0.08)',
-          color: '#2563eb',
+          color: '#888888',
           cursor: isLoading ? 'wait' : 'pointer',
           fontSize: '0.85rem',
           fontWeight: 600,

src/components/checkout/ReviewStep.tsx

@@ -97,7 +97,7 @@ export function ReviewStep() {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
-      <h3 style={{ fontSize: '1rem', fontWeight: 600, color: '#0a0a0c', margin: 0 }}>
+      <h3 style={{ fontSize: '1rem', fontWeight: 600, color: '#0b0b0b', margin: 0 }}>
         Review Your Order
       </h3>
 
@@ -120,12 +120,12 @@ export function ReviewStep() {
 
       {/* Shipping Summary */}
       <SummarySection title="Shipping To">
-        <div style={{ fontSize: '0.8rem', color: '#374151', lineHeight: 1.6 }}>
+        <div style={{ fontSize: '0.8rem', color: '#444444', lineHeight: 1.6 }}>
           <div style={{ fontWeight: 500 }}>{shipping.name}</div>
           <div>{shipping.address}</div>
           <div>{shipping.city}, {shipping.country} {shipping.postalCode}</div>
-          <div style={{ color: '#8891C7', marginTop: '0.25rem' }}>{shipping.email}</div>
+          <div style={{ color: '#a8a8a8', marginTop: '0.25rem' }}>{shipping.email}</div>
-          <div style={{ color: '#8891C7' }}>{shipping.phone}</div>
+          <div style={{ color: '#a8a8a8' }}>{shipping.phone}</div>
         </div>
       </SummarySection>
 
@@ -136,8 +136,8 @@ export function ReviewStep() {
           justifyContent: 'space-between',
           alignItems: 'center',
         }}>
-          <span style={{ fontSize: '0.85rem', fontWeight: 600, color: '#374151' }}>Total</span>
+          <span style={{ fontSize: '0.85rem', fontWeight: 600, color: '#444444' }}>Total</span>
-          <span style={{ fontSize: '1.1rem', fontWeight: 700, color: '#0a0a0c', fontFamily: 'monospace' }}>
+          <span style={{ fontSize: '1.1rem', fontWeight: 700, color: '#0b0b0b', fontFamily: 'monospace' }}>
             AED {formatAED(orderTotal)}
           </span>
         </div>
@@ -167,15 +167,15 @@ export function ReviewStep() {
           borderRadius: '0.375rem',
           border: 'none',
           background: isProcessing
-            ? 'rgba(59, 130, 246, 0.2)'
+            ? 'rgba(153, 153, 153, 0.2)'
-            : 'linear-gradient(135deg, #3b82f6, #2563eb)',
+            : 'linear-gradient(135deg, #999999, #888888)',
           color: '#ffffff',
           cursor: isProcessing ? 'wait' : 'pointer',
           fontSize: '0.9rem',
           fontWeight: 700,
           transition: 'all 0.2s ease',
           textAlign: 'center',
-          boxShadow: isProcessing ? 'none' : '0 4px 20px rgba(59, 130, 246, 0.2)',
+          boxShadow: isProcessing ? 'none' : '0 4px 20px rgba(153, 153, 153, 0.2)',
         }}
       >
         {isProcessing ? 'Processing Payment...' : 'Place Order'}
@@ -195,7 +195,7 @@ function SummarySection({ title, children }: { title: string; children: React.Re
       <div style={{
         fontSize: '0.65rem',
         fontWeight: 600,
-        color: '#6a73a5',
+        color: '#888888',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
         marginBottom: '0.5rem',
@@ -215,8 +215,8 @@ function SummaryRow({ label, value }: { label: string; value: React.ReactNode })
       alignItems: 'center',
       padding: '0.25rem 0',
     }}>
-      <span style={{ fontSize: '0.8rem', color: '#8891C7' }}>{label}</span>
+      <span style={{ fontSize: '0.8rem', color: '#a8a8a8' }}>{label}</span>
-      <span style={{ fontSize: '0.8rem', color: '#374151' }}>{value}</span>
+      <span style={{ fontSize: '0.8rem', color: '#444444' }}>{value}</span>
     </div>
   );
 }

src/components/checkout/ShippingStep.tsx

@@ -9,7 +9,7 @@ const inputStyle: React.CSSProperties = {
   borderRadius: '0.375rem',
   border: '1px solid rgba(0, 0, 0, 0.08)',
   background: 'rgba(255, 255, 255, 0.8)',
-  color: '#0a0a0c',
+  color: '#0b0b0b',
   fontSize: '0.8rem',
   outline: 'none',
   transition: 'border-color 0.2s ease',
@@ -18,7 +18,7 @@ const inputStyle: React.CSSProperties = {
 const labelStyle: React.CSSProperties = {
   fontSize: '0.7rem',
   fontWeight: 500,
-  color: '#8891C7',
+  color: '#a8a8a8',
   marginBottom: '0.3rem',
   display: 'block',
 };
@@ -80,7 +80,7 @@ export function ShippingStep() {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-      <h3 style={{ fontSize: '1rem', fontWeight: 600, color: '#0a0a0c', margin: 0 }}>
+      <h3 style={{ fontSize: '1rem', fontWeight: 600, color: '#0b0b0b', margin: 0 }}>
         Shipping Information
       </h3>
 
@@ -106,9 +106,9 @@ export function ShippingStep() {
           marginTop: '0.5rem',
           padding: '0.75rem',
           borderRadius: '0.375rem',
-          border: '1px solid rgba(59, 130, 246, 0.5)',
+          border: '1px solid rgba(153, 153, 153, 0.5)',
-          background: 'rgba(59, 130, 246, 0.08)',
+          background: 'rgba(153, 153, 153, 0.08)',
-          color: '#2563eb',
+          color: '#888888',
           cursor: 'pointer',
           fontSize: '0.85rem',
           fontWeight: 600,
@@ -141,7 +141,7 @@ function Field({ label, value, error, onChange, placeholder, type = 'text' }: {
           ...inputStyle,
           borderColor: error ? 'rgba(239, 68, 68, 0.4)' : 'rgba(0, 0, 0, 0.08)',
         }}
-        onFocus={(e) => { e.currentTarget.style.borderColor = error ? 'rgba(239, 68, 68, 0.7)' : 'rgba(59, 130, 246, 0.5)'; }}
+        onFocus={(e) => { e.currentTarget.style.borderColor = error ? 'rgba(239, 68, 68, 0.7)' : 'rgba(153, 153, 153, 0.5)'; }}
         onBlur={(e) => { e.currentTarget.style.borderColor = error ? 'rgba(239, 68, 68, 0.4)' : 'rgba(0, 0, 0, 0.08)'; }}
       />
       {error && <div style={errorStyle}>{error}</div>}

src/components/robotics/AccessoriesShowcase.tsx

@@ -65,9 +65,9 @@ function FilterChip({
       style={{
         padding: '0.5rem 0.85rem',
         borderRadius: 999,
-        border: active ? '1px solid rgba(74,102,216,0.55)' : '1px solid rgba(222,224,240,0.12)',
+        border: active ? '1px solid rgba(145, 145, 145, 0.55)' : '1px solid rgba(231, 231, 231, 0.12)',
-        background: active ? 'rgba(58,85,196,0.18)' : 'rgba(20,19,26,0.7)',
+        background: active ? 'rgba(127, 127, 127, 0.18)' : 'rgba(23, 23, 23, 0.7)',
-        color: active ? '#FFFFFF' : '#DEE0F0',
+        color: active ? '#FFFFFF' : '#e7e7e7',
         fontSize: '0.72rem',
         fontWeight: 600,
         letterSpacing: '0.12em',
@@ -92,7 +92,7 @@ function AccessoryCard({ accessory }: { accessory: Accessory }) {
         display: 'flex',
         flexDirection: 'column',
         height: '100%',
-        color: '#FBFBFD',
+        color: '#fcfcfc',
       }}
     >
       <Link
@@ -114,7 +114,7 @@ function AccessoryCard({ accessory }: { accessory: Accessory }) {
             position: 'absolute',
             inset: 0,
             backgroundImage:
-              'linear-gradient(rgba(39, 63, 148,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 63, 148,0.05) 1px, transparent 1px)',
+              'linear-gradient(rgba(94, 94, 94, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 94, 94, 0.05) 1px, transparent 1px)',
             backgroundSize: '32px 32px',
             maskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
             WebkitMaskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
@@ -162,11 +162,11 @@ function AccessoryCard({ accessory }: { accessory: Accessory }) {
             padding: '0.35rem 0.7rem',
             borderRadius: '999px',
             background: 'rgba(255,255,255,0.05)',
-            border: '1px solid rgba(39, 63, 148,0.2)',
+            border: '1px solid rgba(94, 94, 94, 0.2)',
             fontSize: '0.66rem',
             letterSpacing: '0.18em',
             textTransform: 'uppercase',
-            color: '#DEE0F0',
+            color: '#e7e7e7',
             backdropFilter: 'blur(8px)',
           }}
         >
@@ -176,11 +176,11 @@ function AccessoryCard({ accessory }: { accessory: Accessory }) {
 
       <div style={{ padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '0.75rem', flex: 1 }}>
         <h3 style={{ margin: 0, fontSize: '1.2rem', fontWeight: 600, letterSpacing: '-0.01em' }}>
-          <Link href={detailHref} style={{ color: '#FBFBFD', textDecoration: 'none' }}>
+          <Link href={detailHref} style={{ color: '#fcfcfc', textDecoration: 'none' }}>
             {accessory.name}
           </Link>
         </h3>
-        <p style={{ margin: 0, color: '#8891C7', fontSize: '0.88rem', lineHeight: 1.55, flex: 1 }}>
+        <p style={{ margin: 0, color: '#a8a8a8', fontSize: '0.88rem', lineHeight: 1.55, flex: 1 }}>
           {accessory.tagline}
         </p>
 
@@ -191,10 +191,10 @@ function AccessoryCard({ accessory }: { accessory: Accessory }) {
                 key={c}
                 style={{
                   fontSize: '0.7rem',
-                  color: '#8891C7',
+                  color: '#a8a8a8',
                   padding: '0.2rem 0.5rem',
                   borderRadius: 999,
-                  border: '1px solid rgba(39, 63, 148,0.18)',
+                  border: '1px solid rgba(94, 94, 94, 0.18)',
                   background: 'rgba(15, 12, 8,0.5)',
                   letterSpacing: '0.04em',
                 }}
@@ -209,7 +209,7 @@ function AccessoryCard({ accessory }: { accessory: Accessory }) {
           style={{
             marginTop: 'auto',
             paddingTop: '0.75rem',
-            borderTop: '1px solid rgba(39, 63, 148,0.1)',
+            borderTop: '1px solid rgba(94, 94, 94, 0.1)',
             display: 'flex',
             flexWrap: 'wrap',
             gap: '0.4rem',
@@ -227,15 +227,15 @@ function AccessoryCard({ accessory }: { accessory: Accessory }) {
               gap: '0.4rem',
               padding: '0.55rem 0.75rem',
               borderRadius: 10,
-              background: 'linear-gradient(135deg, rgba(80, 110, 255, 0.32), rgba(40, 55, 145, 0.85))',
+              background: 'linear-gradient(135deg, rgba(168, 168, 168, 0.32), rgba(93, 93, 93, 0.85))',
-              border: '1px solid rgba(120, 140, 255, 0.55)',
+              border: '1px solid rgba(188, 188, 188, 0.55)',
               color: '#FFFFFF',
               fontSize: '0.72rem',
               fontWeight: 700,
               letterSpacing: '0.12em',
               textTransform: 'uppercase',
               textDecoration: 'none',
-              boxShadow: '0 6px 14px rgba(0, 0, 0, 0.35), 0 0 14px rgba(74, 102, 216, 0.22)',
+              boxShadow: '0 6px 14px rgba(0, 0, 0, 0.35), 0 0 14px rgba(145, 145, 145, 0.22)',
             }}
           >
             View details
@@ -250,9 +250,9 @@ function AccessoryCard({ accessory }: { accessory: Accessory }) {
               justifyContent: 'center',
               padding: '0.55rem 0.75rem',
               borderRadius: 10,
-              background: 'rgba(20, 19, 26, 0.6)',
+              background: 'rgba(23, 23, 23, 0.6)',
-              border: '1px solid rgba(222, 224, 240, 0.14)',
+              border: '1px solid rgba(231, 231, 231, 0.14)',
-              color: '#DEE0F0',
+              color: '#e7e7e7',
               fontSize: '0.72rem',
               fontWeight: 600,
               letterSpacing: '0.1em',
@@ -272,9 +272,9 @@ function AccessoryCard({ accessory }: { accessory: Accessory }) {
               justifyContent: 'center',
               padding: '0.55rem 0.75rem',
               borderRadius: 10,
-              background: 'rgba(20, 19, 26, 0.6)',
+              background: 'rgba(23, 23, 23, 0.6)',
-              border: '1px solid rgba(222, 224, 240, 0.14)',
+              border: '1px solid rgba(231, 231, 231, 0.14)',
-              color: '#DEE0F0',
+              color: '#e7e7e7',
               fontSize: '0.72rem',
               fontWeight: 600,
               letterSpacing: '0.1em',

src/components/robotics/BentoGrid.tsx

@@ -21,14 +21,14 @@ export function BentoGrid() {
         gridAutoRows: 'minmax(180px, auto)',
       }}
     >
-      <Tile col="span 7" row="span 2" accent="#DEE0F0">
+      <Tile col="span 7" row="span 2" accent="#e7e7e7">
         <div className="bento-flagship">
           <div className="bento-flagship-copy">
             <span className="eyebrow">Flagship · Dubai</span>
             <h3 style={{ margin: 0, fontSize: 'clamp(1.4rem, 2.6vw, 2rem)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
               <span className="text-gradient">Unitree G1 humanoid live in our Dubai showroom.</span>
             </h3>
-            <p style={{ margin: 0, color: '#DEE0F0', fontSize: '0.92rem', lineHeight: 1.6 }}>
+            <p style={{ margin: 0, color: '#e7e7e7', fontSize: '0.92rem', lineHeight: 1.6 }}>
               Configure persona, attire, and accessories. Then book a live demo.
             </p>
             <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginTop: '0.4rem' }}>
@@ -48,41 +48,41 @@ export function BentoGrid() {
         </div>
       </Tile>
 
-      <Tile col="span 5" row="span 1" accent="#273F94" icon={SOC_PATHS.bolt}>
+      <Tile col="span 5" row="span 1" accent="#5e5e5e" icon={SOC_PATHS.bolt}>
         <span className="eyebrow">Sales & demos</span>
         <h3 style={{ margin: 0, fontSize: 'clamp(1.2rem, 2vw, 1.5rem)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.15 }}>
           <span className="text-gradient">Fast quotes for UAE businesses.</span>
         </h3>
-        <p style={{ margin: 0, color: '#8891C7', fontSize: '0.88rem', lineHeight: 1.55 }}>
+        <p style={{ margin: 0, color: '#a8a8a8', fontSize: '0.88rem', lineHeight: 1.55 }}>
           Tell us your use case we respond within one business day with availability and pricing.
         </p>
       </Tile>
 
-      <Tile col="span 5" row="span 1" accent="#8891C7" icon={SOC_PATHS.shield}>
+      <Tile col="span 5" row="span 1" accent="#a8a8a8" icon={SOC_PATHS.shield}>
         <span className="eyebrow">End-to-end</span>
         <h3 style={{ margin: 0, fontSize: 'clamp(1.2rem, 2vw, 1.5rem)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.15 }}>
           <span className="text-gradient">Procurement, deployment, support.</span>
         </h3>
-        <p style={{ margin: 0, color: '#8891C7', fontSize: '0.88rem', lineHeight: 1.55 }}>
+        <p style={{ margin: 0, color: '#a8a8a8', fontSize: '0.88rem', lineHeight: 1.55 }}>
           Local team handles import, setup, training, and ongoing service across the UAE.
         </p>
       </Tile>
 
-      <Tile col="span 4" row="span 1" accent="#DEE0F0" icon={SOC_PATHS.brain}>
+      <Tile col="span 4" row="span 1" accent="#e7e7e7" icon={SOC_PATHS.brain}>
         <span className="eyebrow">UAE access · Unitree &amp; Pudu</span>
         <h3 style={{ margin: 0, fontSize: 'clamp(1.05rem, 1.8vw, 1.3rem)', fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1.2 }}>
           <span className="text-gradient">Unitree · Pudu one Dubai team.</span>
         </h3>
       </Tile>
 
-      <Tile col="span 4" row="span 1" accent="#273F94" icon={SOC_PATHS.globe}>
+      <Tile col="span 4" row="span 1" accent="#5e5e5e" icon={SOC_PATHS.globe}>
         <span className="eyebrow">10+ industries</span>
         <h3 style={{ margin: 0, fontSize: 'clamp(1.05rem, 1.8vw, 1.3rem)', fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1.2 }}>
           <span className="text-gradient">Hospitality, security, healthcare, retail.</span>
         </h3>
       </Tile>
 
-      <Tile col="span 4" row="span 1" accent="#8891C7">
+      <Tile col="span 4" row="span 1" accent="#a8a8a8">
         <span className="eyebrow">Configurator</span>
         <h3 style={{ margin: 0, fontSize: 'clamp(1.05rem, 1.8vw, 1.3rem)', fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1.2 }}>
           <span className="text-gradient">3D persona builder for the G1.</span>
@@ -94,7 +94,7 @@ export function BentoGrid() {
             display: 'inline-flex',
             alignItems: 'center',
             gap: '0.4rem',
-            color: '#8891C7',
+            color: '#a8a8a8',
             fontSize: '0.78rem',
             letterSpacing: '0.18em',
             textTransform: 'uppercase',

src/components/robotics/BrandShowcase.tsx

@@ -79,12 +79,12 @@ function BrandCard({
         minHeight: 280,
         borderRadius: 22,
         background:
-          `radial-gradient(ellipse 60% 80% at 100% 0%, ${accent}1F, transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.86), rgba(8,8,10,0.96))`,
+          `radial-gradient(ellipse 60% 80% at 100% 0%, ${accent}1F, transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.86), rgba(9, 9, 9, 0.96))`,
         border: `1px solid ${accent}33`,
-        color: '#FBFBFD',
+        color: '#fcfcfc',
         textDecoration: 'none',
         overflow: 'hidden',
-        boxShadow: '0 18px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(222,224,240,0.06)',
+        boxShadow: '0 18px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
         transition: 'transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease, box-shadow 0.35s ease',
       }}
     >
@@ -110,7 +110,7 @@ function BrandCard({
           position: 'absolute',
           inset: 0,
           backgroundImage:
-            'linear-gradient(rgba(199, 207, 230,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 207, 230,0.04) 1px, transparent 1px)',
+            'linear-gradient(rgba(215, 215, 215, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(215, 215, 215, 0.04) 1px, transparent 1px)',
           backgroundSize: '32px 32px',
           maskImage: 'radial-gradient(ellipse 60% 80% at 50% 40%, #000 30%, transparent 80%)',
           WebkitMaskImage: 'radial-gradient(ellipse 60% 80% at 50% 40%, #000 30%, transparent 80%)',
@@ -148,7 +148,7 @@ function BrandCard({
               fontSize: '0.62rem',
               letterSpacing: '0.26em',
               textTransform: 'uppercase',
-              color: '#8891C7',
+              color: '#a8a8a8',
               fontWeight: 700,
             }}
           >
@@ -164,7 +164,7 @@ function BrandCard({
               padding: '0.2rem 0.5rem',
               borderRadius: 999,
               border: `1px solid ${accent}55`,
-              background: 'rgba(14,13,18,0.6)',
+              background: 'rgba(16, 16, 16, 0.6)',
             }}
           >
             {count} {count === 1 ? 'model' : 'models'}
@@ -200,7 +200,7 @@ function BrandCard({
         <p
           style={{
             margin: 0,
-            color: '#D7DBEA',
+            color: '#e1e1e1',
             fontSize: '0.92rem',
             lineHeight: 1.55,
           }}
@@ -227,7 +227,7 @@ function BrandCard({
                 fontSize: '0.68rem',
                 letterSpacing: '0.16em',
                 textTransform: 'uppercase',
-                color: '#DEE0F0',
+                color: '#e7e7e7',
                 background: `${accent}14`,
                 border: `1px solid ${accent}44`,
                 fontWeight: 600,
@@ -265,8 +265,8 @@ function BrandCard({
           borderRadius: 16,
           overflow: 'hidden',
           background:
-            `radial-gradient(ellipse 70% 50% at 50% 60%, ${accent}22 0%, transparent 65%), linear-gradient(180deg, rgba(28,27,33,0.6), rgba(10,10,12,0.95))`,
+            `radial-gradient(ellipse 70% 50% at 50% 60%, ${accent}22 0%, transparent 65%), linear-gradient(180deg, rgba(30, 30, 30, 0.6), rgba(11, 11, 11, 0.95))`,
-          border: '1px solid rgba(222,224,240,0.08)',
+          border: '1px solid rgba(231, 231, 231, 0.08)',
         }}
       >
         {/* inner grid */}
@@ -276,7 +276,7 @@ function BrandCard({
             position: 'absolute',
             inset: 0,
             backgroundImage:
-              'linear-gradient(rgba(199, 207, 230,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 207, 230,0.06) 1px, transparent 1px)',
+              'linear-gradient(rgba(215, 215, 215, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(215, 215, 215, 0.06) 1px, transparent 1px)',
             backgroundSize: '24px 24px',
             maskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
             WebkitMaskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
@@ -332,7 +332,7 @@ function BrandCard({
             width: '70%',
             height: '92%',
             filter:
-              'drop-shadow(0 18px 28px rgba(0,0,0,0.78)) drop-shadow(0 0 22px rgba(58,85,196,0.45))',
+              'drop-shadow(0 18px 28px rgba(0,0,0,0.78)) drop-shadow(0 0 22px rgba(127, 127, 127, 0.45))',
             transition: 'transform 0.5s cubic-bezier(0.16,1,0.3,1)',
           }}
         >
@@ -379,7 +379,7 @@ function BrandCard({
             right: '5%',
             bottom: '24%',
             height: 1,
-            background: 'linear-gradient(90deg, transparent, rgba(222,224,240,0.55), transparent)',
+            background: 'linear-gradient(90deg, transparent, rgba(231, 231, 231, 0.55), transparent)',
             pointerEvents: 'none',
           }}
         />
@@ -392,7 +392,7 @@ function BrandCard({
             padding: '0.25rem 0.55rem',
             borderRadius: 999,
             border: `1px solid ${accent}55`,
-            background: 'rgba(14,13,18,0.75)',
+            background: 'rgba(16, 16, 16, 0.75)',
             color: accent,
             fontSize: '0.58rem',
             fontWeight: 800,

src/components/robotics/BuSunaidahSection.tsx

@@ -14,9 +14,9 @@ export function BuSunaidahSection() {
         padding: 'clamp(2rem, 5vw, 3.5rem)',
         overflow: 'hidden',
         background:
-          'radial-gradient(ellipse 60% 80% at 0% 100%, rgba(39, 63, 148,0.18), transparent 65%), radial-gradient(ellipse 70% 60% at 100% 0%, rgba(222, 224, 240,0.12), transparent 60%), linear-gradient(135deg, rgba(28, 27, 33,0.95), rgba(5,5,5,0.98))',
+          'radial-gradient(ellipse 60% 80% at 0% 100%, rgba(94, 94, 94, 0.18), transparent 65%), radial-gradient(ellipse 70% 60% at 100% 0%, rgba(231, 231, 231, 0.12), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(5,5,5,0.98))',
-        border: '1px solid rgba(39, 63, 148,0.32)',
+        border: '1px solid rgba(94, 94, 94, 0.32)',
-        boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(222, 224, 240,0.05)',
+        boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(231, 231, 231, 0.05)',
       }}
     >
       <div
@@ -25,7 +25,7 @@ export function BuSunaidahSection() {
           position: 'absolute',
           inset: 0,
           background:
-            'linear-gradient(rgba(39, 63, 148,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 63, 148,0.05) 1px, transparent 1px)',
+            'linear-gradient(rgba(94, 94, 94, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 94, 94, 0.05) 1px, transparent 1px)',
           backgroundSize: '48px 48px',
           maskImage: 'radial-gradient(ellipse 60% 80% at 50% 50%, #000 30%, transparent 80%)',
           WebkitMaskImage: 'radial-gradient(ellipse 60% 80% at 50% 50%, #000 30%, transparent 80%)',
@@ -35,7 +35,7 @@ export function BuSunaidahSection() {
 
       <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))', gap: 'clamp(2rem, 5vw, 3.5rem)', alignItems: 'center' }}>
         <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
-          <span className="eyebrow" style={{ color: '#DEE0F0' }}>
+          <span className="eyebrow" style={{ color: '#e7e7e7' }}>
             Brand · Culture · Storytelling
           </span>
           <h2 style={{ margin: 0, fontSize: 'clamp(1.8rem, 4.4vw, 2.8rem)', lineHeight: 1.1, fontWeight: 300, letterSpacing: '-0.03em' }}>
@@ -43,7 +43,7 @@ export function BuSunaidahSection() {
               Meet Bu Sunaidah.
             </span>
           </h2>
-          <p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, fontSize: '1rem' }}>
+          <p style={{ margin: 0, color: '#e7e7e7', lineHeight: 1.7, fontSize: '1rem' }}>
             An Emirati culture-inspired robotics character Bu Sunaidah is YS Lootah Robotics&apos; community and storytelling ambassador. Designed to celebrate UAE heritage at media events, exhibitions, and innovation programs, Bu Sunaidah shows what intelligent automation looks like when it speaks the language of the region.
           </p>
           <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
@@ -53,8 +53,8 @@ export function BuSunaidahSection() {
               'Community engagement and innovation storytelling',
               'A modern face for advanced robotics in our region',
             ].map((b) => (
-              <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.625rem', color: '#FBFBFD', fontSize: '0.95rem', lineHeight: 1.55 }}>
+              <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.625rem', color: '#fcfcfc', fontSize: '0.95rem', lineHeight: 1.55 }}>
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#DEE0F0" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 4 }} aria-hidden="true">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e7e7e7" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 4 }} aria-hidden="true">
                   <path d="M20 6 9 17l-5-5" />
                 </svg>
                 {b}
@@ -95,7 +95,7 @@ export function BuSunaidahSection() {
               position: 'absolute',
               inset: '-2rem',
               background:
-                'radial-gradient(ellipse 60% 60% at 50% 60%, rgba(222, 224, 240,0.32), transparent 65%)',
+                'radial-gradient(ellipse 60% 60% at 50% 60%, rgba(231, 231, 231, 0.32), transparent 65%)',
               filter: 'blur(28px)',
               pointerEvents: 'none',
             }}
@@ -108,9 +108,9 @@ export function BuSunaidahSection() {
               height: '100%',
               borderRadius: '1.75rem',
               overflow: 'hidden' as const,
-              border: '1px solid rgba(39, 63, 148,0.35)',
+              border: '1px solid rgba(94, 94, 94, 0.35)',
               background:
-                'radial-gradient(ellipse 70% 60% at 50% 55%, rgba(222, 224, 240,0.18), transparent 60%), linear-gradient(180deg, rgba(28, 27, 33,0.85), rgba(5,5,5,0.95))',
+                'radial-gradient(ellipse 70% 60% at 50% 55%, rgba(231, 231, 231, 0.18), transparent 60%), linear-gradient(180deg, rgba(30, 30, 30, 0.85), rgba(5,5,5,0.95))',
               boxShadow: '0 30px 100px rgba(0,0,0,0.7)',
               textDecoration: 'none' as const,
               color: 'inherit' as const,
@@ -134,9 +134,9 @@ export function BuSunaidahSection() {
                   style={{
                     padding: '0.4rem 0.75rem',
                     borderRadius: 999,
-                    background: 'rgba(14, 13, 18,0.7)',
+                    background: 'rgba(16, 16, 16, 0.7)',
-                    border: '1px solid rgba(39, 63, 148,0.35)',
+                    border: '1px solid rgba(94, 94, 94, 0.35)',
-                    color: '#DEE0F0',
+                    color: '#e7e7e7',
                     fontSize: '0.66rem',
                     letterSpacing: '0.22em',
                     textTransform: 'uppercase',
@@ -150,9 +150,9 @@ export function BuSunaidahSection() {
                   style={{
                     padding: '0.35rem 0.65rem',
                     borderRadius: 999,
-                    background: 'rgba(222, 224, 240,0.18)',
+                    background: 'rgba(231, 231, 231, 0.18)',
-                    border: '1px solid rgba(222, 224, 240,0.4)',
+                    border: '1px solid rgba(231, 231, 231, 0.4)',
-                    color: '#FBFBFD',
+                    color: '#fcfcfc',
                     fontSize: '0.7rem',
                     letterSpacing: '0.16em',
                     textTransform: 'uppercase',
@@ -199,7 +199,7 @@ export function BuSunaidahSection() {
                     textAlign: 'center',
                     padding: 'clamp(1.25rem, 4vw, 2rem)',
                     background:
-                      'radial-gradient(ellipse 60% 60% at 50% 35%, rgba(58, 85, 196, 0.25), transparent 65%)',
+                      'radial-gradient(ellipse 60% 60% at 50% 35%, rgba(127, 127, 127, 0.25), transparent 65%)',
                   }}
                 >
                   <span
@@ -212,9 +212,9 @@ export function BuSunaidahSection() {
                       height: 78,
                       borderRadius: 22,
                       color: '#FFFFFF',
-                      border: '1px solid rgba(222, 224, 240, 0.28)',
+                      border: '1px solid rgba(231, 231, 231, 0.28)',
                       background:
-                        'radial-gradient(ellipse 60% 60% at 30% 30%, rgba(255, 84, 165, 0.55), transparent 60%), radial-gradient(ellipse 60% 60% at 70% 70%, rgba(255, 165, 84, 0.45), transparent 60%), linear-gradient(135deg, rgba(58, 85, 196, 0.65), rgba(20, 20, 28, 0.85))',
+                        'radial-gradient(ellipse 60% 60% at 30% 30%, rgba(255, 84, 165, 0.55), transparent 60%), radial-gradient(ellipse 60% 60% at 70% 70%, rgba(255, 165, 84, 0.45), transparent 60%), linear-gradient(135deg, rgba(127, 127, 127, 0.65), rgba(24, 24, 24, 0.85))',
                       boxShadow: '0 18px 40px rgba(0,0,0,0.55)',
                     }}
                   >
@@ -226,7 +226,7 @@ export function BuSunaidahSection() {
                       letterSpacing: '0.28em',
                       textTransform: 'uppercase',
                       fontWeight: 700,
-                      color: '#8891C7',
+                      color: '#a8a8a8',
                     }}
                   >
                     Portrait coming soon
@@ -238,7 +238,7 @@ export function BuSunaidahSection() {
                       letterSpacing: '-0.005em',
                       lineHeight: 1.4,
                       maxWidth: 280,
-                      color: '#FBFBFD',
+                      color: '#fcfcfc',
                     }}
                   >
                     View Bu Sunaidah&apos;s latest moments on Instagram

src/components/robotics/CategoryShowcaseScroll.tsx

@@ -171,15 +171,15 @@ export function CategoryShowcaseScroll() {
           width: 100%;
           padding: 1.1rem 1.15rem 1rem;
           border-radius: 16px;
-          border: 1px solid rgba(222, 224, 240, 0.16);
+          border: 1px solid rgba(231, 231, 231, 0.16);
           background:
-            radial-gradient(ellipse 80% 60% at 100% 0%, rgba(74, 102, 216, 0.12), transparent 60%),
+            radial-gradient(ellipse 80% 60% at 100% 0%, rgba(145, 145, 145, 0.12), transparent 60%),
-            linear-gradient(180deg, rgba(28, 27, 38, 0.85), rgba(12, 12, 18, 0.96));
+            linear-gradient(180deg, rgba(33, 33, 33, 0.85), rgba(15, 15, 15, 0.96));
           color: #FFFFFF;
           text-decoration: none;
           overflow: hidden;
           box-shadow:
-            0 1px 0 rgba(222, 224, 240, 0.05) inset,
+            0 1px 0 rgba(231, 231, 231, 0.05) inset,
             0 14px 30px rgba(0, 0, 0, 0.4);
           transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s, background 0.35s;
         }
@@ -190,18 +190,18 @@ export function CategoryShowcaseScroll() {
           left: 14px;
           right: 14px;
           height: 1px;
-          background: linear-gradient(90deg, transparent, rgba(74, 102, 216, 0.45), transparent);
+          background: linear-gradient(90deg, transparent, rgba(145, 145, 145, 0.45), transparent);
           pointer-events: none;
           z-index: 1;
         }
         .cat:hover {
-          border-color: rgba(74, 102, 216, 0.55);
+          border-color: rgba(145, 145, 145, 0.55);
           transform: translateY(-3px);
           box-shadow:
             0 22px 50px rgba(0, 0, 0, 0.6),
-            0 0 0 1px rgba(74, 102, 216, 0.32),
+            0 0 0 1px rgba(145, 145, 145, 0.32),
-            0 0 32px rgba(58, 85, 196, 0.26),
+            0 0 32px rgba(127, 127, 127, 0.26),
-            0 1px 0 rgba(222, 224, 240, 0.08) inset;
+            0 1px 0 rgba(231, 231, 231, 0.08) inset;
         }
 
         .cat-hover-glow {
@@ -210,7 +210,7 @@ export function CategoryShowcaseScroll() {
           right: -30%;
           width: 80%;
           height: 100%;
-          background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(74, 102, 216, 0.18), transparent 70%);
+          background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(145, 145, 145, 0.18), transparent 70%);
           filter: blur(40px);
           opacity: 0;
           transition: opacity 0.4s;
@@ -229,7 +229,7 @@ export function CategoryShowcaseScroll() {
           font-size: 0.62rem;
           letter-spacing: 0.3em;
           font-weight: 800;
-          color: #6f78a2;
+          color: #898989;
           font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
         }
         .cat-icon {
@@ -239,16 +239,16 @@ export function CategoryShowcaseScroll() {
           width: 36px;
           height: 36px;
           border-radius: 10px;
-          border: 1px solid rgba(74, 102, 216, 0.35);
+          border: 1px solid rgba(145, 145, 145, 0.35);
-          background: rgba(58, 85, 196, 0.14);
+          background: rgba(127, 127, 127, 0.14);
-          color: #DEE0F0;
+          color: #e7e7e7;
           transition: transform 0.4s, background 0.4s, border-color 0.4s, box-shadow 0.4s;
         }
         .cat:hover .cat-icon {
           transform: scale(1.06);
-          background: rgba(74, 102, 216, 0.28);
+          background: rgba(145, 145, 145, 0.28);
-          border-color: rgba(74, 102, 216, 0.6);
+          border-color: rgba(145, 145, 145, 0.6);
-          box-shadow: 0 0 18px rgba(74, 102, 216, 0.45);
+          box-shadow: 0 0 18px rgba(145, 145, 145, 0.45);
           color: #FFFFFF;
         }
 
@@ -268,7 +268,7 @@ export function CategoryShowcaseScroll() {
         }
         .cat-desc {
           margin: 0;
-          color: #B5BDDB;
+          color: #c8c8c8;
           font-size: 0.82rem;
           line-height: 1.5;
         }
@@ -280,7 +280,7 @@ export function CategoryShowcaseScroll() {
           gap: 0.7rem;
           margin-top: 0.15rem;
           padding-top: 0.7rem;
-          border-top: 1px solid rgba(222, 224, 240, 0.07);
+          border-top: 1px solid rgba(231, 231, 231, 0.07);
         }
         .cat-chips {
           list-style: none;
@@ -295,9 +295,9 @@ export function CategoryShowcaseScroll() {
           letter-spacing: 0.08em;
           padding: 0.28rem 0.6rem;
           border-radius: 999px;
-          border: 1px solid rgba(222, 224, 240, 0.14);
+          border: 1px solid rgba(231, 231, 231, 0.14);
-          background: rgba(14, 13, 18, 0.55);
+          background: rgba(16, 16, 16, 0.55);
-          color: #B5BDDB;
+          color: #c8c8c8;
           font-weight: 600;
           white-space: nowrap;
         }
@@ -309,7 +309,7 @@ export function CategoryShowcaseScroll() {
           letter-spacing: 0.26em;
           text-transform: uppercase;
           font-weight: 800;
-          color: #DEE0F0;
+          color: #e7e7e7;
         }
         .cat-cta-arrow {
           display: inline-flex;
@@ -318,15 +318,15 @@ export function CategoryShowcaseScroll() {
           width: 22px;
           height: 22px;
           border-radius: 999px;
-          border: 1px solid rgba(74, 102, 216, 0.35);
+          border: 1px solid rgba(145, 145, 145, 0.35);
-          background: rgba(58, 85, 196, 0.14);
+          background: rgba(127, 127, 127, 0.14);
-          color: #DEE0F0;
+          color: #e7e7e7;
           transition: transform 0.35s, background 0.35s, border-color 0.35s;
         }
         .cat:hover .cat-cta-arrow {
           transform: translate(2px, -2px);
-          background: rgba(74, 102, 216, 0.32);
+          background: rgba(145, 145, 145, 0.32);
-          border-color: rgba(74, 102, 216, 0.7);
+          border-color: rgba(145, 145, 145, 0.7);
           color: #FFFFFF;
         }
         .cat:hover .cat-cta { color: #FFFFFF; }

src/components/robotics/CompanyStory.tsx

@@ -22,28 +22,28 @@ const PILLARS: Pillar[] = [
     title: 'Artificial Intelligence',
     body: 'AI applications tailored for UAE government and private sector.',
     Icon: Brain,
-    accent: '#DEE0F0',
+    accent: '#e7e7e7',
   },
   {
     num: '02',
     title: 'Robotics Deployment',
     body: 'Humanoid, quadruped, service, and delivery robots across the UAE.',
     Icon: Bot,
-    accent: '#3a55c4',
+    accent: '#7f7f7f',
   },
   {
     num: '03',
     title: 'Digital Transformation',
     body: 'Automation systems and smart projects that modernize operations.',
     Icon: Workflow,
-    accent: '#D7DBEA',
+    accent: '#e1e1e1',
   },
   {
     num: '04',
     title: 'Training & Enablement',
     body: 'Coding and robotics programs preparing the next generation of UAE talent.',
     Icon: GraduationCap,
-    accent: '#8891C7',
+    accent: '#a8a8a8',
   },
 ];
 
@@ -56,9 +56,9 @@ export function CompanyStory() {
         padding: 'clamp(1.75rem, 4vw, 3rem)',
         overflow: 'hidden',
         background:
-          'radial-gradient(ellipse 60% 80% at 100% 0%, rgba(58,85,196,0.18), transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(222,224,240,0.10), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.94), rgba(5,5,5,0.98))',
+          'radial-gradient(ellipse 60% 80% at 100% 0%, rgba(127, 127, 127, 0.18), transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(231, 231, 231, 0.10), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.94), rgba(5,5,5,0.98))',
-        border: '1px solid rgba(222,224,240,0.12)',
+        border: '1px solid rgba(231, 231, 231, 0.12)',
-        boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(222,224,240,0.06)',
+        boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
       }}
     >
       {/* blueprint grid background */}
@@ -68,7 +68,7 @@ export function CompanyStory() {
           position: 'absolute',
           inset: 0,
           backgroundImage:
-            'linear-gradient(rgba(199, 207, 230,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 207, 230,0.06) 1px, transparent 1px)',
+            'linear-gradient(rgba(215, 215, 215, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(215, 215, 215, 0.06) 1px, transparent 1px)',
           backgroundSize: '36px 36px',
           maskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 25%, transparent 80%)',
           WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 25%, transparent 80%)',
@@ -86,7 +86,7 @@ export function CompanyStory() {
           fontSize: 'clamp(8rem, 18vw, 14rem)',
           fontWeight: 800,
           color: 'transparent',
-          WebkitTextStroke: '1px rgba(222,224,240,0.06)',
+          WebkitTextStroke: '1px rgba(231, 231, 231, 0.06)',
           letterSpacing: '-0.06em',
           lineHeight: 1,
           pointerEvents: 'none',
@@ -123,9 +123,9 @@ export function CompanyStory() {
             </span>
           </h2>
 
-          <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.92rem, 1.7vw, 1rem)', lineHeight: 1.7, maxWidth: 520 }}>
+          <p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.92rem, 1.7vw, 1rem)', lineHeight: 1.7, maxWidth: 520 }}>
             YS Lootah Robotics is part of the{' '}
-            <span style={{ color: '#FBFBFD', fontWeight: 600 }}>Yousuf Saeed Lootah Investment Group</span>.
+            <span style={{ color: '#fcfcfc', fontWeight: 600 }}>Yousuf Saeed Lootah Investment Group</span>.
             We deliver AI, robotics, digital transformation, smart projects, and training programs to government and private sector clients across the UAE.
           </p>
 
@@ -142,8 +142,8 @@ export function CompanyStory() {
               padding: '1.25rem 1.25rem 1.25rem 1.5rem',
               borderRadius: 18,
               background:
-                'linear-gradient(135deg, rgba(39,63,148,0.18) 0%, rgba(28,27,33,0.7) 60%)',
+                'linear-gradient(135deg, rgba(94, 94, 94, 0.18) 0%, rgba(30, 30, 30, 0.7) 60%)',
-              border: '1px solid rgba(222,224,240,0.16)',
+              border: '1px solid rgba(231, 231, 231, 0.16)',
               position: 'relative',
               overflow: 'hidden',
             }}
@@ -156,8 +156,8 @@ export function CompanyStory() {
                 top: 0,
                 bottom: 0,
                 width: 3,
-                background: 'linear-gradient(180deg, #DEE0F0, #3a55c4)',
+                background: 'linear-gradient(180deg, #e7e7e7, #7f7f7f)',
-                boxShadow: '0 0 16px rgba(58,85,196,0.7)',
+                boxShadow: '0 0 16px rgba(127, 127, 127, 0.7)',
               }}
             />
             <p
@@ -166,7 +166,7 @@ export function CompanyStory() {
                 fontSize: 'clamp(1rem, 1.8vw, 1.15rem)',
                 fontStyle: 'italic',
                 lineHeight: 1.5,
-                color: '#FBFBFD',
+                color: '#fcfcfc',
                 fontWeight: 300,
               }}
             >
@@ -182,7 +182,7 @@ export function CompanyStory() {
                 fontSize: '0.65rem',
                 letterSpacing: '0.28em',
                 textTransform: 'uppercase',
-                color: '#8891C7',
+                color: '#a8a8a8',
                 fontWeight: 700,
               }}
             >
@@ -211,7 +211,7 @@ export function CompanyStory() {
               right: '8%',
               height: 1,
               background:
-                'linear-gradient(90deg, transparent, rgba(58,85,196,0.45), rgba(222,224,240,0.45), transparent)',
+                'linear-gradient(90deg, transparent, rgba(127, 127, 127, 0.45), rgba(231, 231, 231, 0.45), transparent)',
               filter: 'blur(0.3px)',
               pointerEvents: 'none',
             }}
@@ -225,7 +225,7 @@ export function CompanyStory() {
               bottom: '8%',
               width: 1,
               background:
-                'linear-gradient(180deg, transparent, rgba(222,224,240,0.4), rgba(58,85,196,0.5), transparent)',
+                'linear-gradient(180deg, transparent, rgba(231, 231, 231, 0.4), rgba(127, 127, 127, 0.5), transparent)',
               filter: 'blur(0.3px)',
               pointerEvents: 'none',
             }}
@@ -272,12 +272,12 @@ function CapabilityTile({ pillar, offset }: { pillar: Pillar; offset: 'up' | 'do
         padding: '1.25rem',
         borderRadius: 18,
         background:
-          'linear-gradient(135deg, rgba(28,27,33,0.78), rgba(8,8,10,0.94))',
+          'linear-gradient(135deg, rgba(30, 30, 30, 0.78), rgba(9, 9, 9, 0.94))',
-        border: '1px solid rgba(222,224,240,0.10)',
+        border: '1px solid rgba(231, 231, 231, 0.10)',
-        color: '#FBFBFD',
+        color: '#fcfcfc',
         overflow: 'hidden',
         minHeight: 200,
-        boxShadow: '0 14px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
+        boxShadow: '0 14px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
         transition: 'transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease',
         transform: offset === 'down' ? 'translateY(8px)' : 'translateY(0)',
       }}
@@ -332,11 +332,11 @@ function CapabilityTile({ pillar, offset }: { pillar: Pillar; offset: 'up' | 'do
             fontSize: '0.7rem',
             fontWeight: 800,
             letterSpacing: '0.18em',
-            color: '#8891C7',
+            color: '#a8a8a8',
             padding: '0.25rem 0.55rem',
             borderRadius: 999,
-            border: '1px solid rgba(136,145,199,0.3)',
+            border: '1px solid rgba(168, 168, 168, 0.3)',
-            background: 'rgba(14,13,18,0.6)',
+            background: 'rgba(16, 16, 16, 0.6)',
           }}
         >
           {num}
@@ -361,7 +361,7 @@ function CapabilityTile({ pillar, offset }: { pillar: Pillar; offset: 'up' | 'do
           margin: 0,
           fontSize: '0.88rem',
           lineHeight: 1.55,
-          color: '#D7DBEA',
+          color: '#e1e1e1',
           position: 'relative',
         }}
       >
@@ -391,16 +391,16 @@ function CredibilityBadge({ Icon, text }: { Icon: LucideIcon; text: string }) {
         gap: '0.5rem',
         padding: '0.45rem 0.8rem',
         borderRadius: 999,
-        background: 'rgba(14,13,18,0.7)',
+        background: 'rgba(16, 16, 16, 0.7)',
-        border: '1px solid rgba(222,224,240,0.18)',
+        border: '1px solid rgba(231, 231, 231, 0.18)',
-        color: '#DEE0F0',
+        color: '#e7e7e7',
         fontSize: '0.7rem',
         fontWeight: 700,
         letterSpacing: '0.16em',
         textTransform: 'uppercase',
       }}
     >
-      <Icon size={13} style={{ color: '#DEE0F0' }} />
+      <Icon size={13} style={{ color: '#e7e7e7' }} />
       {text}
     </span>
   );

src/components/robotics/ConfigureCTA.tsx

@@ -59,19 +59,19 @@ export function ConfigureCTA() {
           isolation: isolate;
           overflow: hidden;
           border-radius: 22px;
-          border: 1px solid rgba(222, 224, 240, 0.12);
+          border: 1px solid rgba(231, 231, 231, 0.12);
           background:
-            radial-gradient(circle at 86% 0%, rgba(58, 85, 196, 0.16), transparent 55%),
+            radial-gradient(circle at 86% 0%, rgba(127, 127, 127, 0.16), transparent 55%),
-            linear-gradient(180deg, #0a0a0d 0%, #050507 100%);
+            linear-gradient(180deg, #0c0c0c 0%, #060606 100%);
           padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem);
-          box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(222, 224, 240, 0.06);
+          box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06);
         }
         .cfg-bg {
           position: absolute;
           inset: 0;
           background:
-            radial-gradient(circle at 16% 50%, rgba(58, 85, 196, 0.18), transparent 55%),
+            radial-gradient(circle at 16% 50%, rgba(127, 127, 127, 0.18), transparent 55%),
-            radial-gradient(circle at 88% 60%, rgba(136, 145, 199, 0.12), transparent 55%);
+            radial-gradient(circle at 88% 60%, rgba(168, 168, 168, 0.12), transparent 55%);
           z-index: 0;
           pointer-events: none;
         }
@@ -81,7 +81,7 @@ export function ConfigureCTA() {
           right: -10%;
           width: 50%;
           height: 140%;
-          background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(74, 102, 216, 0.42), transparent 70%);
+          background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(145, 145, 145, 0.42), transparent 70%);
           filter: blur(50px);
           z-index: 0;
           pointer-events: none;
@@ -90,8 +90,8 @@ export function ConfigureCTA() {
           position: absolute;
           inset: 0;
           background-image:
-            linear-gradient(rgba(199, 207, 230, 0.04) 1px, transparent 1px),
+            linear-gradient(rgba(215, 215, 215, 0.04) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(199, 207, 230, 0.04) 1px, transparent 1px);
+            linear-gradient(90deg, rgba(215, 215, 215, 0.04) 1px, transparent 1px);
           background-size: 40px 40px;
           mask-image: radial-gradient(ellipse 70% 80% at 80% 50%, #000 30%, transparent 85%);
           -webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 50%, #000 30%, transparent 85%);
@@ -129,14 +129,14 @@ export function ConfigureCTA() {
           letter-spacing: 0.32em;
           text-transform: uppercase;
           font-weight: 800;
-          color: #8891C7;
+          color: #a8a8a8;
         }
         .cfg-eyebrow-pulse {
           width: 8px;
           height: 8px;
           border-radius: 999px;
-          background: #DEE0F0;
+          background: #e7e7e7;
-          box-shadow: 0 0 14px rgba(222, 224, 240, 0.9);
+          box-shadow: 0 0 14px rgba(231, 231, 231, 0.9);
           animation: cfg-pulse 2.2s ease-in-out infinite;
         }
         @keyframes cfg-pulse {
@@ -154,7 +154,7 @@ export function ConfigureCTA() {
         .cfg-title :global(.text-gradient) { font-weight: 600; }
         .cfg-desc {
           margin: 0;
-          color: #F0F2F8;
+          color: #f4f4f4;
           font-size: clamp(0.95rem, 1.55vw, 1.05rem);
           line-height: 1.6;
         }
@@ -163,11 +163,11 @@ export function ConfigureCTA() {
           display: inline-flex;
           align-items: center;
           gap: 0.45rem;
-          color: #8891C7;
+          color: #a8a8a8;
           font-size: 0.72rem;
           letter-spacing: 0.04em;
         }
-        .cfg-note :global(svg) { color: #DEE0F0; }
+        .cfg-note :global(svg) { color: #e7e7e7; }
 
         .cfg-actions {
           display: flex;

src/components/robotics/DemoCTA.tsx

@@ -114,38 +114,38 @@ export function DemoCTA({
               <defs>
                 <radialGradient id="dcta-core" cx="50%" cy="50%" r="50%">
                   <stop offset="0%" stopColor="#FFFFFF" />
-                  <stop offset="55%" stopColor="#DEE0F0" />
+                  <stop offset="55%" stopColor="#e7e7e7" />
-                  <stop offset="100%" stopColor="#4a66d8" />
+                  <stop offset="100%" stopColor="#919191" />
                 </radialGradient>
                 <linearGradient id="dcta-route" x1="0" y1="0" x2="1" y2="0">
-                  <stop offset="0%" stopColor="rgba(222, 224, 240, 0.0)" />
+                  <stop offset="0%" stopColor="rgba(231, 231, 231, 0.0)" />
-                  <stop offset="50%" stopColor="rgba(222, 224, 240, 0.55)" />
+                  <stop offset="50%" stopColor="rgba(231, 231, 231, 0.55)" />
-                  <stop offset="100%" stopColor="rgba(74, 102, 216, 0.0)" />
+                  <stop offset="100%" stopColor="rgba(145, 145, 145, 0.0)" />
                 </linearGradient>
               </defs>
 
-              <circle cx="110" cy="110" r="42" fill="none" stroke="rgba(74,102,216,0.45)" strokeWidth="1" strokeDasharray="3 4" />
+              <circle cx="110" cy="110" r="42" fill="none" stroke="rgba(145, 145, 145, 0.45)" strokeWidth="1" strokeDasharray="3 4" />
-              <circle cx="110" cy="110" r="70" fill="none" stroke="rgba(222,224,240,0.18)" strokeWidth="1" strokeDasharray="2 6" />
+              <circle cx="110" cy="110" r="70" fill="none" stroke="rgba(231, 231, 231, 0.18)" strokeWidth="1" strokeDasharray="2 6" />
-              <circle cx="110" cy="110" r="96" fill="none" stroke="rgba(74,102,216,0.22)" strokeWidth="1" />
+              <circle cx="110" cy="110" r="96" fill="none" stroke="rgba(145, 145, 145, 0.22)" strokeWidth="1" />
 
-              <circle cx="110" cy="110" r="42" fill="none" stroke="rgba(74,102,216,0.7)" strokeWidth="1.2">
+              <circle cx="110" cy="110" r="42" fill="none" stroke="rgba(145, 145, 145, 0.7)" strokeWidth="1.2">
                 <animate attributeName="r" values="42;96;42" dur="4.8s" repeatCount="indefinite" />
                 <animate attributeName="opacity" values="0.7;0;0.7" dur="4.8s" repeatCount="indefinite" />
               </circle>
 
               <g>
                 <circle cx="110" cy="110" r="14" fill="url(#dcta-core)" />
-                <circle cx="110" cy="110" r="18" fill="none" stroke="rgba(222,224,240,0.55)" strokeWidth="1" />
+                <circle cx="110" cy="110" r="18" fill="none" stroke="rgba(231, 231, 231, 0.55)" strokeWidth="1" />
               </g>
 
               <g transform="translate(110 110)">
                 <g>
-                  <circle r="3" cx="70" cy="0" fill="#DEE0F0">
+                  <circle r="3" cx="70" cy="0" fill="#e7e7e7">
                     <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="9s" repeatCount="indefinite" />
                   </circle>
                 </g>
                 <g>
-                  <circle r="2.5" cx="-96" cy="0" fill="#A6B2D8">
+                  <circle r="2.5" cx="-96" cy="0" fill="#bfbfbf">
                     <animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="14s" repeatCount="indefinite" />
                   </circle>
                 </g>
@@ -178,11 +178,11 @@ export function DemoCTA({
           isolation: isolate;
           overflow: hidden;
           border-radius: 24px;
-          border: 1px solid rgba(74, 102, 216, 0.18);
+          border: 1px solid rgba(145, 145, 145, 0.18);
           background:
-            radial-gradient(ellipse 60% 100% at 0% 0%, rgba(58, 85, 196, 0.16), transparent 55%),
+            radial-gradient(ellipse 60% 100% at 0% 0%, rgba(127, 127, 127, 0.16), transparent 55%),
-            radial-gradient(ellipse 60% 100% at 100% 100%, rgba(136, 145, 199, 0.14), transparent 55%),
+            radial-gradient(ellipse 60% 100% at 100% 100%, rgba(168, 168, 168, 0.14), transparent 55%),
-            linear-gradient(135deg, rgba(14, 13, 22, 0.92), rgba(6, 6, 10, 0.97));
+            linear-gradient(135deg, rgba(18, 18, 18, 0.92), rgba(8, 8, 8, 0.97));
           box-shadow:
             0 30px 90px rgba(0, 0, 0, 0.55),
             inset 0 1px 0 rgba(255, 255, 255, 0.04);
@@ -198,7 +198,7 @@ export function DemoCTA({
           height: 520px;
           top: -180px;
           left: -160px;
-          background: rgba(58, 85, 196, 0.42);
+          background: rgba(127, 127, 127, 0.42);
           opacity: 0.55;
           animation: dcta-drift 16s ease-in-out infinite alternate;
         }
@@ -207,7 +207,7 @@ export function DemoCTA({
           height: 480px;
           bottom: -200px;
           right: -160px;
-          background: rgba(136, 145, 199, 0.32);
+          background: rgba(168, 168, 168, 0.32);
           opacity: 0.45;
           animation: dcta-drift 22s ease-in-out infinite alternate-reverse;
         }
@@ -219,8 +219,8 @@ export function DemoCTA({
           position: absolute;
           inset: 0;
           background:
-            linear-gradient(rgba(74, 102, 216, 0.06) 1px, transparent 1px),
+            linear-gradient(rgba(145, 145, 145, 0.06) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(74, 102, 216, 0.06) 1px, transparent 1px);
+            linear-gradient(90deg, rgba(145, 145, 145, 0.06) 1px, transparent 1px);
           background-size: 48px 48px;
           mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 25%, transparent 80%);
           -webkit-mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 25%, transparent 80%);
@@ -233,8 +233,8 @@ export function DemoCTA({
             180deg,
             transparent 0,
             transparent 3px,
-            rgba(222, 224, 240, 0.018) 3px,
+            rgba(231, 231, 231, 0.018) 3px,
-            rgba(222, 224, 240, 0.018) 4px
+            rgba(231, 231, 231, 0.018) 4px
           );
           mix-blend-mode: overlay;
           opacity: 0.6;
@@ -265,15 +265,15 @@ export function DemoCTA({
           letter-spacing: 0.32em;
           text-transform: uppercase;
           font-weight: 800;
-          color: #8891C7;
+          color: #a8a8a8;
           width: fit-content;
         }
         .dcta-eyebrow-dot {
           width: 8px;
           height: 8px;
           border-radius: 999px;
-          background: #DEE0F0;
+          background: #e7e7e7;
-          box-shadow: 0 0 14px rgba(222, 224, 240, 0.85);
+          box-shadow: 0 0 14px rgba(231, 231, 231, 0.85);
           animation: dcta-pulse 2.2s ease-in-out infinite;
         }
         @keyframes dcta-pulse {
@@ -293,7 +293,7 @@ export function DemoCTA({
 
         .dcta-desc {
           margin: 0;
-          color: #DEE0F0;
+          color: #e7e7e7;
           font-size: clamp(0.95rem, 1.8vw, 1.05rem);
           line-height: 1.65;
           max-width: 540px;
@@ -313,17 +313,17 @@ export function DemoCTA({
           gap: 0.45rem;
           padding: 0.4rem 0.7rem;
           border-radius: 999px;
-          border: 1px solid rgba(222, 224, 240, 0.12);
+          border: 1px solid rgba(231, 231, 231, 0.12);
-          background: rgba(20, 19, 26, 0.55);
+          background: rgba(23, 23, 23, 0.55);
-          color: #DEE0F0;
+          color: #e7e7e7;
           font-size: 0.78rem;
           font-weight: 600;
           letter-spacing: 0.01em;
           transition: border-color 0.3s, background 0.3s, color 0.3s;
         }
         .dcta-chip:hover {
-          border-color: rgba(74, 102, 216, 0.45);
+          border-color: rgba(145, 145, 145, 0.45);
-          background: rgba(58, 85, 196, 0.14);
+          background: rgba(127, 127, 127, 0.14);
           color: #FFFFFF;
         }
         .dcta-chip-icon {
@@ -333,9 +333,9 @@ export function DemoCTA({
           width: 18px;
           height: 18px;
           border-radius: 999px;
-          color: #DEE0F0;
+          color: #e7e7e7;
-          background: rgba(74, 102, 216, 0.22);
+          background: rgba(145, 145, 145, 0.22);
-          border: 1px solid rgba(74, 102, 216, 0.45);
+          border: 1px solid rgba(145, 145, 145, 0.45);
         }
 
         .dcta-actions {
@@ -350,7 +350,7 @@ export function DemoCTA({
           align-items: center;
           gap: 0.55rem;
           margin-top: 0.4rem;
-          color: #8891C7;
+          color: #a8a8a8;
           font-size: 0.78rem;
           letter-spacing: 0.01em;
         }
@@ -358,8 +358,8 @@ export function DemoCTA({
           width: 7px;
           height: 7px;
           border-radius: 999px;
-          background: #7FD6D0;
+          background: #ababab;
-          box-shadow: 0 0 10px rgba(127, 214, 208, 0.7);
+          box-shadow: 0 0 10px rgba(171, 171, 171, 0.7);
           animation: dcta-pulse 2.4s ease-in-out infinite;
         }
 
@@ -368,10 +368,10 @@ export function DemoCTA({
           display: none;
           position: relative;
           border-radius: 18px;
-          border: 1px solid rgba(74, 102, 216, 0.22);
+          border: 1px solid rgba(145, 145, 145, 0.22);
           background:
-            radial-gradient(ellipse 80% 80% at 50% 30%, rgba(58, 85, 196, 0.18), transparent 65%),
+            radial-gradient(ellipse 80% 80% at 50% 30%, rgba(127, 127, 127, 0.18), transparent 65%),
-            linear-gradient(180deg, rgba(14, 13, 22, 0.75), rgba(6, 6, 10, 0.92));
+            linear-gradient(180deg, rgba(18, 18, 18, 0.75), rgba(8, 8, 8, 0.92));
           padding: 1rem 1.1rem 1.1rem;
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
           overflow: hidden;
@@ -387,7 +387,7 @@ export function DemoCTA({
           font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
           font-size: 0.62rem;
           letter-spacing: 0.32em;
-          color: #DEE0F0;
+          color: #e7e7e7;
           font-weight: 800;
         }
         .dcta-panel-live {
@@ -397,15 +397,15 @@ export function DemoCTA({
           font-size: 0.62rem;
           letter-spacing: 0.22em;
           font-weight: 700;
-          color: #7FD6D0;
+          color: #ababab;
           text-transform: uppercase;
         }
         .dcta-panel-live-dot {
           width: 7px;
           height: 7px;
           border-radius: 999px;
-          background: #7FD6D0;
+          background: #ababab;
-          box-shadow: 0 0 10px rgba(127, 214, 208, 0.75);
+          box-shadow: 0 0 10px rgba(171, 171, 171, 0.75);
           animation: dcta-pulse 1.8s ease-in-out infinite;
         }
 
@@ -413,10 +413,10 @@ export function DemoCTA({
           position: relative;
           aspect-ratio: 1 / 1;
           border-radius: 14px;
-          border: 1px solid rgba(222, 224, 240, 0.06);
+          border: 1px solid rgba(231, 231, 231, 0.06);
           background:
-            radial-gradient(ellipse 80% 80% at 50% 50%, rgba(58, 85, 196, 0.18), transparent 70%),
+            radial-gradient(ellipse 80% 80% at 50% 50%, rgba(127, 127, 127, 0.18), transparent 70%),
-            linear-gradient(180deg, rgba(10, 10, 14, 0.6), rgba(6, 6, 10, 0.9));
+            linear-gradient(180deg, rgba(12, 12, 12, 0.6), rgba(8, 8, 8, 0.9));
           overflow: hidden;
         }
         .dcta-orbit-svg {
@@ -432,7 +432,7 @@ export function DemoCTA({
           font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
           font-size: 0.62rem;
           letter-spacing: 0.18em;
-          color: #8891C7;
+          color: #a8a8a8;
         }
 
         .dcta-panel-rows {
@@ -448,14 +448,14 @@ export function DemoCTA({
           gap: 0.5rem;
           padding: 0.55rem 0.7rem;
           border-radius: 10px;
-          border: 1px solid rgba(222, 224, 240, 0.06);
+          border: 1px solid rgba(231, 231, 231, 0.06);
-          background: rgba(10, 10, 14, 0.55);
+          background: rgba(12, 12, 12, 0.55);
         }
         .dcta-row-k {
           font-size: 0.6rem;
           letter-spacing: 0.26em;
           font-weight: 800;
-          color: #8891C7;
+          color: #a8a8a8;
           text-transform: uppercase;
         }
         .dcta-row-v {

src/components/robotics/ExclusiveAccessSection.tsx

@@ -13,9 +13,9 @@ export function ExclusiveAccessSection() {
         padding: 'clamp(1.75rem, 4vw, 3rem)',
         overflow: 'hidden',
         background:
-          'radial-gradient(ellipse 60% 80% at 0% 0%, rgba(222,224,240,0.18), transparent 60%), radial-gradient(ellipse 70% 80% at 100% 100%, rgba(136,145,199,0.22), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.92), rgba(5,5,5,0.97))',
+          'radial-gradient(ellipse 60% 80% at 0% 0%, rgba(231, 231, 231, 0.18), transparent 60%), radial-gradient(ellipse 70% 80% at 100% 100%, rgba(168, 168, 168, 0.22), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.92), rgba(5,5,5,0.97))',
-        border: '1px solid rgba(39,63,148,0.32)',
+        border: '1px solid rgba(94, 94, 94, 0.32)',
-        boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(222,224,240,0.06)',
+        boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
       }}
     >
       <div
@@ -24,7 +24,7 @@ export function ExclusiveAccessSection() {
           position: 'absolute',
           inset: 0,
           background:
-            'linear-gradient(rgba(39,63,148,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(39,63,148,0.05) 1px, transparent 1px)',
+            'linear-gradient(rgba(94, 94, 94, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 94, 94, 0.05) 1px, transparent 1px)',
           backgroundSize: '48px 48px',
           maskImage: 'radial-gradient(ellipse 60% 80% at 50% 30%, #000 30%, transparent 80%)',
           WebkitMaskImage: 'radial-gradient(ellipse 60% 80% at 50% 30%, #000 30%, transparent 80%)',
@@ -46,16 +46,16 @@ export function ExclusiveAccessSection() {
               gap: '0.6rem',
               padding: '0.5rem 0.9rem',
               borderRadius: 999,
-              border: '1px solid rgba(39,63,148,0.45)',
+              border: '1px solid rgba(94, 94, 94, 0.45)',
-              background: 'rgba(39,63,148,0.10)',
+              background: 'rgba(94, 94, 94, 0.10)',
-              color: '#DEE0F0',
+              color: '#e7e7e7',
               fontSize: '0.7rem',
               letterSpacing: '0.24em',
               textTransform: 'uppercase',
               fontWeight: 700,
             }}
           >
-            <span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: '#DEE0F0', boxShadow: '0 0 10px rgba(222,224,240,0.8)' }} />
+            <span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: '#e7e7e7', boxShadow: '0 0 10px rgba(231, 231, 231, 0.8)' }} />
             UAE Robotics Access
           </span>
 
@@ -65,7 +65,7 @@ export function ExclusiveAccessSection() {
             </span>
           </h2>
 
-          <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.92rem, 1.8vw, 1rem)', lineHeight: 1.7, maxWidth: 520 }}>
+          <p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.92rem, 1.8vw, 1rem)', lineHeight: 1.7, maxWidth: 520 }}>
             Selected solutions delivered to UAE businesses, venues, and innovators from inquiry to live deployment, fully supported in Dubai.
           </p>
 
@@ -76,8 +76,8 @@ export function ExclusiveAccessSection() {
               'Humanoid, quadruped, service, delivery, cleaning robots.',
               'End-to-end procurement, training, and ongoing support.',
             ].map((b) => (
-              <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.65rem', color: '#FBFBFD', fontSize: '0.92rem', lineHeight: 1.5 }}>
+              <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.65rem', color: '#fcfcfc', fontSize: '0.92rem', lineHeight: 1.5 }}>
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#DEE0F0" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 4 }} aria-hidden="true">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e7e7e7" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 4 }} aria-hidden="true">
                   <path d="M20 6 9 17l-5-5" />
                 </svg>
                 {b}
@@ -104,7 +104,7 @@ export function ExclusiveAccessSection() {
             href="/brands/#unitree"
             brand="Unitree"
             tag="Quadruped · Humanoid"
-            accent="#DEE0F0"
+            accent="#e7e7e7"
             primary={{ src: '/images/robots/unitree-g1.webp', alt: 'Unitree G1 humanoid robot' }}
             secondary={{ src: '/images/robots/unitree-go2.webp', alt: 'Unitree Go2 quadruped robot' }}
           />
@@ -112,7 +112,7 @@ export function ExclusiveAccessSection() {
             href="/brands/#pudu"
             brand="Pudu Robotics"
             tag="Service · Delivery · Cleaning"
-            accent="#8891C7"
+            accent="#a8a8a8"
             primary={{ src: '/images/robots/pudu-bellabot.webp', alt: 'Pudu BellaBot multi-tray delivery robot' }}
             secondary={{ src: '/images/robots/pudu-kettybot.webp', alt: 'Pudu KettyBot Pro service robot with built-in advertising display' }}
           />
@@ -169,13 +169,13 @@ function BrandShowcaseTile({
         padding: '1rem',
         borderRadius: 18,
         background:
-          `radial-gradient(ellipse 80% 60% at 30% 0%, ${accent}1F, transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.85), rgba(5,5,5,0.96))`,
+          `radial-gradient(ellipse 80% 60% at 30% 0%, ${accent}1F, transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.85), rgba(5,5,5,0.96))`,
         border: `1px solid ${accent}44`,
-        color: '#FBFBFD',
+        color: '#fcfcfc',
         textDecoration: 'none',
         overflow: 'hidden',
         minHeight: 220,
-        boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
+        boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
       }}
     >
       {/* product visual area */}
@@ -186,9 +186,9 @@ function BrandShowcaseTile({
           minHeight: 130,
           borderRadius: 12,
           background:
-            `radial-gradient(ellipse 60% 50% at 50% 60%, ${accent}1A 0%, transparent 65%), linear-gradient(180deg, rgba(28,27,33,0.7), rgba(10,10,12,0.95))`,
+            `radial-gradient(ellipse 60% 50% at 50% 60%, ${accent}1A 0%, transparent 65%), linear-gradient(180deg, rgba(30, 30, 30, 0.7), rgba(11, 11, 11, 0.95))`,
           overflow: 'hidden',
-          border: '1px solid rgba(222,224,240,0.08)',
+          border: '1px solid rgba(231, 231, 231, 0.08)',
         }}
       >
         <div
@@ -197,7 +197,7 @@ function BrandShowcaseTile({
             position: 'absolute',
             inset: 0,
             backgroundImage:
-              'linear-gradient(rgba(199, 207, 230,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 207, 230,0.06) 1px, transparent 1px)',
+              'linear-gradient(rgba(215, 215, 215, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(215, 215, 215, 0.06) 1px, transparent 1px)',
             backgroundSize: '24px 24px',
             maskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
             WebkitMaskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
@@ -214,7 +214,7 @@ function BrandShowcaseTile({
             width: '70%',
             height: '70%',
             background:
-              'radial-gradient(ellipse 60% 70% at 50% 30%, rgba(58,85,196,0.35) 0%, transparent 65%)',
+              'radial-gradient(ellipse 60% 70% at 50% 30%, rgba(127, 127, 127, 0.35) 0%, transparent 65%)',
             filter: 'blur(8px)',
             pointerEvents: 'none',
           }}
@@ -252,7 +252,7 @@ function BrandShowcaseTile({
             width: '62%',
             height: '90%',
             filter:
-              'drop-shadow(0 16px 28px rgba(0,0,0,0.75)) drop-shadow(0 0 20px rgba(58,85,196,0.4))',
+              'drop-shadow(0 16px 28px rgba(0,0,0,0.75)) drop-shadow(0 0 20px rgba(127, 127, 127, 0.4))',
           }}
         >
           <Image
@@ -271,7 +271,7 @@ function BrandShowcaseTile({
             right: '0.5rem',
             padding: '0.25rem 0.55rem',
             borderRadius: 999,
-            background: 'rgba(14,13,18,0.7)',
+            background: 'rgba(16, 16, 16, 0.7)',
             border: `1px solid ${accent}55`,
             color: accent,
             fontSize: '0.55rem',
@@ -286,7 +286,7 @@ function BrandShowcaseTile({
       </div>
 
       <div style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '0.25rem 0.25rem 0' }}>
-        <span style={{ fontSize: '0.62rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
+        <span style={{ fontSize: '0.62rem', color: '#a8a8a8', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
           {tag}
         </span>
         <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.5rem' }}>
@@ -312,12 +312,12 @@ function TerritoryTile() {
         padding: '1rem',
         borderRadius: 18,
         background:
-          'radial-gradient(ellipse 80% 80% at 100% 0%, rgba(58,85,196,0.30), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.85), rgba(5,5,5,0.96))',
+          'radial-gradient(ellipse 80% 80% at 100% 0%, rgba(127, 127, 127, 0.30), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.85), rgba(5,5,5,0.96))',
-        border: '1px solid rgba(58,85,196,0.45)',
+        border: '1px solid rgba(127, 127, 127, 0.45)',
-        color: '#FBFBFD',
+        color: '#fcfcfc',
         overflow: 'hidden',
         minHeight: 170,
-        boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
+        boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
       }}
     >
       {/* abstract UAE "territory" graphic ring map style */}
@@ -334,25 +334,25 @@ function TerritoryTile() {
       >
         <defs>
           <radialGradient id="terr-glow" cx="50%" cy="50%" r="60%">
-            <stop offset="0%" stopColor="#3a55c4" stopOpacity="0.8" />
+            <stop offset="0%" stopColor="#7f7f7f" stopOpacity="0.8" />
-            <stop offset="100%" stopColor="#3a55c4" stopOpacity="0" />
+            <stop offset="100%" stopColor="#7f7f7f" stopOpacity="0" />
           </radialGradient>
         </defs>
         <circle cx="155" cy="55" r="42" fill="url(#terr-glow)" />
-        <circle cx="155" cy="55" r="32" fill="none" stroke="#DEE0F0" strokeOpacity="0.45" strokeDasharray="2 4" />
+        <circle cx="155" cy="55" r="32" fill="none" stroke="#e7e7e7" strokeOpacity="0.45" strokeDasharray="2 4" />
-        <circle cx="155" cy="55" r="22" fill="none" stroke="#DEE0F0" strokeOpacity="0.65" />
+        <circle cx="155" cy="55" r="22" fill="none" stroke="#e7e7e7" strokeOpacity="0.65" />
-        <circle cx="155" cy="55" r="3.5" fill="#DEE0F0" />
+        <circle cx="155" cy="55" r="3.5" fill="#e7e7e7" />
-        <text x="160" y="44" fontFamily="Inter, sans-serif" fontSize="8" letterSpacing="3" fill="#D7DBEA" textAnchor="start">DXB</text>
+        <text x="160" y="44" fontFamily="Inter, sans-serif" fontSize="8" letterSpacing="3" fill="#e1e1e1" textAnchor="start">DXB</text>
       </svg>
       <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 4 }}>
-        <span style={{ fontSize: '0.62rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
+        <span style={{ fontSize: '0.62rem', color: '#a8a8a8', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
           Sales Territory
         </span>
         <span className="text-gradient-accent" style={{ fontSize: 'clamp(1.6rem, 2.8vw, 2rem)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
           UAE
         </span>
       </div>
-      <span style={{ position: 'relative', fontSize: '0.72rem', color: '#DEE0F0', lineHeight: 1.4, marginTop: 'auto' }}>
+      <span style={{ position: 'relative', fontSize: '0.72rem', color: '#e7e7e7', lineHeight: 1.4, marginTop: 'auto' }}>
         UAE sales rights · Unitree & Pudu solutions.
       </span>
     </div>
@@ -370,12 +370,12 @@ function ShowroomTile() {
         padding: '1rem',
         borderRadius: 18,
         background:
-          'radial-gradient(ellipse 80% 80% at 0% 100%, rgba(222,224,240,0.18), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.85), rgba(5,5,5,0.96))',
+          'radial-gradient(ellipse 80% 80% at 0% 100%, rgba(231, 231, 231, 0.18), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.85), rgba(5,5,5,0.96))',
-        border: '1px solid rgba(222,224,240,0.22)',
+        border: '1px solid rgba(231, 231, 231, 0.22)',
-        color: '#FBFBFD',
+        color: '#fcfcfc',
         overflow: 'hidden',
         minHeight: 170,
-        boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
+        boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
       }}
     >
       <svg
@@ -385,8 +385,8 @@ function ShowroomTile() {
       >
         <defs>
           <linearGradient id="show-floor" x1="0" y1="1" x2="0" y2="0">
-            <stop offset="0%" stopColor="#3a55c4" stopOpacity="0.6" />
+            <stop offset="0%" stopColor="#7f7f7f" stopOpacity="0.6" />
-            <stop offset="100%" stopColor="#3a55c4" stopOpacity="0" />
+            <stop offset="100%" stopColor="#7f7f7f" stopOpacity="0" />
           </linearGradient>
         </defs>
         {/* perspective floor */}
@@ -397,7 +397,7 @@ function ShowroomTile() {
             x2={200 + i * 5}
             y1={70 + i * 14}
             y2={70 + i * 14}
-            stroke="#DEE0F0"
+            stroke="#e7e7e7"
             strokeOpacity={0.35 - i * 0.06}
           />
         ))}
@@ -408,23 +408,23 @@ function ShowroomTile() {
             y1={70}
             x2={30 + i * 36 - 30}
             y2={140}
-            stroke="#DEE0F0"
+            stroke="#e7e7e7"
             strokeOpacity={0.2}
           />
         ))}
         <rect x="60" y="40" width="100" height="55" fill="url(#show-floor)" />
-        <rect x="60" y="40" width="100" height="55" fill="none" stroke="#DEE0F0" strokeOpacity="0.4" />
+        <rect x="60" y="40" width="100" height="55" fill="none" stroke="#e7e7e7" strokeOpacity="0.4" />
-        <circle cx="110" cy="68" r="6" fill="#DEE0F0" />
+        <circle cx="110" cy="68" r="6" fill="#e7e7e7" />
       </svg>
       <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 4 }}>
-        <span style={{ fontSize: '0.62rem', color: '#8891C7', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
+        <span style={{ fontSize: '0.62rem', color: '#a8a8a8', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700 }}>
           Showroom & Demo
         </span>
         <span className="text-gradient-accent" style={{ fontSize: 'clamp(1.4rem, 2.6vw, 1.85rem)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
           Dubai
         </span>
       </div>
-      <span style={{ position: 'relative', fontSize: '0.72rem', color: '#DEE0F0', lineHeight: 1.4, marginTop: 'auto' }}>
+      <span style={{ position: 'relative', fontSize: '0.72rem', color: '#e7e7e7', lineHeight: 1.4, marginTop: 'auto' }}>
         Live demos · City Bay Business Center.
       </span>
     </div>

src/components/robotics/FeaturedRobotsShowcase.tsx

@@ -344,21 +344,21 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           isolation: isolate;
           overflow: hidden;
           border-radius: 28px;
-          border: 1px solid rgba(222, 224, 240, 0.12);
+          border: 1px solid rgba(231, 231, 231, 0.12);
-          background: linear-gradient(180deg, #0a0a0d 0%, #050507 100%);
+          background: linear-gradient(180deg, #0c0c0c 0%, #060606 100%);
           padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2.25rem);
           display: grid;
           gap: clamp(1rem, 2.5vw, 1.75rem);
           box-shadow:
             0 50px 140px rgba(0, 0, 0, 0.6),
-            inset 0 1px 0 rgba(222, 224, 240, 0.06);
+            inset 0 1px 0 rgba(231, 231, 231, 0.06);
         }
         .frs-hero-bg {
           position: absolute;
           inset: 0;
           background:
-            radial-gradient(circle at 78% 22%, rgba(58, 85, 196, 0.32), transparent 50%),
+            radial-gradient(circle at 78% 22%, rgba(127, 127, 127, 0.32), transparent 50%),
-            radial-gradient(circle at 14% 80%, rgba(136, 145, 199, 0.16), transparent 50%);
+            radial-gradient(circle at 14% 80%, rgba(168, 168, 168, 0.16), transparent 50%);
           z-index: 0;
           pointer-events: none;
         }
@@ -368,7 +368,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           right: -10%;
           width: 65%;
           height: 80%;
-          background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(58, 85, 196, 0.55), transparent 70%);
+          background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(127, 127, 127, 0.55), transparent 70%);
           filter: blur(36px);
           z-index: 0;
           pointer-events: none;
@@ -377,8 +377,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           position: absolute;
           inset: 0;
           background-image:
-            linear-gradient(rgba(199, 207, 230, 0.06) 1px, transparent 1px),
+            linear-gradient(rgba(215, 215, 215, 0.06) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(199, 207, 230, 0.06) 1px, transparent 1px);
+            linear-gradient(90deg, rgba(215, 215, 215, 0.06) 1px, transparent 1px);
           background-size: 48px 48px;
           -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 90%);
           mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 90%);
@@ -391,7 +391,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           left: 0;
           width: 36%;
           height: 100%;
-          background: linear-gradient(90deg, transparent, rgba(222, 224, 240, 0.05) 50%, transparent);
+          background: linear-gradient(90deg, transparent, rgba(231, 231, 231, 0.05) 50%, transparent);
           z-index: 0;
           pointer-events: none;
         }
@@ -420,9 +420,9 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           gap: 0.55rem;
           padding: 0.4rem 0.9rem;
           border-radius: 999px;
-          background: rgba(14, 13, 18, 0.7);
+          background: rgba(16, 16, 16, 0.7);
-          border: 1px solid rgba(222, 224, 240, 0.2);
+          border: 1px solid rgba(231, 231, 231, 0.2);
-          color: #ECEEF6;
+          color: #f1f1f1;
           font-size: 0.6rem;
           font-weight: 800;
           letter-spacing: 0.26em;
@@ -434,8 +434,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           width: 6px;
           height: 6px;
           border-radius: 999px;
-          background: #DEE0F0;
+          background: #e7e7e7;
-          box-shadow: 0 0 12px rgba(222, 224, 240, 0.85);
+          box-shadow: 0 0 12px rgba(231, 231, 231, 0.85);
           animation: frs-pulse 2.2s ease-in-out infinite;
         }
         @keyframes frs-pulse {
@@ -448,7 +448,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           gap: 0.55rem;
           padding: 0.4rem 0.9rem;
           border-radius: 999px;
-          background: rgba(14, 13, 18, 0.7);
+          background: rgba(16, 16, 16, 0.7);
           border: 1px solid;
           font-size: 0.6rem;
           font-weight: 800;
@@ -487,7 +487,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           height: 86%;
           transform: translateX(-50%);
           background:
-            radial-gradient(ellipse 60% 60% at 50% 45%, rgba(74, 102, 216, 0.95), transparent 70%),
+            radial-gradient(ellipse 60% 60% at 50% 45%, rgba(145, 145, 145, 0.95), transparent 70%),
             radial-gradient(ellipse 38% 48% at 50% 30%, rgba(255, 255, 255, 0.28), transparent 60%);
           filter: blur(26px);
           z-index: 0;
@@ -501,8 +501,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           height: 72%;
           transform: translateX(-50%);
           background:
-            radial-gradient(ellipse 52% 60% at 50% 50%, rgba(74, 102, 216, 0.72), transparent 70%),
+            radial-gradient(ellipse 52% 60% at 50% 50%, rgba(145, 145, 145, 0.72), transparent 70%),
-            radial-gradient(ellipse 32% 50% at 50% 50%, rgba(190, 210, 255, 0.45), transparent 75%);
+            radial-gradient(ellipse 32% 50% at 50% 50%, rgba(223, 223, 223, 0.45), transparent 75%);
           filter: blur(38px);
           z-index: 0;
           pointer-events: none;
@@ -514,7 +514,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           width: 66%;
           height: 62%;
           transform: translateX(-50%);
-          background: radial-gradient(ellipse 52% 70% at 50% 30%, rgba(222, 224, 240, 0.42), transparent 60%);
+          background: radial-gradient(ellipse 52% 70% at 50% 30%, rgba(231, 231, 231, 0.42), transparent 60%);
           filter: blur(10px);
           z-index: 0;
           pointer-events: none;
@@ -527,7 +527,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           height: 28%;
           transform: translateX(-50%);
           background:
-            radial-gradient(ellipse 50% 50% at 50% 50%, rgba(140, 178, 255, 0.7), transparent 65%),
+            radial-gradient(ellipse 50% 50% at 50% 50%, rgba(198, 198, 198, 0.7), transparent 65%),
             radial-gradient(ellipse 25% 30% at 50% 40%, rgba(255, 255, 255, 0.78), transparent 70%);
           filter: blur(20px);
           mix-blend-mode: screen;
@@ -542,7 +542,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           font-size: clamp(3rem, 11vw, 8.5rem);
           font-weight: 800;
           color: transparent;
-          -webkit-text-stroke: 1px rgba(222, 224, 240, 0.18);
+          -webkit-text-stroke: 1px rgba(231, 231, 231, 0.18);
           line-height: 0.85;
           white-space: nowrap;
           letter-spacing: -0.06em;
@@ -559,8 +559,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           background: transparent;
           filter:
             drop-shadow(0 38px 70px rgba(0, 0, 0, 0.95))
-            drop-shadow(0 0 38px rgba(74, 102, 216, 0.7))
+            drop-shadow(0 0 38px rgba(145, 145, 145, 0.7))
-            drop-shadow(0 0 70px rgba(58, 85, 196, 0.4))
+            drop-shadow(0 0 70px rgba(127, 127, 127, 0.4))
             saturate(1.12)
             contrast(1.08);
         }
@@ -576,9 +576,9 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           right: 10%;
           bottom: 12%;
           height: 1px;
-          background: linear-gradient(90deg, transparent, rgba(222, 224, 240, 0.7), transparent);
+          background: linear-gradient(90deg, transparent, rgba(231, 231, 231, 0.7), transparent);
           z-index: 1;
-          box-shadow: 0 0 18px rgba(222, 224, 240, 0.4);
+          box-shadow: 0 0 18px rgba(231, 231, 231, 0.4);
           pointer-events: none;
         }
         .frs-hero-reflect {
@@ -602,10 +602,10 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           z-index: 3;
           pointer-events: none;
         }
-        .frs-corner-tl { top: 6px; left: 6px; border-top: 1px solid rgba(222, 224, 240, 0.32); border-left: 1px solid rgba(222, 224, 240, 0.32); }
+        .frs-corner-tl { top: 6px; left: 6px; border-top: 1px solid rgba(231, 231, 231, 0.32); border-left: 1px solid rgba(231, 231, 231, 0.32); }
-        .frs-corner-tr { top: 6px; right: 6px; border-top: 1px solid rgba(222, 224, 240, 0.32); border-right: 1px solid rgba(222, 224, 240, 0.32); }
+        .frs-corner-tr { top: 6px; right: 6px; border-top: 1px solid rgba(231, 231, 231, 0.32); border-right: 1px solid rgba(231, 231, 231, 0.32); }
-        .frs-corner-bl { bottom: 6px; left: 6px; border-bottom: 1px solid rgba(222, 224, 240, 0.32); border-left: 1px solid rgba(222, 224, 240, 0.32); }
+        .frs-corner-bl { bottom: 6px; left: 6px; border-bottom: 1px solid rgba(231, 231, 231, 0.32); border-left: 1px solid rgba(231, 231, 231, 0.32); }
-        .frs-corner-br { bottom: 6px; right: 6px; border-bottom: 1px solid rgba(222, 224, 240, 0.32); border-right: 1px solid rgba(222, 224, 240, 0.32); }
+        .frs-corner-br { bottom: 6px; right: 6px; border-bottom: 1px solid rgba(231, 231, 231, 0.32); border-right: 1px solid rgba(231, 231, 231, 0.32); }
 
         /* hero copy */
         .frs-hero-copy {
@@ -619,7 +619,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           content: '';
           position: absolute;
           inset: -1rem -1.5rem;
-          background: radial-gradient(ellipse 75% 80% at 50% 50%, rgba(5, 5, 8, 0.55), transparent 75%);
+          background: radial-gradient(ellipse 75% 80% at 50% 50%, rgba(7, 7, 7, 0.55), transparent 75%);
           z-index: -1;
           pointer-events: none;
           border-radius: 22px;
@@ -644,7 +644,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           font-weight: 800;
           letter-spacing: 0.3em;
           text-transform: uppercase;
-          color: #DEE0F0;
+          color: #e7e7e7;
           white-space: nowrap;
         }
         .frs-name {
@@ -659,7 +659,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
         .frs-name :global(.text-gradient) { font-weight: 600; }
         .frs-tagline {
           margin: 0;
-          color: #F2F4FA;
+          color: #f6f6f6;
           font-size: clamp(1rem, 1.7vw, 1.12rem);
           line-height: 1.9;
           max-width: 620px;
@@ -685,13 +685,13 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           height: 30px;
           padding: 0 0.85rem;
           border-radius: 999px;
-          border: 1px solid rgba(222, 224, 240, 0.22);
+          border: 1px solid rgba(231, 231, 231, 0.22);
-          background: rgba(14, 13, 18, 0.55);
+          background: rgba(16, 16, 16, 0.55);
           font-size: 0.6rem;
           letter-spacing: 0.2em;
           text-transform: uppercase;
           font-weight: 700;
-          color: #DEE0F0;
+          color: #e7e7e7;
           white-space: nowrap;
           backdrop-filter: blur(10px);
         }
@@ -706,8 +706,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           width: 6px;
           height: 6px;
           border-radius: 999px;
-          background: var(--frs-acc, #DEE0F0);
+          background: var(--frs-acc, #e7e7e7);
-          box-shadow: 0 0 8px color-mix(in srgb, var(--frs-acc, #DEE0F0) 70%, transparent);
+          box-shadow: 0 0 8px color-mix(in srgb, var(--frs-acc, #e7e7e7) 70%, transparent);
         }
         .frs-chip-on {
           border-color: rgba(34, 197, 94, 0.45);
@@ -719,7 +719,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           align-items: center;
           gap: 0.4rem;
           padding: 0.85rem 0.95rem;
-          color: #DEE0F0;
+          color: #e7e7e7;
           font-size: 0.72rem;
           font-weight: 700;
           letter-spacing: 0.2em;
@@ -730,7 +730,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
         }
         .frs-cta-link:hover {
           color: #FFFFFF;
-          border-bottom-color: rgba(222, 224, 240, 0.55);
+          border-bottom-color: rgba(231, 231, 231, 0.55);
           transform: translateX(2px);
         }
         .frs-features {
@@ -746,7 +746,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           grid-template-columns: 14px 1fr;
           align-items: start;
           gap: 0.85rem;
-          color: #F0F2F8;
+          color: #f4f4f4;
           font-size: 0.97rem;
           line-height: 1.85;
         }
@@ -755,8 +755,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           width: 6px;
           height: 6px;
           border-radius: 999px;
-          background: linear-gradient(135deg, #DEE0F0, #3a55c4);
+          background: linear-gradient(135deg, #e7e7e7, #7f7f7f);
-          box-shadow: 0 0 12px rgba(58, 85, 196, 0.55);
+          box-shadow: 0 0 12px rgba(127, 127, 127, 0.55);
         }
         .frs-cta-block {
           display: flex;
@@ -779,7 +779,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           gap: 0.75rem;
           padding: 1.05rem 1.7rem;
           border-radius: 999px;
-          background: linear-gradient(135deg, #5a76e8 0%, #4a66d8 35%, #2f4cb4 70%, #273F94 100%);
+          background: linear-gradient(135deg, #a1a1a1 0%, #919191 35%, #727272 70%, #5e5e5e 100%);
           color: #FFFFFF;
           font-size: 0.8rem;
           font-weight: 800;
@@ -787,9 +787,9 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           text-transform: uppercase;
           text-decoration: none;
           box-shadow:
-            0 28px 62px rgba(39, 63, 148, 0.62),
+            0 28px 62px rgba(94, 94, 94, 0.62),
-            0 0 0 1px rgba(222, 224, 240, 0.28),
+            0 0 0 1px rgba(231, 231, 231, 0.28),
-            0 0 38px rgba(74, 102, 216, 0.45),
+            0 0 38px rgba(145, 145, 145, 0.45),
             inset 0 1px 0 rgba(255, 255, 255, 0.28);
           overflow: hidden;
           transition: transform 0.3s, box-shadow 0.3s;
@@ -803,7 +803,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           transform: translateX(-100%);
           transition: transform 0.6s ease;
         }
-        .frs-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 28px 62px rgba(39, 63, 148, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
+        .frs-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 28px 62px rgba(94, 94, 94, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
         .frs-cta-primary:hover::before { transform: translateX(100%); }
         .frs-cta-primary-arrow {
           display: inline-flex;
@@ -823,10 +823,10 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           gap: 0.65rem;
           padding: 1rem 1.45rem 1rem 1.5rem;
           border-radius: 999px;
-          border: 1px solid rgba(222, 224, 240, 0.55);
+          border: 1px solid rgba(231, 231, 231, 0.55);
           background:
-            linear-gradient(135deg, rgba(58, 85, 196, 0.16), rgba(14, 13, 18, 0.55) 55%),
+            linear-gradient(135deg, rgba(127, 127, 127, 0.16), rgba(16, 16, 16, 0.55) 55%),
-            rgba(14, 13, 18, 0.55);
+            rgba(16, 16, 16, 0.55);
           color: #FFFFFF;
           font-size: 0.76rem;
           font-weight: 800;
@@ -837,9 +837,9 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           -webkit-backdrop-filter: blur(16px);
           box-shadow:
             0 14px 32px rgba(0, 0, 0, 0.6),
-            inset 0 1px 0 rgba(222, 224, 240, 0.22),
+            inset 0 1px 0 rgba(231, 231, 231, 0.22),
-            0 0 0 1px rgba(58, 85, 196, 0.2),
+            0 0 0 1px rgba(127, 127, 127, 0.2),
-            0 0 24px rgba(58, 85, 196, 0.18);
+            0 0 24px rgba(127, 127, 127, 0.18);
           overflow: hidden;
           transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
         }
@@ -848,22 +848,22 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           position: absolute;
           inset: 0;
           border-radius: 999px;
-          background: linear-gradient(120deg, transparent 30%, rgba(222, 224, 240, 0.18) 50%, transparent 70%);
+          background: linear-gradient(120deg, transparent 30%, rgba(231, 231, 231, 0.18) 50%, transparent 70%);
           transform: translateX(-100%);
           transition: transform 0.6s ease;
           pointer-events: none;
         }
         .frs-cta-ghost:hover {
-          border-color: rgba(222, 224, 240, 0.85);
+          border-color: rgba(231, 231, 231, 0.85);
           background:
-            linear-gradient(135deg, rgba(74, 102, 216, 0.32), rgba(20, 22, 38, 0.6) 60%),
+            linear-gradient(135deg, rgba(145, 145, 145, 0.32), rgba(29, 29, 29, 0.6) 60%),
-            rgba(20, 22, 38, 0.6);
+            rgba(29, 29, 29, 0.6);
           transform: translateY(-2px);
           box-shadow:
             0 22px 48px rgba(0, 0, 0, 0.65),
-            inset 0 1px 0 rgba(222, 224, 240, 0.3),
+            inset 0 1px 0 rgba(231, 231, 231, 0.3),
-            0 0 0 1px rgba(58, 85, 196, 0.5),
+            0 0 0 1px rgba(127, 127, 127, 0.5),
-            0 0 36px rgba(58, 85, 196, 0.45);
+            0 0 36px rgba(127, 127, 127, 0.45);
         }
         .frs-cta-ghost:hover::before { transform: translateX(100%); }
         .frs-cta-ghost-arrow {
@@ -873,14 +873,14 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           width: 26px;
           height: 26px;
           border-radius: 999px;
-          background: rgba(222, 224, 240, 0.12);
+          background: rgba(231, 231, 231, 0.12);
-          border: 1px solid rgba(222, 224, 240, 0.25);
+          border: 1px solid rgba(231, 231, 231, 0.25);
           color: #FFFFFF;
           transition: transform 0.35s, background 0.35s, border-color 0.35s;
         }
         .frs-cta-ghost:hover .frs-cta-ghost-arrow {
-          background: rgba(74, 102, 216, 0.35);
+          background: rgba(145, 145, 145, 0.35);
-          border-color: rgba(222, 224, 240, 0.5);
+          border-color: rgba(231, 231, 231, 0.5);
           transform: translateX(3px);
         }
 
@@ -899,10 +899,10 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           padding: 0.85rem 1rem 0.85rem 0.85rem;
           min-height: 132px;
           border-radius: 20px;
-          border: 1px solid rgba(222, 224, 240, 0.14);
+          border: 1px solid rgba(231, 231, 231, 0.14);
           background:
             radial-gradient(ellipse 60% 80% at 100% 0%, color-mix(in srgb, var(--frs-acc) 26%, transparent), transparent 60%),
-            linear-gradient(135deg, rgba(28, 27, 33, 0.85), rgba(8, 8, 10, 0.95));
+            linear-gradient(135deg, rgba(30, 30, 30, 0.85), rgba(9, 9, 9, 0.95));
           color: #FFFFFF;
           text-align: left;
           cursor: pointer;
@@ -911,7 +911,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
         }
         .frs-tile:hover {
-          border-color: rgba(222, 224, 240, 0.45);
+          border-color: rgba(231, 231, 231, 0.45);
           transform: translateY(-3px);
           box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6);
         }
@@ -932,7 +932,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           bottom: 14px;
           width: 3px;
           border-radius: 0 4px 4px 0;
-          background: linear-gradient(180deg, var(--frs-acc), #3a55c4);
+          background: linear-gradient(180deg, var(--frs-acc), #7f7f7f);
           box-shadow: 0 0 16px var(--frs-acc);
           z-index: 1;
         }
@@ -945,8 +945,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           background:
             radial-gradient(ellipse 70% 50% at 50% 60%, color-mix(in srgb, var(--frs-acc) 28%, transparent) 0%, transparent 65%),
             radial-gradient(ellipse 60% 40% at 50% 25%, rgba(255, 255, 255, 0.06), transparent 70%),
-            linear-gradient(180deg, rgba(28, 27, 33, 0.7), rgba(10, 10, 12, 0.95));
+            linear-gradient(180deg, rgba(30, 30, 30, 0.7), rgba(11, 11, 11, 0.95));
-          border: 1px solid rgba(222, 224, 240, 0.12);
+          border: 1px solid rgba(231, 231, 231, 0.12);
           flex-shrink: 0;
         }
         .frs-tile-img-wrap :global(img) {
@@ -1003,7 +1003,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           letter-spacing: 0.18em;
           text-transform: uppercase;
           font-weight: 700;
-          color: #B5BDDB;
+          color: #c8c8c8;
           white-space: nowrap;
         }
         .frs-tile-avail-dot {
@@ -1014,7 +1014,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           box-shadow: 0 0 10px rgba(34, 197, 94, 0.85);
           animation: frs-pulse 1.8s ease-in-out infinite;
         }
-        .frs-tile-on .frs-tile-avail { color: #ECEEF6; }
+        .frs-tile-on .frs-tile-avail { color: #f1f1f1; }
         .frs-tile-arrow {
           position: absolute;
           top: 12px;
@@ -1025,9 +1025,9 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           align-items: center;
           justify-content: center;
           border-radius: 999px;
-          border: 1px solid rgba(222, 224, 240, 0.18);
+          border: 1px solid rgba(231, 231, 231, 0.18);
-          background: rgba(14, 13, 18, 0.6);
+          background: rgba(16, 16, 16, 0.6);
-          color: #DEE0F0;
+          color: #e7e7e7;
           opacity: 0;
           transform: translate(4px, -2px);
           transition: opacity 0.25s, transform 0.25s, background 0.25s;
@@ -1036,7 +1036,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
         .frs-tile-on .frs-tile-arrow {
           opacity: 1;
           transform: translate(0, 0);
-          background: rgba(58, 85, 196, 0.32);
+          background: rgba(127, 127, 127, 0.32);
         }
 
         /* UTILITY band */
@@ -1046,10 +1046,10 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           gap: 0.85rem;
           padding: 1rem 1.25rem;
           border-radius: 18px;
-          border: 1px solid rgba(222, 224, 240, 0.12);
+          border: 1px solid rgba(231, 231, 231, 0.12);
           background:
-            radial-gradient(ellipse 60% 80% at 0% 100%, rgba(58, 85, 196, 0.18), transparent 65%),
+            radial-gradient(ellipse 60% 80% at 0% 100%, rgba(127, 127, 127, 0.18), transparent 65%),
-            linear-gradient(180deg, rgba(28, 27, 33, 0.55), rgba(8, 8, 10, 0.85));
+            linear-gradient(180deg, rgba(30, 30, 30, 0.55), rgba(9, 9, 9, 0.85));
           backdrop-filter: blur(12px);
         }
         .frs-utility-block {
@@ -1057,12 +1057,12 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           grid-template-columns: 32px minmax(0, 1fr);
           gap: 0.75rem;
           align-items: center;
-          color: #ECEEF6;
+          color: #f1f1f1;
         }
         .frs-utility-block :global(svg) {
           width: 16px;
           height: 16px;
-          color: #DEE0F0;
+          color: #e7e7e7;
           margin: 0;
           justify-self: center;
         }
@@ -1076,7 +1076,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           font-size: 0.58rem;
           letter-spacing: 0.24em;
           text-transform: uppercase;
-          color: #8891C7;
+          color: #a8a8a8;
           font-weight: 700;
           white-space: nowrap;
         }
@@ -1095,10 +1095,10 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           gap: 0.6rem;
           padding: 0.85rem 1.05rem 0.85rem 1.25rem;
           border-radius: 999px;
-          border: 1px solid rgba(222, 224, 240, 0.45);
+          border: 1px solid rgba(231, 231, 231, 0.45);
           background:
-            linear-gradient(135deg, rgba(58, 85, 196, 0.18), rgba(14, 13, 18, 0.55) 60%),
+            linear-gradient(135deg, rgba(127, 127, 127, 0.18), rgba(16, 16, 16, 0.55) 60%),
-            rgba(14, 13, 18, 0.55);
+            rgba(16, 16, 16, 0.55);
           color: #FFFFFF;
           font-size: 0.7rem;
           font-weight: 800;
@@ -1110,8 +1110,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           -webkit-backdrop-filter: blur(14px);
           box-shadow:
             0 12px 28px rgba(0, 0, 0, 0.55),
-            inset 0 1px 0 rgba(222, 224, 240, 0.2),
+            inset 0 1px 0 rgba(231, 231, 231, 0.2),
-            0 0 0 1px rgba(58, 85, 196, 0.2);
+            0 0 0 1px rgba(127, 127, 127, 0.2);
           overflow: hidden;
           transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
         }
@@ -1120,22 +1120,22 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           position: absolute;
           inset: 0;
           border-radius: 999px;
-          background: linear-gradient(120deg, transparent 30%, rgba(222, 224, 240, 0.18) 50%, transparent 70%);
+          background: linear-gradient(120deg, transparent 30%, rgba(231, 231, 231, 0.18) 50%, transparent 70%);
           transform: translateX(-100%);
           transition: transform 0.6s ease;
           pointer-events: none;
         }
         .frs-utility-link:hover {
-          border-color: rgba(222, 224, 240, 0.82);
+          border-color: rgba(231, 231, 231, 0.82);
           background:
-            linear-gradient(135deg, rgba(74, 102, 216, 0.32), rgba(20, 22, 38, 0.65) 60%),
+            linear-gradient(135deg, rgba(145, 145, 145, 0.32), rgba(29, 29, 29, 0.65) 60%),
-            rgba(20, 22, 38, 0.65);
+            rgba(29, 29, 29, 0.65);
           transform: translateY(-2px);
           box-shadow:
             0 20px 44px rgba(0, 0, 0, 0.6),
-            inset 0 1px 0 rgba(222, 224, 240, 0.28),
+            inset 0 1px 0 rgba(231, 231, 231, 0.28),
-            0 0 0 1px rgba(58, 85, 196, 0.5),
+            0 0 0 1px rgba(127, 127, 127, 0.5),
-            0 0 32px rgba(58, 85, 196, 0.4);
+            0 0 32px rgba(127, 127, 127, 0.4);
         }
         .frs-utility-link:hover::before { transform: translateX(100%); }
         .frs-utility-link-arrow {
@@ -1145,14 +1145,14 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           width: 24px;
           height: 24px;
           border-radius: 999px;
-          background: rgba(222, 224, 240, 0.12);
+          background: rgba(231, 231, 231, 0.12);
-          border: 1px solid rgba(222, 224, 240, 0.25);
+          border: 1px solid rgba(231, 231, 231, 0.25);
           color: #FFFFFF;
           transition: transform 0.35s, background 0.35s, border-color 0.35s;
         }
         .frs-utility-link:hover .frs-utility-link-arrow {
-          background: rgba(74, 102, 216, 0.4);
+          background: rgba(145, 145, 145, 0.4);
-          border-color: rgba(222, 224, 240, 0.55);
+          border-color: rgba(231, 231, 231, 0.55);
           transform: rotate(45deg);
         }
 

src/components/robotics/FloatingTechPanel.tsx

@@ -40,15 +40,15 @@ export function FloatingTechPanel() {
               width: 60,
               height: 60,
               borderRadius: '50%',
-              background: `radial-gradient(circle, ${['#DEE0F0', '#273F94', '#8891C7', '#DEE0F0'][i % 4]}33, transparent 70%)`,
+              background: `radial-gradient(circle, ${['#e7e7e7', '#5e5e5e', '#a8a8a8', '#e7e7e7'][i % 4]}33, transparent 70%)`,
               pointerEvents: 'none',
             }}
           />
-          <span style={{ fontSize: '0.68rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8891C7' }}>{s.label}</span>
+          <span style={{ fontSize: '0.68rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#a8a8a8' }}>{s.label}</span>
           <span className="text-gradient-accent" style={{ fontSize: 'clamp(1.7rem, 3vw, 2.2rem)', fontWeight: 700, letterSpacing: '-0.02em' }}>
             {s.value}
           </span>
-          {s.sub && <span style={{ color: '#DEE0F0', fontSize: '0.82rem', lineHeight: 1.5 }}>{s.sub}</span>}
+          {s.sub && <span style={{ color: '#e7e7e7', fontSize: '0.82rem', lineHeight: 1.5 }}>{s.sub}</span>}
         </div>
       ))}
     </div>

src/components/robotics/FounderSection.tsx

@@ -9,8 +9,8 @@ export function FounderSection() {
         padding: 'clamp(2rem, 5vw, 3.5rem)',
         overflow: 'hidden',
         background:
-          'radial-gradient(ellipse 50% 70% at 100% 0%, rgba(222, 224, 240,0.15), transparent 60%), linear-gradient(135deg, rgba(28, 27, 33,0.95), rgba(5,5,5,0.98))',
+          'radial-gradient(ellipse 50% 70% at 100% 0%, rgba(231, 231, 231, 0.15), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(5,5,5,0.98))',
-        border: '1px solid rgba(39, 63, 148,0.28)',
+        border: '1px solid rgba(94, 94, 94, 0.28)',
         boxShadow: '0 30px 100px rgba(0,0,0,0.7)',
       }}
     >
@@ -20,7 +20,7 @@ export function FounderSection() {
           position: 'absolute',
           inset: 0,
           background:
-            'linear-gradient(rgba(39, 63, 148,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 63, 148,0.04) 1px, transparent 1px)',
+            'linear-gradient(rgba(94, 94, 94, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 94, 94, 0.04) 1px, transparent 1px)',
           backgroundSize: '48px 48px',
           maskImage: 'radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 80%)',
           WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 80%)',
@@ -36,13 +36,13 @@ export function FounderSection() {
               Mr. Yousif Bin Saeed Al Lootah
             </span>
           </h2>
-          <p style={{ margin: 0, color: '#DEE0F0', fontSize: '0.85rem', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600 }}>
+          <p style={{ margin: 0, color: '#e7e7e7', fontSize: '0.85rem', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600 }}>
             Founder · Yousuf Saeed Lootah Investment Group
           </p>
-          <p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, fontSize: '1rem' }}>
+          <p style={{ margin: 0, color: '#e7e7e7', lineHeight: 1.7, fontSize: '1rem' }}>
             Under the leadership of Mr. Yousif Bin Saeed Al Lootah, the group has championed innovation, trust, and long-term value creation across the UAE from technology and robotics to investment and enterprise. YS Lootah Robotics carries that vision into the future of intelligent automation.
           </p>
-          <p style={{ margin: 0, color: '#8891C7', lineHeight: 1.7, fontSize: '0.92rem' }}>
+          <p style={{ margin: 0, color: '#a8a8a8', lineHeight: 1.7, fontSize: '0.92rem' }}>
             <em>“Innovating today for a smarter tomorrow.”</em>
           </p>
         </div>
@@ -81,8 +81,8 @@ function Pillar({ value, label }: { value: string; label: string }) {
       style={{
         padding: '1.25rem',
         borderRadius: 14,
-        background: 'linear-gradient(135deg, rgba(28, 27, 33,0.7), rgba(5,5,5,0.92))',
+        background: 'linear-gradient(135deg, rgba(30, 30, 30, 0.7), rgba(5,5,5,0.92))',
-        border: '1px solid rgba(39, 63, 148,0.22)',
+        border: '1px solid rgba(94, 94, 94, 0.22)',
         display: 'flex',
         flexDirection: 'column',
         gap: '0.4rem',
@@ -93,7 +93,7 @@ function Pillar({ value, label }: { value: string; label: string }) {
       <span className="text-gradient-accent" style={{ fontSize: 'clamp(1.2rem, 2.2vw, 1.5rem)', fontWeight: 700, letterSpacing: '-0.01em' }}>
         {value}
       </span>
-      <span style={{ fontSize: '0.72rem', color: '#8891C7', letterSpacing: '0.14em', textTransform: 'uppercase', lineHeight: 1.45 }}>{label}</span>
+      <span style={{ fontSize: '0.72rem', color: '#a8a8a8', letterSpacing: '0.14em', textTransform: 'uppercase', lineHeight: 1.45 }}>{label}</span>
     </div>
   );
 }

src/components/robotics/Hero3DRobotics.tsx

@@ -92,7 +92,7 @@ export function Hero3DRobotics() {
       <div className="hero-gradient" />
       <div className="grid-overlay" />
       <div className="light-sweep" />
-      <CursorSpotlight color="rgba(58, 85, 196, 0.28)" size={640} />
+      <CursorSpotlight color="rgba(127, 127, 127, 0.28)" size={640} />
 
       {/* Royal-blue beams */}
       <div
@@ -101,7 +101,7 @@ export function Hero3DRobotics() {
           position: 'absolute',
           inset: 0,
           background:
-            'conic-gradient(from 220deg at 60% 50%, transparent 0deg, rgba(39,63,148,0.10) 25deg, transparent 50deg, rgba(222,224,240,0.06) 180deg, transparent 220deg, rgba(58,85,196,0.10) 320deg, transparent 360deg)',
+            'conic-gradient(from 220deg at 60% 50%, transparent 0deg, rgba(94, 94, 94, 0.10) 25deg, transparent 50deg, rgba(231, 231, 231, 0.06) 180deg, transparent 220deg, rgba(127, 127, 127, 0.10) 320deg, transparent 360deg)',
           mixBlendMode: 'screen',
           pointerEvents: 'none',
         }}
@@ -113,16 +113,16 @@ export function Hero3DRobotics() {
             <span
               className="eyebrow"
               style={{
-                color: '#DEE0F0',
+                color: '#e7e7e7',
-                border: '1px solid rgba(136,145,199,0.45)',
+                border: '1px solid rgba(168, 168, 168, 0.45)',
-                background: 'rgba(39,63,148,0.10)',
+                background: 'rgba(94, 94, 94, 0.10)',
                 padding: '0.5rem 0.9rem',
                 borderRadius: 999,
                 alignSelf: 'flex-start',
                 gap: '0.625rem',
               }}
             >
-              <span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: '#DEE0F0', boxShadow: '0 0 12px rgba(222,224,240,0.9)' }} />
+              <span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: '#e7e7e7', boxShadow: '0 0 12px rgba(231, 231, 231, 0.9)' }} />
               UAE Access · Dubai
             </span>
 
@@ -135,29 +135,29 @@ export function Hero3DRobotics() {
                 fontWeight: 300,
               }}
             >
-              <span style={{ display: 'block', color: '#FBFBFD', fontWeight: 200 }}>Advanced robotics.</span>
+              <span style={{ display: 'block', color: '#fcfcfc', fontWeight: 200 }}>Advanced robotics.</span>
               <span
                 style={{
                   display: 'block',
                   fontWeight: 600,
                   background:
-                    'linear-gradient(110deg, #FFFFFF 0%, #DEE0F0 50%, #8891C7 100%)',
+                    'linear-gradient(110deg, #FFFFFF 0%, #e7e7e7 50%, #a8a8a8 100%)',
                   WebkitBackgroundClip: 'text',
                   backgroundClip: 'text',
                   WebkitTextFillColor: 'transparent',
                   color: 'transparent',
                   filter:
-                    'drop-shadow(0 2px 12px rgba(222,224,240,0.18)) drop-shadow(0 6px 28px rgba(58,85,196,0.32))',
+                    'drop-shadow(0 2px 12px rgba(231, 231, 231, 0.18)) drop-shadow(0 6px 28px rgba(127, 127, 127, 0.32))',
                 }}
               >
                 UAE access.
               </span>
             </h1>
 
-            <p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(1rem, 2vw, 1.18rem)', lineHeight: 1.7, maxWidth: 600, fontWeight: 300 }}>
+            <p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(1rem, 2vw, 1.18rem)', lineHeight: 1.7, maxWidth: 600, fontWeight: 300 }}>
               YS Lootah Robotics is the UAE sales destination for selected Unitree and Pudu Robotics solutions helping businesses explore, configure, book demos, and deploy advanced robots across Dubai and the UAE.
             </p>
-            <p style={{ margin: 0, color: '#D7DBEA', fontSize: '0.78rem', letterSpacing: '0.32em', textTransform: 'uppercase', fontWeight: 600 }}>
+            <p style={{ margin: 0, color: '#e1e1e1', fontSize: '0.78rem', letterSpacing: '0.32em', textTransform: 'uppercase', fontWeight: 600 }}>
               In Tech We Innovate · In Trust We Lead
             </p>
 
@@ -176,7 +176,7 @@ export function Hero3DRobotics() {
                 paddingBottom: '0.5rem',
                 marginTop: '0.75rem',
                 marginBottom: 'clamp(0.5rem, 2vw, 1.5rem)',
-                borderTop: '1px solid rgba(136,145,199,0.22)',
+                borderTop: '1px solid rgba(168, 168, 168, 0.22)',
               }}
             >
               {HERO_STATS.map((s) => (
@@ -192,7 +192,7 @@ export function Hero3DRobotics() {
                   >
                     {s.value}
                   </span>
-                  <span style={{ fontSize: '0.66rem', color: '#8891C7', letterSpacing: '0.24em', textTransform: 'uppercase', fontWeight: 600 }}>
+                  <span style={{ fontSize: '0.66rem', color: '#a8a8a8', letterSpacing: '0.24em', textTransform: 'uppercase', fontWeight: 600 }}>
                     {s.label}
                   </span>
                 </div>
@@ -232,7 +232,7 @@ export function Hero3DRobotics() {
                 right: '8%',
                 height: '8%',
                 background:
-                  'radial-gradient(ellipse 50% 100% at 50% 100%, rgba(58,85,196,0.5), transparent 75%)',
+                  'radial-gradient(ellipse 50% 100% at 50% 100%, rgba(127, 127, 127, 0.5), transparent 75%)',
                 filter: 'blur(18px)',
                 pointerEvents: 'none',
               }}
@@ -247,11 +247,11 @@ export function Hero3DRobotics() {
                 minHeight: 'clamp(440px, 58vw, 660px)',
                 borderRadius: '1.75rem',
                 background:
-                  'linear-gradient(180deg, rgba(28,27,33,0.78) 0%, rgba(10,10,12,0.95) 100%)',
+                  'linear-gradient(180deg, rgba(30, 30, 30, 0.78) 0%, rgba(11, 11, 11, 0.95) 100%)',
-                border: '1px solid rgba(136,145,199,0.32)',
+                border: '1px solid rgba(168, 168, 168, 0.32)',
                 backdropFilter: 'blur(20px)',
                 boxShadow:
-                  '0 30px 100px rgba(0,0,0,0.8), inset 0 1px 0 rgba(222,224,240,0.1), 0 0 70px rgba(39,63,148,0.22)',
+                  '0 30px 100px rgba(0,0,0,0.8), inset 0 1px 0 rgba(231, 231, 231, 0.1), 0 0 70px rgba(94, 94, 94, 0.22)',
                 transform: `rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
                 transition: 'transform 0.3s cubic-bezier(0.16,1,0.3,1)',
                 overflow: 'hidden',
@@ -265,7 +265,7 @@ export function Hero3DRobotics() {
                   position: 'absolute',
                   inset: 0,
                   background:
-                    'linear-gradient(rgba(136,145,199,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(136,145,199,0.07) 1px, transparent 1px)',
+                    'linear-gradient(rgba(168, 168, 168, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 168, 168, 0.07) 1px, transparent 1px)',
                   backgroundSize: '40px 40px',
                   maskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%)',
                   WebkitMaskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%)',
@@ -284,7 +284,7 @@ export function Hero3DRobotics() {
                   width: '70%',
                   height: '70%',
                   background:
-                    'radial-gradient(ellipse 60% 70% at 50% 35%, rgba(58,85,196,0.45) 0%, rgba(39,63,148,0.25) 35%, transparent 70%)',
+                    'radial-gradient(ellipse 60% 70% at 50% 35%, rgba(127, 127, 127, 0.45) 0%, rgba(94, 94, 94, 0.25) 35%, transparent 70%)',
                   filter: 'blur(14px)',
                   pointerEvents: 'none',
                 }}
@@ -301,7 +301,7 @@ export function Hero3DRobotics() {
                   width: '60%',
                   height: '60%',
                   background:
-                    'linear-gradient(180deg, rgba(222,224,240,0.18) 0%, rgba(58,85,196,0.12) 35%, transparent 75%)',
+                    'linear-gradient(180deg, rgba(231, 231, 231, 0.18) 0%, rgba(127, 127, 127, 0.12) 35%, transparent 75%)',
                   clipPath: 'polygon(35% 0, 65% 0, 90% 100%, 10% 100%)',
                   filter: 'blur(8px)',
                   mixBlendMode: 'screen',
@@ -332,7 +332,7 @@ export function Hero3DRobotics() {
                     transition: 'opacity 1s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1)',
                     filter:
                       idx === activeIdx
-                        ? 'drop-shadow(0 26px 42px rgba(0,0,0,0.78)) drop-shadow(0 14px 22px rgba(0,0,0,0.55)) drop-shadow(0 0 30px rgba(58,85,196,0.45))'
+                        ? 'drop-shadow(0 26px 42px rgba(0,0,0,0.78)) drop-shadow(0 14px 22px rgba(0,0,0,0.55)) drop-shadow(0 0 30px rgba(127, 127, 127, 0.45))'
                         : 'none',
                     willChange: 'transform',
                   }}
@@ -410,7 +410,7 @@ export function Hero3DRobotics() {
                   bottom: '28%',
                   height: 1,
                   background:
-                    'linear-gradient(90deg, transparent, rgba(222,224,240,0.6), transparent)',
+                    'linear-gradient(90deg, transparent, rgba(231, 231, 231, 0.6), transparent)',
                   pointerEvents: 'none',
                   filter: 'blur(0.3px)',
                 }}
@@ -424,7 +424,7 @@ export function Hero3DRobotics() {
                   inset: 0,
                   borderRadius: '1.75rem',
                   background:
-                    'linear-gradient(135deg, rgba(222,224,240,0.18) 0%, transparent 18%, transparent 80%, rgba(58,85,196,0.22) 100%)',
+                    'linear-gradient(135deg, rgba(231, 231, 231, 0.18) 0%, transparent 18%, transparent 80%, rgba(127, 127, 127, 0.22) 100%)',
                   mixBlendMode: 'screen',
                   pointerEvents: 'none',
                 }}
@@ -438,7 +438,7 @@ export function Hero3DRobotics() {
                   right: '10%',
                   height: '2px',
                   background:
-                    'linear-gradient(90deg, transparent, rgba(222,224,240,0.5), transparent)',
+                    'linear-gradient(90deg, transparent, rgba(231, 231, 231, 0.5), transparent)',
                   pointerEvents: 'none',
                   filter: 'blur(0.4px)',
                 }}
@@ -462,9 +462,9 @@ export function Hero3DRobotics() {
                         right: l.right,
                         padding: '0.45rem 0.8rem',
                         borderRadius: 999,
-                        background: 'rgba(14,13,18,0.78)',
+                        background: 'rgba(16, 16, 16, 0.78)',
-                        border: '1px solid rgba(136,145,199,0.45)',
+                        border: '1px solid rgba(168, 168, 168, 0.45)',
-                        color: '#DEE0F0',
+                        color: '#e7e7e7',
                         fontSize: '0.66rem',
                         letterSpacing: '0.22em',
                         textTransform: 'uppercase',
@@ -473,7 +473,7 @@ export function Hero3DRobotics() {
                         animation: `floatY 6s ease-in-out ${l.delay}s infinite, fadeInUp 0.9s cubic-bezier(0.16,1,0.3,1) ${l.delay}s both`,
                         whiteSpace: 'nowrap',
                         boxShadow:
-                          '0 10px 28px rgba(0,0,0,0.55), 0 0 18px rgba(58,85,196,0.18), inset 0 1px 0 rgba(222,224,240,0.08)',
+                          '0 10px 28px rgba(0,0,0,0.55), 0 0 18px rgba(127, 127, 127, 0.18), inset 0 1px 0 rgba(231, 231, 231, 0.08)',
                         transform: `translate3d(${dx}px, ${dy}px, 0)`,
                         transition: 'transform 0.35s cubic-bezier(0.16,1,0.3,1)',
                         willChange: 'transform',
@@ -508,21 +508,21 @@ export function Hero3DRobotics() {
                     gap: '0.75rem',
                     padding: '0.7rem 1.1rem',
                     borderRadius: 14,
-                    background: 'rgba(14,13,18,0.72)',
+                    background: 'rgba(16, 16, 16, 0.72)',
-                    border: '1px solid rgba(136,145,199,0.45)',
+                    border: '1px solid rgba(168, 168, 168, 0.45)',
                     backdropFilter: 'blur(12px)',
-                    color: '#FBFBFD',
+                    color: '#fcfcfc',
                     textDecoration: 'none',
                     boxShadow: '0 10px 30px rgba(0,0,0,0.5)',
                   }}
                 >
                   <span style={{ display: 'flex', flexDirection: 'column' }}>
-                    <span style={{ fontSize: '0.62rem', color: '#8891C7', letterSpacing: '0.24em', textTransform: 'uppercase' }}>
+                    <span style={{ fontSize: '0.62rem', color: '#a8a8a8', letterSpacing: '0.24em', textTransform: 'uppercase' }}>
                       Featured · {robot.brandLabel}
                     </span>
                     <span style={{ fontSize: '0.95rem', fontWeight: 600 }}>{robot.name}</span>
                   </span>
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#DEE0F0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e7e7e7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                     <line x1="5" y1="12" x2="19" y2="12" />
                     <polyline points="12 5 19 12 12 19" />
                   </svg>
@@ -540,8 +540,8 @@ export function Hero3DRobotics() {
                         borderRadius: 999,
                         border: 'none',
                         background: idx === activeIdx
-                          ? 'linear-gradient(90deg, #DEE0F0, #3a55c4)'
+                          ? 'linear-gradient(90deg, #e7e7e7, #7f7f7f)'
-                          : 'rgba(136,145,199,0.4)',
+                          : 'rgba(168, 168, 168, 0.4)',
                         cursor: 'pointer',
                         transition: 'all 0.4s ease',
                       }}

src/components/robotics/IndustryUseCases.tsx

@@ -109,9 +109,9 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
           min-width: 0;
           padding: 0.85rem 1rem;
           border-radius: 14px;
-          border: 1px solid rgba(120, 140, 255, 0.22);
+          border: 1px solid rgba(188, 188, 188, 0.22);
           background:
-            linear-gradient(135deg, rgba(80, 110, 255, 0.12), rgba(255, 255, 255, 0.03));
+            linear-gradient(135deg, rgba(168, 168, 168, 0.12), rgba(255, 255, 255, 0.03));
           overflow: hidden;
           transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s, background 0.3s;
         }
@@ -122,21 +122,21 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
           right: 10px;
           width: 20px;
           height: 1px;
-          background: linear-gradient(90deg, transparent, rgba(180, 195, 255, 0.55));
+          background: linear-gradient(90deg, transparent, rgba(218, 218, 218, 0.55));
         }
         .iu-stat::after {
           content: '';
           position: absolute;
           inset: 0;
-          background: radial-gradient(ellipse 60% 80% at 100% 100%, rgba(74, 102, 216, 0.10), transparent 60%);
+          background: radial-gradient(ellipse 60% 80% at 100% 100%, rgba(145, 145, 145, 0.10), transparent 60%);
           pointer-events: none;
           opacity: 0;
           transition: opacity 0.35s;
         }
         .iu-stat:hover {
-          border-color: rgba(120, 140, 255, 0.45);
+          border-color: rgba(188, 188, 188, 0.45);
           transform: translateY(-1px);
-          box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38), 0 0 18px rgba(74, 102, 216, 0.18);
+          box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38), 0 0 18px rgba(145, 145, 145, 0.18);
         }
         .iu-stat:hover::after { opacity: 1; }
         .iu-stat-value {
@@ -147,7 +147,7 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
-          background: linear-gradient(180deg, #FFFFFF, #B5BDDB);
+          background: linear-gradient(180deg, #FFFFFF, #c8c8c8);
           -webkit-background-clip: text;
           background-clip: text;
           color: transparent;
@@ -159,7 +159,7 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
           letter-spacing: clamp(0.06em, 0.4vw, 0.22em);
           text-transform: uppercase;
           font-weight: 700;
-          color: #A6B2D8;
+          color: #bfbfbf;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -250,12 +250,12 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
           overflow: hidden;
           text-decoration: none;
           color: #FFFFFF;
-          border: 1px solid rgba(222, 224, 240, 0.10);
+          border: 1px solid rgba(231, 231, 231, 0.10);
           background:
             radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
-            linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96));
+            linear-gradient(180deg, rgba(26, 26, 26, 0.92), rgba(12, 12, 12, 0.96));
           box-shadow:
-            0 1px 0 rgba(222, 224, 240, 0.04) inset,
+            0 1px 0 rgba(231, 231, 231, 0.04) inset,
             0 14px 28px rgba(0, 0, 0, 0.36);
           transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
             box-shadow 0.4s, border-color 0.4s;
@@ -263,15 +263,15 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
         .ic:hover,
         .ic:focus-visible {
           transform: translateY(-3px);
-          border-color: rgba(74, 102, 216, 0.42);
+          border-color: rgba(145, 145, 145, 0.42);
           box-shadow:
-            0 1px 0 rgba(222, 224, 240, 0.08) inset,
+            0 1px 0 rgba(231, 231, 231, 0.08) inset,
             0 24px 52px rgba(0, 0, 0, 0.55),
-            0 0 0 1px rgba(74, 102, 216, 0.22),
+            0 0 0 1px rgba(145, 145, 145, 0.22),
-            0 0 28px rgba(58, 85, 196, 0.22);
+            0 0 28px rgba(127, 127, 127, 0.22);
         }
         .ic:focus-visible {
-          outline: 2px solid rgba(74, 102, 216, 0.75);
+          outline: 2px solid rgba(145, 145, 145, 0.75);
           outline-offset: 3px;
         }
 
@@ -280,8 +280,8 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
           position: relative;
           aspect-ratio: 16 / 10;
           overflow: hidden;
-          background: #0a0a0e;
+          background: #0c0c0c;
-          border-bottom: 1px solid rgba(222, 224, 240, 0.06);
+          border-bottom: 1px solid rgba(231, 231, 231, 0.06);
         }
         .ic-media :global(.ic-media-img) {
           transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
@@ -296,7 +296,7 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
           position: absolute;
           inset: 0;
           background:
-            linear-gradient(180deg, rgba(10, 10, 14, 0.10) 0%, rgba(10, 10, 14, 0.05) 40%, rgba(10, 10, 14, 0.85) 100%),
+            linear-gradient(180deg, rgba(12, 12, 12, 0.10) 0%, rgba(12, 12, 12, 0.05) 40%, rgba(12, 12, 12, 0.85) 100%),
             radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
           pointer-events: none;
         }
@@ -312,7 +312,7 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
           height: 36px;
           border-radius: 10px;
           color: color-mix(in srgb, var(--accent) 78%, white);
-          background: rgba(10, 10, 14, 0.7);
+          background: rgba(12, 12, 12, 0.7);
           border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
           backdrop-filter: blur(8px);
           -webkit-backdrop-filter: blur(8px);
@@ -342,7 +342,7 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
         }
         .ic-desc {
           margin: 0;
-          color: #C9CCDE;
+          color: #d4d4d4;
           font-size: 0.88rem;
           line-height: 1.55;
           flex: 1;
@@ -359,7 +359,7 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
           font-size: 0.78rem;
           font-weight: 600;
           letter-spacing: 0.02em;
-          color: #DEE0F0;
+          color: #e7e7e7;
           transition: color 0.3s;
         }
         .ic:hover .ic-cta,

src/components/robotics/InquiryForm.tsx

@@ -63,9 +63,9 @@ export function InquiryForm({ defaultRobot = '', defaultCategory = '', intent =
     width: '100%',
     padding: '0.875rem 1rem',
     borderRadius: '0.75rem',
-    border: '1px solid rgba(39, 63, 148,0.18)',
+    border: '1px solid rgba(94, 94, 94, 0.18)',
     background: 'rgba(15, 12, 8,0.55)',
-    color: '#FBFBFD',
+    color: '#fcfcfc',
     fontSize: '0.95rem',
     outline: 'none',
     boxSizing: 'border-box',
@@ -77,7 +77,7 @@ export function InquiryForm({ defaultRobot = '', defaultCategory = '', intent =
     fontSize: '0.72rem',
     letterSpacing: '0.18em',
     textTransform: 'uppercase',
-    color: '#8891C7',
+    color: '#a8a8a8',
     fontWeight: 600,
   };
 

src/components/robotics/MarqueeStrip.tsx

@@ -9,12 +9,12 @@ type Item = {
 };
 
 const DEFAULT_ITEMS: Item[] = [
-  { label: 'UAE Access', sub: 'YS Lootah Robotics', accent: '#DEE0F0' },
+  { label: 'UAE Access', sub: 'YS Lootah Robotics', accent: '#e7e7e7' },
-  { label: 'Unitree', sub: 'Quadruped · Humanoid', accent: '#273F94' },
+  { label: 'Unitree', sub: 'Quadruped · Humanoid', accent: '#5e5e5e' },
-  { label: 'Pudu Robotics', sub: 'Service · Delivery · Cleaning', accent: '#8891C7' },
+  { label: 'Pudu Robotics', sub: 'Service · Delivery · Cleaning', accent: '#a8a8a8' },
-  { label: 'Dubai · UAE', sub: 'Sales · Demo · Configure', accent: '#DEE0F0' },
+  { label: 'Dubai · UAE', sub: 'Sales · Demo · Configure', accent: '#e7e7e7' },
-  { label: 'Showroom', sub: 'City Bay Business Center', accent: '#273F94' },
+  { label: 'Showroom', sub: 'City Bay Business Center', accent: '#5e5e5e' },
-  { label: '10+ Industries', sub: 'Hospitality · Security · Healthcare', accent: '#8891C7' },
+  { label: '10+ Industries', sub: 'Hospitality · Security · Healthcare', accent: '#a8a8a8' },
 ];
 
 export function MarqueeStrip({ items = DEFAULT_ITEMS, speed = 38 }: { items?: Item[]; speed?: number }) {
@@ -28,8 +28,8 @@ export function MarqueeStrip({ items = DEFAULT_ITEMS, speed = 38 }: { items?: It
         maskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
         WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
         padding: '1.25rem 0',
-        borderTop: '1px solid rgba(39, 63, 148,0.12)',
+        borderTop: '1px solid rgba(94, 94, 94, 0.12)',
-        borderBottom: '1px solid rgba(39, 63, 148,0.12)',
+        borderBottom: '1px solid rgba(94, 94, 94, 0.12)',
         background:
           'linear-gradient(180deg, rgba(15, 12, 8,0.4), rgba(5, 5, 5,0.6))',
       }}
@@ -59,8 +59,8 @@ export function MarqueeStrip({ items = DEFAULT_ITEMS, speed = 38 }: { items?: It
                 width: 8,
                 height: 8,
                 borderRadius: 999,
-                background: it.accent ?? '#DEE0F0',
+                background: it.accent ?? '#e7e7e7',
-                boxShadow: `0 0 12px ${it.accent ?? '#DEE0F0'}88`,
+                boxShadow: `0 0 12px ${it.accent ?? '#e7e7e7'}88`,
               }}
             />
             <span
@@ -79,7 +79,7 @@ export function MarqueeStrip({ items = DEFAULT_ITEMS, speed = 38 }: { items?: It
                   fontSize: '0.7rem',
                   letterSpacing: '0.22em',
                   textTransform: 'uppercase',
-                  color: '#6a73a5',
+                  color: '#888888',
                 }}
               >
                 {it.sub}

src/components/robotics/ProductFilterTabs.tsx

@@ -15,7 +15,7 @@ export function ProductFilterTabs({ tabs, activeId, onChange, title }: Props) {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', minWidth: 0 }}>
       {title && (
-        <span style={{ fontSize: '0.68rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8891C7', fontWeight: 700 }}>
+        <span style={{ fontSize: '0.68rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#a8a8a8', fontWeight: 700 }}>
           {title}
         </span>
       )}
@@ -39,9 +39,9 @@ export function ProductFilterTabs({ tabs, activeId, onChange, title }: Props) {
                 border: '1px solid',
                 cursor: 'pointer',
                 transition: 'all 0.2s',
-                background: active ? (t.accent ? `${t.accent}1F` : 'rgba(39, 63, 148,0.18)') : 'rgba(15, 12, 8,0.55)',
+                background: active ? (t.accent ? `${t.accent}1F` : 'rgba(94, 94, 94, 0.18)') : 'rgba(15, 12, 8,0.55)',
-                borderColor: active ? (t.accent ?? '#DEE0F0') : 'rgba(39, 63, 148,0.2)',
+                borderColor: active ? (t.accent ?? '#e7e7e7') : 'rgba(94, 94, 94, 0.2)',
-                color: active ? (t.accent ?? '#DEE0F0') : '#DEE0F0',
+                color: active ? (t.accent ?? '#e7e7e7') : '#e7e7e7',
               }}
             >
               {t.label}

src/components/robotics/ProductGallery.tsx

@@ -22,7 +22,7 @@ export function ProductGallery({ images, accent }: Props) {
           overflow: 'hidden',
           background:
             `radial-gradient(ellipse 70% 60% at 50% 50%, ${accent}33, transparent 60%), linear-gradient(180deg, rgba(15, 12, 8,0.7), rgba(5, 5, 5,0.95))`,
-          border: '1px solid rgba(39, 63, 148,0.18)',
+          border: '1px solid rgba(94, 94, 94, 0.18)',
           boxShadow: '0 30px 100px rgba(0, 0, 0,0.6)',
         }}
       >
@@ -32,7 +32,7 @@ export function ProductGallery({ images, accent }: Props) {
             position: 'absolute',
             inset: 0,
             background:
-              'linear-gradient(rgba(39, 63, 148,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 63, 148,0.05) 1px, transparent 1px)',
+              'linear-gradient(rgba(94, 94, 94, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 94, 94, 0.05) 1px, transparent 1px)',
             backgroundSize: '40px 40px',
             maskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
             WebkitMaskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
@@ -64,7 +64,7 @@ export function ProductGallery({ images, accent }: Props) {
                 overflow: 'hidden',
                 cursor: 'pointer',
                 background: 'rgba(15, 12, 8,0.6)',
-                border: `1px solid ${idx === active ? accent : 'rgba(39, 63, 148,0.2)'}`,
+                border: `1px solid ${idx === active ? accent : 'rgba(94, 94, 94, 0.2)'}`,
                 padding: 4,
                 transition: 'all 0.2s',
               }}

src/components/robotics/ProductSpecTable.tsx

@@ -4,24 +4,24 @@ import type { RobotSpec } from '@/data/robots';
 
 export function ProductSpecTable({ specs }: { specs: RobotSpec[] }) {
   return (
-    <table style={{ width: '100%', borderCollapse: 'collapse', color: '#DEE0F0' }}>
+    <table style={{ width: '100%', borderCollapse: 'collapse', color: '#e7e7e7' }}>
       <tbody>
         {specs.map((s) => (
-          <tr key={s.label} style={{ borderBottom: '1px solid rgba(39, 63, 148,0.1)' }}>
+          <tr key={s.label} style={{ borderBottom: '1px solid rgba(94, 94, 94, 0.1)' }}>
             <td
               style={{
                 padding: '0.65rem 0',
                 fontSize: '0.74rem',
                 letterSpacing: '0.14em',
                 textTransform: 'uppercase',
-                color: '#8891C7',
+                color: '#a8a8a8',
                 width: '46%',
                 verticalAlign: 'top',
               }}
             >
               {s.label}
             </td>
-            <td style={{ padding: '0.65rem 0', color: '#FBFBFD', fontSize: '0.92rem' }}>{s.value}</td>
+            <td style={{ padding: '0.65rem 0', color: '#fcfcfc', fontSize: '0.92rem' }}>{s.value}</td>
           </tr>
         ))}
       </tbody>

src/components/robotics/RobotCategoryGrid.tsx

@@ -7,49 +7,49 @@ const CATEGORY_META: { id: RobotCategory; description: string; accent: string; i
   {
     id: 'humanoid',
     description: 'Bipedal robots for events, education, hospitality, and research.',
-    accent: '#DEE0F0',
+    accent: '#e7e7e7',
     iconPath: 'M12 2a4 4 0 0 1 4 4v2h-8V6a4 4 0 0 1 4-4Zm-6 8h12v4l-2 2v6h-3v-5h-2v5H8v-6l-2-2v-4Z',
   },
   {
     id: 'quadruped',
     description: 'Four-legged robots for inspection, security, and field operations.',
-    accent: '#273F94',
+    accent: '#5e5e5e',
     iconPath: 'M3 11l3-3h4l2-2 2 2h4l3 3v3l-2 1v3h-3v-3h-3l-1 2-1-2H8v3H5v-3l-2-1v-3Z',
   },
   {
     id: 'service',
     description: 'Customer-facing robots that greet, guide, and assist.',
-    accent: '#8891C7',
+    accent: '#a8a8a8',
     iconPath: 'M12 2a5 5 0 0 1 5 5v3a5 5 0 0 1-10 0V7a5 5 0 0 1 5-5Zm-7 17a7 7 0 0 1 14 0v3H5v-3Z',
   },
   {
     id: 'delivery',
     description: 'Autonomous delivery for restaurants, hotels, and back-of-house.',
-    accent: '#DEE0F0',
+    accent: '#e7e7e7',
     iconPath: 'M3 6h11v9H3V6Zm14 3h3l2 3v3h-2a2 2 0 1 1-4 0h-1V9h2ZM6 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm12 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z',
   },
   {
     id: 'hospitality',
     description: 'Premium hospitality robotics for hotels, resorts, and venues.',
-    accent: '#8891C7',
+    accent: '#a8a8a8',
     iconPath: 'M4 7h16v3H4V7Zm0 5h16v8h-3v-3H7v3H4v-8Z',
   },
   {
     id: 'cleaning',
     description: 'Commercial cleaning robots for malls, airports, and offices.',
-    accent: '#273F94',
+    accent: '#5e5e5e',
     iconPath: 'M5 4h6v8H5V4Zm0 10h6v2H5v-2Zm-2 4h10v3H3v-3Zm12-14h3l3 9v9h-3v-7h-3V4Z',
   },
   {
     id: 'commercial',
     description: 'Commercial automation for warehouses, sites, and facilities.',
-    accent: '#DEE0F0',
+    accent: '#e7e7e7',
     iconPath: 'M3 21V8l9-5 9 5v13h-6v-6h-6v6H3Z',
   },
   {
     id: 'inspection',
     description: 'Inspection robots for energy, utilities, and industrial sites.',
-    accent: '#273F94',
+    accent: '#5e5e5e',
     iconPath: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 4a6 6 0 1 1 0 12 6 6 0 0 1 0-12Zm0 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z',
   },
 ];
@@ -73,7 +73,7 @@ export function RobotCategoryGrid() {
             style={{
               padding: '1.5rem',
               textDecoration: 'none',
-              color: '#FBFBFD',
+              color: '#fcfcfc',
               display: 'flex',
               flexDirection: 'column',
               gap: '0.875rem',
@@ -102,7 +102,7 @@ export function RobotCategoryGrid() {
                 {count} models
               </span>
             </div>
-            <p style={{ margin: 0, fontSize: '0.88rem', color: '#8891C7', lineHeight: 1.55 }}>
+            <p style={{ margin: 0, fontSize: '0.88rem', color: '#a8a8a8', lineHeight: 1.55 }}>
               {cat.description}
             </p>
           </Link>

src/components/robotics/RobotProductCard.tsx

@@ -19,7 +19,7 @@ export function RobotProductCard({ robot, priority = false }: Props) {
         display: 'flex',
         flexDirection: 'column',
         height: '100%',
-        color: '#FBFBFD',
+        color: '#fcfcfc',
       }}
     >
       <Link
@@ -41,7 +41,7 @@ export function RobotProductCard({ robot, priority = false }: Props) {
             position: 'absolute',
             inset: 0,
             backgroundImage:
-              'linear-gradient(rgba(39, 63, 148,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 63, 148,0.05) 1px, transparent 1px)',
+              'linear-gradient(rgba(94, 94, 94, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 94, 94, 0.05) 1px, transparent 1px)',
             backgroundSize: '32px 32px',
             maskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
             WebkitMaskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
@@ -90,11 +90,11 @@ export function RobotProductCard({ robot, priority = false }: Props) {
             padding: '0.35rem 0.7rem',
             borderRadius: '999px',
             background: 'rgba(255,255,255,0.05)',
-            border: '1px solid rgba(39, 63, 148,0.2)',
+            border: '1px solid rgba(94, 94, 94, 0.2)',
             fontSize: '0.66rem',
             letterSpacing: '0.18em',
             textTransform: 'uppercase',
-            color: '#DEE0F0',
+            color: '#e7e7e7',
             backdropFilter: 'blur(8px)',
           }}
         >
@@ -104,11 +104,11 @@ export function RobotProductCard({ robot, priority = false }: Props) {
 
       <div style={{ padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '0.75rem', flex: 1 }}>
         <h3 style={{ margin: 0, fontSize: '1.2rem', fontWeight: 600, letterSpacing: '-0.01em' }}>
-          <Link href={detailHref} style={{ color: '#FBFBFD', textDecoration: 'none' }}>
+          <Link href={detailHref} style={{ color: '#fcfcfc', textDecoration: 'none' }}>
             {robot.name}
           </Link>
         </h3>
-        <p style={{ margin: 0, color: '#8891C7', fontSize: '0.88rem', lineHeight: 1.55, flex: 1 }}>
+        <p style={{ margin: 0, color: '#a8a8a8', fontSize: '0.88rem', lineHeight: 1.55, flex: 1 }}>
           {robot.shortDescription}
         </p>
 
@@ -118,10 +118,10 @@ export function RobotProductCard({ robot, priority = false }: Props) {
               key={u}
               style={{
                 fontSize: '0.7rem',
-                color: '#8891C7',
+                color: '#a8a8a8',
                 padding: '0.2rem 0.5rem',
                 borderRadius: 999,
-                border: '1px solid rgba(39, 63, 148,0.18)',
+                border: '1px solid rgba(94, 94, 94, 0.18)',
                 background: 'rgba(15, 12, 8,0.5)',
                 letterSpacing: '0.04em',
               }}
@@ -135,7 +135,7 @@ export function RobotProductCard({ robot, priority = false }: Props) {
           style={{
             marginTop: 'auto',
             paddingTop: '0.75rem',
-            borderTop: '1px solid rgba(39, 63, 148,0.1)',
+            borderTop: '1px solid rgba(94, 94, 94, 0.1)',
             display: 'flex',
             flexWrap: 'wrap',
             gap: '0.4rem',
@@ -153,15 +153,15 @@ export function RobotProductCard({ robot, priority = false }: Props) {
               gap: '0.4rem',
               padding: '0.55rem 0.75rem',
               borderRadius: 10,
-              background: 'linear-gradient(135deg, rgba(80, 110, 255, 0.32), rgba(40, 55, 145, 0.85))',
+              background: 'linear-gradient(135deg, rgba(168, 168, 168, 0.32), rgba(93, 93, 93, 0.85))',
-              border: '1px solid rgba(120, 140, 255, 0.55)',
+              border: '1px solid rgba(188, 188, 188, 0.55)',
               color: '#FFFFFF',
               fontSize: '0.72rem',
               fontWeight: 700,
               letterSpacing: '0.12em',
               textTransform: 'uppercase',
               textDecoration: 'none',
-              boxShadow: '0 6px 14px rgba(0, 0, 0, 0.35), 0 0 14px rgba(74, 102, 216, 0.22)',
+              boxShadow: '0 6px 14px rgba(0, 0, 0, 0.35), 0 0 14px rgba(145, 145, 145, 0.22)',
             }}
           >
             View details
@@ -176,9 +176,9 @@ export function RobotProductCard({ robot, priority = false }: Props) {
               justifyContent: 'center',
               padding: '0.55rem 0.75rem',
               borderRadius: 10,
-              background: 'rgba(20, 19, 26, 0.6)',
+              background: 'rgba(23, 23, 23, 0.6)',
-              border: '1px solid rgba(222, 224, 240, 0.14)',
+              border: '1px solid rgba(231, 231, 231, 0.14)',
-              color: '#DEE0F0',
+              color: '#e7e7e7',
               fontSize: '0.72rem',
               fontWeight: 600,
               letterSpacing: '0.1em',
@@ -198,9 +198,9 @@ export function RobotProductCard({ robot, priority = false }: Props) {
               justifyContent: 'center',
               padding: '0.55rem 0.75rem',
               borderRadius: 10,
-              background: 'rgba(20, 19, 26, 0.6)',
+              background: 'rgba(23, 23, 23, 0.6)',
-              border: '1px solid rgba(222, 224, 240, 0.14)',
+              border: '1px solid rgba(231, 231, 231, 0.14)',
-              color: '#DEE0F0',
+              color: '#e7e7e7',
               fontSize: '0.72rem',
               fontWeight: 600,
               letterSpacing: '0.1em',

src/components/robotics/WhyUs.tsx

@@ -4,25 +4,25 @@ const REASONS = [
   {
     title: 'UAE robotics portfolio',
     body: 'Selected Unitree and Pudu Robotics solutions available in the UAE through YS Lootah Robotics for hospitality, security, education, and industry.',
-    accent: '#DEE0F0',
+    accent: '#e7e7e7',
     icon: 'M3 3h7v7H3V3Zm0 11h7v7H3v-7Zm11-11h7v7h-7V3Zm0 11h7v7h-7v-7Z',
   },
   {
     title: 'Dubai sales and support',
     body: 'A local Dubai team manages your inquiry, demo, deployment, and on-the-ground support not just a website with a contact form.',
-    accent: '#273F94',
+    accent: '#5e5e5e',
     icon: 'M12 2 2 7v6c0 5 4 9 10 11 6-2 10-6 10-11V7l-10-5Z',
   },
   {
     title: 'Custom configuration',
     body: 'Configure persona, attire, and accessories for humanoid robots visualize your deployment before you order with our 3D configurator.',
-    accent: '#8891C7',
+    accent: '#a8a8a8',
     icon: 'M12 4a4 4 0 0 1 4 4v1h5v6h-5v1a4 4 0 0 1-8 0v-1H3V9h5V8a4 4 0 0 1 4-4Z',
   },
   {
     title: 'End-to-end deployment',
     body: 'From procurement and configuration to delivery, installation, training, and ongoing support we handle the full lifecycle.',
-    accent: '#DEE0F0',
+    accent: '#e7e7e7',
     icon: 'M3 12h4l3-7 4 14 3-7h4',
   },
 ];
@@ -55,7 +55,7 @@ export function WhyUs() {
             </svg>
           </div>
           <h3 style={{ margin: 0, fontSize: '1.1rem', fontWeight: 600 }}>{r.title}</h3>
-          <p style={{ margin: 0, color: '#DEE0F0', fontSize: '0.92rem', lineHeight: 1.6 }}>{r.body}</p>
+          <p style={{ margin: 0, color: '#e7e7e7', fontSize: '0.92rem', lineHeight: 1.6 }}>{r.body}</p>
         </div>
       ))}
     </div>

src/components/sections/robotics-scroll-showcase.tsx

@@ -17,21 +17,21 @@ const SHOWROOM_ROBOTS = [
     slug: 'unitree-g1',
     image: '/images/robots/unitree-g1.webp',
     category: 'Humanoid',
-    accent: '#DEE0F0',
+    accent: '#e7e7e7',
   },
   {
     name: 'Unitree Go2',
     slug: 'unitree-go2',
     image: '/images/robots/unitree-go2.webp',
     category: 'Quadruped',
-    accent: '#D7DBEA',
+    accent: '#e1e1e1',
   },
   {
     name: 'Pudu BellaBot',
     slug: 'pudu-bellabot',
     image: '/images/robots/pudu-bellabot.webp',
     category: 'Delivery',
-    accent: '#8891C7',
+    accent: '#a8a8a8',
   },
 ];
 
@@ -50,28 +50,28 @@ export function RoboticsScrollShowcase() {
         position: 'relative',
         overflow: 'hidden',
         background:
-          'radial-gradient(ellipse 60% 50% at 50% 0%, rgba(39,63,148,0.18), transparent 60%)',
+          'radial-gradient(ellipse 60% 50% at 50% 0%, rgba(94, 94, 94, 0.18), transparent 60%)',
       }}
     >
       <ContainerScroll
         titleComponent={
           <div className="flex flex-col items-center gap-4">
             <span
-              className="inline-flex items-center gap-2 rounded-full border border-[#DEE0F0]/30 bg-[#273F94]/15 px-4 py-1.5 text-[10px] font-semibold uppercase tracking-[0.32em] text-[#DEE0F0]"
+              className="inline-flex items-center gap-2 rounded-full border border-[#e7e7e7]/30 bg-[#5e5e5e]/15 px-4 py-1.5 text-[10px] font-semibold uppercase tracking-[0.32em] text-[#e7e7e7]"
             >
-              <span className="h-1.5 w-1.5 rounded-full bg-[#DEE0F0]" />
+              <span className="h-1.5 w-1.5 rounded-full bg-[#e7e7e7]" />
               UAE Robotics Showroom
             </span>
             <h2 className="text-4xl font-light leading-[1.05] tracking-[-0.035em] text-white sm:text-5xl md:text-6xl lg:text-7xl">
               Advanced robotics.
-              <span className="block bg-gradient-to-r from-white via-[#DEE0F0] to-[#8891C7] bg-clip-text font-semibold text-transparent">
+              <span className="block bg-gradient-to-r from-white via-[#e7e7e7] to-[#a8a8a8] bg-clip-text font-semibold text-transparent">
                 UAE access.
               </span>
-              <span className="mt-3 block text-base font-normal text-[#D7DBEA] sm:text-lg md:text-xl">
+              <span className="mt-3 block text-base font-normal text-[#e1e1e1] sm:text-lg md:text-xl">
                 Built for Dubai&apos;s next generation of automation.
               </span>
             </h2>
-            <p className="max-w-2xl text-sm leading-relaxed text-[#DEE0F0]/75 sm:text-base">
+            <p className="max-w-2xl text-sm leading-relaxed text-[#e7e7e7]/75 sm:text-base">
               Explore selected Unitree and Pudu Robotics solutions through an immersive showroom experience built for UAE businesses, venues, and innovators.
             </p>
           </div>
@@ -87,8 +87,8 @@ function ConsoleInterior() {
   return (
     <div className="relative h-full w-full">
       {/* left sidebar category rail */}
-      <aside className="hidden h-full w-44 flex-col gap-1.5 border-r border-[#DEE0F0]/10 bg-[#0a0a0c]/60 p-3 md:flex md:absolute md:inset-y-0 md:left-0">
+      <aside className="hidden h-full w-44 flex-col gap-1.5 border-r border-[#e7e7e7]/10 bg-[#0b0b0b]/60 p-3 md:flex md:absolute md:inset-y-0 md:left-0">
-        <div className="px-2 py-2 text-[9px] font-semibold uppercase tracking-[0.28em] text-[#8891C7]">
+        <div className="px-2 py-2 text-[9px] font-semibold uppercase tracking-[0.28em] text-[#a8a8a8]">
           Categories
         </div>
         {TABS.map((t) => (
@@ -97,16 +97,16 @@ function ConsoleInterior() {
             type="button"
             className={`flex items-center gap-2.5 rounded-lg border px-3 py-2 text-left text-xs font-semibold uppercase tracking-[0.12em] transition ${
               t.active
-                ? 'border-[#DEE0F0]/40 bg-[#273F94]/30 text-[#DEE0F0]'
+                ? 'border-[#e7e7e7]/40 bg-[#5e5e5e]/30 text-[#e7e7e7]'
-                : 'border-transparent text-[#D7DBEA]/80 hover:bg-white/[0.04]'
+                : 'border-transparent text-[#e1e1e1]/80 hover:bg-white/[0.04]'
             }`}
           >
             <t.icon className="h-3.5 w-3.5" />
             {t.label}
           </button>
         ))}
-        <div className="mt-auto rounded-xl border border-[#DEE0F0]/10 bg-[#221F20]/60 p-3 text-[10px] uppercase tracking-[0.18em] text-[#D7DBEA]/70">
+        <div className="mt-auto rounded-xl border border-[#e7e7e7]/10 bg-[#221F20]/60 p-3 text-[10px] uppercase tracking-[0.18em] text-[#e1e1e1]/70">
-          <span className="block text-[#DEE0F0]">YS Lootah Robotics</span>
+          <span className="block text-[#e7e7e7]">YS Lootah Robotics</span>
           In Tech We Innovate
         </div>
       </aside>
@@ -114,7 +114,7 @@ function ConsoleInterior() {
       {/* main display */}
       <div className="absolute inset-0 md:left-44">
         {/* top breadcrumb */}
-        <div className="flex items-center justify-between border-b border-[#DEE0F0]/10 px-4 py-2 text-[10px] uppercase tracking-[0.22em] text-[#8891C7] md:px-6">
+        <div className="flex items-center justify-between border-b border-[#e7e7e7]/10 px-4 py-2 text-[10px] uppercase tracking-[0.22em] text-[#a8a8a8] md:px-6">
           <span>Robots · UAE Portfolio</span>
           <span className="hidden sm:inline">11 Models · 2 Brands · Dubai</span>
         </div>
@@ -124,12 +124,12 @@ function ConsoleInterior() {
           {SHOWROOM_ROBOTS.map((r) => (
             <article
               key={r.slug}
-              className="relative flex flex-col gap-2 overflow-hidden rounded-xl border border-[#DEE0F0]/15 bg-[#0a0a0c]/70 p-3 backdrop-blur-xl md:p-4"
+              className="relative flex flex-col gap-2 overflow-hidden rounded-xl border border-[#e7e7e7]/15 bg-[#0b0b0b]/70 p-3 backdrop-blur-xl md:p-4"
             >
               <div
                 className="relative aspect-[4/5] overflow-hidden rounded-lg"
                 style={{
-                  background: `radial-gradient(ellipse 70% 50% at 50% 60%, ${r.accent}22 0%, transparent 65%), linear-gradient(180deg, rgba(28,27,33,0.7), rgba(10,10,12,0.95))`,
+                  background: `radial-gradient(ellipse 70% 50% at 50% 60%, ${r.accent}22 0%, transparent 65%), linear-gradient(180deg, rgba(30, 30, 30, 0.7), rgba(11, 11, 11, 0.95))`,
                 }}
               >
                 <Image
@@ -141,13 +141,13 @@ function ConsoleInterior() {
                 />
                 <span
                   className="absolute left-1.5 top-1.5 rounded-full border px-1.5 py-0.5 text-[8px] font-bold uppercase tracking-[0.2em] backdrop-blur md:left-2 md:top-2 md:px-2 md:py-0.5 md:text-[9px]"
-                  style={{ borderColor: `${r.accent}66`, color: r.accent, background: 'rgba(10,10,12,0.7)' }}
+                  style={{ borderColor: `${r.accent}66`, color: r.accent, background: 'rgba(11, 11, 11, 0.7)' }}
                 >
                   {r.category}
                 </span>
               </div>
               <div>
-                <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-[#8891C7]">
+                <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-[#a8a8a8]">
                   Available in UAE
                 </div>
                 <div className="text-xs font-semibold text-white md:text-sm">{r.name}</div>
@@ -157,30 +157,30 @@ function ConsoleInterior() {
         </div>
 
         {/* CTA strip */}
-        <div className="absolute bottom-0 left-0 right-0 flex flex-wrap items-center justify-between gap-2 border-t border-[#DEE0F0]/10 bg-[#0a0a0c]/85 px-4 py-3 backdrop-blur-xl md:px-6">
+        <div className="absolute bottom-0 left-0 right-0 flex flex-wrap items-center justify-between gap-2 border-t border-[#e7e7e7]/10 bg-[#0b0b0b]/85 px-4 py-3 backdrop-blur-xl md:px-6">
           <div className="flex flex-wrap items-center gap-2">
             <Link
               href="/book-demo/"
-              className="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-br from-[#3a55c4] via-[#273F94] to-[#1a2e6e] px-3.5 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-white shadow-[0_8px_24px_rgba(39,63,148,0.45)] md:text-[11px]"
+              className="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-br from-[#7f7f7f] via-[#5e5e5e] to-[#444444] px-3.5 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-white shadow-[0_8px_24px_rgba(94, 94, 94, 0.45)] md:text-[11px]"
             >
               Book demo
               <ArrowRight className="h-3 w-3" />
             </Link>
             <Link
               href="/configure/"
-              className="inline-flex items-center gap-1.5 rounded-full border border-[#DEE0F0]/30 bg-white/5 px-3.5 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-[#DEE0F0] backdrop-blur md:text-[11px]"
+              className="inline-flex items-center gap-1.5 rounded-full border border-[#e7e7e7]/30 bg-white/5 px-3.5 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-[#e7e7e7] backdrop-blur md:text-[11px]"
             >
               Configure solution
               <ArrowRight className="h-3 w-3" />
             </Link>
             <Link
               href="/contact/"
-              className="inline-flex items-center gap-1.5 rounded-full border border-[#DEE0F0]/30 px-3.5 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-[#D7DBEA] md:text-[11px]"
+              className="inline-flex items-center gap-1.5 rounded-full border border-[#e7e7e7]/30 px-3.5 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-[#e1e1e1] md:text-[11px]"
             >
               Request UAE quotation
             </Link>
           </div>
-          <div className="hidden items-center gap-2 text-[10px] uppercase tracking-[0.22em] text-[#8891C7] md:flex">
+          <div className="hidden items-center gap-2 text-[10px] uppercase tracking-[0.22em] text-[#a8a8a8] md:flex">
             <MapPin className="h-3 w-3" /> Dubai · UAE
           </div>
         </div>

src/components/sections/robotics-spline-showcase.tsx

@@ -18,7 +18,7 @@ export function RoboticsSplineShowcase() {
         position: 'relative',
         overflow: 'hidden',
         background: '#221F20',
-        color: '#FBFBFD',
+        color: '#fcfcfc',
         padding: 'clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2rem)',
       }}
     >
@@ -28,7 +28,7 @@ export function RoboticsSplineShowcase() {
           position: 'absolute',
           inset: 0,
           background:
-            'radial-gradient(circle at 70% 30%, rgba(39,63,148,0.42), transparent 42%), radial-gradient(circle at 20% 80%, rgba(222,224,240,0.10), transparent 36%)',
+            'radial-gradient(circle at 70% 30%, rgba(94, 94, 94, 0.42), transparent 42%), radial-gradient(circle at 20% 80%, rgba(231, 231, 231, 0.10), transparent 36%)',
           pointerEvents: 'none',
         }}
       />
@@ -46,7 +46,7 @@ export function RoboticsSplineShowcase() {
       />
 
       <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto' }}>
-        <Card style={{ overflow: 'hidden', borderColor: 'rgba(222,224,240,0.15)', background: 'rgba(34,31,32,0.7)' }}>
+        <Card style={{ overflow: 'hidden', borderColor: 'rgba(231, 231, 231, 0.15)', background: 'rgba(34,31,32,0.7)' }}>
           <Spotlight size={460} />
 
           <div className="spline-grid">
@@ -71,16 +71,16 @@ export function RoboticsSplineShowcase() {
                   marginBottom: '1.5rem',
                   padding: '0.5rem 1rem',
                   borderRadius: 999,
-                  border: '1px solid rgba(222,224,240,0.25)',
+                  border: '1px solid rgba(231, 231, 231, 0.25)',
-                  background: 'rgba(39,63,148,0.20)',
+                  background: 'rgba(94, 94, 94, 0.20)',
                   fontSize: '0.65rem',
                   fontWeight: 700,
                   letterSpacing: '0.3em',
                   textTransform: 'uppercase',
-                  color: '#DEE0F0',
+                  color: '#e7e7e7',
                 }}
               >
-                <span style={{ width: 6, height: 6, borderRadius: 999, background: '#DEE0F0' }} />
+                <span style={{ width: 6, height: 6, borderRadius: 999, background: '#e7e7e7' }} />
                 Robotics Catalog · UAE
               </span>
 
@@ -91,7 +91,7 @@ export function RoboticsSplineShowcase() {
                   fontWeight: 600,
                   lineHeight: 1.05,
                   letterSpacing: '-0.035em',
-                  color: '#FBFBFD',
+                  color: '#fcfcfc',
                   overflowWrap: 'break-word',
                   wordBreak: 'normal',
                   hyphens: 'manual',
@@ -102,12 +102,12 @@ export function RoboticsSplineShowcase() {
                   style={{
                     display: 'inline-block',
                     background:
-                      'linear-gradient(110deg, #FFFFFF 0%, #DEE0F0 50%, #8891C7 100%)',
+                      'linear-gradient(110deg, #FFFFFF 0%, #e7e7e7 50%, #a8a8a8 100%)',
                     WebkitBackgroundClip: 'text',
                     backgroundClip: 'text',
                     WebkitTextFillColor: 'transparent',
                     color: 'transparent',
-                    filter: 'drop-shadow(0 4px 18px rgba(58,85,196,0.32))',
+                    filter: 'drop-shadow(0 4px 18px rgba(127, 127, 127, 0.32))',
                   }}
                 >
                   Robotics Solutions.
@@ -121,7 +121,7 @@ export function RoboticsSplineShowcase() {
                   maxWidth: 560,
                   fontSize: 'clamp(0.95rem, 1.6vw, 1.1rem)',
                   lineHeight: 1.7,
-                  color: 'rgba(222,224,240,0.82)',
+                  color: 'rgba(231, 231, 231, 0.82)',
                 }}
               >
                 Browse selected Unitree and Pudu Robotics solutions available in the UAE through YS Lootah Robotics — humanoid, quadruped, service, delivery, and cleaning robots ready for Dubai businesses.
@@ -144,14 +144,14 @@ export function RoboticsSplineShowcase() {
                     gap: '0.4rem',
                     padding: '0.85rem 1.5rem',
                     borderRadius: 999,
-                    background: 'linear-gradient(135deg, #3a55c4 0%, #273F94 55%, #1a2e6e 100%)',
+                    background: 'linear-gradient(135deg, #7f7f7f 0%, #5e5e5e 55%, #444444 100%)',
-                    color: '#FBFBFD',
+                    color: '#fcfcfc',
                     fontSize: '0.78rem',
                     fontWeight: 700,
                     letterSpacing: '0.14em',
                     textTransform: 'uppercase',
                     textDecoration: 'none',
-                    boxShadow: '0 14px 40px rgba(39,63,148,0.5)',
+                    boxShadow: '0 14px 40px rgba(94, 94, 94, 0.5)',
                     whiteSpace: 'nowrap',
                   }}
                 >
@@ -167,9 +167,9 @@ export function RoboticsSplineShowcase() {
                     gap: '0.4rem',
                     padding: '0.85rem 1.5rem',
                     borderRadius: 999,
-                    border: '1px solid rgba(222,224,240,0.3)',
+                    border: '1px solid rgba(231, 231, 231, 0.3)',
                     background: 'rgba(255,255,255,0.04)',
-                    color: '#DEE0F0',
+                    color: '#e7e7e7',
                     fontSize: '0.78rem',
                     fontWeight: 700,
                     letterSpacing: '0.14em',
@@ -191,9 +191,9 @@ export function RoboticsSplineShowcase() {
                     gap: '0.4rem',
                     padding: '0.85rem 1.5rem',
                     borderRadius: 999,
-                    border: '1px solid rgba(136,145,199,0.5)',
+                    border: '1px solid rgba(168, 168, 168, 0.5)',
                     background: 'transparent',
-                    color: '#D7DBEA',
+                    color: '#e1e1e1',
                     fontSize: '0.78rem',
                     fontWeight: 700,
                     letterSpacing: '0.14em',
@@ -226,15 +226,15 @@ export function RoboticsSplineShowcase() {
                     style={{
                       padding: '0.875rem 1rem',
                       borderRadius: 16,
-                      border: '1px solid rgba(222,224,240,0.12)',
+                      border: '1px solid rgba(231, 231, 231, 0.12)',
                       background: 'rgba(255,255,255,0.045)',
                       backdropFilter: 'blur(12px)',
                       minWidth: 0,
                     }}
                   >
-                    <item.Icon size={18} style={{ color: '#DEE0F0', marginBottom: '0.5rem' }} />
+                    <item.Icon size={18} style={{ color: '#e7e7e7', marginBottom: '0.5rem' }} />
-                    <div style={{ fontSize: '0.85rem', fontWeight: 600, color: '#FBFBFD' }}>{item.label}</div>
+                    <div style={{ fontSize: '0.85rem', fontWeight: 600, color: '#fcfcfc' }}>{item.label}</div>
-                    <div style={{ marginTop: 4, fontSize: '0.66rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(199, 207, 230,0.72)' }}>
+                    <div style={{ marginTop: 4, fontSize: '0.66rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(215, 215, 215, 0.72)' }}>
                       {item.value}
                     </div>
                   </div>
@@ -249,7 +249,7 @@ export function RoboticsSplineShowcase() {
                   fontWeight: 600,
                   letterSpacing: '0.32em',
                   textTransform: 'uppercase',
-                  color: '#D7DBEA',
+                  color: '#e1e1e1',
                 }}
               >
                 In Tech We Innovate · In Trust We Lead
@@ -271,9 +271,9 @@ export function RoboticsSplineShowcase() {
                   position: 'absolute',
                   inset: '1.25rem',
                   borderRadius: '2rem',
-                  border: '1px solid rgba(222,224,240,0.15)',
+                  border: '1px solid rgba(231, 231, 231, 0.15)',
-                  background: 'rgba(39,63,148,0.10)',
+                  background: 'rgba(94, 94, 94, 0.10)',
-                  boxShadow: 'inset 0 0 80px rgba(222,224,240,0.05)',
+                  boxShadow: 'inset 0 0 80px rgba(231, 231, 231, 0.05)',
                   backdropFilter: 'blur(14px)',
                   pointerEvents: 'none',
                 }}
@@ -286,9 +286,9 @@ export function RoboticsSplineShowcase() {
                   zIndex: 10,
                   padding: '0.5rem 0.9rem',
                   borderRadius: 999,
-                  border: '1px solid rgba(222,224,240,0.22)',
+                  border: '1px solid rgba(231, 231, 231, 0.22)',
                   background: 'rgba(34,31,32,0.72)',
-                  color: '#DEE0F0',
+                  color: '#e7e7e7',
                   fontSize: '0.6rem',
                   fontWeight: 700,
                   letterSpacing: '0.26em',
@@ -306,15 +306,15 @@ export function RoboticsSplineShowcase() {
                   zIndex: 10,
                   padding: '0.85rem 1.1rem',
                   borderRadius: 16,
-                  border: '1px solid rgba(222,224,240,0.15)',
+                  border: '1px solid rgba(231, 231, 231, 0.15)',
                   background: 'rgba(34,31,32,0.78)',
                   backdropFilter: 'blur(12px)',
                 }}
               >
-                <div style={{ fontSize: '0.62rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(199, 207, 230,0.7)' }}>
+                <div style={{ fontSize: '0.62rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(215, 215, 215, 0.7)' }}>
                   YS Lootah Robotics
                 </div>
-                <div style={{ marginTop: 4, fontSize: '0.88rem', fontWeight: 600, color: '#FBFBFD' }}>
+                <div style={{ marginTop: 4, fontSize: '0.88rem', fontWeight: 600, color: '#fcfcfc' }}>
                   In Tech We Innovate
                 </div>
               </div>

src/components/ui/CursorSpotlight.tsx

@@ -8,7 +8,7 @@ type Props = {
   className?: string;
 };
 
-export function CursorSpotlight({ color = 'rgba(39, 63, 148, 0.18)', size = 520, className = '' }: Props) {
+export function CursorSpotlight({ color = 'rgba(94, 94, 94, 0.18)', size = 520, className = '' }: Props) {
   const ref = useRef<HTMLDivElement | null>(null);
   const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
   const [enabled, setEnabled] = useState(false);

src/components/ui/GlassPanel.tsx

@@ -16,7 +16,7 @@ export function GlassPanel({ className = '', children, glow = false, style }: Pr
       style={{
         borderRadius: '1.25rem',
         padding: '1.5rem',
-        boxShadow: glow ? '0 12px 60px rgba(0, 0, 0,0.5), 0 0 60px rgba(39, 63, 148,0.18)' : undefined,
+        boxShadow: glow ? '0 12px 60px rgba(0, 0, 0,0.5), 0 0 60px rgba(94, 94, 94, 0.18)' : undefined,
         ...style,
       }}
     >

src/components/ui/card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'rounded-3xl border border-[#DEE0F0]/15 bg-[#221F20]/80 text-white shadow-[0_24px_120px_rgba(39,63,148,0.22)] backdrop-blur-2xl',
+      'rounded-3xl border border-[#e7e7e7]/15 bg-[#221F20]/80 text-white shadow-[0_24px_120px_rgba(94, 94, 94, 0.22)] backdrop-blur-2xl',
       className
     )}
     {...props}
@@ -40,7 +40,7 @@ const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn('text-sm text-[#DEE0F0]/70', className)} {...props} />
+  <p ref={ref} className={cn('text-sm text-[#e7e7e7]/70', className)} {...props} />
 ));
 CardDescription.displayName = 'CardDescription';
 

src/components/ui/container-scroll-animation.tsx

@@ -92,40 +92,40 @@ function DisplayFrame({
         scale,
         y: translate,
         boxShadow:
-          '0 0 0 1px rgba(222,224,240,0.08), 0 40px 120px rgba(0,0,0,0.65), 0 0 80px rgba(39,63,148,0.28), inset 0 1px 0 rgba(222,224,240,0.08)',
+          '0 0 0 1px rgba(231, 231, 231, 0.08), 0 40px 120px rgba(0,0,0,0.65), 0 0 80px rgba(94, 94, 94, 0.28), inset 0 1px 0 rgba(231, 231, 231, 0.08)',
       }}
       className={cn(
-        'relative mx-auto w-full max-w-6xl rounded-[30px] border border-[#DEE0F0]/15 p-2 md:p-4',
+        'relative mx-auto w-full max-w-6xl rounded-[30px] border border-[#e7e7e7]/15 p-2 md:p-4',
-        'bg-[linear-gradient(180deg,rgba(28,27,33,0.92)_0%,rgba(20,18,22,0.96)_55%,rgba(8,8,10,0.98)_100%)]',
+        'bg-[linear-gradient(180deg,rgba(30, 30, 30, 0.92)_0%,rgba(20, 20, 20, 0.96)_55%,rgba(9, 9, 9, 0.98)_100%)]',
         'backdrop-blur-2xl'
       )}
     >
       {/* outer frame chrome */}
-      <div className="pointer-events-none absolute -inset-px rounded-[30px] bg-[linear-gradient(135deg,rgba(222,224,240,0.18),rgba(136,145,199,0.08)_40%,transparent_70%)] opacity-60" />
+      <div className="pointer-events-none absolute -inset-px rounded-[30px] bg-[linear-gradient(135deg,rgba(231, 231, 231, 0.18),rgba(168, 168, 168, 0.08)_40%,transparent_70%)] opacity-60" />
       {/* corner taps */}
       <CornerTaps />
       {/* inner content stage */}
-      <div className="relative h-[27rem] w-full overflow-hidden rounded-[22px] border border-[#DEE0F0]/12 bg-[#0a0a0c] md:h-[38rem] md:rounded-[24px]">
+      <div className="relative h-[27rem] w-full overflow-hidden rounded-[22px] border border-[#e7e7e7]/12 bg-[#0b0b0b] md:h-[38rem] md:rounded-[24px]">
         {/* grid floor + blue glow */}
         <div
           aria-hidden
-          className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_70%_60%_at_50%_30%,rgba(58,85,196,0.32),transparent_60%),radial-gradient(ellipse_50%_40%_at_50%_100%,rgba(222,224,240,0.18),transparent_70%)]"
+          className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_70%_60%_at_50%_30%,rgba(127, 127, 127, 0.32),transparent_60%),radial-gradient(ellipse_50%_40%_at_50%_100%,rgba(231, 231, 231, 0.18),transparent_70%)]"
         />
         <div
           aria-hidden
-          className="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(199, 207, 230,0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(199, 207, 230,0.06)_1px,transparent_1px)] bg-[size:42px_42px] [mask-image:radial-gradient(ellipse_70%_70%_at_50%_50%,#000_30%,transparent_82%)]"
+          className="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(215, 215, 215, 0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(215, 215, 215, 0.06)_1px,transparent_1px)] bg-[size:42px_42px] [mask-image:radial-gradient(ellipse_70%_70%_at_50%_50%,#000_30%,transparent_82%)]"
         />
         {/* status bar */}
-        <div className="absolute left-0 right-0 top-0 z-20 flex items-center justify-between border-b border-[#DEE0F0]/10 bg-[#0a0a0c]/80 px-4 py-2.5 backdrop-blur-xl">
+        <div className="absolute left-0 right-0 top-0 z-20 flex items-center justify-between border-b border-[#e7e7e7]/10 bg-[#0b0b0b]/80 px-4 py-2.5 backdrop-blur-xl">
           <div className="flex items-center gap-1.5">
-            <span className="h-2 w-2 rounded-full bg-[#8891C7]/60" />
+            <span className="h-2 w-2 rounded-full bg-[#a8a8a8]/60" />
-            <span className="h-2 w-2 rounded-full bg-[#8891C7]/40" />
+            <span className="h-2 w-2 rounded-full bg-[#a8a8a8]/40" />
-            <span className="h-2 w-2 rounded-full bg-[#3a55c4]" />
+            <span className="h-2 w-2 rounded-full bg-[#7f7f7f]" />
           </div>
-          <span className="text-[10px] font-semibold uppercase tracking-[0.28em] text-[#DEE0F0]/80">
+          <span className="text-[10px] font-semibold uppercase tracking-[0.28em] text-[#e7e7e7]/80">
             YS Lootah Robotics · Showroom Console
           </span>
-          <span className="text-[10px] font-semibold uppercase tracking-[0.28em] text-[#8891C7]">
+          <span className="text-[10px] font-semibold uppercase tracking-[0.28em] text-[#a8a8a8]">
             Live · UAE
           </span>
         </div>
@@ -148,7 +148,7 @@ function CornerTaps() {
           key={pos}
           aria-hidden
           className={cn(
-            'pointer-events-none absolute h-3 w-3 rounded-[3px] border border-[#DEE0F0]/35 bg-[#0a0a0c]/60',
+            'pointer-events-none absolute h-3 w-3 rounded-[3px] border border-[#e7e7e7]/35 bg-[#0b0b0b]/60',
             pos
           )}
         />

src/components/ui/spline-scene.tsx

@@ -16,9 +16,9 @@ export function SplineScene({ scene, className }: SplineSceneProps) {
       fallback={
         <div className="flex h-full w-full items-center justify-center bg-[#221F20]">
           <div className="relative h-12 w-12">
-            <div className="absolute inset-0 rounded-full border border-[#DEE0F0]/20" />
+            <div className="absolute inset-0 rounded-full border border-[#e7e7e7]/20" />
-            <div className="absolute inset-0 animate-spin rounded-full border-t-2 border-[#DEE0F0]" />
+            <div className="absolute inset-0 animate-spin rounded-full border-t-2 border-[#e7e7e7]" />
-            <div className="absolute inset-2 rounded-full bg-[#273F94]/30 blur-md" />
+            <div className="absolute inset-2 rounded-full bg-[#5e5e5e]/30 blur-md" />
           </div>
         </div>
       }

src/components/ui/spotlight.tsx

@@ -68,7 +68,7 @@ export function Spotlight({
       ref={containerRef}
       className={cn(
         'pointer-events-none absolute rounded-full bg-[radial-gradient(circle_at_center,var(--tw-gradient-stops),transparent_75%)] blur-2xl transition-opacity duration-300',
-        'from-[#DEE0F0]/45 via-[#273F94]/35 to-transparent',
+        'from-[#e7e7e7]/45 via-[#5e5e5e]/35 to-transparent',
         isHovered ? 'opacity-100' : 'opacity-0',
         className
       )}

src/data/accessories.ts

@@ -69,9 +69,9 @@ export const GROUP_LABELS: Record<AccessoryGroup, string> = {
   'iot-integration': 'IoT & Building Integration',
 };
 
-const GOLD_CHAMPAGNE = '#DEE0F0';
+const GOLD_CHAMPAGNE = '#e7e7e7';
-const GOLD_BRAND = '#273F94';
+const GOLD_BRAND = '#5e5e5e';
-const GOLD_BRONZE = '#8891C7';
+const GOLD_BRONZE = '#a8a8a8';
 
 export const ACCESSORIES: Accessory[] = [
   // ============ UNITREE DEXTEROUS HANDS ============

src/data/industries.ts

@@ -23,7 +23,7 @@ export const INDUSTRIES: Industry[] = [
     solution: 'Service and delivery robots that greet, deliver, and assist around the clock.',
     benefit: 'Consistent guest experience, lower turnover impact, premium brand positioning.',
     matchCategories: ['hospitality', 'service', 'delivery'],
-    accent: '#DEE0F0',
+    accent: '#e7e7e7',
     icon: 'hotel',
     image: '/industries/cards/hospitality.webp',
     imageAlt: 'Service robot delivering in a UAE hospitality venue',
@@ -36,7 +36,7 @@ export const INDUSTRIES: Industry[] = [
     solution: 'Delivery robots like BellaBot and KettyBot move food fast and reliably.',
     benefit: 'Faster table turns, happier staff, instagrammable brand moment.',
     matchCategories: ['delivery', 'service', 'hospitality'],
-    accent: '#8891C7',
+    accent: '#a8a8a8',
     icon: 'utensils',
     image: '/industries/cards/restaurants-cafes.webp',
     imageAlt: 'Tray-runner delivery robot serving a UAE restaurant floor',
@@ -49,7 +49,7 @@ export const INDUSTRIES: Industry[] = [
     solution: 'Multi-floor delivery robots and humanoid concierge experiences.',
     benefit: 'Faster service, lower overhead, signature guest moments.',
     matchCategories: ['delivery', 'hospitality', 'service'],
-    accent: '#273F94',
+    accent: '#5e5e5e',
     icon: 'hotel',
     image: '/industries/cards/hotels-resorts.webp',
     imageAlt: 'Multi-floor delivery robot serving hotel guests in the UAE',
@@ -62,7 +62,7 @@ export const INDUSTRIES: Industry[] = [
     solution: 'Cleaning robots, service robots, and humanoid activations for retail floors.',
     benefit: 'Cleaner venues, memorable customer experiences, modern positioning.',
     matchCategories: ['cleaning', 'service', 'humanoid'],
-    accent: '#DEE0F0',
+    accent: '#e7e7e7',
     icon: 'shopping-bag',
     image: '/industries/cards/shopping-malls.webp',
     imageAlt: 'Service robot operating in a high-traffic UAE retail environment',
@@ -75,7 +75,7 @@ export const INDUSTRIES: Industry[] = [
     solution: 'Autonomous delivery robots for medications, meals, and supplies.',
     benefit: 'More clinician time at the bedside, lower contamination risk, predictable logistics.',
     matchCategories: ['delivery', 'service'],
-    accent: '#273F94',
+    accent: '#5e5e5e',
     icon: 'heart-pulse',
     image: '/industries/cards/healthcare.webp',
     imageAlt: 'Autonomous delivery robot for UAE healthcare and care facilities',
@@ -88,7 +88,7 @@ export const INDUSTRIES: Industry[] = [
     solution: 'Unitree humanoids and quadrupeds for STEM labs and innovation programs.',
     benefit: 'Future-ready students, signature programs, and stronger STEM outcomes.',
     matchCategories: ['humanoid', 'service'],
-    accent: '#8891C7',
+    accent: '#a8a8a8',
     icon: 'graduation-cap',
     image: '/images/robots/unitree-h1.webp',
     imageAlt: 'Humanoid research robot in a UAE STEM lab',
@@ -101,7 +101,7 @@ export const INDUSTRIES: Industry[] = [
     solution: 'Quadruped robots like Unitree Go2 and B2 patrol autonomously.',
     benefit: 'Continuous coverage, audit trails, and consistent perimeter monitoring.',
     matchCategories: ['quadruped', 'commercial'],
-    accent: '#DEE0F0',
+    accent: '#e7e7e7',
     icon: 'shield',
     image: '/industries/cards/security-surveillance.webp',
     imageAlt: 'Quadruped robot on autonomous security patrol at a UAE facility',
@@ -114,7 +114,7 @@ export const INDUSTRIES: Industry[] = [
     solution: 'Quadruped inspection robots and autonomous delivery platforms.',
     benefit: 'Higher throughput, fewer errors, and accurate facility monitoring.',
     matchCategories: ['quadruped', 'delivery', 'commercial'],
-    accent: '#273F94',
+    accent: '#5e5e5e',
     icon: 'warehouse',
     image: '/industries/cards/warehouses-logistics.webp',
     imageAlt: 'Industrial robot for UAE warehouses and logistics operations',
@@ -127,7 +127,7 @@ export const INDUSTRIES: Industry[] = [
     solution: 'Humanoid and quadruped robot showcases configured for your brand.',
     benefit: 'Press coverage, viral content, and unmistakable premium positioning.',
     matchCategories: ['humanoid', 'quadruped'],
-    accent: '#8891C7',
+    accent: '#a8a8a8',
     icon: 'sparkles',
     image: '/industries/cards/events.webp',
     imageAlt: 'Robotics activation for UAE live events and brand experiences',
@@ -140,7 +140,7 @@ export const INDUSTRIES: Industry[] = [
     solution: 'A multi-robot fleet across cleaning, delivery, and patrol functions.',
     benefit: 'Single operational system, predictable costs, future-ready facility.',
     matchCategories: ['cleaning', 'commercial', 'delivery'],
-    accent: '#DEE0F0',
+    accent: '#e7e7e7',
     icon: 'building',
     image: '/industries/cards/smart-buildings.webp',
     imageAlt: 'Cleaning robot in a modern UAE smart office building',
@@ -153,7 +153,7 @@ export const INDUSTRIES: Industry[] = [
     solution: 'A curated multi-brand robotics portfolio with full local support.',
     benefit: 'Visible innovation leadership and a UAE-supported deployment model.',
     matchCategories: ['humanoid', 'quadruped', 'service'],
-    accent: '#273F94',
+    accent: '#5e5e5e',
     icon: 'landmark',
     image: '/industries/unitree/utility-room.webp',
     imageAlt: 'Quadruped robots deployed for UAE civic and emergency services',

src/data/robots.ts

@@ -36,9 +36,9 @@ export interface Robot {
   configureSlug?: string;
 }
 
-const GOLD_CHAMPAGNE = '#DEE0F0';
+const GOLD_CHAMPAGNE = '#e7e7e7';
-const GOLD_BRAND = '#273F94';
+const GOLD_BRAND = '#5e5e5e';
-const GOLD_BRONZE = '#8891C7';
+const GOLD_BRONZE = '#a8a8a8';
 
 export const BRANDS: Record<RobotBrand, { name: string; tagline: string; description: string; url: string; accent: string }> = {
   unitree: {
@@ -1032,6 +1032,204 @@ export const ROBOTS: Robot[] = [
     accent: GOLD_BRAND,
     officialUrl: 'https://www.pudurobotics.com/en/products/mt1',
   },
+  {
+    id: 'pudu-cc1-pro',
+    slug: 'pudu-cc1-pro',
+    brand: 'pudu',
+    brandLabel: 'Pudu',
+    name: 'PUDU CC1 Pro',
+    tagline: 'Upgraded 4-in-1 commercial cleaning robot for demanding, high-traffic venues.',
+    category: 'cleaning',
+    categories: ['cleaning', 'commercial'],
+    shortDescription:
+      'An enhanced sweep, scrub, vacuum and mop cleaning robot with stronger suction and longer autonomy, available in the UAE through YS Lootah Robotics.',
+    longDescription:
+      'CC1 Pro builds on the CC1 platform with higher suction, extended runtime and refined navigation for malls, airports, hotels and offices. Visual and laser SLAM, breakpoint resume, auto water and detergent docking, plus digital reporting.',
+    features: [
+      '4-in-1: sweep, scrub, vacuum, mop',
+      'High-power suction',
+      'Visual and Laser SLAM',
+      'Breakpoint resume cleaning',
+      'Auto water, detergent and charging dock',
+      'Digital reports and real-time alerts',
+    ],
+    useCases: ['Shopping malls', 'Airports and transport hubs', 'Hotels and resorts', 'Corporate offices'],
+    specs: [
+      { label: 'Modes', value: 'Sweep, scrub, mop, vacuum' },
+      { label: 'Class', value: 'Pro commercial cleaner' },
+      SPEC_CONSULT,
+      SPEC_PLACEHOLDER,
+    ],
+    image: '/images/robots/pudu-cc1-pro.webp',
+    imageType: 'photo',
+    accent: GOLD_BRONZE,
+    officialUrl: 'https://www.pudurobotics.com/en/products/puduCC1',
+  },
+  {
+    id: 'pudu-mt1-max',
+    slug: 'pudu-mt1-max',
+    brand: 'pudu',
+    brandLabel: 'Pudu',
+    name: 'PUDU MT1 Max',
+    tagline: 'Large-area AI robotic sweeper for industrial floors and outdoor walkways.',
+    category: 'cleaning',
+    categories: ['cleaning', 'industrial', 'commercial'],
+    shortDescription:
+      'A high-capacity AI sweeper for very large facilities with wide cleaning width and AI trash recognition, available in the UAE through YS Lootah Robotics.',
+    longDescription:
+      'MT1 Max extends the MT1 sweeper with a larger hopper, wider cleaning path and extended runtime for industrial floors, campuses and transport hubs. VSLAM, Marker and Lidar SLAM with elevator and e-gate IoT.',
+    features: [
+      'AI trash recognition cameras',
+      'Wide-path dual-disc brush',
+      'Large-capacity hopper',
+      'Extended runtime and fast charge',
+      'VSLAM, Marker and Lidar SLAM',
+      'Elevator and e-gate IoT',
+    ],
+    useCases: ['Industrial floors', 'Large campuses', 'Outdoor walkways', 'Public transport hubs'],
+    specs: [
+      { label: 'Type', value: 'AI sweeper robot' },
+      { label: 'Coverage', value: 'Large-area' },
+      SPEC_CONSULT,
+      SPEC_PLACEHOLDER,
+    ],
+    image: '/images/robots/pudu-mt1-max.webp',
+    imageType: 'photo',
+    accent: GOLD_BRAND,
+    officialUrl: 'https://www.pudurobotics.com/en/products/mt1',
+  },
+  {
+    id: 'pudu-mt1-vac',
+    slug: 'pudu-mt1-vac',
+    brand: 'pudu',
+    brandLabel: 'Pudu',
+    name: 'PUDU MT1 Vac',
+    tagline: 'AI vacuum sweeper for fine dust and debris across large commercial spaces.',
+    category: 'cleaning',
+    categories: ['cleaning', 'commercial'],
+    shortDescription:
+      'A vacuum-focused variant of the MT1 sweeper for fine dust and debris pickup, available in the UAE through YS Lootah Robotics.',
+    longDescription:
+      'MT1 Vac pairs AI navigation with strong vacuum pickup for offices, malls and transport hubs, keeping large floors dust-free with autonomous, self-docking operation.',
+    features: [
+      'Strong vacuum pickup',
+      'AI trash recognition',
+      'Autonomous, self-docking',
+      'VSLAM, Marker and Lidar SLAM',
+      'Extended runtime and fast charge',
+      'Elevator and e-gate IoT',
+    ],
+    useCases: ['Malls and retail', 'Corporate offices', 'Transport hubs', 'Large facilities'],
+    specs: [
+      { label: 'Type', value: 'AI vacuum sweeper' },
+      { label: 'Focus', value: 'Fine dust and debris' },
+      SPEC_CONSULT,
+      SPEC_PLACEHOLDER,
+    ],
+    image: '/images/robots/pudu-mt1-vac.webp',
+    imageType: 'photo',
+    accent: GOLD_BRONZE,
+    officialUrl: 'https://www.pudurobotics.com/en/products/mt1',
+  },
+  {
+    id: 'pudu-t600',
+    slug: 'pudu-t600',
+    brand: 'pudu',
+    brandLabel: 'Pudu',
+    name: 'PUDU T600',
+    tagline: 'Industrial AMR for flexible material transport across factories and warehouses.',
+    category: 'industrial',
+    categories: ['industrial', 'delivery', 'commercial'],
+    shortDescription:
+      'A robust industrial autonomous mobile robot for material handling with modular attachments, available in the UAE through YS Lootah Robotics.',
+    longDescription:
+      'PUDU T600 moves materials autonomously across manufacturing and warehouse floors with dual SLAM navigation, autonomous and follow modes, and modular load attachments for a wide range of payloads.',
+    features: [
+      'Dual VSLAM and Lidar SLAM',
+      'Autonomous and follow modes',
+      'Modular load attachments',
+      'Long runtime and fast charge',
+      'Threshold and slope handling',
+      'IoT with gates and elevators',
+    ],
+    useCases: ['Warehouses and factories', 'Manufacturing lines', 'Industrial logistics', 'Back-of-house operations'],
+    specs: [
+      { label: 'Type', value: 'Industrial AMR' },
+      { label: 'Transport', value: 'Modular payloads' },
+      SPEC_CONSULT,
+      SPEC_PLACEHOLDER,
+    ],
+    image: '/images/robots/pudu-t600.webp',
+    imageType: 'photo',
+    accent: GOLD_BRAND,
+    officialUrl: 'https://www.pudurobotics.com/en/products',
+  },
+  {
+    id: 'pudu-t600-underride',
+    slug: 'pudu-t600-underride',
+    brand: 'pudu',
+    brandLabel: 'Pudu',
+    name: 'PUDU T600 Underride',
+    tagline: 'Underride AMR that slides beneath carts and racks for latent material transport.',
+    category: 'industrial',
+    categories: ['industrial', 'delivery', 'commercial'],
+    shortDescription:
+      'An underride (latent) variant of the T600 that docks beneath carts and shelves to move them autonomously, available in the UAE through YS Lootah Robotics.',
+    longDescription:
+      'The T600 Underride slides under wheeled carts and racks, lifts and tows them across facilities, and returns for the next task, streamlining repetitive intralogistics with dual SLAM navigation.',
+    features: [
+      'Low-profile underride chassis',
+      'Autonomous cart and rack towing',
+      'Dual VSLAM and Lidar SLAM',
+      'High payload handling',
+      'Long runtime and fast charge',
+      'IoT with gates and elevators',
+    ],
+    useCases: ['Warehouses and factories', 'Intralogistics', 'Cart and rack movement', 'Back-of-house operations'],
+    specs: [
+      { label: 'Type', value: 'Underride AMR' },
+      { label: 'Mode', value: 'Latent cart towing' },
+      SPEC_CONSULT,
+      SPEC_PLACEHOLDER,
+    ],
+    image: '/images/robots/pudu-t600-underride.webp',
+    imageType: 'photo',
+    accent: GOLD_BRAND,
+    officialUrl: 'https://www.pudurobotics.com/en/products',
+  },
+  {
+    id: 'pudu-bg1-pro',
+    slug: 'pudu-bg1-pro',
+    brand: 'pudu',
+    brandLabel: 'Pudu',
+    name: 'PUDU BG1 Pro',
+    tagline: 'Ride-on grade commercial scrubber-sweeper for very large industrial floors.',
+    category: 'cleaning',
+    categories: ['cleaning', 'industrial', 'commercial'],
+    shortDescription:
+      'A large-format autonomous scrubber and sweeper for warehouses, factories and big-box retail, available in the UAE through YS Lootah Robotics.',
+    longDescription:
+      'BG1 Pro combines sweeping and scrubbing in a high-throughput autonomous platform for the largest floors, with wide cleaning width, big tanks and long unattended runtime.',
+    features: [
+      'Combined sweep and scrub',
+      'Wide cleaning path',
+      'Large water and recovery tanks',
+      'Long unattended runtime',
+      'Autonomous, self-docking',
+      'Dual SLAM navigation',
+    ],
+    useCases: ['Warehouses and factories', 'Big-box retail', 'Airports and hubs', 'Industrial facilities'],
+    specs: [
+      { label: 'Type', value: 'Scrubber-sweeper' },
+      { label: 'Scale', value: 'Very large floors' },
+      SPEC_CONSULT,
+      SPEC_PLACEHOLDER,
+    ],
+    image: '/images/robots/pudu-bg1-pro.webp',
+    imageType: 'photo',
+    accent: GOLD_BRONZE,
+    officialUrl: 'https://www.pudurobotics.com/en/products',
+  },
 ];
 
 export function getRobotBySlug(slug: string): Robot | undefined {

src/hooks/useUrlSync.test.ts

@@ -25,7 +25,7 @@ describe('URL Serialization', () => {
   describe('serializeConfig', () => {
     it('should serialize colors, persona, and payloads to base64', () => {
       const encoded = serializeConfig({
-        activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#0000ff' },
+        activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#808080' },
         activePersonaAttire: 'Emarati Kandura',
         activeBody: 'basic',
         activePayloads: [{ id: 'cam1', type: 'camera', position: 'head' }],
@@ -44,7 +44,7 @@ describe('URL Serialization', () => {
   describe('deserializeConfig', () => {
     it('should decode base64 and return valid state', () => {
       const original = {
-        activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#0000ff' },
+        activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#808080' },
         activePersonaAttire: 'Industrial Vest',
         activeBody: 'edu' as const,
         activePayloads: [
@@ -96,7 +96,7 @@ describe('Store integration with URL', () => {
   });
 
   it('should preserve state through serialize/deserialize cycle', () => {
-    configStore.getState().setColors({ primary: '#abc123', secondary: '#def456', accent: '#789abc' });
+    configStore.getState().setColors({ primary: '#abc123', secondary: '#def456', accent: '#9a9a9a' });
     configStore.getState().setPersonaAttire('Emarati Kandura');
     configStore.getState().addPayload({ id: 'cam1', type: 'PTZ Camera', position: 'head' });
     configStore.getState().addPayload({ id: 'light1', type: 'LED Panel', position: 'chest' });

src/store/useConfigStore.test.ts

@@ -11,8 +11,8 @@ describe('useConfigStore (vanilla)', () => {
       const state = configStore.getState();
 
       expect(state.activeColors).toEqual({
-        primary: '#96a2b6',
+        primary: '#a6a6a6',
-        secondary: '#1e293b',
+        secondary: '#2d2d2d',
         accent: '#f59e0b',
       });
       expect(state.activePersonaAttire).toBe('none');
@@ -41,7 +41,7 @@ describe('useConfigStore (vanilla)', () => {
 
       const state = configStore.getState();
       expect(state.activeColors.primary).toBe('#ff0000');
-      expect(state.activeColors.secondary).toBe('#1e293b');
+      expect(state.activeColors.secondary).toBe('#2d2d2d');
       expect(state.activeColors.accent).toBe('#f59e0b');
     });
 
@@ -49,13 +49,13 @@ describe('useConfigStore (vanilla)', () => {
       configStore.getState().setColors({
         primary: '#ff0000',
         secondary: '#00ff00',
-        accent: '#0000ff',
+        accent: '#808080',
       });
 
       expect(configStore.getState().activeColors).toEqual({
         primary: '#ff0000',
         secondary: '#00ff00',
-        accent: '#0000ff',
+        accent: '#808080',
       });
     });
   });
@@ -133,7 +133,7 @@ describe('useConfigStore (vanilla)', () => {
       configStore.getState().reset();
 
       const state = configStore.getState();
-      expect(state.activeColors.primary).toBe('#96a2b6');
+      expect(state.activeColors.primary).toBe('#a6a6a6');
       expect(state.activePersonaAttire).toBe('none');
       expect(state.activeBody).toBe('basic');
       expect(state.activePayloads).toEqual([]);
@@ -144,7 +144,7 @@ describe('useConfigStore (vanilla)', () => {
   describe('hydrate', () => {
     it('should hydrate state from partial config', () => {
       configStore.getState().hydrate({
-        activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#0000ff' },
+        activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#808080' },
         activePersonaAttire: 'Emarati Kandura',
       });
 
@@ -163,7 +163,7 @@ describe('serializeConfig & deserializeConfig', () => {
 
   it('should serialize state to base64', () => {
     const state: ConfigState = {
-      activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#0000ff' },
+      activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#808080' },
       activePersonaAttire: 'Test Attire',
       activeBody: 'basic',
       activePayloads: [{ id: 'p1', type: 'camera', position: 'head' }],
@@ -177,7 +177,7 @@ describe('serializeConfig & deserializeConfig', () => {
 
   it('should deserialize base64 to state', () => {
     const state: ConfigState = {
-      activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#0000ff' },
+      activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#808080' },
       activePersonaAttire: 'Test Attire',
       activeBody: 'basic',
       activePayloads: [{ id: 'p1', type: 'camera', position: 'head' }],
@@ -206,7 +206,7 @@ describe('serializeConfig & deserializeConfig', () => {
 
   it('should round-trip complex state correctly', () => {
     const original: ConfigState = {
-      activeColors: { primary: '#aabbcc', secondary: '#ddeeff', accent: '#112233' },
+      activeColors: { primary: '#bbbbbb', secondary: '#eeeeee', accent: '#222222' },
       activePersonaAttire: 'Emarati Kandura',
       activeBody: 'edu',
       activePayloads: [

src/store/useConfigStore.ts

@@ -40,8 +40,8 @@ export type ConfigStore = ConfigState & ConfigActions;
 
 // Default state values
 const defaultColors: ColorConfig = {
-  primary: '#96a2b6',
+  primary: '#a6a6a6',
-  secondary: '#1e293b',
+  secondary: '#2d2d2d',
   accent: '#f59e0b',
 };
 

src/store/usePersonaStore.ts

@@ -29,25 +29,25 @@ export const DEFAULT_PERSONAS: PersonaOption[] = [
     id: 'none',
     label: 'Default',
     description: 'Original robot appearance',
-    colors: { torso: '#3b82f6', legs: '#3b82f6' },
+    colors: { torso: '#999999', legs: '#999999' },
   },
   {
     id: 'emarati-kandura',
     label: 'Emarati Kandura',
     description: 'Traditional white robe attire',
-    colors: { torso: '#FBFBFD', legs: '#FBFBFD' },
+    colors: { torso: '#fcfcfc', legs: '#fcfcfc' },
   },
   {
     id: 'industrial-vest',
     label: 'Industrial Vest',
     description: 'High-visibility safety vest',
-    colors: { torso: '#f59e0b', legs: '#3b82f6' },
+    colors: { torso: '#f59e0b', legs: '#999999' },
   },
   {
     id: 'business-suit',
     label: 'Business Suit',
     description: 'Professional navy suit',
-    colors: { torso: '#1e293b', legs: '#1e293b' },
+    colors: { torso: '#2d2d2d', legs: '#2d2d2d' },
   },
 ];
 
@@ -175,7 +175,7 @@ export const personaStore = createStore<PersonaStore>((set, get) => ({
                 id,
                 label,
                 description: label,
-                colors: { torso: '#3b82f6', legs: '#3b82f6' },
+                colors: { torso: '#999999', legs: '#999999' },
                 ...(modelPath ? { modelPath } : {}),
               });
             }