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/common.js

@@ -42,7 +42,7 @@ window.IAP = (function () {
       document.body.prepend(b);
     }
     const a = nav.querySelector('[data-p="' + active + '"]');
-    if (a) a.style.color = 'var(--ink)';
+    if (a) a.className = 'active';
     refreshNavWallet();
   }
   async function refreshNavWallet() {

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 {

public/assets/site.css

@@ -1,131 +1,215 @@
-/* InstantAdPay visual system v2 — "commercial ad-network polish x DeFi flash".
-   Refs: Adsterra/PropellerAds (dual-audience hero, real-number counters,
-   format showcase) x DeFi landing patterns (aurora glows, glass cards,
-   bento grids, ticker heartbeat). Dark luxe ground; mint = money in motion;
-   amber gradient = action. Display face: Sora. */
+/* InstantAdPay visual system v4 — built to Marty's picked reference
+   (Behance 243562211 "ChainLock"): near-black ground, ONE neon-mint accent,
+   sweeping light-trail hero, glowing icon plates, mockup-anchored sections,
+   ghost wordmark footer. Discipline over decoration. */
 :root{
-  --ground:#070b16; --panel:rgba(19,28,48,.66); --panel-solid:#131c30;
-  --line:rgba(126,144,186,.16); --line-strong:rgba(126,144,186,.32);
-  --ink:#eef2fb; --muted:#8b9ab5;
-  --mint:#3de8a8; --mint-dim:#1c5b44; --mint-soft:rgba(61,232,168,.1);
-  --amber:#ffb238; --amber2:#ff7a45; --amber-ink:#160f04;
-  --violet:#8b6cf6; --cyan:#5cc8ee; --bad:#ff8f7d;
+  --ground:#040807; --ground2:#071009;
+  --panel:rgba(16,28,24,.55); --panel-solid:#0b1512;
+  --line:rgba(84,150,128,.16); --line-strong:rgba(84,150,128,.36);
+  --ink:#eef7f3; --muted:#8ba69c;
+  --mint:#43e8c3; --mint-hi:#8ffbe3; --mint-ink:#03211a;
+  --mint-soft:rgba(67,232,195,.09); --bad:#ff8f7d;
   --mono:"Consolas","JetBrains Mono",monospace;
   --disp:"Sora","Segoe UI",system-ui,sans-serif;
-  --radius:16px;
+  --radius:18px;
 }
 *{box-sizing:border-box}
-body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.6 "Segoe UI",system-ui,sans-serif;overflow-x:hidden}
-/* aurora ground: two blurred glow fields, fixed behind everything */
-body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
-  background:
-    radial-gradient(560px 420px at 82% -6%, rgba(139,108,246,.22), transparent 65%),
-    radial-gradient(640px 460px at -8% 34%, rgba(61,232,168,.13), transparent 65%),
-    radial-gradient(520px 420px at 58% 108%, rgba(255,122,69,.10), transparent 65%);}
+html{scroll-behavior:smooth}
+body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.65 "Segoe UI",system-ui,sans-serif;overflow-x:hidden}
+/* topo-contour ground texture, very faint */
+body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
+  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%2343e8c3' stroke-opacity='.05'%3E%3Cpath d='M60 280c40-90 160-130 220-90s60 150 160 150 120-90 120-90'/%3E%3Cpath d='M40 340c60-110 190-160 260-110s60 170 180 170'/%3E%3Cpath d='M20 400c80-130 220-190 300-130s60 190 200 190'/%3E%3Cpath d='M80 220c30-70 130-100 180-70s50 120 130 120 100-70 100-70'/%3E%3C/g%3E%3C/svg%3E")}
 a{color:var(--mint);text-decoration:none}
 a:hover{text-decoration:underline}
-.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
-h1,h2,h3{font-family:var(--disp);letter-spacing:-.01em}
-/* nav */
-nav{border-bottom:1px solid var(--line);background:rgba(7,11,22,.72);backdrop-filter:blur(14px);
-  -webkit-backdrop-filter:blur(14px);position:sticky;top:0;z-index:10}
-nav .wrap{display:flex;align-items:center;gap:22px;min-height:62px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
+.wrap{max-width:1100px;margin:0 auto;padding:0 22px}
+h1,h2,h3{font-family:var(--disp);letter-spacing:-.015em}
+/* ── nav: capsule pill ─────────────────────────────── */
+nav{position:sticky;top:0;z-index:10;background:rgba(4,8,7,.7);backdrop-filter:blur(16px);
+  -webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
+nav .wrap{display:flex;align-items:center;gap:20px;min-height:66px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
 .logo{font-family:var(--disp);font-weight:800;font-size:20px;color:var(--ink)}
-.logo b{background:linear-gradient(100deg,var(--amber),var(--amber2));-webkit-background-clip:text;background-clip:text;color:transparent}
-nav .links{display:flex;gap:20px;font-size:14.5px;flex:1;flex-wrap:wrap}
-nav a{color:var(--muted)}
-nav a:hover{color:var(--ink);text-decoration:none}
-#navWallet{font-size:13.5px}
-.rehearsal{background:linear-gradient(90deg,#2c2150,#1c3050);color:#c9b8f7;text-align:center;font-size:13px;padding:7px 12px}
-.rehearsal b{color:#eadfff}
-/* buttons */
-.btn{display:inline-block;background:linear-gradient(100deg,var(--amber),var(--amber2));color:var(--amber-ink);
-  border:0;border-radius:999px;padding:13px 26px;font-weight:800;font-size:15.5px;cursor:pointer;font-family:var(--disp);
-  box-shadow:0 6px 24px rgba(255,150,60,.28);transition:transform .15s ease,box-shadow .15s ease}
-.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,150,60,.4);text-decoration:none}
-.btn.sec{background:transparent;color:var(--mint);border:1.5px solid var(--mint);box-shadow:none}
-.btn.sec:hover{box-shadow:0 6px 22px rgba(61,232,168,.22)}
-.btn.small{padding:8px 16px;font-size:13.5px}
+.logo b{color:var(--mint)}
+nav .links{display:flex;gap:4px;flex:1;flex-wrap:wrap;background:rgba(16,28,24,.7);border:1px solid var(--line);
+  border-radius:999px;padding:5px 8px;width:fit-content;flex:0 1 auto;margin:0 auto}
+nav .links a{color:var(--muted);font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:999px}
+nav .links a:hover{color:var(--ink);text-decoration:none}
+nav .links a.active{color:var(--mint);background:rgba(67,232,195,.1)}
+#navWallet{font-size:13px;margin-left:auto}
+.rehearsal{background:rgba(67,232,195,.07);border-bottom:1px solid var(--line);color:var(--muted);
+  text-align:center;font-size:12.5px;padding:7px 12px}
+.rehearsal b{color:var(--mint)}
+/* ── buttons ───────────────────────────────────────── */
+.btn{display:inline-block;background:var(--mint);color:var(--mint-ink);border:0;border-radius:999px;
+  padding:13px 26px;font-weight:700;font-size:15px;cursor:pointer;font-family:var(--disp);
+  box-shadow:0 4px 30px rgba(67,232,195,.35);transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
+.btn:hover{transform:translateY(-2px);background:var(--mint-hi);box-shadow:0 8px 44px rgba(67,232,195,.5);text-decoration:none}
+.btn.sec{background:transparent;color:var(--mint);border:1px solid rgba(67,232,195,.6);box-shadow:none}
+.btn.sec:hover{background:rgba(67,232,195,.08);box-shadow:0 4px 26px rgba(67,232,195,.2)}
+.btn.small{padding:8px 17px;font-size:13px}
 .btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
-/* hero */
-.hero{padding:76px 0 40px}
-.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mint);margin:0 0 14px}
-.hero h1{font-size:clamp(32px,5.6vw,58px);font-weight:800;line-height:1.06;margin:0 0 18px;max-width:720px;text-wrap:balance}
-.hero h1 em{font-style:normal;background:linear-gradient(95deg,var(--mint),var(--cyan) 55%,var(--violet));
-  -webkit-background-clip:text;background-clip:text;color:transparent}
-.hero p.lead{color:var(--muted);font-size:19px;max-width:600px;margin:0 0 30px}
+/* ── hero: centered, light-trail set-piece ─────────── */
+.hero{position:relative;text-align:center;padding:120px 0 84px;overflow:visible}
+.hero h1{font-size:clamp(36px,5.4vw,62px);font-weight:700;line-height:1.08;margin:0 auto 18px;max-width:820px;text-wrap:balance}
+.hero h1 em{font-style:normal;color:var(--mint)}
+.hero p.lead{color:var(--muted);font-size:17.5px;max-width:600px;margin:0 auto 32px}
 .hero p.lead b{color:var(--ink)}
-/* live counter band — real chain numbers only */
-.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:38px 0 8px}
+.hero .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
+/* neon arcs behind the hero text */
+.arcs{position:absolute;inset:-40px 0 0 0;z-index:-1;pointer-events:none}
+.arcs svg{width:100%;height:100%;overflow:visible}
+.arc{fill:none;stroke:url(#arcGrad);stroke-width:5;stroke-linecap:round;filter:url(#arcGlow)}
+.arc2{fill:none;stroke:url(#arcGrad);stroke-width:3;stroke-linecap:round;filter:url(#arcGlow);opacity:.8}
+/* falling glow streaks */
+.streak{position:absolute;top:-140px;width:1.5px;height:110px;pointer-events:none;
+  background:linear-gradient(180deg,transparent,rgba(143,251,227,.8));border-radius:2px;opacity:0}
+@media(prefers-reduced-motion:no-preference){
+  .streak{animation:fall 7s linear infinite}
+  @keyframes fall{0%{transform:translateY(0);opacity:0}12%{opacity:.7}55%{opacity:.5}75%{transform:translateY(72vh);opacity:0}100%{transform:translateY(72vh);opacity:0}}
+}
+/* ── counters ──────────────────────────────────────── */
+.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:60px auto 0;max-width:900px}
 @media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
-.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;
-  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
-.stat .n{font-family:var(--disp);font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--mint)}
-.stat .l{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
-.stat .sub{font-size:11.5px;color:var(--muted)}
-/* cards / grids */
-.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:0 0 16px;
-  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
-.card:hover{border-color:var(--line-strong)}
-.grid{display:grid;gap:16px}
-@media(min-width:760px){.grid.c3{grid-template-columns:1fr 1fr 1fr}.grid.c2{grid-template-columns:1fr 1fr}}
-h2{font-size:clamp(22px,3vw,30px);font-weight:800;margin:52px 0 16px;text-wrap:balance}
-h3{font-size:17px;margin:0 0 8px;font-weight:700}
+.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 12px;text-align:center}
+.stat .n{font-family:var(--disp);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--mint)}
+.stat .l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:3px}
+/* ── sections ──────────────────────────────────────── */
+section{padding:64px 0 8px}
+.sectionhead{text-align:center;max-width:640px;margin:0 auto 40px}
+h2{font-size:clamp(26px,3.2vw,36px);font-weight:700;margin:0 0 12px;text-wrap:balance}
+.sectionhead p{color:var(--muted);font-size:15.5px;margin:0}
+h3{font-size:16.5px;margin:0 0 8px;font-weight:700}
 .muted{color:var(--muted)}
 .small{font-size:13.5px}
 .mono{font-family:var(--mono)}
-/* ticker: live money marquee */
+/* icon-plate feature cards */
+.plates{display:grid;gap:16px;grid-template-columns:1fr}
+@media(min-width:760px){.plates{grid-template-columns:1fr 1fr 1fr}}
+.platecard{background:linear-gradient(170deg,rgba(22,38,32,.6),rgba(10,18,15,.7));border:1px solid var(--line);
+  border-radius:var(--radius);padding:26px 22px;text-align:center;transition:border-color .2s ease,transform .2s ease}
+.platecard:hover{border-color:var(--line-strong);transform:translateY(-4px)}
+.plate{width:88px;height:88px;margin:0 auto 18px;border-radius:22px;display:grid;place-items:center;
+  background:linear-gradient(160deg,#12241e,#0a1411);border:1px solid var(--line-strong);
+  box-shadow:0 0 34px rgba(67,232,195,.15),inset 0 1px 0 rgba(143,251,227,.15)}
+.plate svg{width:38px;height:38px;stroke:var(--mint);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
+.platecard p{color:var(--muted);font-size:14px;margin:0}
+/* two-col flank layout (icons around a central mockup) */
+.flank{display:grid;gap:26px;align-items:center;grid-template-columns:1fr}
+@media(min-width:920px){.flank{grid-template-columns:1fr 1.15fr 1fr}}
+.flankitem{margin:0 0 26px}
+.flankitem .plate{width:52px;height:52px;border-radius:14px;margin:0 0 12px}
+.flankitem .plate svg{width:24px;height:24px}
+.flankitem p{color:var(--muted);font-size:13.5px;margin:0}
+/* ledger mockup frame */
+.mockup{background:linear-gradient(170deg,#0e1c17,#080f0c);border:1px solid var(--line-strong);border-radius:20px;
+  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(67,232,195,.08);overflow:hidden}
+.mockup .bar{display:flex;gap:6px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)}
+.mockup .bar i{width:9px;height:9px;border-radius:50%;background:#1e3a31;display:inline-block}
+.mockup .bar .addr{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;background:rgba(4,8,7,.6);
+  border-radius:999px;padding:3px 12px}
+.mockup .body{padding:6px 0}
+.mockup .mrow{display:flex;justify-content:space-between;gap:10px;padding:9px 16px;font-family:var(--mono);
+  font-size:12px;border-bottom:1px solid rgba(84,150,128,.08)}
+.mockup .mrow span:last-child{color:var(--mint)}
+.mockup .mrow.dim span:last-child{color:var(--muted)}
+/* 2-col story block: iso illustration + checklist */
+.story{display:grid;gap:36px;align-items:center;grid-template-columns:1fr}
+@media(min-width:880px){.story{grid-template-columns:1fr 1fr}}
+.checks{list-style:none;padding:0;margin:14px 0 0}
+.checks li{padding:7px 0 7px 30px;position:relative;color:var(--muted);font-size:14.5px}
+.checks li::before{content:"✓";position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;
+  background:var(--mint-soft);color:var(--mint);font-size:12px;font-weight:700;display:grid;place-items:center;
+  border:1px solid rgba(67,232,195,.35)}
+.chips{display:flex;gap:8px;margin:14px 0 4px;flex-wrap:wrap}
+.chip-t{border:1px solid var(--line-strong);border-radius:999px;padding:5px 16px;font-size:12.5px;color:var(--muted);font-family:var(--disp);font-weight:600}
+.chip-t.on{background:var(--mint);color:var(--mint-ink);border-color:var(--mint)}
+.iso{filter:drop-shadow(0 24px 50px rgba(0,0,0,.5))}
+/* pricing tiles: mint discipline */
+.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));align-items:stretch}
+.tile{position:relative;background:linear-gradient(170deg,rgba(22,38,32,.55),rgba(10,18,15,.65));border:1px solid var(--line);
+  border-radius:var(--radius);padding:26px 18px;text-align:center;display:flex;flex-direction:column;gap:6px;
+  transition:transform .2s ease,border-color .2s ease}
+.tile:hover{transform:translateY(-5px);border-color:var(--line-strong)}
+.tile .name{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
+.tile .price{font-family:var(--disp);font-size:36px;font-weight:700}
+.tile .cr{color:var(--mint);font-weight:700;font-size:14.5px}
+.tile .bonus{font-size:12px;color:var(--mint-hi)}
+.tile .pol{font-family:var(--mono);font-size:12px;color:var(--muted);flex:1}
+.tile.hot{border:1px solid rgba(67,232,195,.65);box-shadow:0 0 44px rgba(67,232,195,.14)}
+.tile.hot::before{content:"MOST POPULAR";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
+  background:var(--mint);color:var(--mint-ink);font-family:var(--disp);font-size:10px;font-weight:800;
+  letter-spacing:.12em;border-radius:999px;padding:4px 14px}
+/* split strip: mint opacities */
+.split{display:flex;gap:8px;margin:18px 0}
+.split div{border-radius:12px;padding:16px 6px;text-align:center;font-size:13px;font-weight:700;font-family:var(--disp);
+  border:1px solid var(--line-strong);color:var(--mint)}
+.split .s50{flex:5;background:rgba(67,232,195,.16);box-shadow:0 0 30px rgba(67,232,195,.12)}
+.split .s20{flex:2;background:rgba(67,232,195,.09)}
+.split .s10{flex:1;background:rgba(67,232,195,.05)}
+.split .sa{flex:2;background:rgba(139,166,156,.08);color:var(--muted)}
+/* ticker */
 .ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
-  background:rgba(61,232,168,.05);white-space:nowrap;padding:9px 0;margin:26px 0 0}
-.ticker .inner{display:inline-block;font-family:var(--mono);font-size:13px;color:var(--mint);padding-left:100%;
-  animation:tick 40s linear infinite}
-.ticker .inner span{margin-right:44px;color:var(--muted)}
+  background:rgba(67,232,195,.04);white-space:nowrap;padding:10px 0;
+  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
+  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
+.ticker .inner{display:inline-block;font-family:var(--mono);font-size:12.5px;padding-left:100%;animation:tick 42s linear infinite}
+.ticker .inner span{margin-right:48px;color:var(--muted)}
 .ticker .inner span b{color:var(--mint);font-weight:600}
 @keyframes tick{to{transform:translateX(-100%)}}
 @media(prefers-reduced-motion:reduce){.ticker .inner{animation:none;padding-left:0}}
-/* ladder table */
+/* cards / tables / feed (inner pages) */
+.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:0 0 16px}
+.card:hover{border-color:var(--line-strong)}
+.grid{display:grid;gap:16px}
+@media(min-width:760px){.grid.c3{grid-template-columns:1fr 1fr 1fr}.grid.c2{grid-template-columns:1fr 1fr}}
 table{width:100%;border-collapse:collapse;font-size:15px}
 th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
 th{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;font-family:var(--disp)}
 td.num,th.num{font-variant-numeric:tabular-nums}
 tr:last-child td{border-bottom:0}
 .tablewrap{overflow-x:auto}
-/* ledger feed */
 .feed{font-family:var(--mono);font-size:13.5px;line-height:1.7}
-.feed .row{padding:8px 12px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
+.feed .row{padding:9px 14px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
 .feed .row:first-child{background:var(--mint-soft)}
-.feed .t-Purchase{color:var(--amber)}
+.feed .t-Purchase,.feed .t-AwardPaid{color:var(--mint-hi)}
 .feed .t-TierPaid{color:var(--mint)}
 .feed .t-AdminPaid{color:var(--muted)}
-.feed .t-AwardPaid{color:var(--amber)}
 .feed .tx a{color:var(--muted);font-size:12px}
-.badge{display:inline-block;background:var(--mint-soft);color:var(--mint);border:1px solid rgba(61,232,168,.3);
-  border-radius:999px;padding:2px 12px;font-size:12.5px;font-weight:700}
-.badge.amber{background:rgba(255,178,56,.1);border-color:rgba(255,178,56,.35);color:var(--amber)}
-/* split strip */
-.split{display:flex;gap:8px;margin:16px 0}
-.split div{border-radius:10px;padding:13px 6px;text-align:center;font-size:12.5px;font-weight:700;font-family:var(--disp)}
-.split .s50{flex:5;background:var(--mint-soft);color:var(--mint);border:1px solid rgba(61,232,168,.3);
-  box-shadow:0 0 24px rgba(61,232,168,.12)}
-.split .s20{flex:2;background:rgba(92,200,238,.09);color:var(--cyan);border:1px solid rgba(92,200,238,.3)}
-.split .s10{flex:1;background:rgba(139,108,246,.1);color:var(--violet);border:1px solid rgba(139,108,246,.3)}
-.split .sa{flex:2;background:rgba(255,178,56,.08);color:var(--amber);border:1px solid rgba(255,178,56,.28)}
-/* FAQ accordions */
-details{border:1px solid var(--line);border-radius:12px;margin:0 0 10px;background:var(--panel)}
-summary{cursor:pointer;padding:14px 18px;font-weight:700;font-family:var(--disp);font-size:15px}
-details p{margin:0;padding:0 18px 16px;color:var(--muted);font-size:14.5px}
-/* status toast */
+.badge{display:inline-block;background:var(--mint-soft);color:var(--mint);border:1px solid rgba(67,232,195,.35);
+  border-radius:999px;padding:3px 13px;font-size:12px;font-weight:700}
+.badge.amber{background:rgba(139,166,156,.1);border-color:rgba(139,166,156,.4);color:var(--muted)}
+/* faq */
+details{border:1px solid var(--line);border-radius:14px;margin:0 0 10px;background:var(--panel)}
+details[open]{border-color:rgba(67,232,195,.45)}
+summary{cursor:pointer;padding:16px 20px;font-weight:700;font-family:var(--disp);font-size:15px;list-style:none}
+summary::before{content:"+";color:var(--mint);font-weight:800;margin-right:12px}
+details[open] summary::before{content:"−"}
+details p{margin:0;padding:0 20px 18px 42px;color:var(--muted);font-size:14.5px}
+/* closing cta card */
+.closer{position:relative;display:grid;gap:26px;align-items:center;grid-template-columns:1fr;
+  padding:44px 36px;border-radius:24px;overflow:hidden;margin:80px 0 0;
+  background:linear-gradient(160deg,#0d1d17,#060c0a);border:1px solid var(--line-strong)}
+@media(min-width:880px){.closer{grid-template-columns:1.2fr .8fr}}
+.closer::before{content:"";position:absolute;width:460px;height:460px;right:-140px;top:-260px;border-radius:50%;
+  background:radial-gradient(circle,rgba(67,232,195,.2),transparent 65%);pointer-events:none}
+.closer h2{margin:0 0 12px}
+/* footer + ghost wordmark */
+footer{border-top:1px solid var(--line);margin-top:90px;padding:34px 0 0;color:var(--muted);font-size:13.5px;overflow:hidden}
+.ghost{font-family:var(--disp);font-weight:800;font-size:clamp(64px,13vw,170px);line-height:.9;text-align:center;
+  margin:34px 0 -20px;letter-spacing:-.02em;user-select:none;
+  background:linear-gradient(180deg,rgba(67,232,195,.14),transparent 78%);
+  -webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
+/* misc */
 #status{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;background:var(--panel-solid);
   border:1px solid var(--line-strong);border-radius:14px;padding:13px 22px;font-size:14px;max-width:90vw;z-index:30;
   box-shadow:0 12px 40px rgba(0,0,0,.55)}
 #status.ok{border-color:var(--mint)}
 #status.bad{border-color:var(--bad)}
-footer{border-top:1px solid var(--line);margin-top:70px;padding:30px 0;color:var(--muted);font-size:13.5px}
-input,select{background:rgba(7,11,22,.6);border:1px solid var(--line-strong);color:var(--ink);border-radius:10px;
+input,select{background:rgba(4,8,7,.65);border:1px solid var(--line-strong);color:var(--ink);border-radius:11px;
   padding:11px 14px;font-size:14.5px;font-family:inherit}
 input:focus,select:focus{border-color:var(--mint)}
 :focus-visible{outline:2px solid var(--mint);outline-offset:2px}
+.hero-note{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:26px}
 @media(prefers-reduced-motion:no-preference){
   .feed .row:first-child{animation:landed .9s ease}
-  @keyframes landed{from{background:rgba(61,232,168,.28)}to{background:var(--mint-soft)}}
+  @keyframes landed{from{background:rgba(67,232,195,.3)}to{background:var(--mint-soft)}}
 }

public/index.html

@@ -8,101 +8,207 @@
 <link rel="stylesheet" href="/assets/site.css">
 </head>
 <body>
-<div class="wrap">
-  <section class="hero">
-    <p class="eyebrow">Advertising · settled on-chain · instantly</p>
-    <h1>Advertise and earn. <em>Locked in code, not promises.</em></h1>
+
+<section class="hero">
+  <div class="arcs">
+    <svg viewBox="0 0 1200 620" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+      <defs>
+        <linearGradient id="arcGrad" x1="0" y1="0" x2="1" y2="0">
+          <stop offset="0" stop-color="#43e8c3" stop-opacity="0"/>
+          <stop offset=".45" stop-color="#eafffa"/>
+          <stop offset=".75" stop-color="#43e8c3"/>
+          <stop offset="1" stop-color="#43e8c3" stop-opacity="0"/>
+        </linearGradient>
+        <filter id="arcGlow" x="-40%" y="-40%" width="180%" height="180%">
+          <feGaussianBlur stdDeviation="7" result="b"/>
+          <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+      </defs>
+      <path class="arc" d="M 700 150 C 880 90, 1080 130, 1220 260"/>
+      <path class="arc2" d="M -30 430 C 160 520, 420 520, 560 400"/>
+    </svg>
+  </div>
+  <span class="streak" style="left:12%;animation-delay:0s"></span>
+  <span class="streak" style="left:24%;animation-delay:2.1s"></span>
+  <span class="streak" style="left:41%;animation-delay:4.4s"></span>
+  <span class="streak" style="left:58%;animation-delay:1.2s"></span>
+  <span class="streak" style="left:72%;animation-delay:3.4s"></span>
+  <span class="streak" style="left:86%;animation-delay:5.6s"></span>
+  <div class="wrap">
+    <h1>Advertise and earn.<br><em>Locked in code, not promises.</em></h1>
     <p class="lead">Buy real ad packages from 5 to 250 dollars. Every purchase settles through
       a smart contract you can read yourself, and your earnings land in
       <b>your own wallet</b> before the page even refreshes.</p>
-    <p>
+    <div class="ctas">
       <a class="btn" href="/my">Join free</a>
       <a class="btn sec" href="/ledger">Watch payments land live</a>
-    </p>
-    <p class="small muted" id="sponsorLine" hidden></p>
-
+    </div>
+    <p class="small muted" id="sponsorLine" hidden style="margin-top:20px"></p>
     <div class="stats">
       <div class="stat"><div class="n" id="stMembers">–</div><div class="l">On-chain members</div></div>
       <div class="stat"><div class="n" id="stPurchases">–</div><div class="l">Packages bought</div></div>
-      <div class="stat"><div class="n" id="stPaid">–</div><div class="l">POL settled through</div></div>
-      <div class="stat"><div class="n" id="stPayouts">–</div><div class="l">Instant payouts delivered</div></div>
+      <div class="stat"><div class="n" id="stPaid">–</div><div class="l">POL settled</div></div>
+      <div class="stat"><div class="n" id="stPayouts">–</div><div class="l">Instant payouts</div></div>
     </div>
-    <p class="small muted">Every number above comes from the blockchain, not a marketing database.
-      Click any line on the <a href="/ledger">live ledger</a> to verify it yourself.</p>
-  </section>
-</div>
+    <p class="hero-note">every number above is read from the blockchain, not a marketing database</p>
+  </div>
+</section>
 
 <div class="ticker" hidden id="ticker"><div class="inner" id="tickerInner"></div></div>
 
-<div class="wrap">
-  <h2>Where every dollar goes</h2>
-  <div class="card">
-    <div class="split">
+<section>
+  <div class="wrap">
+    <div class="sectionhead">
+      <h2>Instant payments without compromise</h2>
+      <p>Most referral programs run on a database someone can change after you promote.
+        This one runs on Polygon, split by a contract nobody can touch. Not even us.</p>
+    </div>
+    <div class="plates">
+      <div class="platecard">
+        <div class="plate"><svg viewBox="0 0 24 24"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8z"/></svg></div>
+        <h3>Paid in the same transaction</h3>
+        <p>The purchase and every payout are one blockchain event. No balances held, no withdrawal
+          button, no company touching the money.</p>
+      </div>
+      <div class="platecard">
+        <div class="plate"><svg viewBox="0 0 24 24"><path d="M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6l-7-3z"/><path d="m9 12 2 2 4-4"/></svg></div>
+        <h3>Rules that cannot move</h3>
+        <p>50-20-10 across three levels plus a 20 percent platform fee, written as constants in an
+          immutable contract. There is no function to change them.</p>
+      </div>
+      <div class="platecard">
+        <div class="plate"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="m20 20-4.5-4.5"/><path d="M11 8v6M8 11h6"/></svg></div>
+        <h3>Verifiable by anyone</h3>
+        <p>Every payment streams to a public ledger with a verify link straight to the block explorer.
+          If it is not there, it did not happen.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section>
+  <div class="wrap">
+    <div class="sectionhead">
+      <h2>Watch the money move</h2>
+      <p>This is a live view, not a brochure. Real purchases split into real payouts,
+        each one a click away from the raw transaction.</p>
+    </div>
+    <div class="flank">
+      <div>
+        <div class="flankitem">
+          <div class="plate"><svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h4"/></svg></div>
+          <h3>Buy a package</h3>
+          <p>Priced in dollars, settled in POL at the live oracle rate. Overpayment refunds itself in the same transaction.</p>
+        </div>
+        <div class="flankitem">
+          <div class="plate"><svg viewBox="0 0 24 24"><path d="M12 3v13m0 0 5-5m-5 5-5-5"/><path d="M4 21h16"/></svg></div>
+          <h3>The contract splits it</h3>
+          <p>Half to the direct sponsor, then levels 2 and 3, then the platform. Automatically, immediately, every time.</p>
+        </div>
+      </div>
+      <div class="mockup" aria-label="live ledger preview">
+        <div class="bar"><i></i><i></i><i></i><span class="addr">instantadpay.com/ledger</span></div>
+        <div class="body" id="mockBody">
+          <div class="mrow"><span>🧾 member #7 bought package #2 ($20.00)</span><span>−213 POL</span></div>
+          <div class="mrow"><span>💸 level 1 payout → member #3</span><span>+106.5 POL</span></div>
+          <div class="mrow"><span>💸 level 2 payout → member #2</span><span>+42.6 POL</span></div>
+          <div class="mrow"><span>💸 level 3 payout → member #1</span><span>+21.3 POL</span></div>
+          <div class="mrow dim"><span>🏛 platform fee settled</span><span>42.6 POL</span></div>
+          <div class="mrow dim"><span>⭐ member #3 now has 2 qualifying buyers</span><span>level 2 ✓</span></div>
+        </div>
+      </div>
+      <div>
+        <div class="flankitem">
+          <div class="plate"><svg viewBox="0 0 24 24"><rect x="4" y="8" width="16" height="12" rx="2"/><path d="M8 8V6a4 4 0 0 1 8 0v2"/><circle cx="12" cy="14" r="1.6"/></svg></div>
+          <h3>Straight to their wallets</h3>
+          <p>Recipients get POL in their own wallets within seconds. Nothing to claim, nothing to request.</p>
+        </div>
+        <div class="flankitem">
+          <div class="plate"><svg viewBox="0 0 24 24"><path d="M4 17l5-5 4 3 7-8"/><path d="M14 7h6v6"/></svg></div>
+          <h3>Credits mint on-chain</h3>
+          <p>One credit is one cent of ad delivery across the network. Only your campaigns can ever spend them.</p>
+        </div>
+      </div>
+    </div>
+    <p class="small muted" style="text-align:center;margin-top:22px">Amounts shown are the $20 worked example at the current oracle rate. <a href="/ledger">Open the real ledger →</a></p>
+  </div>
+</section>
+
+<section>
+  <div class="wrap">
+    <div class="story">
+      <div>
+        <svg class="iso" viewBox="0 0 360 300" role="img" aria-label="Network of members connected to the settlement contract">
+          <defs>
+            <linearGradient id="cubeTop" x1="0" y1="0" x2="1" y2="1">
+              <stop offset="0" stop-color="#43e8c3"/><stop offset="1" stop-color="#1c7c65"/>
+            </linearGradient>
+            <filter id="softGlow" x="-60%" y="-60%" width="220%" height="220%">
+              <feGaussianBlur stdDeviation="6" result="b"/>
+              <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+            </filter>
+          </defs>
+          <g stroke="#1e4438" stroke-width="1.4" fill="none">
+            <path d="M180 150 L80 200 M180 150 L280 200 M180 150 L120 90 M180 150 L250 85 M80 200 L60 250 M80 200 L140 245 M280 200 L230 250 M280 200 L310 250"/>
+          </g>
+          <g filter="url(#softGlow)">
+            <path d="M180 110 L215 130 L180 150 L145 130 Z" fill="url(#cubeTop)"/>
+            <path d="M145 130 L180 150 L180 190 L145 168 Z" fill="#0f4437"/>
+            <path d="M215 130 L180 150 L180 190 L215 168 Z" fill="#16604c"/>
+          </g>
+          <g fill="#0d2a22" stroke="#2e8a71" stroke-width="1.3">
+            <circle cx="120" cy="90" r="10"/><circle cx="250" cy="85" r="10"/>
+            <circle cx="80" cy="200" r="10"/><circle cx="280" cy="200" r="10"/>
+            <circle cx="60" cy="250" r="8"/><circle cx="140" cy="245" r="8"/>
+            <circle cx="230" cy="250" r="8"/><circle cx="310" cy="250" r="8"/>
+          </g>
+          <g fill="#43e8c3">
+            <circle cx="120" cy="90" r="3"/><circle cx="250" cy="85" r="3"/>
+            <circle cx="80" cy="200" r="3"/><circle cx="280" cy="200" r="3"/>
+            <circle cx="60" cy="250" r="2.4"/><circle cx="140" cy="245" r="2.4"/>
+            <circle cx="230" cy="250" r="2.4"/><circle cx="310" cy="250" r="2.4"/>
+          </g>
+        </svg>
+      </div>
+      <div>
+        <h2>Earn deeper as your people buy</h2>
+        <p class="muted">Levels unlock by performance, never by payment. Refer buyers, and their
+          shares of every future purchase route to you automatically.</p>
+        <div class="chips"><span class="chip-t on">Level 1: open</span><span class="chip-t">Level 2: 2 buyers</span><span class="chip-t">Level 3: 5 buyers</span></div>
+        <ul class="checks">
+          <li>50 percent of every package your direct referrals ever buy</li>
+          <li>2 buyers of $20 or more unlock your 20 percent second level</li>
+          <li>5 buyers unlock your 10 percent third level</li>
+          <li>Unqualified shares visibly pass up to the next qualified person</li>
+          <li>Qualification never expires and can never be bought</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section>
+  <div class="wrap">
+    <div class="sectionhead">
+      <h2>The ad packages</h2>
+      <p>Priced in dollars, settled in POL at the moment you buy. Packages of $20 or more
+        count toward your sponsor's qualification.</p>
+    </div>
+    <div class="tiles" id="tiles"><div class="tile"><span class="muted small">Loading live prices from the contract…</span></div></div>
+    <div class="split" aria-label="Where every dollar goes">
       <div class="s50">50%<br>direct sponsor</div>
       <div class="s20">20%<br>level 2</div>
       <div class="s10">10%<br>level 3</div>
       <div class="sa">20%<br>platform</div>
     </div>
-    <p class="muted">Most referral programs run on a database someone can change after you promote.
-      This one runs on Polygon. The percentages are written into a contract nobody can touch, not even us.
-      Payouts split 50-20-10 across three levels plus a 20 percent platform fee, every single time, on a
-      <a href="/ledger">public ledger</a> where every payment has a verify link you can click.</p>
   </div>
+</section>
 
-  <div class="grid c3">
-    <div class="card"><h3>🆓 Join free. Earn from every package your referrals ever buy.</h3>
-      <p class="muted small">Sign up costs nothing. Zero. Every ad package your direct referrals buy for life
-        pays you 50 percent straight to your wallet. Level 2 pays 20 percent. Level 3 pays 10 percent.
-        No balances held, no withdrawal button, no company touching the money.</p></div>
-    <div class="card"><h3>📣 Real ads. Real audience. Credits on-chain.</h3>
-      <p class="muted small">Your ad credits are minted on-chain when you buy. One credit equals one cent of
-        ad delivery across our network of sites. Banner, text, and login ads that only your campaigns
-        can spend.</p></div>
-    <div class="card"><h3>🔎 Qualify by performance. Pass-ups fill the gaps.</h3>
-      <p class="muted small">Level 2 unlocks when you bring 2 buyers who have purchased 20 dollars or more.
-        Level 3 unlocks at 5 qualified buyers. If someone in your line is not qualified, their share passes
-        up to the next qualified person automatically. The contract handles it.</p></div>
-  </div>
-
-  <h2 id="ladder-h">The ad packages</h2>
-  <div class="card">
-    <div class="tablewrap">
-      <table id="ladder">
-        <thead><tr><th>Package</th><th class="num">Price</th><th class="num">Ad credits</th><th class="num">Cost right now</th><th></th></tr></thead>
-        <tbody><tr><td colspan="5" class="muted">Loading live prices from the contract…</td></tr></tbody>
-      </table>
+<section>
+  <div class="wrap">
+    <div class="sectionhead">
+      <h2>Questions people actually ask</h2>
     </div>
-    <p class="small muted">Prices are set in dollars and settled in POL at the live exchange rate the
-      moment you buy (Chainlink oracle). Overpayment from rate movement is refunded in the same transaction.
-      Packages of $20 or more count toward your sponsor's qualification.</p>
-  </div>
-
-  <h2>What your credits buy</h2>
-  <div class="grid c3">
-    <div class="card"><h3>Display banners</h3><p class="muted small">All standard sizes, served across the network. Per impression.</p><span class="badge">live</span></div>
-    <div class="card"><h3>Text ads</h3><p class="muted small">Headline plus one line, placed where members actually look. Per impression.</p><span class="badge">live</span></div>
-    <div class="card"><h3>Login ads</h3><p class="muted small">Full attention at sign-in, priced per day.</p><span class="badge">live</span></div>
-    <div class="card"><h3>Inbox ads</h3><p class="muted small">Delivered on-site, and viewers earn credits for reading.</p><span class="badge amber">shipping soon</span></div>
-    <div class="card"><h3>Featured rotation</h3><p class="muted small">Your link in the featured rotation for 1, 2, or 7 days. We show you exactly how many links share it before you buy.</p><span class="badge amber">shipping soon</span></div>
-    <div class="card"><h3>Verified visits</h3><p class="muted small">Buy a guaranteed count of verified unique visits. No bots, no recycled clicks.</p><span class="badge amber">shipping soon</span></div>
-  </div>
-
-  <h2>Why this is different</h2>
-  <div class="grid c2">
-    <div class="card"><h3>No trust required. Your earnings are a transaction to your wallet.</h3>
-      <p class="muted small">Every other platform asks you to trust their ledger. Believe their numbers.
-        Wait for their withdrawal window. InstantAdPay does none of that. The smart contract pays each level
-        at the moment of purchase. Your earnings are a blockchain transaction landing in your own wallet.
-        You can verify every single one on the <a href="/ledger">live ledger</a> with your own eyes.</p></div>
-    <div class="card"><h3>It is an ad service. That is the only thing it is.</h3>
-      <p class="muted small">This is an advertising platform with a referral program. Plain and simple.
-        You buy ad credits. You get ads delivered. You refer other advertisers and earn from what they spend.
-        There is no investment pool, no ROI claim, no income promise. What the code guarantees is what the
-        code does: split the money and pay it out. That is it.</p></div>
-  </div>
-
-  <h2>Questions people actually ask</h2>
-  <div id="faq">
     <details><summary>Is this a pyramid or ponzi scheme?</summary>
       <p>No, and here is the plain version of why. A pyramid scheme pays you just for recruiting, with no
       real product behind it. Here every payment is for ad delivery, and the payouts only come from real
@@ -126,21 +232,33 @@
       The 5 dollar package mints 500 credits, and the bigger packages mint bonus credits on top, up to
       32,500 on the 250 dollar package. That is the product, plain and simple. Your earnings come from
       referring people who also buy real ad delivery, and the contract splits every purchase automatically.</p></details>
-  </div>
 
-  <div class="card" style="text-align:center;padding:40px 22px">
-    <h2 style="margin:0 0 10px">See a payment land before you decide.</h2>
-    <p class="muted" style="max-width:520px;margin:0 auto 22px">The ledger is open to everyone.
-      Watch real purchases split and settle, then join free when you have seen enough.</p>
-    <a class="btn" href="/my">Join free</a>
-    <a class="btn sec" href="/ledger">Open the live ledger</a>
-  </div>
+    <div class="closer">
+      <div>
+        <h2>See a payment land before you decide.</h2>
+        <p class="muted" style="margin:0 0 22px">The ledger is open to everyone. Watch real purchases
+          split and settle, then join free when you have seen enough.</p>
+        <a class="btn" href="/my">Join free</a>
+        <a class="btn sec" href="/ledger">Open the live ledger</a>
+      </div>
+      <div class="mockup">
+        <div class="bar"><i></i><i></i><i></i><span class="addr">live · polygon</span></div>
+        <div class="body">
+          <div class="mrow"><span>💸 payout → member #3</span><span>instant</span></div>
+          <div class="mrow"><span>💸 payout → member #2</span><span>instant</span></div>
+          <div class="mrow dim"><span>🔍 verify on explorer</span><span>↗</span></div>
+        </div>
+      </div>
+    </div>
+
+    <footer>
+      <div>InstantAdPay · every payment verifiable on-chain · <a href="/ledger">live ledger</a> · <a id="contractLink" href="#" target="_blank" rel="noopener">view the contract ↗</a></div>
+      <div class="small">Advertising services with a performance referral program. Not an investment product; no income guarantees. Crypto transactions are irreversible. Never spend what you cannot afford.</div>
+      <div class="ghost" aria-hidden="true">InstantAdPay</div>
+    </footer>
+  </div>
+</section>
 
-  <footer>
-    <div>InstantAdPay · every payment verifiable on-chain · <a href="/ledger">live ledger</a> · <a id="contractLink" href="#" target="_blank" rel="noopener">view the contract ↗</a></div>
-    <div class="small">Advertising services with a performance referral program. Not an investment product; no income guarantees. Crypto transactions are irreversible. Never spend what you cannot afford.</div>
-  </footer>
-</div>
 <script src="/assets/common.js"></script>
 <script src="/assets/wallet.js"></script>
 <script src="/assets/home.js"></script>