diff --git a/src/app/__tests__/home-conversion.test.tsx b/src/app/__tests__/home-conversion.test.tsx
index 659af79d..b1e53548 100644
--- a/src/app/__tests__/home-conversion.test.tsx
+++ b/src/app/__tests__/home-conversion.test.tsx
@@ -18,6 +18,9 @@ vi.mock("@/lib/analytics", () => ({
 const SECTION_ORDER = [
   "hero-heading",
   "problem-solution-heading",
+  "ownership-heading",
+  "routing-heading",
+  "handoff-heading",
   "how-it-works-hub-heading",
   "whatsapp-product-heading",
   "faq-heading",
@@ -69,7 +72,15 @@ describe("home conversion cleanup", () => {
 
     expect(text).toContain("Dados ilustrativos");
     expect(text).toContain("Demonstração da plataforma");
-    expect(text).toContain("Quer entender como isso funcionaria na sua operação?");
+    expect(text).not.toContain("SLA");
+    expect(text).not.toContain("dashboard operacional");
+    expect(text).not.toContain("Próximo produto");
+    expect(text).not.toContain("Quero saber");
+    expect(text).toContain("API oficial da Meta");
+    expect(text).toContain("Inbox multiatendente");
+    expect(text).toContain("Responsáveis e filas");
+    expect(text).toContain("Handoff humano");
+    expect(text).toContain("Quer entender como essa operação funcionaria na sua empresa?");
     expect(screen.getByRole("heading", { name: "O que entra na operação" })).toBeTruthy();
     expect(screen.getByRole("heading", { name: "Como sua operação de WhatsApp sai do improviso" })).toBeTruthy();
     expect(screen.getByRole("heading", { name: "Perguntas frequentes" })).toBeTruthy();
@@ -77,7 +88,7 @@ describe("home conversion cleanup", () => {
 
   it("separa CTA primário, demo e WhatsApp no hero", () => {
     render(<Home />);
-    const hero = screen.getByRole("region", { name: /Menos mensagem perdida/i });
+    const hero = screen.getByRole("region", { name: /Organize cada conversa/i });
 
     const primary = within(hero).getByRole("link", {
       name: "Agendar diagnóstico da operação no WhatsApp",
@@ -115,7 +126,7 @@ describe("home conversion cleanup", () => {
   it("mantém o CTA final imediatamente relevante e rastreado", () => {
     render(<Home />);
     const finalCta = screen.getByRole("region", {
-      name: "Quer entender como isso funcionaria na sua operação?",
+      name: "Quer entender como essa operação funcionaria na sua empresa?",
     });
 
     const primary = within(finalCta).getByRole("link", {
diff --git a/src/app/contato/page.tsx b/src/app/contato/page.tsx
index b66e3cab..c308ea4b 100644
--- a/src/app/contato/page.tsx
+++ b/src/app/contato/page.tsx
@@ -15,7 +15,7 @@ const baseUrl = "https://devflowlabs.com.br";
 const ogImage = `${baseUrl}/og-devflow.png`;
 
 const contactDescription =
-  "Solicite um diagnóstico da sua operação de atendimento e vendas no WhatsApp. Mapeamos gargalos, automações possíveis, handoff humano, SLA e dashboard operacional.";
+  "Solicite um diagnóstico da sua operação de atendimento e vendas no WhatsApp. Mapeamos gargalos, automações possíveis, handoff humano, fila e responsáveis.";
 
 export const metadata: Metadata = {
   title: "Agendar Diagnóstico WhatsApp | DevFlow Labs",
@@ -52,11 +52,7 @@ const sidebarCard =
 
 export default function ContatoPage() {
   return (
-    <main className="relative overflow-hidden">
-      <div className="pointer-events-none absolute inset-0 -z-10 opacity-40" aria-hidden>
-        <div className="df-decor-radial-brand-soft absolute -top-40 right-0 h-96 w-96 rounded-full blur-3xl" />
-        <div className="df-decor-radial-ink-soft absolute -bottom-32 left-0 h-80 w-80 rounded-full blur-3xl" />
-      </div>
+    <main className="df-brand-v2 relative">
 
       <div className="mx-auto max-w-[1200px] px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
         <header className="mx-auto max-w-3xl text-center">
@@ -68,7 +64,7 @@ export default function ContatoPage() {
           </h1>
           <p className="df-text-secondary mx-auto mt-4 max-w-2xl text-base leading-relaxed sm:text-lg">
             Entenda onde sua operação perde mensagens, tempo e vendas — e veja como organizar atendimento com IA,
-            humano e dashboard.
+            responsáveis e handoff humano.
           </p>
         </header>
 
@@ -118,7 +114,7 @@ export default function ContatoPage() {
                 <Link href="/demo" className="font-semibold text-primary underline-offset-2 hover:underline">
                   {PRIMARY_DEMO_CTA_LABEL}
                 </Link>{" "}
-                mostra fila, handoff e dashboard em poucos minutos.
+                mostra fila, responsáveis e handoff em poucos minutos.
               </p>
               <Link
                 href="/demo"
@@ -135,8 +131,8 @@ export default function ContatoPage() {
         </div>
 
         <p className="df-text-secondary mx-auto mt-10 max-w-xl text-center text-xs font-medium leading-relaxed sm:text-sm">
-          Diagnóstico consultivo focado em atendimento e vendas no WhatsApp — IA no repetitivo, handoff humano, SLA e
-          dashboard operacional.
+          Diagnóstico consultivo focado em atendimento e vendas no WhatsApp — IA no repetitivo, handoff humano, fila e
+          responsáveis.
         </p>
 
         <p className="mt-10 text-center">
diff --git a/src/app/globals.css b/src/app/globals.css
index b51550ac..686ba429 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -648,4 +648,187 @@ html[data-theme="client_branded"] {
   .df-shadow-cta-soft:hover {
     box-shadow: 0 6px 22px rgba(0, 208, 132, 0.42);
   }
+}
+
+/* Brand V2 — scoped. Does not restyle ApplyFlow, Financeiro or WhatsApp apps. */
+.df-brand-v2 {
+  background: var(--df-v2-canvas);
+  color: var(--df-v2-ink);
+  --df-text-primary-current: var(--df-v2-ink);
+  --df-text-secondary-current: var(--df-v2-ink-soft);
+  --df-text-muted-current: var(--df-v2-muted);
+  --df-link-current: var(--df-v2-brand);
+  --df-link-hover-current: var(--df-v2-brand-hover);
+  --background: var(--df-v2-canvas);
+  --foreground: var(--df-v2-ink);
+  --card: var(--df-v2-surface);
+  --card-foreground: var(--df-v2-ink);
+  --primary: var(--df-v2-brand);
+  --primary-foreground: #ffffff;
+  --muted: var(--df-v2-surface-muted);
+  --muted-foreground: var(--df-v2-muted);
+  --border: var(--df-v2-border);
+  font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+}
+
+.df-brand-v2 h1,
+.df-brand-v2 h2,
+.df-brand-v2 h3,
+.df-header-v2 {
+  font-family: var(--font-manrope), var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+}
+
+.df-v2-container {
+  width: min(100% - 2rem, var(--df-v2-container));
+  margin-inline: auto;
+}
+
+.df-v2-section {
+  padding-block: 4rem;
+}
+
+@media (min-width: 1024px) {
+  .df-v2-section {
+    padding-block: 6.5rem;
+  }
+}
+
+.df-brand-v2 .df-v2-h1 {
+  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
+  font-weight: 800;
+  line-height: 1.02;
+  letter-spacing: -0.035em;
+  color: var(--df-v2-ink);
+}
+
+.df-brand-v2 .df-v2-h2 {
+  font-size: clamp(1.875rem, 3vw, 3rem);
+  font-weight: 700;
+  line-height: 1.08;
+  letter-spacing: -0.03em;
+  color: var(--df-v2-ink);
+}
+
+.df-brand-v2 .df-v2-h3 {
+  font-size: clamp(1.3125rem, 1.6vw, 1.625rem);
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  color: var(--df-v2-ink);
+}
+
+.df-brand-v2 .df-v2-lead {
+  font-size: 1.125rem;
+  line-height: 1.6;
+  color: var(--df-v2-ink-soft);
+}
+
+@media (min-width: 1024px) {
+  .df-brand-v2 .df-v2-lead {
+    font-size: 1.25rem;
+  }
+}
+
+.df-brand-v2 .df-btn-primary,
+.df-header-v2 .df-btn-primary {
+  border-radius: var(--df-v2-radius-btn);
+  background: var(--df-v2-brand);
+  color: #ffffff;
+  box-shadow: none;
+}
+
+.df-brand-v2 .df-btn-primary:hover,
+.df-header-v2 .df-btn-primary:hover {
+  background: var(--df-v2-brand-hover);
+  transform: none;
+}
+
+.df-brand-v2 .df-btn-secondary,
+.df-header-v2 .df-btn-secondary {
+  border-radius: var(--df-v2-radius-btn);
+  border-color: var(--df-v2-border-strong);
+  background: var(--df-v2-surface);
+  color: var(--df-v2-ink);
+}
+
+.df-brand-v2 .df-btn-secondary:hover,
+.df-header-v2 .df-btn-secondary:hover {
+  background: var(--df-v2-surface-muted);
+}
+
+.df-brand-v2 .df-btn-primary:focus-visible,
+.df-brand-v2 .df-btn-secondary:focus-visible,
+.df-header-v2 .df-btn-primary:focus-visible,
+.df-header-v2 .df-btn-secondary:focus-visible,
+.df-brand-v2 a:focus-visible,
+.df-header-v2 a:focus-visible,
+.df-brand-v2 summary:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--df-v2-canvas), 0 0 0 4px var(--df-v2-brand);
+}
+
+.df-v2-fill {
+  background: var(--df-v2-surface);
+}
+
+.df-v2-panel {
+  border-radius: var(--df-v2-radius-panel);
+  border: 1px solid var(--df-v2-border);
+  background: var(--df-v2-surface);
+  box-shadow: var(--df-v2-shadow-panel);
+}
+
+.df-v2-dark {
+  background: var(--df-v2-dark);
+  color: var(--df-v2-on-dark);
+  --df-text-primary-current: var(--df-v2-on-dark);
+  --df-text-secondary-current: var(--df-v2-on-dark-muted);
+  --df-text-muted-current: var(--df-v2-on-dark-muted);
+}
+
+.df-v2-dark .df-v2-h2 {
+  color: var(--df-v2-on-dark);
+}
+
+.df-v2-dark .df-btn-secondary {
+  border-color: rgba(244, 247, 246, 0.28);
+  background: transparent;
+  color: var(--df-v2-on-dark);
+}
+
+.df-v2-dark .df-btn-secondary:hover {
+  background: rgba(244, 247, 246, 0.08);
+}
+
+.df-header-v2 {
+  background: rgba(247, 250, 249, 0.94);
+  border-color: var(--df-v2-border);
+  color: var(--df-v2-ink);
+  box-shadow: none;
+  --df-text-primary-current: var(--df-v2-ink);
+  --df-text-secondary-current: var(--df-v2-ink-soft);
+  --foreground: var(--df-v2-ink);
+  --background: var(--df-v2-canvas);
+  --border: var(--df-v2-border);
+  --primary: var(--df-v2-brand);
+}
+
+.df-v2-timeline {
+  display: grid;
+  gap: 0;
+}
+
+@media (min-width: 1024px) {
+  .df-v2-timeline {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .df-brand-v2 *,
+  .df-header-v2 * {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
 }
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 30d9b6e9..5867f6d4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Inter, Manrope } from "next/font/google";
 import { BodyChrome } from "@/components/layout/body-chrome";
 import { Analytics } from "@vercel/analytics/next";
 import { MetaPixel } from "@/components/analytics/meta-pixel";
@@ -11,6 +11,13 @@ const inter = Inter({
   display: "swap",
 });
 
+const manrope = Manrope({
+  variable: "--font-manrope",
+  subsets: ["latin"],
+  display: "swap",
+  weight: ["600", "700", "800"],
+});
+
 const baseUrl = "https://devflowlabs.com.br";
 
 export const metadata: Metadata = {
@@ -89,7 +96,7 @@ export default function RootLayout({
   return (
     <html lang="pt-BR" data-theme={themeMode}>
       <body
-        className={`${inter.variable} df-page font-sans flex min-h-screen flex-col antialiased`}
+        className={`${inter.variable} ${manrope.variable} df-page font-sans flex min-h-screen flex-col antialiased`}
       >
         <script
           type="application/ld+json"
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 648c50fe..c5492800 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,6 +5,7 @@ import { ScrollTracker } from "@/components/shared/scroll-tracker";
 import { HeroV2 } from "@/components/sections/hero-v2";
 import { TechnicalTrustStrip } from "@/components/sections/technical-trust-strip";
 import { ProblemSolutionSection } from "@/components/sections/problem-solution-section";
+import { ProductStories } from "@/components/sections/product-stories";
 import { HowItWorksHub } from "@/components/sections/how-it-works-hub";
 import { WhatsAppProductSection } from "@/components/sections/whatsapp-product-section";
 import { Faq } from "@/components/sections/faq";
@@ -19,7 +20,7 @@ const ogImage = `${baseUrl}/og-devflow.png`;
 
 const homeTitle = "DevFlow Labs | Automação WhatsApp com IA, Inbox e Handoff Humano";
 const homeDescription =
-  "Transforme seu WhatsApp em uma operação previsível de atendimento e vendas com IA no repetitivo, inbox multiatendente, handoff humano, SLA e dashboard operacional.";
+  "Transforme seu WhatsApp em uma operação de atendimento e vendas com inbox compartilhada, responsáveis, filas e handoff humano.";
 
 export const metadata: Metadata = {
   title: homeTitle,
@@ -36,8 +37,8 @@ export const metadata: Metadata = {
     "WhatsApp Cloud API",
     "chatbot WhatsApp",
     "handoff humano",
-    "SLA atendimento",
-    "dashboard atendimento",
+    "fila de atendimento",
+    "inbox compartilhada",
   ],
   openGraph: {
     type: "website",
@@ -77,12 +78,15 @@ export default function Home() {
     <>
       <ScrollTracker />
 
+      <main className="df-brand-v2">
       <HeroV2 />
 
       <TechnicalTrustStrip />
 
       <ProblemSolutionSection />
 
+      <ProductStories />
+
       <HowItWorksHub />
 
       <WhatsAppProductSection />
@@ -96,6 +100,7 @@ export default function Home() {
 
         <ProductsSection />
       </HomeEcosystemStack>
+      </main>
     </>
   );
 }
diff --git a/src/components/layout/__tests__/header-access-products.test.tsx b/src/components/layout/__tests__/header-access-products.test.tsx
index 746fa730..c1114dd0 100644
--- a/src/components/layout/__tests__/header-access-products.test.tsx
+++ b/src/components/layout/__tests__/header-access-products.test.tsx
@@ -35,11 +35,11 @@ describe("HeaderAccessProducts", () => {
     delete process.env.NEXT_PUBLIC_FINANCEIRO_APP_URL;
   });
 
-  it("desktop: Escape fecha o menu e devolve o foco ao botão Acessar produtos", async () => {
+  it("desktop: Escape fecha o menu e devolve o foco ao botão Acessar", async () => {
     const user = userEvent.setup();
     render(<HeaderAccessProducts surface="desktop" triggerClassName="test-trigger" />);
 
-    const trigger = screen.getByRole("button", { name: /Acessar produtos/i });
+    const trigger = screen.getByRole("button", { name: /Acessar/i });
     expect(trigger).toHaveAttribute("aria-expanded", "false");
     expect(screen.queryByRole("menu")).toBeNull();
 
@@ -72,7 +72,7 @@ describe("HeaderAccessProducts", () => {
       <HeaderAccessProducts surface="desktop" triggerClassName="t" onNavigate={onNavigate} />
     );
 
-    await user.click(screen.getByRole("button", { name: /Acessar produtos/i }));
+    await user.click(screen.getByRole("button", { name: /Acessar/i }));
     await user.click(screen.getByRole("menuitem", { name: "WhatsApp Platform" }));
 
     expect(trackHeaderCtaClicked).toHaveBeenCalledWith({
@@ -95,7 +95,7 @@ describe("HeaderAccessProducts", () => {
     );
 
     expect(screen.getByTestId("header-access-products-mobile")).toBeTruthy();
-    expect(screen.queryByRole("button", { name: /Acessar produtos/i })).toBeNull();
+    expect(screen.queryByRole("button", { name: /Acessar/i })).toBeNull();
 
     const wa = screen.getByRole("link", { name: "WhatsApp Platform" });
     const fin = screen.getByRole("link", { name: "Financeiro" });
@@ -115,7 +115,7 @@ describe("HeaderAccessProducts", () => {
     render(<HeaderAccessProducts surface="desktop" triggerClassName="t" />);
 
     await user.tab();
-    const trigger = screen.getByRole("button", { name: /Acessar produtos/i });
+    const trigger = screen.getByRole("button", { name: /Acessar/i });
     expect(trigger).toHaveFocus();
 
     await user.keyboard("{Enter}");
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index 9e446d54..b42e2ad2 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -86,7 +86,7 @@ export function Footer() {
             </Link>
             <p className="df-text-on-dark-secondary max-w-md text-sm leading-relaxed">
               DevFlow Labs implementa operações de atendimento e vendas no WhatsApp com IA no repetitivo, inbox
-              multiatendente, handoff humano, SLA e dashboard operacional.
+              multiatendente, responsáveis, filas e handoff humano.
             </p>
             <div className="flex flex-col gap-3 pt-1">
               <Link
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index abb2b90d..1b0daa8d 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -9,7 +9,6 @@ import {
   trackFunnelCtaClick,
   trackHeaderCtaClicked,
   trackHeaderNavClicked,
-  trackHeaderProductsOpened,
 } from "@/lib/analytics";
 import { HEADER_CTA_LABEL, PRIMARY_DEMO_HREF } from "@/lib/conversion-copy";
 import { PRODUTOS_HUB_PATH } from "@/lib/devflow-product-catalog";
@@ -103,13 +102,8 @@ export function Header() {
   const comoFuncionaActive = isComoFuncionaActive(pathname);
   const demoActive = isDemoActive(pathname);
 
-  const openEcosystemMenu = useCallback(() => {
+  const openResourcesMenu = useCallback(() => {
     setEcosystemOpen(true);
-    if (typeof sessionStorage === "undefined") return;
-    const k = "header_ecosystem_opened_session";
-    if (sessionStorage.getItem(k) === "1") return;
-    sessionStorage.setItem(k, "1");
-    trackHeaderProductsOpened({ surface: "header_desktop_ecosystem" });
   }, []);
 
   useEffect(() => {
@@ -143,13 +137,12 @@ export function Header() {
     };
   }, [ecosystemOpen]);
 
+  const lightChrome =
+    pathname === "/" || pathname === "/contato" || pathname.startsWith("/demo");
+
   const headerCtaClass = cn(
-    "df-btn-primary min-h-11 shrink-0 rounded-xl font-bold",
-    "df-shadow-cta-soft",
-    "px-3 text-xs min-[380px]:px-4 min-[380px]:text-sm",
-    "transition-all duration-200 ease-out",
-    "hover:scale-[1.04]",
-    "active:scale-[0.98]"
+    "df-btn-primary min-h-11 shrink-0 rounded-xl font-semibold",
+    "px-3 text-xs min-[380px]:px-4 min-[380px]:text-sm"
   );
 
   const secondaryBtnClass =
@@ -190,9 +183,10 @@ export function Header() {
     <header
       className={cn(
         "sticky top-0 z-50 w-full max-w-[100vw] border-b transition-[box-shadow,background-color] duration-200",
+        lightChrome && "df-header-v2",
         scrolled
-          ? "border df-border-brand bg-background/95 shadow-[0_8px_30px_rgba(0,0,0,0.35)] backdrop-blur-md supports-[backdrop-filter]:bg-background/90"
-          : "border df-border-brand bg-background/90 backdrop-blur-md supports-[backdrop-filter]:bg-background/80"
+          ? "border bg-background/95 shadow-[0_8px_24px_rgba(15,23,42,0.06)] backdrop-blur-md supports-[backdrop-filter]:bg-background/90"
+          : "border bg-background/90 backdrop-blur-md supports-[backdrop-filter]:bg-background/80"
       )}
     >
       <div className="mx-auto flex min-h-[3.25rem] max-w-[1200px] items-center justify-between gap-2 px-3 min-[400px]:gap-3 min-[400px]:px-4 sm:min-h-[4rem] sm:px-6 lg:px-8">
@@ -206,7 +200,7 @@ export function Header() {
             DevFlow Labs
           </Link>
           <p className="df-text-secondary mt-0.5 hidden max-w-[22rem] truncate text-xs leading-snug xl:block">
-            WhatsApp Platform · IA no repetitivo · Handoff humano
+            Operação de conversas no WhatsApp
           </p>
         </div>
 
@@ -216,15 +210,7 @@ export function Header() {
             className={cn("px-2 py-1.5", navText(whatsappPlatformActive), navUnderline(whatsappPlatformActive))}
             onClick={() => onNav("whatsapp_platform")}
           >
-            WhatsApp Platform
-          </Link>
-
-          <Link
-            href={PRIMARY_DEMO_HREF}
-            className={cn("px-2 py-1.5", navText(demoActive), navUnderline(demoActive))}
-            onClick={() => onDemoNav("desktop")}
-          >
-            Demo
+            Produto
           </Link>
 
           <Link
@@ -235,32 +221,24 @@ export function Header() {
             Como funciona
           </Link>
 
-          <Link
-            href={FAQ_PATH}
-            className={cn("px-2 py-1.5", navText(false), navUnderline(false))}
-            onClick={() => onNav("faq")}
-          >
-            FAQ
-          </Link>
-
           <div ref={ecosystemWrapRef} className="relative px-2 py-1">
             <Button
               type="button"
               variant="ghost"
               className={cn(
                 "inline-flex items-center gap-1 rounded-lg px-1 py-1.5 shadow-none",
-                navText(ecosystemActive || ecosystemOpen),
-                navUnderline(ecosystemActive && !ecosystemOpen)
+                navText(demoActive || ecosystemActive || ecosystemOpen),
+                navUnderline((demoActive || ecosystemActive) && !ecosystemOpen)
               )}
-              aria-label="Ecossistema DevFlow Labs — abrir menu"
+              aria-label="Recursos — abrir menu"
               aria-expanded={ecosystemOpen}
               aria-haspopup="true"
               onClick={() => {
                 if (ecosystemOpen) setEcosystemOpen(false);
-                else openEcosystemMenu();
+                else openResourcesMenu();
               }}
             >
-              Ecossistema
+              Recursos
               <ChevronDown
                 className={cn("size-4 transition-transform", ecosystemOpen && "rotate-180")}
                 aria-hidden
@@ -268,11 +246,27 @@ export function Header() {
             </Button>
             {ecosystemOpen ? (
               <div
-                className="absolute right-0 top-full z-50 mt-1 w-[min(calc(100vw-2rem),18rem)] rounded-xl border border-border bg-background p-2 shadow-lg"
+                className="absolute left-0 top-full z-50 mt-1 w-[min(calc(100vw-2rem),18rem)] rounded-xl border border-border bg-background p-2 shadow-lg"
                 role="menu"
               >
-                <p className="df-text-muted px-2 pb-1 text-[10px] font-bold uppercase tracking-wider">
-                  Ferramentas gratuitas
+                <Link
+                  href={PRIMARY_DEMO_HREF}
+                  role="menuitem"
+                  className={ecosystemDropdownLinkClass}
+                  onClick={() => onDemoNav("desktop")}
+                >
+                  Demo
+                </Link>
+                <Link
+                  href={FAQ_PATH}
+                  role="menuitem"
+                  className={ecosystemDropdownLinkClass}
+                  onClick={() => onNav("faq")}
+                >
+                  FAQ
+                </Link>
+                <p className="df-text-muted mt-2 px-2 pb-1 text-[10px] font-bold uppercase tracking-wider">
+                  Explore também
                 </p>
                 {ECOSYSTEM_FERRAMENTAS.map((link) => (
                   <Link
@@ -285,9 +279,6 @@ export function Header() {
                     {link.label}
                   </Link>
                 ))}
-                <p className="df-text-muted mt-2 px-2 pb-1 text-[10px] font-bold uppercase tracking-wider">
-                  Produtos complementares
-                </p>
                 {ECOSYSTEM_PRODUTOS.map((link) => (
                   <Link
                     key={link.href}
@@ -299,9 +290,6 @@ export function Header() {
                     {link.label}
                   </Link>
                 ))}
-                <p className="df-text-muted mt-2 px-2 pb-1 text-[10px] font-bold uppercase tracking-wider">
-                  Mais
-                </p>
                 {ECOSYSTEM_OUTROS.map((link) => (
                   <Link
                     key={link.href}
@@ -337,7 +325,7 @@ export function Header() {
             type="button"
             variant="ghost"
             onClick={() => setMobileOpen((o) => !o)}
-            className="df-text-secondary size-11 min-h-11 min-w-11 rounded-xl border border-border bg-transparent shadow-none transition-colors hover:bg-muted lg:hidden"
+            className="df-text-secondary size-11 min-h-11 min-w-11 rounded-xl border border-border bg-transparent shadow-none transition-colors hover:bg-muted lg:!hidden"
             aria-expanded={mobileOpen}
             aria-controls="mobile-nav"
             aria-label={mobileOpen ? "Fechar menu" : "Abrir menu"}
@@ -379,9 +367,6 @@ export function Header() {
           </div>
 
           <nav aria-label="Navegação mobile">
-            <p className="df-text-muted mb-1 text-[10px] font-bold uppercase tracking-wider">
-              WhatsApp Platform
-            </p>
             <ul className="flex flex-col gap-0.5 border-b border-border pb-3" role="list">
               <li>
                 <Link
@@ -389,31 +374,31 @@ export function Header() {
                   className="flex min-h-12 items-center rounded-xl px-3 py-3 text-base font-semibold text-foreground hover:bg-primary/5 hover:text-primary"
                   onClick={() => onNav("whatsapp_platform", "mobile")}
                 >
-                  WhatsApp Platform
+                  Produto
                 </Link>
               </li>
               <li>
                 <Link
-                  href={PRIMARY_DEMO_HREF}
+                  href={COMO_FUNCIONA_PATH}
                   className="flex min-h-12 items-center rounded-xl px-3 py-3 text-base font-semibold text-foreground hover:bg-primary/5 hover:text-primary"
-                  onClick={() => onDemoNav("mobile")}
+                  onClick={() => onNav("como_funciona", "mobile")}
                 >
-                  Demo
+                  Como funciona
                 </Link>
               </li>
               <li>
                 <Link
-                  href={COMO_FUNCIONA_PATH}
-                  className="flex min-h-12 items-center rounded-xl px-3 py-3 text-base font-semibold text-foreground hover:bg-primary/5 hover:text-primary"
-                  onClick={() => onNav("como_funciona", "mobile")}
+                  href={PRIMARY_DEMO_HREF}
+                  className="flex min-h-12 items-center rounded-xl px-3 py-3 text-base font-medium text-foreground hover:bg-primary/5 hover:text-primary"
+                  onClick={() => onDemoNav("mobile")}
                 >
-                  Como funciona
+                  Demo
                 </Link>
               </li>
               <li>
                 <Link
                   href={FAQ_PATH}
-                  className="flex min-h-12 items-center rounded-xl px-3 py-3 text-base font-semibold text-foreground hover:bg-primary/5 hover:text-primary"
+                  className="flex min-h-12 items-center rounded-xl px-3 py-3 text-base font-medium text-foreground hover:bg-primary/5 hover:text-primary"
                   onClick={() => onNav("faq", "mobile")}
                 >
                   FAQ
@@ -422,14 +407,14 @@ export function Header() {
             </ul>
 
             <p className="df-text-muted mb-1 mt-3 text-[10px] font-bold uppercase tracking-wider">
-              Ecossistema
+              Explore também
             </p>
             <ul className="flex flex-col gap-0.5" role="list">
               {[...ECOSYSTEM_FERRAMENTAS, ...ECOSYSTEM_PRODUTOS, ...ECOSYSTEM_OUTROS].map((link) => (
                 <li key={link.href}>
                   <Link
                     href={link.href}
-                    className="flex min-h-11 items-center rounded-xl px-3 py-2.5 text-sm font-medium text-foreground hover:bg-muted/40 hover:text-primary"
+                    className="flex min-h-11 items-center rounded-xl px-3 py-2.5 text-sm font-medium df-text-secondary hover:bg-muted/40 hover:text-primary"
                     onClick={() => onEcosystemNavigate(link.item, "mobile")}
                   >
                     {link.label}
diff --git a/src/components/sections/faq.tsx b/src/components/sections/faq.tsx
index 8af4f65d..37aae821 100644
--- a/src/components/sections/faq.tsx
+++ b/src/components/sections/faq.tsx
@@ -43,7 +43,7 @@ const faqItems = [
   {
     question: "O que eu ganho além de respostas automáticas?",
     answer:
-      "Você ganha operação: fila, prioridade, handoff humano, histórico, dashboard, SLA e clareza sobre onde o atendimento trava e onde a venda pode estar sendo perdida.",
+      "Você ganha operação: fila, responsáveis, handoff humano, histórico e clareza sobre o que precisa de resposta.",
   },
 ];
 
@@ -62,38 +62,27 @@ const faqSchema = {
 
 export function Faq() {
   return (
-    <section id="faq" className="py-24" aria-labelledby="faq-heading">
+    <section id="faq" className="df-v2-section bg-[var(--df-v2-surface)]" aria-labelledby="faq-heading">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
       />
-      <div className="mx-auto max-w-[1200px] px-4 sm:px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl text-center">
-          <div className="mx-auto mb-4 h-1 w-12 rounded-full bg-primary" aria-hidden />
-          <h2
-            id="faq-heading"
-            className="df-text-primary text-2xl font-semibold tracking-tight sm:text-3xl"
-          >
-            Perguntas frequentes
-          </h2>
-          <p className="df-text-secondary mt-3 leading-relaxed">
-            Objeções comuns sobre operação de atendimento e vendas no WhatsApp com a DevFlow Labs.
-          </p>
-        </div>
+      <div className="df-v2-container">
+        <h2 id="faq-heading" className="df-v2-h2">
+          Perguntas frequentes
+        </h2>
+        <p className="df-v2-lead mt-4 max-w-2xl">
+          Objeções comuns sobre operação de atendimento e vendas no WhatsApp com a DevFlow Labs.
+        </p>
 
-        <div className="mx-auto mt-12 max-w-2xl space-y-2">
+        <div className="mt-10 max-w-3xl border-t border-[var(--df-v2-border)]">
           {faqItems.map((item) => (
-            <details
-              key={item.question}
-              className="group rounded-xl border border-border bg-card [&[open]]:border-primary/30"
-            >
-              <summary className="df-text-primary flex cursor-pointer list-none items-center justify-between rounded-xl px-4 py-4 font-medium transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background [&::-webkit-details-marker]:hidden">
+            <details key={item.question} className="group border-b border-[var(--df-v2-border)]">
+              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 py-5 text-base font-semibold text-[var(--df-v2-ink)] [&::-webkit-details-marker]:hidden">
                 {item.question}
-                <ChevronDown className="df-text-secondary size-5 shrink-0 transition-transform group-open:rotate-180" />
+                <ChevronDown className="size-4 shrink-0 text-[var(--df-v2-muted)] group-open:rotate-180" />
               </summary>
-              <p className="df-text-secondary border-t border-border px-4 py-3 leading-relaxed">
-                {item.answer}
-              </p>
+              <p className="pb-5 text-sm leading-relaxed text-[var(--df-v2-ink-soft)]">{item.answer}</p>
             </details>
           ))}
         </div>
diff --git a/src/components/sections/final-cta-v2.tsx b/src/components/sections/final-cta-v2.tsx
index 84d9fec5..4490ded8 100644
--- a/src/components/sections/final-cta-v2.tsx
+++ b/src/components/sections/final-cta-v2.tsx
@@ -9,68 +9,44 @@ import {
   PRIMARY_CONVERT_HREF,
   PRIMARY_DEMO_HREF,
 } from "@/lib/conversion-copy";
-import { cn } from "@/lib/utils";
 
 export function FinalCtaV2() {
   return (
-    <section
-      id="cta-final"
-      className="relative overflow-x-clip overflow-y-visible bg-[var(--devflow-background)] py-10 sm:py-14 lg:py-18"
-      aria-labelledby="final-cta-v2-heading"
-    >
-      <div className="pointer-events-none absolute inset-0 -z-10" aria-hidden>
-        <div className="df-decor-radial-brand absolute -right-20 -top-20 h-60 w-60 rounded-full opacity-30" />
-      </div>
-
-      <div className="mx-auto max-w-[1200px] px-4 sm:px-6 lg:px-8">
-        <div
-          className={cn(
-            "mx-auto max-w-xl df-surface-elevated rounded-2xl p-6 text-center backdrop-blur-sm sm:p-10 lg:p-12"
-          )}
-        >
-          <div className="mx-auto mb-4 h-1 w-12 rounded-full bg-primary" aria-hidden />
-          <h2
-            id="final-cta-v2-heading"
-            className="df-text-primary text-2xl font-bold tracking-tight sm:text-3xl"
+    <section id="cta-final" className="df-v2-dark df-v2-section" aria-labelledby="final-cta-v2-heading">
+      <div className="df-v2-container max-w-3xl">
+        <h2 id="final-cta-v2-heading" className="df-v2-h2 text-balance">
+          Quer entender como essa operação funcionaria na sua empresa?
+        </h2>
+        <p className="mt-4 max-w-2xl text-lg leading-relaxed text-[var(--df-v2-on-dark-muted)]">
+          Em uma conversa rápida, analisamos como sua equipe usa o WhatsApp hoje e mostramos onde a DevFlow pode
+          organizar atendimento, distribuição e acompanhamento.
+        </p>
+        <div className="mt-8 flex flex-col gap-3 sm:flex-row">
+          <Link
+            href={PRIMARY_CONVERT_HREF}
+            aria-label="Agendar diagnóstico da operação no WhatsApp"
+            onClick={() =>
+              trackFunnelCtaClick({ cta: "agendar_diagnostico", surface: "final_cta_primary" })
+            }
+            className="df-btn-primary min-h-12 px-5 text-sm font-semibold"
           >
-            Quer entender como isso funcionaria na sua operação?
-          </h2>
-          <p className="df-text-secondary mt-4 text-base leading-relaxed sm:text-lg">
-            Em uma conversa rápida, analisamos como sua equipe usa o WhatsApp hoje e mostramos onde a DevFlow pode
-            organizar atendimento, distribuição e acompanhamento.
-          </p>
-
-          <div className="mt-6 flex flex-col items-stretch gap-3 sm:mt-8 sm:items-center sm:gap-4">
-            <Link
-              href={PRIMARY_CONVERT_HREF}
-              aria-label="Agendar diagnóstico da operação no WhatsApp"
-              onClick={() =>
-                trackFunnelCtaClick({ cta: "agendar_diagnostico", surface: "final_cta_primary" })
-              }
-              className={cn(
-                "df-btn-primary devflow-cta-elite inline-flex min-h-[3rem] items-center justify-center gap-2 rounded-xl px-6 text-sm font-bold sm:min-h-14 sm:min-w-[min(100%,300px)] sm:text-base",
-                "df-shadow-cta transition-transform duration-200",
-                "hover:scale-[1.02] active:scale-[0.98] sm:hover:scale-[1.03]"
-              )}
-            >
-              {PRIMARY_CONVERT_CTA_LABEL}
-              <ArrowRight className="size-4 shrink-0" aria-hidden />
-            </Link>
-            <Link
-              href={PRIMARY_DEMO_HREF}
-              aria-label="Ver demonstração guiada de atendimento no WhatsApp"
-              onClick={() =>
-                trackFunnelCtaClick({ cta: "ver_demo_guiada", surface: "final_cta_secondary" })
-              }
-              className="df-btn-secondary inline-flex min-h-12 items-center justify-center gap-2 rounded-xl px-6 text-sm font-semibold transition-colors"
-            >
-              {HOME_DEMO_CTA_LABEL}
-            </Link>
-          </div>
-          <p className="df-text-muted mt-6 text-xs leading-relaxed">
-            O próximo passo é o diagnóstico da operação no WhatsApp.
-          </p>
+            {PRIMARY_CONVERT_CTA_LABEL}
+            <ArrowRight className="size-4" aria-hidden />
+          </Link>
+          <Link
+            href={PRIMARY_DEMO_HREF}
+            aria-label="Ver demonstração guiada de atendimento no WhatsApp"
+            onClick={() =>
+              trackFunnelCtaClick({ cta: "ver_demo_guiada", surface: "final_cta_secondary" })
+            }
+            className="df-btn-secondary min-h-12 px-5 text-sm font-semibold"
+          >
+            {HOME_DEMO_CTA_LABEL}
+          </Link>
         </div>
+        <p className="mt-6 text-sm text-[var(--df-v2-on-dark-muted)]">
+          O próximo passo é o diagnóstico da operação no WhatsApp.
+        </p>
       </div>
     </section>
   );
diff --git a/src/components/sections/hero-v2.tsx b/src/components/sections/hero-v2.tsx
index b070b96d..4974776e 100644
--- a/src/components/sections/hero-v2.tsx
+++ b/src/components/sections/hero-v2.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { ArrowRight, MessageCircle, BarChart3, Bot, UserRound } from "lucide-react";
+import { ArrowRight } from "lucide-react";
 import { trackCtaWhatsAppClick, trackFunnelCtaClick, trackHomeCta } from "@/lib/analytics";
 import {
   HERO_TRUST_SIGNALS,
@@ -13,178 +13,84 @@ import {
   QUICK_WHATSAPP_CTA_LABEL,
 } from "@/lib/conversion-copy";
 import { getWhatsAppOrMailtoUrl, isWhatsAppNumberConfigured } from "@/lib/whatsapp";
-import { cn } from "@/lib/utils";
+import { ProductInboxShowcase } from "@/components/sections/product-inbox-showcase";
 
 const HERO_WHATSAPP_TEXT =
   "Olá, vim pelo site. Quero falar sobre atendimento e vendas no WhatsApp com a DevFlow.";
 
-const illustrativeQueue = [
-  { label: "Fila", status: "Aguardando responsável", icon: UserRound },
-  { label: "Automação", status: "Dúvida frequente", icon: Bot },
-  { label: "Handoff", status: "Com a equipe", icon: MessageCircle },
-];
-
-function IllustrativeQueue() {
-  return (
-    <div className="df-surface-elevated rounded-xl p-4">
-      <div className="mb-3 flex items-center justify-between gap-2">
-        <div className="flex min-w-0 items-center gap-2">
-          <BarChart3 className="size-4 shrink-0 df-status-brand" aria-hidden />
-          <span className="df-text-secondary truncate text-xs font-medium">Demonstração da plataforma</span>
-        </div>
-        <span className="shrink-0 rounded-full border border-border px-2 py-0.5 text-[10px] font-semibold df-text-secondary">
-          Dados ilustrativos
-        </span>
-      </div>
-      <p className="df-text-muted mb-3 text-[11px] leading-relaxed">
-        Estrutura da fila. Não representa uma operação de cliente.
-      </p>
-      <div className="space-y-1.5">
-        {illustrativeQueue.map((item) => (
-          <div
-            key={item.label}
-            className="flex items-center gap-2 rounded-lg border border-border/60 bg-muted/25 px-2.5 py-2"
-          >
-            <item.icon className="size-3.5 shrink-0 df-status-brand" aria-hidden />
-            <div className="min-w-0 flex-1">
-              <p className="truncate text-[11px] font-semibold df-text-primary">{item.label}</p>
-              <p className="df-text-secondary truncate text-[10px]">{item.status}</p>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
 export function HeroV2() {
   const whatsAppHref = getWhatsAppOrMailtoUrl(HERO_WHATSAPP_TEXT);
   const whatsAppOpensChat = isWhatsAppNumberConfigured();
 
   return (
-    <section
-      id="hero"
-      className="df-page df-brand-gradient relative overflow-x-clip overflow-y-visible py-10 sm:py-16 lg:py-24"
-      aria-labelledby="hero-heading"
-    >
-      <div className="pointer-events-none absolute inset-0 -z-10" aria-hidden>
-        <div className="absolute inset-0 df-gradient-text-scrim" />
-        <div className="df-decor-radial-brand absolute -top-40 -right-40 h-96 w-96 rounded-full opacity-40 max-lg:opacity-25" />
-        <div className="df-decor-radial-accent absolute -bottom-32 -left-32 h-80 w-80 rounded-full opacity-30 max-lg:opacity-20" />
-        <div className="df-decor-grid-mesh absolute inset-0 opacity-[0.035]" />
-      </div>
-
-      <div className="mx-auto max-w-[1200px] px-3 min-[400px]:px-4 sm:px-6 lg:px-8">
-        <div className="grid min-w-0 gap-6 sm:gap-8 lg:grid-cols-2 lg:gap-16 lg:items-center">
-          <div className="min-w-0 space-y-4 sm:space-y-6 lg:space-y-7">
-            <div className="inline-flex max-w-full flex-wrap items-center gap-x-2 gap-y-1 rounded-full border border-primary/35 bg-primary/8 px-2.5 py-1.5 text-[11px] font-semibold shadow-sm min-[380px]:gap-2 min-[380px]:px-3 min-[380px]:text-xs sm:text-xs">
-              <span className="size-2 shrink-0 rounded-full bg-primary ring-2 ring-primary/30" aria-hidden />
-              <MessageCircle className="size-3.5 shrink-0 text-primary" aria-hidden />
-              <span className="text-primary">WhatsApp Platform</span>
-              <span className="df-text-secondary hidden sm:inline">·</span>
-              <span className="df-text-secondary w-full sm:w-auto sm:truncate">
-                Cloud API oficial · inbox da equipe
-              </span>
-            </div>
-
-            <div className="max-w-[600px] space-y-3 sm:space-y-4">
-              <h1
-                id="hero-heading"
-                className="df-text-primary text-balance text-[1.5rem] font-extrabold leading-[1.2] tracking-tight min-[360px]:text-[1.625rem] min-[400px]:text-[1.75rem] sm:text-4xl sm:leading-[1.12] lg:text-[3.15rem]"
-              >
-                Menos mensagem perdida. Mais resposta no tempo certo. Mais venda preservada.
-              </h1>
-              <p className="df-text-secondary text-base leading-relaxed sm:text-lg lg:text-xl">
-                O WhatsApp da equipe deixa de ficar espalhado no celular. A DevFlow organiza o fluxo e passa a
-                conversa para uma pessoa quando ela precisa de contexto.
-              </p>
-            </div>
+    <section id="hero" className="df-v2-section pb-12 lg:pb-20" aria-labelledby="hero-heading">
+      <div className="df-v2-container grid items-center gap-10 lg:grid-cols-12 lg:gap-12">
+        <div className="lg:col-span-6">
+          <p className="text-[13px] font-semibold tracking-[0.04em] text-[var(--df-v2-brand)]">
+            Operação de atendimento no WhatsApp
+          </p>
+          <h1 id="hero-heading" className="df-v2-h1 mt-4 max-w-[14ch] text-balance">
+            Organize cada conversa. Saiba quem está cuidando dela.
+          </h1>
+          <p className="df-v2-lead mt-5 max-w-[38rem]">
+            A equipe deixa de atender espalhada no celular. A DevFlow coloca dono, fila e contexto na mesma
+            operação, com a API oficial da Meta, sem trocar os sistemas que vocês já usam.
+          </p>
 
-            <div className="space-y-3 pt-0.5 sm:pt-1">
-              <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-stretch sm:gap-4">
-                <Link
-                  href={PRIMARY_CONVERT_HREF}
-                  onClick={() => {
-                    trackHomeCta("hero_agendar_diagnostico");
-                    trackFunnelCtaClick({ cta: "agendar_diagnostico", surface: "hero_primary" });
-                  }}
-                  aria-label="Agendar diagnóstico da operação no WhatsApp"
-                  className={cn(
-                    "df-btn-primary devflow-cta-elite inline-flex min-h-[3rem] w-full items-center justify-center gap-2 rounded-xl px-4 text-sm font-bold leading-snug sm:min-h-14 sm:w-auto sm:min-w-[min(100%,280px)] sm:px-6 sm:text-base md:px-8 md:text-lg",
-                    "df-shadow-cta transition-transform duration-200 ease-out",
-                    "hover:scale-[1.02] active:scale-[0.98] sm:hover:scale-[1.03]"
-                  )}
-                >
-                  <span className="text-balance">{PRIMARY_CONVERT_CTA_LABEL}</span>
-                  <ArrowRight className="size-5 shrink-0" aria-hidden />
-                </Link>
-                <Link
-                  href={PRIMARY_DEMO_HREF}
-                  onClick={() => {
-                    trackHomeCta("hero_ver_demo");
-                    trackFunnelCtaClick({ cta: "ver_demo_guiada", surface: "hero_secondary" });
-                  }}
-                  aria-label="Ver demonstração guiada de atendimento no WhatsApp"
-                  className={cn(
-                    "inline-flex min-h-[3rem] w-full items-center justify-center gap-2 rounded-xl border-2 border-border bg-card px-4 text-sm font-bold leading-snug text-foreground sm:min-h-14 sm:w-auto sm:min-w-[min(100%,17rem)] sm:px-6 sm:text-base",
-                    "shadow-sm transition-transform duration-200 ease-out hover:border-primary/35 hover:bg-muted/30"
-                  )}
-                >
-                  <span className="text-balance">{HOME_DEMO_CTA_LABEL}</span>
-                </Link>
-              </div>
-              <p className="text-center sm:text-left">
-                <a
-                  href={whatsAppHref}
-                  target={whatsAppOpensChat ? "_blank" : undefined}
-                  rel={whatsAppOpensChat ? "noopener noreferrer" : undefined}
-                  aria-label={
-                    whatsAppOpensChat
-                      ? "Falar no WhatsApp com a DevFlow Labs"
-                      : "Falar no WhatsApp: abrir cliente de e-mail"
-                  }
-                  onClick={() => {
-                    trackCtaWhatsAppClick("hero_whatsapp");
-                    trackHomeCta("hero_whatsapp");
-                    trackFunnelCtaClick({ cta: "falar_whatsapp", surface: "hero_whatsapp" });
-                  }}
-                  className="text-sm font-medium text-primary underline-offset-2 hover:underline"
-                >
-                  {QUICK_WHATSAPP_CTA_LABEL}
-                </a>
-              </p>
-              <p className="df-text-secondary text-center text-[11px] font-medium leading-snug sm:text-left sm:text-xs">
-                {PRODUCT_LIVE_HINT}
-              </p>
-              <p className="df-text-secondary text-center text-xs leading-snug sm:text-left sm:text-sm">
-                <Link
-                  href="/#como-funciona-hub"
-                  onClick={() => trackHomeCta("hero_how_it_works")}
-                  className="font-semibold text-primary underline-offset-2 hover:underline"
-                >
-                  Como funciona
-                </Link>
-              </p>
-            </div>
-
-            <ul
-              className="df-text-secondary flex flex-col gap-2 border-t border-border pt-4 text-[11px] font-medium sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-3 sm:gap-y-1 sm:pt-5 sm:text-sm"
-              role="list"
-              aria-label="Sinais de confiança"
+          <div className="mt-8 flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
+            <Link
+              href={PRIMARY_CONVERT_HREF}
+              onClick={() => {
+                trackHomeCta("hero_agendar_diagnostico");
+                trackFunnelCtaClick({ cta: "agendar_diagnostico", surface: "hero_primary" });
+              }}
+              aria-label="Agendar diagnóstico da operação no WhatsApp"
+              className="df-btn-primary min-h-12 px-5 text-sm font-semibold sm:min-w-52"
             >
-              {HERO_TRUST_SIGNALS.map((signal, i) => (
-                <li key={signal} className="inline-flex items-center gap-1.5">
-                  {i > 0 && <span className="hidden text-muted-foreground sm:inline" aria-hidden>·</span>}
-                  <span className="size-1.5 shrink-0 rounded-full bg-primary" aria-hidden />
-                  {signal}
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          <div className="mx-auto w-full max-w-md lg:max-w-none">
-            <IllustrativeQueue />
+              {PRIMARY_CONVERT_CTA_LABEL}
+              <ArrowRight className="size-4" aria-hidden />
+            </Link>
+            <Link
+              href={PRIMARY_DEMO_HREF}
+              onClick={() => {
+                trackHomeCta("hero_ver_demo");
+                trackFunnelCtaClick({ cta: "ver_demo_guiada", surface: "hero_secondary" });
+              }}
+              aria-label="Ver demonstração guiada de atendimento no WhatsApp"
+              className="df-btn-secondary min-h-12 px-5 text-sm font-semibold"
+            >
+              {HOME_DEMO_CTA_LABEL}
+            </Link>
           </div>
+          <p className="mt-4">
+            <a
+              href={whatsAppHref}
+              target={whatsAppOpensChat ? "_blank" : undefined}
+              rel={whatsAppOpensChat ? "noopener noreferrer" : undefined}
+              aria-label={
+                whatsAppOpensChat
+                  ? "Falar no WhatsApp com a DevFlow Labs"
+                  : "Falar no WhatsApp: abrir cliente de e-mail"
+              }
+              onClick={() => {
+                trackCtaWhatsAppClick("hero_whatsapp");
+                trackHomeCta("hero_whatsapp");
+                trackFunnelCtaClick({ cta: "falar_whatsapp", surface: "hero_whatsapp" });
+              }}
+              className="text-sm font-medium text-[var(--df-v2-brand)] underline-offset-4 hover:underline"
+            >
+              {QUICK_WHATSAPP_CTA_LABEL}
+            </a>
+          </p>
+          <p className="mt-3 text-sm text-[var(--df-v2-muted)]">{PRODUCT_LIVE_HINT}</p>
+          <ul className="mt-6 flex flex-col gap-2 text-sm text-[var(--df-v2-ink-soft)] sm:flex-row sm:flex-wrap sm:gap-x-4" role="list">
+            {HERO_TRUST_SIGNALS.map((signal) => (
+              <li key={signal}>{signal}</li>
+            ))}
+          </ul>
+        </div>
+        <div className="lg:col-span-6 lg:pl-4">
+          <ProductInboxShowcase />
         </div>
       </div>
     </section>
diff --git a/src/components/sections/how-it-works-hub.tsx b/src/components/sections/how-it-works-hub.tsx
index e11cee2e..72bc71e8 100644
--- a/src/components/sections/how-it-works-hub.tsx
+++ b/src/components/sections/how-it-works-hub.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { ArrowRight, ClipboardList, GitBranch, Settings2, LineChart } from "lucide-react";
+import { ArrowRight } from "lucide-react";
 import { trackFunnelCtaClick } from "@/lib/analytics";
 import {
   HOME_DEMO_CTA_LABEL,
@@ -9,32 +9,26 @@ import {
   PRIMARY_CONVERT_HREF,
   PRIMARY_DEMO_HREF,
 } from "@/lib/conversion-copy";
-import { cn } from "@/lib/utils";
-
 const steps = [
   {
-    icon: ClipboardList,
     number: "01",
     title: "Diagnóstico da operação",
     description:
       "Mapeamos volume de mensagens, horários críticos, tipos de solicitação, gargalos de resposta e pontos onde vendas ou atendimentos se perdem.",
   },
   {
-    icon: GitBranch,
     number: "02",
     title: "Desenho dos fluxos",
     description:
-      "Definimos o que a IA responde sozinha, quando o atendimento vai para uma pessoa, quais filas existem e quais regras de prioridade/SLA fazem sentido.",
+      "Definimos o que a IA responde sozinha, quando o atendimento vai para uma pessoa, quais filas existem e quais regras de prioridade e atendimento fazem sentido.",
   },
   {
-    icon: Settings2,
     number: "03",
     title: "Implementação técnica",
     description:
-      "Configuramos WhatsApp Cloud API oficial, webhooks, inbox multiatendente, automações, handoff humano, tags, fila priorizada e dashboard operacional.",
+      "Configuramos WhatsApp Cloud API oficial, inbox multiatendente, automações, handoff humano, tags, filas, responsáveis e acompanhamento operacional.",
   },
   {
-    icon: LineChart,
     number: "04",
     title: "Operação acompanhada",
     description:
@@ -44,75 +38,37 @@ const steps = [
 
 export function HowItWorksHub() {
   return (
-    <section
-      id="como-funciona-hub"
-      className="border-y df-border-brand bg-[var(--devflow-surface)] py-16 sm:py-20"
-      aria-labelledby="how-it-works-hub-heading"
-    >
-      <div className="mx-auto max-w-[1200px] px-4 sm:px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl text-center">
-          <div className="mx-auto mb-4 h-1 w-12 rounded-full bg-primary" aria-hidden />
-          <h2
-            id="how-it-works-hub-heading"
-            className="df-text-primary text-2xl font-bold tracking-tight sm:text-3xl"
-          >
-            Como sua operação de WhatsApp sai do improviso
-          </h2>
-          <p className="df-text-secondary mt-4 text-base leading-relaxed sm:text-lg">
-            Diagnóstico, implementação guiada e operação acompanhada para transformar mensagens soltas em um fluxo
-            previsível de atendimento e vendas.
-          </p>
-        </div>
-
-        <ol
-          className="mx-auto mt-12 grid max-w-5xl list-none gap-6 sm:grid-cols-2 xl:max-w-none xl:grid-cols-4"
-          aria-label="Etapas do processo consultivo da WhatsApp Platform"
-        >
-          {steps.map((step, index) => (
-            <li key={step.title} className="min-w-0">
-              <article
-                className={cn(
-                  "relative h-full rounded-2xl border border-border bg-card p-7",
-                  "transition-all duration-200 hover:-translate-y-1 hover:shadow-lg"
-                )}
-              >
-                {index < steps.length - 1 && (
-                  <div
-                    className="absolute -right-3 top-10 hidden h-0.5 w-6 bg-gradient-to-r from-primary/30 to-transparent xl:block"
-                    aria-hidden
-                  />
-                )}
-
-                <div className="flex items-start gap-3">
-                  <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-primary/20 bg-primary/5">
-                    <step.icon className="size-5 text-primary" aria-hidden />
-                  </div>
-                  <span className="text-2xl font-bold text-primary/20" aria-hidden>
-                    {step.number}
-                  </span>
-                </div>
+    <section id="como-funciona-hub" className="df-v2-section bg-[var(--df-v2-surface)]" aria-labelledby="how-it-works-hub-heading">
+      <div className="df-v2-container">
+        <h2 id="how-it-works-hub-heading" className="df-v2-h2 max-w-[18ch] text-balance">
+          Como sua operação de WhatsApp sai do improviso
+        </h2>
+        <p className="df-v2-lead mt-4 max-w-2xl">
+          Diagnóstico, implementação guiada e operação acompanhada para transformar mensagens soltas em um fluxo
+          previsível de atendimento e vendas.
+        </p>
 
-                <h3 className="df-text-primary mt-4 font-semibold">{step.title}</h3>
-                <p className="df-text-secondary mt-2 text-sm leading-relaxed">{step.description}</p>
-              </article>
+        <ol className="df-v2-timeline mt-12 list-none border-t border-[var(--df-v2-border)]" aria-label="Etapas do processo consultivo da WhatsApp Platform">
+          {steps.map((step) => (
+            <li key={step.title} className="border-b border-[var(--df-v2-border)] py-6 lg:border-b-0 lg:border-r lg:px-5 lg:py-8 lg:last:border-r-0">
+              <p className="text-sm font-semibold text-[var(--df-v2-brand)]">{step.number}</p>
+              <h3 className="df-v2-h3 mt-3">{step.title}</h3>
+              <p className="mt-3 text-sm leading-relaxed text-[var(--df-v2-ink-soft)]">{step.description}</p>
             </li>
           ))}
         </ol>
 
-        <div className="mt-10 flex flex-col items-center gap-3 sm:flex-row sm:justify-center sm:gap-4">
+        <div className="mt-10 flex flex-col gap-3 sm:flex-row">
           <Link
             href={PRIMARY_CONVERT_HREF}
             aria-label="Agendar diagnóstico da operação no WhatsApp"
             onClick={() =>
               trackFunnelCtaClick({ cta: "agendar_diagnostico", surface: "how_it_works_primary" })
             }
-            className={cn(
-              "df-btn-primary inline-flex max-w-full items-center justify-center gap-2 rounded-xl px-5 py-3.5 text-center text-sm font-bold leading-snug",
-              "df-shadow-cta-soft transition-all hover:scale-[1.02] sm:px-7 sm:text-base"
-            )}
+            className="df-btn-primary min-h-12 px-5 text-sm font-semibold"
           >
             {PRIMARY_CONVERT_CTA_LABEL}
-            <ArrowRight className="size-4 shrink-0" aria-hidden />
+            <ArrowRight className="size-4" aria-hidden />
           </Link>
           <Link
             href={PRIMARY_DEMO_HREF}
@@ -120,7 +76,7 @@ export function HowItWorksHub() {
             onClick={() =>
               trackFunnelCtaClick({ cta: "ver_demo_guiada", surface: "how_it_works_demo" })
             }
-            className="df-btn-secondary inline-flex max-w-full items-center justify-center gap-2 rounded-xl px-5 py-3.5 text-center text-sm font-semibold leading-snug transition-colors sm:px-7 sm:text-base"
+            className="df-btn-secondary min-h-12 px-5 text-sm font-semibold"
           >
             {HOME_DEMO_CTA_LABEL}
           </Link>
diff --git a/src/components/sections/problem-solution-section.tsx b/src/components/sections/problem-solution-section.tsx
index 2a6b5b4a..490fc5d4 100644
--- a/src/components/sections/problem-solution-section.tsx
+++ b/src/components/sections/problem-solution-section.tsx
@@ -1,93 +1,52 @@
-import { X, Check, AlertTriangle } from "lucide-react";
-
-const problems = [
-  "Mensagens importantes se perdem no volume",
-  "Cliente espera resposta e procura outro fornecedor",
-  "Equipe responde manualmente as mesmas dúvidas todos os dias",
-  "Ninguém sabe exatamente o que está parado, atrasado ou em risco",
-  "Falta histórico, fila e responsável",
+const before = [
+  "Conversas sem dono claro",
+  "Contexto espalhado no celular",
+  "Retorno dependente da memória de quem atendeu",
 ];
 
-const changes = [
-  "O repetitivo deixa de depender de alguém no celular",
-  "A conversa que pede uma pessoa segue para a equipe com contexto",
-  "Dá para ver o que está parado e quem responde",
-  "O histórico não fica só na memória de quem atendeu",
-  "A implantação começa pelo diagnóstico da operação atual",
+const after = [
+  "Responsável visível",
+  "Fila e contexto compartilhados",
+  "Handoff com histórico da conversa",
 ];
 
 export function ProblemSolutionSection() {
   return (
-    <section
-      id="problema-solucao"
-      className="border-y df-border-brand bg-[var(--devflow-surface)] py-24 sm:py-28"
-      aria-labelledby="problem-solution-heading"
-    >
-      <div className="mx-auto max-w-[1200px] px-4 sm:px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl text-center">
-          <div className="mx-auto mb-4 h-1 w-12 rounded-full bg-primary" aria-hidden />
-          <h2
-            id="problem-solution-heading"
-            className="df-text-primary text-2xl font-semibold tracking-tight sm:text-3xl"
-          >
-            Seu WhatsApp não precisa depender do improviso
+    <section id="problema-solucao" className="df-v2-section" aria-labelledby="problem-solution-heading">
+      <div className="df-v2-container grid gap-10 lg:grid-cols-12 lg:gap-16">
+        <div className="lg:col-span-5">
+          <h2 id="problem-solution-heading" className="df-v2-h2 text-balance">
+            Quando todo mundo atende, quem é responsável pela conversa?
           </h2>
-          <p className="df-text-secondary mt-3 text-base leading-relaxed sm:text-lg">
-            Quando tudo fica no celular, na memória da equipe ou em conversas soltas, o atendimento atrasa e a
-            venda esfria.
-          </p>
         </div>
-
-        <div className="mt-14 grid gap-8 lg:grid-cols-2 lg:gap-10">
-          <article
-            className="rounded-2xl border df-bg-danger-soft p-6 sm:p-8"
-            aria-labelledby="problem-block-heading"
-          >
-            <div className="flex items-center gap-3">
-              <div className="flex size-10 shrink-0 items-center justify-center rounded-xl df-bg-danger-soft">
-                <AlertTriangle className="size-5 df-status-danger" aria-hidden />
-              </div>
-              <h3 id="problem-block-heading" className="df-text-primary text-lg font-bold">
-                O problema
+        <div className="lg:col-span-7">
+          <p className="df-v2-lead">
+            Sem um dono, a mensagem fica no volume. A DevFlow trata isso como operação: alguém assume, a fila mostra
+            o que está parado e o histórico não fica só com uma pessoa.
+          </p>
+          <div className="mt-8 grid gap-6 sm:grid-cols-2">
+            <div>
+              <h3 id="problem-block-heading" className="text-sm font-semibold uppercase tracking-[0.08em] text-[var(--df-v2-muted)]">
+                Antes
               </h3>
+              <ul className="mt-3 space-y-2 text-sm leading-relaxed text-[var(--df-v2-ink-soft)]" role="list">
+                {before.map((item) => (
+                  <li key={item}>{item}</li>
+                ))}
+              </ul>
             </div>
-            <p className="df-text-secondary mt-3 text-sm leading-relaxed">
-              WhatsApp desorganizado gera demora, mensagem perdida e equipe sobrecarregada.
-            </p>
-            <ul className="mt-5 space-y-3" role="list">
-              {problems.map((item) => (
-                <li key={item} className="flex items-start gap-2.5">
-                  <X className="mt-0.5 size-4 shrink-0 df-status-danger" aria-hidden />
-                  <span className="df-text-primary text-sm leading-relaxed">{item}</span>
-                </li>
-              ))}
-            </ul>
-          </article>
-
-          <article
-            className="rounded-2xl border df-bg-brand-soft p-6 sm:p-8"
-            aria-labelledby="solution-block-heading"
-          >
-            <div className="flex items-center gap-3">
-              <div className="flex size-10 shrink-0 items-center justify-center rounded-xl df-bg-brand-soft">
-                <Check className="size-5 df-status-brand" aria-hidden />
-              </div>
-              <h3 id="solution-block-heading" className="df-text-primary text-lg font-bold">
-                O que muda
+            <div>
+              <h3 id="solution-block-heading" className="text-sm font-semibold uppercase tracking-[0.08em] text-[var(--df-v2-brand)]">
+                Com a DevFlow
               </h3>
+              <ul className="mt-3 space-y-2 text-sm leading-relaxed text-[var(--df-v2-ink)]" role="list">
+                {after.map((item) => (
+                  <li key={item}>{item}</li>
+                ))}
+              </ul>
             </div>
-            <p className="df-text-secondary mt-3 text-sm leading-relaxed">
-              A operação passa a ter dono, contexto e um caminho claro até uma pessoa.
-            </p>
-            <ul className="mt-5 space-y-3" role="list">
-              {changes.map((item) => (
-                <li key={item} className="flex items-start gap-2.5">
-                  <Check className="mt-0.5 size-4 shrink-0 df-status-success" aria-hidden />
-                  <span className="df-text-primary text-sm leading-relaxed">{item}</span>
-                </li>
-              ))}
-            </ul>
-          </article>
+          </div>
+          <p className="mt-6 text-xs text-[var(--df-v2-muted)]">Modelo de operação. Não é um caso de cliente.</p>
         </div>
       </div>
     </section>
diff --git a/src/components/sections/product-inbox-showcase.tsx b/src/components/sections/product-inbox-showcase.tsx
new file mode 100644
index 00000000..9e7195af
--- /dev/null
+++ b/src/components/sections/product-inbox-showcase.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const STEPS = [
+  {
+    owner: "Sem responsável",
+    queue: "A definir",
+    status: "Precisa resposta",
+    note: "A conversa ainda não tem dono.",
+  },
+  {
+    owner: "Bruno",
+    queue: "Comercial",
+    status: "Em atendimento",
+    note: "Bruno assumiu a conversa.",
+  },
+  {
+    owner: "Bruno",
+    queue: "Comercial",
+    status: "Precisa resposta",
+    note: "A fila leva o contexto junto.",
+  },
+  {
+    owner: "Carla",
+    queue: "Comercial",
+    status: "Transferida",
+    note: "Transferido para Carla.",
+  },
+] as const;
+
+const VIEWS = ["Precisa resposta", "Minhas", "Sem responsável"] as const;
+
+const THREADS = [
+  { name: "Mariana", topic: "Pedido em aberto", meta: "", selected: true },
+  { name: "João", topic: "Dúvida de entrega", meta: "Sem responsável", selected: false },
+  { name: "Ana", topic: "Horário de atendimento", meta: "Bruno", selected: false },
+  { name: "Pedro", topic: "Status do pedido", meta: "Carla", selected: false },
+] as const;
+
+const MESSAGES = [
+  { who: "Mariana", text: "Consigo falar com alguém sobre o pedido?" },
+  { who: "Operação", text: "Sim. A conversa fica com quem acompanha esse caso." },
+] as const;
+
+export function ProductInboxShowcase() {
+  const [step, setStep] = useState(1);
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const apply = () => setReduced(media.matches);
+    const timer = window.setTimeout(apply, 0);
+    media.addEventListener("change", apply);
+    return () => {
+      window.clearTimeout(timer);
+      media.removeEventListener("change", apply);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (reduced || typeof window.matchMedia !== "function") return;
+    const timer = window.setInterval(() => {
+      setStep((current) => (current + 1) % STEPS.length);
+    }, 2600);
+    return () => window.clearInterval(timer);
+  }, [reduced]);
+
+  const frame = reduced ? STEPS[1] : STEPS[step];
+
+  return (
+    <figure className="df-v2-panel p-4 sm:p-5">
+      <figcaption className="flex items-start justify-between gap-3">
+        <div>
+          <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--df-v2-brand)]">
+            Demonstração da plataforma
+          </p>
+          <p className="mt-1 text-sm font-semibold text-[var(--df-v2-ink)]">Inbox da equipe</p>
+        </div>
+        <span className="shrink-0 rounded-full border border-[var(--df-v2-border)] bg-[var(--df-v2-surface-muted)] px-2.5 py-1 text-[11px] font-semibold text-[var(--df-v2-ink-soft)]">
+          Dados ilustrativos
+        </span>
+      </figcaption>
+      <p className="mt-2 text-xs leading-relaxed text-[var(--df-v2-muted)]">
+        Exemplo de operação: a conversa começa sem responsável, passa para Bruno na fila Comercial e pode ser
+        transferida para Carla. Não representa uma operação de cliente.
+      </p>
+
+      <div className="mt-4 overflow-hidden rounded-[14px] border border-[var(--df-v2-border)]" aria-hidden="true">
+        <div className="df-v2-fill flex items-center justify-between gap-3 border-b border-[var(--df-v2-border)] px-3 py-2">
+          <p className="text-xs font-semibold text-[var(--df-v2-ink)]">Inbox</p>
+          <p className="text-[11px] font-medium text-[var(--df-v2-muted)]">Atendimento</p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-[7.5rem_minmax(0,1.05fr)_minmax(0,0.95fr)]">
+          <ul className="flex gap-2 overflow-x-auto border-b border-[var(--df-v2-border)] bg-[var(--df-v2-surface-muted)] p-2 md:flex-col md:gap-1 md:border-b-0 md:border-r" role="list">
+            {VIEWS.map((view) => (
+              <li
+                key={view}
+                className={
+                  view === "Precisa resposta"
+                    ? "df-v2-fill shrink-0 rounded-[10px] px-2.5 py-2 text-xs font-semibold text-[var(--df-v2-ink)]"
+                    : "shrink-0 rounded-[10px] px-2.5 py-2 text-xs font-medium text-[var(--df-v2-muted)]"
+                }
+              >
+                {view}
+              </li>
+            ))}
+          </ul>
+          <ul className="divide-y divide-[var(--df-v2-border)] border-b border-[var(--df-v2-border)] md:border-b-0 md:border-r" role="list">
+            {THREADS.map((thread) => (
+              <li key={thread.name} className={thread.selected ? "df-v2-fill px-3 py-2.5" : "px-3 py-2.5"}>
+                <p className="truncate text-sm font-semibold text-[var(--df-v2-ink)]">{thread.name}</p>
+                <p className="truncate text-xs text-[var(--df-v2-muted)]">{thread.topic}</p>
+                <p className="mt-1 text-[11px] font-medium text-[var(--df-v2-ink-soft)]">
+                  {thread.selected ? frame.owner : thread.meta}
+                </p>
+              </li>
+            ))}
+          </ul>
+          <div className="df-v2-fill px-3 py-3">
+            <p className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--df-v2-muted)]">
+              Pedido em aberto
+            </p>
+            <dl className="mt-3 space-y-2 text-xs">
+              <div className="flex items-center justify-between gap-3">
+                <dt className="text-[var(--df-v2-muted)]">Responsável</dt>
+                <dd className="font-semibold text-[var(--df-v2-brand)]">{frame.owner}</dd>
+              </div>
+              <div className="flex items-center justify-between gap-3">
+                <dt className="text-[var(--df-v2-muted)]">Fila</dt>
+                <dd className="font-medium text-[var(--df-v2-ink)]">{frame.queue}</dd>
+              </div>
+              <div className="flex items-center justify-between gap-3">
+                <dt className="text-[var(--df-v2-muted)]">Status</dt>
+                <dd className="font-medium text-[var(--df-v2-ink)]">{frame.status}</dd>
+              </div>
+            </dl>
+            <p className="mt-3 text-xs font-medium leading-relaxed text-[var(--df-v2-ink-soft)]">{frame.note}</p>
+            <div className="mt-3 space-y-2 border-t border-[var(--df-v2-border)] pt-3">
+              {MESSAGES.map((line) => (
+                <p key={line.who} className="text-xs leading-relaxed text-[var(--df-v2-ink-soft)]">
+                  <span className="font-semibold text-[var(--df-v2-ink)]">{line.who}. </span>
+                  {line.text}
+                </p>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </figure>
+  );
+}
diff --git a/src/components/sections/product-stories.tsx b/src/components/sections/product-stories.tsx
new file mode 100644
index 00000000..27179657
--- /dev/null
+++ b/src/components/sections/product-stories.tsx
@@ -0,0 +1,148 @@
+const stories = [
+  {
+    id: "ownership-heading",
+    kicker: "Responsabilidade",
+    title: "Nenhuma conversa sem contexto de responsabilidade.",
+    copy: "Cada conversa mostra quem assumiu e o que já foi dito. A equipe não precisa reconstruir o caso no privado.",
+  },
+  {
+    id: "routing-heading",
+    kicker: "Filas",
+    title: "Distribua a operação sem perder contexto.",
+    copy: "A fila configurada no diagnóstico recebe a conversa com o histórico. Isso não é roteamento por IA, presença ou carga.",
+  },
+  {
+    id: "handoff-heading",
+    kicker: "Pessoa e automação",
+    title: "Automação quando faz sentido. Pessoa quando precisa.",
+    copy: "Dúvida frequente pode seguir um fluxo permitido. Pedido fora do combinado, sensível ou que precisa de contexto vai para uma pessoa, com a conversa inteira.",
+  },
+] as const;
+
+function OwnershipPanel() {
+  return (
+    <div className="rounded-[16px] border border-[var(--df-v2-border)] bg-[var(--df-v2-surface)] p-5">
+      <p className="text-sm font-semibold text-[var(--df-v2-ink)]">Pedido em aberto</p>
+      <div className="mt-4 flex flex-wrap items-center gap-2 text-sm">
+        <span className="rounded-full border border-[var(--df-v2-border)] px-3 py-1 text-[var(--df-v2-muted)] line-through decoration-[var(--df-v2-border-strong)]">
+          Sem responsável
+        </span>
+        <span aria-hidden className="text-[var(--df-v2-muted)]">
+          →
+        </span>
+        <span className="rounded-full bg-[var(--df-v2-brand)] px-3 py-1 font-semibold text-white">Bruno</span>
+      </div>
+      <p className="mt-4 text-sm font-medium text-[var(--df-v2-ink)]">Bruno assumiu a conversa</p>
+      <ol className="mt-4 space-y-3 border-t border-[var(--df-v2-border)] pt-4 text-sm" aria-label="Histórico ilustrativo">
+        <li className="text-[var(--df-v2-ink-soft)]">
+          <span className="font-semibold text-[var(--df-v2-ink)]">Cliente. </span>
+          Consigo falar sobre o pedido?
+        </li>
+        <li className="text-[var(--df-v2-ink-soft)]">
+          <span className="font-semibold text-[var(--df-v2-ink)]">Histórico. </span>
+          Bruno assumiu e o que já foi dito permanece na conversa.
+        </li>
+      </ol>
+      <p className="mt-4 text-[11px] text-[var(--df-v2-muted)]">Dados ilustrativos. Atribuição mostrada, não automática.</p>
+    </div>
+  );
+}
+
+function RoutingPanel() {
+  const rows = [
+    ["Pedido em aberto", "Bruno"],
+    ["Dúvida de entrega", "Carla"],
+    ["Status do pedido", "Bruno"],
+  ] as const;
+
+  return (
+    <div className="rounded-[16px] border border-[var(--df-v2-border)] bg-[var(--df-v2-surface-muted)] p-5">
+      <div className="flex items-center justify-between gap-3">
+        <p className="text-sm font-semibold text-[var(--df-v2-ink)]">Fila Comercial</p>
+        <span className="rounded-full border border-[var(--df-v2-border-strong)] px-2.5 py-1 text-[11px] font-semibold text-[var(--df-v2-ink-soft)]">
+          Precisa resposta
+        </span>
+      </div>
+      <ul className="mt-4 space-y-2" role="list">
+        {rows.map(([topic, owner]) => (
+          <li
+            key={topic}
+            className="df-v2-fill flex items-center justify-between gap-3 rounded-[12px] border border-[var(--df-v2-border)] px-3 py-3 text-sm"
+          >
+            <span className="font-medium text-[var(--df-v2-ink)]">{topic}</span>
+            <span className="shrink-0 font-semibold text-[var(--df-v2-brand)]">{owner}</span>
+          </li>
+        ))}
+      </ul>
+      <p className="mt-4 text-[11px] leading-relaxed text-[var(--df-v2-muted)]">
+        Dados ilustrativos. A distribuição segue a fila configurada e leva o histórico junto.
+      </p>
+    </div>
+  );
+}
+
+function HandoffPanel() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      <div className="rounded-[16px] border border-[var(--df-v2-border)] bg-[var(--df-v2-surface)] p-4">
+        <p className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--df-v2-brand)]">Fluxo permitido</p>
+        <ol className="mt-3 space-y-3 text-sm">
+          <li className="font-medium text-[var(--df-v2-ink)]">Dúvida frequente</li>
+          <li className="border-t border-[var(--df-v2-border)] pt-3 text-[var(--df-v2-ink-soft)]">Assistência da IA</li>
+          <li className="border-t border-[var(--df-v2-border)] pt-3 font-semibold text-[var(--df-v2-ink)]">
+            Resposta permitida
+          </li>
+        </ol>
+      </div>
+      <div className="rounded-[16px] border border-[var(--df-v2-border-strong)] bg-[var(--df-v2-surface)] p-4">
+        <p className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--df-v2-ink)]">Fora do fluxo</p>
+        <ol className="mt-3 space-y-3 text-sm">
+          <li className="font-medium text-[var(--df-v2-ink)]">Pedido sensível ou sem resposta pronta</li>
+          <li className="border-t border-[var(--df-v2-border)] pt-3 text-[var(--df-v2-ink-soft)]">Handoff</li>
+          <li className="border-t border-[var(--df-v2-border)] pt-3 font-semibold text-[var(--df-v2-ink)]">
+            Carla assume
+          </li>
+        </ol>
+      </div>
+      <p className="text-[11px] leading-relaxed text-[var(--df-v2-muted)] sm:col-span-2">
+        Dados ilustrativos. A automação não substitui a equipe nem responde fora do que foi permitido.
+      </p>
+    </div>
+  );
+}
+
+const panels = [OwnershipPanel, RoutingPanel, HandoffPanel] as const;
+
+export function ProductStories() {
+  return (
+    <>
+      {stories.map((story, index) => {
+        const Panel = panels[index];
+        return (
+          <section
+            key={story.id}
+            className={index % 2 === 1 ? "df-v2-section bg-[var(--df-v2-surface)]" : "df-v2-section"}
+            aria-labelledby={story.id}
+          >
+            <div
+              className={`df-v2-container grid items-center gap-10 lg:grid-cols-12 lg:gap-16 ${
+                index % 2 === 1 ? "lg:[&>*:first-child]:order-2" : ""
+              }`}
+            >
+              <div className="lg:col-span-6">
+                <p className="text-[13px] font-semibold text-[var(--df-v2-brand)]">{story.kicker}</p>
+                <h2 id={story.id} className="df-v2-h2 mt-3 text-balance">
+                  {story.title}
+                </h2>
+                <p className="df-v2-lead mt-4">{story.copy}</p>
+              </div>
+              <div className="lg:col-span-6">
+                <Panel />
+              </div>
+            </div>
+          </section>
+        );
+      })}
+    </>
+  );
+}
diff --git a/src/components/sections/products-section.tsx b/src/components/sections/products-section.tsx
index 056449c2..51ff3459 100644
--- a/src/components/sections/products-section.tsx
+++ b/src/components/sections/products-section.tsx
@@ -1,167 +1,53 @@
+"use client";
+
 import Link from "next/link";
-import { MessageCircle, Wallet, Sparkles, ArrowRight, ExternalLink } from "lucide-react";
-import {
-  ECOSYSTEM_PRODUCTS_DESCRIPTION,
-  ECOSYSTEM_PRODUCTS_HEADING,
-  ECOSYSTEM_SECTION_LABEL,
-  PRIMARY_CONVERT_CTA_LABEL,
-  PRIMARY_CONVERT_HREF,
-} from "@/lib/conversion-copy";
-import { cn } from "@/lib/utils";
+import { ArrowRight } from "lucide-react";
+import { trackEcosystemLinkClick, trackToolCardClick } from "@/lib/analytics";
 
 const products = [
   {
-    icon: MessageCircle,
-    iconBg: "bg-primary/10",
-    iconColor: "text-primary",
-    tag: "Solução principal",
-    tagColor: "text-primary",
-    title: "WhatsApp Platform",
-    subtitle: "Atendimento e vendas no WhatsApp",
-    description:
-      "Inbox multiatendente, IA no repetitivo, handoff humano, SLA e dashboard operacional.",
-    highlights: [
-      "WhatsApp Cloud API oficial",
-      "Fila priorizada e handoff",
-      "IA no repetitivo, humano no crítico",
-      "Diagnóstico e operação acompanhada",
-    ],
-    cta: PRIMARY_CONVERT_CTA_LABEL,
-    href: PRIMARY_CONVERT_HREF,
-    external: false,
-    accent: "border-primary/30 ring-1 ring-primary/10",
-    featured: true,
-  },
-  {
-    icon: Wallet,
-    iconBg: "bg-muted/50",
-    iconColor: "df-text-secondary",
-    tag: "Complementar",
-    tagColor: "df-text-secondary",
+    id: "financeiro",
     title: "Sistema Financeiro",
-    subtitle: "Gestão financeira pessoal ou PJ",
-    description:
-      "Receitas, despesas e fechamento mensal — para quem precisa de controle além do atendimento.",
-    highlights: [
-      "Múltiplos contextos",
-      "Recorrência automática",
-      "Fechamento mensal",
-      "Importação CSV",
-    ],
-    cta: "Conhecer o Financeiro",
+    description: "Receitas, despesas e fechamento mensal, separado da operação de atendimento.",
     href: "/ferramentas/financeiro",
-    external: false,
-    accent: "df-border-brand",
-    featured: false,
+    tool: true,
   },
   {
-    icon: Sparkles,
-    iconBg: "bg-muted/40",
-    iconColor: "text-muted-foreground",
-    tag: "Em breve",
-    tagColor: "text-muted-foreground",
-    title: "Próximo produto",
-    subtitle: "Em desenvolvimento",
-    description:
-      "Novos módulos do ecossistema DevFlow Labs — complementares à operação no WhatsApp.",
-    highlights: [
-      "Acompanhe o lançamento",
-      "Notificação por e-mail",
-      "Acesso antecipado",
-    ],
-    cta: "Quero saber",
-    href: "/contato",
-    external: false,
-    accent: "border-dashed border-border",
-    disabled: true,
-    featured: false,
+    id: "products_hub",
+    title: "Catálogo de produtos",
+    description: "O que a DevFlow oferece hoje, com o próximo passo de cada produto.",
+    href: "/produtos",
+    tool: false,
   },
-];
+] as const;
 
 export function ProductsSection() {
   return (
-    <section
-      id="produtos"
-      className="border-y df-border-brand bg-[var(--devflow-surface)] py-24 sm:py-28"
-      aria-labelledby="products-heading"
-    >
-      <div className="mx-auto max-w-[1200px] px-4 sm:px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl text-center">
-          <div className="mx-auto mb-4 h-1 w-12 rounded-full bg-muted-foreground/30" aria-hidden />
-          <p className="text-xs font-medium text-muted-foreground sm:text-sm">{ECOSYSTEM_SECTION_LABEL}</p>
-          <h2
-            id="products-heading"
-            className="df-text-primary text-2xl font-semibold tracking-tight sm:text-3xl"
-          >
-            {ECOSYSTEM_PRODUCTS_HEADING}
-          </h2>
-          <p className="df-text-secondary mt-3 leading-relaxed">
-            {ECOSYSTEM_PRODUCTS_DESCRIPTION}
-          </p>
-        </div>
-
-        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+    <section id="produtos" className="bg-[var(--df-v2-surface-muted)] pb-12 pt-2 sm:pb-16" aria-labelledby="products-heading">
+      <div className="df-v2-container">
+        <h2 id="products-heading" className="text-xl font-semibold tracking-tight text-[var(--df-v2-ink)] sm:text-2xl">
+          Outros produtos DevFlow
+        </h2>
+        <ul className="mt-6 divide-y divide-[var(--df-v2-border)] border-y border-[var(--df-v2-border)]" role="list">
           {products.map((product) => (
-            <article
-              key={product.title}
-              className={cn(
-                "flex flex-col rounded-2xl border-2 bg-card p-6 shadow-sm",
-                "transition-all duration-300",
-                product.disabled
-                  ? "df-text-muted"
-                  : "hover:-translate-y-1 hover:border-[color-mix(in_srgb,var(--devflow-brand)_20%,transparent)] hover:shadow-[0_16px_48px_-20px_rgba(0,0,0,0.28)]",
-                product.accent
-              )}
-            >
-              <div className="flex items-center gap-3">
-                <div className={cn("flex size-10 items-center justify-center rounded-xl", product.iconBg)}>
-                  <product.icon className={cn("size-5", product.iconColor)} aria-hidden />
-                </div>
-                <div>
-                  <p className={cn("text-xs font-semibold uppercase tracking-wide", product.tagColor)}>
-                    {product.tag}
-                  </p>
-                </div>
-              </div>
-
-              <h3 className="df-text-primary mt-4 text-lg font-semibold">{product.title}</h3>
-              <p className="df-text-secondary text-sm font-medium">{product.subtitle}</p>
-              <p className="df-text-secondary mt-2 flex-1 text-sm leading-relaxed">{product.description}</p>
-
-              <ul className="mt-4 space-y-1.5">
-                {product.highlights.map((item) => (
-                  <li key={item} className="df-text-secondary flex items-center gap-2 text-xs leading-relaxed">
-                    <span className="size-1.5 shrink-0 rounded-full bg-primary" aria-hidden />
-                    {item}
-                  </li>
-                ))}
-              </ul>
-
+            <li key={product.title}>
               <Link
                 href={product.href}
-                className={cn(
-                  "mt-6 inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold",
-                  "transition-all duration-200",
-                  product.disabled
-                    ? "df-text-secondary cursor-default border border-dashed border-border bg-muted/20 pointer-events-none"
-                    : "df-btn-secondary"
-                )}
-                tabIndex={product.disabled ? -1 : undefined}
-                aria-disabled={product.disabled}
+                onClick={() => {
+                  if (product.tool) trackToolCardClick(product.id);
+                  trackEcosystemLinkClick({ item: product.id, surface: "home_products_section" });
+                }}
+                className="flex items-center justify-between gap-4 py-4"
               >
-                {product.cta}
-                {product.external ? (
-                  <ExternalLink className="size-4" aria-hidden />
-                ) : (
-                  <ArrowRight className="size-4" aria-hidden />
-                )}
+                <span>
+                  <span className="block text-base font-semibold text-[var(--df-v2-ink)]">{product.title}</span>
+                  <span className="mt-1 block text-sm text-[var(--df-v2-muted)]">{product.description}</span>
+                </span>
+                <ArrowRight className="size-4 shrink-0 text-[var(--df-v2-muted)]" aria-hidden />
               </Link>
-            </article>
+            </li>
           ))}
-        </div>
-        <p className="df-text-muted mx-auto mt-10 max-w-md text-center text-xs leading-relaxed">
-          A WhatsApp Platform é a oferta principal — demais produtos complementam o ecossistema.
-        </p>
+        </ul>
       </div>
     </section>
   );
diff --git a/src/components/sections/technical-trust-strip.tsx b/src/components/sections/technical-trust-strip.tsx
index d6c515fe..edd30a26 100644
--- a/src/components/sections/technical-trust-strip.tsx
+++ b/src/components/sections/technical-trust-strip.tsx
@@ -1,15 +1,21 @@
-import { TECH_TRUST_STRIP } from "@/lib/conversion-copy";
+const items = [
+  "API oficial da Meta",
+  "Inbox multiatendente",
+  "Responsáveis e filas",
+  "Handoff humano",
+] as const;
 
 export function TechnicalTrustStrip() {
   return (
-    <div
-      className="border-y df-border-brand bg-[var(--devflow-surface)] py-2.5 text-center sm:py-2.5"
-      role="note"
-      aria-label="Infraestrutura técnica"
-    >
-      <p className="df-text-secondary mx-auto max-w-4xl px-3 font-mono text-[11px] font-medium leading-relaxed tracking-wide min-[380px]:text-xs sm:px-4">
-        {TECH_TRUST_STRIP}
-      </p>
+    <div className="border-y border-[var(--df-v2-border)] bg-[var(--df-v2-surface)]" role="note" aria-label="Infraestrutura técnica">
+      <ul className="df-v2-container flex flex-col gap-3 py-4 text-sm font-medium text-[var(--df-v2-ink-soft)] sm:flex-row sm:flex-wrap sm:justify-between sm:gap-6 sm:py-5" role="list">
+        {items.map((item) => (
+          <li key={item} className="flex items-center gap-2">
+            <span className="size-1.5 rounded-full bg-[var(--df-v2-accent)]" aria-hidden />
+            {item}
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }
diff --git a/src/components/sections/tools-section.tsx b/src/components/sections/tools-section.tsx
index fa76f1f9..8dade109 100644
--- a/src/components/sections/tools-section.tsx
+++ b/src/components/sections/tools-section.tsx
@@ -1,149 +1,52 @@
 "use client";
 
 import Link from "next/link";
-import { Wallet, SplitSquareHorizontal, Building2, ArrowRight } from "lucide-react";
+import { ArrowRight } from "lucide-react";
 import { trackEcosystemLinkClick, trackToolCardClick } from "@/lib/analytics";
-import {
-  ECOSYSTEM_SECTION_LABEL,
-  ECOSYSTEM_TOOLS_DESCRIPTION,
-  ECOSYSTEM_TOOLS_HEADING,
-} from "@/lib/conversion-copy";
-import { cn } from "@/lib/utils";
 
 const tools = [
-  {
-    id: "financeiro",
-    icon: Wallet,
-    iconBg: "bg-primary/12",
-    iconColor: "text-primary",
-    badge: "Complementar",
-    badgeColor: "bg-muted text-muted-foreground border border-border",
-    title: "Financeiro",
-    pain: "Planilha que ninguém atualiza?",
-    benefit: "Tudo num painel — orçamento, recorrência, mês fechado.",
-    description: "PF, PJ ou sociedade.",
-    features: ["No browser", "Orçamento claro", "Teste antes de cravar"],
-    href: "/ferramentas/financeiro",
-    highlight: false,
-  },
   {
     id: "divisao",
-    icon: SplitSquareHorizontal,
-    iconBg: "bg-muted/50",
-    iconColor: "df-text-secondary",
-    badge: "Grátis",
-    badgeColor: "bg-muted df-text-muted border df-border-brand",
     title: "Divisão de contas",
-    pain: "Dividir conta na mão?",
-    benefit: "Rateio na hora, sem discussão.",
-    description: "Casal, república, viagem.",
-    features: ["Sem instalar", "Na hora", "Grátis"],
+    description: "Rateio simples no browser, sem instalar.",
     href: "/ferramentas/divisao-de-contas",
-    highlight: false,
   },
   {
     id: "cnpj",
-    icon: Building2,
-    iconBg: "bg-muted/50",
-    iconColor: "df-text-secondary",
-    badge: "Grátis",
-    badgeColor: "bg-muted df-text-muted border df-border-brand",
     title: "Consulta CNPJ",
-    pain: "Validar empresa antes de pagar?",
-    benefit: "Dados oficiais em segundos.",
-    description: "Direto da Receita.",
-    features: ["Rápido", "Simples", "Grátis"],
+    description: "Dados públicos da empresa, direto da Receita.",
     href: "/ferramentas/consulta-cnpj",
-    highlight: false,
   },
-];
+] as const;
 
 export function ToolsSection() {
   return (
-    <section
-      id="ferramentas"
-      className="border-y df-border-brand bg-[var(--devflow-surface)] py-14 sm:py-20 lg:py-28"
-      aria-labelledby="tools-heading"
-    >
-      <div className="mx-auto max-w-[1200px] px-3 min-[400px]:px-4 sm:px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl text-center">
-          <div className="mx-auto mb-3 h-1 w-12 rounded-full bg-muted-foreground/30 sm:mb-4" aria-hidden />
-          <p className="text-xs font-medium text-muted-foreground sm:text-sm">{ECOSYSTEM_SECTION_LABEL}</p>
-          <h2
-            id="tools-heading"
-            className="df-text-primary mt-2 text-balance text-xl font-bold tracking-tight sm:text-3xl lg:text-4xl"
-          >
-            {ECOSYSTEM_TOOLS_HEADING}
-          </h2>
-          <p className="df-text-secondary mt-4 text-base leading-relaxed sm:text-lg">
-            {ECOSYSTEM_TOOLS_DESCRIPTION}
-          </p>
-        </div>
-
-        <div className="mt-16 grid gap-10 sm:grid-cols-2 lg:grid-cols-3">
+    <section id="ferramentas" className="bg-[var(--df-v2-surface-muted)] py-10 sm:py-12" aria-labelledby="tools-heading">
+      <div className="df-v2-container">
+        <p className="text-[13px] font-semibold text-[var(--df-v2-muted)]">Explore também</p>
+        <h2 id="tools-heading" className="mt-2 text-xl font-semibold tracking-tight text-[var(--df-v2-ink)] sm:text-2xl">
+          Ferramentas gratuitas
+        </h2>
+        <ul className="mt-6 divide-y divide-[var(--df-v2-border)] border-y border-[var(--df-v2-border)]" role="list">
           {tools.map((tool) => (
-            <article
-              key={tool.id}
-              className={cn(
-                "group relative flex flex-col rounded-2xl border-2 bg-card p-8",
-                "shadow-sm transition-all duration-300",
-                "hover:-translate-y-1 hover:shadow-[0_16px_40px_rgba(15,23,42,0.08)]",
-                "border-border hover:border-primary/20"
-              )}
-            >
-              <div className="flex flex-1 flex-col">
-                <div className="flex items-start justify-between gap-2">
-                  <div className={cn("flex size-11 items-center justify-center rounded-xl", tool.iconBg)}>
-                    <tool.icon className={cn("size-6", tool.iconColor)} aria-hidden />
-                  </div>
-                  <span
-                    className={cn(
-                      "shrink-0 rounded-full px-2 py-1 text-[9px] font-bold uppercase tracking-wide sm:px-2.5 sm:text-[10px]",
-                      tool.badgeColor
-                    )}
-                  >
-                    {tool.badge}
-                  </span>
-                </div>
-
-                <h3 className="df-text-primary mt-5 text-pretty text-lg font-bold sm:mt-6 sm:text-xl">{tool.title}</h3>
-
-                <p className="df-text-secondary mt-3 text-sm">{tool.pain}</p>
-                <p className="mt-1 text-sm font-semibold text-primary">{tool.benefit}</p>
-                <p className="df-text-secondary mt-2 text-sm leading-relaxed">{tool.description}</p>
-
-                <ul className="mt-5 space-y-2.5 border-t border-border pt-5" role="list">
-                  {tool.features.map((feature) => (
-                    <li key={feature} className="df-text-secondary flex items-center gap-2 text-xs leading-relaxed">
-                      <span className="size-1.5 shrink-0 rounded-full bg-primary" aria-hidden />
-                      {feature}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-
+            <li key={tool.id}>
               <Link
                 href={tool.href}
                 onClick={() => {
                   trackToolCardClick(tool.id);
                   trackEcosystemLinkClick({ item: tool.id, surface: "home_tools_section" });
                 }}
-                className={cn(
-                  "mt-6 inline-flex min-h-12 w-full shrink-0 items-center justify-center gap-2 rounded-xl px-3 py-3.5 text-sm font-bold leading-snug sm:mt-auto sm:min-h-14 sm:py-4 sm:pt-6",
-                  "transition-all duration-200",
-                  "df-surface-elevated border-2 text-foreground hover:border-primary/35"
-                )}
+                className="group flex items-center justify-between gap-4 py-4 text-left"
               >
-                <span className="text-balance">Conhecer ferramenta</span>
-                <ArrowRight className="size-4 shrink-0" aria-hidden />
+                <span>
+                  <span className="block text-base font-semibold text-[var(--df-v2-ink)]">{tool.title}</span>
+                  <span className="mt-1 block text-sm text-[var(--df-v2-muted)]">{tool.description}</span>
+                </span>
+                <ArrowRight className="size-4 shrink-0 text-[var(--df-v2-muted)]" aria-hidden />
               </Link>
-            </article>
+            </li>
           ))}
-        </div>
-
-        <p className="df-text-muted mx-auto mt-12 max-w-lg text-center text-xs leading-relaxed">
-          Ferramentas gratuitas · Sem cartão · A operação principal é a WhatsApp Platform
-        </p>
+        </ul>
       </div>
     </section>
   );
diff --git a/src/components/sections/whatsapp-product-section.tsx b/src/components/sections/whatsapp-product-section.tsx
index 18fe6f98..04903d0d 100644
--- a/src/components/sections/whatsapp-product-section.tsx
+++ b/src/components/sections/whatsapp-product-section.tsx
@@ -1,58 +1,30 @@
-import { Inbox, Bot, ListOrdered, Plug } from "lucide-react";
+import { Inbox, UserRound, ListOrdered, ArrowRightLeft, History, Bot, Plug } from "lucide-react";
 
 const capabilities = [
-  {
-    icon: Inbox,
-    title: "Inbox da equipe",
-    description: "Várias pessoas atendem no mesmo número, com responsável e histórico da conversa.",
-  },
-  {
-    icon: Bot,
-    title: "Automação no repetitivo",
-    description:
-      "Dúvidas frequentes, status e triagem seguem um fluxo. Quando a conversa pede uma pessoa, o handoff leva o contexto.",
-  },
-  {
-    icon: ListOrdered,
-    title: "Fila visível",
-    description: "A equipe vê o que está aguardando, em atendimento ou encerrado.",
-  },
-  {
-    icon: Plug,
-    title: "WhatsApp Cloud API oficial",
-    description: "Webhooks e API oficial da Meta. Não é número espelhado nem sessão presa a um celular.",
-  },
-];
+  { icon: Inbox, title: "Inbox compartilhada" },
+  { icon: UserRound, title: "Responsáveis" },
+  { icon: ListOrdered, title: "Filas" },
+  { icon: ArrowRightLeft, title: "Handoff" },
+  { icon: History, title: "Histórico" },
+  { icon: Bot, title: "IA supervisionada" },
+  { icon: Plug, title: "API oficial" },
+] as const;
 
 export function WhatsAppProductSection() {
   return (
-    <section
-      id="capacidades"
-      className="border-y df-border-brand bg-[var(--devflow-surface)] py-12 sm:py-16 lg:py-20"
-      aria-labelledby="whatsapp-product-heading"
-    >
-      <div className="mx-auto max-w-[1200px] px-4 sm:px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl text-center">
-          <div className="mx-auto mb-4 h-1 w-12 rounded-full bg-primary" aria-hidden />
-          <h2
-            id="whatsapp-product-heading"
-            className="df-text-primary text-2xl font-bold tracking-tight sm:text-3xl"
-          >
-            O que entra na operação
-          </h2>
-          <p className="df-text-secondary mt-4 text-base leading-relaxed sm:text-lg">
-            Capacidades da WhatsApp Platform. O desenho de cada fluxo sai do diagnóstico, não de um pacote genérico.
-          </p>
-        </div>
-
-        <ul className="mt-10 grid gap-6 sm:grid-cols-2" role="list">
+    <section id="capacidades" className="df-v2-section" aria-labelledby="whatsapp-product-heading">
+      <div className="df-v2-container">
+        <h2 id="whatsapp-product-heading" className="df-v2-h2 max-w-[16ch]">
+          O que entra na operação
+        </h2>
+        <p className="df-v2-lead mt-4 max-w-2xl">
+          Capacidades da WhatsApp Platform. O desenho de cada fluxo sai do diagnóstico, não de um pacote genérico.
+        </p>
+        <ul className="mt-10 grid gap-x-8 gap-y-4 sm:grid-cols-2 lg:grid-cols-3" role="list">
           {capabilities.map((item) => (
-            <li key={item.title} className="df-surface-elevated rounded-2xl p-6">
-              <div className="flex size-9 items-center justify-center rounded-xl bg-primary/12">
-                <item.icon className="size-4 text-primary" aria-hidden />
-              </div>
-              <h3 className="df-text-primary mt-3 text-base font-bold">{item.title}</h3>
-              <p className="df-text-secondary mt-2 text-sm leading-relaxed">{item.description}</p>
+            <li key={item.title} className="flex items-center gap-3 border-t border-[var(--df-v2-border)] py-4">
+              <item.icon className="size-4 text-[var(--df-v2-brand)]" aria-hidden />
+              <span className="text-base font-semibold text-[var(--df-v2-ink)]">{item.title}</span>
             </li>
           ))}
         </ul>
diff --git a/src/components/shared/floating-whatsapp-cta.tsx b/src/components/shared/floating-whatsapp-cta.tsx
index 28ad9449..ebd30f71 100644
--- a/src/components/shared/floating-whatsapp-cta.tsx
+++ b/src/components/shared/floating-whatsapp-cta.tsx
@@ -22,18 +22,16 @@ export function FloatingWhatsAppCta() {
       rel={usesMailto ? undefined : "noopener noreferrer"}
       onClick={handleClick}
       className={cn(
-        "fixed z-40 flex items-center gap-2 rounded-full px-4 py-3 shadow-lg",
+        "fixed z-40 flex size-11 items-center justify-center rounded-full",
         "bottom-[max(1rem,env(safe-area-inset-bottom,0px))] right-[max(1rem,env(safe-area-inset-right,0px))]",
-        "bg-[#25D366] text-white font-semibold text-sm",
-        "transition-all duration-200 hover:bg-[#20BD5A] hover:scale-105",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#25D366]/50 focus-visible:ring-offset-2"
+        "bg-[var(--df-v2-whatsapp,#25D366)] text-white",
+        "shadow-[0_8px_24px_rgba(15,23,42,0.16)]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--df-v2-brand)] focus-visible:ring-offset-2"
       )}
       aria-label={usesMailto ? "Enviar email para contato" : "Quero ver como organizar meu WhatsApp"}
     >
       <MessageCircle className="size-5 shrink-0" aria-hidden />
-      <span className="hidden sm:inline">
-        {usesMailto ? "Falar por email" : "Organizar WhatsApp"}
-      </span>
+      <span className="sr-only">{usesMailto ? "Falar por email" : "WhatsApp"}</span>
     </a>
   );
 }
diff --git a/src/lib/__tests__/header-product-access.test.ts b/src/lib/__tests__/header-product-access.test.ts
index d28456b9..f3939972 100644
--- a/src/lib/__tests__/header-product-access.test.ts
+++ b/src/lib/__tests__/header-product-access.test.ts
@@ -16,7 +16,7 @@ describe("header-product-access", () => {
     delete process.env.NEXT_PUBLIC_WHATSAPP_APP_URL;
     delete process.env.NEXT_PUBLIC_FINANCEIRO_APP_URL;
 
-    expect(ACCESS_PRODUCTS_LABEL).toBe("Acessar produtos");
+    expect(ACCESS_PRODUCTS_LABEL).toBe("Acessar");
     const targets = getHeaderProductAccessTargets();
     expect(targets.map((t) => t.id)).toEqual(["whatsapp", "financeiro"]);
     expect(targets[0]).toMatchObject({
diff --git a/src/lib/conversion-copy.ts b/src/lib/conversion-copy.ts
index c199a09e..93a6b4c1 100644
--- a/src/lib/conversion-copy.ts
+++ b/src/lib/conversion-copy.ts
@@ -76,6 +76,6 @@ export const CONTACT_ANALYSIS_ITEMS = [
   "Gargalos de resposta",
   "Perguntas repetitivas que podem ser automatizadas",
   "Quando o atendimento precisa ir para humano",
-  "Como organizar fila, SLA e dashboard",
+  "Como organizar fila, responsáveis e acompanhamento",
   "Próximo passo para um piloto guiado",
 ] as const;
diff --git a/src/lib/header-product-access.ts b/src/lib/header-product-access.ts
index 08922d76..e4b88bed 100644
--- a/src/lib/header-product-access.ts
+++ b/src/lib/header-product-access.ts
@@ -3,7 +3,7 @@ import { financeiroAppHref } from "@/lib/financeiro-app-href";
 import { whatsappAppUrl } from "@/lib/whatsapp-app-url";
 
 /** Label do controlo no Header (substitui «Entrar»). */
-export const ACCESS_PRODUCTS_LABEL = "Acessar produtos";
+export const ACCESS_PRODUCTS_LABEL = "Acessar";
 
 export type HeaderProductAccessCta = "acessar_whatsapp" | "acessar_financeiro";
 
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index e40bd168..33ce7c72 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -35,4 +35,32 @@
   --devflow-card-gap: 1.5rem;
   --devflow-shadow-card: 0 16px 40px rgba(0, 0, 0, 0.35);
   --devflow-shadow-hero: 0 24px 72px rgba(0, 0, 0, 0.45);
+
+  /*
+   * Brand V2 — portal home and light chrome only (.df-brand-v2 / .df-header-v2).
+   * Button green #087A59 on white = 5.33:1 (WCAG AA).
+   * Accent #13A66A on white = 3.14:1 — accent marks only, not body text or buttons.
+   * Muted #667085 on white = 4.97:1.
+   */
+  --df-v2-ink: #0b1220;
+  --df-v2-ink-soft: #344054;
+  --df-v2-muted: #667085;
+  --df-v2-canvas: #f7faf9;
+  --df-v2-surface: #ffffff;
+  --df-v2-surface-muted: #f1f5f3;
+  --df-v2-border: #e2e8e5;
+  --df-v2-border-strong: #cad5d0;
+  --df-v2-accent: #13a66a;
+  --df-v2-brand: #087a59;
+  --df-v2-brand-hover: #065e45;
+  --df-v2-dark: #071a14;
+  --df-v2-on-dark: #f4f7f6;
+  --df-v2-on-dark-muted: #c5d1cb;
+  --df-v2-info: #2563eb;
+  --df-v2-whatsapp: #25d366;
+  --df-v2-radius-btn: 12px;
+  --df-v2-radius-card: 16px;
+  --df-v2-radius-panel: 20px;
+  --df-v2-shadow-panel: 0 24px 80px rgba(15, 23, 42, 0.1);
+  --df-v2-container: 1240px;
 }