diff --git a/index.html b/index.html
index f89818c..2221c46 100644
--- a/index.html
+++ b/index.html
@@ -14,40 +14,30 @@
     @keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }
     .scale-75 { transform: scale(0.75); transform-origin: center center; }
 
-    .content-box {
-      max-width: 28rem; /* same as your max-w-lg */
-      margin: 0 auto;
-      width: 100%;
-    }
-    .amount-container {
-      padding: 3rem 0;
-      width: 100%;
-    }
+    .content-box { max-width: 28rem; margin: 0 auto; width: 100%; }
+    .amount-container { padding: 3rem 0; width: 100%; }
     .amount-wrapper {
-      display: flex;
-      justify-content: center;
-      align-items: baseline;
-      gap: 0.4ch;
-      font-weight: 900;
-      letter-spacing: -0.05em;
-      line-height: 1;
-      white-space: nowrap;
-      width: 100%;
+      display: flex; justify-content: center; align-items: baseline;
+      gap: 0.4ch; font-weight: 900; letter-spacing: -0.05em; line-height: 1;
+      white-space: nowrap; width: 100%;
     }
     #amountInput {
-      background: transparent;
-      border: none;
-      outline: none;
-      color: white;
-      font: inherit;
-      text-align: center;
-      min-width: 1ch;
-      caret-color: #0ea5e9;
+      background: transparent; border: none; outline: none; color: white;
+      font: inherit; text-align: center; min-width: 1ch; caret-color: #0ea5e9;
     }
-    .usd {
-      font-size: 0.38em;
-      font-weight: 400;
-      color: #71717a;
+    .usd { font-size: 0.38em; font-weight: 400; color: #71717a; }
+
+    /* Toggle Switch */
+    .toggle-group {
+      display: flex; background: #111; border: 4px solid white;
+      border-radius: 1rem; overflow: hidden; width: fit-content; margin: 2rem auto;
+    }
+    .toggle-btn {
+      padding: 1rem 2rem; font-weight: 900; text-transform: uppercase;
+      font-size: 1.1rem; cursor: pointer; transition: all 0.3s;
+    }
+    .toggle-btn.active {
+      background: white; color: black;
     }
   </style>
 </head>
@@ -61,7 +51,7 @@
         <p class="text-2xl md:text-3xl font-light text-zinc-500">One-time. No bullshit.</p>
       </div>
 
-      <!-- PERFECT AMOUNT: STAYS INSIDE THE BOX, SHRINKS AFTER 3 DIGITS -->
+      <!-- AMOUNT -->
       <div class="amount-container">
         <div class="amount-wrapper text-9xl md:text-[11rem]">
           $<input type="text" id="amountInput" value="100" placeholder="0">
@@ -69,6 +59,12 @@
         </div>
       </div>
 
+      <!-- ONE-TIME vs RECURRING TOGGLE -->
+      <div class="toggle-group">
+        <div class="toggle-btn active" data-type="one-time">One-Time</div>
+        <div class="toggle-btn" data-type="recurring">Recurring Monthly</div>
+      </div>
+
       <div>
         <input type="email" id="email" required placeholder="your@email.com"
                class="w-full bg-transparent border-t-0 border-x-0 border-b-4 border-white text-4xl text-center font-medium focus:outline-none focus:border-sky-400 transition pb-2">
@@ -102,13 +98,13 @@
     </div>
   </div>
 
-  <!-- Modal (unchanged) -->
+  <!-- Modal -->
   <div id="returnsModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
     <div class="absolute inset-0 bg-black/90 backdrop-blur-sm"></div>
     <div class="relative w-full max-w-4xl mx-4 bg-gray-950 border border-gray-800 rounded-3xl shadow-2xl p-10 md:p-16">
       <div class="text-center space-y-10">
         <div>
-          <h2 class="text-9xl md:text-[11rem] font-black leading-none text-sky-400">+69%</h2 насла
+          <h2 class="text-9xl md:text-[11rem] font-black leading-none text-sky-400">+69%</h2>
           <p class="text-5xl md:text-6xl font-black mt-6">$10,000 to $16,900</p>
           <p class="text-2xl md:text-3xl text-zinc-400 mt-4">in 24 months</p>
         </div>
@@ -126,6 +122,24 @@
   <script>
     const amountInput = document.getElementById('amountInput');
     const wrapper = amountInput.parentElement;
+    let paymentType = 'one-time'; // default
+
+    // Toggle One-Time / Recurring
+    document.querySelectorAll('.toggle-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        paymentType = btn.dataset.type;
+
+        // Update subtitle
+        const subtitle = document.querySelector('p.text-zinc-500');
+        if (paymentType === 'recurring') {
+          subtitle.textContent = 'Every month. Cancel anytime.';
+        } else {
+          subtitle.textContent = 'One-time. No bullshit.';
+        }
+      });
+    });
 
     function updateSize() {
       let raw = amountInput.value.replace(/[^0-9]/g, '');
@@ -133,21 +147,11 @@
       amountInput.value = Number(raw).toLocaleString();
 
       const digitCount = raw.length;
-
-      // Progressive shrink after 3 digits – stays perfectly inside the box
-      if (digitCount <= 1) {
-        wrapper.style.fontSize = '8.5rem'; // 11rem max
-      } else if (digitCount === 3) {
-        wrapper.style.fontSize = '6.5rem';
-      } else if (digitCount === 4) {
-        wrapper.style.fontSize = '5.5rem';
-      } else if (digitCount === 5) {
-        wrapper.style.fontSize = '4.5rem';
-      } else if (digitCount === 6) {
-        wrapper.style.fontSize = '3.8rem';
-      } else if (digitCount >= 7) {
-        wrapper.style.fontSize = '3rem';
-      }
+      if (digitCount <= 1) wrapper.style.fontSize = '7rem';
+      else if (digitCount === 3) wrapper.style.fontSize = '7rem';
+      else if (digitCount === 4) wrapper.style.fontSize = '5.5rem';
+      else if (digitCount === 5) wrapper.style.fontSize = '4.5rem';
+      else if (digitCount >= 6) wrapper.style.fontSize = '3.8rem';
     }
 
     amountInput.addEventListener('input', updateSize);
@@ -156,9 +160,9 @@
       if ([8,37,39,46,9].includes(e.keyCode) || e.metaKey) return;
       if (!/[0-9]/.test(e.key)) e.preventDefault();
     });
+    updateSize();
 
-    updateSize(); // init
-
+    // Term selection
     document.querySelectorAll('.term-btn').forEach(btn => {
       btn.onclick = () => {
         document.querySelectorAll('.term-btn').forEach(b => b.classList.remove('bg-white','text-black'));
@@ -166,14 +170,31 @@
       };
     });
 
+    // Pay Button
     document.getElementById('pay').onclick = () => {
       const amount = parseInt(amountInput.value.replace(/,/g,'')) || 0;
       const email = document.getElementById('email').value.trim();
+
       if (amount < 5) return alert('Minimum $5');
       if (!email.includes('@')) return alert('Valid email required');
-      alert(`Investing $${amount.toLocaleString()} — money printer go brrr`);
+
+      // Replace with your actual Stripe Price IDs
+      const priceId = paymentType === 'recurring' 
+        ? 'price_1RECURRENCE_ID_HERE' 
+        : 'price_1ONE_TIME_ID_HERE';
+
+      const stripe = Stripe('pk_live_YOUR_KEY');
+
+      stripe.redirectToCheckout({
+        lineItems: [{ price: priceId, quantity: 1 }],
+        mode: paymentType === 'recurring' ? 'subscription' : 'payment',
+        successUrl: window.location.origin + '/success.html',
+        cancelUrl: window.location.origin,
+        customerEmail: email,
+      });
     };
 
+    // Chart
     let chart = null;
     function createChart() {
       if (chart) chart.destroy();