diff --git a/examples/app_hub/README.md b/examples/app_hub/README.md
index 5305eff..f7a9beb 100644
--- a/examples/app_hub/README.md
+++ b/examples/app_hub/README.md
@@ -2,7 +2,11 @@
**Infra overview:** [docs/INFRA.md](../../docs/INFRA.md)
+Static landing: `index.html`, `hub.css`, `assets/hub-logo.svg` (globe + rocket; palette matches crash console).
+
**BE only.** FE `apps.f0xx.org` sends `location /` → `http://artc0.intra.raptor.org:80` (not :8089).
+Deploy copies/symlink under `.../androidcast_project/` on the VM. Background watermark is **3% opacity** (`hub.css`).
+
See **[DEPLOY.md](DEPLOY.md)** — edit `listen 80` in `tmp/BE_alpine/etc/nginx/conf.d/apps.conf` using
`examples/crash_reporter/backend/nginx.apps-port80.fragment`.
diff --git a/examples/app_hub/assets/hub-logo.svg b/examples/app_hub/assets/hub-logo.svg
new file mode 100644
index 0000000..249fa7f
--- /dev/null
+++ b/examples/app_hub/assets/hub-logo.svg
@@ -0,0 +1,91 @@
+
diff --git a/examples/app_hub/hub.css b/examples/app_hub/hub.css
new file mode 100644
index 0000000..48e5d08
--- /dev/null
+++ b/examples/app_hub/hub.css
@@ -0,0 +1,192 @@
+/* Project hub — matches crash console tokens (app.css) */
+
+.hub-page {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ isolation: isolate;
+}
+
+/* 97% transparent watermark */
+.hub-page::before {
+ content: "";
+ position: fixed;
+ inset: 0;
+ z-index: 0;
+ pointer-events: none;
+ background: url("assets/hub-logo.svg") center center / min(92vmin, 960px) no-repeat;
+ opacity: 0.03;
+}
+
+[data-theme="light"] .hub-page::before {
+ opacity: 0.035;
+}
+
+.hub-shell {
+ flex: 1;
+ min-height: calc(100vh - 40px);
+ position: relative;
+ z-index: 1;
+}
+
+.hub-main {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: calc(100vh - 40px);
+ padding: 32px 28px 48px;
+ box-sizing: border-box;
+}
+
+.hub-header {
+ text-align: center;
+ margin-bottom: 36px;
+}
+
+.hub-brand {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 8px;
+}
+
+.hub-logo-mark {
+ width: 56px;
+ height: 42px;
+ color: var(--accent);
+}
+
+.hub-title {
+ margin: 0 0 8px;
+ font-size: 1.75rem;
+ font-weight: 600;
+ letter-spacing: -0.02em;
+}
+
+.hub-subtitle {
+ margin: 0 0 16px;
+}
+
+.hub-theme {
+ justify-content: center;
+}
+
+.hub-cards {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(200px, 1fr));
+ gap: 24px;
+ width: 100%;
+ max-width: 1080px;
+ margin: 0;
+}
+
+.hub-card {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 14px;
+ padding: 22px 24px;
+ color: var(--text);
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.hub-card:hover,
+.hub-card:focus-visible {
+ color: var(--text);
+ text-decoration: none;
+ outline: none;
+}
+
+.hub-cards .hub-card {
+ transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.hub-cards .hub-card:hover,
+.hub-cards .hub-card:focus-visible {
+ transform: translateY(-10px);
+ box-shadow: 0 20px 48px rgba(0, 0, 0, 0.44);
+ border-color: var(--accent);
+}
+
+[data-theme="light"] .hub-cards .hub-card:hover,
+[data-theme="light"] .hub-cards .hub-card:focus-visible {
+ box-shadow: 0 20px 44px rgba(26, 35, 50, 0.28);
+}
+
+.hub-card-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ width: 40px;
+ height: 40px;
+ color: var(--accent);
+}
+
+.hub-card-icon .nav-icon {
+ position: relative;
+}
+
+.hub-card-label {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 1.25;
+ text-align: left;
+}
+
+.nav-icon--git {
+ width: 18px;
+ height: 18px;
+}
+
+.nav-icon--git::before {
+ content: "";
+ position: absolute;
+ left: 2px;
+ top: 2px;
+ width: 7px;
+ height: 7px;
+ border: 2px solid currentColor;
+ border-radius: 50%;
+ box-sizing: border-box;
+}
+
+.nav-icon--git::after {
+ content: "";
+ position: absolute;
+ left: 8px;
+ top: 5px;
+ width: 10px;
+ height: 10px;
+ border: 2px solid currentColor;
+ border-left: none;
+ border-bottom: none;
+ border-radius: 0 6px 0 0;
+ box-sizing: border-box;
+}
+
+.hub-page .bottom-bar {
+ position: relative;
+ z-index: 1;
+}
+
+@media (max-width: 860px) {
+ .hub-cards {
+ grid-template-columns: 1fr;
+ max-width: 420px;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .hub-cards .hub-card {
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
+ }
+ .hub-cards .hub-card:hover,
+ .hub-cards .hub-card:focus-visible {
+ transform: none;
+ }
+}
diff --git a/examples/app_hub/index.html b/examples/app_hub/index.html
index 43abe3a..7465ce7 100644
--- a/examples/app_hub/index.html
+++ b/examples/app_hub/index.html
@@ -11,70 +11,16 @@
})();
-
+
+