diff --git a/site/index.html b/site/index.html
index ff730b2a..c4b58b2c 100644
--- a/site/index.html
+++ b/site/index.html
@@ -67,6 +67,13 @@
                 <h1 data-animate="fade-up" data-delay="80">
                     Self-hostable HTTP request<br>inspector&nbsp;+&nbsp;mocker
                 </h1>
+                <!-- Slot 3 rotating tagline (ELF-457, brief ELF-456). Default #1 is in the
+                     initial HTML for no-JS / SEO. JS in main.js cycles opacity every 3.5s. -->
+                <div class="hero-tagline" aria-live="polite" aria-atomic="true">
+                    <p class="hero-tagline-item is-active">Inspect any request. Mock any response.</p>
+                    <p class="hero-tagline-item" aria-hidden="true">Your HTTP bin, on your machine.</p>
+                    <p class="hero-tagline-item" aria-hidden="true">Send. Capture. Mock. No signup.</p>
+                </div>
                 <p class="hero-sub" data-animate="fade-up" data-delay="160">
                     One Go binary. SQLite under the hood.<br>
                     <code>docker compose up</code>, and you have an inspection endpoint and a live feed in under 30 seconds.
diff --git a/site/main.js b/site/main.js
index e2ad715d..f28f9239 100644
--- a/site/main.js
+++ b/site/main.js
@@ -420,6 +420,32 @@
 
         initEntranceAnimations(animate, stagger);
         initTerminalGlow(animate);
+        initRotatingTagline();
+    }
+
+    // ============================================================
+    // Slot 3 rotating tagline (ELF-457)
+    // Cycles 3 tagline <p>s every 3.5s with a 700ms opacity crossfade
+    // (handled in CSS via .hero-tagline-item transition). Honors
+    // prefers-reduced-motion: skips the timer entirely so the default
+    // #1 stays visible without any animation.
+    // ============================================================
+
+    function initRotatingTagline() {
+        var container = document.querySelector('.hero-tagline');
+        if (!container) return;
+        var items = container.querySelectorAll('.hero-tagline-item');
+        if (items.length < 2) return;
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+        var idx = 0;
+        window.setInterval(function () {
+            items[idx].classList.remove('is-active');
+            items[idx].setAttribute('aria-hidden', 'true');
+            idx = (idx + 1) % items.length;
+            items[idx].classList.add('is-active');
+            items[idx].removeAttribute('aria-hidden');
+        }, 3500);
     }
 
     // Defer boot by one frame so anime.js engine is ready
diff --git a/site/style.css b/site/style.css
index 464320e1..130f98c7 100644
--- a/site/style.css
+++ b/site/style.css
@@ -363,6 +363,43 @@ nav {
     color: var(--text-primary);
 }
 
+/* Slot 3: rotating tagline (ELF-457). Sits between H1 and hero-sub.
+   Fixed height prevents CLS during rotation; absolute children crossfade. */
+.hero-tagline {
+    position: relative;
+    max-width: 560px;
+    height: 1.7em;
+    margin: 0 auto var(--sp-6);
+    overflow: hidden;
+    font-family: var(--font-mono);
+    font-size: clamp(0.85rem, 2.2vw, 1rem);
+    font-weight: 500;
+    line-height: 1.7;
+    color: var(--text-secondary);
+    text-align: center;
+}
+
+.hero-tagline-item {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    opacity: 0;
+    transition: opacity 700ms var(--ease-out);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.hero-tagline-item.is-active {
+    opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .hero-tagline-item {
+        transition: none;
+    }
+}
+
 .hero-sub {
     font-size: clamp(1rem, 2vw, 1.2rem);
     color: var(--text-secondary);