From e9aa8d251f4cca5cc2a266e4acd3e2462309971c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 14 Oct 2026 02:20:54 +0200
Subject: [PATCH 1/2] feat(web): design system v3 and new homepage

Palette, type and components from the pitch deck: warm dark default, cream
light theme, one terracotta accent, leaf green only for growth and live
status, Fraunces / Instrument Sans / IBM Plex Mono via next/font. No neon,
no glow.

Homepage rebuilt (components/v3): hero with the live flagship card, three
promises, coins-to-token animation, How it works (invest / create), Live now
cards, Garden, Security block, Creators / Holders, vision. No devnet, demo or
hackathon wording on the home page.

Also: navbar and footer restyled (four links, Security and Status in the
footer), onboarding modal replaced by a one-line dismissible hint on
/portfolios, composition bar and sparkline in the new palette, light-theme
overrides remapped to the cream palette. Program, SDK and product flows
untouched. Old landing kept in components/LandingPage.tsx.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DXtsfUkCFQBEUxekKw94KE
---
 apps/web/src/app/globals.css                  | 218 ++++++++++--------
 apps/web/src/app/layout.tsx                   |  50 ++--
 apps/web/src/app/page.tsx                     |   6 +-
 apps/web/src/components/Navbar.tsx            |  44 ++--
 .../web/src/components/OnboardingTutorial.tsx | 192 ++-------------
 apps/web/src/components/ThemeToggle.tsx       |  10 +-
 .../components/pot-index/CompositionBar.tsx   |   4 +-
 .../src/components/pot-index/GardenMode.tsx   |  16 +-
 .../src/components/pot-index/HowAPotWorks.tsx |  14 +-
 .../web/src/components/pot-index/NavChart.tsx |   2 +-
 .../src/components/pot-index/PlantBadge.tsx   |   2 +-
 apps/web/src/components/pot-index/PotCard.tsx |   8 +-
 apps/web/src/components/v3/FlagshipCard.tsx   | 100 ++++++++
 apps/web/src/components/v3/LandingV3.tsx      | 166 +++++++++++++
 apps/web/src/components/v3/PotAnimation.tsx   |  43 ++++
 apps/web/src/components/v3/Reveal.tsx         |  25 ++
 apps/web/tailwind.config.ts                   |  43 ++--
 17 files changed, 587 insertions(+), 356 deletions(-)
 create mode 100644 apps/web/src/components/v3/FlagshipCard.tsx
 create mode 100644 apps/web/src/components/v3/LandingV3.tsx
 create mode 100644 apps/web/src/components/v3/PotAnimation.tsx
 create mode 100644 apps/web/src/components/v3/Reveal.tsx

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index fa291e21..56d8a130 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -5,7 +5,10 @@
 /* ── Base ── */
 @layer base {
   body {
-    @apply bg-pot-dark text-white;
+    @apply bg-pot-dark text-white font-sans;
+  }
+  h1, h2, h3, .font-display {
+    text-wrap: balance;
   }
 
   a,
@@ -34,14 +37,14 @@
   }
 
   .btn-primary {
-    @apply rounded-xl bg-pot-green px-6 py-2.5 font-semibold text-pot-dark
+    @apply rounded-full bg-pot-accent px-6 py-2.5 font-semibold text-pot-dark
            transition hover:brightness-110 active:scale-[0.98]
            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pot-green focus-visible:ring-offset-2 focus-visible:ring-offset-pot-dark
            disabled:opacity-50 disabled:cursor-not-allowed;
   }
 
   .btn-secondary {
-    @apply rounded-xl border border-pot-border bg-pot-card px-6 py-2.5
+    @apply rounded-full border border-pot-border bg-transparent px-6 py-2.5
            font-medium text-white transition hover:border-pot-muted
            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pot-accent focus-visible:ring-offset-2 focus-visible:ring-offset-pot-dark
            active:scale-[0.98];
@@ -54,14 +57,9 @@
            focus-visible:ring-2 focus-visible:ring-pot-green focus-visible:ring-offset-2 focus-visible:ring-offset-pot-dark;
   }
 
-  .glow-green {
-    box-shadow: 0 0 20px rgba(0, 255, 136, 0.15),
-                0 0 60px rgba(0, 255, 136, 0.05);
-  }
-
+  .glow-green,
   .glow-purple {
-    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15),
-                0 0 60px rgba(139, 92, 246, 0.05);
+    box-shadow: none;
   }
 }
 
@@ -87,54 +85,56 @@
 /* ══════════════════════════════════════════════════════════════════ */
 
 :root {
+  color-scheme: dark;
   /* Legacy pot-* tokens used by light-theme overrides below */
-  --pot-ink: #ffffff;
-  --pot-ink-muted: #8B9BB4;
-  --pot-ink-subtle: #6B7A8F;
-  --pot-bg: #0D1117;
-  --pot-bg-2: #111827;
-  --pot-border: #1A2332;
-  --pot-border-strong: #2A3342;
+  --pot-ink: #F2ECE0;
+  --pot-ink-muted: #C9C0B0;
+  --pot-ink-subtle: #8A8276;
+  --pot-bg: #14120F;
+  --pot-bg-2: #1E1B16;
+  --pot-border: #2E2A23;
+  --pot-border-strong: #3E382F;
   /* Inline-style palette (consumed by var(--c-*) in .tsx inline styles) */
-  --c-bg: #0D1117;
-  --c-card: #111827;
-  --c-card-2: #0F1929;
-  --c-border: #1A2332;
-  --c-border-2: #24324A;
-  --c-text: #ffffff;
-  --c-text-soft: #e8edf2;
-  --c-muted: #8B9BB4;
-  --c-brand-green: #14f195;
-  --c-brand-accent: #9945ff;
+  --c-bg: #14120F;
+  --c-card: #1E1B16;
+  --c-card-2: #181611;
+  --c-border: #2E2A23;
+  --c-border-2: #3E382F;
+  --c-text: #F2ECE0;
+  --c-text-soft: #E4DCCB;
+  --c-muted: #C9C0B0;
+  --c-brand-green: #9CCB6E;
+  --c-brand-accent: #E07A4F;
   --c-surface-shadow: rgba(0, 0, 0, 0.45);
+  --ease-pot: cubic-bezier(.2,.8,.2,1);
 }
 
 html[data-theme="light"],
 html.light-theme {
   color-scheme: light;
-  /* Normie-mode palette. Greens darkened (#166534 / #14532D) so they
-     don't vibrate against white. Borders bumped (#cbd5e1) so card
+  /* Normie-mode palette. Greens darkened (#5E8F3A / #4E7A2E) so they
+     don't vibrate against white. Borders bumped (#E3DACB) so card
      edges are actually visible — the old #e5e7eb hairlines were
      basically invisible on the off-white bg. */
-  --pot-ink: #111827;
-  --pot-ink-muted: #1f2937;
-  --pot-ink-subtle: #374151;
-  --pot-bg: #ffffff;
-  --pot-bg-2: #f9fafb;
-  --pot-border: #cbd5e1;
-  --pot-border-strong: #94a3b8;
+  --pot-ink: #1A1712;
+  --pot-ink-muted: #5C554B;
+  --pot-ink-subtle: #7A7164;
+  --pot-bg: #F6F1E8;
+  --pot-bg-2: #FFFFFF;
+  --pot-border: #E3DACB;
+  --pot-border-strong: #C9B9A3;
   /* Inline-style palette flips to light */
-  --c-bg: #ffffff;
-  --c-card: #ffffff;
-  --c-card-2: #f9fafb;
-  --c-border: #cbd5e1;
-  --c-border-2: #94a3b8;
-  --c-text: #111827;
-  --c-text-soft: #1f2937;
-  --c-muted: #374151;
-  --c-brand-green: #166534;
-  --c-brand-accent: #6d28d9;
-  --c-surface-shadow: rgba(15, 23, 42, 0.10);
+  --c-bg: #F6F1E8;
+  --c-card: #FFFFFF;
+  --c-card-2: #FBF8F2;
+  --c-border: #E3DACB;
+  --c-border-2: #C9B9A3;
+  --c-text: #1A1712;
+  --c-text-soft: #3A332A;
+  --c-muted: #5C554B;
+  --c-brand-green: #5E8F3A;
+  --c-brand-accent: #C9623A;
+  --c-surface-shadow: rgba(26, 23, 18, 0.10);
 }
 
 /* Normie mode: kill every neon glow shadow Tailwind shorthand we ship.
@@ -148,15 +148,15 @@ html[data-theme="light"] [class*="shadow-[0_0_"] {
   box-shadow: none !important;
 }
 
-/* Brand green: darker for WCAG-AA on white (#166534 = green-800).
+/* Brand green: darker for WCAG-AA on white (#5E8F3A = green-800).
    Solid fills use green-700 so white text still passes contrast. */
 html.light-theme .bg-pot-green,
 html[data-theme="light"] .bg-pot-green {
-  background-color: #15803d !important; /* green-700 — solid */
+  background-color: #5E8F3A !important; /* green-700 — solid */
 }
 html.light-theme .text-pot-green,
 html[data-theme="light"] .text-pot-green {
-  color: #166534 !important; /* green-800 — text */
+  color: #5E8F3A !important; /* green-800 — text */
 }
 html.light-theme .border-pot-green\/20,
 html.light-theme .border-pot-green\/25,
@@ -166,7 +166,7 @@ html[data-theme="light"] .border-pot-green\/20,
 html[data-theme="light"] .border-pot-green\/25,
 html[data-theme="light"] .border-pot-green\/30,
 html[data-theme="light"] .border-pot-green\/40 {
-  border-color: rgba(22, 101, 52, 0.45) !important;
+  border-color: rgba(94, 143, 58, 0.45) !important;
 }
 html.light-theme .bg-pot-green\/5,
 html.light-theme .bg-pot-green\/8,
@@ -174,7 +174,7 @@ html.light-theme .bg-pot-green\/10,
 html[data-theme="light"] .bg-pot-green\/5,
 html[data-theme="light"] .bg-pot-green\/8,
 html[data-theme="light"] .bg-pot-green\/10 {
-  background-color: rgba(22, 101, 52, 0.08) !important;
+  background-color: rgba(94, 143, 58, 0.08) !important;
 }
 
 /* Card surface fills (bg-pot-card/20..80) — render as solid white with
@@ -195,7 +195,7 @@ html.light-theme .bg-pot-card\/60,
 html.light-theme .bg-pot-card\/70,
 html.light-theme .bg-pot-card\/80 {
   background-color: #ffffff !important;
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(203, 213, 225, 0.6) !important;
+  box-shadow: 0 1px 2px rgba(26, 23, 18, 0.04), 0 0 0 1px rgba(227, 218, 203, 0.6) !important;
 }
 
 /* bg-pot-dark and every opacity variant — the dark page-tone reads as
@@ -213,7 +213,7 @@ html.light-theme .bg-pot-dark\/60,
 html.light-theme .bg-pot-dark\/70,
 html.light-theme .bg-pot-dark\/80,
 html.light-theme .bg-pot-dark\/90 {
-  background-color: #f1f5f9 !important;
+  background-color: #F6F1E8 !important;
 }
 
 /* ── Body & scrollbar ── */
@@ -241,11 +241,11 @@ html[data-theme="light"] .bg-pot-dark,
 html[data-theme="light"] .bg-pot-dark\/95,
 html.light-theme .bg-pot-dark,
 html.light-theme .bg-pot-dark\/95 {
-  background-color: #f1f5f9 !important;
+  background-color: #F6F1E8 !important;
 }
 html[data-theme="light"] .bg-pot-card {
   background-color: #ffffff !important;
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(203, 213, 225, 0.6);
+  box-shadow: 0 1px 2px rgba(26, 23, 18, 0.04), 0 0 0 1px rgba(227, 218, 203, 0.6);
 }
 html[data-theme="light"] .bg-pot-border {
   background-color: var(--pot-border) !important;
@@ -268,19 +268,19 @@ html[data-theme="light"] .text-white { color: var(--pot-ink) !important; }
 /* Opacity-modified white (text-white/60–90) reads as ~white in light mode
    because the underlying color stays rgb(255 255 255 / N). Remap to the
    dark-ink palette with a matching alpha so body copy stays legible. */
-html[data-theme="light"] .text-white\/95 { color: rgba(13, 17, 23, 0.97) !important; }
-html[data-theme="light"] .text-white\/90 { color: rgba(13, 17, 23, 0.95) !important; }
-html[data-theme="light"] .text-white\/85 { color: rgba(13, 17, 23, 0.9) !important; }
-html[data-theme="light"] .text-white\/80 { color: rgba(13, 17, 23, 0.88) !important; }
-html[data-theme="light"] .text-white\/75 { color: rgba(13, 17, 23, 0.85) !important; }
-html[data-theme="light"] .text-white\/70 { color: rgba(13, 17, 23, 0.80) !important; }
-html[data-theme="light"] .text-white\/60 { color: rgba(13, 17, 23, 0.72) !important; }
-html[data-theme="light"] .text-white\/50 { color: rgba(13, 17, 23, 0.64) !important; }
-html[data-theme="light"] .text-white\/40 { color: rgba(13, 17, 23, 0.56) !important; }
-html[data-theme="light"] .text-white\/30 { color: rgba(13, 17, 23, 0.45) !important; }
+html[data-theme="light"] .text-white\/95 { color: rgba(26, 23, 18, 0.97) !important; }
+html[data-theme="light"] .text-white\/90 { color: rgba(26, 23, 18, 0.95) !important; }
+html[data-theme="light"] .text-white\/85 { color: rgba(26, 23, 18, 0.9) !important; }
+html[data-theme="light"] .text-white\/80 { color: rgba(26, 23, 18, 0.88) !important; }
+html[data-theme="light"] .text-white\/75 { color: rgba(26, 23, 18, 0.85) !important; }
+html[data-theme="light"] .text-white\/70 { color: rgba(26, 23, 18, 0.80) !important; }
+html[data-theme="light"] .text-white\/60 { color: rgba(26, 23, 18, 0.72) !important; }
+html[data-theme="light"] .text-white\/50 { color: rgba(26, 23, 18, 0.64) !important; }
+html[data-theme="light"] .text-white\/40 { color: rgba(26, 23, 18, 0.56) !important; }
+html[data-theme="light"] .text-white\/30 { color: rgba(26, 23, 18, 0.45) !important; }
 html[data-theme="light"] .text-pot-muted { color: var(--pot-ink-muted) !important; }
-html[data-theme="light"] .text-pot-muted\/70 { color: rgba(31, 41, 55, 0.95) !important; }
-html[data-theme="light"] .text-pot-muted\/50 { color: rgba(31, 41, 55, 0.8) !important; }
+html[data-theme="light"] .text-pot-muted\/70 { color: rgba(58, 51, 42, 0.95) !important; }
+html[data-theme="light"] .text-pot-muted\/50 { color: rgba(58, 51, 42, 0.8) !important; }
 html[data-theme="light"] .text-gray-400 { color: var(--pot-ink-muted) !important; }
 html[data-theme="light"] .text-gray-500 { color: var(--pot-ink-muted) !important; }
 html[data-theme="light"] .text-gray-300 { color: var(--pot-ink) !important; }
@@ -292,17 +292,17 @@ html[data-theme="light"] .bg-pot-card\/50,
 html[data-theme="light"] .bg-pot-card\/60,
 html[data-theme="light"] .bg-pot-card\/70,
 html[data-theme="light"] .bg-pot-card\/80 {
-  background-color: rgba(245, 247, 250, 0.95) !important;
+  background-color: rgba(246, 241, 232, 0.95) !important;
 }
 
 /* Hairline divider rules in section kickers — switch from white-fade to
    ink-fade so they remain visible on the light surface. */
 html[data-theme="light"] .from-pot-green\/60,
-html[data-theme="light"] .to-pot-green\/60 { --tw-gradient-from: rgba(6, 122, 70, 0.5) !important; --tw-gradient-to: rgba(6, 122, 70, 0.5) !important; }
+html[data-theme="light"] .to-pot-green\/60 { --tw-gradient-from: rgba(94, 143, 58, 0.5) !important; --tw-gradient-to: rgba(94, 143, 58, 0.5) !important; }
 html[data-theme="light"] .from-pot-accent\/60,
-html[data-theme="light"] .to-pot-accent\/60 { --tw-gradient-from: rgba(109, 40, 217, 0.5) !important; --tw-gradient-to: rgba(109, 40, 217, 0.5) !important; }
+html[data-theme="light"] .to-pot-accent\/60 { --tw-gradient-from: rgba(201, 98, 58, 0.5) !important; --tw-gradient-to: rgba(201, 98, 58, 0.5) !important; }
 html[data-theme="light"] .from-pot-muted\/60,
-html[data-theme="light"] .to-pot-muted\/60 { --tw-gradient-from: rgba(31, 41, 55, 0.4) !important; --tw-gradient-to: rgba(31, 41, 55, 0.4) !important; }
+html[data-theme="light"] .to-pot-muted\/60 { --tw-gradient-from: rgba(58, 51, 42, 0.4) !important; --tw-gradient-to: rgba(58, 51, 42, 0.4) !important; }
 
 /* Dark theme: bump low-contrast mutes a touch for readability */
 html:not([data-theme="light"]) .text-pot-muted\/50 { color: rgba(139, 155, 180, 0.75) !important; }
@@ -310,13 +310,13 @@ html:not([data-theme="light"]) .text-pot-muted\/50 { color: rgba(139, 155, 180,
 /* pot-green & pot-accent stay vibrant in both themes — no override */
 
 /* ── Gradient stops used by landing ── */
-html[data-theme="light"] .from-pot-accent\/10 { --tw-gradient-from: rgba(139, 92, 246, 0.08) !important; --tw-gradient-to: rgba(139, 92, 246, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
+html[data-theme="light"] .from-pot-accent\/10 { --tw-gradient-from: rgba(201, 98, 58, 0.08) !important; --tw-gradient-to: rgba(201, 98, 58, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
 html[data-theme="light"] .via-pot-card        { --tw-gradient-via: var(--pot-bg-2) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important; }
-html[data-theme="light"] .to-pot-green\/10    { --tw-gradient-to: rgba(0, 255, 136, 0.08) !important; }
+html[data-theme="light"] .to-pot-green\/10    { --tw-gradient-to: rgba(94, 143, 58, 0.08) !important; }
 html[data-theme="light"] .from-pot-card       { --tw-gradient-from: var(--pot-bg-2) !important; --tw-gradient-to: rgba(255, 255, 255, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
 html[data-theme="light"] .to-pot-dark         { --tw-gradient-to: var(--pot-bg) !important; }
-html[data-theme="light"] .from-pot-green\/5   { --tw-gradient-from: rgba(0, 200, 110, 0.06) !important; --tw-gradient-to: rgba(0, 200, 110, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
-html[data-theme="light"] .to-pot-accent\/5    { --tw-gradient-to: rgba(139, 92, 246, 0.06) !important; }
+html[data-theme="light"] .from-pot-green\/5   { --tw-gradient-from: rgba(94, 143, 58, 0.06) !important; --tw-gradient-to: rgba(94, 143, 58, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
+html[data-theme="light"] .to-pot-accent\/5    { --tw-gradient-to: rgba(201, 98, 58, 0.06) !important; }
 
 /* ── Component-level tweaks ── */
 
@@ -324,7 +324,7 @@ html[data-theme="light"] .to-pot-accent\/5    { --tw-gradient-to: rgba(139, 92,
    which would otherwise become our light bg. Lock ink color. */
 html[data-theme="light"] .btn-primary,
 html[data-theme="light"] .text-pot-dark {
-  color: #0a0e17 !important;
+  color: #1A120C !important;
 }
 
 /* btn-secondary: reverse for readability */
@@ -364,13 +364,13 @@ html[data-theme="light"] .wallet-adapter-modal-list li {
 html[data-theme="light"] nav .text-white { color: var(--pot-ink) !important; }
 
 /* Card hover borders adjust slightly for light contrast */
-html[data-theme="light"] .hover\:border-pot-green\/20:hover { border-color: rgba(0, 200, 110, 0.35) !important; }
-html[data-theme="light"] .hover\:border-pot-green\/30:hover { border-color: rgba(0, 200, 110, 0.4) !important; }
-html[data-theme="light"] .hover\:border-pot-accent\/30:hover { border-color: rgba(139, 92, 246, 0.4) !important; }
+html[data-theme="light"] .hover\:border-pot-green\/20:hover { border-color: rgba(94, 143, 58, 0.35) !important; }
+html[data-theme="light"] .hover\:border-pot-green\/30:hover { border-color: rgba(94, 143, 58, 0.4) !important; }
+html[data-theme="light"] .hover\:border-pot-accent\/30:hover { border-color: rgba(201, 98, 58, 0.4) !important; }
 
 /* Hero glow circles a bit softer in light to avoid milky wash */
-html[data-theme="light"] .bg-pot-green\/5 { background-color: rgba(0, 200, 110, 0.07) !important; }
-html[data-theme="light"] .bg-pot-accent\/5 { background-color: rgba(139, 92, 246, 0.07) !important; }
+html[data-theme="light"] .bg-pot-green\/5 { background-color: rgba(94, 143, 58, 0.07) !important; }
+html[data-theme="light"] .bg-pot-accent\/5 { background-color: rgba(201, 98, 58, 0.07) !important; }
 
 /* ── Smooth theme swap ── */
 html, body, nav, section, footer, .card, .btn-primary, .btn-secondary, .input,
@@ -411,11 +411,11 @@ html[data-theme="light"] .text-red-400 { color: #b91c1c !important; }   /* red-7
 
 /* Greens not-pot-green (status pills) */
 html[data-theme="light"] .text-green-300,
-html[data-theme="light"] .text-green-400 { color: #15803d !important; } /* green-700 */
+html[data-theme="light"] .text-green-400 { color: #5E8F3A !important; } /* green-700 */
 
 /* Purples (governance, premium) */
 html[data-theme="light"] .text-purple-200,
-html[data-theme="light"] .text-purple-300 { color: #6d28d9 !important; } /* violet-700 */
+html[data-theme="light"] .text-purple-300 { color: #C9623A !important; } /* violet-700 */
 
 /* Blues / Cyans (info pills) */
 html[data-theme="light"] .text-blue-300,
@@ -444,13 +444,13 @@ html[data-theme="light"] .bg-blue-500\/10    { background-color: rgba(59, 130, 2
 html[data-theme="light"] .bg-cyan-500\/10    { background-color: rgba(6, 182, 212, 0.14) !important; }
 
 /* pot-accent (purple) on white needs slightly more saturation in pill bg */
-html[data-theme="light"] .bg-pot-accent\/10  { background-color: rgba(139, 92, 246, 0.14) !important; }
-html[data-theme="light"] .bg-pot-accent\/20  { background-color: rgba(139, 92, 246, 0.20) !important; }
+html[data-theme="light"] .bg-pot-accent\/10  { background-color: rgba(201, 98, 58, 0.14) !important; }
+html[data-theme="light"] .bg-pot-accent\/20  { background-color: rgba(201, 98, 58, 0.20) !important; }
 
 /* pot-green pills — chip bg should still read in light mode */
-html[data-theme="light"] .bg-pot-green\/5   { background-color: rgba(0, 200, 110, 0.10) !important; }
-html[data-theme="light"] .bg-pot-green\/10  { background-color: rgba(0, 200, 110, 0.14) !important; }
-html[data-theme="light"] .bg-pot-green\/20  { background-color: rgba(0, 200, 110, 0.18) !important; }
+html[data-theme="light"] .bg-pot-green\/5   { background-color: rgba(94, 143, 58, 0.10) !important; }
+html[data-theme="light"] .bg-pot-green\/10  { background-color: rgba(94, 143, 58, 0.14) !important; }
+html[data-theme="light"] .bg-pot-green\/20  { background-color: rgba(94, 143, 58, 0.18) !important; }
 
 /* Translucent black surfaces (bg-black/40 etc) become invisible on white;
    substitute a light card token. */
@@ -569,27 +569,27 @@ html[data-theme="light"] .pot-range { background: linear-gradient(90deg, #0f9d6a
   min-height: 48px;
   justify-content: center;
   background: #14f195 !important;
-  color: #0a0e17 !important;
+  color: #1A120C !important;
 }
 .potfolio-create-wallet .wallet-adapter-button:hover {
   background: #14f195 !important;
   filter: brightness(1.1);
 }
 html[data-theme="light"] .potfolio-create-card {
-  border-color: rgba(22, 101, 52, 0.25);
+  border-color: rgba(94, 143, 58, 0.25);
 }
 html[data-theme="light"] .potfolio-weight-slider {
   accent-color: #0f9d6a;
 }
 html[data-theme="light"] .potfolio-weight-total-valid {
-  color: #166534;
-  border-color: rgba(22, 101, 52, 0.25);
-  background: rgba(22, 101, 52, 0.04);
+  color: #5E8F3A;
+  border-color: rgba(94, 143, 58, 0.25);
+  background: rgba(94, 143, 58, 0.04);
 }
 html[data-theme="light"] .potfolio-create-action,
 html[data-theme="light"] .potfolio-create-wallet .wallet-adapter-button {
   background: #14f195 !important;
-  color: #0a0e17 !important;
+  color: #1A120C !important;
 }
 @media (max-width: 639px) {
   .potfolio-create-card { padding: 20px; }
@@ -605,3 +605,31 @@ html[data-theme="light"] .potfolio-create-wallet .wallet-adapter-button {
   }
   .potfolio-add-asset { grid-template-columns: 1fr; }
 }
+
+
+/* ── v3 additions ─────────────────────────────────────────────── */
+/* Warm ink instead of pure white in the dark theme. */
+html:not(.light-theme) .text-white { color: var(--c-text); }
+html.light-theme .bg-pot-accent,
+html[data-theme="light"] .bg-pot-accent { background-color: #C9623A !important; }
+html.light-theme .text-pot-accent,
+html[data-theme="light"] .text-pot-accent { color: #C9623A !important; }
+html.light-theme .border-pot-accent,
+html[data-theme="light"] .border-pot-accent { border-color: #C9623A !important; }
+
+/* Motion: one easing, nothing longer than 900 ms. */
+.v3-reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-pot), transform .5s var(--ease-pot); }
+.v3-reveal.is-in { opacity: 1; transform: none; }
+.v3-rise { animation: v3-rise .7s var(--ease-pot) both; }
+.v3-line { display: block; overflow: hidden; }
+.v3-line > span { display: block; animation: v3-line .7s var(--ease-pot) both; }
+@keyframes v3-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
+@keyframes v3-line { from { transform: translateY(110%); } to { transform: none; } }
+@keyframes v3-draw { to { stroke-dashoffset: 0; } }
+@keyframes v3-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+@keyframes v3-coin { 0% { transform: translateY(-120px) scale(.9); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(8px) scale(.6); opacity: 0; } }
+@keyframes v3-token { 0%, 60% { transform: translateY(16px) scale(.6); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .v3-reveal { opacity: 1; transform: none; transition: none; }
+  .v3-rise, .v3-line > span, .animate-breathe, .animate-float { animation: none !important; }
+}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 484a4030..e3bc965d 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,4 +1,6 @@
 import type { Metadata, Viewport } from 'next'
+import { Fraunces, Instrument_Sans, IBM_Plex_Mono } from 'next/font/google'
+import Image from 'next/image'
 import Link from 'next/link'
 import { Analytics } from '@vercel/analytics/next'
 import { AppProviders } from './providers'
@@ -6,14 +8,18 @@ import { Navbar } from '@/components/Navbar'
 import { OnboardingTutorial } from '@/components/OnboardingTutorial'
 import './globals.css'
 
+const fontDisplay = Fraunces({ subsets: ['latin'], weight: ['500', '600'], style: ['normal', 'italic'], variable: '--font-display', display: 'swap' })
+const fontSans = Instrument_Sans({ subsets: ['latin'], weight: ['400', '500', '600'], variable: '--font-sans', display: 'swap' })
+const fontMono = IBM_Plex_Mono({ subsets: ['latin'], weight: ['400', '500'], variable: '--font-mono', display: 'swap' })
+
 export const metadata: Metadata = {
   title: { default: 'PotBot POTFolio: any basket of Solana assets as one liquid token', template: '%s · PotBot' },
-  description: 'Create a portfolio, hold the token. Deposit USDC, get one token that mirrors the whole basket, redeem any time for the assets or USDC. Nobody can withdraw the assets.',
+  description: 'Creator ETFs without the exit liquidity. Put up to 5 assets in a Pot, hold one token, leave any time. Nobody can reach anyone else\'s money.',
   metadataBase: new URL('https://potbot.fun'),
   alternates: { canonical: '/' },
   openGraph: {
     title: 'PotBot POTFolio: any basket of Solana assets as one liquid token',
-    description: 'Create a portfolio, hold the token. Exit any time, in assets or USDC. Live on Solana devnet.',
+    description: 'Creator ETFs without the exit liquidity. Up to 5 assets in a Pot, one token, exit any time.',
     url: 'https://potbot.fun',
     siteName: 'PotBot',
     type: 'website',
@@ -23,7 +29,7 @@ export const metadata: Metadata = {
     site: '@PotBot_sol',
     creator: '@CryptoYDao',
     title: 'PotBot POTFolio: any basket of Solana assets as one liquid token',
-    description: 'Create a portfolio, hold the token. Exit any time, in assets or USDC. Live on Solana devnet.',
+    description: 'Creator ETFs without the exit liquidity. Up to 5 assets in a Pot, one token, exit any time.',
   },
   manifest: '/manifest.json',
   appleWebApp: { capable: true, statusBarStyle: 'black-translucent', title: 'PotBot' },
@@ -38,8 +44,8 @@ export const viewport: Viewport = {
   maximumScale: 1,
   viewportFit: 'cover',
   themeColor: [
-    { media: '(prefers-color-scheme: dark)',  color: '#0D1117' },
-    { media: '(prefers-color-scheme: light)', color: '#f5f7fa' },
+    { media: '(prefers-color-scheme: dark)',  color: '#14120F' },
+    { media: '(prefers-color-scheme: light)', color: '#F6F1E8' },
   ],
 }
 
@@ -76,9 +82,9 @@ const FOOTER_COLUMNS: { title: string; links: { label: string; href: string; ext
     title: 'Project',
     links: [
       { label: 'Roadmap', href: '/roadmap' },
-      { label: 'Mainnet plan', href: '/mainnet' },
-      { label: 'For the judges', href: '/worldsfair' },
-      { label: 'Vaults (in development)', href: '/vaults' },
+      { label: 'Security', href: '/mainnet' },
+      { label: 'Status', href: '/status' },
+      { label: "World's Fair", href: '/worldsfair' },
       { label: 'For AI agents', href: '/for-agents' },
     ],
   },
@@ -95,7 +101,7 @@ const FOOTER_COLUMNS: { title: string; links: { label: string; href: string; ext
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning className={`${fontDisplay.variable} ${fontSans.variable} ${fontMono.variable}`}>
       <head>
         <script dangerouslySetInnerHTML={{ __html: THEME_BOOTSTRAP }} />
       </head>
@@ -117,17 +123,17 @@ export default function RootLayout({ children }: { children: React.ReactNode })
               <div className="grid gap-8 mb-8 sm:grid-cols-[1.4fr_1fr_1fr_1fr]">
                 <div>
                   <Link href="/" className="flex items-center gap-2">
-                    <span className="text-xl">🪴</span>
-                    <span className="font-bold text-white">Pot<span className="text-pot-green">Bot</span></span>
+                    <Image src="/garden/pink-1.png" alt="" width={24} height={24} className="h-6 w-6 object-contain" />
+                    <span className="font-display text-lg font-semibold text-white">PotBot</span>
                   </Link>
-                  <p className="mt-3 max-w-xs text-xs leading-relaxed text-pot-muted">
-                    Any basket of Solana assets as one liquid token. Create a portfolio, hold the token. Live on devnet, built in Amsterdam.
+                  <p className="mt-3 max-w-xs text-[13px] leading-relaxed text-pot-muted">
+                    Your portfolio. One token. Built in Amsterdam on Solana.
                   </p>
                 </div>
                 {FOOTER_COLUMNS.map((col) => (
                   <nav key={col.title} aria-label={col.title}>
-                    <p className="mb-2 text-[11px] font-semibold uppercase tracking-widest text-pot-muted/70">{col.title}</p>
-                    <ul className="space-y-1.5 text-xs text-pot-muted">
+                    <p className="mb-2 font-mono text-[11px] uppercase tracking-[0.14em] text-pot-muted">{col.title}</p>
+                    <ul className="space-y-1.5 text-[13px] text-pot-muted">
                       {col.links.map(({ label, href, external }) => (
                         <li key={label}>
                           {external ? (
@@ -143,26 +149,26 @@ export default function RootLayout({ children }: { children: React.ReactNode })
               </div>
 
               {/* Disclaimers */}
-              <div className="border-t border-pot-border/30 pt-5 space-y-1.5 text-[11px] text-pot-muted leading-relaxed">
+              <div className="border-t border-pot-border/30 pt-5 space-y-1.5 text-[12px] text-pot-muted leading-relaxed">
                 <p>
-                  <span className="font-semibold text-pot-muted/70">Non-custodial:</span>{' '}
+                  <span className="font-semibold text-white">Non-custodial:</span>{' '}
                   PotBot is non-custodial software. Assets sit in program-owned accounts with no withdraw instruction; the index token is the only claim on them.
                 </p>
                 <p>
-                  <span className="font-semibold text-pot-muted/70">Risk:</span>{' '}
+                  <span className="font-semibold text-white">Risk:</span>{' '}
                   Crypto assets are volatile. You may lose some or all of the funds you deposit. Past performance does not predict future results.
                 </p>
                 <p>
-                  <span className="font-semibold text-pot-muted/70">Not advice:</span>{' '}
+                  <span className="font-semibold text-white">Not advice:</span>{' '}
                   PotBot is not investment advice. Holders make their own decisions; nothing here is a recommendation to buy or sell any asset.
                 </p>
                 <p>
-                  <span className="font-semibold text-pot-muted/70">Jurisdictions:</span>{' '}
+                  <span className="font-semibold text-white">Jurisdictions:</span>{' '}
                   Use of PotBot is restricted in certain jurisdictions. By using this app you confirm compliance with your local laws.{' '}
                   <Link href="/faq" className="underline hover:text-white">See FAQ</Link>
                 </p>
-                <p className="pt-1 text-pot-border">
-                  © 2026 PotBot · Built on Solana · Open source ·{' '}
+                <p className="pt-1 text-pot-muted/70">
+                  © 2026 PotBot · Amsterdam · Built on Solana · Open source ·{' '}
                   <a href="https://github.com/YD811/potbot-v2" target="_blank" rel="noopener noreferrer" className="underline hover:text-white">
                     View code
                   </a>
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index df0f672d..daf516b5 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,6 +1,6 @@
-import LandingPage from '@/components/LandingPage'
+import { LandingV3 } from '@/components/v3/LandingV3'
 
-/** Home is always the landing. The vault dashboard lives on /vaults and /my-pots. */
+/** Home is the v3 landing (design system v3, Oct 2026). The previous landing stays in components/LandingPage.tsx. */
 export default function HomePage() {
-  return <LandingPage />
+  return <LandingV3 />
 }
diff --git a/apps/web/src/components/Navbar.tsx b/apps/web/src/components/Navbar.tsx
index 0e524ab4..8e9a13cc 100644
--- a/apps/web/src/components/Navbar.tsx
+++ b/apps/web/src/components/Navbar.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from 'react'
 import Link from 'next/link'
+import Image from 'next/image'
 import { usePathname } from 'next/navigation'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useQuery } from '@tanstack/react-query'
@@ -25,12 +26,12 @@ function LivePriceTicker() {
   })
 
   return (
-    <div className="border-b border-pot-border/40 bg-pot-dark/60">
+    <div className="border-b border-pot-border/60 bg-pot-dark/60">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 h-7 flex items-center gap-4">
         {solPrice != null && (
           <div className="flex items-center gap-1.5 text-[11px]">
             <span className="text-pot-muted">◎</span>
-            <span className="font-mono font-semibold text-white">
+            <span className="font-mono font-medium tabular-nums text-white">
               ${solPrice.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
             </span>
             <span className="text-pot-muted">SOL</span>
@@ -38,9 +39,9 @@ function LivePriceTicker() {
         )}
         <div className="w-px h-3 bg-pot-border" />
         <div className="flex items-center gap-1.5 text-[11px]">
-          <span className={`w-1.5 h-1.5 rounded-full ${apiDown ? 'bg-red-500' : 'bg-pot-green animate-pulse'}`} />
-          <span className={apiDown ? 'text-red-400/80' : 'text-pot-green'}>
-            {apiDown ? 'Demo Mode' : 'Live'}
+          <span className={`w-1.5 h-1.5 rounded-full ${apiDown ? 'bg-pot-accent' : 'bg-pot-green'}`} />
+          <span className={apiDown ? 'text-pot-muted' : 'text-pot-green'}>
+            {apiDown ? 'Offline' : 'Live'}
           </span>
         </div>
         {/* Season 1 ticker — clickable, opens prize-pool modal */}
@@ -48,15 +49,15 @@ function LivePriceTicker() {
           <span className="text-pot-muted">|</span>
           <button
             onClick={() => setShowSeasonModal(true)}
-            className="text-pot-accent hover:text-white hover:underline underline-offset-2 transition cursor-pointer"
+            className="text-pot-muted hover:text-white hover:underline underline-offset-2 transition cursor-pointer"
             aria-label="Open Season 1 prize pool details"
           >
-            🌱 Season 1: The Garden
+            Season 1: The Garden
           </button>
         </div>
         <div className="ml-auto flex items-center gap-3 text-[11px] text-pot-muted">
-          <Link href="/for-agents" className="hover:text-pot-green transition hidden sm:block">
-            🤖 For AI Agents
+          <Link href="/for-agents" className="hover:text-white transition hidden sm:block">
+            For AI agents
           </Link>
         </div>
       </div>
@@ -71,9 +72,8 @@ function LivePriceTicker() {
 // as a tab inside /pots. FAQ lives in the footer only.
 const NAV_LINKS: { href: string; emoji: string; term: string; hot?: boolean }[] = [
   { href: '/portfolios',  emoji: '',     term: 'POTFolios' },
-  { href: '/portfolios/new', emoji: '+', term: 'Create' },
+  { href: '/portfolios/new', emoji: '', term: 'Create' },
   { href: '/learn',       emoji: '',     term: 'Learn' },
-  { href: '/roadmap',     emoji: '',     term: 'Roadmap' },
   { href: '/worldsfair',  emoji: '',     term: "World's Fair", hot: true },
 ]
 
@@ -99,15 +99,15 @@ export function Navbar() {
       <LivePriceTicker />
       <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
         <Link href="/" className="flex items-center gap-2 group shrink-0">
-          <span className="text-2xl group-hover:animate-float">🪴</span>
-          <span className="text-xl font-bold text-white">Pot<span className="text-pot-green">Bot</span></span>
+          <Image src="/garden/pink-1.png" alt="" width={28} height={28} className="h-7 w-7 object-contain" priority />
+          <span className="font-display text-[22px] font-semibold tracking-tight text-white">PotBot</span>
         </Link>
 
         <div className="hidden sm:flex items-center gap-1 text-sm font-medium">
           {NAV_LINKS.map((link) => (
-            <Link key={link.href} href={link.href} className={`px-3 py-1.5 rounded-lg transition ${
-              isActive(link.href) ? 'text-white bg-pot-card border border-pot-border' : link.hot ? 'text-pot-green hover:bg-pot-green/10 ring-1 ring-pot-green/40 shadow-[0_0_14px_rgba(20,241,149,0.25)]' : 'text-gray-400 hover:text-white hover:bg-pot-card/50'
-            }`}>{link.hot && <span className="mr-1.5 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-pot-green align-middle" />}{navLabel(link)}</Link>
+            <Link key={link.href} href={link.href} className={`px-3.5 py-1.5 rounded-full transition ${
+              isActive(link.href) ? 'text-white bg-pot-card border border-pot-border' : 'text-pot-muted hover:text-white'
+            }`}>{link.hot && <span className="mr-1.5 inline-block h-1.5 w-1.5 rounded-full bg-pot-green align-middle" />}{navLabel(link)}</Link>
           ))}
         </div>
 
@@ -117,7 +117,7 @@ export function Navbar() {
           {showWaitlistCta && (
             <Link
               href="/signup"
-              className="hidden sm:inline-flex items-center gap-1.5 rounded-full bg-pot-green px-4 py-1.5 text-sm font-bold text-pot-dark shadow-[0_0_18px_rgba(20,241,149,0.35)] hover:brightness-110 transition whitespace-nowrap"
+              className="hidden sm:inline-flex items-center gap-1.5 rounded-full border border-pot-border px-4 py-1.5 text-sm font-semibold text-white hover:border-pot-muted transition whitespace-nowrap"
             >
               Waitlist
             </Link>
@@ -147,7 +147,7 @@ export function Navbar() {
             <Link
               href="/signup"
               onClick={() => setMenuOpen(false)}
-              className="flex items-center justify-center gap-1.5 rounded-xl bg-pot-green px-4 py-3 text-sm font-bold text-pot-dark shadow-[0_0_18px_rgba(20,241,149,0.35)] hover:brightness-110 transition mb-2"
+              className="flex items-center justify-center gap-1.5 rounded-full bg-pot-accent px-4 py-3 text-sm font-semibold text-pot-dark hover:brightness-110 transition mb-2"
             >
               Join the waitlist
             </Link>
@@ -155,17 +155,17 @@ export function Navbar() {
 
           <Link href="/" onClick={() => setMenuOpen(false)}
             className={`block px-4 py-2.5 rounded-xl text-sm font-medium transition ${
-              isActive('/') ? 'text-white bg-pot-card border border-pot-border' : 'text-gray-400 hover:text-white hover:bg-pot-card/50'
+              isActive('/') ? 'text-white bg-pot-card border border-pot-border' : 'text-pot-muted hover:text-white hover:bg-pot-card/50'
             }`}>Home</Link>
           {NAV_LINKS.map((link) => (
             <Link key={link.href} href={link.href} onClick={() => setMenuOpen(false)}
               className={`block px-4 py-2.5 rounded-xl text-sm font-medium transition ${
-                isActive(link.href) ? 'text-white bg-pot-card border border-pot-border' : 'text-gray-400 hover:text-white hover:bg-pot-card/50'
+                isActive(link.href) ? 'text-white bg-pot-card border border-pot-border' : 'text-pot-muted hover:text-white hover:bg-pot-card/50'
               }`}>{navLabel(link)}</Link>
           ))}
           <div className="pt-2 border-t border-pot-border/50 grid grid-cols-2 gap-x-2">
-            {[['/faq', 'FAQ'], ['/mainnet', 'Mainnet'], ['/worldsfair', 'For the judges'], ['/vaults', 'Vaults (in development)']].map(([href, label]) => (
-              <Link key={href} href={href} onClick={() => setMenuOpen(false)} className="block px-4 py-2 text-sm text-pot-muted hover:text-pot-green transition">{label}</Link>
+            {[['/faq', 'FAQ'], ['/mainnet', 'Security'], ['/roadmap', 'Roadmap'], ['/status', 'Status']].map(([href, label]) => (
+              <Link key={href} href={href} onClick={() => setMenuOpen(false)} className="block px-4 py-2 text-sm text-pot-muted hover:text-white transition">{label}</Link>
             ))}
           </div>
         </div>
diff --git a/apps/web/src/components/OnboardingTutorial.tsx b/apps/web/src/components/OnboardingTutorial.tsx
index ed9e40ad..0f64980a 100644
--- a/apps/web/src/components/OnboardingTutorial.tsx
+++ b/apps/web/src/components/OnboardingTutorial.tsx
@@ -1,196 +1,48 @@
 'use client'
 
+import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useState, useEffect } from 'react'
 
 const STORAGE_KEY = 'potbot-onboarding-v3'
 
-interface Step {
-  id: number
-  emoji: string
-  title: string
-  body: string
-  cta?: string
-  highlight?: string
-}
-
-const STEPS: Step[] = [
-  {
-    id: 0,
-    emoji: '🪴',
-    title: 'Welcome to PotBot',
-    body: 'A POTFolio is a basket of up to 5 Solana assets held as one token. Deposit USDC, receive the token, hold it in any wallet, redeem it any time.',
-    highlight: 'Nobody can withdraw the assets: not the creator, not PotBot. There is no such instruction.',
-  },
-  {
-    id: 1,
-    emoji: '🪴',
-    title: 'Deposit, then redeem your way',
-    body: 'Deposit USDC: the token is minted at NAV from Pyth prices in the same transaction and the basket is bought in the same wallet prompt. Redeem for every asset in kind, or for USDC in one transaction with an on-chain minimum.',
-    highlight: 'Devnet build: click Get test USDC on any POTFolio, then Deposit.',
-  },
-  {
-    id: 2,
-    emoji: '🪴',
-    title: 'Create your own, earn on every deposit',
-    body: 'Pick the assets and weights, publish in one transaction, share your link. Every deposit through it pays the creator and the referrer a share of the 0.30% entry fee. No custody, no liability.',
-    highlight: 'Built for Colosseum Crypto World\'s Fair. Judges: see /worldsfair.',
-  },
-]
-
-function StepDot({ active, done, onClick }: { active: boolean; done: boolean; onClick: () => void }) {
-  return (
-    <button
-      onClick={onClick}
-      className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
-        active ? 'bg-pot-green scale-125' : done ? 'bg-pot-green/40' : 'bg-pot-border'
-      }`}
-      aria-label="Go to step"
-    />
-  )
-}
-
-interface OnboardingTutorialProps {
-  /** Force-show regardless of localStorage (for preview/demo) */
-  forceShow?: boolean
-}
-
-export function OnboardingTutorial({ forceShow = false }: OnboardingTutorialProps) {
+/**
+ * First-visit hint on the POTFolio pages. Replaces the former full-screen
+ * three-step modal (design v3): one dismissible line above the content.
+ * Same storage key, so people who dismissed the modal never see the hint.
+ */
+export function OnboardingTutorial({ forceShow = false }: { forceShow?: boolean }) {
+  const pathname = usePathname()
   const [visible, setVisible] = useState(false)
-  const [step, setStep] = useState(0)
-  const [animating, setAnimating] = useState(false)
 
-  const pathname = usePathname()
   useEffect(() => {
+    if (!pathname?.startsWith('/portfolios')) { setVisible(false); return }
     if (forceShow) { setVisible(true); return }
-    if (!pathname || !pathname.startsWith('/portfolios')) return
     try {
-      const seen = localStorage.getItem(STORAGE_KEY)
-      if (!seen) setVisible(true)
+      setVisible(!localStorage.getItem(STORAGE_KEY))
     } catch {
-      /* storage blocked: never show */
+      setVisible(false)
     }
-  }, [forceShow, pathname])
+  }, [pathname, forceShow])
 
   if (!visible) return null
 
-  const current = STEPS[step]
-  const isLast = step === STEPS.length - 1
-
-  function dismiss() {
-    if (!forceShow) localStorage.setItem(STORAGE_KEY, '1')
+  const dismiss = () => {
+    try { localStorage.setItem(STORAGE_KEY, '1') } catch { /* ignore */ }
     setVisible(false)
   }
 
-  function goTo(idx: number) {
-    if (animating || idx === step) return
-    setAnimating(true)
-    setTimeout(() => {
-      setStep(idx)
-      setAnimating(false)
-    }, 150)
-  }
-
-  function next() {
-    if (isLast) { dismiss(); return }
-    goTo(step + 1)
-  }
-
   return (
-    <div
-      className="fixed inset-0 z-[200] flex items-center justify-center p-4"
-      style={{ background: 'rgba(0,0,0,0.80)', backdropFilter: 'blur(10px)' }}
-      onClick={dismiss}
-    >
-      {/* Card */}
-      <div
-        className="relative w-full max-w-sm rounded-3xl border border-pot-border bg-pot-card shadow-2xl overflow-hidden"
-        onClick={(e) => e.stopPropagation()}
-        style={{ boxShadow: '0 0 60px rgba(0,255,136,0.08)' }}
-      >
-        {/* Gradient accent top */}
-        <div
-          className="h-1 w-full"
-          style={{ background: 'linear-gradient(90deg, #00ff88, #8b5cf6, #00ff88)' }}
-        />
-
-        {/* Skip */}
-        <button
-          onClick={dismiss}
-          className="absolute top-4 right-4 text-pot-muted hover:text-white text-sm transition"
-        >
-          Skip all
+    <div className="border-b border-pot-border bg-pot-card">
+      <div className="mx-auto flex max-w-7xl flex-wrap items-center gap-x-4 gap-y-2 px-4 py-2.5 text-[13px] text-pot-muted sm:px-6 lg:px-8">
+        <span>
+          <span className="font-semibold text-white">New here?</span> Get test USDC first, then deposit. One signature each. Redeem any time for the assets or USDC.
+        </span>
+        <Link href="/learn" className="underline underline-offset-2 hover:text-white">How it works</Link>
+        <button type="button" onClick={dismiss} className="ml-auto rounded-full border border-pot-border px-3 py-1 text-xs font-medium text-white hover:border-pot-muted" aria-label="Dismiss">
+          Got it
         </button>
-
-        {/* Content */}
-        <div
-          className={`px-7 py-8 transition-opacity duration-150 ${animating ? 'opacity-0' : 'opacity-100'}`}
-        >
-          {/* Step counter */}
-          <div className="text-[10px] text-pot-muted mb-4 tracking-widest uppercase">
-            Step {step + 1} of {STEPS.length}
-          </div>
-
-          {/* Emoji icon */}
-          <div
-            className="w-20 h-20 rounded-2xl flex items-center justify-center text-5xl mb-6 mx-auto"
-            style={{ background: 'rgba(0,255,136,0.06)', border: '1px solid rgba(0,255,136,0.15)' }}
-          >
-            {current.emoji}
-          </div>
-
-          {/* Title */}
-          <h2 className="text-xl font-black text-white text-center mb-3 leading-tight">
-            {current.title}
-          </h2>
-
-          {/* Body */}
-          <p className="text-sm text-pot-muted text-center leading-relaxed mb-5">
-            {current.body}
-          </p>
-
-          {/* Highlight pill */}
-          {current.highlight && (
-            <div className="rounded-xl bg-pot-green/8 border border-pot-green/20 px-4 py-3 text-xs text-pot-green text-center font-medium mb-6">
-              {current.highlight}
-            </div>
-          )}
-
-          {/* Progress dots */}
-          <div className="flex justify-center gap-2 mb-6">
-            {STEPS.map((s) => (
-              <StepDot
-                key={s.id}
-                active={s.id === step}
-                done={s.id < step}
-                onClick={() => goTo(s.id)}
-              />
-            ))}
-          </div>
-
-          {/* CTA */}
-          <button
-            onClick={next}
-            className="btn-primary w-full text-sm py-3 font-semibold"
-          >
-            {isLast ? '🚀 Start using PotBot' : 'Next →'}
-          </button>
-
-          {step > 0 && (
-            <button
-              onClick={() => goTo(step - 1)}
-              className="w-full text-center text-xs text-pot-muted hover:text-white transition mt-3"
-            >
-              ← Back
-            </button>
-          )}
-        </div>
       </div>
     </div>
   )
 }
-
-/** Reset onboarding so it shows again — useful for testing or user-triggered replay */
-export function resetOnboarding() {
-  localStorage.removeItem(STORAGE_KEY)
-}
diff --git a/apps/web/src/components/ThemeToggle.tsx b/apps/web/src/components/ThemeToggle.tsx
index 6fa25e46..7111b879 100644
--- a/apps/web/src/components/ThemeToggle.tsx
+++ b/apps/web/src/components/ThemeToggle.tsx
@@ -19,10 +19,10 @@ export function ThemeToggle() {
   useEffect(() => { setMounted(true) }, [])
 
   const label = !mounted
-    ? '🌑 Crypto mode'
+    ? 'Crypto mode'
     : isLight
-      ? '☀️ Normie mode'
-      : '🌑 Crypto mode'
+      ? 'Normie mode'
+      : 'Crypto mode'
 
   return (
     <button
@@ -34,8 +34,8 @@ export function ThemeToggle() {
       className={
         'inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-semibold transition whitespace-nowrap ' +
         (isLight
-          ? 'border-pot-border bg-white text-gray-900 hover:border-pot-green'
-          : 'border-pot-border bg-pot-card text-white hover:border-pot-green')
+          ? 'border-pot-border bg-white text-gray-900 hover:border-pot-muted'
+          : 'border-pot-border bg-pot-card text-white hover:border-pot-muted')
       }
     >
       {label}
diff --git a/apps/web/src/components/pot-index/CompositionBar.tsx b/apps/web/src/components/pot-index/CompositionBar.tsx
index bddf7a01..db0a612c 100644
--- a/apps/web/src/components/pot-index/CompositionBar.tsx
+++ b/apps/web/src/components/pot-index/CompositionBar.tsx
@@ -4,7 +4,7 @@ import { assetByMint } from '@/lib/pot-index/registry'
 import type { PotView } from '@/lib/pot-index/client'
 import { TokenHover } from './TokenHover'
 
-const COLORS = ['#00ff88', '#8b5cf6', '#38bdf8', '#f59e0b', '#f472b6']
+const COLORS = ['#E07A4F', '#E9C46A', '#9CCB6E', '#7FA7C9', '#B08BC9']
 
 export function legColor(i: number) {
   return COLORS[i % COLORS.length]
@@ -15,7 +15,7 @@ export function CompositionBar({ pot, actualUsd, cashUsd, legAmounts }: { pot: P
   const total = (actualUsd?.reduce((s, v) => s + v, 0) ?? 0) + (cashUsd ?? 0)
   return (
     <div>
-      <div className="flex h-3 w-full overflow-hidden rounded-full bg-pot-border">
+      <div className="flex h-2.5 w-full gap-[2px] overflow-hidden rounded-full bg-pot-border">
         {pot.legs.map((l, i) => (
           <div key={l.mint.toBase58()} style={{ width: `${l.weightBps / 100}%`, background: legColor(i) }} />
         ))}
diff --git a/apps/web/src/components/pot-index/GardenMode.tsx b/apps/web/src/components/pot-index/GardenMode.tsx
index 36be243a..10d95f17 100644
--- a/apps/web/src/components/pot-index/GardenMode.tsx
+++ b/apps/web/src/components/pot-index/GardenMode.tsx
@@ -62,7 +62,7 @@ export function GardenMode({ series: fixed }: { series?: PlantSeries }) {
       <div
         aria-hidden
         className="pointer-events-none absolute inset-0 -z-10"
-        style={{ background: 'radial-gradient(ellipse 60% 50% at 50% 45%, rgba(20,241,149,0.07), transparent 60%)' }}
+        style={{ background: 'radial-gradient(ellipse 60% 50% at 50% 45%, rgba(156,203,110,0.07), transparent 60%)' }}
       />
       <div className="mx-auto max-w-6xl">
         <div className="mb-12 text-center">
@@ -71,9 +71,9 @@ export function GardenMode({ series: fixed }: { series?: PlantSeries }) {
             <span className="text-xs font-bold uppercase tracking-[0.4em] text-pot-green">Garden mode</span>
             <span className="h-px w-6 bg-gradient-to-l from-transparent to-pot-green/60" />
           </div>
-          <h2 className="mb-4 text-3xl font-bold leading-[1.15] tracking-tight text-white sm:text-5xl">
+          <h2 className="mb-4 font-display text-4xl font-semibold leading-[1.1] tracking-[-0.02em] text-white sm:text-5xl">
             Watch your POTFolio{' '}
-            <span className="bg-gradient-to-r from-pot-green to-pot-accent bg-clip-text text-transparent">grow.</span>
+            <span className="italic text-pot-green">grow.</span>
           </h2>
           <p className="mx-auto max-w-2xl text-base leading-relaxed text-white/80 sm:text-lg">
             Every POTFolio is a plant. Deposits water it, exits dry it out. The level comes from on-chain value, so it cannot be faked.
@@ -99,7 +99,7 @@ export function GardenMode({ series: fixed }: { series?: PlantSeries }) {
               <div
                 aria-hidden
                 className="absolute inset-x-6 bottom-2 h-10 rounded-full blur-2xl transition-opacity duration-500"
-                style={{ background: 'rgba(20,241,149,0.35)', opacity: pulse ? 1 : 0.35 }}
+                style={{ background: 'rgba(156,203,110,0.35)', opacity: pulse ? 1 : 0.35 }}
               />
               {STAGES.map((s) => (
                 // eslint-disable-next-line @next/next/no-img-element
@@ -146,9 +146,9 @@ export function GardenMode({ series: fixed }: { series?: PlantSeries }) {
                   <div
                     className="flex h-20 w-20 items-end justify-center rounded-2xl transition-all duration-500 sm:h-24 sm:w-24"
                     style={{
-                      background: `rgba(20,241,149,${active ? 0.12 : 0.04})`,
-                      border: `1px solid rgba(20,241,149,${active ? 0.7 : 0.18})`,
-                      boxShadow: active ? '0 0 28px rgba(20,241,149,0.35)' : 'none',
+                      background: `rgba(156,203,110,${active ? 0.12 : 0.04})`,
+                      border: `1px solid rgba(156,203,110,${active ? 0.7 : 0.18})`,
+                      boxShadow: 'none',
                       transform: active ? 'translateY(-4px)' : 'none',
                     }}
                   >
@@ -168,7 +168,7 @@ export function GardenMode({ series: fixed }: { series?: PlantSeries }) {
           <div className="mt-6 hidden h-1 w-full rounded-full bg-pot-border sm:block">
             <div
               className="h-1 rounded-full bg-pot-green transition-all duration-700"
-              style={{ width: `${((stage - 1) / 5) * 100}%`, boxShadow: '0 0 12px rgba(20,241,149,0.6)' }}
+              style={{ width: `${((stage - 1) / 5) * 100}%` }}
             />
           </div>
         </div>
diff --git a/apps/web/src/components/pot-index/HowAPotWorks.tsx b/apps/web/src/components/pot-index/HowAPotWorks.tsx
index 48d156ff..9609c699 100644
--- a/apps/web/src/components/pot-index/HowAPotWorks.tsx
+++ b/apps/web/src/components/pot-index/HowAPotWorks.tsx
@@ -42,7 +42,7 @@ export function HowAPotWorks({ compact = false }: { compact?: boolean }) {
     <section className={compact ? '' : 'mx-auto max-w-6xl px-4 py-16'}>
       {!compact && (
         <div className="mb-8 text-center">
-          <h2 className="text-3xl font-bold leading-tight tracking-tight text-white sm:text-5xl">How it works</h2>
+          <h2 className="font-display text-4xl font-semibold leading-tight tracking-[-0.02em] text-white sm:text-5xl">How it works</h2>
         </div>
       )}
       <div className="mb-8 flex justify-center">
@@ -52,7 +52,7 @@ export function HowAPotWorks({ compact = false }: { compact?: boolean }) {
               key={a}
               type="button"
               onClick={() => setWho(a)}
-              className={`rounded-full px-5 py-2 text-sm font-semibold transition ${who === a ? 'bg-pot-green text-pot-dark' : 'text-white/70 hover:text-white'}`}
+              className={`rounded-full px-5 py-2 text-sm font-semibold transition ${who === a ? 'bg-pot-accent text-pot-dark' : 'text-white/70 hover:text-white'}`}
             >
               {a === 'holders' ? 'I want to invest' : 'I want to create'}
             </button>
@@ -62,15 +62,15 @@ export function HowAPotWorks({ compact = false }: { compact?: boolean }) {
 
       <ol className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
         {p.steps.map((s, i) => (
-          <li key={s.title} className="card relative p-5">
-            <span className="mb-3 block font-mono text-xs text-pot-green">0{i + 1}</span>
-            <h3 className="mb-2 font-semibold text-white">{s.title}</h3>
-            <p className="text-sm leading-relaxed text-white/70">{s.body}</p>
+          <li key={s.title} className="card relative rounded-3xl p-6">
+            <span className="mb-3 block font-mono text-xs tracking-[0.12em] text-pot-accent">0{i + 1}</span>
+            <h3 className="mb-2 text-lg font-semibold text-white">{s.title}</h3>
+            <p className="text-[15px] leading-relaxed text-pot-muted">{s.body}</p>
           </li>
         ))}
       </ol>
 
-      <ul className="mx-auto mt-6 flex max-w-4xl flex-wrap justify-center gap-x-6 gap-y-2 text-sm text-white/80">
+      <ul className="mx-auto mt-6 flex max-w-4xl flex-wrap justify-center gap-x-6 gap-y-2 text-[15px] text-pot-muted">
         {p.benefits.map((b) => (
           <li key={b} className="flex items-start gap-2">
             <span className="mt-1 h-2 w-2 shrink-0 rounded-full bg-pot-green" />
diff --git a/apps/web/src/components/pot-index/NavChart.tsx b/apps/web/src/components/pot-index/NavChart.tsx
index 5d862165..57ee7892 100644
--- a/apps/web/src/components/pot-index/NavChart.tsx
+++ b/apps/web/src/components/pot-index/NavChart.tsx
@@ -35,7 +35,7 @@ export function Sparkline({ points, width = 600, height = 160, stroke, fill = tr
   }, [points, width, height, entry])
   if (!d) return null
   const up = points[points.length - 1].price >= points[0].price
-  const color = stroke ?? (up ? 'var(--c-brand-green, #14F195)' : '#ef4444')
+  const color = stroke ?? (up ? 'var(--c-brand-green, #9CCB6E)' : 'var(--c-muted, #C9C0B0)')
   return (
     <svg viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" className={className} aria-hidden>
       {fill && <path d={d.area} fill={color} opacity={0.12} />}
diff --git a/apps/web/src/components/pot-index/PlantBadge.tsx b/apps/web/src/components/pot-index/PlantBadge.tsx
index 3806d5d4..208510e6 100644
--- a/apps/web/src/components/pot-index/PlantBadge.tsx
+++ b/apps/web/src/components/pot-index/PlantBadge.tsx
@@ -10,7 +10,7 @@ export function PlantBadge({ pot, navUsd, size = 44 }: { pot: PotView; navUsd?:
   return (
     <div
       className="flex shrink-0 items-end justify-center rounded-xl"
-      style={{ width: size, height: size, background: 'rgba(20,241,149,0.06)', border: '1px solid rgba(20,241,149,0.2)' }}
+      style={{ width: size, height: size, background: 'rgba(156,203,110,0.08)', border: '1px solid var(--c-border)' }}
       title={`Level ${st.level} · ${st.name}`}
     >
       {/* eslint-disable-next-line @next/next/no-img-element */}
diff --git a/apps/web/src/components/pot-index/PotCard.tsx b/apps/web/src/components/pot-index/PotCard.tsx
index bf366a9d..d7da30c1 100644
--- a/apps/web/src/components/pot-index/PotCard.tsx
+++ b/apps/web/src/components/pot-index/PotCard.tsx
@@ -16,18 +16,18 @@ export function PotCard({ pot, list }: { pot: PotView; prices: Record<string, nu
   const perfCls = perf === undefined ? 'text-white/70' : perf >= 0 ? 'text-pot-green' : 'text-red-400'
   const mint = pot.indexMint.toBase58()
   return (
-    <Link href={`/portfolios/${mint}`} className="card block p-5 transition hover:border-pot-green/60">
+    <Link href={`/portfolios/${mint}`} className="card block rounded-3xl p-5 transition duration-200 ease-pot hover:-translate-y-0.5 hover:border-pot-muted/60 hover:shadow-[0_24px_40px_-32px_rgba(0,0,0,.6)]">
       <div className="flex items-start justify-between gap-3">
         <div className="flex items-center gap-3">
           <PlantBadge pot={pot} navUsd={stats.data?.navUsd} />
           <div>
-          <h2 className="text-lg font-bold text-white">{pot.name}</h2>
-          <p className="font-mono text-xs text-pot-green">${pot.symbol}</p>
+          <h2 className="font-display text-xl font-semibold text-white">{pot.name}</h2>
+          <p className="font-mono text-xs text-pot-muted">${pot.symbol}</p>
           </div>
         </div>
         <div className="text-right">
           <p className="text-xs text-white/70">TVL</p>
-          <p className="font-semibold text-white">
+          <p className="font-mono font-medium text-white tabular-nums">
             {stats.data ? `$${stats.data.navUsd.toLocaleString(undefined, { maximumFractionDigits: 0 })}` : '—'}
           </p>
           <p className={`text-xs ${perfCls}`}>{perf === undefined ? '' : `${perf >= 0 ? '+' : ''}${(perf * 100).toFixed(2)}% since launch`}</p>
diff --git a/apps/web/src/components/v3/FlagshipCard.tsx b/apps/web/src/components/v3/FlagshipCard.tsx
new file mode 100644
index 00000000..d4d2dc45
--- /dev/null
+++ b/apps/web/src/components/v3/FlagshipCard.tsx
@@ -0,0 +1,100 @@
+'use client'
+
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { usePot, usePotStats, useNavHistory } from '@/hooks/usePotIndex'
+import { POT_INDEX_SETTINGS, assetByMint } from '@/lib/pot-index/registry'
+import { plantSrc, potSeries, stageForUsd, STAGES } from '@/lib/pot-index/garden'
+import { legColor } from '@/components/pot-index/CompositionBar'
+import { Sparkline } from '@/components/pot-index/NavChart'
+
+/** Counts from 0 to `value` once, 700 ms, site easing. */
+function useCountUp(value: number | null, ms = 700) {
+  const [v, setV] = useState(0)
+  useEffect(() => {
+    if (value == null) return
+    if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) { setV(value); return }
+    let raf = 0
+    const t0 = performance.now()
+    const ease = (t: number) => 1 - Math.pow(1 - t, 3)
+    const tick = (now: number) => {
+      const k = Math.min(1, (now - t0) / ms)
+      setV(value * ease(k))
+      if (k < 1) raf = requestAnimationFrame(tick)
+    }
+    raf = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(raf)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value == null])
+  return value == null ? null : v
+}
+
+export function FlagshipCard() {
+  const mint = POT_INDEX_SETTINGS.flagship
+  const pot = usePot(mint)
+  const stats = usePotStats(pot.data)
+  const nav = useNavHistory(mint, '7d')
+  const price = useCountUp(stats.data?.indexPrice ?? null)
+  const change7d = nav.data?.stats.change7d ?? null
+  const points = nav.data?.points ?? []
+  const navUsd = stats.data?.navUsd ?? 0
+  const stage = stageForUsd(navUsd)
+  const st = STAGES[stage - 1]
+  const p = pot.data
+  const up = change7d == null || change7d >= 0
+
+  return (
+    <div className="v3-rise relative rounded-[28px] border border-pot-border bg-pot-card p-6 shadow-[0_30px_60px_-40px_rgba(0,0,0,.6)] sm:p-7" style={{ animationDelay: '320ms' }}>
+      {p && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={plantSrc(potSeries(p), stage)} alt="" className="animate-breathe absolute -top-12 right-5 w-24 object-contain sm:-top-14 sm:w-28" draggable={false} />
+      )}
+      <div className="pr-24">
+        <p className="font-display text-2xl font-semibold text-white sm:text-[28px]">{p?.name ?? 'Solana Blue Chips'}</p>
+        <p className="mt-1 font-mono text-xs text-pot-muted">
+          {p ? `$${p.symbol} · Level ${st.level} ${st.name}` : 'Reading from the chain'}
+        </p>
+      </div>
+      <div className="mt-4 flex items-baseline gap-3">
+        <span className="font-display text-4xl font-semibold tabular-nums tracking-tight text-white">
+          {price == null ? '$1.00' : `$${price.toFixed(3)}`}
+        </span>
+        {change7d != null && (
+          <span className={`font-mono text-sm ${up ? 'text-pot-green' : 'text-pot-muted'}`}>{up ? '+' : ''}{(change7d * 100).toFixed(1)}% 7d</span>
+        )}
+      </div>
+      <div className="mt-2 h-16">
+        {points.length >= 2 ? (
+          <Sparkline points={points} width={400} height={64} className="h-16 w-full" />
+        ) : (
+          <div className="h-16 rounded-xl border border-dashed border-pot-border" />
+        )}
+      </div>
+      {p && (
+        <>
+          <div className="mt-4 flex h-2.5 gap-[3px] overflow-hidden rounded-full">
+            {p.legs.map((l, i) => (
+              <div key={l.mint.toBase58()} style={{ width: `${l.weightBps / 100}%`, background: legColor(i), transformOrigin: 'left', animation: 'v3-fill .8s var(--ease-pot) both', animationDelay: `${500 + i * 60}ms` }} />
+            ))}
+          </div>
+          <ul className="mt-3 flex flex-wrap gap-x-4 gap-y-1.5 font-mono text-[11px] text-pot-muted">
+            {p.legs.map((l, i) => {
+              const a = assetByMint(l.mint.toBase58())
+              return (
+                <li key={l.mint.toBase58()} className="flex items-center gap-1.5">
+                  <span className="inline-block h-2 w-2 rounded-[2px]" style={{ background: legColor(i) }} />
+                  {a?.symbol ?? l.mint.toBase58().slice(0, 4)} {l.weightBps / 100}%
+                </li>
+              )
+            })}
+          </ul>
+        </>
+      )}
+      <div className="mt-6 flex gap-2.5">
+        <Link href={mint ? `/portfolios/${mint}` : '/portfolios'} className="btn-primary flex-1 text-center">Deposit</Link>
+        <Link href={mint ? `/portfolios/${mint}` : '/portfolios'} className="btn-secondary flex-1 text-center">Redeem</Link>
+      </div>
+      <p className="mt-3 text-center text-[13px] text-pot-muted">One signature. Redeem for the assets or USDC, any time.</p>
+    </div>
+  )
+}
diff --git a/apps/web/src/components/v3/LandingV3.tsx b/apps/web/src/components/v3/LandingV3.tsx
new file mode 100644
index 00000000..ba8dcbfb
--- /dev/null
+++ b/apps/web/src/components/v3/LandingV3.tsx
@@ -0,0 +1,166 @@
+'use client'
+
+import Link from 'next/link'
+import { usePots, useAssetPrices, useAllPotStats } from '@/hooks/usePotIndex'
+import { POT_INDEX_SETTINGS } from '@/lib/pot-index/registry'
+import { PotCard } from '@/components/pot-index/PotCard'
+import { HowAPotWorks } from '@/components/pot-index/HowAPotWorks'
+import { GardenMode } from '@/components/pot-index/GardenMode'
+import { Reveal } from './Reveal'
+import { FlagshipCard } from './FlagshipCard'
+import { PotAnimation } from './PotAnimation'
+
+function Eyebrow({ children }: { children: React.ReactNode }) {
+  return <p className="font-mono text-xs uppercase tracking-[0.14em] text-pot-accent">{children}</p>
+}
+
+function H2({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  return <h2 className={`font-display text-[32px] font-semibold leading-[1.1] tracking-[-0.02em] text-white sm:text-5xl ${className}`}>{children}</h2>
+}
+
+const PROMISES = [
+  { t: 'Nobody can reach your money', b: 'The assets sit in a program with no withdraw instruction. Not the creator, not us. You redeem your own token, nobody else can.' },
+  { t: 'Leave any time', b: 'Redeem for your share of every asset, or for USDC in one transaction. Exits cannot be paused.' },
+  { t: 'Creators earn, never hold', b: '40% of every entry fee goes to the creator. Your money never touches their wallet.' },
+]
+
+const SECURITY = [
+  { t: 'Open source', b: 'Program, SDK and app on GitHub under MIT.', href: 'https://github.com/YD811/potbot-v2', ext: true },
+  { t: 'No withdraw instruction', b: 'The program has no path that moves assets to a person. Holders redeem their own token, nothing else.', href: '/learn' },
+  { t: 'Three security reviews', b: 'Two internal, one independent. Zero critical findings. Every finding and its status is public.', href: '/mainnet' },
+  { t: 'External audit before mainnet', b: 'Mainnet opens after the audit, with a multisig and a capped first POTFolio.', href: '/roadmap' },
+]
+
+export function LandingV3() {
+  const pots = usePots()
+  const prices = useAssetPrices()
+  const stats = useAllPotStats(pots.data)
+  const flagship = POT_INDEX_SETTINGS.flagship
+  const live = [...(pots.data ?? [])]
+    .sort((a, b) => Number(b.indexMint.toBase58() === flagship) - Number(a.indexMint.toBase58() === flagship))
+    .slice(0, 3)
+
+  return (
+    <div className="-mt-6 sm:-mt-8">
+      {/* Hero */}
+      <section className="grid items-center gap-14 pb-16 pt-10 sm:pt-16 lg:grid-cols-[1.1fr_.9fr] lg:gap-12 lg:pb-20">
+        <div>
+          <h1 className="font-display text-[44px] font-semibold leading-[1.02] tracking-[-0.03em] text-white sm:text-6xl lg:text-7xl">
+            <span className="v3-line"><span>Your portfolio.</span></span>
+            <span className="v3-line"><span className="italic text-pot-accent" style={{ animationDelay: '90ms' }}>One token.</span></span>
+          </h1>
+          <p className="v3-rise mt-6 max-w-[34em] text-lg text-pot-muted sm:text-xl" style={{ animationDelay: '220ms' }}>
+            Creator ETFs without the exit liquidity. Put up to 5 assets in a Pot, hold one token, leave any time. Nobody can reach anyone else&apos;s money.
+          </p>
+          <div className="v3-rise mt-8 flex flex-wrap gap-3" style={{ animationDelay: '320ms' }}>
+            <Link href="/portfolios" className="btn-primary px-7 py-3 text-base">Explore POTFolios</Link>
+            <Link href="/portfolios/new" className="btn-secondary px-7 py-3 text-base">Build your own</Link>
+          </div>
+        </div>
+        <div className="pt-10 lg:pt-0">
+          <FlagshipCard />
+        </div>
+      </section>
+
+      {/* Promises */}
+      <section className="grid gap-4 pb-20 sm:grid-cols-3">
+        {PROMISES.map((p, i) => (
+          <Reveal key={p.t} delay={i * 80} className="rounded-3xl border border-pot-border bg-pot-card p-6">
+            <h3 className="font-display text-xl font-semibold text-white">{p.t}</h3>
+            <p className="mt-2 text-[15px] leading-relaxed text-pot-muted">{p.b}</p>
+          </Reveal>
+        ))}
+      </section>
+
+      {/* What a Pot is */}
+      <section className="grid items-center gap-10 pb-20 lg:grid-cols-[.8fr_1.2fr]">
+        <Reveal><PotAnimation /></Reveal>
+        <Reveal delay={100}>
+          <Eyebrow>What a Pot is</Eyebrow>
+          <H2 className="mt-3">Assets in. <i className="italic text-pot-accent">One token out.</i></H2>
+          <p className="mt-5 max-w-[36em] text-lg text-pot-muted">
+            A Pot is an onchain treasury. Tokens, tokenized stocks and real-world assets go in, up to five of them. What comes out is one token that mirrors the whole basket. Hold it, send it, redeem it for the assets or for USDC.
+          </p>
+        </Reveal>
+      </section>
+
+      {/* How it works */}
+      <section className="pb-20">
+        <Reveal className="mb-8 text-center">
+          <H2>How it works</H2>
+        </Reveal>
+        <Reveal delay={80}><HowAPotWorks compact /></Reveal>
+      </section>
+
+      {/* Live now */}
+      <section className="pb-20">
+        <Reveal className="mb-7 flex flex-wrap items-end justify-between gap-4">
+          <H2>Live now.</H2>
+          <Link href="/portfolios" className="btn-secondary px-5 py-2 text-sm">See all POTFolios</Link>
+        </Reveal>
+        {pots.isLoading && <p className="text-sm text-pot-muted">Reading from the chain…</p>}
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {live.map((p, i) => (
+            <Reveal key={p.address.toBase58()} delay={i * 80}>
+              <PotCard pot={p} prices={prices.data ?? {}} list={stats.data?.[p.address.toBase58()]} />
+            </Reveal>
+          ))}
+        </div>
+      </section>
+
+      {/* Garden */}
+      <Reveal as="section" className="pb-20">
+        <GardenMode />
+      </Reveal>
+
+      {/* Security */}
+      <section className="grid gap-10 border-t border-pot-border pb-20 pt-14 lg:grid-cols-[.8fr_1.2fr]">
+        <Reveal>
+          <Eyebrow>Security</Eyebrow>
+          <H2 className="mt-3">Open code. No withdraw instruction. Reviewed three times.</H2>
+        </Reveal>
+        <div className="grid gap-3.5 sm:grid-cols-2">
+          {SECURITY.map((s, i) => (
+            <Reveal key={s.t} delay={i * 70}>
+              {s.ext ? (
+                <a href={s.href} target="_blank" rel="noopener noreferrer" className="block h-full rounded-2xl border border-pot-border bg-pot-card p-5 transition duration-200 ease-pot hover:-translate-y-0.5 hover:border-pot-muted/60">
+                  <p className="text-[17px] font-semibold text-white">{s.t}</p>
+                  <p className="mt-1.5 text-sm leading-relaxed text-pot-muted">{s.b}</p>
+                </a>
+              ) : (
+                <Link href={s.href} className="block h-full rounded-2xl border border-pot-border bg-pot-card p-5 transition duration-200 ease-pot hover:-translate-y-0.5 hover:border-pot-muted/60">
+                  <p className="text-[17px] font-semibold text-white">{s.t}</p>
+                  <p className="mt-1.5 text-sm leading-relaxed text-pot-muted">{s.b}</p>
+                </Link>
+              )}
+            </Reveal>
+          ))}
+        </div>
+      </section>
+
+      {/* Creators / Holders */}
+      <section className="grid gap-4 pb-20 lg:grid-cols-2">
+        <Reveal className="rounded-[28px] bg-pot-accent p-8 text-[#1A120C] sm:p-10">
+          <p className="font-mono text-xs uppercase tracking-[0.14em] opacity-80">For creators</p>
+          <h3 className="mt-3 font-display text-3xl font-semibold leading-tight">Turn your thesis into a token.</h3>
+          <p className="mt-3 max-w-[30em] text-base opacity-90">Pick the assets, set the weights, share the link. Earn on every deposit. You never hold anyone&apos;s money.</p>
+          <Link href="/portfolios/new" className="mt-6 inline-flex rounded-full border border-current px-5 py-2.5 text-sm font-semibold transition hover:bg-[#1A120C]/10">Build a POTFolio</Link>
+        </Reveal>
+        <Reveal delay={80} className="rounded-[28px] p-8 sm:p-10" style={{ background: 'var(--pot-ink)', color: 'var(--pot-bg)' }}>
+          <p className="font-mono text-xs uppercase tracking-[0.14em] opacity-70">For holders</p>
+          <h3 className="mt-3 font-display text-3xl font-semibold leading-tight">Back an idea. Not copy trading.</h3>
+          <p className="mt-3 max-w-[30em] text-base opacity-80">Nobody copies anyone&apos;s trades. Everyone pools into the same basket and holds the same token at the same price.</p>
+          <Link href="/portfolios" className="mt-6 inline-flex rounded-full border border-current px-5 py-2.5 text-sm font-semibold transition hover:opacity-80">Explore POTFolios</Link>
+        </Reveal>
+      </section>
+
+      {/* Vision */}
+      <Reveal as="section" className="pb-12 text-center">
+        <h2 className="mx-auto max-w-[22em] font-display text-[28px] font-semibold leading-tight tracking-[-0.02em] text-white sm:text-4xl">
+          A Pot can hold anything that gets tokenized. Tokens today, stocks already, <i className="italic text-pot-accent">real-world assets next.</i>
+        </h2>
+        <Link href="/portfolios" className="btn-primary mt-7 inline-flex px-7 py-3 text-base">Explore POTFolios</Link>
+      </Reveal>
+    </div>
+  )
+}
diff --git a/apps/web/src/components/v3/PotAnimation.tsx b/apps/web/src/components/v3/PotAnimation.tsx
new file mode 100644
index 00000000..ef6dfffa
--- /dev/null
+++ b/apps/web/src/components/v3/PotAnimation.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+/**
+ * Signature animation: five assets drop into the Pot, one token rises.
+ * Pure CSS keyframes, loops every 8 s, stops under prefers-reduced-motion.
+ */
+const COINS = [
+  { label: 'SOL', color: '#E07A4F', x: 60, delay: 0 },
+  { label: 'JUP', color: '#E9C46A', x: 100, delay: 0.25 },
+  { label: 'TSLA', color: '#9CCB6E', x: 140, delay: 0.5 },
+  { label: 'QQQ', color: '#7FA7C9', x: 180, delay: 0.75 },
+  { label: 'BONK', color: '#B08BC9', x: 220, delay: 1.0 },
+]
+
+export function PotAnimation({ className = '' }: { className?: string }) {
+  return (
+    <div className={`relative mx-auto w-full max-w-[320px] ${className}`} aria-hidden>
+      <style>{`
+        .v3pot-coin { animation: v3-coin 2.4s var(--ease-pot) infinite; transform-origin: center; }
+        .v3pot-token { animation: v3-token 2.4s var(--ease-pot) infinite; transform-origin: center; }
+        @media (prefers-reduced-motion: reduce) { .v3pot-coin, .v3pot-token { animation: none; opacity: 1; transform: none; } }
+      `}</style>
+      <svg viewBox="0 0 280 260" className="h-auto w-full" fill="none">
+        {/* coins */}
+        {COINS.map((c) => (
+          <g key={c.label} className="v3pot-coin" style={{ animationDelay: `${c.delay}s`, transformBox: 'fill-box' }}>
+            <circle cx={c.x} cy={120} r={16} fill={c.color} />
+            <text x={c.x} y={124} textAnchor="middle" fontSize="9" fontFamily="var(--font-mono), monospace" fontWeight="500" fill="#1A120C">{c.label}</text>
+          </g>
+        ))}
+        {/* pot */}
+        <path d="M70 150 h140 l-10 70 a12 12 0 0 1 -12 10 h-96 a12 12 0 0 1 -12 -10 z" fill="var(--c-card)" stroke="var(--c-border-2)" strokeWidth="2" />
+        <rect x="62" y="140" width="156" height="16" rx="8" fill="var(--c-card-2)" stroke="var(--c-border-2)" strokeWidth="2" />
+        {/* token */}
+        <g className="v3pot-token" style={{ animationDelay: '1.4s', transformBox: 'fill-box' }}>
+          <circle cx="140" cy="198" r="22" fill="#E07A4F" />
+          <circle cx="140" cy="198" r="22" stroke="#1A120C" strokeOpacity=".25" strokeWidth="2" />
+          <text x="140" y="203" textAnchor="middle" fontSize="12" fontFamily="var(--font-mono), monospace" fontWeight="500" fill="#1A120C">1 token</text>
+        </g>
+      </svg>
+    </div>
+  )
+}
diff --git a/apps/web/src/components/v3/Reveal.tsx b/apps/web/src/components/v3/Reveal.tsx
new file mode 100644
index 00000000..141ed353
--- /dev/null
+++ b/apps/web/src/components/v3/Reveal.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { useEffect, useRef, type ReactNode } from 'react'
+
+/** Enters once: translateY 12px + opacity, 500 ms, the site-wide easing. Visible at rest if JS is slow. */
+export function Reveal({ children, className = '', delay = 0, as: Tag = 'div', style }: { children: ReactNode; className?: string; delay?: number; as?: 'div' | 'section' | 'li'; style?: React.CSSProperties }) {
+  const ref = useRef<HTMLElement | null>(null)
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    if (typeof IntersectionObserver === 'undefined') { el.classList.add('is-in'); return }
+    const io = new IntersectionObserver((entries) => {
+      for (const e of entries) if (e.isIntersecting) { el.classList.add('is-in'); io.disconnect() }
+    }, { rootMargin: '0px 0px -10% 0px', threshold: 0.1 })
+    io.observe(el)
+    const t = setTimeout(() => el.classList.add('is-in'), 2500) // never leave content hidden
+    return () => { io.disconnect(); clearTimeout(t) }
+  }, [])
+  const Comp = Tag as 'div'
+  return (
+    <Comp ref={ref as React.RefObject<HTMLDivElement>} className={`v3-reveal ${className}`} style={{ ...(style ?? {}), ...(delay ? { transitionDelay: `${delay}ms` } : {}) }}>
+      {children}
+    </Comp>
+  )
+}
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index b610b19b..75bd265e 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -1,5 +1,9 @@
 import type { Config } from 'tailwindcss'
 
+// PotBot design system v3 (Oct 2026). Dark is the default palette; the
+// light ("Normie") theme is applied through the overrides in globals.css.
+// One accent (terracotta). Leaf green is reserved for growth, positive
+// change, live status and the plant. No neon, no glow.
 const config: Config = {
   content: [
     './src/**/*.{js,ts,jsx,tsx,mdx}',
@@ -7,29 +11,36 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
-        'pot-dark': '#0a0e17',
-        'pot-card': '#111827',
-        'pot-border': '#1f2937',
-        'pot-green': '#00ff88',
-        'pot-accent': '#8b5cf6',
-        'pot-muted': '#a3aec2',
-        bg: '#0a0e17',
-        surface: '#111827',
-        border: '#1f2937',
-        purple: '#8b5cf6',
+        'pot-dark': '#14120F',
+        'pot-card': '#1E1B16',
+        'pot-border': '#2E2A23',
+        'pot-green': '#9CCB6E',   // leaf: growth, positive change, live
+        'pot-accent': '#E07A4F',  // terracotta: the only accent
+        'pot-amber': '#E9C46A',   // second chart series
+        'pot-muted': '#C9C0B0',
+        'pot-ink': '#F2ECE0',
+        bg: '#14120F',
+        surface: '#1E1B16',
+        border: '#2E2A23',
+        purple: '#E07A4F',
       },
       fontFamily: {
-        display: ['Inter', 'system-ui', 'sans-serif'],
-        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
+        sans: ['var(--font-sans)', 'Instrument Sans', 'system-ui', 'sans-serif'],
+        display: ['var(--font-display)', 'Fraunces', 'Georgia', 'serif'],
+        mono: ['var(--font-mono)', 'IBM Plex Mono', 'Menlo', 'monospace'],
+      },
+      transitionTimingFunction: {
+        pot: 'cubic-bezier(.2,.8,.2,1)',
       },
       animation: {
         'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-        float: 'float 3s ease-in-out infinite',
+        float: 'breathe 6s ease-in-out infinite',
+        breathe: 'breathe 6s ease-in-out infinite',
       },
       keyframes: {
-        float: {
-          '0%, 100%': { transform: 'translateY(0)' },
-          '50%': { transform: 'translateY(-6px)' },
+        breathe: {
+          '0%, 100%': { transform: 'scale(1)' },
+          '50%': { transform: 'scale(1.015)' },
         },
       },
     },

From 5da2f54d649b765b5f2bdbb523149d6c620f8ae1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 14 Oct 2026 02:24:40 +0200
Subject: [PATCH 2/2] web: drop the legacy API health dot from the ticker

The dot polled the old apps/api backend and showed Offline on prod, which
has nothing to do with POTFolio.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DXtsfUkCFQBEUxekKw94KE
---
 apps/web/src/components/Navbar.tsx | 19 +------------------
 1 file changed, 1 insertion(+), 18 deletions(-)

diff --git a/apps/web/src/components/Navbar.tsx b/apps/web/src/components/Navbar.tsx
index 8e9a13cc..6df4f380 100644
--- a/apps/web/src/components/Navbar.tsx
+++ b/apps/web/src/components/Navbar.tsx
@@ -5,9 +5,7 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { usePathname } from 'next/navigation'
 import { useWallet } from '@solana/wallet-adapter-react'
-import { useQuery } from '@tanstack/react-query'
 import { useSolPrice } from '@/lib/prices'
-import { healthApi } from '@/lib/api-client'
 import { ThemeToggle } from '@/components/ThemeToggle'
 import { ConnectButton } from '@/components/ConnectButton'
 import { SeasonPrizePoolModal } from '@/components/SeasonPrizePoolModal'
@@ -17,14 +15,6 @@ function LivePriceTicker() {
   const { price: solPrice } = useSolPrice()
   const [showSeasonModal, setShowSeasonModal] = useState(false)
 
-  const { data: health, isError: apiDown } = useQuery({
-    queryKey: ['api-health'],
-    queryFn:  healthApi.check,
-    refetchInterval: 30_000,
-    retry: 1,
-    staleTime: 25_000,
-  })
-
   return (
     <div className="border-b border-pot-border/60 bg-pot-dark/60">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 h-7 flex items-center gap-4">
@@ -37,16 +27,9 @@ function LivePriceTicker() {
             <span className="text-pot-muted">SOL</span>
           </div>
         )}
-        <div className="w-px h-3 bg-pot-border" />
-        <div className="flex items-center gap-1.5 text-[11px]">
-          <span className={`w-1.5 h-1.5 rounded-full ${apiDown ? 'bg-pot-accent' : 'bg-pot-green'}`} />
-          <span className={apiDown ? 'text-pot-muted' : 'text-pot-green'}>
-            {apiDown ? 'Offline' : 'Live'}
-          </span>
-        </div>
         {/* Season 1 ticker — clickable, opens prize-pool modal */}
         <div className="hidden sm:flex items-center gap-1.5 text-[11px]">
-          <span className="text-pot-muted">|</span>
+          <span className="w-px h-3 bg-pot-border" />
           <button
             onClick={() => setShowSeasonModal(true)}
             className="text-pot-muted hover:text-white hover:underline underline-offset-2 transition cursor-pointer"