From fd078f084f924ce7a4222e6fb63df71abde0a117 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 24 Feb 2026 19:24:41 -0800
Subject: [PATCH] feat: redesign as higher-level explainer site with functional
 area breakdown

Restructure rstack.online from a flat app grid into a narrative explainer
site organized by functional areas (Create, Plan, Communicate, Decide,
Fund, Share, Observe). Add architecture diagram, open-source foundations
section, interactive demo section, and sticky nav with section links.
Each app card now shows the OSS tools it's built on.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 index.html | 2129 +++++++++++++++++++++++++++++-----------------------
 1 file changed, 1210 insertions(+), 919 deletions(-)

diff --git a/index.html b/index.html
index bd315f0..a8711fa 100644
--- a/index.html
+++ b/index.html
@@ -4,214 +4,480 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📦</text></svg>">
-	<title>rStack - Open-Source, Self-Hosted Tools for Communities</title>
+	<title>rStack — Open-Source Community Infrastructure</title>
+	<meta name="description" content="A complete open-source stack for community self-governance. Self-hosted tools tied together with zero-knowledge identity and data sovereignty.">
 	<style>
 		* { margin: 0; padding: 0; box-sizing: border-box; }
 
 		body {
 			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-			background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+			background: #0b1120;
 			color: #e2e8f0;
 			min-height: 100vh;
+			line-height: 1.6;
 		}
 
+		a { color: inherit; }
+
+		.hl { color: #22d3ee; font-weight: 600; }
+		.hl-purple { color: #a78bfa; font-weight: 600; }
+		.hl-green { color: #34d399; font-weight: 600; }
+		.hl-orange { color: #fb923c; font-weight: 600; }
+
+		/* ── Nav ──────────────────────────────────────── */
+
+		nav {
+			position: sticky;
+			top: 0;
+			z-index: 100;
+			background: rgba(11, 17, 32, 0.85);
+			backdrop-filter: blur(12px);
+			border-bottom: 1px solid rgba(255,255,255,0.06);
+		}
+
+		.nav-inner {
+			max-width: 1100px;
+			margin: 0 auto;
+			padding: 0 1.5rem;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			height: 56px;
+		}
+
+		.nav-left {
+			display: flex;
+			align-items: center;
+			gap: 0.75rem;
+		}
+
+		.nav-brand {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			text-decoration: none;
+			color: #e2e8f0;
+			font-size: 1.1rem;
+			font-weight: 600;
+		}
+
+		.nav-links {
+			display: flex;
+			align-items: center;
+			gap: 1.5rem;
+		}
+
+		.nav-links a {
+			color: #94a3b8;
+			text-decoration: none;
+			font-size: 0.875rem;
+			transition: color 0.2s;
+		}
+
+		.nav-links a:hover { color: #e2e8f0; }
+
 		/* ── Hero ─────────────────────────────────────── */
 
 		.hero {
 			text-align: center;
-			padding: 6rem 1.5rem 4rem;
-			max-width: 720px;
+			padding: 7rem 1.5rem 5rem;
+			max-width: 820px;
 			margin: 0 auto;
 		}
 
+		.hero-label {
+			display: inline-block;
+			font-size: 0.75rem;
+			font-weight: 700;
+			letter-spacing: 0.15em;
+			text-transform: uppercase;
+			color: #22d3ee;
+			background: rgba(34, 211, 238, 0.1);
+			border: 1px solid rgba(34, 211, 238, 0.2);
+			padding: 0.35rem 1rem;
+			border-radius: 100px;
+			margin-bottom: 2rem;
+		}
+
 		.hero h1 {
-			font-size: 3.5rem;
-			margin-bottom: 0.5rem;
-			background: linear-gradient(135deg, #14b8a6, #7c3aed, #f97316);
+			font-size: 3.75rem;
+			margin-bottom: 1rem;
+			background: linear-gradient(135deg, #22d3ee, #a78bfa, #fb923c);
 			-webkit-background-clip: text;
 			-webkit-text-fill-color: transparent;
-			letter-spacing: -0.02em;
+			letter-spacing: -0.03em;
+			line-height: 1.1;
 		}
 
-		.hero .tagline {
-			font-size: 1.3rem;
-			color: #94a3b8;
+		.hero .subtitle {
+			font-size: 1.35rem;
+			color: #cbd5e1;
 			margin-bottom: 1.5rem;
-			line-height: 1.6;
+			line-height: 1.5;
+			font-weight: 400;
 		}
 
 		.hero .description {
-			font-size: 1rem;
+			font-size: 1.05rem;
 			color: #64748b;
-			line-height: 1.7;
-			max-width: 560px;
+			line-height: 1.8;
+			max-width: 640px;
 			margin: 0 auto 2.5rem;
 		}
 
-		.hero .description .hl {
-			color: #00d4ff;
-			font-weight: 600;
+		.hero-actions {
+			display: flex;
+			gap: 1rem;
+			justify-content: center;
+			flex-wrap: wrap;
 		}
 
-		/* ── Pillars ──────────────────────────────────── */
+		.btn {
+			display: inline-flex;
+			align-items: center;
+			gap: 0.5rem;
+			padding: 0.75rem 1.75rem;
+			border-radius: 8px;
+			font-weight: 600;
+			font-size: 0.95rem;
+			text-decoration: none;
+			transition: transform 0.2s, box-shadow 0.2s;
+		}
 
-		.pillars {
+		.btn:hover { transform: translateY(-1px); }
+
+		.btn-primary {
+			background: linear-gradient(135deg, #22d3ee, #a78bfa);
+			color: #0b1120;
+		}
+
+		.btn-secondary {
+			background: rgba(255,255,255,0.06);
+			border: 1px solid rgba(255,255,255,0.12);
+			color: #cbd5e1;
+		}
+
+		.btn-secondary:hover {
+			border-color: rgba(255,255,255,0.25);
+		}
+
+		/* ── Principles ──────────────────────────────── */
+
+		.principles {
 			display: grid;
-			grid-template-columns: repeat(3, 1fr);
-			gap: 1rem;
-			max-width: 720px;
-			margin: 0 auto 4rem;
+			grid-template-columns: repeat(4, 1fr);
+			gap: 1.25rem;
+			max-width: 1100px;
+			margin: 0 auto 6rem;
 			padding: 0 1.5rem;
 		}
 
-		.pillar {
+		.principle {
+			background: rgba(255,255,255,0.03);
+			border: 1px solid rgba(255,255,255,0.06);
+			border-radius: 16px;
+			padding: 2rem 1.5rem;
+			text-align: center;
+			transition: border-color 0.2s;
+		}
+
+		.principle:hover {
+			border-color: rgba(255,255,255,0.12);
+		}
+
+		.principle-icon {
+			width: 48px;
+			height: 48px;
+			margin: 0 auto 1rem;
+			border-radius: 12px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 1.5rem;
+		}
+
+		.principle-icon.open { background: rgba(34, 211, 238, 0.12); }
+		.principle-icon.self { background: rgba(167, 139, 250, 0.12); }
+		.principle-icon.zk   { background: rgba(52, 211, 153, 0.12); }
+		.principle-icon.sov  { background: rgba(251, 146, 60, 0.12); }
+
+		.principle h3 {
+			font-size: 0.95rem;
+			margin-bottom: 0.5rem;
+			color: #f1f5f9;
+		}
+
+		.principle p {
+			font-size: 0.85rem;
+			color: #64748b;
+			line-height: 1.5;
+		}
+
+		/* ── Section Commons ─────────────────────────── */
+
+		.section {
+			padding: 6rem 1.5rem;
+		}
+
+		.section.alt { background: rgba(255,255,255,0.015); }
+
+		.section-inner {
+			max-width: 1100px;
+			margin: 0 auto;
+		}
+
+		.section-label {
+			display: inline-block;
+			font-size: 0.7rem;
+			font-weight: 700;
+			letter-spacing: 0.12em;
+			text-transform: uppercase;
+			margin-bottom: 1rem;
+			padding: 0.25rem 0.75rem;
+			border-radius: 100px;
+		}
+
+		.section-label.cyan    { color: #22d3ee; background: rgba(34,211,238,0.1); }
+		.section-label.purple  { color: #a78bfa; background: rgba(167,139,250,0.1); }
+		.section-label.green   { color: #34d399; background: rgba(52,211,153,0.1); }
+		.section-label.orange  { color: #fb923c; background: rgba(251,146,60,0.1); }
+		.section-label.rose    { color: #fb7185; background: rgba(251,113,133,0.1); }
+		.section-label.amber   { color: #fbbf24; background: rgba(251,191,36,0.1); }
+		.section-label.sky     { color: #38bdf8; background: rgba(56,189,248,0.1); }
+
+		.section h2 {
+			font-size: 2.25rem;
+			margin-bottom: 1rem;
+			letter-spacing: -0.02em;
+			line-height: 1.2;
+		}
+
+		.section-desc {
+			font-size: 1.1rem;
+			color: #94a3b8;
+			line-height: 1.7;
+			max-width: 640px;
+			margin-bottom: 3rem;
+		}
+
+		/* ── Stack Architecture ──────────────────────── */
+
+		.arch-layers {
+			display: flex;
+			flex-direction: column;
+			gap: 0.75rem;
+			max-width: 700px;
+			margin: 0 auto;
+		}
+
+		.arch-layer {
+			display: flex;
+			align-items: stretch;
+			border-radius: 12px;
+			overflow: hidden;
+			border: 1px solid rgba(255,255,255,0.06);
+		}
+
+		.arch-layer-label {
+			width: 160px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 1.25rem 1rem;
+			font-size: 0.8rem;
+			font-weight: 700;
+			text-transform: uppercase;
+			letter-spacing: 0.08em;
+			flex-shrink: 0;
+		}
+
+		.arch-layer-content {
+			flex: 1;
+			padding: 1.25rem 1.5rem;
+			background: rgba(255,255,255,0.02);
+		}
+
+		.arch-layer-content h4 {
+			font-size: 0.95rem;
+			margin-bottom: 0.35rem;
+			color: #f1f5f9;
+		}
+
+		.arch-layer-content p {
+			font-size: 0.85rem;
+			color: #94a3b8;
+			line-height: 1.5;
+		}
+
+		.arch-layer.apps .arch-layer-label    { background: rgba(34,211,238,0.08); color: #22d3ee; }
+		.arch-layer.sync .arch-layer-label    { background: rgba(167,139,250,0.08); color: #a78bfa; }
+		.arch-layer.identity .arch-layer-label { background: rgba(52,211,153,0.08); color: #34d399; }
+		.arch-layer.infra .arch-layer-label   { background: rgba(251,146,60,0.08); color: #fb923c; }
+
+		/* ── Functional Areas ────────────────────────── */
+
+		.areas-nav {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.5rem;
+			margin-bottom: 3rem;
+		}
+
+		.area-pill {
+			display: inline-flex;
+			align-items: center;
+			gap: 0.4rem;
+			padding: 0.5rem 1rem;
+			border-radius: 100px;
+			font-size: 0.85rem;
+			font-weight: 500;
+			text-decoration: none;
 			background: rgba(255,255,255,0.04);
 			border: 1px solid rgba(255,255,255,0.08);
-			border-radius: 12px;
-			padding: 1.5rem 1rem;
-			text-align: center;
+			color: #94a3b8;
+			transition: all 0.2s;
 		}
 
-		.pillar-icon { font-size: 1.75rem; margin-bottom: 0.5rem; }
-		.pillar-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; }
-		.pillar-desc { font-size: 0.82rem; color: #64748b; line-height: 1.4; }
-
-		/* ── App Grid ─────────────────────────────────── */
-
-		.apps-section {
-			max-width: 900px;
-			margin: 0 auto;
-			padding: 0 1.5rem 5rem;
+		.area-pill:hover {
+			border-color: rgba(255,255,255,0.2);
+			color: #e2e8f0;
 		}
 
-		.apps-section h2 {
-			text-align: center;
-			font-size: 1.75rem;
-			margin-bottom: 0.5rem;
-			background: linear-gradient(90deg, #00d4ff, #7c3aed);
-			-webkit-background-clip: text;
-			-webkit-text-fill-color: transparent;
+		.area-block {
+			margin-bottom: 4rem;
+			scroll-margin-top: 80px;
 		}
 
-		.apps-section .section-desc {
-			text-align: center;
-			color: #64748b;
-			font-size: 0.95rem;
-			margin-bottom: 2.5rem;
+		.area-header {
+			display: flex;
+			align-items: flex-start;
+			gap: 1.25rem;
+			margin-bottom: 1.5rem;
 		}
 
-		.app-grid {
+		.area-icon {
+			width: 56px;
+			height: 56px;
+			border-radius: 14px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 1.5rem;
+			flex-shrink: 0;
+		}
+
+		.area-header h3 {
+			font-size: 1.5rem;
+			margin-bottom: 0.25rem;
+			color: #f1f5f9;
+		}
+
+		.area-header p {
+			font-size: 1rem;
+			color: #94a3b8;
+			line-height: 1.6;
+			max-width: 580px;
+		}
+
+		.area-apps {
 			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 			gap: 1rem;
+			margin-top: 1.5rem;
 		}
 
 		.app-card {
-			background: rgba(255,255,255,0.04);
-			border: 1px solid rgba(255,255,255,0.08);
+			background: rgba(255,255,255,0.03);
+			border: 1px solid rgba(255,255,255,0.06);
 			border-radius: 14px;
 			padding: 1.5rem;
 			text-decoration: none;
 			color: inherit;
-			transition: border-color 0.2s, transform 0.2s;
+			transition: border-color 0.2s, transform 0.15s;
 			display: flex;
 			flex-direction: column;
 		}
 
 		.app-card:hover {
-			border-color: rgba(0, 212, 255, 0.35);
+			border-color: rgba(34, 211, 238, 0.3);
 			transform: translateY(-2px);
 		}
 
-		.app-header {
+		.app-card-header {
 			display: flex;
 			align-items: center;
 			gap: 0.75rem;
 			margin-bottom: 0.75rem;
 		}
 
-		.app-emoji { font-size: 1.75rem; }
+		.app-card-icon {
+			width: 40px;
+			height: 40px;
+			border-radius: 10px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 1.25rem;
+			flex-shrink: 0;
+		}
 
-		.app-name {
-			font-size: 1.1rem;
+		.app-card-name {
+			font-size: 1.05rem;
 			font-weight: 700;
 			color: #f1f5f9;
 		}
 
-		.app-domain {
-			font-size: 0.75rem;
+		.app-card-domain {
+			font-size: 0.72rem;
 			color: #475569;
 			font-weight: 400;
 		}
 
-		.app-desc {
+		.app-card-desc {
 			font-size: 0.88rem;
 			color: #94a3b8;
 			line-height: 1.6;
 			flex: 1;
 		}
 
-		.app-tag {
-			display: inline-block;
+		.app-card-built {
 			margin-top: 0.75rem;
 			font-size: 0.72rem;
-			color: #64748b;
-			background: rgba(255,255,255,0.05);
-			padding: 0.2rem 0.6rem;
+			color: #475569;
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.35rem;
+		}
+
+		.app-card-built span {
+			background: rgba(255,255,255,0.04);
+			padding: 0.15rem 0.5rem;
 			border-radius: 4px;
-			text-transform: uppercase;
-			letter-spacing: 0.05em;
-			align-self: flex-start;
 		}
 
-		/* ── Full-Width Sections ──────────────────────── */
+		/* Area colors */
+		.area-create .area-icon  { background: rgba(34,211,238,0.12); }
+		.area-create .app-card-icon { background: rgba(34,211,238,0.1); }
 
-		.section-full {
-			width: 100%;
-			padding: 5rem 1.5rem;
-		}
+		.area-plan .area-icon    { background: rgba(52,211,153,0.12); }
+		.area-plan .app-card-icon { background: rgba(52,211,153,0.1); }
 
-		.section-full.alt-bg {
-			background: rgba(255,255,255,0.015);
-		}
+		.area-comm .area-icon    { background: rgba(167,139,250,0.12); }
+		.area-comm .app-card-icon { background: rgba(167,139,250,0.1); }
 
-		.section-inner {
-			max-width: 900px;
-			margin: 0 auto;
-		}
+		.area-decide .area-icon  { background: rgba(251,113,133,0.12); }
+		.area-decide .app-card-icon { background: rgba(251,113,133,0.1); }
 
-		.section-divider {
-			width: 60px;
-			height: 2px;
-			background: linear-gradient(90deg, #14b8a6, #7c3aed);
-			margin: 0 auto 2.5rem;
-			border-radius: 2px;
-		}
+		.area-fund .area-icon    { background: rgba(251,191,36,0.12); }
+		.area-fund .app-card-icon { background: rgba(251,191,36,0.1); }
 
-		.section-inner h2 {
-			text-align: center;
-			font-size: 2rem;
-			margin-bottom: 0.75rem;
-			background: linear-gradient(90deg, #00d4ff, #7c3aed);
-			-webkit-background-clip: text;
-			-webkit-text-fill-color: transparent;
-		}
+		.area-share .area-icon   { background: rgba(56,189,248,0.12); }
+		.area-share .app-card-icon { background: rgba(56,189,248,0.1); }
 
-		.section-desc {
-			text-align: center;
-			color: #94a3b8;
-			font-size: 1.05rem;
-			line-height: 1.7;
-			max-width: 600px;
-			margin: 0 auto 2.5rem;
-		}
+		.area-observe .area-icon { background: rgba(251,146,60,0.12); }
+		.area-observe .app-card-icon { background: rgba(251,146,60,0.1); }
 
-		.hl {
-			color: #00d4ff;
-			font-weight: 600;
-		}
-
-		/* ── EncryptID Cards ──────────────────────────── */
+		/* ── Identity Section ────────────────────────── */
 
 		.eid-grid {
 			display: grid;
@@ -221,104 +487,189 @@
 		}
 
 		.eid-card {
-			background: rgba(255,255,255,0.04);
-			border: 1px solid rgba(124,58,237,0.15);
+			background: rgba(255,255,255,0.03);
+			border: 1px solid rgba(52,211,153,0.12);
 			border-radius: 14px;
 			padding: 1.75rem;
-			text-align: left;
 		}
 
 		.eid-card-icon {
 			font-size: 1.5rem;
-			margin-bottom: 0.5rem;
+			margin-bottom: 0.75rem;
 		}
 
 		.eid-card h3 {
-			font-size: 1.05rem;
-			color: #e2e8f0;
+			font-size: 1rem;
+			color: #f1f5f9;
 			margin-bottom: 0.6rem;
 		}
 
 		.eid-card p {
 			color: #94a3b8;
-			font-size: 0.9rem;
+			font-size: 0.88rem;
 			line-height: 1.7;
 		}
 
-		/* ── Architecture Diagram ─────────────────────── */
+		/* ── Flow Box / Code ─────────────────────────── */
 
 		.flow-box {
-			background: rgba(255,255,255,0.03);
-			border: 1px solid rgba(255,255,255,0.08);
+			background: rgba(255,255,255,0.02);
+			border: 1px solid rgba(255,255,255,0.06);
 			border-radius: 16px;
 			padding: 1.75rem;
+			overflow-x: auto;
 		}
 
 		.flow-box pre {
 			font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
-			font-size: 0.78rem;
+			font-size: 0.8rem;
 			color: #94a3b8;
 			line-height: 1.5;
-			text-align: left;
-			overflow-x: auto;
 			white-space: pre;
 		}
 
-		/* ── Unlock Grid ──────────────────────────────── */
+		/* ── Open Source Section ──────────────────────── */
 
-		.unlock-grid {
+		.oss-grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+			gap: 1rem;
+		}
+
+		.oss-card {
+			background: rgba(255,255,255,0.03);
+			border: 1px solid rgba(255,255,255,0.06);
+			border-radius: 12px;
+			padding: 1.25rem;
+			transition: border-color 0.2s;
+		}
+
+		.oss-card:hover { border-color: rgba(255,255,255,0.12); }
+
+		.oss-card h4 {
+			font-size: 0.95rem;
+			margin-bottom: 0.35rem;
+			color: #f1f5f9;
+		}
+
+		.oss-card p {
+			font-size: 0.8rem;
+			color: #64748b;
+			line-height: 1.5;
+		}
+
+		.oss-card .oss-tag {
+			display: inline-block;
+			margin-top: 0.5rem;
+			font-size: 0.65rem;
+			color: #475569;
+			background: rgba(255,255,255,0.04);
+			padding: 0.15rem 0.5rem;
+			border-radius: 4px;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+		}
+
+		/* ── Self-Host Section ────────────────────────── */
+
+		.deploy-grid {
 			display: grid;
 			grid-template-columns: repeat(2, 1fr);
 			gap: 1.25rem;
 		}
 
-		.unlock-card {
-			background: rgba(255,255,255,0.04);
-			border: 1px solid rgba(255,255,255,0.08);
+		.deploy-card {
+			background: rgba(255,255,255,0.03);
+			border: 1px solid rgba(255,255,255,0.06);
 			border-radius: 14px;
 			padding: 1.75rem;
-			text-align: left;
 		}
 
-		.unlock-card h3 {
+		.deploy-card h3 {
 			font-size: 1rem;
-			color: #e2e8f0;
+			color: #f1f5f9;
 			margin-bottom: 0.6rem;
 		}
 
-		.unlock-card p {
+		.deploy-card p {
 			color: #94a3b8;
-			font-size: 0.9rem;
+			font-size: 0.88rem;
 			line-height: 1.7;
 		}
 
-		/* ── EncryptID Link ───────────────────────────── */
+		/* ── Demo Section ────────────────────────────── */
 
-		.encryptid-link {
-			display: inline-flex;
-			align-items: center;
-			gap: 0.5rem;
-			padding: 0.65rem 1.5rem;
-			background: linear-gradient(90deg, rgba(0,212,255,0.15), rgba(124,58,237,0.15));
-			border: 1px solid rgba(124,58,237,0.35);
-			border-radius: 8px;
-			color: #c4b5fd;
-			text-decoration: none;
-			font-weight: 600;
-			font-size: 0.9rem;
-			transition: transform 0.2s, border-color 0.2s;
+		.demo-preview {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+			gap: 1.25rem;
 		}
 
-		.encryptid-link:hover {
+		.demo-card {
+			background: rgba(255,255,255,0.03);
+			border: 1px solid rgba(255,255,255,0.06);
+			border-radius: 14px;
+			padding: 2rem;
+			text-align: center;
+			text-decoration: none;
+			color: inherit;
+			transition: border-color 0.2s, transform 0.15s;
+		}
+
+		.demo-card:hover {
+			border-color: rgba(34,211,238,0.3);
 			transform: translateY(-2px);
-			border-color: rgba(124,58,237,0.6);
+		}
+
+		.demo-card-icon {
+			font-size: 2.5rem;
+			margin-bottom: 1rem;
+		}
+
+		.demo-card h3 {
+			font-size: 1rem;
+			color: #f1f5f9;
+			margin-bottom: 0.5rem;
+		}
+
+		.demo-card p {
+			font-size: 0.85rem;
+			color: #64748b;
+			line-height: 1.5;
+		}
+
+		/* ── Token Section ────────────────────────────── */
+
+		.token-features {
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			gap: 1.25rem;
+		}
+
+		.token-card {
+			background: rgba(255,255,255,0.03);
+			border: 1px solid rgba(255,255,255,0.06);
+			border-radius: 14px;
+			padding: 1.75rem;
+		}
+
+		.token-card h3 {
+			font-size: 1rem;
+			color: #f1f5f9;
+			margin-bottom: 0.6rem;
+		}
+
+		.token-card p {
+			color: #94a3b8;
+			font-size: 0.88rem;
+			line-height: 1.7;
 		}
 
 		/* ── Footer ───────────────────────────────────── */
 
 		footer {
 			text-align: center;
-			padding: 2rem 1.5rem 3rem;
+			padding: 3rem 1.5rem 4rem;
 			color: #475569;
 			font-size: 0.82rem;
 			border-top: 1px solid rgba(255,255,255,0.05);
@@ -327,24 +678,22 @@
 		footer a {
 			color: #64748b;
 			text-decoration: none;
+			transition: color 0.2s;
 		}
 
 		footer a:hover { color: #94a3b8; }
 
-		@media (max-width: 600px) {
-			.hero h1 { font-size: 2.5rem; }
-			.pillars { grid-template-columns: 1fr; }
-			.app-grid { grid-template-columns: 1fr; }
-			.eid-grid { grid-template-columns: 1fr; }
-			.unlock-grid { grid-template-columns: 1fr; }
-			.section-inner h2 { font-size: 1.5rem; }
+		.footer-apps {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+			gap: 6px 16px;
+			margin-bottom: 12px;
 		}
 
-		/* ── AppSwitcher ─────────────────────────────── */
+		/* ── App Switcher ────────────────────────────── */
 
-		.app-switcher {
-			position: relative;
-		}
+		.app-switcher { position: relative; }
 
 		.app-switcher-trigger {
 			display: flex;
@@ -362,29 +711,24 @@
 			line-height: 1;
 		}
 
-		.app-switcher-trigger:hover {
-			background: rgba(255,255,255,0.12);
-		}
+		.app-switcher-trigger:hover { background: rgba(255,255,255,0.12); }
 
 		.app-switcher-badge {
 			width: 1.5rem;
 			height: 1.5rem;
 			border-radius: 0.375rem;
-			background: linear-gradient(135deg, #67e8f9, #c4b5fd, #fda4af);
+			background: linear-gradient(135deg, #22d3ee, #a78bfa, #fb923c);
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			font-size: 10px;
 			font-weight: 900;
-			color: #0f172a;
+			color: #0b1120;
 			line-height: 1;
 			flex-shrink: 0;
 		}
 
-		.app-switcher-arrow {
-			font-size: 0.7em;
-			opacity: 0.6;
-		}
+		.app-switcher-arrow { font-size: 0.7em; opacity: 0.6; }
 
 		.app-switcher-dropdown {
 			display: none;
@@ -398,13 +742,11 @@
 			border-radius: 0.75rem;
 			background: #1e293b;
 			border: 1px solid rgba(255,255,255,0.1);
-			box-shadow: 0 25px 50px -12px rgba(0,0,0,0.3);
+			box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
 			z-index: 9999;
 		}
 
-		.app-switcher-dropdown.open {
-			display: block;
-		}
+		.app-switcher-dropdown.open { display: block; }
 
 		.app-switcher-header {
 			display: flex;
@@ -418,32 +760,20 @@
 			width: 1.75rem;
 			height: 1.75rem;
 			border-radius: 0.5rem;
-			background: linear-gradient(135deg, #67e8f9, #c4b5fd, #fda4af);
+			background: linear-gradient(135deg, #22d3ee, #a78bfa, #fb923c);
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			font-size: 11px;
 			font-weight: 900;
-			color: #0f172a;
+			color: #0b1120;
 			line-height: 1;
 			flex-shrink: 0;
 		}
 
-		.app-switcher-header-text {
-			display: flex;
-			flex-direction: column;
-		}
-
-		.app-switcher-header-title {
-			font-size: 0.875rem;
-			font-weight: 700;
-			color: #fff;
-		}
-
-		.app-switcher-header-subtitle {
-			font-size: 10px;
-			color: #94a3b8;
-		}
+		.app-switcher-header-text { display: flex; flex-direction: column; }
+		.app-switcher-header-title { font-size: 0.875rem; font-weight: 700; color: #fff; }
+		.app-switcher-header-subtitle { font-size: 10px; color: #94a3b8; }
 
 		.app-switcher-cat {
 			padding: 0.75rem 0.875rem 0.25rem;
@@ -461,9 +791,7 @@
 			transition: background 0.15s;
 		}
 
-		.app-switcher-item:hover {
-			background: rgba(255,255,255,0.04);
-		}
+		.app-switcher-item:hover { background: rgba(255,255,255,0.04); }
 
 		.app-switcher-item a {
 			display: flex;
@@ -485,7 +813,7 @@
 			justify-content: center;
 			font-size: 10px;
 			font-weight: 900;
-			color: #0f172a;
+			color: #0b1120;
 			line-height: 1;
 			flex-shrink: 0;
 		}
@@ -503,15 +831,8 @@
 			gap: 0.375rem;
 		}
 
-		.app-switcher-item-name span:first-child {
-			font-size: 0.875rem;
-			font-weight: 600;
-		}
-
-		.app-switcher-item-name span:last-child {
-			font-size: 0.875rem;
-			flex-shrink: 0;
-		}
+		.app-switcher-item-name span:first-child { font-size: 0.875rem; font-weight: 600; }
+		.app-switcher-item-name span:last-child { font-size: 0.875rem; flex-shrink: 0; }
 
 		.app-switcher-item-desc {
 			font-size: 11px;
@@ -534,13 +855,8 @@
 			text-decoration: none;
 		}
 
-		.app-switcher-item:hover .app-switcher-ext {
-			opacity: 0.5;
-		}
-
-		.app-switcher-ext:hover {
-			opacity: 1 !important;
-		}
+		.app-switcher-item:hover .app-switcher-ext { opacity: 0.5; }
+		.app-switcher-ext:hover { opacity: 1 !important; }
 
 		.app-switcher-footer {
 			padding: 0.625rem 0.875rem;
@@ -555,9 +871,7 @@
 			transition: color 0.2s;
 		}
 
-		.app-switcher-footer a:hover {
-			color: #22d3ee;
-		}
+		.app-switcher-footer a:hover { color: #22d3ee; }
 
 		/* Badge colors */
 		.badge-teal    { background: #5eead4; }
@@ -578,29 +892,44 @@
 		.badge-pink    { background: #f9a8d4; }
 		.badge-purple  { background: #d8b4fe; }
 
-		@media (max-width: 600px) {
-			.app-switcher-dropdown {
-				width: 280px;
-				left: auto;
-				right: -1rem;
-			}
+		/* ── Responsive ──────────────────────────────── */
+
+		@media (max-width: 768px) {
+			.hero h1 { font-size: 2.5rem; }
+			.hero .subtitle { font-size: 1.1rem; }
+			.principles { grid-template-columns: repeat(2, 1fr); }
+			.eid-grid { grid-template-columns: 1fr; }
+			.deploy-grid { grid-template-columns: 1fr; }
+			.token-features { grid-template-columns: 1fr; }
+			.arch-layer { flex-direction: column; }
+			.arch-layer-label { width: 100%; padding: 0.75rem 1rem; }
+			.section h2 { font-size: 1.75rem; }
+			.nav-links { gap: 0.75rem; }
+			.nav-links a { font-size: 0.8rem; }
+		}
+
+		@media (max-width: 480px) {
+			.hero h1 { font-size: 2rem; }
+			.principles { grid-template-columns: 1fr; }
+			.area-apps { grid-template-columns: 1fr; }
+			.oss-grid { grid-template-columns: 1fr; }
+			.demo-preview { grid-template-columns: 1fr; }
+			.app-switcher-dropdown { width: 280px; left: auto; right: -1rem; }
 		}
 	</style>
 	<script defer src="https://rdata.online/collect.js" data-website-id="5d3c8bac-64b6-4e57-ba66-ed31b182fba0"></script>
 </head>
 <body>
 
-	<!-- Nav -->
-	<nav style="border-bottom:1px solid rgba(255,255,255,0.08);padding:1rem 0;">
-		<div style="max-width:900px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;">
-			<div style="display:flex;align-items:center;gap:0.75rem;">
-				<a href="/" style="display:flex;align-items:center;gap:0.5rem;text-decoration:none;color:#e2e8f0;">
-					<span style="font-size:1.1rem;font-weight:600;">rStack</span>
-				</a>
+	<!-- ════════════════════════════════════════════════ NAV ════ -->
+	<nav>
+		<div class="nav-inner">
+			<div class="nav-left">
+				<a href="/" class="nav-brand">rStack</a>
 				<div class="app-switcher" id="appSwitcher">
 					<button class="app-switcher-trigger" id="appSwitcherTrigger" aria-expanded="false" aria-haspopup="true">
 						<span class="app-switcher-badge">r*</span>
-						<span>rStack</span>
+						<span>Apps</span>
 						<span class="app-switcher-arrow">&#9662;</span>
 					</button>
 					<div class="app-switcher-dropdown" id="appSwitcherDropdown" role="menu">
@@ -608,542 +937,484 @@
 							<span class="app-switcher-header-badge">r*</span>
 							<div class="app-switcher-header-text">
 								<span class="app-switcher-header-title">rStack</span>
-								<span class="app-switcher-header-subtitle">Self-hosted community app suite</span>
+								<span class="app-switcher-header-subtitle">Open-source community infrastructure</span>
 							</div>
 						</div>
-
 						<!-- Creating -->
 						<div class="app-switcher-cat">Creating</div>
 						<div class="app-switcher-item">
-							<a href="https://rspace.online">
-								<span class="app-switcher-item-badge badge-teal">rS</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rSpace</span><span>🎨</span></div>
-									<div class="app-switcher-item-desc">Real-time collaborative canvas</div>
-								</div>
-							</a>
-							<a href="https://rspace.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rspace.online">&#8599;</a>
+							<a href="https://rspace.online"><span class="app-switcher-item-badge badge-teal">rS</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rSpace</span></div><div class="app-switcher-item-desc">Real-time collaborative canvas</div></div></a>
+							<a href="https://rspace.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
 						<div class="app-switcher-item">
-							<a href="https://rnotes.online">
-								<span class="app-switcher-item-badge badge-amber">rN</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rNotes</span><span>📝</span></div>
-									<div class="app-switcher-item-desc">Group note-taking & knowledge capture</div>
-								</div>
-							</a>
-							<a href="https://rnotes.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rnotes.online">&#8599;</a>
+							<a href="https://rnotes.online"><span class="app-switcher-item-badge badge-amber">rN</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rNotes</span></div><div class="app-switcher-item-desc">Group note-taking &amp; knowledge capture</div></div></a>
+							<a href="https://rnotes.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
 						<div class="app-switcher-item">
-							<a href="https://rpubs.online">
-								<span class="app-switcher-item-badge badge-rose">rP</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rPubs</span><span>📰</span></div>
-									<div class="app-switcher-item-desc">Collaborative publishing platform</div>
-								</div>
-							</a>
-							<a href="https://rpubs.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rpubs.online">&#8599;</a>
+							<a href="https://rpubs.online"><span class="app-switcher-item-badge badge-rose">rP</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rPubs</span></div><div class="app-switcher-item-desc">Collaborative publishing platform</div></div></a>
+							<a href="https://rpubs.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
-
 						<!-- Planning -->
 						<div class="app-switcher-cat">Planning</div>
 						<div class="app-switcher-item">
-							<a href="https://rcal.online">
-								<span class="app-switcher-item-badge badge-sky">rC</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rCal</span><span>📅</span></div>
-									<div class="app-switcher-item-desc">Collaborative scheduling & events</div>
-								</div>
-							</a>
-							<a href="https://rcal.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rcal.online">&#8599;</a>
+							<a href="https://rcal.online"><span class="app-switcher-item-badge badge-sky">rC</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rCal</span></div><div class="app-switcher-item-desc">Collaborative scheduling &amp; events</div></div></a>
+							<a href="https://rcal.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
 						<div class="app-switcher-item">
-							<a href="https://rtrips.online">
-								<span class="app-switcher-item-badge badge-emerald">rT</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rTrips</span><span>✈️</span></div>
-									<div class="app-switcher-item-desc">Group travel planning in real time</div>
-								</div>
-							</a>
-							<a href="https://rtrips.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rtrips.online">&#8599;</a>
+							<a href="https://rtrips.online"><span class="app-switcher-item-badge badge-emerald">rT</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rTrips</span></div><div class="app-switcher-item-desc">Group travel planning in real time</div></div></a>
+							<a href="https://rtrips.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
 						<div class="app-switcher-item">
-							<a href="https://rmaps.online">
-								<span class="app-switcher-item-badge badge-green">rM</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rMaps</span><span>🗺️</span></div>
-									<div class="app-switcher-item-desc">Collaborative real-time mapping</div>
-								</div>
-							</a>
-							<a href="https://rmaps.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rmaps.online">&#8599;</a>
+							<a href="https://rmaps.online"><span class="app-switcher-item-badge badge-green">rM</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rMaps</span></div><div class="app-switcher-item-desc">Collaborative real-time mapping</div></div></a>
+							<a href="https://rmaps.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
-
 						<!-- Discussing & Deciding -->
-						<div class="app-switcher-cat">Discussing & Deciding</div>
+						<div class="app-switcher-cat">Discussing &amp; Deciding</div>
 						<div class="app-switcher-item">
-							<a href="https://rinbox.online">
-								<span class="app-switcher-item-badge badge-indigo">rI</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rInbox</span><span>📬</span></div>
-									<div class="app-switcher-item-desc">Private group messaging</div>
-								</div>
-							</a>
-							<a href="https://rinbox.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rinbox.online">&#8599;</a>
+							<a href="https://rchats.online"><span class="app-switcher-item-badge badge-indigo">rCh</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rChats</span></div><div class="app-switcher-item-desc">Encrypted community chat</div></div></a>
+							<a href="https://rchats.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
 						<div class="app-switcher-item">
-							<a href="https://rchoices.online">
-								<span class="app-switcher-item-badge badge-fuchsia">rCh</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rChoices</span><span>🔀</span></div>
-									<div class="app-switcher-item-desc">Collaborative decision making</div>
-								</div>
-							</a>
-							<a href="https://rchoices.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rchoices.online">&#8599;</a>
+							<a href="https://rinbox.online"><span class="app-switcher-item-badge badge-fuchsia">rI</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rInbox</span></div><div class="app-switcher-item-desc">Shared group inbox</div></div></a>
+							<a href="https://rinbox.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
 						<div class="app-switcher-item">
-							<a href="https://rvote.online">
-								<span class="app-switcher-item-badge badge-violet">rV</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rVote</span><span>🗳️</span></div>
-									<div class="app-switcher-item-desc">Real-time polls & governance</div>
-								</div>
-							</a>
-							<a href="https://rvote.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rvote.online">&#8599;</a>
+							<a href="https://rforum.online"><span class="app-switcher-item-badge badge-violet">rFo</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rForum</span></div><div class="app-switcher-item-desc">Self-hosted community forums</div></div></a>
+							<a href="https://rforum.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
+						</div>
+						<div class="app-switcher-item">
+							<a href="https://rchoices.online"><span class="app-switcher-item-badge badge-pink">rCo</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rChoices</span></div><div class="app-switcher-item-desc">Collaborative decision making</div></div></a>
+							<a href="https://rchoices.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
+						</div>
+						<div class="app-switcher-item">
+							<a href="https://rvote.online"><span class="app-switcher-item-badge badge-red">rV</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rVote</span></div><div class="app-switcher-item-desc">Real-time polls &amp; governance</div></div></a>
+							<a href="https://rvote.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
-
 						<!-- Funding & Commerce -->
-						<div class="app-switcher-cat">Funding & Commerce</div>
+						<div class="app-switcher-cat">Funding &amp; Commerce</div>
 						<div class="app-switcher-item">
-							<a href="https://rfunds.online">
-								<span class="app-switcher-item-badge badge-lime">rF</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rFunds</span><span>💸</span></div>
-									<div class="app-switcher-item-desc">Collaborative fundraising & grants</div>
-								</div>
-							</a>
-							<a href="https://rfunds.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rfunds.online">&#8599;</a>
+							<a href="https://rfunds.online"><span class="app-switcher-item-badge badge-lime">rF</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rFunds</span></div><div class="app-switcher-item-desc">Collaborative fundraising &amp; grants</div></div></a>
+							<a href="https://rfunds.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
 						<div class="app-switcher-item">
-							<a href="https://rwallet.online">
-								<span class="app-switcher-item-badge badge-yellow">rW</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rWallet</span><span>💰</span></div>
-									<div class="app-switcher-item-desc">Multi-chain crypto wallet</div>
-								</div>
-							</a>
-							<a href="https://rwallet.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rwallet.online">&#8599;</a>
+							<a href="https://rwallet.online"><span class="app-switcher-item-badge badge-yellow">rW</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rWallet</span></div><div class="app-switcher-item-desc">Multi-chain community wallet</div></div></a>
+							<a href="https://rwallet.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
 						<div class="app-switcher-item">
-							<a href="https://rcart.online">
-								<span class="app-switcher-item-badge badge-orange">rCt</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rCart</span><span>🛒</span></div>
-									<div class="app-switcher-item-desc">Group commerce & shared shopping</div>
-								</div>
-							</a>
-							<a href="https://rcart.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rcart.online">&#8599;</a>
+							<a href="https://rcart.online"><span class="app-switcher-item-badge badge-orange">rCt</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rCart</span></div><div class="app-switcher-item-desc">Group commerce &amp; shared shopping</div></div></a>
+							<a href="https://rcart.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
 						<div class="app-switcher-item">
-							<a href="https://rauctions.online">
-								<span class="app-switcher-item-badge badge-red">rA</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rAuctions</span><span>🔨</span></div>
-									<div class="app-switcher-item-desc">Live auction platform</div>
-								</div>
-							</a>
-							<a href="https://rauctions.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rauctions.online">&#8599;</a>
+							<a href="https://rauctions.online"><span class="app-switcher-item-badge badge-red">rA</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rAuctions</span></div><div class="app-switcher-item-desc">Live auction platform</div></div></a>
+							<a href="https://rauctions.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
-
 						<!-- Social & Sharing -->
-						<div class="app-switcher-cat">Social & Sharing</div>
+						<div class="app-switcher-cat">Social &amp; Sharing</div>
 						<div class="app-switcher-item">
-							<a href="https://rnetwork.online">
-								<span class="app-switcher-item-badge badge-blue">rNe</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rNetwork</span><span>🌐</span></div>
-									<div class="app-switcher-item-desc">Community network & social graph</div>
-								</div>
-							</a>
-							<a href="https://rnetwork.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rnetwork.online">&#8599;</a>
+							<a href="https://rnetwork.online"><span class="app-switcher-item-badge badge-blue">rNe</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rNetwork</span></div><div class="app-switcher-item-desc">Community network &amp; social graph</div></div></a>
+							<a href="https://rnetwork.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
 						<div class="app-switcher-item">
-							<a href="https://rfiles.online">
-								<span class="app-switcher-item-badge badge-cyan">rFi</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rFiles</span><span>📁</span></div>
-									<div class="app-switcher-item-desc">Collaborative file storage</div>
-								</div>
-							</a>
-							<a href="https://rfiles.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rfiles.online">&#8599;</a>
+							<a href="https://rfiles.online"><span class="app-switcher-item-badge badge-cyan">rFi</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rFiles</span></div><div class="app-switcher-item-desc">Collaborative file storage</div></div></a>
+							<a href="https://rfiles.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
 						<div class="app-switcher-item">
-							<a href="https://rtube.online">
-								<span class="app-switcher-item-badge badge-pink">rTu</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rTube</span><span>🎬</span></div>
-									<div class="app-switcher-item-desc">Group video platform</div>
-								</div>
-							</a>
-							<a href="https://rtube.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rtube.online">&#8599;</a>
+							<a href="https://rtube.online"><span class="app-switcher-item-badge badge-pink">rTu</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rTube</span></div><div class="app-switcher-item-desc">Group video platform</div></div></a>
+							<a href="https://rtube.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
 						<div class="app-switcher-item">
-							<a href="https://rdata.online">
-								<span class="app-switcher-item-badge badge-purple">rD</span>
-								<div class="app-switcher-item-info">
-									<div class="app-switcher-item-name"><span>rData</span><span>📊</span></div>
-									<div class="app-switcher-item-desc">Analytics & insights dashboard</div>
-								</div>
-							</a>
-							<a href="https://rdata.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext" title="rdata.online">&#8599;</a>
+							<a href="https://rswag.online"><span class="app-switcher-item-badge badge-purple">rSw</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rSwag</span></div><div class="app-switcher-item-desc">Community merchandise</div></div></a>
+							<a href="https://rswag.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
+						</div>
+						<div class="app-switcher-item">
+							<a href="https://rdata.online"><span class="app-switcher-item-badge badge-purple">rD</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rData</span></div><div class="app-switcher-item-desc">Analytics &amp; insights</div></div></a>
+							<a href="https://rdata.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">&#8599;</a>
 						</div>
-
-						<!-- Footer -->
 						<div class="app-switcher-footer">
-							<a href="https://rstack.online">rstack.online — self-hosted, community-run</a>
+							<a href="https://rstack.online">rstack.online &mdash; open-source community infrastructure</a>
 						</div>
 					</div>
 				</div>
 			</div>
-			<div style="display:flex;align-items:center;gap:1rem;">
-				<a href="#app-grid" style="color:#94a3b8;text-decoration:none;font-size:0.875rem;transition:color 0.2s;" onmouseover="this.style.color='#e2e8f0'" onmouseout="this.style.color='#94a3b8'">Demo</a>
-				<a href="https://rspace.online" style="color:#94a3b8;text-decoration:none;font-size:0.875rem;transition:color 0.2s;" onmouseover="this.style.color='#e2e8f0'" onmouseout="this.style.color='#94a3b8'">Create Space</a>
-				<a href="https://encryptid.jeffemmett.com" style="color:#94a3b8;text-decoration:none;font-size:0.875rem;transition:color 0.2s;" onmouseover="this.style.color='#e2e8f0'" onmouseout="this.style.color='#94a3b8'">Sign In</a>
+			<div class="nav-links">
+				<a href="#areas">Apps</a>
+				<a href="#identity">Identity</a>
+				<a href="#self-host">Self-Host</a>
+				<a href="#open-source">Open Source</a>
 			</div>
 		</div>
 	</nav>
 
+	<!-- ════════════════════════════════════════════════ HERO ════ -->
 	<div class="hero">
-		<h1>rStack</h1>
-		<p class="tagline">Open-source, self-hosted tools for communities.</p>
-		<p class="description">
-			The <span class="hl">r-Stack</span> is a suite of <span class="hl">open-source</span>,
-			interoperable applications you can run on your own server. No vendor lock-in, no
-			platform fees, no terms of service that change overnight. Unified by
-			<span class="hl">EncryptID</span> passkey auth, every tool shares the same sync layer
-			so your community's data flows freely between apps &mdash; and stays yours.
+		<span class="hero-label">Open Source &middot; Self-Hosted &middot; Community-Owned</span>
+		<h1>The community stack you actually own</h1>
+		<p class="subtitle">
+			A complete suite of open-source tools for community self-governance &mdash;
+			tied together with zero-knowledge identity and data sovereignty to the user.
 		</p>
-	</div>
-
-	<div class="pillars">
-		<div class="pillar">
-			<div class="pillar-icon">📖</div>
-			<div class="pillar-title">Open Source</div>
-			<div class="pillar-desc">Every app is source-available. Read the code, fork it, contribute back.</div>
-		</div>
-		<div class="pillar">
-			<div class="pillar-icon">🏠</div>
-			<div class="pillar-title">Self-Hosted</div>
-			<div class="pillar-desc">Run the whole stack on your own server. Your data never touches ours.</div>
-		</div>
-		<div class="pillar">
-			<div class="pillar-icon">🔗</div>
-			<div class="pillar-title">Interoperable</div>
-			<div class="pillar-desc">Shared data layer means a vote in rVote can reference a budget in rFunds.</div>
+		<p class="description">
+			rStack combines the latest open-source tools into a cohesive platform that communities
+			can self-host on their own infrastructure or run on shared community servers. One login,
+			one data layer, twenty apps &mdash; no vendor lock-in, no surveillance, no kill switch.
+		</p>
+		<div class="hero-actions">
+			<a href="#areas" class="btn btn-primary">Explore the Stack</a>
+			<a href="#self-host" class="btn btn-secondary">Self-Host Guide</a>
 		</div>
 	</div>
 
-	<div class="apps-section">
-		<h2>The Apps</h2>
-		<p class="section-desc">Each tool is independent but stronger together. Log in once, use them all.</p>
-
-		<div class="app-grid">
-			<a href="https://rspace.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">🌌</span>
-					<div>
-						<div class="app-name">rSpace</div>
-						<div class="app-domain">rspace.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Collaborative spatial canvas. The integration hub where all r-Stack tools come together on a shared, infinite workspace.</div>
-				<span class="app-tag">canvas &amp; dashboard</span>
-			</a>
-
-			<a href="https://rvote.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">🗳</span>
-					<div>
-						<div class="app-name">rVote</div>
-						<div class="app-domain">rvote.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Community governance and decision-making. Create polls, weighted votes, and conviction-style proposals.</div>
-				<span class="app-tag">governance</span>
-			</a>
-
-			<a href="https://rwallet.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">💰</span>
-					<div>
-						<div class="app-name">rWallet</div>
-						<div class="app-domain">rwallet.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Community treasury management. Track shared resources, contributions, and funding flows with Web3-ready smart wallets.</div>
-				<span class="app-tag">treasury</span>
-			</a>
-
-			<a href="https://rfunds.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">📊</span>
-					<div>
-						<div class="app-name">rFunds</div>
-						<div class="app-domain">rfunds.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Budget tracking and expense management. Split costs, allocate funds, and maintain transparent community finances.</div>
-				<span class="app-tag">budgets &amp; expenses</span>
-			</a>
-
-			<a href="https://rmaps.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">🗺</span>
-					<div>
-						<div class="app-name">rMaps</div>
-						<div class="app-domain">rmaps.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Collaborative mapping and geospatial data. Pin locations, plan routes, and visualize your community across the world.</div>
-				<span class="app-tag">mapping</span>
-			</a>
-
-			<a href="https://rfiles.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">📁</span>
-					<div>
-						<div class="app-name">rFiles</div>
-						<div class="app-domain">rfiles.online</div>
-					</div>
-				</div>
-				<div class="app-desc">End-to-end encrypted file storage and sharing. Your community's documents, images, and media &mdash; owned by you.</div>
-				<span class="app-tag">storage</span>
-			</a>
-
-			<a href="https://rnotes.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">📝</span>
-					<div>
-						<div class="app-name">rNotes</div>
-						<div class="app-domain">rnotes.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Collaborative note-taking and knowledge base. Real-time shared notebooks, checklists, and meeting notes.</div>
-				<span class="app-tag">notes &amp; docs</span>
-			</a>
-
-			<a href="https://rtrips.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">✈</span>
-					<div>
-						<div class="app-name">rTrips</div>
-						<div class="app-domain">rtrips.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Group trip planning. Itineraries, destinations, packing lists, and expenses &mdash; all linked across rMaps, rFunds, and rNotes.</div>
-				<span class="app-tag">travel</span>
-			</a>
-
-			<a href="https://rchats.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">💬</span>
-					<div>
-						<div class="app-name">rChats</div>
-						<div class="app-domain">rchats.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Encrypted community chat powered by EncryptID passkeys. End-to-end encrypted messaging with self-sovereign identity and social recovery.</div>
-				<span class="app-tag">communication</span>
-			</a>
-
-			<a href="https://rinbox.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">✉️</span>
-					<div>
-						<div class="app-name">rInbox</div>
-						<div class="app-domain">rinbox.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Shared group inbox with multi-sig approval workflows. Self-hosted email for communities with entity extraction and graph-based discourse.</div>
-				<span class="app-tag">communication</span>
-			</a>
-
-			<a href="https://rnetwork.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">🕸</span>
-					<div>
-						<div class="app-name">rNetwork</div>
-						<div class="app-domain">rnetwork.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Community directory and relationship mapping. See who's connected, discover collaborators, and grow your network.</div>
-				<span class="app-tag">people &amp; connections</span>
-			</a>
-
-			<a href="https://rcart.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">🛒</span>
-					<div>
-						<div class="app-name">rCart</div>
-						<div class="app-domain">rcart.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Group purchasing and crowdfunding. Pool resources, compare options, and fund community projects together.</div>
-				<span class="app-tag">commerce</span>
-			</a>
-
-			<a href="https://rtube.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">🎬</span>
-					<div>
-						<div class="app-name">rTube</div>
-						<div class="app-domain">rtube.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Community video sharing and streaming. Host, curate, and discuss video content without platform algorithms or ads.</div>
-				<span class="app-tag">video</span>
-			</a>
-
-			<a href="https://rauctions.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">🔨</span>
-					<div>
-						<div class="app-name">rAuctions</div>
-						<div class="app-domain">rauctions.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Cosmolocal auctions. List items, bid with USDC on Base, and settle peer-to-peer with EncryptID identity.</div>
-				<span class="app-tag">auctions</span>
-			</a>
-
-			<a href="https://rpubs.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">📖</span>
-					<div>
-						<div class="app-name">rPubs</div>
-						<div class="app-domain">rpubs.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Drop in a document, get a print-ready pocket book. 4 formats, Typst typesetting, instant PDF generation.</div>
-				<span class="app-tag">publishing</span>
-			</a>
-
-			<a href="https://rcal.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">📅</span>
-					<div>
-						<div class="app-name">rCal</div>
-						<div class="app-domain">rcal.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Spatiotemporal group calendar. Ten zoom levels from moments to eras, map view, lunar phases, and r-tool integration.</div>
-				<span class="app-tag">calendar</span>
-			</a>
-
-			<a href="https://rforum.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">💬</span>
-					<div>
-						<div class="app-name">rForum</div>
-						<div class="app-domain">rforum.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Deploy self-hosted Discourse forums on Hetzner Cloud. Automated provisioning, DNS, SSL, and real-time progress tracking.</div>
-				<span class="app-tag">community</span>
-			</a>
-
-			<a href="https://rswag.online" class="app-card">
-				<div class="app-header">
-					<span class="app-emoji">👕</span>
-					<div>
-						<div class="app-name">rSwag</div>
-						<div class="app-domain">rswag.online</div>
-					</div>
-				</div>
-				<div class="app-desc">Community merchandise on demand. Design, customize, and order stickers, shirts, and more with AI-powered design tools.</div>
-				<span class="app-tag">commerce</span>
-			</a>
+	<!-- ════════════════════════════════════════════════ PRINCIPLES ════ -->
+	<div class="principles">
+		<div class="principle">
+			<div class="principle-icon open">📖</div>
+			<h3>Open Source</h3>
+			<p>Every app is source-available. Read the code, fork it, audit it, contribute back. No black boxes.</p>
+		</div>
+		<div class="principle">
+			<div class="principle-icon self">🏠</div>
+			<h3>Self-Hosted</h3>
+			<p>Run on your server, a community VPS, or a Raspberry Pi. Your hardware, your rules, your data.</p>
+		</div>
+		<div class="principle">
+			<div class="principle-icon zk">🔐</div>
+			<h3>Zero-Knowledge Identity</h3>
+			<p>Passkey-based auth with on-device key derivation. The server never sees your private material.</p>
+		</div>
+		<div class="principle">
+			<div class="principle-icon sov">🛡</div>
+			<h3>Data Sovereignty</h3>
+			<p>End-to-end encrypted. CRDT-synced. Your community's data stays yours &mdash; by architecture, not policy.</p>
 		</div>
 	</div>
 
-	<!-- Self-Host -->
-	<div class="section-full alt-bg">
+	<!-- ════════════════════════════════════════════════ ARCHITECTURE ════ -->
+	<div class="section alt" id="architecture">
 		<div class="section-inner">
-			<div class="section-divider"></div>
-			<h2>Self-Host Your Stack</h2>
+			<span class="section-label purple">Architecture</span>
+			<h2>How the stack fits together</h2>
 			<p class="section-desc">
-				Every r-Stack app ships as a Docker container. Clone the repo, run
-				<span class="hl">docker compose up</span>, and the whole suite is live on
-				your hardware &mdash; a VPS, a home server, or a Raspberry Pi.
+				rStack isn't a monolith. It's four independent layers that compose into
+				something greater than the sum of their parts. Each layer can be swapped,
+				extended, or self-hosted independently.
 			</p>
 
-			<div class="flow-box" style="margin-bottom: 2rem;">
-<pre>
-  $ git clone https://git.rstack.online/rstack
-  $ cd rstack
-  $ cp .env.example .env        # set your domain + secrets
-  $ docker compose up -d        # that's it
-
-  ✓ rSpace     → space.yourdomain.org
-  ✓ rNotes     → notes.yourdomain.org
-  ✓ rVote      → vote.yourdomain.org
-  ✓ rFunds     → funds.yourdomain.org
-  ✓ rFiles     → files.yourdomain.org
-  ✓ rMaps      → maps.yourdomain.org
-  ✓ EncryptID  → id.yourdomain.org
-  ...and every other app in the suite
-</pre>
-			</div>
-
-			<div class="unlock-grid">
-				<div class="unlock-card">
-					<h3>Your server, your rules</h3>
-					<p>
-						No SaaS subscription, no per-seat pricing, no usage caps. Run the
-						entire stack for your 5-person co-op or your 500-person organization
-						on a single $10/month VPS. Scale by adding hardware, not by upgrading
-						a pricing tier.
-					</p>
+			<div class="arch-layers">
+				<div class="arch-layer apps">
+					<div class="arch-layer-label">App Layer</div>
+					<div class="arch-layer-content">
+						<h4>20 purpose-built apps</h4>
+						<p>Each app handles one job well &mdash; notes, voting, budgets, maps, chat. They share data through the sync layer below, so a vote in rVote can reference a budget in rFunds without either app knowing the other's internals.</p>
+					</div>
 				</div>
-
-				<div class="unlock-card">
-					<h3>Data sovereignty by default</h3>
-					<p>
-						Your community's files, notes, votes, and financial records live on
-						disk you control. No third-party cloud provider can read, mine, or
-						accidentally leak your data. Backups are just files you copy.
-					</p>
+				<div class="arch-layer sync">
+					<div class="arch-layer-label">Sync Layer</div>
+					<div class="arch-layer-content">
+						<h4>CRDT-based real-time data mesh</h4>
+						<p>Conflict-free replicated data types keep every app in sync &mdash; peer-to-peer, offline-capable, and eventually consistent. No central database, no single point of failure. Byzantine fault tolerant token ledger included.</p>
+					</div>
 				</div>
-
-				<div class="unlock-card">
-					<h3>Fork and customize</h3>
-					<p>
-						Every app is open source. Need a custom voting algorithm? A different
-						map tile provider? A branded theme for your community? Fork the repo,
-						change what you need, and deploy. No permission required.
-					</p>
+				<div class="arch-layer identity">
+					<div class="arch-layer-label">Identity Layer</div>
+					<div class="arch-layer-content">
+						<h4>EncryptID &mdash; zero-knowledge passkeys</h4>
+						<p>One biometric prompt creates your identity, derives encryption/signing/DID keys on-device, and provisions a gasless smart wallet. Social recovery replaces seed phrases. One login for every app.</p>
+					</div>
 				</div>
-
-				<div class="unlock-card">
-					<h3>No vendor, no kill switch</h3>
-					<p>
-						SaaS tools disappear when the company pivots or shuts down. Self-hosted
-						open-source tools keep running as long as you want them to. Your community's
-						infrastructure doesn't depend on anyone else's business model.
-					</p>
+				<div class="arch-layer infra">
+					<div class="arch-layer-label">Infra Layer</div>
+					<div class="arch-layer-content">
+						<h4>Docker + Traefik + your hardware</h4>
+						<p>Every app ships as an optimized Docker container. Traefik handles routing and TLS automatically. Deploy the full stack with a single <code>docker compose up</code> on any Linux server.</p>
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
 
-	<!-- EncryptID Deep Dive -->
-	<div class="section-full">
+	<!-- ════════════════════════════════════════════════ FUNCTIONAL AREAS ════ -->
+	<div class="section" id="areas">
 		<div class="section-inner">
-			<div class="section-divider"></div>
-			<h2>How EncryptID Works</h2>
+			<span class="section-label cyan">Functional Areas</span>
+			<h2>What the stack does</h2>
 			<p class="section-desc">
-				A single identity layer that turns a fingerprint or face scan into
-				full-stack access &mdash; encrypted storage, signed votes, community
-				treasury, and more &mdash; without passwords, seed phrases, or cloud accounts.
+				Twenty apps organized into seven functional areas. Each area solves a core challenge
+				of community coordination. Use the apps you need &mdash; they work independently
+				or as an integrated suite.
+			</p>
+
+			<div class="areas-nav">
+				<a href="#area-create" class="area-pill">Create &amp; Collaborate</a>
+				<a href="#area-plan" class="area-pill">Plan &amp; Coordinate</a>
+				<a href="#area-comm" class="area-pill">Communicate</a>
+				<a href="#area-decide" class="area-pill">Decide &amp; Govern</a>
+				<a href="#area-fund" class="area-pill">Fund &amp; Transact</a>
+				<a href="#area-share" class="area-pill">Share &amp; Connect</a>
+				<a href="#area-observe" class="area-pill">Observe &amp; Analyze</a>
+			</div>
+
+			<!-- ── Create & Collaborate ───── -->
+			<div class="area-block area-create" id="area-create">
+				<div class="area-header">
+					<div class="area-icon">&#9997;&#65039;</div>
+					<div>
+						<h3>Create &amp; Collaborate</h3>
+						<p>The creative workspace. Infinite canvases for spatial thinking, real-time documents for group writing, and a publishing pipeline that turns drafts into print-ready books.</p>
+					</div>
+				</div>
+				<div class="area-apps">
+					<a href="https://rspace.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">🌌</div>
+							<div><div class="app-card-name">rSpace</div><div class="app-card-domain">rspace.online</div></div>
+						</div>
+						<div class="app-card-desc">Collaborative spatial canvas. The integration hub where all r-Stack tools come together on a shared, infinite workspace. Real-time multiplayer with CRDT sync.</div>
+						<div class="app-card-built"><span>tldraw</span><span>Y.js</span><span>WebSocket</span></div>
+					</a>
+					<a href="https://rnotes.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">📝</div>
+							<div><div class="app-card-name">rNotes</div><div class="app-card-domain">rnotes.online</div></div>
+						</div>
+						<div class="app-card-desc">Real-time collaborative notebooks, checklists, and meeting notes. Block-based editor with end-to-end encryption and offline support.</div>
+						<div class="app-card-built"><span>BlockNote</span><span>Y.js</span><span>E2EE</span></div>
+					</a>
+					<a href="https://rpubs.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">📰</div>
+							<div><div class="app-card-name">rPubs</div><div class="app-card-domain">rpubs.online</div></div>
+						</div>
+						<div class="app-card-desc">Drop in a document, get a print-ready pocket book. Four formats, Typst typesetting, instant PDF generation. From draft to published in minutes.</div>
+						<div class="app-card-built"><span>Typst</span><span>PDF.js</span><span>Markdown</span></div>
+					</a>
+				</div>
+			</div>
+
+			<!-- ── Plan & Coordinate ───── -->
+			<div class="area-block area-plan" id="area-plan">
+				<div class="area-header">
+					<div class="area-icon">🗺</div>
+					<div>
+						<h3>Plan &amp; Coordinate</h3>
+						<p>Spatial and temporal coordination for groups. Schedule events across time zones, plan trips collaboratively, and map your community's presence across the world.</p>
+					</div>
+				</div>
+				<div class="area-apps">
+					<a href="https://rcal.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">📅</div>
+							<div><div class="app-card-name">rCal</div><div class="app-card-domain">rcal.online</div></div>
+						</div>
+						<div class="app-card-desc">Spatiotemporal group calendar. Ten zoom levels from moments to eras, map view for event locations, lunar phases, and deep integration with other r-Stack tools.</div>
+						<div class="app-card-built"><span>FullCalendar</span><span>Leaflet</span><span>iCal</span></div>
+					</a>
+					<a href="https://rtrips.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">✈️</div>
+							<div><div class="app-card-name">rTrips</div><div class="app-card-domain">rtrips.online</div></div>
+						</div>
+						<div class="app-card-desc">Group trip planning. Itineraries, destinations, packing lists, and expenses &mdash; all linked across rMaps, rFunds, and rNotes in real time.</div>
+						<div class="app-card-built"><span>Leaflet</span><span>CRDTs</span><span>Offline</span></div>
+					</a>
+					<a href="https://rmaps.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">🗺️</div>
+							<div><div class="app-card-name">rMaps</div><div class="app-card-domain">rmaps.online</div></div>
+						</div>
+						<div class="app-card-desc">Collaborative real-time mapping. Pin locations, draw regions, plan routes, and visualize your community's spatial footprint with open map tiles.</div>
+						<div class="app-card-built"><span>Leaflet</span><span>OpenStreetMap</span><span>GeoJSON</span></div>
+					</a>
+				</div>
+			</div>
+
+			<!-- ── Communicate ───── -->
+			<div class="area-block area-comm" id="area-comm">
+				<div class="area-header">
+					<div class="area-icon">💬</div>
+					<div>
+						<h3>Communicate</h3>
+						<p>Real-time and asynchronous communication channels. Encrypted chat for immediate coordination, shared inboxes for email workflows, and forums for long-form discourse.</p>
+					</div>
+				</div>
+				<div class="area-apps">
+					<a href="https://rchats.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">💬</div>
+							<div><div class="app-card-name">rChats</div><div class="app-card-domain">rchats.online</div></div>
+						</div>
+						<div class="app-card-desc">End-to-end encrypted community chat with self-sovereign identity. Channels, threads, and direct messages &mdash; all protected by EncryptID passkeys.</div>
+						<div class="app-card-built"><span>Matrix</span><span>E2EE</span><span>WebSocket</span></div>
+					</a>
+					<a href="https://rinbox.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">✉️</div>
+							<div><div class="app-card-name">rInbox</div><div class="app-card-domain">rinbox.online</div></div>
+						</div>
+						<div class="app-card-desc">Shared group inbox with multi-sig approval workflows. Self-hosted email for communities with entity extraction and graph-based discourse threading.</div>
+						<div class="app-card-built"><span>SMTP</span><span>NLP</span><span>Multi-sig</span></div>
+					</a>
+					<a href="https://rforum.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">🗣</div>
+							<div><div class="app-card-name">rForum</div><div class="app-card-domain">rforum.online</div></div>
+						</div>
+						<div class="app-card-desc">Self-hosted Discourse forums. Automated provisioning, DNS, SSL, and progress tracking. Full community discussion platform with trust levels and moderation.</div>
+						<div class="app-card-built"><span>Discourse</span><span>Docker</span><span>Auto-SSL</span></div>
+					</a>
+				</div>
+			</div>
+
+			<!-- ── Decide & Govern ───── -->
+			<div class="area-block area-decide" id="area-decide">
+				<div class="area-header">
+					<div class="area-icon">🗳</div>
+					<div>
+						<h3>Decide &amp; Govern</h3>
+						<p>Democratic decision-making tools for any group. From lightweight polls to weighted conviction voting, with cryptographically signed ballots that are verifiable but private.</p>
+					</div>
+				</div>
+				<div class="area-apps">
+					<a href="https://rchoices.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">🔀</div>
+							<div><div class="app-card-name">rChoices</div><div class="app-card-domain">rchoices.online</div></div>
+						</div>
+						<div class="app-card-desc">Collaborative decision making. Structured frameworks for evaluating options, weighing trade-offs, and reaching consensus as a group.</div>
+						<div class="app-card-built"><span>CRDTs</span><span>Real-time</span></div>
+					</a>
+					<a href="https://rvote.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">🗳️</div>
+							<div><div class="app-card-name">rVote</div><div class="app-card-domain">rvote.online</div></div>
+						</div>
+						<div class="app-card-desc">Community governance. Create polls, weighted votes, and conviction-style proposals. Cryptographically signed ballots tied to EncryptID for verifiable, private voting.</div>
+						<div class="app-card-built"><span>ZK Proofs</span><span>CRDT Ledger</span><span>ERC-4337</span></div>
+					</a>
+				</div>
+			</div>
+
+			<!-- ── Fund & Transact ───── -->
+			<div class="area-block area-fund" id="area-fund">
+				<div class="area-header">
+					<div class="area-icon">💰</div>
+					<div>
+						<h3>Fund &amp; Transact</h3>
+						<p>Community economics without crypto literacy. Pool resources, track budgets, run auctions, and manage treasuries &mdash; all through the same biometric login, with smart wallets handling the complexity underneath.</p>
+					</div>
+				</div>
+				<div class="area-apps">
+					<a href="https://rwallet.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">💰</div>
+							<div><div class="app-card-name">rWallet</div><div class="app-card-domain">rwallet.online</div></div>
+						</div>
+						<div class="app-card-desc">Community treasury management. Track shared resources, contributions, and funding flows with smart wallets. Paymaster-sponsored gasless transactions.</div>
+						<div class="app-card-built"><span>ERC-4337</span><span>Base L2</span><span>USDC</span></div>
+					</a>
+					<a href="https://rfunds.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">📊</div>
+							<div><div class="app-card-name">rFunds</div><div class="app-card-domain">rfunds.online</div></div>
+						</div>
+						<div class="app-card-desc">Budget tracking and expense management. Split costs, allocate funds, and maintain transparent community finances with full audit trails.</div>
+						<div class="app-card-built"><span>CRDT Ledger</span><span>Multi-sig</span></div>
+					</a>
+					<a href="https://rcart.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">🛒</div>
+							<div><div class="app-card-name">rCart</div><div class="app-card-domain">rcart.online</div></div>
+						</div>
+						<div class="app-card-desc">Group purchasing and crowdfunding. Pool resources, compare options, and fund community projects together. Accepts community tokens as payment.</div>
+						<div class="app-card-built"><span>BFT-CRDT</span><span>Tokens</span></div>
+					</a>
+					<a href="https://rauctions.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">🔨</div>
+							<div><div class="app-card-name">rAuctions</div><div class="app-card-domain">rauctions.online</div></div>
+						</div>
+						<div class="app-card-desc">Cosmolocal auctions. List items, bid with USDC on Base, and settle peer-to-peer with EncryptID identity verification.</div>
+						<div class="app-card-built"><span>Base L2</span><span>USDC</span><span>P2P</span></div>
+					</a>
+				</div>
+			</div>
+
+			<!-- ── Share & Connect ───── -->
+			<div class="area-block area-share" id="area-share">
+				<div class="area-header">
+					<div class="area-icon">🌐</div>
+					<div>
+						<h3>Share &amp; Connect</h3>
+						<p>Media, identity, and relationships. Store and share files with end-to-end encryption, host video without algorithms, map your community's social graph, and even print merch on demand.</p>
+					</div>
+				</div>
+				<div class="area-apps">
+					<a href="https://rnetwork.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">🕸</div>
+							<div><div class="app-card-name">rNetwork</div><div class="app-card-domain">rnetwork.online</div></div>
+						</div>
+						<div class="app-card-desc">Community directory and relationship mapping. See who's connected, discover collaborators, and grow your network with DID-based portable identity.</div>
+						<div class="app-card-built"><span>Social Graph</span><span>DID</span><span>WebSocket</span></div>
+					</a>
+					<a href="https://rfiles.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">📁</div>
+							<div><div class="app-card-name">rFiles</div><div class="app-card-domain">rfiles.online</div></div>
+						</div>
+						<div class="app-card-desc">End-to-end encrypted file storage. Your community's documents, images, and media &mdash; encrypted with keys only community members hold. No admin backdoor.</div>
+						<div class="app-card-built"><span>E2EE</span><span>S3-compat</span><span>WebDAV</span></div>
+					</a>
+					<a href="https://rtube.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">🎬</div>
+							<div><div class="app-card-name">rTube</div><div class="app-card-domain">rtube.online</div></div>
+						</div>
+						<div class="app-card-desc">Community video sharing and streaming. Host, curate, and discuss video content without platform algorithms, ads, or surveillance.</div>
+						<div class="app-card-built"><span>PeerTube</span><span>HLS</span><span>ActivityPub</span></div>
+					</a>
+					<a href="https://rswag.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">👕</div>
+							<div><div class="app-card-name">rSwag</div><div class="app-card-domain">rswag.online</div></div>
+						</div>
+						<div class="app-card-desc">Community merchandise on demand. Design, customize, and order stickers, shirts, and more with AI-powered design tools.</div>
+						<div class="app-card-built"><span>Print API</span><span>AI Design</span></div>
+					</a>
+				</div>
+			</div>
+
+			<!-- ── Observe & Analyze ───── -->
+			<div class="area-block area-observe" id="area-observe">
+				<div class="area-header">
+					<div class="area-icon">📊</div>
+					<div>
+						<h3>Observe &amp; Analyze</h3>
+						<p>Privacy-respecting analytics that your community controls. No third-party trackers, no data brokers, no surveillance capitalism.</p>
+					</div>
+				</div>
+				<div class="area-apps">
+					<a href="https://rdata.online" class="app-card" target="_blank" rel="noopener noreferrer">
+						<div class="app-card-header">
+							<div class="app-card-icon">📈</div>
+							<div><div class="app-card-name">rData</div><div class="app-card-domain">rdata.online</div></div>
+						</div>
+						<div class="app-card-desc">Self-hosted analytics dashboard. Lightweight, cookie-free, GDPR-compliant web analytics. See what matters without harvesting user data.</div>
+						<div class="app-card-built"><span>Plausible</span><span>No cookies</span><span>GDPR</span></div>
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- ════════════════════════════════════════════════ IDENTITY ════ -->
+	<div class="section alt" id="identity">
+		<div class="section-inner">
+			<span class="section-label green">Identity Layer</span>
+			<h2>EncryptID &mdash; the glue</h2>
+			<p class="section-desc">
+				A single identity layer that turns a fingerprint or face scan into full-stack
+				access &mdash; encrypted storage, signed votes, community treasury, and more &mdash;
+				without passwords, seed phrases, or cloud accounts.
 			</p>
 
 			<div class="eid-grid">
@@ -1151,52 +1422,38 @@
 					<div class="eid-card-icon">🔑</div>
 					<h3>Passkey Authentication</h3>
 					<p>
-						EncryptID is built on <span class="hl">WebAuthn passkeys</span> &mdash; the same
-						standard behind Face ID and fingerprint unlock on your phone. Your identity is
-						bound to your device's secure hardware (TPM or Secure Enclave), so there is
-						nothing to type, nothing to remember, and nothing that can be phished. Registration
-						and login are a single biometric prompt.
+						Built on <span class="hl">WebAuthn passkeys</span> &mdash; the same standard
+						behind Face ID and fingerprint unlock. Your identity is bound to your device's
+						secure hardware (TPM / Secure Enclave). Nothing to type, nothing to remember,
+						nothing that can be phished.
 					</p>
 				</div>
-
 				<div class="eid-card">
 					<div class="eid-card-icon">🏠</div>
-					<h3>Local-First Data Sovereignty</h3>
+					<h3>Local-First Key Derivation</h3>
 					<p>
-						When you authenticate, EncryptID derives a full set of cryptographic keys
-						<span class="hl">entirely on your device</span> using HKDF. These keys
-						never leave your hardware. Your encryption key protects your files, your signing
-						key validates your votes, and your DID key proves your identity &mdash; all
-						without a central server ever seeing your private material. Data syncs
-						peer-to-peer via CRDTs; the server is just a relay, not an authority.
+						Authentication derives a full set of cryptographic keys <span class="hl">entirely on your device</span>
+						using HKDF. Encryption keys for files, signing keys for votes, DID keys for portable
+						identity &mdash; all generated locally. The server is a relay, never an authority.
 					</p>
 				</div>
-
 				<div class="eid-card">
 					<div class="eid-card-icon">🛡</div>
 					<h3>Social Recovery</h3>
 					<p>
-						Lost your phone? No problem &mdash; and no seed phrase to dig out of a drawer.
-						EncryptID uses <span class="hl">guardian-based recovery</span>: you designate
-						trusted people (friends, family, community leaders) as guardians. If you lose
-						access, any 3 of your 5 guardians can approve recovery after a 48-hour
-						time-lock &mdash; giving you time to cancel if something seems wrong. Guardians
-						never see each other's identities or your private keys.
+						Lost your phone? Designate trusted guardians (friends, family, community leaders).
+						Any 3 of 5 guardians can approve recovery after a 48-hour time-lock. No seed phrases,
+						no email resets. Guardians never see each other's identities or your private keys.
 					</p>
 				</div>
-
 				<div class="eid-card">
 					<div class="eid-card-icon">💳</div>
 					<h3>Wallet Abstraction</h3>
 					<p>
-						EncryptID integrates <span class="hl">Account Abstraction (ERC-4337)</span>
-						smart wallets, which means every user gets an on-chain wallet &mdash; without
-						ever seeing a wallet address, gas fee, or blockchain confirmation. Your passkey
-						<em>is</em> your wallet signer. A <span class="hl">paymaster</span> sponsors
-						transaction fees so users never need to hold ETH. Session keys allow daily
-						operations (voting, micro-payments, content uploads) with a single biometric
-						prompt per session rather than per action. Spending limits and time-locks
-						protect community treasuries.
+						Every user gets an <span class="hl">ERC-4337</span> smart wallet &mdash; without
+						ever seeing a wallet address or gas fee. Your passkey <em>is</em> your wallet signer.
+						A paymaster sponsors fees. Session keys allow daily operations with a single biometric
+						prompt per session.
 					</p>
 				</div>
 			</div>
@@ -1232,229 +1489,251 @@
 		</div>
 	</div>
 
-	<!-- What this unlocks -->
-	<div class="section-full alt-bg">
+	<!-- ════════════════════════════════════════════════ TOKENS ════ -->
+	<div class="section" id="tokens">
 		<div class="section-inner">
-			<div class="section-divider"></div>
-			<h2>What This Unlocks</h2>
+			<span class="section-label amber">Token Layer</span>
+			<h2>Community token issuance</h2>
 			<p class="section-desc">
-				Most blockchain tools assume users already know what a wallet is.
-				EncryptID removes that assumption entirely. Here's what becomes possible
-				when identity, encryption, and treasury are invisible infrastructure
-				rather than technical prerequisites.
+				Any r-Stack app can issue tokens through the shared CRDT data layer &mdash;
+				no smart contract deployment, no gas fees, no blockchain expertise required.
+				Bridge to on-chain when you're ready.
 			</p>
 
-			<div class="unlock-grid">
-				<div class="unlock-card">
-					<h3>Community treasuries without crypto literacy</h3>
+			<div class="token-features">
+				<div class="token-card" style="grid-column: 1 / -1;">
+					<h3>BFT-CRDT Tokens</h3>
 					<p>
-						A neighbourhood association can pool funds, vote on how to spend them,
-						and track every transaction on an immutable ledger &mdash; all through
-						the same fingerprint login they use to unlock their phone. No one needs
-						to understand gas, private keys, or blockchain explorers. The wallet is
-						there, it's auditable, and it's invisible.
+						Tokens are built on <span class="hl">Byzantine Fault Tolerant CRDTs</span> &mdash;
+						the same conflict-free data structures that power real-time sync across every app.
+						They replicate peer-to-peer, resolve conflicts automatically, and maintain a
+						consistent ledger without a central mint. When ready, the CRDT ledger can bridge
+						to an ERC-20 on any EVM chain through the Account Abstraction wallet.
 					</p>
 				</div>
-
-				<div class="unlock-card">
-					<h3>Tamper-proof governance for any group</h3>
+				<div class="token-card">
+					<h3>Membership &amp; access tokens</h3>
 					<p>
-						Co-ops, DAOs, strata councils, mutual aid networks &mdash; any group
-						that votes can use <span class="hl">rVote</span> with cryptographically
-						signed ballots that are verifiable but private. Because the signing key is
-						derived from a passkey, members don't need to manage keys or install
-						extensions. They just vote.
+						Gate access to private canvases, files, or voting channels. Revoke by removing
+						the token. Permissions propagate in real-time through the CRDT mesh.
 					</p>
 				</div>
-
-				<div class="unlock-card">
-					<h3>Encrypted collaboration by default</h3>
+				<div class="token-card">
+					<h3>Contribution credits</h3>
 					<p>
-						Files shared in <span class="hl">rFiles</span>, notes in
-						<span class="hl">rNotes</span>, and canvases in
-						<span class="hl">rSpace</span> are end-to-end encrypted with keys
-						that only the community members hold. There's no admin backdoor, no
-						platform that can read your data, and no breach that exposes plaintext.
-						Privacy isn't a setting &mdash; it's the architecture.
+						Reward participation: meetings attended, tasks completed, content contributed.
+						Credits accumulate and can be redeemed for governance weight, budget allocation,
+						or marketplace purchases.
 					</p>
 				</div>
-
-				<div class="unlock-card">
-					<h3>Portable identity across communities</h3>
+				<div class="token-card">
+					<h3>Fundraising &amp; grants</h3>
 					<p>
-						Your EncryptID is a <span class="hl">DID (Decentralized Identifier)</span>
-						that you own. Join a new community, and your reputation, credentials, and
-						relationships can follow you &mdash; without creating a new account or
-						trusting a new platform with your data. Leave a community, and your
-						identity stays yours.
+						Distribute project tokens to supporters. Track contributions transparently through
+						rFunds and vote on allocation through rVote. Full history auditable by token holders.
 					</p>
 				</div>
-
-				<div class="unlock-card">
-					<h3>Micro-payments and crowdfunding without fees</h3>
+				<div class="token-card">
+					<h3>Bridge to on-chain</h3>
 					<p>
-						Paymaster-sponsored transactions mean a community can run a group
-						purchase in <span class="hl">rCart</span>, split expenses in
-						<span class="hl">rFunds</span>, or fund a project through
-						<span class="hl">rWallet</span> without any member paying gas fees.
-						The smart wallet batches operations, so what would be ten separate
-						transactions becomes one seamless action.
-					</p>
-				</div>
-
-				<div class="unlock-card">
-					<h3>Real ownership of community infrastructure</h3>
-					<p>
-						Because every app is <span class="hl">open source</span> and
-						<span class="hl">self-hosted</span>, communities aren't tenants on
-						someone else's platform. Fork the code, run it on your own hardware,
-						audit every line. The r-Stack is infrastructure that communities
-						<em>own</em>, not services they <em>rent</em>.
+						Start with zero-friction off-chain CRDT tokens. When you need DeFi composability
+						or cross-community exchange, bridge to ERC-20 with a single action through
+						the smart wallet.
 					</p>
 				</div>
 			</div>
+		</div>
+	</div>
 
-			<div style="text-align: center; margin-top: 2.5rem;">
-				<a href="https://encryptid.jeffemmett.com" class="encryptid-link">
-					🔐 Explore EncryptID
+	<!-- ════════════════════════════════════════════════ OPEN SOURCE ════ -->
+	<div class="section alt" id="open-source">
+		<div class="section-inner">
+			<span class="section-label cyan">Foundations</span>
+			<h2>Built on the best of open source</h2>
+			<p class="section-desc">
+				rStack doesn't reinvent wheels. Every app is assembled from battle-tested
+				open-source projects &mdash; the latest and greatest tools, composed into
+				a cohesive platform.
+			</p>
+
+			<div class="oss-grid">
+				<div class="oss-card">
+					<h4>tldraw</h4>
+					<p>Infinite canvas engine powering rSpace. Real-time multiplayer drawing, diagramming, and spatial thinking.</p>
+					<span class="oss-tag">Canvas</span>
+				</div>
+				<div class="oss-card">
+					<h4>Y.js / CRDTs</h4>
+					<p>Conflict-free replicated data types for real-time sync. Peer-to-peer, offline-capable, eventually consistent.</p>
+					<span class="oss-tag">Sync Layer</span>
+				</div>
+				<div class="oss-card">
+					<h4>WebAuthn</h4>
+					<p>W3C standard for passwordless authentication. Hardware-backed passkeys via TPM and Secure Enclave.</p>
+					<span class="oss-tag">Identity</span>
+				</div>
+				<div class="oss-card">
+					<h4>Discourse</h4>
+					<p>The leading open-source discussion platform. Trust levels, moderation, and rich threading for rForum.</p>
+					<span class="oss-tag">Community</span>
+				</div>
+				<div class="oss-card">
+					<h4>Leaflet + OSM</h4>
+					<p>Open-source mapping with OpenStreetMap tiles. Powers rMaps, rCal's spatial view, and rTrips route planning.</p>
+					<span class="oss-tag">Mapping</span>
+				</div>
+				<div class="oss-card">
+					<h4>Matrix Protocol</h4>
+					<p>Decentralized, end-to-end encrypted messaging standard. Interoperable federation for rChats.</p>
+					<span class="oss-tag">Messaging</span>
+				</div>
+				<div class="oss-card">
+					<h4>Typst</h4>
+					<p>Modern typesetting system that's fast, ergonomic, and beautiful. Powers rPubs' document pipeline.</p>
+					<span class="oss-tag">Publishing</span>
+				</div>
+				<div class="oss-card">
+					<h4>PeerTube</h4>
+					<p>Federated video hosting with ActivityPub. No algorithms, no ads, no surveillance. Powers rTube.</p>
+					<span class="oss-tag">Video</span>
+				</div>
+				<div class="oss-card">
+					<h4>Plausible</h4>
+					<p>Privacy-friendly analytics. No cookies, GDPR compliant, lightweight. Powers rData.</p>
+					<span class="oss-tag">Analytics</span>
+				</div>
+				<div class="oss-card">
+					<h4>ERC-4337</h4>
+					<p>Account Abstraction standard for smart wallets. Gasless transactions, session keys, and social recovery.</p>
+					<span class="oss-tag">Wallet</span>
+				</div>
+				<div class="oss-card">
+					<h4>Docker + Traefik</h4>
+					<p>Container orchestration with automatic service discovery and TLS. The deployment backbone of every app.</p>
+					<span class="oss-tag">Infrastructure</span>
+				</div>
+				<div class="oss-card">
+					<h4>Hono / Next.js</h4>
+					<p>Edge-first web frameworks. Fast, lightweight, and deployable anywhere &mdash; from Cloudflare Workers to Docker.</p>
+					<span class="oss-tag">Framework</span>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- ════════════════════════════════════════════════ SELF-HOST ════ -->
+	<div class="section" id="self-host">
+		<div class="section-inner">
+			<span class="section-label orange">Deployment</span>
+			<h2>Self-host your stack</h2>
+			<p class="section-desc">
+				Every r-Stack app ships as a Docker container. Clone, configure, deploy.
+				The whole suite runs on a VPS, a home server, or community-shared infrastructure.
+			</p>
+
+			<div class="flow-box" style="margin-bottom: 2.5rem;">
+<pre>
+  $ git clone https://git.rstack.online/rstack
+  $ cd rstack
+  $ cp .env.example .env        # set your domain + secrets
+  $ docker compose up -d        # that's it
+
+  ✓ rSpace     → space.yourdomain.org
+  ✓ rNotes     → notes.yourdomain.org
+  ✓ rVote      → vote.yourdomain.org
+  ✓ rFunds     → funds.yourdomain.org
+  ✓ rFiles     → files.yourdomain.org
+  ✓ rMaps      → maps.yourdomain.org
+  ✓ EncryptID  → id.yourdomain.org
+  ...and every other app in the suite
+</pre>
+			</div>
+
+			<div class="deploy-grid">
+				<div class="deploy-card">
+					<h3>Your server, your rules</h3>
+					<p>
+						No SaaS subscription, no per-seat pricing, no usage caps. Run the entire stack
+						for your 5-person co-op or your 500-person organization on a single $10/month VPS.
+						Scale by adding hardware, not upgrading a pricing tier.
+					</p>
+				</div>
+				<div class="deploy-card">
+					<h3>Community infrastructure</h3>
+					<p>
+						Don't want to manage a server? Join a community-hosted instance. Multiple
+						organizations can share infrastructure costs while maintaining isolated,
+						encrypted data spaces. Federate across instances when you're ready.
+					</p>
+				</div>
+				<div class="deploy-card">
+					<h3>Fork and customize</h3>
+					<p>
+						Need a custom voting algorithm? A different map provider? A branded theme?
+						Fork the repo, change what you need, deploy. Every app is designed to be
+						modified. No permission required.
+					</p>
+				</div>
+				<div class="deploy-card">
+					<h3>No vendor, no kill switch</h3>
+					<p>
+						SaaS tools disappear when the company pivots or shuts down. Self-hosted
+						open-source tools keep running as long as you want them to. Your community's
+						infrastructure doesn't depend on anyone else's business model.
+					</p>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- ════════════════════════════════════════════════ DEMO ════ -->
+	<div class="section alt" id="demo">
+		<div class="section-inner">
+			<span class="section-label rose">Interactive</span>
+			<h2>See it in action</h2>
+			<p class="section-desc">
+				Explore each app independently or see how they work together as a suite.
+				Every app is live and ready to try.
+			</p>
+
+			<div class="demo-preview">
+				<a href="https://rspace.online" class="demo-card" target="_blank" rel="noopener noreferrer">
+					<div class="demo-card-icon">🌌</div>
+					<h3>Open a Canvas</h3>
+					<p>Jump into rSpace and start collaborating on an infinite, real-time canvas</p>
+				</a>
+				<a href="https://rvote.online" class="demo-card" target="_blank" rel="noopener noreferrer">
+					<div class="demo-card-icon">🗳</div>
+					<h3>Cast a Vote</h3>
+					<p>Create a poll in rVote and see cryptographic ballot signing in action</p>
+				</a>
+				<a href="https://rpubs.online" class="demo-card" target="_blank" rel="noopener noreferrer">
+					<div class="demo-card-icon">📰</div>
+					<h3>Publish a Book</h3>
+					<p>Drop a document into rPubs and generate a print-ready PDF in seconds</p>
+				</a>
+				<a href="https://rcal.online" class="demo-card" target="_blank" rel="noopener noreferrer">
+					<div class="demo-card-icon">📅</div>
+					<h3>Plan Together</h3>
+					<p>Explore rCal's spatiotemporal calendar with ten zoom levels</p>
+				</a>
+				<a href="https://rmaps.online" class="demo-card" target="_blank" rel="noopener noreferrer">
+					<div class="demo-card-icon">🗺</div>
+					<h3>Map Your World</h3>
+					<p>Pin locations and draw regions on a collaborative open-source map</p>
+				</a>
+				<a href="https://encryptid.jeffemmett.com" class="demo-card" target="_blank" rel="noopener noreferrer">
+					<div class="demo-card-icon">🔐</div>
+					<h3>Try EncryptID</h3>
+					<p>Register with a passkey and see zero-knowledge identity in action</p>
 				</a>
 			</div>
 		</div>
 	</div>
 
-	<!-- Token Issuance -->
-	<div class="section-full">
-		<div class="section-inner">
-			<div class="section-divider"></div>
-			<h2>Community Token Issuance</h2>
-			<p class="section-desc">
-				Any r-Stack app can issue tokens to community members through the shared
-				CRDT data layer &mdash; no smart contract deployment, no gas fees, no
-				blockchain expertise required.
-			</p>
-
-			<div class="eid-grid">
-				<div class="eid-card" style="grid-column: 1 / -1;">
-					<div class="eid-card-icon">🪙</div>
-					<h3>BFT-CRDT Tokens</h3>
-					<p>
-						r-Stack tokens are built on <span class="hl">Byzantine Fault Tolerant CRDTs</span>
-						&mdash; the same conflict-free data structures that power real-time sync across
-						every app. Tokens are first-class objects in the shared data layer: they replicate
-						peer-to-peer, resolve conflicts automatically, and maintain a consistent ledger
-						across all participants without a central mint or blockchain validator. When your
-						community is ready to bridge to an on-chain asset, the CRDT ledger provides a
-						cryptographically verifiable history that can be anchored to any EVM chain
-						through the Account Abstraction wallet.
-					</p>
-				</div>
-
-				<div class="eid-card">
-					<div class="eid-card-icon">📋</div>
-					<h3>Issue by Email or EncryptID</h3>
-					<p>
-						A community admin adds members by <span class="hl">email address</span> or
-						<span class="hl">EncryptID account</span> to a distribution list. Hit issue,
-						and each member receives tokens in their r-Stack wallet instantly. Recipients
-						who haven't signed up yet get an invite link &mdash; their tokens are held in
-						escrow until they create a passkey, at which point the allocation transfers
-						automatically. No wallet addresses to copy-paste, no chain selection, no
-						confirmation dialogs.
-					</p>
-				</div>
-
-				<div class="eid-card">
-					<div class="eid-card-icon">🔄</div>
-					<h3>Works Across Every App</h3>
-					<p>
-						Because tokens live in the shared CRDT layer, every r-Stack app can read and
-						write them. <span class="hl">rVote</span> can weight votes by token holdings.
-						<span class="hl">rFunds</span> can allocate budgets proportionally.
-						<span class="hl">rWallet</span> can gate treasury access by membership tokens.
-						<span class="hl">rCart</span> can accept community tokens as payment. The
-						token is a primitive that flows through the entire stack, not a siloed balance
-						locked inside one app.
-					</p>
-				</div>
-			</div>
-
-			<div class="flow-box">
-<pre>
-  Community Admin
-       |
-       |  1. Add members (email or EncryptID)
-       v
-  ┌──────────────────────────────────────────────────────┐
-  |  Token Issuance (BFT-CRDT)                           |
-  |                                                      |
-  |  2. Define token: name, supply, distribution rules   |
-  |  3. Issue → tokens replicate across CRDT mesh        |
-  |  4. Members receive in r-Stack wallet instantly       |
-  └──────────────────────────────────────────────────────┘
-       |
-       |  Tokens are usable immediately across:
-       v
-  ┌──────────┬──────────┬──────────┬──────────┐
-  | rVote    | rFunds   | rWallet  | rCart    |
-  | weighted | budget   | treasury | payment  |
-  | voting   | shares   | access   | method   |
-  └──────────┴──────────┴──────────┴──────────┘
-       |
-       |  Optional: bridge to on-chain (ERC-20)
-       v
-  EVM Chain (via Account Abstraction wallet)
-</pre>
-			</div>
-
-			<div class="unlock-grid" style="margin-top: 2rem;">
-				<div class="unlock-card">
-					<h3>Membership and access tokens</h3>
-					<p>
-						Issue a token that represents membership in your community space. Gate
-						access to private canvases, files, or voting channels. Revoke by removing
-						the token. No smart contract audit needed &mdash; the CRDT ledger
-						is the source of truth, and permissions propagate in real-time.
-					</p>
-				</div>
-
-				<div class="unlock-card">
-					<h3>Contribution credits</h3>
-					<p>
-						Reward members for participation: attending meetings, completing tasks,
-						contributing content. Credits accumulate in the CRDT ledger and can be
-						redeemed for governance weight in <span class="hl">rVote</span>, budget
-						allocation in <span class="hl">rFunds</span>, or community marketplace
-						purchases in <span class="hl">rCart</span>.
-					</p>
-				</div>
-
-				<div class="unlock-card">
-					<h3>Fundraising and grants</h3>
-					<p>
-						Create a project token, distribute to supporters, and track contributions
-						transparently. Supporters can see exactly how funds flow through
-						<span class="hl">rFunds</span> and vote on allocation through
-						<span class="hl">rVote</span>. The full history is auditable by
-						anyone holding the token.
-					</p>
-				</div>
-
-				<div class="unlock-card">
-					<h3>Bridge to on-chain when ready</h3>
-					<p>
-						Start with off-chain CRDT tokens for zero friction and zero cost.
-						When your community needs on-chain guarantees &mdash; for DeFi
-						composability, cross-community exchange, or regulatory compliance &mdash;
-						the CRDT ledger can be bridged to an <span class="hl">ERC-20</span>
-						token through the Account Abstraction wallet with a single action.
-					</p>
-				</div>
-			</div>
-		</div>
-	</div>
-
+	<!-- ════════════════════════════════════════════════ FOOTER ════ -->
 	<footer>
-		<div style="display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-bottom:12px;">
+		<div class="footer-apps">
 			<span style="font-weight:500;color:#64748b;">r* Ecosystem</span>
 			<a href="https://rspace.online">rSpace</a>
 			<a href="https://rmaps.online">rMaps</a>
@@ -1475,13 +1754,16 @@
 			<a href="https://rauctions.online">rAuctions</a>
 			<a href="https://rpubs.online">rPubs</a>
 			<a href="https://rforum.online">rForum</a>
+			<a href="https://rswag.online">rSwag</a>
 			<a href="https://rdata.online">rData</a>
 		</div>
 		<p>rStack &mdash; open source, self-hosted, community-owned</p>
 	</footer>
 
+	<!-- ════════════════════════════════════════════════ JS ════ -->
 	<script>
 	(function() {
+		// App Switcher
 		var trigger = document.getElementById('appSwitcherTrigger');
 		var dropdown = document.getElementById('appSwitcherDropdown');
 		var switcher = document.getElementById('appSwitcher');
@@ -1500,7 +1782,6 @@
 			}
 		});
 
-		// Close on Escape key
 		document.addEventListener('keydown', function(e) {
 			if (e.key === 'Escape') {
 				dropdown.classList.remove('open');
@@ -1508,13 +1789,23 @@
 			}
 		});
 
-		// Close dropdown when any app link inside is clicked
 		dropdown.querySelectorAll('.app-switcher-item a:first-child').forEach(function(link) {
 			link.addEventListener('click', function() {
 				dropdown.classList.remove('open');
 				trigger.setAttribute('aria-expanded', 'false');
 			});
 		});
+
+		// Smooth scroll for anchor links
+		document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
+			anchor.addEventListener('click', function(e) {
+				var target = document.querySelector(this.getAttribute('href'));
+				if (target) {
+					e.preventDefault();
+					target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+				}
+			});
+		});
 	})();
 	</script>