From 3545e6f5c872a35e33278c734770dcbff56b9b2e Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Thu, 11 Jun 2026 05:09:34 -0400
Subject: [PATCH] feat(marketing): pricing, how-it-works, FAQ, roadmap,
 early-access pages (real content)

Five marketing sub-pages built to match the landing's design language, all real content: Pricing (4 real tiers + Fleet Block + commercial-use definition + feature-comparison table + self-service support model), How it works (one agent -> N game instances, BYOS, no-SSH), FAQ (real support/product/games/billing Q&A reflecting the self-service model), Roadmap (honest Shipped/In-progress/Planned, no fake dates), Early access (real signup form). 3 icons added (circle/send/help-circle). Visually verified via Playwright; 0 console errors. Build green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/components/ds/core/Icon.vue      |   2 +
 .../src/views/marketing/EarlyAccessView.vue   | 628 +++++++++++-------
 frontend/src/views/marketing/FaqView.vue      | 382 +++++++++--
 .../src/views/marketing/HowItWorksView.vue    | 460 +++++++++----
 frontend/src/views/marketing/PricingView.vue  | 532 +++++++++++----
 frontend/src/views/marketing/RoadmapView.vue  | 417 +++++++++---
 6 files changed, 1758 insertions(+), 663 deletions(-)

diff --git a/frontend/src/components/ds/core/Icon.vue b/frontend/src/components/ds/core/Icon.vue
index 2dee0dc..f16db6e 100644
--- a/frontend/src/components/ds/core/Icon.vue
+++ b/frontend/src/components/ds/core/Icon.vue
@@ -25,6 +25,7 @@ import {
   Pencil, Save, ShoppingBag, Target, User,
   // Marketing site additions
   Route, Timer, Megaphone, DatabaseBackup, Store, Undo2,
+  Circle, Send, HelpCircle,
 } from 'lucide-vue-next'
 
 const props = withDefaults(
@@ -63,6 +64,7 @@ const registry: Record<string, Component> = {
   // Marketing site additions
   route: Route, timer: Timer, megaphone: Megaphone,
   'database-backup': DatabaseBackup, store: Store, 'undo-2': Undo2,
+  circle: Circle, send: Send, 'help-circle': HelpCircle,
 }
 
 const cmp = computed<Component | null>(() => registry[props.name] ?? null)
diff --git a/frontend/src/views/marketing/EarlyAccessView.vue b/frontend/src/views/marketing/EarlyAccessView.vue
index e5aaa4c..2a807ba 100644
--- a/frontend/src/views/marketing/EarlyAccessView.vue
+++ b/frontend/src/views/marketing/EarlyAccessView.vue
@@ -1,16 +1,39 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { Shield, Users, Star, MessageCircle, Clock, ChevronRight, Check, Zap, Terminal, RefreshCw, LayoutDashboard } from 'lucide-vue-next'
+/**
+ * EarlyAccess signup page.
+ *
+ * Backend endpoint: POST /api/early-access
+ * The early_access_signups entity exists but no NestJS controller/module exposes it yet.
+ * TODO: Create backend-nest/src/modules/early-access/ with a @Public() POST /early-access
+ * controller that accepts { email, name?, game_interest? } and writes to early_access_signups.
+ * The server_count column on the entity is varchar(10) — map game_interest to it or add a
+ * migration adding a game_interest column.
+ */
+import { ref, onMounted, onUnmounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import Icon from '@/components/ds/core/Icon.vue'
+import CorrosionMark from '@/components/brand/CorrosionMark.vue'
 
-// ---------- Email capture ----------
+const panelUrl = import.meta.env.VITE_PANEL_URL ?? ''
+
+// Form state
 const email = ref('')
-const serverCount = ref('')
+const name = ref('')
+const gameInterest = ref('')
 const submitting = ref(false)
 const submitted = ref(false)
 const errorMsg = ref('')
 
-async function handleSubmit() {
-  if (!email.value || !serverCount.value) return
+const GAME_OPTIONS = [
+  { value: 'rust', label: 'Rust' },
+  { value: 'dune', label: 'Dune: Awakening' },
+  { value: 'conan', label: 'Conan Exiles' },
+  { value: 'soulmask', label: 'Soulmask' },
+  { value: 'multiple', label: 'Multiple games' },
+]
+
+async function handleSubmit(): Promise<void> {
+  if (!email.value) return
   errorMsg.value = ''
   submitting.value = true
   try {
@@ -19,12 +42,13 @@ async function handleSubmit() {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         email: email.value,
-        server_count: serverCount.value,
+        // server_count column stores game interest (varchar 10) — no dedicated name column in DB
+        server_count: gameInterest.value || 'not specified',
       }),
     })
     if (!res.ok) {
       const data = await res.json().catch(() => ({ message: 'Something went wrong' }))
-      throw new Error(data.message || `HTTP ${res.status}`)
+      throw new Error((data as { message?: string }).message ?? `HTTP ${res.status}`)
     }
     submitted.value = true
   } catch (err: unknown) {
@@ -34,291 +58,393 @@ async function handleSubmit() {
   }
 }
 
-// ---------- Demo panels ----------
-const panels = [
-  { label: 'Dashboard', icon: LayoutDashboard, desc: 'Server overview, player count, uptime, and alerts at a glance.' },
-  { label: 'Wipe Scheduler', icon: RefreshCw, desc: 'Visual wipe timeline with pre-wipe backup, map rotation, and health verification.' },
-  { label: 'Plugin Config', icon: Zap, desc: 'Edit plugin settings from your browser. No JSON. No SFTP.' },
-  { label: 'Player Management', icon: Users, desc: 'Online players, session tracking, kick/ban controls, and playtime history.' },
-  { label: 'Console', icon: Terminal, desc: 'Real-time RCON console with timestamped, color-coded output.' },
-]
+// Scroll-reveal
+let io: IntersectionObserver | null = null
 
-// ---------- Roadmap voting ----------
-interface VoteItem {
-  id: string
-  label: string
-  votes: number
-  voted: boolean
+function initReveal(): void {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+  io = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((e) => {
+        if (e.isIntersecting) {
+          e.target.classList.add('in')
+          io?.unobserve(e.target)
+        }
+      })
+    },
+    { threshold: 0.1 },
+  )
+  document.querySelectorAll('.reveal').forEach((el) => io?.observe(el))
 }
 
-const voteItems = ref<VoteItem[]>([
-  { id: 'analytics', label: 'Analytics & Retention Insights', votes: 47, voted: false },
-  { id: 'webstore', label: 'Integrated Webstore', votes: 38, voted: false },
-  { id: 'modules', label: 'Module Marketplace', votes: 31, voted: false },
-  { id: 'discord', label: 'Discord Bot Integration', votes: 28, voted: false },
-  { id: 'hosting', label: 'Hosting Provider API', votes: 19, voted: false },
-])
-
-function vote(item: VoteItem) {
-  if (item.voted) return
-  item.votes++
-  item.voted = true
-}
-
-const totalVotes = computed(() => voteItems.value.reduce((sum, i) => sum + i.votes, 0))
+onMounted(() => { initReveal() })
+onUnmounted(() => { io?.disconnect() })
 </script>
 
 <template>
-  <div>
-    <!-- Hero -->
-    <section class="relative overflow-hidden">
-      <div class="max-w-4xl mx-auto px-6 pt-20 pb-16 text-center">
-        <span class="inline-block px-4 py-1.5 bg-green-500/10 border border-green-500/20 rounded-full text-green-400 text-sm font-medium mb-6">
-          Early Access Is Now Open
-        </span>
-        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4 tracking-tight">
-          Wipe Night Just Got<br />
-          <span class="text-oxide-500">A Lot Easier.</span>
-        </h1>
-        <p class="text-lg text-neutral-400 max-w-xl mx-auto mb-10">
-          Corrosion is live in limited early access. Install once. Automate everything. Never SSH again.
-        </p>
-        <div class="flex items-center justify-center gap-4">
-          <a href="#join" class="px-8 py-3.5 bg-oxide-600 hover:bg-oxide-700 text-white font-semibold rounded-lg transition-colors">
-            Claim Your Spot
-          </a>
-          <a href="#demo" class="px-8 py-3.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-200 font-semibold rounded-lg border border-neutral-700 transition-colors">
-            View Demo Architecture
-          </a>
-        </div>
+  <!-- PAGE HEADER -->
+  <section class="hero" style="padding-bottom:0; border-bottom:none;">
+    <div class="hero__atmo" />
+    <div class="hero__grid" />
+    <div class="hero__grain" />
+    <div class="wrap hero__in" style="padding-bottom:52px;">
+      <div class="hero__mark">
+        <CorrosionMark :size="56" />
       </div>
-      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-oxide-500/8 rounded-full blur-3xl pointer-events-none" />
-    </section>
+      <span class="eyebrow">Early access</span>
+      <h1 style="font-size:var(--text-5xl)">
+        Take control of your servers.
+        <span class="accent">Starting now.</span>
+      </h1>
+      <p class="hero__sub">
+        Corrosion is in early access. Join the list to be notified when your access opens.
+        No spam. No fabricated scarcity.
+      </p>
+    </div>
+  </section>
 
-    <!-- Early Access Live Banner -->
-    <section class="py-12 border-t border-neutral-800">
-      <div class="max-w-3xl mx-auto px-6 text-center">
-        <div class="inline-flex items-center gap-3 px-6 py-4 bg-green-500/10 border border-green-500/20 rounded-2xl">
-          <div class="w-2.5 h-2.5 bg-green-400 rounded-full animate-pulse shrink-0" />
-          <p class="text-green-300 font-semibold text-lg">Early Access is now live — founding admin spots are limited.</p>
-        </div>
-        <p class="text-neutral-500 text-sm mt-4">
-          Sign up below to lock in founding pricing before spots run out.
+  <!-- WHAT YOU GET -->
+  <section class="sec" id="access">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">What early access means</span>
+        <h2 class="title">Real access to a real platform.</h2>
+        <p class="lead">
+          Early access is not a waitlist gimmick. It is how we manage onboarding while the
+          platform stabilizes. You get the full Corrosion control plane — one tier at a time
+          as capacity opens.
         </p>
       </div>
-    </section>
 
-    <!-- What Early Access Means -->
-    <section class="py-16 bg-neutral-900/50 border-t border-neutral-800">
-      <div class="max-w-4xl mx-auto px-6">
-        <h2 class="text-2xl font-bold text-neutral-100 mb-8 text-center">What Early Access Means</h2>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-xl text-center">
-            <Shield class="w-6 h-6 text-oxide-500 mx-auto mb-3" />
-            <p class="text-sm font-medium text-neutral-200">Limited Founding Licenses</p>
-            <p class="text-xs text-neutral-500 mt-1">25–50 spots</p>
-          </div>
-          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-xl text-center">
-            <MessageCircle class="w-6 h-6 text-oxide-500 mx-auto mb-3" />
-            <p class="text-sm font-medium text-neutral-200">Direct Founder Discord</p>
-            <p class="text-xs text-neutral-500 mt-1">Private channel access</p>
-          </div>
-          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-xl text-center">
-            <Star class="w-6 h-6 text-oxide-500 mx-auto mb-3" />
-            <p class="text-sm font-medium text-neutral-200">Influence the Roadmap</p>
-            <p class="text-xs text-neutral-500 mt-1">Vote on features</p>
-          </div>
-          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-xl text-center">
-            <Clock class="w-6 h-6 text-oxide-500 mx-auto mb-3" />
-            <p class="text-sm font-medium text-neutral-200">Lifetime Pricing Lock</p>
-            <p class="text-xs text-neutral-500 mt-1">Never pay more</p>
-          </div>
+      <div class="infra reveal">
+        <div class="icard">
+          <div class="icard__ic"><Icon name="cpu" :size="16" /></div>
+          <b>Full control plane</b>
+          <p>Agent, panel, wipes, console, plugins, schedules — all of it. Not a trimmed preview.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="shield" :size="16" /></div>
+          <b>Pricing you can lock in</b>
+          <p>Early access pricing is the live pricing. No bait-and-switch after launch.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="message-square" :size="16" /></div>
+          <b>Direct feedback channel</b>
+          <p>Early access operators have a direct line for platform bug reports and feature input.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="box" :size="16" /></div>
+          <b>Rust-first</b>
+          <p>Rust support is complete. Dune, Conan, and Soulmask are in active development.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="users" :size="16" /></div>
+          <b>RBAC team access</b>
+          <p>Add your admin team from day one. Fine-grained permission roles are built in.</p>
         </div>
       </div>
-    </section>
+    </div>
+  </section>
 
-    <!-- Email Capture -->
-    <section id="join" class="py-16 border-t border-neutral-800">
-      <div class="max-w-md mx-auto px-6">
-        <h2 class="text-2xl font-bold text-neutral-100 mb-2 text-center">Claim Your Founding Spot</h2>
-        <p class="text-neutral-400 text-center mb-8">Early access is open now. Spots are limited — lock in founding pricing today.</p>
-
-        <div v-if="submitted" class="bg-green-500/10 border border-green-500/20 rounded-xl p-8 text-center">
-          <Check class="w-10 h-10 text-green-400 mx-auto mb-3" />
-          <h3 class="text-lg font-semibold text-neutral-100 mb-1">You're in.</h3>
-          <p class="text-sm text-neutral-400">We'll be in touch shortly with your access details.</p>
+  <!-- SIGNUP FORM -->
+  <section class="sec" id="join">
+    <div class="wrap">
+      <div class="ea-form-wrap reveal">
+        <!-- Success state -->
+        <div v-if="submitted" class="ea-success">
+          <div class="ea-success__ic">
+            <Icon name="check" :size="28" />
+          </div>
+          <h2 class="ea-success__title">You are on the list.</h2>
+          <p class="ea-success__body">
+            We will reach out when your access slot opens. In the meantime, read the
+            <RouterLink :to="{ name: 'how-it-works' }" class="ea-link">how it works</RouterLink>
+            guide or review the
+            <RouterLink :to="{ name: 'faq' }" class="ea-link">FAQ</RouterLink>.
+          </p>
+          <RouterLink class="btn btn--ghost" :to="{ name: 'landing' }">
+            Back to home
+          </RouterLink>
         </div>
 
-        <form v-else @submit.prevent="handleSubmit" class="space-y-4">
-          <div v-if="errorMsg" class="p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm">
+        <!-- Form state -->
+        <form v-else @submit.prevent="handleSubmit" class="ea-form">
+          <div class="ea-form__head">
+            <h2>Join the early access list</h2>
+            <p>Required: email address. Everything else is optional but helps us prioritise.</p>
+          </div>
+
+          <!-- Error banner -->
+          <div v-if="errorMsg" class="ea-error">
+            <Icon name="triangle-alert" :size="15" />
             {{ errorMsg }}
           </div>
-          <div>
-            <label for="ea-email" class="block text-sm font-medium text-neutral-400 mb-1.5">Email</label>
+
+          <!-- Email (required) -->
+          <div class="ea-field">
+            <label class="ea-field__label" for="ea-email">
+              Email address <span class="ea-field__req">*</span>
+            </label>
             <input
               id="ea-email"
               v-model="email"
               type="email"
               required
+              autocomplete="email"
               placeholder="admin@example.com"
-              class="w-full px-3 py-2.5 bg-neutral-900 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+              class="ea-input"
             />
           </div>
-          <div>
-            <label for="ea-servers" class="block text-sm font-medium text-neutral-400 mb-1.5">How many servers do you run?</label>
-            <div class="grid grid-cols-3 gap-3">
+
+          <!-- Name (optional) -->
+          <div class="ea-field">
+            <label class="ea-field__label" for="ea-name">
+              Your name <span class="ea-field__optional">(optional)</span>
+            </label>
+            <input
+              id="ea-name"
+              v-model="name"
+              type="text"
+              autocomplete="name"
+              placeholder="Server admin name or handle"
+              class="ea-input"
+            />
+          </div>
+
+          <!-- Game interest (optional) -->
+          <div class="ea-field">
+            <label class="ea-field__label">
+              Primary game interest <span class="ea-field__optional">(optional)</span>
+            </label>
+            <div class="ea-pills">
               <button
-                v-for="option in ['1', '2-3', '4+']"
-                :key="option"
+                v-for="opt in GAME_OPTIONS"
+                :key="opt.value"
                 type="button"
-                @click="serverCount = option"
-                class="py-2.5 text-sm font-medium rounded-lg border transition-colors"
-                :class="serverCount === option
-                  ? 'bg-oxide-500/15 border-oxide-500/40 text-oxide-400'
-                  : 'bg-neutral-900 border-neutral-700 text-neutral-400 hover:border-neutral-600'"
+                class="ea-pill"
+                :class="{ 'ea-pill--on': gameInterest === opt.value }"
+                @click="gameInterest = gameInterest === opt.value ? '' : opt.value"
               >
-                {{ option }}
+                {{ opt.label }}
               </button>
             </div>
           </div>
+
           <button
             type="submit"
-            :disabled="submitting || !email || !serverCount"
-            class="w-full py-3 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors"
+            class="btn btn--primary btn--lg ea-submit"
+            :disabled="submitting || !email"
           >
-            {{ submitting ? 'Submitting...' : 'Join Early Access' }}
+            <Icon v-if="submitting" name="loader" :size="16" />
+            <Icon v-else name="send" :size="16" />
+            {{ submitting ? 'Submitting…' : 'Join early access' }}
           </button>
+
+          <p class="ea-privacy">
+            We store your email to contact you when access opens. We do not sell or share it.
+            No newsletters unless you opt in separately.
+          </p>
         </form>
       </div>
-    </section>
+    </div>
+  </section>
 
-    <!-- Founding Admin Program -->
-    <section class="py-16 bg-neutral-900/50 border-t border-neutral-800">
-      <div class="max-w-3xl mx-auto px-6 text-center">
-        <span class="inline-block px-3 py-1 bg-oxide-500/10 border border-oxide-500/20 rounded-full text-oxide-400 text-xs font-semibold uppercase tracking-wider mb-4">
-          Limited to 25 Servers
-        </span>
-        <h2 class="text-3xl font-bold text-neutral-100 mb-4">Founding Admin Program</h2>
-        <p class="text-neutral-400 mb-8">
-          The first 25 servers to run Corrosion receive:
-        </p>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div class="p-5 bg-neutral-900 border border-oxide-500/20 rounded-xl">
-            <Star class="w-5 h-5 text-oxide-500 mx-auto mb-2" />
-            <p class="text-sm font-medium text-neutral-200">Founding Admin Role</p>
-            <p class="text-xs text-neutral-500 mt-1">Discord badge</p>
-          </div>
-          <div class="p-5 bg-neutral-900 border border-oxide-500/20 rounded-xl">
-            <Clock class="w-5 h-5 text-oxide-500 mx-auto mb-2" />
-            <p class="text-sm font-medium text-neutral-200">Permanent Early Pricing</p>
-            <p class="text-xs text-neutral-500 mt-1">Locked forever</p>
-          </div>
-          <div class="p-5 bg-neutral-900 border border-oxide-500/20 rounded-xl">
-            <Users class="w-5 h-5 text-oxide-500 mx-auto mb-2" />
-            <p class="text-sm font-medium text-neutral-200">Public Recognition</p>
-            <p class="text-xs text-neutral-500 mt-1">Featured server</p>
-          </div>
-          <div class="p-5 bg-neutral-900 border border-oxide-500/20 rounded-xl">
-            <MessageCircle class="w-5 h-5 text-oxide-500 mx-auto mb-2" />
-            <p class="text-sm font-medium text-neutral-200">Direct Feature Input</p>
-            <p class="text-xs text-neutral-500 mt-1">Private channel</p>
-          </div>
+  <!-- HOW IT WORKS TEASER -->
+  <section class="sec" id="teaser">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">How it works</span>
+        <h2 class="title">Install the agent. Never SSH again.</h2>
+      </div>
+      <div class="steps reveal">
+        <div class="step">
+          <div class="step__n">1</div>
+          <b>Install the host agent</b>
+          <p>Download the Go binary from your dashboard. Run it on Windows or Linux. One agent per machine.</p>
+        </div>
+        <div class="step">
+          <div class="step__n">2</div>
+          <b>Agent connects to Corrosion</b>
+          <p>Single outbound NATS connection. No inbound ports. No exposed management panel on your machine.</p>
+        </div>
+        <div class="step">
+          <div class="step__n">3</div>
+          <b>Manage from the browser</b>
+          <p>Console, wipes, plugins, schedules, file manager, player management — all at panel.corrosionmgmt.com.</p>
         </div>
       </div>
-    </section>
-
-    <!-- Demo Dashboard Preview -->
-    <section id="demo" class="py-16 border-t border-neutral-800">
-      <div class="max-w-5xl mx-auto px-6">
-        <h2 class="text-2xl font-bold text-neutral-100 mb-2 text-center">Preview of Corrosion 1.0 Dashboard</h2>
-        <p class="text-neutral-500 text-center mb-10">Screenshots will replace these frames at launch.</p>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <div
-            v-for="panel in panels"
-            :key="panel.label"
-            class="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden hover:border-neutral-700 transition-colors"
-          >
-            <div class="h-36 bg-neutral-800/50 flex items-center justify-center border-b border-neutral-800">
-              <component :is="panel.icon" class="w-10 h-10 text-neutral-700" />
-            </div>
-            <div class="p-4">
-              <h3 class="text-sm font-semibold text-neutral-200 mb-1">{{ panel.label }}</h3>
-              <p class="text-xs text-neutral-500 leading-relaxed">{{ panel.desc }}</p>
-            </div>
-          </div>
-        </div>
+      <div class="closing reveal">
+        <RouterLink :to="{ name: 'how-it-works' }" class="btn btn--ghost btn--lg">
+          <Icon name="chevron-right" :size="17" />Read the full walkthrough
+        </RouterLink>
       </div>
-    </section>
+    </div>
+  </section>
 
-    <!-- Roadmap Voting -->
-    <section class="py-16 bg-neutral-900/50 border-t border-neutral-800">
-      <div class="max-w-2xl mx-auto px-6">
-        <h2 class="text-2xl font-bold text-neutral-100 mb-2 text-center">What Should We Build Next?</h2>
-        <p class="text-neutral-500 text-center mb-8">Vote on the features that matter most to you.</p>
-        <div class="space-y-3">
-          <button
-            v-for="item in voteItems"
-            :key="item.id"
-            @click="vote(item)"
-            class="w-full flex items-center gap-4 p-4 bg-neutral-900 border rounded-xl transition-colors text-left"
-            :class="item.voted ? 'border-oxide-500/30' : 'border-neutral-800 hover:border-neutral-700'"
-          >
-            <div class="flex-1">
-              <p class="text-sm font-medium" :class="item.voted ? 'text-oxide-400' : 'text-neutral-200'">{{ item.label }}</p>
-            </div>
-            <div class="flex items-center gap-3 shrink-0">
-              <div class="w-24 h-1.5 bg-neutral-800 rounded-full overflow-hidden">
-                <div
-                  class="h-full rounded-full transition-all duration-300"
-                  :class="item.voted ? 'bg-oxide-500' : 'bg-neutral-600'"
-                  :style="{ width: `${totalVotes ? (item.votes / totalVotes) * 100 : 0}%` }"
-                />
-              </div>
-              <span class="text-xs font-medium tabular-nums w-8 text-right" :class="item.voted ? 'text-oxide-400' : 'text-neutral-500'">
-                {{ item.votes }}
-              </span>
-            </div>
-          </button>
-        </div>
+  <!-- FINAL CTA -->
+  <section class="finalcta">
+    <div class="finalcta__atmo" />
+    <div class="wrap finalcta__in reveal">
+      <h2>Ready to stop babysitting<br>your servers?</h2>
+      <div class="cta-row">
+        <a href="#join" class="btn btn--primary btn--lg">
+          Sign up above
+        </a>
+        <a class="btn btn--ghost btn--lg" :href="panelUrl + '/login'">
+          <Icon name="play" :size="17" />View live demo
+        </a>
       </div>
-    </section>
-
-    <!-- Timeline -->
-    <section class="py-16 border-t border-neutral-800">
-      <div class="max-w-2xl mx-auto px-6">
-        <h2 class="text-2xl font-bold text-neutral-100 mb-8 text-center">Launch Timeline</h2>
-        <div class="space-y-4">
-          <div class="flex items-start gap-4">
-            <div class="w-8 h-8 bg-green-500/10 border border-green-500/20 rounded-full flex items-center justify-center shrink-0 mt-0.5">
-              <Check class="w-4 h-4 text-green-400" />
-            </div>
-            <div>
-              <p class="text-sm font-medium text-neutral-200">Week 1 — Closed Beta Stabilization</p>
-              <p class="text-xs text-neutral-500 mt-0.5">Core platform hardening and testing.</p>
-            </div>
-          </div>
-          <div class="ml-4 w-px h-4 bg-neutral-800" />
-          <div class="flex items-start gap-4">
-            <div class="w-8 h-8 bg-green-500/10 border border-green-500/20 rounded-full flex items-center justify-center shrink-0 mt-0.5">
-              <Check class="w-4 h-4 text-green-400" />
-            </div>
-            <div>
-              <p class="text-sm font-medium text-neutral-200">Week 2 — Early Access Open</p>
-              <p class="text-xs text-neutral-500 mt-0.5">Founding Admin licenses are live — claim yours now.</p>
-            </div>
-          </div>
-          <div class="ml-4 w-px h-4 bg-neutral-800" />
-          <div class="flex items-start gap-4">
-            <div class="w-8 h-8 bg-neutral-800 border border-neutral-700 rounded-full flex items-center justify-center shrink-0 mt-0.5">
-              <ChevronRight class="w-4 h-4 text-neutral-500" />
-            </div>
-            <div>
-              <p class="text-sm font-medium text-neutral-400">Public Release</p>
-              <p class="text-xs text-neutral-500 mt-0.5">Shortly after early access stabilization.</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  </div>
+    </div>
+  </section>
 </template>
+
+<style scoped>
+/* Form wrapper */
+.ea-form-wrap {
+  max-width: 520px;
+  margin: 0 auto;
+}
+
+/* Success state */
+.ea-success {
+  text-align: center;
+  padding: 48px 32px;
+  background: var(--surface-base);
+  border-radius: var(--radius-xl);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.ea-success__ic {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+  margin: 0 auto 18px;
+}
+.ea-success__title {
+  font-family: var(--font-brand);
+  font-weight: 700;
+  font-size: var(--text-2xl);
+  margin: 0 0 10px;
+}
+.ea-success__body {
+  color: var(--text-tertiary);
+  font-size: var(--text-sm);
+  line-height: 1.6;
+  margin: 0 0 24px;
+}
+.ea-link {
+  color: var(--accent-text);
+  text-decoration: none;
+  font-weight: 600;
+}
+.ea-link:hover { text-decoration: underline; }
+
+/* Form */
+.ea-form {
+  background: var(--surface-base);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--ring-default);
+  padding: 36px 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+.ea-form__head h2 {
+  font-family: var(--font-brand);
+  font-weight: 700;
+  font-size: var(--text-2xl);
+  margin: 0 0 6px;
+}
+.ea-form__head p {
+  color: var(--text-tertiary);
+  font-size: var(--text-sm);
+  margin: 0;
+}
+
+/* Error banner */
+.ea-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 14px;
+  background: color-mix(in srgb, var(--status-offline) 10%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-offline) 25%, transparent);
+  border-radius: var(--radius-md);
+  color: var(--status-offline);
+  font-size: var(--text-sm);
+}
+
+/* Fields */
+.ea-field { display: flex; flex-direction: column; gap: 7px; }
+.ea-field__label {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+.ea-field__req { color: var(--status-offline); }
+.ea-field__optional { color: var(--text-muted); font-weight: 400; }
+
+.ea-input {
+  height: 42px;
+  padding: 0 13px;
+  background: var(--surface-inset);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: var(--text-sm);
+  font-family: var(--font-sans);
+  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
+  outline: none;
+}
+.ea-input::placeholder { color: var(--text-muted); }
+.ea-input:focus {
+  border-color: var(--accent-border);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+/* Game pills */
+.ea-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.ea-pill {
+  height: 34px;
+  padding: 0 14px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-raised);
+  box-shadow: var(--ring-default);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: var(--transition-colors);
+}
+.ea-pill--on {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+
+/* Submit */
+.ea-submit {
+  width: 100%;
+  justify-content: center;
+}
+.ea-submit:disabled { opacity: 0.55; cursor: not-allowed; }
+
+/* Privacy note */
+.ea-privacy {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  text-align: center;
+  line-height: 1.5;
+  margin: 0;
+}
+</style>
diff --git a/frontend/src/views/marketing/FaqView.vue b/frontend/src/views/marketing/FaqView.vue
index 0990a69..508955d 100644
--- a/frontend/src/views/marketing/FaqView.vue
+++ b/frontend/src/views/marketing/FaqView.vue
@@ -1,101 +1,353 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { ChevronDown } from 'lucide-vue-next'
+import { ref, onMounted, onUnmounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import Icon from '@/components/ds/core/Icon.vue'
+import CorrosionMark from '@/components/brand/CorrosionMark.vue'
 
 interface FaqItem {
   question: string
   answer: string
 }
 
-const faqs: FaqItem[] = [
+interface FaqGroup {
+  label: string
+  icon: string
+  items: FaqItem[]
+}
+
+const groups: FaqGroup[] = [
   {
-    question: 'Do I need to open any firewall ports?',
-    answer: 'No. All connections are outbound from your server to Corrosion\'s cloud. No inbound ports required.',
+    label: 'Support',
+    icon: 'help-circle',
+    items: [
+      {
+        question: 'Do you provide direct support?',
+        answer:
+          'Corrosion is a self-service tool. Every plan includes documentation, community forum access, diagnostics, and structured platform bug reports. We do not provide 1:1 setup assistance, Discord DMs, video calls, server administration, hosting-provider troubleshooting, firewall configuration, mod installation, or emergency wipe-day support.',
+      },
+      {
+        question: 'What if Corrosion itself is broken?',
+        answer:
+          'Platform bugs and agent issues go through structured bug reports in the panel. Operator and Network customers receive priority bug triage for platform-level issues. Direct server administration is not included in any support tier.',
+      },
+      {
+        question: 'Do you manage my server for me?',
+        answer:
+          'No. Corrosion provides the panel, the agent, automation workflows, diagnostics, and the control plane. You remain responsible for your host machine, operating system, network, firewall, game files, mods, and community rules.',
+      },
+      {
+        question: 'Is hands-on help available?',
+        answer:
+          'Yes — separately. Direct 1:1 support is available at $125/hour, prepaid in 1-hour blocks. This is billed time with a human, not a support tier. It is available to any customer who needs it.',
+      },
+      {
+        question: 'What does community support include?',
+        answer:
+          'Documentation (setup guides, architecture reference, troubleshooting walkthroughs), a community forum for operator-to-operator knowledge sharing, in-panel diagnostics (agent health, log access), and a structured bug report system for platform issues.',
+      },
+    ],
   },
   {
-    question: 'Does Corrosion replace my hosting panel (AMP / Pterodactyl)?',
-    answer: 'No. Corrosion integrates with them via API or companion agent. Your existing panel remains intact.',
+    label: 'Product',
+    icon: 'server',
+    items: [
+      {
+        question: 'Do I need my own server?',
+        answer:
+          'Yes. Corrosion is bring-your-own-server. You supply the host machine — a VPS, dedicated server, or bare metal box running Windows or Linux. Corrosion provides the control plane, the agent, and the panel.',
+      },
+      {
+        question: 'Does Corrosion host my game server for me?',
+        answer:
+          'No. Corrosion is not a hosting provider. It is a management layer that runs on top of a server you already own or rent. If you need hosting, you need a separate hosting provider.',
+      },
+      {
+        question: 'Do I need to open inbound firewall ports for Corrosion?',
+        answer:
+          'No. The host agent establishes a single outbound NATS connection to Corrosion\'s cloud. No inbound management ports are required. Your game server\'s player ports (RCON, game ports) remain as they have always been.',
+      },
+      {
+        question: 'Does Corrosion replace AMP or Pterodactyl?',
+        answer:
+          'It can, depending on your use case. Corrosion is an independent control plane — it does not require an existing game panel. If you are currently using AMP or Pterodactyl, migration tooling is available in the panel.',
+      },
+      {
+        question: 'What happens if Corrosion goes offline?',
+        answer:
+          'Your game servers continue running normally. Corrosion does not proxy gameplay traffic — it only handles management operations. If the panel or cloud is unreachable, your players are unaffected.',
+      },
+      {
+        question: 'Can multiple admins manage the same server?',
+        answer:
+          'Yes. Role-based access control (RBAC) is built in. You can grant team members specific permissions — from full admin access down to read-only viewer — without sharing credentials.',
+      },
+      {
+        question: 'What OS does the agent run on?',
+        answer:
+          'Both Windows and Linux are supported for the host agent. The agent binary is downloaded directly from your dashboard — there is no manual build or dependency setup required.',
+      },
+      {
+        question: 'Is my data isolated from other customers?',
+        answer:
+          'Yes. All data is scoped by license ID at the database level. No server, config, or player data is shared across tenant boundaries.',
+      },
+    ],
   },
   {
-    question: 'What happens if Corrosion goes offline?',
-    answer: 'Your Rust server continues running normally. Corrosion does not proxy gameplay traffic.',
+    label: 'Games',
+    icon: 'box',
+    items: [
+      {
+        question: 'Which games are supported?',
+        answer:
+          'Currently in active development or shipped: Rust, Dune: Awakening, Conan Exiles, and Soulmask. Each game has a purpose-built blueprint — not a generic template — that models its specific operational reality (wipe types, mod systems, cluster configurations). More games are planned.',
+      },
+      {
+        question: 'Does Corrosion support Rust plugin management?',
+        answer:
+          'Yes. Corrosion integrates with uMod (Oxide) for Rust. You can browse the plugin registry, install plugins, manage configuration profiles, and push config changes to the server — all from the browser.',
+      },
+      {
+        question: 'Can I run multiple game types on the same host machine?',
+        answer:
+          'Yes. A single host agent can supervise multiple game server processes — across different games — on the same machine. Each game instance has its own lifecycle, configuration, and wipe schedule.',
+      },
+      {
+        question: 'Does Corrosion handle Rust wipes?',
+        answer:
+          'Yes. Rust wipes are a first-class feature: map wipes, blueprint wipes, and full wipes. Wipes run as verified, logged sequences — pre-warning, backup, stop, update, map rotation, restart, health check, announce. Rollback is available when supported.',
+      },
+    ],
   },
   {
-    question: 'Is my data shared with other servers?',
-    answer: 'No. All data is isolated by license ID. Multi-tenant database queries are scoped per license.',
-  },
-  {
-    question: 'What if a wipe fails?',
-    answer: 'Corrosion can automatically retry and optionally roll back using the pre-wipe backup.',
-  },
-  {
-    question: 'Does this work on bare metal?',
-    answer: 'Yes. Use the Companion Agent — no SSH required after initial setup.',
-  },
-  {
-    question: 'Can I manage multiple admins?',
-    answer: 'Yes. Multi-Admin Role-Based Access Control is built in. Grant granular permissions per team member.',
-  },
-  {
-    question: 'Is this beginner friendly?',
-    answer: 'Yes. If you can install a uMod plugin, you can use Corrosion.',
-  },
-  {
-    question: 'Does this replace Tebex?',
-    answer: 'Corrosion includes an optional integrated store (Phase 5 roadmap), but does not require Tebex.',
-  },
-  {
-    question: 'How is licensing handled?',
-    answer: 'One license per server. License validation occurs on plugin startup and periodically.',
+    label: 'Billing',
+    icon: 'credit-card',
+    items: [
+      {
+        question: 'What counts as commercial use?',
+        answer:
+          'Commercial use includes monetized communities, paid access, VIP slots, donation-funded servers, sponsorship-supported servers, hosting providers, or managing servers for others. Hobby and Community plans are non-commercial only. Operator and Network plans permit commercial use.',
+      },
+      {
+        question: 'What is the Fleet Block on the Network plan?',
+        answer:
+          'The Network plan base includes 50 server instances at $99.99/mo. Each additional Fleet Block adds 50 more server slots at $49.99/mo. Stack as many Fleet Blocks as your operation requires.',
+      },
+      {
+        question: 'Can I upgrade my plan?',
+        answer:
+          'Yes. You can upgrade at any time. Pricing is prorated from the upgrade date.',
+      },
+      {
+        question: 'Is there a free trial?',
+        answer:
+          'Corrosion is currently in early access. Join the early access list to be notified when access opens.',
+      },
+      {
+        question: 'Are there annual billing discounts?',
+        answer:
+          'Not at this time. All plans are billed monthly.',
+      },
+    ],
   },
 ]
 
-const openIndex = ref<number | null>(null)
+const openKey = ref<string | null>(null)
 
-function toggle(index: number) {
-  openIndex.value = openIndex.value === index ? null : index
+function toggle(key: string): void {
+  openKey.value = openKey.value === key ? null : key
 }
+
+function itemKey(groupLabel: string, idx: number): string {
+  return `${groupLabel}-${idx}`
+}
+
+// Scroll-reveal
+let io: IntersectionObserver | null = null
+
+function initReveal(): void {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+  io = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((e) => {
+        if (e.isIntersecting) {
+          e.target.classList.add('in')
+          io?.unobserve(e.target)
+        }
+      })
+    },
+    { threshold: 0.1 },
+  )
+  document.querySelectorAll('.reveal').forEach((el) => io?.observe(el))
+}
+
+onMounted(() => { initReveal() })
+onUnmounted(() => { io?.disconnect() })
 </script>
 
 <template>
-  <div>
-    <!-- Header -->
-    <section class="pt-20 pb-12">
-      <div class="max-w-4xl mx-auto px-6 text-center">
-        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4">Frequently Asked Questions</h1>
-        <p class="text-lg text-neutral-400">Everything you need to know about Corrosion.</p>
+  <!-- PAGE HEADER -->
+  <section class="hero" style="padding-bottom:0; border-bottom:none;">
+    <div class="hero__atmo" />
+    <div class="hero__grid" />
+    <div class="hero__grain" />
+    <div class="wrap hero__in" style="padding-bottom:52px;">
+      <div class="hero__mark">
+        <CorrosionMark :size="56" />
       </div>
-    </section>
+      <span class="eyebrow">FAQ</span>
+      <h1 style="font-size:var(--text-5xl)">
+        Honest answers.
+        <span class="accent">No marketing fluff.</span>
+      </h1>
+      <p class="hero__sub">
+        Common questions about support, the product, supported games, and billing — answered
+        plainly.
+      </p>
+    </div>
+  </section>
 
-    <!-- FAQ Accordion -->
-    <section class="pb-20">
-      <div class="max-w-3xl mx-auto px-6">
-        <div class="space-y-3">
+  <!-- FAQ GROUPS -->
+  <section class="sec" id="faq">
+    <div class="wrap">
+      <div
+        v-for="group in groups"
+        :key="group.label"
+        class="faq-group reveal"
+      >
+        <div class="faq-group__head">
+          <span class="faq-group__ic">
+            <Icon :name="group.icon" :size="16" />
+          </span>
+          <span class="eyebrow">{{ group.label }}</span>
+        </div>
+
+        <div class="faq-list">
           <div
-            v-for="(faq, index) in faqs"
-            :key="index"
-            class="bg-neutral-900 border rounded-xl overflow-hidden transition-colors"
-            :class="openIndex === index ? 'border-oxide-500/30' : 'border-neutral-800'"
+            v-for="(item, idx) in group.items"
+            :key="idx"
+            class="faq-item"
+            :class="{ 'faq-item--open': openKey === itemKey(group.label, idx) }"
           >
             <button
-              @click="toggle(index)"
-              class="w-full flex items-center justify-between p-6 text-left"
+              class="faq-item__q"
+              @click="toggle(itemKey(group.label, idx))"
             >
-              <span class="text-neutral-100 font-medium pr-4">{{ faq.question }}</span>
-              <ChevronDown
-                class="w-5 h-5 text-neutral-500 shrink-0 transition-transform duration-200"
-                :class="{ 'rotate-180': openIndex === index }"
-              />
+              <span>{{ item.question }}</span>
+              <span class="faq-item__chevron">
+                <Icon
+                  name="chevron-down"
+                  :size="16"
+                  :class="{ 'faq-item__chevron--open': openKey === itemKey(group.label, idx) }"
+                />
+              </span>
             </button>
             <div
-              v-if="openIndex === index"
-              class="px-6 pb-6 -mt-2"
+              v-if="openKey === itemKey(group.label, idx)"
+              class="faq-item__a"
             >
-              <p class="text-neutral-400 leading-relaxed">{{ faq.answer }}</p>
+              {{ item.answer }}
             </div>
           </div>
         </div>
       </div>
-    </section>
-  </div>
+    </div>
+  </section>
+
+  <!-- SUPPORT CTA -->
+  <section class="sec" id="support-cta" style="border-bottom:none">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Still have questions?</span>
+        <h2 class="title">Check the docs or join the community</h2>
+        <p class="lead">
+          The documentation covers setup, architecture, troubleshooting, and every supported
+          game. The community forum is where operators share configs, ask questions, and help
+          each other.
+        </p>
+      </div>
+      <div class="hero__cta reveal">
+        <RouterLink class="btn btn--primary btn--lg" :to="{ name: 'early-access' }">
+          Join early access
+        </RouterLink>
+        <RouterLink class="btn btn--ghost btn--lg" :to="{ name: 'pricing' }">
+          <Icon name="credit-card" :size="17" />View pricing
+        </RouterLink>
+      </div>
+    </div>
+  </section>
 </template>
+
+<style scoped>
+.faq-group {
+  margin-bottom: 48px;
+}
+.faq-group__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+.faq-group__ic {
+  width: 28px;
+  height: 28px;
+  flex: none;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent-text);
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+
+.faq-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 860px;
+  margin: 0 auto;
+}
+.faq-item {
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default);
+  overflow: hidden;
+  transition: box-shadow var(--dur-fast);
+}
+.faq-item--open {
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.faq-item__q {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 20px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+  transition: color var(--dur-fast);
+}
+.faq-item__q:hover { color: var(--accent-text); }
+.faq-item__chevron {
+  flex: none;
+  color: var(--text-muted);
+  transition: color var(--dur-fast);
+}
+.faq-item__chevron--open {
+  transform: rotate(180deg);
+  color: var(--accent-text);
+}
+.faq-item__a {
+  padding: 0 20px 18px;
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  line-height: 1.65;
+}
+</style>
diff --git a/frontend/src/views/marketing/HowItWorksView.vue b/frontend/src/views/marketing/HowItWorksView.vue
index 8db8f20..7f8feb3 100644
--- a/frontend/src/views/marketing/HowItWorksView.vue
+++ b/frontend/src/views/marketing/HowItWorksView.vue
@@ -1,150 +1,358 @@
 <script setup lang="ts">
-import { Download, Globe, Wifi, LayoutDashboard, ArrowDown } from 'lucide-vue-next'
+import { onMounted, onUnmounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import Icon from '@/components/ds/core/Icon.vue'
+import CorrosionMark from '@/components/brand/CorrosionMark.vue'
+
+const panelUrl = import.meta.env.VITE_PANEL_URL ?? ''
+
+// Scroll-reveal
+let io: IntersectionObserver | null = null
+
+function initReveal(): void {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+  io = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((e) => {
+        if (e.isIntersecting) {
+          e.target.classList.add('in')
+          io?.unobserve(e.target)
+        }
+      })
+    },
+    { threshold: 0.1 },
+  )
+  document.querySelectorAll('.reveal').forEach((el) => io?.observe(el))
+}
+
+onMounted(() => { initReveal() })
+onUnmounted(() => { io?.disconnect() })
 </script>
 
 <template>
-  <div>
-    <!-- Header -->
-    <section class="pt-20 pb-12">
-      <div class="max-w-4xl mx-auto px-6 text-center">
-        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4">How Corrosion Works</h1>
-        <p class="text-lg text-neutral-400">
-          Corrosion connects your Rust server to a hosted control plane — securely, outbound-only.
+  <!-- PAGE HEADER -->
+  <section class="hero" style="padding-bottom:0; border-bottom:none;">
+    <div class="hero__atmo" />
+    <div class="hero__grid" />
+    <div class="hero__grain" />
+    <div class="wrap hero__in" style="padding-bottom:52px;">
+      <div class="hero__mark">
+        <CorrosionMark :size="56" />
+      </div>
+      <span class="eyebrow">How it works</span>
+      <h1 style="font-size:var(--text-5xl)">
+        One agent.
+        <span class="accent">Every game. No SSH.</span>
+      </h1>
+      <p class="hero__sub">
+        Install the host agent once on your Windows or Linux machine. Corrosion connects
+        securely, outbound-only. You manage every game instance from the browser.
+      </p>
+    </div>
+  </section>
+
+  <!-- THE MODEL: 3-STEP OVERVIEW -->
+  <section class="sec" id="model">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">The agent model</span>
+        <h2 class="title">Bring your own server.<br>We provide the control plane.</h2>
+        <p class="lead">
+          Corrosion is not a hosting provider. You supply the hardware or the VPS. The host
+          agent runs on that machine and bridges your game instances to Corrosion's control
+          plane — securely, without opening inbound firewall ports.
         </p>
       </div>
-    </section>
+      <div class="steps reveal">
+        <div class="step">
+          <div class="step__n">1</div>
+          <b>Install the host agent</b>
+          <p>
+            Download the Corrosion agent binary from your dashboard. Run it on any Windows
+            or Linux host. One agent per machine — it manages every game instance you assign
+            to it.
+          </p>
+        </div>
+        <div class="step">
+          <div class="step__n">2</div>
+          <b>It connects to Corrosion</b>
+          <p>
+            The agent makes a single outbound NATS connection to Corrosion's cloud. No
+            inbound ports. No open panels. No SSH required after initial setup.
+          </p>
+        </div>
+        <div class="step">
+          <div class="step__n">3</div>
+          <b>Deploy and manage from the browser</b>
+          <p>
+            Create game instances, run wipes, manage plugins, schedule maintenance, and
+            monitor players — all from the Corrosion panel at panel.corrosionmgmt.com.
+          </p>
+        </div>
+      </div>
+      <div class="nots reveal">
+        <span><Icon name="check" :size="16" style="color:var(--status-online)" />No open inbound ports</span>
+        <span><Icon name="check" :size="16" style="color:var(--status-online)" />No permanent SSH sessions</span>
+        <span><Icon name="check" :size="16" style="color:var(--status-online)" />No config file spelunking</span>
+        <span><Icon name="check" :size="16" style="color:var(--status-online)" />Windows and Linux supported</span>
+      </div>
+    </div>
+  </section>
 
-    <!-- Steps -->
-    <section class="pb-20">
-      <div class="max-w-3xl mx-auto px-6">
-        <div class="space-y-2">
-          <!-- Step 1 -->
-          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
-            <div class="flex items-start gap-6">
-              <div class="w-12 h-12 bg-oxide-500/10 border border-oxide-500/20 rounded-xl flex items-center justify-center shrink-0">
-                <Download class="w-6 h-6 text-oxide-500" />
-              </div>
-              <div>
-                <div class="flex items-center gap-3 mb-2">
-                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 1</span>
-                </div>
-                <h3 class="text-xl font-bold text-neutral-100 mb-2">Install the Plugin</h3>
-                <p class="text-neutral-400">
-                  Drop the Corrosion plugin into <code class="px-2 py-0.5 bg-neutral-800 rounded text-oxide-300 text-sm">oxide/plugins</code>.
-                  That's it. No dependencies, no config files to create.
-                </p>
-              </div>
+  <!-- MULTI-GAME RUNTIME -->
+  <section class="sec" id="multi-game">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Multi-game host runtime</span>
+        <h2 class="title">One agent. Multiple game worlds<br>on the same machine.</h2>
+        <p class="lead">
+          The host agent is not a per-game process. It is a general-purpose ops runtime. One
+          agent on a single machine can supervise multiple game server processes across
+          different games — each with its own configuration, lifecycle, and wipe schedule.
+        </p>
+      </div>
+
+      <div class="blueprints reveal">
+        <div class="bp" data-game="rust">
+          <div class="bp__head">
+            <span class="bp__ic"><Icon name="box" :size="21" /></span>
+            <div>
+              <div class="bp__name">Rust</div>
+              <div class="bp__accent">Oxide Orange</div>
             </div>
           </div>
-
-          <div class="flex justify-center py-1">
-            <ArrowDown class="w-5 h-5 text-neutral-700" />
+          <div class="bp__role">uMod / Oxide plugin ecosystem</div>
+          <div class="bp__list">
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Map / BP / full wipe scheduling</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Plugin config profiles from the browser</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Wipe-day backup before every change</div>
           </div>
-
-          <!-- Step 2 -->
-          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
-            <div class="flex items-start gap-6">
-              <div class="w-12 h-12 bg-oxide-500/10 border border-oxide-500/20 rounded-xl flex items-center justify-center shrink-0">
-                <Globe class="w-6 h-6 text-oxide-500" />
-              </div>
-              <div>
-                <div class="flex items-center gap-3 mb-2">
-                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 2</span>
-                </div>
-                <h3 class="text-xl font-bold text-neutral-100 mb-2">Register Online</h3>
-                <p class="text-neutral-400">
-                  Activate your license and configure your server. Set your hostname, game port, and admin preferences.
-                </p>
-              </div>
+        </div>
+        <div class="bp" data-game="dune">
+          <div class="bp__head">
+            <span class="bp__ic"><Icon name="sun" :size="21" /></span>
+            <div>
+              <div class="bp__name">Dune: Awakening</div>
+              <div class="bp__accent">Spice Amber</div>
             </div>
           </div>
-
-          <div class="flex justify-center py-1">
-            <ArrowDown class="w-5 h-5 text-neutral-700" />
+          <div class="bp__role">Battlegroup orchestration</div>
+          <div class="bp__list">
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Deep Desert wipe scheduling</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Procedural map regeneration</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Battlegroup lifecycle controls</div>
           </div>
-
-          <!-- Step 3 -->
-          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
-            <div class="flex items-start gap-6">
-              <div class="w-12 h-12 bg-oxide-500/10 border border-oxide-500/20 rounded-xl flex items-center justify-center shrink-0">
-                <Wifi class="w-6 h-6 text-oxide-500" />
-              </div>
-              <div>
-                <div class="flex items-center gap-3 mb-2">
-                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 3</span>
-                </div>
-                <h3 class="text-xl font-bold text-neutral-100 mb-2">Secure Outbound Connection</h3>
-                <p class="text-neutral-400">
-                  Your server connects securely to Corrosion's NATS cluster. No inbound firewall rules required. Your server initiates all connections.
-                </p>
-              </div>
+        </div>
+        <div class="bp" data-game="soulmask">
+          <div class="bp__head">
+            <span class="bp__ic"><Icon name="drama" :size="21" /></span>
+            <div>
+              <div class="bp__name">Soulmask</div>
+              <div class="bp__accent">Ritual Jade</div>
             </div>
           </div>
-
-          <div class="flex justify-center py-1">
-            <ArrowDown class="w-5 h-5 text-neutral-700" />
+          <div class="bp__role">Linked-world cluster deployment</div>
+          <div class="bp__list">
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />One-click linked-server clusters</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Port and config automation</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Cluster health monitoring</div>
           </div>
+        </div>
+        <div class="bp" data-game="conan">
+          <div class="bp__head">
+            <span class="bp__ic"><Icon name="swords" :size="21" /></span>
+            <div>
+              <div class="bp__name">Conan Exiles</div>
+              <div class="bp__accent">Hyborian Bronze</div>
+            </div>
+          </div>
+          <div class="bp__role">Persistent world management</div>
+          <div class="bp__list">
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Mod management + world backups</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Purge, decay, and event tracking</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Scheduled maintenance workflows</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 
-          <!-- Step 4 -->
-          <div class="bg-neutral-900 border border-oxide-500/30 rounded-xl p-8">
-            <div class="flex items-start gap-6">
-              <div class="w-12 h-12 bg-oxide-500/15 border border-oxide-500/30 rounded-xl flex items-center justify-center shrink-0">
-                <LayoutDashboard class="w-6 h-6 text-oxide-400" />
-              </div>
-              <div>
-                <div class="flex items-center gap-3 mb-2">
-                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 4</span>
-                </div>
-                <h3 class="text-xl font-bold text-neutral-100 mb-2">Full Orchestration</h3>
-                <p class="text-neutral-400 mb-4">From the dashboard, you can:</p>
-                <ul class="space-y-2">
-                  <li class="text-neutral-300 text-sm flex items-center gap-2">
-                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
-                    Execute console commands
-                  </li>
-                  <li class="text-neutral-300 text-sm flex items-center gap-2">
-                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
-                    Configure plugins
-                  </li>
-                  <li class="text-neutral-300 text-sm flex items-center gap-2">
-                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
-                    Schedule wipes
-                  </li>
-                  <li class="text-neutral-300 text-sm flex items-center gap-2">
-                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
-                    Monitor performance
-                  </li>
-                  <li class="text-neutral-300 text-sm flex items-center gap-2">
-                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
-                    Automate Steam updates
-                  </li>
-                </ul>
-              </div>
+  <!-- WIPE AND MAINTENANCE AUTOMATION -->
+  <section class="sec" id="automation">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Wipe and maintenance automation</span>
+        <h2 class="title">Self-service workflows,<br>not manual processes</h2>
+        <p class="lead">
+          Every wipe, update, and maintenance window runs as a verified, logged sequence.
+          Pre-warning announcements, pre-wipe backups, health checks after restart, and
+          rollback capability when things go wrong.
+        </p>
+      </div>
+
+      <div class="pipe reveal">
+        <span class="pchip">Pre-warning</span>
+        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
+        <span class="pchip">Backup</span>
+        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
+        <span class="pchip">Stop services</span>
+        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
+        <span class="pchip">Update / rotate</span>
+        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
+        <span class="pchip">Restart</span>
+        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
+        <span class="pchip">Health check</span>
+        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
+        <span class="pchip pchip--last">Announce complete</span>
+      </div>
+
+      <div class="stack-lines reveal">
+        <span>Every operation is logged. Every step is verified.</span>
+        <span class="hi">Rollback is one click away when supported.</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- ARCHITECTURE: HOW CONNECTIVITY WORKS -->
+  <section class="sec" id="connectivity">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Connectivity model</span>
+        <h2 class="title">Outbound-only. No exposed panel.</h2>
+        <p class="lead">
+          The host agent establishes one secure NATS connection to Corrosion's cloud. All
+          commands flow through that channel. Your machine never needs to accept inbound
+          connections from the internet.
+        </p>
+      </div>
+
+      <div class="infra reveal">
+        <div class="icard">
+          <div class="icard__ic"><Icon name="server" :size="16" /></div>
+          <b>Your host machine</b>
+          <p>Windows or Linux. Bare metal, VPS, or dedicated. You own it and run it.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="cpu" :size="16" /></div>
+          <b>Corrosion agent</b>
+          <p>A single Go binary. Runs as a service. Manages game processes, files, and updates.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="zap" :size="16" /></div>
+          <b>Outbound NATS channel</b>
+          <p>One secure, outbound-only connection. No open ports. No SSH tunnels.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="shield" :size="16" /></div>
+          <b>Corrosion cloud</b>
+          <p>Hosted control plane. Multi-tenant isolation. Every command is license-scoped.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="layout-dashboard" :size="16" /></div>
+          <b>Your browser</b>
+          <p>The panel at panel.corrosionmgmt.com. Console, wipes, plugins, schedules — all here.</p>
+        </div>
+      </div>
+
+      <div class="techrow reveal">
+        <span>Go host agent</span>
+        <span>NATS JetStream</span>
+        <span>NestJS API</span>
+        <span>PostgreSQL</span>
+        <span>Outbound-only connectivity</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOST REQUIREMENTS -->
+  <section class="sec" id="requirements">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Host requirements</span>
+        <h2 class="title">What you need to get started</h2>
+      </div>
+
+      <div class="caps reveal" style="max-width:760px">
+        <div class="caps__col">
+          <span class="eyebrow">Your machine</span>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="server" :size="16" /></span>
+            <div>
+              <b>Windows or Linux host</b>
+              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
+                VPS, dedicated server, or bare metal. You supply it; Corrosion manages it.
+              </p>
+            </div>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="hard-drive" :size="16" /></span>
+            <div>
+              <b>Enough CPU and RAM for your game</b>
+              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
+                Corrosion's agent is lightweight. Your game server determines the actual
+                hardware requirement.
+              </p>
+            </div>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="wifi" :size="16" /></span>
+            <div>
+              <b>Outbound internet access</b>
+              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
+                The agent connects out; your game server's player ports stay open as they
+                always have been.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="caps__col">
+          <span class="eyebrow">From Corrosion</span>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="download" :size="16" /></span>
+            <div>
+              <b>Agent binary (Windows or Linux)</b>
+              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
+                Downloaded from your dashboard. No manual build. No dependency management.
+              </p>
+            </div>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="key" :size="16" /></span>
+            <div>
+              <b>Your license key</b>
+              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
+                Issued when you register. The agent uses it to authenticate to the cloud.
+              </p>
+            </div>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="globe" :size="16" /></span>
+            <div>
+              <b>The panel</b>
+              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
+                Everything else — console, wipes, schedules, players — lives at
+                panel.corrosionmgmt.com.
+              </p>
             </div>
           </div>
         </div>
       </div>
-    </section>
+    </div>
+  </section>
 
-    <!-- Architecture Diagram -->
-    <section class="py-20 bg-neutral-900/50 border-t border-neutral-800">
-      <div class="max-w-3xl mx-auto px-6 text-center">
-        <h2 class="text-2xl font-bold text-neutral-100 mb-10">Architecture Overview</h2>
-        <div class="space-y-3">
-          <div class="inline-block px-6 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-medium">Rust Server</div>
-          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
-          <div class="inline-block px-6 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-medium">Corrosion Plugin</div>
-          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
-          <div class="inline-block px-6 py-3 bg-oxide-500/10 border border-oxide-500/30 rounded-lg text-oxide-400 font-medium">Secure NATS Messaging</div>
-          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
-          <div class="inline-block px-6 py-3 bg-oxide-500/10 border border-oxide-500/30 rounded-lg text-oxide-400 font-medium">Corrosion Cloud</div>
-          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
-          <div class="inline-block px-6 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-medium">Dashboard + Store + Analytics</div>
-        </div>
-        <p class="text-neutral-500 mt-10">
-          Corrosion does not proxy gameplay traffic. It orchestrates operations.
-        </p>
+  <!-- FINAL CTA -->
+  <section class="finalcta">
+    <div class="finalcta__atmo" />
+    <div class="wrap finalcta__in reveal">
+      <h2>Install the agent.<br>Never SSH again.</h2>
+      <div class="cta-row">
+        <RouterLink class="btn btn--primary btn--lg" :to="{ name: 'early-access' }">
+          Join early access
+        </RouterLink>
+        <a class="btn btn--ghost btn--lg" :href="panelUrl + '/login'">
+          <Icon name="play" :size="17" />View live demo
+        </a>
       </div>
-    </section>
-  </div>
+    </div>
+  </section>
 </template>
diff --git a/frontend/src/views/marketing/PricingView.vue b/frontend/src/views/marketing/PricingView.vue
index daf0976..85398a7 100644
--- a/frontend/src/views/marketing/PricingView.vue
+++ b/frontend/src/views/marketing/PricingView.vue
@@ -1,129 +1,429 @@
 <script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
 import { RouterLink } from 'vue-router'
-import { Check } from 'lucide-vue-next'
+import Icon from '@/components/ds/core/Icon.vue'
+import CorrosionMark from '@/components/brand/CorrosionMark.vue'
+
+const panelUrl = import.meta.env.VITE_PANEL_URL ?? ''
+
+// Scroll-reveal
+let io: IntersectionObserver | null = null
+
+function initReveal(): void {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+  io = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((e) => {
+        if (e.isIntersecting) {
+          e.target.classList.add('in')
+          io?.unobserve(e.target)
+        }
+      })
+    },
+    { threshold: 0.1 },
+  )
+  document.querySelectorAll('.reveal').forEach((el) => io?.observe(el))
+}
+
+onMounted(() => { initReveal() })
+onUnmounted(() => { io?.disconnect() })
+
+interface PlanFeature {
+  text: string
+}
+
+interface Plan {
+  name: string
+  price: string
+  period: string
+  scope: string
+  tag: string
+  featured: boolean
+  cta: string
+  ctaVariant: 'primary' | 'ghost'
+  features: PlanFeature[]
+}
+
+const plans: Plan[] = [
+  {
+    name: 'Hobby',
+    price: '$9.99',
+    period: '/mo',
+    scope: '1–5 servers · non-commercial use',
+    tag: '',
+    featured: false,
+    cta: 'Join early access',
+    ctaVariant: 'ghost',
+    features: [
+      { text: 'Up to 5 game server instances' },
+      { text: 'Non-commercial servers only' },
+      { text: 'Auto-wiper with rollback' },
+      { text: 'Plugin management (Rust)' },
+      { text: 'File manager + real-time console' },
+      { text: 'Scheduled tasks' },
+      { text: 'Public server page' },
+      { text: 'Community support' },
+    ],
+  },
+  {
+    name: 'Community',
+    price: '$19.99',
+    period: '/mo',
+    scope: '6–10 servers · non-commercial use',
+    tag: '',
+    featured: false,
+    cta: 'Join early access',
+    ctaVariant: 'ghost',
+    features: [
+      { text: 'Up to 10 game server instances' },
+      { text: 'Non-commercial servers only' },
+      { text: 'Auto-wiper with rollback' },
+      { text: 'Plugin management (Rust)' },
+      { text: 'File manager + real-time console' },
+      { text: 'Scheduled tasks' },
+      { text: 'Public server page' },
+      { text: 'Community support' },
+    ],
+  },
+  {
+    name: 'Operator',
+    price: '$99.99',
+    period: '/mo',
+    scope: 'Commercial use · or 11–50 servers',
+    tag: 'Most popular',
+    featured: true,
+    cta: 'Get Operator',
+    ctaVariant: 'primary',
+    features: [
+      { text: 'Up to 50 game server instances' },
+      { text: 'Commercial use permitted' },
+      { text: 'All games: Rust, Dune, Soulmask, Conan' },
+      { text: 'Auto-wiper with rollback' },
+      { text: 'Plugin + mod management' },
+      { text: 'File manager + real-time console' },
+      { text: 'Scheduled tasks + maintenance windows' },
+      { text: 'Player management + RBAC team access' },
+      { text: 'Public server page + storefront' },
+      { text: 'Community support + priority bug triage' },
+    ],
+  },
+  {
+    name: 'Network',
+    price: '$99.99',
+    period: '/mo',
+    scope: '50+ servers · hosting partners + fleets',
+    tag: '',
+    featured: false,
+    cta: 'Join early access',
+    ctaVariant: 'ghost',
+    features: [
+      { text: '50 servers base included' },
+      { text: 'Fleet Blocks: +$49.99/mo per 50 servers' },
+      { text: 'Commercial use permitted' },
+      { text: 'All games + multi-game hosts' },
+      { text: 'Full Operator feature set' },
+      { text: 'Fleet-level management' },
+      { text: 'Priority bug triage for platform issues' },
+      { text: 'Community support' },
+    ],
+  },
+]
 </script>
 
 <template>
-  <div>
-    <!-- Header -->
-    <section class="pt-20 pb-12">
-      <div class="max-w-4xl mx-auto px-6 text-center">
-        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4">Pricing</h1>
-        <p class="text-lg text-neutral-400">Simple. Transparent. No hidden tiers.</p>
+  <!-- PAGE HEADER -->
+  <section class="hero" style="padding-bottom:0; border-bottom:none;">
+    <div class="hero__atmo" />
+    <div class="hero__grid" />
+    <div class="hero__grain" />
+    <div class="wrap hero__in" style="padding-bottom: 52px;">
+      <div class="hero__mark">
+        <CorrosionMark :size="56" />
       </div>
-    </section>
+      <span class="eyebrow">Pricing</span>
+      <h1 style="font-size:var(--text-5xl)">
+        Scale from one server
+        <span class="accent">to a fleet.</span>
+      </h1>
+      <p class="hero__sub">
+        Simple tiers based on how many servers you run and whether you operate commercially.
+        No per-seat charges. No surprises.
+      </p>
+    </div>
+  </section>
 
-    <!-- Pricing Cards -->
-    <section class="pb-20">
-      <div class="max-w-5xl mx-auto px-6">
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <!-- Base License -->
-          <div class="bg-neutral-900 border-2 border-oxide-500/40 rounded-xl p-8 relative">
-            <div class="absolute -top-3 left-1/2 -translate-x-1/2">
-              <span class="px-3 py-1 bg-oxide-600 text-white text-xs font-semibold rounded-full uppercase tracking-wider">Most Popular</span>
-            </div>
-            <div class="text-center mb-6">
-              <h3 class="text-xl font-bold text-neutral-100 mb-2">Base License</h3>
-              <div class="flex items-baseline justify-center gap-1">
-                <span class="text-4xl font-bold text-oxide-400">$50</span>
-              </div>
-              <p class="text-sm text-neutral-500 mt-1">One server. Lifetime access.</p>
-              <p class="text-xs text-oxide-400/70 mt-1">Launch Price</p>
-            </div>
-            <ul class="space-y-3 mb-8">
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Full control plane
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Auto-Wiper with rollback
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Plugin management
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Public server site
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Multi-admin RBAC
-              </li>
-            </ul>
-            <RouterLink to="/register" class="block w-full py-3 bg-oxide-600 hover:bg-oxide-700 text-white text-center font-semibold rounded-lg transition-colors">
-              Get Started
-            </RouterLink>
+  <!-- PRICING CARDS -->
+  <section class="sec" id="plans">
+    <div class="wrap">
+      <div class="pricing reveal">
+        <div
+          v-for="plan in plans"
+          :key="plan.name"
+          class="plan"
+          :class="plan.featured ? 'plan--feature' : ''"
+        >
+          <div class="plan__tag">{{ plan.tag }}</div>
+          <div class="plan__name">{{ plan.name }}</div>
+          <div class="plan__price">
+            {{ plan.price }}<small>{{ plan.period }}</small>
           </div>
+          <div class="plan__scope">{{ plan.scope }}</div>
 
-          <!-- Webstore Add-On -->
-          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
-            <div class="text-center mb-6">
-              <h3 class="text-xl font-bold text-neutral-100 mb-2">Webstore Add-On</h3>
-              <div class="flex items-baseline justify-center gap-1">
-                <span class="text-4xl font-bold text-neutral-200">$10</span>
-                <span class="text-neutral-500">/mo</span>
-              </div>
-              <p class="text-sm text-neutral-500 mt-1">Integrated monetization platform.</p>
-            </div>
-            <ul class="space-y-3 mb-8">
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Item catalog
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Stripe + PayPal
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Auto-delivery via RCON
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Transaction history
-              </li>
-            </ul>
-            <button class="block w-full py-3 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 text-center font-semibold rounded-lg border border-neutral-700 transition-colors">
-              Coming Soon
-            </button>
-          </div>
+          <ul class="plan__feats">
+            <li v-for="feat in plan.features" :key="feat.text">
+              <Icon name="check" :size="13" style="color:var(--accent-text);flex:none" />
+              {{ feat.text }}
+            </li>
+          </ul>
 
-          <!-- Modules -->
-          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
-            <div class="text-center mb-6">
-              <h3 class="text-xl font-bold text-neutral-100 mb-2">Modules</h3>
-              <div class="flex items-baseline justify-center gap-1">
-                <span class="text-4xl font-bold text-neutral-200">$9.99</span>
-                <span class="text-neutral-500">+</span>
-              </div>
-              <p class="text-sm text-neutral-500 mt-1">Optional feature expansions.</p>
-            </div>
-            <ul class="space-y-3 mb-8">
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Analytics & insights
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Discord bot integration
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Cloud backups
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                More on the roadmap
-              </li>
-            </ul>
-            <RouterLink to="/site/roadmap" class="block w-full py-3 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 text-center font-semibold rounded-lg border border-neutral-700 transition-colors">
-              View Roadmap
-            </RouterLink>
-          </div>
+          <RouterLink
+            class="btn"
+            :class="plan.ctaVariant === 'primary' ? 'btn--primary' : 'btn--ghost'"
+            :to="{ name: 'early-access' }"
+          >
+            {{ plan.cta }}
+          </RouterLink>
         </div>
       </div>
-    </section>
-  </div>
+
+      <!-- Fleet Block -->
+      <div class="fleetblock reveal">
+        <b>Fleet Block</b>
+        <span class="p">+$49.99/mo</span>
+        <span>each additional 50 servers — stack as many as your network needs.</span>
+      </div>
+
+      <!-- Commercial use definition -->
+      <p class="commercial reveal">
+        <b>Commercial use</b> includes monetized communities, paid access, VIP slots, donations,
+        sponsorship-supported servers, hosting providers, or managing servers for others.
+      </p>
+
+      <!-- Support model -->
+      <p class="support-note reveal">
+        Community support is included with every plan — documentation, community forum,
+        diagnostics, and structured bug reports.
+        <b>Direct 1:1 support</b> is available separately at $125/hour in prepaid 1-hour blocks.
+        Corrosion is a tool, not a managed service.
+      </p>
+    </div>
+  </section>
+
+  <!-- COMPARISON TABLE -->
+  <section class="sec" id="compare">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Feature breakdown</span>
+        <h2 class="title">What is included in each tier</h2>
+      </div>
+
+      <div class="compare-table reveal">
+        <div class="compare-table__head">
+          <div class="compare-table__label">Feature</div>
+          <div>Hobby</div>
+          <div>Community</div>
+          <div class="compare-table__featured">Operator</div>
+          <div>Network</div>
+        </div>
+
+        <div class="compare-table__row">
+          <div class="compare-table__label">Server instances</div>
+          <div>1–5</div>
+          <div>6–10</div>
+          <div class="compare-table__featured">Up to 50</div>
+          <div>50 + Fleet Blocks</div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">Commercial use</div>
+          <div><Icon name="x" :size="14" style="color:var(--status-offline)" /></div>
+          <div><Icon name="x" :size="14" style="color:var(--status-offline)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">Rust (Oxide/uMod)</div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">All supported games</div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">Auto-wiper + rollback</div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">Real-time console</div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">RBAC team access</div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">Public server page</div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">Priority bug triage</div>
+          <div><Icon name="x" :size="14" style="color:var(--status-offline)" /></div>
+          <div><Icon name="x" :size="14" style="color:var(--status-offline)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- SUPPORT MODEL -->
+  <section class="sec" id="support">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Support model</span>
+        <h2 class="title">Corrosion is a tool,<br>not a managed service</h2>
+        <p class="lead">
+          Every plan includes self-service support. Hands-on time is available separately — at
+          an honest rate, when you actually need it.
+        </p>
+      </div>
+
+      <div class="infra reveal">
+        <div class="icard">
+          <div class="icard__ic"><Icon name="file-text" :size="16" /></div>
+          <b>Documentation</b>
+          <p>Setup guides, architecture reference, troubleshooting walkthroughs. Included on every plan.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="message-square" :size="16" /></div>
+          <b>Community forum</b>
+          <p>Operator-to-operator knowledge base. Questions, configs, and war stories. All plans.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="activity" :size="16" /></div>
+          <b>Diagnostics</b>
+          <p>Built-in agent health checks, log access, and structured bug reports. All plans.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="zap" :size="16" /></div>
+          <b>Priority bug triage</b>
+          <p>Platform bugs for Operator and Network customers go to the front of the queue.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="clock" :size="16" /></div>
+          <b>Direct 1:1 support</b>
+          <p>$125/hour, prepaid in 1-hour blocks. Available to any customer who needs it.</p>
+        </div>
+      </div>
+
+      <p class="closing reveal" style="font-size:var(--text-md);color:var(--text-tertiary);font-weight:500">
+        Direct server administration, firewall configuration, mod installation, and wipe-day
+        hand-holding are not included in any plan. Corrosion gives you the panel and the tools.
+        You run the operation.
+      </p>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section class="finalcta">
+    <div class="finalcta__atmo" />
+    <div class="wrap finalcta__in reveal">
+      <h2>Ready to stop babysitting<br>your servers?</h2>
+      <div class="cta-row">
+        <RouterLink class="btn btn--primary btn--lg" :to="{ name: 'early-access' }">
+          Join early access
+        </RouterLink>
+        <a class="btn btn--ghost btn--lg" :href="panelUrl + '/login'">
+          <Icon name="play" :size="17" />View live demo
+        </a>
+      </div>
+    </div>
+  </section>
 </template>
+
+<style scoped>
+.plan__feats {
+  list-style: none;
+  padding: 0;
+  margin: 16px 0 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+.plan__feats li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+.plan__feats li svg { margin-top: 1px; }
+
+/* Comparison table */
+.compare-table {
+  max-width: 1040px;
+  margin: 0 auto;
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  box-shadow: var(--ring-default);
+}
+.compare-table__head,
+.compare-table__row {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1.2fr 1fr;
+  align-items: center;
+}
+.compare-table__head {
+  background: var(--surface-raised-2);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-caps);
+  color: var(--text-muted);
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.compare-table__head > div,
+.compare-table__row > div {
+  padding: 2px 8px;
+  text-align: center;
+}
+.compare-table__head > div:first-child,
+.compare-table__row > div:first-child {
+  text-align: left;
+  padding-left: 0;
+}
+.compare-table__row {
+  background: var(--surface-base);
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  padding: 11px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.compare-table__row:last-child { border-bottom: none; }
+.compare-table__label { color: var(--text-secondary); font-weight: 500; }
+.compare-table__featured {
+  background: var(--accent-soft);
+  color: var(--accent-text) !important;
+  font-weight: 600;
+}
+</style>
diff --git a/frontend/src/views/marketing/RoadmapView.vue b/frontend/src/views/marketing/RoadmapView.vue
index 475d506..33c2aad 100644
--- a/frontend/src/views/marketing/RoadmapView.vue
+++ b/frontend/src/views/marketing/RoadmapView.vue
@@ -1,146 +1,353 @@
 <script setup lang="ts">
-import { Check, Circle } from 'lucide-vue-next'
+import { onMounted, onUnmounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import Icon from '@/components/ds/core/Icon.vue'
+import CorrosionMark from '@/components/brand/CorrosionMark.vue'
 
-interface Phase {
-  name: string
-  label: string
-  status: 'complete' | 'current' | 'upcoming'
-  items: { text: string; done: boolean }[]
+const panelUrl = import.meta.env.VITE_PANEL_URL ?? ''
+
+type Status = 'shipped' | 'in-progress' | 'planned'
+
+interface RoadmapItem {
+  text: string
+  note?: string
 }
 
-const phases: Phase[] = [
+interface RoadmapGroup {
+  status: Status
+  label: string
+  description: string
+  items: RoadmapItem[]
+}
+
+const groups: RoadmapGroup[] = [
   {
-    name: 'Phase 1',
-    label: 'Foundation',
-    status: 'complete',
+    status: 'shipped',
+    label: 'Phase 1 — Foundation',
+    description:
+      'The core control plane is live. Rust server operators can install the agent, connect their server, and manage it entirely from the panel.',
     items: [
-      { text: 'Core control plane', done: true },
-      { text: 'Auto-Wiper with rollback', done: true },
-      { text: 'Plugin management', done: true },
-      { text: 'Public server site', done: true },
+      { text: 'Host agent (Windows + Linux)', note: 'Go binary, outbound NATS, zero inbound ports' },
+      { text: 'Core control plane', note: 'NestJS API, multi-tenant PostgreSQL, JWT RBAC' },
+      { text: 'Auto-wiper with rollback', note: 'Map, BP, and full wipes as verified sequences' },
+      { text: 'Plugin management', note: 'Rust uMod/Oxide — browse, install, configure from the browser' },
+      { text: 'Real-time console', note: 'NATS-bridged live output' },
+      { text: 'File manager', note: 'Browser-based file access via the agent' },
+      { text: 'Scheduled tasks and maintenance windows' },
+      { text: 'Player management and RBAC team access' },
+      { text: 'Public server page', note: 'Live status, wipe countdown, player count' },
+      { text: 'SteamCMD game update automation' },
+      { text: 'Discord and notification webhooks' },
     ],
   },
   {
-    name: 'Phase 2',
-    label: 'Analytics',
-    status: 'current',
+    status: 'in-progress',
+    label: 'Multi-game expansion',
+    description:
+      'The agent and control plane are being extended with per-game blueprints. Rust is the reference implementation; Dune, Conan, and Soulmask follow the same agent model with game-specific operational logic.',
     items: [
-      { text: 'Player retention tracking', done: false },
-      { text: 'Wipe performance insights', done: false },
-      { text: 'Population heatmaps', done: false },
+      { text: 'Dune: Awakening blueprint', note: 'Deep Desert wipe scheduling, battlegroup lifecycle' },
+      { text: 'Conan Exiles blueprint', note: 'Persistent world management, mod support, purge tracking' },
+      { text: 'Soulmask blueprint', note: 'Linked-world cluster deployment, port automation' },
+      { text: 'Multi-instance host runtime', note: 'One agent managing N game processes on the same machine' },
+      { text: 'Per-game wipe and event scheduling' },
     ],
   },
   {
-    name: 'Phase 3',
-    label: 'Status Platform',
-    status: 'upcoming',
+    status: 'planned',
+    label: 'API access and integrations',
+    description:
+      'Operator-grade API access so you can build your own tooling on top of the Corrosion control plane.',
     items: [
-      { text: 'Public uptime tracking', done: false },
-      { text: 'Server health dashboard', done: false },
+      { text: 'Public REST API for server management' },
+      { text: 'Webhook events (wipe completed, server down, player banned)' },
+      { text: 'API key management per license' },
     ],
   },
   {
-    name: 'Phase 4',
-    label: 'Module Marketplace',
-    status: 'upcoming',
+    status: 'planned',
+    label: 'Integrated storefront',
+    description:
+      'A native store layer for server communities — item catalog, VIP packages, and automated in-game delivery. No Tebex dependency required.',
     items: [
-      { text: 'Loot manager', done: false },
-      { text: 'Event systems', done: false },
-      { text: 'Advanced gameplay modules', done: false },
+      { text: 'Item catalog and categories' },
+      { text: 'PayPal and Stripe payment processing' },
+      { text: 'Automated in-game delivery via RCON/agent' },
+      { text: 'Transaction history and revenue dashboard' },
     ],
   },
   {
-    name: 'Phase 5',
-    label: 'Integrated Webstore',
-    status: 'upcoming',
+    status: 'planned',
+    label: 'Fleet management for hosting partners',
+    description:
+      'Tools for hosting providers and multi-server operations running 50+ instances across multiple physical hosts.',
     items: [
-      { text: 'Native item store', done: false },
-      { text: 'Automated delivery', done: false },
-      { text: 'Revenue dashboard', done: false },
+      { text: 'Fleet-level dashboards and health monitoring' },
+      { text: 'Multi-host agent orchestration' },
+      { text: 'Bulk wipe and update scheduling across a fleet' },
+      { text: 'Fleet Block capacity management' },
     ],
   },
   {
-    name: 'Phase 6',
-    label: 'B2B Hosting Integration',
-    status: 'upcoming',
+    status: 'planned',
+    label: 'More games',
+    description:
+      'Corrosion\'s agent model is not Rust-specific. The platform is being designed to support any game that can be managed via process control, file operations, and RCON-style commands.',
     items: [
-      { text: 'White-label panel', done: false },
-      { text: 'Bulk license provisioning', done: false },
-      { text: 'SSO integration', done: false },
+      { text: 'Additional survival and sandbox games' },
+      { text: 'Community-requested game blueprints' },
     ],
   },
 ]
 
-function phaseStatusClass(status: string): string {
-  switch (status) {
-    case 'complete': return 'bg-green-500/10 text-green-400 border-green-500/20'
-    case 'current': return 'bg-oxide-500/10 text-oxide-400 border-oxide-500/20'
-    default: return 'bg-neutral-800 text-neutral-500 border-neutral-700'
-  }
+function statusLabel(s: Status): string {
+  if (s === 'shipped') return 'Shipped'
+  if (s === 'in-progress') return 'In progress'
+  return 'Planned'
 }
 
-function phaseStatusLabel(status: string): string {
-  switch (status) {
-    case 'complete': return 'Shipped'
-    case 'current': return 'In Progress'
-    default: return 'Planned'
-  }
+function statusIcon(s: Status): string {
+  if (s === 'shipped') return 'check'
+  if (s === 'in-progress') return 'refresh-cw'
+  return 'circle'
 }
+
+// Scroll-reveal
+let io: IntersectionObserver | null = null
+
+function initReveal(): void {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+  io = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((e) => {
+        if (e.isIntersecting) {
+          e.target.classList.add('in')
+          io?.unobserve(e.target)
+        }
+      })
+    },
+    { threshold: 0.1 },
+  )
+  document.querySelectorAll('.reveal').forEach((el) => io?.observe(el))
+}
+
+onMounted(() => { initReveal() })
+onUnmounted(() => { io?.disconnect() })
 </script>
 
 <template>
-  <div>
-    <!-- Header -->
-    <section class="pt-20 pb-12">
-      <div class="max-w-4xl mx-auto px-6 text-center">
-        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4">Roadmap</h1>
-        <p class="text-lg text-neutral-400">
-          Corrosion isn't a single plugin release. It's infrastructure for the Rust ecosystem.
-        </p>
+  <!-- PAGE HEADER -->
+  <section class="hero" style="padding-bottom:0; border-bottom:none;">
+    <div class="hero__atmo" />
+    <div class="hero__grid" />
+    <div class="hero__grain" />
+    <div class="wrap hero__in" style="padding-bottom:52px;">
+      <div class="hero__mark">
+        <CorrosionMark :size="56" />
       </div>
-    </section>
+      <span class="eyebrow">Roadmap</span>
+      <h1 style="font-size:var(--text-5xl)">
+        Where Corrosion
+        <span class="accent">is going.</span>
+      </h1>
+      <p class="hero__sub">
+        No specific dates. No fabricated percentages. Status labels only: Shipped, In progress,
+        Planned. This roadmap reflects what is actually being built.
+      </p>
+    </div>
+  </section>
 
-    <!-- Timeline -->
-    <section class="pb-20">
-      <div class="max-w-3xl mx-auto px-6">
-        <div class="space-y-6">
-          <div
-            v-for="phase in phases"
-            :key="phase.name"
-            class="bg-neutral-900 border rounded-xl p-8 transition-colors"
-            :class="phase.status === 'current' ? 'border-oxide-500/30' : 'border-neutral-800'"
-          >
-            <div class="flex items-center justify-between mb-5">
-              <div>
-                <span class="text-xs font-bold text-neutral-500 uppercase tracking-wider">{{ phase.name }}</span>
-                <h3 class="text-xl font-bold text-neutral-100">{{ phase.label }}</h3>
-              </div>
-              <span
-                class="text-xs font-semibold px-3 py-1 rounded-full border"
-                :class="phaseStatusClass(phase.status)"
-              >
-                {{ phaseStatusLabel(phase.status) }}
-              </span>
-            </div>
-            <ul class="space-y-3">
-              <li
-                v-for="item in phase.items"
-                :key="item.text"
-                class="flex items-center gap-3"
-              >
-                <Check v-if="item.done" class="w-4 h-4 text-green-400 shrink-0" />
-                <Circle v-else class="w-4 h-4 text-neutral-600 shrink-0" />
-                <span
-                  class="text-sm"
-                  :class="item.done ? 'text-neutral-300' : 'text-neutral-500'"
-                >
-                  {{ item.text }}
-                </span>
-              </li>
-            </ul>
-          </div>
+  <!-- STATUS LEGEND -->
+  <section class="sec" style="padding:32px 0; border-bottom: 1px solid var(--border-subtle);">
+    <div class="wrap">
+      <div class="rm-legend reveal">
+        <div class="rm-badge rm-badge--shipped">
+          <Icon name="check" :size="13" />Shipped
+        </div>
+        <div class="rm-badge rm-badge--progress">
+          <Icon name="refresh-cw" :size="13" />In progress
+        </div>
+        <div class="rm-badge rm-badge--planned">
+          <Icon name="circle" :size="13" />Planned
         </div>
       </div>
-    </section>
-  </div>
+    </div>
+  </section>
+
+  <!-- ROADMAP GROUPS -->
+  <section class="sec" id="roadmap">
+    <div class="wrap">
+      <div
+        v-for="group in groups"
+        :key="group.label"
+        class="rm-group reveal"
+        :data-status="group.status"
+      >
+        <div class="rm-group__head">
+          <div
+            class="rm-group__badge"
+            :class="`rm-badge--${group.status}`"
+          >
+            <Icon :name="statusIcon(group.status)" :size="13" />
+            {{ statusLabel(group.status) }}
+          </div>
+          <h3 class="rm-group__title">{{ group.label }}</h3>
+        </div>
+        <p class="rm-group__desc">{{ group.description }}</p>
+        <ul class="rm-group__list">
+          <li
+            v-for="item in group.items"
+            :key="item.text"
+            class="rm-item"
+          >
+            <span class="rm-item__dot" :class="`rm-item__dot--${group.status}`" />
+            <span>
+              {{ item.text }}
+              <span v-if="item.note" class="rm-item__note">— {{ item.note }}</span>
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+
+  <!-- HONEST NOTE -->
+  <section class="sec" style="padding:40px 0; border-bottom:none;">
+    <div class="wrap">
+      <div class="closing reveal">
+        This roadmap reflects real development priorities, not marketing promises.
+        Timelines are not published because they depend on real-world testing and operator
+        feedback. <span class="accent">Join early access to influence what gets built next.</span>
+      </div>
+      <div class="hero__cta reveal" style="margin-top:28px">
+        <RouterLink class="btn btn--primary btn--lg" :to="{ name: 'early-access' }">
+          Join early access
+        </RouterLink>
+        <a class="btn btn--ghost btn--lg" :href="panelUrl + '/login'">
+          <Icon name="play" :size="17" />View live demo
+        </a>
+      </div>
+    </div>
+  </section>
 </template>
+
+<style scoped>
+/* Legend */
+.rm-legend {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+/* Badges */
+.rm-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 10px;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+}
+.rm-badge--shipped {
+  background: color-mix(in srgb, var(--status-online) 14%, transparent);
+  color: var(--status-online);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-online) 28%, transparent);
+}
+.rm-badge--in-progress, .rm-badge--progress {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.rm-badge--planned {
+  background: var(--surface-raised-2);
+  color: var(--text-muted);
+  box-shadow: var(--ring-default);
+}
+
+/* Groups */
+.rm-group {
+  max-width: 860px;
+  margin: 0 auto 40px;
+  padding: 28px 28px 24px;
+  background: var(--surface-base);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--ring-default);
+}
+.rm-group[data-status="in-progress"] {
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.rm-group[data-status="shipped"] {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-online) 22%, transparent);
+}
+.rm-group__head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+.rm-group__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 10px;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  flex: none;
+}
+.rm-group__title {
+  font-family: var(--font-brand);
+  font-weight: 700;
+  font-size: var(--text-xl);
+  margin: 0;
+}
+.rm-group__desc {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  line-height: 1.6;
+  margin: 0 0 18px;
+  max-width: 680px;
+}
+.rm-group__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.rm-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+.rm-item__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex: none;
+  margin-top: 5px;
+}
+.rm-item__dot--shipped { background: var(--status-online); }
+.rm-item__dot--in-progress { background: var(--accent); }
+.rm-item__dot--planned {
+  background: transparent;
+  box-shadow: inset 0 0 0 1.5px var(--text-muted);
+}
+.rm-item__note {
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+}
+</style>