From 46e3424aff23038dc6d5fd4ba8aa0c194945eba2 Mon Sep 17 00:00:00 2001
From: bruno moniz <brunoomoniz@gmail.com>
Date: Thu, 18 Jun 2026 11:37:37 -0300
Subject: [PATCH 1/3] feat(landing): SP2 build infra + scenario data foundation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

No-basePath public landing export, separate from the /app build:
- next.config.ts: split .next cache via NEXT_DIST_DIR; document the two builds
- package.json: build:public (MARKETING_BUILD=1, no basePath) → export-landing
- scripts/export-landing.mjs: stage out/ → out-public/ with /_next assets,
  preserve favicon.svg/privacidade/termos/plano from zinom-site/public,
  assert index.html references /_next/ with no /app prefix
- marketing.css: landing.css ported, re-tokenized to Refined Editorial (teal
  #2f5d50, Inter/JetBrains Mono self-hosted, warm paper bg)
- icons.tsx: ICONS map ported to React SVG components (no innerHTML)
- useReveal.ts: watchVisible() ported (IO + scroll/resize fallback, reduced-motion)
- hooks/marketing-access.ts: register/request-invite via raw same-origin fetch
- lib/marketing/{feed,chat}-scenario.ts: pure scripted demo data

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/.gitignore                         |   2 +
 web/components/marketing/icons.tsx     | 132 +++++++
 web/components/marketing/marketing.css | 501 +++++++++++++++++++++++++
 web/components/marketing/useReveal.ts  |  74 ++++
 web/hooks/marketing-access.ts          |  46 +++
 web/lib/marketing/chat-scenario.ts     | 113 ++++++
 web/lib/marketing/feed-scenario.ts     | 106 ++++++
 web/next.config.ts                     |   8 +
 web/package.json                       |   2 +
 web/scripts/export-landing.mjs         | 104 +++++
 10 files changed, 1088 insertions(+)
 create mode 100644 web/components/marketing/icons.tsx
 create mode 100644 web/components/marketing/marketing.css
 create mode 100644 web/components/marketing/useReveal.ts
 create mode 100644 web/hooks/marketing-access.ts
 create mode 100644 web/lib/marketing/chat-scenario.ts
 create mode 100644 web/lib/marketing/feed-scenario.ts
 create mode 100644 web/scripts/export-landing.mjs

diff --git a/web/.gitignore b/web/.gitignore
index c9c60f5..112e5ba 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -1,6 +1,8 @@
 node_modules
 .next
+.next-public
 out
+out-public
 next-env.d.ts
 test-results
 playwright-report
diff --git a/web/components/marketing/icons.tsx b/web/components/marketing/icons.tsx
new file mode 100644
index 0000000..623081d
--- /dev/null
+++ b/web/components/marketing/icons.tsx
@@ -0,0 +1,132 @@
+// Inline SVG icons for the public landing, ported 1:1 from the ICONS map in
+// zinom-site/public/landing.js. Rendered as React components (no innerHTML, no
+// inline <script>) so the Next export stays CSP-clean ('self').
+import type { CSSProperties } from "react";
+
+const ACCENT = "var(--accent)";
+
+export type IconName =
+  | "zinom"
+  | "notion"
+  | "granola"
+  | "calendar"
+  | "claude"
+  | "claudecode"
+  | "chatgpt"
+  | "cursor"
+  | "mcp"
+  | "search"
+  | "check"
+  | "doc"
+  | "zap"
+  | "sign";
+
+const PATHS: Record<IconName, React.ReactNode> = {
+  zinom: (
+    <svg viewBox="0 0 26 26" fill="none">
+      <rect x="1" y="1" width="24" height="24" rx="7.5" fill={ACCENT} />
+      <path
+        d="M8 8 H18 L8 18 H18"
+        stroke="#fff"
+        strokeWidth="1.9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle cx="8" cy="8" r="1.7" fill="#fff" />
+      <circle cx="18" cy="8" r="1.7" fill="#fff" />
+      <circle cx="8" cy="18" r="1.7" fill="#fff" />
+      <circle cx="18" cy="18" r="1.7" fill="#fff" />
+    </svg>
+  ),
+  notion: (
+    <svg viewBox="0 0 24 24" fill="none">
+      <rect x="2.5" y="2.5" width="19" height="19" rx="4" fill="#fff" stroke="#26241f" strokeWidth="1.6" />
+      <path d="M8 16.5v-9l8 9v-9" stroke="#26241f" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  granola: (
+    <svg viewBox="0 0 24 24" fill="none">
+      <rect x="2.5" y="2.5" width="19" height="19" rx="5.5" fill="#f6c544" />
+      <path d="M15.5 9.2a4.4 4.4 0 1 0 1 3.3h-3.6" stroke="#26241f" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+    </svg>
+  ),
+  calendar: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="#3d6fae" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3.5" y="5" width="17" height="16" rx="3" fill="#ecf3fc" />
+      <path d="M8 3v4M16 3v4M3.5 10h17" />
+      <circle cx="12" cy="15.5" r="1.4" fill="#3d6fae" stroke="none" />
+    </svg>
+  ),
+  claude: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="#d97757" strokeWidth="2.1" strokeLinecap="round">
+      <path d="M12 4v16M5.1 8l13.8 8M18.9 8 5.1 16" />
+    </svg>
+  ),
+  claudecode: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="#26241f" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="2.5" y="4" width="19" height="16" rx="3" />
+      <path d="M7 10l3 2.5L7 15M12.5 15.5H17" />
+    </svg>
+  ),
+  chatgpt: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="#26241f" strokeWidth="1.8">
+      <circle cx="12" cy="12" r="8" />
+      <circle cx="12" cy="12" r="3.2" />
+    </svg>
+  ),
+  cursor: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="#26241f" strokeWidth="1.8" strokeLinejoin="round">
+      <path d="M6 4l13 7.5-5.6 1.6L11 19z" />
+    </svg>
+  ),
+  mcp: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="#26241f" strokeWidth="1.8" strokeLinecap="round">
+      <path d="M8 4v5a4 4 0 0 0 8 0V4M12 13v7M9 20h6" />
+    </svg>
+  ),
+  search: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+      <circle cx="11" cy="11" r="6.5" />
+      <path d="m20 20-4.2-4.2" />
+    </svg>
+  ),
+  check: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  ),
+  doc: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <path d="M14 2v6h6" />
+    </svg>
+  ),
+  zap: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round">
+      <path d="M13 2 4 14h7l-1 8 9-12h-7z" />
+    </svg>
+  ),
+  sign: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="#7c4fd6" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="4" y="2.5" width="13" height="19" rx="2.5" fill="#f1ecfb" />
+      <path d="M8 8.5h5M8 12h3" />
+      <path d="M11 18.5c1.4-2.6 2.8-2.6 4.2 0 1.4-2.6 2.8-2.6 4.2 0" />
+    </svg>
+  ),
+};
+
+export function Icon({
+  name,
+  className = "ic",
+  style,
+}: {
+  name: IconName;
+  className?: string;
+  style?: CSSProperties;
+}) {
+  return (
+    <span className={className} style={style} aria-hidden="true">
+      {PATHS[name]}
+    </span>
+  );
+}
diff --git a/web/components/marketing/marketing.css b/web/components/marketing/marketing.css
new file mode 100644
index 0000000..a0c8cbf
--- /dev/null
+++ b/web/components/marketing/marketing.css
@@ -0,0 +1,501 @@
+/* ============================================================
+   Zinom Landing v2 — tokens herdados da marca atual
+   ============================================================ */
+:root{
+  /* Refined Editorial tokens (mirrors web/tailwind.config.ts). Warm paper page,
+     teal-green accent (#2f5d50), self-hosted Inter + JetBrains Mono. */
+  --bg:#fbfaf6;
+  --paper:#f6f4ef;
+  --paper-2:#f1eee7;
+  --ink:#1c1b18;
+  --ink-soft:#3c3a35;
+  --muted:#86827a;
+  --line:#e6e1d7;
+  --line-2:#d8d2c5;
+  --accent:#2f5d50;
+  --accent-strong:#234a40;
+  --accent-soft:#e4ede9;
+  --accent-line:#cfe0d9;
+  --accent-ring:rgba(47,93,80,.16);
+  --granola:#f6c544;
+  --granola-soft:#fdf6e0;
+  --granola-line:#f0e2b0;
+  --cal:#4f8fdd;
+  --cal-soft:#ecf3fc;
+  --cal-line:#cfe0f4;
+  --notion-soft:#f1eee7;
+  --r:16px; --r-sm:11px; --r-xs:8px;
+  --shadow-sm:0 1px 2px rgba(28,27,24,.05), 0 1px 1px rgba(28,27,24,.04);
+  --shadow:0 12px 32px -12px rgba(28,27,24,.16), 0 4px 10px -6px rgba(28,27,24,.10);
+  --shadow-lg:0 28px 70px -26px rgba(28,27,24,.28), 0 8px 22px -14px rgba(28,27,24,.14);
+  --maxw:1120px;
+  --sans:"Inter Variable",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
+  --mono:"JetBrains Mono Variable","JetBrains Mono","SFMono-Regular",ui-monospace,Menlo,monospace;
+  --speed:1;
+}
+*{box-sizing:border-box}
+html{scroll-behavior:smooth}
+body{
+  margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
+  line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
+}
+a{color:inherit;text-decoration:none}
+h1,h2,h3,h4,p{margin:0}
+button{font-family:var(--sans)}
+::selection{background:var(--accent-ring)}
+.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
+
+/* ---------- icons ---------- */
+.ic{display:inline-flex;width:18px;height:18px;flex:0 0 auto;align-items:center;justify-content:center}
+.ic svg{width:100%;height:100%}
+
+/* ---------- Nav ---------- */
+.nav{
+  position:sticky;top:0;z-index:40;
+  background:rgba(251,250,246,.84);
+  backdrop-filter:saturate(150%) blur(14px);
+  border-bottom:1px solid transparent;
+  transition:border-color .25s ease, background .25s ease;
+}
+.nav.scrolled{border-color:var(--line);background:rgba(251,250,246,.92)}
+.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
+.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;font-size:18px}
+.nav-links{display:flex;align-items:center;gap:28px}
+.nav-links a.lnk{font-size:14.5px;color:var(--ink-soft);transition:color .15s}
+.nav-links a.lnk:hover{color:var(--ink)}
+.nav-cta{display:flex;align-items:center;gap:12px}
+/* mobile nav (hamburger) — hidden on desktop, revealed ≤980px in the responsive block */
+.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 9px;background:transparent;border:1px solid var(--line-2);border-radius:var(--r-xs);cursor:pointer;-webkit-tap-highlight-color:transparent}
+.nav-toggle:hover{background:var(--paper)}
+.nav-toggle-bar{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .18s ease}
+.nav.open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
+.nav.open .nav-toggle-bar:nth-child(2){opacity:0}
+.nav.open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
+.nav-mobile{display:none;flex-direction:column;gap:2px;padding:8px 18px 18px;background:rgba(251,250,246,.98)}
+.nav-mobile .lnk{padding:14px 6px;font-size:16px;color:var(--ink-soft);border-bottom:1px solid var(--line)}
+.nav-mobile .lnk:active{color:var(--ink)}
+.nav-mobile .btn{margin-top:10px;justify-content:center}
+
+.btn{
+  display:inline-flex;align-items:center;justify-content:center;gap:8px;
+  font-size:14.5px;font-weight:540;letter-spacing:-.01em;
+  border-radius:var(--r-sm);padding:9px 17px;cursor:pointer;border:1px solid transparent;
+  transition:transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s;
+  white-space:nowrap;
+}
+.btn:active{transform:translateY(1px)}
+.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(21,99,55,.25)}
+.btn-primary:hover{background:var(--accent-strong);box-shadow:0 6px 16px -6px rgba(21,99,55,.5)}
+.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
+.btn-ghost:hover{background:var(--paper)}
+.btn-lg{padding:13px 24px;font-size:15.5px;border-radius:12px}
+.btn-block{width:100%}
+
+/* ---------- Hero ---------- */
+.hero{position:relative;padding:72px 0 36px;overflow:hidden}
+.hero::before{
+  content:"";position:absolute;inset:0;z-index:-1;
+  background:radial-gradient(60% 50% at 50% -8%, var(--accent-soft) 0%, rgba(251,250,246,0) 62%), var(--bg);
+}
+.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
+.eyebrow{
+  display:inline-flex;align-items:center;gap:8px;
+  font-size:12.5px;font-weight:560;color:var(--accent-strong);
+  background:var(--accent-soft);border:1px solid var(--accent-line);
+  padding:6px 12px 6px 10px;border-radius:999px;margin-bottom:22px;
+}
+.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
+h1.title{font-size:clamp(38px,4.8vw,56px);line-height:1.04;font-weight:600;letter-spacing:-.035em;margin-bottom:20px;text-wrap:balance}
+h1.title em{font-style:normal;color:var(--accent-strong)}
+.lede{font-size:clamp(17px,1.5vw,19px);color:var(--ink-soft);max-width:30em;text-wrap:pretty;line-height:1.55}
+
+/* hero "equation" — entender em 3s */
+.hero-eq{display:flex;align-items:center;gap:10px;margin-top:28px;flex-wrap:wrap}
+.hero-eq .eq-chip{
+  display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:520;color:var(--ink-soft);
+  background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 14px;box-shadow:var(--shadow-sm);
+}
+.hero-eq .eq-op{font-family:var(--mono);font-size:14px;color:var(--muted);font-weight:600}
+.hero-eq .eq-chip.zin{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-strong);font-weight:600}
+.hero-eq .eq-chip.ai{background:var(--ink);border-color:var(--ink);color:#fff}
+
+/* ---------- Access card ---------- */
+.access{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:7px;position:relative}
+.access-head{padding:20px 22px 6px}
+.access-head h3{font-size:17px;font-weight:580;letter-spacing:-.02em}
+.access-head p{font-size:13.5px;color:var(--muted);margin-top:3px}
+.tabs{display:flex;gap:4px;background:var(--paper);border-radius:var(--r-sm);padding:4px;margin:14px 16px 0}
+.tab{
+  flex:1;text-align:center;font-size:13px;font-weight:520;color:var(--muted);white-space:nowrap;
+  padding:9px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:all .16s ease;
+}
+.tab.active{background:var(--bg);color:var(--ink);box-shadow:var(--shadow-sm);border-color:var(--line)}
+.pane{padding:18px 22px 20px;display:none}
+.pane.active{display:block;animation:fade .28s ease}
+@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
+.field{margin-bottom:13px}
+.field label{display:block;font-size:12.5px;font-weight:540;color:var(--ink-soft);margin-bottom:6px}
+.field input{
+  width:100%;font-family:var(--sans);font-size:14.5px;color:var(--ink);
+  padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r-xs);background:var(--bg);
+  transition:border-color .15s, box-shadow .15s;
+}
+.field input::placeholder{color:#b3aea3}
+.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3.5px var(--accent-ring)}
+.pane .hint{font-size:12px;color:var(--muted);margin-top:12px;text-align:center;line-height:1.5}
+.pane .hint a{color:var(--accent-strong);font-weight:520}
+.ok-msg{display:none;text-align:center;padding:10px 8px 6px}
+.ok-msg.show{display:block;animation:fade .3s ease}
+.ok-msg .check{width:46px;height:46px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;margin:0 auto 14px;color:var(--accent)}
+.ok-msg h4{font-size:16px;font-weight:580;margin-bottom:5px}
+.ok-msg p{font-size:13.5px;color:var(--muted);max-width:24em;margin:0 auto}
+
+/* ---------- strip ---------- */
+.strip{padding:34px 0 8px}
+.strip .lbl{text-align:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;font-weight:540}
+.sources{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
+.source-chip{
+  display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--ink-soft);
+  border:1px solid var(--line);background:var(--bg);padding:9px 15px;border-radius:999px;box-shadow:var(--shadow-sm);
+}
+.source-chip .ic{width:17px;height:17px}
+
+/* ---------- sections ---------- */
+.section{padding:88px 0}
+.section.alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
+.sec-head{max-width:36em;margin:0 auto 48px;text-align:center}
+.sec-tag{font-size:12.5px;font-weight:560;letter-spacing:.02em;color:var(--accent-strong);margin-bottom:12px}
+.sec-head h2{font-size:clamp(28px,3.4vw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
+.sec-head p{font-size:16.5px;color:var(--ink-soft);margin-top:14px;text-wrap:pretty}
+
+/* ---------- diagrama (como funciona) ---------- */
+.diagram{display:flex;align-items:center;justify-content:center;margin:0 auto;max-width:880px}
+.dg-col{display:flex;flex-direction:column;gap:11px}
+.dg-node{
+  display:flex;align-items:center;gap:10px;font-size:14px;font-weight:520;color:var(--ink-soft);
+  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:11px 15px;
+  box-shadow:var(--shadow-sm);white-space:nowrap;transition:border-color .3s, box-shadow .3s, transform .3s;
+}
+.dg-node.lit{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-ring), var(--shadow-sm);transform:translateX(2px)}
+.dg-node .sub{font-size:11.5px;color:var(--muted);font-weight:450;display:block;margin-top:1px}
+.dg-node .col{display:flex;flex-direction:column;line-height:1.25}
+.dg-wire{position:relative;flex:1 1 auto;min-width:40px;max-width:96px;height:2px;background:var(--line-2);margin:0 14px;border-radius:2px}
+.dg-wire .pulse{
+  position:absolute;top:50%;left:0;width:7px;height:7px;border-radius:50%;background:var(--accent);
+  transform:translateY(-50%);box-shadow:0 0 0 3px var(--accent-ring);
+  animation:dgflow calc(1.9s/var(--speed)) linear infinite;
+}
+.dg-wire .pulse.d2{animation-delay:calc(.95s/var(--speed))}
+@keyframes dgflow{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
+@keyframes dgflowv{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
+.dg-hub{
+  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;justify-content:center;
+  width:118px;height:118px;border-radius:24px;background:var(--accent-soft);border:1px solid var(--accent-line);
+  color:var(--accent-strong);font-weight:600;font-size:14.5px;position:relative;
+}
+.dg-hub .mk{width:38px;height:38px;display:inline-flex}
+.dg-hub::after{
+  content:"";position:absolute;inset:-7px;border-radius:30px;border:1.5px solid var(--accent-line);
+  opacity:.7;animation:hubring calc(2.6s/var(--speed)) ease-out infinite;
+}
+@keyframes hubring{0%{transform:scale(.96);opacity:.7}70%{transform:scale(1.06);opacity:0}100%{opacity:0}}
+.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:880px;margin:46px auto 0}
+.s3{display:flex;gap:13px;align-items:flex-start}
+.s3 .n{
+  flex:0 0 auto;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent);
+  background:var(--accent-soft);border:1px solid var(--accent-line);width:28px;height:28px;border-radius:9px;
+  display:grid;place-items:center;margin-top:1px;
+}
+.s3 b{display:block;font-size:15px;font-weight:580;letter-spacing:-.01em;color:var(--ink)}
+.s3 span{font-size:13.5px;color:var(--muted);display:block;margin-top:2px}
+
+/* ============================================================
+   FEED LAB — "alimente seu cérebro no dia a dia"
+   ============================================================ */
+.feedlab{max-width:1040px;margin:0 auto}
+.fl-controls{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:26px;flex-wrap:wrap}
+.fl-step{
+  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:520;color:var(--muted);
+  background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;
+  transition:all .2s ease;position:relative;overflow:hidden;
+}
+.fl-step .tm{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
+.fl-step .ic{width:15px;height:15px}
+.fl-step:hover{border-color:var(--line-2);color:var(--ink)}
+.fl-step.active{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-strong);font-weight:560}
+.fl-step.active .tm{color:var(--accent-strong)}
+.fl-step.done{color:var(--ink-soft)}
+.fl-step .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);width:0%}
+.fl-step.active .bar{animation:flbar var(--fl-dur,5s) linear forwards}
+@keyframes flbar{from{width:0%}to{width:100%}}
+.fl-play{
+  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
+  border:1px solid var(--line-2);background:var(--bg);color:var(--ink-soft);cursor:pointer;transition:all .15s;
+}
+.fl-play:hover{border-color:var(--accent);color:var(--accent-strong)}
+
+.fl-stage{display:grid;grid-template-columns:1fr 64px 1.1fr;align-items:stretch}
+.fl-panel{
+  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
+  display:flex;flex-direction:column;overflow:hidden;min-height:430px;
+}
+.fl-panel-head{
+  display:flex;align-items:center;gap:9px;padding:14px 18px;border-bottom:1px solid var(--line);
+  background:var(--paper);font-size:13.5px;font-weight:560;color:var(--ink);
+}
+.fl-panel-head .right{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--muted);font-weight:500}
+.fl-panel-head .mk{width:17px;height:17px;display:inline-flex}
+.fl-clock{font-family:var(--mono);font-size:12px;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:2px 8px;margin-left:auto}
+.fl-body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
+
+/* day cards */
+.fl-card{
+  display:flex;gap:11px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);
+  border-radius:12px;padding:12px 13px;box-shadow:var(--shadow-sm);
+  opacity:0;transform:translateY(10px);transition:opacity .45s ease, transform .45s ease, box-shadow .3s, border-color .3s;
+}
+.fl-card.in{opacity:1;transform:none}
+.fl-card.lit{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-ring), var(--shadow-sm)}
+.fl-card.dim{opacity:.55}
+.fl-card .badge-ic{
+  flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line);
+}
+.fl-card .badge-ic .ic{width:18px;height:18px}
+.fl-card .badge-ic.granola{background:var(--granola-soft);border-color:var(--granola-line)}
+.fl-card .badge-ic.notion{background:var(--notion-soft);border-color:var(--line-2)}
+.fl-card .badge-ic.calendar{background:var(--cal-soft);border-color:var(--cal-line)}
+.fl-card .col{display:flex;flex-direction:column;min-width:0;flex:1}
+.fl-card .tt{font-size:13.5px;font-weight:560;color:var(--ink);letter-spacing:-.01em}
+.fl-card .mt{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
+.fl-card .src{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:7px;display:flex;align-items:center;gap:6px}
+.fl-card .src .tag{font-weight:600;letter-spacing:.02em;border-radius:5px;padding:1px 6px;color:var(--ink)}
+.tag.t-granola{background:var(--granola)}
+.tag.t-notion{background:#e7e3da}
+.tag.t-calendar{background:#bcd6f3}
+.fl-empty{
+  font-size:13px;color:var(--muted);text-align:center;padding:26px 10px;border:1.5px dashed var(--line-2);
+  border-radius:12px;line-height:1.5;
+}
+
+/* wire between panels */
+.fl-wirebox{display:flex;align-items:center;justify-content:center;position:relative}
+.fl-wirebox .lane{position:relative;width:100%;height:2px;background:var(--line-2);border-radius:2px}
+.fl-dot{
+  position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent);
+  transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--accent-ring);opacity:0;
+}
+.fl-dot.go{animation:fldot .9s ease-in forwards}
+@keyframes fldot{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
+
+/* brain memories */
+.fl-mem{
+  display:flex;gap:10px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:10px;
+  padding:9px 11px;opacity:0;transform:translateX(10px);transition:opacity .4s ease, transform .4s ease, box-shadow .3s, border-color .3s;
+}
+.fl-mem.in{opacity:1;transform:none}
+.fl-mem.hit{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-ring)}
+.fl-mem .tag{font-family:var(--mono);font-size:10px;font-weight:600;border-radius:5px;padding:1px 6px;color:var(--ink);flex:0 0 auto}
+.fl-mem .tt{font-size:12.5px;font-weight:520;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
+.fl-mem .chunks{font-family:var(--mono);font-size:10.5px;color:var(--accent-strong);background:var(--accent-soft);border-radius:6px;padding:2px 7px;flex:0 0 auto;font-weight:600}
+.fl-mem .score{font-family:var(--mono);font-size:10.5px;color:var(--accent-strong);background:var(--accent-soft);border-radius:6px;padding:2px 7px;flex:0 0 auto;font-weight:700;display:none}
+.fl-mem.scored .chunks{display:none}
+.fl-mem.scored .score{display:inline-block}
+
+/* brain footer counter */
+.fl-count{
+  display:flex;align-items:baseline;gap:7px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line-2);
+  font-size:12.5px;color:var(--muted);
+}
+.fl-count b{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--accent-strong);letter-spacing:-.02em}
+
+/* payoff search */
+.fl-search{margin-top:4px;display:none;flex-direction:column;gap:9px}
+.fl-search.show{display:flex;animation:fade .35s ease}
+.fl-query{
+  font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--paper);border:1px solid var(--line);
+  border-radius:9px;padding:9px 12px;display:flex;align-items:center;gap:8px;
+}
+.fl-query .pr{color:var(--accent-strong);font-weight:700}
+.fl-query .cursor{display:inline-block;width:7px;height:13px;background:var(--ink-soft);animation:tblink 1s steps(2,end) infinite}
+@keyframes tblink{50%{opacity:0}}
+.fl-answer{
+  font-size:13px;color:var(--ink);background:var(--accent-soft);border:1px solid var(--accent-line);
+  border-radius:10px;padding:11px 13px;line-height:1.55;display:none;
+}
+.fl-answer.show{display:block;animation:fade .35s ease}
+.fl-answer b{font-weight:600}
+.fl-caption{text-align:center;font-size:13.5px;color:var(--muted);margin-top:24px;text-wrap:pretty}
+.fl-caption b{color:var(--ink-soft);font-weight:560}
+
+/* ---------- demo de chat ---------- */
+.demo-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
+.demo-copy h2{font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
+.demo-copy > p{font-size:16px;color:var(--ink-soft);margin-top:16px;line-height:1.6;text-wrap:pretty}
+.demo-steps{margin-top:28px;display:flex;flex-direction:column;gap:8px}
+.dstep{
+  display:flex;gap:13px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid transparent;
+  transition:background .3s, border-color .3s, opacity .3s;opacity:.55;
+}
+.dstep.on{opacity:1;background:var(--bg);border-color:var(--line);box-shadow:var(--shadow-sm)}
+.dstep .dn{
+  flex:0 0 auto;font-family:var(--mono);font-size:11px;font-weight:600;width:26px;height:26px;border-radius:8px;
+  display:grid;place-items:center;background:var(--paper-2);color:var(--muted);border:1px solid var(--line);
+  transition:all .3s;margin-top:1px;
+}
+.dstep.on .dn{background:var(--accent-soft);color:var(--accent-strong);border-color:var(--accent-line)}
+.dstep b{font-weight:560;font-size:14.5px;display:block}
+.dstep span{display:block;color:var(--muted);font-size:13px;margin-top:2px;line-height:1.45}
+.demo-note{font-size:13px;color:var(--muted);margin-top:22px;font-weight:500}
+
+.chat{background:var(--bg);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
+.chat-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
+.cb-brand{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:560;color:var(--ink)}
+.cb-brand .mk{width:17px;height:17px;display:inline-flex}
+.cb-sep{color:var(--muted);font-weight:460;font-size:11px;font-family:var(--mono)}
+.clients{display:flex;gap:3px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:3px;margin-left:auto}
+.cl{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:520;color:var(--muted);background:transparent;border:none;border-radius:6px;padding:5px 8px;cursor:pointer;transition:all .15s}
+.cl .ic{width:14px;height:14px}
+.cl:hover{color:var(--ink)}
+.cl.active{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-sm)}
+.chat-prompts{display:flex;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--bg);flex-wrap:wrap}
+.cp{font-size:12.5px;font-weight:500;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;transition:all .15s}
+.cp:hover{border-color:var(--line-2);color:var(--ink)}
+.cp.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-strong);font-weight:540}
+.chat-body{padding:20px 18px 22px;display:flex;flex-direction:column;gap:14px;min-height:380px}
+
+.msg{display:flex;gap:11px}
+.msg.user{justify-content:flex-end}
+.msg.user .bubble{
+  background:var(--accent);color:#fff;border-radius:13px 13px 4px 13px;padding:10px 14px;font-size:14px;
+  max-width:80%;box-shadow:0 1px 2px rgba(21,99,55,.2);line-height:1.5;
+}
+.msg.ai .av{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--ink);color:#fff}
+.msg.ai .av .ic{width:15px;height:15px}
+.msg.ai .stack{display:flex;flex-direction:column;gap:9px;max-width:88%;min-width:0}
+.tool-call{
+  font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);
+  background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:8px 11px;
+  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
+}
+.tool-call .tmk{width:13px;height:13px;display:inline-flex;flex:0 0 auto}
+.tool-call .tk{color:var(--accent-strong);font-weight:600}
+.tool-call .arg{color:var(--muted)}
+.tool-call .spin{
+  width:11px;height:11px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--accent);
+  animation:spin .7s linear infinite;margin-left:auto;flex:0 0 auto;
+}
+@keyframes spin{to{transform:rotate(360deg)}}
+.tool-call .okk{margin-left:auto;color:var(--accent);font-weight:700}
+.bubble.ai{
+  background:var(--paper);border:1px solid var(--line);border-radius:13px 13px 13px 4px;padding:12px 14px;
+  font-size:14px;color:var(--ink);line-height:1.55;
+}
+.bubble.ai strong{font-weight:580}
+.cites{display:flex;flex-direction:column;gap:7px;margin-top:11px;padding-top:11px;border-top:1px dashed var(--line-2)}
+.cites .lbl{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:560}
+.cite{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 9px}
+.cite .ic{width:14px;height:14px}
+.cite .ttl{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.cite .meta{color:var(--muted);margin-left:auto;font-size:11px;flex:0 0 auto}
+.actions{display:flex;flex-direction:column;gap:7px}
+.action{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--accent-line);border-radius:9px;padding:8px 11px}
+.action .ck{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent)}
+.action .col{display:flex;flex-direction:column;min-width:0}
+.action .tt{font-size:12.5px;font-weight:540;color:var(--ink)}
+.action .mt{font-size:11.5px;color:var(--muted);margin-top:1px}
+.typing{display:inline-flex;gap:3px;padding:6px 2px}
+.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.4;animation:blink 1.2s infinite}
+.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
+@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
+.chat-replay{
+  display:flex;justify-content:center;padding:10px 0 2px;
+}
+.chat-replay button{
+  font-size:12px;font-weight:520;color:var(--muted);background:transparent;border:1px solid var(--line);
+  border-radius:999px;padding:6px 14px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:7px;
+}
+.chat-replay button:hover{color:var(--accent-strong);border-color:var(--accent-line)}
+
+/* ---------- pricing ---------- */
+.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
+.plan{
+  display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
+  padding:24px 22px;box-shadow:var(--shadow-sm);position:relative;transition:transform .2s ease, box-shadow .2s ease;
+}
+.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
+.plan.featured{border-color:var(--accent-line);box-shadow:var(--shadow)}
+.plan .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:600;color:#fff;background:var(--accent);border-radius:999px;padding:4px 12px;white-space:nowrap}
+.plan .pname{font-size:16px;font-weight:580;letter-spacing:-.02em}
+.plan .pdesc{font-size:12.5px;color:var(--muted);margin-top:4px;min-height:32px}
+.plan .price{display:flex;align-items:baseline;gap:2px;margin:14px 0 6px}
+.plan .price .cur{font-size:15px;font-weight:560;color:var(--ink-soft)}
+.plan .price .amt{font-size:34px;font-weight:600;letter-spacing:-.03em}
+.plan .price .per{font-size:13px;color:var(--muted)}
+.plan .pfeats{list-style:none;padding:0;margin:16px 0 22px;display:flex;flex-direction:column;gap:10px;flex:1}
+.plan .pfeats li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft);line-height:1.4}
+.plan .pfeats li svg{flex:0 0 auto;color:var(--accent);margin-top:1px}
+.plan .pfeats li.off{color:#b7b2a7}
+.plan .pfeats li.off svg{color:#d4cfc4}
+.plan-note{text-align:center;font-size:13.5px;color:var(--muted);margin-top:26px}
+
+/* ---------- reveal ---------- */
+.reveal{transition:opacity .6s ease, transform .6s ease}
+html.reveal-ready .reveal{opacity:0;transform:translateY(14px)}
+html.reveal-ready .reveal.in{opacity:1;transform:none}
+
+/* ---------- CTA band ---------- */
+.cta-band{padding:72px 0;text-align:center}
+.cta-band h2{font-size:clamp(26px,3.2vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
+.cta-band p{font-size:16.5px;color:var(--ink-soft);margin-top:14px;text-wrap:pretty}
+.cta-band .row{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}
+
+/* ---------- footer ---------- */
+.footer{padding:56px 0 40px;border-top:1px solid var(--line);background:var(--bg)}
+.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
+.foot-brand{max-width:24em}
+.foot-brand p{font-size:13.5px;color:var(--muted);margin-top:14px;line-height:1.6}
+.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
+.foot-col h5{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:560;margin:0 0 14px}
+.foot-col a{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft);padding:5px 0;transition:color .15s}
+.foot-col a:hover{color:var(--accent-strong)}
+.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}
+.foot-bot small{font-size:12.5px;color:var(--muted)}
+.foot-bot .made{font-size:12.5px;color:var(--muted);font-family:var(--mono)}
+
+/* ---------- responsive ---------- */
+@media (max-width:980px){
+  .hero-grid{grid-template-columns:1fr;gap:40px}
+  .demo-grid{grid-template-columns:1fr;gap:36px}
+  .fl-stage{grid-template-columns:1fr}
+  .fl-wirebox{height:52px}
+  .fl-wirebox .lane{width:2px;height:100%}
+  .fl-dot.go{animation-name:fldotv}
+  .pricing-grid{grid-template-columns:repeat(2,1fr)}
+  .nav-links{display:none}
+  .nav-cta{display:none}
+  .nav-toggle{display:flex}
+  .nav.open .nav-mobile{display:flex;border-top:1px solid var(--line)}
+}
+@keyframes fldotv{0%{top:0;left:50%;opacity:0;transform:translate(-50%,-50%)}15%{opacity:1}85%{opacity:1}100%{top:100%;left:50%;opacity:0;transform:translate(-50%,-50%)}}
+@media (max-width:680px){
+  .diagram{flex-direction:column}
+  .dg-wire{width:2px;height:36px;max-width:none;flex:0 0 auto;margin:6px 0}
+  .dg-wire .pulse{left:50%;top:0;transform:translateX(-50%);animation-name:dgflowv}
+  .steps3{grid-template-columns:1fr;gap:16px}
+}
+@media (max-width:560px){
+  .wrap{padding:0 18px}
+  .hero{padding:48px 0 28px}
+  .section{padding:60px 0}
+  .pricing-grid{grid-template-columns:1fr}
+}
+@media (prefers-reduced-motion:reduce){
+  .dg-wire .pulse,.dg-hub::after,.fl-dot,.fl-step .bar{animation:none !important}
+  html.reveal-ready .reveal{opacity:1;transform:none}
+}
+
+/* ---------- form feedback (portal API) ---------- */
+.field-err{display:none;font-size:12.5px;color:#b3422e;margin-top:12px;text-align:center;line-height:1.5}
+.field-err.show{display:block;animation:fade .25s ease}
+.access-note{display:none;font-size:12.5px;color:#b3422e;margin-top:8px;line-height:1.5}
+.access-note.show{display:block;animation:fade .25s ease}
diff --git a/web/components/marketing/useReveal.ts b/web/components/marketing/useReveal.ts
new file mode 100644
index 0000000..fa1be43
--- /dev/null
+++ b/web/components/marketing/useReveal.ts
@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+// Reveal-on-scroll, ported from watchVisible() in landing.js: tries
+// IntersectionObserver but also polls getBoundingClientRect via scroll/resize/
+// interval (some contexts never fire IO). Fires once. Respects
+// prefers-reduced-motion (returns visible immediately, no hidden phase).
+export function useReveal<T extends HTMLElement = HTMLDivElement>(
+  margin = 40
+): { ref: React.RefObject<T | null>; shown: boolean } {
+  const ref = useRef<T | null>(null);
+  const [shown, setShown] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const reduce =
+      typeof window !== "undefined" &&
+      window.matchMedia &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduce) {
+      setShown(true);
+      return;
+    }
+
+    let fired = false;
+    let io: IntersectionObserver | null = null;
+    let iv: ReturnType<typeof setInterval> | null = null;
+
+    const fire = () => {
+      if (fired) return;
+      fired = true;
+      cleanup();
+      setShown(true);
+    };
+    const check = () => {
+      if (fired) return;
+      const r = el.getBoundingClientRect();
+      const vh = window.innerHeight || document.documentElement.clientHeight;
+      if (r.top < vh - margin && r.bottom > 0) fire();
+    };
+    function cleanup() {
+      if (io) io.disconnect();
+      window.removeEventListener("scroll", check);
+      window.removeEventListener("resize", check);
+      if (iv) clearInterval(iv);
+    }
+
+    if ("IntersectionObserver" in window) {
+      try {
+        io = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((e) => {
+              if (e.isIntersecting) fire();
+            });
+          },
+          { threshold: 0.1, rootMargin: `0px 0px -${margin}px 0px` }
+        );
+        io.observe(el);
+      } catch {
+        io = null;
+      }
+    }
+    window.addEventListener("scroll", check, { passive: true });
+    window.addEventListener("resize", check);
+    iv = setInterval(check, 450);
+    check();
+
+    return cleanup;
+  }, [margin]);
+
+  return { ref, shown };
+}
diff --git a/web/hooks/marketing-access.ts b/web/hooks/marketing-access.ts
new file mode 100644
index 0000000..c9bc82c
--- /dev/null
+++ b/web/hooks/marketing-access.ts
@@ -0,0 +1,46 @@
+"use client";
+
+// Access-card mutations for the public landing (register / request-invite).
+//
+// These post to the portal API on the SAME origin (zinom.ai), proxied to the
+// engine by the Cloudflare Worker (see zinom-site/src/worker.js). We use raw
+// fetch — NOT lib/api.ts apiFetch — because apiFetch has a global 401 handler
+// that redirects to /login; the landing forms must surface a field error in
+// place instead (parity with zinom-site/public/landing.js).
+//
+// Base origin: relative paths ("" base) like landing.js (window.PORTAL_API_BASE
+// defaults to ''), which the worker proxies. An explicit base can be injected
+// via NEXT_PUBLIC_PORTAL_API_BASE for cross-origin dev.
+const API_BASE = process.env.NEXT_PUBLIC_PORTAL_API_BASE ?? "";
+
+export interface AccessResult {
+  ok: boolean;
+}
+
+async function post(path: string, body: unknown): Promise<AccessResult> {
+  try {
+    const res = await fetch(API_BASE + path, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "include",
+      body: JSON.stringify(body),
+    });
+    return { ok: res.ok };
+  } catch {
+    return { ok: false };
+  }
+}
+
+export function registerWithInvite(input: {
+  invite_code: string;
+  email: string;
+}): Promise<AccessResult> {
+  return post("/portal/register", input);
+}
+
+export function requestInvite(input: {
+  email: string;
+  note?: string;
+}): Promise<AccessResult> {
+  return post("/portal/request-invite", input);
+}
diff --git a/web/lib/marketing/chat-scenario.ts b/web/lib/marketing/chat-scenario.ts
new file mode 100644
index 0000000..80296f2
--- /dev/null
+++ b/web/lib/marketing/chat-scenario.ts
@@ -0,0 +1,113 @@
+// Scripted scenarios for the ChatDemo ("usar na sua IA"), ported from
+// zinom-site/public/landing-chat.js. Pure data (no DOM).
+import type { IconName } from "@/components/marketing/icons";
+
+export interface ChatUserStep {
+  type: "user";
+  step: number;
+  text: string;
+}
+export interface ChatToolStep {
+  type: "tool";
+  step: number;
+  fn: string;
+  arg: string;
+  delay: number;
+}
+export interface ChatCite {
+  ic: IconName;
+  ttl: string;
+  meta: string;
+}
+export interface ChatAction {
+  ic: IconName;
+  tt: string;
+  mt: string;
+}
+export interface ChatAnswerStep {
+  type: "answer";
+  step: number;
+  html: string;
+  cites?: ChatCite[];
+  actions?: ChatAction[];
+}
+export type ChatStep = ChatUserStep | ChatToolStep | ChatAnswerStep;
+
+export interface ChatScenario {
+  label: string;
+  steps: ChatStep[];
+}
+
+export const CHAT_SCENARIOS: ChatScenario[] = [
+  {
+    label: "Buscar uma decisão",
+    steps: [
+      { type: "user", step: 1, text: "O que ficou decidido sobre preços na reunião com a Ana?" },
+      { type: "tool", step: 2, fn: "brain_search", arg: '"decisão preços Ana"', delay: 1400 },
+      {
+        type: "answer",
+        step: 3,
+        html: "Na 1:1 de hoje vocês decidiram <strong>manter o Pro a R$ 9,99</strong> e testar um plano anual com desconto. A Ana ficou de validar a margem com o financeiro <strong>até sexta</strong>.",
+        cites: [
+          { ic: "granola", ttl: "1:1 com a Ana", meta: "reunião · hoje" },
+          { ic: "notion", ttl: "Decisões · Projeto Atlas", meta: "Notion · hoje" },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Criar tarefa + agendar",
+    steps: [
+      { type: "user", step: 1, text: "Cria uma tarefa pra eu revisar a proposta e bloqueia 1h na minha agenda amanhã às 14h." },
+      { type: "tool", step: 4, fn: "notion_create_page", arg: 'database: "Tarefas"', delay: 1300 },
+      { type: "tool", step: 4, fn: "create_calendar_event", arg: "qui 14:00–15:00", delay: 1300 },
+      {
+        type: "answer",
+        step: 4,
+        html: "Feito. Tarefa criada e horário bloqueado:",
+        actions: [
+          { ic: "notion", tt: "Revisar proposta comercial", mt: "Tarefas · prazo: sexta" },
+          { ic: "calendar", tt: "Revisão da proposta", mt: "quinta · 14:00–15:00" },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Enviar p/ assinatura",
+    steps: [
+      { type: "user", step: 1, text: "Manda esse contrato pro João assinar." },
+      { type: "tool", step: 4, fn: "rubrix_send_document", arg: 'doc: "Contrato", signatário: "João"', delay: 1500 },
+      {
+        type: "answer",
+        step: 4,
+        html: "Pronto, enviei o documento para assinatura digital pela <strong>Rubrix</strong>. O João recebeu o pedido e você é avisado quando ele assinar.",
+        actions: [{ ic: "sign", tt: "Contrato enviado para assinatura", mt: "via Rubrix · aguardando assinatura" }],
+      },
+    ],
+  },
+  {
+    label: "Briefing do dia",
+    steps: [
+      { type: "user", step: 1, text: "Me prepara pro meu dia." },
+      { type: "tool", step: 2, fn: "list_events", arg: "hoje", delay: 1100 },
+      { type: "tool", step: 2, fn: "brain_search", arg: '"pendências desta semana"', delay: 1300 },
+      {
+        type: "answer",
+        step: 3,
+        html: "Você tem <strong>3 compromissos</strong>: review de sprint às 10h, almoço com investidor às 12h30 e 1:1 com a Ana às 16h. Antes do almoço, vale revisar a <strong>proposta comercial</strong>: o investidor citou preços na última conversa.",
+        cites: [
+          { ic: "calendar", ttl: "Agenda de hoje", meta: "3 eventos" },
+          { ic: "granola", ttl: "Call com investidor", meta: "reunião · semana passada" },
+        ],
+      },
+    ],
+  },
+];
+
+export const CHAT_CLIENTS: Record<string, { ic: IconName; name: string }> = {
+  claude: { ic: "claude", name: "Claude.ai" },
+  code: { ic: "claudecode", name: "Claude Code" },
+  gpt: { ic: "chatgpt", name: "ChatGPT" },
+};
+
+export const CHAT_PROMPTS = CHAT_SCENARIOS.map((s) => s.label);
diff --git a/web/lib/marketing/feed-scenario.ts b/web/lib/marketing/feed-scenario.ts
new file mode 100644
index 0000000..8d139e6
--- /dev/null
+++ b/web/lib/marketing/feed-scenario.ts
@@ -0,0 +1,106 @@
+// Data + helpers for the FeedDemo ("alimente seu cérebro"), ported from
+// zinom-site/public/landing-feed.js. Pure (no DOM) so it is unit-testable.
+import type { IconName } from "@/components/marketing/icons";
+
+export type FeedSource = "granola" | "notion" | "calendar" | "zinom";
+
+export interface FeedStep {
+  time: string;
+  source: FeedSource;
+  stepLabel: string;
+  card?: { title: string; meta: string; src: string };
+  mem?: { tag: FeedSource; title: string; chunks: string };
+  payoff?: boolean;
+  dur: number;
+}
+
+export const FEED_STEPS: FeedStep[] = [
+  {
+    time: "09:00",
+    source: "granola",
+    stepLabel: "Reunião",
+    card: {
+      title: "1:1 com a Ana",
+      meta: "Você só participa da reunião. O Granola grava e resume a conversa sozinho.",
+      src: "GRANOLA · transcript automático",
+    },
+    mem: { tag: "granola", title: "Reunião · 1:1 com a Ana", chunks: "+18 trechos" },
+    dur: 5200,
+  },
+  {
+    time: "10:42",
+    source: "notion",
+    stepLabel: "Notion",
+    card: {
+      title: "Decisões · Projeto Atlas",
+      meta: "Você escreve no Notion como sempre escreveu. Nenhum passo extra.",
+      src: "NOTION · página atualizada",
+    },
+    mem: { tag: "notion", title: "Página · Decisões · Projeto Atlas", chunks: "+9 trechos" },
+    dur: 5200,
+  },
+  {
+    time: "12:10",
+    source: "calendar",
+    stepLabel: "Agenda",
+    card: {
+      title: "Almoço com investidor · sex 12:30",
+      meta: "Um convite chega na sua agenda. O Zinom sincroniza via iCal.",
+      src: "GOOGLE CALENDAR · evento novo",
+    },
+    mem: { tag: "calendar", title: "Evento · Almoço com investidor", chunks: "+1 evento" },
+    dur: 5200,
+  },
+  {
+    time: "15:30",
+    source: "granola",
+    stepLabel: "Reunião",
+    card: {
+      title: "Review de sprint",
+      meta: "Mais uma reunião do dia, capturada e resumida automaticamente.",
+      src: "GRANOLA · transcript automático",
+    },
+    mem: { tag: "granola", title: "Reunião · Review de sprint", chunks: "+24 trechos" },
+    dur: 5200,
+  },
+  { time: "23:00", source: "zinom", stepLabel: "Pergunte", payoff: true, dur: 9000 },
+];
+
+export const TAG_CLASS: Record<string, string> = {
+  granola: "t-granola",
+  notion: "t-notion",
+  calendar: "t-calendar",
+};
+export const TAG_LABEL: Record<string, string> = {
+  granola: "GRANOLA",
+  notion: "NOTION",
+  calendar: "AGENDA",
+};
+
+export const FEED_QUERY = '"o que ficou decidido com a Ana?"';
+export const FEED_ANSWER_HTML =
+  "Vocês decidiram <b>manter o Pro a R$ 9,99</b> e testar um plano anual com desconto. " +
+  "A Ana valida com o financeiro até sexta, <b>antes do seu almoço com o investidor</b>.";
+
+// Cumulative chunk count up to and including step `idx`.
+export function chunkTargetUpTo(idx: number): number {
+  let n = 0;
+  FEED_STEPS.slice(0, idx + 1).forEach((s) => {
+    if (s.mem) n += parseInt(s.mem.chunks.replace(/\D/g, ""), 10);
+  });
+  return n;
+}
+
+export const FEED_ICON: Record<FeedSource, IconName> = {
+  granola: "granola",
+  notion: "notion",
+  calendar: "calendar",
+  zinom: "zinom",
+};
+
+// Payoff hits highlighted in the brain panel: memory index → rerank score.
+export const FEED_HITS = [
+  { idx: 0, score: "0.94" },
+  { idx: 1, score: "0.87" },
+  { idx: 2, score: "0.71" },
+];
diff --git a/web/next.config.ts b/web/next.config.ts
index 9853bb3..fe81565 100644
--- a/web/next.config.ts
+++ b/web/next.config.ts
@@ -1,9 +1,17 @@
 import type { NextConfig } from "next";
 
+// Two builds share this config, selected by env:
+//   - App build:     NEXT_PUBLIC_BASE_PATH=/app  → basePath /app, out/ nested
+//                    to out/app/ by scripts/nest-export.mjs (served by the engine).
+//   - Public build:  NEXT_PUBLIC_BASE_PATH unset → no basePath, landing at /;
+//                    MARKETING_BUILD=1 makes app/page.tsx render the landing
+//                    instead of the app redirect. NEXT_DIST_DIR splits the .next
+//                    cache so the two builds never clobber each other's cache.
 const nextConfig: NextConfig = {
   output: "export",
   trailingSlash: true,
   images: { unoptimized: true },
+  distDir: process.env.NEXT_DIST_DIR || ".next",
   assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH || undefined,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH || undefined,
 };
diff --git a/web/package.json b/web/package.json
index 8eb3636..5c17709 100644
--- a/web/package.json
+++ b/web/package.json
@@ -6,6 +6,8 @@
   "scripts": {
     "dev": "next dev -p 3500",
     "build": "next build && node scripts/nest-export.mjs",
+    "build:public": "MARKETING_BUILD=1 NEXT_DIST_DIR=.next-public next build && node scripts/export-landing.mjs",
+    "build:public-next": "MARKETING_BUILD=1 NEXT_DIST_DIR=.next-public next build && node scripts/nest-export.mjs",
     "lint": "next lint",
     "typecheck": "tsc --noEmit",
     "test": "vitest run"
diff --git a/web/scripts/export-landing.mjs b/web/scripts/export-landing.mjs
new file mode 100644
index 0000000..4d12292
--- /dev/null
+++ b/web/scripts/export-landing.mjs
@@ -0,0 +1,104 @@
+// export-landing.mjs — stages the public (no-basePath) landing export for the
+// zinom-site Cloudflare Worker, which serves public/* at the root domain and
+// proxies everything else to the engine (see zinom-site/src/worker.js).
+//
+// Input:  out/ produced by `next build` WITHOUT NEXT_PUBLIC_BASE_PATH and with
+//         MARKETING_BUILD=1 (so app/page.tsx renders the landing at /).
+// Output: out-public/ — a local mirror of what zinom-site/public/ would become:
+//           - index.html        (the landing, referencing /_next/* with no prefix)
+//           - 404.html          (Next's export 404)
+//           - _next/**          (self-hosted chunks + CSS + fonts, served 'self')
+//           - favicon.svg, privacidade.html, termos.html, plano.html, login.html
+//             (preserved verbatim from the existing zinom-site/public/)
+//
+// This script DOES NOT write to zinom-site. Deploy is a separate, manual copy of
+// out-public/* into zinom-site/public/ followed by the mandatory 401 check.
+import {
+  cpSync,
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  rmSync,
+  statSync,
+} from "node:fs";
+import { join, resolve } from "node:path";
+
+const web = process.cwd();
+const out = join(web, "out");
+const staging = join(web, "out-public");
+
+// zinom-site lives next to zinom-engine; allow override for CI / odd checkouts.
+const SITE_PUBLIC =
+  process.env.ZINOM_SITE_PUBLIC ||
+  resolve(web, "../../../../../zinom-site/public");
+
+if (!existsSync(join(out, "index.html"))) {
+  console.error(
+    "export-landing: out/index.html missing — run the public build first:\n" +
+      "  MARKETING_BUILD=1 NEXT_DIST_DIR=.next-public bun run build:public-next"
+  );
+  process.exit(1);
+}
+
+// Fresh staging dir.
+rmSync(staging, { recursive: true, force: true });
+mkdirSync(staging, { recursive: true });
+
+// 1) Copy the landing entry + Next 404 + the whole _next/ asset tree.
+for (const name of ["index.html", "404.html", "_next"]) {
+  const src = join(out, name);
+  if (existsSync(src)) cpSync(src, join(staging, name), { recursive: true });
+}
+
+// 2) Preserve the existing static files the worker still serves at the root.
+//    These belong to zinom-site, not to this export — copy them in (read-only
+//    source) so the local mirror is faithful. Missing source = skip (warn).
+const PRESERVE = [
+  "favicon.svg",
+  "privacidade.html",
+  "termos.html",
+  "plano.html",
+  "login.html",
+  "login.js",
+];
+const preserved = [];
+const missing = [];
+for (const name of PRESERVE) {
+  const src = join(SITE_PUBLIC, name);
+  if (existsSync(src)) {
+    cpSync(src, join(staging, name));
+    preserved.push(name);
+  } else {
+    missing.push(name);
+  }
+}
+
+// 3) Sanity: index.html must reference /_next/ with NO /app prefix.
+const indexHtml = existsSync(join(staging, "index.html"))
+  ? readFileSync(join(staging, "index.html"), "utf8")
+  : "";
+const refsNext = indexHtml.includes('"/_next/') || indexHtml.includes("'/_next/");
+const refsAppPrefix = indexHtml.includes("/app/_next/");
+
+function dirSize(p) {
+  let n = 0;
+  for (const e of readdirSync(p, { withFileTypes: true })) {
+    const fp = join(p, e.name);
+    n += e.isDirectory() ? dirSize(fp) : statSync(fp).size;
+  }
+  return n;
+}
+
+console.log("export-landing: staged ->", staging);
+console.log("  index.html references /_next/ :", refsNext);
+console.log("  index.html has /app/ prefix    :", refsAppPrefix, "(must be false)");
+console.log("  preserved from zinom-site/public:", preserved.join(", ") || "(none)");
+if (missing.length)
+  console.log("  WARN missing preserved files    :", missing.join(", "));
+console.log("  total staged size               :", (dirSize(staging) / 1024).toFixed(0), "KB");
+
+if (!refsNext || refsAppPrefix) {
+  console.error("export-landing: asset path check FAILED");
+  process.exit(1);
+}

From b6c11e7ffca13fdb8b3a903fd83eb7abd2af4fba Mon Sep 17 00:00:00 2001
From: bruno moniz <brunoomoniz@gmail.com>
Date: Thu, 18 Jun 2026 11:44:21 -0300
Subject: [PATCH 2/3] feat(landing): SP2 marketing components + page wiring
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All landing sections ported faithfully from zinom-site/public (index.html +
landing.js) as React, zero inline scripts:
- Nav (desktop links + CTAs, hamburger w/ aria, scroll shadow, Escape/resize close)
- Hero (eyebrow, <em>memória</em> title, lede, hero-eq) + SourcesStrip (5 chips)
- AccessCard (#acesso): invite/waitlist tabs → /portal/register, /portal/request-invite;
  ?invite/?email prefill, ?error=link top note, ok/field-err states
- HowItWorks (#como): animated diagram (6 nodes rotate `lit` @1400ms) + 3 steps
- Pricing (#planos): 4 plans (Free/Essencial/Pro featured/Ilimitado) w/ off feats
- CtaBand + Footer (4 cols, all links incl. mailto/privacidade/termos/MCP)
- icons.tsx: + ICON_SVG raw strings for the imperatively-built demo nodes

page.tsx is the build switch: MARKETING_BUILD=1 renders <Landing/> at / with the
SEO metadata (title/description/favicon, lang pt-BR from root layout); otherwise
the /app/ → /inicio/ redirect (moved to AppRedirect client child). "Entrar" →
/app/login/. export-landing reads the distDir export (EXPORT_DIR).

Public build verified: out-public/index.html references /_next/ with no /app
prefix; Inter + JetBrains Mono self-hosted under _next/static/media (no CDN).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/app/AppRedirect.tsx                   |  13 +
 web/app/page.tsx                          |  25 +-
 web/components/marketing/AccessCard.tsx   | 212 +++++++++++
 web/components/marketing/ChatDemo.tsx     | 328 +++++++++++++++++
 web/components/marketing/CtaBand.tsx      |  23 ++
 web/components/marketing/FeedDemo.tsx     | 423 ++++++++++++++++++++++
 web/components/marketing/Footer.tsx       |  56 +++
 web/components/marketing/Hero.tsx         |  55 +++
 web/components/marketing/HowItWorks.tsx   | 118 ++++++
 web/components/marketing/Landing.tsx      |  29 ++
 web/components/marketing/Nav.tsx          | 116 ++++++
 web/components/marketing/Pricing.tsx      | 160 ++++++++
 web/components/marketing/SourcesStrip.tsx |  24 ++
 web/components/marketing/icons.tsx        |  35 ++
 web/package.json                          |   3 +-
 web/scripts/export-landing.mjs            |   6 +-
 16 files changed, 1614 insertions(+), 12 deletions(-)
 create mode 100644 web/app/AppRedirect.tsx
 create mode 100644 web/components/marketing/AccessCard.tsx
 create mode 100644 web/components/marketing/ChatDemo.tsx
 create mode 100644 web/components/marketing/CtaBand.tsx
 create mode 100644 web/components/marketing/FeedDemo.tsx
 create mode 100644 web/components/marketing/Footer.tsx
 create mode 100644 web/components/marketing/Hero.tsx
 create mode 100644 web/components/marketing/HowItWorks.tsx
 create mode 100644 web/components/marketing/Landing.tsx
 create mode 100644 web/components/marketing/Nav.tsx
 create mode 100644 web/components/marketing/Pricing.tsx
 create mode 100644 web/components/marketing/SourcesStrip.tsx

diff --git a/web/app/AppRedirect.tsx b/web/app/AppRedirect.tsx
new file mode 100644
index 0000000..a2aa941
--- /dev/null
+++ b/web/app/AppRedirect.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+// The /app build's root ("/app/") sends users to the dashboard.
+export default function AppRedirect() {
+  const router = useRouter();
+  useEffect(() => {
+    router.replace("/inicio/");
+  }, [router]);
+  return null;
+}
diff --git a/web/app/page.tsx b/web/app/page.tsx
index f01eb2e..cb4f975 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -1,12 +1,21 @@
-"use client";
+import type { Metadata } from "next";
+import AppRedirect from "./AppRedirect";
+import { Landing } from "@/components/marketing/Landing";
 
-import { useEffect } from "react";
-import { useRouter } from "next/navigation";
+// One file, two builds (see next.config.ts):
+//   - MARKETING_BUILD=1  → public landing at / (no basePath, → zinom-site/public)
+//   - otherwise          → /app/ redirect to the dashboard (the engine-served app)
+const IS_MARKETING = process.env.MARKETING_BUILD === "1";
+
+export const metadata: Metadata = IS_MARKETING
+  ? {
+      title: "Zinom · dê memória à sua IA",
+      description:
+        "O Zinom conecta suas reuniões, anotações do Notion e calendários num cérebro pesquisável e dá memória ao ChatGPT, ao Claude.ai, ao Claude Code ou a qualquer IA via MCP.",
+      icons: { icon: "/favicon.svg" },
+    }
+  : {};
 
 export default function Page() {
-  const router = useRouter();
-  useEffect(() => {
-    router.replace("/inicio/");
-  }, [router]);
-  return null;
+  return IS_MARKETING ? <Landing /> : <AppRedirect />;
 }
diff --git a/web/components/marketing/AccessCard.tsx b/web/components/marketing/AccessCard.tsx
new file mode 100644
index 0000000..cb1cbd2
--- /dev/null
+++ b/web/components/marketing/AccessCard.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Icon } from "./icons";
+import { registerWithInvite, requestInvite } from "@/hooks/marketing-access";
+
+type Tab = "invite" | "waitlist";
+
+export function AccessCard() {
+  const [tab, setTab] = useState<Tab>("invite");
+  const [topNote, setTopNote] = useState("");
+
+  // invite form
+  const [invite, setInvite] = useState("");
+  const [regEmail, setRegEmail] = useState("");
+  const [inviteSent, setInviteSent] = useState(false);
+  const [inviteErr, setInviteErr] = useState(false);
+  const [inviteBusy, setInviteBusy] = useState(false);
+
+  // waitlist form
+  const [reqEmail, setReqEmail] = useState("");
+  const [reqNote, setReqNote] = useState("");
+  const [waitSent, setWaitSent] = useState(false);
+  const [waitErr, setWaitErr] = useState(false);
+  const [waitBusy, setWaitBusy] = useState(false);
+
+  // Query prefill + expired-link note (ported from landing.js handleQuery()).
+  useEffect(() => {
+    const p = new URLSearchParams(window.location.search);
+    const code = p.get("invite");
+    const email = p.get("email");
+    if (code) setInvite(code);
+    if (email) setRegEmail(email);
+    if (code || email) setTab("invite");
+    if (p.get("error") === "link") {
+      setTopNote("Esse link expirou ou já foi usado. Peça um novo abaixo.");
+    }
+  }, []);
+
+  const switchTab = (t: Tab) => {
+    setTab(t);
+    setInviteErr(false);
+    setWaitErr(false);
+  };
+
+  const onInvite = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setInviteErr(false);
+    setInviteBusy(true);
+    const res = await registerWithInvite({
+      invite_code: invite,
+      email: regEmail,
+    });
+    setInviteBusy(false);
+    if (res.ok) setInviteSent(true);
+    else setInviteErr(true);
+  };
+
+  const onWaitlist = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setWaitErr(false);
+    setWaitBusy(true);
+    const res = await requestInvite({ email: reqEmail, note: reqNote });
+    setWaitBusy(false);
+    if (res.ok) setWaitSent(true);
+    else setWaitErr(true);
+  };
+
+  return (
+    <div className="access" id="acesso">
+      <div className="access-head">
+        <h3>Acesse o Zinom</h3>
+        <p>Use seu código de convite ou peça acesso à lista de espera.</p>
+        <p className={"access-note" + (topNote ? " show" : "")} id="error">
+          {topNote}
+        </p>
+      </div>
+      <div className="tabs" role="tablist">
+        <div
+          className={"tab" + (tab === "invite" ? " active" : "")}
+          data-tab="invite"
+          role="tab"
+          onClick={() => switchTab("invite")}
+        >
+          Tenho convite
+        </div>
+        <div
+          className={"tab" + (tab === "waitlist" ? " active" : "")}
+          data-tab="waitlist"
+          role="tab"
+          onClick={() => switchTab("waitlist")}
+        >
+          Pedir convite
+        </div>
+      </div>
+
+      <div
+        className={"pane" + (tab === "invite" ? " active" : "")}
+        data-pane="invite"
+      >
+        {!inviteSent ? (
+          <form onSubmit={onInvite} data-form="invite">
+            <div className="field">
+              <label htmlFor="invite">Código de convite</label>
+              <input
+                id="invite"
+                name="invite_code"
+                type="text"
+                placeholder="ZIN-XXXX-XXXX"
+                autoComplete="off"
+                required
+                value={invite}
+                onChange={(e) => setInvite(e.target.value)}
+              />
+            </div>
+            <div className="field">
+              <label htmlFor="reg-email">Seu e-mail</label>
+              <input
+                id="reg-email"
+                name="email"
+                type="email"
+                placeholder="voce@email.com"
+                required
+                value={regEmail}
+                onChange={(e) => setRegEmail(e.target.value)}
+              />
+            </div>
+            <button
+              className="btn btn-primary btn-lg btn-block"
+              type="submit"
+              disabled={inviteBusy}
+            >
+              Criar conta
+            </button>
+            <p className={"field-err" + (inviteErr ? " show" : "")} data-err="invite">
+              Convite inválido ou já usado. Confira o código e tente de novo.
+            </p>
+            <p className="hint">Ao continuar você concorda com os termos de uso.</p>
+          </form>
+        ) : (
+          <div className="ok-msg show" data-ok="invite">
+            <div className="check">
+              <Icon name="check" style={{ width: 24, height: 24 }} />
+            </div>
+            <h4>Tudo certo</h4>
+            <p>
+              Enviamos um link de acesso para o seu e-mail. Confira a caixa de
+              entrada.
+            </p>
+          </div>
+        )}
+      </div>
+
+      <div
+        className={"pane" + (tab === "waitlist" ? " active" : "")}
+        data-pane="waitlist"
+      >
+        {!waitSent ? (
+          <form onSubmit={onWaitlist} data-form="waitlist">
+            <div className="field">
+              <label htmlFor="req-email">Seu e-mail</label>
+              <input
+                id="req-email"
+                name="email"
+                type="email"
+                placeholder="voce@email.com"
+                required
+                value={reqEmail}
+                onChange={(e) => setReqEmail(e.target.value)}
+              />
+            </div>
+            <div className="field">
+              <label htmlFor="req-note">
+                Como você pretende usar o Zinom?{" "}
+                <span style={{ color: "var(--muted)", fontWeight: 400 }}>
+                  (opcional)
+                </span>
+              </label>
+              <input
+                id="req-note"
+                name="note"
+                type="text"
+                placeholder="Ex.: organizar reuniões e notas do trabalho"
+                value={reqNote}
+                onChange={(e) => setReqNote(e.target.value)}
+              />
+            </div>
+            <button
+              className="btn btn-primary btn-lg btn-block"
+              type="submit"
+              disabled={waitBusy}
+            >
+              Entrar na lista de espera
+            </button>
+            <p className={"field-err" + (waitErr ? " show" : "")} data-err="waitlist">
+              Não deu certo. Confira o e-mail e tente de novo.
+            </p>
+            <p className="hint">Liberamos convites em lotes. Sem spam.</p>
+          </form>
+        ) : (
+          <div className="ok-msg show" data-ok="waitlist">
+            <div className="check">
+              <Icon name="check" style={{ width: 24, height: 24 }} />
+            </div>
+            <h4>Você está na lista</h4>
+            <p>Avisaremos por e-mail assim que seu convite estiver pronto.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web/components/marketing/ChatDemo.tsx b/web/components/marketing/ChatDemo.tsx
new file mode 100644
index 0000000..44032a5
--- /dev/null
+++ b/web/components/marketing/ChatDemo.tsx
@@ -0,0 +1,328 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Icon } from "./icons";
+import { ICON_SVG } from "./icons";
+import { useReveal } from "./useReveal";
+import {
+  CHAT_SCENARIOS,
+  CHAT_CLIENTS,
+  CHAT_PROMPTS,
+  type ChatStep,
+} from "@/lib/marketing/chat-scenario";
+
+// Imperative port of landing-chat.js (typewriter user msg, tool-calls with
+// spinner→✓, typing dots, bubble + cites/actions). React owns the static chrome
+// and the active-tab/-prompt/-step state; the chat body is hand-driven via refs
+// and timers, cleaned up on unmount.
+
+export function ChatDemo() {
+  const copy = useReveal<HTMLDivElement>();
+  const chat = useReveal<HTMLDivElement>(120);
+
+  const body = useRef<HTMLDivElement>(null);
+  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
+  const started = useRef(false);
+
+  const [client, setClient] = useState<keyof typeof CHAT_CLIENTS>("claude");
+  const [scenario, setScenario] = useState(0);
+  const [activeStep, setActiveStep] = useState(0);
+
+  const clientRef = useRef(client);
+  clientRef.current = client;
+
+  const later = useCallback((fn: () => void, ms: number) => {
+    const t = setTimeout(fn, ms);
+    timers.current.push(t);
+    return ms;
+  }, []);
+  const clearTimers = useCallback(() => {
+    timers.current.forEach(clearTimeout);
+    timers.current = [];
+  }, []);
+
+  const el = (tag: string, cls?: string, html?: string) => {
+    const e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (html != null) e.innerHTML = html;
+    return e;
+  };
+  const scrollBottom = () => {
+    if (body.current) body.current.scrollTop = body.current.scrollHeight;
+  };
+
+  const aiStack = useCallback((): HTMLElement => {
+    const last = body.current?.lastElementChild as HTMLElement | null;
+    if (last && last.classList.contains("msg") && last.classList.contains("ai")) {
+      return last.querySelector(".stack") as HTMLElement;
+    }
+    const m = el("div", "msg ai");
+    m.innerHTML =
+      '<span class="av"><span class="ic">' +
+      ICON_SVG[CHAT_CLIENTS[clientRef.current].ic] +
+      '</span></span><span class="stack"></span>';
+    body.current?.appendChild(m);
+    return m.querySelector(".stack") as HTMLElement;
+  }, []);
+
+  const addUser = useCallback(
+    (text: string, done: () => void) => {
+      const m = el("div", "msg user");
+      const b = el("span", "bubble", "");
+      m.appendChild(b);
+      body.current?.appendChild(m);
+      let i = 0;
+      const iv = setInterval(() => {
+        b.textContent = text.slice(0, ++i);
+        scrollBottom();
+        if (i >= text.length) {
+          clearInterval(iv);
+          later(done, 500);
+        }
+      }, 26);
+      timers.current.push(iv);
+    },
+    [later]
+  );
+
+  const addTool = useCallback(
+    (fn: string, arg: string, delay: number, done: () => void) => {
+      const stack = aiStack();
+      const t = el(
+        "div",
+        "tool-call",
+        '<span class="tmk">' +
+          ICON_SVG.zinom +
+          '</span><span class="tk">' +
+          fn +
+          '</span><span class="arg">' +
+          arg +
+          '</span><span class="spin"></span>'
+      );
+      stack.appendChild(t);
+      scrollBottom();
+      later(() => {
+        const sp = t.querySelector(".spin");
+        if (sp) sp.outerHTML = '<span class="okk">✓</span>';
+        later(done, 350);
+      }, delay);
+    },
+    [aiStack, later]
+  );
+
+  const addAnswer = useCallback(
+    (s: Extract<ChatStep, { type: "answer" }>, done: () => void) => {
+      const stack = aiStack();
+      const typing = el("div", "typing", "<i></i><i></i><i></i>");
+      stack.appendChild(typing);
+      scrollBottom();
+      later(() => {
+        typing.remove();
+        const b = el("div", "bubble ai", s.html);
+        if (s.cites) {
+          const c = el("div", "cites", '<span class="lbl">Fontes</span>');
+          s.cites.forEach((ct) => {
+            c.appendChild(
+              el(
+                "a",
+                "cite",
+                '<span class="ic">' +
+                  ICON_SVG[ct.ic] +
+                  '</span><span class="ttl">' +
+                  ct.ttl +
+                  '</span><span class="meta">' +
+                  ct.meta +
+                  "</span>"
+              )
+            );
+          });
+          b.appendChild(c);
+        }
+        stack.appendChild(b);
+        if (s.actions) {
+          const ac = el("div", "actions", "");
+          s.actions.forEach((a, i) => {
+            const row = el(
+              "div",
+              "action",
+              '<span class="ck"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>' +
+                '<span class="ic">' +
+                ICON_SVG[a.ic] +
+                '</span><span class="col"><span class="tt">' +
+                a.tt +
+                '</span><span class="mt">' +
+                a.mt +
+                "</span></span>"
+            );
+            row.style.opacity = "0";
+            row.style.transition = "opacity .35s ease";
+            ac.appendChild(row);
+            later(() => {
+              row.style.opacity = "1";
+              scrollBottom();
+            }, 900 + i * 450);
+          });
+          stack.appendChild(ac);
+        }
+        scrollBottom();
+        later(done, 600);
+      }, 1100);
+    },
+    [aiStack, later]
+  );
+
+  const showReplay = useCallback((onReplay: () => void) => {
+    const r = el(
+      "div",
+      "chat-replay",
+      '<button type="button"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg> Ver de novo</button>'
+    );
+    r.querySelector("button")?.addEventListener("click", onReplay);
+    body.current?.appendChild(r);
+    scrollBottom();
+  }, []);
+
+  const play = useCallback(
+    (scIdx: number) => {
+      clearTimers();
+      setScenario(scIdx);
+      if (body.current) body.current.innerHTML = "";
+      setActiveStep(0);
+
+      const steps = CHAT_SCENARIOS[scIdx].steps;
+      let k = 0;
+      const next = () => {
+        if (k >= steps.length) {
+          later(() => {
+            setActiveStep(0);
+            showReplay(() => play(scIdx));
+          }, 800);
+          return;
+        }
+        const s = steps[k++];
+        setActiveStep(s.step);
+        if (s.type === "user") later(() => addUser(s.text, next), 350);
+        else if (s.type === "tool") addTool(s.fn, s.arg, s.delay, next);
+        else addAnswer(s, next);
+      };
+      next();
+    },
+    [addAnswer, addTool, addUser, clearTimers, later, showReplay]
+  );
+
+  const pickClient = useCallback(
+    (cl: keyof typeof CHAT_CLIENTS) => {
+      setClient(cl);
+      clientRef.current = cl;
+      play(scenario);
+    },
+    [play, scenario]
+  );
+
+  useEffect(() => {
+    if (!chat.shown || started.current) return;
+    started.current = true;
+    play(0);
+    return () => clearTimers();
+  }, [chat.shown, play, clearTimers]);
+
+  return (
+    <section className="section" id="usar">
+      <div className="wrap demo-grid">
+        <div
+          className={"demo-copy reveal" + (copy.shown ? " in" : "")}
+          ref={copy.ref}
+        >
+          <p className="sec-tag">Usar na sua IA</p>
+          <h2>Pergunte. Sua IA busca, responde com a fonte e age.</h2>
+          <p>
+            O Zinom não é mais um chat de IA. É a memória conectada ao ChatGPT,
+            ao Claude.ai ou ao Claude Code. Acompanhe os 4 passos enquanto a demo
+            roda ao lado.
+          </p>
+          <div className="demo-steps">
+            {[
+              { n: 1, b: "Você pergunta na sua IA", s: "Claude.ai, ChatGPT ou Claude Code, na que você preferir." },
+              { n: 2, b: "Ela busca no seu cérebro", code: "brain_search", s: " encontra reuniões, páginas e eventos relevantes." },
+              { n: 3, b: "Responde com a fonte", s: "Toda resposta vem com link para a reunião, página ou evento original." },
+              { n: 4, b: "E age por você", s: "Cria tarefas e páginas no Notion, agenda eventos no Calendar e envia documentos para assinatura." },
+            ].map((d) => (
+              <div
+                key={d.n}
+                className={"dstep" + (activeStep === d.n ? " on" : "")}
+                data-step={d.n}
+              >
+                <span className="dn">{d.n}</span>
+                <span>
+                  <b>{d.b}</b>
+                  <span>
+                    {d.code ? (
+                      <code style={{ fontFamily: "var(--mono)", fontSize: 12 }}>
+                        {d.code}
+                      </code>
+                    ) : null}
+                    {d.s}
+                  </span>
+                </span>
+              </div>
+            ))}
+          </div>
+          <div
+            className="hero-eq"
+            style={{ marginTop: 20 }}
+            aria-label="Capacidade de assinatura digital via Rubrix"
+          >
+            <span className="eq-chip">
+              <Icon name="sign" />
+              Assinatura digital
+            </span>
+            <span className="eq-chip ai">
+              Envie documentos para assinatura direto pela sua IA (via Rubrix).
+            </span>
+          </div>
+          <p className="demo-note">Troque o exemplo nos botões acima do chat →</p>
+        </div>
+
+        <div className={"chat reveal" + (chat.shown ? " in" : "")} ref={chat.ref} id="chat">
+          <div className="chat-bar">
+            <span className="cb-brand">
+              <span className="mk">
+                <Icon name="zinom" className="ic" style={{ width: "100%", height: "100%" }} />
+              </span>{" "}
+              Zinom <span className="cb-sep">via MCP</span>
+            </span>
+            <span className="clients" id="clients" role="tablist">
+              {(Object.keys(CHAT_CLIENTS) as (keyof typeof CHAT_CLIENTS)[]).map(
+                (cl) => (
+                  <button
+                    key={cl}
+                    className={"cl" + (client === cl ? " active" : "")}
+                    data-cl={cl}
+                    type="button"
+                    onClick={() => pickClient(cl)}
+                  >
+                    <Icon name={CHAT_CLIENTS[cl].ic} />
+                    {CHAT_CLIENTS[cl].name}
+                  </button>
+                )
+              )}
+            </span>
+          </div>
+          <div className="chat-prompts" id="chat-prompts">
+            {CHAT_PROMPTS.map((label, i) => (
+              <button
+                key={i}
+                className={"cp" + (scenario === i ? " active" : "")}
+                type="button"
+                onClick={() => play(i)}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+          <div className="chat-body" id="chat-body" ref={body} />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/marketing/CtaBand.tsx b/web/components/marketing/CtaBand.tsx
new file mode 100644
index 0000000..9a27d15
--- /dev/null
+++ b/web/components/marketing/CtaBand.tsx
@@ -0,0 +1,23 @@
+export function CtaBand() {
+  return (
+    <section className="cta-band">
+      <div className="wrap" style={{ maxWidth: "42em" }}>
+        <h2>Dê à sua IA a memória que faltava.</h2>
+        <p>Convites liberados em lotes. Entre na lista e seja avisado.</p>
+        <div className="row">
+          <a className="btn btn-primary btn-lg" href="#acesso">
+            Solicitar convite
+          </a>
+          <a
+            className="btn btn-ghost btn-lg"
+            href="https://github.com/BrunooMoniz/notion-mcp"
+            target="_blank"
+            rel="noopener"
+          >
+            Ver no GitHub
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/marketing/FeedDemo.tsx b/web/components/marketing/FeedDemo.tsx
new file mode 100644
index 0000000..32ca137
--- /dev/null
+++ b/web/components/marketing/FeedDemo.tsx
@@ -0,0 +1,423 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Icon, ICON_SVG } from "./icons";
+import { useReveal } from "./useReveal";
+import {
+  FEED_STEPS,
+  FEED_ICON,
+  FEED_HITS,
+  FEED_QUERY,
+  FEED_ANSWER_HTML,
+  TAG_CLASS,
+  TAG_LABEL,
+  chunkTargetUpTo,
+  type FeedStep,
+} from "@/lib/marketing/feed-scenario";
+
+// Imperative DOM port of landing-feed.js — the original drives nodes directly;
+// here we keep the same approach inside a single mounted React shell (refs +
+// timers) rather than rebuild it as declarative state, to preserve exact timing
+// and the deterministic rebuild-up-to-idx behaviour. React owns the static
+// chrome; the animated body is hand-driven, cleaned up on unmount.
+
+const PLAY =
+  '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15l13-7.5z"/></svg>';
+const PAUSE =
+  '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4.5" width="4" height="15" rx="1"/><rect x="14" y="4.5" width="4" height="15" rx="1"/></svg>';
+
+export function FeedDemo() {
+  const head = useReveal<HTMLDivElement>();
+  const lab = useReveal<HTMLDivElement>(160);
+
+  // refs to the animated sub-DOM
+  const dayHead = useRef<HTMLSpanElement>(null);
+  const clock = useRef<HTMLSpanElement>(null);
+  const dayBody = useRef<HTMLDivElement>(null);
+  const memList = useRef<HTMLDivElement>(null);
+  const count = useRef<HTMLElement>(null);
+  const lane = useRef<HTMLDivElement>(null);
+  const search = useRef<HTMLDivElement>(null);
+  const queryText = useRef<HTMLSpanElement>(null);
+  const answer = useRef<HTMLDivElement>(null);
+  const playBtn = useRef<HTMLButtonElement>(null);
+
+  const [activeIdx, setActiveIdx] = useState(0);
+  const [doneIdx, setDoneIdx] = useState(-1);
+  const [playing, setPlaying] = useState(true);
+
+  const st = useRef({
+    idx: -1,
+    playing: true,
+    timer: 0 as ReturnType<typeof setTimeout> | 0,
+    typeTimer: 0 as ReturnType<typeof setInterval> | 0,
+    chunkTimer: 0 as ReturnType<typeof setInterval> | 0,
+    chunks: 0,
+    started: false,
+  });
+
+  const el = (tag: string, cls?: string, html?: string) => {
+    const e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (html != null) e.innerHTML = html;
+    return e;
+  };
+
+  const tickChunks = useCallback((target: number) => {
+    clearInterval(st.current.chunkTimer as number);
+    st.current.chunkTimer = setInterval(() => {
+      if (st.current.chunks >= target) {
+        clearInterval(st.current.chunkTimer as number);
+        st.current.chunks = target;
+      } else {
+        st.current.chunks += Math.max(
+          1,
+          Math.ceil((target - st.current.chunks) / 6)
+        );
+      }
+      if (count.current) count.current.textContent = String(st.current.chunks);
+    }, 70);
+  }, []);
+
+  const addDayCard = useCallback((s: FeedStep) => {
+    if (!s.card) return null;
+    const c = el(
+      "div",
+      "fl-card",
+      '<span class="badge-ic ' +
+        s.source +
+        '"><span class="ic">' +
+        ICON_SVG[FEED_ICON[s.source]] +
+        "</span></span>" +
+        '<span class="col">' +
+        '<span class="tt">' +
+        s.card.title +
+        "</span>" +
+        '<span class="mt">' +
+        s.card.meta +
+        "</span>" +
+        '<span class="src"><span class="tag ' +
+        TAG_CLASS[s.source] +
+        '">' +
+        TAG_LABEL[s.source] +
+        "</span>" +
+        s.card.src.split("·")[1].trim() +
+        "</span></span>"
+    );
+    dayBody.current?.appendChild(c);
+    requestAnimationFrame(() =>
+      requestAnimationFrame(() => c.classList.add("in"))
+    );
+    return c;
+  }, []);
+
+  const addMemory = useCallback((s: FeedStep) => {
+    if (!s.mem) return null;
+    const m = el(
+      "div",
+      "fl-mem",
+      '<span class="tag ' +
+        TAG_CLASS[s.source] +
+        '">' +
+        TAG_LABEL[s.source] +
+        "</span>" +
+        '<span class="tt">' +
+        s.mem.title +
+        "</span>" +
+        '<span class="chunks">' +
+        s.mem.chunks +
+        "</span>" +
+        '<span class="score"></span>'
+    );
+    memList.current?.appendChild(m);
+    requestAnimationFrame(() =>
+      requestAnimationFrame(() => m.classList.add("in"))
+    );
+    return m;
+  }, []);
+
+  const firePulse = useCallback(() => {
+    const d = el("i", "fl-dot");
+    lane.current?.appendChild(d);
+    requestAnimationFrame(() => d.classList.add("go"));
+    setTimeout(() => d.remove(), 1100);
+  }, []);
+
+  const clearStage = useCallback(() => {
+    clearTimeout(st.current.timer as number);
+    clearInterval(st.current.typeTimer as number);
+    clearInterval(st.current.chunkTimer as number);
+    if (dayBody.current) dayBody.current.innerHTML = "";
+    if (memList.current) memList.current.innerHTML = "";
+    search.current?.classList.remove("show");
+    answer.current?.classList.remove("show");
+    if (queryText.current) queryText.current.textContent = "";
+    st.current.chunks = 0;
+    if (count.current) count.current.textContent = "0";
+    const empty = el(
+      "div",
+      "fl-empty",
+      "Seu dia começa como qualquer outro.<br>Você não instala nada, não copia nada, não cola nada."
+    );
+    empty.id = "fl-empty";
+    dayBody.current?.appendChild(empty);
+  }, []);
+
+  const dimOldCards = useCallback(() => {
+    const cards = dayBody.current?.querySelectorAll(".fl-card");
+    cards?.forEach((c, i) => {
+      c.classList.remove("lit");
+      c.classList.toggle("dim", i < cards.length - 1);
+    });
+  }, []);
+
+  const runPayoff = useCallback(() => {
+    search.current?.classList.add("show");
+    const q = FEED_QUERY;
+    let i = 0;
+    clearInterval(st.current.typeTimer as number);
+    st.current.typeTimer = setInterval(() => {
+      if (queryText.current) queryText.current.textContent = q.slice(0, ++i);
+      if (i >= q.length) {
+        clearInterval(st.current.typeTimer as number);
+        setTimeout(() => {
+          const mems = memList.current?.querySelectorAll(".fl-mem");
+          FEED_HITS.forEach((h, k) => {
+            const m = mems?.[h.idx] as HTMLElement | undefined;
+            if (!m) return;
+            setTimeout(() => {
+              m.classList.add("hit", "scored");
+              const sc = m.querySelector(".score");
+              if (sc) sc.textContent = h.score;
+            }, 350 * k);
+          });
+          setTimeout(
+            () => answer.current?.classList.add("show"),
+            350 * FEED_HITS.length + 400
+          );
+        }, 350);
+      }
+    }, 38);
+  }, []);
+
+  const goTo = useCallback(
+    (idx: number, manual: boolean) => {
+      if (manual) {
+        st.current.playing = true;
+        setPlaying(true);
+      }
+      clearTimeout(st.current.timer as number);
+      clearInterval(st.current.typeTimer as number);
+
+      clearStage();
+      let emptyEl = document.getElementById("fl-empty");
+      for (let i = 0; i < idx; i++) {
+        const s = FEED_STEPS[i];
+        if (!s.mem) continue;
+        if (emptyEl) {
+          emptyEl.remove();
+          emptyEl = null;
+        }
+        addDayCard(s)?.classList.add("dim");
+        addMemory(s);
+      }
+      st.current.chunks = chunkTargetUpTo(idx - 1);
+      if (count.current) count.current.textContent = String(st.current.chunks);
+
+      st.current.idx = idx;
+      const step = FEED_STEPS[idx];
+      setActiveIdx(idx);
+      setDoneIdx(idx - 1);
+      if (clock.current) clock.current.textContent = step.time;
+
+      if (step.payoff) {
+        if (dayHead.current)
+          dayHead.current.textContent = "Fim do dia: nada mudou na sua rotina";
+        runPayoff();
+      } else {
+        if (dayHead.current)
+          dayHead.current.textContent = "Seu dia, como sempre";
+        if (emptyEl) emptyEl.remove();
+        const card = addDayCard(step);
+        card?.classList.add("lit");
+        dimOldCards();
+        card?.classList.add("lit");
+        setTimeout(firePulse, 700);
+        setTimeout(() => {
+          addMemory(step);
+          tickChunks(chunkTargetUpTo(idx));
+        }, 1450);
+      }
+
+      if (st.current.playing) {
+        st.current.timer = setTimeout(() => {
+          goTo((idx + 1) % FEED_STEPS.length, false);
+        }, step.dur);
+      }
+    },
+    [
+      addDayCard,
+      addMemory,
+      clearStage,
+      dimOldCards,
+      firePulse,
+      runPayoff,
+      tickChunks,
+    ]
+  );
+
+  const togglePlay = useCallback(() => {
+    st.current.playing = !st.current.playing;
+    setPlaying(st.current.playing);
+    if (playBtn.current)
+      playBtn.current.innerHTML = st.current.playing ? PAUSE : PLAY;
+    if (st.current.playing) goTo((st.current.idx + 1) % FEED_STEPS.length, false);
+    else {
+      clearTimeout(st.current.timer as number);
+      setActiveIdx(st.current.idx);
+    }
+  }, [goTo]);
+
+  // init when the lab enters the viewport (parity: only starts in view)
+  useEffect(() => {
+    if (!lab.shown || st.current.started) return;
+    st.current.started = true;
+    if (answer.current) answer.current.innerHTML = FEED_ANSWER_HTML;
+    if (playBtn.current) playBtn.current.innerHTML = PAUSE;
+    clearStage();
+    if (clock.current) clock.current.textContent = "08:00";
+    goTo(0, false);
+    const ref = st.current;
+    return () => {
+      clearTimeout(ref.timer as number);
+      clearInterval(ref.typeTimer as number);
+      clearInterval(ref.chunkTimer as number);
+    };
+  }, [lab.shown, clearStage, goTo]);
+
+  return (
+    <section className="section alt" id="alimente">
+      <div className="wrap">
+        <div
+          className={"sec-head reveal" + (head.shown ? " in" : "")}
+          ref={head.ref}
+        >
+          <p className="sec-tag">Alimentar o cérebro</p>
+          <h2>Você não precisa fazer nada de novo.</h2>
+          <p>
+            Veja um dia comum: cada reunião, anotação e evento vira memória
+            automaticamente, enquanto você trabalha.
+          </p>
+        </div>
+
+        <div className={"feedlab reveal" + (lab.shown ? " in" : "")} ref={lab.ref}>
+          <div className="fl-controls">
+            <button
+              className="fl-play"
+              id="fl-play"
+              type="button"
+              aria-label="Pausar ou continuar"
+              ref={playBtn}
+              onClick={togglePlay}
+              dangerouslySetInnerHTML={{ __html: PAUSE }}
+            />
+            <div
+              id="fl-steps"
+              style={{
+                display: "flex",
+                gap: 8,
+                flexWrap: "wrap",
+                justifyContent: "center",
+              }}
+            >
+              {FEED_STEPS.map((s, i) => (
+                <button
+                  key={i}
+                  type="button"
+                  className={
+                    "fl-step" +
+                    (i === activeIdx ? " active" : "") +
+                    (i <= doneIdx ? " done" : "")
+                  }
+                  style={
+                    i === activeIdx
+                      ? ({
+                          ["--fl-dur" as string]: s.dur / 1000 + "s",
+                        } as React.CSSProperties)
+                      : undefined
+                  }
+                  onClick={() => goTo(i, true)}
+                >
+                  <Icon name={FEED_ICON[s.source]} />
+                  <span className="tm">{s.time}</span> {s.stepLabel}
+                  <span className="bar" />
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="fl-stage">
+            <div className="fl-panel">
+              <div className="fl-panel-head">
+                <span ref={dayHead} id="fl-day-title">
+                  Seu dia, como sempre
+                </span>
+                <span className="fl-clock" id="fl-clock" ref={clock}>
+                  08:00
+                </span>
+              </div>
+              <div className="fl-body" id="fl-day-body" ref={dayBody} />
+            </div>
+
+            <div className="fl-wirebox" aria-hidden="true">
+              <div className="lane" id="fl-lane" ref={lane} />
+            </div>
+
+            <div className="fl-panel">
+              <div className="fl-panel-head">
+                <span className="mk">
+                  <Icon
+                    name="zinom"
+                    className="ic"
+                    style={{ width: "100%", height: "100%" }}
+                  />
+                </span>
+                <span>Seu cérebro no Zinom</span>
+                <span className="right">indexação automática</span>
+              </div>
+              <div className="fl-body">
+                <div
+                  id="fl-mem-list"
+                  ref={memList}
+                  style={{ display: "flex", flexDirection: "column", gap: 8 }}
+                />
+                <div className="fl-search" id="fl-search" ref={search}>
+                  <div className="fl-query">
+                    <span className="pr">›</span>
+                    <span>brain_search(</span>
+                    <span id="fl-query-text" ref={queryText} />
+                    <span>)</span>
+                    <span className="cursor" />
+                  </div>
+                  <div className="fl-answer" id="fl-answer" ref={answer} />
+                </div>
+                <div className="fl-count">
+                  <b id="fl-count-n" ref={count}>
+                    0
+                  </b>
+                  <span>trechos pesquisáveis, crescendo todo dia</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <p className="fl-caption">
+            <b>Em segundo plano:</b> o Zinom acompanha suas fontes enquanto você
+            trabalha. No fim do dia, tudo que você viveu já está pesquisável pela
+            sua IA.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/marketing/Footer.tsx b/web/components/marketing/Footer.tsx
new file mode 100644
index 0000000..64e9b1d
--- /dev/null
+++ b/web/components/marketing/Footer.tsx
@@ -0,0 +1,56 @@
+import { Icon } from "./icons";
+
+export function Footer() {
+  return (
+    <footer className="footer">
+      <div className="wrap">
+        <div className="foot-grid">
+          <div className="foot-brand">
+            <a href="#top" className="brand">
+              <Icon name="zinom" style={{ width: 26, height: 26 }} />
+              <span>Zinom</span>
+            </a>
+            <p>
+              Um segundo cérebro pesquisável para a sua IA. Suas fontes, sua
+              memória, na IA que você já usa.
+            </p>
+          </div>
+          <div className="foot-cols">
+            <div className="foot-col">
+              <h5>Produto</h5>
+              <a href="#como">Como funciona</a>
+              <a href="#alimente">Alimentar o cérebro</a>
+              <a href="#usar">Usar na sua IA</a>
+              <a href="#acesso">Solicitar convite</a>
+            </div>
+            <div className="foot-col">
+              <h5>Recursos</h5>
+              <a href="https://github.com/BrunooMoniz/notion-mcp" target="_blank" rel="noopener">
+                Repositório
+              </a>
+              <a href="https://modelcontextprotocol.io/" target="_blank" rel="noopener">
+                Sobre MCP
+              </a>
+            </div>
+            <div className="foot-col">
+              <h5>Contato</h5>
+              <a href="mailto:ola@zinom.ai">ola@zinom.ai</a>
+              <a href="https://github.com/BrunooMoniz/notion-mcp/issues" target="_blank" rel="noopener">
+                Reportar problema
+              </a>
+            </div>
+            <div className="foot-col">
+              <h5>Legal</h5>
+              <a href="/privacidade.html">Política de Privacidade</a>
+              <a href="/termos.html">Termos de Serviço</a>
+            </div>
+          </div>
+        </div>
+        <div className="foot-bot">
+          <small>© 2026 Zinom.ai · Licença MIT</small>
+          <span className="made">feito para a sua IA</span>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/web/components/marketing/Hero.tsx b/web/components/marketing/Hero.tsx
new file mode 100644
index 0000000..0266ea5
--- /dev/null
+++ b/web/components/marketing/Hero.tsx
@@ -0,0 +1,55 @@
+import { Icon } from "./icons";
+import { AccessCard } from "./AccessCard";
+import { SourcesStrip } from "./SourcesStrip";
+
+export function Hero() {
+  return (
+    <section className="hero">
+      <div className="wrap hero-grid">
+        <div className="hero-copy">
+          <span className="eyebrow">
+            <span className="dot" /> Conexão MCP · funciona com qualquer IA
+          </span>
+          <h1 className="title">
+            Dê <em>memória</em> ao seu ChatGPT, Claude.ai ou Claude Code.
+          </h1>
+          <p className="lede">
+            Sua IA não conhece suas reuniões, suas notas nem sua agenda. O Zinom
+            é a conexão que liga essas fontes à IA que você já usa e transforma
+            seu dia a dia em memória pesquisável.
+          </p>
+          <div
+            className="hero-eq"
+            aria-label="Notion + Reuniões + Agenda viram memória da sua IA"
+          >
+            <span className="eq-chip">
+              <Icon name="notion" />
+              Notion
+            </span>
+            <span className="eq-op">+</span>
+            <span className="eq-chip">
+              <Icon name="granola" />
+              Reuniões
+            </span>
+            <span className="eq-op">+</span>
+            <span className="eq-chip">
+              <Icon name="calendar" />
+              Agenda
+            </span>
+            <span className="eq-op">→</span>
+            <span className="eq-chip zin">
+              <Icon name="zinom" />
+              Zinom
+            </span>
+            <span className="eq-op">→</span>
+            <span className="eq-chip ai">sua IA, com memória</span>
+          </div>
+        </div>
+
+        <AccessCard />
+      </div>
+
+      <SourcesStrip />
+    </section>
+  );
+}
diff --git a/web/components/marketing/HowItWorks.tsx b/web/components/marketing/HowItWorks.tsx
new file mode 100644
index 0000000..0b46a33
--- /dev/null
+++ b/web/components/marketing/HowItWorks.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Icon, type IconName } from "./icons";
+import { useReveal } from "./useReveal";
+
+const LEFT: { ic: IconName; label: string; sub: string }[] = [
+  { ic: "notion", label: "Notion", sub: "páginas e bancos de dados" },
+  { ic: "granola", label: "Reuniões", sub: "transcripts do Granola" },
+  { ic: "calendar", label: "Agenda", sub: "Google Calendar via iCal" },
+];
+const RIGHT: { ic: IconName; label: string; sub: string }[] = [
+  { ic: "claude", label: "Claude.ai", sub: "conector custom" },
+  { ic: "chatgpt", label: "ChatGPT", sub: "via MCP" },
+  { ic: "claudecode", label: "Claude Code", sub: "e Cursor, no terminal" },
+];
+const STEPS = [
+  { n: 1, b: "Conecte suas fontes", s: "Notion com 1 clique, Granola com a chave, agenda com o link iCal." },
+  { n: 2, b: "O Zinom indexa sozinho", s: "Tudo vira memória pesquisável, atualizada em segundo plano." },
+  { n: 3, b: "Pergunte na sua IA", s: "Ela busca o contexto, responde com a fonte e ainda age por você." },
+];
+
+// All 6 diagram nodes light up in sequence (1400ms rotating `lit`), like landing.js.
+function Diagram() {
+  const [lit, setLit] = useState(0);
+  const total = LEFT.length + RIGHT.length;
+  useEffect(() => {
+    const iv = setInterval(() => setLit((i) => (i + 1) % total), 1400);
+    return () => clearInterval(iv);
+  }, [total]);
+
+  return (
+    <div className="diagram" id="diagram">
+      <div className="dg-col">
+        {LEFT.map((n, i) => (
+          <span key={n.label} className={"dg-node" + (lit === i ? " lit" : "")}>
+            <Icon name={n.ic} />
+            <span className="col">
+              {n.label}
+              <span className="sub">{n.sub}</span>
+            </span>
+          </span>
+        ))}
+      </div>
+      <div className="dg-wire">
+        <i className="pulse" />
+        <i className="pulse d2" />
+      </div>
+      <div className="dg-hub">
+        <span className="mk">
+          <Icon name="zinom" className="ic" style={{ width: "100%", height: "100%" }} />
+        </span>
+        <b>Zinom</b>
+      </div>
+      <div className="dg-wire">
+        <i className="pulse" />
+        <i className="pulse d2" />
+      </div>
+      <div className="dg-col">
+        {RIGHT.map((n, i) => (
+          <span
+            key={n.label}
+            className={"dg-node" + (lit === LEFT.length + i ? " lit" : "")}
+          >
+            <Icon name={n.ic} />
+            <span className="col">
+              {n.label}
+              <span className="sub">{n.sub}</span>
+            </span>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function HowItWorks() {
+  const head = useReveal<HTMLDivElement>();
+  const diag = useReveal<HTMLDivElement>();
+  const steps = useReveal<HTMLDivElement>();
+  const inRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <section className="section" id="como">
+      <div className="wrap" ref={inRef}>
+        <div
+          className={"sec-head reveal" + (head.shown ? " in" : "")}
+          ref={head.ref}
+        >
+          <p className="sec-tag">Como funciona</p>
+          <h2>Uma conexão entre suas fontes e a sua IA.</h2>
+          <p>
+            O ChatGPT, o Claude.ai e o Claude Code não conhecem o seu trabalho. O
+            Zinom fica no meio: indexa suas fontes e entrega o contexto certo
+            para qualquer um deles, via MCP.
+          </p>
+        </div>
+        <div className={"reveal" + (diag.shown ? " in" : "")} ref={diag.ref}>
+          <Diagram />
+        </div>
+        <div
+          className={"steps3 reveal" + (steps.shown ? " in" : "")}
+          ref={steps.ref}
+        >
+          {STEPS.map((s) => (
+            <div className="s3" key={s.n}>
+              <span className="n">{s.n}</span>
+              <span>
+                <b>{s.b}</b>
+                <span>{s.s}</span>
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/marketing/Landing.tsx b/web/components/marketing/Landing.tsx
new file mode 100644
index 0000000..3f524de
--- /dev/null
+++ b/web/components/marketing/Landing.tsx
@@ -0,0 +1,29 @@
+// Public marketing landing (SP2). Self-contained: its own scoped stylesheet
+// (marketing.css, ported from zinom-site/public/landing.css and re-tokenized to
+// Refined Editorial), its own client demos, and same-origin portal forms. It
+// does NOT use the logged-in app shell / providers — keeps the public bundle lean.
+import "./marketing.css";
+import { Nav } from "./Nav";
+import { Hero } from "./Hero";
+import { HowItWorks } from "./HowItWorks";
+import { FeedDemo } from "./FeedDemo";
+import { ChatDemo } from "./ChatDemo";
+import { Pricing } from "./Pricing";
+import { CtaBand } from "./CtaBand";
+import { Footer } from "./Footer";
+
+export function Landing() {
+  return (
+    <>
+      <Nav />
+      <a id="top" />
+      <Hero />
+      <HowItWorks />
+      <FeedDemo />
+      <ChatDemo />
+      <Pricing />
+      <CtaBand />
+      <Footer />
+    </>
+  );
+}
diff --git a/web/components/marketing/Nav.tsx b/web/components/marketing/Nav.tsx
new file mode 100644
index 0000000..26ebf20
--- /dev/null
+++ b/web/components/marketing/Nav.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Icon } from "./icons";
+
+const LINKS = [
+  { href: "#como", label: "Como funciona" },
+  { href: "#alimente", label: "Alimentar o cérebro" },
+  { href: "#usar", label: "Usar na sua IA" },
+  { href: "#planos", label: "Planos" },
+];
+
+// "Entrar" points at the new Next login under /app (SP1). Same-origin via the
+// worker proxy; trailingSlash export → /app/login/.
+const LOGIN_HREF = "/app/login/";
+
+export function Nav() {
+  const [scrolled, setScrolled] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 8);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    onScroll();
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    const onResize = () => {
+      if (window.innerWidth > 980) setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    window.addEventListener("resize", onResize);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  const cls = ["nav", scrolled ? "scrolled" : "", open ? "open" : ""]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <header className={cls} id="nav">
+      <div className="wrap nav-inner">
+        <a href="#top" className="brand">
+          <Icon name="zinom" style={{ width: 26, height: 26 }} />
+          <span>Zinom</span>
+        </a>
+        <nav className="nav-links">
+          {LINKS.map((l) => (
+            <a key={l.href} className="lnk" href={l.href}>
+              {l.label}
+            </a>
+          ))}
+        </nav>
+        <div className="nav-cta">
+          <a className="btn btn-ghost" href={LOGIN_HREF}>
+            Entrar
+          </a>
+          <a className="btn btn-primary" href="#acesso">
+            Solicitar convite
+          </a>
+        </div>
+        <button
+          className="nav-toggle"
+          id="nav-toggle"
+          type="button"
+          aria-label={open ? "Fechar menu" : "Abrir menu"}
+          aria-expanded={open}
+          aria-controls="nav-mobile"
+          onClick={() => setOpen((v) => !v)}
+        >
+          <span className="nav-toggle-bar" />
+          <span className="nav-toggle-bar" />
+          <span className="nav-toggle-bar" />
+        </button>
+      </div>
+      <nav
+        className="nav-mobile"
+        id="nav-mobile"
+        aria-label="Menu"
+        hidden={!open}
+      >
+        {LINKS.map((l) => (
+          <a
+            key={l.href}
+            className="lnk"
+            href={l.href}
+            onClick={() => setOpen(false)}
+          >
+            {l.label}
+          </a>
+        ))}
+        <a
+          className="btn btn-ghost btn-block"
+          href={LOGIN_HREF}
+          onClick={() => setOpen(false)}
+        >
+          Entrar
+        </a>
+        <a
+          className="btn btn-primary btn-block"
+          href="#acesso"
+          onClick={() => setOpen(false)}
+        >
+          Solicitar convite
+        </a>
+      </nav>
+    </header>
+  );
+}
diff --git a/web/components/marketing/Pricing.tsx b/web/components/marketing/Pricing.tsx
new file mode 100644
index 0000000..d727dbc
--- /dev/null
+++ b/web/components/marketing/Pricing.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import { useReveal } from "./useReveal";
+
+function CheckIcon() {
+  return (
+    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}
+function XIcon() {
+  return (
+    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M18 6 6 18M6 6l12 12" />
+    </svg>
+  );
+}
+
+interface Feat {
+  label: string;
+  off?: boolean;
+}
+interface Plan {
+  name: string;
+  desc: string;
+  cur: string;
+  amt: string;
+  per: string;
+  feats: Feat[];
+  cta: { label: string; href: string; variant: "primary" | "ghost" };
+  featured?: boolean;
+  badge?: string;
+}
+
+const PLANS: Plan[] = [
+  {
+    name: "Free",
+    desc: "Pra experimentar o segundo cérebro.",
+    cur: "R$",
+    amt: "0",
+    per: "/mês",
+    feats: [
+      { label: "1 workspace do Notion" },
+      { label: "2.000 trechos indexados" },
+      { label: "100 consultas / mês" },
+      { label: "Indexação sob demanda", off: true },
+      { label: "Granola + Calendar", off: true },
+      { label: "Classificador + Briefing", off: true },
+    ],
+    cta: { label: "Pedir convite", href: "#acesso", variant: "ghost" },
+  },
+  {
+    name: "Essencial",
+    desc: "Pro uso pessoal do dia a dia.",
+    cur: "R$",
+    amt: "4",
+    per: ",99/mês",
+    feats: [
+      { label: "1 workspace do Notion" },
+      { label: "10.000 trechos indexados" },
+      { label: "1.000 consultas / mês" },
+      { label: "Sob demanda (50 pág/dia)" },
+      { label: "Granola + Calendar" },
+      { label: "Classificador + Briefing", off: true },
+    ],
+    cta: { label: "Assinar", href: "/plano.html", variant: "ghost" },
+  },
+  {
+    name: "Pro",
+    desc: "Pra quem vive dentro do segundo cérebro.",
+    cur: "R$",
+    amt: "9",
+    per: ",99/mês",
+    featured: true,
+    badge: "Mais popular",
+    feats: [
+      { label: "3 workspaces do Notion" },
+      { label: "40.000 trechos indexados" },
+      { label: "5.000 consultas / mês" },
+      { label: "Sob demanda (200 pág/dia)" },
+      { label: "Granola + Calendar" },
+      { label: "Classificador + Revisitar + Briefing" },
+    ],
+    cta: { label: "Assinar", href: "/plano.html", variant: "primary" },
+  },
+  {
+    name: "Ilimitado",
+    desc: "Sem se preocupar com limites.",
+    cur: "R$",
+    amt: "18",
+    per: ",99/mês",
+    feats: [
+      { label: "5 workspaces do Notion" },
+      { label: "150.000 trechos indexados" },
+      { label: "20.000 consultas / mês" },
+      { label: "Sob demanda (500 pág/dia)" },
+      { label: "Granola + Calendar" },
+      { label: "Classificador + Revisitar + Briefing" },
+    ],
+    cta: { label: "Assinar", href: "/plano.html", variant: "ghost" },
+  },
+];
+
+export function Pricing() {
+  const head = useReveal<HTMLDivElement>();
+  const grid = useReveal<HTMLDivElement>();
+  return (
+    <section className="section alt" id="planos">
+      <div className="wrap">
+        <div className={"sec-head reveal" + (head.shown ? " in" : "")} ref={head.ref}>
+          <p className="sec-tag">Planos</p>
+          <h2>Comece grátis. Cresça quando precisar.</h2>
+          <p>
+            Você cria a conta com convite no plano Free. O upgrade é self-service
+            dentro do app, quando quiser mais.
+          </p>
+        </div>
+        <div
+          className={"pricing-grid reveal" + (grid.shown ? " in" : "")}
+          ref={grid.ref}
+        >
+          {PLANS.map((p) => (
+            <div key={p.name} className={"plan" + (p.featured ? " featured" : "")}>
+              {p.badge ? <span className="badge">{p.badge}</span> : null}
+              <div className="pname">{p.name}</div>
+              <div className="pdesc">{p.desc}</div>
+              <div className="price">
+                <span className="cur">{p.cur}</span>
+                <span className="amt">{p.amt}</span>
+                <span className="per">{p.per}</span>
+              </div>
+              <ul className="pfeats">
+                {p.feats.map((f, i) => (
+                  <li key={i} className={f.off ? "off" : undefined}>
+                    {f.off ? <XIcon /> : <CheckIcon />}
+                    <span>{f.label}</span>
+                  </li>
+                ))}
+              </ul>
+              <a
+                className={
+                  "btn btn-block " +
+                  (p.cta.variant === "primary" ? "btn-primary" : "btn-ghost")
+                }
+                href={p.cta.href}
+              >
+                {p.cta.label}
+              </a>
+            </div>
+          ))}
+        </div>
+        <p className="plan-note">
+          Preços em reais (R$), cobrança mensal via Stripe. Cancele quando
+          quiser.
+        </p>
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/marketing/SourcesStrip.tsx b/web/components/marketing/SourcesStrip.tsx
new file mode 100644
index 0000000..b05872c
--- /dev/null
+++ b/web/components/marketing/SourcesStrip.tsx
@@ -0,0 +1,24 @@
+import { Icon, type IconName } from "./icons";
+
+const SOURCES: { name: IconName; label: string }[] = [
+  { name: "claude", label: "Claude.ai" },
+  { name: "claudecode", label: "Claude Code" },
+  { name: "chatgpt", label: "ChatGPT" },
+  { name: "cursor", label: "Cursor" },
+  { name: "mcp", label: "Qualquer cliente MCP" },
+];
+
+export function SourcesStrip() {
+  return (
+    <div className="wrap strip">
+      <p className="lbl">Funciona com a IA que você já usa</p>
+      <div className="sources">
+        {SOURCES.map((s) => (
+          <span className="source-chip" key={s.label}>
+            <Icon name={s.name} /> {s.label}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/web/components/marketing/icons.tsx b/web/components/marketing/icons.tsx
index 623081d..88826e6 100644
--- a/web/components/marketing/icons.tsx
+++ b/web/components/marketing/icons.tsx
@@ -130,3 +130,38 @@ export function Icon({
     </span>
   );
 }
+
+// Raw SVG strings for the few places that build DOM imperatively (FeedDemo /
+// ChatDemo timelines, ported from landing-*.js). Kept in sync with PATHS but as
+// strings so they can be injected into hand-built nodes. Still no <script> — the
+// CSP stays clean; this is markup, not code.
+export const ICON_SVG: Record<IconName, string> = {
+  zinom:
+    '<svg viewBox="0 0 26 26" fill="none"><rect x="1" y="1" width="24" height="24" rx="7.5" fill="var(--accent)"/><path d="M8 8 H18 L8 18 H18" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/><circle cx="8" cy="8" r="1.7" fill="#fff"/><circle cx="18" cy="8" r="1.7" fill="#fff"/><circle cx="8" cy="18" r="1.7" fill="#fff"/><circle cx="18" cy="18" r="1.7" fill="#fff"/></svg>',
+  notion:
+    '<svg viewBox="0 0 24 24" fill="none"><rect x="2.5" y="2.5" width="19" height="19" rx="4" fill="#fff" stroke="#26241f" stroke-width="1.6"/><path d="M8 16.5v-9l8 9v-9" stroke="#26241f" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  granola:
+    '<svg viewBox="0 0 24 24" fill="none"><rect x="2.5" y="2.5" width="19" height="19" rx="5.5" fill="#f6c544"/><path d="M15.5 9.2a4.4 4.4 0 1 0 1 3.3h-3.6" stroke="#26241f" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>',
+  calendar:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="#3d6fae" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="16" rx="3" fill="#ecf3fc"/><path d="M8 3v4M16 3v4M3.5 10h17"/><circle cx="12" cy="15.5" r="1.4" fill="#3d6fae" stroke="none"/></svg>',
+  claude:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="#d97757" stroke-width="2.1" stroke-linecap="round"><path d="M12 4v16M5.1 8l13.8 8M18.9 8 5.1 16"/></svg>',
+  claudecode:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="#26241f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4" width="19" height="16" rx="3"/><path d="M7 10l3 2.5L7 15M12.5 15.5H17"/></svg>',
+  chatgpt:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="#26241f" stroke-width="1.8"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3.2"/></svg>',
+  cursor:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="#26241f" stroke-width="1.8" stroke-linejoin="round"><path d="M6 4l13 7.5-5.6 1.6L11 19z"/></svg>',
+  mcp:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="#26241f" stroke-width="1.8" stroke-linecap="round"><path d="M8 4v5a4 4 0 0 0 8 0V4M12 13v7M9 20h6"/></svg>',
+  search:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></svg>',
+  check:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>',
+  doc:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>',
+  zap:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></svg>',
+  sign:
+    '<svg viewBox="0 0 24 24" fill="none" stroke="#7c4fd6" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2.5" width="13" height="19" rx="2.5" fill="#f1ecfb"/><path d="M8 8.5h5M8 12h3"/><path d="M11 18.5c1.4-2.6 2.8-2.6 4.2 0 1.4-2.6 2.8-2.6 4.2 0"/></svg>',
+};
diff --git a/web/package.json b/web/package.json
index 5c17709..c9fd27b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -6,8 +6,7 @@
   "scripts": {
     "dev": "next dev -p 3500",
     "build": "next build && node scripts/nest-export.mjs",
-    "build:public": "MARKETING_BUILD=1 NEXT_DIST_DIR=.next-public next build && node scripts/export-landing.mjs",
-    "build:public-next": "MARKETING_BUILD=1 NEXT_DIST_DIR=.next-public next build && node scripts/nest-export.mjs",
+    "build:public": "MARKETING_BUILD=1 NEXT_DIST_DIR=.next-public next build && EXPORT_DIR=.next-public node scripts/export-landing.mjs",
     "lint": "next lint",
     "typecheck": "tsc --noEmit",
     "test": "vitest run"
diff --git a/web/scripts/export-landing.mjs b/web/scripts/export-landing.mjs
index 4d12292..20dd69d 100644
--- a/web/scripts/export-landing.mjs
+++ b/web/scripts/export-landing.mjs
@@ -25,7 +25,9 @@ import {
 import { join, resolve } from "node:path";
 
 const web = process.cwd();
-const out = join(web, "out");
+// Next writes the static export into the distDir root when distDir is custom
+// (NEXT_DIST_DIR), else into out/. EXPORT_DIR lets the build script pin it.
+const out = join(web, process.env.EXPORT_DIR || process.env.NEXT_DIST_DIR || "out");
 const staging = join(web, "out-public");
 
 // zinom-site lives next to zinom-engine; allow override for CI / odd checkouts.
@@ -36,7 +38,7 @@ const SITE_PUBLIC =
 if (!existsSync(join(out, "index.html"))) {
   console.error(
     "export-landing: out/index.html missing — run the public build first:\n" +
-      "  MARKETING_BUILD=1 NEXT_DIST_DIR=.next-public bun run build:public-next"
+      "  bun run build:public"
   );
   process.exit(1);
 }

From 11dd1cda7123a9f6889bd13fbde343aa683b399f Mon Sep 17 00:00:00 2001
From: bruno moniz <brunoomoniz@gmail.com>
Date: Thu, 18 Jun 2026 11:46:20 -0300
Subject: [PATCH 3/3] test(landing): SP2 unit + e2e coverage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- lib/marketing/feed-scenario.test.ts: chunkTargetUpTo matches the cumulative
  +18/+27/+28/+52 from landing-feed.js; payoff hits 0.94/0.87/0.71
- lib/marketing/chat-scenario.test.ts: 4 scenarios valid (user→…→answer, steps 1..4)
- components/marketing/useReveal.test.tsx: reduced-motion shows immediately;
  off-screen stays hidden
- e2e-landing/landing.spec.ts + playwright.landing.config.ts: serves the staged
  out-public/ at root (as the worker would). Asserts SEO meta/lang/favicon,
  no /app/_next requests, anchor targets, nav hamburger (open/Escape/link close),
  access card invite 200→#sent / 400→field-err, waitlist, ?invite&?email prefill,
  ?error=link note, demos run (#fl-count-n>0, #chat-body .msg), no-overflow 360/1440.

All green: unit 225/225 (9 new), landing e2e 12/12.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/components/marketing/useReveal.test.tsx |  43 +++++++
 web/e2e-landing/landing.spec.ts             | 134 ++++++++++++++++++++
 web/lib/marketing/chat-scenario.test.ts     |  45 +++++++
 web/lib/marketing/feed-scenario.test.ts     |  29 +++++
 web/playwright.landing.config.ts            |  24 ++++
 5 files changed, 275 insertions(+)
 create mode 100644 web/components/marketing/useReveal.test.tsx
 create mode 100644 web/e2e-landing/landing.spec.ts
 create mode 100644 web/lib/marketing/chat-scenario.test.ts
 create mode 100644 web/lib/marketing/feed-scenario.test.ts
 create mode 100644 web/playwright.landing.config.ts

diff --git a/web/components/marketing/useReveal.test.tsx b/web/components/marketing/useReveal.test.tsx
new file mode 100644
index 0000000..322ec20
--- /dev/null
+++ b/web/components/marketing/useReveal.test.tsx
@@ -0,0 +1,43 @@
+import { describe, expect, it, vi, afterEach } from "vitest";
+import { render } from "@testing-library/react";
+import { useReveal } from "./useReveal";
+
+function Probe({ onShown }: { onShown: (v: boolean) => void }) {
+  const { ref, shown } = useReveal<HTMLDivElement>();
+  onShown(shown);
+  return <div ref={ref}>probe</div>;
+}
+
+describe("useReveal", () => {
+  afterEach(() => vi.restoreAllMocks());
+
+  it("shows immediately when prefers-reduced-motion is set (element attached)", async () => {
+    vi.stubGlobal("matchMedia", (q: string) => ({
+      matches: q.includes("reduce"),
+      media: q,
+      addEventListener() {},
+      removeEventListener() {},
+    }));
+    let last = false;
+    render(<Probe onShown={(v) => (last = v)} />);
+    // effect runs after mount; reduced-motion short-circuits to shown=true
+    await Promise.resolve();
+    await new Promise((r) => setTimeout(r, 0));
+    expect(last).toBe(true);
+  });
+
+  it("starts hidden when motion is allowed and the element is off-screen", async () => {
+    vi.stubGlobal("matchMedia", (q: string) => ({
+      matches: false,
+      media: q,
+      addEventListener() {},
+      removeEventListener() {},
+    }));
+    // No IntersectionObserver in happy-dom by default; getBoundingClientRect
+    // returns zeros → not in view → stays hidden.
+    const seen: boolean[] = [];
+    render(<Probe onShown={(v) => seen.push(v)} />);
+    await new Promise((r) => setTimeout(r, 0));
+    expect(seen[0]).toBe(false);
+  });
+});
diff --git a/web/e2e-landing/landing.spec.ts b/web/e2e-landing/landing.spec.ts
new file mode 100644
index 0000000..b8c9840
--- /dev/null
+++ b/web/e2e-landing/landing.spec.ts
@@ -0,0 +1,134 @@
+import { test, expect, type Page } from "@playwright/test";
+
+// Mocks the portal API so the access card can be exercised without a backend.
+async function mockPortal(page: Page, opts: { ok: boolean } = { ok: true }) {
+  await page.route("**/portal/register", (route) =>
+    route.fulfill({ status: opts.ok ? 200 : 400, body: "{}", contentType: "application/json" })
+  );
+  await page.route("**/portal/request-invite", (route) =>
+    route.fulfill({ status: opts.ok ? 200 : 400, body: "{}", contentType: "application/json" })
+  );
+}
+
+test.describe("SEO + structure", () => {
+  test("title, description, lang, favicon", async ({ page }) => {
+    await page.goto("/");
+    await expect(page).toHaveTitle("Zinom · dê memória à sua IA");
+    const desc = await page.locator('meta[name="description"]').getAttribute("content");
+    expect(desc).toContain("cérebro pesquisável");
+    expect(await page.locator("html").getAttribute("lang")).toBe("pt-BR");
+    expect(await page.locator('link[rel="icon"]').getAttribute("href")).toBe("/favicon.svg");
+  });
+
+  test("assets load from /_next with no /app prefix", async ({ page }) => {
+    const appPrefixed: string[] = [];
+    page.on("request", (r) => {
+      if (r.url().includes("/app/_next/")) appPrefixed.push(r.url());
+    });
+    await page.goto("/", { waitUntil: "networkidle" });
+    expect(appPrefixed).toEqual([]);
+  });
+
+  test("anchor nav targets exist", async ({ page }) => {
+    await page.goto("/");
+    for (const id of ["top", "como", "alimente", "usar", "planos", "acesso"]) {
+      await expect(page.locator(`#${id}`)).toHaveCount(1);
+    }
+  });
+});
+
+test.describe("nav hamburger (mobile)", () => {
+  test.use({ viewport: { width: 360, height: 780 } });
+
+  test("opens, closes via Escape and via link click", async ({ page }) => {
+    await page.goto("/");
+    const toggle = page.locator("#nav-toggle");
+    const menu = page.locator("#nav-mobile");
+    await expect(toggle).toBeVisible();
+    await expect(menu).toBeHidden();
+
+    await toggle.click();
+    await expect(menu).toBeVisible();
+    await expect(toggle).toHaveAttribute("aria-expanded", "true");
+
+    await page.keyboard.press("Escape");
+    await expect(menu).toBeHidden();
+
+    await toggle.click();
+    await expect(menu).toBeVisible();
+    await menu.getByRole("link", { name: "Como funciona" }).click();
+    await expect(menu).toBeHidden();
+  });
+});
+
+test.describe("access card", () => {
+  test("invite success shows the confirmation", async ({ page }) => {
+    await mockPortal(page, { ok: true });
+    await page.goto("/");
+    await page.locator("#invite").fill("ZIN-1234-5678");
+    await page.locator("#reg-email").fill("teste@email.com");
+    await page.getByRole("button", { name: "Criar conta" }).click();
+    await expect(page.locator('[data-ok="invite"]')).toBeVisible();
+    await expect(page.getByText("Tudo certo")).toBeVisible();
+  });
+
+  test("invite failure shows the field error", async ({ page }) => {
+    await mockPortal(page, { ok: false });
+    await page.goto("/");
+    await page.locator("#invite").fill("BAD");
+    await page.locator("#reg-email").fill("teste@email.com");
+    await page.getByRole("button", { name: "Criar conta" }).click();
+    await expect(page.locator('[data-err="invite"]')).toBeVisible();
+  });
+
+  test("waitlist success shows the confirmation", async ({ page }) => {
+    await mockPortal(page, { ok: true });
+    await page.goto("/");
+    await page.getByRole("tab", { name: "Pedir convite" }).click();
+    await page.locator("#req-email").fill("lista@email.com");
+    await page.getByRole("button", { name: "Entrar na lista de espera" }).click();
+    await expect(page.locator('[data-ok="waitlist"]')).toBeVisible();
+  });
+
+  test("?invite & ?email prefill the invite tab", async ({ page }) => {
+    await page.goto("/?invite=ZIN-AAAA-BBBB&email=pre@email.com");
+    await expect(page.locator("#invite")).toHaveValue("ZIN-AAAA-BBBB");
+    await expect(page.locator("#reg-email")).toHaveValue("pre@email.com");
+  });
+
+  test("?error=link shows the expired-link note", async ({ page }) => {
+    await page.goto("/?error=link");
+    await expect(page.locator("#error")).toContainText("expirou");
+  });
+});
+
+test.describe("demos run", () => {
+  test("feed counter grows and chat renders a message", async ({ page }) => {
+    await page.goto("/");
+    await page.locator("#alimente").scrollIntoViewIfNeeded();
+    await expect
+      .poll(async () => Number(await page.locator("#fl-count-n").textContent()), {
+        timeout: 12_000,
+      })
+      .toBeGreaterThan(0);
+
+    await page.locator("#usar").scrollIntoViewIfNeeded();
+    await expect(page.locator("#chat-body .msg").first()).toBeVisible({ timeout: 12_000 });
+  });
+});
+
+test.describe("no horizontal overflow", () => {
+  for (const width of [360, 1440]) {
+    test(`no overflow at ${width}px`, async ({ page }) => {
+      await page.setViewportSize({ width, height: 900 });
+      await page.goto("/", { waitUntil: "networkidle" });
+      // Let lazy reveals settle.
+      await page.waitForTimeout(500);
+      const overflow = await page.evaluate(() => {
+        const de = document.documentElement;
+        return de.scrollWidth - de.clientWidth;
+      });
+      expect(overflow).toBeLessThanOrEqual(1);
+    });
+  }
+});
diff --git a/web/lib/marketing/chat-scenario.test.ts b/web/lib/marketing/chat-scenario.test.ts
new file mode 100644
index 0000000..41cdc01
--- /dev/null
+++ b/web/lib/marketing/chat-scenario.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import {
+  CHAT_SCENARIOS,
+  CHAT_CLIENTS,
+  CHAT_PROMPTS,
+} from "./chat-scenario";
+
+describe("chat-scenario", () => {
+  it("has 4 scenarios, each starting with a user message and ending in an answer", () => {
+    expect(CHAT_SCENARIOS).toHaveLength(4);
+    for (const sc of CHAT_SCENARIOS) {
+      expect(sc.steps.length).toBeGreaterThanOrEqual(3);
+      expect(sc.steps[0].type).toBe("user");
+      expect(sc.steps[sc.steps.length - 1].type).toBe("answer");
+    }
+  });
+
+  it("every step references a valid numbered dstep (1..4)", () => {
+    for (const sc of CHAT_SCENARIOS) {
+      for (const s of sc.steps) {
+        expect(s.step).toBeGreaterThanOrEqual(1);
+        expect(s.step).toBeLessThanOrEqual(4);
+      }
+    }
+  });
+
+  it("tool steps carry fn/arg/delay; answers may carry cites or actions", () => {
+    for (const sc of CHAT_SCENARIOS) {
+      for (const s of sc.steps) {
+        if (s.type === "tool") {
+          expect(s.fn).toBeTruthy();
+          expect(s.delay).toBeGreaterThan(0);
+        }
+        if (s.type === "answer") {
+          expect(s.html).toBeTruthy();
+        }
+      }
+    }
+  });
+
+  it("prompts mirror scenario labels and clients cover the 3 IAs", () => {
+    expect(CHAT_PROMPTS).toEqual(CHAT_SCENARIOS.map((s) => s.label));
+    expect(Object.keys(CHAT_CLIENTS).sort()).toEqual(["claude", "code", "gpt"]);
+  });
+});
diff --git a/web/lib/marketing/feed-scenario.test.ts b/web/lib/marketing/feed-scenario.test.ts
new file mode 100644
index 0000000..8aa60cb
--- /dev/null
+++ b/web/lib/marketing/feed-scenario.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import {
+  FEED_STEPS,
+  FEED_HITS,
+  chunkTargetUpTo,
+} from "./feed-scenario";
+
+describe("feed-scenario", () => {
+  it("has 5 steps ending in the payoff", () => {
+    expect(FEED_STEPS).toHaveLength(5);
+    expect(FEED_STEPS[4].payoff).toBe(true);
+    expect(FEED_STEPS.slice(0, 4).every((s) => s.card && s.mem)).toBe(true);
+  });
+
+  it("chunkTargetUpTo matches the cumulative +18/+9/+1/+24 from landing-feed.js", () => {
+    expect(chunkTargetUpTo(0)).toBe(18);
+    expect(chunkTargetUpTo(1)).toBe(27);
+    expect(chunkTargetUpTo(2)).toBe(28);
+    expect(chunkTargetUpTo(3)).toBe(52);
+    // payoff step adds nothing
+    expect(chunkTargetUpTo(4)).toBe(52);
+  });
+
+  it("payoff hits reference existing memories with descending scores", () => {
+    FEED_HITS.forEach((h) => expect(FEED_STEPS[h.idx].mem).toBeTruthy());
+    const scores = FEED_HITS.map((h) => Number(h.score));
+    expect(scores).toEqual([0.94, 0.87, 0.71]);
+  });
+});
diff --git a/web/playwright.landing.config.ts b/web/playwright.landing.config.ts
new file mode 100644
index 0000000..fb46c9a
--- /dev/null
+++ b/web/playwright.landing.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig, devices } from "@playwright/test";
+
+// E2E for the public (no-basePath) landing. Serves the staged export at the root
+// (out-public/), exactly as the Cloudflare Worker would serve zinom-site/public/.
+// Build first:  bun run build:public
+const PORT = 4820;
+
+export default defineConfig({
+  testDir: "./e2e-landing",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  use: {
+    baseURL: `http://localhost:${PORT}`,
+    trace: "on-first-retry",
+  },
+  projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }],
+  webServer: {
+    command: `bunx serve out-public -l ${PORT}`,
+    url: `http://localhost:${PORT}/`,
+    reuseExistingServer: !process.env.CI,
+    timeout: 60_000,
+  },
+});