From aca13e275b92f00a77683d95a4ee51c8a772d783 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 7 Nov 2025 17:28:33 +0100
Subject: [PATCH] style: lighten border colors from gray-200 to gray-100

---
 src/components/Footer.tsx                |  2 +-
 src/components/Header.tsx                |  2 +-
 src/pages/agents/AgentComponents.tsx     |  2 +-
 src/pages/agents/AgentHeroAlt.tsx        |  6 +++---
 src/pages/cloud/CloudBluePrint.tsx       |  6 +++---
 src/pages/cloud/CloudFeaturesLight.tsx   | 10 +++++-----
 src/pages/cloud/CloudHeroNew.tsx         |  6 +++---
 src/pages/cloud/CloudUseCases.tsx        | 12 ++++++------
 src/pages/compute/ComputeDesign.tsx      | 12 ++++++------
 src/pages/compute/ComputeFeatures.tsx    | 10 +++++-----
 src/pages/compute/ComputeHero.tsx        |  6 +++---
 src/pages/compute/ComputeOverview.tsx    | 12 ++++++------
 src/pages/download/DownloadHero.tsx      |  2 +-
 src/pages/gpu/GpuHero.tsx                |  6 +++---
 src/pages/home/HomeAurora.tsx            |  2 +-
 src/pages/home/HomeBenefits.tsx          | 12 ++++++------
 src/pages/home/HomeHosting.tsx           | 12 ++++++------
 src/pages/home/HomeTab.tsx               | 10 +++++-----
 src/pages/home/archive/HomeCTA.tsx       |  2 +-
 src/pages/home/archive/HomeGlobeNew.tsx  |  2 +-
 src/pages/home/archive/HomeHero.tsx      |  2 +-
 src/pages/home/archive/HomeNew.tsx       |  2 +-
 src/pages/home/archive/HomeProductsA.tsx |  6 +++---
 src/pages/home/archive/HomeStack.tsx     |  2 +-
 src/pages/home/archive/HomeStat.tsx      |  2 +-
 src/pages/home/archive/HomeTabs.tsx      |  6 +++---
 src/pages/home/archive/HomeUniverse.tsx  |  2 +-
 src/pages/home/archive/HomeWhy.tsx       |  2 +-
 src/pages/network/SecondaryFeatures.tsx  |  2 +-
 src/pages/storage/StorageHero.tsx        |  6 +++---
 30 files changed, 83 insertions(+), 83 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 8beea7a..1656af3 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -46,7 +46,7 @@ export function Footer() {
             </div>
           </div>
         </div>
-        <div className="flex flex-col items-center border-t border-gray-200 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
+        <div className="flex flex-col items-center border-t border-gray-100 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
           <p className="mt-6 text-sm text-gray-500 md:mt-0">
             &copy; Copyright{' '}
             <a href="https://www.threefold.io" target="_blank" rel="noopener noreferrer" className="hover:text-cyan-500 transition-colors">
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 0c862fd..3492a4b 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -30,7 +30,7 @@ export function Header() {
 
   return (
     <header className="bg-white">
-      <nav className="border-b border-gray-200">
+      <nav className="border-b border-gray-100">
         <Container className="flex bg-transparent justify-between py-4">
           <div className="relative z-10 flex items-center gap-16">
             <Link to="/" aria-label="Home">
diff --git a/src/pages/agents/AgentComponents.tsx b/src/pages/agents/AgentComponents.tsx
index c8a9591..0e43793 100644
--- a/src/pages/agents/AgentComponents.tsx
+++ b/src/pages/agents/AgentComponents.tsx
@@ -49,7 +49,7 @@ export function AgentComponents() {
         <div className="mx-auto mt-16 max-w-6xl overflow-x-auto">
           <table className="w-full table-auto border-collapse text-left text-sm text-gray-700">
             <thead>
-              <tr className="bg-cyan-50 border-b border-gray-200">
+              <tr className="bg-cyan-50 border-b border-gray-100">
                 <th className="py-3 px-4 font-semibold text-gray-900">Component</th>
                 <th className="py-3 px-4 font-semibold text-gray-900">Purpose</th>
                 <th className="py-3 px-4 font-semibold text-gray-900">Backed By</th>
diff --git a/src/pages/agents/AgentHeroAlt.tsx b/src/pages/agents/AgentHeroAlt.tsx
index fcb25d7..cde60ee 100644
--- a/src/pages/agents/AgentHeroAlt.tsx
+++ b/src/pages/agents/AgentHeroAlt.tsx
@@ -8,7 +8,7 @@ export function AgentHeroAlt() {
     <div className="">
       {/* Boxed container */}
       <div
-        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-200 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
+        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
         style={{ backgroundImage: "url('/images/agents.webp')", backgroundSize: "contain" }}
       >
         {/* Inner padding */}
@@ -36,8 +36,8 @@ export function AgentHeroAlt() {
         </div>
       </div>
       {/* ✅ Bottom horizontal line with spacing */}
-      <div className="w-full border-b  border-gray-200" />
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="w-full border-b  border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </div>
   )
 }
diff --git a/src/pages/cloud/CloudBluePrint.tsx b/src/pages/cloud/CloudBluePrint.tsx
index a1317a3..bf37a82 100644
--- a/src/pages/cloud/CloudBluePrint.tsx
+++ b/src/pages/cloud/CloudBluePrint.tsx
@@ -17,7 +17,7 @@ export function CloudBluePrint() {
     <section className="w-full max-w-8xl mx-auto bg-transparent">
 
       {/* ✅ Boxed container */}
-      <div className="max-w-7xl bg-white mx-auto pb-12 border border-t-0 border-b-0 border-gray-200">
+      <div className="max-w-7xl bg-white mx-auto pb-12 border border-t-0 border-b-0 border-gray-100">
         <Container>
           <div className="mx-auto max-w-4xl sm:text-center">
             <Eyebrow className="text-cyan-500">Featured Blueprint</Eyebrow>
@@ -54,8 +54,8 @@ export function CloudBluePrint() {
       </div>
 
       {/* ✅ Bottom line + bottom spacer */}
-      <div className="w-full border-b border-gray-200" />
-      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200 bg-transparent" />
+      <div className="w-full border-b border-gray-100" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100 bg-transparent" />
     </section>
   );
 }
diff --git a/src/pages/cloud/CloudFeaturesLight.tsx b/src/pages/cloud/CloudFeaturesLight.tsx
index abcd2ed..573d1e0 100644
--- a/src/pages/cloud/CloudFeaturesLight.tsx
+++ b/src/pages/cloud/CloudFeaturesLight.tsx
@@ -243,11 +243,11 @@ export function CloudFeaturesLight() {
   return (
     <div className="">
        {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
-      <div className="w-full border-t border-l border-r border-gray-200" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border-t border-l border-r border-gray-100" />
 
       {/* ✅ Boxed container (border-x only) */}
-      <div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-200 bg-white">
+      <div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white">
         <section className="px-6 py-16 lg:py-16">
           <Container>
             <div className="max-w-4xl mx-auto items-center text-center">
@@ -274,10 +274,10 @@ export function CloudFeaturesLight() {
       </div>
 
       {/* ✅ Bottom horizontal line */}
-      <div className="w-full border-b border-gray-200" />
+      <div className="w-full border-b border-gray-100" />
 
       {/* ✅ Bottom spacer matching hero */}
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </div>
   )
 }
diff --git a/src/pages/cloud/CloudHeroNew.tsx b/src/pages/cloud/CloudHeroNew.tsx
index 7508620..9170bbb 100644
--- a/src/pages/cloud/CloudHeroNew.tsx
+++ b/src/pages/cloud/CloudHeroNew.tsx
@@ -6,7 +6,7 @@ export function CloudHeroNew({ onGetStartedClick = () => {} }: { onGetStartedCli
     <div className="">
       {/* Boxed container */}
       <div
-        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-200 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
+        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
         style={{ backgroundImage: "url('/images/cloudhero4.webp')", backgroundSize: "contain" }}
       >
         {/* Inner padding */}
@@ -44,8 +44,8 @@ export function CloudHeroNew({ onGetStartedClick = () => {} }: { onGetStartedCli
         
       </div>
       {/* ✅ Bottom horizontal line with spacing */}
-      <div className="w-full border-b  border-gray-200" />
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="w-full border-b  border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </div>
   )
 }
diff --git a/src/pages/cloud/CloudUseCases.tsx b/src/pages/cloud/CloudUseCases.tsx
index a9ad629..537979e 100644
--- a/src/pages/cloud/CloudUseCases.tsx
+++ b/src/pages/cloud/CloudUseCases.tsx
@@ -41,11 +41,11 @@ export function CloudUseCases() {
     <section className="w-full max-w-8xl mx-auto bg-transparent">
 
       {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
-      <div className="w-full border-t border-l border-r border-gray-200" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border-t border-l border-r border-gray-100" />
 
       {/* ✅ Inner boxed container */}
-      <div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-200">
+      <div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-100">
         <Container>
           <div className="mx-auto max-w-4xl sm:text-center">
             <Eyebrow className="text-cyan-500">USE CASES</Eyebrow>
@@ -70,7 +70,7 @@ export function CloudUseCases() {
             {useCases.map((useCase) => (
               <li
                 key={useCase.title}
-                className="rounded-md border border-gray-200 bg-white p-6 transition-all duration-300
+                className="rounded-md border border-gray-100 bg-white p-6 transition-all duration-300
                            hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 flex flex-col"
               >
                 <div className="flex items-center justify-between">
@@ -104,8 +104,8 @@ export function CloudUseCases() {
       </div>
 
       {/* ✅ Bottom horizontal line + spacing */}
-      <div className="w-full border-b border-gray-200" />
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="w-full border-b border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </section>
   )
 }
diff --git a/src/pages/compute/ComputeDesign.tsx b/src/pages/compute/ComputeDesign.tsx
index f2bc740..a664e25 100644
--- a/src/pages/compute/ComputeDesign.tsx
+++ b/src/pages/compute/ComputeDesign.tsx
@@ -31,14 +31,14 @@ export function ComputeDesign() {
     <div className="">
 
       {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
-      <div className="w-full border-t border-l border-r border-gray-200" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border-t border-l border-r border-gray-100" />
 
        {/* ✅ Top horizontal line with spacing */}
-      <div className="mx-auto max-w-7xl border-gray-200">
+      <div className="mx-auto max-w-7xl border-gray-100">
           <dl className="grid grid-cols-1 gap-4 lg:gap-14  overflow-hidden  text-center  lg:grid-cols-3">
             {stats.map((stat) => (
-              <div key={stat.id} className="flex flex-col items-center bg-gray-400/5 py-8 px-12 border border-gray-200 lg:border-t-0 lg:border-b-0">
+              <div key={stat.id} className="flex flex-col items-center bg-gray-400/5 py-8 px-12 border border-gray-100 lg:border-t-0 lg:border-b-0">
                 <stat.icon className="h-8 w-8 fill-cyan-500 mb-4" aria-hidden="true" />
                 <CT className="">{stat.value}</CT>
                 <CP className="mt-1">{stat.name}</CP>
@@ -47,8 +47,8 @@ export function ComputeDesign() {
           </dl>
       </div>
       {/* ✅ Bottom horizontal line + spacing */}
-      <div className="w-full border-b border-gray-200" />
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="w-full border-b border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </div>
   )
 }
diff --git a/src/pages/compute/ComputeFeatures.tsx b/src/pages/compute/ComputeFeatures.tsx
index 1cdbd3c..c4718d5 100644
--- a/src/pages/compute/ComputeFeatures.tsx
+++ b/src/pages/compute/ComputeFeatures.tsx
@@ -12,10 +12,10 @@ export function ComputeFeatures() {
     <section className="w-full max-w-8xl mx-auto bg-transparent">
 
       {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
-      <div className="w-full border-t border-l border-r border-gray-200" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border-t border-l border-r border-gray-100" />
       
-      <div className="mx-auto max-w-7xl px-6 bg-white lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20  py-12 border border-t-0 border-b-0 border-gray-200">
+      <div className="mx-auto max-w-7xl px-6 bg-white lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20  py-12 border border-t-0 border-b-0 border-gray-100">
 
         {/* ✅ LEFT SIDE — Title + Intro */}
         <div className="max-w-xl">
@@ -94,8 +94,8 @@ export function ComputeFeatures() {
         </div>
       </div>
        {/* ✅ Bottom horizontal line with spacing */}
-      <div className="w-full border-b  border-gray-200" />
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="w-full border-b  border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </section>
   )
 }
diff --git a/src/pages/compute/ComputeHero.tsx b/src/pages/compute/ComputeHero.tsx
index 8b71451..217fc38 100644
--- a/src/pages/compute/ComputeHero.tsx
+++ b/src/pages/compute/ComputeHero.tsx
@@ -6,7 +6,7 @@ export function ComputeHero({ onGetStartedClick = () => {} }: { onGetStartedClic
     <div className="">
       {/* Boxed container */}
       <div
-        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-200 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
+        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
         style={{ backgroundImage: "url('/images/computehero.webp')", backgroundSize: "contain" }}
       >
         {/* Inner padding */}
@@ -44,8 +44,8 @@ export function ComputeHero({ onGetStartedClick = () => {} }: { onGetStartedClic
         
       </div>
       {/* ✅ Bottom horizontal line with spacing */}
-      <div className="w-full border-b  border-gray-200" />
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="w-full border-b  border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </div>
   )
 }
diff --git a/src/pages/compute/ComputeOverview.tsx b/src/pages/compute/ComputeOverview.tsx
index 73eb48a..551956f 100644
--- a/src/pages/compute/ComputeOverview.tsx
+++ b/src/pages/compute/ComputeOverview.tsx
@@ -20,8 +20,8 @@ export function ComputeOverview() {
     <section className="w-full max-w-8xl mx-auto bg-transparent">
 
       {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
-      <div className="w-full border-t border-l border-r border-gray-200" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border-t border-l border-r border-gray-100" />
       
       {/* ✅ subtle light-mode background accents */}
       <div className="pointer-events-none absolute inset-0">
@@ -36,7 +36,7 @@ export function ComputeOverview() {
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(0,0,0,0.03),_transparent_55%)]" />
       </div>
 
-      <Container className="relative py-12 bg-white mx-auto s border border-t-0 border-b-0 border-gray-200">
+      <Container className="relative py-12 bg-white mx-auto s border border-t-0 border-b-0 border-gray-100">
         <div className="mx-auto max-w-3xl text-center">
           <Eyebrow color="accent" className="tracking-[0.35em] uppercase">
             Mycelium Compute
@@ -67,7 +67,7 @@ export function ComputeOverview() {
           {overviewCards.map((card) => (
             <div
               key={card.title}
-              className="group relative overflow-hidden rounded-3xl border border-gray-200 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+              className="group relative overflow-hidden rounded-3xl border border-gray-100 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
             >
               <div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-cyan-100 opacity-0 transition group-hover:opacity-70" />
 
@@ -87,8 +87,8 @@ export function ComputeOverview() {
         </div>
       </Container>
        {/* ✅ Bottom horizontal line with spacing */}
-      <div className="w-full border-b  border-gray-200" />
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="w-full border-b  border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </section>
   )
 }
diff --git a/src/pages/download/DownloadHero.tsx b/src/pages/download/DownloadHero.tsx
index e9318e0..e4c8e35 100644
--- a/src/pages/download/DownloadHero.tsx
+++ b/src/pages/download/DownloadHero.tsx
@@ -73,7 +73,7 @@ export function DownloadHero() {
             {features.map((feature) => (
               <div
                 key={feature.name}
-                className="flex flex-col rounded-lg border border-gray-200 p-8 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
+                className="flex flex-col rounded-lg border border-gray-100 p-8 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
               >
                 <dt className="text-base font-semibold leading-7 text-gray-900">
                   <div className="mb-6 flex h-10 w-10 items-center justify-center">
diff --git a/src/pages/gpu/GpuHero.tsx b/src/pages/gpu/GpuHero.tsx
index c134c3f..9f7dda7 100644
--- a/src/pages/gpu/GpuHero.tsx
+++ b/src/pages/gpu/GpuHero.tsx
@@ -8,7 +8,7 @@ export function GpuHero() {
     <div className="">
       {/* Boxed container */}
       <div
-        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-200 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
+        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
         style={{ backgroundImage: "url('/images/gpuhero2.png')", backgroundSize: "contain" }}
       >
         {/* Inner padding */}
@@ -33,8 +33,8 @@ export function GpuHero() {
         </div>
       </div>
       {/* ✅ Bottom horizontal line with spacing */}
-      <div className="w-full border-b  border-gray-200" />
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="w-full border-b  border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </div>
   )
 }
diff --git a/src/pages/home/HomeAurora.tsx b/src/pages/home/HomeAurora.tsx
index 01952ff..9615acf 100644
--- a/src/pages/home/HomeAurora.tsx
+++ b/src/pages/home/HomeAurora.tsx
@@ -6,7 +6,7 @@ export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => voi
     <div className="px-4">
       {/* Boxed container */}
       <div
-        className="relative mx-auto max-w-7xl border border-t-0 border-gray-200 bg-white  overflow-hidden bg-contain bg-right bg-no-repeat"
+        className="relative mx-auto max-w-7xl border border-t-0 border-gray-100 bg-white  overflow-hidden bg-contain bg-right bg-no-repeat"
         style={{ backgroundImage: "url('/images/hero11.webp')" }}
       >
         {/* Inner padding */}
diff --git a/src/pages/home/HomeBenefits.tsx b/src/pages/home/HomeBenefits.tsx
index a45661b..fc65d60 100644
--- a/src/pages/home/HomeBenefits.tsx
+++ b/src/pages/home/HomeBenefits.tsx
@@ -38,16 +38,16 @@ export function HomeBenefits() {
     <div className="">
 
       {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl bg-transparent mx-auto  border border-t-0 border-b-0 border-gray-200" />
-      <div className="w-full border-t border-l border-r border-gray-200" />
+      <div className="max-w-7xl bg-transparent mx-auto  border border-t-0 border-b-0 border-gray-100" />
+      <div className="w-full border-t border-l border-r border-gray-100" />
 
       {/* ✅ Main content */}
-      <div className="mx-auto max-w-7xl border-gray-200">
+      <div className="mx-auto max-w-7xl border-gray-100">
         <dl className="grid grid-cols-1 gap-4 lg:gap-6 lg:grid-cols-4 text-center">
           {benefits.map((item) => (
             <div
               key={item.id}
-              className="flex flex-col items-center bg-white/40 dark:bg-black/40 py-10 px-4 border border-gray-200 lg:border-t-0 lg:border-b-0"
+              className="flex flex-col items-center bg-white/40 dark:bg-black/40 py-10 px-4 border border-gray-100 lg:border-t-0 lg:border-b-0"
             >
               <item.icon className="h-10 w-10 text-cyan-500 mb-4" />
               <h3 className="text-lg font-semibold text-black dark:text-white">
@@ -62,8 +62,8 @@ export function HomeBenefits() {
       </div>
 
       {/* ✅ Bottom line + spacing */}
-      <div className="w-full border-b border-gray-200" />
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
+      <div className="w-full border-b border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
     </div>
   );
 }
diff --git a/src/pages/home/HomeHosting.tsx b/src/pages/home/HomeHosting.tsx
index d97558a..17d206c 100644
--- a/src/pages/home/HomeHosting.tsx
+++ b/src/pages/home/HomeHosting.tsx
@@ -111,12 +111,12 @@ export function HomeHosting() {
     <section className="w-full max-w-8xl mx-auto bg-transparent">
 
       {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
-      <div className="w-full border-t border-l border-r border-gray-200" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border-t border-l border-r border-gray-100" />
       
 
       {/* ✅ Inner content container */}
-        <div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-200">
+        <div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-100">
           <Container>
             <div className="mx-auto max-w-4xl sm:text-center">
               <Eyebrow className="text-cyan-500">IN ACTIVE EVOLUTION</Eyebrow>
@@ -138,7 +138,7 @@ export function HomeHosting() {
               {features.map((feature) => (
                 <li
                   key={feature.name}
-                  className="rounded-md border border-gray-200 p-6 transition-all duration-300 ease-in-out
+                  className="rounded-md border border-gray-100 p-6 transition-all duration-300 ease-in-out
                     hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
                 >
                   <feature.icon className="h-14 w-14" />
@@ -151,8 +151,8 @@ export function HomeHosting() {
 
         </div>
       {/* ✅ Bottom horizontal line with spacing */}
-      <div className="w-full border-b  border-gray-200" />
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="w-full border-b  border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </section>
   )
 }
diff --git a/src/pages/home/HomeTab.tsx b/src/pages/home/HomeTab.tsx
index 298cf92..4416b30 100644
--- a/src/pages/home/HomeTab.tsx
+++ b/src/pages/home/HomeTab.tsx
@@ -83,12 +83,12 @@ export function HomeTab() {
     <section className="w-full max-w-8xl mx-auto bg-transparent">
 
       {/* ✅ Top spacer + full-width line */}
-      <div className="max-w-7xl mx-auto py-6 border-x border-gray-200 bg-white border-t-0 border-b-0" />
-      <div className="w-full border-t border-l border-r border-gray-200" />
+      <div className="max-w-7xl mx-auto py-6 border-x border-gray-100 bg-white border-t-0 border-b-0" />
+      <div className="w-full border-t border-l border-r border-gray-100" />
 
       
       {/* ✅ Section with vertical borders */}
-      <div className="mx-auto bg-white  max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-200">
+      <div className="mx-auto bg-white  max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-100">
         <Eyebrow className="pt-12 ">Deploy faster</Eyebrow>
         <H3 className="mt-2">Mycelium Components</H3>
         <P className="mt-6 max-w-lg">
@@ -120,8 +120,8 @@ export function HomeTab() {
       </div>
 
       {/* ✅ Bottom full-width line + spacer */}
-      <div className="w-full border-b border-gray-200" />
-      <div className="max-w-7xl mx-auto py-6 border-x border-gray-200 border-t-0 border-b-0" />
+      <div className="w-full border-b border-gray-100" />
+      <div className="max-w-7xl mx-auto py-6 border-x border-gray-100 border-t-0 border-b-0" />
     </section>
   );
 }
diff --git a/src/pages/home/archive/HomeCTA.tsx b/src/pages/home/archive/HomeCTA.tsx
index 5e41576..1323db1 100644
--- a/src/pages/home/archive/HomeCTA.tsx
+++ b/src/pages/home/archive/HomeCTA.tsx
@@ -4,7 +4,7 @@ import { ArrowRightIcon } from "@heroicons/react/24/solid";
 
 export function HomeCTA() {
   return (
-    <section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-16">
+    <section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-100 py-16">
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center px-6">
 
         {/* LEFT: Big CTA Button */}
diff --git a/src/pages/home/archive/HomeGlobeNew.tsx b/src/pages/home/archive/HomeGlobeNew.tsx
index a4f6190..3dbddfb 100644
--- a/src/pages/home/archive/HomeGlobeNew.tsx
+++ b/src/pages/home/archive/HomeGlobeNew.tsx
@@ -4,7 +4,7 @@ import { Globe } from "@/components/ui/Globe";
 
 export function HomeGlobeNew() {
   return (
-    <section className="mx-4 pt-12 border-t lg:mx-auto max-w-5xl border border-gray-200">
+    <section className="mx-4 pt-12 border-t lg:mx-auto max-w-5xl border border-gray-100">
       <div className="lg:-mt-12 grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
         
         {/* Column 1 */}
diff --git a/src/pages/home/archive/HomeHero.tsx b/src/pages/home/archive/HomeHero.tsx
index 16b6539..af44ea3 100644
--- a/src/pages/home/archive/HomeHero.tsx
+++ b/src/pages/home/archive/HomeHero.tsx
@@ -2,7 +2,7 @@ import { Button } from '@/components/Button'
 
 export function HomeHero() {
   return (
-    <section className="mt-12 bg-transparent border border-gray-200 border-b-0 mx-4 lg:mx-auto max-w-5xl shadow-[0_0_40px_-20px_rgba(0,0,0,0.06)]">
+    <section className="mt-12 bg-transparent border border-gray-100 border-b-0 mx-4 lg:mx-auto max-w-5xl shadow-[0_0_40px_-20px_rgba(0,0,0,0.06)]">
       <div className="px-6 py-12 lg:px-8 lg:py-24">
         <div className="max-w-2xl mx-auto text-center">
           <h1 className="text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
diff --git a/src/pages/home/archive/HomeNew.tsx b/src/pages/home/archive/HomeNew.tsx
index 1d2750d..fce5a9f 100644
--- a/src/pages/home/archive/HomeNew.tsx
+++ b/src/pages/home/archive/HomeNew.tsx
@@ -6,7 +6,7 @@ export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => voi
     <div className="px-4">
       {/* Boxed container */}
       <div
-        className="relative mx-auto max-w-7xl border border-t-0 border-gray-200  overflow-hidden bg-cover bg-right bg-no-repeat"
+        className="relative mx-auto max-w-7xl border border-t-0 border-gray-100  overflow-hidden bg-cover bg-right bg-no-repeat"
         style={{ backgroundImage: "url('/images/hero11.webp')" }}
       >
         {/* Inner padding */}
diff --git a/src/pages/home/archive/HomeProductsA.tsx b/src/pages/home/archive/HomeProductsA.tsx
index 5b125d6..06c18a8 100644
--- a/src/pages/home/archive/HomeProductsA.tsx
+++ b/src/pages/home/archive/HomeProductsA.tsx
@@ -2,7 +2,7 @@
 
 export function HomeProductsA() {
   return (
-    <section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
+    <section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-100">
       <div className="lg:-mt-12 grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
 
         {/* Product 1 */}
@@ -32,7 +32,7 @@ export function HomeProductsA() {
         </div>
 
         {/* Product 3 */}
-        <div className="px-6 lg:px-24 py-16 flex border-t border-gray-200 flex-col items-center text-center">
+        <div className="px-6 lg:px-24 py-16 flex border-t border-gray-100 flex-col items-center text-center">
           <h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
             Mycelium Agents
           </h2>
@@ -45,7 +45,7 @@ export function HomeProductsA() {
         </div>
 
         {/* Product 4 */}
-        <div className="px-6 lg:px-24 py-16 flex border-t border-gray-200 flex-col items-center text-center">
+        <div className="px-6 lg:px-24 py-16 flex border-t border-gray-100 flex-col items-center text-center">
           <h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
             Compute / Storage / GPU
           </h2>
diff --git a/src/pages/home/archive/HomeStack.tsx b/src/pages/home/archive/HomeStack.tsx
index e516bfb..c3a241a 100644
--- a/src/pages/home/archive/HomeStack.tsx
+++ b/src/pages/home/archive/HomeStack.tsx
@@ -31,7 +31,7 @@ export function HomeStack() {
   const current = layers.find((l) => l.id === active)!;
 
   return (
-    <section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
+    <section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-100">
       <div className="lg:-mt-12 grid grid-cols-1 lg:grid-cols-5 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
 
         {/* LEFT COLUMN (2 COLS) */}
diff --git a/src/pages/home/archive/HomeStat.tsx b/src/pages/home/archive/HomeStat.tsx
index e872b09..6658319 100644
--- a/src/pages/home/archive/HomeStat.tsx
+++ b/src/pages/home/archive/HomeStat.tsx
@@ -1,6 +1,6 @@
 export function HomeStat() {
     return (
-        <section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
+        <section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-100">
         <div className="lg:-mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 divide-y sm:divide-y-0 lg:divide-y-0 lg:divide-x divide-gray-200">
             
             {/* CORES */}
diff --git a/src/pages/home/archive/HomeTabs.tsx b/src/pages/home/archive/HomeTabs.tsx
index 896dda0..c9d8966 100644
--- a/src/pages/home/archive/HomeTabs.tsx
+++ b/src/pages/home/archive/HomeTabs.tsx
@@ -54,11 +54,11 @@ export function HomeApplication() {
   const Icon = current.icon; // ✅ dynamic icon
 
   return (
-    <section className="mx-4  border-t-0  lg:mx-auto max-w-5xl border border-gray-200">
+    <section className="mx-4  border-t-0  lg:mx-auto max-w-5xl border border-gray-100">
       <div className="grid grid-cols-1 lg:grid-cols-4 gap-12 relative">
 
         {/* ✅ VERTICAL DIVIDER ON DESKTOP */}
-        <div className="hidden lg:block absolute left-3/4 top-0 bottom-0 border-l border-gray-200 pointer-events-none"></div>
+        <div className="hidden lg:block absolute left-3/4 top-0 bottom-0 border-l border-gray-100 pointer-events-none"></div>
 
         {/* LEFT COLUMN */}
         <div className="lg:col-span-3 space-y-6 lg:pl-6 py-12">
@@ -71,7 +71,7 @@ export function HomeApplication() {
           </p>
 
           {/* TABS */}
-          <div className="inline-flex flex-wrap gap-2 bg-gray-50 rounded-full p-1 border border-gray-200 w-auto">
+          <div className="inline-flex flex-wrap gap-2 bg-gray-50 rounded-full p-1 border border-gray-100 w-auto">
             {tabs.map((tab) => (
               <button
                 key={tab.id}
diff --git a/src/pages/home/archive/HomeUniverse.tsx b/src/pages/home/archive/HomeUniverse.tsx
index 8ddd58a..092a7bb 100644
--- a/src/pages/home/archive/HomeUniverse.tsx
+++ b/src/pages/home/archive/HomeUniverse.tsx
@@ -4,7 +4,7 @@ import { GlobeAltIcon } from "@heroicons/react/24/outline";
 
 export function HomeUniverse() {
   return (
-    <section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-4 text-center">
+    <section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-100 py-4 text-center">
       <h2 className="text-2xl sm:text-3xl font-semibold text-gray-900 flex flex-wrap items-center justify-center gap-3">
 
         {/* left text */}
diff --git a/src/pages/home/archive/HomeWhy.tsx b/src/pages/home/archive/HomeWhy.tsx
index d39d299..abb8000 100644
--- a/src/pages/home/archive/HomeWhy.tsx
+++ b/src/pages/home/archive/HomeWhy.tsx
@@ -16,7 +16,7 @@ export function HomeWhy() {
   ];
 
   return (
-    <section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-12 px-6 text-center">
+    <section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-100 py-12 px-6 text-center">
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 place-items-center">
         {items.map(({ label, icon: Icon }) => (
           <span
diff --git a/src/pages/network/SecondaryFeatures.tsx b/src/pages/network/SecondaryFeatures.tsx
index 9c34bb5..4ea73f6 100644
--- a/src/pages/network/SecondaryFeatures.tsx
+++ b/src/pages/network/SecondaryFeatures.tsx
@@ -209,7 +209,7 @@ export function SecondaryFeatures() {
           {features.map((feature) => (
             <li
               key={feature.name}
-              className="rounded-2xl border border-gray-200 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
+              className="rounded-2xl border border-gray-100 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
             >
               <feature.icon className="h-8 w-8" />
               <h3 className="mt-6 font-semibold text-gray-900">
diff --git a/src/pages/storage/StorageHero.tsx b/src/pages/storage/StorageHero.tsx
index 2e46d38..8724633 100644
--- a/src/pages/storage/StorageHero.tsx
+++ b/src/pages/storage/StorageHero.tsx
@@ -8,7 +8,7 @@ export function StorageHero() {
     <div className="">
       {/* Boxed container */}
       <div
-        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-200 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
+        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
         style={{ backgroundImage: "url('/images/computehero11.webp')", backgroundSize: "contain" }}
       >
         {/* Inner padding */}
@@ -37,8 +37,8 @@ export function StorageHero() {
         </div>
       </div>
       {/* ✅ Bottom horizontal line with spacing */}
-      <div className="w-full border-b  border-gray-200" />
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="w-full border-b  border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </div>
   )
 }