From 7b93920ae145332c9261a067c1915c7e4aa9f076 Mon Sep 17 00:00:00 2001
From: Jake Shore <jakeshore@Jakes-Mac-mini.local>
Date: Mon, 26 Jan 2026 20:19:29 -0500
Subject: [PATCH] Optimize: remove heavy dependencies, inline CSS, reduce JS

---
 index.html | 2486 ++++++++++++++++++++++++++--------------------------
 1 file changed, 1263 insertions(+), 1223 deletions(-)
diff --git a/index.html b/index.html
index 9d575e0..0644120 100644
--- a/index.html
+++ b/index.html
@@ -1,86 +1,107 @@
 <!DOCTYPE html>
-<html lang="en" class="scroll-smooth">
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CRESYNC — Your 24/7 CRE Employee</title>
-  <script src="https://cdn.tailwindcss.com"></script>
+  <meta name="description" content="Source deals, nurture leads, and close contracts through simple conversation. CRESYNC is your AI-powered CRE assistant.">
+  
+  <!-- Preconnect to critical origins -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
-  <script>
-    tailwind.config = {
-      theme: {
-        extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', 'sans-serif'],
-            mono: ['JetBrains Mono', 'monospace'],
-          },
-          colors: {
-            brand: {
-              50: '#f0fdf4',
-              100: '#dcfce7',
-              200: '#bbf7d0',
-              300: '#86efac',
-              400: '#4ade80',
-              500: '#22c55e',
-              600: '#16a34a',
-              700: '#15803d',
-              800: '#166534',
-              900: '#14532d',
-            }
-          },
-        }
-      }
-    }
-  </script>
+  
+  <!-- Load only needed font weights -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
+  
   <style>
-    * {
-      cursor: none !important;
+    /* Reset & Base */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    
+    html { scroll-behavior: smooth; }
+    
+    body {
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+      background: #030303;
+      color: #fff;
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
+      overflow-x: hidden;
     }
     
-    .custom-cursor {
-      width: 20px;
-      height: 20px;
-      border: 2px solid #22c55e;
-      border-radius: 50%;
-      position: fixed;
-      pointer-events: none;
-      z-index: 9999;
-      transition: transform 0.1s ease, background 0.2s ease;
-      mix-blend-mode: difference;
+    /* Utility Classes */
+    .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
+    .container-lg { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
+    
+    .text-center { text-align: center; }
+    .font-bold { font-weight: 700; }
+    .font-black { font-weight: 900; }
+    
+    .text-zinc-400 { color: #a1a1aa; }
+    .text-zinc-500 { color: #71717a; }
+    .text-zinc-600 { color: #52525b; }
+    .text-brand { color: #22c55e; }
+    .text-red { color: #f87171; }
+    
+    .flex { display: flex; }
+    .flex-col { flex-direction: column; }
+    .items-center { align-items: center; }
+    .justify-center { justify-content: center; }
+    .justify-between { justify-content: space-between; }
+    .gap-2 { gap: 0.5rem; }
+    .gap-3 { gap: 0.75rem; }
+    .gap-4 { gap: 1rem; }
+    .gap-6 { gap: 1.5rem; }
+    .gap-8 { gap: 2rem; }
+    
+    .grid { display: grid; }
+    .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
+    
+    .hidden { display: none; }
+    
+    .rounded-lg { border-radius: 0.5rem; }
+    .rounded-xl { border-radius: 0.75rem; }
+    .rounded-2xl { border-radius: 1rem; }
+    .rounded-3xl { border-radius: 1.5rem; }
+    .rounded-full { border-radius: 9999px; }
+    
+    .w-full { width: 100%; }
+    .h-full { height: 100%; }
+    
+    /* Responsive */
+    @media (min-width: 768px) {
+      .md\:flex { display: flex; }
+      .md\:hidden { display: none; }
+      .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+      .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+      .md\:flex-row { flex-direction: row; }
+      .md\:text-6xl { font-size: 3.75rem; }
+      .md\:text-5xl { font-size: 3rem; }
+      .md\:text-2xl { font-size: 1.5rem; }
     }
     
-    .custom-cursor.hover {
-      transform: scale(2);
-      background: rgba(34, 197, 94, 0.3);
+    @media (min-width: 1024px) {
+      .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+      .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+      .lg\:flex { display: flex; }
+      .lg\:text-8xl { font-size: 6rem; }
+      .lg\:text-7xl { font-size: 4.5rem; }
     }
     
-    .cursor-dot {
-      width: 6px;
-      height: 6px;
-      background: #22c55e;
-      border-radius: 50%;
-      position: fixed;
-      pointer-events: none;
-      z-index: 9999;
-    }
-    
-    @media (max-width: 768px) {
-      * { cursor: auto !important; }
-      .custom-cursor, .cursor-dot { display: none; }
+    /* Components */
+    .glass {
+      background: rgba(255, 255, 255, 0.03);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border: 1px solid rgba(255, 255, 255, 0.08);
     }
     
     .gradient-text {
-      background: linear-gradient(135deg, #22c55e 0%, #10b981 25%, #06b6d4 50%, #8b5cf6 75%, #22c55e 100%);
+      background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4, #8b5cf6);
       background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
-      animation: gradient-shift 8s ease infinite;
+      animation: gradient-shift 6s ease infinite;
     }
     
     @keyframes gradient-shift {
@@ -88,573 +109,1059 @@
       50% { background-position: 100% 50%; }
     }
     
-    .hero-gradient {
-      background: 
-        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(34, 197, 94, 0.15), transparent),
-        radial-gradient(ellipse 60% 40% at 80% 50%, rgba(6, 182, 212, 0.1), transparent),
-        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(139, 92, 246, 0.1), transparent);
+    .glow {
+      box-shadow: 0 0 60px rgba(34, 197, 94, 0.15);
     }
     
-    .mesh-gradient {
-      background: 
-        radial-gradient(at 40% 20%, rgba(34, 197, 94, 0.2) 0px, transparent 50%),
-        radial-gradient(at 80% 0%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),
-        radial-gradient(at 0% 50%, rgba(139, 92, 246, 0.1) 0px, transparent 50%),
-        radial-gradient(at 80% 50%, rgba(16, 185, 129, 0.1) 0px, transparent 50%),
-        radial-gradient(at 0% 100%, rgba(34, 197, 94, 0.15) 0px, transparent 50%),
-        radial-gradient(at 80% 100%, rgba(6, 182, 212, 0.1) 0px, transparent 50%);
-      animation: mesh-move 20s ease infinite;
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      padding: 1rem 2rem;
+      font-weight: 700;
+      font-size: 1rem;
+      border-radius: 0.75rem;
+      border: none;
+      cursor: pointer;
+      transition: transform 0.2s, box-shadow 0.2s;
     }
     
-    @keyframes mesh-move {
-      0%, 100% { filter: hue-rotate(0deg); }
-      50% { filter: hue-rotate(15deg); }
+    .btn:hover { transform: translateY(-2px); }
+    .btn:active { transform: translateY(0); }
+    
+    .btn-primary {
+      background: #22c55e;
+      color: #000;
     }
     
-    .glass {
-      background: rgba(255, 255, 255, 0.03);
-      backdrop-filter: blur(20px);
-      border: 1px solid rgba(255, 255, 255, 0.08);
+    .btn-primary:hover {
+      background: #4ade80;
+      box-shadow: 0 0 30px rgba(34, 197, 94, 0.3);
     }
     
-    .glass-strong {
+    .btn-secondary {
       background: rgba(255, 255, 255, 0.05);
-      backdrop-filter: blur(40px);
+      color: #fff;
       border: 1px solid rgba(255, 255, 255, 0.1);
     }
     
-    .glow {
-      box-shadow: 
-        0 0 60px rgba(34, 197, 94, 0.2),
-        0 0 100px rgba(34, 197, 94, 0.1),
-        inset 0 0 60px rgba(34, 197, 94, 0.05);
+    .btn-secondary:hover {
+      background: rgba(255, 255, 255, 0.1);
     }
     
-    .glow-hover:hover {
-      box-shadow: 
-        0 0 80px rgba(34, 197, 94, 0.3),
-        0 0 120px rgba(34, 197, 94, 0.15);
-    }
-    
-    .float {
-      animation: float 6s ease-in-out infinite;
-    }
-    
-    .float-delayed {
-      animation: float 6s ease-in-out infinite;
-      animation-delay: -3s;
-    }
-    
-    @keyframes float {
-      0%, 100% { transform: translateY(0px) rotate(0deg); }
-      50% { transform: translateY(-20px) rotate(2deg); }
-    }
-    
-    .magnetic-btn {
-      transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    }
-    
-    .text-reveal {
-      clip-path: inset(0 100% 0 0);
-    }
-    
-    .word { 
-      display: inline-block; 
-    }
-    
-    .char {
-      display: inline-block;
-    }
-    
-    .js-loaded .word { 
-      opacity: 0;
-      transform: translateY(40px) rotateX(-40deg);
-      transform-origin: center bottom;
-    }
-    
-    .js-loaded .char {
-      opacity: 0;
-      transform: translateY(100px);
-    }
-    
-    .line-draw {
-      stroke-dasharray: 1000;
-      stroke-dashoffset: 1000;
-    }
-    
-    .pipeline-particle {
-      position: absolute;
-      width: 8px;
-      height: 8px;
-      background: linear-gradient(135deg, #22c55e, #06b6d4);
-      border-radius: 50%;
-      filter: blur(1px);
-      animation: pipeline-flow 3s linear infinite;
-    }
-    
-    @keyframes pipeline-flow {
-      0% { left: 0%; opacity: 0; }
-      10% { opacity: 1; }
-      90% { opacity: 1; }
-      100% { left: 100%; opacity: 0; }
-    }
-    
-    .typing-text::after {
-      content: '|';
-      animation: blink 1s infinite;
-      color: #22c55e;
-    }
-    
-    @keyframes blink {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0; }
-    }
-    
-    .shimmer {
-      background: linear-gradient(
-        90deg,
-        transparent 0%,
-        rgba(255, 255, 255, 0.05) 50%,
-        transparent 100%
-      );
-      background-size: 200% 100%;
-      animation: shimmer 2s infinite;
-    }
-    
-    @keyframes shimmer {
-      0% { background-position: -200% 0; }
-      100% { background-position: 200% 0; }
-    }
-    
-    .gradient-border {
-      position: relative;
-    }
-    
-    .gradient-border::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      padding: 2px;
-      background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4, #8b5cf6, #22c55e);
-      background-size: 300% 300%;
-      animation: gradient-rotate 4s linear infinite;
-      border-radius: inherit;
-      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-      -webkit-mask-composite: xor;
-      mask-composite: exclude;
-    }
-    
-    @keyframes gradient-rotate {
-      0% { background-position: 0% 50%; }
-      50% { background-position: 100% 50%; }
-      100% { background-position: 0% 50%; }
-    }
-    
-    .feature-card {
-      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    }
-    
-    .feature-card:hover {
-      transform: translateY(-10px) scale(1.02);
-      box-shadow: 
-        0 25px 50px -12px rgba(34, 197, 94, 0.15),
-        0 0 0 1px rgba(34, 197, 94, 0.2);
-    }
-    
-    .feature-card:hover .feature-icon {
-      transform: scale(1.2) rotate(10deg);
-    }
-    
-    .feature-icon {
-      transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    }
-    
-    .counter {
-      font-variant-numeric: tabular-nums;
-    }
-    
-    .scroll-indicator {
-      animation: scroll-bounce 2s ease-in-out infinite;
-    }
-    
-    @keyframes scroll-bounce {
-      0%, 100% { transform: translateY(0); opacity: 1; }
-      50% { transform: translateY(10px); opacity: 0.5; }
-    }
-    
-    .parallax-layer {
-      will-change: transform;
-    }
-    
-    .noise {
+    /* Navbar */
+    .navbar {
       position: fixed;
       top: 0;
       left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 9998;
-      opacity: 0.015;
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+      right: 0;
+      z-index: 100;
+      padding: 1.25rem 0;
+      transition: background 0.3s, padding 0.3s;
     }
     
-    .stat-card {
-      transition: all 0.4s ease;
+    .navbar.scrolled {
+      background: rgba(3, 3, 3, 0.8);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      padding: 0.75rem 0;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
     
-    .stat-card:hover {
-      transform: translateY(-5px);
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      text-decoration: none;
+      color: #fff;
     }
     
-    .stat-card:hover .stat-number {
-      transform: scale(1.1);
+    .logo-icon {
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 0.75rem;
+      background: linear-gradient(135deg, #22c55e, #10b981);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 900;
+      font-size: 0.875rem;
+      color: #000;
     }
     
-    .stat-number {
-      transition: transform 0.4s ease;
+    .logo-text {
+      font-weight: 900;
+      font-size: 1.25rem;
+      letter-spacing: -0.025em;
     }
     
-    .marquee {
-      animation: marquee 30s linear infinite;
+    .nav-links {
+      display: none;
+      gap: 2.5rem;
+      list-style: none;
     }
     
-    @keyframes marquee {
-      0% { transform: translateX(0); }
-      100% { transform: translateX(-50%); }
+    .nav-links a {
+      color: #a1a1aa;
+      text-decoration: none;
+      font-size: 0.875rem;
+      font-weight: 500;
+      transition: color 0.2s;
     }
     
-    .reveal-up {
-      opacity: 1;
+    .nav-links a:hover { color: #fff; }
+    
+    @media (min-width: 768px) {
+      .nav-links { display: flex; }
     }
     
-    .reveal-left {
-      opacity: 1;
-    }
-    
-    .reveal-right {
-      opacity: 1;
-    }
-    
-    .reveal-scale {
-      opacity: 1;
-    }
-    
-    .stagger-item {
-      opacity: 1;
-    }
-    
-    .js-loaded .reveal-up {
-      opacity: 0;
-      transform: translateY(60px);
-    }
-    
-    .js-loaded .reveal-left {
-      opacity: 0;
-      transform: translateX(-60px);
-    }
-    
-    .js-loaded .reveal-right {
-      opacity: 0;
-      transform: translateX(60px);
-    }
-    
-    .js-loaded .reveal-scale {
-      opacity: 0;
-      transform: scale(0.9);
-    }
-    
-    .js-loaded .stagger-item {
-      opacity: 0;
-      transform: translateY(40px);
-    }
-    
-    .btn-shine {
+    /* Hero */
+    .hero {
+      min-height: 100vh;
+      padding: 8rem 0 5rem;
       position: relative;
       overflow: hidden;
     }
     
-    .btn-shine::after {
-      content: '';
+    .hero-bg {
       position: absolute;
-      top: -50%;
-      left: -50%;
-      width: 200%;
-      height: 200%;
-      background: linear-gradient(
-        to right,
-        transparent 0%,
-        rgba(255, 255, 255, 0.2) 50%,
-        transparent 100%
-      );
-      transform: rotate(45deg) translateX(-100%);
-      transition: transform 0.6s;
+      inset: 0;
+      background: 
+        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(34, 197, 94, 0.12), transparent),
+        radial-gradient(ellipse 60% 40% at 80% 50%, rgba(6, 182, 212, 0.08), transparent),
+        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(139, 92, 246, 0.08), transparent);
+      pointer-events: none;
     }
     
-    .btn-shine:hover::after {
-      transform: rotate(45deg) translateX(100%);
+    .hero-grid {
+      position: absolute;
+      inset: 0;
+      background-image: 
+        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
+      background-size: 60px 60px;
+      pointer-events: none;
     }
     
-    .video-glow {
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.625rem 1.25rem;
+      border-radius: 9999px;
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: #d4d4d8;
+    }
+    
+    .badge-dot {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      background: #22c55e;
+      animation: pulse 2s infinite;
+    }
+    
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+    
+    .hero-title {
+      font-size: 3rem;
+      font-weight: 900;
+      line-height: 1;
+      letter-spacing: -0.025em;
+      margin-bottom: 1.5rem;
+    }
+    
+    @media (min-width: 768px) { .hero-title { font-size: 4.5rem; } }
+    @media (min-width: 1024px) { .hero-title { font-size: 6rem; } }
+    
+    .hero-subtitle {
+      font-size: 1.25rem;
+      color: #a1a1aa;
+      max-width: 48rem;
+      margin: 0 auto 2.5rem;
+      line-height: 1.7;
+    }
+    
+    @media (min-width: 768px) { .hero-subtitle { font-size: 1.5rem; } }
+    
+    /* Product Mockup */
+    .mockup-wrapper {
       position: relative;
+      max-width: 72rem;
+      margin: 0 auto;
+      padding: 2px;
+      border-radius: 1.5rem;
+      background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4, #8b5cf6);
+      background-size: 300% 300%;
+      animation: gradient-shift 4s ease infinite;
     }
     
-    .video-glow::before {
+    .mockup {
+      background: #0a0a0a;
+      border-radius: calc(1.5rem - 2px);
+      overflow: hidden;
+    }
+    
+    .mockup-chrome {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem 1.25rem;
+      border-bottom: 1px solid rgba(255,255,255,0.05);
+    }
+    
+    .mockup-dots {
+      display: flex;
+      gap: 0.375rem;
+    }
+    
+    .mockup-dot {
+      width: 0.75rem;
+      height: 0.75rem;
+      border-radius: 50%;
+    }
+    
+    .mockup-dot.red { background: #ef4444; }
+    .mockup-dot.yellow { background: #eab308; }
+    .mockup-dot.green { background: #22c55e; }
+    
+    .mockup-url {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.375rem 1rem;
+      background: rgba(255,255,255,0.05);
+      border-radius: 0.5rem;
+      font-size: 0.75rem;
+      color: #71717a;
+      font-family: monospace;
+    }
+    
+    .mockup-body {
+      display: flex;
+      height: 28rem;
+    }
+    
+    @media (min-width: 768px) { .mockup-body { height: 32rem; } }
+    
+    .mockup-sidebar {
+      width: 4rem;
+      border-right: 1px solid rgba(255,255,255,0.05);
+      padding: 1rem 0;
+      display: none;
+    }
+    
+    @media (min-width: 768px) { .mockup-sidebar { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } }
+    
+    .sidebar-icon {
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 0.75rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #52525b;
+      transition: background 0.2s, color 0.2s;
+    }
+    
+    .sidebar-icon.active {
+      background: rgba(34, 197, 94, 0.15);
+      color: #22c55e;
+    }
+    
+    .mockup-chat {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+    
+    .chat-messages {
+      flex: 1;
+      padding: 1.5rem;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+    
+    .message {
+      max-width: 85%;
+      padding: 0.875rem 1.25rem;
+      border-radius: 1rem;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+    
+    .message.user {
+      align-self: flex-end;
+      background: rgba(34, 197, 94, 0.15);
+      border: 1px solid rgba(34, 197, 94, 0.25);
+      border-bottom-right-radius: 0.25rem;
+    }
+    
+    .message.ai {
+      align-self: flex-start;
+      background: rgba(255,255,255,0.03);
+      border: 1px solid rgba(255,255,255,0.08);
+      border-bottom-left-radius: 0.25rem;
+      color: #d4d4d8;
+    }
+    
+    .message-action {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-top: 0.75rem;
+      padding: 0.5rem 0.75rem;
+      background: rgba(255,255,255,0.03);
+      border-radius: 0.5rem;
+      font-size: 0.75rem;
+      color: #22c55e;
+    }
+    
+    .chat-input {
+      padding: 1rem;
+      border-top: 1px solid rgba(255,255,255,0.05);
+    }
+    
+    .chat-input-inner {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.875rem 1rem;
+      background: rgba(255,255,255,0.03);
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 1rem;
+    }
+    
+    .chat-input input {
+      flex: 1;
+      background: none;
+      border: none;
+      outline: none;
+      color: #fff;
+      font-size: 0.875rem;
+    }
+    
+    .chat-input input::placeholder { color: #52525b; }
+    
+    .chat-send {
+      width: 2.25rem;
+      height: 2.25rem;
+      border-radius: 0.625rem;
+      background: #22c55e;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #000;
+      transition: background 0.2s;
+    }
+    
+    .chat-send:hover { background: #4ade80; }
+    
+    .mockup-panel {
+      width: 22rem;
+      border-left: 1px solid rgba(255,255,255,0.05);
+      display: none;
+    }
+    
+    @media (min-width: 1024px) { .mockup-panel { display: flex; flex-direction: column; } }
+    
+    .panel-tabs {
+      display: flex;
+      border-bottom: 1px solid rgba(255,255,255,0.05);
+    }
+    
+    .panel-tab {
+      flex: 1;
+      padding: 1rem;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: #52525b;
+      background: none;
+      border: none;
+      cursor: pointer;
+      transition: color 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+    }
+    
+    .panel-tab.active {
+      color: #22c55e;
+      border-bottom: 2px solid #22c55e;
+      margin-bottom: -1px;
+    }
+    
+    .panel-content {
+      flex: 1;
+      padding: 1rem;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+    
+    .property-card {
+      padding: 1.25rem;
+      background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(255,255,255,0.06);
+      border-radius: 1rem;
+      transition: border-color 0.2s, background 0.2s;
+    }
+    
+    .property-card:hover {
+      border-color: rgba(34, 197, 94, 0.3);
+      background: rgba(255,255,255,0.04);
+    }
+    
+    .property-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 0.5rem;
+    }
+    
+    .property-name {
+      font-weight: 700;
+      font-size: 0.9375rem;
+    }
+    
+    .property-price {
+      font-weight: 700;
+      color: #22c55e;
+      font-family: monospace;
+    }
+    
+    .property-details {
+      font-size: 0.75rem;
+      color: #71717a;
+      margin-bottom: 0.75rem;
+    }
+    
+    .property-tags {
+      display: flex;
+      gap: 0.5rem;
+    }
+    
+    .property-tag {
+      padding: 0.25rem 0.625rem;
+      border-radius: 0.375rem;
+      font-size: 0.6875rem;
+      font-weight: 600;
+    }
+    
+    .property-tag.match {
+      background: rgba(34, 197, 94, 0.15);
+      color: #22c55e;
+    }
+    
+    .property-tag.owner {
+      background: rgba(255,255,255,0.06);
+      color: #a1a1aa;
+    }
+    
+    /* Section Styles */
+    section {
+      padding: 6rem 0;
+    }
+    
+    @media (min-width: 768px) { section { padding: 8rem 0; } }
+    
+    .section-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      border-radius: 9999px;
+      font-size: 0.875rem;
+      font-weight: 500;
+      margin-bottom: 1.5rem;
+    }
+    
+    .section-title {
+      font-size: 2.25rem;
+      font-weight: 900;
+      line-height: 1.1;
+      margin-bottom: 1.5rem;
+      letter-spacing: -0.025em;
+    }
+    
+    @media (min-width: 768px) { .section-title { font-size: 3rem; } }
+    @media (min-width: 1024px) { .section-title { font-size: 3.75rem; } }
+    
+    .section-subtitle {
+      font-size: 1.125rem;
+      color: #a1a1aa;
+      max-width: 48rem;
+      margin: 0 auto;
+      line-height: 1.7;
+    }
+    
+    @media (min-width: 768px) { .section-subtitle { font-size: 1.25rem; } }
+    
+    /* Problem Cards */
+    .problem-card {
+      padding: 2rem;
+      border-radius: 1.5rem;
+      background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(248, 113, 113, 0.1);
+      transition: border-color 0.3s, transform 0.3s;
+    }
+    
+    .problem-card:hover {
+      border-color: rgba(248, 113, 113, 0.3);
+      transform: translateY(-4px);
+    }
+    
+    .problem-icon {
+      width: 3.5rem;
+      height: 3.5rem;
+      border-radius: 1rem;
+      background: rgba(248, 113, 113, 0.1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 1.5rem;
+      color: #f87171;
+    }
+    
+    .problem-title {
+      font-size: 1.25rem;
+      font-weight: 700;
+      margin-bottom: 0.75rem;
+    }
+    
+    .problem-text {
+      color: #a1a1aa;
+      line-height: 1.7;
+    }
+    
+    /* Pipeline */
+    .pipeline-section {
+      position: relative;
+      background: linear-gradient(180deg, transparent, rgba(34, 197, 94, 0.03), transparent);
+    }
+    
+    .pipeline-card {
+      padding: 2rem;
+      border-radius: 1.5rem;
+      background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(255,255,255,0.06);
+      position: relative;
+      transition: transform 0.3s, box-shadow 0.3s;
+    }
+    
+    .pipeline-card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 20px 40px rgba(34, 197, 94, 0.1);
+    }
+    
+    .pipeline-number {
+      position: absolute;
+      top: -1rem;
+      left: -1rem;
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 0.75rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 900;
+      color: #000;
+    }
+    
+    .pipeline-icon {
+      width: 3rem;
+      height: 3rem;
+      border-radius: 0.75rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 1rem;
+      margin-top: 0.5rem;
+    }
+    
+    .pipeline-title {
+      font-size: 1.125rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+    }
+    
+    .pipeline-text {
+      color: #a1a1aa;
+      font-size: 0.9375rem;
+      margin-bottom: 1rem;
+      line-height: 1.6;
+    }
+    
+    .pipeline-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.375rem 0.75rem;
+      background: rgba(0,0,0,0.3);
+      border-radius: 0.5rem;
+      font-size: 0.75rem;
+      color: #71717a;
+      font-family: monospace;
+    }
+    
+    .pipeline-tag-dot {
+      width: 0.375rem;
+      height: 0.375rem;
+      border-radius: 50%;
+    }
+    
+    /* Feature Cards */
+    .feature-card {
+      padding: 2rem;
+      border-radius: 1.5rem;
+      background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(255,255,255,0.06);
+      transition: transform 0.3s, border-color 0.3s;
+    }
+    
+    .feature-card:hover {
+      transform: translateY(-4px);
+      border-color: rgba(34, 197, 94, 0.2);
+    }
+    
+    .feature-icon {
+      width: 3rem;
+      height: 3rem;
+      border-radius: 0.75rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 1.25rem;
+    }
+    
+    .feature-title {
+      font-size: 1.125rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+    }
+    
+    .feature-text {
+      color: #a1a1aa;
+      font-size: 0.9375rem;
+      line-height: 1.6;
+    }
+    
+    /* How It Works */
+    .step-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1.5rem;
+      padding: 2.5rem;
+      border-radius: 1.5rem;
+      background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(255,255,255,0.06);
+    }
+    
+    @media (min-width: 1024px) {
+      .step-card {
+        flex-direction: row;
+        gap: 2.5rem;
+      }
+    }
+    
+    .step-number {
+      width: 5rem;
+      height: 5rem;
+      border-radius: 1.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 2.5rem;
+      font-weight: 900;
+      color: #000;
+      flex-shrink: 0;
+    }
+    
+    .step-title {
+      font-size: 1.5rem;
+      font-weight: 900;
+      margin-bottom: 0.75rem;
+    }
+    
+    .step-text {
+      color: #a1a1aa;
+      font-size: 1.0625rem;
+      line-height: 1.7;
+    }
+    
+    /* Pricing */
+    .pricing-card {
+      padding: 2.5rem;
+      border-radius: 1.5rem;
+      background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(255,255,255,0.06);
+      transition: transform 0.3s;
+    }
+    
+    .pricing-card:hover {
+      transform: translateY(-4px);
+    }
+    
+    .pricing-card.featured {
+      position: relative;
+      background: #0a0a0a;
+      border: 2px solid transparent;
+      background-clip: padding-box;
+    }
+    
+    .pricing-card.featured::before {
       content: '';
       position: absolute;
       inset: -2px;
-      background: linear-gradient(135deg, #22c55e, #06b6d4, #8b5cf6, #22c55e);
-      background-size: 400% 400%;
-      animation: gradient-rotate 3s linear infinite;
-      border-radius: inherit;
+      border-radius: calc(1.5rem + 2px);
+      background: linear-gradient(135deg, #22c55e, #06b6d4, #8b5cf6);
       z-index: -1;
-      filter: blur(20px);
-      opacity: 0.5;
+    }
+    
+    .pricing-badge {
+      position: absolute;
+      top: -0.875rem;
+      left: 50%;
+      transform: translateX(-50%);
+      padding: 0.375rem 1rem;
+      border-radius: 9999px;
+      background: linear-gradient(135deg, #22c55e, #06b6d4);
+      font-size: 0.75rem;
+      font-weight: 700;
+      color: #000;
+    }
+    
+    .pricing-tier {
+      font-size: 1.125rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+    }
+    
+    .pricing-price {
+      font-size: 2.75rem;
+      font-weight: 900;
+      margin-bottom: 0.25rem;
+    }
+    
+    .pricing-period {
+      font-size: 1rem;
+      color: #71717a;
+      font-weight: 500;
+    }
+    
+    .pricing-desc {
+      font-size: 0.875rem;
+      color: #71717a;
+      margin-bottom: 2rem;
+    }
+    
+    .pricing-features {
+      list-style: none;
+      margin-bottom: 2rem;
+    }
+    
+    .pricing-features li {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.625rem 0;
+      font-size: 0.9375rem;
+      color: #d4d4d8;
+    }
+    
+    .pricing-check {
+      width: 1.25rem;
+      height: 1.25rem;
+      border-radius: 50%;
+      background: rgba(34, 197, 94, 0.15);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    
+    /* CTA Section */
+    .cta-section {
+      position: relative;
+      background: linear-gradient(180deg, transparent, rgba(34, 197, 94, 0.05), transparent);
+    }
+    
+    .cta-input {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      max-width: 32rem;
+      margin: 0 auto;
+    }
+    
+    @media (min-width: 640px) {
+      .cta-input { flex-direction: row; }
+    }
+    
+    .cta-input input {
+      flex: 1;
+      padding: 1.125rem 1.5rem;
+      background: rgba(255,255,255,0.03);
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 0.75rem;
+      color: #fff;
+      font-size: 1rem;
+      outline: none;
+      transition: border-color 0.2s;
+    }
+    
+    .cta-input input:focus {
+      border-color: rgba(34, 197, 94, 0.5);
+    }
+    
+    .cta-input input::placeholder { color: #52525b; }
+    
+    /* Footer */
+    footer {
+      padding: 3rem 0;
+      border-top: 1px solid rgba(255,255,255,0.05);
+    }
+    
+    .footer-inner {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 2rem;
+    }
+    
+    @media (min-width: 1024px) {
+      .footer-inner {
+        flex-direction: row;
+        justify-content: space-between;
+      }
+    }
+    
+    .footer-links {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 2rem;
+    }
+    
+    .footer-links a {
+      color: #71717a;
+      text-decoration: none;
+      font-size: 0.875rem;
+      font-weight: 500;
+      transition: color 0.2s;
+    }
+    
+    .footer-links a:hover { color: #fff; }
+    
+    .footer-copy {
+      font-size: 0.875rem;
+      color: #52525b;
+    }
+    
+    /* Icons (inline SVG) */
+    .icon {
+      width: 1.25rem;
+      height: 1.25rem;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      fill: none;
+    }
+    
+    .icon-sm { width: 1rem; height: 1rem; }
+    .icon-lg { width: 1.5rem; height: 1.5rem; }
+    .icon-xl { width: 1.75rem; height: 1.75rem; }
+    
+    /* Animations - Only when JS loads */
+    @media (prefers-reduced-motion: no-preference) {
+      .animate-in {
+        animation: fadeInUp 0.6s ease forwards;
+      }
+      
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(30px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
     }
   </style>
 </head>
-<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden">
-  <!-- Noise overlay -->
-  <div class="noise"></div>
-  
-  <!-- Custom cursor -->
-  <div class="custom-cursor" id="cursor"></div>
-  <div class="cursor-dot" id="cursor-dot"></div>
-
+<body>
   <!-- Navbar -->
-  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
-    <div class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
-      <a href="#" class="flex items-center gap-3 group">
-        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 via-emerald-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
-          <span class="font-black text-sm text-black">CS</span>
-        </div>
-        <span class="font-black text-2xl tracking-tight">CRESYNC</span>
+  <nav class="navbar" id="navbar">
+    <div class="container flex items-center justify-between">
+      <a href="#" class="logo">
+        <div class="logo-icon">CS</div>
+        <span class="logo-text">CRESYNC</span>
       </a>
-      <div class="hidden md:flex items-center gap-10 text-sm font-medium text-zinc-400">
-        <a href="#features" class="hover:text-white transition-colors relative group">
-          Features
-          <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span>
-        </a>
-        <a href="#how-it-works" class="hover:text-white transition-colors relative group">
-          How It Works
-          <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span>
-        </a>
-        <a href="#pricing" class="hover:text-white transition-colors relative group">
-          Pricing
-          <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span>
-        </a>
-      </div>
-      <button class="magnetic-btn px-5 py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">
-        Get Early Access
-      </button>
+      <ul class="nav-links">
+        <li><a href="#features">Features</a></li>
+        <li><a href="#how-it-works">How It Works</a></li>
+        <li><a href="#pricing">Pricing</a></li>
+      </ul>
+      <button class="btn btn-primary" style="padding: 0.625rem 1.25rem; font-size: 0.875rem;">Get Early Access</button>
     </div>
   </nav>
 
-  <!-- Hero Section -->
-  <section class="min-h-screen pt-32 pb-20 px-6 relative overflow-hidden hero-gradient">
-    <!-- Animated mesh background -->
-    <div class="absolute inset-0 mesh-gradient opacity-50"></div>
+  <!-- Hero -->
+  <section class="hero">
+    <div class="hero-bg"></div>
+    <div class="hero-grid"></div>
     
-    <!-- Floating orbs -->
-    <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float parallax-layer" data-speed="0.5"></div>
-    <div class="absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed parallax-layer" data-speed="0.3"></div>
-    <div class="absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float parallax-layer" data-speed="0.7"></div>
-    
-    <!-- Grid pattern -->
-    <div class="absolute inset-0 opacity-[0.02]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 80px 80px;"></div>
-    
-    <div class="max-w-7xl mx-auto relative">
-      <!-- Badge -->
-      <div class="flex justify-center mb-8 reveal-up">
-        <div class="inline-flex items-center gap-3 px-5 py-2.5 rounded-full glass-strong text-sm font-medium text-zinc-300 shimmer">
-          <span class="relative flex h-2.5 w-2.5">
-            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
-            <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-brand-500"></span>
-          </span>
-          Now in Early Access — Limited Spots Available
+    <div class="container text-center" style="position: relative;">
+      <div class="badge glass" style="margin-bottom: 2rem;">
+        <span class="badge-dot"></span>
+        Now in Early Access — Limited Spots
+      </div>
+      
+      <h1 class="hero-title">
+        Your <span class="gradient-text">24/7 CRE</span><br>Employee
+      </h1>
+      
+      <p class="hero-subtitle">
+        Source deals. Nurture leads. Close contracts.<br>
+        <strong style="color: #fff;">All through a simple conversation.</strong>
+      </p>
+      
+      <div class="flex flex-col gap-4 justify-center" style="margin-bottom: 4rem;">
+        <div style="display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;">
+          <button class="btn btn-primary glow">
+            Start Free Trial
+            <svg class="icon" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
+          </button>
+          <button class="btn btn-secondary">
+            <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
+            Watch Demo
+          </button>
         </div>
       </div>
       
-      <!-- Main headline -->
-      <div class="text-center mb-8">
-        <h1 class="text-6xl md:text-8xl lg:text-9xl font-black tracking-tight mb-6 leading-[0.9]" id="hero-headline">
-          <span class="block hero-word">Your</span>
-          <span class="block gradient-text hero-word">24/7 CRE</span>
-          <span class="block hero-word">Employee</span>
-        </h1>
-      </div>
-      
-      <!-- Subheadline -->
-      <p class="text-xl md:text-2xl lg:text-3xl text-zinc-400 max-w-4xl mx-auto mb-12 text-center leading-relaxed reveal-up" style="animation-delay: 0.3s">
-        Source deals. Nurture leads. Close contracts.<br>
-        <span class="text-white font-semibold">All through a simple conversation.</span>
-      </p>
-      
-      <!-- CTA buttons -->
-      <div class="flex flex-col sm:flex-row gap-5 justify-center mb-16 reveal-up" style="animation-delay: 0.5s">
-        <button class="magnetic-btn group px-10 py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-2xl text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-3">
-          <span>Start Free Trial</span>
-          <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
-        </button>
-        <button class="magnetic-btn group px-10 py-5 glass-strong hover:bg-white/10 font-bold rounded-2xl text-lg transition-all flex items-center justify-center gap-3">
-          <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
-            <i data-lucide="play" class="w-5 h-5 ml-0.5"></i>
-          </div>
-          <span>Watch Demo</span>
-        </button>
-      </div>
-      
       <!-- Product Mockup -->
-      <div class="relative max-w-6xl mx-auto reveal-scale" style="animation-delay: 0.7s">
-        <!-- Glow effect behind -->
-        <div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
-        
-        <div class="gradient-border rounded-3xl glow relative">
-          <div class="bg-[#0a0a0a] rounded-3xl p-1.5">
-            <div class="bg-zinc-900/80 rounded-2xl overflow-hidden backdrop-blur-xl">
-              <!-- Window chrome -->
-              <div class="flex items-center justify-between px-5 py-4 border-b border-white/5">
-                <div class="flex items-center gap-2">
-                  <div class="w-3.5 h-3.5 rounded-full bg-red-500 hover:bg-red-400 transition-colors"></div>
-                  <div class="w-3.5 h-3.5 rounded-full bg-yellow-500 hover:bg-yellow-400 transition-colors"></div>
-                  <div class="w-3.5 h-3.5 rounded-full bg-green-500 hover:bg-green-400 transition-colors"></div>
+      <div class="mockup-wrapper glow">
+        <div class="mockup">
+          <div class="mockup-chrome">
+            <div class="mockup-dots">
+              <div class="mockup-dot red"></div>
+              <div class="mockup-dot yellow"></div>
+              <div class="mockup-dot green"></div>
+            </div>
+            <div class="mockup-url">
+              <svg class="icon-sm" viewBox="0 0 24 24"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+              app.cresync.com
+            </div>
+            <div style="width: 50px;"></div>
+          </div>
+          
+          <div class="mockup-body">
+            <div class="mockup-sidebar">
+              <div class="sidebar-icon active">
+                <svg class="icon" viewBox="0 0 24 24"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
+              </div>
+              <div class="sidebar-icon">
+                <svg class="icon" viewBox="0 0 24 24"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/></svg>
+              </div>
+              <div class="sidebar-icon">
+                <svg class="icon" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+              </div>
+              <div class="sidebar-icon">
+                <svg class="icon" viewBox="0 0 24 24"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
+              </div>
+            </div>
+            
+            <div class="mockup-chat">
+              <div class="chat-messages">
+                <div class="message user">Find me multi-family properties in Austin, TX with 20+ units under $5M</div>
+                <div class="message ai">Found 23 properties matching your criteria. I've pulled owner contact info and property details for each. Ready to start outreach?</div>
+                <div class="message user">Yes, draft a personalized email sequence for the top 10</div>
+                <div class="message ai">
+                  Done! I've created a 5-touch email sequence personalized to each property owner. The campaign is ready to launch in GHL.
+                  <div class="message-action">
+                    <svg class="icon-sm" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+                    Outreach campaign created → View in GHL
+                  </div>
                 </div>
-                <div class="flex items-center gap-2 px-4 py-1.5 rounded-lg bg-white/5 text-sm text-zinc-500 font-mono">
-                  <i data-lucide="lock" class="w-3 h-3"></i>
-                  app.cresync.com
-                </div>
-                <div class="w-20"></div>
               </div>
               
-              <!-- App interface -->
-              <div class="flex h-[550px]">
-                <!-- Sidebar -->
-                <div class="w-16 border-r border-white/5 flex flex-col items-center py-4 gap-4">
-                  <div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400">
-                    <i data-lucide="message-square" class="w-5 h-5"></i>
+              <div class="chat-input">
+                <div class="chat-input-inner">
+                  <input type="text" placeholder="Ask CRESYNC anything...">
+                  <button class="chat-send">
+                    <svg class="icon-sm" viewBox="0 0 24 24"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+            
+            <div class="mockup-panel">
+              <div class="panel-tabs">
+                <button class="panel-tab active">
+                  <svg class="icon-sm" viewBox="0 0 24 24"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/></svg>
+                  Properties
+                </button>
+                <button class="panel-tab">
+                  <svg class="icon-sm" viewBox="0 0 24 24"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
+                  Campaign
+                </button>
+              </div>
+              
+              <div class="panel-content">
+                <div class="property-card">
+                  <div class="property-header">
+                    <div>
+                      <div class="property-name">Riverside Apartments</div>
+                      <div class="property-details">24 units • Austin, TX 78701</div>
+                    </div>
+                    <div class="property-price">$4.2M</div>
                   </div>
-                  <div class="w-10 h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
-                    <i data-lucide="building-2" class="w-5 h-5"></i>
-                  </div>
-                  <div class="w-10 h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
-                    <i data-lucide="users" class="w-5 h-5"></i>
-                  </div>
-                  <div class="w-10 h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
-                    <i data-lucide="file-text" class="w-5 h-5"></i>
-                  </div>
-                  <div class="w-10 h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
-                    <i data-lucide="bar-chart-3" class="w-5 h-5"></i>
+                  <div class="property-tags">
+                    <span class="property-tag match">98% Match</span>
+                    <span class="property-tag owner">Owner Direct</span>
                   </div>
                 </div>
                 
-                <!-- Chat panel -->
-                <div class="flex-1 flex flex-col">
-                  <div class="flex-1 p-6 space-y-5 overflow-hidden" id="chat-demo">
-                    <!-- Messages will be animated in -->
-                  </div>
-                  
-                  <!-- Input -->
-                  <div class="p-4 border-t border-white/5">
-                    <div class="glass-strong rounded-2xl px-5 py-4 flex items-center gap-4">
-                      <div class="flex items-center gap-2">
-                        <button class="w-8 h-8 rounded-lg hover:bg-white/10 flex items-center justify-center text-zinc-500 transition-colors">
-                          <i data-lucide="paperclip" class="w-4 h-4"></i>
-                        </button>
-                        <button class="w-8 h-8 rounded-lg hover:bg-white/10 flex items-center justify-center text-zinc-500 transition-colors">
-                          <i data-lucide="mic" class="w-4 h-4"></i>
-                        </button>
-                      </div>
-                      <input type="text" placeholder="Ask CRESYNC anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-300 placeholder:text-zinc-600">
-                      <button class="w-10 h-10 rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors hover:scale-105 active:scale-95">
-                        <i data-lucide="arrow-up" class="w-5 h-5 text-black"></i>
-                      </button>
+                <div class="property-card">
+                  <div class="property-header">
+                    <div>
+                      <div class="property-name">Oak Valley Complex</div>
+                      <div class="property-details">28 units • Austin, TX 78745</div>
                     </div>
+                    <div class="property-price">$3.8M</div>
+                  </div>
+                  <div class="property-tags">
+                    <span class="property-tag match">94% Match</span>
+                    <span class="property-tag owner">LLC Owner</span>
                   </div>
                 </div>
                 
-                <!-- Tool panels -->
-                <div class="w-96 hidden lg:flex flex-col border-l border-white/5">
-                  <!-- Tabs -->
-                  <div class="flex border-b border-white/5">
-                    <button class="flex-1 px-5 py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
-                      <i data-lucide="building-2" class="w-4 h-4"></i>
-                      Properties
-                      <span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">23</span>
-                    </button>
-                    <button class="flex-1 px-5 py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
-                      <i data-lucide="mail" class="w-4 h-4"></i>
-                      Campaign
-                    </button>
-                    <button class="flex-1 px-5 py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
-                      <i data-lucide="file-signature" class="w-4 h-4"></i>
-                      LOI
-                    </button>
+                <div class="property-card">
+                  <div class="property-header">
+                    <div>
+                      <div class="property-name">Sunset Ridge</div>
+                      <div class="property-details">32 units • Austin, TX 78702</div>
+                    </div>
+                    <div class="property-price">$4.9M</div>
                   </div>
-                  
-                  <!-- Property cards -->
-                  <div class="flex-1 p-4 space-y-3 overflow-auto">
-                    <div class="glass rounded-2xl p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30" id="property-1">
-                      <div class="flex items-start justify-between mb-3">
-                        <div>
-                          <h4 class="font-bold text-base group-hover:text-brand-400 transition-colors">Riverside Apartments</h4>
-                          <p class="text-xs text-zinc-500">24 units • Austin, TX 78701</p>
-                        </div>
-                        <span class="text-lg font-bold text-brand-400 font-mono">$4.2M</span>
-                      </div>
-                      <div class="flex gap-2 mb-3">
-                        <span class="px-2.5 py-1 rounded-lg bg-brand-500/15 text-brand-400 text-xs font-medium">98% Match</span>
-                        <span class="px-2.5 py-1 rounded-lg bg-zinc-800 text-zinc-400 text-xs font-medium">Owner Direct</span>
-                      </div>
-                      <div class="flex items-center justify-between text-xs text-zinc-500">
-                        <span>Built 2018 • 6.2% Cap</span>
-                        <div class="flex items-center gap-1 text-brand-400 opacity-0 group-hover:opacity-100 transition-opacity">
-                          <span>View Details</span>
-                          <i data-lucide="arrow-right" class="w-3 h-3"></i>
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div class="glass rounded-2xl p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30" id="property-2">
-                      <div class="flex items-start justify-between mb-3">
-                        <div>
-                          <h4 class="font-bold text-base group-hover:text-brand-400 transition-colors">Oak Valley Complex</h4>
-                          <p class="text-xs text-zinc-500">28 units • Austin, TX 78745</p>
-                        </div>
-                        <span class="text-lg font-bold text-brand-400 font-mono">$3.8M</span>
-                      </div>
-                      <div class="flex gap-2 mb-3">
-                        <span class="px-2.5 py-1 rounded-lg bg-brand-500/15 text-brand-400 text-xs font-medium">94% Match</span>
-                        <span class="px-2.5 py-1 rounded-lg bg-zinc-800 text-zinc-400 text-xs font-medium">LLC Owner</span>
-                      </div>
-                      <div class="flex items-center justify-between text-xs text-zinc-500">
-                        <span>Built 2015 • 6.8% Cap</span>
-                        <div class="flex items-center gap-1 text-brand-400 opacity-0 group-hover:opacity-100 transition-opacity">
-                          <span>View Details</span>
-                          <i data-lucide="arrow-right" class="w-3 h-3"></i>
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div class="glass rounded-2xl p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30" id="property-3">
-                      <div class="flex items-start justify-between mb-3">
-                        <div>
-                          <h4 class="font-bold text-base group-hover:text-brand-400 transition-colors">Sunset Ridge</h4>
-                          <p class="text-xs text-zinc-500">32 units • Austin, TX 78702</p>
-                        </div>
-                        <span class="text-lg font-bold text-brand-400 font-mono">$4.9M</span>
-                      </div>
-                      <div class="flex gap-2 mb-3">
-                        <span class="px-2.5 py-1 rounded-lg bg-yellow-500/15 text-yellow-400 text-xs font-medium">87% Match</span>
-                        <span class="px-2.5 py-1 rounded-lg bg-zinc-800 text-zinc-400 text-xs font-medium">Trust Owner</span>
-                      </div>
-                      <div class="flex items-center justify-between text-xs text-zinc-500">
-                        <span>Built 2020 • 5.9% Cap</span>
-                        <div class="flex items-center gap-1 text-brand-400 opacity-0 group-hover:opacity-100 transition-opacity">
-                          <span>View Details</span>
-                          <i data-lucide="arrow-right" class="w-3 h-3"></i>
-                        </div>
-                      </div>
-                    </div>
+                  <div class="property-tags">
+                    <span class="property-tag match" style="background: rgba(234, 179, 8, 0.15); color: #eab308;">87% Match</span>
+                    <span class="property-tag owner">Trust Owner</span>
                   </div>
                 </div>
               </div>
@@ -662,340 +1169,202 @@
           </div>
         </div>
       </div>
-      
-      <!-- Scroll indicator -->
-      <div class="flex justify-center mt-16">
-        <div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
-          <span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
-          <i data-lucide="chevron-down" class="w-5 h-5"></i>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Stats Bar -->
-  <section class="py-12 px-6 border-y border-white/5 relative overflow-hidden">
-    <div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
-    <div class="max-w-7xl mx-auto relative">
-      <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
-        <div class="stat-card text-center">
-          <div class="stat-number text-4xl md:text-5xl font-black text-brand-400 mb-2 counter" data-target="10000">0</div>
-          <div class="text-sm text-zinc-500 font-medium">Properties Sourced</div>
-        </div>
-        <div class="stat-card text-center">
-          <div class="stat-number text-4xl md:text-5xl font-black text-cyan-400 mb-2">$<span class="counter" data-target="2">0</span>B+</div>
-          <div class="text-sm text-zinc-500 font-medium">Deal Volume</div>
-        </div>
-        <div class="stat-card text-center">
-          <div class="stat-number text-4xl md:text-5xl font-black text-violet-400 mb-2 counter" data-target="500">0</div>
-          <div class="text-sm text-zinc-500 font-medium">Active Agents</div>
-        </div>
-        <div class="stat-card text-center">
-          <div class="stat-number text-4xl md:text-5xl font-black text-emerald-400 mb-2"><span class="counter" data-target="40">0</span>hrs</div>
-          <div class="text-sm text-zinc-500 font-medium">Saved per Week</div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Powered By Marquee -->
-  <section class="py-10 border-b border-white/5 overflow-hidden">
-    <div class="flex whitespace-nowrap">
-      <div class="marquee flex items-center gap-16">
-        <span class="text-2xl font-bold text-zinc-700">Reonomy</span>
-        <span class="text-zinc-800">●</span>
-        <span class="text-2xl font-bold text-zinc-700">GoHighLevel</span>
-        <span class="text-zinc-800">●</span>
-        <span class="text-2xl font-bold text-zinc-700">Twilio</span>
-        <span class="text-zinc-800">●</span>
-        <span class="text-2xl font-bold text-zinc-700">OpenAI</span>
-        <span class="text-zinc-800">●</span>
-        <span class="text-2xl font-bold text-zinc-700">Anthropic</span>
-        <span class="text-zinc-800">●</span>
-        <span class="text-2xl font-bold text-zinc-700">Stripe</span>
-        <span class="text-zinc-800">●</span>
-        <span class="text-2xl font-bold text-zinc-700">Reonomy</span>
-        <span class="text-zinc-800">●</span>
-        <span class="text-2xl font-bold text-zinc-700">GoHighLevel</span>
-        <span class="text-zinc-800">●</span>
-        <span class="text-2xl font-bold text-zinc-700">Twilio</span>
-        <span class="text-zinc-800">●</span>
-        <span class="text-2xl font-bold text-zinc-700">OpenAI</span>
-        <span class="text-zinc-800">●</span>
-        <span class="text-2xl font-bold text-zinc-700">Anthropic</span>
-        <span class="text-zinc-800">●</span>
-        <span class="text-2xl font-bold text-zinc-700">Stripe</span>
-        <span class="text-zinc-800">●</span>
-      </div>
     </div>
   </section>
 
   <!-- Problem Section -->
-  <section class="py-32 px-6 relative">
-    <div class="max-w-6xl mx-auto">
-      <div class="text-center mb-20">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-red-400 mb-6 reveal-up">
-          <i data-lucide="alert-triangle" class="w-4 h-4"></i>
+  <section style="padding-top: 4rem;">
+    <div class="container">
+      <div class="text-center" style="margin-bottom: 4rem;">
+        <div class="section-badge glass" style="color: #f87171;">
+          <svg class="icon-sm" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
           The Problem
         </div>
-        <h2 class="text-4xl md:text-6xl lg:text-7xl font-black mb-8 reveal-up">
-          The CRE Tech Stack<br>is a <span class="text-red-400">Nightmare</span>
-        </h2>
-        <p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
-          You didn't become a CRE agent to fight with software integrations.
-        </p>
+        <h2 class="section-title">The CRE Tech Stack is a <span class="text-red">Nightmare</span></h2>
+        <p class="section-subtitle">You didn't become a CRE agent to fight with software integrations.</p>
       </div>
       
-      <div class="grid md:grid-cols-3 gap-8">
-        <div class="glass rounded-3xl p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
-          <div class="w-16 h-16 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="unplug" class="w-8 h-8 text-red-400"></i>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div class="problem-card">
+          <div class="problem-icon">
+            <svg class="icon-xl" viewBox="0 0 24 24"><path d="m19 5-7 7-7-7"/><path d="m19 12-7 7-7-7"/></svg>
           </div>
-          <h3 class="font-bold text-2xl mb-4">Integration Hell</h3>
-          <p class="text-zinc-400 text-lg leading-relaxed">Reonomy doesn't talk to GHL. GHL doesn't talk to your spreadsheets. You're the integration layer.</p>
+          <h3 class="problem-title">Integration Hell</h3>
+          <p class="problem-text">Reonomy doesn't talk to GHL. GHL doesn't talk to your spreadsheets. You're the integration layer.</p>
         </div>
         
-        <div class="glass rounded-3xl p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
-          <div class="w-16 h-16 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="brain" class="w-8 h-8 text-red-400"></i>
+        <div class="problem-card">
+          <div class="problem-icon">
+            <svg class="icon-xl" viewBox="0 0 24 24"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M17.599 6.5a3 3 0 0 0 .399-1.375"/><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"/><path d="M3.477 10.896a4 4 0 0 1 .585-.396"/><path d="M19.938 10.5a4 4 0 0 1 .585.396"/><path d="M6 18a4 4 0 0 1-1.967-.516"/><path d="M19.967 17.484A4 4 0 0 1 18 18"/></svg>
           </div>
-          <h3 class="font-bold text-2xl mb-4">Cognitive Overload</h3>
-          <p class="text-zinc-400 text-lg leading-relaxed">5 different UIs. 5 different workflows. 5 different learning curves. Your brain is fried by noon.</p>
+          <h3 class="problem-title">Cognitive Overload</h3>
+          <p class="problem-text">5 different UIs. 5 different workflows. 5 different learning curves. Your brain is fried by noon.</p>
         </div>
         
-        <div class="glass rounded-3xl p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
-          <div class="w-16 h-16 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="clock" class="w-8 h-8 text-red-400"></i>
+        <div class="problem-card">
+          <div class="problem-icon">
+            <svg class="icon-xl" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
           </div>
-          <h3 class="font-bold text-2xl mb-4">Time Vampire</h3>
-          <p class="text-zinc-400 text-lg leading-relaxed">Copy-paste. Tab-switch. Manual entry. Context-switch. Repeat. Hours vanish into the void.</p>
+          <h3 class="problem-title">Time Vampire</h3>
+          <p class="problem-text">Copy-paste. Tab-switch. Manual entry. Context-switch. Repeat. Hours vanish into the void.</p>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Solution Section -->
-  <section class="py-32 px-6 relative overflow-hidden">
-    <!-- Background -->
-    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
-    <div class="absolute inset-0" style="background: radial-gradient(ellipse 100% 100% at 50% 100%, rgba(34, 197, 94, 0.1), transparent);"></div>
-    
-    <div class="max-w-6xl mx-auto relative">
-      <div class="text-center mb-20">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-brand-400 mb-6 reveal-up">
-          <i data-lucide="sparkles" class="w-4 h-4"></i>
+  <!-- Pipeline Section -->
+  <section class="pipeline-section">
+    <div class="container">
+      <div class="text-center" style="margin-bottom: 4rem;">
+        <div class="section-badge glass" style="color: #22c55e;">
+          <svg class="icon-sm" viewBox="0 0 24 24"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
           The Solution
         </div>
-        <h2 class="text-4xl md:text-6xl lg:text-7xl font-black mb-8 reveal-up">
-          One Conversation.<br><span class="gradient-text">Complete Pipeline.</span>
-        </h2>
-        <p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
-          CRESYNC is your AI employee that manages your entire tech stack through natural conversation.
-        </p>
+        <h2 class="section-title">One Conversation. <span class="gradient-text">Complete Pipeline.</span></h2>
+        <p class="section-subtitle">CRESYNC orchestrates your entire deal flow through a simple chat interface.</p>
       </div>
       
-      <!-- Pipeline Visualization -->
-      <div class="relative mb-20">
-        <!-- Connection line with particles -->
-        <div class="hidden lg:block absolute top-1/2 left-0 right-0 h-1 bg-gradient-to-r from-brand-500 via-cyan-500 to-violet-500 opacity-30 rounded-full" style="transform: translateY(-50%);" id="pipeline-line">
-          <div class="pipeline-particle" style="animation-delay: 0s;"></div>
-          <div class="pipeline-particle" style="animation-delay: 0.75s;"></div>
-          <div class="pipeline-particle" style="animation-delay: 1.5s;"></div>
-          <div class="pipeline-particle" style="animation-delay: 2.25s;"></div>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div class="pipeline-card">
+          <div class="pipeline-number" style="background: linear-gradient(135deg, #22c55e, #10b981);">1</div>
+          <div class="pipeline-icon" style="background: rgba(34, 197, 94, 0.1); color: #22c55e;">
+            <svg class="icon-lg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+          </div>
+          <h3 class="pipeline-title">Source</h3>
+          <p class="pipeline-text">Pull targeted leads with owner info, financials, and property details.</p>
+          <span class="pipeline-tag"><span class="pipeline-tag-dot" style="background: #22c55e;"></span> Reonomy</span>
         </div>
         
-        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
-          <div class="glass rounded-3xl p-8 relative glow-hover transition-all group feature-card stagger-item">
-            <div class="absolute -top-4 -left-4 w-12 h-12 rounded-2xl bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center text-black font-black text-xl shadow-lg shadow-brand-500/30">1</div>
-            <div class="w-14 h-14 rounded-2xl bg-brand-500/10 flex items-center justify-center mb-6 mt-4 feature-icon">
-              <i data-lucide="search" class="w-7 h-7 text-brand-400"></i>
-            </div>
-            <h3 class="font-bold text-xl mb-3">Source</h3>
-            <p class="text-zinc-400 mb-4">Pull targeted leads with owner info, financials, and property details.</p>
-            <span class="inline-flex items-center gap-2 text-xs text-zinc-600 font-mono bg-zinc-900/50 px-3 py-1.5 rounded-lg">
-              <span class="w-1.5 h-1.5 rounded-full bg-brand-500"></span>
-              Reonomy
-            </span>
+        <div class="pipeline-card">
+          <div class="pipeline-number" style="background: linear-gradient(135deg, #10b981, #06b6d4);">2</div>
+          <div class="pipeline-icon" style="background: rgba(16, 185, 129, 0.1); color: #10b981;">
+            <svg class="icon-lg" viewBox="0 0 24 24"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg>
           </div>
-          
-          <div class="glass rounded-3xl p-8 relative glow-hover transition-all group feature-card stagger-item">
-            <div class="absolute -top-4 -left-4 w-12 h-12 rounded-2xl bg-gradient-to-br from-emerald-500 to-cyan-400 flex items-center justify-center text-black font-black text-xl shadow-lg shadow-emerald-500/30">2</div>
-            <div class="w-14 h-14 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-6 mt-4 feature-icon">
-              <i data-lucide="messages-square" class="w-7 h-7 text-emerald-400"></i>
-            </div>
-            <h3 class="font-bold text-xl mb-3">Nurture</h3>
-            <p class="text-zinc-400 mb-4">Multi-channel outreach with AI voice, drip campaigns, and auto follow-ups.</p>
-            <span class="inline-flex items-center gap-2 text-xs text-zinc-600 font-mono bg-zinc-900/50 px-3 py-1.5 rounded-lg">
-              <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
-              GoHighLevel
-            </span>
+          <h3 class="pipeline-title">Nurture</h3>
+          <p class="pipeline-text">Multi-channel outreach with AI voice, drip campaigns, and auto follow-ups.</p>
+          <span class="pipeline-tag"><span class="pipeline-tag-dot" style="background: #10b981;"></span> GoHighLevel</span>
+        </div>
+        
+        <div class="pipeline-card">
+          <div class="pipeline-number" style="background: linear-gradient(135deg, #06b6d4, #3b82f6);">3</div>
+          <div class="pipeline-icon" style="background: rgba(6, 182, 212, 0.1); color: #06b6d4;">
+            <svg class="icon-lg" viewBox="0 0 24 24"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M12 18v-6"/><path d="m9 15 3 3 3-3"/></svg>
           </div>
-          
-          <div class="glass rounded-3xl p-8 relative glow-hover transition-all group feature-card stagger-item">
-            <div class="absolute -top-4 -left-4 w-12 h-12 rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center text-black font-black text-xl shadow-lg shadow-cyan-500/30">3</div>
-            <div class="w-14 h-14 rounded-2xl bg-cyan-500/10 flex items-center justify-center mb-6 mt-4 feature-icon">
-              <i data-lucide="file-signature" class="w-7 h-7 text-cyan-400"></i>
-            </div>
-            <h3 class="font-bold text-xl mb-3">Close</h3>
-            <p class="text-zinc-400 mb-4">Generate professional LOIs instantly and turn appointments into contracts.</p>
-            <span class="inline-flex items-center gap-2 text-xs text-zinc-600 font-mono bg-zinc-900/50 px-3 py-1.5 rounded-lg">
-              <span class="w-1.5 h-1.5 rounded-full bg-cyan-500"></span>
-              LOI Generator
-            </span>
-          </div>
-          
-          <div class="glass rounded-3xl p-8 relative glow-hover transition-all group feature-card stagger-item">
-            <div class="absolute -top-4 -left-4 w-12 h-12 rounded-2xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center text-black font-black text-xl shadow-lg shadow-violet-500/30">4</div>
-            <div class="w-14 h-14 rounded-2xl bg-violet-500/10 flex items-center justify-center mb-6 mt-4 feature-icon">
-              <i data-lucide="calculator" class="w-7 h-7 text-violet-400"></i>
-            </div>
-            <h3 class="font-bold text-xl mb-3">Validate</h3>
-            <p class="text-zinc-400 mb-4">Run full underwriting analysis to ensure every deal makes financial sense.</p>
-            <span class="inline-flex items-center gap-2 text-xs text-zinc-600 font-mono bg-zinc-900/50 px-3 py-1.5 rounded-lg">
-              <span class="w-1.5 h-1.5 rounded-full bg-violet-500"></span>
-              Underwriting Tool
-            </span>
+          <h3 class="pipeline-title">Close</h3>
+          <p class="pipeline-text">Generate professional LOIs instantly and turn appointments into contracts.</p>
+          <span class="pipeline-tag"><span class="pipeline-tag-dot" style="background: #06b6d4;"></span> LOI Generator</span>
+        </div>
+        
+        <div class="pipeline-card">
+          <div class="pipeline-number" style="background: linear-gradient(135deg, #8b5cf6, #a855f7);">4</div>
+          <div class="pipeline-icon" style="background: rgba(139, 92, 246, 0.1); color: #8b5cf6;">
+            <svg class="icon-lg" viewBox="0 0 24 24"><rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" x2="16" y1="6" y2="6"/><line x1="16" x2="16" y1="14" y2="18"/><path d="M16 10h.01"/><path d="M12 10h.01"/><path d="M8 10h.01"/><path d="M12 14h.01"/><path d="M8 14h.01"/><path d="M12 18h.01"/><path d="M8 18h.01"/></svg>
           </div>
+          <h3 class="pipeline-title">Validate</h3>
+          <p class="pipeline-text">Run full underwriting analysis to ensure every deal makes financial sense.</p>
+          <span class="pipeline-tag"><span class="pipeline-tag-dot" style="background: #8b5cf6;"></span> Underwriting</span>
         </div>
       </div>
     </div>
   </section>
 
   <!-- Features Section -->
-  <section id="features" class="py-32 px-6 relative">
-    <div class="max-w-7xl mx-auto">
-      <div class="text-center mb-20">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-brand-400 mb-6 reveal-up">
-          <i data-lucide="layers" class="w-4 h-4"></i>
+  <section id="features">
+    <div class="container">
+      <div class="text-center" style="margin-bottom: 4rem;">
+        <div class="section-badge glass" style="color: #22c55e;">
+          <svg class="icon-sm" viewBox="0 0 24 24"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></svg>
           Features
         </div>
-        <h2 class="text-4xl md:text-6xl lg:text-7xl font-black mb-8 reveal-up">
-          Everything to<br><span class="gradient-text">Dominate CRE</span>
-        </h2>
-        <p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
-          A complete toolkit unified under one conversational interface.
-        </p>
+        <h2 class="section-title">Everything to <span class="gradient-text">Dominate CRE</span></h2>
+        <p class="section-subtitle">A complete toolkit unified under one conversational interface.</p>
       </div>
       
-      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <div class="glass rounded-3xl p-8 feature-card stagger-item group">
-          <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-emerald-500/20 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="database" class="w-7 h-7 text-brand-400"></i>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div class="feature-card">
+          <div class="feature-icon" style="background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(16,185,129,0.15)); color: #22c55e;">
+            <svg class="icon-lg" viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/></svg>
           </div>
-          <h3 class="font-bold text-xl mb-3 group-hover:text-brand-400 transition-colors">Lead Sourcing</h3>
-          <p class="text-zinc-400">Pull property data and owner contacts with natural language. "Find me retail centers in Dallas under $5M."</p>
+          <h3 class="feature-title">Lead Sourcing</h3>
+          <p class="feature-text">Pull property data and owner contacts with natural language queries.</p>
         </div>
         
-        <div class="glass rounded-3xl p-8 feature-card stagger-item group">
-          <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="mail" class="w-7 h-7 text-cyan-400"></i>
+        <div class="feature-card">
+          <div class="feature-icon" style="background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(59,130,246,0.15)); color: #06b6d4;">
+            <svg class="icon-lg" viewBox="0 0 24 24"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
           </div>
-          <h3 class="font-bold text-xl mb-3 group-hover:text-cyan-400 transition-colors">Multi-Channel Outreach</h3>
-          <p class="text-zinc-400">Email, SMS, WhatsApp, social DMs — orchestrate every channel from one conversation.</p>
+          <h3 class="feature-title">Multi-Channel Outreach</h3>
+          <p class="feature-text">Email, SMS, WhatsApp, social DMs — all from one conversation.</p>
         </div>
         
-        <div class="glass rounded-3xl p-8 feature-card stagger-item group">
-          <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="bot" class="w-7 h-7 text-violet-400"></i>
+        <div class="feature-card">
+          <div class="feature-icon" style="background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(168,85,247,0.15)); color: #8b5cf6;">
+            <svg class="icon-lg" viewBox="0 0 24 24"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
           </div>
-          <h3 class="font-bold text-xl mb-3 group-hover:text-violet-400 transition-colors">AI Voice & Text</h3>
-          <p class="text-zinc-400">Automated follow-ups, appointment setting, and lead qualification running 24/7.</p>
+          <h3 class="feature-title">AI Voice & Text</h3>
+          <p class="feature-text">Automated follow-ups, appointment setting, and lead qualification 24/7.</p>
         </div>
         
-        <div class="glass rounded-3xl p-8 feature-card stagger-item group">
-          <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="zap" class="w-7 h-7 text-orange-400"></i>
+        <div class="feature-card">
+          <div class="feature-icon" style="background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(239,68,68,0.15)); color: #f97316;">
+            <svg class="icon-lg" viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
           </div>
-          <h3 class="font-bold text-xl mb-3 group-hover:text-orange-400 transition-colors">Drip Campaigns</h3>
-          <p class="text-zinc-400">Set up automated nurture sequences that run on autopilot while you focus on closing.</p>
+          <h3 class="feature-title">Drip Campaigns</h3>
+          <p class="feature-text">Set up automated nurture sequences that run on autopilot.</p>
         </div>
         
-        <div class="glass rounded-3xl p-8 feature-card stagger-item group">
-          <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="file-text" class="w-7 h-7 text-pink-400"></i>
+        <div class="feature-card">
+          <div class="feature-icon" style="background: linear-gradient(135deg, rgba(236,72,153,0.15), rgba(244,63,94,0.15)); color: #ec4899;">
+            <svg class="icon-lg" viewBox="0 0 24 24"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" x2="8" y1="13" y2="13"/><line x1="16" x2="8" y1="17" y2="17"/><line x1="10" x2="8" y1="9" y2="9"/></svg>
           </div>
-          <h3 class="font-bold text-xl mb-3 group-hover:text-pink-400 transition-colors">LOI Generation</h3>
-          <p class="text-zinc-400">Draft professional Letters of Intent in seconds with deal-specific terms and conditions.</p>
+          <h3 class="feature-title">LOI Generation</h3>
+          <p class="feature-text">Draft professional Letters of Intent in seconds with deal-specific terms.</p>
         </div>
         
-        <div class="glass rounded-3xl p-8 feature-card stagger-item group">
-          <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="bar-chart-3" class="w-7 h-7 text-emerald-400"></i>
+        <div class="feature-card">
+          <div class="feature-icon" style="background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(20,184,166,0.15)); color: #10b981;">
+            <svg class="icon-lg" viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg>
           </div>
-          <h3 class="font-bold text-xl mb-3 group-hover:text-emerald-400 transition-colors">Deal Underwriting</h3>
-          <p class="text-zinc-400">Full financial analysis — cap rates, cash-on-cash, IRR projections — instantly.</p>
-        </div>
-        
-        <div class="glass rounded-3xl p-8 feature-card stagger-item group">
-          <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-indigo-500/20 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="users" class="w-7 h-7 text-blue-400"></i>
-          </div>
-          <h3 class="font-bold text-xl mb-3 group-hover:text-blue-400 transition-colors">CRM & Pipeline</h3>
-          <p class="text-zinc-400">Track every contact, deal, and touchpoint without ever leaving the chat interface.</p>
-        </div>
-        
-        <div class="glass rounded-3xl p-8 feature-card stagger-item group">
-          <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-yellow-500/20 to-amber-500/20 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="repeat" class="w-7 h-7 text-yellow-400"></i>
-          </div>
-          <h3 class="font-bold text-xl mb-3 group-hover:text-yellow-400 transition-colors">Referral Network</h3>
-          <p class="text-zinc-400">Automated check-ins with past clients. Build a referral engine that compounds over time.</p>
-        </div>
-        
-        <div class="glass rounded-3xl p-8 feature-card stagger-item group">
-          <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-lime-500/20 to-green-500/20 flex items-center justify-center mb-6 feature-icon">
-            <i data-lucide="globe" class="w-7 h-7 text-lime-400"></i>
-          </div>
-          <h3 class="font-bold text-xl mb-3 group-hover:text-lime-400 transition-colors">SEO & Content</h3>
-          <p class="text-zinc-400">Generate market reports and blog content to build your online presence and attract inbound leads.</p>
+          <h3 class="feature-title">Deal Underwriting</h3>
+          <p class="feature-text">Full financial analysis — cap rates, cash-on-cash, IRR projections.</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- How It Works -->
-  <section id="how-it-works" class="py-32 px-6 relative overflow-hidden">
-    <div class="absolute inset-0 mesh-gradient opacity-20"></div>
-    
-    <div class="max-w-5xl mx-auto relative">
-      <div class="text-center mb-20">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-brand-400 mb-6 reveal-up">
-          <i data-lucide="play-circle" class="w-4 h-4"></i>
+  <section id="how-it-works" class="pipeline-section">
+    <div class="container">
+      <div class="text-center" style="margin-bottom: 4rem;">
+        <div class="section-badge glass" style="color: #22c55e;">
+          <svg class="icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
           How It Works
         </div>
-        <h2 class="text-4xl md:text-6xl lg:text-7xl font-black mb-8 reveal-up">
-          Three Steps to<br><span class="gradient-text">Transform Your Business</span>
-        </h2>
+        <h2 class="section-title">Three Steps to <span class="gradient-text">Transform Your Business</span></h2>
       </div>
       
-      <div class="space-y-8">
-        <div class="flex flex-col lg:flex-row items-center gap-10 glass rounded-3xl p-10 feature-card stagger-item">
-          <div class="w-24 h-24 rounded-3xl bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
-            <span class="text-5xl font-black text-black">1</span>
-          </div>
+      <div class="grid grid-cols-1 gap-6" style="max-width: 56rem; margin: 0 auto;">
+        <div class="step-card">
+          <div class="step-number" style="background: linear-gradient(135deg, #22c55e, #10b981);">1</div>
           <div>
-            <h3 class="text-3xl font-black mb-4">Just Text What You Need</h3>
-            <p class="text-zinc-400 text-xl leading-relaxed">"Find me multi-family properties in Austin under $5M with motivated sellers." CRESYNC understands natural language and knows exactly which tools to orchestrate.</p>
+            <h3 class="step-title">Just Text What You Need</h3>
+            <p class="step-text">"Find me multi-family properties in Austin under $5M with motivated sellers." CRESYNC understands natural language and knows exactly which tools to orchestrate.</p>
           </div>
         </div>
         
-        <div class="flex flex-col lg:flex-row items-center gap-10 glass rounded-3xl p-10 feature-card stagger-item">
-          <div class="w-24 h-24 rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
-            <span class="text-5xl font-black text-black">2</span>
-          </div>
+        <div class="step-card">
+          <div class="step-number" style="background: linear-gradient(135deg, #06b6d4, #3b82f6);">2</div>
           <div>
-            <h3 class="text-3xl font-black mb-4">Watch It Work</h3>
-            <p class="text-zinc-400 text-xl leading-relaxed">CRESYNC pulls data from Reonomy, drafts outreach sequences in GHL, generates LOIs, runs underwriting — all visible in real-time through interactive panels.</p>
+            <h3 class="step-title">Watch It Work</h3>
+            <p class="step-text">CRESYNC pulls data from Reonomy, drafts outreach sequences in GHL, generates LOIs, runs underwriting — all visible in real-time through interactive panels.</p>
           </div>
         </div>
         
-        <div class="flex flex-col lg:flex-row items-center gap-10 glass rounded-3xl p-10 feature-card stagger-item">
-          <div class="w-24 h-24 rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
-            <span class="text-5xl font-black text-black">3</span>
-          </div>
+        <div class="step-card">
+          <div class="step-number" style="background: linear-gradient(135deg, #8b5cf6, #a855f7);">3</div>
           <div>
-            <h3 class="text-3xl font-black mb-4">Close Deals, Grow Referrals</h3>
-            <p class="text-zinc-400 text-xl leading-relaxed">Turn conversations into contracts. Maintain relationships automatically. Build a referral network that compounds over time.</p>
+            <h3 class="step-title">Close Deals, Grow Referrals</h3>
+            <p class="step-text">Turn conversations into contracts. Maintain relationships automatically. Build a referral network that compounds over time.</p>
           </div>
         </div>
       </div>
@@ -1003,444 +1372,115 @@
   </section>
 
   <!-- Pricing -->
-  <section id="pricing" class="py-32 px-6 relative">
-    <div class="max-w-6xl mx-auto">
-      <div class="text-center mb-20">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-brand-400 mb-6 reveal-up">
-          <i data-lucide="credit-card" class="w-4 h-4"></i>
+  <section id="pricing">
+    <div class="container">
+      <div class="text-center" style="margin-bottom: 4rem;">
+        <div class="section-badge glass" style="color: #22c55e;">
+          <svg class="icon-sm" viewBox="0 0 24 24"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
           Pricing
         </div>
-        <h2 class="text-4xl md:text-6xl lg:text-7xl font-black mb-8 reveal-up">
-          Plans for Every<br><span class="gradient-text">CRE Professional</span>
-        </h2>
-        <p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
-          From solo agents to enterprise brokerages. Scale as you grow.
-        </p>
+        <h2 class="section-title">Plans for Every <span class="gradient-text">CRE Professional</span></h2>
+        <p class="section-subtitle">From solo agents to enterprise brokerages. Scale as you grow.</p>
       </div>
       
-      <div class="grid md:grid-cols-3 gap-8">
-        <div class="glass rounded-3xl p-10 feature-card stagger-item">
-          <h3 class="text-xl font-bold text-zinc-400 mb-2">Basic</h3>
-          <div class="text-5xl font-black mb-2">$199<span class="text-xl text-zinc-500 font-medium">/mo</span></div>
-          <p class="text-zinc-500 text-sm mb-8">Perfect for solo agents getting started.</p>
-          <ul class="space-y-4 mb-10">
-            <li class="flex items-center gap-3 text-zinc-300">
-              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
-              </div>
-              Lead sourcing (500/mo)
-            </li>
-            <li class="flex items-center gap-3 text-zinc-300">
-              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
-              </div>
-              Basic outreach
-            </li>
-            <li class="flex items-center gap-3 text-zinc-300">
-              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
-              </div>
-              CRM basics
-            </li>
-            <li class="flex items-center gap-3 text-zinc-300">
-              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
-              </div>
-              Email support
-            </li>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6" style="max-width: 64rem; margin: 0 auto;">
+        <div class="pricing-card">
+          <div class="pricing-tier text-zinc-400">Basic</div>
+          <div class="pricing-price">$199<span class="pricing-period">/mo</span></div>
+          <p class="pricing-desc">Perfect for solo agents getting started.</p>
+          <ul class="pricing-features">
+            <li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Lead sourcing (500/mo)</li>
+            <li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Basic outreach</li>
+            <li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> CRM basics</li>
+            <li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Email support</li>
           </ul>
-          <button class="w-full py-4 glass-strong rounded-2xl font-bold hover:bg-white/10 transition-all hover:scale-105 active:scale-95">
-            Start Free Trial
-          </button>
+          <button class="btn btn-secondary w-full">Start Free Trial</button>
         </div>
         
-        <div class="relative rounded-3xl stagger-item">
-          <div class="absolute -inset-[2px] bg-gradient-to-r from-brand-500 via-cyan-500 to-violet-500 rounded-3xl opacity-80 blur-sm"></div>
-          <div class="relative glass-strong rounded-3xl p-10 h-full bg-[#0a0a0a]">
-            <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
-              <span class="px-4 py-1.5 rounded-full bg-gradient-to-r from-brand-500 to-cyan-500 text-black text-sm font-bold">Most Popular</span>
-            </div>
-            <h3 class="text-xl font-bold text-brand-400 mb-2 mt-2">Pro</h3>
-            <div class="text-5xl font-black mb-2">$499<span class="text-xl text-zinc-500 font-medium">/mo</span></div>
-            <p class="text-zinc-500 text-sm mb-8">For serious agents closing multiple deals.</p>
-            <ul class="space-y-4 mb-10">
-              <li class="flex items-center gap-3 text-white">
-                <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
-                </div>
-                Everything in Basic
-              </li>
-              <li class="flex items-center gap-3 text-white">
-                <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
-                </div>
-                Unlimited leads
-              </li>
-              <li class="flex items-center gap-3 text-white">
-                <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
-                </div>
-                AI voice & text
-              </li>
-              <li class="flex items-center gap-3 text-white">
-                <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
-                </div>
-                LOI generation
-              </li>
-              <li class="flex items-center gap-3 text-white">
-                <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
-                </div>
-                Deal underwriting
-              </li>
-              <li class="flex items-center gap-3 text-white">
-                <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
-                  <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
-                </div>
-                Priority support
-              </li>
-            </ul>
-            <button class="w-full py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black rounded-2xl font-bold transition-all hover:scale-105 active:scale-95 btn-shine">
-              Start Free Trial
-            </button>
-          </div>
+        <div class="pricing-card featured">
+          <span class="pricing-badge">Most Popular</span>
+          <div class="pricing-tier text-brand" style="margin-top: 0.5rem;">Pro</div>
+          <div class="pricing-price">$499<span class="pricing-period">/mo</span></div>
+          <p class="pricing-desc">For serious agents closing multiple deals.</p>
+          <ul class="pricing-features">
+            <li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Everything in Basic</li>
+            <li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Unlimited leads</li>
+            <li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> AI voice & text</li>
+            <li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> LOI generation</li>
+            <li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Deal underwriting</li>
+            <li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Priority support</li>
+          </ul>
+          <button class="btn btn-primary w-full">Start Free Trial</button>
         </div>
         
-        <div class="glass rounded-3xl p-10 feature-card stagger-item">
-          <h3 class="text-xl font-bold text-zinc-400 mb-2">Enterprise</h3>
-          <div class="text-5xl font-black mb-2">Custom</div>
-          <p class="text-zinc-500 text-sm mb-8">For teams and brokerages at scale.</p>
-          <ul class="space-y-4 mb-10">
-            <li class="flex items-center gap-3 text-zinc-300">
-              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
-              </div>
-              Everything in Pro
-            </li>
-            <li class="flex items-center gap-3 text-zinc-300">
-              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
-              </div>
-              Team collaboration
-            </li>
-            <li class="flex items-center gap-3 text-zinc-300">
-              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
-              </div>
-              Custom integrations
-            </li>
-            <li class="flex items-center gap-3 text-zinc-300">
-              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
-              </div>
-              Dedicated CSM
-            </li>
-            <li class="flex items-center gap-3 text-zinc-300">
-              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
-                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
-              </div>
-              SLA guarantee
-            </li>
+        <div class="pricing-card">
+          <div class="pricing-tier text-zinc-400">Enterprise</div>
+          <div class="pricing-price">Custom</div>
+          <p class="pricing-desc">For teams and brokerages at scale.</p>
+          <ul class="pricing-features">
+            <li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Everything in Pro</li>
+            <li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Team collaboration</li>
+            <li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Custom integrations</li>
+            <li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Dedicated CSM</li>
+            <li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> SLA guarantee</li>
           </ul>
-          <button class="w-full py-4 glass-strong rounded-2xl font-bold hover:bg-white/10 transition-all hover:scale-105 active:scale-95">
-            Contact Sales
-          </button>
+          <button class="btn btn-secondary w-full">Contact Sales</button>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Final CTA -->
-  <section class="py-32 px-6 relative overflow-hidden">
-    <div class="absolute inset-0 mesh-gradient"></div>
-    <div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
-    
-    <div class="max-w-4xl mx-auto text-center relative">
-      <h2 class="text-4xl md:text-6xl lg:text-7xl font-black mb-8 reveal-up">
-        Ready to Close More Deals<br><span class="gradient-text">With Less Work?</span>
-      </h2>
-      <p class="text-xl md:text-2xl text-zinc-400 mb-12 reveal-up">
-        Join hundreds of CRE professionals already using CRESYNC.
-      </p>
-      <div class="flex flex-col sm:flex-row gap-4 justify-center max-w-xl mx-auto reveal-up">
-        <input type="email" placeholder="Enter your email" class="flex-1 px-6 py-5 glass-strong rounded-2xl text-lg outline-none focus:ring-2 focus:ring-brand-500/50 transition-all">
-        <button class="magnetic-btn px-10 py-5 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-2xl text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine whitespace-nowrap">
-          Get Started Free
-        </button>
+  <!-- CTA Section -->
+  <section class="cta-section">
+    <div class="container text-center">
+      <h2 class="section-title">Ready to Close More Deals<br><span class="gradient-text">With Less Work?</span></h2>
+      <p class="section-subtitle" style="margin-bottom: 2.5rem;">Join hundreds of CRE professionals already using CRESYNC.</p>
+      
+      <div class="cta-input">
+        <input type="email" placeholder="Enter your email">
+        <button class="btn btn-primary glow" style="white-space: nowrap;">Get Started Free</button>
       </div>
-      <p class="text-sm text-zinc-600 mt-6 reveal-up">14-day free trial. No credit card required.</p>
+      
+      <p class="text-zinc-600" style="margin-top: 1.5rem; font-size: 0.875rem;">14-day free trial. No credit card required.</p>
     </div>
   </section>
 
   <!-- Footer -->
-  <footer class="py-16 px-6 border-t border-white/5">
-    <div class="max-w-7xl mx-auto">
-      <div class="flex flex-col lg:flex-row items-center justify-between gap-10">
-        <div class="flex items-center gap-3">
-          <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 via-emerald-400 to-cyan-400 flex items-center justify-center">
-            <span class="font-black text-lg text-black">CS</span>
-          </div>
-          <span class="font-black text-2xl tracking-tight">CRESYNC</span>
+  <footer>
+    <div class="container">
+      <div class="footer-inner">
+        <a href="#" class="logo">
+          <div class="logo-icon">CS</div>
+          <span class="logo-text">CRESYNC</span>
+        </a>
+        
+        <div class="footer-links">
+          <a href="#features">Features</a>
+          <a href="#how-it-works">How It Works</a>
+          <a href="#pricing">Pricing</a>
+          <a href="#">Privacy</a>
+          <a href="#">Terms</a>
         </div>
-        <div class="flex flex-wrap items-center justify-center gap-8 text-sm font-medium text-zinc-500">
-          <a href="#features" class="hover:text-white transition-colors">Features</a>
-          <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
-          <a href="#pricing" class="hover:text-white transition-colors">Pricing</a>
-          <a href="#" class="hover:text-white transition-colors">Privacy</a>
-          <a href="#" class="hover:text-white transition-colors">Terms</a>
-          <a href="#" class="hover:text-white transition-colors">Contact</a>
-        </div>
-        <p class="text-sm text-zinc-600">© 2026 CRESYNC. All rights reserved.</p>
+        
+        <p class="footer-copy">© 2026 CRESYNC. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
   <script>
-    // Initialize Lucide icons
-    lucide.createIcons();
-    
-    // Mark JS as loaded for animations
-    document.body.classList.add('js-loaded');
-    
-    // Custom cursor
-    const cursor = document.getElementById('cursor');
-    const cursorDot = document.getElementById('cursor-dot');
-    
-    let cursorX = 0, cursorY = 0;
-    let dotX = 0, dotY = 0;
-    
-    document.addEventListener('mousemove', (e) => {
-      cursorX = e.clientX;
-      cursorY = e.clientY;
-    });
-    
-    function animateCursor() {
-      dotX += (cursorX - dotX) * 0.15;
-      dotY += (cursorY - dotY) * 0.15;
-      
-      cursor.style.left = cursorX - 10 + 'px';
-      cursor.style.top = cursorY - 10 + 'px';
-      cursorDot.style.left = dotX - 3 + 'px';
-      cursorDot.style.top = dotY - 3 + 'px';
-      
-      requestAnimationFrame(animateCursor);
-    }
-    animateCursor();
-    
-    // Cursor hover effects
-    document.querySelectorAll('a, button, input, .feature-card').forEach(el => {
-      el.addEventListener('mouseenter', () => cursor.classList.add('hover'));
-      el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
-    });
-    
-    // Magnetic buttons
-    document.querySelectorAll('.magnetic-btn').forEach(btn => {
-      btn.addEventListener('mousemove', (e) => {
-        const rect = btn.getBoundingClientRect();
-        const x = e.clientX - rect.left - rect.width / 2;
-        const y = e.clientY - rect.top - rect.height / 2;
-        btn.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px) scale(1.05)`;
-      });
-      btn.addEventListener('mouseleave', () => {
-        btn.style.transform = '';
-      });
-    });
-    
-    // GSAP Animations
-    gsap.registerPlugin(ScrollTrigger);
-    
-    // Hero headline animation
-    const heroWords = document.querySelectorAll('.hero-word');
-    gsap.fromTo(heroWords, 
-      { opacity: 0, y: 100, rotateX: -40 },
-      { 
-        opacity: 1, 
-        y: 0, 
-        rotateX: 0,
-        duration: 1.2,
-        ease: "power4.out",
-        stagger: 0.15
-      }
-    );
-    
-    // Reveal animations
-    gsap.utils.toArray('.reveal-up').forEach(el => {
-      gsap.fromTo(el, 
-        { opacity: 0, y: 60 },
-        {
-          opacity: 1,
-          y: 0,
-          duration: 1,
-          ease: "power3.out",
-          scrollTrigger: {
-            trigger: el,
-            start: "top 85%",
-            toggleActions: "play none none none"
-          }
-        }
-      );
-    });
-    
-    gsap.utils.toArray('.reveal-scale').forEach(el => {
-      gsap.fromTo(el, 
-        { opacity: 0, scale: 0.9 },
-        {
-          opacity: 1,
-          scale: 1,
-          duration: 1.2,
-          ease: "power3.out",
-          scrollTrigger: {
-            trigger: el,
-            start: "top 85%",
-            toggleActions: "play none none none"
-          }
-        }
-      );
-    });
-    
-    // Stagger animations for cards
-    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
-      gsap.fromTo(el,
-        { opacity: 0, y: 40 },
-        {
-          opacity: 1,
-          y: 0,
-          duration: 0.8,
-          ease: "power3.out",
-          scrollTrigger: {
-            trigger: el,
-            start: "top 85%",
-            toggleActions: "play none none none"
-          },
-          delay: (i % 3) * 0.1
-        }
-      );
-    });
-    
-    // Counter animation
-    const counters = document.querySelectorAll('.counter');
-    counters.forEach(counter => {
-      const target = parseInt(counter.dataset.target);
-      ScrollTrigger.create({
-        trigger: counter,
-        start: "top 80%",
-        onEnter: () => {
-          gsap.to(counter, {
-            innerText: target,
-            duration: 2,
-            snap: { innerText: 1 },
-            ease: "power2.out"
-          });
-        },
-        once: true
-      });
-    });
-    
-    // Navbar scroll effect
+    // Minimal JS - only navbar scroll effect
     const navbar = document.getElementById('navbar');
-    ScrollTrigger.create({
-      start: "top -100",
-      onUpdate: (self) => {
-        if (self.scroll() > 100) {
-          navbar.classList.add('glass-strong', 'py-3');
-          navbar.classList.remove('py-5');
-        } else {
-          navbar.classList.remove('glass-strong', 'py-3');
-          navbar.classList.add('py-5');
-        }
-      }
-    });
+    let lastScroll = 0;
     
-    // Chat demo animation
-    const chatDemo = document.getElementById('chat-demo');
-    const messages = [
-      { type: 'user', text: 'Find me multi-family properties in Austin, TX with 20+ units under $5M' },
-      { type: 'ai', text: 'Found 23 properties matching your criteria. I\'ve pulled owner contact info and property details for each. Ready to start outreach?' },
-      { type: 'user', text: 'Yes, draft a personalized email sequence for the top 10' },
-      { type: 'ai', text: 'Done! I\'ve created a 5-touch email sequence personalized to each property owner. The campaign is ready to launch in GHL.', action: 'Outreach campaign created → View in GHL' }
-    ];
-    
-    function createMessage(msg, index) {
-      const div = document.createElement('div');
-      div.className = msg.type === 'user' ? 'flex justify-end' : 'flex gap-3';
-      div.style.opacity = '0';
-      div.style.transform = 'translateY(20px)';
-      
-      if (msg.type === 'user') {
-        div.innerHTML = `
-          <div class="bg-brand-500/20 border border-brand-500/30 rounded-2xl rounded-br-md px-5 py-3 max-w-md">
-            <p class="text-sm">${msg.text}</p>
-          </div>
-        `;
+    window.addEventListener('scroll', () => {
+      const currentScroll = window.pageYOffset;
+      if (currentScroll > 50) {
+        navbar.classList.add('scrolled');
       } else {
-        let actionHtml = msg.action ? `
-          <div class="glass rounded-xl px-4 py-2 flex items-center gap-2 text-xs text-brand-400 mt-2">
-            <i data-lucide="check-circle" class="w-4 h-4"></i>
-            <span>${msg.action}</span>
-          </div>
-        ` : '';
-        
-        div.innerHTML = `
-          <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center flex-shrink-0">
-            <span class="font-bold text-xs text-black">CS</span>
-          </div>
-          <div>
-            <div class="glass rounded-2xl rounded-tl-md px-5 py-3 max-w-md">
-              <p class="text-sm text-zinc-300">${msg.text}</p>
-            </div>
-            ${actionHtml}
-          </div>
-        `;
+        navbar.classList.remove('scrolled');
       }
-      
-      return div;
-    }
-    
-    // Animate chat messages
-    let chatAnimated = false;
-    ScrollTrigger.create({
-      trigger: chatDemo,
-      start: "top 70%",
-      onEnter: () => {
-        if (chatAnimated) return;
-        chatAnimated = true;
-        
-        messages.forEach((msg, i) => {
-          setTimeout(() => {
-            const msgEl = createMessage(msg, i);
-            chatDemo.appendChild(msgEl);
-            lucide.createIcons();
-            
-            gsap.to(msgEl, {
-              opacity: 1,
-              y: 0,
-              duration: 0.5,
-              ease: "power2.out"
-            });
-            
-            // Scroll chat to bottom
-            chatDemo.scrollTop = chatDemo.scrollHeight;
-          }, i * 1200);
-        });
-      },
-      once: true
-    });
-    
-    // Parallax effect for floating orbs
-    document.querySelectorAll('.parallax-layer').forEach(layer => {
-      const speed = layer.dataset.speed || 0.5;
-      gsap.to(layer, {
-        y: () => window.innerHeight * speed * 0.5,
-        ease: "none",
-        scrollTrigger: {
-          trigger: document.body,
-          start: "top top",
-          end: "bottom bottom",
-          scrub: true
-        }
-      });
-    });
+      lastScroll = currentScroll;
+    }, { passive: true });
   </script>
 </body>
 </html>
