diff --git a/app/globals.css b/app/globals.css
index 44371d21..e2362483 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,6 +1,10 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+/* Explicit source roots for Tailwind v4. Auto-detection misses files when
+   Turbopack's workspace root is ambiguous (e.g. shell cwd differs from the
+   web project root), so we pin the scan paths here. */
+@source "../components/**/*.{ts,tsx}";
+@source "../app/**/*.{ts,tsx}";
 
 :root {
   --surface-0: #09090b;
@@ -17,11 +21,11 @@
   --code-border: #27272a;
 }
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
+/* Note: no `* { margin: 0; padding: 0; box-sizing: border-box; }` here.
+   Tailwind v4's Preflight (included by `@import "tailwindcss"`) already
+   resets margins on block elements and sets border-box globally. An
+   unlayered `*` selector would beat Tailwind's `@layer utilities` and
+   silently break every margin utility (mb-*, mt-*, mx-*, etc.). */
 
 html {
   font-size: 16px;
@@ -37,14 +41,19 @@ body {
   overflow-x: hidden;
 }
 
-a {
-  color: var(--brand);
-  text-decoration: none;
-  transition: color 150ms cubic-bezier(0.16, 1, 0.3, 1);
-}
+/* Default link color. Wrapped in @layer base so Tailwind utilities
+   (text-white, text-zinc-*, etc.) in @layer utilities still win. An
+   unlayered `a { color: ... }` would silently override utilities. */
+@layer base {
+  a {
+    color: var(--brand);
+    text-decoration: none;
+    transition: color 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
 
-a:hover {
-  color: var(--text-primary);
+  a:hover {
+    color: var(--text-primary);
+  }
 }
 
 code {
diff --git a/components/Hero.tsx b/components/Hero.tsx
index d5281e3f..039f091c 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -1,16 +1,65 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+// Rotating taglines — Slot 3 above the hero sub (ELF-457, brief ELF-456).
+// Order matters: index 0 is the default and the initial server-rendered string.
+const TAGLINES = [
+  "Inspect any request. Mock any response.",
+  "Your HTTP bin, on your machine.",
+  "Send. Capture. Mock. No signup.",
+] as const;
+
+// Per-tagline dwell. 3.5s gives ~2.8s solid visibility after the 700ms crossfade.
+const ROTATE_MS = 3500;
+
 export default function Hero() {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    // Respect prefers-reduced-motion at the JS layer too: don't start a timer
+    // for users who opt out. The fade is independently suppressed via the
+    // motion-reduce: variant on the <p> class below.
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const id = window.setInterval(() => {
+      setIndex((i) => (i + 1) % TAGLINES.length);
+    }, ROTATE_MS);
+    return () => window.clearInterval(id);
+  }, []);
+
   return (
     <section className="pt-32 pb-20 px-6">
       <div className="max-w-4xl mx-auto text-center">
         <div className="inline-block mb-6 px-5 py-2 rounded-full bg-blue-500/10 border border-blue-500/30 text-blue-400 text-sm font-medium">
           Open source · MIT licensed
         </div>
-        
+
         <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mb-6 leading-tight bg-gradient-to-r from-white to-zinc-400 bg-clip-text text-transparent">
           Self-hostable HTTP request<br />
           inspector&nbsp;+&nbsp;mocker
         </h1>
-        
+
+        {/* Slot 3: rotating tagline. Fixed-height container prevents CLS; subtle
+            opacity crossfade so it doesn't compete with the terminal CTA below.
+            a11y: aria-live polite + aria-hidden on inactive items. */}
+        <div
+          className="relative h-7 md:h-8 mb-6 mx-auto max-w-2xl"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          {TAGLINES.map((t, i) => (
+            <p
+              key={t}
+              aria-hidden={i !== index}
+              className={`absolute inset-0 font-mono text-sm md:text-lg font-semibold text-zinc-300 leading-7 md:leading-8 transition-opacity duration-700 ease-out motion-reduce:transition-none ${
+                i === index ? "opacity-100" : "opacity-0"
+              }`}
+            >
+              {t}
+            </p>
+          ))}
+        </div>
+
         <p className="text-lg md:text-xl text-zinc-400 mb-10 max-w-2xl mx-auto leading-relaxed">
           One Go binary. SQLite under the hood.
           <code className="mx-1 px-2 py-0.5 bg-zinc-800 border border-zinc-700 rounded text-fuchsia-400 text-base">
diff --git a/next.config.ts b/next.config.ts
index 1f6f6ced..519c8e35 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,9 +1,17 @@
 import type { NextConfig } from "next";
+import path from "node:path";
 
 const nextConfig: NextConfig = {
   images: {
     unoptimized: true,
   },
+  // Pin the Turbopack workspace root to this directory. Without this, Turbopack
+  // infers it from the shell's cwd, which during Paperclip agent runs is the
+  // paperclip project root — that misroutes CSS/source scanning and silently
+  // strips Tailwind utility classes from the production bundle.
+  turbopack: {
+    root: path.resolve(import.meta.dirname),
+  },
 };
 
 export default nextConfig;