Add live demo poll, wallet callout, and deploy section

- Try It Live: fetches active polls and renders inline voting widget
- Why ZK Voting: expanded to 3 columns with Wallet-Native Auth card
- Deploy to Your Chain: Foundry bundle download with 3-command workflow
- CSS for demo poll widget, deploy code blocks, inline code in cards

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: stackdump

public/bitwrap.css

@@ -327,6 +327,15 @@ body {
     font-weight: 600;
 }
 
+.angle-card code {
+    font-family: var(--mono);
+    font-size: 0.85em;
+    color: var(--accent);
+    background: var(--accent-dim);
+    padding: 2px 6px;
+    border-radius: 3px;
+}
+
 /* Footer */
 .footer {
     border-top: 1px solid var(--border);
@@ -362,6 +371,103 @@ body {
     font-size: 0.8rem;
 }
 
+/* Demo poll widget */
+.demo-poll {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.demo-poll-loading {
+    text-align: center;
+    color: var(--text-muted);
+    padding: 40px;
+}
+
+.demo-poll-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 28px;
+}
+
+.demo-poll-card h3 {
+    font-size: 1.15rem;
+    font-weight: 600;
+    margin: 0 0 4px;
+}
+
+.demo-poll-meta {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin-bottom: 20px;
+}
+
+.demo-poll-choice {
+    display: block;
+    width: 100%;
+    background: transparent;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--text);
+    padding: 12px 16px;
+    font-size: 0.95rem;
+    font-family: var(--font);
+    cursor: pointer;
+    margin-bottom: 8px;
+    text-align: left;
+    transition: border-color 0.2s, background 0.2s;
+}
+
+.demo-poll-choice:hover {
+    border-color: var(--accent);
+    background: var(--accent-dim);
+}
+
+.demo-poll-status {
+    font-family: var(--mono);
+    font-size: 0.75rem;
+    color: var(--accent);
+    background: var(--accent-dim);
+    padding: 3px 8px;
+    border-radius: 4px;
+    display: inline-block;
+    margin-left: 8px;
+    vertical-align: middle;
+}
+
+.demo-poll-empty {
+    text-align: center;
+    color: var(--text-muted);
+    padding: 32px;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+}
+
+.demo-poll-empty a {
+    color: var(--accent);
+    text-decoration: none;
+}
+
+/* Deploy code block */
+.deploy-code {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 20px 24px;
+    font-family: var(--mono);
+    font-size: 0.85rem;
+    line-height: 1.7;
+    color: var(--text);
+    margin: 12px 0 0;
+    overflow-x: auto;
+    white-space: pre;
+}
+
+.deploy-code .comment { color: #555; }
+.deploy-code .flag { color: #888; }
+.deploy-code .string { color: var(--accent); }
+
 /* Editor toolbar */
 .editor-toolbar {
     position: fixed;

public/index.html

@@ -104,23 +104,66 @@ <h3>Tally</h3>
         </div>
     </section>
 
+    <section class="section" id="try-it">
+        <h2>Try It Live</h2>
+        <p class="section-sub">Cast a vote on an active poll. Your choice stays hidden until the poll closes.</p>
+        <div id="demo-poll" class="demo-poll">
+            <div class="demo-poll-loading">Loading active polls&hellip;</div>
+        </div>
+        <div style="text-align:center; margin-top: 24px;">
+            <a class="btn-secondary" href="/poll" style="font-size:0.9rem; padding:10px 24px;">View All Polls</a>
+        </div>
+    </section>
+
     <section class="section section-dark">
         <h2>Why ZK Voting?</h2>
-        <div class="grid-2">
+        <div class="grid-3">
             <div class="angle-card">
                 <h3>Voter Privacy</h3>
                 <p>Nullifiers link each ballot to a registered voter without revealing who voted for what. The proof confirms eligibility; the choice stays hidden.</p>
             </div>
+            <div class="angle-card">
+                <h3>Wallet-Native Auth</h3>
+                <p>Connect MetaMask to create polls and derive voting secrets from wallet signatures. No accounts, no passwords &mdash; your key is your identity.</p>
+            </div>
             <div class="angle-card">
                 <h3>Verifiable Results</h3>
                 <p>Every vote carries a Groth16 proof that the on-chain verifier checks. No trusted tallier, no back-room count &mdash; the math is the audit.</p>
             </div>
         </div>
     </section>
 
-    <section class="section">
+    <section class="section" id="deploy">
+        <h2>Deploy to Your Chain</h2>
+        <p class="section-sub">Download a complete Foundry project. Deploy the ZK poll contract to any EVM chain in minutes.</p>
+        <div class="grid-2">
+            <div class="angle-card">
+                <h3>What You Get</h3>
+                <p><code>BitwrapZKPoll.sol</code> &mdash; governance contract with nullifier-based double-vote prevention and voter registry Merkle root verification.</p>
+                <p style="margin-top:12px;"><code>Verifier.sol</code> &mdash; auto-generated Groth16 verifier for the voteCast circuit. Deployed alongside the poll contract.</p>
+                <p style="margin-top:12px;"><code>Deploy.s.sol</code> &mdash; Foundry deployment script with sample initialization.</p>
+            </div>
+            <div class="angle-card">
+                <h3>Three Commands</h3>
+<pre class="deploy-code"><span class="comment"># Download the bundle</span>
+<span class="flag">curl</span> -o poll.zip https://api.bitwrap.io/api/bundle/vote
+
+<span class="comment"># Build &amp; test</span>
+<span class="flag">cd</span> BitwrapZKPoll && <span class="flag">forge</span> test
+
+<span class="comment"># Deploy</span>
+<span class="flag">forge</span> script script/Deploy.s.sol \
+  --rpc-url <span class="string">$RPC_URL</span> --broadcast</pre>
+            </div>
+        </div>
+        <div style="text-align:center; margin-top: 32px;">
+            <a class="btn-primary" href="/api/bundle/vote" style="font-size:0.9rem; padding:12px 28px;">Download Foundry Bundle</a>
+        </div>
+    </section>
+
+    <section class="section section-dark">
         <h2>Built on Petri Net Foundations</h2>
-        <p class="section-sub">The voting protocol is one application of a general-purpose ZK state machine. The same framework powers token standards.</p>
+        <p class="section-sub" style="max-width:900px; margin-left:auto; margin-right:auto;">The voting protocol is one application of a general-purpose ZK state machine. The same framework powers token standards.</p>
         <div class="grid-4" id="template-cards">
             <div class="template-card" data-template="vote">
                 <div class="template-badge">Vote</div>
@@ -159,5 +202,37 @@ <h3>Multi Token</h3>
     </footer>
 </div>
 
+<script>
+(function() {
+    const el = document.getElementById('demo-poll');
+    if (!el) return;
+
+    fetch('/api/polls')
+        .then(r => r.json())
+        .then(data => {
+            const polls = (data.polls || []).filter(p => p.status === 'active');
+            if (polls.length === 0) {
+                el.innerHTML = '<div class="demo-poll-empty">No active polls right now. <a href="/poll">Create one</a> to see it here.</div>';
+                return;
+            }
+            const poll = polls[0];
+            const choices = (poll.choices || []).map(c => {
+                const safe = c.replace(/&/g,'&amp;').replace(/</g,'&lt;');
+                return '<button class="demo-poll-choice" onclick="location.href=\'/poll#' + poll.id + '\'">' + safe + '</button>';
+            }).join('');
+            const votes = poll.voteCount || 0;
+            el.innerHTML =
+                '<div class="demo-poll-card">' +
+                    '<h3>' + poll.title.replace(/&/g,'&amp;').replace(/</g,'&lt;') +
+                    '<span class="demo-poll-status">active</span></h3>' +
+                    '<div class="demo-poll-meta">' + votes + ' vote' + (votes !== 1 ? 's' : '') + ' cast &middot; results sealed</div>' +
+                    choices +
+                '</div>';
+        })
+        .catch(() => {
+            el.innerHTML = '<div class="demo-poll-empty">Could not load polls. <a href="/poll">Go to polls</a></div>';
+        });
+})();
+</script>
 </body>
 </html>