Landing rebuilt to Marty's picked reference (Behance 243562211)

Mint-monochrome discipline on near-black, neon light-trail hero with falling
streaks, glowing icon plates (custom SVG, no emoji), ledger mockup flanked
by feature items, isometric network illustration, capsule nav, pricing
tiles, ghost wordmark footer. Topo-contour ground texture.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

public/assets/home.js

@@ -13,20 +13,23 @@
 
   async function loadLadder() {
     const { products } = await (await fetch('/api/catalog')).json();
-    const tb = document.querySelector('#ladder tbody');
-    tb.innerHTML = '';
+    const wrap = document.getElementById('tiles');
+    wrap.innerHTML = '';
     const NAMES = { 1: 'Micro', 2: 'Activation', 3: 'Builder', 4: 'Growth', 5: 'Leader' };
     for (const p of products) {
-      const tr = document.createElement('tr');
-      tr.innerHTML = '<td><b>' + (NAMES[p.id] || 'Package ' + p.id) + '</b></td>'
-        + '<td class="num">' + IAP.fmtUsd(p.priceCents) + '</td>'
-        + '<td class="num">' + p.creditAmount.toLocaleString() + '</td>'
-        + '<td class="num mono">' + (p.costWei ? IAP.fmtPol(p.costWei) + ' POL' : 'paused') + '</td>'
-        + '<td><button class="btn small" data-id="' + p.id + '" data-cost="' + (p.costWei || '') + '"'
-        + (p.costWei ? '' : ' disabled') + '>Buy</button></td>';
-      tb.appendChild(tr);
+      const bonus = p.creditAmount - p.priceCents; // credits above 1cr/cent = bulk bonus
+      const div = document.createElement('div');
+      div.className = 'tile' + (p.priceCents === 5000 ? ' hot' : '');
+      div.innerHTML = '<div class="name">' + (NAMES[p.id] || 'Package ' + p.id) + '</div>'
+        + '<div class="price">$' + Math.round(p.priceCents / 100) + '</div>'
+        + '<div class="cr">' + p.creditAmount.toLocaleString() + ' credits</div>'
+        + '<div class="bonus">' + (bonus > 0 ? '+' + bonus.toLocaleString() + ' bonus credits' : '&nbsp;') + '</div>'
+        + '<div class="pol">' + (p.costWei ? IAP.fmtPol(p.costWei) + ' POL right now' : 'paused') + '</div>'
+        + '<button class="btn small" data-id="' + p.id + '" data-cost="' + (p.costWei || '') + '"'
+        + (p.costWei ? '' : ' disabled') + '>Buy</button>';
+      wrap.appendChild(div);
     }
-    tb.querySelectorAll('button[data-id]').forEach(b => b.addEventListener('click', () => buyPack(b)));
+    wrap.querySelectorAll('button[data-id]').forEach(b => b.addEventListener('click', () => buyPack(b)));
   }
   async function buyPack(btn) {
     try {