Redesign organization page around product ecosystem

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/framebyframe-ecosystem-hero.jpg filter=lfs diff=lfs merge=lfs -text

index.html

@@ -5,87 +5,173 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta
 			name="description"
-			content="FrameByFrame builds practical AI agents and efficient models for the physical world."
+			content="Open models powering FrameByFrame, Arena Live, and Aigentux."
 		/>
-		<title>FrameByFrame</title>
+		<title>FrameByFrame — Open models for real products</title>
 		<link rel="stylesheet" href="style.css" />
 	</head>
 	<body>
-		<main class="fbf-page">
+		<main class="fbf-site">
+			<header class="fbf-nav">
+				<a class="fbf-brand" href="https://huggingface.co/FrameByFrame" aria-label="FrameByFrame on Hugging Face">
+					<span class="fbf-brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
+					<span>FRAME<span>BY</span>FRAME</span>
+				</a>
+				<div class="fbf-nav-meta">
+					<span class="fbf-live-dot" aria-hidden="true"></span>
+					OPEN MODEL LAB
+				</div>
+			</header>
+
 			<section class="fbf-hero" aria-labelledby="fbf-title">
-				<div class="fbf-reel" aria-hidden="true">F<span>●</span>F</div>
-				<p class="fbf-eyebrow">FRAMEBYFRAME · ARTELLIGENCE FOUNDRY</p>
-				<h1 id="fbf-title">AI agents built for the physical world.</h1>
-				<p class="fbf-lead">
-					We build practical, efficient AI with an emphasis on local and
-					on-device models, sports analytics, privacy, and edge intelligence.
-				</p>
-				<nav class="fbf-actions" aria-label="FrameByFrame links">
-					<a
-						class="fbf-button fbf-button-primary"
-						href="https://huggingface.co/FrameByFrame?sort_models=downloads#models"
-					>
-						Explore our models <span aria-hidden="true">→</span>
-					</a>
-					<a
-						class="fbf-button fbf-button-secondary"
-						href="https://www.artelligence.ai/"
-						target="_blank"
-						rel="noreferrer"
-					>
-						Visit Artelligence ↗
-					</a>
-				</nav>
+				<img
+					class="fbf-hero-art"
+					src="https://huggingface.co/spaces/FrameByFrame/README/resolve/main/assets/framebyframe-ecosystem-hero.jpg"
+					alt="Abstract visualization connecting video intelligence, sports analytics, and AI agent orchestration"
+				/>
+				<div class="fbf-hero-shade"></div>
+				<div class="fbf-hero-grid" aria-hidden="true"></div>
+
+				<div class="fbf-hero-copy">
+					<p class="fbf-overline">OPEN MODELS · PRODUCTION SYSTEMS</p>
+					<h1 id="fbf-title">Intelligence<br />that leaves<br />the lab.</h1>
+					<p class="fbf-intro">
+						The model layer behind products for video intelligence, live sports,
+						and enterprise AI agents.
+					</p>
+				</div>
+
+				<div class="fbf-download-stat" aria-label="More than 256 thousand all-time model downloads">
+					<div class="fbf-stat-topline">
+						<span>ALL-TIME</span>
+						<span>↗</span>
+					</div>
+					<strong>256K<span>+</span></strong>
+					<p>MODEL DOWNLOADS</p>
+					<small>8 PUBLIC MODELS · AND COUNTING</small>
+				</div>
 			</section>
 
-			<section class="fbf-work" aria-labelledby="fbf-work-title">
-				<div class="fbf-section-heading">
-					<p class="fbf-kicker">OPEN WORK</p>
-					<h2 id="fbf-work-title">Small models. Real-world utility.</h2>
+			<section class="fbf-ecosystem" aria-labelledby="fbf-ecosystem-title">
+				<div class="fbf-section-intro">
+					<p class="fbf-overline">THE PRODUCT ECOSYSTEM</p>
+					<h2 id="fbf-ecosystem-title">One model lab.<br />Three ways into the real world.</h2>
+					<p>
+						FrameByFrame publishes the shared intelligence layer: privacy,
+						guardrails, language understanding, and agent capabilities that move
+						from research into working products.
+					</p>
 				</div>
 
-				<div class="fbf-grid">
-					<article class="fbf-project">
-						<span class="fbf-icon" aria-hidden="true">◈</span>
-						<h3>AI guardrails</h3>
-						<p>
-							Models for content safety, prompt-injection defense, and
-							multilingual moderation.
-						</p>
-					</article>
+				<div class="fbf-products">
+					<a class="fbf-product fbf-product-vision" href="https://www.artelligence.ai/" target="_blank" rel="noreferrer">
+						<div class="fbf-product-image" aria-hidden="true"></div>
+						<div class="fbf-product-content">
+							<div class="fbf-product-topline">
+								<span>01 / VIDEO INTELLIGENCE</span>
+								<span>↗</span>
+							</div>
+							<h3>FRAME<span>BY</span>FRAME</h3>
+							<p>
+								Computer vision, video analytics, and AI agents engineered from
+								cloud to edge.
+							</p>
+							<ul aria-label="FrameByFrame capabilities">
+								<li>AI agents</li>
+								<li>Video analytics</li>
+								<li>Edge AI</li>
+							</ul>
+						</div>
+					</a>
 
-					<article class="fbf-project">
-						<span class="fbf-icon" aria-hidden="true">◎</span>
-						<h3>Privacy and PII</h3>
-						<p>
-							Accurate Korean privacy detection and redaction designed for
-							production workflows.
-						</p>
-					</article>
+					<a class="fbf-product fbf-product-sports" href="https://www.arenalive.ai/" target="_blank" rel="noreferrer">
+						<div class="fbf-product-image" aria-hidden="true"></div>
+						<div class="fbf-product-content">
+							<div class="fbf-product-topline">
+								<span>02 / SPORTS ANALYTICS</span>
+								<span>↗</span>
+							</div>
+							<h3>ARENA LIVE</h3>
+							<p>
+								Turn any court into a smart arena with live streaming, performance
+								analytics, and AI-generated highlights.
+							</p>
+							<ul aria-label="Arena Live capabilities">
+								<li>Live streaming</li>
+								<li>Player insights</li>
+								<li>Smart venues</li>
+							</ul>
+						</div>
+					</a>
+
+					<a class="fbf-product fbf-product-agents" href="https://aigentux.com/" target="_blank" rel="noreferrer">
+						<div class="fbf-product-image" aria-hidden="true"></div>
+						<div class="fbf-product-content">
+							<div class="fbf-product-topline">
+								<span>03 / AGENT HARNESS</span>
+								<span>↗</span>
+							</div>
+							<h3>AigentUX</h3>
+							<p>
+								A white-label harness to build, orchestrate, and deploy
+								customizable enterprise AI assistants.
+							</p>
+							<ul aria-label="Aigentux capabilities">
+								<li>Orchestration</li>
+								<li>Tools &amp; memory</li>
+								<li>White-label</li>
+							</ul>
+						</div>
+					</a>
+				</div>
+			</section>
 
-					<article class="fbf-project">
-						<span class="fbf-icon" aria-hidden="true">⌘</span>
-						<h3>Language intelligence</h3>
-						<p>
-							Fast programming-language identification covering more than 100
-							languages.
-						</p>
-					</article>
+			<section class="fbf-model-layer" aria-labelledby="fbf-model-title">
+				<div class="fbf-model-heading">
+					<div>
+						<p class="fbf-overline">THE SHARED MODEL LAYER</p>
+						<h2 id="fbf-model-title">Built once.<br />Useful everywhere.</h2>
+					</div>
+					<a class="fbf-model-cta" href="https://huggingface.co/FrameByFrame?sort_models=downloads#models">
+						Browse all models <span aria-hidden="true">→</span>
+					</a>
+				</div>
 
-					<article class="fbf-project">
-						<span class="fbf-icon" aria-hidden="true">◇</span>
-						<h3>Edge AI agents</h3>
-						<p>
-							Local-first models and tool-use adapters for responsive,
-							privacy-conscious applications.
-						</p>
-					</article>
+				<div class="fbf-model-tracks">
+					<div class="fbf-track fbf-track-purple">
+						<span class="fbf-track-number">01</span>
+						<div>
+							<h3>Trust &amp; guardrails</h3>
+							<p>Prompt-injection defense, content safety, and multilingual moderation.</p>
+						</div>
+						<span class="fbf-track-line" aria-hidden="true"></span>
+					</div>
+					<div class="fbf-track fbf-track-green">
+						<span class="fbf-track-number">02</span>
+						<div>
+							<h3>Privacy &amp; PII</h3>
+							<p>Production-grade Korean PII detection and redaction models.</p>
+						</div>
+						<span class="fbf-track-line" aria-hidden="true"></span>
+					</div>
+					<div class="fbf-track fbf-track-cyan">
+						<span class="fbf-track-number">03</span>
+						<div>
+							<h3>Language &amp; tool use</h3>
+							<p>100+ language identification and function-calling adapters.</p>
+						</div>
+						<span class="fbf-track-line" aria-hidden="true"></span>
+					</div>
 				</div>
 			</section>
 
 			<footer class="fbf-footer">
-				<p>Open models from Artelligence Foundry.</p>
-				<a href="https://huggingface.co/FrameByFrame">Follow FrameByFrame</a>
+				<div>
+					<span class="fbf-live-dot" aria-hidden="true"></span>
+					MODELS IN MOTION
+				</div>
+				<p>FRAMEBYFRAME · BENGALURU, INDIA</p>
+				<a href="https://www.artelligence.ai/" target="_blank" rel="noreferrer">ARTELLIGENCE.AI ↗</a>
 			</footer>
 		</main>
 	</body>

style.css

@@ -1,231 +1,527 @@
-@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");
-
-.fbf-page {
-	--fbf-ink: #17151f;
-	--fbf-muted: #675f73;
-	--fbf-paper: #fbf9ff;
-	--fbf-panel: rgba(255, 255, 255, 0.75);
-	--fbf-line: rgba(41, 31, 56, 0.12);
-	--fbf-purple: #6d28d9;
-	--fbf-violet: #8b5cf6;
-	--fbf-orange: #f97316;
-	--fbf-shadow: 0 24px 70px rgba(55, 29, 91, 0.12);
+@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");
+
+.fbf-site {
+	--fbf-black: #050706;
+	--fbf-surface: #0b0e0c;
+	--fbf-surface-2: #111512;
+	--fbf-ink: #f0f2ef;
+	--fbf-muted: #929b95;
+	--fbf-line: rgba(240, 242, 239, 0.13);
+	--fbf-violet: #a855f7;
+	--fbf-green: #b5f500;
+	--fbf-cyan: #38bdf8;
+	--fbf-art: url("https://huggingface.co/spaces/FrameByFrame/README/resolve/main/assets/framebyframe-ecosystem-hero.jpg");
 	box-sizing: border-box;
-	max-width: 980px;
+	width: 100%;
+	max-width: 1060px;
 	margin: 0 auto;
 	overflow: hidden;
 	color: var(--fbf-ink);
-	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-	background:
-		radial-gradient(circle at 90% 5%, rgba(249, 115, 22, 0.16), transparent 29%),
-		radial-gradient(circle at 5% 35%, rgba(139, 92, 246, 0.14), transparent 34%),
-		var(--fbf-paper);
+	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+	background: var(--fbf-black);
 	border: 1px solid var(--fbf-line);
-	border-radius: 24px;
-	box-shadow: var(--fbf-shadow);
+	border-radius: 20px;
+	box-shadow: 0 32px 90px rgba(0, 0, 0, 0.3);
 }
 
-.fbf-page *,
-.fbf-page *::before,
-.fbf-page *::after {
+.fbf-site *,
+.fbf-site *::before,
+.fbf-site *::after {
 	box-sizing: border-box;
 }
 
-.fbf-hero {
-	position: relative;
-	padding: clamp(2.25rem, 7vw, 5.25rem) clamp(1.5rem, 7vw, 5.25rem) clamp(2.5rem, 6vw, 4.5rem);
+.fbf-site a {
+	color: inherit;
 }
 
-.fbf-hero::after {
-	position: absolute;
-	right: clamp(1.25rem, 5vw, 3.5rem);
-	bottom: 0;
-	left: clamp(1.25rem, 5vw, 3.5rem);
-	height: 1px;
-	content: "";
-	background: linear-gradient(90deg, transparent, var(--fbf-line) 12%, var(--fbf-line) 88%, transparent);
+.fbf-site h1,
+.fbf-site h2,
+.fbf-site h3,
+.fbf-site p {
+	margin-top: 0;
 }
 
-.fbf-reel {
+.fbf-nav {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 68px;
+	padding: 0 clamp(1.25rem, 4.5vw, 3.5rem);
+	background: rgba(5, 7, 6, 0.96);
+	border-bottom: 1px solid var(--fbf-line);
+}
+
+.fbf-brand {
 	display: inline-flex;
 	align-items: center;
-	justify-content: center;
-	min-width: 3.4rem;
-	height: 2.35rem;
-	margin-bottom: 2.25rem;
-	padding: 0 0.72rem;
-	color: white;
+	gap: 0.72rem;
 	font-family: "Space Grotesk", sans-serif;
-	font-size: 0.82rem;
+	font-size: 0.84rem;
 	font-weight: 700;
-	letter-spacing: 0.08em;
-	background: var(--fbf-ink);
-	border-radius: 999px;
-	box-shadow: 0 8px 22px rgba(23, 21, 31, 0.2);
+	letter-spacing: -0.035em;
+	text-decoration: none;
 }
 
-.fbf-reel span {
-	margin: 0 0.2rem;
-	color: var(--fbf-orange);
-	font-size: 0.58rem;
+.fbf-brand > span:last-child > span {
+	color: var(--fbf-violet);
 }
 
-.fbf-eyebrow,
-.fbf-kicker {
-	margin: 0 0 0.9rem;
-	color: var(--fbf-purple);
-	font-size: 0.7rem;
-	font-weight: 700;
-	letter-spacing: 0.17em;
+.fbf-brand-mark {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 34px;
+	height: 28px;
+	overflow: hidden;
+	background: var(--fbf-violet);
+	border-radius: 5px;
+	box-shadow: 0 0 24px rgba(168, 85, 247, 0.3);
 }
 
-.fbf-page h1,
-.fbf-page h2,
-.fbf-page h3,
-.fbf-page p {
-	margin-top: 0;
+.fbf-brand-mark i {
+	position: absolute;
+	width: 4px;
+	height: 4px;
+	background: var(--fbf-black);
+	border-radius: 50%;
 }
 
-.fbf-page h1,
-.fbf-page h2,
-.fbf-page h3 {
-	font-family: "Space Grotesk", "DM Sans", sans-serif;
+.fbf-brand-mark i:nth-child(1) {
+	left: 6px;
 }
 
-.fbf-page h1 {
-	max-width: 760px;
-	margin-bottom: 1.25rem;
-	font-size: clamp(2.55rem, 7.5vw, 5.7rem);
-	font-weight: 700;
-	line-height: 0.98;
-	letter-spacing: -0.055em;
+.fbf-brand-mark i:nth-child(3) {
+	right: 6px;
 }
 
-.fbf-lead {
-	max-width: 670px;
-	margin-bottom: 0;
+.fbf-brand-mark i:nth-child(2) {
+	width: 8px;
+	height: 8px;
+}
+
+.fbf-nav-meta,
+.fbf-footer,
+.fbf-overline,
+.fbf-product-topline,
+.fbf-stat-topline,
+.fbf-download-stat p,
+.fbf-download-stat small {
+	font-family: "DM Mono", monospace;
+	letter-spacing: 0.12em;
+}
+
+.fbf-nav-meta {
+	display: flex;
+	align-items: center;
+	gap: 0.55rem;
 	color: var(--fbf-muted);
-	font-size: clamp(1rem, 2.4vw, 1.25rem);
-	line-height: 1.62;
+	font-size: 0.64rem;
 }
 
-.fbf-actions {
+.fbf-live-dot {
+	display: inline-block;
+	width: 6px;
+	height: 6px;
+	background: var(--fbf-green);
+	border-radius: 50%;
+	box-shadow: 0 0 10px rgba(181, 245, 0, 0.75);
+}
+
+.fbf-hero {
+	position: relative;
 	display: flex;
-	flex-wrap: wrap;
-	gap: 0.75rem;
-	margin-top: 2rem;
+	align-items: flex-end;
+	min-height: clamp(570px, 74vw, 760px);
+	overflow: hidden;
+	isolation: isolate;
 }
 
-.fbf-button {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 2.85rem;
-	padding: 0.7rem 1.1rem;
-	font-size: 0.9rem;
-	font-weight: 700;
-	text-decoration: none;
-	border: 1px solid transparent;
-	border-radius: 999px;
-	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
+.fbf-hero-art,
+.fbf-hero-shade,
+.fbf-hero-grid {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.fbf-hero-art {
+	z-index: -3;
+	display: block;
+	object-fit: cover;
+	object-position: 51% center;
+	transform: scale(1.015);
 }
 
-.fbf-button:hover {
-	transform: translateY(-2px);
+.fbf-hero-shade {
+	z-index: -2;
+	background:
+		linear-gradient(90deg, rgba(5, 7, 6, 0.96) 0%, rgba(5, 7, 6, 0.72) 36%, rgba(5, 7, 6, 0.05) 72%),
+		linear-gradient(0deg, rgba(5, 7, 6, 0.94) 0%, rgba(5, 7, 6, 0.08) 48%, rgba(5, 7, 6, 0.18) 100%);
 }
 
-.fbf-button-primary {
-	color: white;
-	background: linear-gradient(135deg, var(--fbf-purple), var(--fbf-violet));
-	box-shadow: 0 10px 24px rgba(109, 40, 217, 0.22);
+.fbf-hero-grid {
+	z-index: -1;
+	op: auto;
+	height: 45%;
+	opacity: 0.18;
+	background-image:
+		linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
+		linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
+	background-size: 32px 32px;
+	mask-image: linear-gradient(to bottom, transparent, black);
 }
 
-.fbf-button-primary span {
-	margin-left: 0.45rem;
+.fbf-hero-copy {
+	width: 68%;
+	padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 6vw, 5rem);
 }
 
-.fbf-button-secondary {
-	color: var(--fbf-ink);
-	background: rgba(255, 255, 255, 0.7);
-	border-color: var(--fbf-line);
+.fbf-overline {
+	margin-bottom: 1.25rem;
+	color: var(--fbf-green);
+	font-size: 0.64rem;
+	font-weight: 500;
 }
 
-.fbf-button-secondary:hover {
-	border-color: rgba(109, 40, 217, 0.35);
+.fbf-hero h1,
+.fbf-section-intro h2,
+.fbf-model-heading h2 {
+	font-family: "Space Grotesk", sans-serif;
+	font-weight: 600;
+	letter-spacing: -0.06em;
 }
 
-.fbf-work {
-	padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.5rem, 7vw, 5.25rem);
+.fbf-hero h1 {
+	margin-bottom: 1.5rem;
+	font-size: clamp(3.5rem, 10vw, 7.6rem);
+	line-height: 0.82;
+	text-wrap: balance;
 }
 
-.fbf-section-heading {
+.fbf-intro {
+	max-width: 520px;
+	margin-bottom: 0;
+	color: #c2c9c4;
+	font-size: clamp(0.95rem, 2vw, 1.14rem);
+	line-height: 1.65;
+}
+
+.fbf-download-stat {
+	position: absolute;
+	right: clamp(1.25rem, 4vw, 3.25rem);
+	bottom: clamp(1.5rem, 5vw, 4rem);
+	width: clamp(205px, 25vw, 265px);
+	padding: 1.3rem 1.4rem 1.4rem;
+	background: rgba(8, 11, 9, 0.79);
+	border: 1px solid rgba(181, 245, 0, 0.36);
+	border-radius: 2px;
+	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35), inset 0 0 32px rgba(181, 245, 0, 0.035);
+	backdrop-filter: blur(14px);
+}
+
+.fbf-stat-topline {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 1.3rem;
+	color: var(--fbf-green);
+	font-size: 0.58rem;
+}
+
+.fbf-download-stat strong {
+	display: block;
+	margin-bottom: 0.35rem;
+	font-family: "Space Grotesk", sans-serif;
+	font-size: clamp(3.1rem, 6.5vw, 5.2rem);
+	font-weight: 600;
+	line-height: 0.9;
+	letter-spacing: -0.07em;
+}
+
+.fbf-download-stat strong span {
+	color: var(--fbf-green);
+}
+
+.fbf-download-stat p {
+	margin-bottom: 1rem;
+	font-size: 0.65rem;
+}
+
+.fbf-download-stat small {
+	display: block;
+	padding-top: 0.85rem;
+	color: var(--fbf-muted);
+	font-size: 0.52rem;
+	border-top: 1px solid var(--fbf-line);
+}
+
+.fbf-ecosystem {
+	padding: clamp(4rem, 8vw, 7.5rem) clamp(1.25rem, 6vw, 5rem);
+	background:
+		radial-gradient(circle at 0% 5%, rgba(168, 85, 247, 0.08), transparent 28%),
+		var(--fbf-black);
+}
+
+.fbf-section-intro {
 	display: grid;
-	grid-template-columns: minmax(110px, 0.35fr) minmax(0, 1fr);
-	gap: 1.5rem;
-	align-items: start;
-	margin-bottom: 2rem;
+	grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
+	column-gap: clamp(2rem, 7vw, 6rem);
+	align-items: end;
+	margin-bottom: clamp(2.5rem, 6vw, 5rem);
 }
 
-.fbf-section-heading h2 {
-	max-width: 590px;
+.fbf-section-intro .fbf-overline {
+	grid-column: 1 / -1;
+}
+
+.fbf-section-intro h2,
+.fbf-model-heading h2 {
 	margin-bottom: 0;
-	font-size: clamp(1.65rem, 4vw, 2.65rem);
-	line-height: 1.08;
-	letter-spacing: -0.035em;
+	font-size: clamp(2.45rem, 6vw, 5.4rem);
+	line-height: 0.95;
+}
+
+.fbf-section-intro > p:last-child {
+	margin-bottom: 0;
+	color: var(--fbf-muted);
+	font-size: 0.94rem;
+	line-height: 1.72;
 }
 
-.fbf-grid {
+.fbf-products {
 	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 0.9rem;
+	gap: 1rem;
 }
 
-.fbf-project {
-	min-height: 205px;
-	padding: 1.45rem;
-	background: var(--fbf-panel);
+.fbf-product {
+	position: relative;
+	display: grid;
+	grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
+	min-height: 330px;
+	overflow: hidden;
+	text-decoration: none;
+	background: var(--fbf-surface);
 	border: 1px solid var(--fbf-line);
-	border-radius: 18px;
-	backdrop-filter: blur(8px);
-	transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
+	border-radius: 10px;
+	transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
+}
+
+.fbf-product:hover {
+	transform: translateY(-4px);
+	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.3);
+}
+
+.fbf-product-vision:hover {
+	border-color: rgba(168, 85, 247, 0.65);
+}
+
+.fbf-product-sports:hover {
+	border-color: rgba(181, 245, 0, 0.55);
+}
+
+.fbf-product-agents:hover {
+	border-color: rgba(56, 189, 248, 0.6);
 }
 
-.fbf-project:hover {
-	transform: translateY(-3px);
-	border-color: rgba(109, 40, 217, 0.25);
-	box-shadow: 0 14px 30px rgba(55, 29, 91, 0.08);
+.fbf-product-image {
+	position: relative;
+	min-height: 250px;
+	background-image: var(--fbf-art);
+	background-repeat: no-repeat;
+	background-size: auto 110%;
+	filter: saturate(1.12) contrast(1.04);
+}
+
+.fbf-product-image::after {
+	position: absolute;
+	inset: 0;
+	content: "";
+	background: linear-gradient(90deg, transparent 40%, var(--fbf-surface) 100%);
+}
+
+.fbf-product-vision .fbf-product-image {
+	background-position: 4% center;
 }
 
-.fbf-icon {
+.fbf-product-sports .fbf-product-image {
+	background-position: 50% center;
+}
+
+.fbf-product-agents .fbf-product-image {
+	background-position: 96% center;
+}
+
+.fbf-product-content {
 	display: flex;
-	align-items: center;
+	flex-direction: column;
 	justify-content: center;
-	width: 2.2rem;
-	height: 2.2rem;
-	margin-bottom: 2rem;
-	color: var(--fbf-purple);
-	font-size: 1.05rem;
-	background: rgba(109, 40, 217, 0.08);
-	border-radius: 10px;
+	padding: clamp(1.6rem, 4vw, 3.5rem);
 }
 
-.fbf-project:nth-child(2) .fbf-icon,
-.fbf-project:nth-child(4) .fbf-icon {
-	color: #c2410c;
-	background: rgba(249, 115, 22, 0.1);
+.fbf-product-topline {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 2.5rem;
+	font-size: 0.58rem;
+}
+
+.fbf-product-vision .fbf-product-topline,
+.fbf-product-vision h3 > span {
+	color: var(--fbf-violet);
+}
+
+.fbf-product-sports .fbf-product-topline {
+	color: var(--fbf-green);
+}
+
+.fbf-product-agents .fbf-product-topline {
+	color: var(--fbf-cyan);
+}
+
+.fbf-product h3 {
+	margin-bottom: 0.85rem;
+	font-family: "Space Grotesk", sans-serif;
+	font-size: clamp(1.75rem, 4vw, 3.1rem);
+	line-height: 1;
+	letter-spacing: -0.055em;
+}
+
+.fbf-product p {
+	max-width: 560px;
+	margin-bottom: 1.6rem;
+	color: var(--fbf-muted);
+	font-size: 0.92rem;
+	line-height: 1.65;
+}
+
+.fbf-product ul {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.4rem;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.fbf-product li {
+	padding: 0.36rem 0.62rem;
+	color: #c2c9c4;
+	font-family: "DM Mono", monospace;
+	font-size: 0.55rem;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	background: rgba(255, 255, 255, 0.04);
+	border: 1px solid var(--fbf-line);
+	border-radius: 999px;
+}
+
+.fbf-model-layer {
+	padding: clamp(4rem, 8vw, 7.5rem) clamp(1.25rem, 6vw, 5rem);
+	background:
+		linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
+		linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
+		var(--fbf-surface);
+	background-size: 34px 34px;
+	border-top: 1px solid var(--fbf-line);
+}
+
+.fbf-model-heading {
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	gap: 2rem;
+	margin-bottom: clamp(3rem, 7vw, 5.5rem);
+}
+
+.fbf-model-cta {
+	display: inline-flex;
+	align-items: center;
+	justify-content: space-between;
+	min-width: 190px;
+	padding: 0.9rem 1rem;
+	font-family: "DM Mono", monospace;
+	font-size: 0.62rem;
+	letter-spacing: 0.04em;
+	text-decoration: none;
+	background: var(--fbf-ink);
+	border: 1px solid var(--fbf-ink);
+	color: var(--fbf-black) !important;
+	transition: background 160ms ease, color 160ms ease;
+}
+
+.fbf-model-cta:hover {
+	color: var(--fbf-ink) !important;
+	background: transparent;
+}
+
+.fbf-model-tracks {
+	border-top: 1px solid var(--fbf-line);
+}
+
+.fbf-track {
+	position: relative;
+	display: grid;
+	grid-template-columns: 52px minmax(0, 1fr) minmax(130px, 0.42fr);
+	gap: 1.2rem;
+	align-items: center;
+	min-height: 135px;
+	padding: 1.6rem 0;
+	border-bottom: 1px solid var(--fbf-line);
+}
+
+.fbf-track-number {
+	align-self: start;
+	padding-top: 0.35rem;
+	color: var(--fbf-muted);
+	font-family: "DM Mono", monospace;
+	font-size: 0.65rem;
 }
 
-.fbf-project h3 {
-	margin-bottom: 0.55rem;
-	font-size: 1.05rem;
-	letter-spacing: -0.015em;
+.fbf-track h3 {
+	margin-bottom: 0.4rem;
+	font-family: "Space Grotesk", sans-serif;
+	font-size: clamp(1.25rem, 2.5vw, 2rem);
+	letter-spacing: -0.035em;
 }
 
-.fbf-project p {
+.fbf-track p {
+	max-width: 530px;
 	margin-bottom: 0;
 	color: var(--fbf-muted);
-	font-size: 0.88rem;
-	line-height: 1.58;
+	font-size: 0.83rem;
+	line-height: 1.55;
+}
+
+.fbf-track-line {
+	position: relative;
+	display: block;
+	height: 1px;
+	background: currentColor;
+}
+
+.fbf-track-line::after {
+	position: absolute;
+	top: -3px;
+	right: 0;
+	width: 7px;
+	height: 7px;
+	content: "";
+	background: currentColor;
+	border-radius: 50%;
+	box-shadow: 0 0 14px currentColor;
+}
+
+.fbf-track-purple .fbf-track-line {
+	color: var(--fbf-violet);
+}
+
+.fbf-track-green .fbf-track-line {
+	color: var(--fbf-green);
+}
+
+.fbf-track-cyan .fbf-track-line {
+	color: var(--fbf-cyan);
 }
 
 .fbf-footer {
@@ -233,85 +529,151 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: 1rem;
-	padding: 1.3rem clamp(1.5rem, 7vw, 5.25rem);
+	min-height: 78px;
+	padding: 1.25rem clamp(1.25rem, 4.5vw, 3.5rem);
 	color: var(--fbf-muted);
-	font-size: 0.8rem;
-	background: rgba(109, 40, 217, 0.045);
+	font-size: 0.54rem;
+	background: var(--fbf-black);
 	border-top: 1px solid var(--fbf-line);
 }
 
+.fbf-footer div {
+	display: flex;
+	align-items: center;
+	gap: 0.55rem;
+}
+
 .fbf-footer p {
 	margin-bottom: 0;
 }
 
 .fbf-footer a {
-	color: var(--fbf-purple);
-	font-weight: 700;
+	color: var(--fbf-ink);
 	text-decoration: none;
 }
 
 .fbf-footer a:hover {
-	text-decoration: underline;
+	color: var(--fbf-green);
 }
 
-@media (max-width: 640px) {
-	.fbf-page {
-		border-radius: 18px;
+@media (max-width: 760px) {
+	.fbf-site {
+		border-radius: 12px;
+	}
+
+	.fbf-hero {
+		align-items: flex-start;
+		min-height: 700px;
+	}
+
+	.fbf-hero-art {
+		object-position: 45% center;
+	}
+
+	.fbf-hero-shade {
+		background:
+			linear-gradient(180deg, rgba(5, 7, 6, 0.88) 0%, rgba(5, 7, 6, 0.18) 42%, rgba(5, 7, 6, 0.94) 100%),
+			linear-gradient(90deg, rgba(5, 7, 6, 0.52), transparent);
+	}
+
+	.fbf-hero-copy {
+		width: 100%;
+		padding-top: 3.5rem;
+	}
+
+	.fbf-hero h1 {
+		font-size: clamp(3.35rem, 15vw, 5.8rem);
+	}
+
+	.fbf-intro {
+		max-width: 440px;
 	}
 
-	.fbf-section-heading,
-	.fbf-grid {
+	.fbf-download-stat {
+		right: 1.25rem;
+		bottom: 1.5rem;
+		left: 1.25rem;
+		width: auto;
+	}
+
+	.fbf-section-intro {
 		grid-template-columns: 1fr;
+		row-gap: 1.4rem;
 	}
 
-	.fbf-section-heading {
-		gap: 0.3rem;
+	.fbf-product {
+		grid-template-columns: 1fr;
 	}
 
-	.fbf-actions,
-	.fbf-footer {
+	.fbf-product-image {
+		min-height: 230px;
+		background-size: 145% auto;
+	}
+
+	.fbf-product-image::after {
+		background: linear-gradient(180deg, transparent 45%, var(--fbf-surface) 100%);
+	}
+
+	.fbf-product-vision .fbf-product-image {
+		background-position: left center;
+	}
+
+	.fbf-product-sports .fbf-product-image {
+		background-position: center center;
+	}
+
+	.fbf-product-agents .fbf-product-image {
+		background-position: right center;
+	}
+
+	.fbf-model-heading {
 		align-items: stretch;
 		flex-direction: column;
 	}
 
-	.fbf-button {
+	.fbf-model-cta {
 		width: 100%;
 	}
 
-	.fbf-project {
-		min-height: auto;
+	.fbf-track {
+		grid-template-columns: 36px minmax(0, 1fr);
 	}
 
-	.fbf-icon {
-		margin-bottom: 1.25rem;
+	.fbf-track-line {
+		display: none;
 	}
-}
 
-@media (prefers-reduced-motion: reduce) {
-	.fbf-button,
-	.fbf-project {
-		transition: none;
+	.fbf-footer {
+		align-items: flex-start;
+		flex-direction: column;
 	}
 }
 
-@media (prefers-color-scheme: dark) {
-	.fbf-page {
-		--fbf-ink: #f8f5ff;
-		--fbf-muted: #b9b0c6;
-		--fbf-paper: #17131d;
-		--fbf-panel: rgba(34, 27, 43, 0.82);
-		--fbf-line: rgba(233, 225, 244, 0.13);
-		--fbf-purple: #b69cff;
-		--fbf-violet: #8b5cf6;
-		--fbf-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
+@media (max-width: 430px) {
+	.fbf-nav-meta {
+		display: none;
+	}
+
+	.fbf-hero {
+		min-height: 675px;
 	}
 
-	.fbf-button-primary {
-		color: white;
+	.fbf-hero h1 {
+		font-size: 3.55rem;
 	}
 
-	.fbf-button-secondary {
-		color: var(--fbf-ink);
-		background: rgba(255, 255, 255, 0.035);
+	.fbf-product-content {
+		padding: 1.45rem;
+	}
+
+	.fbf-footer p {
+		display: none;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.fbf-product,
+	.fbf-model-cta {
+		transition: none;
 	}
 }