feat: update nav to match standard rstack-header style

- Nav changed from sticky to fixed position
- Background/border colors matched to rstack-header dark theme
- Added gradient r* logo badge (28x28, matching rstack-header dimensions)
- Added "Try Demo" button with standard rApp styling
- Right side wrapped in nav-right for consistent layout
- Hero padding adjusted for fixed nav offset
- Section scroll-margin-top set for proper anchor scrolling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

index.html

@@ -24,21 +24,24 @@
 		.hl-green { color: #34d399; font-weight: 600; }
 		.hl-orange { color: #fb923c; font-weight: 600; }
 
-		/* ── Nav ──────────────────────────────────────── */
+		/* ── Nav (matches rstack-header) ─────────────── */
 
 		nav {
-			position: sticky;
+			position: fixed;
 			top: 0;
-			z-index: 100;
-			background: rgba(11, 17, 32, 0.85);
+			left: 0;
+			right: 0;
+			z-index: 9999;
+			background: rgba(15, 23, 42, 0.85);
 			backdrop-filter: blur(12px);
-			border-bottom: 1px solid rgba(255,255,255,0.06);
+			-webkit-backdrop-filter: blur(12px);
+			border-bottom: 1px solid rgba(255,255,255,0.08);
+			color: #e2e8f0;
 		}
 
 		.nav-inner {
-			max-width: 1100px;
 			margin: 0 auto;
-			padding: 0 1.5rem;
+			padding: 0 16px;
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
@@ -48,7 +51,7 @@
 		.nav-left {
 			display: flex;
 			align-items: center;
-			gap: 0.75rem;
+			gap: 4px;
 		}
 
 		.nav-brand {
@@ -59,6 +62,28 @@
 			color: #e2e8f0;
 			font-size: 1.1rem;
 			font-weight: 600;
+			margin-right: 4px;
+		}
+
+		.nav-brand-badge {
+			width: 28px;
+			height: 28px;
+			border-radius: 6px;
+			background: linear-gradient(135deg, #22d3ee, #a78bfa, #fb923c);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 11px;
+			font-weight: 900;
+			color: #0b1120;
+			line-height: 1;
+			flex-shrink: 0;
+		}
+
+		.nav-right {
+			display: flex;
+			align-items: center;
+			gap: 12px;
 		}
 
 		.nav-links {
@@ -76,11 +101,28 @@
 
 		.nav-links a:hover { color: #e2e8f0; }
 
+		.nav-demo-btn {
+			display: inline-flex;
+			align-items: center;
+			padding: 5px 14px;
+			border-radius: 6px;
+			font-size: 0.78rem;
+			font-weight: 600;
+			text-decoration: none;
+			white-space: nowrap;
+			transition: background 0.15s, opacity 0.15s;
+			background: linear-gradient(135deg, #14b8a6, #0d9488);
+			color: #fff;
+			box-shadow: 0 1px 4px rgba(20, 184, 166, 0.25);
+		}
+		.nav-demo-btn:hover { opacity: 0.88; }
+
 		/* ── Hero ─────────────────────────────────────── */
 
 		.hero {
 			text-align: center;
 			padding: 7rem 1.5rem 5rem;
+			padding-top: calc(56px + 5rem);
 			max-width: 820px;
 			margin: 0 auto;
 		}
@@ -345,9 +387,12 @@
 
 		.area-block {
 			margin-bottom: 4rem;
-			scroll-margin-top: 80px;
+			scroll-margin-top: 72px;
 		}
 
+		/* Ensure section anchors clear fixed nav */
+		.section[id] { scroll-margin-top: 72px; }
+
 		.area-header {
 			display: flex;
 			align-items: flex-start;
@@ -925,7 +970,9 @@
 	<nav>
 		<div class="nav-inner">
 			<div class="nav-left">
-				<a href="/" class="nav-brand">rStack</a>
+				<a href="/" class="nav-brand">
+					<span class="nav-brand-badge">r*</span>
+				</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>
@@ -1068,11 +1115,14 @@
 					</div>
 				</div>
 			</div>
-			<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 class="nav-right">
+				<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>
+				<a class="nav-demo-btn" href="https://demo.rspace.online/rspace">Try Demo</a>
 			</div>
 		</div>
 	</nav>