style: update border colors from gray-200 to gray-300 and standardize cyan color usage

src/components/Archives/Steps copy.tsx

@@ -57,7 +57,7 @@ export function Steps() {
               initial={{ opacity: 0, y: 20 }}
               animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
               transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
-              className="rounded-2xl border border-gray-200 p-8 dark:border-gray-700"
+              className="rounded-2xl border border-gray-300 p-8 dark:border-gray-700"
             >
               <feature.icon className="h-8 w-8 mb-4 text-[#2F3178]" />
               <CT as="span" className="font-semibold">{feature.name}</CT>

src/components/Button.tsx

@@ -10,7 +10,7 @@ const baseStyles = {
 
 const variantStyles = {
   solid: {
-    cyan: 'relative overflow-hidden bg-[#005eff] text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-[#005eff] active:text-white/80 before:transition-colors',
+    cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
     white:
       'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
     gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',

src/components/CallTo.tsx

@@ -5,7 +5,7 @@ import { SectionHeader, P } from '@/components/Texts'
 export function CallTo() {
   return (
     <div className="relative isolate overflow-hidden max-w-5xl mx-auto py-24">
-      <div className="relative isolate overflow-hidden bg-gray-50/10 px-6 py-24 text-center shadow-md shadow-gray-900/5 sm:rounded-3xl sm:px-16 border border-gray-200">
+      <div className="relative isolate overflow-hidden bg-gray-50/10 px-6 py-24 text-center shadow-md shadow-gray-900/5 sm:rounded-3xl sm:px-16 border border-gray-300">
         <div className="mx-auto max-w-4xl text-center">
           <SectionHeader color="primary">
           Are you Ready?

src/components/Faqs.tsx

@@ -62,7 +62,7 @@ export function Faqs() {
       id="faqs"
       ref={ref}
       aria-labelledby="faqs-title"
-      className="border-t border-gray-200 py-20 sm:py-32 relative overflow-hidden"
+      className="border-t border-gray-300 py-20 sm:py-32 relative overflow-hidden"
     >
       <motion.div
         initial={{ opacity: 0 }}

src/components/Fields.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx'
 
 const formClasses = {
   light:
-    'block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm',
+    'block w-full appearance-none rounded-lg border border-gray-300 bg-white py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm',
   dark:
     'block w-full appearance-none rounded-lg border border-gray-600 bg-transparent py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-white placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm',
 }

src/components/Header.tsx

@@ -72,7 +72,7 @@ export function Header() {
               {({ open }) => (
                 <>
                   <PopoverButton
-                    className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-white p-2 hover:bg-gray-200/50 hover:stroke-gray-400 focus:not-data-focus:outline-hidden active:stroke-white"
+                    className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-white p-2 hover:bg-gray-300/50 hover:stroke-gray-400 focus:not-data-focus:outline-hidden active:stroke-white"
                     aria-label="Toggle site navigation"
                   >
                     {({ open }) =>

src/components/Steps.tsx

@@ -58,7 +58,7 @@ export function Steps() {
               initial={{ opacity: 0, y: 20 }}
               animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
               transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
-              className="rounded-2xl border border-white/20 bg-black/30 lg:py-8 lg:px-8 py-6 px-6 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-white/40 hover:bg-black/40"
+              className="rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
             >
               <feature.icon className="h-8 w-8 mb-4 text-white" />
               <CT as="span" className="font-semibold" color="light">{feature.name}</CT>

src/components/WorldMap.tsx

@@ -59,7 +59,7 @@ export function WorldMap() {
               initial={{ opacity: 0, x: -20 }}
               animate={{ opacity: 1, x: 0 }}
               transition={{ duration: 0.5, delay: 0.4 }}
-              className="lg:absolute lg:top-12 lg:-left-12 w-80 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 bg-white/5 backdrop-blur-md"
+              className="lg:absolute lg:top-12 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
             >
               <CT color="light" className="uppercase tracking-wide">CORES</CT>
               <CountUpNumber end={54958} color="light" className="mt-2 text-3xl font-bold" />
@@ -72,7 +72,7 @@ export function WorldMap() {
               initial={{ opacity: 0, x: 20 }}
               animate={{ opacity: 1, x: 0 }}
               transition={{ duration: 0.5, delay: 0.5 }}
-              className="lg:absolute lg:-top-10 lg:right-0 w-80 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 bg-white/5 backdrop-blur-md"
+              className="lg:absolute lg:-top-10 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
             >
               <CT color="light" className="uppercase tracking-wide">NODES</CT>
               <CountUpNumber end={1493} color="light" className="mt-2 text-3xl font-bold" />
@@ -85,7 +85,7 @@ export function WorldMap() {
               initial={{ opacity: 0, x: -20 }}
               animate={{ opacity: 1, x: 0 }}
               transition={{ duration: 0.5, delay: 0.6 }}
-              className="lg:absolute lg:bottom-28 lg:-left-12 w-80 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 bg-white/5 backdrop-blur-md"
+              className="lg:absolute lg:bottom-28 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
             >
               <CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT>
               <CountUpNumber end={5388956} color="light" className="mt-2 text-3xl font-bold" />
@@ -98,7 +98,7 @@ export function WorldMap() {
               initial={{ opacity: 0, x: 20 }}
               animate={{ opacity: 1, x: 0 }}
               transition={{ duration: 0.5, delay: 0.7 }}
-              className="lg:absolute lg:top-47 lg:right-0 w-80 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 bg-white/5 backdrop-blur-md"
+              className="lg:absolute lg:top-47 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
             >
               <CT color="light" className="uppercase tracking-wide">COUNTRIES</CT>
               <CountUpNumber end={44} color="light" className="mt-2 text-3xl font-bold" />

src/components/ui/globe.tsx

@@ -20,8 +20,9 @@ const GLOBE_CONFIG: COBEOptions = {
   mapSamples: 16000,
   mapBrightness: 1.1,
   baseColor: [0.8, 0.8, 0.8], // sleek dark gray globe
-  markerColor: [0.3, 0.6, 1], // soft, elegant blue
-  glowColor: [0.8, 0.8, 0.85], // subtle glow
+  markerColor: [0.02, 0.71, 0.83], // cyan-500
+  glowColor: [0.8, 0.8, 0.85], // grey
+  
   markers: [
     // --- Core Global Markers ---
     { location: [14.5995, 120.9842], size: 0.03 }, // Manila