Instantly headline, ad-product sections, animated level cycler

Hero now reads Advertise and earn instantly. New Branded Voice sections:
ad-format showcase (3 live, 3 soon) and free-vs-package member benefits.
The earn-deeper diagram cycles levels 1-3, lighting the paying generation
with its percent; chips are clickable, auto-advance respects reduced
motion.

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

public/assets/home.js

@@ -67,6 +67,33 @@
       IAP.$('ticker').hidden = false;
     } catch (e) {}
   }
+  // level cycler: chips + generation highlighting + auto-advance
+  const LVL = {
+    1: { pct: '50%', desc: 'Level 1 is open to every member: your direct referrals each pay you 50 percent of every package they ever buy, straight to your wallet.' },
+    2: { pct: '20%', desc: 'Bring 2 buyers of $20 or more and level 2 unlocks: 20 percent of every package your referrals’ referrals buy, on every purchase, forever.' },
+    3: { pct: '10%', desc: 'At 5 qualifying buyers, level 3 opens the third generation: 10 percent of everything they buy. Eight positions deep in this picture, and it keeps growing.' }
+  };
+  const viz = document.getElementById('genViz');
+  if (viz) {
+    const chips = [...document.querySelectorAll('.chips [data-lvl]')];
+    const setLvl = n => {
+      viz.dataset.lvl = n;
+      document.getElementById('vizPct').textContent = LVL[n].pct;
+      document.getElementById('lvlDesc').textContent = LVL[n].desc;
+      chips.forEach(ch => ch.classList.toggle('on', ch.dataset.lvl === String(n)));
+    };
+    let cur = 1;
+    let auto = null;
+    if (!matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      auto = setInterval(() => { cur = cur % 3 + 1; setLvl(cur); }, 4200);
+    }
+    chips.forEach(ch => ch.addEventListener('click', () => {
+      if (auto) { clearInterval(auto); auto = null; } // a click takes the wheel
+      cur = Number(ch.dataset.lvl);
+      setLvl(cur);
+    }));
+  }
+
   loadLadder();
   loadStats();
   loadTicker();

public/assets/site.css

@@ -123,6 +123,16 @@ h3{font-size:16.5px;margin:0 0 8px;font-weight:700}
 .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))}
+/* level cycler: light the paying generation */
+#genViz .edge path{stroke:#22523f;transition:stroke .5s ease}
+#genViz .node-o{fill:#122e25;stroke:#2f6b55;stroke-width:1.3;transition:stroke .5s ease,fill .5s ease}
+#genViz .node-d{fill:#3f8f74;transition:fill .5s ease}
+#genViz[data-lvl="1"] .e1 path,#genViz[data-lvl="2"] .e2 path,#genViz[data-lvl="3"] .e3 path{stroke:#43e8c3}
+#genViz[data-lvl="1"] .g1 .node-o,#genViz[data-lvl="2"] .g2 .node-o,#genViz[data-lvl="3"] .g3 .node-o{stroke:#43e8c3;fill:#11362b}
+#genViz[data-lvl="1"] .g1 .node-d,#genViz[data-lvl="2"] .g2 .node-d,#genViz[data-lvl="3"] .g3 .node-d{fill:#43e8c3}
+.chips button{cursor:pointer;background:transparent;font:inherit}
+.chips button.chip-t{border:1px solid var(--line-strong);color:var(--muted)}
+.chips button.chip-t.on{background:var(--mint);color:var(--mint-ink);border-color:var(--mint)}
 /* 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);

public/index.html

@@ -35,7 +35,7 @@
   <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>
+    <h1>Advertise and earn instantly.<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>
@@ -138,7 +138,7 @@
   <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">
+        <svg class="iso" id="genViz" data-lvl="1" viewBox="0 0 360 320" role="img" aria-label="Your position at the top of a three-generation network; each level lights up the generation that pays you">
           <defs>
             <linearGradient id="cubeTop" x1="0" y1="0" x2="1" y2="1">
               <stop offset="0" stop-color="#43e8c3"/><stop offset="1" stop-color="#1c7c65"/>
@@ -148,25 +148,34 @@
               <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
             </filter>
           </defs>
-          <g stroke="#1e4438" stroke-width="1.4" fill="none">
+          <g class="edge e1"><path d="M180 92 L120 138 M180 92 L240 138" fill="none" stroke-width="1.6"/></g>
-            <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 class="edge e2"><path d="M120 152 L75 205 M120 152 L150 205 M240 152 L210 205 M240 152 L285 205" fill="none" stroke-width="1.4"/></g>
-          </g>
+          <g class="edge e3"><path d="M75 219 L45 272 M75 219 L95 272 M150 219 L130 272 M150 219 L170 272 M210 219 L195 272 M210 219 L232 272 M285 219 L268 272 M285 219 L315 272" fill="none" stroke-width="1.2"/></g>
           <g filter="url(#softGlow)">
-            <path d="M180 110 L215 130 L180 150 L145 130 Z" fill="url(#cubeTop)"/>
+            <path d="M180 38 L212 56 L180 74 L148 56 Z" fill="url(#cubeTop)"/>
-            <path d="M145 130 L180 150 L180 190 L145 168 Z" fill="#0f4437"/>
+            <path d="M148 56 L180 74 L180 110 L148 90 Z" fill="#0f4437"/>
-            <path d="M215 130 L180 150 L180 190 L215 168 Z" fill="#16604c"/>
+            <path d="M212 56 L180 74 L180 110 L212 90 Z" fill="#16604c"/>
           </g>
-          <g fill="#0d2a22" stroke="#2e8a71" stroke-width="1.3">
+          <text id="vizPct" x="236" y="66" font-size="26" font-weight="700" fill="#43e8c3" font-family="Sora,sans-serif">50%</text>
-            <circle cx="120" cy="90" r="10"/><circle cx="250" cy="85" r="10"/>
+          <g class="gen g1">
-            <circle cx="80" cy="200" r="10"/><circle cx="280" cy="200" r="10"/>
+            <circle class="node-o" cx="120" cy="145" r="11"/><circle class="node-d" cx="120" cy="145" r="3.4"/>
-            <circle cx="60" cy="250" r="8"/><circle cx="140" cy="245" r="8"/>
+            <circle class="node-o" cx="240" cy="145" r="11"/><circle class="node-d" cx="240" cy="145" r="3.4"/>
-            <circle cx="230" cy="250" r="8"/><circle cx="310" cy="250" r="8"/>
           </g>
-          <g fill="#43e8c3">
+          <g class="gen g2">
-            <circle cx="120" cy="90" r="3"/><circle cx="250" cy="85" r="3"/>
+            <circle class="node-o" cx="75" cy="212" r="9"/><circle class="node-d" cx="75" cy="212" r="2.8"/>
-            <circle cx="80" cy="200" r="3"/><circle cx="280" cy="200" r="3"/>
+            <circle class="node-o" cx="150" cy="212" r="9"/><circle class="node-d" cx="150" cy="212" r="2.8"/>
-            <circle cx="60" cy="250" r="2.4"/><circle cx="140" cy="245" r="2.4"/>
+            <circle class="node-o" cx="210" cy="212" r="9"/><circle class="node-d" cx="210" cy="212" r="2.8"/>
-            <circle cx="230" cy="250" r="2.4"/><circle cx="310" cy="250" r="2.4"/>
+            <circle class="node-o" cx="285" cy="212" r="9"/><circle class="node-d" cx="285" cy="212" r="2.8"/>
+          </g>
+          <g class="gen g3">
+            <circle class="node-o" cx="45" cy="280" r="7.5"/><circle class="node-d" cx="45" cy="280" r="2.3"/>
+            <circle class="node-o" cx="95" cy="280" r="7.5"/><circle class="node-d" cx="95" cy="280" r="2.3"/>
+            <circle class="node-o" cx="130" cy="280" r="7.5"/><circle class="node-d" cx="130" cy="280" r="2.3"/>
+            <circle class="node-o" cx="170" cy="280" r="7.5"/><circle class="node-d" cx="170" cy="280" r="2.3"/>
+            <circle class="node-o" cx="195" cy="280" r="7.5"/><circle class="node-d" cx="195" cy="280" r="2.3"/>
+            <circle class="node-o" cx="232" cy="280" r="7.5"/><circle class="node-d" cx="232" cy="280" r="2.3"/>
+            <circle class="node-o" cx="268" cy="280" r="7.5"/><circle class="node-d" cx="268" cy="280" r="2.3"/>
+            <circle class="node-o" cx="315" cy="280" r="7.5"/><circle class="node-d" cx="315" cy="280" r="2.3"/>
           </g>
         </svg>
       </div>
@@ -174,11 +183,14 @@
         <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>
+        <div class="chips">
+          <button class="chip-t on" data-lvl="1" type="button">Level 1: open</button>
+          <button class="chip-t" data-lvl="2" type="button">Level 2: 2 buyers</button>
+          <button class="chip-t" data-lvl="3" type="button">Level 3: 5 buyers</button>
+        </div>
+        <p class="muted" id="lvlDesc" style="min-height:72px">Level 1 is open to every member: your direct
+          referrals each pay you 50 percent of every package they ever buy, straight to your wallet.</p>
         <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>
@@ -187,6 +199,79 @@
   </div>
 </section>
 
+<section>
+  <div class="wrap">
+    <div class="sectionhead">
+      <h2>Real ad inventory. Real eyeballs.</h2>
+      <p>This is not phantom traffic or empty impressions. The core formats run right now,
+        reaching members who are themselves marketers buying traffic.</p>
+    </div>
+    <div class="plates">
+      <div class="platecard">
+        <div class="plate"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="12" rx="2"/><path d="M7 21h10M12 17v4"/></svg></div>
+        <h3>Display banners <span class="badge">live</span></h3>
+        <p>All standard sizes, live across our network, priced per impression. You pay for views, not guesses.</p>
+      </div>
+      <div class="platecard">
+        <div class="plate"><svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h9"/></svg></div>
+        <h3>Text ads <span class="badge">live</span></h3>
+        <p>A headline plus a support line, placed where members actually look. Also per impression, also live right now.</p>
+      </div>
+      <div class="platecard">
+        <div class="plate"><svg viewBox="0 0 24 24"><circle cx="12" cy="9" r="3.5"/><path d="M5 20c1.5-3.5 4-5 7-5s5.5 1.5 7 5"/><rect x="3" y="3" width="18" height="18" rx="3"/></svg></div>
+        <h3>Login ads <span class="badge">live</span></h3>
+        <p>Full attention at sign-in, priced per day. The member is already engaged before they do anything else.</p>
+      </div>
+      <div class="platecard">
+        <div class="plate"><svg viewBox="0 0 24 24"><path d="M3 7l9 6 9-6"/><rect x="3" y="5" width="18" height="14" rx="2"/></svg></div>
+        <h3>Inbox ads <span class="badge amber">soon</span></h3>
+        <p>Delivered on-site, where members earn credits just for reading them.</p>
+      </div>
+      <div class="platecard">
+        <div class="plate"><svg viewBox="0 0 24 24"><path d="M12 3v4M12 17v4M3 12h4M17 12h4"/><circle cx="12" cy="12" r="4.5"/></svg></div>
+        <h3>Featured rotation <span class="badge amber">soon</span></h3>
+        <p>Your link runs for 1, 2 or 7 days, and we show exactly how many links share the rotation before you buy.
+          The only rotator that tells you the dilution up front, because hiding it is a sucker move.</p>
+      </div>
+      <div class="platecard">
+        <div class="plate"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></div>
+        <h3>Verified visits <span class="badge amber">soon</span></h3>
+        <p>A guaranteed count of verified unique human visits. No bots, no recycled clicks, just real visits you can count on.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section>
+  <div class="wrap">
+    <div class="sectionhead">
+      <h2>What you get as a member</h2>
+      <p>Free membership gets you in the door with a working account and the ability to earn
+        from day one. Buy any package and the real firepower unlocks.</p>
+    </div>
+    <div class="grid c2">
+      <div class="card">
+        <h3>Free membership includes</h3>
+        <ul class="checks">
+          <li>A member account and the live ledger</li>
+          <li>Your personal referral link, once payouts are switched on</li>
+          <li>Earnings from day one on your referrals' package purchases</li>
+          <li>Access to the member dashboard</li>
+        </ul>
+      </div>
+      <div class="card">
+        <h3>Any package adds</h3>
+        <ul class="checks">
+          <li>On-chain ad credits minted the moment you buy</li>
+          <li>Campaign manager with live stats per campaign</li>
+          <li>Real delivery numbers you can track</li>
+          <li>Packages of $20 or more count toward qualification</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
+
 <section>
   <div class="wrap">
     <div class="sectionhead">