diff --git a/src/app/globals.css b/src/app/globals.css
index d681b99..b5d200c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -65,6 +65,7 @@
   --color-accent-cyan-rgb: 8, 145, 178;
 
   --color-footer-bg: #1C1C1C;
+  --color-cta-bg: #FAFAFA;
   --color-footer-text: #A0A0A0;
   --color-footer-text-muted: #666666;
   --color-footer-text-dim: #999999;
@@ -198,6 +199,7 @@
   --color-accent-cyan-rgb: 6, 182, 212;
 
   --color-footer-bg: #000000;
+  --color-cta-bg: #141414;
   --color-footer-text: #8C8C8C;
   --color-footer-text-muted: #525252;
   --color-footer-text-dim: #737373;
diff --git a/src/components/sections/cta-section.tsx b/src/components/sections/cta-section.tsx
index cdaf0fe..29d72dc 100644
--- a/src/components/sections/cta-section.tsx
+++ b/src/components/sections/cta-section.tsx
@@ -27,7 +27,7 @@ export function CTASection({
   const shouldReduceMotion = useReducedMotion();
 
   return (
-    <section id="cta" className="relative py-20 md:py-28 bg-[var(--color-primary)] overflow-hidden">
+    <section id="cta" className="relative py-20 md:py-28 bg-[var(--color-cta-bg)] overflow-hidden">
       <div
         className="pointer-events-none absolute inset-0"
         style={{
diff --git a/src/components/sections/hero-section-v2.tsx b/src/components/sections/hero-section-v2.tsx
index ebd27fe..e0d0c7a 100644
--- a/src/components/sections/hero-section-v2.tsx
+++ b/src/components/sections/hero-section-v2.tsx
@@ -157,7 +157,7 @@ export function HeroSectionV2() {
                 }}
               />
 
-              <div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-8 lg:p-10">
+              <div className="relative rounded-2xl bg-[var(--color-bg-primary)]/80 backdrop-blur-sm p-8 lg:p-10">
                 <div className="w-14 h-14 rounded-xl bg-[var(--color-brand-primary-bg)] flex items-center justify-center mb-6">
                   <Handshake className="w-6 h-6 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
                 </div>