diff --git a/landing/index.html b/landing/index.html
index 53557ea..57eb5b5 100644
--- a/landing/index.html
+++ b/landing/index.html
@@ -9,6 +9,40 @@
       content="A DevTools panel that turns noisy network traffic into a compact, secret-free TOON digest. Small enough to paste into an LLM, complete enough to debug with."
     />
     <link rel="icon" href="./icon.svg" />
+    <link rel="apple-touch-icon" href="./icon/128.png" />
+    <link rel="canonical" href="https://djdevpro.github.io/net-digest/" />
+    <meta name="theme-color" content="#0a101c" />
+    <meta name="author" content="Youcef Djidjelli" />
+
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="NetDigest" />
+    <meta property="og:title" content="NetDigest · Network → tokens" />
+    <meta property="og:description" content="Turn DevTools network traffic into a compact, secret-free TOON digest your LLM can actually read. 7x smaller than a HAR, with recorded user flow and real initiators." />
+    <meta property="og:url" content="https://djdevpro.github.io/net-digest/" />
+    <meta property="og:image" content="https://djdevpro.github.io/net-digest/og.jpg" />
+    <meta property="og:image:width" content="2560" />
+    <meta property="og:image:height" content="1380" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="NetDigest · Network → tokens" />
+    <meta name="twitter:description" content="Turn DevTools network traffic into a compact, secret-free TOON digest your LLM can actually read. 7x smaller than a HAR, with recorded user flow and real initiators." />
+    <meta name="twitter:image" content="https://djdevpro.github.io/net-digest/og.jpg" />
+
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "SoftwareApplication",
+      "name": "NetDigest",
+      "applicationCategory": "DeveloperApplication",
+      "operatingSystem": "Chrome",
+      "description": "Turn DevTools network traffic into a compact, secret-free TOON digest your LLM can actually read. 7x smaller than a HAR, with recorded user flow and real initiators.",
+      "url": "https://djdevpro.github.io/net-digest/",
+      "image": "https://djdevpro.github.io/net-digest/og.jpg",
+      "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
+      "license": "https://github.com/djdevpro/net-digest/blob/main/LICENSE",
+      "author": { "@type": "Person", "name": "Youcef Djidjelli", "url": "https://djidjelli.fr" },
+      "codeRepository": "https://github.com/djdevpro/net-digest"
+    }
+    </script>
     <style>
       :root {
         --bg: #0a101c;
@@ -41,6 +75,16 @@
         min-height: 100vh;
       }
 
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        white-space: nowrap;
+      }
+
       .wrap {
         max-width: 1160px;
         margin: 0 auto;
@@ -235,11 +279,43 @@
 
       /* ---- Features ---- */
 
-      .features {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
+      .features-zone {
+        padding: 64px 0 10px;
+      }
+
+      .carousel {
+        overflow: hidden;
+        mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
+        -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
+      }
+
+      .track {
+        display: flex;
         gap: 14px;
-        padding: 56px 0 8px;
+        width: max-content;
+        animation: marquee 42s linear infinite;
+      }
+
+      .carousel:hover .track {
+        animation-play-state: paused;
+      }
+
+      @keyframes marquee {
+        to {
+          transform: translateX(calc(-50% - 7px));
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .track {
+          animation: none;
+          flex-wrap: wrap;
+          width: auto;
+        }
+
+        .track .card[aria-hidden] {
+          display: none;
+        }
       }
 
       @property --spin {
@@ -250,6 +326,8 @@
 
       .card {
         position: relative;
+        width: 312px;
+        flex: none;
         padding: 1px;
         border-radius: 14px;
         background: rgba(138, 184, 232, 0.1);
@@ -279,11 +357,11 @@
         }
       }
 
-      .card:nth-child(2)::before { animation-duration: 9s; animation-delay: -3.2s; }
-      .card:nth-child(3)::before { animation-duration: 8s; animation-delay: -5.1s; }
-      .card:nth-child(4)::before { animation-duration: 10s; animation-delay: -1.6s; }
-      .card:nth-child(5)::before { animation-duration: 8.5s; animation-delay: -6.4s; }
-      .card:nth-child(6)::before { animation-duration: 9.5s; animation-delay: -2.4s; }
+      .card:nth-child(6n + 2)::before { animation-duration: 9s; animation-delay: -3.2s; }
+      .card:nth-child(6n + 3)::before { animation-duration: 8s; animation-delay: -5.1s; }
+      .card:nth-child(6n + 4)::before { animation-duration: 10s; animation-delay: -1.6s; }
+      .card:nth-child(6n + 5)::before { animation-duration: 8.5s; animation-delay: -6.4s; }
+      .card:nth-child(6n)::before { animation-duration: 9.5s; animation-delay: -2.4s; }
 
       .card:hover {
         transform: translateY(-4px);
@@ -336,7 +414,7 @@
         gap: 26px;
         justify-content: center;
         flex-wrap: wrap;
-        padding: 44px 0 26px;
+        padding: 52px 0 36px;
         color: var(--muted);
         font-size: 15px;
       }
@@ -363,7 +441,7 @@
         text-align: center;
         color: var(--faint);
         font-size: 13.5px;
-        padding: 84px 0 72px;
+        padding: 96px 0 128px;
         display: grid;
         gap: 10px;
       }
@@ -417,7 +495,8 @@ <h1>NetDigest</h1>
       </div>
     </header>
 
-    <section class="frame-zone wrap">
+    <section class="frame-zone wrap" aria-labelledby="demo-h">
+      <h2 id="demo-h" class="sr-only">Live demo of the NetDigest DevTools panel</h2>
       <div class="frame">
         <div class="frame-inner">
           <div class="titlebar">
@@ -432,8 +511,11 @@ <h1>NetDigest</h1>
       </p>
     </section>
 
-    <section class="features wrap">
-      <div class="card"><div class="card-inner">
+    <section class="features-zone wrap" aria-labelledby="features-h">
+      <h2 id="features-h" class="sr-only">Features: dedup, redaction, token budget, flow recorder, API map, initiators</h2>
+      <div class="carousel">
+        <div class="track">
+          <div class="card"><div class="card-inner">
         <h3><span class="tag">×12</span> Dedup &amp; diff</h3>
         <p>Identical calls collapse into a single entry, and after the first array item you only see what changed. You pay for the shape once.</p>
       </div></div>
@@ -457,9 +539,36 @@ <h3><span class="tag">{ }</span> API map</h3>
         <h3><span class="tag">src/</span> Initiators</h3>
         <p>Source maps trace every call back to the hook that fired it: <code>useArticles.useQuery</code> instead of a hashed chunk.</p>
       </div></div>
+          <div class="card" aria-hidden="true"><div class="card-inner">
+        <h3><span class="tag">×12</span> Dedup &amp; diff</h3>
+        <p>Identical calls collapse into a single entry, and after the first array item you only see what changed. You pay for the shape once.</p>
+      </div></div>
+      <div class="card" aria-hidden="true"><div class="card-inner">
+        <h3><span class="tag">***</span> Secrets redacted</h3>
+        <p>Passwords, tokens, API keys and anything that looks like a JWT get stripped the moment they are captured. Auth headers never even reach memory.</p>
+      </div></div>
+      <div class="card" aria-hidden="true"><div class="card-inner">
+        <h3><span class="tag">S·M·L</span> Budget control</h3>
+        <p>Three detail levels, a live token counter, and per-endpoint overrides for the one response that deserves more room.</p>
+      </div></div>
+      <div class="card" aria-hidden="true"><div class="card-inner">
+        <h3><span class="tag">⚑ REC</span> Flow recorder</h3>
+        <p>Clicks, form submits and SPA navigations become timeline steps, so the model knows what triggered every request.</p>
+      </div></div>
+      <div class="card" aria-hidden="true"><div class="card-inner">
+        <h3><span class="tag">{ }</span> API map</h3>
+        <p>One click condenses the whole session into a normalized endpoint contract: methods, statuses, query keys, example shapes.</p>
+      </div></div>
+      <div class="card" aria-hidden="true"><div class="card-inner">
+        <h3><span class="tag">src/</span> Initiators</h3>
+        <p>Source maps trace every call back to the hook that fired it: <code>useArticles.useQuery</code> instead of a hashed chunk.</p>
+      </div></div>
+        </div>
+      </div>
     </section>
 
-    <section class="steps wrap">
+    <section class="steps wrap" aria-labelledby="steps-h">
+      <h2 id="steps-h" class="sr-only">How to use NetDigest in three steps</h2>
       <span><span class="n">1</span><b>Install</b> the extension</span>
       <span><span class="n">2</span>Open DevTools → <b>NetDigest</b> tab</span>
       <span><span class="n">3</span><b>Copy TOON</b> into your LLM</span>
diff --git a/scripts/build-landing.mjs b/scripts/build-landing.mjs
index 2dc0c94..9c2c69a 100644
--- a/scripts/build-landing.mjs
+++ b/scripts/build-landing.mjs
@@ -21,13 +21,27 @@ for (const dir of ['chunks', 'assets']) {
 // demo.html = the real panel page, with root-relative URLs made relative
 // (GitHub Pages serves under /net-digest/) and the demo bridge injected
 // BEFORE the panel module script (classic script in <head> runs first).
+// noindex: search engines should rank the landing, not the bare app frame.
 let html = readFileSync(`${SRC}/devtools-panel.html`, 'utf8');
 html = html.replaceAll('"/chunks/', '"./chunks/').replaceAll('"/assets/', '"./assets/');
-html = html.replace('</head>', '  <script src="./demo-bridge.js"></script>\n</head>');
+html = html.replace(
+  '</head>',
+  '  <meta name="robots" content="noindex" />\n  <script src="./demo-bridge.js"></script>\n</head>',
+);
 writeFileSync(`${OUT}/app/demo.html`, html);
 
 cpSync('landing/demo-bridge.js', `${OUT}/app/demo-bridge.js`);
 cpSync('landing/index.html', `${OUT}/index.html`);
 cpSync('public/icon.svg', `${OUT}/icon.svg`);
+cpSync('public/icon', `${OUT}/icon`, { recursive: true });
+cpSync('.github/assets/hero.jpg', `${OUT}/og.jpg`); // social sharing image
+
+// crawler plumbing
+const BASE = 'https://djdevpro.github.io/net-digest/';
+writeFileSync(`${OUT}/robots.txt`, `User-agent: *\nAllow: /\nDisallow: /app/\nSitemap: ${BASE}sitemap.xml\n`);
+writeFileSync(
+  `${OUT}/sitemap.xml`,
+  `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n  <url><loc>${BASE}</loc><changefreq>monthly</changefreq></url>\n</urlset>\n`,
+);
 
 console.log('landing/dist ready — preview with:  npx serve landing/dist');