refactor: adjust text colors, animation positioning, and hover effects across multiple components

- Changed AgentHeroAlt and Homepod description text from text-gray-800 to text-gray-600 for softer contrast
- Added vertical translation to animation SVGs: NoCentral (-translate-y-10), DataControl (-translate-y-12), Security (translate-y-6), Resilience (translate-y-5)
- Updated Resilience and Security danger color from red (#ff4d4d) to gray (#9ca3af)
- Changed NodeBenefits card border from border-gray-300

src/pages/agents/AgentHeroAlt.tsx

@@ -23,7 +23,7 @@ export function AgentHeroAlt() {
             <H3 as="h1" className="mt-4">
               Private, Sovereign and Distributed AI You Control
             </H3>
-            <P className="mt-6 text-gray-800">
+            <P className="mt-6 text-gray-600">
               Mycelium Agents let you deploy and run intelligent systems on your own infrastructure.
 Private, local, and autonomous by design, they give you everything you need to build, host, and connect AI agents without relying on centralized clouds.
             </P>

src/pages/home/animations/NoCentral.tsx

@@ -131,7 +131,7 @@ export default function NoCentral({
       aria-label="Distributed network illustration"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full -translate-y-10">
         {/* Background grid */}
         <defs>
           <pattern id="grid-dark" width="28" height="28" patternUnits="userSpaceOnUse">

src/pages/nodes/NodeBenefits.tsx

@@ -94,7 +94,7 @@ export function NodeBenefits() {
                 delay: 0.3 + index * 0.15,
                 ease: "easeOut",
               }}
-              className="rounded-md border border-gray-300 bg-white/5 lg:p-8 p-6 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 backdrop-blur-md"
+              className="rounded-md border border-gray-100 bg-white/5 lg:p-8 p-6 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 backdrop-blur-md"
             >
               <feature.icon className="mb-4 h-8 w-8 text-white" />
               <CT as="span" className="text-left font-semibold" color="light">

src/pages/nodes/NodeSpecs.tsx

@@ -71,7 +71,7 @@ export function NodeSpecs() {
         {/* BENTO GRID */}
         <div className="mt-8 grid grid-cols-1 gap-4  lg:grid-cols-3 lg:grid-rows-2">
           {cards.map((item, index) => (
-            <div key={index} className="relative">
+            <div key={index} className="relative group">
 
               {/* OUTER BACKPLATE */}
               <div
@@ -82,7 +82,7 @@ export function NodeSpecs() {
 
               {/* INNER CARD */}
               <div
-                className={`relative flex h-full flex-row items-center gap-3 overflow-hidden rounded-[calc(var(--radius-lg)+1px)] px-8 py-6 transition-transform duration-300 hover:scale-102 hover:shadow-lg hover:shadow-cyan-500/20 ${
+                className={`relative flex h-full flex-row items-center gap-3 overflow-hidden rounded-[calc(var(--radius-lg)+1px)] px-8 py-6 transition-transform duration-300 group-hover:scale-102 group-hover:shadow-lg group-hover:shadow-cyan-500/20 ${
                   item.innerRounded || ""
                 }`}
               >
@@ -103,7 +103,7 @@ export function NodeSpecs() {
 
               {/* OUTLINE */}
               <div
-                className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${
+                className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 transition-transform duration-300 group-hover:scale-102 group-hover:shadow-lg group-hover:shadow-cyan-500/20 ${
                   item.rounded || ""
                 }`}
               />

src/pages/pods/Homepod.tsx

@@ -33,7 +33,7 @@ export default function Homepod() {
             <H3 className="mt-4">
               Your Private Space in the New Internet
             </H3>
-            <P className="mt-6 text-gray-800">
+            <P className="mt-6 text-gray-600">
               Pods are personal digital spaces on the Mycelium Network. They are private, persistent, and fully under your control. Run conversations, files, and tools directly on the network instead of through central servers
             </P>
             <div className="mt-8 flex items-center gap-x-6">

src/pages/pods/animations/DataControl.tsx

@@ -59,7 +59,7 @@ export default function DataControl({
 
   return (
     <div className={clsx("relative overflow-hidden", className)} aria-hidden="true" role="img" style={{ background: bg }}>
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full -translate-y-12">
         {/* GRID + GLOW */}
         <defs>
           <pattern id="dc-grid" width="28" height="28" patternUnits="userSpaceOnUse">

src/pages/pods/animations/Resilience.tsx

@@ -17,7 +17,7 @@ const H = 540;
 export default function Resilience({
   className,
   accent = "#00b8db",
-  danger = "#ff4d4d",
+  danger = "#9ca3af",
   bg = "#0b0b0b",
   gridStroke = "#2b2a2a",
 }: Props) {
@@ -55,7 +55,7 @@ export default function Resilience({
 
   return (
     <div className={clsx("relative overflow-hidden", className)}>
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full" style={{ background: bg }}>
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full translate-y-5" style={{ background: bg }}>
         {/* ===== GRID + FILTERS ===== */}
         <defs>
           <pattern id="res-grid" width="28" height="28" patternUnits="userSpaceOnUse">

src/pages/pods/animations/Security.tsx

@@ -17,7 +17,7 @@ const H = 540;
 export default function Security({
   className,
   accent = "#00b8db",
-  danger = "#ff4d4d",
+  danger = "#9ca3af",
   bg = "#0b0b0b",
   gridStroke = "#2b2a2a",
 }: Props) {
@@ -46,7 +46,7 @@ export default function Security({
       role="img"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full translate-y-6">
         {/* ====== GRID + FILTERS ====== */}
         <defs>
           <pattern id="sec-grid" width="28" height="28" patternUnits="userSpaceOnUse">