From 756f78a1a95949ea56c5dd751ee2582bde2c46ed Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sun, 22 Mar 2026 02:23:03 -0400
Subject: [PATCH] refactor: migrate landing page to Design System v4

Replace glass/gradient/blur effects with flat dark theme:
- Solid bg-[#14161d] cards instead of glass surfaces
- Solid #22d3ee buttons instead of gradient CTAs
- #67e8f9 text instead of gradient text
- Flat nav background (no backdrop-filter blur)
- Subtle radial-gradient hero glow instead of animated pulses
- Featured pricing card uses border-[#22d3ee]
- Remove all transition: all per lesson 81
- Update color tokens: #e2e5eb foreground, #848b9b muted, #1e2130 borders

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/LandingPage.tsx |   4 +-
 frontend/src/styles/landing.css    | 404 ++++++++++++-----------------
 2 files changed, 169 insertions(+), 239 deletions(-)

diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index 15cb88d9..a8ad563b 100644
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -194,7 +194,7 @@ export default function LandingPage() {
               <div className="landing-preview-body">
                 <div className="landing-preview-sidebar">
                   <div className="landing-preview-sidebar-item active">
-                    <div className="dot" style={{ background: 'var(--cyan-400)' }} />
+                    <div className="dot" style={{ background: '#22d3ee' }} />
                     Flow Editor
                   </div>
                   <div className="landing-preview-sidebar-item">
@@ -311,7 +311,7 @@ export default function LandingPage() {
                         <span className="text">Is the user on VPN?</span>
                       </div>
                       <div className="landing-mock-chat-line">
-                        <span className="label" style={{ color: 'var(--text-secondary)' }}>Engineer:</span>
+                        <span className="label" style={{ color: '#848b9b' }}>Engineer:</span>
                         <span className="text">Yes, Cisco AnyConnect</span>
                       </div>
                       <div className="landing-mock-chat-line">
diff --git a/frontend/src/styles/landing.css b/frontend/src/styles/landing.css
index 1d95cb5c..203334c7 100644
--- a/frontend/src/styles/landing.css
+++ b/frontend/src/styles/landing.css
@@ -1,13 +1,13 @@
 /* ============================================
-   RESOLUTIONFLOW LANDING PAGE
+   RESOLUTIONFLOW LANDING PAGE — Design System v4
    All classes prefixed with landing- to avoid
    collisions with the main app styles.
    ============================================ */
 
 .landing-page {
   font-family: 'IBM Plex Sans', sans-serif;
-  background: hsl(228, 12%, 7%);
-  color: #f0f0f5;
+  background: #0c0d10;
+  color: #e2e5eb;
   line-height: 1.6;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
@@ -15,49 +15,19 @@
 }
 
 /* ---- AMBIENT BACKGROUND ---- */
+/* Subtle top glow only — no animated pulses or blur */
 .landing-ambient-glow {
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 0;
   overflow: hidden;
+  background: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.12) 0%, transparent 60%);
 }
 
-.landing-ambient-glow::before {
-  content: '';
-  position: absolute;
-  top: -30%;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 900px;
-  height: 900px;
-  background: radial-gradient(circle, rgba(6, 182, 212, 0.06) 0%, transparent 70%);
-  animation: landingAmbientPulse 12s ease-in-out infinite;
-}
-
+.landing-ambient-glow::before,
 .landing-ambient-glow::after {
-  content: '';
-  position: absolute;
-  bottom: -20%;
-  right: -10%;
-  width: 600px;
-  height: 600px;
-  background: radial-gradient(circle, rgba(34, 211, 238, 0.04) 0%, transparent 70%);
-  animation: landingAmbientPulse 16s ease-in-out infinite reverse;
-}
-
-@keyframes landingAmbientPulse {
-
-  0%,
-  100% {
-    opacity: 0.6;
-    transform: translateX(-50%) scale(1);
-  }
-
-  50% {
-    opacity: 1;
-    transform: translateX(-50%) scale(1.15);
-  }
+  display: none;
 }
 
 /* ---- GRID PATTERN ---- */
@@ -86,13 +56,12 @@
   right: 0;
   z-index: 100;
   padding: 0 2rem;
-  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
+  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 .landing-nav.scrolled {
-  background: rgba(14, 15, 24, 0.85);
-  backdrop-filter: blur(20px) saturate(1.2);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(12, 13, 16, 0.95);
+  border-bottom: 1px solid #1e2130;
 }
 
 .landing-nav-inner {
@@ -114,12 +83,11 @@
 .landing-nav-logo-icon {
   width: 36px;
   height: 36px;
-  background: linear-gradient(135deg, #06b6d4, #22d3ee);
+  background: #22d3ee;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
 }
 
 .landing-nav-logo-icon svg {
@@ -131,15 +99,12 @@
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: 1.25rem;
   font-weight: 700;
-  color: #f0f0f5;
+  color: #e2e5eb;
   letter-spacing: -0.02em;
 }
 
 .landing-nav-wordmark span {
-  background: linear-gradient(135deg, #22d3ee, #67e8f9);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: #67e8f9;
 }
 
 .landing-nav-links {
@@ -154,7 +119,7 @@
 .landing-nav-links a {
   font-size: 0.875rem;
   font-weight: 500;
-  color: #a0a0b0;
+  color: #848b9b;
   text-decoration: none;
   transition: color 0.2s;
   letter-spacing: 0.01em;
@@ -162,7 +127,7 @@
 }
 
 .landing-nav-links a:hover {
-  color: #f0f0f5;
+  color: #e2e5eb;
 }
 
 .landing-nav-cta {
@@ -174,7 +139,7 @@
 .landing-btn-ghost {
   font-size: 0.875rem;
   font-weight: 500;
-  color: #a0a0b0;
+  color: #848b9b;
   text-decoration: none;
   padding: 0.5rem 1rem;
   border-radius: 8px;
@@ -182,27 +147,26 @@
 }
 
 .landing-btn-ghost:hover {
-  color: #f0f0f5;
+  color: #e2e5eb;
   background: rgba(255, 255, 255, 0.06);
 }
 
 .landing-btn-primary {
   font-size: 0.875rem;
   font-weight: 600;
-  color: #000;
+  color: #fff;
   text-decoration: none;
   padding: 0.55rem 1.25rem;
   border-radius: 8px;
-  background: linear-gradient(135deg, #06b6d4, #22d3ee);
-  box-shadow: 0 0 20px rgba(6, 182, 212, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
-  transition: opacity 0.25s, transform 0.25s, box-shadow 0.25s;
+  background: #22d3ee;
+  transition: opacity 0.25s, transform 0.25s;
   letter-spacing: -0.01em;
   border: none;
   cursor: pointer;
 }
 
 .landing-btn-primary:hover {
-  box-shadow: 0 0 30px rgba(6, 182, 212, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  opacity: 0.9;
   transform: translateY(-1px);
 }
 
@@ -220,12 +184,12 @@
   gap: 8px;
   padding: 6px 16px;
   border-radius: 100px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  font-family: 'JetBrains Mono', monospace;
+  background: #14161d;
+  border: 1px solid #1e2130;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.75rem;
   font-weight: 500;
-  color: #22d3ee;
+  color: #67e8f9;
   margin-bottom: 2rem;
   letter-spacing: 0.03em;
   animation: landingFadeInDown 0.8s ease-out;
@@ -249,7 +213,6 @@
 
   50% {
     opacity: 1;
-    box-shadow: 0 0 8px #22d3ee;
   }
 }
 
@@ -264,16 +227,13 @@
 }
 
 .landing-gradient-text {
-  background: linear-gradient(135deg, #22d3ee, #67e8f9);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: #67e8f9;
 }
 
 .landing-hero-sub {
   font-size: 1.2rem;
   font-weight: 400;
-  color: #a0a0b0;
+  color: #848b9b;
   line-height: 1.7;
   max-width: 600px;
   margin: 0 auto 2.5rem;
@@ -291,20 +251,19 @@
 .landing-btn-hero-primary {
   font-size: 1rem;
   font-weight: 600;
-  color: #000;
+  color: #fff;
   text-decoration: none;
   padding: 0.85rem 2rem;
   border-radius: 10px;
-  background: linear-gradient(135deg, #06b6d4, #22d3ee);
-  box-shadow: 0 4px 30px rgba(6, 182, 212, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
-  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
+  background: #22d3ee;
+  transition: opacity 0.3s, transform 0.3s;
   letter-spacing: -0.01em;
   border: none;
   cursor: pointer;
 }
 
 .landing-btn-hero-primary:hover {
-  box-shadow: 0 4px 40px rgba(6, 182, 212, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  opacity: 0.9;
   transform: translateY(-2px);
 }
 
@@ -317,19 +276,19 @@
 .landing-btn-hero-secondary {
   font-size: 1rem;
   font-weight: 500;
-  color: #a0a0b0;
+  color: #848b9b;
   text-decoration: none;
   padding: 0.85rem 2rem;
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
+  background: #14161d;
+  border: 1px solid #1e2130;
+  transition: background 0.3s, border-color 0.3s, color 0.3s;
 }
 
 .landing-btn-hero-secondary:hover {
   background: rgba(255, 255, 255, 0.06);
   border-color: rgba(255, 255, 255, 0.1);
-  color: #f0f0f5;
+  color: #e2e5eb;
 }
 
 /* ---- SOCIAL PROOF BAR ---- */
@@ -340,9 +299,9 @@
 }
 
 .landing-social-proof-bar>p {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.75rem;
-  color: #5a5a6e;
+  color: #5a6170;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   margin-bottom: 1.5rem;
@@ -363,15 +322,12 @@
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: 1.75rem;
   font-weight: 700;
-  background: linear-gradient(135deg, #22d3ee, #67e8f9);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: #67e8f9;
 }
 
 .landing-proof-stat .label {
   font-size: 0.8rem;
-  color: #5a5a6e;
+  color: #5a6170;
   margin-top: 0.25rem;
 }
 
@@ -385,10 +341,10 @@
 
 .landing-preview-window {
   border-radius: 12px;
-  border: 1px solid hsl(228, 8%, 16%);
-  background: hsl(228, 10%, 10%);
+  border: 1px solid #1e2130;
+  background: #14161d;
   overflow: hidden;
-  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4), 0 0 60px rgba(6, 182, 212, 0.05);
+  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4);
 }
 
 .landing-preview-titlebar {
@@ -397,7 +353,7 @@
   padding: 0 0 0 14px;
   height: 40px;
   background: rgba(255, 255, 255, 0.02);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid #1e2130;
 }
 
 .landing-preview-tab {
@@ -406,10 +362,10 @@
   gap: 8px;
   padding: 0 14px;
   height: 100%;
-  font-family: 'JetBrains Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.7rem;
-  color: #a0a0b0;
-  border-right: 1px solid rgba(255, 255, 255, 0.06);
+  color: #848b9b;
+  border-right: 1px solid #1e2130;
   background: rgba(255, 255, 255, 0.02);
   position: relative;
 }
@@ -421,20 +377,20 @@
   left: 0;
   right: 0;
   height: 2px;
-  background: linear-gradient(135deg, #06b6d4, #22d3ee);
+  background: #22d3ee;
 }
 
 .landing-tab-icon {
   width: 14px;
   height: 14px;
   border-radius: 3px;
-  background: linear-gradient(135deg, #06b6d4, #22d3ee);
+  background: #22d3ee;
   flex-shrink: 0;
 }
 
 .landing-tab-close {
   font-size: 0.65rem;
-  color: #5a5a6e;
+  color: #5a6170;
   margin-left: 4px;
 }
 
@@ -453,10 +409,10 @@
   padding: 4px 12px;
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  font-family: 'JetBrains Mono', monospace;
+  border: 1px solid #1e2130;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.65rem;
-  color: #5a5a6e;
+  color: #5a6170;
 }
 
 .landing-lock-icon {
@@ -477,7 +433,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #5a5a6e;
+  color: #5a6170;
   font-size: 0.7rem;
   transition: background 0.15s;
 }
@@ -518,15 +474,15 @@
   padding: 8px 12px;
   border-radius: 8px;
   font-size: 0.8rem;
-  color: #a0a0b0;
+  color: #848b9b;
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
 .landing-preview-sidebar-item.active {
-  background: rgba(6, 182, 212, 0.08);
-  color: #22d3ee;
+  background: rgba(34, 211, 238, 0.08);
+  color: #67e8f9;
   border-left: 3px solid #22d3ee;
 }
 
@@ -540,7 +496,7 @@
   flex: 1;
   background: rgba(255, 255, 255, 0.01);
   border-radius: 12px;
-  border: 1px dashed rgba(255, 255, 255, 0.06);
+  border: 1px dashed #1e2130;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -564,22 +520,21 @@
 }
 
 .landing-tree-node.root {
-  background: linear-gradient(135deg, #06b6d4, #22d3ee);
-  color: #000;
-  box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
+  background: #22d3ee;
+  color: #fff;
 }
 
 .landing-tree-node.decision {
-  background: hsl(228, 10%, 10%);
-  border: 1px solid hsl(228, 8%, 16%);
-  color: #f0f0f5;
+  background: #14161d;
+  border: 1px solid #1e2130;
+  color: #e2e5eb;
   font-size: 0.7rem;
 }
 
 .landing-tree-connector {
   width: 2px;
   height: 24px;
-  background: rgba(6, 182, 212, 0.2);
+  background: rgba(34, 211, 238, 0.2);
 }
 
 .landing-tree-branch {
@@ -596,7 +551,7 @@
   width: calc(100% - 100px);
   transform: translateX(-50%);
   height: 2px;
-  background: rgba(6, 182, 212, 0.15);
+  background: rgba(34, 211, 238, 0.15);
 }
 
 .landing-tree-branch-arm {
@@ -610,9 +565,9 @@
 }
 
 .landing-tree-label {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.6rem;
-  color: #22d3ee;
+  color: #67e8f9;
   margin-bottom: 4px;
   opacity: 0.7;
 }
@@ -628,10 +583,10 @@
 }
 
 .landing-section-label {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.7rem;
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 0.75rem;
   font-weight: 600;
-  color: #22d3ee;
+  color: #67e8f9;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   margin-bottom: 1rem;
@@ -640,7 +595,7 @@
 .landing-section-title {
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: clamp(2rem, 4vw, 2.75rem);
-  font-weight: 700;
+  font-weight: 800;
   letter-spacing: -0.03em;
   line-height: 1.15;
   margin-top: 0;
@@ -649,7 +604,7 @@
 
 .landing-section-desc {
   font-size: 1.1rem;
-  color: #a0a0b0;
+  color: #848b9b;
   line-height: 1.7;
   max-width: 580px;
 }
@@ -659,7 +614,7 @@
   max-width: 1100px;
   margin: 0 auto;
   height: 1px;
-  background: rgba(255, 255, 255, 0.06);
+  background: #1e2130;
 }
 
 /* ---- PROBLEM SECTION ---- */
@@ -674,14 +629,13 @@
 .landing-problem-card {
   padding: 2rem;
   border-radius: 16px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
+  background: #14161d;
+  border: 1px solid #1e2130;
+  transition: border-color 0.3s, transform 0.3s;
 }
 
 .landing-problem-card:hover {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.12);
   transform: translateY(-2px);
 }
 
@@ -726,7 +680,7 @@
 
 .landing-problem-card p {
   font-size: 0.9rem;
-  color: #a0a0b0;
+  color: #848b9b;
   line-height: 1.65;
 }
 
@@ -737,16 +691,9 @@
   position: relative;
 }
 
+/* Removed radial gradient pseudo-element */
 .landing-equation-section::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 500px;
-  height: 100%;
-  background: radial-gradient(ellipse, rgba(6, 182, 212, 0.04) 0%, transparent 70%);
-  pointer-events: none;
+  display: none;
 }
 
 .landing-brand-equation {
@@ -765,26 +712,24 @@
 .landing-eq-item {
   padding: 0.5rem 1.25rem;
   border-radius: 12px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: #14161d;
+  border: 1px solid #1e2130;
 }
 
 .landing-eq-operator {
-  color: #22d3ee;
+  color: #67e8f9;
   font-size: 2rem;
 }
 
 .landing-eq-result {
-  background: linear-gradient(135deg, #06b6d4, #22d3ee);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: #67e8f9;
   padding: 0;
 }
 
+/* ---- EQUATION DESC ---- */
 .landing-equation-desc {
   font-size: 1.1rem;
-  color: #a0a0b0;
+  color: #848b9b;
   max-width: 550px;
   margin: 0 auto;
   line-height: 1.7;
@@ -802,24 +747,23 @@
 .landing-step-card {
   padding: 2rem;
   border-radius: 16px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: #14161d;
+  border: 1px solid #1e2130;
   position: relative;
   counter-increment: landing-step;
-  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
+  transition: border-color 0.3s, transform 0.3s;
 }
 
 .landing-step-card:hover {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: rgba(6, 182, 212, 0.15);
+  border-color: rgba(34, 211, 238, 0.2);
 }
 
 .landing-step-card::before {
   content: counter(landing-step, decimal-leading-zero);
-  font-family: 'JetBrains Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.7rem;
   font-weight: 600;
-  color: #22d3ee;
+  color: #67e8f9;
   opacity: 0.6;
   letter-spacing: 0.05em;
 }
@@ -834,7 +778,7 @@
 
 .landing-step-card p {
   font-size: 0.9rem;
-  color: #a0a0b0;
+  color: #848b9b;
   line-height: 1.65;
 }
 
@@ -843,8 +787,8 @@
   height: 120px;
   border-radius: 10px;
   margin-top: 1.25rem;
-  background: hsl(228, 10%, 10%);
-  border: 1px solid hsl(228, 8%, 16%);
+  background: #0c0d10;
+  border: 1px solid #1e2130;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -864,20 +808,20 @@
   padding: 6px 10px;
   border-radius: 6px;
   font-size: 0.6rem;
-  font-family: 'JetBrains Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
   white-space: nowrap;
 }
 
 .landing-mock-node.start {
-  background: rgba(6, 182, 212, 0.15);
-  color: #22d3ee;
-  border: 1px solid rgba(6, 182, 212, 0.2);
+  background: rgba(34, 211, 238, 0.15);
+  color: #67e8f9;
+  border: 1px solid rgba(34, 211, 238, 0.2);
 }
 
 .landing-mock-node.step {
   background: rgba(255, 255, 255, 0.03);
-  color: #a0a0b0;
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  color: #848b9b;
+  border: 1px solid #1e2130;
 }
 
 .landing-mock-connector {
@@ -885,7 +829,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #5a5a6e;
+  color: #5a6170;
   font-size: 0.7rem;
 }
 
@@ -903,17 +847,17 @@
   align-items: center;
   gap: 6px;
   font-size: 0.6rem;
-  font-family: 'JetBrains Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
 }
 
 .landing-mock-chat-line .label {
-  color: #22d3ee;
+  color: #67e8f9;
   font-weight: 600;
   min-width: 55px;
 }
 
 .landing-mock-chat-line .text {
-  color: #a0a0b0;
+  color: #848b9b;
 }
 
 .landing-mock-chat-line.doc .label {
@@ -930,25 +874,25 @@
 }
 
 .landing-mock-ticket-header {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.6rem;
-  color: #22d3ee;
+  color: #67e8f9;
   font-weight: 600;
   padding-bottom: 0.35rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid #1e2130;
   margin-bottom: 0.15rem;
 }
 
 .landing-mock-ticket-line {
   font-size: 0.55rem;
-  font-family: 'JetBrains Mono', monospace;
-  color: #a0a0b0;
+  font-family: 'IBM Plex Sans', sans-serif;
+  color: #848b9b;
   display: flex;
   gap: 6px;
 }
 
 .landing-mock-ticket-line .time {
-  color: #5a5a6e;
+  color: #5a6170;
   min-width: 35px;
 }
 
@@ -967,14 +911,13 @@
 .landing-feature-card {
   padding: 2rem;
   border-radius: 16px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
+  background: #14161d;
+  border: 1px solid #1e2130;
+  transition: border-color 0.3s ease, transform 0.3s ease;
 }
 
 .landing-feature-card:hover {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: rgba(6, 182, 212, 0.15);
+  border-color: rgba(34, 211, 238, 0.2);
   transform: translateY(-3px);
 }
 
@@ -982,12 +925,12 @@
   width: 40px;
   height: 40px;
   border-radius: 10px;
-  background: rgba(6, 182, 212, 0.08);
+  background: rgba(34, 211, 238, 0.08);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.25rem;
-  color: #22d3ee;
+  color: #67e8f9;
 }
 
 .landing-feature-card h3 {
@@ -1000,13 +943,13 @@
 
 .landing-feature-card p {
   font-size: 0.875rem;
-  color: #a0a0b0;
+  color: #848b9b;
   line-height: 1.6;
 }
 
 .landing-feature-card.highlight {
-  border-color: rgba(6, 182, 212, 0.15);
-  background: rgba(6, 182, 212, 0.03);
+  border-color: rgba(34, 211, 238, 0.15);
+  background: #14161d;
   grid-column: span 2;
 }
 
@@ -1022,20 +965,19 @@
 .landing-pricing-card {
   padding: 2.5rem 2rem;
   border-radius: 16px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
+  background: #14161d;
+  border: 1px solid #1e2130;
+  transition: border-color 0.3s, transform 0.3s;
 }
 
 .landing-pricing-card:hover {
-  border-color: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.12);
 }
 
 .landing-pricing-card.featured {
-  border-color: rgba(6, 182, 212, 0.2);
-  background: rgba(6, 182, 212, 0.03);
+  border-color: #22d3ee;
+  background: #14161d;
   position: relative;
-  box-shadow: 0 0 40px rgba(6, 182, 212, 0.06);
 }
 
 .landing-pricing-card.featured::before {
@@ -1046,11 +988,11 @@
   transform: translateX(-50%);
   padding: 4px 14px;
   border-radius: 100px;
-  background: linear-gradient(135deg, #06b6d4, #22d3ee);
-  font-family: 'JetBrains Mono', monospace;
+  background: #22d3ee;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.65rem;
   font-weight: 600;
-  color: #000;
+  color: #fff;
   letter-spacing: 0.05em;
   text-transform: uppercase;
 }
@@ -1065,7 +1007,7 @@
 
 .landing-pricing-target {
   font-size: 0.8rem;
-  color: #5a5a6e;
+  color: #5a6170;
   margin-bottom: 1.5rem;
 }
 
@@ -1084,20 +1026,17 @@
 }
 
 .landing-pricing-card.featured .landing-pricing-price .amount {
-  background: linear-gradient(135deg, #22d3ee, #67e8f9);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: #67e8f9;
 }
 
 .landing-pricing-price .period {
   font-size: 0.85rem;
-  color: #5a5a6e;
+  color: #5a6170;
 }
 
 .landing-pricing-note {
   font-size: 0.8rem;
-  color: #5a5a6e;
+  color: #5a6170;
   margin-bottom: 2rem;
 }
 
@@ -1112,7 +1051,7 @@
 
 .landing-pricing-features li {
   font-size: 0.875rem;
-  color: #a0a0b0;
+  color: #848b9b;
   display: flex;
   align-items: flex-start;
   gap: 0.6rem;
@@ -1135,13 +1074,13 @@
   font-size: 0.9rem;
   font-weight: 600;
   text-decoration: none;
-  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, opacity 0.3s;
+  transition: opacity 0.3s, border-color 0.3s, background 0.3s, transform 0.3s;
   width: 100%;
 }
 
 .landing-pricing-btn.outline {
-  color: #f0f0f5;
-  border: 1px solid hsl(228, 8%, 16%);
+  color: #e2e5eb;
+  border: 1px solid #1e2130;
   background: transparent;
 }
 
@@ -1151,14 +1090,13 @@
 }
 
 .landing-pricing-btn.filled {
-  color: #000;
-  background: linear-gradient(135deg, #06b6d4, #22d3ee);
-  box-shadow: 0 0 20px rgba(6, 182, 212, 0.15);
+  color: #fff;
+  background: #22d3ee;
   border: none;
 }
 
 .landing-pricing-btn.filled:hover {
-  box-shadow: 0 0 30px rgba(6, 182, 212, 0.3);
+  opacity: 0.9;
   transform: translateY(-1px);
 }
 
@@ -1166,11 +1104,11 @@
   text-align: center;
   margin-top: 2rem;
   font-size: 0.85rem;
-  color: #5a5a6e;
+  color: #5a6170;
 }
 
 .landing-pricing-enterprise a {
-  color: #22d3ee;
+  color: #67e8f9;
   text-decoration: none;
 }
 
@@ -1192,7 +1130,7 @@
   font-weight: 600;
   line-height: 1.5;
   letter-spacing: -0.01em;
-  color: #f0f0f5;
+  color: #e2e5eb;
   font-style: italic;
   margin-bottom: 1.5rem;
   position: relative;
@@ -1205,7 +1143,7 @@
   opacity: 0.3;
   vertical-align: super;
   margin-right: 1rem;
-  top: -2.5rem;  
+  top: -2.5rem;
   font-family: 'Bricolage Grotesque', sans-serif;
   line-height: 1;
 }
@@ -1225,11 +1163,11 @@
 
 .landing-testimonial-author {
   font-size: 0.9rem;
-  color: #5a5a6e;
+  color: #5a6170;
 }
 
 .landing-testimonial-author strong {
-  color: #a0a0b0;
+  color: #848b9b;
   font-weight: 600;
 }
 
@@ -1240,29 +1178,22 @@
   position: relative;
 }
 
+/* Removed radial gradient pseudo-element */
 .landing-cta-section::before {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 700px;
-  height: 400px;
-  background: radial-gradient(ellipse, rgba(6, 182, 212, 0.05) 0%, transparent 70%);
-  pointer-events: none;
+  display: none;
 }
 
 .landing-cta-section h2 {
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: clamp(2rem, 4vw, 2.75rem);
-  font-weight: 700;
+  font-weight: 800;
   letter-spacing: -0.03em;
   margin-bottom: 1rem;
 }
 
 .landing-cta-section>p {
   font-size: 1.1rem;
-  color: #a0a0b0;
+  color: #848b9b;
   max-width: 500px;
   margin: 0 auto 2rem;
   line-height: 1.7;
@@ -1279,9 +1210,9 @@
   flex: 1;
   padding: 0.85rem 1.25rem;
   border-radius: 10px;
-  border: 1px solid hsl(228, 8%, 16%);
-  background: hsl(228, 10%, 10%);
-  color: #f0f0f5;
+  border: 1px solid #1e2130;
+  background: #14161d;
+  color: #e2e5eb;
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.9rem;
   outline: none;
@@ -1289,17 +1220,17 @@
 }
 
 .landing-cta-email-input::placeholder {
-  color: #5a5a6e;
+  color: #5a6170;
 }
 
 .landing-cta-email-input:focus {
-  border-color: #06b6d4;
-  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
+  border-color: #22d3ee;
+  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
 }
 
 .landing-cta-fine-print {
   font-size: 0.75rem;
-  color: #5a5a6e;
+  color: #5a6170;
   margin-top: 1rem;
 }
 
@@ -1317,7 +1248,7 @@
 
 /* ---- FOOTER ---- */
 .landing-footer {
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  border-top: 1px solid #1e2130;
   padding: 3rem 2rem;
 }
 
@@ -1339,7 +1270,7 @@
 
 .landing-footer-copy {
   font-size: 0.8rem;
-  color: #5a5a6e;
+  color: #5a6170;
 }
 
 .landing-footer-links {
@@ -1352,13 +1283,13 @@
 
 .landing-footer-links a {
   font-size: 0.8rem;
-  color: #5a5a6e;
+  color: #5a6170;
   text-decoration: none;
   transition: color 0.2s;
 }
 
 .landing-footer-links a:hover {
-  color: #a0a0b0;
+  color: #848b9b;
 }
 
 /* ---- ANIMATIONS ---- */
@@ -1417,13 +1348,13 @@
   display: block;
   width: 22px;
   height: 2px;
-  background: #a0a0b0;
+  background: #848b9b;
   border-radius: 2px;
   transition: transform 0.3s ease, opacity 0.3s ease;
 }
 
 .landing-hamburger:hover span {
-  background: #f0f0f5;
+  background: #e2e5eb;
 }
 
 .landing-hamburger.open span:nth-child(1) {
@@ -1444,9 +1375,8 @@
   flex-direction: column;
   gap: 0;
   padding: 0.5rem 1.5rem 1.5rem;
-  background: rgba(14, 15, 24, 0.95);
-  backdrop-filter: blur(20px) saturate(1.2);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(12, 13, 16, 0.98);
+  border-bottom: 1px solid #1e2130;
 }
 
 .landing-mobile-menu a {
@@ -1454,14 +1384,14 @@
   padding: 0.875rem 0;
   font-size: 1rem;
   font-weight: 500;
-  color: #a0a0b0;
+  color: #848b9b;
   text-decoration: none;
   transition: color 0.2s;
   border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 }
 
 .landing-mobile-menu a:hover {
-  color: #f0f0f5;
+  color: #e2e5eb;
 }
 
 .landing-mobile-menu a:last-child {