diff --git a/frontend/src/marketing/pages/Home.tsx b/frontend/src/marketing/pages/Home.tsx
index 6e968205..912bebdd 100644
--- a/frontend/src/marketing/pages/Home.tsx
+++ b/frontend/src/marketing/pages/Home.tsx
@@ -125,10 +125,10 @@ const Home: React.FC = () => {
       <SEO meta={getMetaTags("home")} />
       <div className="bg-white">
         {/* HERO SECTION */}
-        <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
+        <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-primary-dark)] to-[var(--color-success)]">
         {/* Radial glow behind headline */}
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.1),transparent_60%)]" />
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(var(--color-success-rgb),0.2),transparent_50%)]" />
         
         <div className="relative max-w-7xl mx-auto px-6 py-20 md:py-32 lg:py-40">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
@@ -472,7 +472,7 @@ const Home: React.FC = () => {
       </section>
 
       {/* FINAL CTA */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-purple-400)] via-[var(--color-purple)] to-[var(--color-primary)]">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-success)] via-[var(--color-primary-dark)] to-[var(--color-primary)]">
         {/* Dashboard overlay in background */}
         <div className="absolute inset-0 opacity-10">
           <div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
diff --git a/frontend/src/marketing/pages/Upcoming.tsx b/frontend/src/marketing/pages/Upcoming.tsx
index 47d47e4c..ba23eb66 100644
--- a/frontend/src/marketing/pages/Upcoming.tsx
+++ b/frontend/src/marketing/pages/Upcoming.tsx
@@ -199,9 +199,9 @@ const Upcoming: React.FC = () => {
       <SEO meta={getMetaTags("home")} />
       <div className="bg-white">
         {/* HERO SECTION */}
-        <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
+        <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-primary-dark)] to-[var(--color-success)]">
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.1),transparent_60%)]" />
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(var(--color-success-rgb),0.2),transparent_50%)]" />
           
           <div className="relative max-w-7xl mx-auto px-6 py-20 md:py-32">
             <div className="max-w-4xl mx-auto text-center">
@@ -299,7 +299,7 @@ const Upcoming: React.FC = () => {
         ))}
 
         {/* CTA SECTION */}
-        <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
+        <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-success)] via-[var(--color-primary-dark)] to-[var(--color-primary)]">
           <div className="absolute inset-0 opacity-10">
             <div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
           </div>