npm - web-agent-bridge - Versions diffs - 3.2.0 → 3.3.0 - Mend

web-agent-bridge 3.2.0 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/LICENSE +72 -72
package/README.ar.md +1286 -1152
package/README.md +1764 -1635
package/bin/agent-runner.js +474 -474
package/bin/cli.js +237 -138
package/bin/wab.js +80 -80
package/examples/bidi-agent.js +119 -119
package/examples/cross-site-agent.js +91 -91
package/examples/mcp-agent.js +94 -94
package/examples/next-app-router/README.md +44 -44
package/examples/puppeteer-agent.js +108 -108
package/examples/saas-dashboard/README.md +55 -55
package/examples/shopify-hydrogen/README.md +74 -74
package/examples/vision-agent.js +171 -171
package/examples/wordpress-elementor/README.md +77 -77
package/package.json +16 -3
package/public/.well-known/agent-tools.json +180 -180
package/public/.well-known/ai-assets.json +59 -59
package/public/.well-known/security.txt +8 -0
package/public/agent-workspace.html +349 -349
package/public/ai.html +198 -198
package/public/api.html +413 -412
package/public/browser.html +486 -486
package/public/commander-dashboard.html +243 -243
package/public/cookies.html +210 -210
package/public/css/agent-workspace.css +1713 -1713
package/public/css/premium.css +317 -317
package/public/css/styles.css +1235 -1235
package/public/dashboard.html +706 -706
package/public/dns.html +507 -0
package/public/docs.html +587 -587
package/public/feed.xml +89 -89
package/public/growth.html +463 -463
package/public/index.html +1070 -982
package/public/integrations.html +556 -0
package/public/js/agent-workspace.js +1740 -1740
package/public/js/auth-nav.js +31 -31
package/public/js/auth-redirect.js +12 -12
package/public/js/cookie-consent.js +56 -56
package/public/js/wab-demo-page.js +721 -721
package/public/js/ws-client.js +74 -74
package/public/llms-full.txt +360 -360
package/public/llms.txt +125 -125
package/public/login.html +85 -85
package/public/mesh-dashboard.html +328 -328
package/public/openapi.json +580 -580
package/public/phone-shield.html +281 -0
package/public/premium-dashboard.html +2489 -2489
package/public/premium.html +793 -793
package/public/privacy.html +297 -297
package/public/register.html +105 -105
package/public/robots.txt +87 -87
package/public/script/wab-consent.d.ts +36 -36
package/public/script/wab-consent.js +104 -104
package/public/script/wab-schema.js +131 -131
package/public/script/wab.d.ts +108 -108
package/public/script/wab.min.js +580 -580
package/public/security.txt +8 -0
package/public/terms.html +256 -256
package/script/ai-agent-bridge.js +1754 -1754
package/sdk/README.md +99 -99
package/sdk/agent-mesh.js +449 -449
package/sdk/commander.js +262 -262
package/sdk/index.d.ts +464 -464
package/sdk/index.js +12 -1
package/sdk/multi-agent.js +318 -318
package/sdk/package.json +1 -1
package/sdk/safety-shield.js +219 -0
package/sdk/schema-discovery.js +83 -83
package/server/adapters/index.js +520 -520
package/server/config/plans.js +367 -367
package/server/config/secrets.js +102 -102
package/server/control-plane/index.js +301 -301
package/server/data-plane/index.js +354 -354
package/server/index.js +531 -427
package/server/llm/index.js +404 -404
package/server/middleware/adminAuth.js +35 -35
package/server/middleware/auth.js +50 -50
package/server/middleware/featureGate.js +88 -88
package/server/middleware/rateLimits.js +100 -100
package/server/middleware/sensitiveAction.js +157 -0
package/server/migrations/001_add_analytics_indexes.sql +7 -7
package/server/migrations/002_premium_features.sql +418 -418
package/server/migrations/003_ads_integer_cents.sql +33 -33
package/server/migrations/004_agent_os.sql +158 -158
package/server/migrations/005_marketplace_metering.sql +126 -126
package/server/models/adapters/index.js +33 -33
package/server/models/adapters/mysql.js +183 -183
package/server/models/adapters/postgresql.js +172 -172
package/server/models/adapters/sqlite.js +7 -7
package/server/models/db.js +681 -681
package/server/observability/failure-analysis.js +337 -337
package/server/observability/index.js +394 -394
package/server/protocol/capabilities.js +223 -223
package/server/protocol/index.js +243 -243
package/server/protocol/schema.js +584 -584
package/server/registry/certification.js +271 -271
package/server/registry/index.js +326 -326
package/server/routes/admin-premium.js +671 -671
package/server/routes/admin.js +261 -261
package/server/routes/ads.js +130 -130
package/server/routes/agent-workspace.js +540 -540
package/server/routes/api.js +150 -150
package/server/routes/auth.js +71 -71
package/server/routes/billing.js +45 -45
package/server/routes/commander.js +316 -316
package/server/routes/demo-showcase.js +332 -332
package/server/routes/demo-store.js +154 -0
package/server/routes/discovery.js +417 -417
package/server/routes/gateway.js +173 -157
package/server/routes/license.js +251 -240
package/server/routes/mesh.js +469 -469
package/server/routes/noscript.js +543 -543
package/server/routes/premium-v2.js +686 -686
package/server/routes/premium.js +724 -724
package/server/routes/runtime.js +2148 -2147
package/server/routes/sovereign.js +465 -385
package/server/routes/universal.js +200 -185
package/server/routes/wab-api.js +850 -501
package/server/runtime/container-worker.js +111 -111
package/server/runtime/container.js +448 -448
package/server/runtime/distributed-worker.js +362 -362
package/server/runtime/event-bus.js +210 -210
package/server/runtime/index.js +253 -253
package/server/runtime/queue.js +599 -599
package/server/runtime/replay.js +666 -666
package/server/runtime/sandbox.js +266 -266
package/server/runtime/scheduler.js +534 -534
package/server/runtime/session-engine.js +293 -293
package/server/runtime/state-manager.js +188 -188
package/server/security/cross-site-redactor.js +196 -0
package/server/security/dry-run.js +180 -0
package/server/security/human-gate-rate-limit.js +147 -0
package/server/security/human-gate-transports.js +178 -0
package/server/security/human-gate.js +281 -0
package/server/security/index.js +368 -368
package/server/security/intent-engine.js +245 -0
package/server/security/reward-guard.js +171 -0
package/server/security/rollback-store.js +239 -0
package/server/security/token-scope.js +404 -0
package/server/security/url-policy.js +139 -0
package/server/services/agent-chat.js +506 -506
package/server/services/agent-learning.js +601 -575
package/server/services/agent-memory.js +625 -625
package/server/services/agent-mesh.js +555 -539
package/server/services/agent-symphony.js +717 -717
package/server/services/agent-tasks.js +1807 -1807
package/server/services/api-key-engine.js +292 -261
package/server/services/cluster.js +894 -894
package/server/services/commander.js +738 -738
package/server/services/edge-compute.js +440 -440
package/server/services/email.js +204 -204
package/server/services/hosted-runtime.js +205 -205
package/server/services/lfd.js +635 -635
package/server/services/local-ai.js +389 -389
package/server/services/marketplace.js +270 -270
package/server/services/metering.js +182 -182
package/server/services/modules/affiliate-intelligence.js +93 -93
package/server/services/modules/agent-firewall.js +90 -90
package/server/services/modules/bounty.js +89 -89
package/server/services/modules/collective-bargaining.js +92 -92
package/server/services/modules/dark-pattern.js +66 -66
package/server/services/modules/gov-intelligence.js +45 -45
package/server/services/modules/neural.js +55 -55
package/server/services/modules/notary.js +49 -49
package/server/services/modules/price-time-machine.js +86 -86
package/server/services/modules/protocol.js +104 -104
package/server/services/negotiation.js +439 -439
package/server/services/plugins.js +771 -771
package/server/services/price-intelligence.js +566 -566
package/server/services/price-shield.js +1137 -1137
package/server/services/reputation.js +465 -465
package/server/services/search-engine.js +357 -357
package/server/services/security.js +513 -513
package/server/services/self-healing.js +843 -843
package/server/services/sovereign-shield.js +542 -0
package/server/services/stripe.js +192 -192
package/server/services/swarm.js +788 -788
package/server/services/universal-scraper.js +662 -661
package/server/services/verification.js +481 -481
package/server/services/vision.js +1163 -1163
package/server/utils/cache.js +125 -125
package/server/utils/migrate.js +81 -81
package/server/utils/safe-fetch.js +228 -0
package/server/utils/secureFields.js +50 -50
package/server/ws.js +161 -161
package/templates/artisan-marketplace.yaml +104 -104
package/templates/book-price-scout.yaml +98 -98
package/templates/electronics-price-tracker.yaml +108 -108
package/templates/flight-deal-hunter.yaml +113 -113
package/templates/freelancer-direct.yaml +116 -116
package/templates/grocery-price-compare.yaml +93 -93
package/templates/hotel-direct-booking.yaml +113 -113
package/templates/local-services.yaml +98 -98
package/templates/olive-oil-tunisia.yaml +88 -88
package/templates/organic-farm-fresh.yaml +101 -101
package/templates/restaurant-direct.yaml +97 -97
package/public/score.html +0 -263
package/server/migrations/006_growth_suite.sql +0 -138
package/server/routes/growth.js +0 -962
package/server/services/fairness-engine.js +0 -409
package/server/services/fairness.js +0 -420

package/public/index.html CHANGED Viewed

@@ -1,982 +1,1070 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Web Agent Bridge — AI Agent Middleware for the Web</title>
-  <meta name="description" content="Open-source middleware that bridges AI agents and websites. Standardized commands, permissions, and analytics for intelligent automation.">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <style>body{background:#0a0e1a;color:#f0f4ff;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0;min-height:100vh}</style>
-  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
-  <noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"></noscript>
-  <link rel="stylesheet" href="/css/styles.css?v=3.0.1">
-</head>
-<body>
-  <!-- ═══════════ NAVBAR ═══════════ -->
-  <nav class="navbar" id="navbar">
-    <div class="container">
-      <a href="/" class="navbar-brand">
-        <div class="brand-icon">⚡</div>
-        <span>WAB</span>
-      </a>
-      <ul class="navbar-links">
-        <li><a href="#features">Features</a></li>
-        <li><a href="#packages">Packages</a></li>
-        <li><a href="#integrations">Integrations</a></li>
-        <li><a href="#how-it-works">How It Works</a></li>
-        <li><a href="#pricing">Pricing</a></li>
-        <li><a href="#v2-features">v2.0</a></li>
-        <li><a href="#agent-mesh">Agent Mesh</a></li>
-        <li><a href="#agent-workspace">Workspace</a></li>
-        <li><a href="/demo">Demo</a></li>
-        <li><a href="/growth">Growth Suite</a></li>
-        <li><a href="/api">API</a></li>
-        <li><a href="/docs">Docs</a></li>
-      </ul>
-      <div class="navbar-actions">
-        <a href="/login" class="btn btn-ghost" data-wab-auth="guest">Sign In</a>
-        <a href="/dashboard" class="btn btn-ghost" data-wab-auth="signed-in" style="display:none">Dashboard</a>
-        <a href="/register" class="btn btn-primary btn-sm" data-wab-auth="guest">Get Started</a>
-      </div>
-      <button class="mobile-menu-btn" onclick="document.querySelector('.navbar-links').classList.toggle('active')">☰</button>
-    </div>
-  </nav>
-  <!-- ═══════════ HERO ═══════════ -->
-  <section class="hero">
-    <div class="container">
-      <div class="hero-content fade-in">
-        <div class="hero-badge">
-          🚀 Open Source &middot; React &middot; Vue &middot; Svelte &middot; LangChain
-        </div>
-        <h1>
-          Bridge the Gap Between<br>
-          <span class="gradient-text">AI Agents</span> &amp; <span class="gradient-text-accent">Websites</span>
-        </h1>
-        <p>
-          An open-source middleware script that gives AI agents a standardized command interface
-          to interact with any website — with permissions, rate limiting, and full control for site owners.
-        </p>
-        <div class="hero-actions">
-          <a href="/register" class="btn btn-primary btn-lg">Start Free</a>
-          <a href="/docs" class="btn btn-secondary btn-lg">Read the Docs</a>
-          <a href="/browser" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#0ea5e9,#10b981);color:#fff;border:none">🌐 Download WAB Browser</a>
-          <a href="/pwa/" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#8b5cf6,#0ea5e9);color:#fff;border:none">📱 Mobile PWA</a>
-          <a href="/workspace" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border:none">🤖 Agent Workspace</a>
-          <a href="/demo" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none">🧪 API Playground</a>
-          <a href="/demo-1/" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#06b6d4,#0ea5e9);color:#fff;border:none">🎮 Interactive Demo</a>
-        </div>
-        <div class="hero-code fade-in fade-in-delay-2">
-          <code>
-            <span class="comment">// Add the bridge to your website</span><br>
-            &lt;<span class="keyword">script</span>&gt;<br>
-            &nbsp;&nbsp;window.<span class="property">AIBridgeConfig</span> = {<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">licenseKey</span>: <span class="string">"WAB-XXXXX-XXXXX"</span>,<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">agentPermissions</span>: { <span class="property">click</span>: <span class="boolean">true</span>, <span class="property">fillForms</span>: <span class="boolean">true</span> }<br>
-            &nbsp;&nbsp;};<br>
-            &lt;/<span class="keyword">script</span>&gt;<br>
-            &lt;<span class="keyword">script</span> <span class="property">src</span>=<span class="string">"/script/ai-agent-bridge.js"</span>&gt;&lt;/<span class="keyword">script</span>&gt;
-          </code>
-        </div>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ FEATURES ═══════════ -->
-  <section class="section" id="features">
-    <div class="container">
-      <div class="section-header">
-        <span class="label">Features</span>
-        <h2>Everything AI Agents Need</h2>
-        <p>A complete interface layer that makes websites AI-ready with security and control built in.</p>
-      </div>
-      <div class="grid-3">
-        <div class="card fade-in">
-          <div class="card-icon blue">🎯</div>
-          <h3>Auto-Discovery</h3>
-          <p>Automatically detects buttons, forms, and navigation elements — generating precise CSS selectors and action descriptions for AI agents.</p>
-        </div>
-        <div class="card fade-in fade-in-delay-1">
-          <div class="card-icon purple">🔐</div>
-          <h3>Permission System</h3>
-          <p>Granular control over what AI agents can do. Enable clicking, form filling, API access, and more — each toggled independently.</p>
-        </div>
-        <div class="card fade-in fade-in-delay-2">
-          <div class="card-icon cyan">⚡</div>
-          <h3>Standardized Commands</h3>
-          <p>Unified <code>window.AICommands</code> interface that any AI agent can read and execute — no more DOM guessing.</p>
-        </div>
-        <div class="card fade-in fade-in-delay-1">
-          <div class="card-icon green">🛡️</div>
-          <h3>Rate Limiting</h3>
-          <p>Built-in rate limiting prevents abuse. Configure max calls per minute to protect your site from aggressive automation.</p>
-        </div>
-        <div class="card fade-in fade-in-delay-2">
-          <div class="card-icon orange">📊</div>
-          <h3>Analytics Dashboard</h3>
-          <p>Track how AI agents interact with your site. See which actions are used most, success rates, and usage patterns.</p>
-        </div>
-        <div class="card fade-in fade-in-delay-3">
-          <div class="card-icon pink">🔌</div>
-          <h3>Custom Actions</h3>
-          <p>Register your own actions with custom handlers. Create complex workflows that AI agents can trigger with a single command.</p>
-        </div>
-        <div class="card fade-in">
-          <div class="card-icon cyan">🛒</div>
-          <h3>Commerce &amp; Booking Intents</h3>
-          <p>Automatically detects add-to-cart, checkout, booking, and reservation flows — mapping them to named actions agents can call directly.</p>
-        </div>
-        <div class="card fade-in fade-in-delay-1">
-          <div class="card-icon blue">📦</div>
-          <h3>Structured Data Scanning</h3>
-          <p>Reads schema.org JSON-LD and microdata (Products, Offers, Prices) and exposes them as queryable actions — zero manual setup.</p>
-        </div>
-        <div class="card fade-in fade-in-delay-2">
-          <div class="card-icon green">🩹</div>
-          <h3>Self-Healing Selectors</h3>
-          <p>7-strategy resilient element resolution. When the DOM changes, selectors auto-heal via ARIA, text similarity, and position heuristics.</p>
-        </div>
-        <div class="card fade-in">
-          <div class="card-icon purple">🔏</div>
-          <h3>GDPR / CCPA Consent</h3>
-          <p>Optional consent banner gates agent actions behind user approval. SDK agents can check <code>hasConsent()</code> or <code>waitForConsent()</code> programmatically.</p>
-        </div>
-        <div class="card fade-in fade-in-delay-1">
-          <div class="card-icon orange">🤖</div>
-          <h3>Agent SDK</h3>
-          <p>Built-in SDK for Puppeteer and Playwright: <code>runPipeline()</code>, <code>executeParallel()</code>, <code>screenshot()</code>, and consent-aware workflows.</p>
-        </div>
-        <div class="card fade-in fade-in-delay-2">
-          <div class="card-icon pink">🌐</div>
-          <h3>WebDriver BiDi</h3>
-          <p>Standard WebDriver BiDi protocol support via <code>window.__wab_bidi</code> — compatible with any automation framework that speaks the standard.</p>
-        </div>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ V2 FEATURES ═══════════ -->
-  <section class="section" id="v2-features" style="background: var(--bg-secondary);">
-    <div class="container">
-      <div class="section-header">
-        <span class="label">v2.0 — Digital Fortress</span>
-        <h2>Internet Sovereignty Features</h2>
-        <p>WAB v2.0 goes beyond bridging — it protects users with negotiation, verification, and decentralized trust.</p>
-      </div>
-      <div class="grid-3">
-        <div class="card fade-in" style="border-left: 3px solid #f59e0b;">
-          <div class="card-icon orange">💰</div>
-          <h3>Real-time Negotiation Engine</h3>
-          <p>AI agents negotiate prices directly with WAB-enabled sites. Site owners define negotiation rules (bulk discounts, loyalty rewards, time-based offers). Agents submit counter-offers in multi-round sessions — no middleman, no hidden fees.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>8 condition types (bulk, loyalty, time, first-buy...)</li>
-            <li>4 discount types (percentage, fixed, free shipping, bundle)</li>
-            <li>Multi-round negotiation with counter-offers</li>
-            <li>Savings tracking per agent</li>
-          </ul>
-        </div>
-        <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #ef4444;">
-          <div class="card-icon pink">🛡️</div>
-          <h3>Anti-Hallucination Shield</h3>
-          <p>Cross-verification engine that catches AI lies before they reach users. Compares DOM values against vision screenshots, validates prices against market benchmarks, and checks temporal consistency across sessions.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>DOM vs Vision verification</li>
-            <li>Market benchmark price validation</li>
-            <li>Temporal consistency checks</li>
-            <li>Text similarity scoring (Levenshtein)</li>
-          </ul>
-        </div>
-        <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #10b981;">
-          <div class="card-icon green">⭐</div>
-          <h3>Decentralized Reputation</h3>
-          <p>Agents and sites build trust through cryptographic attestations. Every interaction gets scored — purchase success, data accuracy, delivery fulfillment. Scores are aggregated into transparent reputation profiles visible to all agents.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>Trust attestations from agent network</li>
-            <li>Weighted scoring by interaction type</li>
-            <li>Trust levels: emerging → verified → exemplary</li>
-            <li>Global leaderboard</li>
-          </ul>
-        </div>
-        <div class="card fade-in" style="border-left: 3px solid #3b82f6;">
-          <div class="card-icon blue">🏰</div>
-          <h3>Sovereign Dashboard</h3>
-          <p>A real-time command center showing your digital fortress status — protected sites, fairness radar, privacy shield, negotiation logs, and verification checks all in one beautiful dark-mode dashboard.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>Live fairness radar with safety scoring</li>
-            <li>Privacy shield metrics</li>
-            <li>AI model switcher (Llama, GPT-4, Claude...)</li>
-            <li>Protected sites table with trust levels</li>
-          </ul>
-        </div>
-        <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #8b5cf6;">
-          <div class="card-icon purple">📦</div>
-          <h3>Community Agent Hub</h3>
-          <p>Pre-built YAML agent templates for common use cases — hotel booking, grocery comparison, artisan marketplace, flight deals. Run any template with a single CLI command: <code>npx wab-agent run template.yaml</code>.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>11 production-ready templates</li>
-            <li>CLI runner with variable substitution</li>
-            <li>Fairness rules built into every template</li>
-            <li>Supports negotiation + verification</li>
-          </ul>
-        </div>
-        <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #0ea5e9;">
-          <div class="card-icon cyan">🌐</div>
-          <h3>Cross-Site Agent Orchestration</h3>
-          <p>One agent manages multiple WAB-enabled sites simultaneously. Compare prices across stores, aggregate product data, run parallel actions — all from a single <code>WABMultiAgent</code> instance in the SDK.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>Parallel multi-site browser sessions</li>
-            <li>comparePrices() with cheapest-deal finder</li>
-            <li>Schema.org + WAB action price extraction</li>
-            <li>Cross-site screenshots for vision verification</li>
-          </ul>
-        </div>
-        <div class="card fade-in" style="border-left: 3px solid #06b6d4;">
-          <div class="card-icon cyan">🔄</div>
-          <h3>AI Brain Swapping</h3>
-          <p>WAB is the bridge — the AI model is your choice. Switch between Llama 3, GPT-4, Claude, Gemini, Mistral, or run fully local with Ollama. Your data, your model, your sovereignty.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>6 supported AI engines</li>
-            <li>Local-first with Ollama support</li>
-            <li>Hot-swap without reconfiguration</li>
-            <li>Your data never leaves your machine</li>
-          </ul>
-        </div>
-      </div>
-      <div style="text-align:center; margin-top:32px;">
-        <a href="/sovereign" class="btn btn-primary btn-lg">Open Sovereign Dashboard</a>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ PRIVATE AGENT MESH ═══════════ -->
-  <section class="section" id="agent-mesh">
-    <div class="container">
-      <div class="section-header">
-        <span class="label" style="background: rgba(139,92,246,0.15); color: #8b5cf6;">v2.3 — Distributed Mind</span>
-        <h2>Private Agent Mesh</h2>
-        <p>Agents communicate, learn, and orchestrate autonomously — zero external LLM dependency. Your private fortress now has a distributed intelligence layer.</p>
-      </div>
-      <div class="grid-3">
-        <div class="card fade-in" style="border-left: 3px solid #8b5cf6;">
-          <div class="card-icon purple">🕸️</div>
-          <h3>Inter-Agent Protocol</h3>
-          <p>Agents communicate through a private mesh — sharing discoveries, broadcasting alerts, and exchanging tactics in real-time. 5 built-in channels: alerts, discoveries, tactics, negotiations, votes.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>Real-time agent-to-agent messaging</li>
-            <li>Shared knowledge base with confidence scoring</li>
-            <li>Priority-based message routing</li>
-            <li>Auto-expiring messages with TTL</li>
-          </ul>
-        </div>
-        <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #10b981;">
-          <div class="card-icon green">🧠</div>
-          <h3>Local Reinforcement Learning</h3>
-          <p>Agents learn from every user decision — accepted, rejected, or modified. Multi-armed bandit action selection, gradient-descent policy updates, and behavioral pattern mining. All local, zero tokens consumed.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>UCB1 multi-armed bandit for action selection</li>
-            <li>Sigmoid prediction with gradient descent</li>
-            <li>Behavioral sequence pattern mining</li>
-            <li>Bayesian confidence estimation</li>
-          </ul>
-        </div>
-        <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #f59e0b;">
-          <div class="card-icon orange">🎼</div>
-          <h3>Symphony Orchestrator</h3>
-          <p>Four specialized agents (Researcher, Analyst, Negotiator, Guardian) collaborate autonomously through rule-based engines. No external AI needed — the symphony runs entirely on local heuristics and learned preferences.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>5 templates: purchase, price comparison, negotiation, exploration, audit</li>
-            <li>6-phase pipeline: compose → discover → analyze → negotiate → guard → decide</li>
-            <li>Guardian veto for safety-critical decisions</li>
-            <li>Weighted consensus with agreement scoring</li>
-          </ul>
-        </div>
-      </div>
-      <div style="text-align:center; margin-top:32px;">
-        <a href="/mesh-dashboard" class="btn btn-primary btn-lg" style="background: #8b5cf6;">Open Agent Mesh Dashboard</a>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ AGENT WORKSPACE (v2.5) ═══════════ -->
-  <section class="section" id="agent-workspace" style="background: var(--bg-secondary);">
-    <div class="container">
-      <div class="section-header">
-        <span class="label" style="background: rgba(245,158,11,0.15); color: #f59e0b;">v2.5 — Agent Workspace</span>
-        <h2>Smart Agent Workspace</h2>
-        <p>A premium 4-panel workspace for non-technical users — search, negotiate, and buy with AI assistance. Available in Arabic &amp; English with multilingual agent support.</p>
-      </div>
-      <div class="grid-3">
-        <div class="card fade-in" style="border-left: 3px solid #0ea5e9;">
-          <div class="card-icon blue">🌐</div>
-          <h3>Embedded Browser</h3>
-          <p>Full browser panel with URL bar, navigation controls, and secure iframe rendering. The agent opens pages, loads deals, and navigates sites — all visible in real-time.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>Address bar with SSL indicator</li>
-            <li>Back, forward, refresh controls</li>
-            <li>Maximize any panel to full screen</li>
-          </ul>
-        </div>
-        <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #10b981;">
-          <div class="card-icon green">🤖</div>
-          <h3>Smart Agent Chat</h3>
-          <p>Chat with the AI agent in any language — Arabic, English, French, Turkish, or mix them all. The agent understands your intent from any style, dialect, or slang.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>Suggestion chips for quick start</li>
-            <li>Multilingual — responds in your language</li>
-            <li>Clarifying questions for precise results</li>
-          </ul>
-        </div>
-        <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #f59e0b;">
-          <div class="card-icon orange">📊</div>
-          <h3>Negotiation Monitor</h3>
-          <p>Watch the agent work in real-time — step-by-step progress tracking, per-agent status cards, and live negotiation rounds with savings details.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>Multi-step progress visualization</li>
-            <li>Per-agent cards with progress bars</li>
-            <li>Negotiation round-by-round log</li>
-          </ul>
-        </div>
-        <div class="card fade-in" style="border-left: 3px solid #8b5cf6;">
-          <div class="card-icon purple">🏆</div>
-          <h3>Results &amp; Actions</h3>
-          <p>Compare offers ranked by value with savings percentages, one-click deal links, and an "Agent Do It" button that lets the AI complete the purchase for you.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>Deal cards with price comparison</li>
-            <li>One-click \"Open Deal\" links</li>
-            <li>\"Agent Do It\" auto-completion</li>
-          </ul>
-        </div>
-        <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #ef4444;">
-          <div class="card-icon pink">🌍</div>
-          <h3>Bilingual UI (AR/EN)</h3>
-          <p>Full Arabic and English interface with auto-detection from browser language. Toggle instantly between languages with complete RTL/LTR layout support.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>100+ translated UI strings</li>
-            <li>Auto-detect browser language</li>
-            <li>RTL ↔ LTR with one click</li>
-          </ul>
-        </div>
-        <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #06b6d4;">
-          <div class="card-icon cyan">💎</div>
-          <h3>Subscription Plans</h3>
-          <p>Free tier (5 tasks/day), Starter, Pro (unlimited + advanced negotiation), and Enterprise plans. Admin dashboard for managing users, deals, and analytics.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>Free, Starter, Pro, Enterprise</li>
-            <li>Usage tracking with daily limits</li>
-            <li>Admin management panel</li>
-          </ul>
-        </div>
-        <div class="card fade-in" style="border-left: 3px solid #a855f7;">
-          <div class="card-icon purple">🛡️</div>
-          <h3>Dynamic Pricing Shield</h3>
-          <p>Detects when websites manipulate prices based on your device, location, cookies, or browsing history. The agent probes with 12 distinct identities to expose hidden pricing and find the lowest price invisible to normal users.</p>
-          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
-            <li>12 identity personas (device, geo, referral, privacy)</li>
-            <li>Statistical variance &amp; z-score outlier detection</li>
-            <li>Manipulation scoring with actionable tips</li>
-            <li>Historical price-trend analysis</li>
-          </ul>
-        </div>
-      </div>
-      <div style="text-align:center; margin-top:32px;">
-        <a href="/workspace" class="btn btn-primary btn-lg" style="background: linear-gradient(135deg,#f59e0b,#ef4444);">Open Agent Workspace</a>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ HOW IT WORKS ═══════════ -->
-  <section class="section" id="how-it-works" style="background: var(--bg-secondary);">
-    <div class="container">
-      <div class="section-header">
-        <span class="label">How It Works</span>
-        <h2>Three Steps to AI-Ready</h2>
-        <p>Get your website ready for AI agents in minutes, not days.</p>
-      </div>
-      <div class="grid-3">
-        <div class="card" style="text-align:center;">
-          <div style="font-size:2.5rem; margin-bottom:16px;">1️⃣</div>
-          <h3>Add the Script</h3>
-          <p>Include the bridge script in your HTML with your configuration. Set permissions, restrictions, and your license key.</p>
-        </div>
-        <div class="card" style="text-align:center;">
-          <div style="font-size:2.5rem; margin-bottom:16px;">2️⃣</div>
-          <h3>Configure Permissions</h3>
-          <p>Use the dashboard to fine-tune which actions AI agents can perform. Block sensitive areas and set rate limits.</p>
-        </div>
-        <div class="card" style="text-align:center;">
-          <div style="font-size:2.5rem; margin-bottom:16px;">3️⃣</div>
-          <h3>AI Agents Connect</h3>
-          <p>AI agents read <code>window.AICommands</code>, discover available actions, and execute them precisely — no DOM scraping needed.</p>
-        </div>
-      </div>
-      <div style="margin-top:48px;">
-        <div class="code-block">
-          <div class="code-header">
-            <div class="code-dots"><span></span><span></span><span></span></div>
-            <span class="code-lang">JavaScript — AI Agent Side</span>
-          </div>
-          <div class="code-body">
-<pre><span class="cm">// AI Agent reads available commands</span>
-<span class="kw">const</span> bridge = window.<span class="prop">AICommands</span>;
-<span class="cm">// Discover all available actions</span>
-<span class="kw">const</span> actions = bridge.<span class="fn">getActions</span>();
-console.<span class="fn">log</span>(actions);
-<span class="cm">// → [{ name: "signup", trigger: "click", ... }, ...]</span>
-<span class="cm">// Execute a form fill action</span>
-<span class="kw">const</span> result = <span class="kw">await</span> bridge.<span class="fn">execute</span>(<span class="str">"fill_contact_form"</span>, {
-  <span class="prop">name</span>: <span class="str">"John Doe"</span>,
-  <span class="prop">email</span>: <span class="str">"john@example.com"</span>,
-  <span class="prop">message</span>: <span class="str">"Hello from AI!"</span>
-});
-<span class="cm">// Wait for dynamic content</span>
-<span class="kw">await</span> bridge.<span class="fn">waitForElement</span>(<span class="str">".success-message"</span>);</pre>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ PRICING ═══════════ -->
-  <section class="section" id="pricing">
-    <div class="container">
-      <div class="section-header">
-        <span class="label">Pricing</span>
-        <h2>Simple, Transparent Pricing</h2>
-        <p>Start free, upgrade when you need advanced features. Open source forever.</p>
-      </div>
-      <div class="grid-3">
-        <div class="pricing-card">
-          <div class="pricing-tier">Free</div>
-          <div class="pricing-price">$0 <span>/mo</span></div>
-          <div class="pricing-desc">Perfect for personal projects and experimentation.</div>
-          <ul class="pricing-features">
-            <li>Auto-discovery of actions</li>
-            <li>Click &amp; scroll permissions</li>
-            <li>Rate limiting (60/min)</li>
-            <li>Basic logging</li>
-            <li>1 site</li>
-            <li class="disabled">Form filling</li>
-            <li class="disabled">API access</li>
-            <li class="disabled">Analytics dashboard</li>
-          </ul>
-          <a href="/register" class="btn btn-secondary" style="width:100%;">Get Started Free</a>
-        </div>
-        <div class="pricing-card featured">
-          <div class="pricing-tier">Pro</div>
-          <div class="pricing-price">$29 <span>/mo</span></div>
-          <div class="pricing-desc">For businesses that want full AI agent integration.</div>
-          <ul class="pricing-features">
-            <li>Everything in Free</li>
-            <li>Form filling &amp; submission</li>
-            <li>Internal API access</li>
-            <li>Advanced analytics</li>
-            <li>Up to 10 sites</li>
-            <li>Automated login support</li>
-            <li>Data extraction</li>
-            <li>Priority support</li>
-          </ul>
-          <a href="/register" class="btn btn-primary" style="width:100%;">Start Pro Trial</a>
-        </div>
-        <div class="pricing-card">
-          <div class="pricing-tier">Enterprise</div>
-          <div class="pricing-price">Custom</div>
-          <div class="pricing-desc">Custom solutions for large-scale deployments.</div>
-          <ul class="pricing-features">
-            <li>Everything in Pro</li>
-            <li>Unlimited sites</li>
-            <li>Custom rate limits</li>
-            <li>Webhook integrations</li>
-            <li>SSO / SAML</li>
-            <li>Dedicated support</li>
-            <li>SLA guarantee</li>
-            <li>Custom development</li>
-          </ul>
-          <a href="mailto:sales@webagentbridge.com" class="btn btn-secondary" style="width:100%;">Contact Sales</a>
-        </div>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ FRAMEWORK PACKAGES ═══════════ -->
-  <section class="section" id="packages" style="background: var(--bg-secondary);">
-    <div class="container">
-      <div class="section-header">
-        <span class="label">Packages</span>
-        <h2>Use WAB with Your Favorite Framework</h2>
-        <p>Official packages for React, Vue, Svelte, and LangChain — with full TypeScript support.</p>
-      </div>
-      <div class="grid-3">
-        <div class="card fade-in" style="text-align:center;">
-          <div style="font-size:2.5rem; margin-bottom:16px;">⚛️</div>
-          <h3>React</h3>
-          <p><code>@web-agent-bridge/react</code></p>
-          <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Hooks: <code>useWAB</code>, <code>useWABAction</code>, <code>useWABActions</code> + <code>WABProvider</code> for auto-loading the script.</p>
-          <div class="code-block" style="margin-top:16px; text-align:left;">
-            <div class="code-body" style="padding:12px; font-size:0.82rem;">
-<pre><span class="kw">const</span> { run, result } = <span class="fn">useWABAction</span>(<span class="str">'addToCart'</span>);
-<span class="kw">await</span> <span class="fn">run</span>({ <span class="prop">sku</span>: <span class="str">'ABC123'</span> });</pre>
-            </div>
-          </div>
-        </div>
-        <div class="card fade-in fade-in-delay-1" style="text-align:center;">
-          <div style="font-size:2.5rem; margin-bottom:16px;">💚</div>
-          <h3>Vue 3</h3>
-          <p><code>@web-agent-bridge/vue</code></p>
-          <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Composables: <code>useWAB</code>, <code>useWABAction</code>, <code>useWABActions</code> — reactive refs with loading/error/result state.</p>
-          <div class="code-block" style="margin-top:16px; text-align:left;">
-            <div class="code-body" style="padding:12px; font-size:0.82rem;">
-<pre><span class="kw">const</span> cart = <span class="fn">useWABAction</span>(<span class="str">'addToCart'</span>);
-<span class="kw">await</span> cart.<span class="fn">run</span>({ <span class="prop">sku</span>: <span class="str">'ABC123'</span> });
-<span class="cm">// cart.result.value, cart.loading.value</span></pre>
-            </div>
-          </div>
-        </div>
-        <div class="card fade-in fade-in-delay-2" style="text-align:center;">
-          <div style="font-size:2.5rem; margin-bottom:16px;">🔥</div>
-          <h3>Svelte</h3>
-          <p><code>@web-agent-bridge/svelte</code></p>
-          <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Stores: <code>createWAB</code>, <code>createWABAction</code> — subscribe to <code>$store</code> for reactive state.</p>
-          <div class="code-block" style="margin-top:16px; text-align:left;">
-            <div class="code-body" style="padding:12px; font-size:0.82rem;">
-<pre><span class="kw">const</span> cart = <span class="fn">createWABAction</span>(<span class="str">'addToCart'</span>);
-<span class="kw">await</span> cart.<span class="fn">run</span>({ <span class="prop">sku</span>: <span class="str">'ABC123'</span> });
-<span class="cm">// {#if $cart.loading}Adding...{/if}</span></pre>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ LLM / AGENT INTEGRATION ═══════════ -->
-  <section class="section" id="integrations">
-    <div class="container">
-      <div class="section-header">
-        <span class="label">Agent Integrations</span>
-        <h2>Connect Any AI Agent Framework</h2>
-        <p>Use WAB with LangChain, MCP, or build your own agent — every action becomes a tool the LLM can call.</p>
-      </div>
-      <div class="grid-3">
-        <div class="card fade-in" style="text-align:center;">
-          <div style="font-size:2.5rem; margin-bottom:16px;">🦜</div>
-          <h3>LangChain / LangGraph</h3>
-          <p><code>@web-agent-bridge/langchain</code></p>
-          <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">WABToolkit wraps every WAB action as a LangChain <code>StructuredTool</code>. Works in HTTP mode (server) or browser mode (Puppeteer).</p>
-          <div class="code-block" style="margin-top:16px; text-align:left;">
-            <div class="code-body" style="padding:12px; font-size:0.82rem;">
-<pre><span class="kw">const</span> tk = <span class="kw">new</span> <span class="fn">WABToolkit</span>({ <span class="prop">siteUrl</span>: <span class="str">'https://shop.example.com'</span> });
-<span class="kw">const</span> tools = <span class="kw">await</span> tk.<span class="fn">getTools</span>();
-<span class="cm">// Pass tools to any LangChain agent</span></pre>
-            </div>
-          </div>
-        </div>
-        <div class="card fade-in fade-in-delay-1" style="text-align:center;">
-          <div style="font-size:2.5rem; margin-bottom:16px;">🔗</div>
-          <h3>MCP Adapter</h3>
-          <p><code>wab-mcp-adapter</code></p>
-          <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Converts WAB actions into MCP tools so any MCP-compatible agent (Claude, etc.) can interact with WAB sites through MCP.</p>
-          <div class="code-block" style="margin-top:16px; text-align:left;">
-            <div class="code-body" style="padding:12px; font-size:0.82rem;">
-<pre><span class="kw">const</span> adapter = <span class="kw">new</span> <span class="fn">WABMCPAdapter</span>({ <span class="prop">siteUrl</span>: <span class="str">'...'</span> });
-<span class="kw">const</span> tools = adapter.<span class="fn">listTools</span>();
-<span class="cm">// Built-in: discover, execute, read, search</span></pre>
-            </div>
-          </div>
-        </div>
-        <div class="card fade-in fade-in-delay-2" style="text-align:center;">
-          <div style="font-size:2.5rem; margin-bottom:16px;">🧰</div>
-          <h3>Agent SDK</h3>
-          <p><code>web-agent-bridge/sdk</code></p>
-          <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">First-class Puppeteer/Playwright SDK with pipeline execution, parallel actions, screenshot capture, and consent-aware workflows.</p>
-          <div class="code-block" style="margin-top:16px; text-align:left;">
-            <div class="code-body" style="padding:12px; font-size:0.82rem;">
-<pre><span class="kw">const</span> agent = <span class="kw">new</span> <span class="fn">WABAgent</span>(page);
-<span class="kw">await</span> agent.<span class="fn">waitForConsent</span>();
-<span class="kw">await</span> agent.<span class="fn">runPipeline</span>([...steps]);</pre>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ EXAMPLES ═══════════ -->
-  <section class="section" id="examples" style="background: var(--bg-secondary);">
-    <div class="container">
-      <div class="section-header">
-        <span class="label">Examples</span>
-        <h2>Framework &amp; CMS Integration Examples</h2>
-        <p>Ready-to-use examples for popular platforms — see how WAB fits into your stack.</p>
-      </div>
-      <div class="grid-3">
-        <div class="card fade-in" style="text-align:center;">
-          <div style="font-size:2.2rem; margin-bottom:12px;">▲</div>
-          <h3>Next.js App Router</h3>
-          <p style="color:var(--text-secondary); font-size:0.9rem;">React Server Components + WABProvider for client-side bridge with <code>useWABAction</code> hooks.</p>
-        </div>
-        <div class="card fade-in fade-in-delay-1" style="text-align:center;">
-          <div style="font-size:2.2rem; margin-bottom:12px;">🛍️</div>
-          <h3>Shopify Hydrogen</h3>
-          <p style="color:var(--text-secondary); font-size:0.9rem;">Hydrogen storefront with cart actions: <code>getCartCount</code>, <code>addFirstVisibleProductToCart</code>.</p>
-        </div>
-        <div class="card fade-in fade-in-delay-2" style="text-align:center;">
-          <div style="font-size:2.2rem; margin-bottom:12px;">📝</div>
-          <h3>WordPress + Elementor</h3>
-          <p style="color:var(--text-secondary); font-size:0.9rem;">Elementor page builder + WAB schema scanner for auto-discovered product and form actions.</p>
-        </div>
-        <div class="card fade-in" style="text-align:center;">
-          <div style="font-size:2.2rem; margin-bottom:12px;">📊</div>
-          <h3>SaaS Dashboard</h3>
-          <p style="color:var(--text-secondary); font-size:0.9rem;">Notion-style SaaS with KPI reads, customer lookup, and invoice workflow triggers.</p>
-        </div>
-        <div class="card fade-in fade-in-delay-1" style="text-align:center;">
-          <div style="font-size:2.2rem; margin-bottom:12px;">🤖</div>
-          <h3>Puppeteer Agent</h3>
-          <p style="color:var(--text-secondary); font-size:0.9rem;">Headless browser agent that discovers and executes actions automatically via the SDK.</p>
-        </div>
-        <div class="card fade-in fade-in-delay-2" style="text-align:center;">
-          <div style="font-size:2.2rem; margin-bottom:12px;">👁️</div>
-          <h3>Vision Agent</h3>
-          <p style="color:var(--text-secondary); font-size:0.9rem;">Natural language intent resolution — "add product to cart" maps to the right WAB action.</p>
-        </div>
-      </div>
-      <div style="text-align:center; margin-top:32px;">
-        <a href="https://github.com/abokenan444/web-agent-bridge/tree/master/examples" class="btn btn-secondary" target="_blank" rel="noopener">View All Examples on GitHub →</a>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ GROWTH SUITE ═══════════ -->
-  <section class="section" id="growth-suite" style="background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); color: #fff;">
-    <div class="container" style="text-align:center;">
-      <div style="display:inline-block; background:rgba(59,130,246,0.15); color:#60a5fa; padding:6px 16px; border-radius:20px; font-size:13px; font-weight:600; margin-bottom:20px;">WAB Growth Suite v2.5</div>
-      <h2 style="margin-bottom:16px; color:#fff;">8 Modules to Protect & Power the Web</h2>
-      <p style="color:#94a3b8; max-width:600px; margin:0 auto 40px; font-size:1.05rem; line-height:1.6;">
-        From link protection widgets to AI safety layers, bounty networks to threat intelligence — everything you need to build a safer, fairer web.
-      </p>
-      <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; max-width:960px; margin:0 auto 40px;">
-        <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
-          <div style="font-size:28px; margin-bottom:8px;">🛡️</div>
-          <div style="font-weight:700; font-size:15px;">WAB Widget</div>
-          <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Drop-in link protection</div>
-        </div>
-        <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
-          <div style="font-size:28px; margin-bottom:8px;">🤖</div>
-          <div style="font-weight:700; font-size:15px;">AI Safety Layer</div>
-          <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Security for AI agents</div>
-        </div>
-        <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
-          <div style="font-size:28px; margin-bottom:8px;">📊</div>
-          <div style="font-weight:700; font-size:15px;">WAB Score</div>
-          <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Platform credit rating</div>
-        </div>
-        <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
-          <div style="font-size:28px; margin-bottom:8px;">💰</div>
-          <div style="font-weight:700; font-size:15px;">Bounty Network</div>
-          <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Earn by finding scams</div>
-        </div>
-      </div>
-      <a href="/growth" class="btn btn-primary btn-lg">Explore All 8 Modules →</a>
-    </div>
-  </section>
-  <!-- ═══════════ 1. WAB WIDGET ═══════════ -->
-  <section class="wab-widget-section" style="padding: 80px 20px; background: #f8fafc; text-align: center;">
-    <div style="max-width: 800px; margin: 0 auto;">
-      <h2 style="font-size: 36px; color: #0f172a; margin-bottom: 16px;">One Line of Code. Full Link Protection.</h2>
-      <p style="font-size: 18px; color: #64748b; margin-bottom: 32px;">
-        Add a <strong>WAB Widget</strong> next to every external link on your site, blocking phishing and scam URLs in real-time for your visitors.
-      </p>
-      <div style="background: #0f172a; color: #e2e8f0; padding: 24px; border-radius: 12px; font-family: 'JetBrains Mono', monospace; font-size: 14px; text-align: left; margin-bottom: 24px; overflow-x: auto;">
-        <span style="color:#f472b6">&lt;script</span> <span style="color:#a78bfa">src</span>=<span style="color:#86efac">"https://webagentbridge.com/script/ai-agent-bridge.js"</span><br>
-        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#a78bfa">data-wab-key</span>=<span style="color:#86efac">"YOUR_API_KEY"</span><span style="color:#f472b6">&gt;&lt;/script&gt;</span>
-      </div>
-      <div style="display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;">
-        <a href="/growth#modules" class="btn btn-primary">See Widget Demo</a>
-        <a href="/workspace" class="btn btn-secondary">Get Your API Key →</a>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ 2. AI SAFETY LAYER ═══════════ -->
-  <section class="ai-safety-section" style="padding: 80px 20px; background: #0f172a; color: #fff;">
-    <div style="max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;">
-      <div>
-        <div style="color: #3b82f6; font-weight: 700; margin-bottom: 8px; letter-spacing: 1px; font-size: 12px;">FOR AI COMPANIES</div>
-        <h2 style="font-size: 32px; margin-bottom: 16px;">Mandatory Safety for AI Agents</h2>
-        <p style="color: #94a3b8; font-size: 16px; line-height: 1.6; margin-bottom: 24px;">
-          Building an AI agent that browses the web? Use <strong>WAB AI Safety Layer</strong> as a mandatory security wrapper. It scans every URL before your agent visits it.
-        </p>
-        <ul style="list-style: none; padding: 0; color: #cbd5e1; margin-bottom: 32px;">
-          <li style="margin-bottom: 12px;">✅ Compatible with OpenAI Operator &amp; Anthropic Computer Use</li>
-          <li style="margin-bottom: 12px;">✅ Blocks fraudulent financial transactions automatically</li>
-          <li style="margin-bottom: 12px;">✅ Lifts legal liability from your company</li>
-        </ul>
-        <a href="/docs" class="btn btn-primary">Read AI Safety Docs →</a>
-      </div>
-      <div style="background: #1e293b; padding: 24px; border-radius: 16px; border: 1px solid #334155; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.7; overflow-x: auto;">
-        <span style="color:#c678dd">import</span> { WABAgentWrapper } <span style="color:#c678dd">from</span> <span style="color:#98c379">'@wab/sdk'</span>;<br><br>
-        <span style="color:#5c6370">// Wrap your AI Agent with WAB Safety</span><br>
-        <span style="color:#c678dd">const</span> safeAgent = <span style="color:#c678dd">new</span> <span style="color:#61afef">WABAgentWrapper</span>(myAgent, {<br>
-        &nbsp;&nbsp;<span style="color:#d19a66">blockCritical</span>: <span style="color:#d19a66">true</span>,<br>
-        &nbsp;&nbsp;<span style="color:#d19a66">minFairness</span>: <span style="color:#d19a66">60</span>,<br>
-        });<br><br>
-        <span style="color:#5c6370">// WAB will block this if the site is a scam</span><br>
-        <span style="color:#c678dd">await</span> safeAgent.<span style="color:#61afef">browse</span>(<span style="color:#98c379">'https://scam-site.xyz'</span>);<br>
-        <span style="color:#e06c75">→ WABBlockedError: Phishing detected</span>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ 3. WAB SCORE ═══════════ -->
-  <section class="wab-score-section" style="padding: 80px 20px; background: white; text-align: center;">
-    <div style="max-width: 800px; margin: 0 auto;">
-      <h2 style="font-size: 36px; color: #0f172a; margin-bottom: 16px;">The Digital World's Credit Rating</h2>
-      <p style="font-size: 18px; color: #64748b; margin-bottom: 40px;">
-        Like credit agencies rate banks, <strong>WAB Score</strong> rates digital platforms. Search any platform and get a transparency score based on 15 fairness signals.
-      </p>
-      <div style="display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-bottom: 40px;">
-        <div style="border: 2px solid #22c55e; border-radius: 12px; padding: 16px 24px; display: flex; align-items: center; gap: 12px; background: #fff;">
-          <div style="font-size: 32px; font-weight: 900; color: #22c55e; line-height: 1;">A-</div>
-          <div>
-            <div style="font-weight: 700; color: #1e293b;">Very Good</div>
-            <div style="font-size: 12px; color: #64748b;">86/100 · amazon.com</div>
-          </div>
-        </div>
-        <div style="border: 2px solid #f59e0b; border-radius: 12px; padding: 16px 24px; display: flex; align-items: center; gap: 12px; background: #fff;">
-          <div style="font-size: 32px; font-weight: 900; color: #f59e0b; line-height: 1;">C+</div>
-          <div>
-            <div style="font-weight: 700; color: #1e293b;">Below Average</div>
-            <div style="font-size: 12px; color: #64748b;">68/100 · aliexpress.com</div>
-          </div>
-        </div>
-      </div>
-      <form action="/score" method="GET" style="display: flex; max-width: 500px; margin: 0 auto; gap: 8px;">
-        <input type="text" name="domain" placeholder="Enter platform domain (e.g. shein.com)" style="flex: 1; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 15px;">
-        <button type="submit" style="background: #0f172a; color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 700; cursor: pointer;">Check Score</button>
-      </form>
-    </div>
-  </section>
-  <!-- ═══════════ 4. TRUST LAYER PROTOCOL ═══════════ -->
-  <section style="padding: 60px 20px; background: #f1f5f9; border-top: 1px solid #e2e8f0;">
-    <div style="max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 40px; flex-wrap: wrap;">
-      <div style="flex: 1; min-width: 280px;">
-        <h3 style="font-size: 24px; color: #0f172a; margin-bottom: 12px;">The Open Trust Protocol</h3>
-        <p style="color: #475569; line-height: 1.6; margin-bottom: 20px;">
-          Prove to your customers that your store is fair and safe. Add a <code>wab.json</code> file to your site and print a verified trust badge — the SSL padlock for platform fairness.
-        </p>
-        <a href="/docs" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Learn how to get WAB Certified →</a>
-      </div>
-      <div style="flex: 1; min-width: 280px; background: white; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;">
-        <div style="font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #334155;">
-          <span style="color:#94a3b8">// /.well-known/wab.json</span><br>
-          {<br>
-          &nbsp;&nbsp;"wab_certified": <span style="color:#22c55e">true</span>,<br>
-          &nbsp;&nbsp;"fairness_score": <span style="color:#3b82f6">92</span>,<br>
-          &nbsp;&nbsp;"last_audit": <span style="color:#a3e635">"2026-04-01"</span><br>
-          }
-        </div>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ 5. BOUNTY NETWORK ═══════════ -->
-  <section style="padding: 80px 20px; background: #0f172a; color: white; text-align: center;">
-    <div style="max-width: 700px; margin: 0 auto;">
-      <div style="font-size: 48px; margin-bottom: 16px;">💰</div>
-      <h2 style="font-size: 36px; margin-bottom: 16px;">Earn Money by Discovering Fraud</h2>
-      <p style="font-size: 18px; color: #94a3b8; margin-bottom: 32px; line-height: 1.6;">
-        Join the <strong>WAB Bounty Network</strong> and report phishing, scams, and malware that automated systems haven't caught yet. Earn credits redeemable for cash.
-      </p>
-      <div style="display: flex; justify-content: center; gap: 24px; margin-bottom: 32px; flex-wrap: wrap;">
-        <div style="background: #1e293b; padding: 16px 24px; border-radius: 8px;">
-          <div style="font-size: 24px; font-weight: 700; color: #ef4444;">50 Credits</div>
-          <div style="font-size: 13px; color: #94a3b8;">Critical Threats</div>
-        </div>
-        <div style="background: #1e293b; padding: 16px 24px; border-radius: 8px;">
-          <div style="font-size: 24px; font-weight: 700; color: #f59e0b;">25 Credits</div>
-          <div style="font-size: 13px; color: #94a3b8;">Confirmed Scams</div>
-        </div>
-      </div>
-      <a href="/register" class="btn btn-primary btn-lg">Start Earning →</a>
-    </div>
-  </section>
-  <!-- ═══════════ 6. DATA MARKETPLACE ═══════════ -->
-  <section style="padding: 80px 20px; background: white;">
-    <div style="max-width: 1000px; margin: 0 auto; text-align: center;">
-      <h2 style="font-size: 32px; color: #0f172a; margin-bottom: 16px;">Threat Intelligence for AI &amp; Security</h2>
-      <p style="font-size: 18px; color: #64748b; margin-bottom: 48px; max-width: 700px; margin-left: auto; margin-right: auto;">
-        <strong>WAB Data Marketplace</strong> provides curated threat intelligence datasets for cybersecurity companies and AI model training.
-      </p>
-      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;">
-        <div style="border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; text-align: left;">
-          <h4 style="font-size: 18px; margin-bottom: 8px; color: #0f172a;">Threat Intelligence Feed</h4>
-          <p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">Real-time phishing, malware, and scam URL data from 47 databases. Updated continuously.</p>
-          <a href="/workspace" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Explore Data →</a>
-        </div>
-        <div style="border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; text-align: left;">
-          <h4 style="font-size: 18px; margin-bottom: 8px; color: #0f172a;">Platform Fairness Data</h4>
-          <p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">Quarterly transparency scores for 500+ marketplaces — hidden fees, return policies, dark patterns.</p>
-          <a href="/workspace" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Explore Data →</a>
-        </div>
-        <div style="border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; text-align: left;">
-          <h4 style="font-size: 18px; margin-bottom: 8px; color: #0f172a;">Affiliate Intelligence</h4>
-          <p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">Commission benchmarks, fraud patterns, and network reliability scores across all major affiliate platforms.</p>
-          <a href="/workspace" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Explore Data →</a>
-        </div>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ 7. EMAIL PROTECTION ═══════════ -->
-  <section style="padding: 60px 20px; background: #f8fafc;">
-    <div style="max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 40px; flex-wrap: wrap;">
-      <div style="flex: 1; min-width: 280px;">
-        <h3 style="font-size: 28px; color: #0f172a; margin-bottom: 16px;">Email Protection</h3>
-        <p style="color: #475569; font-size: 16px; line-height: 1.6; margin-bottom: 24px;">
-          94% of cyber breaches start with a phishing email. Install the WAB extension and every link and sender in your inbox gets scanned by WAB automatically.
-        </p>
-        <div style="display: flex; gap: 12px; flex-wrap: wrap;">
-          <a href="/downloads" style="background: #fff; border: 1px solid #cbd5e1; padding: 10px 20px; border-radius: 8px; text-decoration: none; color: #1e293b; font-weight: 600; font-size: 14px;">🌐 Chrome Extension</a>
-          <a href="/downloads" style="background: #fff; border: 1px solid #cbd5e1; padding: 10px 20px; border-radius: 8px; text-decoration: none; color: #1e293b; font-weight: 600; font-size: 14px;">🦊 Firefox Add-on</a>
-        </div>
-      </div>
-      <div style="flex: 1; min-width: 280px; background: white; padding: 16px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);">
-        <div style="background: #fef2f2; border-left: 4px solid #ef4444; padding: 12px 16px; border-radius: 4px; margin-bottom: 16px;">
-          <strong style="color: #991b1b; font-size: 13px;">🚫 WAB Security Alert:</strong>
-          <span style="color: #991b1b; font-size: 13px;"> Dangerous link detected</span>
-          <div style="color: #b91c1c; font-size: 12px; margin-top: 4px;">PHISHING DETECTED — paypa1-secure-login.xyz scored 95/100 risk</div>
-        </div>
-        <div style="height: 12px; background: #f1f5f9; width: 60%; margin-bottom: 8px; border-radius: 4px;"></div>
-        <div style="height: 12px; background: #f1f5f9; width: 80%; margin-bottom: 8px; border-radius: 4px;"></div>
-        <div style="height: 12px; background: #f1f5f9; width: 40%; border-radius: 4px;"></div>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ 8. AFFILIATE INTELLIGENCE ═══════════ -->
-  <section style="padding: 80px 20px; background: #0f172a; color: white; text-align: center;">
-    <div style="max-width: 800px; margin: 0 auto;">
-      <h2 style="font-size: 36px; margin-bottom: 16px;">Are Affiliate Networks Stealing Your Commissions?</h2>
-      <p style="font-size: 18px; color: #94a3b8; margin-bottom: 32px; line-height: 1.6;">
-        <strong>WAB Affiliate Intelligence</strong> analyzes your affiliate data and compares it with industry benchmarks to detect commission shaving, cookie stuffing, and payment delays.
-      </p>
-      <div style="background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 24px; text-align: left; max-width: 600px; margin: 0 auto 32px; font-family: 'JetBrains Mono', monospace;">
-        <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 12px; margin-bottom: 12px;">
-          <div>
-            <div style="color: #94a3b8; font-size: 12px; margin-bottom: 4px;">Network</div>
-            <div style="font-weight: 700; font-size: 16px;">ClickBank</div>
-          </div>
-          <div style="text-align: right;">
-            <div style="color: #94a3b8; font-size: 12px; margin-bottom: 4px;">Fraud Risk</div>
-            <div style="font-weight: 700; font-size: 16px; color: #f59e0b;">MEDIUM</div>
-          </div>
-        </div>
-        <div style="color: #cbd5e1; font-size: 14px; margin-bottom: 8px;">⚠️ <strong>Commission Shaving:</strong> 12% of valid sales cancelled</div>
-        <div style="color: #cbd5e1; font-size: 14px;">⚠️ <strong>Payment Delays:</strong> Average 45 days vs industry 30</div>
-      </div>
-      <a href="/register" class="btn btn-primary btn-lg">Analyze Your Networks →</a>
-    </div>
-  </section>
-  <!-- ═══════════ CTA ═══════════ -->
-  <section class="section" style="text-align:center;">
-    <div class="container">
-      <h2 style="margin-bottom:16px;">Ready to Make Your Site <span class="gradient-text">AI-Ready</span>?</h2>
-      <p style="color:var(--text-secondary); max-width:540px; margin:0 auto 32px; font-size:1.1rem;">
-        Join the open-source movement that's bridging the gap between AI agents and the web.
-      </p>
-      <div style="display:flex; gap:16px; justify-content:center; flex-wrap:wrap;">
-        <a href="/register" class="btn btn-primary btn-lg">Create Free Account</a>
-        <a href="https://github.com/abokenan444/web-agent-bridge" class="btn btn-secondary btn-lg" target="_blank" rel="noopener">⭐ Star on GitHub</a>
-        <a href="/docs" class="btn btn-secondary btn-lg">View Documentation</a>
-      </div>
-    </div>
-  </section>
-  <!-- ═══════════ FOOTER ═══════════ -->
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-grid">
-        <div class="footer-brand">
-          <a href="/" class="navbar-brand">
-            <div class="brand-icon">⚡</div>
-            <span>Web Agent Bridge</span>
-          </a>
-          <p>Open-source middleware for AI agent and website interaction. Built for the future of intelligent automation.</p>
-        </div>
-        <div class="footer-col">
-          <h4>Product</h4>
-          <ul>
-            <li><a href="#features">Features</a></li>
-            <li><a href="#packages">Framework Packages</a></li>
-            <li><a href="#integrations">Agent Integrations</a></li>
-            <li><a href="#pricing">Pricing</a></li>
-            <li><a href="/docs">Documentation</a></li>
-            <li><a href="/api">API Gateway</a></li>
-            <li><a href="/sovereign">Sovereign Dashboard</a></li>
-            <li><a href="/workspace">Agent Workspace</a></li>
-            <li data-wab-auth="signed-in" style="display:none"><a href="/dashboard">Dashboard</a></li>
-          </ul>
-        </div>
-        <div class="footer-col">
-          <h4>Developers</h4>
-          <ul>
-            <li><a href="/docs#quick-start">Quick Start</a></li>
-            <li><a href="/docs#api-reference">API Reference</a></li>
-            <li><a href="/api">API Modules</a></li>
-            <li><a href="#examples">Examples</a></li>
-            <li><a href="https://github.com/abokenan444/web-agent-bridge" target="_blank" rel="noopener">GitHub</a></li>
-          </ul>
-        </div>
-        <div class="footer-col">
-          <h4>Legal</h4>
-          <ul>
-            <li><a href="/privacy">Privacy Policy</a></li>
-            <li><a href="/terms">Terms of Service</a></li>
-            <li><a href="/cookies">Cookie Policy</a></li>
-          </ul>
-        </div>
-      </div>
-      <div class="footer-bottom">
-        <span>&copy; 2026 Web Agent Bridge. MIT License. Operated from the Netherlands.</span>
-      </div>
-    </div>
-  </footer>
-  <script src="/js/auth-nav.js?v=3.0.1"></script>
-  <script>
-    const navbar = document.getElementById('navbar');
-    window.addEventListener('scroll', () => {
-      navbar.style.background = window.scrollY > 50
-        ? 'rgba(10, 14, 26, 0.95)'
-        : 'rgba(10, 14, 26, 0.8)';
-    });
-  </script>
-  <script src="/js/cookie-consent.js?v=3.0.1"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Web Agent Bridge — Open AI↔Web Protocol & Agent Platform</title>
+  <meta name="description" content="The open AI↔Web protocol & agent platform: standardized command interface, sovereign browser, phone shield, DNS discovery, agent mesh, and unified API gateway.">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <style>body{background:#0a0e1a;color:#f0f4ff;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0;min-height:100vh}</style>
+  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"></noscript>
+  <link rel="stylesheet" href="/css/styles.css?v=3.0.1">
+</head>
+<body>
+  <!-- ═══════════ NAVBAR ═══════════ -->
+  <nav class="navbar" id="navbar">
+    <div class="container">
+      <a href="/" class="navbar-brand">
+        <div class="brand-icon">⚡</div>
+        <span>WAB</span>
+      </a>
+      <ul class="navbar-links">
+        <li><a href="#features">Features</a></li>
+        <li><a href="#packages">Packages</a></li>
+        <li><a href="#integrations">Integrations</a></li>
+        <li><a href="#how-it-works">How It Works</a></li>
+        <li><a href="#pricing">Pricing</a></li>
+        <li><a href="#v2-features">v2.0</a></li>
+        <li><a href="#agent-mesh">Agent Mesh</a></li>
+        <li><a href="#agent-workspace">Workspace</a></li>
+        <li><a href="/demo">Demo</a></li>
+        <li><a href="/integrations">Integrations</a></li>
+        <li><a href="#latest-additions">What's New</a></li>
+        <li><a href="/dns">AI Discovery</a></li>
+        <li><a href="/phone-shield">Phone Shield</a></li>
+        <li><a href="/growth">Growth Suite</a></li>
+        <li><a href="/api">API</a></li>
+        <li><a href="/docs">Docs</a></li>
+      </ul>
+      <div class="navbar-actions">
+        <a href="/login" class="btn btn-ghost" data-wab-auth="guest">Sign In</a>
+        <a href="/dashboard" class="btn btn-ghost" data-wab-auth="signed-in" style="display:none">Dashboard</a>
+        <a href="/register" class="btn btn-primary btn-sm" data-wab-auth="guest">Get Started</a>
+      </div>
+      <button class="mobile-menu-btn" onclick="document.querySelector('.navbar-links').classList.toggle('active')">☰</button>
+    </div>
+  </nav>
+  <!-- ═══════════ HERO ═══════════ -->
+  <section class="hero">
+    <div class="container">
+      <div class="hero-content fade-in">
+        <div class="hero-badge">
+          🚀 Open Source &middot; React &middot; Vue &middot; Svelte &middot; LangChain
+        </div>
+        <h1>
+          Bridge the Gap Between<br>
+          <span class="gradient-text">AI Agents</span> &amp; <span class="gradient-text-accent">Websites</span>
+        </h1>
+        <p>
+          The open <strong>AI↔Web protocol & agent platform</strong>. A standardized command interface, sovereign browser,
+          phone shield, DNS discovery, agent mesh, and unified API gateway — with permissions, rate limiting,
+          and full control for site owners.
+        </p>
+        <div class="hero-actions">
+          <a href="/register" class="btn btn-primary btn-lg">Start Free</a>
+          <a href="/docs" class="btn btn-secondary btn-lg">Read the Docs</a>
+          <a href="/browser" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#0ea5e9,#10b981);color:#fff;border:none">🌐 Download WAB Browser</a>
+          <a href="/pwa/" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#8b5cf6,#0ea5e9);color:#fff;border:none">📱 Mobile PWA</a>
+          <a href="/workspace" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border:none">🤖 Agent Workspace</a>
+          <a href="/demo" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none">🧪 API Playground</a>
+          <a href="/demo" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#06b6d4,#0ea5e9);color:#fff;border:none">🎮 Interactive Demo</a>
+        </div>
+        <div class="hero-code fade-in fade-in-delay-2">
+          <code>
+            <span class="comment">// Add the bridge to your website</span><br>
+            &lt;<span class="keyword">script</span>&gt;<br>
+            &nbsp;&nbsp;window.<span class="property">AIBridgeConfig</span> = {<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">licenseKey</span>: <span class="string">"WAB-XXXXX-XXXXX"</span>,<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">agentPermissions</span>: { <span class="property">click</span>: <span class="boolean">true</span>, <span class="property">fillForms</span>: <span class="boolean">true</span> }<br>
+            &nbsp;&nbsp;};<br>
+            &lt;/<span class="keyword">script</span>&gt;<br>
+            &lt;<span class="keyword">script</span> <span class="property">src</span>=<span class="string">"/script/ai-agent-bridge.js"</span>&gt;&lt;/<span class="keyword">script</span>&gt;
+          </code>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ FEATURES ═══════════ -->
+  <section class="section" id="features">
+    <div class="container">
+      <div class="section-header">
+        <span class="label">Features</span>
+        <h2>Everything AI Agents Need</h2>
+        <p>A complete interface layer that makes websites AI-ready with security and control built in.</p>
+      </div>
+      <div class="grid-3">
+        <div class="card fade-in">
+          <div class="card-icon blue">🎯</div>
+          <h3>Auto-Discovery</h3>
+          <p>Automatically detects buttons, forms, and navigation elements — generating precise CSS selectors and action descriptions for AI agents.</p>
+        </div>
+        <div class="card fade-in fade-in-delay-1">
+          <div class="card-icon purple">🔐</div>
+          <h3>Permission System</h3>
+          <p>Granular control over what AI agents can do. Enable clicking, form filling, API access, and more — each toggled independently.</p>
+        </div>
+        <div class="card fade-in fade-in-delay-2">
+          <div class="card-icon cyan">⚡</div>
+          <h3>Standardized Commands</h3>
+          <p>Unified <code>window.AICommands</code> interface that any AI agent can read and execute — no more DOM guessing.</p>
+        </div>
+        <div class="card fade-in fade-in-delay-1">
+          <div class="card-icon green">🛡️</div>
+          <h3>Rate Limiting</h3>
+          <p>Built-in rate limiting prevents abuse. Configure max calls per minute to protect your site from aggressive automation.</p>
+        </div>
+        <div class="card fade-in fade-in-delay-2">
+          <div class="card-icon orange">📊</div>
+          <h3>Analytics Dashboard</h3>
+          <p>Track how AI agents interact with your site. See which actions are used most, success rates, and usage patterns.</p>
+        </div>
+        <div class="card fade-in fade-in-delay-3">
+          <div class="card-icon pink">🔌</div>
+          <h3>Custom Actions</h3>
+          <p>Register your own actions with custom handlers. Create complex workflows that AI agents can trigger with a single command.</p>
+        </div>
+        <div class="card fade-in">
+          <div class="card-icon cyan">🛒</div>
+          <h3>Commerce &amp; Booking Intents</h3>
+          <p>Automatically detects add-to-cart, checkout, booking, and reservation flows — mapping them to named actions agents can call directly.</p>
+        </div>
+        <div class="card fade-in fade-in-delay-1">
+          <div class="card-icon blue">📦</div>
+          <h3>Structured Data Scanning</h3>
+          <p>Reads schema.org JSON-LD and microdata (Products, Offers, Prices) and exposes them as queryable actions — zero manual setup.</p>
+        </div>
+        <div class="card fade-in fade-in-delay-2">
+          <div class="card-icon green">🩹</div>
+          <h3>Self-Healing Selectors</h3>
+          <p>7-strategy resilient element resolution. When the DOM changes, selectors auto-heal via ARIA, text similarity, and position heuristics.</p>
+        </div>
+        <div class="card fade-in">
+          <div class="card-icon purple">🔏</div>
+          <h3>GDPR / CCPA Consent</h3>
+          <p>Optional consent banner gates agent actions behind user approval. SDK agents can check <code>hasConsent()</code> or <code>waitForConsent()</code> programmatically.</p>
+        </div>
+        <div class="card fade-in fade-in-delay-1">
+          <div class="card-icon orange">🤖</div>
+          <h3>Agent SDK</h3>
+          <p>Built-in SDK for Puppeteer and Playwright: <code>runPipeline()</code>, <code>executeParallel()</code>, <code>screenshot()</code>, and consent-aware workflows.</p>
+        </div>
+        <div class="card fade-in fade-in-delay-2">
+          <div class="card-icon pink">🌐</div>
+          <h3>WebDriver BiDi</h3>
+          <p>Standard WebDriver BiDi protocol support via <code>window.__wab_bidi</code> — compatible with any automation framework that speaks the standard.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ V2 FEATURES ═══════════ -->
+  <section class="section" id="v2-features" style="background: var(--bg-secondary);">
+    <div class="container">
+      <div class="section-header">
+        <span class="label">v2.0 — Digital Fortress</span>
+        <h2>Internet Sovereignty Features</h2>
+        <p>WAB v2.0 goes beyond bridging — it protects users with negotiation, verification, and decentralized trust.</p>
+      </div>
+      <div class="grid-3">
+        <div class="card fade-in" style="border-left: 3px solid #f59e0b;">
+          <div class="card-icon orange">💰</div>
+          <h3>Real-time Negotiation Engine</h3>
+          <p>AI agents negotiate prices directly with WAB-enabled sites. Site owners define negotiation rules (bulk discounts, loyalty rewards, time-based offers). Agents submit counter-offers in multi-round sessions — no middleman, no hidden fees.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>8 condition types (bulk, loyalty, time, first-buy...)</li>
+            <li>4 discount types (percentage, fixed, free shipping, bundle)</li>
+            <li>Multi-round negotiation with counter-offers</li>
+            <li>Savings tracking per agent</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #ef4444;">
+          <div class="card-icon pink">🛡️</div>
+          <h3>Anti-Hallucination Shield</h3>
+          <p>Cross-verification engine that catches AI lies before they reach users. Compares DOM values against vision screenshots, validates prices against market benchmarks, and checks temporal consistency across sessions.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>DOM vs Vision verification</li>
+            <li>Market benchmark price validation</li>
+            <li>Temporal consistency checks</li>
+            <li>Text similarity scoring (Levenshtein)</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #10b981;">
+          <div class="card-icon green">⭐</div>
+          <h3>Decentralized Reputation</h3>
+          <p>Agents and sites build trust through cryptographic attestations. Every interaction gets scored — purchase success, data accuracy, delivery fulfillment. Scores are aggregated into transparent reputation profiles visible to all agents.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Trust attestations from agent network</li>
+            <li>Weighted scoring by interaction type</li>
+            <li>Trust levels: emerging → verified → exemplary</li>
+            <li>Global leaderboard</li>
+          </ul>
+        </div>
+        <div class="card fade-in" style="border-left: 3px solid #3b82f6;">
+          <div class="card-icon blue">🏰</div>
+          <h3>Sovereign Dashboard</h3>
+          <p>A real-time command center showing your digital fortress status — protected sites, fairness radar, privacy shield, negotiation logs, and verification checks all in one beautiful dark-mode dashboard.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Live fairness radar with safety scoring</li>
+            <li>Privacy shield metrics</li>
+            <li>AI model switcher (Llama, GPT-4, Claude...)</li>
+            <li>Protected sites table with trust levels</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #8b5cf6;">
+          <div class="card-icon purple">📦</div>
+          <h3>Community Agent Hub</h3>
+          <p>Pre-built YAML agent templates for common use cases — hotel booking, grocery comparison, artisan marketplace, flight deals. Run any template with a single CLI command: <code>npx wab-agent run template.yaml</code>.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>11 production-ready templates</li>
+            <li>CLI runner with variable substitution</li>
+            <li>Fairness rules built into every template</li>
+            <li>Supports negotiation + verification</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #0ea5e9;">
+          <div class="card-icon cyan">🌐</div>
+          <h3>Cross-Site Agent Orchestration</h3>
+          <p>One agent manages multiple WAB-enabled sites simultaneously. Compare prices across stores, aggregate product data, run parallel actions — all from a single <code>WABMultiAgent</code> instance in the SDK.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Parallel multi-site browser sessions</li>
+            <li>comparePrices() with cheapest-deal finder</li>
+            <li>Schema.org + WAB action price extraction</li>
+            <li>Cross-site screenshots for vision verification</li>
+          </ul>
+        </div>
+        <div class="card fade-in" style="border-left: 3px solid #06b6d4;">
+          <div class="card-icon cyan">🔄</div>
+          <h3>AI Brain Swapping</h3>
+          <p>WAB is the bridge — the AI model is your choice. Switch between Llama 3, GPT-4, Claude, Gemini, Mistral, or run fully local with Ollama. Your data, your model, your sovereignty.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>6 supported AI engines</li>
+            <li>Local-first with Ollama support</li>
+            <li>Hot-swap without reconfiguration</li>
+            <li>Your data never leaves your machine</li>
+          </ul>
+        </div>
+      </div>
+      <div style="text-align:center; margin-top:32px;">
+        <a href="/sovereign" class="btn btn-primary btn-lg">Open Sovereign Dashboard</a>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ PRIVATE AGENT MESH ═══════════ -->
+  <section class="section" id="agent-mesh">
+    <div class="container">
+      <div class="section-header">
+        <span class="label" style="background: rgba(139,92,246,0.15); color: #8b5cf6;">v2.3 — Distributed Mind</span>
+        <h2>Private Agent Mesh</h2>
+        <p>Agents communicate, learn, and orchestrate autonomously — zero external LLM dependency. Your private fortress now has a distributed intelligence layer.</p>
+      </div>
+      <div class="grid-3">
+        <div class="card fade-in" style="border-left: 3px solid #8b5cf6;">
+          <div class="card-icon purple">🕸️</div>
+          <h3>Inter-Agent Protocol</h3>
+          <p>Agents communicate through a private mesh — sharing discoveries, broadcasting alerts, and exchanging tactics in real-time. 5 built-in channels: alerts, discoveries, tactics, negotiations, votes.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Real-time agent-to-agent messaging</li>
+            <li>Shared knowledge base with confidence scoring</li>
+            <li>Priority-based message routing</li>
+            <li>Auto-expiring messages with TTL</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #10b981;">
+          <div class="card-icon green">🧠</div>
+          <h3>Local Reinforcement Learning</h3>
+          <p>Agents learn from every user decision — accepted, rejected, or modified. Multi-armed bandit action selection, gradient-descent policy updates, and behavioral pattern mining. All local, zero tokens consumed.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>UCB1 multi-armed bandit for action selection</li>
+            <li>Sigmoid prediction with gradient descent</li>
+            <li>Behavioral sequence pattern mining</li>
+            <li>Bayesian confidence estimation</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #f59e0b;">
+          <div class="card-icon orange">🎼</div>
+          <h3>Symphony Orchestrator</h3>
+          <p>Four specialized agents (Researcher, Analyst, Negotiator, Guardian) collaborate autonomously through rule-based engines. No external AI needed — the symphony runs entirely on local heuristics and learned preferences.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>5 templates: purchase, price comparison, negotiation, exploration, audit</li>
+            <li>6-phase pipeline: compose → discover → analyze → negotiate → guard → decide</li>
+            <li>Guardian veto for safety-critical decisions</li>
+            <li>Weighted consensus with agreement scoring</li>
+          </ul>
+        </div>
+      </div>
+      <div style="text-align:center; margin-top:32px;">
+        <a href="/mesh-dashboard" class="btn btn-primary btn-lg" style="background: #8b5cf6;">Open Agent Mesh Dashboard</a>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ AGENT WORKSPACE (v2.5) ═══════════ -->
+  <section class="section" id="agent-workspace" style="background: var(--bg-secondary);">
+    <div class="container">
+      <div class="section-header">
+        <span class="label" style="background: rgba(245,158,11,0.15); color: #f59e0b;">v2.5 — Agent Workspace</span>
+        <h2>Smart Agent Workspace</h2>
+        <p>A premium 4-panel workspace for non-technical users — search, negotiate, and buy with AI assistance. Available in Arabic &amp; English with multilingual agent support.</p>
+      </div>
+      <div class="grid-3">
+        <div class="card fade-in" style="border-left: 3px solid #0ea5e9;">
+          <div class="card-icon blue">🌐</div>
+          <h3>Embedded Browser</h3>
+          <p>Full browser panel with URL bar, navigation controls, and secure iframe rendering. The agent opens pages, loads deals, and navigates sites — all visible in real-time.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Address bar with SSL indicator</li>
+            <li>Back, forward, refresh controls</li>
+            <li>Maximize any panel to full screen</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #10b981;">
+          <div class="card-icon green">🤖</div>
+          <h3>Smart Agent Chat</h3>
+          <p>Chat with the AI agent in any language — Arabic, English, French, Turkish, or mix them all. The agent understands your intent from any style, dialect, or slang.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Suggestion chips for quick start</li>
+            <li>Multilingual — responds in your language</li>
+            <li>Clarifying questions for precise results</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #f59e0b;">
+          <div class="card-icon orange">📊</div>
+          <h3>Negotiation Monitor</h3>
+          <p>Watch the agent work in real-time — step-by-step progress tracking, per-agent status cards, and live negotiation rounds with savings details.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Multi-step progress visualization</li>
+            <li>Per-agent cards with progress bars</li>
+            <li>Negotiation round-by-round log</li>
+          </ul>
+        </div>
+        <div class="card fade-in" style="border-left: 3px solid #8b5cf6;">
+          <div class="card-icon purple">🏆</div>
+          <h3>Results &amp; Actions</h3>
+          <p>Compare offers ranked by value with savings percentages, one-click deal links, and an "Agent Do It" button that lets the AI complete the purchase for you.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Deal cards with price comparison</li>
+            <li>One-click \"Open Deal\" links</li>
+            <li>\"Agent Do It\" auto-completion</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #ef4444;">
+          <div class="card-icon pink">🌍</div>
+          <h3>Bilingual UI (AR/EN)</h3>
+          <p>Full Arabic and English interface with auto-detection from browser language. Toggle instantly between languages with complete RTL/LTR layout support.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>100+ translated UI strings</li>
+            <li>Auto-detect browser language</li>
+            <li>RTL ↔ LTR with one click</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #06b6d4;">
+          <div class="card-icon cyan">💎</div>
+          <h3>Subscription Plans</h3>
+          <p>Free tier (5 tasks/day), Starter, Pro (unlimited + advanced negotiation), and Enterprise plans. Admin dashboard for managing users, deals, and analytics.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Free, Starter, Pro, Enterprise</li>
+            <li>Usage tracking with daily limits</li>
+            <li>Admin management panel</li>
+          </ul>
+        </div>
+        <div class="card fade-in" style="border-left: 3px solid #a855f7;">
+          <div class="card-icon purple">🛡️</div>
+          <h3>Dynamic Pricing Shield</h3>
+          <p>Detects when websites manipulate prices based on your device, location, cookies, or browsing history. The agent probes with 12 distinct identities to expose hidden pricing and find the lowest price invisible to normal users.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>12 identity personas (device, geo, referral, privacy)</li>
+            <li>Statistical variance &amp; z-score outlier detection</li>
+            <li>Manipulation scoring with actionable tips</li>
+            <li>Historical price-trend analysis</li>
+          </ul>
+        </div>
+      </div>
+      <div style="text-align:center; margin-top:32px;">
+        <a href="/workspace" class="btn btn-primary btn-lg" style="background: linear-gradient(135deg,#f59e0b,#ef4444);">Open Agent Workspace</a>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ HOW IT WORKS ═══════════ -->
+  <section class="section" id="how-it-works" style="background: var(--bg-secondary);">
+    <div class="container">
+      <div class="section-header">
+        <span class="label">How It Works</span>
+        <h2>Three Steps to AI-Ready</h2>
+        <p>Get your website ready for AI agents in minutes, not days.</p>
+      </div>
+      <div class="grid-3">
+        <div class="card" style="text-align:center;">
+          <div style="font-size:2.5rem; margin-bottom:16px;">1️⃣</div>
+          <h3>Add the Script</h3>
+          <p>Include the bridge script in your HTML with your configuration. Set permissions, restrictions, and your license key.</p>
+        </div>
+        <div class="card" style="text-align:center;">
+          <div style="font-size:2.5rem; margin-bottom:16px;">2️⃣</div>
+          <h3>Configure Permissions</h3>
+          <p>Use the dashboard to fine-tune which actions AI agents can perform. Block sensitive areas and set rate limits.</p>
+        </div>
+        <div class="card" style="text-align:center;">
+          <div style="font-size:2.5rem; margin-bottom:16px;">3️⃣</div>
+          <h3>AI Agents Connect</h3>
+          <p>AI agents read <code>window.AICommands</code>, discover available actions, and execute them precisely — no DOM scraping needed.</p>
+        </div>
+      </div>
+      <div style="margin-top:48px;">
+        <div class="code-block">
+          <div class="code-header">
+            <div class="code-dots"><span></span><span></span><span></span></div>
+            <span class="code-lang">JavaScript — AI Agent Side</span>
+          </div>
+          <div class="code-body">
+<pre><span class="cm">// AI Agent reads available commands</span>
+<span class="kw">const</span> bridge = window.<span class="prop">AICommands</span>;
+<span class="cm">// Discover all available actions</span>
+<span class="kw">const</span> actions = bridge.<span class="fn">getActions</span>();
+console.<span class="fn">log</span>(actions);
+<span class="cm">// → [{ name: "signup", trigger: "click", ... }, ...]</span>
+<span class="cm">// Execute a form fill action</span>
+<span class="kw">const</span> result = <span class="kw">await</span> bridge.<span class="fn">execute</span>(<span class="str">"fill_contact_form"</span>, {
+  <span class="prop">name</span>: <span class="str">"John Doe"</span>,
+  <span class="prop">email</span>: <span class="str">"john@example.com"</span>,
+  <span class="prop">message</span>: <span class="str">"Hello from AI!"</span>
+});
+<span class="cm">// Wait for dynamic content</span>
+<span class="kw">await</span> bridge.<span class="fn">waitForElement</span>(<span class="str">".success-message"</span>);</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ PRICING ═══════════ -->
+  <section class="section" id="pricing">
+    <div class="container">
+      <div class="section-header">
+        <span class="label">Pricing</span>
+        <h2>Simple, Transparent Pricing</h2>
+        <p>Start free, upgrade when you need advanced features. Open source forever.</p>
+      </div>
+      <div class="grid-3">
+        <div class="pricing-card">
+          <div class="pricing-tier">Free</div>
+          <div class="pricing-price">$0 <span>/mo</span></div>
+          <div class="pricing-desc">Perfect for personal projects and experimentation.</div>
+          <ul class="pricing-features">
+            <li>Auto-discovery of actions</li>
+            <li>Click &amp; scroll permissions</li>
+            <li>Rate limiting (60/min)</li>
+            <li>Basic logging</li>
+            <li>1 site</li>
+            <li class="disabled">Form filling</li>
+            <li class="disabled">API access</li>
+            <li class="disabled">Analytics dashboard</li>
+          </ul>
+          <a href="/register" class="btn btn-secondary" style="width:100%;">Get Started Free</a>
+        </div>
+        <div class="pricing-card featured">
+          <div class="pricing-tier">Pro</div>
+          <div class="pricing-price">$29 <span>/mo</span></div>
+          <div class="pricing-desc">For businesses that want full AI agent integration.</div>
+          <ul class="pricing-features">
+            <li>Everything in Free</li>
+            <li>Form filling &amp; submission</li>
+            <li>Internal API access</li>
+            <li>Advanced analytics</li>
+            <li>Up to 10 sites</li>
+            <li>Automated login support</li>
+            <li>Data extraction</li>
+            <li>Priority support</li>
+          </ul>
+          <a href="/register" class="btn btn-primary" style="width:100%;">Start Pro Trial</a>
+        </div>
+        <div class="pricing-card">
+          <div class="pricing-tier">Enterprise</div>
+          <div class="pricing-price">Custom</div>
+          <div class="pricing-desc">Custom solutions for large-scale deployments.</div>
+          <ul class="pricing-features">
+            <li>Everything in Pro</li>
+            <li>Unlimited sites</li>
+            <li>Custom rate limits</li>
+            <li>Webhook integrations</li>
+            <li>SSO / SAML</li>
+            <li>Dedicated support</li>
+            <li>SLA guarantee</li>
+            <li>Custom development</li>
+          </ul>
+          <a href="mailto:sales@webagentbridge.com" class="btn btn-secondary" style="width:100%;">Contact Sales</a>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ FRAMEWORK PACKAGES ═══════════ -->
+  <section class="section" id="packages" style="background: var(--bg-secondary);">
+    <div class="container">
+      <div class="section-header">
+        <span class="label">Packages</span>
+        <h2>Use WAB with Your Favorite Framework</h2>
+        <p>Official packages for React, Vue, Svelte, and LangChain — with full TypeScript support.</p>
+      </div>
+      <div class="grid-3">
+        <div class="card fade-in" style="text-align:center;">
+          <div style="font-size:2.5rem; margin-bottom:16px;">⚛️</div>
+          <h3>React</h3>
+          <p><code>@web-agent-bridge/react</code></p>
+          <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Hooks: <code>useWAB</code>, <code>useWABAction</code>, <code>useWABActions</code> + <code>WABProvider</code> for auto-loading the script.</p>
+          <div class="code-block" style="margin-top:16px; text-align:left;">
+            <div class="code-body" style="padding:12px; font-size:0.82rem;">
+<pre><span class="kw">const</span> { run, result } = <span class="fn">useWABAction</span>(<span class="str">'addToCart'</span>);
+<span class="kw">await</span> <span class="fn">run</span>({ <span class="prop">sku</span>: <span class="str">'ABC123'</span> });</pre>
+            </div>
+          </div>
+        </div>
+        <div class="card fade-in fade-in-delay-1" style="text-align:center;">
+          <div style="font-size:2.5rem; margin-bottom:16px;">💚</div>
+          <h3>Vue 3</h3>
+          <p><code>@web-agent-bridge/vue</code></p>
+          <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Composables: <code>useWAB</code>, <code>useWABAction</code>, <code>useWABActions</code> — reactive refs with loading/error/result state.</p>
+          <div class="code-block" style="margin-top:16px; text-align:left;">
+            <div class="code-body" style="padding:12px; font-size:0.82rem;">
+<pre><span class="kw">const</span> cart = <span class="fn">useWABAction</span>(<span class="str">'addToCart'</span>);
+<span class="kw">await</span> cart.<span class="fn">run</span>({ <span class="prop">sku</span>: <span class="str">'ABC123'</span> });
+<span class="cm">// cart.result.value, cart.loading.value</span></pre>
+            </div>
+          </div>
+        </div>
+        <div class="card fade-in fade-in-delay-2" style="text-align:center;">
+          <div style="font-size:2.5rem; margin-bottom:16px;">🔥</div>
+          <h3>Svelte</h3>
+          <p><code>@web-agent-bridge/svelte</code></p>
+          <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Stores: <code>createWAB</code>, <code>createWABAction</code> — subscribe to <code>$store</code> for reactive state.</p>
+          <div class="code-block" style="margin-top:16px; text-align:left;">
+            <div class="code-body" style="padding:12px; font-size:0.82rem;">
+<pre><span class="kw">const</span> cart = <span class="fn">createWABAction</span>(<span class="str">'addToCart'</span>);
+<span class="kw">await</span> cart.<span class="fn">run</span>({ <span class="prop">sku</span>: <span class="str">'ABC123'</span> });
+<span class="cm">// {#if $cart.loading}Adding...{/if}</span></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ LLM / AGENT INTEGRATION ═══════════ -->
+  <section class="section" id="integrations">
+    <div class="container">
+      <div class="section-header">
+        <span class="label">Agent Integrations</span>
+        <h2>Connect Any AI Agent Framework</h2>
+        <p>Use WAB with LangChain, MCP, or build your own agent — every action becomes a tool the LLM can call.</p>
+      </div>
+      <div class="grid-3">
+        <div class="card fade-in" style="text-align:center;">
+          <div style="font-size:2.5rem; margin-bottom:16px;">🦜</div>
+          <h3>LangChain / LangGraph</h3>
+          <p><code>@web-agent-bridge/langchain</code></p>
+          <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">WABToolkit wraps every WAB action as a LangChain <code>StructuredTool</code>. Works in HTTP mode (server) or browser mode (Puppeteer).</p>
+          <div class="code-block" style="margin-top:16px; text-align:left;">
+            <div class="code-body" style="padding:12px; font-size:0.82rem;">
+<pre><span class="kw">const</span> tk = <span class="kw">new</span> <span class="fn">WABToolkit</span>({ <span class="prop">siteUrl</span>: <span class="str">'https://shop.example.com'</span> });
+<span class="kw">const</span> tools = <span class="kw">await</span> tk.<span class="fn">getTools</span>();
+<span class="cm">// Pass tools to any LangChain agent</span></pre>
+            </div>
+          </div>
+        </div>
+        <div class="card fade-in fade-in-delay-1" style="text-align:center;">
+          <div style="font-size:2.5rem; margin-bottom:16px;">🔗</div>
+          <h3>MCP Adapter</h3>
+          <p><code>wab-mcp-adapter</code></p>
+          <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Converts WAB actions into MCP tools so any MCP-compatible agent (Claude, etc.) can interact with WAB sites through MCP.</p>
+          <div class="code-block" style="margin-top:16px; text-align:left;">
+            <div class="code-body" style="padding:12px; font-size:0.82rem;">
+<pre><span class="kw">const</span> adapter = <span class="kw">new</span> <span class="fn">WABMCPAdapter</span>({ <span class="prop">siteUrl</span>: <span class="str">'...'</span> });
+<span class="kw">const</span> tools = adapter.<span class="fn">listTools</span>();
+<span class="cm">// Built-in: discover, execute, read, search</span></pre>
+            </div>
+          </div>
+        </div>
+        <div class="card fade-in fade-in-delay-2" style="text-align:center;">
+          <div style="font-size:2.5rem; margin-bottom:16px;">🧰</div>
+          <h3>Agent SDK</h3>
+          <p><code>web-agent-bridge/sdk</code></p>
+          <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">First-class Puppeteer/Playwright SDK with pipeline execution, parallel actions, screenshot capture, and consent-aware workflows.</p>
+          <div class="code-block" style="margin-top:16px; text-align:left;">
+            <div class="code-body" style="padding:12px; font-size:0.82rem;">
+<pre><span class="kw">const</span> agent = <span class="kw">new</span> <span class="fn">WABAgent</span>(page);
+<span class="kw">await</span> agent.<span class="fn">waitForConsent</span>();
+<span class="kw">await</span> agent.<span class="fn">runPipeline</span>([...steps]);</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ EXAMPLES ═══════════ -->
+  <section class="section" id="examples" style="background: var(--bg-secondary);">
+    <div class="container">
+      <div class="section-header">
+        <span class="label">Examples</span>
+        <h2>Framework &amp; CMS Integration Examples</h2>
+        <p>Ready-to-use examples for popular platforms — see how WAB fits into your stack.</p>
+      </div>
+      <div class="grid-3">
+        <div class="card fade-in" style="text-align:center;">
+          <div style="font-size:2.2rem; margin-bottom:12px;">▲</div>
+          <h3>Next.js App Router</h3>
+          <p style="color:var(--text-secondary); font-size:0.9rem;">React Server Components + WABProvider for client-side bridge with <code>useWABAction</code> hooks.</p>
+        </div>
+        <div class="card fade-in fade-in-delay-1" style="text-align:center;">
+          <div style="font-size:2.2rem; margin-bottom:12px;">🛍️</div>
+          <h3>Shopify Hydrogen</h3>
+          <p style="color:var(--text-secondary); font-size:0.9rem;">Hydrogen storefront with cart actions: <code>getCartCount</code>, <code>addFirstVisibleProductToCart</code>.</p>
+        </div>
+        <div class="card fade-in fade-in-delay-2" style="text-align:center;">
+          <div style="font-size:2.2rem; margin-bottom:12px;">📝</div>
+          <h3>WordPress + Elementor</h3>
+          <p style="color:var(--text-secondary); font-size:0.9rem;">Elementor page builder + WAB schema scanner for auto-discovered product and form actions.</p>
+        </div>
+        <div class="card fade-in" style="text-align:center;">
+          <div style="font-size:2.2rem; margin-bottom:12px;">📊</div>
+          <h3>SaaS Dashboard</h3>
+          <p style="color:var(--text-secondary); font-size:0.9rem;">Notion-style SaaS with KPI reads, customer lookup, and invoice workflow triggers.</p>
+        </div>
+        <div class="card fade-in fade-in-delay-1" style="text-align:center;">
+          <div style="font-size:2.2rem; margin-bottom:12px;">🤖</div>
+          <h3>Puppeteer Agent</h3>
+          <p style="color:var(--text-secondary); font-size:0.9rem;">Headless browser agent that discovers and executes actions automatically via the SDK.</p>
+        </div>
+        <div class="card fade-in fade-in-delay-2" style="text-align:center;">
+          <div style="font-size:2.2rem; margin-bottom:12px;">👁️</div>
+          <h3>Vision Agent</h3>
+          <p style="color:var(--text-secondary); font-size:0.9rem;">Natural language intent resolution — "add product to cart" maps to the right WAB action.</p>
+        </div>
+      </div>
+      <div style="text-align:center; margin-top:32px;">
+        <a href="https://github.com/abokenan444/web-agent-bridge/tree/master/examples" class="btn btn-secondary" target="_blank" rel="noopener">View All Examples on GitHub →</a>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ GROWTH SUITE ═══════════ -->
+  <section class="section" id="growth-suite" style="background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); color: #fff;">
+    <div class="container" style="text-align:center;">
+      <div style="display:inline-block; background:rgba(59,130,246,0.15); color:#60a5fa; padding:6px 16px; border-radius:20px; font-size:13px; font-weight:600; margin-bottom:20px;">WAB Growth Suite v2.5</div>
+      <h2 style="margin-bottom:16px; color:#fff;">8 Modules to Protect & Power the Web</h2>
+      <p style="color:#94a3b8; max-width:600px; margin:0 auto 40px; font-size:1.05rem; line-height:1.6;">
+        From link protection widgets to AI safety layers, bounty networks to threat intelligence — everything you need to build a safer, fairer web.
+      </p>
+      <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; max-width:960px; margin:0 auto 40px;">
+        <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
+          <div style="font-size:28px; margin-bottom:8px;">🛡️</div>
+          <div style="font-weight:700; font-size:15px;">WAB Widget</div>
+          <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Drop-in link protection</div>
+        </div>
+        <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
+          <div style="font-size:28px; margin-bottom:8px;">🤖</div>
+          <div style="font-weight:700; font-size:15px;">AI Safety Layer</div>
+          <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Security for AI agents</div>
+        </div>
+        <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
+          <div style="font-size:28px; margin-bottom:8px;">📊</div>
+          <div style="font-weight:700; font-size:15px;">WAB Score</div>
+          <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Platform credit rating</div>
+        </div>
+        <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
+          <div style="font-size:28px; margin-bottom:8px;">💰</div>
+          <div style="font-weight:700; font-size:15px;">Bounty Network</div>
+          <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Earn by finding scams</div>
+        </div>
+      </div>
+      <a href="/growth" class="btn btn-primary btn-lg">Explore All 8 Modules →</a>
+    </div>
+  </section>
+  <!-- ═══════════ 1. WAB WIDGET ═══════════ -->
+  <section class="wab-widget-section" style="padding: 80px 20px; background: #f8fafc; text-align: center;">
+    <div style="max-width: 800px; margin: 0 auto;">
+      <h2 style="font-size: 36px; color: #0f172a; margin-bottom: 16px;">One Line of Code. Full Link Protection.</h2>
+      <p style="font-size: 18px; color: #64748b; margin-bottom: 32px;">
+        Add a <strong>WAB Widget</strong> next to every external link on your site, blocking phishing and scam URLs in real-time for your visitors.
+      </p>
+      <div style="background: #0f172a; color: #e2e8f0; padding: 24px; border-radius: 12px; font-family: 'JetBrains Mono', monospace; font-size: 14px; text-align: left; margin-bottom: 24px; overflow-x: auto;">
+        <span style="color:#f472b6">&lt;script</span> <span style="color:#a78bfa">src</span>=<span style="color:#86efac">"https://webagentbridge.com/script/ai-agent-bridge.js"</span><br>
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#a78bfa">data-wab-key</span>=<span style="color:#86efac">"YOUR_API_KEY"</span><span style="color:#f472b6">&gt;&lt;/script&gt;</span>
+      </div>
+      <div style="display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;">
+        <a href="/growth#modules" class="btn btn-primary">See Widget Demo</a>
+        <a href="/workspace" class="btn btn-secondary">Get Your API Key →</a>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ 2. AI SAFETY LAYER ═══════════ -->
+  <section class="ai-safety-section" style="padding: 80px 20px; background: #0f172a; color: #fff;">
+    <div style="max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;">
+      <div>
+        <div style="color: #3b82f6; font-weight: 700; margin-bottom: 8px; letter-spacing: 1px; font-size: 12px;">FOR AI COMPANIES</div>
+        <h2 style="font-size: 32px; margin-bottom: 16px;">Mandatory Safety for AI Agents</h2>
+        <p style="color: #94a3b8; font-size: 16px; line-height: 1.6; margin-bottom: 24px;">
+          Building an AI agent that browses the web? Use <strong>WAB AI Safety Layer</strong> as a mandatory security wrapper. It scans every URL before your agent visits it.
+        </p>
+        <ul style="list-style: none; padding: 0; color: #cbd5e1; margin-bottom: 32px;">
+          <li style="margin-bottom: 12px;">✅ Compatible with OpenAI Operator &amp; Anthropic Computer Use</li>
+          <li style="margin-bottom: 12px;">✅ Blocks fraudulent financial transactions automatically</li>
+          <li style="margin-bottom: 12px;">✅ Lifts legal liability from your company</li>
+        </ul>
+        <a href="/docs" class="btn btn-primary">Read AI Safety Docs →</a>
+      </div>
+      <div style="background: #1e293b; padding: 24px; border-radius: 16px; border: 1px solid #334155; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.7; overflow-x: auto;">
+        <span style="color:#c678dd">import</span> { WABAgentWrapper } <span style="color:#c678dd">from</span> <span style="color:#98c379">'@wab/sdk'</span>;<br><br>
+        <span style="color:#5c6370">// Wrap your AI Agent with WAB Safety</span><br>
+        <span style="color:#c678dd">const</span> safeAgent = <span style="color:#c678dd">new</span> <span style="color:#61afef">WABAgentWrapper</span>(myAgent, {<br>
+        &nbsp;&nbsp;<span style="color:#d19a66">blockCritical</span>: <span style="color:#d19a66">true</span>,<br>
+        &nbsp;&nbsp;<span style="color:#d19a66">minFairness</span>: <span style="color:#d19a66">60</span>,<br>
+        });<br><br>
+        <span style="color:#5c6370">// WAB will block this if the site is a scam</span><br>
+        <span style="color:#c678dd">await</span> safeAgent.<span style="color:#61afef">browse</span>(<span style="color:#98c379">'https://scam-site.xyz'</span>);<br>
+        <span style="color:#e06c75">→ WABBlockedError: Phishing detected</span>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ 3. WAB SCORE ═══════════ -->
+  <section class="wab-score-section" style="padding: 80px 20px; background: white; text-align: center;">
+    <div style="max-width: 800px; margin: 0 auto;">
+      <h2 style="font-size: 36px; color: #0f172a; margin-bottom: 16px;">The Digital World's Credit Rating</h2>
+      <p style="font-size: 18px; color: #64748b; margin-bottom: 40px;">
+        Like credit agencies rate banks, <strong>WAB Score</strong> rates digital platforms. Search any platform and get a transparency score based on 15 fairness signals.
+      </p>
+      <div style="display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-bottom: 40px;">
+        <div style="border: 2px solid #22c55e; border-radius: 12px; padding: 16px 24px; display: flex; align-items: center; gap: 12px; background: #fff;">
+          <div style="font-size: 32px; font-weight: 900; color: #22c55e; line-height: 1;">A-</div>
+          <div>
+            <div style="font-weight: 700; color: #1e293b;">Very Good</div>
+            <div style="font-size: 12px; color: #64748b;">86/100 · amazon.com</div>
+          </div>
+        </div>
+        <div style="border: 2px solid #f59e0b; border-radius: 12px; padding: 16px 24px; display: flex; align-items: center; gap: 12px; background: #fff;">
+          <div style="font-size: 32px; font-weight: 900; color: #f59e0b; line-height: 1;">C+</div>
+          <div>
+            <div style="font-weight: 700; color: #1e293b;">Below Average</div>
+            <div style="font-size: 12px; color: #64748b;">68/100 · aliexpress.com</div>
+          </div>
+        </div>
+      </div>
+      <form action="/score" method="GET" style="display: flex; max-width: 500px; margin: 0 auto; gap: 8px;">
+        <input type="text" name="domain" placeholder="Enter platform domain (e.g. shein.com)" style="flex: 1; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 15px;">
+        <button type="submit" style="background: #0f172a; color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 700; cursor: pointer;">Check Score</button>
+      </form>
+    </div>
+  </section>
+  <!-- ═══════════ 4. TRUST LAYER PROTOCOL ═══════════ -->
+  <section style="padding: 60px 20px; background: #f1f5f9; border-top: 1px solid #e2e8f0;">
+    <div style="max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 40px; flex-wrap: wrap;">
+      <div style="flex: 1; min-width: 280px;">
+        <h3 style="font-size: 24px; color: #0f172a; margin-bottom: 12px;">The Open Trust Protocol</h3>
+        <p style="color: #475569; line-height: 1.6; margin-bottom: 20px;">
+          Prove to your customers that your store is fair and safe. Add a <code>wab.json</code> file to your site and print a verified trust badge — the SSL padlock for platform fairness.
+        </p>
+        <a href="/docs" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Learn how to get WAB Certified →</a>
+      </div>
+      <div style="flex: 1; min-width: 280px; background: white; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;">
+        <div style="font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #334155;">
+          <span style="color:#94a3b8">// /.well-known/wab.json</span><br>
+          {<br>
+          &nbsp;&nbsp;"wab_certified": <span style="color:#22c55e">true</span>,<br>
+          &nbsp;&nbsp;"fairness_score": <span style="color:#3b82f6">92</span>,<br>
+          &nbsp;&nbsp;"last_audit": <span style="color:#a3e635">"2026-04-01"</span><br>
+          }
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ 5. BOUNTY NETWORK ═══════════ -->
+  <section style="padding: 80px 20px; background: #0f172a; color: white; text-align: center;">
+    <div style="max-width: 700px; margin: 0 auto;">
+      <div style="font-size: 48px; margin-bottom: 16px;">💰</div>
+      <h2 style="font-size: 36px; margin-bottom: 16px;">Earn Money by Discovering Fraud</h2>
+      <p style="font-size: 18px; color: #94a3b8; margin-bottom: 32px; line-height: 1.6;">
+        Join the <strong>WAB Bounty Network</strong> and report phishing, scams, and malware that automated systems haven't caught yet. Earn credits redeemable for cash.
+      </p>
+      <div style="display: flex; justify-content: center; gap: 24px; margin-bottom: 32px; flex-wrap: wrap;">
+        <div style="background: #1e293b; padding: 16px 24px; border-radius: 8px;">
+          <div style="font-size: 24px; font-weight: 700; color: #ef4444;">50 Credits</div>
+          <div style="font-size: 13px; color: #94a3b8;">Critical Threats</div>
+        </div>
+        <div style="background: #1e293b; padding: 16px 24px; border-radius: 8px;">
+          <div style="font-size: 24px; font-weight: 700; color: #f59e0b;">25 Credits</div>
+          <div style="font-size: 13px; color: #94a3b8;">Confirmed Scams</div>
+        </div>
+      </div>
+      <a href="/register" class="btn btn-primary btn-lg">Start Earning →</a>
+    </div>
+  </section>
+  <!-- ═══════════ 6. DATA MARKETPLACE ═══════════ -->
+  <section style="padding: 80px 20px; background: white;">
+    <div style="max-width: 1000px; margin: 0 auto; text-align: center;">
+      <h2 style="font-size: 32px; color: #0f172a; margin-bottom: 16px;">Threat Intelligence for AI &amp; Security</h2>
+      <p style="font-size: 18px; color: #64748b; margin-bottom: 48px; max-width: 700px; margin-left: auto; margin-right: auto;">
+        <strong>WAB Data Marketplace</strong> provides curated threat intelligence datasets for cybersecurity companies and AI model training.
+      </p>
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;">
+        <div style="border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; text-align: left;">
+          <h4 style="font-size: 18px; margin-bottom: 8px; color: #0f172a;">Threat Intelligence Feed</h4>
+          <p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">Real-time phishing, malware, and scam URL data from 47 databases. Updated continuously.</p>
+          <a href="/workspace" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Explore Data →</a>
+        </div>
+        <div style="border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; text-align: left;">
+          <h4 style="font-size: 18px; margin-bottom: 8px; color: #0f172a;">Platform Fairness Data</h4>
+          <p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">Quarterly transparency scores for 500+ marketplaces — hidden fees, return policies, dark patterns.</p>
+          <a href="/workspace" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Explore Data →</a>
+        </div>
+        <div style="border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; text-align: left;">
+          <h4 style="font-size: 18px; margin-bottom: 8px; color: #0f172a;">Affiliate Intelligence</h4>
+          <p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">Commission benchmarks, fraud patterns, and network reliability scores across all major affiliate platforms.</p>
+          <a href="/workspace" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Explore Data →</a>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ 7. EMAIL PROTECTION ═══════════ -->
+  <section style="padding: 60px 20px; background: #f8fafc;">
+    <div style="max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 40px; flex-wrap: wrap;">
+      <div style="flex: 1; min-width: 280px;">
+        <h3 style="font-size: 28px; color: #0f172a; margin-bottom: 16px;">Email Protection</h3>
+        <p style="color: #475569; font-size: 16px; line-height: 1.6; margin-bottom: 24px;">
+          94% of cyber breaches start with a phishing email. Install the WAB extension and every link and sender in your inbox gets scanned by WAB automatically.
+        </p>
+        <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+          <a href="/downloads" style="background: #fff; border: 1px solid #cbd5e1; padding: 10px 20px; border-radius: 8px; text-decoration: none; color: #1e293b; font-weight: 600; font-size: 14px;">🌐 Chrome Extension</a>
+          <a href="/downloads" style="background: #fff; border: 1px solid #cbd5e1; padding: 10px 20px; border-radius: 8px; text-decoration: none; color: #1e293b; font-weight: 600; font-size: 14px;">🦊 Firefox Add-on</a>
+        </div>
+      </div>
+      <div style="flex: 1; min-width: 280px; background: white; padding: 16px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);">
+        <div style="background: #fef2f2; border-left: 4px solid #ef4444; padding: 12px 16px; border-radius: 4px; margin-bottom: 16px;">
+          <strong style="color: #991b1b; font-size: 13px;">🚫 WAB Security Alert:</strong>
+          <span style="color: #991b1b; font-size: 13px;"> Dangerous link detected</span>
+          <div style="color: #b91c1c; font-size: 12px; margin-top: 4px;">PHISHING DETECTED — paypa1-secure-login.xyz scored 95/100 risk</div>
+        </div>
+        <div style="height: 12px; background: #f1f5f9; width: 60%; margin-bottom: 8px; border-radius: 4px;"></div>
+        <div style="height: 12px; background: #f1f5f9; width: 80%; margin-bottom: 8px; border-radius: 4px;"></div>
+        <div style="height: 12px; background: #f1f5f9; width: 40%; border-radius: 4px;"></div>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ 8. AFFILIATE INTELLIGENCE ═══════════ -->
+  <section style="padding: 80px 20px; background: #0f172a; color: white; text-align: center;">
+    <div style="max-width: 800px; margin: 0 auto;">
+      <h2 style="font-size: 36px; margin-bottom: 16px;">Are Affiliate Networks Stealing Your Commissions?</h2>
+      <p style="font-size: 18px; color: #94a3b8; margin-bottom: 32px; line-height: 1.6;">
+        <strong>WAB Affiliate Intelligence</strong> analyzes your affiliate data and compares it with industry benchmarks to detect commission shaving, cookie stuffing, and payment delays.
+      </p>
+      <div style="background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 24px; text-align: left; max-width: 600px; margin: 0 auto 32px; font-family: 'JetBrains Mono', monospace;">
+        <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 12px; margin-bottom: 12px;">
+          <div>
+            <div style="color: #94a3b8; font-size: 12px; margin-bottom: 4px;">Network</div>
+            <div style="font-weight: 700; font-size: 16px;">ClickBank</div>
+          </div>
+          <div style="text-align: right;">
+            <div style="color: #94a3b8; font-size: 12px; margin-bottom: 4px;">Fraud Risk</div>
+            <div style="font-weight: 700; font-size: 16px; color: #f59e0b;">MEDIUM</div>
+          </div>
+        </div>
+        <div style="color: #cbd5e1; font-size: 14px; margin-bottom: 8px;">⚠️ <strong>Commission Shaving:</strong> 12% of valid sales cancelled</div>
+        <div style="color: #cbd5e1; font-size: 14px;">⚠️ <strong>Payment Delays:</strong> Average 45 days vs industry 30</div>
+      </div>
+      <a href="/register" class="btn btn-primary btn-lg">Analyze Your Networks →</a>
+    </div>
+  </section>
+  <!-- ═══════════ LATEST ADDITIONS ═══════════ -->
+  <section class="section" id="latest-additions" style="background: var(--bg-secondary);">
+    <div class="container">
+      <div class="section-header">
+        <span class="label">Latest Additions</span>
+        <h2>All New Modules, Integrations &amp; Security Layers</h2>
+        <p>Everything added recently is listed here with direct links, so teams and users can immediately open what they need.</p>
+      </div>
+      <div class="grid-3">
+        <div class="card fade-in" style="border-left:3px solid #0ea5e9;">
+          <div class="card-icon cyan">📱</div>
+          <h3>Sovereign Phone Shield</h3>
+          <p>Communication protection stack with behavioral IDS, threat-intel feed, community reporting, and personal vault encryption.</p>
+          <ul style="margin-top:10px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Connection analysis: allow / warn / block</li>
+            <li>Mobile device telemetry endpoints</li>
+            <li>AES-256-GCM personal vault</li>
+          </ul>
+          <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
+            <a href="/phone-shield" class="btn btn-primary btn-sm">Open Shield</a>
+            <a href="/api/sovereign/shield/stats" class="btn btn-secondary btn-sm">Live Stats API</a>
+          </div>
+        </div>
+        <div class="card fade-in fade-in-delay-1" style="border-left:3px solid #6366f1;">
+          <div class="card-icon purple">🚀</div>
+          <h3>One-Click Integrations Hub</h3>
+          <p>Ready deploy packs for Vercel, Netlify, Railway, Cloudflare Workers, Docker, Linux installer, and WordPress MU plugin.</p>
+          <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
+            <a href="/integrations" class="btn btn-primary btn-sm">Open Integrations</a>
+            <a href="https://github.com/abokenan444/web-agent-bridge/tree/master/integrations" target="_blank" rel="noopener" class="btn btn-secondary btn-sm">GitHub Templates</a>
+          </div>
+        </div>
+        <div class="card fade-in fade-in-delay-2" style="border-left:3px solid #10b981;">
+          <div class="card-icon green">🧩</div>
+          <h3>Shared Hosting PHP Bridge</h3>
+          <p>Production-ready PHP bridge for shared hosting environments where Node daemons are not available.</p>
+          <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
+            <a href="https://github.com/abokenan444/web-agent-bridge/tree/master/integrations/shared-hosting" target="_blank" rel="noopener" class="btn btn-primary btn-sm">Shared Hosting Pack</a>
+            <a href="https://github.com/abokenan444/web-agent-bridge/blob/master/integrations/shared-hosting/README.ar.md" target="_blank" rel="noopener" class="btn btn-secondary btn-sm">Arabic Guide</a>
+          </div>
+        </div>
+        <div class="card fade-in" style="border-left:3px solid #f59e0b;">
+          <div class="card-icon orange">🌐</div>
+          <h3>Make Your Site AI-Discoverable in 5 Minutes</h3>
+          <p>One TXT record at <code>_wab.yourdomain.com</code> and any compatible AI agent finds your <code>wab.json</code> automatically — no HTTP probing, no manual integration. Run <code>npx wab init</code> to scaffold everything in seconds, then paste one line into your DNS panel. Live DoH-based verifier included for Cloudflare, cPanel, GoDaddy, Namecheap, Route 53, and more.</p>
+          <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
+            <a href="/dns" class="btn btn-primary btn-sm">Make my site AI-discoverable</a>
+            <a href="/dns#verifier" class="btn btn-secondary btn-sm">Live Verifier</a>
+            <a href="https://github.com/abokenan444/web-agent-bridge/blob/master/DNS-DISCOVERY.md" target="_blank" rel="noopener" class="btn btn-secondary btn-sm">EN Guide</a>
+            <a href="https://github.com/abokenan444/web-agent-bridge/blob/master/DNS-DISCOVERY.ar.md" target="_blank" rel="noopener" class="btn btn-secondary btn-sm">AR Guide</a>
+          </div>
+        </div>
+        <div class="card fade-in fade-in-delay-1" style="border-left:3px solid #06b6d4;">
+          <div class="card-icon cyan">🎮</div>
+          <h3>New Interactive Demo Store</h3>
+          <p>Fully interactive WAB demo at <code>/demo</code> with live product API, agent activity stream, and wab.json discovery.</p>
+          <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
+            <a href="/demo" class="btn btn-primary btn-sm">Open Demo</a>
+            <a href="/demo/.well-known/wab.json" class="btn btn-secondary btn-sm">Demo wab.json</a>
+          </div>
+        </div>
+        <div class="card fade-in fade-in-delay-2" style="border-left:3px solid #ec4899;">
+          <div class="card-icon pink">🔌</div>
+          <h3>API Gateway + 10 Modules</h3>
+          <p>Unified authenticated gateway for protocol discovery, firewall, bounty, price shield, notary, neural analysis, and more.</p>
+          <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
+            <a href="/api" class="btn btn-primary btn-sm">Open API Page</a>
+            <a href="/api/v1/health" class="btn btn-secondary btn-sm">Gateway Health</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ CTA ═══════════ -->
+  <section class="section" style="text-align:center;">
+    <div class="container">
+      <h2 style="margin-bottom:16px;">Ready to Make Your Site <span class="gradient-text">AI-Ready</span>?</h2>
+      <p style="color:var(--text-secondary); max-width:540px; margin:0 auto 32px; font-size:1.1rem;">
+        Join the open-source movement that's bridging the gap between AI agents and the web.
+      </p>
+      <div style="display:flex; gap:16px; justify-content:center; flex-wrap:wrap;">
+        <a href="/register" class="btn btn-primary btn-lg">Create Free Account</a>
+        <a href="https://github.com/abokenan444/web-agent-bridge" class="btn btn-secondary btn-lg" target="_blank" rel="noopener">⭐ Star on GitHub</a>
+        <a href="/docs" class="btn btn-secondary btn-lg">View Documentation</a>
+      </div>
+    </div>
+  </section>
+  <!-- ═══════════ FOOTER ═══════════ -->
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-grid">
+        <div class="footer-brand">
+          <a href="/" class="navbar-brand">
+            <div class="brand-icon">⚡</div>
+            <span>Web Agent Bridge</span>
+          </a>
+          <p>The open AI↔Web protocol & agent platform — standardized commands, sovereign browser, phone shield, DNS discovery, agent mesh, and unified API gateway. Built for the future of intelligent automation.</p>
+        </div>
+        <div class="footer-col">
+          <h4>Product</h4>
+          <ul>
+            <li><a href="#features">Features</a></li>
+            <li><a href="#packages">Framework Packages</a></li>
+            <li><a href="#integrations">Agent Integrations</a></li>
+            <li><a href="#pricing">Pricing</a></li>
+            <li><a href="/docs">Documentation</a></li>
+            <li><a href="/api">API Gateway</a></li>
+            <li><a href="/integrations">Integrations</a></li>
+            <li><a href="/dns">AI Discovery</a></li>
+            <li><a href="/phone-shield">Phone Shield</a></li>
+            <li><a href="/sovereign">Sovereign Dashboard</a></li>
+            <li><a href="/workspace">Agent Workspace</a></li>
+            <li data-wab-auth="signed-in" style="display:none"><a href="/dashboard">Dashboard</a></li>
+          </ul>
+        </div>
+        <div class="footer-col">
+          <h4>Developers</h4>
+          <ul>
+            <li><a href="/docs#quick-start">Quick Start</a></li>
+            <li><a href="/docs#api-reference">API Reference</a></li>
+            <li><a href="/api">API Modules</a></li>
+            <li><a href="#examples">Examples</a></li>
+            <li><a href="https://github.com/abokenan444/web-agent-bridge" target="_blank" rel="noopener">GitHub</a></li>
+          </ul>
+        </div>
+        <div class="footer-col">
+          <h4>Legal</h4>
+          <ul>
+            <li><a href="/privacy">Privacy Policy</a></li>
+            <li><a href="/terms">Terms of Service</a></li>
+            <li><a href="/cookies">Cookie Policy</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="footer-bottom">
+        <span>&copy; 2026 Web Agent Bridge. MIT License. Operated from the Netherlands.</span>
+      </div>
+    </div>
+  </footer>
+  <script src="/js/auth-nav.js?v=3.0.1"></script>
+  <script>
+    const navbar = document.getElementById('navbar');
+    window.addEventListener('scroll', () => {
+      navbar.style.background = window.scrollY > 50
+        ? 'rgba(10, 14, 26, 0.95)'
+        : 'rgba(10, 14, 26, 0.8)';
+    });
+  </script>
+  <script src="/js/cookie-consent.js?v=3.0.1"></script>
+</body>
+</html>