diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..d7b2631
Binary files /dev/null and b/.DS_Store differ
diff --git a/index.html b/index.html
index d6014fd..7c0dc62 100644
--- a/index.html
+++ b/index.html
@@ -3,59 +3,89 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Invest Now - Real Payments</title>
+  <title>Invest</title>
   <script src="https://js.stripe.com/v3/"></script>
+  <script src="https://cdn.tailwindcss.com"></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; }
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+    body { font-family: 'Inter', system-ui, sans-serif; }
+    .blink { animation: blink 1.5s steps(1) infinite; }
+    @keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }
   </style>
 </head>
-<body>
-  <div class="card">
-    <h1>Invest Today</h1>
-    <p>One-time contribution to support our project.<br>All major cards accepted.</p>
+<body class="min-h-screen bg-black text-white flex items-center justify-center p-5">
 
-    <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>
+  <div class="max-w-lg w-full space-y-16">
+
+    <!-- Header -->
+    <div class="text-center space-y-4">
+      <h1 class="text-6xl md:text-8xl font-black tracking-tighter">
+        INVEST
+      </h1>
+      <p class="text-2xl md:text-3xl font-light text-zinc-500">
+        One-time. No bullshit.
+      </p>
+    </div>
+
+    <!-- Amount -->
+    <div class="space-y-8">
+      <div class="text-center">
+        <span class="text-8xl md:text-9xl font-black tracking-tight">
+          $<span id="display">100</span>
+        </span>
+        <span class="text-4xl font-light text-zinc-600"> USD</span>
+      </div>
+
+      <input 
+        type="number" 
+        id="amount"
+        min="5" 
+        value="100"
+        class="w-full bg-transparent border-t-0 border-x-0 border-b-4 border-white text-6xl text-center font-bold focus:outline-none focus:border-sky-400 transition pb-2"
+        placeholder="0"
+      />
+    </div>
+
+    <!-- Pay Button -->
+    <div class="pt-8">
+      <button id="pay" class="group relative w-full overflow-hidden bg-sky-400 hover:bg-sky-300 text-black font-black text-2xl uppercase tracking-wider py-8 transition-all">
+        <span class="relative z-10">Pay & Invest Now</span>
+        <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 transition"></span>
+      </button>
+    </div>
+
+    <!-- Trust line – tiny and confident -->
+    <div class="text-center space-y-3 text-zinc-600 text-sm uppercase tracking-widest">
+      <div>Secured by Stripe • 256-bit encryption</div>
+      <div>Funds received instantly • Zero fees on our end</div>
+      <div class="pt-4 text-sky-400 blink">Live • Accepting payments</div>
+    </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
+    const stripe = Stripe('pk_live_XXXXXXXXXXXXXXXXXXXXXXXX'); // ← your key
 
-    // Update displayed amount live
-    document.getElementById('amount').addEventListener('input', (e) => {
-      const val = e.target.value || 0;
-      document.getElementById('display').textContent = val;
+    const amountInput = document.getElementById('amount');
+    const display = document.getElementById('display');
+
+    amountInput.addEventListener('input', (e) => {
+      let val = e.target.value.replace(/\D/g,'') || '0';
+      e.target.value = val;
+      display.textContent = Number(val).toLocaleString();
     });
 
     document.getElementById('pay').addEventListener('click', () => {
-      const amount = parseInt(document.getElementById('amount').value);
-      if (!amount || amount < 5) {
-        alert('Please enter at least $5');
-        return;
-      }
+      let amount = parseInt(amountInput.value);
+      if (!amount || amount < 5) return alert('Minimum $5');
 
-      // 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
+        lineItems: [{ price: 'price_1YOUR_PRICE_ID', quantity: 1 }],
         mode: 'payment',
-        successUrl: window.location.origin + '?success=true',
-        cancelUrl: window.location.origin + '?canceled=true',
+        successUrl: window.location.origin + '/success.html',
+        cancelUrl: window.location.origin,
         billingAddressCollection: 'required',
-        customerCreation: 'always',
-      }).then((result) => {
-        if (result.error) alert(result.error.message);
-      });
+      }).then(r => r.error && alert(r.error.message));
     });
   </script>
 </body>
