website: add promo YouTube embed and refine intro copy

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: thedavidweng

website/src/pages/index.astro

@@ -38,6 +38,9 @@ const features = [
 	},
 ];
 
+const promoVideoId = 'vjHybT9BPU4';
+const promoEmbedUrl = `https://www.youtube.com/embed/${promoVideoId}?rel=0`;
+
 const docsList = [
 	{ name: 'docs/PRD.md', title: 'Product requirements', desc: 'Why money exists, what it commits to, and what it is not.', path: 'docs/PRD.md' },
 	{ name: 'docs/ARCHITECTURE.md', title: 'Architecture', desc: 'Module boundaries, data flow, and contract design.', path: 'docs/ARCHITECTURE.md' },
@@ -74,6 +77,7 @@ const docsList = [
 					<span>money</span>
 				</a>
 				<nav class="nav" aria-label="Page">
+					<a href="#intro-video">Watch</a>
 					<a href="#problem">Why</a>
 					<a href="#features">Features</a>
 					<a href="#quick-start">Quick start</a>
@@ -155,6 +159,30 @@ const docsList = [
 				</aside>
 			</section>
 
+			<!-- ============================ Promo video ============================ -->
+			<section id="intro-video" class="intro-video" aria-labelledby="intro-video-heading">
+				<p class="section-eyebrow">Introduction</p>
+				<h2 id="intro-video-heading">See money in action</h2>
+				<p class="section-lede intro-video-lede">
+					A product introduction: what money does, how the CLI fits in, and how JSON contracts work for external agents.
+				</p>
+				<div class="video-shell">
+					<div class="video-frame">
+						<iframe
+							src={promoEmbedUrl}
+							title="money — product introduction"
+							loading="lazy"
+							allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+							referrerpolicy="strict-origin-when-cross-origin"
+							allowfullscreen
+						></iframe>
+					</div>
+				</div>
+				<p class="video-caption">
+					Hosted on YouTube · <a href={`https://youtu.be/${promoVideoId}`}>Open in new tab</a>
+				</p>
+			</section>
+
 			<!-- ============================ Why ============================ -->
 			<section id="problem" aria-labelledby="problem-heading">
 				<p class="section-eyebrow">Why money</p>

website/src/styles/global.css

@@ -606,6 +606,91 @@ section > h2 {
 	}
 }
 
+/* ------------------------------------------------------------------ */
+/* Promo video (YouTube embed)                                         */
+/* ------------------------------------------------------------------ */
+
+.intro-video {
+	text-align: center;
+}
+
+.intro-video .section-eyebrow,
+.intro-video h2,
+.intro-video .intro-video-lede {
+	margin-inline: auto;
+}
+
+.intro-video-lede {
+	max-width: 38rem;
+}
+
+.video-shell {
+	max-width: min(52rem, 100%);
+	margin-inline: auto;
+	margin-top: 1.5rem;
+}
+
+.video-frame {
+	position: relative;
+	width: 100%;
+	aspect-ratio: 16 / 9;
+	border-radius: var(--radius);
+	overflow: hidden;
+	border: 1px solid var(--border);
+	background: #060807;
+	box-shadow:
+		0 1px 0 rgba(255, 255, 255, 0.03) inset,
+		0 24px 48px -18px rgba(0, 0, 0, 0.55),
+		0 10px 20px -10px rgba(0, 0, 0, 0.4);
+}
+
+.video-frame::before {
+	content: "";
+	position: absolute;
+	inset: -1px;
+	border-radius: inherit;
+	background: linear-gradient(
+		135deg,
+		rgba(201, 168, 92, 0.16),
+		transparent 35%,
+		transparent 65%,
+		rgba(95, 143, 106, 0.14)
+	);
+	-webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
+	-webkit-mask-composite: xor;
+	mask-composite: exclude;
+	padding: 1px;
+	pointer-events: none;
+	z-index: 1;
+	opacity: 0.65;
+}
+
+.video-frame iframe {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	border: 0;
+	z-index: 0;
+}
+
+.video-caption {
+	margin: 1rem 0 0;
+	font-family: var(--font-mono);
+	font-size: 0.78rem;
+	color: var(--text-dim);
+}
+
+.video-caption a {
+	color: var(--text-muted);
+	text-decoration: none;
+}
+
+.video-caption a:hover {
+	color: var(--accent);
+	text-decoration: underline;
+}
+
 /* ------------------------------------------------------------------ */
 /* Why / Problem                                                       */
 /* ------------------------------------------------------------------ */