diff --git a/src/pages/agents/animations/AgentCoordination.tsx b/src/pages/agents/animations/AgentCoordination.tsx
index 8a9a112..b7306b9 100644
--- a/src/pages/agents/animations/AgentCoordination.tsx
+++ b/src/pages/agents/animations/AgentCoordination.tsx
@@ -132,7 +132,7 @@ export default function AgentCoordination({
       aria-label="Agent coordination and sovereign workflow management"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full -translate-y-6" preserveAspectRatio="xMidYMid slice">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-6" preserveAspectRatio="xMidYMid slice">
 
         {/* background */}
         <defs>
diff --git a/src/pages/agents/animations/DeterministicExecution.tsx b/src/pages/agents/animations/DeterministicExecution.tsx
index 8c0bd5b..cef32e5 100644
--- a/src/pages/agents/animations/DeterministicExecution.tsx
+++ b/src/pages/agents/animations/DeterministicExecution.tsx
@@ -103,7 +103,7 @@ export default function DeterministicExecution({
       aria-label="Deterministic deployment and verifiable code execution"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full -translate-y-6" preserveAspectRatio="xMidYMid slice">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-6" preserveAspectRatio="xMidYMid slice">
 
         {/* background grid */}
         <defs>
diff --git a/src/pages/agents/animations/Fungistor.tsx b/src/pages/agents/animations/Fungistor.tsx
index ced9e75..df53338 100644
--- a/src/pages/agents/animations/Fungistor.tsx
+++ b/src/pages/agents/animations/Fungistor.tsx
@@ -126,7 +126,7 @@ export default function FungiStor({
       aria-label="FungiStor, a distributed long-term AI memory"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full -translate-y-16" preserveAspectRatio="xMidYMid slice">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-16" preserveAspectRatio="xMidYMid slice">
         {/* Background grid */}
         <defs>
           <pattern id="grid-dark" width="28" height="28" patternUnits="userSpaceOnUse">
diff --git a/src/pages/agents/animations/Herodb.tsx b/src/pages/agents/animations/Herodb.tsx
index 245acdd..7ae3103 100644
--- a/src/pages/agents/animations/Herodb.tsx
+++ b/src/pages/agents/animations/Herodb.tsx
@@ -178,7 +178,7 @@ export default function Herodb({
       aria-label="HeroDB, active AI memory retrieval"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full  -translate-y-18" preserveAspectRatio="xMidYMid slice">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-18" preserveAspectRatio="xMidYMid slice">
         {/* Background grid */}
         <defs>
           <pattern id="grid-dark" width="28" height="28" patternUnits="userSpaceOnUse">
diff --git a/src/pages/agents/animations/MOSSandboxes.tsx b/src/pages/agents/animations/MOSSandboxes.tsx
index b6f75f0..cf30e04 100644
--- a/src/pages/agents/animations/MOSSandboxes.tsx
+++ b/src/pages/agents/animations/MOSSandboxes.tsx
@@ -124,7 +124,7 @@ export default function MOSSandboxes({
       aria-label="MOS Secure Agent Sandboxes"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full  -translate-y-16" preserveAspectRatio="xMidYMid slice">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-16" preserveAspectRatio="xMidYMid slice">
         {/* BACKGROUND GRID */}
         <defs>
           <pattern id="grid-dark" width="28" height="28" patternUnits="userSpaceOnUse">
diff --git a/src/pages/agents/animations/MyceliumMesh.tsx b/src/pages/agents/animations/MyceliumMesh.tsx
index d78b9a9..c9bf3bd 100644
--- a/src/pages/agents/animations/MyceliumMesh.tsx
+++ b/src/pages/agents/animations/MyceliumMesh.tsx
@@ -145,7 +145,7 @@ export default function MyceliumMesh({
       aria-label="Mycelium Mesh, a secure communication network"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full -translate-y-4" preserveAspectRatio="xMidYMid slice">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-4" preserveAspectRatio="xMidYMid slice">
         {/* Background grid */}
         <defs>
           <pattern id="grid-dark" width="28" height="28" patternUnits="userSpaceOnUse">
diff --git a/src/pages/home/animations/NoCentral.tsx b/src/pages/home/animations/NoCentral.tsx
index e7c6335..13ae3c5 100644
--- a/src/pages/home/animations/NoCentral.tsx
+++ b/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 -translate-y-10">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-10">
         {/* Background grid */}
         <defs>
           <pattern id="grid-dark" width="28" height="28" patternUnits="userSpaceOnUse">
diff --git a/src/pages/pods/animations/Connectivity.tsx b/src/pages/pods/animations/Connectivity.tsx
index 8723156..c9d121c 100644
--- a/src/pages/pods/animations/Connectivity.tsx
+++ b/src/pages/pods/animations/Connectivity.tsx
@@ -44,7 +44,7 @@ export default function Connectivity({
 
   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 lg:translate-y-0 -translate-y-12" style={{ background: bg }}>
         
         {/* ========= GRID + FILTERS ========= */}
         <defs>
diff --git a/src/pages/pods/animations/DataControl.tsx b/src/pages/pods/animations/DataControl.tsx
index 363392f..cfc0d2a 100644
--- a/src/pages/pods/animations/DataControl.tsx
+++ b/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 -translate-y-12">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-12 -translate-y-12">
         {/* GRID + GLOW */}
         <defs>
           <pattern id="dc-grid" width="28" height="28" patternUnits="userSpaceOnUse">
diff --git a/src/pages/pods/animations/Resilience.tsx b/src/pages/pods/animations/Resilience.tsx
index d0a1326..1d55927 100644
--- a/src/pages/pods/animations/Resilience.tsx
+++ b/src/pages/pods/animations/Resilience.tsx
@@ -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 translate-y-5" style={{ background: bg }}>
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:translate-y-5 -translate-y-8" style={{ background: bg }}>
         {/* ===== GRID + FILTERS ===== */}
         <defs>
           <pattern id="res-grid" width="28" height="28" patternUnits="userSpaceOnUse">
diff --git a/src/pages/pods/animations/Security.tsx b/src/pages/pods/animations/Security.tsx
index 11b2d84..78a69aa 100644
--- a/src/pages/pods/animations/Security.tsx
+++ b/src/pages/pods/animations/Security.tsx
@@ -46,7 +46,7 @@ export default function Security({
       role="img"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full translate-y-6">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:translate-y-6">
         {/* ====== GRID + FILTERS ====== */}
         <defs>
           <pattern id="sec-grid" width="28" height="28" patternUnits="userSpaceOnUse">