refactor: update cyan accent colors from cyan-500 to cyan-400 across Button, Text, and multiple page components for consistent branding

- Changed Button solid cyan variant hover from bg-cyan-600 to bg-cyan-400 and active from bg-cyan-600 to bg-cyan-500
- Changed Button outline variants hover/active states from cyan-500 to cyan-400 across cyan, gray, and white variants
- Changed Button link dark variant hover from text-cyan-500 to text-cyan-400
- Changed Text component accent and cyan color variants

src/components/Button.tsx

@@ -12,21 +12,21 @@ const baseStyles = {
 
 const variantStyles = {
   solid: {
-    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',
+    cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 hover:bg-cyan-400 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-500 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',
     green: 'bg-green-500 text-white hover:bg-green-600',
   },
   outline: {
-    cyan: 'border-cyan-500 text-cyan-500',
+    cyan: 'border-cyan-500 text-cyan-500 hover:border-cyan-400 hover:text-cyan-400 active:border-cyan-400',
-    gray: 'border-gray-200 text-gray-600 hover:text-cyan-500 hover:border-cyan-500 active:border-cyan-500',
+    gray: 'border-gray-200 text-gray-600 hover:text-cyan-400 hover:border-cyan-400 active:border-cyan-400',
-    white: 'border-gray-300 text-white hover:text-cyan-500 hover:border-cyan-500 active:border-cyan-500',
+    white: 'border-gray-300 text-white hover:text-cyan-400 hover:border-cyan-400 active:border-cyan-400',
   },
   link: {
     cyan: 'text-cyan-400 underline hover:text-cyan-300',
     white: 'text-white underline hover:text-cyan-300',
-    dark: 'text-gray-900 underline hover:text-cyan-500',
+    dark: 'text-gray-900 underline hover:text-cyan-400',
   },
 }
 

src/components/Texts.tsx

@@ -12,8 +12,8 @@ const colorVariants = {
   primary: 'text-gray-900',
   secondary: 'text-gray-600',
   light: 'text-gray-50',
-  accent: 'text-cyan-500',
+  accent: 'text-cyan-400',
-  cyan: 'text-cyan-50',
+  cyan: 'text-cyan-400',
   white: 'text-white',
   dark: 'text-gray-950',
   tertiary: 'text-gray-700',

src/pages/cloud/CloudBluePrint.tsx

@@ -20,7 +20,7 @@ export function CloudBluePrint() {
       <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">Featured Blueprint</Eyebrow>
+            <Eyebrow className="text-cyan-400">Featured Blueprint</Eyebrow>
 
             <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900 mt-2">
               Your Personal Sovereign Cloud Workspace

src/pages/cloud/CloudFeatures.tsx

@@ -254,8 +254,8 @@ function CloudFeaturesDesktop() {
             className={clsx(
               'relative rounded-2xl outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30 ml-16',
               selectedIndex === featureIndex
-                ? 'outline-cyan-500'
+                ? 'outline-cyan-400'
-                : 'outline-transparent hover:outline-cyan-500',
+                : 'outline-transparent hover:outline-cyan-400',
             )}
           >
             {featureIndex === selectedIndex && (

src/pages/cloud/CloudFeaturesLight.tsx

@@ -153,8 +153,8 @@ function CloudFeaturesDesktop() {
             className={clsx(
               'relative rounded-2xl outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-100',
               selectedIndex === featureIndex
-                ? 'outline-cyan-500'
+                ? 'outline-cyan-400'
-                : 'outline-transparent hover:outline-cyan-500',
+                : 'outline-transparent hover:outline-cyan-400',
             )}
           >
             {featureIndex === selectedIndex && (

src/pages/cloud/CloudPros.tsx

@@ -37,7 +37,7 @@ export function CloudPros() {
       {/* Intro Block */}
       <div className="bg-white w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-100">
         <div className="px-8 py-12 max-w-4xl">
-          <Eyebrow className="uppercase tracking-[0.16em] text-cyan-500">
+          <Eyebrow className="uppercase tracking-[0.16em] text-cyan-400">
             Cloud Advantages
           </Eyebrow>
 

src/pages/cloud/CloudUseCases.tsx

@@ -48,7 +48,7 @@ export function CloudUseCases() {
       <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>
+            <Eyebrow className="text-cyan-400">USE CASES</Eyebrow>
 
             <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
               Built for intelligent workloads across every edge.

src/pages/compute/ComputeCapabilities.tsx

@@ -47,7 +47,7 @@ export function ComputeCapabilities() {
       <div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-800 bg-[#111111] py-12">
         <Container>
           <div className="mx-auto max-w-4xl sm:text-center">
-            <Eyebrow className="text-cyan-500">CAPABILITIES</Eyebrow>
+            <Eyebrow className="text-cyan-400">CAPABILITIES</Eyebrow>
             <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
               What You Can Run
             </H3>

src/pages/pods/PodsPro.tsx

@@ -57,7 +57,7 @@ export function PodsPro() {
       <div className="bg-white w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-100">
         <div className="px-8 py-12 max-w-4xl mx-auto flex flex-col items-center justify-center min-h-[220px] text-center">
           
-          <Eyebrow className="text-cyan-500">
+          <Eyebrow className="text-cyan-400">
             {product.subtitle}
           </Eyebrow>