diff --git a/docs/AI_INIT.md b/docs/AI_INIT.md
index 8a6674c..13b4593 100644
--- a/docs/AI_INIT.md
+++ b/docs/AI_INIT.md
@@ -22,7 +22,7 @@ KoalaSync is a specialized tool for **synchronized video playback** across multi
 - `server/`: Node.js Relay Server using Socket.IO (WebSocket-only).
 - `website/`: **Landing Page** & Invitation Bridge (Marketing, Tutorials, and Downloads).
   - **`build.cjs`**: Zero-dependency static site compiler. Translates `template.html` + `locales/*.json` → `www/`. Also minifies CSS/JS automatically.
-  - **`www/` is auto-generated**: Never edit files in `www/` directly. Always edit source files (`template.html`, `style.css`, `app.js`, `lang-init.js`, `locales/*.json`) and run `node website/build.cjs` to regenerate. CSS/JS are output as `.min.*` files — a built-in cleanup step removes stale artifacts on each build.
+  - **`www/` is auto-generated**: Never edit files in `www/` directly. Always edit source files (`template.html`, `style.css`, `styles/*.css`, `app.js`, `lang-init.js`, `locales/*.json`) and run `node website/build.cjs` to regenerate. `style.css` is the development manifest; `style.legacy.css` is an unloaded, byte-identical migration reference. Production creates page-specific and render-priority CSS bundles from `styles/*.css`; CSS/JS are output as `.min.*` files and stale generated assets are removed on each build.
 - `shared/`: **Single Source of Truth** for protocol constants, event names, blacklist data, and generated usernames.
 - `scripts/`: Development utilities (e.g., `build-extension.cjs`).
 - `docker-compose.yml`: Root-level orchestration for the relay server.
@@ -149,7 +149,7 @@ Before starting any task, committing, or pushing, you **MUST** run `git pull --r
 3. Implement the handler in `server/index.js` and `background.js`.
 
 ### Making Website Changes
-1. Edit source files in `website/` (`template.html`, `style.css`, `app.js`, `lang-init.js`, or `locales/*.json`).
+1. Edit source files in `website/` (`template.html`, `style.css`, `styles/*.css`, `app.js`, `lang-init.js`, or `locales/*.json`).
 2. Run the compiler: `node website/build.cjs`. This generates the multilingual pages in `www/` and minifies CSS/JS.
 3. Verify the output: `node --check website/www/app.min.js && node --check website/www/lang-init.min.js`.
 4. Test locally: `npx serve website/www` or `python3 -m http.server 8080 -d website/www`.
diff --git a/website/README.md b/website/README.md
index d9b640c..b982136 100644
--- a/website/README.md
+++ b/website/README.md
@@ -4,7 +4,7 @@ This directory contains the static KoalaSync website. It is both the public mark
 
 ## Where You Are
 
-- `template.html`, `style.css`, `app.js`, `lang-init.js`, and `locales/*.json` are source files.
+- `template.html`, `style.css`, `styles/*.css`, `app.js`, `lang-init.js`, and `locales/*.json` are source files. `style.css` is the local-development manifest; production concatenates the modules in the order declared by `website/build.cjs`.
 - `build.cjs` compiles the static site into `website/www/`.
 - `website/www/` is generated output. Do not edit files there directly.
 - `join.html` handles room-invite links and communicates with the extension through `bridge.js`.
@@ -33,6 +33,7 @@ The website is 100% static HTML, CSS, and JavaScript.
 
 - **Static i18n compiler**: `build.cjs` combines `template.html` with dictionaries in `locales/`.
 - **Build-time minification**: Source CSS/JS stays readable; generated output uses `.min.css` and `.min.js`.
+- **Strangler CSS architecture**: `styles/*.css` supplies page/runtime bundles; `style.legacy.css` is the byte-identical, unloaded reference monolith. The landing ships a critical shell, a desktop/on-demand demo bundle, and idle-loaded below-fold styles. Legal, join, and alternatives rules stay out of landing bundles.
 - **Zero backend**: The compiled site can be hosted by any static file server.
 - **Zero external assets**: Fonts, icons, scripts, and images must remain self-hosted.
 - **Generated SEO/runtime files**: `version.json`, sitemap, robots, clean URLs, localized pages, and minified assets are copied or generated into `www/`.
diff --git a/website/app.js b/website/app.js
index f11d24a..6de2394 100644
--- a/website/app.js
+++ b/website/app.js
@@ -1,6 +1,27 @@
 // KoalaSync Landing Page Logic
 
 document.addEventListener('DOMContentLoaded', () => {
+    const deferredCss = document.body.dataset.deferredCss;
+    if (deferredCss) {
+        const loadDeferredCss = () => {
+            if (document.querySelector('link[data-landing-deferred]')) return;
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = deferredCss;
+            link.dataset.landingDeferred = '';
+            const integrity = document.body.dataset.deferredCssIntegrity;
+            if (integrity) {
+                link.integrity = integrity;
+                link.crossOrigin = 'anonymous';
+            }
+            document.head.appendChild(link);
+        };
+        if ('requestIdleCallback' in window) {
+            window.requestIdleCallback(loadDeferredCss, { timeout: 1500 });
+        } else {
+            window.setTimeout(loadDeferredCss, 250);
+        }
+    }
     // Mockup Video Title Randomization on Load
     const SERIES_NAMES = [
         'Stranger Things',
@@ -1311,6 +1332,8 @@ document.addEventListener('DOMContentLoaded', () => {
         let previousFocus = null;
 
         const openModal = () => {
+            const demoStyles = document.querySelector('link[data-landing-demo]');
+            if (demoStyles) demoStyles.media = 'all';
             previousFocus = document.activeElement && typeof document.activeElement.focus === 'function'
                 ? document.activeElement
                 : null;
diff --git a/website/build.cjs b/website/build.cjs
index 748a142..cc09301 100644
--- a/website/build.cjs
+++ b/website/build.cjs
@@ -132,11 +132,62 @@ async function compile() {
 
     // ── 1. Minify CSS/JS (must happen first so hashes go into HTML) ──
     console.log('Minifying CSS/JS...');
-    const styleRaw = fs.readFileSync(path.join(websiteDir, 'style.css'), 'utf8');
+    const styleModules = [
+        'styles/foundation.css',
+        'styles/hero.css',
+        'styles/landing-primary.css',
+        'styles/legal.css',
+        'styles/landing-controls.css',
+        'styles/join-spinner.css',
+        'styles/landing-sections.css',
+        'styles/join.css',
+        'styles/landing-faq.css',
+        'styles/alternatives.css',
+        'styles/demo.css'
+    ];
+    // Landing CSS is split by actual render dependency, not by the historical
+    // section comments in style.legacy.css. The initial bundle contains every
+    // selector used by the background, navigation, hero, interactive mockup,
+    // responsive shell, and accessibility states. Below-fold sections load
+    // after first paint from app.js. Utility-page rules never reach the landing.
+    const landingCriticalModules = [
+        'styles/foundation.css',
+        'styles/hero.css',
+        'styles/legal.css',
+        'styles/landing-controls.css',
+        'styles/landing-demo-gate.css'
+    ];
+    const landingDemoModules = ['styles/demo.css'];
+    const landingDeferredModules = [
+        'styles/landing-primary.css',
+        'styles/landing-sections.css',
+        'styles/landing-faq.css'
+    ];
+    const styleRaw = styleModules
+        .map(relativePath => fs.readFileSync(path.join(websiteDir, relativePath), 'utf8'))
+        .join('');
     const styleMin = minifyCSS(styleRaw);
     const styleHash = sha8(styleMin);
     const styleName = `style.${styleHash}.min.css`;
     const styleSRI = sha384(styleMin);
+    const landingStyleRaw = landingCriticalModules
+        .map(relativePath => fs.readFileSync(path.join(websiteDir, relativePath), 'utf8'))
+        .join('');
+    const landingStyleMin = minifyCSS(landingStyleRaw);
+    const landingStyleName = `landing.${sha8(landingStyleMin)}.min.css`;
+    const landingStyleSRI = sha384(landingStyleMin);
+    const landingDemoRaw = landingDemoModules
+        .map(relativePath => fs.readFileSync(path.join(websiteDir, relativePath), 'utf8'))
+        .join('');
+    const landingDemoMin = minifyCSS(landingDemoRaw);
+    const landingDemoName = `landing-demo.${sha8(landingDemoMin)}.min.css`;
+    const landingDemoSRI = sha384(landingDemoMin);
+    const landingDeferredRaw = landingDeferredModules
+        .map(relativePath => fs.readFileSync(path.join(websiteDir, relativePath), 'utf8'))
+        .join('');
+    const landingDeferredMin = minifyCSS(landingDeferredRaw);
+    const landingDeferredName = `landing-deferred.${sha8(landingDeferredMin)}.min.css`;
+    const landingDeferredSRI = sha384(landingDeferredMin);
 
     const appRaw = fs.readFileSync(path.join(websiteDir, 'app.js'), 'utf8');
     const appMin = await minifyJS(appRaw);
@@ -154,6 +205,9 @@ async function compile() {
     const appPct   = ((1 - appMin.length / appRaw.length) * 100).toFixed(0);
     const langPct  = ((1 - langMin.length / langRaw.length) * 100).toFixed(0);
     console.log(`  CSS: ${styleName} (${(styleMin.length/1024).toFixed(1)} KB, -${stylePct}%)`);
+    console.log(`  Landing CSS: ${landingStyleName} (${(landingStyleMin.length/1024).toFixed(1)} KB)`);
+    console.log(`  Desktop/modal demo CSS: ${landingDemoName} (${(landingDemoMin.length/1024).toFixed(1)} KB)`);
+    console.log(`  Deferred landing CSS: ${landingDeferredName} (${(landingDeferredMin.length/1024).toFixed(1)} KB)`);
     console.log(`  App: ${appName} (${(appMin.length/1024).toFixed(1)} KB, -${appPct}%)`);
     console.log(`  Lang: ${langName} (${(langMin.length/1024).toFixed(1)} KB, -${langPct}%)`);
 
@@ -167,6 +221,9 @@ async function compile() {
 
     // Write minified files
     fs.writeFileSync(path.join(wwwDir, styleName), styleMin);
+    fs.writeFileSync(path.join(wwwDir, landingStyleName), landingStyleMin);
+    fs.writeFileSync(path.join(wwwDir, landingDemoName), landingDemoMin);
+    fs.writeFileSync(path.join(wwwDir, landingDeferredName), landingDeferredMin);
     fs.writeFileSync(path.join(wwwDir, appName), appMin);
     fs.writeFileSync(path.join(wwwDir, langName), langMin);
 
@@ -463,6 +520,15 @@ async function compile() {
         html = html.replace(/(<link\b[^>]*?\bhref=")((?:\.\.\/)*\/?)style\.min\.css"/g, (m, before, prefix) => {
             return `${before}${prefix}${styleName}" integrity="${styleSRI}" crossorigin="anonymous"`;
         });
+        html = html.replace(/(<link\b[^>]*?\bhref=")((?:\.\.\/)*\/?)landing\.min\.css"/g, (m, before, prefix) => {
+            return `${before}${prefix}${landingStyleName}" integrity="${landingStyleSRI}" crossorigin="anonymous"`;
+        });
+        html = html.replace(/(<link\b[^>]*?\bhref=")((?:\.\.\/)*\/?)landing-demo\.min\.css"/g, (m, before, prefix) => {
+            return `${before}${prefix}${landingDemoName}" integrity="${landingDemoSRI}" crossorigin="anonymous"`;
+        });
+        html = html.replace(/data-deferred-css="((?:\.\.\/)*\/?)landing-deferred\.min\.css"/g, (m, prefix) => {
+            return `data-deferred-css="${prefix}${landingDeferredName}" data-deferred-css-integrity="${landingDeferredSRI}"`;
+        });
         html = html.replace(/(<script\b[^>]*?\bsrc=")((?:\.\.\/)*\/?)app\.min\.js"/g, (m, before, prefix) => {
             return `${before}${prefix}${appName}" integrity="${appSRI}" crossorigin="anonymous"`;
         });
diff --git a/website/style.css b/website/style.css
index ad55856..a5eebf3 100644
--- a/website/style.css
+++ b/website/style.css
@@ -1,6576 +1,18 @@
-/* KoalaSync Design System - Privacy-Focused (No External Assets) */
-
-@font-face {
-    font-family: 'Twemoji Country Flags';
-    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
-    src: url('assets/TwemojiCountryFlags.woff2') format('woff2');
-    font-display: swap;
-}
-
-:root {
-    /* v3.0.0 "The Greens Update" nature palette */
-    --bg-base: oklch(0.20 0.025 140);
-    --surface: oklch(0.27 0.035 130);
-    --surface-deep: oklch(0.16 0.025 135);
-    --surface-alt: oklch(0.23 0.03 130);
-    --border-soft: rgba(255, 255, 255, 0.06);
-    --border-strong: oklch(0.32 0.03 125);
-    --text-primary: oklch(0.96 0.01 90);
-    --text-secondary: oklch(0.78 0.02 90);
-    --accent-green: oklch(0.68 0.13 150);
-    --accent-green-hover: oklch(0.75 0.13 150);
-    --accent-terracotta: oklch(0.62 0.14 45);
-    --danger: oklch(0.55 0.15 25);
-    --text-on-green: oklch(0.14 0.02 90);
-
-    /* Legacy aliases used throughout the stylesheet */
-    --bg: var(--bg-base);
-    --card: var(--surface);
-    --accent: var(--accent-green);
-    --accent-glow: oklch(0.68 0.13 150 / 0.3);
-    --text: var(--text-primary);
-    --text-muted: var(--text-secondary);
-    --success: var(--accent-green);
-    --glass: oklch(0.27 0.035 130 / 0.4);
-    --glass-border: var(--border-soft);
-    --section-tint: transparent;
-    --section-tint-strong: oklch(0.20 0.025 140 / 0.28);
-    --card-surface: oklch(0.27 0.035 130 / 0.45);
-    --card-border: rgba(255, 255, 255, 0.08);
-    color-scheme: dark;
-}
-
-.extension-mockup,
-.illus-popup-card,
-.illus-player-card {
-    --bg: oklch(0.20 0.025 140) !important;
-    --card: oklch(0.27 0.035 130) !important;
-    --accent: oklch(0.68 0.13 150) !important;
-    --accent-glow: oklch(0.68 0.13 150 / 0.3) !important;
-    --text: oklch(0.96 0.01 90) !important;
-    --text-muted: oklch(0.78 0.02 90) !important;
-    --success: oklch(0.68 0.13 150) !important;
-    --error: oklch(0.55 0.15 25) !important;
-    --glass: oklch(0.27 0.035 130 / 0.4) !important;
-    --glass-border: rgba(255, 255, 255, 0.05) !important;
-    --section-tint: rgba(255, 255, 255, 0.02) !important;
-    --section-tint-strong: oklch(0.20 0.025 140 / 0.4) !important;
-    --card-surface: oklch(0.27 0.035 130 / 0.45) !important;
-    --card-border: rgba(255, 255, 255, 0.08) !important;
-}
-
-.invite-banner {
-    background: var(--accent);
-    color: var(--text-on-green);
-    padding: 0.75rem 0;
-    text-align: center;
-    font-weight: 600;
-    font-size: 0.9rem;
-    position: relative;
-    z-index: 2000;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-}
-
-.btn-banner {
-    background: white;
-    color: var(--accent);
-    padding: 4px 12px;
-    border-radius: 6px;
-    text-decoration: none;
-    font-size: 0.8rem;
-    font-weight: 700;
-    margin-left: 12px;
-    cursor: pointer;
-    border: none;
-    transition: transform 0.2s;
-}
-
-.btn-banner:hover {
-    transform: scale(1.05);
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-    border-radius: 6px;
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
-body {
-    font-family: 'Twemoji Country Flags', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-    background-color: var(--bg);
-    color: var(--text);
-    line-height: 1.6;
-    overflow-x: hidden;
-    position: relative;
-}
-
-/* --- Animated Bamboo Forest Background (v3 Greens Update) --- */
-/* Registered so wind gusts can TRANSITION these instead of jumping */
-@property --sway {
-    syntax: '<angle>';
-    initial-value: 1.2deg;
-    inherits: true;
-}
-
-@property --leaf-drift {
-    syntax: '<length>';
-    initial-value: 26px;
-    inherits: true;
-}
-
-.bg-nature {
-    --sway: 1.2deg;
-    --leaf-drift: 26px;
-    transition: --sway 1.6s ease-in-out, --leaf-drift 1.6s ease-in-out;
-}
-
-.bg-nature.gusting {
-    --sway: 3.4deg;
-    --leaf-drift: 68px;
-}
-
-.bg-nature {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    overflow: hidden;
-    pointer-events: none;
-    background:
-        radial-gradient(circle at 18% 10%, oklch(0.26 0.05 145 / 0.35), transparent 34rem),
-        radial-gradient(circle at 78% 68%, oklch(0.24 0.04 140 / 0.3), transparent 38rem),
-        linear-gradient(180deg, oklch(0.20 0.025 140) 0%, oklch(0.17 0.03 142) 45%, oklch(0.19 0.03 140) 100%);
-}
-
-/* (a) Distant bamboo layer: blurred, scroll-parallaxed by app.js */
-#bamboo-far {
-    position: absolute;
-    inset: 0;
-    will-change: transform;
-}
-
-#bamboo-far .bamboo-stalk {
-    position: absolute;
-    /* 200% covers the upward parallax drift (max 0.55vh on the near layer)
-       with margin while keeping the blurred layer smaller than the old
-       240% overscan. Spare coverage sits below, where the drift needs it. */
-    top: -40%;
-    height: 200%;
-    border-radius: 999px;
-    filter: blur(4.5px);
-    transition: filter 1.2s ease;
-    background:
-        repeating-linear-gradient(180deg,
-            transparent 0, transparent 108px,
-            oklch(0.40 0.06 145 / 0.22) 108px, oklch(0.40 0.06 145 / 0.22) 112px),
-        linear-gradient(180deg, oklch(0.34 0.05 145 / 0.4), oklch(0.24 0.04 140 / 0.16));
-}
-
-#bamboo-far .far-1 { left: 2%; width: 26px; }
-#bamboo-far .far-2 { left: 7.5%; width: 18px; }
-#bamboo-far .far-3 { right: 4%; width: 30px; }
-#bamboo-far .far-4 { left: 13%; width: 20px; }
-#bamboo-far .far-5 { right: 10.5%; width: 16px; }
-/* Two whisper-quiet trunks soften the empty centre without touching the
-   content: wide apart, thin, and at the lowest opacity in the scene. */
-#bamboo-far .far-6 { left: 39%; width: 12px; opacity: 0.55; }
-#bamboo-far .far-7 { right: 42%; width: 14px; opacity: 0.6; }
-
-/* Two barely-there trunks break up the empty middle without competing with
-   the content. They share the far layer's single parallax transform. */
-#bamboo-far::before,
-#bamboo-far::after {
-    content: '';
-    position: absolute;
-    top: -40%;
-    height: 200%;
-    border-radius: 999px;
-    filter: blur(6.5px);
-    opacity: 0.3;
-    background: linear-gradient(180deg, oklch(0.34 0.05 145 / 0.3), oklch(0.23 0.04 140 / 0.1));
-}
-
-#bamboo-far::before { left: 24%; width: 13px; }
-#bamboo-far::after { right: 25%; width: 17px; }
-
-/* Depth of field: the far layer blurs further as you descend (stepped by
-   JS on threshold crossings, never per frame) */
-.bg-nature.depth-mid #bamboo-far .bamboo-stalk { filter: blur(5.5px); }
-.bg-nature.depth-deep #bamboo-far .bamboo-stalk { filter: blur(6.5px); }
-
-/* (a2) Mid bamboo layer: sits between far and near with its own parallax
-   rate (app.js) and half the near layer's sway, so the three layers drift
-   apart subtly instead of moving as one sheet. Landing page only — the
-   static pages keep the lighter two-layer scene. */
-#bamboo-mid {
-    position: absolute;
-    inset: 0;
-    will-change: transform;
-}
-
-#bamboo-mid .bamboo-stalk {
-    position: absolute;
-    top: -40%;
-    height: 200%;
-    border-radius: 999px;
-    filter: blur(2px);
-    transition: filter 1.2s ease;
-    /* Segment rings + a soft left-of-centre sheen give the stalks culm
-       structure without any extra elements; the blur keeps both faint. */
-    background:
-        repeating-linear-gradient(180deg,
-            transparent 0, transparent 84px,
-            oklch(0.46 0.075 145 / 0.28) 84px, oklch(0.46 0.075 145 / 0.28) 87px),
-        linear-gradient(90deg, transparent 14%, oklch(0.58 0.07 145 / 0.14) 38%, transparent 68%),
-        linear-gradient(180deg, oklch(0.36 0.06 145 / 0.45), oklch(0.25 0.045 140 / 0.2));
-    transform-origin: bottom center;
-    animation: bambooSwayHalf 13s ease-in-out infinite;
-}
-
-#bamboo-mid .mid-1 { left: 17%; width: 15px; animation-duration: 12s; }
-#bamboo-mid .mid-2 { left: 31%; width: 9px; animation-delay: -5s; opacity: 0.55; }
-#bamboo-mid .mid-3 { right: 15.5%; width: 17px; animation-duration: 14.5s; animation-delay: -8s; }
-#bamboo-mid .mid-4 { right: 30%; width: 8px; animation-duration: 11.5s; animation-delay: -2.5s; opacity: 0.5; }
-
-/* A few leaves sprout from the mid stalks (pseudo-elements, so they ride
-   the stalk's sway for free). The slim centre stalks stay bare. */
-#bamboo-mid .bamboo-stalk::before,
-#bamboo-mid .bamboo-stalk::after {
-    content: '';
-    position: absolute;
-    width: 24px;
-    height: 11px;
-    border-radius: 0 100% 0 100%;
-    background: oklch(0.5 0.1 145 / 0.32);
-}
-
-#bamboo-mid .mid-1::before { top: 31%; left: 13px; transform: rotate(20deg); }
-#bamboo-mid .mid-1::after { top: 55%; left: -26px; transform: rotate(-158deg); width: 20px; height: 9px; }
-#bamboo-mid .mid-3::before { top: 26%; left: -27px; transform: rotate(-156deg); }
-#bamboo-mid .mid-3::after { top: 49%; left: 15px; transform: rotate(24deg); width: 21px; height: 10px; }
-#bamboo-mid .mid-2::before,
-#bamboo-mid .mid-2::after,
-#bamboo-mid .mid-4::before,
-#bamboo-mid .mid-4::after {
-    display: none;
-}
-
-.bg-nature.depth-mid #bamboo-mid .bamboo-stalk { filter: blur(3px); }
-.bg-nature.depth-deep #bamboo-mid .bamboo-stalk { filter: blur(4px); }
-
-@keyframes bambooSwayHalf {
-    0%, 100% { transform: rotate(0); }
-    50% { transform: rotate(calc(var(--sway, 1.2deg) * 0.5)); }
-}
-
-/* (b) Near bamboo layer: sharp stalks with nodes and leaves, gentle sway */
-#bamboo-near {
-    position: absolute;
-    inset: 0;
-    will-change: transform;
-}
-
-#bamboo-near .bamboo-stalk {
-    position: absolute;
-    top: -40%;
-    height: 200%;
-    border-radius: 999px;
-    /* Vertical sheen over the culm gradient: reads as light from the
-       canopy catching the rounded stalk instead of a flat strip. */
-    background:
-        linear-gradient(90deg, transparent 12%, oklch(0.64 0.08 145 / 0.22) 36%, transparent 64%),
-        linear-gradient(180deg, oklch(0.42 0.075 145 / 0.6), oklch(0.27 0.05 140 / 0.3));
-    transform-origin: bottom center;
-    animation: bambooSway 10s ease-in-out infinite;
-}
-
-#bamboo-near .near-1 { left: 4.5%; width: 15px; animation-duration: 9.2s; }
-#bamboo-near .near-2 { right: 7%; width: 13px; animation-duration: 11s; animation-delay: -3.5s; }
-#bamboo-near .near-3 { left: 10%; width: 10px; animation-duration: 12.5s; animation-delay: -6s; opacity: 0.75; }
-
-#bamboo-near .bamboo-node {
-    position: absolute;
-    left: -1px;
-    right: -1px;
-    height: 3px;
-    border-radius: 2px;
-    background: oklch(0.52 0.085 145 / 0.6);
-}
-
-#bamboo-near .node-1 { top: 28%; }
-#bamboo-near .node-2 { top: 48%; }
-#bamboo-near .node-3 { top: 68%; }
-
-#bamboo-near .bamboo-leaf {
-    position: absolute;
-    width: 26px;
-    height: 12px;
-    border-radius: 0 100% 0 100%;
-    background: oklch(0.55 0.11 145 / 0.4);
-}
-
-#bamboo-near .near-1 .leaf-1 { top: 27.5%; left: 12px; transform: rotate(18deg); }
-#bamboo-near .near-1 .leaf-2 { top: 47.5%; left: -28px; transform: rotate(-160deg); width: 22px; height: 10px; }
-#bamboo-near .near-2 .leaf-1 { top: 44%; left: -26px; transform: rotate(-155deg); }
-#bamboo-near .near-2 .leaf-2 { top: 61%; left: 11px; transform: rotate(21deg); width: 20px; height: 9px; }
-#bamboo-near .near-3 .leaf-1 { top: 33%; left: 8px; transform: rotate(24deg); width: 18px; height: 9px; }
-
-@keyframes bambooSway {
-    0%, 100% { transform: rotate(0); }
-    50% { transform: rotate(var(--sway, 1.2deg)); }
-}
-
-/* (d) Falling leaves: outer element falls + rotates, inner leaf sways */
-.fall-leaf {
-    position: absolute;
-    top: 0;
-    animation: leafFall 17s linear infinite;
-    opacity: 0;
-}
-
-.fall-leaf i {
-    display: block;
-    width: 10px;
-    height: 14px;
-    border-radius: 0 70% 0 70%;
-    background: oklch(0.68 0.13 150 / 0.55);
-    animation: leafSway 3.2s ease-in-out infinite;
-}
-
-.fall-leaf:nth-child(even) i {
-    background: oklch(0.62 0.14 45 / 0.55);
-}
-
-.fall-leaf-1 { left: 6%;  animation-duration: 15s;  animation-delay: -2s; }
-.fall-leaf-2 { left: 16%; animation-duration: 19s;  animation-delay: -9s; }
-.fall-leaf-2 i { animation-duration: 2.7s; background: oklch(0.62 0.14 45 / 0.6); }
-.fall-leaf-3 { left: 28%; animation-duration: 14s;  animation-delay: -5s; }
-.fall-leaf-3 i { background: oklch(0.68 0.13 150 / 0.5); }
-.fall-leaf-4 { left: 41%; animation-duration: 21s;  animation-delay: -13s; }
-.fall-leaf-4 i { animation-duration: 4s; }
-.fall-leaf-5 { left: 55%; animation-duration: 16s;  animation-delay: -7s; }
-.fall-leaf-5 i { background: oklch(0.68 0.13 150 / 0.6); }
-.fall-leaf-6 { left: 68%; animation-duration: 20s;  animation-delay: -16s; }
-.fall-leaf-6 i { animation-duration: 3.6s; background: oklch(0.62 0.14 45 / 0.5); }
-.fall-leaf-7 { left: 81%; animation-duration: 14.5s; animation-delay: -3s; }
-.fall-leaf-7 i { animation-duration: 2.9s; }
-.fall-leaf-8 { left: 92%; animation-duration: 18s;  animation-delay: -11s; }
-
-@keyframes leafFall {
-    0% { transform: translateY(-40px) rotate(0); opacity: 0; }
-    8% { opacity: 0.65; }
-    92% { opacity: 0.5; }
-    100% { transform: translateY(110vh) translateX(120px) rotate(280deg); opacity: 0; }
-}
-
-@keyframes leafSway {
-    0%, 100% { margin-left: 0; }
-    50% { margin-left: var(--leaf-drift, 26px); }
-}
-
-/* Scroll journey: JS drives the opacity of these two groups so the page
-   travels from sunlit canopy (top) into misty dusk (bottom). Static
-   defaults below keep the scene balanced without JS. */
-.bg-depth-day,
-.bg-depth-dusk {
-    position: absolute;
-    inset: 0;
-}
-
-.bg-depth-dusk {
-    opacity: 0.6;
-}
-
-/* Dusk tint: darkens and warms the whole scene as you descend */
-.bg-dusk-tint {
-    position: absolute;
-    inset: 0;
-    opacity: 0;
-    background: linear-gradient(180deg,
-        oklch(0.10 0.03 145 / 0.15) 0%,
-        oklch(0.12 0.045 142 / 0.5) 65%,
-        oklch(0.16 0.07 55 / 0.35) 100%);
-}
-
-/* God rays: soft light shafts falling through the canopy */
-.bg-godrays {
-    position: absolute;
-    top: -10%;
-    left: 0;
-    right: 0;
-    height: 75%;
-}
-
-.godray {
-    position: absolute;
-    top: 0;
-    height: 115%;
-    background: linear-gradient(180deg, oklch(0.85 0.06 130 / 0.10), transparent 78%);
-    filter: blur(10px);
-    transform: rotate(14deg);
-    transform-origin: top center;
-    animation: rayShimmer 9s ease-in-out infinite alternate;
-}
-
-.godray-1 { left: 16%; width: 120px; animation-duration: 8s; }
-.godray-2 { left: 33%; width: 70px; animation-delay: -3s; background: linear-gradient(180deg, oklch(0.85 0.06 130 / 0.07), transparent 78%); }
-.godray-3 { left: 56%; width: 140px; animation-duration: 13s; animation-delay: -6s; background: linear-gradient(180deg, oklch(0.85 0.05 110 / 0.08), transparent 75%); }
-
-@keyframes rayShimmer {
-    0% { opacity: 0.45; }
-    100% { opacity: 1; }
-}
-
-/* (e) Canopy: dark vignette at the top plus hanging leaf arcs */
-.bg-canopy {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 150px;
-    background:
-        radial-gradient(ellipse 70% 100% at 30% 0%, oklch(0.14 0.03 145 / 0.55), transparent 70%),
-        radial-gradient(ellipse 60% 90% at 80% 0%, oklch(0.14 0.03 145 / 0.45), transparent 70%);
-}
-
-.canopy-arc {
-    position: absolute;
-    border-radius: 0 0 100% 100%;
-    background: oklch(0.32 0.06 145 / 0.45);
-}
-
-.canopy-arc-1 { top: -3px; left: 12%; width: 52px; height: 16px; transform: rotate(-6deg); background: oklch(0.30 0.06 145 / 0.5); }
-.canopy-arc-2 { top: -2px; left: 34%; width: 38px; height: 12px; transform: rotate(4deg); background: oklch(0.34 0.06 145 / 0.35); }
-.canopy-arc-3 { top: -4px; left: 61%; width: 46px; height: 14px; transform: rotate(-3deg); }
-.canopy-arc-4 { top: -2px; left: 84%; width: 30px; height: 10px; transform: rotate(7deg); background: oklch(0.33 0.06 145 / 0.4); }
-
-/* (f) Undergrowth: grass blades in the lower corners. Each blade carries a
-   shorter companion blade (::before) so the corners read as small tufts. */
-.bg-grass {
-    position: absolute;
-    bottom: -4px;
-    transform-origin: bottom;
-}
-
-.bg-grass::before {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    width: 72%;
-    height: 55%;
-    border-radius: inherit;
-    background: inherit;
-    opacity: 0.7;
-    transform-origin: bottom;
-}
-
-.bg-grass-1::before { left: -5px; transform: rotate(-13deg); }
-.bg-grass-2::before { left: 4px; transform: rotate(11deg); }
-.bg-grass-3::before { right: -5px; transform: rotate(12deg); }
-.bg-grass-4::before { right: 4px; transform: rotate(-9deg); }
-
-.bg-grass-1 { left: 1.5%; width: 6px; height: 52px; border-radius: 100% 0 0 0; background: oklch(0.38 0.07 145 / 0.4); transform: rotate(-9deg); }
-.bg-grass-2 { left: 3.2%; width: 5px; height: 38px; border-radius: 100% 0 0 0; background: oklch(0.35 0.07 145 / 0.3); transform: rotate(-12deg); }
-.bg-grass-3 { right: 2%; width: 6px; height: 56px; border-radius: 0 100% 0 0; background: oklch(0.4 0.07 145 / 0.4); transform: rotate(8deg); }
-.bg-grass-4 { right: 3.8%; width: 5px; height: 40px; border-radius: 0 100% 0 0; background: oklch(0.36 0.07 145 / 0.32); transform: rotate(11deg); }
-
-/* (g) Ground mist: soft drifting ellipses at the bottom edge */
-.bg-mist {
-    position: absolute;
-    bottom: -40px;
-    height: 130px;
-    filter: blur(19px);
-    will-change: transform;
-}
-
-.bg-mist-1 {
-    left: -6%;
-    width: 75%;
-    background: radial-gradient(ellipse, oklch(0.85 0.03 145 / 0.07), transparent 70%);
-    animation: mistDrift 22s ease-in-out infinite alternate;
-}
-
-.bg-mist-2 {
-    right: -6%;
-    width: 70%;
-    background: radial-gradient(ellipse, oklch(0.85 0.03 145 / 0.06), transparent 70%);
-    animation: mistDrift 27s ease-in-out infinite alternate-reverse;
-}
-
-@keyframes mistDrift {
-    0% { transform: translateX(-8%); }
-    100% { transform: translateX(8%); }
-}
-
-/* (h) Breathing horizon glow */
-.bg-horizon {
-    position: absolute;
-    inset: 0;
-    background: radial-gradient(ellipse 60% 100% at 50% 100%, oklch(0.62 0.14 45 / 0.14), transparent 70%);
-    animation: horizonBreathe 10s ease-in-out infinite;
-}
-
-@keyframes horizonBreathe {
-    0%, 100% { opacity: 0.5; }
-    50% { opacity: 0.85; }
-}
-
-/* Theme switch to light: the horizon flares up once like a sunrise */
-.bg-nature.sunrise .bg-horizon {
-    animation:
-        horizonBreathe 10s ease-in-out infinite,
-        sunriseFlash 1.6s ease-out;
-}
-
-@keyframes sunriseFlash {
-    0% { opacity: 0.5; }
-    30% { opacity: 1; }
-    100% { opacity: 0.5; }
-}
-
-/* (i) Fireflies: the wrapper holds the base position and is what the JS
-   pushes away from the cursor; the inner dot pulses (transform) and
-   wanders (translate) independently. */
-.firefly-wrap {
-    position: absolute;
-    width: 4px;
-    height: 4px;
-}
-
-.firefly {
-    display: block;
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    background: oklch(0.68 0.13 150);
-    box-shadow: 0 0 8px oklch(0.68 0.13 150);
-    animation:
-        fireflyPulse 3.8s ease-in-out infinite,
-        fireflyWander 21s ease-in-out infinite alternate;
-}
-
-.fw-2 .firefly,
-.fw-4 .firefly,
-.fw-6 .firefly {
-    width: 3px;
-    height: 3px;
-    background: oklch(0.62 0.14 45);
-    box-shadow: 0 0 8px oklch(0.62 0.14 45);
-}
-
-.fw-1 { top: 32%; left: 12%; }
-.fw-2 { top: 58%; left: 22%; }
-.fw-3 { top: 44%; left: 46%; }
-.fw-4 { top: 70%; left: 64%; }
-.fw-5 { top: 26%; left: 78%; }
-.fw-6 { top: 62%; left: 90%; }
-
-.fw-1 .firefly { animation-delay: -0.4s, -4s; }
-.fw-2 .firefly { animation-duration: 4.4s, 26s; animation-delay: -2.1s, -11s; }
-.fw-3 .firefly { animation-duration: 3.4s, 18s; animation-delay: -1.2s, -7s; }
-.fw-4 .firefly { animation-duration: 4.1s, 29s; animation-delay: -3s, -19s; }
-.fw-5 .firefly { animation-duration: 3.6s, 23s; animation-delay: -1.8s, -14s; }
-.fw-6 .firefly { animation-duration: 4.2s, 17s; animation-delay: -0.9s, -2s; }
-
-/* One firefly greets you when a new section scrolls into view */
-.firefly-wrap.firefly-hello {
-    animation: fireflyHello 1.2s ease-out;
-}
-
-@keyframes fireflyHello {
-    0%, 100% { transform: scale(1); filter: brightness(1); }
-    35% { transform: scale(2.4); filter: brightness(1.7); }
-}
-
-@keyframes fireflyPulse {
-    0%, 100% { opacity: 0.2; transform: scale(1); }
-    50% { opacity: 0.9; transform: scale(1.35); }
-}
-
-@keyframes fireflyWander {
-    0% { translate: 0 0; }
-    25% { translate: 38px -26px; }
-    50% { translate: -20px 16px; }
-    75% { translate: 26px 30px; }
-    100% { translate: -14px -18px; }
-}
-
-/* Day/night: fireflies belong to the dark theme. By daylight the same six
-   spots are visited by small butterflies instead — the wrapper (and with it
-   the cursor-shy push and the section greeting) is shared, only the inner
-   dot is redressed. Only animation-name is swapped so the per-firefly
-   duration/delay variety above keeps applying to the butterflies. */
-html.theme-light .firefly {
-    position: relative;
-    width: 2px;
-    height: 9px;
-    border-radius: 1px;
-    background: oklch(0.35 0.05 140 / 0.8);
-    box-shadow: none;
-    opacity: 0.85;
-    animation-name: butterflyBob, fireflyWander;
-}
-
-html.theme-light .firefly::before,
-html.theme-light .firefly::after {
-    content: '';
-    position: absolute;
-    top: -2px;
-    width: 7px;
-    height: 10px;
-    background: oklch(0.62 0.14 45 / 0.7);
-    animation: wingFlap 0.5s ease-in-out infinite alternate;
-}
-
-html.theme-light .firefly::before {
-    left: -6px;
-    border-radius: 90% 10% 60% 40%;
-    transform-origin: 100% 55%;
-}
-
-html.theme-light .firefly::after {
-    right: -6px;
-    border-radius: 10% 90% 40% 60%;
-    transform-origin: 0% 55%;
-    animation-name: wingFlapR;
-}
-
-/* Every other butterfly wears the sage of the canopy and flaps lazier */
-html.theme-light .fw-2 .firefly::before,
-html.theme-light .fw-2 .firefly::after,
-html.theme-light .fw-4 .firefly::before,
-html.theme-light .fw-4 .firefly::after,
-html.theme-light .fw-6 .firefly::before,
-html.theme-light .fw-6 .firefly::after {
-    background: oklch(0.52 0.12 150 / 0.55);
-    animation-duration: 0.62s;
-}
-
-@keyframes butterflyBob {
-    0%, 100% { transform: translateY(0) rotate(-4deg); }
-    50% { transform: translateY(-8px) rotate(5deg); }
-}
-
-@keyframes wingFlap {
-    from { transform: scaleX(1) rotate(-6deg); }
-    to { transform: scaleX(0.3) rotate(8deg); }
-}
-
-@keyframes wingFlapR {
-    from { transform: scaleX(1) rotate(6deg); }
-    to { transform: scaleX(0.3) rotate(-8deg); }
-}
-
-/* By day the dusk layer must not dim the butterflies with scroll depth
-   (the JS crossfade keeps writing inline opacity for the dark theme), and
-   the warm horizon glow steps back so it reads as haze, not dusk. */
-html.theme-light .bg-depth-dusk {
-    opacity: 1 !important;
-}
-
-html.theme-light .bg-horizon {
-    background: radial-gradient(ellipse 60% 100% at 50% 100%, oklch(0.8 0.08 60 / 0.1), transparent 70%);
-}
-
-/* (j) Wandering light sweep */
-.bg-light-sweep {
-    position: absolute;
-    top: -30%;
-    left: -30%;
-    width: 160%;
-    height: 160%;
-    background: linear-gradient(115deg, transparent 42%, oklch(0.68 0.13 150 / 0.05) 50%, transparent 58%);
-    animation: lightSweep 26s ease-in-out infinite alternate;
-    will-change: transform;
-}
-
-@keyframes lightSweep {
-    0% { transform: translate(-20%, -20%) rotate(8deg); }
-    100% { transform: translate(20%, 20%) rotate(8deg); }
-}
-
-/* (j2) Corner vignette: pulls the eye toward the content and grounds the
-   scene — the forest darkens gently toward the edges like real depth. */
-.bg-nature::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    background: radial-gradient(ellipse 120% 90% at 50% 38%, transparent 55%, oklch(0.10 0.025 142 / 0.4) 100%);
-}
-
-html.theme-light .bg-nature::after {
-    background: radial-gradient(ellipse 120% 90% at 50% 38%, transparent 62%, oklch(0.78 0.03 120 / 0.3) 100%);
-}
-
-/* (k) Film grain (SVG feTurbulence, no external assets) */
-.bg-grain {
-    position: absolute;
-    inset: 0;
-    opacity: 0.05;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-    background-size: 160px 160px;
-}
-
-@media (max-width: 768px) {
-    /* Half the leaves, no god rays / light sweep / extra stalks: the scene
-       stays recognisable while the animation count roughly halves. */
-    .fall-leaf-5,
-    .fall-leaf-6,
-    .fall-leaf-7,
-    .fall-leaf-8,
-    .bg-godrays,
-    .bg-light-sweep,
-    #bamboo-mid,
-    #bamboo-far .far-4,
-    #bamboo-far .far-5,
-    #bamboo-far .far-6,
-    #bamboo-far .far-7,
-    #bamboo-near .near-3 {
-        display: none;
-    }
-}
-
-/* --- UI/UX cohesion pass -------------------------------------------------
-   Shared rhythm and interaction rules for the landing page. Component-specific
-   responsive refinements are repeated at the end of the cascade. */
-html {
-    scroll-padding-top: 96px;
-}
-
-body {
-    text-rendering: optimizeLegibility;
-}
-
-.footer-disclaimer {
-    color: oklch(0.72 0.015 90);
-}
-
-html.theme-light .footer-disclaimer {
-    color: var(--text-muted);
-}
-
-.logo-area {
-    text-decoration: none;
-    border-radius: 12px;
-}
-
-.logo-area:focus-visible,
-.nav-links a:focus-visible,
-.theme-toggle:focus-visible,
-.lang-dropdown:focus-visible,
-.hamburger:focus-visible,
-.btn:focus-visible,
-.faq-item summary:focus-visible {
-    outline: 3px solid var(--accent);
-    outline-offset: 4px;
-}
-
-.nav-links a {
-    position: relative;
-    padding: 0.55rem 0;
-}
-
-.nav-links a::after {
-    content: "";
-    position: absolute;
-    right: 0;
-    bottom: 0.25rem;
-    left: 0;
-    height: 2px;
-    border-radius: 999px;
-    background: var(--accent);
-    transform: scaleX(0);
-    transform-origin: right;
-    transition: transform 0.25s ease;
-}
-
-.nav-links a:hover::after,
-.nav-links a:focus-visible::after {
-    transform: scaleX(1);
-    transform-origin: left;
-}
-
-.hero-text {
-    max-width: 42rem;
-}
-
-.hero-text h1 {
-    text-wrap: balance;
-}
-
-.hero-subtitle,
-.section-subtitle,
-.use-cases-subtitle {
-    text-wrap: pretty;
-}
-
-.cta-group {
-    align-items: stretch;
-}
-
-.cta-group .btn {
-    min-height: 48px;
-    box-sizing: border-box;
-}
-
-.cta-trust {
-    max-width: 44rem;
-    line-height: 1.55;
-}
-
-section[id] {
-    scroll-margin-top: 96px;
-}
-
-.section-title,
-#how-it-works h2,
-#self-hosting h2,
-#faq h2 {
-    text-wrap: balance;
-    letter-spacing: -0.035em;
-}
-
-.use-case-card,
-.feature-card,
-.faq-item,
-.comparison-table-wrapper {
-    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.12);
-}
-
-html.theme-light :is(.use-case-card, .feature-card, .faq-item, .comparison-table-wrapper) {
-    box-shadow: 0 18px 46px oklch(0.22 0.035 140 / 0.09);
-}
-
-.use-case-card,
-.feature-card {
-    height: 100%;
-}
-
-.use-case-card p,
-.feature-card p,
-.faq-item p {
-    line-height: 1.7;
-}
-
-.faq-item summary {
-    min-height: 52px;
-    display: flex;
-    align-items: center;
-}
-
-.comparison-table tbody tr {
-    transition: background-color 0.2s ease;
-}
-
-@media (max-width: 768px) {
-    html {
-        scroll-padding-top: 76px;
-    }
-
-    .container {
-        padding-inline: 1.15rem;
-    }
-
-    section {
-        padding-block: 4.25rem;
-    }
-
-    .hero-text {
-        max-width: none;
-    }
-
-    .hero-text h1,
-    .section-title,
-    #how-it-works h2,
-    #self-hosting h2,
-    #faq h2 {
-        font-size: clamp(2rem, 9vw, 2.65rem) !important;
-    }
-
-    .cta-group {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        width: 100%;
-    }
-
-    .cta-group .btn {
-        width: 100%;
-        justify-content: center;
-    }
-
-    .cta-group .btn-primary,
-    .cta-group .btn-firefox {
-        grid-column: span 1;
-    }
-
-    .hero-github-cta,
-    .btn-demo-mobile {
-        grid-column: span 1;
-    }
-
-    .use-case-card,
-    .feature-card,
-    .faq-item,
-    .comparison-table-wrapper {
-        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
-    }
-}
-
-@media (max-width: 430px) {
-    .cta-group {
-        grid-template-columns: 1fr;
-    }
-
-    .cta-group .btn-primary,
-    .cta-group .btn-firefox,
-    .hero-github-cta,
-    .btn-demo-mobile {
-        grid-column: 1;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .nav-links a::after,
-    .use-case-card,
-    .feature-card,
-    .faq-item,
-    .btn {
-        transition-duration: 0.01ms !important;
-    }
-}
-
-/* (l) Click confetti: a small handful of eucalyptus leaves bursts from
-   wherever the visitor presses (spawned by app.js). Built like the falling
-   leaves above — the outer span owns the flight path (fast burst that
-   brakes at its peak, then sinks), the inner leaf rocks around its stem
-   the whole way down. Deliberately subtle: few, tiny, short-lived. */
-.click-leaf {
-    position: fixed;
-    z-index: 3000;
-    margin: -6px 0 0 -4px;
-    pointer-events: none;
-    opacity: 0;
-    animation: leafBurst var(--leaf-dur, 1.1s) forwards;
-    will-change: transform, opacity;
-}
-
-.click-leaf i {
-    display: block;
-    width: 8px;
-    height: 12px;
-    border-radius: 0 70% 0 70%;
-    background: linear-gradient(135deg, oklch(0.62 0.12 150 / 0.95), oklch(0.45 0.09 145 / 0.85));
-    transform: rotate(var(--leaf-rot, 0deg));
-    animation: leafRock var(--flutter-dur, 0.6s) ease-in-out infinite alternate;
-}
-
-.click-leaf-sage i {
-    background: linear-gradient(135deg, oklch(0.72 0.09 140 / 0.9), oklch(0.55 0.08 145 / 0.8));
-}
-
-.click-leaf-amber i {
-    background: linear-gradient(135deg, oklch(0.68 0.14 55 / 0.95), oklch(0.55 0.13 40 / 0.85));
-}
-
-/* Two-phase flight: --leaf-x/--leaf-y is the burst PEAK; from there each
-   leaf loses momentum and sinks past it while fading. Per-segment timing
-   functions give the fast pop and the gentle fall. */
-@keyframes leafBurst {
-    0% {
-        opacity: 0;
-        transform: translate(0, 0) scale(var(--leaf-scale, 1));
-        animation-timing-function: cubic-bezier(0.16, 0.84, 0.44, 1);
-    }
-    10% { opacity: 1; }
-    45% {
-        opacity: 1;
-        transform: translate(var(--leaf-x, 0), var(--leaf-y, -20px)) scale(var(--leaf-scale, 1));
-        animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
-    }
-    100% {
-        opacity: 0;
-        transform: translate(calc(var(--leaf-x, 0) * 1.4), calc(var(--leaf-y, -20px) + 44px)) scale(calc(var(--leaf-scale, 1) * 0.92));
-    }
-}
-
-@keyframes leafRock {
-    from { transform: rotate(calc(var(--leaf-rot, 0deg) - 24deg)); }
-    to { transform: rotate(calc(var(--leaf-rot, 0deg) + 24deg)); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .click-leaf { display: none; }
-    .bg-nature *,
-    .bg-nature *::before,
-    .bg-nature *::after {
-        animation: none !important;
-    }
-    .fall-leaf { opacity: 0; }
-}
-
-/* --- Layout --- */
-.container {
-    max-width: 1100px;
-    margin: 0 auto;
-    padding: 0 2rem;
-}
-
-section {
-    padding: 6rem 0;
-}
-
-#how-it-works {
-    padding: 4.5rem 0;
-}
-
-/* Content-visibility for offscreen sections to improve INP */
-.use-cases-section,
-#self-hosting,
-.comparison-section {
-    content-visibility: auto;
-    contain-intrinsic-size: auto 1400px;
-}
-
-/* --- Navigation --- */
-nav {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 1000;
-    background: var(--glass);
-    backdrop-filter: blur(12px);
-    border-bottom: 1px solid var(--glass-border);
-    padding: 1rem 0;
-    transition: padding 0.3s ease, background 0.3s ease;
-}
-
-nav.nav-scrolled {
-    padding: 0.75rem 0;
-    background: oklch(0.20 0.025 140 / 0.9);
-}
-
-html.theme-light nav.nav-scrolled {
-    background: oklch(0.95 0.01 100 / 0.92);
-}
-
-.nav-content {
-    display: flex;
-    align-items: center;
-}
-
-.logo-area {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    font-weight: 800;
-    font-size: 1.5rem;
-    letter-spacing: -0.5px;
-}
-
-/* Logo can be a plain <a>; without this it falls back to the UA link blue,
-   which clashed silently with the old indigo theme and visibly with green. */
-a.logo-area {
-    color: var(--text);
-}
-
-.logo-area picture {
-    display: contents;
-}
-
-.logo-area img {
-    height: 64px;
-    width: 64px;
-    object-fit: contain;
-    border-radius: 8px;
-    margin: -4px 0;
-}
-
-.nav-ext-status {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 3px 8px;
-    background: oklch(0.68 0.13 150 / 0.15);
-    border: 1px solid oklch(0.68 0.13 150 / 0.3);
-    color: oklch(0.68 0.13 150);
-    border-radius: 12px;
-    font-size: 0.55rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.1);
-    animation: fade-in 0.4s ease-out;
-    margin-left: 0.2rem;
-}
-
-@keyframes fade-in {
-    from { opacity: 0; transform: translateY(-5px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-.nav-links {
-    display: flex;
-    gap: 2rem;
-    margin-left: auto;
-}
-
-.nav-links a {
-    color: var(--text-muted);
-    text-decoration: none;
-    font-weight: 500;
-    transition: color 0.3s;
-}
-
-.nav-links a:hover {
-    color: var(--accent);
-}
-
-.nav-right {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-left: 2rem;
-    flex-shrink: 0;
-}
-
-/* --- Theme Toggle (sun/moon) --- */
-.theme-toggle {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    padding: 0;
-    background: transparent;
-    border: none;
-    border-radius: 10px;
-    color: var(--text-muted);
-    cursor: pointer;
-    flex-shrink: 0;
-    transition: color 0.3s, transform 0.3s;
-    overflow: hidden;
-}
-
-.theme-toggle:hover {
-    color: var(--accent);
-    transform: scale(1.15);
-}
-
-.theme-toggle:active {
-    transform: scale(0.9);
-}
-
-.theme-toggle svg {
-    position: absolute;
-    width: 18px;
-    height: 18px;
-    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
-}
-
-/* Default (Dark mode): Sun visible, Moon hidden & rotated */
-.theme-toggle .theme-icon-sun {
-    opacity: 1;
-    transform: scale(1) rotate(0deg);
-}
-
-.theme-toggle .theme-icon-moon {
-    opacity: 0;
-    transform: scale(0) rotate(-90deg);
-}
-
-/* Light mode: Moon visible, Sun hidden & rotated */
-html.theme-light .theme-toggle .theme-icon-sun {
-    opacity: 0;
-    transform: scale(0) rotate(90deg);
-}
-
-html.theme-light .theme-toggle .theme-icon-moon {
-    opacity: 1;
-    transform: scale(1) rotate(0deg);
-}
-
-/* --- Light Theme --- */
-html.theme-light {
-    --accent-green: oklch(0.52 0.12 150);
-    --accent-green-hover: oklch(0.58 0.12 150);
-    --text-on-green: #ffffff;
-    --bg: oklch(0.95 0.01 100);
-    --card: #ffffff;
-    --accent: var(--accent-green);
-    --accent-glow: oklch(0.52 0.12 150 / 0.25);
-    --text: oklch(0.20 0.025 140);
-    --text-muted: oklch(0.45 0.02 110);
-    --glass: rgba(255, 255, 255, 0.7);
-    --glass-border: oklch(0.20 0.025 140 / 0.08);
-    --section-tint: transparent;
-    --section-tint-strong: oklch(0.88 0.015 90 / 0.5);
-    --card-surface: rgba(255, 255, 255, 0.75);
-    --card-border: oklch(0.20 0.025 140 / 0.08);
-    color-scheme: light;
-}
-
-html.theme-light .bg-nature {
-    background:
-        radial-gradient(circle at 16% 10%, oklch(0.85 0.06 150 / 0.3), transparent 34rem),
-        radial-gradient(circle at 78% 68%, oklch(0.85 0.06 60 / 0.2), transparent 38rem),
-        linear-gradient(180deg, oklch(0.96 0.01 90) 0%, oklch(0.93 0.025 140) 46%, oklch(0.96 0.01 90) 100%);
-}
-
-html.theme-light .bg-canopy,
-html.theme-light .canopy-arc,
-html.theme-light .bg-grass {
-    opacity: 0.45;
-}
-
-/* By day the stalks get their own fresh-green recipes — the dark-theme
-   gradients faded to 45% read as grey smears on the light backdrop and
-   stopped looking like bamboo at all. */
-html.theme-light #bamboo-far .bamboo-stalk {
-    opacity: 0.55;
-    background:
-        repeating-linear-gradient(180deg,
-            transparent 0, transparent 108px,
-            oklch(0.55 0.09 145 / 0.4) 108px, oklch(0.55 0.09 145 / 0.4) 112px),
-        linear-gradient(180deg, oklch(0.68 0.11 145 / 0.6), oklch(0.62 0.09 140 / 0.35));
-}
-
-html.theme-light #bamboo-far::before,
-html.theme-light #bamboo-far::after {
-    background: linear-gradient(180deg, oklch(0.7 0.1 145 / 0.5), oklch(0.64 0.08 140 / 0.25));
-}
-
-html.theme-light #bamboo-mid .bamboo-stalk {
-    opacity: 0.65;
-    background:
-        repeating-linear-gradient(180deg,
-            transparent 0, transparent 84px,
-            oklch(0.5 0.1 145 / 0.45) 84px, oklch(0.5 0.1 145 / 0.45) 87px),
-        linear-gradient(90deg, transparent 14%, oklch(0.85 0.08 130 / 0.35) 38%, transparent 68%),
-        linear-gradient(180deg, oklch(0.63 0.115 145 / 0.65), oklch(0.57 0.09 140 / 0.4));
-}
-
-html.theme-light #bamboo-mid .bamboo-stalk::before,
-html.theme-light #bamboo-mid .bamboo-stalk::after {
-    background: oklch(0.55 0.13 145 / 0.5);
-}
-
-html.theme-light #bamboo-near .bamboo-stalk {
-    opacity: 0.75;
-    background:
-        linear-gradient(90deg, transparent 12%, oklch(0.88 0.07 130 / 0.4) 36%, transparent 64%),
-        linear-gradient(180deg, oklch(0.59 0.12 145 / 0.75), oklch(0.52 0.1 140 / 0.5));
-}
-
-html.theme-light #bamboo-near .bamboo-node {
-    background: oklch(0.45 0.1 145 / 0.65);
-}
-
-html.theme-light #bamboo-near .bamboo-leaf {
-    background: oklch(0.55 0.13 145 / 0.6);
-}
-
-/* The centre trunks stay whisper-quiet by daylight too */
-html.theme-light #bamboo-far .far-6,
-html.theme-light #bamboo-far .far-7 {
-    opacity: 0.26;
-}
-
-html.theme-light .bg-mist {
-    display: none;
-}
-
-html.theme-light .bg-dusk-tint {
-    display: none;
-}
-
-html.theme-light .godray {
-    filter: blur(12px);
-    opacity: 0.5;
-}
-
-html.theme-light .bg-grain {
-    opacity: 0.035;
-}
-
-html.theme-light .feature-card,
-html.theme-light .faq-item {
-    background: var(--card-surface);
-    border-color: var(--card-border);
-    box-shadow: 0 8px 24px oklch(0.20 0.025 140 / 0.06);
-}
-
-html.theme-light .feature-card::before {
-    background: linear-gradient(to bottom right, oklch(0.20 0.025 140 / 0.08), transparent);
-}
-
-html.theme-light .use-case-card {
-    background: var(--card-surface);
-}
-
-html.theme-light .use-case-card h3 {
-    color: var(--text);
-}
-
-html.theme-light .use-case-card:hover {
-    box-shadow: 0 12px 30px oklch(0.20 0.025 140 / 0.12);
-    border-color: oklch(0.20 0.025 140 / 0.15);
-}
-
-html.theme-light .faq-item[open] {
-    background: #ffffff;
-}
-
-html.theme-light .faq-item p {
-    border-top-color: oklch(0.20 0.025 140 / 0.08);
-}
-
-html.theme-light .btn-secondary {
-    background: #ffffff;
-    border-color: oklch(0.20 0.025 140 / 0.12);
-}
-
-html.theme-light .btn-secondary:hover {
-    background: oklch(0.88 0.015 90);
-}
-
-html.theme-light .btn-firefox {
-    background: oklch(0.62 0.14 45);
-    color: #ffffff;
-    box-shadow: 0 10px 18px oklch(0.62 0.14 45 / 0.24);
-}
-
-html.theme-light .btn-firefox:hover {
-    background: oklch(0.55 0.13 45);
-    box-shadow: 0 18px 26px oklch(0.62 0.14 45 / 0.28);
-}
-
-html.theme-light .btn-firefox img {
-    filter: brightness(0) saturate(100%) invert(13%) sepia(38%) saturate(1084%) hue-rotate(177deg) brightness(89%) contrast(96%);
-}
-
-html.theme-light .btn-firefox-secondary img {
-    filter: brightness(0) saturate(100%) invert(13%) sepia(38%) saturate(1084%) hue-rotate(177deg) brightness(89%) contrast(96%);
-}
-
-html.theme-light .comparison-section {
-    background: transparent;
-}
-
-html.theme-light .comparison-table-wrapper {
-    background: rgba(255, 255, 255, 0.75);
-    box-shadow: 0 10px 30px oklch(0.20 0.025 140 / 0.08);
-}
-
-html.theme-light .comparison-table th {
-    background: oklch(0.20 0.025 140 / 0.06);
-    color: var(--text);
-}
-
-html.theme-light .comparison-table th,
-html.theme-light .comparison-table td {
-    border-bottom-color: oklch(0.20 0.025 140 / 0.08);
-}
-
-html.theme-light .comparison-table tbody tr:hover {
-    background: oklch(0.20 0.025 140 / 0.03);
-}
-
-html.theme-light .feat-name strong {
-    color: var(--text);
-}
-
-html.theme-light .table-footnotes {
-    background: oklch(0.20 0.025 140 / 0.04);
-    border-top-color: oklch(0.20 0.025 140 / 0.06);
-}
-
-@media (max-width: 900px) {
-    html.theme-light .comparison-table tbody tr {
-        background: rgba(255, 255, 255, 0.85);
-        box-shadow: 0 6px 18px oklch(0.20 0.025 140 / 0.08);
-    }
-    html.theme-light .comparison-table td.feat-name {
-        background: oklch(0.20 0.025 140 / 0.05);
-    }
-    html.theme-light .comparison-table td {
-        border-bottom-color: oklch(0.20 0.025 140 / 0.08);
-    }
-}
-
-html.theme-light .compat-logo img,
-html.theme-light .compat-logo {
-    filter: none;
-}
-
-/* --- Hero Section --- */
-.hero {
-    min-height: 100vh;
-    display: flex;
-    align-items: flex-start;
-    padding-top: clamp(8rem, 12vh, 10rem);
-    padding-bottom: clamp(2rem, 5vh, 4rem);
-}
-
-.hero-grid {
-    display: grid;
-    /* Single column until the interactive demo appears (1024px). Below that the
-       headline gets the full width and the install CTAs stay prominent while the
-       demo stacks underneath, matching the demo's own 1024px breakpoint. */
-    grid-template-columns: minmax(0, 1fr);
-    align-content: center;
-    /* Keep the whole hero vertically centered. Do not use grid alignment to fix
-       the demo top edge; that moves the headline and breaks the hero balance. */
-    align-items: center;
-    gap: 3rem;
-    text-align: left;
-    width: 100%;
-    min-height: calc(100svh - 12.5rem);
-}
-
-@media (min-width: 1024px) {
-    .container {
-        max-width: 1200px;
-    }
-    .hero-grid {
-        grid-template-columns: 1.35fr 1fr;
-        gap: 3.5rem;
-    }
-    .cta-group {
-        gap: 0.75rem;
-    }
-    .cta-group .btn {
-        padding: 0.8rem 1.35rem;
-    }
-}
-
-.hero-text h1 {
-    font-size: clamp(2.9rem, 4.1vw, 4rem);
-    font-weight: 800;
-    line-height: 1.12;
-    margin-bottom: 1.4rem;
-    padding-bottom: 0.1em;
-    color: var(--text);
-    letter-spacing: -0.02em;
-}
-
-.hero-text h1 .hero-highlight {
-    background: linear-gradient(90deg, var(--accent-green), var(--accent-terracotta), var(--accent-green));
-    background-size: 300% 100%;
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    white-space: nowrap;
-    animation: hero-gradient-pan 10s linear infinite;
-    /* background-clip: text only paints inside the layout box; with the
-       negative h1 letter-spacing the last glyph overhangs it and gets cut
-       off. Invisible padding extends the paint area without moving text. */
-    padding-right: 0.08em;
-    margin-right: -0.08em;
-}
-
-@keyframes hero-gradient-pan {
-    from { background-position: 0% 50%; }
-    to { background-position: 300% 50%; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .hero-text h1 .hero-highlight {
-        animation: none;
-    }
-}
-
-.hero-text p, .hero-subtitle {
-    font-size: 1.25rem;
-    color: var(--text-muted);
-    margin-bottom: 1.9rem;
-    max-width: 600px;
-    font-weight: 400;
-    line-height: 1.6;
-}
-
-.hero-mascot-container {
-    position: relative;
-    display: block;
-    margin-bottom: -0.5rem;
-    margin-left: 2.2rem;
-}
-
-.hero-lookdown-mascot {
-    display: block;
-    width: 90px;
-    height: auto;
-}
-
-/* Changelog link as the koala's comic speech bubble. Absolutely positioned
-   so it never moves the koala out of its spot above the install buttons. */
-.koala-speech-bubble {
-    position: absolute;
-    left: 108px;
-    top: 0.2rem;
-    width: max-content;
-    max-width: min(240px, calc(100% - 120px));
-    display: block;
-    text-decoration: none;
-    text-align: left;
-    background: oklch(0.27 0.035 130 / 0.95);
-    border: 1px solid oklch(0.68 0.13 150 / 0.45);
-    border-radius: 14px;
-    border-bottom-left-radius: 4px;
-    padding: 0.6rem 0.9rem;
-    line-height: 1.35;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
-    animation: bubble-float 4s ease-in-out infinite;
-    transition: border-color 0.25s ease, box-shadow 0.25s ease;
-}
-
-/* Tail: outline triangle + fill triangle so it reads as part of the bubble */
-.koala-speech-bubble::before,
-.koala-speech-bubble::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-}
-
-.koala-speech-bubble::before {
-    left: -11px;
-    bottom: 10px;
-    border-top: 8px solid transparent;
-    border-bottom: 4px solid transparent;
-    border-right: 11px solid oklch(0.68 0.13 150 / 0.45);
-}
-
-.koala-speech-bubble::after {
-    left: -9px;
-    bottom: 11px;
-    border-top: 7px solid transparent;
-    border-bottom: 3px solid transparent;
-    border-right: 10px solid oklch(0.27 0.035 130 / 0.95);
-}
-
-.koala-speech-bubble:hover {
-    border-color: oklch(0.68 0.13 150 / 0.85);
-    box-shadow: 0 8px 28px oklch(0.68 0.13 150 / 0.35);
-}
-
-.koala-speech-bubble .version-text-en,
-.koala-speech-bubble .version-text-de {
-    display: block;
-}
-
-.koala-speech-bubble .bubble-title {
-    display: block;
-    font-size: 0.85rem;
-    font-weight: 800;
-    color: var(--text);
-    letter-spacing: 0;
-    white-space: nowrap;
-}
-
-.koala-speech-bubble .bubble-sub {
-    display: block;
-    font-size: 0.72rem;
-    font-weight: 600;
-    color: var(--accent);
-    margin-top: 2px;
-}
-
-html.theme-light .koala-speech-bubble {
-    background: rgba(255, 255, 255, 0.96);
-    box-shadow: 0 8px 24px oklch(0.20 0.025 140 / 0.12);
-}
-
-html.theme-light .koala-speech-bubble::after {
-    border-right-color: rgba(255, 255, 255, 0.96);
-}
-
-@keyframes bubble-float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-4px); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .koala-speech-bubble {
-        animation: none;
-    }
-}
-
-@media (max-width: 768px) {
-    /* The koala keeps standing on the active install CTA; app.js updates the
-       offset from the real button geometry when the row wraps. */
-    .hero-mascot-container {
-        --hero-mascot-offset: 0px;
-        margin-left: 0;
-        display: flex;
-        justify-content: center;
-    }
-    .hero-lookdown-mascot {
-        transform: translateX(var(--hero-mascot-offset));
-    }
-    .koala-speech-bubble {
-        left: calc(50% + var(--hero-mascot-offset) + 50px);
-        right: 0.75rem;
-        top: 0.3rem;
-        max-width: 240px;
-        padding: 0.5rem 0.75rem;
-    }
-    .koala-speech-bubble .bubble-title {
-        font-size: 0.8rem;
-    }
-    .koala-speech-bubble .bubble-sub {
-        font-size: 0.68rem;
-    }
-    /* The relative release time is too much text for the small mobile bubble */
-    .koala-speech-bubble .bubble-ago {
-        display: none;
-    }
-}
-
-.cta-group {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
-}
-
-/* Quiet trust line under the install buttons; answers "is it free, is it
-   legit, do I need an account" right at the moment of the click decision. */
-.hero-text .cta-trust {
-    margin-top: 0.85rem;
-    margin-bottom: 0;
-    font-size: 0.8rem;
-    font-weight: 500;
-    color: var(--text-muted);
-    opacity: 0.75;
-    letter-spacing: 0.01em;
-    max-width: none;
-}
-
-.btn {
-    padding: 0.85rem 1.75rem;
-    border-radius: 12px;
-    font-weight: 600;
-    text-decoration: none;
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.95rem;
-}
-.btn-primary {
-    background: linear-gradient(135deg, oklch(0.48 0.13 150), oklch(0.39 0.10 145));
-    color: #fff;
-    border: 1px solid oklch(0.72 0.11 95 / 0.24);
-    box-shadow: 0 12px 24px -8px oklch(0.38 0.11 148 / 0.65), 0 0 0 1px oklch(0.80 0.08 90 / 0.06) inset;
-}
-
-.btn-primary:hover {
-    background: linear-gradient(135deg, oklch(0.54 0.14 150), oklch(0.44 0.11 145));
-    transform: translateY(-2px);
-    box-shadow: 0 18px 32px -8px oklch(0.38 0.11 148 / 0.75), 0 0 18px oklch(0.68 0.13 150 / 0.18);
-}
-
-.btn-firefox {
-    background: oklch(0.62 0.14 45);
-    color: white;
-    box-shadow: 0 10px 15px -3px oklch(0.62 0.14 45 / 0.3);
-}
-
-.btn-firefox:hover {
-    background: oklch(0.68 0.14 45);
-    transform: translateY(-2px);
-    box-shadow: 0 20px 25px -5px oklch(0.62 0.14 45 / 0.4);
-}
-
-.btn-secondary {
-    background: var(--card);
-    color: var(--text);
-    border: 1px solid var(--glass-border);
-}
-
-.btn-secondary:hover {
-    background: oklch(0.30 0.03 125);
-    transform: translateY(-2px);
-}
-
-.btn-demo-mobile {
-    display: none;
-    border: 1px solid oklch(0.68 0.13 150 / 0.34);
-    cursor: pointer;
-    font: inherit;
-}
-
-.btn-demo-mobile svg {
-    flex-shrink: 0;
-}
-
-/* Install buttons: compact by default (just the browser name) so all three
-   CTAs fit one line; the detected browser expands to the full call to action.
-   The GitHub button stays compact always. */
-.btn-label-full { display: none; }
-
-.btn-install:not(.is-detected),
-.btn-compact {
-    padding: 0.62rem 1.05rem;
-    font-size: 0.9rem;
-    gap: 0.4rem;
-}
-
-.btn-install.is-detected .btn-label-short { display: none; }
-.btn-install.is-detected .btn-label-full { display: inline; }
-
-.version-badge {
-    display: inline-block;
-    background: oklch(0.68 0.13 150 / 0.1);
-    color: var(--accent);
-    padding: 0.4rem 1rem;
-    border-radius: 99px;
-    font-size: 0.8rem;
-    font-weight: 700;
-    margin-bottom: 1.5rem;
-    border: 1px solid oklch(0.68 0.13 150 / 0.3);
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    cursor: pointer;
-    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
-}
-
-.version-badge-below {
-    margin-bottom: 0;
-    margin-top: 1.5rem;
-}
-
-.version-badge:hover {
-    background: oklch(0.68 0.13 150 / 0.2);
-    box-shadow: 0 0 16px oklch(0.68 0.13 150 / 0.3);
-    transform: translateY(-1px);
-}
-
-/* --- Interactive CSS Extension Mockup --- */
-.hero-mockup-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-}
-
-.extension-mockup {
-    width: 100%;
-    max-width: 320px;
-    height: 528px;
-    background: oklch(0.20 0.025 140);
-    border-radius: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px oklch(0.68 0.13 150 / 0.15);
-    display: flex;
-    flex-direction: column;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    overflow: hidden;
-    position: relative;
-    user-select: none;
-    padding: 14px;
-    padding-bottom: 0;
-    box-sizing: border-box;
-}
-
-.mock-header-row {
-    display: flex;
-    align-items: center;
-    margin-bottom: 12px;
-    flex-shrink: 0;
-}
-
-.mock-header-title {
-    font-size: 18px;
-    margin: 0;
-    color: var(--accent);
-    letter-spacing: 1px;
-    text-transform: uppercase;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    font-weight: 800;
-}
-
-.mock-header-title picture {
-    display: contents;
-}
-
-.mock-header-title img {
-    width: 28px;
-    height: 28px;
-    object-fit: contain;
-    border-radius: 6px;
-}
-
-.mock-version-link {
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 10px;
-    color: var(--text-muted);
-    text-decoration: none;
-    opacity: 0.5;
-    transition: opacity 0.2s, color 0.2s;
-    cursor: pointer;
-}
-
-.mock-version-link:hover {
-    opacity: 1;
-    color: var(--accent);
-}
-
-/* Close button for the hero demo popup (hidden in the static mobile mockup) */
-.mock-close-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    margin-left: 8px;
-    padding: 0;
-    flex-shrink: 0;
-    background: transparent;
-    border: none;
-    border-radius: 6px;
-    color: var(--text-muted);
-    cursor: pointer;
-    transition: color 0.2s, background 0.2s;
-}
-
-.mock-close-btn:hover {
-    color: #fff;
-    background: rgba(255, 255, 255, 0.1);
-}
-
-@media (max-width: 1024px) {
-    .mock-close-btn {
-        display: none;
-    }
-}
-
-.mock-tabs {
-    display: flex;
-    gap: 4px;
-    background: oklch(0.27 0.035 130);
-    padding: 4px;
-    border-radius: 12px;
-    margin-bottom: 14px;
-    flex-shrink: 0;
-}
-
-.mock-tab {
-    flex: 1;
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    font-size: 0.75rem;
-    font-weight: 600;
-    padding: 7px 4px;
-    cursor: pointer;
-    border-radius: 8px;
-    transition: color 0.2s, background-color 0.2s;
-    text-align: center;
-}
-
-.mock-tab:hover {
-    color: var(--text);
-}
-
-.mock-tab.active {
-    background: var(--accent);
-    color: var(--text-on-green);
-}
-
-.mock-body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0;
-    padding-bottom: 12px;
-    display: flex;
-    flex-direction: column;
-    font-size: 0.8rem;
-    scrollbar-width: none; /* Firefox */
-}
-
-.mock-body::-webkit-scrollbar {
-    display: none; /* Chrome, Safari, Opera */
-}
-
-.mock-screen {
-    display: none;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.mock-screen.active {
-    display: flex;
-}
-
-/* Common Mockup Components */
-.mock-card {
-    background: oklch(0.27 0.035 130);
-    border: 1px solid oklch(0.32 0.03 125);
-    border-radius: 8px;
-    padding: 10px;
-}
-
-.mock-label {
-    font-size: 0.65rem;
-    font-weight: 700;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-bottom: 0.3rem;
-}
-
-.mock-section-label {
-    display: block;
-    font-size: 11px;
-    text-transform: uppercase;
-    color: var(--text-muted);
-    margin-bottom: 4px;
-    font-weight: 700;
-}
-
-.mock-input {
-    background: oklch(0.27 0.035 130);
-    border: 1px solid oklch(0.32 0.03 125);
-    border-radius: 8px;
-    color: white;
-    padding: 8px 10px;
-    font-size: 0.75rem;
-    width: 100%;
-    outline: none;
-}
-
-.mock-btn {
-    background: var(--accent);
-    color: var(--text-on-green);
-    border: none;
-    border-radius: 6px;
-    padding: 0.5rem;
-    font-weight: 600;
-    font-size: 0.75rem;
-    cursor: pointer;
-    transition: background 0.2s;
-    text-align: center;
-}
-
-.mock-btn:hover {
-    background: oklch(0.60 0.12 150);
-}
-
-/* Room Tab Details */
-.mock-joined-room {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: oklch(0.68 0.13 150 / 0.1);
-    border: 1px solid oklch(0.68 0.13 150 / 0.2);
-    border-radius: 8px;
-    padding: 0.6rem 0.75rem;
-}
-
-.mock-room-name {
-    font-weight: 700;
-    color: var(--accent);
-    font-size: 0.85rem;
-}
-
-.mock-server-badge {
-    background: oklch(0.68 0.13 150 / 0.2);
-    color: var(--accent);
-    font-size: 0.6rem;
-    font-weight: 700;
-    padding: 2px 6px;
-    border-radius: 4px;
-}
-
-.mock-invite-box {
-    display: flex;
-    gap: 0.35rem;
-}
-
-.mock-invite-box input {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.demo-room-empty {
-    display: none;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    padding: 24px 10px;
-    text-align: center;
-}
-.demo-room-empty img {
-    border-radius: 10px;
-    opacity: 0.85;
-    box-shadow: 0 4px 12px oklch(0.68 0.13 150 / 0.2);
-}
-.demo-room-empty-text {
-    font-size: 0.8rem;
-    color: var(--text-muted);
-    font-weight: 600;
-}
-.demo-create-room-btn {
-    background: var(--accent);
-    border: none;
-    color: var(--text-on-green);
-    font-weight: 700;
-    padding: 10px 18px;
-    border-radius: 10px;
-    cursor: pointer;
-    transition: transform 0.2s, box-shadow 0.2s;
-}
-.demo-create-room-btn:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px oklch(0.68 0.13 150 / 0.4);
-}
-.demo-create-room-btn:active {
-    transform: scale(0.96);
-}
-
-.mock-peer-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-}
-
-.mock-peer-item {
-    display: flex;
-    flex-direction: column;
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.03);
-    border-radius: 8px;
-    padding: 0.45rem 0.55rem;
-}
-
-.mock-peer-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.2rem;
-}
-
-.mock-peer-name {
-    font-weight: 700;
-    color: var(--text);
-}
-
-.mock-peer-meta {
-    font-size: 0.65rem;
-    color: var(--text-muted);
-}
-
-.mock-peer-tab {
-    font-size: 0.7rem;
-    color: var(--accent);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.mock-peer-status {
-    font-size: 0.65rem;
-    color: var(--text-muted);
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-}
-
-/* Sync Tab Details */
-.mock-target-box {
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-    background: oklch(0.62 0.14 45 / 0.1);
-    border: 1px solid oklch(0.62 0.14 45 / 0.2);
-    color: oklch(0.72 0.13 50);
-    padding: 0.5rem 0.6rem;
-    border-radius: 8px;
-    font-weight: 600;
-    font-size: 0.7rem;
-}
-
-.mock-ctrl-buttons {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 0.5rem;
-}
-
-.mock-btn-play { background: oklch(0.68 0.13 150); }
-.mock-btn-play:hover { background: oklch(0.60 0.12 150); }
-.mock-btn-pause { background: oklch(0.55 0.15 25); color: #fff; }
-.mock-btn-pause:hover { background: oklch(0.48 0.14 25); }
-.mock-btn-force { background: var(--accent); grid-column: span 2; }
-
-/* Contrast-safe palette for the decorative hero demo. Lighthouse/axe audits
-   sighted text contrast even inside aria-hidden, so every walkthrough state
-   must meet WCAG AA. Accent shown as text gets a lighter indigo; buttons that
-   put white text on a colour get a darker shade (these beat inline styles). */
-.hero-demo-scene {
-    --accent: oklch(0.80 0.10 150);
-    --demo-sky-top: oklch(0.22 0.055 152);
-    --demo-sky-mid: oklch(0.145 0.035 150);
-    --demo-sky-bottom: oklch(0.075 0.018 145);
-    --demo-glow: oklch(0.76 0.13 150 / 0.34);
-    --demo-stars: oklch(0.94 0.025 95);
-    --demo-moon: oklch(0.97 0.025 92);
-    --demo-mountain: oklch(0.18 0.055 148 / 0.9);
-    --demo-midground: oklch(0.22 0.065 145 / 0.88);
-    --demo-foreground: oklch(0.065 0.025 145);
-    --demo-card: oklch(0.18 0.032 142);
-    --demo-toolbar: oklch(0.12 0.025 142);
-    --demo-control-fade: oklch(0.055 0.015 145 / 0.94);
-    --demo-track: oklch(0.92 0.02 95 / 0.2);
-}
-.hero-demo-scene .mock-tab.active,
-.hero-demo-scene .mock-btn-force,
-.hero-demo-scene #demo-force-sync,
-.hero-demo-scene .demo-create-room-btn {
-    background: oklch(0.42 0.09 150) !important;
-    color: #fff;
-}
-.hero-demo-scene .mock-btn-play {
-    background: oklch(0.50 0.11 150) !important;
-}
-.hero-demo-scene .mock-btn-pause,
-.hero-demo-scene #demo-room-joined > button.mock-btn {
-    background: oklch(0.45 0.14 25) !important;
-}
-.hero-demo-scene .mock-version-link {
-    opacity: 0.85;
-}
-
-html.theme-light .hero-demo-scene {
-    --accent: oklch(0.60 0.12 150);
-    --demo-sky-top: oklch(0.86 0.085 78);
-    --demo-sky-mid: oklch(0.76 0.095 112);
-    --demo-sky-bottom: oklch(0.54 0.10 150);
-    --demo-glow: oklch(0.92 0.13 72 / 0.44);
-    --demo-stars: oklch(0.98 0.025 90);
-    --demo-moon: oklch(0.99 0.025 88);
-    --demo-mountain: oklch(0.48 0.095 150 / 0.82);
-    --demo-midground: oklch(0.40 0.10 148 / 0.8);
-    --demo-foreground: oklch(0.24 0.075 145);
-    --demo-card: oklch(0.985 0.008 95);
-    --demo-toolbar: oklch(0.955 0.014 100);
-    --demo-control-fade: oklch(0.16 0.035 145 / 0.88);
-    --demo-track: oklch(0.98 0.01 95 / 0.34);
-}
-
-
-html.theme-light .hero-demo-scene .demo-tab-card {
-    background: var(--demo-card);
-    border-color: oklch(0.20 0.025 140 / 0.1);
-    box-shadow:
-        0 18px 38px oklch(0.20 0.025 140 / 0.16),
-        0 0 28px oklch(0.82 0.10 85 / 0.14),
-        inset 0 1px rgba(255, 255, 255, 0.9);
-}
-
-html.theme-light .hero-demo-scene .demo-tab-titlebar {
-    background: var(--demo-toolbar);
-    border-bottom-color: oklch(0.88 0.015 90);
-    color: oklch(0.45 0.02 110);
-}
-
-html.theme-light .hero-demo-scene .demo-tab-dots i {
-    background: oklch(0.78 0.02 90);
-}
-
-html.theme-light .hero-demo-scene .demo-ext-launcher {
-    background: #ffffff;
-    border-color: oklch(0.78 0.02 90);
-}
-
-html.theme-light .hero-demo-scene .demo-sync-chip {
-    background: oklch(0.55 0.12 150 / 0.1);
-    border-color: oklch(0.55 0.12 150 / 0.26);
-    color: oklch(0.40 0.10 150);
-}
-
-.mock-status-display {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.mock-status-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.3rem;
-    background: oklch(0.68 0.13 150 / 0.1);
-    border: 1px solid oklch(0.68 0.13 150 / 0.2);
-    color: oklch(0.68 0.13 150);
-    padding: 2px 8px;
-    border-radius: 99px;
-    font-size: 0.65rem;
-    font-weight: 700;
-}
-
-.mock-log-item {
-    font-size: 0.7rem;
-    color: var(--text-muted);
-    border-left: 2px solid var(--accent);
-    padding-left: 0.4rem;
-    margin-top: 0.4rem;
-}
-
-/* Settings Tab Details */
-.mock-settings-row {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.5rem;
-    margin-bottom: 0.6rem;
-}
-
-.mock-settings-row input[type="checkbox"] {
-    margin-top: 0.2rem;
-    cursor: pointer;
-}
-
-.mock-settings-row label {
-    cursor: pointer;
-    font-weight: 600;
-}
-
-.mock-settings-row p {
-    font-size: 0.65rem;
-    color: var(--text-muted);
-    margin-top: 0.1rem;
-}
-
-/* Mock Toggle Switch Details */
-.mock-toggle-switch {
-    position: relative;
-    display: inline-block;
-    width: 36px;
-    height: 20px;
-    flex-shrink: 0;
-}
-
-.mock-toggle-switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.mock-slider {
-    position: absolute;
-    cursor: default;
-    top: 0; left: 0; right: 0; bottom: 0;
-    background-color: oklch(0.32 0.03 125);
-    transition: .3s;
-    border-radius: 20px;
-}
-
-.mock-slider:before {
-    position: absolute;
-    content: "";
-    height: 14px;
-    width: 14px;
-    left: 3px;
-    bottom: 3px;
-    background-color: oklch(0.68 0.02 100);
-    transition: .3s;
-    border-radius: 50%;
-}
-
-input:checked + .mock-slider {
-    background-color: var(--accent);
-}
-
-input:checked + .mock-slider:before {
-    transform: translateX(16px);
-    background-color: white;
-}
-
-/* Dev Tab Details */
-.mock-diagnostic-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 0.4rem;
-}
-
-.mock-diag-box {
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.04);
-    border-radius: 6px;
-    padding: 0.4rem;
-}
-
-.mock-diag-box .diag-val {
-    font-family: monospace;
-    font-weight: 700;
-    color: var(--accent);
-    font-size: 0.75rem;
-}
-
-/* --- Features --- */
-/* Bento Grid Layout Configuration */
-.features-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1.5rem;
-    margin-top: 4rem;
-}
-
-.feature-card.feature-card-compact {
-    padding: 1.8rem;
-    border-radius: 16px;
-}
-
-.feature-card.feature-card-compact::before {
-    border-radius: 16px;
-}
-
-.feature-card.feature-card-compact h3 {
-    font-size: 1.1rem;
-    margin-bottom: 0.75rem;
-}
-
-.feature-card.feature-card-compact p {
-    font-size: 0.9rem;
-}
-
-.feature-card {
-    background: oklch(0.27 0.035 130 / 0.45);
-    backdrop-filter: blur(16px) saturate(120%);
-    -webkit-backdrop-filter: blur(16px) saturate(120%);
-    padding: 2.5rem;
-    border-radius: 24px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-}
-
-.feature-card::before {
-    content: '';
-    position: absolute;
-    top: 0; left: 0; right: 0; bottom: 0;
-    border-radius: 24px;
-    padding: 1px;
-    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.12), transparent);
-    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-    -webkit-mask-composite: xor;
-    mask-composite: exclude;
-    pointer-events: none;
-}
-
-.feature-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 15px 30px oklch(0.68 0.13 150 / 0.2);
-    border-color: oklch(0.68 0.13 150 / 0.3);
-}
-
-.feature-card:hover::before {
-    background: linear-gradient(to bottom right, oklch(0.68 0.13 150 / 0.3), transparent);
-}
-
-/* Feature Icon with Inline SVG Wrapper */
-.feature-icon-svg {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: 44px;
-    height: 44px;
-    background: oklch(0.68 0.13 150 / 0.12);
-    color: var(--accent);
-    border-radius: 12px;
-    margin-right: 14px;
-    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
-}
-
-.feature-card:hover .feature-icon-svg {
-    background: var(--accent);
-    color: var(--text-on-green);
-    box-shadow: 0 0 15px var(--accent-glow);
-    transform: scale(1.05);
-}
-
-.bento-icon {
-    width: 22px;
-    height: 22px;
-    display: block;
-    flex-shrink: 0;
-}
-
-.feature-card h3 {
-    margin-bottom: 1rem;
-    font-size: 1.25rem;
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-}
-
-.feature-card p {
-    color: var(--text-muted);
-    font-size: 0.95rem;
-    line-height: 1.6;
-}
-
-/* Bento Asymmetric Spanning */
-.feature-card.bento-large {
-    grid-column: span 2;
-    background: linear-gradient(135deg, oklch(0.27 0.035 130 / 0.45) 0%, oklch(0.68 0.13 150 / 0.08) 100%);
-    padding: 3rem 3.5rem;
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-    gap: 3rem;
-    align-items: center;
-}
-
-.feature-card.bento-large h3 {
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: 1rem;
-    margin-bottom: 0;
-    font-size: 1.25rem;
-}
-
-.feature-card.bento-large .feature-icon,
-.feature-card.bento-large .feature-icon-svg {
-    width: 52px;
-    height: 52px;
-    border-radius: 14px;
-    margin-right: 0;
-    flex-shrink: 0;
-}
-
-.feature-card.bento-large .bento-icon {
-    width: 24px;
-    height: 24px;
-}
-
-.feature-card.bento-large p {
-    font-size: 1rem;
-    line-height: 1.7;
-    margin: 0;
-}
-
-.feature-card.bento-large::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 2.5rem;
-    right: 2.5rem;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, oklch(0.68 0.13 150 / 0.4), transparent);
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-
-.feature-card.bento-large:hover::after {
-    opacity: 1;
-}
-
-@media (max-width: 900px) {
-    .features-grid {
-        /* Keep the Why KoalaSync grid at either three columns or one column.
-           The two-column in-between makes compact cards stretch unevenly. */
-        grid-template-columns: 1fr;
-        gap: 1.25rem;
-    }
-    .feature-card.bento-large {
-        grid-column: span 1;
-        padding: 2.5rem;
-        gap: 2rem;
-    }
-    .feature-card.bento-large h3 {
-        font-size: 1.15rem;
-    }
-}
-
-@media (max-width: 600px) {
-    .features-grid {
-        grid-template-columns: 1fr;
-        gap: 1rem;
-    }
-    .feature-card.bento-large {
-        grid-column: span 1;
-        display: flex;
-        flex-direction: column;
-        padding: 1.75rem;
-        gap: 1rem;
-    }
-    .feature-card.bento-large h3 {
-        flex-direction: row;
-        align-items: center;
-        text-align: left;
-        gap: 0.75rem;
-        margin-bottom: 0;
-        font-size: 1.15rem;
-    }
-    .feature-card.bento-large .feature-icon,
-    .feature-card.bento-large .feature-icon-svg {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-        margin-right: 0;
-    }
-    .feature-card.bento-large .bento-icon {
-        width: 18px;
-        height: 18px;
-    }
-    .feature-card.bento-large p {
-        font-size: 0.9rem;
-        line-height: 1.6;
-    }
-    .feature-card.bento-large::after {
-        display: none;
-    }
-    .feature-card {
-        padding: 1.75rem;
-    }
-    .feature-card h3 {
-        font-size: 1.1rem;
-    }
-    .feature-icon-svg {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-        margin-right: 12px;
-    }
-    .bento-icon {
-        width: 18px;
-        height: 18px;
-    }
-}
-
-/* --- How it works --- */
-.steps {
-    display: flex;
-    flex-direction: column;
-    gap: 4rem;
-}
-
-.step {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 3rem;
-    align-items: center;
-}
-
-.step:nth-child(even) .step-text {
-    order: 2;
-}
-
-.step-num {
-    font-size: 3.25rem;
-    font-weight: 900;
-    background: linear-gradient(135deg, oklch(0.68 0.13 150 / 0.5), oklch(0.62 0.14 45 / 0.15));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    line-height: 1;
-    margin-bottom: 0.5rem;
-    font-family: inherit;
-    letter-spacing: 0;
-}
-
-.step-text h3 {
-    font-size: 1.65rem;
-    margin-bottom: 0.75rem;
-    font-weight: 850;
-    color: var(--text-main);
-    letter-spacing: 0;
-}
-
-.step-text p {
-    color: var(--text-muted);
-    font-size: 1rem;
-    line-height: 1.55;
-}
-
-/* Custom CSS Mockups for step illustrations */
-.step-illustration-1, .step-illustration-2, .step-illustration-3 {
-    background: radial-gradient(circle at 10% 10%, oklch(0.20 0.04 145), oklch(0.10 0.015 138));
-    height: 240px;
-    border-radius: 18px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
-    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-@media (max-width: 900px) {
-    #how-it-works {
-        padding: 3.5rem 0;
-    }
-
-    .steps {
-        gap: 2.75rem;
-    }
-
-    .step {
-        grid-template-columns: minmax(0, 1fr);
-        gap: 1.1rem;
-        text-align: left;
-    }
-
-    #how-it-works .step .step-text {
-        order: 1;
-    }
-
-    #how-it-works .step-illustration-1,
-    #how-it-works .step-illustration-2,
-    #how-it-works .step-illustration-3 {
-        order: 2;
-        height: 220px;
-    }
-
-    .step-num {
-        font-size: 2.5rem;
-    }
-
-    .step-text h3 {
-        font-size: 1.45rem;
-    }
-}
-
-.step-illustration-1:hover, .step-illustration-2:hover, .step-illustration-3:hover {
-    transform: translateY(-6px) scale(1.02);
-    border-color: oklch(0.68 0.13 150 / 0.25);
-    box-shadow: 0 25px 50px oklch(0.68 0.13 150 / 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-}
-
-/* ==========================================================================
-   Step 1 Illustration: Browser & Installed Success Popup
-   ========================================================================== */
-.illus-browser-container {
-    width: 90%;
-    height: 80%;
-    background: oklch(0.11 0.015 138);
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
-    display: flex;
-    flex-direction: column;
-}
-
-.illus-browser-header {
-    background: oklch(0.20 0.025 140 / 0.8);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-    padding: 0.6rem 0.8rem;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.illus-browser-dots {
-    display: flex;
-    gap: 6px;
-    margin-right: 1.5rem;
-}
-
-.illus-browser-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    opacity: 0.6;
-}
-.illus-browser-dot:nth-child(1) { background: oklch(0.55 0.15 25); }
-.illus-browser-dot:nth-child(2) { background: oklch(0.68 0.14 45); }
-.illus-browser-dot:nth-child(3) { background: oklch(0.68 0.13 150); }
-
-.illus-browser-address-bar {
-    background: oklch(0.13 0.02 138);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 6px;
-    color: var(--text-muted);
-    font-size: 0.68rem;
-    padding: 3px 12px;
-    flex-grow: 1;
-    max-width: 60%;
-    text-align: center;
-    font-family: monospace;
-    letter-spacing: 0.2px;
-}
-
-.illus-browser-address-bar .url-protocol {
-    color: oklch(0.68 0.13 150);
-    font-weight: 600;
-}
-
-.illus-browser-toolbar {
-    display: flex;
-    margin-left: auto;
-}
-
-.illus-extension-btn {
-    width: 22px;
-    height: 22px;
-    border-radius: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: opacity 0.3s, box-shadow 0.3s;
-}
-
-.illus-extension-btn.active {
-    background: oklch(0.68 0.13 150 / 0.2);
-    border: 1px solid var(--accent);
-    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.4);
-    animation: active-pulse 2s infinite alternate;
-}
-
-@keyframes active-pulse {
-    0% { transform: scale(1); box-shadow: 0 0 5px oklch(0.68 0.13 150 / 0.4); }
-    100% { transform: scale(1.08); box-shadow: 0 0 12px oklch(0.68 0.13 150 / 0.7); }
-}
-
-.illus-browser-content {
-    flex-grow: 1;
-    padding: 1rem;
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-}
-
-.illus-store-card {
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.04);
-    border-radius: 12px;
-    padding: 0.8rem;
-    width: 65%;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.illus-store-card-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.illus-large-logo {
-    width: 30px;
-    height: 30px;
-    object-fit: contain;
-    border-radius: 6px;
-    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.2);
-}
-
-.illus-store-info {
-    display: flex;
-    flex-direction: column;
-}
-
-.illus-store-title {
-    font-size: 0.88rem;
-    font-weight: 800;
-    color: var(--text);
-    line-height: 1.1;
-}
-
-.illus-store-desc {
-    font-size: 0.58rem;
-    color: var(--text-muted);
-    line-height: 1.2;
-    margin-top: 2px;
-}
-
-.illus-store-buttons {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.illus-store-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 5px 8px;
-    border-radius: 8px;
-    font-size: 0.58rem;
-    font-weight: 700;
-    color: white;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    background: rgba(255, 255, 255, 0.03);
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    cursor: default;
-    transition: opacity 0.2s, transform 0.2s;
-}
-
-.illus-store-btn img {
-    width: 11px;
-    height: 11px;
-    display: block;
-}
-
-.illus-store-btn.chrome {
-    border-color: oklch(0.68 0.13 150 / 0.25);
-    background: oklch(0.68 0.13 150 / 0.08);
-    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.05);
-}
-
-.illus-store-btn.firefox {
-    border-color: oklch(0.62 0.14 45 / 0.25);
-    background: oklch(0.62 0.14 45 / 0.08);
-    box-shadow: 0 0 10px oklch(0.62 0.14 45 / 0.05);
-}
-
-.install-breathe {
-    animation: install-breathe 2.5s ease-in-out infinite;
-    z-index: 2;
-    position: relative;
-}
-
-@keyframes install-breathe {
-    0%, 100% {
-        transform: scale(1);
-        box-shadow: 0 0 15px oklch(0.68 0.13 150 / 0.2);
-    }
-    50% {
-        transform: scale(1.05);
-        box-shadow: 0 0 25px oklch(0.68 0.13 150 / 0.5);
-    }
-}
-
-.install-breathe.firefox,
-.btn-firefox.install-breathe {
-    animation-name: install-breathe-ff;
-}
-
-@keyframes install-breathe-ff {
-    0%, 100% {
-        transform: scale(1);
-        box-shadow: 0 0 15px oklch(0.62 0.14 45 / 0.2);
-    }
-    50% {
-        transform: scale(1.05);
-        box-shadow: 0 0 25px oklch(0.62 0.14 45 / 0.5);
-    }
-}
-
-/* Glassmorphic Dropping Success Card */
-.illus-extension-popup {
-    position: absolute;
-    top: 0.6rem;
-    right: 0.6rem;
-    width: 145px;
-    background: oklch(0.20 0.025 140 / 0.85);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid oklch(0.68 0.13 150 / 0.25);
-    border-radius: 12px;
-    padding: 0.6rem 0.8rem;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55), 0 0 15px oklch(0.68 0.13 150 / 0.15);
-    animation: popup-float 4s ease-in-out infinite;
-    z-index: 5;
-}
-
-@keyframes popup-float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-4px); }
-}
-
-.illus-extension-popup .popup-title {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    font-size: 0.72rem;
-    font-weight: 700;
-    color: var(--text);
-    margin-bottom: 6px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    padding-bottom: 4px;
-}
-
-.illus-extension-popup .popup-title img {
-    width: 12px;
-    height: 12px;
-}
-
-.illus-extension-popup .popup-status {
-    margin-bottom: 4px;
-}
-
-.status-badge-success {
-    background: oklch(0.68 0.13 150 / 0.12);
-    color: oklch(0.68 0.13 150);
-    font-size: 0.6rem;
-    font-weight: 700;
-    padding: 2px 6px;
-    border-radius: 4px;
-    border: 1px solid oklch(0.68 0.13 150 / 0.2);
-    display: inline-flex;
-    align-items: center;
-    gap: 3px;
-    animation: status-glow 2s infinite alternate;
-}
-
-@keyframes status-glow {
-    0% { box-shadow: 0 0 0 oklch(0.68 0.13 150 / 0); }
-    100% { box-shadow: 0 0 6px oklch(0.68 0.13 150 / 0.3); }
-}
-
-.illus-extension-popup .popup-quick-start {
-    font-size: 0.55rem;
-    color: var(--text-muted);
-    font-weight: 500;
-    line-height: 1.2;
-}
-
-
-/* ==========================================================================
-   Step 2 Illustration: Highly Realistic Extension Popup (Create Room View)
-   ========================================================================== */
-.illus-popup-card {
-    width: 220px;
-    background: oklch(0.20 0.025 140 / 0.85);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 16px;
-    padding: 0.8rem;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-    display: flex;
-    flex-direction: column;
-    gap: 0.55rem;
-    animation: popup-float 4s ease-in-out infinite;
-    animation-delay: -1s;
-}
-
-.illus-popup-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-    padding-bottom: 8px;
-}
-
-.illus-popup-brand {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 0.82rem; /* Scaled up font */
-    font-weight: 800;
-    letter-spacing: -0.2px;
-}
-
-.illus-popup-version {
-    font-size: 0.58rem;
-    color: var(--text-muted);
-}
-
-.illus-popup-tabs {
-    display: flex;
-    gap: 4px;
-    background: oklch(0.12 0.015 135 / 0.4);
-    padding: 3px;
-    border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.03);
-}
-
-.illus-popup-tab {
-    flex: 1;
-    text-align: center;
-    font-size: 0.62rem; /* Scaled up font */
-    padding: 4px 0;
-    border-radius: 6px;
-    color: var(--text-muted);
-    font-weight: 600;
-}
-
-.illus-popup-tab.active {
-    background: var(--card);
-    color: var(--accent);
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-.illus-popup-body {
-    display: flex;
-    flex-direction: column;
-    gap: 0.55rem;
-    position: relative;
-}
-
-.illus-popup-btn {
-    background: linear-gradient(135deg, var(--accent-green), var(--accent-terracotta));
-    border-radius: 8px;
-    padding: 7px 9px;
-    color: var(--text-on-green);
-    font-weight: 700;
-    font-size: 0.68rem;
-    text-align: center;
-    box-shadow: 0 4px 12px oklch(0.68 0.13 150 / 0.3);
-    position: relative;
-    overflow: hidden;
-    cursor: default;
-    animation: create-btn-pulse 2s infinite alternate;
-}
-
-@keyframes create-btn-pulse {
-    0% { transform: scale(1); box-shadow: 0 4px 12px oklch(0.68 0.13 150 / 0.3); }
-    100% { transform: scale(1.03); box-shadow: 0 6px 16px oklch(0.68 0.13 150 / 0.5); }
-}
-
-.illus-btn-shine {
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 50%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
-    transform: skewX(-20deg);
-    animation: shimmer-sweep 3s infinite ease-in-out;
-}
-
-@keyframes shimmer-sweep {
-    0% { left: -100%; }
-    50%, 100% { left: 150%; }
-}
-
-.illus-collapsed-details {
-    background: oklch(0.12 0.015 135 / 0.4);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 8px;
-    padding: 6px 11px;
-    font-size: 0.54rem;
-    color: var(--text-muted);
-    font-weight: 700;
-    text-transform: uppercase;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    letter-spacing: 0.2px;
-}
-
-.details-arrow {
-    font-size: 0.48rem;
-    color: var(--text-muted);
-    opacity: 0.7;
-}
-
-/* Floating Success Badge */
-.illus-floating-success {
-    position: absolute;
-    /* Fully below the card so the toast never straddles its border */
-    bottom: -2.4rem;
-    left: 50%;
-    transform: translateX(-50%);
-    background: oklch(0.12 0.015 135 / 0.92);
-    border: 1px solid oklch(0.68 0.13 150 / 0.35);
-    border-radius: 20px;
-    padding: 3px 10px;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), 0 0 12px oklch(0.68 0.13 150 / 0.18);
-    animation: floating-success-fade 5s infinite;
-    white-space: nowrap;
-    z-index: 10;
-}
-
-@keyframes floating-success-fade {
-    0%, 100%, 75% { opacity: 0; transform: translate(-50%, 5px) scale(0.9); }
-    15%, 60% { opacity: 1; transform: translate(-50%, 0) scale(1); }
-}
-
-.illus-floating-success .success-icon {
-    font-size: 0.65rem;
-}
-
-.illus-floating-success span[lang] {
-    font-size: 0.58rem;
-    color: oklch(0.68 0.13 150);
-    font-weight: 700;
-}
-
-
-/* ==========================================================================
-   Step 3 Illustration: Dual Screen Theater Sync Setup
-   ========================================================================= */
-.illus-sync-theater {
-    width: 95%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    gap: 0.6rem;
-}
-
-.illus-player-card {
-    width: 145px;
-    background: oklch(0.20 0.025 140 / 0.85);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 12px;
-    padding: 6px;
-    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    position: relative;
-    z-index: 2;
-}
-
-.illus-player-card.player-a {
-    animation: popup-float 4s ease-in-out infinite;
-    animation-delay: -2s;
-}
-
-.illus-player-card.player-b {
-    animation: popup-float 4s ease-in-out infinite;
-    animation-delay: -3s;
-}
-
-.player-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 0.55rem;
-}
-
-.player-user {
-    font-weight: 700;
-    color: var(--text);
-}
-
-.player-badge {
-    font-size: 0.42rem;
-    font-weight: 800;
-    padding: 1px 3px;
-    border-radius: 3px;
-}
-
-.player-badge.active {
-    background: oklch(0.68 0.13 150 / 0.15);
-    color: oklch(0.68 0.13 150);
-    border: 1px solid oklch(0.68 0.13 150 / 0.25);
-}
-
-.player-video-canvas {
-    height: 70px;
-    border-radius: 8px;
-    background: linear-gradient(135deg, oklch(0.20 0.04 145), oklch(0.22 0.05 45));
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid rgba(255, 255, 255, 0.02);
-}
-
-.player-video-overlay {
-    position: absolute;
-    top: 0; left: 0; width: 100%; height: 100%;
-    background: linear-gradient(to bottom, transparent, oklch(0.68 0.13 150 / 0.15), transparent);
-    background-size: 100% 200%;
-    animation: playerScrollScanline 3s linear infinite;
-}
-
-@keyframes playerScrollScanline {
-    0% { background-position: 0% 0%; }
-    100% { background-position: 0% 200%; }
-}
-
-.player-play-pulse {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    background: oklch(0.68 0.13 150 / 0.85);
-    color: var(--text-on-green);
-    font-size: 0.65rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.5);
-    z-index: 3;
-    animation: play-pulse 2s infinite alternate;
-}
-
-@keyframes play-pulse {
-    0% { transform: scale(1); box-shadow: 0 0 6px oklch(0.68 0.13 150 / 0.4); }
-    100% { transform: scale(1.15); box-shadow: 0 0 15px oklch(0.68 0.13 150 / 0.8); }
-}
-
-.player-controls {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 2px 2px 0 2px;
-}
-
-.control-btn {
-    font-size: 0.58rem;
-    color: var(--accent);
-}
-
-.player-timeline {
-    flex-grow: 1;
-    height: 3px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 2px;
-    position: relative;
-}
-
-.timeline-fill {
-    position: absolute;
-    top: 0; left: 0;
-    height: 100%;
-    background: var(--accent);
-    border-radius: 2px;
-    width: 60%;
-    animation: theater-grow 6s infinite linear;
-}
-
-.timeline-knob {
-    position: absolute;
-    top: -2px;
-    left: 60%;
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
-    background: white;
-    box-shadow: 0 0 4px rgba(0,0,0,0.5);
-    transform: translateX(-50%);
-    animation: theater-knob-grow 6s infinite linear;
-}
-
-@keyframes theater-grow {
-    0% { width: 0%; }
-    100% { width: 100%; }
-}
-
-@keyframes theater-knob-grow {
-    0% { left: 0%; }
-    100% { left: 100%; }
-}
-
-.control-time {
-    font-size: 0.5rem;
-    color: var(--text-muted);
-    font-family: monospace;
-}
-
-/* Glowing Connection Sync Bridge */
-.illus-sync-bridge {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    position: relative;
-    z-index: 1;
-}
-
-.illus-sync-bridge .sync-line {
-    width: 100%;
-    height: 2px;
-    background: rgba(255,255,255,0.06);
-    position: relative;
-    overflow: hidden;
-}
-
-.illus-sync-bridge .sync-beam {
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 50px;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, var(--accent), var(--success), transparent);
-    animation: sync-flow 2.5s infinite linear;
-}
-
-@keyframes sync-flow {
-    0% { left: -100%; }
-    100% { left: 100%; }
-}
-
-.sync-status-badge {
-    background: oklch(0.68 0.13 150 / 0.12);
-    border: 1px solid oklch(0.68 0.13 150 / 0.25);
-    color: oklch(0.68 0.13 150);
-    font-size: 0.5rem;
-    font-weight: 800;
-    letter-spacing: 0.5px;
-    padding: 2px 6px;
-    border-radius: 6px;
-    white-space: nowrap;
-    animation: active-pulse-green 2s infinite alternate;
-}
-
-@keyframes active-pulse-green {
-    0% { box-shadow: 0 0 3px oklch(0.68 0.13 150 / 0.1); }
-    100% { box-shadow: 0 0 8px oklch(0.68 0.13 150 / 0.4); }
-}
-
-/* --- Self Hosters Terminal --- */
-.terminal-container {
-    max-width: 850px;
-    margin: 3rem auto 0 auto;
-    background: oklch(0.20 0.025 140);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 16px;
-    overflow: hidden;
-    box-shadow: 0 20px 45px rgba(0,0,0,0.5);
-    text-align: left;
-}
-
-.terminal-header {
-    background: oklch(0.27 0.035 130);
-    padding: 0.85rem 1.25rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid rgba(255,255,255,0.06);
-}
-
-.terminal-dots {
-    display: flex;
-    gap: 6px;
-}
-
-.terminal-dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-}
-
-.terminal-dot.red { background: oklch(0.55 0.15 25); }
-.terminal-dot.yellow { background: oklch(0.68 0.14 45); }
-.terminal-dot.green { background: oklch(0.68 0.13 150); }
-
-.terminal-tabs {
-    display: flex;
-    gap: 0.5rem;
-}
-
-.terminal-tab-btn {
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    font-weight: 600;
-    font-size: 0.8rem;
-    padding: 0.35rem 0.75rem;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: color 0.2s, background-color 0.2s;
-}
-
-.terminal-tab-btn:hover {
-    color: var(--text);
-    background: rgba(255, 255, 255, 0.03);
-}
-
-.terminal-tab-btn.active {
-    color: var(--accent);
-    background: oklch(0.68 0.13 150 / 0.1);
-    border: 1px solid oklch(0.68 0.13 150 / 0.2);
-}
-
-.terminal-body {
-    position: relative;
-    padding: 1.5rem;
-}
-
-.terminal-pane {
-    display: none;
-    margin: 0;
-}
-
-.terminal-pane.active {
-    display: block;
-}
-
-.terminal-pane pre {
-    margin: 0;
-    overflow-x: auto;
-}
-
-.terminal-pane code {
-    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-    font-size: 0.85rem;
-    line-height: 1.6;
-    color: oklch(0.88 0.015 90);
-}
-
-/* Syntax Highlighting */
-.t-comment { color: oklch(0.55 0.02 110); font-style: italic; }
-.t-key { color: oklch(0.72 0.12 45); }
-.t-val { color: oklch(0.75 0.10 150); }
-.t-str { color: oklch(0.80 0.12 155); }
-.t-num { color: oklch(0.75 0.12 50); }
-
-.terminal-copy-btn {
-    position: absolute;
-    top: 1rem;
-    right: 1.5rem;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    color: var(--text-muted);
-    padding: 0.35rem 0.75rem;
-    font-size: 0.75rem;
-    font-weight: 600;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: background-color 0.2s, color 0.2s, opacity 0.2s;
-    display: flex;
-    align-items: center;
-    gap: 0.3rem;
-}
-
-.terminal-copy-btn:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: var(--text);
-    border-color: rgba(255, 255, 255, 0.15);
-}
-
-.terminal-copy-btn:active {
-    transform: scale(0.97);
-}
-
-/* --- Footer --- */
-footer {
-    padding: 4rem 0;
-    border-top: 0;
-    text-align: center;
-    color: var(--text-muted);
-}
-
-footer a {
-    color: var(--text-muted);
-    text-decoration: none;
-    transition: color 0.2s ease;
-}
-
-footer a:hover {
-    color: var(--text);
-}
-
-
-/* --- Animations --- */
-[data-reveal] {
-    opacity: 0;
-    transform: translateY(30px);
-    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-[data-reveal].revealed {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-html.theme-light .hero-demo-scene .demo-user-a,
-html.theme-light .hero-demo-scene .demo-user-b {
-    color: oklch(0.36 0.105 150);
-    background: oklch(0.60 0.12 150 / 0.13);
-}
-
-html.theme-light .hero-demo-scene .extension-mockup {
-    --bg: oklch(0.935 0.018 110) !important;
-    --card: oklch(0.995 0.006 100) !important;
-    --accent: oklch(0.56 0.13 150) !important;
-    --accent-glow: oklch(0.56 0.13 150 / 0.22) !important;
-    --text: oklch(0.21 0.03 140) !important;
-    --text-muted: oklch(0.43 0.03 135) !important;
-    --success: oklch(0.56 0.13 150) !important;
-    --error: oklch(0.57 0.17 25) !important;
-    --glass-border: oklch(0.28 0.035 140 / 0.10) !important;
-    background: oklch(0.935 0.018 110) !important;
-    border-color: oklch(0.28 0.035 140 / 0.12);
-    box-shadow:
-        0 20px 42px oklch(0.20 0.025 140 / 0.16),
-        0 0 26px oklch(0.82 0.10 85 / 0.12);
-}
-
-html.theme-light .hero-demo-scene .mock-tabs,
-html.theme-light .hero-demo-scene .mock-card,
-html.theme-light .hero-demo-scene .mock-input {
-    background: oklch(0.995 0.006 100);
-    border-color: oklch(0.28 0.035 140 / 0.14);
-    color: oklch(0.21 0.03 140);
-}
-
-html.theme-light .hero-demo-scene .mock-peer-item {
-    background: oklch(0.28 0.035 140 / 0.035);
-    border-color: oklch(0.28 0.035 140 / 0.09);
-}
-
-html.theme-light .hero-demo-scene .mock-joined-room,
-html.theme-light .hero-demo-scene .mock-status-pill {
-    background: oklch(0.56 0.13 150 / 0.10);
-    border-color: oklch(0.56 0.13 150 / 0.24);
-}
-
-html.theme-light .hero-demo-scene .mock-close-btn:hover {
-    color: oklch(0.21 0.03 140);
-    background: oklch(0.28 0.035 140 / 0.08);
-}
-
-/* A direct hash destination is content, not an entrance animation. Keep it
-   readable from the first paint even before app.js has initialized. */
-section:target [data-reveal],
-section:target[data-reveal] {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-
-/* --- Legal Pages --- */
-.legal-content {
-    max-width: 800px;
-    margin: 8rem auto 4rem auto;
-    padding: 0 2rem;
-}
-
-.legal-card {
-    background: var(--card);
-    padding: 3rem;
-    border-radius: 24px;
-    border: 1px solid var(--glass-border);
-}
-
-.legal-card h1 {
-    font-size: 2.5rem;
-    margin-bottom: 2rem;
-    text-align: center;
-}
-
-.legal-card h2 {
-    font-size: 1.25rem;
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
-    color: var(--accent);
-}
-
-.legal-card p {
-    color: var(--text-muted);
-    margin-bottom: 0.5rem;
-    font-size: 0.95rem;
-}
-
-/* Reset global section padding for legal sections specifically */
-.legal-card section {
-    padding: 0 !important;
-    margin-bottom: 0.75rem;
-}
-
-/* --- Join Page Specifics --- */
-.join-card {
-    max-width: 450px;
-    margin: 6rem auto;
-    text-align: center;
-}
-
-.room-badge {
-    display: inline-block;
-    background: oklch(0.68 0.13 150 / 0.1);
-    color: var(--accent);
-    padding: 0.5rem 1rem;
-    border-radius: 99px;
-    font-size: 0.8rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-    border: 1px solid oklch(0.68 0.13 150 / 0.2);
-}
-
-@media (max-width: 768px) {
-    .hero {
-        align-items: center;
-        padding-top: 5.5rem;
-        padding-bottom: 3.5rem;
-        min-height: 100svh;
-    }
-
-    .hero-grid {
-        min-height: auto;
-    }
-
-    .hero-grid {
-        grid-template-columns: minmax(0, 1fr);
-        text-align: center;
-    }
-    .step {
-        grid-template-columns: minmax(0, 1fr);
-        text-align: left;
-    }
-    .hero-text h1 {
-        font-size: 2.5rem;
-        max-width: none;
-    }
-    .cta-group {
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-    .nav-links {
-        display: none;
-        position: absolute;
-        top: 100%;
-        left: 0;
-        right: 0;
-        flex-direction: column;
-        background: oklch(0.20 0.025 140 / 0.95);
-        backdrop-filter: blur(12px);
-        padding: 1rem 2rem;
-        gap: 1rem;
-        border-bottom: 1px solid var(--glass-border);
-        margin-left: 0;
-    }
-    .nav-links.open {
-        display: flex;
-    }
-    .nav-right {
-        margin-left: auto;
-    }
-    .hamburger {
-        display: inline-flex !important;
-    }
-    nav .container {
-        padding: 0 0.5rem;
-    }
-    .logo-area {
-        gap: 0.25rem;
-        font-size: 1.1rem;
-    }
-    .logo-area img {
-        height: 40px;
-        width: 40px;
-        margin: 0;
-    }
-    .lang-select-container {
-        padding: 4px 10px;
-        gap: 4px;
-    }
-    .lang-select-container .globe-icon {
-        width: 14px;
-        height: 14px;
-    }
-    .lang-dropdown {
-        font-size: 0.7rem;
-        padding: 0 6px 0 0;
-    }
-    .lang-select-container .chevron-icon {
-        width: 10px;
-        height: 10px;
-    }
-    .legal-card {
-        padding: 1.5rem;
-    }
-}
-
-@media (min-width: 769px) and (max-height: 920px) {
-    .hero {
-        padding-top: clamp(7.5rem, 10vh, 9rem);
-        padding-bottom: clamp(1.5rem, 3vh, 2.75rem);
-    }
-
-    .hero-grid {
-        min-height: calc(100svh - 9.5rem);
-    }
-}
-
-/* Extra-narrow phones: make sure logo, language picker and the menu button
-   never crowd each other in the header (kept comfortable down to ~320px). */
-@media (max-width: 380px) {
-    nav .container {
-        padding: 0 0.4rem;
-    }
-    .nav-right {
-        gap: 0.35rem;
-    }
-    .logo-area {
-        font-size: 1rem;
-        gap: 0.4rem;
-    }
-}
-
-/* --- Language Toggle --- */
-html.lang-de [lang="en"] {
-    display: none !important;
-}
-html:not(.lang-de) [lang="de"] {
-    display: none !important;
-}
-
-/* --- Modern Glassmorphic Language Selector --- */
-.lang-select-container {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    background: oklch(0.27 0.035 130 / 0.4);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 9999px;
-    padding: 6px 14px;
-    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    color: var(--text-muted);
-}
-
-.lang-select-container:hover {
-    background: oklch(0.27 0.035 130 / 0.6);
-    border-color: oklch(0.68 0.13 150 / 0.3);
-    color: var(--text);
-    box-shadow: 0 0 15px oklch(0.68 0.13 150 / 0.1);
-}
-
-.lang-select-container .globe-icon {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    opacity: 0.8;
-    transition: transform 0.5s ease;
-}
-
-.lang-select-container:hover .globe-icon {
-    transform: rotate(15deg);
-    opacity: 1;
-}
-
-.lang-select-container .chevron-icon {
-    position: absolute;
-    right: 14px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 12px;
-    height: 12px;
-    pointer-events: none;
-    opacity: 0.6;
-}
-
-.lang-select-container:hover .chevron-icon {
-    opacity: 1;
-}
-
-.lang-dropdown {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    background: transparent;
-    border: none;
-    outline: none;
-    font-family: inherit;
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: currentColor;
-    cursor: pointer;
-    padding: 0 28px 0 0;
-    margin: 0;
-    width: auto;
-    min-width: 110px;
-    overflow: hidden;
-}
-
-@supports (appearance: base-select) {
-    .lang-dropdown::picker(select) {
-        appearance: base-select;
-        background-color: oklch(0.20 0.025 140);
-        border: 1px solid oklch(0.32 0.03 125);
-        border-radius: 8px;
-        padding: 4px;
-        font-family: 'Twemoji Country Flags', inherit;
-    }
-}
-
-.lang-dropdown option {
-    background: oklch(0.20 0.025 140);
-    color: white;
-    font-family: inherit;
-    font-size: 0.9rem;
-}
-
-/* Light theme: the pill was designed on the dark glass recipe — by day it
-   becomes frosted white so it sits in the same family as the buttons. */
-html.theme-light .lang-select-container {
-    background: rgba(255, 255, 255, 0.6);
-    border-color: oklch(0.28 0.035 140 / 0.14);
-}
-
-html.theme-light .lang-select-container:hover {
-    background: rgba(255, 255, 255, 0.85);
-    border-color: oklch(0.56 0.13 150 / 0.35);
-    box-shadow: 0 0 15px oklch(0.56 0.13 150 / 0.12);
-}
-
-html.theme-light .lang-dropdown option {
-    background: #ffffff;
-    color: oklch(0.21 0.03 140);
-}
-
-@supports (appearance: base-select) {
-    html.theme-light .lang-dropdown::picker(select) {
-        background-color: #ffffff;
-        border-color: oklch(0.28 0.035 140 / 0.18);
-    }
-}
-
-/* --- Hamburger Menu --- */
-.hamburger {
-    display: none;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    color: var(--text);
-    font-size: 1.5rem;
-    cursor: pointer;
-    padding: 0.25rem;
-    line-height: 1;
-}
-
-/* --- Feature Cards: subtle differentiation --- */
-.feature-card:nth-child(1) { --card-accent: oklch(0.68 0.13 150 / 0.06); }
-.feature-card:nth-child(2) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
-.feature-card:nth-child(3) { --card-accent: oklch(0.68 0.13 150 / 0.06); }
-.feature-card:nth-child(4) { --card-accent: oklch(0.75 0.10 150 / 0.06); }
-.feature-card:nth-child(5) { --card-accent: oklch(0.68 0.14 45 / 0.06); }
-.feature-card:nth-child(6) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
-.feature-card:nth-child(7) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
-.feature-card:nth-child(8) { --card-accent: oklch(0.68 0.13 150 / 0.06); }
-
-.feature-card {
-    background: linear-gradient(135deg, var(--card-accent, transparent), oklch(0.27 0.035 130 / 0.45));
-}
-
-/* --- Compatibility Section --- */
-.compat-section {
-    padding: 0.5rem 0 2.5rem 0;
-    text-align: center;
-    background: transparent;
-    border-bottom: 0;
-}
-
-.compat-mascot {
-    display: block;
-    margin: 0 auto 0.3rem auto;
-    max-width: 270px;
-    width: 100%;
-    height: auto;
-    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.compat-mascot:hover {
-    transform: scale(1.05) translateY(-5px) rotate(1deg);
-}
-
-.compat-heading {
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--text-muted);
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    margin-bottom: 1.4rem;
-}
-
-.compat-row {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 2.4rem 3rem;
-    flex-wrap: wrap;
-}
-
-.compat-logo {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.75rem;
-    font-weight: 700;
-    color: var(--text-muted);
-    transition: opacity 0.3s;
-    opacity: 0.55;
-}
-
-.compat-logo:hover {
-    opacity: 0.85;
-}
-
-.compat-logo img {
-    width: 28px;
-    height: 28px;
-    display: block;
-}
-
-.compat-logo img.compat-logo-wide {
-    width: 52px;
-    height: 28px;
-    object-fit: contain;
-}
-
-.compat-logo img.compat-logo-disneyplus-mark {
-    width: 60px;
-    height: 30px;
-    object-fit: contain;
-    filter: brightness(0) saturate(100%) invert(63%) sepia(12%) saturate(621%) hue-rotate(203deg) brightness(92%) contrast(88%);
-}
-
-html.theme-light .compat-logo img.compat-logo-disneyplus-mark {
-    filter: none;
-}
-
-@media (max-width: 700px) {
-    .compat-section {
-        padding: 0 0 1.6rem;
-    }
-
-    .compat-mascot {
-        max-width: 220px;
-        margin-bottom: 0.1rem;
-    }
-
-    .compat-heading {
-        font-size: 0.92rem;
-        line-height: 1.55;
-        margin-bottom: 1rem;
-    }
-
-    .compat-row {
-        display: grid;
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-        gap: 1.55rem 0.75rem;
-        align-items: start;
-    }
-
-    .compat-logo {
-        gap: 0.35rem;
-        font-size: 0.72rem;
-    }
-
-    .compat-logo img {
-        width: 26px;
-        height: 26px;
-    }
-
-    .compat-logo img.compat-logo-wide {
-        width: 48px;
-        height: 26px;
-    }
-
-    .compat-logo img.compat-logo-disneyplus-mark {
-        width: 56px;
-        height: 28px;
-    }
-
-    .compat-logo-jellyfin {
-        display: none;
-    }
-
-    .compat-more {
-        grid-column: 1 / -1;
-        justify-self: center;
-        white-space: nowrap;
-    }
-}
-
-.compat-more {
-    opacity: 0.4;
-    cursor: help;
-    flex-direction: row;
-    gap: 0.35rem;
-    position: relative;
-}
-
-.compat-more:hover {
-    opacity: 0.6;
-}
-
-.compat-more-icon {
-    font-size: 1.1rem;
-    font-weight: 700;
-    color: var(--accent);
-    line-height: 1;
-}
-
-.compat-tooltip {
-    display: none;
-    position: absolute;
-    bottom: calc(100% + 10px);
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--card);
-    color: var(--text-muted);
-    padding: 0.6rem 0.9rem;
-    border-radius: 8px;
-    font-size: 0.72rem;
-    font-weight: 500;
-    white-space: nowrap;
-    border: 1px solid var(--glass-border);
-    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
-    z-index: 10;
-    line-height: 1.4;
-}
-
-.compat-tooltip::after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border: 6px solid transparent;
-    border-top-color: var(--glass-border);
-}
-
-.compat-more:hover .compat-tooltip {
-    display: block;
-}
-
-/* --- Join Page Loading Spinner --- */
-.join-spinner {
-    width: 36px;
-    height: 36px;
-    border: 3px solid oklch(0.68 0.13 150 / 0.2);
-    border-top-color: var(--accent);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-    margin: 0 auto 0.75rem;
-}
-
-@keyframes spin {
-    to { transform: rotate(360deg); }
-}
-
-/* --- Reduced Motion --- */
-@media (prefers-reduced-motion: reduce) {
-    *, *::before, *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-    }
-    [data-reveal] {
-        opacity: 1;
-        transform: none;
-    }
-    .illus-typing-text::after {
-        animation: none;
-    }
-    .illus-timeline-progress {
-        animation: none;
-        width: 60%;
-    }
-    .illus-sync-pulse {
-        animation: none;
-    }
-    .illus-extension-icon {
-        animation: none;
-    }
-}
-
-/* --- Use Cases / Anwendungsszenarien Section --- */
-.use-cases-section {
-    padding: 6rem 0;
-    position: relative;
-    border-bottom: 0;
-}
-
-.use-cases-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-    gap: 2rem;
-    margin-top: 1rem;
-}
-
-.use-cases-feature-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-@media (max-width: 900px) {
-    .use-cases-feature-grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 1.25rem;
-    }
-}
-
-@media (max-width: 600px) {
-    .use-cases-feature-grid {
-        grid-template-columns: minmax(0, 1fr);
-        gap: 1rem;
-    }
-}
-
-.use-case-card {
-    background: oklch(0.27 0.035 130 / 0.4);
-    border: 1px solid var(--glass-border);
-    border-radius: 16px;
-    padding: 1.2rem 1.6rem 1.7rem 1.6rem;
-    text-align: left;
-    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-    display: flex;
-    flex-direction: column;
-    gap: 0.8rem;
-    position: relative;
-    overflow: hidden;
-}
-
-.use-case-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: linear-gradient(90deg, transparent, var(--card-accent-border, var(--accent)), transparent);
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-
-.use-case-card:nth-child(1) { --card-accent-border: oklch(0.68 0.13 150); }
-.use-case-card:nth-child(2) { --card-accent-border: oklch(0.62 0.14 45); }
-.use-case-card:nth-child(3) { --card-accent-border: oklch(0.75 0.10 150); }
-
-
-.use-case-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
-    border-color: rgba(255, 255, 255, 0.15);
-}
-
-.use-case-card:hover::before {
-    opacity: 1;
-}
-
-.use-case-image {
-    display: block;
-    width: 100%;
-    max-width: 272px;
-    height: 150px;
-    object-fit: contain;
-    border-radius: 8px;
-    margin: 0 auto 0 auto;
-}
-
-.cta-github-mascot {
-    display: block;
-    width: 100%;
-    max-width: 250px;
-    height: auto;
-    margin: 1.5rem auto;
-}
-
-.features-questions-mascot {
-    display: block;
-    width: 100%;
-    max-width: 250px;
-    height: auto;
-    margin: -1.5rem auto 0.2rem auto;
-    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.features-questions-mascot:hover {
-    transform: scale(1.05) translateY(-4px) rotate(-1.5deg);
-}
-
-.comparison-mascot {
-    display: block;
-    width: 100%;
-    max-width: 260px;
-    height: auto;
-    margin: -2.2rem auto 0.2rem auto;
-    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.comparison-mascot:hover {
-    transform: scale(1.05) translateY(-4px) rotate(1deg);
-}
-
-.use-case-icon {
-    font-size: 1.6rem;
-    margin-right: 0.6rem;
-    display: inline-block;
-    vertical-align: middle;
-    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
-}
-
-.use-case-card h3 {
-    font-size: 1.25rem;
-    font-weight: 700;
-    margin: 0;
-    color: white;
-}
-
-.use-case-card p {
-    font-size: 0.9rem;
-    line-height: 1.6;
-    color: var(--text-muted);
-    margin: 0;
-}
-
-/* --- Comparison Section --- */
-.comparison-section {
-    padding: 6rem 0;
-    background: transparent;
-    border-bottom: 0;
-}
-
-#self-hosting,
-#faq,
-#faq + section,
-footer {
-    background: var(--section-tint-strong);
-}
-
-#self-hosting {
-    border-top: 1px solid var(--glass-border);
-}
-
-.comparison-table-wrapper {
-    overflow-x: auto;
-    background: oklch(0.27 0.035 130 / 0.35);
-    border: 1px solid var(--glass-border);
-    border-radius: 16px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    margin-top: 1rem;
-}
-
-.comparison-table {
-    width: 100%;
-    border-collapse: collapse;
-    text-align: left;
-    font-size: 0.95rem;
-}
-
-.comparison-table th, 
-.comparison-table td {
-    padding: 1.25rem 1.5rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.comparison-table th {
-    background: oklch(0.20 0.025 140 / 0.6);
-    font-weight: 700;
-    color: white;
-    text-transform: uppercase;
-    font-size: 0.8rem;
-    letter-spacing: 0.08em;
-}
-
-.comparison-table th.highlight,
-.comparison-table td.highlight {
-    background: oklch(0.68 0.13 150 / 0.08);
-}
-
-.comparison-table tbody tr:hover {
-    background: rgba(255, 255, 255, 0.02);
-}
-
-.comparison-table tbody tr:last-child td {
-    border-bottom: none;
-}
-
-.feat-name {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-}
-
-.feat-name strong {
-    color: white;
-    font-weight: 600;
-}
-
-.feat-desc {
-    font-size: 0.8rem;
-    color: var(--text-muted);
-}
-
-.check {
-    color: oklch(0.68 0.13 150);
-    font-weight: 700;
-}
-
-.cross {
-    color: oklch(0.68 0.17 25);
-    font-weight: 600;
-    opacity: 1;
-}
-
-@media (max-width: 768px) {
-    .comparison-table th,
-    .comparison-table td {
-        padding: 1rem;
-        font-size: 0.85rem;
-    }
-}
-
-/* On phones the 3-column table is turned into stacked cards so there is
-   no horizontal scrolling — one card per feature, KoalaSync above Teleparty. */
-@media (max-width: 600px) {
-    .comparison-table-wrapper {
-        overflow-x: visible;
-        background: transparent;
-        border: none;
-        box-shadow: none;
-        backdrop-filter: none;
-        -webkit-backdrop-filter: none;
-        margin-top: 0;
-    }
-
-    .comparison-table {
-        display: block;
-        font-size: 0.95rem;
-    }
-
-    /* Visually hide the header row but keep it for screen readers. */
-    .comparison-table thead {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border: 0;
-    }
-
-    .comparison-table tbody,
-    .comparison-table tr,
-    .comparison-table td {
-        display: block;
-        width: 100%;
-    }
-
-    .comparison-table tbody tr {
-        background: oklch(0.27 0.035 130 / 0.35);
-        border: 1px solid var(--glass-border);
-        border-radius: 14px;
-        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
-        margin-bottom: 1rem;
-        overflow: hidden;
-    }
-
-    .comparison-table tbody tr:last-child {
-        margin-bottom: 0;
-    }
-
-    .comparison-table td {
-        padding: 0.85rem 1.1rem;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-    }
-
-    .comparison-table tbody tr td:last-child {
-        border-bottom: none;
-    }
-
-    /* Feature name acts as the card header. */
-    .comparison-table td.feat-name {
-        background: oklch(0.20 0.025 140 / 0.55);
-        padding: 0.9rem 1.1rem;
-    }
-
-    /* Room is back on the card, so show the description again. */
-    .feat-desc {
-        display: block;
-        margin-top: 0.15rem;
-    }
-
-    /* Label each value cell with the product it belongs to. */
-    .comparison-table td.check,
-    .comparison-table td.cross {
-        display: flex;
-        align-items: baseline;
-        gap: 0.4rem;
-    }
-
-    .comparison-table td.check::before,
-    .comparison-table td.cross::before {
-        flex: 0 0 5.5rem;
-        font-size: 0.7rem;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.06em;
-        color: var(--text-muted);
-        opacity: 0.85;
-    }
-
-    .comparison-table td.check::before,
-    .comparison-table td.cross::before {
-        content: attr(data-label);
-    }
-
-    /* Keep the KoalaSync row subtly highlighted, like on desktop. */
-    .comparison-table td.check.highlight {
-        background: oklch(0.68 0.13 150 / 0.08);
-    }
-}
-
-@media (max-width: 600px) {
-    html.theme-light .comparison-section {
-        background: transparent;
-    }
-
-    html.theme-light .comparison-table tbody tr {
-        background: #ffffff;
-        border-color: oklch(0.20 0.025 140 / 0.1);
-        box-shadow: 0 8px 20px oklch(0.20 0.025 140 / 0.08);
-    }
-
-    html.theme-light .comparison-table tbody tr:hover {
-        background: #ffffff;
-    }
-
-    html.theme-light .comparison-table td {
-        border-bottom-color: oklch(0.20 0.025 140 / 0.08);
-    }
-
-    html.theme-light .comparison-table td.feat-name {
-        background: #ffffff;
-    }
-
-    html.theme-light .comparison-table td.check.highlight {
-        background: oklch(0.52 0.12 150 / 0.07);
-    }
-}
-
-/* --- Footnotes & Source Links --- */
-.source-link {
-    color: var(--accent);
-    text-decoration: none;
-    font-size: 0.72rem;
-    font-weight: 700;
-    margin-left: 0.25rem;
-    display: inline-flex;
-    align-items: center;
-    vertical-align: super;
-    opacity: 0.82;
-    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
-}
-
-.source-link:hover {
-    opacity: 1;
-    color: oklch(0.75 0.10 150);
-    transform: translateY(-1px);
-}
-
-.table-footnotes {
-    padding: 0.8rem 1.25rem;
-    background: oklch(0.20 0.025 140 / 0.45);
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
-    font-size: 0.72rem;
-    color: var(--text-muted);
-    line-height: 1.5;
-    opacity: 0.65;
-    transition: opacity 0.2s ease;
-}
-
-/* Link from the comparison table to the fuller guides/alternatives hub */
-.comparison-guides-link {
-    text-align: center;
-    margin: 2rem 0 0;
-}
-
-.comparison-guides-link a {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.45rem;
-    color: var(--accent);
-    text-decoration: none;
-    font-weight: 600;
-    font-size: 0.95rem;
-    transition: gap 0.2s ease, opacity 0.2s ease;
-}
-
-.comparison-guides-link a:hover {
-    gap: 0.7rem;
-    opacity: 0.85;
-}
-
-.table-footnotes:hover {
-    opacity: 0.95;
-}
-
-.table-footnotes p {
-    margin: 0;
-    display: flex;
-    align-items: baseline;
-    gap: 0.4rem;
-}
-
-.table-footnotes p:not(:last-child) {
-    margin-bottom: 0.4rem;
-}
-
-.table-footnotes a {
-    color: var(--accent);
-    text-decoration: none;
-    font-weight: 500;
-    transition: color 0.2s ease, text-decoration 0.2s ease;
-}
-
-.table-footnotes a:hover {
-    color: oklch(0.75 0.10 150);
-    text-decoration: underline;
-}
-
-.table-footnotes sup {
-    font-weight: 700;
-    color: var(--accent);
-}
-
-@media (max-width: 768px) {
-    .table-footnotes {
-        padding: 0.75rem 1rem;
-        font-size: 0.68rem;
-    }
-}
-
-/* --- Join & Invitation Page Visuals --- */
-.join-status-visual {
-    margin-bottom: 2rem;
-    position: relative;
-    height: 200px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.join-status-mascot {
-    display: block;
-    width: 140px;
-    height: auto;
-    z-index: 2;
-    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
-}
-
-.join-status-mascot.searching-mascot {
-    width: 175px; /* Slightly wider due to antenna to keep main body scale identical */
-}
-
-.join-status-pulse {
-    animation: mascot-gentle-pulse 2s ease-in-out infinite;
-}
-
-@keyframes mascot-gentle-pulse {
-    0% {
-        transform: scale(0.96);
-        filter: drop-shadow(0 4px 10px oklch(0.68 0.13 150 / 0.15));
-    }
-    50% {
-        transform: scale(1.04);
-        filter: drop-shadow(0 8px 20px oklch(0.68 0.13 150 / 0.35));
-    }
-    100% {
-        transform: scale(0.96);
-        filter: drop-shadow(0 4px 10px oklch(0.68 0.13 150 / 0.15));
-    }
-}
-
-.legal-mascot {
-    display: block;
-    width: 180px;
-    height: auto;
-    margin: -0.75rem auto 0.4rem auto;
-    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
-    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.legal-mascot:hover {
-    transform: scale(1.06) translateY(-4px) rotate(1.5deg);
-}
-
-.selfhost-mascot {
-    display: block;
-    width: 300px;
-    height: auto;
-    margin: 0 auto;
-    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
-    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.selfhost-mascot:hover {
-    transform: scale(1.05) translateY(-4px) rotate(-1deg);
-}
-
-.status-ring {
-    position: absolute;
-    width: 90px;
-    height: 90px;
-    border-radius: 50%;
-    background: oklch(0.68 0.13 150 / 0.05);
-    border: 2px dashed oklch(0.68 0.13 150 / 0.25);
-    z-index: 1;
-}
-
-.status-ring.active-pulse {
-    animation: radar-pulse 3s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
-}
-
-@keyframes radar-pulse {
-    0% {
-        transform: scale(0.85);
-        opacity: 0.9;
-        border-color: oklch(0.68 0.13 150 / 0.3);
-        box-shadow: 0 0 0 0px oklch(0.68 0.13 150 / 0.15);
-    }
-    50% {
-        transform: scale(1.18);
-        opacity: 0.35;
-        border-color: oklch(0.75 0.10 150 / 0.2);
-        box-shadow: 0 0 0 15px oklch(0.75 0.10 150 / 0);
-    }
-    100% {
-        transform: scale(0.85);
-        opacity: 0.9;
-        border-color: oklch(0.68 0.13 150 / 0.3);
-        box-shadow: 0 0 0 0px oklch(0.68 0.13 150 / 0.15);
-    }
-}
-
-.join-card-actions {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    width: 100%;
-}
-
-.join-card-actions .btn {
-    width: 100%;
-    justify-content: center;
-    padding: 1.1rem;
-    font-size: 0.88rem;
-    font-weight: 700;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-}
-
-.join-card-actions .btn svg {
-    margin-right: 0.3rem;
-    flex-shrink: 0;
-}
-
-.join-card-actions .btn img {
-    margin-right: 0.3rem;
-    flex-shrink: 0;
-}
-
-.btn-success {
-    background: var(--accent-green);
-    color: var(--text-on-green) !important;
-    box-shadow: 0 10px 15px -3px oklch(0.68 0.13 150 / 0.3);
-}
-
-.btn-success:hover {
-    background: oklch(0.60 0.12 150);
-    transform: translateY(-2px);
-    box-shadow: 0 20px 25px -5px oklch(0.68 0.13 150 / 0.4);
-}
-
-/* --- Section collapse (FAQ, self-hosting): closed by default to keep the page short --- */
-.section-collapse {
-    margin: 0 auto;
-}
-
-.faq-section-collapse {
-    max-width: 800px;
-}
-
-.collapse-summary {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.6rem;
-    list-style: none;
-    cursor: pointer;
-    font-weight: 700;
-    font-size: 1rem;
-    color: var(--accent);
-    background: oklch(0.68 0.13 150 / 0.08);
-    border: 1px solid oklch(0.68 0.13 150 / 0.3);
-    border-radius: 99px;
-    padding: 0.85rem 2rem;
-    max-width: 360px;
-    margin: 0 auto;
-    transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
-}
-
-.collapse-summary::-webkit-details-marker {
-    display: none;
-}
-
-.collapse-summary:hover {
-    background: oklch(0.68 0.13 150 / 0.16);
-    box-shadow: 0 0 20px oklch(0.68 0.13 150 / 0.25);
-    transform: translateY(-2px);
-}
-
-.collapse-summary .collapse-chevron {
-    flex-shrink: 0;
-    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.section-collapse[open] .collapse-chevron {
-    transform: rotate(180deg);
-}
-
-.collapse-label-hide { display: none; }
-.section-collapse[open] .collapse-label-show { display: none; }
-.section-collapse[open] .collapse-label-hide { display: inline; }
-
-.section-collapse[open] .collapse-summary {
-    margin-bottom: 2rem;
-}
-
-.section-collapse[open] .collapse-content {
-    animation: collapse-content-in 0.4s ease-out;
-}
-
-@keyframes collapse-content-in {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .section-collapse[open] .collapse-content {
-        animation: none;
-    }
-}
-
-/* --- FAQ Section --- */
-
-.faq-grid {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    max-width: 800px;
-    margin: 0 auto;
-}
-
-.faq-item {
-    background: oklch(0.27 0.035 130 / 0.45);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 16px;
-    padding: 1.5rem 2rem;
-    cursor: pointer;
-    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
-    overflow: hidden;
-}
-
-.faq-item:hover {
-    border-color: oklch(0.68 0.13 150 / 0.3);
-    box-shadow: 0 8px 20px oklch(0.68 0.13 150 / 0.1);
-}
-
-.faq-item[open] {
-    border-color: oklch(0.68 0.13 150 / 0.4);
-    background: oklch(0.27 0.035 130 / 0.65);
-}
-
-.faq-item summary {
-    font-weight: 700;
-    font-size: 1.05rem;
-    color: var(--text);
-    list-style: none;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 1rem;
-}
-
-.faq-item summary::-webkit-details-marker {
-    display: none;
-}
-
-.faq-item summary::after {
-    content: '+';
-    font-size: 1.4rem;
-    color: var(--accent);
-    font-weight: 300;
-    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-    flex-shrink: 0;
-    transform-origin: center;
-}
-
-.faq-item[open] summary::after {
-    transform: rotate(45deg);
-}
-
-.faq-item p {
-    color: var(--text-muted);
-    font-size: 0.95rem;
-    line-height: 1.6;
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-/* --- Focus states for interactive cards --- */
-.feature-card:focus-visible,
-.use-case-card:focus-visible,
-.compat-logo:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 4px;
-    transform: translateY(-5px);
-}
-.feature-card,
-.use-case-card,
-.compat-logo,
-section[id],
-header[id] {
-    scroll-margin-top: 100px;
-}
-
-/* --- Screen-reader-only (also crawlable by search engines) --- */
-.sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-}
-
-/* --- Skip-to-content accessibility link --- */
-.skip-link {
-    position: absolute;
-    left: -9999px;
-    top: 0;
-    background: var(--accent);
-    color: var(--text-on-green);
-    padding: 0.75rem 1.25rem;
-    border-radius: 0 0 8px 0;
-    font-weight: 700;
-    z-index: 9999;
-    text-decoration: none;
-}
-.skip-link:focus {
-    left: 0;
-}
-
-/* --- Reduced motion support --- */
-@media (prefers-reduced-motion: reduce) {
-    *, *::before, *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-        scroll-behavior: auto !important;
-    }
-    .join-status-pulse { animation: none; }
-    .status-ring.active-pulse { animation: none; }
-}
-
-/* --- will-change hints for animated elements --- */
-.join-status-pulse,
-.status-ring.active-pulse,
-.hero-mockup-wrapper,
-.cta-group .btn {
-    will-change: transform, opacity;
-}
-@media (prefers-reduced-motion: reduce) {
-    .join-status-pulse,
-    .status-ring.active-pulse,
-    .hero-mockup-wrapper,
-    .cta-group .btn {
-    }
-}
-
-/* --- Alternatives Hub Styles --- */
-.guide-card {
-    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, border-color 0.25s ease !important;
-}
-.guide-card:hover {
-    transform: translateY(-4px);
-    background-color: rgba(255, 255, 255, 0.07) !important;
-    border-color: rgba(255, 255, 255, 0.22) !important;
-    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.4);
-}
-.guide-card .btn-primary {
-    transition: background-color 0.2s ease, transform 0.1s ease;
-}
-.guide-card .btn-primary:active {
-    transform: scale(0.97);
-}
-@media (max-width: 640px) {
-    .guides-grid {
-        grid-template-columns: 1fr !important;
-        gap: 1.25rem !important;
-    }
-}
-
-/* --- Hero Live Demo Scene (two synced tabs + extension popup) --- */
-.hero-mockup-wrapper {
-    flex-direction: column;
-    gap: 0.9rem;
-    container-type: inline-size;
-}
-
-/* Fixed height that already fits the open popup, so toggling it never changes
-   layout (the vertically centered hero never jumps). The empty lower area is
-   the invisible room the popup drops into.
-
-   Do not move .hero-mockup-wrapper down to align the headline and demo tops:
-   the extension popup is bottom-anchored inside this scene, so moving the whole
-   wrapper destroys the vertical balance and leaves no breathing room below. */
-.hero-demo-scene {
-    --demo-content-y: 0px;
-    position: relative;
-    width: 100%;
-    height: max(calc(59cqw + 100px), 548px);
-}
-
-.demo-tab-stack {
-    position: relative;
-    width: 100%;
-    height: calc(59cqw + 100px + var(--demo-content-y));
-}
-
-@media (min-width: 1025px) {
-    .hero-demo-scene {
-        /* Balance the demo inside the visible hero area below the fixed navbar.
-           Shift the scene content, not the hero text or grid. */
-        --demo-content-y: 2.75rem;
-    }
-}
-
-/* While initializing, suppress all transitions so the popup can start closed
-   without a visible open->closed animation on page load. */
-.hero-demo-scene.demo-no-anim,
-.hero-demo-scene.demo-no-anim * {
-    transition-duration: 0s !important;
-}
-
-/* Sync status chip: green "in sync" at rest, flashes the broadcast event */
-.demo-sync-chip {
-    position: absolute;
-    top: var(--demo-content-y);
-    left: 2px;
-    z-index: 8;
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
-    padding: 5px 12px;
-    border-radius: 99px;
-    background: oklch(0.68 0.13 150 / 0.12);
-    border: 1px solid oklch(0.68 0.13 150 / 0.35);
-    color: #86efac;
-    font-family: inherit;
-    font-size: 11px;
-    font-weight: 800;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    cursor: default;
-    transition: background 0.3s, border-color 0.3s, color 0.3s;
-}
-
-.demo-chip-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: oklch(0.68 0.13 150);
-    box-shadow: 0 0 8px oklch(0.68 0.13 150);
-    transition: background 0.3s, box-shadow 0.3s;
-}
-
-.demo-sync-chip .demo-chip-event { display: none; }
-
-.demo-sync-chip.event {
-    background: oklch(0.68 0.13 150 / 0.14);
-    border-color: oklch(0.68 0.13 150 / 0.45);
-    color: oklch(0.85 0.07 150);
-}
-
-.demo-sync-chip.event .demo-chip-dot {
-    background: oklch(0.75 0.13 150);
-    box-shadow: 0 0 8px oklch(0.75 0.13 150);
-}
-
-.demo-sync-chip.event .demo-chip-label-sync { display: none; }
-.demo-sync-chip.event .demo-chip-event { display: inline; }
-
-@keyframes demoBlink {
-    50% { opacity: 0.35; }
-}
-
-/* Video tab cards: a clean window cascade — the right one is in front */
-.demo-tab-card {
-    position: absolute;
-    width: 310px;
-    width: 70cqw;
-    background: var(--demo-card);
-    border: 1px solid rgba(255, 255, 255, 0.09);
-    border-radius: 14px;
-    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45), inset 0 1px rgba(255, 255, 255, 0.05);
-    overflow: hidden;
-    cursor: pointer;
-    user-select: none;
-    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s;
-}
-
-.demo-tab-card:hover,
-.demo-tab-card:focus-visible {
-    border-color: oklch(0.68 0.13 150 / 0.55);
-}
-
-/* Card A = the foreground window at the top right ("your" browser,
-   hosts the extension icon in its toolbar) */
-.demo-tab-a {
-    top: calc(49px + var(--demo-content-y));
-    right: -3%;
-    transform: rotate(1.2deg);
-    transform-origin: top right;
-    z-index: 3;
-}
-
-.demo-tab-a:hover {
-    z-index: 4;
-    transform: rotate(1.2deg) scale(1.02);
-    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65), 0 0 20px oklch(0.68 0.13 150 / 0.2);
-}
-
-/* Card B = the friend's window, lower left, tucked behind */
-.demo-tab-b {
-    top: 142px;
-    top: calc(20cqw + 67px + var(--demo-content-y));
-    left: -3%;
-    transform: rotate(-1.6deg);
-    transform-origin: top left;
-    z-index: 2;
-}
-
-.demo-tab-b:hover {
-    z-index: 4;
-    transform: rotate(-1.6deg) scale(1.02);
-    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65), 0 0 20px oklch(0.68 0.13 150 / 0.2);
-}
-
-/* When the popup slides in from the right edge, the tabs step aside */
-.hero-demo-scene.popup-open .demo-tab-a {
-    top: calc(22px + var(--demo-content-y));
-    transform: rotate(1deg) translate(-44%, 20%) scale(0.88);
-}
-
-.hero-demo-scene.popup-open .demo-tab-a:hover {
-    z-index: 4;
-    transform: rotate(1deg) translate(-44%, 20%) scale(0.92);
-    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65), 0 0 20px oklch(0.68 0.13 150 / 0.2);
-}
-
-.hero-demo-scene.popup-open .demo-tab-b {
-    top: calc(20cqw + 40px + var(--demo-content-y));
-    transform: rotate(-1.6deg) translate(0, 14%) scale(0.94);
-}
-
-.hero-demo-scene.popup-open .demo-tab-b:hover {
-    z-index: 4;
-    transform: rotate(-1.6deg) translate(0, 14%) scale(0.98);
-    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65), 0 0 20px oklch(0.68 0.13 150 / 0.2);
-}
-
-.demo-tab-titlebar {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 8px 6px 10px;
-    background: var(--demo-toolbar);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-    font-size: 10.5px;
-    color: var(--text-muted);
-    font-weight: 600;
-}
-
-.demo-tab-dots {
-    display: flex;
-    gap: 4px;
-    flex-shrink: 0;
-}
-
-.demo-tab-dots i {
-    display: block;
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
-    background: oklch(0.32 0.03 125);
-}
-
-.demo-tab-title {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    flex: 1;
-    min-width: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.demo-tab-title svg { flex-shrink: 0; }
-
-.demo-tab-user {
-    flex-shrink: 0;
-    font-size: 9.5px;
-    font-weight: 700;
-    padding: 2px 7px;
-    border-radius: 99px;
-}
-
-.demo-user-a {
-    color: oklch(0.80 0.10 150);
-    background: oklch(0.68 0.13 150 / 0.15);
-}
-
-.demo-user-b {
-    color: #86efac;
-    background: oklch(0.68 0.13 150 / 0.12);
-}
-
-/* Extension launcher pinned in the foreground window's toolbar */
-.demo-ext-launcher {
-    position: relative;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    border-radius: 7px;
-    background: oklch(0.30 0.03 130);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    cursor: pointer;
-    transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s;
-}
-
-.demo-ext-launcher img {
-    display: block;
-    width: 16px;
-    height: 16px;
-    border-radius: 4px;
-}
-
-.demo-ext-launcher:hover {
-    border-color: var(--accent);
-    transform: translateY(-1px);
-}
-
-.demo-ext-launcher:active {
-    transform: scale(0.94);
-}
-
-.hero-demo-scene.popup-open .demo-ext-launcher {
-    border-color: oklch(0.68 0.13 150 / 0.7);
-    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.45);
-}
-
-.demo-ext-launcher::after {
-    content: '';
-    position: absolute;
-    top: -3px;
-    right: -3px;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: oklch(0.68 0.13 150);
-    box-shadow: 0 0 8px oklch(0.68 0.13 150);
-    opacity: 0;
-    transition: opacity 0.3s;
-}
-
-.hero-demo-scene:not(.popup-open) .demo-ext-launcher:not(.demo-ext-static)::after {
-    opacity: 1;
-    animation: demoBlink 1.4s ease-in-out infinite;
-}
-
-/* Card B shows the same extension icon, purely to signal the friend has it
-   installed too. It is not interactive and does not blink or glow. */
-.demo-ext-static,
-.demo-ext-static:hover {
-    cursor: default;
-    border-color: rgba(255, 255, 255, 0.12);
-    transform: none;
-    box-shadow: none;
-}
-
-.demo-ext-static::after { display: none; }
-
-/* Abstract "video" artwork with a slow cinematic pan/zoom while playing */
-.demo-video {
-    position: relative;
-    aspect-ratio: 16 / 9;
-    background: var(--demo-sky-bottom);
-    overflow: hidden;
-}
-
-.demo-video::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    pointer-events: none;
-    /* Cinematic vignette: soft edge falloff + heavier floor for the controls */
-    box-shadow:
-        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
-        inset 0 0 34px oklch(0.04 0.015 145 / 0.32),
-        inset 0 -26px 40px oklch(0.04 0.015 145 / 0.26);
-}
-
-html.theme-light .hero-demo-scene .demo-video::after {
-    box-shadow:
-        inset 0 0 0 1px oklch(0.30 0.04 145 / 0.13),
-        inset 0 18px 32px oklch(0.98 0.03 90 / 0.1),
-        inset 0 -22px 34px oklch(0.18 0.05 145 / 0.16);
-}
-
-.demo-video-art {
-    position: absolute;
-    inset: 0;
-    background:
-        radial-gradient(30% 42% at 76% 29%, var(--demo-glow), transparent 64%),
-        radial-gradient(90% 85% at 18% 5%, var(--demo-glow), transparent 66%),
-        linear-gradient(160deg, var(--demo-sky-top) 0%, var(--demo-sky-mid) 52%, var(--demo-sky-bottom) 100%);
-    transform-origin: 60% 40%;
-    animation:
-        demoKenBurns 9s ease-in-out infinite alternate,
-        demoArtShift 7s ease-in-out infinite alternate;
-    animation-play-state: paused;
-}
-
-/* Soft light drifting through the scene */
-.demo-video-art::before {
-    content: '';
-    position: absolute;
-    top: -25%;
-    left: -12%;
-    width: 70%;
-    aspect-ratio: 1;
-    border-radius: 50%;
-    background: radial-gradient(circle, var(--demo-glow), transparent 65%);
-    animation: demoGlowDrift 7s ease-in-out infinite alternate;
-    animation-play-state: paused;
-}
-
-.demo-video-art::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(105deg, transparent 30%, oklch(0.75 0.13 150 / 0.14) 45%, oklch(0.75 0.10 150 / 0.1) 55%, transparent 70%);
-    transform: translateX(-100%);
-    animation: demoSheen 2.8s linear infinite;
-    animation-play-state: paused;
-}
-
-/* Playing runs the animations; pausing freezes them mid-frame, so a synced
-   pause is visible at a glance */
-.demo-tab-card.playing .demo-video-art,
-.demo-tab-card.playing .demo-video-art::before,
-.demo-tab-card.playing .demo-video-art::after {
-    animation-play-state: running;
-}
-
-@keyframes demoKenBurns {
-    from { transform: scale(1) translate(0, 0); }
-    to { transform: scale(1.18) translate(-3%, 2%); }
-}
-
-@keyframes demoArtShift {
-    from { filter: hue-rotate(0deg) brightness(1); }
-    to { filter: hue-rotate(40deg) brightness(1.15); }
-}
-
-@keyframes demoGlowDrift {
-    from { transform: translate(0, 0); }
-    to { transform: translate(65%, 30%); }
-}
-
-@keyframes demoSheen {
-    to { transform: translateX(100%); }
-}
-
-/* Play / pause overlay */
-.demo-play-overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: oklch(0.10 0.01 135 / 0.35);
-    transition: opacity 0.25s, background 0.25s;
-}
-
-.demo-icon-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 46px;
-    height: 46px;
-    border-radius: 50%;
-    background: oklch(0.20 0.025 140 / 0.75);
-    border: 1px solid rgba(255, 255, 255, 0.25);
-    color: white;
-    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(4px);
-    transition: transform 0.2s;
-}
-
-.demo-tab-card:hover .demo-icon-wrap { transform: scale(1.1); }
-
-.demo-play-overlay .icon-pause { display: none; }
-.demo-tab-card.playing .icon-play { display: none; }
-.demo-tab-card.playing .icon-pause { display: block; }
-
-.demo-tab-card.playing .demo-play-overlay {
-    opacity: 0;
-    background: transparent;
-}
-
-.demo-tab-card.playing:hover .demo-play-overlay,
-.demo-tab-card.playing:focus-visible .demo-play-overlay {
-    opacity: 1;
-}
-
-/* Timestamp + seekable progress bar */
-.demo-video-controls {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 14px 10px 8px;
-    background: linear-gradient(transparent, var(--demo-control-fade));
-    font-size: 9.5px;
-    color: oklch(0.88 0.015 90);
-    z-index: 1;
-}
-
-.demo-time,
-.demo-duration {
-    flex-shrink: 0;
-    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-    font-weight: 700;
-    letter-spacing: 0.03em;
-    font-variant-numeric: tabular-nums;
-}
-
-.demo-duration {
-    font-weight: 600;
-    opacity: 0.7;
-}
-
-/* Decorative player chrome: play state glyph, volume, HD, fullscreen */
-.demo-ctrl-icon {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    opacity: 0.85;
-}
-
-.demo-ctrl-play .icon-pause { display: none; }
-.demo-tab-card.playing .demo-ctrl-play .icon-play { display: none; }
-.demo-tab-card.playing .demo-ctrl-play .icon-pause { display: block; }
-
-.demo-ctrl-badge {
-    flex-shrink: 0;
-    font-size: 7px;
-    font-weight: 800;
-    letter-spacing: 0.06em;
-    line-height: 1;
-    padding: 2px 3px;
-    border: 1px solid currentColor;
-    border-radius: 3px;
-    opacity: 0.65;
-}
-
-.demo-progress {
-    position: relative;
-    flex: 1;
-    height: 5px;
-    border-radius: 99px;
-    background: var(--demo-track);
-    cursor: pointer;
-}
-
-/* Generous invisible hit area for seeking */
-.demo-progress::before {
-    content: '';
-    position: absolute;
-    inset: -8px 0;
-}
-
-/* Buffered range behind the playhead, like a real player */
-.demo-progress-buffer {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 56%;
-    border-radius: 99px;
-    background: oklch(0.92 0.02 95 / 0.14);
-    pointer-events: none;
-}
-
-.demo-progress-fill {
-    position: relative;
-    height: 100%;
-    width: 30%;
-    border-radius: 99px;
-    background: linear-gradient(90deg, oklch(0.68 0.13 150), oklch(0.62 0.14 45));
-    pointer-events: none;
-}
-
-/* Scrub thumb, revealed on hover */
-.demo-progress-fill::after {
-    content: '';
-    position: absolute;
-    right: -5px;
-    top: 50%;
-    width: 11px;
-    height: 11px;
-    margin-top: -5.5px;
-    border-radius: 50%;
-    background: oklch(0.88 0.015 90);
-    box-shadow: 0 0 6px oklch(0.68 0.13 150 / 0.8);
-    opacity: 0;
-    transform: scale(0.6);
-    transition: opacity 0.2s, transform 0.2s;
-}
-
-.demo-tab-card:hover .demo-progress-fill::after {
-    opacity: 1;
-    transform: scale(1);
-}
-
-/* Sync pulse ring on both cards */
-.demo-tab-card.sync-pulse {
-    animation: demoCardPulse 0.9s ease-out;
-}
-
-@keyframes demoCardPulse {
-    0% { box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45), 0 0 0 0 oklch(0.68 0.13 150 / 0.65); }
-    100% { box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45), 0 0 0 22px oklch(0.68 0.13 150 / 0); }
-}
-
-/* The existing popup mockup slides in at the right edge, dropping out of
-   the toolbar icon of the foreground window */
-.hero-demo-scene .extension-mockup {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    z-index: 5;
-    width: 292px;
-    width: min(320px, 66cqw);
-    margin: 0;
-    transform-origin: top right;
-    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s, visibility 0.45s;
-}
-
-@media (min-width: 1025px) {
-    .hero-demo-scene .extension-mockup {
-        /* Counter the content shift so the opened panel is balanced below nav. */
-        bottom: 0.625rem;
-    }
-}
-
-.hero-demo-scene:not(.popup-open) .extension-mockup {
-    transform: translate(2%, -3%) scale(0.5);
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-}
-
-/* Ghost cursor for the automated walkthrough */
-.demo-cursor {
-    position: absolute;
-    top: 52%;
-    left: 46%;
-    z-index: 20;
-    width: 22px;
-    height: 22px;
-    opacity: 0;
-    pointer-events: none;
-    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
-    transition: top 0.65s cubic-bezier(0.45, 0.05, 0.25, 1), left 0.65s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.35s;
-}
-
-.demo-cursor.visible { opacity: 1; }
-
-.demo-cursor svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-}
-
-.demo-cursor::before {
-    content: '';
-    position: absolute;
-    top: -6px;
-    left: -8px;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    border: 2px solid oklch(0.75 0.13 150);
-    opacity: 0;
-    transform: scale(0.35);
-}
-
-.demo-cursor.clicking::before {
-    animation: demoClickRipple 0.45s ease-out;
-}
-
-@keyframes demoClickRipple {
-    0% { opacity: 0.9; transform: scale(0.35); }
-    100% { opacity: 0; transform: scale(1.25); }
-}
-
-/* Caption below the scene */
-.demo-hint {
-    margin: 0.75rem auto 0;
-    max-width: min(100%, 34rem);
-    text-align: center;
-    font-size: 0.82rem;
-    line-height: 1.45;
-    color: var(--text-muted);
-    opacity: 0;
-    transition: opacity 0.6s;
-}
-
-.demo-hint.show { opacity: 0.75; }
-
-/* Tablet/Small Desktop: fall back to the classic static popup mockup */
-@media (max-width: 1023px) {
-    .hero-demo-scene,
-    .hero-demo-scene.popup-open {
-        height: auto;
-        max-width: 320px;
-        margin: 0 auto;
-    }
-
-    .demo-tab-card,
-    .demo-tab-stack,
-    .demo-sync-chip,
-    .demo-cursor,
-    .demo-hint {
-        display: none !important;
-    }
-
-    .hero-demo-scene .extension-mockup,
-    .hero-demo-scene:not(.popup-open) .extension-mockup {
-        position: static;
-        width: 100%;
-        transform: none;
-        opacity: 1;
-        visibility: visible;
-        pointer-events: auto;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .hero-demo-scene:not(.popup-open) .demo-ext-launcher::after {
-        animation: none;
-    }
-}
-
-/* --- Story walkthrough additions: room creation, invite flight, film --- */
-
-/* The stick-figure film carries the motion now — keep only the color drift
-   on the backdrop (the animation shorthand resets play-state, so re-pause) */
-.demo-video-art {
-    animation: demoArtShift 7s ease-in-out infinite alternate;
-    animation-play-state: paused;
-}
-
-.demo-film {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.hero-demo-scene .film-stars { fill: var(--demo-stars) !important; }
-.hero-demo-scene .film-clouds { fill: var(--demo-stars) !important; }
-.hero-demo-scene .film-mist-scroll { fill: var(--demo-stars) !important; }
-.hero-demo-scene .film-shooting-star { stroke: var(--demo-stars) !important; }
-.hero-demo-scene .film-moon {
-    fill: var(--demo-moon) !important;
-    filter: drop-shadow(0 0 6px var(--demo-moon));
-}
-.hero-demo-scene .film-mtn-scroll { fill: var(--demo-mountain) !important; }
-.hero-demo-scene .film-mid-scroll > * { fill: var(--demo-midground) !important; }
-.hero-demo-scene .film-fore-scroll > * { fill: var(--demo-foreground) !important; }
-
-/* By day the birds read as silhouettes, not chalk marks */
-html.theme-light .hero-demo-scene .film-birds { stroke: oklch(0.32 0.06 145 / 0.65); }
-html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { stroke: oklch(0.32 0.06 145 / 0.75); }
-
-/* Stars: staggered twinkle so the sky feels alive */
-.film-star {
-    transform-box: fill-box;
-    transform-origin: center;
-    animation: filmTwinkle 2.8s ease-in-out infinite;
-}
-.film-star:nth-child(2) { animation-duration: 3.4s; animation-delay: 0.5s; }
-.film-star:nth-child(3) { animation-duration: 2.4s; animation-delay: 1.1s; }
-.film-star:nth-child(4) { animation-duration: 3.6s; animation-delay: 0.3s; }
-.film-star:nth-child(5) { animation-duration: 2.6s; animation-delay: 1.6s; }
-.film-star:nth-child(6) { animation-duration: 3.2s; animation-delay: 0.8s; }
-.film-star:nth-child(7) { animation-duration: 2.2s; animation-delay: 1.3s; }
-
-@keyframes filmTwinkle {
-    0%, 100% { opacity: 0.25; transform: scale(0.85); }
-    50% { opacity: 1; transform: scale(1.15); }
-}
-
-/* Moon: gentle glow pulse + slow arc drift. The drift lives on the wrapper
-   group so the craters travel with the disc; the glow stays on the circle.
-   (Step-3 uses a bare .film-moon without wrapper — filmMoon still covers it.) */
-.film-moon-g {
-    transform-box: fill-box;
-    transform-origin: center;
-    animation: filmMoonDrift 6s ease-in-out infinite alternate;
-    animation-play-state: paused;
-}
-
-.film-moon-g .film-moon {
-    animation-name: filmMoonGlow;
-}
-
-@keyframes filmMoonDrift {
-    from { transform: translate(0, 0); }
-    to { transform: translate(-6px, 3px); }
-}
-
-@keyframes filmMoonGlow {
-    from { filter: drop-shadow(0 0 4px oklch(0.95 0.01 100 / 0.5)); }
-    to { filter: drop-shadow(0 0 10px oklch(0.95 0.01 100 / 0.95)); }
-}
-
-.film-moon {
-    transform-box: fill-box;
-    transform-origin: center;
-    animation: filmMoon 6s ease-in-out infinite alternate;
-    animation-play-state: paused;
-}
-
-@keyframes filmMoon {
-    from { transform: translate(0, 0); filter: drop-shadow(0 0 4px oklch(0.95 0.01 100 / 0.5)); }
-    to { transform: translate(-6px, 3px); filter: drop-shadow(0 0 10px oklch(0.95 0.01 100 / 0.95)); }
-}
-
-.film-mtn-scroll {
-    transform: translateX(var(--scroll-back, 0px));
-}
-.film-mid-scroll {
-    transform: translateX(var(--scroll-mid, 0px));
-}
-.film-fore-scroll {
-    transform: translateX(var(--scroll-fore, 0px));
-}
-/* A single gliding bird carries the scene: the outer group rides the
-   JS-driven drift vars, the inner group flaps its wings via scaleY. */
-.film-hero-bird-drift {
-    transform: translate(var(--lantern-x, 0px), var(--bounce-y, 0px));
-}
-
-.film-hero-bird {
-    transform-box: fill-box;
-    transform-origin: center;
-    animation: filmWingFlap 0.85s ease-in-out infinite alternate;
-    animation-play-state: paused;
-}
-
-@keyframes filmWingFlap {
-    from { transform: scaleY(1); }
-    to { transform: scaleY(0.5); }
-}
-
-/* Twinkle & Glow play state bindings */
-.film-star {
-    transform-box: fill-box;
-    transform-origin: center;
-    animation: filmTwinkle 2.8s ease-in-out infinite;
-    animation-play-state: paused;
-}
-.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star, .film-birds, .film-hero-bird) {
-    animation-play-state: running;
-}
-
-/* Drifting clouds: gentle back-and-forth so there is no wrap pop */
-.film-cloud {
-    transform-box: fill-box;
-    animation: filmCloudDrift 26s ease-in-out infinite alternate;
-    animation-play-state: paused;
-}
-
-.film-cloud-2 {
-    animation-duration: 34s;
-    animation-delay: -12s;
-}
-
-@keyframes filmCloudDrift {
-    from { transform: translateX(-6px); }
-    to { transform: translateX(10px); }
-}
-
-/* A shooting star streaks across the sky every few loops */
-.film-shooting-star {
-    opacity: 0;
-    animation: filmShoot 11s linear infinite;
-    animation-play-state: paused;
-}
-
-@keyframes filmShoot {
-    0%, 87% { opacity: 0; transform: translate(0, 0); }
-    89% { opacity: 0.9; }
-    95%, 100% { opacity: 0; transform: translate(-46px, 20px); }
-}
-
-/* A distant flock crosses the valley, fading out mid-flight */
-.film-birds {
-    animation: filmBirds 16s linear infinite;
-    animation-play-state: paused;
-}
-
-@keyframes filmBirds {
-    0% { transform: translate(0, 0); opacity: 0; }
-    4% { opacity: 0.75; }
-    42% { opacity: 0.75; }
-    48%, 100% { transform: translate(185px, -12px); opacity: 0; }
-}
-
-/* Valley mist rides the slow background parallax between tree layers */
-.film-mist-scroll {
-    transform: translateX(var(--scroll-back, 0px));
-}
-
-/* Play button pulsing indicator at the end of the walkthrough */
-.hero-demo-scene.demo-complete #demo-tab-a:not(.playing) .demo-icon-wrap {
-    animation: playButtonPulse 1.6s ease-in-out infinite;
-    border-color: oklch(0.68 0.13 150);
-    box-shadow: 0 0 15px oklch(0.68 0.13 150 / 0.8);
-}
-@keyframes playButtonPulse {
-    0%, 100% { transform: scale(1); box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.5); }
-    50% { transform: scale(1.12); box-shadow: 0 0 20px oklch(0.68 0.13 150 / 0.9); }
-}
-
-/* Seek-reset: scrubbing restarts animations from frame zero */
-.demo-film.demo-reset * {
-    animation: none !important;
-}
-
-/* Seek-break: scrubbing the timeline visibly glitches both videos so the
-   jump reads as a real cut instead of an invisible time update. A scanline
-   sweep + brightness pop, and the film animations restart mid-stride. */
-.demo-video-art { transition: filter 0.12s ease-out; }
-
-.demo-tab-card.demo-seeking .demo-video-art {
-    animation-play-state: paused;
-    filter: brightness(1.9) saturate(1.4) blur(0.6px);
-}
-
-.demo-tab-card .demo-seek-sweep {
-    position: absolute;
-    inset: 0;
-    z-index: 4;
-    pointer-events: none;
-    opacity: 0;
-    background: linear-gradient(90deg,
-        transparent 0%,
-        oklch(0.75 0.13 150 / 0.35) 20%,
-        rgba(255, 255, 255, 0.55) 50%,
-        oklch(0.75 0.13 150 / 0.35) 80%,
-        transparent 100%);
-    mix-blend-mode: screen;
-    transform: translateX(-100%);
-}
-
-.demo-tab-card.demo-seeking .demo-seek-sweep {
-    animation: demoSeekSweep 0.34s ease-out;
-}
-
-@keyframes demoSeekSweep {
-    0% { opacity: 0; transform: translateX(-100%); }
-    20% { opacity: 1; }
-    100% { opacity: 0; transform: translateX(100%); }
-}
-
-/* The sync chip only appears once the room is connected (story progression) */
-.demo-sync-chip {
-    opacity: 0;
-    transform: translateY(-4px);
-    pointer-events: none;
-    transition: background 0.3s, border-color 0.3s, color 0.3s, opacity 0.4s, transform 0.4s;
-}
-
-.hero-demo-scene.connected .demo-sync-chip {
-    opacity: 1;
-    transform: none;
-    pointer-events: auto;
-}
-
-/* Toast on the friend's window ("Room joined", "Tab selected") */
-.demo-tab-toast {
-    position: absolute;
-    top: 36px;
-    left: 50%;
-    transform: translate(-50%, -6px);
-    z-index: 2;
-    padding: 4px 10px;
-    border-radius: 99px;
-    background: oklch(0.20 0.025 140 / 0.92);
-    border: 1px solid oklch(0.68 0.13 150 / 0.5);
-    color: oklch(0.85 0.07 150);
-    font-size: 9.5px;
-    font-weight: 700;
-    white-space: nowrap;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s, transform 0.3s;
-}
-
-.demo-tab-toast.show {
-    opacity: 1;
-    transform: translate(-50%, 0);
-}
-
-/* Invite link pill flying from the popup to the friend's window */
-.demo-invite-fly {
-    position: absolute;
-    z-index: 30;
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    padding: 4px 10px;
-    border-radius: 99px;
-    background: var(--accent);
-    color: var(--text-on-green);
-    font-size: 9.5px;
-    font-weight: 700;
-    white-space: nowrap;
-    box-shadow: 0 6px 18px oklch(0.68 0.13 150 / 0.5);
-    opacity: 0;
-    pointer-events: none;
-    transition: left 0.75s cubic-bezier(0.3, 0.7, 0.4, 1), top 0.75s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.3s;
-}
-
-/* Attention flash (e.g. on the video select while "choosing the tab") */
-.demo-attn {
-    animation: demoAttn 0.7s ease-in-out 2;
-}
-
-@keyframes demoAttn {
-    50% { box-shadow: 0 0 0 3px oklch(0.68 0.13 150 / 0.75); }
-}
-
-
-/* --- Bento Card Host Control Mockup Additions --- */
-
-.bento-content-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: 1.2rem;
-    width: 100%;
-}
-
-.bento-host-control-mockup {
-    background: oklch(0.20 0.025 140 / 0.6);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 12px;
-    padding: 0.75rem 1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.bento-mockup-header {
-    font-size: 0.65rem;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--text-muted);
-    font-weight: 700;
-}
-
-.bento-mockup-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    font-size: 0.75rem;
-    color: white;
-    font-weight: 600;
-    margin-top: 2px;
-}
-
-/* Custom switch toggle representation */
-.bento-switch-wrap {
-    position: relative;
-    display: inline-block;
-    width: 28px;
-    height: 16px;
-    flex-shrink: 0;
-}
-
-.bento-switch-wrap input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.bento-switch-slider {
-    position: absolute;
-    cursor: default;
-    top: 0; left: 0; right: 0; bottom: 0;
-    background-color: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 16px;
-    transition: .3s;
-}
-
-.bento-switch-slider:before {
-    position: absolute;
-    content: "";
-    height: 10px;
-    width: 10px;
-    left: 2px;
-    bottom: 2px;
-    background-color: oklch(0.68 0.02 100);
-    border-radius: 50%;
-    transition: .3s;
-}
-
-.bento-switch-wrap input:checked + .bento-switch-slider {
-    background-color: oklch(0.68 0.13 150 / 0.25);
-    border-color: oklch(0.68 0.13 150 / 0.6);
-    box-shadow: 0 0 8px oklch(0.68 0.13 150 / 0.3);
-}
-
-.bento-switch-wrap input:checked + .bento-switch-slider:before {
-    transform: translateX(12px);
-    background-color: var(--accent);
-    box-shadow: 0 0 6px var(--accent-glow);
-}
-
-/* --- Step 2 & Step 3 Visual Redesign Styles --- */
-
-/* Step 2 Browser video player mock */
-.illus-video-player-mock {
-    width: 85%;
-    height: 65%;
-    background: linear-gradient(135deg, oklch(0.20 0.04 145), oklch(0.12 0.02 138));
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 8px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    margin-top: 15px;
-}
-
-.video-mock-play-button {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-size: 0.8rem;
-    cursor: default;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-}
-
-.video-mock-timeline {
-    position: absolute;
-    bottom: 8px;
-    left: 8px;
-    right: 8px;
-    height: 3px;
-    background: rgba(255, 255, 255, 0.15);
-    border-radius: 2px;
-}
-
-.video-mock-timeline-fill {
-    width: 35%;
-    height: 100%;
-    background: var(--accent);
-    border-radius: 2px;
-}
-
-/* Step 2 extension popup dropdown alignment */
-.illus-extension-popup.drop-down {
-    top: 2.2rem;
-    right: 0.6rem;
-    width: 145px;
-    animation: popup-dropdown-float 4s ease-in-out infinite;
-}
-
-@keyframes popup-dropdown-float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-3px); }
-}
-
-.status-badge-select {
-    background: oklch(0.68 0.13 150 / 0.12);
-    color: oklch(0.85 0.07 150);
-    font-size: 0.58rem;
-    font-weight: 700;
-    padding: 2px 6px;
-    border-radius: 4px;
-    border: 1px solid oklch(0.68 0.13 150 / 0.2);
-    display: inline-flex;
-    align-items: center;
-    text-transform: uppercase;
-    letter-spacing: 0.2px;
-}
-
-.popup-form-group {
-    margin-top: 6px;
-    width: 100%;
-    text-align: left;
-}
-
-.popup-form-label {
-    display: block;
-    font-size: 0.6rem;
-    color: var(--text-muted);
-    margin-bottom: 4px;
-    font-weight: 700;
-}
-
-.popup-select-wrapper {
-    position: relative;
-    width: 100%;
-}
-
-.popup-select-mock {
-    width: 100%;
-    background: var(--card);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    color: white;
-    padding: 6px;
-    border-radius: 6px;
-    font-family: inherit;
-    font-size: 0.62rem;
-    outline: none;
-    appearance: none;
-    -webkit-appearance: none;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: default;
-    display: block;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-
-.popup-cursor-pointer {
-    position: absolute;
-    bottom: -15px;
-    right: 15px;
-    font-size: 1.1rem;
-    pointer-events: none;
-    z-index: 10;
-    animation: pointer-click 1.6s infinite ease-in-out;
-}
-
-@keyframes pointer-click {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    50% { transform: translate(-3px, -3px) scale(0.9); }
-}
-
-/* Step 3 forest movie continuous animation bindings */
-.step-illustration-3 .film-mtn-scroll {
-    animation: scrollBack 12s linear infinite !important;
-}
-.step-illustration-3 .film-mid-scroll {
-    animation: scrollMid 6s linear infinite !important;
-}
-.step-illustration-3 .film-fore-scroll {
-    animation: scrollFore 3s linear infinite !important;
-}
-.step-illustration-3 .film-hero-bird {
-    animation: filmWingFlap 0.85s ease-in-out infinite !important;
-    animation-direction: alternate !important;
-}
-
-@keyframes scrollBack {
-    0% { transform: translateX(0); }
-    100% { transform: translateX(-160px); }
-}
-@keyframes scrollMid {
-    0% { transform: translateX(0); }
-    100% { transform: translateX(-160px); }
-}
-@keyframes scrollFore {
-    0% { transform: translateX(0); }
-    100% { transform: translateX(-160px); }
-}
-
-/* --- High Fidelity Micro-Animations & Identity additions --- */
-
-/* Scroll progress bar glowing line at the top */
-.scroll-progress-bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 3px;
-    background: linear-gradient(90deg, var(--accent), oklch(0.62 0.14 45), oklch(0.62 0.14 45));
-    z-index: 9999;
-    width: 0%;
-    transition: width 0.1s ease-out;
-    box-shadow: 0 0 8px var(--accent-glow);
-}
-
-.scroll-progress-bar::after {
-    content: '';
-    position: absolute;
-    right: -3px;
-    top: 50%;
-    width: 10px;
-    height: 7px;
-    border-radius: 0 70% 0 70%;
-    background: var(--accent-green);
-    box-shadow: 0 0 6px var(--accent-glow);
-    transform: translateY(-50%) rotate(24deg);
-}
-
-/* Navigation logo pop & spin */
-.nav-logo-img {
-    animation: logo-entrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-    transform-origin: center;
-    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
-    will-change: transform, opacity;
-}
-
-.nav-logo-img:hover {
-    transform: scale(1.15) rotate(360deg);
-}
-
-@keyframes logo-entrance {
-    0% {
-        transform: scale(0) rotate(-180deg);
-        opacity: 0;
-    }
-    100% {
-        transform: scale(1) rotate(0deg);
-        opacity: 1;
-    }
-}
-
-/* Glowing reflection sweep on buttons */
-.btn-primary, .btn-firefox, .btn-secondary {
-    position: relative;
-    overflow: hidden;
-}
-
-.btn-primary::after, .btn-firefox::after, .btn-secondary::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-        90deg,
-        rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 0.25) 50%,
-        rgba(255, 255, 255, 0) 100%
-    );
-    transform: skewX(-25deg);
-    transition: none;
-    pointer-events: none;
-}
-
-.btn-primary:hover::after, .btn-firefox:hover::after, .btn-secondary:hover::after {
-    left: 100%;
-    transition: left 0.8s ease-in-out;
-}
-
-/* Step 2 mockup control panel styles */
-.popup-mock-controls {
-    display: flex;
-    gap: 8px;
-    margin-top: 4px;
-    width: 100%;
-}
-
-.popup-mock-btn {
-    flex: 1;
-    text-align: center;
-    padding: 6px;
-    border-radius: 6px;
-    font-size: 0.62rem;
-    font-weight: 700;
-    color: white;
-    cursor: default;
-    opacity: 0.75;
-}
-
-.popup-mock-btn.play {
-    background: oklch(0.68 0.13 150);
-    color: var(--text-on-green);
-}
-
-.popup-mock-btn.pause {
-    background: oklch(0.55 0.15 25);
-}
-
-/* Phone and portrait-tablet widths: keep the full hero demo out of the page
-   flow. The demo modal mounts the same node in its own fixed layer. */
-@media (max-width: 900px) {
-    .hero-grid > .hero-mockup-wrapper {
-        display: none !important;
-    }
-}
-
-@media (max-width: 900px) {
-    .hero-github-cta {
-        display: none;
-    }
-
-    .btn-demo-mobile {
-        display: inline-flex;
-    }
-}
-
-body.mobile-demo-open {
-    overflow: hidden;
-}
-
-.mobile-demo-modal[hidden] {
-    display: none;
-}
-
-.mobile-demo-modal {
-    position: fixed;
-    inset: 0;
-    z-index: 2400;
-    display: flex;
-    flex-direction: column;
-    padding: 0 !important;
-}
-
-.mobile-demo-backdrop {
-    position: absolute;
-    inset: 0;
-    background: oklch(0.10 0.01 135 / 0.25);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-}
-
-.mobile-demo-panel {
-    position: relative;
-    z-index: 1;
-    width: 100% !important;
-    height: 100% !important;
-    max-height: none !important;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    background: transparent !important;
-    backdrop-filter: none !important;
-    -webkit-backdrop-filter: none !important;
-    border: none !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
-}
-
-.mobile-demo-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 0.85rem 0.95rem;
-    border-bottom: none !important;
-    flex-shrink: 0;
-}
-
-.mobile-demo-header h2 {
-    margin: 0;
-    font-size: 0.95rem;
-    line-height: 1.2;
-    color: oklch(0.96 0.01 90);
-}
-
-.mobile-demo-close {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 38px;
-    height: 38px;
-    padding: 0;
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 10px;
-    background: oklch(0.27 0.035 130 / 0.72);
-    color: oklch(0.88 0.015 90);
-    cursor: pointer;
-    flex-shrink: 0;
-}
-
-.mobile-demo-stage {
-    position: relative;
-    flex: 1;
-    min-height: 0;
-    overflow: hidden !important;
-    padding: 1rem 0.75rem 1.25rem;
-    overscroll-behavior: contain;
-    display: flex !important;
-    flex-direction: column !important;
-    justify-content: center !important;
-    align-items: center !important;
-}
-
-/* Ensure the demo scene canvas is transparent inside the modal to let the glass backdrop blend */
-.mobile-demo-stage .hero-demo-scene {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-}
-
-/* Ensure the close button hover stays consistent in dark glass theme */
-.mobile-demo-close:hover {
-    background: rgba(51, 65, 85, 0.85) !important;
-}
-
-/* Light Mode Frosted Glass overrides */
-html.theme-light .mobile-demo-backdrop {
-    background: oklch(0.95 0.01 100 / 0.2) !important;
-}
-
-html.theme-light .mobile-demo-panel {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-}
-
-html.theme-light .mobile-demo-header {
-    border-bottom: none !important;
-}
-
-html.theme-light .mobile-demo-header h2 {
-    color: var(--text) !important;
-}
-
-html.theme-light .mobile-demo-close {
-    background: rgba(255, 255, 255, 0.4) !important;
-    border-color: oklch(0.20 0.025 140 / 0.1) !important;
-    color: var(--text) !important;
-}
-
-html.theme-light .mobile-demo-close:hover {
-    background: rgba(255, 255, 255, 0.75) !important;
-}
-
-.mobile-demo-stage .hero-mockup-wrapper {
-    display: flex !important;
-    position: relative;
-    width: min(100%, 560px);
-    margin: 0 auto;
-    will-change: transform;
-}
-
-/* Mobile S / short screens */
-@media (max-height: 600px) {
-    .mobile-demo-stage .hero-mockup-wrapper {
-        transform: scale(0.68) !important;
-        transform-origin: top center !important;
-        height: 380px !important;
-    }
-}
-
-/* Mobile M/L / medium screens */
-@media (min-height: 601px) and (max-height: 740px) {
-    .mobile-demo-stage .hero-mockup-wrapper {
-        transform: scale(0.82) !important;
-        transform-origin: top center !important;
-        height: 460px !important;
-    }
-}
-
-/* Default / tall screens */
-@media (min-height: 741px) {
-    .mobile-demo-stage .hero-mockup-wrapper {
-        transform: scale(1) !important;
-        transform-origin: top center !important;
-        height: 550px !important;
-    }
-}
-
-.mobile-demo-stage .hero-demo-scene,
-.mobile-demo-stage .hero-demo-scene.popup-open {
-    position: relative;
-    width: 100%;
-    height: 100% !important;
-    max-width: none;
-    margin: 0 auto;
-}
-
-.mobile-demo-stage .demo-tab-stack {
-    display: block !important;
-    position: static !important;
-    height: auto !important;
-}
-
-.mobile-demo-stage .demo-tab-card {
-    display: block !important;
-}
-
-.mobile-demo-stage .demo-sync-chip {
-    display: inline-flex !important;
-}
-
-.mobile-demo-stage .demo-cursor {
-    display: block !important;
-}
-
-.mobile-demo-stage .demo-hint {
-    display: block !important;
-    position: absolute !important;
-    left: 0 !important;
-    right: 0 !important;
-    top: auto !important;
-    bottom: 12px !important;
-    margin: 0 auto !important;
-    padding-inline: 1rem;
-    max-width: 90%;
-    z-index: 10;
-}
-
-.mobile-demo-stage .hero-demo-scene .extension-mockup {
-    position: absolute;
-    bottom: 0 !important;
-    right: 0;
-    z-index: 15 !important;
-    width: min(320px, 66cqw);
-    transform: none !important;
-    transform-origin: top right !important;
-    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s, visibility 0.45s;
-}
-
-.mobile-demo-stage .hero-demo-scene:not(.popup-open) .extension-mockup {
-    bottom: 0 !important;
-    transform: translate(2%, -3%) scale(0.5) !important;
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-}
-
-@media (max-width: 380px) {
-    .mobile-demo-modal {
-        padding: 0 !important;
-    }
-
-    .mobile-demo-stage {
-        padding-inline: 0.45rem !important;
-    }
-}
-
-/* Performance optimization for off-screen sections (below the fold) */
-.lazy-section {
-    content-visibility: auto;
-}
-
-.use-cases-section {
-    contain-intrinsic-block-size: auto 600px;
-}
-
-.comparison-section {
-    contain-intrinsic-block-size: auto 800px;
-}
-
-#self-hosting {
-    contain-intrinsic-block-size: auto 400px;
-}
-
-#faq {
-    contain-intrinsic-block-size: auto 450px;
-}
-
-@media (max-width: 768px) {
-    .use-cases-section {
-        contain-intrinsic-block-size: auto 900px;
-    }
-
-    .comparison-section {
-        contain-intrinsic-block-size: auto 1100px;
-    }
-
-    #self-hosting {
-        contain-intrinsic-block-size: auto 550px;
-    }
-
-    #faq {
-        contain-intrinsic-block-size: auto 700px;
-    }
-}
-
-/* Final responsive hierarchy overrides. Keep these last: the landing page has
-   several component-level media blocks above that intentionally own geometry. */
-@media (max-width: 768px) {
-    .container {
-        padding-inline: 1.15rem;
-    }
-
-    section {
-        padding-block: 4.25rem;
-    }
-
-    .hero-text h1,
-    .section-title,
-    #how-it-works h2,
-    #self-hosting h2,
-    #faq h2 {
-        font-size: clamp(2rem, 9vw, 2.65rem) !important;
-        text-wrap: balance;
-    }
-
-    .cta-group {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        align-items: stretch;
-        width: 100%;
-    }
-
-    .cta-group .btn {
-        width: 100%;
-        min-height: 48px;
-        justify-content: center;
-    }
-}
-
-@media (max-width: 430px) {
-    .cta-group {
-        grid-template-columns: 1fr;
-    }
-}
+/*
+ * KoalaSync website CSS manifest for local development.
+ *
+ * Production builds concatenate these modules in this exact order before
+ * minification, hashing, and SRI generation. Keep the order synchronized with
+ * STYLE_MODULES in build.cjs; it preserves the original cascade byte-for-byte.
+ */
+@import url('./styles/foundation.css');
+@import url('./styles/hero.css');
+@import url('./styles/landing-primary.css');
+@import url('./styles/legal.css');
+@import url('./styles/landing-controls.css');
+@import url('./styles/join-spinner.css');
+@import url('./styles/landing-sections.css');
+@import url('./styles/join.css');
+@import url('./styles/landing-faq.css');
+@import url('./styles/alternatives.css');
+@import url('./styles/demo.css');
diff --git a/website/style.legacy.css b/website/style.legacy.css
new file mode 100644
index 0000000..ad55856
--- /dev/null
+++ b/website/style.legacy.css
@@ -0,0 +1,6576 @@
+/* KoalaSync Design System - Privacy-Focused (No External Assets) */
+
+@font-face {
+    font-family: 'Twemoji Country Flags';
+    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
+    src: url('assets/TwemojiCountryFlags.woff2') format('woff2');
+    font-display: swap;
+}
+
+:root {
+    /* v3.0.0 "The Greens Update" nature palette */
+    --bg-base: oklch(0.20 0.025 140);
+    --surface: oklch(0.27 0.035 130);
+    --surface-deep: oklch(0.16 0.025 135);
+    --surface-alt: oklch(0.23 0.03 130);
+    --border-soft: rgba(255, 255, 255, 0.06);
+    --border-strong: oklch(0.32 0.03 125);
+    --text-primary: oklch(0.96 0.01 90);
+    --text-secondary: oklch(0.78 0.02 90);
+    --accent-green: oklch(0.68 0.13 150);
+    --accent-green-hover: oklch(0.75 0.13 150);
+    --accent-terracotta: oklch(0.62 0.14 45);
+    --danger: oklch(0.55 0.15 25);
+    --text-on-green: oklch(0.14 0.02 90);
+
+    /* Legacy aliases used throughout the stylesheet */
+    --bg: var(--bg-base);
+    --card: var(--surface);
+    --accent: var(--accent-green);
+    --accent-glow: oklch(0.68 0.13 150 / 0.3);
+    --text: var(--text-primary);
+    --text-muted: var(--text-secondary);
+    --success: var(--accent-green);
+    --glass: oklch(0.27 0.035 130 / 0.4);
+    --glass-border: var(--border-soft);
+    --section-tint: transparent;
+    --section-tint-strong: oklch(0.20 0.025 140 / 0.28);
+    --card-surface: oklch(0.27 0.035 130 / 0.45);
+    --card-border: rgba(255, 255, 255, 0.08);
+    color-scheme: dark;
+}
+
+.extension-mockup,
+.illus-popup-card,
+.illus-player-card {
+    --bg: oklch(0.20 0.025 140) !important;
+    --card: oklch(0.27 0.035 130) !important;
+    --accent: oklch(0.68 0.13 150) !important;
+    --accent-glow: oklch(0.68 0.13 150 / 0.3) !important;
+    --text: oklch(0.96 0.01 90) !important;
+    --text-muted: oklch(0.78 0.02 90) !important;
+    --success: oklch(0.68 0.13 150) !important;
+    --error: oklch(0.55 0.15 25) !important;
+    --glass: oklch(0.27 0.035 130 / 0.4) !important;
+    --glass-border: rgba(255, 255, 255, 0.05) !important;
+    --section-tint: rgba(255, 255, 255, 0.02) !important;
+    --section-tint-strong: oklch(0.20 0.025 140 / 0.4) !important;
+    --card-surface: oklch(0.27 0.035 130 / 0.45) !important;
+    --card-border: rgba(255, 255, 255, 0.08) !important;
+}
+
+.invite-banner {
+    background: var(--accent);
+    color: var(--text-on-green);
+    padding: 0.75rem 0;
+    text-align: center;
+    font-weight: 600;
+    font-size: 0.9rem;
+    position: relative;
+    z-index: 2000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+.btn-banner {
+    background: white;
+    color: var(--accent);
+    padding: 4px 12px;
+    border-radius: 6px;
+    text-decoration: none;
+    font-size: 0.8rem;
+    font-weight: 700;
+    margin-left: 12px;
+    cursor: pointer;
+    border: none;
+    transition: transform 0.2s;
+}
+
+.btn-banner:hover {
+    transform: scale(1.05);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+    border-radius: 6px;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: 'Twemoji Country Flags', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    background-color: var(--bg);
+    color: var(--text);
+    line-height: 1.6;
+    overflow-x: hidden;
+    position: relative;
+}
+
+/* --- Animated Bamboo Forest Background (v3 Greens Update) --- */
+/* Registered so wind gusts can TRANSITION these instead of jumping */
+@property --sway {
+    syntax: '<angle>';
+    initial-value: 1.2deg;
+    inherits: true;
+}
+
+@property --leaf-drift {
+    syntax: '<length>';
+    initial-value: 26px;
+    inherits: true;
+}
+
+.bg-nature {
+    --sway: 1.2deg;
+    --leaf-drift: 26px;
+    transition: --sway 1.6s ease-in-out, --leaf-drift 1.6s ease-in-out;
+}
+
+.bg-nature.gusting {
+    --sway: 3.4deg;
+    --leaf-drift: 68px;
+}
+
+.bg-nature {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+    background:
+        radial-gradient(circle at 18% 10%, oklch(0.26 0.05 145 / 0.35), transparent 34rem),
+        radial-gradient(circle at 78% 68%, oklch(0.24 0.04 140 / 0.3), transparent 38rem),
+        linear-gradient(180deg, oklch(0.20 0.025 140) 0%, oklch(0.17 0.03 142) 45%, oklch(0.19 0.03 140) 100%);
+}
+
+/* (a) Distant bamboo layer: blurred, scroll-parallaxed by app.js */
+#bamboo-far {
+    position: absolute;
+    inset: 0;
+    will-change: transform;
+}
+
+#bamboo-far .bamboo-stalk {
+    position: absolute;
+    /* 200% covers the upward parallax drift (max 0.55vh on the near layer)
+       with margin while keeping the blurred layer smaller than the old
+       240% overscan. Spare coverage sits below, where the drift needs it. */
+    top: -40%;
+    height: 200%;
+    border-radius: 999px;
+    filter: blur(4.5px);
+    transition: filter 1.2s ease;
+    background:
+        repeating-linear-gradient(180deg,
+            transparent 0, transparent 108px,
+            oklch(0.40 0.06 145 / 0.22) 108px, oklch(0.40 0.06 145 / 0.22) 112px),
+        linear-gradient(180deg, oklch(0.34 0.05 145 / 0.4), oklch(0.24 0.04 140 / 0.16));
+}
+
+#bamboo-far .far-1 { left: 2%; width: 26px; }
+#bamboo-far .far-2 { left: 7.5%; width: 18px; }
+#bamboo-far .far-3 { right: 4%; width: 30px; }
+#bamboo-far .far-4 { left: 13%; width: 20px; }
+#bamboo-far .far-5 { right: 10.5%; width: 16px; }
+/* Two whisper-quiet trunks soften the empty centre without touching the
+   content: wide apart, thin, and at the lowest opacity in the scene. */
+#bamboo-far .far-6 { left: 39%; width: 12px; opacity: 0.55; }
+#bamboo-far .far-7 { right: 42%; width: 14px; opacity: 0.6; }
+
+/* Two barely-there trunks break up the empty middle without competing with
+   the content. They share the far layer's single parallax transform. */
+#bamboo-far::before,
+#bamboo-far::after {
+    content: '';
+    position: absolute;
+    top: -40%;
+    height: 200%;
+    border-radius: 999px;
+    filter: blur(6.5px);
+    opacity: 0.3;
+    background: linear-gradient(180deg, oklch(0.34 0.05 145 / 0.3), oklch(0.23 0.04 140 / 0.1));
+}
+
+#bamboo-far::before { left: 24%; width: 13px; }
+#bamboo-far::after { right: 25%; width: 17px; }
+
+/* Depth of field: the far layer blurs further as you descend (stepped by
+   JS on threshold crossings, never per frame) */
+.bg-nature.depth-mid #bamboo-far .bamboo-stalk { filter: blur(5.5px); }
+.bg-nature.depth-deep #bamboo-far .bamboo-stalk { filter: blur(6.5px); }
+
+/* (a2) Mid bamboo layer: sits between far and near with its own parallax
+   rate (app.js) and half the near layer's sway, so the three layers drift
+   apart subtly instead of moving as one sheet. Landing page only — the
+   static pages keep the lighter two-layer scene. */
+#bamboo-mid {
+    position: absolute;
+    inset: 0;
+    will-change: transform;
+}
+
+#bamboo-mid .bamboo-stalk {
+    position: absolute;
+    top: -40%;
+    height: 200%;
+    border-radius: 999px;
+    filter: blur(2px);
+    transition: filter 1.2s ease;
+    /* Segment rings + a soft left-of-centre sheen give the stalks culm
+       structure without any extra elements; the blur keeps both faint. */
+    background:
+        repeating-linear-gradient(180deg,
+            transparent 0, transparent 84px,
+            oklch(0.46 0.075 145 / 0.28) 84px, oklch(0.46 0.075 145 / 0.28) 87px),
+        linear-gradient(90deg, transparent 14%, oklch(0.58 0.07 145 / 0.14) 38%, transparent 68%),
+        linear-gradient(180deg, oklch(0.36 0.06 145 / 0.45), oklch(0.25 0.045 140 / 0.2));
+    transform-origin: bottom center;
+    animation: bambooSwayHalf 13s ease-in-out infinite;
+}
+
+#bamboo-mid .mid-1 { left: 17%; width: 15px; animation-duration: 12s; }
+#bamboo-mid .mid-2 { left: 31%; width: 9px; animation-delay: -5s; opacity: 0.55; }
+#bamboo-mid .mid-3 { right: 15.5%; width: 17px; animation-duration: 14.5s; animation-delay: -8s; }
+#bamboo-mid .mid-4 { right: 30%; width: 8px; animation-duration: 11.5s; animation-delay: -2.5s; opacity: 0.5; }
+
+/* A few leaves sprout from the mid stalks (pseudo-elements, so they ride
+   the stalk's sway for free). The slim centre stalks stay bare. */
+#bamboo-mid .bamboo-stalk::before,
+#bamboo-mid .bamboo-stalk::after {
+    content: '';
+    position: absolute;
+    width: 24px;
+    height: 11px;
+    border-radius: 0 100% 0 100%;
+    background: oklch(0.5 0.1 145 / 0.32);
+}
+
+#bamboo-mid .mid-1::before { top: 31%; left: 13px; transform: rotate(20deg); }
+#bamboo-mid .mid-1::after { top: 55%; left: -26px; transform: rotate(-158deg); width: 20px; height: 9px; }
+#bamboo-mid .mid-3::before { top: 26%; left: -27px; transform: rotate(-156deg); }
+#bamboo-mid .mid-3::after { top: 49%; left: 15px; transform: rotate(24deg); width: 21px; height: 10px; }
+#bamboo-mid .mid-2::before,
+#bamboo-mid .mid-2::after,
+#bamboo-mid .mid-4::before,
+#bamboo-mid .mid-4::after {
+    display: none;
+}
+
+.bg-nature.depth-mid #bamboo-mid .bamboo-stalk { filter: blur(3px); }
+.bg-nature.depth-deep #bamboo-mid .bamboo-stalk { filter: blur(4px); }
+
+@keyframes bambooSwayHalf {
+    0%, 100% { transform: rotate(0); }
+    50% { transform: rotate(calc(var(--sway, 1.2deg) * 0.5)); }
+}
+
+/* (b) Near bamboo layer: sharp stalks with nodes and leaves, gentle sway */
+#bamboo-near {
+    position: absolute;
+    inset: 0;
+    will-change: transform;
+}
+
+#bamboo-near .bamboo-stalk {
+    position: absolute;
+    top: -40%;
+    height: 200%;
+    border-radius: 999px;
+    /* Vertical sheen over the culm gradient: reads as light from the
+       canopy catching the rounded stalk instead of a flat strip. */
+    background:
+        linear-gradient(90deg, transparent 12%, oklch(0.64 0.08 145 / 0.22) 36%, transparent 64%),
+        linear-gradient(180deg, oklch(0.42 0.075 145 / 0.6), oklch(0.27 0.05 140 / 0.3));
+    transform-origin: bottom center;
+    animation: bambooSway 10s ease-in-out infinite;
+}
+
+#bamboo-near .near-1 { left: 4.5%; width: 15px; animation-duration: 9.2s; }
+#bamboo-near .near-2 { right: 7%; width: 13px; animation-duration: 11s; animation-delay: -3.5s; }
+#bamboo-near .near-3 { left: 10%; width: 10px; animation-duration: 12.5s; animation-delay: -6s; opacity: 0.75; }
+
+#bamboo-near .bamboo-node {
+    position: absolute;
+    left: -1px;
+    right: -1px;
+    height: 3px;
+    border-radius: 2px;
+    background: oklch(0.52 0.085 145 / 0.6);
+}
+
+#bamboo-near .node-1 { top: 28%; }
+#bamboo-near .node-2 { top: 48%; }
+#bamboo-near .node-3 { top: 68%; }
+
+#bamboo-near .bamboo-leaf {
+    position: absolute;
+    width: 26px;
+    height: 12px;
+    border-radius: 0 100% 0 100%;
+    background: oklch(0.55 0.11 145 / 0.4);
+}
+
+#bamboo-near .near-1 .leaf-1 { top: 27.5%; left: 12px; transform: rotate(18deg); }
+#bamboo-near .near-1 .leaf-2 { top: 47.5%; left: -28px; transform: rotate(-160deg); width: 22px; height: 10px; }
+#bamboo-near .near-2 .leaf-1 { top: 44%; left: -26px; transform: rotate(-155deg); }
+#bamboo-near .near-2 .leaf-2 { top: 61%; left: 11px; transform: rotate(21deg); width: 20px; height: 9px; }
+#bamboo-near .near-3 .leaf-1 { top: 33%; left: 8px; transform: rotate(24deg); width: 18px; height: 9px; }
+
+@keyframes bambooSway {
+    0%, 100% { transform: rotate(0); }
+    50% { transform: rotate(var(--sway, 1.2deg)); }
+}
+
+/* (d) Falling leaves: outer element falls + rotates, inner leaf sways */
+.fall-leaf {
+    position: absolute;
+    top: 0;
+    animation: leafFall 17s linear infinite;
+    opacity: 0;
+}
+
+.fall-leaf i {
+    display: block;
+    width: 10px;
+    height: 14px;
+    border-radius: 0 70% 0 70%;
+    background: oklch(0.68 0.13 150 / 0.55);
+    animation: leafSway 3.2s ease-in-out infinite;
+}
+
+.fall-leaf:nth-child(even) i {
+    background: oklch(0.62 0.14 45 / 0.55);
+}
+
+.fall-leaf-1 { left: 6%;  animation-duration: 15s;  animation-delay: -2s; }
+.fall-leaf-2 { left: 16%; animation-duration: 19s;  animation-delay: -9s; }
+.fall-leaf-2 i { animation-duration: 2.7s; background: oklch(0.62 0.14 45 / 0.6); }
+.fall-leaf-3 { left: 28%; animation-duration: 14s;  animation-delay: -5s; }
+.fall-leaf-3 i { background: oklch(0.68 0.13 150 / 0.5); }
+.fall-leaf-4 { left: 41%; animation-duration: 21s;  animation-delay: -13s; }
+.fall-leaf-4 i { animation-duration: 4s; }
+.fall-leaf-5 { left: 55%; animation-duration: 16s;  animation-delay: -7s; }
+.fall-leaf-5 i { background: oklch(0.68 0.13 150 / 0.6); }
+.fall-leaf-6 { left: 68%; animation-duration: 20s;  animation-delay: -16s; }
+.fall-leaf-6 i { animation-duration: 3.6s; background: oklch(0.62 0.14 45 / 0.5); }
+.fall-leaf-7 { left: 81%; animation-duration: 14.5s; animation-delay: -3s; }
+.fall-leaf-7 i { animation-duration: 2.9s; }
+.fall-leaf-8 { left: 92%; animation-duration: 18s;  animation-delay: -11s; }
+
+@keyframes leafFall {
+    0% { transform: translateY(-40px) rotate(0); opacity: 0; }
+    8% { opacity: 0.65; }
+    92% { opacity: 0.5; }
+    100% { transform: translateY(110vh) translateX(120px) rotate(280deg); opacity: 0; }
+}
+
+@keyframes leafSway {
+    0%, 100% { margin-left: 0; }
+    50% { margin-left: var(--leaf-drift, 26px); }
+}
+
+/* Scroll journey: JS drives the opacity of these two groups so the page
+   travels from sunlit canopy (top) into misty dusk (bottom). Static
+   defaults below keep the scene balanced without JS. */
+.bg-depth-day,
+.bg-depth-dusk {
+    position: absolute;
+    inset: 0;
+}
+
+.bg-depth-dusk {
+    opacity: 0.6;
+}
+
+/* Dusk tint: darkens and warms the whole scene as you descend */
+.bg-dusk-tint {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    background: linear-gradient(180deg,
+        oklch(0.10 0.03 145 / 0.15) 0%,
+        oklch(0.12 0.045 142 / 0.5) 65%,
+        oklch(0.16 0.07 55 / 0.35) 100%);
+}
+
+/* God rays: soft light shafts falling through the canopy */
+.bg-godrays {
+    position: absolute;
+    top: -10%;
+    left: 0;
+    right: 0;
+    height: 75%;
+}
+
+.godray {
+    position: absolute;
+    top: 0;
+    height: 115%;
+    background: linear-gradient(180deg, oklch(0.85 0.06 130 / 0.10), transparent 78%);
+    filter: blur(10px);
+    transform: rotate(14deg);
+    transform-origin: top center;
+    animation: rayShimmer 9s ease-in-out infinite alternate;
+}
+
+.godray-1 { left: 16%; width: 120px; animation-duration: 8s; }
+.godray-2 { left: 33%; width: 70px; animation-delay: -3s; background: linear-gradient(180deg, oklch(0.85 0.06 130 / 0.07), transparent 78%); }
+.godray-3 { left: 56%; width: 140px; animation-duration: 13s; animation-delay: -6s; background: linear-gradient(180deg, oklch(0.85 0.05 110 / 0.08), transparent 75%); }
+
+@keyframes rayShimmer {
+    0% { opacity: 0.45; }
+    100% { opacity: 1; }
+}
+
+/* (e) Canopy: dark vignette at the top plus hanging leaf arcs */
+.bg-canopy {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 150px;
+    background:
+        radial-gradient(ellipse 70% 100% at 30% 0%, oklch(0.14 0.03 145 / 0.55), transparent 70%),
+        radial-gradient(ellipse 60% 90% at 80% 0%, oklch(0.14 0.03 145 / 0.45), transparent 70%);
+}
+
+.canopy-arc {
+    position: absolute;
+    border-radius: 0 0 100% 100%;
+    background: oklch(0.32 0.06 145 / 0.45);
+}
+
+.canopy-arc-1 { top: -3px; left: 12%; width: 52px; height: 16px; transform: rotate(-6deg); background: oklch(0.30 0.06 145 / 0.5); }
+.canopy-arc-2 { top: -2px; left: 34%; width: 38px; height: 12px; transform: rotate(4deg); background: oklch(0.34 0.06 145 / 0.35); }
+.canopy-arc-3 { top: -4px; left: 61%; width: 46px; height: 14px; transform: rotate(-3deg); }
+.canopy-arc-4 { top: -2px; left: 84%; width: 30px; height: 10px; transform: rotate(7deg); background: oklch(0.33 0.06 145 / 0.4); }
+
+/* (f) Undergrowth: grass blades in the lower corners. Each blade carries a
+   shorter companion blade (::before) so the corners read as small tufts. */
+.bg-grass {
+    position: absolute;
+    bottom: -4px;
+    transform-origin: bottom;
+}
+
+.bg-grass::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    width: 72%;
+    height: 55%;
+    border-radius: inherit;
+    background: inherit;
+    opacity: 0.7;
+    transform-origin: bottom;
+}
+
+.bg-grass-1::before { left: -5px; transform: rotate(-13deg); }
+.bg-grass-2::before { left: 4px; transform: rotate(11deg); }
+.bg-grass-3::before { right: -5px; transform: rotate(12deg); }
+.bg-grass-4::before { right: 4px; transform: rotate(-9deg); }
+
+.bg-grass-1 { left: 1.5%; width: 6px; height: 52px; border-radius: 100% 0 0 0; background: oklch(0.38 0.07 145 / 0.4); transform: rotate(-9deg); }
+.bg-grass-2 { left: 3.2%; width: 5px; height: 38px; border-radius: 100% 0 0 0; background: oklch(0.35 0.07 145 / 0.3); transform: rotate(-12deg); }
+.bg-grass-3 { right: 2%; width: 6px; height: 56px; border-radius: 0 100% 0 0; background: oklch(0.4 0.07 145 / 0.4); transform: rotate(8deg); }
+.bg-grass-4 { right: 3.8%; width: 5px; height: 40px; border-radius: 0 100% 0 0; background: oklch(0.36 0.07 145 / 0.32); transform: rotate(11deg); }
+
+/* (g) Ground mist: soft drifting ellipses at the bottom edge */
+.bg-mist {
+    position: absolute;
+    bottom: -40px;
+    height: 130px;
+    filter: blur(19px);
+    will-change: transform;
+}
+
+.bg-mist-1 {
+    left: -6%;
+    width: 75%;
+    background: radial-gradient(ellipse, oklch(0.85 0.03 145 / 0.07), transparent 70%);
+    animation: mistDrift 22s ease-in-out infinite alternate;
+}
+
+.bg-mist-2 {
+    right: -6%;
+    width: 70%;
+    background: radial-gradient(ellipse, oklch(0.85 0.03 145 / 0.06), transparent 70%);
+    animation: mistDrift 27s ease-in-out infinite alternate-reverse;
+}
+
+@keyframes mistDrift {
+    0% { transform: translateX(-8%); }
+    100% { transform: translateX(8%); }
+}
+
+/* (h) Breathing horizon glow */
+.bg-horizon {
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(ellipse 60% 100% at 50% 100%, oklch(0.62 0.14 45 / 0.14), transparent 70%);
+    animation: horizonBreathe 10s ease-in-out infinite;
+}
+
+@keyframes horizonBreathe {
+    0%, 100% { opacity: 0.5; }
+    50% { opacity: 0.85; }
+}
+
+/* Theme switch to light: the horizon flares up once like a sunrise */
+.bg-nature.sunrise .bg-horizon {
+    animation:
+        horizonBreathe 10s ease-in-out infinite,
+        sunriseFlash 1.6s ease-out;
+}
+
+@keyframes sunriseFlash {
+    0% { opacity: 0.5; }
+    30% { opacity: 1; }
+    100% { opacity: 0.5; }
+}
+
+/* (i) Fireflies: the wrapper holds the base position and is what the JS
+   pushes away from the cursor; the inner dot pulses (transform) and
+   wanders (translate) independently. */
+.firefly-wrap {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+}
+
+.firefly {
+    display: block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: oklch(0.68 0.13 150);
+    box-shadow: 0 0 8px oklch(0.68 0.13 150);
+    animation:
+        fireflyPulse 3.8s ease-in-out infinite,
+        fireflyWander 21s ease-in-out infinite alternate;
+}
+
+.fw-2 .firefly,
+.fw-4 .firefly,
+.fw-6 .firefly {
+    width: 3px;
+    height: 3px;
+    background: oklch(0.62 0.14 45);
+    box-shadow: 0 0 8px oklch(0.62 0.14 45);
+}
+
+.fw-1 { top: 32%; left: 12%; }
+.fw-2 { top: 58%; left: 22%; }
+.fw-3 { top: 44%; left: 46%; }
+.fw-4 { top: 70%; left: 64%; }
+.fw-5 { top: 26%; left: 78%; }
+.fw-6 { top: 62%; left: 90%; }
+
+.fw-1 .firefly { animation-delay: -0.4s, -4s; }
+.fw-2 .firefly { animation-duration: 4.4s, 26s; animation-delay: -2.1s, -11s; }
+.fw-3 .firefly { animation-duration: 3.4s, 18s; animation-delay: -1.2s, -7s; }
+.fw-4 .firefly { animation-duration: 4.1s, 29s; animation-delay: -3s, -19s; }
+.fw-5 .firefly { animation-duration: 3.6s, 23s; animation-delay: -1.8s, -14s; }
+.fw-6 .firefly { animation-duration: 4.2s, 17s; animation-delay: -0.9s, -2s; }
+
+/* One firefly greets you when a new section scrolls into view */
+.firefly-wrap.firefly-hello {
+    animation: fireflyHello 1.2s ease-out;
+}
+
+@keyframes fireflyHello {
+    0%, 100% { transform: scale(1); filter: brightness(1); }
+    35% { transform: scale(2.4); filter: brightness(1.7); }
+}
+
+@keyframes fireflyPulse {
+    0%, 100% { opacity: 0.2; transform: scale(1); }
+    50% { opacity: 0.9; transform: scale(1.35); }
+}
+
+@keyframes fireflyWander {
+    0% { translate: 0 0; }
+    25% { translate: 38px -26px; }
+    50% { translate: -20px 16px; }
+    75% { translate: 26px 30px; }
+    100% { translate: -14px -18px; }
+}
+
+/* Day/night: fireflies belong to the dark theme. By daylight the same six
+   spots are visited by small butterflies instead — the wrapper (and with it
+   the cursor-shy push and the section greeting) is shared, only the inner
+   dot is redressed. Only animation-name is swapped so the per-firefly
+   duration/delay variety above keeps applying to the butterflies. */
+html.theme-light .firefly {
+    position: relative;
+    width: 2px;
+    height: 9px;
+    border-radius: 1px;
+    background: oklch(0.35 0.05 140 / 0.8);
+    box-shadow: none;
+    opacity: 0.85;
+    animation-name: butterflyBob, fireflyWander;
+}
+
+html.theme-light .firefly::before,
+html.theme-light .firefly::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    width: 7px;
+    height: 10px;
+    background: oklch(0.62 0.14 45 / 0.7);
+    animation: wingFlap 0.5s ease-in-out infinite alternate;
+}
+
+html.theme-light .firefly::before {
+    left: -6px;
+    border-radius: 90% 10% 60% 40%;
+    transform-origin: 100% 55%;
+}
+
+html.theme-light .firefly::after {
+    right: -6px;
+    border-radius: 10% 90% 40% 60%;
+    transform-origin: 0% 55%;
+    animation-name: wingFlapR;
+}
+
+/* Every other butterfly wears the sage of the canopy and flaps lazier */
+html.theme-light .fw-2 .firefly::before,
+html.theme-light .fw-2 .firefly::after,
+html.theme-light .fw-4 .firefly::before,
+html.theme-light .fw-4 .firefly::after,
+html.theme-light .fw-6 .firefly::before,
+html.theme-light .fw-6 .firefly::after {
+    background: oklch(0.52 0.12 150 / 0.55);
+    animation-duration: 0.62s;
+}
+
+@keyframes butterflyBob {
+    0%, 100% { transform: translateY(0) rotate(-4deg); }
+    50% { transform: translateY(-8px) rotate(5deg); }
+}
+
+@keyframes wingFlap {
+    from { transform: scaleX(1) rotate(-6deg); }
+    to { transform: scaleX(0.3) rotate(8deg); }
+}
+
+@keyframes wingFlapR {
+    from { transform: scaleX(1) rotate(6deg); }
+    to { transform: scaleX(0.3) rotate(-8deg); }
+}
+
+/* By day the dusk layer must not dim the butterflies with scroll depth
+   (the JS crossfade keeps writing inline opacity for the dark theme), and
+   the warm horizon glow steps back so it reads as haze, not dusk. */
+html.theme-light .bg-depth-dusk {
+    opacity: 1 !important;
+}
+
+html.theme-light .bg-horizon {
+    background: radial-gradient(ellipse 60% 100% at 50% 100%, oklch(0.8 0.08 60 / 0.1), transparent 70%);
+}
+
+/* (j) Wandering light sweep */
+.bg-light-sweep {
+    position: absolute;
+    top: -30%;
+    left: -30%;
+    width: 160%;
+    height: 160%;
+    background: linear-gradient(115deg, transparent 42%, oklch(0.68 0.13 150 / 0.05) 50%, transparent 58%);
+    animation: lightSweep 26s ease-in-out infinite alternate;
+    will-change: transform;
+}
+
+@keyframes lightSweep {
+    0% { transform: translate(-20%, -20%) rotate(8deg); }
+    100% { transform: translate(20%, 20%) rotate(8deg); }
+}
+
+/* (j2) Corner vignette: pulls the eye toward the content and grounds the
+   scene — the forest darkens gently toward the edges like real depth. */
+.bg-nature::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: radial-gradient(ellipse 120% 90% at 50% 38%, transparent 55%, oklch(0.10 0.025 142 / 0.4) 100%);
+}
+
+html.theme-light .bg-nature::after {
+    background: radial-gradient(ellipse 120% 90% at 50% 38%, transparent 62%, oklch(0.78 0.03 120 / 0.3) 100%);
+}
+
+/* (k) Film grain (SVG feTurbulence, no external assets) */
+.bg-grain {
+    position: absolute;
+    inset: 0;
+    opacity: 0.05;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    background-size: 160px 160px;
+}
+
+@media (max-width: 768px) {
+    /* Half the leaves, no god rays / light sweep / extra stalks: the scene
+       stays recognisable while the animation count roughly halves. */
+    .fall-leaf-5,
+    .fall-leaf-6,
+    .fall-leaf-7,
+    .fall-leaf-8,
+    .bg-godrays,
+    .bg-light-sweep,
+    #bamboo-mid,
+    #bamboo-far .far-4,
+    #bamboo-far .far-5,
+    #bamboo-far .far-6,
+    #bamboo-far .far-7,
+    #bamboo-near .near-3 {
+        display: none;
+    }
+}
+
+/* --- UI/UX cohesion pass -------------------------------------------------
+   Shared rhythm and interaction rules for the landing page. Component-specific
+   responsive refinements are repeated at the end of the cascade. */
+html {
+    scroll-padding-top: 96px;
+}
+
+body {
+    text-rendering: optimizeLegibility;
+}
+
+.footer-disclaimer {
+    color: oklch(0.72 0.015 90);
+}
+
+html.theme-light .footer-disclaimer {
+    color: var(--text-muted);
+}
+
+.logo-area {
+    text-decoration: none;
+    border-radius: 12px;
+}
+
+.logo-area:focus-visible,
+.nav-links a:focus-visible,
+.theme-toggle:focus-visible,
+.lang-dropdown:focus-visible,
+.hamburger:focus-visible,
+.btn:focus-visible,
+.faq-item summary:focus-visible {
+    outline: 3px solid var(--accent);
+    outline-offset: 4px;
+}
+
+.nav-links a {
+    position: relative;
+    padding: 0.55rem 0;
+}
+
+.nav-links a::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0.25rem;
+    left: 0;
+    height: 2px;
+    border-radius: 999px;
+    background: var(--accent);
+    transform: scaleX(0);
+    transform-origin: right;
+    transition: transform 0.25s ease;
+}
+
+.nav-links a:hover::after,
+.nav-links a:focus-visible::after {
+    transform: scaleX(1);
+    transform-origin: left;
+}
+
+.hero-text {
+    max-width: 42rem;
+}
+
+.hero-text h1 {
+    text-wrap: balance;
+}
+
+.hero-subtitle,
+.section-subtitle,
+.use-cases-subtitle {
+    text-wrap: pretty;
+}
+
+.cta-group {
+    align-items: stretch;
+}
+
+.cta-group .btn {
+    min-height: 48px;
+    box-sizing: border-box;
+}
+
+.cta-trust {
+    max-width: 44rem;
+    line-height: 1.55;
+}
+
+section[id] {
+    scroll-margin-top: 96px;
+}
+
+.section-title,
+#how-it-works h2,
+#self-hosting h2,
+#faq h2 {
+    text-wrap: balance;
+    letter-spacing: -0.035em;
+}
+
+.use-case-card,
+.feature-card,
+.faq-item,
+.comparison-table-wrapper {
+    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.12);
+}
+
+html.theme-light :is(.use-case-card, .feature-card, .faq-item, .comparison-table-wrapper) {
+    box-shadow: 0 18px 46px oklch(0.22 0.035 140 / 0.09);
+}
+
+.use-case-card,
+.feature-card {
+    height: 100%;
+}
+
+.use-case-card p,
+.feature-card p,
+.faq-item p {
+    line-height: 1.7;
+}
+
+.faq-item summary {
+    min-height: 52px;
+    display: flex;
+    align-items: center;
+}
+
+.comparison-table tbody tr {
+    transition: background-color 0.2s ease;
+}
+
+@media (max-width: 768px) {
+    html {
+        scroll-padding-top: 76px;
+    }
+
+    .container {
+        padding-inline: 1.15rem;
+    }
+
+    section {
+        padding-block: 4.25rem;
+    }
+
+    .hero-text {
+        max-width: none;
+    }
+
+    .hero-text h1,
+    .section-title,
+    #how-it-works h2,
+    #self-hosting h2,
+    #faq h2 {
+        font-size: clamp(2rem, 9vw, 2.65rem) !important;
+    }
+
+    .cta-group {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        width: 100%;
+    }
+
+    .cta-group .btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .cta-group .btn-primary,
+    .cta-group .btn-firefox {
+        grid-column: span 1;
+    }
+
+    .hero-github-cta,
+    .btn-demo-mobile {
+        grid-column: span 1;
+    }
+
+    .use-case-card,
+    .feature-card,
+    .faq-item,
+    .comparison-table-wrapper {
+        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
+    }
+}
+
+@media (max-width: 430px) {
+    .cta-group {
+        grid-template-columns: 1fr;
+    }
+
+    .cta-group .btn-primary,
+    .cta-group .btn-firefox,
+    .hero-github-cta,
+    .btn-demo-mobile {
+        grid-column: 1;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .nav-links a::after,
+    .use-case-card,
+    .feature-card,
+    .faq-item,
+    .btn {
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* (l) Click confetti: a small handful of eucalyptus leaves bursts from
+   wherever the visitor presses (spawned by app.js). Built like the falling
+   leaves above — the outer span owns the flight path (fast burst that
+   brakes at its peak, then sinks), the inner leaf rocks around its stem
+   the whole way down. Deliberately subtle: few, tiny, short-lived. */
+.click-leaf {
+    position: fixed;
+    z-index: 3000;
+    margin: -6px 0 0 -4px;
+    pointer-events: none;
+    opacity: 0;
+    animation: leafBurst var(--leaf-dur, 1.1s) forwards;
+    will-change: transform, opacity;
+}
+
+.click-leaf i {
+    display: block;
+    width: 8px;
+    height: 12px;
+    border-radius: 0 70% 0 70%;
+    background: linear-gradient(135deg, oklch(0.62 0.12 150 / 0.95), oklch(0.45 0.09 145 / 0.85));
+    transform: rotate(var(--leaf-rot, 0deg));
+    animation: leafRock var(--flutter-dur, 0.6s) ease-in-out infinite alternate;
+}
+
+.click-leaf-sage i {
+    background: linear-gradient(135deg, oklch(0.72 0.09 140 / 0.9), oklch(0.55 0.08 145 / 0.8));
+}
+
+.click-leaf-amber i {
+    background: linear-gradient(135deg, oklch(0.68 0.14 55 / 0.95), oklch(0.55 0.13 40 / 0.85));
+}
+
+/* Two-phase flight: --leaf-x/--leaf-y is the burst PEAK; from there each
+   leaf loses momentum and sinks past it while fading. Per-segment timing
+   functions give the fast pop and the gentle fall. */
+@keyframes leafBurst {
+    0% {
+        opacity: 0;
+        transform: translate(0, 0) scale(var(--leaf-scale, 1));
+        animation-timing-function: cubic-bezier(0.16, 0.84, 0.44, 1);
+    }
+    10% { opacity: 1; }
+    45% {
+        opacity: 1;
+        transform: translate(var(--leaf-x, 0), var(--leaf-y, -20px)) scale(var(--leaf-scale, 1));
+        animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
+    }
+    100% {
+        opacity: 0;
+        transform: translate(calc(var(--leaf-x, 0) * 1.4), calc(var(--leaf-y, -20px) + 44px)) scale(calc(var(--leaf-scale, 1) * 0.92));
+    }
+}
+
+@keyframes leafRock {
+    from { transform: rotate(calc(var(--leaf-rot, 0deg) - 24deg)); }
+    to { transform: rotate(calc(var(--leaf-rot, 0deg) + 24deg)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .click-leaf { display: none; }
+    .bg-nature *,
+    .bg-nature *::before,
+    .bg-nature *::after {
+        animation: none !important;
+    }
+    .fall-leaf { opacity: 0; }
+}
+
+/* --- Layout --- */
+.container {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0 2rem;
+}
+
+section {
+    padding: 6rem 0;
+}
+
+#how-it-works {
+    padding: 4.5rem 0;
+}
+
+/* Content-visibility for offscreen sections to improve INP */
+.use-cases-section,
+#self-hosting,
+.comparison-section {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 1400px;
+}
+
+/* --- Navigation --- */
+nav {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+    background: var(--glass);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--glass-border);
+    padding: 1rem 0;
+    transition: padding 0.3s ease, background 0.3s ease;
+}
+
+nav.nav-scrolled {
+    padding: 0.75rem 0;
+    background: oklch(0.20 0.025 140 / 0.9);
+}
+
+html.theme-light nav.nav-scrolled {
+    background: oklch(0.95 0.01 100 / 0.92);
+}
+
+.nav-content {
+    display: flex;
+    align-items: center;
+}
+
+.logo-area {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-weight: 800;
+    font-size: 1.5rem;
+    letter-spacing: -0.5px;
+}
+
+/* Logo can be a plain <a>; without this it falls back to the UA link blue,
+   which clashed silently with the old indigo theme and visibly with green. */
+a.logo-area {
+    color: var(--text);
+}
+
+.logo-area picture {
+    display: contents;
+}
+
+.logo-area img {
+    height: 64px;
+    width: 64px;
+    object-fit: contain;
+    border-radius: 8px;
+    margin: -4px 0;
+}
+
+.nav-ext-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    background: oklch(0.68 0.13 150 / 0.15);
+    border: 1px solid oklch(0.68 0.13 150 / 0.3);
+    color: oklch(0.68 0.13 150);
+    border-radius: 12px;
+    font-size: 0.55rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.1);
+    animation: fade-in 0.4s ease-out;
+    margin-left: 0.2rem;
+}
+
+@keyframes fade-in {
+    from { opacity: 0; transform: translateY(-5px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.nav-links {
+    display: flex;
+    gap: 2rem;
+    margin-left: auto;
+}
+
+.nav-links a {
+    color: var(--text-muted);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s;
+}
+
+.nav-links a:hover {
+    color: var(--accent);
+}
+
+.nav-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-left: 2rem;
+    flex-shrink: 0;
+}
+
+/* --- Theme Toggle (sun/moon) --- */
+.theme-toggle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 10px;
+    color: var(--text-muted);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: color 0.3s, transform 0.3s;
+    overflow: hidden;
+}
+
+.theme-toggle:hover {
+    color: var(--accent);
+    transform: scale(1.15);
+}
+
+.theme-toggle:active {
+    transform: scale(0.9);
+}
+
+.theme-toggle svg {
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
+}
+
+/* Default (Dark mode): Sun visible, Moon hidden & rotated */
+.theme-toggle .theme-icon-sun {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+}
+
+.theme-toggle .theme-icon-moon {
+    opacity: 0;
+    transform: scale(0) rotate(-90deg);
+}
+
+/* Light mode: Moon visible, Sun hidden & rotated */
+html.theme-light .theme-toggle .theme-icon-sun {
+    opacity: 0;
+    transform: scale(0) rotate(90deg);
+}
+
+html.theme-light .theme-toggle .theme-icon-moon {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+}
+
+/* --- Light Theme --- */
+html.theme-light {
+    --accent-green: oklch(0.52 0.12 150);
+    --accent-green-hover: oklch(0.58 0.12 150);
+    --text-on-green: #ffffff;
+    --bg: oklch(0.95 0.01 100);
+    --card: #ffffff;
+    --accent: var(--accent-green);
+    --accent-glow: oklch(0.52 0.12 150 / 0.25);
+    --text: oklch(0.20 0.025 140);
+    --text-muted: oklch(0.45 0.02 110);
+    --glass: rgba(255, 255, 255, 0.7);
+    --glass-border: oklch(0.20 0.025 140 / 0.08);
+    --section-tint: transparent;
+    --section-tint-strong: oklch(0.88 0.015 90 / 0.5);
+    --card-surface: rgba(255, 255, 255, 0.75);
+    --card-border: oklch(0.20 0.025 140 / 0.08);
+    color-scheme: light;
+}
+
+html.theme-light .bg-nature {
+    background:
+        radial-gradient(circle at 16% 10%, oklch(0.85 0.06 150 / 0.3), transparent 34rem),
+        radial-gradient(circle at 78% 68%, oklch(0.85 0.06 60 / 0.2), transparent 38rem),
+        linear-gradient(180deg, oklch(0.96 0.01 90) 0%, oklch(0.93 0.025 140) 46%, oklch(0.96 0.01 90) 100%);
+}
+
+html.theme-light .bg-canopy,
+html.theme-light .canopy-arc,
+html.theme-light .bg-grass {
+    opacity: 0.45;
+}
+
+/* By day the stalks get their own fresh-green recipes — the dark-theme
+   gradients faded to 45% read as grey smears on the light backdrop and
+   stopped looking like bamboo at all. */
+html.theme-light #bamboo-far .bamboo-stalk {
+    opacity: 0.55;
+    background:
+        repeating-linear-gradient(180deg,
+            transparent 0, transparent 108px,
+            oklch(0.55 0.09 145 / 0.4) 108px, oklch(0.55 0.09 145 / 0.4) 112px),
+        linear-gradient(180deg, oklch(0.68 0.11 145 / 0.6), oklch(0.62 0.09 140 / 0.35));
+}
+
+html.theme-light #bamboo-far::before,
+html.theme-light #bamboo-far::after {
+    background: linear-gradient(180deg, oklch(0.7 0.1 145 / 0.5), oklch(0.64 0.08 140 / 0.25));
+}
+
+html.theme-light #bamboo-mid .bamboo-stalk {
+    opacity: 0.65;
+    background:
+        repeating-linear-gradient(180deg,
+            transparent 0, transparent 84px,
+            oklch(0.5 0.1 145 / 0.45) 84px, oklch(0.5 0.1 145 / 0.45) 87px),
+        linear-gradient(90deg, transparent 14%, oklch(0.85 0.08 130 / 0.35) 38%, transparent 68%),
+        linear-gradient(180deg, oklch(0.63 0.115 145 / 0.65), oklch(0.57 0.09 140 / 0.4));
+}
+
+html.theme-light #bamboo-mid .bamboo-stalk::before,
+html.theme-light #bamboo-mid .bamboo-stalk::after {
+    background: oklch(0.55 0.13 145 / 0.5);
+}
+
+html.theme-light #bamboo-near .bamboo-stalk {
+    opacity: 0.75;
+    background:
+        linear-gradient(90deg, transparent 12%, oklch(0.88 0.07 130 / 0.4) 36%, transparent 64%),
+        linear-gradient(180deg, oklch(0.59 0.12 145 / 0.75), oklch(0.52 0.1 140 / 0.5));
+}
+
+html.theme-light #bamboo-near .bamboo-node {
+    background: oklch(0.45 0.1 145 / 0.65);
+}
+
+html.theme-light #bamboo-near .bamboo-leaf {
+    background: oklch(0.55 0.13 145 / 0.6);
+}
+
+/* The centre trunks stay whisper-quiet by daylight too */
+html.theme-light #bamboo-far .far-6,
+html.theme-light #bamboo-far .far-7 {
+    opacity: 0.26;
+}
+
+html.theme-light .bg-mist {
+    display: none;
+}
+
+html.theme-light .bg-dusk-tint {
+    display: none;
+}
+
+html.theme-light .godray {
+    filter: blur(12px);
+    opacity: 0.5;
+}
+
+html.theme-light .bg-grain {
+    opacity: 0.035;
+}
+
+html.theme-light .feature-card,
+html.theme-light .faq-item {
+    background: var(--card-surface);
+    border-color: var(--card-border);
+    box-shadow: 0 8px 24px oklch(0.20 0.025 140 / 0.06);
+}
+
+html.theme-light .feature-card::before {
+    background: linear-gradient(to bottom right, oklch(0.20 0.025 140 / 0.08), transparent);
+}
+
+html.theme-light .use-case-card {
+    background: var(--card-surface);
+}
+
+html.theme-light .use-case-card h3 {
+    color: var(--text);
+}
+
+html.theme-light .use-case-card:hover {
+    box-shadow: 0 12px 30px oklch(0.20 0.025 140 / 0.12);
+    border-color: oklch(0.20 0.025 140 / 0.15);
+}
+
+html.theme-light .faq-item[open] {
+    background: #ffffff;
+}
+
+html.theme-light .faq-item p {
+    border-top-color: oklch(0.20 0.025 140 / 0.08);
+}
+
+html.theme-light .btn-secondary {
+    background: #ffffff;
+    border-color: oklch(0.20 0.025 140 / 0.12);
+}
+
+html.theme-light .btn-secondary:hover {
+    background: oklch(0.88 0.015 90);
+}
+
+html.theme-light .btn-firefox {
+    background: oklch(0.62 0.14 45);
+    color: #ffffff;
+    box-shadow: 0 10px 18px oklch(0.62 0.14 45 / 0.24);
+}
+
+html.theme-light .btn-firefox:hover {
+    background: oklch(0.55 0.13 45);
+    box-shadow: 0 18px 26px oklch(0.62 0.14 45 / 0.28);
+}
+
+html.theme-light .btn-firefox img {
+    filter: brightness(0) saturate(100%) invert(13%) sepia(38%) saturate(1084%) hue-rotate(177deg) brightness(89%) contrast(96%);
+}
+
+html.theme-light .btn-firefox-secondary img {
+    filter: brightness(0) saturate(100%) invert(13%) sepia(38%) saturate(1084%) hue-rotate(177deg) brightness(89%) contrast(96%);
+}
+
+html.theme-light .comparison-section {
+    background: transparent;
+}
+
+html.theme-light .comparison-table-wrapper {
+    background: rgba(255, 255, 255, 0.75);
+    box-shadow: 0 10px 30px oklch(0.20 0.025 140 / 0.08);
+}
+
+html.theme-light .comparison-table th {
+    background: oklch(0.20 0.025 140 / 0.06);
+    color: var(--text);
+}
+
+html.theme-light .comparison-table th,
+html.theme-light .comparison-table td {
+    border-bottom-color: oklch(0.20 0.025 140 / 0.08);
+}
+
+html.theme-light .comparison-table tbody tr:hover {
+    background: oklch(0.20 0.025 140 / 0.03);
+}
+
+html.theme-light .feat-name strong {
+    color: var(--text);
+}
+
+html.theme-light .table-footnotes {
+    background: oklch(0.20 0.025 140 / 0.04);
+    border-top-color: oklch(0.20 0.025 140 / 0.06);
+}
+
+@media (max-width: 900px) {
+    html.theme-light .comparison-table tbody tr {
+        background: rgba(255, 255, 255, 0.85);
+        box-shadow: 0 6px 18px oklch(0.20 0.025 140 / 0.08);
+    }
+    html.theme-light .comparison-table td.feat-name {
+        background: oklch(0.20 0.025 140 / 0.05);
+    }
+    html.theme-light .comparison-table td {
+        border-bottom-color: oklch(0.20 0.025 140 / 0.08);
+    }
+}
+
+html.theme-light .compat-logo img,
+html.theme-light .compat-logo {
+    filter: none;
+}
+
+/* --- Hero Section --- */
+.hero {
+    min-height: 100vh;
+    display: flex;
+    align-items: flex-start;
+    padding-top: clamp(8rem, 12vh, 10rem);
+    padding-bottom: clamp(2rem, 5vh, 4rem);
+}
+
+.hero-grid {
+    display: grid;
+    /* Single column until the interactive demo appears (1024px). Below that the
+       headline gets the full width and the install CTAs stay prominent while the
+       demo stacks underneath, matching the demo's own 1024px breakpoint. */
+    grid-template-columns: minmax(0, 1fr);
+    align-content: center;
+    /* Keep the whole hero vertically centered. Do not use grid alignment to fix
+       the demo top edge; that moves the headline and breaks the hero balance. */
+    align-items: center;
+    gap: 3rem;
+    text-align: left;
+    width: 100%;
+    min-height: calc(100svh - 12.5rem);
+}
+
+@media (min-width: 1024px) {
+    .container {
+        max-width: 1200px;
+    }
+    .hero-grid {
+        grid-template-columns: 1.35fr 1fr;
+        gap: 3.5rem;
+    }
+    .cta-group {
+        gap: 0.75rem;
+    }
+    .cta-group .btn {
+        padding: 0.8rem 1.35rem;
+    }
+}
+
+.hero-text h1 {
+    font-size: clamp(2.9rem, 4.1vw, 4rem);
+    font-weight: 800;
+    line-height: 1.12;
+    margin-bottom: 1.4rem;
+    padding-bottom: 0.1em;
+    color: var(--text);
+    letter-spacing: -0.02em;
+}
+
+.hero-text h1 .hero-highlight {
+    background: linear-gradient(90deg, var(--accent-green), var(--accent-terracotta), var(--accent-green));
+    background-size: 300% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    white-space: nowrap;
+    animation: hero-gradient-pan 10s linear infinite;
+    /* background-clip: text only paints inside the layout box; with the
+       negative h1 letter-spacing the last glyph overhangs it and gets cut
+       off. Invisible padding extends the paint area without moving text. */
+    padding-right: 0.08em;
+    margin-right: -0.08em;
+}
+
+@keyframes hero-gradient-pan {
+    from { background-position: 0% 50%; }
+    to { background-position: 300% 50%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .hero-text h1 .hero-highlight {
+        animation: none;
+    }
+}
+
+.hero-text p, .hero-subtitle {
+    font-size: 1.25rem;
+    color: var(--text-muted);
+    margin-bottom: 1.9rem;
+    max-width: 600px;
+    font-weight: 400;
+    line-height: 1.6;
+}
+
+.hero-mascot-container {
+    position: relative;
+    display: block;
+    margin-bottom: -0.5rem;
+    margin-left: 2.2rem;
+}
+
+.hero-lookdown-mascot {
+    display: block;
+    width: 90px;
+    height: auto;
+}
+
+/* Changelog link as the koala's comic speech bubble. Absolutely positioned
+   so it never moves the koala out of its spot above the install buttons. */
+.koala-speech-bubble {
+    position: absolute;
+    left: 108px;
+    top: 0.2rem;
+    width: max-content;
+    max-width: min(240px, calc(100% - 120px));
+    display: block;
+    text-decoration: none;
+    text-align: left;
+    background: oklch(0.27 0.035 130 / 0.95);
+    border: 1px solid oklch(0.68 0.13 150 / 0.45);
+    border-radius: 14px;
+    border-bottom-left-radius: 4px;
+    padding: 0.6rem 0.9rem;
+    line-height: 1.35;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+    animation: bubble-float 4s ease-in-out infinite;
+    transition: border-color 0.25s ease, box-shadow 0.25s ease;
+}
+
+/* Tail: outline triangle + fill triangle so it reads as part of the bubble */
+.koala-speech-bubble::before,
+.koala-speech-bubble::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+}
+
+.koala-speech-bubble::before {
+    left: -11px;
+    bottom: 10px;
+    border-top: 8px solid transparent;
+    border-bottom: 4px solid transparent;
+    border-right: 11px solid oklch(0.68 0.13 150 / 0.45);
+}
+
+.koala-speech-bubble::after {
+    left: -9px;
+    bottom: 11px;
+    border-top: 7px solid transparent;
+    border-bottom: 3px solid transparent;
+    border-right: 10px solid oklch(0.27 0.035 130 / 0.95);
+}
+
+.koala-speech-bubble:hover {
+    border-color: oklch(0.68 0.13 150 / 0.85);
+    box-shadow: 0 8px 28px oklch(0.68 0.13 150 / 0.35);
+}
+
+.koala-speech-bubble .version-text-en,
+.koala-speech-bubble .version-text-de {
+    display: block;
+}
+
+.koala-speech-bubble .bubble-title {
+    display: block;
+    font-size: 0.85rem;
+    font-weight: 800;
+    color: var(--text);
+    letter-spacing: 0;
+    white-space: nowrap;
+}
+
+.koala-speech-bubble .bubble-sub {
+    display: block;
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--accent);
+    margin-top: 2px;
+}
+
+html.theme-light .koala-speech-bubble {
+    background: rgba(255, 255, 255, 0.96);
+    box-shadow: 0 8px 24px oklch(0.20 0.025 140 / 0.12);
+}
+
+html.theme-light .koala-speech-bubble::after {
+    border-right-color: rgba(255, 255, 255, 0.96);
+}
+
+@keyframes bubble-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-4px); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .koala-speech-bubble {
+        animation: none;
+    }
+}
+
+@media (max-width: 768px) {
+    /* The koala keeps standing on the active install CTA; app.js updates the
+       offset from the real button geometry when the row wraps. */
+    .hero-mascot-container {
+        --hero-mascot-offset: 0px;
+        margin-left: 0;
+        display: flex;
+        justify-content: center;
+    }
+    .hero-lookdown-mascot {
+        transform: translateX(var(--hero-mascot-offset));
+    }
+    .koala-speech-bubble {
+        left: calc(50% + var(--hero-mascot-offset) + 50px);
+        right: 0.75rem;
+        top: 0.3rem;
+        max-width: 240px;
+        padding: 0.5rem 0.75rem;
+    }
+    .koala-speech-bubble .bubble-title {
+        font-size: 0.8rem;
+    }
+    .koala-speech-bubble .bubble-sub {
+        font-size: 0.68rem;
+    }
+    /* The relative release time is too much text for the small mobile bubble */
+    .koala-speech-bubble .bubble-ago {
+        display: none;
+    }
+}
+
+.cta-group {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+/* Quiet trust line under the install buttons; answers "is it free, is it
+   legit, do I need an account" right at the moment of the click decision. */
+.hero-text .cta-trust {
+    margin-top: 0.85rem;
+    margin-bottom: 0;
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--text-muted);
+    opacity: 0.75;
+    letter-spacing: 0.01em;
+    max-width: none;
+}
+
+.btn {
+    padding: 0.85rem 1.75rem;
+    border-radius: 12px;
+    font-weight: 600;
+    text-decoration: none;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.95rem;
+}
+.btn-primary {
+    background: linear-gradient(135deg, oklch(0.48 0.13 150), oklch(0.39 0.10 145));
+    color: #fff;
+    border: 1px solid oklch(0.72 0.11 95 / 0.24);
+    box-shadow: 0 12px 24px -8px oklch(0.38 0.11 148 / 0.65), 0 0 0 1px oklch(0.80 0.08 90 / 0.06) inset;
+}
+
+.btn-primary:hover {
+    background: linear-gradient(135deg, oklch(0.54 0.14 150), oklch(0.44 0.11 145));
+    transform: translateY(-2px);
+    box-shadow: 0 18px 32px -8px oklch(0.38 0.11 148 / 0.75), 0 0 18px oklch(0.68 0.13 150 / 0.18);
+}
+
+.btn-firefox {
+    background: oklch(0.62 0.14 45);
+    color: white;
+    box-shadow: 0 10px 15px -3px oklch(0.62 0.14 45 / 0.3);
+}
+
+.btn-firefox:hover {
+    background: oklch(0.68 0.14 45);
+    transform: translateY(-2px);
+    box-shadow: 0 20px 25px -5px oklch(0.62 0.14 45 / 0.4);
+}
+
+.btn-secondary {
+    background: var(--card);
+    color: var(--text);
+    border: 1px solid var(--glass-border);
+}
+
+.btn-secondary:hover {
+    background: oklch(0.30 0.03 125);
+    transform: translateY(-2px);
+}
+
+.btn-demo-mobile {
+    display: none;
+    border: 1px solid oklch(0.68 0.13 150 / 0.34);
+    cursor: pointer;
+    font: inherit;
+}
+
+.btn-demo-mobile svg {
+    flex-shrink: 0;
+}
+
+/* Install buttons: compact by default (just the browser name) so all three
+   CTAs fit one line; the detected browser expands to the full call to action.
+   The GitHub button stays compact always. */
+.btn-label-full { display: none; }
+
+.btn-install:not(.is-detected),
+.btn-compact {
+    padding: 0.62rem 1.05rem;
+    font-size: 0.9rem;
+    gap: 0.4rem;
+}
+
+.btn-install.is-detected .btn-label-short { display: none; }
+.btn-install.is-detected .btn-label-full { display: inline; }
+
+.version-badge {
+    display: inline-block;
+    background: oklch(0.68 0.13 150 / 0.1);
+    color: var(--accent);
+    padding: 0.4rem 1rem;
+    border-radius: 99px;
+    font-size: 0.8rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    border: 1px solid oklch(0.68 0.13 150 / 0.3);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
+}
+
+.version-badge-below {
+    margin-bottom: 0;
+    margin-top: 1.5rem;
+}
+
+.version-badge:hover {
+    background: oklch(0.68 0.13 150 / 0.2);
+    box-shadow: 0 0 16px oklch(0.68 0.13 150 / 0.3);
+    transform: translateY(-1px);
+}
+
+/* --- Interactive CSS Extension Mockup --- */
+.hero-mockup-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.extension-mockup {
+    width: 100%;
+    max-width: 320px;
+    height: 528px;
+    background: oklch(0.20 0.025 140);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px oklch(0.68 0.13 150 / 0.15);
+    display: flex;
+    flex-direction: column;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    overflow: hidden;
+    position: relative;
+    user-select: none;
+    padding: 14px;
+    padding-bottom: 0;
+    box-sizing: border-box;
+}
+
+.mock-header-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    flex-shrink: 0;
+}
+
+.mock-header-title {
+    font-size: 18px;
+    margin: 0;
+    color: var(--accent);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 800;
+}
+
+.mock-header-title picture {
+    display: contents;
+}
+
+.mock-header-title img {
+    width: 28px;
+    height: 28px;
+    object-fit: contain;
+    border-radius: 6px;
+}
+
+.mock-version-link {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 10px;
+    color: var(--text-muted);
+    text-decoration: none;
+    opacity: 0.5;
+    transition: opacity 0.2s, color 0.2s;
+    cursor: pointer;
+}
+
+.mock-version-link:hover {
+    opacity: 1;
+    color: var(--accent);
+}
+
+/* Close button for the hero demo popup (hidden in the static mobile mockup) */
+.mock-close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    margin-left: 8px;
+    padding: 0;
+    flex-shrink: 0;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: color 0.2s, background 0.2s;
+}
+
+.mock-close-btn:hover {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 1024px) {
+    .mock-close-btn {
+        display: none;
+    }
+}
+
+.mock-tabs {
+    display: flex;
+    gap: 4px;
+    background: oklch(0.27 0.035 130);
+    padding: 4px;
+    border-radius: 12px;
+    margin-bottom: 14px;
+    flex-shrink: 0;
+}
+
+.mock-tab {
+    flex: 1;
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 7px 4px;
+    cursor: pointer;
+    border-radius: 8px;
+    transition: color 0.2s, background-color 0.2s;
+    text-align: center;
+}
+
+.mock-tab:hover {
+    color: var(--text);
+}
+
+.mock-tab.active {
+    background: var(--accent);
+    color: var(--text-on-green);
+}
+
+.mock-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+    padding-bottom: 12px;
+    display: flex;
+    flex-direction: column;
+    font-size: 0.8rem;
+    scrollbar-width: none; /* Firefox */
+}
+
+.mock-body::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+}
+
+.mock-screen {
+    display: none;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.mock-screen.active {
+    display: flex;
+}
+
+/* Common Mockup Components */
+.mock-card {
+    background: oklch(0.27 0.035 130);
+    border: 1px solid oklch(0.32 0.03 125);
+    border-radius: 8px;
+    padding: 10px;
+}
+
+.mock-label {
+    font-size: 0.65rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.3rem;
+}
+
+.mock-section-label {
+    display: block;
+    font-size: 11px;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin-bottom: 4px;
+    font-weight: 700;
+}
+
+.mock-input {
+    background: oklch(0.27 0.035 130);
+    border: 1px solid oklch(0.32 0.03 125);
+    border-radius: 8px;
+    color: white;
+    padding: 8px 10px;
+    font-size: 0.75rem;
+    width: 100%;
+    outline: none;
+}
+
+.mock-btn {
+    background: var(--accent);
+    color: var(--text-on-green);
+    border: none;
+    border-radius: 6px;
+    padding: 0.5rem;
+    font-weight: 600;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: background 0.2s;
+    text-align: center;
+}
+
+.mock-btn:hover {
+    background: oklch(0.60 0.12 150);
+}
+
+/* Room Tab Details */
+.mock-joined-room {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: oklch(0.68 0.13 150 / 0.1);
+    border: 1px solid oklch(0.68 0.13 150 / 0.2);
+    border-radius: 8px;
+    padding: 0.6rem 0.75rem;
+}
+
+.mock-room-name {
+    font-weight: 700;
+    color: var(--accent);
+    font-size: 0.85rem;
+}
+
+.mock-server-badge {
+    background: oklch(0.68 0.13 150 / 0.2);
+    color: var(--accent);
+    font-size: 0.6rem;
+    font-weight: 700;
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+
+.mock-invite-box {
+    display: flex;
+    gap: 0.35rem;
+}
+
+.mock-invite-box input {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.demo-room-empty {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 24px 10px;
+    text-align: center;
+}
+.demo-room-empty img {
+    border-radius: 10px;
+    opacity: 0.85;
+    box-shadow: 0 4px 12px oklch(0.68 0.13 150 / 0.2);
+}
+.demo-room-empty-text {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    font-weight: 600;
+}
+.demo-create-room-btn {
+    background: var(--accent);
+    border: none;
+    color: var(--text-on-green);
+    font-weight: 700;
+    padding: 10px 18px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+.demo-create-room-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px oklch(0.68 0.13 150 / 0.4);
+}
+.demo-create-room-btn:active {
+    transform: scale(0.96);
+}
+
+.mock-peer-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.mock-peer-item {
+    display: flex;
+    flex-direction: column;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.03);
+    border-radius: 8px;
+    padding: 0.45rem 0.55rem;
+}
+
+.mock-peer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+}
+
+.mock-peer-name {
+    font-weight: 700;
+    color: var(--text);
+}
+
+.mock-peer-meta {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+}
+
+.mock-peer-tab {
+    font-size: 0.7rem;
+    color: var(--accent);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mock-peer-status {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+/* Sync Tab Details */
+.mock-target-box {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    background: oklch(0.62 0.14 45 / 0.1);
+    border: 1px solid oklch(0.62 0.14 45 / 0.2);
+    color: oklch(0.72 0.13 50);
+    padding: 0.5rem 0.6rem;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 0.7rem;
+}
+
+.mock-ctrl-buttons {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+}
+
+.mock-btn-play { background: oklch(0.68 0.13 150); }
+.mock-btn-play:hover { background: oklch(0.60 0.12 150); }
+.mock-btn-pause { background: oklch(0.55 0.15 25); color: #fff; }
+.mock-btn-pause:hover { background: oklch(0.48 0.14 25); }
+.mock-btn-force { background: var(--accent); grid-column: span 2; }
+
+/* Contrast-safe palette for the decorative hero demo. Lighthouse/axe audits
+   sighted text contrast even inside aria-hidden, so every walkthrough state
+   must meet WCAG AA. Accent shown as text gets a lighter indigo; buttons that
+   put white text on a colour get a darker shade (these beat inline styles). */
+.hero-demo-scene {
+    --accent: oklch(0.80 0.10 150);
+    --demo-sky-top: oklch(0.22 0.055 152);
+    --demo-sky-mid: oklch(0.145 0.035 150);
+    --demo-sky-bottom: oklch(0.075 0.018 145);
+    --demo-glow: oklch(0.76 0.13 150 / 0.34);
+    --demo-stars: oklch(0.94 0.025 95);
+    --demo-moon: oklch(0.97 0.025 92);
+    --demo-mountain: oklch(0.18 0.055 148 / 0.9);
+    --demo-midground: oklch(0.22 0.065 145 / 0.88);
+    --demo-foreground: oklch(0.065 0.025 145);
+    --demo-card: oklch(0.18 0.032 142);
+    --demo-toolbar: oklch(0.12 0.025 142);
+    --demo-control-fade: oklch(0.055 0.015 145 / 0.94);
+    --demo-track: oklch(0.92 0.02 95 / 0.2);
+}
+.hero-demo-scene .mock-tab.active,
+.hero-demo-scene .mock-btn-force,
+.hero-demo-scene #demo-force-sync,
+.hero-demo-scene .demo-create-room-btn {
+    background: oklch(0.42 0.09 150) !important;
+    color: #fff;
+}
+.hero-demo-scene .mock-btn-play {
+    background: oklch(0.50 0.11 150) !important;
+}
+.hero-demo-scene .mock-btn-pause,
+.hero-demo-scene #demo-room-joined > button.mock-btn {
+    background: oklch(0.45 0.14 25) !important;
+}
+.hero-demo-scene .mock-version-link {
+    opacity: 0.85;
+}
+
+html.theme-light .hero-demo-scene {
+    --accent: oklch(0.60 0.12 150);
+    --demo-sky-top: oklch(0.86 0.085 78);
+    --demo-sky-mid: oklch(0.76 0.095 112);
+    --demo-sky-bottom: oklch(0.54 0.10 150);
+    --demo-glow: oklch(0.92 0.13 72 / 0.44);
+    --demo-stars: oklch(0.98 0.025 90);
+    --demo-moon: oklch(0.99 0.025 88);
+    --demo-mountain: oklch(0.48 0.095 150 / 0.82);
+    --demo-midground: oklch(0.40 0.10 148 / 0.8);
+    --demo-foreground: oklch(0.24 0.075 145);
+    --demo-card: oklch(0.985 0.008 95);
+    --demo-toolbar: oklch(0.955 0.014 100);
+    --demo-control-fade: oklch(0.16 0.035 145 / 0.88);
+    --demo-track: oklch(0.98 0.01 95 / 0.34);
+}
+
+
+html.theme-light .hero-demo-scene .demo-tab-card {
+    background: var(--demo-card);
+    border-color: oklch(0.20 0.025 140 / 0.1);
+    box-shadow:
+        0 18px 38px oklch(0.20 0.025 140 / 0.16),
+        0 0 28px oklch(0.82 0.10 85 / 0.14),
+        inset 0 1px rgba(255, 255, 255, 0.9);
+}
+
+html.theme-light .hero-demo-scene .demo-tab-titlebar {
+    background: var(--demo-toolbar);
+    border-bottom-color: oklch(0.88 0.015 90);
+    color: oklch(0.45 0.02 110);
+}
+
+html.theme-light .hero-demo-scene .demo-tab-dots i {
+    background: oklch(0.78 0.02 90);
+}
+
+html.theme-light .hero-demo-scene .demo-ext-launcher {
+    background: #ffffff;
+    border-color: oklch(0.78 0.02 90);
+}
+
+html.theme-light .hero-demo-scene .demo-sync-chip {
+    background: oklch(0.55 0.12 150 / 0.1);
+    border-color: oklch(0.55 0.12 150 / 0.26);
+    color: oklch(0.40 0.10 150);
+}
+
+.mock-status-display {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.mock-status-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    background: oklch(0.68 0.13 150 / 0.1);
+    border: 1px solid oklch(0.68 0.13 150 / 0.2);
+    color: oklch(0.68 0.13 150);
+    padding: 2px 8px;
+    border-radius: 99px;
+    font-size: 0.65rem;
+    font-weight: 700;
+}
+
+.mock-log-item {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    border-left: 2px solid var(--accent);
+    padding-left: 0.4rem;
+    margin-top: 0.4rem;
+}
+
+/* Settings Tab Details */
+.mock-settings-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    margin-bottom: 0.6rem;
+}
+
+.mock-settings-row input[type="checkbox"] {
+    margin-top: 0.2rem;
+    cursor: pointer;
+}
+
+.mock-settings-row label {
+    cursor: pointer;
+    font-weight: 600;
+}
+
+.mock-settings-row p {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    margin-top: 0.1rem;
+}
+
+/* Mock Toggle Switch Details */
+.mock-toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 36px;
+    height: 20px;
+    flex-shrink: 0;
+}
+
+.mock-toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.mock-slider {
+    position: absolute;
+    cursor: default;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: oklch(0.32 0.03 125);
+    transition: .3s;
+    border-radius: 20px;
+}
+
+.mock-slider:before {
+    position: absolute;
+    content: "";
+    height: 14px;
+    width: 14px;
+    left: 3px;
+    bottom: 3px;
+    background-color: oklch(0.68 0.02 100);
+    transition: .3s;
+    border-radius: 50%;
+}
+
+input:checked + .mock-slider {
+    background-color: var(--accent);
+}
+
+input:checked + .mock-slider:before {
+    transform: translateX(16px);
+    background-color: white;
+}
+
+/* Dev Tab Details */
+.mock-diagnostic-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.4rem;
+}
+
+.mock-diag-box {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.04);
+    border-radius: 6px;
+    padding: 0.4rem;
+}
+
+.mock-diag-box .diag-val {
+    font-family: monospace;
+    font-weight: 700;
+    color: var(--accent);
+    font-size: 0.75rem;
+}
+
+/* --- Features --- */
+/* Bento Grid Layout Configuration */
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+    margin-top: 4rem;
+}
+
+.feature-card.feature-card-compact {
+    padding: 1.8rem;
+    border-radius: 16px;
+}
+
+.feature-card.feature-card-compact::before {
+    border-radius: 16px;
+}
+
+.feature-card.feature-card-compact h3 {
+    font-size: 1.1rem;
+    margin-bottom: 0.75rem;
+}
+
+.feature-card.feature-card-compact p {
+    font-size: 0.9rem;
+}
+
+.feature-card {
+    background: oklch(0.27 0.035 130 / 0.45);
+    backdrop-filter: blur(16px) saturate(120%);
+    -webkit-backdrop-filter: blur(16px) saturate(120%);
+    padding: 2.5rem;
+    border-radius: 24px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+}
+
+.feature-card::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    border-radius: 24px;
+    padding: 1px;
+    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.12), transparent);
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 30px oklch(0.68 0.13 150 / 0.2);
+    border-color: oklch(0.68 0.13 150 / 0.3);
+}
+
+.feature-card:hover::before {
+    background: linear-gradient(to bottom right, oklch(0.68 0.13 150 / 0.3), transparent);
+}
+
+/* Feature Icon with Inline SVG Wrapper */
+.feature-icon-svg {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    background: oklch(0.68 0.13 150 / 0.12);
+    color: var(--accent);
+    border-radius: 12px;
+    margin-right: 14px;
+    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+}
+
+.feature-card:hover .feature-icon-svg {
+    background: var(--accent);
+    color: var(--text-on-green);
+    box-shadow: 0 0 15px var(--accent-glow);
+    transform: scale(1.05);
+}
+
+.bento-icon {
+    width: 22px;
+    height: 22px;
+    display: block;
+    flex-shrink: 0;
+}
+
+.feature-card h3 {
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+}
+
+.feature-card p {
+    color: var(--text-muted);
+    font-size: 0.95rem;
+    line-height: 1.6;
+}
+
+/* Bento Asymmetric Spanning */
+.feature-card.bento-large {
+    grid-column: span 2;
+    background: linear-gradient(135deg, oklch(0.27 0.035 130 / 0.45) 0%, oklch(0.68 0.13 150 / 0.08) 100%);
+    padding: 3rem 3.5rem;
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 3rem;
+    align-items: center;
+}
+
+.feature-card.bento-large h3 {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 1rem;
+    margin-bottom: 0;
+    font-size: 1.25rem;
+}
+
+.feature-card.bento-large .feature-icon,
+.feature-card.bento-large .feature-icon-svg {
+    width: 52px;
+    height: 52px;
+    border-radius: 14px;
+    margin-right: 0;
+    flex-shrink: 0;
+}
+
+.feature-card.bento-large .bento-icon {
+    width: 24px;
+    height: 24px;
+}
+
+.feature-card.bento-large p {
+    font-size: 1rem;
+    line-height: 1.7;
+    margin: 0;
+}
+
+.feature-card.bento-large::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 2.5rem;
+    right: 2.5rem;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, oklch(0.68 0.13 150 / 0.4), transparent);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.feature-card.bento-large:hover::after {
+    opacity: 1;
+}
+
+@media (max-width: 900px) {
+    .features-grid {
+        /* Keep the Why KoalaSync grid at either three columns or one column.
+           The two-column in-between makes compact cards stretch unevenly. */
+        grid-template-columns: 1fr;
+        gap: 1.25rem;
+    }
+    .feature-card.bento-large {
+        grid-column: span 1;
+        padding: 2.5rem;
+        gap: 2rem;
+    }
+    .feature-card.bento-large h3 {
+        font-size: 1.15rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .features-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+    .feature-card.bento-large {
+        grid-column: span 1;
+        display: flex;
+        flex-direction: column;
+        padding: 1.75rem;
+        gap: 1rem;
+    }
+    .feature-card.bento-large h3 {
+        flex-direction: row;
+        align-items: center;
+        text-align: left;
+        gap: 0.75rem;
+        margin-bottom: 0;
+        font-size: 1.15rem;
+    }
+    .feature-card.bento-large .feature-icon,
+    .feature-card.bento-large .feature-icon-svg {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        margin-right: 0;
+    }
+    .feature-card.bento-large .bento-icon {
+        width: 18px;
+        height: 18px;
+    }
+    .feature-card.bento-large p {
+        font-size: 0.9rem;
+        line-height: 1.6;
+    }
+    .feature-card.bento-large::after {
+        display: none;
+    }
+    .feature-card {
+        padding: 1.75rem;
+    }
+    .feature-card h3 {
+        font-size: 1.1rem;
+    }
+    .feature-icon-svg {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        margin-right: 12px;
+    }
+    .bento-icon {
+        width: 18px;
+        height: 18px;
+    }
+}
+
+/* --- How it works --- */
+.steps {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+}
+
+.step {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+    align-items: center;
+}
+
+.step:nth-child(even) .step-text {
+    order: 2;
+}
+
+.step-num {
+    font-size: 3.25rem;
+    font-weight: 900;
+    background: linear-gradient(135deg, oklch(0.68 0.13 150 / 0.5), oklch(0.62 0.14 45 / 0.15));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    line-height: 1;
+    margin-bottom: 0.5rem;
+    font-family: inherit;
+    letter-spacing: 0;
+}
+
+.step-text h3 {
+    font-size: 1.65rem;
+    margin-bottom: 0.75rem;
+    font-weight: 850;
+    color: var(--text-main);
+    letter-spacing: 0;
+}
+
+.step-text p {
+    color: var(--text-muted);
+    font-size: 1rem;
+    line-height: 1.55;
+}
+
+/* Custom CSS Mockups for step illustrations */
+.step-illustration-1, .step-illustration-2, .step-illustration-3 {
+    background: radial-gradient(circle at 10% 10%, oklch(0.20 0.04 145), oklch(0.10 0.015 138));
+    height: 240px;
+    border-radius: 18px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@media (max-width: 900px) {
+    #how-it-works {
+        padding: 3.5rem 0;
+    }
+
+    .steps {
+        gap: 2.75rem;
+    }
+
+    .step {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.1rem;
+        text-align: left;
+    }
+
+    #how-it-works .step .step-text {
+        order: 1;
+    }
+
+    #how-it-works .step-illustration-1,
+    #how-it-works .step-illustration-2,
+    #how-it-works .step-illustration-3 {
+        order: 2;
+        height: 220px;
+    }
+
+    .step-num {
+        font-size: 2.5rem;
+    }
+
+    .step-text h3 {
+        font-size: 1.45rem;
+    }
+}
+
+.step-illustration-1:hover, .step-illustration-2:hover, .step-illustration-3:hover {
+    transform: translateY(-6px) scale(1.02);
+    border-color: oklch(0.68 0.13 150 / 0.25);
+    box-shadow: 0 25px 50px oklch(0.68 0.13 150 / 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+/* ==========================================================================
+   Step 1 Illustration: Browser & Installed Success Popup
+   ========================================================================== */
+.illus-browser-container {
+    width: 90%;
+    height: 80%;
+    background: oklch(0.11 0.015 138);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
+    display: flex;
+    flex-direction: column;
+}
+
+.illus-browser-header {
+    background: oklch(0.20 0.025 140 / 0.8);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    padding: 0.6rem 0.8rem;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.illus-browser-dots {
+    display: flex;
+    gap: 6px;
+    margin-right: 1.5rem;
+}
+
+.illus-browser-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    opacity: 0.6;
+}
+.illus-browser-dot:nth-child(1) { background: oklch(0.55 0.15 25); }
+.illus-browser-dot:nth-child(2) { background: oklch(0.68 0.14 45); }
+.illus-browser-dot:nth-child(3) { background: oklch(0.68 0.13 150); }
+
+.illus-browser-address-bar {
+    background: oklch(0.13 0.02 138);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 6px;
+    color: var(--text-muted);
+    font-size: 0.68rem;
+    padding: 3px 12px;
+    flex-grow: 1;
+    max-width: 60%;
+    text-align: center;
+    font-family: monospace;
+    letter-spacing: 0.2px;
+}
+
+.illus-browser-address-bar .url-protocol {
+    color: oklch(0.68 0.13 150);
+    font-weight: 600;
+}
+
+.illus-browser-toolbar {
+    display: flex;
+    margin-left: auto;
+}
+
+.illus-extension-btn {
+    width: 22px;
+    height: 22px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.3s, box-shadow 0.3s;
+}
+
+.illus-extension-btn.active {
+    background: oklch(0.68 0.13 150 / 0.2);
+    border: 1px solid var(--accent);
+    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.4);
+    animation: active-pulse 2s infinite alternate;
+}
+
+@keyframes active-pulse {
+    0% { transform: scale(1); box-shadow: 0 0 5px oklch(0.68 0.13 150 / 0.4); }
+    100% { transform: scale(1.08); box-shadow: 0 0 12px oklch(0.68 0.13 150 / 0.7); }
+}
+
+.illus-browser-content {
+    flex-grow: 1;
+    padding: 1rem;
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+}
+
+.illus-store-card {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.04);
+    border-radius: 12px;
+    padding: 0.8rem;
+    width: 65%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.illus-store-card-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.illus-large-logo {
+    width: 30px;
+    height: 30px;
+    object-fit: contain;
+    border-radius: 6px;
+    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.2);
+}
+
+.illus-store-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.illus-store-title {
+    font-size: 0.88rem;
+    font-weight: 800;
+    color: var(--text);
+    line-height: 1.1;
+}
+
+.illus-store-desc {
+    font-size: 0.58rem;
+    color: var(--text-muted);
+    line-height: 1.2;
+    margin-top: 2px;
+}
+
+.illus-store-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.illus-store-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 8px;
+    border-radius: 8px;
+    font-size: 0.58rem;
+    font-weight: 700;
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.03);
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    cursor: default;
+    transition: opacity 0.2s, transform 0.2s;
+}
+
+.illus-store-btn img {
+    width: 11px;
+    height: 11px;
+    display: block;
+}
+
+.illus-store-btn.chrome {
+    border-color: oklch(0.68 0.13 150 / 0.25);
+    background: oklch(0.68 0.13 150 / 0.08);
+    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.05);
+}
+
+.illus-store-btn.firefox {
+    border-color: oklch(0.62 0.14 45 / 0.25);
+    background: oklch(0.62 0.14 45 / 0.08);
+    box-shadow: 0 0 10px oklch(0.62 0.14 45 / 0.05);
+}
+
+.install-breathe {
+    animation: install-breathe 2.5s ease-in-out infinite;
+    z-index: 2;
+    position: relative;
+}
+
+@keyframes install-breathe {
+    0%, 100% {
+        transform: scale(1);
+        box-shadow: 0 0 15px oklch(0.68 0.13 150 / 0.2);
+    }
+    50% {
+        transform: scale(1.05);
+        box-shadow: 0 0 25px oklch(0.68 0.13 150 / 0.5);
+    }
+}
+
+.install-breathe.firefox,
+.btn-firefox.install-breathe {
+    animation-name: install-breathe-ff;
+}
+
+@keyframes install-breathe-ff {
+    0%, 100% {
+        transform: scale(1);
+        box-shadow: 0 0 15px oklch(0.62 0.14 45 / 0.2);
+    }
+    50% {
+        transform: scale(1.05);
+        box-shadow: 0 0 25px oklch(0.62 0.14 45 / 0.5);
+    }
+}
+
+/* Glassmorphic Dropping Success Card */
+.illus-extension-popup {
+    position: absolute;
+    top: 0.6rem;
+    right: 0.6rem;
+    width: 145px;
+    background: oklch(0.20 0.025 140 / 0.85);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid oklch(0.68 0.13 150 / 0.25);
+    border-radius: 12px;
+    padding: 0.6rem 0.8rem;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55), 0 0 15px oklch(0.68 0.13 150 / 0.15);
+    animation: popup-float 4s ease-in-out infinite;
+    z-index: 5;
+}
+
+@keyframes popup-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-4px); }
+}
+
+.illus-extension-popup .popup-title {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 0.72rem;
+    font-weight: 700;
+    color: var(--text);
+    margin-bottom: 6px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    padding-bottom: 4px;
+}
+
+.illus-extension-popup .popup-title img {
+    width: 12px;
+    height: 12px;
+}
+
+.illus-extension-popup .popup-status {
+    margin-bottom: 4px;
+}
+
+.status-badge-success {
+    background: oklch(0.68 0.13 150 / 0.12);
+    color: oklch(0.68 0.13 150);
+    font-size: 0.6rem;
+    font-weight: 700;
+    padding: 2px 6px;
+    border-radius: 4px;
+    border: 1px solid oklch(0.68 0.13 150 / 0.2);
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    animation: status-glow 2s infinite alternate;
+}
+
+@keyframes status-glow {
+    0% { box-shadow: 0 0 0 oklch(0.68 0.13 150 / 0); }
+    100% { box-shadow: 0 0 6px oklch(0.68 0.13 150 / 0.3); }
+}
+
+.illus-extension-popup .popup-quick-start {
+    font-size: 0.55rem;
+    color: var(--text-muted);
+    font-weight: 500;
+    line-height: 1.2;
+}
+
+
+/* ==========================================================================
+   Step 2 Illustration: Highly Realistic Extension Popup (Create Room View)
+   ========================================================================== */
+.illus-popup-card {
+    width: 220px;
+    background: oklch(0.20 0.025 140 / 0.85);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 16px;
+    padding: 0.8rem;
+    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+    animation: popup-float 4s ease-in-out infinite;
+    animation-delay: -1s;
+}
+
+.illus-popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    padding-bottom: 8px;
+}
+
+.illus-popup-brand {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.82rem; /* Scaled up font */
+    font-weight: 800;
+    letter-spacing: -0.2px;
+}
+
+.illus-popup-version {
+    font-size: 0.58rem;
+    color: var(--text-muted);
+}
+
+.illus-popup-tabs {
+    display: flex;
+    gap: 4px;
+    background: oklch(0.12 0.015 135 / 0.4);
+    padding: 3px;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.03);
+}
+
+.illus-popup-tab {
+    flex: 1;
+    text-align: center;
+    font-size: 0.62rem; /* Scaled up font */
+    padding: 4px 0;
+    border-radius: 6px;
+    color: var(--text-muted);
+    font-weight: 600;
+}
+
+.illus-popup-tab.active {
+    background: var(--card);
+    color: var(--accent);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.illus-popup-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+    position: relative;
+}
+
+.illus-popup-btn {
+    background: linear-gradient(135deg, var(--accent-green), var(--accent-terracotta));
+    border-radius: 8px;
+    padding: 7px 9px;
+    color: var(--text-on-green);
+    font-weight: 700;
+    font-size: 0.68rem;
+    text-align: center;
+    box-shadow: 0 4px 12px oklch(0.68 0.13 150 / 0.3);
+    position: relative;
+    overflow: hidden;
+    cursor: default;
+    animation: create-btn-pulse 2s infinite alternate;
+}
+
+@keyframes create-btn-pulse {
+    0% { transform: scale(1); box-shadow: 0 4px 12px oklch(0.68 0.13 150 / 0.3); }
+    100% { transform: scale(1.03); box-shadow: 0 6px 16px oklch(0.68 0.13 150 / 0.5); }
+}
+
+.illus-btn-shine {
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 50%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
+    transform: skewX(-20deg);
+    animation: shimmer-sweep 3s infinite ease-in-out;
+}
+
+@keyframes shimmer-sweep {
+    0% { left: -100%; }
+    50%, 100% { left: 150%; }
+}
+
+.illus-collapsed-details {
+    background: oklch(0.12 0.015 135 / 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    padding: 6px 11px;
+    font-size: 0.54rem;
+    color: var(--text-muted);
+    font-weight: 700;
+    text-transform: uppercase;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    letter-spacing: 0.2px;
+}
+
+.details-arrow {
+    font-size: 0.48rem;
+    color: var(--text-muted);
+    opacity: 0.7;
+}
+
+/* Floating Success Badge */
+.illus-floating-success {
+    position: absolute;
+    /* Fully below the card so the toast never straddles its border */
+    bottom: -2.4rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: oklch(0.12 0.015 135 / 0.92);
+    border: 1px solid oklch(0.68 0.13 150 / 0.35);
+    border-radius: 20px;
+    padding: 3px 10px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), 0 0 12px oklch(0.68 0.13 150 / 0.18);
+    animation: floating-success-fade 5s infinite;
+    white-space: nowrap;
+    z-index: 10;
+}
+
+@keyframes floating-success-fade {
+    0%, 100%, 75% { opacity: 0; transform: translate(-50%, 5px) scale(0.9); }
+    15%, 60% { opacity: 1; transform: translate(-50%, 0) scale(1); }
+}
+
+.illus-floating-success .success-icon {
+    font-size: 0.65rem;
+}
+
+.illus-floating-success span[lang] {
+    font-size: 0.58rem;
+    color: oklch(0.68 0.13 150);
+    font-weight: 700;
+}
+
+
+/* ==========================================================================
+   Step 3 Illustration: Dual Screen Theater Sync Setup
+   ========================================================================= */
+.illus-sync-theater {
+    width: 95%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    gap: 0.6rem;
+}
+
+.illus-player-card {
+    width: 145px;
+    background: oklch(0.20 0.025 140 / 0.85);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 12px;
+    padding: 6px;
+    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    position: relative;
+    z-index: 2;
+}
+
+.illus-player-card.player-a {
+    animation: popup-float 4s ease-in-out infinite;
+    animation-delay: -2s;
+}
+
+.illus-player-card.player-b {
+    animation: popup-float 4s ease-in-out infinite;
+    animation-delay: -3s;
+}
+
+.player-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.55rem;
+}
+
+.player-user {
+    font-weight: 700;
+    color: var(--text);
+}
+
+.player-badge {
+    font-size: 0.42rem;
+    font-weight: 800;
+    padding: 1px 3px;
+    border-radius: 3px;
+}
+
+.player-badge.active {
+    background: oklch(0.68 0.13 150 / 0.15);
+    color: oklch(0.68 0.13 150);
+    border: 1px solid oklch(0.68 0.13 150 / 0.25);
+}
+
+.player-video-canvas {
+    height: 70px;
+    border-radius: 8px;
+    background: linear-gradient(135deg, oklch(0.20 0.04 145), oklch(0.22 0.05 45));
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(255, 255, 255, 0.02);
+}
+
+.player-video-overlay {
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 100%;
+    background: linear-gradient(to bottom, transparent, oklch(0.68 0.13 150 / 0.15), transparent);
+    background-size: 100% 200%;
+    animation: playerScrollScanline 3s linear infinite;
+}
+
+@keyframes playerScrollScanline {
+    0% { background-position: 0% 0%; }
+    100% { background-position: 0% 200%; }
+}
+
+.player-play-pulse {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: oklch(0.68 0.13 150 / 0.85);
+    color: var(--text-on-green);
+    font-size: 0.65rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.5);
+    z-index: 3;
+    animation: play-pulse 2s infinite alternate;
+}
+
+@keyframes play-pulse {
+    0% { transform: scale(1); box-shadow: 0 0 6px oklch(0.68 0.13 150 / 0.4); }
+    100% { transform: scale(1.15); box-shadow: 0 0 15px oklch(0.68 0.13 150 / 0.8); }
+}
+
+.player-controls {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 2px 0 2px;
+}
+
+.control-btn {
+    font-size: 0.58rem;
+    color: var(--accent);
+}
+
+.player-timeline {
+    flex-grow: 1;
+    height: 3px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
+    position: relative;
+}
+
+.timeline-fill {
+    position: absolute;
+    top: 0; left: 0;
+    height: 100%;
+    background: var(--accent);
+    border-radius: 2px;
+    width: 60%;
+    animation: theater-grow 6s infinite linear;
+}
+
+.timeline-knob {
+    position: absolute;
+    top: -2px;
+    left: 60%;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: white;
+    box-shadow: 0 0 4px rgba(0,0,0,0.5);
+    transform: translateX(-50%);
+    animation: theater-knob-grow 6s infinite linear;
+}
+
+@keyframes theater-grow {
+    0% { width: 0%; }
+    100% { width: 100%; }
+}
+
+@keyframes theater-knob-grow {
+    0% { left: 0%; }
+    100% { left: 100%; }
+}
+
+.control-time {
+    font-size: 0.5rem;
+    color: var(--text-muted);
+    font-family: monospace;
+}
+
+/* Glowing Connection Sync Bridge */
+.illus-sync-bridge {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    position: relative;
+    z-index: 1;
+}
+
+.illus-sync-bridge .sync-line {
+    width: 100%;
+    height: 2px;
+    background: rgba(255,255,255,0.06);
+    position: relative;
+    overflow: hidden;
+}
+
+.illus-sync-bridge .sync-beam {
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 50px;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, var(--accent), var(--success), transparent);
+    animation: sync-flow 2.5s infinite linear;
+}
+
+@keyframes sync-flow {
+    0% { left: -100%; }
+    100% { left: 100%; }
+}
+
+.sync-status-badge {
+    background: oklch(0.68 0.13 150 / 0.12);
+    border: 1px solid oklch(0.68 0.13 150 / 0.25);
+    color: oklch(0.68 0.13 150);
+    font-size: 0.5rem;
+    font-weight: 800;
+    letter-spacing: 0.5px;
+    padding: 2px 6px;
+    border-radius: 6px;
+    white-space: nowrap;
+    animation: active-pulse-green 2s infinite alternate;
+}
+
+@keyframes active-pulse-green {
+    0% { box-shadow: 0 0 3px oklch(0.68 0.13 150 / 0.1); }
+    100% { box-shadow: 0 0 8px oklch(0.68 0.13 150 / 0.4); }
+}
+
+/* --- Self Hosters Terminal --- */
+.terminal-container {
+    max-width: 850px;
+    margin: 3rem auto 0 auto;
+    background: oklch(0.20 0.025 140);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 20px 45px rgba(0,0,0,0.5);
+    text-align: left;
+}
+
+.terminal-header {
+    background: oklch(0.27 0.035 130);
+    padding: 0.85rem 1.25rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+
+.terminal-dots {
+    display: flex;
+    gap: 6px;
+}
+
+.terminal-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}
+
+.terminal-dot.red { background: oklch(0.55 0.15 25); }
+.terminal-dot.yellow { background: oklch(0.68 0.14 45); }
+.terminal-dot.green { background: oklch(0.68 0.13 150); }
+
+.terminal-tabs {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.terminal-tab-btn {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-weight: 600;
+    font-size: 0.8rem;
+    padding: 0.35rem 0.75rem;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: color 0.2s, background-color 0.2s;
+}
+
+.terminal-tab-btn:hover {
+    color: var(--text);
+    background: rgba(255, 255, 255, 0.03);
+}
+
+.terminal-tab-btn.active {
+    color: var(--accent);
+    background: oklch(0.68 0.13 150 / 0.1);
+    border: 1px solid oklch(0.68 0.13 150 / 0.2);
+}
+
+.terminal-body {
+    position: relative;
+    padding: 1.5rem;
+}
+
+.terminal-pane {
+    display: none;
+    margin: 0;
+}
+
+.terminal-pane.active {
+    display: block;
+}
+
+.terminal-pane pre {
+    margin: 0;
+    overflow-x: auto;
+}
+
+.terminal-pane code {
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-size: 0.85rem;
+    line-height: 1.6;
+    color: oklch(0.88 0.015 90);
+}
+
+/* Syntax Highlighting */
+.t-comment { color: oklch(0.55 0.02 110); font-style: italic; }
+.t-key { color: oklch(0.72 0.12 45); }
+.t-val { color: oklch(0.75 0.10 150); }
+.t-str { color: oklch(0.80 0.12 155); }
+.t-num { color: oklch(0.75 0.12 50); }
+
+.terminal-copy-btn {
+    position: absolute;
+    top: 1rem;
+    right: 1.5rem;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: var(--text-muted);
+    padding: 0.35rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.2s, color 0.2s, opacity 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.terminal-copy-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--text);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.terminal-copy-btn:active {
+    transform: scale(0.97);
+}
+
+/* --- Footer --- */
+footer {
+    padding: 4rem 0;
+    border-top: 0;
+    text-align: center;
+    color: var(--text-muted);
+}
+
+footer a {
+    color: var(--text-muted);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+footer a:hover {
+    color: var(--text);
+}
+
+
+/* --- Animations --- */
+[data-reveal] {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-reveal].revealed {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+html.theme-light .hero-demo-scene .demo-user-a,
+html.theme-light .hero-demo-scene .demo-user-b {
+    color: oklch(0.36 0.105 150);
+    background: oklch(0.60 0.12 150 / 0.13);
+}
+
+html.theme-light .hero-demo-scene .extension-mockup {
+    --bg: oklch(0.935 0.018 110) !important;
+    --card: oklch(0.995 0.006 100) !important;
+    --accent: oklch(0.56 0.13 150) !important;
+    --accent-glow: oklch(0.56 0.13 150 / 0.22) !important;
+    --text: oklch(0.21 0.03 140) !important;
+    --text-muted: oklch(0.43 0.03 135) !important;
+    --success: oklch(0.56 0.13 150) !important;
+    --error: oklch(0.57 0.17 25) !important;
+    --glass-border: oklch(0.28 0.035 140 / 0.10) !important;
+    background: oklch(0.935 0.018 110) !important;
+    border-color: oklch(0.28 0.035 140 / 0.12);
+    box-shadow:
+        0 20px 42px oklch(0.20 0.025 140 / 0.16),
+        0 0 26px oklch(0.82 0.10 85 / 0.12);
+}
+
+html.theme-light .hero-demo-scene .mock-tabs,
+html.theme-light .hero-demo-scene .mock-card,
+html.theme-light .hero-demo-scene .mock-input {
+    background: oklch(0.995 0.006 100);
+    border-color: oklch(0.28 0.035 140 / 0.14);
+    color: oklch(0.21 0.03 140);
+}
+
+html.theme-light .hero-demo-scene .mock-peer-item {
+    background: oklch(0.28 0.035 140 / 0.035);
+    border-color: oklch(0.28 0.035 140 / 0.09);
+}
+
+html.theme-light .hero-demo-scene .mock-joined-room,
+html.theme-light .hero-demo-scene .mock-status-pill {
+    background: oklch(0.56 0.13 150 / 0.10);
+    border-color: oklch(0.56 0.13 150 / 0.24);
+}
+
+html.theme-light .hero-demo-scene .mock-close-btn:hover {
+    color: oklch(0.21 0.03 140);
+    background: oklch(0.28 0.035 140 / 0.08);
+}
+
+/* A direct hash destination is content, not an entrance animation. Keep it
+   readable from the first paint even before app.js has initialized. */
+section:target [data-reveal],
+section:target[data-reveal] {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+
+/* --- Legal Pages --- */
+.legal-content {
+    max-width: 800px;
+    margin: 8rem auto 4rem auto;
+    padding: 0 2rem;
+}
+
+.legal-card {
+    background: var(--card);
+    padding: 3rem;
+    border-radius: 24px;
+    border: 1px solid var(--glass-border);
+}
+
+.legal-card h1 {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+    text-align: center;
+}
+
+.legal-card h2 {
+    font-size: 1.25rem;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    color: var(--accent);
+}
+
+.legal-card p {
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+    font-size: 0.95rem;
+}
+
+/* Reset global section padding for legal sections specifically */
+.legal-card section {
+    padding: 0 !important;
+    margin-bottom: 0.75rem;
+}
+
+/* --- Join Page Specifics --- */
+.join-card {
+    max-width: 450px;
+    margin: 6rem auto;
+    text-align: center;
+}
+
+.room-badge {
+    display: inline-block;
+    background: oklch(0.68 0.13 150 / 0.1);
+    color: var(--accent);
+    padding: 0.5rem 1rem;
+    border-radius: 99px;
+    font-size: 0.8rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    border: 1px solid oklch(0.68 0.13 150 / 0.2);
+}
+
+@media (max-width: 768px) {
+    .hero {
+        align-items: center;
+        padding-top: 5.5rem;
+        padding-bottom: 3.5rem;
+        min-height: 100svh;
+    }
+
+    .hero-grid {
+        min-height: auto;
+    }
+
+    .hero-grid {
+        grid-template-columns: minmax(0, 1fr);
+        text-align: center;
+    }
+    .step {
+        grid-template-columns: minmax(0, 1fr);
+        text-align: left;
+    }
+    .hero-text h1 {
+        font-size: 2.5rem;
+        max-width: none;
+    }
+    .cta-group {
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+    .nav-links {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        flex-direction: column;
+        background: oklch(0.20 0.025 140 / 0.95);
+        backdrop-filter: blur(12px);
+        padding: 1rem 2rem;
+        gap: 1rem;
+        border-bottom: 1px solid var(--glass-border);
+        margin-left: 0;
+    }
+    .nav-links.open {
+        display: flex;
+    }
+    .nav-right {
+        margin-left: auto;
+    }
+    .hamburger {
+        display: inline-flex !important;
+    }
+    nav .container {
+        padding: 0 0.5rem;
+    }
+    .logo-area {
+        gap: 0.25rem;
+        font-size: 1.1rem;
+    }
+    .logo-area img {
+        height: 40px;
+        width: 40px;
+        margin: 0;
+    }
+    .lang-select-container {
+        padding: 4px 10px;
+        gap: 4px;
+    }
+    .lang-select-container .globe-icon {
+        width: 14px;
+        height: 14px;
+    }
+    .lang-dropdown {
+        font-size: 0.7rem;
+        padding: 0 6px 0 0;
+    }
+    .lang-select-container .chevron-icon {
+        width: 10px;
+        height: 10px;
+    }
+    .legal-card {
+        padding: 1.5rem;
+    }
+}
+
+@media (min-width: 769px) and (max-height: 920px) {
+    .hero {
+        padding-top: clamp(7.5rem, 10vh, 9rem);
+        padding-bottom: clamp(1.5rem, 3vh, 2.75rem);
+    }
+
+    .hero-grid {
+        min-height: calc(100svh - 9.5rem);
+    }
+}
+
+/* Extra-narrow phones: make sure logo, language picker and the menu button
+   never crowd each other in the header (kept comfortable down to ~320px). */
+@media (max-width: 380px) {
+    nav .container {
+        padding: 0 0.4rem;
+    }
+    .nav-right {
+        gap: 0.35rem;
+    }
+    .logo-area {
+        font-size: 1rem;
+        gap: 0.4rem;
+    }
+}
+
+/* --- Language Toggle --- */
+html.lang-de [lang="en"] {
+    display: none !important;
+}
+html:not(.lang-de) [lang="de"] {
+    display: none !important;
+}
+
+/* --- Modern Glassmorphic Language Selector --- */
+.lang-select-container {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: oklch(0.27 0.035 130 / 0.4);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 9999px;
+    padding: 6px 14px;
+    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    color: var(--text-muted);
+}
+
+.lang-select-container:hover {
+    background: oklch(0.27 0.035 130 / 0.6);
+    border-color: oklch(0.68 0.13 150 / 0.3);
+    color: var(--text);
+    box-shadow: 0 0 15px oklch(0.68 0.13 150 / 0.1);
+}
+
+.lang-select-container .globe-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    opacity: 0.8;
+    transition: transform 0.5s ease;
+}
+
+.lang-select-container:hover .globe-icon {
+    transform: rotate(15deg);
+    opacity: 1;
+}
+
+.lang-select-container .chevron-icon {
+    position: absolute;
+    right: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 12px;
+    height: 12px;
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+.lang-select-container:hover .chevron-icon {
+    opacity: 1;
+}
+
+.lang-dropdown {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background: transparent;
+    border: none;
+    outline: none;
+    font-family: inherit;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: currentColor;
+    cursor: pointer;
+    padding: 0 28px 0 0;
+    margin: 0;
+    width: auto;
+    min-width: 110px;
+    overflow: hidden;
+}
+
+@supports (appearance: base-select) {
+    .lang-dropdown::picker(select) {
+        appearance: base-select;
+        background-color: oklch(0.20 0.025 140);
+        border: 1px solid oklch(0.32 0.03 125);
+        border-radius: 8px;
+        padding: 4px;
+        font-family: 'Twemoji Country Flags', inherit;
+    }
+}
+
+.lang-dropdown option {
+    background: oklch(0.20 0.025 140);
+    color: white;
+    font-family: inherit;
+    font-size: 0.9rem;
+}
+
+/* Light theme: the pill was designed on the dark glass recipe — by day it
+   becomes frosted white so it sits in the same family as the buttons. */
+html.theme-light .lang-select-container {
+    background: rgba(255, 255, 255, 0.6);
+    border-color: oklch(0.28 0.035 140 / 0.14);
+}
+
+html.theme-light .lang-select-container:hover {
+    background: rgba(255, 255, 255, 0.85);
+    border-color: oklch(0.56 0.13 150 / 0.35);
+    box-shadow: 0 0 15px oklch(0.56 0.13 150 / 0.12);
+}
+
+html.theme-light .lang-dropdown option {
+    background: #ffffff;
+    color: oklch(0.21 0.03 140);
+}
+
+@supports (appearance: base-select) {
+    html.theme-light .lang-dropdown::picker(select) {
+        background-color: #ffffff;
+        border-color: oklch(0.28 0.035 140 / 0.18);
+    }
+}
+
+/* --- Hamburger Menu --- */
+.hamburger {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: var(--text);
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0.25rem;
+    line-height: 1;
+}
+
+/* --- Feature Cards: subtle differentiation --- */
+.feature-card:nth-child(1) { --card-accent: oklch(0.68 0.13 150 / 0.06); }
+.feature-card:nth-child(2) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
+.feature-card:nth-child(3) { --card-accent: oklch(0.68 0.13 150 / 0.06); }
+.feature-card:nth-child(4) { --card-accent: oklch(0.75 0.10 150 / 0.06); }
+.feature-card:nth-child(5) { --card-accent: oklch(0.68 0.14 45 / 0.06); }
+.feature-card:nth-child(6) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
+.feature-card:nth-child(7) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
+.feature-card:nth-child(8) { --card-accent: oklch(0.68 0.13 150 / 0.06); }
+
+.feature-card {
+    background: linear-gradient(135deg, var(--card-accent, transparent), oklch(0.27 0.035 130 / 0.45));
+}
+
+/* --- Compatibility Section --- */
+.compat-section {
+    padding: 0.5rem 0 2.5rem 0;
+    text-align: center;
+    background: transparent;
+    border-bottom: 0;
+}
+
+.compat-mascot {
+    display: block;
+    margin: 0 auto 0.3rem auto;
+    max-width: 270px;
+    width: 100%;
+    height: auto;
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.compat-mascot:hover {
+    transform: scale(1.05) translateY(-5px) rotate(1deg);
+}
+
+.compat-heading {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    margin-bottom: 1.4rem;
+}
+
+.compat-row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2.4rem 3rem;
+    flex-wrap: wrap;
+}
+
+.compat-logo {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    transition: opacity 0.3s;
+    opacity: 0.55;
+}
+
+.compat-logo:hover {
+    opacity: 0.85;
+}
+
+.compat-logo img {
+    width: 28px;
+    height: 28px;
+    display: block;
+}
+
+.compat-logo img.compat-logo-wide {
+    width: 52px;
+    height: 28px;
+    object-fit: contain;
+}
+
+.compat-logo img.compat-logo-disneyplus-mark {
+    width: 60px;
+    height: 30px;
+    object-fit: contain;
+    filter: brightness(0) saturate(100%) invert(63%) sepia(12%) saturate(621%) hue-rotate(203deg) brightness(92%) contrast(88%);
+}
+
+html.theme-light .compat-logo img.compat-logo-disneyplus-mark {
+    filter: none;
+}
+
+@media (max-width: 700px) {
+    .compat-section {
+        padding: 0 0 1.6rem;
+    }
+
+    .compat-mascot {
+        max-width: 220px;
+        margin-bottom: 0.1rem;
+    }
+
+    .compat-heading {
+        font-size: 0.92rem;
+        line-height: 1.55;
+        margin-bottom: 1rem;
+    }
+
+    .compat-row {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 1.55rem 0.75rem;
+        align-items: start;
+    }
+
+    .compat-logo {
+        gap: 0.35rem;
+        font-size: 0.72rem;
+    }
+
+    .compat-logo img {
+        width: 26px;
+        height: 26px;
+    }
+
+    .compat-logo img.compat-logo-wide {
+        width: 48px;
+        height: 26px;
+    }
+
+    .compat-logo img.compat-logo-disneyplus-mark {
+        width: 56px;
+        height: 28px;
+    }
+
+    .compat-logo-jellyfin {
+        display: none;
+    }
+
+    .compat-more {
+        grid-column: 1 / -1;
+        justify-self: center;
+        white-space: nowrap;
+    }
+}
+
+.compat-more {
+    opacity: 0.4;
+    cursor: help;
+    flex-direction: row;
+    gap: 0.35rem;
+    position: relative;
+}
+
+.compat-more:hover {
+    opacity: 0.6;
+}
+
+.compat-more-icon {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--accent);
+    line-height: 1;
+}
+
+.compat-tooltip {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 10px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--card);
+    color: var(--text-muted);
+    padding: 0.6rem 0.9rem;
+    border-radius: 8px;
+    font-size: 0.72rem;
+    font-weight: 500;
+    white-space: nowrap;
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
+    z-index: 10;
+    line-height: 1.4;
+}
+
+.compat-tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-top-color: var(--glass-border);
+}
+
+.compat-more:hover .compat-tooltip {
+    display: block;
+}
+
+/* --- Join Page Loading Spinner --- */
+.join-spinner {
+    width: 36px;
+    height: 36px;
+    border: 3px solid oklch(0.68 0.13 150 / 0.2);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin: 0 auto 0.75rem;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* --- Reduced Motion --- */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+    [data-reveal] {
+        opacity: 1;
+        transform: none;
+    }
+    .illus-typing-text::after {
+        animation: none;
+    }
+    .illus-timeline-progress {
+        animation: none;
+        width: 60%;
+    }
+    .illus-sync-pulse {
+        animation: none;
+    }
+    .illus-extension-icon {
+        animation: none;
+    }
+}
+
+/* --- Use Cases / Anwendungsszenarien Section --- */
+.use-cases-section {
+    padding: 6rem 0;
+    position: relative;
+    border-bottom: 0;
+}
+
+.use-cases-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 2rem;
+    margin-top: 1rem;
+}
+
+.use-cases-feature-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+@media (max-width: 900px) {
+    .use-cases-feature-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 1.25rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .use-cases-feature-grid {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1rem;
+    }
+}
+
+.use-case-card {
+    background: oklch(0.27 0.035 130 / 0.4);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    padding: 1.2rem 1.6rem 1.7rem 1.6rem;
+    text-align: left;
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.use-case-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, transparent, var(--card-accent-border, var(--accent)), transparent);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.use-case-card:nth-child(1) { --card-accent-border: oklch(0.68 0.13 150); }
+.use-case-card:nth-child(2) { --card-accent-border: oklch(0.62 0.14 45); }
+.use-case-card:nth-child(3) { --card-accent-border: oklch(0.75 0.10 150); }
+
+
+.use-case-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.use-case-card:hover::before {
+    opacity: 1;
+}
+
+.use-case-image {
+    display: block;
+    width: 100%;
+    max-width: 272px;
+    height: 150px;
+    object-fit: contain;
+    border-radius: 8px;
+    margin: 0 auto 0 auto;
+}
+
+.cta-github-mascot {
+    display: block;
+    width: 100%;
+    max-width: 250px;
+    height: auto;
+    margin: 1.5rem auto;
+}
+
+.features-questions-mascot {
+    display: block;
+    width: 100%;
+    max-width: 250px;
+    height: auto;
+    margin: -1.5rem auto 0.2rem auto;
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.features-questions-mascot:hover {
+    transform: scale(1.05) translateY(-4px) rotate(-1.5deg);
+}
+
+.comparison-mascot {
+    display: block;
+    width: 100%;
+    max-width: 260px;
+    height: auto;
+    margin: -2.2rem auto 0.2rem auto;
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.comparison-mascot:hover {
+    transform: scale(1.05) translateY(-4px) rotate(1deg);
+}
+
+.use-case-icon {
+    font-size: 1.6rem;
+    margin-right: 0.6rem;
+    display: inline-block;
+    vertical-align: middle;
+    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
+}
+
+.use-case-card h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin: 0;
+    color: white;
+}
+
+.use-case-card p {
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: var(--text-muted);
+    margin: 0;
+}
+
+/* --- Comparison Section --- */
+.comparison-section {
+    padding: 6rem 0;
+    background: transparent;
+    border-bottom: 0;
+}
+
+#self-hosting,
+#faq,
+#faq + section,
+footer {
+    background: var(--section-tint-strong);
+}
+
+#self-hosting {
+    border-top: 1px solid var(--glass-border);
+}
+
+.comparison-table-wrapper {
+    overflow-x: auto;
+    background: oklch(0.27 0.035 130 / 0.35);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    margin-top: 1rem;
+}
+
+.comparison-table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
+    font-size: 0.95rem;
+}
+
+.comparison-table th, 
+.comparison-table td {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.comparison-table th {
+    background: oklch(0.20 0.025 140 / 0.6);
+    font-weight: 700;
+    color: white;
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    letter-spacing: 0.08em;
+}
+
+.comparison-table th.highlight,
+.comparison-table td.highlight {
+    background: oklch(0.68 0.13 150 / 0.08);
+}
+
+.comparison-table tbody tr:hover {
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.comparison-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.feat-name {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.feat-name strong {
+    color: white;
+    font-weight: 600;
+}
+
+.feat-desc {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+}
+
+.check {
+    color: oklch(0.68 0.13 150);
+    font-weight: 700;
+}
+
+.cross {
+    color: oklch(0.68 0.17 25);
+    font-weight: 600;
+    opacity: 1;
+}
+
+@media (max-width: 768px) {
+    .comparison-table th,
+    .comparison-table td {
+        padding: 1rem;
+        font-size: 0.85rem;
+    }
+}
+
+/* On phones the 3-column table is turned into stacked cards so there is
+   no horizontal scrolling — one card per feature, KoalaSync above Teleparty. */
+@media (max-width: 600px) {
+    .comparison-table-wrapper {
+        overflow-x: visible;
+        background: transparent;
+        border: none;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+        margin-top: 0;
+    }
+
+    .comparison-table {
+        display: block;
+        font-size: 0.95rem;
+    }
+
+    /* Visually hide the header row but keep it for screen readers. */
+    .comparison-table thead {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    .comparison-table tbody,
+    .comparison-table tr,
+    .comparison-table td {
+        display: block;
+        width: 100%;
+    }
+
+    .comparison-table tbody tr {
+        background: oklch(0.27 0.035 130 / 0.35);
+        border: 1px solid var(--glass-border);
+        border-radius: 14px;
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
+        margin-bottom: 1rem;
+        overflow: hidden;
+    }
+
+    .comparison-table tbody tr:last-child {
+        margin-bottom: 0;
+    }
+
+    .comparison-table td {
+        padding: 0.85rem 1.1rem;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    }
+
+    .comparison-table tbody tr td:last-child {
+        border-bottom: none;
+    }
+
+    /* Feature name acts as the card header. */
+    .comparison-table td.feat-name {
+        background: oklch(0.20 0.025 140 / 0.55);
+        padding: 0.9rem 1.1rem;
+    }
+
+    /* Room is back on the card, so show the description again. */
+    .feat-desc {
+        display: block;
+        margin-top: 0.15rem;
+    }
+
+    /* Label each value cell with the product it belongs to. */
+    .comparison-table td.check,
+    .comparison-table td.cross {
+        display: flex;
+        align-items: baseline;
+        gap: 0.4rem;
+    }
+
+    .comparison-table td.check::before,
+    .comparison-table td.cross::before {
+        flex: 0 0 5.5rem;
+        font-size: 0.7rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        color: var(--text-muted);
+        opacity: 0.85;
+    }
+
+    .comparison-table td.check::before,
+    .comparison-table td.cross::before {
+        content: attr(data-label);
+    }
+
+    /* Keep the KoalaSync row subtly highlighted, like on desktop. */
+    .comparison-table td.check.highlight {
+        background: oklch(0.68 0.13 150 / 0.08);
+    }
+}
+
+@media (max-width: 600px) {
+    html.theme-light .comparison-section {
+        background: transparent;
+    }
+
+    html.theme-light .comparison-table tbody tr {
+        background: #ffffff;
+        border-color: oklch(0.20 0.025 140 / 0.1);
+        box-shadow: 0 8px 20px oklch(0.20 0.025 140 / 0.08);
+    }
+
+    html.theme-light .comparison-table tbody tr:hover {
+        background: #ffffff;
+    }
+
+    html.theme-light .comparison-table td {
+        border-bottom-color: oklch(0.20 0.025 140 / 0.08);
+    }
+
+    html.theme-light .comparison-table td.feat-name {
+        background: #ffffff;
+    }
+
+    html.theme-light .comparison-table td.check.highlight {
+        background: oklch(0.52 0.12 150 / 0.07);
+    }
+}
+
+/* --- Footnotes & Source Links --- */
+.source-link {
+    color: var(--accent);
+    text-decoration: none;
+    font-size: 0.72rem;
+    font-weight: 700;
+    margin-left: 0.25rem;
+    display: inline-flex;
+    align-items: center;
+    vertical-align: super;
+    opacity: 0.82;
+    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
+}
+
+.source-link:hover {
+    opacity: 1;
+    color: oklch(0.75 0.10 150);
+    transform: translateY(-1px);
+}
+
+.table-footnotes {
+    padding: 0.8rem 1.25rem;
+    background: oklch(0.20 0.025 140 / 0.45);
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    line-height: 1.5;
+    opacity: 0.65;
+    transition: opacity 0.2s ease;
+}
+
+/* Link from the comparison table to the fuller guides/alternatives hub */
+.comparison-guides-link {
+    text-align: center;
+    margin: 2rem 0 0;
+}
+
+.comparison-guides-link a {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    color: var(--accent);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 0.95rem;
+    transition: gap 0.2s ease, opacity 0.2s ease;
+}
+
+.comparison-guides-link a:hover {
+    gap: 0.7rem;
+    opacity: 0.85;
+}
+
+.table-footnotes:hover {
+    opacity: 0.95;
+}
+
+.table-footnotes p {
+    margin: 0;
+    display: flex;
+    align-items: baseline;
+    gap: 0.4rem;
+}
+
+.table-footnotes p:not(:last-child) {
+    margin-bottom: 0.4rem;
+}
+
+.table-footnotes a {
+    color: var(--accent);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.2s ease, text-decoration 0.2s ease;
+}
+
+.table-footnotes a:hover {
+    color: oklch(0.75 0.10 150);
+    text-decoration: underline;
+}
+
+.table-footnotes sup {
+    font-weight: 700;
+    color: var(--accent);
+}
+
+@media (max-width: 768px) {
+    .table-footnotes {
+        padding: 0.75rem 1rem;
+        font-size: 0.68rem;
+    }
+}
+
+/* --- Join & Invitation Page Visuals --- */
+.join-status-visual {
+    margin-bottom: 2rem;
+    position: relative;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.join-status-mascot {
+    display: block;
+    width: 140px;
+    height: auto;
+    z-index: 2;
+    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
+}
+
+.join-status-mascot.searching-mascot {
+    width: 175px; /* Slightly wider due to antenna to keep main body scale identical */
+}
+
+.join-status-pulse {
+    animation: mascot-gentle-pulse 2s ease-in-out infinite;
+}
+
+@keyframes mascot-gentle-pulse {
+    0% {
+        transform: scale(0.96);
+        filter: drop-shadow(0 4px 10px oklch(0.68 0.13 150 / 0.15));
+    }
+    50% {
+        transform: scale(1.04);
+        filter: drop-shadow(0 8px 20px oklch(0.68 0.13 150 / 0.35));
+    }
+    100% {
+        transform: scale(0.96);
+        filter: drop-shadow(0 4px 10px oklch(0.68 0.13 150 / 0.15));
+    }
+}
+
+.legal-mascot {
+    display: block;
+    width: 180px;
+    height: auto;
+    margin: -0.75rem auto 0.4rem auto;
+    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.legal-mascot:hover {
+    transform: scale(1.06) translateY(-4px) rotate(1.5deg);
+}
+
+.selfhost-mascot {
+    display: block;
+    width: 300px;
+    height: auto;
+    margin: 0 auto;
+    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.selfhost-mascot:hover {
+    transform: scale(1.05) translateY(-4px) rotate(-1deg);
+}
+
+.status-ring {
+    position: absolute;
+    width: 90px;
+    height: 90px;
+    border-radius: 50%;
+    background: oklch(0.68 0.13 150 / 0.05);
+    border: 2px dashed oklch(0.68 0.13 150 / 0.25);
+    z-index: 1;
+}
+
+.status-ring.active-pulse {
+    animation: radar-pulse 3s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
+}
+
+@keyframes radar-pulse {
+    0% {
+        transform: scale(0.85);
+        opacity: 0.9;
+        border-color: oklch(0.68 0.13 150 / 0.3);
+        box-shadow: 0 0 0 0px oklch(0.68 0.13 150 / 0.15);
+    }
+    50% {
+        transform: scale(1.18);
+        opacity: 0.35;
+        border-color: oklch(0.75 0.10 150 / 0.2);
+        box-shadow: 0 0 0 15px oklch(0.75 0.10 150 / 0);
+    }
+    100% {
+        transform: scale(0.85);
+        opacity: 0.9;
+        border-color: oklch(0.68 0.13 150 / 0.3);
+        box-shadow: 0 0 0 0px oklch(0.68 0.13 150 / 0.15);
+    }
+}
+
+.join-card-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: 100%;
+}
+
+.join-card-actions .btn {
+    width: 100%;
+    justify-content: center;
+    padding: 1.1rem;
+    font-size: 0.88rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.join-card-actions .btn svg {
+    margin-right: 0.3rem;
+    flex-shrink: 0;
+}
+
+.join-card-actions .btn img {
+    margin-right: 0.3rem;
+    flex-shrink: 0;
+}
+
+.btn-success {
+    background: var(--accent-green);
+    color: var(--text-on-green) !important;
+    box-shadow: 0 10px 15px -3px oklch(0.68 0.13 150 / 0.3);
+}
+
+.btn-success:hover {
+    background: oklch(0.60 0.12 150);
+    transform: translateY(-2px);
+    box-shadow: 0 20px 25px -5px oklch(0.68 0.13 150 / 0.4);
+}
+
+/* --- Section collapse (FAQ, self-hosting): closed by default to keep the page short --- */
+.section-collapse {
+    margin: 0 auto;
+}
+
+.faq-section-collapse {
+    max-width: 800px;
+}
+
+.collapse-summary {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+    list-style: none;
+    cursor: pointer;
+    font-weight: 700;
+    font-size: 1rem;
+    color: var(--accent);
+    background: oklch(0.68 0.13 150 / 0.08);
+    border: 1px solid oklch(0.68 0.13 150 / 0.3);
+    border-radius: 99px;
+    padding: 0.85rem 2rem;
+    max-width: 360px;
+    margin: 0 auto;
+    transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
+}
+
+.collapse-summary::-webkit-details-marker {
+    display: none;
+}
+
+.collapse-summary:hover {
+    background: oklch(0.68 0.13 150 / 0.16);
+    box-shadow: 0 0 20px oklch(0.68 0.13 150 / 0.25);
+    transform: translateY(-2px);
+}
+
+.collapse-summary .collapse-chevron {
+    flex-shrink: 0;
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.section-collapse[open] .collapse-chevron {
+    transform: rotate(180deg);
+}
+
+.collapse-label-hide { display: none; }
+.section-collapse[open] .collapse-label-show { display: none; }
+.section-collapse[open] .collapse-label-hide { display: inline; }
+
+.section-collapse[open] .collapse-summary {
+    margin-bottom: 2rem;
+}
+
+.section-collapse[open] .collapse-content {
+    animation: collapse-content-in 0.4s ease-out;
+}
+
+@keyframes collapse-content-in {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .section-collapse[open] .collapse-content {
+        animation: none;
+    }
+}
+
+/* --- FAQ Section --- */
+
+.faq-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.faq-item {
+    background: oklch(0.27 0.035 130 / 0.45);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    padding: 1.5rem 2rem;
+    cursor: pointer;
+    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+    overflow: hidden;
+}
+
+.faq-item:hover {
+    border-color: oklch(0.68 0.13 150 / 0.3);
+    box-shadow: 0 8px 20px oklch(0.68 0.13 150 / 0.1);
+}
+
+.faq-item[open] {
+    border-color: oklch(0.68 0.13 150 / 0.4);
+    background: oklch(0.27 0.035 130 / 0.65);
+}
+
+.faq-item summary {
+    font-weight: 700;
+    font-size: 1.05rem;
+    color: var(--text);
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+}
+
+.faq-item summary::-webkit-details-marker {
+    display: none;
+}
+
+.faq-item summary::after {
+    content: '+';
+    font-size: 1.4rem;
+    color: var(--accent);
+    font-weight: 300;
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    flex-shrink: 0;
+    transform-origin: center;
+}
+
+.faq-item[open] summary::after {
+    transform: rotate(45deg);
+}
+
+.faq-item p {
+    color: var(--text-muted);
+    font-size: 0.95rem;
+    line-height: 1.6;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+/* --- Focus states for interactive cards --- */
+.feature-card:focus-visible,
+.use-case-card:focus-visible,
+.compat-logo:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 4px;
+    transform: translateY(-5px);
+}
+.feature-card,
+.use-case-card,
+.compat-logo,
+section[id],
+header[id] {
+    scroll-margin-top: 100px;
+}
+
+/* --- Screen-reader-only (also crawlable by search engines) --- */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* --- Skip-to-content accessibility link --- */
+.skip-link {
+    position: absolute;
+    left: -9999px;
+    top: 0;
+    background: var(--accent);
+    color: var(--text-on-green);
+    padding: 0.75rem 1.25rem;
+    border-radius: 0 0 8px 0;
+    font-weight: 700;
+    z-index: 9999;
+    text-decoration: none;
+}
+.skip-link:focus {
+    left: 0;
+}
+
+/* --- Reduced motion support --- */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+    .join-status-pulse { animation: none; }
+    .status-ring.active-pulse { animation: none; }
+}
+
+/* --- will-change hints for animated elements --- */
+.join-status-pulse,
+.status-ring.active-pulse,
+.hero-mockup-wrapper,
+.cta-group .btn {
+    will-change: transform, opacity;
+}
+@media (prefers-reduced-motion: reduce) {
+    .join-status-pulse,
+    .status-ring.active-pulse,
+    .hero-mockup-wrapper,
+    .cta-group .btn {
+    }
+}
+
+/* --- Alternatives Hub Styles --- */
+.guide-card {
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, border-color 0.25s ease !important;
+}
+.guide-card:hover {
+    transform: translateY(-4px);
+    background-color: rgba(255, 255, 255, 0.07) !important;
+    border-color: rgba(255, 255, 255, 0.22) !important;
+    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.4);
+}
+.guide-card .btn-primary {
+    transition: background-color 0.2s ease, transform 0.1s ease;
+}
+.guide-card .btn-primary:active {
+    transform: scale(0.97);
+}
+@media (max-width: 640px) {
+    .guides-grid {
+        grid-template-columns: 1fr !important;
+        gap: 1.25rem !important;
+    }
+}
+
+/* --- Hero Live Demo Scene (two synced tabs + extension popup) --- */
+.hero-mockup-wrapper {
+    flex-direction: column;
+    gap: 0.9rem;
+    container-type: inline-size;
+}
+
+/* Fixed height that already fits the open popup, so toggling it never changes
+   layout (the vertically centered hero never jumps). The empty lower area is
+   the invisible room the popup drops into.
+
+   Do not move .hero-mockup-wrapper down to align the headline and demo tops:
+   the extension popup is bottom-anchored inside this scene, so moving the whole
+   wrapper destroys the vertical balance and leaves no breathing room below. */
+.hero-demo-scene {
+    --demo-content-y: 0px;
+    position: relative;
+    width: 100%;
+    height: max(calc(59cqw + 100px), 548px);
+}
+
+.demo-tab-stack {
+    position: relative;
+    width: 100%;
+    height: calc(59cqw + 100px + var(--demo-content-y));
+}
+
+@media (min-width: 1025px) {
+    .hero-demo-scene {
+        /* Balance the demo inside the visible hero area below the fixed navbar.
+           Shift the scene content, not the hero text or grid. */
+        --demo-content-y: 2.75rem;
+    }
+}
+
+/* While initializing, suppress all transitions so the popup can start closed
+   without a visible open->closed animation on page load. */
+.hero-demo-scene.demo-no-anim,
+.hero-demo-scene.demo-no-anim * {
+    transition-duration: 0s !important;
+}
+
+/* Sync status chip: green "in sync" at rest, flashes the broadcast event */
+.demo-sync-chip {
+    position: absolute;
+    top: var(--demo-content-y);
+    left: 2px;
+    z-index: 8;
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    padding: 5px 12px;
+    border-radius: 99px;
+    background: oklch(0.68 0.13 150 / 0.12);
+    border: 1px solid oklch(0.68 0.13 150 / 0.35);
+    color: #86efac;
+    font-family: inherit;
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    cursor: default;
+    transition: background 0.3s, border-color 0.3s, color 0.3s;
+}
+
+.demo-chip-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: oklch(0.68 0.13 150);
+    box-shadow: 0 0 8px oklch(0.68 0.13 150);
+    transition: background 0.3s, box-shadow 0.3s;
+}
+
+.demo-sync-chip .demo-chip-event { display: none; }
+
+.demo-sync-chip.event {
+    background: oklch(0.68 0.13 150 / 0.14);
+    border-color: oklch(0.68 0.13 150 / 0.45);
+    color: oklch(0.85 0.07 150);
+}
+
+.demo-sync-chip.event .demo-chip-dot {
+    background: oklch(0.75 0.13 150);
+    box-shadow: 0 0 8px oklch(0.75 0.13 150);
+}
+
+.demo-sync-chip.event .demo-chip-label-sync { display: none; }
+.demo-sync-chip.event .demo-chip-event { display: inline; }
+
+@keyframes demoBlink {
+    50% { opacity: 0.35; }
+}
+
+/* Video tab cards: a clean window cascade — the right one is in front */
+.demo-tab-card {
+    position: absolute;
+    width: 310px;
+    width: 70cqw;
+    background: var(--demo-card);
+    border: 1px solid rgba(255, 255, 255, 0.09);
+    border-radius: 14px;
+    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45), inset 0 1px rgba(255, 255, 255, 0.05);
+    overflow: hidden;
+    cursor: pointer;
+    user-select: none;
+    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s;
+}
+
+.demo-tab-card:hover,
+.demo-tab-card:focus-visible {
+    border-color: oklch(0.68 0.13 150 / 0.55);
+}
+
+/* Card A = the foreground window at the top right ("your" browser,
+   hosts the extension icon in its toolbar) */
+.demo-tab-a {
+    top: calc(49px + var(--demo-content-y));
+    right: -3%;
+    transform: rotate(1.2deg);
+    transform-origin: top right;
+    z-index: 3;
+}
+
+.demo-tab-a:hover {
+    z-index: 4;
+    transform: rotate(1.2deg) scale(1.02);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65), 0 0 20px oklch(0.68 0.13 150 / 0.2);
+}
+
+/* Card B = the friend's window, lower left, tucked behind */
+.demo-tab-b {
+    top: 142px;
+    top: calc(20cqw + 67px + var(--demo-content-y));
+    left: -3%;
+    transform: rotate(-1.6deg);
+    transform-origin: top left;
+    z-index: 2;
+}
+
+.demo-tab-b:hover {
+    z-index: 4;
+    transform: rotate(-1.6deg) scale(1.02);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65), 0 0 20px oklch(0.68 0.13 150 / 0.2);
+}
+
+/* When the popup slides in from the right edge, the tabs step aside */
+.hero-demo-scene.popup-open .demo-tab-a {
+    top: calc(22px + var(--demo-content-y));
+    transform: rotate(1deg) translate(-44%, 20%) scale(0.88);
+}
+
+.hero-demo-scene.popup-open .demo-tab-a:hover {
+    z-index: 4;
+    transform: rotate(1deg) translate(-44%, 20%) scale(0.92);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65), 0 0 20px oklch(0.68 0.13 150 / 0.2);
+}
+
+.hero-demo-scene.popup-open .demo-tab-b {
+    top: calc(20cqw + 40px + var(--demo-content-y));
+    transform: rotate(-1.6deg) translate(0, 14%) scale(0.94);
+}
+
+.hero-demo-scene.popup-open .demo-tab-b:hover {
+    z-index: 4;
+    transform: rotate(-1.6deg) translate(0, 14%) scale(0.98);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65), 0 0 20px oklch(0.68 0.13 150 / 0.2);
+}
+
+.demo-tab-titlebar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px 6px 10px;
+    background: var(--demo-toolbar);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    font-size: 10.5px;
+    color: var(--text-muted);
+    font-weight: 600;
+}
+
+.demo-tab-dots {
+    display: flex;
+    gap: 4px;
+    flex-shrink: 0;
+}
+
+.demo-tab-dots i {
+    display: block;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: oklch(0.32 0.03 125);
+}
+
+.demo-tab-title {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.demo-tab-title svg { flex-shrink: 0; }
+
+.demo-tab-user {
+    flex-shrink: 0;
+    font-size: 9.5px;
+    font-weight: 700;
+    padding: 2px 7px;
+    border-radius: 99px;
+}
+
+.demo-user-a {
+    color: oklch(0.80 0.10 150);
+    background: oklch(0.68 0.13 150 / 0.15);
+}
+
+.demo-user-b {
+    color: #86efac;
+    background: oklch(0.68 0.13 150 / 0.12);
+}
+
+/* Extension launcher pinned in the foreground window's toolbar */
+.demo-ext-launcher {
+    position: relative;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border-radius: 7px;
+    background: oklch(0.30 0.03 130);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    cursor: pointer;
+    transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s;
+}
+
+.demo-ext-launcher img {
+    display: block;
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+}
+
+.demo-ext-launcher:hover {
+    border-color: var(--accent);
+    transform: translateY(-1px);
+}
+
+.demo-ext-launcher:active {
+    transform: scale(0.94);
+}
+
+.hero-demo-scene.popup-open .demo-ext-launcher {
+    border-color: oklch(0.68 0.13 150 / 0.7);
+    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.45);
+}
+
+.demo-ext-launcher::after {
+    content: '';
+    position: absolute;
+    top: -3px;
+    right: -3px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: oklch(0.68 0.13 150);
+    box-shadow: 0 0 8px oklch(0.68 0.13 150);
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.hero-demo-scene:not(.popup-open) .demo-ext-launcher:not(.demo-ext-static)::after {
+    opacity: 1;
+    animation: demoBlink 1.4s ease-in-out infinite;
+}
+
+/* Card B shows the same extension icon, purely to signal the friend has it
+   installed too. It is not interactive and does not blink or glow. */
+.demo-ext-static,
+.demo-ext-static:hover {
+    cursor: default;
+    border-color: rgba(255, 255, 255, 0.12);
+    transform: none;
+    box-shadow: none;
+}
+
+.demo-ext-static::after { display: none; }
+
+/* Abstract "video" artwork with a slow cinematic pan/zoom while playing */
+.demo-video {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    background: var(--demo-sky-bottom);
+    overflow: hidden;
+}
+
+.demo-video::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+    /* Cinematic vignette: soft edge falloff + heavier floor for the controls */
+    box-shadow:
+        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+        inset 0 0 34px oklch(0.04 0.015 145 / 0.32),
+        inset 0 -26px 40px oklch(0.04 0.015 145 / 0.26);
+}
+
+html.theme-light .hero-demo-scene .demo-video::after {
+    box-shadow:
+        inset 0 0 0 1px oklch(0.30 0.04 145 / 0.13),
+        inset 0 18px 32px oklch(0.98 0.03 90 / 0.1),
+        inset 0 -22px 34px oklch(0.18 0.05 145 / 0.16);
+}
+
+.demo-video-art {
+    position: absolute;
+    inset: 0;
+    background:
+        radial-gradient(30% 42% at 76% 29%, var(--demo-glow), transparent 64%),
+        radial-gradient(90% 85% at 18% 5%, var(--demo-glow), transparent 66%),
+        linear-gradient(160deg, var(--demo-sky-top) 0%, var(--demo-sky-mid) 52%, var(--demo-sky-bottom) 100%);
+    transform-origin: 60% 40%;
+    animation:
+        demoKenBurns 9s ease-in-out infinite alternate,
+        demoArtShift 7s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+/* Soft light drifting through the scene */
+.demo-video-art::before {
+    content: '';
+    position: absolute;
+    top: -25%;
+    left: -12%;
+    width: 70%;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: radial-gradient(circle, var(--demo-glow), transparent 65%);
+    animation: demoGlowDrift 7s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+.demo-video-art::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(105deg, transparent 30%, oklch(0.75 0.13 150 / 0.14) 45%, oklch(0.75 0.10 150 / 0.1) 55%, transparent 70%);
+    transform: translateX(-100%);
+    animation: demoSheen 2.8s linear infinite;
+    animation-play-state: paused;
+}
+
+/* Playing runs the animations; pausing freezes them mid-frame, so a synced
+   pause is visible at a glance */
+.demo-tab-card.playing .demo-video-art,
+.demo-tab-card.playing .demo-video-art::before,
+.demo-tab-card.playing .demo-video-art::after {
+    animation-play-state: running;
+}
+
+@keyframes demoKenBurns {
+    from { transform: scale(1) translate(0, 0); }
+    to { transform: scale(1.18) translate(-3%, 2%); }
+}
+
+@keyframes demoArtShift {
+    from { filter: hue-rotate(0deg) brightness(1); }
+    to { filter: hue-rotate(40deg) brightness(1.15); }
+}
+
+@keyframes demoGlowDrift {
+    from { transform: translate(0, 0); }
+    to { transform: translate(65%, 30%); }
+}
+
+@keyframes demoSheen {
+    to { transform: translateX(100%); }
+}
+
+/* Play / pause overlay */
+.demo-play-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: oklch(0.10 0.01 135 / 0.35);
+    transition: opacity 0.25s, background 0.25s;
+}
+
+.demo-icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    background: oklch(0.20 0.025 140 / 0.75);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    color: white;
+    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    transition: transform 0.2s;
+}
+
+.demo-tab-card:hover .demo-icon-wrap { transform: scale(1.1); }
+
+.demo-play-overlay .icon-pause { display: none; }
+.demo-tab-card.playing .icon-play { display: none; }
+.demo-tab-card.playing .icon-pause { display: block; }
+
+.demo-tab-card.playing .demo-play-overlay {
+    opacity: 0;
+    background: transparent;
+}
+
+.demo-tab-card.playing:hover .demo-play-overlay,
+.demo-tab-card.playing:focus-visible .demo-play-overlay {
+    opacity: 1;
+}
+
+/* Timestamp + seekable progress bar */
+.demo-video-controls {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 14px 10px 8px;
+    background: linear-gradient(transparent, var(--demo-control-fade));
+    font-size: 9.5px;
+    color: oklch(0.88 0.015 90);
+    z-index: 1;
+}
+
+.demo-time,
+.demo-duration {
+    flex-shrink: 0;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+    font-variant-numeric: tabular-nums;
+}
+
+.demo-duration {
+    font-weight: 600;
+    opacity: 0.7;
+}
+
+/* Decorative player chrome: play state glyph, volume, HD, fullscreen */
+.demo-ctrl-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    opacity: 0.85;
+}
+
+.demo-ctrl-play .icon-pause { display: none; }
+.demo-tab-card.playing .demo-ctrl-play .icon-play { display: none; }
+.demo-tab-card.playing .demo-ctrl-play .icon-pause { display: block; }
+
+.demo-ctrl-badge {
+    flex-shrink: 0;
+    font-size: 7px;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    line-height: 1;
+    padding: 2px 3px;
+    border: 1px solid currentColor;
+    border-radius: 3px;
+    opacity: 0.65;
+}
+
+.demo-progress {
+    position: relative;
+    flex: 1;
+    height: 5px;
+    border-radius: 99px;
+    background: var(--demo-track);
+    cursor: pointer;
+}
+
+/* Generous invisible hit area for seeking */
+.demo-progress::before {
+    content: '';
+    position: absolute;
+    inset: -8px 0;
+}
+
+/* Buffered range behind the playhead, like a real player */
+.demo-progress-buffer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 56%;
+    border-radius: 99px;
+    background: oklch(0.92 0.02 95 / 0.14);
+    pointer-events: none;
+}
+
+.demo-progress-fill {
+    position: relative;
+    height: 100%;
+    width: 30%;
+    border-radius: 99px;
+    background: linear-gradient(90deg, oklch(0.68 0.13 150), oklch(0.62 0.14 45));
+    pointer-events: none;
+}
+
+/* Scrub thumb, revealed on hover */
+.demo-progress-fill::after {
+    content: '';
+    position: absolute;
+    right: -5px;
+    top: 50%;
+    width: 11px;
+    height: 11px;
+    margin-top: -5.5px;
+    border-radius: 50%;
+    background: oklch(0.88 0.015 90);
+    box-shadow: 0 0 6px oklch(0.68 0.13 150 / 0.8);
+    opacity: 0;
+    transform: scale(0.6);
+    transition: opacity 0.2s, transform 0.2s;
+}
+
+.demo-tab-card:hover .demo-progress-fill::after {
+    opacity: 1;
+    transform: scale(1);
+}
+
+/* Sync pulse ring on both cards */
+.demo-tab-card.sync-pulse {
+    animation: demoCardPulse 0.9s ease-out;
+}
+
+@keyframes demoCardPulse {
+    0% { box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45), 0 0 0 0 oklch(0.68 0.13 150 / 0.65); }
+    100% { box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45), 0 0 0 22px oklch(0.68 0.13 150 / 0); }
+}
+
+/* The existing popup mockup slides in at the right edge, dropping out of
+   the toolbar icon of the foreground window */
+.hero-demo-scene .extension-mockup {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 5;
+    width: 292px;
+    width: min(320px, 66cqw);
+    margin: 0;
+    transform-origin: top right;
+    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s, visibility 0.45s;
+}
+
+@media (min-width: 1025px) {
+    .hero-demo-scene .extension-mockup {
+        /* Counter the content shift so the opened panel is balanced below nav. */
+        bottom: 0.625rem;
+    }
+}
+
+.hero-demo-scene:not(.popup-open) .extension-mockup {
+    transform: translate(2%, -3%) scale(0.5);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+}
+
+/* Ghost cursor for the automated walkthrough */
+.demo-cursor {
+    position: absolute;
+    top: 52%;
+    left: 46%;
+    z-index: 20;
+    width: 22px;
+    height: 22px;
+    opacity: 0;
+    pointer-events: none;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
+    transition: top 0.65s cubic-bezier(0.45, 0.05, 0.25, 1), left 0.65s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.35s;
+}
+
+.demo-cursor.visible { opacity: 1; }
+
+.demo-cursor svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.demo-cursor::before {
+    content: '';
+    position: absolute;
+    top: -6px;
+    left: -8px;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 2px solid oklch(0.75 0.13 150);
+    opacity: 0;
+    transform: scale(0.35);
+}
+
+.demo-cursor.clicking::before {
+    animation: demoClickRipple 0.45s ease-out;
+}
+
+@keyframes demoClickRipple {
+    0% { opacity: 0.9; transform: scale(0.35); }
+    100% { opacity: 0; transform: scale(1.25); }
+}
+
+/* Caption below the scene */
+.demo-hint {
+    margin: 0.75rem auto 0;
+    max-width: min(100%, 34rem);
+    text-align: center;
+    font-size: 0.82rem;
+    line-height: 1.45;
+    color: var(--text-muted);
+    opacity: 0;
+    transition: opacity 0.6s;
+}
+
+.demo-hint.show { opacity: 0.75; }
+
+/* Tablet/Small Desktop: fall back to the classic static popup mockup */
+@media (max-width: 1023px) {
+    .hero-demo-scene,
+    .hero-demo-scene.popup-open {
+        height: auto;
+        max-width: 320px;
+        margin: 0 auto;
+    }
+
+    .demo-tab-card,
+    .demo-tab-stack,
+    .demo-sync-chip,
+    .demo-cursor,
+    .demo-hint {
+        display: none !important;
+    }
+
+    .hero-demo-scene .extension-mockup,
+    .hero-demo-scene:not(.popup-open) .extension-mockup {
+        position: static;
+        width: 100%;
+        transform: none;
+        opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .hero-demo-scene:not(.popup-open) .demo-ext-launcher::after {
+        animation: none;
+    }
+}
+
+/* --- Story walkthrough additions: room creation, invite flight, film --- */
+
+/* The stick-figure film carries the motion now — keep only the color drift
+   on the backdrop (the animation shorthand resets play-state, so re-pause) */
+.demo-video-art {
+    animation: demoArtShift 7s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+.demo-film {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.hero-demo-scene .film-stars { fill: var(--demo-stars) !important; }
+.hero-demo-scene .film-clouds { fill: var(--demo-stars) !important; }
+.hero-demo-scene .film-mist-scroll { fill: var(--demo-stars) !important; }
+.hero-demo-scene .film-shooting-star { stroke: var(--demo-stars) !important; }
+.hero-demo-scene .film-moon {
+    fill: var(--demo-moon) !important;
+    filter: drop-shadow(0 0 6px var(--demo-moon));
+}
+.hero-demo-scene .film-mtn-scroll { fill: var(--demo-mountain) !important; }
+.hero-demo-scene .film-mid-scroll > * { fill: var(--demo-midground) !important; }
+.hero-demo-scene .film-fore-scroll > * { fill: var(--demo-foreground) !important; }
+
+/* By day the birds read as silhouettes, not chalk marks */
+html.theme-light .hero-demo-scene .film-birds { stroke: oklch(0.32 0.06 145 / 0.65); }
+html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { stroke: oklch(0.32 0.06 145 / 0.75); }
+
+/* Stars: staggered twinkle so the sky feels alive */
+.film-star {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: filmTwinkle 2.8s ease-in-out infinite;
+}
+.film-star:nth-child(2) { animation-duration: 3.4s; animation-delay: 0.5s; }
+.film-star:nth-child(3) { animation-duration: 2.4s; animation-delay: 1.1s; }
+.film-star:nth-child(4) { animation-duration: 3.6s; animation-delay: 0.3s; }
+.film-star:nth-child(5) { animation-duration: 2.6s; animation-delay: 1.6s; }
+.film-star:nth-child(6) { animation-duration: 3.2s; animation-delay: 0.8s; }
+.film-star:nth-child(7) { animation-duration: 2.2s; animation-delay: 1.3s; }
+
+@keyframes filmTwinkle {
+    0%, 100% { opacity: 0.25; transform: scale(0.85); }
+    50% { opacity: 1; transform: scale(1.15); }
+}
+
+/* Moon: gentle glow pulse + slow arc drift. The drift lives on the wrapper
+   group so the craters travel with the disc; the glow stays on the circle.
+   (Step-3 uses a bare .film-moon without wrapper — filmMoon still covers it.) */
+.film-moon-g {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: filmMoonDrift 6s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+.film-moon-g .film-moon {
+    animation-name: filmMoonGlow;
+}
+
+@keyframes filmMoonDrift {
+    from { transform: translate(0, 0); }
+    to { transform: translate(-6px, 3px); }
+}
+
+@keyframes filmMoonGlow {
+    from { filter: drop-shadow(0 0 4px oklch(0.95 0.01 100 / 0.5)); }
+    to { filter: drop-shadow(0 0 10px oklch(0.95 0.01 100 / 0.95)); }
+}
+
+.film-moon {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: filmMoon 6s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+@keyframes filmMoon {
+    from { transform: translate(0, 0); filter: drop-shadow(0 0 4px oklch(0.95 0.01 100 / 0.5)); }
+    to { transform: translate(-6px, 3px); filter: drop-shadow(0 0 10px oklch(0.95 0.01 100 / 0.95)); }
+}
+
+.film-mtn-scroll {
+    transform: translateX(var(--scroll-back, 0px));
+}
+.film-mid-scroll {
+    transform: translateX(var(--scroll-mid, 0px));
+}
+.film-fore-scroll {
+    transform: translateX(var(--scroll-fore, 0px));
+}
+/* A single gliding bird carries the scene: the outer group rides the
+   JS-driven drift vars, the inner group flaps its wings via scaleY. */
+.film-hero-bird-drift {
+    transform: translate(var(--lantern-x, 0px), var(--bounce-y, 0px));
+}
+
+.film-hero-bird {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: filmWingFlap 0.85s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+@keyframes filmWingFlap {
+    from { transform: scaleY(1); }
+    to { transform: scaleY(0.5); }
+}
+
+/* Twinkle & Glow play state bindings */
+.film-star {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: filmTwinkle 2.8s ease-in-out infinite;
+    animation-play-state: paused;
+}
+.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star, .film-birds, .film-hero-bird) {
+    animation-play-state: running;
+}
+
+/* Drifting clouds: gentle back-and-forth so there is no wrap pop */
+.film-cloud {
+    transform-box: fill-box;
+    animation: filmCloudDrift 26s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+.film-cloud-2 {
+    animation-duration: 34s;
+    animation-delay: -12s;
+}
+
+@keyframes filmCloudDrift {
+    from { transform: translateX(-6px); }
+    to { transform: translateX(10px); }
+}
+
+/* A shooting star streaks across the sky every few loops */
+.film-shooting-star {
+    opacity: 0;
+    animation: filmShoot 11s linear infinite;
+    animation-play-state: paused;
+}
+
+@keyframes filmShoot {
+    0%, 87% { opacity: 0; transform: translate(0, 0); }
+    89% { opacity: 0.9; }
+    95%, 100% { opacity: 0; transform: translate(-46px, 20px); }
+}
+
+/* A distant flock crosses the valley, fading out mid-flight */
+.film-birds {
+    animation: filmBirds 16s linear infinite;
+    animation-play-state: paused;
+}
+
+@keyframes filmBirds {
+    0% { transform: translate(0, 0); opacity: 0; }
+    4% { opacity: 0.75; }
+    42% { opacity: 0.75; }
+    48%, 100% { transform: translate(185px, -12px); opacity: 0; }
+}
+
+/* Valley mist rides the slow background parallax between tree layers */
+.film-mist-scroll {
+    transform: translateX(var(--scroll-back, 0px));
+}
+
+/* Play button pulsing indicator at the end of the walkthrough */
+.hero-demo-scene.demo-complete #demo-tab-a:not(.playing) .demo-icon-wrap {
+    animation: playButtonPulse 1.6s ease-in-out infinite;
+    border-color: oklch(0.68 0.13 150);
+    box-shadow: 0 0 15px oklch(0.68 0.13 150 / 0.8);
+}
+@keyframes playButtonPulse {
+    0%, 100% { transform: scale(1); box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.5); }
+    50% { transform: scale(1.12); box-shadow: 0 0 20px oklch(0.68 0.13 150 / 0.9); }
+}
+
+/* Seek-reset: scrubbing restarts animations from frame zero */
+.demo-film.demo-reset * {
+    animation: none !important;
+}
+
+/* Seek-break: scrubbing the timeline visibly glitches both videos so the
+   jump reads as a real cut instead of an invisible time update. A scanline
+   sweep + brightness pop, and the film animations restart mid-stride. */
+.demo-video-art { transition: filter 0.12s ease-out; }
+
+.demo-tab-card.demo-seeking .demo-video-art {
+    animation-play-state: paused;
+    filter: brightness(1.9) saturate(1.4) blur(0.6px);
+}
+
+.demo-tab-card .demo-seek-sweep {
+    position: absolute;
+    inset: 0;
+    z-index: 4;
+    pointer-events: none;
+    opacity: 0;
+    background: linear-gradient(90deg,
+        transparent 0%,
+        oklch(0.75 0.13 150 / 0.35) 20%,
+        rgba(255, 255, 255, 0.55) 50%,
+        oklch(0.75 0.13 150 / 0.35) 80%,
+        transparent 100%);
+    mix-blend-mode: screen;
+    transform: translateX(-100%);
+}
+
+.demo-tab-card.demo-seeking .demo-seek-sweep {
+    animation: demoSeekSweep 0.34s ease-out;
+}
+
+@keyframes demoSeekSweep {
+    0% { opacity: 0; transform: translateX(-100%); }
+    20% { opacity: 1; }
+    100% { opacity: 0; transform: translateX(100%); }
+}
+
+/* The sync chip only appears once the room is connected (story progression) */
+.demo-sync-chip {
+    opacity: 0;
+    transform: translateY(-4px);
+    pointer-events: none;
+    transition: background 0.3s, border-color 0.3s, color 0.3s, opacity 0.4s, transform 0.4s;
+}
+
+.hero-demo-scene.connected .demo-sync-chip {
+    opacity: 1;
+    transform: none;
+    pointer-events: auto;
+}
+
+/* Toast on the friend's window ("Room joined", "Tab selected") */
+.demo-tab-toast {
+    position: absolute;
+    top: 36px;
+    left: 50%;
+    transform: translate(-50%, -6px);
+    z-index: 2;
+    padding: 4px 10px;
+    border-radius: 99px;
+    background: oklch(0.20 0.025 140 / 0.92);
+    border: 1px solid oklch(0.68 0.13 150 / 0.5);
+    color: oklch(0.85 0.07 150);
+    font-size: 9.5px;
+    font-weight: 700;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.demo-tab-toast.show {
+    opacity: 1;
+    transform: translate(-50%, 0);
+}
+
+/* Invite link pill flying from the popup to the friend's window */
+.demo-invite-fly {
+    position: absolute;
+    z-index: 30;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 10px;
+    border-radius: 99px;
+    background: var(--accent);
+    color: var(--text-on-green);
+    font-size: 9.5px;
+    font-weight: 700;
+    white-space: nowrap;
+    box-shadow: 0 6px 18px oklch(0.68 0.13 150 / 0.5);
+    opacity: 0;
+    pointer-events: none;
+    transition: left 0.75s cubic-bezier(0.3, 0.7, 0.4, 1), top 0.75s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.3s;
+}
+
+/* Attention flash (e.g. on the video select while "choosing the tab") */
+.demo-attn {
+    animation: demoAttn 0.7s ease-in-out 2;
+}
+
+@keyframes demoAttn {
+    50% { box-shadow: 0 0 0 3px oklch(0.68 0.13 150 / 0.75); }
+}
+
+
+/* --- Bento Card Host Control Mockup Additions --- */
+
+.bento-content-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+    width: 100%;
+}
+
+.bento-host-control-mockup {
+    background: oklch(0.20 0.025 140 / 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 0.75rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.bento-mockup-header {
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    font-weight: 700;
+}
+
+.bento-mockup-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    font-size: 0.75rem;
+    color: white;
+    font-weight: 600;
+    margin-top: 2px;
+}
+
+/* Custom switch toggle representation */
+.bento-switch-wrap {
+    position: relative;
+    display: inline-block;
+    width: 28px;
+    height: 16px;
+    flex-shrink: 0;
+}
+
+.bento-switch-wrap input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.bento-switch-slider {
+    position: absolute;
+    cursor: default;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 16px;
+    transition: .3s;
+}
+
+.bento-switch-slider:before {
+    position: absolute;
+    content: "";
+    height: 10px;
+    width: 10px;
+    left: 2px;
+    bottom: 2px;
+    background-color: oklch(0.68 0.02 100);
+    border-radius: 50%;
+    transition: .3s;
+}
+
+.bento-switch-wrap input:checked + .bento-switch-slider {
+    background-color: oklch(0.68 0.13 150 / 0.25);
+    border-color: oklch(0.68 0.13 150 / 0.6);
+    box-shadow: 0 0 8px oklch(0.68 0.13 150 / 0.3);
+}
+
+.bento-switch-wrap input:checked + .bento-switch-slider:before {
+    transform: translateX(12px);
+    background-color: var(--accent);
+    box-shadow: 0 0 6px var(--accent-glow);
+}
+
+/* --- Step 2 & Step 3 Visual Redesign Styles --- */
+
+/* Step 2 Browser video player mock */
+.illus-video-player-mock {
+    width: 85%;
+    height: 65%;
+    background: linear-gradient(135deg, oklch(0.20 0.04 145), oklch(0.12 0.02 138));
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-top: 15px;
+}
+
+.video-mock-play-button {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 0.8rem;
+    cursor: default;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.video-mock-timeline {
+    position: absolute;
+    bottom: 8px;
+    left: 8px;
+    right: 8px;
+    height: 3px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 2px;
+}
+
+.video-mock-timeline-fill {
+    width: 35%;
+    height: 100%;
+    background: var(--accent);
+    border-radius: 2px;
+}
+
+/* Step 2 extension popup dropdown alignment */
+.illus-extension-popup.drop-down {
+    top: 2.2rem;
+    right: 0.6rem;
+    width: 145px;
+    animation: popup-dropdown-float 4s ease-in-out infinite;
+}
+
+@keyframes popup-dropdown-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-3px); }
+}
+
+.status-badge-select {
+    background: oklch(0.68 0.13 150 / 0.12);
+    color: oklch(0.85 0.07 150);
+    font-size: 0.58rem;
+    font-weight: 700;
+    padding: 2px 6px;
+    border-radius: 4px;
+    border: 1px solid oklch(0.68 0.13 150 / 0.2);
+    display: inline-flex;
+    align-items: center;
+    text-transform: uppercase;
+    letter-spacing: 0.2px;
+}
+
+.popup-form-group {
+    margin-top: 6px;
+    width: 100%;
+    text-align: left;
+}
+
+.popup-form-label {
+    display: block;
+    font-size: 0.6rem;
+    color: var(--text-muted);
+    margin-bottom: 4px;
+    font-weight: 700;
+}
+
+.popup-select-wrapper {
+    position: relative;
+    width: 100%;
+}
+
+.popup-select-mock {
+    width: 100%;
+    background: var(--card);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: white;
+    padding: 6px;
+    border-radius: 6px;
+    font-family: inherit;
+    font-size: 0.62rem;
+    outline: none;
+    appearance: none;
+    -webkit-appearance: none;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+    display: block;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.popup-cursor-pointer {
+    position: absolute;
+    bottom: -15px;
+    right: 15px;
+    font-size: 1.1rem;
+    pointer-events: none;
+    z-index: 10;
+    animation: pointer-click 1.6s infinite ease-in-out;
+}
+
+@keyframes pointer-click {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(-3px, -3px) scale(0.9); }
+}
+
+/* Step 3 forest movie continuous animation bindings */
+.step-illustration-3 .film-mtn-scroll {
+    animation: scrollBack 12s linear infinite !important;
+}
+.step-illustration-3 .film-mid-scroll {
+    animation: scrollMid 6s linear infinite !important;
+}
+.step-illustration-3 .film-fore-scroll {
+    animation: scrollFore 3s linear infinite !important;
+}
+.step-illustration-3 .film-hero-bird {
+    animation: filmWingFlap 0.85s ease-in-out infinite !important;
+    animation-direction: alternate !important;
+}
+
+@keyframes scrollBack {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-160px); }
+}
+@keyframes scrollMid {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-160px); }
+}
+@keyframes scrollFore {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-160px); }
+}
+
+/* --- High Fidelity Micro-Animations & Identity additions --- */
+
+/* Scroll progress bar glowing line at the top */
+.scroll-progress-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 3px;
+    background: linear-gradient(90deg, var(--accent), oklch(0.62 0.14 45), oklch(0.62 0.14 45));
+    z-index: 9999;
+    width: 0%;
+    transition: width 0.1s ease-out;
+    box-shadow: 0 0 8px var(--accent-glow);
+}
+
+.scroll-progress-bar::after {
+    content: '';
+    position: absolute;
+    right: -3px;
+    top: 50%;
+    width: 10px;
+    height: 7px;
+    border-radius: 0 70% 0 70%;
+    background: var(--accent-green);
+    box-shadow: 0 0 6px var(--accent-glow);
+    transform: translateY(-50%) rotate(24deg);
+}
+
+/* Navigation logo pop & spin */
+.nav-logo-img {
+    animation: logo-entrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+    transform-origin: center;
+    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+    will-change: transform, opacity;
+}
+
+.nav-logo-img:hover {
+    transform: scale(1.15) rotate(360deg);
+}
+
+@keyframes logo-entrance {
+    0% {
+        transform: scale(0) rotate(-180deg);
+        opacity: 0;
+    }
+    100% {
+        transform: scale(1) rotate(0deg);
+        opacity: 1;
+    }
+}
+
+/* Glowing reflection sweep on buttons */
+.btn-primary, .btn-firefox, .btn-secondary {
+    position: relative;
+    overflow: hidden;
+}
+
+.btn-primary::after, .btn-firefox::after, .btn-secondary::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.25) 50%,
+        rgba(255, 255, 255, 0) 100%
+    );
+    transform: skewX(-25deg);
+    transition: none;
+    pointer-events: none;
+}
+
+.btn-primary:hover::after, .btn-firefox:hover::after, .btn-secondary:hover::after {
+    left: 100%;
+    transition: left 0.8s ease-in-out;
+}
+
+/* Step 2 mockup control panel styles */
+.popup-mock-controls {
+    display: flex;
+    gap: 8px;
+    margin-top: 4px;
+    width: 100%;
+}
+
+.popup-mock-btn {
+    flex: 1;
+    text-align: center;
+    padding: 6px;
+    border-radius: 6px;
+    font-size: 0.62rem;
+    font-weight: 700;
+    color: white;
+    cursor: default;
+    opacity: 0.75;
+}
+
+.popup-mock-btn.play {
+    background: oklch(0.68 0.13 150);
+    color: var(--text-on-green);
+}
+
+.popup-mock-btn.pause {
+    background: oklch(0.55 0.15 25);
+}
+
+/* Phone and portrait-tablet widths: keep the full hero demo out of the page
+   flow. The demo modal mounts the same node in its own fixed layer. */
+@media (max-width: 900px) {
+    .hero-grid > .hero-mockup-wrapper {
+        display: none !important;
+    }
+}
+
+@media (max-width: 900px) {
+    .hero-github-cta {
+        display: none;
+    }
+
+    .btn-demo-mobile {
+        display: inline-flex;
+    }
+}
+
+body.mobile-demo-open {
+    overflow: hidden;
+}
+
+.mobile-demo-modal[hidden] {
+    display: none;
+}
+
+.mobile-demo-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 2400;
+    display: flex;
+    flex-direction: column;
+    padding: 0 !important;
+}
+
+.mobile-demo-backdrop {
+    position: absolute;
+    inset: 0;
+    background: oklch(0.10 0.01 135 / 0.25);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+}
+
+.mobile-demo-panel {
+    position: relative;
+    z-index: 1;
+    width: 100% !important;
+    height: 100% !important;
+    max-height: none !important;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: transparent !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+}
+
+.mobile-demo-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.85rem 0.95rem;
+    border-bottom: none !important;
+    flex-shrink: 0;
+}
+
+.mobile-demo-header h2 {
+    margin: 0;
+    font-size: 0.95rem;
+    line-height: 1.2;
+    color: oklch(0.96 0.01 90);
+}
+
+.mobile-demo-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 38px;
+    height: 38px;
+    padding: 0;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 10px;
+    background: oklch(0.27 0.035 130 / 0.72);
+    color: oklch(0.88 0.015 90);
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+.mobile-demo-stage {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden !important;
+    padding: 1rem 0.75rem 1.25rem;
+    overscroll-behavior: contain;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    align-items: center !important;
+}
+
+/* Ensure the demo scene canvas is transparent inside the modal to let the glass backdrop blend */
+.mobile-demo-stage .hero-demo-scene {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+/* Ensure the close button hover stays consistent in dark glass theme */
+.mobile-demo-close:hover {
+    background: rgba(51, 65, 85, 0.85) !important;
+}
+
+/* Light Mode Frosted Glass overrides */
+html.theme-light .mobile-demo-backdrop {
+    background: oklch(0.95 0.01 100 / 0.2) !important;
+}
+
+html.theme-light .mobile-demo-panel {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+html.theme-light .mobile-demo-header {
+    border-bottom: none !important;
+}
+
+html.theme-light .mobile-demo-header h2 {
+    color: var(--text) !important;
+}
+
+html.theme-light .mobile-demo-close {
+    background: rgba(255, 255, 255, 0.4) !important;
+    border-color: oklch(0.20 0.025 140 / 0.1) !important;
+    color: var(--text) !important;
+}
+
+html.theme-light .mobile-demo-close:hover {
+    background: rgba(255, 255, 255, 0.75) !important;
+}
+
+.mobile-demo-stage .hero-mockup-wrapper {
+    display: flex !important;
+    position: relative;
+    width: min(100%, 560px);
+    margin: 0 auto;
+    will-change: transform;
+}
+
+/* Mobile S / short screens */
+@media (max-height: 600px) {
+    .mobile-demo-stage .hero-mockup-wrapper {
+        transform: scale(0.68) !important;
+        transform-origin: top center !important;
+        height: 380px !important;
+    }
+}
+
+/* Mobile M/L / medium screens */
+@media (min-height: 601px) and (max-height: 740px) {
+    .mobile-demo-stage .hero-mockup-wrapper {
+        transform: scale(0.82) !important;
+        transform-origin: top center !important;
+        height: 460px !important;
+    }
+}
+
+/* Default / tall screens */
+@media (min-height: 741px) {
+    .mobile-demo-stage .hero-mockup-wrapper {
+        transform: scale(1) !important;
+        transform-origin: top center !important;
+        height: 550px !important;
+    }
+}
+
+.mobile-demo-stage .hero-demo-scene,
+.mobile-demo-stage .hero-demo-scene.popup-open {
+    position: relative;
+    width: 100%;
+    height: 100% !important;
+    max-width: none;
+    margin: 0 auto;
+}
+
+.mobile-demo-stage .demo-tab-stack {
+    display: block !important;
+    position: static !important;
+    height: auto !important;
+}
+
+.mobile-demo-stage .demo-tab-card {
+    display: block !important;
+}
+
+.mobile-demo-stage .demo-sync-chip {
+    display: inline-flex !important;
+}
+
+.mobile-demo-stage .demo-cursor {
+    display: block !important;
+}
+
+.mobile-demo-stage .demo-hint {
+    display: block !important;
+    position: absolute !important;
+    left: 0 !important;
+    right: 0 !important;
+    top: auto !important;
+    bottom: 12px !important;
+    margin: 0 auto !important;
+    padding-inline: 1rem;
+    max-width: 90%;
+    z-index: 10;
+}
+
+.mobile-demo-stage .hero-demo-scene .extension-mockup {
+    position: absolute;
+    bottom: 0 !important;
+    right: 0;
+    z-index: 15 !important;
+    width: min(320px, 66cqw);
+    transform: none !important;
+    transform-origin: top right !important;
+    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s, visibility 0.45s;
+}
+
+.mobile-demo-stage .hero-demo-scene:not(.popup-open) .extension-mockup {
+    bottom: 0 !important;
+    transform: translate(2%, -3%) scale(0.5) !important;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+}
+
+@media (max-width: 380px) {
+    .mobile-demo-modal {
+        padding: 0 !important;
+    }
+
+    .mobile-demo-stage {
+        padding-inline: 0.45rem !important;
+    }
+}
+
+/* Performance optimization for off-screen sections (below the fold) */
+.lazy-section {
+    content-visibility: auto;
+}
+
+.use-cases-section {
+    contain-intrinsic-block-size: auto 600px;
+}
+
+.comparison-section {
+    contain-intrinsic-block-size: auto 800px;
+}
+
+#self-hosting {
+    contain-intrinsic-block-size: auto 400px;
+}
+
+#faq {
+    contain-intrinsic-block-size: auto 450px;
+}
+
+@media (max-width: 768px) {
+    .use-cases-section {
+        contain-intrinsic-block-size: auto 900px;
+    }
+
+    .comparison-section {
+        contain-intrinsic-block-size: auto 1100px;
+    }
+
+    #self-hosting {
+        contain-intrinsic-block-size: auto 550px;
+    }
+
+    #faq {
+        contain-intrinsic-block-size: auto 700px;
+    }
+}
+
+/* Final responsive hierarchy overrides. Keep these last: the landing page has
+   several component-level media blocks above that intentionally own geometry. */
+@media (max-width: 768px) {
+    .container {
+        padding-inline: 1.15rem;
+    }
+
+    section {
+        padding-block: 4.25rem;
+    }
+
+    .hero-text h1,
+    .section-title,
+    #how-it-works h2,
+    #self-hosting h2,
+    #faq h2 {
+        font-size: clamp(2rem, 9vw, 2.65rem) !important;
+        text-wrap: balance;
+    }
+
+    .cta-group {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        align-items: stretch;
+        width: 100%;
+    }
+
+    .cta-group .btn {
+        width: 100%;
+        min-height: 48px;
+        justify-content: center;
+    }
+}
+
+@media (max-width: 430px) {
+    .cta-group {
+        grid-template-columns: 1fr;
+    }
+}
diff --git a/website/styles/alternatives.css b/website/styles/alternatives.css
new file mode 100644
index 0000000..dd2e66c
--- /dev/null
+++ b/website/styles/alternatives.css
@@ -0,0 +1,23 @@
+/* --- Alternatives Hub Styles --- */
+.guide-card {
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, border-color 0.25s ease !important;
+}
+.guide-card:hover {
+    transform: translateY(-4px);
+    background-color: rgba(255, 255, 255, 0.07) !important;
+    border-color: rgba(255, 255, 255, 0.22) !important;
+    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.4);
+}
+.guide-card .btn-primary {
+    transition: background-color 0.2s ease, transform 0.1s ease;
+}
+.guide-card .btn-primary:active {
+    transform: scale(0.97);
+}
+@media (max-width: 640px) {
+    .guides-grid {
+        grid-template-columns: 1fr !important;
+        gap: 1.25rem !important;
+    }
+}
+
diff --git a/website/styles/demo.css b/website/styles/demo.css
new file mode 100644
index 0000000..e33fb87
--- /dev/null
+++ b/website/styles/demo.css
@@ -0,0 +1,1652 @@
+/* --- Hero Live Demo Scene (two synced tabs + extension popup) --- */
+.hero-mockup-wrapper {
+    flex-direction: column;
+    gap: 0.9rem;
+    container-type: inline-size;
+}
+
+/* Fixed height that already fits the open popup, so toggling it never changes
+   layout (the vertically centered hero never jumps). The empty lower area is
+   the invisible room the popup drops into.
+
+   Do not move .hero-mockup-wrapper down to align the headline and demo tops:
+   the extension popup is bottom-anchored inside this scene, so moving the whole
+   wrapper destroys the vertical balance and leaves no breathing room below. */
+.hero-demo-scene {
+    --demo-content-y: 0px;
+    position: relative;
+    width: 100%;
+    height: max(calc(59cqw + 100px), 548px);
+}
+
+.demo-tab-stack {
+    position: relative;
+    width: 100%;
+    height: calc(59cqw + 100px + var(--demo-content-y));
+}
+
+@media (min-width: 1025px) {
+    .hero-demo-scene {
+        /* Balance the demo inside the visible hero area below the fixed navbar.
+           Shift the scene content, not the hero text or grid. */
+        --demo-content-y: 2.75rem;
+    }
+}
+
+/* While initializing, suppress all transitions so the popup can start closed
+   without a visible open->closed animation on page load. */
+.hero-demo-scene.demo-no-anim,
+.hero-demo-scene.demo-no-anim * {
+    transition-duration: 0s !important;
+}
+
+/* Sync status chip: green "in sync" at rest, flashes the broadcast event */
+.demo-sync-chip {
+    position: absolute;
+    top: var(--demo-content-y);
+    left: 2px;
+    z-index: 8;
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    padding: 5px 12px;
+    border-radius: 99px;
+    background: oklch(0.68 0.13 150 / 0.12);
+    border: 1px solid oklch(0.68 0.13 150 / 0.35);
+    color: #86efac;
+    font-family: inherit;
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    cursor: default;
+    transition: background 0.3s, border-color 0.3s, color 0.3s;
+}
+
+.demo-chip-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: oklch(0.68 0.13 150);
+    box-shadow: 0 0 8px oklch(0.68 0.13 150);
+    transition: background 0.3s, box-shadow 0.3s;
+}
+
+.demo-sync-chip .demo-chip-event { display: none; }
+
+.demo-sync-chip.event {
+    background: oklch(0.68 0.13 150 / 0.14);
+    border-color: oklch(0.68 0.13 150 / 0.45);
+    color: oklch(0.85 0.07 150);
+}
+
+.demo-sync-chip.event .demo-chip-dot {
+    background: oklch(0.75 0.13 150);
+    box-shadow: 0 0 8px oklch(0.75 0.13 150);
+}
+
+.demo-sync-chip.event .demo-chip-label-sync { display: none; }
+.demo-sync-chip.event .demo-chip-event { display: inline; }
+
+@keyframes demoBlink {
+    50% { opacity: 0.35; }
+}
+
+/* Video tab cards: a clean window cascade — the right one is in front */
+.demo-tab-card {
+    position: absolute;
+    width: 310px;
+    width: 70cqw;
+    background: var(--demo-card);
+    border: 1px solid rgba(255, 255, 255, 0.09);
+    border-radius: 14px;
+    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45), inset 0 1px rgba(255, 255, 255, 0.05);
+    overflow: hidden;
+    cursor: pointer;
+    user-select: none;
+    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s;
+}
+
+.demo-tab-card:hover,
+.demo-tab-card:focus-visible {
+    border-color: oklch(0.68 0.13 150 / 0.55);
+}
+
+/* Card A = the foreground window at the top right ("your" browser,
+   hosts the extension icon in its toolbar) */
+.demo-tab-a {
+    top: calc(49px + var(--demo-content-y));
+    right: -3%;
+    transform: rotate(1.2deg);
+    transform-origin: top right;
+    z-index: 3;
+}
+
+.demo-tab-a:hover {
+    z-index: 4;
+    transform: rotate(1.2deg) scale(1.02);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65), 0 0 20px oklch(0.68 0.13 150 / 0.2);
+}
+
+/* Card B = the friend's window, lower left, tucked behind */
+.demo-tab-b {
+    top: 142px;
+    top: calc(20cqw + 67px + var(--demo-content-y));
+    left: -3%;
+    transform: rotate(-1.6deg);
+    transform-origin: top left;
+    z-index: 2;
+}
+
+.demo-tab-b:hover {
+    z-index: 4;
+    transform: rotate(-1.6deg) scale(1.02);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65), 0 0 20px oklch(0.68 0.13 150 / 0.2);
+}
+
+/* When the popup slides in from the right edge, the tabs step aside */
+.hero-demo-scene.popup-open .demo-tab-a {
+    top: calc(22px + var(--demo-content-y));
+    transform: rotate(1deg) translate(-44%, 20%) scale(0.88);
+}
+
+.hero-demo-scene.popup-open .demo-tab-a:hover {
+    z-index: 4;
+    transform: rotate(1deg) translate(-44%, 20%) scale(0.92);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65), 0 0 20px oklch(0.68 0.13 150 / 0.2);
+}
+
+.hero-demo-scene.popup-open .demo-tab-b {
+    top: calc(20cqw + 40px + var(--demo-content-y));
+    transform: rotate(-1.6deg) translate(0, 14%) scale(0.94);
+}
+
+.hero-demo-scene.popup-open .demo-tab-b:hover {
+    z-index: 4;
+    transform: rotate(-1.6deg) translate(0, 14%) scale(0.98);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65), 0 0 20px oklch(0.68 0.13 150 / 0.2);
+}
+
+.demo-tab-titlebar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px 6px 10px;
+    background: var(--demo-toolbar);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    font-size: 10.5px;
+    color: var(--text-muted);
+    font-weight: 600;
+}
+
+.demo-tab-dots {
+    display: flex;
+    gap: 4px;
+    flex-shrink: 0;
+}
+
+.demo-tab-dots i {
+    display: block;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: oklch(0.32 0.03 125);
+}
+
+.demo-tab-title {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.demo-tab-title svg { flex-shrink: 0; }
+
+.demo-tab-user {
+    flex-shrink: 0;
+    font-size: 9.5px;
+    font-weight: 700;
+    padding: 2px 7px;
+    border-radius: 99px;
+}
+
+.demo-user-a {
+    color: oklch(0.80 0.10 150);
+    background: oklch(0.68 0.13 150 / 0.15);
+}
+
+.demo-user-b {
+    color: #86efac;
+    background: oklch(0.68 0.13 150 / 0.12);
+}
+
+/* Extension launcher pinned in the foreground window's toolbar */
+.demo-ext-launcher {
+    position: relative;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border-radius: 7px;
+    background: oklch(0.30 0.03 130);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    cursor: pointer;
+    transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s;
+}
+
+.demo-ext-launcher img {
+    display: block;
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+}
+
+.demo-ext-launcher:hover {
+    border-color: var(--accent);
+    transform: translateY(-1px);
+}
+
+.demo-ext-launcher:active {
+    transform: scale(0.94);
+}
+
+.hero-demo-scene.popup-open .demo-ext-launcher {
+    border-color: oklch(0.68 0.13 150 / 0.7);
+    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.45);
+}
+
+.demo-ext-launcher::after {
+    content: '';
+    position: absolute;
+    top: -3px;
+    right: -3px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: oklch(0.68 0.13 150);
+    box-shadow: 0 0 8px oklch(0.68 0.13 150);
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.hero-demo-scene:not(.popup-open) .demo-ext-launcher:not(.demo-ext-static)::after {
+    opacity: 1;
+    animation: demoBlink 1.4s ease-in-out infinite;
+}
+
+/* Card B shows the same extension icon, purely to signal the friend has it
+   installed too. It is not interactive and does not blink or glow. */
+.demo-ext-static,
+.demo-ext-static:hover {
+    cursor: default;
+    border-color: rgba(255, 255, 255, 0.12);
+    transform: none;
+    box-shadow: none;
+}
+
+.demo-ext-static::after { display: none; }
+
+/* Abstract "video" artwork with a slow cinematic pan/zoom while playing */
+.demo-video {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    background: var(--demo-sky-bottom);
+    overflow: hidden;
+}
+
+.demo-video::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+    /* Cinematic vignette: soft edge falloff + heavier floor for the controls */
+    box-shadow:
+        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+        inset 0 0 34px oklch(0.04 0.015 145 / 0.32),
+        inset 0 -26px 40px oklch(0.04 0.015 145 / 0.26);
+}
+
+html.theme-light .hero-demo-scene .demo-video::after {
+    box-shadow:
+        inset 0 0 0 1px oklch(0.30 0.04 145 / 0.13),
+        inset 0 18px 32px oklch(0.98 0.03 90 / 0.1),
+        inset 0 -22px 34px oklch(0.18 0.05 145 / 0.16);
+}
+
+.demo-video-art {
+    position: absolute;
+    inset: 0;
+    background:
+        radial-gradient(30% 42% at 76% 29%, var(--demo-glow), transparent 64%),
+        radial-gradient(90% 85% at 18% 5%, var(--demo-glow), transparent 66%),
+        linear-gradient(160deg, var(--demo-sky-top) 0%, var(--demo-sky-mid) 52%, var(--demo-sky-bottom) 100%);
+    transform-origin: 60% 40%;
+    animation:
+        demoKenBurns 9s ease-in-out infinite alternate,
+        demoArtShift 7s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+/* Soft light drifting through the scene */
+.demo-video-art::before {
+    content: '';
+    position: absolute;
+    top: -25%;
+    left: -12%;
+    width: 70%;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: radial-gradient(circle, var(--demo-glow), transparent 65%);
+    animation: demoGlowDrift 7s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+.demo-video-art::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(105deg, transparent 30%, oklch(0.75 0.13 150 / 0.14) 45%, oklch(0.75 0.10 150 / 0.1) 55%, transparent 70%);
+    transform: translateX(-100%);
+    animation: demoSheen 2.8s linear infinite;
+    animation-play-state: paused;
+}
+
+/* Playing runs the animations; pausing freezes them mid-frame, so a synced
+   pause is visible at a glance */
+.demo-tab-card.playing .demo-video-art,
+.demo-tab-card.playing .demo-video-art::before,
+.demo-tab-card.playing .demo-video-art::after {
+    animation-play-state: running;
+}
+
+@keyframes demoKenBurns {
+    from { transform: scale(1) translate(0, 0); }
+    to { transform: scale(1.18) translate(-3%, 2%); }
+}
+
+@keyframes demoArtShift {
+    from { filter: hue-rotate(0deg) brightness(1); }
+    to { filter: hue-rotate(40deg) brightness(1.15); }
+}
+
+@keyframes demoGlowDrift {
+    from { transform: translate(0, 0); }
+    to { transform: translate(65%, 30%); }
+}
+
+@keyframes demoSheen {
+    to { transform: translateX(100%); }
+}
+
+/* Play / pause overlay */
+.demo-play-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: oklch(0.10 0.01 135 / 0.35);
+    transition: opacity 0.25s, background 0.25s;
+}
+
+.demo-icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    background: oklch(0.20 0.025 140 / 0.75);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    color: white;
+    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    transition: transform 0.2s;
+}
+
+.demo-tab-card:hover .demo-icon-wrap { transform: scale(1.1); }
+
+.demo-play-overlay .icon-pause { display: none; }
+.demo-tab-card.playing .icon-play { display: none; }
+.demo-tab-card.playing .icon-pause { display: block; }
+
+.demo-tab-card.playing .demo-play-overlay {
+    opacity: 0;
+    background: transparent;
+}
+
+.demo-tab-card.playing:hover .demo-play-overlay,
+.demo-tab-card.playing:focus-visible .demo-play-overlay {
+    opacity: 1;
+}
+
+/* Timestamp + seekable progress bar */
+.demo-video-controls {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 14px 10px 8px;
+    background: linear-gradient(transparent, var(--demo-control-fade));
+    font-size: 9.5px;
+    color: oklch(0.88 0.015 90);
+    z-index: 1;
+}
+
+.demo-time,
+.demo-duration {
+    flex-shrink: 0;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+    font-variant-numeric: tabular-nums;
+}
+
+.demo-duration {
+    font-weight: 600;
+    opacity: 0.7;
+}
+
+/* Decorative player chrome: play state glyph, volume, HD, fullscreen */
+.demo-ctrl-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    opacity: 0.85;
+}
+
+.demo-ctrl-play .icon-pause { display: none; }
+.demo-tab-card.playing .demo-ctrl-play .icon-play { display: none; }
+.demo-tab-card.playing .demo-ctrl-play .icon-pause { display: block; }
+
+.demo-ctrl-badge {
+    flex-shrink: 0;
+    font-size: 7px;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    line-height: 1;
+    padding: 2px 3px;
+    border: 1px solid currentColor;
+    border-radius: 3px;
+    opacity: 0.65;
+}
+
+.demo-progress {
+    position: relative;
+    flex: 1;
+    height: 5px;
+    border-radius: 99px;
+    background: var(--demo-track);
+    cursor: pointer;
+}
+
+/* Generous invisible hit area for seeking */
+.demo-progress::before {
+    content: '';
+    position: absolute;
+    inset: -8px 0;
+}
+
+/* Buffered range behind the playhead, like a real player */
+.demo-progress-buffer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 56%;
+    border-radius: 99px;
+    background: oklch(0.92 0.02 95 / 0.14);
+    pointer-events: none;
+}
+
+.demo-progress-fill {
+    position: relative;
+    height: 100%;
+    width: 30%;
+    border-radius: 99px;
+    background: linear-gradient(90deg, oklch(0.68 0.13 150), oklch(0.62 0.14 45));
+    pointer-events: none;
+}
+
+/* Scrub thumb, revealed on hover */
+.demo-progress-fill::after {
+    content: '';
+    position: absolute;
+    right: -5px;
+    top: 50%;
+    width: 11px;
+    height: 11px;
+    margin-top: -5.5px;
+    border-radius: 50%;
+    background: oklch(0.88 0.015 90);
+    box-shadow: 0 0 6px oklch(0.68 0.13 150 / 0.8);
+    opacity: 0;
+    transform: scale(0.6);
+    transition: opacity 0.2s, transform 0.2s;
+}
+
+.demo-tab-card:hover .demo-progress-fill::after {
+    opacity: 1;
+    transform: scale(1);
+}
+
+/* Sync pulse ring on both cards */
+.demo-tab-card.sync-pulse {
+    animation: demoCardPulse 0.9s ease-out;
+}
+
+@keyframes demoCardPulse {
+    0% { box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45), 0 0 0 0 oklch(0.68 0.13 150 / 0.65); }
+    100% { box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45), 0 0 0 22px oklch(0.68 0.13 150 / 0); }
+}
+
+/* The existing popup mockup slides in at the right edge, dropping out of
+   the toolbar icon of the foreground window */
+.hero-demo-scene .extension-mockup {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 5;
+    width: 292px;
+    width: min(320px, 66cqw);
+    margin: 0;
+    transform-origin: top right;
+    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s, visibility 0.45s;
+}
+
+@media (min-width: 1025px) {
+    .hero-demo-scene .extension-mockup {
+        /* Counter the content shift so the opened panel is balanced below nav. */
+        bottom: 0.625rem;
+    }
+}
+
+.hero-demo-scene:not(.popup-open) .extension-mockup {
+    transform: translate(2%, -3%) scale(0.5);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+}
+
+/* Ghost cursor for the automated walkthrough */
+.demo-cursor {
+    position: absolute;
+    top: 52%;
+    left: 46%;
+    z-index: 20;
+    width: 22px;
+    height: 22px;
+    opacity: 0;
+    pointer-events: none;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
+    transition: top 0.65s cubic-bezier(0.45, 0.05, 0.25, 1), left 0.65s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.35s;
+}
+
+.demo-cursor.visible { opacity: 1; }
+
+.demo-cursor svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.demo-cursor::before {
+    content: '';
+    position: absolute;
+    top: -6px;
+    left: -8px;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 2px solid oklch(0.75 0.13 150);
+    opacity: 0;
+    transform: scale(0.35);
+}
+
+.demo-cursor.clicking::before {
+    animation: demoClickRipple 0.45s ease-out;
+}
+
+@keyframes demoClickRipple {
+    0% { opacity: 0.9; transform: scale(0.35); }
+    100% { opacity: 0; transform: scale(1.25); }
+}
+
+/* Caption below the scene */
+.demo-hint {
+    margin: 0.75rem auto 0;
+    max-width: min(100%, 34rem);
+    text-align: center;
+    font-size: 0.82rem;
+    line-height: 1.45;
+    color: var(--text-muted);
+    opacity: 0;
+    transition: opacity 0.6s;
+}
+
+.demo-hint.show { opacity: 0.75; }
+
+/* Tablet/Small Desktop: fall back to the classic static popup mockup */
+@media (max-width: 1023px) {
+    .hero-demo-scene,
+    .hero-demo-scene.popup-open {
+        height: auto;
+        max-width: 320px;
+        margin: 0 auto;
+    }
+
+    .demo-tab-card,
+    .demo-tab-stack,
+    .demo-sync-chip,
+    .demo-cursor,
+    .demo-hint {
+        display: none !important;
+    }
+
+    .hero-demo-scene .extension-mockup,
+    .hero-demo-scene:not(.popup-open) .extension-mockup {
+        position: static;
+        width: 100%;
+        transform: none;
+        opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .hero-demo-scene:not(.popup-open) .demo-ext-launcher::after {
+        animation: none;
+    }
+}
+
+/* --- Story walkthrough additions: room creation, invite flight, film --- */
+
+/* The stick-figure film carries the motion now — keep only the color drift
+   on the backdrop (the animation shorthand resets play-state, so re-pause) */
+.demo-video-art {
+    animation: demoArtShift 7s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+.demo-film {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.hero-demo-scene .film-stars { fill: var(--demo-stars) !important; }
+.hero-demo-scene .film-clouds { fill: var(--demo-stars) !important; }
+.hero-demo-scene .film-mist-scroll { fill: var(--demo-stars) !important; }
+.hero-demo-scene .film-shooting-star { stroke: var(--demo-stars) !important; }
+.hero-demo-scene .film-moon {
+    fill: var(--demo-moon) !important;
+    filter: drop-shadow(0 0 6px var(--demo-moon));
+}
+.hero-demo-scene .film-mtn-scroll { fill: var(--demo-mountain) !important; }
+.hero-demo-scene .film-mid-scroll > * { fill: var(--demo-midground) !important; }
+.hero-demo-scene .film-fore-scroll > * { fill: var(--demo-foreground) !important; }
+
+/* By day the birds read as silhouettes, not chalk marks */
+html.theme-light .hero-demo-scene .film-birds { stroke: oklch(0.32 0.06 145 / 0.65); }
+html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { stroke: oklch(0.32 0.06 145 / 0.75); }
+
+/* Stars: staggered twinkle so the sky feels alive */
+.film-star {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: filmTwinkle 2.8s ease-in-out infinite;
+}
+.film-star:nth-child(2) { animation-duration: 3.4s; animation-delay: 0.5s; }
+.film-star:nth-child(3) { animation-duration: 2.4s; animation-delay: 1.1s; }
+.film-star:nth-child(4) { animation-duration: 3.6s; animation-delay: 0.3s; }
+.film-star:nth-child(5) { animation-duration: 2.6s; animation-delay: 1.6s; }
+.film-star:nth-child(6) { animation-duration: 3.2s; animation-delay: 0.8s; }
+.film-star:nth-child(7) { animation-duration: 2.2s; animation-delay: 1.3s; }
+
+@keyframes filmTwinkle {
+    0%, 100% { opacity: 0.25; transform: scale(0.85); }
+    50% { opacity: 1; transform: scale(1.15); }
+}
+
+/* Moon: gentle glow pulse + slow arc drift. The drift lives on the wrapper
+   group so the craters travel with the disc; the glow stays on the circle.
+   (Step-3 uses a bare .film-moon without wrapper — filmMoon still covers it.) */
+.film-moon-g {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: filmMoonDrift 6s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+.film-moon-g .film-moon {
+    animation-name: filmMoonGlow;
+}
+
+@keyframes filmMoonDrift {
+    from { transform: translate(0, 0); }
+    to { transform: translate(-6px, 3px); }
+}
+
+@keyframes filmMoonGlow {
+    from { filter: drop-shadow(0 0 4px oklch(0.95 0.01 100 / 0.5)); }
+    to { filter: drop-shadow(0 0 10px oklch(0.95 0.01 100 / 0.95)); }
+}
+
+.film-moon {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: filmMoon 6s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+@keyframes filmMoon {
+    from { transform: translate(0, 0); filter: drop-shadow(0 0 4px oklch(0.95 0.01 100 / 0.5)); }
+    to { transform: translate(-6px, 3px); filter: drop-shadow(0 0 10px oklch(0.95 0.01 100 / 0.95)); }
+}
+
+.film-mtn-scroll {
+    transform: translateX(var(--scroll-back, 0px));
+}
+.film-mid-scroll {
+    transform: translateX(var(--scroll-mid, 0px));
+}
+.film-fore-scroll {
+    transform: translateX(var(--scroll-fore, 0px));
+}
+/* A single gliding bird carries the scene: the outer group rides the
+   JS-driven drift vars, the inner group flaps its wings via scaleY. */
+.film-hero-bird-drift {
+    transform: translate(var(--lantern-x, 0px), var(--bounce-y, 0px));
+}
+
+.film-hero-bird {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: filmWingFlap 0.85s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+@keyframes filmWingFlap {
+    from { transform: scaleY(1); }
+    to { transform: scaleY(0.5); }
+}
+
+/* Twinkle & Glow play state bindings */
+.film-star {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: filmTwinkle 2.8s ease-in-out infinite;
+    animation-play-state: paused;
+}
+.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star, .film-birds, .film-hero-bird) {
+    animation-play-state: running;
+}
+
+/* Drifting clouds: gentle back-and-forth so there is no wrap pop */
+.film-cloud {
+    transform-box: fill-box;
+    animation: filmCloudDrift 26s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+.film-cloud-2 {
+    animation-duration: 34s;
+    animation-delay: -12s;
+}
+
+@keyframes filmCloudDrift {
+    from { transform: translateX(-6px); }
+    to { transform: translateX(10px); }
+}
+
+/* A shooting star streaks across the sky every few loops */
+.film-shooting-star {
+    opacity: 0;
+    animation: filmShoot 11s linear infinite;
+    animation-play-state: paused;
+}
+
+@keyframes filmShoot {
+    0%, 87% { opacity: 0; transform: translate(0, 0); }
+    89% { opacity: 0.9; }
+    95%, 100% { opacity: 0; transform: translate(-46px, 20px); }
+}
+
+/* A distant flock crosses the valley, fading out mid-flight */
+.film-birds {
+    animation: filmBirds 16s linear infinite;
+    animation-play-state: paused;
+}
+
+@keyframes filmBirds {
+    0% { transform: translate(0, 0); opacity: 0; }
+    4% { opacity: 0.75; }
+    42% { opacity: 0.75; }
+    48%, 100% { transform: translate(185px, -12px); opacity: 0; }
+}
+
+/* Valley mist rides the slow background parallax between tree layers */
+.film-mist-scroll {
+    transform: translateX(var(--scroll-back, 0px));
+}
+
+/* Play button pulsing indicator at the end of the walkthrough */
+.hero-demo-scene.demo-complete #demo-tab-a:not(.playing) .demo-icon-wrap {
+    animation: playButtonPulse 1.6s ease-in-out infinite;
+    border-color: oklch(0.68 0.13 150);
+    box-shadow: 0 0 15px oklch(0.68 0.13 150 / 0.8);
+}
+@keyframes playButtonPulse {
+    0%, 100% { transform: scale(1); box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.5); }
+    50% { transform: scale(1.12); box-shadow: 0 0 20px oklch(0.68 0.13 150 / 0.9); }
+}
+
+/* Seek-reset: scrubbing restarts animations from frame zero */
+.demo-film.demo-reset * {
+    animation: none !important;
+}
+
+/* Seek-break: scrubbing the timeline visibly glitches both videos so the
+   jump reads as a real cut instead of an invisible time update. A scanline
+   sweep + brightness pop, and the film animations restart mid-stride. */
+.demo-video-art { transition: filter 0.12s ease-out; }
+
+.demo-tab-card.demo-seeking .demo-video-art {
+    animation-play-state: paused;
+    filter: brightness(1.9) saturate(1.4) blur(0.6px);
+}
+
+.demo-tab-card .demo-seek-sweep {
+    position: absolute;
+    inset: 0;
+    z-index: 4;
+    pointer-events: none;
+    opacity: 0;
+    background: linear-gradient(90deg,
+        transparent 0%,
+        oklch(0.75 0.13 150 / 0.35) 20%,
+        rgba(255, 255, 255, 0.55) 50%,
+        oklch(0.75 0.13 150 / 0.35) 80%,
+        transparent 100%);
+    mix-blend-mode: screen;
+    transform: translateX(-100%);
+}
+
+.demo-tab-card.demo-seeking .demo-seek-sweep {
+    animation: demoSeekSweep 0.34s ease-out;
+}
+
+@keyframes demoSeekSweep {
+    0% { opacity: 0; transform: translateX(-100%); }
+    20% { opacity: 1; }
+    100% { opacity: 0; transform: translateX(100%); }
+}
+
+/* The sync chip only appears once the room is connected (story progression) */
+.demo-sync-chip {
+    opacity: 0;
+    transform: translateY(-4px);
+    pointer-events: none;
+    transition: background 0.3s, border-color 0.3s, color 0.3s, opacity 0.4s, transform 0.4s;
+}
+
+.hero-demo-scene.connected .demo-sync-chip {
+    opacity: 1;
+    transform: none;
+    pointer-events: auto;
+}
+
+/* Toast on the friend's window ("Room joined", "Tab selected") */
+.demo-tab-toast {
+    position: absolute;
+    top: 36px;
+    left: 50%;
+    transform: translate(-50%, -6px);
+    z-index: 2;
+    padding: 4px 10px;
+    border-radius: 99px;
+    background: oklch(0.20 0.025 140 / 0.92);
+    border: 1px solid oklch(0.68 0.13 150 / 0.5);
+    color: oklch(0.85 0.07 150);
+    font-size: 9.5px;
+    font-weight: 700;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.demo-tab-toast.show {
+    opacity: 1;
+    transform: translate(-50%, 0);
+}
+
+/* Invite link pill flying from the popup to the friend's window */
+.demo-invite-fly {
+    position: absolute;
+    z-index: 30;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 10px;
+    border-radius: 99px;
+    background: var(--accent);
+    color: var(--text-on-green);
+    font-size: 9.5px;
+    font-weight: 700;
+    white-space: nowrap;
+    box-shadow: 0 6px 18px oklch(0.68 0.13 150 / 0.5);
+    opacity: 0;
+    pointer-events: none;
+    transition: left 0.75s cubic-bezier(0.3, 0.7, 0.4, 1), top 0.75s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.3s;
+}
+
+/* Attention flash (e.g. on the video select while "choosing the tab") */
+.demo-attn {
+    animation: demoAttn 0.7s ease-in-out 2;
+}
+
+@keyframes demoAttn {
+    50% { box-shadow: 0 0 0 3px oklch(0.68 0.13 150 / 0.75); }
+}
+
+
+/* --- Bento Card Host Control Mockup Additions --- */
+
+.bento-content-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+    width: 100%;
+}
+
+.bento-host-control-mockup {
+    background: oklch(0.20 0.025 140 / 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 0.75rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.bento-mockup-header {
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    font-weight: 700;
+}
+
+.bento-mockup-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    font-size: 0.75rem;
+    color: white;
+    font-weight: 600;
+    margin-top: 2px;
+}
+
+/* Custom switch toggle representation */
+.bento-switch-wrap {
+    position: relative;
+    display: inline-block;
+    width: 28px;
+    height: 16px;
+    flex-shrink: 0;
+}
+
+.bento-switch-wrap input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.bento-switch-slider {
+    position: absolute;
+    cursor: default;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 16px;
+    transition: .3s;
+}
+
+.bento-switch-slider:before {
+    position: absolute;
+    content: "";
+    height: 10px;
+    width: 10px;
+    left: 2px;
+    bottom: 2px;
+    background-color: oklch(0.68 0.02 100);
+    border-radius: 50%;
+    transition: .3s;
+}
+
+.bento-switch-wrap input:checked + .bento-switch-slider {
+    background-color: oklch(0.68 0.13 150 / 0.25);
+    border-color: oklch(0.68 0.13 150 / 0.6);
+    box-shadow: 0 0 8px oklch(0.68 0.13 150 / 0.3);
+}
+
+.bento-switch-wrap input:checked + .bento-switch-slider:before {
+    transform: translateX(12px);
+    background-color: var(--accent);
+    box-shadow: 0 0 6px var(--accent-glow);
+}
+
+/* --- Step 2 & Step 3 Visual Redesign Styles --- */
+
+/* Step 2 Browser video player mock */
+.illus-video-player-mock {
+    width: 85%;
+    height: 65%;
+    background: linear-gradient(135deg, oklch(0.20 0.04 145), oklch(0.12 0.02 138));
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-top: 15px;
+}
+
+.video-mock-play-button {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 0.8rem;
+    cursor: default;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.video-mock-timeline {
+    position: absolute;
+    bottom: 8px;
+    left: 8px;
+    right: 8px;
+    height: 3px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 2px;
+}
+
+.video-mock-timeline-fill {
+    width: 35%;
+    height: 100%;
+    background: var(--accent);
+    border-radius: 2px;
+}
+
+/* Step 2 extension popup dropdown alignment */
+.illus-extension-popup.drop-down {
+    top: 2.2rem;
+    right: 0.6rem;
+    width: 145px;
+    animation: popup-dropdown-float 4s ease-in-out infinite;
+}
+
+@keyframes popup-dropdown-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-3px); }
+}
+
+.status-badge-select {
+    background: oklch(0.68 0.13 150 / 0.12);
+    color: oklch(0.85 0.07 150);
+    font-size: 0.58rem;
+    font-weight: 700;
+    padding: 2px 6px;
+    border-radius: 4px;
+    border: 1px solid oklch(0.68 0.13 150 / 0.2);
+    display: inline-flex;
+    align-items: center;
+    text-transform: uppercase;
+    letter-spacing: 0.2px;
+}
+
+.popup-form-group {
+    margin-top: 6px;
+    width: 100%;
+    text-align: left;
+}
+
+.popup-form-label {
+    display: block;
+    font-size: 0.6rem;
+    color: var(--text-muted);
+    margin-bottom: 4px;
+    font-weight: 700;
+}
+
+.popup-select-wrapper {
+    position: relative;
+    width: 100%;
+}
+
+.popup-select-mock {
+    width: 100%;
+    background: var(--card);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: white;
+    padding: 6px;
+    border-radius: 6px;
+    font-family: inherit;
+    font-size: 0.62rem;
+    outline: none;
+    appearance: none;
+    -webkit-appearance: none;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+    display: block;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.popup-cursor-pointer {
+    position: absolute;
+    bottom: -15px;
+    right: 15px;
+    font-size: 1.1rem;
+    pointer-events: none;
+    z-index: 10;
+    animation: pointer-click 1.6s infinite ease-in-out;
+}
+
+@keyframes pointer-click {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(-3px, -3px) scale(0.9); }
+}
+
+/* Step 3 forest movie continuous animation bindings */
+.step-illustration-3 .film-mtn-scroll {
+    animation: scrollBack 12s linear infinite !important;
+}
+.step-illustration-3 .film-mid-scroll {
+    animation: scrollMid 6s linear infinite !important;
+}
+.step-illustration-3 .film-fore-scroll {
+    animation: scrollFore 3s linear infinite !important;
+}
+.step-illustration-3 .film-hero-bird {
+    animation: filmWingFlap 0.85s ease-in-out infinite !important;
+    animation-direction: alternate !important;
+}
+
+@keyframes scrollBack {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-160px); }
+}
+@keyframes scrollMid {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-160px); }
+}
+@keyframes scrollFore {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-160px); }
+}
+
+/* --- High Fidelity Micro-Animations & Identity additions --- */
+
+/* Scroll progress bar glowing line at the top */
+.scroll-progress-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 3px;
+    background: linear-gradient(90deg, var(--accent), oklch(0.62 0.14 45), oklch(0.62 0.14 45));
+    z-index: 9999;
+    width: 0%;
+    transition: width 0.1s ease-out;
+    box-shadow: 0 0 8px var(--accent-glow);
+}
+
+.scroll-progress-bar::after {
+    content: '';
+    position: absolute;
+    right: -3px;
+    top: 50%;
+    width: 10px;
+    height: 7px;
+    border-radius: 0 70% 0 70%;
+    background: var(--accent-green);
+    box-shadow: 0 0 6px var(--accent-glow);
+    transform: translateY(-50%) rotate(24deg);
+}
+
+/* Navigation logo pop & spin */
+.nav-logo-img {
+    animation: logo-entrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+    transform-origin: center;
+    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+    will-change: transform, opacity;
+}
+
+.nav-logo-img:hover {
+    transform: scale(1.15) rotate(360deg);
+}
+
+@keyframes logo-entrance {
+    0% {
+        transform: scale(0) rotate(-180deg);
+        opacity: 0;
+    }
+    100% {
+        transform: scale(1) rotate(0deg);
+        opacity: 1;
+    }
+}
+
+/* Glowing reflection sweep on buttons */
+.btn-primary, .btn-firefox, .btn-secondary {
+    position: relative;
+    overflow: hidden;
+}
+
+.btn-primary::after, .btn-firefox::after, .btn-secondary::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.25) 50%,
+        rgba(255, 255, 255, 0) 100%
+    );
+    transform: skewX(-25deg);
+    transition: none;
+    pointer-events: none;
+}
+
+.btn-primary:hover::after, .btn-firefox:hover::after, .btn-secondary:hover::after {
+    left: 100%;
+    transition: left 0.8s ease-in-out;
+}
+
+/* Step 2 mockup control panel styles */
+.popup-mock-controls {
+    display: flex;
+    gap: 8px;
+    margin-top: 4px;
+    width: 100%;
+}
+
+.popup-mock-btn {
+    flex: 1;
+    text-align: center;
+    padding: 6px;
+    border-radius: 6px;
+    font-size: 0.62rem;
+    font-weight: 700;
+    color: white;
+    cursor: default;
+    opacity: 0.75;
+}
+
+.popup-mock-btn.play {
+    background: oklch(0.68 0.13 150);
+    color: var(--text-on-green);
+}
+
+.popup-mock-btn.pause {
+    background: oklch(0.55 0.15 25);
+}
+
+/* Phone and portrait-tablet widths: keep the full hero demo out of the page
+   flow. The demo modal mounts the same node in its own fixed layer. */
+@media (max-width: 900px) {
+    .hero-grid > .hero-mockup-wrapper {
+        display: none !important;
+    }
+}
+
+@media (max-width: 900px) {
+    .hero-github-cta {
+        display: none;
+    }
+
+    .btn-demo-mobile {
+        display: inline-flex;
+    }
+}
+
+body.mobile-demo-open {
+    overflow: hidden;
+}
+
+.mobile-demo-modal[hidden] {
+    display: none;
+}
+
+.mobile-demo-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 2400;
+    display: flex;
+    flex-direction: column;
+    padding: 0 !important;
+}
+
+.mobile-demo-backdrop {
+    position: absolute;
+    inset: 0;
+    background: oklch(0.10 0.01 135 / 0.25);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+}
+
+.mobile-demo-panel {
+    position: relative;
+    z-index: 1;
+    width: 100% !important;
+    height: 100% !important;
+    max-height: none !important;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: transparent !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+}
+
+.mobile-demo-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.85rem 0.95rem;
+    border-bottom: none !important;
+    flex-shrink: 0;
+}
+
+.mobile-demo-header h2 {
+    margin: 0;
+    font-size: 0.95rem;
+    line-height: 1.2;
+    color: oklch(0.96 0.01 90);
+}
+
+.mobile-demo-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 38px;
+    height: 38px;
+    padding: 0;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 10px;
+    background: oklch(0.27 0.035 130 / 0.72);
+    color: oklch(0.88 0.015 90);
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+.mobile-demo-stage {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden !important;
+    padding: 1rem 0.75rem 1.25rem;
+    overscroll-behavior: contain;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    align-items: center !important;
+}
+
+/* Ensure the demo scene canvas is transparent inside the modal to let the glass backdrop blend */
+.mobile-demo-stage .hero-demo-scene {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+/* Ensure the close button hover stays consistent in dark glass theme */
+.mobile-demo-close:hover {
+    background: rgba(51, 65, 85, 0.85) !important;
+}
+
+/* Light Mode Frosted Glass overrides */
+html.theme-light .mobile-demo-backdrop {
+    background: oklch(0.95 0.01 100 / 0.2) !important;
+}
+
+html.theme-light .mobile-demo-panel {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+html.theme-light .mobile-demo-header {
+    border-bottom: none !important;
+}
+
+html.theme-light .mobile-demo-header h2 {
+    color: var(--text) !important;
+}
+
+html.theme-light .mobile-demo-close {
+    background: rgba(255, 255, 255, 0.4) !important;
+    border-color: oklch(0.20 0.025 140 / 0.1) !important;
+    color: var(--text) !important;
+}
+
+html.theme-light .mobile-demo-close:hover {
+    background: rgba(255, 255, 255, 0.75) !important;
+}
+
+.mobile-demo-stage .hero-mockup-wrapper {
+    display: flex !important;
+    position: relative;
+    width: min(100%, 560px);
+    margin: 0 auto;
+    will-change: transform;
+}
+
+/* Mobile S / short screens */
+@media (max-height: 600px) {
+    .mobile-demo-stage .hero-mockup-wrapper {
+        transform: scale(0.68) !important;
+        transform-origin: top center !important;
+        height: 380px !important;
+    }
+}
+
+/* Mobile M/L / medium screens */
+@media (min-height: 601px) and (max-height: 740px) {
+    .mobile-demo-stage .hero-mockup-wrapper {
+        transform: scale(0.82) !important;
+        transform-origin: top center !important;
+        height: 460px !important;
+    }
+}
+
+/* Default / tall screens */
+@media (min-height: 741px) {
+    .mobile-demo-stage .hero-mockup-wrapper {
+        transform: scale(1) !important;
+        transform-origin: top center !important;
+        height: 550px !important;
+    }
+}
+
+.mobile-demo-stage .hero-demo-scene,
+.mobile-demo-stage .hero-demo-scene.popup-open {
+    position: relative;
+    width: 100%;
+    height: 100% !important;
+    max-width: none;
+    margin: 0 auto;
+}
+
+.mobile-demo-stage .demo-tab-stack {
+    display: block !important;
+    position: static !important;
+    height: auto !important;
+}
+
+.mobile-demo-stage .demo-tab-card {
+    display: block !important;
+}
+
+.mobile-demo-stage .demo-sync-chip {
+    display: inline-flex !important;
+}
+
+.mobile-demo-stage .demo-cursor {
+    display: block !important;
+}
+
+.mobile-demo-stage .demo-hint {
+    display: block !important;
+    position: absolute !important;
+    left: 0 !important;
+    right: 0 !important;
+    top: auto !important;
+    bottom: 12px !important;
+    margin: 0 auto !important;
+    padding-inline: 1rem;
+    max-width: 90%;
+    z-index: 10;
+}
+
+.mobile-demo-stage .hero-demo-scene .extension-mockup {
+    position: absolute;
+    bottom: 0 !important;
+    right: 0;
+    z-index: 15 !important;
+    width: min(320px, 66cqw);
+    transform: none !important;
+    transform-origin: top right !important;
+    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s, visibility 0.45s;
+}
+
+.mobile-demo-stage .hero-demo-scene:not(.popup-open) .extension-mockup {
+    bottom: 0 !important;
+    transform: translate(2%, -3%) scale(0.5) !important;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+}
+
+@media (max-width: 380px) {
+    .mobile-demo-modal {
+        padding: 0 !important;
+    }
+
+    .mobile-demo-stage {
+        padding-inline: 0.45rem !important;
+    }
+}
+
+/* Performance optimization for off-screen sections (below the fold) */
+.lazy-section {
+    content-visibility: auto;
+}
+
+.use-cases-section {
+    contain-intrinsic-block-size: auto 600px;
+}
+
+.comparison-section {
+    contain-intrinsic-block-size: auto 800px;
+}
+
+#self-hosting {
+    contain-intrinsic-block-size: auto 400px;
+}
+
+#faq {
+    contain-intrinsic-block-size: auto 450px;
+}
+
+@media (max-width: 768px) {
+    .use-cases-section {
+        contain-intrinsic-block-size: auto 900px;
+    }
+
+    .comparison-section {
+        contain-intrinsic-block-size: auto 1100px;
+    }
+
+    #self-hosting {
+        contain-intrinsic-block-size: auto 550px;
+    }
+
+    #faq {
+        contain-intrinsic-block-size: auto 700px;
+    }
+}
+
+/* Final responsive hierarchy overrides. Keep these last: the landing page has
+   several component-level media blocks above that intentionally own geometry. */
+@media (max-width: 768px) {
+    .container {
+        padding-inline: 1.15rem;
+    }
+
+    section {
+        padding-block: 4.25rem;
+    }
+
+    .hero-text h1,
+    .section-title,
+    #how-it-works h2,
+    #self-hosting h2,
+    #faq h2 {
+        font-size: clamp(2rem, 9vw, 2.65rem) !important;
+        text-wrap: balance;
+    }
+
+    .cta-group {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        align-items: stretch;
+        width: 100%;
+    }
+
+    .cta-group .btn {
+        width: 100%;
+        min-height: 48px;
+        justify-content: center;
+    }
+}
+
+@media (max-width: 430px) {
+    .cta-group {
+        grid-template-columns: 1fr;
+    }
+}
diff --git a/website/styles/foundation.css b/website/styles/foundation.css
new file mode 100644
index 0000000..a5d7ccb
--- /dev/null
+++ b/website/styles/foundation.css
@@ -0,0 +1,1418 @@
+/* KoalaSync Design System - Privacy-Focused (No External Assets) */
+
+@font-face {
+    font-family: 'Twemoji Country Flags';
+    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
+    src: url('assets/TwemojiCountryFlags.woff2') format('woff2');
+    font-display: swap;
+}
+
+:root {
+    /* v3.0.0 "The Greens Update" nature palette */
+    --bg-base: oklch(0.20 0.025 140);
+    --surface: oklch(0.27 0.035 130);
+    --surface-deep: oklch(0.16 0.025 135);
+    --surface-alt: oklch(0.23 0.03 130);
+    --border-soft: rgba(255, 255, 255, 0.06);
+    --border-strong: oklch(0.32 0.03 125);
+    --text-primary: oklch(0.96 0.01 90);
+    --text-secondary: oklch(0.78 0.02 90);
+    --accent-green: oklch(0.68 0.13 150);
+    --accent-green-hover: oklch(0.75 0.13 150);
+    --accent-terracotta: oklch(0.62 0.14 45);
+    --danger: oklch(0.55 0.15 25);
+    --text-on-green: oklch(0.14 0.02 90);
+
+    /* Legacy aliases used throughout the stylesheet */
+    --bg: var(--bg-base);
+    --card: var(--surface);
+    --accent: var(--accent-green);
+    --accent-glow: oklch(0.68 0.13 150 / 0.3);
+    --text: var(--text-primary);
+    --text-muted: var(--text-secondary);
+    --success: var(--accent-green);
+    --glass: oklch(0.27 0.035 130 / 0.4);
+    --glass-border: var(--border-soft);
+    --section-tint: transparent;
+    --section-tint-strong: oklch(0.20 0.025 140 / 0.28);
+    --card-surface: oklch(0.27 0.035 130 / 0.45);
+    --card-border: rgba(255, 255, 255, 0.08);
+    color-scheme: dark;
+}
+
+.extension-mockup,
+.illus-popup-card,
+.illus-player-card {
+    --bg: oklch(0.20 0.025 140) !important;
+    --card: oklch(0.27 0.035 130) !important;
+    --accent: oklch(0.68 0.13 150) !important;
+    --accent-glow: oklch(0.68 0.13 150 / 0.3) !important;
+    --text: oklch(0.96 0.01 90) !important;
+    --text-muted: oklch(0.78 0.02 90) !important;
+    --success: oklch(0.68 0.13 150) !important;
+    --error: oklch(0.55 0.15 25) !important;
+    --glass: oklch(0.27 0.035 130 / 0.4) !important;
+    --glass-border: rgba(255, 255, 255, 0.05) !important;
+    --section-tint: rgba(255, 255, 255, 0.02) !important;
+    --section-tint-strong: oklch(0.20 0.025 140 / 0.4) !important;
+    --card-surface: oklch(0.27 0.035 130 / 0.45) !important;
+    --card-border: rgba(255, 255, 255, 0.08) !important;
+}
+
+.invite-banner {
+    background: var(--accent);
+    color: var(--text-on-green);
+    padding: 0.75rem 0;
+    text-align: center;
+    font-weight: 600;
+    font-size: 0.9rem;
+    position: relative;
+    z-index: 2000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+.btn-banner {
+    background: white;
+    color: var(--accent);
+    padding: 4px 12px;
+    border-radius: 6px;
+    text-decoration: none;
+    font-size: 0.8rem;
+    font-weight: 700;
+    margin-left: 12px;
+    cursor: pointer;
+    border: none;
+    transition: transform 0.2s;
+}
+
+.btn-banner:hover {
+    transform: scale(1.05);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+    border-radius: 6px;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: 'Twemoji Country Flags', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    background-color: var(--bg);
+    color: var(--text);
+    line-height: 1.6;
+    overflow-x: hidden;
+    position: relative;
+}
+
+/* --- Animated Bamboo Forest Background (v3 Greens Update) --- */
+/* Registered so wind gusts can TRANSITION these instead of jumping */
+@property --sway {
+    syntax: '<angle>';
+    initial-value: 1.2deg;
+    inherits: true;
+}
+
+@property --leaf-drift {
+    syntax: '<length>';
+    initial-value: 26px;
+    inherits: true;
+}
+
+.bg-nature {
+    --sway: 1.2deg;
+    --leaf-drift: 26px;
+    transition: --sway 1.6s ease-in-out, --leaf-drift 1.6s ease-in-out;
+}
+
+.bg-nature.gusting {
+    --sway: 3.4deg;
+    --leaf-drift: 68px;
+}
+
+.bg-nature {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+    background:
+        radial-gradient(circle at 18% 10%, oklch(0.26 0.05 145 / 0.35), transparent 34rem),
+        radial-gradient(circle at 78% 68%, oklch(0.24 0.04 140 / 0.3), transparent 38rem),
+        linear-gradient(180deg, oklch(0.20 0.025 140) 0%, oklch(0.17 0.03 142) 45%, oklch(0.19 0.03 140) 100%);
+}
+
+/* (a) Distant bamboo layer: blurred, scroll-parallaxed by app.js */
+#bamboo-far {
+    position: absolute;
+    inset: 0;
+    will-change: transform;
+}
+
+#bamboo-far .bamboo-stalk {
+    position: absolute;
+    /* 200% covers the upward parallax drift (max 0.55vh on the near layer)
+       with margin while keeping the blurred layer smaller than the old
+       240% overscan. Spare coverage sits below, where the drift needs it. */
+    top: -40%;
+    height: 200%;
+    border-radius: 999px;
+    filter: blur(4.5px);
+    transition: filter 1.2s ease;
+    background:
+        repeating-linear-gradient(180deg,
+            transparent 0, transparent 108px,
+            oklch(0.40 0.06 145 / 0.22) 108px, oklch(0.40 0.06 145 / 0.22) 112px),
+        linear-gradient(180deg, oklch(0.34 0.05 145 / 0.4), oklch(0.24 0.04 140 / 0.16));
+}
+
+#bamboo-far .far-1 { left: 2%; width: 26px; }
+#bamboo-far .far-2 { left: 7.5%; width: 18px; }
+#bamboo-far .far-3 { right: 4%; width: 30px; }
+#bamboo-far .far-4 { left: 13%; width: 20px; }
+#bamboo-far .far-5 { right: 10.5%; width: 16px; }
+/* Two whisper-quiet trunks soften the empty centre without touching the
+   content: wide apart, thin, and at the lowest opacity in the scene. */
+#bamboo-far .far-6 { left: 39%; width: 12px; opacity: 0.55; }
+#bamboo-far .far-7 { right: 42%; width: 14px; opacity: 0.6; }
+
+/* Two barely-there trunks break up the empty middle without competing with
+   the content. They share the far layer's single parallax transform. */
+#bamboo-far::before,
+#bamboo-far::after {
+    content: '';
+    position: absolute;
+    top: -40%;
+    height: 200%;
+    border-radius: 999px;
+    filter: blur(6.5px);
+    opacity: 0.3;
+    background: linear-gradient(180deg, oklch(0.34 0.05 145 / 0.3), oklch(0.23 0.04 140 / 0.1));
+}
+
+#bamboo-far::before { left: 24%; width: 13px; }
+#bamboo-far::after { right: 25%; width: 17px; }
+
+/* Depth of field: the far layer blurs further as you descend (stepped by
+   JS on threshold crossings, never per frame) */
+.bg-nature.depth-mid #bamboo-far .bamboo-stalk { filter: blur(5.5px); }
+.bg-nature.depth-deep #bamboo-far .bamboo-stalk { filter: blur(6.5px); }
+
+/* (a2) Mid bamboo layer: sits between far and near with its own parallax
+   rate (app.js) and half the near layer's sway, so the three layers drift
+   apart subtly instead of moving as one sheet. Landing page only — the
+   static pages keep the lighter two-layer scene. */
+#bamboo-mid {
+    position: absolute;
+    inset: 0;
+    will-change: transform;
+}
+
+#bamboo-mid .bamboo-stalk {
+    position: absolute;
+    top: -40%;
+    height: 200%;
+    border-radius: 999px;
+    filter: blur(2px);
+    transition: filter 1.2s ease;
+    /* Segment rings + a soft left-of-centre sheen give the stalks culm
+       structure without any extra elements; the blur keeps both faint. */
+    background:
+        repeating-linear-gradient(180deg,
+            transparent 0, transparent 84px,
+            oklch(0.46 0.075 145 / 0.28) 84px, oklch(0.46 0.075 145 / 0.28) 87px),
+        linear-gradient(90deg, transparent 14%, oklch(0.58 0.07 145 / 0.14) 38%, transparent 68%),
+        linear-gradient(180deg, oklch(0.36 0.06 145 / 0.45), oklch(0.25 0.045 140 / 0.2));
+    transform-origin: bottom center;
+    animation: bambooSwayHalf 13s ease-in-out infinite;
+}
+
+#bamboo-mid .mid-1 { left: 17%; width: 15px; animation-duration: 12s; }
+#bamboo-mid .mid-2 { left: 31%; width: 9px; animation-delay: -5s; opacity: 0.55; }
+#bamboo-mid .mid-3 { right: 15.5%; width: 17px; animation-duration: 14.5s; animation-delay: -8s; }
+#bamboo-mid .mid-4 { right: 30%; width: 8px; animation-duration: 11.5s; animation-delay: -2.5s; opacity: 0.5; }
+
+/* A few leaves sprout from the mid stalks (pseudo-elements, so they ride
+   the stalk's sway for free). The slim centre stalks stay bare. */
+#bamboo-mid .bamboo-stalk::before,
+#bamboo-mid .bamboo-stalk::after {
+    content: '';
+    position: absolute;
+    width: 24px;
+    height: 11px;
+    border-radius: 0 100% 0 100%;
+    background: oklch(0.5 0.1 145 / 0.32);
+}
+
+#bamboo-mid .mid-1::before { top: 31%; left: 13px; transform: rotate(20deg); }
+#bamboo-mid .mid-1::after { top: 55%; left: -26px; transform: rotate(-158deg); width: 20px; height: 9px; }
+#bamboo-mid .mid-3::before { top: 26%; left: -27px; transform: rotate(-156deg); }
+#bamboo-mid .mid-3::after { top: 49%; left: 15px; transform: rotate(24deg); width: 21px; height: 10px; }
+#bamboo-mid .mid-2::before,
+#bamboo-mid .mid-2::after,
+#bamboo-mid .mid-4::before,
+#bamboo-mid .mid-4::after {
+    display: none;
+}
+
+.bg-nature.depth-mid #bamboo-mid .bamboo-stalk { filter: blur(3px); }
+.bg-nature.depth-deep #bamboo-mid .bamboo-stalk { filter: blur(4px); }
+
+@keyframes bambooSwayHalf {
+    0%, 100% { transform: rotate(0); }
+    50% { transform: rotate(calc(var(--sway, 1.2deg) * 0.5)); }
+}
+
+/* (b) Near bamboo layer: sharp stalks with nodes and leaves, gentle sway */
+#bamboo-near {
+    position: absolute;
+    inset: 0;
+    will-change: transform;
+}
+
+#bamboo-near .bamboo-stalk {
+    position: absolute;
+    top: -40%;
+    height: 200%;
+    border-radius: 999px;
+    /* Vertical sheen over the culm gradient: reads as light from the
+       canopy catching the rounded stalk instead of a flat strip. */
+    background:
+        linear-gradient(90deg, transparent 12%, oklch(0.64 0.08 145 / 0.22) 36%, transparent 64%),
+        linear-gradient(180deg, oklch(0.42 0.075 145 / 0.6), oklch(0.27 0.05 140 / 0.3));
+    transform-origin: bottom center;
+    animation: bambooSway 10s ease-in-out infinite;
+}
+
+#bamboo-near .near-1 { left: 4.5%; width: 15px; animation-duration: 9.2s; }
+#bamboo-near .near-2 { right: 7%; width: 13px; animation-duration: 11s; animation-delay: -3.5s; }
+#bamboo-near .near-3 { left: 10%; width: 10px; animation-duration: 12.5s; animation-delay: -6s; opacity: 0.75; }
+
+#bamboo-near .bamboo-node {
+    position: absolute;
+    left: -1px;
+    right: -1px;
+    height: 3px;
+    border-radius: 2px;
+    background: oklch(0.52 0.085 145 / 0.6);
+}
+
+#bamboo-near .node-1 { top: 28%; }
+#bamboo-near .node-2 { top: 48%; }
+#bamboo-near .node-3 { top: 68%; }
+
+#bamboo-near .bamboo-leaf {
+    position: absolute;
+    width: 26px;
+    height: 12px;
+    border-radius: 0 100% 0 100%;
+    background: oklch(0.55 0.11 145 / 0.4);
+}
+
+#bamboo-near .near-1 .leaf-1 { top: 27.5%; left: 12px; transform: rotate(18deg); }
+#bamboo-near .near-1 .leaf-2 { top: 47.5%; left: -28px; transform: rotate(-160deg); width: 22px; height: 10px; }
+#bamboo-near .near-2 .leaf-1 { top: 44%; left: -26px; transform: rotate(-155deg); }
+#bamboo-near .near-2 .leaf-2 { top: 61%; left: 11px; transform: rotate(21deg); width: 20px; height: 9px; }
+#bamboo-near .near-3 .leaf-1 { top: 33%; left: 8px; transform: rotate(24deg); width: 18px; height: 9px; }
+
+@keyframes bambooSway {
+    0%, 100% { transform: rotate(0); }
+    50% { transform: rotate(var(--sway, 1.2deg)); }
+}
+
+/* (d) Falling leaves: outer element falls + rotates, inner leaf sways */
+.fall-leaf {
+    position: absolute;
+    top: 0;
+    animation: leafFall 17s linear infinite;
+    opacity: 0;
+}
+
+.fall-leaf i {
+    display: block;
+    width: 10px;
+    height: 14px;
+    border-radius: 0 70% 0 70%;
+    background: oklch(0.68 0.13 150 / 0.55);
+    animation: leafSway 3.2s ease-in-out infinite;
+}
+
+.fall-leaf:nth-child(even) i {
+    background: oklch(0.62 0.14 45 / 0.55);
+}
+
+.fall-leaf-1 { left: 6%;  animation-duration: 15s;  animation-delay: -2s; }
+.fall-leaf-2 { left: 16%; animation-duration: 19s;  animation-delay: -9s; }
+.fall-leaf-2 i { animation-duration: 2.7s; background: oklch(0.62 0.14 45 / 0.6); }
+.fall-leaf-3 { left: 28%; animation-duration: 14s;  animation-delay: -5s; }
+.fall-leaf-3 i { background: oklch(0.68 0.13 150 / 0.5); }
+.fall-leaf-4 { left: 41%; animation-duration: 21s;  animation-delay: -13s; }
+.fall-leaf-4 i { animation-duration: 4s; }
+.fall-leaf-5 { left: 55%; animation-duration: 16s;  animation-delay: -7s; }
+.fall-leaf-5 i { background: oklch(0.68 0.13 150 / 0.6); }
+.fall-leaf-6 { left: 68%; animation-duration: 20s;  animation-delay: -16s; }
+.fall-leaf-6 i { animation-duration: 3.6s; background: oklch(0.62 0.14 45 / 0.5); }
+.fall-leaf-7 { left: 81%; animation-duration: 14.5s; animation-delay: -3s; }
+.fall-leaf-7 i { animation-duration: 2.9s; }
+.fall-leaf-8 { left: 92%; animation-duration: 18s;  animation-delay: -11s; }
+
+@keyframes leafFall {
+    0% { transform: translateY(-40px) rotate(0); opacity: 0; }
+    8% { opacity: 0.65; }
+    92% { opacity: 0.5; }
+    100% { transform: translateY(110vh) translateX(120px) rotate(280deg); opacity: 0; }
+}
+
+@keyframes leafSway {
+    0%, 100% { margin-left: 0; }
+    50% { margin-left: var(--leaf-drift, 26px); }
+}
+
+/* Scroll journey: JS drives the opacity of these two groups so the page
+   travels from sunlit canopy (top) into misty dusk (bottom). Static
+   defaults below keep the scene balanced without JS. */
+.bg-depth-day,
+.bg-depth-dusk {
+    position: absolute;
+    inset: 0;
+}
+
+.bg-depth-dusk {
+    opacity: 0.6;
+}
+
+/* Dusk tint: darkens and warms the whole scene as you descend */
+.bg-dusk-tint {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    background: linear-gradient(180deg,
+        oklch(0.10 0.03 145 / 0.15) 0%,
+        oklch(0.12 0.045 142 / 0.5) 65%,
+        oklch(0.16 0.07 55 / 0.35) 100%);
+}
+
+/* God rays: soft light shafts falling through the canopy */
+.bg-godrays {
+    position: absolute;
+    top: -10%;
+    left: 0;
+    right: 0;
+    height: 75%;
+}
+
+.godray {
+    position: absolute;
+    top: 0;
+    height: 115%;
+    background: linear-gradient(180deg, oklch(0.85 0.06 130 / 0.10), transparent 78%);
+    filter: blur(10px);
+    transform: rotate(14deg);
+    transform-origin: top center;
+    animation: rayShimmer 9s ease-in-out infinite alternate;
+}
+
+.godray-1 { left: 16%; width: 120px; animation-duration: 8s; }
+.godray-2 { left: 33%; width: 70px; animation-delay: -3s; background: linear-gradient(180deg, oklch(0.85 0.06 130 / 0.07), transparent 78%); }
+.godray-3 { left: 56%; width: 140px; animation-duration: 13s; animation-delay: -6s; background: linear-gradient(180deg, oklch(0.85 0.05 110 / 0.08), transparent 75%); }
+
+@keyframes rayShimmer {
+    0% { opacity: 0.45; }
+    100% { opacity: 1; }
+}
+
+/* (e) Canopy: dark vignette at the top plus hanging leaf arcs */
+.bg-canopy {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 150px;
+    background:
+        radial-gradient(ellipse 70% 100% at 30% 0%, oklch(0.14 0.03 145 / 0.55), transparent 70%),
+        radial-gradient(ellipse 60% 90% at 80% 0%, oklch(0.14 0.03 145 / 0.45), transparent 70%);
+}
+
+.canopy-arc {
+    position: absolute;
+    border-radius: 0 0 100% 100%;
+    background: oklch(0.32 0.06 145 / 0.45);
+}
+
+.canopy-arc-1 { top: -3px; left: 12%; width: 52px; height: 16px; transform: rotate(-6deg); background: oklch(0.30 0.06 145 / 0.5); }
+.canopy-arc-2 { top: -2px; left: 34%; width: 38px; height: 12px; transform: rotate(4deg); background: oklch(0.34 0.06 145 / 0.35); }
+.canopy-arc-3 { top: -4px; left: 61%; width: 46px; height: 14px; transform: rotate(-3deg); }
+.canopy-arc-4 { top: -2px; left: 84%; width: 30px; height: 10px; transform: rotate(7deg); background: oklch(0.33 0.06 145 / 0.4); }
+
+/* (f) Undergrowth: grass blades in the lower corners. Each blade carries a
+   shorter companion blade (::before) so the corners read as small tufts. */
+.bg-grass {
+    position: absolute;
+    bottom: -4px;
+    transform-origin: bottom;
+}
+
+.bg-grass::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    width: 72%;
+    height: 55%;
+    border-radius: inherit;
+    background: inherit;
+    opacity: 0.7;
+    transform-origin: bottom;
+}
+
+.bg-grass-1::before { left: -5px; transform: rotate(-13deg); }
+.bg-grass-2::before { left: 4px; transform: rotate(11deg); }
+.bg-grass-3::before { right: -5px; transform: rotate(12deg); }
+.bg-grass-4::before { right: 4px; transform: rotate(-9deg); }
+
+.bg-grass-1 { left: 1.5%; width: 6px; height: 52px; border-radius: 100% 0 0 0; background: oklch(0.38 0.07 145 / 0.4); transform: rotate(-9deg); }
+.bg-grass-2 { left: 3.2%; width: 5px; height: 38px; border-radius: 100% 0 0 0; background: oklch(0.35 0.07 145 / 0.3); transform: rotate(-12deg); }
+.bg-grass-3 { right: 2%; width: 6px; height: 56px; border-radius: 0 100% 0 0; background: oklch(0.4 0.07 145 / 0.4); transform: rotate(8deg); }
+.bg-grass-4 { right: 3.8%; width: 5px; height: 40px; border-radius: 0 100% 0 0; background: oklch(0.36 0.07 145 / 0.32); transform: rotate(11deg); }
+
+/* (g) Ground mist: soft drifting ellipses at the bottom edge */
+.bg-mist {
+    position: absolute;
+    bottom: -40px;
+    height: 130px;
+    filter: blur(19px);
+    will-change: transform;
+}
+
+.bg-mist-1 {
+    left: -6%;
+    width: 75%;
+    background: radial-gradient(ellipse, oklch(0.85 0.03 145 / 0.07), transparent 70%);
+    animation: mistDrift 22s ease-in-out infinite alternate;
+}
+
+.bg-mist-2 {
+    right: -6%;
+    width: 70%;
+    background: radial-gradient(ellipse, oklch(0.85 0.03 145 / 0.06), transparent 70%);
+    animation: mistDrift 27s ease-in-out infinite alternate-reverse;
+}
+
+@keyframes mistDrift {
+    0% { transform: translateX(-8%); }
+    100% { transform: translateX(8%); }
+}
+
+/* (h) Breathing horizon glow */
+.bg-horizon {
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(ellipse 60% 100% at 50% 100%, oklch(0.62 0.14 45 / 0.14), transparent 70%);
+    animation: horizonBreathe 10s ease-in-out infinite;
+}
+
+@keyframes horizonBreathe {
+    0%, 100% { opacity: 0.5; }
+    50% { opacity: 0.85; }
+}
+
+/* Theme switch to light: the horizon flares up once like a sunrise */
+.bg-nature.sunrise .bg-horizon {
+    animation:
+        horizonBreathe 10s ease-in-out infinite,
+        sunriseFlash 1.6s ease-out;
+}
+
+@keyframes sunriseFlash {
+    0% { opacity: 0.5; }
+    30% { opacity: 1; }
+    100% { opacity: 0.5; }
+}
+
+/* (i) Fireflies: the wrapper holds the base position and is what the JS
+   pushes away from the cursor; the inner dot pulses (transform) and
+   wanders (translate) independently. */
+.firefly-wrap {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+}
+
+.firefly {
+    display: block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: oklch(0.68 0.13 150);
+    box-shadow: 0 0 8px oklch(0.68 0.13 150);
+    animation:
+        fireflyPulse 3.8s ease-in-out infinite,
+        fireflyWander 21s ease-in-out infinite alternate;
+}
+
+.fw-2 .firefly,
+.fw-4 .firefly,
+.fw-6 .firefly {
+    width: 3px;
+    height: 3px;
+    background: oklch(0.62 0.14 45);
+    box-shadow: 0 0 8px oklch(0.62 0.14 45);
+}
+
+.fw-1 { top: 32%; left: 12%; }
+.fw-2 { top: 58%; left: 22%; }
+.fw-3 { top: 44%; left: 46%; }
+.fw-4 { top: 70%; left: 64%; }
+.fw-5 { top: 26%; left: 78%; }
+.fw-6 { top: 62%; left: 90%; }
+
+.fw-1 .firefly { animation-delay: -0.4s, -4s; }
+.fw-2 .firefly { animation-duration: 4.4s, 26s; animation-delay: -2.1s, -11s; }
+.fw-3 .firefly { animation-duration: 3.4s, 18s; animation-delay: -1.2s, -7s; }
+.fw-4 .firefly { animation-duration: 4.1s, 29s; animation-delay: -3s, -19s; }
+.fw-5 .firefly { animation-duration: 3.6s, 23s; animation-delay: -1.8s, -14s; }
+.fw-6 .firefly { animation-duration: 4.2s, 17s; animation-delay: -0.9s, -2s; }
+
+/* One firefly greets you when a new section scrolls into view */
+.firefly-wrap.firefly-hello {
+    animation: fireflyHello 1.2s ease-out;
+}
+
+@keyframes fireflyHello {
+    0%, 100% { transform: scale(1); filter: brightness(1); }
+    35% { transform: scale(2.4); filter: brightness(1.7); }
+}
+
+@keyframes fireflyPulse {
+    0%, 100% { opacity: 0.2; transform: scale(1); }
+    50% { opacity: 0.9; transform: scale(1.35); }
+}
+
+@keyframes fireflyWander {
+    0% { translate: 0 0; }
+    25% { translate: 38px -26px; }
+    50% { translate: -20px 16px; }
+    75% { translate: 26px 30px; }
+    100% { translate: -14px -18px; }
+}
+
+/* Day/night: fireflies belong to the dark theme. By daylight the same six
+   spots are visited by small butterflies instead — the wrapper (and with it
+   the cursor-shy push and the section greeting) is shared, only the inner
+   dot is redressed. Only animation-name is swapped so the per-firefly
+   duration/delay variety above keeps applying to the butterflies. */
+html.theme-light .firefly {
+    position: relative;
+    width: 2px;
+    height: 9px;
+    border-radius: 1px;
+    background: oklch(0.35 0.05 140 / 0.8);
+    box-shadow: none;
+    opacity: 0.85;
+    animation-name: butterflyBob, fireflyWander;
+}
+
+html.theme-light .firefly::before,
+html.theme-light .firefly::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    width: 7px;
+    height: 10px;
+    background: oklch(0.62 0.14 45 / 0.7);
+    animation: wingFlap 0.5s ease-in-out infinite alternate;
+}
+
+html.theme-light .firefly::before {
+    left: -6px;
+    border-radius: 90% 10% 60% 40%;
+    transform-origin: 100% 55%;
+}
+
+html.theme-light .firefly::after {
+    right: -6px;
+    border-radius: 10% 90% 40% 60%;
+    transform-origin: 0% 55%;
+    animation-name: wingFlapR;
+}
+
+/* Every other butterfly wears the sage of the canopy and flaps lazier */
+html.theme-light .fw-2 .firefly::before,
+html.theme-light .fw-2 .firefly::after,
+html.theme-light .fw-4 .firefly::before,
+html.theme-light .fw-4 .firefly::after,
+html.theme-light .fw-6 .firefly::before,
+html.theme-light .fw-6 .firefly::after {
+    background: oklch(0.52 0.12 150 / 0.55);
+    animation-duration: 0.62s;
+}
+
+@keyframes butterflyBob {
+    0%, 100% { transform: translateY(0) rotate(-4deg); }
+    50% { transform: translateY(-8px) rotate(5deg); }
+}
+
+@keyframes wingFlap {
+    from { transform: scaleX(1) rotate(-6deg); }
+    to { transform: scaleX(0.3) rotate(8deg); }
+}
+
+@keyframes wingFlapR {
+    from { transform: scaleX(1) rotate(6deg); }
+    to { transform: scaleX(0.3) rotate(-8deg); }
+}
+
+/* By day the dusk layer must not dim the butterflies with scroll depth
+   (the JS crossfade keeps writing inline opacity for the dark theme), and
+   the warm horizon glow steps back so it reads as haze, not dusk. */
+html.theme-light .bg-depth-dusk {
+    opacity: 1 !important;
+}
+
+html.theme-light .bg-horizon {
+    background: radial-gradient(ellipse 60% 100% at 50% 100%, oklch(0.8 0.08 60 / 0.1), transparent 70%);
+}
+
+/* (j) Wandering light sweep */
+.bg-light-sweep {
+    position: absolute;
+    top: -30%;
+    left: -30%;
+    width: 160%;
+    height: 160%;
+    background: linear-gradient(115deg, transparent 42%, oklch(0.68 0.13 150 / 0.05) 50%, transparent 58%);
+    animation: lightSweep 26s ease-in-out infinite alternate;
+    will-change: transform;
+}
+
+@keyframes lightSweep {
+    0% { transform: translate(-20%, -20%) rotate(8deg); }
+    100% { transform: translate(20%, 20%) rotate(8deg); }
+}
+
+/* (j2) Corner vignette: pulls the eye toward the content and grounds the
+   scene — the forest darkens gently toward the edges like real depth. */
+.bg-nature::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: radial-gradient(ellipse 120% 90% at 50% 38%, transparent 55%, oklch(0.10 0.025 142 / 0.4) 100%);
+}
+
+html.theme-light .bg-nature::after {
+    background: radial-gradient(ellipse 120% 90% at 50% 38%, transparent 62%, oklch(0.78 0.03 120 / 0.3) 100%);
+}
+
+/* (k) Film grain (SVG feTurbulence, no external assets) */
+.bg-grain {
+    position: absolute;
+    inset: 0;
+    opacity: 0.05;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    background-size: 160px 160px;
+}
+
+@media (max-width: 768px) {
+    /* Half the leaves, no god rays / light sweep / extra stalks: the scene
+       stays recognisable while the animation count roughly halves. */
+    .fall-leaf-5,
+    .fall-leaf-6,
+    .fall-leaf-7,
+    .fall-leaf-8,
+    .bg-godrays,
+    .bg-light-sweep,
+    #bamboo-mid,
+    #bamboo-far .far-4,
+    #bamboo-far .far-5,
+    #bamboo-far .far-6,
+    #bamboo-far .far-7,
+    #bamboo-near .near-3 {
+        display: none;
+    }
+}
+
+/* --- UI/UX cohesion pass -------------------------------------------------
+   Shared rhythm and interaction rules for the landing page. Component-specific
+   responsive refinements are repeated at the end of the cascade. */
+html {
+    scroll-padding-top: 96px;
+}
+
+body {
+    text-rendering: optimizeLegibility;
+}
+
+.footer-disclaimer {
+    color: oklch(0.72 0.015 90);
+}
+
+html.theme-light .footer-disclaimer {
+    color: var(--text-muted);
+}
+
+.logo-area {
+    text-decoration: none;
+    border-radius: 12px;
+}
+
+.logo-area:focus-visible,
+.nav-links a:focus-visible,
+.theme-toggle:focus-visible,
+.lang-dropdown:focus-visible,
+.hamburger:focus-visible,
+.btn:focus-visible,
+.faq-item summary:focus-visible {
+    outline: 3px solid var(--accent);
+    outline-offset: 4px;
+}
+
+.nav-links a {
+    position: relative;
+    padding: 0.55rem 0;
+}
+
+.nav-links a::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0.25rem;
+    left: 0;
+    height: 2px;
+    border-radius: 999px;
+    background: var(--accent);
+    transform: scaleX(0);
+    transform-origin: right;
+    transition: transform 0.25s ease;
+}
+
+.nav-links a:hover::after,
+.nav-links a:focus-visible::after {
+    transform: scaleX(1);
+    transform-origin: left;
+}
+
+.hero-text {
+    max-width: 42rem;
+}
+
+.hero-text h1 {
+    text-wrap: balance;
+}
+
+.hero-subtitle,
+.section-subtitle,
+.use-cases-subtitle {
+    text-wrap: pretty;
+}
+
+.cta-group {
+    align-items: stretch;
+}
+
+.cta-group .btn {
+    min-height: 48px;
+    box-sizing: border-box;
+}
+
+.cta-trust {
+    max-width: 44rem;
+    line-height: 1.55;
+}
+
+section[id] {
+    scroll-margin-top: 96px;
+}
+
+.section-title,
+#how-it-works h2,
+#self-hosting h2,
+#faq h2 {
+    text-wrap: balance;
+    letter-spacing: -0.035em;
+}
+
+.use-case-card,
+.feature-card,
+.faq-item,
+.comparison-table-wrapper {
+    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.12);
+}
+
+html.theme-light :is(.use-case-card, .feature-card, .faq-item, .comparison-table-wrapper) {
+    box-shadow: 0 18px 46px oklch(0.22 0.035 140 / 0.09);
+}
+
+.use-case-card,
+.feature-card {
+    height: 100%;
+}
+
+.use-case-card p,
+.feature-card p,
+.faq-item p {
+    line-height: 1.7;
+}
+
+.faq-item summary {
+    min-height: 52px;
+    display: flex;
+    align-items: center;
+}
+
+.comparison-table tbody tr {
+    transition: background-color 0.2s ease;
+}
+
+@media (max-width: 768px) {
+    html {
+        scroll-padding-top: 76px;
+    }
+
+    .container {
+        padding-inline: 1.15rem;
+    }
+
+    section {
+        padding-block: 4.25rem;
+    }
+
+    .hero-text {
+        max-width: none;
+    }
+
+    .hero-text h1,
+    .section-title,
+    #how-it-works h2,
+    #self-hosting h2,
+    #faq h2 {
+        font-size: clamp(2rem, 9vw, 2.65rem) !important;
+    }
+
+    .cta-group {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        width: 100%;
+    }
+
+    .cta-group .btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .cta-group .btn-primary,
+    .cta-group .btn-firefox {
+        grid-column: span 1;
+    }
+
+    .hero-github-cta,
+    .btn-demo-mobile {
+        grid-column: span 1;
+    }
+
+    .use-case-card,
+    .feature-card,
+    .faq-item,
+    .comparison-table-wrapper {
+        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
+    }
+}
+
+@media (max-width: 430px) {
+    .cta-group {
+        grid-template-columns: 1fr;
+    }
+
+    .cta-group .btn-primary,
+    .cta-group .btn-firefox,
+    .hero-github-cta,
+    .btn-demo-mobile {
+        grid-column: 1;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .nav-links a::after,
+    .use-case-card,
+    .feature-card,
+    .faq-item,
+    .btn {
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* (l) Click confetti: a small handful of eucalyptus leaves bursts from
+   wherever the visitor presses (spawned by app.js). Built like the falling
+   leaves above — the outer span owns the flight path (fast burst that
+   brakes at its peak, then sinks), the inner leaf rocks around its stem
+   the whole way down. Deliberately subtle: few, tiny, short-lived. */
+.click-leaf {
+    position: fixed;
+    z-index: 3000;
+    margin: -6px 0 0 -4px;
+    pointer-events: none;
+    opacity: 0;
+    animation: leafBurst var(--leaf-dur, 1.1s) forwards;
+    will-change: transform, opacity;
+}
+
+.click-leaf i {
+    display: block;
+    width: 8px;
+    height: 12px;
+    border-radius: 0 70% 0 70%;
+    background: linear-gradient(135deg, oklch(0.62 0.12 150 / 0.95), oklch(0.45 0.09 145 / 0.85));
+    transform: rotate(var(--leaf-rot, 0deg));
+    animation: leafRock var(--flutter-dur, 0.6s) ease-in-out infinite alternate;
+}
+
+.click-leaf-sage i {
+    background: linear-gradient(135deg, oklch(0.72 0.09 140 / 0.9), oklch(0.55 0.08 145 / 0.8));
+}
+
+.click-leaf-amber i {
+    background: linear-gradient(135deg, oklch(0.68 0.14 55 / 0.95), oklch(0.55 0.13 40 / 0.85));
+}
+
+/* Two-phase flight: --leaf-x/--leaf-y is the burst PEAK; from there each
+   leaf loses momentum and sinks past it while fading. Per-segment timing
+   functions give the fast pop and the gentle fall. */
+@keyframes leafBurst {
+    0% {
+        opacity: 0;
+        transform: translate(0, 0) scale(var(--leaf-scale, 1));
+        animation-timing-function: cubic-bezier(0.16, 0.84, 0.44, 1);
+    }
+    10% { opacity: 1; }
+    45% {
+        opacity: 1;
+        transform: translate(var(--leaf-x, 0), var(--leaf-y, -20px)) scale(var(--leaf-scale, 1));
+        animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
+    }
+    100% {
+        opacity: 0;
+        transform: translate(calc(var(--leaf-x, 0) * 1.4), calc(var(--leaf-y, -20px) + 44px)) scale(calc(var(--leaf-scale, 1) * 0.92));
+    }
+}
+
+@keyframes leafRock {
+    from { transform: rotate(calc(var(--leaf-rot, 0deg) - 24deg)); }
+    to { transform: rotate(calc(var(--leaf-rot, 0deg) + 24deg)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .click-leaf { display: none; }
+    .bg-nature *,
+    .bg-nature *::before,
+    .bg-nature *::after {
+        animation: none !important;
+    }
+    .fall-leaf { opacity: 0; }
+}
+
+/* --- Layout --- */
+.container {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0 2rem;
+}
+
+section {
+    padding: 6rem 0;
+}
+
+#how-it-works {
+    padding: 4.5rem 0;
+}
+
+/* Content-visibility for offscreen sections to improve INP */
+.use-cases-section,
+#self-hosting,
+.comparison-section {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 1400px;
+}
+
+/* --- Navigation --- */
+nav {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+    background: var(--glass);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--glass-border);
+    padding: 1rem 0;
+    transition: padding 0.3s ease, background 0.3s ease;
+}
+
+nav.nav-scrolled {
+    padding: 0.75rem 0;
+    background: oklch(0.20 0.025 140 / 0.9);
+}
+
+html.theme-light nav.nav-scrolled {
+    background: oklch(0.95 0.01 100 / 0.92);
+}
+
+.nav-content {
+    display: flex;
+    align-items: center;
+}
+
+.logo-area {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-weight: 800;
+    font-size: 1.5rem;
+    letter-spacing: -0.5px;
+}
+
+/* Logo can be a plain <a>; without this it falls back to the UA link blue,
+   which clashed silently with the old indigo theme and visibly with green. */
+a.logo-area {
+    color: var(--text);
+}
+
+.logo-area picture {
+    display: contents;
+}
+
+.logo-area img {
+    height: 64px;
+    width: 64px;
+    object-fit: contain;
+    border-radius: 8px;
+    margin: -4px 0;
+}
+
+.nav-ext-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    background: oklch(0.68 0.13 150 / 0.15);
+    border: 1px solid oklch(0.68 0.13 150 / 0.3);
+    color: oklch(0.68 0.13 150);
+    border-radius: 12px;
+    font-size: 0.55rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.1);
+    animation: fade-in 0.4s ease-out;
+    margin-left: 0.2rem;
+}
+
+@keyframes fade-in {
+    from { opacity: 0; transform: translateY(-5px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.nav-links {
+    display: flex;
+    gap: 2rem;
+    margin-left: auto;
+}
+
+.nav-links a {
+    color: var(--text-muted);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s;
+}
+
+.nav-links a:hover {
+    color: var(--accent);
+}
+
+.nav-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-left: 2rem;
+    flex-shrink: 0;
+}
+
+/* --- Theme Toggle (sun/moon) --- */
+.theme-toggle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 10px;
+    color: var(--text-muted);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: color 0.3s, transform 0.3s;
+    overflow: hidden;
+}
+
+.theme-toggle:hover {
+    color: var(--accent);
+    transform: scale(1.15);
+}
+
+.theme-toggle:active {
+    transform: scale(0.9);
+}
+
+.theme-toggle svg {
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
+}
+
+/* Default (Dark mode): Sun visible, Moon hidden & rotated */
+.theme-toggle .theme-icon-sun {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+}
+
+.theme-toggle .theme-icon-moon {
+    opacity: 0;
+    transform: scale(0) rotate(-90deg);
+}
+
+/* Light mode: Moon visible, Sun hidden & rotated */
+html.theme-light .theme-toggle .theme-icon-sun {
+    opacity: 0;
+    transform: scale(0) rotate(90deg);
+}
+
+html.theme-light .theme-toggle .theme-icon-moon {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+}
+
+/* --- Light Theme --- */
+html.theme-light {
+    --accent-green: oklch(0.52 0.12 150);
+    --accent-green-hover: oklch(0.58 0.12 150);
+    --text-on-green: #ffffff;
+    --bg: oklch(0.95 0.01 100);
+    --card: #ffffff;
+    --accent: var(--accent-green);
+    --accent-glow: oklch(0.52 0.12 150 / 0.25);
+    --text: oklch(0.20 0.025 140);
+    --text-muted: oklch(0.45 0.02 110);
+    --glass: rgba(255, 255, 255, 0.7);
+    --glass-border: oklch(0.20 0.025 140 / 0.08);
+    --section-tint: transparent;
+    --section-tint-strong: oklch(0.88 0.015 90 / 0.5);
+    --card-surface: rgba(255, 255, 255, 0.75);
+    --card-border: oklch(0.20 0.025 140 / 0.08);
+    color-scheme: light;
+}
+
+html.theme-light .bg-nature {
+    background:
+        radial-gradient(circle at 16% 10%, oklch(0.85 0.06 150 / 0.3), transparent 34rem),
+        radial-gradient(circle at 78% 68%, oklch(0.85 0.06 60 / 0.2), transparent 38rem),
+        linear-gradient(180deg, oklch(0.96 0.01 90) 0%, oklch(0.93 0.025 140) 46%, oklch(0.96 0.01 90) 100%);
+}
+
+html.theme-light .bg-canopy,
+html.theme-light .canopy-arc,
+html.theme-light .bg-grass {
+    opacity: 0.45;
+}
+
+/* By day the stalks get their own fresh-green recipes — the dark-theme
+   gradients faded to 45% read as grey smears on the light backdrop and
+   stopped looking like bamboo at all. */
+html.theme-light #bamboo-far .bamboo-stalk {
+    opacity: 0.55;
+    background:
+        repeating-linear-gradient(180deg,
+            transparent 0, transparent 108px,
+            oklch(0.55 0.09 145 / 0.4) 108px, oklch(0.55 0.09 145 / 0.4) 112px),
+        linear-gradient(180deg, oklch(0.68 0.11 145 / 0.6), oklch(0.62 0.09 140 / 0.35));
+}
+
+html.theme-light #bamboo-far::before,
+html.theme-light #bamboo-far::after {
+    background: linear-gradient(180deg, oklch(0.7 0.1 145 / 0.5), oklch(0.64 0.08 140 / 0.25));
+}
+
+html.theme-light #bamboo-mid .bamboo-stalk {
+    opacity: 0.65;
+    background:
+        repeating-linear-gradient(180deg,
+            transparent 0, transparent 84px,
+            oklch(0.5 0.1 145 / 0.45) 84px, oklch(0.5 0.1 145 / 0.45) 87px),
+        linear-gradient(90deg, transparent 14%, oklch(0.85 0.08 130 / 0.35) 38%, transparent 68%),
+        linear-gradient(180deg, oklch(0.63 0.115 145 / 0.65), oklch(0.57 0.09 140 / 0.4));
+}
+
+html.theme-light #bamboo-mid .bamboo-stalk::before,
+html.theme-light #bamboo-mid .bamboo-stalk::after {
+    background: oklch(0.55 0.13 145 / 0.5);
+}
+
+html.theme-light #bamboo-near .bamboo-stalk {
+    opacity: 0.75;
+    background:
+        linear-gradient(90deg, transparent 12%, oklch(0.88 0.07 130 / 0.4) 36%, transparent 64%),
+        linear-gradient(180deg, oklch(0.59 0.12 145 / 0.75), oklch(0.52 0.1 140 / 0.5));
+}
+
+html.theme-light #bamboo-near .bamboo-node {
+    background: oklch(0.45 0.1 145 / 0.65);
+}
+
+html.theme-light #bamboo-near .bamboo-leaf {
+    background: oklch(0.55 0.13 145 / 0.6);
+}
+
+/* The centre trunks stay whisper-quiet by daylight too */
+html.theme-light #bamboo-far .far-6,
+html.theme-light #bamboo-far .far-7 {
+    opacity: 0.26;
+}
+
+html.theme-light .bg-mist {
+    display: none;
+}
+
+html.theme-light .bg-dusk-tint {
+    display: none;
+}
+
+html.theme-light .godray {
+    filter: blur(12px);
+    opacity: 0.5;
+}
+
+html.theme-light .bg-grain {
+    opacity: 0.035;
+}
+
+html.theme-light .feature-card,
+html.theme-light .faq-item {
+    background: var(--card-surface);
+    border-color: var(--card-border);
+    box-shadow: 0 8px 24px oklch(0.20 0.025 140 / 0.06);
+}
+
+html.theme-light .feature-card::before {
+    background: linear-gradient(to bottom right, oklch(0.20 0.025 140 / 0.08), transparent);
+}
+
+html.theme-light .use-case-card {
+    background: var(--card-surface);
+}
+
+html.theme-light .use-case-card h3 {
+    color: var(--text);
+}
+
+html.theme-light .use-case-card:hover {
+    box-shadow: 0 12px 30px oklch(0.20 0.025 140 / 0.12);
+    border-color: oklch(0.20 0.025 140 / 0.15);
+}
+
+html.theme-light .faq-item[open] {
+    background: #ffffff;
+}
+
+html.theme-light .faq-item p {
+    border-top-color: oklch(0.20 0.025 140 / 0.08);
+}
+
+html.theme-light .btn-secondary {
+    background: #ffffff;
+    border-color: oklch(0.20 0.025 140 / 0.12);
+}
+
+html.theme-light .btn-secondary:hover {
+    background: oklch(0.88 0.015 90);
+}
+
+html.theme-light .btn-firefox {
+    background: oklch(0.62 0.14 45);
+    color: #ffffff;
+    box-shadow: 0 10px 18px oklch(0.62 0.14 45 / 0.24);
+}
+
+html.theme-light .btn-firefox:hover {
+    background: oklch(0.55 0.13 45);
+    box-shadow: 0 18px 26px oklch(0.62 0.14 45 / 0.28);
+}
+
+html.theme-light .btn-firefox img {
+    filter: brightness(0) saturate(100%) invert(13%) sepia(38%) saturate(1084%) hue-rotate(177deg) brightness(89%) contrast(96%);
+}
+
+html.theme-light .btn-firefox-secondary img {
+    filter: brightness(0) saturate(100%) invert(13%) sepia(38%) saturate(1084%) hue-rotate(177deg) brightness(89%) contrast(96%);
+}
+
+html.theme-light .comparison-section {
+    background: transparent;
+}
+
+html.theme-light .comparison-table-wrapper {
+    background: rgba(255, 255, 255, 0.75);
+    box-shadow: 0 10px 30px oklch(0.20 0.025 140 / 0.08);
+}
+
+html.theme-light .comparison-table th {
+    background: oklch(0.20 0.025 140 / 0.06);
+    color: var(--text);
+}
+
+html.theme-light .comparison-table th,
+html.theme-light .comparison-table td {
+    border-bottom-color: oklch(0.20 0.025 140 / 0.08);
+}
+
+html.theme-light .comparison-table tbody tr:hover {
+    background: oklch(0.20 0.025 140 / 0.03);
+}
+
+html.theme-light .feat-name strong {
+    color: var(--text);
+}
+
+html.theme-light .table-footnotes {
+    background: oklch(0.20 0.025 140 / 0.04);
+    border-top-color: oklch(0.20 0.025 140 / 0.06);
+}
+
+@media (max-width: 900px) {
+    html.theme-light .comparison-table tbody tr {
+        background: rgba(255, 255, 255, 0.85);
+        box-shadow: 0 6px 18px oklch(0.20 0.025 140 / 0.08);
+    }
+    html.theme-light .comparison-table td.feat-name {
+        background: oklch(0.20 0.025 140 / 0.05);
+    }
+    html.theme-light .comparison-table td {
+        border-bottom-color: oklch(0.20 0.025 140 / 0.08);
+    }
+}
+
+html.theme-light .compat-logo img,
+html.theme-light .compat-logo {
+    filter: none;
+}
+
diff --git a/website/styles/hero.css b/website/styles/hero.css
new file mode 100644
index 0000000..df9651d
--- /dev/null
+++ b/website/styles/hero.css
@@ -0,0 +1,911 @@
+/* --- Hero Section --- */
+.hero {
+    min-height: 100vh;
+    display: flex;
+    align-items: flex-start;
+    padding-top: clamp(8rem, 12vh, 10rem);
+    padding-bottom: clamp(2rem, 5vh, 4rem);
+}
+
+.hero-grid {
+    display: grid;
+    /* Single column until the interactive demo appears (1024px). Below that the
+       headline gets the full width and the install CTAs stay prominent while the
+       demo stacks underneath, matching the demo's own 1024px breakpoint. */
+    grid-template-columns: minmax(0, 1fr);
+    align-content: center;
+    /* Keep the whole hero vertically centered. Do not use grid alignment to fix
+       the demo top edge; that moves the headline and breaks the hero balance. */
+    align-items: center;
+    gap: 3rem;
+    text-align: left;
+    width: 100%;
+    min-height: calc(100svh - 12.5rem);
+}
+
+@media (min-width: 1024px) {
+    .container {
+        max-width: 1200px;
+    }
+    .hero-grid {
+        grid-template-columns: 1.35fr 1fr;
+        gap: 3.5rem;
+    }
+    .cta-group {
+        gap: 0.75rem;
+    }
+    .cta-group .btn {
+        padding: 0.8rem 1.35rem;
+    }
+}
+
+.hero-text h1 {
+    font-size: clamp(2.9rem, 4.1vw, 4rem);
+    font-weight: 800;
+    line-height: 1.12;
+    margin-bottom: 1.4rem;
+    padding-bottom: 0.1em;
+    color: var(--text);
+    letter-spacing: -0.02em;
+}
+
+.hero-text h1 .hero-highlight {
+    background: linear-gradient(90deg, var(--accent-green), var(--accent-terracotta), var(--accent-green));
+    background-size: 300% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    white-space: nowrap;
+    animation: hero-gradient-pan 10s linear infinite;
+    /* background-clip: text only paints inside the layout box; with the
+       negative h1 letter-spacing the last glyph overhangs it and gets cut
+       off. Invisible padding extends the paint area without moving text. */
+    padding-right: 0.08em;
+    margin-right: -0.08em;
+}
+
+@keyframes hero-gradient-pan {
+    from { background-position: 0% 50%; }
+    to { background-position: 300% 50%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .hero-text h1 .hero-highlight {
+        animation: none;
+    }
+}
+
+.hero-text p, .hero-subtitle {
+    font-size: 1.25rem;
+    color: var(--text-muted);
+    margin-bottom: 1.9rem;
+    max-width: 600px;
+    font-weight: 400;
+    line-height: 1.6;
+}
+
+.hero-mascot-container {
+    position: relative;
+    display: block;
+    margin-bottom: -0.5rem;
+    margin-left: 2.2rem;
+}
+
+.hero-lookdown-mascot {
+    display: block;
+    width: 90px;
+    height: auto;
+}
+
+/* Changelog link as the koala's comic speech bubble. Absolutely positioned
+   so it never moves the koala out of its spot above the install buttons. */
+.koala-speech-bubble {
+    position: absolute;
+    left: 108px;
+    top: 0.2rem;
+    width: max-content;
+    max-width: min(240px, calc(100% - 120px));
+    display: block;
+    text-decoration: none;
+    text-align: left;
+    background: oklch(0.27 0.035 130 / 0.95);
+    border: 1px solid oklch(0.68 0.13 150 / 0.45);
+    border-radius: 14px;
+    border-bottom-left-radius: 4px;
+    padding: 0.6rem 0.9rem;
+    line-height: 1.35;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+    animation: bubble-float 4s ease-in-out infinite;
+    transition: border-color 0.25s ease, box-shadow 0.25s ease;
+}
+
+/* Tail: outline triangle + fill triangle so it reads as part of the bubble */
+.koala-speech-bubble::before,
+.koala-speech-bubble::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+}
+
+.koala-speech-bubble::before {
+    left: -11px;
+    bottom: 10px;
+    border-top: 8px solid transparent;
+    border-bottom: 4px solid transparent;
+    border-right: 11px solid oklch(0.68 0.13 150 / 0.45);
+}
+
+.koala-speech-bubble::after {
+    left: -9px;
+    bottom: 11px;
+    border-top: 7px solid transparent;
+    border-bottom: 3px solid transparent;
+    border-right: 10px solid oklch(0.27 0.035 130 / 0.95);
+}
+
+.koala-speech-bubble:hover {
+    border-color: oklch(0.68 0.13 150 / 0.85);
+    box-shadow: 0 8px 28px oklch(0.68 0.13 150 / 0.35);
+}
+
+.koala-speech-bubble .version-text-en,
+.koala-speech-bubble .version-text-de {
+    display: block;
+}
+
+.koala-speech-bubble .bubble-title {
+    display: block;
+    font-size: 0.85rem;
+    font-weight: 800;
+    color: var(--text);
+    letter-spacing: 0;
+    white-space: nowrap;
+}
+
+.koala-speech-bubble .bubble-sub {
+    display: block;
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--accent);
+    margin-top: 2px;
+}
+
+html.theme-light .koala-speech-bubble {
+    background: rgba(255, 255, 255, 0.96);
+    box-shadow: 0 8px 24px oklch(0.20 0.025 140 / 0.12);
+}
+
+html.theme-light .koala-speech-bubble::after {
+    border-right-color: rgba(255, 255, 255, 0.96);
+}
+
+@keyframes bubble-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-4px); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .koala-speech-bubble {
+        animation: none;
+    }
+}
+
+@media (max-width: 768px) {
+    /* The koala keeps standing on the active install CTA; app.js updates the
+       offset from the real button geometry when the row wraps. */
+    .hero-mascot-container {
+        --hero-mascot-offset: 0px;
+        margin-left: 0;
+        display: flex;
+        justify-content: center;
+    }
+    .hero-lookdown-mascot {
+        transform: translateX(var(--hero-mascot-offset));
+    }
+    .koala-speech-bubble {
+        left: calc(50% + var(--hero-mascot-offset) + 50px);
+        right: 0.75rem;
+        top: 0.3rem;
+        max-width: 240px;
+        padding: 0.5rem 0.75rem;
+    }
+    .koala-speech-bubble .bubble-title {
+        font-size: 0.8rem;
+    }
+    .koala-speech-bubble .bubble-sub {
+        font-size: 0.68rem;
+    }
+    /* The relative release time is too much text for the small mobile bubble */
+    .koala-speech-bubble .bubble-ago {
+        display: none;
+    }
+}
+
+.cta-group {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+/* Quiet trust line under the install buttons; answers "is it free, is it
+   legit, do I need an account" right at the moment of the click decision. */
+.hero-text .cta-trust {
+    margin-top: 0.85rem;
+    margin-bottom: 0;
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--text-muted);
+    opacity: 0.75;
+    letter-spacing: 0.01em;
+    max-width: none;
+}
+
+.btn {
+    padding: 0.85rem 1.75rem;
+    border-radius: 12px;
+    font-weight: 600;
+    text-decoration: none;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.95rem;
+}
+.btn-primary {
+    background: linear-gradient(135deg, oklch(0.48 0.13 150), oklch(0.39 0.10 145));
+    color: #fff;
+    border: 1px solid oklch(0.72 0.11 95 / 0.24);
+    box-shadow: 0 12px 24px -8px oklch(0.38 0.11 148 / 0.65), 0 0 0 1px oklch(0.80 0.08 90 / 0.06) inset;
+}
+
+.btn-primary:hover {
+    background: linear-gradient(135deg, oklch(0.54 0.14 150), oklch(0.44 0.11 145));
+    transform: translateY(-2px);
+    box-shadow: 0 18px 32px -8px oklch(0.38 0.11 148 / 0.75), 0 0 18px oklch(0.68 0.13 150 / 0.18);
+}
+
+.btn-firefox {
+    background: oklch(0.62 0.14 45);
+    color: white;
+    box-shadow: 0 10px 15px -3px oklch(0.62 0.14 45 / 0.3);
+}
+
+.btn-firefox:hover {
+    background: oklch(0.68 0.14 45);
+    transform: translateY(-2px);
+    box-shadow: 0 20px 25px -5px oklch(0.62 0.14 45 / 0.4);
+}
+
+.btn-secondary {
+    background: var(--card);
+    color: var(--text);
+    border: 1px solid var(--glass-border);
+}
+
+.btn-secondary:hover {
+    background: oklch(0.30 0.03 125);
+    transform: translateY(-2px);
+}
+
+.btn-demo-mobile {
+    display: none;
+    border: 1px solid oklch(0.68 0.13 150 / 0.34);
+    cursor: pointer;
+    font: inherit;
+}
+
+.btn-demo-mobile svg {
+    flex-shrink: 0;
+}
+
+/* Install buttons: compact by default (just the browser name) so all three
+   CTAs fit one line; the detected browser expands to the full call to action.
+   The GitHub button stays compact always. */
+.btn-label-full { display: none; }
+
+.btn-install:not(.is-detected),
+.btn-compact {
+    padding: 0.62rem 1.05rem;
+    font-size: 0.9rem;
+    gap: 0.4rem;
+}
+
+.btn-install.is-detected .btn-label-short { display: none; }
+.btn-install.is-detected .btn-label-full { display: inline; }
+
+.version-badge {
+    display: inline-block;
+    background: oklch(0.68 0.13 150 / 0.1);
+    color: var(--accent);
+    padding: 0.4rem 1rem;
+    border-radius: 99px;
+    font-size: 0.8rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    border: 1px solid oklch(0.68 0.13 150 / 0.3);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
+}
+
+.version-badge-below {
+    margin-bottom: 0;
+    margin-top: 1.5rem;
+}
+
+.version-badge:hover {
+    background: oklch(0.68 0.13 150 / 0.2);
+    box-shadow: 0 0 16px oklch(0.68 0.13 150 / 0.3);
+    transform: translateY(-1px);
+}
+
+/* --- Interactive CSS Extension Mockup --- */
+.hero-mockup-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.extension-mockup {
+    width: 100%;
+    max-width: 320px;
+    height: 528px;
+    background: oklch(0.20 0.025 140);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px oklch(0.68 0.13 150 / 0.15);
+    display: flex;
+    flex-direction: column;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    overflow: hidden;
+    position: relative;
+    user-select: none;
+    padding: 14px;
+    padding-bottom: 0;
+    box-sizing: border-box;
+}
+
+.mock-header-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    flex-shrink: 0;
+}
+
+.mock-header-title {
+    font-size: 18px;
+    margin: 0;
+    color: var(--accent);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 800;
+}
+
+.mock-header-title picture {
+    display: contents;
+}
+
+.mock-header-title img {
+    width: 28px;
+    height: 28px;
+    object-fit: contain;
+    border-radius: 6px;
+}
+
+.mock-version-link {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 10px;
+    color: var(--text-muted);
+    text-decoration: none;
+    opacity: 0.5;
+    transition: opacity 0.2s, color 0.2s;
+    cursor: pointer;
+}
+
+.mock-version-link:hover {
+    opacity: 1;
+    color: var(--accent);
+}
+
+/* Close button for the hero demo popup (hidden in the static mobile mockup) */
+.mock-close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    margin-left: 8px;
+    padding: 0;
+    flex-shrink: 0;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: color 0.2s, background 0.2s;
+}
+
+.mock-close-btn:hover {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 1024px) {
+    .mock-close-btn {
+        display: none;
+    }
+}
+
+.mock-tabs {
+    display: flex;
+    gap: 4px;
+    background: oklch(0.27 0.035 130);
+    padding: 4px;
+    border-radius: 12px;
+    margin-bottom: 14px;
+    flex-shrink: 0;
+}
+
+.mock-tab {
+    flex: 1;
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 7px 4px;
+    cursor: pointer;
+    border-radius: 8px;
+    transition: color 0.2s, background-color 0.2s;
+    text-align: center;
+}
+
+.mock-tab:hover {
+    color: var(--text);
+}
+
+.mock-tab.active {
+    background: var(--accent);
+    color: var(--text-on-green);
+}
+
+.mock-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+    padding-bottom: 12px;
+    display: flex;
+    flex-direction: column;
+    font-size: 0.8rem;
+    scrollbar-width: none; /* Firefox */
+}
+
+.mock-body::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+}
+
+.mock-screen {
+    display: none;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.mock-screen.active {
+    display: flex;
+}
+
+/* Common Mockup Components */
+.mock-card {
+    background: oklch(0.27 0.035 130);
+    border: 1px solid oklch(0.32 0.03 125);
+    border-radius: 8px;
+    padding: 10px;
+}
+
+.mock-label {
+    font-size: 0.65rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.3rem;
+}
+
+.mock-section-label {
+    display: block;
+    font-size: 11px;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin-bottom: 4px;
+    font-weight: 700;
+}
+
+.mock-input {
+    background: oklch(0.27 0.035 130);
+    border: 1px solid oklch(0.32 0.03 125);
+    border-radius: 8px;
+    color: white;
+    padding: 8px 10px;
+    font-size: 0.75rem;
+    width: 100%;
+    outline: none;
+}
+
+.mock-btn {
+    background: var(--accent);
+    color: var(--text-on-green);
+    border: none;
+    border-radius: 6px;
+    padding: 0.5rem;
+    font-weight: 600;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: background 0.2s;
+    text-align: center;
+}
+
+.mock-btn:hover {
+    background: oklch(0.60 0.12 150);
+}
+
+/* Room Tab Details */
+.mock-joined-room {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: oklch(0.68 0.13 150 / 0.1);
+    border: 1px solid oklch(0.68 0.13 150 / 0.2);
+    border-radius: 8px;
+    padding: 0.6rem 0.75rem;
+}
+
+.mock-room-name {
+    font-weight: 700;
+    color: var(--accent);
+    font-size: 0.85rem;
+}
+
+.mock-server-badge {
+    background: oklch(0.68 0.13 150 / 0.2);
+    color: var(--accent);
+    font-size: 0.6rem;
+    font-weight: 700;
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+
+.mock-invite-box {
+    display: flex;
+    gap: 0.35rem;
+}
+
+.mock-invite-box input {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.demo-room-empty {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 24px 10px;
+    text-align: center;
+}
+.demo-room-empty img {
+    border-radius: 10px;
+    opacity: 0.85;
+    box-shadow: 0 4px 12px oklch(0.68 0.13 150 / 0.2);
+}
+.demo-room-empty-text {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    font-weight: 600;
+}
+.demo-create-room-btn {
+    background: var(--accent);
+    border: none;
+    color: var(--text-on-green);
+    font-weight: 700;
+    padding: 10px 18px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+.demo-create-room-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px oklch(0.68 0.13 150 / 0.4);
+}
+.demo-create-room-btn:active {
+    transform: scale(0.96);
+}
+
+.mock-peer-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.mock-peer-item {
+    display: flex;
+    flex-direction: column;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.03);
+    border-radius: 8px;
+    padding: 0.45rem 0.55rem;
+}
+
+.mock-peer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+}
+
+.mock-peer-name {
+    font-weight: 700;
+    color: var(--text);
+}
+
+.mock-peer-meta {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+}
+
+.mock-peer-tab {
+    font-size: 0.7rem;
+    color: var(--accent);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mock-peer-status {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+/* Sync Tab Details */
+.mock-target-box {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    background: oklch(0.62 0.14 45 / 0.1);
+    border: 1px solid oklch(0.62 0.14 45 / 0.2);
+    color: oklch(0.72 0.13 50);
+    padding: 0.5rem 0.6rem;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 0.7rem;
+}
+
+.mock-ctrl-buttons {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+}
+
+.mock-btn-play { background: oklch(0.68 0.13 150); }
+.mock-btn-play:hover { background: oklch(0.60 0.12 150); }
+.mock-btn-pause { background: oklch(0.55 0.15 25); color: #fff; }
+.mock-btn-pause:hover { background: oklch(0.48 0.14 25); }
+.mock-btn-force { background: var(--accent); grid-column: span 2; }
+
+/* Contrast-safe palette for the decorative hero demo. Lighthouse/axe audits
+   sighted text contrast even inside aria-hidden, so every walkthrough state
+   must meet WCAG AA. Accent shown as text gets a lighter indigo; buttons that
+   put white text on a colour get a darker shade (these beat inline styles). */
+.hero-demo-scene {
+    --accent: oklch(0.80 0.10 150);
+    --demo-sky-top: oklch(0.22 0.055 152);
+    --demo-sky-mid: oklch(0.145 0.035 150);
+    --demo-sky-bottom: oklch(0.075 0.018 145);
+    --demo-glow: oklch(0.76 0.13 150 / 0.34);
+    --demo-stars: oklch(0.94 0.025 95);
+    --demo-moon: oklch(0.97 0.025 92);
+    --demo-mountain: oklch(0.18 0.055 148 / 0.9);
+    --demo-midground: oklch(0.22 0.065 145 / 0.88);
+    --demo-foreground: oklch(0.065 0.025 145);
+    --demo-card: oklch(0.18 0.032 142);
+    --demo-toolbar: oklch(0.12 0.025 142);
+    --demo-control-fade: oklch(0.055 0.015 145 / 0.94);
+    --demo-track: oklch(0.92 0.02 95 / 0.2);
+}
+.hero-demo-scene .mock-tab.active,
+.hero-demo-scene .mock-btn-force,
+.hero-demo-scene #demo-force-sync,
+.hero-demo-scene .demo-create-room-btn {
+    background: oklch(0.42 0.09 150) !important;
+    color: #fff;
+}
+.hero-demo-scene .mock-btn-play {
+    background: oklch(0.50 0.11 150) !important;
+}
+.hero-demo-scene .mock-btn-pause,
+.hero-demo-scene #demo-room-joined > button.mock-btn {
+    background: oklch(0.45 0.14 25) !important;
+}
+.hero-demo-scene .mock-version-link {
+    opacity: 0.85;
+}
+
+html.theme-light .hero-demo-scene {
+    --accent: oklch(0.60 0.12 150);
+    --demo-sky-top: oklch(0.86 0.085 78);
+    --demo-sky-mid: oklch(0.76 0.095 112);
+    --demo-sky-bottom: oklch(0.54 0.10 150);
+    --demo-glow: oklch(0.92 0.13 72 / 0.44);
+    --demo-stars: oklch(0.98 0.025 90);
+    --demo-moon: oklch(0.99 0.025 88);
+    --demo-mountain: oklch(0.48 0.095 150 / 0.82);
+    --demo-midground: oklch(0.40 0.10 148 / 0.8);
+    --demo-foreground: oklch(0.24 0.075 145);
+    --demo-card: oklch(0.985 0.008 95);
+    --demo-toolbar: oklch(0.955 0.014 100);
+    --demo-control-fade: oklch(0.16 0.035 145 / 0.88);
+    --demo-track: oklch(0.98 0.01 95 / 0.34);
+}
+
+
+html.theme-light .hero-demo-scene .demo-tab-card {
+    background: var(--demo-card);
+    border-color: oklch(0.20 0.025 140 / 0.1);
+    box-shadow:
+        0 18px 38px oklch(0.20 0.025 140 / 0.16),
+        0 0 28px oklch(0.82 0.10 85 / 0.14),
+        inset 0 1px rgba(255, 255, 255, 0.9);
+}
+
+html.theme-light .hero-demo-scene .demo-tab-titlebar {
+    background: var(--demo-toolbar);
+    border-bottom-color: oklch(0.88 0.015 90);
+    color: oklch(0.45 0.02 110);
+}
+
+html.theme-light .hero-demo-scene .demo-tab-dots i {
+    background: oklch(0.78 0.02 90);
+}
+
+html.theme-light .hero-demo-scene .demo-ext-launcher {
+    background: #ffffff;
+    border-color: oklch(0.78 0.02 90);
+}
+
+html.theme-light .hero-demo-scene .demo-sync-chip {
+    background: oklch(0.55 0.12 150 / 0.1);
+    border-color: oklch(0.55 0.12 150 / 0.26);
+    color: oklch(0.40 0.10 150);
+}
+
+.mock-status-display {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.mock-status-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    background: oklch(0.68 0.13 150 / 0.1);
+    border: 1px solid oklch(0.68 0.13 150 / 0.2);
+    color: oklch(0.68 0.13 150);
+    padding: 2px 8px;
+    border-radius: 99px;
+    font-size: 0.65rem;
+    font-weight: 700;
+}
+
+.mock-log-item {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    border-left: 2px solid var(--accent);
+    padding-left: 0.4rem;
+    margin-top: 0.4rem;
+}
+
+/* Settings Tab Details */
+.mock-settings-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    margin-bottom: 0.6rem;
+}
+
+.mock-settings-row input[type="checkbox"] {
+    margin-top: 0.2rem;
+    cursor: pointer;
+}
+
+.mock-settings-row label {
+    cursor: pointer;
+    font-weight: 600;
+}
+
+.mock-settings-row p {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    margin-top: 0.1rem;
+}
+
+/* Mock Toggle Switch Details */
+.mock-toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 36px;
+    height: 20px;
+    flex-shrink: 0;
+}
+
+.mock-toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.mock-slider {
+    position: absolute;
+    cursor: default;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: oklch(0.32 0.03 125);
+    transition: .3s;
+    border-radius: 20px;
+}
+
+.mock-slider:before {
+    position: absolute;
+    content: "";
+    height: 14px;
+    width: 14px;
+    left: 3px;
+    bottom: 3px;
+    background-color: oklch(0.68 0.02 100);
+    transition: .3s;
+    border-radius: 50%;
+}
+
+input:checked + .mock-slider {
+    background-color: var(--accent);
+}
+
+input:checked + .mock-slider:before {
+    transform: translateX(16px);
+    background-color: white;
+}
+
+/* Dev Tab Details */
+.mock-diagnostic-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.4rem;
+}
+
+.mock-diag-box {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.04);
+    border-radius: 6px;
+    padding: 0.4rem;
+}
+
+.mock-diag-box .diag-val {
+    font-family: monospace;
+    font-weight: 700;
+    color: var(--accent);
+    font-size: 0.75rem;
+}
+
diff --git a/website/styles/join-spinner.css b/website/styles/join-spinner.css
new file mode 100644
index 0000000..bff4456
--- /dev/null
+++ b/website/styles/join-spinner.css
@@ -0,0 +1,41 @@
+/* --- Join Page Loading Spinner --- */
+.join-spinner {
+    width: 36px;
+    height: 36px;
+    border: 3px solid oklch(0.68 0.13 150 / 0.2);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin: 0 auto 0.75rem;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* --- Reduced Motion --- */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+    [data-reveal] {
+        opacity: 1;
+        transform: none;
+    }
+    .illus-typing-text::after {
+        animation: none;
+    }
+    .illus-timeline-progress {
+        animation: none;
+        width: 60%;
+    }
+    .illus-sync-pulse {
+        animation: none;
+    }
+    .illus-extension-icon {
+        animation: none;
+    }
+}
+
diff --git a/website/styles/join.css b/website/styles/join.css
new file mode 100644
index 0000000..e9b2ff8
--- /dev/null
+++ b/website/styles/join.css
@@ -0,0 +1,141 @@
+/* --- Join & Invitation Page Visuals --- */
+.join-status-visual {
+    margin-bottom: 2rem;
+    position: relative;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.join-status-mascot {
+    display: block;
+    width: 140px;
+    height: auto;
+    z-index: 2;
+    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
+}
+
+.join-status-mascot.searching-mascot {
+    width: 175px; /* Slightly wider due to antenna to keep main body scale identical */
+}
+
+.join-status-pulse {
+    animation: mascot-gentle-pulse 2s ease-in-out infinite;
+}
+
+@keyframes mascot-gentle-pulse {
+    0% {
+        transform: scale(0.96);
+        filter: drop-shadow(0 4px 10px oklch(0.68 0.13 150 / 0.15));
+    }
+    50% {
+        transform: scale(1.04);
+        filter: drop-shadow(0 8px 20px oklch(0.68 0.13 150 / 0.35));
+    }
+    100% {
+        transform: scale(0.96);
+        filter: drop-shadow(0 4px 10px oklch(0.68 0.13 150 / 0.15));
+    }
+}
+
+.legal-mascot {
+    display: block;
+    width: 180px;
+    height: auto;
+    margin: -0.75rem auto 0.4rem auto;
+    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.legal-mascot:hover {
+    transform: scale(1.06) translateY(-4px) rotate(1.5deg);
+}
+
+.selfhost-mascot {
+    display: block;
+    width: 300px;
+    height: auto;
+    margin: 0 auto;
+    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.selfhost-mascot:hover {
+    transform: scale(1.05) translateY(-4px) rotate(-1deg);
+}
+
+.status-ring {
+    position: absolute;
+    width: 90px;
+    height: 90px;
+    border-radius: 50%;
+    background: oklch(0.68 0.13 150 / 0.05);
+    border: 2px dashed oklch(0.68 0.13 150 / 0.25);
+    z-index: 1;
+}
+
+.status-ring.active-pulse {
+    animation: radar-pulse 3s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
+}
+
+@keyframes radar-pulse {
+    0% {
+        transform: scale(0.85);
+        opacity: 0.9;
+        border-color: oklch(0.68 0.13 150 / 0.3);
+        box-shadow: 0 0 0 0px oklch(0.68 0.13 150 / 0.15);
+    }
+    50% {
+        transform: scale(1.18);
+        opacity: 0.35;
+        border-color: oklch(0.75 0.10 150 / 0.2);
+        box-shadow: 0 0 0 15px oklch(0.75 0.10 150 / 0);
+    }
+    100% {
+        transform: scale(0.85);
+        opacity: 0.9;
+        border-color: oklch(0.68 0.13 150 / 0.3);
+        box-shadow: 0 0 0 0px oklch(0.68 0.13 150 / 0.15);
+    }
+}
+
+.join-card-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: 100%;
+}
+
+.join-card-actions .btn {
+    width: 100%;
+    justify-content: center;
+    padding: 1.1rem;
+    font-size: 0.88rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.join-card-actions .btn svg {
+    margin-right: 0.3rem;
+    flex-shrink: 0;
+}
+
+.join-card-actions .btn img {
+    margin-right: 0.3rem;
+    flex-shrink: 0;
+}
+
+.btn-success {
+    background: var(--accent-green);
+    color: var(--text-on-green) !important;
+    box-shadow: 0 10px 15px -3px oklch(0.68 0.13 150 / 0.3);
+}
+
+.btn-success:hover {
+    background: oklch(0.60 0.12 150);
+    transform: translateY(-2px);
+    box-shadow: 0 20px 25px -5px oklch(0.68 0.13 150 / 0.4);
+}
+
diff --git a/website/styles/landing-controls.css b/website/styles/landing-controls.css
new file mode 100644
index 0000000..253104f
--- /dev/null
+++ b/website/styles/landing-controls.css
@@ -0,0 +1,332 @@
+/* --- Language Toggle --- */
+html.lang-de [lang="en"] {
+    display: none !important;
+}
+html:not(.lang-de) [lang="de"] {
+    display: none !important;
+}
+
+/* --- Modern Glassmorphic Language Selector --- */
+.lang-select-container {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: oklch(0.27 0.035 130 / 0.4);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 9999px;
+    padding: 6px 14px;
+    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    color: var(--text-muted);
+}
+
+.lang-select-container:hover {
+    background: oklch(0.27 0.035 130 / 0.6);
+    border-color: oklch(0.68 0.13 150 / 0.3);
+    color: var(--text);
+    box-shadow: 0 0 15px oklch(0.68 0.13 150 / 0.1);
+}
+
+.lang-select-container .globe-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    opacity: 0.8;
+    transition: transform 0.5s ease;
+}
+
+.lang-select-container:hover .globe-icon {
+    transform: rotate(15deg);
+    opacity: 1;
+}
+
+.lang-select-container .chevron-icon {
+    position: absolute;
+    right: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 12px;
+    height: 12px;
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+.lang-select-container:hover .chevron-icon {
+    opacity: 1;
+}
+
+.lang-dropdown {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background: transparent;
+    border: none;
+    outline: none;
+    font-family: inherit;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: currentColor;
+    cursor: pointer;
+    padding: 0 28px 0 0;
+    margin: 0;
+    width: auto;
+    min-width: 110px;
+    overflow: hidden;
+}
+
+@supports (appearance: base-select) {
+    .lang-dropdown::picker(select) {
+        appearance: base-select;
+        background-color: oklch(0.20 0.025 140);
+        border: 1px solid oklch(0.32 0.03 125);
+        border-radius: 8px;
+        padding: 4px;
+        font-family: 'Twemoji Country Flags', inherit;
+    }
+}
+
+.lang-dropdown option {
+    background: oklch(0.20 0.025 140);
+    color: white;
+    font-family: inherit;
+    font-size: 0.9rem;
+}
+
+/* Light theme: the pill was designed on the dark glass recipe — by day it
+   becomes frosted white so it sits in the same family as the buttons. */
+html.theme-light .lang-select-container {
+    background: rgba(255, 255, 255, 0.6);
+    border-color: oklch(0.28 0.035 140 / 0.14);
+}
+
+html.theme-light .lang-select-container:hover {
+    background: rgba(255, 255, 255, 0.85);
+    border-color: oklch(0.56 0.13 150 / 0.35);
+    box-shadow: 0 0 15px oklch(0.56 0.13 150 / 0.12);
+}
+
+html.theme-light .lang-dropdown option {
+    background: #ffffff;
+    color: oklch(0.21 0.03 140);
+}
+
+@supports (appearance: base-select) {
+    html.theme-light .lang-dropdown::picker(select) {
+        background-color: #ffffff;
+        border-color: oklch(0.28 0.035 140 / 0.18);
+    }
+}
+
+/* --- Hamburger Menu --- */
+.hamburger {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: var(--text);
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0.25rem;
+    line-height: 1;
+}
+
+/* --- Feature Cards: subtle differentiation --- */
+.feature-card:nth-child(1) { --card-accent: oklch(0.68 0.13 150 / 0.06); }
+.feature-card:nth-child(2) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
+.feature-card:nth-child(3) { --card-accent: oklch(0.68 0.13 150 / 0.06); }
+.feature-card:nth-child(4) { --card-accent: oklch(0.75 0.10 150 / 0.06); }
+.feature-card:nth-child(5) { --card-accent: oklch(0.68 0.14 45 / 0.06); }
+.feature-card:nth-child(6) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
+.feature-card:nth-child(7) { --card-accent: oklch(0.62 0.14 45 / 0.06); }
+.feature-card:nth-child(8) { --card-accent: oklch(0.68 0.13 150 / 0.06); }
+
+.feature-card {
+    background: linear-gradient(135deg, var(--card-accent, transparent), oklch(0.27 0.035 130 / 0.45));
+}
+
+/* --- Compatibility Section --- */
+.compat-section {
+    padding: 0.5rem 0 2.5rem 0;
+    text-align: center;
+    background: transparent;
+    border-bottom: 0;
+}
+
+.compat-mascot {
+    display: block;
+    margin: 0 auto 0.3rem auto;
+    max-width: 270px;
+    width: 100%;
+    height: auto;
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.compat-mascot:hover {
+    transform: scale(1.05) translateY(-5px) rotate(1deg);
+}
+
+.compat-heading {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    margin-bottom: 1.4rem;
+}
+
+.compat-row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2.4rem 3rem;
+    flex-wrap: wrap;
+}
+
+.compat-logo {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    transition: opacity 0.3s;
+    opacity: 0.55;
+}
+
+.compat-logo:hover {
+    opacity: 0.85;
+}
+
+.compat-logo img {
+    width: 28px;
+    height: 28px;
+    display: block;
+}
+
+.compat-logo img.compat-logo-wide {
+    width: 52px;
+    height: 28px;
+    object-fit: contain;
+}
+
+.compat-logo img.compat-logo-disneyplus-mark {
+    width: 60px;
+    height: 30px;
+    object-fit: contain;
+    filter: brightness(0) saturate(100%) invert(63%) sepia(12%) saturate(621%) hue-rotate(203deg) brightness(92%) contrast(88%);
+}
+
+html.theme-light .compat-logo img.compat-logo-disneyplus-mark {
+    filter: none;
+}
+
+@media (max-width: 700px) {
+    .compat-section {
+        padding: 0 0 1.6rem;
+    }
+
+    .compat-mascot {
+        max-width: 220px;
+        margin-bottom: 0.1rem;
+    }
+
+    .compat-heading {
+        font-size: 0.92rem;
+        line-height: 1.55;
+        margin-bottom: 1rem;
+    }
+
+    .compat-row {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 1.55rem 0.75rem;
+        align-items: start;
+    }
+
+    .compat-logo {
+        gap: 0.35rem;
+        font-size: 0.72rem;
+    }
+
+    .compat-logo img {
+        width: 26px;
+        height: 26px;
+    }
+
+    .compat-logo img.compat-logo-wide {
+        width: 48px;
+        height: 26px;
+    }
+
+    .compat-logo img.compat-logo-disneyplus-mark {
+        width: 56px;
+        height: 28px;
+    }
+
+    .compat-logo-jellyfin {
+        display: none;
+    }
+
+    .compat-more {
+        grid-column: 1 / -1;
+        justify-self: center;
+        white-space: nowrap;
+    }
+}
+
+.compat-more {
+    opacity: 0.4;
+    cursor: help;
+    flex-direction: row;
+    gap: 0.35rem;
+    position: relative;
+}
+
+.compat-more:hover {
+    opacity: 0.6;
+}
+
+.compat-more-icon {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--accent);
+    line-height: 1;
+}
+
+.compat-tooltip {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 10px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--card);
+    color: var(--text-muted);
+    padding: 0.6rem 0.9rem;
+    border-radius: 8px;
+    font-size: 0.72rem;
+    font-weight: 500;
+    white-space: nowrap;
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
+    z-index: 10;
+    line-height: 1.4;
+}
+
+.compat-tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-top-color: var(--glass-border);
+}
+
+.compat-more:hover .compat-tooltip {
+    display: block;
+}
+
diff --git a/website/styles/landing-demo-gate.css b/website/styles/landing-demo-gate.css
new file mode 100644
index 0000000..2e569d7
--- /dev/null
+++ b/website/styles/landing-demo-gate.css
@@ -0,0 +1,14 @@
+/* Initial mobile shell for the deferred interactive hero demo. */
+@media (max-width: 900px) {
+    .hero-grid > .hero-mockup-wrapper {
+        display: none !important;
+    }
+
+    .hero-github-cta {
+        display: none;
+    }
+
+    .btn-demo-mobile {
+        display: inline-flex;
+    }
+}
diff --git a/website/styles/landing-faq.css b/website/styles/landing-faq.css
new file mode 100644
index 0000000..30994f0
--- /dev/null
+++ b/website/styles/landing-faq.css
@@ -0,0 +1,213 @@
+/* --- Section collapse (FAQ, self-hosting): closed by default to keep the page short --- */
+.section-collapse {
+    margin: 0 auto;
+}
+
+.faq-section-collapse {
+    max-width: 800px;
+}
+
+.collapse-summary {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+    list-style: none;
+    cursor: pointer;
+    font-weight: 700;
+    font-size: 1rem;
+    color: var(--accent);
+    background: oklch(0.68 0.13 150 / 0.08);
+    border: 1px solid oklch(0.68 0.13 150 / 0.3);
+    border-radius: 99px;
+    padding: 0.85rem 2rem;
+    max-width: 360px;
+    margin: 0 auto;
+    transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
+}
+
+.collapse-summary::-webkit-details-marker {
+    display: none;
+}
+
+.collapse-summary:hover {
+    background: oklch(0.68 0.13 150 / 0.16);
+    box-shadow: 0 0 20px oklch(0.68 0.13 150 / 0.25);
+    transform: translateY(-2px);
+}
+
+.collapse-summary .collapse-chevron {
+    flex-shrink: 0;
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.section-collapse[open] .collapse-chevron {
+    transform: rotate(180deg);
+}
+
+.collapse-label-hide { display: none; }
+.section-collapse[open] .collapse-label-show { display: none; }
+.section-collapse[open] .collapse-label-hide { display: inline; }
+
+.section-collapse[open] .collapse-summary {
+    margin-bottom: 2rem;
+}
+
+.section-collapse[open] .collapse-content {
+    animation: collapse-content-in 0.4s ease-out;
+}
+
+@keyframes collapse-content-in {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .section-collapse[open] .collapse-content {
+        animation: none;
+    }
+}
+
+/* --- FAQ Section --- */
+
+.faq-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.faq-item {
+    background: oklch(0.27 0.035 130 / 0.45);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    padding: 1.5rem 2rem;
+    cursor: pointer;
+    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+    overflow: hidden;
+}
+
+.faq-item:hover {
+    border-color: oklch(0.68 0.13 150 / 0.3);
+    box-shadow: 0 8px 20px oklch(0.68 0.13 150 / 0.1);
+}
+
+.faq-item[open] {
+    border-color: oklch(0.68 0.13 150 / 0.4);
+    background: oklch(0.27 0.035 130 / 0.65);
+}
+
+.faq-item summary {
+    font-weight: 700;
+    font-size: 1.05rem;
+    color: var(--text);
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+}
+
+.faq-item summary::-webkit-details-marker {
+    display: none;
+}
+
+.faq-item summary::after {
+    content: '+';
+    font-size: 1.4rem;
+    color: var(--accent);
+    font-weight: 300;
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    flex-shrink: 0;
+    transform-origin: center;
+}
+
+.faq-item[open] summary::after {
+    transform: rotate(45deg);
+}
+
+.faq-item p {
+    color: var(--text-muted);
+    font-size: 0.95rem;
+    line-height: 1.6;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+/* --- Focus states for interactive cards --- */
+.feature-card:focus-visible,
+.use-case-card:focus-visible,
+.compat-logo:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 4px;
+    transform: translateY(-5px);
+}
+.feature-card,
+.use-case-card,
+.compat-logo,
+section[id],
+header[id] {
+    scroll-margin-top: 100px;
+}
+
+/* --- Screen-reader-only (also crawlable by search engines) --- */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* --- Skip-to-content accessibility link --- */
+.skip-link {
+    position: absolute;
+    left: -9999px;
+    top: 0;
+    background: var(--accent);
+    color: var(--text-on-green);
+    padding: 0.75rem 1.25rem;
+    border-radius: 0 0 8px 0;
+    font-weight: 700;
+    z-index: 9999;
+    text-decoration: none;
+}
+.skip-link:focus {
+    left: 0;
+}
+
+/* --- Reduced motion support --- */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+    .join-status-pulse { animation: none; }
+    .status-ring.active-pulse { animation: none; }
+}
+
+/* --- will-change hints for animated elements --- */
+.join-status-pulse,
+.status-ring.active-pulse,
+.hero-mockup-wrapper,
+.cta-group .btn {
+    will-change: transform, opacity;
+}
+@media (prefers-reduced-motion: reduce) {
+    .join-status-pulse,
+    .status-ring.active-pulse,
+    .hero-mockup-wrapper,
+    .cta-group .btn {
+    }
+}
+
diff --git a/website/styles/landing-primary.css b/website/styles/landing-primary.css
new file mode 100644
index 0000000..5f348fe
--- /dev/null
+++ b/website/styles/landing-primary.css
@@ -0,0 +1,1215 @@
+/* --- Features --- */
+/* Bento Grid Layout Configuration */
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+    margin-top: 4rem;
+}
+
+.feature-card.feature-card-compact {
+    padding: 1.8rem;
+    border-radius: 16px;
+}
+
+.feature-card.feature-card-compact::before {
+    border-radius: 16px;
+}
+
+.feature-card.feature-card-compact h3 {
+    font-size: 1.1rem;
+    margin-bottom: 0.75rem;
+}
+
+.feature-card.feature-card-compact p {
+    font-size: 0.9rem;
+}
+
+.feature-card {
+    background: oklch(0.27 0.035 130 / 0.45);
+    backdrop-filter: blur(16px) saturate(120%);
+    -webkit-backdrop-filter: blur(16px) saturate(120%);
+    padding: 2.5rem;
+    border-radius: 24px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+}
+
+.feature-card::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    border-radius: 24px;
+    padding: 1px;
+    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.12), transparent);
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 30px oklch(0.68 0.13 150 / 0.2);
+    border-color: oklch(0.68 0.13 150 / 0.3);
+}
+
+.feature-card:hover::before {
+    background: linear-gradient(to bottom right, oklch(0.68 0.13 150 / 0.3), transparent);
+}
+
+/* Feature Icon with Inline SVG Wrapper */
+.feature-icon-svg {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    background: oklch(0.68 0.13 150 / 0.12);
+    color: var(--accent);
+    border-radius: 12px;
+    margin-right: 14px;
+    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+}
+
+.feature-card:hover .feature-icon-svg {
+    background: var(--accent);
+    color: var(--text-on-green);
+    box-shadow: 0 0 15px var(--accent-glow);
+    transform: scale(1.05);
+}
+
+.bento-icon {
+    width: 22px;
+    height: 22px;
+    display: block;
+    flex-shrink: 0;
+}
+
+.feature-card h3 {
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+}
+
+.feature-card p {
+    color: var(--text-muted);
+    font-size: 0.95rem;
+    line-height: 1.6;
+}
+
+/* Bento Asymmetric Spanning */
+.feature-card.bento-large {
+    grid-column: span 2;
+    background: linear-gradient(135deg, oklch(0.27 0.035 130 / 0.45) 0%, oklch(0.68 0.13 150 / 0.08) 100%);
+    padding: 3rem 3.5rem;
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 3rem;
+    align-items: center;
+}
+
+.feature-card.bento-large h3 {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 1rem;
+    margin-bottom: 0;
+    font-size: 1.25rem;
+}
+
+.feature-card.bento-large .feature-icon,
+.feature-card.bento-large .feature-icon-svg {
+    width: 52px;
+    height: 52px;
+    border-radius: 14px;
+    margin-right: 0;
+    flex-shrink: 0;
+}
+
+.feature-card.bento-large .bento-icon {
+    width: 24px;
+    height: 24px;
+}
+
+.feature-card.bento-large p {
+    font-size: 1rem;
+    line-height: 1.7;
+    margin: 0;
+}
+
+.feature-card.bento-large::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 2.5rem;
+    right: 2.5rem;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, oklch(0.68 0.13 150 / 0.4), transparent);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.feature-card.bento-large:hover::after {
+    opacity: 1;
+}
+
+@media (max-width: 900px) {
+    .features-grid {
+        /* Keep the Why KoalaSync grid at either three columns or one column.
+           The two-column in-between makes compact cards stretch unevenly. */
+        grid-template-columns: 1fr;
+        gap: 1.25rem;
+    }
+    .feature-card.bento-large {
+        grid-column: span 1;
+        padding: 2.5rem;
+        gap: 2rem;
+    }
+    .feature-card.bento-large h3 {
+        font-size: 1.15rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .features-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+    .feature-card.bento-large {
+        grid-column: span 1;
+        display: flex;
+        flex-direction: column;
+        padding: 1.75rem;
+        gap: 1rem;
+    }
+    .feature-card.bento-large h3 {
+        flex-direction: row;
+        align-items: center;
+        text-align: left;
+        gap: 0.75rem;
+        margin-bottom: 0;
+        font-size: 1.15rem;
+    }
+    .feature-card.bento-large .feature-icon,
+    .feature-card.bento-large .feature-icon-svg {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        margin-right: 0;
+    }
+    .feature-card.bento-large .bento-icon {
+        width: 18px;
+        height: 18px;
+    }
+    .feature-card.bento-large p {
+        font-size: 0.9rem;
+        line-height: 1.6;
+    }
+    .feature-card.bento-large::after {
+        display: none;
+    }
+    .feature-card {
+        padding: 1.75rem;
+    }
+    .feature-card h3 {
+        font-size: 1.1rem;
+    }
+    .feature-icon-svg {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        margin-right: 12px;
+    }
+    .bento-icon {
+        width: 18px;
+        height: 18px;
+    }
+}
+
+/* --- How it works --- */
+.steps {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+}
+
+.step {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+    align-items: center;
+}
+
+.step:nth-child(even) .step-text {
+    order: 2;
+}
+
+.step-num {
+    font-size: 3.25rem;
+    font-weight: 900;
+    background: linear-gradient(135deg, oklch(0.68 0.13 150 / 0.5), oklch(0.62 0.14 45 / 0.15));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    line-height: 1;
+    margin-bottom: 0.5rem;
+    font-family: inherit;
+    letter-spacing: 0;
+}
+
+.step-text h3 {
+    font-size: 1.65rem;
+    margin-bottom: 0.75rem;
+    font-weight: 850;
+    color: var(--text-main);
+    letter-spacing: 0;
+}
+
+.step-text p {
+    color: var(--text-muted);
+    font-size: 1rem;
+    line-height: 1.55;
+}
+
+/* Custom CSS Mockups for step illustrations */
+.step-illustration-1, .step-illustration-2, .step-illustration-3 {
+    background: radial-gradient(circle at 10% 10%, oklch(0.20 0.04 145), oklch(0.10 0.015 138));
+    height: 240px;
+    border-radius: 18px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@media (max-width: 900px) {
+    #how-it-works {
+        padding: 3.5rem 0;
+    }
+
+    .steps {
+        gap: 2.75rem;
+    }
+
+    .step {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.1rem;
+        text-align: left;
+    }
+
+    #how-it-works .step .step-text {
+        order: 1;
+    }
+
+    #how-it-works .step-illustration-1,
+    #how-it-works .step-illustration-2,
+    #how-it-works .step-illustration-3 {
+        order: 2;
+        height: 220px;
+    }
+
+    .step-num {
+        font-size: 2.5rem;
+    }
+
+    .step-text h3 {
+        font-size: 1.45rem;
+    }
+}
+
+.step-illustration-1:hover, .step-illustration-2:hover, .step-illustration-3:hover {
+    transform: translateY(-6px) scale(1.02);
+    border-color: oklch(0.68 0.13 150 / 0.25);
+    box-shadow: 0 25px 50px oklch(0.68 0.13 150 / 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+/* ==========================================================================
+   Step 1 Illustration: Browser & Installed Success Popup
+   ========================================================================== */
+.illus-browser-container {
+    width: 90%;
+    height: 80%;
+    background: oklch(0.11 0.015 138);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
+    display: flex;
+    flex-direction: column;
+}
+
+.illus-browser-header {
+    background: oklch(0.20 0.025 140 / 0.8);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    padding: 0.6rem 0.8rem;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.illus-browser-dots {
+    display: flex;
+    gap: 6px;
+    margin-right: 1.5rem;
+}
+
+.illus-browser-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    opacity: 0.6;
+}
+.illus-browser-dot:nth-child(1) { background: oklch(0.55 0.15 25); }
+.illus-browser-dot:nth-child(2) { background: oklch(0.68 0.14 45); }
+.illus-browser-dot:nth-child(3) { background: oklch(0.68 0.13 150); }
+
+.illus-browser-address-bar {
+    background: oklch(0.13 0.02 138);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 6px;
+    color: var(--text-muted);
+    font-size: 0.68rem;
+    padding: 3px 12px;
+    flex-grow: 1;
+    max-width: 60%;
+    text-align: center;
+    font-family: monospace;
+    letter-spacing: 0.2px;
+}
+
+.illus-browser-address-bar .url-protocol {
+    color: oklch(0.68 0.13 150);
+    font-weight: 600;
+}
+
+.illus-browser-toolbar {
+    display: flex;
+    margin-left: auto;
+}
+
+.illus-extension-btn {
+    width: 22px;
+    height: 22px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.3s, box-shadow 0.3s;
+}
+
+.illus-extension-btn.active {
+    background: oklch(0.68 0.13 150 / 0.2);
+    border: 1px solid var(--accent);
+    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.4);
+    animation: active-pulse 2s infinite alternate;
+}
+
+@keyframes active-pulse {
+    0% { transform: scale(1); box-shadow: 0 0 5px oklch(0.68 0.13 150 / 0.4); }
+    100% { transform: scale(1.08); box-shadow: 0 0 12px oklch(0.68 0.13 150 / 0.7); }
+}
+
+.illus-browser-content {
+    flex-grow: 1;
+    padding: 1rem;
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+}
+
+.illus-store-card {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.04);
+    border-radius: 12px;
+    padding: 0.8rem;
+    width: 65%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.illus-store-card-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.illus-large-logo {
+    width: 30px;
+    height: 30px;
+    object-fit: contain;
+    border-radius: 6px;
+    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.2);
+}
+
+.illus-store-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.illus-store-title {
+    font-size: 0.88rem;
+    font-weight: 800;
+    color: var(--text);
+    line-height: 1.1;
+}
+
+.illus-store-desc {
+    font-size: 0.58rem;
+    color: var(--text-muted);
+    line-height: 1.2;
+    margin-top: 2px;
+}
+
+.illus-store-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.illus-store-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 8px;
+    border-radius: 8px;
+    font-size: 0.58rem;
+    font-weight: 700;
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.03);
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    cursor: default;
+    transition: opacity 0.2s, transform 0.2s;
+}
+
+.illus-store-btn img {
+    width: 11px;
+    height: 11px;
+    display: block;
+}
+
+.illus-store-btn.chrome {
+    border-color: oklch(0.68 0.13 150 / 0.25);
+    background: oklch(0.68 0.13 150 / 0.08);
+    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.05);
+}
+
+.illus-store-btn.firefox {
+    border-color: oklch(0.62 0.14 45 / 0.25);
+    background: oklch(0.62 0.14 45 / 0.08);
+    box-shadow: 0 0 10px oklch(0.62 0.14 45 / 0.05);
+}
+
+.install-breathe {
+    animation: install-breathe 2.5s ease-in-out infinite;
+    z-index: 2;
+    position: relative;
+}
+
+@keyframes install-breathe {
+    0%, 100% {
+        transform: scale(1);
+        box-shadow: 0 0 15px oklch(0.68 0.13 150 / 0.2);
+    }
+    50% {
+        transform: scale(1.05);
+        box-shadow: 0 0 25px oklch(0.68 0.13 150 / 0.5);
+    }
+}
+
+.install-breathe.firefox,
+.btn-firefox.install-breathe {
+    animation-name: install-breathe-ff;
+}
+
+@keyframes install-breathe-ff {
+    0%, 100% {
+        transform: scale(1);
+        box-shadow: 0 0 15px oklch(0.62 0.14 45 / 0.2);
+    }
+    50% {
+        transform: scale(1.05);
+        box-shadow: 0 0 25px oklch(0.62 0.14 45 / 0.5);
+    }
+}
+
+/* Glassmorphic Dropping Success Card */
+.illus-extension-popup {
+    position: absolute;
+    top: 0.6rem;
+    right: 0.6rem;
+    width: 145px;
+    background: oklch(0.20 0.025 140 / 0.85);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid oklch(0.68 0.13 150 / 0.25);
+    border-radius: 12px;
+    padding: 0.6rem 0.8rem;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55), 0 0 15px oklch(0.68 0.13 150 / 0.15);
+    animation: popup-float 4s ease-in-out infinite;
+    z-index: 5;
+}
+
+@keyframes popup-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-4px); }
+}
+
+.illus-extension-popup .popup-title {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 0.72rem;
+    font-weight: 700;
+    color: var(--text);
+    margin-bottom: 6px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    padding-bottom: 4px;
+}
+
+.illus-extension-popup .popup-title img {
+    width: 12px;
+    height: 12px;
+}
+
+.illus-extension-popup .popup-status {
+    margin-bottom: 4px;
+}
+
+.status-badge-success {
+    background: oklch(0.68 0.13 150 / 0.12);
+    color: oklch(0.68 0.13 150);
+    font-size: 0.6rem;
+    font-weight: 700;
+    padding: 2px 6px;
+    border-radius: 4px;
+    border: 1px solid oklch(0.68 0.13 150 / 0.2);
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    animation: status-glow 2s infinite alternate;
+}
+
+@keyframes status-glow {
+    0% { box-shadow: 0 0 0 oklch(0.68 0.13 150 / 0); }
+    100% { box-shadow: 0 0 6px oklch(0.68 0.13 150 / 0.3); }
+}
+
+.illus-extension-popup .popup-quick-start {
+    font-size: 0.55rem;
+    color: var(--text-muted);
+    font-weight: 500;
+    line-height: 1.2;
+}
+
+
+/* ==========================================================================
+   Step 2 Illustration: Highly Realistic Extension Popup (Create Room View)
+   ========================================================================== */
+.illus-popup-card {
+    width: 220px;
+    background: oklch(0.20 0.025 140 / 0.85);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 16px;
+    padding: 0.8rem;
+    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+    animation: popup-float 4s ease-in-out infinite;
+    animation-delay: -1s;
+}
+
+.illus-popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    padding-bottom: 8px;
+}
+
+.illus-popup-brand {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.82rem; /* Scaled up font */
+    font-weight: 800;
+    letter-spacing: -0.2px;
+}
+
+.illus-popup-version {
+    font-size: 0.58rem;
+    color: var(--text-muted);
+}
+
+.illus-popup-tabs {
+    display: flex;
+    gap: 4px;
+    background: oklch(0.12 0.015 135 / 0.4);
+    padding: 3px;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.03);
+}
+
+.illus-popup-tab {
+    flex: 1;
+    text-align: center;
+    font-size: 0.62rem; /* Scaled up font */
+    padding: 4px 0;
+    border-radius: 6px;
+    color: var(--text-muted);
+    font-weight: 600;
+}
+
+.illus-popup-tab.active {
+    background: var(--card);
+    color: var(--accent);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.illus-popup-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+    position: relative;
+}
+
+.illus-popup-btn {
+    background: linear-gradient(135deg, var(--accent-green), var(--accent-terracotta));
+    border-radius: 8px;
+    padding: 7px 9px;
+    color: var(--text-on-green);
+    font-weight: 700;
+    font-size: 0.68rem;
+    text-align: center;
+    box-shadow: 0 4px 12px oklch(0.68 0.13 150 / 0.3);
+    position: relative;
+    overflow: hidden;
+    cursor: default;
+    animation: create-btn-pulse 2s infinite alternate;
+}
+
+@keyframes create-btn-pulse {
+    0% { transform: scale(1); box-shadow: 0 4px 12px oklch(0.68 0.13 150 / 0.3); }
+    100% { transform: scale(1.03); box-shadow: 0 6px 16px oklch(0.68 0.13 150 / 0.5); }
+}
+
+.illus-btn-shine {
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 50%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
+    transform: skewX(-20deg);
+    animation: shimmer-sweep 3s infinite ease-in-out;
+}
+
+@keyframes shimmer-sweep {
+    0% { left: -100%; }
+    50%, 100% { left: 150%; }
+}
+
+.illus-collapsed-details {
+    background: oklch(0.12 0.015 135 / 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    padding: 6px 11px;
+    font-size: 0.54rem;
+    color: var(--text-muted);
+    font-weight: 700;
+    text-transform: uppercase;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    letter-spacing: 0.2px;
+}
+
+.details-arrow {
+    font-size: 0.48rem;
+    color: var(--text-muted);
+    opacity: 0.7;
+}
+
+/* Floating Success Badge */
+.illus-floating-success {
+    position: absolute;
+    /* Fully below the card so the toast never straddles its border */
+    bottom: -2.4rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: oklch(0.12 0.015 135 / 0.92);
+    border: 1px solid oklch(0.68 0.13 150 / 0.35);
+    border-radius: 20px;
+    padding: 3px 10px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), 0 0 12px oklch(0.68 0.13 150 / 0.18);
+    animation: floating-success-fade 5s infinite;
+    white-space: nowrap;
+    z-index: 10;
+}
+
+@keyframes floating-success-fade {
+    0%, 100%, 75% { opacity: 0; transform: translate(-50%, 5px) scale(0.9); }
+    15%, 60% { opacity: 1; transform: translate(-50%, 0) scale(1); }
+}
+
+.illus-floating-success .success-icon {
+    font-size: 0.65rem;
+}
+
+.illus-floating-success span[lang] {
+    font-size: 0.58rem;
+    color: oklch(0.68 0.13 150);
+    font-weight: 700;
+}
+
+
+/* ==========================================================================
+   Step 3 Illustration: Dual Screen Theater Sync Setup
+   ========================================================================= */
+.illus-sync-theater {
+    width: 95%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    gap: 0.6rem;
+}
+
+.illus-player-card {
+    width: 145px;
+    background: oklch(0.20 0.025 140 / 0.85);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 12px;
+    padding: 6px;
+    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    position: relative;
+    z-index: 2;
+}
+
+.illus-player-card.player-a {
+    animation: popup-float 4s ease-in-out infinite;
+    animation-delay: -2s;
+}
+
+.illus-player-card.player-b {
+    animation: popup-float 4s ease-in-out infinite;
+    animation-delay: -3s;
+}
+
+.player-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.55rem;
+}
+
+.player-user {
+    font-weight: 700;
+    color: var(--text);
+}
+
+.player-badge {
+    font-size: 0.42rem;
+    font-weight: 800;
+    padding: 1px 3px;
+    border-radius: 3px;
+}
+
+.player-badge.active {
+    background: oklch(0.68 0.13 150 / 0.15);
+    color: oklch(0.68 0.13 150);
+    border: 1px solid oklch(0.68 0.13 150 / 0.25);
+}
+
+.player-video-canvas {
+    height: 70px;
+    border-radius: 8px;
+    background: linear-gradient(135deg, oklch(0.20 0.04 145), oklch(0.22 0.05 45));
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(255, 255, 255, 0.02);
+}
+
+.player-video-overlay {
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 100%;
+    background: linear-gradient(to bottom, transparent, oklch(0.68 0.13 150 / 0.15), transparent);
+    background-size: 100% 200%;
+    animation: playerScrollScanline 3s linear infinite;
+}
+
+@keyframes playerScrollScanline {
+    0% { background-position: 0% 0%; }
+    100% { background-position: 0% 200%; }
+}
+
+.player-play-pulse {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: oklch(0.68 0.13 150 / 0.85);
+    color: var(--text-on-green);
+    font-size: 0.65rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 0 10px oklch(0.68 0.13 150 / 0.5);
+    z-index: 3;
+    animation: play-pulse 2s infinite alternate;
+}
+
+@keyframes play-pulse {
+    0% { transform: scale(1); box-shadow: 0 0 6px oklch(0.68 0.13 150 / 0.4); }
+    100% { transform: scale(1.15); box-shadow: 0 0 15px oklch(0.68 0.13 150 / 0.8); }
+}
+
+.player-controls {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 2px 0 2px;
+}
+
+.control-btn {
+    font-size: 0.58rem;
+    color: var(--accent);
+}
+
+.player-timeline {
+    flex-grow: 1;
+    height: 3px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
+    position: relative;
+}
+
+.timeline-fill {
+    position: absolute;
+    top: 0; left: 0;
+    height: 100%;
+    background: var(--accent);
+    border-radius: 2px;
+    width: 60%;
+    animation: theater-grow 6s infinite linear;
+}
+
+.timeline-knob {
+    position: absolute;
+    top: -2px;
+    left: 60%;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: white;
+    box-shadow: 0 0 4px rgba(0,0,0,0.5);
+    transform: translateX(-50%);
+    animation: theater-knob-grow 6s infinite linear;
+}
+
+@keyframes theater-grow {
+    0% { width: 0%; }
+    100% { width: 100%; }
+}
+
+@keyframes theater-knob-grow {
+    0% { left: 0%; }
+    100% { left: 100%; }
+}
+
+.control-time {
+    font-size: 0.5rem;
+    color: var(--text-muted);
+    font-family: monospace;
+}
+
+/* Glowing Connection Sync Bridge */
+.illus-sync-bridge {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    position: relative;
+    z-index: 1;
+}
+
+.illus-sync-bridge .sync-line {
+    width: 100%;
+    height: 2px;
+    background: rgba(255,255,255,0.06);
+    position: relative;
+    overflow: hidden;
+}
+
+.illus-sync-bridge .sync-beam {
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 50px;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, var(--accent), var(--success), transparent);
+    animation: sync-flow 2.5s infinite linear;
+}
+
+@keyframes sync-flow {
+    0% { left: -100%; }
+    100% { left: 100%; }
+}
+
+.sync-status-badge {
+    background: oklch(0.68 0.13 150 / 0.12);
+    border: 1px solid oklch(0.68 0.13 150 / 0.25);
+    color: oklch(0.68 0.13 150);
+    font-size: 0.5rem;
+    font-weight: 800;
+    letter-spacing: 0.5px;
+    padding: 2px 6px;
+    border-radius: 6px;
+    white-space: nowrap;
+    animation: active-pulse-green 2s infinite alternate;
+}
+
+@keyframes active-pulse-green {
+    0% { box-shadow: 0 0 3px oklch(0.68 0.13 150 / 0.1); }
+    100% { box-shadow: 0 0 8px oklch(0.68 0.13 150 / 0.4); }
+}
+
+/* --- Self Hosters Terminal --- */
+.terminal-container {
+    max-width: 850px;
+    margin: 3rem auto 0 auto;
+    background: oklch(0.20 0.025 140);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 20px 45px rgba(0,0,0,0.5);
+    text-align: left;
+}
+
+.terminal-header {
+    background: oklch(0.27 0.035 130);
+    padding: 0.85rem 1.25rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+
+.terminal-dots {
+    display: flex;
+    gap: 6px;
+}
+
+.terminal-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}
+
+.terminal-dot.red { background: oklch(0.55 0.15 25); }
+.terminal-dot.yellow { background: oklch(0.68 0.14 45); }
+.terminal-dot.green { background: oklch(0.68 0.13 150); }
+
+.terminal-tabs {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.terminal-tab-btn {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-weight: 600;
+    font-size: 0.8rem;
+    padding: 0.35rem 0.75rem;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: color 0.2s, background-color 0.2s;
+}
+
+.terminal-tab-btn:hover {
+    color: var(--text);
+    background: rgba(255, 255, 255, 0.03);
+}
+
+.terminal-tab-btn.active {
+    color: var(--accent);
+    background: oklch(0.68 0.13 150 / 0.1);
+    border: 1px solid oklch(0.68 0.13 150 / 0.2);
+}
+
+.terminal-body {
+    position: relative;
+    padding: 1.5rem;
+}
+
+.terminal-pane {
+    display: none;
+    margin: 0;
+}
+
+.terminal-pane.active {
+    display: block;
+}
+
+.terminal-pane pre {
+    margin: 0;
+    overflow-x: auto;
+}
+
+.terminal-pane code {
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-size: 0.85rem;
+    line-height: 1.6;
+    color: oklch(0.88 0.015 90);
+}
+
+/* Syntax Highlighting */
+.t-comment { color: oklch(0.55 0.02 110); font-style: italic; }
+.t-key { color: oklch(0.72 0.12 45); }
+.t-val { color: oklch(0.75 0.10 150); }
+.t-str { color: oklch(0.80 0.12 155); }
+.t-num { color: oklch(0.75 0.12 50); }
+
+.terminal-copy-btn {
+    position: absolute;
+    top: 1rem;
+    right: 1.5rem;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: var(--text-muted);
+    padding: 0.35rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.2s, color 0.2s, opacity 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.terminal-copy-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--text);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.terminal-copy-btn:active {
+    transform: scale(0.97);
+}
+
+/* --- Footer --- */
+footer {
+    padding: 4rem 0;
+    border-top: 0;
+    text-align: center;
+    color: var(--text-muted);
+}
+
+footer a {
+    color: var(--text-muted);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+footer a:hover {
+    color: var(--text);
+}
+
+
+/* --- Animations --- */
+[data-reveal] {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-reveal].revealed {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+html.theme-light .hero-demo-scene .demo-user-a,
+html.theme-light .hero-demo-scene .demo-user-b {
+    color: oklch(0.36 0.105 150);
+    background: oklch(0.60 0.12 150 / 0.13);
+}
+
+html.theme-light .hero-demo-scene .extension-mockup {
+    --bg: oklch(0.935 0.018 110) !important;
+    --card: oklch(0.995 0.006 100) !important;
+    --accent: oklch(0.56 0.13 150) !important;
+    --accent-glow: oklch(0.56 0.13 150 / 0.22) !important;
+    --text: oklch(0.21 0.03 140) !important;
+    --text-muted: oklch(0.43 0.03 135) !important;
+    --success: oklch(0.56 0.13 150) !important;
+    --error: oklch(0.57 0.17 25) !important;
+    --glass-border: oklch(0.28 0.035 140 / 0.10) !important;
+    background: oklch(0.935 0.018 110) !important;
+    border-color: oklch(0.28 0.035 140 / 0.12);
+    box-shadow:
+        0 20px 42px oklch(0.20 0.025 140 / 0.16),
+        0 0 26px oklch(0.82 0.10 85 / 0.12);
+}
+
+html.theme-light .hero-demo-scene .mock-tabs,
+html.theme-light .hero-demo-scene .mock-card,
+html.theme-light .hero-demo-scene .mock-input {
+    background: oklch(0.995 0.006 100);
+    border-color: oklch(0.28 0.035 140 / 0.14);
+    color: oklch(0.21 0.03 140);
+}
+
+html.theme-light .hero-demo-scene .mock-peer-item {
+    background: oklch(0.28 0.035 140 / 0.035);
+    border-color: oklch(0.28 0.035 140 / 0.09);
+}
+
+html.theme-light .hero-demo-scene .mock-joined-room,
+html.theme-light .hero-demo-scene .mock-status-pill {
+    background: oklch(0.56 0.13 150 / 0.10);
+    border-color: oklch(0.56 0.13 150 / 0.24);
+}
+
+html.theme-light .hero-demo-scene .mock-close-btn:hover {
+    color: oklch(0.21 0.03 140);
+    background: oklch(0.28 0.035 140 / 0.08);
+}
+
+/* A direct hash destination is content, not an entrance animation. Keep it
+   readable from the first paint even before app.js has initialized. */
+section:target [data-reveal],
+section:target[data-reveal] {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+
diff --git a/website/styles/landing-sections.css b/website/styles/landing-sections.css
new file mode 100644
index 0000000..47fb11c
--- /dev/null
+++ b/website/styles/landing-sections.css
@@ -0,0 +1,462 @@
+/* --- Use Cases / Anwendungsszenarien Section --- */
+.use-cases-section {
+    padding: 6rem 0;
+    position: relative;
+    border-bottom: 0;
+}
+
+.use-cases-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 2rem;
+    margin-top: 1rem;
+}
+
+.use-cases-feature-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+@media (max-width: 900px) {
+    .use-cases-feature-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 1.25rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .use-cases-feature-grid {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1rem;
+    }
+}
+
+.use-case-card {
+    background: oklch(0.27 0.035 130 / 0.4);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    padding: 1.2rem 1.6rem 1.7rem 1.6rem;
+    text-align: left;
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.use-case-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, transparent, var(--card-accent-border, var(--accent)), transparent);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.use-case-card:nth-child(1) { --card-accent-border: oklch(0.68 0.13 150); }
+.use-case-card:nth-child(2) { --card-accent-border: oklch(0.62 0.14 45); }
+.use-case-card:nth-child(3) { --card-accent-border: oklch(0.75 0.10 150); }
+
+
+.use-case-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.use-case-card:hover::before {
+    opacity: 1;
+}
+
+.use-case-image {
+    display: block;
+    width: 100%;
+    max-width: 272px;
+    height: 150px;
+    object-fit: contain;
+    border-radius: 8px;
+    margin: 0 auto 0 auto;
+}
+
+.cta-github-mascot {
+    display: block;
+    width: 100%;
+    max-width: 250px;
+    height: auto;
+    margin: 1.5rem auto;
+}
+
+.features-questions-mascot {
+    display: block;
+    width: 100%;
+    max-width: 250px;
+    height: auto;
+    margin: -1.5rem auto 0.2rem auto;
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.features-questions-mascot:hover {
+    transform: scale(1.05) translateY(-4px) rotate(-1.5deg);
+}
+
+.comparison-mascot {
+    display: block;
+    width: 100%;
+    max-width: 260px;
+    height: auto;
+    margin: -2.2rem auto 0.2rem auto;
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.comparison-mascot:hover {
+    transform: scale(1.05) translateY(-4px) rotate(1deg);
+}
+
+.use-case-icon {
+    font-size: 1.6rem;
+    margin-right: 0.6rem;
+    display: inline-block;
+    vertical-align: middle;
+    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
+}
+
+.use-case-card h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin: 0;
+    color: white;
+}
+
+.use-case-card p {
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: var(--text-muted);
+    margin: 0;
+}
+
+/* --- Comparison Section --- */
+.comparison-section {
+    padding: 6rem 0;
+    background: transparent;
+    border-bottom: 0;
+}
+
+#self-hosting,
+#faq,
+#faq + section,
+footer {
+    background: var(--section-tint-strong);
+}
+
+#self-hosting {
+    border-top: 1px solid var(--glass-border);
+}
+
+.comparison-table-wrapper {
+    overflow-x: auto;
+    background: oklch(0.27 0.035 130 / 0.35);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    margin-top: 1rem;
+}
+
+.comparison-table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
+    font-size: 0.95rem;
+}
+
+.comparison-table th, 
+.comparison-table td {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.comparison-table th {
+    background: oklch(0.20 0.025 140 / 0.6);
+    font-weight: 700;
+    color: white;
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    letter-spacing: 0.08em;
+}
+
+.comparison-table th.highlight,
+.comparison-table td.highlight {
+    background: oklch(0.68 0.13 150 / 0.08);
+}
+
+.comparison-table tbody tr:hover {
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.comparison-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.feat-name {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.feat-name strong {
+    color: white;
+    font-weight: 600;
+}
+
+.feat-desc {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+}
+
+.check {
+    color: oklch(0.68 0.13 150);
+    font-weight: 700;
+}
+
+.cross {
+    color: oklch(0.68 0.17 25);
+    font-weight: 600;
+    opacity: 1;
+}
+
+@media (max-width: 768px) {
+    .comparison-table th,
+    .comparison-table td {
+        padding: 1rem;
+        font-size: 0.85rem;
+    }
+}
+
+/* On phones the 3-column table is turned into stacked cards so there is
+   no horizontal scrolling — one card per feature, KoalaSync above Teleparty. */
+@media (max-width: 600px) {
+    .comparison-table-wrapper {
+        overflow-x: visible;
+        background: transparent;
+        border: none;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+        margin-top: 0;
+    }
+
+    .comparison-table {
+        display: block;
+        font-size: 0.95rem;
+    }
+
+    /* Visually hide the header row but keep it for screen readers. */
+    .comparison-table thead {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    .comparison-table tbody,
+    .comparison-table tr,
+    .comparison-table td {
+        display: block;
+        width: 100%;
+    }
+
+    .comparison-table tbody tr {
+        background: oklch(0.27 0.035 130 / 0.35);
+        border: 1px solid var(--glass-border);
+        border-radius: 14px;
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
+        margin-bottom: 1rem;
+        overflow: hidden;
+    }
+
+    .comparison-table tbody tr:last-child {
+        margin-bottom: 0;
+    }
+
+    .comparison-table td {
+        padding: 0.85rem 1.1rem;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    }
+
+    .comparison-table tbody tr td:last-child {
+        border-bottom: none;
+    }
+
+    /* Feature name acts as the card header. */
+    .comparison-table td.feat-name {
+        background: oklch(0.20 0.025 140 / 0.55);
+        padding: 0.9rem 1.1rem;
+    }
+
+    /* Room is back on the card, so show the description again. */
+    .feat-desc {
+        display: block;
+        margin-top: 0.15rem;
+    }
+
+    /* Label each value cell with the product it belongs to. */
+    .comparison-table td.check,
+    .comparison-table td.cross {
+        display: flex;
+        align-items: baseline;
+        gap: 0.4rem;
+    }
+
+    .comparison-table td.check::before,
+    .comparison-table td.cross::before {
+        flex: 0 0 5.5rem;
+        font-size: 0.7rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        color: var(--text-muted);
+        opacity: 0.85;
+    }
+
+    .comparison-table td.check::before,
+    .comparison-table td.cross::before {
+        content: attr(data-label);
+    }
+
+    /* Keep the KoalaSync row subtly highlighted, like on desktop. */
+    .comparison-table td.check.highlight {
+        background: oklch(0.68 0.13 150 / 0.08);
+    }
+}
+
+@media (max-width: 600px) {
+    html.theme-light .comparison-section {
+        background: transparent;
+    }
+
+    html.theme-light .comparison-table tbody tr {
+        background: #ffffff;
+        border-color: oklch(0.20 0.025 140 / 0.1);
+        box-shadow: 0 8px 20px oklch(0.20 0.025 140 / 0.08);
+    }
+
+    html.theme-light .comparison-table tbody tr:hover {
+        background: #ffffff;
+    }
+
+    html.theme-light .comparison-table td {
+        border-bottom-color: oklch(0.20 0.025 140 / 0.08);
+    }
+
+    html.theme-light .comparison-table td.feat-name {
+        background: #ffffff;
+    }
+
+    html.theme-light .comparison-table td.check.highlight {
+        background: oklch(0.52 0.12 150 / 0.07);
+    }
+}
+
+/* --- Footnotes & Source Links --- */
+.source-link {
+    color: var(--accent);
+    text-decoration: none;
+    font-size: 0.72rem;
+    font-weight: 700;
+    margin-left: 0.25rem;
+    display: inline-flex;
+    align-items: center;
+    vertical-align: super;
+    opacity: 0.82;
+    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
+}
+
+.source-link:hover {
+    opacity: 1;
+    color: oklch(0.75 0.10 150);
+    transform: translateY(-1px);
+}
+
+.table-footnotes {
+    padding: 0.8rem 1.25rem;
+    background: oklch(0.20 0.025 140 / 0.45);
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    line-height: 1.5;
+    opacity: 0.65;
+    transition: opacity 0.2s ease;
+}
+
+/* Link from the comparison table to the fuller guides/alternatives hub */
+.comparison-guides-link {
+    text-align: center;
+    margin: 2rem 0 0;
+}
+
+.comparison-guides-link a {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    color: var(--accent);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 0.95rem;
+    transition: gap 0.2s ease, opacity 0.2s ease;
+}
+
+.comparison-guides-link a:hover {
+    gap: 0.7rem;
+    opacity: 0.85;
+}
+
+.table-footnotes:hover {
+    opacity: 0.95;
+}
+
+.table-footnotes p {
+    margin: 0;
+    display: flex;
+    align-items: baseline;
+    gap: 0.4rem;
+}
+
+.table-footnotes p:not(:last-child) {
+    margin-bottom: 0.4rem;
+}
+
+.table-footnotes a {
+    color: var(--accent);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.2s ease, text-decoration 0.2s ease;
+}
+
+.table-footnotes a:hover {
+    color: oklch(0.75 0.10 150);
+    text-decoration: underline;
+}
+
+.table-footnotes sup {
+    font-weight: 700;
+    color: var(--accent);
+}
+
+@media (max-width: 768px) {
+    .table-footnotes {
+        padding: 0.75rem 1rem;
+        font-size: 0.68rem;
+    }
+}
+
diff --git a/website/styles/legal.css b/website/styles/legal.css
new file mode 100644
index 0000000..9e36e8d
--- /dev/null
+++ b/website/styles/legal.css
@@ -0,0 +1,168 @@
+/* --- Legal Pages --- */
+.legal-content {
+    max-width: 800px;
+    margin: 8rem auto 4rem auto;
+    padding: 0 2rem;
+}
+
+.legal-card {
+    background: var(--card);
+    padding: 3rem;
+    border-radius: 24px;
+    border: 1px solid var(--glass-border);
+}
+
+.legal-card h1 {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+    text-align: center;
+}
+
+.legal-card h2 {
+    font-size: 1.25rem;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    color: var(--accent);
+}
+
+.legal-card p {
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+    font-size: 0.95rem;
+}
+
+/* Reset global section padding for legal sections specifically */
+.legal-card section {
+    padding: 0 !important;
+    margin-bottom: 0.75rem;
+}
+
+/* --- Join Page Specifics --- */
+.join-card {
+    max-width: 450px;
+    margin: 6rem auto;
+    text-align: center;
+}
+
+.room-badge {
+    display: inline-block;
+    background: oklch(0.68 0.13 150 / 0.1);
+    color: var(--accent);
+    padding: 0.5rem 1rem;
+    border-radius: 99px;
+    font-size: 0.8rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    border: 1px solid oklch(0.68 0.13 150 / 0.2);
+}
+
+@media (max-width: 768px) {
+    .hero {
+        align-items: center;
+        padding-top: 5.5rem;
+        padding-bottom: 3.5rem;
+        min-height: 100svh;
+    }
+
+    .hero-grid {
+        min-height: auto;
+    }
+
+    .hero-grid {
+        grid-template-columns: minmax(0, 1fr);
+        text-align: center;
+    }
+    .step {
+        grid-template-columns: minmax(0, 1fr);
+        text-align: left;
+    }
+    .hero-text h1 {
+        font-size: 2.5rem;
+        max-width: none;
+    }
+    .cta-group {
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+    .nav-links {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        flex-direction: column;
+        background: oklch(0.20 0.025 140 / 0.95);
+        backdrop-filter: blur(12px);
+        padding: 1rem 2rem;
+        gap: 1rem;
+        border-bottom: 1px solid var(--glass-border);
+        margin-left: 0;
+    }
+    .nav-links.open {
+        display: flex;
+    }
+    .nav-right {
+        margin-left: auto;
+    }
+    .hamburger {
+        display: inline-flex !important;
+    }
+    nav .container {
+        padding: 0 0.5rem;
+    }
+    .logo-area {
+        gap: 0.25rem;
+        font-size: 1.1rem;
+    }
+    .logo-area img {
+        height: 40px;
+        width: 40px;
+        margin: 0;
+    }
+    .lang-select-container {
+        padding: 4px 10px;
+        gap: 4px;
+    }
+    .lang-select-container .globe-icon {
+        width: 14px;
+        height: 14px;
+    }
+    .lang-dropdown {
+        font-size: 0.7rem;
+        padding: 0 6px 0 0;
+    }
+    .lang-select-container .chevron-icon {
+        width: 10px;
+        height: 10px;
+    }
+    .legal-card {
+        padding: 1.5rem;
+    }
+}
+
+@media (min-width: 769px) and (max-height: 920px) {
+    .hero {
+        padding-top: clamp(7.5rem, 10vh, 9rem);
+        padding-bottom: clamp(1.5rem, 3vh, 2.75rem);
+    }
+
+    .hero-grid {
+        min-height: calc(100svh - 9.5rem);
+    }
+}
+
+/* Extra-narrow phones: make sure logo, language picker and the menu button
+   never crowd each other in the header (kept comfortable down to ~320px). */
+@media (max-width: 380px) {
+    nav .container {
+        padding: 0 0.4rem;
+    }
+    .nav-right {
+        gap: 0.35rem;
+    }
+    .logo-area {
+        font-size: 1rem;
+        gap: 0.4rem;
+    }
+}
+
diff --git a/website/template.html b/website/template.html
index bc24506..9a3460f 100644
--- a/website/template.html
+++ b/website/template.html
@@ -10,9 +10,9 @@
     <link rel="dns-prefetch" href="https://addons.mozilla.org">
     <link rel="dns-prefetch" href="https://github.com">
     
-    <link rel="preload" href="{{ASSET_PATH}}style.min.css" as="style">
+    <link rel="stylesheet" href="{{ASSET_PATH}}landing.min.css">
+    <link rel="stylesheet" href="{{ASSET_PATH}}landing-demo.min.css" media="(min-width: 769px)" data-landing-demo>
     <link rel="preload" as="image" href="{{ASSET_PATH}}assets/LookDownKoala.avif" imagesrcset="{{ASSET_PATH}}assets/LookDownKoala-1x.avif 90w, {{ASSET_PATH}}assets/LookDownKoala.avif 205w" imagesizes="90px" type="image/avif" fetchpriority="high">
-    <link rel="stylesheet" href="{{ASSET_PATH}}style.min.css">
     <link rel="icon" type="image/png" sizes="16x16" href="{{ASSET_PATH}}assets/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="{{ASSET_PATH}}assets/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="{{ASSET_PATH}}assets/icon-192x192.png">
@@ -209,7 +209,7 @@
         </style>
     </noscript>
 </head>
-<body>
+<body data-deferred-css="{{ASSET_PATH}}landing-deferred.min.css">
     <div class="scroll-progress-bar"></div>
 
     <a class="skip-link" href="#main-content">Skip to main content</a>