diff --git a/templates/pages/bold-marketing.tmpl b/templates/pages/bold-marketing.tmpl
index 396e0269a2..81a82aa947 100644
--- a/templates/pages/bold-marketing.tmpl
+++ b/templates/pages/bold-marketing.tmpl
@@ -1,175 +1,287 @@
 {{template "pages/base_head" .}}
 <style>
-	@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
+	@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');
 
 	:root {
-	--bm-primary: {{if .Config.Theme.PrimaryColor}}{{.Config.Theme.PrimaryColor}}{{else}}#ff6b6b{{end}};
-	--bm-accent: {{if .Config.Theme.AccentColor}}{{.Config.Theme.AccentColor}}{{else}}#48dbfb{{end}};
-	--bm-bg: #050505;
-	--bm-text: #ffffff;
-	--bm-muted: rgba(255, 255, 255, 0.6);
-	--bm-subtle: rgba(255, 255, 255, 0.3);
-	--bm-border: rgba(255, 255, 255, 0.08);
+	--nb-primary: {{if .Config.Theme.PrimaryColor}}{{.Config.Theme.PrimaryColor}}{{else}}#ff2d55{{end}};
+	--nb-accent: {{if .Config.Theme.AccentColor}}{{.Config.Theme.AccentColor}}{{else}}#00f0ff{{end}};
+	--nb-neon-yellow: #e4ff1a;
+	--nb-bg: #0a0a0a;
+	--nb-surface: #111111;
+	--nb-text: #ffffff;
+	--nb-muted: rgba(255, 255, 255, 0.55);
+	--nb-subtle: rgba(255, 255, 255, 0.25);
+	--nb-border: rgba(255, 255, 255, 0.06);
+	--nb-border-hard: rgba(255, 255, 255, 0.12);
 	}
 
-	.bm-page {
+	/* Scroll reveal */
+	.nb-reveal {
+	opacity: 0;
+	transform: translateY(24px);
+	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+	}
+	.nb-reveal.visible {
+	opacity: 1;
+	transform: translateY(0);
+	}
+	.nb-reveal-delay-1 { transition-delay: 0.1s; }
+	.nb-reveal-delay-2 { transition-delay: 0.2s; }
+	.nb-reveal-delay-3 { transition-delay: 0.3s; }
+
+	.nb-page {
 	min-height: 100vh;
-	background: var(--bm-bg);
-	color: var(--bm-text);
-	font-family: 'Outfit', -apple-system, sans-serif;
+	background: var(--nb-bg);
+	color: var(--nb-text);
+	font-family: 'Syne', -apple-system, sans-serif;
 	line-height: 1.6;
 	overflow-x: hidden;
+	position: relative;
 	}
 
-	.bm-gradient-text {
-	background: linear-gradient(135deg, #ff6b6b 0%, #feca57 25%, #48dbfb 50%, #ff9ff3 75%, #ff6b6b 100%);
-	background-size: 200% auto;
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-	background-clip: text;
-	animation: bm-shimmer 3s linear infinite;
+	/* Grid lines background */
+	.nb-page::before {
+	content: '';
+	position: fixed;
+	inset: 0;
+	background-image:
+		linear-gradient(var(--nb-border) 1px, transparent 1px),
+		linear-gradient(90deg, var(--nb-border) 1px, transparent 1px);
+	background-size: 80px 80px;
+	pointer-events: none;
+	z-index: 0;
 	}
 
-	@keyframes bm-shimmer {
-	to { background-position: 200% center; }
+	/* Noise texture */
+	.nb-page::after {
+	content: '';
+	position: fixed;
+	inset: 0;
+	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
+	pointer-events: none;
+	z-index: 0;
 	}
 
-	@keyframes bm-float {
-	0%, 100% { transform: translateY(0) rotate(0deg); }
-	50% { transform: translateY(-20px) rotate(2deg); }
+	/* Neon glow utility */
+	.nb-glow-text {
+	text-shadow: 0 0 20px var(--nb-accent), 0 0 40px rgba(0, 240, 255, 0.3);
+	color: var(--nb-accent);
 	}
 
-	@keyframes bm-pulse {
-	0%, 100% { opacity: 1; transform: scale(1); }
-	50% { opacity: 0.7; transform: scale(1.05); }
+	.nb-glow-primary {
+	text-shadow: 0 0 20px var(--nb-primary), 0 0 40px rgba(255, 45, 85, 0.3);
+	color: var(--nb-primary);
 	}
 
-	.bm-nav {
+	/* Glitch hover effect */
+	@keyframes nb-glitch {
+	0% { transform: translate(0); }
+	20% { transform: translate(-2px, 2px); }
+	40% { transform: translate(-2px, -2px); }
+	60% { transform: translate(2px, 2px); }
+	80% { transform: translate(2px, -2px); }
+	100% { transform: translate(0); }
+	}
+
+	@keyframes nb-scan {
+	0% { top: -100%; }
+	100% { top: 100%; }
+	}
+
+	/* --- Navigation --- */
+	.nb-nav {
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
-	padding: 20px 48px;
+	padding: 16px 48px;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	background: rgba(5, 5, 5, 0.8);
-	backdrop-filter: blur(20px);
-	-webkit-backdrop-filter: blur(20px);
+	background: rgba(10, 10, 10, 0.85);
+	backdrop-filter: blur(16px);
+	-webkit-backdrop-filter: blur(16px);
 	z-index: 100;
-	border-bottom: 1px solid var(--bm-border);
+	border-bottom: 1px solid var(--nb-border-hard);
 	}
 
-	.bm-nav-brand {
+	.nb-nav-brand {
 	font-weight: 800;
-	font-size: 24px;
-	letter-spacing: -0.02em;
+	font-size: 22px;
+	letter-spacing: -0.03em;
 	text-decoration: none;
+	color: var(--nb-text);
+	text-transform: uppercase;
 	}
 
-	.bm-nav-links {
+	.nb-nav-links {
 	display: flex;
 	align-items: center;
-	gap: 36px;
+	gap: 32px;
 	}
 
-	.bm-nav-link {
-	color: var(--bm-muted);
+	.nb-nav-link {
+	color: var(--nb-muted);
 	text-decoration: none;
-	font-size: 15px;
-	font-weight: 500;
-	transition: color 0.2s ease;
+	font-family: 'Space Mono', monospace;
+	font-size: 12px;
+	font-weight: 700;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	transition: all 0.2s ease;
+	position: relative;
 	}
 
-	.bm-nav-link:hover {
-	color: var(--bm-text);
+	.nb-nav-link:hover {
+	color: var(--nb-accent);
 	}
 
-	.bm-nav-repo {
+	.nb-nav-link:hover::after {
+	content: '';
+	position: absolute;
+	bottom: -4px;
+	left: 0;
+	right: 0;
+	height: 2px;
+	background: var(--nb-accent);
+	box-shadow: 0 0 8px var(--nb-accent);
+	}
+
+	.nb-nav-repo {
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
-	color: var(--bm-muted);
+	color: var(--nb-muted);
 	text-decoration: none;
-	font-size: 15px;
-	font-weight: 500;
+	font-family: 'Space Mono', monospace;
+	font-size: 12px;
+	font-weight: 700;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
 	transition: color 0.2s ease;
 	}
 
-	.bm-nav-repo:hover {
-	color: var(--bm-text);
+	.nb-nav-repo:hover {
+	color: var(--nb-accent);
 	}
 
-	.bm-btn-primary {
+	/* Mobile toggle */
+	.nb-mobile-toggle {
+	display: none;
+	background: transparent;
+	border: 2px solid var(--nb-accent);
+	padding: 8px 16px;
+	cursor: pointer;
+	color: var(--nb-accent);
+	font-family: 'Space Mono', monospace;
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	}
+
+	.nb-mobile-menu {
+	display: none;
+	position: fixed;
+	top: 60px;
+	left: 0;
+	right: 0;
+	background: rgba(10, 10, 10, 0.95);
+	backdrop-filter: blur(20px);
+	-webkit-backdrop-filter: blur(20px);
+	border-bottom: 2px solid var(--nb-accent);
+	padding: 24px 48px;
+	z-index: 99;
+	flex-direction: column;
+	gap: 16px;
+	}
+
+	.nb-mobile-menu.open {
+	display: flex;
+	}
+
+	/* --- Buttons --- */
+	.nb-btn-primary {
 	display: inline-flex;
 	align-items: center;
 	gap: 12px;
-	padding: 20px 40px;
-	background: linear-gradient(135deg, var(--bm-primary) 0%, #ee5a5a 100%);
+	padding: 18px 36px;
+	background: var(--nb-primary);
 	color: white;
-	font-weight: 600;
-	font-size: 18px;
-	border-radius: 60px;
+	font-weight: 700;
+	font-size: 15px;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
 	text-decoration: none;
 	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 	border: none;
 	cursor: pointer;
+	position: relative;
+	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
 	}
 
-	.bm-btn-primary:hover {
-	transform: translateY(-4px) scale(1.02);
-	box-shadow: 0 20px 50px rgba(255, 107, 107, 0.4);
+	.nb-btn-primary:hover {
+	transform: translateY(-3px);
+	box-shadow: 0 8px 32px rgba(255, 45, 85, 0.4), 0 0 60px rgba(255, 45, 85, 0.15);
 	}
 
-	.bm-btn-primary.small {
-	padding: 14px 28px;
-	font-size: 15px;
+	.nb-btn-primary.small {
+	padding: 12px 24px;
+	font-size: 12px;
+	clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
 	}
 
-	.bm-btn-secondary {
+	.nb-btn-secondary {
 	display: inline-flex;
 	align-items: center;
 	gap: 12px;
-	padding: 20px 40px;
-	background: rgba(255, 255, 255, 0.05);
+	padding: 18px 36px;
+	background: transparent;
 	color: white;
-	font-weight: 500;
-	font-size: 18px;
-	border-radius: 60px;
+	font-weight: 700;
+	font-size: 15px;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
 	text-decoration: none;
-	border: 1px solid rgba(255, 255, 255, 0.15);
+	border: 2px solid var(--nb-border-hard);
 	transition: all 0.3s ease;
+	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
 	}
 
-	.bm-btn-secondary:hover {
-	background: rgba(255, 255, 255, 0.1);
-	border-color: rgba(255, 255, 255, 0.3);
-	transform: translateY(-4px);
+	.nb-btn-secondary:hover {
+	border-color: var(--nb-accent);
+	color: var(--nb-accent);
+	transform: translateY(-3px);
+	box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
 	}
 
-	.bm-btn-cta {
+	.nb-btn-cta {
 	display: inline-flex;
 	align-items: center;
 	gap: 12px;
-	padding: 22px 44px;
-	background: white;
-	color: #050505;
-	font-weight: 700;
-	font-size: 18px;
-	border-radius: 60px;
+	padding: 20px 44px;
+	background: var(--nb-text);
+	color: var(--nb-bg);
+	font-weight: 800;
+	font-size: 16px;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
 	text-decoration: none;
 	transition: all 0.3s ease;
 	position: relative;
 	z-index: 1;
+	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
 	}
 
-	.bm-btn-cta:hover {
-	transform: translateY(-4px) scale(1.02);
-	box-shadow: 0 20px 50px rgba(255, 255, 255, 0.3);
+	.nb-btn-cta:hover {
+	transform: translateY(-3px) scale(1.02);
+	box-shadow: 0 12px 40px rgba(255, 255, 255, 0.25);
 	}
 
-	.bm-hero {
+	/* --- Hero --- */
+	.nb-hero {
 	position: relative;
+	z-index: 1;
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
@@ -179,496 +291,633 @@
 	text-align: center;
 	}
 
-	.bm-hero-bg {
+	/* Hero accent shapes */
+	.nb-hero-accent {
 	position: absolute;
-	inset: 0;
-	background:
-		radial-gradient(ellipse at 20% 30%, rgba(255, 107, 107, 0.15) 0%, transparent 50%),
-		radial-gradient(ellipse at 80% 70%, rgba(72, 219, 251, 0.15) 0%, transparent 50%),
-		radial-gradient(ellipse at 50% 50%, rgba(255, 159, 243, 0.1) 0%, transparent 60%);
+	z-index: 0;
 	pointer-events: none;
 	}
 
-	.bm-floating-shape {
-	position: absolute;
-	border-radius: 50%;
-	filter: blur(60px);
-	animation: bm-float 8s ease-in-out infinite;
-	}
-
-	.bm-shape-1 {
-	width: 400px;
-	height: 400px;
-	background: rgba(255, 107, 107, 0.3);
-	top: 10%;
+	.nb-hero-accent-1 {
+	top: 15%;
 	left: 5%;
+	width: 200px;
+	height: 200px;
+	border: 2px solid rgba(255, 45, 85, 0.15);
+	transform: rotate(45deg);
 	}
 
-	.bm-shape-2 {
-	width: 300px;
-	height: 300px;
-	background: rgba(72, 219, 251, 0.3);
+	.nb-hero-accent-2 {
 	bottom: 20%;
-	right: 10%;
-	animation-delay: 2s;
+	right: 8%;
+	width: 150px;
+	height: 150px;
+	border: 2px solid rgba(0, 240, 255, 0.12);
+	border-radius: 50%;
 	}
 
-	.bm-hero-content {
+	.nb-hero-accent-3 {
+	top: 30%;
+	right: 15%;
+	font-family: 'Space Mono', monospace;
+	font-size: 120px;
+	font-weight: 700;
+	color: rgba(255, 255, 255, 0.02);
+	line-height: 1;
+	letter-spacing: -0.05em;
+	}
+
+	.nb-hero-content {
 	position: relative;
 	z-index: 1;
 	max-width: 1000px;
 	}
 
-	.bm-hero h1 {
-	font-size: 88px;
-	font-weight: 800;
-	line-height: 1.05;
-	margin-bottom: 32px;
-	letter-spacing: -0.03em;
+	.nb-hero-label {
+	font-family: 'Space Mono', monospace;
+	font-size: 12px;
+	font-weight: 700;
+	letter-spacing: 0.2em;
+	text-transform: uppercase;
+	color: var(--nb-accent);
+	margin-bottom: 28px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 12px;
 	}
 
-	.bm-hero-sub {
-	font-size: 24px;
-	color: var(--bm-muted);
-	line-height: 1.6;
+	.nb-hero-label::before,
+	.nb-hero-label::after {
+	content: '';
+	width: 32px;
+	height: 1px;
+	background: var(--nb-accent);
+	box-shadow: 0 0 6px var(--nb-accent);
+	}
+
+	.nb-hero h1 {
+	font-size: clamp(48px, 8vw, 96px);
+	font-weight: 800;
+	line-height: 1.0;
+	margin-bottom: 28px;
+	letter-spacing: -0.04em;
+	text-transform: uppercase;
+	}
+
+	.nb-hero-sub {
+	font-size: clamp(16px, 2vw, 22px);
+	color: var(--nb-muted);
+	line-height: 1.7;
 	margin-bottom: 48px;
-	max-width: 700px;
+	max-width: 650px;
 	margin-left: auto;
 	margin-right: auto;
+	font-weight: 400;
 	}
 
-	.bm-hero-buttons {
+	.nb-hero-buttons {
 	display: flex;
-	gap: 20px;
+	gap: 16px;
 	justify-content: center;
 	flex-wrap: wrap;
 	}
 
-	.bm-stats {
+	/* --- Stats --- */
+	.nb-stats {
+	position: relative;
+	z-index: 1;
 	padding: 80px 48px;
+	border-top: 1px solid var(--nb-border-hard);
+	border-bottom: 1px solid var(--nb-border-hard);
 	}
 
-	.bm-stats-grid {
+	.nb-stats-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-	gap: 24px;
+	gap: 0;
+	max-width: 1000px;
+	margin: 0 auto;
+	}
+
+	.nb-stat-card {
+	text-align: center;
+	padding: 40px 24px;
+	border-right: 1px solid var(--nb-border-hard);
+	position: relative;
+	}
+
+	.nb-stat-card:last-child {
+	border-right: none;
+	}
+
+	.nb-stat-value {
+	font-size: 56px;
+	font-weight: 800;
+	margin-bottom: 4px;
+	letter-spacing: -0.03em;
+	color: var(--nb-accent);
+	text-shadow: 0 0 30px rgba(0, 240, 255, 0.2);
+	}
+
+	.nb-stat-label {
+	font-family: 'Space Mono', monospace;
+	font-size: 11px;
+	color: var(--nb-subtle);
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+	font-weight: 700;
+	}
+
+	/* --- Trust bar --- */
+	.nb-trust-bar {
+	position: relative;
+	z-index: 1;
+	padding: 48px;
+	}
+
+	.nb-trust-label {
+	text-align: center;
+	font-family: 'Space Mono', monospace;
+	font-size: 11px;
+	color: var(--nb-subtle);
+	margin-bottom: 28px;
+	text-transform: uppercase;
+	letter-spacing: 0.2em;
+	font-weight: 700;
+	}
+
+	.nb-trust-logos {
+	display: flex;
+	justify-content: center;
+	gap: 56px;
+	flex-wrap: wrap;
+	}
+
+	.nb-trust-logo {
+	font-family: 'Syne', sans-serif;
+	font-size: 16px;
+	font-weight: 700;
+	color: var(--nb-subtle);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	transition: all 0.3s ease;
+	}
+
+	.nb-trust-logo:hover {
+	color: var(--nb-accent);
+	text-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
+	}
+
+	/* --- Section header --- */
+	.nb-section-label {
+	font-family: 'Space Mono', monospace;
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.2em;
+	text-transform: uppercase;
+	color: var(--nb-primary);
+	text-shadow: 0 0 12px rgba(255, 45, 85, 0.3);
+	margin-bottom: 16px;
+	}
+
+	.nb-section-header {
+	text-align: center;
+	margin-bottom: 72px;
+	}
+
+	.nb-section-header h2 {
+	font-size: clamp(36px, 5vw, 60px);
+	font-weight: 800;
+	margin-bottom: 16px;
+	letter-spacing: -0.03em;
+	text-transform: uppercase;
+	}
+
+	.nb-section-header p {
+	font-size: 18px;
+	color: var(--nb-muted);
+	font-weight: 400;
+	}
+
+	/* --- Value props --- */
+	.nb-value-props {
+	position: relative;
+	z-index: 1;
+	padding: 120px 48px;
+	}
+
+	.nb-value-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+	gap: 2px;
+	max-width: 1200px;
+	margin: 0 auto;
+	background: var(--nb-border-hard);
+	}
+
+	.nb-value-tile {
+	padding: 44px;
+	background: var(--nb-surface);
+	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+	position: relative;
+	overflow: hidden;
+	}
+
+	.nb-value-tile::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 3px;
+	height: 0;
+	background: var(--nb-accent);
+	box-shadow: 0 0 12px var(--nb-accent);
+	transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+	}
+
+	.nb-value-tile:hover {
+	background: #161616;
+	}
+
+	.nb-value-tile:hover::before {
+	height: 100%;
+	}
+
+	.nb-value-icon {
+	width: 56px;
+	height: 56px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(0, 240, 255, 0.06);
+	border: 1px solid rgba(0, 240, 255, 0.15);
+	color: var(--nb-accent);
+	margin-bottom: 20px;
+	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
+	}
+
+	.nb-value-title {
+	font-size: 24px;
+	font-weight: 700;
+	margin-bottom: 10px;
+	letter-spacing: -0.01em;
+	}
+
+	.nb-value-desc {
+	font-size: 15px;
+	color: var(--nb-muted);
+	line-height: 1.7;
+	}
+
+	/* --- Features --- */
+	.nb-features {
+	position: relative;
+	z-index: 1;
+	padding: 100px 48px;
+	border-top: 1px solid var(--nb-border-hard);
+	}
+
+	.nb-feature-list {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
 	max-width: 900px;
 	margin: 0 auto;
 	}
 
-	.bm-stat-card {
-	text-align: center;
-	padding: 40px;
-	background: rgba(255, 255, 255, 0.02);
-	border-radius: 20px;
-	border: 1px solid var(--bm-border);
-	}
-
-	.bm-stat-value {
-	font-size: 48px;
-	font-weight: 800;
-	margin-bottom: 8px;
-	}
-
-	.bm-stat-label {
-	font-size: 15px;
-	color: rgba(255, 255, 255, 0.5);
-	text-transform: uppercase;
-	letter-spacing: 0.1em;
-	}
-
-	.bm-trust-bar {
-	padding: 60px 48px;
-	}
-
-	.bm-trust-label {
-	text-align: center;
-	font-size: 13px;
-	color: var(--bm-subtle);
-	margin-bottom: 32px;
-	text-transform: uppercase;
-	letter-spacing: 0.15em;
-	}
-
-	.bm-trust-logos {
-	display: flex;
-	justify-content: center;
-	gap: 64px;
-	flex-wrap: wrap;
-	}
-
-	.bm-trust-logo {
-	font-size: 18px;
-	font-weight: 600;
-	color: var(--bm-subtle);
-	transition: color 0.3s ease;
-	}
-
-	.bm-trust-logo:hover {
-	color: var(--bm-muted);
-	}
-
-	.bm-value-props {
-	padding: 120px 48px;
-	}
-
-	.bm-section-header {
-	text-align: center;
-	margin-bottom: 80px;
-	}
-
-	.bm-section-header h2 {
-	font-size: 56px;
-	font-weight: 800;
-	margin-bottom: 20px;
-	letter-spacing: -0.02em;
-	}
-
-	.bm-section-header p {
-	font-size: 20px;
-	color: rgba(255, 255, 255, 0.5);
-	}
-
-	.bm-value-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-	gap: 24px;
-	max-width: 1200px;
-	margin: 0 auto;
-	}
-
-	.bm-value-tile {
-	padding: 48px;
-	background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
-	border: 1px solid var(--bm-border);
-	border-radius: 24px;
-	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-	}
-
-	.bm-value-tile:hover {
-	transform: translateY(-8px) scale(1.02);
-	border-color: rgba(255, 107, 107, 0.3);
-	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
-	}
-
-	.bm-value-icon {
-	width: 64px;
-	height: 64px;
+	.nb-feature-row {
 	display: flex;
 	align-items: center;
-	justify-content: center;
-	background: linear-gradient(135deg, rgba(255, 107, 107, 0.2) 0%, rgba(255, 159, 243, 0.2) 100%);
-	border-radius: 16px;
-	color: var(--bm-primary);
-	margin-bottom: 24px;
-	}
-
-	.bm-value-title {
-	font-size: 28px;
-	font-weight: 700;
-	margin-bottom: 12px;
-	}
-
-	.bm-value-desc {
-	font-size: 17px;
-	color: var(--bm-muted);
-	line-height: 1.7;
-	}
-
-	.bm-features {
-	padding: 100px 48px;
-	}
-
-	.bm-features h2 {
-	font-size: 44px;
-	font-weight: 700;
-	margin-bottom: 48px;
-	text-align: center;
-	letter-spacing: -0.02em;
-	}
-
-	.bm-feature-list {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	max-width: 800px;
-	margin: 0 auto;
-	}
-
-	.bm-feature-pill {
-	display: flex;
-	align-items: center;
-	gap: 16px;
+	gap: 20px;
 	padding: 20px 28px;
-	background: rgba(255, 255, 255, 0.03);
-	border: 1px solid var(--bm-border);
-	border-radius: 100px;
+	background: var(--nb-surface);
 	transition: all 0.3s ease;
+	border-left: 3px solid transparent;
 	}
 
-	.bm-feature-pill:hover {
-	background: rgba(255, 255, 255, 0.06);
-	border-color: rgba(255, 255, 255, 0.15);
-	transform: translateX(8px);
+	.nb-feature-row:hover {
+	background: #161616;
+	border-left-color: var(--nb-neon-yellow);
+	transform: translateX(4px);
 	}
 
-	.bm-feature-icon {
-	width: 44px;
-	height: 44px;
+	.nb-feature-icon {
+	width: 40px;
+	height: 40px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background: rgba(255, 255, 255, 0.05);
-	border-radius: 50%;
-	color: var(--bm-accent);
+	color: var(--nb-neon-yellow);
 	flex-shrink: 0;
 	}
 
-	.bm-feature-title {
-	font-weight: 600;
-	font-size: 18px;
-	margin-bottom: 4px;
+	.nb-feature-title {
+	font-weight: 700;
+	font-size: 16px;
+	letter-spacing: -0.01em;
 	}
 
-	.bm-feature-desc {
-	font-size: 15px;
-	color: rgba(255, 255, 255, 0.5);
+	.nb-feature-desc {
+	font-size: 14px;
+	color: var(--nb-muted);
+	margin-left: auto;
+	max-width: 400px;
+	text-align: right;
 	}
 
-	.bm-pricing {
+	/* --- Pricing --- */
+	.nb-pricing {
+	position: relative;
+	z-index: 1;
 	padding: 120px 48px;
-	border-top: 1px solid var(--bm-border);
+	border-top: 1px solid var(--nb-border-hard);
 	}
 
-	.bm-pricing-grid {
+	.nb-pricing-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-	gap: 24px;
+	gap: 2px;
 	max-width: 1100px;
 	margin: 0 auto;
+	background: var(--nb-border-hard);
 	}
 
-	.bm-pricing-card {
-	padding: 48px;
-	background: rgba(255, 255, 255, 0.02);
-	border: 1px solid var(--bm-border);
-	border-radius: 24px;
+	.nb-pricing-card {
+	padding: 44px;
+	background: var(--nb-surface);
 	position: relative;
-	transition: all 0.4s ease;
-	}
-
-	.bm-pricing-card:hover {
-	transform: translateY(-8px);
-	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
-	}
-
-	.bm-pricing-card.featured {
-	border-color: var(--bm-primary);
-	background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(72, 219, 251, 0.05) 100%);
-	}
-
-	.bm-pricing-badge {
-	position: absolute;
-	top: -12px;
-	left: 50%;
-	transform: translateX(-50%);
-	background: linear-gradient(135deg, var(--bm-primary) 0%, #ff9ff3 100%);
-	color: white;
-	font-size: 12px;
-	font-weight: 600;
-	padding: 6px 16px;
-	border-radius: 20px;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	}
-
-	.bm-pricing-name {
-	font-size: 24px;
-	font-weight: 700;
-	margin-bottom: 8px;
-	}
-
-	.bm-pricing-price {
-	font-size: 48px;
-	font-weight: 800;
-	margin-bottom: 4px;
-	}
-
-	.bm-pricing-period {
-	font-size: 15px;
-	color: rgba(255, 255, 255, 0.5);
-	margin-bottom: 32px;
-	}
-
-	.bm-pricing-features {
-	list-style: none;
-	padding: 0;
-	margin: 0 0 32px;
-	}
-
-	.bm-pricing-features li {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-	padding: 12px 0;
-	font-size: 15px;
-	color: var(--bm-muted);
-	border-bottom: 1px solid var(--bm-border);
-	}
-
-	.bm-pricing-features li:last-child {
-	border-bottom: none;
-	}
-
-	.bm-pricing-features li::before {
-	content: "✓";
-	color: var(--bm-accent);
-	font-weight: 600;
-	}
-
-	.bm-pricing-cta {
-	display: block;
-	width: 100%;
-	padding: 16px 32px;
-	text-align: center;
-	background: rgba(255, 255, 255, 0.05);
-	border: 1px solid var(--bm-border);
-	border-radius: 60px;
-	font-weight: 600;
-	font-size: 16px;
-	color: white;
-	text-decoration: none;
 	transition: all 0.3s ease;
 	}
 
-	.bm-pricing-cta:hover {
-	background: rgba(255, 255, 255, 0.1);
-	border-color: rgba(255, 255, 255, 0.3);
+	.nb-pricing-card:hover {
+	background: #161616;
 	}
 
-	.bm-pricing-card.featured .bm-pricing-cta {
-	background: linear-gradient(135deg, var(--bm-primary) 0%, #ee5a5a 100%);
-	border-color: transparent;
+	.nb-pricing-card.featured {
+	background: #161616;
 	}
 
-	.bm-pricing-card.featured .bm-pricing-cta:hover {
-	transform: scale(1.02);
-	box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
+	.nb-pricing-card.featured::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 3px;
+	background: linear-gradient(90deg, var(--nb-primary) 0%, var(--nb-accent) 100%);
+	box-shadow: 0 0 20px rgba(255, 45, 85, 0.3);
 	}
 
-	.bm-testimonial-section {
+	.nb-pricing-badge {
+	display: inline-block;
+	font-family: 'Space Mono', monospace;
+	font-size: 10px;
+	font-weight: 700;
+	letter-spacing: 0.15em;
+	text-transform: uppercase;
+	color: var(--nb-bg);
+	background: var(--nb-neon-yellow);
+	padding: 4px 12px;
+	margin-bottom: 16px;
+	}
+
+	.nb-pricing-name {
+	font-family: 'Space Mono', monospace;
+	font-size: 14px;
+	font-weight: 700;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--nb-muted);
+	margin-bottom: 12px;
+	}
+
+	.nb-pricing-price {
+	font-size: 52px;
+	font-weight: 800;
+	margin-bottom: 4px;
+	letter-spacing: -0.03em;
+	}
+
+	.nb-pricing-card.featured .nb-pricing-price {
+	color: var(--nb-accent);
+	text-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
+	}
+
+	.nb-pricing-period {
+	font-family: 'Space Mono', monospace;
+	font-size: 12px;
+	color: var(--nb-subtle);
+	margin-bottom: 28px;
+	letter-spacing: 0.05em;
+	}
+
+	.nb-pricing-features {
+	list-style: none;
+	padding: 0;
+	margin: 0 0 28px;
+	}
+
+	.nb-pricing-features li {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 10px 0;
+	font-size: 14px;
+	color: var(--nb-muted);
+	border-bottom: 1px solid var(--nb-border);
+	}
+
+	.nb-pricing-features li:last-child {
+	border-bottom: none;
+	}
+
+	.nb-pricing-features li::before {
+	content: "//";
+	font-family: 'Space Mono', monospace;
+	color: var(--nb-accent);
+	font-weight: 700;
+	font-size: 12px;
+	}
+
+	.nb-pricing-cta {
+	display: block;
+	width: 100%;
+	padding: 14px 28px;
+	text-align: center;
+	background: transparent;
+	border: 2px solid var(--nb-border-hard);
+	font-family: 'Syne', sans-serif;
+	font-weight: 700;
+	font-size: 14px;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: white;
+	text-decoration: none;
+	transition: all 0.3s ease;
+	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
+	}
+
+	.nb-pricing-cta:hover {
+	border-color: var(--nb-accent);
+	color: var(--nb-accent);
+	box-shadow: 0 0 16px rgba(0, 240, 255, 0.15);
+	}
+
+	.nb-pricing-card.featured .nb-pricing-cta {
+	background: var(--nb-primary);
+	border-color: var(--nb-primary);
+	}
+
+	.nb-pricing-card.featured .nb-pricing-cta:hover {
+	box-shadow: 0 0 24px rgba(255, 45, 85, 0.4);
+	transform: translateY(-2px);
+	}
+
+	/* --- Testimonial --- */
+	.nb-testimonial-section {
+	position: relative;
+	z-index: 1;
 	padding: 100px 48px;
 	}
 
-	.bm-testimonial-block {
+	.nb-testimonial-block {
 	position: relative;
-	padding: 80px;
-	background: linear-gradient(135deg, rgba(255, 107, 107, 0.05) 0%, rgba(72, 219, 251, 0.05) 100%);
-	border-radius: 40px;
-	border: 1px solid var(--bm-border);
+	padding: 72px;
+	background: var(--nb-surface);
+	border: 1px solid var(--nb-border-hard);
 	max-width: 1000px;
 	margin: 0 auto;
 	}
 
-	.bm-quote-mark {
+	.nb-testimonial-block::before {
+	content: '';
+	position: absolute;
+	top: -1px;
+	left: 0;
+	right: 0;
+	height: 3px;
+	background: linear-gradient(90deg, var(--nb-primary), var(--nb-neon-yellow), var(--nb-accent));
+	}
+
+	.nb-quote-mark {
+	font-family: 'Syne', sans-serif;
+	font-size: 160px;
+	font-weight: 800;
+	line-height: 0.7;
+	color: rgba(0, 240, 255, 0.06);
 	position: absolute;
 	top: 40px;
-	left: 60px;
-	font-size: 200px;
-	font-weight: 800;
-	line-height: 1;
-	background: linear-gradient(135deg, rgba(255, 107, 107, 0.2) 0%, rgba(255, 159, 243, 0.2) 100%);
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-	background-clip: text;
+	left: 48px;
 	}
 
-	.bm-testimonial-quote {
-	font-size: 36px;
+	.nb-testimonial-quote {
+	font-size: clamp(22px, 3vw, 34px);
 	font-weight: 500;
-	line-height: 1.5;
-	margin-bottom: 40px;
+	line-height: 1.4;
+	margin-bottom: 36px;
 	position: relative;
 	z-index: 1;
+	letter-spacing: -0.01em;
 	}
 
-	.bm-testimonial-author {
+	.nb-testimonial-author {
 	display: flex;
 	align-items: center;
-	gap: 20px;
+	gap: 16px;
 	position: relative;
 	z-index: 1;
 	}
 
-	.bm-testimonial-avatar {
-	width: 64px;
-	height: 64px;
-	background: linear-gradient(135deg, var(--bm-primary) 0%, var(--bm-accent) 100%);
-	border-radius: 50%;
+	.nb-testimonial-avatar {
+	width: 56px;
+	height: 56px;
+	background: linear-gradient(135deg, var(--nb-primary) 0%, var(--nb-accent) 100%);
+	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
 	overflow: hidden;
 	}
 
-	.bm-testimonial-avatar img {
+	.nb-testimonial-avatar img {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 	}
 
-	.bm-testimonial-name {
-	font-weight: 600;
-	font-size: 18px;
+	.nb-testimonial-name {
+	font-weight: 700;
+	font-size: 16px;
+	letter-spacing: -0.01em;
 	}
 
-	.bm-testimonial-role {
-	color: rgba(255, 255, 255, 0.5);
+	.nb-testimonial-role {
+	font-family: 'Space Mono', monospace;
+	font-size: 12px;
+	color: var(--nb-subtle);
+	letter-spacing: 0.04em;
 	}
 
-	.bm-cta-section {
+	/* --- CTA --- */
+	.nb-cta-section {
+	position: relative;
+	z-index: 1;
 	padding: 100px 48px;
 	}
 
-	.bm-cta-banner {
+	.nb-cta-banner {
 	position: relative;
-	padding: 120px 80px;
-	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 30%, #ff9ff3 70%, #48dbfb 100%);
-	border-radius: 48px;
+	padding: 100px 80px;
 	text-align: center;
 	overflow: hidden;
 	max-width: 1100px;
 	margin: 0 auto;
+	background: var(--nb-surface);
+	border: 1px solid var(--nb-border-hard);
 	}
 
-	.bm-cta-banner::before {
+	.nb-cta-banner::before {
 	content: '';
 	position: absolute;
-	top: -50%;
-	left: -50%;
-	width: 200%;
-	height: 200%;
-	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
-	animation: bm-pulse 4s ease-in-out infinite;
+	inset: 0;
+	background:
+		radial-gradient(ellipse at 30% 50%, rgba(255, 45, 85, 0.08) 0%, transparent 50%),
+		radial-gradient(ellipse at 70% 50%, rgba(0, 240, 255, 0.08) 0%, transparent 50%);
+	pointer-events: none;
 	}
 
-	.bm-cta-banner h2 {
-	font-size: 64px;
+	.nb-cta-banner::after {
+	content: '';
+	position: absolute;
+	top: -1px;
+	left: 0;
+	right: 0;
+	height: 3px;
+	background: linear-gradient(90deg, var(--nb-primary), var(--nb-neon-yellow), var(--nb-accent));
+	}
+
+	.nb-cta-banner h2 {
+	font-size: clamp(32px, 5vw, 64px);
 	font-weight: 800;
-	margin-bottom: 20px;
+	margin-bottom: 16px;
 	position: relative;
 	z-index: 1;
-	letter-spacing: -0.02em;
+	letter-spacing: -0.03em;
+	text-transform: uppercase;
 	}
 
-	.bm-cta-banner p {
-	font-size: 22px;
-	opacity: 0.9;
-	margin-bottom: 40px;
+	.nb-cta-banner p {
+	font-size: 20px;
+	color: var(--nb-muted);
+	margin-bottom: 36px;
 	position: relative;
 	z-index: 1;
 	}
 
-	.bm-footer {
-	padding: 48px;
-	border-top: 1px solid var(--bm-border);
+	/* --- Footer --- */
+	.nb-footer {
+	position: relative;
+	z-index: 1;
+	padding: 40px 48px;
+	border-top: 1px solid var(--nb-border-hard);
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -676,137 +925,173 @@
 	gap: 24px;
 	}
 
-	.bm-footer-brand {
+	.nb-footer-brand {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: 12px;
 	}
 
-	.bm-footer-name {
-	font-weight: 700;
-	font-size: 18px;
+	.nb-footer-name {
+	font-weight: 800;
+	font-size: 16px;
+	text-transform: uppercase;
+	letter-spacing: -0.01em;
 	}
 
-	.bm-footer-copyright {
-	color: var(--bm-subtle);
-	font-size: 14px;
-	margin-left: 12px;
+	.nb-footer-copyright {
+	font-family: 'Space Mono', monospace;
+	color: var(--nb-subtle);
+	font-size: 11px;
+	letter-spacing: 0.04em;
 	}
 
-	.bm-footer-links {
+	.nb-footer-links {
 	display: flex;
-	gap: 32px;
+	gap: 28px;
 	flex-wrap: wrap;
 	}
 
-	.bm-footer-link {
-	color: rgba(255, 255, 255, 0.4);
+	.nb-footer-link {
+	color: var(--nb-subtle);
 	text-decoration: none;
-	font-size: 14px;
-	transition: color 0.2s ease;
+	font-family: 'Space Mono', monospace;
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	transition: all 0.2s ease;
 	}
 
-	.bm-footer-link:hover {
-	color: white;
+	.nb-footer-link:hover {
+	color: var(--nb-accent);
 	}
 
-	.bm-footer-social {
+	.nb-footer-social {
 	display: flex;
 	gap: 16px;
 	}
 
-	.bm-footer-social a {
-	color: #666;
-	transition: color 0.2s ease;
+	.nb-footer-social a {
+	color: var(--nb-subtle);
+	transition: all 0.2s ease;
 	}
 
-	.bm-footer-social a:hover {
-	color: white;
+	.nb-footer-social a:hover {
+	color: var(--nb-accent);
+	filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.4));
 	}
 
+	/* --- Responsive --- */
 	@media (max-width: 1024px) {
-	.bm-hero h1 { font-size: 64px; }
-	.bm-section-header h2 { font-size: 44px; }
-	.bm-cta-banner h2 { font-size: 48px; }
-	.bm-testimonial-quote { font-size: 28px; }
-	.bm-testimonial-block { padding: 60px; }
+	.nb-hero h1 { font-size: 64px; }
+	.nb-section-header h2 { font-size: 44px; }
+	.nb-cta-banner h2 { font-size: 44px; }
+	.nb-testimonial-quote { font-size: 26px; }
+	.nb-testimonial-block { padding: 56px; }
+	.nb-feature-desc { display: none; }
+	.nb-hero-accent { display: none; }
 	}
 
 	@media (max-width: 768px) {
-	.bm-nav { padding: 16px 24px; }
-	.bm-nav-links { display: none; }
-	.bm-hero { padding: 120px 24px 80px; }
-	.bm-hero h1 { font-size: 44px; }
-	.bm-hero-sub { font-size: 18px; }
-	.bm-hero-buttons { flex-direction: column; align-items: center; }
-	.bm-btn-primary, .bm-btn-secondary { padding: 16px 32px; font-size: 16px; width: 100%; justify-content: center; }
-	.bm-stats, .bm-value-props, .bm-features, .bm-pricing, .bm-testimonial-section, .bm-cta-section { padding: 60px 24px; }
-	.bm-stat-value { font-size: 36px; }
-	.bm-trust-logos { gap: 32px; }
-	.bm-section-header h2 { font-size: 36px; }
-	.bm-value-tile { padding: 32px; }
-	.bm-value-title { font-size: 24px; }
-	.bm-features h2 { font-size: 32px; }
-	.bm-feature-pill { border-radius: 20px; }
-	.bm-pricing-card { padding: 32px; }
-	.bm-pricing-price { font-size: 36px; }
-	.bm-testimonial-block { padding: 40px 24px; }
-	.bm-quote-mark { font-size: 100px; top: 20px; left: 20px; }
-	.bm-testimonial-quote { font-size: 22px; }
-	.bm-cta-banner { padding: 60px 24px; border-radius: 24px; }
-	.bm-cta-banner h2 { font-size: 32px; }
-	.bm-cta-banner p { font-size: 18px; }
-	.bm-footer { flex-direction: column; text-align: center; }
+	.nb-nav { padding: 14px 24px; }
+	.nb-nav-links { display: none; }
+	.nb-mobile-toggle { display: block; }
+	.nb-mobile-menu { padding: 24px; }
+	.nb-hero { padding: 120px 24px 80px; }
+	.nb-hero h1 { font-size: 40px; }
+	.nb-hero-sub { font-size: 16px; }
+	.nb-hero-buttons { flex-direction: column; align-items: center; }
+	.nb-btn-primary, .nb-btn-secondary { width: 100%; justify-content: center; padding: 16px 28px; }
+	.nb-stats { padding: 48px 24px; }
+	.nb-stats-grid { grid-template-columns: 1fr 1fr; }
+	.nb-stat-card { border-right: none; border-bottom: 1px solid var(--nb-border-hard); padding: 28px 16px; }
+	.nb-stat-value { font-size: 40px; }
+	.nb-trust-logos { gap: 28px; }
+	.nb-value-props { padding: 80px 24px; }
+	.nb-value-grid { grid-template-columns: 1fr; }
+	.nb-value-tile { padding: 32px; }
+	.nb-features { padding: 64px 24px; }
+	.nb-feature-row { padding: 16px 20px; }
+	.nb-pricing { padding: 80px 24px; }
+	.nb-pricing-grid { grid-template-columns: 1fr; }
+	.nb-pricing-card { padding: 32px; }
+	.nb-pricing-price { font-size: 40px; }
+	.nb-testimonial-section { padding: 64px 24px; }
+	.nb-testimonial-block { padding: 36px 24px; }
+	.nb-quote-mark { font-size: 80px; top: 16px; left: 16px; }
+	.nb-testimonial-quote { font-size: 20px; }
+	.nb-cta-section { padding: 64px 24px; }
+	.nb-cta-banner { padding: 56px 24px; }
+	.nb-cta-banner h2 { font-size: 32px; }
+	.nb-cta-banner p { font-size: 16px; }
+	.nb-footer { flex-direction: column; text-align: center; padding: 32px 24px; }
+	.nb-section-header h2 { font-size: 32px; }
 	}
 </style>
 
-<div class="bm-page">
+<div class="nb-page">
 	<!-- Navigation -->
-	<nav class="bm-nav">
-	<a href="/" class="bm-nav-brand bm-gradient-text">{{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}</a>
-	<div class="bm-nav-links">
+	<nav class="nb-nav">
+	<a href="/" class="nb-nav-brand">{{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}</a>
+	<div class="nb-nav-links">
 		{{if .Config.Footer.Links}}
 		{{range .Config.Footer.Links}}
-			<a href="{{.URL}}" class="bm-nav-link">{{.Label}}</a>
+			<a href="{{.URL}}" class="nb-nav-link">{{.Label}}</a>
 		{{end}}
 		{{end}}
-		{{if .Config.ValueProps}}<a href="#value-props" class="bm-nav-link">Why</a>{{end}}
-		{{if .Config.Features}}<a href="#features" class="bm-nav-link">Features</a>{{end}}
-		{{if .Config.Pricing.Plans}}<a href="#pricing" class="bm-nav-link">Pricing</a>{{end}}
-		<a href="{{.Repository.Link}}" class="bm-nav-repo">
-		<img src="/assets/img/gitcaddy-icon.svg" width="18" height="18" alt="GitCaddy">
-		Repository
+		{{if .Config.ValueProps}}<a href="#value-props" class="nb-nav-link">Why</a>{{end}}
+		{{if .Config.Features}}<a href="#features" class="nb-nav-link">Features</a>{{end}}
+		{{if .Config.Pricing.Plans}}<a href="#pricing" class="nb-nav-link">Pricing</a>{{end}}
+		<a href="{{.Repository.Link}}" class="nb-nav-repo">
+		<img src="/assets/img/gitcaddy-icon.svg" width="16" height="16" alt="GitCaddy">
+		Repo
 		</a>
 		{{if .Config.Hero.PrimaryCTA.Label}}
-		<a href="{{.Config.Hero.PrimaryCTA.URL}}" class="bm-btn-primary small">
-			<span>{{.Config.Hero.PrimaryCTA.Label}}</span>
+		<a href="{{.Config.Hero.PrimaryCTA.URL}}" class="nb-btn-primary small">
+			{{.Config.Hero.PrimaryCTA.Label}}
 		</a>
 		{{end}}
 	</div>
+	<button class="nb-mobile-toggle" onclick="document.getElementById('nb-mobile-nav').classList.toggle('open')">Menu</button>
 	</nav>
+	<div class="nb-mobile-menu" id="nb-mobile-nav">
+		{{if .Config.Footer.Links}}
+		{{range .Config.Footer.Links}}
+			<a href="{{.URL}}" class="nb-nav-link">{{.Label}}</a>
+		{{end}}
+		{{end}}
+		{{if .Config.ValueProps}}<a href="#value-props" class="nb-nav-link">Why</a>{{end}}
+		{{if .Config.Features}}<a href="#features" class="nb-nav-link">Features</a>{{end}}
+		{{if .Config.Pricing.Plans}}<a href="#pricing" class="nb-nav-link">Pricing</a>{{end}}
+		<a href="{{.Repository.Link}}" class="nb-nav-repo">
+		<img src="/assets/img/gitcaddy-icon.svg" width="16" height="16" alt="GitCaddy">
+		Repository
+		</a>
+	</div>
 
 	<!-- Hero Section -->
-	<section class="bm-hero">
-	<div class="bm-hero-bg"></div>
-	<div class="bm-floating-shape bm-shape-1"></div>
-	<div class="bm-floating-shape bm-shape-2"></div>
+	<section class="nb-hero">
+	<div class="nb-hero-accent nb-hero-accent-1"></div>
+	<div class="nb-hero-accent nb-hero-accent-2"></div>
+	<div class="nb-hero-accent nb-hero-accent-3">*</div>
 
-	<div class="bm-hero-content">
-		<h1>
-		<span class="bm-gradient-text">{{if .Config.Hero.Headline}}{{.Config.Hero.Headline}}{{else}}{{.Repository.Name}}{{end}}</span>
+	<div class="nb-hero-content">
+		<div class="nb-hero-label nb-reveal">{{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}Open Source{{end}}</div>
+		<h1 class="nb-reveal nb-reveal-delay-1">
+		{{if .Config.Hero.Headline}}<span class="nb-glow-text">{{.Config.Hero.Headline}}</span>{{else}}<span class="nb-glow-text">{{.Repository.Name}}</span>{{end}}
 		</h1>
-		<p class="bm-hero-sub">{{if .Config.Hero.Subheadline}}{{.Config.Hero.Subheadline}}{{else}}{{.Repository.Description}}{{end}}</p>
-		<div class="bm-hero-buttons">
+		<p class="nb-hero-sub nb-reveal nb-reveal-delay-2">{{if .Config.Hero.Subheadline}}{{.Config.Hero.Subheadline}}{{else}}{{.Repository.Description}}{{end}}</p>
+		<div class="nb-hero-buttons nb-reveal nb-reveal-delay-3">
 		{{if .Config.Hero.PrimaryCTA.Label}}
-			<a href="{{.Config.Hero.PrimaryCTA.URL}}" class="bm-btn-primary">
-			<span>{{.Config.Hero.PrimaryCTA.Label}}</span>
-			{{svg "octicon-arrow-right" 20}}
+			<a href="{{.Config.Hero.PrimaryCTA.URL}}" class="nb-btn-primary">
+			{{.Config.Hero.PrimaryCTA.Label}}
+			{{svg "octicon-arrow-right" 18}}
 			</a>
 		{{end}}
 		{{if .Config.Hero.SecondaryCTA.Label}}
-			<a href="{{.Config.Hero.SecondaryCTA.URL}}" class="bm-btn-secondary">
-			{{svg "octicon-play" 20}}
-			<span>{{.Config.Hero.SecondaryCTA.Label}}</span>
+			<a href="{{.Config.Hero.SecondaryCTA.URL}}" class="nb-btn-secondary">
+			{{svg "octicon-play" 18}}
+			{{.Config.Hero.SecondaryCTA.Label}}
 			</a>
 		{{end}}
 		</div>
@@ -815,12 +1100,12 @@
 
 	{{if .Config.Stats}}
 	<!-- Stats Section -->
-	<section class="bm-stats">
-	<div class="bm-stats-grid">
+	<section class="nb-stats">
+	<div class="nb-stats-grid">
 		{{range .Config.Stats}}
-		<div class="bm-stat-card">
-			<div class="bm-stat-value bm-gradient-text">{{.Value}}</div>
-			<div class="bm-stat-label">{{.Label}}</div>
+		<div class="nb-stat-card nb-reveal">
+			<div class="nb-stat-value">{{.Value}}</div>
+			<div class="nb-stat-label">{{.Label}}</div>
 		</div>
 		{{end}}
 	</div>
@@ -829,11 +1114,11 @@
 
 	{{if .Config.SocialProof.Logos}}
 	<!-- Trust Bar -->
-	<section class="bm-trust-bar">
-	<p class="bm-trust-label">Trusted by the world's best teams</p>
-	<div class="bm-trust-logos">
+	<section class="nb-trust-bar">
+	<p class="nb-trust-label nb-reveal">Trusted by the best</p>
+	<div class="nb-trust-logos nb-reveal nb-reveal-delay-1">
 		{{range .Config.SocialProof.Logos}}
-		<span class="bm-trust-logo">{{.}}</span>
+		<span class="nb-trust-logo">{{.}}</span>
 		{{end}}
 	</div>
 	</section>
@@ -841,19 +1126,20 @@
 
 	{{if .Config.ValueProps}}
 	<!-- Value Props Section -->
-	<section class="bm-value-props" id="value-props">
-	<div class="bm-section-header">
-		<h2><span class="bm-gradient-text">Unlock your potential</span></h2>
+	<section class="nb-value-props" id="value-props">
+	<div class="nb-section-header nb-reveal">
+		<div class="nb-section-label">Why choose this</div>
+		<h2>Unlock your <span class="nb-glow-primary">potential</span></h2>
 		<p>Everything you need to create without limits</p>
 	</div>
-	<div class="bm-value-grid">
+	<div class="nb-value-grid">
 		{{range .Config.ValueProps}}
-		<div class="bm-value-tile">
-			<div class="bm-value-icon">
-			{{svg (printf "octicon-%s" (or .Icon "zap")) 32}}
+		<div class="nb-value-tile nb-reveal">
+			<div class="nb-value-icon">
+			{{svg (printf "octicon-%s" (or .Icon "zap")) 28}}
 			</div>
-			<h3 class="bm-value-title">{{.Title}}</h3>
-			<p class="bm-value-desc">{{.Description}}</p>
+			<h3 class="nb-value-title">{{.Title}}</h3>
+			<p class="nb-value-desc">{{.Description}}</p>
 		</div>
 		{{end}}
 	</div>
@@ -862,18 +1148,19 @@
 
 	{{if .Config.Features}}
 	<!-- Features Section -->
-	<section class="bm-features" id="features">
-	<h2>Packed with power</h2>
-	<div class="bm-feature-list">
+	<section class="nb-features" id="features">
+	<div class="nb-section-header nb-reveal">
+		<div class="nb-section-label">Capabilities</div>
+		<h2>Packed with <span class="nb-glow-text">power</span></h2>
+	</div>
+	<div class="nb-feature-list">
 		{{range .Config.Features}}
-		<div class="bm-feature-pill">
-			<div class="bm-feature-icon">
+		<div class="nb-feature-row nb-reveal">
+			<div class="nb-feature-icon">
 			{{svg (printf "octicon-%s" (or .Icon "zap")) 22}}
 			</div>
-			<div>
-			<div class="bm-feature-title">{{.Title}}</div>
-			<div class="bm-feature-desc">{{.Description}}</div>
-			</div>
+			<div class="nb-feature-title">{{.Title}}</div>
+			<div class="nb-feature-desc">{{.Description}}</div>
 		</div>
 		{{end}}
 	</div>
@@ -882,26 +1169,27 @@
 
 	{{if .Config.Pricing.Plans}}
 	<!-- Pricing Section -->
-	<section class="bm-pricing" id="pricing">
-	<div class="bm-section-header">
-		<h2><span class="bm-gradient-text">{{if .Config.Pricing.Headline}}{{.Config.Pricing.Headline}}{{else}}Simple Pricing{{end}}</span></h2>
+	<section class="nb-pricing" id="pricing">
+	<div class="nb-section-header nb-reveal">
+		<div class="nb-section-label">Investment</div>
+		<h2>{{if .Config.Pricing.Headline}}{{.Config.Pricing.Headline}}{{else}}Simple <span class="nb-glow-text">Pricing</span>{{end}}</h2>
 		<p>Choose the plan that works for you</p>
 	</div>
-	<div class="bm-pricing-grid">
+	<div class="nb-pricing-grid">
 		{{range .Config.Pricing.Plans}}
-		<div class="bm-pricing-card{{if .Featured}} featured{{end}}">
-			{{if .Featured}}<span class="bm-pricing-badge">Popular</span>{{end}}
-			<div class="bm-pricing-name">{{.Name}}</div>
-			<div class="bm-pricing-price bm-gradient-text">{{.Price}}</div>
-			<div class="bm-pricing-period">{{.Period}}</div>
+		<div class="nb-pricing-card{{if .Featured}} featured{{end}} nb-reveal">
+			{{if .Featured}}<span class="nb-pricing-badge">Popular</span>{{end}}
+			<div class="nb-pricing-name">{{.Name}}</div>
+			<div class="nb-pricing-price">{{.Price}}</div>
+			<div class="nb-pricing-period">{{.Period}}</div>
 			{{if .Features}}
-			<ul class="bm-pricing-features">
+			<ul class="nb-pricing-features">
 			{{range .Features}}
 				<li>{{.}}</li>
 			{{end}}
 			</ul>
 			{{end}}
-			<a href="#" class="bm-pricing-cta">{{if .CTA}}{{.CTA}}{{else}}Get Started{{end}}</a>
+			<a href="#" class="nb-pricing-cta">{{if .CTA}}{{.CTA}}{{else}}Get Started{{end}}</a>
 		</div>
 		{{end}}
 	</div>
@@ -910,20 +1198,20 @@
 
 	<!-- Testimonials Section -->
 	{{if .Config.SocialProof.Testimonials}}
-	<section class="bm-testimonial-section">
-	<div class="bm-testimonial-block">
-		<span class="bm-quote-mark">"</span>
-		<div class="bm-testimonials-container">
+	<section class="nb-testimonial-section">
+	<div class="nb-testimonial-block nb-reveal">
+		<span class="nb-quote-mark">&ldquo;</span>
+		<div class="nb-testimonials-container">
 		{{range .Config.SocialProof.Testimonials}}
-		<div class="bm-testimonial-item" style="display: none;">
-			<blockquote class="bm-testimonial-quote">{{.Quote}}</blockquote>
-			<div class="bm-testimonial-author">
-			<div class="bm-testimonial-avatar">
+		<div class="nb-testimonial-item" style="display: none;">
+			<blockquote class="nb-testimonial-quote">{{.Quote}}</blockquote>
+			<div class="nb-testimonial-author">
+			<div class="nb-testimonial-avatar">
 				{{if .Avatar}}<img src="{{.Avatar}}" alt="{{.Author}}">{{end}}
 			</div>
 			<div>
-				<div class="bm-testimonial-name">{{.Author}}</div>
-				<div class="bm-testimonial-role">{{.Role}}</div>
+				<div class="nb-testimonial-name">{{.Author}}</div>
+				<div class="nb-testimonial-role">{{.Role}}</div>
 			</div>
 			</div>
 		</div>
@@ -933,7 +1221,7 @@
 	</section>
 	<script>
 	(function() {
-		var items = document.querySelectorAll(".bm-testimonial-item");
+		var items = document.querySelectorAll(".nb-testimonial-item");
 		if (items.length > 0) {
 		var idx = Math.floor(Math.random() * items.length);
 		items[idx].style.display = "block";
@@ -944,14 +1232,14 @@
 
 	{{if .Config.CTASection.Headline}}
 	<!-- CTA Banner -->
-	<section class="bm-cta-section">
-	<div class="bm-cta-banner">
+	<section class="nb-cta-section">
+	<div class="nb-cta-banner nb-reveal">
 		<h2>{{.Config.CTASection.Headline}}</h2>
 		{{if .Config.CTASection.Subheadline}}
 		<p>{{.Config.CTASection.Subheadline}}</p>
 		{{end}}
 		{{if .Config.CTASection.Button.Label}}
-		<a href="{{.Config.CTASection.Button.URL}}" class="bm-btn-cta">
+		<a href="{{.Config.CTASection.Button.URL}}" class="nb-btn-cta">
 			{{.Config.CTASection.Button.Label}}
 			{{svg "octicon-arrow-right" 20}}
 		</a>
@@ -961,17 +1249,17 @@
 	{{end}}
 
 	<!-- Footer -->
-	<footer class="bm-footer">
-	<div class="bm-footer-brand">
+	<footer class="nb-footer">
+	<div class="nb-footer-brand">
 		{{if .Config.Footer.Copyright}}
-		<span class="bm-footer-copyright">{{.Config.Footer.Copyright}}</span>
+		<span class="nb-footer-copyright">{{.Config.Footer.Copyright}}</span>
 		{{else}}
-		<span class="bm-footer-name bm-gradient-text">{{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}</span>
-		<span class="bm-footer-copyright">&copy; <script>document.write(new Date().getFullYear())</script></span>
+		<span class="nb-footer-name">{{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}</span>
+		<span class="nb-footer-copyright">&copy; <script>document.write(new Date().getFullYear())</script></span>
 		{{end}}
 	</div>
 	{{if .Config.Footer.Social}}
-	<div class="bm-footer-social">
+	<div class="nb-footer-social">
 		{{range .Config.Footer.Social}}
 		<a href="{{.URL}}" title="{{.Platform}}">
 			{{if eq .Platform "twitter"}}{{svg "octicon-mention" 18}}
@@ -984,17 +1272,36 @@
 		{{end}}
 	</div>
 	{{end}}
-	<div class="bm-footer-links">
+	<div class="nb-footer-links">
 		{{if .Config.Footer.Links}}
 		{{range .Config.Footer.Links}}
-			<a href="{{.URL}}" class="bm-footer-link">{{.Label}}</a>
+			<a href="{{.URL}}" class="nb-footer-link">{{.Label}}</a>
 		{{end}}
 		{{else}}
-		<a href="{{.Repository.Link}}" class="bm-footer-link">Repository</a>
-		<a href="{{.Repository.Link}}/releases" class="bm-footer-link">Releases</a>
+		<a href="{{.Repository.Link}}" class="nb-footer-link">Repository</a>
+		<a href="{{.Repository.Link}}/releases" class="nb-footer-link">Releases</a>
 		{{end}}
 	</div>
 	</footer>
 </div>
 
+<script>
+/* Scroll reveal */
+(function() {
+	var reveals = document.querySelectorAll('.nb-reveal');
+	if (!reveals.length) return;
+
+	var observer = new IntersectionObserver(function(entries) {
+	entries.forEach(function(entry) {
+		if (entry.isIntersecting) {
+		entry.target.classList.add('visible');
+		observer.unobserve(entry.target);
+		}
+	});
+	}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
+
+	reveals.forEach(function(el) { observer.observe(el); });
+})();
+</script>
+
 {{template "pages/base_footer" .}}
diff --git a/templates/pages/minimalist-docs.tmpl b/templates/pages/minimalist-docs.tmpl
index 055174174c..af183f4e92 100644
--- a/templates/pages/minimalist-docs.tmpl
+++ b/templates/pages/minimalist-docs.tmpl
@@ -1,161 +1,279 @@
 {{template "pages/base_head" .}}
 <style>
-	@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap');
+	@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&display=swap');
 
 	:root {
-	--md-bg: #fcfcfc;
-	--md-text: #171717;
-	--md-muted: #525252;
-	--md-light: #737373;
-	--md-border: #e5e5e5;
-	--md-accent: {{if .Config.Theme.PrimaryColor}}{{.Config.Theme.PrimaryColor}}{{else}}#171717{{end}};
+	--ea-bg: #faf8f5;
+	--ea-surface: #f3efe9;
+	--ea-text: #1c1917;
+	--ea-muted: #57534e;
+	--ea-light: #a8a29e;
+	--ea-border: #e7e5e4;
+	--ea-accent: {{if .Config.Theme.PrimaryColor}}{{.Config.Theme.PrimaryColor}}{{else}}#b45309{{end}};
+	--ea-ink: #292524;
+	--ea-cream: #fefcf8;
 	}
 
-	.md-page {
+	/* Scroll reveal system */
+	.ea-reveal {
+	opacity: 0;
+	transform: translateY(32px);
+	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	.ea-reveal.visible {
+	opacity: 1;
+	transform: translateY(0);
+	}
+	.ea-reveal-delay-1 { transition-delay: 0.1s; }
+	.ea-reveal-delay-2 { transition-delay: 0.2s; }
+	.ea-reveal-delay-3 { transition-delay: 0.3s; }
+	.ea-reveal-delay-4 { transition-delay: 0.4s; }
+
+	.ea-page {
 	min-height: 100vh;
-	background: var(--md-bg);
-	color: var(--md-text);
-	font-family: 'Source Serif 4', Georgia, serif;
-	line-height: 1.7;
+	background: var(--ea-bg);
+	color: var(--ea-text);
+	font-family: 'Cormorant Garamond', Georgia, serif;
+	line-height: 1.75;
+	-webkit-font-smoothing: antialiased;
 	}
 
-	.md-nav {
-	padding: 24px 48px;
+	/* Ink wash texture overlay */
+	.ea-page::before {
+	content: '';
+	position: fixed;
+	inset: 0;
+	background:
+		radial-gradient(ellipse at 15% 20%, rgba(180, 83, 9, 0.03) 0%, transparent 50%),
+		radial-gradient(ellipse at 85% 80%, rgba(41, 37, 36, 0.02) 0%, transparent 50%);
+	pointer-events: none;
+	z-index: 0;
+	}
+
+	/* --- Navigation --- */
+	.ea-nav {
+	position: relative;
+	z-index: 10;
+	padding: 28px 60px;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	border-bottom: 1px solid var(--md-border);
+	border-bottom: 1px solid var(--ea-border);
 	}
 
-	.md-nav-brand {
+	.ea-nav-brand {
+	font-family: 'Playfair Display', Georgia, serif;
 	font-weight: 700;
-	font-size: 20px;
-	color: var(--md-text);
-	letter-spacing: -0.02em;
+	font-size: 22px;
+	color: var(--ea-text);
+	letter-spacing: -0.03em;
 	text-decoration: none;
 	}
 
-	.md-nav-links {
+	.ea-nav-links {
 	display: flex;
 	align-items: center;
-	gap: 32px;
+	gap: 36px;
 	}
 
-	.md-nav-link {
-	color: var(--md-muted);
+	.ea-nav-link {
+	color: var(--ea-muted);
 	text-decoration: none;
-	font-size: 15px;
-	transition: color 0.2s ease;
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 12px;
+	font-weight: 500;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	transition: color 0.3s ease;
 	}
 
-	.md-nav-link:hover {
-	color: var(--md-text);
+	.ea-nav-link:hover {
+	color: var(--ea-text);
 	}
 
-	.md-btn-text {
+	/* Mobile menu */
+	.ea-mobile-toggle {
+	display: none;
+	background: none;
+	border: 1px solid var(--ea-border);
+	border-radius: 4px;
+	padding: 8px 12px;
+	cursor: pointer;
+	color: var(--ea-text);
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 11px;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	}
+
+	.ea-mobile-menu {
+	display: none;
+	position: absolute;
+	top: 100%;
+	left: 0;
+	right: 0;
+	background: var(--ea-cream);
+	border-bottom: 1px solid var(--ea-border);
+	padding: 24px 60px;
+	z-index: 100;
+	flex-direction: column;
+	gap: 16px;
+	}
+
+	.ea-mobile-menu.open {
+	display: flex;
+	}
+
+	/* --- Buttons --- */
+	.ea-btn-text {
 	display: inline-flex;
 	align-items: center;
-	gap: 6px;
-	color: var(--md-muted);
-	font-family: 'Source Serif 4', Georgia, serif;
+	gap: 8px;
+	color: var(--ea-muted);
+	font-family: 'IBM Plex Mono', monospace;
 	font-weight: 500;
-	font-size: 16px;
+	font-size: 12px;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
 	text-decoration: none;
 	background: none;
 	border: none;
 	cursor: pointer;
-	transition: color 0.2s ease;
+	transition: color 0.3s ease;
 	}
 
-	.md-btn-text:hover {
-	color: var(--md-text);
+	.ea-btn-text:hover {
+	color: var(--ea-text);
 	}
 
-	.md-btn-primary {
+	.ea-btn-primary {
 	display: inline-flex;
 	align-items: center;
-	gap: 8px;
-	padding: 14px 28px;
-	background: var(--md-text);
-	color: var(--md-bg);
-	font-family: 'Source Serif 4', Georgia, serif;
+	gap: 10px;
+	padding: 16px 36px;
+	background: var(--ea-ink);
+	color: var(--ea-cream);
+	font-family: 'IBM Plex Mono', monospace;
 	font-weight: 500;
-	font-size: 16px;
-	border-radius: 4px;
+	font-size: 12px;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	border-radius: 0;
 	text-decoration: none;
-	transition: all 0.2s ease;
+	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+	position: relative;
+	overflow: hidden;
 	}
 
-	.md-btn-primary:hover {
-	background: #404040;
+	.ea-btn-primary::after {
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	background: var(--ea-accent);
+	transform: scaleX(0);
+	transform-origin: left;
+	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 	}
 
-	.md-hero {
-	max-width: 720px;
-	margin: 0 auto;
-	padding: 120px 24px 80px;
+	.ea-btn-primary:hover {
+	background: #44403c;
 	}
 
-	.md-hero h1 {
-	font-size: 52px;
-	font-weight: 600;
-	line-height: 1.2;
-	margin-bottom: 24px;
-	letter-spacing: -0.02em;
-	color: var(--md-text);
+	.ea-btn-primary:hover::after {
+	transform: scaleX(1);
 	}
 
-	.md-hero-sub {
-	font-size: 21px;
-	color: var(--md-muted);
-	line-height: 1.7;
-	margin-bottom: 36px;
-	}
-
-	.md-hero-ctas {
+	/* --- Section label --- */
+	.ea-section-label {
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 11px;
+	font-weight: 500;
+	letter-spacing: 0.18em;
+	text-transform: uppercase;
+	color: var(--ea-light);
+	margin-bottom: 20px;
 	display: flex;
+	align-items: center;
 	gap: 16px;
+	}
+
+	.ea-section-label::after {
+	content: '';
+	flex: 1;
+	height: 1px;
+	background: var(--ea-border);
+	}
+
+	/* --- Hero Section --- */
+	.ea-hero {
+	position: relative;
+	z-index: 1;
+	max-width: 780px;
+	margin: 0 auto;
+	padding: 100px 32px 80px;
+	}
+
+	.ea-hero-eyebrow {
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 11px;
+	font-weight: 500;
+	letter-spacing: 0.2em;
+	text-transform: uppercase;
+	color: var(--ea-accent);
+	margin-bottom: 28px;
+	}
+
+	.ea-hero h1 {
+	font-family: 'Playfair Display', Georgia, serif;
+	font-size: clamp(40px, 6vw, 64px);
+	font-weight: 400;
+	line-height: 1.15;
+	margin-bottom: 28px;
+	letter-spacing: -0.02em;
+	color: var(--ea-text);
+	}
+
+	.ea-hero h1 em {
+	font-style: italic;
+	color: var(--ea-accent);
+	}
+
+	.ea-hero-sub {
+	font-size: clamp(18px, 2.2vw, 22px);
+	color: var(--ea-muted);
+	line-height: 1.8;
+	margin-bottom: 44px;
+	max-width: 600px;
+	}
+
+	.ea-hero-ctas {
+	display: flex;
+	gap: 20px;
 	align-items: center;
-	margin-bottom: 64px;
+	margin-bottom: 72px;
 	}
 
-	.md-install-cmd {
-	display: inline-flex;
-	align-items: center;
-	gap: 12px;
-	padding: 12px 20px;
-	background: #f5f5f5;
-	border-radius: 4px;
-	font-family: 'Source Code Pro', monospace;
-	font-size: 15px;
-	color: var(--md-muted);
-	border: 1px solid var(--md-border);
-	cursor: pointer;
-	transition: all 0.2s ease;
-	}
-
-	.md-install-cmd:hover {
-	border-color: #d4d4d4;
-	background: #f0f0f0;
-	}
-
-	.md-code-block {
-	background: #1a1a1a;
-	border-radius: 6px;
-	padding: 28px;
-	font-family: 'Source Code Pro', monospace;
+	/* Code block */
+	.ea-code-block {
+	background: var(--ea-ink);
+	padding: 32px;
+	font-family: 'IBM Plex Mono', monospace;
 	font-size: 14px;
-	line-height: 1.7;
+	line-height: 1.8;
 	overflow-x: auto;
 	position: relative;
+	border-left: 3px solid var(--ea-accent);
 	}
 
-	.md-code-block code {
-	color: #e5e5e5;
+	.ea-code-block code {
+	color: #d6d3d1;
 	white-space: pre;
 	}
 
-	.md-copy-btn {
+	.ea-copy-btn {
 	position: absolute;
 	top: 16px;
 	right: 16px;
@@ -164,100 +282,160 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background: rgba(255,255,255,0.05);
-	border: 1px solid rgba(255,255,255,0.1);
-	border-radius: 6px;
-	color: #737373;
+	background: rgba(255, 255, 255, 0.04);
+	border: 1px solid rgba(255, 255, 255, 0.08);
+	border-radius: 0;
+	color: #78716c;
 	cursor: pointer;
-	transition: all 0.2s ease;
+	transition: all 0.3s ease;
 	}
 
-	.md-copy-btn:hover {
-	background: rgba(255,255,255,0.1);
-	color: #e5e5e5;
+	.ea-copy-btn:hover {
+	background: rgba(255, 255, 255, 0.08);
+	color: #d6d3d1;
 	}
 
-	.md-divider {
-	height: 1px;
-	background: var(--md-border);
-	max-width: 720px;
-	margin: 80px auto;
-	}
-
-	.md-stats {
-	max-width: 720px;
+	/* --- Horizontal rule --- */
+	.ea-rule {
+	max-width: 780px;
 	margin: 0 auto;
-	padding: 0 24px;
+	padding: 0 32px;
 	}
 
-	.md-stats-inner {
+	.ea-rule-inner {
+	height: 1px;
+	background: var(--ea-border);
+	position: relative;
+	}
+
+	.ea-rule-inner::after {
+	content: '§';
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	background: var(--ea-bg);
+	padding: 0 20px;
+	font-family: 'Playfair Display', Georgia, serif;
+	font-size: 18px;
+	color: var(--ea-light);
+	font-style: italic;
+	}
+
+	/* --- Stats --- */
+	.ea-stats {
+	max-width: 780px;
+	margin: 0 auto;
+	padding: 72px 32px;
+	}
+
+	.ea-stats-inner {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
-	gap: 48px;
+	gap: 0;
+	}
+
+	.ea-stat {
 	text-align: center;
+	padding: 0 24px;
+	border-right: 1px solid var(--ea-border);
 	}
 
-	.md-stat-value {
-	font-size: 32px;
-	font-weight: 600;
-	color: var(--md-text);
-	letter-spacing: -0.02em;
+	.ea-stat:last-child {
+	border-right: none;
 	}
 
-	.md-stat-label {
-	font-size: 14px;
-	color: var(--md-light);
-	margin-top: 4px;
+	.ea-stat-value {
+	font-family: 'Playfair Display', Georgia, serif;
+	font-size: clamp(42px, 5vw, 56px);
+	font-weight: 400;
+	color: var(--ea-text);
+	letter-spacing: -0.03em;
+	line-height: 1;
+	margin-bottom: 8px;
+	font-style: italic;
 	}
 
-	.md-section {
-	max-width: 720px;
-	margin: 0 auto;
-	padding: 0 24px 80px;
-	}
-
-	.md-section-title {
-	font-size: 32px;
-	font-weight: 600;
-	margin-bottom: 32px;
-	letter-spacing: -0.02em;
-	}
-
-	.md-value-item {
-	display: flex;
-	align-items: baseline;
-	gap: 12px;
-	margin-bottom: 12px;
-	}
-
-	.md-value-bullet {
-	width: 6px;
-	height: 6px;
-	background: var(--md-text);
-	border-radius: 50%;
-	flex-shrink: 0;
-	margin-top: 10px;
-	}
-
-	.md-value-title {
+	.ea-stat-label {
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 11px;
 	font-weight: 500;
-	color: var(--md-text);
+	color: var(--ea-light);
+	letter-spacing: 0.12em;
+	text-transform: uppercase;
 	}
 
-	.md-value-desc {
-	color: var(--md-light);
+	/* --- Sections --- */
+	.ea-section {
+	position: relative;
+	z-index: 1;
+	max-width: 780px;
+	margin: 0 auto;
+	padding: 0 32px 88px;
 	}
 
-	.md-accordion {
-	border-top: 1px solid var(--md-border);
+	.ea-section-title {
+	font-family: 'Playfair Display', Georgia, serif;
+	font-size: clamp(28px, 3.5vw, 38px);
+	font-weight: 400;
+	margin-bottom: 40px;
+	letter-spacing: -0.02em;
+	line-height: 1.3;
 	}
 
-	.md-accordion-item {
-	border-bottom: 1px solid var(--md-border);
-	padding: 24px 0;
+	/* --- Value props --- */
+	.ea-value-item {
+	display: flex;
+	gap: 20px;
+	margin-bottom: 20px;
+	padding-bottom: 20px;
+	border-bottom: 1px solid var(--ea-border);
 	}
 
-	.md-accordion-header {
+	.ea-value-item:last-child {
+	border-bottom: none;
+	margin-bottom: 0;
+	padding-bottom: 0;
+	}
+
+	.ea-value-number {
+	font-family: 'Playfair Display', Georgia, serif;
+	font-size: 36px;
+	font-weight: 400;
+	font-style: italic;
+	color: var(--ea-light);
+	line-height: 1;
+	flex-shrink: 0;
+	width: 44px;
+	}
+
+	.ea-value-body {
+	flex: 1;
+	}
+
+	.ea-value-title {
+	font-family: 'Playfair Display', Georgia, serif;
+	font-weight: 600;
+	font-size: 20px;
+	color: var(--ea-text);
+	margin-bottom: 4px;
+	}
+
+	.ea-value-desc {
+	color: var(--ea-muted);
+	font-size: 17px;
+	}
+
+	/* --- Features accordion --- */
+	.ea-accordion {
+	border-top: 1px solid var(--ea-ink);
+	}
+
+	.ea-accordion-item {
+	border-bottom: 1px solid var(--ea-border);
+	}
+
+	.ea-accordion-header {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -266,337 +444,554 @@
 	border: none;
 	width: 100%;
 	text-align: left;
-	font-family: 'Source Serif 4', Georgia, serif;
+	font-family: 'Cormorant Garamond', Georgia, serif;
+	padding: 28px 0;
+	transition: opacity 0.3s ease;
 	}
 
-	.md-accordion-title {
-	font-size: 20px;
+	.ea-accordion-header:hover {
+	opacity: 0.7;
+	}
+
+	.ea-accordion-title {
+	font-family: 'Playfair Display', Georgia, serif;
+	font-size: 22px;
 	font-weight: 500;
-	color: var(--md-text);
-	transition: color 0.2s ease;
+	color: var(--ea-text);
+	letter-spacing: -0.01em;
 	}
 
-	.md-accordion-header:hover .md-accordion-title {
-	color: var(--md-muted);
-	}
-
-	.md-accordion-icon {
-	width: 24px;
-	height: 24px;
-	color: var(--md-light);
-	transition: transform 0.3s ease;
+	.ea-accordion-icon {
+	width: 28px;
+	height: 28px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-family: 'Playfair Display', Georgia, serif;
 	font-size: 24px;
 	font-weight: 300;
-	line-height: 1;
+	color: var(--ea-light);
+	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 	}
 
-	.md-accordion-content {
+	.ea-accordion-item.open .ea-accordion-icon {
+	transform: rotate(45deg);
+	}
+
+	.ea-accordion-content {
 	display: none;
-	padding-top: 16px;
-	font-size: 17px;
-	line-height: 1.7;
-	color: var(--md-muted);
+	padding-bottom: 28px;
+	font-size: 18px;
+	line-height: 1.8;
+	color: var(--ea-muted);
+	max-width: 620px;
 	}
 
-	.md-accordion-item.open .md-accordion-content {
+	.ea-accordion-item.open .ea-accordion-content {
 	display: block;
 	}
 
-	.md-pricing {
-	max-width: 960px;
+	/* --- Pricing --- */
+	.ea-pricing {
+	position: relative;
+	z-index: 1;
+	max-width: 1000px;
 	margin: 0 auto;
-	padding: 80px 24px;
-	border-top: 1px solid var(--md-border);
+	padding: 88px 32px;
+	border-top: 1px solid var(--ea-border);
 	}
 
-	.md-pricing-title {
-	font-size: 32px;
-	font-weight: 600;
+	.ea-pricing-title {
+	font-family: 'Playfair Display', Georgia, serif;
+	font-size: clamp(28px, 3.5vw, 38px);
+	font-weight: 400;
 	text-align: center;
-	margin-bottom: 48px;
+	margin-bottom: 56px;
 	letter-spacing: -0.02em;
 	}
 
-	.md-pricing-grid {
+	.ea-pricing-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-	gap: 24px;
+	gap: 1px;
+	background: var(--ea-border);
+	border: 1px solid var(--ea-border);
 	}
 
-	.md-pricing-card {
-	border: 1px solid var(--md-border);
-	border-radius: 8px;
-	padding: 32px;
-	background: white;
+	.ea-pricing-card {
+	padding: 40px;
+	background: var(--ea-cream);
 	position: relative;
 	}
 
-	.md-pricing-card.featured {
-	border-color: var(--md-text);
-	box-shadow: 0 4px 24px rgba(0,0,0,0.08);
+	.ea-pricing-card.featured {
+	background: var(--ea-ink);
+	color: var(--ea-cream);
 	}
 
-	.md-pricing-featured-badge {
-	position: absolute;
-	top: -12px;
-	left: 50%;
-	transform: translateX(-50%);
-	background: var(--md-text);
-	color: white;
-	font-size: 12px;
+	.ea-pricing-featured-badge {
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 10px;
 	font-weight: 500;
-	padding: 4px 12px;
-	border-radius: 12px;
+	letter-spacing: 0.15em;
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	color: var(--ea-accent);
+	margin-bottom: 16px;
+	display: block;
 	}
 
-	.md-pricing-name {
-	font-size: 18px;
-	font-weight: 600;
-	margin-bottom: 8px;
+	.ea-pricing-card.featured .ea-pricing-featured-badge {
+	color: #fbbf24;
 	}
 
-	.md-pricing-price {
-	font-size: 36px;
-	font-weight: 600;
+	.ea-pricing-name {
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 13px;
+	font-weight: 500;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	margin-bottom: 12px;
+	color: var(--ea-muted);
+	}
+
+	.ea-pricing-card.featured .ea-pricing-name {
+	color: #a8a29e;
+	}
+
+	.ea-pricing-price {
+	font-family: 'Playfair Display', Georgia, serif;
+	font-size: 44px;
+	font-weight: 400;
+	font-style: italic;
 	margin-bottom: 4px;
 	letter-spacing: -0.02em;
 	}
 
-	.md-pricing-period {
-	font-size: 14px;
-	color: var(--md-light);
-	margin-bottom: 24px;
-	}
-
-	.md-pricing-features {
-	list-style: none;
-	padding: 0;
-	margin: 0 0 24px;
-	}
-
-	.md-pricing-features li {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 8px 0;
-	font-size: 15px;
-	color: var(--md-muted);
-	}
-
-	.md-pricing-features li::before {
-	content: "✓";
-	color: var(--md-text);
-	font-weight: 600;
-	}
-
-	.md-pricing-cta {
-	display: block;
-	width: 100%;
-	padding: 12px 24px;
-	text-align: center;
-	border: 1px solid var(--md-border);
-	border-radius: 4px;
-	font-family: 'Source Serif 4', Georgia, serif;
-	font-weight: 500;
-	font-size: 15px;
-	color: var(--md-text);
-	text-decoration: none;
-	transition: all 0.2s ease;
-	}
-
-	.md-pricing-cta:hover {
-	background: var(--md-text);
-	color: white;
-	border-color: var(--md-text);
-	}
-
-	.md-pricing-card.featured .md-pricing-cta {
-	background: var(--md-text);
-	color: white;
-	border-color: var(--md-text);
-	}
-
-	.md-pricing-card.featured .md-pricing-cta:hover {
-	background: #404040;
-	}
-
-	.md-testimonial-section {
-	border-top: 1px solid var(--md-border);
-	border-bottom: 1px solid var(--md-border);
-	padding: 80px 0;
-	margin: 80px 0;
-	}
-
-	.md-testimonial-inner {
-	max-width: 720px;
-	margin: 0 auto;
-	padding: 0 24px;
-	}
-
-	.md-testimonial-quote {
-	font-size: 28px;
-	line-height: 1.5;
-	color: var(--md-text);
-	margin-bottom: 24px;
-	font-style: italic;
-	}
-
-	.md-testimonial-author {
-	font-weight: 500;
-	color: var(--md-muted);
-	}
-
-	.md-testimonial-role {
-	color: var(--md-light);
-	}
-
-	.md-used-by {
-	max-width: 720px;
-	margin: 0 auto;
-	padding: 0 24px 80px;
-	}
-
-	.md-used-by-label {
-	font-size: 14px;
-	color: #a3a3a3;
-	margin-bottom: 20px;
-	text-transform: uppercase;
+	.ea-pricing-period {
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 12px;
+	color: var(--ea-light);
+	margin-bottom: 28px;
 	letter-spacing: 0.05em;
 	}
 
-	.md-used-by-logos {
+	.ea-pricing-card.featured .ea-pricing-period {
+	color: #78716c;
+	}
+
+	.ea-pricing-features {
+	list-style: none;
+	padding: 0;
+	margin: 0 0 32px;
+	}
+
+	.ea-pricing-features li {
 	display: flex;
-	gap: 32px;
+	align-items: baseline;
+	gap: 10px;
+	padding: 10px 0;
+	font-size: 16px;
+	color: var(--ea-muted);
+	border-bottom: 1px solid var(--ea-border);
+	}
+
+	.ea-pricing-card.featured .ea-pricing-features li {
+	color: #a8a29e;
+	border-color: rgba(255, 255, 255, 0.08);
+	}
+
+	.ea-pricing-features li:last-child {
+	border-bottom: none;
+	}
+
+	.ea-pricing-features li::before {
+	content: "—";
+	color: var(--ea-accent);
+	font-weight: 500;
+	flex-shrink: 0;
+	}
+
+	.ea-pricing-card.featured .ea-pricing-features li::before {
+	color: #fbbf24;
+	}
+
+	.ea-pricing-cta {
+	display: block;
+	width: 100%;
+	padding: 14px 28px;
+	text-align: center;
+	border: 1px solid var(--ea-border);
+	font-family: 'IBM Plex Mono', monospace;
+	font-weight: 500;
+	font-size: 12px;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--ea-text);
+	text-decoration: none;
+	transition: all 0.4s ease;
+	}
+
+	.ea-pricing-cta:hover {
+	background: var(--ea-ink);
+	color: var(--ea-cream);
+	border-color: var(--ea-ink);
+	}
+
+	.ea-pricing-card.featured .ea-pricing-cta {
+	background: var(--ea-cream);
+	color: var(--ea-ink);
+	border-color: var(--ea-cream);
+	}
+
+	.ea-pricing-card.featured .ea-pricing-cta:hover {
+	background: #e7e5e4;
+	}
+
+	/* --- Testimonial --- */
+	.ea-testimonial-section {
+	position: relative;
+	z-index: 1;
+	background: var(--ea-surface);
+	padding: 88px 0;
+	margin: 0;
+	}
+
+	.ea-testimonial-inner {
+	max-width: 720px;
+	margin: 0 auto;
+	padding: 0 32px;
+	}
+
+	.ea-testimonial-mark {
+	font-family: 'Playfair Display', Georgia, serif;
+	font-size: 120px;
+	font-weight: 400;
+	font-style: italic;
+	line-height: 0.7;
+	color: var(--ea-border);
+	margin-bottom: 12px;
+	}
+
+	.ea-testimonial-quote {
+	font-family: 'Playfair Display', Georgia, serif;
+	font-size: clamp(22px, 3vw, 30px);
+	line-height: 1.5;
+	color: var(--ea-text);
+	margin-bottom: 28px;
+	font-style: italic;
+	font-weight: 400;
+	}
+
+	.ea-testimonial-attribution {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	}
+
+	.ea-testimonial-dash {
+	width: 32px;
+	height: 1px;
+	background: var(--ea-light);
+	}
+
+	.ea-testimonial-author {
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 12px;
+	font-weight: 500;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--ea-muted);
+	}
+
+	.ea-testimonial-role {
+	font-family: 'Cormorant Garamond', Georgia, serif;
+	font-size: 15px;
+	color: var(--ea-light);
+	font-style: italic;
+	margin-left: 44px;
+	margin-top: 4px;
+	}
+
+	/* --- Used by --- */
+	.ea-used-by {
+	position: relative;
+	z-index: 1;
+	max-width: 780px;
+	margin: 0 auto;
+	padding: 64px 32px 80px;
+	}
+
+	.ea-used-by-logos {
+	display: flex;
+	gap: 40px;
 	flex-wrap: wrap;
 	}
 
-	.md-used-by-item {
-	font-size: 15px;
-	color: #a3a3a3;
+	.ea-used-by-item {
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 13px;
+	color: var(--ea-light);
 	font-weight: 500;
+	letter-spacing: 0.04em;
+	transition: color 0.3s ease;
 	}
 
-	.md-cta-section {
-	max-width: 720px;
+	.ea-used-by-item:hover {
+	color: var(--ea-muted);
+	}
+
+	/* --- CTA Section --- */
+	.ea-cta-section {
+	position: relative;
+	z-index: 1;
+	max-width: 780px;
 	margin: 0 auto;
-	padding: 80px 24px;
+	padding: 88px 32px;
 	text-align: center;
-	border-top: 1px solid var(--md-border);
+	border-top: 1px solid var(--ea-border);
 	}
 
-	.md-cta-section h2 {
-	font-size: 36px;
-	font-weight: 600;
-	margin-bottom: 24px;
+	.ea-cta-section h2 {
+	font-family: 'Playfair Display', Georgia, serif;
+	font-size: clamp(28px, 4vw, 42px);
+	font-weight: 400;
+	margin-bottom: 28px;
 	letter-spacing: -0.02em;
+	font-style: italic;
 	}
 
-	.md-footer {
-	padding: 32px 48px;
-	border-top: 1px solid var(--md-border);
+	.ea-install-cmd {
+	display: inline-flex;
+	align-items: center;
+	gap: 14px;
+	padding: 14px 24px;
+	background: var(--ea-ink);
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 14px;
+	color: #d6d3d1;
+	border: none;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	border-left: 3px solid var(--ea-accent);
+	margin-bottom: 36px;
+	}
+
+	.ea-install-cmd:hover {
+	background: #44403c;
+	}
+
+	.ea-install-cmd .ea-prompt {
+	color: var(--ea-accent);
+	}
+
+	/* --- Footer --- */
+	.ea-footer {
+	position: relative;
+	z-index: 1;
+	padding: 36px 60px;
+	border-top: 1px solid var(--ea-border);
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	}
 
-	.md-footer-copyright {
-	font-size: 14px;
-	color: #a3a3a3;
+	.ea-footer-copyright {
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 11px;
+	color: var(--ea-light);
+	letter-spacing: 0.04em;
 	}
 
-	.md-footer-links {
+	.ea-footer-links {
 	display: flex;
-	gap: 24px;
+	gap: 28px;
 	}
 
-	.md-footer-link {
-	color: var(--md-light);
+	.ea-footer-link {
+	color: var(--ea-light);
 	text-decoration: none;
-	font-size: 14px;
-	transition: color 0.2s ease;
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 11px;
+	letter-spacing: 0.04em;
+	transition: color 0.3s ease;
 	}
 
-	.md-footer-link:hover {
-	color: var(--md-text);
+	.ea-footer-link:hover {
+	color: var(--ea-text);
 	}
 
-	.md-footer-social {
+	.ea-footer-social {
 	display: flex;
 	gap: 16px;
 	}
 
-	.md-footer-social a {
-	color: var(--md-light);
-	transition: color 0.2s ease;
+	.ea-footer-social a {
+	color: var(--ea-light);
+	transition: color 0.3s ease;
 	}
 
-	.md-footer-social a:hover {
-	color: var(--md-text);
+	.ea-footer-social a:hover {
+	color: var(--ea-text);
 	}
 
+	/* --- Responsive --- */
 	@media (max-width: 768px) {
-	.md-nav { padding: 16px 24px; }
-	.md-nav-links { gap: 16px; }
-	.md-hero { padding: 80px 24px 60px; }
-	.md-hero h1 { font-size: 36px; }
-	.md-hero-sub { font-size: 18px; }
-	.md-hero-ctas { flex-direction: column; align-items: flex-start; }
-	.md-stats-inner { grid-template-columns: 1fr; gap: 24px; }
-	.md-section-title { font-size: 28px; }
-	.md-testimonial-quote { font-size: 22px; }
-	.md-cta-section h2 { font-size: 28px; }
-	.md-footer { flex-direction: column; gap: 16px; text-align: center; padding: 24px; }
+	.ea-nav {
+		padding: 20px 24px;
+	}
+	.ea-nav-links {
+		display: none;
+	}
+	.ea-mobile-toggle {
+		display: block;
+	}
+	.ea-mobile-menu {
+		padding: 24px;
+	}
+	.ea-hero {
+		padding: 72px 24px 60px;
+	}
+	.ea-hero-ctas {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+	.ea-stats-inner {
+		grid-template-columns: 1fr;
+		gap: 0;
+	}
+	.ea-stat {
+		border-right: none;
+		border-bottom: 1px solid var(--ea-border);
+		padding: 24px 0;
+	}
+	.ea-stat:last-child {
+		border-bottom: none;
+	}
+	.ea-section {
+		padding: 0 24px 64px;
+	}
+	.ea-section-title {
+		font-size: 28px;
+	}
+	.ea-pricing {
+		padding: 64px 24px;
+	}
+	.ea-pricing-grid {
+		grid-template-columns: 1fr;
+	}
+	.ea-testimonial-section {
+		padding: 64px 0;
+	}
+	.ea-testimonial-quote {
+		font-size: 22px;
+	}
+	.ea-testimonial-mark {
+		font-size: 80px;
+	}
+	.ea-cta-section {
+		padding: 64px 24px;
+	}
+	.ea-footer {
+		flex-direction: column;
+		gap: 16px;
+		text-align: center;
+		padding: 28px 24px;
+	}
+	.ea-value-number {
+		font-size: 28px;
+		width: 32px;
+	}
+	.ea-stats {
+		padding: 48px 24px;
+	}
+	.ea-rule {
+		padding: 0 24px;
+	}
+	.ea-used-by {
+		padding: 48px 24px 64px;
+	}
+	}
+
+	@media (max-width: 480px) {
+	.ea-hero h1 {
+		font-size: 32px;
+	}
+	.ea-stat-value {
+		font-size: 36px;
+	}
+	.ea-accordion-title {
+		font-size: 18px;
+	}
 	}
 </style>
 
-<div class="md-page">
+<div class="ea-page">
 	<!-- Navigation -->
-	<nav class="md-nav">
-	<a href="/" class="md-nav-brand">{{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}</a>
-	<div class="md-nav-links">
+	<nav class="ea-nav">
+	<a href="/" class="ea-nav-brand">{{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}</a>
+	<div class="ea-nav-links">
 		{{if .Config.Footer.Links}}
 		{{range .Config.Footer.Links}}
-			<a href="{{.URL}}" class="md-nav-link">{{.Label}}</a>
+			<a href="{{.URL}}" class="ea-nav-link">{{.Label}}</a>
 		{{end}}
 		{{else}}
-		<a href="{{.Repository.Link}}/wiki" class="md-nav-link">Docs</a>
-		<a href="{{.Repository.Link}}" class="md-nav-link">API</a>
+		<a href="{{.Repository.Link}}/wiki" class="ea-nav-link">Docs</a>
+		<a href="{{.Repository.Link}}" class="ea-nav-link">API</a>
 		{{end}}
-		{{if .Config.ValueProps}}<a href="#why" class="md-nav-link">Why</a>{{end}}
-		{{if .Config.Features}}<a href="#features" class="md-nav-link">Features</a>{{end}}
-		{{if .Config.Pricing.Plans}}<a href="#pricing" class="md-nav-link">Pricing</a>{{end}}
-		<a href="{{.Repository.Link}}" class="md-btn-text">
-		<img src="/assets/img/gitcaddy-icon.svg" width="18" height="18" alt="GitCaddy">
+		{{if .Config.ValueProps}}<a href="#why" class="ea-nav-link">Why</a>{{end}}
+		{{if .Config.Features}}<a href="#features" class="ea-nav-link">Features</a>{{end}}
+		{{if .Config.Pricing.Plans}}<a href="#pricing" class="ea-nav-link">Pricing</a>{{end}}
+		<a href="{{.Repository.Link}}" class="ea-btn-text">
+		<img src="/assets/img/gitcaddy-icon.svg" width="16" height="16" alt="GitCaddy">
 		Repository
 		</a>
 	</div>
+	<button class="ea-mobile-toggle" onclick="document.getElementById('ea-mobile-nav').classList.toggle('open')">Menu</button>
 	</nav>
+	<div class="ea-mobile-menu" id="ea-mobile-nav">
+		{{if .Config.Footer.Links}}
+		{{range .Config.Footer.Links}}
+			<a href="{{.URL}}" class="ea-nav-link">{{.Label}}</a>
+		{{end}}
+		{{else}}
+		<a href="{{.Repository.Link}}/wiki" class="ea-nav-link">Docs</a>
+		<a href="{{.Repository.Link}}" class="ea-nav-link">API</a>
+		{{end}}
+		{{if .Config.ValueProps}}<a href="#why" class="ea-nav-link">Why</a>{{end}}
+		{{if .Config.Features}}<a href="#features" class="ea-nav-link">Features</a>{{end}}
+		{{if .Config.Pricing.Plans}}<a href="#pricing" class="ea-nav-link">Pricing</a>{{end}}
+		<a href="{{.Repository.Link}}" class="ea-btn-text">
+		<img src="/assets/img/gitcaddy-icon.svg" width="16" height="16" alt="GitCaddy">
+		Repository
+		</a>
+	</div>
 
-	<!-- Hero Section (Left Aligned) -->
-	<section class="md-hero">
-	<h1>{{if .Config.Hero.Headline}}{{.Config.Hero.Headline}}{{else}}{{.Repository.Name}}{{end}}</h1>
-	<p class="md-hero-sub">{{if .Config.Hero.Subheadline}}{{.Config.Hero.Subheadline}}{{else}}{{.Repository.Description}}{{end}}</p>
+	<!-- Hero Section -->
+	<section class="ea-hero">
+	<div class="ea-reveal">
+		<div class="ea-hero-eyebrow">{{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}Open Source{{end}}</div>
+	</div>
+	<h1 class="ea-reveal ea-reveal-delay-1">{{if .Config.Hero.Headline}}{{.Config.Hero.Headline}}{{else}}{{.Repository.Name}}{{end}}</h1>
+	<p class="ea-hero-sub ea-reveal ea-reveal-delay-2">{{if .Config.Hero.Subheadline}}{{.Config.Hero.Subheadline}}{{else}}{{.Repository.Description}}{{end}}</p>
 
-	<div class="md-hero-ctas">
+	<div class="ea-hero-ctas ea-reveal ea-reveal-delay-3">
 		{{if .Config.Hero.PrimaryCTA.Label}}
-		<a href="{{.Config.Hero.PrimaryCTA.URL}}" class="md-btn-primary">
+		<a href="{{.Config.Hero.PrimaryCTA.URL}}" class="ea-btn-primary">
 			{{.Config.Hero.PrimaryCTA.Label}}
-			{{svg "octicon-arrow-right" 16}}
+			{{svg "octicon-arrow-right" 14}}
 		</a>
 		{{else}}
-		<a href="{{.Repository.Link}}" class="md-btn-primary">
+		<a href="{{.Repository.Link}}" class="ea-btn-primary">
 			Get Started
-			{{svg "octicon-arrow-right" 16}}
+			{{svg "octicon-arrow-right" 14}}
 		</a>
 		{{end}}
 	</div>
 
 	{{if .Config.Hero.CodeExample}}
-	<div class="md-code-block">
-		<button class="md-copy-btn" onclick="navigator.clipboard.writeText(document.getElementById('code-example').textContent)">
-		{{svg "octicon-copy" 16}}
+	<div class="ea-code-block ea-reveal ea-reveal-delay-4">
+		<button class="ea-copy-btn" onclick="navigator.clipboard.writeText(document.getElementById('code-example').textContent)">
+		{{svg "octicon-copy" 14}}
 		</button>
 		<code id="code-example">{{.Config.Hero.CodeExample}}</code>
 	</div>
@@ -604,66 +999,68 @@
 	</section>
 
 	{{if or .Config.Stats (gt .NumStars 0)}}
-	<div class="md-divider"></div>
+	<div class="ea-rule"><div class="ea-rule-inner"></div></div>
 	<!-- Stats -->
-	<section class="md-stats">
-	<div class="md-stats-inner">
+	<section class="ea-stats">
+	<div class="ea-stats-inner">
 		{{if .Config.Stats}}
 		{{range .Config.Stats}}
-			<div>
-			<div class="md-stat-value">{{.Value}}</div>
-			<div class="md-stat-label">{{.Label}}</div>
+			<div class="ea-stat ea-reveal">
+			<div class="ea-stat-value">{{.Value}}</div>
+			<div class="ea-stat-label">{{.Label}}</div>
 			</div>
 		{{end}}
 		{{else}}
-		<div>
-			<div class="md-stat-value">{{.NumStars}}</div>
-			<div class="md-stat-label">Stars</div>
+		<div class="ea-stat ea-reveal">
+			<div class="ea-stat-value">{{.NumStars}}</div>
+			<div class="ea-stat-label">Stars</div>
 		</div>
-		<div>
-			<div class="md-stat-value">{{.NumForks}}</div>
-			<div class="md-stat-label">Forks</div>
+		<div class="ea-stat ea-reveal ea-reveal-delay-1">
+			<div class="ea-stat-value">{{.NumForks}}</div>
+			<div class="ea-stat-label">Forks</div>
 		</div>
 		{{if .LatestRelease}}
-		<div>
-			<div class="md-stat-value">v{{.LatestRelease.TagName}}</div>
-			<div class="md-stat-label">Latest</div>
+		<div class="ea-stat ea-reveal ea-reveal-delay-2">
+			<div class="ea-stat-value">v{{.LatestRelease.TagName}}</div>
+			<div class="ea-stat-label">Latest</div>
 		</div>
 		{{end}}
 		{{end}}
 	</div>
 	</section>
-	<div class="md-divider"></div>
+	<div class="ea-rule"><div class="ea-rule-inner"></div></div>
 	{{end}}
 
-	<!-- Value Props (Bullet Points) -->
+	<!-- Value Props -->
 	{{if .Config.ValueProps}}
-	<section class="md-section" id="why">
-	<h2 class="md-section-title">{{if .Config.Brand.Name}}Why {{.Config.Brand.Name}}{{else}}Why Choose Us{{end}}</h2>
-	{{range .Config.ValueProps}}
-		<div class="md-value-item">
-		<div class="md-value-bullet"></div>
-		<div>
-			<span class="md-value-title">{{.Title}}</span>
-			<span class="md-value-desc"> — {{.Description}}</span>
+	<section class="ea-section" id="why">
+	<div class="ea-section-label ea-reveal">Why choose this</div>
+	<h2 class="ea-section-title ea-reveal">{{if .Config.Brand.Name}}Why {{.Config.Brand.Name}}{{else}}Why Choose Us{{end}}</h2>
+	{{range $i, $v := .Config.ValueProps}}
+		<div class="ea-value-item ea-reveal">
+		<div class="ea-value-number">{{$i | printf "%d"}}</div>
+		<div class="ea-value-body">
+			<div class="ea-value-title">{{$v.Title}}</div>
+			<div class="ea-value-desc">{{$v.Description}}</div>
 		</div>
 		</div>
 	{{end}}
 	</section>
 	{{end}}
 
-	<!-- Features Accordion (+/-) -->
+	<!-- Features Accordion -->
 	{{if .Config.Features}}
-	<section class="md-section" id="features">
-	<h2 class="md-section-title">Features</h2>
-	<div class="md-accordion">
+	<section class="ea-section" id="features">
+	<div class="ea-section-label ea-reveal">Capabilities</div>
+	<h2 class="ea-section-title ea-reveal">Features</h2>
+	<div class="ea-accordion ea-reveal">
 		{{range $i, $f := .Config.Features}}
-		<div class="md-accordion-item" data-index="{{$i}}">
-			<button class="md-accordion-header" onclick="toggleAccordion(this)">
-			<span class="md-accordion-title">{{$f.Title}}</span>
-			<span class="md-accordion-icon">+</span>
+		<div class="ea-accordion-item" data-index="{{$i}}">
+			<button class="ea-accordion-header" onclick="toggleAccordion(this)">
+			<span class="ea-accordion-title">{{$f.Title}}</span>
+			<span class="ea-accordion-icon">+</span>
 			</button>
-			<div class="md-accordion-content">
+			<div class="ea-accordion-content">
 			{{$f.Description}}
 			</div>
 		</div>
@@ -674,23 +1071,24 @@
 
 	<!-- Pricing Section -->
 	{{if .Config.Pricing.Plans}}
-	<section class="md-pricing" id="pricing">
-	<h2 class="md-pricing-title">{{if .Config.Pricing.Headline}}{{.Config.Pricing.Headline}}{{else}}Pricing{{end}}</h2>
-	<div class="md-pricing-grid">
+	<section class="ea-pricing" id="pricing">
+	<div class="ea-section-label ea-reveal" style="max-width: 780px; margin: 0 auto 20px;">Investment</div>
+	<h2 class="ea-pricing-title ea-reveal">{{if .Config.Pricing.Headline}}{{.Config.Pricing.Headline}}{{else}}Pricing{{end}}</h2>
+	<div class="ea-pricing-grid ea-reveal">
 		{{range .Config.Pricing.Plans}}
-		<div class="md-pricing-card{{if .Featured}} featured{{end}}">
-			{{if .Featured}}<span class="md-pricing-featured-badge">Popular</span>{{end}}
-			<div class="md-pricing-name">{{.Name}}</div>
-			<div class="md-pricing-price">{{.Price}}</div>
-			<div class="md-pricing-period">{{.Period}}</div>
+		<div class="ea-pricing-card{{if .Featured}} featured{{end}}">
+			{{if .Featured}}<span class="ea-pricing-featured-badge">Recommended</span>{{end}}
+			<div class="ea-pricing-name">{{.Name}}</div>
+			<div class="ea-pricing-price">{{.Price}}</div>
+			<div class="ea-pricing-period">{{.Period}}</div>
 			{{if .Features}}
-			<ul class="md-pricing-features">
+			<ul class="ea-pricing-features">
 			{{range .Features}}
 				<li>{{.}}</li>
 			{{end}}
 			</ul>
 			{{end}}
-			<a href="#" class="md-pricing-cta">{{if .CTA}}{{.CTA}}{{else}}Get Started{{end}}</a>
+			<a href="#" class="ea-pricing-cta">{{if .CTA}}{{.CTA}}{{else}}Get Started{{end}}</a>
 		</div>
 		{{end}}
 	</div>
@@ -699,15 +1097,19 @@
 
 	<!-- Testimonial -->
 	{{if .Config.SocialProof.Testimonials}}
-	<section class="md-testimonial-section">
-	<div class="md-testimonial-inner">
-		<div class="md-testimonials-container">
+	<section class="ea-testimonial-section">
+	<div class="ea-testimonial-inner">
+		<div class="ea-testimonials-container">
 		{{range .Config.SocialProof.Testimonials}}
-		<div class="md-testimonial-item" style="display: none;">
-			<blockquote class="md-testimonial-quote">"{{.Quote}}"</blockquote>
-			<div>
-			<span class="md-testimonial-author">{{.Author}}</span>
-			<span class="md-testimonial-role"> · {{.Role}}</span>
+		<div class="ea-testimonial-item" style="display: none;">
+			<div class="ea-testimonial-mark ea-reveal">&ldquo;</div>
+			<blockquote class="ea-testimonial-quote ea-reveal ea-reveal-delay-1">{{.Quote}}</blockquote>
+			<div class="ea-reveal ea-reveal-delay-2">
+			<div class="ea-testimonial-attribution">
+				<div class="ea-testimonial-dash"></div>
+				<span class="ea-testimonial-author">{{.Author}}</span>
+			</div>
+			<div class="ea-testimonial-role">{{.Role}}</div>
 			</div>
 		</div>
 		{{end}}
@@ -716,7 +1118,7 @@
 	</section>
 	<script>
 	(function() {
-		var items = document.querySelectorAll(".md-testimonial-item");
+		var items = document.querySelectorAll(".ea-testimonial-item");
 		if (items.length > 0) {
 		var idx = Math.floor(Math.random() * items.length);
 		items[idx].style.display = "block";
@@ -727,11 +1129,11 @@
 
 	<!-- Used By -->
 	{{if .Config.SocialProof.Logos}}
-	<section class="md-used-by">
-	<p class="md-used-by-label">Used by</p>
-	<div class="md-used-by-logos">
+	<section class="ea-used-by">
+	<div class="ea-section-label ea-reveal">Trusted by</div>
+	<div class="ea-used-by-logos ea-reveal ea-reveal-delay-1">
 		{{range .Config.SocialProof.Logos}}
-		<span class="md-used-by-item">{{.}}</span>
+		<span class="ea-used-by-item">{{.}}</span>
 		{{end}}
 	</div>
 	</section>
@@ -739,20 +1141,20 @@
 
 	<!-- CTA Section -->
 	{{if .Config.CTASection.Headline}}
-	<section class="md-cta-section">
-	<h2>{{.Config.CTASection.Headline}}</h2>
+	<section class="ea-cta-section">
+	<h2 class="ea-reveal">{{.Config.CTASection.Headline}}</h2>
 	{{if .Config.CTASection.Subheadline}}
-		<button class="md-install-cmd" style="margin-bottom: 32px; font-size: 18px; padding: 16px 28px;" onclick="navigator.clipboard.writeText('{{.Config.CTASection.Subheadline}}')">
-		<span style="color: #a3a3a3;">$</span>
+		<button class="ea-install-cmd ea-reveal ea-reveal-delay-1" onclick="navigator.clipboard.writeText('{{.Config.CTASection.Subheadline}}')">
+		<span class="ea-prompt">$</span>
 		{{.Config.CTASection.Subheadline}}
 		{{svg "octicon-copy" 14}}
 		</button>
 	{{end}}
 	{{if .Config.CTASection.Button.Label}}
-		<div>
-		<a href="{{.Config.CTASection.Button.URL}}" class="md-btn-primary">
+		<div class="ea-reveal ea-reveal-delay-2">
+		<a href="{{.Config.CTASection.Button.URL}}" class="ea-btn-primary">
 			{{.Config.CTASection.Button.Label}}
-			{{svg "octicon-arrow-right" 16}}
+			{{svg "octicon-arrow-right" 14}}
 		</a>
 		</div>
 	{{end}}
@@ -760,30 +1162,30 @@
 	{{end}}
 
 	<!-- Footer -->
-	<footer class="md-footer">
-	<span class="md-footer-copyright">{{if .Config.Footer.Copyright}}{{.Config.Footer.Copyright}}{{else}}&copy; <script>document.write(new Date().getFullYear())</script> {{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}{{end}}</span>
+	<footer class="ea-footer">
+	<span class="ea-footer-copyright">{{if .Config.Footer.Copyright}}{{.Config.Footer.Copyright}}{{else}}&copy; <script>document.write(new Date().getFullYear())</script> {{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}{{end}}</span>
 	{{if .Config.Footer.Social}}
-	<div class="md-footer-social">
+	<div class="ea-footer-social">
 		{{range .Config.Footer.Social}}
 		<a href="{{.URL}}" title="{{.Platform}}">
-			{{if eq .Platform "twitter"}}{{svg "octicon-mention" 18}}
-			{{else if eq .Platform "github"}}{{svg "octicon-mark-github" 18}}
-			{{else if eq .Platform "discord"}}{{svg "octicon-comment-discussion" 18}}
-			{{else if eq .Platform "linkedin"}}{{svg "octicon-briefcase" 18}}
-			{{else if eq .Platform "youtube"}}{{svg "octicon-video" 18}}
-			{{else}}{{svg "octicon-link-external" 18}}{{end}}
+			{{if eq .Platform "twitter"}}{{svg "octicon-mention" 16}}
+			{{else if eq .Platform "github"}}{{svg "octicon-mark-github" 16}}
+			{{else if eq .Platform "discord"}}{{svg "octicon-comment-discussion" 16}}
+			{{else if eq .Platform "linkedin"}}{{svg "octicon-briefcase" 16}}
+			{{else if eq .Platform "youtube"}}{{svg "octicon-video" 16}}
+			{{else}}{{svg "octicon-link-external" 16}}{{end}}
 		</a>
 		{{end}}
 	</div>
 	{{end}}
-	<div class="md-footer-links">
+	<div class="ea-footer-links">
 		{{if .Config.Footer.Links}}
 		{{range .Config.Footer.Links}}
-			<a href="{{.URL}}" class="md-footer-link">{{.Label}}</a>
+			<a href="{{.URL}}" class="ea-footer-link">{{.Label}}</a>
 		{{end}}
 		{{else}}
-		<a href="{{.Repository.Link}}" class="md-footer-link">Repository</a>
-		<a href="{{.Repository.Link}}/wiki" class="md-footer-link">Documentation</a>
+		<a href="{{.Repository.Link}}" class="ea-footer-link">Repository</a>
+		<a href="{{.Repository.Link}}/wiki" class="ea-footer-link">Documentation</a>
 		{{end}}
 	</div>
 	</footer>
@@ -794,18 +1196,33 @@ function toggleAccordion(header) {
 	var item = header.parentElement;
 	var wasOpen = item.classList.contains('open');
 
-	// Close all
-	document.querySelectorAll('.md-accordion-item').forEach(function(el) {
+	document.querySelectorAll('.ea-accordion-item').forEach(function(el) {
 	el.classList.remove('open');
-	el.querySelector('.md-accordion-icon').textContent = '+';
+	el.querySelector('.ea-accordion-icon').textContent = '+';
 	});
 
-	// Open clicked if it was closed
 	if (!wasOpen) {
 	item.classList.add('open');
-	item.querySelector('.md-accordion-icon').textContent = '−';
+	item.querySelector('.ea-accordion-icon').textContent = '+';
 	}
 }
+
+/* Scroll reveal */
+(function() {
+	var reveals = document.querySelectorAll('.ea-reveal');
+	if (!reveals.length) return;
+
+	var observer = new IntersectionObserver(function(entries) {
+	entries.forEach(function(entry) {
+		if (entry.isIntersecting) {
+		entry.target.classList.add('visible');
+		observer.unobserve(entry.target);
+		}
+	});
+	}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+
+	reveals.forEach(function(el) { observer.observe(el); });
+})();
 </script>
 
 {{template "pages/base_footer" .}}
diff --git a/templates/pages/open-source-hero.tmpl b/templates/pages/open-source-hero.tmpl
index 59e2ea9179..4a96b3fd9e 100644
--- a/templates/pages/open-source-hero.tmpl
+++ b/templates/pages/open-source-hero.tmpl
@@ -1,13 +1,22 @@
 {{template "pages/base_head" .}}
 <style>
-	@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+	@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');
 
 	:root {
 	--osh-bg: #0a0a0b;
+	--osh-surface: #111113;
+	--osh-elevated: #18181b;
 	--osh-text: #e4e4e7;
 	--osh-muted: #71717a;
+	--osh-dim: #3f3f46;
 	--osh-accent: {{if .Config.Theme.PrimaryColor}}{{.Config.Theme.PrimaryColor}}{{else}}#22c55e{{end}};
 	--osh-accent-dark: {{if .Config.Theme.AccentColor}}{{.Config.Theme.AccentColor}}{{else}}#16a34a{{end}};
+	--osh-glow: rgba(34, 197, 94, 0.15);
+	--osh-glow-strong: rgba(34, 197, 94, 0.4);
+	}
+
+	html {
+	scroll-behavior: smooth;
 	}
 
 	html, body.pages-body {
@@ -15,14 +24,29 @@
 	background: var(--osh-bg) !important;
 	}
 
+	/* Scan line overlay for terminal feel */
 	.osh-page::before {
 	content: "";
 	position: fixed;
 	inset: 0;
-	background-image:
-		linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
-		linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
-	background-size: 24px 24px;
+	background: repeating-linear-gradient(
+		0deg,
+		transparent,
+		transparent 2px,
+		rgba(0, 0, 0, 0.03) 2px,
+		rgba(0, 0, 0, 0.03) 4px
+	);
+	pointer-events: none;
+	z-index: 9999;
+	}
+
+	/* Dot grid pattern */
+	.osh-page::after {
+	content: "";
+	position: fixed;
+	inset: 0;
+	background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
+	background-size: 20px 20px;
 	pointer-events: none;
 	z-index: 0;
 	}
@@ -33,98 +57,166 @@
 	background: var(--osh-bg);
 	color: var(--osh-text);
 	font-family: 'IBM Plex Sans', -apple-system, sans-serif;
+	-webkit-font-smoothing: antialiased;
 	}
 
+	/* Reveal animation system */
+	.osh-reveal {
+	opacity: 0;
+	transform: translateY(32px);
+	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+	}
+	.osh-reveal.visible {
+	opacity: 1;
+	transform: translateY(0);
+	}
+	.osh-reveal-delay-1 { transition-delay: 0.1s; }
+	.osh-reveal-delay-2 { transition-delay: 0.2s; }
+	.osh-reveal-delay-3 { transition-delay: 0.3s; }
+	.osh-reveal-delay-4 { transition-delay: 0.4s; }
+
+	/* Hero gradient with phosphor glow */
 	.osh-hero-gradient {
 	position: absolute;
-	top: -50%;
+	top: -40%;
 	left: 50%;
 	transform: translateX(-50%);
-	width: 150%;
+	width: 140%;
 	height: 100%;
-	background: radial-gradient(ellipse at center, rgba(34, 197, 94, 0.08) 0%, transparent 60%);
+	background: radial-gradient(ellipse at center, var(--osh-glow) 0%, transparent 55%);
 	pointer-events: none;
+	animation: osh-breathe 8s ease-in-out infinite;
 	}
 
-	.osh-grid-overlay {
-	position: absolute;
-	inset: 0;
-	background-image:
-		linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
-		linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
-	background-size: 24px 24px;
-	pointer-events: none;
+	@keyframes osh-breathe {
+	0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
+	50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
 	}
 
+	/* Navigation */
 	.osh-nav {
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
-	padding: 16px 40px;
+	padding: 0 40px;
+	height: 64px;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	background: rgba(10, 10, 11, 0.8);
-	backdrop-filter: blur(12px);
-	border-bottom: 1px solid rgba(255,255,255,0.05);
+	background: rgba(10, 10, 11, 0.85);
+	backdrop-filter: blur(16px) saturate(180%);
+	-webkit-backdrop-filter: blur(16px) saturate(180%);
+	border-bottom: 1px solid rgba(255,255,255,0.04);
 	z-index: 100;
+	transition: background 0.3s ease;
 	}
 
 	.osh-nav-brand {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: 10px;
 	text-decoration: none;
 	color: inherit;
 	}
 
 	.osh-nav-logo {
-	width: 32px;
-	height: 32px;
-	background: linear-gradient(135deg, var(--osh-accent) 0%, var(--osh-accent-dark) 100%);
-	border-radius: 8px;
+	width: 30px;
+	height: 30px;
+	background: var(--osh-accent);
+	border-radius: 7px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	box-shadow: 0 0 20px var(--osh-glow);
+	transition: box-shadow 0.3s ease;
+	}
+
+	.osh-nav-brand:hover .osh-nav-logo {
+	box-shadow: 0 0 30px var(--osh-glow-strong);
+	}
+
+	.osh-nav-name {
+	font-family: 'IBM Plex Mono', monospace;
+	font-weight: 600;
+	font-size: 16px;
+	letter-spacing: -0.02em;
 	}
 
 	.osh-nav-links {
 	display: flex;
 	align-items: center;
-	gap: 32px;
+	gap: 8px;
 	}
 
 	.osh-nav-link {
 	color: var(--osh-muted);
 	text-decoration: none;
-	font-size: 14px;
-	transition: color 0.2s ease;
+	font-size: 13px;
+	font-weight: 500;
+	padding: 8px 14px;
+	border-radius: 6px;
+	transition: all 0.2s ease;
+	letter-spacing: 0.01em;
 	}
 
 	.osh-nav-link:hover {
 	color: var(--osh-text);
+	background: rgba(255,255,255,0.04);
 	}
 
+	.osh-nav-cta {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 8px 16px;
+	background: rgba(255,255,255,0.06);
+	border: 1px solid rgba(255,255,255,0.08);
+	color: var(--osh-text);
+	font-size: 13px;
+	font-weight: 500;
+	border-radius: 6px;
+	text-decoration: none;
+	transition: all 0.2s ease;
+	}
+
+	.osh-nav-cta:hover {
+	background: rgba(255,255,255,0.1);
+	border-color: rgba(255,255,255,0.15);
+	}
+
+	/* Mobile menu toggle */
+	.osh-menu-toggle {
+	display: none;
+	background: none;
+	border: none;
+	color: var(--osh-muted);
+	cursor: pointer;
+	padding: 8px;
+	}
+
+	/* Buttons */
 	.osh-btn-primary {
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
 	padding: 14px 28px;
-	background: linear-gradient(135deg, var(--osh-accent) 0%, var(--osh-accent-dark) 100%);
+	background: var(--osh-accent);
 	color: #000;
 	font-weight: 600;
-	font-size: 15px;
+	font-size: 14px;
 	border-radius: 8px;
 	text-decoration: none;
-	transition: all 0.2s ease;
+	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 	border: none;
 	cursor: pointer;
+	letter-spacing: 0.01em;
+	box-shadow: 0 0 0 0 var(--osh-glow);
 	}
 
 	.osh-btn-primary:hover {
 	transform: translateY(-2px);
-	box-shadow: 0 8px 30px rgba(34, 197, 94, 0.3);
+	box-shadow: 0 8px 32px var(--osh-glow-strong), 0 0 0 1px var(--osh-accent);
 	}
 
 	.osh-btn-secondary {
@@ -135,18 +227,19 @@
 	background: transparent;
 	color: var(--osh-text);
 	font-weight: 500;
-	font-size: 15px;
+	font-size: 14px;
 	border-radius: 8px;
 	text-decoration: none;
-	border: 1px solid rgba(255,255,255,0.15);
-	transition: all 0.2s ease;
+	border: 1px solid var(--osh-dim);
+	transition: all 0.25s ease;
 	}
 
 	.osh-btn-secondary:hover {
-	background: rgba(255,255,255,0.05);
-	border-color: rgba(255,255,255,0.25);
+	background: rgba(255,255,255,0.04);
+	border-color: rgba(255,255,255,0.2);
 	}
 
+	/* Hero Section */
 	.osh-hero {
 	position: relative;
 	min-height: 100vh;
@@ -154,7 +247,7 @@
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	padding: 120px 40px 80px;
+	padding: 140px 40px 100px;
 	text-align: center;
 	}
 
@@ -164,17 +257,21 @@
 	max-width: 800px;
 	}
 
+	/* Terminal-style version badge */
 	.osh-badge {
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
-	padding: 8px 16px;
-	background: rgba(34, 197, 94, 0.1);
-	border: 1px solid rgba(34, 197, 94, 0.2);
-	border-radius: 100px;
-	font-size: 13px;
+	padding: 6px 14px;
+	background: rgba(34, 197, 94, 0.08);
+	border: 1px solid rgba(34, 197, 94, 0.15);
+	border-radius: 6px;
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 12px;
+	font-weight: 500;
 	color: var(--osh-accent);
 	margin-bottom: 32px;
+	letter-spacing: 0.02em;
 	}
 
 	.osh-badge-dot {
@@ -182,49 +279,82 @@
 	height: 6px;
 	background: var(--osh-accent);
 	border-radius: 50%;
+	animation: osh-pulse 2s ease-in-out infinite;
+	box-shadow: 0 0 8px var(--osh-glow-strong);
+	}
+
+	@keyframes osh-pulse {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0.4; }
 	}
 
 	.osh-hero h1 {
-	font-size: 64px;
+	font-size: clamp(40px, 6vw, 68px);
 	font-weight: 600;
-	line-height: 1.1;
+	line-height: 1.08;
 	margin-bottom: 24px;
-	letter-spacing: -0.02em;
+	letter-spacing: -0.035em;
+	background: linear-gradient(180deg, #ffffff 0%, #a1a1aa 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
 	}
 
 	.osh-hero-sub {
-	font-size: 20px;
+	font-size: clamp(16px, 2vw, 20px);
 	color: #a1a1aa;
-	line-height: 1.6;
+	line-height: 1.65;
 	margin-bottom: 40px;
-	max-width: 600px;
+	max-width: 560px;
 	margin-left: auto;
 	margin-right: auto;
+	font-weight: 300;
 	}
 
 	.osh-hero-ctas {
 	display: flex;
-	gap: 16px;
+	gap: 12px;
 	justify-content: center;
-	margin-bottom: 40px;
+	margin-bottom: 48px;
 	}
 
+	/* Terminal code block */
 	.osh-code-block {
-	display: flex;
+	display: inline-flex;
 	align-items: center;
 	gap: 16px;
 	padding: 16px 20px;
-	background: rgba(0,0,0,0.4);
-	border: 1px solid rgba(255,255,255,0.15);
+	background: var(--osh-surface);
+	border: 1px solid rgba(255,255,255,0.06);
 	border-radius: 10px;
-	font-family: 'JetBrains Mono', monospace;
-	font-size: 14px;
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 13px;
 	max-width: 480px;
 	margin: 0 auto;
+	position: relative;
+	overflow: hidden;
+	}
+
+	/* Subtle left accent bar */
+	.osh-code-block::before {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	width: 3px;
+	background: var(--osh-accent);
+	border-radius: 3px 0 0 3px;
+	}
+
+	.osh-code-prompt {
+	color: var(--osh-accent);
+	font-weight: 500;
+	user-select: none;
 	}
 
 	.osh-code-block code {
-	color: var(--osh-accent);
+	color: var(--osh-text);
 	flex: 1;
 	text-align: left;
 	}
@@ -233,25 +363,28 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: 36px;
-	height: 36px;
-	background: rgba(255,255,255,0.05);
-	border: 1px solid rgba(255,255,255,0.1);
+	width: 32px;
+	height: 32px;
+	background: rgba(255,255,255,0.04);
+	border: 1px solid rgba(255,255,255,0.06);
 	border-radius: 6px;
 	color: var(--osh-muted);
 	cursor: pointer;
 	transition: all 0.2s ease;
+	flex-shrink: 0;
 	}
 
 	.osh-copy-btn:hover {
-	background: rgba(255,255,255,0.1);
+	background: rgba(255,255,255,0.08);
 	color: var(--osh-text);
 	}
 
+	/* Stats section with monospace numbers */
 	.osh-stats {
-	padding: 60px 40px;
-	border-top: 1px solid rgba(255,255,255,0.05);
-	border-bottom: 1px solid rgba(255,255,255,0.05);
+	padding: 64px 40px;
+	border-top: 1px solid rgba(255,255,255,0.04);
+	border-bottom: 1px solid rgba(255,255,255,0.04);
+	background: var(--osh-surface);
 	}
 
 	.osh-stats-inner {
@@ -261,34 +394,47 @@
 	max-width: 800px;
 	margin: 0 auto;
 	flex-wrap: wrap;
-	gap: 24px;
+	gap: 0;
 	}
 
 	.osh-stat-item {
 	text-align: center;
-	padding: 0 32px;
-	border-right: 1px solid rgba(255,255,255,0.08);
+	padding: 0 40px;
+	position: relative;
 	}
 
-	.osh-stat-item:last-child {
-	border-right: none;
+	.osh-stat-item:not(:last-child)::after {
+	content: "";
+	position: absolute;
+	right: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 1px;
+	height: 40px;
+	background: rgba(255,255,255,0.06);
 	}
 
 	.osh-stat-value {
-	font-family: 'JetBrains Mono', monospace;
+	font-family: 'IBM Plex Mono', monospace;
 	font-size: 28px;
-	font-weight: 500;
-	color: var(--osh-accent);
+	font-weight: 600;
+	color: var(--osh-text);
+	letter-spacing: -0.02em;
 	}
 
 	.osh-stat-label {
-	font-size: 13px;
+	font-size: 12px;
 	color: var(--osh-muted);
-	margin-top: 4px;
+	margin-top: 6px;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	font-weight: 500;
 	}
 
+	/* Feature cards */
 	.osh-features {
-	padding: 100px 40px;
+	padding: 120px 40px;
+	position: relative;
 	}
 
 	.osh-features-inner {
@@ -296,72 +442,109 @@
 	margin: 0 auto;
 	}
 
+	.osh-section-label {
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--osh-accent);
+	text-transform: uppercase;
+	letter-spacing: 0.12em;
+	margin-bottom: 16px;
+	text-align: center;
+	}
+
 	.osh-section-header {
 	text-align: center;
-	margin-bottom: 60px;
+	margin-bottom: 64px;
 	}
 
 	.osh-section-header h2 {
-	font-size: 40px;
+	font-size: clamp(28px, 4vw, 42px);
 	font-weight: 600;
 	margin-bottom: 16px;
+	letter-spacing: -0.025em;
 	}
 
 	.osh-section-header p {
-	font-size: 18px;
+	font-size: 17px;
 	color: var(--osh-muted);
-	max-width: 500px;
+	max-width: 480px;
 	margin: 0 auto;
+	font-weight: 300;
 	}
 
 	.osh-features-grid {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-	gap: 20px;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 16px;
 	}
 
 	.osh-feature-card {
-	padding: 28px;
-	background: rgba(255,255,255,0.02);
-	border: 1px solid rgba(255,255,255,0.06);
+	padding: 32px;
+	background: var(--osh-surface);
+	border: 1px solid rgba(255,255,255,0.04);
 	border-radius: 12px;
-	transition: all 0.3s ease;
+	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+	position: relative;
+	overflow: hidden;
+	}
+
+	.osh-feature-card::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 1px;
+	background: linear-gradient(90deg, transparent, var(--osh-accent), transparent);
+	opacity: 0;
+	transition: opacity 0.35s ease;
 	}
 
 	.osh-feature-card:hover {
-	background: rgba(255,255,255,0.04);
-	border-color: rgba(34, 197, 94, 0.3);
+	background: var(--osh-elevated);
+	border-color: rgba(255,255,255,0.08);
 	transform: translateY(-4px);
 	}
 
+	.osh-feature-card:hover::before {
+	opacity: 0.6;
+	}
+
 	.osh-feature-icon {
-	width: 44px;
-	height: 44px;
+	width: 40px;
+	height: 40px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background: rgba(34, 197, 94, 0.1);
-	border-radius: 10px;
+	background: rgba(34, 197, 94, 0.08);
+	border: 1px solid rgba(34, 197, 94, 0.12);
+	border-radius: 8px;
 	color: var(--osh-accent);
-	margin-bottom: 16px;
+	margin-bottom: 20px;
 	}
 
 	.osh-feature-title {
-	font-size: 17px;
+	font-size: 16px;
 	font-weight: 600;
 	color: #fafafa;
 	margin-bottom: 8px;
+	letter-spacing: -0.01em;
 	}
 
 	.osh-feature-desc {
 	font-size: 14px;
 	color: #a1a1aa;
 	line-height: 1.6;
+	font-weight: 300;
 	}
 
+	/* Social proof */
 	.osh-social-proof {
-	padding: 80px 40px;
-	background: rgba(255,255,255,0.01);
+	padding: 100px 40px;
+	background: var(--osh-surface);
+	border-top: 1px solid rgba(255,255,255,0.04);
+	border-bottom: 1px solid rgba(255,255,255,0.04);
 	}
 
 	.osh-social-proof-inner {
@@ -372,86 +555,258 @@
 	.osh-logos {
 	display: flex;
 	justify-content: center;
-	gap: 40px;
-	margin-bottom: 60px;
+	gap: 48px;
+	margin-bottom: 64px;
 	flex-wrap: wrap;
 	}
 
 	.osh-logo-item {
-	padding: 12px 24px;
-	background: rgba(0,0,0,0.4);
-	border-radius: 8px;
-	font-size: 14px;
+	padding: 10px 20px;
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 13px;
 	font-weight: 500;
-	color: #52525b;
+	color: var(--osh-dim);
+	letter-spacing: 0.02em;
+	transition: color 0.3s ease;
+	}
+
+	.osh-logo-item:hover {
+	color: var(--osh-muted);
 	}
 
 	.osh-testimonial {
-	background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.02) 100%);
-	border: 1px solid rgba(34, 197, 94, 0.15);
+	background: var(--osh-bg);
+	border: 1px solid rgba(255,255,255,0.06);
 	border-radius: 16px;
-	padding: 40px;
-	max-width: 700px;
+	padding: 48px;
+	max-width: 680px;
 	margin: 0 auto;
+	position: relative;
+	}
+
+	.osh-testimonial::before {
+	content: "";
+	position: absolute;
+	inset: -1px;
+	border-radius: 16px;
+	background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), transparent 60%);
+	z-index: -1;
+	pointer-events: none;
 	}
 
 	.osh-testimonial-quote {
 	font-size: 20px;
-	line-height: 1.6;
+	line-height: 1.65;
 	color: #fafafa;
-	margin-bottom: 24px;
+	margin-bottom: 28px;
+	font-weight: 300;
+	font-style: italic;
 	}
 
 	.osh-testimonial-author {
 	font-weight: 600;
 	color: var(--osh-text);
+	font-size: 15px;
 	}
 
 	.osh-testimonial-role {
-	font-size: 14px;
+	font-size: 13px;
 	color: var(--osh-muted);
 	}
 
+	/* README */
 	.osh-readme {
-	padding: 80px 40px;
+	padding: 100px 40px;
 	max-width: 900px;
 	margin: 0 auto;
 	}
 
 	.osh-readme-content {
-	background: rgba(255,255,255,0.02);
-	border: 1px solid rgba(255,255,255,0.06);
+	background: var(--osh-surface);
+	border: 1px solid rgba(255,255,255,0.04);
 	border-radius: 12px;
-	padding: 40px;
+	padding: 48px;
 	}
 
-	.osh-cta-section {
-	padding: 100px 40px;
+	/* Pricing */
+	.osh-pricing {
+	padding: 120px 40px;
+	}
+
+	.osh-pricing-inner {
+	max-width: 1100px;
+	margin: 0 auto;
+	}
+
+	.osh-pricing-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	gap: 16px;
+	margin-top: 64px;
+	}
+
+	.osh-pricing-card {
+	background: var(--osh-surface);
+	border: 1px solid rgba(255,255,255,0.04);
+	border-radius: 14px;
+	padding: 36px;
+	position: relative;
+	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+	}
+
+	.osh-pricing-card:hover {
+	border-color: rgba(255,255,255,0.1);
+	transform: translateY(-4px);
+	}
+
+	.osh-pricing-card.featured {
+	border-color: rgba(34, 197, 94, 0.25);
+	background: linear-gradient(180deg, rgba(34, 197, 94, 0.04) 0%, var(--osh-surface) 100%);
+	}
+
+	.osh-pricing-badge {
+	position: absolute;
+	top: -11px;
+	left: 50%;
+	transform: translateX(-50%);
+	padding: 5px 14px;
+	background: var(--osh-accent);
+	color: #000;
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 11px;
+	font-weight: 600;
+	border-radius: 6px;
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+	}
+
+	.osh-pricing-name {
+	font-size: 18px;
+	font-weight: 600;
+	color: #fafafa;
+	margin-bottom: 8px;
+	}
+
+	.osh-pricing-price {
+	font-family: 'IBM Plex Mono', monospace;
+	font-size: 44px;
+	font-weight: 600;
+	color: var(--osh-text);
+	line-height: 1;
+	margin-bottom: 4px;
+	letter-spacing: -0.03em;
+	}
+
+	.osh-pricing-period {
+	font-size: 13px;
+	color: var(--osh-muted);
+	margin-bottom: 28px;
+	}
+
+	.osh-pricing-features {
+	list-style: none;
+	padding: 0;
+	margin: 0 0 32px 0;
+	}
+
+	.osh-pricing-features li {
+	padding: 10px 0;
+	border-bottom: 1px solid rgba(255,255,255,0.04);
+	font-size: 13px;
+	color: #a1a1aa;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	}
+
+	.osh-pricing-features li::before {
+	content: "→";
+	font-family: 'IBM Plex Mono', monospace;
+	color: var(--osh-accent);
+	font-size: 12px;
+	flex-shrink: 0;
+	}
+
+	.osh-pricing-features li:last-child {
+	border-bottom: none;
+	}
+
+	.osh-pricing-cta {
+	display: block;
+	width: 100%;
+	padding: 13px 24px;
 	text-align: center;
-	background: linear-gradient(180deg, transparent 0%, rgba(34, 197, 94, 0.03) 100%);
-	border-top: 1px solid rgba(255,255,255,0.05);
+	background: rgba(255,255,255,0.04);
+	color: var(--osh-text);
+	font-weight: 600;
+	font-size: 13px;
+	border-radius: 8px;
+	text-decoration: none;
+	border: 1px solid rgba(255,255,255,0.06);
+	transition: all 0.25s ease;
+	letter-spacing: 0.01em;
+	}
+
+	.osh-pricing-cta:hover {
+	background: rgba(255,255,255,0.08);
+	border-color: rgba(255,255,255,0.12);
+	}
+
+	.osh-pricing-card.featured .osh-pricing-cta {
+	background: var(--osh-accent);
+	color: #000;
+	border: none;
+	}
+
+	.osh-pricing-card.featured .osh-pricing-cta:hover {
+	transform: translateY(-2px);
+	box-shadow: 0 8px 30px var(--osh-glow-strong);
+	}
+
+	/* CTA section */
+	.osh-cta-section {
+	padding: 120px 40px;
+	text-align: center;
+	position: relative;
+	}
+
+	.osh-cta-section::before {
+	content: "";
+	position: absolute;
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 120%;
+	height: 60%;
+	background: radial-gradient(ellipse at center bottom, var(--osh-glow) 0%, transparent 60%);
+	pointer-events: none;
 	}
 
 	.osh-cta-inner {
 	max-width: 600px;
 	margin: 0 auto;
+	position: relative;
+	z-index: 1;
 	}
 
 	.osh-cta-section h2 {
-	font-size: 44px;
+	font-size: clamp(28px, 4vw, 44px);
 	font-weight: 600;
 	margin-bottom: 16px;
+	letter-spacing: -0.025em;
 	}
 
 	.osh-cta-section p {
-	font-size: 18px;
+	font-size: 17px;
 	color: var(--osh-muted);
-	margin-bottom: 32px;
+	margin-bottom: 36px;
+	font-weight: 300;
 	}
 
+	/* Footer */
 	.osh-footer {
-	padding: 40px;
-	border-top: 1px solid rgba(255,255,255,0.05);
+	padding: 32px 40px;
+	border-top: 1px solid rgba(255,255,255,0.04);
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -463,29 +818,33 @@
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	color: #52525b;
 	}
 
 	.osh-footer-logo {
-	width: 24px;
-	height: 24px;
-	background: rgba(34, 197, 94, 0.2);
-	border-radius: 6px;
+	width: 22px;
+	height: 22px;
+	background: rgba(34, 197, 94, 0.15);
+	border-radius: 5px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	}
 
+	.osh-footer-text {
+	font-size: 13px;
+	color: var(--osh-dim);
+	}
+
 	.osh-footer-links {
 	display: flex;
-	gap: 32px;
+	gap: 24px;
 	flex-wrap: wrap;
 	}
 
 	.osh-footer-link {
 	color: var(--osh-muted);
 	text-decoration: none;
-	font-size: 14px;
+	font-size: 13px;
 	transition: color 0.2s ease;
 	}
 
@@ -495,165 +854,42 @@
 
 	.osh-footer-social {
 	display: flex;
-	gap: 16px;
+	gap: 12px;
 	}
 
 	.osh-footer-social a {
-	color: var(--osh-muted);
+	color: var(--osh-dim);
 	transition: color 0.2s ease;
+	padding: 4px;
 	}
 
 	.osh-footer-social a:hover {
 	color: var(--osh-text);
 	}
 
-	/* Pricing Section */
-	.osh-pricing {
-	padding: 100px 40px;
-	}
-
-	.osh-pricing-inner {
-	max-width: 1100px;
-	margin: 0 auto;
-	}
-
-	.osh-pricing-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-	gap: 24px;
-	margin-top: 60px;
-	}
-
-	.osh-pricing-card {
-	background: rgba(255,255,255,0.02);
-	border: 1px solid rgba(255,255,255,0.08);
-	border-radius: 16px;
-	padding: 32px;
-	position: relative;
-	transition: all 0.3s ease;
-	}
-
-	.osh-pricing-card:hover {
-	border-color: rgba(255,255,255,0.15);
-	transform: translateY(-4px);
-	}
-
-	.osh-pricing-card.featured {
-	background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.02) 100%);
-	border-color: rgba(34, 197, 94, 0.3);
-	}
-
-	.osh-pricing-badge {
-	position: absolute;
-	top: -12px;
-	left: 50%;
-	transform: translateX(-50%);
-	padding: 6px 16px;
-	background: linear-gradient(135deg, var(--osh-accent) 0%, var(--osh-accent-dark) 100%);
-	color: #000;
-	font-size: 12px;
-	font-weight: 600;
-	border-radius: 100px;
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-	}
-
-	.osh-pricing-name {
-	font-size: 20px;
-	font-weight: 600;
-	color: #fafafa;
-	margin-bottom: 8px;
-	}
-
-	.osh-pricing-price {
-	font-size: 48px;
-	font-weight: 600;
-	color: var(--osh-text);
-	line-height: 1;
-	margin-bottom: 4px;
-	}
-
-	.osh-pricing-period {
-	font-size: 14px;
-	color: var(--osh-muted);
-	margin-bottom: 24px;
-	}
-
-	.osh-pricing-features {
-	list-style: none;
-	padding: 0;
-	margin: 0 0 32px 0;
-	}
-
-	.osh-pricing-features li {
-	padding: 10px 0;
-	border-bottom: 1px solid rgba(255,255,255,0.05);
-	font-size: 14px;
-	color: #a1a1aa;
-	display: flex;
-	align-items: center;
-	gap: 10px;
-	}
-
-	.osh-pricing-features li::before {
-	content: "";
-	width: 16px;
-	height: 16px;
-	background: rgba(34, 197, 94, 0.15);
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-	}
-
-	.osh-pricing-features li:last-child {
-	border-bottom: none;
-	}
-
-	.osh-pricing-cta {
-	display: block;
-	width: 100%;
-	padding: 14px 24px;
-	text-align: center;
-	background: rgba(255,255,255,0.05);
-	color: var(--osh-text);
-	font-weight: 600;
-	font-size: 14px;
-	border-radius: 8px;
-	text-decoration: none;
-	border: 1px solid rgba(255,255,255,0.1);
-	transition: all 0.2s ease;
-	}
-
-	.osh-pricing-cta:hover {
-	background: rgba(255,255,255,0.1);
-	}
-
-	.osh-pricing-card.featured .osh-pricing-cta {
-	background: linear-gradient(135deg, var(--osh-accent) 0%, var(--osh-accent-dark) 100%);
-	color: #000;
-	border: none;
-	}
-
-	.osh-pricing-card.featured .osh-pricing-cta:hover {
-	transform: translateY(-2px);
-	box-shadow: 0 8px 30px rgba(34, 197, 94, 0.3);
-	}
-
+	/* Responsive */
 	@media (max-width: 768px) {
-	.osh-hero h1 { font-size: 40px; }
-	.osh-hero { padding: 100px 24px 60px; }
-	.osh-features, .osh-social-proof, .osh-cta-section, .osh-pricing { padding: 60px 24px; }
-	.osh-pricing-price { font-size: 36px; }
-	.osh-stats { padding: 40px 24px; }
-	.osh-stat-item { border-right: none; padding: 16px 0; }
+	.osh-nav { padding: 0 20px; }
+	.osh-nav-links { display: none; }
+	.osh-menu-toggle { display: flex; }
+	.osh-hero { padding: 120px 24px 80px; }
 	.osh-hero-ctas { flex-direction: column; align-items: center; }
-	.osh-nav { padding: 12px 20px; }
-	.osh-nav-links { gap: 16px; }
-	.osh-section-header h2 { font-size: 32px; }
-	.osh-cta-section h2 { font-size: 32px; }
-	.osh-footer { flex-direction: column; text-align: center; }
+	.osh-btn-primary, .osh-btn-secondary { width: 100%; justify-content: center; }
+	.osh-features, .osh-social-proof, .osh-cta-section, .osh-pricing { padding: 80px 24px; }
+	.osh-stats { padding: 48px 24px; }
+	.osh-stat-item { padding: 16px 24px; }
+	.osh-stat-item:not(:last-child)::after { display: none; }
+	.osh-stats-inner { flex-direction: column; }
+	.osh-features-grid { grid-template-columns: 1fr; }
+	.osh-footer { flex-direction: column; text-align: center; padding: 24px; }
+	.osh-testimonial { padding: 32px 24px; }
+	.osh-code-block { font-size: 12px; }
+	}
+
+	@media (max-width: 480px) {
+	.osh-hero h1 { font-size: 32px; }
+	.osh-section-header h2 { font-size: 28px; }
+	.osh-pricing-price { font-size: 36px; }
 	}
 </style>
 
@@ -662,13 +898,13 @@
 	<nav class="osh-nav">
 	<a href="/" class="osh-nav-brand">
 		{{if .Config.Brand.LogoURL}}
-		<img src="{{.Config.Brand.LogoURL}}" alt="{{.Config.Brand.Name}}" style="height: 32px;">
+		<img src="{{.Config.Brand.LogoURL}}" alt="{{.Config.Brand.Name}}" style="height: 30px;">
 		{{else}}
 		<div class="osh-nav-logo">
-			{{svg "octicon-zap" 16}}
+			{{svg "octicon-zap" 14}}
 		</div>
 		{{end}}
-		<span style="font-weight: 600; font-size: 18px;">{{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}</span>
+		<span class="osh-nav-name">{{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}</span>
 	</a>
 	<div class="osh-nav-links">
 		{{if .Config.Footer.Links}}
@@ -683,31 +919,33 @@
 		{{if .Config.ValueProps}}<a href="#value-props" class="osh-nav-link">Why Us</a>{{end}}
 		{{if .Config.Features}}<a href="#features" class="osh-nav-link">Features</a>{{end}}
 		{{if .Config.Pricing.Plans}}<a href="#pricing" class="osh-nav-link">Pricing</a>{{end}}
-		<a href="{{.Repository.Link}}" class="osh-btn-secondary" style="padding: 10px 20px;">
-		<img src="/assets/img/gitcaddy-icon.svg" width="18" height="18" alt="GitCaddy">
+		<a href="{{.Repository.Link}}" class="osh-nav-cta">
+		<img src="/assets/img/gitcaddy-icon.svg" width="16" height="16" alt="GitCaddy">
 		Repository
 		</a>
 	</div>
+	<button class="osh-menu-toggle" onclick="this.parentElement.querySelector('.osh-nav-links').style.display=this.parentElement.querySelector('.osh-nav-links').style.display==='flex'?'none':'flex'">
+		{{svg "octicon-three-bars" 20}}
+	</button>
 	</nav>
 
 	<!-- Hero Section -->
 	<section class="osh-hero">
 	<div class="osh-hero-gradient"></div>
-	<div class="osh-grid-overlay"></div>
 
 	<div class="osh-hero-content">
-		<div class="osh-badge">
+		<div class="osh-badge osh-reveal visible">
 		<span class="osh-badge-dot"></span>
 		{{if .LatestRelease}}v{{.LatestRelease.TagName}} released{{else}}Open Source{{end}}
 		</div>
 
-		<h1>{{if .Config.Hero.Headline}}{{.Config.Hero.Headline}}{{else}}{{.Repository.Name}}{{end}}</h1>
+		<h1 class="osh-reveal visible osh-reveal-delay-1">{{if .Config.Hero.Headline}}{{.Config.Hero.Headline}}{{else}}{{.Repository.Name}}{{end}}</h1>
 
-		<p class="osh-hero-sub">
+		<p class="osh-hero-sub osh-reveal visible osh-reveal-delay-2">
 		{{if .Config.Hero.Subheadline}}{{.Config.Hero.Subheadline}}{{else}}{{.Repository.Description}}{{end}}
 		</p>
 
-		<div class="osh-hero-ctas">
+		<div class="osh-hero-ctas osh-reveal visible osh-reveal-delay-3">
 		{{if .Config.Hero.PrimaryCTA.Label}}
 			<a href="{{.Config.Hero.PrimaryCTA.URL}}" class="osh-btn-primary">
 			{{.Config.Hero.PrimaryCTA.Label}}
@@ -722,23 +960,23 @@
 
 		{{if .Config.Hero.SecondaryCTA.Label}}
 			<a href="{{.Config.Hero.SecondaryCTA.URL}}" class="osh-btn-secondary">
-			<img src="/assets/img/gitcaddy-icon.svg" width="18" height="18" alt="GitCaddy">
+			<img src="/assets/img/gitcaddy-icon.svg" width="16" height="16" alt="GitCaddy">
 			{{.Config.Hero.SecondaryCTA.Label}}
 			</a>
 		{{else}}
 			<a href="{{.Repository.Link}}" class="osh-btn-secondary">
-			<img src="/assets/img/gitcaddy-icon.svg" width="18" height="18" alt="GitCaddy">
+			<img src="/assets/img/gitcaddy-icon.svg" width="16" height="16" alt="GitCaddy">
 			View Source
 			</a>
 		{{end}}
 		</div>
 
 		{{if .Config.Hero.CodeExample}}
-		<div class="osh-code-block">
-			<span style="color: #71717a;">$</span>
+		<div class="osh-code-block osh-reveal visible osh-reveal-delay-4">
+			<span class="osh-code-prompt">$</span>
 			<code id="install-cmd">{{.Config.Hero.CodeExample}}</code>
 			<button class="osh-copy-btn" onclick="navigator.clipboard.writeText(document.getElementById('install-cmd').textContent)">
-			{{svg "octicon-copy" 16}}
+			{{svg "octicon-copy" 14}}
 			</button>
 		</div>
 		{{end}}
@@ -748,7 +986,7 @@
 	<!-- Stats Section -->
 	{{if or .Config.Stats (gt .NumStars 0)}}
 	<section class="osh-stats">
-	<div class="osh-stats-inner">
+	<div class="osh-stats-inner osh-reveal">
 		{{if .Config.Stats}}
 		{{range .Config.Stats}}
 			<div class="osh-stat-item">
@@ -780,15 +1018,16 @@
 	{{if .Config.ValueProps}}
 	<section class="osh-features" id="value-props">
 	<div class="osh-features-inner">
-		<div class="osh-section-header">
+		<div class="osh-section-header osh-reveal">
+		<div class="osh-section-label">Why choose us</div>
 		<h2>{{if .Config.Brand.Name}}Why {{.Config.Brand.Name}}?{{else}}Why Choose Us{{end}}</h2>
 		<p>Everything you need to get started quickly.</p>
 		</div>
 		<div class="osh-features-grid">
 		{{range .Config.ValueProps}}
-			<div class="osh-feature-card">
+			<div class="osh-feature-card osh-reveal">
 			<div class="osh-feature-icon">
-				{{svg (printf "octicon-%s" (or .Icon "check")) 22}}
+				{{svg (printf "octicon-%s" (or .Icon "check")) 20}}
 			</div>
 			<h3 class="osh-feature-title">{{.Title}}</h3>
 			<p class="osh-feature-desc">{{.Description}}</p>
@@ -803,15 +1042,16 @@
 	{{if .Config.Features}}
 	<section class="osh-features" id="features" style="padding-top: 40px;">
 	<div class="osh-features-inner">
-		<div class="osh-section-header">
+		<div class="osh-section-header osh-reveal">
+		<div class="osh-section-label">Capabilities</div>
 		<h2>Features</h2>
 		<p>Powerful capabilities at your fingertips.</p>
 		</div>
 		<div class="osh-features-grid">
 		{{range .Config.Features}}
-			<div class="osh-feature-card">
+			<div class="osh-feature-card osh-reveal">
 			<div class="osh-feature-icon">
-				{{svg (printf "octicon-%s" (or .Icon "zap")) 22}}
+				{{svg (printf "octicon-%s" (or .Icon "zap")) 20}}
 			</div>
 			<h3 class="osh-feature-title">{{.Title}}</h3>
 			<p class="osh-feature-desc">{{.Description}}</p>
@@ -827,7 +1067,7 @@
 	<section class="osh-social-proof">
 	<div class="osh-social-proof-inner">
 		{{if .Config.SocialProof.Logos}}
-		<div class="osh-logos">
+		<div class="osh-logos osh-reveal">
 			{{range .Config.SocialProof.Logos}}
 			<div class="osh-logo-item">{{.}}</div>
 			{{end}}
@@ -836,7 +1076,7 @@
 		{{if .Config.SocialProof.Testimonials}}
 		<div class="osh-testimonials-container">
 		{{range .Config.SocialProof.Testimonials}}
-		<div class="osh-testimonial" style="display: none;">
+		<div class="osh-testimonial osh-reveal" style="display: none;">
 			<p class="osh-testimonial-quote">"{{.Quote}}"</p>
 			<div>
 			<div class="osh-testimonial-author">{{.Author}}</div>
@@ -863,13 +1103,14 @@
 	{{if .Config.Pricing.Plans}}
 	<section class="osh-pricing" id="pricing">
 	<div class="osh-pricing-inner">
-		<div class="osh-section-header">
+		<div class="osh-section-header osh-reveal">
+		<div class="osh-section-label">Pricing</div>
 		<h2>{{if .Config.Pricing.Headline}}{{.Config.Pricing.Headline}}{{else}}Pricing{{end}}</h2>
 		<p>{{if .Config.Pricing.Subheadline}}{{.Config.Pricing.Subheadline}}{{else}}Choose the plan that works for you{{end}}</p>
 		</div>
 		<div class="osh-pricing-grid">
 		{{range .Config.Pricing.Plans}}
-		<div class="osh-pricing-card{{if .Featured}} featured{{end}}">
+		<div class="osh-pricing-card{{if .Featured}} featured{{end}} osh-reveal">
 			{{if .Featured}}<span class="osh-pricing-badge">Popular</span>{{end}}
 			<div class="osh-pricing-name">{{.Name}}</div>
 			<div class="osh-pricing-price">{{.Price}}</div>
@@ -890,12 +1131,12 @@
 	<!-- CTA Section -->
 	{{if .Config.CTASection.Headline}}
 	<section class="osh-cta-section">
-	<div class="osh-cta-inner">
+	<div class="osh-cta-inner osh-reveal">
 		<h2>{{.Config.CTASection.Headline}}</h2>
 		{{if .Config.CTASection.Subheadline}}
 		<p>{{.Config.CTASection.Subheadline}}</p>
 		{{end}}
-		<a href="{{if .Config.CTASection.Button.URL}}{{.Config.CTASection.Button.URL}}{{else}}{{.Repository.Link}}{{end}}" class="osh-btn-primary" style="padding: 16px 32px; font-size: 16px;">
+		<a href="{{if .Config.CTASection.Button.URL}}{{.Config.CTASection.Button.URL}}{{else}}{{.Repository.Link}}{{end}}" class="osh-btn-primary" style="padding: 16px 32px; font-size: 15px;">
 		{{if .Config.CTASection.Button.Label}}{{.Config.CTASection.Button.Label}}{{else}}Get Started{{end}}
 		{{svg "octicon-arrow-right" 16}}
 		</a>
@@ -906,19 +1147,19 @@
 	<!-- Footer -->
 	<footer class="osh-footer">
 	<div class="osh-footer-brand">
-		<div class="osh-footer-logo">{{svg "octicon-zap" 14}}</div>
-		<span style="font-size: 14px;">{{if .Config.Footer.Copyright}}{{.Config.Footer.Copyright}}{{else}}&copy; <script>document.write(new Date().getFullYear())</script> {{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}{{end}}</span>
+		<div class="osh-footer-logo">{{svg "octicon-zap" 12}}</div>
+		<span class="osh-footer-text">{{if .Config.Footer.Copyright}}{{.Config.Footer.Copyright}}{{else}}&copy; <script>document.write(new Date().getFullYear())</script> {{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}{{end}}</span>
 	</div>
 	{{if .Config.Footer.Social}}
 	<div class="osh-footer-social">
 		{{range .Config.Footer.Social}}
 		<a href="{{.URL}}" title="{{.Platform}}">
-			{{if eq .Platform "twitter"}}{{svg "octicon-mention" 18}}
-			{{else if eq .Platform "github"}}{{svg "octicon-mark-github" 18}}
-			{{else if eq .Platform "discord"}}{{svg "octicon-comment-discussion" 18}}
-			{{else if eq .Platform "linkedin"}}{{svg "octicon-briefcase" 18}}
-			{{else if eq .Platform "youtube"}}{{svg "octicon-video" 18}}
-			{{else}}{{svg "octicon-link-external" 18}}{{end}}
+			{{if eq .Platform "twitter"}}{{svg "octicon-mention" 16}}
+			{{else if eq .Platform "github"}}{{svg "octicon-mark-github" 16}}
+			{{else if eq .Platform "discord"}}{{svg "octicon-comment-discussion" 16}}
+			{{else if eq .Platform "linkedin"}}{{svg "octicon-briefcase" 16}}
+			{{else if eq .Platform "youtube"}}{{svg "octicon-video" 16}}
+			{{else}}{{svg "octicon-link-external" 16}}{{end}}
 		</a>
 		{{end}}
 	</div>
@@ -938,4 +1179,21 @@
 	</footer>
 </div>
 
+<!-- Scroll reveal observer -->
+<script>
+(function() {
+	var reveals = document.querySelectorAll('.osh-reveal:not(.visible)');
+	if (!reveals.length) return;
+	var observer = new IntersectionObserver(function(entries) {
+		entries.forEach(function(entry) {
+			if (entry.isIntersecting) {
+				entry.target.classList.add('visible');
+				observer.unobserve(entry.target);
+			}
+		});
+	}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+	reveals.forEach(function(el) { observer.observe(el); });
+})();
+</script>
+
 {{template "pages/base_footer" .}}
diff --git a/templates/pages/saas-conversion.tmpl b/templates/pages/saas-conversion.tmpl
index 96b6341d60..f8e9393fc7 100644
--- a/templates/pages/saas-conversion.tmpl
+++ b/templates/pages/saas-conversion.tmpl
@@ -1,593 +1,918 @@
 {{template "pages/base_head" .}}
 <style>
-	@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
+	@import url('https://fonts.googleapis.com/css2?family=General+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
 
 	:root {
-	--saas-bg: #fafbfc;
-	--saas-text: #1a1a2e;
-	--saas-muted: #64748b;
-	--saas-light: #94a3b8;
-	--saas-border: #e5e7eb;
-	--saas-primary: {{if .Config.Theme.PrimaryColor}}{{.Config.Theme.PrimaryColor}}{{else}}#6366f1{{end}};
-	--saas-primary-dark: {{if .Config.Theme.AccentColor}}{{.Config.Theme.AccentColor}}{{else}}#8b5cf6{{end}};
+	--gm-bg: #0a0a12;
+	--gm-surface: rgba(255, 255, 255, 0.03);
+	--gm-glass: rgba(255, 255, 255, 0.06);
+	--gm-glass-border: rgba(255, 255, 255, 0.08);
+	--gm-text: #f0eef5;
+	--gm-muted: rgba(240, 238, 245, 0.6);
+	--gm-light: rgba(240, 238, 245, 0.35);
+	--gm-primary: {{if .Config.Theme.PrimaryColor}}{{.Config.Theme.PrimaryColor}}{{else}}#7dd3fc{{end}};
+	--gm-secondary: {{if .Config.Theme.AccentColor}}{{.Config.Theme.AccentColor}}{{else}}#c4b5fd{{end}};
+	--gm-aurora-1: #7dd3fc;
+	--gm-aurora-2: #a78bfa;
+	--gm-aurora-3: #34d399;
 	}
 
-	.saas-page {
+	/* Scroll reveal */
+	.gm-reveal {
+	opacity: 0;
+	transform: translateY(28px);
+	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	.gm-reveal.visible {
+	opacity: 1;
+	transform: translateY(0);
+	}
+	.gm-reveal-delay-1 { transition-delay: 0.12s; }
+	.gm-reveal-delay-2 { transition-delay: 0.24s; }
+	.gm-reveal-delay-3 { transition-delay: 0.36s; }
+
+	.gm-page {
 	min-height: 100vh;
-	background: var(--saas-bg);
-	color: var(--saas-text);
-	font-family: 'DM Sans', -apple-system, sans-serif;
+	background: var(--gm-bg);
+	color: var(--gm-text);
+	font-family: 'General Sans', -apple-system, sans-serif;
+	line-height: 1.6;
+	overflow-x: hidden;
+	position: relative;
 	}
 
-	.saas-nav {
+	/* Aurora background */
+	.gm-aurora {
 	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	padding: 16px 48px;
+	inset: 0;
+	pointer-events: none;
+	z-index: 0;
+	overflow: hidden;
+	}
+
+	.gm-aurora-orb {
+	position: absolute;
+	border-radius: 50%;
+	filter: blur(120px);
+	opacity: 0.3;
+	animation: gm-drift 20s ease-in-out infinite;
+	}
+
+	.gm-aurora-orb-1 {
+	width: 600px;
+	height: 600px;
+	background: var(--gm-aurora-1);
+	top: -10%;
+	left: -10%;
+	opacity: 0.15;
+	}
+
+	.gm-aurora-orb-2 {
+	width: 500px;
+	height: 500px;
+	background: var(--gm-aurora-2);
+	top: 30%;
+	right: -15%;
+	opacity: 0.12;
+	animation-delay: -7s;
+	animation-duration: 25s;
+	}
+
+	.gm-aurora-orb-3 {
+	width: 400px;
+	height: 400px;
+	background: var(--gm-aurora-3);
+	bottom: 10%;
+	left: 20%;
+	opacity: 0.1;
+	animation-delay: -14s;
+	animation-duration: 22s;
+	}
+
+	@keyframes gm-drift {
+	0%, 100% { transform: translate(0, 0) scale(1); }
+	25% { transform: translate(40px, -30px) scale(1.05); }
+	50% { transform: translate(-20px, 40px) scale(0.95); }
+	75% { transform: translate(30px, 20px) scale(1.02); }
+	}
+
+	/* Noise overlay */
+	.gm-page::before {
+	content: '';
+	position: fixed;
+	inset: 0;
+	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
+	pointer-events: none;
+	z-index: 1;
+	}
+
+	/* Glass panel mixin */
+	.gm-glass-panel {
+	background: var(--gm-glass);
+	backdrop-filter: blur(24px);
+	-webkit-backdrop-filter: blur(24px);
+	border: 1px solid var(--gm-glass-border);
+	border-radius: 20px;
+	}
+
+	/* --- Navigation --- */
+	.gm-nav {
+	position: fixed;
+	top: 16px;
+	left: 16px;
+	right: 16px;
+	padding: 14px 28px;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	background: rgba(250, 251, 252, 0.9);
-	backdrop-filter: blur(12px);
+	background: rgba(10, 10, 18, 0.6);
+	backdrop-filter: blur(20px);
+	-webkit-backdrop-filter: blur(20px);
+	border: 1px solid var(--gm-glass-border);
+	border-radius: 16px;
 	z-index: 100;
 	}
 
-	.saas-nav-brand {
+	.gm-nav-brand {
 	display: flex;
 	align-items: center;
 	gap: 10px;
 	text-decoration: none;
 	}
 
-	.saas-nav-logo {
-	width: 36px;
-	height: 36px;
-	background: linear-gradient(135deg, var(--saas-primary) 0%, var(--saas-primary-dark) 100%);
+	.gm-nav-logo {
+	width: 32px;
+	height: 32px;
+	background: linear-gradient(135deg, var(--gm-aurora-1) 0%, var(--gm-aurora-2) 100%);
 	border-radius: 10px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: white;
+	color: var(--gm-bg);
 	}
 
-	.saas-nav-links {
+	.gm-nav-name {
+	font-weight: 700;
+	font-size: 18px;
+	color: var(--gm-text);
+	}
+
+	.gm-nav-links {
 	display: flex;
 	align-items: center;
-	gap: 36px;
+	gap: 32px;
 	}
 
-	.saas-nav-link {
-	color: var(--saas-muted);
+	.gm-nav-link {
+	color: var(--gm-muted);
 	text-decoration: none;
 	font-weight: 500;
-	font-size: 15px;
-	transition: color 0.2s ease;
+	font-size: 14px;
+	transition: color 0.3s ease;
 	}
 
-	.saas-nav-link:hover {
-	color: var(--saas-text);
+	.gm-nav-link:hover {
+	color: var(--gm-text);
 	}
 
-	.saas-nav-repo {
+	.gm-nav-repo {
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
-	color: var(--saas-muted);
+	color: var(--gm-muted);
 	text-decoration: none;
 	font-weight: 500;
-	font-size: 15px;
-	transition: color 0.2s ease;
+	font-size: 14px;
+	transition: color 0.3s ease;
 	}
 
-	.saas-nav-repo:hover {
-	color: var(--saas-text);
+	.gm-nav-repo:hover {
+	color: var(--gm-text);
 	}
 
-	.saas-btn-primary {
+	/* Mobile toggle */
+	.gm-mobile-toggle {
+	display: none;
+	background: var(--gm-glass);
+	border: 1px solid var(--gm-glass-border);
+	border-radius: 8px;
+	padding: 8px 14px;
+	cursor: pointer;
+	color: var(--gm-text);
+	font-family: 'General Sans', sans-serif;
+	font-size: 13px;
+	font-weight: 500;
+	}
+
+	.gm-mobile-menu {
+	display: none;
+	position: fixed;
+	top: 80px;
+	left: 16px;
+	right: 16px;
+	background: rgba(10, 10, 18, 0.9);
+	backdrop-filter: blur(24px);
+	-webkit-backdrop-filter: blur(24px);
+	border: 1px solid var(--gm-glass-border);
+	border-radius: 16px;
+	padding: 24px;
+	z-index: 99;
+	flex-direction: column;
+	gap: 16px;
+	}
+
+	.gm-mobile-menu.open {
+	display: flex;
+	}
+
+	/* --- Buttons --- */
+	.gm-btn-primary {
 	display: inline-flex;
 	align-items: center;
 	gap: 10px;
-	padding: 16px 32px;
-	background: linear-gradient(135deg, var(--saas-primary) 0%, var(--saas-primary-dark) 100%);
-	color: white;
+	padding: 14px 28px;
+	background: linear-gradient(135deg, var(--gm-aurora-1) 0%, var(--gm-aurora-2) 100%);
+	color: var(--gm-bg);
 	font-weight: 600;
-	font-size: 16px;
+	font-size: 15px;
 	border-radius: 12px;
 	text-decoration: none;
-	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-	box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
+	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 	border: none;
 	cursor: pointer;
+	position: relative;
+	overflow: hidden;
 	}
 
-	.saas-btn-primary:hover {
-	transform: translateY(-3px);
-	box-shadow: 0 8px 25px rgba(99, 102, 241, 0.45);
+	.gm-btn-primary::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(135deg, var(--gm-aurora-2) 0%, var(--gm-aurora-3) 100%);
+	opacity: 0;
+	transition: opacity 0.4s ease;
+	border-radius: 12px;
 	}
 
-	.saas-btn-secondary {
+	.gm-btn-primary:hover {
+	transform: translateY(-2px);
+	box-shadow: 0 8px 32px rgba(125, 211, 252, 0.25);
+	}
+
+	.gm-btn-primary:hover::before {
+	opacity: 1;
+	}
+
+	.gm-btn-primary span {
+	position: relative;
+	z-index: 1;
 	display: inline-flex;
 	align-items: center;
 	gap: 10px;
-	padding: 16px 32px;
-	background: white;
-	color: var(--saas-text);
+	}
+
+	.gm-btn-secondary {
+	display: inline-flex;
+	align-items: center;
+	gap: 10px;
+	padding: 14px 28px;
+	background: var(--gm-glass);
+	color: var(--gm-text);
 	font-weight: 600;
-	font-size: 16px;
+	font-size: 15px;
 	border-radius: 12px;
 	text-decoration: none;
-	border: 2px solid var(--saas-border);
+	border: 1px solid var(--gm-glass-border);
 	transition: all 0.3s ease;
 	cursor: pointer;
+	backdrop-filter: blur(12px);
 	}
 
-	.saas-btn-secondary:hover {
-	border-color: var(--saas-primary);
-	color: var(--saas-primary);
+	.gm-btn-secondary:hover {
+	background: rgba(255, 255, 255, 0.1);
+	border-color: rgba(255, 255, 255, 0.15);
+	transform: translateY(-2px);
 	}
 
-	.saas-hero {
+	/* --- Hero --- */
+	.gm-hero {
+	position: relative;
+	z-index: 2;
 	min-height: 100vh;
 	display: flex;
 	align-items: center;
-	padding: 140px 48px 80px;
-	background: linear-gradient(180deg, var(--saas-bg) 0%, #f1f5f9 100%);
+	padding: 140px 48px 100px;
 	}
 
-	.saas-hero-inner {
+	.gm-hero-inner {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	gap: 80px;
-	max-width: 1300px;
+	max-width: 1280px;
 	margin: 0 auto;
 	align-items: center;
 	}
 
-	.saas-badge {
+	.gm-badge {
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
 	padding: 8px 16px;
-	background: #ede9fe;
+	background: rgba(125, 211, 252, 0.1);
+	border: 1px solid rgba(125, 211, 252, 0.2);
 	border-radius: 100px;
 	margin-bottom: 28px;
-	font-size: 14px;
+	font-size: 13px;
 	font-weight: 600;
-	color: var(--saas-primary);
+	color: var(--gm-aurora-1);
 	}
 
-	.saas-hero h1 {
-	font-size: 56px;
+	.gm-hero h1 {
+	font-size: clamp(40px, 5.5vw, 60px);
 	font-weight: 700;
-	line-height: 1.15;
+	line-height: 1.1;
 	margin-bottom: 24px;
-	color: var(--saas-text);
+	color: var(--gm-text);
+	letter-spacing: -0.02em;
 	}
 
-	.saas-hero-sub {
-	font-size: 20px;
-	color: var(--saas-muted);
+	.gm-hero h1 .gm-serif {
+	font-family: 'Instrument Serif', Georgia, serif;
+	font-weight: 400;
+	font-style: italic;
+	background: linear-gradient(135deg, var(--gm-aurora-1) 0%, var(--gm-aurora-2) 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
+	}
+
+	.gm-hero-sub {
+	font-size: 18px;
+	color: var(--gm-muted);
 	line-height: 1.7;
 	margin-bottom: 36px;
+	max-width: 500px;
+	}
+
+	.gm-hero-ctas {
+	display: flex;
+	gap: 16px;
+	margin-bottom: 36px;
 	}
 
-	.saas-hero-ctas {
+	.gm-hero-note {
 	display: flex;
-	gap: 16px;
-	margin-bottom: 32px;
+	gap: 20px;
+	font-size: 13px;
+	color: var(--gm-light);
 	}
 
-	.saas-hero-note {
-	font-size: 14px;
-	color: var(--saas-light);
+	.gm-hero-note span {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
 	}
 
-	.saas-hero-mockup {
-	background: white;
-	border-radius: 16px;
-	box-shadow: 0 20px 60px rgba(0,0,0,0.12);
+	/* Hero glass mockup */
+	.gm-hero-mockup {
+	border-radius: 24px;
 	padding: 24px;
-	animation: saas-float 6s ease-in-out infinite;
+	background: rgba(255, 255, 255, 0.04);
+	backdrop-filter: blur(20px);
+	-webkit-backdrop-filter: blur(20px);
+	border: 1px solid var(--gm-glass-border);
+	position: relative;
 	}
 
-	@keyframes saas-float {
-	0%, 100% { transform: translateY(0); }
-	50% { transform: translateY(-10px); }
+	.gm-hero-mockup::after {
+	content: '';
+	position: absolute;
+	inset: -1px;
+	border-radius: 24px;
+	background: linear-gradient(135deg, rgba(125, 211, 252, 0.15) 0%, transparent 40%, transparent 60%, rgba(167, 139, 250, 0.15) 100%);
+	z-index: -1;
+	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+	mask-composite: exclude;
+	-webkit-mask-composite: xor;
+	padding: 1px;
 	}
 
-	.saas-mockup-bar {
+	.gm-mockup-bar {
 	display: flex;
 	gap: 8px;
 	margin-bottom: 20px;
 	}
 
-	.saas-mockup-dot {
-	width: 12px;
-	height: 12px;
+	.gm-mockup-dot {
+	width: 10px;
+	height: 10px;
 	border-radius: 50%;
+	background: rgba(255, 255, 255, 0.15);
 	}
 
-	.saas-stats-section {
-	padding: 60px 48px;
-	background: #f1f5f9;
+	.gm-mockup-content {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
 	}
 
-	.saas-stats-grid {
+	.gm-mockup-row {
+	height: 28px;
+	background: rgba(255, 255, 255, 0.04);
+	border-radius: 8px;
+	border: 1px solid rgba(255, 255, 255, 0.04);
+	}
+
+	.gm-mockup-grid {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-	gap: 32px;
-	max-width: 800px;
-	margin: 0 auto;
-	text-align: center;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 12px;
 	}
 
-	.saas-stat-value {
+	.gm-mockup-cell {
+	height: 72px;
+	border-radius: 12px;
+	border: 1px solid rgba(255, 255, 255, 0.04);
+	}
+
+	.gm-mockup-cell:nth-child(1) {
+	background: linear-gradient(135deg, rgba(125, 211, 252, 0.15) 0%, rgba(167, 139, 250, 0.1) 100%);
+	}
+	.gm-mockup-cell:nth-child(2) {
+	background: rgba(255, 255, 255, 0.03);
+	}
+	.gm-mockup-cell:nth-child(3) {
+	background: rgba(255, 255, 255, 0.03);
+	}
+
+	.gm-mockup-bar-chart {
+	height: 100px;
+	background: linear-gradient(180deg, rgba(125, 211, 252, 0.08) 0%, rgba(52, 211, 153, 0.04) 100%);
+	border-radius: 14px;
+	border: 1px solid rgba(255, 255, 255, 0.04);
+	}
+
+	/* --- Stats --- */
+	.gm-stats {
+	position: relative;
+	z-index: 2;
+	padding: 60px 48px;
+	}
+
+	.gm-stats-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+	gap: 16px;
+	max-width: 900px;
+	margin: 0 auto;
+	}
+
+	.gm-stat-card {
+	text-align: center;
+	padding: 32px 20px;
+	background: var(--gm-glass);
+	backdrop-filter: blur(16px);
+	-webkit-backdrop-filter: blur(16px);
+	border: 1px solid var(--gm-glass-border);
+	border-radius: 16px;
+	transition: all 0.3s ease;
+	}
+
+	.gm-stat-card:hover {
+	background: rgba(255, 255, 255, 0.08);
+	transform: translateY(-2px);
+	}
+
+	.gm-stat-value {
 	font-size: 36px;
 	font-weight: 700;
-	color: var(--saas-primary);
 	margin-bottom: 4px;
+	background: linear-gradient(135deg, var(--gm-aurora-1) 0%, var(--gm-aurora-2) 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
 	}
 
-	.saas-stat-label {
-	font-size: 14px;
-	color: var(--saas-muted);
+	.gm-stat-label {
+	font-size: 13px;
+	color: var(--gm-light);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	}
-
-	.saas-trust-section {
-	padding: 60px 48px;
-	background: #f1f5f9;
-	}
-
-	.saas-trust-label {
-	text-align: center;
-	font-size: 14px;
-	color: var(--saas-light);
-	margin-bottom: 24px;
+	letter-spacing: 0.06em;
 	font-weight: 500;
 	}
 
-	.saas-trust-bar {
+	/* --- Trust bar --- */
+	.gm-trust {
+	position: relative;
+	z-index: 2;
+	padding: 48px;
+	}
+
+	.gm-trust-label {
+	text-align: center;
+	font-size: 12px;
+	color: var(--gm-light);
+	margin-bottom: 24px;
+	font-weight: 500;
+	text-transform: uppercase;
+	letter-spacing: 0.12em;
+	}
+
+	.gm-trust-bar {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	gap: 48px;
-	padding: 32px;
-	background: white;
+	flex-wrap: wrap;
+	padding: 28px 40px;
+	background: var(--gm-glass);
+	backdrop-filter: blur(16px);
+	-webkit-backdrop-filter: blur(16px);
+	border: 1px solid var(--gm-glass-border);
 	border-radius: 16px;
-	box-shadow: 0 4px 20px rgba(0,0,0,0.04);
 	max-width: 900px;
 	margin: 0 auto;
-	flex-wrap: wrap;
 	}
 
-	.saas-trust-logo {
-	font-size: 18px;
+	.gm-trust-logo {
+	font-size: 16px;
 	font-weight: 600;
-	color: var(--saas-light);
-	transition: color 0.2s ease;
+	color: var(--gm-light);
+	transition: color 0.3s ease;
 	}
 
-	.saas-trust-logo:hover {
-	color: var(--saas-muted);
+	.gm-trust-logo:hover {
+	color: var(--gm-muted);
 	}
 
-	.saas-section {
+	/* --- Sections --- */
+	.gm-section {
+	position: relative;
+	z-index: 2;
 	padding: 100px 48px;
 	}
 
-	.saas-section-inner {
+	.gm-section-inner {
 	max-width: 1200px;
 	margin: 0 auto;
 	}
 
-	.saas-section-header {
+	.gm-section-header {
 	text-align: center;
 	margin-bottom: 64px;
 	}
 
-	.saas-section-header h2 {
-	font-size: 44px;
+	.gm-section-header h2 {
+	font-size: clamp(32px, 4vw, 48px);
 	font-weight: 700;
 	margin-bottom: 16px;
-	color: var(--saas-text);
+	color: var(--gm-text);
+	letter-spacing: -0.02em;
 	}
 
-	.saas-section-header p {
-	font-size: 18px;
-	color: var(--saas-muted);
+	.gm-section-header h2 .gm-serif {
+	font-family: 'Instrument Serif', Georgia, serif;
+	font-weight: 400;
+	font-style: italic;
 	}
 
-	.saas-value-grid {
+	.gm-section-header p {
+	font-size: 17px;
+	color: var(--gm-muted);
+	max-width: 500px;
+	margin: 0 auto;
+	}
+
+	/* --- Value props grid --- */
+	.gm-value-grid {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-	gap: 24px;
+	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+	gap: 16px;
 	}
 
-	.saas-value-card {
-	padding: 32px;
-	background: white;
+	.gm-value-card {
+	padding: 36px;
+	background: var(--gm-glass);
+	backdrop-filter: blur(16px);
+	-webkit-backdrop-filter: blur(16px);
+	border: 1px solid var(--gm-glass-border);
 	border-radius: 20px;
-	box-shadow: 0 4px 20px rgba(0,0,0,0.04);
-	transition: all 0.3s ease;
-	border: 1px solid transparent;
+	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+	position: relative;
+	overflow: hidden;
 	}
 
-	.saas-value-card:hover {
+	.gm-value-card::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 2px;
+	background: linear-gradient(90deg, var(--gm-aurora-1), var(--gm-aurora-2), var(--gm-aurora-3));
+	opacity: 0;
+	transition: opacity 0.4s ease;
+	}
+
+	.gm-value-card:hover {
 	transform: translateY(-4px);
-	box-shadow: 0 12px 40px rgba(0,0,0,0.08);
-	border-color: var(--saas-border);
+	background: rgba(255, 255, 255, 0.08);
+	border-color: rgba(255, 255, 255, 0.12);
 	}
 
-	.saas-value-card h3 {
-	font-size: 24px;
-	font-weight: 700;
-	margin-bottom: 12px;
-	color: var(--saas-text);
+	.gm-value-card:hover::before {
+	opacity: 1;
 	}
 
-	.saas-value-card p {
-	font-size: 16px;
-	color: var(--saas-muted);
-	line-height: 1.6;
+	.gm-value-card h3 {
+	font-size: 22px;
+	font-weight: 600;
+	margin-bottom: 10px;
+	color: var(--gm-text);
 	}
 
-	.saas-features-section {
-	background: #f8fafc;
+	.gm-value-card p {
+	font-size: 15px;
+	color: var(--gm-muted);
+	line-height: 1.7;
 	}
 
-	.saas-features-list {
+	/* --- Features --- */
+	.gm-features-list {
 	display: flex;
 	flex-direction: column;
-	gap: 20px;
+	gap: 16px;
 	max-width: 900px;
 	margin: 0 auto;
 	}
 
-	.saas-feature-step {
+	.gm-feature-step {
 	display: flex;
-	gap: 24px;
-	padding: 32px;
-	background: white;
+	gap: 20px;
+	padding: 28px 32px;
+	background: var(--gm-glass);
+	backdrop-filter: blur(16px);
+	-webkit-backdrop-filter: blur(16px);
+	border: 1px solid var(--gm-glass-border);
 	border-radius: 16px;
-	border: 1px solid var(--saas-border);
 	transition: all 0.3s ease;
+	align-items: flex-start;
 	}
 
-	.saas-feature-step:hover {
-	border-color: var(--saas-primary);
-	box-shadow: 0 8px 30px rgba(99, 102, 241, 0.1);
+	.gm-feature-step:hover {
+	background: rgba(255, 255, 255, 0.08);
+	border-color: rgba(125, 211, 252, 0.2);
+	transform: translateX(4px);
 	}
 
-	.saas-step-icon {
-	width: 48px;
-	height: 48px;
-	background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%);
+	.gm-step-icon {
+	width: 44px;
+	height: 44px;
+	background: linear-gradient(135deg, rgba(125, 211, 252, 0.15) 0%, rgba(167, 139, 250, 0.15) 100%);
 	border-radius: 12px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--saas-primary);
+	color: var(--gm-aurora-1);
 	flex-shrink: 0;
 	}
 
-	.saas-feature-step h3 {
-	font-size: 20px;
+	.gm-feature-step h3 {
+	font-size: 18px;
 	font-weight: 600;
-	margin-bottom: 8px;
-	color: var(--saas-text);
+	margin-bottom: 6px;
+	color: var(--gm-text);
 	}
 
-	.saas-feature-step p {
-	font-size: 16px;
-	color: var(--saas-muted);
+	.gm-feature-step p {
+	font-size: 15px;
+	color: var(--gm-muted);
 	line-height: 1.6;
 	}
 
-	.saas-testimonial-card {
-	background: white;
-	border-radius: 24px;
+	/* --- Testimonials --- */
+	.gm-testimonial-card {
 	padding: 48px;
-	box-shadow: 0 4px 30px rgba(0,0,0,0.06);
+	background: var(--gm-glass);
+	backdrop-filter: blur(24px);
+	-webkit-backdrop-filter: blur(24px);
+	border: 1px solid var(--gm-glass-border);
+	border-radius: 24px;
 	max-width: 800px;
 	margin: 0 auto;
 	position: relative;
 	}
 
-	.saas-testimonial-card::before {
-	content: '"';
+	.gm-testimonial-card::before {
+	content: '';
 	position: absolute;
-	top: 24px;
-	left: 40px;
-	font-size: 120px;
-	font-weight: 700;
-	color: #ede9fe;
-	line-height: 1;
+	inset: -1px;
+	border-radius: 24px;
+	background: linear-gradient(135deg, rgba(125, 211, 252, 0.12) 0%, transparent 40%, transparent 60%, rgba(52, 211, 153, 0.12) 100%);
+	z-index: -1;
+	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+	mask-composite: exclude;
+	-webkit-mask-composite: xor;
+	padding: 1px;
 	}
 
-	.saas-testimonial-quote {
-	font-size: 24px;
+	.gm-testimonial-quote-mark {
+	font-family: 'Instrument Serif', Georgia, serif;
+	font-size: 80px;
+	font-style: italic;
+	line-height: 0.8;
+	background: linear-gradient(135deg, var(--gm-aurora-1) 0%, var(--gm-aurora-2) 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
+	opacity: 0.3;
+	margin-bottom: 8px;
+	}
+
+	.gm-testimonial-quote {
+	font-size: 22px;
 	line-height: 1.7;
-	color: var(--saas-text);
-	margin-bottom: 32px;
-	position: relative;
-	z-index: 1;
+	color: var(--gm-text);
+	margin-bottom: 28px;
 	}
 
-	.saas-testimonial-author {
+	.gm-testimonial-author {
 	display: flex;
 	align-items: center;
 	gap: 16px;
 	}
 
-	.saas-testimonial-avatar {
-	width: 56px;
-	height: 56px;
-	background: linear-gradient(135deg, var(--saas-primary) 0%, var(--saas-primary-dark) 100%);
+	.gm-testimonial-avatar {
+	width: 48px;
+	height: 48px;
+	background: linear-gradient(135deg, var(--gm-aurora-1) 0%, var(--gm-aurora-2) 100%);
 	border-radius: 50%;
 	overflow: hidden;
 	}
 
-	.saas-testimonial-avatar img {
+	.gm-testimonial-avatar img {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 	}
 
-	.saas-testimonial-name {
+	.gm-testimonial-name {
 	font-weight: 600;
-	font-size: 16px;
-	color: var(--saas-text);
+	font-size: 15px;
+	color: var(--gm-text);
 	}
 
-	.saas-testimonial-role {
-	font-size: 14px;
-	color: var(--saas-muted);
+	.gm-testimonial-role {
+	font-size: 13px;
+	color: var(--gm-muted);
 	}
 
-	.saas-pricing-section {
-	background: #f8fafc;
-	}
-
-	.saas-pricing-grid {
+	/* --- Pricing --- */
+	.gm-pricing-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-	gap: 24px;
+	gap: 16px;
 	align-items: start;
 	max-width: 1100px;
 	margin: 0 auto;
 	}
 
-	.saas-pricing-card {
+	.gm-pricing-card {
 	padding: 36px;
-	background: white;
+	background: var(--gm-glass);
+	backdrop-filter: blur(16px);
+	-webkit-backdrop-filter: blur(16px);
+	border: 1px solid var(--gm-glass-border);
 	border-radius: 20px;
-	border: 2px solid var(--saas-border);
 	transition: all 0.3s ease;
 	}
 
-	.saas-pricing-card:hover {
-	border-color: #c7d2fe;
+	.gm-pricing-card:hover {
+	border-color: rgba(255, 255, 255, 0.12);
 	}
 
-	.saas-pricing-card.featured {
-	border-color: var(--saas-primary);
-	box-shadow: 0 8px 40px rgba(99, 102, 241, 0.15);
-	transform: scale(1.02);
+	.gm-pricing-card.featured {
+	border-color: rgba(125, 211, 252, 0.3);
+	background: rgba(125, 211, 252, 0.06);
+	position: relative;
 	}
 
-	.saas-pricing-badge {
+	.gm-pricing-card.featured::before {
+	content: '';
+	position: absolute;
+	inset: -1px;
+	border-radius: 20px;
+	background: linear-gradient(135deg, rgba(125, 211, 252, 0.25) 0%, rgba(167, 139, 250, 0.25) 100%);
+	z-index: -1;
+	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+	mask-composite: exclude;
+	-webkit-mask-composite: xor;
+	padding: 1px;
+	}
+
+	.gm-pricing-badge {
 	display: inline-block;
-	padding: 6px 12px;
-	background: linear-gradient(135deg, var(--saas-primary) 0%, var(--saas-primary-dark) 100%);
-	color: white;
-	font-size: 12px;
-	font-weight: 600;
+	padding: 6px 14px;
+	background: linear-gradient(135deg, var(--gm-aurora-1) 0%, var(--gm-aurora-2) 100%);
+	color: var(--gm-bg);
+	font-size: 11px;
+	font-weight: 700;
 	border-radius: 100px;
 	margin-bottom: 16px;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
 	}
 
-	.saas-pricing-name {
-	font-size: 20px;
+	.gm-pricing-name {
+	font-size: 18px;
 	font-weight: 600;
 	margin-bottom: 8px;
-	color: var(--saas-text);
+	color: var(--gm-text);
 	}
 
-	.saas-pricing-price {
+	.gm-pricing-price {
 	font-size: 48px;
 	font-weight: 700;
-	color: var(--saas-text);
+	color: var(--gm-text);
+	letter-spacing: -0.02em;
 	}
 
-	.saas-pricing-period {
-	color: var(--saas-muted);
+	.gm-pricing-period {
+	color: var(--gm-muted);
+	font-size: 14px;
 	}
 
-	.saas-pricing-features {
+	.gm-pricing-features {
 	list-style: none;
 	padding: 0;
 	margin: 24px 0 28px;
 	}
 
-	.saas-pricing-features li {
+	.gm-pricing-features li {
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	margin-bottom: 12px;
-	color: var(--saas-muted);
+	color: var(--gm-muted);
+	font-size: 14px;
 	}
 
-	.saas-pricing-features li::before {
-	content: "";
-	color: #22c55e;
+	.gm-pricing-check {
+	color: var(--gm-aurora-3);
+	flex-shrink: 0;
 	}
 
-	.saas-cta-gradient {
-	background: linear-gradient(135deg, var(--saas-primary) 0%, var(--saas-primary-dark) 50%, #a855f7 100%);
-	border-radius: 32px;
+	/* --- CTA --- */
+	.gm-cta-gradient {
+	border-radius: 28px;
 	padding: 80px;
 	text-align: center;
-	color: white;
 	max-width: 1100px;
 	margin: 0 auto;
 	position: relative;
 	overflow: hidden;
+	background: linear-gradient(135deg, rgba(125, 211, 252, 0.12) 0%, rgba(167, 139, 250, 0.12) 50%, rgba(52, 211, 153, 0.12) 100%);
+	border: 1px solid var(--gm-glass-border);
+	backdrop-filter: blur(20px);
+	-webkit-backdrop-filter: blur(20px);
 	}
 
-	.saas-cta-gradient::before {
+	.gm-cta-gradient::before {
 	content: '';
 	position: absolute;
-	top: -50%;
-	left: -50%;
-	width: 200%;
-	height: 200%;
-	background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
-	animation: saas-float 8s ease-in-out infinite;
+	inset: -1px;
+	border-radius: 28px;
+	background: linear-gradient(135deg, rgba(125, 211, 252, 0.2) 0%, transparent 30%, transparent 70%, rgba(52, 211, 153, 0.2) 100%);
+	z-index: -1;
+	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+	mask-composite: exclude;
+	-webkit-mask-composite: xor;
+	padding: 1px;
 	}
 
-	.saas-cta-gradient h2 {
-	font-size: 48px;
+	.gm-cta-gradient h2 {
+	font-size: clamp(32px, 4vw, 48px);
 	font-weight: 700;
 	margin-bottom: 16px;
 	position: relative;
 	z-index: 1;
+	letter-spacing: -0.02em;
 	}
 
-	.saas-cta-gradient p {
-	font-size: 20px;
-	opacity: 0.9;
+	.gm-cta-gradient p {
+	font-size: 18px;
+	color: var(--gm-muted);
 	margin-bottom: 32px;
 	position: relative;
 	z-index: 1;
 	}
 
-	.saas-cta-btn {
-	display: inline-flex;
-	align-items: center;
-	gap: 10px;
-	padding: 18px 36px;
-	background: white;
-	color: var(--saas-primary);
-	font-weight: 700;
-	font-size: 16px;
-	border-radius: 12px;
-	text-decoration: none;
-	transition: all 0.3s ease;
+	/* --- Footer --- */
+	.gm-footer {
 	position: relative;
-	z-index: 1;
-	}
-
-	.saas-cta-btn:hover {
-	transform: translateY(-3px);
-	box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
-	}
-
-	.saas-footer {
-	padding: 48px;
-	border-top: 1px solid var(--saas-border);
+	z-index: 2;
+	padding: 40px 48px;
+	border-top: 1px solid var(--gm-glass-border);
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -595,149 +920,187 @@
 	gap: 24px;
 	}
 
-	.saas-footer-brand {
+	.gm-footer-brand {
 	display: flex;
 	align-items: center;
 	gap: 10px;
 	}
 
-	.saas-footer-logo {
-	width: 28px;
-	height: 28px;
-	background: linear-gradient(135deg, var(--saas-primary) 0%, var(--saas-primary-dark) 100%);
-	border-radius: 8px;
+	.gm-footer-logo {
+	width: 24px;
+	height: 24px;
+	background: linear-gradient(135deg, var(--gm-aurora-1) 0%, var(--gm-aurora-2) 100%);
+	border-radius: 6px;
 	}
 
-	.saas-footer-links {
+	.gm-footer-copyright {
+	font-size: 13px;
+	color: var(--gm-light);
+	}
+
+	.gm-footer-links {
 	display: flex;
-	gap: 32px;
+	gap: 28px;
 	flex-wrap: wrap;
 	}
 
-	.saas-footer-link {
-	color: var(--saas-muted);
+	.gm-footer-link {
+	color: var(--gm-light);
 	text-decoration: none;
-	font-size: 14px;
-	transition: color 0.2s ease;
+	font-size: 13px;
+	transition: color 0.3s ease;
 	}
 
-	.saas-footer-link:hover {
-	color: var(--saas-primary);
+	.gm-footer-link:hover {
+	color: var(--gm-text);
 	}
 
-	.saas-footer-social {
+	.gm-footer-social {
 	display: flex;
 	gap: 16px;
 	}
 
-	.saas-footer-social a {
-	color: var(--saas-light);
-	transition: color 0.2s ease;
+	.gm-footer-social a {
+	color: var(--gm-light);
+	transition: color 0.3s ease;
 	}
 
-	.saas-footer-social a:hover {
-	color: var(--saas-primary);
+	.gm-footer-social a:hover {
+	color: var(--gm-aurora-1);
 	}
 
+	/* --- Responsive --- */
 	@media (max-width: 1024px) {
-	.saas-hero-inner { grid-template-columns: 1fr; }
-	.saas-hero-mockup { display: none; }
-	.saas-pricing-grid { max-width: 400px; margin: 0 auto; }
+	.gm-hero-inner { grid-template-columns: 1fr; }
+	.gm-hero-mockup { display: none; }
+	.gm-pricing-grid { max-width: 420px; margin: 0 auto; }
 	}
 
 	@media (max-width: 768px) {
-	.saas-hero h1 { font-size: 40px; }
-	.saas-hero-ctas { flex-direction: column; }
-	.saas-nav { padding: 12px 24px; }
-	.saas-nav-links { gap: 16px; display: none; }
-	.saas-section { padding: 60px 24px; }
-	.saas-stats-section, .saas-trust-section { padding: 40px 24px; }
-	.saas-cta-gradient { padding: 48px 24px; margin: 0 16px; }
-	.saas-footer { flex-direction: column; text-align: center; }
+	.gm-nav { top: 8px; left: 8px; right: 8px; padding: 12px 20px; }
+	.gm-nav-links { display: none; }
+	.gm-mobile-toggle { display: block; }
+	.gm-hero { padding: 120px 24px 80px; }
+	.gm-hero h1 { font-size: 36px; }
+	.gm-hero-ctas { flex-direction: column; }
+	.gm-hero-note { flex-direction: column; gap: 8px; }
+	.gm-section { padding: 64px 24px; }
+	.gm-stats { padding: 40px 24px; }
+	.gm-trust { padding: 32px 24px; }
+	.gm-cta-gradient { padding: 48px 24px; border-radius: 20px; }
+	.gm-footer { flex-direction: column; text-align: center; padding: 32px 24px; }
+	.gm-value-grid { grid-template-columns: 1fr; }
+	.gm-pricing-grid { grid-template-columns: 1fr; }
 	}
 </style>
 
-<div class="saas-page">
+<div class="gm-page">
+	<!-- Aurora background -->
+	<div class="gm-aurora">
+	<div class="gm-aurora-orb gm-aurora-orb-1"></div>
+	<div class="gm-aurora-orb gm-aurora-orb-2"></div>
+	<div class="gm-aurora-orb gm-aurora-orb-3"></div>
+	</div>
+
 	<!-- Navigation -->
-	<nav class="saas-nav">
-	<a href="/" class="saas-nav-brand">
+	<nav class="gm-nav">
+	<a href="/" class="gm-nav-brand">
 		{{if .Config.Brand.LogoURL}}
-		<img src="{{.Config.Brand.LogoURL}}" alt="{{.Config.Brand.Name}}" style="height: 36px;">
+		<img src="{{.Config.Brand.LogoURL}}" alt="{{.Config.Brand.Name}}" style="height: 32px;">
 		{{else}}
-		<div class="saas-nav-logo">
-			{{svg "octicon-package" 18}}
+		<div class="gm-nav-logo">
+			{{svg "octicon-package" 16}}
 		</div>
 		{{end}}
-		<span style="font-weight: 700; font-size: 20px; color: var(--saas-text);">{{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}</span>
+		<span class="gm-nav-name">{{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}</span>
 	</a>
-	<div class="saas-nav-links">
+	<div class="gm-nav-links">
 		{{if .Config.Footer.Links}}
 		{{range .Config.Footer.Links}}
-			<a href="{{.URL}}" class="saas-nav-link">{{.Label}}</a>
+			<a href="{{.URL}}" class="gm-nav-link">{{.Label}}</a>
 		{{end}}
 		{{end}}
-		{{if .Config.ValueProps}}<a href="#value-props" class="saas-nav-link">Why</a>{{end}}
-		{{if .Config.Features}}<a href="#features" class="saas-nav-link">Features</a>{{end}}
-		{{if .Config.Pricing.Plans}}<a href="#pricing" class="saas-nav-link">Pricing</a>{{end}}
-		<a href="{{.Repository.Link}}" class="saas-nav-repo">
-		<img src="/assets/img/gitcaddy-icon.svg" width="18" height="18" alt="GitCaddy">
+		{{if .Config.ValueProps}}<a href="#value-props" class="gm-nav-link">Why</a>{{end}}
+		{{if .Config.Features}}<a href="#features" class="gm-nav-link">Features</a>{{end}}
+		{{if .Config.Pricing.Plans}}<a href="#pricing" class="gm-nav-link">Pricing</a>{{end}}
+		<a href="{{.Repository.Link}}" class="gm-nav-repo">
+		<img src="/assets/img/gitcaddy-icon.svg" width="16" height="16" alt="GitCaddy">
 		Repository
 		</a>
-		<a href="{{if .Config.Hero.PrimaryCTA.URL}}{{.Config.Hero.PrimaryCTA.URL}}{{else}}{{.Repository.Link}}{{end}}" class="saas-btn-primary" style="padding: 12px 24px; font-size: 14px;">
-		{{if .Config.Hero.PrimaryCTA.Label}}{{.Config.Hero.PrimaryCTA.Label}}{{else}}Get Started{{end}}
+		<a href="{{if .Config.Hero.PrimaryCTA.URL}}{{.Config.Hero.PrimaryCTA.URL}}{{else}}{{.Repository.Link}}{{end}}" class="gm-btn-primary" style="padding: 10px 20px; font-size: 13px;">
+		<span>{{if .Config.Hero.PrimaryCTA.Label}}{{.Config.Hero.PrimaryCTA.Label}}{{else}}Get Started{{end}}</span>
 		</a>
 	</div>
+	<button class="gm-mobile-toggle" onclick="document.getElementById('gm-mobile-nav').classList.toggle('open')">Menu</button>
 	</nav>
+	<div class="gm-mobile-menu" id="gm-mobile-nav">
+		{{if .Config.Footer.Links}}
+		{{range .Config.Footer.Links}}
+			<a href="{{.URL}}" class="gm-nav-link">{{.Label}}</a>
+		{{end}}
+		{{end}}
+		{{if .Config.ValueProps}}<a href="#value-props" class="gm-nav-link">Why</a>{{end}}
+		{{if .Config.Features}}<a href="#features" class="gm-nav-link">Features</a>{{end}}
+		{{if .Config.Pricing.Plans}}<a href="#pricing" class="gm-nav-link">Pricing</a>{{end}}
+		<a href="{{.Repository.Link}}" class="gm-nav-repo">
+		<img src="/assets/img/gitcaddy-icon.svg" width="16" height="16" alt="GitCaddy">
+		Repository
+		</a>
+	</div>
 
 	<!-- Hero Section -->
-	<section class="saas-hero">
-	<div class="saas-hero-inner">
+	<section class="gm-hero">
+	<div class="gm-hero-inner">
 		<div>
 		{{if gt .NumStars 100}}
-			<div class="saas-badge">
+			<div class="gm-badge gm-reveal">
 			{{svg "octicon-star-fill" 14}}
 			<span>{{.NumStars}} stars</span>
 			</div>
 		{{end}}
 
-		<h1>{{if .Config.Hero.Headline}}{{.Config.Hero.Headline}}{{else}}{{.Repository.Name}}{{end}}</h1>
+		<h1 class="gm-reveal gm-reveal-delay-1">{{if .Config.Hero.Headline}}{{.Config.Hero.Headline}}{{else}}{{.Repository.Name}}{{end}}</h1>
 
-		<p class="saas-hero-sub">
+		<p class="gm-hero-sub gm-reveal gm-reveal-delay-2">
 			{{if .Config.Hero.Subheadline}}{{.Config.Hero.Subheadline}}{{else}}{{.Repository.Description}}{{end}}
 		</p>
 
-		<div class="saas-hero-ctas">
-			<a href="{{if .Config.Hero.PrimaryCTA.URL}}{{.Config.Hero.PrimaryCTA.URL}}{{else}}{{.Repository.Link}}{{end}}" class="saas-btn-primary">
-			{{if .Config.Hero.PrimaryCTA.Label}}{{.Config.Hero.PrimaryCTA.Label}}{{else}}Get Started{{end}}
-			{{svg "octicon-arrow-right" 16}}
+		<div class="gm-hero-ctas gm-reveal gm-reveal-delay-3">
+			<a href="{{if .Config.Hero.PrimaryCTA.URL}}{{.Config.Hero.PrimaryCTA.URL}}{{else}}{{.Repository.Link}}{{end}}" class="gm-btn-primary">
+			<span>
+				{{if .Config.Hero.PrimaryCTA.Label}}{{.Config.Hero.PrimaryCTA.Label}}{{else}}Get Started{{end}}
+				{{svg "octicon-arrow-right" 16}}
+			</span>
 			</a>
 			{{if .Config.Hero.SecondaryCTA.Label}}
-			<a href="{{.Config.Hero.SecondaryCTA.URL}}" class="saas-btn-secondary">
+			<a href="{{.Config.Hero.SecondaryCTA.URL}}" class="gm-btn-secondary">
 				{{svg "octicon-play" 16}}
 				{{.Config.Hero.SecondaryCTA.Label}}
 			</a>
 			{{end}}
 		</div>
 
-		<p class="saas-hero-note">
-			{{svg "octicon-check" 14}} Free to use &nbsp; {{svg "octicon-check" 14}} Open source &nbsp; {{svg "octicon-check" 14}} MIT License
-		</p>
+		<div class="gm-hero-note gm-reveal gm-reveal-delay-3">
+			<span>{{svg "octicon-check" 14}} Free to use</span>
+			<span>{{svg "octicon-check" 14}} Open source</span>
+			<span>{{svg "octicon-check" 14}} MIT License</span>
+		</div>
 		</div>
 
-		<div class="saas-hero-mockup">
-		<div class="saas-mockup-bar">
-			<div class="saas-mockup-dot" style="background: #ef4444;"></div>
-			<div class="saas-mockup-dot" style="background: #f59e0b;"></div>
-			<div class="saas-mockup-dot" style="background: #22c55e;"></div>
+		<div class="gm-hero-mockup gm-reveal gm-reveal-delay-2">
+		<div class="gm-mockup-bar">
+			<div class="gm-mockup-dot"></div>
+			<div class="gm-mockup-dot"></div>
+			<div class="gm-mockup-dot"></div>
 		</div>
-		<div style="display: flex; flex-direction: column; gap: 16px;">
-			<div style="height: 32px; background: #f1f5f9; border-radius: 8px; width: 60%;"></div>
-			<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
-			<div style="height: 80px; background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%); border-radius: 10px;"></div>
-			<div style="height: 80px; background: #f1f5f9; border-radius: 10px;"></div>
-			<div style="height: 80px; background: #f1f5f9; border-radius: 10px;"></div>
+		<div class="gm-mockup-content">
+			<div class="gm-mockup-row" style="width: 55%;"></div>
+			<div class="gm-mockup-grid">
+			<div class="gm-mockup-cell"></div>
+			<div class="gm-mockup-cell"></div>
+			<div class="gm-mockup-cell"></div>
 			</div>
-			<div style="height: 120px; background: linear-gradient(135deg, var(--saas-primary) 0%, var(--saas-primary-dark) 100%); border-radius: 12px; opacity: 0.15;"></div>
+			<div class="gm-mockup-bar-chart"></div>
 		</div>
 		</div>
 	</div>
@@ -745,12 +1108,12 @@
 
 	<!-- Stats Section -->
 	{{if .Config.Stats}}
-	<section class="saas-stats-section">
-	<div class="saas-stats-grid">
+	<section class="gm-stats">
+	<div class="gm-stats-grid">
 		{{range .Config.Stats}}
-		<div>
-			<div class="saas-stat-value">{{.Value}}</div>
-			<div class="saas-stat-label">{{.Label}}</div>
+		<div class="gm-stat-card gm-reveal">
+			<div class="gm-stat-value">{{.Value}}</div>
+			<div class="gm-stat-label">{{.Label}}</div>
 		</div>
 		{{end}}
 	</div>
@@ -759,11 +1122,11 @@
 
 	<!-- Trust Bar -->
 	{{if .Config.SocialProof.Logos}}
-	<section class="saas-trust-section">
-	<p class="saas-trust-label">TRUSTED BY TEAMS AT</p>
-	<div class="saas-trust-bar">
+	<section class="gm-trust">
+	<p class="gm-trust-label gm-reveal">Trusted by teams at</p>
+	<div class="gm-trust-bar gm-reveal gm-reveal-delay-1">
 		{{range .Config.SocialProof.Logos}}
-		<span class="saas-trust-logo">{{.}}</span>
+		<span class="gm-trust-logo">{{.}}</span>
 		{{end}}
 	</div>
 	</section>
@@ -771,16 +1134,16 @@
 
 	<!-- Value Props -->
 	{{if .Config.ValueProps}}
-	<section class="saas-section" id="value-props">
-	<div class="saas-section-inner">
-		<div class="saas-section-header">
-		<h2>Why {{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}</h2>
+	<section class="gm-section" id="value-props">
+	<div class="gm-section-inner">
+		<div class="gm-section-header gm-reveal">
+		<h2>Why <span class="gm-serif">{{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}</span></h2>
 		<p>Built for developers who value their time</p>
 		</div>
 
-		<div class="saas-value-grid">
+		<div class="gm-value-grid">
 		{{range .Config.ValueProps}}
-			<div class="saas-value-card">
+			<div class="gm-value-card gm-reveal">
 			<h3>{{.Title}}</h3>
 			<p>{{.Description}}</p>
 			</div>
@@ -792,18 +1155,18 @@
 
 	<!-- Features -->
 	{{if .Config.Features}}
-	<section id="features" class="saas-section saas-features-section">
-	<div class="saas-section-inner">
-		<div class="saas-section-header">
-		<h2>How it works</h2>
+	<section id="features" class="gm-section">
+	<div class="gm-section-inner">
+		<div class="gm-section-header gm-reveal">
+		<h2>How it <span class="gm-serif">works</span></h2>
 		<p>Get started in minutes, not weeks</p>
 		</div>
 
-		<div class="saas-features-list">
+		<div class="gm-features-list">
 		{{range .Config.Features}}
-			<div class="saas-feature-step">
-			<div class="saas-step-icon">
-				{{svg (printf "octicon-%s" (or .Icon "zap")) 24}}
+			<div class="gm-feature-step gm-reveal">
+			<div class="gm-step-icon">
+				{{svg (printf "octicon-%s" (or .Icon "zap")) 22}}
 			</div>
 			<div>
 				<h3>{{.Title}}</h3>
@@ -818,19 +1181,20 @@
 
 	<!-- Testimonials -->
 	{{if .Config.SocialProof.Testimonials}}
-	<section class="saas-section">
-	<div class="saas-testimonial-card">
-		<div class="saas-testimonials-container">
+	<section class="gm-section">
+	<div class="gm-testimonial-card">
+		<div class="gm-testimonials-container">
 		{{range .Config.SocialProof.Testimonials}}
-		<div class="saas-testimonial-item" style="display: none;">
-			<p class="saas-testimonial-quote">{{.Quote}}</p>
-			<div class="saas-testimonial-author">
-			<div class="saas-testimonial-avatar">
+		<div class="gm-testimonial-item" style="display: none;">
+			<div class="gm-testimonial-quote-mark">&ldquo;</div>
+			<p class="gm-testimonial-quote">{{.Quote}}</p>
+			<div class="gm-testimonial-author">
+			<div class="gm-testimonial-avatar">
 				{{if .Avatar}}<img src="{{.Avatar}}" alt="{{.Author}}">{{end}}
 			</div>
 			<div>
-				<div class="saas-testimonial-name">{{.Author}}</div>
-				<div class="saas-testimonial-role">{{.Role}}</div>
+				<div class="gm-testimonial-name">{{.Author}}</div>
+				<div class="gm-testimonial-role">{{.Role}}</div>
 			</div>
 			</div>
 		</div>
@@ -840,7 +1204,7 @@
 	</section>
 	<script>
 	(function() {
-		var items = document.querySelectorAll(".saas-testimonial-item");
+		var items = document.querySelectorAll(".gm-testimonial-item");
 		if (items.length > 0) {
 		var idx = Math.floor(Math.random() * items.length);
 		items[idx].style.display = "block";
@@ -851,30 +1215,30 @@
 
 	<!-- Pricing -->
 	{{if .Config.Pricing.Plans}}
-	<section id="pricing" class="saas-section saas-pricing-section">
-	<div class="saas-section-inner">
-		<div class="saas-section-header">
-		<h2>{{if .Config.Pricing.Headline}}{{.Config.Pricing.Headline}}{{else}}Simple, transparent pricing{{end}}</h2>
+	<section id="pricing" class="gm-section">
+	<div class="gm-section-inner">
+		<div class="gm-section-header gm-reveal">
+		<h2>{{if .Config.Pricing.Headline}}{{.Config.Pricing.Headline}}{{else}}Simple, <span class="gm-serif">transparent</span> pricing{{end}}</h2>
 		</div>
 
-		<div class="saas-pricing-grid">
+		<div class="gm-pricing-grid">
 		{{range .Config.Pricing.Plans}}
-			<div class="saas-pricing-card {{if .Featured}}featured{{end}}">
-			{{if .Featured}}<div class="saas-pricing-badge">Most Popular</div>{{end}}
-			<h3 class="saas-pricing-name">{{.Name}}</h3>
+			<div class="gm-pricing-card{{if .Featured}} featured{{end}} gm-reveal">
+			{{if .Featured}}<div class="gm-pricing-badge">Most Popular</div>{{end}}
+			<h3 class="gm-pricing-name">{{.Name}}</h3>
 			<div style="margin-bottom: 24px;">
-				<span class="saas-pricing-price">{{.Price}}</span>
-				<span class="saas-pricing-period">{{.Period}}</span>
+				<span class="gm-pricing-price">{{.Price}}</span>
+				<span class="gm-pricing-period">{{.Period}}</span>
 			</div>
 			{{if .Features}}
-			<ul class="saas-pricing-features">
+			<ul class="gm-pricing-features">
 				{{range .Features}}
-				<li>{{svg "octicon-check" 16}} {{.}}</li>
+				<li><span class="gm-pricing-check">{{svg "octicon-check" 16}}</span> {{.}}</li>
 				{{end}}
 			</ul>
 			{{end}}
-			<a href="#" class="{{if .Featured}}saas-btn-primary{{else}}saas-btn-secondary{{end}}" style="width: 100%; justify-content: center;">
-				{{if .CTA}}{{.CTA}}{{else}}Get Started{{end}}
+			<a href="#" class="{{if .Featured}}gm-btn-primary{{else}}gm-btn-secondary{{end}}" style="width: 100%; justify-content: center;">
+				<span>{{if .CTA}}{{.CTA}}{{else}}Get Started{{end}}</span>
 			</a>
 			</div>
 		{{end}}
@@ -885,28 +1249,30 @@
 
 	<!-- Final CTA -->
 	{{if .Config.CTASection.Headline}}
-	<section class="saas-section">
-	<div class="saas-cta-gradient">
+	<section class="gm-section">
+	<div class="gm-cta-gradient gm-reveal">
 		<h2>{{.Config.CTASection.Headline}}</h2>
 		{{if .Config.CTASection.Subheadline}}
 		<p>{{.Config.CTASection.Subheadline}}</p>
 		{{end}}
-		<a href="{{if .Config.CTASection.Button.URL}}{{.Config.CTASection.Button.URL}}{{else}}{{.Repository.Link}}{{end}}" class="saas-cta-btn">
-		{{if .Config.CTASection.Button.Label}}{{.Config.CTASection.Button.Label}}{{else}}Get Started Free{{end}}
-		{{svg "octicon-arrow-right" 16}}
+		<a href="{{if .Config.CTASection.Button.URL}}{{.Config.CTASection.Button.URL}}{{else}}{{.Repository.Link}}{{end}}" class="gm-btn-primary" style="font-size: 16px; padding: 16px 36px;">
+		<span>
+			{{if .Config.CTASection.Button.Label}}{{.Config.CTASection.Button.Label}}{{else}}Get Started Free{{end}}
+			{{svg "octicon-arrow-right" 16}}
+		</span>
 		</a>
 	</div>
 	</section>
 	{{end}}
 
 	<!-- Footer -->
-	<footer class="saas-footer">
-	<div class="saas-footer-brand">
-		<div class="saas-footer-logo"></div>
-		<span style="font-size: 14px; color: var(--saas-light);">{{if .Config.Footer.Copyright}}{{.Config.Footer.Copyright}}{{else}}&copy; <script>document.write(new Date().getFullYear())</script> {{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}{{end}}</span>
+	<footer class="gm-footer">
+	<div class="gm-footer-brand">
+		<div class="gm-footer-logo"></div>
+		<span class="gm-footer-copyright">{{if .Config.Footer.Copyright}}{{.Config.Footer.Copyright}}{{else}}&copy; <script>document.write(new Date().getFullYear())</script> {{if .Config.Brand.Name}}{{.Config.Brand.Name}}{{else}}{{.Repository.Name}}{{end}}{{end}}</span>
 	</div>
 	{{if .Config.Footer.Social}}
-	<div class="saas-footer-social">
+	<div class="gm-footer-social">
 		{{range .Config.Footer.Social}}
 		<a href="{{.URL}}" title="{{.Platform}}">
 			{{if eq .Platform "twitter"}}{{svg "octicon-mention" 18}}
@@ -919,19 +1285,38 @@
 		{{end}}
 	</div>
 	{{end}}
-	<div class="saas-footer-links">
+	<div class="gm-footer-links">
 		{{if .Config.Footer.Links}}
 		{{range .Config.Footer.Links}}
-			<a href="{{.URL}}" class="saas-footer-link">{{.Label}}</a>
+			<a href="{{.URL}}" class="gm-footer-link">{{.Label}}</a>
 		{{end}}
 		{{else}}
-		<a href="{{.Repository.Link}}" class="saas-footer-link">Repository</a>
-		<a href="{{.Repository.Link}}/wiki" class="saas-footer-link">Docs</a>
-		<a href="{{.Repository.Link}}/releases" class="saas-footer-link">Releases</a>
-		<a href="{{.Repository.Link}}/issues" class="saas-footer-link">Issues</a>
+		<a href="{{.Repository.Link}}" class="gm-footer-link">Repository</a>
+		<a href="{{.Repository.Link}}/wiki" class="gm-footer-link">Docs</a>
+		<a href="{{.Repository.Link}}/releases" class="gm-footer-link">Releases</a>
+		<a href="{{.Repository.Link}}/issues" class="gm-footer-link">Issues</a>
 		{{end}}
 	</div>
 	</footer>
 </div>
 
+<script>
+/* Scroll reveal */
+(function() {
+	var reveals = document.querySelectorAll('.gm-reveal');
+	if (!reveals.length) return;
+
+	var observer = new IntersectionObserver(function(entries) {
+	entries.forEach(function(entry) {
+		if (entry.isIntersecting) {
+		entry.target.classList.add('visible');
+		observer.unobserve(entry.target);
+		}
+	});
+	}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
+
+	reveals.forEach(function(el) { observer.observe(el); });
+})();
+</script>
+
 {{template "pages/base_footer" .}}
diff --git a/templates/repo/home_sidebar_bottom.tmpl b/templates/repo/home_sidebar_bottom.tmpl
index 0c04da9379..874b6686bb 100644
--- a/templates/repo/home_sidebar_bottom.tmpl
+++ b/templates/repo/home_sidebar_bottom.tmpl
@@ -63,20 +63,23 @@
 				<div class="flex-item-title">
 					{{ctx.Locale.Tr "repo.cross_promoted"}}
 				</div>
-				<div class="flex-item-body">
+				<div class="flex-item-body cross-promote-tiles">
 					{{range .CrossPromotedRepos}}
-					<a class="tw-flex tw-items-center tw-gap-2 tw-py-1 muted" href="{{.TargetRepo.Link}}">
-						{{if .TargetRepo.Avatar}}
-						<img class="tw-rounded" style="width:24px;height:24px;object-fit:contain;" src="{{.TargetRepo.RelAvatarLink ctx}}" alt="">
-						{{else}}
-						{{svg "octicon-repo" 20}}
-						{{end}}
-						<div class="tw-flex-1 tw-min-w-0">
-							<div class="tw-font-semibold gt-ellipsis">{{if .TargetRepo.DisplayTitle}}{{.TargetRepo.DisplayTitle}}{{else}}{{.TargetRepo.FullName}}{{end}}</div>
-							{{if .TargetRepo.Description}}
-							<div class="tw-text-xs tw-text-grey gt-ellipsis">{{.TargetRepo.Description}}</div>
+					<a class="cross-promote-tile" href="{{.TargetRepo.Link}}">
+						<div class="cross-promote-tile-icon">
+							{{if .TargetRepo.Avatar}}
+							<img src="{{.TargetRepo.RelAvatarLink ctx}}" alt="">
+							{{else}}
+							{{svg "octicon-repo" 18}}
 							{{end}}
 						</div>
+						<div class="cross-promote-tile-content">
+							<div class="cross-promote-tile-name">{{if .TargetRepo.DisplayTitle}}{{.TargetRepo.DisplayTitle}}{{else}}{{.TargetRepo.FullName}}{{end}}</div>
+							{{if .TargetRepo.Description}}
+							<div class="cross-promote-tile-desc">{{.TargetRepo.Description}}</div>
+							{{end}}
+						</div>
+						<div class="cross-promote-tile-arrow">{{svg "octicon-chevron-right" 14}}</div>
 					</a>
 					{{end}}
 				</div>
@@ -85,3 +88,82 @@
 		{{end}}
 	</div>
 </div>
+
+<style>
+.cross-promote-tiles {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.cross-promote-tile {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 10px 12px;
+	border-radius: 8px;
+	border: 1px solid var(--color-secondary-alpha-40, rgba(0, 0, 0, 0.08));
+	background: var(--color-box-body);
+	color: var(--color-text);
+	text-decoration: none;
+	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
+}
+.cross-promote-tile:hover {
+	border-color: var(--color-primary-alpha-60, rgba(var(--color-primary-rgb), 0.4));
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+	transform: translateY(-1px);
+	text-decoration: none;
+	color: var(--color-text);
+}
+.cross-promote-tile-icon {
+	flex-shrink: 0;
+	width: 32px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 6px;
+	background: var(--color-secondary-alpha-20, rgba(0, 0, 0, 0.04));
+	color: var(--color-text-light);
+}
+.cross-promote-tile-icon img {
+	width: 32px;
+	height: 32px;
+	border-radius: 6px;
+	object-fit: contain;
+}
+.cross-promote-tile-icon .svg {
+	color: var(--color-text-light);
+}
+.cross-promote-tile-content {
+	flex: 1;
+	min-width: 0;
+}
+.cross-promote-tile-name {
+	font-weight: 600;
+	font-size: 13px;
+	line-height: 1.3;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.cross-promote-tile-desc {
+	font-size: 11px;
+	line-height: 1.3;
+	color: var(--color-text-light);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	margin-top: 1px;
+}
+.cross-promote-tile-arrow {
+	flex-shrink: 0;
+	color: var(--color-text-light-3, var(--color-text-light));
+	opacity: 0;
+	transform: translateX(-4px);
+	transition: opacity 0.15s, transform 0.15s;
+}
+.cross-promote-tile:hover .cross-promote-tile-arrow {
+	opacity: 0.6;
+	transform: translateX(0);
+}
+</style>