diff --git a/website/README.md b/website/README.md
index a2243356..0a06e6c5 100644
--- a/website/README.md
+++ b/website/README.md
@@ -9,7 +9,14 @@ Next.js landing page (`website/`). The playable app lives in `frontend/`.
 pnpm dev:web
 ```
 
-Copy `env.example` to `.env.local` and set `NEXT_PUBLIC_APP_URL` to your local or deployed app URL.
+Copy `env.example` to `.env.local` and set:
+
+- `NEXT_PUBLIC_APP_URL` — the local or deployed **app** URL, used by the "Play Now" CTA.
+- `NEXT_PUBLIC_SITE_URL` — the public origin of **this site**, used for canonical
+  URLs, `sitemap.xml`, `robots.txt` and Open Graph tags. It defaults to
+  `http://localhost:3002`, so a production deploy that leaves it unset publishes a
+  canonical tag and sitemap pointing at localhost. The two are different domains;
+  do not reuse `NEXT_PUBLIC_APP_URL` here.
 
 ## Deploy to Vercel (GitHub Actions)
 
@@ -43,6 +50,7 @@ CI runs `vercel pull` / `vercel deploy` from the monorepo root so `pnpm-lock.yam
 | `VERCEL_ORG_ID` | Secret | Team/user ID |
 | `VERCEL_WEBSITE_PROJECT_ID` | Secret | This website project’s ID |
 | `NEXT_PUBLIC_APP_URL` | Variable | Public URL of the `frontend` app |
+| `NEXT_PUBLIC_SITE_URL` | Variable | Public URL of this marketing site (canonical, sitemap, OG) |
 
 Workflow: none. `.github/workflows/website.yml` was removed in 49c5e63, and the
 secrets table above plus the triggers below describe that workflow. They have
diff --git a/website/env.example b/website/env.example
index 6762e415..974cbbdb 100644
--- a/website/env.example
+++ b/website/env.example
@@ -1,2 +1,7 @@
-# URL of the deployed Crypto Pets app (frontend) — used by the landing "Start Playing" CTA
+# URL of the deployed Crypto Pets app (frontend) — used by the landing "Play Now" CTA
 NEXT_PUBLIC_APP_URL=http://localhost:5173
+
+# Public origin of THIS marketing site — used for canonical URLs, sitemap.xml,
+# robots.txt and Open Graph tags. Must be set in production, or crawlers are
+# handed localhost. Not the same as NEXT_PUBLIC_APP_URL above.
+NEXT_PUBLIC_SITE_URL=http://localhost:3002
diff --git a/website/public/images/pets/cat.png b/website/public/images/pets/cat.png
deleted file mode 100644
index f352c0ba..00000000
Binary files a/website/public/images/pets/cat.png and /dev/null differ
diff --git a/website/public/images/pets/cinder-streak.png b/website/public/images/pets/cinder-streak.png
new file mode 100644
index 00000000..ec7872d9
Binary files /dev/null and b/website/public/images/pets/cinder-streak.png differ
diff --git a/website/public/images/pets/dinosaur.png b/website/public/images/pets/dinosaur.png
deleted file mode 100644
index b920ca39..00000000
Binary files a/website/public/images/pets/dinosaur.png and /dev/null differ
diff --git a/website/public/images/pets/dog.png b/website/public/images/pets/dog.png
deleted file mode 100644
index c6d1ce7c..00000000
Binary files a/website/public/images/pets/dog.png and /dev/null differ
diff --git a/website/public/images/pets/elephant.png b/website/public/images/pets/elephant.png
deleted file mode 100644
index bf9d5c72..00000000
Binary files a/website/public/images/pets/elephant.png and /dev/null differ
diff --git a/website/public/images/pets/ember-oracle.png b/website/public/images/pets/ember-oracle.png
new file mode 100644
index 00000000..384ba664
Binary files /dev/null and b/website/public/images/pets/ember-oracle.png differ
diff --git a/website/public/images/pets/lion.png b/website/public/images/pets/lion.png
deleted file mode 100644
index 4a8a057b..00000000
Binary files a/website/public/images/pets/lion.png and /dev/null differ
diff --git a/website/public/images/pets/nova-brute.png b/website/public/images/pets/nova-brute.png
new file mode 100644
index 00000000..27b619b8
Binary files /dev/null and b/website/public/images/pets/nova-brute.png differ
diff --git a/website/public/images/pets/owl.png b/website/public/images/pets/owl.png
deleted file mode 100644
index 14894515..00000000
Binary files a/website/public/images/pets/owl.png and /dev/null differ
diff --git a/website/public/images/pets/starlit-prowler.png b/website/public/images/pets/starlit-prowler.png
new file mode 100644
index 00000000..158984ac
Binary files /dev/null and b/website/public/images/pets/starlit-prowler.png differ
diff --git a/website/public/images/pets/tidefang.png b/website/public/images/pets/tidefang.png
new file mode 100644
index 00000000..426535f6
Binary files /dev/null and b/website/public/images/pets/tidefang.png differ
diff --git a/website/public/images/pets/umbral-bulwark.png b/website/public/images/pets/umbral-bulwark.png
new file mode 100644
index 00000000..b93c8743
Binary files /dev/null and b/website/public/images/pets/umbral-bulwark.png differ
diff --git a/website/public/llms.txt b/website/public/llms.txt
index f8117313..fe0a1816 100644
--- a/website/public/llms.txt
+++ b/website/public/llms.txt
@@ -1,25 +1,48 @@
 # CryptoPets
 
-> A fully on-chain creature collection and battle game. Mint, breed, train, and
-> battle pet NFTs across Ethereum and Solana — playable on web and mobile.
+> A creature collection and battle game where the pets are NFTs. Mint, breed,
+> train and battle across Ethereum and Solana — on web and mobile.
 
 This is the marketing landing site. The playable app lives at a separate URL
-(see Links). Pets are NFTs held in the player's own wallet — mintable, tradable,
-and transferable independent of the app.
+(see Links). Pets and items are NFTs held in the player's own wallet — mintable,
+tradable, and transferable independent of the app.
 
 ## Overview
 
-- **What it is:** on-chain pet collection + tactical battle game (NFTs).
-- **Chains:** Ethereum and Solana, with additional rollups planned through Q3.
-- **Wallets:** MetaMask, Phantom, or social login.
+- **What it is:** on-chain pet collection and tactical battle game (NFTs).
+- **Chains:** Ethereum and Solana. Pets, breeding and battles run on both;
+  equipment and item NFTs are on Ethereum today.
+- **Wallets:** MetaMask on Ethereum, Phantom on Solana.
 - **Platforms:** web and mobile.
 
 ## Gameplay
 
-- **Connect** any wallet (MetaMask, Phantom, social login).
-- **Mint** a pet from the egg pool and roll for a rare trait.
-- **Train** — level up, breed new bloodlines, unlock signature abilities.
-- **Battle** rivals in the arena and climb the global leaderboard.
+- **Connect** the wallet you already have.
+- **Hatch** a starter pet whose traits come from on-chain randomness.
+- **Raise** it — level up, train stats, equip gear, breed bloodlines, marry a
+  partner pet (which unlocks a private thread between the two owners).
+- **Battle** rivals in the arena and climb the season leaderboard.
+
+## Provably fair battles
+
+- Defending requires a wallet-signed authorization naming the pet, the level band,
+  the exact rule set, a validity window and a daily cap. A pet cannot be dragged
+  into a fight its owner did not agree to.
+- Each battle is seeded from a public randomness beacon round committed **before**
+  the fight resolves, so no party can grind the roll.
+- Every result is a signed receipt over the exact inputs it used, and batches of
+  receipts are committed to a Merkle root written on chain.
+- An open-source verifier replays any receipt independently and reports seven
+  checks separately: seed derivation, operator signature, beacon signature,
+  combat replay, progression, equipment and hash-chain continuity. It needs no
+  account and no access to the project's servers.
+
+## Rewards
+
+- Seasons pay CPET to the top of the leaderboard, claimed against an on-chain
+  Merkle root with per-wallet and per-season ceilings.
+- CPET has a fixed supply and no mint function, so the total is checkable by
+  anyone and cannot be inflated later.
 
 ## Rarity tiers
 
@@ -30,24 +53,35 @@ and transferable independent of the app.
 
 ## Roadmap
 
-- Q1 — Genesis Drop (shipped): genesis mint, socials, first 10k supply.
-- Q2 — Arena (shipped): battle system v1, leaderboards, weekly tournaments.
-- Q3 — Bloodlines (in progress): breeding, cross-chain support, new rarity tier.
-- Q4 — Marketplace 2.0 (planned): native P2P trades, mobile app, guild system.
+Phases, not dates.
+
+- 01 Foundation (shipped): dual-chain minting, breeding and bloodlines, marriage,
+  level up, train, rename, transfer.
+- 02 Provable Arena (shipped): beacon-seeded battles, signed and chain-anchored
+  receipts, open-source public verifier.
+- 03 Progression (in progress): leaderboard and seasons, CPET season rewards,
+  equipment and item NFTs.
+- 04 Expansion (planned): daily quests, team battles, pet and item marketplace.
+
+## Built with
+
+Ethereum, Solana, Base, Pyth Entropy, Switchboard, drand, Metaplex, The Graph.
 
 ## Links
 
 - [Play the app](https://cryptopets.vercel.app)
 - [Source code (GitHub)](https://github.com/radcrew/do-not-stop)
-- [Features](/#features)
+- [Receipt verifier](https://github.com/radcrew/do-not-stop/tree/main/verifier)
 - [How to play](/#how)
+- [Features](/#features)
 - [Pets](/#pets)
+- [Provably fair](/#proof)
 - [Roadmap](/#roadmap)
 - [FAQ](/#faq)
 
-## Optional
+## Notes
 
-- Contracts are independently audited; audit reports are linked in the docs and
-  updated on every major release.
 - Connecting a wallet is free; mint price varies per drop and is announced ahead
-  of time on community channels (Discord, Twitter).
+  of time on community channels.
+- Pets and items are tradable assets and seasons pay rewards to the top of the
+  leaderboard. This is a game you own a piece of, not an income stream.
diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
index dd9a2e25..c49026b1 100644
--- a/website/src/app/layout.tsx
+++ b/website/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import type { ReactNode } from 'react';
 import { Inter, Orbitron } from 'next/font/google';
 
+import { SITE_URL } from '@/lib/siteUrl';
 import '../styles/globals.css';
 
 const orbitron = Orbitron({
@@ -17,14 +18,67 @@ const inter = Inter({
   display: 'swap',
 });
 
+const TITLE = 'Crypto Pets';
+const DESCRIPTION =
+  'Collect, breed and battle NFT pets on Ethereum and Solana. Every battle settles from a committed seed and ships with a receipt anyone can replay.';
+
 export const metadata: Metadata = {
-  title: 'Crypto Pets',
-  description: 'Collect, battle and breed unique on-chain pets in the ultimate Crypto Pets adventure.',
+  // Required for Next to resolve the relative URLs below into absolute ones.
+  metadataBase: new URL(SITE_URL),
+  title: {
+    default: TITLE,
+    template: '%s · Crypto Pets',
+  },
+  description: DESCRIPTION,
+  applicationName: 'Crypto Pets',
+  keywords: [
+    'NFT game',
+    'on-chain game',
+    'pet battler',
+    'Ethereum',
+    'Solana',
+    'provably fair',
+    'blockchain gaming',
+  ],
+  alternates: { canonical: '/' },
+  openGraph: {
+    type: 'website',
+    url: '/',
+    siteName: 'Crypto Pets',
+    title: TITLE,
+    description: DESCRIPTION,
+    locale: 'en_US',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: TITLE,
+    description: DESCRIPTION,
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: { index: true, follow: true, 'max-image-preview': 'large' },
+  },
 };
 
+/* Runs before first paint. Reveal targets start hidden only once this class is
+   present, so a blocked or failed bundle degrades to a fully visible page
+   instead of a blank one below the fold. */
+const REVEAL_GUARD = "document.documentElement.classList.add('js-reveal')";
+
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={`${orbitron.variable} ${inter.variable}`}>
+    /* The guard above mutates this element's class list before React hydrates,
+       so the server markup and the client tree disagree on className by design.
+       Without this, that shows up as a hydration mismatch on every load. */
+    <html
+      lang="en"
+      className={`${orbitron.variable} ${inter.variable}`}
+      suppressHydrationWarning
+    >
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: REVEAL_GUARD }} />
+      </head>
       <body>{children}</body>
     </html>
   );
diff --git a/website/src/app/opengraph-image.tsx b/website/src/app/opengraph-image.tsx
new file mode 100644
index 00000000..a3da2ded
--- /dev/null
+++ b/website/src/app/opengraph-image.tsx
@@ -0,0 +1,105 @@
+import { ImageResponse } from 'next/og';
+
+export const alt = 'Crypto Pets - collect, battle and breed on-chain pets';
+export const size = { width: 1200, height: 630 };
+export const contentType = 'image/png';
+
+/**
+ * Generated at build time rather than checked in as a binary, so the card cannot
+ * drift out of sync with the copy it quotes.
+ *
+ * Satori (which renders this) supports only a subset of CSS: flexbox but not
+ * grid, and no `background-clip: text`. The neon gradient the page uses on its
+ * headline is therefore approximated here with solid accent colours and a
+ * gradient rule, rather than gradient-filled type.
+ */
+export default function OpengraphImage() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          padding: '72px 80px',
+          backgroundColor: '#050812',
+          backgroundImage:
+            'radial-gradient(900px circle at 15% 0%, rgba(155,100,255,0.30), transparent 55%), radial-gradient(760px circle at 92% 96%, rgba(41,168,255,0.24), transparent 55%)',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+          <div
+            style={{
+              width: 14,
+              height: 14,
+              borderRadius: 999,
+              backgroundColor: '#6cf6c5',
+            }}
+          />
+          <div
+            style={{
+              fontSize: 24,
+              letterSpacing: 6,
+              textTransform: 'uppercase',
+              color: '#b6e2ff',
+            }}
+          >
+            On-Chain Pet Battler
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <div
+            style={{
+              fontSize: 82,
+              fontWeight: 800,
+              lineHeight: 1.05,
+              letterSpacing: -1,
+              color: '#f6f3ff',
+            }}
+          >
+            Collect, Battle &amp; Breed
+          </div>
+          <div
+            style={{
+              fontSize: 82,
+              fontWeight: 800,
+              lineHeight: 1.05,
+              letterSpacing: -1,
+              color: '#b58cff',
+            }}
+          >
+            Your Dream Pets
+          </div>
+          <div
+            style={{
+              width: 220,
+              height: 5,
+              marginTop: 28,
+              borderRadius: 4,
+              backgroundImage: 'linear-gradient(90deg, #7dd6ff, #b58cff 60%, #ff7bcb)',
+            }}
+          />
+        </div>
+
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'flex-end',
+          }}
+        >
+          <div style={{ fontSize: 30, color: 'rgba(195,210,255,0.82)', maxWidth: 720 }}>
+            Every battle settles from a committed seed, with a receipt anyone can replay.
+          </div>
+          <div style={{ fontSize: 26, color: '#7dd6ff', letterSpacing: 2 }}>
+            Ethereum · Solana
+          </div>
+        </div>
+      </div>
+    ),
+    size,
+  );
+}
diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
index 81b5f118..1fee5f13 100644
--- a/website/src/app/page.tsx
+++ b/website/src/app/page.tsx
@@ -9,9 +9,9 @@ import {
   Hero,
   HowItWorks,
   Pets,
+  Proof,
   Roadmap,
   Stats,
-  Testimonials,
 } from '@/components/landing';
 
 const LandingPage = () => (
@@ -24,7 +24,7 @@ const LandingPage = () => (
       <Stats />
       <Cta />
       <Roadmap />
-      <Testimonials />
+      <Proof />
       <Faq />
       <Backers />
       <Community />
diff --git a/website/src/app/robots.ts b/website/src/app/robots.ts
new file mode 100644
index 00000000..ec46707f
--- /dev/null
+++ b/website/src/app/robots.ts
@@ -0,0 +1,11 @@
+import type { MetadataRoute } from 'next';
+
+import { SITE_URL } from '@/lib/siteUrl';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: { userAgent: '*', allow: '/' },
+    sitemap: `${SITE_URL}/sitemap.xml`,
+    host: SITE_URL,
+  };
+}
diff --git a/website/src/app/sitemap.ts b/website/src/app/sitemap.ts
new file mode 100644
index 00000000..ce3d7113
--- /dev/null
+++ b/website/src/app/sitemap.ts
@@ -0,0 +1,19 @@
+import type { MetadataRoute } from 'next';
+
+import { SITE_URL } from '@/lib/siteUrl';
+
+/**
+ * One entry: the landing page is a single document. Its sections are anchors on
+ * that document, not separate URLs, and listing them would advertise pages that
+ * do not exist.
+ */
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: SITE_URL,
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 1,
+    },
+  ];
+}
diff --git a/website/src/app/twitter-image.tsx b/website/src/app/twitter-image.tsx
new file mode 100644
index 00000000..e05006b9
--- /dev/null
+++ b/website/src/app/twitter-image.tsx
@@ -0,0 +1,3 @@
+/* Twitter reuses the Open Graph card; Next does not derive twitter:image from
+   opengraph-image on its own. */
+export { default, size, contentType, alt } from './opengraph-image';
diff --git a/website/src/components/common/NeonButton/NeonButton.css b/website/src/components/common/NeonButton/NeonButton.css
index dc724ae9..46da64aa 100644
--- a/website/src/components/common/NeonButton/NeonButton.css
+++ b/website/src/components/common/NeonButton/NeonButton.css
@@ -1,16 +1,18 @@
-/* Base palette = azure (default tone; no .tone-azure rule needed) */
+/* Base palette = azure (default tone; no .tone-azure rule needed).
+   Per-tone alphas differ on purpose — the more saturated hues need less of
+   themselves to read at the same weight — so each tone restates all three. */
 .neon-btn {
-  --btn-text: #8ed1ff;
-  --btn-border: rgb(30 157 255 / 50%);
-  --btn-glow: rgb(30 157 255 / 24%);
-  --btn-inner: rgb(30 157 255 / 14%);
-  --btn-highlight: rgb(255 255 255 / 3%);
+  --btn-text: var(--tone-azure-text);
+  --btn-border: rgb(var(--tone-azure-rgb) / 50%);
+  --btn-glow: rgb(var(--tone-azure-rgb) / 24%);
+  --btn-inner: rgb(var(--tone-azure-rgb) / 14%);
+  --btn-highlight: var(--surface-veil-1);
 
   position: relative;
   isolation: isolate;
   border: 1px solid var(--btn-border);
-  border-radius: 2px;
-  background: linear-gradient(180deg, rgb(5 13 30 / 92%), rgb(4 8 22 / 95%));
+  border-radius: var(--radius-xs);
+  background: var(--surface-control);
   color: var(--btn-text);
   font-weight: 700;
   letter-spacing: 0.95px;
@@ -20,12 +22,19 @@
     inset 0 0 12px var(--btn-inner),
     inset 0 0 24px var(--btn-highlight),
     0 0 12px var(--btn-glow);
-  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
+  transition:
+    border-color var(--dur-base) var(--ease-out),
+    box-shadow var(--dur-base) var(--ease-out),
+    transform var(--dur-base) var(--ease-out);
 
   &::before {
     content: '';
     position: absolute;
     inset: 0;
+    /* Follows whatever radius the button is given. Without this the sheen is a
+       hard rectangle, which is invisible at the default 2px but shows square
+       corners the moment a caller rounds the button. */
+    border-radius: inherit;
     pointer-events: none;
     background: linear-gradient(90deg, transparent, rgb(255 255 255 / 6%), transparent);
   }
@@ -78,24 +87,24 @@
   }
 
   &.tone-emerald {
-    --btn-text: #9effd4;
-    --btn-border: rgb(0 255 157 / 48%);
-    --btn-glow: rgb(0 255 157 / 24%);
-    --btn-inner: rgb(0 255 157 / 14%);
+    --btn-text: var(--tone-emerald-text);
+    --btn-border: rgb(var(--tone-emerald-rgb) / 48%);
+    --btn-glow: rgb(var(--tone-emerald-rgb) / 24%);
+    --btn-inner: rgb(var(--tone-emerald-rgb) / 14%);
   }
 
   &.tone-amber {
-    --btn-text: #ffd07b;
-    --btn-border: rgb(255 181 67 / 44%);
-    --btn-glow: rgb(255 181 67 / 22%);
-    --btn-inner: rgb(255 181 67 / 12%);
+    --btn-text: var(--tone-amber-text);
+    --btn-border: rgb(var(--tone-amber-rgb) / 44%);
+    --btn-glow: rgb(var(--tone-amber-rgb) / 22%);
+    --btn-inner: rgb(var(--tone-amber-rgb) / 12%);
   }
 
   &.tone-cyan {
-    --btn-text: #86ebff;
-    --btn-border: rgb(0 247 255 / 36%);
-    --btn-glow: rgb(0 247 255 / 18%);
-    --btn-inner: rgb(0 247 255 / 10%);
+    --btn-text: var(--tone-cyan-text);
+    --btn-border: rgb(var(--tone-cyan-rgb) / 36%);
+    --btn-glow: rgb(var(--tone-cyan-rgb) / 18%);
+    --btn-inner: rgb(var(--tone-cyan-rgb) / 10%);
   }
 
   @media (prefers-reduced-motion: reduce) {
diff --git a/website/src/components/common/NeonCard/NeonCard.css b/website/src/components/common/NeonCard/NeonCard.css
index dedc27fa..fc44423c 100644
--- a/website/src/components/common/NeonCard/NeonCard.css
+++ b/website/src/components/common/NeonCard/NeonCard.css
@@ -1,12 +1,12 @@
 .neon-card {
   position: relative;
-  border-radius: var(--border-radius, 12px);
+  border-radius: var(--radius-lg);
   overflow: hidden;
   transition:
-    transform 180ms ease,
-    box-shadow 180ms ease,
-    border-color 180ms ease,
-    filter 180ms ease;
+    transform var(--dur-base) var(--ease-out),
+    box-shadow var(--dur-base) var(--ease-out),
+    border-color var(--dur-base) var(--ease-out),
+    filter var(--dur-base) var(--ease-out);
 
   &::after {
     content: '';
@@ -16,16 +16,18 @@
     pointer-events: none;
     opacity: 0;
     box-shadow:
-      inset 0 0 0 1px rgb(126 170 255 / 24%),
-      inset 0 0 22px rgb(86 136 255 / 12%);
-    transition: opacity 180ms ease, box-shadow 180ms ease;
+      inset 0 0 0 1px rgb(var(--border-rgb) / 24%),
+      inset 0 0 22px rgb(var(--border-rgb) / 12%);
+    transition:
+      opacity var(--dur-base) var(--ease-out),
+      box-shadow var(--dur-base) var(--ease-out);
   }
 
   &:hover::after {
     opacity: 1;
     box-shadow:
-      inset 0 0 0 1px rgb(148 191 255 / 42%),
-      inset 0 0 30px rgb(100 152 255 / 24%);
+      inset 0 0 0 1px rgb(var(--border-rgb) / 42%),
+      inset 0 0 30px rgb(var(--border-rgb) / 24%);
   }
 
   &:hover {
@@ -41,8 +43,8 @@
   &:active::after {
     opacity: 1;
     box-shadow:
-      inset 0 0 0 1px rgb(120 170 255 / 36%),
-      inset 0 0 18px rgb(84 136 255 / 16%);
+      inset 0 0 0 1px rgb(var(--border-rgb) / 36%),
+      inset 0 0 18px rgb(var(--border-rgb) / 16%);
   }
 
   @media (prefers-reduced-motion: reduce) {
diff --git a/website/src/components/common/SpotlightGroup/SpotlightGroup.tsx b/website/src/components/common/SpotlightGroup/SpotlightGroup.tsx
new file mode 100644
index 00000000..0b4f98ac
--- /dev/null
+++ b/website/src/components/common/SpotlightGroup/SpotlightGroup.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import { useEffect, useRef, type HTMLAttributes } from 'react';
+
+import { hasFinePointer } from '@/lib/media';
+import { rafThrottle } from '@/lib/rafThrottle';
+
+/**
+ * Publishes the pointer's position over the hovered `[data-spotlight]` descendant
+ * as `--mx` / `--my`, in px relative to that element's own box.
+ *
+ * A single delegated listener on the group rather than one per card, and a thin
+ * client boundary so the section rendering the cards stays a server component.
+ *
+ * The layout read happens once per animation frame inside the rAF callback, not
+ * in the move handler — reading `getBoundingClientRect` per pointermove forces
+ * layout on every event, and pointermove fires far faster than the screen
+ * refreshes.
+ */
+export default function SpotlightGroup({
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const root = ref.current;
+    if (!root) return;
+
+    // A spotlight is a hover affordance; a coarse pointer has nothing to track.
+    if (!hasFinePointer()) return;
+
+    let target: HTMLElement | null = null;
+    let clientX = 0;
+    let clientY = 0;
+
+    const clear = (el: HTMLElement | null) => {
+      el?.style.removeProperty('--mx');
+      el?.style.removeProperty('--my');
+    };
+
+    const apply = rafThrottle(() => {
+      if (!target) return;
+      const rect = target.getBoundingClientRect();
+      target.style.setProperty('--mx', `${clientX - rect.left}px`);
+      target.style.setProperty('--my', `${clientY - rect.top}px`);
+    });
+
+    const onMove = (event: PointerEvent) => {
+      const next = (event.target as Element | null)?.closest<HTMLElement>('[data-spotlight]') ?? null;
+
+      if (next !== target) {
+        clear(target);
+        target = next;
+      }
+      if (!target) return;
+
+      clientX = event.clientX;
+      clientY = event.clientY;
+      apply();
+    };
+
+    const onLeave = () => {
+      clear(target);
+      target = null;
+    };
+
+    root.addEventListener('pointermove', onMove, { passive: true });
+    root.addEventListener('pointerleave', onLeave, { passive: true });
+
+    return () => {
+      root.removeEventListener('pointermove', onMove);
+      root.removeEventListener('pointerleave', onLeave);
+      apply.cancel();
+    };
+  }, []);
+
+  return (
+    <div ref={ref} {...props}>
+      {children}
+    </div>
+  );
+}
diff --git a/website/src/components/common/SpotlightGroup/index.ts b/website/src/components/common/SpotlightGroup/index.ts
new file mode 100644
index 00000000..3c5229aa
--- /dev/null
+++ b/website/src/components/common/SpotlightGroup/index.ts
@@ -0,0 +1 @@
+export { default } from './SpotlightGroup';
diff --git a/website/src/components/common/index.ts b/website/src/components/common/index.ts
index ef65cd96..bc1330a4 100644
--- a/website/src/components/common/index.ts
+++ b/website/src/components/common/index.ts
@@ -1,2 +1,3 @@
 export { default as NeonButton } from './NeonButton';
 export { default as NeonCard } from './NeonCard';
+export { default as SpotlightGroup } from './SpotlightGroup';
diff --git a/website/src/components/landing/Backers/Backers.css b/website/src/components/landing/Backers/Backers.css
index ee1b7439..81667b07 100644
--- a/website/src/components/landing/Backers/Backers.css
+++ b/website/src/components/landing/Backers/Backers.css
@@ -1,8 +1,7 @@
 .backers {
   padding: var(--section-pad-block-band) 0;
-  background: rgb(5 8 18 / 86%);
-  border-top: 1px solid rgb(96 123 255 / 18%);
-  border-bottom: 1px solid rgb(96 123 255 / 18%);
+  background: rgb(var(--surface-void-rgb) / 86%);
+  border-block: 1px solid rgb(var(--border-rgb) / 18%);
   text-align: center;
   overflow: hidden;
 
@@ -12,8 +11,8 @@
     font-weight: 700;
     letter-spacing: 2.4px;
     text-transform: uppercase;
-    color: rgb(180 200 255 / 55%);
-    margin: 0 0 14px;
+    color: var(--text-dim);
+    margin: 0 0 18px;
     padding-inline: var(--landing-gutter);
   }
 
@@ -21,45 +20,55 @@
     position: relative;
     width: 100%;
     overflow: hidden;
-    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
     -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
+            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
 
-    &:hover .row { animation-play-state: paused; }
+    &:hover .row {
+      animation-play-state: paused;
+    }
   }
 
+  /* Two identical lists side by side; translating the pair by exactly half its
+     width lands the second copy where the first began, so the loop has no seam. */
   & .row {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: inline-flex;
-    align-items: center;
-    gap: 56px;
-    animation: backers-scroll 28s linear infinite;
-    white-space: nowrap;
+    display: flex;
     width: max-content;
+    animation: backers-scroll 32s linear infinite;
+
+    & ul {
+      display: flex;
+      align-items: center;
+      gap: 56px;
+      list-style: none;
+      margin: 0;
+      padding-inline: 28px;
+    }
 
     & li {
       font-family: var(--title-font);
       font-size: 1.05rem;
       letter-spacing: 1.2px;
       text-transform: uppercase;
+      white-space: nowrap;
       color: rgb(220 230 255 / 80%);
-      text-shadow: 0 0 10px rgb(118 154 255 / 35%), 0 0 22px rgb(118 154 255 / 18%);
-      transition: color 180ms ease, text-shadow 180ms ease;
+      text-shadow:
+        0 0 10px rgb(var(--border-rgb) / 35%),
+        0 0 22px rgb(var(--border-rgb) / 18%);
+      transition:
+        color var(--dur-base) var(--ease-out),
+        text-shadow var(--dur-base) var(--ease-out);
 
       &:hover {
-        color: #ffffff;
-        text-shadow: 0 0 12px rgb(168 198 255 / 70%), 0 0 28px rgb(118 154 255 / 45%);
+        color: var(--text-on-accent);
+        text-shadow:
+          0 0 12px rgb(var(--neon-cyan-rgb) / 70%),
+          0 0 28px rgb(var(--border-rgb) / 45%);
       }
     }
   }
 }
 
 @keyframes backers-scroll {
-  from { transform: translateX(0); }
-  to { transform: translateX(-50%); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .backers .row { animation: none; }
+  from { translate: 0; }
+  to { translate: -50%; }
 }
diff --git a/website/src/components/landing/Backers/index.tsx b/website/src/components/landing/Backers/index.tsx
index 519c7934..0fc15172 100644
--- a/website/src/components/landing/Backers/index.tsx
+++ b/website/src/components/landing/Backers/index.tsx
@@ -1,21 +1,26 @@
-import { BACKERS } from '@/content/landing';
+import { BACKERS, BACKERS_LABEL } from '@/content/landing';
 import './Backers.css';
 
-const Backers = () => {
-  const loop = [...BACKERS, ...BACKERS];
-
-  return (
-    <section className="backers" aria-label="Powered by">
-      <p className="label">Powered by &amp; built with</p>
-      <div className="marquee">
-        <ul className="row">
-          {loop.map(({ name }, idx) => (
-            <li key={`${name}-${idx}`}>{name}</li>
+const Backers = () => (
+  <section className="backers" aria-label="Powered by">
+    <p className="label" data-reveal="up">{BACKERS_LABEL}</p>
+    <div className="marquee" data-reveal="fade">
+      <div className="row">
+        <ul>
+          {BACKERS.map(({ name }) => (
+            <li key={name}>{name}</li>
+          ))}
+        </ul>
+        {/* The loop needs a second copy to scroll seamlessly, but a screen reader
+            should not hear the list twice. */}
+        <ul aria-hidden="true">
+          {BACKERS.map(({ name }) => (
+            <li key={name}>{name}</li>
           ))}
         </ul>
       </div>
-    </section>
-  );
-};
+    </div>
+  </section>
+);
 
 export default Backers;
diff --git a/website/src/components/landing/Community/Community.css b/website/src/components/landing/Community/Community.css
index bd1c28e9..40eee886 100644
--- a/website/src/components/landing/Community/Community.css
+++ b/website/src/components/landing/Community/Community.css
@@ -1,25 +1,53 @@
 .community {
   & .block {
+    position: relative;
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
     gap: 48px;
     align-items: center;
-    padding: 36px;
-    border-radius: 18px;
+    padding: 40px;
+    border-radius: var(--radius-xl);
     background:
-      radial-gradient(circle at 8% 10%, rgb(155 100 255 / 22%), transparent 38%),
-      radial-gradient(circle at 92% 90%, rgb(80 184 255 / 18%), transparent 40%),
-      linear-gradient(180deg, rgb(10 14 28 / 92%), rgb(7 11 24 / 96%));
-    border: 1px solid rgb(118 154 255 / 24%);
-    box-shadow: 0 0 28px rgb(118 154 255 / 12%), inset 0 0 32px rgb(55 68 148 / 10%);
+      radial-gradient(circle at 8% 10%, rgb(var(--wash-violet-rgb) / 22%), transparent 38%),
+      radial-gradient(circle at 92% 90%, rgb(var(--rarity-rare-rgb) / 18%), transparent 40%),
+      linear-gradient(180deg, var(--surface-card-top), var(--surface-card-bottom));
+    border: 1px solid rgb(var(--border-rgb) / 24%);
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 7%),
+      var(--glow-inset-lg),
+      var(--elev-3);
+
+    /* Static gradient edge. The one orbiting border on the page belongs to the
+       CTA panel; repeating it here would flatten that emphasis. */
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: 1px;
+      pointer-events: none;
+      background: linear-gradient(
+        135deg,
+        rgb(var(--neon-violet-rgb) / 55%) 0%,
+        transparent 40%,
+        transparent 62%,
+        rgb(var(--neon-cyan-rgb) / 45%) 100%
+      );
+      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+      -webkit-mask-composite: xor;
+              mask-composite: exclude;
+    }
   }
 
   & .copy {
+    position: relative;
+
     & .section-title { margin-bottom: 14px; }
     & .section-subtitle { margin: 22px 0 0; }
   }
 
   & .chips {
+    position: relative;
     list-style: none;
     margin: 0;
     padding: 0;
@@ -29,52 +57,77 @@
   }
 
   & .chip {
+    --brand-rgb: var(--border-rgb);
+
+    position: relative;
     display: flex;
     align-items: center;
     gap: 12px;
-    padding: 14px 16px;
-    border-radius: 10px;
-    background: rgb(255 255 255 / 3%);
-    border: 1px solid rgb(118 154 255 / 22%);
+    padding: 15px 16px;
+    border-radius: var(--radius-md);
+    background: var(--surface-veil-1);
+    border: 1px solid rgb(var(--brand-rgb) / 24%);
     text-decoration: none;
-    color: #eaf0ff;
-    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
+    color: var(--text-bright);
+    overflow: hidden;
+    transition:
+      translate var(--dur-base) var(--ease-out),
+      border-color var(--dur-base) var(--ease-out),
+      box-shadow var(--dur-base) var(--ease-out),
+      background var(--dur-base) var(--ease-out);
 
-    &:hover {
-      transform: translateY(-2px);
-      background: rgb(255 255 255 / 5%);
+    /* Brand wash that rises from the bottom edge on hover. */
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background: linear-gradient(0deg, rgb(var(--brand-rgb) / 20%), transparent 62%);
+      opacity: 0;
+      transition: opacity var(--dur-slow) var(--ease-out);
     }
 
-    &.discord {
-      &:hover { border-color: rgb(88 101 242 / 55%); box-shadow: 0 0 18px rgb(88 101 242 / 35%); }
-      & .chip-icon { color: #5865f2; filter: drop-shadow(0 0 8px rgb(88 101 242 / 55%)); }
-    }
-    &.twitter {
-      &:hover { border-color: rgb(255 255 255 / 45%); box-shadow: 0 0 18px rgb(255 255 255 / 18%); }
-      & .chip-icon { color: #ffffff; filter: drop-shadow(0 0 8px rgb(255 255 255 / 35%)); }
-    }
-    &.telegram {
-      &:hover { border-color: rgb(41 182 246 / 55%); box-shadow: 0 0 18px rgb(41 182 246 / 38%); }
-      & .chip-icon { color: #29b6f6; filter: drop-shadow(0 0 8px rgb(41 182 246 / 55%)); }
+    &:hover {
+      translate: 0 -3px;
+      background: var(--surface-veil-2);
+      border-color: rgb(var(--brand-rgb) / 62%);
+      box-shadow: 0 0 20px rgb(var(--brand-rgb) / 34%), var(--elev-2);
+
+      &::before { opacity: 1; }
     }
-    &.youtube {
-      &:hover { border-color: rgb(255 0 51 / 55%); box-shadow: 0 0 18px rgb(255 0 51 / 38%); }
-      & .chip-icon { color: #ff0033; filter: drop-shadow(0 0 8px rgb(255 0 51 / 55%)); }
+
+    &:focus-visible {
+      outline: 2px solid rgb(var(--brand-rgb) / 65%);
+      outline-offset: 2px;
     }
+
+    &.discord { --brand-rgb: 88 101 242; }
+    &.twitter { --brand-rgb: 255 255 255; }
+    &.telegram { --brand-rgb: 41 182 246; }
+    &.youtube { --brand-rgb: 255 0 51; }
   }
 
   & .chip-icon {
+    position: relative;
     flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 36px;
-    height: 36px;
+    width: 42px;
+    height: 42px;
+    border-radius: var(--radius-md);
+    background: rgb(var(--brand-rgb) / 12%);
+    color: rgb(var(--brand-rgb));
+    filter: drop-shadow(0 0 8px rgb(var(--brand-rgb) / 55%));
 
-    & svg { width: 100%; height: 100%; }
+    & svg {
+      width: 62%;
+      height: 62%;
+    }
   }
 
   & .chip-text {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: 2px;
@@ -85,13 +138,13 @@
       font-size: 0.92rem;
       letter-spacing: 0.6px;
       text-transform: uppercase;
-      color: #f6f3ff;
+      color: var(--text-title);
     }
 
     & span {
       font-family: var(--content-font);
       font-size: 0.82rem;
-      color: rgb(195 210 255 / 70%);
+      color: var(--text-muted);
     }
   }
 }
@@ -105,5 +158,7 @@
 }
 
 @media (max-width: 480px) {
-  .community .chips { grid-template-columns: 1fr; }
+  .community .chips {
+    grid-template-columns: 1fr;
+  }
 }
diff --git a/website/src/components/landing/Community/index.tsx b/website/src/components/landing/Community/index.tsx
index a7187509..80aeca55 100644
--- a/website/src/components/landing/Community/index.tsx
+++ b/website/src/components/landing/Community/index.tsx
@@ -1,24 +1,26 @@
-import { COMMUNITIES } from '@/content/landing';
+import { COMMUNITIES, SECTION_COPY } from '@/content/landing';
 import Icon from './Icon';
 import './Community.css';
 
+const { title, subtitle } = SECTION_COPY.community;
+
 const Community = () => (
-  <section className="landing-section community" id="community">
-    <div className="block">
+  <section className="landing-section community" id="community" data-wash="cyan">
+    <div className="block" data-reveal="scale">
       <div className="copy">
-        <h3 className="section-title">Join the Pack</h3>
-        <p className="section-subtitle">Strategy threads, alpha drops, and degen chatter — pick your channel.</p>
+        <h2 className="section-title">{title}</h2>
+        <p className="section-subtitle">{subtitle}</p>
       </div>
-      <ul className="chips">
-        {COMMUNITIES.map(({ name, members, color, href }) => (
-          <li key={name}>
+      <ul className="chips" data-reveal-stagger="70">
+        {COMMUNITIES.map(({ name, blurb, color, href }) => (
+          <li key={name} data-reveal="up">
             <a href={href ?? '#'} target="_blank" rel="noopener noreferrer" className={`chip ${color}`}>
               <span className="chip-icon" aria-hidden="true">
                 <Icon brand={color} />
               </span>
               <span className="chip-text">
                 <strong>{name}</strong>
-                <span>{members}</span>
+                <span>{blurb}</span>
               </span>
             </a>
           </li>
diff --git a/website/src/components/landing/Cta/Cta.css b/website/src/components/landing/Cta/Cta.css
index 4df1dadb..85a4b623 100644
--- a/website/src/components/landing/Cta/Cta.css
+++ b/website/src/components/landing/Cta/Cta.css
@@ -1,20 +1,64 @@
+/* Registered locally rather than reused from Hero.css: a component should not
+   depend on another component's stylesheet having been loaded first. */
+@property --panel-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
 .cta {
   padding: var(--section-pad-block-band) var(--landing-gutter);
   background:
-    radial-gradient(circle at 12% 50%, rgb(108 244 197 / 18%), transparent 38%),
-    radial-gradient(circle at 88% 50%, rgb(155 100 255 / 26%), transparent 40%),
-    linear-gradient(90deg, rgb(10 14 28 / 95%), rgb(7 11 24 / 95%));
-  border-top: 1px solid rgb(118 154 255 / 22%);
-  border-bottom: 1px solid rgb(118 154 255 / 22%);
+    radial-gradient(circle at 12% 50%, rgb(var(--neon-emerald-rgb) / 16%), transparent 38%),
+    radial-gradient(circle at 88% 50%, rgb(var(--wash-violet-rgb) / 24%), transparent 40%),
+    linear-gradient(90deg, var(--surface-card-top), var(--surface-card-bottom));
+  border-block: 1px solid rgb(var(--border-rgb) / 22%);
 
   & .inner {
+    position: relative;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
-    gap: 24px;
+    gap: 28px;
     max-width: 1100px;
     margin: 0 auto;
+    padding: 34px clamp(24px, 4vw, 44px);
+    border-radius: var(--radius-xl);
+    background: linear-gradient(
+      180deg,
+      rgb(var(--surface-void-rgb) / 62%),
+      rgb(var(--surface-void-rgb) / 40%)
+    );
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 8%),
+      var(--elev-3);
+
+    /* Orbiting conic border, masked to the outline. The panel is the page's
+       primary conversion point, so it gets the one continuously moving edge on
+       the page below the fold. */
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: 1px;
+      pointer-events: none;
+      background: conic-gradient(
+        from var(--panel-angle),
+        rgb(var(--border-rgb) / 30%) 0deg,
+        var(--neon-emerald) 60deg,
+        var(--neon-cyan) 130deg,
+        rgb(var(--border-rgb) / 30%) 210deg,
+        rgb(var(--border-rgb) / 30%) 360deg
+      );
+      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+      -webkit-mask-composite: xor;
+              mask-composite: exclude;
+      animation: cta-panel-orbit 7s linear infinite;
+    }
   }
 
   & .eyebrow {
@@ -24,35 +68,46 @@
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
-    color: #6cf6c5;
-    padding: 4px 10px;
-    border: 1px solid rgb(108 246 197 / 50%);
-    border-radius: 999px;
-    margin-bottom: 10px;
-    box-shadow: 0 0 14px rgb(108 246 197 / 28%);
+    color: var(--neon-emerald);
+    padding: 4px 12px;
+    border: 1px solid rgb(var(--neon-emerald-rgb) / 50%);
+    border-radius: var(--radius-pill);
+    margin-bottom: 12px;
+    box-shadow: 0 0 14px rgb(var(--neon-emerald-rgb) / 26%);
   }
 
-  & h3 {
+  & h2 {
     font-family: var(--title-font);
-    margin: 0 0 6px;
+    margin: 0 0 8px;
     font-size: clamp(1.4rem, 2.6vw, 2rem);
-    color: #f6f3ff;
+    color: var(--text-title);
     letter-spacing: 0.6px;
     text-transform: uppercase;
-    text-shadow: 0 0 14px rgb(174 150 255 / 35%);
+    text-shadow: var(--glow-text-md);
   }
 
   & p {
     font-family: var(--content-font);
     margin: 0;
-    color: rgb(195 210 255 / 80%);
+    color: var(--text-body);
     font-size: 1rem;
   }
 }
 
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .cta .inner {
+    background: rgb(var(--surface-void-rgb) / 88%);
+  }
+}
+
+@keyframes cta-panel-orbit {
+  to { --panel-angle: 360deg; }
+}
+
 @media (max-width: 768px) {
   .cta .inner {
     justify-content: center;
     text-align: center;
+    padding: 28px 20px;
   }
 }
diff --git a/website/src/components/landing/Cta/index.tsx b/website/src/components/landing/Cta/index.tsx
index 08cf0485..a93265a8 100644
--- a/website/src/components/landing/Cta/index.tsx
+++ b/website/src/components/landing/Cta/index.tsx
@@ -1,19 +1,20 @@
 'use client';
 
+import { CTA_BAND } from '@/content/landing';
 import { openApp } from '@/lib/openApp';
 import { NeonButton } from '../../common';
 import './Cta.css';
 
 const Cta = () => (
   <section className="cta" aria-label="Get started">
-    <div className="inner">
+    <div className="inner" data-reveal="scale">
       <div>
-        <span className="eyebrow">Next Drop · Live Soon</span>
-        <h3>Don&apos;t miss the next mint.</h3>
-        <p>Connect your wallet now and claim your spot on the whitelist.</p>
+        <span className="eyebrow">{CTA_BAND.eyebrow}</span>
+        <h2>{CTA_BAND.title}</h2>
+        <p>{CTA_BAND.body}</p>
       </div>
       <NeonButton type="button" tone="emerald" onClick={openApp}>
-        Connect Wallet
+        {CTA_BAND.action}
       </NeonButton>
     </div>
   </section>
diff --git a/website/src/components/landing/Faq/Faq.css b/website/src/components/landing/Faq/Faq.css
index 2f5a45d4..b3ba1780 100644
--- a/website/src/components/landing/Faq/Faq.css
+++ b/website/src/components/landing/Faq/Faq.css
@@ -1,30 +1,60 @@
 .faq {
+  /* Lets `block-size: auto` be interpolated, which is what makes a native
+     <details> animate open without JS measuring the panel. Scoped rather than
+     set on :root so it cannot surprise unrelated layout. */
+  interpolate-size: allow-keywords;
+
   & .list {
     display: flex;
     flex-direction: column;
-    max-width: 860px;
+    max-width: 880px;
   }
 
   & .item {
+    position: relative;
     background: transparent;
     border: none;
-    border-radius: 0;
-    padding: 22px 4px;
-    position: relative;
-    transition: background 200ms ease;
+    border-radius: var(--radius-md);
+    padding: 4px 18px;
+    transition: background var(--dur-slow) var(--ease-out);
 
-    & + .item {
-      border-top: 1px solid transparent;
-      background-image: linear-gradient(90deg, transparent, rgb(118 154 255 / 22%) 22%, rgb(184 140 255 / 22%) 50%, rgb(255 123 203 / 22%) 78%, transparent);
-      background-size: 100% 1px;
-      background-repeat: no-repeat;
-      background-position: top left;
+    /* Hairline between rows, spectrum-tinted, skipped before the first. */
+    & + .item::before {
+      content: '';
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline: 0;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgb(var(--border-rgb) / 26%) 22%,
+        rgb(var(--neon-violet-rgb) / 26%) 50%,
+        rgb(var(--neon-magenta-rgb) / 26%) 78%,
+        transparent
+      );
+    }
+
+    /* Accent bar that grows down the open row. */
+    &::after {
+      content: '';
+      position: absolute;
+      inset-block: 12px;
+      inset-inline-start: 0;
+      width: 2px;
+      border-radius: 2px;
+      background: var(--gradient-rail);
+      scale: 1 0;
+      transform-origin: center top;
+      transition: scale var(--dur-slow) var(--ease-out);
     }
 
     &[open] {
-      background-color: rgb(184 140 255 / 6%);
+      background: rgb(var(--neon-violet-rgb) / 7%);
+
+      &::after { scale: 1 1; }
 
-      & .chevron { transform: rotate(-135deg); }
+      & .chevron { rotate: -135deg; }
     }
 
     & summary {
@@ -34,38 +64,68 @@
       justify-content: space-between;
       align-items: center;
       gap: 14px;
+      padding-block: 20px;
       font-family: var(--title-font);
       font-size: 1.02rem;
       letter-spacing: 0.4px;
-      color: #f6f3ff;
-      transition: color 180ms ease, text-shadow 180ms ease;
+      color: var(--text-title);
+      transition:
+        color var(--dur-base) var(--ease-out),
+        text-shadow var(--dur-base) var(--ease-out);
 
       &::-webkit-details-marker { display: none; }
 
       &:hover {
         color: #d6e6ff;
-        text-shadow: 0 0 12px rgb(118 154 255 / 50%);
+        text-shadow: 0 0 12px rgb(var(--border-rgb) / 50%);
+      }
+
+      &:focus-visible {
+        outline: 2px solid rgb(var(--border-rgb) / 60%);
+        outline-offset: 2px;
+        border-radius: var(--radius-sm);
       }
     }
 
     & .chevron {
       flex: 0 0 auto;
-      width: 12px;
-      height: 12px;
-      border-right: 2px solid #b58cff;
-      border-bottom: 2px solid #b58cff;
-      transform: rotate(45deg);
-      transition: transform 200ms ease;
-      filter: drop-shadow(0 0 6px rgb(184 140 255 / 60%));
+      width: 11px;
+      height: 11px;
+      border-right: 2px solid var(--neon-violet);
+      border-bottom: 2px solid var(--neon-violet);
+      rotate: 45deg;
+      transition: rotate var(--dur-slow) var(--ease-spring);
+      filter: drop-shadow(0 0 6px rgb(var(--neon-violet-rgb) / 60%));
     }
 
     & p {
       font-family: var(--content-font);
-      margin: 12px 0 0;
+      margin: 0;
+      padding-block: 0 20px;
       font-size: 0.98rem;
       line-height: 1.65;
-      color: rgb(195 210 255 / 80%);
+      color: var(--text-body);
       max-width: 720px;
     }
   }
 }
+
+/* Animated disclosure, where the browser supports styling the generated content
+   box. Everything else gets the native instant open, which is the correct
+   degradation — the panel still opens, it just does not slide. */
+@supports selector(::details-content) {
+  .faq .item::details-content {
+    block-size: 0;
+    overflow: clip;
+    opacity: 0;
+    transition:
+      block-size var(--dur-slow) var(--ease-out),
+      opacity var(--dur-slow) var(--ease-out),
+      content-visibility var(--dur-slow) allow-discrete;
+  }
+
+  .faq .item[open]::details-content {
+    block-size: auto;
+    opacity: 1;
+  }
+}
diff --git a/website/src/components/landing/Faq/index.tsx b/website/src/components/landing/Faq/index.tsx
index d6ef2933..f620121f 100644
--- a/website/src/components/landing/Faq/index.tsx
+++ b/website/src/components/landing/Faq/index.tsx
@@ -1,13 +1,23 @@
-import { FAQS } from '@/content/landing';
+import { FAQS, SECTION_COPY } from '@/content/landing';
 import './Faq.css';
 
+const { title, subtitle } = SECTION_COPY.faq;
+
+/**
+ * A shared `name` makes the group an exclusive accordion: opening one item
+ * closes the rest, natively. No JS, so the section stays a server component and
+ * keeps working with the bundle blocked. Where `name` is unsupported the items
+ * stay independent — the previous behaviour, not a broken one.
+ */
+const GROUP = 'faq';
+
 const Faq = () => (
-  <section className="landing-section faq" id="faq">
-    <h3 className="section-title">Questions, Answered</h3>
-    <p className="section-subtitle">Everything you need to know before you mint your first pet.</p>
-    <div className="list">
+  <section className="landing-section faq" id="faq" data-wash="magenta">
+    <h2 className="section-title" data-reveal="up">{title}</h2>
+    <p className="section-subtitle" data-reveal="up">{subtitle}</p>
+    <div className="list" data-reveal-stagger="55">
       {FAQS.map(({ question, answer }, idx) => (
-        <details className="item" key={question} open={idx === 0}>
+        <details className="item" key={question} name={GROUP} open={idx === 0} data-reveal="up">
           <summary>
             <span>{question}</span>
             <span className="chevron" aria-hidden="true" />
diff --git a/website/src/components/landing/Features/Features.css b/website/src/components/landing/Features/Features.css
index f84c23df..b1778112 100644
--- a/website/src/components/landing/Features/Features.css
+++ b/website/src/components/landing/Features/Features.css
@@ -2,72 +2,128 @@
   & .grid {
     width: 100%;
     display: grid;
-    grid-template-columns: repeat(4, minmax(160px, 1fr));
+    /* Six tracks so a wide card can take four and a narrow one two, giving the
+       alternating bento rhythm without a second grid definition per row. */
+    grid-template-columns: repeat(6, minmax(0, 1fr));
     gap: 18px;
   }
 
   & .card {
+    --accent-rgb: var(--neon-violet-rgb);
+
+    position: relative;
     display: flex;
+    /* Every card lays out the same way regardless of span. Grid stretches both
+       cards in a row to equal height, so centring here lands their icons on the
+       same baseline; the previous column layout on narrow cards put one icon at
+       the top of the row and its neighbour's at mid-height. */
+    flex-direction: row;
     align-items: center;
-    gap: 18px;
-    padding: 28px;
-    color: #e7efff;
+    gap: 20px;
+    padding: 26px;
+    color: var(--text-bright);
     text-align: left;
-    box-shadow: inset 0 0 26px rgb(67 85 180 / 10%), 0 8px 22px rgb(0 0 0 / 38%), 0 3px 8px rgb(0 0 0 / 22%);
-    background: linear-gradient(180deg, rgb(8 12 26 / 90%) 0%, rgb(7 10 20 / 92%) 100%);
-    border: 1px solid rgb(145 93 255 / 58%);
-    position: relative;
+    background: var(--surface-card);
+    border: 1px solid rgb(var(--accent-rgb) / 46%);
+    box-shadow:
+      var(--glow-inset-md),
+      var(--elev-2),
+      var(--elev-1);
 
-    &:nth-child(2) { border-color: rgb(255 90 125 / 58%); }
-    &:nth-child(3) { border-color: rgb(41 168 255 / 58%); }
-    &:nth-child(4) { border-color: rgb(6 223 209 / 58%); }
+    /* Accent cycle. nth-child is exact here — every child of .grid is a card,
+       unlike the section washes this pattern used to drive. */
+    &:nth-child(2) { --accent-rgb: 255 90 125; }
+    &:nth-child(3) { --accent-rgb: 41 168 255; }
+    &:nth-child(4) { --accent-rgb: 6 223 209; }
 
+    /* Accent edge, masked to the border box so it lights the whole outline
+       rather than only the left rule the flat grid used. */
     &::before {
       content: '';
       position: absolute;
       inset: 0;
       border-radius: inherit;
-      border-left: 3px solid rgb(86 111 255 / 80%);
+      padding: 1px;
+      pointer-events: none;
+      background: linear-gradient(
+        135deg,
+        rgb(var(--accent-rgb) / 85%) 0%,
+        transparent 42%,
+        transparent 62%,
+        rgb(var(--accent-rgb) / 45%) 100%
+      );
+      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+      -webkit-mask-composite: xor;
+              mask-composite: exclude;
     }
 
-    &:nth-child(1)::before { border-left-color: #915dff; box-shadow: 0 0 16px rgb(145 93 255 / 40%); }
-    &:nth-child(2)::before { border-left-color: #ff5a7d; box-shadow: 0 0 16px rgb(255 90 125 / 38%); }
-    &:nth-child(3)::before { border-left-color: #29a8ff; box-shadow: 0 0 16px rgb(41 168 255 / 36%); }
-    &:nth-child(4)::before { border-left-color: #06dfd1; box-shadow: 0 0 16px rgb(6 223 209 / 36%); }
+    /* Span is the only thing the bento rhythm changes; layout stays uniform. */
+    &[data-span='wide'] { grid-column: span 4; }
+    &[data-span='narrow'] { grid-column: span 2; }
+  }
+
+  /* Cursor-tracked specular. Its own element rather than a pseudo: NeonCard
+     already owns ::after for the hover ring and the accent edge owns ::before. */
+  & .spot {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    background: radial-gradient(
+      240px circle at var(--mx, 50%) var(--my, 0%),
+      rgb(var(--accent-rgb) / 22%),
+      transparent 68%
+    );
+    opacity: 0;
+    transition: opacity var(--dur-slow) var(--ease-out);
   }
 
+  & .card:hover .spot {
+    opacity: 1;
+  }
+
+  /* The glyphs are transparent PNGs, so they float on an accent glow plate
+     rather than being framed. One size for every card, whatever its span. */
   & .icon {
+    position: relative;
     flex: 0 0 auto;
     width: 96px;
     height: 96px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    z-index: 1;
-    background: transparent;
+    display: grid;
+    place-items: center;
+    z-index: var(--z-raised);
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 6%;
+      border-radius: 26px;
+      background: radial-gradient(circle at 50% 45%, rgb(var(--accent-rgb) / 30%), transparent 70%);
+    }
 
     & img {
+      position: relative;
       width: 100%;
       height: 100%;
       object-fit: contain;
       display: block;
-      filter: drop-shadow(0 0 10px rgb(255 182 77 / 32%));
+      filter: drop-shadow(0 6px 14px rgb(0 0 0 / 45%));
     }
   }
 
   & .copy {
     position: relative;
-    z-index: 1;
+    z-index: var(--z-raised);
     flex: 1;
 
-    & h4 {
+    & h3 {
       font-family: var(--title-font);
       margin: 0 0 10px;
-      font-size: 1.35rem;
+      font-size: 1.18rem;
       font-weight: 800;
       text-transform: uppercase;
       letter-spacing: 0.6px;
+      color: var(--text-title);
     }
 
     & p {
@@ -75,15 +131,25 @@
       margin: 0;
       font-size: 1rem;
       line-height: 1.55;
-      color: rgb(195 210 255 / 80%);
+      color: var(--text-body);
     }
   }
+
 }
 
 @media (max-width: 1024px) {
-  .features .grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
+  .features .grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .features .card[data-span='wide'],
+  .features .card[data-span='narrow'] {
+    grid-column: span 1;
+  }
 }
 
 @media (max-width: 768px) {
-  .features .grid { grid-template-columns: 1fr; }
+  .features .grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
diff --git a/website/src/components/landing/Features/index.tsx b/website/src/components/landing/Features/index.tsx
index c83572a8..46a18c53 100644
--- a/website/src/components/landing/Features/index.tsx
+++ b/website/src/components/landing/Features/index.tsx
@@ -1,26 +1,38 @@
 import Image from 'next/image';
 
-import { FEATURES } from '@/content/landing';
-import { NeonCard } from '../../common';
+import { FEATURES, SECTION_COPY } from '@/content/landing';
+import { NeonCard, SpotlightGroup } from '../../common';
 import './Features.css';
 
+const { title: sectionTitle, subtitle } = SECTION_COPY.features;
+
+/** Bento rhythm: the first and last cards run wide, the middle pair narrow. */
+const isWide = (index: number) => index === 0 || index === FEATURES.length - 1;
+
 const Features = () => (
-  <section className="landing-section features" id="features">
-    <h3 className="section-title">What You Can Do</h3>
-    <p className="section-subtitle">Every pet is a fully on-chain asset — yours to grow, fight, and trade.</p>
-    <div className="grid">
-      {FEATURES.map(({ title, text, iconImage }) => (
-        <NeonCard key={title} className="card">
+  <section className="landing-section features" id="features" data-wash="violet">
+    <h2 className="section-title" data-reveal="up">{sectionTitle}</h2>
+    <p className="section-subtitle" data-reveal="up">{subtitle}</p>
+    <SpotlightGroup className="grid" data-reveal-stagger="90">
+      {FEATURES.map(({ title, text, iconImage }, index) => (
+        <NeonCard
+          key={title}
+          className="card"
+          data-span={isWide(index) ? 'wide' : 'narrow'}
+          data-spotlight
+          data-reveal="rise"
+        >
+          <span className="spot" aria-hidden="true" />
           <div className="icon" aria-hidden="true">
             {iconImage && <Image src={iconImage} alt="" width={96} height={96} />}
           </div>
           <div className="copy">
-            <h4>{title}</h4>
+            <h3>{title}</h3>
             <p>{text}</p>
           </div>
         </NeonCard>
       ))}
-    </div>
+    </SpotlightGroup>
   </section>
 );
 
diff --git a/website/src/components/landing/Footer/Footer.css b/website/src/components/landing/Footer/Footer.css
index 944497e3..5e8425ed 100644
--- a/website/src/components/landing/Footer/Footer.css
+++ b/website/src/components/landing/Footer/Footer.css
@@ -1,44 +1,64 @@
 .footer {
-  padding: 56px var(--landing-gutter) 28px;
-  background: rgb(5 8 18 / 96%);
-  border-top: 1px solid rgb(96 123 255 / 20%);
-  color: #eaf0ff;
+  position: relative;
+  padding: 64px var(--landing-gutter) 30px;
+  background: rgb(var(--surface-void-rgb) / 96%);
+  color: var(--text-bright);
+
+  /* Lit top edge instead of a flat rule, so the footer reads as the end of the
+     page rather than another band. */
+  &::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    height: 1px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgb(var(--border-rgb) / 45%) 20%,
+      rgb(var(--neon-violet-rgb) / 45%) 50%,
+      rgb(var(--border-rgb) / 45%) 80%,
+      transparent
+    );
+    box-shadow: 0 0 16px rgb(var(--glow-text-rgb) / 30%);
+  }
 
   & .grid {
     display: grid;
     grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
-    gap: 36px;
+    gap: 40px;
     align-items: start;
   }
 
   & .brand {
-    & h4 {
+    & h2 {
       font-family: var(--title-font);
-      margin: 0 0 8px;
-      color: #fff;
-      font-size: 1.3rem;
-      letter-spacing: 0.6px;
-      text-shadow: 0 0 12px rgb(174 150 255 / 35%);
+      margin: 0 0 10px;
+      font-size: 1.35rem;
+      letter-spacing: 0.8px;
+      text-transform: uppercase;
+      color: var(--text-title);
+      text-shadow: var(--glow-text-md);
     }
 
     & p {
       font-family: var(--content-font);
       margin: 0;
-      color: rgb(191 205 255 / 70%);
+      color: var(--text-muted);
       font-size: 0.98rem;
-      line-height: 1.55;
+      line-height: 1.6;
       max-width: 460px;
     }
   }
 
   & .col {
-    & h5 {
+    & h3 {
       font-family: var(--title-font);
-      margin: 0 0 12px;
-      font-size: 0.82rem;
-      letter-spacing: 1.6px;
+      margin: 0 0 14px;
+      font-size: 0.78rem;
+      letter-spacing: 1.8px;
       text-transform: uppercase;
-      color: rgb(200 215 255 / 70%);
+      color: var(--text-dim);
     }
 
     & ul {
@@ -47,37 +67,66 @@
       padding: 0;
       display: flex;
       flex-direction: column;
-      gap: 8px;
+      gap: 10px;
     }
 
     & a {
+      position: relative;
+      align-self: flex-start;
       font-family: var(--content-font);
       color: rgb(210 222 255 / 84%);
       font-size: 0.96rem;
-      transition: color 180ms ease, text-shadow 180ms ease;
+      transition:
+        color var(--dur-base) var(--ease-out),
+        text-shadow var(--dur-base) var(--ease-out);
+
+      /* Underline wipes in from the left rather than appearing whole. */
+      &::after {
+        content: '';
+        position: absolute;
+        inset-inline: 0;
+        inset-block-end: -3px;
+        height: 1px;
+        background: currentColor;
+        scale: 0 1;
+        transform-origin: left center;
+        transition: scale var(--dur-base) var(--ease-out);
+      }
 
       &:hover {
-        color: #b6e2ff;
-        text-shadow: 0 0 10px rgb(118 154 255 / 55%);
+        color: var(--text-accent);
+        text-shadow: 0 0 10px rgb(var(--border-rgb) / 55%);
+
+        &::after { scale: 1 1; }
+      }
+
+      &:focus-visible {
+        outline: 2px solid rgb(var(--border-rgb) / 60%);
+        outline-offset: 3px;
+        border-radius: 2px;
       }
     }
   }
 
   & .bottom {
-    margin-top: 24px;
-    padding-top: 16px;
-    border-top: 1px solid rgb(96 123 255 / 14%);
+    margin-block-start: 40px;
+    padding-block-start: 20px;
+    border-block-start: 1px solid rgb(var(--border-rgb) / 14%);
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 12px;
     font-family: var(--content-font);
     font-size: 0.82rem;
-    color: rgb(170 188 230 / 60%);
+    color: var(--text-dim);
 
     & .tag {
       letter-spacing: 0.6px;
       text-transform: uppercase;
+      padding: 4px 12px;
+      border-radius: var(--radius-pill);
+      border: 1px solid rgb(var(--border-rgb) / 22%);
+      background: var(--surface-veil-1);
     }
   }
 }
@@ -94,8 +143,9 @@
   .footer {
     & .grid {
       grid-template-columns: 1fr;
-      gap: 24px;
+      gap: 28px;
     }
+
     & .bottom {
       flex-direction: column;
       text-align: center;
diff --git a/website/src/components/landing/Footer/index.tsx b/website/src/components/landing/Footer/index.tsx
index fc956905..a7cce9a8 100644
--- a/website/src/components/landing/Footer/index.tsx
+++ b/website/src/components/landing/Footer/index.tsx
@@ -1,30 +1,15 @@
+import { FOOTER, NAV_LINKS, RESOURCE_LINKS } from '@/content/landing';
 import './Footer.css';
 
-const NAV_LINKS = [
-  { label: 'How It Works', href: '#how' },
-  { label: 'Features', href: '#features' },
-  { label: 'Pets', href: '#pets' },
-  { label: 'Roadmap', href: '#roadmap' },
-  { label: 'FAQ', href: '#faq' },
-  { label: 'Community', href: '#community' },
-];
-
-const META_LINKS = [
-  { label: 'About', href: '#' },
-  { label: 'Roadmap', href: '#' },
-  { label: 'Docs', href: '#' },
-  { label: 'Support', href: '#' },
-];
-
 const Footer = () => (
   <footer className="footer">
-    <div className="grid">
-      <div className="brand">
-        <h4>CryptoPet</h4>
-        <p>Build your dream pet roster, rule the arena, and trade legendary companions.</p>
+    <div className="grid" data-reveal-stagger>
+      <div className="brand" data-reveal="up">
+        <h2>{FOOTER.brand}</h2>
+        <p>{FOOTER.blurb}</p>
       </div>
-      <nav className="col" aria-label="Sections">
-        <h5>Explore</h5>
+      <nav className="col" aria-label="Sections" data-reveal="up">
+        <h3>{FOOTER.exploreHeading}</h3>
         <ul>
           {NAV_LINKS.map(({ label, href }) => (
             <li key={label}>
@@ -33,20 +18,27 @@ const Footer = () => (
           ))}
         </ul>
       </nav>
-      <nav className="col" aria-label="Resources">
-        <h5>Resources</h5>
+      <nav className="col" aria-label="Resources" data-reveal="up">
+        <h3>{FOOTER.resourcesHeading}</h3>
         <ul>
-          {META_LINKS.map(({ label, href }) => (
+          {RESOURCE_LINKS.map(({ label, href, external }) => (
             <li key={label}>
-              <a href={href}>{label}</a>
+              <a
+                href={href}
+                {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+              >
+                {label}
+              </a>
             </li>
           ))}
         </ul>
       </nav>
     </div>
     <div className="bottom">
-      <span>© {new Date().getFullYear()} CryptoPet. All rights reserved.</span>
-      <span className="tag">Built on-chain.</span>
+      <span>
+        © {new Date().getFullYear()} {FOOTER.copyrightHolder}. {FOOTER.rights}
+      </span>
+      <span className="tag">{FOOTER.tag}</span>
     </div>
   </footer>
 );
diff --git a/website/src/components/landing/Hero/Hero.css b/website/src/components/landing/Hero/Hero.css
index 05d91a2c..ec38fad3 100644
--- a/website/src/components/landing/Hero/Hero.css
+++ b/website/src/components/landing/Hero/Hero.css
@@ -1,3 +1,12 @@
+/* Registered so the CTA's conic border angle can be animated. Without @property
+   the angle is an unanimatable token and the ring simply sits still, which is
+   the intended degradation. */
+@property --cta-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
 .hero {
   display: flex;
   flex-direction: column;
@@ -8,30 +17,67 @@
   padding-inline: var(--landing-gutter);
   min-height: calc(100vh - var(--main-header-offset));
   min-height: calc(100dvh - var(--main-header-offset));
-  background-color: #070a14;
-  background-image:
-    linear-gradient(105deg, rgb(6 9 20 / 90%) 0%, rgb(6 9 20 / 48%) 40%, rgb(10 12 24 / 22%) 62%, transparent 82%),
-    linear-gradient(180deg, rgb(87 57 230 / 14%) 0%, rgb(10 12 24 / 76%) 100%),
-    url('/images/background.png');
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
+  background-color: var(--surface-base);
   position: relative;
+  /* Self-contained stack: art, scrim, aurora, glow, content. Without this the
+     layers below resolve against an ancestor's stacking context. */
+  isolation: isolate;
   border-bottom: 1px solid rgb(94 117 255 / 25%);
 
+  /* Hero art. Served through next/image rather than as a CSS background-image,
+     which the optimizer never sees — every visitor was downloading the full
+     3.2 MB PNG, and it is the LCP element. */
+  & .hero-bg {
+    object-fit: cover;
+    object-position: center;
+    z-index: 0;
+  }
+
+  /* Scrim. Holds the headline legible over the art. */
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+    background:
+      linear-gradient(105deg, rgb(6 9 20 / 90%) 0%, rgb(6 9 20 / 48%) 40%, rgb(10 12 24 / 22%) 62%, transparent 82%),
+      linear-gradient(180deg, rgb(87 57 230 / 14%) 0%, rgb(10 12 24 / 76%) 100%);
+  }
+
   &::after {
     content: '';
     position: absolute;
     inset: 0;
+    z-index: 2;
     background:
       radial-gradient(circle at 20% 20%, rgb(114 67 255 / 20%), transparent 40%),
       radial-gradient(circle at 75% 75%, rgb(10 217 255 / 10%), transparent 35%);
     pointer-events: none;
   }
 
+  /* Drifting mesh, built from soft radial stops rather than a blur filter — the
+     gradients already fall off smoothly, and blurring a viewport-sized layer
+     every frame is the expensive way to get the same picture. Only translate and
+     scale animate, so it stays on the compositor. */
+  & .aurora {
+    position: absolute;
+    inset: -18%;
+    z-index: 2;
+    pointer-events: none;
+    mix-blend-mode: screen;
+    opacity: 0.8;
+    background:
+      radial-gradient(38% 42% at 22% 28%, rgb(var(--neon-violet-rgb) / 26%), transparent 70%),
+      radial-gradient(34% 38% at 76% 34%, rgb(var(--neon-cyan-rgb) / 18%), transparent 72%),
+      radial-gradient(40% 36% at 58% 78%, rgb(var(--neon-magenta-rgb) / 14%), transparent 74%);
+    animation: hero-aurora 24s ease-in-out infinite alternate;
+    will-change: translate, scale;
+  }
+
   & .copy {
     position: relative;
-    z-index: 1;
+    z-index: 3;
     text-align: left;
     max-width: 760px;
   }
@@ -47,24 +93,24 @@
     font-weight: 600;
     letter-spacing: 2px;
     text-transform: uppercase;
-    color: #b6e2ff;
+    color: var(--text-accent);
     background: linear-gradient(90deg, rgb(40 110 255 / 18%), rgb(154 100 255 / 14%));
-    border: 1px solid rgb(118 154 255 / 38%);
-    border-radius: 999px;
-    box-shadow: inset 0 0 12px rgb(118 154 255 / 18%), 0 0 18px rgb(118 154 255 / 22%);
+    border: 1px solid rgb(var(--border-rgb) / 38%);
+    border-radius: var(--radius-pill);
+    box-shadow: var(--glow-inset-sm), var(--glow-sm);
 
     &::before {
       content: '';
       width: 6px;
       height: 6px;
       border-radius: 50%;
-      background: #6cf6c5;
-      box-shadow: 0 0 8px #6cf6c5, 0 0 14px rgb(108 246 197 / 60%);
+      background: var(--neon-emerald);
+      box-shadow: 0 0 8px var(--neon-emerald), 0 0 14px rgb(var(--neon-emerald-rgb) / 60%);
       animation: hero-pulse 1.8s ease-in-out infinite;
     }
   }
 
-  & h2 {
+  & h1 {
     font-family: var(--title-font);
     margin: 0 0 18px;
     color: #f3f7ff;
@@ -72,16 +118,26 @@
     line-height: 1.12;
     font-weight: 700;
     letter-spacing: 0.4px;
-    text-shadow: 0 0 18px rgb(174 150 255 / 28%), 0 0 38px rgb(108 72 255 / 18%);
+    text-shadow: var(--glow-text-lg);
   }
 
+  /* Seamless because the ramp ends on the hue it starts with, so the looping
+     background-position never shows a seam. */
   & .title-accent {
-    background: linear-gradient(92deg, #7dd6ff 0%, #b58cff 48%, #ff7bcb 100%);
+    background: linear-gradient(
+      92deg,
+      var(--neon-cyan) 0%,
+      var(--neon-violet) 30%,
+      var(--neon-magenta) 62%,
+      var(--neon-cyan) 100%
+    );
+    background-size: 200% 100%;
     background-clip: text;
     -webkit-background-clip: text;
     color: transparent;
     -webkit-text-fill-color: transparent;
-    filter: drop-shadow(0 0 14px rgb(181 140 255 / 45%));
+    filter: drop-shadow(0 0 14px rgb(var(--neon-violet-rgb) / 45%));
+    animation: hero-accent-sweep 9s linear infinite;
   }
 
   & p {
@@ -89,7 +145,7 @@
     margin: 0 0 32px;
     color: rgb(195 209 255 / 84%);
     font-size: 1.18rem;
-    max-width: 620px;
+    max-width: 560px;
     line-height: 1.55;
   }
 
@@ -100,6 +156,29 @@
     align-items: center;
   }
 
+  /* Orbiting ring, masked to the border so it reads as a lit edge rather than a
+     wash over the button face. */
+  & .primary-cta::after {
+    content: '';
+    position: absolute;
+    inset: -1.5px;
+    border-radius: inherit;
+    padding: 1.5px;
+    pointer-events: none;
+    background: conic-gradient(
+      from var(--cta-angle),
+      transparent 0deg,
+      rgb(var(--tone-emerald-rgb) / 90%) 45deg,
+      var(--neon-cyan) 95deg,
+      transparent 160deg,
+      transparent 360deg
+    );
+    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+            mask-composite: exclude;
+    animation: hero-cta-orbit 4.5s linear infinite;
+  }
+
   & .secondary-cta {
     display: inline-flex;
     align-items: center;
@@ -112,12 +191,12 @@
     left: 50%;
     bottom: 24px;
     transform: translateX(-50%);
-    z-index: 1;
+    z-index: 3;
     width: 26px;
     height: 42px;
     border: 1px solid rgb(174 200 255 / 55%);
     border-radius: 14px;
-    box-shadow: 0 0 14px rgb(118 154 255 / 28%);
+    box-shadow: var(--glow-sm);
     display: flex;
     justify-content: center;
     padding-top: 8px;
@@ -128,21 +207,44 @@
       height: 8px;
       border-radius: 2px;
       background: linear-gradient(180deg, #9ec8ff, #5e7dff);
-      box-shadow: 0 0 8px rgb(118 154 255 / 80%);
+      box-shadow: 0 0 8px rgb(var(--border-rgb) / 80%);
       animation: hero-scroll-dot 1.8s ease-in-out infinite;
     }
   }
 }
 
+@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
+  .hero .title-accent {
+    color: var(--neon-cyan);
+    -webkit-text-fill-color: var(--neon-cyan);
+    background: none;
+    animation: none;
+  }
+}
+
 @keyframes hero-pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.55; transform: scale(0.85); }
+  0%, 100% { opacity: 1; scale: 1; }
+  50% { opacity: 0.55; scale: 0.85; }
 }
 
 @keyframes hero-scroll-dot {
-  0% { transform: translateY(0); opacity: 0; }
+  0% { translate: 0 0; opacity: 0; }
   35% { opacity: 1; }
-  100% { transform: translateY(14px); opacity: 0; }
+  100% { translate: 0 14px; opacity: 0; }
+}
+
+@keyframes hero-accent-sweep {
+  to { background-position: 200% 0; }
+}
+
+@keyframes hero-cta-orbit {
+  to { --cta-angle: 360deg; }
+}
+
+@keyframes hero-aurora {
+  0% { translate: -2% -1%; scale: 1; }
+  50% { translate: 3% 2%; scale: 1.06; }
+  100% { translate: -1% 3%; scale: 1.02; }
 }
 
 @media (max-width: 1024px) {
@@ -153,6 +255,14 @@
       text-align: center;
       margin: 0 auto;
     }
+
+    & p {
+      margin-inline: auto;
+    }
+
+    & .actions {
+      justify-content: center;
+    }
   }
 }
 
diff --git a/website/src/components/landing/Hero/index.tsx b/website/src/components/landing/Hero/index.tsx
index 5b0df481..a346ac45 100644
--- a/website/src/components/landing/Hero/index.tsx
+++ b/website/src/components/landing/Hero/index.tsx
@@ -1,29 +1,45 @@
 'use client';
 
+import Image from 'next/image';
+
+import { HERO } from '@/content/landing';
 import { openApp } from '@/lib/openApp';
 import { NeonButton } from '../../common';
+import heroBackground from '../../../../public/images/background.png';
 import './Hero.css';
 
 const Hero = () => (
   <section className="hero" id="top">
-    <div className="copy">
-      <span className="eyebrow">On-Chain Pet Adventure</span>
-      <h2>
-        Collect, Battle &amp; Breed
+    <Image
+      className="hero-bg"
+      src={heroBackground}
+      alt=""
+      fill
+      priority
+      placeholder="blur"
+      sizes="100vw"
+    />
+    <span className="aurora" aria-hidden="true" />
+
+    <div className="copy" data-reveal-stagger="90">
+      <span className="eyebrow" data-reveal="down">{HERO.eyebrow}</span>
+      <h1 data-reveal="up">
+        {HERO.titleLead}
         <br />
-        <span className="title-accent">Your Dream Pets</span>
-      </h2>
-      <p>10,000+ handcrafted neon companions, fully owned by you. Hatch them, train them, send them into the arena.</p>
-      <div className="actions">
-        <NeonButton type="button" tone="emerald" onClick={openApp}>
-          Play Now
+        <span className="title-accent">{HERO.titleAccent}</span>
+      </h1>
+      <p data-reveal="up">{HERO.body}</p>
+      <div className="actions" data-reveal="up">
+        <NeonButton className="primary-cta" type="button" tone="emerald" onClick={openApp}>
+          {HERO.primaryCta}
         </NeonButton>
         <a href="#features" className="neon-btn tone-azure size-md secondary-cta">
-          <span className="label">Explore Features</span>
+          <span className="label">{HERO.secondaryCta}</span>
         </a>
       </div>
     </div>
-    <a href="#features" className="scroll-hint" aria-label="Scroll to features">
+
+    <a href="#features" className="scroll-hint" aria-label={HERO.scrollLabel}>
       <span />
     </a>
   </section>
diff --git a/website/src/components/landing/HowItWorks/HowItWorks.css b/website/src/components/landing/HowItWorks/HowItWorks.css
index 81664254..6c960d2f 100644
--- a/website/src/components/landing/HowItWorks/HowItWorks.css
+++ b/website/src/components/landing/HowItWorks/HowItWorks.css
@@ -1,3 +1,11 @@
+/* =============================================================================
+   How it works: a flat, four-stop process rail.
+
+   Deliberately the calmest section on the page. The roster and the roadmap are
+   both full 3D scenes; a third would leave nothing quiet between them, and this
+   is the section whose only job is to make starting look easy. No perspective,
+   no tilt — a rail that draws in, and four stops that light along it.
+   ============================================================================= */
 .how-it-works {
   & .track {
     list-style: none;
@@ -5,37 +13,44 @@
     padding: 0;
     display: grid;
     grid-template-columns: repeat(4, minmax(160px, 1fr));
-    gap: 18px;
+    gap: 20px;
     position: relative;
 
+    /* Connector rail. Draws in when the track scrolls into view, keyed off the
+       reveal observer's `data-reveal-visible` rather than a scroll timeline —
+       animation-timeline has no Safari support, and the rail only needs to fire
+       once on entry, not track scroll position continuously. */
     &::before {
       content: '';
       position: absolute;
-      top: 38px;
+      top: 42px;
       left: 6%;
       right: 6%;
       height: 2px;
-      background: linear-gradient(90deg, transparent, #7dd6ff 12%, #b58cff 50%, #ff7bcb 88%, transparent);
-      box-shadow: 0 0 12px rgb(170 140 255 / 45%);
-      z-index: 0;
+      background: var(--gradient-rail);
+      box-shadow: 0 0 12px rgb(var(--glow-text-rgb) / 45%);
+      z-index: var(--z-base);
+      scale: 0 1;
+      transform-origin: left center;
+      transition: scale 1100ms var(--ease-out) 140ms;
     }
   }
 
   & .node {
     position: relative;
-    z-index: 1;
+    z-index: var(--z-raised);
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 
-    & h4 {
+    & h3 {
       font-family: var(--title-font);
       margin: 0 0 8px;
       font-size: 1.1rem;
       letter-spacing: 0.8px;
       text-transform: uppercase;
-      color: #f6f3ff;
+      color: var(--text-title);
     }
 
     & p {
@@ -43,45 +58,105 @@
       margin: 0;
       font-size: 0.94rem;
       line-height: 1.55;
-      color: rgb(195 210 255 / 78%);
-      max-width: 240px;
+      color: var(--text-body);
+      max-width: 250px;
     }
   }
 
   & .circle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 76px;
-    height: 76px;
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 84px;
+    height: 84px;
     border-radius: 50%;
     background: radial-gradient(circle at 30% 25%, #1a2244 0%, #0a0f25 70%);
-    border: 2px solid rgb(184 140 255 / 75%);
-    box-shadow: 0 0 22px rgb(184 140 255 / 38%), inset 0 0 18px rgb(125 214 255 / 18%);
+    border: 1px solid rgb(var(--neon-violet-rgb) / 60%);
+    box-shadow:
+      0 0 22px rgb(var(--neon-violet-rgb) / 34%),
+      inset 0 0 18px rgb(var(--neon-cyan-rgb) / 16%);
     font-family: var(--title-font);
     font-weight: 800;
-    color: #f6f3ff;
-    margin-bottom: 16px;
-    position: relative;
+    color: var(--text-title);
+    margin-bottom: 18px;
+
+    /* Orbiting arc, masked to a ring. Held at zero until the node is hovered or
+       focused so four of them do not spin at once. */
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -5px;
+      border-radius: 50%;
+      background: conic-gradient(
+        from 0deg,
+        transparent 0deg,
+        rgb(var(--neon-cyan-rgb) / 65%) 70deg,
+        rgb(var(--neon-violet-rgb) / 75%) 155deg,
+        transparent 235deg,
+        transparent 360deg
+      );
+      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
+              mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
+      opacity: 0;
+      animation: hiw-orbit 9s linear infinite;
+      transition: opacity var(--dur-slow) var(--ease-out);
+    }
 
     &::after {
       content: '';
       position: absolute;
-      inset: -6px;
+      inset: -13px;
       border-radius: 50%;
-      border: 1px solid rgb(184 140 255 / 25%);
+      border: 1px solid rgb(var(--neon-violet-rgb) / 22%);
       pointer-events: none;
     }
 
     & span {
-      font-size: 1.4rem;
+      font-size: 1.45rem;
       letter-spacing: 1px;
-      background: linear-gradient(92deg, #7dd6ff, #b58cff, #ff7bcb);
+      background: var(--gradient-spectrum);
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
   }
+
+  & .node:hover .circle::before,
+  & .node:focus-within .circle::before {
+    opacity: 1;
+  }
+}
+
+/* Ignition. `animation-delay` reuses the stagger delay the reveal observer
+   wrote onto each node, so the circles light in document order behind the rail
+   rather than all at once the moment the track appears. */
+.js-reveal .how-it-works .node[data-reveal-visible] .circle {
+  animation: hiw-ignite 780ms var(--ease-out) var(--reveal-delay, 0ms) both;
+}
+
+.js-reveal .how-it-works .track[data-reveal-visible]::before {
+  scale: 1 1;
+}
+
+@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
+  .how-it-works .circle span {
+    -webkit-text-fill-color: var(--neon-cyan);
+    background: none;
+    color: var(--neon-cyan);
+  }
+}
+
+@keyframes hiw-orbit {
+  to { rotate: 360deg; }
+}
+
+@keyframes hiw-ignite {
+  from {
+    border-color: rgb(var(--border-rgb) / 18%);
+    box-shadow:
+      0 0 0 rgb(var(--neon-violet-rgb) / 0%),
+      inset 0 0 0 rgb(var(--neon-cyan-rgb) / 0%);
+  }
 }
 
 @media (max-width: 1024px) {
@@ -93,9 +168,32 @@
   }
 }
 
+/* Single column gets the rail back, rotated: with the nodes stacked it reads as
+   a route again, which the two-column layout cannot. */
 @media (max-width: 600px) {
   .how-it-works .track {
     grid-template-columns: 1fr;
     gap: 32px;
+
+    &::before {
+      display: block;
+      top: 42px;
+      bottom: 42px;
+      left: 50%;
+      right: auto;
+      width: 2px;
+      height: auto;
+      translate: -50% 0;
+      background: linear-gradient(
+        180deg,
+        transparent,
+        var(--neon-cyan) 12%,
+        var(--neon-violet) 50%,
+        var(--neon-magenta) 88%,
+        transparent
+      );
+      scale: 1 0;
+      transform-origin: center top;
+    }
   }
 }
diff --git a/website/src/components/landing/HowItWorks/index.tsx b/website/src/components/landing/HowItWorks/index.tsx
index 328bfffd..22749865 100644
--- a/website/src/components/landing/HowItWorks/index.tsx
+++ b/website/src/components/landing/HowItWorks/index.tsx
@@ -1,17 +1,19 @@
-import { STEPS } from '@/content/landing';
+import { SECTION_COPY, STEPS } from '@/content/landing';
 import './HowItWorks.css';
 
+const { title, subtitle } = SECTION_COPY.how;
+
 const HowItWorks = () => (
-  <section className="landing-section how-it-works" id="how">
-    <h3 className="section-title">How It Works</h3>
-    <p className="section-subtitle">From wallet to first win in four short steps.</p>
-    <ol className="track" aria-label="How it works">
-      {STEPS.map(({ number, title, text }) => (
-        <li className="node" key={number}>
+  <section className="landing-section how-it-works" id="how" data-wash="cyan">
+    <h2 className="section-title" data-reveal="up">{title}</h2>
+    <p className="section-subtitle" data-reveal="up">{subtitle}</p>
+    <ol className="track" aria-label="How it works" data-reveal="fade" data-reveal-stagger="140">
+      {STEPS.map(({ number, title: stepTitle, text }) => (
+        <li className="node" key={number} data-reveal="rise">
           <span className="circle" aria-hidden="true">
             <span>{number}</span>
           </span>
-          <h4>{title}</h4>
+          <h3>{stepTitle}</h3>
           <p>{text}</p>
         </li>
       ))}
diff --git a/website/src/components/landing/Pets/Pets.css b/website/src/components/landing/Pets/Pets.css
index 1eea669b..4baffda3 100644
--- a/website/src/components/landing/Pets/Pets.css
+++ b/website/src/components/landing/Pets/Pets.css
@@ -1,33 +1,57 @@
 .pets {
+  /* The pin supplies its own spacing. Section padding here would drop the pin
+     below its sticky threshold at the anchor, so following the nav link would
+     land on empty space above the scene rather than on the scene. */
+  padding-block: 0;
+
+  /* Tier tones map onto the shared rarity tokens rather than restating hexes. */
+  & .tone-silver { --tone-rgb: var(--rarity-common-rgb); }
+  & .tone-cyan { --tone-rgb: var(--rarity-rare-rgb); }
+  & .tone-violet { --tone-rgb: var(--rarity-epic-rgb); }
+  & .tone-gold { --tone-rgb: var(--rarity-legendary-rgb); }
+
+  /* Foot of the pin, under the ring. It shares the pin's height budget, hence
+     the tighter metrics than a standalone block would use. */
   & .rarity {
-    margin-bottom: 36px;
+    flex: 0 0 auto;
+    margin: 0;
+    padding-block-start: clamp(12px, 2vh, 22px);
+    border-block-start: 1px solid rgb(var(--border-rgb) / 16%);
   }
 
   & .rarity-track {
     display: flex;
     width: 100%;
-    height: 18px;
-    border-radius: 999px;
+    height: 14px;
+    border-radius: var(--radius-pill);
     overflow: hidden;
-    background: rgb(255 255 255 / 4%);
-    border: 1px solid rgb(118 154 255 / 22%);
+    background: var(--surface-veil-1);
+    border: 1px solid rgb(var(--border-rgb) / 22%);
     box-shadow: inset 0 0 14px rgb(0 0 0 / 35%);
-    margin-bottom: 20px;
+    margin-bottom: 14px;
   }
 
+  /* Segments start collapsed and grow to their share when the block scrolls in,
+     staggered left to right, so the distribution reads as a figure being drawn
+     rather than a bar that was always there. */
   & .rarity-segment {
-    flex: 0 0 auto;
+    flex: 0 0 0%;
     height: 100%;
-    background: var(--tone);
-    box-shadow: inset 0 0 14px rgb(255 255 255 / 18%), 0 0 12px var(--tone);
-    transition: filter 200ms ease;
-
-    &:hover { filter: brightness(1.15); }
+    background: linear-gradient(
+      180deg,
+      rgb(var(--tone-rgb) / 100%),
+      rgb(var(--tone-rgb) / 72%)
+    );
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 28%),
+      0 0 12px rgb(var(--tone-rgb) / 70%);
+    transition:
+      flex-basis 950ms var(--ease-out) var(--seg-delay, 0ms),
+      filter var(--dur-base) var(--ease-out);
 
-    &.tone-silver { --tone: #b2c8eb; }
-    &.tone-cyan { --tone: #50b8ff; }
-    &.tone-violet { --tone: #b878ff; }
-    &.tone-gold { --tone: #ffcf5c; }
+    &:hover {
+      filter: brightness(1.18);
+    }
   }
 
   & .rarity-legend {
@@ -36,28 +60,23 @@
     padding: 0;
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 18px;
+    gap: 14px;
 
     & li {
       display: flex;
       align-items: flex-start;
-      gap: 10px;
-      color: #e7efff;
-
-      &.tone-silver { --tone: #b2c8eb; }
-      &.tone-cyan { --tone: #50b8ff; }
-      &.tone-violet { --tone: #b878ff; }
-      &.tone-gold { --tone: #ffcf5c; }
+      gap: 9px;
+      color: var(--text-bright);
     }
 
     & .dot {
       flex: 0 0 auto;
-      width: 10px;
-      height: 10px;
+      width: 9px;
+      height: 9px;
       border-radius: 50%;
-      margin-top: 7px;
-      background: var(--tone);
-      box-shadow: 0 0 10px var(--tone);
+      margin-top: 6px;
+      background: rgb(var(--tone-rgb));
+      box-shadow: 0 0 10px rgb(var(--tone-rgb) / 90%);
     }
 
     & strong {
@@ -65,7 +84,7 @@
       font-size: 0.92rem;
       letter-spacing: 0.6px;
       text-transform: uppercase;
-      color: #f6f3ff;
+      color: var(--text-title);
     }
 
     & .share {
@@ -73,146 +92,372 @@
       margin-left: 8px;
       font-family: var(--content-font);
       font-weight: 700;
-      color: var(--tone, #b6e2ff);
+      color: rgb(var(--tone-rgb));
     }
 
     & p {
       font-family: var(--content-font);
-      margin: 4px 0 0;
-      font-size: 0.86rem;
-      line-height: 1.45;
-      color: rgb(195 210 255 / 72%);
+      margin: 3px 0 0;
+      font-size: 0.82rem;
+      line-height: 1.4;
+      color: var(--text-muted);
     }
   }
+}
 
-  & .grid {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(6, minmax(130px, 1fr));
-    gap: 16px;
+/* Short viewports: the blurbs are the first thing to go, so the ring keeps its
+   height. Tier name and share stay, which is the part the bar is annotating. */
+@media (min-width: 901px) and (max-height: 840px) {
+  .pets .rarity-legend p {
+    display: none;
   }
+}
 
-  & .card {
-    background: linear-gradient(180deg, rgb(10 14 28 / 95%) 0%, rgb(7 11 24 / 95%) 100%);
-    border: 1px solid rgb(100 132 255 / 20%);
-    padding: 22px 22px 20px;
-    text-align: center;
-    color: #eaf0ff;
-    box-shadow: inset 0 0 22px rgb(55 68 148 / 12%);
-    position: relative;
-    overflow: hidden;
+/* =============================================================================
+   Roster carousel — a 3D ring turned by scroll position.
 
-    &::before {
-      content: '';
-      position: absolute;
-      inset: -1px;
-      border-radius: inherit;
-      padding: 1px;
-      background: linear-gradient(135deg, transparent 40%, var(--edge, rgb(120 150 255 / 45%)) 100%);
-      pointer-events: none;
-      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-      -webkit-mask-composite: xor;
-              mask-composite: exclude;
-      opacity: 0.85;
-    }
+   Scroll-synced, never pinned: the section moves past at normal speed and the
+   ring simply tracks where it is, so the roster adds no page height. The
+   roadmap owns the page's one pinned set-piece.
+   ============================================================================= */
+/* The pinned track. Its height is the scroll budget: one span per pet, plus a
+   screen for the pin itself. */
+.pets .showcase {
+  --pet-span: 58vh;
+  /* Declared here, on the element the scene hook writes to. Declaring it again
+     further down would shadow the written value for that subtree — a
+     descendant's own declaration beats an inherited one. */
+  --track-progress: 0;
+
+  position: relative;
+  height: calc(100dvh + (var(--pet-count) * var(--pet-span)));
+}
 
-    &.r-legendary { --edge: rgb(255 207 92 / 70%); }
-    &.r-epic { --edge: rgb(184 120 255 / 70%); }
-    &.r-rare { --edge: rgb(80 184 255 / 70%); }
+/* The pin owns the whole viewport: it sticks at 0 and pads its own content
+   clear of the floating glass — see the note on the roadmap pin. */
+.pets .pin {
+  position: sticky;
+  inset-block-start: 0;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: clamp(8px, 1.6vh, 18px);
+  padding-block: var(--anchor-offset) clamp(12px, 2vh, 28px);
+  box-sizing: border-box;
+}
+
+.pets .intro {
+  flex: 0 0 auto;
+
+  & .section-subtitle {
+    margin-block: 14px 0;
   }
+}
+
+.pets .carousel {
+  --radius: clamp(250px, 30vw, 380px);
+
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 300px;
+  perspective: 1250px;
+  perspective-origin: 50% 46%;
+}
+
+/* Position readout for the ring. */
+.pets .dots {
+  flex: 0 0 auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  gap: 9px;
 
-  & .avatar {
-    width: 92px;
-    height: 92px;
-    margin: 0 auto 14px;
+  & li {
+    width: 7px;
+    height: 7px;
     border-radius: 50%;
-    display: grid;
-    place-items: center;
-    background: radial-gradient(circle at 30% 20%, #171d38, #0f1430);
-    border: 2px solid rgb(121 148 255 / 35%);
-    box-shadow: inset 0 0 14px rgb(80 110 220 / 18%);
-
-    & img {
-      width: 78px;
-      height: 78px;
-      object-fit: contain;
-      display: block;
-    }
+    background: rgb(var(--border-rgb) / 30%);
+    transition:
+      background var(--dur-base) var(--ease-out),
+      scale var(--dur-base) var(--ease-spring),
+      box-shadow var(--dur-base) var(--ease-out);
   }
 
-  & .card.r-legendary .avatar {
-    border-color: rgb(255 207 92 / 70%);
-    box-shadow: inset 0 0 18px rgb(255 207 92 / 22%), 0 0 16px rgb(255 207 92 / 30%);
+  & li[data-on] {
+    background: var(--neon-cyan);
+    scale: 1.45;
+    box-shadow: 0 0 12px rgb(var(--neon-cyan-rgb) / 80%);
   }
-  & .card.r-epic .avatar {
-    border-color: rgb(184 120 255 / 70%);
-    box-shadow: inset 0 0 18px rgb(184 120 255 / 22%), 0 0 16px rgb(184 120 255 / 28%);
+}
+
+/* Pool of light the ring stands on. A real horizontal plane, so it
+   foreshortens with the scene rather than reading as a flat blur. */
+.pets .floor {
+  position: absolute;
+  inset-block-end: 6%;
+  inset-inline-start: 50%;
+  width: min(84%, 760px);
+  height: 190px;
+  translate: -50% 0;
+  transform: rotateX(80deg);
+  transform-origin: center top;
+  background: radial-gradient(
+    ellipse at center,
+    rgb(var(--neon-violet-rgb) / 26%),
+    transparent 68%
+  );
+  filter: blur(10px);
+  pointer-events: none;
+}
+
+.pets .ring {
+  position: absolute;
+  inset: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  transform-style: preserve-3d;
+  /* One rotation per card across the section, so every pet faces front once. */
+  transform: rotateY(calc(var(--track-progress) * var(--sweep) * -1));
+  /* Damping. The angle is rewritten every frame, so each change restarts this
+     transition from wherever the ring currently is — the ring trails the scroll
+     and settles, instead of snapping frame to frame. */
+  transition: transform 300ms var(--ease-out);
+}
+
+.pets .slot {
+  --dist: 0;
+
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  width: clamp(200px, 22vw, 268px);
+  margin-block-start: calc(clamp(200px, 22vw, 268px) * -0.72);
+  margin-inline-start: calc(clamp(200px, 22vw, 268px) * -0.5);
+  transform-style: preserve-3d;
+  transform: rotateY(var(--angle)) translateZ(var(--radius));
+  /* Cards on the far side of the ring would otherwise show mirrored art. */
+  backface-visibility: hidden;
+
+  &.r-legendary { --tone-rgb: var(--rarity-legendary-rgb); }
+  &.r-epic { --tone-rgb: var(--rarity-epic-rgb); }
+  &.r-rare { --tone-rgb: var(--rarity-rare-rgb); }
+}
+
+/* Falloff is continuous, driven by --dist rather than switching between
+   discrete states, so cards dim and soften as they turn away instead of
+   stepping. */
+.pets .pet-card {
+  position: relative;
+  padding: 12px 12px 16px;
+  border-radius: var(--radius-lg);
+  background: var(--surface-card);
+  border: 1px solid rgb(var(--tone-rgb) / 36%);
+  box-shadow:
+    var(--glow-inset-md),
+    0 0 22px rgb(var(--tone-rgb) / 14%),
+    var(--elev-3);
+  text-align: center;
+  color: var(--text-bright);
+  opacity: calc(1 - var(--dist) * 0.26);
+  filter: brightness(calc(1 - var(--dist) * 0.16)) blur(calc(var(--dist) * 0.7px));
+  transition:
+    border-color var(--dur-base) var(--ease-out),
+    box-shadow var(--dur-base) var(--ease-out);
+}
+
+.pets .slot[data-front] .pet-card {
+  border-color: rgb(var(--tone-rgb) / 82%);
+  box-shadow:
+    var(--glow-inset-md),
+    0 0 40px rgb(var(--tone-rgb) / 34%),
+    var(--elev-4);
+}
+
+.pets .art {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  margin-bottom: 12px;
+  border: 1px solid rgb(var(--tone-rgb) / 40%);
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 35%);
+
+  & img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
-  & .card.r-rare .avatar {
-    border-color: rgb(80 184 255 / 70%);
-    box-shadow: inset 0 0 18px rgb(80 184 255 / 22%), 0 0 16px rgb(80 184 255 / 28%);
+
+  /* Rarity tint over the art, so the tier reads before the badge does. */
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: linear-gradient(180deg, transparent 55%, rgb(var(--tone-rgb) / 24%));
   }
+}
 
-  & .card h4 {
-    font-family: var(--title-font);
-    margin: 0 0 10px;
-    font-size: 1.05rem;
-    letter-spacing: 0.4px;
+/* Holographic sweep, run only on the card at the front of the ring. */
+.pets .sheen {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: linear-gradient(
+    115deg,
+    transparent 34%,
+    rgb(255 255 255 / 14%) 46%,
+    rgb(var(--tone-rgb) / 26%) 53%,
+    transparent 68%
+  );
+  translate: -130% 0;
+  opacity: 0;
+}
+
+.pets .slot[data-front] .sheen {
+  opacity: 1;
+  animation: pets-sheen 3.6s var(--ease-in-out) infinite;
+}
+
+.pets .pet-card h3 {
+  font-family: var(--title-font);
+  margin: 0 0 8px;
+  font-size: 1.02rem;
+  letter-spacing: 0.4px;
+  color: var(--text-title);
+}
+
+.pets .meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pets .level {
+  font-family: var(--content-font);
+  font-size: 0.76rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.7px;
+}
+
+.pets .tag {
+  font-family: var(--content-font);
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 3px 9px;
+  border-radius: var(--radius-pill);
+  font-weight: 700;
+  color: rgb(var(--tone-rgb));
+  border: 1px solid rgb(var(--tone-rgb) / 70%);
+  background: rgb(var(--tone-rgb) / 12%);
+  box-shadow: 0 0 10px rgb(var(--tone-rgb) / 28%);
+}
+
+.js-reveal .pets .rarity[data-reveal-visible] .rarity-segment {
+  flex-basis: var(--share);
+}
+
+/* Without the observer the segments must still show their share, or the chart
+   renders as an empty bar. */
+html:not(.js-reveal) .pets .rarity-segment {
+  flex-basis: var(--share);
+}
+
+@keyframes pets-sheen {
+  0%, 62% { translate: -130% 0; }
+  92%, 100% { translate: 130% 0; }
+}
+
+@media (max-width: 1024px) {
+  .pets .rarity-legend {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+}
+
+/* =============================================================================
+   Flat fallback.
 
-  & .meta {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
+   A ring this size cannot be read on a narrow screen, and under reduced motion
+   a scroll-turned carousel is the whole problem. Both get the grid instead —
+   every card upright, full opacity, no perspective.
+   ============================================================================= */
+@media (max-width: 900px), (prefers-reduced-motion: reduce) {
+  .pets {
+    padding-block: var(--section-pad-block);
   }
 
-  & .level {
-    font-family: var(--content-font);
-    font-size: 0.78rem;
-    color: rgb(195 210 255 / 70%);
-    text-transform: uppercase;
-    letter-spacing: 0.7px;
+  .pets .showcase {
+    height: auto;
   }
 
-  & .tag {
-    font-family: var(--content-font);
-    font-size: 0.72rem;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    padding: 3px 9px;
-    border-radius: 999px;
-    font-weight: 700;
-    border: 1px solid currentColor;
+  .pets .pin {
+    position: static;
+    height: auto;
+    padding-block: 0;
+    gap: 0;
+  }
 
-    &.r-legendary {
-      color: #ffd76b;
-      background: rgb(255 207 92 / 12%);
-      box-shadow: 0 0 10px rgb(255 207 92 / 28%);
-    }
-    &.r-epic {
-      color: #d6b4ff;
-      background: rgb(184 120 255 / 12%);
-      box-shadow: 0 0 10px rgb(184 120 255 / 28%);
-    }
-    &.r-rare {
-      color: #9ed7ff;
-      background: rgb(80 184 255 / 12%);
-      box-shadow: 0 0 10px rgb(80 184 255 / 28%);
-    }
+  .pets .intro .section-subtitle {
+    margin-block: 22px 26px;
   }
-}
 
-@media (max-width: 1024px) {
-  .pets {
-    & .grid { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
-    & .rarity-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .pets .rarity {
+    margin-block-start: 32px;
+    padding-block-start: 24px;
+  }
+
+  .pets .rarity-legend p {
+    display: block;
+  }
+
+  .pets .dots {
+    display: none;
+  }
+
+  .pets .carousel {
+    min-height: 0;
+    perspective: none;
+  }
+
+  .pets .floor { display: none; }
+
+  .pets .ring {
+    position: relative;
+    inset: auto;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px;
+    transform: none;
+    transform-style: flat;
+  }
+
+  .pets .slot {
+    position: relative;
+    inset: auto;
+    width: auto;
+    margin: 0;
+    transform: none;
+    backface-visibility: visible;
+  }
+
+  .pets .pet-card {
+    opacity: 1;
+    filter: none;
   }
-}
 
-@media (max-width: 768px) {
-  .pets .grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
+  .pets .slot .sheen { display: none; }
 }
 
 @media (max-width: 600px) {
   .pets .rarity-legend { grid-template-columns: 1fr; }
+  .pets .ring { grid-template-columns: 1fr; }
 }
diff --git a/website/src/components/landing/Pets/index.tsx b/website/src/components/landing/Pets/index.tsx
index b52b28ed..fbad2b31 100644
--- a/website/src/components/landing/Pets/index.tsx
+++ b/website/src/components/landing/Pets/index.tsx
@@ -1,56 +1,150 @@
+'use client';
+
+import { useCallback, useRef, type CSSProperties } from 'react';
 import Image from 'next/image';
 
-import { PETS, RARITY_TIERS } from '@/content/landing';
-import { NeonCard } from '../../common';
+import { PETS, RARITY_TIERS, SECTION_COPY } from '@/content/landing';
+import useScrollScene from '@/hooks/useScrollScene';
 import './Pets.css';
 
 const rarityMod = (rarity: string) => rarity.toLowerCase();
 
-const Pets = () => (
-  <section className="landing-section pets" id="pets">
-    <h3 className="section-title">Meet the Companions</h3>
-    <p className="section-subtitle">Four rarity tiers, ten thousand creatures, one shot at the legendary roster.</p>
-
-    <div className="rarity" aria-label="Rarity tier distribution">
-      <div className="rarity-track">
-        {RARITY_TIERS.map(({ name, share, tone }) => (
-          <div
-            key={name}
-            className={`rarity-segment tone-${tone}`}
-            style={{ flexBasis: share }}
-            title={`${name} · ${share}`}
-          />
-        ))}
-      </div>
-      <ul className="rarity-legend">
-        {RARITY_TIERS.map(({ name, share, blurb, tone }) => (
-          <li key={name} className={`tone-${tone}`}>
-            <span className="dot" aria-hidden="true" />
-            <div>
-              <strong>{name}</strong>
-              <span className="share">{share}</span>
-              <p>{blurb}</p>
-            </div>
-          </li>
-        ))}
-      </ul>
-    </div>
-
-    <div className="grid">
-      {PETS.map(({ name, level, rarity, image }) => (
-        <NeonCard key={name} className={`card r-${rarityMod(rarity)}`}>
-          <div className="avatar">
-            <Image src={image} alt={name} width={78} height={78} />
+const { title, subtitle } = SECTION_COPY.pets;
+
+const COUNT = PETS.length;
+const STEP = 360 / COUNT;
+/** Rotation over the scene: enough to bring every pet to the front once. */
+const SWEEP = (COUNT - 1) * STEP;
+/** Below this the carousel unpins and flattens to a grid — see Pets.css. */
+const FLAT_QUERY = '(max-width: 900px)';
+
+const Pets = () => {
+  const cards = useRef<(HTMLElement | null)[]>([]);
+  const dots = useRef<(HTMLElement | null)[]>([]);
+
+  const onFrame = useCallback((progress: number) => {
+    // Distance from the front of the ring, in card slots, wrapped the short way
+    // round. Published per card as a continuous value so dimming and blur fall
+    // off smoothly instead of snapping between discrete states.
+    const front = progress * (COUNT - 1);
+    const nearest = Math.round(front);
+
+    cards.current.forEach((el, index) => {
+      if (!el) return;
+      let offset = index - front;
+      if (offset > COUNT / 2) offset -= COUNT;
+      if (offset < -COUNT / 2) offset += COUNT;
+
+      const distance = Math.abs(offset);
+      el.style.setProperty('--dist', distance.toFixed(3));
+      el.toggleAttribute('data-front', distance < 0.5);
+    });
+
+    dots.current.forEach((el, index) => {
+      el?.toggleAttribute('data-on', index === nearest);
+    });
+  }, []);
+
+  const { sectionRef, pinRef } = useScrollScene<HTMLDivElement, HTMLDivElement>(onFrame, {
+    fallbackQuery: FLAT_QUERY,
+    // A carousel handed its finished state would sit on the last pet.
+    fallbackValue: 0,
+  });
+
+  return (
+    <section className="landing-section pets" id="pets" data-wash="magenta">
+      {/* Pinned so the heading stays with the roster it introduces — unpinned,
+          a stage this tall scrolls its own title off the screen. */}
+      <div
+        className="showcase"
+        ref={sectionRef}
+        style={{ '--pet-count': COUNT } as CSSProperties}
+      >
+        <div className="pin" ref={pinRef}>
+          <header className="intro">
+            <h2 className="section-title">{title}</h2>
+            <p className="section-subtitle">{subtitle}</p>
+          </header>
+
+          <div className="carousel" style={{ '--sweep': `${SWEEP}deg` } as CSSProperties}>
+            <span className="floor" aria-hidden="true" />
+
+            <ul className="ring">
+              {PETS.map(({ name, level, rarity, image }, index) => (
+                <li
+                  key={name}
+                  className={`slot r-${rarityMod(rarity)}`}
+                  style={{ '--angle': `${index * STEP}deg` } as CSSProperties}
+                  ref={(el) => {
+                    cards.current[index] = el;
+                  }}
+                >
+                  <article className="pet-card">
+                    <div className="art">
+                      <Image
+                        src={image}
+                        alt={name}
+                        width={512}
+                        height={512}
+                        sizes="(max-width: 900px) 44vw, 300px"
+                      />
+                      <span className="sheen" aria-hidden="true" />
+                    </div>
+                    <h3>{name}</h3>
+                    <div className="meta">
+                      <span className="level">Lv. {level}</span>
+                      <span className={`tag r-${rarityMod(rarity)}`}>{rarity}</span>
+                    </div>
+                  </article>
+                </li>
+              ))}
+            </ul>
           </div>
-          <h4>{name}</h4>
-          <div className="meta">
-            <span className="level">Lv. {level}</span>
-            <span className={`tag r-${rarityMod(rarity)}`}>{rarity}</span>
+
+          <ol className="dots" aria-hidden="true">
+            {PETS.map(({ name }, index) => (
+              <li
+                key={name}
+                data-on={index === 0 ? '' : undefined}
+                ref={(el) => {
+                  dots.current[index] = el;
+                }}
+              />
+            ))}
+          </ol>
+
+          {/* Anchored to the foot of the pin: it stays on screen for the whole
+              scene, but sits below the roster rather than between the heading
+              and the thing the heading introduces. */}
+          <div className="rarity" aria-label="Rarity tier distribution" data-reveal="fade">
+            <div className="rarity-track">
+              {RARITY_TIERS.map(({ name, share, tone }, index) => (
+                <div
+                  key={name}
+                  className={`rarity-segment tone-${tone}`}
+                  style={{ '--share': share, '--seg-delay': `${index * 110}ms` } as CSSProperties}
+                  title={`${name} · ${share}`}
+                />
+              ))}
+            </div>
+            <ul className="rarity-legend">
+              {RARITY_TIERS.map(({ name, share, blurb, tone }) => (
+                <li key={name} className={`tone-${tone}`}>
+                  <span className="dot" aria-hidden="true" />
+                  <div>
+                    <strong>{name}</strong>
+                    <span className="share">{share}</span>
+                    <p>{blurb}</p>
+                  </div>
+                </li>
+              ))}
+            </ul>
           </div>
-        </NeonCard>
-      ))}
-    </div>
-  </section>
-);
+        </div>
+      </div>
+
+    </section>
+  );
+};
 
 export default Pets;
diff --git a/website/src/components/landing/Proof/Proof.css b/website/src/components/landing/Proof/Proof.css
new file mode 100644
index 00000000..0f9aa59a
--- /dev/null
+++ b/website/src/components/landing/Proof/Proof.css
@@ -0,0 +1,99 @@
+.proof {
+  & .grid {
+    list-style: none;
+    margin: 8px 0 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(220px, 1fr));
+    gap: 20px;
+    counter-reset: proof;
+  }
+
+  & .card {
+    position: relative;
+    padding: 28px 26px 26px;
+    border-radius: var(--radius-lg);
+    background: linear-gradient(
+      180deg,
+      rgb(var(--surface-void-rgb) / 72%),
+      rgb(var(--surface-void-rgb) / 52%)
+    );
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgb(var(--border-rgb) / 26%);
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 7%),
+      var(--elev-2);
+    color: var(--text-bright);
+    transition:
+      border-color var(--dur-base) var(--ease-out),
+      box-shadow var(--dur-base) var(--ease-out);
+
+    /* Sequence rule down the left edge: these three are a chain, not a list of
+       unrelated assurances. */
+    &::before {
+      content: '';
+      position: absolute;
+      inset-block: 26px;
+      inset-inline-start: 0;
+      width: 2px;
+      border-radius: 2px;
+      background: var(--gradient-rail);
+      opacity: 0.75;
+    }
+
+    &:hover {
+      border-color: rgb(var(--border-rgb) / 52%);
+      box-shadow:
+        inset 0 1px 0 rgb(255 255 255 / 10%),
+        0 0 26px rgb(var(--border-rgb) / 18%),
+        var(--elev-3);
+    }
+  }
+
+  & .step {
+    display: block;
+    font-family: var(--title-font);
+    font-size: 0.82rem;
+    font-weight: 800;
+    letter-spacing: 2.2px;
+    margin-bottom: 14px;
+    background: var(--gradient-spectrum);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  & h3 {
+    font-family: var(--title-font);
+    margin: 0 0 10px;
+    font-size: 1.08rem;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    color: var(--text-title);
+    text-shadow: var(--glow-text-sm);
+  }
+
+  & p {
+    font-family: var(--content-font);
+    margin: 0;
+    font-size: 0.96rem;
+    line-height: 1.62;
+    color: var(--text-body);
+  }
+}
+
+@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
+  .proof .step {
+    -webkit-text-fill-color: var(--neon-cyan);
+    background: none;
+    color: var(--neon-cyan);
+  }
+}
+
+@media (max-width: 1024px) {
+  .proof .grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+}
diff --git a/website/src/components/landing/Proof/index.tsx b/website/src/components/landing/Proof/index.tsx
new file mode 100644
index 00000000..9aa95d98
--- /dev/null
+++ b/website/src/components/landing/Proof/index.tsx
@@ -0,0 +1,22 @@
+import { PROOF_POINTS, SECTION_COPY } from '@/content/landing';
+import './Proof.css';
+
+const { title, subtitle } = SECTION_COPY.proof;
+
+const Proof = () => (
+  <section className="landing-section proof" id="proof" data-wash="violet">
+    <h2 className="section-title" data-reveal="up">{title}</h2>
+    <p className="section-subtitle" data-reveal="up">{subtitle}</p>
+    <ol className="grid" data-reveal-stagger="110">
+      {PROOF_POINTS.map(({ step, title: pointTitle, text }) => (
+        <li className="card" key={step} data-reveal="rise">
+          <span className="step" aria-hidden="true">{step}</span>
+          <h3>{pointTitle}</h3>
+          <p>{text}</p>
+        </li>
+      ))}
+    </ol>
+  </section>
+);
+
+export default Proof;
diff --git a/website/src/components/landing/Roadmap/Roadmap.css b/website/src/components/landing/Roadmap/Roadmap.css
index 679c9e30..911c8e72 100644
--- a/website/src/components/landing/Roadmap/Roadmap.css
+++ b/website/src/components/landing/Roadmap/Roadmap.css
@@ -1,169 +1,634 @@
+/* =============================================================================
+   Roadmap: a pinned, scroll-linked 3D drive.
+
+   The section is deliberately tall and its contents are pinned with sticky
+   positioning while the page scrolls past. Nothing intercepts the wheel — the
+   scrollbar stays truthful, keyboard paging works, and a reader can leave at
+   any point. Only the picture holds still.
+
+   Below the horizon is a perspective grid floor whose lines stream toward the
+   camera as progress advances; each phase is a neon gate that approaches from
+   the horizon and sweeps past. The active phase retints the whole scene via
+   --scene-rgb.
+   ============================================================================= */
 .roadmap {
-  & .track {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: grid;
-    grid-template-columns: repeat(4, minmax(180px, 1fr));
-    gap: 0;
+  /* Scroll distance granted to each phase. Bigger reads slower — roughly one
+     full screen of scrolling per phase is the pace a pinned scene wants. */
+  --phase-span: 100vh;
+  --track-progress: 0;
+  --scene-rgb: var(--neon-emerald-rgb);
+  /* Sky/ground split, from the top. */
+  --horizon: 46%;
+
+  padding-block: 0;
+  height: calc(100dvh + (var(--phase-count) * var(--phase-span)));
+}
+
+.roadmap[data-phase='1'] { --scene-rgb: var(--neon-cyan-rgb); }
+.roadmap[data-phase='2'] { --scene-rgb: var(--neon-gold-rgb); }
+.roadmap[data-phase='3'] { --scene-rgb: var(--neon-violet-rgb); }
+
+/* Full-bleed: the pin escapes the section gutter so the scene reaches the
+   screen edges, then restores the gutter as its own padding so content still
+   aligns with the rest of the page. */
+/* The pin owns the whole viewport: it sticks at 0 and pads its own content
+   clear of the floating glass. Sticking below the header instead would leave a
+   band above the scene where the previous section shows through around the
+   pill — the header is a floating pill, not an opaque bar, so nothing else
+   covers that strip. */
+.roadmap .pin {
+  position: sticky;
+  inset-block-start: 0;
+  height: 100dvh;
+  margin-inline: calc(var(--landing-gutter) * -1);
+  padding: calc(var(--anchor-offset)) var(--landing-gutter) clamp(18px, 3vh, 34px);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: clamp(10px, 2vh, 20px);
+  overflow: hidden;
+
+  & > * {
     position: relative;
-    min-height: 360px;
-    align-items: center;
+    z-index: 2;
+  }
+}
 
-    &::before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 0;
-      right: 0;
-      height: 3px;
-      transform: translateY(-50%);
-      background: linear-gradient(90deg, #6cf6c5 0%, #6cf6c5 50%, #ffd76b 50%, #ffd76b 75%, #b878ff 75%, #b878ff 100%);
-      box-shadow: 0 0 14px rgb(170 140 255 / 35%);
-      z-index: 0;
-      border-radius: 4px;
-    }
+/* =============================================================================
+   Scene
+   ============================================================================= */
+.roadmap .scene {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+/* Three star layers above the horizon, each a repeating tile of radial dots,
+   translated at different rates by the same progress value. */
+.roadmap .stars {
+  position: absolute;
+  inset: -10% 0 calc(100% - var(--horizon) - 4%);
+  background-repeat: repeat;
+}
+
+.roadmap .stars.s1 {
+  background-image:
+    radial-gradient(1px 1px at 22px 34px, rgb(255 255 255 / 45%) 50%, transparent 50%),
+    radial-gradient(1px 1px at 130px 90px, rgb(255 255 255 / 30%) 50%, transparent 50%),
+    radial-gradient(1px 1px at 76px 158px, rgb(255 255 255 / 38%) 50%, transparent 50%),
+    radial-gradient(1px 1px at 190px 210px, rgb(255 255 255 / 26%) 50%, transparent 50%);
+  background-size: 240px 240px;
+  translate: 0 calc(var(--track-progress) * -22px);
+}
+
+.roadmap .stars.s2 {
+  background-image:
+    radial-gradient(1.5px 1.5px at 48px 60px, rgb(var(--neon-cyan-rgb) / 55%) 50%, transparent 50%),
+    radial-gradient(1px 1px at 160px 20px, rgb(255 255 255 / 45%) 50%, transparent 50%),
+    radial-gradient(1.5px 1.5px at 110px 140px, rgb(var(--neon-violet-rgb) / 45%) 50%, transparent 50%);
+  background-size: 300px 300px;
+  translate: 0 calc(var(--track-progress) * -52px);
+}
+
+.roadmap .stars.s3 {
+  background-image:
+    radial-gradient(2px 2px at 80px 44px, rgb(255 255 255 / 65%) 50%, transparent 50%),
+    radial-gradient(2px 2px at 210px 170px, rgb(var(--neon-cyan-rgb) / 60%) 50%, transparent 50%);
+  background-size: 340px 340px;
+  translate: 0 calc(var(--track-progress) * -92px);
+  animation: roadmap-twinkle 3.4s ease-in-out infinite;
+}
+
+/* The nebula's gradients are built from currentColor, and only `color` changes
+   per phase — colour is transitionable where background-image is not, so the
+   sky retints smoothly instead of snapping. */
+.roadmap .nebula {
+  position: absolute;
+  inset: -6% 0 calc(100% - var(--horizon));
+  color: rgb(var(--scene-rgb));
+  transition: color 900ms var(--ease-in-out);
+  background:
+    radial-gradient(48% 60% at 22% 30%, color-mix(in srgb, currentColor 15%, transparent), transparent 72%),
+    radial-gradient(42% 55% at 80% 55%, color-mix(in srgb, currentColor 10%, transparent), transparent 74%),
+    radial-gradient(30% 40% at 55% 10%, rgb(var(--neon-violet-rgb) / 8%), transparent 74%);
+  mix-blend-mode: screen;
+}
+
+/* Glowing seam where sky meets floor. */
+.roadmap .horizon {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: var(--horizon);
+  height: 2px;
+  color: rgb(var(--scene-rgb));
+  transition: color 900ms var(--ease-in-out);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, currentColor 65%, transparent) 22%,
+    currentColor 50%,
+    color-mix(in srgb, currentColor 65%, transparent) 78%,
+    transparent
+  );
+  filter: drop-shadow(0 0 12px currentColor);
+}
+
+/* The ground. A large plane laid down with rotateX inside a perspective
+   wrapper; its grid is drawn with repeating gradients off currentColor (same
+   retint trick as the nebula) and the cross-lines stream toward the camera as
+   progress advances — scrolling reads as driving forward. */
+.roadmap .floor-wrap {
+  position: absolute;
+  inset: var(--horizon) 0 0;
+  perspective: 620px;
+  perspective-origin: 50% 0%;
+  overflow: hidden;
+  /* Grid fades up from the horizon rather than starting with a hard edge. */
+  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%);
+          mask-image: linear-gradient(180deg, transparent 0, #000 16%);
+}
+
+.roadmap .floor {
+  position: absolute;
+  inset: -4% -42% -150%;
+  transform: rotateX(58deg);
+  transform-origin: top center;
+  color: rgb(var(--scene-rgb));
+  transition: color 900ms var(--ease-in-out);
+  background-image:
+    /* Road strip up the middle, edges brighter than the bed. */
+    linear-gradient(
+      90deg,
+      transparent 0 40.5%,
+      color-mix(in srgb, currentColor 55%, transparent) 40.5% 41%,
+      color-mix(in srgb, currentColor 9%, transparent) 41% 59%,
+      color-mix(in srgb, currentColor 55%, transparent) 59% 59.5%,
+      transparent 59.5%
+    ),
+    /* Longitudinal grid lines. */
+    repeating-linear-gradient(
+      90deg,
+      color-mix(in srgb, currentColor 22%, transparent) 0 2px,
+      transparent 2px 90px
+    ),
+    /* Cross lines — the layer that streams. */
+    repeating-linear-gradient(
+      0deg,
+      color-mix(in srgb, currentColor 28%, transparent) 0 2px,
+      transparent 2px 96px
+    );
+  background-position: 0 0, 0 0, 0 calc(var(--track-progress) * 640px);
+}
+
+/* Blends the pinned frame into the neighbouring sections at top and bottom. */
+.roadmap .frame-fade {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    180deg,
+    var(--surface-base) 0,
+    transparent 9%,
+    transparent 91%,
+    var(--surface-base) 100%
+  );
+}
+
+/* =============================================================================
+   Gates — one per phase, flown along the road from JS (--gs scale, --gb
+   bottom, --go opacity). transform-origin at the base keeps them standing on
+   the ground as they scale.
+   ============================================================================= */
+.roadmap .gates {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.roadmap .gate {
+  position: absolute;
+  inset-inline-start: 50%;
+  inset-block-end: var(--gb, 54%);
+  width: min(46vw, 470px);
+  aspect-ratio: 2.15 / 1;
+  translate: -50% 0;
+  scale: var(--gs, 0.15);
+  opacity: var(--go, 0);
+  transform-origin: 50% 100%;
+  border: 3px solid color-mix(in srgb, currentColor 85%, transparent);
+  border-bottom: 0;
+  border-radius: 22px 22px 0 0;
+  box-shadow:
+    0 0 26px color-mix(in srgb, currentColor 45%, transparent),
+    inset 0 0 34px color-mix(in srgb, currentColor 14%, transparent);
+  will-change: scale, opacity;
+  /* Short damping so a fast flick does not step the gates in visible jumps.
+     Kept brief — longer and they lag behind the road they stand on. */
+  transition:
+    scale 200ms var(--ease-out),
+    opacity 200ms var(--ease-out);
+
+  &.status-shipped { color: var(--status-shipped); }
+  &.status-in-progress { color: var(--status-active); }
+  &.status-planned { color: var(--status-planned); }
+}
+
+.roadmap .gate-label {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 50%;
+  translate: -50% -58%;
+  padding: 4px 16px;
+  border-radius: var(--radius-pill);
+  font-family: var(--title-font);
+  font-size: 1.05rem;
+  font-weight: 800;
+  letter-spacing: 2.4px;
+  color: currentColor;
+  background: rgb(var(--surface-void-rgb) / 88%);
+  border: 1px solid color-mix(in srgb, currentColor 70%, transparent);
+  box-shadow: 0 0 16px color-mix(in srgb, currentColor 50%, transparent);
+}
+
+/* =============================================================================
+   Header strip and HUD
+   ============================================================================= */
+.roadmap .strip {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 24px;
+
+  & .section-subtitle {
+    margin-block-end: 0;
   }
+}
 
-  & .stop {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 100%;
-    justify-content: center;
-    z-index: 1;
+.roadmap .hud {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10px;
+  padding-top: 6px;
+}
+
+.roadmap .hud-count {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-family: var(--title-font);
+  font-weight: 800;
+  letter-spacing: 2px;
+}
 
-    &.above .card { margin-bottom: auto; margin-top: 0; }
-    &.below .card { margin-top: auto; margin-bottom: 0; }
+/* The rolling counter sizes its clip box in its own font size — spans inherit
+   it, so the digits can never overflow the window that crops them. */
+.roadmap .hud-now {
+  position: relative;
+  display: inline-block;
+  font-size: 1.5rem;
+  line-height: 1.2;
+  width: 2.4ch;
+  height: 1.2em;
+  overflow: hidden;
 
-    &.status-shipped { color: #6cf6c5; }
-    &.status-in-progress { color: #ffd76b; }
-    &.status-planned { color: #b878ff; }
+  & span {
+    position: absolute;
+    inset: 0;
+    text-align: center;
+    color: rgb(var(--scene-rgb));
+    text-shadow: 0 0 14px rgb(var(--scene-rgb) / 55%);
+    opacity: 0;
+    translate: 0 0.9em;
+    transition:
+      opacity var(--dur-slow) var(--ease-out),
+      translate var(--dur-slow) var(--ease-spring),
+      color 600ms var(--ease-in-out);
   }
+}
+
+.roadmap[data-phase='0'] .hud-now [data-idx='0'],
+.roadmap[data-phase='1'] .hud-now [data-idx='1'],
+.roadmap[data-phase='2'] .hud-now [data-idx='2'],
+.roadmap[data-phase='3'] .hud-now [data-idx='3'] {
+  opacity: 1;
+  translate: none;
+}
+
+.roadmap .hud-total {
+  font-size: 0.85rem;
+  color: var(--text-dim);
+}
+
+.roadmap .hud-bar {
+  position: relative;
+  width: 132px;
+  height: 3px;
+  border-radius: 2px;
+  background: rgb(var(--border-rgb) / 22%);
+  overflow: hidden;
 
-  & .pin {
+  &::after {
+    content: '';
     position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: radial-gradient(circle at 30% 25%, #2a335a 0%, #0a0f25 70%);
-    border: 2px solid currentColor;
-    transform: translate(-50%, -50%);
-    z-index: 2;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: calc(var(--track-progress) * 100%);
+    border-radius: inherit;
+    background: rgb(var(--scene-rgb));
+    box-shadow: 0 0 10px rgb(var(--scene-rgb) / 70%);
+    transition: background 600ms var(--ease-in-out);
   }
+}
+
+/* =============================================================================
+   Stages — all stacked in one slot; scroll decides which is on stage. The
+   container carries perspective so the swap is a genuine 3D tilt.
+   ============================================================================= */
+.roadmap .stages {
+  position: relative;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex: 0 0 auto;
+  min-height: clamp(280px, 40vh, 400px);
+  perspective: 1100px;
+}
 
-  & .stop.status-shipped .pin {
-    box-shadow: 0 0 12px rgb(108 246 197 / 70%), inset 0 0 10px rgb(108 246 197 / 35%);
+.roadmap .stage {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
+  align-items: center;
+  gap: clamp(20px, 4vw, 56px);
+  max-width: 1080px;
+  margin-inline: auto;
+  transition:
+    opacity var(--dur-slow) var(--ease-out),
+    translate var(--dur-slow) var(--ease-out),
+    rotate var(--dur-slow) var(--ease-out),
+    scale var(--dur-slow) var(--ease-out),
+    filter var(--dur-slow) var(--ease-out);
+
+  &.status-shipped { color: var(--status-shipped); --status-rgb: var(--status-shipped-rgb); }
+  &.status-in-progress { color: var(--status-active); --status-rgb: var(--status-active-rgb); }
+  &.status-planned { color: var(--status-planned); --status-rgb: var(--status-planned-rgb); }
+
+  &[data-state='ahead'] {
+    opacity: 0;
+    translate: 0 56px;
+    rotate: x 22deg;
+    scale: 0.94;
+    filter: blur(7px);
+    pointer-events: none;
   }
-  & .stop.status-in-progress .pin {
-    box-shadow: 0 0 12px rgb(255 215 107 / 70%), inset 0 0 10px rgb(255 215 107 / 35%);
-    animation: roadmap-pulse 1.6s ease-in-out infinite;
+
+  &[data-state='active'] {
+    opacity: 1;
+    translate: none;
+    rotate: none;
+    scale: 1;
+    filter: none;
   }
-  & .stop.status-planned .pin {
-    box-shadow: 0 0 12px rgb(184 120 255 / 60%), inset 0 0 10px rgb(184 120 255 / 30%);
+
+  &[data-state='behind'] {
+    opacity: 0;
+    translate: 0 -56px;
+    rotate: x -18deg;
+    scale: 0.94;
+    filter: blur(7px);
+    pointer-events: none;
   }
+}
 
-  & .card {
-    width: 92%;
-    padding: 18px 18px 16px;
-    background: linear-gradient(180deg, rgb(10 14 28 / 95%), rgb(7 11 24 / 96%));
-    border: 1px solid currentColor;
-    border-radius: 10px;
-    box-shadow: 0 0 18px color-mix(in srgb, currentColor 18%, transparent),
-                inset 0 0 22px rgb(55 68 148 / 12%);
+/* Ghost numeral: enormous outlined phase number behind the stage. Rides the
+   stage's own swap, so it needs no wiring of its own. */
+.roadmap .numeral {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 42%;
+  translate: -50% -54%;
+  z-index: 0;
+  font-family: var(--title-font);
+  font-size: clamp(9rem, 22vw, 15rem);
+  font-weight: 900;
+  line-height: 1;
+  color: transparent;
+  -webkit-text-stroke: 2px rgb(var(--status-rgb) / 16%);
+  pointer-events: none;
+  user-select: none;
+}
 
-    & .head {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 8px;
-    }
+.roadmap .panel {
+  position: relative;
+  z-index: 1;
+  padding: 30px 34px 28px;
+  border-radius: var(--radius-lg);
+  background: linear-gradient(
+    180deg,
+    rgb(var(--surface-void-rgb) / 82%),
+    rgb(var(--surface-void-rgb) / 62%)
+  );
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border: 1px solid rgb(var(--status-rgb) / 38%);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 7%),
+    0 0 26px rgb(var(--status-rgb) / 14%),
+    var(--elev-3);
 
-    & .quarter {
-      font-family: var(--title-font);
-      font-size: 1.2rem;
-      font-weight: 800;
-      letter-spacing: 1px;
-      color: #f6f3ff;
-      text-shadow: 0 0 12px rgb(174 150 255 / 35%);
-    }
+  & .head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+  }
 
-    & .status {
-      font-family: var(--content-font);
-      font-size: 0.68rem;
-      font-weight: 700;
-      letter-spacing: 1.4px;
-      text-transform: uppercase;
-      padding: 3px 8px;
-      border-radius: 999px;
-      color: currentColor;
-      background: color-mix(in srgb, currentColor 12%, transparent);
-      border: 1px solid currentColor;
-      box-shadow: 0 0 10px color-mix(in srgb, currentColor 30%, transparent);
-    }
+  & .phase {
+    font-family: var(--title-font);
+    font-size: 1.2rem;
+    font-weight: 800;
+    letter-spacing: 1.4px;
+    color: var(--text-title);
+    text-shadow: var(--glow-text-sm);
+  }
 
-    & h4 {
-      font-family: var(--title-font);
-      margin: 0 0 10px;
-      font-size: 1.05rem;
-      letter-spacing: 0.5px;
-      text-transform: uppercase;
-      color: #f6f3ff;
-    }
+  & .status {
+    font-family: var(--content-font);
+    font-size: 0.64rem;
+    font-weight: 700;
+    letter-spacing: 1.4px;
+    text-transform: uppercase;
+    padding: 3px 9px;
+    border-radius: var(--radius-pill);
+    background: rgb(var(--status-rgb) / 12%);
+    border: 1px solid rgb(var(--status-rgb) / 55%);
+    white-space: nowrap;
+  }
 
-    & ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-    }
+  & h3 {
+    font-family: var(--title-font);
+    margin: 0 0 14px;
+    font-size: clamp(1.3rem, 2.1vw, 1.7rem);
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    color: var(--text-title);
+  }
+
+  & ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 9px;
+  }
 
-    & ul li {
-      font-family: var(--content-font);
-      font-size: 0.9rem;
-      color: rgb(195 210 255 / 78%);
-      padding-left: 14px;
-      position: relative;
-
-      &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 9px;
-        width: 5px;
-        height: 5px;
-        border-radius: 50%;
-        background: currentColor;
-        opacity: 0.55;
-      }
+  & ul li {
+    font-family: var(--content-font);
+    font-size: 1rem;
+    line-height: 1.55;
+    color: var(--text-body);
+    padding-left: 16px;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 8px;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background: currentColor;
+      opacity: 0.65;
     }
   }
 }
 
-@keyframes roadmap-pulse {
-  0%, 100% { transform: translate(-50%, -50%) scale(1); }
-  50% { transform: translate(-50%, -50%) scale(1.25); }
+/* Holo slab: the phase's companion. The renders are opaque squares, so they
+   are framed, never floated; the slab idles on a slow 3D sway. */
+.roadmap .holo {
+  position: relative;
+  z-index: 1;
+  justify-self: center;
+  width: clamp(190px, 28vh, 300px);
+  aspect-ratio: 1;
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  border: 1px solid rgb(var(--status-rgb) / 55%);
+  box-shadow:
+    inset 0 0 0 1px rgb(0 0 0 / 40%),
+    0 0 30px rgb(var(--status-rgb) / 26%),
+    var(--elev-3);
+  animation: roadmap-holo-idle 8s ease-in-out infinite;
+
+  & img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* Scanlines sell the hologram; kept faint so the art stays the subject. */
+  & .holo-scan {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: repeating-linear-gradient(
+      0deg,
+      rgb(var(--status-rgb) / 7%) 0 1px,
+      transparent 1px 4px
+    );
+    mix-blend-mode: screen;
+  }
+
+  & .holo-glint {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: linear-gradient(
+      115deg,
+      transparent 38%,
+      rgb(255 255 255 / 16%) 48%,
+      rgb(var(--status-rgb) / 22%) 54%,
+      transparent 66%
+    );
+    translate: -140% 0;
+    animation: roadmap-holo-glint 5.5s var(--ease-in-out) infinite;
+  }
+}
+
+@keyframes roadmap-twinkle {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.45; }
 }
 
-@media (max-width: 1024px) {
-  .roadmap .track {
-    grid-template-columns: 1fr;
-    min-height: 0;
-    gap: 18px;
+@keyframes roadmap-holo-idle {
+  0%, 100% { translate: 0 -6px; rotate: y 7deg; }
+  50% { translate: 0 7px; rotate: y -7deg; }
+}
 
-    &::before { display: none; }
+@keyframes roadmap-holo-glint {
+  0%, 55% { translate: -140% 0; }
+  85%, 100% { translate: 140% 0; }
+}
+
+/* =============================================================================
+   Fallback: no pinning.
+
+   Narrow viewports and reduced motion get an ordinary stacked list with the
+   scene already complete. A pinned panel on a phone fights the collapsing URL
+   bar and leaves no room for the card it is pinning.
+   ============================================================================= */
+@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
+  .roadmap {
+    height: auto;
+    padding-block: var(--section-pad-block);
   }
-  .roadmap .stop {
+
+  .roadmap .pin {
+    position: static;
     height: auto;
+    margin-inline: 0;
+    padding: 0;
+    overflow: visible;
+    gap: 0;
+  }
 
-    &.above .card,
-    &.below .card { margin: 0; width: 100%; }
+  .roadmap .scene,
+  .roadmap .gates,
+  .roadmap .hud,
+  .roadmap .numeral,
+  .roadmap .holo {
+    display: none;
+  }
+
+  .roadmap .stages {
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-top: 24px;
+    perspective: none;
+  }
+
+  .roadmap .stage,
+  .roadmap .stage[data-state] {
+    position: relative;
+    inset: auto;
+    display: block;
+    max-width: none;
+    opacity: 1;
+    translate: none;
+    rotate: none;
+    scale: none;
+    filter: none;
+    pointer-events: auto;
   }
-  .roadmap .pin { display: none; }
 }
diff --git a/website/src/components/landing/Roadmap/index.tsx b/website/src/components/landing/Roadmap/index.tsx
index b0b9b692..14d95c2f 100644
--- a/website/src/components/landing/Roadmap/index.tsx
+++ b/website/src/components/landing/Roadmap/index.tsx
@@ -1,30 +1,174 @@
-import { ROADMAP, ROADMAP_STATUS_LABEL } from '@/content/landing';
+'use client';
+
+import { useCallback, useRef, type CSSProperties } from 'react';
+import Image from 'next/image';
+
+import { ROADMAP, ROADMAP_STATUS_LABEL, SECTION_COPY } from '@/content/landing';
+import useScrollScene from '@/hooks/useScrollScene';
+import { clamp01 } from '@/lib/math';
 import './Roadmap.css';
 
-const Roadmap = () => (
-  <section className="landing-section roadmap" id="roadmap">
-    <h3 className="section-title">Roadmap</h3>
-    <p className="section-subtitle">Where we&apos;ve been, what&apos;s shipping next.</p>
-    <ol className="track">
-      {ROADMAP.map(({ quarter, title, status, bullets }, idx) => (
-        <li className={`stop status-${status} ${idx % 2 === 0 ? 'above' : 'below'}`} key={quarter}>
-          <div className="card">
-            <div className="head">
-              <span className="quarter">{quarter}</span>
-              <span className="status">{ROADMAP_STATUS_LABEL[status]}</span>
+const { title: sectionTitle, subtitle } = SECTION_COPY.roadmap;
+
+const COUNT = ROADMAP.length;
+const SLICE = 1 / COUNT;
+
+/* Perspective constants for the gates. A gate sits `zAhead` phases in front of
+   the camera; apparent size falls off as Z0/(z+Z0), the classic 1/z with a
+   softening constant so the pass never divides by zero. */
+const Z0 = 0.42;
+const FAR = 2.6;
+const FADE_IN = 0.6;
+const PASS_FADE = 0.28;
+/** How far past the camera a gate keeps growing before it is fully faded.
+    Kept shallow so the overshoot never balloons over the header strip. */
+const PASS_OVERSHOOT = 0.18;
+
+const Roadmap = () => {
+  const gates = useRef<(HTMLElement | null)[]>([]);
+  const stages = useRef<(HTMLElement | null)[]>([]);
+
+  const onFrame = useCallback((progress: number, section: HTMLElement) => {
+    // `--track-progress` is published by useScrollScene itself.
+
+    // The active phase drives the scene hue, the HUD readout and the stage
+    // swap through one attribute. Written only on change — every selector
+    // keyed to it invalidates when it flips.
+    const active = Math.min(Math.floor(progress / SLICE), COUNT - 1);
+    if (section.dataset.phase !== String(active)) {
+      section.dataset.phase = String(active);
+    }
+
+    // Fly each gate along the road. Passed gates keep growing for a beat while
+    // they fade, which is what sells the fly-through.
+    gates.current.forEach((el, index) => {
+      if (!el) return;
+      const zAhead = index + 0.5 - progress * COUNT;
+      const s = Z0 / (Math.max(zAhead, -PASS_OVERSHOOT) + Z0);
+
+      let opacity: number;
+      if (zAhead <= 0) opacity = clamp01(1 + zAhead / PASS_FADE);
+      else if (zAhead >= FAR) opacity = 0;
+      else if (zAhead > FAR - FADE_IN) opacity = (FAR - zAhead) / FADE_IN;
+      else opacity = 1;
+
+      // The flight corridor stays inside the road band: gates descend from the
+      // horizon (54% from the bottom) only to ~44%, which sits above the
+      // enlarged stage area at every viewport this scene runs on. Nearness is
+      // carried almost entirely by scale, and transform-origin pins the base so
+      // the pass overshoot grows upward, away from the cards.
+      el.style.setProperty('--gs', s.toFixed(4));
+      el.style.setProperty('--gb', `${(54 - 10 * Math.min(s, 1)).toFixed(2)}%`);
+      el.style.setProperty('--go', opacity.toFixed(3));
+    });
+
+    stages.current.forEach((el, index) => {
+      if (!el) return;
+      const state = index < active ? 'behind' : index > active ? 'ahead' : 'active';
+      if (el.dataset.state !== state) el.dataset.state = state;
+    });
+  }, []);
+
+  const { sectionRef, pinRef } = useScrollScene(onFrame);
+
+  return (
+    <section
+      ref={sectionRef}
+      className="landing-section roadmap"
+      id="roadmap"
+      data-phase="0"
+      style={{ '--phase-count': COUNT } as CSSProperties}
+    >
+      <div className="pin" ref={pinRef}>
+        {/* Backdrop: starfield and nebula above the horizon, a perspective
+            grid floor below it. The floor's grid streams toward the camera as
+            progress advances, so scrolling reads as driving. */}
+        <div className="scene" aria-hidden="true">
+          <span className="stars s1" />
+          <span className="stars s2" />
+          <span className="stars s3" />
+          <span className="nebula" />
+          <span className="horizon" />
+          <span className="floor-wrap">
+            <span className="floor" />
+          </span>
+          <span className="frame-fade" />
+        </div>
+
+        {/* Neon gates standing on the road, one per phase. They approach from
+            the horizon and sweep past the camera as their phase arrives. */}
+        <div className="gates" aria-hidden="true">
+          {ROADMAP.map(({ phase, status }, index) => (
+            <span
+              key={phase}
+              className={`gate status-${status}`}
+              ref={(el) => {
+                gates.current[index] = el;
+              }}
+            >
+              <span className="gate-label">{phase}</span>
+            </span>
+          ))}
+        </div>
+
+        <header className="strip">
+          <div className="strip-copy">
+            <h2 className="section-title">{sectionTitle}</h2>
+            <p className="section-subtitle">{subtitle}</p>
+          </div>
+
+          <div className="hud" aria-hidden="true">
+            <div className="hud-count">
+              <span className="hud-now">
+                {ROADMAP.map(({ phase }, index) => (
+                  <span key={phase} data-idx={index}>{phase}</span>
+                ))}
+              </span>
+              <span className="hud-total">/ {String(COUNT).padStart(2, '0')}</span>
             </div>
-            <h4>{title}</h4>
-            <ul>
-              {bullets.map((bullet) => (
-                <li key={bullet}>{bullet}</li>
-              ))}
-            </ul>
+            <span className="hud-bar" />
           </div>
-          <span className="pin" aria-hidden="true" />
-        </li>
-      ))}
-    </ol>
-  </section>
-);
+        </header>
+
+        {/* Every stage stays in the document; only its visual state changes, so
+            the whole roadmap is available to a screen reader at any scroll
+            position rather than one card at a time. */}
+        <ol className="stages">
+          {ROADMAP.map(({ phase, title, status, bullets, art }, index) => (
+            <li
+              key={phase}
+              className={`stage status-${status}`}
+              data-state={index === 0 ? 'active' : 'ahead'}
+              ref={(el) => {
+                stages.current[index] = el;
+              }}
+            >
+              <span className="numeral" aria-hidden="true">{phase}</span>
+
+              <div className="panel">
+                <div className="head">
+                  <span className="phase">{phase}</span>
+                  <span className="status">{ROADMAP_STATUS_LABEL[status]}</span>
+                </div>
+                <h3>{title}</h3>
+                <ul>
+                  {bullets.map((bullet) => (
+                    <li key={bullet}>{bullet}</li>
+                  ))}
+                </ul>
+              </div>
+
+              <div className="holo" aria-hidden="true">
+                <Image src={art} alt="" width={512} height={512} sizes="260px" />
+                <span className="holo-scan" />
+                <span className="holo-glint" />
+              </div>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+  );
+};
 
 export default Roadmap;
diff --git a/website/src/components/landing/Stats/Stats.css b/website/src/components/landing/Stats/Stats.css
index 9ff74ba1..f2dd09ff 100644
--- a/website/src/components/landing/Stats/Stats.css
+++ b/website/src/components/landing/Stats/Stats.css
@@ -4,13 +4,33 @@
   gap: 16px;
   align-items: center;
   padding: var(--section-pad-block-band) var(--landing-gutter);
-  background: linear-gradient(90deg, rgb(88 35 188 / 40%) 0%, rgb(45 84 225 / 35%) 50%, rgb(15 149 180 / 34%) 100%);
-  border-top: 1px solid rgb(102 132 255 / 20%);
-  border-bottom: 1px solid rgb(102 132 255 / 20%);
+  background: linear-gradient(
+    90deg,
+    rgb(var(--wash-violet-rgb) / 34%) 0%,
+    rgb(var(--border-rgb) / 26%) 50%,
+    rgb(var(--wash-cyan-rgb) / 26%) 100%
+  );
+  border-block: 1px solid rgb(var(--border-rgb) / 22%);
 
   & .item {
+    position: relative;
     text-align: center;
-    color: #ebf0ff;
+    color: var(--text-bright);
+
+    /* Hairline separators between figures, not after the last one. */
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      inset-block: 12%;
+      inset-inline-end: calc(var(--space-2) * -1);
+      width: 1px;
+      background: linear-gradient(
+        180deg,
+        transparent,
+        rgb(var(--border-rgb) / 38%) 50%,
+        transparent
+      );
+    }
 
     & strong {
       display: block;
@@ -19,18 +39,21 @@
       font-weight: 800;
       line-height: 1.1;
       letter-spacing: 0.5px;
-      color: #b6e2ff;
-      background: linear-gradient(92deg, #7dd6ff 0%, #b58cff 60%, #ff7bcb 100%);
+      /* Fixed-width digits: without this the figure jitters as it counts, since
+         proportional glyphs change the string's width on nearly every frame. */
+      font-variant-numeric: tabular-nums;
+      color: var(--text-accent);
+      background: var(--gradient-spectrum);
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      text-shadow: 0 0 18px rgb(170 140 255 / 35%);
+      text-shadow: var(--glow-text-sm);
     }
 
     & span {
       font-family: var(--content-font);
       font-size: 0.98rem;
-      color: rgb(188 205 255 / 82%);
+      color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.7px;
     }
@@ -39,16 +62,29 @@
 
 @supports not ((background-clip: text) or (-webkit-background-clip: text)) {
   .stats .item strong {
-    color: #b6e2ff;
-    -webkit-text-fill-color: #b6e2ff;
+    color: var(--text-accent);
+    -webkit-text-fill-color: var(--text-accent);
     background: none;
   }
 }
 
 @media (max-width: 1024px) {
-  .stats { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
+  .stats {
+    grid-template-columns: repeat(2, minmax(160px, 1fr));
+    gap: 28px 16px;
+  }
+
+  .stats .item:nth-child(2)::after {
+    display: none;
+  }
 }
 
 @media (max-width: 768px) {
-  .stats { grid-template-columns: 1fr; }
+  .stats {
+    grid-template-columns: 1fr;
+  }
+
+  .stats .item::after {
+    display: none;
+  }
 }
diff --git a/website/src/components/landing/Stats/index.tsx b/website/src/components/landing/Stats/index.tsx
index 8c928380..dadd058b 100644
--- a/website/src/components/landing/Stats/index.tsx
+++ b/website/src/components/landing/Stats/index.tsx
@@ -1,21 +1,88 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+import { STATS, type Stat } from '@/content/landing';
+import { prefersReducedMotion } from '@/lib/media';
 import './Stats.css';
 
-const ITEMS = [
-  { value: '10,000+', label: 'Unique Pets' },
-  { value: '5,250+', label: 'Pet Holders' },
-  { value: '1M+', label: 'Battles Fought' },
-  { value: '$2.5M', label: 'Rewards Earned' },
-];
-
-const Stats = () => (
-  <section className="stats" aria-label="Project statistics" id="stats">
-    {ITEMS.map(({ value, label }) => (
-      <div className="item" key={label}>
-        <strong>{value}</strong>
-        <span>{label}</span>
-      </div>
-    ))}
-  </section>
-);
+const COUNT_MS = 1500;
+
+const format = ({ prefix = '', suffix = '', decimals = 0 }: Stat, n: number) =>
+  `${prefix}${n.toLocaleString('en-US', {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  })}${suffix}`;
+
+const Stats = () => {
+  const sectionRef = useRef<HTMLElement>(null);
+  const valueRefs = useRef<(HTMLElement | null)[]>([]);
+
+  useEffect(() => {
+    const section = sectionRef.current;
+    if (!section) return;
+
+    const write = (progress: number) => {
+      STATS.forEach((item, index) => {
+        const el = valueRefs.current[index];
+        if (el) el.textContent = format(item, item.value * progress);
+      });
+    };
+
+    if (prefersReducedMotion()) return;
+
+    let frame = 0;
+    let startedAt = 0;
+
+    const tick = (now: number) => {
+      if (!startedAt) startedAt = now;
+      const t = Math.min((now - startedAt) / COUNT_MS, 1);
+      write(1 - (1 - t) ** 3);
+      if (t < 1) frame = requestAnimationFrame(tick);
+    };
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries[0]?.isIntersecting) return;
+        // Count once. Replaying on every pass turns a flourish into a tic.
+        observer.disconnect();
+        frame = requestAnimationFrame(tick);
+      },
+      { threshold: 0.35 },
+    );
+
+    observer.observe(section);
+
+    return () => {
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, []);
+
+  return (
+    <section
+      ref={sectionRef}
+      className="stats"
+      aria-label="Project statistics"
+      id="stats"
+      data-reveal-stagger="80"
+    >
+      {STATS.map((item, index) => (
+        <div className="item" key={item.label} data-reveal="up">
+          {/* Rendered at its final value so the figure is correct before hydration
+              and without JS; the counter only rewinds once it is on screen. */}
+          <strong
+            ref={(el) => {
+              valueRefs.current[index] = el;
+            }}
+          >
+            {format(item, item.value)}
+          </strong>
+          <span>{item.label}</span>
+        </div>
+      ))}
+    </section>
+  );
+};
 
 export default Stats;
diff --git a/website/src/components/landing/Testimonials/Testimonials.css b/website/src/components/landing/Testimonials/Testimonials.css
deleted file mode 100644
index 0139825b..00000000
--- a/website/src/components/landing/Testimonials/Testimonials.css
+++ /dev/null
@@ -1,74 +0,0 @@
-.testimonials {
-  & .grid {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(220px, 1fr));
-    gap: 48px 36px;
-    margin-top: 8px;
-
-    & > :nth-child(odd) { transform: translateY(0); }
-    & > :nth-child(even) { transform: translateY(28px); }
-  }
-
-  & .card {
-    position: relative;
-    margin: 0;
-    padding: 24px 4px 0;
-    background: transparent;
-    border: none;
-    box-shadow: none;
-    color: #eaf0ff;
-  }
-
-  & .quote-mark {
-    display: block;
-    font-family: var(--title-font);
-    font-size: 5.5rem;
-    line-height: 0.6;
-    background: linear-gradient(92deg, #7dd6ff, #b58cff, #ff7bcb);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    filter: drop-shadow(0 0 12px rgb(184 140 255 / 45%));
-    margin-bottom: 4px;
-  }
-
-  & blockquote {
-    font-family: var(--content-font);
-    margin: 0 0 16px;
-    font-size: 1.06rem;
-    line-height: 1.6;
-    color: rgb(225 235 255 / 92%);
-    border-left: 2px solid rgb(184 140 255 / 35%);
-    padding-left: 16px;
-  }
-
-  & figcaption {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding-left: 16px;
-
-    & strong {
-      font-family: var(--title-font);
-      font-size: 0.92rem;
-      letter-spacing: 0.6px;
-      text-transform: uppercase;
-      color: #f6f3ff;
-    }
-
-    & span {
-      font-family: var(--content-font);
-      font-size: 0.82rem;
-      color: rgb(170 188 230 / 70%);
-    }
-  }
-}
-
-@media (max-width: 1024px) {
-  .testimonials .grid {
-    grid-template-columns: 1fr;
-    gap: 32px;
-
-    & > :nth-child(even) { transform: none; }
-  }
-}
diff --git a/website/src/components/landing/Testimonials/index.tsx b/website/src/components/landing/Testimonials/index.tsx
deleted file mode 100644
index 768fad9c..00000000
--- a/website/src/components/landing/Testimonials/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { TESTIMONIALS } from '@/content/landing';
-import './Testimonials.css';
-
-const Testimonials = () => (
-  <section className="landing-section testimonials" id="players">
-    <h3 className="section-title">From the Pack</h3>
-    <p className="section-subtitle">What players are saying after their first 100 battles.</p>
-    <div className="grid">
-      {TESTIMONIALS.map(({ quote, author, role }) => (
-        <figure className="card" key={author}>
-          <span className="quote-mark" aria-hidden="true">&ldquo;</span>
-          <blockquote>{quote}</blockquote>
-          <figcaption>
-            <strong>{author}</strong>
-            <span>{role}</span>
-          </figcaption>
-        </figure>
-      ))}
-    </div>
-  </section>
-);
-
-export default Testimonials;
diff --git a/website/src/components/landing/index.ts b/website/src/components/landing/index.ts
index 30ac6518..0baa886f 100644
--- a/website/src/components/landing/index.ts
+++ b/website/src/components/landing/index.ts
@@ -7,6 +7,6 @@ export { default as Footer } from './Footer';
 export { default as Hero } from './Hero';
 export { default as HowItWorks } from './HowItWorks';
 export { default as Pets } from './Pets';
+export { default as Proof } from './Proof';
 export { default as Roadmap } from './Roadmap';
 export { default as Stats } from './Stats';
-export { default as Testimonials } from './Testimonials';
diff --git a/website/src/components/layout/Layout.tsx b/website/src/components/layout/Layout.tsx
index 385d9b56..f2a79b44 100644
--- a/website/src/components/layout/Layout.tsx
+++ b/website/src/components/layout/Layout.tsx
@@ -2,8 +2,9 @@
 
 import React from 'react';
 
-import { NeonButton } from '@/components/common';
-import { openApp } from '@/lib/openApp';
+import SiteHeader from '@/components/layout/SiteHeader';
+import { SITE } from '@/content/landing';
+import useRevealObserver from '@/hooks/useRevealObserver';
 
 type LayoutProps = {
   children: React.ReactNode;
@@ -16,24 +17,16 @@ const Layout: React.FC<LayoutProps> = ({
   children,
   containerClassName,
   contentClassName,
-  title = 'Crypto Pets',
+  title = SITE.name,
 }) => {
+  useRevealObserver();
+
   const containerClass = ['main-container', containerClassName].filter(Boolean).join(' ');
   const contentClass = ['main-content', contentClassName].filter(Boolean).join(' ');
 
   return (
     <div className={containerClass}>
-      <div className="main-header">
-        <div className="title">
-          <h1>{title}</h1>
-        </div>
-        <div className="wallet-section">
-          <NeonButton type="button" tone="emerald" onClick={openApp}>
-            Play Now
-          </NeonButton>
-        </div>
-      </div>
-
+      <SiteHeader title={title} />
       <div className={contentClass}>{children}</div>
     </div>
   );
diff --git a/website/src/components/layout/SiteHeader/SiteHeader.css b/website/src/components/layout/SiteHeader/SiteHeader.css
new file mode 100644
index 00000000..a760c490
--- /dev/null
+++ b/website/src/components/layout/SiteHeader/SiteHeader.css
@@ -0,0 +1,466 @@
+/* =============================================================================
+   Site header — a floating glass pill rather than a full-width bar.
+
+   The shell carries the glass; the header itself is only a positioning frame and
+   is transparent to pointer events, so the gutter either side of the pill does
+   not swallow clicks on the hero beneath it.
+   ============================================================================= */
+/* The header's height is constant. Condensing changes only how the glass reads
+   — opacity, blur, border, elevation — and never its size. A header that
+   changes height changes where every anchor should land, and since a nav target
+   is always far enough down to arrive condensed, no single offset could be
+   right for both states. */
+.site-header {
+  --header-inset: 14px;
+  --header-gutter: var(--landing-gutter);
+  --shell-pad-block: 9px;
+
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline: 0;
+  z-index: var(--z-header);
+  display: flex;
+  justify-content: center;
+  padding: var(--header-inset) var(--header-gutter);
+  pointer-events: none;
+  transition: padding var(--dur-slow) var(--ease-out);
+}
+
+.site-header .shell {
+  pointer-events: auto;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: clamp(10px, 2vw, 28px);
+  width: min(100%, 1180px);
+  padding: var(--shell-pad-block) var(--shell-pad-block) var(--shell-pad-block) 22px;
+  border-radius: var(--radius-pill);
+  border: 1px solid rgb(var(--border-rgb) / 26%);
+  background: linear-gradient(
+    180deg,
+    rgb(var(--surface-void-rgb) / 62%),
+    rgb(var(--surface-void-rgb) / 46%)
+  );
+  /* saturate() is what keeps the neon behind the glass reading as neon. Without
+     it the backdrop blurs to grey and the pill looks like frosted plastic. */
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow:
+    /* Specular top edge — the single detail that reads as glass rather than
+       as a translucent rectangle. */
+    inset 0 1px 0 rgb(255 255 255 / 12%),
+    inset 0 -1px 0 rgb(0 0 0 / 28%),
+    var(--elev-3),
+    0 0 24px rgb(var(--border-rgb) / 10%);
+  transition:
+    padding var(--dur-slow) var(--ease-out),
+    border-color var(--dur-slow) var(--ease-out),
+    background var(--dur-slow) var(--ease-out),
+    box-shadow var(--dur-slow) var(--ease-out);
+}
+
+/* Older Safari and Firefox-with-backdrop-disabled would otherwise show the hero
+   straight through the pill and make the nav unreadable. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .site-header .shell {
+    background: rgb(var(--surface-void-rgb) / 92%);
+  }
+}
+
+/* Condensed: brighter and more opaque once the page has moved. Size unchanged. */
+.site-header.is-condensed .shell {
+  border-color: rgb(var(--border-rgb) / 42%);
+  background: linear-gradient(
+    180deg,
+    rgb(var(--surface-void-rgb) / 82%),
+    rgb(var(--surface-void-rgb) / 68%)
+  );
+  backdrop-filter: blur(28px) saturate(200%);
+  -webkit-backdrop-filter: blur(28px) saturate(200%);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 16%),
+    inset 0 -1px 0 rgb(0 0 0 / 32%),
+    var(--elev-4),
+    0 0 30px rgb(var(--border-rgb) / 16%);
+}
+
+/* =============================================================================
+   Brand
+   ============================================================================= */
+.site-header .brand {
+  flex: 0 0 auto;
+  position: relative;
+  text-decoration: none;
+  color: inherit;
+  line-height: 1;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: -60% -30%;
+    background: radial-gradient(
+      ellipse at center,
+      rgb(var(--neon-violet-rgb) / 26%) 0%,
+      rgb(var(--border-rgb) / 12%) 48%,
+      transparent 76%
+    );
+    filter: blur(8px);
+    pointer-events: none;
+    z-index: var(--z-base);
+  }
+}
+
+.site-header .brand-name {
+  position: relative;
+  z-index: var(--z-raised);
+  display: block;
+  font-family: var(--title-font);
+  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
+  font-weight: 700;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  color: var(--text-title);
+  text-shadow: var(--glow-text-md);
+  white-space: nowrap;
+}
+
+/* =============================================================================
+   Nav
+   ============================================================================= */
+.site-header .nav {
+  flex: 1 1 auto;
+  display: flex;
+  justify-content: center;
+  min-width: 0;
+
+  /* The sliding indicator. Position and width come from JS measurement, because
+     the links are content-width and only layout knows how wide each one is. */
+  & ul {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 0;
+      width: var(--indicator-w, 0);
+      border-radius: var(--radius-pill);
+      background: linear-gradient(
+        180deg,
+        rgb(var(--border-rgb) / 26%),
+        rgb(var(--border-rgb) / 12%)
+      );
+      box-shadow:
+        inset 0 1px 0 rgb(255 255 255 / 10%),
+        0 0 14px rgb(var(--border-rgb) / 22%);
+      opacity: var(--indicator-opacity, 0);
+      translate: var(--indicator-x, 0);
+      /* Before the first measurement there is nowhere meaningful to travel from,
+         so only the fade is animated. Movement is enabled once positioned. */
+      transition: opacity var(--dur-base) var(--ease-out);
+      pointer-events: none;
+    }
+
+    &[data-indicator-ready]::before {
+      transition:
+        translate var(--dur-slow) var(--ease-spring),
+        width var(--dur-slow) var(--ease-spring),
+        opacity var(--dur-base) var(--ease-out);
+    }
+  }
+
+  & li {
+    position: relative;
+    z-index: var(--z-raised);
+  }
+
+  & a {
+    display: block;
+    padding: 8px 13px;
+    border-radius: var(--radius-pill);
+    font-family: var(--content-font);
+    font-size: 0.78rem;
+    font-weight: 600;
+    letter-spacing: 0.7px;
+    text-transform: uppercase;
+    white-space: nowrap;
+    color: var(--text-muted);
+    transition:
+      color var(--dur-base) var(--ease-out),
+      background var(--dur-base) var(--ease-out);
+
+    &:hover {
+      color: var(--text-title);
+      background: var(--surface-veil-2);
+    }
+
+    &[aria-current] {
+      color: var(--text-title);
+      text-shadow: var(--glow-text-sm);
+    }
+
+    &:focus-visible {
+      outline: 2px solid rgb(var(--border-rgb) / 60%);
+      outline-offset: 2px;
+    }
+  }
+}
+
+.site-header .actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Pill CTA, to match the shell it sits in. NeonButton's default 2px radius is
+   right for the sharp-edged neon panels elsewhere, but reads as a rectangle
+   dropped inside a fully rounded bar. */
+.site-header .actions .neon-btn {
+  border-radius: var(--radius-pill);
+  padding-inline: 18px;
+}
+
+/* =============================================================================
+   Menu toggle — two bars that cross into an X.
+   ============================================================================= */
+.site-header .menu-toggle {
+  display: none;
+  position: relative;
+  width: 38px;
+  height: 34px;
+  padding: 0;
+  border: 1px solid rgb(var(--border-rgb) / 30%);
+  border-radius: var(--radius-pill);
+  background: var(--surface-veil-1);
+  cursor: pointer;
+  transition:
+    border-color var(--dur-base) var(--ease-out),
+    background var(--dur-base) var(--ease-out);
+
+  &:hover {
+    border-color: rgb(var(--border-rgb) / 55%);
+    background: var(--surface-veil-2);
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--border-rgb) / 60%);
+    outline-offset: 2px;
+  }
+
+  & .bars,
+  & .bars::before,
+  & .bars::after {
+    position: absolute;
+    left: 50%;
+    width: 16px;
+    height: 1.5px;
+    border-radius: 2px;
+    background: var(--text-accent);
+    box-shadow: 0 0 6px rgb(var(--border-rgb) / 55%);
+    transition:
+      translate var(--dur-base) var(--ease-out),
+      rotate var(--dur-base) var(--ease-out),
+      opacity var(--dur-fast) var(--ease-out);
+  }
+
+  & .bars {
+    top: 50%;
+    translate: -50% -50%;
+    opacity: 0;
+  }
+
+  & .bars::before,
+  & .bars::after {
+    content: '';
+    left: 0;
+  }
+
+  & .bars::before {
+    translate: 0 -5px;
+  }
+
+  & .bars::after {
+    translate: 0 5px;
+  }
+}
+
+.site-header.is-open .menu-toggle .bars {
+  &::before {
+    translate: 0 0;
+    rotate: 45deg;
+  }
+
+  &::after {
+    translate: 0 0;
+    rotate: -45deg;
+  }
+}
+
+/* =============================================================================
+   Drawer
+   ============================================================================= */
+.site-header .drawer {
+  pointer-events: auto;
+  position: absolute;
+  inset-block-start: 100%;
+  inset-inline: var(--header-gutter);
+  padding: 10px;
+  border-radius: var(--radius-xl);
+  border: 1px solid rgb(var(--border-rgb) / 32%);
+  background: linear-gradient(
+    180deg,
+    rgb(var(--surface-void-rgb) / 90%),
+    rgb(var(--surface-void-rgb) / 78%)
+  );
+  backdrop-filter: blur(28px) saturate(190%);
+  -webkit-backdrop-filter: blur(28px) saturate(190%);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 12%),
+    var(--elev-4),
+    0 0 34px rgb(var(--border-rgb) / 14%);
+  opacity: 0;
+  translate: 0 -10px;
+  transition:
+    opacity var(--dur-slow) var(--ease-out),
+    translate var(--dur-slow) var(--ease-out);
+
+  &.is-open {
+    opacity: 1;
+    translate: none;
+  }
+
+  & ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  & a {
+    display: block;
+    padding: 13px 16px;
+    border-radius: var(--radius-md);
+    font-family: var(--content-font);
+    font-size: 0.86rem;
+    font-weight: 600;
+    letter-spacing: 0.7px;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    transition:
+      color var(--dur-base) var(--ease-out),
+      background var(--dur-base) var(--ease-out);
+
+    &:hover {
+      color: var(--text-title);
+      background: var(--surface-veil-2);
+    }
+
+    &[aria-current] {
+      color: var(--text-title);
+      background: rgb(var(--border-rgb) / 16%);
+      text-shadow: var(--glow-text-sm);
+    }
+
+    &:focus-visible {
+      outline: 2px solid rgb(var(--border-rgb) / 60%);
+      outline-offset: -2px;
+    }
+  }
+}
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .site-header .drawer {
+    background: rgb(var(--surface-void-rgb) / 97%);
+  }
+}
+
+/* Dims the page behind the open drawer and gives a tap-anywhere close. Keyboard
+   users get Escape, which is why an aria-hidden div is acceptable here. */
+.site-header .scrim {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background: rgb(2 4 10 / 55%);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--dur-slow) var(--ease-out);
+}
+
+.site-header.is-open .scrim {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+body.is-drawer-open {
+  overflow: hidden;
+}
+
+/* =============================================================================
+   Reading progress hairline
+   ============================================================================= */
+.site-header .progress {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+  height: 2px;
+  --spectrum-angle: 90deg;
+  background: var(--gradient-spectrum);
+  box-shadow: 0 0 10px rgb(var(--glow-text-rgb) / 55%);
+  transform: scaleX(var(--scroll-progress, 0));
+  transform-origin: 0 50%;
+  opacity: 0;
+  transition: opacity var(--dur-slow) var(--ease-out);
+}
+
+.site-header.is-condensed .progress {
+  opacity: 1;
+}
+
+/* =============================================================================
+   Responsive
+
+   The nav collapses below 900px and is not yet replaced by anything — that is
+   the drawer's job, next. Hiding it here is not a regression: the header had no
+   nav at all before this.
+   ============================================================================= */
+@media (max-width: 900px) {
+  .site-header .nav {
+    display: none;
+  }
+
+  .site-header .menu-toggle {
+    display: block;
+  }
+
+  .site-header .shell {
+    justify-content: space-between;
+  }
+}
+
+/* Above the breakpoint the drawer never opens, so keep it out of the layout
+   entirely rather than relying on `inert` alone. */
+@media (min-width: 901px) {
+  .site-header .drawer,
+  .site-header .scrim {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .site-header {
+    --header-gutter: 14px;
+  }
+
+  .site-header .shell {
+    padding-inline: 16px 10px;
+  }
+}
diff --git a/website/src/components/layout/SiteHeader/SiteHeader.tsx b/website/src/components/layout/SiteHeader/SiteHeader.tsx
new file mode 100644
index 00000000..c0b99cfa
--- /dev/null
+++ b/website/src/components/layout/SiteHeader/SiteHeader.tsx
@@ -0,0 +1,228 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState, type MouseEvent } from 'react';
+import clsx from 'clsx';
+
+import { NeonButton } from '@/components/common';
+import { NAV_LINKS, SITE } from '@/content/landing';
+import useActiveSection from '@/hooks/useActiveSection';
+import useHashLanding from '@/hooks/useHashLanding';
+import useHeaderScroll from '@/hooks/useHeaderScroll';
+import { prefersReducedMotion } from '@/lib/media';
+import { openApp } from '@/lib/openApp';
+import { findSection, scrollToSection } from '@/lib/scrollToSection';
+import './SiteHeader.css';
+
+/** Module scope keeps the array referentially stable across renders. */
+const NAV_IDS = NAV_LINKS.map(({ href }) => href.replace('#', ''));
+
+/** Width at which the inline nav gives way to the drawer. Matches SiteHeader.css. */
+const DRAWER_QUERY = '(max-width: 900px)';
+
+type SiteHeaderProps = {
+  title: string;
+};
+
+export default function SiteHeader({ title }: SiteHeaderProps) {
+  const { ref, condensed } = useHeaderScroll<HTMLElement>();
+  const activeId = useActiveSection(NAV_IDS);
+
+  const [open, setOpen] = useState(false);
+  const listRef = useRef<HTMLUListElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const drawerRef = useRef<HTMLDivElement>(null);
+
+  const close = useCallback(() => setOpen(false), []);
+
+  useHashLanding();
+
+  /**
+   * Takes over the anchor jump, which cannot skip a section's own top padding.
+   * The landing itself is `scrollToSection`'s problem, not the header's.
+   */
+  const goToSection = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>, href: string, fromDrawer = false) => {
+      // Leave modified clicks alone so open-in-new-tab still works.
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+
+      const target = findSection(href);
+      if (!target) return;
+
+      event.preventDefault();
+      close();
+      if (fromDrawer) toggleRef.current?.focus();
+
+      scrollToSection(target, { smooth: !prefersReducedMotion() });
+      window.history.pushState(null, '', href);
+    },
+    [close],
+  );
+
+  // Slide the indicator behind the active link. Measured rather than expressed
+  // in CSS because the links are content-width, so the pill's offset and width
+  // are only knowable from layout.
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+
+    const position = () => {
+      const link = activeId
+        ? list.querySelector<HTMLElement>(`[data-nav-id="${activeId}"]`)
+        : null;
+
+      if (!link) {
+        list.style.setProperty('--indicator-opacity', '0');
+        return;
+      }
+
+      // Measured against the list's own box rather than via offsetLeft, which
+      // resolves against the nearest positioned ancestor. The <li> is relatively
+      // positioned to sit above the pill, so offsetLeft reported ~0 for every
+      // link and the indicator stayed pinned under the first one, resizing in
+      // place instead of sliding.
+      const listBox = list.getBoundingClientRect();
+      const linkBox = link.getBoundingClientRect();
+
+      list.style.setProperty('--indicator-x', `${linkBox.left - listBox.left}px`);
+      list.style.setProperty('--indicator-w', `${linkBox.width}px`);
+      list.style.setProperty('--indicator-opacity', '1');
+
+      // Slide only once it has a real position to slide from; the first
+      // placement fades in where it belongs rather than travelling there.
+      if (!list.dataset.indicatorReady) {
+        requestAnimationFrame(() => {
+          list.dataset.indicatorReady = 'true';
+        });
+      }
+    };
+
+    position();
+    window.addEventListener('resize', position, { passive: true });
+    return () => window.removeEventListener('resize', position);
+  }, [activeId]);
+
+  // Close the drawer if the viewport grows past the breakpoint while it is open,
+  // otherwise it stays mounted and invisible with the page still locked.
+  useEffect(() => {
+    if (!open) return;
+
+    const query = window.matchMedia(DRAWER_QUERY);
+    const onChange = () => {
+      if (!query.matches) close();
+    };
+
+    query.addEventListener('change', onChange);
+    return () => query.removeEventListener('change', onChange);
+  }, [open, close]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') close();
+    };
+
+    // `inert` on the page body is the trap: it removes everything behind the
+    // drawer from the tab order and the accessibility tree in one attribute,
+    // rather than hand-cycling focus on every Tab.
+    const content = document.querySelector('.main-content');
+    content?.setAttribute('inert', '');
+    document.body.classList.add('is-drawer-open');
+    document.addEventListener('keydown', onKeyDown);
+
+    drawerRef.current?.querySelector('a')?.focus();
+
+    return () => {
+      content?.removeAttribute('inert');
+      document.body.classList.remove('is-drawer-open');
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [open, close]);
+
+  const handleClose = () => {
+    close();
+    toggleRef.current?.focus();
+  };
+
+  return (
+    <header ref={ref} className={clsx('site-header', condensed && 'is-condensed', open && 'is-open')}>
+      {/* Reading progress. Sits at the viewport's top edge, outside the pill. */}
+      <span className="progress" aria-hidden="true" />
+
+      <div className="shell">
+        <a className="brand" href="#top" onClick={(event) => goToSection(event, '#top')}>
+          <span className="brand-name">{title}</span>
+        </a>
+
+        <nav className="nav" aria-label="Sections">
+          <ul ref={listRef}>
+            {NAV_LINKS.map(({ label, href }) => {
+              const id = href.replace('#', '');
+              return (
+                <li key={href}>
+                  <a
+                    href={href}
+                    data-nav-id={id}
+                    aria-current={activeId === id ? 'true' : undefined}
+                    onClick={(event) => goToSection(event, href)}
+                  >
+                    {label}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+
+        <div className="actions">
+          <NeonButton type="button" tone="emerald" size="sm" onClick={openApp}>
+            {SITE.playCta}
+          </NeonButton>
+
+          <button
+            ref={toggleRef}
+            type="button"
+            className="menu-toggle"
+            aria-expanded={open}
+            aria-controls="site-drawer"
+            aria-label={open ? 'Close menu' : 'Open menu'}
+            onClick={() => setOpen((value) => !value)}
+          >
+            <span className="bars" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+
+      <div
+        ref={drawerRef}
+        id="site-drawer"
+        className={clsx('drawer', open && 'is-open')}
+        /* `inert` rather than `hidden`: it takes the closed drawer out of the tab
+           order, the a11y tree and pointer events, while still allowing the
+           open/close transition that `display: none` would cancel. */
+        inert={!open}
+      >
+        <nav aria-label="Sections">
+          <ul>
+            {NAV_LINKS.map(({ label, href }) => {
+              const id = href.replace('#', '');
+              return (
+                <li key={href}>
+                  <a
+                    href={href}
+                    aria-current={activeId === id ? 'true' : undefined}
+                    onClick={(event) => goToSection(event, href, true)}
+                  >
+                    {label}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+      </div>
+
+      <div className="scrim" onClick={handleClose} aria-hidden="true" />
+    </header>
+  );
+}
diff --git a/website/src/components/layout/SiteHeader/index.ts b/website/src/components/layout/SiteHeader/index.ts
new file mode 100644
index 00000000..5aecd9df
--- /dev/null
+++ b/website/src/components/layout/SiteHeader/index.ts
@@ -0,0 +1 @@
+export { default } from './SiteHeader';
diff --git a/website/src/content/landing.ts b/website/src/content/landing.ts
index 308466cd..095b18a5 100644
--- a/website/src/content/landing.ts
+++ b/website/src/content/landing.ts
@@ -13,7 +13,7 @@ export type Pet = {
 
 export type CommunityCard = {
   name: string;
-  members: string;
+  blurb: string;
   color: 'discord' | 'twitter' | 'telegram' | 'youtube';
   href?: string;
 };
@@ -25,10 +25,13 @@ export type Step = {
 };
 
 export type RoadmapItem = {
-  quarter: string;
+  /** Build-order label, not a date. The project ships in phases, not quarters. */
+  phase: string;
   title: string;
   status: 'shipped' | 'in-progress' | 'planned';
   bullets: string[];
+  /** Companion art for the phase stage — the project's own renders, not stock. */
+  art: string;
 };
 
 export type RarityTier = {
@@ -43,49 +46,80 @@ export type Faq = {
   answer: string;
 };
 
-export type Testimonial = {
-  quote: string;
-  author: string;
-  role: string;
+export type ProofPoint = {
+  step: string;
+  title: string;
+  text: string;
 };
 
 export type Backer = { name: string };
 
+export type NavLink = { label: string; href: string; external?: boolean };
+
+export type SectionCopy = {
+  title: string;
+  subtitle: string;
+};
+
+export type Stat = {
+  value: number;
+  label: string;
+  prefix?: string;
+  suffix?: string;
+  decimals?: number;
+};
+
+/**
+ * Icons are the interaction glyphs, not item art: each one names the action the
+ * card describes. Item renders were tried here and read as inventory loot rather
+ * than as a capability.
+ */
 export const FEATURES: FeatureCard[] = [
-  { title: 'Breed Unique Pets', text: 'Combine rare DNA traits and hatch powerful new companions.', iconImage: '/images/icons/interaction/breed.png' },
-  { title: 'Epic Battles', text: 'Challenge rivals and climb the leaderboard with tactical fights.', iconImage: '/images/icons/interaction/battle.png' },
-  { title: 'Power Growth', text: 'Level up, optimize stats, and unlock advanced abilities.', iconImage: '/images/icons/interaction/levelup.png' },
-  { title: 'Trade & Earn', text: 'Collect, showcase, and trade your best CryptoPets.', iconImage: '/images/icons/interaction/trading.png' },
+  { title: 'Breed and Marry', text: 'Pair two pets to pass traits down a bloodline, or marry a partner pet and unlock a private thread only the two owners can read.', iconImage: '/images/icons/interaction/breed.png' },
+  { title: 'Battle for Rank', text: 'Both owners sign in before a fight. It settles from a seed committed in advance, and the result is signed and anchored on chain.', iconImage: '/images/icons/interaction/battle.png' },
+  { title: 'Train and Equip', text: 'Level up, train stats, rename, and equip ERC-1155 gear that is escrowed on chain for as long as your pet wears it.', iconImage: '/images/icons/interaction/levelup.png' },
+  { title: 'Own and Trade', text: 'Pets are NFTs in your own wallet on Ethereum or Solana. Transfer them, trade them, or walk away with them.', iconImage: '/images/icons/interaction/trading.png' },
 ];
 
+/**
+ * Real output from `services/image-generator`, not stock art: each render was
+ * produced by the same pipeline that draws a player's pet from its DNA. The
+ * showcase therefore shows the actual house style rather than approximating it.
+ *
+ * Species and element come from each render's manifest (body archetype and
+ * element wheel in `image-generator/src/traits.ts`). The rarity labels are
+ * ordered so the badge matches the aura tier baked into the art — the generator
+ * draws rarity 3 with a glowing aura, 2 with a rim light and 1 matte.
+ */
 export const PETS: Pet[] = [
-  { name: 'Golden Lion', level: 99, rarity: 'Legendary', image: '/images/pets/lion.png' },
-  { name: 'Frost Dragon', level: 37, rarity: 'Epic', image: '/images/pets/dinosaur.png' },
-  { name: 'Thunder Pup', level: 96, rarity: 'Rare', image: '/images/pets/dog.png' },
-  { name: 'Crystal Trunk', level: 62, rarity: 'Epic', image: '/images/pets/elephant.png' },
-  { name: 'Shadow Cat', level: 83, rarity: 'Rare', image: '/images/pets/cat.png' },
-  { name: 'Mystic Owl', level: 71, rarity: 'Legendary', image: '/images/pets/owl.png' },
+  { name: 'Nova Brute', level: 94, rarity: 'Legendary', image: '/images/pets/nova-brute.png' },
+  { name: 'Starlit Prowler', level: 88, rarity: 'Legendary', image: '/images/pets/starlit-prowler.png' },
+  { name: 'Ember Oracle', level: 71, rarity: 'Epic', image: '/images/pets/ember-oracle.png' },
+  { name: 'Tidefang', level: 66, rarity: 'Epic', image: '/images/pets/tidefang.png' },
+  { name: 'Cinder Streak', level: 42, rarity: 'Rare', image: '/images/pets/cinder-streak.png' },
+  { name: 'Umbral Bulwark', level: 37, rarity: 'Rare', image: '/images/pets/umbral-bulwark.png' },
 ];
 
+/* Channel URLs are intentionally absent rather than guessed — see README. */
 export const COMMUNITIES: CommunityCard[] = [
-  { name: 'Discord', members: '150k+ Members', color: 'discord' },
-  { name: 'Twitter', members: '250k+ Followers', color: 'twitter' },
-  { name: 'Telegram', members: '120k+ Members', color: 'telegram' },
-  { name: 'YouTube', members: '180k+ Members', color: 'youtube' },
+  { name: 'Discord', blurb: 'Strategy and tournaments', color: 'discord' },
+  { name: 'Twitter', blurb: 'Drops and patch notes', color: 'twitter' },
+  { name: 'Telegram', blurb: 'Trades and quick calls', color: 'telegram' },
+  { name: 'YouTube', blurb: 'Guides and battle replays', color: 'youtube' },
 ];
 
 export const STEPS: Step[] = [
-  { number: '01', title: 'Connect', text: 'Plug in any wallet — MetaMask, Phantom or social login. Takes seconds.' },
-  { number: '02', title: 'Mint', text: 'Hatch your first pet from the egg pool and roll for a rare trait.' },
-  { number: '03', title: 'Train', text: 'Level up, breed new bloodlines, and unlock signature abilities.' },
-  { number: '04', title: 'Battle', text: 'Take on rivals in the arena and climb the global leaderboard.' },
+  { number: '01', title: 'Connect', text: 'Bring the wallet you already have. MetaMask on Ethereum, Phantom on Solana — the same game runs on both.' },
+  { number: '02', title: 'Hatch', text: 'Mint a starter pet. Its traits come from on-chain randomness, not a number we picked for you.' },
+  { number: '03', title: 'Raise', text: 'Level up, train stats, equip gear, breed new bloodlines, and marry a partner pet.' },
+  { number: '04', title: 'Battle', text: 'Both owners opt in, the fight settles from a public beacon round, and you keep the receipt.' },
 ];
 
 export const ROADMAP: RoadmapItem[] = [
-  { quarter: 'Q1', title: 'Genesis Drop', status: 'shipped', bullets: ['Genesis mint live', 'Discord & socials launch', 'First 10k pet supply'] },
-  { quarter: 'Q2', title: 'Arena', status: 'shipped', bullets: ['Battle system v1', 'Global leaderboards', 'Weekly tournaments'] },
-  { quarter: 'Q3', title: 'Bloodlines', status: 'in-progress', bullets: ['Breeding mechanics', 'Cross-chain support', 'New rarity tier'] },
-  { quarter: 'Q4', title: 'Marketplace 2.0', status: 'planned', bullets: ['Native P2P trades', 'Mobile companion app', 'Guild system'] },
+  { phase: '01', title: 'Foundation', status: 'shipped', bullets: ['Dual-chain pet minting', 'Breeding, bloodlines and marriage', 'Level up, train, rename, transfer'], art: '/images/pets/starlit-prowler.png' },
+  { phase: '02', title: 'Provable Arena', status: 'shipped', bullets: ['Beacon-seeded battles', 'Signed, chain-anchored receipts', 'Open-source public verifier'], art: '/images/pets/nova-brute.png' },
+  { phase: '03', title: 'Progression', status: 'in-progress', bullets: ['Leaderboard and seasons', 'CPET season rewards', 'Equipment and item NFTs'], art: '/images/pets/ember-oracle.png' },
+  { phase: '04', title: 'Expansion', status: 'planned', bullets: ['Daily quests', 'Team battles', 'Pet and item marketplace'], art: '/images/pets/tidefang.png' },
 ];
 
 export const ROADMAP_STATUS_LABEL: Record<RoadmapItem['status'], string> = {
@@ -102,25 +136,146 @@ export const RARITY_TIERS: RarityTier[] = [
 ];
 
 export const FAQS: Faq[] = [
-  { question: 'What is CryptoPet?', answer: 'A fully on-chain creature collection and battle game. Every pet is an NFT you mint, train, and play with — across web and mobile.' },
-  { question: 'Which chains are supported?', answer: 'Ethereum and Solana out of the gate, with additional rollups added through Q3. Use the wallet you already have.' },
-  { question: 'Do I really own my pets?', answer: 'Yes. Pets are NFTs in your wallet — fully transferable, tradable, and yours to keep regardless of what happens to the app.' },
-  { question: 'How much does it cost to start?', answer: 'Connecting your wallet is free. Mint price varies per drop and is announced ahead of time on Discord and Twitter.' },
-  { question: 'Can I earn from playing?', answer: 'Yes. Win battles, breed sought-after bloodlines, and trade rares on the marketplace. Royalties flow to holders.' },
-  { question: 'Are the contracts audited?', answer: 'Yes. Audit reports from independent firms are linked in the docs and updated on every major release.' },
+  { question: 'What is CryptoPets?', answer: 'A creature collection and battle game where the pets are NFTs. Mint one, train it, breed it, marry it off, and send it into the arena — on the web or on mobile.' },
+  { question: 'Which chains are supported?', answer: 'Ethereum and Solana. Pets, breeding and battles run on both. Equipment and item NFTs are on Ethereum today.' },
+  { question: 'Do I really own my pets?', answer: 'Yes. Pets are NFTs in your wallet. They are transferable and tradable, and they stay yours regardless of what happens to this app.' },
+  { question: 'How do I know a battle was fair?', answer: 'The battle is seeded from a public randomness beacon round committed before the fight resolves, and the result is signed and folded into a Merkle batch anchored on chain. An open-source verifier replays any receipt and reports seven checks separately: seed derivation, the operator signature, the beacon signature, the combat replay, progression, equipment, and hash-chain continuity. It needs no account and no access to our servers.' },
+  { question: 'Can someone battle my pet while I am offline?', answer: 'Not without your say-so. Defending takes a wallet-signed authorization that names the pet, the level band it will accept, the exact rule set, a validity window and a daily cap. Outside those bounds the battle is refused.' },
+  { question: 'What does it cost to start?', answer: 'Connecting a wallet is free. Mint price varies per drop and is announced in advance on our community channels.' },
+  { question: 'Can I earn from playing?', answer: 'Seasons pay CPET rewards to the top of the leaderboard, claimed against an on-chain Merkle root, and your pets and items are tradable assets. CPET has a fixed supply with no mint function. Treat it as a game you own a piece of, not as an income.' },
 ];
 
-export const TESTIMONIALS: Testimonial[] = [
-  { quote: "Been collecting since the genesis drop. The battle system is genuinely fun — not just a chart you stare at.", author: 'neon_runner', role: 'Top-10 leaderboard, Season 1' },
-  { quote: 'Best art in the space. Period. My Legendary owl pays the rent — emotionally.', author: 'Mira K.', role: 'Holder since Q1' },
-  { quote: 'Finally an on-chain game that respects my time. Sessions are short, decisions are real.', author: '0xpaws', role: 'Guild captain' },
+/**
+ * The differentiator the site previously never mentioned. Each point maps to
+ * checks the public verifier actually performs, so nothing here is a promise
+ * that only we can evaluate.
+ */
+export const PROOF_POINTS: ProofPoint[] = [
+  {
+    step: '01',
+    title: 'Committed before the fight',
+    text: 'The randomness comes from a public beacon round chosen before the battle resolves. Nobody can grind it for a better roll — not you, not your opponent, not us.',
+  },
+  {
+    step: '02',
+    title: 'Signed, then anchored',
+    text: 'Every result is a signed receipt over the exact inputs it used, and batches of receipts are committed to a Merkle root written on chain.',
+  },
+  {
+    step: '03',
+    title: 'Check it yourself',
+    text: 'An open-source verifier replays any receipt and reports on the seed, the signature, the beacon, the combat replay, progression, gear and hash-chain continuity — independently, in public.',
+  },
 ];
 
 export const BACKERS: Backer[] = [
   { name: 'Ethereum' },
   { name: 'Solana' },
-  { name: 'Chainlink' },
-  { name: 'IPFS' },
-  { name: 'Arbitrum' },
   { name: 'Base' },
+  { name: 'Pyth Entropy' },
+  { name: 'Switchboard' },
+  { name: 'drand' },
+  { name: 'Metaplex' },
+  { name: 'The Graph' },
+];
+
+/* =============================================================================
+   Site chrome
+   ============================================================================= */
+export const SITE = {
+  name: 'Crypto Pets',
+  playCta: 'Play Now',
+};
+
+/* =============================================================================
+   Section copy. Every string the landing page renders lives in this file — a
+   wording change should never require opening a component.
+   ============================================================================= */
+export const HERO = {
+  eyebrow: 'On-Chain Pet Battler',
+  titleLead: 'Collect, Battle & Breed',
+  titleAccent: 'Your Dream Pets',
+  body: '10,000 neon companions you actually own, on Ethereum and Solana. Every battle settles from a committed seed and ships with a receipt anyone can replay.',
+  primaryCta: 'Play Now',
+  secondaryCta: 'Explore Features',
+  scrollLabel: 'Scroll to features',
+};
+
+export const SECTION_COPY = {
+  how: {
+    title: 'How It Works',
+    subtitle: 'From wallet to first win in four steps.',
+  },
+  features: {
+    title: 'What You Can Do',
+    subtitle: 'Every pet and item is an NFT in your wallet, not a row in our database.',
+  },
+  pets: {
+    title: 'Meet the Companions',
+    subtitle: 'Four rarity tiers, ten thousand creatures, one shot at the legendary roster.',
+  },
+  roadmap: {
+    title: 'Roadmap',
+    subtitle: 'Built in phases, not to a calendar. Here is where each one stands.',
+  },
+  proof: {
+    title: 'Provably Fair',
+    subtitle: 'A game that decides your battles has to be checkable by someone other than itself.',
+  },
+  faq: {
+    title: 'Questions, Answered',
+    subtitle: 'Everything worth knowing before you mint your first pet.',
+  },
+  community: {
+    title: 'Join the Pack',
+    subtitle: 'Strategy, drops, and battle talk — pick your channel.',
+  },
+} satisfies Record<string, SectionCopy>;
+
+/**
+ * Verifiable figures only. The previous band claimed holder counts, battles
+ * fought and dollars earned, none of which anyone outside the project could
+ * check. These four are readable off the game's own design and source.
+ */
+export const STATS: Stat[] = [
+  { value: 2, label: 'Chains Live' },
+  { value: 4, label: 'Rarity Tiers' },
+  { value: 7, label: 'Verifier Checks' },
+  { value: 100, suffix: '%', label: 'Replayable Battles' },
+];
+
+export const CTA_BAND = {
+  eyebrow: 'Free To Start',
+  title: 'Hatch your first pet.',
+  body: 'Connect a wallet and you are in. No account, no email, no waiting list.',
+  action: 'Connect Wallet',
+};
+
+export const BACKERS_LABEL = 'Powered by & built with';
+
+export const FOOTER = {
+  brand: 'CryptoPets',
+  blurb: 'Build your roster, rule the arena, and keep every pet in a wallet you control.',
+  exploreHeading: 'Explore',
+  resourcesHeading: 'Resources',
+  copyrightHolder: 'CryptoPets',
+  rights: 'All rights reserved.',
+  tag: 'Built on-chain.',
+};
+
+export const RESOURCE_LINKS: NavLink[] = [
+  { label: 'Source Code', href: 'https://github.com/radcrew/do-not-stop', external: true },
+  { label: 'Receipt Verifier', href: 'https://github.com/radcrew/do-not-stop/tree/main/verifier', external: true },
+  { label: 'Provably Fair', href: '#proof' },
+  { label: 'FAQ', href: '#faq' },
+];
+
+/** Shared by the header nav and the footer's Explore column. */
+export const NAV_LINKS: NavLink[] = [
+  { label: 'How It Works', href: '#how' },
+  { label: 'Features', href: '#features' },
+  { label: 'Pets', href: '#pets' },
+  { label: 'Roadmap', href: '#roadmap' },
+  { label: 'FAQ', href: '#faq' },
+  { label: 'Community', href: '#community' },
 ];
diff --git a/website/src/hooks/useActiveSection.ts b/website/src/hooks/useActiveSection.ts
new file mode 100644
index 00000000..5ee1c71c
--- /dev/null
+++ b/website/src/hooks/useActiveSection.ts
@@ -0,0 +1,50 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Reports which section id is currently under the reader.
+ *
+ * Detection uses a thin horizontal band near the top of the viewport (via
+ * rootMargin) rather than "most visible element". Sections here differ wildly in
+ * height — the FAQ is a fraction of the Pets grid — so a ratio-based winner would
+ * keep the tallest section highlighted while the reader is well inside a shorter
+ * one. Contiguous sections mean exactly one crosses the band at a time.
+ *
+ * When nothing crosses it (above the first section, or in a band-height gap) the
+ * previous value is kept, so the indicator never flickers off mid-scroll.
+ *
+ * @param ids Section ids in document order. Must be referentially stable.
+ */
+export default function useActiveSection(ids: string[]) {
+  const [active, setActive] = useState<string | null>(null);
+
+  useEffect(() => {
+    const elements = ids
+      .map((id) => document.getElementById(id))
+      .filter((el): el is HTMLElement => el !== null);
+
+    if (elements.length === 0) return;
+
+    const intersecting = new Set<string>();
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) intersecting.add(entry.target.id);
+          else intersecting.delete(entry.target.id);
+        });
+
+        const next = ids.find((id) => intersecting.has(id));
+        if (next) setActive(next);
+      },
+      { rootMargin: '-25% 0px -65% 0px' },
+    );
+
+    elements.forEach((el) => observer.observe(el));
+
+    return () => observer.disconnect();
+  }, [ids]);
+
+  return active;
+}
diff --git a/website/src/hooks/useHashLanding.ts b/website/src/hooks/useHashLanding.ts
new file mode 100644
index 00000000..c7bde704
--- /dev/null
+++ b/website/src/hooks/useHashLanding.ts
@@ -0,0 +1,27 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { findSection, scrollToSection } from '@/lib/scrollToSection';
+
+/**
+ * Corrects the browser's native hash jump on first load.
+ *
+ * Arriving at `/#roadmap` scrolls before the page can say where that section
+ * should land: the jump uses `scroll-padding-top` against the section's border
+ * box, so it cannot skip the section's own top padding, and the header height
+ * it clears is still the fallback constant. Re-running the real landing once
+ * layout exists puts it where a nav click would.
+ */
+export default function useHashLanding() {
+  useEffect(() => {
+    const { hash } = window.location;
+    if (!hash || hash === '#top') return;
+
+    const target = findSection(hash);
+    if (!target) return;
+
+    const frame = requestAnimationFrame(() => scrollToSection(target, { smooth: false }));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+}
diff --git a/website/src/hooks/useHeaderScroll.ts b/website/src/hooks/useHeaderScroll.ts
new file mode 100644
index 00000000..332c7035
--- /dev/null
+++ b/website/src/hooks/useHeaderScroll.ts
@@ -0,0 +1,86 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+import { rafThrottle } from '@/lib/rafThrottle';
+
+/** Distance scrolled before the header condenses, in px. */
+const CONDENSE_AT = 24;
+
+/**
+ * Tracks page scroll for the site header: a `condensed` flag for the glass
+ * treatment, and a 0-1 `--scroll-progress` custom property for the progress
+ * hairline.
+ *
+ * Progress is written straight to the element as a CSS variable rather than
+ * held in React state, so the bar tracks scroll without re-rendering the header
+ * on every frame. `condensed` is state because it flips twice per page, not
+ * sixty times per second.
+ */
+export default function useHeaderScroll<T extends HTMLElement>() {
+  const ref = useRef<T>(null);
+  const [condensed, setCondensed] = useState(false);
+
+  useEffect(() => {
+    const header = ref.current;
+
+    /**
+     * Publishes the header's real height so anchor offsets cannot drift from
+     * the chrome they exist to clear. The header keeps one height in both its
+     * states, so there is a single value to publish and no need to guess which
+     * state a reader will arrive in.
+     */
+    const publishHeight = () => {
+      if (!header) return;
+      document.documentElement.style.setProperty(
+        '--header-h',
+        `${Math.round(header.getBoundingClientRect().height)}px`,
+      );
+    };
+
+    /* Cached: the document's scrollable extent changes when content or the
+       viewport does, not on every frame of a scroll. Reading scrollHeight per
+       frame forces a layout for a number that rarely moves. */
+    let scrollable = 0;
+
+    const measure = () => {
+      const doc = document.documentElement;
+      scrollable = doc.scrollHeight - doc.clientHeight;
+    };
+
+    const update = () => {
+      const y = window.scrollY;
+
+      header?.style.setProperty(
+        '--scroll-progress',
+        scrollable > 0 ? String(Math.min(y / scrollable, 1)) : '0',
+      );
+      setCondensed(y > CONDENSE_AT);
+    };
+
+    const onScroll = rafThrottle(update);
+
+    /* Watching the body catches the document growing as images decode and
+       sections reveal, which is what actually changes the scrollable extent. */
+    const sizeObserver = new ResizeObserver(() => {
+      publishHeight();
+      measure();
+      onScroll();
+    });
+    if (header) sizeObserver.observe(header);
+    sizeObserver.observe(document.body);
+
+    publishHeight();
+    measure();
+    update();
+    window.addEventListener('scroll', onScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      sizeObserver.disconnect();
+      onScroll.cancel();
+    };
+  }, []);
+
+  return { ref, condensed };
+}
diff --git a/website/src/hooks/useRevealObserver.ts b/website/src/hooks/useRevealObserver.ts
new file mode 100644
index 00000000..e4d32ded
--- /dev/null
+++ b/website/src/hooks/useRevealObserver.ts
@@ -0,0 +1,59 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { prefersReducedMotion } from '@/lib/media';
+
+const VISIBLE_ATTR = 'data-reveal-visible';
+const DEFAULT_STAGGER_MS = 70;
+
+/** Past this many siblings the stagger stops growing, or late rows crawl in. */
+const MAX_STAGGER_STEPS = 8;
+
+/**
+ * Watches every `[data-reveal]` element on the page and marks it visible as it
+ * scrolls into view.
+ *
+ * Mounted once in `Layout` rather than per section, so the landing sections stay
+ * server components — they only need the attribute in their markup, not a client
+ * boundary of their own.
+ */
+export default function useRevealObserver() {
+  useEffect(() => {
+    const targets = Array.from(document.querySelectorAll<HTMLElement>('[data-reveal]'));
+    if (targets.length === 0) return;
+
+    // The CSS also honours the preference, but bailing here avoids installing an
+    // observer that would only ever toggle attributes nothing reads.
+    if (prefersReducedMotion()) {
+      targets.forEach((el) => el.setAttribute(VISIBLE_ATTR, ''));
+      return;
+    }
+
+    // Stagger delay is assigned here rather than with nth-child rules so a
+    // container can hold any number of children without a rule per position.
+    document.querySelectorAll<HTMLElement>('[data-reveal-stagger]').forEach((group) => {
+      const step = Number(group.dataset.revealStagger) || DEFAULT_STAGGER_MS;
+      group.querySelectorAll<HTMLElement>('[data-reveal]').forEach((child, index) => {
+        child.style.setProperty('--reveal-delay', `${Math.min(index, MAX_STAGGER_STEPS) * step}ms`);
+      });
+    });
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return;
+          entry.target.setAttribute(VISIBLE_ATTR, '');
+          // Reveal once. Re-hiding content the reader has already passed is
+          // disorienting, and it keeps the observer's work bounded.
+          observer.unobserve(entry.target);
+        });
+      },
+      { rootMargin: '0px 0px -12% 0px', threshold: 0.05 },
+    );
+
+    targets.forEach((el) => observer.observe(el));
+
+    return () => observer.disconnect();
+  }, []);
+}
diff --git a/website/src/hooks/useScrollScene.ts b/website/src/hooks/useScrollScene.ts
new file mode 100644
index 00000000..d3ad6683
--- /dev/null
+++ b/website/src/hooks/useScrollScene.ts
@@ -0,0 +1,133 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+import { clamp01 } from '@/lib/math';
+import { REDUCED_MOTION } from '@/lib/media';
+import { rafThrottle } from '@/lib/rafThrottle';
+
+/**
+ * Drives a 0-1 progress value from how far a tall section has been scrolled
+ * past, while a sticky child stays pinned in view.
+ *
+ * Native sticky positioning, never wheel interception. The page scrolls
+ * normally the whole time — the scrollbar reflects real position, PageDown and
+ * arrow keys work, and a reader can leave whenever they like. Only the visual
+ * holds still. Hijacking the wheel would buy the same look and take all of that
+ * away.
+ *
+ * Pinning is a desktop, full-motion affordance. On narrow viewports (where a
+ * pinned panel fights the mobile URL bar and leaves no room for the content)
+ * and under reduced motion, the listener is never attached and the scene is
+ * handed straight to its finished state.
+ */
+export default function useScrollScene<
+  S extends HTMLElement = HTMLElement,
+  P extends HTMLElement = HTMLDivElement,
+>(
+  onFrame: (progress: number, section: S) => void,
+  {
+    fallbackQuery = '(max-width: 1024px)',
+    /**
+     * Value handed to the scene when pinning is off. A road wants its finished
+     * state; a carousel wants its first frame, since rewinding one to the end
+     * parks it on the last card.
+     */
+    fallbackValue = 1,
+  }: { fallbackQuery?: string; fallbackValue?: number } = {},
+) {
+  const sectionRef = useRef<S>(null);
+  const pinRef = useRef<P>(null);
+  const callback = useRef(onFrame);
+  callback.current = onFrame;
+
+  useEffect(() => {
+    const section = sectionRef.current;
+    const pin = pinRef.current;
+    if (!section || !pin) return;
+
+    const narrow = window.matchMedia(fallbackQuery);
+    const reduced = window.matchMedia(REDUCED_MOTION);
+
+    let attached = false;
+
+    /* Cached between frames. These change when the viewport does, not when the
+       page scrolls, and reading them per frame costs a style recalc plus two
+       layout reads on every frame of every scroll — doubled, since two scenes
+       are mounted. Only the scroll position below is read live. */
+    let scrollable = 0;
+    let stickyTop = 0;
+
+    const measure = () => {
+      stickyTop = parseFloat(getComputedStyle(pin).top) || 0;
+      scrollable = section.offsetHeight - pin.offsetHeight;
+    };
+
+    /**
+     * The hook owns the custom property, not its callers. Leaving that to each
+     * onFrame meant a scene could silently render frozen if its callback forgot
+     * to publish the value it was handed.
+     */
+    const write = (progress: number) => {
+      section.style.setProperty('--track-progress', progress.toFixed(4));
+      callback.current(progress, section);
+    };
+
+    const update = () => {
+      if (scrollable <= 0) {
+        write(1);
+        return;
+      }
+      const travelled = stickyTop - section.getBoundingClientRect().top;
+      write(clamp01(travelled / scrollable));
+    };
+
+    const onScroll = rafThrottle(update);
+
+    /* Both elements are sized in viewport units, so this fires on viewport
+       resize as well as any layout change that moves them. */
+    const sizeObserver = new ResizeObserver(() => {
+      measure();
+      if (attached) update();
+    });
+    sizeObserver.observe(section);
+    sizeObserver.observe(pin);
+
+    const attach = () => {
+      if (attached) return;
+      attached = true;
+      window.addEventListener('scroll', onScroll, { passive: true });
+      measure();
+      update();
+    };
+
+    const detach = () => {
+      if (!attached) return;
+      attached = false;
+      window.removeEventListener('scroll', onScroll);
+      onScroll.cancel();
+    };
+
+    const sync = () => {
+      if (narrow.matches || reduced.matches) {
+        detach();
+        write(fallbackValue);
+      } else {
+        attach();
+      }
+    };
+
+    sync();
+    narrow.addEventListener('change', sync);
+    reduced.addEventListener('change', sync);
+
+    return () => {
+      detach();
+      sizeObserver.disconnect();
+      narrow.removeEventListener('change', sync);
+      reduced.removeEventListener('change', sync);
+    };
+  }, [fallbackQuery, fallbackValue]);
+
+  return { sectionRef, pinRef };
+}
diff --git a/website/src/lib/math.ts b/website/src/lib/math.ts
new file mode 100644
index 00000000..8d63416b
--- /dev/null
+++ b/website/src/lib/math.ts
@@ -0,0 +1,2 @@
+/** Clamps to the 0-1 range every progress value on this site is expressed in. */
+export const clamp01 = (n: number): number => (n < 0 ? 0 : n > 1 ? 1 : n);
diff --git a/website/src/lib/media.ts b/website/src/lib/media.ts
new file mode 100644
index 00000000..ff0bd605
--- /dev/null
+++ b/website/src/lib/media.ts
@@ -0,0 +1,16 @@
+/**
+ * Media queries the site branches on.
+ *
+ * Named once because a mistyped query is a silent failure: it simply never
+ * matches, so the guard it was meant to be quietly stops guarding and the
+ * behaviour it protected runs for everyone.
+ */
+
+export const REDUCED_MOTION = '(prefers-reduced-motion: reduce)';
+
+/** A pointer that can hover and aim precisely — mouse or trackpad, not touch. */
+export const FINE_POINTER = '(hover: hover) and (pointer: fine)';
+
+export const prefersReducedMotion = (): boolean => window.matchMedia(REDUCED_MOTION).matches;
+
+export const hasFinePointer = (): boolean => window.matchMedia(FINE_POINTER).matches;
diff --git a/website/src/lib/rafThrottle.ts b/website/src/lib/rafThrottle.ts
new file mode 100644
index 00000000..154fb942
--- /dev/null
+++ b/website/src/lib/rafThrottle.ts
@@ -0,0 +1,32 @@
+export interface RafThrottled {
+  (): void;
+  /** Drops any frame already booked. Call from effect cleanup. */
+  cancel(): void;
+}
+
+/**
+ * Collapses a burst of calls into one call per animation frame.
+ *
+ * The pattern every scroll and pointer listener here needs: events fire far
+ * faster than the screen refreshes, so running the handler per event is work
+ * thrown away before anything is painted.
+ */
+export const rafThrottle = (fn: () => void): RafThrottled => {
+  let frame = 0;
+
+  const run = () => {
+    frame = 0;
+    fn();
+  };
+
+  const throttled = (() => {
+    if (!frame) frame = requestAnimationFrame(run);
+  }) as RafThrottled;
+
+  throttled.cancel = () => {
+    if (frame) cancelAnimationFrame(frame);
+    frame = 0;
+  };
+
+  return throttled;
+};
diff --git a/website/src/lib/scrollToSection.ts b/website/src/lib/scrollToSection.ts
new file mode 100644
index 00000000..efdfbbd0
--- /dev/null
+++ b/website/src/lib/scrollToSection.ts
@@ -0,0 +1,136 @@
+/**
+ * Landing a section exactly under the floating header.
+ *
+ * Lives outside the header component because none of it is header UI — it is
+ * page navigation, driven by the header but also by a hash in the URL.
+ */
+
+/** Frames of stillness treated as "the scroll has stopped", where scrollend is absent. */
+const STILL_FRAMES = 3;
+/** Below this, the landing is already exact and correcting would only jitter. */
+const TOLERANCE_PX = 1;
+
+/**
+ * How far `target` is from where it should land, in px.
+ *
+ * Two cases, because the header is a floating pill and not an opaque bar —
+ * nothing hides the strip of viewport around it, so a landing must never leave
+ * the previous section visible in that strip:
+ *
+ * - A section with a full-viewport pinned scene lands flush at the viewport
+ *   top. The scene owns the whole screen and pads its own content clear of the
+ *   glass.
+ * - Any other section lands with its content resting at the anchor offset when
+ *   its own top padding is deep enough to reach the border, and at the header's
+ *   edge otherwise — never higher, so the heading cannot tuck under the glass,
+ *   and never lower than its padding can cover, so the previous section's tail
+ *   cannot show above the border.
+ *
+ * The offset is read back from the resolved `scroll-padding-top`: custom
+ * properties do not resolve calc() through getComputedStyle, real properties
+ * do, so this is the one place the number exists and JS and CSS cannot drift.
+ */
+export const landingError = (target: Element): number => {
+  const pin = target.querySelector('.pin');
+  if (pin && getComputedStyle(pin).position === 'sticky') {
+    return Math.round(target.getBoundingClientRect().top);
+  }
+
+  const root = getComputedStyle(document.documentElement);
+  const offset = parseFloat(root.scrollPaddingTop) || 0;
+  const gap = parseFloat(root.getPropertyValue('--anchor-gap')) || 0;
+  const headerHeight = offset - gap;
+
+  const padding = parseFloat(getComputedStyle(target).paddingTop) || 0;
+  const contentY = Math.max(headerHeight, Math.min(padding, offset));
+
+  return Math.round(target.getBoundingClientRect().top + padding - contentY);
+};
+
+/**
+ * Once the scroll has come to rest, re-measure and instantly remove whatever
+ * error remains. A single scrollTo cannot be pixel-perfect: any layout shift
+ * while the animation runs — an image decoding, a font swapping, dvh settling —
+ * moves the target by exactly the amount the landing ends up off by.
+ *
+ * Cancelled the moment the reader scrolls themselves, so the correction can
+ * never yank the page away from someone who changed their mind mid-flight.
+ */
+const settleOnArrival = (target: Element) => {
+  let cancelled = false;
+
+  const cleanup = () => {
+    window.removeEventListener('wheel', cancel);
+    window.removeEventListener('touchstart', cancel);
+    window.removeEventListener('keydown', cancel);
+    window.removeEventListener('scrollend', onEnd);
+  };
+
+  function cancel() {
+    cancelled = true;
+    cleanup();
+  }
+
+  const correct = () => {
+    if (cancelled) return;
+    const error = landingError(target);
+    if (Math.abs(error) > TOLERANCE_PX) window.scrollBy({ top: error, behavior: 'auto' });
+  };
+
+  function onEnd() {
+    cleanup();
+    correct();
+  }
+
+  window.addEventListener('wheel', cancel, { passive: true, once: true });
+  window.addEventListener('touchstart', cancel, { passive: true, once: true });
+  window.addEventListener('keydown', cancel, { once: true });
+
+  if ('onscrollend' in window) {
+    window.addEventListener('scrollend', onEnd, { once: true });
+    return;
+  }
+
+  // Safari has no scrollend: treat a few frames without movement as arrival.
+  let last = -1;
+  let still = 0;
+
+  const tick = () => {
+    if (cancelled) return;
+
+    const y = window.scrollY;
+    if (Math.abs(y - last) < 1) {
+      if (++still >= STILL_FRAMES) {
+        cleanup();
+        correct();
+        return;
+      }
+    } else {
+      still = 0;
+    }
+
+    last = y;
+    requestAnimationFrame(tick);
+  };
+
+  requestAnimationFrame(tick);
+};
+
+/** Scrolls `target` to its landing position, then corrects once it settles. */
+export const scrollToSection = (target: Element, { smooth = true } = {}): void => {
+  const top = window.scrollY + landingError(target);
+  window.scrollTo({ top: Math.max(top, 0), behavior: smooth ? 'smooth' : 'auto' });
+  settleOnArrival(target);
+};
+
+/**
+ * Resolves an in-page href to an element, tolerating the tracking hashes some
+ * external tools append, which are not valid selectors.
+ */
+export const findSection = (href: string): Element | null => {
+  try {
+    return document.querySelector(href);
+  } catch {
+    return null;
+  }
+};
diff --git a/website/src/lib/siteUrl.ts b/website/src/lib/siteUrl.ts
new file mode 100644
index 00000000..e8957ebd
--- /dev/null
+++ b/website/src/lib/siteUrl.ts
@@ -0,0 +1,9 @@
+/**
+ * Canonical origin of this marketing site.
+ *
+ * Deliberately separate from `NEXT_PUBLIC_APP_URL`, which points at the playable
+ * app on a different domain. Using that one here would emit canonical, sitemap
+ * and Open Graph URLs pointing at the app, telling crawlers the landing page
+ * lives somewhere it does not.
+ */
+export const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? 'http://localhost:3002';
diff --git a/website/src/styles/globals.css b/website/src/styles/globals.css
index 2d402bec..d55c22d6 100644
--- a/website/src/styles/globals.css
+++ b/website/src/styles/globals.css
@@ -1,15 +1,36 @@
 @import './variables.css';
+@import './motion.css';
 @import './layout.css';
 @import './landing-page.css';
 
+html {
+  /* Breathing room between the header and whatever an anchor lands on. */
+  --anchor-gap: 16px;
+
+  /* Where an anchored section's content should come to rest. `--header-h` is
+     measured and published by useHeaderScroll, so this tracks the real chrome
+     rather than a hardcoded guess that drifts every time the header is
+     redesigned; the layout constant is only the fallback for before that lands.
+
+     The pinned scenes stick at 0 and use this as their own top padding instead
+     — the header is a floating pill, so a scene sticking below it would show
+     the previous section through the uncovered strip beside the glass.
+
+     Do not also set `scroll-margin-top` on the targets — the two offsets add. */
+  --anchor-offset: calc(var(--header-h, var(--main-header-offset)) + var(--anchor-gap));
+
+  scroll-padding-top: var(--anchor-offset);
+  scroll-behavior: smooth;
+}
+
 :root {
   font-family: var(--font-body), 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: dark;
-  color: var(--cp-body-text-dark);
-  background-color: var(--cp-body-bg-dark);
+  color: var(--text-bright);
+  background-color: var(--surface-void);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -19,41 +40,40 @@
 
 a {
   font-weight: 500;
-  color: var(--cp-link);
+  color: var(--neon-azure);
   text-decoration: inherit;
+  transition: color var(--dur-base) var(--ease-out);
 }
 
 a:hover {
-  color: var(--cp-link-hover);
+  color: var(--neon-cyan);
 }
 
 body {
   margin: 0;
   min-width: 320px;
-  min-height: 100vh;
+  min-height: 100dvh;
+  /* `clip`, not `hidden`: `hidden` would make this a scroll container and
+     re-break `position: sticky` for everything inside it. */
+  overflow-x: clip;
   background: inherit;
   color: inherit;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
 button {
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: var(--surface-void);
   cursor: pointer;
-  transition: border-color 0.25s;
+  transition: border-color var(--dur-slow) var(--ease-out);
 }
 
 button:hover {
-  border-color: var(--cp-link);
+  border-color: var(--neon-azure);
 }
 
 button:focus,
diff --git a/website/src/styles/landing-page.css b/website/src/styles/landing-page.css
index 6cb5a51d..97f6c83b 100644
--- a/website/src/styles/landing-page.css
+++ b/website/src/styles/landing-page.css
@@ -1,65 +1,68 @@
-/* Landing-only: lighter header chrome so the hero shows through */
-.landing-layout .main-header {
-  background: rgb(5 8 18 / 42%);
-  border-block-end-color: rgb(101 131 255 / 16%);
-  box-shadow: 0 8px 20px rgb(0 0 0 / 22%);
-  backdrop-filter: blur(10px);
-}
-
-html,
-.landing-layout .main-content {
-  scroll-behavior: smooth;
-}
-
+/* Section rhythm tokens live at :root — see variables.css §9. */
 .landing {
-  --landing-gutter: clamp(44px, 7vw, 108px);
-  --section-pad-block: clamp(80px, 9vh, 120px);
-  --section-pad-block-band: clamp(56px, 6vh, 80px);
   display: flex;
   flex-direction: column;
   min-height: 0;
   background:
-    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 48px),
-    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 48px),
-    linear-gradient(180deg, #060912 0%, #070a16 100%);
-  scroll-behavior: smooth;
+    repeating-linear-gradient(0deg, var(--surface-veil-1) 0 1px, transparent 1px 48px),
+    repeating-linear-gradient(90deg, var(--surface-veil-1) 0 1px, transparent 1px 48px),
+    linear-gradient(180deg, var(--surface-deep-top) 0%, var(--surface-deep-bottom) 100%);
 }
 
 .landing-section {
   position: relative;
   padding: var(--section-pad-block) var(--landing-gutter);
   background: transparent;
-  scroll-margin-top: var(--main-header-offset);
 }
 
-/* Alternating mood washes — every .landing-section cycles cyan / violet / magenta */
-.landing-section::before {
+/* =============================================================================
+   Mood washes.
+
+   Assigned per section with `data-wash`, not an nth-of-type cycle. Only 7 of the
+   12 landing children carry `.landing-section`, but nth-of-type counted all 11
+   `<section>` siblings, so the "cyan / violet / magenta" cycle the old comment
+   described actually rendered as violet, magenta, cyan, cyan, violet, magenta,
+   violet — and reordering or adding any section reshuffled every wash after it.
+
+   The second stop is a constant fraction of the first, so a hue is tuned by one
+   `--wash-strength` value rather than two hand-balanced alphas.
+   ============================================================================= */
+.landing-section[data-wash]::before {
   content: '';
   position: absolute;
   inset: 0;
   pointer-events: none;
-  z-index: 0;
+  z-index: var(--z-base);
   opacity: 0.55;
+  background:
+    radial-gradient(circle at var(--wash-from), rgb(var(--wash-rgb) / var(--wash-strength)), transparent 44%),
+    radial-gradient(circle at var(--wash-to), rgb(var(--wash-rgb) / calc(var(--wash-strength) * 0.65)), transparent 40%);
 }
 
 .landing-section > * {
   position: relative;
-  z-index: 1;
+  z-index: var(--z-raised);
 }
 
-.landing-section:nth-of-type(3n + 1)::before {
-  background: radial-gradient(circle at 12% 0%, rgb(41 168 255 / 14%), transparent 42%),
-              radial-gradient(circle at 90% 100%, rgb(41 168 255 / 9%), transparent 38%);
+.landing-section[data-wash='cyan'] {
+  --wash-rgb: var(--wash-cyan-rgb);
+  --wash-strength: 14%;
+  --wash-from: 12% 0%;
+  --wash-to: 90% 100%;
 }
 
-.landing-section:nth-of-type(3n + 2)::before {
-  background: radial-gradient(circle at 88% 8%, rgb(155 100 255 / 16%), transparent 44%),
-              radial-gradient(circle at 6% 92%, rgb(155 100 255 / 10%), transparent 40%);
+.landing-section[data-wash='violet'] {
+  --wash-rgb: var(--wash-violet-rgb);
+  --wash-strength: 16%;
+  --wash-from: 88% 8%;
+  --wash-to: 6% 92%;
 }
 
-.landing-section:nth-of-type(3n)::before {
-  background: radial-gradient(circle at 50% 0%, rgb(255 110 196 / 12%), transparent 46%),
-              radial-gradient(circle at 20% 100%, rgb(255 110 196 / 8%), transparent 42%);
+.landing-section[data-wash='magenta'] {
+  --wash-rgb: var(--wash-magenta-rgb);
+  --wash-strength: 12%;
+  --wash-from: 50% 0%;
+  --wash-to: 20% 100%;
 }
 
 .section-title {
@@ -67,12 +70,12 @@ html,
   margin: 0 0 10px;
   text-align: left;
   padding-inline-start: 0;
-  color: #f6f3ff;
+  color: var(--text-title);
   font-size: clamp(1.65rem, 3vw, 2.3rem);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.8px;
-  text-shadow: 0 0 10px rgb(174 150 255 / 35%);
+  text-shadow: var(--glow-text-sm);
   position: relative;
   display: inline-block;
 }
@@ -84,15 +87,16 @@ html,
   bottom: -8px;
   width: 56px;
   height: 2px;
-  background: linear-gradient(90deg, #7dd6ff 0%, #b58cff 60%, #ff7bcb 100%);
-  border-radius: 2px;
-  box-shadow: 0 0 12px rgb(170 140 255 / 65%);
+  --spectrum-angle: 90deg;
+  background: var(--gradient-spectrum);
+  border-radius: var(--radius-xs);
+  box-shadow: 0 0 12px rgb(var(--glow-text-rgb) / 65%);
 }
 
 .section-subtitle {
   font-family: var(--content-font);
   margin: 22px 0 28px;
-  color: rgb(195 210 255 / 70%);
+  color: var(--text-muted);
   font-size: 1rem;
   max-width: 640px;
   line-height: 1.55;
@@ -109,10 +113,6 @@ html,
 }
 
 @media (max-width: 768px) {
-  .landing {
-    --section-pad-block: 64px;
-    --section-pad-block-band: 44px;
-  }
   .landing-section {
     padding-inline: 18px;
   }
diff --git a/website/src/styles/layout.css b/website/src/styles/layout.css
index bed532c9..672bd55b 100644
--- a/website/src/styles/layout.css
+++ b/website/src/styles/layout.css
@@ -1,127 +1,31 @@
-/* Landing layout shell — fonts come from next/font (Orbitron + Inter), wired in app/layout.tsx. */
+/* Layout shell — fonts come from next/font (Orbitron + Inter), wired in
+   app/layout.tsx. The header lives in components/layout/SiteHeader. */
 
 .main-container {
   --title-font: var(--font-display), 'Orbitron', 'Eurostile', 'Bank Gothic', system-ui, sans-serif;
   --content-font: var(--font-body), 'Inter', 'Segoe UI', system-ui, sans-serif;
   width: 100%;
-  height: 100vh;
+  min-height: 100dvh;
   font-family: var(--content-font);
   position: relative;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
-  background:
-    radial-gradient(circle at 20% 0%, rgb(87 57 230 / 30%) 0%, transparent 38%),
-    radial-gradient(circle at 80% 20%, rgb(32 163 255 / 14%) 0%, transparent 44%),
-    #050812;
-  color: var(--color-text);
-}
-
-.main-header {
-  position: fixed;
-  inset-block-start: 0;
-  inset-inline: 0;
-  width: 100%;
-  background: rgb(5 8 18 / 68%);
-  border-block-end: 1px solid rgb(101 131 255 / 22%);
-  z-index: var(--z-header);
-  box-shadow: 0 10px 26px rgb(0 0 0 / 32%);
-  box-sizing: border-box;
-  min-height: var(--main-header-offset);
-  padding-inline: clamp(20px, 5vw, 42px);
-  padding-block: 10px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-
-  & h1 {
-    font-family: var(--title-font);
-    font-size: clamp(1.8rem, 3vw, 2.5rem);
-    line-height: 1.2;
-    margin: 0;
-    color: #f4f2ff;
-    letter-spacing: 1.2px;
-    font-weight: 700;
-    text-transform: uppercase;
-    text-shadow: 0 0 12px rgb(181 152 255 / 40%);
-  }
-}
-
-.main-header {
-  & .title {
-    display: block;
-    position: relative;
-    flex: 1 1 auto;
-    min-width: 0;
-    text-align: start;
-  }
-
-  & .title::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 50%;
-    width: clamp(140px, 22vw, 260px);
-    height: 42px;
-    transform: translateY(-50%);
-    background: radial-gradient(ellipse at center, rgb(138 98 255 / 35%) 0%, rgb(74 128 255 / 16%) 48%, transparent 78%);
-    filter: blur(8px);
-    pointer-events: none;
-    z-index: 0;
-  }
-
-  & .title h1 {
-    position: relative;
-    z-index: 1;
-    text-shadow:
-      0 0 10px rgb(185 160 255 / 50%),
-      0 0 22px rgb(125 141 255 / 38%),
-      0 0 44px rgb(108 72 255 / 26%);
-  }
-}
-
-.wallet-section {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  flex: 0 0 auto;
-  gap: 8px;
-  flex-wrap: wrap;
+  background: var(--surface-shell);
+  color: var(--text-bright);
 }
 
+/* The document scrolls, not this element — a nested scroll container would break
+   `position: sticky`, scroll-linked animation, and mobile URL-bar collapse. */
 .main-content {
   flex: 1;
   margin-block-start: var(--main-header-offset);
   width: 100%;
   box-sizing: border-box;
   margin-inline: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
 }
 
-/* Landing: gap under fixed header can be painted by hero section. */
+/* Landing: the header floats over the hero, which paints the space itself. */
 .main-content:has(.landing) {
   margin-block-start: 0;
-  background-color: #070a14;
-}
-
-@media (max-width: 768px) {
-  .main-header {
-    padding-inline: clamp(14px, 4vw, 22px);
-    padding-block: 10px;
-    gap: 12px;
-    flex-wrap: wrap;
-  }
-
-  .main-header h1 {
-    font-size: 1.3rem;
-  }
-
-  .wallet-section {
-    max-width: 100%;
-    justify-content: center;
-  }
+  background-color: var(--surface-base);
 }
diff --git a/website/src/styles/motion.css b/website/src/styles/motion.css
new file mode 100644
index 00000000..f9bbb524
--- /dev/null
+++ b/website/src/styles/motion.css
@@ -0,0 +1,93 @@
+/* =============================================================================
+   Motion primitives.
+
+   Reveal targets are hidden only under `.js-reveal`, a class the inline script in
+   app/layout.tsx sets before first paint. Without that gate, a JS failure or a
+   blocked bundle would leave everything below the fold permanently invisible.
+
+   Elements opt in with `data-reveal`; `useRevealObserver` adds
+   `data-reveal-visible` once they cross into view. Reveal is one-way — the
+   observer stops watching an element after it fires, so scrolling back up does
+   not replay it and nothing re-hides under the reader.
+   ============================================================================= */
+
+/* Uses the independent `translate` / `scale` properties rather than `transform`.
+   They compose with `transform` instead of replacing it, so revealing an element
+   cannot clobber a transform it already owns — NeonCard's hover lift survives
+   being a reveal target, and no reveal target needs a wrapper div. */
+.js-reveal [data-reveal] {
+  opacity: 0;
+  translate: var(--reveal-x, 0) var(--reveal-y, 18px);
+  scale: var(--reveal-scale, 1);
+  transition:
+    opacity var(--dur-reveal) var(--ease-out),
+    translate var(--dur-reveal) var(--ease-out),
+    scale var(--dur-reveal) var(--ease-out);
+  transition-delay: var(--reveal-delay, 0ms);
+  will-change: opacity, translate, scale;
+}
+
+.js-reveal [data-reveal][data-reveal-visible] {
+  opacity: 1;
+  translate: none;
+  scale: none;
+  will-change: auto;
+}
+
+/* Direction and character variants. `data-reveal` with no value = "up". */
+.js-reveal [data-reveal='up'] {
+  --reveal-y: 18px;
+}
+
+.js-reveal [data-reveal='down'] {
+  --reveal-y: -18px;
+}
+
+.js-reveal [data-reveal='left'] {
+  --reveal-x: 24px;
+  --reveal-y: 0;
+}
+
+.js-reveal [data-reveal='right'] {
+  --reveal-x: -24px;
+  --reveal-y: 0;
+}
+
+.js-reveal [data-reveal='fade'] {
+  --reveal-y: 0;
+}
+
+.js-reveal [data-reveal='scale'] {
+  --reveal-y: 0;
+  --reveal-scale: 0.96;
+}
+
+.js-reveal [data-reveal='rise'] {
+  --reveal-y: 36px;
+  --reveal-scale: 0.985;
+}
+
+/* =============================================================================
+   Reduced motion.
+
+   One global switch rather than per-component opt-in. Only NeonButton, NeonCard
+   and the Backers marquee honoured the preference before this; every other
+   animation on the page ignored it outright.
+   ============================================================================= */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+    transition-delay: 0ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  .js-reveal [data-reveal] {
+    opacity: 1;
+    translate: none;
+    scale: none;
+  }
+}
diff --git a/website/src/styles/variables.css b/website/src/styles/variables.css
index 0cba1ce5..cb0754b9 100644
--- a/website/src/styles/variables.css
+++ b/website/src/styles/variables.css
@@ -1,55 +1,264 @@
 /* =============================================================================
-   Palette primitives — landing-only subset of frontend tokens.
+   Design tokens.
+
+   Every value here was extracted from colours that were previously hardcoded and
+   repeated across the landing section stylesheets. Near-identical variants were
+   collapsed to one canonical value — the four border blues (96/100/101/102 x
+   123-132 x 255) became `--border-rgb`, and the two emeralds (108 246 197 and
+   108 244 197) became `--neon-emerald`.
+
+   The `-rgb` triplets exist so alpha is composed at the use site with
+   `rgb(var(--x-rgb) / <alpha>)` rather than hand-written rgba literals. That is
+   what makes a glow scale possible at all: one hue, many strengths.
+
+   Section stylesheets still carry their own literals. They adopt these tokens as
+   each section is rewritten, rather than in one churn-heavy pass that would
+   rewrite the same lines twice.
+   ============================================================================= */
+
+/* =============================================================================
+   1. Palette primitives
+   ============================================================================= */
+:root {
+  /* Display accents — headings, rails, gradient text, section washes. */
+  --neon-cyan: #7dd6ff;
+  --neon-cyan-rgb: 125 214 255;
+
+  --neon-azure: #1e9dff;
+  --neon-azure-rgb: 30 157 255;
+
+  --neon-violet: #b58cff;
+  --neon-violet-rgb: 181 140 255;
+
+  --neon-magenta: #ff7bcb;
+  --neon-magenta-rgb: 255 123 203;
+
+  --neon-emerald: #6cf6c5;
+  --neon-emerald-rgb: 108 246 197;
+
+  --neon-gold: #ffd76b;
+  --neon-gold-rgb: 255 215 107;
+
+  /* Rarity tones — Pets rarity track, legend dots, card edges, tags. */
+  --rarity-common: #b2c8eb;
+  --rarity-common-rgb: 178 200 235;
+  --rarity-rare: #50b8ff;
+  --rarity-rare-rgb: 80 184 255;
+  --rarity-epic: #b878ff;
+  --rarity-epic-rgb: 184 120 255;
+  --rarity-legendary: #ffcf5c;
+  --rarity-legendary-rgb: 255 207 92;
+
+  /* Section mood washes. Deeper and more saturated than the display accents
+     above: they sit at 8-16% alpha over near-black and need the saturation to
+     register at all. */
+  --wash-cyan-rgb: 41 168 255;
+  --wash-violet-rgb: 155 100 255;
+  --wash-magenta-rgb: 255 110 196;
+
+  /* Status tones — roadmap pins, rail segments, badges. */
+  --status-shipped: var(--neon-emerald);
+  --status-shipped-rgb: var(--neon-emerald-rgb);
+  --status-active: var(--neon-gold);
+  --status-active-rgb: var(--neon-gold-rgb);
+  --status-planned: var(--rarity-epic);
+  --status-planned-rgb: var(--rarity-epic-rgb);
+
+  /* Control tones — NeonButton. Deliberately more saturated than the display
+     accents: buttons are small and have to hold their colour against dark glass.
+     Kept separate rather than unified so the two roles can diverge on purpose. */
+  --tone-azure-rgb: 30 157 255;
+  --tone-azure-text: #8ed1ff;
+  --tone-emerald-rgb: 0 255 157;
+  --tone-emerald-text: #9effd4;
+  --tone-amber-rgb: 255 181 67;
+  --tone-amber-text: #ffd07b;
+  --tone-cyan-rgb: 0 247 255;
+  --tone-cyan-text: #86ebff;
+}
+
+/* =============================================================================
+   2. Surfaces
    ============================================================================= */
 :root {
-  --cp-white: #ffffff;
-  --cp-text-body-dark: #f3f4f6;
-  --cp-text-muted-dark: #c7ccd4;
-  --cp-text-light-dark: #9ca3af;
-  --cp-border-dark: #2b3240;
-  --cp-bg-dark: #141923;
-  --cp-bg-muted-dark: #1d2430;
-  --cp-bg-hover-dark: #273244;
+  --surface-void: #050812;
+  --surface-void-rgb: 5 8 18;
+  --surface-base: #070a14;
+  --surface-deep-top: #060912;
+  --surface-deep-bottom: #070a16;
+
+  /* Shell aura behind the app chrome. */
+  --surface-shell:
+    radial-gradient(circle at 20% 0%, rgb(87 57 230 / 30%) 0%, transparent 38%),
+    radial-gradient(circle at 80% 20%, rgb(32 163 255 / 14%) 0%, transparent 44%),
+    var(--surface-void);
+
+  /* Card body — the two-stop vertical gradient repeated on nearly every card. */
+  --surface-card-top: rgb(10 14 28 / 95%);
+  --surface-card-bottom: rgb(7 11 24 / 95%);
+  --surface-card: linear-gradient(180deg, var(--surface-card-top) 0%, var(--surface-card-bottom) 100%);
 
-  --cp-brand-primary: #667eea;
-  --cp-brand-secondary: #764ba2;
+  /* Control body — NeonButton. */
+  --surface-control: linear-gradient(180deg, rgb(5 13 30 / 92%), rgb(4 8 22 / 95%));
 
-  --cp-body-text-dark: #e5e7eb;
-  --cp-body-bg-dark: #0f1117;
-  --cp-link: #646cff;
-  --cp-link-hover: #535bf2;
+  /* Translucent fills that sit over any surface. */
+  --surface-veil-1: rgb(255 255 255 / 3%);
+  --surface-veil-2: rgb(255 255 255 / 5%);
+
+  /* Interior wash that gives cards depth without a visible edge. */
+  --surface-inset-rgb: 55 68 148;
 }
 
 /* =============================================================================
-   Semantic tokens
+   3. Text
    ============================================================================= */
 :root {
-  --color-primary: var(--cp-brand-primary);
-  --color-secondary: var(--cp-brand-secondary);
-  --color-text: var(--cp-text-body-dark);
-  --color-text-muted: var(--cp-text-muted-dark);
-  --color-text-light: var(--cp-text-light-dark);
-  --color-border: var(--cp-border-dark);
-  --color-background: var(--cp-bg-dark);
-  --color-background-light: var(--cp-bg-muted-dark);
-  --color-background-hover: var(--cp-bg-hover-dark);
+  --text-title: #f6f3ff;
+  --text-bright: #eaf0ff;
+  --text-body: rgb(195 210 255 / 80%);
+  --text-muted: rgb(195 210 255 / 70%);
+  --text-dim: rgb(170 188 230 / 65%);
+  --text-accent: #b6e2ff;
+  --text-on-accent: #ffffff;
 }
 
 /* =============================================================================
-   Layout scale used by landing sections and the fixed header.
+   4. Borders
    ============================================================================= */
 :root {
-  --border-radius: 16px;
-  --border-radius-sm: 8px;
+  --border-rgb: 100 130 255;
+  --border-hairline: 1px solid rgb(var(--border-rgb) / 16%);
+  --border-subtle: 1px solid rgb(var(--border-rgb) / 22%);
+  --border-strong: 1px solid rgb(var(--border-rgb) / 38%);
+}
 
-  --z-header: 50;
+/* =============================================================================
+   5. Glow scale
 
-  /* Space reserved for fixed `.main-header` */
+   `--glow-rgb` is the hue; components override it and the steps below compose
+   against whatever it currently is. This is the piece the old stylesheets were
+   missing — every glow was a bespoke box-shadow, so nothing shared a ramp and
+   depth never read as consistent.
+   ============================================================================= */
+:root {
+  --glow-rgb: var(--border-rgb);
+
+  --glow-xs: 0 0 8px rgb(var(--glow-rgb) / 22%);
+  --glow-sm: 0 0 12px rgb(var(--glow-rgb) / 26%);
+  --glow-md: 0 0 18px rgb(var(--glow-rgb) / 30%);
+  --glow-lg: 0 0 30px rgb(var(--glow-rgb) / 34%);
+  --glow-xl: 0 0 48px rgb(var(--glow-rgb) / 38%);
+
+  --glow-inset-sm: inset 0 0 12px rgb(var(--glow-rgb) / 14%);
+  --glow-inset-md: inset 0 0 22px rgb(var(--glow-rgb) / 18%);
+  --glow-inset-lg: inset 0 0 32px rgb(var(--glow-rgb) / 22%);
+
+  /* Text glow — the violet cast carried by every uppercase display heading. */
+  --glow-text-rgb: 174 150 255;
+  --glow-text-sm: 0 0 10px rgb(var(--glow-text-rgb) / 35%);
+  --glow-text-md: 0 0 14px rgb(var(--glow-text-rgb) / 40%);
+  --glow-text-lg: 0 0 18px rgb(var(--glow-text-rgb) / 28%), 0 0 38px rgb(108 72 255 / 18%);
+}
+
+/* =============================================================================
+   6. Elevation — plain drop shadows, no hue. Pairs with the glow scale above.
+   ============================================================================= */
+:root {
+  --elev-1: 0 3px 8px rgb(0 0 0 / 22%);
+  --elev-2: 0 8px 22px rgb(0 0 0 / 32%);
+  --elev-3: 0 14px 34px rgb(0 0 0 / 38%);
+  --elev-4: 0 24px 60px rgb(0 0 0 / 46%);
+}
+
+/* =============================================================================
+   7. Signature gradients
+
+   `--spectrum-angle` is read at the use site, so one token serves both the
+   92deg text fills and the 90deg horizontal rails.
+   ============================================================================= */
+:root {
+  --gradient-spectrum: linear-gradient(
+    var(--spectrum-angle, 92deg),
+    var(--neon-cyan) 0%,
+    var(--neon-violet) 60%,
+    var(--neon-magenta) 100%
+  );
+
+  --gradient-rail: linear-gradient(
+    90deg,
+    transparent,
+    var(--neon-cyan) 12%,
+    var(--neon-violet) 50%,
+    var(--neon-magenta) 88%,
+    transparent
+  );
+}
+
+/* =============================================================================
+   8. Motion
+   ============================================================================= */
+:root {
+  --dur-fast: 140ms;
+  --dur-base: 180ms;
+  --dur-slow: 320ms;
+  --dur-reveal: 640ms;
+
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* =============================================================================
+   9. Space and layout scale
+   ============================================================================= */
+:root {
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 36px;
+  --space-7: 56px;
+  --space-8: 80px;
+
+  /* Section rhythm. Lives at :root rather than on `.landing` so the fixed
+     header can align its own padding to the same gutter. */
+  --landing-gutter: clamp(44px, 7vw, 108px);
+  --section-pad-block: clamp(80px, 9vh, 120px);
+  --section-pad-block-band: clamp(56px, 6vh, 80px);
+
+  /* Space the fixed `.site-header` occupies: pill height plus its inset.
+     Also the anchor scroll offset — see globals.css. */
   --main-header-offset: 100px;
 }
 
+/* =============================================================================
+   10. Radii
+   ============================================================================= */
+:root {
+  --radius-xs: 2px;
+  --radius-sm: 8px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --radius-xl: 18px;
+  --radius-pill: 999px;
+}
+
+/* =============================================================================
+   11. Stacking order
+   ============================================================================= */
+:root {
+  --z-base: 0;
+  --z-raised: 1;
+  --z-sticky: 20;
+  --z-header: 50;
+  --z-overlay: 80;
+  --z-modal: 100;
+}
+
 @media (max-width: 768px) {
   :root {
-    --main-header-offset: 128px;
+    --section-pad-block: 64px;
+    --section-pad-block-band: 44px;
   }
 }