Add mobile-only QR code under hero buttons for on-the-spot recruiting, update ref dynamically

index.html

@@ -138,6 +138,29 @@
     transform: translateY(-2px);
   }
 
+  /* Mobile-only hero QR code */
+  .hero-qr-mobile {
+    display: none;
+    text-align: center;
+    margin: 10px auto 22px;
+  }
+  .hero-qr-mobile img {
+    width: 150px;
+    height: 150px;
+    border-radius: 12px;
+    border: 2px solid var(--border);
+  }
+  .hero-qr-label {
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+    margin-top: 6px;
+  }
+  @media (max-width: 767px) {
+    .hero-qr-mobile {
+      display: block;
+    }
+  }
+
   /* How it works — 4 steps */
   .steps-row {
     display: grid;
@@ -1032,6 +1055,12 @@
       <a href="https://clickbaitpays.me/login.php" target="_blank" rel="noopener" class="hero-btn hero-btn-secondary">🔐 Log into ClickBaitPays</a>
     </div>
 
+    <!-- Mobile-only QR for on-the-spot recruiting -->
+    <div class="hero-qr-mobile">
+      <img id="heroQrCode" src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://cbp-calculator.saasy.top?ref=cryptoteambuild" alt="QR Code">
+      <div class="hero-qr-label">📱 Scan to join with my referral</div>
+    </div>
+
     <!-- 4-Step How It Works -->
     <div class="steps-row">
       <div class="step-card">
@@ -1926,6 +1955,8 @@ function updateSharedLinkBox() {
   if (bannerLink) bannerLink.href = `https://clickbaitpays.me/?ref=${refUser}`;
   const qrImg = document.getElementById('refQrCode');
   if (qrImg) qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(shareUrl)}`;
+  const heroQr = document.getElementById('heroQrCode');
+  if (heroQr) heroQr.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(shareUrl)}`;
 }
 
 function copySharedLink() {