feat(panel): add modular landing page builder, public landing page, and hosted launcher downloads

panel/web/src/App.svelte

@@ -12,6 +12,8 @@
   import ServerDetail from './pages/ServerDetail.svelte';
   import Capes from './pages/Capes.svelte';
   import Activity from './pages/Activity.svelte';
+  import LandingBuilder from './pages/LandingBuilder.svelte';
+  import PublicLanding from './pages/PublicLanding.svelte';
   import { get } from './lib/api';
   import { route } from './lib/router.svelte';
   import { logout, session, type Me } from './lib/session.svelte';
@@ -40,7 +42,9 @@
     get('/api/v1/launcher/manifest')
       .then((m) => {
         brand = m.branding;
-        document.title = `${m.branding.name} · Admin`;
+        if (route.name !== 'landing') {
+          document.title = `${m.branding.name} · Admin`;
+        }
       })
       .catch(() => {});
   });
@@ -48,8 +52,14 @@
 
 {#if checking}
   <div class="boot"><span class="pulse"></span></div>
+{:else if route.name === 'landing'}
+  <PublicLanding />
 {:else if !session.user}
-  <Login brandName={brand.name} logo={brand.logo_url} />
+  {#if route.name === 'login'}
+    <Login brandName={brand.name} logo={brand.logo_url} />
+  {:else}
+    <PublicLanding />
+  {/if}
 {:else}
   <div class="shell">
     <Sidebar brandName={brand.name} logo={brand.logo_url} />
@@ -71,6 +81,8 @@
           <Users />
         {:else if route.name === 'branding'}
           <Branding onsaved={(b) => (brand = b)} />
+        {:else if route.name === 'landing-builder'}
+          <LandingBuilder />
         {:else if route.name === 'settings'}
           <Settings />
         {:else}

panel/web/src/components/Sidebar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { LayoutDashboard, Boxes, Users, Palette, Settings, LogOut, ExternalLink, Server, Flag } from '@lucide/svelte';
+  import { LayoutDashboard, Boxes, Users, Palette, Settings, LogOut, ExternalLink, Server, Flag, Globe } from '@lucide/svelte';
   import { route } from '../lib/router.svelte';
   import { logout, session } from '../lib/session.svelte';
   import Avatar from './Avatar.svelte';
@@ -14,6 +14,7 @@
     { id: 'activity', label: 'Activity', icon: LayoutDashboard },
     { id: 'capes', label: 'Capes', icon: Flag },
     { id: 'branding', label: 'Launcher design', icon: Palette },
+    { id: 'landing-builder', label: 'Landing page', icon: Globe },
     { id: 'settings', label: 'Settings', icon: Settings },
   ];
 </script>
@@ -38,6 +39,10 @@
 
   <div class="spacer"></div>
 
+  <a class="docs" href="#/landing" target="_blank" rel="noreferrer">
+    <Globe size={14} /> View landing page
+  </a>
+
   <a class="docs" href="https://github.com/scopeddlol/SCOPENET-MC#readme" target="_blank" rel="noreferrer">
     <ExternalLink size={14} /> Documentation
   </a>

panel/web/src/lib/types.ts

@@ -139,3 +139,47 @@ export interface ServerDetail {
 export interface UserActivity { servers: PlayerStats[]; events: ServerEvent[]; online_on: { id: number; name: string }[] }
 
 export type ServerDraft = { name: string; access: 'all' | 'members' | 'groups'; allowed_groups: string[]; require_launcher: boolean };
+
+export interface HostedDownload {
+  platform: 'windows' | 'mac' | 'linux';
+  label: string;
+  filename: string;
+  file_url: string;
+  size: number;
+  uploaded_at: string;
+}
+
+export interface FaqItem {
+  id: string;
+  question: string;
+  answer: string;
+}
+
+export type BlockType = 'hero' | 'download' | 'servers' | 'leaderboard' | 'stats' | 'instances' | 'news' | 'faq' | 'socials';
+
+export interface LandingBlock {
+  id: string;
+  type: BlockType;
+  enabled: boolean;
+  title?: string;
+  subtitle?: string;
+}
+
+export interface LandingConfig {
+  enabled: boolean;
+  brand_name: string;
+  logo_url: string | null;
+  tagline: string;
+  hero_title: string;
+  hero_subtitle: string;
+  hero_cta_text: string;
+  hero_bg_type: 'gradient' | 'image' | 'video';
+  hero_bg_url: string | null;
+  server_ip: string;
+  server_port: number;
+  hosted_downloads: HostedDownload[];
+  external_download_url: string | null;
+  blocks: LandingBlock[];
+  faqs: FaqItem[];
+  custom_css: string;
+}

panel/web/src/pages/LandingBuilder.svelte

@@ -0,0 +1,403 @@
+<script lang="ts">
+  import {
+    Save, LoaderCircle, Plus, Trash2, ArrowUp, ArrowDown, ExternalLink,
+    Upload, Globe, Sparkles, HelpCircle, Server, Trophy, BarChart3,
+    Boxes, Newspaper, MessageSquare, Download, Check, Eye, Code,
+  } from '@lucide/svelte';
+  import Toggle from '../components/Toggle.svelte';
+  import { api, get, put, formatBytes } from '../lib/api';
+  import { toast, toastError } from '../lib/toast.svelte';
+  import type { LandingConfig, BlockType, HostedDownload, FaqItem } from '../lib/types';
+
+  let config = $state<LandingConfig | null>(null);
+  let saved = $state('');
+  let saving = $state(false);
+  let uploading = $state(false);
+  let activeTab = $state<'blocks' | 'downloads' | 'faq' | 'css'>('blocks');
+
+  const blockMeta: Record<BlockType, { label: string; icon: any; desc: string }> = {
+    hero: { label: 'Hero Header', icon: Sparkles, desc: 'Top visual headline with CTA buttons and particle effects' },
+    download: { label: 'Launcher Download', icon: Download, desc: 'Hosted download cards for Windows, macOS, and Linux' },
+    servers: { label: 'Live Server Status', icon: Server, desc: 'Online player counts, MOTD, and 1-click IP copy' },
+    leaderboard: { label: 'Top Leaderboard', icon: Trophy, desc: 'Rankings of top players across the server' },
+    stats: { label: 'Stats Counters', icon: BarChart3, desc: 'Community stats: total playtime, players, blocks placed' },
+    instances: { label: 'Instances Showcase', icon: Boxes, desc: 'Featured modpacks and instances playable through the launcher' },
+    news: { label: 'News & Updates', icon: Newspaper, desc: 'Community updates and announcements feed' },
+    faq: { label: 'FAQ Accordion', icon: HelpCircle, desc: 'Frequently asked questions for new players' },
+    socials: { label: 'Social & Community', icon: MessageSquare, desc: 'Discord, YouTube, Store, and Twitter links' },
+  };
+
+  $effect(() => {
+    get<LandingConfig>('/api/admin/landing')
+      .then((cfg) => {
+        config = cfg;
+        saved = JSON.stringify(cfg);
+      })
+      .catch((e) => toastError(e));
+  });
+
+  const dirty = $derived(!!config && JSON.stringify(config) !== saved);
+  const winDownload = $derived(config?.hosted_downloads.find((d) => d.platform === 'windows'));
+  const macDownload = $derived(config?.hosted_downloads.find((d) => d.platform === 'mac'));
+  const linuxDownload = $derived(config?.hosted_downloads.find((d) => d.platform === 'linux'));
+
+  async function save() {
+    if (!config) return;
+    saving = true;
+    try {
+      const res = await put<LandingConfig>('/api/admin/landing', $state.snapshot(config));
+      config = res;
+      saved = JSON.stringify(res);
+      toast('Landing page updated successfully');
+    } catch (e) {
+      toastError(e);
+    } finally {
+      saving = false;
+    }
+  }
+
+  function moveBlock(index: number, dir: -1 | 1) {
+    if (!config) return;
+    const target = index + dir;
+    if (target < 0 || target >= config.blocks.length) return;
+    const item = config.blocks.splice(index, 1)[0];
+    config.blocks.splice(target, 0, item);
+  }
+
+  async function uploadInstaller(platform: string, label: string, file: File | undefined) {
+    if (!file) return;
+    uploading = true;
+    try {
+      const form = new FormData();
+      form.append('platform', platform);
+      form.append('label', label);
+      form.append('file', file);
+      const res = await api<LandingConfig>('/api/admin/landing/upload-launcher', {
+        method: 'POST',
+        form,
+      });
+      config = res;
+      saved = JSON.stringify(res);
+      toast(`Uploaded ${label} (${formatBytes(file.size)})`);
+    } catch (e) {
+      toastError(e);
+    } finally {
+      uploading = false;
+    }
+  }
+
+  function addFaq() {
+    if (!config) return;
+    config.faqs.push({
+      id: 'faq_' + Math.random().toString(36).slice(2, 9),
+      question: 'New Question',
+      answer: 'Write the answer here…',
+    });
+  }
+
+  function removeFaq(idx: number) {
+    if (!config) return;
+    config.faqs.splice(idx, 1);
+  }
+</script>
+
+{#if !config}
+  <div class="center-loading"><LoaderCircle size={28} class="spin" /></div>
+{:else}
+  <div class="page">
+    <header class="header">
+      <div class="title-area">
+        <div class="row align-center gap-sm">
+          <h1>Landing Page Builder</h1>
+          <span class="badge" class:on={config.enabled} class:off={!config.enabled}>
+            {config.enabled ? 'Live' : 'Disabled'}
+          </span>
+        </div>
+        <p class="sub">Modular public landing page for your Minecraft network and hosted launcher downloads.</p>
+      </div>
+
+      <div class="actions row align-center gap-sm">
+        <a href="#/landing" target="_blank" class="btn secondary">
+          <Eye size={15} /> View Live Page <ExternalLink size={13} />
+        </a>
+        <button class="btn primary" disabled={saving || !dirty} onclick={save}>
+          {#if saving}<LoaderCircle size={15} class="spin" />{:else}<Save size={15} />{/if}
+          Save Changes
+        </button>
+      </div>
+    </header>
+
+    <div class="tabs-bar">
+      <button class:active={activeTab === 'blocks'} onclick={() => (activeTab = 'blocks')}>
+        <Sparkles size={16} /> Modular Blocks
+      </button>
+      <button class:active={activeTab === 'downloads'} onclick={() => (activeTab = 'downloads')}>
+        <Download size={16} /> Launcher Downloads
+      </button>
+      <button class:active={activeTab === 'faq'} onclick={() => (activeTab = 'faq')}>
+        <HelpCircle size={16} /> FAQ Builder
+      </button>
+      <button class:active={activeTab === 'css'} onclick={() => (activeTab = 'css')}>
+        <Code size={16} /> Custom CSS
+      </button>
+    </div>
+
+    <div class="content">
+      {#if activeTab === 'blocks'}
+        <div class="col gap-lg">
+          <!-- Global Settings Card -->
+          <div class="card">
+            <h3>General & Hero Settings</h3>
+            <div class="grid-2">
+              <Toggle bind:checked={config.enabled} label="Enable Public Landing Page" help="When enabled, visitors to your domain see this landing page." />
+              <label class="field">
+                <span>Brand Name</span>
+                <input bind:value={config.brand_name} placeholder="e.g. SCOPENET" />
+              </label>
+            </div>
+            <div class="grid-2">
+              <label class="field">
+                <span>Brand Logo URL (Optional)</span>
+                <input bind:value={config.logo_url} placeholder="https://... or /favicon.svg" />
+              </label>
+              <label class="field">
+                <span>Tagline</span>
+                <input bind:value={config.tagline} placeholder="e.g. Your worlds, one click away." />
+              </label>
+            </div>
+            <div class="grid-2">
+              <label class="field">
+                <span>Server Join IP</span>
+                <input bind:value={config.server_ip} placeholder="e.g. play.myserver.com" />
+              </label>
+              <label class="field">
+                <span>Hero Headline</span>
+                <input bind:value={config.hero_title} placeholder="The Ultimate Minecraft Experience" />
+              </label>
+            </div>
+            <div class="grid-2">
+              <label class="field">
+                <span>Hero CTA Button Text</span>
+                <input bind:value={config.hero_cta_text} placeholder="Download Launcher" />
+              </label>
+            </div>
+            <label class="field">
+              <span>Hero Subtitle / Description</span>
+              <textarea bind:value={config.hero_subtitle} rows="2"></textarea>
+            </label>
+          </div>
+
+          <!-- Modular Blocks Reorder & Toggle Card -->
+          <div class="card">
+            <div class="row justify-between align-center">
+              <div>
+                <h3>Blocks Architecture</h3>
+                <p class="muted small">Toggle and reorder sections to build your custom landing page.</p>
+              </div>
+            </div>
+
+            <div class="blocks-list">
+              {#each config.blocks as block, idx (block.id)}
+                {@const meta = blockMeta[block.type as BlockType] || { label: block.type, icon: Sparkles, desc: '' }}
+                {@const Icon = meta.icon}
+                <div class="block-row" class:disabled={!block.enabled}>
+                  <div class="block-reorder">
+                    <button class="icon-btn" disabled={idx === 0} onclick={() => moveBlock(idx, -1)} title="Move up">
+                      <ArrowUp size={14} />
+                    </button>
+                    <button class="icon-btn" disabled={idx === config.blocks.length - 1} onclick={() => moveBlock(idx, 1)} title="Move down">
+                      <ArrowDown size={14} />
+                    </button>
+                  </div>
+
+                  <div class="block-icon">
+                    <Icon size={18} />
+                  </div>
+
+                  <div class="block-info grow">
+                    <div class="row align-center gap-xs">
+                      <strong>{meta.label}</strong>
+                      <span class="block-type-tag tiny muted">{block.type}</span>
+                    </div>
+                    <span class="tiny muted">{meta.desc}</span>
+                  </div>
+
+                  <div class="block-inputs row gap-sm align-center">
+                    {#if block.type !== 'hero'}
+                      <input
+                        bind:value={block.title}
+                        placeholder="Section title"
+                        class="sm-input"
+                        title="Custom section title"
+                      />
+                    {/if}
+                    <Toggle bind:checked={block.enabled} label="" />
+                  </div>
+                </div>
+              {/each}
+            </div>
+          </div>
+        </div>
+      {:else if activeTab === 'downloads'}
+        <div class="col gap-lg">
+          <div class="card">
+            <h3>Hosted Launcher Installers</h3>
+            <p class="muted small">Upload desktop launcher packages so visitors can download them directly from your panel.</p>
+
+            <div class="downloads-grid">
+              <!-- Windows -->
+              <div class="platform-card">
+                <div class="platform-header">
+                  <strong>Windows (.exe / .msi)</strong>
+                  {#if winDownload}<span class="badge on">Available</span>{:else}<span class="badge off">Not uploaded</span>{/if}
+                </div>
+                {#if winDownload}
+                  <div class="file-details tiny muted">
+                    <span>File: {winDownload.filename}</span>
+                    <span>Size: {formatBytes(winDownload.size)}</span>
+                  </div>
+                {/if}
+                <label class="btn secondary file-upload-btn" class:disabled={uploading}>
+                  <Upload size={14} /> {winDownload ? 'Replace Windows file' : 'Upload Windows file'}
+                  <input type="file" accept=".exe,.msi" onchange={(e) => uploadInstaller('windows', 'Windows Installer', e.currentTarget.files?.[0])} />
+                </label>
+              </div>
+
+              <!-- macOS -->
+              <div class="platform-card">
+                <div class="platform-header">
+                  <strong>macOS (.dmg / .zip)</strong>
+                  {#if macDownload}<span class="badge on">Available</span>{:else}<span class="badge off">Not uploaded</span>{/if}
+                </div>
+                {#if macDownload}
+                  <div class="file-details tiny muted">
+                    <span>File: {macDownload.filename}</span>
+                    <span>Size: {formatBytes(macDownload.size)}</span>
+                  </div>
+                {/if}
+                <label class="btn secondary file-upload-btn" class:disabled={uploading}>
+                  <Upload size={14} /> {macDownload ? 'Replace macOS file' : 'Upload macOS file'}
+                  <input type="file" accept=".dmg,.zip" onchange={(e) => uploadInstaller('mac', 'macOS Disk Image', e.currentTarget.files?.[0])} />
+                </label>
+              </div>
+
+              <!-- Linux -->
+              <div class="platform-card">
+                <div class="platform-header">
+                  <strong>Linux (.AppImage / .deb)</strong>
+                  {#if linuxDownload}<span class="badge on">Available</span>{:else}<span class="badge off">Not uploaded</span>{/if}
+                </div>
+                {#if linuxDownload}
+                  <div class="file-details tiny muted">
+                    <span>File: {linuxDownload.filename}</span>
+                    <span>Size: {formatBytes(linuxDownload.size)}</span>
+                  </div>
+                {/if}
+                <label class="btn secondary file-upload-btn" class:disabled={uploading}>
+                  <Upload size={14} /> {linuxDownload ? 'Replace Linux file' : 'Upload Linux file'}
+                  <input type="file" accept=".AppImage,.deb,.tar.gz" onchange={(e) => uploadInstaller('linux', 'Linux AppImage', e.currentTarget.files?.[0])} />
+                </label>
+              </div>
+            </div>
+
+            <div class="divider"></div>
+
+            <label class="field">
+              <span>External Launcher Download URL (Fallback)</span>
+              <input bind:value={config.external_download_url} placeholder="https://github.com/.../releases/latest" />
+              <span class="help">If no hosted file matches the visitor's operating system, they will be sent to this link.</span>
+            </label>
+          </div>
+        </div>
+      {:else if activeTab === 'faq'}
+        <div class="col gap-lg">
+          <div class="card">
+            <div class="row justify-between align-center">
+              <div>
+                <h3>Frequently Asked Questions</h3>
+                <p class="muted small">Add common questions and helpful answers for your community.</p>
+              </div>
+              <button class="btn secondary sm" onclick={addFaq}>
+                <Plus size={15} /> Add FAQ Item
+              </button>
+            </div>
+
+            <div class="faq-list">
+              {#each config.faqs as faq, idx (faq.id)}
+                <div class="faq-card">
+                  <div class="faq-top row justify-between align-center">
+                    <span class="tiny muted font-bold">Item #{idx + 1}</span>
+                    <button class="icon-btn danger" onclick={() => removeFaq(idx)} title="Remove item">
+                      <Trash2 size={14} />
+                    </button>
+                  </div>
+                  <label class="field">
+                    <span>Question</span>
+                    <input bind:value={faq.question} placeholder="e.g. How do I join the server?" />
+                  </label>
+                  <label class="field">
+                    <span>Answer</span>
+                    <textarea bind:value={faq.answer} rows="2" placeholder="Explain the answer clearly…"></textarea>
+                  </label>
+                </div>
+              {:else}
+                <p class="muted small">No questions yet. Click "Add FAQ Item" above.</p>
+              {/each}
+            </div>
+          </div>
+        </div>
+      {:else if activeTab === 'css'}
+        <div class="col gap-lg">
+          <div class="card">
+            <h3>Custom CSS</h3>
+            <p class="muted small">Add CSS rules to override fonts, colors, animations, or styling on the public landing page.</p>
+            <textarea bind:value={config.custom_css} rows="12" class="mono code-box" placeholder="/* Custom styling for landing page */"></textarea>
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .page { padding: 24px 32px 64px; max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
+  .header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
+  .title-area h1 { font-size: 24px; font-weight: 700; margin: 0; }
+  .sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
+  .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99rem; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
+  .badge.on { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
+  .badge.off { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
+  .tabs-bar { display: flex; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
+  .tabs-bar button { background: transparent; border: none; padding: 8px 14px; font-size: 14px; font-weight: 560; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s; }
+  .tabs-bar button:hover { color: var(--text); background: var(--surface-2); }
+  .tabs-bar button.active { color: var(--text); background: var(--surface-2); font-weight: 650; }
+  .card { padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 16px; }
+  .card h3 { margin: 0; font-size: 17px; font-weight: 650; }
+  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+  .field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 560; }
+  .field input, .field textarea { background: var(--bg); border: 1px solid var(--line); color: var(--text); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 14px; }
+  .field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
+  .blocks-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
+  .block-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--line); transition: opacity 0.15s, border-color 0.15s; }
+  .block-row.disabled { opacity: 0.55; }
+  .block-reorder { display: flex; flex-direction: column; gap: 2px; }
+  .block-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
+  .block-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+  .block-type-tag { text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; }
+  .sm-input { width: 180px; padding: 6px 10px; font-size: 12px; }
+  .downloads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 6px; }
+  .platform-card { padding: 16px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
+  .platform-header { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
+  .file-details { display: flex; flex-direction: column; gap: 2px; }
+  .file-upload-btn { position: relative; overflow: hidden; cursor: pointer; text-align: center; }
+  .file-upload-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+  .divider { height: 1px; background: var(--line); margin: 6px 0; }
+  .faq-list { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
+  .faq-card { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
+  .code-box { font-family: var(--mono); font-size: 13px; line-height: 1.5; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; color: var(--text); resize: vertical; }
+  .center-loading { display: grid; place-items: center; min-height: 300px; color: var(--accent); }
+  .icon-btn { background: transparent; border: none; padding: 4px; border-radius: 4px; color: var(--muted); cursor: pointer; }
+  .icon-btn:hover:not(:disabled) { color: var(--text); background: var(--surface-2); }
+  .icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+  .icon-btn.danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); }
+</style>

panel/web/src/pages/PublicLanding.svelte

@@ -0,0 +1,619 @@
+<script lang="ts">
+  import {
+    Download, Server, Users, Trophy, Sparkles, HelpCircle, Newspaper,
+    Copy, Check, ExternalLink, ChevronDown, ChevronUp, Swords, Flame,
+    Pickaxe, Clock, Box, Shield, Zap, ArrowRight, LogIn,
+  } from '@lucide/svelte';
+  import { get, formatBytes } from '../lib/api';
+  import { session } from '../lib/session.svelte';
+  import type { LandingConfig, HostedDownload, BlockType, FaqItem } from '../lib/types';
+
+  let config = $state<LandingConfig | null>(null);
+  let publicServers = $state<Array<{ id: number; name: string; online: boolean; players_online: number; players_max: number; software?: string; mc_version?: string }>>([]);
+  let leaderboard = $state<Array<{ uuid: string; name: string; playtime_secs: number; player_kills: number; mob_kills: number; blocks_broken: number; blocks_placed: number }>>([]);
+  let instances = $state<Array<{ id: string; name: string; description: string; mc_version: string; loader: string; file_count: number; logo_url: string | null; icon_url: string | null }>>([]);
+  let news = $state<Array<{ id: string; title: string; body: string; date: string | null; tag: string | null }>>([]);
+  let totalPlaytime = $state(0);
+  let totalPlayers = $state(0);
+  let lbSort = $state('playtime_secs');
+
+  let copied = $state(false);
+  let openFaq = $state<Record<string, boolean>>({});
+
+  // Detect user OS
+  const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent.toLowerCase() : '';
+  const detectedOS = userAgent.includes('mac') ? 'mac' : userAgent.includes('linux') ? 'linux' : 'windows';
+
+  function scrollToSection(id: string) {
+    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
+  }
+
+  function copyIp(ip: string) {
+    if (!ip) return;
+    navigator.clipboard.writeText(ip);
+    copied = true;
+    setTimeout(() => (copied = false), 2000);
+  }
+
+  function formatTime(secs: number): string {
+    if (!secs) return '0h';
+    const hours = Math.floor(secs / 3600);
+    const mins = Math.floor((secs % 3600) / 60);
+    if (hours > 0) return `${hours}h ${mins}m`;
+    return `${mins}m`;
+  }
+
+  function formatNumber(num: number): string {
+    return (num ?? 0).toLocaleString();
+  }
+
+  $effect(() => {
+    // 1. Load Landing Config
+    get<LandingConfig>('/api/v1/landing')
+      .then((cfg) => {
+        config = cfg;
+        if (cfg.custom_css) {
+          const style = document.createElement('style');
+          style.textContent = cfg.custom_css;
+          document.head.appendChild(style);
+        }
+      })
+      .catch(() => {});
+
+    // 2. Load Public Servers
+    get<{ servers: typeof publicServers }>('/api/v1/servers/public')
+      .then((res) => (publicServers = res.servers || []))
+      .catch(() => {});
+
+    // 3. Load Leaderboard
+    get<{ leaderboard: typeof leaderboard; totals: { players: number; playtime_secs: number } }>(`/api/v1/leaderboard?sort=${lbSort}`)
+      .then((res) => {
+        leaderboard = res.leaderboard || [];
+        totalPlayers = res.totals?.players || 0;
+        totalPlaytime = res.totals?.playtime_secs || 0;
+      })
+      .catch(() => {});
+
+    // 4. Load Manifest (instances & news)
+    get<any>('/api/v1/launcher/manifest')
+      .then((res) => {
+        instances = res.instances || [];
+        news = res.branding?.news || [];
+      })
+      .catch(() => {});
+  });
+
+  $effect(() => {
+    void lbSort;
+    get<{ leaderboard: typeof leaderboard }>(`/api/v1/leaderboard?sort=${lbSort}`)
+      .then((res) => (leaderboard = res.leaderboard || []))
+      .catch(() => {});
+  });
+
+  const primaryDownload = $derived(
+    config?.hosted_downloads.find((d) => d.platform === detectedOS) ??
+    config?.hosted_downloads[0] ??
+    null
+  );
+
+  const totalOnline = $derived(publicServers.reduce((sum, s) => sum + (s.online ? s.players_online : 0), 0));
+  const top3 = $derived(leaderboard.slice(0, 3));
+  const restLb = $derived(leaderboard.slice(3, 10));
+</script>
+
+<svelte:head>
+  <title>{config?.brand_name ?? 'SCOPENET'} · Official Server & Launcher</title>
+</svelte:head>
+
+<div class="landing-wrap">
+  <!-- Navigation Header -->
+  <header class="navbar">
+    <div class="nav-container">
+      <div class="brand-group">
+        {#if config?.logo_url}
+          <img src={config.logo_url} alt="" class="brand-img" />
+        {:else}
+          <span class="brand-logo"></span>
+        {/if}
+        <strong class="brand-title">{config?.brand_name ?? 'SCOPENET'}</strong>
+      </div>
+
+      <nav class="nav-links">
+        <button type="button" class="nav-link-btn" onclick={() => scrollToSection('servers')}>Servers</button>
+        <button type="button" class="nav-link-btn" onclick={() => scrollToSection('leaderboard')}>Leaderboard</button>
+        <button type="button" class="nav-link-btn" onclick={() => scrollToSection('download')}>Downloads</button>
+        <button type="button" class="nav-link-btn" onclick={() => scrollToSection('faq')}>FAQ</button>
+      </nav>
+
+      <div class="nav-actions">
+        {#if config?.server_ip}
+          <button class="ip-pill" onclick={() => copyIp(config?.server_ip ?? '')} title="Click to copy IP">
+            <span class="pulse-dot"></span>
+            <span class="ip-text">{config.server_ip}</span>
+            <span class="copy-badge">
+              {#if copied}<Check size={13} /> Copied!{:else}<Copy size={13} /> Copy{/if}
+            </span>
+          </button>
+        {/if}
+
+        {#if session.user}
+          <a href="#/dashboard" class="nav-login-btn">
+            Admin Panel &rarr;
+          </a>
+        {:else}
+          <a href="#/login" class="nav-login-btn">
+            <LogIn size={14} /> Admin
+          </a>
+        {/if}
+      </div>
+    </div>
+  </header>
+
+  <!-- Modular Blocks -->
+  <main class="blocks">
+    {#if config}
+      {#each config.blocks.filter((b) => b.enabled) as block (block.id)}
+        {#if block.type === 'hero'}
+          <!-- Hero Section -->
+          <section class="hero-block" id="hero">
+            <div class="hero-bg-glow"></div>
+            <div class="container hero-content">
+              <div class="hero-badge">
+                <span class="hero-badge-dot"></span>
+                <span>{totalOnline} Players Online Now</span>
+              </div>
+
+              <h1 class="hero-title">{config.hero_title}</h1>
+              <p class="hero-sub">{config.hero_subtitle}</p>
+
+              <div class="hero-cta-group">
+                {#if primaryDownload}
+                  <a href={primaryDownload.file_url} class="btn-hero-primary" download>
+                    <Download size={20} />
+                    <div class="cta-text-group">
+                      <span class="cta-main">{config.hero_cta_text}</span>
+                      <span class="cta-sub">for {primaryDownload.label} ({formatBytes(primaryDownload.size)})</span>
+                    </div>
+                  </a>
+                {:else if config.external_download_url}
+                  <a href={config.external_download_url} target="_blank" class="btn-hero-primary">
+                    <Download size={20} />
+                    <div class="cta-text-group">
+                      <span class="cta-main">{config.hero_cta_text}</span>
+                      <span class="cta-sub">Download Latest Release</span>
+                    </div>
+                  </a>
+                {:else}
+                  <button type="button" class="btn-hero-primary" onclick={() => scrollToSection('download')}>
+                    <Download size={20} />
+                    <span class="cta-main">{config.hero_cta_text}</span>
+                  </button>
+                {/if}
+
+                {#if config.server_ip}
+                  <button class="btn-hero-secondary" onclick={() => copyIp(config?.server_ip ?? '')}>
+                    {#if copied}<Check size={18} /> Copied Server IP{:else}<Copy size={18} /> Copy Server IP{/if}
+                  </button>
+                {/if}
+              </div>
+            </div>
+          </section>
+
+        {:else if block.type === 'download'}
+          <!-- Downloads Section -->
+          <section class="section" id="download">
+            <div class="container">
+              <div class="section-head">
+                <h2>{block.title || 'Get the Launcher'}</h2>
+                <p class="muted">{block.subtitle || 'Custom modpack synchronisation, fast Java auto-updates, and HD skin wardrobe.'}</p>
+              </div>
+
+              <div class="downloads-cards-grid">
+                {#each config.hosted_downloads as d}
+                  <div class="download-card" class:recommended={d.platform === detectedOS}>
+                    {#if d.platform === detectedOS}
+                      <span class="recommended-badge">Your Operating System</span>
+                    {/if}
+                    <div class="download-card-icon">
+                      <Download size={28} />
+                    </div>
+                    <h3>{d.label}</h3>
+                    <p class="tiny muted">{d.filename} · {formatBytes(d.size)}</p>
+                    <a href={d.file_url} class="btn-download" download>
+                      Download <ArrowRight size={15} />
+                    </a>
+                  </div>
+                {:else}
+                  {#if config.external_download_url}
+                    <div class="download-card full-span">
+                      <h3>Download SCOPENET Launcher</h3>
+                      <p class="muted">Get the latest launcher package directly from our release repository.</p>
+                      <a href={config.external_download_url} target="_blank" class="btn-download">
+                        Download from Repository <ExternalLink size={15} />
+                      </a>
+                    </div>
+                  {:else}
+                    <p class="muted center">No downloads currently configured. Check back soon!</p>
+                  {/if}
+                {/each}
+              </div>
+            </div>
+          </section>
+
+        {:else if block.type === 'servers'}
+          <!-- Servers Section -->
+          <section class="section alt-bg" id="servers">
+            <div class="container">
+              <div class="section-head">
+                <h2>{block.title || 'Live Game Servers'}</h2>
+                <p class="muted">{block.subtitle || 'Connect to our high-performance Minecraft worlds.'}</p>
+              </div>
+
+              {#if publicServers.length}
+                <div class="servers-grid">
+                  {#each publicServers as s}
+                    <div class="server-card">
+                      <div class="server-card-top">
+                        <div class="server-status-pill" class:online={s.online}>
+                          <span class="dot"></span>
+                          <span>{s.online ? `${s.players_online} / ${s.players_max} Online` : 'Offline'}</span>
+                        </div>
+                        {#if s.mc_version}
+                          <span class="mc-ver-tag tiny">{s.mc_version}</span>
+                        {/if}
+                      </div>
+
+                      <h3 class="server-card-title">{s.name}</h3>
+                      <div class="server-card-bottom">
+                        <button class="server-copy-btn" onclick={() => copyIp(config?.server_ip ?? '')}>
+                          <span>{config?.server_ip || 'play.server.com'}</span>
+                          <Copy size={13} />
+                        </button>
+                      </div>
+                    </div>
+                  {/each}
+                </div>
+              {:else}
+                <div class="empty-state-box">
+                  <Server size={32} class="muted" />
+                  <p class="muted">No public servers listed yet.</p>
+                </div>
+              {/if}
+            </div>
+          </section>
+
+        {:else if block.type === 'leaderboard'}
+          <!-- Leaderboard Section -->
+          <section class="section" id="leaderboard">
+            <div class="container">
+              <div class="section-head">
+                <h2>{block.title || 'Community Leaderboards'}</h2>
+                <p class="muted">{block.subtitle || 'Top players and champions across our Minecraft network.'}</p>
+              </div>
+
+              <div class="sort-chips-bar">
+                {#each [
+                  { id: 'playtime_secs', label: 'Playtime', icon: Clock },
+                  { id: 'player_kills', label: 'Player Kills', icon: Swords },
+                  { id: 'mob_kills', label: 'Mob Kills', icon: Flame },
+                  { id: 'blocks_broken', label: 'Blocks Mined', icon: Pickaxe },
+                ] as opt}
+                  {@const Icon = opt.icon}
+                  <button class="sort-chip" class:active={lbSort === opt.id} onclick={() => (lbSort = opt.id)}>
+                    <Icon size={14} /> {opt.label}
+                  </button>
+                {/each}
+              </div>
+
+              {#if leaderboard.length}
+                <!-- Podium -->
+                {#if top3.length > 0}
+                  <div class="podium-row">
+                    {#if top3[1]}
+                      <div class="podium-item silver">
+                        <span class="medal">🥈</span>
+                        <strong>{top3[1].name}</strong>
+                        <span class="podium-val">
+                          {lbSort === 'playtime_secs' ? formatTime(top3[1].playtime_secs) : formatNumber(top3[1][lbSort as keyof typeof top3[1]] as number)}
+                        </span>
+                      </div>
+                    {/if}
+                    {#if top3[0]}
+                      <div class="podium-item gold">
+                        <span class="medal">👑</span>
+                        <strong>{top3[0].name}</strong>
+                        <span class="podium-val">
+                          {lbSort === 'playtime_secs' ? formatTime(top3[0].playtime_secs) : formatNumber(top3[0][lbSort as keyof typeof top3[0]] as number)}
+                        </span>
+                      </div>
+                    {/if}
+                    {#if top3[2]}
+                      <div class="podium-item bronze">
+                        <span class="medal">🥉</span>
+                        <strong>{top3[2].name}</strong>
+                        <span class="podium-val">
+                          {lbSort === 'playtime_secs' ? formatTime(top3[2].playtime_secs) : formatNumber(top3[2][lbSort as keyof typeof top3[2]] as number)}
+                        </span>
+                      </div>
+                    {/if}
+                  </div>
+                {/if}
+
+                <!-- Leaderboard Table -->
+                <div class="lb-table-wrap">
+                  <div class="lb-table-head">
+                    <span>Rank</span>
+                    <span>Player</span>
+                    <span class="text-right">Score</span>
+                    <span class="text-right">Playtime</span>
+                    <span class="text-right">Kills</span>
+                  </div>
+                  {#each restLb as row, i (row.uuid)}
+                    <div class="lb-table-row">
+                      <span class="rank-num">#{i + 4}</span>
+                      <strong class="player-name">{row.name}</strong>
+                      <span class="score-highlight text-right">
+                        {lbSort === 'playtime_secs' ? formatTime(row.playtime_secs) : formatNumber(row[lbSort as keyof typeof row] as number)}
+                      </span>
+                      <span class="muted text-right">{formatTime(row.playtime_secs)}</span>
+                      <span class="muted text-right">{row.player_kills}</span>
+                    </div>
+                  {/each}
+                </div>
+              {:else}
+                <div class="empty-state-box">
+                  <Trophy size={32} class="muted" />
+                  <p class="muted">No leaderboard data recorded yet.</p>
+                </div>
+              {/if}
+            </div>
+          </section>
+
+        {:else if block.type === 'stats'}
+          <!-- Stats Highlights Section -->
+          <section class="section alt-bg" id="stats">
+            <div class="container">
+              <div class="section-head">
+                <h2>{block.title || 'Network Highlights'}</h2>
+                <p class="muted">{block.subtitle || 'Live statistics computed across all connected servers.'}</p>
+              </div>
+
+              <div class="stats-counter-grid">
+                <div class="counter-card">
+                  <span class="counter-num">{formatNumber(totalPlayers)}</span>
+                  <span class="counter-label">Total Players</span>
+                </div>
+                <div class="counter-card">
+                  <span class="counter-num">{formatTime(totalPlaytime)}</span>
+                  <span class="counter-label">Time Explored</span>
+                </div>
+                <div class="counter-card">
+                  <span class="counter-num">{publicServers.length}</span>
+                  <span class="counter-label">Connected Servers</span>
+                </div>
+                <div class="counter-card">
+                  <span class="counter-num">{instances.length}</span>
+                  <span class="counter-label">Modpack Instances</span>
+                </div>
+              </div>
+            </div>
+          </section>
+
+        {:else if block.type === 'instances'}
+          <!-- Instances Showcase Section -->
+          {#if instances.length}
+            <section class="section" id="instances">
+              <div class="container">
+                <div class="section-head">
+                  <h2>{block.title || 'Available Instances'}</h2>
+                  <p class="muted">{block.subtitle || 'Optimized modpacks ready to play through our custom launcher.'}</p>
+                </div>
+
+                <div class="instances-cards-grid">
+                  {#each instances as inst}
+                    <div class="inst-card">
+                      <div class="inst-card-top">
+                        <span class="badge mc-tag">{inst.mc_version}</span>
+                        <span class="badge loader-tag">{inst.loader}</span>
+                      </div>
+                      <h3>{inst.name}</h3>
+                      <p class="muted small">{inst.description || 'Pre-configured instance with automated mod updates.'}</p>
+                      <div class="inst-card-footer tiny muted">
+                        <span>{inst.file_count} mods & files</span>
+                      </div>
+                    </div>
+                  {/each}
+                </div>
+              </div>
+            </section>
+          {/if}
+
+        {:else if block.type === 'news'}
+          <!-- News Section -->
+          {#if news.length}
+            <section class="section alt-bg" id="news">
+              <div class="container">
+                <div class="section-head">
+                  <h2>{block.title || 'Latest News'}</h2>
+                  <p class="muted">{block.subtitle || 'Community events, server updates, and patch notes.'}</p>
+                </div>
+
+                <div class="news-cards-grid">
+                  {#each news as item}
+                    <div class="news-card">
+                      {#if item.tag}<span class="news-tag">{item.tag}</span>{/if}
+                      <h3>{item.title}</h3>
+                      <p class="muted small">{item.body}</p>
+                      {#if item.date}<span class="tiny muted">{item.date}</span>{/if}
+                    </div>
+                  {/each}
+                </div>
+              </div>
+            </section>
+          {/if}
+
+        {:else if block.type === 'faq'}
+          <!-- FAQ Section -->
+          <section class="section" id="faq">
+            <div class="container max-w-narrow">
+              <div class="section-head">
+                <h2>{block.title || 'Frequently Asked Questions'}</h2>
+                <p class="muted">{block.subtitle || 'Got questions? We have answers.'}</p>
+              </div>
+
+              <div class="faq-accordion">
+                {#each config.faqs as faq}
+                  {@const isOpen = !!openFaq[faq.id]}
+                  <div class="faq-item" class:open={isOpen}>
+                    <button class="faq-q-btn" onclick={() => (openFaq[faq.id] = !isOpen)}>
+                      <span>{faq.question}</span>
+                      {#if isOpen}<ChevronUp size={18} />{:else}<ChevronDown size={18} />{/if}
+                    </button>
+                    {#if isOpen}
+                      <div class="faq-ans">
+                        <p>{faq.answer}</p>
+                      </div>
+                    {/if}
+                  </div>
+                {/each}
+              </div>
+            </div>
+          </section>
+        {/if}
+      {/each}
+    {/if}
+  </main>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <div class="container footer-content">
+      <div class="footer-left">
+        {#if config?.logo_url}
+          <img src={config.logo_url} alt="" class="brand-img" />
+        {/if}
+        <strong>{config?.brand_name ?? 'SCOPENET'}</strong>
+        <p class="tiny muted">Your worlds, one click away.</p>
+      </div>
+      <div class="footer-right tiny muted">
+        <span>Minecraft is a trademark of Mojang Studios. Not affiliated with Mojang or Microsoft.</span>
+        <span>Powered by SCOPENET.</span>
+      </div>
+    </div>
+  </footer>
+</div>
+
+<style>
+  .landing-wrap {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: #090a0f;
+    color: #f1f2f6;
+  }
+  .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; width: 100%; box-sizing: border-box; }
+  .max-w-narrow { max-width: 820px; }
+  .navbar { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(9, 10, 15, 0.82); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
+  .nav-container { max-width: 1140px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+  .brand-group { display: flex; align-items: center; gap: 10px; }
+  .brand-img { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }
+  .brand-logo { width: 14px; height: 14px; border-radius: 50%; background: #6d6af5; box-shadow: 0 0 12px #6d6af5; }
+  .brand-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
+  .nav-links { display: flex; gap: 24px; }
+  .nav-link-btn {
+    background: transparent;
+    border: none;
+    color: #8b8f9a;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    padding: 0;
+    transition: color 0.15s;
+    font-family: inherit;
+  }
+  .nav-link-btn:hover { color: #f1f2f6; }
+  .nav-actions { display: flex; align-items: center; gap: 12px; }
+  .ip-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); padding: 6px 12px; border-radius: 99rem; color: #f1f2f6; cursor: pointer; font-size: 13px; font-weight: 560; font-family: monospace; transition: background 0.15s; }
+  .ip-pill:hover { background: rgba(255, 255, 255, 0.1); }
+  .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #3fb97c; box-shadow: 0 0 8px #3fb97c; }
+  .copy-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #8b8f9a; margin-left: 4px; }
+  .nav-login-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); color: #8b8f9a; text-decoration: none; font-size: 13px; font-weight: 500; }
+  .nav-login-btn:hover { color: #f1f2f6; border-color: rgba(255, 255, 255, 0.3); }
+  .hero-block { position: relative; padding: 110px 0 90px; text-align: center; overflow: hidden; }
+  .hero-bg-glow { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 700px; height: 450px; background: radial-gradient(circle, rgba(109, 106, 245, 0.22) 0%, transparent 70%); filter: blur(50px); pointer-events: none; }
+  .hero-content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 20px; }
+  .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 99rem; background: rgba(109, 106, 245, 0.12); border: 1px solid rgba(109, 106, 245, 0.35); color: #a5a3ff; font-size: 13px; font-weight: 600; }
+  .hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #3fb97c; box-shadow: 0 0 6px #3fb97c; }
+  .hero-title { font-size: clamp(32px, 5vw, 56px); font-weight: 800; line-height: 1.1; margin: 0; letter-spacing: -0.03em; max-width: 840px; }
+  .hero-sub { font-size: 18px; line-height: 1.6; color: #8b8f9a; max-width: 640px; margin: 0; }
+  .hero-cta-group { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; justify-content: center; }
+  .btn-hero-primary { display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; border-radius: 12px; background: #6d6af5; color: white; text-decoration: none; font-weight: 650; box-shadow: 0 8px 30px rgba(109, 106, 245, 0.4); transition: transform 0.15s, background 0.15s; }
+  .btn-hero-primary:hover { transform: translateY(-2px); background: #7c79ff; }
+  .cta-text-group { display: flex; flex-direction: column; text-align: left; }
+  .cta-main { font-size: 16px; line-height: 1.2; }
+  .cta-sub { font-size: 11px; opacity: 0.85; font-weight: 400; }
+  .btn-hero-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); color: #f1f2f6; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
+  .btn-hero-secondary:hover { background: rgba(255, 255, 255, 0.1); }
+  .section { padding: 80px 0; }
+  .section.alt-bg { background: rgba(255, 255, 255, 0.02); border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
+  .section-head { text-align: center; margin-bottom: 44px; display: flex; flex-direction: column; gap: 8px; }
+  .section-head h2 { font-size: 32px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
+  .muted { color: #8b8f9a; margin: 0; }
+  .downloads-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
+  .download-card { padding: 32px 24px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; position: relative; }
+  .download-card.recommended { border-color: rgba(109, 106, 245, 0.5); background: rgba(109, 106, 245, 0.06); }
+  .recommended-badge { position: absolute; top: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 10px; border-radius: 99rem; background: #6d6af5; color: white; }
+  .download-card-icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); display: grid; place-items: center; color: #6d6af5; margin-bottom: 4px; }
+  .download-card h3 { margin: 0; font-size: 18px; font-weight: 650; }
+  .btn-download { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border-radius: 10px; background: #6d6af5; color: white; text-decoration: none; font-weight: 600; font-size: 14px; margin-top: 8px; }
+  .btn-download:hover { background: #7c79ff; }
+  .servers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
+  .server-card { padding: 24px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 14px; }
+  .server-card-top { display: flex; justify-content: space-between; align-items: center; }
+  .server-status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #8b8f9a; }
+  .server-status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #e5484d; }
+  .server-status-pill.online { color: #3fb97c; }
+  .server-status-pill.online .dot { background: #3fb97c; box-shadow: 0 0 6px #3fb97c; }
+  .mc-ver-tag { background: rgba(255, 255, 255, 0.06); padding: 2px 8px; border-radius: 6px; }
+  .server-card-title { margin: 0; font-size: 20px; font-weight: 700; }
+  .server-copy-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 14px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); color: #f1f2f6; font-family: monospace; font-size: 13px; cursor: pointer; }
+  .server-copy-btn:hover { border-color: #6d6af5; }
+  .sort-chips-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
+  .sort-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 99rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); color: #8b8f9a; font-size: 13px; font-weight: 560; cursor: pointer; transition: all 0.15s; }
+  .sort-chip.active { background: rgba(109, 106, 245, 0.15); border-color: #6d6af5; color: #f1f2f6; }
+  .podium-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 16px; align-items: end; max-width: 580px; margin: 0 auto 32px; text-align: center; }
+  .podium-item { padding: 24px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 6px; }
+  .podium-item.gold { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.08); padding-bottom: 36px; }
+  .podium-item .medal { font-size: 26px; }
+  .podium-val { font-size: 18px; font-weight: 700; color: #6d6af5; }
+  .lb-table-wrap { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; overflow: hidden; }
+  .lb-table-head, .lb-table-row { display: grid; grid-template-columns: 70px 1fr 120px 120px 100px; padding: 14px 20px; align-items: center; font-size: 14px; }
+  .lb-table-head { border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; font-weight: 700; text-transform: uppercase; color: #8b8f9a; }
+  .lb-table-row { border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
+  .text-right { text-align: right; }
+  .score-highlight { color: #6d6af5; font-weight: 700; }
+  .stats-counter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
+  .counter-card { padding: 32px 20px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); text-align: center; display: flex; flex-direction: column; gap: 6px; }
+  .counter-num { font-size: 38px; font-weight: 800; color: #6d6af5; letter-spacing: -0.02em; }
+  .counter-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #8b8f9a; }
+  .instances-cards-grid, .news-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
+  .inst-card, .news-card { padding: 24px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 10px; }
+  .inst-card h3, .news-card h3 { margin: 0; font-size: 18px; font-weight: 700; }
+  .badge { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); }
+  .news-tag { align-self: flex-start; padding: 2px 8px; border-radius: 4px; background: rgba(109, 106, 245, 0.2); color: #a5a3ff; font-size: 11px; font-weight: 600; text-transform: uppercase; }
+  .faq-accordion { display: flex; flex-direction: column; gap: 12px; }
+  .faq-item { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; }
+  .faq-q-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: transparent; border: none; color: #f1f2f6; font-size: 16px; font-weight: 600; cursor: pointer; text-align: left; }
+  .faq-ans { padding: 0 20px 18px; color: #8b8f9a; line-height: 1.6; font-size: 14px; }
+  .footer { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 40px 0; margin-top: auto; }
+  .footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
+  .empty-state-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px; }
+  @media (max-width: 768px) {
+    .nav-links { display: none; }
+    .hero-title { font-size: 34px; }
+    .hero-cta-group { flex-direction: column; width: 100%; }
+    .btn-hero-primary, .btn-hero-secondary { width: 100%; justify-content: center; }
+    .lb-table-head, .lb-table-row { grid-template-columns: 50px 1fr 100px; }
+    .lb-table-head span:nth-child(4), .lb-table-head span:nth-child(5),
+    .lb-table-row span:nth-child(4), .lb-table-row span:nth-child(5) { display: none; }
+  }
+</style>