diff --git a/src/app/page.tsx b/src/app/page.tsx
index d5da689..7d3ba7a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -55,6 +55,132 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="cta" data-section="cta" style={{
+        background: '#000000',
+        padding: 'var(--padding-hero-page-padding)',
+        position: 'relative',
+        overflow: 'hidden'
+      }}>
+        <div style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: 'radial-gradient(circle at 20% 50%, rgba(30, 144, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(138, 43, 226, 0.1) 0%, transparent 50%)',
+          pointerEvents: 'none'
+        }} />
+        <div style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 1px)',
+          backgroundSize: '40px 40px',
+          pointerEvents: 'none'
+        }} />
+        <div style={{
+          position: 'relative',
+          zIndex: 1,
+          maxWidth: 'var(--width-content-width)',
+          margin: '0 auto',
+          textAlign: 'center',
+          animation: 'fadeInUp 1s ease-out'
+        }}>
+          <h2 style={{
+            fontSize: 'clamp(2.5rem, 6vw, 4.5rem)',
+            fontWeight: 700,
+            color: '#ffffff',
+            marginBottom: '1.5rem',
+            lineHeight: 1.2,
+            animation: 'slideInDown 0.8s ease-out',
+            background: 'linear-gradient(135deg, #ffffff 0%, #cee7ff 100%)',
+            backgroundClip: 'text',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent'
+          }}>
+            See Your Growth In Motion
+          </h2>
+          <p style={{
+            fontSize: 'clamp(1rem, 2vw, 1.25rem)',
+            color: '#cccccc',
+            marginBottom: '2rem',
+            lineHeight: 1.6,
+            animation: 'slideInUp 0.8s ease-out 0.1s backwards',
+            maxWidth: '800px',
+            margin: '0 auto 2rem'
+          }}>
+            Strategic campaigns engineered for 3D impact. Watch your brand transform through data-driven storytelling and cutting-edge digital experiences.
+          </p>
+          <div style={{
+            display: 'flex',
+            gap: '1.5rem',
+            justifyContent: 'center',
+            flexWrap: 'wrap',
+            animation: 'slideInUp 0.8s ease-out 0.2s backwards'
+          }}>
+            <button style={{
+              padding: '1rem 2.5rem',
+              fontSize: '1rem',
+              fontWeight: 600,
+              background: 'linear-gradient(135deg, #1e90ff 0%, #b366ff 100%)',
+              color: '#ffffff',
+              border: 'none',
+              borderRadius: '50px',
+              cursor: 'pointer',
+              transition: 'all 0.3s ease',
+              boxShadow: '0 8px 32px rgba(30, 144, 255, 0.3)',
+              transform: 'translateZ(0)',
+              position: 'relative',
+              overflow: 'hidden'
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.transform = 'translateY(-2px)';
+              e.currentTarget.style.boxShadow = '0 12px 48px rgba(30, 144, 255, 0.5)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.transform = 'translateY(0)';
+              e.currentTarget.style.boxShadow = '0 8px 32px rgba(30, 144, 255, 0.3)';
+            }}>
+              Let's Create Magic
+            </button>
+          </div>
+        </div>
+        <style>{`
+          @keyframes fadeInUp {
+            from {
+              opacity: 0;
+              transform: translateY(20px);
+            }
+            to {
+              opacity: 1;
+              transform: translateY(0);
+            }
+          }
+          @keyframes slideInDown {
+            from {
+              opacity: 0;
+              transform: translateY(-20px);
+            }
+            to {
+              opacity: 1;
+              transform: translateY(0);
+            }
+          }
+          @keyframes slideInUp {
+            from {
+              opacity: 0;
+              transform: translateY(20px);
+            }
+            to {
+              opacity: 1;
+              transform: translateY(0);
+            }
+          }
+        `}</style>
+      </div>
+
       <div id="portfolio" data-section="portfolio">
         <ProductCardFour
           title="Campaign Showcase"
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index 59f452d..7f31b7a 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #f5f5f5;
-  --primary-cta: #dfff1c;
+  --background: #000000;
+  --card: #0c0c0c;
+  --foreground: #ffffff;
+  --primary-cta: #1e90ff;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #000000;
   --secondary-cta-text: #ffffff;
-  --accent: #8b9a1b;
-  --background-accent: #5d6b00;
+  --accent: #b366ff;
+  --background-accent: #1e90ff;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);