diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 0000000..6c599c8
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,24 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: "/"
+    schedule:
+      interval: weekly
+    open-pull-requests-limit: 5
+    groups:
+      npm-minor-patch:
+        patterns:
+          - "*"
+        update-types:
+          - minor
+          - patch
+
+  - package-ecosystem: github-actions
+    directory: "/"
+    schedule:
+      interval: weekly
+    open-pull-requests-limit: 5
+    groups:
+      github-actions:
+        patterns:
+          - "*"
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index c9e31f3..2b82a9e 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -11,8 +11,6 @@ on:
 
 permissions:
   contents: read
-  pages: write
-  id-token: write
 
 concurrency:
   group: pages
@@ -21,9 +19,14 @@ concurrency:
 jobs:
   build:
     runs-on: ubuntu-latest
+    # configure-pages reads the Pages site through the API, which needs
+    # `pages: read`. Deployment/OIDC permissions live only on the deploy job.
+    permissions:
+      contents: read
+      pages: read
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4.4.0
+      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 20
           cache: npm
@@ -32,17 +35,20 @@ jobs:
         env:
           NEXT_PUBLIC_BASE_PATH: /web
       - run: touch out/.nojekyll
-      - uses: actions/configure-pages@v5
-      - uses: actions/upload-pages-artifact@v3
+      - uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b # v5.0.0
+      - uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3.0.1
         with:
           path: out
 
   deploy:
     needs: build
     runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     steps:
       - id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4.0.5
diff --git a/.github/workflows/security-audit.yml b/.github/workflows/security-audit.yml
new file mode 100644
index 0000000..78beead
--- /dev/null
+++ b/.github/workflows/security-audit.yml
@@ -0,0 +1,33 @@
+name: Security Audit
+
+on:
+  push:
+  pull_request:
+  schedule:
+    # Weekly, Mondays at 06:23 UTC (off the top of the hour to reduce runner contention).
+    - cron: '23 6 * * 1'
+
+permissions:
+  contents: read
+
+jobs:
+  audit:
+    name: npm audit
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4.4.0
+        with:
+          persist-credentials: false
+
+      - name: Set up Node.js
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci --ignore-scripts
+
+      - name: Audit dependencies
+        run: npm audit --audit-level=high
diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb5d59b..10a7450 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## 2026-10-24 — Security update
+
+- Updated Next.js from 16.3.1 to 16.4.3 and aligned `eslint-config-next` to 16.4.3, closing the critical Next.js advisories (including the unauthenticated RCE and cache-poisoning/SSRF reports).
+- Updated the sharp override to 0.35.5 (libheif/librsvg fixes) and resolved the remaining transitive advisories: source-map-js 1.2.2, zod 4.6.7, js-yaml 4.3.2 and brace-expansion 1.1.21/5.0.12.
+- `npm audit` now reports 0 vulnerabilities, including with `--omit=dev`. The static export still builds successfully (142 pages) and no site content or layout changed.
+- Added `security-audit.yml` running `npm ci --ignore-scripts` and `npm audit --audit-level=high` on push, pull request and weekly schedules.
+- Added weekly Dependabot updates for npm and GitHub Actions, pinned all workflow actions by commit SHA, disabled persisted checkout credentials, and moved Pages write/OIDC permissions to the deploy job only.
+
 ## 2026-09-12 — WebAssembly docs and home demo fix
 
 - Added wiki pages for the WebAssembly runtime, the four wasm plugins and the three wasm extensions in English, Spanish and German; plugin index, presets and summary updated
diff --git a/docs/de/SUMMARY.md b/docs/de/SUMMARY.md
index eeb627f..ebd5cca 100644
--- a/docs/de/SUMMARY.md
+++ b/docs/de/SUMMARY.md
@@ -2,7 +2,7 @@
 
 Ein plattformunabhangiges Systeminformations-Tool geschrieben in Rust.
 
-- **Version:** 1.0.0
+- **Version:** 1.0.1
 - **Lizenz:** MIT
 - **Autor:** xscriptor
 - **Repository:** github.com/xfetch-cli/xfetch
diff --git a/docs/de/changelog.md b/docs/de/changelog.md
index 55002f4..41c5809 100644
--- a/docs/de/changelog.md
+++ b/docs/de/changelog.md
@@ -1,6 +1,16 @@
 # Anderungsprotokoll
 # Anderungsprotokoll
 
+## v1.0.1 · Sicherheitsrelease: gepatchte Abhängigkeiten, signierte Releases und sicherere Installer · 2026-10-24
+
+- **Alle RustSec-Hinweise im Abhängigkeitsgraph von v1.0.0 sind geschlossen:** `wasmtime` und `wasmtime-wasi` 48.0.7, `rustls` 0.23.46, `rustls-webpki` 0.103.16, `webpki-roots` 1.0.11, `tokio` 1.54.1 und `yoke-derive` 0.8.4. `cargo audit --deny warnings` meldet 0 Schwachstellen und 0 Warnungen.
+- **Die Binaries von v1.0.0 sind weiterhin betroffen; auf v1.0.1 aktualisieren.**
+- **Wasm-Artefakte pinnen:** Manifeste akzeptieren ein optionales `sha256`, und Plugins, Effekte und Erweiterungen akzeptieren `--sha256`. Der Digest wird bei heruntergeladenen, eingecheckten, gebauten und lokalen Artefakten geprüft; eine Abweichung bricht ab, bevor etwas geschrieben wird. Remote-Installationen ohne Digest funktionieren weiter, warnen aber deutlich.
+- **Härtung von Remote-Installationen:** validierte Guest-Namen, private temporäre Verzeichnisse, `git clone --depth 1 -- <repo>` und explizite Warnungen, wenn Manifest-`build`-Befehle oder native Gäste ohne Sandbox laufen.
+- **Prebuilt-Installer:** portables SHA-256 über `sha256sum`, `shasum` oder `openssl`; `SHA256SUMS` ist Pflicht; ab v1.0.1 wird zusätzlich ein signiertes `SHA256SUMS.bundle` verlangt. `--require-signature` macht cosign Pflicht, `--allow-unsigned` ist ein explizites Opt-out, und Version sowie Asset stammen aus dem Tag und dem exakten erwarteten Dateinamen.
+- **Signierte Releases:** Keyless-cosign-Signatur für `SHA256SUMS`, GitHub-Build-Provenance-Attestations und ein Gate, das prüft, dass der Tag auf `main` liegt, zu `Cargo.toml` passt, Tests und `cargo audit` ausführt und Signatur sowie Checksums vor dem Veröffentlichen erneut verifiziert.
+- **Supply Chain:** CI mit `cargo audit`/`npm audit`, Dependabot, per SHA gepinnte GitHub Actions und Release-Builds mit Rust 1.98.1 und `--locked`.
+
 ## v1.0.0 · Native Windows-Probes, Daemons unter Windows und Abhängigkeits-Refresh · 2026-09-18
 
 - **Native Windows-Probes:** CPU, Datum, Akku und GPU werden über die Win32-API (`platform/windows/`) gelesen statt über sysinfos PDH-Zähler und PowerShell/`wmic`-Subprozesse — der Standard-Fetch ging auf einem 16-Thread-Rechner von ~575 ms auf ~33 ms (warm), mit identischen Werten
diff --git a/docs/en/SUMMARY.md b/docs/en/SUMMARY.md
index a274446..3dcb42a 100644
--- a/docs/en/SUMMARY.md
+++ b/docs/en/SUMMARY.md
@@ -2,7 +2,7 @@
 
 A cross-platform system information fetching tool written in Rust.
 
-- **Version:** 1.0.0
+- **Version:** 1.0.1
 - **License:** MIT
 - **Author:** xscriptor
 - **Repository:** github.com/xfetch-cli/xfetch
diff --git a/docs/en/changelog.md b/docs/en/changelog.md
index c6ce93a..f214f71 100644
--- a/docs/en/changelog.md
+++ b/docs/en/changelog.md
@@ -1,6 +1,16 @@
 # Changelog
 # Changelog
 
+## v1.0.1 · Security release: patched dependencies, signed releases & safer installers · 2026-10-24
+
+- **Every RustSec advisory in the v1.0.0 dependency graph is closed:** `wasmtime` and `wasmtime-wasi` 48.0.7, `rustls` 0.23.46, `rustls-webpki` 0.103.16, `webpki-roots` 1.0.11, `tokio` 1.54.1 and `yoke-derive` 0.8.4. `cargo audit --deny warnings` reports 0 vulnerabilities and 0 warnings.
+- **v1.0.0 binaries remain affected by these advisories; upgrade to v1.0.1.**
+- **Wasm artifact pinning:** manifests accept an optional `sha256` and plugins, effects and extensions accept `--sha256`. The digest is enforced on downloaded, checked-in, built and direct-file artifacts; a mismatch aborts before anything is written. Remote installs without a digest still work but print a prominent warning.
+- **Remote install hardening:** validated guest names, private temporary directories, `git clone --depth 1 -- <repo>`, and explicit warnings when manifest build commands or native guests run unsandboxed.
+- **Prebuilt installer:** portable SHA-256 via `sha256sum`, `shasum` or `openssl`; `SHA256SUMS` is mandatory; v1.0.1+ also requires a signed `SHA256SUMS.bundle`. `--require-signature` makes cosign mandatory, `--allow-unsigned` is an explicit opt-out, and the version/assets come from the release tag and exact expected filename.
+- **Signed releases:** keyless cosign signature for `SHA256SUMS`, GitHub build provenance attestations, and a release gate that checks the tag is on `main`, matches `Cargo.toml`, runs the tests and `cargo audit`, and re-verifies the signature and checksums before publishing.
+- **Supply chain:** added `cargo audit`/`npm audit` CI, Dependabot, SHA-pinned GitHub Actions, and Rust 1.98.1 with `--locked` release builds.
+
 ## v1.0.0 · Windows Native Probes, Daemons on Windows & Dependency Refresh · 2026-09-18
 
 - **Windows native probes:** CPU, datetime, battery and GPU are read through the Win32 API (`platform/windows/`) instead of sysinfo's PDH counters and PowerShell/`wmic` subprocesses — the default fetch went from ~575 ms to ~33 ms warm on a 16-thread machine, with identical rendered values
diff --git a/docs/es/SUMMARY.md b/docs/es/SUMMARY.md
index 3a19399..a04bf2b 100644
--- a/docs/es/SUMMARY.md
+++ b/docs/es/SUMMARY.md
@@ -2,7 +2,7 @@
 
 Una herramienta de obtención de información del sistema multiplataforma escrita en Rust.
 
-- **Versión:** 1.0.0
+- **Versión:** 1.0.1
 - **Licencia:** MIT
 - **Autor:** xscriptor
 - **Repositorio:** github.com/xfetch-cli/xfetch
diff --git a/docs/es/changelog.md b/docs/es/changelog.md
index 1b49b81..315a2ae 100644
--- a/docs/es/changelog.md
+++ b/docs/es/changelog.md
@@ -1,6 +1,16 @@
 # Registro de Cambios
 # Registro de Cambios
 
+## v1.0.1 · Release de seguridad: dependencias parchadas, releases firmadas e instaladores más seguros · 2026-10-24
+
+- **Cerrados todos los avisos de RustSec del grafo de v1.0.0:** `wasmtime` y `wasmtime-wasi` 48.0.7, `rustls` 0.23.46, `rustls-webpki` 0.103.16, `webpki-roots` 1.0.11, `tokio` 1.54.1 y `yoke-derive` 0.8.4. `cargo audit --deny warnings` reporta 0 vulnerabilidades y 0 warnings.
+- **Los binarios de v1.0.0 siguen afectados por estos avisos; actualiza a v1.0.1.**
+- **Fijado de artefactos wasm:** los manifiestos aceptan un `sha256` opcional y los comandos de plugins, efectos y extensiones aceptan `--sha256`. El digest se verifica en artefactos descargados, versionados, generados por build y archivos locales; una discrepancia aborta antes de escribir nada. Las instalaciones remotas sin digest siguen funcionando, pero muestran un aviso claro.
+- **Endurecimiento de instalaciones remotas:** nombres de invitado validados, directorios temporales privados, `git clone --depth 1 -- <repo>` y avisos explícitos cuando un comando `build` del manifiesto o un plugin nativo se ejecuta sin sandbox.
+- **Instalador prebuilt:** SHA-256 portable con `sha256sum`, `shasum` u `openssl`; `SHA256SUMS` es obligatorio; desde v1.0.1 también se exige `SHA256SUMS.bundle` firmado. `--require-signature` hace obligatorio cosign, `--allow-unsigned` es una excepción explícita, y la versión y el asset se derivan del tag y del nombre exacto esperado.
+- **Releases firmadas:** firma keyless de cosign para `SHA256SUMS`, attestations de procedencia de GitHub y un gate que comprueba que el tag está en `main`, coincide con `Cargo.toml`, ejecuta tests y `cargo audit`, y re-verifica firma y checksums antes de publicar.
+- **Cadena de suministro:** CI con `cargo audit`/`npm audit`, Dependabot, GitHub Actions pineadas por SHA y builds de release con Rust 1.98.1 y `--locked`.
+
 ## v1.0.0 · Sondas nativas en Windows, daemons en Windows y actualización de dependencias · 2026-09-18
 
 - **Sondas nativas en Windows:** CPU, fecha, batería y GPU se leen por la API Win32 (`platform/windows/`) en vez de los contadores PDH de sysinfo y los subprocesos de PowerShell/`wmic` — el fetch por defecto pasó de ~575 ms a ~33 ms en caliente en una máquina de 16 hilos, con valores idénticos
diff --git a/package-lock.json b/package-lock.json
index 7341dad..756a1ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "@xscriptor/xcomponents": "^0.2.3",
         "framer-motion": "^12.42.2",
-        "next": "^16.2.11",
+        "next": "^16.4.3",
         "react": "19.2.4",
         "react-dom": "19.2.4",
         "react-markdown": "^10.1.0",
@@ -23,7 +23,7 @@
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "eslint": "^9",
-        "eslint-config-next": "16.2.10",
+        "eslint-config-next": "16.4.3",
         "tailwindcss": "^4",
         "typescript": "^5"
       }
@@ -535,9 +535,9 @@
       }
     },
     "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.35.3.tgz",
-      "integrity": "sha512-RMnFX7YQsMoh7lWfcM4NEHHymBX/rLuKNPVM84XE9ONPcaSCDgE7CHIHpSgPcO2xcRthgBy1HfNO319mwhIAkg==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.35.5.tgz",
+      "integrity": "sha512-QRUlFQ0WxvdWyqqG/WtI3iupfD5rBzmCHXSdPsY91sAtVtTo7Q4cb6zOccZ3gqEqkr0f1As1ehLqmEpDsRf+lg==",
       "cpu": [
         "arm64"
       ],
@@ -553,13 +553,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.3.2"
+        "@img/sharp-libvips-darwin-arm64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.35.3.tgz",
-      "integrity": "sha512-Xo+5uFBtLN0BKqieTxiFzFPQAUlBbbH5iBKyRX/z1JrbnYsHTfKJnUfL8+p2TPXr1pXqao4eeL4Rl144uDpK9w==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.35.5.tgz",
+      "integrity": "sha512-+BR255RhDlpygUpOc/Jdt1nT6DQ3XG/ERo5wbcdOf5Q320dKtPCKPLR1LJs9VGXRaMa8l1uUa0tkCNOXiAxZUw==",
       "cpu": [
         "x64"
       ],
@@ -575,20 +575,20 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.3.2"
+        "@img/sharp-libvips-darwin-x64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-freebsd-wasm32": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-freebsd-wasm32/-/sharp-freebsd-wasm32-0.35.3.tgz",
-      "integrity": "sha512-lUxcqWIj2wMQ9BrwNjngcr1gWUr5xgaGThBRqPPalIC2n67Cqj1uPh8NnA/ZhAg8hUbKl+kVHKwgUIwe6ZYPrg==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-freebsd-wasm32/-/sharp-freebsd-wasm32-0.35.5.tgz",
+      "integrity": "sha512-Y/z91nEZ4uIBX5X3nfTovjU9lHNKFYbL2lpHCLVNmXQK03VIZvXBBt0KxbPGp2SdGSF+2mQU4e+hQaWOt86iAw==",
       "license": "Apache-2.0",
       "optional": true,
       "os": [
         "freebsd"
       ],
       "dependencies": {
-        "@img/sharp-wasm32": "0.35.3"
+        "@img/sharp-wasm32": "0.35.5"
       },
       "engines": {
         "node": ">=20.9.0"
@@ -598,9 +598,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.3.2.tgz",
-      "integrity": "sha512-9J6ypZFpQBj4YnePGoq/S38w6nz+vqg5WZLrLGY4YuSemdMq47GMLBPO42MzwdGwpg/agZ7xzZcFHa48xlywfg==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.3.4.tgz",
+      "integrity": "sha512-5R89nBYiRdUlSWJxPhO+GVtaXzXSxKnRu/xqMn3KTA3L9EB9Oy/P+Nn2f2vlhPuUdy/Zusb2DarbyTpGCfEDuw==",
       "cpu": [
         "arm64"
       ],
@@ -614,9 +614,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.3.2.tgz",
-      "integrity": "sha512-m2pW1n6cns9VaubNwsZ+c3CRYjxNQWgJ5gPlnL1nbBcpkBvFm6SCFN5o0psFHI8w9n11NKhFkeEDns98tiqbEw==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.3.4.tgz",
+      "integrity": "sha512-iR2OKH80yi0U+dUplyh3/xdpFvps6YkCwsXenIJxqxR1v9o+xtKTGbS9H7cps+2Vxjc8B1j96p75NmTGjIhtpQ==",
       "cpu": [
         "x64"
       ],
@@ -630,12 +630,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.3.2.tgz",
-      "integrity": "sha512-1eMLzy92I4J6rmi4mAT8yC3HxOtniyGELlzGbNMLLeqe052ahFQ0h6LFq+lh5DsDIdYViIDst08abvSbcEdLXQ==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.3.4.tgz",
+      "integrity": "sha512-LmRtTsOHuvM2+wlO2Db37dx5MiZhB0FvSunciw48YjdOkZz9KAiRbm8ujeMOA1INqmei5NapFxYEK1D1ZSidmw==",
       "cpu": [
         "arm"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -646,12 +649,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.3.2.tgz",
-      "integrity": "sha512-dqVSFynCox4C/J8kT16V7SIFAns0IjgLwkvYT7p8LQVmJ5OS5b6tI9IGflxTeuBS//zXeFIUbwt5dwxyZ17cnA==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.3.4.tgz",
+      "integrity": "sha512-Y3dgX/6lE2QhQb+Gxy0WZxfg9MEm/JBjamZpS2IklP7xIQoKN4hzAm7KcMVGtaVDt3neE9OKBC7vAfonA/Lr1A==",
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -662,12 +668,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-ppc64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.3.2.tgz",
-      "integrity": "sha512-3z0NHDxD6n5I9gc05U1eW1AyRm+Gznzq3naMrthPNqE6oYykcogW0l/jfpJdjYnuNl8R7yI9pNbE1XiUeyq0Aw==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.3.4.tgz",
+      "integrity": "sha512-Le6boB8Tai0Nis+gIxIpKx68UDVVIqdR8Tin5Yf1z2LJJQLDJvCDRqRu+jC2qCoD+eIomonmOwB4smBRxfVpYQ==",
       "cpu": [
         "ppc64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -678,12 +687,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-riscv64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.3.2.tgz",
-      "integrity": "sha512-bsb4rI+NldGOsXuej2r8OdSS8+zXDVaCWxyWrcv6kneTOlgAHtZABRzBBCwdsPiD90J4myNJuHpg6kA20ImW/w==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.3.4.tgz",
+      "integrity": "sha512-aHkkIEHPRdQEegJN20MLmGtxYD9R2wQr3Cwpddnu5+YKMt6Uzax7S9h5gpZTo8wyrGuZSlfQ63OevL5mTyOC7Q==",
       "cpu": [
         "riscv64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -694,12 +706,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.3.2.tgz",
-      "integrity": "sha512-/ABshyj8gCpyIrNXnHn4LorDJ0HHm1VhXPBlxZ8zAtfVPAaSafXPGn+sUSIRiwaSBy0mmFjSjiXI5mkcwdChKQ==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.3.4.tgz",
+      "integrity": "sha512-ra/mB6MikESDUO7Yg+Mi95bFBb9GsObURuhnOv3OqknjGe9sZrG8tCe9q0xSIGrtLgvgw0gKnFWcK4blSgQOuQ==",
       "cpu": [
         "s390x"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -710,12 +725,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.3.2.tgz",
-      "integrity": "sha512-ITPEtgffGJ0S6G9dRyw/366tJQqFRcHWPHhC+Stpg3Z8AEMrDrTr2lhdz4f/Y/HMbRh//7Z5mBzEpVdi62Oc3w==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.3.4.tgz",
+      "integrity": "sha512-GJ//SSXbnwSDes02umB3nDJLFcQzw8a18V8fyhqr6tV515tOEMdImjjxj1AoafMRz56F3PHgftnj1QEKSU1zkw==",
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -726,12 +744,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.3.2.tgz",
-      "integrity": "sha512-zE9EdiUzUmg5mDT5a1rk5fYJ6GWPloTwWBYDS14naqHsL+EaMpDj1AWnpLgh3u0YCORv2Tt50wrcrpYqkP97Kw==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.3.4.tgz",
+      "integrity": "sha512-hvulFwtjUcagsis6BBxHwGFwWoNZjgYmULGVrZcyfNbjA8hKILbRxGg15/7w5HDyXHXUos/j6baAWqnCyQ2DWA==",
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -742,12 +763,15 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.3.2.tgz",
-      "integrity": "sha512-m0lrLiUt+lBYnCFr8qV/65yMR4E/c7/wf78I5eKTdkEakFAlZ9QlzEM3QIhhAwVeUhLAHLcCq7a7Vszq/oFNZQ==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.3.4.tgz",
+      "integrity": "sha512-6zXKeE/p39I1AmA3cJG35eyBGNqNddLnUXjhwBnsGjFPWqf5VKkDBEqaEkPDoTEtkxwi2vv8Tcr2mDyP4So7Fg==",
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -758,12 +782,15 @@
       }
     },
     "node_modules/@img/sharp-linux-arm": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.35.3.tgz",
-      "integrity": "sha512-affVWCTLooy8TSxbDx2qkzuDeaWLNVBA+P//FNBirHsXpP2fuBhk5AuboYUnrDnzoXes8GFjpTx0SBFOCRg+FA==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.35.5.tgz",
+      "integrity": "sha512-LEaXK2WdXVK5ykcw0buWyPMsmLLL2vpHLD6yrNSW+JGEL3BZPA4tpKN6iaMc4AxTTAoaX/sU1rOL51lcIz48ZQ==",
       "cpu": [
         "arm"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -776,16 +803,19 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.3.2"
+        "@img/sharp-libvips-linux-arm": "1.3.4"
       }
     },
     "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.35.3.tgz",
-      "integrity": "sha512-QgKDspHPnrU+GQ55XPhGwyhC8acLVOOSyAvo1oVfFmrIXLkDNmGWzAfDZ4xK8oSA1qBQrALcHX0G5UZni/SuFQ==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.35.5.tgz",
+      "integrity": "sha512-LYVx5JTsOM2CBzmxreh+nl64/3H6Xb09iSLknqH47z2T2DFFxDeFLP5y4dJwe6H7uGQlHPyEEtIqyo3DYsRwdQ==",
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -798,16 +828,19 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.3.2"
+        "@img/sharp-libvips-linux-arm64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-linux-ppc64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.35.3.tgz",
-      "integrity": "sha512-sMd8rDxmpLOwv/7N44klFjOD5DUO7FLdjiXDI0hoxYaf7Ar262dQIEkosE98bps+5HPLtp/EvNqeqQtOycP/IA==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.35.5.tgz",
+      "integrity": "sha512-QVxAAq8evVRI9ia2vqgwrmWucn5Dfv+JdWzj75pD8omHLPSP7f8p20O8jxzjCcuCEQEOtYOZUmX1hkiZ0kdevA==",
       "cpu": [
         "ppc64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -820,16 +853,19 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-ppc64": "1.3.2"
+        "@img/sharp-libvips-linux-ppc64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-linux-riscv64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.35.3.tgz",
-      "integrity": "sha512-0Eob78yjlYPfL5vMNWAW55l3R9Y6BQS/gOfe0ZcP9mEz9ohhKSt4im1hayiknXgf8AWrFqMvJcKIdmLmEe7yeQ==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.35.5.tgz",
+      "integrity": "sha512-LtdreXguaavKODPIfzJ4kffx7UNt1omwtK0rch4EBbbSTXPnxWmYSayXdLJw0fJzQ97kHt1gL/yh4tvU+nCyRQ==",
       "cpu": [
         "riscv64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -842,16 +878,19 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-riscv64": "1.3.2"
+        "@img/sharp-libvips-linux-riscv64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.35.3.tgz",
-      "integrity": "sha512-KgAxQ0DxpNOq1rG2t5cgTgShJFGSuU7XO45cqC+1NVOuZnP6tlgZRuSYOfNupGkHID0o3cJOsw4DVeJpMovcGw==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.35.5.tgz",
+      "integrity": "sha512-UZasTOFiYzotTsGOCu42BfUzP6Tu6Do/947iRm1RsLKvlllxwGcn4RN27LibGWceix4Y+Pmw3jsnTcCQIgWjqA==",
       "cpu": [
         "s390x"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -864,16 +903,19 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.3.2"
+        "@img/sharp-libvips-linux-s390x": "1.3.4"
       }
     },
     "node_modules/@img/sharp-linux-x64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.35.3.tgz",
-      "integrity": "sha512-8pqvxubL2PGdhlPy6GLqzDYMUjyRmKAwKHYKixpdJYBUK7PJ0C029XdsnpFIdgRZG68fZiGdHVWcKPvtiPB4cA==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.35.5.tgz",
+      "integrity": "sha512-SxFtLTeJInhAA9Q836kux2vZNeOBQEx658qvbboZScr0wIARym3IcGmW7KpVD5sbVg0Ojy+udFQdayYIZyoNog==",
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -886,16 +928,19 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.3.2"
+        "@img/sharp-libvips-linux-x64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.35.3.tgz",
-      "integrity": "sha512-Vz0iQjzzcSX3HCbfwFfCSG/9SCIqyO0mH2sXyiHaAYfBk0cRsCWXRyQYX0ovCK/PAQBbTzQ0dsPQHh5MAFL59w==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.35.5.tgz",
+      "integrity": "sha512-9HbMclmI1zlNkFRs3z9/eBtDjfD0sGlrX1z6b1qwmiFY5ElDLh4BC0LPBdVp7z1DXFiKlIcznf+ZlsuZzLxQqg==",
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -908,16 +953,19 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.3.2"
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.35.3.tgz",
-      "integrity": "sha512-6O1NPKcDVj9QEdg7Hx549EX8U0rp6yXQERqru6yRN7fGBn32UvIRJUlWnk+8xDCiG76hXVBbX82NZ/ZKr0euIg==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.35.5.tgz",
+      "integrity": "sha512-4KOphqB035HrVdqLZfCgMzzERrQkkzOwRhl4OAkRO1YCldbaFjySXMaK534Mo0V+LndnlJk+sbUyLeU0ULyD1A==",
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -930,17 +978,17 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.3.2"
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.4"
       }
     },
     "node_modules/@img/sharp-wasm32": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.35.3.tgz",
-      "integrity": "sha512-cZ0XkcYGpHZkqW6iCkqTcmUC0CD9DhD5d/qeZlZkfRBn6GnHniZXLUo5+9xw8Iv76YE6LQFN9YNBlKREcCG76w==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.35.5.tgz",
+      "integrity": "sha512-Ptsga1su4tQx+LLF1ECS9U6nz5kmrXKo6XVbtR48Ke3ZRxxgaWBu7IDtEe1quo8hiupwm6WFqxVlXaSf7IINGQ==",
       "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/runtime": "^1.11.1"
+        "@emnapi/runtime": "^1.11.3"
       },
       "engines": {
         "node": ">=20.9.0"
@@ -950,16 +998,16 @@
       }
     },
     "node_modules/@img/sharp-webcontainers-wasm32": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-webcontainers-wasm32/-/sharp-webcontainers-wasm32-0.35.3.tgz",
-      "integrity": "sha512-2rnq7bX3NzeR2T4YWgz8qiG4h3TSdMe+vN1iQXpJleSJ3SM5zQ8Fy2SyyXAWlbxpEZ2Y+Z4u1BePgJEYbSy80Q==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-webcontainers-wasm32/-/sharp-webcontainers-wasm32-0.35.5.tgz",
+      "integrity": "sha512-hfhF/FmoQyTUkA0bIKFOtw536BQSeBMe6BF6QyWlrPxT754+TFLaZ7sKKTfvvM0yJgKgaYTwnFCIZ/GuDw5SUA==",
       "cpu": [
         "wasm32"
       ],
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
-        "@img/sharp-wasm32": "0.35.3"
+        "@img/sharp-wasm32": "0.35.5"
       },
       "engines": {
         "node": ">=20.9.0"
@@ -969,9 +1017,9 @@
       }
     },
     "node_modules/@img/sharp-win32-arm64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.35.3.tgz",
-      "integrity": "sha512-4bPwFdMbeC4JQ8L8LOyWp6nsHcboP5fxkp6iPOXz2Vg49R42TuMs2whkJ5OAP4/Ul035qOzy0AecOF9VOscn4w==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.35.5.tgz",
+      "integrity": "sha512-X4t7g+7ZA5DKblCBEXGjUqqemj4vczING/5viFwAL8h4N3qYeyjwdCvRLHi4EdOUI+2Z7UFlp1VM+p/AuEtm6Q==",
       "cpu": [
         "arm64"
       ],
@@ -988,9 +1036,9 @@
       }
     },
     "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.35.3.tgz",
-      "integrity": "sha512-r53mXsBN6lFUDiST764SvgwUdHAqM4rPAiDzAmf4fLoB6X/rkfyTrLCg6+g17wJJiCmB3JYgHuUldCWUIRFSXw==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.35.5.tgz",
+      "integrity": "sha512-5Zm82LoBc43nhwNybZlG7Y1KO//Zhsn306fQl29ZOuStHLGTo3BWL83q3cznX0poxSAMuYL1On/BHBxkBeKr6A==",
       "cpu": [
         "ia32"
       ],
@@ -1007,9 +1055,9 @@
       }
     },
     "node_modules/@img/sharp-win32-x64": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.35.3.tgz",
-      "integrity": "sha512-D4y1vNeZrIIJCN+uHaWVtH86B+aCrdMYYjicy9pXHvbGZeGYLLSd3wdVuC37FxVXlU1ARsk84eKWfWMXGYEqvA==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.35.5.tgz",
+      "integrity": "sha512-x76eH0vEiHlcMQu8Y8IenntaACtddpT6W0wmXtWrnKcnKI7ME5DdgqhAD6SEWOEl1v2zDvkZDhFA9KnURwpfqg==",
       "cpu": [
         "x64"
       ],
@@ -1098,25 +1146,58 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.3.1.tgz",
-      "integrity": "sha512-35G3xwkQUb2oETSDjFXGrVugknoayLFBh7vSE+yAcl9IP2zT9wyGwq7297AYHR11kJld807t5f8AJBs6WBzXsQ==",
+      "version": "16.4.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.4.3.tgz",
+      "integrity": "sha512-a7tz1QCcWWkwC/rPJcPMJk/UNRu9CFhDd3OHYE5hddbJrs8BqRTalxI6GlKCWEGzRLHN+S/B7a4PAHCtm25aBQ==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.2.10.tgz",
-      "integrity": "sha512-Gs8D2m21VnJeFo9qvYIIqJH94frWerWYu41BprU1pLtRVF7PCQNLiFZZ3fG+iPuj3K83Cwv/rt+msLOy8Qgu3Q==",
+      "version": "16.4.3",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.4.3.tgz",
+      "integrity": "sha512-oxuC06wt/71h6ACYCV9GbKOfnf5a7VlRe/p80YHTut15TNgDEmynDnaq8t/xhy5rlvk7dhItIPs6H3rvIM4kyw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
+        "@eslint-community/eslint-utils": "4.9.1",
         "fast-glob": "3.3.1"
       }
     },
+    "node_modules/@next/eslint-plugin-next/node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.3.1.tgz",
-      "integrity": "sha512-ABMIu2zQ7cnNIHm5ivKGwZwUrm0pAai3yiJ/gK/rF1c1VP9UOnj7XECbMKFdVKp9I9eMYq9NoDs1WXOoowxzJw==",
+      "version": "16.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.4.3.tgz",
+      "integrity": "sha512-4yq5EXBt+VDtAZwTyfijaFp5D2C5oz3Ikw5a2kiX2K9nw72vrZX2q5UuAlkPtUMO1tQz6JTKpaKWjS7OOefTDQ==",
       "cpu": [
         "arm64"
       ],
@@ -1130,9 +1211,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.3.1.tgz",
-      "integrity": "sha512-gNG21e/UnrroeScbY/QndUEdl0mF1FRibW7BBeYUz/5ABCepjqDdEdgr592vpzMtCn/m7FTjYq3TN4TpyDnutw==",
+      "version": "16.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.4.3.tgz",
+      "integrity": "sha512-1Rvkn/LUhnEF8WxnRkOrqGhbwXui1bkWFxONKIbN+r7C+9KHDSZ+iUoj4CzymVMWUyZIyx9szcb9+kbKhD500A==",
       "cpu": [
         "x64"
       ],
@@ -1146,12 +1227,15 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.3.1.tgz",
-      "integrity": "sha512-6B6Lw016iwNUQuaJoraMMTLh6TwHzFUtxipSScD1F3YyymcrRWkobodRS2ftIOkF5vrs4zNlyUrTC5YZQ9Lz5w==",
+      "version": "16.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.4.3.tgz",
+      "integrity": "sha512-dCKpXErGg3abUM6t5JTJV/ottVBTStJB5lRJTbgdUdQaQ+jNHiK56Hsc0YAEg/rinSh42hYG3HWiYmEMdilnxg==",
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1162,12 +1246,15 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.3.1.tgz",
-      "integrity": "sha512-JUiPXZKK9wOhjf4MgDiH29GZLxfqOesbLtHq2pDxwH/WwscTRV2ToymnOTh1egzaZf0ueUf8T2+CeYTGHjW0Iw==",
+      "version": "16.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.4.3.tgz",
+      "integrity": "sha512-WwYbhWkhYBvBtib1K4W0kL8MW2snBD2A5b3SN4vPpqalZbZs5+bQ1yzAdepVoOqrFfEW3dmREy4Zs1MrWcrFbw==",
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1178,12 +1265,15 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.3.1.tgz",
-      "integrity": "sha512-Uog9jsrmIRIL/lfvIp9htmskSNC7JcQsMVucXL2V2YY1y/D9IUN3LPEafqy0zRJ2cIU1SQ0V6F6TlffQ+pLAGg==",
+      "version": "16.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.4.3.tgz",
+      "integrity": "sha512-QymWvfUwDEC5/lpJOsxX5VAbyoR2D13+2Jsjz4be7gT4LPqEgdpkeLIR/HFfCLgKzoMhpJbp6I/JnogyNZHcaA==",
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1194,12 +1284,15 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.3.1.tgz",
-      "integrity": "sha512-6yy3FT13KgUFOj5H8bl8w/6nKiJwHIvbtwh1V+1acsu+7y4tJjnemSa6mhsh53BeoVrlozE+fMgZhXH46WmjMA==",
+      "version": "16.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.4.3.tgz",
+      "integrity": "sha512-Vmjd9D7DpA4Vv3cUlr82QWgJD/BQZmns801vtC5VWHg6jCIA4a5vMKpQnfrM2pyCrp2eV0ENdUg4PlN3bAc2Yw==",
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1210,9 +1303,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.3.1.tgz",
-      "integrity": "sha512-iOoN1QecUoGNZik536U/vtK43YwgyrCsGIkth52yIkl612n+0C9MjSnJbQAikISpb+WYRooBVhaDlUW7iZoKog==",
+      "version": "16.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.4.3.tgz",
+      "integrity": "sha512-lG1pPdPLk7gTyGb00n5JIMLdBJgjb+UEhSdZvFbhUMg0DyC6z4B7RnpSKF9VCd4imkLObVbXOFA0kFCpw7yFow==",
       "cpu": [
         "arm64"
       ],
@@ -1226,9 +1319,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.3.1.tgz",
-      "integrity": "sha512-d/k+PpAriUPaeMJJOG7HUSdqfEX46FEPWU1p3/nm2ACmXhj9hFEWdFODUBIpkuijXYkfL90qZzTqVPRp4BW/hw==",
+      "version": "16.4.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.4.3.tgz",
+      "integrity": "sha512-NmQC9RkJdnPXRaMxtkCzobB3teVjqF33oSOnwDfi+XYGWWYpt+xlGK3mtktSKLbdjwaWbJu2OkkMiRFGUUncKg==",
       "cpu": [
         "x64"
       ],
@@ -1883,9 +1976,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "5.0.9",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
-      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.12.tgz",
+      "integrity": "sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2637,9 +2730,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.18",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.18.tgz",
-      "integrity": "sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==",
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.21.tgz",
+      "integrity": "sha512-9zeA+KLZNNzglF2TPKRQEDyx6Yby7daAkuy8MiPzpXPsYDWi/DRM8jmwUDxokQjYqBpv5DgPiwD4h4ZZSy1Ujw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3417,21 +3510,21 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "16.2.10",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.2.10.tgz",
-      "integrity": "sha512-HSybLOY0QKf39i4FWUqPN0xWiNDi6A6UqJmZtgDkS3zMqjXTqULvj/sueXx3cdCG0mVG+qH6k5/qdegklH1d1w==",
+      "version": "16.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.4.3.tgz",
+      "integrity": "sha512-j9IqBma6abp800frdUURaizYMgXOK+jNGyq6CsYcM9AxpSJs5D/TgMNGeAmRUilZvA7g9V1Tr71gNg9/SVTuMQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@next/eslint-plugin-next": "16.2.10",
+        "@next/eslint-plugin-next": "16.4.3",
         "eslint-import-resolver-node": "^0.3.6",
         "eslint-import-resolver-typescript": "^3.5.2",
         "eslint-plugin-import": "^2.32.0",
         "eslint-plugin-jsx-a11y": "^6.10.0",
         "eslint-plugin-react": "^7.37.0",
-        "eslint-plugin-react-hooks": "^7.0.0",
+        "eslint-plugin-react-hooks": "^7.1.0",
         "globals": "16.4.0",
-        "typescript-eslint": "^8.46.0"
+        "typescript-eslint": "^8.56.0"
       },
       "peerDependencies": {
         "eslint": ">=9.0.0",
@@ -3830,9 +3923,9 @@
       "license": "MIT"
     },
     "node_modules/fastq": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
-      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.3.tgz",
+      "integrity": "sha512-XKv5nnLs6nLF71NgiKJLIZFLkPyIEuOselLG7ujZnGrRfQK8HpvY+WqKhAJUAdLomwVHErVS4LfxFlPq0/FTAw==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -4899,9 +4992,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.1.tgz",
-      "integrity": "sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.2.tgz",
+      "integrity": "sha512-SFNOvSJ+Dgf/9An904Yx+CgSlIPCkIpao4qo51lpee25TIRejdH3rhR4EZMGoNx3/TP3O+wzWuiTFl4sqbltzA==",
       "dev": true,
       "funding": [
         {
@@ -6330,12 +6423,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.3.1.tgz",
-      "integrity": "sha512-hsAp0i7Rh+/dhe7DGIeN2YlpLM1DP4MNxti9EtDMtqcO612X81MvvEj388/oTce9U1EcEIOWDlGq0zRwrBKvuA==",
+      "version": "16.4.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.4.3.tgz",
+      "integrity": "sha512-OqxKTGi9u80FydydsMNYNjnuje9Au+kvHlt2GZ//ftdpDHm1dxKqAaENoOOTX5wKzn+9vaKUNIfZeyZUuLhCnA==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "16.3.1",
+        "@next/env": "16.4.3",
         "@swc/helpers": "0.5.23",
         "baseline-browser-mapping": "^2.9.19",
         "caniuse-lite": "^1.0.30001579",
@@ -6349,15 +6442,15 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.3.1",
-        "@next/swc-darwin-x64": "16.3.1",
-        "@next/swc-linux-arm64-gnu": "16.3.1",
-        "@next/swc-linux-arm64-musl": "16.3.1",
-        "@next/swc-linux-x64-gnu": "16.3.1",
-        "@next/swc-linux-x64-musl": "16.3.1",
-        "@next/swc-win32-arm64-msvc": "16.3.1",
-        "@next/swc-win32-x64-msvc": "16.3.1",
-        "sharp": "^0.35.3"
+        "@next/swc-darwin-arm64": "16.4.3",
+        "@next/swc-darwin-x64": "16.4.3",
+        "@next/swc-linux-arm64-gnu": "16.4.3",
+        "@next/swc-linux-arm64-musl": "16.4.3",
+        "@next/swc-linux-x64-gnu": "16.4.3",
+        "@next/swc-linux-x64-musl": "16.4.3",
+        "@next/swc-win32-arm64-msvc": "16.4.3",
+        "@next/swc-win32-x64-msvc": "16.4.3",
+        "sharp": "^0.35.5"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -7153,9 +7246,9 @@
       }
     },
     "node_modules/sharp": {
-      "version": "0.35.3",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.35.3.tgz",
-      "integrity": "sha512-ej0zVHuZGHCiABXcNxeYhpRnPNPAcvbG8RMdBAhDAxLKkCRVSpK3Iyu7qbqw3JMzoj0REeM6f3tJLtVwl0023Q==",
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.35.5.tgz",
+      "integrity": "sha512-Ywn4OnzGukp7CDMrp08RQ50YKmuwG47brZgIVPTvBaaAfQlRlygrRqSrxdCiL9M+LlzLBiJ68IR1QqvzHyjC7g==",
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
@@ -7170,31 +7263,31 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.35.3",
-        "@img/sharp-darwin-x64": "0.35.3",
-        "@img/sharp-freebsd-wasm32": "0.35.3",
-        "@img/sharp-libvips-darwin-arm64": "1.3.2",
-        "@img/sharp-libvips-darwin-x64": "1.3.2",
-        "@img/sharp-libvips-linux-arm": "1.3.2",
-        "@img/sharp-libvips-linux-arm64": "1.3.2",
-        "@img/sharp-libvips-linux-ppc64": "1.3.2",
-        "@img/sharp-libvips-linux-riscv64": "1.3.2",
-        "@img/sharp-libvips-linux-s390x": "1.3.2",
-        "@img/sharp-libvips-linux-x64": "1.3.2",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.3.2",
-        "@img/sharp-libvips-linuxmusl-x64": "1.3.2",
-        "@img/sharp-linux-arm": "0.35.3",
-        "@img/sharp-linux-arm64": "0.35.3",
-        "@img/sharp-linux-ppc64": "0.35.3",
-        "@img/sharp-linux-riscv64": "0.35.3",
-        "@img/sharp-linux-s390x": "0.35.3",
-        "@img/sharp-linux-x64": "0.35.3",
-        "@img/sharp-linuxmusl-arm64": "0.35.3",
-        "@img/sharp-linuxmusl-x64": "0.35.3",
-        "@img/sharp-webcontainers-wasm32": "0.35.3",
-        "@img/sharp-win32-arm64": "0.35.3",
-        "@img/sharp-win32-ia32": "0.35.3",
-        "@img/sharp-win32-x64": "0.35.3"
+        "@img/sharp-darwin-arm64": "0.35.5",
+        "@img/sharp-darwin-x64": "0.35.5",
+        "@img/sharp-freebsd-wasm32": "0.35.5",
+        "@img/sharp-libvips-darwin-arm64": "1.3.4",
+        "@img/sharp-libvips-darwin-x64": "1.3.4",
+        "@img/sharp-libvips-linux-arm": "1.3.4",
+        "@img/sharp-libvips-linux-arm64": "1.3.4",
+        "@img/sharp-libvips-linux-ppc64": "1.3.4",
+        "@img/sharp-libvips-linux-riscv64": "1.3.4",
+        "@img/sharp-libvips-linux-s390x": "1.3.4",
+        "@img/sharp-libvips-linux-x64": "1.3.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.4",
+        "@img/sharp-linux-arm": "0.35.5",
+        "@img/sharp-linux-arm64": "0.35.5",
+        "@img/sharp-linux-ppc64": "0.35.5",
+        "@img/sharp-linux-riscv64": "0.35.5",
+        "@img/sharp-linux-s390x": "0.35.5",
+        "@img/sharp-linux-x64": "0.35.5",
+        "@img/sharp-linuxmusl-arm64": "0.35.5",
+        "@img/sharp-linuxmusl-x64": "0.35.5",
+        "@img/sharp-webcontainers-wasm32": "0.35.5",
+        "@img/sharp-win32-arm64": "0.35.5",
+        "@img/sharp-win32-ia32": "0.35.5",
+        "@img/sharp-win32-x64": "0.35.5"
       },
       "peerDependenciesMeta": {
         "@types/node": {
@@ -7315,9 +7408,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
+      "integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -8204,9 +8297,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
-      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
+      "version": "4.6.7",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.6.7.tgz",
+      "integrity": "sha512-g8W2D2kU6a8untc053fX1uVBKzM7yqAxW/3zwk83+6RyF2+SKOuV+c0wBDhUwzV1PaGapmZH+rmcUzPf+3CGwg==",
       "dev": true,
       "license": "MIT",
       "funding": {
diff --git a/package.json b/package.json
index 59f5f19..fec1e0f 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@xscriptor/xcomponents": "^0.2.3",
     "framer-motion": "^12.42.2",
-    "next": "^16.2.11",
+    "next": "^16.4.3",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-markdown": "^10.1.0",
@@ -20,7 +20,7 @@
   },
   "overrides": {
     "postcss": "^8.5.10",
-    "sharp": "^0.35.0"
+    "sharp": "^0.35.5"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
@@ -28,7 +28,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
-    "eslint-config-next": "16.2.10",
+    "eslint-config-next": "16.4.3",
     "tailwindcss": "^4",
     "typescript": "^5"
   }
diff --git a/src/app/globals.css b/src/app/globals.css
index f69177c..8a60216 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -6,7 +6,7 @@
   --color-bg3: #22263a;
   --color-fg: #e1e4ed;
   --color-fg2: #8b91a8;
-  --color-accent: #dea584;
+  --color-accent: #ffb27a;
   --color-accent2: #ffa500;
   --color-green: #78dba9;
   --color-cyan: #78dce8;
@@ -30,7 +30,7 @@
   --border: #22263a;
   --text: #e1e4ed;
   --text-muted: #8b91a8;
-  --accent: #dea584;
+  --accent: #ffb27a;
 }
 
 html:not([data-theme="dark"]) {
@@ -40,7 +40,7 @@ html:not([data-theme="dark"]) {
   --color-bg3: #e0ddd5;
   --color-fg: #1e1e1e;
   --color-fg2: #6b7280;
-  --color-accent: #c8763a;
+  --color-accent: #a85122;
   --color-accent2: #ffa500;
   --color-green: #2ea043;
   --color-cyan: #0e8a9e;
@@ -54,7 +54,7 @@ html:not([data-theme="dark"]) {
   --border: #e0ddd5;
   --text: #1e1e1e;
   --text-muted: #6b7280;
-  --accent: #c8763a;
+  --accent: #a85122;
 }
 
 body {
@@ -107,18 +107,6 @@ body {
 .placeholder-fg2::placeholder { color: var(--color-fg2) !important; }
 .\[\&\:checked\:\:after\]\:text-bg:checked:after { color: var(--color-bg) !important; }
 
-.xfetch-nav a,
-.xfetch-nav button,
-.XGlassNavbar_overlay a,
-.XGlassNavbar_overlay button {
-  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
-}
-
-header.XGlassNavbar_nav .XGlassNavbar_sectionLeft,
-header.XGlassNavbar_nav .XGlassNavbar_sectionRight {
-  width: auto;
-  flex: 0 0 auto;
-}
 
 .bg-paths-dark { display: block; }
 .bg-paths-light { display: none; }
diff --git a/src/app/landing.css b/src/app/landing.css
new file mode 100644
index 0000000..6e46dd5
--- /dev/null
+++ b/src/app/landing.css
@@ -0,0 +1,2977 @@
+/* ==========================================================================
+   xfetch landing — "precision terminal / isometric lab"
+   This file is additive. Everything is scoped to .xf-* selectors plus a small
+   set of html-level tokens so the global nav/footer work on docs/previews too.
+   ========================================================================== */
+
+html {
+  --xf-bg: #07090f;
+  --xf-surface: #0d111a;
+  --xf-surface-2: #121826;
+  --xf-surface-3: #182033;
+  --xf-line: rgba(148, 163, 184, 0.16);
+  --xf-line-strong: rgba(148, 163, 184, 0.3);
+  --xf-text: #e8ecf5;
+  --xf-muted: #98a2b8;
+  --xf-accent: var(--color-accent, #ffb27a);
+  --xf-accent-strong: #ffc79e;
+  --xf-accent-ink: #26130a;
+  --xf-control-border: #6f7b90;
+  --xf-text-xs: 0.72rem;
+  --xf-text-2xs: 0.66rem;
+  --xf-radius-sm: 14px;
+  --xf-radius-lg: 20px;
+  --xf-space-1: 0.25rem;
+  --xf-space-2: 0.5rem;
+  --xf-space-3: 0.75rem;
+  --xf-space-4: 1rem;
+  --xf-space-5: 1.5rem;
+  --xf-space-6: 2rem;
+  --xf-space-7: 3rem;
+  --xf-shadow-soft: 0 18px 45px -28px rgba(0, 0, 0, 0.68);
+  --xf-cyan: #7dd3fc;
+  --xf-violet: #a78bfa;
+  --xf-success: #7ee2b8;
+  --xf-warning: #ffd28a;
+  --xf-danger: #ff8f9c;
+  --xf-glass-tint: rgba(13, 17, 26, 0.62);
+  --xf-glass-edge: rgba(255, 255, 255, 0.16);
+  --xf-glass-inner: rgba(255, 255, 255, 0.09);
+  --xf-grid-line: rgba(148, 163, 184, 0.075);
+  --xf-shadow: 0 30px 80px -34px rgba(0, 0, 0, 0.85);
+  --xf-code-bg: #080b12;
+  --xf-code-bg-2: #0d1220;
+  --xf-code-text: #dbe3f4;
+  --xf-code-muted: #8b97ad;
+  --xf-code-key: #7dd3fc;
+  --xf-code-accent: #ffb27a;
+  --xf-code-success: #7ee2b8;
+  --xf-radius: 18px;
+  color-scheme: dark;
+}
+
+html:not([data-theme="dark"]) {
+  --xf-bg: #f7f4ee;
+  --xf-surface: #fffdf9;
+  --xf-surface-2: #f1ede5;
+  --xf-surface-3: #e8e2d8;
+  --xf-line: rgba(23, 26, 33, 0.13);
+  --xf-line-strong: rgba(23, 26, 33, 0.24);
+  --xf-text: #171a21;
+  --xf-muted: #5b6270;
+  --xf-accent-strong: #9d4a1e;
+  --xf-accent-ink: #fffdf9;
+  --xf-control-border: #8c8378;
+  --xf-cyan: #0e7490;
+  --xf-violet: #6d28d9;
+  --xf-success: #1f7a52;
+  --xf-warning: #8a5a00;
+  --xf-danger: #b42335;
+  --xf-glass-tint: rgba(255, 253, 249, 0.7);
+  --xf-glass-edge: rgba(23, 26, 33, 0.14);
+  --xf-glass-inner: rgba(255, 255, 255, 0.7);
+  --xf-grid-line: rgba(23, 26, 33, 0.065);
+  --xf-shadow: 0 30px 80px -38px rgba(44, 37, 27, 0.42);
+  color-scheme: light;
+}
+
+html[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+/* ---------- shared primitives ---------- */
+
+.xf-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.xf-skip {
+  position: fixed;
+  top: 0.6rem;
+  left: 0.6rem;
+  z-index: 200;
+  padding: 0.6rem 0.9rem;
+  border: 1px solid var(--xf-accent);
+  border-radius: 10px;
+  background: var(--xf-surface);
+  color: var(--xf-text);
+  font: 600 0.8rem/1 var(--font-sans);
+  text-decoration: none;
+  transform: translateY(-180%);
+  transition: transform 0.15s ease;
+}
+.xf-skip:focus-visible,
+.xf-skip:focus {
+  transform: translateY(0);
+  outline: 2px solid var(--xf-accent);
+  outline-offset: 2px;
+}
+
+.xf-container {
+  width: min(100% - clamp(1.5rem, 5vw, 3rem), 1200px);
+  margin-inline: auto;
+}
+
+html:has(.xf-landing) {
+  scroll-padding-top: 88px;
+}
+
+body:has(.xf-landing) {
+  background: var(--xf-bg);
+}
+
+.xf-landing {
+  position: relative;
+  min-height: 100vh;
+  background: transparent;
+  color: var(--xf-text);
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.xf-landing a,
+.xf-landing button,
+.xf-nav a,
+.xf-nav button,
+.xf-footer a,
+.xf-skip {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.xf-landing :focus-visible,
+.xf-nav :focus-visible,
+.xf-footer :focus-visible {
+  outline: 2px solid var(--xf-accent);
+  outline-offset: 3px;
+}
+
+.xf-landing ::selection {
+  background: var(--xf-accent);
+  color: var(--xf-accent-ink);
+}
+
+.xf-eyebrow {
+  margin: 0 0 0.7rem;
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  font-weight: 600;
+  letter-spacing: 0.19em;
+  line-height: 1.4;
+  text-transform: uppercase;
+  color: var(--xf-accent);
+}
+
+.xf-mini-label {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--xf-muted);
+}
+
+.xf-hint {
+  margin: 0;
+  color: var(--xf-muted);
+  font-size: 0.78rem;
+  line-height: 1.5;
+}
+
+.xf-glass {
+  position: relative;
+  background: var(--xf-glass-tint);
+  border: 1px solid var(--xf-glass-edge);
+  box-shadow:
+    inset 0 1px 0 var(--xf-glass-inner),
+    0 24px 60px -30px rgba(0, 0, 0, 0.72);
+  -webkit-backdrop-filter: blur(18px) saturate(165%);
+  backdrop-filter: blur(18px) saturate(165%);
+}
+
+@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
+  body .xf-nav .xf-nav-inner,
+  body .xf-nav.is-scrolled .xf-nav-inner,
+  .xf-glass {
+    background: var(--xf-surface);
+  }
+}
+
+/* ---------- scroll reveal ---------- */
+
+.xf-js [data-reveal] {
+  opacity: 0;
+  translate: 0 22px;
+  transition:
+    opacity 0.7s cubic-bezier(0.2, 0.72, 0.2, 1),
+    translate 0.7s cubic-bezier(0.2, 0.72, 0.2, 1);
+  transition-delay: var(--reveal-delay, 0ms);
+}
+.xf-js [data-reveal].is-in,
+.xf-js [data-reveal]:focus-within {
+  opacity: 1;
+  translate: 0 0;
+}
+
+/* ---------- ambient background ---------- */
+
+.xf-bg {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+.xf-bg-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(to right, var(--xf-grid-line) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--xf-grid-line) 1px, transparent 1px);
+  background-size: 72px 72px;
+  -webkit-mask-image: radial-gradient(ellipse 95% 70% at 50% 18%, #000 20%, transparent 78%);
+  mask-image: radial-gradient(ellipse 95% 70% at 50% 18%, #000 20%, transparent 78%);
+}
+.xf-bg-glow {
+  position: absolute;
+  width: 46rem;
+  height: 46rem;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.4;
+}
+.xf-bg-glow--warm {
+  top: -20rem;
+  left: -14rem;
+  background: radial-gradient(circle, color-mix(in srgb, var(--xf-accent) 36%, transparent), transparent 68%);
+}
+.xf-bg-glow--cool {
+  top: -24rem;
+  right: -18rem;
+  background: radial-gradient(circle, color-mix(in srgb, var(--xf-cyan) 26%, transparent), transparent 68%);
+  opacity: 0.32;
+}
+.xf-bg-lines {
+  position: absolute;
+  inset: -10% -5%;
+  width: 110%;
+  height: 120%;
+  opacity: 0.5;
+}
+.xf-bg-drift {
+  transform-origin: center;
+  animation: xf-bg-drift 26s ease-in-out infinite alternate;
+}
+.xf-bg-noise {
+  position: absolute;
+  inset: 0;
+  opacity: 0.035;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
+}
+
+@keyframes xf-bg-drift {
+  from { transform: translate3d(-8px, 4px, 0); }
+  to { transform: translate3d(10px, -8px, 0); }
+}
+
+/* ==========================================================================
+   NAV
+   ========================================================================== */
+
+.xf-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 60;
+  padding: 0.6rem 0 0;
+}
+.xf-nav-inner {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  width: min(100% - clamp(1.5rem, 5vw, 3rem), 1200px);
+  min-height: 58px;
+  margin-inline: auto;
+  padding: 0.38rem 0.5rem 0.38rem 0.7rem;
+  border: 1px solid var(--xf-glass-edge);
+  border-radius: 15px;
+  background: var(--xf-glass-tint);
+  box-shadow:
+    inset 0 1px 0 var(--xf-glass-inner),
+    0 16px 44px -24px rgba(0, 0, 0, 0.72);
+  -webkit-backdrop-filter: blur(18px) saturate(175%);
+  backdrop-filter: blur(18px) saturate(175%);
+  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.xf-nav.is-scrolled .xf-nav-inner {
+  background: color-mix(in srgb, var(--xf-surface) 82%, transparent);
+  box-shadow:
+    inset 0 1px 0 var(--xf-glass-inner),
+    0 20px 50px -26px rgba(0, 0, 0, 0.82);
+}
+
+.xf-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.2rem 0.35rem;
+  border-radius: 9px;
+  color: var(--xf-text);
+  text-decoration: none;
+  white-space: nowrap;
+}
+.xf-brand-mark {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid color-mix(in srgb, var(--xf-accent) 55%, var(--xf-line));
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--xf-accent) 12%, transparent);
+  color: var(--xf-accent);
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+}
+.xf-brand-word {
+  font-family: var(--font-mono);
+  font-size: 0.92rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.xf-nav-links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.05rem;
+  flex: 1;
+  min-width: 0;
+}
+.xf-nav-link {
+  position: relative;
+  padding: 0.42rem 0.52rem;
+  border-radius: 8px;
+  color: var(--xf-muted);
+  font-size: 0.76rem;
+  font-weight: 550;
+  line-height: 1.2;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+.xf-nav-link:hover {
+  color: var(--xf-text);
+  background: color-mix(in srgb, var(--xf-surface-2) 72%, transparent);
+}
+.xf-nav-link.is-active {
+  color: var(--xf-text);
+  background: color-mix(in srgb, var(--xf-accent) 11%, transparent);
+}
+.xf-nav-link.is-active::after {
+  content: "";
+  position: absolute;
+  left: 0.55rem;
+  right: 0.55rem;
+  bottom: 0.12rem;
+  height: 1px;
+  border-radius: 1px;
+  background: var(--xf-accent);
+}
+
+.xf-nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+.xf-theme-toggle,
+.xf-menu-btn {
+  display: inline-grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  border: 1px solid var(--xf-control-border);
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--xf-surface-2) 55%, transparent);
+  color: var(--xf-muted);
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
+}
+.xf-theme-toggle:hover,
+.xf-menu-btn:hover {
+  color: var(--xf-accent);
+  border-color: color-mix(in srgb, var(--xf-accent) 45%, var(--xf-line));
+  background: color-mix(in srgb, var(--xf-accent) 9%, transparent);
+}
+.xf-menu-btn {
+  display: none;
+}
+.xf-menu-icon {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 16px;
+  height: 12px;
+}
+.xf-menu-icon span {
+  display: block;
+  width: 100%;
+  height: 1.5px;
+  border-radius: 2px;
+  background: currentColor;
+  transition: transform 0.18s ease, opacity 0.18s ease;
+  transform-origin: center;
+}
+.xf-menu-icon.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
+.xf-menu-icon.is-open span:nth-child(2) { opacity: 0; }
+.xf-menu-icon.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
+
+.xf-nav-progress {
+  position: absolute;
+  left: 50%;
+  bottom: -0.1rem;
+  width: min(100% - clamp(1.5rem, 5vw, 3rem), 1200px);
+  height: 2px;
+  transform: translateX(-50%);
+  border-radius: 2px;
+  overflow: hidden;
+  opacity: 0.8;
+}
+.xf-nav-progress span {
+  display: block;
+  width: 0;
+  height: 100%;
+  background: linear-gradient(90deg, var(--xf-accent), var(--xf-cyan));
+}
+
+.xf-mobile-menu {
+  position: absolute;
+  top: calc(100% + 0.45rem);
+  left: 50%;
+  width: min(100% - clamp(1.5rem, 5vw, 3rem), 1200px);
+  transform: translateX(-50%);
+  max-height: calc(100vh - 90px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--xf-space-2);
+  border: 1px solid var(--xf-line-strong);
+  border-radius: var(--xf-radius-sm);
+  background: var(--xf-surface);
+  box-shadow: var(--xf-shadow);
+}
+.xf-mobile-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--xf-space-3);
+  padding: 0.2rem 0.2rem 0.55rem;
+  margin-bottom: 0.25rem;
+  border-bottom: 1px solid var(--xf-line);
+}
+.xf-mobile-title {
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+.xf-mobile-close {
+  display: inline-grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--xf-control-border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--xf-surface-2) 55%, transparent);
+  color: var(--xf-muted);
+  cursor: pointer;
+}
+.xf-mobile-close:hover {
+  color: var(--xf-accent);
+  border-color: var(--xf-accent);
+}
+.xf-mobile-link {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.7rem 0.75rem;
+  border-radius: 9px;
+  color: var(--xf-text);
+  font-size: 0.9rem;
+  font-weight: 550;
+  text-decoration: none;
+}
+.xf-mobile-link:hover {
+  color: var(--xf-accent);
+  background: color-mix(in srgb, var(--xf-accent) 9%, transparent);
+}
+.xf-mobile-link.is-active {
+  color: var(--xf-text);
+  background: color-mix(in srgb, var(--xf-accent) 9%, transparent);
+}
+.xf-mobile-index {
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  color: var(--xf-muted);
+}
+
+/* ==========================================================================
+   HERO
+   ========================================================================== */
+
+.xf-hero {
+  position: relative;
+  padding-block: clamp(7.5rem, 12vw, 10.5rem) clamp(3.5rem, 7vw, 6.5rem);
+  overflow: clip;
+}
+.xf-hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
+  align-items: center;
+  gap: clamp(2rem, 5vw, 4rem);
+}
+.xf-hero-copy {
+  min-width: 0;
+}
+.xf-hero-banner {
+  display: block;
+  width: min(100%, 16rem);
+  height: auto;
+  margin-bottom: clamp(1.2rem, 2.4vw, 2rem);
+}
+.xf-hero-eyebrow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+.xf-hero-title {
+  margin: 0;
+  font-size: clamp(2.8rem, 5.4vw, 5.15rem);
+  font-weight: 650;
+  line-height: 0.98;
+  letter-spacing: -0.048em;
+  text-wrap: balance;
+}
+.xf-hero-title-accent {
+  color: var(--xf-accent);
+}
+.xf-hero-lead {
+  max-width: 52ch;
+  margin: clamp(1.2rem, 2.4vw, 1.7rem) 0 0;
+  color: var(--xf-muted);
+  font-size: clamp(1rem, 1.4vw, 1.15rem);
+  line-height: 1.65;
+}
+.xf-hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  margin-top: clamp(1.5rem, 3vw, 2.1rem);
+}
+.xf-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.55rem;
+  min-height: 44px;
+  padding: 0.68rem 1.05rem;
+  border: 1px solid transparent;
+  border-radius: 11px;
+  font-family: var(--font-sans);
+  font-size: 0.86rem;
+  font-weight: 650;
+  line-height: 1.2;
+  text-decoration: none;
+  cursor: pointer;
+  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
+}
+.xf-btn--primary {
+  background: var(--xf-accent);
+  color: var(--xf-accent-ink);
+  box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--xf-accent) 70%, transparent);
+}
+.xf-btn--primary:hover {
+  background: var(--xf-accent-strong);
+  transform: translateY(-1px);
+}
+.xf-btn--ghost {
+  border-color: var(--xf-line-strong);
+  background: color-mix(in srgb, var(--xf-surface) 74%, transparent);
+  color: var(--xf-text);
+}
+.xf-btn--ghost:hover {
+  border-color: color-mix(in srgb, var(--xf-accent) 45%, var(--xf-line));
+  background: color-mix(in srgb, var(--xf-accent) 8%, var(--xf-surface));
+  transform: translateY(-1px);
+}
+
+.xf-facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin: clamp(1.4rem, 2.8vw, 2rem) 0 0;
+  padding: 0;
+  list-style: none;
+}
+.xf-facts li {
+  padding: 0.28rem 0.58rem;
+  border: 1px solid var(--xf-line);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--xf-surface) 66%, transparent);
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+
+/* hero visual */
+
+.xf-hero-visual {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  margin: 0;
+}
+.xf-visual-stage {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  aspect-ratio: 1 / 0.92;
+  min-height: 420px;
+  perspective: 1200px;
+}
+.xf-hero-plinth {
+  position: absolute;
+  left: 12%;
+  right: 12%;
+  bottom: 7%;
+  height: 46%;
+  border: 1px solid var(--xf-line);
+  border-radius: 26px;
+  background-image:
+    linear-gradient(to right, var(--xf-grid-line) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--xf-grid-line) 1px, transparent 1px);
+  background-size: 34px 34px;
+  background-color: color-mix(in srgb, var(--xf-surface) 55%, transparent);
+  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8);
+  transform: rotateX(64deg) rotateZ(-36deg);
+  opacity: 0.55;
+}
+.xf-hero-glow {
+  position: absolute;
+  width: 70%;
+  height: 55%;
+  border-radius: 50%;
+  background: radial-gradient(circle, color-mix(in srgb, var(--xf-cyan) 20%, transparent), transparent 68%);
+  filter: blur(36px);
+  opacity: 0.7;
+}
+.xf-iso {
+  position: relative;
+  width: 90%;
+  max-width: 520px;
+  transform-style: preserve-3d;
+  transform: rotateX(calc(9deg + var(--rx, 0deg))) rotateY(calc(-14deg + var(--ry, 0deg)));
+  transition: transform 0.18s ease-out;
+}
+.xf-slab {
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--xf-line);
+  border-radius: var(--xf-radius);
+  background: var(--xf-surface);
+  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.8);
+  overflow: hidden;
+}
+.xf-slab--back {
+  transform: translate3d(-28px, 38px, -95px) scale(0.91);
+  opacity: 0.42;
+}
+.xf-slab--mid {
+  transform: translate3d(-14px, 19px, -46px) scale(0.955);
+  opacity: 0.66;
+}
+.xf-slab-logo {
+  padding: 1.2rem;
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  line-height: 1.05;
+  white-space: pre;
+}
+.xf-slab-rows {
+  display: grid;
+  gap: 0.32rem;
+  padding: 1.2rem;
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+}
+.xf-slab-rows i {
+  color: var(--xf-cyan);
+  font-style: normal;
+}
+.xf-term {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: var(--xf-radius);
+  background: linear-gradient(180deg, var(--xf-code-bg-2), var(--xf-code-bg));
+  box-shadow:
+    0 50px 110px -46px rgba(0, 0, 0, 0.92),
+    inset 0 1px 0 rgba(255, 255, 255, 0.07);
+  transform: translateZ(34px);
+}
+.xf-term-chrome {
+  display: flex;
+  align-items: center;
+  gap: 0.38rem;
+  padding: 0.58rem 0.75rem;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
+  background: var(--xf-code-bg-2);
+}
+.xf-term-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: none;
+}
+.xf-term-dot.is-red { background: #ff5f56; }
+.xf-term-dot.is-amber { background: #ffbd2e; }
+.xf-term-dot.is-green { background: #27c93f; }
+.xf-term-title {
+  margin-left: 0.35rem;
+  color: var(--xf-code-muted);
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.xf-term-badge {
+  margin-left: auto;
+  padding: 0.1rem 0.4rem;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 999px;
+  color: var(--xf-code-muted);
+  font-family: var(--font-mono);
+  font-size: 0.55rem;
+  white-space: nowrap;
+}
+.xf-term-body {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 1.15rem;
+  padding: 1rem 1.05rem;
+}
+.xf-term-logo {
+  margin: 0;
+  color: var(--xf-code-accent);
+  font-family: var(--font-mono);
+  font-size: clamp(0.46rem, 0.72vw, 0.62rem);
+  line-height: 1.08;
+  white-space: pre;
+  opacity: 0.95;
+}
+.xf-term-rows {
+  display: grid;
+  align-content: start;
+  gap: 0.3rem;
+  min-width: 0;
+}
+.xf-term-row {
+  display: flex;
+  gap: 0.5rem;
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: clamp(0.5rem, 0.78vw, 0.66rem);
+  line-height: 1.35;
+  white-space: nowrap;
+}
+.xf-term-key {
+  flex: none;
+  width: 4.1em;
+  color: var(--xf-code-key);
+}
+.xf-term-value {
+  color: var(--xf-code-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.xf-term-palette {
+  display: flex;
+  gap: 0.18rem;
+  margin: 0.28rem 0 0;
+}
+.xf-term-palette span {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+.xf-term-foot {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.52rem 0.85rem 0.6rem;
+  border-top: 1px solid rgba(148, 163, 184, 0.16);
+  color: var(--xf-code-muted);
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+}
+.xf-term-prompt {
+  color: var(--xf-code-success);
+}
+.xf-term-cursor,
+.xf-terminal-cursor {
+  display: inline-block;
+  width: 6px;
+  height: 0.9em;
+  background: var(--xf-code-success);
+  animation: xf-blink 1.1s step-end infinite;
+}
+.xf-term-cursor {
+  margin-left: 0.15rem;
+}
+@keyframes xf-blink {
+  50% { opacity: 0; }
+}
+
+.xf-chip {
+  position: absolute;
+  z-index: 3;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.3rem;
+  padding: 0.34rem 0.55rem;
+  border: 1px solid var(--xf-control-border);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--xf-surface-2) 92%, transparent);
+  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.75);
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  line-height: 1;
+  white-space: nowrap;
+  transform: translateZ(80px);
+}
+.xf-chip strong {
+  color: var(--xf-accent);
+  font-weight: 700;
+}
+.xf-chip--tl { top: 4%; left: -4%; }
+.xf-chip--tr { top: 13%; right: -5%; }
+.xf-chip--bl { bottom: 14%; left: -7%; }
+.xf-chip--br { bottom: 3%; right: 1%; }
+.xf-chip--tl { animation: xf-chip-a 7s ease-in-out infinite alternate; }
+.xf-chip--tr { animation: xf-chip-b 8s ease-in-out infinite alternate; }
+.xf-chip--bl { animation: xf-chip-b 7.5s ease-in-out infinite alternate-reverse; }
+.xf-chip--br { animation: xf-chip-a 8.5s ease-in-out infinite alternate-reverse; }
+@keyframes xf-chip-a {
+  from { transform: translate3d(0, 0, 80px); }
+  to { transform: translate3d(0, -7px, 80px); }
+}
+@keyframes xf-chip-b {
+  from { transform: translate3d(0, 0, 80px); }
+  to { transform: translate3d(0, 6px, 80px); }
+}
+
+/* ==========================================================================
+   SECTION SCAFFOLD
+   ========================================================================== */
+
+.xf-section {
+  position: relative;
+  padding-block: clamp(3.4rem, 7vw, 6.8rem);
+  border-top: 1px solid var(--xf-line);
+}
+.xf-sec-head {
+  max-width: 74ch;
+  margin-bottom: clamp(1.8rem, 3.6vw, 2.8rem);
+}
+.xf-sec-head h2 {
+  margin: 0;
+  font-size: clamp(1.9rem, 3.4vw, 2.85rem);
+  font-weight: 650;
+  line-height: 1.08;
+  letter-spacing: -0.035em;
+  text-wrap: balance;
+}
+.xf-sec-lead {
+  max-width: 68ch;
+  margin: 0.9rem 0 0;
+  color: var(--xf-muted);
+  font-size: clamp(0.94rem, 1.2vw, 1.04rem);
+  line-height: 1.7;
+}
+
+/* ---------- code blocks ---------- */
+
+.xf-code {
+  overflow: hidden;
+  border: 1px solid var(--xf-line);
+  border-radius: var(--xf-radius-sm);
+  background: var(--xf-code-bg);
+  color: var(--xf-code-text);
+}
+.xf-code-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.7rem;
+  padding: 0.5rem 0.7rem 0.5rem 0.9rem;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
+  background: var(--xf-code-bg-2);
+}
+.xf-code-label {
+  overflow: hidden;
+  color: var(--xf-code-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  font-weight: 600;
+  letter-spacing: 0.13em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.xf-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  flex: none;
+  min-height: 26px;
+  padding: 0.28rem 0.5rem;
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  border-radius: 7px;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--xf-code-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
+}
+.xf-copy:hover {
+  color: var(--xf-code-accent);
+  border-color: color-mix(in srgb, var(--xf-code-accent) 50%, transparent);
+  background: color-mix(in srgb, var(--xf-code-accent) 8%, transparent);
+}
+.xf-code-pre {
+  margin: 0;
+  padding: 0.95rem 1.05rem;
+  overflow-x: auto;
+  color: var(--xf-code-text);
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  line-height: 1.7;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 2;
+}
+.xf-code-comment {
+  color: var(--xf-code-muted);
+}
+.xf-code-prompt {
+  color: var(--xf-code-success);
+}
+
+/* ==========================================================================
+   INSTALL
+   ========================================================================== */
+
+.xf-install {
+  display: grid;
+  gap: 0.85rem;
+}
+.xf-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+.xf-tab {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 0.48rem 0.78rem;
+  border: 1px solid var(--xf-control-border);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--xf-surface) 78%, transparent);
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
+}
+.xf-tab:hover {
+  color: var(--xf-text);
+  border-color: var(--xf-line-strong);
+}
+.xf-tab.is-active {
+  color: var(--xf-text);
+  border-color: color-mix(in srgb, var(--xf-accent) 48%, var(--xf-line));
+  background: color-mix(in srgb, var(--xf-accent) 10%, transparent);
+}
+.xf-install-after {
+  max-width: 680px;
+  margin-top: 0.5rem;
+}
+.xf-install-after .xf-mini-label {
+  margin-bottom: 0.5rem;
+}
+
+/* ==========================================================================
+   DEMO GALLERY
+   ========================================================================== */
+
+.xf-gallery {
+  display: grid;
+  gap: var(--xf-space-4);
+}
+.xf-gallery-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--xf-space-3);
+}
+.xf-gallery-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-height: 24px;
+  color: var(--xf-accent);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  font-weight: 600;
+  text-decoration: none;
+}
+.xf-gallery-link:hover {
+  color: var(--xf-text);
+  text-decoration: underline;
+}
+.xf-gallery-panel {
+  min-width: 0;
+}
+.xf-gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--xf-space-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.xf-gallery-item {
+  min-width: 0;
+}
+.xf-gallery-item:last-child:nth-child(odd) {
+  grid-column: 1 / -1;
+}
+.xf-gallery-item figure {
+  display: grid;
+  gap: 0.5rem;
+  height: 100%;
+  margin: 0;
+  padding: 0.55rem;
+  border: 1px solid var(--xf-line);
+  border-radius: var(--xf-radius-sm);
+  background: color-mix(in srgb, var(--xf-surface) 80%, transparent);
+  box-shadow: var(--xf-shadow-soft);
+}
+.xf-gallery-media {
+  position: relative;
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+  border: 1px solid var(--xf-line);
+  border-radius: 9px;
+  background: #05070c;
+}
+.xf-gallery-media img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.xf-gallery-item figcaption {
+  color: var(--xf-muted);
+  font-size: var(--xf-text-xs);
+  line-height: 1.55;
+}
+
+/* ==========================================================================
+   FEATURES — bento
+   ========================================================================== */
+
+.xf-features {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 0.8rem;
+}
+.xf-feature {
+  position: relative;
+  grid-column: span 2;
+  display: flex;
+  flex-direction: column;
+  min-height: 11.5rem;
+  padding: 1.15rem 1.15rem 1.25rem;
+  overflow: hidden;
+  border: 1px solid var(--xf-line);
+  border-radius: var(--xf-radius);
+  background:
+    linear-gradient(150deg, color-mix(in srgb, var(--xf-surface-2) 74%, transparent), var(--xf-surface));
+  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+}
+.xf-feature:nth-child(1) {
+  grid-column: span 4;
+}
+.xf-feature:nth-child(6),
+.xf-feature:nth-child(7),
+.xf-feature:nth-child(8),
+.xf-feature:nth-child(9) {
+  grid-column: span 3;
+}
+.xf-feature::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--xf-accent) 70%, transparent), transparent);
+  opacity: 0;
+  transition: opacity 0.18s ease;
+}
+.xf-feature:hover {
+  transform: translateY(-3px);
+  border-color: color-mix(in srgb, var(--xf-accent) 36%, var(--xf-line));
+}
+.xf-feature:hover::before {
+  opacity: 1;
+}
+.xf-feature-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.7rem;
+  margin-bottom: 0.9rem;
+}
+.xf-feature-icon {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border: 1px solid color-mix(in srgb, var(--xf-accent) 32%, var(--xf-line));
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--xf-accent) 9%, transparent);
+  color: var(--xf-accent);
+}
+.xf-feature-num {
+  color: color-mix(in srgb, var(--xf-muted) 62%, transparent);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.08em;
+}
+.xf-feature h3 {
+  margin: 0 0 0.4rem;
+  font-size: 0.98rem;
+  font-weight: 650;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+}
+.xf-feature p {
+  margin: 0;
+  color: var(--xf-muted);
+  font-size: 0.8rem;
+  line-height: 1.62;
+}
+.xf-feature-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--xf-space-4);
+  margin: auto 0 0;
+  padding: var(--xf-space-4) 0 0;
+  border-top: 1px solid var(--xf-line);
+  list-style: none;
+}
+.xf-feature-stats li {
+  display: grid;
+  gap: 0.05rem;
+}
+.xf-feature-stats strong {
+  color: var(--xf-accent);
+  font-family: var(--font-mono);
+  font-size: 1.05rem;
+  font-weight: 700;
+  line-height: 1;
+}
+.xf-feature-stats span {
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+/* ==========================================================================
+   TERMINAL DEMO
+   ========================================================================== */
+
+.xf-split {
+  display: grid;
+  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
+  align-items: center;
+  gap: clamp(1.5rem, 4vw, 3.2rem);
+}
+.xf-terminal-copy .xf-sec-head {
+  margin-bottom: 1.5rem;
+}
+.xf-terminal-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.8rem;
+}
+.xf-term-window {
+  overflow: hidden;
+  border: 1px solid var(--xf-line-strong);
+  border-radius: 16px;
+  background: var(--xf-code-bg);
+  box-shadow: var(--xf-shadow);
+}
+.xf-terminal-scroll {
+  height: 33rem;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
+}
+.xf-terminal-scroll:focus-visible {
+  outline: 2px solid var(--xf-accent);
+  outline-offset: -2px;
+}
+.xf-terminal-pre {
+  min-height: 100%;
+  margin: 0;
+  padding: 0.95rem 1.1rem 1.3rem;
+  color: var(--xf-code-text);
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+  line-height: 1.68;
+  white-space: pre;
+}
+.xf-line-empty {
+  display: block;
+  height: 1.68em;
+}
+.xf-line-prompt {
+  display: block;
+  color: var(--xf-code-success);
+}
+.xf-line-prompt span {
+  margin-right: 0.15rem;
+}
+.xf-line-dim {
+  display: block;
+  color: var(--xf-code-muted);
+  font-size: 0.68rem;
+}
+.xf-line-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.xf-line-key {
+  min-width: 6.2rem;
+  color: var(--xf-code-key);
+}
+.xf-line-palette {
+  display: block;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+.xf-terminal-cursor {
+  margin-left: 0.3rem;
+  vertical-align: -0.08em;
+}
+
+/* ==========================================================================
+   SYSTEM MAP
+   ========================================================================== */
+
+.xf-map-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
+  align-items: start;
+  gap: clamp(1.2rem, 3vw, 2.2rem);
+}
+.xf-map-figure {
+  margin: 0;
+}
+.xf-map-canvas {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--xf-line);
+  border-radius: var(--xf-radius-lg);
+  background:
+    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--xf-cyan) 7%, transparent), transparent 55%),
+    linear-gradient(160deg, color-mix(in srgb, var(--xf-surface-2) 55%, transparent), var(--xf-surface));
+  aspect-ratio: 800 / 620;
+}
+.xf-map-svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.xf-map-connectors path {
+  fill: none;
+  stroke: var(--xf-cyan);
+  stroke-width: 1.2;
+  stroke-dasharray: 4 7;
+  opacity: 0.55;
+}
+.xf-map-top {
+  stroke: var(--xf-line-strong);
+  stroke-width: 1;
+}
+.xf-map-side {
+  stroke: var(--xf-line);
+  stroke-width: 1;
+}
+.xf-map-stop-top-a { stop-color: var(--xf-surface-2); }
+.xf-map-stop-top-b { stop-color: color-mix(in srgb, var(--xf-surface-2) 72%, var(--xf-cyan)); }
+.xf-map-stop-side-a { stop-color: color-mix(in srgb, var(--xf-surface) 82%, #000); }
+.xf-map-stop-side-b { stop-color: var(--xf-surface); }
+.xf-map-num {
+  fill: var(--xf-accent);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 700;
+}
+.xf-map-name {
+  fill: var(--xf-text);
+  font-family: var(--font-sans);
+  font-size: 16px;
+  font-weight: 650;
+}
+.xf-map-sub {
+  fill: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+.xf-map-plane-face {
+  stroke: color-mix(in srgb, var(--xf-violet) 55%, transparent);
+  stroke-width: 1.2;
+  stroke-dasharray: 5 5;
+}
+.xf-map-plane-edge {
+  fill: none;
+  stroke: color-mix(in srgb, var(--xf-violet) 42%, transparent);
+  stroke-width: 1.2;
+}
+.xf-map-plane-title {
+  fill: var(--xf-violet);
+  font-family: var(--font-mono);
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+.xf-map-plane-sub {
+  fill: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.xf-map-node {
+  fill: var(--xf-cyan);
+}
+.xf-map-node-label {
+  fill: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+.xf-map-hotspot {
+  position: absolute;
+  z-index: 2;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background: transparent;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease;
+}
+.xf-map-hotspot > span {
+  position: absolute;
+  top: 0.3rem;
+  right: 0.4rem;
+  color: var(--xf-accent);
+  font-family: var(--font-mono);
+  font-size: 0.55rem;
+  opacity: 0;
+  transition: opacity 0.16s ease;
+}
+.xf-map-hotspot:hover,
+.xf-map-hotspot:focus-visible,
+.xf-map-hotspot.is-active {
+  border-color: color-mix(in srgb, var(--xf-accent) 55%, transparent);
+  background: color-mix(in srgb, var(--xf-accent) 7%, transparent);
+}
+.xf-map-hotspot:hover > span,
+.xf-map-hotspot:focus-visible > span,
+.xf-map-hotspot.is-active > span {
+  opacity: 1;
+}
+.xf-map-figure figcaption {
+  padding: 0.7rem 0.2rem 0;
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  line-height: 1.6;
+}
+
+.xf-map-mobile-stack {
+  display: none;
+  gap: 0.4rem;
+  margin-top: var(--xf-space-3);
+}
+.xf-map-mobile-layer {
+  display: flex;
+  align-items: center;
+  gap: var(--xf-space-3);
+  width: 100%;
+  min-height: 52px;
+  padding: 0.65rem 0.75rem;
+  border: 1px solid var(--xf-control-border);
+  border-radius: 11px;
+  background: color-mix(in srgb, var(--xf-surface) 78%, transparent);
+  color: var(--xf-text);
+  text-align: left;
+  cursor: pointer;
+}
+.xf-map-mobile-layer:hover,
+.xf-map-mobile-layer.is-active {
+  border-color: color-mix(in srgb, var(--xf-accent) 55%, var(--xf-line));
+  background: color-mix(in srgb, var(--xf-accent) 8%, var(--xf-surface));
+}
+.xf-map-mobile-num {
+  color: var(--xf-accent);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  font-weight: 700;
+}
+.xf-map-mobile-text {
+  display: grid;
+  gap: 0.1rem;
+}
+.xf-map-mobile-text strong {
+  font-size: 0.88rem;
+  font-weight: 650;
+}
+.xf-map-mobile-text small {
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+}
+.xf-map-side {
+  display: grid;
+  gap: 0.85rem;
+}
+.xf-map-tabs {
+  display: grid;
+  gap: 0.22rem;
+}
+.xf-map-tab {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.55rem 0.7rem;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--xf-muted);
+  font-family: var(--font-sans);
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+.xf-map-tab:hover {
+  color: var(--xf-text);
+  background: color-mix(in srgb, var(--xf-surface-2) 60%, transparent);
+}
+.xf-map-tab.is-active {
+  color: var(--xf-text);
+  border-color: var(--xf-line);
+  background: color-mix(in srgb, var(--xf-surface-2) 78%, transparent);
+}
+.xf-map-tab-num {
+  color: var(--xf-accent);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+}
+.xf-map-detail {
+  min-height: 15rem;
+  padding: 1.1rem 1.15rem;
+  border-radius: 15px;
+}
+.xf-map-detail .xf-eyebrow {
+  margin-bottom: 0.4rem;
+}
+.xf-map-detail h3 {
+  margin: 0 0 0.55rem;
+  font-size: 1.1rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+.xf-map-detail p {
+  margin: 0;
+  color: var(--xf-muted);
+  font-size: 0.82rem;
+  line-height: 1.65;
+}
+.xf-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  margin: 0.85rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+.xf-tag-list li {
+  padding: 0.16rem 0.46rem;
+  border: 1px solid var(--xf-line);
+  border-radius: 999px;
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  line-height: 1.5;
+}
+
+/* ==========================================================================
+   MODULE EXPLORER
+   ========================================================================== */
+
+.xf-explorer {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto;
+  align-items: end;
+  gap: 0.9rem;
+  margin-bottom: 1.2rem;
+}
+.xf-explorer-search {
+  min-width: 0;
+}
+.xf-explorer-search .xf-mini-label {
+  display: block;
+  margin-bottom: 0.42rem;
+}
+.xf-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.55rem 0.65rem;
+  border: 1px solid var(--xf-control-border);
+  border-radius: 11px;
+  background: color-mix(in srgb, var(--xf-surface) 82%, transparent);
+  color: var(--xf-muted);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.xf-input-wrap:focus-within {
+  border-color: color-mix(in srgb, var(--xf-accent) 52%, var(--xf-line));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--xf-accent) 12%, transparent);
+}
+.xf-input-wrap > svg {
+  flex: none;
+  color: var(--xf-accent);
+}
+.xf-input-wrap input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: none;
+  color: var(--xf-text);
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  outline: none;
+}
+.xf-input-wrap input::placeholder {
+  color: var(--xf-muted);
+  opacity: 1;
+}
+.xf-input-wrap input[type="search"]::-webkit-search-cancel-button,
+.xf-input-wrap input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+.xf-input-clear {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--xf-muted);
+  cursor: pointer;
+}
+.xf-input-clear:hover {
+  color: var(--xf-accent);
+  background: color-mix(in srgb, var(--xf-accent) 10%, transparent);
+}
+.xf-filter-col .xf-mini-label {
+  display: block;
+  margin-bottom: 0.42rem;
+}
+.xf-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.28rem;
+}
+.xf-chip-btn {
+  display: inline-flex;
+  align-items: center;
+  min-height: 26px;
+  padding: 0.35rem 0.55rem;
+  border: 1px solid var(--xf-control-border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
+}
+.xf-chip-btn:hover {
+  color: var(--xf-text);
+  border-color: var(--xf-line-strong);
+}
+.xf-chip-btn.is-active {
+  color: var(--xf-text);
+  border-color: color-mix(in srgb, var(--xf-accent) 48%, var(--xf-line));
+  background: color-mix(in srgb, var(--xf-accent) 10%, transparent);
+}
+.xf-count {
+  margin: 0;
+  padding-bottom: 0.55rem;
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  white-space: nowrap;
+}
+.xf-count strong {
+  color: var(--xf-accent);
+  font-weight: 700;
+}
+
+.xf-module-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
+  gap: 0.6rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.xf-module {
+  display: flex;
+  gap: 0.7rem;
+  padding: 0.8rem 0.85rem;
+  border: 1px solid var(--xf-line);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--xf-surface) 78%, transparent);
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+.xf-module:hover {
+  border-color: color-mix(in srgb, var(--xf-accent) 34%, var(--xf-line));
+  background: var(--xf-surface);
+}
+.xf-module-icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--xf-line);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--xf-surface-2) 68%, transparent);
+  color: var(--xf-accent);
+}
+.xf-module-body {
+  min-width: 0;
+}
+.xf-module-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+.xf-module-head h3 {
+  margin: 0;
+  min-width: 0;
+}
+.xf-module-head code {
+  color: var(--xf-accent);
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+.xf-module-cat {
+  flex: none;
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.xf-module p {
+  margin: 0.18rem 0 0;
+  color: var(--xf-muted);
+  font-size: 0.74rem;
+  line-height: 1.5;
+}
+.xf-empty {
+  display: grid;
+  justify-items: start;
+  gap: 0.8rem;
+  margin-top: 1rem;
+  padding: 1.4rem;
+  border: 1px dashed var(--xf-line-strong);
+  border-radius: 14px;
+  color: var(--xf-muted);
+}
+.xf-empty p {
+  margin: 0;
+  font-size: 0.85rem;
+}
+
+/* ==========================================================================
+   LAYOUT EXPLORER
+   ========================================================================== */
+
+.xf-layout-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
+  align-items: start;
+  gap: 1.1rem;
+}
+.xf-layout-tabs {
+  display: grid;
+  gap: 0.25rem;
+}
+.xf-layout-tab {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.7rem;
+  width: 100%;
+  padding: 0.7rem 0.8rem;
+  border: 1px solid transparent;
+  border-radius: 11px;
+  background: transparent;
+  color: var(--xf-muted);
+  text-align: left;
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+.xf-layout-tab:hover {
+  color: var(--xf-text);
+  background: color-mix(in srgb, var(--xf-surface-2) 58%, transparent);
+}
+.xf-layout-tab.is-active {
+  border-color: color-mix(in srgb, var(--xf-accent) 38%, var(--xf-line));
+  background: color-mix(in srgb, var(--xf-accent) 7%, var(--xf-surface));
+}
+.xf-layout-tab-num {
+  flex: none;
+  padding-top: 0.08rem;
+  color: var(--xf-accent);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+}
+.xf-layout-tab-body {
+  display: grid;
+  gap: 0.15rem;
+  min-width: 0;
+}
+.xf-layout-tab-title {
+  color: var(--xf-text);
+  font-size: 0.82rem;
+  font-weight: 650;
+  line-height: 1.3;
+}
+.xf-layout-tab-desc {
+  color: var(--xf-muted);
+  font-size: var(--xf-text-xs);
+  line-height: 1.5;
+}
+.xf-layout-panel {
+  padding: 0.8rem;
+  border: 1px solid var(--xf-line);
+  border-radius: 16px;
+  background: var(--xf-surface);
+}
+.xf-layout-preview-wrap {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--xf-line);
+  border-radius: 11px;
+  background: var(--xf-code-bg);
+}
+.xf-layout-preview-label {
+  position: absolute;
+  right: 0.55rem;
+  bottom: 0.45rem;
+  color: var(--xf-code-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+}
+.xf-layout-code {
+  margin-top: 0.7rem;
+}
+.xf-layout-note {
+  margin: 0.65rem 0 0;
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  line-height: 1.6;
+}
+.xf-layout-note code {
+  color: var(--xf-accent);
+}
+
+/* layout skeletons */
+
+.xf-lp {
+  display: grid;
+  align-content: center;
+  min-height: 13.5rem;
+  padding: 1.1rem;
+  color: var(--xf-code-text);
+  font-family: var(--font-mono);
+  font-size: clamp(0.5rem, 0.82vw, 0.64rem);
+  line-height: 1.55;
+}
+.xf-lp span {
+  display: block;
+}
+.xf-lp i {
+  display: inline-block;
+  min-width: 3.3em;
+  color: var(--xf-code-key);
+  font-style: normal;
+}
+.xf-lp b {
+  color: var(--xf-code-text);
+  font-weight: 400;
+}
+.xf-lp--default {
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 1rem;
+  align-items: center;
+}
+.xf-lp-logo {
+  color: var(--xf-code-accent);
+  line-height: 1.08;
+  white-space: pre;
+}
+.xf-lp-logo--small {
+  font-size: 0.92em;
+}
+.xf-lp-rows {
+  display: grid;
+  gap: 0.24rem;
+}
+.xf-lp-rows span {
+  display: flex;
+  gap: 0.5rem;
+}
+.xf-lp-rows i {
+  min-width: 3em;
+}
+.xf-lp--pacman {
+  gap: 0.55rem;
+}
+.xf-lp-pacman {
+  border: 1px solid var(--xf-code-key);
+  border-radius: 4px;
+  padding: 0.6rem;
+}
+.xf-lp-pac-head {
+  color: var(--xf-code-accent);
+  text-align: center;
+  letter-spacing: 0.1em;
+}
+.xf-lp-pac-body {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0.8rem;
+  padding: 0.55rem 0;
+}
+.xf-lp-pac-foot {
+  color: var(--xf-code-key);
+  letter-spacing: 0.1em;
+  text-align: center;
+}
+.xf-lp--section .xf-lp-section {
+  display: grid;
+  gap: 0.26rem;
+}
+.xf-lp-sec-title {
+  color: var(--xf-code-accent);
+  letter-spacing: 0.04em;
+}
+.xf-lp--side-block .xf-lp-side {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.55rem;
+}
+.xf-lp-side-col {
+  display: grid;
+  gap: 0.24rem;
+  padding: 0.55rem;
+  border: 1px solid var(--xf-code-muted);
+  border-radius: 4px;
+}
+.xf-lp-side-col.is-values span {
+  color: var(--xf-code-text);
+}
+.xf-lp--tree .xf-lp-tree {
+  display: grid;
+  gap: 0.15rem;
+}
+.xf-lp-tree b {
+  color: var(--xf-code-accent);
+}
+.xf-lp-tree i {
+  color: var(--xf-code-key);
+  min-width: 0;
+}
+.xf-lp--box .xf-lp-box {
+  padding: 0.5rem;
+  border: 2px solid var(--xf-code-key);
+  border-radius: 8px;
+}
+.xf-lp-box-inner {
+  display: grid;
+  gap: 0.24rem;
+  padding: 0.6rem;
+  border: 1px solid var(--xf-code-muted);
+  border-radius: 4px;
+}
+
+/* ==========================================================================
+   CONFIG BUILDER
+   ========================================================================== */
+
+.xf-config-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+  align-items: start;
+  gap: 1.2rem;
+}
+.xf-config-controls {
+  display: grid;
+  gap: 0.90rem;
+}
+.xf-fieldset {
+  margin: 0;
+  padding: 0.9rem 1rem 1rem;
+  border: 1px solid var(--xf-line);
+  border-radius: 15px;
+  background: color-mix(in srgb, var(--xf-surface) 72%, transparent);
+}
+.xf-fieldset legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.5rem;
+  padding: 0 0.35rem;
+  color: var(--xf-text);
+  font-size: 0.8rem;
+  font-weight: 650;
+}
+.xf-fieldset-count {
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  font-weight: 400;
+}
+.xf-config-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  margin-bottom: 0.55rem;
+}
+.xf-link-btn {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0.1rem 0.15rem;
+  border: 0;
+  background: none;
+  color: var(--xf-accent);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+}
+.xf-link-btn:hover {
+  text-decoration: underline;
+}
+.xf-config-modules {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.12rem 0.4rem;
+}
+.xf-check {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.42rem;
+  min-height: 26px;
+  padding: 0.28rem 0.35rem;
+  border-radius: 7px;
+  cursor: pointer;
+  transition: background 0.14s ease;
+}
+.xf-check:hover {
+  background: color-mix(in srgb, var(--xf-surface-2) 68%, transparent);
+}
+.xf-check input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+.xf-check-box {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 15px;
+  height: 15px;
+  border: 1px solid var(--xf-control-border);
+  border-radius: 4px;
+  background: var(--xf-surface-2);
+  color: var(--xf-accent-ink);
+  transition: background 0.14s ease, border-color 0.14s ease;
+}
+.xf-check-box svg {
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+.xf-check input:checked + .xf-check-box {
+  border-color: var(--xf-accent);
+  background: var(--xf-accent);
+}
+.xf-check input:checked + .xf-check-box svg {
+  opacity: 1;
+}
+.xf-check input:focus-visible + .xf-check-box {
+  outline: 2px solid var(--xf-accent);
+  outline-offset: 3px;
+}
+.xf-check-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--xf-accent);
+}
+.xf-check code {
+  overflow: hidden;
+  color: var(--xf-text);
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  text-overflow: ellipsis;
+}
+.xf-select-field .xf-mini-label {
+  display: block;
+  margin-bottom: 0.42rem;
+}
+.xf-select-field select {
+  width: 100%;
+  padding: 0.6rem 0.7rem;
+  border: 1px solid var(--xf-control-border);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--xf-surface) 82%, transparent);
+  color: var(--xf-text);
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  cursor: pointer;
+}
+.xf-select-field select:hover {
+  border-color: var(--xf-line-strong);
+}
+.xf-config-output {
+  display: grid;
+  gap: 0.7rem;
+}
+.xf-config-code .xf-code-pre {
+  min-height: 18rem;
+}
+.xf-config-hint {
+  margin: 0.15rem 0 0;
+  color: var(--xf-muted);
+  font-size: 0.78rem;
+}
+
+/* ==========================================================================
+   PLUGINS + SANDBOX
+   ========================================================================== */
+
+.xf-plugin-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
+  align-items: start;
+  gap: clamp(1.2rem, 3vw, 2.2rem);
+}
+.xf-plugin-main {
+  display: grid;
+  gap: 0.85rem;
+}
+.xf-plugin-cards {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.6rem;
+}
+@media (min-width: 700px) {
+  .xf-plugin-cards {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+.xf-plugin-card {
+  padding: 0.9rem;
+  border: 1px solid var(--xf-line);
+  border-radius: 13px;
+  background: color-mix(in srgb, var(--xf-surface) 78%, transparent);
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+.xf-plugin-card:hover {
+  border-color: color-mix(in srgb, var(--xf-violet) 40%, var(--xf-line));
+  background: var(--xf-surface);
+}
+.xf-plugin-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+.xf-plugin-card h3 {
+  margin: 0;
+}
+.xf-plugin-card h3 code {
+  color: var(--xf-accent);
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+.xf-plugin-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--xf-violet);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--xf-violet) 16%, transparent);
+}
+.xf-plugin-card p {
+  margin: 0.38rem 0 0.65rem;
+  color: var(--xf-muted);
+  font-size: 0.75rem;
+  line-height: 1.55;
+}
+.xf-plugin-card .xf-tag-list {
+  margin: 0;
+}
+
+.xf-sandbox {
+  margin: 0;
+  padding: 0.8rem;
+  border: 1px solid var(--xf-line);
+  border-radius: var(--xf-radius-lg);
+  background:
+    radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--xf-violet) 11%, transparent), transparent 62%),
+    color-mix(in srgb, var(--xf-surface) 76%, transparent);
+}
+.xf-sandbox-svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.xf-orbit {
+  transform-box: view-box;
+  transform-origin: 260px 220px;
+  animation: xf-orbit 24s linear infinite;
+}
+.xf-orbit--b {
+  animation-duration: 19s;
+  animation-direction: reverse;
+}
+.xf-orbit--c {
+  animation-duration: 28s;
+}
+@keyframes xf-orbit {
+  to { transform: rotate(360deg); }
+}
+.xf-orbit-ring {
+  fill: none;
+  stroke: color-mix(in srgb, var(--xf-cyan) 38%, transparent);
+  stroke-width: 1;
+  stroke-dasharray: 3 7;
+}
+.xf-orbit-node {
+  fill: var(--xf-violet);
+}
+.xf-orbit-node.is-cyan { fill: var(--xf-cyan); }
+.xf-orbit-node.is-warm { fill: var(--xf-accent); }
+.xf-sandbox-face {
+  stroke: color-mix(in srgb, var(--xf-violet) 55%, var(--xf-line));
+  stroke-width: 1.1;
+}
+.xf-sandbox-top-a { stop-color: color-mix(in srgb, var(--xf-surface-2) 68%, var(--xf-violet)); }
+.xf-sandbox-top-b { stop-color: color-mix(in srgb, var(--xf-surface-2) 88%, var(--xf-cyan)); }
+.xf-sandbox-side-a { stop-color: color-mix(in srgb, var(--xf-surface) 84%, #000); }
+.xf-sandbox-side-b { stop-color: var(--xf-surface); }
+.xf-sandbox-title {
+  fill: var(--xf-text);
+  font-family: var(--font-mono);
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+}
+.xf-sandbox-sub {
+  fill: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+.xf-sandbox-caption {
+  fill: var(--xf-violet);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: 0.12em;
+}
+.xf-sandbox figcaption {
+  display: grid;
+  gap: 0.35rem;
+  padding: 0.35rem 0.35rem 0;
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  line-height: 1.6;
+}
+.xf-sandbox-legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+}
+.xf-sandbox-legend i {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  margin-left: 0.35rem;
+  border-radius: 50%;
+}
+.xf-sandbox-legend i:first-child {
+  margin-left: 0;
+}
+.xf-sandbox-legend .is-warm { background: var(--xf-accent); }
+.xf-sandbox-legend .is-cyan { background: var(--xf-cyan); }
+.xf-sandbox-legend .is-violet { background: var(--xf-violet); }
+.xf-sandbox-note {
+  color: var(--xf-muted);
+}
+.xf-capabilities {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.3rem;
+  margin: 0.7rem 0 0.2rem;
+  padding: 0;
+  list-style: none;
+}
+.xf-capabilities li {
+  padding: 0.28rem 0.5rem;
+  border: 1px solid var(--xf-line);
+  border-radius: 7px;
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  line-height: 1.45;
+}
+.xf-discovery {
+  margin: 1.4rem 0 0;
+  padding-top: 1rem;
+  border-top: 1px solid var(--xf-line);
+  color: var(--xf-muted);
+  font-size: 0.8rem;
+  line-height: 1.8;
+}
+.xf-discovery code {
+  padding: 0.08rem 0.3rem;
+  border: 1px solid var(--xf-line);
+  border-radius: 5px;
+  color: var(--xf-accent);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+}
+
+/* ==========================================================================
+   USAGE
+   ========================================================================== */
+
+.xf-usage {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
+  align-items: end;
+  gap: clamp(1.2rem, 4vw, 3rem);
+}
+.xf-usage .xf-sec-head {
+  margin-bottom: 0;
+}
+.xf-usage-code .xf-code-pre {
+  font-size: 0.95rem;
+}
+
+/* ==========================================================================
+   ROADMAP
+   ========================================================================== */
+
+.xf-roadmap-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin: -0.5rem 0 1.2rem;
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+}
+.xf-roadmap-legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.xf-roadmap-legend i {
+  width: 8px;
+  height: 8px;
+  border: 1px solid var(--xf-line-strong);
+  border-radius: 50%;
+}
+.xf-roadmap-legend .is-done {
+  background: var(--xf-success);
+  border-color: var(--xf-success);
+}
+.xf-roadmap-legend .is-partial {
+  background: var(--xf-warning);
+  border-color: var(--xf-warning);
+}
+.xf-timeline {
+  position: relative;
+  display: grid;
+  gap: 1.05rem;
+  margin: 0;
+  padding: 0 0 0 1.55rem;
+  border-left: 1px solid var(--xf-line);
+  list-style: none;
+}
+.xf-phase {
+  position: relative;
+}
+.xf-phase-marker {
+  position: absolute;
+  left: calc(-1.55rem - 5.5px);
+  top: 0.36rem;
+  width: 10px;
+  height: 10px;
+  border: 1px solid var(--xf-line-strong);
+  border-radius: 50%;
+  background: var(--xf-bg);
+}
+.xf-phase.is-done .xf-phase-marker {
+  border-color: var(--xf-success);
+  background: var(--xf-success);
+}
+.xf-phase.is-partial .xf-phase-marker {
+  border-color: var(--xf-warning);
+  background: var(--xf-warning);
+}
+.xf-phase-body {
+  padding: 0 0 0.15rem;
+}
+.xf-phase-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.4rem 0.8rem;
+}
+.xf-phase-head h3 {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 650;
+  line-height: 1.4;
+}
+.xf-status {
+  flex: none;
+  padding: 0.12rem 0.46rem;
+  border: 1px solid var(--xf-line);
+  border-radius: 999px;
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.xf-phase.is-done .xf-status {
+  color: var(--xf-success);
+  border-color: color-mix(in srgb, var(--xf-success) 40%, var(--xf-line));
+  background: color-mix(in srgb, var(--xf-success) 8%, transparent);
+}
+.xf-phase.is-partial .xf-status {
+  color: var(--xf-warning);
+  border-color: color-mix(in srgb, var(--xf-warning) 40%, var(--xf-line));
+  background: color-mix(in srgb, var(--xf-warning) 8%, transparent);
+}
+.xf-phase-body p {
+  margin: 0.28rem 0 0;
+  color: var(--xf-muted);
+  font-size: 0.78rem;
+  line-height: 1.6;
+}
+
+/* ==========================================================================
+   UNINSTALL
+   ========================================================================== */
+
+.xf-uninstall-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+.xf-subhead {
+  margin: 0 0 0.5rem;
+  font-size: 0.9rem;
+  font-weight: 650;
+}
+.xf-caution {
+  margin: 1rem 0 0;
+  color: var(--xf-muted);
+  font-size: 0.76rem;
+  line-height: 1.6;
+}
+.xf-caution code {
+  color: var(--xf-accent);
+  font-family: var(--font-mono);
+}
+
+/* ==========================================================================
+   FINAL CTA
+   ========================================================================== */
+
+.xf-cta {
+  position: relative;
+  overflow: hidden;
+  padding-block: clamp(4.5rem, 9vw, 8rem);
+  border-top: 1px solid var(--xf-line);
+  background:
+    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--xf-accent) 12%, transparent), transparent 58%),
+    var(--xf-bg);
+}
+.xf-cta-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(to right, var(--xf-grid-line) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--xf-grid-line) 1px, transparent 1px);
+  background-size: 42px 42px;
+  transform: perspective(600px) rotateX(55deg) translateY(35%);
+  transform-origin: bottom;
+  -webkit-mask-image: linear-gradient(to top, #000, transparent 72%);
+  mask-image: linear-gradient(to top, #000, transparent 72%);
+  opacity: 0.7;
+}
+.xf-cta-inner {
+  position: relative;
+  max-width: 780px;
+  text-align: center;
+}
+.xf-cta-inner h2 {
+  margin: 0;
+  font-size: clamp(2.2rem, 5vw, 3.7rem);
+  font-weight: 650;
+  line-height: 1.02;
+  letter-spacing: -0.045em;
+}
+.xf-cta-inner h2 span {
+  color: var(--xf-accent);
+}
+.xf-cta-lead {
+  max-width: 58ch;
+  margin: 1.1rem auto 0;
+  color: var(--xf-muted);
+  font-size: clamp(0.94rem, 1.2vw, 1.05rem);
+  line-height: 1.7;
+}
+.xf-cta-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.65rem;
+  margin-top: 1.6rem;
+}
+
+/* ==========================================================================
+   FOOTER
+   ========================================================================== */
+
+.xf-footer {
+  position: relative;
+  z-index: 1;
+  border-top: 1px solid var(--xf-line);
+  background: color-mix(in srgb, var(--xf-surface) 72%, var(--xf-bg));
+}
+.xf-footer-inner {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1.2rem 2rem;
+  padding-block: 2.2rem;
+}
+.xf-footer-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+}
+.xf-footer-mark {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: 1px solid color-mix(in srgb, var(--xf-accent) 50%, var(--xf-line));
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--xf-accent) 10%, transparent);
+  color: var(--xf-accent);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+.xf-footer-title {
+  margin: 0;
+  color: var(--xf-text);
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+.xf-footer-made {
+  margin: 0.1rem 0 0;
+  color: var(--xf-muted);
+  font-size: 0.72rem;
+}
+.xf-footer-made strong {
+  color: var(--xf-text);
+}
+.xf-footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.35rem 1.1rem;
+}
+.xf-footer-link {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  color: var(--xf-muted);
+  font-size: 0.74rem;
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+.xf-footer-link:hover {
+  color: var(--xf-accent);
+}
+.xf-footer-version {
+  margin: 0;
+  color: var(--xf-muted);
+  font-family: var(--font-mono);
+  font-size: var(--xf-text-xs);
+  text-align: right;
+  white-space: nowrap;
+}
+
+/* ==========================================================================
+   RESPONSIVE
+   ========================================================================== */
+
+@media (max-width: 1100px) {
+  .xf-map-grid,
+  .xf-plugin-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 1080px) {
+  .xf-nav-link {
+    font-size: 0.7rem;
+    padding-inline: 0.4rem;
+  }
+  .xf-hero-grid {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
+  }
+  .xf-explorer {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+  .xf-count {
+    grid-column: 1 / -1;
+    padding-bottom: 0;
+  }
+}
+
+@media (max-width: 920px) {
+  .xf-nav-links {
+    display: none;
+  }
+  .xf-menu-btn {
+    display: inline-grid;
+  }
+  .xf-nav-inner {
+    justify-content: space-between;
+  }
+  .xf-brand {
+    flex: 1;
+  }
+
+  .xf-hero-grid,
+  .xf-split,
+  .xf-map-grid,
+  .xf-layout-grid,
+  .xf-config-grid,
+  .xf-plugin-grid,
+  .xf-usage {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .xf-hero {
+    padding-top: 7.2rem;
+  }
+  .xf-hero-copy {
+    max-width: 46rem;
+  }
+  .xf-hero-visual {
+    max-width: 36rem;
+    margin-inline: auto;
+    width: 100%;
+  }
+  .xf-visual-stage {
+    aspect-ratio: 1 / 0.88;
+  }
+  .xf-features {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .xf-feature,
+  .xf-feature:nth-child(1),
+  .xf-feature:nth-child(2),
+  .xf-feature:nth-child(6),
+  .xf-feature:nth-child(7),
+  .xf-feature:nth-child(8),
+  .xf-feature:nth-child(9) {
+    grid-column: span 1;
+  }
+  .xf-feature:first-child {
+    grid-column: span 2;
+  }
+  .xf-usage {
+    align-items: start;
+  }
+  .xf-usage-code {
+    max-width: 26rem;
+  }
+  .xf-footer-inner {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  .xf-footer-links {
+    justify-content: flex-start;
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+  .xf-footer-version {
+    text-align: right;
+  }
+  .xf-map-side {
+    max-width: 48rem;
+  }
+  .xf-map-detail {
+    min-height: 0;
+  }
+}
+
+@media (max-width: 680px) {
+  .xf-bg-glow {
+    display: none;
+  }
+  .xf-gallery-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .xf-gallery-bar {
+    align-items: flex-start;
+  }
+  .xf-map-canvas {
+    display: none;
+  }
+  .xf-map-mobile-stack {
+    display: grid;
+  }
+  .xf-map-tabs {
+    display: none;
+  }
+  .xf-map-side {
+    max-width: none;
+  }
+  .xf-section {
+    padding-block: 3.3rem;
+  }
+  .xf-hero {
+    padding-top: 6.8rem;
+    padding-bottom: 3rem;
+  }
+  .xf-hero-title {
+    font-size: clamp(2.45rem, 10.5vw, 3.4rem);
+  }
+  .xf-hero-actions .xf-btn {
+    flex: 1 1 auto;
+  }
+  .xf-visual-stage {
+    min-height: 350px;
+  }
+  .xf-slab--back,
+  .xf-slab--mid {
+    display: none;
+  }
+  .xf-term-body {
+    gap: 0.7rem;
+    padding: 0.8rem;
+  }
+  .xf-term-logo {
+    font-size: 0.42rem;
+  }
+  .xf-term-row {
+    font-size: 0.52rem;
+  }
+  .xf-chip--tl,
+  .xf-chip--bl {
+    display: none;
+  }
+  .xf-chip--tr {
+    top: 1%;
+    right: 0;
+  }
+  .xf-chip--br {
+    bottom: 0;
+    right: 3%;
+  }
+  .xf-features {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .xf-feature,
+  .xf-feature:nth-child(1),
+  .xf-feature:nth-child(2),
+  .xf-feature:nth-child(6),
+  .xf-feature:nth-child(7),
+  .xf-feature:nth-child(8),
+  .xf-feature:nth-child(9) {
+    grid-column: span 1;
+    min-height: 0;
+  }
+  .xf-explorer {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .xf-count {
+    grid-column: auto;
+  }
+  .xf-config-modules {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .xf-uninstall-grid,
+  .xf-capabilities {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .xf-footer-inner {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1rem;
+  }
+  .xf-footer-links {
+    grid-column: auto;
+    grid-row: auto;
+  }
+  .xf-footer-version {
+    text-align: left;
+    white-space: normal;
+  }
+  .xf-terminal-pre {
+    font-size: 0.66rem;
+  }
+  .xf-lp {
+    min-height: 12rem;
+  }
+}
+
+@media (max-width: 440px) {
+  .xf-term-logo {
+    display: none;
+  }
+  .xf-term-body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .xf-facts {
+    gap: 0.3rem;
+  }
+  .xf-facts li {
+    font-size: var(--xf-text-xs);
+  }
+  .xf-nav-inner {
+    min-height: 54px;
+  }
+}
+
+/* ==========================================================================
+   MOTION / CONTRAST / TRANSPARENCY / FORCED COLORS
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+  .xf-js [data-reveal] {
+    opacity: 1;
+    translate: none;
+    transition: none;
+  }
+  .xf-chip,
+  .xf-orbit,
+  .xf-bg-drift,
+  .xf-term-cursor,
+  .xf-terminal-cursor {
+    animation: none !important;
+  }
+  .xf-iso {
+    transition: none;
+  }
+  .xf-feature:hover,
+  .xf-btn:hover,
+  .xf-module:hover,
+  .xf-layout-tab:hover {
+    transform: none;
+  }
+}
+
+@media (prefers-contrast: more) {
+  body .xf-nav .xf-nav-inner,
+  body .xf-nav.is-scrolled .xf-nav-inner,
+  .xf-glass {
+    background: var(--xf-surface);
+    border-color: var(--xf-text);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+  .xf-feature,
+  .xf-module,
+  .xf-plugin-card,
+  .xf-layout-panel,
+  .xf-code,
+  .xf-gallery-item figure,
+  .xf-fieldset,
+  .xf-sandbox,
+  .xf-map-canvas {
+    border-color: color-mix(in srgb, var(--xf-text) 55%, transparent);
+  }
+  .xf-nav-link.is-active,
+  .xf-nav-link:hover {
+    text-decoration: underline;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  body .xf-nav .xf-nav-inner,
+  body .xf-nav.is-scrolled .xf-nav-inner,
+  .xf-glass {
+    background: var(--xf-surface);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+  .xf-hero-plinth,
+  .xf-hero-glow,
+  .xf-bg-glow,
+  .xf-bg-noise {
+    display: none;
+  }
+}
+
+@media (forced-colors: active) {
+  body .xf-nav .xf-nav-inner,
+  body .xf-nav.is-scrolled .xf-nav-inner,
+  .xf-glass,
+  .xf-feature,
+  .xf-module,
+  .xf-plugin-card,
+  .xf-layout-panel,
+  .xf-fieldset,
+  .xf-sandbox,
+  .xf-map-canvas,
+  .xf-code,
+  .xf-gallery-item figure,
+  .xf-theme-toggle,
+  .xf-menu-btn,
+  .xf-btn,
+  .xf-chip,
+  .xf-tag-list li {
+    border: 1px solid CanvasText;
+  }
+  .xf-btn--primary {
+    background: ButtonFace;
+    color: ButtonText;
+  }
+  .xf-nav-progress span {
+    background: Highlight;
+  }
+  .xf-term-window,
+  .xf-code,
+  .xf-layout-preview-wrap {
+    background: Canvas;
+    color: CanvasText;
+  }
+  .xf-chip-btn.is-active,
+  .xf-nav-link.is-active,
+  .xf-map-tab.is-active,
+  .xf-layout-tab.is-active {
+    outline: 2px solid Highlight;
+  }
+}
+
+/* One stable toggle button, two icons. No hydration-dependent state. */
+.xf-theme-icon {
+  display: grid;
+  place-items: center;
+}
+html[data-theme="dark"] .xf-theme-icon--moon,
+html:not([data-theme="dark"]) .xf-theme-icon--sun {
+  display: none;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9e53dff..67cba07 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "@xscriptor/xcomponents/styles.css";
 import "./globals.css";
+import "./landing.css";
 import BgPaths from "@/components/BgPaths";
 import SiteNav from "@/components/SiteNav";
 
@@ -19,13 +19,16 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`} data-theme="dark" suppressHydrationWarning>
       <head>
         <script dangerouslySetInnerHTML={{
-          __html: `(function(){try{var t=localStorage.getItem("xfetch-theme");if(t==="light")document.documentElement.removeAttribute("data-theme")}catch(e){}})();`
+          __html: `(function(){try{document.documentElement.classList.add("xf-js");var t=localStorage.getItem("xfetch-theme");if(t==="light")document.documentElement.removeAttribute("data-theme")}catch(e){}})();`
         }} />
       </head>
       <body className="font-sans antialiased relative">
+        <a className="xf-skip" href="#content">
+          Skip to content
+        </a>
         <BgPaths />
         <SiteNav />
-        <div className="relative z-10">
+        <div id="content" className="relative z-10" tabIndex={-1}>
           {children}
         </div>
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0270039..a70eba5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,306 +1,41 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Hero from "@/components/Hero";
-import TerminalDemo from "@/components/TerminalDemo";
-import Features from "@/components/Features";
-import ModulesTable from "@/components/ModulesTable";
-import InstallTabs from "@/components/InstallTabs";
-import LayoutShowcase from "@/components/LayoutShowcase";
-import ConfigBuilder from "@/components/ConfigBuilder";
-import PluginSection from "@/components/PluginSection";
-import Roadmap from "@/components/Roadmap";
 import Footer from "@/components/Footer";
-
-const base = process.env.NEXT_PUBLIC_BASE_PATH || "";
-
-const FEATURES = [
-  { key: "sysinfo", icon: "sysinfo" as const },
-  { key: "crossplatform", icon: "crossplatform" as const },
-  { key: "layouts", icon: "layouts-icon" as const },
-  { key: "jsonc", icon: "jsonc" as const },
-  { key: "palette", icon: "palette-icon" as const },
-  { key: "plugins", icon: "plugins-icon" as const },
-  { key: "logoanim", icon: "logoanim" as const },
-  { key: "nerdfont", icon: "nerdfont" as const },
-  { key: "logos", icon: "logos-icon" as const },
-];
-
-const MODULES = [
-  { icon: "os" as const, name: "os", descKey: "Operating system name, version & architecture" },
-  { icon: "kernel" as const, name: "kernel", descKey: "Kernel version" },
-  { icon: "hostname" as const, name: "hostname", descKey: "Machine hostname" },
-  { icon: "uptime" as const, name: "uptime", descKey: "System uptime" },
-  { icon: "packages" as const, name: "packages", descKey: "Package count (pacman, dpkg, scoop, brew, etc.)" },
-  { icon: "shell" as const, name: "shell", descKey: "Current shell (bash, zsh, powershell)" },
-  { icon: "terminal-icon" as const, name: "terminal", descKey: "Terminal emulator" },
-  { icon: "wm" as const, name: "wm", descKey: "Window Manager / Desktop Environment" },
-  { icon: "cpu" as const, name: "cpu", descKey: "CPU model, cores & frequency" },
-  { icon: "gpu" as const, name: "gpu", descKey: "GPU model(s) — integrated & discrete" },
-  { icon: "memory" as const, name: "memory", descKey: "RAM used / total with percentage" },
-  { icon: "swap" as const, name: "swap", descKey: "Swap usage" },
-  { icon: "disk" as const, name: "disk", descKey: "Disk usage" },
-  { icon: "battery" as const, name: "battery", descKey: "Battery level & status (charging/discharging)" },
-  { icon: "user" as const, name: "user", descKey: "Current username" },
-  { icon: "datetime" as const, name: "datetime", descKey: "Current date & time" },
-  { icon: "local_ip" as const, name: "local_ip", descKey: "Local IP address" },
-  { icon: "palette-mod" as const, name: "palette", descKey: "ANSI color palette (squares, circles, triangles, lines)" },
-];
-
-const LAYOUTS = [
-  { titleKey: "Default (Classic)", descKey: "Logo on the left, info on the right. Clean and familiar.", code: '{\n  "layout": null\n}' },
-  { titleKey: "Pac-Man", descKey: "Boxed layout with Pac-Man header and footer. Fun and retro.", code: '{\n  "layout": "pacman"\n}' },
-  { titleKey: "Section", descKey: "Grouped modules with clear section headers.", code: '{\n  "layout": "section",\n  "modules": [\n    { "type": "group", "title": "Hardware",\n      "modules": ["cpu","gpu","memory"] },\n    { "type": "group", "title": "Software",\n      "modules": ["os","shell"] }\n  ]\n}' },
-  { titleKey: "Side Block", descKey: "Keys and values in separate side-by-side boxes.", code: '{\n  "layout": "side-block"\n}' },
-  { titleKey: "Tree", descKey: "Hierarchical tree with nested groups. Great for organizing.", code: '{\n  "layout": "tree",\n  "modules": [\n    { "type": "group", "title": "OS",\n      "modules": ["os","kernel","packages"] },\n    { "type": "group", "title": "PC",\n      "modules": ["cpu","gpu","memory"] }\n  ]\n}' },
-  { titleKey: "Box", descKey: "All info enclosed in a rounded box.", code: '{\n  "layout": "box"\n}' },
-];
-
-const INSTALL_TABS = [
-  { id: "linux", label: "Linux / macOS" },
-  { id: "windows", label: "Windows" },
-  { id: "source", label: "Build from source" },
-  { id: "arch", label: "Arch/X Linux" },
-];
-
-const INSTALL_CONTENT: Record<string, { lines: { text: string; comment: boolean }[] }> = {
-  linux: { lines: [
-    { text: "# One-liner (curl)", comment: true },
-    { text: "curl -fsSL https://raw.githubusercontent.com/xscriptor/xfetch/main/install.sh | bash", comment: false },
-    { text: "", comment: false },
-    { text: "# Custom prefix", comment: true },
-    { text: "bash <(curl -fsSL ...) --prefix /usr/local", comment: false },
-  ] },
-  windows: { lines: [
-    { text: "# PowerShell one-liner", comment: true },
-    { text: "irm https://raw.githubusercontent.com/xscriptor/xfetch/main/install.ps1 | iex", comment: false },
-  ] },
-  source: { lines: [
-    { text: "# Clone & build manually", comment: true },
-    { text: "git clone https://github.com/xscriptor/xfetch.git", comment: false },
-    { text: "cd xfetch", comment: false },
-    { text: "cargo build --release", comment: false },
-    { text: "", comment: false },
-    { text: "# Binary → target/release/xfetch", comment: true },
-    { text: "cp target/release/xfetch ~/.local/bin/", comment: false },
-    { text: "", comment: false },
-    { text: "# Config files", comment: true },
-    { text: "mkdir -p ~/.config/xfetch", comment: false },
-    { text: "cp configs/config.jsonc ~/.config/xfetch/config.jsonc", comment: false },
-  ] },
-  arch: { lines: [
-    { text: "# Using the PKGBUILD in the repo", comment: true },
-    { text: "git clone https://github.com/xscriptor/xfetch.git", comment: false },
-    { text: "cd xfetch", comment: false },
-    { text: "makepkg -si", comment: false },
-    { text: "", comment: false },
-    { text: "# Installed to /usr/bin/xfetch", comment: true },
-    { text: "pacman -R xfetch-git   # to uninstall", comment: false },
-  ] },
-};
-
-const ALL_MODULES = [
-  { value: "os", icon: "os" as const }, { value: "kernel", icon: "kernel" as const },
-  { value: "hostname", icon: "hostname" as const }, { value: "uptime", icon: "uptime" as const },
-  { value: "packages", icon: "packages" as const }, { value: "shell", icon: "shell" as const },
-  { value: "terminal", icon: "terminal-icon" as const }, { value: "wm", icon: "wm" as const },
-  { value: "cpu", icon: "cpu" as const }, { value: "gpu", icon: "gpu" as const },
-  { value: "memory", icon: "memory" as const }, { value: "disk", icon: "disk" as const },
-  { value: "battery", icon: "battery" as const }, { value: "local_ip", icon: "local_ip" as const },
-  { value: "palette", icon: "palette-mod" as const },
-];
-
-const LAYOUT_OPTIONS = [
-  { value: "null", label: "Default (classic)" },
-  { value: "pacman", label: "Pac-Man" },
-  { value: "box", label: "Box" },
-  { value: "section", label: "Section" },
-  { value: "tree", label: "Tree" },
-  { value: "side-block", label: "Side Block" },
-  { value: "line", label: "Line" },
-  { value: "dots", label: "Dots" },
-  { value: "bottom_line", label: "Bottom Line" },
-];
-
-const DEFAULT_MODULES = new Set(["os", "kernel", "uptime", "packages", "shell", "wm", "cpu", "gpu", "memory", "disk", "palette"]);
-
-const PLUGINS = [
-  { name: "animate-logo", desc: "Animates ASCII logos with multiple color effects via JSON protocol.", tags: ["sweep", "wave", "rainbow", "sparkle", "breathing", "frame"] },
-  { name: "github-stats", desc: "Fetches GitHub user stats via the public API.", tags: ["github", "api"] },
-  { name: "custom", desc: "Any executable reading JSON from stdin and writing JSON to stdout works.", tags: ["JSON protocol", "any language"] },
-];
-
-const PHASES = [
-  { title: "Phase 0-3 — Foundation & modules", desc: "Core system, all info modules, 20+ example configs, install scripts, layouts, documentation.", status: "done" },
-  { title: "Phase 4 — Package manager expansion", desc: "RPM, APK (Alpine), Nix, Homebrew, Chocolatey, multi-manager detection, performance optimization.", status: "done" },
-  { title: "Phase 5 — Network & connectivity", desc: "Local/public IP (with privacy toggle), IPv6, network interface display.", status: "done" },
-  { title: "Phase 6 — Enhanced modules", desc: "Music player (MPD), Spotify, weather, timezone, user info, display resolution, theme detection.", status: "done" },
-  { title: "Phase 7 — Additional layouts", desc: "Compact, horizontal, bottom, minimal (text-only), layout preview documentation.", status: "done" },
-  { title: "Phase 8 — Performance", desc: "Parallel probing, caching, lazy loading, benchmarking, profiling, modularized files.", status: "done" },
-  { title: "Phase 9 — CI/CD & distribution", desc: "GitHub Actions, macOS/Windows binaries, Homebrew tap, AUR, install scripts, changelog automation.", status: "done" },
-  { title: "Phase 10 — Community & ecosystem", desc: "Themes registry, plugin system, theme download manager, community contributions, theme preview tool.", status: "done" },
-  { title: "Phase 11 — Testing & QA", desc: "Unit/integration tests, clippy, rustfmt, platform-specific tests, cross-platform suite, coverage.", status: "partial" },
-  { title: "Phase 12 — Advanced features", desc: "Daemon mode, custom scripting, conditional modules, theme variables, telemetry (opt-in); pending: real-time stats in daemon mode, config hot-reload, animations, accessibility.", status: "partial" },
-  { title: "Phase 13 — Marketing", desc: "User manual, video tutorials, project website, blog posts, comparison guide, community channel.", status: "partial" },
-];
+import ConfigBuilder from "@/components/landing/ConfigBuilder";
+import DemoGallery from "@/components/landing/DemoGallery";
+import FeaturesSection from "@/components/landing/FeaturesSection";
+import FinalCta from "@/components/landing/FinalCta";
+import Hero from "@/components/landing/Hero";
+import InstallSection from "@/components/landing/InstallSection";
+import LandingEffects from "@/components/landing/LandingEffects";
+import LayoutExplorer from "@/components/landing/LayoutExplorer";
+import ModuleExplorer from "@/components/landing/ModuleExplorer";
+import PluginSection from "@/components/landing/PluginSection";
+import RoadmapSection from "@/components/landing/RoadmapSection";
+import SystemMap from "@/components/landing/SystemMap";
+import TerminalDemo from "@/components/landing/TerminalDemo";
+import UninstallSection from "@/components/landing/UninstallSection";
+import UsageSection from "@/components/landing/UsageSection";
 
 export default function Home() {
-  const [activeIdx, setActiveIdx] = useState(0);
-  const [seen, setSeen] = useState<Set<number>>(new Set([0]));
-  const [installTab, setInstallTab] = useState("linux");
-  const [selectedModules, setSelectedModules] = useState<Set<string>>(DEFAULT_MODULES);
-  const [configLayout, setConfigLayout] = useState("null");
-
-  useEffect(() => {
-    const sections = document.querySelectorAll<HTMLElement>("[data-stage]");
-    if (sections.length === 0) return;
-
-    const update = () => {
-      let pastCount = 0;
-      const nextSeen = new Set(seen);
-      sections.forEach((el, idx) => {
-        const rect = el.getBoundingClientRect();
-        if (rect.bottom <= 0) pastCount = idx + 1;
-        if (rect.top < window.innerHeight - 60) nextSeen.add(idx);
-      });
-      setActiveIdx(pastCount);
-      if (nextSeen.size !== seen.size) setSeen(nextSeen);
-    };
-
-    update();
-    const observer = new IntersectionObserver(update, { threshold: [0] });
-    sections.forEach((el) => observer.observe(el));
-    window.addEventListener("scroll", update, { passive: true });
-    return () => { observer.disconnect(); window.removeEventListener("scroll", update); };
-  }, [seen]);
-
-  const dim = (idx: number) => idx < activeIdx;
-  const visible = (idx: number) => seen.has(idx);
-
-  const toggleModule = (value: string) => {
-    const next = new Set(selectedModules);
-    if (next.has(value)) next.delete(value); else next.add(value);
-    setSelectedModules(next);
-  };
-
-  const configJson = [
-    "{",
-    configLayout !== "null" ? `  "layout": ${JSON.stringify(configLayout)},` : "",
-    '  "modules": [',
-    ALL_MODULES.filter((m) => selectedModules.has(m.value)).length
-      ? `    ${ALL_MODULES.filter((m) => selectedModules.has(m.value)).map((m) => JSON.stringify(m.value)).join(",\n    ")}`
-      : "",
-    "  ],",
-    '  "show_colors": true',
-    "}",
-  ].filter(Boolean).join("\n");
-
-  const sectionStyle = (idx: number): React.CSSProperties => {
-    const isDim = dim(idx);
-    const isVis = visible(idx);
-    return {
-      opacity: isVis ? (isDim ? 0.34 : 1) : 0,
-      filter: isDim ? "blur(6px) saturate(0.72) brightness(0.78)" : isVis ? "blur(0)" : "blur(8px)",
-      transform: isDim ? "scale(0.985)" : isVis ? "translateY(0)" : "translateY(2rem)",
-      transition: "opacity 0.55s ease, filter 0.55s ease, transform 0.55s ease",
-    };
-  };
-
   return (
-    <>
-      <div className="mx-auto flex min-h-screen w-full max-w-5xl flex-col px-6">
-        <div className="flex flex-col gap-[clamp(2.5rem,6vh,8rem)] pb-[clamp(2.5rem,6vh,8rem)]">
-          {/* STAGE 0 - Title/Header */}
-          <section data-stage={0} style={sectionStyle(0)}>
-            <Hero />
-          </section>
-
-          {/* STAGE 1 - Installation */}
-          <section id="install" data-stage={1} style={sectionStyle(1)}>
-            <InstallTabs tabs={INSTALL_TABS} content={INSTALL_CONTENT} installTab={installTab} setInstallTab={setInstallTab} />
-          </section>
-
-          {/* STAGE 2 - Video demo */}
-          <section data-stage={2} style={sectionStyle(2)}>
-            <div className="overflow-hidden rounded-xl border border-bg3/60">
-              <img
-                className="block h-auto w-full"
-                src={`${base}/previews/xfetch-demo.gif`}
-                alt="xfetch demo running in a terminal"
-                decoding="async"
-              />
-            </div>
-          </section>
-
-          {/* STAGE 3 - Features */}
-          <section id="features" data-stage={3} style={sectionStyle(3)}>
-            <Features features={FEATURES} />
-          </section>
-
-          {/* STAGE 4 - Terminal demo */}
-          <section id="terminal" data-stage={4} style={sectionStyle(4)}>
-            <TerminalDemo />
-          </section>
-
-          {/* STAGE 5 - Modules reference */}
-          <section id="modules" data-stage={5} style={sectionStyle(5)}>
-            <ModulesTable modules={MODULES} />
-          </section>
-
-          {/* STAGE 6 - Layout showcase */}
-          <section id="layouts" data-stage={6} style={sectionStyle(6)}>
-            <LayoutShowcase layouts={LAYOUTS} />
-          </section>
-
-          {/* STAGE 7 - Configuration builder */}
-          <section id="config" data-stage={7} style={sectionStyle(7)}>
-            <ConfigBuilder allModules={ALL_MODULES} selectedModules={selectedModules} toggleModule={toggleModule} configLayout={configLayout} setConfigLayout={setConfigLayout} configJson={configJson} layoutOptions={LAYOUT_OPTIONS} />
-          </section>
-
-          {/* STAGE 8 - Plugin system */}
-          <section id="plugins" data-stage={8} style={sectionStyle(8)}>
-            <PluginSection plugins={PLUGINS} />
-          </section>
-
-          {/* STAGE 9 - Usage */}
-          <section id="usage" data-stage={9} style={sectionStyle(9)}>
-            <div className="grid gap-3">
-              <h2 className="m-0 text-lg font-semibold">Usage</h2>
-              <p className="m-0 max-w-[68ch] text-fg2 leading-relaxed">Simply run xfetch in your terminal:</p>
-              <pre className="m-0 overflow-x-auto border border-bg3/60 bg-bg/90 p-4 font-mono text-sm leading-relaxed whitespace-pre-wrap break-words rounded-lg"><code>xfetch</code></pre>
-            </div>
-          </section>
-
-          {/* STAGE 10 - Roadmap */}
-          <section id="roadmap" data-stage={10} style={sectionStyle(10)}>
-            <Roadmap phases={PHASES} />
-          </section>
-
-          {/* STAGE 11 - Uninstall + Source link */}
-          <section data-stage={11} style={sectionStyle(11)}>
-            <div className="grid gap-3">
-              <h2 className="m-0 text-lg font-semibold">Uninstall</h2>
-              <h3 className="m-0 text-sm font-semibold text-fg2">Quick uninstall</h3>
-              <pre className="m-0 overflow-x-auto border border-bg3/60 bg-bg/90 p-4 font-mono text-sm leading-relaxed whitespace-pre-wrap break-words rounded-lg"><code>curl -fsSL https://raw.githubusercontent.com/xscriptor/xfetch/main/uninstall.sh | bash</code></pre>
-              <h3 className="m-0 text-sm font-semibold text-fg2">Manual uninstall</h3>
-              <pre className="m-0 overflow-x-auto border border-bg3/60 bg-bg/90 p-4 font-mono text-sm leading-relaxed whitespace-pre-wrap break-words rounded-lg"><code>{`rm ~/.local/bin/xfetch\nrm -rf ~/.config/xfetch`}</code></pre>
-            </div>
-            <div className="flex justify-center pt-2">
-              <a className="inline-flex items-center justify-center gap-2 min-h-[2.85rem] px-7 py-3 border border-accent text-bg bg-accent no-underline text-sm font-bold tracking-wide rounded-lg transition-all hover:opacity-90" href="https://github.com/xscriptor/xfetch" target="_blank" rel="noopener noreferrer">
-                <svg width="18" height="18" viewBox="0 0 24 25" fill="currentColor">
-                  <path d="M21.0346 5.82524C21.9445 6.91709 22.3994 8.19091 22.3994 9.64671C22.3994 14.924 19.3969 16.4707 16.5763 16.9257C16.9402 17.5626 17.0312 18.2905 17.0312 19.0184V22.7489C17.0312 23.2038 16.7582 23.4768 16.3943 23.4768C16.0303 23.4768 15.6664 23.2038 15.6664 22.7489V19.0184C15.7574 18.1995 15.4844 17.4716 14.9385 16.9257L15.3934 15.7428C18.214 15.3789 21.1256 14.469 21.1256 9.55572C21.1256 8.37289 20.6707 7.28104 19.8518 6.37117L19.6698 5.64327C20.0338 4.7334 20.0338 3.73254 19.7608 2.91365C19.3059 3.00464 18.396 3.18661 16.8492 4.27846L16.3033 4.36945C14.1196 3.82352 11.9359 3.82352 9.75222 4.36945L9.2063 4.27846C7.56853 3.2776 6.65866 3.00464 6.20372 3.00464C5.93076 3.91451 5.93076 4.91537 6.29471 5.73426L6.11274 6.46215C5.20286 7.37203 4.74793 8.55486 4.74793 9.64671C4.74793 14.469 7.47754 15.4699 10.4801 15.8338L10.8441 17.0167C10.2981 17.5626 10.0252 18.2905 10.1162 19.0184V19.9283V20.0192V22.8399C10.1162 23.2038 9.84321 23.5677 9.38828 23.5677C9.02433 23.5677 8.66038 23.2948 8.66038 22.8399V20.7471C5.6578 21.3841 4.47497 19.8373 3.5651 18.6544C3.11016 18.1085 2.74621 17.6536 2.29127 17.5626C2.20029 17.4716 1.92733 17.1077 2.01831 16.7437C2.1093 16.3798 2.47325 16.1068 2.8372 16.2888C3.74707 16.4707 4.29299 17.1986 4.83892 17.8356C5.6578 18.9274 6.47669 19.9283 8.93334 19.3823V19.0184C8.84235 18.2905 9.02433 17.5626 9.38828 16.9257C6.65866 16.3798 3.47411 14.833 3.47411 9.64671C3.47411 8.19091 3.92904 6.91709 4.83892 5.82524C4.56595 4.55142 4.65694 3.18661 5.11188 2.09477L5.56681 1.73082C5.74879 1.63983 7.02261 1.36687 9.66124 3.00464C11.8449 2.45872 14.1196 2.45872 16.3033 3.00464C18.8509 1.27588 20.2158 1.54884 20.3977 1.63983L20.8527 2.00378C21.3076 3.2776 21.3986 4.55142 21.0346 5.82524Z" />
-                  <g transform="translate(0 0) scale(1.5 1.5625)">
-                    <path d="M6 11 L7 11 L10 14 L9 14 Z" />
-                    <path d="M9 11 L10 11 L7 14 L6 14 Z" />
-                  </g>
-                </svg>
-                View Source Code
-              </a>
-            </div>
-          </section>
-        </div>
-        <Footer />
-      </div>
-    </>
+    <div className="xf-landing">
+      <LandingEffects />
+      <main>
+        <Hero />
+        <InstallSection />
+        <DemoGallery />
+        <FeaturesSection />
+        <TerminalDemo />
+        <SystemMap />
+        <ModuleExplorer />
+        <LayoutExplorer />
+        <ConfigBuilder />
+        <PluginSection />
+        <UsageSection />
+        <RoadmapSection />
+        <UninstallSection />
+        <FinalCta />
+      </main>
+      <Footer />
+    </div>
   );
 }
diff --git a/src/app/previews/page.tsx b/src/app/previews/page.tsx
index dc27497..0092a87 100644
--- a/src/app/previews/page.tsx
+++ b/src/app/previews/page.tsx
@@ -8,6 +8,19 @@ export const metadata: Metadata = {
 
 const base = process.env.NEXT_PUBLIC_BASE_PATH || "";
 
+const IMAGE_DIMENSIONS: Record<string, { width: number; height: number }> = {
+  "preview-linux-2.webp": { width: 971, height: 576 },
+  "preview-linux-3.webp": { width: 968, height: 591 },
+  "preview-linux-4.webp": { width: 960, height: 518 },
+  "preview-linux-5.webp": { width: 977, height: 549 },
+  "preview-linux-6.webp": { width: 1919, height: 1079 },
+  "macos-preview-2.webp": { width: 1272, height: 589 },
+  "macos-preview-3.webp": { width: 2048, height: 1332 },
+  "preview-windows-1.webp": { width: 2871, height: 1619 },
+  "preview-windows-2.webp": { width: 2871, height: 1619 },
+  "preview-windows-3.webp": { width: 2559, height: 1439 },
+};
+
 const LINUX_STILLS = [
   {
     src: "preview-linux-2.webp",
@@ -64,11 +77,15 @@ const WINDOWS_STILLS = [
 ];
 
 function PreviewImage({ src, alt }: { src: string; alt: string }) {
+  const dimensions = IMAGE_DIMENSIONS[src] ?? { width: 1200, height: 800 };
   return (
     <img
       src={`${base}/previews/${src}`}
       alt={alt}
+      width={dimensions.width}
+      height={dimensions.height}
       loading="lazy"
+      decoding="async"
       className="h-auto w-full rounded-lg border border-bg3/60 bg-bg/90"
     />
   );
@@ -103,6 +120,10 @@ export default function PreviewsPage() {
               <img
                 src={`${base}/previews/xfetch-demo.gif`}
                 alt="xfetch main demo"
+                width={1280}
+                height={720}
+                loading="lazy"
+                decoding="async"
                 className="block h-auto w-full"
               />
             </div>
@@ -120,6 +141,10 @@ export default function PreviewsPage() {
               <img
                 src={`${base}/previews/preview-linux-1.gif`}
                 alt="xfetch on Linux, animated demo"
+                width={800}
+                height={450}
+                loading="lazy"
+                decoding="async"
                 className="block h-auto w-full"
               />
             </div>
@@ -178,6 +203,10 @@ export default function PreviewsPage() {
               <img
                 src={`${base}/previews/macos-preview-1.gif`}
                 alt="xfetch on macOS, animated demo"
+                width={768}
+                height={432}
+                loading="lazy"
+                decoding="async"
                 className="block h-auto w-full"
               />
             </div>
diff --git a/src/components/BgPaths.tsx b/src/components/BgPaths.tsx
index 068fb9b..895093b 100644
--- a/src/components/BgPaths.tsx
+++ b/src/components/BgPaths.tsx
@@ -1,98 +1,54 @@
-"use client";
-
+/**
+ * Ambient background: a hairline engineering grid, two restrained glows and a
+ * few slowly drifting isometric curves. Pure CSS/SVG, theme-aware through the
+ * existing `bg-paths-*` visibility rules in globals.css, and motion is disabled
+ * by `prefers-reduced-motion` in landing.css.
+ */
 export default function BgPaths() {
   return (
-    <div className="fixed inset-0 z-0 pointer-events-none overflow-hidden">
-      <svg className="w-full h-full" fill="none" preserveAspectRatio="xMidYMid slice" viewBox="-2400 -800 4800 1600">
+    <div className="xf-bg" aria-hidden="true">
+      <div className="xf-bg-grid" />
+      <div className="xf-bg-glow xf-bg-glow--warm" />
+      <div className="xf-bg-glow xf-bg-glow--cool" />
+      <svg
+        className="xf-bg-lines"
+        viewBox="0 0 1600 1000"
+        fill="none"
+        preserveAspectRatio="xMidYMid slice"
+        focusable="false"
+      >
         <defs>
-          <linearGradient id="bgGradDark" x1="0%" x2="100%" y1="0%" y2="0%">
-            <stop offset="0%" stopColor="#fc618d" />
-            <stop offset="50%" stopColor="#948ae3" />
-            <stop offset="100%" stopColor="#5ad4e6" />
+          <linearGradient id="xfBgDark" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stopColor="#ffb27a" stopOpacity="0" />
+            <stop offset="42%" stopColor="#ffb27a" stopOpacity="0.55" />
+            <stop offset="70%" stopColor="#7dd3fc" stopOpacity="0.45" />
+            <stop offset="100%" stopColor="#a78bfa" stopOpacity="0" />
           </linearGradient>
-          <linearGradient id="bgGradLight" x1="0%" x2="100%" y1="0%" y2="0%">
-            <stop offset="0%" stopColor="#e85d7a" />
-            <stop offset="50%" stopColor="#7a6fc4" />
-            <stop offset="100%" stopColor="#4ab8c9" />
+          <linearGradient id="xfBgLight" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stopColor="#b85c2a" stopOpacity="0" />
+            <stop offset="45%" stopColor="#b85c2a" stopOpacity="0.4" />
+            <stop offset="72%" stopColor="#0e7490" stopOpacity="0.32" />
+            <stop offset="100%" stopColor="#6d28d9" stopOpacity="0" />
           </linearGradient>
         </defs>
-        <g className="bg-paths-dark" data-theme-vis="dark">
-          {Array.from({ length: 12 }).map((_, i) => (
-            <path
-              key={`pd-${i}`}
-              d={`M 2400 800 C 1200 ${400 - i * 30}, 600 ${1200 - i * 20}, -2400 ${-800 + i * 25}`}
-              stroke="url(#bgGradDark)"
-              strokeLinecap="round"
-              strokeWidth={4 + i * 0.3}
-              style={{ opacity: 0.15 + i * 0.02 }}
-            >
-              <animateTransform attributeName="transform" type="translate" values="0,0; 0,-15; 0,0" dur={`${8 + i * 0.2}s`} repeatCount="indefinite" />
-            </path>
-          ))}
-          {Array.from({ length: 15 }).map((_, i) => (
-            <path
-              key={`sd-${i}`}
-              d={`M 2400 900 C 1300 ${500 - i * 25}, 500 ${1300 - i * 15}, -2400 ${-700 + i * 20}`}
-              stroke="url(#bgGradDark)"
-              strokeLinecap="round"
-              strokeWidth={3 + i * 0.25}
-              style={{ opacity: 0.12 + i * 0.015 }}
-            >
-              <animateTransform attributeName="transform" type="translate" values="0,0; 0,-10; 0,0" dur={`${6 + i * 0.15}s`} repeatCount="indefinite" />
-            </path>
-          ))}
-          {Array.from({ length: 10 }).map((_, i) => (
-            <path
-              key={`ad-${i}`}
-              d={`M 2200 1000 C 1400 ${600 - i * 20}, 400 ${1400 - i * 10}, -2000 ${-600 + i * 30}`}
-              stroke="url(#bgGradDark)"
-              strokeLinecap="round"
-              strokeWidth={2 + i * 0.2}
-              style={{ opacity: 0.08 + i * 0.12 }}
-            >
-              <animateTransform attributeName="transform" type="translate" values="0,0; 0,-5; 0,0" dur={`${4 + i * 0.1}s`} repeatCount="indefinite" />
-            </path>
-          ))}
+
+        <g className="bg-paths-dark xf-bg-drift">
+          <path d="M-120 760 C 240 560 420 880 760 700 S 1260 420 1720 560" stroke="url(#xfBgDark)" strokeWidth="1.1" />
+          <path d="M-120 820 C 270 620 460 940 800 760 S 1300 480 1720 620" stroke="url(#xfBgDark)" strokeWidth="0.8" opacity="0.7" />
+          <path d="M-160 640 C 220 470 380 720 720 600 S 1200 330 1680 430" stroke="url(#xfBgDark)" strokeWidth="0.7" opacity="0.55" />
+          <path d="M260 1040 L 720 300 L 1180 1040" stroke="url(#xfBgDark)" strokeWidth="0.6" opacity="0.28" />
+          <path d="M520 1040 L 980 300 L 1440 1040" stroke="url(#xfBgDark)" strokeWidth="0.6" opacity="0.2" />
         </g>
-        <g className="bg-paths-light" data-theme-vis="light">
-          {Array.from({ length: 12 }).map((_, i) => (
-            <path
-              key={`pl-${i}`}
-              d={`M 2400 800 C 1200 ${400 - i * 30}, 600 ${1200 - i * 20}, -2400 ${-800 + i * 25}`}
-              stroke="url(#bgGradLight)"
-              strokeLinecap="round"
-              strokeWidth={4 + i * 0.3}
-              style={{ opacity: 0.08 + i * 0.015 }}
-            >
-              <animateTransform attributeName="transform" type="translate" values="0,0; 0,-15; 0,0" dur={`${8 + i * 0.2}s`} repeatCount="indefinite" />
-            </path>
-          ))}
-          {Array.from({ length: 15 }).map((_, i) => (
-            <path
-              key={`sl-${i}`}
-              d={`M 2400 900 C 1300 ${500 - i * 25}, 500 ${1300 - i * 15}, -2400 ${-700 + i * 20}`}
-              stroke="url(#bgGradLight)"
-              strokeLinecap="round"
-              strokeWidth={3 + i * 0.25}
-              style={{ opacity: 0.06 + i * 0.01 }}
-            >
-              <animateTransform attributeName="transform" type="translate" values="0,0; 0,-10; 0,0" dur={`${6 + i * 0.15}s`} repeatCount="indefinite" />
-            </path>
-          ))}
-          {Array.from({ length: 10 }).map((_, i) => (
-            <path
-              key={`al-${i}`}
-              d={`M 2200 1000 C 1400 ${600 - i * 20}, 400 ${1400 - i * 10}, -2000 ${-600 + i * 30}`}
-              stroke="url(#bgGradLight)"
-              strokeLinecap="round"
-              strokeWidth={2 + i * 0.2}
-              style={{ opacity: 0.04 + i * 0.08 }}
-            >
-              <animateTransform attributeName="transform" type="translate" values="0,0; 0,-5; 0,0" dur={`${4 + i * 0.1}s`} repeatCount="indefinite" />
-            </path>
-          ))}
+
+        <g className="bg-paths-light xf-bg-drift">
+          <path d="M-120 760 C 240 560 420 880 760 700 S 1260 420 1720 560" stroke="url(#xfBgLight)" strokeWidth="1.1" />
+          <path d="M-120 820 C 270 620 460 940 800 760 S 1300 480 1720 620" stroke="url(#xfBgLight)" strokeWidth="0.8" opacity="0.6" />
+          <path d="M-160 640 C 220 470 380 720 720 600 S 1200 330 1680 430" stroke="url(#xfBgLight)" strokeWidth="0.7" opacity="0.5" />
+          <path d="M260 1040 L 720 300 L 1180 1040" stroke="url(#xfBgLight)" strokeWidth="0.6" opacity="0.22" />
+          <path d="M520 1040 L 980 300 L 1440 1040" stroke="url(#xfBgLight)" strokeWidth="0.6" opacity="0.16" />
         </g>
       </svg>
+      <div className="xf-bg-noise" />
     </div>
   );
 }
diff --git a/src/components/ConfigBuilder.tsx b/src/components/ConfigBuilder.tsx
deleted file mode 100644
index c39be14..0000000
--- a/src/components/ConfigBuilder.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-
-import { renderModuleIcon } from "./Icons";
-
-export default function ConfigBuilder({
-  allModules, selectedModules, toggleModule, configLayout, setConfigLayout, configJson, layoutOptions,
-}: {
-  allModules: { value: string; icon: string }[];
-  selectedModules: Set<string>;
-  toggleModule: (v: string) => void;
-  configLayout: string;
-  setConfigLayout: (v: string) => void;
-  configJson: string;
-  layoutOptions: { value: string; label: string }[];
-}) {
-  return (
-    <div className="grid gap-3">
-      <h2 className="m-0 text-lg font-semibold">Configuration</h2>
-      <p className="m-0 max-w-[68ch] text-fg2 leading-relaxed">Toggle modules and pick a layout to generate a config.jsonc.</p>
-      <div className="grid gap-4 md:grid-cols-2">
-        <div className="grid gap-2 content-start">
-          <p className="m-0 text-sm font-semibold text-fg2">Modules</p>
-          <div className="grid gap-[0.2rem]">
-            {allModules.map((m) => (
-              <label key={m.value} className="flex items-center gap-[0.4rem] px-2 py-[0.25rem] text-sm rounded-md cursor-pointer transition-colors hover:bg-bg/85">
-                <input type="checkbox" checked={selectedModules.has(m.value)} onChange={() => toggleModule(m.value)}
-                  className="appearance-none w-[0.85rem] h-[0.85rem] border border-bg3/70 rounded-sm bg-bg/86 cursor-pointer inline-flex items-center justify-center transition-all checked:bg-accent checked:border-accent [&:checked::after]:content-['✓'] [&:checked::after]:text-[0.6rem] [&:checked::after]:text-bg [&:checked::after]:font-bold" />
-                <span className="inline-flex text-accent">{renderModuleIcon(m.icon, 16)}</span>
-                <code className="font-mono text-sm text-accent">{m.value}</code>
-              </label>
-            ))}
-          </div>
-          <p className="m-0 text-sm font-semibold text-fg2">Layout</p>
-          <select value={configLayout} onChange={(e) => setConfigLayout(e.target.value)}
-            className="w-full px-[0.6rem] py-[0.45rem] border border-bg3/60 rounded-md bg-bg/86 text-fg font-mono text-sm cursor-pointer transition-colors hover:border-accent/40">
-            {layoutOptions.map((o) => (
-              <option key={o.value} value={o.value}>{o.label}</option>
-            ))}
-          </select>
-        </div>
-        <div className="grid gap-2 content-start">
-          <p className="m-0 text-sm font-semibold text-fg2">Generated config.jsonc</p>
-          <pre className="m-0 overflow-x-auto border border-bg3/60 bg-bg/86 p-4 font-mono text-sm leading-relaxed whitespace-pre-wrap break-words rounded-lg min-h-[280px]"><code>{configJson}</code></pre>
-        </div>
-      </div>
-      <p className="m-0 max-w-[68ch] text-fg2 leading-relaxed">Use a custom config file:</p>
-      <pre className="m-0 overflow-x-auto border border-bg3/60 bg-bg/86 p-4 font-mono text-sm leading-relaxed whitespace-pre-wrap break-words rounded-lg"><code>xfetch --config path/to/my_config.jsonc</code></pre>
-    </div>
-  );
-}
diff --git a/src/components/Features.tsx b/src/components/Features.tsx
deleted file mode 100644
index 74e5e81..0000000
--- a/src/components/Features.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { renderFeatureIcon } from "./Icons";
-
-const FEATURE_TEXT: Record<string, { title: string; desc: string }> = {
-  sysinfo: { title: "System information", desc: "OS, kernel, CPU, GPU, memory, disk, battery, uptime, packages, shell, terminal, WM/DE and more." },
-  crossplatform: { title: "Cross-platform", desc: "Works on Linux, Windows, and macOS. Same tool, same config — everywhere." },
-  layouts: { title: "Multiple layouts", desc: "Classic side-by-side, Pac-Man, tree, section, side-block, box, lines, dots, and bottom-line." },
-  jsonc: { title: "JSONC config", desc: "Full customization via config.jsonc — modules, icons, colors, logos, and layouts." },
-  palette: { title: "Color palette", desc: "Built-in ANSI color palette display with square, circle, triangle, and line styles." },
-  plugins: { title: "Plugin system", desc: "Extend with external plugins via JSON over stdin/stdout. Animate logos, fetch GitHub stats, and more." },
-  logoanim: { title: "Logo animation", desc: "Animate ASCII logos with sweep, wave, rainbow, sparkle, breathing, and frame-by-frame styles." },
-  nerdfont: { title: "NERD Font icons", desc: "Customizable Nerd Font icons per module. Use emojis, text, or any Unicode glyph." },
-  logos: { title: "ASCII & image logos", desc: "Display text logos with ANSI colors or image files (png, jpg, svg) via viuer." },
-};
-
-export default function Features({ features }: { features: { key: string; icon: string }[] }) {
-  return (
-    <div className="grid gap-3">
-      <h2 className="m-0 text-lg font-semibold">Features</h2>
-      <p className="m-0 max-w-[68ch] text-fg2 leading-relaxed">From OS detection to animated ASCII art — xfetch packs a punch in a single binary.</p>
-      <div className="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-3">
-        {features.map((f) => {
-          const t = FEATURE_TEXT[f.key];
-          return (
-            <div key={f.key} className="grid gap-1.5 rounded-lg border border-bg3/60 bg-bg/90 p-4 transition-all hover:border-accent/40">
-              <span className="text-lg leading-none text-accent">{renderFeatureIcon(f.icon, 20)}</span>
-              <h3 className="m-0 text-sm font-semibold">{t.title}</h3>
-              <p className="m-0 text-xs leading-relaxed text-fg2">{t.desc}</p>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 0731184..89f28d0 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,19 +1,48 @@
+import { REPO_URL, VERSION } from "@/components/landing/links";
+
+const LINKS = [
+  { href: REPO_URL, label: "GitHub" },
+  { href: "https://dev.xscriptor.com", label: "Dev" },
+  { href: "https://www.xscriptor.com", label: "Xscriptor" },
+  { href: `${REPO_URL}/blob/main/LICENSE`, label: "MIT License" },
+  { href: `${REPO_URL}/blob/main/CONTRIBUTING.md`, label: "Contributing" },
+];
+
 export default function Footer() {
   return (
-    <footer className="border-t border-bg3/60 px-6 py-16 text-center">
-      <p className="text-sm text-fg2">Made with Rust & passion by <strong className="text-fg">X</strong></p>
-      <div className="mt-5 flex flex-wrap justify-center gap-5 text-sm">
-        {[
-          { href: "https://github.com/xscriptor/xfetch", label: "GitHub" },
-          { href: "https://dev.xscriptor.com", label: "Dev" },
-          { href: "https://www.xscriptor.com", label: "Xscriptor" },
-          { href: "https://github.com/xscriptor/xfetch/blob/main/LICENSE", label: "MIT License" },
-          { href: "https://github.com/xscriptor/xfetch/blob/main/CONTRIBUTING.md", label: "Contributing" },
-        ].map((link) => (
-          <a key={link.label} href={link.href} target="_blank" rel="noopener noreferrer" className="text-fg2 transition-colors hover:text-accent">{link.label}</a>
-        ))}
+    <footer className="xf-footer">
+      <div className="xf-container xf-footer-inner">
+        <div className="xf-footer-brand">
+          <span className="xf-footer-mark" aria-hidden="true">
+            xf
+          </span>
+          <div>
+            <p className="xf-footer-title">xfetch</p>
+            <p className="xf-footer-made">
+              Made with Rust &amp; passion by <strong>X</strong>
+            </p>
+          </div>
+        </div>
+
+        <nav className="xf-footer-links" aria-label="Footer navigation">
+          {LINKS.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="xf-footer-link"
+            >
+              {link.label}
+            </a>
+          ))}
+          <a className="xf-footer-link" href="#content">
+            Back to top
+          </a>
+        </nav>
+
+        <p className="xf-footer-version">xfetch v{VERSION} — Rust 2024 edition</p>
       </div>
-      <p className="mt-6 text-xs text-fg2/60">xfetch v0.8.0 — Rust 2024 edition</p>
     </footer>
   );
 }
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
deleted file mode 100644
index 1a80c36..0000000
--- a/src/components/Hero.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-"use client";
-
-export default function Hero() {
-  return (
-    <header className="mx-auto grid w-full max-w-5xl gap-3 px-6 pt-16 pb-0">
-      <div className="flex justify-center">
-        {/* eslint-disable-next-line @next/next/no-img-element -- remote SVG banner; next/image requires remotePatterns + dangerouslyAllowSVG */}
-        <img
-          src="https://raw.githubusercontent.com/xfetch-cli/assets/main/logo/banner/xfetch.svg"
-          alt="xfetch banner"
-          className="w-full max-w-[30rem] h-auto"
-        />
-      </div>
-      <p className="max-w-[68ch] text-fg2 leading-relaxed text-center mx-auto italic">
-        A cross-platform system information fetching tool written in Rust.
-      </p>
-    </header>
-  );
-}
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
index 0f66953..604c432 100644
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -126,7 +126,7 @@ export function IconXLogo(props: Props) {
 }
 
 export function IconGithub(props: Props) {
-  return <svg {...{ ...s(props, 18), viewBox: "0 0 24 24" }}><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" fill="currentColor" /></svg>;
+  return <svg aria-hidden="true" {...{ ...s(props, 18), viewBox: "0 0 24 24" }}><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" fill="currentColor" /></svg>;
 }
 
 const featureIconMap: Record<string, React.FC<Props>> = {
diff --git a/src/components/InstallTabs.tsx b/src/components/InstallTabs.tsx
deleted file mode 100644
index 1782816..0000000
--- a/src/components/InstallTabs.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-"use client";
-
-import { useRef, useState, useCallback } from "react";
-
-function CopyBtn({ getText }: { getText: () => string }) {
-  const [copied, setCopied] = useState(false);
-
-  const copy = useCallback(() => {
-    navigator.clipboard.writeText(getText()).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1200);
-    }).catch(() => {});
-  }, [getText]);
-
-  return (
-    <button onClick={copy} aria-label="Copy to clipboard"
-      className="absolute top-2 right-2 p-1.5 rounded-md border border-bg3/50 bg-bg/80 text-fg2/60 opacity-60 transition-all hover:bg-bg hover:text-fg hover:opacity-100 cursor-pointer"
-    >
-      {copied ? (
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <polyline points="20 6 9 17 4 12" />
-        </svg>
-      ) : (
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-        </svg>
-      )}
-    </button>
-  );
-}
-
-function PreBlock({ children, className = "" }: { children: React.ReactNode; className?: string }) {
-  const ref = useRef<HTMLPreElement>(null);
-  const getText = useCallback(() => ref.current?.textContent ?? "", []);
-
-  return (
-    <pre ref={ref}
-      className={`group relative m-0 overflow-x-auto border border-bg3/60 bg-bg/86 p-4 font-mono text-sm leading-relaxed whitespace-pre-wrap break-words ${className}`}
-    >
-      <CopyBtn getText={getText} />
-      {children}
-    </pre>
-  );
-}
-
-export default function InstallTabs({
-  tabs, content, installTab, setInstallTab,
-}: {
-  tabs: { id: string; label: string }[];
-  content: Record<string, { lines: { text: string; comment: boolean }[] }>;
-  installTab: string;
-  setInstallTab: (v: string) => void;
-}) {
-  return (
-    <div className="grid gap-3">
-      <h2 className="m-0 text-lg font-semibold">Installation</h2>
-      <p className="m-0 max-w-[68ch] text-fg2 leading-relaxed">Choose your platform. The quick installer handles everything — including Rust setup if needed.</p>
-      <div className="flex flex-wrap gap-[0.15rem]">
-        {tabs.map((tab) => (
-          <button key={tab.id} onClick={() => setInstallTab(tab.id)}
-            className={`px-3 py-[0.4rem] font-mono text-xs border border-bg3/60 border-b-0 rounded-t-md bg-bg/92 text-fg2 cursor-pointer transition-all hover:bg-bg/85 hover:text-fg ${installTab === tab.id ? "bg-bg/86 text-fg font-semibold border-bg3/60" : ""}`}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </div>
-      <PreBlock className="rounded-b-lg rounded-tr-lg">
-        <code>{content[installTab].lines.map((line, i) => (
-          <span key={i} className={line.comment ? "text-fg2/60" : ""}>{line.text}{"\n"}</span>
-        ))}</code>
-      </PreBlock>
-      <div className="grid gap-2">
-        <p className="m-0 max-w-[68ch] text-fg2 leading-relaxed">After install, just run:</p>
-        <PreBlock className="rounded-lg">
-          <code><span className="text-[#78dba9]">$</span> xfetch{"\n"}<span className="text-[#78dba9]">$</span> xfetch --version{"\n"}<span className="text-[#78dba9]">$</span> xfetch --gen-config</code>
-        </PreBlock>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/LayoutShowcase.tsx b/src/components/LayoutShowcase.tsx
deleted file mode 100644
index bd461ab..0000000
--- a/src/components/LayoutShowcase.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-export default function LayoutShowcase({ layouts }: { layouts: { titleKey: string; descKey: string; code: string }[] }) {
-  return (
-    <div className="grid gap-3">
-      <h2 className="m-0 text-lg font-semibold">Layout showcase</h2>
-      <p className="m-0 max-w-[68ch] text-fg2 leading-relaxed">xfetch ships with 9 built-in layouts. Each has a distinct visual style for different preferences.</p>
-      <div className="grid grid-cols-[repeat(auto-fill,minmax(18rem,1fr))] gap-3">
-        {layouts.map((l) => (
-          <div key={l.titleKey} className="grid gap-0 border border-bg3/60 rounded-lg overflow-hidden bg-bg/90 transition-all hover:border-accent/40">
-            <pre className="m-0 border-0 border-b border-bg3/40 bg-bg/94 p-4 font-mono text-xs leading-relaxed whitespace-pre-wrap break-words rounded-none"><code>{l.code}</code></pre>
-            <div className="grid gap-1 p-[0.65rem_0.75rem_0.75rem]">
-              <h4 className="m-0 text-sm font-semibold">{l.titleKey}</h4>
-              <p className="m-0 text-xs text-fg2 leading-relaxed">{l.descKey}</p>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/ModulesTable.tsx b/src/components/ModulesTable.tsx
deleted file mode 100644
index 445a196..0000000
--- a/src/components/ModulesTable.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { renderModuleIcon } from "./Icons";
-
-export default function ModulesTable({ modules }: { modules: { icon: string; name: string; descKey: string }[] }) {
-  return (
-    <div className="grid gap-3">
-      <h2 className="m-0 text-lg font-semibold">Available modules</h2>
-      <p className="m-0 max-w-[68ch] text-fg2 leading-relaxed">Every piece of information xfetch can display. Mix, match, and reorder them in your config.</p>
-      <div className="grid gap-1">
-        {modules.map((m) => (
-          <div key={m.name} className="grid grid-cols-[1.8rem_9rem_1fr] gap-2 items-center rounded-md border border-bg3/40 bg-bg/92 p-[0.35rem_0.6rem] min-w-0">
-            <span className="text-base text-center leading-none">{renderModuleIcon(m.icon, 16)}</span>
-            <code className="overflow-hidden text-ellipsis font-mono text-sm text-accent">{m.name}</code>
-            <span className="overflow-hidden text-ellipsis whitespace-nowrap text-xs text-fg2">{m.descKey}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/PluginSection.tsx b/src/components/PluginSection.tsx
deleted file mode 100644
index f280156..0000000
--- a/src/components/PluginSection.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-export default function PluginSection({ plugins }: { plugins: { name: string; desc: string; tags: string[] }[] }) {
-  return (
-    <div className="grid gap-3">
-      <h2 className="m-0 text-lg font-semibold">Plugin system</h2>
-      <p className="m-0 max-w-[68ch] text-fg2 leading-relaxed">xfetch communicates with external plugins via JSON over stdin/stdout. Install, list, and remove plugins with simple CLI commands.</p>
-      <pre className="m-0 overflow-x-auto border border-bg3/60 bg-bg/86 p-4 font-mono text-sm leading-relaxed whitespace-pre-wrap break-words rounded-lg">
-        <code>
-          <span className="text-fg2/60"># Install from local path</span>{"\n"}
-          xfetch plugin install ./plugins/animate-logo{"\n\n"}
-          <span className="text-fg2/60"># List installed</span>{"\n"}
-          xfetch plugin list{"\n\n"}
-          <span className="text-fg2/60"># Remove</span>{"\n"}
-          xfetch plugin remove animate-logo
-        </code>
-      </pre>
-      <div className="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3">
-        {plugins.map((p) => (
-          <div key={p.name} className="grid gap-[0.4rem] p-[0.85rem] rounded-lg border border-bg3/60 bg-bg/90">
-            <h4 className="m-0 font-mono text-sm text-accent font-semibold">{p.name}</h4>
-            <p className="m-0 text-xs text-fg2 leading-relaxed">{p.desc}</p>
-            <div className="flex flex-wrap gap-[0.3rem] mt-[0.2rem]">
-              {p.tags.map((tag) => (
-                <span key={tag} className="inline-block px-[0.4rem] py-[0.15rem] font-mono text-[0.65rem] rounded-md bg-bg/88 border border-bg3/50 text-fg2">{tag}</span>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-      <p className="m-0 max-w-[68ch] text-fg2 leading-relaxed">Plugin discovery: explicit path → <code className="text-accent">xfetch-plugin-&lt;name&gt;</code> in PATH → <code className="text-accent">~/.config/xfetch/plugins/</code> → <code className="text-accent">./plugins/&lt;name&gt;/target/release</code></p>
-    </div>
-  );
-}
diff --git a/src/components/Roadmap.tsx b/src/components/Roadmap.tsx
deleted file mode 100644
index ccbb602..0000000
--- a/src/components/Roadmap.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-export default function Roadmap({ phases }: { phases: { title: string; desc: string; status: string }[] }) {
-  return (
-    <div className="grid gap-3">
-      <h2 className="m-0 text-lg font-semibold">Roadmap</h2>
-      <p className="m-0 max-w-[68ch] text-fg2 leading-relaxed">What&apos;s next for xfetch — from real-time stats in daemon mode to config hot-reload. Contributions welcome!</p>
-      <div className="grid gap-4 pl-5 border-l-2 border-bg3/60">
-        {phases.map((p, i) => (
-          <div key={i} className="grid grid-cols-[0.75rem_1fr] gap-3 relative">
-            <div className={`w-[0.65rem] h-[0.65rem] rounded-full border-2 mt-[0.3rem] ${p.status === "done" ? "border-[#78dba9] bg-[#78dba9]" : p.status === "partial" ? "border-[#ffcb6b] bg-[#ffcb6b]" : "border-bg3/70 bg-bg"}`} />
-            <div className="grid gap-1">
-              <h4 className="m-0 text-sm font-semibold">{p.title}</h4>
-              <p className="m-0 text-xs text-fg2 leading-relaxed">{p.desc}</p>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/SiteNav.tsx b/src/components/SiteNav.tsx
index 3d02d90..8b6317a 100644
--- a/src/components/SiteNav.tsx
+++ b/src/components/SiteNav.tsx
@@ -1,67 +1,350 @@
 "use client";
 
-import { XGlassNavbar } from "@xscriptor/xcomponents/navigation";
-import type { NavLinkItem } from "@xscriptor/xcomponents/navigation";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
 
-const base = process.env.NEXT_PUBLIC_BASE_PATH || "";
+type NavItem = {
+  href: string;
+  label: string;
+  section?: string;
+};
 
-const linksLeft: NavLinkItem[] = [
-  { url: `${base}/#features`, title: "Features" },
-  { url: `${base}/#terminal`, title: "Demo" },
-  { url: `${base}/#install`, title: "Install" },
-  { url: `${base}/#layouts`, title: "Layouts" },
-  { url: `${base}/previews`, title: "Previews" },
-];
+type Theme = "dark" | "light";
 
-const linksRight: NavLinkItem[] = [
-  { url: `${base}/#config`, title: "Configure" },
-  { url: `${base}/#plugins`, title: "Plugins" },
-  { url: `${base}/#roadmap`, title: "Roadmap" },
-  { url: `${base}/docs`, title: "Docs" },
+const NAV_ITEMS: NavItem[] = [
+  { href: "/#features", label: "Features", section: "features" },
+  { href: "/#terminal", label: "Demo", section: "terminal" },
+  { href: "/#install", label: "Install", section: "install" },
+  { href: "/#layouts", label: "Layouts", section: "layouts" },
+  { href: "/previews", label: "Previews" },
+  { href: "/#config", label: "Configure", section: "config" },
+  { href: "/#plugins", label: "Plugins", section: "plugins" },
+  { href: "/#roadmap", label: "Roadmap", section: "roadmap" },
+  { href: "/docs", label: "Docs" },
 ];
 
-const SunIcon = ({ size, color }: { size: number; color?: string }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color ?? "currentColor"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <circle cx="12" cy="12" r="5" />
-    <line x1="12" y1="1" x2="12" y2="3" />
-    <line x1="12" y1="21" x2="12" y2="23" />
-    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-    <line x1="1" y1="12" x2="3" y2="12" />
-    <line x1="21" y1="12" x2="23" y2="12" />
-    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+// DOM order, not nav order, so the active link follows the page.
+const SECTION_IDS = ["install", "features", "terminal", "layouts", "config", "plugins", "roadmap"];
+
+const themeListeners = new Set<() => void>();
+
+function subscribeTheme(callback: () => void) {
+  themeListeners.add(callback);
+  return () => {
+    themeListeners.delete(callback);
+  };
+}
+
+function getThemeSnapshot(): Theme {
+  return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
+}
+
+function getThemeServerSnapshot(): Theme {
+  return "dark";
+}
+
+function applyTheme(next: Theme) {
+  if (next === "dark") {
+    document.documentElement.setAttribute("data-theme", "dark");
+  } else {
+    document.documentElement.removeAttribute("data-theme");
+  }
+  try {
+    localStorage.setItem("xfetch-theme", next);
+  } catch {
+    /* storage can be unavailable in private modes */
+  }
+  themeListeners.forEach((callback) => callback());
+}
+
+const SunIcon = () => (
+  <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <circle cx="12" cy="12" r="4.2" />
+    <path d="M12 2v2.2M12 19.8V22M4.22 4.22l1.56 1.56M18.22 18.22l1.56 1.56M2 12h2.2M19.8 12H22M4.22 19.78l1.56-1.56M18.22 5.78l1.56-1.56" />
   </svg>
 );
 
-const MoonIcon = ({ size, color }: { size: number; color?: string }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color ?? "currentColor"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+const MoonIcon = () => (
+  <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
     <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
   </svg>
 );
 
+const CloseIcon = () => (
+  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true">
+    <path d="M6 6l12 12M18 6 6 18" />
+  </svg>
+);
+
+const MenuIcon = ({ open }: { open: boolean }) => (
+  <span className={`xf-menu-icon${open ? " is-open" : ""}`} aria-hidden="true">
+    <span />
+    <span />
+    <span />
+  </span>
+);
+
 export default function SiteNav() {
-  return (
-    <XGlassNavbar
-      linksLeft={linksLeft}
-      linksRight={linksRight}
-      logo={
-        <span className="font-mono font-bold text-accent text-lg">xfetch</span>
+  const pathname = usePathname();
+  const theme = useSyncExternalStore(subscribeTheme, getThemeSnapshot, getThemeServerSnapshot);
+  const [active, setActive] = useState<string>("");
+  const [open, setOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const progressRef = useRef<HTMLSpanElement>(null);
+  const scrolledRef = useRef(false);
+  const menuButton = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const firstMobileLink = useRef<HTMLAnchorElement>(null);
+
+  useEffect(() => {
+    let raf = 0;
+    let ticking = false;
+
+    const update = () => {
+      ticking = false;
+      const doc = document.documentElement;
+      const max = doc.scrollHeight - window.innerHeight;
+      const next = max > 0 ? Math.min(100, Math.max(0, (window.scrollY / max) * 100)) : 0;
+      if (progressRef.current) progressRef.current.style.width = `${next}%`;
+
+      const isScrolled = window.scrollY > 10;
+      if (isScrolled !== scrolledRef.current) {
+        scrolledRef.current = isScrolled;
+        setScrolled(isScrolled);
+      }
+    };
+
+    const onScroll = () => {
+      if (ticking) return;
+      ticking = true;
+      raf = window.requestAnimationFrame(update);
+    };
+
+    raf = window.requestAnimationFrame(update);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll);
+    return () => {
+      window.cancelAnimationFrame(raf);
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [pathname]);
+
+  useEffect(() => {
+    const sections = SECTION_IDS.map((id) => document.getElementById(id)).filter(
+      (element): element is HTMLElement => element !== null,
+    );
+    if (sections.length === 0) return;
+
+    const visible = new Set<string>();
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const id = (entry.target as HTMLElement).id;
+          if (entry.isIntersecting) visible.add(id);
+          else visible.delete(id);
+        });
+
+        const current = SECTION_IDS.filter((id) => visible.has(id)).pop();
+        if (current) {
+          setActive(current);
+          return;
+        }
+
+        // The band can sit in a section without a nav entry (modules, usage,
+        // uninstall). Fall back to the last section whose top passed the line.
+        const passed = sections
+          .map((section) => ({ id: section.id, top: section.offsetTop - window.scrollY }))
+          .filter((item) => item.top <= 150)
+          .pop();
+        setActive(passed?.id ?? "");
+      },
+      { rootMargin: "-100px 0px -84% 0px", threshold: 0 },
+    );
+
+    sections.forEach((section) => observer.observe(section));
+    return () => observer.disconnect();
+  }, [pathname]);
+
+  const closeMenu = useCallback((restoreFocus = true) => {
+    setOpen(false);
+    if (restoreFocus) {
+      window.requestAnimationFrame(() => menuButton.current?.focus());
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const content = document.getElementById("content");
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    content?.setAttribute("inert", "");
+
+    const menu = menuRef.current;
+    const focusables = menu
+      ? Array.from(
+          menu.querySelectorAll<HTMLElement>(
+            'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])',
+          ),
+        )
+      : [];
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closeMenu(true);
+        return;
+      }
+      if (event.key !== "Tab" || focusables.length === 0) return;
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last?.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first?.focus();
       }
-      logoAsThemeToggle
-      themeIcons={{
-        toDark: (size, color) => <MoonIcon size={size} color={color} />,
-        toLight: (size, color) => <SunIcon size={size} color={color} />,
-      }}
-      defaultTheme="dark"
-      storageKey="xfetch-theme"
-      iconSize={18}
-      labelDark="Dark"
-      labelLight="Light"
-      labelOpen="Open menu"
-      labelClose="Close menu"
-      navLabel="Main navigation"
-      menuLabel="Navigation menu"
-    />
+    };
+
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (menuRef.current?.contains(target) || menuButton.current?.contains(target)) return;
+      closeMenu(true);
+    };
+
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onPointerDown);
+    const raf = window.requestAnimationFrame(() => firstMobileLink.current?.focus());
+
+    return () => {
+      window.cancelAnimationFrame(raf);
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.body.style.overflow = previousOverflow;
+      content?.removeAttribute("inert");
+    };
+  }, [open, closeMenu]);
+
+  useEffect(() => {
+    if (!open) return;
+    const close = () => setOpen(false);
+    window.addEventListener("resize", close);
+    return () => window.removeEventListener("resize", close);
+  }, [open]);
+
+  const base = process.env.NEXT_PUBLIC_BASE_PATH || "";
+  const currentPath = base && pathname.startsWith(base) ? pathname.slice(base.length) || "/" : pathname;
+  const isHome = currentPath === "/";
+
+  const isCurrent = (item: NavItem) => {
+    if (item.section) {
+      return isHome && active === item.section;
+    }
+    if (item.href === "/docs") return currentPath === "/docs" || currentPath.startsWith("/docs/");
+    return currentPath === item.href;
+  };
+
+  const prefetchFor = (item: NavItem) => (item.href === "/previews" ? false : undefined);
+
+  return (
+    <header className={`xf-nav${scrolled ? " is-scrolled" : ""}`}>
+      <div className="xf-nav-inner">
+        <Link href="/" className="xf-brand" aria-label="xfetch home">
+          <span className="xf-brand-mark" aria-hidden="true">
+            xf
+          </span>
+          <span className="xf-brand-word">xfetch</span>
+        </Link>
+
+        <nav className="xf-nav-links" aria-label="Main navigation">
+          {NAV_ITEMS.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              prefetch={prefetchFor(item)}
+              className={`xf-nav-link${isCurrent(item) ? " is-active" : ""}`}
+              aria-current={isCurrent(item) ? (item.section ? "location" : "page") : undefined}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </nav>
+
+        <div className="xf-nav-actions">
+          <button
+            type="button"
+            className="xf-theme-toggle"
+            onClick={() => applyTheme(theme === "dark" ? "light" : "dark")}
+            aria-label={theme === "dark" ? "Switch to light theme" : "Switch to dark theme"}
+            aria-pressed={theme === "dark"}
+            title={theme === "dark" ? "Switch to light theme" : "Switch to dark theme"}
+          >
+            <span className="xf-theme-icon xf-theme-icon--sun">
+              <SunIcon />
+            </span>
+            <span className="xf-theme-icon xf-theme-icon--moon">
+              <MoonIcon />
+            </span>
+          </button>
+          <button
+            ref={menuButton}
+            type="button"
+            className="xf-menu-btn"
+            aria-expanded={open}
+            aria-controls="xf-mobile-menu"
+            aria-label={open ? "Close navigation menu" : "Open navigation menu"}
+            onClick={() => (open ? closeMenu(true) : setOpen(true))}
+          >
+            <MenuIcon open={open} />
+          </button>
+        </div>
+      </div>
+
+      <div className="xf-nav-progress" aria-hidden="true">
+        <span ref={progressRef} />
+      </div>
+
+      <div
+        id="xf-mobile-menu"
+        ref={menuRef}
+        className="xf-mobile-menu"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Navigation menu"
+        hidden={!open}
+      >
+        <div className="xf-mobile-head">
+          <span className="xf-mobile-title">Navigation</span>
+          <button
+            type="button"
+            className="xf-mobile-close"
+            onClick={() => closeMenu(true)}
+            aria-label="Close navigation menu"
+          >
+            <CloseIcon />
+          </button>
+        </div>
+        <nav aria-label="Mobile navigation">
+          {NAV_ITEMS.map((item, index) => (
+            <Link
+              key={item.href}
+              ref={index === 0 ? firstMobileLink : undefined}
+              href={item.href}
+              prefetch={prefetchFor(item)}
+              className={`xf-mobile-link${isCurrent(item) ? " is-active" : ""}`}
+              aria-current={isCurrent(item) ? (item.section ? "location" : "page") : undefined}
+              onClick={() => closeMenu(true)}
+            >
+              <span className="xf-mobile-index" aria-hidden="true">{String(index + 1).padStart(2, "0")}</span>
+              {item.label}
+            </Link>
+          ))}
+        </nav>
+      </div>
+    </header>
   );
 }
diff --git a/src/components/TerminalDemo.tsx b/src/components/TerminalDemo.tsx
deleted file mode 100644
index f572c82..0000000
--- a/src/components/TerminalDemo.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-
-interface Line {
-  type: "empty" | "prompt" | "dim" | "info" | "palette";
-  label?: string;
-  icon?: string;
-  key?: string;
-  value?: string;
-}
-
-const T_LINES: Line[] = [
-  { type: "prompt", label: "$ xfetch" }, { type: "empty" },
-  { type: "dim", label: " ────── Hardware ──────" },
-  { type: "info", icon: "cpu", key: "cpu", value: "AMD Ryzen 9 7950X (16) @ 4.50 GHz" },
-  { type: "info", icon: "gpu", key: "gpu", value: "NVIDIA GeForce RTX 4090" },
-  { type: "info", icon: "memory", key: "memory", value: "8.25 GiB / 31.20 GiB (26%)" },
-  { type: "info", icon: "disk", key: "disk", value: "256.4 GiB / 1.0 TiB (25%)" },
-  { type: "info", icon: "battery", key: "battery", value: "85% [Charging]" },
-  { type: "empty" },
-  { type: "dim", label: " ────── Software ──────" },
-  { type: "info", icon: "os", key: "os", value: "Arch Linux x86_64" },
-  { type: "info", icon: "kernel", key: "kernel", value: "6.6.1-arch1-1" },
-  { type: "info", icon: "packages", key: "packages", value: "1456 (pacman)" },
-  { type: "info", icon: "shell", key: "shell", value: "zsh" },
-  { type: "info", icon: "wm", key: "wm", value: "Hyprland" },
-  { type: "empty" },
-  { type: "dim", label: " ────── Session ──────" },
-  { type: "info", icon: "user", key: "user", value: "x0z" },
-  { type: "info", icon: "uptime", key: "uptime", value: "2 hours, 15 mins" },
-  { type: "info", icon: "datetime", key: "datetime", value: "2026-07-13 14:23:00" },
-  { type: "empty" },
-  { type: "palette" },
-  { type: "empty" },
-  { type: "prompt", label: "$ █" },
-];
-
-const palColors = ["#f07178","#f78c6c","#ffcb6b","#78dba9","#78dce8","#82aaff","#b388ff","#dea584"];
-
-export default function TerminalDemo() {
-  const [termVisible, setTermVisible] = useState(0);
-  const termTimer = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  useEffect(() => {
-    termTimer.current = setInterval(() => { setTermVisible((prev) => (prev < T_LINES.length ? prev + 1 : prev)); }, 40);
-    return () => { if (termTimer.current) clearInterval(termTimer.current); };
-  }, []);
-
-  const restartTerm = () => {
-    setTermVisible(0);
-    if (termTimer.current) clearInterval(termTimer.current);
-    termTimer.current = setInterval(() => { setTermVisible((prev) => (prev < T_LINES.length ? prev + 1 : prev)); }, 40);
-  };
-
-  return (
-    <div className="grid gap-3">
-      <span className="block font-mono text-xs uppercase tracking-wide text-accent">● Live demo</span>
-      <h2 className="m-0 text-lg font-semibold">See it in action</h2>
-      <p className="m-0 max-w-[68ch] text-fg2 leading-relaxed">Watch xfetch display your system information in real time. This is a simulated terminal session.</p>
-      <div className="flex justify-center w-full">
-        <div className="overflow-hidden rounded-xl border border-bg3/60 bg-bg/94 cursor-pointer max-w-[48rem] w-full" onClick={restartTerm} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter") restartTerm(); }}>
-          <div className="flex items-center gap-[0.45rem] px-3 py-[0.55rem] border-b border-bg3/40 bg-bg/92">
-            <span className="w-[0.6rem] h-[0.6rem] rounded-full" style={{ background: "#ff5f56" }} />
-            <span className="w-[0.6rem] h-[0.6rem] rounded-full" style={{ background: "#ffbd2e" }} />
-            <span className="w-[0.6rem] h-[0.6rem] rounded-full" style={{ background: "#27c93f" }} />
-            <span className="ml-auto text-xs text-fg2 font-mono">xfetch — bash</span>
-          </div>
-          <pre className="m-0 px-[0.9rem] pb-[0.9rem] pt-[0.85rem] overflow-x-auto font-mono text-xs leading-relaxed whitespace-pre min-h-[6rem] terminal-scrollbar" style={{ scrollbarWidth: "thin", scrollbarColor: "color-mix(in srgb, var(--color-bg3) 50%, transparent) transparent" }}>
-            {T_LINES.slice(0, termVisible).map((line, i) => {
-              if (line.type === "empty") return <div key={i} />;
-              if (line.type === "prompt") return <div key={i}><span className="text-[#78dba9]">$</span> {line.label}</div>;
-              if (line.type === "dim") return <div key={i} className="text-fg2/50 text-[0.72rem]">{line.label}</div>;
-              if (line.type === "info") return (
-                <div key={i} className="flex gap-2 flex-wrap">
-                  <span className="text-[#78dce8] inline-flex items-center gap-1 min-w-[6rem]">{line.key}</span>
-                  <span className="text-fg">{line.value}</span>
-                </div>
-              );
-              if (line.type === "palette") return <div key={i} className="text-fg2/50 tracking-wide">{palColors.map((c) => (<span key={c} style={{ color: c }}>███</span>))}</div>;
-              return null;
-            })}
-            <span className="inline-block text-[#78dba9] animate-blink">█</span>
-          </pre>
-        </div>
-      </div>
-      <p className="m-0 text-center text-xs text-fg2">Click to replay</p>
-    </div>
-  );
-}
diff --git a/src/components/landing/CommandBlock.tsx b/src/components/landing/CommandBlock.tsx
new file mode 100644
index 0000000..b4b9252
--- /dev/null
+++ b/src/components/landing/CommandBlock.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+
+type CopyState = "idle" | "copied" | "error";
+
+function fallbackCopy(text: string) {
+  const area = document.createElement("textarea");
+  area.value = text;
+  area.setAttribute("readonly", "");
+  area.style.position = "fixed";
+  area.style.top = "-1000px";
+  area.style.opacity = "0";
+  document.body.appendChild(area);
+  area.select();
+  const ok = document.execCommand("copy");
+  document.body.removeChild(area);
+  if (!ok) throw new Error("copy failed");
+}
+
+export default function CommandBlock({
+  code,
+  label = "command",
+  className = "",
+  children,
+}: {
+  code: string;
+  label?: string;
+  className?: string;
+  children?: ReactNode;
+}) {
+  const [state, setState] = useState<CopyState>("idle");
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+
+  const copy = useCallback(async () => {
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(code);
+      } else {
+        fallbackCopy(code);
+      }
+      setState("copied");
+    } catch {
+      setState("error");
+    }
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setState("idle"), 2000);
+  }, [code]);
+
+  const visibleLabel = state === "copied" ? "Copied" : state === "error" ? "Retry" : "Copy";
+  const accessibleLabel =
+    state === "copied"
+      ? `Copied ${label} to clipboard`
+      : state === "error"
+        ? `Retry copying ${label}`
+        : `Copy ${label} to clipboard`;
+
+  return (
+    <div className={`xf-code ${className}`}>
+      <div className="xf-code-head">
+        <span className="xf-code-label">{label}</span>
+        <button
+          type="button"
+          className="xf-copy"
+          onClick={copy}
+          aria-label={accessibleLabel}
+        >
+          {state === "copied" ? (
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+          ) : (
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+            </svg>
+          )}
+          <span>{visibleLabel}</span>
+        </button>
+      </div>
+      <pre className="xf-code-pre">
+        <code>{children ?? code}</code>
+      </pre>
+      <span className="xf-sr-only" role="status" aria-live="polite">
+        {state === "copied"
+          ? `${label} copied to clipboard`
+          : state === "error"
+            ? `Could not copy ${label}`
+            : ""}
+      </span>
+    </div>
+  );
+}
diff --git a/src/components/landing/ConfigBuilder.tsx b/src/components/landing/ConfigBuilder.tsx
new file mode 100644
index 0000000..94a5459
--- /dev/null
+++ b/src/components/landing/ConfigBuilder.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { renderModuleIcon } from "@/components/Icons";
+import CommandBlock from "./CommandBlock";
+import SectionHeader from "./SectionHeader";
+import {
+  ALL_MODULES,
+  CUSTOM_CONFIG_COMMAND,
+  DEFAULT_MODULES,
+  LAYOUT_OPTIONS,
+} from "./data";
+
+export default function ConfigBuilder() {
+  const [selected, setSelected] = useState<Set<string>>(() => new Set(DEFAULT_MODULES));
+  const [layout, setLayout] = useState("null");
+
+  const ordered = ALL_MODULES.filter((module) => selected.has(module.value));
+
+  const configJson = useMemo(() => {
+    const lines = ["{"];
+    if (layout !== "null") lines.push(`  "layout": ${JSON.stringify(layout)},`);
+    lines.push('  "modules": [');
+    if (ordered.length > 0) {
+      lines.push(`    ${ordered.map((module) => JSON.stringify(module.value)).join(",\n    ")}`);
+    }
+    lines.push("  ],", '  "show_colors": true', "}");
+    return lines.join("\n");
+  }, [layout, ordered]);
+
+  const toggle = (value: string) => {
+    setSelected((previous) => {
+      const next = new Set(previous);
+      if (next.has(value)) next.delete(value);
+      else next.add(value);
+      return next;
+    });
+  };
+
+  const selectAll = () => setSelected(new Set(ALL_MODULES.map((module) => module.value)));
+  const clearAll = () => setSelected(new Set());
+  const reset = () => {
+    setSelected(new Set(DEFAULT_MODULES));
+    setLayout("null");
+  };
+
+  return (
+    <section id="config" className="xf-section" aria-labelledby="config-title">
+      <div className="xf-container">
+        <SectionHeader
+          id="config-title"
+          eyebrow="Build"
+          title="Configuration"
+          lead="Toggle modules and pick a layout to generate a config.jsonc."
+        />
+
+        <div className="xf-config-grid" data-reveal>
+          <div className="xf-config-controls">
+            <fieldset className="xf-fieldset">
+              <legend>
+                Modules
+                <span className="xf-fieldset-count" aria-live="polite">
+                  {ordered.length} of {ALL_MODULES.length} selected
+                </span>
+              </legend>
+              <div className="xf-config-actions">
+                <button type="button" className="xf-link-btn" onClick={selectAll}>
+                  Select all
+                </button>
+                <button type="button" className="xf-link-btn" onClick={clearAll}>
+                  Clear
+                </button>
+                <button type="button" className="xf-link-btn" onClick={reset}>
+                  Reset
+                </button>
+              </div>
+              <div className="xf-config-modules">
+                {ALL_MODULES.map((module) => (
+                  <label key={module.value} className="xf-check">
+                    <input
+                      type="checkbox"
+                      checked={selected.has(module.value)}
+                      onChange={() => toggle(module.value)}
+                    />
+                    <span className="xf-check-box" aria-hidden="true">
+                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round">
+                        <polyline points="20 6 9 17 4 12" />
+                      </svg>
+                    </span>
+                    <span className="xf-check-icon" aria-hidden="true">
+                      {renderModuleIcon(module.icon, 15)}
+                    </span>
+                    <code>{module.value}</code>
+                  </label>
+                ))}
+              </div>
+            </fieldset>
+
+            <div className="xf-select-field">
+              <label htmlFor="config-layout" className="xf-mini-label">
+                Layout
+              </label>
+              <select
+                id="config-layout"
+                value={layout}
+                onChange={(event) => setLayout(event.target.value)}
+              >
+                {LAYOUT_OPTIONS.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          <div className="xf-config-output">
+            <CommandBlock code={configJson} label="Generated config.jsonc" className="xf-config-code" />
+            <p className="xf-config-hint">Use a custom config file:</p>
+            <CommandBlock code={CUSTOM_CONFIG_COMMAND} label="custom config command" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/DemoGallery.tsx b/src/components/landing/DemoGallery.tsx
new file mode 100644
index 0000000..5a6f96b
--- /dev/null
+++ b/src/components/landing/DemoGallery.tsx
@@ -0,0 +1,205 @@
+"use client";
+
+import Link from "next/link";
+import { useRef, useState, type KeyboardEvent } from "react";
+import SectionHeader from "./SectionHeader";
+
+const base = process.env.NEXT_PUBLIC_BASE_PATH || "";
+const PANEL_ID = "xf-gallery-panel";
+
+type Shot = {
+  src: string;
+  alt: string;
+  caption: string;
+  width: number;
+  height: number;
+};
+
+type Platform = {
+  id: "linux" | "macos" | "windows";
+  label: string;
+  images: Shot[];
+};
+
+const PLATFORMS: Platform[] = [
+  {
+    id: "linux",
+    label: "Linux",
+    images: [
+      {
+        src: "preview-linux-2.webp",
+        alt: "xfetch on Linux, default side-by-side layout",
+        caption: "Default side-by-side layout on Linux — logo, modules and colors.",
+        width: 971,
+        height: 576,
+      },
+      {
+        src: "preview-linux-3.webp",
+        alt: "xfetch on Linux, custom layout and color scheme",
+        caption: "Custom layout and palette from the same config.jsonc.",
+        width: 968,
+        height: 591,
+      },
+      {
+        src: "preview-linux-4.webp",
+        alt: "xfetch on Linux, ANSI color palette module",
+        caption: "The ANSI palette module rendered as squares.",
+        width: 960,
+        height: 518,
+      },
+      {
+        src: "preview-linux-5.webp",
+        alt: "xfetch on Linux, logo animation frame",
+        caption: "animate-logo frame from the sweep and rainbow cycle.",
+        width: 977,
+        height: 549,
+      },
+      {
+        src: "preview-linux-6.webp",
+        alt: "xfetch on Linux, four layout variations on one desktop",
+        caption: "Four layouts on one desktop — classic, grouped, boxed and minimal.",
+        width: 1919,
+        height: 1079,
+      },
+    ],
+  },
+  {
+    id: "macos",
+    label: "macOS",
+    images: [
+      {
+        src: "macos-preview-2.webp",
+        alt: "xfetch on macOS, default layout on an Apple M4 laptop",
+        caption: "macOS on Apple M4 — Homebrew packages, battery and uptime.",
+        width: 1272,
+        height: 589,
+      },
+      {
+        src: "macos-preview-3.webp",
+        alt: "xfetch on macOS, tree layout inside iTerm2",
+        caption: "Tree layout generated with --gen-config, running in iTerm2.",
+        width: 2048,
+        height: 1332,
+      },
+    ],
+  },
+  {
+    id: "windows",
+    label: "Windows",
+    images: [
+      {
+        src: "preview-windows-2.webp",
+        alt: "xfetch on Windows, Pac-Man layout in Windows Terminal",
+        caption: "Windows Terminal running the Pac-Man layout.",
+        width: 2871,
+        height: 1619,
+      },
+      {
+        src: "preview-windows-3.webp",
+        alt: "xfetch on Windows, grouped modules and package counts",
+        caption: "Windows 11 with grouped modules, PowerShell and package counts.",
+        width: 2559,
+        height: 1439,
+      },
+    ],
+  },
+];
+
+export default function DemoGallery() {
+  const [active, setActive] = useState<Platform["id"]>("linux");
+  const tabs = useRef<Array<HTMLButtonElement | null>>([]);
+  const platform = PLATFORMS.find((item) => item.id === active) ?? PLATFORMS[0];
+
+  const select = (index: number) => {
+    const next = (index + PLATFORMS.length) % PLATFORMS.length;
+    setActive(PLATFORMS[next].id);
+    tabs.current[next]?.focus();
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>, index: number) => {
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      event.preventDefault();
+      select(index + 1);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      event.preventDefault();
+      select(index - 1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      select(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      select(PLATFORMS.length - 1);
+    }
+  };
+
+  return (
+    <section id="screens" className="xf-section" aria-labelledby="screens-title">
+      <div className="xf-container">
+        <SectionHeader
+          id="screens-title"
+          eyebrow="Recorded session"
+          title="A real xfetch run"
+          lead="Captured on real machines — logo, modules, layouts and the ANSI palette in one pass. Choose a platform."
+        />
+
+        <div className="xf-gallery" data-reveal>
+          <div className="xf-gallery-bar">
+            <div className="xf-tabs" role="tablist" aria-label="Preview platform">
+              {PLATFORMS.map((item, index) => (
+                <button
+                  key={item.id}
+                  ref={(node) => {
+                    tabs.current[index] = node;
+                  }}
+                  type="button"
+                  role="tab"
+                  id={`xf-gallery-tab-${item.id}`}
+                  aria-selected={active === item.id}
+                  aria-controls={PANEL_ID}
+                  tabIndex={active === item.id ? 0 : -1}
+                  className={`xf-tab${active === item.id ? " is-active" : ""}`}
+                  onClick={() => setActive(item.id)}
+                  onKeyDown={(event) => onKeyDown(event, index)}
+                >
+                  {item.label}
+                </button>
+              ))}
+            </div>
+            <Link className="xf-gallery-link" href="/previews" prefetch={false}>
+              See all previews
+              <span aria-hidden="true">→</span>
+            </Link>
+          </div>
+
+          <div
+            className="xf-gallery-panel"
+            id={PANEL_ID}
+            role="tabpanel"
+            aria-labelledby={`xf-gallery-tab-${platform.id}`}
+          >
+            <ul className="xf-gallery-grid" role="list">
+              {platform.images.map((image) => (
+                <li key={image.src} className="xf-gallery-item">
+                  <figure>
+                    <div className="xf-gallery-media">
+                      {/* eslint-disable-next-line @next/next/no-img-element -- existing static preview assets; dimensions reserved and images lazy-loaded */}
+                      <img
+                        src={`${base}/previews/${image.src}`}
+                        alt={image.alt}
+                        width={image.width}
+                        height={image.height}
+                        loading="lazy"
+                        decoding="async"
+                      />
+                    </div>
+                    <figcaption>{image.caption}</figcaption>
+                  </figure>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/FeaturesSection.tsx b/src/components/landing/FeaturesSection.tsx
new file mode 100644
index 0000000..0ea2ed4
--- /dev/null
+++ b/src/components/landing/FeaturesSection.tsx
@@ -0,0 +1,57 @@
+import type { CSSProperties } from "react";
+import { renderFeatureIcon } from "@/components/Icons";
+import SectionHeader from "./SectionHeader";
+import { FEATURES } from "./data";
+
+export default function FeaturesSection() {
+  return (
+    <section id="features" className="xf-section" aria-labelledby="features-title">
+      <div className="xf-container">
+        <SectionHeader
+          id="features-title"
+          eyebrow="Capabilities"
+          title="Features"
+          lead="From OS detection to animated ASCII art — xfetch packs a punch in a single binary."
+        />
+
+        <div className="xf-features">
+          {FEATURES.map((feature, index) => (
+            <article
+              key={feature.key}
+              className="xf-feature"
+              data-reveal
+              style={{ "--reveal-delay": `${Math.min(index, 6) * 45}ms` } as CSSProperties}
+            >
+              <div className="xf-feature-top">
+                <span className="xf-feature-icon" aria-hidden="true">
+                  {renderFeatureIcon(feature.icon, 20)}
+                </span>
+                <span className="xf-feature-num" aria-hidden="true">
+                  {String(index + 1).padStart(2, "0")}
+                </span>
+              </div>
+              <h3>{feature.title}</h3>
+              <p>{feature.desc}</p>
+              {index === 0 ? (
+                <ul className="xf-feature-stats" role="list" aria-label="xfetch at a glance">
+                  <li>
+                    <strong>18</strong>
+                    <span>modules</span>
+                  </li>
+                  <li>
+                    <strong>9</strong>
+                    <span>layouts</span>
+                  </li>
+                  <li>
+                    <strong>6</strong>
+                    <span>targets</span>
+                  </li>
+                </ul>
+              ) : null}
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/FinalCta.tsx b/src/components/landing/FinalCta.tsx
new file mode 100644
index 0000000..b2a778f
--- /dev/null
+++ b/src/components/landing/FinalCta.tsx
@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { IconGithub } from "@/components/Icons";
+import { REPO_URL } from "./links";
+
+export default function FinalCta() {
+  return (
+    <section className="xf-cta" aria-labelledby="cta-title">
+      <div className="xf-cta-grid" aria-hidden="true" />
+      <div className="xf-container xf-cta-inner" data-reveal>
+        <p className="xf-eyebrow">Open source · MIT</p>
+        <h2 id="cta-title">
+          Build it, theme it,
+          <br />
+          <span>extend it.</span>
+        </h2>
+        <p className="xf-cta-lead">
+          One Rust binary, a JSONC config, and a JSON protocol for plugins, effects and
+          extensions. Fork it, ship a theme, or write the next module.
+        </p>
+        <div className="xf-cta-actions">
+          <a
+            className="xf-btn xf-btn--primary"
+            href={REPO_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <IconGithub size={17} />
+            View Source Code
+          </a>
+          <Link className="xf-btn xf-btn--ghost" href="/docs">
+            Read the docs
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M5 12h14M13 6l6 6-6 6" />
+            </svg>
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
new file mode 100644
index 0000000..555fced
--- /dev/null
+++ b/src/components/landing/Hero.tsx
@@ -0,0 +1,65 @@
+import { IconGithub } from "@/components/Icons";
+import { REPO_URL } from "./links";
+import HeroVisual from "./HeroVisual";
+
+const FACTS = ["JSONC config", "WASM sandbox", "9 layouts", "6 targets", "live daemon"];
+
+export default function Hero() {
+  return (
+    <section className="xf-hero" aria-labelledby="hero-title">
+      <div className="xf-container xf-hero-grid">
+        <div className="xf-hero-copy">
+          {/* eslint-disable-next-line @next/next/no-img-element -- remote SVG banner; next/image would need remotePatterns + dangerouslyAllowSVG */}
+          <img
+            src="https://raw.githubusercontent.com/xfetch-cli/assets/main/logo/banner/xfetch.svg"
+            alt="xfetch banner"
+            width={1000}
+            height={175}
+            className="xf-hero-banner"
+            decoding="async"
+          />
+
+          <p className="xf-eyebrow xf-hero-eyebrow">
+            Rust <span aria-hidden="true">/</span> cross-platform system fetcher
+          </p>
+
+          <h1 id="hero-title" className="xf-hero-title">
+            System information,
+            <br />
+            <span className="xf-hero-title-accent">rendered with precision.</span>
+          </h1>
+
+          <p className="xf-hero-lead">
+            A cross-platform system information fetching tool written in Rust.
+          </p>
+
+          <div className="xf-hero-actions">
+            <a className="xf-btn xf-btn--primary" href="#install">
+              Install xfetch
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                <path d="M5 12h14M13 6l6 6-6 6" />
+              </svg>
+            </a>
+            <a
+              className="xf-btn xf-btn--ghost"
+              href={REPO_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <IconGithub size={16} />
+              View on GitHub
+            </a>
+          </div>
+
+          <ul className="xf-facts" role="list" aria-label="xfetch highlights">
+            {FACTS.map((fact) => (
+              <li key={fact}>{fact}</li>
+            ))}
+          </ul>
+        </div>
+
+        <HeroVisual />
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/HeroVisual.tsx b/src/components/landing/HeroVisual.tsx
new file mode 100644
index 0000000..e080d71
--- /dev/null
+++ b/src/components/landing/HeroVisual.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { VERSION } from "./links";
+
+const ASCII_LOGO = ["██   ██", " ██ ██ ", "  ███  ", " ██ ██ ", "██   ██"];
+
+const ROWS = [
+  { key: "os", value: "Arch Linux x86_64" },
+  { key: "wm", value: "Hyprland" },
+  { key: "cpu", value: "Ryzen 9 7950X · 16" },
+  { key: "gpu", value: "RTX 4090" },
+  { key: "memory", value: "8.25 / 31.20 GiB" },
+  { key: "uptime", value: "2h 15m" },
+];
+
+const PALETTE = ["#f07178", "#f78c6c", "#ffcb6b", "#78dba9", "#78dce8", "#82aaff", "#b388ff", "#dea584"];
+
+const CHIPS = [
+  { className: "xf-chip--tl", label: "JSONC", meta: "config" },
+  { className: "xf-chip--tr", label: "WASM", meta: "sandbox" },
+  { className: "xf-chip--bl", label: "live", meta: "daemon" },
+  { className: "xf-chip--br", label: "6", meta: "targets" },
+];
+
+export default function HeroVisual() {
+  const iso = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = iso.current;
+    if (!el) return;
+
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const fine = window.matchMedia("(pointer: fine)");
+    let frame = 0;
+
+    const onMove = (event: PointerEvent) => {
+      if (reduce.matches || !fine.matches) return;
+      window.cancelAnimationFrame(frame);
+      frame = window.requestAnimationFrame(() => {
+        const rect = el.getBoundingClientRect();
+        const x = (event.clientX - rect.left) / rect.width - 0.5;
+        const y = (event.clientY - rect.top) / rect.height - 0.5;
+        el.style.setProperty("--rx", `${(-y * 5).toFixed(2)}deg`);
+        el.style.setProperty("--ry", `${(x * 7).toFixed(2)}deg`);
+      });
+    };
+
+    const onLeave = () => {
+      el.style.setProperty("--rx", "0deg");
+      el.style.setProperty("--ry", "0deg");
+    };
+
+    el.addEventListener("pointermove", onMove);
+    el.addEventListener("pointerleave", onLeave);
+    return () => {
+      window.cancelAnimationFrame(frame);
+      el.removeEventListener("pointermove", onMove);
+      el.removeEventListener("pointerleave", onLeave);
+    };
+  }, []);
+
+  return (
+    <figure
+      className="xf-hero-visual"
+      role="img"
+      aria-label="Isometric terminal stack showing xfetch output for Arch Linux with Hyprland, a Ryzen 9 CPU, an RTX 4090 GPU, memory and uptime, plus the ANSI color palette."
+    >
+      <div className="xf-visual-stage" aria-hidden="true">
+        <div className="xf-hero-plinth" />
+        <div className="xf-hero-glow" />
+
+        <div className="xf-iso" ref={iso}>
+          <div className="xf-slab xf-slab--back">
+            <div className="xf-slab-logo">{ASCII_LOGO.join("\n")}</div>
+          </div>
+
+          <div className="xf-slab xf-slab--mid">
+            <div className="xf-slab-rows">
+              {ROWS.slice(0, 4).map((row) => (
+                <span key={row.key}>
+                  <i>{row.key}</i> {row.value}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div className="xf-term">
+            <div className="xf-term-chrome">
+              <span className="xf-term-dot is-red" />
+              <span className="xf-term-dot is-amber" />
+              <span className="xf-term-dot is-green" />
+              <span className="xf-term-title">xfetch — zsh</span>
+              <span className="xf-term-badge">v{VERSION}</span>
+            </div>
+
+            <div className="xf-term-body">
+              <pre className="xf-term-logo">{ASCII_LOGO.join("\n")}</pre>
+              <div className="xf-term-rows">
+                {ROWS.map((row) => (
+                  <p key={row.key} className="xf-term-row">
+                    <span className="xf-term-key">{row.key}</span>
+                    <span className="xf-term-value">{row.value}</span>
+                  </p>
+                ))}
+                <p className="xf-term-palette" aria-hidden="true">
+                  {PALETTE.map((color) => (
+                    <span key={color} style={{ background: color }} />
+                  ))}
+                </p>
+              </div>
+            </div>
+
+            <div className="xf-term-foot">
+              <span className="xf-term-prompt">$</span>
+              <span>xfetch</span>
+              <span className="xf-term-cursor" />
+            </div>
+          </div>
+
+          {CHIPS.map((chip) => (
+            <span key={chip.label} className={`xf-chip ${chip.className}`}>
+              <strong>{chip.label}</strong> {chip.meta}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <figcaption className="xf-sr-only">
+        xfetch renders system information from a layered pipeline: configuration, probes,
+        renderer and terminal output.
+      </figcaption>
+    </figure>
+  );
+}
diff --git a/src/components/landing/InstallSection.tsx b/src/components/landing/InstallSection.tsx
new file mode 100644
index 0000000..957c71c
--- /dev/null
+++ b/src/components/landing/InstallSection.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { useRef, useState, type KeyboardEvent } from "react";
+import CommandBlock from "./CommandBlock";
+import SectionHeader from "./SectionHeader";
+import { INSTALL_AFTER, INSTALL_CONTENT, INSTALL_TABS } from "./data";
+
+export default function InstallSection() {
+  const [tab, setTab] = useState("linux");
+  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);
+
+  const move = (index: number) => {
+    const next = (index + INSTALL_TABS.length) % INSTALL_TABS.length;
+    setTab(INSTALL_TABS[next].id);
+    tabRefs.current[next]?.focus();
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>, index: number) => {
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      event.preventDefault();
+      move(index + 1);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      event.preventDefault();
+      move(index - 1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      move(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      move(INSTALL_TABS.length - 1);
+    }
+  };
+
+  return (
+    <section id="install" className="xf-section" aria-labelledby="install-title">
+      <div className="xf-container">
+        <SectionHeader
+          id="install-title"
+          eyebrow="Install"
+          title="Installation"
+          lead="Choose your platform. The quick installer handles everything — including Rust setup if needed."
+        />
+
+        <div className="xf-install" data-reveal>
+          <div className="xf-tabs" role="tablist" aria-label="Installation methods">
+            {INSTALL_TABS.map((item, index) => (
+              <button
+                key={item.id}
+                ref={(node) => {
+                  tabRefs.current[index] = node;
+                }}
+                type="button"
+                role="tab"
+                id={`install-tab-${item.id}`}
+                aria-selected={tab === item.id}
+                aria-controls={`install-panel-${item.id}`}
+                tabIndex={tab === item.id ? 0 : -1}
+                className={`xf-tab${tab === item.id ? " is-active" : ""}`}
+                onClick={() => setTab(item.id)}
+                onKeyDown={(event) => onKeyDown(event, index)}
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+
+          {INSTALL_TABS.map((item) => {
+            const content = INSTALL_CONTENT[item.id];
+            const code = content.lines.map((line) => line.text).join("\n");
+            return (
+              <div
+                key={item.id}
+                className="xf-tab-panel"
+                role="tabpanel"
+                id={`install-panel-${item.id}`}
+                aria-labelledby={`install-tab-${item.id}`}
+                hidden={tab !== item.id}
+              >
+                <CommandBlock code={code} label={item.label}>
+                  {content.lines.map((line, index) => (
+                    <span key={index} className={line.comment ? "xf-code-comment" : undefined}>
+                      {line.text}
+                      {"\n"}
+                    </span>
+                  ))}
+                </CommandBlock>
+              </div>
+            );
+          })}
+
+          <div className="xf-install-after">
+            <p className="xf-mini-label">After install, just run:</p>
+            <CommandBlock code={INSTALL_AFTER} label="first run commands">
+              {INSTALL_AFTER.split("\n").map((line) => (
+                <span key={line}>
+                  <span className="xf-code-prompt">$</span> {line.slice(2)}
+                  {"\n"}
+                </span>
+              ))}
+            </CommandBlock>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/LandingEffects.tsx b/src/components/landing/LandingEffects.tsx
new file mode 100644
index 0000000..799d59a
--- /dev/null
+++ b/src/components/landing/LandingEffects.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * Progressive-enhancement scroll reveal.
+ *
+ * The inline script in app/layout.tsx adds `xf-js` to <html> before paint, so
+ * reveal styles only exist when JavaScript is available. With reduced motion
+ * (or no IntersectionObserver) everything is shown immediately.
+ */
+export default function LandingEffects() {
+  useEffect(() => {
+    const nodes = Array.from(document.querySelectorAll<HTMLElement>("[data-reveal]"));
+    if (nodes.length === 0) return;
+
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduceMotion || typeof IntersectionObserver === "undefined") {
+      nodes.forEach((node) => node.classList.add("is-in"));
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("is-in");
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { rootMargin: "0px 0px -8% 0px", threshold: 0.08 },
+    );
+
+    nodes.forEach((node) => observer.observe(node));
+    return () => observer.disconnect();
+  }, []);
+
+  return null;
+}
diff --git a/src/components/landing/LayoutExplorer.tsx b/src/components/landing/LayoutExplorer.tsx
new file mode 100644
index 0000000..6dadd59
--- /dev/null
+++ b/src/components/landing/LayoutExplorer.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import { useRef, useState, type KeyboardEvent } from "react";
+import CommandBlock from "./CommandBlock";
+import SectionHeader from "./SectionHeader";
+import { LAYOUT_EXAMPLES, type LayoutExample } from "./data";
+
+function LayoutPreview({ layout }: { layout: LayoutExample["preview"] }) {
+  return (
+    <div className={`xf-lp xf-lp--${layout}`} aria-hidden="true">
+      {layout === "default" ? (
+        <>
+          <div className="xf-lp-logo">
+            <span>██   ██</span>
+            <span> ██ ██ </span>
+            <span>  ███  </span>
+            <span> ██ ██ </span>
+            <span>██   ██</span>
+          </div>
+          <div className="xf-lp-rows">
+            <span><i>os</i><b>Arch Linux</b></span>
+            <span><i>wm</i><b>Hyprland</b></span>
+            <span><i>cpu</i><b>Ryzen 9</b></span>
+            <span><i>gpu</i><b>RTX 4090</b></span>
+            <span><i>mem</i><b>8.2 / 31 GiB</b></span>
+          </div>
+        </>
+      ) : null}
+
+      {layout === "pacman" ? (
+        <div className="xf-lp-pacman">
+          <div className="xf-lp-pac-head">● ● ● PAC-MAN ● ● ●</div>
+          <div className="xf-lp-pac-body">
+            <div className="xf-lp-logo xf-lp-logo--small">
+              <span>██   ██</span>
+              <span> ██ ██ </span>
+              <span>  ███  </span>
+              <span> ██ ██ </span>
+              <span>██   ██</span>
+            </div>
+            <div className="xf-lp-rows">
+              <span><i>os</i><b>Arch Linux</b></span>
+              <span><i>cpu</i><b>Ryzen 9</b></span>
+              <span><i>mem</i><b>8.2 / 31 GiB</b></span>
+            </div>
+          </div>
+          <div className="xf-lp-pac-foot">●●●●●●●●●●</div>
+        </div>
+      ) : null}
+
+      {layout === "section" ? (
+        <div className="xf-lp-section">
+          <span className="xf-lp-sec-title">──── Hardware ────</span>
+          <span><i>cpu</i><b>Ryzen 9</b></span>
+          <span><i>gpu</i><b>RTX 4090</b></span>
+          <span><i>mem</i><b>8.2 / 31 GiB</b></span>
+          <span className="xf-lp-sec-title">──── Software ────</span>
+          <span><i>os</i><b>Arch Linux</b></span>
+          <span><i>shell</i><b>zsh</b></span>
+        </div>
+      ) : null}
+
+      {layout === "side-block" ? (
+        <div className="xf-lp-side">
+          <div className="xf-lp-side-col">
+            <span>os</span>
+            <span>kernel</span>
+            <span>cpu</span>
+            <span>gpu</span>
+            <span>memory</span>
+          </div>
+          <div className="xf-lp-side-col is-values">
+            <span>Arch Linux</span>
+            <span>6.6.1</span>
+            <span>Ryzen 9</span>
+            <span>RTX 4090</span>
+            <span>8.2 / 31 GiB</span>
+          </div>
+        </div>
+      ) : null}
+
+      {layout === "tree" ? (
+        <div className="xf-lp-tree">
+          <span><b>xfetch</b></span>
+          <span>├─ <i>OS</i></span>
+          <span>│  ├─ os</span>
+          <span>│  ├─ kernel</span>
+          <span>│  └─ packages</span>
+          <span>└─ <i>PC</i></span>
+          <span>   ├─ cpu</span>
+          <span>   ├─ gpu</span>
+          <span>   └─ memory</span>
+        </div>
+      ) : null}
+
+      {layout === "box" ? (
+        <div className="xf-lp-box">
+          <div className="xf-lp-box-inner">
+            <span><i>os</i><b>Arch Linux</b></span>
+            <span><i>wm</i><b>Hyprland</b></span>
+            <span><i>cpu</i><b>Ryzen 9</b></span>
+            <span><i>gpu</i><b>RTX 4090</b></span>
+            <span><i>mem</i><b>8.2 / 31 GiB</b></span>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default function LayoutExplorer() {
+  const [activeId, setActiveId] = useState(LAYOUT_EXAMPLES[0].id);
+  const tabs = useRef<Array<HTMLButtonElement | null>>([]);
+  const active = LAYOUT_EXAMPLES.find((layout) => layout.id === activeId) ?? LAYOUT_EXAMPLES[0];
+
+  const select = (index: number) => {
+    const next = (index + LAYOUT_EXAMPLES.length) % LAYOUT_EXAMPLES.length;
+    setActiveId(LAYOUT_EXAMPLES[next].id);
+    tabs.current[next]?.focus();
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>, index: number) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+      event.preventDefault();
+      select(index + 1);
+    } else if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      select(index - 1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      select(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      select(LAYOUT_EXAMPLES.length - 1);
+    }
+  };
+
+  return (
+    <section id="layouts" className="xf-section" aria-labelledby="layouts-title">
+      <div className="xf-container">
+        <SectionHeader
+          id="layouts-title"
+          eyebrow="Composition"
+          title="Layout showcase"
+          lead="xfetch ships with 9 built-in layouts. Each has a distinct visual style for different preferences."
+        />
+
+        <div className="xf-layout-grid" data-reveal>
+          <div className="xf-layout-tabs" role="tablist" aria-orientation="vertical" aria-label="Layout examples">
+            {LAYOUT_EXAMPLES.map((layout, index) => (
+              <button
+                key={layout.id}
+                ref={(node) => {
+                  tabs.current[index] = node;
+                }}
+                type="button"
+                role="tab"
+                id={`layout-tab-${layout.id}`}
+                aria-selected={layout.id === active.id}
+                aria-controls={`layout-panel-${layout.id}`}
+                tabIndex={layout.id === active.id ? 0 : -1}
+                className={`xf-layout-tab${layout.id === active.id ? " is-active" : ""}`}
+                onClick={() => setActiveId(layout.id)}
+                onKeyDown={(event) => onKeyDown(event, index)}
+              >
+                <span className="xf-layout-tab-num">{String(index + 1).padStart(2, "0")}</span>
+                <span className="xf-layout-tab-body">
+                  <span className="xf-layout-tab-title">{layout.title}</span>
+                  <span className="xf-layout-tab-desc">{layout.desc}</span>
+                </span>
+              </button>
+            ))}
+          </div>
+
+          {LAYOUT_EXAMPLES.map((layout, index) => (
+            <div
+              key={layout.id}
+              className="xf-layout-panel"
+              role="tabpanel"
+              id={`layout-panel-${layout.id}`}
+              aria-labelledby={`layout-tab-${layout.id}`}
+              tabIndex={0}
+              hidden={layout.id !== active.id}
+            >
+              <div className="xf-layout-preview-wrap">
+                <LayoutPreview layout={layout.preview} />
+                <span className="xf-layout-preview-label" aria-hidden="true">
+                  {String(index + 1).padStart(2, "0")} / {String(LAYOUT_EXAMPLES.length).padStart(2, "0")}
+                </span>
+              </div>
+              <CommandBlock code={layout.code} label={`${layout.title} JSON`} className="xf-layout-code" />
+              <p className="xf-layout-note">
+                Showing 6 examples. <code>line</code>, <code>dots</code>, and <code>bottom_line</code> are also available in the config builder.
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/ModuleExplorer.tsx b/src/components/landing/ModuleExplorer.tsx
new file mode 100644
index 0000000..1193510
--- /dev/null
+++ b/src/components/landing/ModuleExplorer.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { useMemo, useRef, useState } from "react";
+import { renderModuleIcon } from "@/components/Icons";
+import SectionHeader from "./SectionHeader";
+import { MODULES, MODULE_CATEGORIES, type ModuleCategory } from "./data";
+
+export default function ModuleExplorer() {
+  const [query, setQuery] = useState("");
+  const [category, setCategory] = useState<ModuleCategory>("All");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  const filtered = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    return MODULES.filter((module) => {
+      const matchesCategory = category === "All" || module.category === category;
+      const matchesQuery =
+        needle.length === 0 ||
+        module.name.toLowerCase().includes(needle) ||
+        module.desc.toLowerCase().includes(needle);
+      return matchesCategory && matchesQuery;
+    });
+  }, [category, query]);
+
+  const reset = () => {
+    setQuery("");
+    setCategory("All");
+    searchRef.current?.focus();
+  };
+
+  return (
+    <section id="modules" className="xf-section" aria-labelledby="modules-title">
+      <div className="xf-container">
+        <SectionHeader
+          id="modules-title"
+          eyebrow="Reference"
+          title="Available modules"
+          lead="Every piece of information xfetch can display. Mix, match, and reorder them in your config."
+        />
+
+        <div className="xf-explorer" data-reveal>
+          <div className="xf-explorer-search">
+            <label htmlFor="module-search" className="xf-mini-label">
+              Filter modules
+            </label>
+            <div className="xf-input-wrap">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+                <circle cx="11" cy="11" r="7" />
+                <path d="M20 20l-3.5-3.5" />
+              </svg>
+              <input
+                ref={searchRef}
+                id="module-search"
+                type="search"
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder="Search os, cpu, memory…"
+                autoComplete="off"
+                aria-controls="module-results"
+              />
+              {query ? (
+                <button
+                  type="button"
+                  className="xf-input-clear"
+                  onClick={() => {
+                    setQuery("");
+                    searchRef.current?.focus();
+                  }}
+                  aria-label="Clear module search"
+                >
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" aria-hidden="true">
+                    <path d="M6 6l12 12M18 6L6 18" />
+                  </svg>
+                </button>
+              ) : null}
+            </div>
+          </div>
+
+          <div className="xf-filter-col">
+            <span className="xf-mini-label" id="module-category-label">
+              Category
+            </span>
+            <div className="xf-chips" role="group" aria-labelledby="module-category-label">
+              {MODULE_CATEGORIES.map((item) => (
+                <button
+                  key={item}
+                  type="button"
+                  className={`xf-chip-btn${category === item ? " is-active" : ""}`}
+                  aria-pressed={category === item}
+                  onClick={() => setCategory(item)}
+                >
+                  {item}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <p className="xf-count" aria-live="polite">
+            <strong>{filtered.length}</strong> of {MODULES.length} modules
+          </p>
+        </div>
+
+        <ul id="module-results" className="xf-module-grid" role="list" data-reveal>
+          {filtered.map((module) => (
+            <li key={module.name} className="xf-module">
+              <span className="xf-module-icon" aria-hidden="true">
+                {renderModuleIcon(module.icon, 18)}
+              </span>
+              <div className="xf-module-body">
+                <div className="xf-module-head">
+                  <h3>
+                    <code>{module.name}</code>
+                  </h3>
+                  <span className="xf-module-cat">{module.category}</span>
+                </div>
+                <p>{module.desc}</p>
+              </div>
+            </li>
+          ))}
+        </ul>
+
+        {filtered.length === 0 ? (
+          <div className="xf-empty" role="status">
+            <p>No modules match “{query}” in {category}.</p>
+            <button type="button" className="xf-btn xf-btn--ghost" onClick={reset}>
+              Clear filters
+            </button>
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/PluginSandbox.tsx b/src/components/landing/PluginSandbox.tsx
new file mode 100644
index 0000000..0a5d8b1
--- /dev/null
+++ b/src/components/landing/PluginSandbox.tsx
@@ -0,0 +1,79 @@
+const CAPABILITIES = [
+  "Deny-by-default capabilities",
+  "Time, memory and output limits",
+  "Same JSON stdin/stdout contract",
+  "Native or WebAssembly guests",
+];
+
+export default function PluginSandbox() {
+  return (
+    <figure className="xf-sandbox" data-reveal>
+      <svg
+        viewBox="0 0 520 440"
+        className="xf-sandbox-svg"
+        role="img"
+        aria-label="Isometric sandbox core labelled WASM, with orbiting rings for plugins, effects and extensions."
+      >
+        <defs>
+          <linearGradient id="xfSandboxTop" x1="0" y1="0" x2="1" y2="1">
+            <stop offset="0%" className="xf-sandbox-top-a" />
+            <stop offset="100%" className="xf-sandbox-top-b" />
+          </linearGradient>
+          <linearGradient id="xfSandboxSide" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" className="xf-sandbox-side-a" />
+            <stop offset="100%" className="xf-sandbox-side-b" />
+          </linearGradient>
+          <radialGradient id="xfSandboxGlow" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" stopColor="#a78bfa" stopOpacity="0.28" />
+            <stop offset="100%" stopColor="#a78bfa" stopOpacity="0" />
+          </radialGradient>
+        </defs>
+
+        <circle cx="260" cy="220" r="190" fill="url(#xfSandboxGlow)" />
+
+        <g className="xf-orbit xf-orbit--a">
+          <ellipse cx="260" cy="220" rx="208" ry="66" className="xf-orbit-ring" />
+          <circle cx="468" cy="220" r="5" className="xf-orbit-node" />
+        </g>
+        <g className="xf-orbit xf-orbit--b">
+          <ellipse cx="260" cy="220" rx="180" ry="58" className="xf-orbit-ring" transform="rotate(54 260 220)" />
+          <circle cx="188" cy="82" r="5" className="xf-orbit-node is-cyan" />
+        </g>
+        <g className="xf-orbit xf-orbit--c">
+          <ellipse cx="260" cy="220" rx="160" ry="52" className="xf-orbit-ring" transform="rotate(-48 260 220)" />
+          <circle cx="342" cy="352" r="5" className="xf-orbit-node is-warm" />
+        </g>
+
+        <g className="xf-sandbox-cube">
+          <path d="M260 96 L380 158 L260 220 L140 158 Z" fill="url(#xfSandboxTop)" className="xf-sandbox-face" />
+          <path d="M140 158 L260 220 L260 342 L140 280 Z" fill="url(#xfSandboxSide)" className="xf-sandbox-face" />
+          <path d="M380 158 L260 220 L260 342 L380 280 Z" fill="url(#xfSandboxSide)" className="xf-sandbox-face" />
+          <text x="260" y="168" textAnchor="middle" className="xf-sandbox-title">
+            WASM
+          </text>
+          <text x="260" y="188" textAnchor="middle" className="xf-sandbox-sub">
+            sandbox
+          </text>
+          <text x="260" y="418" textAnchor="middle" className="xf-sandbox-caption">
+            deny-by-default
+          </text>
+        </g>
+      </svg>
+
+      <figcaption>
+        <span className="xf-sandbox-legend">
+          <i className="is-warm" aria-hidden="true" /> plugins
+          <i className="is-cyan" aria-hidden="true" /> effects
+          <i className="is-violet" aria-hidden="true" /> extensions
+        </span>
+        <span className="xf-sandbox-note">Orbits are decorative; the list below is the source of truth.</span>
+      </figcaption>
+
+      <ul className="xf-capabilities" role="list">
+        {CAPABILITIES.map((item) => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+    </figure>
+  );
+}
diff --git a/src/components/landing/PluginSection.tsx b/src/components/landing/PluginSection.tsx
new file mode 100644
index 0000000..60ef3bc
--- /dev/null
+++ b/src/components/landing/PluginSection.tsx
@@ -0,0 +1,52 @@
+import CommandBlock from "./CommandBlock";
+import PluginSandbox from "./PluginSandbox";
+import SectionHeader from "./SectionHeader";
+import { PLUGINS, PLUGIN_COMMANDS } from "./data";
+
+export default function PluginSection() {
+  return (
+    <section id="plugins" className="xf-section" aria-labelledby="plugins-title">
+      <div className="xf-container">
+        <SectionHeader
+          id="plugins-title"
+          eyebrow="Extend"
+          title="Plugin system"
+          lead="xfetch communicates with external plugins via JSON over stdin/stdout. Install, list, and remove plugins with simple CLI commands."
+        />
+
+        <div className="xf-plugin-grid">
+          <div className="xf-plugin-main" data-reveal>
+            <CommandBlock code={PLUGIN_COMMANDS} label="plugin commands" />
+            <div className="xf-plugin-cards">
+              {PLUGINS.map((plugin) => (
+                <article key={plugin.name} className="xf-plugin-card">
+                  <div className="xf-plugin-card-head">
+                    <h3>
+                      <code>{plugin.name}</code>
+                    </h3>
+                    <span className="xf-plugin-dot" aria-hidden="true" />
+                  </div>
+                  <p>{plugin.desc}</p>
+                  <ul className="xf-tag-list" role="list" aria-label={`${plugin.name} tags`}>
+                    {plugin.tags.map((tag) => (
+                      <li key={tag}>{tag}</li>
+                    ))}
+                  </ul>
+                </article>
+              ))}
+            </div>
+          </div>
+
+          <PluginSandbox />
+        </div>
+
+        <p className="xf-discovery" data-reveal>
+          Plugin discovery: explicit path <span aria-hidden="true">→</span>{" "}
+          <code>xfetch-plugin-&lt;name&gt;</code> in PATH <span aria-hidden="true">→</span>{" "}
+          <code>~/.config/xfetch/plugins/</code> <span aria-hidden="true">→</span>{" "}
+          <code>./plugins/&lt;name&gt;/target/release</code>
+        </p>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/RoadmapSection.tsx b/src/components/landing/RoadmapSection.tsx
new file mode 100644
index 0000000..f2c6e9f
--- /dev/null
+++ b/src/components/landing/RoadmapSection.tsx
@@ -0,0 +1,49 @@
+import type { CSSProperties } from "react";
+import SectionHeader from "./SectionHeader";
+import { PHASES } from "./data";
+
+const STATUS_LABEL: Record<string, string> = {
+  done: "Done",
+  partial: "In progress",
+  planned: "Planned",
+};
+
+export default function RoadmapSection() {
+  return (
+    <section id="roadmap" className="xf-section" aria-labelledby="roadmap-title">
+      <div className="xf-container">
+        <SectionHeader
+          id="roadmap-title"
+          eyebrow="Direction"
+          title="Roadmap"
+          lead="What's next for xfetch — from real-time stats in daemon mode to config hot-reload. Contributions welcome!"
+        />
+
+        <div className="xf-roadmap-legend" data-reveal>
+          <span><i className="is-done" aria-hidden="true" /> Done</span>
+          <span><i className="is-partial" aria-hidden="true" /> In progress</span>
+        </div>
+
+        <ol className="xf-timeline" role="list">
+          {PHASES.map((phase, index) => (
+            <li
+              key={phase.title}
+              className={`xf-phase is-${phase.status}`}
+              data-reveal
+              style={{ "--reveal-delay": `${Math.min(index, 8) * 35}ms` } as CSSProperties}
+            >
+              <span className="xf-phase-marker" aria-hidden="true" />
+              <div className="xf-phase-body">
+                <div className="xf-phase-head">
+                  <h3>{phase.title}</h3>
+                  <span className="xf-status">{STATUS_LABEL[phase.status]}</span>
+                </div>
+                <p>{phase.desc}</p>
+              </div>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/SectionHeader.tsx b/src/components/landing/SectionHeader.tsx
new file mode 100644
index 0000000..f991dfb
--- /dev/null
+++ b/src/components/landing/SectionHeader.tsx
@@ -0,0 +1,19 @@
+export default function SectionHeader({
+  eyebrow,
+  title,
+  lead,
+  id,
+}: {
+  eyebrow: string;
+  title: string;
+  lead?: string;
+  id: string;
+}) {
+  return (
+    <header className="xf-sec-head" data-reveal>
+      <p className="xf-eyebrow">{eyebrow}</p>
+      <h2 id={id}>{title}</h2>
+      {lead ? <p className="xf-sec-lead">{lead}</p> : null}
+    </header>
+  );
+}
diff --git a/src/components/landing/SystemMap.tsx b/src/components/landing/SystemMap.tsx
new file mode 100644
index 0000000..6f6c48f
--- /dev/null
+++ b/src/components/landing/SystemMap.tsx
@@ -0,0 +1,242 @@
+"use client";
+
+import { useState } from "react";
+import SectionHeader from "./SectionHeader";
+
+type Layer = {
+  id: string;
+  title: string;
+  kicker: string;
+  detail: string;
+  points: string[];
+};
+
+const LAYERS: Layer[] = [
+  {
+    id: "config",
+    title: "Config",
+    kicker: "Input layer",
+    detail:
+      "config.jsonc is parsed with its comments intact. The selected theme is merged, then config-provider extensions may rewrite the resolved config before anything is probed.",
+    points: ["JSONC parsing", "Theme merge", "Extension chain"],
+  },
+  {
+    id: "probes",
+    title: "Probes",
+    kicker: "Collection layer",
+    detail:
+      "Built-in modules are collected in parallel — OS, kernel, CPU, GPU, memory, disk, battery, network and more. External plugins can add their own lines.",
+    points: ["Parallel probing", "18 landing modules", "Plugin info providers"],
+  },
+  {
+    id: "renderer",
+    title: "Renderer",
+    kicker: "Composition layer",
+    detail:
+      "The layout engine arranges modules and applies colors, Nerd Font icons, ASCII or image logos, and logo animations. Every layout is driven by the same resolved config.",
+    points: ["9 built-in layouts", "Icons + colors", "Logo animation"],
+  },
+  {
+    id: "terminal",
+    title: "Terminal",
+    kicker: "Output layer",
+    detail:
+      "ANSI lines are written to stdout. The live daemon can pin a subset at the top of the terminal and refresh it on an interval, with optional config hot-reload.",
+    points: ["ANSI output", "Live daemon", "Hot reload"],
+  },
+  {
+    id: "wasm",
+    title: "WASM sandbox",
+    kicker: "Extension plane",
+    detail:
+      "Plugins, effects and extensions can run as WebAssembly guests with deny-by-default capabilities and limits for time, memory and output. Native executables use the same JSON stdin/stdout contract.",
+    points: ["Plugins", "Effects", "Extensions"],
+  },
+];
+
+const HOTSPOTS = [
+  { left: "10%", top: "18.4%", width: "68%", height: "11.5%" },
+  { left: "10%", top: "37.7%", width: "68%", height: "11.5%" },
+  { left: "10%", top: "57%", width: "68%", height: "11.5%" },
+  { left: "10%", top: "76.3%", width: "68%", height: "11.5%" },
+  { left: "81.5%", top: "31.5%", width: "16.5%", height: "38%" },
+];
+
+export default function SystemMap() {
+  const [active, setActive] = useState(2);
+  const layer = LAYERS[active];
+
+  return (
+    <section id="architecture" className="xf-section" aria-labelledby="architecture-title">
+      <div className="xf-container">
+        <SectionHeader
+          id="architecture-title"
+          eyebrow="Under the hood"
+          title="One binary, four layers."
+          lead="Follow a run from JSONC to ANSI. The wasm sandbox sits beside the pipeline, so plugins, effects and extensions can extend it without owning the core."
+        />
+
+        <div className="xf-map-grid">
+          <figure className="xf-map-figure" data-reveal>
+            <div className="xf-map-canvas">
+              <svg viewBox="0 0 800 620" className="xf-map-svg" aria-hidden="true" focusable="false">
+                <defs>
+                  <linearGradient id="xfMapTop" x1="0" y1="0" x2="1" y2="1">
+                    <stop offset="0%" className="xf-map-stop-top-a" />
+                    <stop offset="100%" className="xf-map-stop-top-b" />
+                  </linearGradient>
+                  <linearGradient id="xfMapSide" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" className="xf-map-stop-side-a" />
+                    <stop offset="100%" className="xf-map-stop-side-b" />
+                  </linearGradient>
+                </defs>
+
+                <g className="xf-map-connectors">
+                  <path d="M350 180 L350 240" />
+                  <path d="M350 300 L350 360" />
+                  <path d="M350 420 L350 480" />
+                  <path d="M620 370 C 645 370 645 340 660 340" />
+                </g>
+
+                {[
+                  { y: 120, num: "01", name: "Config", sub: "config.jsonc + theme merge" },
+                  { y: 240, num: "02", name: "Probes", sub: "parallel module collection" },
+                  { y: 360, num: "03", name: "Renderer", sub: "layout · icons · colors" },
+                  { y: 480, num: "04", name: "Terminal", sub: "ANSI stdout + live daemon" },
+                ].map((row) => (
+                  <g key={row.name} className="xf-map-layer-g">
+                    <path
+                      d={`M80 ${row.y} L470 ${row.y - 50} L620 ${row.y + 10} L230 ${row.y + 60} Z`}
+                      fill="url(#xfMapTop)"
+                      className="xf-map-top"
+                    />
+                    <path
+                      d={`M80 ${row.y} L230 ${row.y + 60} L230 ${row.y + 84} L80 ${row.y + 24} Z`}
+                      fill="url(#xfMapSide)"
+                      className="xf-map-side"
+                    />
+                    <path
+                      d={`M230 ${row.y + 60} L620 ${row.y + 10} L620 ${row.y + 34} L230 ${row.y + 84} Z`}
+                      fill="url(#xfMapSide)"
+                      className="xf-map-side"
+                    />
+                    <text x="112" y={row.y + 26} className="xf-map-num">
+                      {row.num}
+                    </text>
+                    <text x="158" y={row.y + 27} className="xf-map-name">
+                      {row.name}
+                    </text>
+                    <text x="158" y={row.y + 45} className="xf-map-sub">
+                      {row.sub}
+                    </text>
+                  </g>
+                ))}
+
+                <g className="xf-map-plane">
+                  <path d="M660 200 L770 235 L770 430 L660 395 Z" fill="url(#xfMapTop)" className="xf-map-plane-face" />
+                  <path d="M660 200 L660 395 L770 430 L770 235 Z" className="xf-map-plane-edge" />
+                  <text x="686" y="290" className="xf-map-plane-title">
+                    WASM
+                  </text>
+                  <text x="686" y="310" className="xf-map-plane-sub">
+                    sandbox
+                  </text>
+                  <circle cx="700" cy="344" r="4" className="xf-map-node" />
+                  <text x="714" y="348" className="xf-map-node-label">
+                    plugins
+                  </text>
+                  <circle cx="700" cy="370" r="4" className="xf-map-node" />
+                  <text x="714" y="374" className="xf-map-node-label">
+                    effects
+                  </text>
+                  <circle cx="700" cy="396" r="4" className="xf-map-node" />
+                  <text x="714" y="400" className="xf-map-node-label">
+                    extensions
+                  </text>
+                </g>
+              </svg>
+
+              {LAYERS.map((item, index) => (
+                <button
+                  key={item.id}
+                  type="button"
+                  className={`xf-map-hotspot${active === index ? " is-active" : ""}`}
+                  style={HOTSPOTS[index]}
+                  aria-label={`Inspect layer ${index + 1}: ${item.title}`}
+                  aria-pressed={active === index}
+                  aria-controls="xf-map-detail"
+                  onMouseEnter={() => setActive(index)}
+                  onFocus={() => setActive(index)}
+                  onClick={() => setActive(index)}
+                >
+                  <span aria-hidden="true">{String(index + 1).padStart(2, "0")}</span>
+                </button>
+              ))}
+            </div>
+
+            <div className="xf-map-mobile-stack" role="group" aria-label="Inspect system layers">
+              {LAYERS.map((item, index) => (
+                <button
+                  key={item.id}
+                  type="button"
+                  className={`xf-map-mobile-layer${active === index ? " is-active" : ""}`}
+                  aria-pressed={active === index}
+                  aria-controls="xf-map-detail"
+                  onClick={() => setActive(index)}
+                >
+                  <span className="xf-map-mobile-num" aria-hidden="true">
+                    {String(index + 1).padStart(2, "0")}
+                  </span>
+                  <span className="xf-map-mobile-text">
+                    <strong>{item.title}</strong>
+                    <small>{item.kicker}</small>
+                  </span>
+                </button>
+              ))}
+            </div>
+
+            <figcaption>
+              Hover, focus or tap a layer. The blue links are data flow; the violet plane is the
+              sandbox boundary.
+            </figcaption>
+          </figure>
+
+          <div className="xf-map-side" data-reveal>
+            <div className="xf-map-tabs" role="group" aria-label="Inspect system layers">
+              {LAYERS.map((item, index) => (
+                <button
+                  key={item.id}
+                  type="button"
+                  className={`xf-map-tab${active === index ? " is-active" : ""}`}
+                  aria-pressed={active === index}
+                  onClick={() => setActive(index)}
+                  onMouseEnter={() => setActive(index)}
+                  onFocus={() => setActive(index)}
+                >
+                  <span className="xf-map-tab-num">{String(index + 1).padStart(2, "0")}</span>
+                  <span>{item.title}</span>
+                </button>
+              ))}
+            </div>
+
+            <div
+              className="xf-map-detail xf-glass"
+              id="xf-map-detail"
+              aria-live="polite"
+              aria-atomic="true"
+            >
+              <p className="xf-eyebrow">{layer.kicker}</p>
+              <h3>{layer.title}</h3>
+              <p>{layer.detail}</p>
+              <ul className="xf-tag-list" role="list">
+                {layer.points.map((point) => (
+                  <li key={point}>{point}</li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/TerminalDemo.tsx b/src/components/landing/TerminalDemo.tsx
new file mode 100644
index 0000000..13e736d
--- /dev/null
+++ b/src/components/landing/TerminalDemo.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import SectionHeader from "./SectionHeader";
+
+type Line =
+  | { type: "empty" }
+  | { type: "prompt"; label: string }
+  | { type: "dim"; label: string }
+  | { type: "info"; key: string; value: string }
+  | { type: "palette" };
+
+const LINES: Line[] = [
+  { type: "prompt", label: "xfetch" },
+  { type: "empty" },
+  { type: "dim", label: " ────── Hardware ──────" },
+  { type: "info", key: "cpu", value: "AMD Ryzen 9 7950X (16) @ 4.50 GHz" },
+  { type: "info", key: "gpu", value: "NVIDIA GeForce RTX 4090" },
+  { type: "info", key: "memory", value: "8.25 GiB / 31.20 GiB (26%)" },
+  { type: "info", key: "disk", value: "256.4 GiB / 1.0 TiB (25%)" },
+  { type: "info", key: "battery", value: "85% [Charging]" },
+  { type: "empty" },
+  { type: "dim", label: " ────── Software ──────" },
+  { type: "info", key: "os", value: "Arch Linux x86_64" },
+  { type: "info", key: "kernel", value: "6.6.1-arch1-1" },
+  { type: "info", key: "packages", value: "1456 (pacman)" },
+  { type: "info", key: "shell", value: "zsh" },
+  { type: "info", key: "wm", value: "Hyprland" },
+  { type: "empty" },
+  { type: "dim", label: " ────── Session ──────" },
+  { type: "info", key: "user", value: "x0z" },
+  { type: "info", key: "uptime", value: "2 hours, 15 mins" },
+  { type: "info", key: "datetime", value: "2026-07-13 14:23:00" },
+  { type: "empty" },
+  { type: "palette" },
+  { type: "empty" },
+  { type: "prompt", label: "█" },
+];
+
+const PALETTE = ["#f07178", "#f78c6c", "#ffcb6b", "#78dba9", "#78dce8", "#82aaff", "#b388ff", "#dea584"];
+
+const TRANSCRIPT = LINES.map((line) => {
+  if (line.type === "empty") return "";
+  if (line.type === "prompt") return `$ ${line.label}`;
+  if (line.type === "dim") return line.label;
+  if (line.type === "info") return `${line.key.padEnd(9)} ${line.value}`;
+  return "ANSI palette: red, orange, yellow, green, cyan, blue, violet, peach";
+}).join("\n");
+
+export default function TerminalDemo() {
+  const [visible, setVisible] = useState(0);
+  const section = useRef<HTMLDivElement>(null);
+  const timer = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const clear = useCallback(() => {
+    if (timer.current) {
+      clearInterval(timer.current);
+      timer.current = null;
+    }
+  }, []);
+
+  const start = useCallback(() => {
+    clear();
+    setVisible(0);
+    let count = 0;
+    timer.current = setInterval(() => {
+      count += 1;
+      setVisible(count);
+      if (count >= LINES.length) clear();
+    }, 55);
+  }, [clear]);
+
+  useEffect(() => {
+    return () => clear();
+  }, [clear]);
+
+  useEffect(() => {
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduce) {
+      const frame = window.requestAnimationFrame(() => setVisible(LINES.length));
+      return () => window.cancelAnimationFrame(frame);
+    }
+    const el = section.current;
+    if (!el || typeof IntersectionObserver === "undefined") {
+      start();
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          start();
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.2 },
+    );
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+      clear();
+    };
+  }, [clear, start]);
+
+  return (
+    <section id="terminal" className="xf-section" aria-labelledby="terminal-title">
+      <div className="xf-container">
+        <div className="xf-split">
+          <div className="xf-terminal-copy" data-reveal>
+            <SectionHeader
+              id="terminal-title"
+              eyebrow="● Live demo"
+              title="See it in action"
+              lead="Watch xfetch display your system information in real time. This is a simulated terminal session."
+            />
+            <div className="xf-terminal-actions">
+              <button type="button" className="xf-btn xf-btn--primary" onClick={start}>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <path d="M3 12a9 9 0 1 0 3-6.7L3 8" />
+                  <path d="M3 3v5h5" />
+                </svg>
+                Replay
+              </button>
+              <p className="xf-hint">Click to replay</p>
+            </div>
+          </div>
+
+          <div className="xf-terminal-shell" data-reveal>
+            <div className="xf-term-window" ref={section}>
+              <div className="xf-term-chrome">
+                <span className="xf-term-dot is-red" />
+                <span className="xf-term-dot is-amber" />
+                <span className="xf-term-dot is-green" />
+                <span className="xf-term-title">xfetch — bash</span>
+                <span className="xf-term-badge">stdout</span>
+              </div>
+              <p className="xf-sr-only">{TRANSCRIPT}</p>
+              <div
+                className="xf-terminal-scroll"
+                role="region"
+                aria-label="xfetch terminal output"
+                tabIndex={0}
+              >
+                <pre className="xf-terminal-pre" aria-hidden="true">
+                  {LINES.slice(0, visible).map((line, index) => {
+                  if (line.type === "empty") return <span key={index} className="xf-line-empty" />;
+                  if (line.type === "prompt") {
+                    return (
+                      <span key={index} className="xf-line-prompt">
+                        <span>$</span> {line.label}
+                      </span>
+                    );
+                  }
+                  if (line.type === "dim") {
+                    return (
+                      <span key={index} className="xf-line-dim">
+                        {line.label}
+                      </span>
+                    );
+                  }
+                  if (line.type === "info") {
+                    return (
+                      <span key={index} className="xf-line-info">
+                        <span className="xf-line-key">{line.key}</span>
+                        <span>{line.value}</span>
+                      </span>
+                    );
+                  }
+                  return (
+                    <span key={index} className="xf-line-palette">
+                      {PALETTE.map((color) => (
+                        <span key={color} style={{ color }}>
+                          ███
+                        </span>
+                      ))}
+                    </span>
+                  );
+                })}
+                  <span className="xf-terminal-cursor" aria-hidden="true" />
+                </pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/UninstallSection.tsx b/src/components/landing/UninstallSection.tsx
new file mode 100644
index 0000000..d3405a2
--- /dev/null
+++ b/src/components/landing/UninstallSection.tsx
@@ -0,0 +1,34 @@
+import CommandBlock from "./CommandBlock";
+import SectionHeader from "./SectionHeader";
+import { MANUAL_UNINSTALL, QUICK_UNINSTALL } from "./data";
+
+export default function UninstallSection() {
+  return (
+    <section id="uninstall" className="xf-section" aria-labelledby="uninstall-title">
+      <div className="xf-container">
+        <SectionHeader
+          id="uninstall-title"
+          eyebrow="Remove"
+          title="Uninstall"
+          lead="Remove the binary, or clean out the config too if you no longer need your settings."
+        />
+
+        <div className="xf-uninstall-grid" data-reveal>
+          <div>
+            <h3 className="xf-subhead">Quick uninstall</h3>
+            <CommandBlock code={QUICK_UNINSTALL} label="quick uninstall" />
+          </div>
+          <div>
+            <h3 className="xf-subhead">Manual uninstall</h3>
+            <CommandBlock code={MANUAL_UNINSTALL} label="manual uninstall" />
+          </div>
+        </div>
+
+        <p className="xf-caution">
+          The manual commands remove both the binary and <code>~/.config/xfetch</code>. Back up
+          custom configs and themes first.
+        </p>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/UsageSection.tsx b/src/components/landing/UsageSection.tsx
new file mode 100644
index 0000000..7ac30fc
--- /dev/null
+++ b/src/components/landing/UsageSection.tsx
@@ -0,0 +1,20 @@
+import CommandBlock from "./CommandBlock";
+import SectionHeader from "./SectionHeader";
+
+export default function UsageSection() {
+  return (
+    <section id="usage" className="xf-section" aria-labelledby="usage-title">
+      <div className="xf-container">
+        <div className="xf-usage" data-reveal>
+          <SectionHeader
+            id="usage-title"
+            eyebrow="Run"
+            title="Usage"
+            lead="Simply run xfetch in your terminal:"
+          />
+          <CommandBlock code="xfetch" label="run xfetch" className="xf-usage-code" />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/data.ts b/src/components/landing/data.ts
new file mode 100644
index 0000000..2b5d081
--- /dev/null
+++ b/src/components/landing/data.ts
@@ -0,0 +1,362 @@
+export type Feature = {
+  key: string;
+  icon: string;
+  title: string;
+  desc: string;
+};
+
+export const FEATURES: Feature[] = [
+  {
+    key: "sysinfo",
+    icon: "sysinfo",
+    title: "System information",
+    desc: "OS, kernel, CPU, GPU, memory, disk, battery, uptime, packages, shell, terminal, WM/DE and more.",
+  },
+  {
+    key: "crossplatform",
+    icon: "crossplatform",
+    title: "Cross-platform",
+    desc: "Works on Linux, Windows, and macOS. Same tool, same config — everywhere.",
+  },
+  {
+    key: "layouts",
+    icon: "layouts-icon",
+    title: "Multiple layouts",
+    desc: "Classic side-by-side, Pac-Man, tree, section, side-block, box, lines, dots, and bottom-line.",
+  },
+  {
+    key: "jsonc",
+    icon: "jsonc",
+    title: "JSONC config",
+    desc: "Full customization via config.jsonc — modules, icons, colors, logos, and layouts.",
+  },
+  {
+    key: "palette",
+    icon: "palette-icon",
+    title: "Color palette",
+    desc: "Built-in ANSI color palette display with square, circle, triangle, and line styles.",
+  },
+  {
+    key: "plugins",
+    icon: "plugins-icon",
+    title: "Plugin system",
+    desc: "Extend with external plugins via JSON over stdin/stdout. Animate logos, fetch GitHub stats, and more.",
+  },
+  {
+    key: "logoanim",
+    icon: "logoanim",
+    title: "Logo animation",
+    desc: "Animate ASCII logos with sweep, wave, rainbow, sparkle, breathing, and frame-by-frame styles.",
+  },
+  {
+    key: "nerdfont",
+    icon: "nerdfont",
+    title: "NERD Font icons",
+    desc: "Customizable Nerd Font icons per module. Use emojis, text, or any Unicode glyph.",
+  },
+  {
+    key: "logos",
+    icon: "logos-icon",
+    title: "ASCII & image logos",
+    desc: "Display text logos with ANSI colors or image files (png, jpg, svg) via viuer.",
+  },
+];
+
+export const MODULE_CATEGORIES = [
+  "All",
+  "Hardware",
+  "Software",
+  "System",
+  "Session",
+  "Network",
+  "Display",
+] as const;
+
+export type ModuleCategory = (typeof MODULE_CATEGORIES)[number];
+
+export type ModuleEntry = {
+  icon: string;
+  name: string;
+  desc: string;
+  category: Exclude<ModuleCategory, "All">;
+};
+
+export const MODULES: ModuleEntry[] = [
+  { icon: "os", name: "os", desc: "Operating system name, version & architecture", category: "System" },
+  { icon: "kernel", name: "kernel", desc: "Kernel version", category: "System" },
+  { icon: "hostname", name: "hostname", desc: "Machine hostname", category: "System" },
+  { icon: "uptime", name: "uptime", desc: "System uptime", category: "System" },
+  { icon: "packages", name: "packages", desc: "Package count (pacman, dpkg, scoop, brew, etc.)", category: "Software" },
+  { icon: "shell", name: "shell", desc: "Current shell (bash, zsh, powershell)", category: "Software" },
+  { icon: "terminal-icon", name: "terminal", desc: "Terminal emulator", category: "Software" },
+  { icon: "wm", name: "wm", desc: "Window Manager / Desktop Environment", category: "Software" },
+  { icon: "cpu", name: "cpu", desc: "CPU model, cores & frequency", category: "Hardware" },
+  { icon: "gpu", name: "gpu", desc: "GPU model(s) — integrated & discrete", category: "Hardware" },
+  { icon: "memory", name: "memory", desc: "RAM used / total with percentage", category: "Hardware" },
+  { icon: "swap", name: "swap", desc: "Swap usage", category: "Hardware" },
+  { icon: "disk", name: "disk", desc: "Disk usage", category: "Hardware" },
+  { icon: "battery", name: "battery", desc: "Battery level & status (charging/discharging)", category: "Hardware" },
+  { icon: "user", name: "user", desc: "Current username", category: "Session" },
+  { icon: "datetime", name: "datetime", desc: "Current date & time", category: "Session" },
+  { icon: "local_ip", name: "local_ip", desc: "Local IP address", category: "Network" },
+  { icon: "palette-mod", name: "palette", desc: "ANSI color palette (squares, circles, triangles, lines)", category: "Display" },
+];
+
+export type LayoutExample = {
+  id: string;
+  title: string;
+  desc: string;
+  code: string;
+  preview: "default" | "pacman" | "section" | "side-block" | "tree" | "box";
+};
+
+export const LAYOUT_EXAMPLES: LayoutExample[] = [
+  {
+    id: "default",
+    title: "Default (Classic)",
+    desc: "Logo on the left, info on the right. Clean and familiar.",
+    code: '{\n  "layout": null\n}',
+    preview: "default",
+  },
+  {
+    id: "pacman",
+    title: "Pac-Man",
+    desc: "Boxed layout with Pac-Man header and footer. Fun and retro.",
+    code: '{\n  "layout": "pacman"\n}',
+    preview: "pacman",
+  },
+  {
+    id: "section",
+    title: "Section",
+    desc: "Grouped modules with clear section headers.",
+    code: '{\n  "layout": "section",\n  "modules": [\n    { "type": "group", "title": "Hardware",\n      "modules": ["cpu","gpu","memory"] },\n    { "type": "group", "title": "Software",\n      "modules": ["os","shell"] }\n  ]\n}',
+    preview: "section",
+  },
+  {
+    id: "side-block",
+    title: "Side Block",
+    desc: "Keys and values in separate side-by-side boxes.",
+    code: '{\n  "layout": "side-block"\n}',
+    preview: "side-block",
+  },
+  {
+    id: "tree",
+    title: "Tree",
+    desc: "Hierarchical tree with nested groups. Great for organizing.",
+    code: '{\n  "layout": "tree",\n  "modules": [\n    { "type": "group", "title": "OS",\n      "modules": ["os","kernel","packages"] },\n    { "type": "group", "title": "PC",\n      "modules": ["cpu","gpu","memory"] }\n  ]\n}',
+    preview: "tree",
+  },
+  {
+    id: "box",
+    title: "Box",
+    desc: "All info enclosed in a rounded box.",
+    code: '{\n  "layout": "box"\n}',
+    preview: "box",
+  },
+];
+
+export type InstallTab = { id: string; label: string };
+export type InstallLine = { text: string; comment: boolean };
+export type InstallContent = Record<string, { lines: InstallLine[] }>;
+
+export const INSTALL_TABS: InstallTab[] = [
+  { id: "linux", label: "Linux / macOS" },
+  { id: "windows", label: "Windows" },
+  { id: "source", label: "Build from source" },
+  { id: "arch", label: "Arch/X Linux" },
+];
+
+export const INSTALL_CONTENT: InstallContent = {
+  linux: {
+    lines: [
+      { text: "# One-liner (curl)", comment: true },
+      {
+        text: "curl -fsSL https://raw.githubusercontent.com/xfetch-cli/xfetch/main/install.sh | bash",
+        comment: false,
+      },
+      { text: "", comment: false },
+      { text: "# Custom prefix", comment: true },
+      { text: "bash <(curl -fsSL ...) --prefix /usr/local", comment: false },
+    ],
+  },
+  windows: {
+    lines: [
+      { text: "# PowerShell one-liner", comment: true },
+      {
+        text: "irm https://raw.githubusercontent.com/xfetch-cli/xfetch/main/install.ps1 | iex",
+        comment: false,
+      },
+    ],
+  },
+  source: {
+    lines: [
+      { text: "# Clone & build manually", comment: true },
+      { text: "git clone https://github.com/xfetch-cli/xfetch.git", comment: false },
+      { text: "cd xfetch", comment: false },
+      { text: "cargo build --release", comment: false },
+      { text: "", comment: false },
+      { text: "# Binary → target/release/xfetch", comment: true },
+      { text: "cp target/release/xfetch ~/.local/bin/", comment: false },
+      { text: "", comment: false },
+      { text: "# Config files", comment: true },
+      { text: "mkdir -p ~/.config/xfetch", comment: false },
+      { text: "cp configs/config.jsonc ~/.config/xfetch/config.jsonc", comment: false },
+    ],
+  },
+  arch: {
+    lines: [
+      { text: "# Using the PKGBUILD in the repo", comment: true },
+      { text: "git clone https://github.com/xfetch-cli/xfetch.git", comment: false },
+      { text: "cd xfetch", comment: false },
+      { text: "makepkg -si", comment: false },
+      { text: "", comment: false },
+      { text: "# Installed to /usr/bin/xfetch", comment: true },
+      { text: "pacman -R xfetch-git   # to uninstall", comment: false },
+    ],
+  },
+};
+
+export const ALL_MODULES = [
+  { value: "os", icon: "os" as const },
+  { value: "kernel", icon: "kernel" as const },
+  { value: "hostname", icon: "hostname" as const },
+  { value: "uptime", icon: "uptime" as const },
+  { value: "packages", icon: "packages" as const },
+  { value: "shell", icon: "shell" as const },
+  { value: "terminal", icon: "terminal-icon" as const },
+  { value: "wm", icon: "wm" as const },
+  { value: "cpu", icon: "cpu" as const },
+  { value: "gpu", icon: "gpu" as const },
+  { value: "memory", icon: "memory" as const },
+  { value: "swap", icon: "swap" as const },
+  { value: "disk", icon: "disk" as const },
+  { value: "battery", icon: "battery" as const },
+  { value: "user", icon: "user" as const },
+  { value: "datetime", icon: "datetime" as const },
+  { value: "local_ip", icon: "local_ip" as const },
+  { value: "palette", icon: "palette-mod" as const },
+];
+
+export const LAYOUT_OPTIONS = [
+  { value: "null", label: "Default (classic)" },
+  { value: "pacman", label: "Pac-Man" },
+  { value: "box", label: "Box" },
+  { value: "section", label: "Section" },
+  { value: "tree", label: "Tree" },
+  { value: "side-block", label: "Side Block" },
+  { value: "line", label: "Line" },
+  { value: "dots", label: "Dots" },
+  { value: "bottom_line", label: "Bottom Line" },
+];
+
+export const DEFAULT_MODULES = [
+  "os",
+  "kernel",
+  "uptime",
+  "packages",
+  "shell",
+  "wm",
+  "cpu",
+  "gpu",
+  "memory",
+  "disk",
+  "palette",
+];
+
+export type PluginEntry = { name: string; desc: string; tags: string[] };
+
+export const PLUGINS: PluginEntry[] = [
+  {
+    name: "animate-logo",
+    desc: "Animates ASCII logos with multiple color effects via JSON protocol.",
+    tags: ["sweep", "wave", "rainbow", "sparkle", "breathing", "frame"],
+  },
+  {
+    name: "github-stats",
+    desc: "Fetches GitHub user stats via the public API.",
+    tags: ["github", "api"],
+  },
+  {
+    name: "custom",
+    desc: "Any executable reading JSON from stdin and writing JSON to stdout works.",
+    tags: ["JSON protocol", "any language"],
+  },
+];
+
+export type Phase = { title: string; desc: string; status: "done" | "partial" | "planned" };
+
+export const PHASES: Phase[] = [
+  {
+    title: "Phase 0-3 — Foundation & modules",
+    desc: "Core system, all info modules, 20+ example configs, install scripts, layouts, documentation.",
+    status: "done",
+  },
+  {
+    title: "Phase 4 — Package manager expansion",
+    desc: "RPM, APK (Alpine), Nix, Homebrew, Chocolatey, multi-manager detection, performance optimization.",
+    status: "done",
+  },
+  {
+    title: "Phase 5 — Network & connectivity",
+    desc: "Local/public IP (with privacy toggle), IPv6, network interface display.",
+    status: "done",
+  },
+  {
+    title: "Phase 6 — Enhanced modules",
+    desc: "Music player (MPD), Spotify, weather, timezone, user info, display resolution, theme detection.",
+    status: "done",
+  },
+  {
+    title: "Phase 7 — Additional layouts",
+    desc: "Compact, horizontal, bottom, minimal (text-only), layout preview documentation.",
+    status: "done",
+  },
+  {
+    title: "Phase 8 — Performance",
+    desc: "Parallel probing, caching, lazy loading, benchmarking, profiling, modularized files.",
+    status: "done",
+  },
+  {
+    title: "Phase 9 — CI/CD & distribution",
+    desc: "GitHub Actions, macOS/Windows binaries, Homebrew tap, AUR, install scripts, changelog automation.",
+    status: "done",
+  },
+  {
+    title: "Phase 10 — Community & ecosystem",
+    desc: "Themes registry, plugin system, theme download manager, community contributions, theme preview tool.",
+    status: "done",
+  },
+  {
+    title: "Phase 11 — Testing & QA",
+    desc: "Unit/integration tests, clippy, rustfmt, platform-specific tests, cross-platform suite, coverage.",
+    status: "partial",
+  },
+  {
+    title: "Phase 12 — Advanced features",
+    desc: "Daemon mode, custom scripting, conditional modules, theme variables, telemetry (opt-in); pending: real-time stats in daemon mode, config hot-reload, animations, accessibility.",
+    status: "partial",
+  },
+  {
+    title: "Phase 13 — Marketing",
+    desc: "User manual, video tutorials, project website, blog posts, comparison guide, community channel.",
+    status: "partial",
+  },
+];
+
+export const INSTALL_AFTER = "$ xfetch\n$ xfetch --version\n$ xfetch --gen-config";
+
+export const PLUGIN_COMMANDS = `# Install from local path
+xfetch plugin install ./plugins/animate-logo
+
+# List installed
+xfetch plugin list
+
+# Remove
+xfetch plugin remove animate-logo`;
+
+export const QUICK_UNINSTALL =
+  "curl -fsSL https://raw.githubusercontent.com/xfetch-cli/xfetch/main/uninstall.sh | bash";
+
+export const MANUAL_UNINSTALL = "rm ~/.local/bin/xfetch\nrm -rf ~/.config/xfetch";
+
+export const CUSTOM_CONFIG_COMMAND = "xfetch --config path/to/my_config.jsonc";
diff --git a/src/components/landing/links.ts b/src/components/landing/links.ts
new file mode 100644
index 0000000..a68fdc5
--- /dev/null
+++ b/src/components/landing/links.ts
@@ -0,0 +1,2 @@
+export const REPO_URL = "https://github.com/xfetch-cli/xfetch";
+export const VERSION = "1.0.1";