diff --git a/index.html b/index.html
index 0644120..cc1a3c2 100644
--- a/index.html
+++ b/index.html
@@ -26,11 +26,16 @@
       line-height: 1.6;
       -webkit-font-smoothing: antialiased;
       overflow-x: hidden;
+      min-width: 320px;
     }
     
     /* Utility Classes */
-    .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
-    .container-lg { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
+    .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; }
@@ -118,15 +123,19 @@
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
-      padding: 1rem 2rem;
+      padding: 0.875rem 1.5rem;
       font-weight: 700;
-      font-size: 1rem;
+      font-size: 0.875rem;
       border-radius: 0.75rem;
       border: none;
       cursor: pointer;
       transition: transform 0.2s, box-shadow 0.2s;
     }
     
+    @media (min-width: 640px) {
+      .btn { padding: 1rem 2rem; font-size: 1rem; }
+    }
+    
     .btn:hover { transform: translateY(-2px); }
     .btn:active { transform: translateY(0); }
     
@@ -219,11 +228,20 @@
     /* Hero */
     .hero {
       min-height: 100vh;
-      padding: 8rem 0 5rem;
+      min-height: 100dvh;
+      padding: 6rem 0 3rem;
       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;
@@ -269,24 +287,29 @@
     }
     
     .hero-title {
-      font-size: 3rem;
+      font-size: 2.25rem;
       font-weight: 900;
-      line-height: 1;
+      line-height: 1.1;
       letter-spacing: -0.025em;
       margin-bottom: 1.5rem;
     }
     
-    @media (min-width: 768px) { .hero-title { font-size: 4.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: 1.25rem;
+      font-size: 1rem;
       color: #a1a1aa;
       max-width: 48rem;
-      margin: 0 auto 2.5rem;
-      line-height: 1.7;
+      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 */
@@ -295,18 +318,26 @@
       max-width: 72rem;
       margin: 0 auto;
       padding: 2px;
-      border-radius: 1.5rem;
+      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(1.5rem - 2px);
+      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;
@@ -344,9 +375,10 @@
     
     .mockup-body {
       display: flex;
-      height: 28rem;
+      height: 22rem;
     }
     
+    @media (min-width: 480px) { .mockup-body { height: 26rem; } }
     @media (min-width: 768px) { .mockup-body { height: 32rem; } }
     
     .mockup-sidebar {
@@ -382,21 +414,34 @@
     
     .chat-messages {
       flex: 1;
-      padding: 1.5rem;
+      padding: 0.75rem;
       overflow-y: auto;
       display: flex;
       flex-direction: column;
-      gap: 1rem;
+      gap: 0.625rem;
+    }
+    
+    @media (min-width: 640px) {
+      .chat-messages { padding: 1.5rem; gap: 1rem; }
     }
     
     .message {
-      max-width: 85%;
-      padding: 0.875rem 1.25rem;
-      border-radius: 1rem;
-      font-size: 0.875rem;
+      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);
@@ -425,18 +470,30 @@
     }
     
     .chat-input {
-      padding: 1rem;
+      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.75rem;
-      padding: 0.875rem 1rem;
+      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: 1rem;
+      border-radius: 0.75rem;
+    }
+    
+    @media (min-width: 640px) {
+      .chat-input-inner {
+        gap: 0.75rem;
+        padding: 0.875rem 1rem;
+        border-radius: 1rem;
+      }
     }
     
     .chat-input input {
@@ -445,7 +502,12 @@
       border: none;
       outline: none;
       color: #fff;
-      font-size: 0.875rem;
+      font-size: 0.8125rem;
+      min-width: 0;
+    }
+    
+    @media (min-width: 640px) {
+      .chat-input input { font-size: 0.875rem; }
     }
     
     .chat-input input::placeholder { color: #52525b; }
@@ -571,10 +633,12 @@
     
     /* Section Styles */
     section {
-      padding: 6rem 0;
+      padding: 3rem 0;
     }
     
-    @media (min-width: 768px) { section { padding: 8rem 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;
@@ -588,35 +652,46 @@
     }
     
     .section-title {
-      font-size: 2.25rem;
+      font-size: 1.75rem;
       font-weight: 900;
-      line-height: 1.1;
-      margin-bottom: 1.5rem;
+      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: 1.125rem;
+      font-size: 1rem;
       color: #a1a1aa;
       max-width: 48rem;
       margin: 0 auto;
-      line-height: 1.7;
+      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: 2rem;
-      border-radius: 1.5rem;
+      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);
@@ -652,14 +727,22 @@
     }
     
     .pipeline-card {
-      padding: 2rem;
-      border-radius: 1.5rem;
+      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);
@@ -723,13 +806,21 @@
     
     /* Feature Cards */
     .feature-card {
-      padding: 2rem;
-      border-radius: 1.5rem;
+      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);
@@ -762,54 +853,82 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 1.5rem;
-      padding: 2.5rem;
-      border-radius: 1.5rem;
+      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: 5rem;
-      height: 5rem;
-      border-radius: 1.25rem;
+      width: 4rem;
+      height: 4rem;
+      border-radius: 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 2.5rem;
+      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.5rem;
+      font-size: 1.25rem;
       font-weight: 900;
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.5rem;
+    }
+    
+    @media (min-width: 640px) {
+      .step-title { font-size: 1.5rem; margin-bottom: 0.75rem; }
     }
     
     .step-text {
       color: #a1a1aa;
-      font-size: 1.0625rem;
-      line-height: 1.7;
+      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: 2.5rem;
-      border-radius: 1.5rem;
+      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);
     }
@@ -850,11 +969,19 @@
     }
     
     .pricing-price {
-      font-size: 2.75rem;
+      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;