Atlas: 3999 MAD limited offer, animated deal price + blinking tag

templates/index.html

@@ -101,6 +101,23 @@
     50% { box-shadow: 0 0 20px rgba(59,130,246,0.6); }
   }
 
+  /* ── Limited offer ── */
+  .old-price { text-decoration:line-through; color:var(--muted); font-size:18px; font-weight:400; }
+  .deal-price { font-size:32px; font-weight:800; color:#22c55e; animation: dealPulse 1.5s ease-in-out infinite; }
+  @keyframes dealPulse {
+    0%, 100% { transform:scale(1); }
+    50% { transform:scale(1.04); }
+  }
+  .limited-tag { 
+    display:inline-block; background:#ef4444; color:#fff; 
+    padding:3px 10px; border-radius:4px; font-size:11px; font-weight:700;
+    animation: blink 1s ease-in-out infinite; margin-top:4px;
+  }
+  @keyframes blink {
+    0%, 100% { opacity:1; }
+    50% { opacity:0.5; }
+  }
+
   /* Why */
   .reasons { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
   .reason { text-align:center; padding:24px; }
@@ -350,16 +367,23 @@ async function loadPricing() {
       }
     };
     const lang = getLang();
-    grid.innerHTML = tiers.map(t => `
+    grid.innerHTML = tiers.map(t => {
+      const isAtlas = t.name === 'Atlas';
+      const priceHTML = isAtlas
+        ? `<div class="old-price">${Number(t.sell_price).toLocaleString('fr-MA')} MAD</div>
+           <div class="deal-price">3 999 <small>MAD</small></div>
+           <div><span class="limited-tag">${lang==='fr'?'Offre limitée':'Limited offer'}</span></div>`
+        : `<div class="price">${Number(t.sell_price).toLocaleString('fr-MA')} <small>MAD</small></div>`;
+      return `
       <div class="pricing-card">
-        ${t.name === 'Atlas' ? '<div class="promo-badge">LE BON CHOIX</div>' : ''}
+        ${isAtlas ? '<div class="promo-badge">LE BON CHOIX</div>' : ''}
         <h3>${t.name}</h3>
-        <div class="price">${Number(t.sell_price).toLocaleString('fr-MA')} <small>MAD</small></div>
+        ${priceHTML}
         <div class="desc">${(desc[lang]||desc.fr)[t.name] || t.description || ''}</div>
         <ul class="specs">${(specs[lang]||specs.fr)[t.name]?.map(s => `<li>${s}</li>`).join('') || ''}</ul>
         <a href="https://wa.me/212725569519" class="btn btn-primary" style="width:100%;text-align:center;">${lang==='fr'?'Commander':'Order'}</a>
-      </div>
+      </div>`;
-    `).join('');
+    }).join('');
   } catch(e) { document.getElementById('pricingGrid').innerHTML = '<p style="color:var(--muted);text-align:center;">Pricing unavailable</p>'; }
 }
 loadPricing();