diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index d2f036b..1538d5b 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -1,17 +1,35 @@
 import { ArrowRight, Play } from 'lucide-react';
 import { Link } from 'react-router-dom';
+import { useEffect, useRef } from 'react';
 import heroNetwork from '@/assets/hero-network.jpg';
 
 const HeroSection = () => {
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (imageRef.current) {
+        const scrolled = window.pageYOffset;
+        const parallax = scrolled * 0.5;
+        imageRef.current.style.transform = `translateY(${parallax}px) scale(1.1)`;
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   return (
     <section className="section-pin grid-overlay">
       <div className="relative h-full flex items-center justify-center overflow-hidden">
-        {/* Background image with overlay */}
-        <div className="absolute inset-0">
+        {/* Background image with parallax */}
+        <div className="absolute inset-0 overflow-hidden">
           <img 
+            ref={imageRef}
             src={heroNetwork} 
             alt="Modern IT infrastructure with network connections" 
-            className="w-full h-full object-cover opacity-20"
+            className="w-full h-[110%] object-cover opacity-20 will-change-transform"
+            style={{ transform: 'translateY(0px) scale(1.1)' }}
           />
           <div className="absolute inset-0 bg-gradient-to-b from-background/40 via-background/60 to-background"></div>
         </div>
diff --git a/src/index.css b/src/index.css
index 98ccc5b..ad7bd78 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,41 +4,41 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Bay Area Affiliates Design System - Neon on Dark */
+/* Bay Area Affiliates Design System - Black and Blue */
 
 @layer base {
   :root {
-    /* Base teal/near-black system */
-    --background: 180 75% 7%;        /* #071b1b */
-    --background-deep: 180 72% 9%;   /* #0b2626 */
+    /* Base black system */
+    --background: 0 0% 3%;           /* #080808 */
+    --background-deep: 0 0% 1%;      /* #030303 */
     --foreground: 0 0% 98%;          /* Near white */
     --foreground-muted: 0 0% 80%;    /* Muted white */
 
     /* Cards and surfaces */
-    --card: 180 65% 10%;
+    --card: 0 0% 8%;
     --card-foreground: 0 0% 95%;
-    --card-border: 180 40% 15%;
+    --card-border: 220 20% 15%;
 
-    /* Neon lime accent system */
-    --neon: 76 100% 58%;             /* #b7ff2a */
-    --neon-glow: 76 100% 58%;
-    --neon-muted: 76 60% 45%;
-    --neon-foreground: 180 75% 7%;   /* Dark text on neon */
+    /* Electric blue accent system */
+    --neon: 220 100% 60%;            /* #3366ff */
+    --neon-glow: 220 100% 70%;
+    --neon-muted: 220 60% 45%;
+    --neon-foreground: 0 0% 3%;      /* Dark text on blue */
 
     /* Interactive states */
-    --primary: 76 100% 58%;          /* Neon lime */
-    --primary-foreground: 180 75% 7%;
-    --primary-hover: 76 100% 65%;
+    --primary: 220 100% 60%;         /* Electric blue */
+    --primary-foreground: 0 0% 98%;
+    --primary-hover: 220 100% 70%;
 
-    --secondary: 180 40% 15%;
+    --secondary: 220 20% 15%;
     --secondary-foreground: 0 0% 95%;
-    --secondary-hover: 180 40% 20%;
+    --secondary-hover: 220 20% 20%;
 
     /* Muted and accent variants */
-    --muted: 180 40% 12%;
+    --muted: 220 15% 12%;
     --muted-foreground: 0 0% 65%;
 
-    --accent: 180 40% 15%;
+    --accent: 220 20% 15%;
     --accent-foreground: 0 0% 95%;
 
     /* Status colors */
@@ -49,10 +49,10 @@
     --success-foreground: 0 0% 98%;
 
     /* Borders and inputs */
-    --border: 180 40% 18%;
-    --input: 180 40% 15%;
-    --input-border: 180 40% 25%;
-    --ring: 76 100% 58%;
+    --border: 220 15% 18%;
+    --input: 220 15% 15%;
+    --input-border: 220 20% 25%;
+    --ring: 220 100% 60%;
 
     /* Radius system */
     --radius: 1.5rem;
@@ -60,8 +60,8 @@
     --radius-lg: 2rem;
 
     /* Grid and overlay */
-    --grid-color: 180 40% 12%;
-    --overlay: 180 75% 7% / 0.8;
+    --grid-color: 220 15% 12%;
+    --overlay: 0 0% 3% / 0.8;
 
     /* Animations and effects */
     --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);