diff --git a/index.html b/index.html
index 3d53046..81c068c 100644
--- a/index.html
+++ b/index.html
@@ -1,109 +1,102 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="scroll-smooth">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CRESYNC — Your 24/7 CRE Employee</title>
   <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 -->
+  <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  
-  <!-- Load only needed font weights -->
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
-  
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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'],
+          },
+          colors: {
+            brand: {
+              400: '#4ade80',
+              500: '#22c55e',
+              600: '#16a34a',
+            }
+          },
+        }
+      }
+    }
+  </script>
   <style>
-    /* 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-color: #030303;
-      color: #ffffff;
-      line-height: 1.6;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      overflow-x: hidden;
-      min-width: 320px;
-    }
-    
-    /* Ensure text is always visible */
-    h1, h2, h3, h4, h5, h6, p, span, a, li, div {
-      color: inherit;
-    }
-    
-    /* Utility Classes */
-    .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
-    .container-lg { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }
-    
-    @media (min-width: 640px) {
-      .container, .container-lg { 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 - Desktop Only */
     @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: none !important; }
+      .custom-cursor {
+        width: 20px;
+        height: 20px;
+        border: 2px solid #22c55e;
+        border-radius: 50%;
+        position: fixed;
+        pointer-events: none;
+        z-index: 9999;
+        transition: transform 0.15s ease, background 0.2s ease;
+        mix-blend-mode: difference;
+      }
+      .custom-cursor.hover {
+        transform: scale(2);
+        background: rgba(34, 197, 94, 0.3);
+      }
+      .cursor-dot {
+        width: 6px;
+        height: 6px;
+        background: #22c55e;
+        border-radius: 50%;
+        position: fixed;
+        pointer-events: none;
+        z-index: 9999;
+      }
+    }
+    @media (max-width: 1023px) {
+      .custom-cursor, .cursor-dot { display: none !important; }
     }
     
-    /* Components */
+    /* Gradient Text */
+    .gradient-text {
+      color: #22c55e;
+      background: linear-gradient(135deg, #22c55e 0%, #10b981 25%, #06b6d4 50%, #8b5cf6 75%, #22c55e 100%);
+      background-size: 200% 200%;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      animation: gradient-shift 6s ease infinite;
+    }
+    @supports not (-webkit-background-clip: text) {
+      .gradient-text { color: #22c55e; background: none; -webkit-text-fill-color: currentColor; }
+    }
+    
+    @keyframes gradient-shift {
+      0%, 100% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+    }
+    
+    /* Mesh Gradient Background */
+    .mesh-gradient {
+      background: 
+        radial-gradient(at 40% 20%, rgba(34, 197, 94, 0.15) 0px, transparent 50%),
+        radial-gradient(at 80% 0%, rgba(6, 182, 212, 0.12) 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.08) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(34, 197, 94, 0.12) 0px, transparent 50%);
+    }
+    
+    /* Glass Effect with Fallback */
     .glass {
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid rgba(255, 255, 255, 0.1);
     }
-    
     @supports (backdrop-filter: blur(20px)) {
       .glass {
         background: rgba(255, 255, 255, 0.03);
@@ -113,1211 +106,400 @@
       }
     }
     
-    .gradient-text {
-      color: #22c55e;
-      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 6s ease infinite;
+    .glass-strong {
+      background: rgba(255, 255, 255, 0.08);
+      border: 1px solid rgba(255, 255, 255, 0.12);
     }
-    
-    @supports not (-webkit-background-clip: text) {
-      .gradient-text {
-        color: #22c55e;
-        background: none;
+    @supports (backdrop-filter: blur(40px)) {
+      .glass-strong {
+        background: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(40px);
+        -webkit-backdrop-filter: blur(40px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
       }
     }
     
-    @keyframes gradient-shift {
-      0%, 100% { background-position: 0% 50%; }
-      50% { background-position: 100% 50%; }
-    }
-    
+    /* Glow Effects */
     .glow {
-      box-shadow: 0 0 60px rgba(34, 197, 94, 0.15);
+      box-shadow: 0 0 60px rgba(34, 197, 94, 0.2), 0 0 100px rgba(34, 197, 94, 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);
     }
     
-    .btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 0.5rem;
-      padding: 0.875rem 1.5rem;
-      font-weight: 700;
-      font-size: 0.875rem;
-      border-radius: 0.75rem;
-      border: none;
-      cursor: pointer;
-      transition: transform 0.2s, box-shadow 0.2s;
+    /* Float Animation */
+    .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); }
+      50% { transform: translateY(-20px); }
     }
     
-    @media (min-width: 640px) {
-      .btn { padding: 1rem 2rem; font-size: 1rem; }
-    }
-    
-    .btn:hover { transform: translateY(-2px); }
-    .btn:active { transform: translateY(0); }
-    
-    .btn-primary {
-      background: #22c55e;
-      color: #000;
-    }
-    
-    .btn-primary:hover {
-      background: #4ade80;
-      box-shadow: 0 0 30px rgba(34, 197, 94, 0.3);
-    }
-    
-    .btn-secondary {
-      background: rgba(255, 255, 255, 0.05);
-      color: #fff;
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-    
-    .btn-secondary:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-    
-    /* Navbar */
-    .navbar {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      z-index: 100;
-      padding: 1.25rem 0;
-      transition: background 0.3s, padding 0.3s;
-    }
-    
-    .navbar.scrolled {
-      background: rgba(3, 3, 3, 0.95);
-      padding: 0.75rem 0;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    }
-    
-    @supports (backdrop-filter: blur(20px)) {
-      .navbar.scrolled {
-        background: rgba(3, 3, 3, 0.8);
-        backdrop-filter: blur(20px);
-        -webkit-backdrop-filter: blur(20px);
-      }
-    }
-    
-    .logo {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      text-decoration: none;
-      color: #fff;
-    }
-    
-    .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;
-    }
-    
-    .logo-text {
-      font-weight: 900;
-      font-size: 1.25rem;
-      letter-spacing: -0.025em;
-    }
-    
-    .nav-links {
-      display: none;
-      gap: 2.5rem;
-      list-style: none;
-    }
-    
-    .nav-links a {
-      color: #a1a1aa;
-      text-decoration: none;
-      font-size: 0.875rem;
-      font-weight: 500;
-      transition: color 0.2s;
-    }
-    
-    .nav-links a:hover { color: #fff; }
-    
-    @media (min-width: 768px) {
-      .nav-links { display: flex; }
-    }
-    
-    /* Hero */
-    .hero {
-      min-height: 100vh;
-      min-height: 100dvh;
-      padding: 6rem 0 3rem;
+    /* Gradient Border */
+    .gradient-border {
       position: relative;
-      overflow: hidden;
     }
-    
-    @media (min-width: 640px) {
-      .hero { padding: 7rem 0 4rem; }
-    }
-    
-    @media (min-width: 768px) {
-      .hero { padding: 8rem 0 5rem; }
-    }
-    
-    .hero-bg {
-      position: absolute;
-      inset: 0;
-      z-index: 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;
-    }
-    
-    .hero-grid {
-      position: absolute;
-      inset: 0;
-      z-index: 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;
-    }
-    
-    .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: 2.25rem;
-      font-weight: 900;
-      line-height: 1.1;
-      letter-spacing: -0.025em;
-      margin-bottom: 1.5rem;
-    }
-    
-    @media (min-width: 480px) { .hero-title { font-size: 2.75rem; } }
-    @media (min-width: 640px) { .hero-title { font-size: 3.5rem; } }
-    @media (min-width: 768px) { .hero-title { font-size: 4.5rem; line-height: 1; } }
-    @media (min-width: 1024px) { .hero-title { font-size: 6rem; } }
-    
-    .hero-subtitle {
-      font-size: 1rem;
-      color: #a1a1aa;
-      max-width: 48rem;
-      margin: 0 auto 2rem;
-      line-height: 1.6;
-      padding: 0 0.5rem;
-    }
-    
-    @media (min-width: 480px) { .hero-subtitle { font-size: 1.125rem; } }
-    @media (min-width: 640px) { .hero-subtitle { font-size: 1.25rem; padding: 0; margin-bottom: 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: 1rem;
-      background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4, #8b5cf6);
-      background-size: 300% 300%;
-      animation: gradient-shift 4s ease infinite;
-    }
-    
-    @media (min-width: 640px) {
-      .mockup-wrapper { border-radius: 1.5rem; }
-    }
-    
-    .mockup {
-      background: #0a0a0a;
-      border-radius: calc(1rem - 2px);
-      overflow: hidden;
-    }
-    
-    @media (min-width: 640px) {
-      .mockup { border-radius: calc(1.5rem - 2px); }
-    }
-    
-    .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: 22rem;
-    }
-    
-    @media (min-width: 480px) { .mockup-body { height: 26rem; } }
-    @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: 0.75rem;
-      overflow-y: auto;
-      display: flex;
-      flex-direction: column;
-      gap: 0.625rem;
-    }
-    
-    @media (min-width: 640px) {
-      .chat-messages { padding: 1.5rem; gap: 1rem; }
-    }
-    
-    .message {
-      max-width: 90%;
-      padding: 0.625rem 0.875rem;
-      border-radius: 0.75rem;
-      font-size: 0.75rem;
-      line-height: 1.5;
-    }
-    
-    @media (min-width: 640px) {
-      .message {
-        max-width: 85%;
-        padding: 0.875rem 1.25rem;
-        border-radius: 1rem;
-        font-size: 0.875rem;
-      }
-    }
-    
-    .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: 0.5rem;
-      border-top: 1px solid rgba(255,255,255,0.05);
-    }
-    
-    @media (min-width: 640px) {
-      .chat-input { padding: 1rem; }
-    }
-    
-    .chat-input-inner {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.625rem 0.75rem;
-      background: rgba(255,255,255,0.03);
-      border: 1px solid rgba(255,255,255,0.08);
-      border-radius: 0.75rem;
-    }
-    
-    @media (min-width: 640px) {
-      .chat-input-inner {
-        gap: 0.75rem;
-        padding: 0.875rem 1rem;
-        border-radius: 1rem;
-      }
-    }
-    
-    .chat-input input {
-      flex: 1;
-      background: none;
-      border: none;
-      outline: none;
-      color: #fff;
-      font-size: 0.8125rem;
-      min-width: 0;
-    }
-    
-    @media (min-width: 640px) {
-      .chat-input input { 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: 3rem 0;
-    }
-    
-    @media (min-width: 640px) { section { padding: 5rem 0; } }
-    @media (min-width: 768px) { section { padding: 6rem 0; } }
-    @media (min-width: 1024px) { 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: 1.75rem;
-      font-weight: 900;
-      line-height: 1.15;
-      margin-bottom: 1rem;
-      letter-spacing: -0.025em;
-    }
-    
-    @media (min-width: 480px) { .section-title { font-size: 2rem; } }
-    @media (min-width: 640px) { .section-title { font-size: 2.25rem; margin-bottom: 1.5rem; } }
-    @media (min-width: 768px) { .section-title { font-size: 3rem; } }
-    @media (min-width: 1024px) { .section-title { font-size: 3.75rem; } }
-    
-    .section-subtitle {
-      font-size: 1rem;
-      color: #a1a1aa;
-      max-width: 48rem;
-      margin: 0 auto;
-      line-height: 1.6;
-    }
-    
-    @media (min-width: 640px) { .section-subtitle { font-size: 1.125rem; line-height: 1.7; } }
-    @media (min-width: 768px) { .section-subtitle { font-size: 1.25rem; } }
-    
-    /* Problem Cards */
-    .problem-card {
-      padding: 1.25rem;
-      border-radius: 1rem;
-      background: rgba(255,255,255,0.02);
-      border: 1px solid rgba(248, 113, 113, 0.1);
-      transition: border-color 0.3s, transform 0.3s;
-    }
-    
-    @media (min-width: 640px) {
-      .problem-card { padding: 1.5rem; border-radius: 1.25rem; }
-    }
-    
-    @media (min-width: 768px) {
-      .problem-card { padding: 2rem; border-radius: 1.5rem; }
-    }
-    
-    .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: 1.25rem;
-      border-radius: 1rem;
-      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;
-    }
-    
-    @media (min-width: 640px) {
-      .pipeline-card { padding: 1.5rem; border-radius: 1.25rem; }
-    }
-    
-    @media (min-width: 768px) {
-      .pipeline-card { padding: 2rem; border-radius: 1.5rem; }
-    }
-    
-    .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: 1.25rem;
-      border-radius: 1rem;
-      background: rgba(255,255,255,0.02);
-      border: 1px solid rgba(255,255,255,0.06);
-      transition: transform 0.3s, border-color 0.3s;
-    }
-    
-    @media (min-width: 640px) {
-      .feature-card { padding: 1.5rem; border-radius: 1.25rem; }
-    }
-    
-    @media (min-width: 768px) {
-      .feature-card { padding: 2rem; border-radius: 1.5rem; }
-    }
-    
-    .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: 1rem;
-      padding: 1.5rem;
-      border-radius: 1rem;
-      background: rgba(255,255,255,0.02);
-      border: 1px solid rgba(255,255,255,0.06);
-      text-align: center;
-    }
-    
-    @media (min-width: 640px) {
-      .step-card { padding: 2rem; gap: 1.25rem; border-radius: 1.25rem; }
-    }
-    
-    @media (min-width: 1024px) {
-      .step-card {
-        flex-direction: row;
-        gap: 2.5rem;
-        padding: 2.5rem;
-        border-radius: 1.5rem;
-        text-align: left;
-      }
-    }
-    
-    .step-number {
-      width: 4rem;
-      height: 4rem;
-      border-radius: 1rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 2rem;
-      font-weight: 900;
-      color: #000;
-      flex-shrink: 0;
-    }
-    
-    @media (min-width: 640px) {
-      .step-number { width: 5rem; height: 5rem; font-size: 2.5rem; border-radius: 1.25rem; }
-    }
-    
-    .step-title {
-      font-size: 1.25rem;
-      font-weight: 900;
-      margin-bottom: 0.5rem;
-    }
-    
-    @media (min-width: 640px) {
-      .step-title { font-size: 1.5rem; margin-bottom: 0.75rem; }
-    }
-    
-    .step-text {
-      color: #a1a1aa;
-      font-size: 0.9375rem;
-      line-height: 1.6;
-    }
-    
-    @media (min-width: 640px) {
-      .step-text { font-size: 1.0625rem; line-height: 1.7; }
-    }
-    
-    /* Pricing */
-    .pricing-card {
-      padding: 1.5rem;
-      border-radius: 1rem;
-      background: rgba(255,255,255,0.02);
-      border: 1px solid rgba(255,255,255,0.06);
-      transition: transform 0.3s;
-    }
-    
-    @media (min-width: 640px) {
-      .pricing-card { padding: 2rem; border-radius: 1.25rem; }
-    }
-    
-    @media (min-width: 768px) {
-      .pricing-card { padding: 2.5rem; border-radius: 1.5rem; }
-    }
-    
-    .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 {
+    .gradient-border::before {
       content: '';
       position: absolute;
-      inset: -2px;
-      border-radius: calc(1.5rem + 2px);
-      background: linear-gradient(135deg, #22c55e, #06b6d4, #8b5cf6);
-      z-index: -1;
+      inset: 0;
+      padding: 2px;
+      background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4, #8b5cf6, #22c55e);
+      background-size: 300% 300%;
+      animation: gradient-shift 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;
     }
     
-    .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: 2rem;
-      font-weight: 900;
-      margin-bottom: 0.25rem;
-    }
-    
-    @media (min-width: 640px) {
-      .pricing-price { font-size: 2.5rem; }
-    }
-    
-    @media (min-width: 768px) {
-      .pricing-price { font-size: 2.75rem; }
-    }
-    
-    .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;
+    /* Feature Card Hover */
+    .feature-card {
+      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+    .feature-card:hover {
+      transform: translateY(-8px);
+      box-shadow: 0 25px 50px -12px rgba(34, 197, 94, 0.15);
+      border-color: rgba(34, 197, 94, 0.3);
+    }
+    .feature-card:hover .feature-icon {
+      transform: scale(1.1) rotate(5deg);
+    }
+    .feature-icon {
+      transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }
     
+    /* Pipeline Particles - Desktop Only */
     @media (min-width: 1024px) {
-      .footer-inner {
-        flex-direction: row;
-        justify-content: space-between;
+      .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; }
       }
     }
     
-    .footer-links {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      gap: 2rem;
+    /* Shimmer Effect */
+    .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; }
     }
     
-    .footer-links a {
-      color: #71717a;
-      text-decoration: none;
-      font-size: 0.875rem;
-      font-weight: 500;
-      transition: color 0.2s;
+    /* Button Shine */
+    .btn-shine {
+      position: relative;
+      overflow: hidden;
+    }
+    .btn-shine::after {
+      content: '';
+      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;
+    }
+    .btn-shine:hover::after {
+      transform: rotate(45deg) translateX(100%);
     }
     
-    .footer-links a:hover { color: #fff; }
-    
-    .footer-copy {
-      font-size: 0.875rem;
-      color: #52525b;
+    /* Scroll Indicator */
+    .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; }
     }
     
-    /* 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);
-        }
+    /* Magnetic Button - Desktop Only */
+    @media (min-width: 1024px) {
+      .magnetic-btn {
+        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
       }
     }
+    
+    /* Marquee */
+    .marquee {
+      animation: marquee 30s linear infinite;
+    }
+    @keyframes marquee {
+      0% { transform: translateX(0); }
+      100% { transform: translateX(-50%); }
+    }
+    
+    /* Noise Overlay - Subtle */
+    .noise::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      z-index: 9998;
+      opacity: 0.02;
+      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");
+    }
+    
+    /* Animations - Initially visible, hide when JS loads */
+    .reveal-up, .reveal-scale, .stagger-item {
+      opacity: 1;
+      transform: none;
+    }
+    .js-loaded .reveal-up {
+      opacity: 0;
+      transform: translateY(60px);
+    }
+    .js-loaded .reveal-scale {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    .js-loaded .stagger-item {
+      opacity: 0;
+      transform: translateY(40px);
+    }
+    
+    /* Counter */
+    .counter { font-variant-numeric: tabular-nums; }
+    
+    /* Stat Card Hover */
+    .stat-card { transition: transform 0.3s ease; }
+    .stat-card:hover { transform: translateY(-5px); }
+    .stat-card:hover .stat-number { transform: scale(1.05); }
+    .stat-number { transition: transform 0.3s ease; }
   </style>
 </head>
-<body>
+<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
+  
+  <!-- Custom Cursor (Desktop) -->
+  <div class="custom-cursor hidden lg:block" id="cursor"></div>
+  <div class="cursor-dot hidden lg:block" id="cursor-dot"></div>
+
   <!-- Navbar -->
-  <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>
+  <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-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
+      <a href="#" class="flex items-center gap-2 sm:gap-3 group">
+        <div class="w-9 h-9 sm:w-10 sm: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-xs sm:text-sm text-black">CS</span>
+        </div>
+        <span class="font-black text-xl sm:text-2xl tracking-tight">CRESYNC</span>
       </a>
-      <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 class="hidden md:flex items-center gap-8 lg: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-4 sm:px-5 py-2 sm: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>
     </div>
   </nav>
 
-  <!-- Hero -->
-  <section class="hero">
-    <div class="hero-bg"></div>
-    <div class="hero-grid"></div>
+  <!-- Hero Section -->
+  <section class="min-h-screen min-h-[100dvh] pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
+    <!-- Animated mesh background -->
+    <div class="absolute inset-0 mesh-gradient opacity-60"></div>
     
-    <div class="container text-center" style="position: relative; z-index: 1;">
-      <div class="badge glass" style="margin-bottom: 2rem;">
-        <span class="badge-dot"></span>
-        Now in Early Access — Limited Spots
+    <!-- Floating orbs - Desktop only for performance -->
+    <div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
+    <div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
+    <div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
+    
+    <!-- Grid pattern -->
+    <div class="absolute inset-0 opacity-[0.03]" 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: 60px 60px;"></div>
+    
+    <div class="max-w-7xl mx-auto relative z-10">
+      <!-- Badge -->
+      <div class="flex justify-center mb-6 sm:mb-8 reveal-up">
+        <div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
+          <span class="relative flex h-2 w-2 sm:h-2.5 sm: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 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
+          </span>
+          Now in Early Access — Limited Spots Available
+        </div>
       </div>
       
-      <h1 class="hero-title">
-        Your <span class="gradient-text">24/7 CRE</span><br>Employee
-      </h1>
+      <!-- Main headline -->
+      <div class="text-center mb-6 sm:mb-8">
+        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]" id="hero-headline">
+          <span class="block">Your</span>
+          <span class="block gradient-text">24/7 CRE</span>
+          <span class="block">Employee</span>
+        </h1>
+      </div>
       
-      <p class="hero-subtitle">
-        Source deals. Nurture leads. Close contracts.<br>
-        <strong style="color: #fff;">All through a simple conversation.</strong>
+      <!-- Subheadline -->
+      <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
+        Source deals. Nurture leads. Close contracts.<br class="hidden sm:block">
+        <span class="text-white font-semibold">All through a simple conversation.</span>
       </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>
+      <!-- CTA buttons -->
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
+        <button class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
+          <span>Start Free Trial</span>
+          <i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
+        </button>
+        <button class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
+          <div class="w-8 h-8 sm:w-10 sm: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-4 h-4 sm:w-5 sm:h-5 ml-0.5"></i>
+          </div>
+          <span>Watch Demo</span>
+        </button>
       </div>
       
       <!-- Product Mockup -->
-      <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 class="relative max-w-6xl mx-auto reveal-scale">
+        <!-- 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-2xl lg:rounded-3xl glow relative">
+          <div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
+            <div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
+              <!-- Window chrome -->
+              <div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
+                <div class="flex items-center gap-1.5 sm:gap-2">
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
+                  <div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
                 </div>
+                <div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
+                  <i data-lucide="lock" class="w-3 h-3"></i>
+                  app.cresync.com
+                </div>
+                <div class="w-16 sm:w-20"></div>
               </div>
               
-              <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>
+              <!-- App interface -->
+              <div class="flex h-[280px] sm:h-[380px] md:h-[450px] lg:h-[550px]">
+                <!-- Sidebar - Hidden on mobile -->
+                <div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400">
+                    <i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
                   </div>
-                  <div class="property-tags">
-                    <span class="property-tag match">98% Match</span>
-                    <span class="property-tag owner">Owner Direct</span>
+                  <div class="w-9 h-9 lg:w-10 lg: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-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
+                    <i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
+                  </div>
+                  <div class="w-9 h-9 lg:w-10 lg: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-4 h-4 lg:w-5 lg:h-5"></i>
                   </div>
                 </div>
                 
-                <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>
+                <!-- Chat panel -->
+                <div class="flex-1 flex flex-col">
+                  <div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-hidden" id="chat-demo">
+                    <!-- Messages will be animated in via JS -->
                   </div>
-                  <div class="property-tags">
-                    <span class="property-tag match">94% Match</span>
-                    <span class="property-tag owner">LLC Owner</span>
+                  
+                  <!-- Input -->
+                  <div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
+                    <div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
+                      <div class="hidden sm:flex items-center gap-1.5 lg:gap-2">
+                        <button class="w-7 h-7 lg:w-8 lg:h-8 rounded-lg hover:bg-white/10 flex items-center justify-center text-zinc-500 transition-colors">
+                          <i data-lucide="paperclip" class="w-3.5 h-3.5 lg:w-4 lg:h-4"></i>
+                        </button>
+                        <button class="w-7 h-7 lg:w-8 lg:h-8 rounded-lg hover:bg-white/10 flex items-center justify-center text-zinc-500 transition-colors">
+                          <i data-lucide="mic" class="w-3.5 h-3.5 lg:w-4 lg:h-4"></i>
+                        </button>
+                      </div>
+                      <input type="text" placeholder="Ask CRESYNC anything..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
+                      <button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors hover:scale-105 active:scale-95 flex-shrink-0">
+                        <i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
+                      </button>
+                    </div>
                   </div>
                 </div>
                 
-                <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>
+                <!-- Tool panels - Hidden on mobile/tablet -->
+                <div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
+                  <!-- Tabs -->
+                  <div class="flex border-b border-white/5">
+                    <button class="flex-1 px-4 xl:px-5 py-3 xl: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-4 xl:px-5 py-3 xl: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>
                   </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>
+                  
+                  <!-- Property cards -->
+                  <div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Riverside Apartments</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">24 units • Austin, TX 78701</p>
+                        </div>
+                        <span class="text-base xl:text-lg font-bold text-brand-400 font-mono">$4.2M</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2 mb-2 xl:mb-3">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">98% Match</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Owner Direct</span>
+                      </div>
+                      <div class="flex items-center justify-between text-[10px] xl:text-xs text-zinc-500">
+                        <span>Built 2018 • 6.2% Cap</span>
+                        <span class="text-brand-400 opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1">View <i data-lucide="arrow-right" class="w-3 h-3"></i></span>
+                      </div>
+                    </div>
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Oak Valley Complex</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">28 units • Austin, TX 78745</p>
+                        </div>
+                        <span class="text-base xl:text-lg font-bold text-brand-400 font-mono">$3.8M</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">94% Match</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">LLC Owner</span>
+                      </div>
+                    </div>
+                    
+                    <div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
+                      <div class="flex items-start justify-between mb-2 xl:mb-3">
+                        <div>
+                          <h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Sunset Ridge</h4>
+                          <p class="text-[10px] xl:text-xs text-zinc-500">32 units • Austin, TX 78702</p>
+                        </div>
+                        <span class="text-base xl:text-lg font-bold text-brand-400 font-mono">$4.9M</span>
+                      </div>
+                      <div class="flex gap-1.5 xl:gap-2">
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-yellow-500/15 text-yellow-400 text-[10px] xl:text-xs font-medium">87% Match</span>
+                        <span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Trust Owner</span>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -1325,202 +507,315 @@
           </div>
         </div>
       </div>
+      
+      <!-- Scroll indicator - Hidden on mobile -->
+      <div class="hidden sm:flex justify-center mt-10 lg: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-8 sm:py-10 lg:py-12 px-4 sm: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 lg:grid-cols-4 gap-6 sm:gap-8">
+        <div class="stat-card text-center">
+          <div class="stat-number text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2 counter" data-target="10000">0</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Properties Sourced</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="stat-number text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="2">0</span>B+</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Deal Volume</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="stat-number text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2 counter" data-target="500">0</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Active Agents</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="stat-number text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2"><span class="counter" data-target="40">0</span>hrs</div>
+          <div class="text-xs sm:text-sm text-zinc-500 font-medium">Saved per Week</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Powered By Marquee -->
+  <section class="py-6 sm:py-8 lg:py-10 border-b border-white/5 overflow-hidden">
+    <div class="flex whitespace-nowrap">
+      <div class="marquee flex items-center gap-8 sm:gap-12 lg:gap-16">
+        <span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Reonomy</span>
+        <span class="text-zinc-800">●</span>
+        <span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">GoHighLevel</span>
+        <span class="text-zinc-800">●</span>
+        <span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Twilio</span>
+        <span class="text-zinc-800">●</span>
+        <span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">OpenAI</span>
+        <span class="text-zinc-800">●</span>
+        <span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Anthropic</span>
+        <span class="text-zinc-800">●</span>
+        <span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Stripe</span>
+        <span class="text-zinc-800">●</span>
+        <span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Reonomy</span>
+        <span class="text-zinc-800">●</span>
+        <span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">GoHighLevel</span>
+        <span class="text-zinc-800">●</span>
+        <span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Twilio</span>
+        <span class="text-zinc-800">●</span>
+        <span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">OpenAI</span>
+        <span class="text-zinc-800">●</span>
+        <span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Anthropic</span>
+        <span class="text-zinc-800">●</span>
+        <span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Stripe</span>
+        <span class="text-zinc-800">●</span>
+      </div>
     </div>
   </section>
 
   <!-- Problem Section -->
-  <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>
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
           The Problem
         </div>
-        <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>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          The CRE Tech Stack<br>is a <span class="text-red-400">Nightmare</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl: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>
       </div>
       
-      <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 class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="unplug" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
           </div>
-          <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>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Integration Hell</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Reonomy doesn't talk to GHL. GHL doesn't talk to your spreadsheets. You're the integration layer.</p>
         </div>
         
-        <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 class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="brain" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
           </div>
-          <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>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Cognitive Overload</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">5 different UIs. 5 different workflows. 5 different learning curves. Your brain is fried by noon.</p>
         </div>
         
-        <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 class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
+          <div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
           </div>
-          <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>
+          <h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Time Vampire</h3>
+          <p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Copy-paste. Tab-switch. Manual entry. Context-switch. Repeat. Hours vanish into the void.</p>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- 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>
+  <!-- Solution / Pipeline -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
+    <div class="absolute inset-0 mesh-gradient opacity-30"></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
+    
+    <div class="max-w-6xl mx-auto relative">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
           The Solution
         </div>
-        <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>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          One Conversation.<br><span class="gradient-text">Complete Pipeline.</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          CRESYNC orchestrates your entire deal flow — from sourcing to closing — through a simple chat interface.
+        </p>
       </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>
+      <!-- Pipeline visualization -->
+      <div class="relative">
+        <!-- Connection line with particles - Desktop only -->
+        <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>
         
-        <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 class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
+          <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 relative glow-hover transition-all group feature-card stagger-item">
+            <div class="absolute -top-3 -left-3 sm:-top-4 sm:-left-4 w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center text-black font-black text-sm sm:text-base lg:text-xl shadow-lg shadow-brand-500/30">1</div>
+            <div class="w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-brand-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 mt-2 sm:mt-3 lg:mt-4 feature-icon">
+              <i data-lucide="search" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
+            </div>
+            <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3">Source</h3>
+            <p class="text-zinc-400 text-sm sm:text-base mb-3 sm:mb-4">Pull targeted leads with owner info, financials, and property details.</p>
+            <span class="inline-flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-zinc-600 font-mono bg-zinc-900/50 px-2 sm:px-3 py-1 sm:py-1.5 rounded-md lg:rounded-lg">
+              <span class="w-1.5 h-1.5 rounded-full bg-brand-500"></span>
+              Reonomy
+            </span>
           </div>
-          <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 class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 relative glow-hover transition-all group feature-card stagger-item">
+            <div class="absolute -top-3 -left-3 sm:-top-4 sm:-left-4 w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500 to-cyan-400 flex items-center justify-center text-black font-black text-sm sm:text-base lg:text-xl shadow-lg shadow-emerald-500/30">2</div>
+            <div class="w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 mt-2 sm:mt-3 lg:mt-4 feature-icon">
+              <i data-lucide="messages-square" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
+            </div>
+            <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3">Nurture</h3>
+            <p class="text-zinc-400 text-sm sm:text-base mb-3 sm:mb-4">Multi-channel outreach with AI voice, drip campaigns, and auto follow-ups.</p>
+            <span class="inline-flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-zinc-600 font-mono bg-zinc-900/50 px-2 sm:px-3 py-1 sm:py-1.5 rounded-md lg:rounded-lg">
+              <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
+              GoHighLevel
+            </span>
           </div>
-          <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 class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 relative glow-hover transition-all group feature-card stagger-item">
+            <div class="absolute -top-3 -left-3 sm:-top-4 sm:-left-4 w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center text-black font-black text-sm sm:text-base lg:text-xl shadow-lg shadow-cyan-500/30">3</div>
+            <div class="w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-cyan-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 mt-2 sm:mt-3 lg:mt-4 feature-icon">
+              <i data-lucide="file-signature" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
+            </div>
+            <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3">Close</h3>
+            <p class="text-zinc-400 text-sm sm:text-base mb-3 sm:mb-4">Generate professional LOIs instantly and turn appointments into contracts.</p>
+            <span class="inline-flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-zinc-600 font-mono bg-zinc-900/50 px-2 sm:px-3 py-1 sm:py-1.5 rounded-md lg:rounded-lg">
+              <span class="w-1.5 h-1.5 rounded-full bg-cyan-500"></span>
+              LOI Generator
+            </span>
+          </div>
+          
+          <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 relative glow-hover transition-all group feature-card stagger-item">
+            <div class="absolute -top-3 -left-3 sm:-top-4 sm:-left-4 w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center text-black font-black text-sm sm:text-base lg:text-xl shadow-lg shadow-violet-500/30">4</div>
+            <div class="w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-violet-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 mt-2 sm:mt-3 lg:mt-4 feature-icon">
+              <i data-lucide="calculator" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
+            </div>
+            <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3">Validate</h3>
+            <p class="text-zinc-400 text-sm sm:text-base mb-3 sm:mb-4">Run full underwriting analysis to ensure every deal makes financial sense.</p>
+            <span class="inline-flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-zinc-600 font-mono bg-zinc-900/50 px-2 sm:px-3 py-1 sm:py-1.5 rounded-md lg:rounded-lg">
+              <span class="w-1.5 h-1.5 rounded-full bg-violet-500"></span>
+              Underwriting Tool
+            </span>
           </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">
-    <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 Grid -->
+  <section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
           Features
         </div>
-        <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>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Everything to<br><span class="gradient-text">Dominate CRE</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          A complete toolkit unified under one conversational interface.
+        </p>
       </div>
       
-      <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 class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-emerald-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="database" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
           </div>
-          <h3 class="feature-title">Lead Sourcing</h3>
-          <p class="feature-text">Pull property data and owner contacts with natural language queries.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Lead Sourcing</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Pull property data and owner contacts with natural language. "Find me retail centers in Dallas under $5M."</p>
         </div>
         
-        <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 class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="mail" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
           </div>
-          <h3 class="feature-title">Multi-Channel Outreach</h3>
-          <p class="feature-text">Email, SMS, WhatsApp, social DMs — all from one conversation.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Multi-Channel Outreach</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Email, SMS, WhatsApp, social DMs — orchestrate every channel from one conversation.</p>
         </div>
         
-        <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 class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bot" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
           </div>
-          <h3 class="feature-title">AI Voice & Text</h3>
-          <p class="feature-text">Automated follow-ups, appointment setting, and lead qualification 24/7.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">AI Voice & Text</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Automated follow-ups, appointment setting, and lead qualification running 24/7.</p>
         </div>
         
-        <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 class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
           </div>
-          <h3 class="feature-title">Drip Campaigns</h3>
-          <p class="feature-text">Set up automated nurture sequences that run on autopilot.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Drip Campaigns</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Set up automated nurture sequences that run on autopilot while you focus on closing.</p>
         </div>
         
-        <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 class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
           </div>
-          <h3 class="feature-title">LOI Generation</h3>
-          <p class="feature-text">Draft professional Letters of Intent in seconds with deal-specific terms.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">LOI Generation</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Draft professional Letters of Intent in seconds with deal-specific terms and conditions.</p>
         </div>
         
-        <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 class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
+          <div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
+            <i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
           </div>
-          <h3 class="feature-title">Deal Underwriting</h3>
-          <p class="feature-text">Full financial analysis — cap rates, cash-on-cash, IRR projections.</p>
+          <h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Deal Underwriting</h3>
+          <p class="text-zinc-400 text-sm sm:text-base">Full financial analysis — cap rates, cash-on-cash, IRR projections — instantly.</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- How It Works -->
-  <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>
+  <section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm: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-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="play-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
           How It Works
         </div>
-        <h2 class="section-title">Three Steps to <span class="gradient-text">Transform Your Business</span></h2>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Three Steps to<br><span class="gradient-text">Transform Your Business</span>
+        </h2>
       </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="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 class="space-y-4 sm:space-y-6 lg:space-y-8">
+        <div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg: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-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Just Text What You Need</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg: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>
           </div>
         </div>
         
-        <div class="step-card">
-          <div class="step-number" style="background: linear-gradient(135deg, #06b6d4, #3b82f6);">2</div>
-          <div>
-            <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 class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg: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-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Watch It Work</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg: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>
           </div>
         </div>
         
-        <div class="step-card">
-          <div class="step-number" style="background: linear-gradient(135deg, #8b5cf6, #a855f7);">3</div>
-          <div>
-            <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 class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg: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-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
+          </div>
+          <div class="text-center lg:text-left">
+            <h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Close Deals, Grow Referrals</h3>
+            <p class="text-zinc-400 text-sm sm:text-base lg:text-xl leading-relaxed">Turn conversations into contracts. Maintain relationships automatically. Build a referral network that compounds over time.</p>
           </div>
         </div>
       </div>
@@ -1528,115 +823,352 @@
   </section>
 
   <!-- Pricing -->
-  <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>
+  <section id="pricing" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-10 sm:mb-14 lg:mb-20">
+        <div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
+          <i data-lucide="credit-card" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
           Pricing
         </div>
-        <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>
+        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+          Plans for Every<br><span class="gradient-text">CRE Professional</span>
+        </h2>
+        <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
+          From solo agents to enterprise brokerages. Scale as you grow.
+        </p>
       </div>
       
-      <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>
+      <div class="grid md:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <h3 class="text-base sm:text-lg font-bold text-zinc-400 mb-2">Basic</h3>
+          <div class="text-3xl sm:text-4xl lg:text-5xl font-black mb-1 sm:mb-2">$199<span class="text-base sm:text-lg lg:text-xl text-zinc-500 font-medium">/mo</span></div>
+          <p class="text-zinc-500 text-xs sm:text-sm mb-6 sm:mb-8">Perfect for solo agents getting started.</p>
+          <ul class="space-y-3 sm:space-y-4 mb-8 sm:mb-10">
+            <li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
+              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
+                <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-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
+              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
+                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
+              </div>
+              Basic outreach
+            </li>
+            <li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
+              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
+                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
+              </div>
+              CRM basics
+            </li>
+            <li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
+              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
+                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
+              </div>
+              Email support
+            </li>
           </ul>
-          <button class="btn btn-secondary w-full">Start Free Trial</button>
+          <button class="w-full py-3 sm:py-4 glass-strong rounded-xl lg:rounded-2xl font-bold text-sm sm:text-base hover:bg-white/10 transition-all hover:scale-105 active:scale-95">
+            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 class="relative rounded-2xl lg:rounded-3xl stagger-item">
+          <div class="absolute -inset-[2px] bg-gradient-to-r from-brand-500 via-cyan-500 to-violet-500 rounded-2xl lg:rounded-3xl opacity-80 blur-sm"></div>
+          <div class="relative glass-strong rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 h-full bg-[#0a0a0a]">
+            <div class="absolute -top-3 sm:-top-4 left-1/2 transform -translate-x-1/2">
+              <span class="px-3 sm:px-4 py-1 sm:py-1.5 rounded-full bg-gradient-to-r from-brand-500 to-cyan-500 text-black text-xs sm:text-sm font-bold whitespace-nowrap">Most Popular</span>
+            </div>
+            <h3 class="text-base sm:text-lg font-bold text-brand-400 mb-2 mt-2">Pro</h3>
+            <div class="text-3xl sm:text-4xl lg:text-5xl font-black mb-1 sm:mb-2">$499<span class="text-base sm:text-lg lg:text-xl text-zinc-500 font-medium">/mo</span></div>
+            <p class="text-zinc-500 text-xs sm:text-sm mb-6 sm:mb-8">For serious agents closing multiple deals.</p>
+            <ul class="space-y-3 sm:space-y-4 mb-8 sm:mb-10">
+              <li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-white">
+                <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
+                  <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
+                </div>
+                Everything in Basic
+              </li>
+              <li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-white">
+                <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
+                  <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
+                </div>
+                Unlimited leads
+              </li>
+              <li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-white">
+                <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
+                  <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
+                </div>
+                AI voice & text
+              </li>
+              <li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-white">
+                <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
+                  <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
+                </div>
+                LOI generation
+              </li>
+              <li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-white">
+                <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
+                  <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
+                </div>
+                Deal underwriting
+              </li>
+              <li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-white">
+                <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
+                  <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
+                </div>
+                Priority support
+              </li>
+            </ul>
+            <button class="w-full py-3 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black rounded-xl lg:rounded-2xl font-bold text-sm sm:text-base transition-all hover:scale-105 active:scale-95 btn-shine">
+              Start Free Trial
+            </button>
+          </div>
         </div>
         
-        <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>
+        <div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
+          <h3 class="text-base sm:text-lg font-bold text-zinc-400 mb-2">Enterprise</h3>
+          <div class="text-3xl sm:text-4xl lg:text-5xl font-black mb-1 sm:mb-2">Custom</div>
+          <p class="text-zinc-500 text-xs sm:text-sm mb-6 sm:mb-8">For teams and brokerages at scale.</p>
+          <ul class="space-y-3 sm:space-y-4 mb-8 sm:mb-10">
+            <li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
+              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
+                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
+              </div>
+              Everything in Pro
+            </li>
+            <li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
+              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
+                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
+              </div>
+              Team collaboration
+            </li>
+            <li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
+              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
+                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
+              </div>
+              Custom integrations
+            </li>
+            <li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
+              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
+                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
+              </div>
+              Dedicated CSM
+            </li>
+            <li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
+              <div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
+                <i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
+              </div>
+              SLA guarantee
+            </li>
           </ul>
-          <button class="btn btn-secondary w-full">Contact Sales</button>
+          <button class="w-full py-3 sm:py-4 glass-strong rounded-xl lg:rounded-2xl font-bold text-sm sm:text-base hover:bg-white/10 transition-all hover:scale-105 active:scale-95">
+            Contact Sales
+          </button>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- 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>
+  <!-- Final CTA -->
+  <section class="py-16 sm:py-20 lg:py-32 px-4 sm: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-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
+        Ready to Close More Deals<br><span class="gradient-text">With Less Work?</span>
+      </h2>
+      <p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
+        Join hundreds of CRE professionals already using CRESYNC.
+      </p>
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center max-w-xl mx-auto reveal-up">
+        <input type="email" placeholder="Enter your email" class="flex-1 px-4 sm:px-6 py-3.5 sm:py-4 lg:py-5 glass-strong rounded-xl lg:rounded-2xl text-base lg:text-lg outline-none focus:ring-2 focus:ring-brand-500/50 transition-all">
+        <button class="magnetic-btn px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg: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-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine whitespace-nowrap">
+          Get Started Free
+        </button>
       </div>
-      
-      <p class="text-zinc-600" style="margin-top: 1.5rem; font-size: 0.875rem;">14-day free trial. No credit card required.</p>
+      <p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">14-day free trial. No credit card required.</p>
     </div>
   </section>
 
   <!-- Footer -->
-  <footer>
-    <div class="container">
-      <div class="footer-inner">
-        <a href="#" class="logo">
-          <div class="logo-icon">CS</div>
-          <span class="logo-text">CRESYNC</span>
+  <footer class="py-10 sm:py-12 lg:py-16 px-4 sm: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-6 sm:gap-8 lg:gap-10">
+        <a href="#" class="flex items-center gap-2 sm:gap-3">
+          <div class="w-10 h-10 sm:w-12 sm: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-base sm:text-lg text-black">CS</span>
+          </div>
+          <span class="font-black text-xl sm:text-2xl tracking-tight">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 class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg: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>
         </div>
-        
-        <p class="footer-copy">© 2026 CRESYNC. All rights reserved.</p>
+        <p class="text-xs sm:text-sm text-zinc-600">© 2026 CRESYNC. All rights reserved.</p>
       </div>
     </div>
   </footer>
 
   <script>
-    // Minimal JS - only navbar scroll effect
-    const navbar = document.getElementById('navbar');
-    let lastScroll = 0;
+    // Initialize Lucide icons
+    lucide.createIcons();
     
-    window.addEventListener('scroll', () => {
-      const currentScroll = window.pageYOffset;
-      if (currentScroll > 50) {
-        navbar.classList.add('scrolled');
-      } else {
-        navbar.classList.remove('scrolled');
+    // Mark JS as loaded - enables animation hiding
+    document.body.classList.add('js-loaded');
+    
+    // Custom cursor (Desktop only)
+    if (window.innerWidth >= 1024) {
+      const cursor = document.getElementById('cursor');
+      const cursorDot = document.getElementById('cursor-dot');
+      let cursorX = 0, cursorY = 0, dotX = 0, dotY = 0;
+      
+      document.addEventListener('mousemove', (e) => {
+        cursorX = e.clientX;
+        cursorY = e.clientY;
+      }, { passive: true });
+      
+      function animateCursor() {
+        dotX += (cursorX - dotX) * 0.15;
+        dotY += (cursorY - dotY) * 0.15;
+        if (cursor) {
+          cursor.style.left = cursorX - 10 + 'px';
+          cursor.style.top = cursorY - 10 + 'px';
+        }
+        if (cursorDot) {
+          cursorDot.style.left = dotX - 3 + 'px';
+          cursorDot.style.top = dotY - 3 + 'px';
+        }
+        requestAnimationFrame(animateCursor);
       }
-      lastScroll = currentScroll;
-    }, { passive: true });
+      animateCursor();
+      
+      document.querySelectorAll('a, button, input, .feature-card').forEach(el => {
+        el.addEventListener('mouseenter', () => cursor && cursor.classList.add('hover'));
+        el.addEventListener('mouseleave', () => cursor && 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.15}px, ${y * 0.15}px) scale(1.02)`;
+        });
+        btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
+      });
+    }
+    
+    // GSAP Animations
+    gsap.registerPlugin(ScrollTrigger);
+    
+    // Reveal animations
+    gsap.utils.toArray('.reveal-up').forEach(el => {
+      gsap.fromTo(el, 
+        { opacity: 0, y: 50 },
+        { opacity: 1, y: 0, duration: 0.8, 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.95 },
+        { opacity: 1, scale: 1, duration: 1, ease: "power3.out",
+          scrollTrigger: { trigger: el, start: "top 85%", toggleActions: "play none none none" }
+        }
+      );
+    });
+    
+    // Stagger animations
+    gsap.utils.toArray('.stagger-item').forEach((el, i) => {
+      gsap.fromTo(el,
+        { opacity: 0, y: 30 },
+        { opacity: 1, y: 0, duration: 0.6, ease: "power3.out",
+          scrollTrigger: { trigger: el, start: "top 85%", toggleActions: "play none none none" },
+          delay: (i % 4) * 0.1
+        }
+      );
+    });
+    
+    // Counter animation
+    document.querySelectorAll('.counter').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
+    const navbar = document.getElementById('navbar');
+    ScrollTrigger.create({
+      start: "top -80",
+      onUpdate: (self) => {
+        if (self.scroll() > 80) {
+          navbar.classList.add('glass-strong');
+          navbar.style.borderBottom = '1px solid rgba(255,255,255,0.05)';
+        } else {
+          navbar.classList.remove('glass-strong');
+          navbar.style.borderBottom = 'none';
+        }
+      }
+    });
+    
+    // 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) {
+      const div = document.createElement('div');
+      div.className = msg.type === 'user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
+      div.style.opacity = '0';
+      div.style.transform = 'translateY(15px)';
+      
+      if (msg.type === 'user') {
+        div.innerHTML = `<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
+      } else {
+        let actionHtml = msg.action ? `<div class="glass rounded-lg sm:rounded-xl px-2 sm:px-3 lg:px-4 py-1.5 sm:py-2 flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-brand-400 mt-1.5 sm:mt-2"><i data-lucide="check-circle" class="w-3 h-3 sm:w-4 sm:h-4"></i><span>${msg.action}</span></div>` : '';
+        div.innerHTML = `<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm: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-[10px] sm:text-xs text-black">CS</span></div><div><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-md"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p></div>${actionHtml}</div>`;
+      }
+      return div;
+    }
+    
+    let chatAnimated = false;
+    ScrollTrigger.create({
+      trigger: chatDemo,
+      start: "top 75%",
+      onEnter: () => {
+        if (chatAnimated) return;
+        chatAnimated = true;
+        messages.forEach((msg, i) => {
+          setTimeout(() => {
+            const msgEl = createMessage(msg);
+            chatDemo.appendChild(msgEl);
+            lucide.createIcons();
+            gsap.to(msgEl, { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" });
+            chatDemo.scrollTop = chatDemo.scrollHeight;
+          }, i * 1000);
+        });
+      },
+      once: true
+    });
   </script>
 </body>
 </html>
