diff --git a/website/public/icons/social-linkedin.svg b/website/public/icons/social-linkedin.svg
new file mode 100644
index 0000000000..e3d7bfb288
--- /dev/null
+++ b/website/public/icons/social-linkedin.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.848 3.37-1.848 3.601 0 4.267 2.37 4.267 5.455v6.284zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z"/>
+</svg>
diff --git a/website/src/components/Button.astro b/website/src/components/Button.astro
index 927e774ba0..a1b5a29126 100644
--- a/website/src/components/Button.astro
+++ b/website/src/components/Button.astro
@@ -5,8 +5,11 @@ interface Props {
   variant?: "primary" | "outline" | "dark" | "ghost";
   size?: "sm" | "md" | "lg";
   href?: string;
+  // Opens the link in a new tab (for destinations that leave the marketing site,
+  // e.g. the docs). No effect when rendered as a <button> (no href).
+  external?: boolean;
 }
-const { variant = "primary", size = "md", href } = Astro.props;
+const { variant = "primary", size = "md", href, external = false } = Astro.props;
 
 const sizes: Record<string, string> = {
   sm: "height:30px;padding:0 12px;",
@@ -26,4 +29,9 @@ const style = `display:inline-flex;align-items:center;justify-content:center;gap
 const Tag = href ? "a" : "button";
 ---
 
-<Tag class="ds-btn" href={href} style={style}><slot /></Tag>
+<Tag
+  class="ds-btn"
+  href={href}
+  target={href && external ? "_blank" : undefined}
+  rel={href && external ? "noopener" : undefined}
+  style={style}><slot /></Tag>
diff --git a/website/src/components/HowItWorks.tsx b/website/src/components/HowItWorks.tsx
index 3ce6beb9bd..c19f14c37a 100644
--- a/website/src/components/HowItWorks.tsx
+++ b/website/src/components/HowItWorks.tsx
@@ -10,7 +10,7 @@ import {
  * HowItWorks — "Do the work in chat. Then automate it."
  * Ported 1:1 from the dark landing DC (hiw* scroll logic + markup).
  *
- * Desktop + motion allowed: a 500vh section with a position:sticky, 100vh inner
+ * Desktop + motion allowed: a tall (SECTION_VH) section with a position:sticky, 100vh inner
  * stage. Scroll progress across the section maps to 6 stages (0..5) of ONE chat
  * thread. Reduced motion OR viewport <=860px: NO sticky scroll — two stacked
  * static panels ("Work in chat" / "Automate"), each showing its slice of the
@@ -24,6 +24,12 @@ import {
 const GEIST = "'Geist',var(--font-sans)";
 const AGENTA_SYMBOL = "/logos/Agenta-symbol-dark-accent.svg";
 
+// Scroll length of the pinned stage. The 6 stages are mapped across
+// (SECTION_VH − 100vh) of scroll, so each beat advances every
+// (SECTION_VH − 100) / 6 vh. Smaller = snappier (less scrolling per beat).
+// Was 500 (~67vh/beat); 320 is ~37vh/beat — tune here if beats fly by / drag.
+const SECTION_VH = 320;
+
 // Stage at which each of the 7 message blocks first appears (dc: revealAt).
 const REVEAL_AT = [0, 1, 2, 3, 4, 5, 5];
 
@@ -208,7 +214,7 @@ function renderBlock(i: number, wrap: CSSProperties): ReactNode {
             }}
           >
             2m ago{" "}·{" "}5.3s{" "}·{" "}28.3K tokens
-            {" "}·{" "}$0.00
+            {" "}·{" "}$0.14
           </span>
         </div>
       );
@@ -360,7 +366,7 @@ function renderBlock(i: number, wrap: CSSProperties): ReactNode {
             }}
           >
             Mon 09:02{" "}·{" "}41s{" "}·{" "}12.1K tokens
-            {" "}·{" "}$0.00
+            {" "}·{" "}$0.06
           </span>
         </div>
       );
@@ -634,6 +640,13 @@ function ChatCard({
   height: string;
   justify: CSSProperties["justifyContent"];
 }) {
+  // Scroll layout only: the thread is bottom-anchored (justify:flex-end) and
+  // grows upward as stages reveal, so it overflows the top. Clip it here and
+  // fade the top edge so messages dissolve into the card instead of being cut
+  // by a hard overflow slice. The static layout (auto height, flex-start) has
+  // no overflow, so it needs no mask.
+  const scrolled = justify === "flex-end";
+  const TOP_FADE = "linear-gradient(to bottom, transparent 0, #000 52px)";
   return (
     <div
       style={{
@@ -660,6 +673,13 @@ function ChatCard({
             gap: 14,
             padding: "20px 24px",
             textAlign: "left",
+            ...(scrolled
+              ? {
+                  overflow: "hidden",
+                  WebkitMaskImage: TOP_FADE,
+                  maskImage: TOP_FADE,
+                }
+              : {}),
           }}
         >
           {blocks}
@@ -788,9 +808,15 @@ export default function HowItWorks() {
   }, []);
 
   // Scroll → stage, only while the sticky-scroll layout is active.
+  // Scroll/resize events fire faster than the display refreshes; we coalesce a
+  // burst into a single rAF so the one layout read (getBoundingClientRect) and
+  // stage check happen at most once per frame. That keeps the main thread free
+  // during fast scrolls instead of forcing a reflow on every raw event.
   useEffect(() => {
     if (!scroll) return;
-    const onScroll = () => {
+    let raf = 0;
+    const measure = () => {
+      raf = 0;
       const el = sectionRef.current;
       if (!el) return;
       const rect = el.getBoundingClientRect();
@@ -799,14 +825,21 @@ export default function HowItWorks() {
       const next = Math.min(5, Math.floor(p * 6));
       setStage((prev) => (prev !== next ? next : prev));
     };
-    const onResize = () => setShortViewport(window.innerHeight < 700);
-    window.addEventListener("scroll", onScroll, { passive: true });
+    const schedule = () => {
+      if (!raf) raf = requestAnimationFrame(measure);
+    };
+    const onResize = () => {
+      setShortViewport(window.innerHeight < 700);
+      schedule();
+    };
+    window.addEventListener("scroll", schedule, { passive: true });
     window.addEventListener("resize", onResize);
-    onScroll();
+    measure();
     onResize();
     return () => {
-      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("scroll", schedule);
       window.removeEventListener("resize", onResize);
+      if (raf) cancelAnimationFrame(raf);
     };
   }, [scroll]);
 
@@ -893,7 +926,10 @@ export default function HowItWorks() {
   const beatActive = [stage <= 2, stage >= 3];
 
   return (
-    <div ref={sectionRef} style={{ height: "500vh", boxSizing: "border-box" }}>
+    <div
+      ref={sectionRef}
+      style={{ height: `${SECTION_VH}vh`, boxSizing: "border-box" }}
+    >
       <div
         style={{
           position: "sticky",
diff --git a/website/src/components/OpenSource.astro b/website/src/components/OpenSource.astro
index 294954784f..8d328aa59c 100644
--- a/website/src/components/OpenSource.astro
+++ b/website/src/components/OpenSource.astro
@@ -80,12 +80,16 @@ const ossStrip = [
           <a
             class="ag-oss-chip"
             href="https://docs.agenta.ai/self-host/quick-start"
+            target="_blank"
+            rel="noopener"
             style="display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,0.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12);font:500 12.5px/1 var(--font-sans);color:rgba(255,255,255,0.75);text-decoration:none;"
             >Docker Compose</a
           >
           <a
             class="ag-oss-chip"
             href="https://docs.agenta.ai/self-host/guides/deploy-to-kubernetes"
+            target="_blank"
+            rel="noopener"
             style="display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,0.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12);font:500 12.5px/1 var(--font-sans);color:rgba(255,255,255,0.75);text-decoration:none;"
             >Helm charts</a
           >
diff --git a/website/src/components/SiteFooter.astro b/website/src/components/SiteFooter.astro
index 8e1b9a34d0..207a26e3d4 100644
--- a/website/src/components/SiteFooter.astro
+++ b/website/src/components/SiteFooter.astro
@@ -4,12 +4,15 @@
 // internal routes point at their intended path (some 404 until those pages ship).
 const blurb = "Fast-tracking LLM apps to production.";
 
+// icon files: social-1 = X, social-2 = Slack, social-3 = GitHub,
+// social-linkedin = LinkedIn. (social-4/social-5 are an OpenAI mark and a play
+// glyph — not ours to show here, so they're left unreferenced.)
 const socials = [
   { platform: "x", url: "https://x.com/agenta_ai", icon: "/icons/social-1.svg" },
   {
     platform: "linkedin",
     url: "https://www.linkedin.com/company/agenta-ai",
-    icon: "/icons/social-2.svg",
+    icon: "/icons/social-linkedin.svg",
   },
   {
     platform: "github",
@@ -19,7 +22,7 @@ const socials = [
   {
     platform: "slack",
     url: "https://join.slack.com/t/agenta-hq/shared_invite/zt-37pnbp5s6-mbBrPL863d_oLB61GSNFjw",
-    icon: "/icons/social-4.svg",
+    icon: "/icons/social-2.svg",
   },
 ];
 
@@ -37,12 +40,12 @@ const columns: { heading: string; links: Link[] }[] = [
   },
   {
     heading: "Resources",
-    // Tutorial is hidden for now (Mahmoud). Changelog + Roadmap point at the same
-    // docs pages the live agenta.ai site links to and navigate same-tab.
+    // Tutorial is hidden for now (Mahmoud). Docs/Changelog/Roadmap point at the
+    // docs site, so they open in a new tab (external) like the live agenta.ai.
     links: [
       { label: "Docs", href: "https://docs.agenta.ai/", external: true },
-      { label: "Changelog", href: "https://agenta.ai/docs/changelog/main" },
-      { label: "Roadmap", href: "https://agenta.ai/docs/roadmap" },
+      { label: "Changelog", href: "https://agenta.ai/docs/changelog/main", external: true },
+      { label: "Roadmap", href: "https://agenta.ai/docs/roadmap", external: true },
       { label: "Blog", href: "/blog" },
       { label: "Status", href: "https://status.agenta.ai", external: true },
     ],
diff --git a/website/src/components/SiteNav.astro b/website/src/components/SiteNav.astro
index 2ed6980096..0d41362cf8 100644
--- a/website/src/components/SiteNav.astro
+++ b/website/src/components/SiteNav.astro
@@ -11,10 +11,12 @@ const { sticky = false } = Astro.props;
 const BOOK_DEMO = "https://cal.com/mahmoud-mabrouk-ogzgey/demo?duration=30";
 const GET_STARTED = "https://cloud.agenta.ai/";
 
-// Top-level links that navigate directly.
-const links = [
+// Top-level links. First-party pages navigate same-tab; links that leave the
+// marketing site (Docs) open in a new tab via `external`.
+type NavLink = { label: string; href: string; external?: boolean };
+const links: NavLink[] = [
   { label: "Pricing", href: "/pricing" },
-  { label: "Docs", href: "https://docs.agenta.ai/" },
+  { label: "Docs", href: "https://docs.agenta.ai/", external: true },
   { label: "Blog", href: "/blog" },
 ];
 
@@ -30,9 +32,9 @@ const icoX = `<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke
 const icoLinkedin = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg>`;
 
 // Dropdown menus (open on hover / keyboard focus). Resources + Community mirror
-// live agenta.ai. Changelog/Roadmap point at the same docs pages the live site
-// links to and navigate same-tab (like Docs). Tutorial is hidden for now — flip
-// SHOW_TUTORIAL to bring it back with the item intact.
+// live agenta.ai. Changelog/Roadmap/Tutorial point at the docs site, so they
+// open in a new tab (external) to keep the marketing site open behind them.
+// Tutorial is hidden for now — flip SHOW_TUTORIAL to bring it back intact.
 const SHOW_TUTORIAL = false;
 type Item = { label: string; desc: string; href: string; icon: string; external?: boolean };
 const dropdowns: { label: string; items: Item[] }[] = [
@@ -40,10 +42,10 @@ const dropdowns: { label: string; items: Item[] }[] = [
     label: "Resources",
     items: [
       ...(SHOW_TUTORIAL
-        ? [{ label: "Tutorial", desc: "Get started with Agenta", href: "https://agenta.ai/docs/tutorials/cookbooks/capture-user-feedback", icon: icoHelp }]
+        ? [{ label: "Tutorial", desc: "Get started with Agenta", href: "https://agenta.ai/docs/tutorials/cookbooks/capture-user-feedback", icon: icoHelp, external: true }]
         : []),
-      { label: "Changelog", desc: "See our latest releases", href: "https://agenta.ai/docs/changelog/main", icon: icoHistory },
-      { label: "Roadmap", desc: "See what's coming next", href: "https://agenta.ai/docs/roadmap", icon: icoRoute },
+      { label: "Changelog", desc: "See our latest releases", href: "https://agenta.ai/docs/changelog/main", icon: icoHistory, external: true },
+      { label: "Roadmap", desc: "See what's coming next", href: "https://agenta.ai/docs/roadmap", icon: icoRoute, external: true },
     ],
   },
   {
@@ -114,7 +116,13 @@ const triggerStyle = linkStyle + "border:none;background:transparent;";
   <div class="ag-navlinks">
     {
       links.map((l) => (
-        <a class="ag-navlink" href={l.href} style={linkStyle}>
+        <a
+          class="ag-navlink"
+          href={l.href}
+          target={l.external ? "_blank" : undefined}
+          rel={l.external ? "noopener" : undefined}
+          style={linkStyle}
+        >
           {l.label}
         </a>
       ))
@@ -164,6 +172,8 @@ const triggerStyle = linkStyle + "border:none;background:transparent;";
     links.map((l) => (
       <a
         href={l.href}
+        target={l.external ? "_blank" : undefined}
+        rel={l.external ? "noopener" : undefined}
         style="display:flex;align-items:center;height:42px;padding:0 12px;border-radius:8px;font:var(--text-body-md);color:rgba(255,255,255,0.78);cursor:pointer;text-decoration:none;"
       >
         {l.label}
@@ -215,6 +225,14 @@ const triggerStyle = linkStyle + "border:none;background:transparent;";
     toggle.setAttribute("aria-expanded", open ? "true" : "false");
   });
 
+  // Nav-pill: landing only. Toggles `.nav-scrolled` on <html> past 24px so the
+  // sticky bar floats into the glass pill (styles in global.css). Wired ONLY when
+  // a `nav[data-pill]` is present — inner pages render a static bar with no pill,
+  // so nothing runs and `.nav-scrolled` never toggles.
+  // Driven by a passive scroll listener (not an always-on rAF loop), so it does
+  // no work while the page is idle; each scroll burst coalesces into one read per
+  // frame via rAF, with the state check gated on an actual crossing of the 24px
+  // threshold to avoid redundant classList writes.
   // Hover/focus dropdowns open purely via CSS (:hover / :focus-within on
   // .ag-navdd). The trigger's aria-expanded must track that open state for AT,
   // so mirror the same two conditions onto it here. Semantic only — no visual
@@ -241,14 +259,19 @@ const triggerStyle = linkStyle + "border:none;background:transparent;";
   const root = document.documentElement;
   if (document.querySelector("nav[data-pill]") && !(window as any).__agNavPill) {
     (window as any).__agNavPill = true;
-    const tick = () => {
-      const y = window.scrollY || root.scrollTop || 0;
-      const on = y > 24;
+    let raf = 0;
+    const measure = () => {
+      raf = 0;
+      const on = (window.scrollY || root.scrollTop || 0) > 24;
       if (on !== root.classList.contains("nav-scrolled")) {
         root.classList.toggle("nav-scrolled", on);
       }
-      requestAnimationFrame(tick);
     };
-    requestAnimationFrame(tick);
+    const schedule = () => {
+      if (!raf) raf = requestAnimationFrame(measure);
+    };
+    window.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule, { passive: true });
+    measure();
   }
 </script>
diff --git a/website/src/pages/404.astro b/website/src/pages/404.astro
index a0f24cd193..cbae4b7f13 100644
--- a/website/src/pages/404.astro
+++ b/website/src/pages/404.astro
@@ -49,7 +49,7 @@ const sectionBorder = "border:1px solid rgba(255,255,255,0.07);margin-top:-1px;"
       >
         <Button href="/" variant="primary" size="lg">Back to home</Button>
         <Button href="/blog" variant="outline" size="lg">Read the blog</Button>
-        <Button href="https://agenta.ai/docs" variant="dark" size="lg"
+        <Button href="https://agenta.ai/docs" variant="dark" size="lg" external
           >Browse the docs</Button
         >
       </div>
diff --git a/website/src/styles/tokens.css b/website/src/styles/tokens.css
index 3c87c42ea5..50a81815f6 100644
--- a/website/src/styles/tokens.css
+++ b/website/src/styles/tokens.css
@@ -195,10 +195,11 @@
   --section-pad-y-dark: 128px;
 
   /* ── nav pill geometry (scrolled state) ───────────────────────
-     Matched to live agenta.ai: the bar keeps its full 68px height, floats
-     24px below the viewport, and rounds to 16px. Consumed by the
-     nav-scrolled rules in global.css. */
-  --nav-pill-inset: 24px;
+     The bar keeps its full 68px height, floats just below the viewport, and
+     rounds to 16px. Consumed by the nav-scrolled rules in global.css. The
+     inset is intentionally tighter than agenta.ai's 24px so the floating pill
+     reclaims top space instead of eating into the viewport. */
+  --nav-pill-inset: 12px;
   --nav-pill-radius: 16px;
   --nav-pill-max: 1256px;
   --nav-pad-x: 32px;