diff --git a/src/website_profiling/crawl/crawler.py b/src/website_profiling/crawl/crawler.py
index c74d727..1c68926 100644
--- a/src/website_profiling/crawl/crawler.py
+++ b/src/website_profiling/crawl/crawler.py
@@ -302,6 +302,8 @@ def worker(self, url: str) -> dict:
             )
 
         status = result.status
+        is_success = isinstance(status, int) and 200 <= status < 300
+        is_redirect = isinstance(status, int) and 300 <= status < 400
         ct = result.content_type
         text = result.text
         response_time_ms = result.response_time_ms
@@ -371,7 +373,15 @@ def worker(self, url: str) -> dict:
                 if self.store_outlinks:
                     outlink_list.append(link)
                     self.link_edges_accum.append({"from_url": url, **edge})
-                self.frontier.try_enqueue_link(link, url)
+                # Only crawl links discovered on successful (2xx) pages; links
+                # parsed from custom 4xx/5xx error pages should not be followed.
+                if is_success:
+                    self.frontier.try_enqueue_link(link, url)
+
+        # A redirect (3xx) has no crawlable body; enqueue its target so the
+        # destination is fetched and recorded as its own row (per-hop chain).
+        if is_redirect and final_url and final_url.rstrip("/") != url.rstrip("/"):
+            self.frontier.try_enqueue_link(final_url, url)
 
         ext["response_time_ms"] = response_time_ms if response_time_ms is not None else ""
         ext["content_length"] = content_length or 0
diff --git a/src/website_profiling/crawl/fetchers/browser.py b/src/website_profiling/crawl/fetchers/browser.py
index 4d6a7d6..bf2e258 100644
--- a/src/website_profiling/crawl/fetchers/browser.py
+++ b/src/website_profiling/crawl/fetchers/browser.py
@@ -299,6 +299,21 @@ async def _fetch_page(self, page: Any, url: str) -> FetchResult:
                 max_per_page=self.console_max_per_page,
             )
             collector.attach(page)
+
+        # Record main-frame navigation responses in order so that (a) a response
+        # that was received is not lost when goto raises, and (b) we can report
+        # the URL's OWN status (e.g. a 301) instead of the followed destination.
+        nav_responses: list[Any] = []
+
+        def _on_response(resp: Any) -> None:
+            try:
+                req = resp.request
+                if req.is_navigation_request() and resp.frame == page.main_frame:
+                    nav_responses.append(resp)
+            except Exception:
+                pass
+
+        page.on("response", _on_response)
         try:
             try:
                 response = await page.goto(
@@ -312,15 +327,21 @@ async def _fetch_page(self, page: Any, url: str) -> FetchResult:
             if self.extra_wait_ms and response is not None:
                 await asyncio.sleep(self.extra_wait_ms / 1000.0)
         finally:
+            try:
+                page.remove_listener("response", _on_response)
+            except Exception:
+                pass
             if collector is not None:
                 collector.detach(page)
 
         response_time_ms = int((time.perf_counter() - t0) * 1000)
         final_url = page.url or url
-        redirect_chain_length = 1 if final_url.rstrip("/") != url.rstrip("/") else 0
         browser_diagnostics = collector.build() if collector is not None else None
 
-        if response is None:
+        # Prefer the first observed main-frame response: this is the URL's own
+        # response (a 3xx redirect or an error status), not the final hop.
+        own_response = nav_responses[0] if nav_responses else response
+        if own_response is None:
             return FetchResult(
                 status=None,
                 content_type=None,
@@ -329,20 +350,27 @@ async def _fetch_page(self, page: Any, url: str) -> FetchResult:
                 content_length=0,
                 final_url=final_url,
                 headers_dict={},
-                redirect_chain_length=redirect_chain_length,
+                redirect_chain_length=1 if final_url.rstrip("/") != url.rstrip("/") else 0,
                 fetch_method="rendered",
                 browser_diagnostics=browser_diagnostics,
             )
 
-        status = response.status
-        headers = response.headers or {}
+        status = own_response.status
+        redirect_chain_length = sum(
+            1 for r in nav_responses if 300 <= int(getattr(r, "status", 0) or 0) < 400
+        )
+        headers = own_response.headers or {}
         lower_headers = {str(k).lower(): v for k, v in headers.items()}
         ct = lower_headers.get("content-type", "")
         headers_dict = {
             k: (headers.get(k) or lower_headers.get(k.lower(), "")) for k in HEADER_KEYS
         }
 
-        is_html = status == 200 and ("text/html" in ct or "application/xhtml+xml" in ct)
+        is_redirect = 300 <= status < 400
+        # Capture body for 2xx and error (4xx/5xx) HTML pages; skip redirects.
+        is_html = (not is_redirect) and (
+            "text/html" in ct or "application/xhtml+xml" in ct
+        )
         text: Optional[str] = None
         content_length = 0
         if is_html:
diff --git a/src/website_profiling/crawl/fetchers/static.py b/src/website_profiling/crawl/fetchers/static.py
index 37a867a..44d9f57 100644
--- a/src/website_profiling/crawl/fetchers/static.py
+++ b/src/website_profiling/crawl/fetchers/static.py
@@ -5,6 +5,7 @@
 import threading
 import time
 from typing import Callable, Optional
+from urllib.parse import urljoin
 
 import requests
 
@@ -71,16 +72,30 @@ def fetch(self, url: str) -> FetchResult:
         session = self.session
         try:
             t0 = time.perf_counter()
-            resp = session.get(url, timeout=self.timeout, allow_redirects=True)
+            # Do NOT auto-follow redirects: we want to record the URL's own
+            # response (e.g. 301/308) rather than collapsing the chain into the
+            # final 200. The crawler enqueues the Location target so each hop is
+            # crawled and recorded as its own row.
+            resp = session.get(url, timeout=self.timeout, allow_redirects=False)
             response_time_ms = int((time.perf_counter() - t0) * 1000)
             ct = resp.headers.get("Content-Type", "")
-            is_html = resp.status_code == 200 and (
+            location = resp.headers.get("Location") or resp.headers.get("location") or ""
+            # A redirect is a 3xx with a Location header (matches requests' own
+            # definition; excludes 304 Not Modified).
+            is_redirect = resp.status_code in (301, 302, 303, 307, 308) and bool(location)
+            # Capture the body for 2xx and error (4xx/5xx) HTML pages so custom
+            # error pages can be analysed; redirects have no meaningful body.
+            is_html = (not is_redirect) and (
                 "text/html" in ct or "application/xhtml+xml" in ct
             )
             text = resp.text if is_html else None
             content_length = len(resp.content) if resp.content is not None else 0
-            final_url = resp.url or url
-            redirect_chain_length = len(resp.history)
+            if is_redirect:
+                final_url = urljoin(url, location)
+                redirect_chain_length = 1
+            else:
+                final_url = resp.url or url
+                redirect_chain_length = len(resp.history)
             headers_dict = {k: (resp.headers.get(k) or "") for k in HEADER_KEYS}
             return FetchResult(
                 status=resp.status_code,
diff --git a/src/website_profiling/reporting/seo_summary.py b/src/website_profiling/reporting/seo_summary.py
index bd49de9..e930063 100644
--- a/src/website_profiling/reporting/seo_summary.py
+++ b/src/website_profiling/reporting/seo_summary.py
@@ -10,10 +10,29 @@
 META_DESC_LEN_MAX = 160
 THIN_CONTENT_CHARS = 300
 
+
+def _status_text(value: object) -> str:
+    """Normalize a status value to a clean string (e.g. 400.0 -> "400").
+
+    Numeric statuses can arrive as ints, strings, or floats (when pandas coerces
+    a column containing NaN); non-numeric markers like "error"/"blocked_by_robots"
+    pass through unchanged. Keeps status-code matching robust across all of them.
+    """
+    if value is None:
+        return ""
+    try:
+        f = float(value)  # type: ignore[arg-type]
+    except (TypeError, ValueError):
+        return str(value).strip()
+    if f != f:  # NaN
+        return ""
+    return str(int(f))
+
+
 def _compute_summary_seo_issues(df: pd.DataFrame) -> dict:
     """Compute crawl summary, SEO health metrics, issues list, and recommendations from crawl DataFrame."""
     total = len(df)
-    status_str = df["status"].astype(str) if "status" in df.columns else pd.Series(["unknown"] * len(df))
+    status_str = df["status"].map(_status_text) if "status" in df.columns else pd.Series(["unknown"] * len(df))
     count_2xx = int((status_str.str.match(r"2\d{2}").fillna(False)).sum())
     count_3xx = int((status_str.str.match(r"3\d{2}").fillna(False)).sum())
     count_4xx = int((status_str.str.match(r"4\d{2}").fillna(False)).sum())
@@ -76,7 +95,7 @@ def _compute_summary_seo_issues(df: pd.DataFrame) -> dict:
         if pd.isna(u) or not u:
             continue
         u = str(u).strip()
-        st = str(row.get("status", "")).strip()
+        st = _status_text(row.get("status", ""))
         if st.startswith("4") or st.startswith("5") or st in ("error", "blocked_by_robots"):
             issues["broken"].append({"url": u, "status": st})
         elif st.startswith("3"):
diff --git a/tests/reporting/test_reporting_builder_modules.py b/tests/reporting/test_reporting_builder_modules.py
index 9720689..b348e78 100644
--- a/tests/reporting/test_reporting_builder_modules.py
+++ b/tests/reporting/test_reporting_builder_modules.py
@@ -122,6 +122,40 @@ def test_compute_summary_seo_issues() -> None:
     assert out["recommendations"]
 
 
+def test_status_text_normalization() -> None:
+    assert seo_summary._status_text(400) == "400"
+    assert seo_summary._status_text(400.0) == "400"
+    assert seo_summary._status_text("301") == "301"
+    assert seo_summary._status_text("error") == "error"
+    assert seo_summary._status_text(None) == ""
+    assert seo_summary._status_text(float("nan")) == ""
+
+
+def test_compute_summary_classifies_numeric_and_float_statuses() -> None:
+    df = pd.DataFrame(
+        [
+            {"url": "https://example.com/ok", "status": 200.0},
+            {"url": "https://example.com/redir", "status": 301, "final_url": "https://example.com/dest"},
+            {"url": "https://example.com/bad", "status": 400.0},
+            {"url": "https://example.com/boom", "status": 500},
+        ]
+    )
+    out = seo_summary._compute_summary_seo_issues(df)
+    summary = out["summary"]
+    assert summary["count_2xx"] == 1
+    assert summary["count_3xx"] == 1
+    assert summary["count_4xx"] == 1
+    assert summary["count_5xx"] == 1
+
+    broken = {b["url"] for b in out["issues"]["broken"]}
+    assert {"https://example.com/bad", "https://example.com/boom"} <= broken
+
+    redirects = {r["url"]: r for r in out["issues"]["redirects"]}
+    assert "https://example.com/redir" in redirects
+    assert redirects["https://example.com/redir"]["status"] == "301"
+    assert redirects["https://example.com/redir"]["final_url"] == "https://example.com/dest"
+
+
 def test_content_analytics_helpers() -> None:
     df = _crawl_df()
     content = content_analytics._build_content_analytics(df)
diff --git a/tests/test_browser_fetcher_unit.py b/tests/test_browser_fetcher_unit.py
index a1a7538..29032a8 100644
--- a/tests/test_browser_fetcher_unit.py
+++ b/tests/test_browser_fetcher_unit.py
@@ -846,3 +846,180 @@ def test_browser_fetcher_close_when_loop_unavailable(fake_playwright) -> None:
     fetcher._loop = None
     fetcher._closed = False
     fetcher.close()
+
+
+class _NavRequest:
+    def __init__(self, *, is_navigation: bool) -> None:
+        self._is_navigation = is_navigation
+
+    def is_navigation_request(self) -> bool:
+        return self._is_navigation
+
+
+class _NavResponse:
+    def __init__(self, page: "_NavResponsePage", *, status: int, is_navigation: bool) -> None:
+        self.status = status
+        self.headers = {"content-type": "text/html", "Location": "https://example.com/new"}
+        self.request = _NavRequest(is_navigation=is_navigation)
+        self.frame = page.main_frame
+
+
+class _NavResponsePage(_FakePage):
+    def __init__(self) -> None:
+        super().__init__()
+        self.main_frame = object()
+        self.url = "https://example.com/new"
+
+    async def goto(self, _url: str, **_kwargs: Any) -> _FakeResponse:
+        for handler in self._handlers.get("response", []):
+            handler(_NavResponse(self, status=301, is_navigation=True))
+        return _FakeResponse()
+
+
+class _NavResponseContext(_FakeContext):
+    async def new_page(self) -> _NavResponsePage:
+        return _NavResponsePage()
+
+
+class _NavResponseBrowser(_FakeBrowser):
+    async def new_context(self, **_kwargs: Any) -> _NavResponseContext:
+        return _NavResponseContext()
+
+
+class _NavResponseChromium:
+    async def launch(self, **_kwargs: Any) -> _NavResponseBrowser:
+        return _NavResponseBrowser()
+
+
+class _NavResponsePlaywright:
+    chromium = _NavResponseChromium()
+
+    async def stop(self) -> None:
+        return None
+
+
+class _NavResponsePlaywrightContext:
+    async def start(self) -> _NavResponsePlaywright:
+        return _NavResponsePlaywright()
+
+
+def test_browser_fetcher_prefers_recorded_navigation_response(monkeypatch: pytest.MonkeyPatch) -> None:
+    from website_profiling.crawl.fetchers.browser import BrowserFetcher
+
+    fake_api = MagicMock()
+    fake_api.async_playwright = lambda: _NavResponsePlaywrightContext()
+    monkeypatch.setitem(__import__("sys").modules, "playwright", MagicMock(async_api=fake_api))
+    monkeypatch.setitem(__import__("sys").modules, "playwright.async_api", fake_api)
+
+    fetcher = BrowserFetcher(timeout=5, js_concurrency=1, extra_wait_ms=0, block_resources=False)
+    try:
+        result = fetcher.fetch("https://example.com/old")
+        assert result.status == 301
+        assert result.redirect_chain_length == 1
+        assert result.text is None
+    finally:
+        fetcher.close()
+
+
+class _BrokenNavResponse:
+    @property
+    def request(self) -> None:
+        raise RuntimeError("response handler failed")
+
+
+class _BrokenNavResponsePage(_FakePage):
+    async def goto(self, _url: str, **_kwargs: Any) -> _FakeResponse:
+        for handler in self._handlers.get("response", []):
+            handler(_BrokenNavResponse())
+        return _FakeResponse()
+
+
+class _BrokenNavResponseContext(_FakeContext):
+    async def new_page(self) -> _BrokenNavResponsePage:
+        return _BrokenNavResponsePage()
+
+
+class _BrokenNavResponseBrowser(_FakeBrowser):
+    async def new_context(self, **_kwargs: Any) -> _BrokenNavResponseContext:
+        return _BrokenNavResponseContext()
+
+
+class _BrokenNavResponseChromium:
+    async def launch(self, **_kwargs: Any) -> _BrokenNavResponseBrowser:
+        return _BrokenNavResponseBrowser()
+
+
+class _BrokenNavResponsePlaywright:
+    chromium = _BrokenNavResponseChromium()
+
+    async def stop(self) -> None:
+        return None
+
+
+class _BrokenNavResponsePlaywrightContext:
+    async def start(self) -> _BrokenNavResponsePlaywright:
+        return _BrokenNavResponsePlaywright()
+
+
+def test_browser_fetcher_response_handler_swallows_errors(monkeypatch: pytest.MonkeyPatch) -> None:
+    from website_profiling.crawl.fetchers.browser import BrowserFetcher
+
+    fake_api = MagicMock()
+    fake_api.async_playwright = lambda: _BrokenNavResponsePlaywrightContext()
+    monkeypatch.setitem(__import__("sys").modules, "playwright", MagicMock(async_api=fake_api))
+    monkeypatch.setitem(__import__("sys").modules, "playwright.async_api", fake_api)
+
+    fetcher = BrowserFetcher(timeout=5, js_concurrency=1, extra_wait_ms=0, block_resources=False)
+    try:
+        result = fetcher.fetch("https://example.com/")
+        assert result.status == 200
+    finally:
+        fetcher.close()
+
+
+class _RemoveListenerFailPage(_FakePage):
+    def remove_listener(self, event: str, handler: Any) -> None:
+        raise RuntimeError("listener missing")
+
+
+class _RemoveListenerFailContext(_FakeContext):
+    async def new_page(self) -> _RemoveListenerFailPage:
+        return _RemoveListenerFailPage()
+
+
+class _RemoveListenerFailBrowser(_FakeBrowser):
+    async def new_context(self, **_kwargs: Any) -> _RemoveListenerFailContext:
+        return _RemoveListenerFailContext()
+
+
+class _RemoveListenerFailChromium:
+    async def launch(self, **_kwargs: Any) -> _RemoveListenerFailBrowser:
+        return _RemoveListenerFailBrowser()
+
+
+class _RemoveListenerFailPlaywright:
+    chromium = _RemoveListenerFailChromium()
+
+    async def stop(self) -> None:
+        return None
+
+
+class _RemoveListenerFailPlaywrightContext:
+    async def start(self) -> _RemoveListenerFailPlaywright:
+        return _RemoveListenerFailPlaywright()
+
+
+def test_browser_fetcher_remove_listener_failure_swallowed(monkeypatch: pytest.MonkeyPatch) -> None:
+    from website_profiling.crawl.fetchers.browser import BrowserFetcher
+
+    fake_api = MagicMock()
+    fake_api.async_playwright = lambda: _RemoveListenerFailPlaywrightContext()
+    monkeypatch.setitem(__import__("sys").modules, "playwright", MagicMock(async_api=fake_api))
+    monkeypatch.setitem(__import__("sys").modules, "playwright.async_api", fake_api)
+
+    fetcher = BrowserFetcher(timeout=5, js_concurrency=1, extra_wait_ms=0, block_resources=False)
+    try:
+        result = fetcher.fetch("https://example.com/")
+        assert result.status == 200
+    finally:
+        fetcher.close()
diff --git a/tests/test_crawl_fetchers.py b/tests/test_crawl_fetchers.py
index e599809..3545629 100644
--- a/tests/test_crawl_fetchers.py
+++ b/tests/test_crawl_fetchers.py
@@ -40,6 +40,84 @@ def test_static_fetcher_parses_html():
     assert result.browser_diagnostics is None
 
 
+class _FakeResp:
+    def __init__(self, status_code, headers=None, text="", url=""):
+        self.status_code = status_code
+        self.headers = headers or {}
+        self.text = text
+        self.content = text.encode("utf-8")
+        self.url = url
+        self.history = []
+
+    @property
+    def is_redirect(self):
+        return self.status_code in (301, 302, 303, 307, 308) and "Location" in self.headers
+
+    @property
+    def is_permanent_redirect(self):
+        return self.status_code in (301, 308) and "Location" in self.headers
+
+
+class _FakeSession:
+    def __init__(self, resp):
+        self._resp = resp
+        self.headers = {}
+        self.calls = []
+
+    def get(self, url, timeout=None, allow_redirects=True):
+        self.calls.append({"url": url, "allow_redirects": allow_redirects})
+        return self._resp
+
+    def close(self):
+        pass
+
+
+def test_static_fetcher_records_permanent_redirect_without_following():
+    resp = _FakeResp(
+        301,
+        headers={"Location": "https://example.com/new", "Content-Type": "text/html"},
+        text="<html>ignored redirect body</html>",
+        url="https://example.com/old",
+    )
+    session = _FakeSession(resp)
+    fetcher = StaticFetcher(timeout=5, session=session)
+    result = fetcher.fetch("https://example.com/old")
+
+    # The redirect must NOT be followed: status is the real 301, not the dest's 200.
+    assert session.calls[0]["allow_redirects"] is False
+    assert result.status == 301
+    assert result.final_url == "https://example.com/new"
+    assert result.text is None
+    assert result.redirect_chain_length == 1
+
+
+def test_static_fetcher_resolves_relative_redirect_location():
+    resp = _FakeResp(
+        308,
+        headers={"Location": "/moved"},
+        url="https://example.com/old",
+    )
+    fetcher = StaticFetcher(timeout=5, session=_FakeSession(resp))
+    result = fetcher.fetch("https://example.com/old")
+    assert result.status == 308
+    assert result.final_url == "https://example.com/moved"
+
+
+def test_static_fetcher_records_client_error_and_captures_body():
+    resp = _FakeResp(
+        400,
+        headers={"Content-Type": "text/html"},
+        text="<html><head><title>Bad Request</title></head></html>",
+        url="https://example.com/bad",
+    )
+    fetcher = StaticFetcher(timeout=5, session=_FakeSession(resp))
+    result = fetcher.fetch("https://example.com/bad")
+    assert result.status == 400
+    # Non-200 HTML body is now captured so custom error pages can be analysed.
+    assert result.text is not None and "Bad Request" in result.text
+    assert result.redirect_chain_length == 0
+
+
 def test_page_diagnostics_collector_builds_summary():
     from website_profiling.crawl.fetchers.browser import _PageDiagnosticsCollector
 
diff --git a/tests/test_crawler_unit.py b/tests/test_crawler_unit.py
index 06717b3..16f3524 100644
--- a/tests/test_crawler_unit.py
+++ b/tests/test_crawler_unit.py
@@ -743,3 +743,59 @@ def test_worker_custom_extraction_invalid_regex_is_ignored(monkeypatch) -> None:
     out = c.worker("https://site.com/a")
     assert "custom_extract" not in out
 
+
+def test_worker_records_redirect_and_enqueues_target(monkeypatch) -> None:
+    from website_profiling.crawl.crawler import Crawler
+    from website_profiling.crawl.fetchers.base import FetchResult
+
+    monkeypatch.setattr(
+        "website_profiling.crawl.sitemap.discover_sitemap_urls",
+        lambda *_a, **_k: [],
+    )
+    c = Crawler(start_url="https://site.com", ignore_robots=True, use_wappalyzer=False)
+    c.fetch = lambda _url: FetchResult(  # type: ignore[method-assign]
+        status=301,
+        content_type="",
+        text=None,
+        response_time_ms=1,
+        content_length=0,
+        final_url="https://site.com/new",
+        headers_dict={},
+        redirect_chain_length=1,
+        fetch_method="static",
+    )
+    out = c.worker("https://site.com/old")
+    # The redirect is recorded as a 3xx row (not collapsed to the destination).
+    assert str(out["status"]) == "301"
+    assert out["final_url"] == "https://site.com/new"
+    # ...and the redirect target is enqueued so the destination is crawled too.
+    assert c.frontier.queue_contains("https://site.com/new")
+
+
+def test_worker_does_not_enqueue_links_from_error_page(monkeypatch) -> None:
+    from website_profiling.crawl.crawler import Crawler
+    from website_profiling.crawl.fetchers.base import FetchResult
+
+    monkeypatch.setattr(
+        "website_profiling.crawl.sitemap.discover_sitemap_urls",
+        lambda *_a, **_k: [],
+    )
+    c = Crawler(start_url="https://site.com", ignore_robots=True, use_wappalyzer=False)
+    html = '<html><body><a href="https://site.com/error-link">x</a></body></html>'
+    c.fetch = lambda _url: FetchResult(  # type: ignore[method-assign]
+        status=404,
+        content_type="text/html",
+        text=html,
+        response_time_ms=1,
+        content_length=len(html),
+        final_url="https://site.com/bad",
+        headers_dict={},
+        redirect_chain_length=0,
+        fetch_method="static",
+    )
+    out = c.worker("https://site.com/bad")
+    # The 404 is recorded with its real numeric status...
+    assert str(out["status"]) == "404"
+    # ...but links discovered on an error page are NOT followed.
+    assert not c.frontier.queue_contains("https://site.com/error-link")
+
diff --git a/web/app/client-providers.tsx b/web/app/client-providers.tsx
index 83de93f..46d3ec0 100644
--- a/web/app/client-providers.tsx
+++ b/web/app/client-providers.tsx
@@ -7,13 +7,10 @@ import { PipelineProvider } from '@/context/PipelineContext';
 import { SessionProvider } from '@/context/SessionContext';
 import ChatFab from '@/components/chat/ChatFab';
 import PipelineRunnerFab from '@/components/pipeline/PipelineRunnerFab';
+import AppLoadingScreen from '@/components/AppLoadingScreen';
 
 function LoadingFallback() {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-brand-900 text-foreground">
-      <p>Loading…</p>
-    </div>
-  );
+  return <AppLoadingScreen />;
 }
 
 export default function ClientProviders({ children }: { children: ReactNode }): ReactNode {
diff --git a/web/app/globals.css b/web/app/globals.css
index b431661..6f36277 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -654,6 +654,291 @@ select:focus-visible {
   background: color-mix(in srgb, var(--app-bg-muted) 35%, transparent);
 }
 
+/* Horizontal slide deck — one panel visible, no vertical scroll. */
+.landing-deck-viewport {
+  position: relative;
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
+.landing-deck-track {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  will-change: transform;
+  transition: transform 0.45s var(--ease-out);
+}
+
+.landing-deck-track--instant {
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .landing-deck-track {
+    transition: none;
+  }
+}
+
+.landing-deck-slide,
+.landing-section {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 100%;
+  flex: 0 0 100%;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.landing-section-body {
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+}
+
+.landing-section-body-centered {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.landing-section-split {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  align-items: stretch;
+  gap: 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .landing-section-split {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 0;
+  }
+}
+
+.landing-split-copy {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.landing-split-visual {
+  display: flex;
+  min-height: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (min-width: 768px) {
+  .landing-split-visual {
+    height: 100%;
+    padding: 0.75rem 1.5rem 0.75rem 0.75rem;
+  }
+
+  .landing-section-split--reversed .landing-split-visual {
+    padding: 0.75rem 0.75rem 0.75rem 1.5rem;
+  }
+}
+
+.landing-split-mock {
+  height: 100%;
+  max-height: 100%;
+  width: 100%;
+  min-height: 0;
+}
+
+.landing-footer-snap {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  min-width: 100%;
+  overflow: hidden;
+}
+
+/* Landing deck — progress, presenter mode, edge navigation */
+.landing-deck-progress-track {
+  height: 2px;
+  overflow: hidden;
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--app-text-subtle) 25%, transparent);
+}
+
+.landing-deck-progress-fill {
+  height: 100%;
+  width: 100%;
+  transform-origin: left center;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--app-link), var(--accent-2));
+  transition: transform 0.35s var(--ease-out);
+}
+
+.landing-deck-edge-nav {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+}
+
+.landing-deck-edge-btn {
+  pointer-events: auto;
+  position: absolute;
+  top: 50%;
+  display: flex;
+  height: 3rem;
+  width: 3rem;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(-50%);
+  border-radius: 9999px;
+  border: 1px solid color-mix(in srgb, var(--app-border) 70%, transparent);
+  background: color-mix(in srgb, var(--app-bg) 75%, transparent);
+  color: var(--app-text-muted);
+  opacity: 0;
+  backdrop-filter: blur(8px);
+  transition:
+    opacity var(--dur-base) var(--ease-out),
+    color var(--dur-base) var(--ease-out),
+    background var(--dur-base) var(--ease-out);
+}
+
+.landing-deck-viewport:hover .landing-deck-edge-btn:not(:disabled) {
+  opacity: 0.85;
+}
+
+.landing-deck-edge-btn:hover:not(:disabled) {
+  color: var(--app-text);
+  background: color-mix(in srgb, var(--app-bg-muted) 80%, transparent);
+}
+
+.landing-deck-edge-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0;
+}
+
+.landing-deck-edge-btn--prev {
+  left: 0.75rem;
+}
+
+.landing-deck-edge-btn--next {
+  right: 0.75rem;
+}
+
+.landing-deck-controls {
+  pointer-events: none;
+  position: absolute;
+  right: 1rem;
+  bottom: 2.25rem;
+  left: 1rem;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.35rem;
+}
+
+.landing-deck-controls-inner {
+  pointer-events: auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.35rem;
+  border-radius: 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--app-border) 80%, transparent);
+  background: color-mix(in srgb, var(--app-bg) 88%, transparent);
+  padding: 0.35rem;
+  backdrop-filter: blur(12px);
+}
+
+.landing-deck-control-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border-radius: 0.5rem;
+  padding: 0.4rem 0.65rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--app-text-muted);
+  transition:
+    background var(--dur-base) var(--ease-out),
+    color var(--dur-base) var(--ease-out);
+}
+
+.landing-deck-control-btn:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--app-bg-muted) 70%, transparent);
+  color: var(--app-text);
+}
+
+.landing-deck-control-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.landing-deck-control-btn:focus-visible,
+.landing-deck-edge-btn:focus-visible {
+  outline: 2px solid var(--app-link);
+  outline-offset: 2px;
+}
+
+.landing-deck-control-btn--exit {
+  color: var(--app-text);
+}
+
+.landing-deck-control-select {
+  border-radius: 0.5rem;
+  border: 1px solid color-mix(in srgb, var(--app-border) 70%, transparent);
+  background: color-mix(in srgb, var(--app-bg-muted) 50%, transparent);
+  padding: 0.35rem 0.5rem;
+  font-size: 0.75rem;
+  color: var(--app-text-muted);
+}
+
+.landing-deck-shortcuts-hint {
+  pointer-events: none;
+  font-size: 0.65rem;
+  color: var(--app-text-subtle);
+}
+
+.landing-deck-speaker-note {
+  pointer-events: none;
+  max-width: 28rem;
+  text-align: right;
+  font-size: 0.7rem;
+  line-height: 1.35;
+  color: var(--app-text-muted);
+}
+
+.landing-slide-badge {
+  pointer-events: none;
+  position: absolute;
+  top: 0.75rem;
+  right: 1.25rem;
+  z-index: 10;
+  display: none;
+  border-radius: 9999px;
+  border: 1px solid color-mix(in srgb, var(--app-link) 35%, transparent);
+  background: color-mix(in srgb, var(--app-link) 12%, transparent);
+  padding: 0.25rem 0.65rem;
+  font-size: 0.65rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--app-link);
+}
+
+.landing-presenter .landing-slide-badge {
+  display: inline-flex;
+}
+
+.landing-presenter .landing-section {
+  padding-top: 0.75rem;
+  padding-bottom: 2.5rem;
+}
+
 /* ─────────────────────────────────────────────────────────────
    Reusable redesign utilities — depth, motion, warmth
    ───────────────────────────────────────────────────────────── */
@@ -780,4 +1065,28 @@ select:focus-visible {
       transform: translateX(100%);
     }
   }
+
+  .shimmer-text {
+    background: linear-gradient(
+      90deg,
+      var(--app-text-subtle) 0%,
+      var(--app-text-heading) 45%,
+      var(--app-link) 55%,
+      var(--app-text-subtle) 100%
+    );
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: shimmerText 2.2s ease-in-out infinite;
+  }
+  @keyframes shimmerText {
+    0%,
+    100% {
+      background-position: 0% center;
+    }
+    50% {
+      background-position: 100% center;
+    }
+  }
 }
diff --git a/web/app/write/page.tsx b/web/app/write/page.tsx
index 145e65f..f486d93 100644
--- a/web/app/write/page.tsx
+++ b/web/app/write/page.tsx
@@ -1,17 +1,12 @@
 import { Suspense } from 'react';
+import AppLoadingScreen from '@/components/AppLoadingScreen';
 import WriteStudio from '@/views/WriteStudio';
 
 export const dynamic = 'force-dynamic';
 
 export default function WritePage() {
   return (
-    <Suspense
-      fallback={
-        <div className="flex h-dvh items-center justify-center bg-brand-900 text-muted-foreground">
-          Loading…
-        </div>
-      }
-    >
+    <Suspense fallback={<AppLoadingScreen />}>
       <WriteStudio />
     </Suspense>
   );
diff --git a/web/src/components/AppLoadingScreen.tsx b/web/src/components/AppLoadingScreen.tsx
new file mode 100644
index 0000000..6aec3c3
--- /dev/null
+++ b/web/src/components/AppLoadingScreen.tsx
@@ -0,0 +1,45 @@
+import { Skeleton } from '@/components/Skeleton';
+import { strings } from '@/lib/strings';
+
+const app = strings.app;
+
+export default function AppLoadingScreen() {
+  return (
+    <div
+      className="relative flex min-h-screen flex-col items-center justify-center bg-brand-900 text-foreground"
+      role="status"
+      aria-live="polite"
+      aria-busy="true"
+      aria-label={app.loading}
+    >
+      <div aria-hidden className="pointer-events-none absolute inset-0 landing-grid-bg opacity-30" />
+
+      <div className="relative w-full max-w-sm px-6 sm:max-w-md">
+        <p className="landing-gradient-text text-center text-lg font-bold tracking-tight sm:text-xl">
+          {app.productName}
+        </p>
+        <p className="mt-1 text-center text-xs text-muted-foreground">{app.productSubtitle}</p>
+
+        <div
+          aria-hidden
+          className="mt-8 space-y-3 rounded-xl border border-default/60 bg-brand-900/40 p-4 sm:p-5"
+        >
+          <div className="flex items-center justify-between gap-3">
+            <Skeleton className="h-3 w-20" />
+            <Skeleton className="h-7 w-7 rounded-full" />
+          </div>
+          <Skeleton className="h-4 w-[70%]" />
+          <Skeleton className="h-24 w-full rounded-lg" />
+          <div className="grid grid-cols-3 gap-2">
+            <Skeleton className="h-10 rounded-lg" />
+            <Skeleton className="h-10 rounded-lg" />
+            <Skeleton className="h-10 rounded-lg" />
+          </div>
+        </div>
+
+        <p className="shimmer-text mt-8 text-center text-sm font-semibold sm:text-base">{app.loading}</p>
+        <p className="mt-1.5 text-center text-xs text-muted-foreground sm:text-sm">{app.loadingSubtitle}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/LandingShell.tsx b/web/src/components/LandingShell.tsx
index 55119f2..56796f6 100644
--- a/web/src/components/LandingShell.tsx
+++ b/web/src/components/LandingShell.tsx
@@ -1,101 +1,94 @@
 'use client';
 
-import Link from 'next/link';
-import type { ReactNode } from 'react';
-import AppLogo from '@/components/AppLogo';
-import ThemeToggle from '@/components/ThemeToggle';
-import { strings } from '@/lib/strings';
+import { useEffect, useRef, type ReactNode } from 'react';
+import LandingDeckControls from '@/components/landing/LandingDeckControls';
+import {
+  LandingDeckProvider,
+  useLandingDeckRequired,
+} from '@/components/landing/LandingDeckContext';
+import LandingDeckProgress from '@/components/landing/LandingDeckProgress';
+import LandingDeckTrack from '@/components/landing/LandingDeckTrack';
+import { LANDING_SECTION_IDS } from '@/components/landing/landingLayout';
 
 export interface LandingShellProps {
   children: ReactNode;
   footer?: ReactNode;
+  /** Decorative layers rendered behind the slide track (fixed within viewport). */
+  backdrop?: ReactNode;
 }
 
-const NAV_ITEMS = [
-  { href: '#features', labelKey: 'navFeatures' as const },
-  { href: '#quick-start', labelKey: 'navQuickStart' as const },
-  { href: '#google-setup', labelKey: 'navGoogleSetup' as const },
-] as const;
+export default function LandingShell({ children, footer, backdrop }: LandingShellProps) {
+  return (
+    <LandingDeckProvider>
+      <LandingShellInner footer={footer} backdrop={backdrop}>
+        {children}
+      </LandingShellInner>
+    </LandingDeckProvider>
+  );
+}
+
+function LandingShellInner({ children, footer, backdrop }: LandingShellProps) {
+  const viewportRef = useRef<HTMLElement>(null);
+  const { goToSlide, goNext, goPrev, presenterMode } = useLandingDeckRequired();
+
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+
+    const onClick = (event: MouseEvent) => {
+      const anchor = (event.target as Element).closest('a[href^="#"]');
+      if (!(anchor instanceof HTMLAnchorElement)) return;
+      const hash = anchor.getAttribute('href');
+      if (!hash || hash === '#') return;
+      const id = hash.slice(1);
+      event.preventDefault();
+      goToSlide(id);
+    };
+
+    viewport.addEventListener('click', onClick);
+    return () => viewport.removeEventListener('click', onClick);
+  }, [goToSlide]);
+
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
 
-export default function LandingShell({ children, footer }: LandingShellProps) {
-  const vl = strings.views.landing;
-  const app = strings.app;
+    const onWheel = (event: WheelEvent) => {
+      event.preventDefault();
+      if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+      if (event.deltaY > 0) goNext();
+      else goPrev();
+    };
+
+    viewport.addEventListener('wheel', onWheel, { passive: false });
+    return () => viewport.removeEventListener('wheel', onWheel);
+  }, [goNext, goPrev]);
 
   return (
-    <div className="landing-grid-bg h-dvh overflow-y-auto overscroll-y-contain bg-brand-900 text-foreground">
-      <header className="sticky top-0 z-40 border-b border-muted/80 bg-brand-900/90 backdrop-blur-lg backdrop-saturate-150">
-        <div className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-3 px-[var(--spacing-page-x)] sm:px-6 lg:px-8">
-          <Link href="/" className="flex min-w-0 items-center gap-2.5">
-            <AppLogo size={22} />
-            <span className="truncate font-semibold text-foreground">{app.productName}</span>
-          </Link>
-          <nav
-            className="hidden items-center gap-1 rounded-lg border border-default/80 bg-brand-800/40 p-1 md:flex"
-            aria-label="Landing"
-          >
-            {NAV_ITEMS.map(({ href, labelKey }) => (
-              <a
-                key={href}
-                href={href}
-                className="rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-brand-700/60 hover:text-foreground lg:px-3 lg:text-sm"
-              >
-                {vl[labelKey]}
-              </a>
-            ))}
-            <a
-              href={vl.githubRepoUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-brand-700/60 hover:text-foreground lg:px-3 lg:text-sm"
-            >
-              {vl.navGithub}
-            </a>
-          </nav>
-          <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
-            <ThemeToggle />
-            <Link
-              href="/home"
-              className="hidden rounded-lg border border-default px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-brand-800 sm:inline sm:text-sm"
-            >
-              {vl.navOpenApp}
-            </Link>
-            <Link
-              href="/pipeline"
-              className="rounded-lg bg-blue-600 px-2.5 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-500 sm:px-3 sm:text-sm"
-            >
-              {vl.navRunAudit}
-            </Link>
-          </div>
-        </div>
-        <nav
-          className="flex gap-2 overflow-x-auto border-t border-muted/50 px-[var(--spacing-page-x)] py-2 md:hidden"
-          aria-label="Landing mobile"
-        >
-          {NAV_ITEMS.map(({ href, labelKey }) => (
-            <a
-              key={href}
-              href={href}
-              className="shrink-0 rounded-full border border-default bg-brand-800/50 px-3 py-1 text-xs font-medium text-muted-foreground"
-            >
-              {vl[labelKey]}
-            </a>
-          ))}
-          <a
-            href={vl.githubRepoUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="shrink-0 rounded-full border border-default bg-brand-800/50 px-3 py-1 text-xs font-medium text-muted-foreground"
-          >
-            {vl.navGithub}
-          </a>
-        </nav>
-      </header>
+    <div
+      className={`landing-grid-bg flex h-dvh flex-col overflow-hidden bg-brand-900 text-foreground${presenterMode ? ' landing-presenter' : ''}`}
+    >
+      <main ref={viewportRef} className="landing-deck-viewport relative min-h-0 flex-1 overflow-hidden">
+        {backdrop ? (
+          <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden">{backdrop}</div>
+        ) : null}
+
+        <LandingDeckTrack>
+          {children}
 
-      <main>{children}</main>
+          {footer ? (
+            <footer
+              id={LANDING_SECTION_IDS.siteFooter}
+              className="landing-deck-slide landing-footer-snap border-t border-muted/40"
+            >
+              {footer}
+            </footer>
+          ) : null}
+        </LandingDeckTrack>
 
-      {footer ? (
-        <footer className="border-t border-muted bg-brand-800/40">{footer}</footer>
-      ) : null}
+        <LandingDeckControls />
+        <LandingDeckProgress />
+      </main>
     </div>
   );
 }
diff --git a/web/src/components/landing/LandingCodeBlock.tsx b/web/src/components/landing/LandingCodeBlock.tsx
index 8daa0d3..40d3f11 100644
--- a/web/src/components/landing/LandingCodeBlock.tsx
+++ b/web/src/components/landing/LandingCodeBlock.tsx
@@ -9,9 +9,10 @@ const vl = strings.views.landing;
 interface LandingCodeBlockProps {
   label?: string;
   command: string;
+  prominent?: boolean;
 }
 
-export default function LandingCodeBlock({ label, command }: LandingCodeBlockProps) {
+export default function LandingCodeBlock({ label, command, prominent = false }: LandingCodeBlockProps) {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = useCallback(async () => {
@@ -25,24 +26,36 @@ export default function LandingCodeBlock({ label, command }: LandingCodeBlockPro
   }, [command]);
 
   return (
-    <div className="group rounded-xl border border-default bg-brand-900/60 p-4 transition-colors hover:border-blue-500/25">
-      <div className="mb-2 flex items-center justify-between gap-2">
+    <div
+      className={`group border border-default/60 transition-colors hover:border-blue-500/25 ${
+        prominent ? 'rounded-xl p-4 sm:p-5' : 'rounded-lg p-3'
+      }`}
+    >
+      <div className={`flex items-center justify-between gap-2 ${prominent ? 'mb-2' : 'mb-1.5'}`}>
         {label ? (
-          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{label}</p>
+          <p
+            className={`font-medium uppercase tracking-wider text-muted-foreground ${
+              prominent ? 'text-xs sm:text-sm' : 'text-[10px] sm:text-xs'
+            }`}
+          >
+            {label}
+          </p>
         ) : (
           <span />
         )}
         <button
           type="button"
           onClick={() => { void handleCopy(); }}
-          className="inline-flex items-center gap-1 rounded-md border border-default/80 bg-brand-800/60 px-2 py-1 text-[11px] font-medium text-muted-foreground opacity-0 transition-all group-hover:opacity-100 hover:border-blue-500/30 hover:text-foreground focus:opacity-100"
+          className={`inline-flex items-center gap-1 rounded-md border border-default/60 font-medium text-muted-foreground opacity-0 transition-all group-hover:opacity-100 hover:border-blue-500/25 hover:text-foreground focus:opacity-100 ${
+            prominent ? 'px-2.5 py-1.5 text-xs' : 'px-2 py-1 text-[11px]'
+          }`}
         >
           {copied ? <Check className="h-3 w-3 text-emerald-500" aria-hidden /> : <Copy className="h-3 w-3" aria-hidden />}
           {copied ? vl.copyCommandDone : vl.copyCommand}
         </button>
       </div>
-      <pre className="overflow-x-auto font-mono text-sm text-foreground">
-        <code>
+      <pre className={`overflow-hidden font-mono text-foreground ${prominent ? 'text-sm sm:text-base' : 'text-xs sm:text-sm'}`}>
+        <code className={prominent ? 'break-all' : 'line-clamp-3 break-all'}>
           <span className="select-none text-muted-foreground">$ </span>
           {command}
         </code>
diff --git a/web/src/components/landing/LandingDeckContext.tsx b/web/src/components/landing/LandingDeckContext.tsx
new file mode 100644
index 0000000..4a7d8b7
--- /dev/null
+++ b/web/src/components/landing/LandingDeckContext.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { createContext, useContext, type ReactNode } from 'react';
+import { LANDING_DECK_SECTION_ORDER } from '@/components/landing/landingLayout';
+import { useLandingDeck, type UseLandingDeckResult } from '@/hooks/useLandingDeck';
+
+const LandingDeckContext = createContext<UseLandingDeckResult | null>(null);
+
+export interface LandingDeckProviderProps {
+  children: ReactNode;
+}
+
+export function LandingDeckProvider({ children }: LandingDeckProviderProps) {
+  const deck = useLandingDeck({
+    sectionIds: LANDING_DECK_SECTION_ORDER,
+  });
+
+  return <LandingDeckContext.Provider value={deck}>{children}</LandingDeckContext.Provider>;
+}
+
+export function useLandingDeckContext(): UseLandingDeckResult | null {
+  return useContext(LandingDeckContext);
+}
+
+/** Required inside landing deck UI (progress, controls, scroll cues). */
+export function useLandingDeckRequired(): UseLandingDeckResult {
+  const ctx = useContext(LandingDeckContext);
+  if (!ctx) {
+    throw new Error('useLandingDeckRequired must be used within LandingDeckProvider');
+  }
+  return ctx;
+}
diff --git a/web/src/components/landing/LandingDeckControls.tsx b/web/src/components/landing/LandingDeckControls.tsx
new file mode 100644
index 0000000..023e0a3
--- /dev/null
+++ b/web/src/components/landing/LandingDeckControls.tsx
@@ -0,0 +1,155 @@
+'use client';
+
+import {
+  ChevronLeft,
+  ChevronRight,
+  MonitorPlay,
+  Pause,
+  Play,
+  X,
+} from 'lucide-react';
+import { useLandingDeckRequired } from '@/components/landing/LandingDeckContext';
+import {
+  LANDING_DECK_AUTO_ADVANCE_INTERVALS_MS,
+  type LandingDeckAutoAdvanceMs,
+} from '@/components/landing/landingLayout';
+import { strings } from '@/lib/strings';
+
+export default function LandingDeckControls() {
+  const vl = strings.views.landing;
+  const {
+    activeIndex,
+    total,
+    activeId,
+    goNext,
+    goPrev,
+    presenterMode,
+    setPresenterMode,
+    autoAdvance,
+    setAutoAdvance,
+    autoAdvanceMs,
+    setAutoAdvanceMs,
+  } = useLandingDeckRequired();
+
+  const deckNotes = vl.deckNotes as Record<string, string> | undefined;
+  const speakerNote = activeId && deckNotes ? deckNotes[activeId] ?? '' : '';
+
+  const atStart = activeIndex <= 0;
+  const atEnd = activeIndex >= total - 1;
+
+  return (
+    <>
+      {!presenterMode ? (
+        <div className="landing-deck-edge-nav hidden md:block" aria-hidden={false}>
+          <button
+            type="button"
+            className="landing-deck-edge-btn landing-deck-edge-btn--prev"
+            onClick={goPrev}
+            disabled={atStart}
+            aria-label={vl.deckPrev}
+          >
+            <ChevronLeft className="h-6 w-6" aria-hidden />
+          </button>
+          <button
+            type="button"
+            className="landing-deck-edge-btn landing-deck-edge-btn--next"
+            onClick={goNext}
+            disabled={atEnd}
+            aria-label={vl.deckNext}
+          >
+            <ChevronRight className="h-6 w-6" aria-hidden />
+          </button>
+        </div>
+      ) : null}
+
+      {presenterMode ? (
+        <div className="landing-deck-controls">
+          <div className="landing-deck-controls-inner">
+            <button
+              type="button"
+              className="landing-deck-control-btn"
+              onClick={goPrev}
+              disabled={atStart}
+              aria-label={vl.deckPrev}
+            >
+              <ChevronLeft className="h-4 w-4" aria-hidden />
+              <span className="hidden sm:inline">{vl.deckPrev}</span>
+            </button>
+
+            <button
+              type="button"
+              className="landing-deck-control-btn"
+              onClick={() => setAutoAdvance(!autoAdvance)}
+              aria-pressed={autoAdvance}
+              aria-label={autoAdvance ? vl.deckAutoAdvanceOff : vl.deckAutoAdvance}
+            >
+              {autoAdvance ? (
+                <Pause className="h-4 w-4" aria-hidden />
+              ) : (
+                <Play className="h-4 w-4" aria-hidden />
+              )}
+              <span className="hidden sm:inline">
+                {autoAdvance ? vl.deckAutoAdvanceOff : vl.deckAutoAdvance}
+              </span>
+            </button>
+
+            <select
+              className="landing-deck-control-select"
+              value={autoAdvanceMs}
+              onChange={(e) => setAutoAdvanceMs(Number(e.target.value) as LandingDeckAutoAdvanceMs)}
+              aria-label={vl.deckAutoAdvance}
+            >
+              {LANDING_DECK_AUTO_ADVANCE_INTERVALS_MS.map((ms) => (
+                <option key={ms} value={ms}>
+                  {ms / 1000}s
+                </option>
+              ))}
+            </select>
+
+            <button
+              type="button"
+              className="landing-deck-control-btn"
+              onClick={goNext}
+              disabled={atEnd}
+              aria-label={vl.deckNext}
+            >
+              <span className="hidden sm:inline">{vl.deckNext}</span>
+              <ChevronRight className="h-4 w-4" aria-hidden />
+            </button>
+
+            <button
+              type="button"
+              className="landing-deck-control-btn landing-deck-control-btn--exit"
+              onClick={() => setPresenterMode(false)}
+              aria-label={vl.deckExitPresent}
+            >
+              <X className="h-4 w-4" aria-hidden />
+              <span className="hidden sm:inline">{vl.deckExitPresent}</span>
+            </button>
+          </div>
+          <p className="landing-deck-shortcuts-hint">{vl.deckShortcutsHint}</p>
+          {speakerNote ? (
+            <p className="landing-deck-speaker-note line-clamp-2">{speakerNote}</p>
+          ) : null}
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+export function LandingDeckPresentButton() {
+  const vl = strings.views.landing;
+  const { setPresenterMode } = useLandingDeckRequired();
+
+  return (
+    <button
+      type="button"
+      onClick={() => setPresenterMode(true)}
+      className="hidden items-center gap-1.5 rounded-lg border border-default px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-brand-800 sm:inline-flex sm:text-sm"
+      aria-label={vl.deckPresent}
+    >
+      <MonitorPlay className="h-3.5 w-3.5" aria-hidden />
+      {vl.deckPresent}
+    </button>
+  );
+}
diff --git a/web/src/components/landing/LandingDeckProgress.tsx b/web/src/components/landing/LandingDeckProgress.tsx
new file mode 100644
index 0000000..d0f1df7
--- /dev/null
+++ b/web/src/components/landing/LandingDeckProgress.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { useLandingDeckRequired } from '@/components/landing/LandingDeckContext';
+import { strings } from '@/lib/strings';
+
+export default function LandingDeckProgress() {
+  const vl = strings.views.landing;
+  const { activeIndex, total } = useLandingDeckRequired();
+  const progress = total > 0 ? (activeIndex + 1) / total : 0;
+
+  return (
+    <div
+      className="landing-deck-progress pointer-events-none absolute inset-x-0 bottom-0 z-20 border-t border-muted/50 bg-brand-900/80 backdrop-blur-sm"
+      role="progressbar"
+      aria-valuemin={1}
+      aria-valuemax={total}
+      aria-valuenow={activeIndex + 1}
+      aria-label={vl.deckSlideOf
+        .replace('{current}', String(activeIndex + 1))
+        .replace('{total}', String(total))}
+    >
+      <div className="flex items-center justify-between gap-3 px-5 py-1 sm:px-8 lg:px-10 xl:px-12">
+        <div className="landing-deck-progress-track min-w-0 flex-1">
+          <div
+            className="landing-deck-progress-fill"
+            style={{ transform: `scaleX(${progress})` }}
+          />
+        </div>
+        <span className="shrink-0 text-[10px] font-medium tabular-nums text-muted-foreground sm:text-xs">
+          {activeIndex + 1} / {total}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/landing/LandingDeckTrack.tsx b/web/src/components/landing/LandingDeckTrack.tsx
new file mode 100644
index 0000000..234949d
--- /dev/null
+++ b/web/src/components/landing/LandingDeckTrack.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { useLandingDeckRequired } from '@/components/landing/LandingDeckContext';
+
+export interface LandingDeckTrackProps {
+  children: ReactNode;
+}
+
+/** Horizontal slide strip — only one child panel visible in the viewport at a time. */
+export default function LandingDeckTrack({ children }: LandingDeckTrackProps) {
+  const { activeIndex, slideTransition } = useLandingDeckRequired();
+
+  return (
+    <div
+      className={`landing-deck-track${slideTransition ? '' : ' landing-deck-track--instant'}`}
+      style={{ transform: `translate3d(-${activeIndex * 100}%, 0, 0)` }}
+      aria-live="polite"
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/web/src/components/landing/LandingFeatureSpotlight.tsx b/web/src/components/landing/LandingFeatureSpotlight.tsx
index 8a6bae3..949e561 100644
--- a/web/src/components/landing/LandingFeatureSpotlight.tsx
+++ b/web/src/components/landing/LandingFeatureSpotlight.tsx
@@ -3,6 +3,15 @@
 import Link from 'next/link';
 import { CheckCircle2, ChevronRight } from 'lucide-react';
 import LandingProductMock, { type LandingProductMockVariant } from '@/components/landing/LandingProductMock';
+import {
+  landingGutterClass,
+  landingSectionSplitClass,
+  landingSplitCopyClass,
+  landingSplitMockClass,
+  landingSplitVisualClass,
+} from '@/components/landing/landingLayout';
+import { useInView } from '@/lib/useInView';
+import type { CSSProperties } from 'react';
 
 interface LandingFeatureSpotlightProps {
   eyebrow: string;
@@ -12,6 +21,9 @@ interface LandingFeatureSpotlightProps {
   mockVariant: LandingProductMockVariant;
   ctaHref: string;
   ctaLabel: string;
+  secondaryCtaHref?: string;
+  secondaryCtaLabel?: string;
+  secondaryCtaExternal?: boolean;
   reversed?: boolean;
 }
 
@@ -23,45 +35,82 @@ export default function LandingFeatureSpotlight({
   mockVariant,
   ctaHref,
   ctaLabel,
+  secondaryCtaHref,
+  secondaryCtaLabel,
+  secondaryCtaExternal = false,
   reversed = false,
 }: LandingFeatureSpotlightProps) {
-  const textCol = (
-    <div className="min-w-0">
-      <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-link">{eyebrow}</p>
-      <h3 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">{title}</h3>
-      <p className="mt-3 text-sm leading-relaxed text-muted-foreground sm:text-base">{description}</p>
-      <ul className="mt-5 space-y-2.5">
-        {bullets.map((bullet) => (
-          <li key={bullet} className="flex items-start gap-2.5 text-sm text-foreground">
-            <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-link" aria-hidden />
-            <span>{bullet}</span>
+  const { ref: bulletsRef, inView: bulletsInView } = useInView<HTMLUListElement>();
+
+  const copy = (
+    <>
+      <p className="mb-1 text-xs font-semibold uppercase tracking-wider text-link">{eyebrow}</p>
+      <h3 className="text-xl font-bold tracking-tight text-foreground sm:text-2xl lg:text-3xl">{title}</h3>
+      <p className="mt-2 text-sm leading-snug text-muted-foreground line-clamp-2 sm:text-base">{description}</p>
+      <ul
+        ref={bulletsRef}
+        className={`mt-3 space-y-1.5${bulletsInView ? ' stagger' : ''}`}
+      >
+        {bullets.slice(0, 3).map((bullet, index) => (
+          <li
+            key={bullet}
+            className="flex items-start gap-2 text-xs text-foreground sm:text-sm"
+            style={{ '--i': index } as CSSProperties}
+          >
+            <CheckCircle2 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-link" aria-hidden />
+            <span className="line-clamp-2">{bullet}</span>
           </li>
         ))}
       </ul>
       <Link
         href={ctaHref}
-        className="mt-6 inline-flex items-center gap-1 text-sm font-semibold text-link transition-colors hover:underline"
+        className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-link transition-colors hover:underline"
       >
         {ctaLabel}
         <ChevronRight className="h-4 w-4" aria-hidden />
       </Link>
-    </div>
-  );
-
-  const mockCol = (
-    <div className="landing-mock-glow landing-float rounded-2xl">
-      <LandingProductMock variant={mockVariant} className="w-full" elevated />
-    </div>
+      {secondaryCtaHref && secondaryCtaLabel ? (
+        secondaryCtaExternal ? (
+          <a
+            href={secondaryCtaHref}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-2 inline-flex items-center gap-1 text-sm font-medium text-muted-foreground transition-colors hover:text-link hover:underline"
+          >
+            {secondaryCtaLabel}
+            <ChevronRight className="h-3.5 w-3.5" aria-hidden />
+          </a>
+        ) : (
+          <Link
+            href={secondaryCtaHref}
+            className="mt-2 inline-flex items-center gap-1 text-sm font-medium text-muted-foreground transition-colors hover:text-link hover:underline"
+          >
+            {secondaryCtaLabel}
+            <ChevronRight className="h-3.5 w-3.5" aria-hidden />
+          </Link>
+        )
+      ) : null}
+    </>
   );
 
   return (
-    <div
-      className={`grid items-center gap-10 lg:grid-cols-2 lg:gap-14 ${
-        reversed ? 'lg:[&>*:first-child]:order-2' : ''
-      }`}
-    >
-      {textCol}
-      {mockCol}
+    <div className={`${landingSectionSplitClass} ${reversed ? 'landing-section-split--reversed' : ''}`}>
+      <div
+        className={`${landingSplitCopyClass} ${landingGutterClass} md:pr-6 lg:pr-8 ${reversed ? 'md:order-2 md:pl-6 md:pr-5 lg:pl-10' : ''}`}
+      >
+        {copy}
+      </div>
+      <div className={`${landingSplitVisualClass} px-5 pb-2 sm:px-8 md:px-0 ${reversed ? 'md:order-1' : ''}`}>
+        <div className={landingSplitMockClass}>
+          <LandingProductMock
+            variant={mockVariant}
+            className="h-full min-h-0 w-full"
+            elevated
+            compact
+            fillHeight
+          />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/web/src/components/landing/LandingFinalCta.tsx b/web/src/components/landing/LandingFinalCta.tsx
index 0a25c11..ff3fdb4 100644
--- a/web/src/components/landing/LandingFinalCta.tsx
+++ b/web/src/components/landing/LandingFinalCta.tsx
@@ -1,35 +1,78 @@
 'use client';
 
 import Link from 'next/link';
-import Button from '@/components/Button';
+import { CheckCircle2, ChevronRight } from 'lucide-react';
+import LandingProductMock from '@/components/landing/LandingProductMock';
+import LandingSectionHeader from '@/components/landing/LandingSectionHeader';
+import {
+  landingContentClass,
+  landingGutterClass,
+  landingSectionSplitClass,
+  landingSplitCopyClass,
+  landingSplitMockClass,
+  landingSplitVisualClass,
+} from '@/components/landing/landingLayout';
 import { strings } from '@/lib/strings';
 
 const vl = strings.views.landing;
 
 export default function LandingFinalCta() {
   return (
-    <section className="border-t border-muted/60 bg-gradient-to-b from-brand-800/30 to-brand-900 py-16 sm:py-20">
-      <div className="mx-auto max-w-3xl px-[var(--spacing-page-x)] text-center sm:px-6 lg:px-8">
-        <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">{vl.finalCtaTitle}</h2>
-        <p className="mx-auto mt-4 max-w-xl text-base leading-relaxed text-muted-foreground">
-          {vl.finalCtaSubtitle}
-        </p>
-        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
-          <Link href="/pipeline">
-            <Button variant="primary" className="px-8 py-3 text-base">
+    <div className={`${landingContentClass} flex h-full min-h-0 flex-col justify-center gap-6 lg:gap-8`}>
+      <div className={landingSectionSplitClass}>
+        <div className={`${landingSplitCopyClass} ${landingGutterClass} md:pr-6 lg:pr-10`}>
+          <LandingSectionHeader
+            eyebrow={vl.finalCtaEyebrow}
+            title={vl.finalCtaTitle}
+            subtitle={vl.finalCtaSubtitle}
+            centered={false}
+            compact
+          />
+          <ul className="mt-5 space-y-2">
+            {vl.finalCtaBullets.map((bullet) => (
+              <li key={bullet} className="flex items-start gap-2 text-sm text-muted-foreground sm:text-base">
+                <CheckCircle2 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-link" aria-hidden />
+                <span>{bullet}</span>
+              </li>
+            ))}
+          </ul>
+          <div className="mt-6 flex flex-wrap items-center gap-3">
+            <Link
+              href="/pipeline"
+              className="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-500 sm:text-base"
+            >
               {vl.ctaRunAudit}
-            </Button>
-          </Link>
-          <Link href="/home">
-            <Button variant="secondary" className="px-8 py-3 text-base">
+              <ChevronRight className="h-4 w-4" aria-hidden />
+            </Link>
+            <Link
+              href="/home"
+              className="inline-flex items-center gap-1.5 rounded-lg border border-default px-4 py-2.5 text-sm font-semibold text-foreground transition-colors hover:bg-brand-800 sm:text-base"
+            >
               {vl.ctaDashboard}
-            </Button>
-          </Link>
+              <ChevronRight className="h-4 w-4" aria-hidden />
+            </Link>
+          </div>
+          <p className="mt-4 text-xs text-muted-foreground sm:text-sm">
+            {vl.heroProofNoSubscription} · {vl.heroProofLocalData}
+          </p>
         </div>
-        <p className="mt-6 text-xs text-muted-foreground">
-          {vl.heroProofNoSubscription} · {vl.heroProofLocalData}
-        </p>
+
+        <div className={`${landingSplitVisualClass} px-5 sm:px-8 md:px-6 lg:px-10`}>
+          <div className={`${landingSplitMockClass} min-h-[14rem] sm:min-h-[18rem]`}>
+            <LandingProductMock variant="compareExport" className="h-full min-h-0 w-full" elevated fillHeight />
+          </div>
+        </div>
+      </div>
+
+      <div className={`flex justify-center border-t border-muted/40 pt-5 ${landingGutterClass}`}>
+        <a
+          href="#quick-start"
+          className="inline-flex items-center gap-1.5 rounded-full border border-blue-500/30 bg-blue-500/10 px-4 py-1.5 text-xs font-medium text-link transition-colors hover:bg-blue-500/20 sm:text-sm"
+        >
+          {vl.finalCtaInstallLink}
+          <ChevronRight className="h-3.5 w-3.5" aria-hidden />
+        </a>
       </div>
-    </section>
+    </div>
   );
 }
diff --git a/web/src/components/landing/LandingFooter.tsx b/web/src/components/landing/LandingFooter.tsx
index 2c81b8f..71753ea 100644
--- a/web/src/components/landing/LandingFooter.tsx
+++ b/web/src/components/landing/LandingFooter.tsx
@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import type { ReactNode } from 'react';
 import { ExternalLink } from 'lucide-react';
+import { landingGutterClass } from '@/components/landing/landingLayout';
 import { strings } from '@/lib/strings';
 
 const vl = strings.views.landing;
@@ -35,7 +36,7 @@ function FooterLink({
 
 export default function LandingFooter() {
   return (
-    <div className="mx-auto max-w-6xl px-[var(--spacing-page-x)] py-10 sm:px-6 lg:px-8">
+    <div className={`w-full py-6 sm:py-8 ${landingGutterClass}`}>
       <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-5">
         <div className="lg:col-span-1">
           <p className="font-semibold text-foreground">{app.productName}</p>
diff --git a/web/src/components/landing/LandingGoogleSetup.tsx b/web/src/components/landing/LandingGoogleSetup.tsx
index 1220270..9c72324 100644
--- a/web/src/components/landing/LandingGoogleSetup.tsx
+++ b/web/src/components/landing/LandingGoogleSetup.tsx
@@ -2,8 +2,9 @@
 
 import { useState } from 'react';
 import Link from 'next/link';
-import { ChevronDown, ExternalLink } from 'lucide-react';
+import { ExternalLink } from 'lucide-react';
 import Button from '@/components/Button';
+import { landingContentClass } from '@/components/landing/landingLayout';
 import { strings } from '@/lib/strings';
 
 type GuideSection = {
@@ -28,118 +29,73 @@ const SECTION_ORDER = [
 export default function LandingGoogleSetup() {
   const vl = strings.views.landing;
   const sections = vl.googleSetupSections as Record<string, GuideSection>;
-  const [openIds, setOpenIds] = useState<Set<string>>(() => new Set(['prerequisites', 'oauthClient']));
-
-  const toggle = (id: string) => {
-    setOpenIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-
-  const expandAll = () => setOpenIds(new Set(SECTION_ORDER));
-  const collapseAll = () => setOpenIds(new Set());
+  const [activeId, setActiveId] = useState<string>('oauthClient');
+  const active = sections[activeId];
 
   return (
-    <section
-      id="google-setup"
-      className="scroll-mt-24 border-y border-muted/60 bg-brand-800/20 py-10 sm:py-12"
-    >
-      <div className="mx-auto max-w-6xl px-[var(--spacing-page-x)] sm:px-6 lg:px-8">
-        <div className="mb-6">
-          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-link">
+    <div className={`${landingContentClass} flex h-full flex-col justify-center`}>
+      <div className="mb-3 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+        <div className="min-w-0">
+          <p className="mb-1 text-xs font-semibold uppercase tracking-wider text-link">
             {vl.sectionSetupGuide}
           </p>
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-            <div className="max-w-2xl">
-              <h2 className="text-2xl font-bold text-foreground sm:text-3xl">{vl.googleSetupTitle}</h2>
-              <p className="mt-2 text-sm leading-relaxed text-muted-foreground sm:text-base">
-                {vl.googleSetupSubtitle}
-              </p>
-              <p className="mt-3 rounded-lg border border-amber-500/25 bg-amber-500/10 px-3 py-2 text-xs text-amber-950 dark:text-amber-100/90">
-                {vl.googleSetupNote}
-              </p>
-            </div>
-            <div className="flex shrink-0 flex-wrap gap-2">
-              <button
-                type="button"
-                onClick={expandAll}
-                className="rounded-lg border border-default px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground"
-              >
-                Expand all
-              </button>
-              <button
-                type="button"
-                onClick={collapseAll}
-                className="rounded-lg border border-default px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground"
-              >
-                Collapse all
-              </button>
-              <Link href="/pipeline">
-                <Button variant="secondary" className="px-4 py-1.5 text-xs sm:text-sm">
-                  {vl.googleSetupCta}
-                </Button>
-              </Link>
-            </div>
-          </div>
+          <h2 className="text-xl font-bold text-foreground sm:text-2xl">{vl.googleSetupTitle}</h2>
+          <p className="mt-1 line-clamp-2 text-xs text-muted-foreground sm:text-sm">
+            {vl.googleSetupSubtitle}
+          </p>
         </div>
+        <Link href="/pipeline" className="shrink-0">
+          <Button variant="secondary" className="px-3 py-1.5 text-xs sm:text-sm">
+            {vl.googleSetupCta}
+          </Button>
+        </Link>
+      </div>
 
-        <div className="space-y-2">
-          {SECTION_ORDER.map((id, index) => {
-            const section = sections[id];
-            if (!section) return null;
-            const expanded = openIds.has(id);
-            const panelId = `google-setup-panel-${id}`;
-            return (
-              <article
-                key={id}
-                className="overflow-hidden rounded-xl border border-default bg-brand-800/40"
-              >
-                <button
-                  type="button"
-                  onClick={() => toggle(id)}
-                  aria-expanded={expanded}
-                  aria-controls={panelId}
-                  className="flex w-full items-center justify-between gap-3 px-4 py-3.5 text-left transition-colors hover:bg-brand-900/30 sm:px-5"
-                >
-                  <span className="flex min-w-0 items-center gap-3">
-                    <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-blue-500/10 text-xs font-bold text-link">
-                      {index + 1}
-                    </span>
-                    <span className="text-sm font-semibold text-foreground">{section.title}</span>
-                  </span>
-                  <ChevronDown
-                    className={`h-4 w-4 shrink-0 text-muted-foreground transition-transform ${expanded ? 'rotate-180' : ''}`}
-                    aria-hidden
-                  />
-                </button>
-                {expanded ? (
-                  <div id={panelId} className="space-y-3 border-t border-muted/60 px-4 py-4 sm:px-5">
-                    <ol className="list-decimal space-y-2 pl-5 text-sm leading-relaxed text-muted-foreground">
-                      {section.items.map((item) => (
-                        <li key={item}>{item}</li>
-                      ))}
-                    </ol>
-                    {section.linkLabel && section.linkUrl ? (
-                      <a
-                        href={section.linkUrl}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-1 text-sm font-medium text-link hover:underline"
-                      >
-                        {section.linkLabel}
-                        <ExternalLink className="h-3.5 w-3.5" aria-hidden />
-                      </a>
-                    ) : null}
-                  </div>
-                ) : null}
-              </article>
-            );
-          })}
-        </div>
+      <div className="grid grid-cols-3 gap-1.5 sm:gap-2">
+        {SECTION_ORDER.map((id, index) => {
+          const section = sections[id];
+          if (!section) return null;
+          const selected = activeId === id;
+          return (
+            <button
+              key={id}
+              type="button"
+              onClick={() => setActiveId(id)}
+              className={`rounded-lg border px-2 py-1.5 text-left text-[10px] leading-snug transition-colors sm:px-2.5 sm:py-2 sm:text-xs ${
+                selected
+                  ? 'border-blue-500/40 bg-blue-500/10 text-foreground'
+                  : 'border-default/60 text-muted-foreground hover:border-blue-500/25 hover:text-foreground'
+              }`}
+            >
+              <span className="font-bold text-link">{index + 1}.</span> {section.title}
+            </button>
+          );
+        })}
       </div>
-    </section>
+
+      {active ? (
+        <div className="mt-2.5 rounded-xl border border-default/60 p-3 sm:p-3.5">
+          <p className="text-sm font-semibold text-foreground">{active.title}</p>
+          <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground sm:text-sm">
+            {active.items[0]}
+          </p>
+          {active.linkLabel && active.linkUrl ? (
+            <a
+              href={active.linkUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-link hover:underline sm:text-sm"
+            >
+              {active.linkLabel}
+              <ExternalLink className="h-3 w-3" aria-hidden />
+            </a>
+          ) : null}
+        </div>
+      ) : null}
+
+      <p className="mt-2.5 line-clamp-2 rounded-lg border border-amber-500/25 bg-amber-500/10 px-2.5 py-1.5 text-[11px] text-amber-950 dark:text-amber-100/90">
+        {vl.googleSetupNote}
+      </p>
+    </div>
   );
 }
diff --git a/web/src/components/landing/LandingHero.tsx b/web/src/components/landing/LandingHero.tsx
index 285f537..d2cc534 100644
--- a/web/src/components/landing/LandingHero.tsx
+++ b/web/src/components/landing/LandingHero.tsx
@@ -2,49 +2,83 @@
 
 import Link from 'next/link';
 import { CheckCircle2, ChevronRight } from 'lucide-react';
+import LandingHeroTopBar from '@/components/landing/LandingHeroTopBar';
 import LandingProductMock from '@/components/landing/LandingProductMock';
+import LandingSlideBadge from '@/components/landing/LandingSlideBadge';
+import {
+  LANDING_SECTION_IDS,
+  landingGutterClass,
+  landingSectionClass,
+  landingSectionSplitClass,
+  landingSplitCopyClass,
+  landingSplitMockClass,
+  landingSplitVisualClass,
+} from '@/components/landing/landingLayout';
+import { useInView } from '@/lib/useInView';
 import { strings } from '@/lib/strings';
+import type { CSSProperties } from 'react';
 
 const vl = strings.views.landing;
 
 export default function LandingHero() {
+  const { ref: bulletsRef, inView: bulletsInView } = useInView<HTMLUListElement>();
+
   return (
-    <section className="mx-auto max-w-6xl px-[var(--spacing-page-x)] pb-12 pt-12 sm:px-6 sm:pt-16 lg:px-8 lg:pb-16 lg:pt-20">
-      <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
-        <div className="min-w-0">
-          <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-link">{vl.heroEyebrow}</p>
-          <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl lg:text-[2.75rem] lg:leading-tight">
-            {vl.heroTitle}
-          </h1>
-          <p className="mt-3 text-sm leading-relaxed text-muted-foreground sm:text-base">{vl.heroSubtitle}</p>
-          <ul className="mt-5 space-y-2.5">
-            {vl.heroBullets.map((bullet) => (
-              <li key={bullet} className="flex items-start gap-2.5 text-sm text-foreground">
-                <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-link" aria-hidden />
-                <span>{bullet}</span>
-              </li>
-            ))}
-          </ul>
-          <div className="mt-6 flex flex-wrap items-center gap-x-5 gap-y-2">
-            <Link
-              href="/pipeline"
-              className="inline-flex items-center gap-1 text-sm font-semibold text-link transition-colors hover:underline"
-            >
-              {vl.ctaRunAudit}
-              <ChevronRight className="h-4 w-4" aria-hidden />
-            </Link>
-            <Link
-              href="/home"
-              className="inline-flex items-center gap-1 text-sm font-semibold text-muted-foreground transition-colors hover:text-foreground hover:underline"
+    <section id={LANDING_SECTION_IDS.hero} className={`${landingSectionClass} !pt-0`}>
+      <LandingSlideBadge label={(vl.deckBadges as Record<string, string>).hero ?? ''} />
+      <LandingHeroTopBar />
+
+      <div className={`flex min-h-0 flex-1 flex-col justify-center pb-11 pt-4 sm:pb-12 sm:pt-5 ${landingGutterClass}`}>
+        <div className={landingSectionSplitClass}>
+          <div className={`${landingSplitCopyClass} md:pr-6 lg:pr-10`}>
+            <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-link">{vl.heroEyebrow}</p>
+            <h1 className="landing-gradient-text text-3xl font-bold tracking-tight sm:text-4xl md:text-[2.5rem] md:leading-[1.1] lg:text-[2.75rem] xl:text-5xl">
+              {vl.heroTitle}
+            </h1>
+            <p className="mt-2 text-sm leading-relaxed text-muted-foreground sm:text-base lg:text-lg">
+              {vl.heroSubtitle}
+            </p>
+            <ul
+              ref={bulletsRef}
+              className={`mt-4 space-y-1.5${bulletsInView ? ' stagger' : ''}`}
             >
-              {vl.ctaDashboard}
-              <ChevronRight className="h-4 w-4" aria-hidden />
-            </Link>
+              {vl.heroBullets.map((bullet, index) => (
+                <li
+                  key={bullet}
+                  className="flex items-start gap-2 text-sm text-foreground"
+                  style={{ '--i': index } as CSSProperties}
+                >
+                  <CheckCircle2 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-link" aria-hidden />
+                  <span className="line-clamp-2">{bullet}</span>
+                </li>
+              ))}
+            </ul>
+            <div className="mt-5 flex flex-wrap items-center gap-2.5">
+              <Link
+                href="/pipeline"
+                className="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3.5 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-500"
+              >
+                {vl.ctaRunAudit}
+                <ChevronRight className="h-4 w-4" aria-hidden />
+              </Link>
+              <Link
+                href="/home"
+                className="inline-flex items-center gap-1.5 rounded-lg border border-default px-3.5 py-2 text-sm font-semibold text-foreground transition-colors hover:bg-brand-800"
+              >
+                {vl.ctaDashboard}
+                <ChevronRight className="h-4 w-4" aria-hidden />
+              </Link>
+            </div>
+            <p className="mt-3 text-[11px] text-muted-foreground sm:text-xs">
+              {vl.heroProofNoSubscription} · {vl.heroProofLocalData}
+            </p>
           </div>
-        </div>
 
-        <div className="landing-mock-glow landing-float rounded-2xl">
-          <LandingProductMock variant="default" className="w-full" elevated />
+          <div className={`${landingSplitVisualClass} px-0 pb-2 sm:px-0 md:px-0`}>
+            <div className={landingSplitMockClass}>
+              <LandingProductMock variant="default" className="h-full min-h-0 w-full" elevated fillHeight />
+            </div>
+          </div>
         </div>
       </div>
     </section>
diff --git a/web/src/components/landing/LandingHeroTopBar.tsx b/web/src/components/landing/LandingHeroTopBar.tsx
new file mode 100644
index 0000000..8f8e08f
--- /dev/null
+++ b/web/src/components/landing/LandingHeroTopBar.tsx
@@ -0,0 +1,113 @@
+'use client';
+
+import Link from 'next/link';
+import AppLogo from '@/components/AppLogo';
+import ThemeToggle from '@/components/ThemeToggle';
+import { LandingDeckPresentButton } from '@/components/landing/LandingDeckControls';
+import { useLandingDeckRequired } from '@/components/landing/LandingDeckContext';
+import { landingGutterClass } from '@/components/landing/landingLayout';
+import { strings } from '@/lib/strings';
+
+const NAV_ITEMS = [
+  { href: '#features', labelKey: 'navFeatures' as const },
+  { href: '#quick-start', labelKey: 'navQuickStart' as const },
+  { href: '#spotlight-google', labelKey: 'navGoogleSetup' as const },
+] as const;
+
+/** Title-slide chrome: logo, section links, and primary actions (hero slide only). */
+export default function LandingHeroTopBar() {
+  const vl = strings.views.landing;
+  const app = strings.app;
+  const { presenterMode } = useLandingDeckRequired();
+
+  if (presenterMode) {
+    return (
+      <div className={`flex shrink-0 items-center justify-between gap-3 border-b border-muted/40 py-3 ${landingGutterClass}`}>
+        <Link href="/" className="flex min-w-0 items-center gap-2.5">
+          <AppLogo size={22} />
+          <span className="truncate font-semibold text-foreground">{app.productName}</span>
+        </Link>
+        <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
+          <ThemeToggle />
+          <Link
+            href="/pipeline"
+            className="rounded-lg bg-blue-600 px-2.5 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-500 sm:px-3 sm:text-sm"
+          >
+            {vl.navRunAudit}
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <header className="shrink-0 border-b border-muted/40">
+      <div className={`flex h-14 w-full items-center justify-between gap-3 ${landingGutterClass}`}>
+        <Link href="/" className="flex min-w-0 items-center gap-2.5">
+          <AppLogo size={22} />
+          <span className="truncate font-semibold text-foreground">{app.productName}</span>
+        </Link>
+        <nav
+          className="hidden items-center gap-1 rounded-lg border border-default/80 bg-brand-800/40 p-1 md:flex"
+          aria-label="Landing"
+        >
+          {NAV_ITEMS.map(({ href, labelKey }) => (
+            <a
+              key={href}
+              href={href}
+              className="rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-brand-700/60 hover:text-foreground lg:px-3 lg:text-sm"
+            >
+              {vl[labelKey]}
+            </a>
+          ))}
+          <a
+            href={vl.githubRepoUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-brand-700/60 hover:text-foreground lg:px-3 lg:text-sm"
+          >
+            {vl.navGithub}
+          </a>
+        </nav>
+        <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
+          <ThemeToggle />
+          <LandingDeckPresentButton />
+          <Link
+            href="/home"
+            className="hidden rounded-lg border border-default px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-brand-800 sm:inline sm:text-sm"
+          >
+            {vl.navOpenApp}
+          </Link>
+          <Link
+            href="/pipeline"
+            className="rounded-lg bg-blue-600 px-2.5 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-500 sm:px-3 sm:text-sm"
+          >
+            {vl.navRunAudit}
+          </Link>
+        </div>
+      </div>
+      <nav
+        className={`flex gap-2 overflow-x-auto border-t border-muted/50 py-2 md:hidden ${landingGutterClass}`}
+        aria-label="Landing mobile"
+      >
+        {NAV_ITEMS.map(({ href, labelKey }) => (
+          <a
+            key={href}
+            href={href}
+            className="shrink-0 rounded-full border border-default bg-brand-800/50 px-3 py-1 text-xs font-medium text-muted-foreground"
+          >
+            {vl[labelKey]}
+          </a>
+        ))}
+        <a
+          href={vl.githubRepoUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="shrink-0 rounded-full border border-default bg-brand-800/50 px-3 py-1 text-xs font-medium text-muted-foreground"
+        >
+          {vl.navGithub}
+        </a>
+      </nav>
+    </header>
+  );
+}
diff --git a/web/src/components/landing/LandingLimitations.tsx b/web/src/components/landing/LandingLimitations.tsx
index fda5fa2..66653c1 100644
--- a/web/src/components/landing/LandingLimitations.tsx
+++ b/web/src/components/landing/LandingLimitations.tsx
@@ -1,55 +1,73 @@
 'use client';
 
-import { ExternalLink } from 'lucide-react';
+import { CheckCircle2, ExternalLink, XCircle } from 'lucide-react';
 import LandingSectionHeader from '@/components/landing/LandingSectionHeader';
+import {
+  landingContentClass,
+  landingGutterClass,
+  landingSectionSplitClass,
+  landingSplitCopyClass,
+} from '@/components/landing/landingLayout';
 import { strings } from '@/lib/strings';
 
 const vl = strings.views.landing;
 
 export default function LandingLimitations() {
   return (
-    <section
-      id="limitations"
-      className="scroll-mt-24 border-y border-muted/60 bg-brand-800/20 py-16 sm:py-20"
-    >
-      <div className="mx-auto max-w-6xl px-[var(--spacing-page-x)] sm:px-6 lg:px-8">
-        <LandingSectionHeader title={vl.limitationsTitle} subtitle={vl.limitationsSubtitle} />
-        <div className="grid gap-6 md:grid-cols-2 md:gap-8">
-          <div className="rounded-xl border border-default bg-brand-800/40 p-5">
-            <h3 className="text-base font-semibold text-foreground">{vl.limitationsIsTitle}</h3>
-            <ul className="mt-3 space-y-2">
-              {vl.limitationsIsItems.map((item) => (
-                <li key={item} className="flex items-start gap-2 text-sm text-muted-foreground">
-                  <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500/80" aria-hidden />
-                  <span>{item}</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div className="rounded-xl border border-default bg-brand-800/40 p-5">
-            <h3 className="text-base font-semibold text-foreground">{vl.limitationsIsntTitle}</h3>
-            <ul className="mt-3 space-y-2">
-              {vl.limitationsIsntItems.map((item) => (
-                <li key={item} className="flex items-start gap-2 text-sm text-muted-foreground">
-                  <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/60" aria-hidden />
-                  <span>{item}</span>
-                </li>
-              ))}
-            </ul>
+    <div className={`${landingContentClass} flex h-full min-h-0 flex-col justify-center gap-6 lg:gap-8`}>
+      <div className={landingSectionSplitClass}>
+        <div className={`${landingSplitCopyClass} ${landingGutterClass} md:pr-6 lg:pr-10`}>
+          <LandingSectionHeader
+            eyebrow={vl.limitationsEyebrow}
+            title={vl.limitationsTitle}
+            subtitle={vl.limitationsSubtitle}
+            centered={false}
+            compact
+          />
+          <p className="mt-5 hidden text-sm leading-relaxed text-muted-foreground md:block">
+            {vl.limitationsContext}
+          </p>
+        </div>
+
+        <div className="flex min-h-0 flex-col justify-center px-5 sm:px-8 md:px-6 lg:px-10">
+          <div className="grid gap-3 sm:grid-cols-2 sm:gap-4">
+            <article className="flex min-h-[16rem] flex-col rounded-xl border border-default/60 px-4 py-4 sm:min-h-[18rem] sm:px-5 sm:py-5">
+              <h3 className="text-base font-bold text-foreground sm:text-lg">{vl.limitationsIsTitle}</h3>
+              <ul className="mt-4 flex flex-1 flex-col gap-3">
+                {vl.limitationsIsItems.map((item) => (
+                  <li key={item} className="flex items-start gap-2.5 text-sm text-muted-foreground sm:text-base">
+                    <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-500/90" aria-hidden />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </article>
+            <article className="flex min-h-[16rem] flex-col rounded-xl border border-default/60 px-4 py-4 sm:min-h-[18rem] sm:px-5 sm:py-5">
+              <h3 className="text-base font-bold text-foreground sm:text-lg">{vl.limitationsIsntTitle}</h3>
+              <ul className="mt-4 flex flex-1 flex-col gap-3">
+                {vl.limitationsIsntItems.map((item) => (
+                  <li key={item} className="flex items-start gap-2.5 text-sm text-muted-foreground sm:text-base">
+                    <XCircle className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground/70" aria-hidden />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </article>
           </div>
         </div>
-        <p className="mt-6 text-center">
-          <a
-            href={vl.githubReadmeUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center gap-1 text-sm font-medium text-link hover:underline"
-          >
-            {vl.limitationsReadmeLink}
-            <ExternalLink className="h-3.5 w-3.5" aria-hidden />
-          </a>
-        </p>
       </div>
-    </section>
+
+      <div className={`flex justify-center border-t border-muted/40 pt-5 ${landingGutterClass}`}>
+        <a
+          href={vl.githubReadmeUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1.5 rounded-full border border-blue-500/30 bg-blue-500/10 px-4 py-1.5 text-xs font-medium text-link transition-colors hover:bg-blue-500/20 sm:text-sm"
+        >
+          {vl.limitationsReadmeLink}
+          <ExternalLink className="h-3.5 w-3.5" aria-hidden />
+        </a>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/components/landing/LandingPageSection.tsx b/web/src/components/landing/LandingPageSection.tsx
new file mode 100644
index 0000000..8f25d2f
--- /dev/null
+++ b/web/src/components/landing/LandingPageSection.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import Reveal from '@/components/Reveal';
+import LandingSlideBadge from '@/components/landing/LandingSlideBadge';
+import {
+  landingContentClass,
+  landingGutterClass,
+  landingSectionBodyCenteredClass,
+  landingSectionBodyClass,
+  landingSectionClass,
+  landingSectionPad,
+} from '@/components/landing/landingLayout';
+import { strings } from '@/lib/strings';
+
+export interface LandingPageSectionProps {
+  id?: string;
+  /** Edge-to-edge layout (hero / spotlight splits). Skips outer gutters. */
+  fullBleed?: boolean;
+  className?: string;
+  children: ReactNode;
+}
+
+function slideBadgeForId(id: string | undefined): string {
+  if (!id) return '';
+  const badges = strings.views.landing.deckBadges as Record<string, string> | undefined;
+  return badges?.[id] ?? '';
+}
+
+export default function LandingPageSection({
+  id,
+  fullBleed = false,
+  className = '',
+  children,
+}: LandingPageSectionProps) {
+  const bodyClass = fullBleed
+    ? `${landingSectionBodyClass} ${landingContentClass}`
+    : `${landingSectionBodyCenteredClass} ${landingContentClass} ${landingGutterClass}`;
+
+  const badge = slideBadgeForId(id);
+
+  return (
+    <Reveal
+      as="section"
+      id={id}
+      className={`${landingSectionClass} ${landingSectionPad} ${className}`.trim()}
+    >
+      {badge ? <LandingSlideBadge label={badge} /> : null}
+      <div className={bodyClass}>{children}</div>
+    </Reveal>
+  );
+}
diff --git a/web/src/components/landing/LandingPathStrip.tsx b/web/src/components/landing/LandingPathStrip.tsx
index 69fce38..a6b35a2 100644
--- a/web/src/components/landing/LandingPathStrip.tsx
+++ b/web/src/components/landing/LandingPathStrip.tsx
@@ -1,6 +1,13 @@
 'use client';
 
-import { ArrowRight, BarChart2, Download, Play, Settings2 } from 'lucide-react';
+import { BarChart2, ChevronRight, Download, Play, Settings2 } from 'lucide-react';
+import LandingSectionHeader from '@/components/landing/LandingSectionHeader';
+import {
+  landingContentClass,
+  landingGutterClass,
+  landingSectionSplitClass,
+  landingSplitCopyClass,
+} from '@/components/landing/landingLayout';
 import { strings } from '@/lib/strings';
 
 const vl = strings.views.landing;
@@ -8,52 +15,78 @@ const vl = strings.views.landing;
 const STEPS = [
   { step: 1, id: 'quick-start', icon: Download, label: vl.pathStepInstall, hint: vl.pathStepInstallHint },
   { step: 2, id: 'spotlights', icon: Play, label: vl.pathStepCrawl, hint: vl.pathStepCrawlHint },
-  { step: 3, id: 'google-setup', icon: Settings2, label: vl.pathStepGoogle, hint: vl.pathStepGoogleHint },
-  { step: 4, id: 'features', icon: BarChart2, label: vl.pathStepReport, hint: vl.pathStepReportHint },
+  { step: 3, id: 'spotlight-google', icon: Settings2, label: vl.pathStepGoogle, hint: vl.pathStepGoogleHint },
+  { step: 4, id: 'spotlight-compare-export', icon: BarChart2, label: vl.pathStepReport, hint: vl.pathStepReportHint },
 ] as const;
 
 export default function LandingPathStrip() {
   return (
-    <section
-      id="get-started"
-      className="scroll-mt-24 mx-auto max-w-6xl px-[var(--spacing-page-x)] pb-10 sm:px-6 lg:px-8"
-    >
-      <p className="mb-4 text-center text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-        {vl.pathTitle}
-      </p>
-      <div className="relative flex flex-col gap-2 sm:flex-row sm:items-stretch">
-        <div
-          aria-hidden
-          className="pointer-events-none absolute left-[12.5%] right-[12.5%] top-8 hidden h-px bg-gradient-to-r from-transparent via-blue-500/25 to-transparent sm:block"
-        />
-        {STEPS.map(({ step, id, icon: Icon, label, hint }, index) => (
-          <div key={id} className="relative flex min-w-0 flex-1 items-center gap-2 sm:flex-col sm:gap-0">
-            <a
-              href={`#${id}`}
-              className="group relative z-10 flex min-w-0 flex-1 flex-col items-start gap-3 rounded-2xl border border-default bg-brand-800/50 px-4 py-4 transition-all hover:-translate-y-0.5 hover:border-blue-500/35 hover:bg-brand-800/80 hover:shadow-[var(--shadow-elevated)] sm:w-full"
-            >
-              <span className="flex w-full items-center justify-between gap-2">
-                <span className="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-blue-500/10 text-link">
-                  <Icon className="h-4 w-4" aria-hidden />
-                </span>
-                <span className="inline-flex h-6 w-6 items-center justify-center rounded-full border border-blue-500/30 bg-blue-500/10 text-[11px] font-bold text-link">
-                  {step}
+    <div className={`${landingContentClass} flex h-full min-h-0 flex-col justify-center gap-6 lg:gap-8`}>
+      <div className={landingSectionSplitClass}>
+        <div className={`${landingSplitCopyClass} ${landingGutterClass} md:pr-6 lg:pr-10`}>
+          <LandingSectionHeader
+            eyebrow={vl.pathEyebrow}
+            title={vl.pathTitle}
+            subtitle={vl.pathSubtitle}
+            centered={false}
+            compact
+          />
+          <ol className="mt-5 hidden space-y-2 md:block">
+            {STEPS.map(({ step, id, label }) => (
+              <li key={id}>
+                <a
+                  href={`#${id}`}
+                  className="group flex items-center gap-3 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-brand-800/60"
+                >
+                  <span className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-blue-500/30 bg-blue-500/10 text-xs font-bold text-link">
+                    {step}
+                  </span>
+                  <span className="font-medium text-foreground group-hover:text-link">{label}</span>
+                  <ChevronRight
+                    className="ml-auto h-3.5 w-3.5 text-muted-foreground/50 opacity-0 transition-opacity group-hover:opacity-100"
+                    aria-hidden
+                  />
+                </a>
+              </li>
+            ))}
+          </ol>
+        </div>
+
+        <div className="flex min-h-0 flex-col justify-center px-5 sm:px-8 md:px-6 lg:px-10">
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            {STEPS.map(({ step, id, icon: Icon, label, hint }) => (
+              <a
+                key={id}
+                href={`#${id}`}
+                className="group flex min-h-[7.5rem] flex-col rounded-xl border border-default/60 px-4 py-4 transition-colors hover:border-blue-500/25 sm:min-h-[8.25rem] sm:px-5 sm:py-5"
+              >
+                <span className="flex items-center justify-between gap-2">
+                  <span className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-blue-500/20 bg-blue-500/10 text-link">
+                    <Icon className="h-4 w-4" aria-hidden />
+                  </span>
+                  <span className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-default/60 text-xs font-bold text-link">
+                    {step}
+                  </span>
                 </span>
-              </span>
-              <span className="min-w-0">
-                <span className="block text-sm font-semibold text-foreground group-hover:text-link">{label}</span>
-                <span className="mt-0.5 block text-xs leading-relaxed text-muted-foreground">{hint}</span>
-              </span>
-            </a>
-            {index < STEPS.length - 1 ? (
-              <ArrowRight
-                className="mx-auto h-4 w-4 shrink-0 rotate-90 text-muted-foreground/50 sm:absolute sm:-right-3 sm:top-1/2 sm:z-20 sm:mx-0 sm:-translate-y-1/2 sm:rotate-0"
-                aria-hidden
-              />
-            ) : null}
+                <p className="mt-3 text-base font-bold leading-snug text-foreground group-hover:text-link sm:text-lg">
+                  {label}
+                </p>
+                <p className="mt-1.5 line-clamp-2 text-xs leading-relaxed text-muted-foreground sm:text-sm">{hint}</p>
+              </a>
+            ))}
           </div>
-        ))}
+        </div>
+      </div>
+
+      <div className={`flex justify-center border-t border-muted/40 pt-5 ${landingGutterClass}`}>
+        <a
+          href="#quick-start"
+          className="inline-flex items-center gap-1.5 rounded-full border border-blue-500/30 bg-blue-500/10 px-4 py-1.5 text-xs font-medium text-link transition-colors hover:bg-blue-500/20 sm:text-sm"
+        >
+          {vl.pathCtaLabel}
+          <ChevronRight className="h-3.5 w-3.5" aria-hidden />
+        </a>
       </div>
-    </section>
+    </div>
   );
 }
diff --git a/web/src/components/landing/LandingProductMock.tsx b/web/src/components/landing/LandingProductMock.tsx
index 0560d3a..78f11e6 100644
--- a/web/src/components/landing/LandingProductMock.tsx
+++ b/web/src/components/landing/LandingProductMock.tsx
@@ -11,22 +11,45 @@ import {
   CompactStackedBar,
 } from '@/components/charts/compact';
 
-export type LandingProductMockVariant = 'default' | 'crawl' | 'issues';
+export type LandingProductMockVariant =
+  | 'default'
+  | 'crawl'
+  | 'issues'
+  | 'google'
+  | 'contentStudio'
+  | 'aiChat'
+  | 'compareExport';
 
 interface LandingProductMockProps {
   variant?: LandingProductMockVariant;
   className?: string;
   elevated?: boolean;
+  compact?: boolean;
+  /** Stretch to fill a split-column visual area (hero / spotlights). */
+  fillHeight?: boolean;
 }
 
 const NAV_ITEMS = [
   { label: 'Overview', activeFor: ['default'] as const },
   { label: 'Issues', activeFor: ['issues'] as const },
   { label: 'All URLs', activeFor: ['crawl'] as const },
-  { label: 'Search', activeFor: [] as const },
-  { label: 'Export', activeFor: [] as const },
+  { label: 'Search', activeFor: ['google'] as const },
+  { label: 'Write', activeFor: ['contentStudio'] as const },
+  { label: 'Chat', activeFor: ['aiChat'] as const },
+  { label: 'Compare', activeFor: ['compareExport'] as const },
+  { label: 'Export', activeFor: ['compareExport'] as const },
 ];
 
+const MOCK_PATHS: Record<LandingProductMockVariant, string> = {
+  default: 'overview',
+  crawl: 'links',
+  issues: 'issues',
+  google: 'search-performance',
+  contentStudio: 'write',
+  aiChat: 'chat',
+  compareExport: 'compare',
+};
+
 const MOCK_GSC_BAR_HEIGHTS = [40, 65, 52, 78, 45, 88, 60, 72, 55, 80, 68, 92];
 
 function MockLineChart({ label }: { label?: string }) {
@@ -268,34 +291,209 @@ function OverviewPanel() {
   );
 }
 
+function GooglePanel() {
+  return (
+    <>
+      <div className="mb-2.5 grid grid-cols-3 gap-1.5">
+        <CompactKpi label="Clicks" value="12.4k" delta="+8%" accent />
+        <CompactKpi label="Impressions" value="284k" />
+        <CompactKpi label="CTR" value="4.4%" />
+      </div>
+      <div className="mb-2.5 grid grid-cols-2 gap-2">
+        <CompactWidget title="GSC clicks (28d)">
+          <CompactBarChart heights={MOCK_GSC_BAR_HEIGHTS} />
+        </CompactWidget>
+        <CompactWidget title="GA4 traffic">
+          <div className="grid grid-cols-2 gap-2">
+            <CompactKpi label="Sessions" value="8,412" delta="+5%" />
+            <CompactKpi label="Users" value="6,203" />
+          </div>
+        </CompactWidget>
+      </div>
+      <CompactWidget title="Top queries" className="mb-0">
+        <div className="space-y-1">
+          <MockUrlRow path="technical seo audit" status={200} />
+          <MockUrlRow path="screaming frog alternative" status={200} />
+          <MockUrlRow path="self hosted seo tool" status={200} />
+        </div>
+      </CompactWidget>
+    </>
+  );
+}
+
+function MockTermRow({ term, count, target, tone }: { term: string; count: number; target: number; tone: 'ok' | 'warn' | 'bad' }) {
+  const toneClass =
+    tone === 'ok' ? 'bg-emerald-500' : tone === 'warn' ? 'bg-amber-500' : 'bg-red-500';
+  const pct = Math.min(100, Math.round((count / Math.max(target, 1)) * 100));
+  return (
+    <div className="space-y-0.5">
+      <div className="flex items-center justify-between gap-2 text-[9px]">
+        <span className="truncate text-foreground">{term}</span>
+        <span className="shrink-0 tabular-nums text-muted-foreground">
+          {count}/{target}
+        </span>
+      </div>
+      <div className="h-1 overflow-hidden rounded-full bg-brand-700/80">
+        <div className={`h-full rounded-full ${toneClass}`} style={{ width: `${pct}%` }} />
+      </div>
+    </div>
+  );
+}
+
+function ContentStudioPanel() {
+  return (
+    <div className="flex h-full min-h-0 gap-2">
+      <div className="min-w-0 flex-1 space-y-2">
+        <div className="rounded-lg border border-default/60 bg-brand-900/40 p-2">
+          <p className="text-[9px] font-semibold uppercase tracking-wide text-muted-foreground">Title</p>
+          <p className="mt-0.5 truncate text-[10px] font-medium text-foreground">Technical SEO Audit Guide 2026</p>
+        </div>
+        <div className="rounded-lg border border-default/60 bg-brand-900/40 p-2">
+          <p className="text-[9px] font-semibold uppercase tracking-wide text-muted-foreground">Body</p>
+          <div className="mt-1 space-y-1">
+            <span className="block h-1.5 w-full rounded bg-brand-700/80" />
+            <span className="block h-1.5 w-[92%] rounded bg-brand-700/80" />
+            <span className="block h-1.5 w-[78%] rounded bg-blue-500/40" />
+            <span className="block h-1.5 w-[85%] rounded bg-brand-700/80" />
+          </div>
+        </div>
+      </div>
+      <aside className="w-[38%] shrink-0 rounded-lg border border-default/60 bg-brand-900/50 p-2">
+        <p className="text-[8px] font-semibold uppercase tracking-wide text-muted-foreground">SEO grade</p>
+        <p className="mt-0.5 text-lg font-bold text-emerald-400">B+</p>
+        <p className="mt-2 text-[8px] font-semibold uppercase tracking-wide text-muted-foreground">Terms</p>
+        <div className="mt-1.5 space-y-2">
+          <MockTermRow term="technical seo" count={4} target={3} tone="ok" />
+          <MockTermRow term="site audit" count={1} target={2} tone="warn" />
+          <MockTermRow term="crawl budget" count={0} target={1} tone="bad" />
+        </div>
+      </aside>
+    </div>
+  );
+}
+
+function AiChatPanel() {
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-2">
+      <div className="ml-auto max-w-[88%] rounded-lg rounded-tr-sm border border-blue-500/30 bg-blue-500/15 px-2 py-1.5">
+        <p className="text-[9px] text-foreground">Summarize site health and export a PDF report.</p>
+      </div>
+      <div className="max-w-[92%] rounded-lg rounded-tl-sm border border-default/60 bg-brand-900/50 px-2 py-1.5">
+        <p className="text-[9px] text-muted-foreground">Health score 82 (+4). 12 critical issues remain…</p>
+        <div className="mt-2 grid grid-cols-3 gap-1">
+          <CompactKpi label="Health" value="82" accent />
+          <CompactKpi label="Issues" value="89" delta="-11" />
+          <CompactKpi label="URLs" value="1.2k" />
+        </div>
+      </div>
+      <div className="mt-auto flex flex-wrap gap-1.5">
+        <span className="rounded-full border border-blue-500/30 bg-blue-500/10 px-2 py-0.5 text-[8px] font-medium text-link">
+          Download PDF
+        </span>
+        <span className="rounded-full border border-default/60 px-2 py-0.5 text-[8px] text-muted-foreground">
+          View issues table
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function CompareExportPanel() {
+  return (
+    <>
+      <div className="mb-2.5 grid grid-cols-3 gap-1.5">
+        <CompactKpi label="Health" value="82" delta="+4" accent />
+        <CompactKpi label="Issues" value="89" delta="-11" />
+        <CompactKpi label="URLs" value="1,247" delta="+38" />
+      </div>
+      <div className="mb-2.5 grid grid-cols-2 gap-2">
+        <CompactWidget title="Category deltas">
+          <CompactHorizontalBars
+            items={[
+              { label: 'On-page', value: 8, color: 'rgb(52 211 153 / 0.85)' },
+              { label: 'Perf', value: 5, color: 'rgb(52 211 153 / 0.7)' },
+              { label: 'Security', value: -2, color: 'rgb(248 113 113 / 0.85)' },
+              { label: 'Index', value: 3, color: 'rgb(59 130 246 / 0.7)' },
+            ]}
+          />
+        </CompactWidget>
+        <CompactWidget title="Issue diff">
+          <CompactStackedBar
+            segments={[
+              { label: 'Fixed', value: 24, color: 'rgb(52 211 153 / 0.9)' },
+              { label: 'New', value: 8, color: 'rgb(251 191 36 / 0.9)' },
+              { label: 'Open', value: 57, color: 'rgb(100 116 139 / 0.6)' },
+            ]}
+          />
+        </CompactWidget>
+      </div>
+      <div className="flex flex-wrap gap-1.5">
+        <span className="rounded-lg border border-blue-500/30 bg-blue-500/10 px-2.5 py-1 text-[9px] font-semibold text-link">
+          Export PDF
+        </span>
+        <span className="rounded-lg border border-default/60 px-2.5 py-1 text-[9px] font-semibold text-foreground">
+          Export HTML
+        </span>
+      </div>
+    </>
+  );
+}
+
+function renderPanel(variant: LandingProductMockVariant) {
+  switch (variant) {
+    case 'crawl':
+      return <CrawlPanel />;
+    case 'issues':
+      return <IssuesPanel />;
+    case 'google':
+      return <GooglePanel />;
+    case 'contentStudio':
+      return <ContentStudioPanel />;
+    case 'aiChat':
+      return <AiChatPanel />;
+    case 'compareExport':
+      return <CompareExportPanel />;
+    default:
+      return <OverviewPanel />;
+  }
+}
+
 export default function LandingProductMock({
   variant = 'default',
   className = '',
   elevated = false,
+  compact = false,
+  fillHeight = false,
 }: LandingProductMockProps) {
+  const bodyMinH = fillHeight
+    ? 'min-h-0 flex-1'
+    : compact
+      ? 'min-h-[200px] sm:min-h-[220px]'
+      : 'min-h-[320px] sm:min-h-[360px]';
+
   return (
     <div
       aria-hidden
       className={`overflow-hidden rounded-2xl border border-default bg-brand-800/70 ${
         elevated ? 'shadow-[var(--shadow-elevated)]' : 'shadow-[var(--shadow-elevated)]'
-      } ${className}`.trim()}
+      } ${fillHeight ? 'flex h-full min-h-0 flex-col' : ''} ${className}`.trim()}
     >
-      <div className="flex items-center gap-2 border-b border-default/80 bg-brand-900/90 px-3 py-2.5">
+      <div className={`flex items-center gap-2 border-b border-default/80 bg-brand-900/90 px-3 ${compact ? 'py-1.5' : 'py-2.5'}`}>
         <span className="flex gap-1.5">
-          <span className="h-2.5 w-2.5 rounded-full bg-red-500/80" />
-          <span className="h-2.5 w-2.5 rounded-full bg-amber-500/80" />
-          <span className="h-2.5 w-2.5 rounded-full bg-emerald-500/80" />
+          <span className={`rounded-full bg-red-500/80 ${compact ? 'h-2 w-2' : 'h-2.5 w-2.5'}`} />
+          <span className={`rounded-full bg-amber-500/80 ${compact ? 'h-2 w-2' : 'h-2.5 w-2.5'}`} />
+          <span className={`rounded-full bg-emerald-500/80 ${compact ? 'h-2 w-2' : 'h-2.5 w-2.5'}`} />
         </span>
-        <span className="min-w-0 flex-1 truncate rounded-md border border-default/60 bg-brand-950/60 px-3 py-1 text-center text-[10px] text-muted-foreground">
-          https://site-audit.local/{variant === 'crawl' ? 'links' : variant === 'issues' ? 'issues' : 'overview'}
+        <span className="min-w-0 flex-1 truncate rounded-md border border-default/60 bg-brand-950/60 px-2 py-0.5 text-center text-[9px] text-muted-foreground sm:text-[10px]">
+          https://site-audit.local/{MOCK_PATHS[variant]}
         </span>
       </div>
 
-      <div className="flex min-h-[320px] sm:min-h-[360px]">
-        <aside className="hidden w-28 shrink-0 border-r border-default/60 bg-brand-900/60 p-2.5 sm:block">
-          <div className="mb-3 flex items-center gap-1.5">
-            <span className="h-5 w-5 rounded-md bg-blue-500/20" />
-            <span className="h-2 w-14 rounded bg-brand-700/80" />
+      <div className={`flex ${bodyMinH}`}>
+        <aside className={`hidden shrink-0 border-r border-default/60 bg-brand-900/60 p-2 sm:block ${compact ? 'w-20' : 'w-28 p-2.5'}`}>
+          <div className={`flex items-center gap-1.5 ${compact ? 'mb-2' : 'mb-3'}`}>
+            <span className={`rounded-md bg-blue-500/20 ${compact ? 'h-4 w-4' : 'h-5 w-5'}`} />
+            <span className={`rounded bg-brand-700/80 ${compact ? 'h-1.5 w-10' : 'h-2 w-14'}`} />
           </div>
           <ul className="space-y-0.5">
             {NAV_ITEMS.map(({ label, activeFor }) => {
@@ -303,7 +501,7 @@ export default function LandingProductMock({
               return (
                 <li
                   key={label}
-                  className={`rounded-md px-2 py-1.5 text-[10px] ${
+                  className={`rounded-md px-1.5 py-1 text-[9px] sm:text-[10px] ${
                     active ? 'bg-blue-500/15 font-semibold text-link' : 'text-muted-foreground'
                   }`}
                 >
@@ -314,8 +512,8 @@ export default function LandingProductMock({
           </ul>
         </aside>
 
-        <div className="min-w-0 flex-1 overflow-hidden p-3 sm:p-3.5">
-          {variant === 'crawl' ? <CrawlPanel /> : variant === 'issues' ? <IssuesPanel /> : <OverviewPanel />}
+        <div className={`min-w-0 flex-1 overflow-hidden ${compact ? 'p-2' : 'p-3 sm:p-3.5'}`}>
+          {renderPanel(variant)}
         </div>
       </div>
     </div>
diff --git a/web/src/components/landing/LandingQuickStart.tsx b/web/src/components/landing/LandingQuickStart.tsx
new file mode 100644
index 0000000..659f7bf
--- /dev/null
+++ b/web/src/components/landing/LandingQuickStart.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import { CheckCircle2, ExternalLink } from 'lucide-react';
+import LandingCodeBlock from '@/components/landing/LandingCodeBlock';
+import LandingSectionHeader from '@/components/landing/LandingSectionHeader';
+import {
+  landingContentClass,
+  landingGutterClass,
+  landingSectionSplitClass,
+  landingSplitCopyClass,
+} from '@/components/landing/landingLayout';
+import { useInView } from '@/lib/useInView';
+import { strings } from '@/lib/strings';
+import type { CSSProperties } from 'react';
+
+const vl = strings.views.landing;
+
+const QUICK_START_BULLETS = [
+  vl.quickStartBulletDocker,
+  vl.quickStartBulletLocal,
+  vl.quickStartBulletDocs,
+] as const;
+
+export default function LandingQuickStart() {
+  const { ref: bulletsRef, inView: bulletsInView } = useInView<HTMLUListElement>();
+
+  return (
+    <div className={`${landingContentClass} flex h-full min-h-0 flex-col justify-center gap-6 lg:gap-8`}>
+      <div className={landingSectionSplitClass}>
+        <div className={`${landingSplitCopyClass} ${landingGutterClass} md:pr-6 lg:pr-10`}>
+          <LandingSectionHeader
+            eyebrow={vl.sectionGettingStarted}
+            title={vl.quickStartTitle}
+            subtitle={vl.quickStartSubtitle}
+            centered={false}
+            compact
+          />
+          <ul
+            ref={bulletsRef}
+            className={`mt-5 space-y-2${bulletsInView ? ' stagger' : ''}`}
+          >
+            {QUICK_START_BULLETS.map((bullet, index) => (
+              <li
+                key={bullet}
+                className="flex items-start gap-2 text-sm text-muted-foreground"
+                style={{ '--i': index } as CSSProperties}
+              >
+                <CheckCircle2 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-link" aria-hidden />
+                <span>{bullet}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="flex min-h-0 flex-col justify-center px-5 sm:px-8 md:px-6 lg:px-10">
+          <div className="grid gap-3 lg:grid-cols-2 lg:gap-4">
+            <LandingCodeBlock
+              prominent
+              label={vl.quickStartDockerLabel}
+              command={vl.quickStartDockerCommand}
+            />
+            <div className="flex flex-col gap-3">
+              <LandingCodeBlock
+                prominent
+                label={vl.quickStartLocalLabel}
+                command={vl.quickStartLocalSetup}
+              />
+              <LandingCodeBlock prominent command={vl.quickStartLocalRun} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className={`border-t border-muted/40 pt-5 text-center ${landingGutterClass}`}>
+        <p className="text-xs text-muted-foreground sm:text-sm">{vl.quickStartDocsHint}</p>
+        <a
+          href={vl.githubReadmeUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-link hover:underline sm:text-sm"
+        >
+          {vl.limitationsReadmeLink}
+          <ExternalLink className="h-3 w-3" aria-hidden />
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/landing/LandingSectionHeader.tsx b/web/src/components/landing/LandingSectionHeader.tsx
index 060c706..5bf9eb4 100644
--- a/web/src/components/landing/LandingSectionHeader.tsx
+++ b/web/src/components/landing/LandingSectionHeader.tsx
@@ -6,6 +6,7 @@ interface LandingSectionHeaderProps {
   subtitle?: string;
   action?: ReactNode;
   centered?: boolean;
+  compact?: boolean;
 }
 
 export default function LandingSectionHeader({
@@ -14,21 +15,26 @@ export default function LandingSectionHeader({
   subtitle,
   action,
   centered = true,
+  compact = false,
 }: LandingSectionHeaderProps) {
   const align = centered ? 'text-center' : 'text-left';
+  const spacing = compact ? 'mb-4 gap-2' : 'mb-8 gap-4';
+  const titleClass = compact ? 'text-xl font-bold sm:text-2xl' : 'text-2xl font-bold sm:text-3xl';
+  const subtitleClass = compact ? 'mt-1 text-xs sm:text-sm' : 'mt-2 text-sm sm:text-base';
+
   return (
     <div
-      className={`mb-8 flex flex-col gap-4 ${centered ? 'items-center sm:flex-row sm:items-end sm:justify-between' : 'sm:flex-row sm:items-end sm:justify-between'}`}
+      className={`flex flex-col ${spacing} ${centered ? 'items-center sm:flex-row sm:items-end sm:justify-between' : 'sm:flex-row sm:items-end sm:justify-between'}`}
     >
-      <div className={centered ? 'max-w-2xl sm:text-left' : 'max-w-2xl'}>
+      <div className={centered ? 'w-full min-w-0 sm:text-left' : 'w-full min-w-0'}>
         {eyebrow ? (
-          <p className={`mb-2 text-xs font-medium uppercase tracking-wider text-link ${align} sm:text-left`}>
+          <p className={`mb-1 text-xs font-semibold uppercase tracking-wider text-link ${align} sm:text-left`}>
             {eyebrow}
           </p>
         ) : null}
-        <h2 className={`text-2xl font-bold text-foreground sm:text-3xl ${align} sm:text-left`}>{title}</h2>
+        <h2 className={`${titleClass} text-foreground ${align} sm:text-left`}>{title}</h2>
         {subtitle ? (
-          <p className={`mt-2 text-sm text-muted-foreground sm:text-base ${align} sm:text-left`}>{subtitle}</p>
+          <p className={`${subtitleClass} text-muted-foreground ${align} sm:text-left`}>{subtitle}</p>
         ) : null}
       </div>
       {action ? <div className="shrink-0">{action}</div> : null}
diff --git a/web/src/components/landing/LandingSlideBadge.tsx b/web/src/components/landing/LandingSlideBadge.tsx
new file mode 100644
index 0000000..13502ca
--- /dev/null
+++ b/web/src/components/landing/LandingSlideBadge.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { useLandingDeckRequired } from '@/components/landing/LandingDeckContext';
+
+export interface LandingSlideBadgeProps {
+  label: string;
+}
+
+export default function LandingSlideBadge({ label }: LandingSlideBadgeProps) {
+  const { presenterMode } = useLandingDeckRequired();
+
+  if (!presenterMode || !label) return null;
+
+  return (
+    <span className="landing-slide-badge" aria-hidden>
+      {label}
+    </span>
+  );
+}
diff --git a/web/src/components/landing/LandingStatsStrip.tsx b/web/src/components/landing/LandingStatsStrip.tsx
index ce874d6..84de783 100644
--- a/web/src/components/landing/LandingStatsStrip.tsx
+++ b/web/src/components/landing/LandingStatsStrip.tsx
@@ -1,65 +1,85 @@
 'use client';
 
 import { Bot, ExternalLink, GitBranch, Shield, Sparkles } from 'lucide-react';
+import LandingSectionHeader from '@/components/landing/LandingSectionHeader';
+import {
+  landingContentClass,
+  landingGutterClass,
+  landingSectionSplitClass,
+  landingSplitCopyClass,
+} from '@/components/landing/landingLayout';
 import { strings } from '@/lib/strings';
 
 const vl = strings.views.landing;
 
 const STATS = [
-  { icon: Shield, label: vl.stat1Label, value: vl.stat1Value },
-  { icon: GitBranch, label: vl.stat2Label, value: vl.stat2Value },
-  { icon: Sparkles, label: vl.stat3Label, value: vl.stat3Value },
-  { icon: Bot, label: vl.stat4Label, value: vl.stat4Value },
+  { icon: Shield, label: vl.stat1Label, value: vl.stat1Value, hint: vl.stat1Hint },
+  { icon: GitBranch, label: vl.stat2Label, value: vl.stat2Value, hint: vl.stat2Hint },
+  { icon: Sparkles, label: vl.stat3Label, value: vl.stat3Value, hint: vl.stat3Hint },
+  { icon: Bot, label: vl.stat4Label, value: vl.stat4Value, hint: vl.stat4Hint },
 ] as const;
 
 const STACK = [vl.trustStackDocker, vl.trustStackPostgres, vl.trustStackNext, vl.trustLicense] as const;
 
 export default function LandingStatsStrip() {
   return (
-    <section className="border-y border-muted/60 bg-brand-800/25 py-10 sm:py-12">
-      <div className="mx-auto max-w-6xl px-[var(--spacing-page-x)] sm:px-6 lg:px-8">
-        <p className="mb-6 text-center text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-          {vl.statsTitle}
-        </p>
-        <div className="grid grid-cols-2 gap-3 lg:grid-cols-4 lg:gap-4">
-          {STATS.map(({ icon: Icon, label, value }) => (
-            <div
-              key={label}
-              className="rounded-2xl border border-default bg-brand-800/50 px-4 py-4 text-center transition-colors hover:border-blue-500/25 sm:px-5 sm:py-5"
-            >
-              <span className="mx-auto mb-2 inline-flex h-9 w-9 items-center justify-center rounded-lg bg-blue-500/10">
-                <Icon className="h-4 w-4 text-link" aria-hidden />
-              </span>
-              <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground sm:text-xs">
-                {label}
-              </p>
-              <p className="mt-1 text-base font-bold leading-snug text-foreground sm:text-lg">{value}</p>
-            </div>
-          ))}
+    <div className={`${landingContentClass} flex h-full min-h-0 flex-col justify-center gap-6 lg:gap-8`}>
+      <div className={landingSectionSplitClass}>
+        <div className={`${landingSplitCopyClass} ${landingGutterClass} md:pr-6 lg:pr-10`}>
+          <LandingSectionHeader
+            eyebrow={vl.statsEyebrow}
+            title={vl.statsTitle}
+            subtitle={vl.statsSubtitle}
+            centered={false}
+            compact
+          />
         </div>
-        <div className="mt-8 flex flex-col items-center gap-3 border-t border-muted/50 pt-6 sm:flex-row sm:justify-between">
-          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{vl.trustTitle}</p>
-          <div className="flex flex-wrap items-center justify-center gap-2">
-            {STACK.map((item) => (
-              <span
-                key={item}
-                className="rounded-full border border-default bg-brand-800/50 px-3 py-1 text-xs font-medium text-foreground"
+
+        <div className={`flex min-h-0 flex-col justify-center px-5 sm:px-8 md:px-6 lg:px-10`}>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            {STATS.map(({ icon: Icon, label, value, hint }) => (
+              <article
+                key={label}
+                className="flex min-h-[7.5rem] flex-col rounded-xl border border-default/60 px-4 py-4 transition-colors hover:border-blue-500/25 sm:min-h-[8.25rem] sm:px-5 sm:py-5"
               >
-                {item}
-              </span>
+                <span className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-blue-500/20 bg-blue-500/10 text-link">
+                  <Icon className="h-4 w-4" aria-hidden />
+                </span>
+                <p className="mt-3 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground sm:text-xs">
+                  {label}
+                </p>
+                <p className="mt-0.5 text-base font-bold leading-snug text-foreground sm:text-lg">{value}</p>
+                <p className="mt-1.5 line-clamp-2 text-xs leading-relaxed text-muted-foreground sm:text-sm">{hint}</p>
+              </article>
             ))}
-            <a
-              href={vl.githubRepoUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 rounded-full border border-blue-500/30 bg-blue-500/10 px-3 py-1 text-xs font-medium text-link transition-colors hover:bg-blue-500/20"
-            >
-              {vl.trustGithub}
-              <ExternalLink className="h-3 w-3" aria-hidden />
-            </a>
           </div>
         </div>
       </div>
-    </section>
+
+      <div
+        className={`flex flex-col items-center gap-3 border-t border-muted/40 pt-5 sm:flex-row sm:justify-between ${landingGutterClass}`}
+      >
+        <p className="text-xs font-semibold uppercase tracking-wider text-link">{vl.trustTitle}</p>
+        <div className="flex flex-wrap items-center justify-center gap-2">
+          {STACK.map((item) => (
+            <span
+              key={item}
+              className="rounded-full border border-default/60 px-3 py-1 text-xs font-medium text-foreground"
+            >
+              {item}
+            </span>
+          ))}
+          <a
+            href={vl.githubRepoUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1.5 rounded-full border border-blue-500/30 bg-blue-500/10 px-3 py-1 text-xs font-medium text-link transition-colors hover:bg-blue-500/20"
+          >
+            {vl.trustGithub}
+            <ExternalLink className="h-3.5 w-3.5" aria-hidden />
+          </a>
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/components/landing/LandingUseCases.tsx b/web/src/components/landing/LandingUseCases.tsx
index d40a3e9..4d7b0b7 100644
--- a/web/src/components/landing/LandingUseCases.tsx
+++ b/web/src/components/landing/LandingUseCases.tsx
@@ -2,6 +2,7 @@
 
 import { Briefcase, Building2, Code2 } from 'lucide-react';
 import LandingSectionHeader from '@/components/landing/LandingSectionHeader';
+import { landingContentClass } from '@/components/landing/landingLayout';
 import { strings } from '@/lib/strings';
 
 const vl = strings.views.landing;
@@ -26,28 +27,29 @@ const USE_CASES = [
 
 export default function LandingUseCases() {
   return (
-    <section className="landing-section-alt border-y border-muted/60 py-16 sm:py-20">
-      <div className="mx-auto max-w-6xl px-[var(--spacing-page-x)] sm:px-6 lg:px-8">
-        <LandingSectionHeader
-          eyebrow={vl.useCasesEyebrow}
-          title={vl.useCasesTitle}
-          subtitle={vl.useCasesSubtitle}
-        />
-        <div className="grid gap-4 md:grid-cols-3 md:gap-5">
-          {USE_CASES.map(({ icon: Icon, title, description }) => (
-            <article
-              key={title}
-              className="rounded-2xl border border-default bg-brand-800/50 p-5 transition-all hover:-translate-y-0.5 hover:border-blue-500/30 hover:shadow-[var(--shadow-elevated)]"
-            >
-              <span className="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-blue-500/20 bg-blue-500/10">
-                <Icon className="h-5 w-5 text-link" aria-hidden />
-              </span>
-              <h3 className="mt-4 text-base font-semibold text-foreground">{title}</h3>
-              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{description}</p>
-            </article>
-          ))}
-        </div>
+    <div className={landingContentClass}>
+      <LandingSectionHeader
+        eyebrow={vl.useCasesEyebrow}
+        title={vl.useCasesTitle}
+        subtitle={vl.useCasesSubtitle}
+        compact
+      />
+      <div className="grid gap-3 md:grid-cols-3">
+        {USE_CASES.map(({ icon: Icon, title, description }) => (
+          <article
+            key={title}
+            className="rounded-xl border border-default/60 p-3.5 transition-colors hover:border-blue-500/25 sm:p-4"
+          >
+            <span className="inline-flex h-8 w-8 items-center justify-center text-link">
+              <Icon className="h-4 w-4" aria-hidden />
+            </span>
+            <h3 className="mt-2 text-sm font-semibold text-foreground">{title}</h3>
+            <p className="mt-1 line-clamp-3 text-xs leading-relaxed text-muted-foreground sm:text-sm">
+              {description}
+            </p>
+          </article>
+        ))}
       </div>
-    </section>
+    </div>
   );
 }
diff --git a/web/src/components/landing/landingLayout.test.ts b/web/src/components/landing/landingLayout.test.ts
new file mode 100644
index 0000000..e0d1700
--- /dev/null
+++ b/web/src/components/landing/landingLayout.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import {
+  LANDING_DECK_SECTION_ORDER,
+  LANDING_SECTION_IDS,
+} from '@/components/landing/landingLayout';
+
+describe('landingLayout deck order', () => {
+  it('includes all spotlight section ids', () => {
+    expect(LANDING_DECK_SECTION_ORDER).toContain(LANDING_SECTION_IDS.spotlightGoogle);
+    expect(LANDING_DECK_SECTION_ORDER).toContain(LANDING_SECTION_IDS.spotlightContentStudio);
+    expect(LANDING_DECK_SECTION_ORDER).toContain(LANDING_SECTION_IDS.spotlightAiChat);
+    expect(LANDING_DECK_SECTION_ORDER).toContain(LANDING_SECTION_IDS.spotlightCompareExport);
+  });
+
+  it('does not include removed google-setup slide', () => {
+    expect(LANDING_DECK_SECTION_ORDER).not.toContain('google-setup');
+  });
+
+  it('orders setup before product spotlights', () => {
+    const quickStart = LANDING_DECK_SECTION_ORDER.indexOf(LANDING_SECTION_IDS.quickStart);
+    const crawl = LANDING_DECK_SECTION_ORDER.indexOf(LANDING_SECTION_IDS.spotlights);
+    const google = LANDING_DECK_SECTION_ORDER.indexOf(LANDING_SECTION_IDS.spotlightGoogle);
+    expect(quickStart).toBeGreaterThan(-1);
+    expect(crawl).toBeGreaterThan(quickStart);
+    expect(google).toBeGreaterThan(crawl);
+  });
+
+  it('has 15 slides including footer', () => {
+    expect(LANDING_DECK_SECTION_ORDER).toHaveLength(15);
+  });
+});
diff --git a/web/src/components/landing/landingLayout.ts b/web/src/components/landing/landingLayout.ts
new file mode 100644
index 0000000..63ee9c2
--- /dev/null
+++ b/web/src/components/landing/landingLayout.ts
@@ -0,0 +1,55 @@
+/** Shared layout classes for full-viewport landing sections (minus measured header). */
+export const landingSectionClass = 'landing-section relative';
+export const landingSectionBodyClass = 'landing-section-body';
+export const landingSectionBodyCenteredClass =
+  'landing-section-body landing-section-body-centered';
+export const landingSectionSplitClass = 'landing-section-body landing-section-split';
+export const landingSplitCopyClass = 'landing-split-copy';
+export const landingSplitVisualClass = 'landing-split-visual';
+export const landingSplitMockClass = 'landing-split-mock landing-mock-glow landing-float rounded-2xl';
+export const landingContentClass = 'w-full min-w-0';
+/** Vertical padding only — sections span the full viewport width. */
+export const landingSectionPad = 'pb-11 pt-4 sm:pb-12 sm:pt-5';
+/** Inner content gutters (not applied on full-bleed split layouts like hero). */
+export const landingGutterClass = 'px-5 sm:px-8 lg:px-10 xl:px-12';
+
+/** Anchor ids for scroll cues between landing sections (top to bottom). */
+export const LANDING_SECTION_IDS = {
+  hero: 'hero',
+  stats: 'stats',
+  getStarted: 'get-started',
+  quickStart: 'quick-start',
+  spotlights: 'spotlights',
+  spotlightIssues: 'spotlight-issues',
+  spotlightGoogle: 'spotlight-google',
+  spotlightContentStudio: 'spotlight-content-studio',
+  spotlightAiChat: 'spotlight-ai-chat',
+  spotlightCompareExport: 'spotlight-compare-export',
+  useCases: 'use-cases',
+  features: 'features',
+  limitations: 'limitations',
+  finalCta: 'final-cta',
+  siteFooter: 'site-footer',
+} as const;
+
+/** Top-to-bottom slide order for keyboard nav, progress, and auto-advance. */
+export const LANDING_DECK_SECTION_ORDER: readonly string[] = [
+  LANDING_SECTION_IDS.hero,
+  LANDING_SECTION_IDS.stats,
+  LANDING_SECTION_IDS.getStarted,
+  LANDING_SECTION_IDS.quickStart,
+  LANDING_SECTION_IDS.spotlights,
+  LANDING_SECTION_IDS.spotlightIssues,
+  LANDING_SECTION_IDS.spotlightGoogle,
+  LANDING_SECTION_IDS.spotlightContentStudio,
+  LANDING_SECTION_IDS.spotlightAiChat,
+  LANDING_SECTION_IDS.spotlightCompareExport,
+  LANDING_SECTION_IDS.useCases,
+  LANDING_SECTION_IDS.features,
+  LANDING_SECTION_IDS.limitations,
+  LANDING_SECTION_IDS.finalCta,
+  LANDING_SECTION_IDS.siteFooter,
+] as const;
+
+export const LANDING_DECK_AUTO_ADVANCE_INTERVALS_MS = [8000, 12000, 15000] as const;
+export type LandingDeckAutoAdvanceMs = (typeof LANDING_DECK_AUTO_ADVANCE_INTERVALS_MS)[number];
diff --git a/web/src/hooks/useLandingDeck.test.ts b/web/src/hooks/useLandingDeck.test.ts
new file mode 100644
index 0000000..faebbf1
--- /dev/null
+++ b/web/src/hooks/useLandingDeck.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import {
+  clampSlideIndex,
+  nextSlideIndex,
+  prevSlideIndex,
+  resolveSlideId,
+} from '@/hooks/useLandingDeck';
+
+const SECTION_IDS = ['hero', 'stats', 'features'] as const;
+
+describe('useLandingDeck helpers', () => {
+  it('clampSlideIndex bounds index to valid range', () => {
+    expect(clampSlideIndex(-1, 3)).toBe(0);
+    expect(clampSlideIndex(1, 3)).toBe(1);
+    expect(clampSlideIndex(9, 3)).toBe(2);
+    expect(clampSlideIndex(0, 0)).toBe(0);
+  });
+
+  it('resolveSlideId maps index and id targets', () => {
+    expect(resolveSlideId(SECTION_IDS, 1)).toBe('stats');
+    expect(resolveSlideId(SECTION_IDS, 'features')).toBe('features');
+    expect(resolveSlideId(SECTION_IDS, 'missing')).toBeNull();
+    expect(resolveSlideId([], 0)).toBeNull();
+  });
+
+  it('nextSlideIndex and prevSlideIndex step within deck bounds', () => {
+    expect(nextSlideIndex(0, 3)).toBe(1);
+    expect(nextSlideIndex(2, 3)).toBe(2);
+    expect(prevSlideIndex(2, 3)).toBe(1);
+    expect(prevSlideIndex(0, 3)).toBe(0);
+  });
+});
diff --git a/web/src/hooks/useLandingDeck.ts b/web/src/hooks/useLandingDeck.ts
new file mode 100644
index 0000000..df15244
--- /dev/null
+++ b/web/src/hooks/useLandingDeck.ts
@@ -0,0 +1,293 @@
+'use client';
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  LANDING_DECK_AUTO_ADVANCE_INTERVALS_MS,
+  type LandingDeckAutoAdvanceMs,
+} from '@/components/landing/landingLayout';
+
+const PRESENTER_STORAGE_KEY = 'landing-presenter-mode';
+
+export function clampSlideIndex(index: number, total: number): number {
+  if (total <= 0) return 0;
+  return Math.max(0, Math.min(index, total - 1));
+}
+
+export function resolveSlideId(
+  sectionIds: readonly string[],
+  target: string | number,
+): string | null {
+  if (sectionIds.length === 0) return null;
+  if (typeof target === 'number') {
+    const index = clampSlideIndex(target, sectionIds.length);
+    return sectionIds[index] ?? null;
+  }
+  return sectionIds.includes(target) ? target : null;
+}
+
+export function nextSlideIndex(activeIndex: number, total: number): number {
+  return clampSlideIndex(activeIndex + 1, total);
+}
+
+export function prevSlideIndex(activeIndex: number, total: number): number {
+  return clampSlideIndex(activeIndex - 1, total);
+}
+
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;
+  return target.isContentEditable;
+}
+
+function readPresenterFromUrl(): boolean {
+  if (typeof window === 'undefined') return false;
+  return new URLSearchParams(window.location.search).get('present') === '1';
+}
+
+function readPresenterFromSession(): boolean {
+  if (typeof window === 'undefined') return false;
+  try {
+    return sessionStorage.getItem(PRESENTER_STORAGE_KEY) === '1';
+  } catch {
+    return false;
+  }
+}
+
+function persistPresenterMode(enabled: boolean): void {
+  try {
+    if (enabled) {
+      sessionStorage.setItem(PRESENTER_STORAGE_KEY, '1');
+    } else {
+      sessionStorage.removeItem(PRESENTER_STORAGE_KEY);
+    }
+  } catch {
+    /* ignore quota / private mode */
+  }
+}
+
+function syncHashForSlide(sectionIds: readonly string[], id: string): void {
+  if (id !== sectionIds[0]) {
+    window.history.pushState(null, '', `#${id}`);
+  } else {
+    window.history.pushState(null, '', window.location.pathname + window.location.search);
+  }
+}
+
+export interface UseLandingDeckOptions {
+  sectionIds: readonly string[];
+}
+
+export interface UseLandingDeckResult {
+  activeIndex: number;
+  activeId: string | null;
+  total: number;
+  slideTransition: boolean;
+  goToSlide: (target: string | number, behavior?: ScrollBehavior) => void;
+  goNext: () => void;
+  goPrev: () => void;
+  presenterMode: boolean;
+  setPresenterMode: (enabled: boolean) => void;
+  togglePresenterMode: () => void;
+  autoAdvance: boolean;
+  setAutoAdvance: (enabled: boolean) => void;
+  autoAdvanceMs: LandingDeckAutoAdvanceMs;
+  setAutoAdvanceMs: (ms: LandingDeckAutoAdvanceMs) => void;
+}
+
+export function useLandingDeck({ sectionIds }: UseLandingDeckOptions): UseLandingDeckResult {
+  const total = sectionIds.length;
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [slideTransition, setSlideTransition] = useState(false);
+  const [presenterMode, setPresenterModeState] = useState(false);
+  const [autoAdvance, setAutoAdvance] = useState(false);
+  const [autoAdvanceMs, setAutoAdvanceMs] = useState<LandingDeckAutoAdvanceMs>(
+    LANDING_DECK_AUTO_ADVANCE_INTERVALS_MS[0],
+  );
+  const [reduceMotion, setReduceMotion] = useState(false);
+  const activeIndexRef = useRef(0);
+  const hashSyncedRef = useRef(false);
+
+  useEffect(() => {
+    activeIndexRef.current = activeIndex;
+  }, [activeIndex]);
+
+  useEffect(() => {
+    const initial = readPresenterFromUrl() || readPresenterFromSession();
+    setPresenterModeState(initial);
+    if (initial) setAutoAdvance(true);
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const sync = () => setReduceMotion(mq.matches);
+    sync();
+    mq.addEventListener('change', sync);
+    return () => mq.removeEventListener('change', sync);
+  }, []);
+
+  useEffect(() => {
+    if (hashSyncedRef.current) return;
+    hashSyncedRef.current = true;
+    const hash = window.location.hash.replace(/^#/, '');
+    if (!hash) {
+      setSlideTransition(!reduceMotion);
+      return;
+    }
+    const id = resolveSlideId(sectionIds, hash);
+    if (!id) {
+      setSlideTransition(!reduceMotion);
+      return;
+    }
+    const index = sectionIds.indexOf(id);
+    if (index >= 0) {
+      activeIndexRef.current = index;
+      setActiveIndex(index);
+    }
+    setSlideTransition(!reduceMotion);
+  }, [reduceMotion, sectionIds]);
+
+  const setPresenterMode = useCallback((enabled: boolean) => {
+    setPresenterModeState(enabled);
+    persistPresenterMode(enabled);
+    if (!enabled) setAutoAdvance(false);
+  }, []);
+
+  const togglePresenterMode = useCallback(() => {
+    setPresenterModeState((prev) => {
+      const next = !prev;
+      persistPresenterMode(next);
+      if (!next) setAutoAdvance(false);
+      return next;
+    });
+  }, []);
+
+  const goToSlide = useCallback(
+    (target: string | number, behavior: ScrollBehavior = 'smooth') => {
+      const id = resolveSlideId(sectionIds, target);
+      if (!id) return;
+
+      const index = sectionIds.indexOf(id);
+      if (index < 0) return;
+
+      const animate = behavior !== 'auto' && !reduceMotion;
+      setSlideTransition(animate);
+      setActiveIndex(index);
+      activeIndexRef.current = index;
+      syncHashForSlide(sectionIds, id);
+    },
+    [reduceMotion, sectionIds],
+  );
+
+  const goNext = useCallback(() => {
+    goToSlide(nextSlideIndex(activeIndexRef.current, total));
+  }, [goToSlide, total]);
+
+  const goPrev = useCallback(() => {
+    goToSlide(prevSlideIndex(activeIndexRef.current, total));
+  }, [goToSlide, total]);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (isEditableTarget(event.target)) return;
+
+      switch (event.key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+        case 'PageDown':
+          event.preventDefault();
+          goNext();
+          break;
+        case ' ':
+          event.preventDefault();
+          goNext();
+          break;
+        case 'ArrowLeft':
+        case 'ArrowUp':
+        case 'PageUp':
+          event.preventDefault();
+          goPrev();
+          break;
+        case 'Home':
+          event.preventDefault();
+          goToSlide(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          goToSlide(total - 1);
+          break;
+        case 'p':
+        case 'P':
+          event.preventDefault();
+          togglePresenterMode();
+          break;
+        case 'f':
+        case 'F':
+          if (!presenterMode) return;
+          event.preventDefault();
+          if (document.fullscreenElement) {
+            void document.exitFullscreen();
+          } else {
+            void document.documentElement.requestFullscreen();
+          }
+          break;
+        default:
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [goNext, goPrev, goToSlide, presenterMode, togglePresenterMode, total]);
+
+  useEffect(() => {
+    const onHashChange = () => {
+      const hash = window.location.hash.replace(/^#/, '');
+      if (!hash) {
+        goToSlide(0, 'auto');
+        return;
+      }
+      goToSlide(hash, 'smooth');
+    };
+
+    window.addEventListener('hashchange', onHashChange);
+    return () => window.removeEventListener('hashchange', onHashChange);
+  }, [goToSlide]);
+
+  useEffect(() => {
+    if (!presenterMode || !autoAdvance || reduceMotion) return;
+    if (activeIndex >= total - 1) return;
+
+    const timer = window.setInterval(() => {
+      if (activeIndexRef.current >= total - 1) return;
+      goNext();
+    }, autoAdvanceMs);
+
+    return () => window.clearInterval(timer);
+  }, [activeIndex, autoAdvance, autoAdvanceMs, goNext, presenterMode, reduceMotion, total]);
+
+  const activeId = sectionIds[activeIndex] ?? null;
+
+  return {
+    activeIndex,
+    activeId,
+    total,
+    slideTransition,
+    goToSlide,
+    goNext,
+    goPrev,
+    presenterMode,
+    setPresenterMode,
+    togglePresenterMode,
+    autoAdvance,
+    setAutoAdvance,
+    autoAdvanceMs,
+    setAutoAdvanceMs,
+  };
+}
diff --git a/web/src/strings.json b/web/src/strings.json
index be74a9a..cac5eb6 100644
--- a/web/src/strings.json
+++ b/web/src/strings.json
@@ -668,6 +668,7 @@
   },
   "app": {
     "loading": "Loading…",
+    "loadingSubtitle": "Preparing your workspace",
     "failedTitle": "Failed to load report",
     "failedHint": "Open Run audit (button bottom-right) and run a full site audit for this URL. If loading still fails, check that the database service is running.",
     "defaultSiteName": "Site",
@@ -1461,33 +1462,48 @@
       "metaDescription": "Crawl your sites, find technical SEO issues, connect Search Console and Analytics, and export client reports — free and self-hosted.",
       "navFeatures": "Features",
       "navQuickStart": "Quick start",
-      "navGoogleSetup": "Google setup",
+      "navGoogleSetup": "Integrations",
+      "navIntegrations": "Integrations",
       "navGithub": "GitHub",
       "navOpenApp": "Dashboard",
       "navRunAudit": "Run audit",
+      "deckSlideOf": "Slide {current} of {total}",
+      "deckNext": "Next",
+      "deckPrev": "Previous",
+      "deckPresent": "Present",
+      "deckExitPresent": "Exit presenter",
+      "deckAutoAdvance": "Auto-advance",
+      "deckAutoAdvanceOff": "Pause auto-advance",
+      "deckShortcutsHint": "← → or Space to navigate · P presenter · F fullscreen",
       "heroEyebrow": "Open source · Self-hosted",
       "heroTitle": "Technical SEO audits you control",
-      "heroSubtitle": "Crawl every URL, prioritize real issues, connect Search Console and Analytics, and export client reports — on infrastructure you own.",
+      "heroSubtitle": "Tired of expensive subscriptions, per-seat pricing, and crawl data on someone else's servers? Run crawl, issues, Lighthouse, Search Console, content writing, and AI on infrastructure you control.",
       "heroBullets": [
-        "No subscription tiers — MIT licensed and self-hosted",
-        "Your crawl data and reports stay on your infrastructure",
-        "Export HTML and PDF reports ready for clients"
+        "Open-source Screaming Frog alternative — MIT licensed, self-hosted",
+        "Your crawl data and reports stay in your PostgreSQL database",
+        "Export HTML and PDF client reports — no gated exports"
       ],
-      "heroProofNoSubscription": "No subscription tiers",
+      "heroProofNoSubscription": "FREE · SELF-HOSTED",
       "heroProofLocalData": "Your data stays local",
       "ctaDashboard": "Open dashboard",
       "ctaRunAudit": "Run your first audit",
       "ctaGoogleGuide": "Google setup guide",
       "scrollHint": "New here? See how to get started.",
+      "statsEyebrow": "Self-hosted",
       "statsTitle": "Built for teams who own their data",
+      "statsSubtitle": "Full technical SEO workflows without vendor lock-in — crawl, integrate, write, and export from a stack you own.",
       "stat1Label": "License",
       "stat1Value": "MIT · Open source",
+      "stat1Hint": "Fork, modify, and deploy without restrictions",
       "stat2Label": "Integrations",
       "stat2Value": "GSC · GA4 · Bing",
+      "stat2Hint": "Connect Search Console, Analytics, and Bing Webmaster",
       "stat3Label": "Audit depth",
       "stat3Value": "Crawl · Lighthouse · Issues",
+      "stat3Hint": "Full-site crawl, performance scores, and issue triage",
       "stat4Label": "AI workflow",
-      "stat4Value": "Chat · MCP tools",
+      "stat4Value": "340 MCP tools",
+      "stat4Hint": "AI chat plus programmatic access from Cursor and Claude Desktop",
       "trustTitle": "Runs on your stack",
       "trustGithub": "View on GitHub",
       "trustLicense": "MIT License",
@@ -1514,6 +1530,77 @@
       "spotlightsSectionSubtitle": "Familiar audit workflows — crawl maps, issue boards, and performance scores — in a UI built for daily SEO work.",
       "spotlight1Cta": "Run your first crawl",
       "spotlight2Cta": "Open the dashboard",
+      "spotlight3Eyebrow": "Google integrations",
+      "spotlight3Title": "Search Performance and traffic from your credentials",
+      "spotlight3Description": "Connect Google Search Console and GA4 with OAuth — nothing is fabricated when Google isn't connected. See clicks, impressions, sessions, and keyword blends from your own data.",
+      "spotlight3Bullets": [
+        "Search Performance: clicks, impressions, and top queries from GSC",
+        "GA4 sessions and users per property",
+        "Keywords Explorer blends on-site frequency with Search Console data"
+      ],
+      "spotlight3Cta": "Open Integrations",
+      "spotlight3CtaHref": "/pipeline",
+      "spotlight3SecondaryCta": "Full setup guide",
+      "spotlight3SecondaryCtaHref": "https://github.com/codefrydev/WebsiteProfiling#google-search-console--analytics",
+      "spotlight4Eyebrow": "Content Studio",
+      "spotlight4Title": "Write with live SEO scoring as you type",
+      "spotlight4Description": "Draft and optimize content powered by Search Console data and on-page heuristics from your audit. The Guided Draft Wizard walks you through intent, outline, and tone.",
+      "spotlight4Bullets": [
+        "Live SEO grade with recommended terms and coverage gaps",
+        "Terms highlight in the editor so you know what to fix",
+        "Save drafts per property — title, meta, rich text or Markdown"
+      ],
+      "spotlight4Cta": "Open Content Studio",
+      "spotlight4CtaHref": "/write",
+      "spotlight5Eyebrow": "AI Chat",
+      "spotlight5Title": "Ask your audit in plain English",
+      "spotlight5Description": "The assistant calls real tools against your crawl data — charts, tables, and download buttons appear in chat. It doesn't invent URLs or scores.",
+      "spotlight5Bullets": [
+        "\"What are my top critical issues?\" — real issue tables",
+        "\"Export a PDF report\" — download buttons in the thread",
+        "340 MCP tools for Cursor and Claude Desktop — same data, programmatic"
+      ],
+      "spotlight5Cta": "Open AI Chat",
+      "spotlight5CtaHref": "/chat",
+      "spotlight6Eyebrow": "Compare & export",
+      "spotlight6Title": "Track fixes and ship client reports",
+      "spotlight6Description": "Run a second crawl after fixes? Compare audits shows what improved and what regressed. Export delivers HTML or PDF — no upgrade tiers, no gated exports.",
+      "spotlight6Bullets": [
+        "Category deltas and issue diffs between audit runs",
+        "Google metric changes when Search Console is connected",
+        "HTML and PDF exports ready for agencies and clients"
+      ],
+      "spotlight6Cta": "Compare audit runs",
+      "spotlight6CtaHref": "/compare",
+      "deckBadges": {
+        "hero": "MIT · Open source",
+        "stats": "Self-hosted · PostgreSQL",
+        "get-started": "4 steps to first audit",
+        "quick-start": "Docker · local dev",
+        "spotlights": "Site crawl",
+        "spotlight-issues": "Lighthouse · Issues",
+        "spotlight-google": "GSC · GA4",
+        "spotlight-content-studio": "Live SEO scoring",
+        "spotlight-ai-chat": "340 MCP tools",
+        "spotlight-compare-export": "HTML · PDF export",
+        "limitations": "Honest scope"
+      },
+      "deckNotes": {
+        "hero": "0:00 — Hook: expensive subscriptions, per-seat pricing, data on vendor servers.",
+        "stats": "0:15 — What it is: open-source alternative, MIT, your PostgreSQL database.",
+        "get-started": "0:45 — Quick setup: clone, Docker or local-run, add a property.",
+        "quick-start": "0:45 — Install commands — point to README, don't dwell.",
+        "spotlights": "1:30 — Run audit: crawl pipeline, URL map, site structure.",
+        "spotlight-issues": "2:30 — Overview + issues: health score, severity board, drill into 1–2 issues.",
+        "spotlight-google": "6:00 — Google: GSC queries, GA4 traffic, honest empty states.",
+        "spotlight-content-studio": "7:00 — Content Studio: Guided Draft Wizard, live score, term highlights.",
+        "spotlight-ai-chat": "8:15 — AI Chat: one strong prompt, chart + export in thread.",
+        "spotlight-compare-export": "9:00 — Compare two runs + PDF export for agencies.",
+        "use-cases": "Agencies, in-house teams, developers — portfolio without per-seat fees.",
+        "features": "5:15 — Performance, on-page, image SEO, accessibility — same crawl.",
+        "limitations": "9:45 — Honest scope: not Ahrefs, no live backlink index.",
+        "final-cta": "9:45 — CTA: star on GitHub, run your first crawl today."
+      },
       "useCasesEyebrow": "Who it's for",
       "useCasesTitle": "One platform, different workflows",
       "useCasesSubtitle": "Whether you audit client sites or your own properties, Site Audit fits how technical SEO teams actually work.",
@@ -1525,8 +1612,10 @@
       "useCase3Description": "Run with Docker, store data in PostgreSQL, and extend workflows with MCP-compatible AI tools in Cursor or Claude Desktop.",
       "copyCommand": "Copy",
       "copyCommandDone": "Copied",
+      "limitationsEyebrow": "Transparency",
       "limitationsTitle": "Honest scope",
-      "limitationsSubtitle": "Site Audit focuses on transparent, self-hosted technical SEO — not every paid SaaS data product.",
+      "limitationsSubtitle": "Site Audit focuses on transparent, self-hosted technical SEO. We spell out what you get — and what you should pair with other tools.",
+      "limitationsContext": "A self-hosted crawl and audit platform — pair with your existing stack for gaps like backlink indexes and rank tracking.",
       "limitationsIsTitle": "What it is",
       "limitationsIsItems": [
         "Self-hosted crawl and technical audit platform",
@@ -1542,8 +1631,15 @@
         "Not a substitute for verified Google property access"
       ],
       "limitationsReadmeLink": "Read full scope in README",
+      "finalCtaEyebrow": "Ready to go",
       "finalCtaTitle": "Start your first audit today",
-      "finalCtaSubtitle": "Install with Docker or local dev, then crawl your first property in minutes.",
+      "finalCtaSubtitle": "Install with Docker or local dev, crawl your first property, and review issues — the full workflow is ready when you are.",
+      "finalCtaBullets": [
+        "Spin up with Docker Compose or ./local-run",
+        "Run a crawl from the pipeline in minutes",
+        "Compare runs, triage issues, and export reports for clients"
+      ],
+      "finalCtaInstallLink": "View install commands",
       "footerProductTitle": "Product",
       "footerDocsTitle": "Documentation",
       "footerCommunityTitle": "Community",
@@ -1559,15 +1655,18 @@
       "githubIssuesUrl": "https://github.com/codefrydev/WebsiteProfiling/issues",
       "githubLicenseUrl": "https://github.com/codefrydev/WebsiteProfiling/blob/master/LICENSE",
       "githubReadmeUrl": "https://github.com/codefrydev/WebsiteProfiling#scope-and-limitations",
-      "pathTitle": "Get started",
+      "pathEyebrow": "Onboarding",
+      "pathTitle": "Get started in four steps",
+      "pathSubtitle": "Install locally, run your first crawl, connect Google, and review issues — each section below walks you through it.",
       "pathStepInstall": "Install",
-      "pathStepInstallHint": "Docker or local dev",
+      "pathStepInstallHint": "Docker image or local dev setup — ready in minutes",
       "pathStepCrawl": "Crawl",
-      "pathStepCrawlHint": "Run your first audit",
+      "pathStepCrawlHint": "Spider or sitemap discovery with static or JS rendering",
       "pathStepGoogle": "Connect Google",
-      "pathStepGoogleHint": "GSC + GA4 OAuth",
+      "pathStepGoogleHint": "OAuth for Search Console and Analytics data",
       "pathStepReport": "Review",
-      "pathStepReportHint": "Issues & exports",
+      "pathStepReportHint": "Issue boards, Lighthouse scores, and exports",
+      "pathCtaLabel": "Jump to install commands",
       "sectionGettingStarted": "Getting started",
       "sectionCapabilities": "Capabilities",
       "sectionSetupGuide": "Setup guide",
@@ -1600,7 +1699,10 @@
       "step3Description": "Open your property from the dashboard, explore issues, and export HTML or PDF for clients.",
       "step3Link": "Open dashboard",
       "quickStartTitle": "Quick start",
-      "quickStartSubtitle": "Get running in minutes with Docker or local development.",
+      "quickStartSubtitle": "Spin up the full stack with Docker or run locally for development — the dashboard is ready as soon as the services are up.",
+      "quickStartBulletDocker": "Docker Compose — single command, production-like stack",
+      "quickStartBulletLocal": "Local dev — setup once, then ./local-run each session",
+      "quickStartBulletDocs": "CONTRIBUTING.md and docs/MCP.md for AI chat setup",
       "quickStartDockerLabel": "Docker",
       "quickStartDockerCommand": "docker compose up --build",
       "quickStartLocalLabel": "Local development",
diff --git a/web/src/views/Landing.tsx b/web/src/views/Landing.tsx
index 287162c..5d0e9fd 100644
--- a/web/src/views/Landing.tsx
+++ b/web/src/views/Landing.tsx
@@ -8,19 +8,19 @@ import {
   MessageSquare,
   TrendingUp,
 } from 'lucide-react';
-import Reveal from '@/components/Reveal';
 import LandingHero from '@/components/landing/LandingHero';
-import LandingCodeBlock from '@/components/landing/LandingCodeBlock';
 import LandingFeatureSpotlight from '@/components/landing/LandingFeatureSpotlight';
 import LandingFinalCta from '@/components/landing/LandingFinalCta';
 import LandingFooter from '@/components/landing/LandingFooter';
-import LandingGoogleSetup from '@/components/landing/LandingGoogleSetup';
 import LandingLimitations from '@/components/landing/LandingLimitations';
 import LandingPathStrip from '@/components/landing/LandingPathStrip';
+import LandingQuickStart from '@/components/landing/LandingQuickStart';
+import LandingPageSection from '@/components/landing/LandingPageSection';
 import LandingSectionHeader from '@/components/landing/LandingSectionHeader';
 import LandingShell from '@/components/LandingShell';
 import LandingStatsStrip from '@/components/landing/LandingStatsStrip';
 import LandingUseCases from '@/components/landing/LandingUseCases';
+import { LANDING_SECTION_IDS, landingGutterClass } from '@/components/landing/landingLayout';
 import { strings } from '@/lib/strings';
 
 const vl = strings.views.landing;
@@ -36,28 +36,39 @@ const FEATURES = [
 
 export default function LandingPage() {
   return (
-    <LandingShell footer={<LandingFooter />}>
-      <div className="relative overflow-hidden">
-        <div aria-hidden className="pointer-events-none absolute inset-0 -z-10 landing-grid-bg opacity-40" />
-        <div aria-hidden className="aurora-bg" />
+    <LandingShell
+      footer={<LandingFooter />}
+      backdrop={
+        <>
+          <div aria-hidden className="landing-grid-bg absolute inset-0 opacity-40" />
+          <div aria-hidden className="aurora-bg absolute inset-0" />
+        </>
+      }
+    >
+      <LandingHero />
 
-        <LandingHero />
-      </div>
-
-      <Reveal>
+      <LandingPageSection id={LANDING_SECTION_IDS.stats} fullBleed>
         <LandingStatsStrip />
-      </Reveal>
-      <Reveal>
+      </LandingPageSection>
+
+      <LandingPageSection id={LANDING_SECTION_IDS.getStarted} fullBleed>
         <LandingPathStrip />
-      </Reveal>
+      </LandingPageSection>
 
-      <Reveal as="section" id="spotlights" className="scroll-mt-24 landing-section-alt border-y border-muted/60 py-16 sm:py-20">
-        <div className="mx-auto max-w-6xl space-y-16 px-[var(--spacing-page-x)] sm:space-y-20 sm:px-6 lg:px-8">
-          <LandingSectionHeader
-            eyebrow={vl.sectionCapabilities}
-            title={vl.spotlightsSectionTitle}
-            subtitle={vl.spotlightsSectionSubtitle}
-          />
+      <LandingPageSection id={LANDING_SECTION_IDS.quickStart} fullBleed>
+        <LandingQuickStart />
+      </LandingPageSection>
+
+      <LandingPageSection id={LANDING_SECTION_IDS.spotlights} fullBleed>
+        <div className="flex min-h-0 w-full flex-1 flex-col justify-center gap-4">
+          <div className={landingGutterClass}>
+            <LandingSectionHeader
+              eyebrow={vl.sectionCapabilities}
+              title={vl.spotlightsSectionTitle}
+              subtitle={vl.spotlightsSectionSubtitle}
+              compact
+            />
+          </div>
           <LandingFeatureSpotlight
             eyebrow={vl.spotlight1Eyebrow}
             title={vl.spotlight1Title}
@@ -67,82 +78,117 @@ export default function LandingPage() {
             ctaHref="/pipeline"
             ctaLabel={vl.spotlight1Cta}
           />
-          <LandingFeatureSpotlight
-            eyebrow={vl.spotlight2Eyebrow}
-            title={vl.spotlight2Title}
-            description={vl.spotlight2Description}
-            bullets={vl.spotlight2Bullets}
-            mockVariant="issues"
-            ctaHref="/home"
-            ctaLabel={vl.spotlight2Cta}
-            reversed
-          />
         </div>
-      </Reveal>
+      </LandingPageSection>
 
-      <Reveal>
-        <LandingUseCases />
-      </Reveal>
+      <LandingPageSection id={LANDING_SECTION_IDS.spotlightIssues} fullBleed>
+        <LandingFeatureSpotlight
+          eyebrow={vl.spotlight2Eyebrow}
+          title={vl.spotlight2Title}
+          description={vl.spotlight2Description}
+          bullets={vl.spotlight2Bullets}
+          mockVariant="issues"
+          ctaHref="/home"
+          ctaLabel={vl.spotlight2Cta}
+          reversed
+        />
+      </LandingPageSection>
 
-      <Reveal
-        as="section"
-        id="quick-start"
-        className="scroll-mt-24 mx-auto max-w-6xl px-[var(--spacing-page-x)] py-16 sm:px-6 sm:py-20 lg:px-8"
-      >
-        <LandingSectionHeader
-          eyebrow={vl.sectionGettingStarted}
-          title={vl.quickStartTitle}
-          subtitle={vl.quickStartSubtitle}
-          centered={false}
+      <LandingPageSection id={LANDING_SECTION_IDS.spotlightGoogle} fullBleed>
+        <LandingFeatureSpotlight
+          eyebrow={vl.spotlight3Eyebrow}
+          title={vl.spotlight3Title}
+          description={vl.spotlight3Description}
+          bullets={vl.spotlight3Bullets}
+          mockVariant="google"
+          ctaHref={vl.spotlight3CtaHref}
+          ctaLabel={vl.spotlight3Cta}
+          secondaryCtaHref={vl.spotlight3SecondaryCtaHref}
+          secondaryCtaLabel={vl.spotlight3SecondaryCta}
+          secondaryCtaExternal
         />
-        <div className="grid gap-4 md:grid-cols-2">
-          <LandingCodeBlock label={vl.quickStartDockerLabel} command={vl.quickStartDockerCommand} />
-          <div className="space-y-4">
-            <LandingCodeBlock label={vl.quickStartLocalLabel} command={vl.quickStartLocalSetup} />
-            <LandingCodeBlock command={vl.quickStartLocalRun} />
-          </div>
-        </div>
-        <p className="mt-6 text-sm text-muted-foreground">{vl.quickStartDocsHint}</p>
-      </Reveal>
+      </LandingPageSection>
+
+      <LandingPageSection id={LANDING_SECTION_IDS.spotlightContentStudio} fullBleed>
+        <LandingFeatureSpotlight
+          eyebrow={vl.spotlight4Eyebrow}
+          title={vl.spotlight4Title}
+          description={vl.spotlight4Description}
+          bullets={vl.spotlight4Bullets}
+          mockVariant="contentStudio"
+          ctaHref={vl.spotlight4CtaHref}
+          ctaLabel={vl.spotlight4Cta}
+          reversed
+        />
+      </LandingPageSection>
 
-      <Reveal>
-        <LandingGoogleSetup />
-      </Reveal>
+      <LandingPageSection id={LANDING_SECTION_IDS.spotlightAiChat} fullBleed>
+        <LandingFeatureSpotlight
+          eyebrow={vl.spotlight5Eyebrow}
+          title={vl.spotlight5Title}
+          description={vl.spotlight5Description}
+          bullets={vl.spotlight5Bullets}
+          mockVariant="aiChat"
+          ctaHref={vl.spotlight5CtaHref}
+          ctaLabel={vl.spotlight5Cta}
+        />
+      </LandingPageSection>
 
-      <Reveal
-        as="section"
-        id="features"
-        className="scroll-mt-24 landing-section-alt border-y border-muted/60 py-16 sm:px-6 sm:py-20"
-      >
-        <div className="mx-auto max-w-6xl px-[var(--spacing-page-x)] lg:px-8">
+      <LandingPageSection id={LANDING_SECTION_IDS.spotlightCompareExport} fullBleed>
+        <LandingFeatureSpotlight
+          eyebrow={vl.spotlight6Eyebrow}
+          title={vl.spotlight6Title}
+          description={vl.spotlight6Description}
+          bullets={vl.spotlight6Bullets}
+          mockVariant="compareExport"
+          ctaHref={vl.spotlight6CtaHref}
+          ctaLabel={vl.spotlight6Cta}
+          reversed
+        />
+      </LandingPageSection>
+
+      <LandingPageSection id={LANDING_SECTION_IDS.useCases}>
+        <LandingUseCases />
+      </LandingPageSection>
+
+      <LandingPageSection id={LANDING_SECTION_IDS.features}>
+        <div className="w-full min-w-0">
           <LandingSectionHeader
             eyebrow={vl.sectionCapabilities}
             title={vl.featuresTitle}
             subtitle={vl.featuresSubtitle}
+            compact
           />
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <div className="grid gap-2.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
             {FEATURES.map(({ icon: Icon, title, description }) => (
               <article
                 key={title}
-                className="hover-lift group relative rounded-2xl border border-default bg-brand-800/40 p-5 hover:border-blue-500/30 hover:bg-brand-800/60"
+                className="group rounded-xl border border-default/60 p-3 transition-colors hover:border-blue-500/25"
               >
-                <span className="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-default bg-brand-900/80 text-link transition-colors group-hover:border-blue-500/40 group-hover:text-link">
-                  <Icon className="h-4 w-4" aria-hidden />
+                <span className="inline-flex h-8 w-8 items-center justify-center text-link">
+                  <Icon className="h-3.5 w-3.5" aria-hidden />
                 </span>
-                <h3 className="mt-4 text-sm font-semibold text-foreground">{title}</h3>
-                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{description}</p>
+                <h3 className="mt-2 text-xs font-semibold text-foreground sm:text-sm">{title}</h3>
+                <p className="mt-1 line-clamp-2 text-[11px] leading-relaxed text-muted-foreground sm:text-xs">
+                  {description}
+                </p>
               </article>
             ))}
           </div>
         </div>
-      </Reveal>
+      </LandingPageSection>
 
-      <Reveal>
+      <LandingPageSection id={LANDING_SECTION_IDS.limitations} fullBleed>
         <LandingLimitations />
-      </Reveal>
-      <Reveal>
+      </LandingPageSection>
+
+      <LandingPageSection
+        id={LANDING_SECTION_IDS.finalCta}
+        fullBleed
+        className="border-t border-muted/40"
+      >
         <LandingFinalCta />
-      </Reveal>
+      </LandingPageSection>
     </LandingShell>
   );
 }