feat(api): early-access signup endpoint (POST /api/early-access)

Real @Public() NestJS endpoint persisting to the existing early_access_signups table (email + server_count), matching the schema exactly (no migration). Duplicate-email safe (pre-check + unique-constraint catch -> friendly success). Wired into app.module. Makes the marketing early-access form functional end-to-end on next API deploy. tsc/nest build green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

backend-nest/src/app.module.ts

@@ -44,6 +44,7 @@ import { FurnaceSplitterModule } from './modules/furnacesplitter/furnacesplitter
 import { BetterChatModule } from './modules/betterchat/betterchat.module';
 import { TimedExecuteModule } from './modules/timedexecute/timedexecute.module';
 import { RaidableBasesModule } from './modules/raidablebases/raidablebases.module';
+import { EarlyAccessModule } from './modules/early-access/early-access.module';
 
 // Shared Services
 import { NatsService } from './services/nats.service';
@@ -123,6 +124,7 @@ import { NatsBridgeGateway } from './gateways/nats-bridge.gateway';
     BetterChatModule,
     TimedExecuteModule,
     RaidableBasesModule,
+    EarlyAccessModule,
   ],
   providers: [
     // Global guards (order matters: auth first, then license, then permissions)

backend-nest/src/modules/early-access/dto/create-early-access.dto.ts

@@ -0,0 +1,14 @@
+import { IsEmail, IsOptional, IsString, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class CreateEarlyAccessDto {
+  @ApiProperty({ example: 'admin@example.com' })
+  @IsEmail()
+  email: string;
+
+  @ApiPropertyOptional({ example: 'rust', description: 'Primary game interest or server count' })
+  @IsOptional()
+  @IsString()
+  @MaxLength(10)
+  server_count?: string;
+}

backend-nest/src/modules/early-access/early-access.controller.ts

@@ -0,0 +1,19 @@
+import { Body, Controller, HttpCode, HttpStatus, Post } from '@nestjs/common';
+import { ApiOperation, ApiTags } from '@nestjs/swagger';
+import { Public } from '../../common/decorators/public.decorator';
+import { EarlyAccessService } from './early-access.service';
+import { CreateEarlyAccessDto } from './dto/create-early-access.dto';
+
+@ApiTags('early-access')
+@Controller()
+export class EarlyAccessController {
+  constructor(private readonly earlyAccessService: EarlyAccessService) {}
+
+  @Public()
+  @Post('early-access')
+  @HttpCode(HttpStatus.OK)
+  @ApiOperation({ summary: 'Register for early access' })
+  async register(@Body() dto: CreateEarlyAccessDto) {
+    return this.earlyAccessService.register(dto);
+  }
+}

backend-nest/src/modules/early-access/early-access.module.ts

@@ -0,0 +1,12 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { EarlyAccessSignup } from '../../entities/early-access-signup.entity';
+import { EarlyAccessController } from './early-access.controller';
+import { EarlyAccessService } from './early-access.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([EarlyAccessSignup])],
+  controllers: [EarlyAccessController],
+  providers: [EarlyAccessService],
+})
+export class EarlyAccessModule {}

backend-nest/src/modules/early-access/early-access.service.ts

@@ -0,0 +1,42 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { EarlyAccessSignup } from '../../entities/early-access-signup.entity';
+import { CreateEarlyAccessDto } from './dto/create-early-access.dto';
+
+@Injectable()
+export class EarlyAccessService {
+  private readonly logger = new Logger(EarlyAccessService.name);
+
+  constructor(
+    @InjectRepository(EarlyAccessSignup)
+    private readonly repo: Repository<EarlyAccessSignup>,
+  ) {}
+
+  async register(dto: CreateEarlyAccessDto): Promise<{ success: true; alreadyRegistered: boolean }> {
+    const existing = await this.repo.findOne({ where: { email: dto.email } });
+    if (existing) {
+      // Duplicate email — return friendly success rather than a 409 that would break the UX
+      return { success: true, alreadyRegistered: true };
+    }
+
+    const signup = this.repo.create({
+      email: dto.email,
+      server_count: dto.server_count ?? 'not specified',
+    });
+
+    try {
+      await this.repo.save(signup);
+    } catch (err: unknown) {
+      // Guard against a race-condition duplicate (unique constraint violation)
+      const pg = err as { code?: string };
+      if (pg.code === '23505') {
+        return { success: true, alreadyRegistered: true };
+      }
+      this.logger.error('Failed to save early-access signup', err);
+      throw err;
+    }
+
+    return { success: true, alreadyRegistered: false };
+  }
+}

frontend/src/components/ds/core/Icon.vue

@@ -23,6 +23,9 @@ import {
   Ban, Flag,
   CircleAlert, ArrowDown, Award, DollarSign, FlaskConical, Mail, Package,
   Pencil, Save, ShoppingBag, Target, User,
+  // Marketing site additions
+  Route, Timer, Megaphone, DatabaseBackup, Store, Undo2,
+  Circle, Send, HelpCircle,
 } from 'lucide-vue-next'
 
 const props = withDefaults(
@@ -58,6 +61,10 @@ const registry: Record<string, Component> = {
   'dollar-sign': DollarSign, 'flask-conical': FlaskConical, mail: Mail,
   package: Package, pencil: Pencil, save: Save, 'shopping-bag': ShoppingBag,
   target: Target, user: User,
+  // 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)

frontend/src/components/ds/data/PlayersChart.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
 /**
  * PlayersChart — themed ECharts area chart of players online.
- * Reads the live design tokens (--accent etc.) from CSS so it matches the
- * active theme/game, and re-renders when data-game / data-theme flip on <html>.
+ *
+ * Requires real `data` — there is NO fallback series. When `data` is absent
+ * or empty, an "awaiting telemetry" placeholder is shown instead of the chart.
+ * This is intentional: fabricated curves mislead operators.
+ *
+ * Reads live design tokens (--accent etc.) from CSS so it matches the active
+ * theme/game, and re-renders when data-game / data-theme flip on <html>.
  */
-import { onMounted, onBeforeUnmount, useTemplateRef } from 'vue'
+import { computed, onMounted, onBeforeUnmount, useTemplateRef } from 'vue'
 import * as echarts from 'echarts'
 
 const props = withDefaults(
@@ -12,29 +17,26 @@ const props = withDefaults(
   { height: 200, max: 200 },
 )
 
+const hasData = computed(() => Array.isArray(props.data) && props.data.length > 0)
+
 const el = useTemplateRef<HTMLDivElement>('el')
 let chart: echarts.ECharts | null = null
 let ro: ResizeObserver | null = null
 let mo: MutationObserver | null = null
 
-const DEFAULT_SERIES = [
-  60, 52, 44, 38, 33, 30, 34, 46, 62, 78, 92, 104,
-  118, 126, 131, 138, 142, 151, 168, 182, 176, 150, 112, 84,
-]
-
 function cssVar(name: string, node?: HTMLElement): string {
   return getComputedStyle(node || document.documentElement).getPropertyValue(name).trim()
 }
 
 function render(): void {
-  if (!chart || !el.value) return
+  if (!chart || !el.value || !hasData.value) return
   const node = el.value
   const accent = cssVar('--accent', node) || '#f26622'
   const grid = cssVar('--border-subtle', node) || 'rgba(255,255,255,0.06)'
   const text = cssVar('--text-tertiary', node) || '#767d89'
   const mono = 'JetBrains Mono, monospace'
   const hours = Array.from({ length: 24 }, (_, i) => `${String(i).padStart(2, '0')}:00`)
-  const series = props.data ?? DEFAULT_SERIES
+  const series = props.data as number[]
 
   chart.setOption({
     animationDuration: 700,
@@ -77,6 +79,7 @@ function render(): void {
 
 onMounted(() => {
   if (!el.value) return
+  if (!hasData.value) return // empty-state slot renders instead
   chart = echarts.init(el.value, undefined, { renderer: 'canvas' })
   render()
   ro = new ResizeObserver(() => chart?.resize())
@@ -94,5 +97,33 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="el" :style="{ width: '100%', height: height + 'px' }" />
+  <!-- Real data: render the ECharts canvas -->
+  <div v-if="hasData" ref="el" :style="{ width: '100%', height: height + 'px' }" />
+  <!-- No data: honest empty state — never show a fabricated curve -->
+  <div
+    v-else
+    class="pc-empty"
+    :style="{ height: height + 'px' }"
+  >
+    <svg class="pc-empty__icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+    </svg>
+    <span class="pc-empty__label">Awaiting telemetry</span>
+    <span class="pc-empty__sub">Player data will appear once the server connects and reports stats</span>
+  </div>
 </template>
+
+<style scoped>
+.pc-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  color: var(--text-muted);
+}
+.pc-empty__icon { margin-bottom: 4px; opacity: 0.5; }
+.pc-empty__label { font-size: var(--text-sm); font-weight: 500; color: var(--text-tertiary); }
+.pc-empty__sub { font-size: var(--text-xs); color: var(--text-muted); max-width: 280px; text-align: center; line-height: 1.5; }
+</style>

frontend/src/components/layout/MarketingLayout.vue

@@ -1,76 +1,80 @@
 <script setup lang="ts">
 import { RouterView, RouterLink } from 'vue-router'
+import CorrosionMark from '@/components/brand/CorrosionMark.vue'
+import '@/styles/marketing.css'
 
-const panelUrl = import.meta.env.VITE_PANEL_URL || ''
+const panelUrl = import.meta.env.VITE_PANEL_URL ?? ''
 </script>
 
 <template>
-  <div class="min-h-screen bg-neutral-950 flex flex-col">
-    <!-- Navigation -->
-    <nav class="border-b border-neutral-800 bg-neutral-950/80 backdrop-blur-sm sticky top-0 z-50">
-      <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-        <RouterLink :to="{ name: 'landing' }" class="flex items-center gap-3">
-          <img src="/logo.png" alt="Corrosion" class="h-8 w-8" />
-          <span class="text-lg font-bold text-neutral-100">Corrosion</span>
+  <div>
+    <!-- Nav -->
+    <nav class="mkt-nav">
+      <div class="wrap mkt-nav__in">
+        <RouterLink :to="{ name: 'landing' }" class="brand">
+          <span class="mark"><CorrosionMark :size="26" /></span>
+          <b>Corrosion</b>
         </RouterLink>
-        <div class="hidden md:flex items-center gap-6">
-          <RouterLink :to="{ name: 'how-it-works' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">How It Works</RouterLink>
-          <RouterLink :to="{ name: 'pricing' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">Pricing</RouterLink>
-          <RouterLink :to="{ name: 'roadmap' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">Roadmap</RouterLink>
-          <RouterLink :to="{ name: 'faq' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">FAQ</RouterLink>
+        <div class="mkt-nav__links">
+          <RouterLink :to="{ name: 'landing' }" class="scroll-link">Features</RouterLink>
+          <RouterLink :to="{ name: 'pricing' }">Pricing</RouterLink>
+          <RouterLink :to="{ name: 'how-it-works' }">How it works</RouterLink>
+          <RouterLink :to="{ name: 'faq' }">FAQ</RouterLink>
+          <RouterLink :to="{ name: 'roadmap' }">Roadmap</RouterLink>
         </div>
-        <div class="flex items-center gap-3">
-          <a :href="panelUrl + '/login'" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">Sign In</a>
-          <a :href="panelUrl + '/register'" class="px-4 py-2 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors">Get Started</a>
+        <div class="mkt-nav__cta">
+          <a class="mkt-nav__signin" :href="panelUrl + '/login'">Sign in</a>
+          <RouterLink class="btn btn--primary btn--sm" :to="{ name: 'early-access' }">
+            Early access
+          </RouterLink>
         </div>
       </div>
     </nav>
 
     <!-- Page content -->
-    <main class="flex-1">
     <RouterView />
-    </main>
 
     <!-- Footer -->
-    <footer class="border-t border-neutral-800 py-12">
-      <div class="max-w-6xl mx-auto px-6">
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
-          <div>
-            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Product</h4>
-            <div class="space-y-2">
-              <RouterLink :to="{ name: 'how-it-works' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">How It Works</RouterLink>
-              <RouterLink :to="{ name: 'pricing' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Pricing</RouterLink>
-              <RouterLink :to="{ name: 'roadmap' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Roadmap</RouterLink>
+    <footer class="mkt-footer">
+      <div class="wrap">
+        <div class="footer__cols">
+          <div class="footer__brand">
+            <RouterLink :to="{ name: 'landing' }" class="brand">
+              <span class="mark"><CorrosionMark :size="24" /></span>
+              <b>Corrosion</b>
+            </RouterLink>
+            <p>Game server operations for self-hosted communities.</p>
+          </div>
+          <div class="footer__col">
+            <h5>Product</h5>
+            <RouterLink :to="{ name: 'landing' }">Supported games</RouterLink>
+            <RouterLink :to="{ name: 'landing' }">Features</RouterLink>
+            <RouterLink :to="{ name: 'pricing' }">Pricing</RouterLink>
+            <RouterLink :to="{ name: 'roadmap' }">Roadmap</RouterLink>
+          </div>
+          <div class="footer__col">
+            <h5>Games</h5>
+            <RouterLink :to="{ name: 'landing' }">Rust</RouterLink>
+            <RouterLink :to="{ name: 'landing' }">Dune: Awakening</RouterLink>
+            <RouterLink :to="{ name: 'landing' }">Soulmask</RouterLink>
+            <RouterLink :to="{ name: 'landing' }">Conan Exiles</RouterLink>
+          </div>
+          <div class="footer__col">
+            <h5>Support</h5>
+            <RouterLink :to="{ name: 'faq' }">FAQ</RouterLink>
+            <a href="https://discord.gg/corrosion" target="_blank" rel="noopener">Discord</a>
+            <RouterLink to="/status">Status</RouterLink>
+          </div>
+          <div class="footer__col">
+            <h5>Company</h5>
+            <RouterLink :to="{ name: 'landing' }">About</RouterLink>
+            <RouterLink :to="{ name: 'roadmap' }">Changelog</RouterLink>
+            <a href="mailto:support@corrosionmgmt.com">Contact</a>
           </div>
         </div>
-          <div>
-            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Support</h4>
-            <div class="space-y-2">
-              <RouterLink :to="{ name: 'faq' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">FAQ</RouterLink>
-              <a href="https://discord.gg/corrosion" target="_blank" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Discord</a>
-            </div>
-          </div>
-          <div>
-            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Company</h4>
-            <div class="space-y-2">
-              <RouterLink :to="{ name: 'landing' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">About</RouterLink>
-              <RouterLink to="/status" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Status</RouterLink>
-            </div>
-          </div>
-          <div>
-            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Legal</h4>
-            <div class="space-y-2">
-              <span class="block text-sm text-neutral-600">Terms of Service</span>
-              <span class="block text-sm text-neutral-600">Privacy Policy</span>
-            </div>
-          </div>
-        </div>
-        <div class="border-t border-neutral-800 pt-6 flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <img src="/logo.png" alt="Corrosion" class="h-4 w-4 opacity-60" />
-            <span class="text-sm text-neutral-600">&copy; 2026 Corrosion. All rights reserved.</span>
-          </div>
-          <span class="text-xs text-neutral-700">The Control Plane for Rust Servers.</span>
+        <div class="footer__bar">
+          <span>&copy; 2026 Corrosion. All rights reserved.</span>
+          <span>One control plane. Every game.</span>
         </div>
       </div>
     </footer>

frontend/src/config/gameProfiles.ts

@@ -0,0 +1,191 @@
+/**
+ * gameProfiles.ts — Source of truth for per-game UI adaptation.
+ *
+ * Every game-specific label, terminology, Steam app ID, management model,
+ * and stat field list lives here. The dashboard, server cards, wipe manager,
+ * and any future multi-game surface should key off this registry — never
+ * hard-code game-specific strings in components.
+ *
+ * Backend status: the backend has NO game field on licenses yet. Today every
+ * license is implicitly Rust. This registry is ready: when the backend adds a
+ * `game` column to `licenses` (or `server_config`), the frontend only needs to
+ * read that field and call `useGameProfile(id)` — no component changes required.
+ *
+ * To add a new game: add a GameId union member and a corresponding entry in
+ * GAME_PROFILES. Nothing else changes.
+ */
+
+// ---------------------------------------------------------------------------
+// Union types — exhaustive, never widen to string
+// ---------------------------------------------------------------------------
+
+/** Every supported game identifier. */
+export type GameId = 'rust' | 'conan' | 'soulmask' | 'dune'
+
+/** How the server process is managed. */
+export type ManagementModel = 'process+rcon' | 'docker-compose'
+
+/** Mod ecosystem the game uses. */
+export type ModSystem = 'umod' | 'workshop' | 'none'
+
+/** Primary console / remote-admin interface. */
+export type ConsoleType = 'rcon' | 'rcon+ingame' | 'rcon+gm' | 'rabbitmq'
+
+/**
+ * How a "reset" is performed — each value maps to a distinct wipe code path.
+ * Pipe-delimited strings intentionally encode composite operations.
+ */
+export type ResetModel =
+  | 'map-bp-wipe'
+  | 'wipe-world-structures+decay'
+  | 'worlddb-delete+decay'
+  | 'deep-desert-coriolis-seed'
+
+/** Cross-server or character-sharing mechanism. */
+export type ClusteringModel = 'none' | 'character-transfer' | 'main-client' | 'battlegroup'
+
+// ---------------------------------------------------------------------------
+// GameProfile shape
+// ---------------------------------------------------------------------------
+
+export interface GameTerminology {
+  /** What the operator calls a reset / wipe. */
+  reset: string
+  /** What the operator calls plugins / mods (null if no mod system). */
+  mods: string | null
+  /** What the operator calls a player group / faction. */
+  group: string
+}
+
+export interface GamePorts {
+  game: number
+  query: number
+  rcon: number
+  cluster?: number
+}
+
+export interface GameProfile {
+  /** Human-readable game name. */
+  label: string
+  /** CSS design-token key — maps to data-game attr and --accent token. */
+  accent: string
+  managementModel: ManagementModel
+  steamAppId: number | { windows: number; linux: number }
+  /** Default ports (game-specific defaults; operator can override). */
+  ports?: GamePorts
+  mods: ModSystem
+  console: ConsoleType
+  resetModel: ResetModel
+  clustering: ClusteringModel
+  /** Available map names, if the game ships with named maps. */
+  maps?: string[]
+  terminology: GameTerminology
+  /** Notable game-specific mechanics that affect server administration. */
+  special?: string[]
+  /**
+   * Stat field labels shown on server cards and the dashboard.
+   * First entry is always Players; subsequent entries are game-specific.
+   */
+  statFields: [string, string, string]
+}
+
+// ---------------------------------------------------------------------------
+// Registry
+// ---------------------------------------------------------------------------
+
+export const GAME_PROFILES: Record<GameId, GameProfile> = {
+  rust: {
+    label: 'Rust',
+    accent: 'rust',
+    managementModel: 'process+rcon',
+    steamAppId: 258550,
+    mods: 'umod',
+    console: 'rcon',
+    resetModel: 'map-bp-wipe',
+    clustering: 'none',
+    terminology: {
+      reset: 'Wipe',
+      mods: 'Plugins',
+      group: 'Team',
+    },
+    statFields: ['Players', 'uMod', 'Wipe'],
+  },
+
+  conan: {
+    label: 'Conan Exiles',
+    accent: 'conan',
+    managementModel: 'process+rcon',
+    steamAppId: 443030,
+    ports: { game: 7777, query: 27015, rcon: 25575 },
+    mods: 'workshop',
+    console: 'rcon+ingame',
+    // Player progress persists across world wipes — only structures are cleared.
+    resetModel: 'wipe-world-structures+decay',
+    clustering: 'character-transfer',
+    maps: ['Exiled Lands', 'Isle of Siptah'],
+    terminology: {
+      reset: 'Wipe World',
+      mods: 'Mods',
+      group: 'Clan',
+    },
+    special: ['Clans', 'Thralls', 'Avatars', 'Purge', 'PvP windows'],
+    statFields: ['Players', 'Clans', 'Purge'],
+  },
+
+  soulmask: {
+    label: 'Soulmask',
+    accent: 'soulmask',
+    managementModel: 'process+rcon',
+    // Different Steam app IDs per OS (uncommon — store this explicitly).
+    steamAppId: { windows: 3017310, linux: 3017300 },
+    ports: { game: 8777, query: 27015, rcon: 19000, cluster: 20000 },
+    mods: 'workshop',
+    console: 'rcon+gm',
+    resetModel: 'worlddb-delete+decay',
+    clustering: 'main-client',
+    maps: ['Cloud Mist Forest', 'Shifting Sands'],
+    terminology: {
+      reset: 'World Reset',
+      mods: 'Workshop Mods',
+      group: 'Tribe',
+    },
+    special: ['Cluster', 'Tribes'],
+    statFields: ['Players', 'Tribe', 'Mask'],
+  },
+
+  dune: {
+    label: 'Dune: Awakening',
+    accent: 'dune',
+    managementModel: 'docker-compose',
+    steamAppId: 4754530,
+    mods: 'none',
+    // Dune uses RabbitMQ for its admin messaging — not a standard RCON port.
+    console: 'rabbitmq',
+    resetModel: 'deep-desert-coriolis-seed',
+    clustering: 'battlegroup',
+    terminology: {
+      reset: 'Deep Desert reset',
+      mods: null,
+      group: 'Guild',
+    },
+    special: ['Sietches', 'Deep Desert', 'Bases', 'Landsraad'],
+    statFields: ['Players', 'Sietches', 'Control'],
+  },
+} as const
+
+// ---------------------------------------------------------------------------
+// Helper
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns the GameProfile for the given id, falling back to Rust if the id is
+ * unknown (forward-compatibility: unknown games show Rust defaults until their
+ * profile is added).
+ *
+ * @example
+ * const profile = useGameProfile('rust')
+ * console.log(profile.terminology.reset) // 'Wipe'
+ */
+export function useGameProfile(id: string): GameProfile {
+  return (GAME_PROFILES as Record<string, GameProfile>)[id] ?? GAME_PROFILES.rust
+}

frontend/src/styles/marketing.css

@@ -0,0 +1,846 @@
+/* ============================================================
+   Corrosion — Marketing site styles
+   Consumes the design-system tokens already loaded globally
+   via frontend/src/style.css (tokens/fonts → colors → etc.).
+   Class names match the design kit exactly.
+   ============================================================ */
+
+.wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; }
+section { position: relative; }
+
+.eyebrow {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+  color: var(--accent-text);
+}
+
+h2.title {
+  font-family: var(--font-brand);
+  font-weight: 700;
+  font-size: var(--text-4xl);
+  letter-spacing: 0.01em;
+  text-align: center;
+  margin: 0;
+  line-height: 1.08;
+}
+
+.lead {
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: var(--text-lg);
+  margin: 16px auto 0;
+  max-width: 660px;
+  line-height: 1.5;
+}
+
+.accent { color: var(--accent-text); }
+
+.mark { display: inline-block; color: var(--accent); }
+.mark svg { width: 100%; height: 100%; display: block; }
+
+/* ---- Buttons ---- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 46px;
+  padding: 0 22px;
+  border-radius: var(--radius-md);
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: var(--text-base);
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-standard);
+  text-decoration: none;
+  white-space: nowrap;
+}
+.btn:active { transform: translateY(1px); }
+
+.btn--primary {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+.btn--primary:hover { background: var(--accent-hover); }
+
+.btn--ghost {
+  background: var(--surface-raised-2);
+  color: var(--text-primary);
+  box-shadow: var(--ring-default);
+}
+.btn--ghost:hover { background: var(--surface-active); }
+
+.btn--sm  { height: 36px; padding: 0 14px; font-size: var(--text-sm); }
+.btn--lg  { height: 52px; padding: 0 28px; font-size: var(--text-md); }
+
+/* ---- Nav ---- */
+.mkt-nav {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  height: var(--topbar-h);
+  display: flex;
+  align-items: center;
+  background: color-mix(in srgb, var(--surface-canvas) 84%, transparent);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.mkt-nav__in { display: flex; align-items: center; gap: 24px; width: 100%; }
+.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
+.brand .mark { width: 26px; height: 26px; }
+.brand b {
+  font-family: var(--font-brand);
+  font-weight: 800;
+  font-size: 18px;
+  letter-spacing: 0.01em;
+  color: var(--text-primary);
+}
+.mkt-nav__links { display: flex; gap: 24px; margin-left: 14px; }
+.mkt-nav__links a {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  transition: color var(--dur-fast);
+  text-decoration: none;
+}
+.mkt-nav__links a:hover { color: var(--text-primary); }
+.mkt-nav__cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
+.mkt-nav__signin {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  text-decoration: none;
+  transition: color var(--dur-fast);
+}
+.mkt-nav__signin:hover { color: var(--text-primary); }
+
+/* ---- Hero ---- */
+.hero { overflow: hidden; border-bottom: 1px solid var(--border-subtle); }
+.hero__atmo {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  transition: background var(--dur-slower) var(--ease-standard);
+  background:
+    radial-gradient(120% 80% at 50% -10%, var(--atmo-haze), transparent 55%),
+    radial-gradient(70% 50% at 85% 110%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
+    linear-gradient(180deg, var(--atmo-1), var(--surface-canvas) 72%);
+}
+.hero__grain {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  opacity: .5;
+  mix-blend-mode: overlay;
+  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
+  background-size: 3px 3px;
+}
+.hero__grid {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  opacity: .32;
+  -webkit-mask-image: radial-gradient(75% 60% at 50% 24%, #000, transparent 78%);
+  mask-image: radial-gradient(75% 60% at 50% 24%, #000, transparent 78%);
+  background-image:
+    linear-gradient(var(--border-subtle) 1px, transparent 1px),
+    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
+  background-size: 46px 46px;
+}
+.hero__in {
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  padding: 74px 0 88px;
+}
+.hero__mark {
+  width: 72px;
+  height: 72px;
+  margin: 0 auto 22px;
+  color: var(--accent);
+  filter: drop-shadow(0 0 26px var(--accent-glow));
+  transition: color var(--dur-slow);
+}
+.hero h1 {
+  font-family: var(--font-brand);
+  font-weight: 800;
+  font-size: var(--text-6xl);
+  line-height: 1.04;
+  letter-spacing: 0.005em;
+  margin: 0;
+}
+.hero h1 .accent { display: block; }
+.hero__sub {
+  color: var(--text-secondary);
+  font-size: var(--text-lg);
+  margin: 22px auto 0;
+  max-width: 640px;
+  line-height: 1.55;
+}
+.hero__cta {
+  display: flex;
+  gap: 14px;
+  justify-content: center;
+  margin-top: 30px;
+}
+.hero__games {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 34px;
+  flex-wrap: wrap;
+}
+.gpill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 38px;
+  padding: 0 16px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-raised);
+  box-shadow: var(--ring-default);
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: var(--transition-colors);
+}
+.gpill[data-on="true"] {
+  color: var(--accent-text);
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.hero__foot {
+  margin-top: 16px;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  letter-spacing: .04em;
+  color: var(--text-muted);
+}
+.notpill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 18px;
+  height: 28px;
+  padding: 0 13px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-raised);
+  box-shadow: var(--ring-default);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+}
+.notpill b { color: var(--accent-text); }
+
+/* ---- Panel mockup ---- */
+.mock {
+  position: relative;
+  z-index: 1;
+  max-width: 1000px;
+  margin: 54px auto 0;
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  background: var(--surface-base);
+  box-shadow: 0 50px 130px -34px rgba(0,0,0,.85), var(--ring-default);
+}
+.mock__bar {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 0 14px;
+  background: var(--surface-raised);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.mock__dots { display: flex; gap: 7px; }
+.mock__dots span {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--surface-active);
+  display: inline-block;
+}
+.mock__url {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-tertiary);
+  background: var(--surface-inset);
+  padding: 5px 12px;
+  border-radius: var(--radius-pill);
+}
+.mock__body {
+  display: grid;
+  grid-template-columns: 188px 1fr;
+  min-height: 316px;
+  text-align: left;
+}
+.mock__side {
+  border-right: 1px solid var(--border-subtle);
+  padding: 14px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+.mock__brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+  padding: 0 4px;
+}
+.mock__brand .mark { width: 18px; height: 18px; }
+.mock__brand b {
+  font-family: var(--font-brand);
+  font-weight: 800;
+  font-size: 13px;
+}
+.mock__gs {
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  background: var(--surface-inset);
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  margin-bottom: 8px;
+}
+.mock__gs span {
+  flex: 1;
+  height: 24px;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+.mock__gs .on {
+  background: var(--surface-raised-2);
+  box-shadow: var(--ring-default);
+  color: var(--accent);
+}
+.mock__nav {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  height: 28px;
+  padding: 0 9px;
+  border-radius: var(--radius-sm);
+  color: var(--text-tertiary);
+  font-size: 12px;
+}
+.mock__nav.on { background: var(--accent-soft); color: var(--accent-text); }
+.mock__main { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+.mock__kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
+.mock__kpi {
+  background: var(--surface-raised);
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  padding: 10px 12px;
+}
+.mock__kpi .l { font-size: 10px; color: var(--text-tertiary); }
+.mock__kpi .v {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 19px;
+  color: var(--text-primary);
+  margin-top: 3px;
+}
+.mock__kpi .v small { color: var(--text-muted); font-size: 12px; }
+.mock__row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--surface-raised);
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  padding: 9px 12px;
+  position: relative;
+  overflow: hidden;
+}
+.mock__row::before {
+  content: '';
+  position: absolute;
+  left: 0; top: 0; bottom: 0;
+  width: 3px;
+  background: var(--accent);
+}
+.mock__row .g {
+  width: 22px;
+  height: 22px;
+  flex: none;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+.mock__row .nm { flex: 1; font-size: 12px; font-weight: 600; }
+.mock__row .nm small {
+  display: block;
+  font-family: var(--font-mono);
+  font-weight: 400;
+  font-size: 10px;
+  color: var(--text-muted);
+}
+.mock__row .st {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--status-online);
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.mock__row .st b {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--status-online);
+  display: inline-block;
+}
+
+/* ---- Section spacing ---- */
+.sec { padding: 88px 0; border-bottom: 1px solid var(--border-subtle); }
+.sec__head { text-align: center; margin-bottom: 48px; }
+.sec__head .eyebrow { display: block; margin-bottom: 12px; }
+
+/* ---- Problem cards ---- */
+.pain {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  gap: 12px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+.pain__item {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 16px;
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default);
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+}
+.pain__x {
+  width: 24px;
+  height: 24px;
+  flex: none;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--status-offline-soft);
+  color: var(--status-offline);
+}
+.closing {
+  text-align: center;
+  margin: 40px auto 0;
+  max-width: 720px;
+  font-size: var(--text-xl);
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+/* ---- Steps ---- */
+.steps {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  gap: 16px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+.step {
+  padding: 28px 24px;
+  text-align: center;
+  background: var(--surface-base);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--ring-default);
+}
+.step__n {
+  width: 38px;
+  height: 38px;
+  margin: 0 auto 16px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: var(--text-lg);
+  color: var(--accent-text);
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.step b { font-size: var(--text-md); font-weight: 600; }
+.step p { color: var(--text-tertiary); font-size: var(--text-sm); margin: 8px 0 0; }
+.nots {
+  display: flex;
+  gap: 26px;
+  justify-content: center;
+  margin-top: 34px;
+  flex-wrap: wrap;
+}
+.nots span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-tertiary);
+  font-size: var(--text-sm);
+  font-family: var(--font-mono);
+}
+
+/* ---- Blueprints (game cards) ---- */
+.blueprints {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+.bp {
+  position: relative;
+  overflow: hidden;
+  padding: 24px;
+  border-radius: var(--radius-xl);
+  background:
+    radial-gradient(120% 90% at 100% 0%, var(--atmo-haze), transparent 55%),
+    linear-gradient(160deg, color-mix(in srgb, var(--atmo-1) 80%, transparent), var(--surface-base) 70%);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.bp__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
+.bp__ic {
+  width: 40px;
+  height: 40px;
+  flex: none;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.bp__name { font-family: var(--font-brand); font-weight: 700; font-size: var(--text-xl); }
+.bp__accent {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--accent-text);
+  text-transform: uppercase;
+  letter-spacing: .08em;
+}
+.bp__role { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); margin: 10px 0 14px; }
+.bp__list { display: flex; flex-direction: column; gap: 8px; }
+.bp__list div { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); color: var(--text-secondary); }
+
+/* ---- Capabilities (3 col) ---- */
+.caps {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  gap: 30px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+.caps__col > .eyebrow { display: block; margin-bottom: 8px; }
+.feat { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border-subtle); }
+.feat:first-of-type { border-top: 0; }
+.feat__ic {
+  width: 32px;
+  height: 32px;
+  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);
+}
+.feat b { font-size: var(--text-sm); font-weight: 600; }
+
+/* ---- Pipeline ---- */
+.pipe {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  flex-wrap: wrap;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+.pchip {
+  height: 38px;
+  padding: 0 15px;
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--radius-md);
+  background: var(--surface-raised-2);
+  box-shadow: var(--ring-default);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+.pchip--last {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.stack-lines { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 32px; }
+.stack-lines span { color: var(--text-tertiary); font-size: var(--text-md); }
+.stack-lines .hi { color: var(--accent-text); font-weight: 600; }
+
+/* ---- Infra ---- */
+.infra {
+  display: grid;
+  grid-template-columns: repeat(5,1fr);
+  gap: 12px;
+  max-width: 1040px;
+  margin: 0 auto;
+}
+.icard {
+  padding: 20px 16px;
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default);
+}
+.icard__ic {
+  width: 32px;
+  height: 32px;
+  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);
+  margin-bottom: 12px;
+}
+.icard b { font-size: var(--text-sm); font-weight: 600; display: block; }
+.icard p { margin: 5px 0 0; color: var(--text-tertiary); font-size: var(--text-xs); line-height: 1.5; }
+.techrow {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 30px;
+  flex-wrap: wrap;
+}
+.techrow span {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  padding: 6px 12px;
+  border-radius: var(--radius-pill);
+  box-shadow: var(--ring-default);
+}
+
+/* ---- Store ---- */
+.chips {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 880px;
+  margin: 0 auto;
+}
+.chip-card {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 14px 18px;
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default);
+  font-weight: 600;
+  font-size: var(--text-sm);
+}
+.chip-card--accent {
+  color: var(--accent-text);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+  background: var(--accent-soft);
+}
+
+/* ---- Pricing ---- */
+.pricing {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  gap: 14px;
+  max-width: 1040px;
+  margin: 0 auto;
+  align-items: stretch;
+}
+.plan {
+  display: flex;
+  flex-direction: column;
+  padding: 24px 22px;
+  background: var(--surface-base);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--ring-default);
+}
+.plan--feature {
+  box-shadow: inset 0 0 0 1px var(--accent-border), var(--glow-accent-sm);
+  background: linear-gradient(180deg, var(--accent-soft), var(--surface-base) 40%);
+}
+.plan__tag {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: var(--accent-text);
+  margin-bottom: 10px;
+  height: 14px;
+}
+.plan__name { font-family: var(--font-brand); font-weight: 700; font-size: var(--text-xl); }
+.plan__price {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: var(--text-3xl);
+  margin: 12px 0 2px;
+  letter-spacing: -0.02em;
+}
+.plan__price small { font-size: var(--text-sm); color: var(--text-muted); font-weight: 400; }
+.plan__scope { font-size: var(--text-sm); color: var(--text-tertiary); min-height: 40px; }
+.plan .btn { margin-top: 18px; width: 100%; justify-content: center; }
+
+.fleetblock {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  max-width: 1040px;
+  margin: 14px auto 0;
+  padding: 16px 22px;
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default);
+  flex-wrap: wrap;
+}
+.fleetblock b { font-family: var(--font-brand); font-weight: 700; }
+.fleetblock .p { font-family: var(--font-mono); color: var(--accent-text); font-weight: 600; }
+.fleetblock span { color: var(--text-tertiary); font-size: var(--text-sm); }
+
+.commercial {
+  max-width: 760px;
+  margin: 26px auto 0;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+  line-height: 1.6;
+}
+.commercial b { color: var(--text-secondary); }
+
+/* ---- Support block (below pricing) ---- */
+.support-note {
+  max-width: 760px;
+  margin: 20px auto 0;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+  line-height: 1.6;
+}
+.support-note b { color: var(--text-secondary); }
+
+/* ---- Admins ---- */
+.admins {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+  align-items: center;
+  max-width: 560px;
+  margin: 0 auto;
+}
+.admins span {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  font-size: var(--text-lg);
+  color: var(--text-secondary);
+}
+
+/* ---- Final CTA ---- */
+.finalcta {
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+  padding: 104px 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.finalcta__atmo {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: radial-gradient(60% 100% at 50% 100%, var(--atmo-haze), transparent 60%);
+}
+.finalcta__in { position: relative; z-index: 1; }
+.finalcta h2 {
+  font-family: var(--font-brand);
+  font-weight: 800;
+  font-size: var(--text-5xl);
+  margin: 0 0 28px;
+  line-height: 1.05;
+}
+.finalcta .cta-row { display: flex; gap: 14px; justify-content: center; }
+
+/* ---- Footer ---- */
+.mkt-footer { padding: 56px 0 40px; }
+.footer__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 24px; }
+.footer__brand .mark { width: 24px; height: 24px; }
+.footer__brand p {
+  color: var(--text-tertiary);
+  font-size: var(--text-sm);
+  margin: 12px 0 0;
+  max-width: 230px;
+}
+.footer__col h5 {
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wider);
+  color: var(--text-muted);
+  margin: 0 0 14px;
+  font-family: var(--font-mono);
+}
+.footer__col a {
+  display: block;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  margin-bottom: 9px;
+  text-decoration: none;
+  transition: color var(--dur-fast);
+}
+.footer__col a:hover { color: var(--text-primary); }
+.footer__bar {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 44px;
+  padding-top: 22px;
+  border-top: 1px solid var(--border-subtle);
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+}
+
+/* ---- Scroll reveal ---- */
+@media (prefers-reduced-motion: no-preference) {
+  .reveal {
+    opacity: 0;
+    transform: translateY(14px);
+    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
+  }
+  .reveal.in { opacity: 1; transform: none; }
+}
+
+/* ---- Responsive ---- */
+@media (max-width: 980px) {
+  .pain { grid-template-columns: 1fr 1fr; }
+  .steps, .caps, .blueprints, .pricing { grid-template-columns: 1fr; }
+  .infra { grid-template-columns: 1fr 1fr; }
+  .footer__cols { grid-template-columns: 1fr 1fr; }
+  .mock__body { grid-template-columns: 1fr; }
+  .mock__side { display: none; }
+  .hero h1 { font-size: var(--text-5xl); }
+  .mkt-nav__links { display: none; }
+}

frontend/src/views/admin/DashboardView.vue

@@ -1,136 +1,92 @@
 <script setup lang="ts">
 /**
- * DashboardView — Fleet / Solo dashboard.
- * Fleet:  multi-game server cockpit (representative mock data — pending multi-instance backend).
- * Solo:   single-server detail wired to the real useServerStore where data exists.
+ * DashboardView — Single-server cockpit wired entirely to real data.
  *
- * View toggle (Fleet / Solo) lives inside the page so the shell (DashboardLayout) stays clean.
- * Routing stays at path '/', no new routes added.
+ * Architecture:
+ *   - useServerStore  → connection + config + live stats (WebSocket updateStats)
+ *   - useApi          → /analytics/timeseries for 24h player history (PlayersChart)
+ *   - useGameProfile  → per-game labels/terminology (defaults to 'rust' today)
+ *   - useWebSocket    → subscribes to console_output and server_stats events
+ *
+ * Empty states:
+ *   - No connection record  → "No server connected" EmptyState with CTA to /server
+ *   - Connection exists but stats absent → meters show '—', chart shows awaiting telemetry
+ *   - No upcoming wipe schedules → honest empty state in the wipes panel
+ *
+ * No fabricated data anywhere in this file.
+ * The fleet/multi-server view has been removed — the current backend is
+ * single-server-per-license. When the backend supports multiple servers per
+ * license, restore a fleet tab wired to real data.
  */
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useServerStore } from '@/stores/server'
-import { useThemeGame } from '@/composables/useThemeGame'
+import { useWipeStore } from '@/stores/wipe'
+import { useApi } from '@/composables/useApi'
+import { useWebSocket, type WebSocketMessage } from '@/composables/useWebSocket'
+import { useGameProfile } from '@/config/gameProfiles'
 import Panel from '@/components/ds/data/Panel.vue'
 import StatCard from '@/components/ds/data/StatCard.vue'
-import ServerCard from '@/components/ds/data/ServerCard.vue'
-import ConsoleLine from '@/components/ds/data/ConsoleLine.vue'
+import ConsoleLineDS from '@/components/ds/data/ConsoleLine.vue'
 import ResourceMeter from '@/components/ds/data/ResourceMeter.vue'
 import PlayersChart from '@/components/ds/data/PlayersChart.vue'
 import Badge from '@/components/ds/core/Badge.vue'
 import Button from '@/components/ds/core/Button.vue'
-import Icon from '@/components/ds/core/Icon.vue'
-import Tabs from '@/components/ds/navigation/Tabs.vue'
 import Input from '@/components/ds/forms/Input.vue'
-import Switch from '@/components/ds/forms/Switch.vue'
-import {
-  MOCK_SERVERS, MOCK_FEED, MOCK_WIPES, buildStats,
-  type MockServer, type GameKey,
-} from './_dashboardMock'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import type { TimeseriesData, WipeSchedule } from '@/types'
+import { safeDate } from '@/utils/formatters'
 
-// ---- Stores / composables ----
+// ---------------------------------------------------------------------------
+// Stores / composables
+// ---------------------------------------------------------------------------
 const server = useServerStore()
+const wipeStore = useWipeStore()
 const router = useRouter()
-const { activeGame } = useThemeGame()
+const api = useApi()
 
-// ---- View toggle ----
-const VIEW_KEY = 'cc-dash-view'
-const view = ref<'fleet' | 'solo'>((localStorage.getItem(VIEW_KEY) as 'fleet' | 'solo') ?? 'fleet')
-function setView(v: string) {
-  view.value = v as 'fleet' | 'solo'
-  localStorage.setItem(VIEW_KEY, v)
-}
+// Today every license is Rust. When the backend adds a `game` field to the
+// license or server_config, pass it here: useGameProfile(server.config?.game ?? 'rust')
+const profile = computed(() => useGameProfile('rust'))
 
-const viewItems = [
-  { value: 'fleet', label: 'Fleet', icon: 'layout-grid' },
-  { value: 'solo', label: 'Solo', icon: 'square-dashed' },
-]
+// ---------------------------------------------------------------------------
+// Derived server state — all real, no fallbacks to fabricated values
+// ---------------------------------------------------------------------------
 
-// ---- Fleet: filter servers by activeGame ----
-const serverStatus = ref<'all' | 'online' | 'offline'>('all')
-const statusItems = computed(() => [
-  { value: 'all', label: 'All', count: inGame.value.length },
-  { value: 'online', label: 'Running', count: inGame.value.filter((s) => s.status !== 'offline').length },
-  { value: 'offline', label: 'Stopped', count: inGame.value.filter((s) => s.status === 'offline').length },
-])
+const hasConnection = computed(() => server.connection !== null)
+const isConnected = computed(() => server.connection?.connection_status === 'connected')
 
-const GAME_LABEL: Record<string, string> = { rust: 'Rust', dune: 'Dune', conan: 'Conan Exiles', soulmask: 'Soulmask' }
+const soloName = computed(() => server.config?.server_name ?? null)
 
-const inGame = computed<MockServer[]>(() =>
-  activeGame.value === 'all'
-    ? MOCK_SERVERS
-    : MOCK_SERVERS.filter((s) => s.game === (activeGame.value as GameKey)),
-)
+const soloPlayers = computed(() => server.stats?.player_count ?? null)
+const soloMaxPlayers = computed(() => server.stats?.max_players ?? server.config?.max_players ?? null)
+const soloFps = computed(() => server.stats?.fps ?? null)
 
-const shownServers = computed<MockServer[]>(() => {
-  const sv = serverStatus.value
-  return inGame.value.filter((s) => {
-    if (sv === 'all') return true
-    if (sv === 'online') return s.status !== 'offline'
-    return s.status === 'offline'
+// Memory: store gives memory_usage_mb; max must come from agent telemetry.
+// We do NOT hard-code a "representative" max — show raw MB and no percentage
+// until the agent reports a known max.
+const soloRamMb = computed(() => server.stats?.memory_usage_mb ?? null)
+const soloRamPct = computed(() => {
+  // ServerStats has no ram_max field — we cannot compute a real percentage.
+  // Return null; ResourceMeter and StatCard will show '—'.
+  return null
 })
+const soloRamSub = computed(() => {
+  const mb = soloRamMb.value
+  if (mb === null) return null
+  return `${(mb / 1024).toFixed(1)} GB used`
 })
 
-// ---- Fleet KPIs ----
-const runningCount = computed(() => inGame.value.filter((s) => s.status !== 'offline').length)
-const playersCur = computed(() => inGame.value.reduce((a, s) => a + (s.players?.cur ?? 0), 0))
-const playersMax = computed(() => inGame.value.reduce((a, s) => a + (s.players?.max ?? 0), 0))
-const cpuValues = computed(() => inGame.value.filter((s) => s.cpu != null).map((s) => s.cpu as number))
-const avgCpu = computed<string>(() =>
-  cpuValues.value.length
-    ? String(Math.round(cpuValues.value.reduce((a, b) => a + b, 0) / cpuValues.value.length))
-    : '—',
-)
+// CPU: not in ServerStats today. Show null — never fabricate.
+const soloCpu = computed(() => null as number | null)
 
-const scopeLabel = computed(() =>
-  activeGame.value === 'all'
-    ? 'Fleet overview'
-    : `${GAME_LABEL[activeGame.value as string] ?? activeGame.value} fleet`,
-)
-
-const fleetTitle = computed(() => {
-  if (activeGame.value === 'all') {
-    const games = new Set(MOCK_SERVERS.map((s) => s.game)).size
-    return `${MOCK_SERVERS.length} servers · ${games} games`
-  }
-  const n = inGame.value.length
-  const label = GAME_LABEL[activeGame.value as string] ?? activeGame.value
-  return `${n} ${label} server${n === 1 ? '' : 's'}`
-})
-
-const chartSubtitle = computed(() =>
-  activeGame.value === 'all'
-    ? 'All servers · last 24 hours'
-    : `${GAME_LABEL[activeGame.value as string] ?? activeGame.value} servers · last 24 hours`,
-)
-
-// ---- Chart period toggle ----
-const chartPeriod = ref('24h')
-const periodItems = [
-  { value: '24h', label: '24h' },
-  { value: '7d', label: '7d' },
-  { value: '30d', label: '30d' },
-]
-
-// ---- Solo: real store data + representative fallbacks ----
-const soloName = computed(() => server.config?.server_name ?? 'Main · 2x Vanilla')
-const soloPlayers = computed(() => server.stats?.player_count ?? 0)
-const soloMaxPlayers = computed(() => server.stats?.max_players ?? server.config?.max_players ?? 200)
-const soloFps = computed(() => server.stats?.fps ?? 59.8)
-// Memory: store gives memory_usage_mb (no max), use 8192 MB representative max for %
-const soloRamMb = computed(() => server.stats?.memory_usage_mb ?? 0)
-const soloRamPct = computed(() => soloRamMb.value > 0 ? Math.round((soloRamMb.value / 8192) * 100) : 68)
-const soloRamSub = computed(() => soloRamMb.value > 0 ? `${(soloRamMb.value / 1024).toFixed(1)} / 8 GB` : '5.4 / 8 GB')
-// CPU: not in ServerStats; use representative value
-const soloCpuPct = 41
-// Status badge derived from connection_status
-const soloStatus = computed<'online' | 'offline' | 'starting' | 'wiping'>(() => {
+const soloStatus = computed<'online' | 'offline' | 'starting'>(() => {
   const cs = server.connection?.connection_status
   if (cs === 'connected') return 'online'
   if (cs === 'degraded') return 'starting'
   return 'offline'
 })
-const soloStatusTone = computed<'online' | 'offline' | 'starting' | 'warn'>(() => {
+const soloStatusTone = computed<'online' | 'offline' | 'warn'>(() => {
   if (soloStatus.value === 'online') return 'online'
   if (soloStatus.value === 'starting') return 'warn'
   return 'offline'
@@ -140,217 +96,282 @@ const soloStatusLabel = computed(() => {
   if (soloStatus.value === 'starting') return 'Degraded'
   return 'Offline'
 })
-const soloRegion = computed(() => {
-  const ip = server.connection?.server_ip
-  return ip ? 'Bare metal' : 'US-East'
-})
+
 const soloIp = computed(() => {
   const ip = server.connection?.server_ip
   const port = server.connection?.game_port ?? server.connection?.server_port
   if (ip && port) return `${ip}:${port}`
-  return '89.142.0.7:28015'
+  if (ip) return ip
+  return null
 })
+
 const soloUptime = computed(() => {
   const sec = server.stats?.uptime_seconds ?? 0
-  if (sec === 0) return '—'
+  if (sec === 0) return null
   const d = Math.floor(sec / 86400)
   const h = Math.floor((sec % 86400) / 3600)
-  return `${d}d ${h}h`
+  if (d > 0) return `${d}d ${h}h`
+  return `${h}h`
 })
 
-// Representative plugin list (uMod plugin state not in backend store)
-const pluginStates = ref([
-  { name: 'RaidableBases', ver: '2.7.4', on: true },
-  { name: 'Kits', ver: '4.3.1', on: true },
-  { name: 'CorrosionTeleportGUI', ver: '1.2.0', on: true },
-  { name: 'Economics', ver: '3.9.6', on: true },
-  { name: 'ZLevels Remastered', ver: '3.2.0', on: false },
-])
+// ---------------------------------------------------------------------------
+// Players chart — real 24h timeseries from /analytics/timeseries
+// ---------------------------------------------------------------------------
+const chartData = ref<number[] | null>(null)
+const chartLoading = ref(false)
 
+async function loadChartData() {
+  chartLoading.value = true
+  try {
+    const ts = await api.get<TimeseriesData>('/analytics/timeseries?range=24&granularity=hourly')
+    chartData.value = ts.player_count.length > 0 ? ts.player_count : null
+  } catch {
+    // API unavailable or no data yet — chart will show "awaiting telemetry"
+    chartData.value = null
+  } finally {
+    chartLoading.value = false
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Wipe schedules — real data from wipeStore
+// ---------------------------------------------------------------------------
+const nextWipe = computed<WipeSchedule | null>(() => {
+  const schedules = wipeStore.schedules.filter((s) => s.is_active && s.next_scheduled_run)
+  if (schedules.length === 0) return null
+  return schedules.slice().sort((a, b) => {
+    const at = a.next_scheduled_run ? new Date(a.next_scheduled_run).getTime() : Infinity
+    const bt = b.next_scheduled_run ? new Date(b.next_scheduled_run).getTime() : Infinity
+    return at - bt
+  })[0] ?? null
+})
+
+const nextWipeLabel = computed(() => {
+  const w = nextWipe.value
+  if (!w?.next_scheduled_run) return null
+  return safeDate(w.next_scheduled_run)
+})
+
+const nextWipeType = computed(() => {
+  const w = nextWipe.value
+  if (!w) return null
+  const t = w.wipe_type
+  if (t === 'full') return `Full ${profile.value.terminology.reset}`
+  if (t === 'blueprint') return 'Blueprint wipe'
+  return `Map ${profile.value.terminology.reset}`
+})
+
+// ---------------------------------------------------------------------------
+// Console lines — real WebSocket events only
+// ---------------------------------------------------------------------------
+interface ConsoleLine {
+  time: string
+  level: 'cmd' | 'chat' | 'info' | 'warn' | 'error' | 'connect' | 'kill'
+  who?: string
+  msg: string
+}
+
+const consoleLines = ref<ConsoleLine[]>([])
+const MAX_CONSOLE_LINES = 100
+
+function now(): string {
+  return new Date().toLocaleTimeString('en-US', { hour12: false })
+}
+
+function handleWsMessage(msg: WebSocketMessage) {
+  if (msg.type !== 'event') return
+
+  // Live server stats
+  if (msg.event === 'server_stats' && msg.data) {
+    server.updateStats(msg.data)
+    return
+  }
+
+  // Console output lines
+  if (msg.event === 'console_output') {
+    const text = msg.data?.line ?? msg.data?.output ?? msg.raw ?? ''
+    if (!text) return
+    consoleLines.value.push({
+      time: now(),
+      level: 'info',
+      msg: String(text),
+    })
+    if (consoleLines.value.length > MAX_CONSOLE_LINES) {
+      consoleLines.value.splice(0, consoleLines.value.length - MAX_CONSOLE_LINES)
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
 // Console input
+// ---------------------------------------------------------------------------
 const consoleInput = ref('')
 
 function sendConsoleCommand() {
-  if (!consoleInput.value.trim()) return
-  server.sendCommand(consoleInput.value.trim()).catch(() => {})
+  const cmd = consoleInput.value.trim()
+  if (!cmd) return
+  consoleLines.value.push({ time: now(), level: 'cmd', who: 'admin', msg: cmd })
+  server.sendCommand(cmd).catch(() => {})
   consoleInput.value = ''
 }
 
+// ---------------------------------------------------------------------------
+// Lifecycle
+// ---------------------------------------------------------------------------
+let unsubscribe: (() => void) | null = null
+
+onMounted(async () => {
+  await server.fetchServer()
+  await wipeStore.fetchSchedules()
+  await loadChartData()
+
+  const ws = useWebSocket()
+  unsubscribe = ws.subscribe(handleWsMessage)
+})
+
+onUnmounted(() => {
+  unsubscribe?.()
+})
+
 // Navigation helpers
 function navConsole() { router.push('/console') }
 function navWipes() { router.push('/wipes') }
-
-// ---- Lifecycle ----
-onMounted(() => {
-  server.fetchServer()
-})
+function navServer() { router.push('/server') }
 </script>
 
 <template>
   <div class="dash">
-    <!-- ===== FLEET VIEW ===== -->
-    <template v-if="view === 'fleet'">
-      <!-- Page head -->
+
+    <!-- ===== NO CONNECTION: honest empty state ===== -->
+    <template v-if="!server.isLoading && !hasConnection">
       <div class="page__head">
         <div>
-          <div class="t-eyebrow">{{ scopeLabel }}</div>
-          <h1 class="page__title">{{ fleetTitle }}</h1>
-        </div>
-        <div class="page__actions">
-          <Tabs v-model="view" :items="viewItems" @update:model-value="setView" />
-          <Button variant="secondary" size="sm" icon="download">Export</Button>
-          <Button size="sm" icon="rocket">Deploy server</Button>
+          <div class="t-eyebrow">Dashboard</div>
+          <h1 class="page__title">Server cockpit</h1>
         </div>
       </div>
-
-      <!-- KPIs -->
-      <div class="dash__kpis">
-        <StatCard icon="server" label="Servers running" :value="String(runningCount)" :unit="'/' + inGame.length" delta="+1" note="today" />
-        <StatCard icon="users" label="Players online" :value="String(playersCur)" :unit="'/' + playersMax" delta="+38" note="since wipe" />
-        <StatCard icon="cpu" :label="activeGame === 'all' ? 'Fleet CPU' : 'Avg CPU'" :value="avgCpu" :unit="avgCpu === '—' ? '' : '%'" note="reporting agents" />
-        <StatCard icon="server-cog" label="Agent nodes" value="2" unit="/2" note="all reporting" />
-      </div>
-
-      <!-- Main grid -->
-      <div class="dash__grid">
-        <!-- Left column -->
-        <div class="dash__col">
-          <!-- Players chart panel — themed ECharts -->
-          <Panel title="Players online" :subtitle="chartSubtitle">
-            <template #actions>
-              <Tabs v-model="chartPeriod" :items="periodItems" />
-            </template>
-            <PlayersChart :height="200" :max="200" />
-          </Panel>
-
-          <!-- Servers list -->
-          <Panel :flush-body="true" title="Servers">
-            <template #actions>
-              <Tabs v-model="serverStatus" :items="statusItems" />
-            </template>
-            <div class="server__list">
-              <ServerCard
-                v-for="(s, i) in shownServers"
-                :key="i"
-                :game="s.game"
-                :game-icon="s.gameIcon"
-                :name="s.name"
-                :region="s.region"
-                :map="s.map"
-                :version="s.version"
-                :status="s.status"
-                :players="s.players"
-                :cpu="s.cpu"
-                :ram="s.ram"
-                :ram-sub="s.ramSub"
-                :ip="s.ip"
-                :stats="buildStats(s)"
-              />
-              <div v-if="shownServers.length === 0" class="server__empty">
-                No servers match the current filter.
-              </div>
-            </div>
-          </Panel>
-        </div>
-
-        <!-- Right sidebar column -->
-        <div class="dash__col dash__col--side">
-          <!-- Live activity -->
-          <Panel :flush-body="true" title="Live activity">
-            <template #actions>
-              <Badge tone="online" :dot="true" :pulse="true">Live</Badge>
-            </template>
-            <div class="feed">
-              <ConsoleLine
-                v-for="(f, i) in MOCK_FEED"
-                :key="i"
-                :time="f.time"
-                :level="f.level"
-                :who="f.who"
-              >{{ f.msg }}</ConsoleLine>
-            </div>
-          </Panel>
-
-          <!-- Upcoming wipes -->
-          <Panel title="Upcoming wipes">
-            <div class="wipes">
-              <div
-                v-for="(w, i) in MOCK_WIPES"
-                :key="i"
-                class="wipe"
-                :data-game="w.game"
+      <Panel>
+        <EmptyState
+          icon="server"
+          title="No server connected"
+          description="Install the companion agent on your host machine to begin managing your server from Corrosion."
         >
-                <div class="wipe__dot" />
-                <div class="wipe__body">
-                  <div class="wipe__name">{{ w.name }}</div>
-                  <div class="wipe__when">{{ w.when }}</div>
-                </div>
-                <Badge :tone="w.tone" size="md">{{ w.label }}</Badge>
-              </div>
-            </div>
+          <template #action>
+            <Button icon="server" @click="navServer">Set up server</Button>
+          </template>
+        </EmptyState>
       </Panel>
-        </div>
-      </div>
     </template>
 
-    <!-- ===== SOLO VIEW ===== -->
-    <template v-else>
+    <!-- ===== SERVER COCKPIT ===== -->
+    <template v-else-if="hasConnection">
+
       <!-- Page head -->
       <div class="page__head">
         <div class="solo-id">
           <div class="solo-id__chip">
-            <Icon name="box" :size="21" :stroke-width="2" />
+            <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/>
+              <line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>
+            </svg>
           </div>
           <div>
             <div class="solo-id__name">
-              {{ soloName }}
+              {{ soloName ?? 'Server' }}
               <Badge :tone="soloStatusTone" :dot="true" :pulse="soloStatus === 'online'">{{ soloStatusLabel }}</Badge>
             </div>
             <div class="solo-id__meta">
-              {{ soloRegion }} · {{ soloIp }}
-              <span v-if="soloUptime !== '—'"> · up {{ soloUptime }}</span>
+              <template v-if="soloIp">{{ soloIp }}</template>
+              <template v-else>No IP registered</template>
+              <template v-if="soloUptime"> · up {{ soloUptime }}</template>
             </div>
           </div>
         </div>
         <div class="page__actions">
-          <Tabs v-model="view" :items="viewItems" @update:model-value="setView" />
           <Button variant="secondary" size="sm" icon="refresh-cw" @click="server.restartServer()">Restart</Button>
           <Button variant="danger-soft" size="sm" icon="power" @click="server.stopServer()">Stop</Button>
           <Button size="sm" icon="terminal" @click="navConsole">Console</Button>
         </div>
       </div>
 
-      <!-- KPIs -->
+      <!-- KPIs — game profile drives stat labels; null values show '—' -->
       <div class="dash__kpis">
-        <StatCard icon="users" label="Players online" :value="String(soloPlayers)" :unit="'/' + soloMaxPlayers" delta="+12" note="since wipe" />
-        <StatCard icon="cpu" label="CPU" :value="String(soloCpuPct)" unit="%" delta="3%" delta-dir="down" note="agent · representative" />
-        <StatCard icon="memory-stick" label="Memory" :value="String(soloRamPct)" unit="%" :note="soloRamSub" />
-        <StatCard icon="gauge" label="Server FPS" :value="String(soloFps)" delta-dir="flat" note="stable" />
+        <StatCard
+          icon="users"
+          :label="profile.statFields[0] + ' online'"
+          :value="soloPlayers !== null ? String(soloPlayers) : '—'"
+          :unit="soloMaxPlayers !== null ? '/' + soloMaxPlayers : ''"
+          note="live via agent"
+        />
+        <StatCard
+          icon="cpu"
+          label="CPU"
+          :value="soloCpu !== null ? String(soloCpu) : '—'"
+          :unit="soloCpu !== null ? '%' : ''"
+          note="agent telemetry"
+        />
+        <StatCard
+          icon="memory-stick"
+          label="Memory"
+          :value="soloRamMb !== null ? (soloRamMb / 1024).toFixed(1) : '—'"
+          :unit="soloRamMb !== null ? 'GB' : ''"
+          :note="soloRamSub ?? 'agent telemetry'"
+        />
+        <StatCard
+          icon="gauge"
+          label="Server FPS"
+          :value="soloFps !== null ? String(soloFps) : '—'"
+          :unit="soloFps !== null ? 'fps' : ''"
+          note="live via agent"
+        />
       </div>
 
-      <!-- Solo grid -->
+      <!-- Main grid -->
       <div class="dash__grid">
+
         <!-- Left column -->
         <div class="dash__col">
-          <!-- Players chart — themed ECharts -->
-          <Panel title="Players online" :subtitle="soloName + ' · last 24 hours'">
-            <PlayersChart :height="196" :max="soloMaxPlayers" />
+
+          <!-- Players chart — real 24h data or honest empty state -->
+          <Panel
+            title="Players online"
+            :subtitle="(soloName ?? 'Server') + ' · last 24 hours'"
+          >
+            <div v-if="chartLoading" class="chart-loading">Loading telemetry…</div>
+            <PlayersChart
+              v-else
+              :height="196"
+              :max="soloMaxPlayers ?? 200"
+              :data="chartData ?? undefined"
+            />
           </Panel>
 
-          <!-- Console panel -->
+          <!-- Console — real WebSocket lines only -->
           <Panel :flush-body="true" title="Console">
             <template #actions>
-              <Badge tone="online" :dot="true" :pulse="soloStatus === 'online'">Live</Badge>
+              <Badge
+                :tone="isConnected ? 'online' : 'offline'"
+                :dot="true"
+                :pulse="isConnected"
+              >{{ isConnected ? 'Live' : 'Disconnected' }}</Badge>
             </template>
+
             <div class="feed feed--solo">
-              <ConsoleLine
-                v-for="(f, i) in MOCK_FEED"
+              <template v-if="consoleLines.length > 0">
+                <ConsoleLineDS
+                  v-for="(line, i) in consoleLines"
                   :key="i"
-                :time="f.time"
-                :level="f.level"
-                :who="f.who"
-              >{{ f.msg }}</ConsoleLine>
+                  :time="line.time"
+                  :level="line.level"
+                  :who="line.who"
+                >{{ line.msg }}</ConsoleLineDS>
+              </template>
+              <div v-else class="feed__empty">
+                <span v-if="isConnected">Waiting for output — try sending a command below</span>
+                <span v-else>Console offline — server is not connected</span>
               </div>
+            </div>
+
             <div class="console-bar">
               <span class="console-bar__prompt">&gt;</span>
               <Input
@@ -358,58 +379,88 @@ onMounted(() => {
                 :mono="true"
                 size="sm"
                 placeholder="say, kick, ban, oxide.reload …"
+                :disabled="!isConnected"
                 style="flex: 1"
                 @keydown.enter="sendConsoleCommand"
               />
-              <Button size="sm" variant="secondary" icon="corner-down-left" @click="sendConsoleCommand">Send</Button>
+              <Button
+                size="sm"
+                variant="secondary"
+                icon="corner-down-left"
+                :disabled="!isConnected"
+                @click="sendConsoleCommand"
+              >Send</Button>
             </div>
           </Panel>
+
         </div>
 
         <!-- Right sidebar -->
         <div class="dash__col dash__col--side">
-          <!-- Resources -->
+
+          <!-- Resources — real stats from agent; null = '—' -->
           <Panel title="Resources" subtitle="Companion agent telemetry">
             <div class="solo-meters">
-              <ResourceMeter label="CPU" :value="soloCpuPct" sub="representative" />
-              <ResourceMeter label="Memory" :value="soloRamPct" :sub="soloRamSub" />
-              <ResourceMeter label="Disk" :value="64" sub="representative" />
+              <ResourceMeter
+                label="CPU"
+                :value="soloCpu ?? 0"
+                :sub="soloCpu !== null ? soloCpu + '%' : 'awaiting telemetry'"
+              />
+              <ResourceMeter
+                label="Memory"
+                :value="soloRamPct ?? 0"
+                :sub="soloRamSub ?? 'awaiting telemetry'"
+              />
+            </div>
+            <div v-if="soloCpu === null && soloRamMb === null" class="meters-note">
+              Resource metrics arrive via the companion agent heartbeat.
+              <Button size="sm" variant="ghost" icon="server" class="meters-cta" @click="navServer">
+                Agent setup
+              </Button>
             </div>
           </Panel>
 
-          <!-- Plugins -->
-          <Panel :flush-body="true" title="Plugins" subtitle="uMod / Oxide">
-            <template #actions>
-              <Button size="sm" variant="ghost" icon="plus" @click="router.push('/plugins')">Add</Button>
-            </template>
-            <div class="plugs">
-              <div
-                v-for="(p, i) in pluginStates"
-                :key="i"
-                class="plug"
-              >
-                <div class="plug__id">
-                  <span class="plug__name">{{ p.name }}</span>
-                  <span class="plug__ver">{{ p.ver }}</span>
-                </div>
-                <Switch v-model="p.on" size="sm" />
-              </div>
-            </div>
-          </Panel>
-
-          <!-- Next wipe -->
+          <!-- Next wipe — real schedule from wipeStore -->
           <Panel title="Next wipe">
-            <div class="solo-wipe">
+            <div v-if="nextWipe" class="solo-wipe">
               <div>
-                <div class="solo-wipe__when">Thu · 18:00 UTC</div>
-                <div class="solo-wipe__sub">representative — configure in wipe manager</div>
+                <div class="solo-wipe__type">{{ nextWipeType }}</div>
+                <div class="solo-wipe__when">{{ nextWipeLabel }}</div>
+                <div class="solo-wipe__name">{{ nextWipe.schedule_name }}</div>
               </div>
               <Button size="sm" variant="outline" icon="calendar-clock" @click="navWipes">Edit</Button>
             </div>
+            <EmptyState
+              v-else
+              icon="calendar"
+              title="No wipe scheduled"
+              description="Configure automatic wipes in the wipe manager."
+            >
+              <template #action>
+                <Button size="sm" variant="outline" icon="calendar-clock" @click="navWipes">
+                  Open wipe manager
+                </Button>
+              </template>
+            </EmptyState>
           </Panel>
+
         </div>
       </div>
     </template>
+
+    <!-- Loading state -->
+    <template v-else>
+      <div class="page__head">
+        <div>
+          <div class="t-eyebrow">Dashboard</div>
+          <h1 class="page__title">Server cockpit</h1>
+        </div>
+      </div>
+      <Panel>
+        <div class="dash-loading">Loading server data…</div>
+      </Panel>
+    </template>
+
   </div>
 </template>
 
@@ -431,23 +482,6 @@ onMounted(() => {
 .dash__grid { display: grid; grid-template-columns: minmax(0, 1fr) 366px; gap: 16px; align-items: start; }
 .dash__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
 
-/* ---------- Servers list ---------- */
-.server__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
-.server__empty { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--text-muted); text-align: center; padding: 24px; }
-
-/* ---------- Live feed ---------- */
-.feed { padding: 8px 2px; max-height: 340px; overflow-y: auto; }
-.feed--solo { max-height: 230px; }
-
-/* ---------- Upcoming wipes ---------- */
-.wipes { display: flex; flex-direction: column; gap: 4px; }
-.wipe { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-radius: var(--radius-md); }
-.wipe:hover { background: var(--surface-hover); }
-.wipe__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 10px -1px var(--accent-glow); }
-.wipe__body { flex: 1; min-width: 0; }
-.wipe__name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.wipe__when { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
-
 /* ---------- Solo identity header ---------- */
 .solo-id { display: flex; align-items: center; gap: 13px; }
 .solo-id__chip {
@@ -463,6 +497,21 @@ onMounted(() => {
 }
 .solo-id__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 3px; }
 
+/* ---------- Chart loading ---------- */
+.chart-loading {
+  display: flex; align-items: center; justify-content: center;
+  height: 196px; font-size: var(--text-sm); color: var(--text-muted);
+}
+
+/* ---------- Console feed ---------- */
+.feed { padding: 8px 2px; max-height: 340px; overflow-y: auto; }
+.feed--solo { max-height: 230px; }
+.feed__empty {
+  display: flex; align-items: center; justify-content: center;
+  height: 100px; font-size: var(--text-sm); color: var(--text-muted);
+  font-style: italic;
+}
+
 /* ---------- Console bar ---------- */
 .console-bar {
   display: flex; align-items: center; gap: 9px; padding: 11px 12px;
@@ -472,24 +521,28 @@ onMounted(() => {
 
 /* ---------- Resources ---------- */
 .solo-meters { display: flex; flex-direction: column; gap: 13px; }
-
-/* ---------- Plugin list ---------- */
-.plugs { display: flex; flex-direction: column; }
-.plug { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); }
-.plug:last-child { border-bottom: 0; }
-.plug__id { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
-.plug__name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
-.plug__ver { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
+.meters-note {
+  margin-top: 14px; font-size: var(--text-xs); color: var(--text-muted);
+  border-top: 1px solid var(--border-subtle); padding-top: 12px;
+  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+}
+.meters-cta { margin-left: auto; }
 
 /* ---------- Next wipe ---------- */
-.solo-wipe { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
-.solo-wipe__when { font-family: var(--font-mono); font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
-.solo-wipe__sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+.solo-wipe { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.solo-wipe__type { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: 3px; }
+.solo-wipe__when { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
+.solo-wipe__name { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
+
+/* ---------- Loading ---------- */
+.dash-loading {
+  display: flex; align-items: center; justify-content: center;
+  padding: 60px; font-size: var(--text-sm); color: var(--text-muted);
+}
 
 /* ---------- Responsive ---------- */
 @media (max-width: 1180px) {
   .dash__grid { grid-template-columns: 1fr; }
-  .server__list { grid-template-columns: 1fr; }
 }
 @media (max-width: 768px) {
   .dash__kpis { grid-template-columns: repeat(2, 1fr); }

frontend/src/views/admin/_dashboardMock.ts

@@ -1,159 +0,0 @@
-/**
- * Dashboard mock data — representative placeholder pending multi-instance backend.
- * Current backend is single-server-per-license; the fleet view is a forward-looking
- * surface that will bind to a multi-instance API. All data here is static and clearly
- * labeled so it is never confused for real tenant data.
- *
- * Per-game fields are isolated by game key — a Dune row NEVER receives a Rust field
- * like `umod`, and vice-versa. See GAME_FIELDS for the row-field contract.
- */
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export type ServerStatus = 'online' | 'offline' | 'starting' | 'wiping' | 'updating'
-export type GameKey = 'rust' | 'dune' | 'conan' | 'soulmask'
-
-export interface MockServer {
-  game: GameKey
-  gameIcon: string
-  name: string
-  region: string
-  map: string
-  version: string
-  status: ServerStatus
-  players: { cur: number; max: number }
-  cpu?: number
-  ram?: number
-  ramSub?: string
-  ip: string
-  // Rust-only
-  umod?: string
-  wipe?: string
-  // Dune-only
-  sietches?: string
-  control?: string
-  // Conan-only
-  clans?: string
-  purge?: string
-  // Soulmask-only
-  tribe?: string
-  mask?: string
-}
-
-export interface MockFeedLine {
-  time: string
-  level: 'cmd' | 'chat' | 'info' | 'warn' | 'error' | 'connect' | 'kill'
-  who?: string
-  msg: string
-}
-
-export interface MockWipe {
-  game: GameKey
-  name: string
-  when: string
-  tone: 'wiping' | 'starting' | 'warn' | 'online'
-  label: string
-}
-
-export interface StatItem {
-  label: string
-  value: string | number
-}
-
-// ---------------------------------------------------------------------------
-// Fleet server roster
-// ---------------------------------------------------------------------------
-
-export const MOCK_SERVERS: MockServer[] = [
-  {
-    game: 'rust', gameIcon: 'box', name: 'Main · 2x Vanilla', region: 'US-East',
-    map: 'Procedural 4500', version: 'v2024.12', status: 'online',
-    players: { cur: 142, max: 200 }, cpu: 41, ram: 68, ramSub: '5.4 / 8 GB',
-    ip: '89.142.0.7:28015', umod: '14', wipe: '2d',
-  },
-  {
-    game: 'rust', gameIcon: 'box', name: '5x Modded · Build', region: 'US-East',
-    map: 'Barren 3000', version: 'v2024.12', status: 'online',
-    players: { cur: 38, max: 100 }, ip: '89.142.0.7:28017', umod: '27', wipe: '2d',
-  },
-  {
-    game: 'rust', gameIcon: 'box', name: 'Hardcore · Solo/Duo', region: 'US-West',
-    map: 'Procedural 3500', version: 'v2024.12', status: 'wiping',
-    players: { cur: 0, max: 80 }, cpu: 8, ram: 30, ramSub: '2.4 / 8 GB',
-    ip: '74.91.3.2:28015', umod: '9', wipe: 'now',
-  },
-  {
-    game: 'dune', gameIcon: 'sun', name: 'Arrakis · Hardcore', region: 'EU-Frankfurt',
-    map: 'Hagga Basin', version: 'v0.9.4', status: 'online',
-    players: { cur: 54, max: 60 }, cpu: 63, ram: 74, ramSub: '11.8 / 16 GB',
-    ip: '51.83.12.4:7777', sietches: '3', control: '62%',
-  },
-  {
-    game: 'dune', gameIcon: 'sun', name: 'Deep Desert · PvP', region: 'EU-Frankfurt',
-    map: 'Deep Desert', version: 'v0.9.4', status: 'starting',
-    players: { cur: 0, max: 40 }, ip: '51.83.12.4:7779', sietches: '0', control: '—',
-  },
-  {
-    game: 'dune', gameIcon: 'sun', name: 'Sietch · Roleplay', region: 'SG-Singapore',
-    map: 'Hagga Basin', version: 'v0.9.4', status: 'offline',
-    players: { cur: 0, max: 50 }, ip: '139.99.4.8:7777', sietches: '5', control: '—',
-  },
-  {
-    game: 'conan', gameIcon: 'swords', name: 'Exiled Lands · PvP-C', region: 'US-East',
-    map: 'Exiled Lands', version: 'v3.0.5', status: 'online',
-    players: { cur: 32, max: 40 }, cpu: 48, ram: 60, ramSub: '9.6 / 16 GB',
-    ip: '89.142.0.7:7777', clans: '7', purge: 'Tier 4',
-  },
-  {
-    game: 'soulmask', gameIcon: 'drama', name: 'Sienna Plateau · PvE', region: 'EU-Frankfurt',
-    map: 'Sienna Plateau', version: 'v1.4', status: 'online',
-    players: { cur: 18, max: 30 }, cpu: 35, ram: 52, ramSub: '8.3 / 16 GB',
-    ip: '51.83.12.4:8777', tribe: '4', mask: 'Jaguar',
-  },
-]
-
-// ---------------------------------------------------------------------------
-// Per-game stat field sets — never share slots across games
-// ---------------------------------------------------------------------------
-
-function pl(s: MockServer): string {
-  return `${s.players.cur} / ${s.players.max}`
-}
-
-export const GAME_FIELDS: Record<GameKey, (s: MockServer) => StatItem[]> = {
-  rust:     (s) => [{ label: 'Players', value: pl(s) }, { label: 'uMod', value: s.umod ?? '—' }, { label: 'Wipe', value: s.wipe ?? '—' }],
-  dune:     (s) => [{ label: 'Players', value: pl(s) }, { label: 'Sietches', value: s.sietches ?? '—' }, { label: 'Control', value: s.control ?? '—' }],
-  conan:    (s) => [{ label: 'Players', value: pl(s) }, { label: 'Clans', value: s.clans ?? '—' }, { label: 'Purge', value: s.purge ?? '—' }],
-  soulmask: (s) => [{ label: 'Players', value: pl(s) }, { label: 'Tribe', value: s.tribe ?? '—' }, { label: 'Mask', value: s.mask ?? '—' }],
-}
-
-export function buildStats(s: MockServer): StatItem[] {
-  const fn = GAME_FIELDS[s.game] ?? GAME_FIELDS.rust
-  return fn(s)
-}
-
-// ---------------------------------------------------------------------------
-// Live activity feed
-// ---------------------------------------------------------------------------
-
-export const MOCK_FEED: MockFeedLine[] = [
-  { time: '18:42:07', level: 'connect', who: 'ShadowFox', msg: 'connected — 89.142.0.7' },
-  { time: '18:41:55', level: 'cmd', who: 'admin', msg: 'oxide.grant group default kits.use' },
-  { time: '18:41:30', level: 'kill', who: 'ironMaiden', msg: 'was killed by Scorpion (AK-47, 84m)' },
-  { time: '18:40:12', level: 'warn', msg: '5x Modded agent reconnected — telemetry resuming' },
-  { time: '18:39:48', level: 'chat', who: 'BlightWalker:', msg: 'anyone selling sulfur?' },
-  { time: '18:38:02', level: 'info', msg: 'RaidableBases spawned Tier-3 at G14' },
-  { time: '18:36:51', level: 'connect', who: 'Vex', msg: 'connected — 51.83.12.4' },
-]
-
-// ---------------------------------------------------------------------------
-// Upcoming wipes
-// ---------------------------------------------------------------------------
-
-export const MOCK_WIPES: MockWipe[] = [
-  { game: 'rust', name: 'Main · 2x Vanilla', when: 'Thu · 18:00 UTC', tone: 'wiping', label: 'Map + BP' },
-  { game: 'rust', name: '5x Modded · Build', when: 'Thu · 18:00 UTC', tone: 'wiping', label: 'Map only' },
-  { game: 'dune', name: 'Deep Desert · PvP', when: 'Sun · 12:00 UTC', tone: 'starting', label: 'Deep Desert' },
-]

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>
+  <!-- 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">Early access</span>
+      <h1 style="font-size:var(--text-5xl)">
+        Take control of your servers.
+        <span class="accent">Starting now.</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>
-      </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>
-
-    <!-- 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.
+      <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>
 
-    <!-- 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>
+  <!-- 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>
-          <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 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="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 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="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 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>
     </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>
+    </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>
+  <!-- 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="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 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="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 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="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 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>
+      <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>
     </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>
+  <!-- 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>
     </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>
-      </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>
 </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>

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: 'Does Corrosion replace my hosting panel (AMP / Pterodactyl)?',
-    answer: 'No. Corrosion integrates with them via API or companion agent. Your existing panel remains intact.',
+        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.',
+      },
+    ],
+  },
+  {
+    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 Rust server continues running normally. Corrosion does not proxy gameplay traffic.',
+        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: '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: '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 if a wipe fails?',
-    answer: 'Corrosion can automatically retry and optionally roll back using the pre-wipe backup.',
+        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: 'Does this work on bare metal?',
-    answer: 'Yes. Use the Companion Agent — no SSH required after initial setup.',
+        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: 'Can I manage multiple admins?',
-    answer: 'Yes. Multi-Admin Role-Based Access Control is built in. Grant granular permissions per team member.',
+    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: 'Is this beginner friendly?',
-    answer: 'Yes. If you can install a uMod plugin, you can use Corrosion.',
+        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: 'Does this replace Tebex?',
-    answer: 'Corrosion includes an optional integrated store (Phase 5 roadmap), but does not require Tebex.',
+        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: 'How is licensing handled?',
-    answer: 'One license per server. License validation occurs on plugin startup and periodically.',
+        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.',
+      },
+    ],
+  },
+  {
+    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>
+      <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="(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="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="(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>
     </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>

frontend/src/views/marketing/HowItWorksView.vue

@@ -1,124 +1,338 @@
 <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>
 
-    <!-- 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" />
+  <!-- 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>
+      <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>
+
+  <!-- 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="flex items-center gap-3 mb-2">
-                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 1</span>
+              <div class="bp__name">Rust</div>
+              <div class="bp__accent">Oxide Orange</div>
             </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.
+          </div>
+          <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>
+        </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="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>
+        </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="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>
+
+  <!-- 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="flex justify-center py-1">
-            <ArrowDown class="w-5 h-5 text-neutral-700" />
-          </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 class="caps__col">
+          <span class="eyebrow">From Corrosion</span>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="download" :size="16" /></span>
             <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.
+              <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>
-
-          <div class="flex justify-center py-1">
-            <ArrowDown class="w-5 h-5 text-neutral-700" />
-          </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 class="feat">
+            <span class="feat__ic"><Icon name="key" :size="16" /></span>
             <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.
+              <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>
-
-          <div class="flex justify-center py-1">
-            <ArrowDown class="w-5 h-5 text-neutral-700" />
-          </div>
-
-          <!-- 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 class="feat">
+            <span class="feat__ic"><Icon name="globe" :size="16" /></span>
             <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>
+              <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>
@@ -126,25 +340,19 @@ import { Download, Globe, Wifi, LayoutDashboard, ArrowDown } from 'lucide-vue-ne
     </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>
+  <!-- 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>
-        <p class="text-neutral-500 mt-10">
-          Corrosion does not proxy gameplay traffic. It orchestrates operations.
-        </p>
     </div>
   </section>
-  </div>
 </template>

frontend/src/views/marketing/LandingView.vue

@@ -1,288 +1,680 @@
 <script setup lang="ts">
-import { Shield, Zap, RefreshCw, Terminal, Users, Wifi, Server, ChevronRight } from 'lucide-vue-next'
+import { ref, onMounted, onUnmounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import CorrosionMark from '@/components/brand/CorrosionMark.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import { useThemeGame, type Game } from '@/composables/useThemeGame'
 
-const panelUrl = import.meta.env.VITE_PANEL_URL || ''
+const { setGame } = useThemeGame()
+
+const panelUrl = import.meta.env.VITE_PANEL_URL ?? ''
+
+// ---- Game pill data ----
+interface GameDef {
+  key: Game
+  label: string
+  icon: string
+}
+
+const GAMES: GameDef[] = [
+  { key: 'rust',     label: 'Rust',            icon: 'box'    },
+  { key: 'dune',     label: 'Dune: Awakening', icon: 'sun'    },
+  { key: 'soulmask', label: 'Soulmask',         icon: 'drama'  },
+  { key: 'conan',    label: 'Conan Exiles',     icon: 'swords' },
+]
+
+const activeGame = ref<Game>('rust')
+const userPicked = ref(false)
+let rotateTimer: ReturnType<typeof setInterval> | null = null
+let idx = 0
+
+function pickGame(g: Game): void {
+  userPicked.value = true
+  activeGame.value = g
+  setGame(g)
+}
+
+function heroIsVisible(): boolean {
+  const hero = document.querySelector('.hero')
+  if (!hero) return false
+  return hero.getBoundingClientRect().bottom >= 140
+}
+
+function startRotation(): void {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+  rotateTimer = setInterval(() => {
+    if (userPicked.value || !heroIsVisible()) return
+    idx = (idx + 1) % GAMES.length
+    const next = GAMES[idx]
+    if (next) {
+      activeGame.value = next.key
+      setGame(next.key)
+    }
+  }, 3400)
+}
+
+// ---- Scroll-reveal via IntersectionObserver ----
+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(() => {
+  // Set initial game on html — stays in sync with the global composable
+  setGame('rust')
+  activeGame.value = 'rust'
+  startRotation()
+  initReveal()
+})
+
+onUnmounted(() => {
+  if (rotateTimer !== null) clearInterval(rotateTimer)
+  io?.disconnect()
+})
+
+// Mock sidebar game switcher active key mirrors activeGame
+const mockActiveGame = activeGame
 </script>
 
 <template>
-  <div>
-    <!-- Hero -->
-    <section class="relative overflow-hidden">
-      <div class="max-w-6xl mx-auto px-6 pt-20 pb-24 text-center">
-        <h1 class="text-5xl md:text-6xl font-bold text-neutral-100 mb-6 tracking-tight">
-          The Control Plane<br />
-          <span class="text-oxide-500">for Rust Servers</span>
-        </h1>
-        <p class="text-xl text-neutral-400 max-w-2xl mx-auto mb-10">
-          Deploy once. Automate everything. Never SSH again.
+  <!-- HERO -->
+  <section class="hero">
+    <div class="hero__atmo" />
+    <div class="hero__grid" />
+    <div class="hero__grain" />
+    <div class="wrap hero__in">
+      <div class="hero__mark">
+        <CorrosionMark :size="72" />
+      </div>
+      <div class="notpill">
+        <b>Not hosting.</b>&nbsp;Not a generic panel. Self-hosted, agent-based.
+      </div>
+      <h1>Run your game servers<span class="accent">like an operation.</span></h1>
+      <p class="hero__sub">
+        Corrosion is a management panel for self-hosted survival game servers. Deploy servers, automate
+        wipes, manage plugins and mods, schedule maintenance, monitor players, and orchestrate
+        multi-server worlds — from one command center.
       </p>
-        <div class="flex items-center justify-center gap-4">
-          <a :href="panelUrl + '/register'" class="px-8 py-3.5 bg-oxide-600 hover:bg-oxide-700 text-white font-semibold rounded-lg transition-colors text-lg">
-            Buy License
-          </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 text-lg">
-            View Live Demo
+      <div class="hero__cta">
+        <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>
+      <!-- Game pills -->
+      <div class="hero__games">
+        <button
+          v-for="g in GAMES"
+          :key="g.key"
+          class="gpill"
+          :data-on="String(activeGame === g.key)"
+          @click="pickGame(g.key)"
+        >
+          <Icon :name="g.icon" :size="15" />
+          <span>{{ g.label }}</span>
+        </button>
       </div>
-      <!-- Gradient glow -->
-      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-oxide-500/10 rounded-full blur-3xl pointer-events-none" />
+    </div>
+
+    <!-- Panel mockup -->
+    <div class="wrap">
+      <div class="mock">
+        <div class="mock__bar">
+          <div class="mock__dots">
+            <span /><span /><span />
+          </div>
+          <div class="mock__url">panel.corrosionmgmt.com / fleet</div>
+        </div>
+        <div class="mock__body">
+          <aside class="mock__side">
+            <div class="mock__brand">
+              <span class="mark"><CorrosionMark :size="18" /></span>
+              <b>Corrosion</b>
+            </div>
+            <div class="mock__gs">
+              <span :class="{ on: mockActiveGame === 'rust' }">
+                <Icon name="box" :size="13" />
+              </span>
+              <span :class="{ on: mockActiveGame === 'dune' }">
+                <Icon name="sun" :size="13" />
+              </span>
+              <span :class="{ on: mockActiveGame === 'soulmask' }">
+                <Icon name="drama" :size="13" />
+              </span>
+              <span :class="{ on: mockActiveGame === 'conan' }">
+                <Icon name="swords" :size="13" />
+              </span>
+            </div>
+            <div class="mock__nav on"><Icon name="layout-dashboard" :size="14" />Dashboard</div>
+            <div class="mock__nav"><Icon name="server" :size="14" />Servers</div>
+            <div class="mock__nav"><Icon name="terminal" :size="14" />Console</div>
+            <div class="mock__nav"><Icon name="trash-2" :size="14" />Wipes</div>
+            <div class="mock__nav"><Icon name="cpu" :size="14" />Agents</div>
+          </aside>
+          <main class="mock__main">
+            <div class="mock__kpis">
+              <div class="mock__kpi">
+                <div class="l">Servers running</div>
+                <div class="v">5<small>/6</small></div>
+              </div>
+              <div class="mock__kpi">
+                <div class="l">Players online</div>
+                <div class="v">234</div>
+              </div>
+              <div class="mock__kpi">
+                <div class="l">Agent nodes</div>
+                <div class="v">2<small>/2</small></div>
+              </div>
+            </div>
+            <div class="mock__row">
+              <span class="g"><Icon name="box" :size="13" /></span>
+              <span class="nm">
+                Main · 2x Vanilla
+                <small>asgard-01 · rust</small>
+              </span>
+              <span class="st"><b />online</span>
+            </div>
+            <div class="mock__row">
+              <span class="g"><Icon name="sun" :size="13" /></span>
+              <span class="nm">
+                Arrakis · Hardcore
+                <small>asgard-01 · dune</small>
+              </span>
+              <span class="st"><b />online</span>
+            </div>
+            <div class="mock__row">
+              <span class="g"><Icon name="swords" :size="13" /></span>
+              <span class="nm">
+                Exiled Lands · PvP-C
+                <small>asgard-02 · conan</small>
+              </span>
+              <span class="st"><b />online</span>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+    <div class="wrap" style="text-align:center">
+      <div class="hero__foot">
+        One host agent, many game instances · Rust · Dune: Awakening · Soulmask · Conan Exiles ·
+        Windows &amp; Linux hosts
+      </div>
+    </div>
+    <div style="height:80px" />
   </section>
 
-    <!-- The Problem -->
-    <section class="py-20 border-t border-neutral-800">
-      <div class="max-w-4xl mx-auto px-6">
-        <h2 class="text-3xl font-bold text-neutral-100 mb-8 text-center">The Problem</h2>
-        <p class="text-neutral-400 text-lg mb-8 text-center">Running a Rust server today means:</p>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto mb-10">
-          <div class="flex items-start gap-3 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
-            <span class="text-red-400 mt-0.5">&#x2717;</span>
-            <span class="text-neutral-300">Editing JSON configs over SFTP</span>
+  <!-- PROBLEM -->
+  <section class="sec" id="problem">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">The problem</span>
+        <h2 class="title">Game servers were never supposed<br>to be babysitting duty</h2>
       </div>
-          <div class="flex items-start gap-3 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
-            <span class="text-red-400 mt-0.5">&#x2717;</span>
-            <span class="text-neutral-300">Babysitting wipes</span>
+      <div class="pain reveal">
+        <div class="pain__item">
+          <span class="pain__x"><Icon name="x" :size="14" /></span>
+          Editing configs over SFTP
         </div>
-          <div class="flex items-start gap-3 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
-            <span class="text-red-400 mt-0.5">&#x2717;</span>
-            <span class="text-neutral-300">Manually installing and updating plugins</span>
+        <div class="pain__item">
+          <span class="pain__x"><Icon name="x" :size="14" /></span>
+          Manually updating mods &amp; plugins
         </div>
-          <div class="flex items-start gap-3 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
-            <span class="text-red-400 mt-0.5">&#x2717;</span>
-            <span class="text-neutral-300">Restarting servers blindly</span>
+        <div class="pain__item">
+          <span class="pain__x"><Icon name="x" :size="14" /></span>
+          Guessing when a server crashed
         </div>
-          <div class="flex items-start gap-3 p-4 bg-neutral-900 border border-neutral-800 rounded-lg md:col-span-2 md:max-w-sm md:mx-auto">
-            <span class="text-red-400 mt-0.5">&#x2717;</span>
-            <span class="text-neutral-300">Staying online when something crashes</span>
+        <div class="pain__item">
+          <span class="pain__x"><Icon name="x" :size="14" /></span>
+          Running wipe day by hand
+        </div>
+        <div class="pain__item">
+          <span class="pain__x"><Icon name="x" :size="14" /></span>
+          Juggling Discord bots &amp; cron tasks
+        </div>
+        <div class="pain__item">
+          <span class="pain__x"><Icon name="x" :size="14" /></span>
+          Linking multi-server clusters manually
+        </div>
+        <div class="pain__item">
+          <span class="pain__x"><Icon name="x" :size="14" /></span>
+          Managing admins without real permissions
+        </div>
+        <div class="pain__item">
+          <span class="pain__x"><Icon name="x" :size="14" /></span>
+          Explaining downtime to players
         </div>
       </div>
-        <p class="text-center text-lg text-neutral-300 font-medium">
-          Rust servers deserve <span class="text-oxide-400">orchestration</span> — not babysitting.
+      <p class="closing reveal">
+        Your community sees the server. You deal with the chaos.<br>
+        <span class="accent">Corrosion gives you the control plane.</span>
       </p>
     </div>
   </section>
 
-    <!-- The Shift -->
-    <section class="py-20 bg-neutral-900/50 border-t border-neutral-800">
-      <div class="max-w-4xl mx-auto px-6 text-center">
-        <h2 class="text-3xl font-bold text-neutral-100 mb-8">The Shift</h2>
-        <p class="text-lg text-neutral-400 mb-10">
-          Corrosion moves Rust server administration to a unified cloud control plane.
+  <!-- SHIFT -->
+  <section class="sec" id="shift">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">The shift</span>
+        <h2 class="title">Drop in the agent.<br>Take control from the panel.</h2>
+        <p class="lead">
+          One lightweight host agent runs on your machine and manages every game instance you assign
+          to it — an outbound-only ops runtime, not an exposed panel.
         </p>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
-          <div class="p-6 bg-neutral-900 border border-neutral-800 rounded-lg">
-            <div class="w-10 h-10 bg-oxide-500/10 rounded-lg flex items-center justify-center mx-auto mb-4">
-              <span class="text-oxide-400 text-xl font-bold">1</span>
       </div>
-            <p class="text-neutral-200 font-medium">Install one plugin</p>
+      <div class="steps reveal">
+        <div class="step">
+          <div class="step__n">1</div>
+          <b>Install the Corrosion Agent</b>
+          <p>One runtime on your Windows or Linux host. Outbound connection only.</p>
         </div>
-          <div class="p-6 bg-neutral-900 border border-neutral-800 rounded-lg">
-            <div class="w-10 h-10 bg-oxide-500/10 rounded-lg flex items-center justify-center mx-auto mb-4">
-              <span class="text-oxide-400 text-xl font-bold">2</span>
+        <div class="step">
+          <div class="step__n">2</div>
+          <b>Register your server or fleet</b>
+          <p>Connect one server, a cluster, or multiple game worlds on the same box.</p>
         </div>
-            <p class="text-neutral-200 font-medium">Register online</p>
-          </div>
-          <div class="p-6 bg-neutral-900 border border-neutral-800 rounded-lg">
-            <div class="w-10 h-10 bg-oxide-500/10 rounded-lg flex items-center justify-center mx-auto mb-4">
-              <span class="text-oxide-400 text-xl font-bold">3</span>
-            </div>
-            <p class="text-neutral-200 font-medium">Manage everything from your browser</p>
+        <div class="step">
+          <div class="step__n">3</div>
+          <b>Manage from the browser</b>
+          <p>Console, files, schedules, wipes, plugins, mods, players, backups, metrics.</p>
         </div>
       </div>
-        <div class="flex flex-col md:flex-row items-center justify-center gap-4 text-neutral-500">
-          <span>No open firewall ports.</span>
-          <span class="hidden md:inline">&middot;</span>
-          <span>No manual file editing.</span>
-          <span class="hidden md:inline">&middot;</span>
-          <span>No SSH required.</span>
+      <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 constant SSH sessions</span>
+        <span><Icon name="check" :size="16" style="color:var(--status-online)" />No config spelunking</span>
+        <span><Icon name="check" :size="16" style="color:var(--status-online)" />No fragile scripts</span>
       </div>
+      <p class="closing reveal" style="font-size:var(--text-lg)">
+        You provide the machine.
+        <span class="accent">Corrosion provides the control plane.</span>
+      </p>
     </div>
   </section>
 
-    <!-- Core Capabilities -->
-    <section class="py-20 border-t border-neutral-800">
-      <div class="max-w-6xl mx-auto px-6">
-        <h2 class="text-3xl font-bold text-neutral-100 mb-12 text-center">Core Capabilities</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <!-- Operational Control -->
+  <!-- BLUEPRINTS / SUPPORTED GAMES -->
+  <section class="sec" id="blueprints">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Supported games</span>
+        <h2 class="title">Game-aware blueprints,<br>not generic templates</h2>
+        <p class="lead">
+          Every game has a different operational reality. Corrosion models each one as an operations
+          blueprint — Rust wipes, Dune: Awakening battlegroups, Soulmask clusters, Conan persistent
+          worlds.
+        </p>
+      </div>
+      <div class="blueprints reveal">
+        <!-- Rust card — sets its own game scope via inline style on the surrounding element.
+             The token system resolves var(--accent) from data-game on <html> (set globally by
+             useThemeGame). Cards carry a data-game attr for future per-card scoping if desired. -->
+        <div class="bp" data-game="rust">
+          <div class="bp__head">
+            <span class="bp__ic"><Icon name="box" :size="21" /></span>
             <div>
-            <h3 class="text-lg font-semibold text-oxide-400 mb-6 uppercase tracking-wider">Operational Control</h3>
-            <div class="space-y-4">
-              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
-                <RefreshCw class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
+              <div class="bp__name">Rust</div>
+              <div class="bp__accent">Oxide Orange</div>
+            </div>
+          </div>
+          <div class="bp__role">Modded server operations</div>
+          <div class="bp__list">
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />uMod / Oxide plugin browsing</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Plugin config profiles</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Map / blueprint / full wipes</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Wipe schedules &amp; map library</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Player &amp; admin workflows</div>
+          </div>
+        </div>
+        <div class="bp" data-game="dune">
+          <div class="bp__head">
+            <span class="bp__ic"><Icon name="sun" :size="21" /></span>
             <div>
-                  <p class="text-neutral-200 font-medium">Auto-Wiper with Rollback</p>
-                  <p class="text-sm text-neutral-500 mt-1">Full wipe sequences with health verification</p>
+              <div class="bp__name">Dune: Awakening</div>
+              <div class="bp__accent">Spice Amber</div>
             </div>
           </div>
-              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
-                <Terminal class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
+          <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" />Service health checks</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Backups before maintenance</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Battlegroup lifecycle controls</div>
+          </div>
+        </div>
+        <div class="bp" data-game="soulmask">
+          <div class="bp__head">
+            <span class="bp__ic"><Icon name="drama" :size="21" /></span>
             <div>
-                  <p class="text-neutral-200 font-medium">Real-Time Console + Player Control</p>
-                  <p class="text-sm text-neutral-500 mt-1">Execute commands from your browser</p>
+              <div class="bp__name">Soulmask</div>
+              <div class="bp__accent">Ritual Jade</div>
             </div>
           </div>
-              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
-                <Zap class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
+          <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" />Linked map validation</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Port &amp; config automation</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Cluster health</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Scheduled maintenance</div>
+          </div>
+        </div>
+        <div class="bp" data-game="conan">
+          <div class="bp__head">
+            <span class="bp__ic"><Icon name="swords" :size="21" /></span>
             <div>
-                  <p class="text-neutral-200 font-medium">Web-Based Plugin Configuration</p>
-                  <p class="text-sm text-neutral-500 mt-1">No more JSON editing over SFTP</p>
-                </div>
-              </div>
-              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
-                <Server class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
-                <div>
-                  <p class="text-neutral-200 font-medium">Automated Steam Updates</p>
-                  <p class="text-sm text-neutral-500 mt-1">Stay current without manual intervention</p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- Infrastructure & Scale -->
-          <div>
-            <h3 class="text-lg font-semibold text-oxide-400 mb-6 uppercase tracking-wider">Infrastructure & Scale</h3>
-            <div class="space-y-4">
-              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
-                <Shield class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
-                <div>
-                  <p class="text-neutral-200 font-medium">Companion Agent — No SSH Required</p>
-                  <p class="text-sm text-neutral-500 mt-1">Outbound-only secure connections</p>
-                </div>
-              </div>
-              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
-                <Users class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
-                <div>
-                  <p class="text-neutral-200 font-medium">Multi-Admin Role-Based Access Control</p>
-                  <p class="text-sm text-neutral-500 mt-1">Scale your team without losing order</p>
-                </div>
-              </div>
-              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
-                <Wifi class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
-                <div>
-                  <p class="text-neutral-200 font-medium">Zero Inbound Ports Required</p>
-                  <p class="text-sm text-neutral-500 mt-1">Your server initiates all connections</p>
+              <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 &amp; server management</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Clan &amp; player visibility</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Purge, decay &amp; event tracking</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Backup &amp; restart scheduling</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />World maintenance workflows</div>
           </div>
         </div>
       </div>
     </div>
   </section>
 
-    <!-- Wipe Orchestration -->
-    <section class="py-20 bg-neutral-900/50 border-t border-neutral-800">
-      <div class="max-w-4xl mx-auto px-6">
-        <h2 class="text-3xl font-bold text-neutral-100 mb-4 text-center">Wipe Orchestration</h2>
-        <p class="text-lg text-neutral-400 mb-10 text-center">
-          Wipes aren't just "delete map and restart."
-        </p>
-        <div class="flex flex-wrap items-center justify-center gap-3 mb-10">
-          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Pre-Wipe</span>
-          <ChevronRight class="w-4 h-4 text-neutral-600" />
-          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Backup</span>
-          <ChevronRight class="w-4 h-4 text-neutral-600" />
-          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Map Rotation</span>
-          <ChevronRight class="w-4 h-4 text-neutral-600" />
-          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Steam Update</span>
-          <ChevronRight class="w-4 h-4 text-neutral-600" />
-          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Restart</span>
-          <ChevronRight class="w-4 h-4 text-neutral-600" />
-          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Health Check</span>
-          <ChevronRight class="w-4 h-4 text-neutral-600" />
-          <span class="px-4 py-2 bg-oxide-500/15 border border-oxide-500/30 rounded-lg text-sm text-oxide-400">Rollback</span>
+  <!-- CAPABILITIES -->
+  <section class="sec" id="caps">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Core capabilities</span>
+        <h2 class="title">Everything an operator needs</h2>
       </div>
-        <div class="flex flex-col md:flex-row items-center justify-center gap-6 text-neutral-400">
-          <span>Every wipe is logged.</span>
+      <div class="caps reveal">
+        <div class="caps__col">
+          <span class="eyebrow">Operations</span>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="power" :size="16" /></span>
+            <b>Server lifecycle control</b>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="terminal" :size="16" /></span>
+            <b>Real-time console</b>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="users" :size="16" /></span>
+            <b>Player visibility</b>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="folder-open" :size="16" /></span>
+            <b>File manager</b>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="calendar-clock" :size="16" /></span>
+            <b>Scheduled tasks &amp; restart windows</b>
+          </div>
+        </div>
+        <div class="caps__col">
+          <span class="eyebrow">Automation</span>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="refresh-cw" :size="16" /></span>
+            <b>Wipe orchestration</b>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="database-backup" :size="16" /></span>
+            <b>Backup-before-change</b>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="download" :size="16" /></span>
+            <b>SteamCMD / game updates</b>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="bell" :size="16" /></span>
+            <b>Discord / status announcements</b>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="undo-2" :size="16" /></span>
+            <b>Health checks &amp; rollback</b>
+          </div>
+        </div>
+        <div class="caps__col">
+          <span class="eyebrow">Game systems</span>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="puzzle" :size="16" /></span>
+            <b>Rust plugins &amp; configs</b>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="sun" :size="16" /></span>
+            <b>Dune: Awakening battlegroups</b>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="drama" :size="16" /></span>
+            <b>Soulmask clusters</b>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="swords" :size="16" /></span>
+            <b>Conan mods &amp; events</b>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="store" :size="16" /></span>
+            <b>Public pages &amp; storefront</b>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- WIPE & MAINTENANCE ORCHESTRATION -->
+  <section class="sec" id="wipe">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Wipe &amp; maintenance orchestration</span>
+        <h2 class="title">Wipes should be workflows,<br>not rituals</h2>
+        <p class="lead">
+          Rust map / BP / full wipes. Dune: Awakening Deep Desert wipes. Soulmask &amp; Conan
+          maintenance and event resets — all as verified, logged sequences.
+        </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</span>
+        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
+        <span class="pchip">Rotate map / config</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.</span>
         <span>Every step is verified.</span>
-          <span class="text-oxide-400 font-medium">Rollback is one click away.</span>
+        <span class="hi">Rollback is one click away when supported.</span>
       </div>
     </div>
   </section>
 
-    <!-- Built Like Infrastructure -->
-    <section class="py-20 border-t border-neutral-800">
-      <div class="max-w-4xl mx-auto px-6 text-center">
-        <h2 class="text-3xl font-bold text-neutral-100 mb-4">Built Like Infrastructure</h2>
-        <p class="text-lg text-neutral-400 mb-10">
-          Corrosion isn't a UI wrapper. It's a hosted SaaS platform built with:
+  <!-- BUILT LIKE INFRASTRUCTURE -->
+  <section class="sec" id="platform">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Built like infrastructure</span>
+        <h2 class="title">Not a skin over SSH</h2>
+        <p class="lead">
+          A hosted control plane plus a host agent — with tenant isolation, command namespacing,
+          health reporting, and outbound-only connectivity.
         </p>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
-          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-lg">
-            <p class="text-oxide-400 font-semibold mb-1">NestJS</p>
-            <p class="text-xs text-neutral-500">TypeScript backend</p>
       </div>
-          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-lg">
-            <p class="text-oxide-400 font-semibold mb-1">NATS</p>
-            <p class="text-xs text-neutral-500">JetStream messaging</p>
+      <div class="infra reveal">
+        <div class="icard">
+          <div class="icard__ic"><Icon name="cpu" :size="16" /></div>
+          <b>Agent-based control</b>
+          <p>Your host connects to Corrosion. No exposed management panel required.</p>
         </div>
-          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-lg">
-            <p class="text-oxide-400 font-semibold mb-1">PostgreSQL</p>
-            <p class="text-xs text-neutral-500">Multi-tenant isolation</p>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="shield" :size="16" /></div>
+          <b>Tenant isolated</b>
+          <p>Every license, server, and command is scoped.</p>
         </div>
-          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-lg">
-            <p class="text-oxide-400 font-semibold mb-1">Outbound-Only</p>
-            <p class="text-xs text-neutral-500">Secure connections</p>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="route" :size="16" /></div>
+          <b>Command namespaced</b>
+          <p>Server actions are routed intentionally, not sprayed blindly.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="zap" :size="16" /></div>
+          <b>Event-driven</b>
+          <p>NATS-powered messaging keeps agents and panel in sync.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="activity" :size="16" /></div>
+          <b>Observable</b>
+          <p>Health, metrics, task history, and agent status — all visible.</p>
         </div>
       </div>
-        <div class="flex flex-col items-center gap-2 text-neutral-500 text-sm">
-          <span>Every server is scoped by license.</span>
-          <span>Every command is namespaced.</span>
-          <span>Every tenant is isolated.</span>
+      <div class="techrow reveal">
+        <span>NestJS</span>
+        <span>NATS JetStream</span>
+        <span>PostgreSQL</span>
+        <span>Go host agent</span>
+        <span>Outbound-only</span>
       </div>
     </div>
   </section>
 
-    <!-- Public Server Sites -->
-    <section class="py-20 bg-neutral-900/50 border-t border-neutral-800">
-      <div class="max-w-4xl mx-auto px-6 text-center">
-        <h2 class="text-3xl font-bold text-neutral-100 mb-4">Public Server Sites & Storefront</h2>
-        <p class="text-lg text-neutral-400 mb-10">Each license includes:</p>
-        <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
-          <div class="p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
-            <p class="text-sm text-neutral-200">Public server page</p>
+  <!-- PUBLIC SITES & STOREFRONT -->
+  <section class="sec" id="store">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Public server sites &amp; storefront</span>
+        <h2 class="title">Give your players a home base</h2>
+        <p class="lead">
+          Publish a server page with live status, wipe countdowns, player counts, plugin / mod lists,
+          announcements, and optional storefront support.
+        </p>
       </div>
-          <div class="p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
-            <p class="text-sm text-neutral-200">Wipe countdown</p>
+      <div class="chips reveal">
+        <div class="chip-card"><Icon name="globe" :size="16" style="color:var(--accent-text)" />Public server page</div>
+        <div class="chip-card"><Icon name="users" :size="16" style="color:var(--accent-text)" />Live player count</div>
+        <div class="chip-card"><Icon name="timer" :size="16" style="color:var(--accent-text)" />Wipe countdown</div>
+        <div class="chip-card"><Icon name="puzzle" :size="16" style="color:var(--accent-text)" />Mod / plugin list</div>
+        <div class="chip-card"><Icon name="megaphone" :size="16" style="color:var(--accent-text)" />Announcements</div>
+        <div class="chip-card chip-card--accent"><Icon name="shopping-cart" :size="16" />Integrated webstore</div>
       </div>
-          <div class="p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
-            <p class="text-sm text-neutral-200">Live player count</p>
-          </div>
-          <div class="p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
-            <p class="text-sm text-neutral-200">Plugin/mod list</p>
-          </div>
-          <div class="p-4 bg-neutral-900 border border-oxide-500/30 rounded-lg">
-            <p class="text-sm text-oxide-400">Integrated webstore</p>
-          </div>
-        </div>
-        <p class="text-neutral-400">Monetize your server without third-party complexity.</p>
+      <p
+        class="closing reveal"
+        style="font-size:var(--text-md);color:var(--text-tertiary);font-weight:500"
+      >
+        Operate the server. Inform the players. Monetize without duct tape.
+      </p>
     </div>
   </section>
 
-    <!-- For Serious Admins -->
-    <section class="py-20 border-t border-neutral-800">
-      <div class="max-w-3xl mx-auto px-6 text-center">
-        <h2 class="text-3xl font-bold text-neutral-100 mb-8">For Serious Admins</h2>
-        <p class="text-lg text-neutral-400 mb-8">If you:</p>
-        <div class="space-y-3 max-w-md mx-auto mb-10">
-          <p class="text-neutral-300 text-lg">Run scheduled wipes</p>
-          <p class="text-neutral-300 text-lg">Care about uptime</p>
-          <p class="text-neutral-300 text-lg">Want crash recovery</p>
-          <p class="text-neutral-300 text-lg">Want automation</p>
-          <p class="text-neutral-300 text-lg">Manage multiple admins</p>
+  <!-- PRICING -->
+  <section class="sec" id="pricing">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Pricing</span>
+        <h2 class="title">Scale from one server to a fleet</h2>
       </div>
-        <p class="text-xl text-oxide-400 font-semibold">Corrosion was built for you.</p>
+      <div class="pricing reveal">
+        <div class="plan">
+          <div class="plan__tag" />
+          <div class="plan__name">Hobby</div>
+          <div class="plan__price">$9.99<small>/mo</small></div>
+          <div class="plan__scope">1–5 non-commercial servers.</div>
+          <RouterLink class="btn btn--ghost" :to="{ name: 'early-access' }">Start</RouterLink>
+        </div>
+        <div class="plan">
+          <div class="plan__tag" />
+          <div class="plan__name">Community</div>
+          <div class="plan__price">$19.99<small>/mo</small></div>
+          <div class="plan__scope">6–10 non-commercial servers.</div>
+          <RouterLink class="btn btn--ghost" :to="{ name: 'early-access' }">Start</RouterLink>
+        </div>
+        <div class="plan plan--feature">
+          <div class="plan__tag">Most popular</div>
+          <div class="plan__name">Operator</div>
+          <div class="plan__price">$99.99<small>/mo</small></div>
+          <div class="plan__scope">Commercial use, or up to 50 servers.</div>
+          <RouterLink class="btn btn--primary" :to="{ name: 'early-access' }">Get Operator</RouterLink>
+        </div>
+        <div class="plan">
+          <div class="plan__tag" />
+          <div class="plan__name">Network</div>
+          <div class="plan__price">$99.99<small>/mo</small></div>
+          <div class="plan__scope">50+ servers for fleets and hosting partners. Fleet Blocks add capacity.</div>
+          <RouterLink class="btn btn--ghost" :to="{ name: 'early-access' }">Start</RouterLink>
+        </div>
+      </div>
+      <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>
+      <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>
+      <p class="support-note reveal">
+        Community support is included with every plan (documentation, community forum, diagnostics,
+        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>
 
-    <!-- CTA -->
-    <section class="py-24 bg-neutral-900/50 border-t border-neutral-800">
-      <div class="max-w-3xl mx-auto px-6 text-center">
-        <p class="text-2xl text-neutral-400 mb-2">Stop babysitting your server.</p>
-        <p class="text-3xl font-bold text-neutral-100 mb-10">Start orchestrating it.</p>
-        <a :href="panelUrl + '/register'" class="inline-block px-10 py-4 bg-oxide-600 hover:bg-oxide-700 text-white font-semibold rounded-lg transition-colors text-lg">
-          Get Corrosion
+  <!-- FOR SERIOUS ADMINS -->
+  <section class="sec" id="admins">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">For serious admins</span>
+        <h2 class="title">Built for admins<br>who are done babysitting</h2>
+      </div>
+      <div class="admins reveal">
+        <span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />You run more than a toy server.</span>
+        <span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />Your players expect uptime.</span>
+        <span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />Wipe day needs a plan.</span>
+        <span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />Mods and plugins need control.</span>
+        <span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />Admin access needs boundaries.</span>
+        <span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />Your community deserves better than guesswork.</span>
+      </div>
+      <p class="closing reveal accent">Stop babysitting your server. Start orchestrating it.</p>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section class="finalcta">
+    <div class="finalcta__atmo" />
+    <div class="wrap finalcta__in reveal">
+      <h2>Ready to run your servers<br>like an operation?</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>
+  </section>
 </template>

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>
+      <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>
+  <!-- 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="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
+          <div class="plan__scope">{{ plan.scope }}</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>
-            <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
+            class="btn"
+            :class="plan.ctaVariant === 'primary' ? 'btn--primary' : 'btn--ghost'"
+            :to="{ name: 'early-access' }"
+          >
+            {{ plan.cta }}
           </RouterLink>
         </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>
 
-          <!-- 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>
+      <!-- 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>
-              <p class="text-sm text-neutral-500 mt-1">Optional feature expansions.</p>
+
+      <!-- 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>
-            <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>
+  </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>

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.
+  <!-- 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">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">
+  <!-- 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>
+    </div>
+  </section>
+
+  <!-- ROADMAP GROUPS -->
+  <section class="sec" id="roadmap">
+    <div class="wrap">
       <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'"
+        v-for="group in groups"
+        :key="group.label"
+        class="rm-group reveal"
+        :data-status="group.status"
       >
-            <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)"
+        <div class="rm-group__head">
+          <div
+            class="rm-group__badge"
+            :class="`rm-badge--${group.status}`"
           >
-                {{ phaseStatusLabel(phase.status) }}
-              </span>
+            <Icon :name="statusIcon(group.status)" :size="13" />
+            {{ statusLabel(group.status) }}
           </div>
-            <ul class="space-y-3">
+          <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 phase.items"
+            v-for="item in group.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'"
+            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>
-  </div>
 </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>