diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d6014fd
--- /dev/null
+++ b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Invest Now - Real Payments</title>
+  <script src="https://js.stripe.com/v3/"></script>
+  <style>
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f172a; color: white; text-align: center; padding: 60px 20px; }
+    .card { max-width: 480px; margin: 0 auto; background: #1e293b; padding: 40px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
+    h1 { font-size: 2.5em; margin-bottom: 10px; }
+    p { opacity: 0.9; line-height: 1.6; }
+    input { width: 100%; padding: 14px; margin: 15px 0; border-radius: 8px; border: none; font-size: 18px; text-align: center; }
+    button { width: 100%; padding: 16px; background: #6366f1; color: white; border: none; border-radius: 8px; font-size: 20px; cursor: pointer; margin-top: 10px; }
+    button:hover { background: #4f46e5; }
+    .small { font-size: 0.8em; opacity: 0.7; margin-top: 20px; }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <h1>Invest Today</h1>
+    <p>One-time contribution to support our project.<br>All major cards accepted.</p>
+
+    <input type="number" id="amount" placeholder="100" min="5" step="1" value="100"/>
+    <div style="margin:10px 0; font-weight:bold;">USD $ <span id="display">100</span></div>
+
+    <button id="pay">Pay & Invest Now</button>
+    <div class="small">Secured by Stripe • Funds go directly to us • Instant confirmation</div>
+  </div>
+
+  <script>
+    const stripe = Stripe('pk_live_XXXXXXXXXXXXXXXXXXXXXXXX'); // Put your real publishable key here
+
+    // Update displayed amount live
+    document.getElementById('amount').addEventListener('input', (e) => {
+      const val = e.target.value || 0;
+      document.getElementById('display').textContent = val;
+    });
+
+    document.getElementById('pay').addEventListener('click', () => {
+      const amount = parseInt(document.getElementById('amount').value);
+      if (!amount || amount < 5) {
+        alert('Please enter at least $5');
+        return;
+      }
+
+      // This uses Stripe’s client-only mode (no backend needed)
+      stripe.redirectToCheckout({
+        lineItems: [{ price: 'price_1YOUR_PRICE_ID_HERE', quantity: 1 }], // fixed price
+        // OR use dynamic amount (requires a tiny backend) → see note below
+        mode: 'payment',
+        successUrl: window.location.origin + '?success=true',
+        cancelUrl: window.location.origin + '?canceled=true',
+        billingAddressCollection: 'required',
+        customerCreation: 'always',
+      }).then((result) => {
+        if (result.error) alert(result.error.message);
+      });
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
