fix(panel): real auto-updating version + remove fake agent footer; rename companion -> Corrosion host agent

Version badge: was hardcoded '1.0.8' — now single-sourced from frontend/package.json (1.0.0) via Vite define __APP_VERSION__, so it auto-updates on release. Sidebar agent footer: removed the FABRICATED 'asgard-01' host name and the fake 'Agent v1.0.8' line — now shows real server.connection data, or an honest 'No host agent connected' empty state when nothing is deployed (the operator's actual state). Renamed 'Companion agent' -> 'Corrosion host agent' across the UI (ServerView/SetupWizard/Dashboard/Plugins), the binary names (corrosion-host-agent-<os>-<arch>) + CDN path (/host-agent/), the Go Makefile build output, and the Gitea CI workflow — frontend download links and CI output now match. Marketing hero mock host names neutralized (asgard-01 -> rust-host/dune-host/conan-host). DB column names (companion_last_seen) left intact. Build green; zero 'asgard'/'1.0.8' remain in frontend/src.

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

.gitea/workflows/build-companion.yml

@@ -1,4 +1,4 @@
-name: Build Companion Agent
+name: Build Host Agent
 
 on:
   push:
@@ -26,19 +26,19 @@ jobs:
         run: |
           cd companion-agent
           mkdir -p bin
-          GOOS=linux GOARCH=amd64 go build -ldflags "-s -w -X main.version=${{ steps.version.outputs.VERSION }}" -o bin/corrosion-companion-linux-amd64 ./cmd/agent
-          chmod +x bin/corrosion-companion-linux-amd64
+          GOOS=linux GOARCH=amd64 go build -ldflags "-s -w -X main.version=${{ steps.version.outputs.VERSION }}" -o bin/corrosion-host-agent-linux-amd64 ./cmd/agent
+          chmod +x bin/corrosion-host-agent-linux-amd64
 
       - name: Build Windows AMD64
         run: |
           cd companion-agent
-          GOOS=windows GOARCH=amd64 go build -ldflags "-s -w -X main.version=${{ steps.version.outputs.VERSION }}" -o bin/corrosion-companion-windows-amd64.exe ./cmd/agent
+          GOOS=windows GOARCH=amd64 go build -ldflags "-s -w -X main.version=${{ steps.version.outputs.VERSION }}" -o bin/corrosion-host-agent-windows-amd64.exe ./cmd/agent
 
       - name: Generate checksums
         run: |
           cd companion-agent/bin
-          sha256sum corrosion-companion-linux-amd64 > checksums.txt
-          sha256sum corrosion-companion-windows-amd64.exe >> checksums.txt
+          sha256sum corrosion-host-agent-linux-amd64 > checksums.txt
+          sha256sum corrosion-host-agent-windows-amd64.exe >> checksums.txt
           cat checksums.txt
 
       - name: Create Release
@@ -53,7 +53,7 @@ jobs:
           RESPONSE=$(curl -s -X POST \
             -H "Authorization: token ${RELEASE_TOKEN}" \
             -H "Content-Type: application/json" \
-            -d "{\"tag_name\": \"${VERSION}\", \"name\": \"Companion Agent ${VERSION}\", \"body\": \"Companion Agent release ${VERSION}\", \"draft\": false, \"prerelease\": false}" \
+            -d "{\"tag_name\": \"${VERSION}\", \"name\": \"Corrosion Host Agent ${VERSION}\", \"body\": \"Corrosion Host Agent release ${VERSION}\", \"draft\": false, \"prerelease\": false}" \
             "${API_URL}/repos/${REPO}/releases")
           RELEASE_ID=$(echo "$RESPONSE" | grep -o '"id":[0-9]*' | head -1 | grep -o '[0-9]*')
 
@@ -68,15 +68,15 @@ jobs:
           curl -s -X POST \
             -H "Authorization: token ${RELEASE_TOKEN}" \
             -H "Content-Type: application/octet-stream" \
-            --data-binary @companion-agent/bin/corrosion-companion-linux-amd64 \
-            "${API_URL}/repos/${REPO}/releases/${RELEASE_ID}/assets?name=corrosion-companion-linux-amd64"
+            --data-binary @companion-agent/bin/corrosion-host-agent-linux-amd64 \
+            "${API_URL}/repos/${REPO}/releases/${RELEASE_ID}/assets?name=corrosion-host-agent-linux-amd64"
 
           # Upload Windows binary
           curl -s -X POST \
             -H "Authorization: token ${RELEASE_TOKEN}" \
             -H "Content-Type: application/octet-stream" \
-            --data-binary @companion-agent/bin/corrosion-companion-windows-amd64.exe \
-            "${API_URL}/repos/${REPO}/releases/${RELEASE_ID}/assets?name=corrosion-companion-windows-amd64.exe"
+            --data-binary @companion-agent/bin/corrosion-host-agent-windows-amd64.exe \
+            "${API_URL}/repos/${REPO}/releases/${RELEASE_ID}/assets?name=corrosion-host-agent-windows-amd64.exe"
 
           # Upload checksums
           curl -s -X POST \
@@ -89,43 +89,43 @@ jobs:
         run: |
           CDN_URL="https://cdn.corrosionmgmt.com"
 
-          # Upload Linux binary to /companion/latest/
+          # Upload Linux binary to /host-agent/latest/
           curl -s -X POST \
-            -F "file=@companion-agent/bin/corrosion-companion-linux-amd64" \
-            "${CDN_URL}/companion/latest/corrosion-companion-linux-amd64"
+            -F "file=@companion-agent/bin/corrosion-host-agent-linux-amd64" \
+            "${CDN_URL}/host-agent/latest/corrosion-host-agent-linux-amd64"
 
-          # Upload Windows binary to /companion/latest/
+          # Upload Windows binary to /host-agent/latest/
           curl -s -X POST \
-            -F "file=@companion-agent/bin/corrosion-companion-windows-amd64.exe" \
-            "${CDN_URL}/companion/latest/corrosion-companion-windows-amd64.exe"
+            -F "file=@companion-agent/bin/corrosion-host-agent-windows-amd64.exe" \
+            "${CDN_URL}/host-agent/latest/corrosion-host-agent-windows-amd64.exe"
 
           # Upload checksums
           curl -s -X POST \
             -F "file=@companion-agent/bin/checksums.txt" \
-            "${CDN_URL}/companion/latest/checksums.txt"
+            "${CDN_URL}/host-agent/latest/checksums.txt"
 
           # Also upload versioned copies
           VERSION=${{ steps.version.outputs.VERSION }}
           curl -s -X POST \
-            -F "file=@companion-agent/bin/corrosion-companion-linux-amd64" \
-            "${CDN_URL}/companion/${VERSION}/corrosion-companion-linux-amd64"
+            -F "file=@companion-agent/bin/corrosion-host-agent-linux-amd64" \
+            "${CDN_URL}/host-agent/${VERSION}/corrosion-host-agent-linux-amd64"
           curl -s -X POST \
-            -F "file=@companion-agent/bin/corrosion-companion-windows-amd64.exe" \
-            "${CDN_URL}/companion/${VERSION}/corrosion-companion-windows-amd64.exe"
+            -F "file=@companion-agent/bin/corrosion-host-agent-windows-amd64.exe" \
+            "${CDN_URL}/host-agent/${VERSION}/corrosion-host-agent-windows-amd64.exe"
           curl -s -X POST \
             -F "file=@companion-agent/bin/checksums.txt" \
-            "${CDN_URL}/companion/${VERSION}/checksums.txt"
+            "${CDN_URL}/host-agent/${VERSION}/checksums.txt"
 
-          echo "CDN upload complete: ${CDN_URL}/companion/latest/"
+          echo "CDN upload complete: ${CDN_URL}/host-agent/latest/"
 
       - name: Build Summary
         run: |
-          echo "## Companion Agent Build Complete" >> $GITHUB_STEP_SUMMARY
+          echo "## Corrosion Host Agent Build Complete" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
           echo "**Version:** ${{ steps.version.outputs.VERSION }}" >> $GITHUB_STEP_SUMMARY
           echo "**Commit:** ${GITHUB_SHA:0:7}" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
           echo "### Built Artifacts:" >> $GITHUB_STEP_SUMMARY
-          echo "- Linux AMD64 ($(stat -c%s companion-agent/bin/corrosion-companion-linux-amd64) bytes)" >> $GITHUB_STEP_SUMMARY
-          echo "- Windows AMD64 ($(stat -c%s companion-agent/bin/corrosion-companion-windows-amd64.exe) bytes)" >> $GITHUB_STEP_SUMMARY
+          echo "- Linux AMD64 ($(stat -c%s companion-agent/bin/corrosion-host-agent-linux-amd64) bytes)" >> $GITHUB_STEP_SUMMARY
+          echo "- Windows AMD64 ($(stat -c%s companion-agent/bin/corrosion-host-agent-windows-amd64.exe) bytes)" >> $GITHUB_STEP_SUMMARY
           echo "- SHA256 checksums" >> $GITHUB_STEP_SUMMARY

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 };
+  }
+}

companion-agent/Makefile

@@ -1,7 +1,7 @@
 .PHONY: all build build-linux build-windows clean test run
 
 # Binary names
-BINARY_NAME=corrosion-companion
+BINARY_NAME=corrosion-host-agent
 BINARY_LINUX=$(BINARY_NAME)-linux-amd64
 BINARY_WINDOWS=$(BINARY_NAME)-windows-amd64.exe
 
@@ -66,10 +66,10 @@ run: build-local
 install-service:
 	@echo "Installing systemd service..."
 	@sudo cp $(BUILD_DIR)/$(BINARY_LINUX) /usr/local/bin/$(BINARY_NAME)
-	@sudo cp deployment/corrosion-companion.service /etc/systemd/system/
+	@sudo cp deployment/corrosion-host-agent.service /etc/systemd/system/
 	@sudo systemctl daemon-reload
-	@sudo systemctl enable corrosion-companion
-	@echo "Service installed. Configure /etc/corrosion-companion/.env then start with: sudo systemctl start corrosion-companion"
+	@sudo systemctl enable corrosion-host-agent
+	@echo "Service installed. Configure /etc/corrosion-host-agent/.env then start with: sudo systemctl start corrosion-host-agent"
 
 # Development helpers
 dev: build-local

docker/docker-compose.yml

@@ -8,6 +8,13 @@ services:
       POSTGRES_PASSWORD: ${DB_PASSWORD:-corrosion_dev}
     volumes:
       - pg_data:/var/lib/postgresql/data
+      # Auto-build the schema on a FRESH database. Postgres runs these ONLY when
+      # the data dir is empty (first boot or after a volume reset), so it never
+      # touches an existing volume — it just makes a fresh DB self-heal: the full
+      # schema is applied in order from the sqlx migrations (001..NNN), then the
+      # API's bootstrap seeds the admin. Rebuilds (with the volume kept) are a
+      # no-op here; the data persists. Only `down -v` / volume prune loses data.
+      - ../backend/migrations:/docker-entrypoint-initdb.d:ro
     ports:
       - "8101:5432"
     healthcheck:

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/app-version.d.ts

@@ -0,0 +1 @@
+declare const __APP_VERSION__: string

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/DashboardLayout.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
 /**
  * DashboardLayout — game-aware app shell (Phase C redesign).
- * Replaces the old Tailwind-only sidebar with the DS component set.
- * Preserves: navSections, permission gating, super-admin section, logout, RouterView.
- * Adds: GameSwitcher, Logo, DS NavItem, agent-health footer, topbar w/ search + theme toggle.
+ * Nav is driven by GAME_PROFILES[activeGame].nav — switching the GameSwitcher
+ * visibly changes nav items, labels, and sections per game.
+ * Preserves: permission gating, super-admin section, logout, mobile sidebar,
+ * GameSwitcher, agent-health footer, topbar.
  */
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useServerStore } from '@/stores/server'
 import { useThemeGame } from '@/composables/useThemeGame'
+import { useGameProfile } from '@/config/gameProfiles'
+import type { NavSection, NavItemDef } from '@/config/gameProfiles'
+import { safeDate } from '@/utils/formatters'
 import Logo from '@/components/ds/brand/Logo.vue'
 import Badge from '@/components/ds/core/Badge.vue'
 import StatusDot from '@/components/ds/core/StatusDot.vue'
@@ -33,7 +37,7 @@ const sidebarOpen = ref(false)
 function closeSidebar() { sidebarOpen.value = false }
 
 // ---- App version ----
-const APP_VERSION = '1.0.8'
+const APP_VERSION = __APP_VERSION__
 
 // ---- Game switcher ----
 const GAME_OPTIONS: GameOption[] = [
@@ -53,61 +57,15 @@ function onActiveGame(val: string) {
   setActiveGame(val as ActiveGame)
 }
 
-// ---- Navigation ----
-type NavItemDef = { name: string; path: string; icon: string; permission: string | null }
-type NavSection = { label: string; items: NavItemDef[] }
-
-const navSections: NavSection[] = [
-  {
-    label: '',
-    items: [
-      { name: 'Dashboard', path: '/', icon: 'layout-dashboard', permission: null },
-    ],
-  },
-  {
-    label: 'Server',
-    items: [
-      { name: 'Server', path: '/server', icon: 'server', permission: 'server.view' },
-      { name: 'Console', path: '/console', icon: 'terminal', permission: 'console.view' },
-      { name: 'Players', path: '/players', icon: 'users', permission: 'players.view' },
-      { name: 'Plugins', path: '/plugins', icon: 'puzzle', permission: 'plugins.view' },
-      { name: 'File manager', path: '/files', icon: 'folder-open', permission: 'files.view' },
-    ],
-  },
-  {
-    label: 'Plugin configs',
-    items: [
-      { name: 'Plugin configs', path: '/plugin-configs', icon: 'puzzle', permission: null },
-    ],
-  },
-  {
-    label: 'Operations',
-    items: [
-      { name: 'Wipe manager', path: '/wipes', icon: 'trash-2', permission: 'wipes.view' },
-      { name: 'Maps', path: '/maps', icon: 'map', permission: 'maps.view' },
-      { name: 'Schedules', path: '/schedules', icon: 'calendar-clock', permission: 'schedules.view' },
-    ],
-  },
-  {
-    label: 'Monitoring',
-    items: [
-      { name: 'Chat log', path: '/chat', icon: 'message-square', permission: 'chat.view' },
-      { name: 'Analytics', path: '/analytics', icon: 'bar-chart-3', permission: 'analytics.view' },
-      { name: 'Alerts', path: '/alerts', icon: 'triangle-alert', permission: 'alerts.view' },
-      { name: 'Notifications', path: '/notifications', icon: 'bell', permission: 'notifications.view' },
-    ],
-  },
-  {
-    label: 'Management',
-    items: [
-      { name: 'Team', path: '/team', icon: 'users', permission: null },
-      { name: 'Store', path: '/store/config', icon: 'shopping-cart', permission: 'store.view' },
-      { name: 'Modules', path: '/modules', icon: 'layers', permission: 'modules.view' },
-      { name: 'Changelog', path: '/changelog', icon: 'file-text', permission: 'changelog.view' },
-      { name: 'Settings', path: '/settings', icon: 'settings', permission: 'settings.view' },
-    ],
-  },
-]
+// ---- Navigation — driven by the game profile registry ----
+/**
+ * For 'all', fall back to rust (superset nav). For a specific game, look up
+ * its profile. noUncheckedIndexedAccess-safe: always ?? GAME_PROFILES.rust.
+ */
+const activeNavSections = computed<NavSection[]>(() => {
+  const game = activeGame.value === 'all' ? 'rust' : activeGame.value
+  return (useGameProfile(game)).nav
+})
 
 const adminNavItems = [
   { name: 'Admin home', path: '/admin', icon: 'shield' },
@@ -137,6 +95,8 @@ function hasVisibleItems(section: NavSection): boolean {
 }
 
 // ---- Agent health ----
+const hasAgent = computed(() => server.connection !== null)
+
 const agentTone = computed(() => {
   const cs = server.connection?.connection_status
   if (cs === 'connected') return 'online' as const
@@ -149,18 +109,23 @@ const agentLabel = computed(() => {
   if (cs === 'degraded') return 'Degraded'
   return 'Offline'
 })
-const agentName = computed(() => {
-  const ip = server.connection?.server_ip
-  return ip ?? 'asgard-01'
+const agentName = computed(() => server.connection?.server_ip ?? 'Host agent')
+
+const agentMetaLine = computed(() => {
+  const cs = server.connection?.connection_status
+  let line = cs === 'connected' ? 'Connected' : server.connection?.companion_last_seen
+    ? `Last seen ${safeDate(server.connection.companion_last_seen)}`
+    : 'Awaiting first heartbeat'
+  if (server.stats) {
+    line += ` · ${server.stats.player_count}/${server.stats.max_players} players`
+  }
+  return line
 })
 
 // ---- Topbar ----
 const serverName = computed(() => auth.license?.server_name ?? 'Your servers')
 const userName = computed(() => auth.user?.username ?? '')
 const themeIcon = computed(() => theme.value === 'dark' ? 'sun' : 'moon')
-
-// ---- Import computed from vue (missed above) ----
-import { computed } from 'vue'
 </script>
 
 <template>
@@ -197,20 +162,20 @@ import { computed } from 'vue'
         />
       </div>
 
-      <!-- Navigation -->
+      <!-- Navigation — sections driven by GAME_PROFILES[activeGame].nav -->
       <nav class="side__nav">
-        <template v-for="section in navSections" :key="section.label">
+        <template v-for="section in activeNavSections" :key="section.label">
           <template v-if="hasVisibleItems(section)">
             <div class="side__sec">
               <div v-if="section.label" class="t-eyebrow side__lbl">{{ section.label }}</div>
               <NavItem
                 v-for="item in section.items"
                 v-show="canShowNavItem(item)"
-                :key="item.path"
+                :key="item.route"
                 :icon="item.icon"
-                :label="item.name"
-                :active="isActive(item.path)"
-                @click="navigate(item.path)"
+                :label="item.label"
+                :active="isActive(item.route)"
+                @click="navigate(item.route)"
               />
             </div>
           </template>
@@ -230,18 +195,24 @@ import { computed } from 'vue'
         </div>
       </nav>
 
-      <!-- Agent health footer -->
+      <!-- Host agent footer -->
       <div class="side__foot">
-        <div class="agent">
+        <!-- Connected: real IP + status badge + meta line -->
+        <div v-if="hasAgent" class="agent">
           <div class="agent__row">
             <StatusDot :tone="agentTone" :pulse="agentTone === 'online'" />
             <span class="agent__name">{{ agentName }}</span>
             <Badge :tone="agentTone" size="md">{{ agentLabel }}</Badge>
           </div>
-          <div class="agent__meta">
-            Agent v{{ APP_VERSION }}
-            <template v-if="server.stats"> · {{ server.stats.player_count }}/{{ server.stats.max_players }} players</template>
+          <div class="agent__meta">{{ agentMetaLine }}</div>
+        </div>
+        <!-- Not connected: honest empty state -->
+        <div v-else class="agent agent--empty">
+          <div class="agent__row">
+            <StatusDot tone="offline" />
+            <span class="agent__name agent__name--muted">No host agent connected</span>
           </div>
+          <div class="agent__meta">Install the Corrosion host agent from the Server page</div>
         </div>
         <!-- User / logout row -->
         <div class="side__user">
@@ -419,6 +390,13 @@ body { margin: 0; overflow: hidden; }
   padding-left: 16px;
 }
 
+.agent--empty { opacity: 0.7; }
+
+.agent__name--muted {
+  color: var(--text-tertiary);
+  font-style: italic;
+}
+
 .side__user {
   display: flex;
   align-items: center;

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>
+    <RouterView />
 
     <!-- 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>
-            </div>
+    <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>
-            <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 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>
-            <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 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>
-            <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 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 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,342 @@
+/**
+ * gameProfiles.ts — Source of truth for per-game UI adaptation.
+ *
+ * Every game-specific label, terminology, Steam app ID, management model,
+ * stat field list, AND sidebar nav lives here. The dashboard, server cards,
+ * wipe manager, sidebar, 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.
+ */
+
+// ---------------------------------------------------------------------------
+// Nav structure — drives the per-game sidebar
+// ---------------------------------------------------------------------------
+
+/** A single sidebar nav item. route must be an existing panel route path. */
+export interface NavItemDef {
+  label: string
+  route: string
+  icon: string
+  /** Permission key required to show this item (e.g. 'plugins.view'). Null = always visible. */
+  permission: string | null
+}
+
+/** A labelled section grouping nav items in the sidebar. */
+export interface NavSection {
+  /** Section heading (eyebrow text). Empty string = no heading. */
+  label: string
+  items: NavItemDef[]
+}
+
+// ---------------------------------------------------------------------------
+// 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]
+  /**
+   * Per-game sidebar navigation. Ordered list of sections, each with items.
+   * Items MUST use only existing panel routes (see router/index.ts).
+   * The sidebar renders exactly these sections for the active game.
+   */
+  nav: NavSection[]
+}
+
+// ---------------------------------------------------------------------------
+// Registry
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// Shared nav building blocks — reused across game nav definitions
+// ---------------------------------------------------------------------------
+
+const NAV_DASHBOARD: NavItemDef = { label: 'Dashboard', route: '/', icon: 'layout-dashboard', permission: null }
+const NAV_SERVER: NavItemDef = { label: 'Server', route: '/server', icon: 'server', permission: 'server.view' }
+const NAV_CONSOLE: NavItemDef = { label: 'Console', route: '/console', icon: 'terminal', permission: 'console.view' }
+const NAV_PLAYERS: NavItemDef = { label: 'Players', route: '/players', icon: 'users', permission: 'players.view' }
+const NAV_PLUGINS: NavItemDef = { label: 'Plugins (uMod)', route: '/plugins', icon: 'puzzle', permission: 'plugins.view' }
+const NAV_FILES: NavItemDef = { label: 'File manager', route: '/files', icon: 'folder-open', permission: 'files.view' }
+const NAV_PLUGIN_CONFIGS: NavItemDef = { label: 'Plugin configs', route: '/plugin-configs', icon: 'sliders', permission: null }
+const NAV_SCHEDULES: NavItemDef = { label: 'Schedules', route: '/schedules', icon: 'calendar-clock', permission: 'schedules.view' }
+const NAV_CHAT: NavItemDef = { label: 'Chat log', route: '/chat', icon: 'message-square', permission: 'chat.view' }
+const NAV_ANALYTICS: NavItemDef = { label: 'Analytics', route: '/analytics', icon: 'bar-chart-3', permission: 'analytics.view' }
+const NAV_ALERTS: NavItemDef = { label: 'Alerts', route: '/alerts', icon: 'triangle-alert', permission: 'alerts.view' }
+const NAV_NOTIFICATIONS: NavItemDef = { label: 'Notifications', route: '/notifications', icon: 'bell', permission: 'notifications.view' }
+const NAV_TEAM: NavItemDef = { label: 'Team', route: '/team', icon: 'users', permission: null }
+const NAV_STORE: NavItemDef = { label: 'Store', route: '/store/config', icon: 'shopping-cart', permission: 'store.view' }
+const NAV_MODULES: NavItemDef = { label: 'Modules', route: '/modules', icon: 'layers', permission: 'modules.view' }
+const NAV_CHANGELOG: NavItemDef = { label: 'Changelog', route: '/changelog', icon: 'file-text', permission: 'changelog.view' }
+const NAV_SETTINGS: NavItemDef = { label: 'Settings', route: '/settings', icon: 'settings', permission: 'settings.view' }
+const NAV_MAPS: NavItemDef = { label: 'Maps', route: '/maps', icon: 'map', permission: 'maps.view' }
+
+/** Full Rust / 'all' nav — superset used as fallback. */
+const RUST_NAV: NavSection[] = [
+  { label: '', items: [NAV_DASHBOARD] },
+  {
+    label: 'Server',
+    items: [NAV_SERVER, NAV_CONSOLE, NAV_PLAYERS, NAV_PLUGINS, NAV_FILES],
+  },
+  { label: 'Plugin configs', items: [NAV_PLUGIN_CONFIGS] },
+  {
+    label: 'Operations',
+    items: [
+      { label: 'Wipe', route: '/wipes', icon: 'trash-2', permission: 'wipes.view' },
+      NAV_MAPS,
+      NAV_SCHEDULES,
+    ],
+  },
+  {
+    label: 'Monitoring',
+    items: [NAV_CHAT, NAV_ANALYTICS, NAV_ALERTS, NAV_NOTIFICATIONS],
+  },
+  {
+    label: 'Management',
+    items: [NAV_TEAM, NAV_STORE, NAV_MODULES, NAV_CHANGELOG, NAV_SETTINGS],
+  },
+]
+
+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'],
+    nav: RUST_NAV,
+  },
+
+  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'],
+    nav: [
+      { label: '', items: [NAV_DASHBOARD] },
+      {
+        label: 'Server',
+        // Conan: no uMod/Oxide; has RCON console, maps, players, files
+        items: [NAV_SERVER, NAV_CONSOLE, NAV_PLAYERS, NAV_FILES],
+      },
+      {
+        label: 'Operations',
+        items: [
+          { label: 'Wipe World', route: '/wipes', icon: 'trash-2', permission: 'wipes.view' },
+          NAV_MAPS,
+          NAV_SCHEDULES,
+        ],
+      },
+      {
+        label: 'Monitoring',
+        items: [NAV_CHAT, NAV_ANALYTICS, NAV_ALERTS, NAV_NOTIFICATIONS],
+      },
+      {
+        label: 'Management',
+        items: [NAV_TEAM, NAV_STORE, NAV_MODULES, NAV_CHANGELOG, NAV_SETTINGS],
+      },
+    ],
+  },
+
+  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'],
+    nav: [
+      { label: '', items: [NAV_DASHBOARD] },
+      {
+        label: 'Server',
+        // Soulmask: no uMod/Oxide; has RCON+GM console, players, files
+        items: [NAV_SERVER, NAV_CONSOLE, NAV_PLAYERS, NAV_FILES],
+      },
+      {
+        label: 'Operations',
+        items: [
+          { label: 'World Reset', route: '/wipes', icon: 'trash-2', permission: 'wipes.view' },
+          NAV_SCHEDULES,
+        ],
+      },
+      {
+        label: 'Monitoring',
+        items: [NAV_CHAT, NAV_ANALYTICS, NAV_ALERTS],
+      },
+      {
+        label: 'Management',
+        items: [NAV_TEAM, NAV_STORE, NAV_MODULES, NAV_CHANGELOG, NAV_SETTINGS],
+      },
+    ],
+  },
+
+  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'],
+    nav: [
+      { label: '', items: [NAV_DASHBOARD] },
+      {
+        label: 'Server',
+        // Dune: no RCON (uses RabbitMQ); label console "Broadcast"; no maps route; no plugins
+        items: [
+          NAV_SERVER,
+          { label: 'Broadcast', route: '/console', icon: 'radio', permission: 'console.view' },
+          NAV_PLAYERS,
+          NAV_FILES,
+        ],
+      },
+      {
+        label: 'Operations',
+        items: [
+          { label: 'Deep Desert', route: '/wipes', icon: 'wind', permission: 'wipes.view' },
+          NAV_SCHEDULES,
+        ],
+      },
+      {
+        label: 'Monitoring',
+        items: [NAV_ANALYTICS, NAV_ALERTS],
+      },
+      {
+        label: 'Management',
+        items: [NAV_TEAM, NAV_STORE, NAV_CHANGELOG, NAV_SETTINGS],
+      },
+    ],
+  },
+} 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,97 @@
 <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 { useWipeStore } from '@/stores/wipe'
+import { useApi } from '@/composables/useApi'
+import { useWebSocket, type WebSocketMessage } from '@/composables/useWebSocket'
+import { useGameProfile } from '@/config/gameProfiles'
 import { useThemeGame } from '@/composables/useThemeGame'
 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 api = useApi()
 const { activeGame } = useThemeGame()
 
-// ---- 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)
-}
-
-const viewItems = [
-  { value: 'fleet', label: 'Fleet', icon: 'layout-grid' },
-  { value: 'solo', label: 'Solo', icon: 'square-dashed' },
-]
-
-// ---- 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 GAME_LABEL: Record<string, string> = { rust: 'Rust', dune: 'Dune', conan: 'Conan Exiles', soulmask: 'Soulmask' }
-
-const inGame = computed<MockServer[]>(() =>
-  activeGame.value === 'all'
-    ? MOCK_SERVERS
-    : MOCK_SERVERS.filter((s) => s.game === (activeGame.value as GameKey)),
-)
-
-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'
-  })
+// Profile follows the GameSwitcher selection. 'all' falls back to rust (neutral house skin).
+// When the backend adds a `game` field on licenses, swap activeGame for server.config?.game.
+const profile = computed(() => {
+  const game = activeGame.value === 'all' ? 'rust' : activeGame.value
+  return useGameProfile(game)
 })
 
-// ---- 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))
-    : '—',
-)
+// ---------------------------------------------------------------------------
+// Derived server state — all real, no fallbacks to fabricated values
+// ---------------------------------------------------------------------------
 
-const scopeLabel = computed(() =>
-  activeGame.value === 'all'
-    ? 'Fleet overview'
-    : `${GAME_LABEL[activeGame.value as string] ?? activeGame.value} fleet`,
-)
+const hasConnection = computed(() => server.connection !== null)
+const isConnected = computed(() => server.connection?.connection_status === 'connected')
 
-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 soloName = computed(() => server.config?.server_name ?? null)
+
+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)
+
+// 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`
 })
 
-const chartSubtitle = computed(() =>
-  activeGame.value === 'all'
-    ? 'All servers · last 24 hours'
-    : `${GAME_LABEL[activeGame.value as string] ?? activeGame.value} servers · last 24 hours`,
-)
+// CPU: not in ServerStats today. Show null — never fabricate.
+const soloCpu = computed(() => null as number | null)
 
-// ---- 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 +101,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 navWipes() { router.push('/wipes') }
+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>
-      </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"
-              >
-                <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>
-          </Panel>
+          <div class="t-eyebrow">Dashboard</div>
+          <h1 class="page__title">Server cockpit</h1>
         </div>
       </div>
+      <Panel>
+        <EmptyState
+          icon="server"
+          title="No server connected"
+          description="Install the Corrosion host agent on your host machine to begin managing your server from Corrosion."
+        >
+          <template #action>
+            <Button icon="server" @click="navServer">Set up server</Button>
+          </template>
+        </EmptyState>
+      </Panel>
     </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] ?? 'Players') + ' 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"
-                :key="i"
-                :time="f.time"
-                :level="f.level"
-                :who="f.who"
-              >{{ f.msg }}</ConsoleLine>
+              <template v-if="consoleLines.length > 0">
+                <ConsoleLineDS
+                  v-for="(line, i) in consoleLines"
+                  :key="i"
+                  :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 +384,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 -->
-          <Panel title="Resources" subtitle="Companion agent telemetry">
+
+          <!-- Resources — real stats from agent; null = '—' -->
+          <Panel title="Resources" subtitle="Host 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 host 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 -->
-          <Panel title="Next wipe">
-            <div class="solo-wipe">
+          <!-- Next wipe/reset — title follows game terminology -->
+          <Panel :title="'Next ' + profile.terminology.reset.toLowerCase()">
+            <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 ' + profile.terminology.reset.toLowerCase() + ' scheduled'"
+              :description="'Configure automatic ' + profile.terminology.reset.toLowerCase() + 's 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 +487,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 +502,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 +526,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/PluginsView.vue

@@ -485,7 +485,7 @@ onMounted(() => {
       </Panel>
 
       <Alert tone="info">
-        The plugin will be registered in your plugin list immediately. Your companion agent must be connected
+        The plugin will be registered in your plugin list immediately. Your host agent must be connected
         for the file to be delivered to the game server. If the agent is offline, re-upload once it reconnects.
       </Alert>
     </div>

frontend/src/views/admin/ServerView.vue

@@ -3,6 +3,8 @@ import { ref, computed, onMounted } from 'vue'
 import { useServerStore } from '@/stores/server'
 import { useAuthStore } from '@/stores/auth'
 import { useToastStore } from '@/stores/toast'
+import { useThemeGame } from '@/composables/useThemeGame'
+import { useGameProfile } from '@/config/gameProfiles'
 import type { DeploymentConfig, DeploymentStatus } from '@/types'
 import { useWebSocket } from '@/composables/useWebSocket'
 import Panel from '@/components/ds/data/Panel.vue'
@@ -11,6 +13,7 @@ import Badge from '@/components/ds/core/Badge.vue'
 import StatusDot from '@/components/ds/core/StatusDot.vue'
 import Icon from '@/components/ds/core/Icon.vue'
 import Alert from '@/components/ds/feedback/Alert.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 import Input from '@/components/ds/forms/Input.vue'
 import Switch from '@/components/ds/forms/Switch.vue'
 import Tabs from '@/components/ds/navigation/Tabs.vue'
@@ -18,6 +21,39 @@ import Tabs from '@/components/ds/navigation/Tabs.vue'
 const server = useServerStore()
 const auth = useAuthStore()
 const toast = useToastStore()
+const { activeGame } = useThemeGame()
+
+// Profile follows the GameSwitcher. 'all' defaults to rust (neutral house skin).
+const profile = computed(() => {
+  const game = activeGame.value === 'all' ? 'rust' : activeGame.value
+  return useGameProfile(game)
+})
+
+// Game-specific derived flags
+const isRust = computed(() => profile.value.mods === 'umod')
+const hasPluginSystem = computed(() => profile.value.mods === 'umod')
+const isDockerManaged = computed(() => profile.value.managementModel === 'docker-compose')
+
+// Management model human label for the identity badge
+const managementModelLabel = computed(() => {
+  const m = profile.value.managementModel
+  const c = profile.value.console
+  if (m === 'docker-compose') {
+    return profile.value.clustering === 'battlegroup' ? 'Docker · BattleGroup' : 'Docker · Compose'
+  }
+  if (c === 'rcon+ingame') return 'Process · RCON + In-game'
+  if (c === 'rcon+gm') return 'Process · RCON + GM'
+  return 'Process · RCON'
+})
+
+// Clustering section label per game
+const clusterLabel = computed(() => {
+  const cl = profile.value.clustering
+  if (cl === 'battlegroup') return 'BattleGroups & Sietches'
+  if (cl === 'main-client') return 'Cluster'
+  if (cl === 'character-transfer') return 'Clans & Character Transfer'
+  return ''
+})
 
 const editMode = ref(false)
 const saving = ref(false)
@@ -64,22 +100,22 @@ const agentLastSeenLabel = computed(() => {
 const licenseKey = computed(() => auth.license?.license_key || 'YOUR-LICENSE-KEY')
 
 const linuxCommands = computed(() => `# Download the agent
-curl -LO https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-linux-amd64
-chmod +x corrosion-companion-linux-amd64
+curl -LO https://cdn.corrosionmgmt.com/host-agent/latest/corrosion-host-agent-linux-amd64
+chmod +x corrosion-host-agent-linux-amd64
 
 # Start with your license key
 export LICENSE_ID="${licenseKey.value}"
 export NATS_URL="nats://nats.corrosionmgmt.com:4222"
-./corrosion-companion-linux-amd64`)
+./corrosion-host-agent-linux-amd64`)
 
 const windowsCommands = computed(() => `# Requires PowerShell (not Command Prompt)
 # Download the agent
-Invoke-WebRequest -Uri "https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-windows-amd64.exe" -OutFile "corrosion-companion-windows-amd64.exe"
+Invoke-WebRequest -Uri "https://cdn.corrosionmgmt.com/host-agent/latest/corrosion-host-agent-windows-amd64.exe" -OutFile "corrosion-host-agent-windows-amd64.exe"
 
 # Start with your license key
 $env:LICENSE_ID="${licenseKey.value}"
 $env:NATS_URL="nats://nats.corrosionmgmt.com:4222"
-.\\corrosion-companion-windows-amd64.exe`)
+.\\corrosion-host-agent-windows-amd64.exe`)
 
 async function copySetupCommands() {
   try {
@@ -278,17 +314,18 @@ onMounted(async () => {
 
 <template>
   <div class="sv">
-    <!-- Page head -->
+    <!-- Page head — game-aware identity -->
     <div class="sv__head">
       <div class="sv__head-id">
         <div class="sv__head-chip">
           <Icon name="server" :size="20" :stroke-width="2" />
         </div>
         <div>
-          <div class="t-eyebrow">Server management</div>
+          <div class="t-eyebrow">{{ profile.label }} · Server management</div>
           <h1 class="sv__title">Server</h1>
         </div>
       </div>
+      <Badge tone="neutral" :mono="true" class="sv__model-badge">{{ managementModelLabel }}</Badge>
     </div>
 
     <!-- Connection -->
@@ -350,8 +387,8 @@ onMounted(async () => {
       </div>
     </Panel>
 
-    <!-- Companion agent -->
-    <Panel title="Companion agent" subtitle="Bare-metal server management binary">
+    <!-- Host agent -->
+    <Panel title="Host agent" subtitle="Bare-metal server management binary">
       <template #actions>
         <Badge :tone="isAgentConnected ? 'online' : 'offline'" :dot="true" :pulse="isAgentConnected">
           {{ isAgentConnected ? 'Active' : 'Inactive' }}
@@ -380,20 +417,20 @@ onMounted(async () => {
       <!-- Download -->
       <div class="sv__section-head">
         <Icon name="download" :size="14" />
-        <span>Download companion agent</span>
+        <span>Download host agent</span>
       </div>
       <div class="sv__downloads sv__mb">
         <a
-          href="https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-linux-amd64"
-          download="corrosion-companion-linux-amd64"
+          href="https://cdn.corrosionmgmt.com/host-agent/latest/corrosion-host-agent-linux-amd64"
+          download="corrosion-host-agent-linux-amd64"
           class="sv__dl-link"
         >
           <Icon name="download" :size="15" />
           Linux (amd64)
         </a>
         <a
-          href="https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-windows-amd64.exe"
-          download="corrosion-companion-windows-amd64.exe"
+          href="https://cdn.corrosionmgmt.com/host-agent/latest/corrosion-host-agent-windows-amd64.exe"
+          download="corrosion-host-agent-windows-amd64.exe"
           class="sv__dl-link"
         >
           <Icon name="download" :size="15" />
@@ -424,28 +461,28 @@ onMounted(async () => {
       <!-- Linux commands -->
       <div v-if="setupTab === 'linux'" class="sv__codeblock">
         <p class="sv__cmt"># Download the agent</p>
-        <p>curl -LO https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-linux-amd64</p>
-        <p>chmod +x corrosion-companion-linux-amd64</p>
+        <p>curl -LO https://cdn.corrosionmgmt.com/host-agent/latest/corrosion-host-agent-linux-amd64</p>
+        <p>chmod +x corrosion-host-agent-linux-amd64</p>
         <p class="sv__cmt sv__mt">&#x23; Start with your license key</p>
         <p>export LICENSE_ID=<span class="sv__accent">"{{ licenseKey }}"</span></p>
         <p>export NATS_URL=<span class="sv__accent">"nats://nats.corrosionmgmt.com:4222"</span></p>
-        <p>./corrosion-companion-linux-amd64</p>
+        <p>./corrosion-host-agent-linux-amd64</p>
       </div>
 
       <!-- Windows commands -->
       <div v-if="setupTab === 'windows'" class="sv__codeblock">
         <p class="sv__cmt"># Requires PowerShell (not Command Prompt)</p>
         <p class="sv__cmt"># Download the agent</p>
-        <p>Invoke-WebRequest -Uri <span class="sv__accent">"https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-windows-amd64.exe"</span> -OutFile <span class="sv__accent">"corrosion-companion-windows-amd64.exe"</span></p>
+        <p>Invoke-WebRequest -Uri <span class="sv__accent">"https://cdn.corrosionmgmt.com/host-agent/latest/corrosion-host-agent-windows-amd64.exe"</span> -OutFile <span class="sv__accent">"corrosion-host-agent-windows-amd64.exe"</span></p>
         <p class="sv__cmt sv__mt">&#x23; Start with your license key</p>
         <p>$env:LICENSE_ID=<span class="sv__accent">"{{ licenseKey }}"</span></p>
         <p>$env:NATS_URL=<span class="sv__accent">"nats://nats.corrosionmgmt.com:4222"</span></p>
-        <p>.\corrosion-companion-windows-amd64.exe</p>
+        <p>.\corrosion-host-agent-windows-amd64.exe</p>
       </div>
     </Panel>
 
-    <!-- Deploy Rust Server -->
-    <Panel title="Deploy Rust server" subtitle="One-click: SteamCMD, download, configure, start">
+    <!-- Deploy Server — Rust only (SteamCMD path). Other games use docker-compose or external tooling. -->
+    <Panel v-if="isRust" title="Deploy Rust server" subtitle="One-click: SteamCMD, download, configure, start">
       <template #title-append>
         <Icon name="rocket" :size="15" />
       </template>
@@ -560,8 +597,28 @@ onMounted(async () => {
       </div>
     </Panel>
 
-    <!-- Install Oxide / uMod -->
-    <Panel title="Install Oxide / uMod" subtitle="Required for all plugins including CorrosionCompanion">
+    <!-- Non-Rust: Docker-managed server note -->
+    <Panel
+      v-if="isDockerManaged"
+      :title="profile.label + ' server deployment'"
+      subtitle="Managed via Docker Compose"
+    >
+      <template #title-append>
+        <Icon name="box" :size="15" />
+      </template>
+      <EmptyState
+        icon="box"
+        title="Docker-managed deployment"
+        :description="profile.label + ' servers are managed via Docker Compose. Connect the host agent on your Docker host to enable lifecycle management.'"
+      >
+        <template #action>
+          <Badge tone="info">Docker · Compose</Badge>
+        </template>
+      </EmptyState>
+    </Panel>
+
+    <!-- Install Oxide / uMod — Rust only -->
+    <Panel v-if="hasPluginSystem" title="Install Oxide / uMod" subtitle="Required for all plugins including CorrosionCompanion">
       <template #title-append>
         <Icon name="puzzle" :size="15" />
       </template>
@@ -611,6 +668,79 @@ onMounted(async () => {
       </div>
     </Panel>
 
+    <!-- Workshop Mods info — Conan / Soulmask (Steam Workshop, no install step needed) -->
+    <Panel
+      v-else-if="profile.mods === 'workshop'"
+      :title="(profile.terminology.mods ?? 'Workshop Mods')"
+      :subtitle="profile.label + ' uses Steam Workshop — no manual install step required'"
+    >
+      <template #title-append>
+        <Icon name="layers" :size="15" />
+      </template>
+      <EmptyState
+        icon="layers"
+        :title="profile.label + ' mod management'"
+        :description="profile.label + ' loads mods directly from Steam Workshop. Manage your mod list in server config — no Corrosion install step needed.'"
+      />
+    </Panel>
+
+    <!-- Conan Exiles special concepts (Clans / Thralls / Purge) -->
+    <Panel
+      v-if="profile.accent === 'conan'"
+      title="Conan Exiles concepts"
+      subtitle="Key admin mechanics for Conan Exiles servers"
+    >
+      <div class="sv__concept-grid">
+        <div class="sv__concept">
+          <Icon name="users" :size="16" />
+          <div>
+            <div class="sv__concept-label">Clans</div>
+            <div class="sv__concept-desc">Player factions. Clan management via in-game admin panel or RCON.</div>
+          </div>
+        </div>
+        <div class="sv__concept">
+          <Icon name="zap" :size="16" />
+          <div>
+            <div class="sv__concept-label">Thralls &amp; Avatars</div>
+            <div class="sv__concept-desc">Server-controlled NPCs and deity summons. Purge cycle managed via server settings.</div>
+          </div>
+        </div>
+        <div class="sv__concept">
+          <Icon name="shield" :size="16" />
+          <div>
+            <div class="sv__concept-label">Purge</div>
+            <div class="sv__concept-desc">NPC raid events targeting player bases. Enable / tune via server config.</div>
+          </div>
+        </div>
+      </div>
+    </Panel>
+
+    <!-- Soulmask clustering section -->
+    <Panel
+      v-if="profile.clustering === 'main-client'"
+      :title="clusterLabel"
+      subtitle="Main-client cluster topology for Soulmask"
+    >
+      <EmptyState
+        icon="network"
+        title="Cluster management coming soon"
+        :description="'Connect a ' + profile.label + ' host to manage the main-client cluster from this panel. Cluster configuration requires the host agent.'"
+      />
+    </Panel>
+
+    <!-- Dune BattleGroup / Sietches section -->
+    <Panel
+      v-if="profile.clustering === 'battlegroup'"
+      title="BattleGroups &amp; Sietches"
+      subtitle="Dune: Awakening server cluster topology"
+    >
+      <EmptyState
+        icon="map"
+        title="Sietch management requires a connected Dune host"
+        description="Connect the host agent on your Dune: Awakening Docker host to manage BattleGroups and Sietches from this panel."
+      />
+    </Panel>
+
     <!-- Configuration -->
     <Panel title="Configuration">
       <template #actions>
@@ -708,8 +838,13 @@ onMounted(async () => {
         </div>
         <div class="sv__toggle-row">
           <div class="sv__toggle-body">
-            <div class="sv__toggle-label">Auto-update on force wipe</div>
-            <div class="sv__toggle-sub">Update when Facepunch pushes</div>
+            <div class="sv__toggle-label">
+              <!-- Rust: "force wipe" is a Facepunch concept. Others: plain "auto-update" -->
+              {{ isRust ? 'Auto-update on force wipe' : 'Auto-update on patch' }}
+            </div>
+            <div class="sv__toggle-sub">
+              {{ isRust ? 'Update when Facepunch pushes' : 'Update when the developer pushes a patch' }}
+            </div>
           </div>
           <Switch
             :model-value="server.config?.auto_update_on_force_wipe ?? false"
@@ -717,7 +852,8 @@ onMounted(async () => {
             @update:model-value="toggleAutomation('auto_update_on_force_wipe')"
           />
         </div>
-        <div class="sv__toggle-row">
+        <!-- Rust-only: force wipe eligibility is a Facepunch concept -->
+        <div v-if="isRust" class="sv__toggle-row">
           <div class="sv__toggle-body">
             <div class="sv__toggle-label">Force wipe eligible</div>
             <div class="sv__toggle-sub">Server participates in force wipes</div>
@@ -848,4 +984,19 @@ onMounted(async () => {
 .sv__toggle-row:first-child { padding-top: 0; }
 .sv__toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
 .sv__toggle-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+
+/* Management model badge in page head */
+.sv__model-badge { align-self: center; }
+
+/* Game concept cards (Conan Exiles special features) */
+.sv__concept-grid { display: flex; flex-direction: column; gap: 14px; }
+.sv__concept {
+  display: flex; align-items: flex-start; gap: 12px;
+  padding: 12px 14px;
+  background: var(--surface-raised); border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  color: var(--accent);
+}
+.sv__concept-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
+.sv__concept-desc { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.5; }
 </style>

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/auth/SetupWizardView.vue

@@ -35,7 +35,7 @@ function syncPorts() {
 }
 
 const connectionTypes = [
-  { value: 'bare_metal', label: 'Bare metal / VPS', desc: 'Direct connection via Companion Agent' },
+  { value: 'bare_metal', label: 'Bare metal / VPS', desc: 'Direct connection via Corrosion host agent' },
   { value: 'amp', label: 'AMP (CubeCoders)', desc: 'Connect through AMP panel API' },
   { value: 'pterodactyl', label: 'Pterodactyl', desc: 'Connect through Pterodactyl panel API' },
 ]
@@ -183,7 +183,7 @@ async function completeSetup() {
         </form>
       </div>
 
-      <!-- Step 2: Companion agent install -->
+      <!-- Step 2: Corrosion host agent install -->
       <div v-if="step === 2" class="setup-card">
         <div class="setup-card__head setup-card__head--center">
           <div class="setup-icon">
@@ -191,12 +191,12 @@ async function completeSetup() {
               <path d="M5 12.55a11 11 0 0 1 14.08 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01" />
             </svg>
           </div>
-          <h1 class="setup-card__title">Install the Companion Agent</h1>
+          <h1 class="setup-card__title">Install the Corrosion host agent</h1>
           <p class="setup-card__sub">The agent runs on your server and connects to Corrosion — no inbound ports required.</p>
         </div>
 
         <div class="setup-code">
-          <p class="setup-code__comment"># Download and install the Companion Agent</p>
+          <p class="setup-code__comment"># Download and install the Corrosion host agent</p>
           <p class="setup-code__cmd">curl -sSL https://get.corrosionmgmt.com | sh</p>
           <p class="setup-code__comment setup-code__comment--mt"># Start the agent with your license key</p>
           <p class="setup-code__cmd">corrosion-agent start --key {{ auth.license?.license_key ?? 'YOUR-LICENSE-KEY' }}</p>

frontend/src/views/marketing/EarlyAccessView.vue

@@ -1,16 +1,39 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { Shield, Users, Star, MessageCircle, Clock, ChevronRight, Check, Zap, Terminal, RefreshCw, LayoutDashboard } from 'lucide-vue-next'
+/**
+ * EarlyAccess signup page.
+ *
+ * Backend endpoint: POST /api/early-access
+ * The early_access_signups entity exists but no NestJS controller/module exposes it yet.
+ * TODO: Create backend-nest/src/modules/early-access/ with a @Public() POST /early-access
+ * controller that accepts { email, name?, game_interest? } and writes to early_access_signups.
+ * The server_count column on the entity is varchar(10) — map game_interest to it or add a
+ * migration adding a game_interest column.
+ */
+import { ref, onMounted, onUnmounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import Icon from '@/components/ds/core/Icon.vue'
+import CorrosionMark from '@/components/brand/CorrosionMark.vue'
 
-// ---------- Email capture ----------
+const panelUrl = import.meta.env.VITE_PANEL_URL ?? ''
+
+// Form state
 const email = ref('')
-const serverCount = ref('')
+const name = ref('')
+const gameInterest = ref('')
 const submitting = ref(false)
 const submitted = ref(false)
 const errorMsg = ref('')
 
-async function handleSubmit() {
-  if (!email.value || !serverCount.value) return
+const GAME_OPTIONS = [
+  { value: 'rust', label: 'Rust' },
+  { value: 'dune', label: 'Dune: Awakening' },
+  { value: 'conan', label: 'Conan Exiles' },
+  { value: 'soulmask', label: 'Soulmask' },
+  { value: 'multiple', label: 'Multiple games' },
+]
+
+async function handleSubmit(): Promise<void> {
+  if (!email.value) return
   errorMsg.value = ''
   submitting.value = true
   try {
@@ -19,12 +42,13 @@ async function handleSubmit() {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         email: email.value,
-        server_count: serverCount.value,
+        // server_count column stores game interest (varchar 10) — no dedicated name column in DB
+        server_count: gameInterest.value || 'not specified',
       }),
     })
     if (!res.ok) {
       const data = await res.json().catch(() => ({ message: 'Something went wrong' }))
-      throw new Error(data.message || `HTTP ${res.status}`)
+      throw new Error((data as { message?: string }).message ?? `HTTP ${res.status}`)
     }
     submitted.value = true
   } catch (err: unknown) {
@@ -34,291 +58,393 @@ async function handleSubmit() {
   }
 }
 
-// ---------- Demo panels ----------
-const panels = [
-  { label: 'Dashboard', icon: LayoutDashboard, desc: 'Server overview, player count, uptime, and alerts at a glance.' },
-  { label: 'Wipe Scheduler', icon: RefreshCw, desc: 'Visual wipe timeline with pre-wipe backup, map rotation, and health verification.' },
-  { label: 'Plugin Config', icon: Zap, desc: 'Edit plugin settings from your browser. No JSON. No SFTP.' },
-  { label: 'Player Management', icon: Users, desc: 'Online players, session tracking, kick/ban controls, and playtime history.' },
-  { label: 'Console', icon: Terminal, desc: 'Real-time RCON console with timestamped, color-coded output.' },
-]
+// Scroll-reveal
+let io: IntersectionObserver | null = null
 
-// ---------- Roadmap voting ----------
-interface VoteItem {
-  id: string
-  label: string
-  votes: number
-  voted: boolean
+function initReveal(): void {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+  io = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((e) => {
+        if (e.isIntersecting) {
+          e.target.classList.add('in')
+          io?.unobserve(e.target)
+        }
+      })
+    },
+    { threshold: 0.1 },
+  )
+  document.querySelectorAll('.reveal').forEach((el) => io?.observe(el))
 }
 
-const voteItems = ref<VoteItem[]>([
-  { id: 'analytics', label: 'Analytics & Retention Insights', votes: 47, voted: false },
-  { id: 'webstore', label: 'Integrated Webstore', votes: 38, voted: false },
-  { id: 'modules', label: 'Module Marketplace', votes: 31, voted: false },
-  { id: 'discord', label: 'Discord Bot Integration', votes: 28, voted: false },
-  { id: 'hosting', label: 'Hosting Provider API', votes: 19, voted: false },
-])
-
-function vote(item: VoteItem) {
-  if (item.voted) return
-  item.votes++
-  item.voted = true
-}
-
-const totalVotes = computed(() => voteItems.value.reduce((sum, i) => sum + i.votes, 0))
+onMounted(() => { initReveal() })
+onUnmounted(() => { io?.disconnect() })
 </script>
 
 <template>
-  <div>
-    <!-- Hero -->
-    <section class="relative overflow-hidden">
-      <div class="max-w-4xl mx-auto px-6 pt-20 pb-16 text-center">
-        <span class="inline-block px-4 py-1.5 bg-green-500/10 border border-green-500/20 rounded-full text-green-400 text-sm font-medium mb-6">
-          Early Access Is Now Open
-        </span>
-        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4 tracking-tight">
-          Wipe Night Just Got<br />
-          <span class="text-oxide-500">A Lot Easier.</span>
-        </h1>
-        <p class="text-lg text-neutral-400 max-w-xl mx-auto mb-10">
-          Corrosion is live in limited early access. Install once. Automate everything. Never SSH again.
-        </p>
-        <div class="flex items-center justify-center gap-4">
-          <a href="#join" class="px-8 py-3.5 bg-oxide-600 hover:bg-oxide-700 text-white font-semibold rounded-lg transition-colors">
-            Claim Your Spot
-          </a>
-          <a href="#demo" class="px-8 py-3.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-200 font-semibold rounded-lg border border-neutral-700 transition-colors">
-            View Demo Architecture
-          </a>
-        </div>
+  <!-- PAGE HEADER -->
+  <section class="hero" style="padding-bottom:0; border-bottom:none;">
+    <div class="hero__atmo" />
+    <div class="hero__grid" />
+    <div class="hero__grain" />
+    <div class="wrap hero__in" style="padding-bottom:52px;">
+      <div class="hero__mark">
+        <CorrosionMark :size="56" />
       </div>
-      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-oxide-500/8 rounded-full blur-3xl pointer-events-none" />
-    </section>
+      <span class="eyebrow">Early access</span>
+      <h1 style="font-size:var(--text-5xl)">
+        Take control of your servers.
+        <span class="accent">Starting now.</span>
+      </h1>
+      <p class="hero__sub">
+        Corrosion is in early access. Join the list to be notified when your access opens.
+        No spam. No fabricated scarcity.
+      </p>
+    </div>
+  </section>
 
-    <!-- Early Access Live Banner -->
-    <section class="py-12 border-t border-neutral-800">
-      <div class="max-w-3xl mx-auto px-6 text-center">
-        <div class="inline-flex items-center gap-3 px-6 py-4 bg-green-500/10 border border-green-500/20 rounded-2xl">
-          <div class="w-2.5 h-2.5 bg-green-400 rounded-full animate-pulse shrink-0" />
-          <p class="text-green-300 font-semibold text-lg">Early Access is now live — founding admin spots are limited.</p>
-        </div>
-        <p class="text-neutral-500 text-sm mt-4">
-          Sign up below to lock in founding pricing before spots run out.
+  <!-- WHAT YOU GET -->
+  <section class="sec" id="access">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">What early access means</span>
+        <h2 class="title">Real access to a real platform.</h2>
+        <p class="lead">
+          Early access is not a waitlist gimmick. It is how we manage onboarding while the
+          platform stabilizes. You get the full Corrosion control plane — one tier at a time
+          as capacity opens.
         </p>
       </div>
-    </section>
 
-    <!-- What Early Access Means -->
-    <section class="py-16 bg-neutral-900/50 border-t border-neutral-800">
-      <div class="max-w-4xl mx-auto px-6">
-        <h2 class="text-2xl font-bold text-neutral-100 mb-8 text-center">What Early Access Means</h2>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-xl text-center">
-            <Shield class="w-6 h-6 text-oxide-500 mx-auto mb-3" />
-            <p class="text-sm font-medium text-neutral-200">Limited Founding Licenses</p>
-            <p class="text-xs text-neutral-500 mt-1">25–50 spots</p>
-          </div>
-          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-xl text-center">
-            <MessageCircle class="w-6 h-6 text-oxide-500 mx-auto mb-3" />
-            <p class="text-sm font-medium text-neutral-200">Direct Founder Discord</p>
-            <p class="text-xs text-neutral-500 mt-1">Private channel access</p>
-          </div>
-          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-xl text-center">
-            <Star class="w-6 h-6 text-oxide-500 mx-auto mb-3" />
-            <p class="text-sm font-medium text-neutral-200">Influence the Roadmap</p>
-            <p class="text-xs text-neutral-500 mt-1">Vote on features</p>
-          </div>
-          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-xl text-center">
-            <Clock class="w-6 h-6 text-oxide-500 mx-auto mb-3" />
-            <p class="text-sm font-medium text-neutral-200">Lifetime Pricing Lock</p>
-            <p class="text-xs text-neutral-500 mt-1">Never pay more</p>
-          </div>
+      <div class="infra reveal">
+        <div class="icard">
+          <div class="icard__ic"><Icon name="cpu" :size="16" /></div>
+          <b>Full control plane</b>
+          <p>Agent, panel, wipes, console, plugins, schedules — all of it. Not a trimmed preview.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="shield" :size="16" /></div>
+          <b>Pricing you can lock in</b>
+          <p>Early access pricing is the live pricing. No bait-and-switch after launch.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="message-square" :size="16" /></div>
+          <b>Direct feedback channel</b>
+          <p>Early access operators have a direct line for platform bug reports and feature input.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="box" :size="16" /></div>
+          <b>Rust-first</b>
+          <p>Rust support is complete. Dune, Conan, and Soulmask are in active development.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="users" :size="16" /></div>
+          <b>RBAC team access</b>
+          <p>Add your admin team from day one. Fine-grained permission roles are built in.</p>
         </div>
       </div>
-    </section>
+    </div>
+  </section>
 
-    <!-- Email Capture -->
-    <section id="join" class="py-16 border-t border-neutral-800">
-      <div class="max-w-md mx-auto px-6">
-        <h2 class="text-2xl font-bold text-neutral-100 mb-2 text-center">Claim Your Founding Spot</h2>
-        <p class="text-neutral-400 text-center mb-8">Early access is open now. Spots are limited — lock in founding pricing today.</p>
-
-        <div v-if="submitted" class="bg-green-500/10 border border-green-500/20 rounded-xl p-8 text-center">
-          <Check class="w-10 h-10 text-green-400 mx-auto mb-3" />
-          <h3 class="text-lg font-semibold text-neutral-100 mb-1">You're in.</h3>
-          <p class="text-sm text-neutral-400">We'll be in touch shortly with your access details.</p>
+  <!-- SIGNUP FORM -->
+  <section class="sec" id="join">
+    <div class="wrap">
+      <div class="ea-form-wrap reveal">
+        <!-- Success state -->
+        <div v-if="submitted" class="ea-success">
+          <div class="ea-success__ic">
+            <Icon name="check" :size="28" />
+          </div>
+          <h2 class="ea-success__title">You are on the list.</h2>
+          <p class="ea-success__body">
+            We will reach out when your access slot opens. In the meantime, read the
+            <RouterLink :to="{ name: 'how-it-works' }" class="ea-link">how it works</RouterLink>
+            guide or review the
+            <RouterLink :to="{ name: 'faq' }" class="ea-link">FAQ</RouterLink>.
+          </p>
+          <RouterLink class="btn btn--ghost" :to="{ name: 'landing' }">
+            Back to home
+          </RouterLink>
         </div>
 
-        <form v-else @submit.prevent="handleSubmit" class="space-y-4">
-          <div v-if="errorMsg" class="p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm">
+        <!-- Form state -->
+        <form v-else @submit.prevent="handleSubmit" class="ea-form">
+          <div class="ea-form__head">
+            <h2>Join the early access list</h2>
+            <p>Required: email address. Everything else is optional but helps us prioritise.</p>
+          </div>
+
+          <!-- Error banner -->
+          <div v-if="errorMsg" class="ea-error">
+            <Icon name="triangle-alert" :size="15" />
             {{ errorMsg }}
           </div>
-          <div>
-            <label for="ea-email" class="block text-sm font-medium text-neutral-400 mb-1.5">Email</label>
+
+          <!-- Email (required) -->
+          <div class="ea-field">
+            <label class="ea-field__label" for="ea-email">
+              Email address <span class="ea-field__req">*</span>
+            </label>
             <input
               id="ea-email"
               v-model="email"
               type="email"
               required
+              autocomplete="email"
               placeholder="admin@example.com"
-              class="w-full px-3 py-2.5 bg-neutral-900 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+              class="ea-input"
             />
           </div>
-          <div>
-            <label for="ea-servers" class="block text-sm font-medium text-neutral-400 mb-1.5">How many servers do you run?</label>
-            <div class="grid grid-cols-3 gap-3">
+
+          <!-- Name (optional) -->
+          <div class="ea-field">
+            <label class="ea-field__label" for="ea-name">
+              Your name <span class="ea-field__optional">(optional)</span>
+            </label>
+            <input
+              id="ea-name"
+              v-model="name"
+              type="text"
+              autocomplete="name"
+              placeholder="Server admin name or handle"
+              class="ea-input"
+            />
+          </div>
+
+          <!-- Game interest (optional) -->
+          <div class="ea-field">
+            <label class="ea-field__label">
+              Primary game interest <span class="ea-field__optional">(optional)</span>
+            </label>
+            <div class="ea-pills">
               <button
-                v-for="option in ['1', '2-3', '4+']"
-                :key="option"
+                v-for="opt in GAME_OPTIONS"
+                :key="opt.value"
                 type="button"
-                @click="serverCount = option"
-                class="py-2.5 text-sm font-medium rounded-lg border transition-colors"
-                :class="serverCount === option
-                  ? 'bg-oxide-500/15 border-oxide-500/40 text-oxide-400'
-                  : 'bg-neutral-900 border-neutral-700 text-neutral-400 hover:border-neutral-600'"
+                class="ea-pill"
+                :class="{ 'ea-pill--on': gameInterest === opt.value }"
+                @click="gameInterest = gameInterest === opt.value ? '' : opt.value"
               >
-                {{ option }}
+                {{ opt.label }}
               </button>
             </div>
           </div>
+
           <button
             type="submit"
-            :disabled="submitting || !email || !serverCount"
-            class="w-full py-3 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors"
+            class="btn btn--primary btn--lg ea-submit"
+            :disabled="submitting || !email"
           >
-            {{ submitting ? 'Submitting...' : 'Join Early Access' }}
+            <Icon v-if="submitting" name="loader" :size="16" />
+            <Icon v-else name="send" :size="16" />
+            {{ submitting ? 'Submitting…' : 'Join early access' }}
           </button>
+
+          <p class="ea-privacy">
+            We store your email to contact you when access opens. We do not sell or share it.
+            No newsletters unless you opt in separately.
+          </p>
         </form>
       </div>
-    </section>
+    </div>
+  </section>
 
-    <!-- Founding Admin Program -->
-    <section class="py-16 bg-neutral-900/50 border-t border-neutral-800">
-      <div class="max-w-3xl mx-auto px-6 text-center">
-        <span class="inline-block px-3 py-1 bg-oxide-500/10 border border-oxide-500/20 rounded-full text-oxide-400 text-xs font-semibold uppercase tracking-wider mb-4">
-          Limited to 25 Servers
-        </span>
-        <h2 class="text-3xl font-bold text-neutral-100 mb-4">Founding Admin Program</h2>
-        <p class="text-neutral-400 mb-8">
-          The first 25 servers to run Corrosion receive:
-        </p>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div class="p-5 bg-neutral-900 border border-oxide-500/20 rounded-xl">
-            <Star class="w-5 h-5 text-oxide-500 mx-auto mb-2" />
-            <p class="text-sm font-medium text-neutral-200">Founding Admin Role</p>
-            <p class="text-xs text-neutral-500 mt-1">Discord badge</p>
-          </div>
-          <div class="p-5 bg-neutral-900 border border-oxide-500/20 rounded-xl">
-            <Clock class="w-5 h-5 text-oxide-500 mx-auto mb-2" />
-            <p class="text-sm font-medium text-neutral-200">Permanent Early Pricing</p>
-            <p class="text-xs text-neutral-500 mt-1">Locked forever</p>
-          </div>
-          <div class="p-5 bg-neutral-900 border border-oxide-500/20 rounded-xl">
-            <Users class="w-5 h-5 text-oxide-500 mx-auto mb-2" />
-            <p class="text-sm font-medium text-neutral-200">Public Recognition</p>
-            <p class="text-xs text-neutral-500 mt-1">Featured server</p>
-          </div>
-          <div class="p-5 bg-neutral-900 border border-oxide-500/20 rounded-xl">
-            <MessageCircle class="w-5 h-5 text-oxide-500 mx-auto mb-2" />
-            <p class="text-sm font-medium text-neutral-200">Direct Feature Input</p>
-            <p class="text-xs text-neutral-500 mt-1">Private channel</p>
-          </div>
+  <!-- HOW IT WORKS TEASER -->
+  <section class="sec" id="teaser">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">How it works</span>
+        <h2 class="title">Install the agent. Never SSH again.</h2>
+      </div>
+      <div class="steps reveal">
+        <div class="step">
+          <div class="step__n">1</div>
+          <b>Install the host agent</b>
+          <p>Download the Go binary from your dashboard. Run it on Windows or Linux. One agent per machine.</p>
+        </div>
+        <div class="step">
+          <div class="step__n">2</div>
+          <b>Agent connects to Corrosion</b>
+          <p>Single outbound NATS connection. No inbound ports. No exposed management panel on your machine.</p>
+        </div>
+        <div class="step">
+          <div class="step__n">3</div>
+          <b>Manage from the browser</b>
+          <p>Console, wipes, plugins, schedules, file manager, player management — all at panel.corrosionmgmt.com.</p>
         </div>
       </div>
-    </section>
-
-    <!-- Demo Dashboard Preview -->
-    <section id="demo" class="py-16 border-t border-neutral-800">
-      <div class="max-w-5xl mx-auto px-6">
-        <h2 class="text-2xl font-bold text-neutral-100 mb-2 text-center">Preview of Corrosion 1.0 Dashboard</h2>
-        <p class="text-neutral-500 text-center mb-10">Screenshots will replace these frames at launch.</p>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <div
-            v-for="panel in panels"
-            :key="panel.label"
-            class="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden hover:border-neutral-700 transition-colors"
-          >
-            <div class="h-36 bg-neutral-800/50 flex items-center justify-center border-b border-neutral-800">
-              <component :is="panel.icon" class="w-10 h-10 text-neutral-700" />
-            </div>
-            <div class="p-4">
-              <h3 class="text-sm font-semibold text-neutral-200 mb-1">{{ panel.label }}</h3>
-              <p class="text-xs text-neutral-500 leading-relaxed">{{ panel.desc }}</p>
-            </div>
-          </div>
-        </div>
+      <div class="closing reveal">
+        <RouterLink :to="{ name: 'how-it-works' }" class="btn btn--ghost btn--lg">
+          <Icon name="chevron-right" :size="17" />Read the full walkthrough
+        </RouterLink>
       </div>
-    </section>
+    </div>
+  </section>
 
-    <!-- Roadmap Voting -->
-    <section class="py-16 bg-neutral-900/50 border-t border-neutral-800">
-      <div class="max-w-2xl mx-auto px-6">
-        <h2 class="text-2xl font-bold text-neutral-100 mb-2 text-center">What Should We Build Next?</h2>
-        <p class="text-neutral-500 text-center mb-8">Vote on the features that matter most to you.</p>
-        <div class="space-y-3">
-          <button
-            v-for="item in voteItems"
-            :key="item.id"
-            @click="vote(item)"
-            class="w-full flex items-center gap-4 p-4 bg-neutral-900 border rounded-xl transition-colors text-left"
-            :class="item.voted ? 'border-oxide-500/30' : 'border-neutral-800 hover:border-neutral-700'"
-          >
-            <div class="flex-1">
-              <p class="text-sm font-medium" :class="item.voted ? 'text-oxide-400' : 'text-neutral-200'">{{ item.label }}</p>
-            </div>
-            <div class="flex items-center gap-3 shrink-0">
-              <div class="w-24 h-1.5 bg-neutral-800 rounded-full overflow-hidden">
-                <div
-                  class="h-full rounded-full transition-all duration-300"
-                  :class="item.voted ? 'bg-oxide-500' : 'bg-neutral-600'"
-                  :style="{ width: `${totalVotes ? (item.votes / totalVotes) * 100 : 0}%` }"
-                />
-              </div>
-              <span class="text-xs font-medium tabular-nums w-8 text-right" :class="item.voted ? 'text-oxide-400' : 'text-neutral-500'">
-                {{ item.votes }}
-              </span>
-            </div>
-          </button>
-        </div>
+  <!-- FINAL CTA -->
+  <section class="finalcta">
+    <div class="finalcta__atmo" />
+    <div class="wrap finalcta__in reveal">
+      <h2>Ready to stop babysitting<br>your servers?</h2>
+      <div class="cta-row">
+        <a href="#join" class="btn btn--primary btn--lg">
+          Sign up above
+        </a>
+        <a class="btn btn--ghost btn--lg" :href="panelUrl + '/login'">
+          <Icon name="play" :size="17" />View live demo
+        </a>
       </div>
-    </section>
-
-    <!-- Timeline -->
-    <section class="py-16 border-t border-neutral-800">
-      <div class="max-w-2xl mx-auto px-6">
-        <h2 class="text-2xl font-bold text-neutral-100 mb-8 text-center">Launch Timeline</h2>
-        <div class="space-y-4">
-          <div class="flex items-start gap-4">
-            <div class="w-8 h-8 bg-green-500/10 border border-green-500/20 rounded-full flex items-center justify-center shrink-0 mt-0.5">
-              <Check class="w-4 h-4 text-green-400" />
-            </div>
-            <div>
-              <p class="text-sm font-medium text-neutral-200">Week 1 — Closed Beta Stabilization</p>
-              <p class="text-xs text-neutral-500 mt-0.5">Core platform hardening and testing.</p>
-            </div>
-          </div>
-          <div class="ml-4 w-px h-4 bg-neutral-800" />
-          <div class="flex items-start gap-4">
-            <div class="w-8 h-8 bg-green-500/10 border border-green-500/20 rounded-full flex items-center justify-center shrink-0 mt-0.5">
-              <Check class="w-4 h-4 text-green-400" />
-            </div>
-            <div>
-              <p class="text-sm font-medium text-neutral-200">Week 2 — Early Access Open</p>
-              <p class="text-xs text-neutral-500 mt-0.5">Founding Admin licenses are live — claim yours now.</p>
-            </div>
-          </div>
-          <div class="ml-4 w-px h-4 bg-neutral-800" />
-          <div class="flex items-start gap-4">
-            <div class="w-8 h-8 bg-neutral-800 border border-neutral-700 rounded-full flex items-center justify-center shrink-0 mt-0.5">
-              <ChevronRight class="w-4 h-4 text-neutral-500" />
-            </div>
-            <div>
-              <p class="text-sm font-medium text-neutral-400">Public Release</p>
-              <p class="text-xs text-neutral-500 mt-0.5">Shortly after early access stabilization.</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  </div>
+    </div>
+  </section>
 </template>
+
+<style scoped>
+/* Form wrapper */
+.ea-form-wrap {
+  max-width: 520px;
+  margin: 0 auto;
+}
+
+/* Success state */
+.ea-success {
+  text-align: center;
+  padding: 48px 32px;
+  background: var(--surface-base);
+  border-radius: var(--radius-xl);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.ea-success__ic {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+  margin: 0 auto 18px;
+}
+.ea-success__title {
+  font-family: var(--font-brand);
+  font-weight: 700;
+  font-size: var(--text-2xl);
+  margin: 0 0 10px;
+}
+.ea-success__body {
+  color: var(--text-tertiary);
+  font-size: var(--text-sm);
+  line-height: 1.6;
+  margin: 0 0 24px;
+}
+.ea-link {
+  color: var(--accent-text);
+  text-decoration: none;
+  font-weight: 600;
+}
+.ea-link:hover { text-decoration: underline; }
+
+/* Form */
+.ea-form {
+  background: var(--surface-base);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--ring-default);
+  padding: 36px 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+.ea-form__head h2 {
+  font-family: var(--font-brand);
+  font-weight: 700;
+  font-size: var(--text-2xl);
+  margin: 0 0 6px;
+}
+.ea-form__head p {
+  color: var(--text-tertiary);
+  font-size: var(--text-sm);
+  margin: 0;
+}
+
+/* Error banner */
+.ea-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 14px;
+  background: color-mix(in srgb, var(--status-offline) 10%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-offline) 25%, transparent);
+  border-radius: var(--radius-md);
+  color: var(--status-offline);
+  font-size: var(--text-sm);
+}
+
+/* Fields */
+.ea-field { display: flex; flex-direction: column; gap: 7px; }
+.ea-field__label {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+.ea-field__req { color: var(--status-offline); }
+.ea-field__optional { color: var(--text-muted); font-weight: 400; }
+
+.ea-input {
+  height: 42px;
+  padding: 0 13px;
+  background: var(--surface-inset);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: var(--text-sm);
+  font-family: var(--font-sans);
+  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
+  outline: none;
+}
+.ea-input::placeholder { color: var(--text-muted); }
+.ea-input:focus {
+  border-color: var(--accent-border);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+/* Game pills */
+.ea-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.ea-pill {
+  height: 34px;
+  padding: 0 14px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-raised);
+  box-shadow: var(--ring-default);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: var(--transition-colors);
+}
+.ea-pill--on {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+
+/* Submit */
+.ea-submit {
+  width: 100%;
+  justify-content: center;
+}
+.ea-submit:disabled { opacity: 0.55; cursor: not-allowed; }
+
+/* Privacy note */
+.ea-privacy {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  text-align: center;
+  line-height: 1.5;
+  margin: 0;
+}
+</style>

frontend/src/views/marketing/FaqView.vue

@@ -1,101 +1,353 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { ChevronDown } from 'lucide-vue-next'
+import { ref, onMounted, onUnmounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import Icon from '@/components/ds/core/Icon.vue'
+import CorrosionMark from '@/components/brand/CorrosionMark.vue'
 
 interface FaqItem {
   question: string
   answer: string
 }
 
-const faqs: FaqItem[] = [
+interface FaqGroup {
+  label: string
+  icon: string
+  items: FaqItem[]
+}
+
+const groups: FaqGroup[] = [
   {
-    question: 'Do I need to open any firewall ports?',
-    answer: 'No. All connections are outbound from your server to Corrosion\'s cloud. No inbound ports required.',
+    label: 'Support',
+    icon: 'help-circle',
+    items: [
+      {
+        question: 'Do you provide direct support?',
+        answer:
+          'Corrosion is a self-service tool. Every plan includes documentation, community forum access, diagnostics, and structured platform bug reports. We do not provide 1:1 setup assistance, Discord DMs, video calls, server administration, hosting-provider troubleshooting, firewall configuration, mod installation, or emergency wipe-day support.',
+      },
+      {
+        question: 'What if Corrosion itself is broken?',
+        answer:
+          'Platform bugs and agent issues go through structured bug reports in the panel. Operator and Network customers receive priority bug triage for platform-level issues. Direct server administration is not included in any support tier.',
+      },
+      {
+        question: 'Do you manage my server for me?',
+        answer:
+          'No. Corrosion provides the panel, the agent, automation workflows, diagnostics, and the control plane. You remain responsible for your host machine, operating system, network, firewall, game files, mods, and community rules.',
+      },
+      {
+        question: 'Is hands-on help available?',
+        answer:
+          'Yes — separately. Direct 1:1 support is available at $125/hour, prepaid in 1-hour blocks. This is billed time with a human, not a support tier. It is available to any customer who needs it.',
+      },
+      {
+        question: 'What does community support include?',
+        answer:
+          'Documentation (setup guides, architecture reference, troubleshooting walkthroughs), a community forum for operator-to-operator knowledge sharing, in-panel diagnostics (agent health, log access), and a structured bug report system for platform issues.',
+      },
+    ],
   },
   {
-    question: 'Does Corrosion replace my hosting panel (AMP / Pterodactyl)?',
-    answer: 'No. Corrosion integrates with them via API or companion agent. Your existing panel remains intact.',
+    label: 'Product',
+    icon: 'server',
+    items: [
+      {
+        question: 'Do I need my own server?',
+        answer:
+          'Yes. Corrosion is bring-your-own-server. You supply the host machine — a VPS, dedicated server, or bare metal box running Windows or Linux. Corrosion provides the control plane, the agent, and the panel.',
+      },
+      {
+        question: 'Does Corrosion host my game server for me?',
+        answer:
+          'No. Corrosion is not a hosting provider. It is a management layer that runs on top of a server you already own or rent. If you need hosting, you need a separate hosting provider.',
+      },
+      {
+        question: 'Do I need to open inbound firewall ports for Corrosion?',
+        answer:
+          'No. The host agent establishes a single outbound NATS connection to Corrosion\'s cloud. No inbound management ports are required. Your game server\'s player ports (RCON, game ports) remain as they have always been.',
+      },
+      {
+        question: 'Does Corrosion replace AMP or Pterodactyl?',
+        answer:
+          'It can, depending on your use case. Corrosion is an independent control plane — it does not require an existing game panel. If you are currently using AMP or Pterodactyl, migration tooling is available in the panel.',
+      },
+      {
+        question: 'What happens if Corrosion goes offline?',
+        answer:
+          'Your game servers continue running normally. Corrosion does not proxy gameplay traffic — it only handles management operations. If the panel or cloud is unreachable, your players are unaffected.',
+      },
+      {
+        question: 'Can multiple admins manage the same server?',
+        answer:
+          'Yes. Role-based access control (RBAC) is built in. You can grant team members specific permissions — from full admin access down to read-only viewer — without sharing credentials.',
+      },
+      {
+        question: 'What OS does the agent run on?',
+        answer:
+          'Both Windows and Linux are supported for the host agent. The agent binary is downloaded directly from your dashboard — there is no manual build or dependency setup required.',
+      },
+      {
+        question: 'Is my data isolated from other customers?',
+        answer:
+          'Yes. All data is scoped by license ID at the database level. No server, config, or player data is shared across tenant boundaries.',
+      },
+    ],
   },
   {
-    question: 'What happens if Corrosion goes offline?',
-    answer: 'Your Rust server continues running normally. Corrosion does not proxy gameplay traffic.',
+    label: 'Games',
+    icon: 'box',
+    items: [
+      {
+        question: 'Which games are supported?',
+        answer:
+          'Currently in active development or shipped: Rust, Dune: Awakening, Conan Exiles, and Soulmask. Each game has a purpose-built blueprint — not a generic template — that models its specific operational reality (wipe types, mod systems, cluster configurations). More games are planned.',
+      },
+      {
+        question: 'Does Corrosion support Rust plugin management?',
+        answer:
+          'Yes. Corrosion integrates with uMod (Oxide) for Rust. You can browse the plugin registry, install plugins, manage configuration profiles, and push config changes to the server — all from the browser.',
+      },
+      {
+        question: 'Can I run multiple game types on the same host machine?',
+        answer:
+          'Yes. A single host agent can supervise multiple game server processes — across different games — on the same machine. Each game instance has its own lifecycle, configuration, and wipe schedule.',
+      },
+      {
+        question: 'Does Corrosion handle Rust wipes?',
+        answer:
+          'Yes. Rust wipes are a first-class feature: map wipes, blueprint wipes, and full wipes. Wipes run as verified, logged sequences — pre-warning, backup, stop, update, map rotation, restart, health check, announce. Rollback is available when supported.',
+      },
+    ],
   },
   {
-    question: 'Is my data shared with other servers?',
-    answer: 'No. All data is isolated by license ID. Multi-tenant database queries are scoped per license.',
-  },
-  {
-    question: 'What if a wipe fails?',
-    answer: 'Corrosion can automatically retry and optionally roll back using the pre-wipe backup.',
-  },
-  {
-    question: 'Does this work on bare metal?',
-    answer: 'Yes. Use the Companion Agent — no SSH required after initial setup.',
-  },
-  {
-    question: 'Can I manage multiple admins?',
-    answer: 'Yes. Multi-Admin Role-Based Access Control is built in. Grant granular permissions per team member.',
-  },
-  {
-    question: 'Is this beginner friendly?',
-    answer: 'Yes. If you can install a uMod plugin, you can use Corrosion.',
-  },
-  {
-    question: 'Does this replace Tebex?',
-    answer: 'Corrosion includes an optional integrated store (Phase 5 roadmap), but does not require Tebex.',
-  },
-  {
-    question: 'How is licensing handled?',
-    answer: 'One license per server. License validation occurs on plugin startup and periodically.',
+    label: 'Billing',
+    icon: 'credit-card',
+    items: [
+      {
+        question: 'What counts as commercial use?',
+        answer:
+          'Commercial use includes monetized communities, paid access, VIP slots, donation-funded servers, sponsorship-supported servers, hosting providers, or managing servers for others. Hobby and Community plans are non-commercial only. Operator and Network plans permit commercial use.',
+      },
+      {
+        question: 'What is the Fleet Block on the Network plan?',
+        answer:
+          'The Network plan base includes 50 server instances at $99.99/mo. Each additional Fleet Block adds 50 more server slots at $49.99/mo. Stack as many Fleet Blocks as your operation requires.',
+      },
+      {
+        question: 'Can I upgrade my plan?',
+        answer:
+          'Yes. You can upgrade at any time. Pricing is prorated from the upgrade date.',
+      },
+      {
+        question: 'Is there a free trial?',
+        answer:
+          'Corrosion is currently in early access. Join the early access list to be notified when access opens.',
+      },
+      {
+        question: 'Are there annual billing discounts?',
+        answer:
+          'Not at this time. All plans are billed monthly.',
+      },
+    ],
   },
 ]
 
-const openIndex = ref<number | null>(null)
+const openKey = ref<string | null>(null)
 
-function toggle(index: number) {
-  openIndex.value = openIndex.value === index ? null : index
+function toggle(key: string): void {
+  openKey.value = openKey.value === key ? null : key
 }
+
+function itemKey(groupLabel: string, idx: number): string {
+  return `${groupLabel}-${idx}`
+}
+
+// Scroll-reveal
+let io: IntersectionObserver | null = null
+
+function initReveal(): void {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+  io = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((e) => {
+        if (e.isIntersecting) {
+          e.target.classList.add('in')
+          io?.unobserve(e.target)
+        }
+      })
+    },
+    { threshold: 0.1 },
+  )
+  document.querySelectorAll('.reveal').forEach((el) => io?.observe(el))
+}
+
+onMounted(() => { initReveal() })
+onUnmounted(() => { io?.disconnect() })
 </script>
 
 <template>
-  <div>
-    <!-- Header -->
-    <section class="pt-20 pb-12">
-      <div class="max-w-4xl mx-auto px-6 text-center">
-        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4">Frequently Asked Questions</h1>
-        <p class="text-lg text-neutral-400">Everything you need to know about Corrosion.</p>
+  <!-- PAGE HEADER -->
+  <section class="hero" style="padding-bottom:0; border-bottom:none;">
+    <div class="hero__atmo" />
+    <div class="hero__grid" />
+    <div class="hero__grain" />
+    <div class="wrap hero__in" style="padding-bottom:52px;">
+      <div class="hero__mark">
+        <CorrosionMark :size="56" />
       </div>
-    </section>
+      <span class="eyebrow">FAQ</span>
+      <h1 style="font-size:var(--text-5xl)">
+        Honest answers.
+        <span class="accent">No marketing fluff.</span>
+      </h1>
+      <p class="hero__sub">
+        Common questions about support, the product, supported games, and billing — answered
+        plainly.
+      </p>
+    </div>
+  </section>
 
-    <!-- FAQ Accordion -->
-    <section class="pb-20">
-      <div class="max-w-3xl mx-auto px-6">
-        <div class="space-y-3">
+  <!-- FAQ GROUPS -->
+  <section class="sec" id="faq">
+    <div class="wrap">
+      <div
+        v-for="group in groups"
+        :key="group.label"
+        class="faq-group reveal"
+      >
+        <div class="faq-group__head">
+          <span class="faq-group__ic">
+            <Icon :name="group.icon" :size="16" />
+          </span>
+          <span class="eyebrow">{{ group.label }}</span>
+        </div>
+
+        <div class="faq-list">
           <div
-            v-for="(faq, index) in faqs"
-            :key="index"
-            class="bg-neutral-900 border rounded-xl overflow-hidden transition-colors"
-            :class="openIndex === index ? 'border-oxide-500/30' : 'border-neutral-800'"
+            v-for="(item, idx) in group.items"
+            :key="idx"
+            class="faq-item"
+            :class="{ 'faq-item--open': openKey === itemKey(group.label, idx) }"
           >
             <button
-              @click="toggle(index)"
-              class="w-full flex items-center justify-between p-6 text-left"
+              class="faq-item__q"
+              @click="toggle(itemKey(group.label, idx))"
             >
-              <span class="text-neutral-100 font-medium pr-4">{{ faq.question }}</span>
-              <ChevronDown
-                class="w-5 h-5 text-neutral-500 shrink-0 transition-transform duration-200"
-                :class="{ 'rotate-180': openIndex === index }"
-              />
+              <span>{{ item.question }}</span>
+              <span class="faq-item__chevron">
+                <Icon
+                  name="chevron-down"
+                  :size="16"
+                  :class="{ 'faq-item__chevron--open': openKey === itemKey(group.label, idx) }"
+                />
+              </span>
             </button>
             <div
-              v-if="openIndex === index"
-              class="px-6 pb-6 -mt-2"
+              v-if="openKey === itemKey(group.label, idx)"
+              class="faq-item__a"
             >
-              <p class="text-neutral-400 leading-relaxed">{{ faq.answer }}</p>
+              {{ item.answer }}
             </div>
           </div>
         </div>
       </div>
-    </section>
-  </div>
+    </div>
+  </section>
+
+  <!-- SUPPORT CTA -->
+  <section class="sec" id="support-cta" style="border-bottom:none">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Still have questions?</span>
+        <h2 class="title">Check the docs or join the community</h2>
+        <p class="lead">
+          The documentation covers setup, architecture, troubleshooting, and every supported
+          game. The community forum is where operators share configs, ask questions, and help
+          each other.
+        </p>
+      </div>
+      <div class="hero__cta reveal">
+        <RouterLink class="btn btn--primary btn--lg" :to="{ name: 'early-access' }">
+          Join early access
+        </RouterLink>
+        <RouterLink class="btn btn--ghost btn--lg" :to="{ name: 'pricing' }">
+          <Icon name="credit-card" :size="17" />View pricing
+        </RouterLink>
+      </div>
+    </div>
+  </section>
 </template>
+
+<style scoped>
+.faq-group {
+  margin-bottom: 48px;
+}
+.faq-group__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+.faq-group__ic {
+  width: 28px;
+  height: 28px;
+  flex: none;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent-text);
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+
+.faq-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 860px;
+  margin: 0 auto;
+}
+.faq-item {
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default);
+  overflow: hidden;
+  transition: box-shadow var(--dur-fast);
+}
+.faq-item--open {
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.faq-item__q {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 20px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+  transition: color var(--dur-fast);
+}
+.faq-item__q:hover { color: var(--accent-text); }
+.faq-item__chevron {
+  flex: none;
+  color: var(--text-muted);
+  transition: color var(--dur-fast);
+}
+.faq-item__chevron--open {
+  transform: rotate(180deg);
+  color: var(--accent-text);
+}
+.faq-item__a {
+  padding: 0 20px 18px;
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  line-height: 1.65;
+}
+</style>

frontend/src/views/marketing/HowItWorksView.vue

@@ -1,150 +1,358 @@
 <script setup lang="ts">
-import { Download, Globe, Wifi, LayoutDashboard, ArrowDown } from 'lucide-vue-next'
+import { onMounted, onUnmounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import Icon from '@/components/ds/core/Icon.vue'
+import CorrosionMark from '@/components/brand/CorrosionMark.vue'
+
+const panelUrl = import.meta.env.VITE_PANEL_URL ?? ''
+
+// Scroll-reveal
+let io: IntersectionObserver | null = null
+
+function initReveal(): void {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+  io = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((e) => {
+        if (e.isIntersecting) {
+          e.target.classList.add('in')
+          io?.unobserve(e.target)
+        }
+      })
+    },
+    { threshold: 0.1 },
+  )
+  document.querySelectorAll('.reveal').forEach((el) => io?.observe(el))
+}
+
+onMounted(() => { initReveal() })
+onUnmounted(() => { io?.disconnect() })
 </script>
 
 <template>
-  <div>
-    <!-- Header -->
-    <section class="pt-20 pb-12">
-      <div class="max-w-4xl mx-auto px-6 text-center">
-        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4">How Corrosion Works</h1>
-        <p class="text-lg text-neutral-400">
-          Corrosion connects your Rust server to a hosted control plane — securely, outbound-only.
+  <!-- PAGE HEADER -->
+  <section class="hero" style="padding-bottom:0; border-bottom:none;">
+    <div class="hero__atmo" />
+    <div class="hero__grid" />
+    <div class="hero__grain" />
+    <div class="wrap hero__in" style="padding-bottom:52px;">
+      <div class="hero__mark">
+        <CorrosionMark :size="56" />
+      </div>
+      <span class="eyebrow">How it works</span>
+      <h1 style="font-size:var(--text-5xl)">
+        One agent.
+        <span class="accent">Every game. No SSH.</span>
+      </h1>
+      <p class="hero__sub">
+        Install the host agent once on your Windows or Linux machine. Corrosion connects
+        securely, outbound-only. You manage every game instance from the browser.
+      </p>
+    </div>
+  </section>
+
+  <!-- THE MODEL: 3-STEP OVERVIEW -->
+  <section class="sec" id="model">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">The agent model</span>
+        <h2 class="title">Bring your own server.<br>We provide the control plane.</h2>
+        <p class="lead">
+          Corrosion is not a hosting provider. You supply the hardware or the VPS. The host
+          agent runs on that machine and bridges your game instances to Corrosion's control
+          plane — securely, without opening inbound firewall ports.
         </p>
       </div>
-    </section>
+      <div class="steps reveal">
+        <div class="step">
+          <div class="step__n">1</div>
+          <b>Install the host agent</b>
+          <p>
+            Download the Corrosion agent binary from your dashboard. Run it on any Windows
+            or Linux host. One agent per machine — it manages every game instance you assign
+            to it.
+          </p>
+        </div>
+        <div class="step">
+          <div class="step__n">2</div>
+          <b>It connects to Corrosion</b>
+          <p>
+            The agent makes a single outbound NATS connection to Corrosion's cloud. No
+            inbound ports. No open panels. No SSH required after initial setup.
+          </p>
+        </div>
+        <div class="step">
+          <div class="step__n">3</div>
+          <b>Deploy and manage from the browser</b>
+          <p>
+            Create game instances, run wipes, manage plugins, schedule maintenance, and
+            monitor players — all from the Corrosion panel at panel.corrosionmgmt.com.
+          </p>
+        </div>
+      </div>
+      <div class="nots reveal">
+        <span><Icon name="check" :size="16" style="color:var(--status-online)" />No open inbound ports</span>
+        <span><Icon name="check" :size="16" style="color:var(--status-online)" />No permanent SSH sessions</span>
+        <span><Icon name="check" :size="16" style="color:var(--status-online)" />No config file spelunking</span>
+        <span><Icon name="check" :size="16" style="color:var(--status-online)" />Windows and Linux supported</span>
+      </div>
+    </div>
+  </section>
 
-    <!-- Steps -->
-    <section class="pb-20">
-      <div class="max-w-3xl mx-auto px-6">
-        <div class="space-y-2">
-          <!-- Step 1 -->
-          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
-            <div class="flex items-start gap-6">
-              <div class="w-12 h-12 bg-oxide-500/10 border border-oxide-500/20 rounded-xl flex items-center justify-center shrink-0">
-                <Download class="w-6 h-6 text-oxide-500" />
-              </div>
-              <div>
-                <div class="flex items-center gap-3 mb-2">
-                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 1</span>
-                </div>
-                <h3 class="text-xl font-bold text-neutral-100 mb-2">Install the Plugin</h3>
-                <p class="text-neutral-400">
-                  Drop the Corrosion plugin into <code class="px-2 py-0.5 bg-neutral-800 rounded text-oxide-300 text-sm">oxide/plugins</code>.
-                  That's it. No dependencies, no config files to create.
-                </p>
-              </div>
+  <!-- MULTI-GAME RUNTIME -->
+  <section class="sec" id="multi-game">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Multi-game host runtime</span>
+        <h2 class="title">One agent. Multiple game worlds<br>on the same machine.</h2>
+        <p class="lead">
+          The host agent is not a per-game process. It is a general-purpose ops runtime. One
+          agent on a single machine can supervise multiple game server processes across
+          different games — each with its own configuration, lifecycle, and wipe schedule.
+        </p>
+      </div>
+
+      <div class="blueprints reveal">
+        <div class="bp" data-game="rust">
+          <div class="bp__head">
+            <span class="bp__ic"><Icon name="box" :size="21" /></span>
+            <div>
+              <div class="bp__name">Rust</div>
+              <div class="bp__accent">Oxide Orange</div>
             </div>
           </div>
-
-          <div class="flex justify-center py-1">
-            <ArrowDown class="w-5 h-5 text-neutral-700" />
+          <div class="bp__role">uMod / Oxide plugin ecosystem</div>
+          <div class="bp__list">
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Map / BP / full wipe scheduling</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Plugin config profiles from the browser</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Wipe-day backup before every change</div>
           </div>
-
-          <!-- Step 2 -->
-          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
-            <div class="flex items-start gap-6">
-              <div class="w-12 h-12 bg-oxide-500/10 border border-oxide-500/20 rounded-xl flex items-center justify-center shrink-0">
-                <Globe class="w-6 h-6 text-oxide-500" />
-              </div>
-              <div>
-                <div class="flex items-center gap-3 mb-2">
-                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 2</span>
-                </div>
-                <h3 class="text-xl font-bold text-neutral-100 mb-2">Register Online</h3>
-                <p class="text-neutral-400">
-                  Activate your license and configure your server. Set your hostname, game port, and admin preferences.
-                </p>
-              </div>
+        </div>
+        <div class="bp" data-game="dune">
+          <div class="bp__head">
+            <span class="bp__ic"><Icon name="sun" :size="21" /></span>
+            <div>
+              <div class="bp__name">Dune: Awakening</div>
+              <div class="bp__accent">Spice Amber</div>
             </div>
           </div>
-
-          <div class="flex justify-center py-1">
-            <ArrowDown class="w-5 h-5 text-neutral-700" />
+          <div class="bp__role">Battlegroup orchestration</div>
+          <div class="bp__list">
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Deep Desert wipe scheduling</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Procedural map regeneration</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Battlegroup lifecycle controls</div>
           </div>
-
-          <!-- Step 3 -->
-          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
-            <div class="flex items-start gap-6">
-              <div class="w-12 h-12 bg-oxide-500/10 border border-oxide-500/20 rounded-xl flex items-center justify-center shrink-0">
-                <Wifi class="w-6 h-6 text-oxide-500" />
-              </div>
-              <div>
-                <div class="flex items-center gap-3 mb-2">
-                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 3</span>
-                </div>
-                <h3 class="text-xl font-bold text-neutral-100 mb-2">Secure Outbound Connection</h3>
-                <p class="text-neutral-400">
-                  Your server connects securely to Corrosion's NATS cluster. No inbound firewall rules required. Your server initiates all connections.
-                </p>
-              </div>
+        </div>
+        <div class="bp" data-game="soulmask">
+          <div class="bp__head">
+            <span class="bp__ic"><Icon name="drama" :size="21" /></span>
+            <div>
+              <div class="bp__name">Soulmask</div>
+              <div class="bp__accent">Ritual Jade</div>
             </div>
           </div>
-
-          <div class="flex justify-center py-1">
-            <ArrowDown class="w-5 h-5 text-neutral-700" />
+          <div class="bp__role">Linked-world cluster deployment</div>
+          <div class="bp__list">
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />One-click linked-server clusters</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Port and config automation</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Cluster health monitoring</div>
           </div>
+        </div>
+        <div class="bp" data-game="conan">
+          <div class="bp__head">
+            <span class="bp__ic"><Icon name="swords" :size="21" /></span>
+            <div>
+              <div class="bp__name">Conan Exiles</div>
+              <div class="bp__accent">Hyborian Bronze</div>
+            </div>
+          </div>
+          <div class="bp__role">Persistent world management</div>
+          <div class="bp__list">
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Mod management + world backups</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Purge, decay, and event tracking</div>
+            <div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Scheduled maintenance workflows</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 
-          <!-- Step 4 -->
-          <div class="bg-neutral-900 border border-oxide-500/30 rounded-xl p-8">
-            <div class="flex items-start gap-6">
-              <div class="w-12 h-12 bg-oxide-500/15 border border-oxide-500/30 rounded-xl flex items-center justify-center shrink-0">
-                <LayoutDashboard class="w-6 h-6 text-oxide-400" />
-              </div>
-              <div>
-                <div class="flex items-center gap-3 mb-2">
-                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 4</span>
-                </div>
-                <h3 class="text-xl font-bold text-neutral-100 mb-2">Full Orchestration</h3>
-                <p class="text-neutral-400 mb-4">From the dashboard, you can:</p>
-                <ul class="space-y-2">
-                  <li class="text-neutral-300 text-sm flex items-center gap-2">
-                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
-                    Execute console commands
-                  </li>
-                  <li class="text-neutral-300 text-sm flex items-center gap-2">
-                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
-                    Configure plugins
-                  </li>
-                  <li class="text-neutral-300 text-sm flex items-center gap-2">
-                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
-                    Schedule wipes
-                  </li>
-                  <li class="text-neutral-300 text-sm flex items-center gap-2">
-                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
-                    Monitor performance
-                  </li>
-                  <li class="text-neutral-300 text-sm flex items-center gap-2">
-                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
-                    Automate Steam updates
-                  </li>
-                </ul>
-              </div>
+  <!-- WIPE AND MAINTENANCE AUTOMATION -->
+  <section class="sec" id="automation">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Wipe and maintenance automation</span>
+        <h2 class="title">Self-service workflows,<br>not manual processes</h2>
+        <p class="lead">
+          Every wipe, update, and maintenance window runs as a verified, logged sequence.
+          Pre-warning announcements, pre-wipe backups, health checks after restart, and
+          rollback capability when things go wrong.
+        </p>
+      </div>
+
+      <div class="pipe reveal">
+        <span class="pchip">Pre-warning</span>
+        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
+        <span class="pchip">Backup</span>
+        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
+        <span class="pchip">Stop services</span>
+        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
+        <span class="pchip">Update / rotate</span>
+        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
+        <span class="pchip">Restart</span>
+        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
+        <span class="pchip">Health check</span>
+        <Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
+        <span class="pchip pchip--last">Announce complete</span>
+      </div>
+
+      <div class="stack-lines reveal">
+        <span>Every operation is logged. Every step is verified.</span>
+        <span class="hi">Rollback is one click away when supported.</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- ARCHITECTURE: HOW CONNECTIVITY WORKS -->
+  <section class="sec" id="connectivity">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Connectivity model</span>
+        <h2 class="title">Outbound-only. No exposed panel.</h2>
+        <p class="lead">
+          The host agent establishes one secure NATS connection to Corrosion's cloud. All
+          commands flow through that channel. Your machine never needs to accept inbound
+          connections from the internet.
+        </p>
+      </div>
+
+      <div class="infra reveal">
+        <div class="icard">
+          <div class="icard__ic"><Icon name="server" :size="16" /></div>
+          <b>Your host machine</b>
+          <p>Windows or Linux. Bare metal, VPS, or dedicated. You own it and run it.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="cpu" :size="16" /></div>
+          <b>Corrosion agent</b>
+          <p>A single Go binary. Runs as a service. Manages game processes, files, and updates.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="zap" :size="16" /></div>
+          <b>Outbound NATS channel</b>
+          <p>One secure, outbound-only connection. No open ports. No SSH tunnels.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="shield" :size="16" /></div>
+          <b>Corrosion cloud</b>
+          <p>Hosted control plane. Multi-tenant isolation. Every command is license-scoped.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="layout-dashboard" :size="16" /></div>
+          <b>Your browser</b>
+          <p>The panel at panel.corrosionmgmt.com. Console, wipes, plugins, schedules — all here.</p>
+        </div>
+      </div>
+
+      <div class="techrow reveal">
+        <span>Go host agent</span>
+        <span>NATS JetStream</span>
+        <span>NestJS API</span>
+        <span>PostgreSQL</span>
+        <span>Outbound-only connectivity</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- HOST REQUIREMENTS -->
+  <section class="sec" id="requirements">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Host requirements</span>
+        <h2 class="title">What you need to get started</h2>
+      </div>
+
+      <div class="caps reveal" style="max-width:760px">
+        <div class="caps__col">
+          <span class="eyebrow">Your machine</span>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="server" :size="16" /></span>
+            <div>
+              <b>Windows or Linux host</b>
+              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
+                VPS, dedicated server, or bare metal. You supply it; Corrosion manages it.
+              </p>
+            </div>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="hard-drive" :size="16" /></span>
+            <div>
+              <b>Enough CPU and RAM for your game</b>
+              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
+                Corrosion's agent is lightweight. Your game server determines the actual
+                hardware requirement.
+              </p>
+            </div>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="wifi" :size="16" /></span>
+            <div>
+              <b>Outbound internet access</b>
+              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
+                The agent connects out; your game server's player ports stay open as they
+                always have been.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="caps__col">
+          <span class="eyebrow">From Corrosion</span>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="download" :size="16" /></span>
+            <div>
+              <b>Agent binary (Windows or Linux)</b>
+              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
+                Downloaded from your dashboard. No manual build. No dependency management.
+              </p>
+            </div>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="key" :size="16" /></span>
+            <div>
+              <b>Your license key</b>
+              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
+                Issued when you register. The agent uses it to authenticate to the cloud.
+              </p>
+            </div>
+          </div>
+          <div class="feat">
+            <span class="feat__ic"><Icon name="globe" :size="16" /></span>
+            <div>
+              <b>The panel</b>
+              <p style="margin:4px 0 0;color:var(--text-tertiary);font-size:var(--text-xs)">
+                Everything else — console, wipes, schedules, players — lives at
+                panel.corrosionmgmt.com.
+              </p>
             </div>
           </div>
         </div>
       </div>
-    </section>
+    </div>
+  </section>
 
-    <!-- Architecture Diagram -->
-    <section class="py-20 bg-neutral-900/50 border-t border-neutral-800">
-      <div class="max-w-3xl mx-auto px-6 text-center">
-        <h2 class="text-2xl font-bold text-neutral-100 mb-10">Architecture Overview</h2>
-        <div class="space-y-3">
-          <div class="inline-block px-6 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-medium">Rust Server</div>
-          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
-          <div class="inline-block px-6 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-medium">Corrosion Plugin</div>
-          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
-          <div class="inline-block px-6 py-3 bg-oxide-500/10 border border-oxide-500/30 rounded-lg text-oxide-400 font-medium">Secure NATS Messaging</div>
-          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
-          <div class="inline-block px-6 py-3 bg-oxide-500/10 border border-oxide-500/30 rounded-lg text-oxide-400 font-medium">Corrosion Cloud</div>
-          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
-          <div class="inline-block px-6 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-medium">Dashboard + Store + Analytics</div>
-        </div>
-        <p class="text-neutral-500 mt-10">
-          Corrosion does not proxy gameplay traffic. It orchestrates operations.
-        </p>
+  <!-- FINAL CTA -->
+  <section class="finalcta">
+    <div class="finalcta__atmo" />
+    <div class="wrap finalcta__in reveal">
+      <h2>Install the agent.<br>Never SSH again.</h2>
+      <div class="cta-row">
+        <RouterLink class="btn btn--primary btn--lg" :to="{ name: 'early-access' }">
+          Join early access
+        </RouterLink>
+        <a class="btn btn--ghost btn--lg" :href="panelUrl + '/login'">
+          <Icon name="play" :size="17" />View live demo
+        </a>
       </div>
-    </section>
-  </div>
+    </div>
+  </section>
 </template>

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.
-        </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
-          </a>
-        </div>
+  <!-- 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>
-      <!-- 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" />
-    </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>
-          </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>
-          <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>
-          <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>
-          <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>
-        </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>
+      <div class="notpill">
+        <b>Not hosting.</b>&nbsp;Not a generic panel. Self-hosted, agent-based.
       </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.
-        </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>
-          <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>
-            <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>
-        </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>
-      </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 -->
-          <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>
-                  <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>
-              </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>
-                  <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>
-              </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>
-                  <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>
-              </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>
-        </div>
-        <div class="flex flex-col md:flex-row items-center justify-center gap-6 text-neutral-400">
-          <span>Every wipe is logged.</span>
-          <span>Every step is verified.</span>
-          <span class="text-oxide-400 font-medium">Rollback is one click away.</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:
-        </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>
-          <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>
-          <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>
-        </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>
-      </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>
-          </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>
-          <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>
-      </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>
-        </div>
-        <p class="text-xl text-oxide-400 font-semibold">Corrosion was built for you.</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
+      <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="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>
-    </section>
-  </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>
+    </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>rust-host · 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>dune-host · 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>conan-host · 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>
+
+  <!-- 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="pain reveal">
+        <div class="pain__item">
+          <span class="pain__x"><Icon name="x" :size="14" /></span>
+          Editing configs over SFTP
+        </div>
+        <div class="pain__item">
+          <span class="pain__x"><Icon name="x" :size="14" /></span>
+          Manually updating mods &amp; plugins
+        </div>
+        <div class="pain__item">
+          <span class="pain__x"><Icon name="x" :size="14" /></span>
+          Guessing when a server crashed
+        </div>
+        <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="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>
+
+  <!-- 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>
+      <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="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>
+        <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="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>
+
+  <!-- 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>
+              <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>
+              <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" />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>
+              <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" />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>
+              <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>
+
+  <!-- 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="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="hi">Rollback is one click away when supported.</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- 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>
+      <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="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="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="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 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="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>
+      <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>
+
+  <!-- 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>
+      <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>
+
+  <!-- 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>
+    </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>
-    </section>
+      <span class="eyebrow">Pricing</span>
+      <h1 style="font-size:var(--text-5xl)">
+        Scale from one server
+        <span class="accent">to a fleet.</span>
+      </h1>
+      <p class="hero__sub">
+        Simple tiers based on how many servers you run and whether you operate commercially.
+        No per-seat charges. No surprises.
+      </p>
+    </div>
+  </section>
 
-    <!-- Pricing Cards -->
-    <section class="pb-20">
-      <div class="max-w-5xl mx-auto px-6">
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <!-- Base License -->
-          <div class="bg-neutral-900 border-2 border-oxide-500/40 rounded-xl p-8 relative">
-            <div class="absolute -top-3 left-1/2 -translate-x-1/2">
-              <span class="px-3 py-1 bg-oxide-600 text-white text-xs font-semibold rounded-full uppercase tracking-wider">Most Popular</span>
-            </div>
-            <div class="text-center mb-6">
-              <h3 class="text-xl font-bold text-neutral-100 mb-2">Base License</h3>
-              <div class="flex items-baseline justify-center gap-1">
-                <span class="text-4xl font-bold text-oxide-400">$50</span>
-              </div>
-              <p class="text-sm text-neutral-500 mt-1">One server. Lifetime access.</p>
-              <p class="text-xs text-oxide-400/70 mt-1">Launch Price</p>
-            </div>
-            <ul class="space-y-3 mb-8">
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Full control plane
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Auto-Wiper with rollback
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Plugin management
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Public server site
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Multi-admin RBAC
-              </li>
-            </ul>
-            <RouterLink to="/register" class="block w-full py-3 bg-oxide-600 hover:bg-oxide-700 text-white text-center font-semibold rounded-lg transition-colors">
-              Get Started
-            </RouterLink>
+  <!-- PRICING CARDS -->
+  <section class="sec" id="plans">
+    <div class="wrap">
+      <div class="pricing reveal">
+        <div
+          v-for="plan in plans"
+          :key="plan.name"
+          class="plan"
+          :class="plan.featured ? 'plan--feature' : ''"
+        >
+          <div class="plan__tag">{{ plan.tag }}</div>
+          <div class="plan__name">{{ plan.name }}</div>
+          <div class="plan__price">
+            {{ plan.price }}<small>{{ plan.period }}</small>
           </div>
+          <div class="plan__scope">{{ plan.scope }}</div>
 
-          <!-- Webstore Add-On -->
-          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
-            <div class="text-center mb-6">
-              <h3 class="text-xl font-bold text-neutral-100 mb-2">Webstore Add-On</h3>
-              <div class="flex items-baseline justify-center gap-1">
-                <span class="text-4xl font-bold text-neutral-200">$10</span>
-                <span class="text-neutral-500">/mo</span>
-              </div>
-              <p class="text-sm text-neutral-500 mt-1">Integrated monetization platform.</p>
-            </div>
-            <ul class="space-y-3 mb-8">
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Item catalog
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Stripe + PayPal
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Auto-delivery via RCON
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Transaction history
-              </li>
-            </ul>
-            <button class="block w-full py-3 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 text-center font-semibold rounded-lg border border-neutral-700 transition-colors">
-              Coming Soon
-            </button>
-          </div>
+          <ul class="plan__feats">
+            <li v-for="feat in plan.features" :key="feat.text">
+              <Icon name="check" :size="13" style="color:var(--accent-text);flex:none" />
+              {{ feat.text }}
+            </li>
+          </ul>
 
-          <!-- Modules -->
-          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
-            <div class="text-center mb-6">
-              <h3 class="text-xl font-bold text-neutral-100 mb-2">Modules</h3>
-              <div class="flex items-baseline justify-center gap-1">
-                <span class="text-4xl font-bold text-neutral-200">$9.99</span>
-                <span class="text-neutral-500">+</span>
-              </div>
-              <p class="text-sm text-neutral-500 mt-1">Optional feature expansions.</p>
-            </div>
-            <ul class="space-y-3 mb-8">
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Analytics & insights
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Discord bot integration
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                Cloud backups
-              </li>
-              <li class="flex items-center gap-3 text-sm text-neutral-300">
-                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
-                More on the roadmap
-              </li>
-            </ul>
-            <RouterLink to="/site/roadmap" class="block w-full py-3 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 text-center font-semibold rounded-lg border border-neutral-700 transition-colors">
-              View Roadmap
-            </RouterLink>
-          </div>
+          <RouterLink
+            class="btn"
+            :class="plan.ctaVariant === 'primary' ? 'btn--primary' : 'btn--ghost'"
+            :to="{ name: 'early-access' }"
+          >
+            {{ plan.cta }}
+          </RouterLink>
         </div>
       </div>
-    </section>
-  </div>
+
+      <!-- Fleet Block -->
+      <div class="fleetblock reveal">
+        <b>Fleet Block</b>
+        <span class="p">+$49.99/mo</span>
+        <span>each additional 50 servers — stack as many as your network needs.</span>
+      </div>
+
+      <!-- Commercial use definition -->
+      <p class="commercial reveal">
+        <b>Commercial use</b> includes monetized communities, paid access, VIP slots, donations,
+        sponsorship-supported servers, hosting providers, or managing servers for others.
+      </p>
+
+      <!-- Support model -->
+      <p class="support-note reveal">
+        Community support is included with every plan — documentation, community forum,
+        diagnostics, and structured bug reports.
+        <b>Direct 1:1 support</b> is available separately at $125/hour in prepaid 1-hour blocks.
+        Corrosion is a tool, not a managed service.
+      </p>
+    </div>
+  </section>
+
+  <!-- COMPARISON TABLE -->
+  <section class="sec" id="compare">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Feature breakdown</span>
+        <h2 class="title">What is included in each tier</h2>
+      </div>
+
+      <div class="compare-table reveal">
+        <div class="compare-table__head">
+          <div class="compare-table__label">Feature</div>
+          <div>Hobby</div>
+          <div>Community</div>
+          <div class="compare-table__featured">Operator</div>
+          <div>Network</div>
+        </div>
+
+        <div class="compare-table__row">
+          <div class="compare-table__label">Server instances</div>
+          <div>1–5</div>
+          <div>6–10</div>
+          <div class="compare-table__featured">Up to 50</div>
+          <div>50 + Fleet Blocks</div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">Commercial use</div>
+          <div><Icon name="x" :size="14" style="color:var(--status-offline)" /></div>
+          <div><Icon name="x" :size="14" style="color:var(--status-offline)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">Rust (Oxide/uMod)</div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">All supported games</div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">Auto-wiper + rollback</div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">Real-time console</div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">RBAC team access</div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">Public server page</div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+        <div class="compare-table__row">
+          <div class="compare-table__label">Priority bug triage</div>
+          <div><Icon name="x" :size="14" style="color:var(--status-offline)" /></div>
+          <div><Icon name="x" :size="14" style="color:var(--status-offline)" /></div>
+          <div class="compare-table__featured"><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+          <div><Icon name="check" :size="14" style="color:var(--accent-text)" /></div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- SUPPORT MODEL -->
+  <section class="sec" id="support">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Support model</span>
+        <h2 class="title">Corrosion is a tool,<br>not a managed service</h2>
+        <p class="lead">
+          Every plan includes self-service support. Hands-on time is available separately — at
+          an honest rate, when you actually need it.
+        </p>
+      </div>
+
+      <div class="infra reveal">
+        <div class="icard">
+          <div class="icard__ic"><Icon name="file-text" :size="16" /></div>
+          <b>Documentation</b>
+          <p>Setup guides, architecture reference, troubleshooting walkthroughs. Included on every plan.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="message-square" :size="16" /></div>
+          <b>Community forum</b>
+          <p>Operator-to-operator knowledge base. Questions, configs, and war stories. All plans.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="activity" :size="16" /></div>
+          <b>Diagnostics</b>
+          <p>Built-in agent health checks, log access, and structured bug reports. All plans.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="zap" :size="16" /></div>
+          <b>Priority bug triage</b>
+          <p>Platform bugs for Operator and Network customers go to the front of the queue.</p>
+        </div>
+        <div class="icard">
+          <div class="icard__ic"><Icon name="clock" :size="16" /></div>
+          <b>Direct 1:1 support</b>
+          <p>$125/hour, prepaid in 1-hour blocks. Available to any customer who needs it.</p>
+        </div>
+      </div>
+
+      <p class="closing reveal" style="font-size:var(--text-md);color:var(--text-tertiary);font-weight:500">
+        Direct server administration, firewall configuration, mod installation, and wipe-day
+        hand-holding are not included in any plan. Corrosion gives you the panel and the tools.
+        You run the operation.
+      </p>
+    </div>
+  </section>
+
+  <!-- FINAL CTA -->
+  <section class="finalcta">
+    <div class="finalcta__atmo" />
+    <div class="wrap finalcta__in reveal">
+      <h2>Ready to stop babysitting<br>your servers?</h2>
+      <div class="cta-row">
+        <RouterLink class="btn btn--primary btn--lg" :to="{ name: 'early-access' }">
+          Join early access
+        </RouterLink>
+        <a class="btn btn--ghost btn--lg" :href="panelUrl + '/login'">
+          <Icon name="play" :size="17" />View live demo
+        </a>
+      </div>
+    </div>
+  </section>
 </template>
+
+<style scoped>
+.plan__feats {
+  list-style: none;
+  padding: 0;
+  margin: 16px 0 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+.plan__feats li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+.plan__feats li svg { margin-top: 1px; }
+
+/* Comparison table */
+.compare-table {
+  max-width: 1040px;
+  margin: 0 auto;
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  box-shadow: var(--ring-default);
+}
+.compare-table__head,
+.compare-table__row {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1.2fr 1fr;
+  align-items: center;
+}
+.compare-table__head {
+  background: var(--surface-raised-2);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-caps);
+  color: var(--text-muted);
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.compare-table__head > div,
+.compare-table__row > div {
+  padding: 2px 8px;
+  text-align: center;
+}
+.compare-table__head > div:first-child,
+.compare-table__row > div:first-child {
+  text-align: left;
+  padding-left: 0;
+}
+.compare-table__row {
+  background: var(--surface-base);
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  padding: 11px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.compare-table__row:last-child { border-bottom: none; }
+.compare-table__label { color: var(--text-secondary); font-weight: 500; }
+.compare-table__featured {
+  background: var(--accent-soft);
+  color: var(--accent-text) !important;
+  font-weight: 600;
+}
+</style>

frontend/src/views/marketing/RoadmapView.vue

@@ -1,146 +1,353 @@
 <script setup lang="ts">
-import { Check, Circle } from 'lucide-vue-next'
+import { onMounted, onUnmounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import Icon from '@/components/ds/core/Icon.vue'
+import CorrosionMark from '@/components/brand/CorrosionMark.vue'
 
-interface Phase {
-  name: string
-  label: string
-  status: 'complete' | 'current' | 'upcoming'
-  items: { text: string; done: boolean }[]
+const panelUrl = import.meta.env.VITE_PANEL_URL ?? ''
+
+type Status = 'shipped' | 'in-progress' | 'planned'
+
+interface RoadmapItem {
+  text: string
+  note?: string
 }
 
-const phases: Phase[] = [
+interface RoadmapGroup {
+  status: Status
+  label: string
+  description: string
+  items: RoadmapItem[]
+}
+
+const groups: RoadmapGroup[] = [
   {
-    name: 'Phase 1',
-    label: 'Foundation',
-    status: 'complete',
+    status: 'shipped',
+    label: 'Phase 1 — Foundation',
+    description:
+      'The core control plane is live. Rust server operators can install the agent, connect their server, and manage it entirely from the panel.',
     items: [
-      { text: 'Core control plane', done: true },
-      { text: 'Auto-Wiper with rollback', done: true },
-      { text: 'Plugin management', done: true },
-      { text: 'Public server site', done: true },
+      { text: 'Host agent (Windows + Linux)', note: 'Go binary, outbound NATS, zero inbound ports' },
+      { text: 'Core control plane', note: 'NestJS API, multi-tenant PostgreSQL, JWT RBAC' },
+      { text: 'Auto-wiper with rollback', note: 'Map, BP, and full wipes as verified sequences' },
+      { text: 'Plugin management', note: 'Rust uMod/Oxide — browse, install, configure from the browser' },
+      { text: 'Real-time console', note: 'NATS-bridged live output' },
+      { text: 'File manager', note: 'Browser-based file access via the agent' },
+      { text: 'Scheduled tasks and maintenance windows' },
+      { text: 'Player management and RBAC team access' },
+      { text: 'Public server page', note: 'Live status, wipe countdown, player count' },
+      { text: 'SteamCMD game update automation' },
+      { text: 'Discord and notification webhooks' },
     ],
   },
   {
-    name: 'Phase 2',
-    label: 'Analytics',
-    status: 'current',
+    status: 'in-progress',
+    label: 'Multi-game expansion',
+    description:
+      'The agent and control plane are being extended with per-game blueprints. Rust is the reference implementation; Dune, Conan, and Soulmask follow the same agent model with game-specific operational logic.',
     items: [
-      { text: 'Player retention tracking', done: false },
-      { text: 'Wipe performance insights', done: false },
-      { text: 'Population heatmaps', done: false },
+      { text: 'Dune: Awakening blueprint', note: 'Deep Desert wipe scheduling, battlegroup lifecycle' },
+      { text: 'Conan Exiles blueprint', note: 'Persistent world management, mod support, purge tracking' },
+      { text: 'Soulmask blueprint', note: 'Linked-world cluster deployment, port automation' },
+      { text: 'Multi-instance host runtime', note: 'One agent managing N game processes on the same machine' },
+      { text: 'Per-game wipe and event scheduling' },
     ],
   },
   {
-    name: 'Phase 3',
-    label: 'Status Platform',
-    status: 'upcoming',
+    status: 'planned',
+    label: 'API access and integrations',
+    description:
+      'Operator-grade API access so you can build your own tooling on top of the Corrosion control plane.',
     items: [
-      { text: 'Public uptime tracking', done: false },
-      { text: 'Server health dashboard', done: false },
+      { text: 'Public REST API for server management' },
+      { text: 'Webhook events (wipe completed, server down, player banned)' },
+      { text: 'API key management per license' },
     ],
   },
   {
-    name: 'Phase 4',
-    label: 'Module Marketplace',
-    status: 'upcoming',
+    status: 'planned',
+    label: 'Integrated storefront',
+    description:
+      'A native store layer for server communities — item catalog, VIP packages, and automated in-game delivery. No Tebex dependency required.',
     items: [
-      { text: 'Loot manager', done: false },
-      { text: 'Event systems', done: false },
-      { text: 'Advanced gameplay modules', done: false },
+      { text: 'Item catalog and categories' },
+      { text: 'PayPal and Stripe payment processing' },
+      { text: 'Automated in-game delivery via RCON/agent' },
+      { text: 'Transaction history and revenue dashboard' },
     ],
   },
   {
-    name: 'Phase 5',
-    label: 'Integrated Webstore',
-    status: 'upcoming',
+    status: 'planned',
+    label: 'Fleet management for hosting partners',
+    description:
+      'Tools for hosting providers and multi-server operations running 50+ instances across multiple physical hosts.',
     items: [
-      { text: 'Native item store', done: false },
-      { text: 'Automated delivery', done: false },
-      { text: 'Revenue dashboard', done: false },
+      { text: 'Fleet-level dashboards and health monitoring' },
+      { text: 'Multi-host agent orchestration' },
+      { text: 'Bulk wipe and update scheduling across a fleet' },
+      { text: 'Fleet Block capacity management' },
     ],
   },
   {
-    name: 'Phase 6',
-    label: 'B2B Hosting Integration',
-    status: 'upcoming',
+    status: 'planned',
+    label: 'More games',
+    description:
+      'Corrosion\'s agent model is not Rust-specific. The platform is being designed to support any game that can be managed via process control, file operations, and RCON-style commands.',
     items: [
-      { text: 'White-label panel', done: false },
-      { text: 'Bulk license provisioning', done: false },
-      { text: 'SSO integration', done: false },
+      { text: 'Additional survival and sandbox games' },
+      { text: 'Community-requested game blueprints' },
     ],
   },
 ]
 
-function phaseStatusClass(status: string): string {
-  switch (status) {
-    case 'complete': return 'bg-green-500/10 text-green-400 border-green-500/20'
-    case 'current': return 'bg-oxide-500/10 text-oxide-400 border-oxide-500/20'
-    default: return 'bg-neutral-800 text-neutral-500 border-neutral-700'
-  }
+function statusLabel(s: Status): string {
+  if (s === 'shipped') return 'Shipped'
+  if (s === 'in-progress') return 'In progress'
+  return 'Planned'
 }
 
-function phaseStatusLabel(status: string): string {
-  switch (status) {
-    case 'complete': return 'Shipped'
-    case 'current': return 'In Progress'
-    default: return 'Planned'
-  }
+function statusIcon(s: Status): string {
+  if (s === 'shipped') return 'check'
+  if (s === 'in-progress') return 'refresh-cw'
+  return 'circle'
 }
+
+// Scroll-reveal
+let io: IntersectionObserver | null = null
+
+function initReveal(): void {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+  io = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((e) => {
+        if (e.isIntersecting) {
+          e.target.classList.add('in')
+          io?.unobserve(e.target)
+        }
+      })
+    },
+    { threshold: 0.1 },
+  )
+  document.querySelectorAll('.reveal').forEach((el) => io?.observe(el))
+}
+
+onMounted(() => { initReveal() })
+onUnmounted(() => { io?.disconnect() })
 </script>
 
 <template>
-  <div>
-    <!-- Header -->
-    <section class="pt-20 pb-12">
-      <div class="max-w-4xl mx-auto px-6 text-center">
-        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4">Roadmap</h1>
-        <p class="text-lg text-neutral-400">
-          Corrosion isn't a single plugin release. It's infrastructure for the Rust ecosystem.
-        </p>
+  <!-- PAGE HEADER -->
+  <section class="hero" style="padding-bottom:0; border-bottom:none;">
+    <div class="hero__atmo" />
+    <div class="hero__grid" />
+    <div class="hero__grain" />
+    <div class="wrap hero__in" style="padding-bottom:52px;">
+      <div class="hero__mark">
+        <CorrosionMark :size="56" />
       </div>
-    </section>
+      <span class="eyebrow">Roadmap</span>
+      <h1 style="font-size:var(--text-5xl)">
+        Where Corrosion
+        <span class="accent">is going.</span>
+      </h1>
+      <p class="hero__sub">
+        No specific dates. No fabricated percentages. Status labels only: Shipped, In progress,
+        Planned. This roadmap reflects what is actually being built.
+      </p>
+    </div>
+  </section>
 
-    <!-- Timeline -->
-    <section class="pb-20">
-      <div class="max-w-3xl mx-auto px-6">
-        <div class="space-y-6">
-          <div
-            v-for="phase in phases"
-            :key="phase.name"
-            class="bg-neutral-900 border rounded-xl p-8 transition-colors"
-            :class="phase.status === 'current' ? 'border-oxide-500/30' : 'border-neutral-800'"
-          >
-            <div class="flex items-center justify-between mb-5">
-              <div>
-                <span class="text-xs font-bold text-neutral-500 uppercase tracking-wider">{{ phase.name }}</span>
-                <h3 class="text-xl font-bold text-neutral-100">{{ phase.label }}</h3>
-              </div>
-              <span
-                class="text-xs font-semibold px-3 py-1 rounded-full border"
-                :class="phaseStatusClass(phase.status)"
-              >
-                {{ phaseStatusLabel(phase.status) }}
-              </span>
-            </div>
-            <ul class="space-y-3">
-              <li
-                v-for="item in phase.items"
-                :key="item.text"
-                class="flex items-center gap-3"
-              >
-                <Check v-if="item.done" class="w-4 h-4 text-green-400 shrink-0" />
-                <Circle v-else class="w-4 h-4 text-neutral-600 shrink-0" />
-                <span
-                  class="text-sm"
-                  :class="item.done ? 'text-neutral-300' : 'text-neutral-500'"
-                >
-                  {{ item.text }}
-                </span>
-              </li>
-            </ul>
-          </div>
+  <!-- STATUS LEGEND -->
+  <section class="sec" style="padding:32px 0; border-bottom: 1px solid var(--border-subtle);">
+    <div class="wrap">
+      <div class="rm-legend reveal">
+        <div class="rm-badge rm-badge--shipped">
+          <Icon name="check" :size="13" />Shipped
+        </div>
+        <div class="rm-badge rm-badge--progress">
+          <Icon name="refresh-cw" :size="13" />In progress
+        </div>
+        <div class="rm-badge rm-badge--planned">
+          <Icon name="circle" :size="13" />Planned
         </div>
       </div>
-    </section>
-  </div>
+    </div>
+  </section>
+
+  <!-- ROADMAP GROUPS -->
+  <section class="sec" id="roadmap">
+    <div class="wrap">
+      <div
+        v-for="group in groups"
+        :key="group.label"
+        class="rm-group reveal"
+        :data-status="group.status"
+      >
+        <div class="rm-group__head">
+          <div
+            class="rm-group__badge"
+            :class="`rm-badge--${group.status}`"
+          >
+            <Icon :name="statusIcon(group.status)" :size="13" />
+            {{ statusLabel(group.status) }}
+          </div>
+          <h3 class="rm-group__title">{{ group.label }}</h3>
+        </div>
+        <p class="rm-group__desc">{{ group.description }}</p>
+        <ul class="rm-group__list">
+          <li
+            v-for="item in group.items"
+            :key="item.text"
+            class="rm-item"
+          >
+            <span class="rm-item__dot" :class="`rm-item__dot--${group.status}`" />
+            <span>
+              {{ item.text }}
+              <span v-if="item.note" class="rm-item__note">— {{ item.note }}</span>
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+
+  <!-- HONEST NOTE -->
+  <section class="sec" style="padding:40px 0; border-bottom:none;">
+    <div class="wrap">
+      <div class="closing reveal">
+        This roadmap reflects real development priorities, not marketing promises.
+        Timelines are not published because they depend on real-world testing and operator
+        feedback. <span class="accent">Join early access to influence what gets built next.</span>
+      </div>
+      <div class="hero__cta reveal" style="margin-top:28px">
+        <RouterLink class="btn btn--primary btn--lg" :to="{ name: 'early-access' }">
+          Join early access
+        </RouterLink>
+        <a class="btn btn--ghost btn--lg" :href="panelUrl + '/login'">
+          <Icon name="play" :size="17" />View live demo
+        </a>
+      </div>
+    </div>
+  </section>
 </template>
+
+<style scoped>
+/* Legend */
+.rm-legend {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+/* Badges */
+.rm-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 10px;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+}
+.rm-badge--shipped {
+  background: color-mix(in srgb, var(--status-online) 14%, transparent);
+  color: var(--status-online);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-online) 28%, transparent);
+}
+.rm-badge--in-progress, .rm-badge--progress {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.rm-badge--planned {
+  background: var(--surface-raised-2);
+  color: var(--text-muted);
+  box-shadow: var(--ring-default);
+}
+
+/* Groups */
+.rm-group {
+  max-width: 860px;
+  margin: 0 auto 40px;
+  padding: 28px 28px 24px;
+  background: var(--surface-base);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--ring-default);
+}
+.rm-group[data-status="in-progress"] {
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.rm-group[data-status="shipped"] {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-online) 22%, transparent);
+}
+.rm-group__head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+.rm-group__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 10px;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  flex: none;
+}
+.rm-group__title {
+  font-family: var(--font-brand);
+  font-weight: 700;
+  font-size: var(--text-xl);
+  margin: 0;
+}
+.rm-group__desc {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  line-height: 1.6;
+  margin: 0 0 18px;
+  max-width: 680px;
+}
+.rm-group__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.rm-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+.rm-item__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex: none;
+  margin-top: 5px;
+}
+.rm-item__dot--shipped { background: var(--status-online); }
+.rm-item__dot--in-progress { background: var(--accent); }
+.rm-item__dot--planned {
+  background: transparent;
+  box-shadow: inset 0 0 0 1.5px var(--text-muted);
+}
+.rm-item__note {
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+}
+</style>

frontend/vite.config.ts

@@ -2,12 +2,18 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import tailwindcss from '@tailwindcss/vite'
 import { fileURLToPath, URL } from 'node:url'
+import { readFileSync } from 'node:fs'
+
+const pkg = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf-8'))
 
 export default defineConfig({
   plugins: [
     vue(),
     tailwindcss(),
   ],
+  define: {
+    __APP_VERSION__: JSON.stringify(pkg.version),
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),