Add landing page at / (CTA enters app at /index.html)

forge/api.py

@@ -15,7 +15,7 @@ from pathlib import Path
 
 from fastapi import Body, FastAPI, HTTPException, Query
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import StreamingResponse
+from fastapi.responses import FileResponse, StreamingResponse
 from fastapi.staticfiles import StaticFiles
 
 from . import db, engine, scraper
@@ -37,6 +37,15 @@ def health():
     return {"ok": True, "llm_up": scraper._llm_up()}
 
 
+@app.get("/")
+def landing():
+    """Marketing landing page is the homepage; its CTA enters the app at /index.html."""
+    page = FRONTEND_DIR / "landing.html"
+    if page.is_file():
+        return FileResponse(str(page))
+    return FileResponse(str(FRONTEND_DIR / "index.html"))
+
+
 @app.get("/graph")
 def graph():
     """All nodes + edges for the initial force-graph render."""

frontend/landing.css

@@ -0,0 +1,777 @@
+/* ============================================================================
+   FORGE — landing page specific styles. Layered on top of styles.css
+   ============================================================================ */
+
+.lp {
+  min-height: 100vh;
+  position: relative;
+  z-index: 1;
+}
+.lp-shell {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 0 32px;
+}
+
+/* ── Sticky top nav ───────────────────────────────────────────────────── */
+.lp-nav {
+  position: sticky; top: 0;
+  z-index: 20;
+  background: linear-gradient(180deg, rgba(15,10,5,0.92) 0%, rgba(15,10,5,0.75) 100%);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(212, 164, 68, 0.18);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
+}
+.lp-nav-inner {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 14px 32px;
+  display: flex; align-items: center; gap: 24px;
+}
+.lp-nav .brand {
+  display: flex; align-items: center; gap: 12px;
+}
+.lp-nav .brand .mark {
+  width: 32px; height: 32px;
+  display: grid; place-items: center;
+  background: radial-gradient(circle at 50% 65%, #4a1c0a 0%, #0f0805 70%);
+  border: 1px solid #5a3010;
+  box-shadow: inset 0 0 12px rgba(255, 106, 31, 0.55), 0 0 10px rgba(255,106,31,0.20);
+}
+.lp-nav .brand .name {
+  font-family: var(--f-display);
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  color: #f6e4c8;
+  text-shadow: 0 1px 0 #000, 0 0 8px rgba(255, 138, 61, 0.25);
+}
+.lp-nav .links {
+  margin-left: auto;
+  display: flex; align-items: center; gap: 24px;
+  font-family: var(--f-display);
+  font-size: 11px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+}
+.lp-nav .links a {
+  color: var(--bone-3);
+  text-decoration: none;
+  padding: 6px 0;
+  border-bottom: 1px solid transparent;
+  transition: color 160ms ease, border 160ms ease;
+}
+.lp-nav .links a:hover { color: var(--brass-1); border-bottom-color: var(--brass-1); }
+.lp-nav .cta-mini {
+  font-family: var(--f-display);
+  font-size: 11px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  padding: 8px 16px;
+  color: #fff5e8;
+  background: linear-gradient(180deg, #ff8a3d 0%, #c46822 100%);
+  border: 1px solid #6a2a08;
+  text-decoration: none;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 6px rgba(0,0,0,0.5), 0 0 8px var(--ember-glow);
+}
+.lp-nav .cta-mini:hover {
+  background: linear-gradient(180deg, #ffba5e 0%, #ff8a3d 100%);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 8px rgba(0,0,0,0.6), 0 0 16px var(--ember-1);
+}
+
+/* ── Hero ─────────────────────────────────────────────────────────────── */
+.lp-hero {
+  padding: 90px 0 100px;
+  position: relative;
+  display: grid;
+  grid-template-columns: 1.15fr 1fr;
+  gap: 60px;
+  align-items: center;
+}
+.lp-hero::before {
+  /* ember bloom under the hero */
+  content: "";
+  position: absolute; left: 50%; bottom: -40px;
+  width: 80%; height: 220px;
+  transform: translateX(-50%);
+  background: radial-gradient(ellipse at 50% 100%, rgba(255, 106, 31, 0.18), transparent 60%);
+  pointer-events: none;
+}
+.lp-eyebrow {
+  font-family: var(--f-mono);
+  font-size: 11px;
+  letter-spacing: 0.30em;
+  text-transform: uppercase;
+  color: var(--brass-2);
+  margin-bottom: 22px;
+  display: inline-flex; align-items: center; gap: 12px;
+}
+.lp-eyebrow::before, .lp-eyebrow::after {
+  content: "";
+  display: inline-block;
+  width: 28px; height: 1px;
+  background: linear-gradient(90deg, transparent, var(--brass-2));
+}
+.lp-eyebrow::after { background: linear-gradient(90deg, var(--brass-2), transparent); }
+
+.lp-title {
+  font-family: var(--f-display);
+  font-size: 92px;
+  font-weight: 600;
+  line-height: 0.92;
+  letter-spacing: 0.04em;
+  color: #f6e4c8;
+  margin: 0 0 28px;
+  text-shadow:
+    0 1px 0 #000,
+    0 2px 0 #000,
+    0 0 24px rgba(255, 138, 61, 0.25);
+}
+.lp-title em {
+  font-style: normal;
+  background: linear-gradient(180deg, #ffba5e 0%, #ff6a1f 70%, #8a3010 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: inline-block;
+}
+.lp-subtitle {
+  font-family: var(--f-serif);
+  font-style: italic;
+  font-size: 22px;
+  line-height: 1.45;
+  color: var(--bone-2);
+  margin: 0 0 38px;
+  max-width: 540px;
+  letter-spacing: 0.005em;
+}
+.lp-subtitle strong {
+  color: var(--brass-1);
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+.lp-cta-row {
+  display: flex; align-items: center; gap: 18px;
+  margin-top: 8px;
+}
+.lp-cta-primary {
+  font-family: var(--f-display);
+  font-size: 13px;
+  letter-spacing: 0.26em;
+  text-transform: uppercase;
+  padding: 16px 28px;
+  color: #fff5e8;
+  background: linear-gradient(180deg, #ff8a3d 0%, #c46822 100%);
+  border: 1px solid #2a1a08;
+  text-decoration: none;
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.30),
+    inset 0 -2px 0 rgba(0,0,0,0.30),
+    0 4px 14px rgba(0,0,0,0.5),
+    0 0 16px var(--ember-glow);
+  position: relative;
+  transition: transform 120ms ease, box-shadow 200ms ease;
+  cursor: pointer;
+  display: inline-flex; align-items: center; gap: 12px;
+}
+.lp-cta-primary::before, .lp-cta-primary::after {
+  content: "";
+  position: absolute; top: 50%; transform: translateY(-50%);
+  width: 6px; height: 6px;
+  background: #ffba5e;
+  box-shadow: 0 0 6px #ffba5e;
+}
+.lp-cta-primary::before { left: -3px; }
+.lp-cta-primary::after  { right: -3px; }
+.lp-cta-primary:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.40),
+    inset 0 -2px 0 rgba(0,0,0,0.30),
+    0 6px 18px rgba(0,0,0,0.55),
+    0 0 28px var(--ember-1);
+}
+.lp-cta-secondary {
+  font-family: var(--f-display);
+  font-size: 12px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  padding: 16px 22px;
+  color: var(--bone-2);
+  background: transparent;
+  border: 1px solid var(--steel-2);
+  text-decoration: none;
+}
+.lp-cta-secondary:hover { color: var(--bone-1); border-color: var(--brass-2); }
+
+/* ── Hero right: floating anvil + mini graph demo ────────────────────── */
+.lp-hero-art {
+  position: relative;
+  min-height: 480px;
+  display: grid;
+  place-items: center;
+}
+.lp-hero-art::before {
+  /* glowing forge ring behind the demo */
+  content: "";
+  position: absolute;
+  width: 480px; height: 480px;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 50% 60%, rgba(255, 106, 31, 0.18) 0%, transparent 60%);
+  pointer-events: none;
+}
+.lp-hero-art::after {
+  content: "";
+  position: absolute;
+  width: 360px; height: 360px;
+  border-radius: 50%;
+  border: 1px dashed rgba(212, 164, 68, 0.18);
+  animation: gentle-rotate 60s linear infinite;
+}
+.demo-svg {
+  position: relative;
+  width: 460px; height: 460px;
+  display: block;
+}
+
+/* ── Sections ─────────────────────────────────────────────────────────── */
+section.lp-section { padding: 80px 0; position: relative; scroll-margin-top: 80px; }
+.lp-section + .lp-section { border-top: 1px solid rgba(212, 164, 68, 0.08); }
+.lp-section-head {
+  text-align: center;
+  margin-bottom: 56px;
+}
+.lp-section-eyebrow {
+  font-family: var(--f-mono);
+  font-size: 11px;
+  letter-spacing: 0.30em;
+  text-transform: uppercase;
+  color: var(--brass-1);
+  margin-bottom: 14px;
+}
+.lp-section-title {
+  font-family: var(--f-display);
+  font-size: 44px;
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  color: #f6e4c8;
+  margin: 0 0 14px;
+  text-shadow: 0 1px 0 #000;
+}
+.lp-section-sub {
+  font-family: var(--f-serif);
+  font-style: italic;
+  font-size: 17px;
+  line-height: 1.5;
+  color: var(--bone-3);
+  max-width: 620px;
+  margin: 0 auto;
+}
+
+/* What it does — three carved tablets */
+.lp-tablets {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+}
+.lp-tablet {
+  position: relative;
+  padding: 38px 28px 32px;
+  background:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.22  0 0 0 0 0.12  0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"),
+    linear-gradient(180deg, rgba(40,30,18,0.45) 0%, rgba(15,12,8,0.85) 100%);
+  background-blend-mode: overlay, normal;
+  border: 1px solid rgba(70, 50, 28, 0.7);
+  border-top: 2px solid var(--brass-2);
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.04),
+    0 8px 24px rgba(0,0,0,0.5);
+}
+.lp-tablet::before, .lp-tablet::after {
+  /* brass corner ornaments top-left + top-right */
+  content: "";
+  position: absolute; top: -1px;
+  width: 8px; height: 8px;
+  border: 2px solid var(--brass-2);
+}
+.lp-tablet::before { left: -1px; border-right: none; border-bottom: none; }
+.lp-tablet::after  { right: -1px; border-left: none; border-bottom: none; }
+.lp-tablet-icon {
+  width: 56px; height: 56px;
+  margin-bottom: 22px;
+  display: grid; place-items: center;
+  border: 1px solid rgba(212, 164, 68, 0.30);
+  background:
+    radial-gradient(circle at 50% 35%, rgba(255, 138, 61, 0.18) 0%, rgba(0,0,0,0) 70%),
+    #0a0805;
+  color: var(--brass-1);
+  position: relative;
+}
+.lp-tablet-icon::before, .lp-tablet-icon::after {
+  /* corner ornaments */
+  content: "";
+  position: absolute;
+  width: 4px; height: 4px;
+  border: 1px solid var(--brass-2);
+}
+.lp-tablet-icon::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
+.lp-tablet-icon::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
+
+.lp-tablet-num {
+  position: absolute; top: 18px; right: 22px;
+  font-family: var(--f-display);
+  font-size: 38px;
+  font-weight: 600;
+  color: rgba(212, 164, 68, 0.20);
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+.lp-tablet h3 {
+  font-family: var(--f-display);
+  font-size: 22px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  margin: 0 0 12px;
+  color: #fff5e8;
+}
+.lp-tablet p {
+  font-family: var(--f-serif);
+  font-size: 15px;
+  line-height: 1.55;
+  color: var(--bone-2);
+  margin: 0;
+}
+.lp-tablet p em {
+  color: var(--brass-1);
+  font-style: italic;
+}
+
+/* How to use — alternating numbered rows */
+.lp-steps { display: flex; flex-direction: column; gap: 60px; }
+.lp-step {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 60px;
+  align-items: center;
+}
+.lp-step:nth-child(even) .lp-step-text { order: 2; }
+.lp-step:nth-child(even) .lp-step-art  { order: 1; }
+.lp-step-num {
+  display: inline-block;
+  font-family: var(--f-display);
+  font-size: 13px;
+  letter-spacing: 0.30em;
+  text-transform: uppercase;
+  color: var(--brass-1);
+  padding-bottom: 8px;
+  margin-bottom: 14px;
+  border-bottom: 1px solid var(--brass-2);
+}
+.lp-step h3 {
+  font-family: var(--f-display);
+  font-size: 36px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  margin: 0 0 18px;
+  color: #fff5e8;
+  line-height: 1.05;
+}
+.lp-step p {
+  font-family: var(--f-serif);
+  font-size: 16.5px;
+  line-height: 1.6;
+  color: var(--bone-2);
+  margin: 0 0 14px;
+  max-width: 460px;
+}
+.lp-step .quote {
+  font-family: var(--f-serif);
+  font-style: italic;
+  font-size: 13px;
+  color: var(--bone-3);
+  border-left: 2px solid var(--brass-2);
+  padding-left: 14px;
+  margin: 18px 0 0;
+  max-width: 460px;
+}
+.lp-step-art {
+  position: relative;
+  min-height: 320px;
+  display: grid; place-items: center;
+  background:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.20  0 0 0 0 0.10  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"),
+    linear-gradient(180deg, rgba(20,14,10,0.6) 0%, rgba(8,6,4,0.85) 100%);
+  background-blend-mode: overlay, normal;
+  border: 1px solid rgba(60, 42, 22, 0.6);
+  padding: 32px;
+}
+
+/* Tier system explainer */
+.lp-tiers {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 22px;
+}
+.lp-tier {
+  padding: 30px 26px;
+  background: linear-gradient(180deg, rgba(20,14,10,0.5) 0%, rgba(8,6,4,0.8) 100%);
+  border: 1px solid rgba(60, 42, 22, 0.7);
+  border-left: 3px solid var(--lp-tier-color, var(--brass-2));
+  position: relative;
+}
+.lp-tier-1 { --lp-tier-color: var(--brass-1); }
+.lp-tier-2 { --lp-tier-color: var(--brass-2); }
+.lp-tier-3 { --lp-tier-color: var(--brass-3); }
+
+.lp-tier-coin {
+  width: 48px; height: 48px;
+  border-radius: 50%;
+  margin-bottom: 18px;
+  border: 1px solid rgba(0,0,0,0.5);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 3px rgba(0,0,0,0.6);
+  display: grid; place-items: center;
+  font-family: var(--f-display);
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--coal-0);
+  letter-spacing: 0.02em;
+}
+.lp-tier-1 .lp-tier-coin { background: radial-gradient(circle at 35% 30%, #ffd09a, #ff8a3d 50%, #6a2a08); box-shadow: 0 0 14px var(--tier1-glow), inset 0 1px 0 rgba(255,255,255,0.25); }
+.lp-tier-2 .lp-tier-coin { background: radial-gradient(circle at 35% 30%, #b8d4f0, #5b9bd8 50%, #1c3a5a); box-shadow: 0 0 8px var(--tier2-glow), inset 0 1px 0 rgba(255,255,255,0.22); }
+.lp-tier-3 .lp-tier-coin { background: radial-gradient(circle at 35% 30%, #cac4b6, #9a9285 50%, #3a3528); box-shadow: 0 0 4px var(--tier3-glow), inset 0 1px 0 rgba(255,255,255,0.18); }
+
+.lp-tier-label {
+  font-family: var(--f-display);
+  font-size: 13px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: var(--lp-tier-color);
+  margin-bottom: 6px;
+}
+.lp-tier h4 {
+  font-family: var(--f-display);
+  font-size: 22px;
+  font-weight: 500;
+  margin: 0 0 14px;
+  color: #fff5e8;
+  letter-spacing: 0.01em;
+}
+.lp-tier p {
+  font-family: var(--f-serif);
+  font-size: 14.5px;
+  line-height: 1.55;
+  color: var(--bone-2);
+  margin: 0 0 14px;
+}
+.lp-tier .example {
+  font-family: var(--f-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.02em;
+  color: var(--bone-4);
+  padding: 8px 10px;
+  background: var(--coal-0);
+  border-left: 2px solid var(--lp-tier-color);
+}
+
+/* Scraper / live data section */
+.lp-scraper {
+  display: grid;
+  grid-template-columns: 1.1fr 1fr;
+  gap: 60px;
+  align-items: center;
+}
+.lp-scraper p { font-family: var(--f-serif); font-size: 16px; line-height: 1.6; color: var(--bone-2); max-width: 520px; }
+.lp-scraper p em { font-style: italic; color: var(--brass-2); }
+.lp-pipeline {
+  display: flex; flex-direction: column; gap: 10px;
+  padding: 24px;
+  background: var(--coal-0);
+  border: 1px solid rgba(60, 42, 22, 0.6);
+  font-family: var(--f-mono);
+  font-size: 11.5px;
+  position: relative;
+}
+.lp-pipeline::before {
+  content: "scraper.log";
+  position: absolute; top: -10px; left: 16px;
+  background: var(--coal-0);
+  padding: 0 8px;
+  font-family: var(--f-display);
+  font-size: 10px;
+  letter-spacing: 0.20em;
+  text-transform: uppercase;
+  color: var(--brass-2);
+}
+.lp-pipeline-step {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(60,42,22,0.4);
+  color: var(--bone-2);
+}
+.lp-pipeline-step:last-child { border-bottom: none; }
+.lp-pipeline-step .arrow { color: var(--ember-2); }
+.lp-pipeline-step .src { color: var(--brass-2); }
+.lp-pipeline-step .tier {
+  font-family: var(--f-display);
+  font-size: 9px;
+  padding: 1px 5px;
+  letter-spacing: 0.12em;
+  color: var(--coal-0);
+  text-transform: uppercase;
+  font-weight: 600;
+}
+.lp-pipeline-step .tier.t1 { background: var(--brass-1); }
+.lp-pipeline-step .tier.t2 { background: var(--brass-2); color: #fff; }
+.lp-pipeline-step .tier.t3 { background: var(--brass-3); }
+
+/* Final CTA strip */
+.lp-finale {
+  padding: 120px 0;
+  text-align: center;
+  position: relative;
+}
+.lp-finale::before {
+  content: "";
+  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
+  width: 700px; height: 200px;
+  background: radial-gradient(ellipse, rgba(255, 106, 31, 0.18) 0%, transparent 70%);
+  pointer-events: none;
+}
+.lp-finale-title {
+  font-family: var(--f-display);
+  font-size: 64px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  margin: 0 0 14px;
+  color: #f6e4c8;
+  position: relative;
+  text-shadow: 0 2px 0 #000, 0 0 22px rgba(255, 138, 61, 0.30);
+}
+.lp-finale-sub {
+  font-family: var(--f-serif);
+  font-style: italic;
+  font-size: 18px;
+  color: var(--bone-3);
+  margin: 0 0 38px;
+  position: relative;
+}
+.lp-finale .lp-cta-primary { font-size: 14px; padding: 18px 36px; }
+
+.lp-foot {
+  border-top: 1px solid rgba(212, 164, 68, 0.10);
+  padding: 28px 0 40px;
+  text-align: center;
+  font-family: var(--f-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.12em;
+  color: var(--bone-4);
+}
+.lp-foot a { color: var(--bone-3); text-decoration: none; border-bottom: 1px dotted var(--bone-4); }
+
+/* ── Hero mini demo: 5 nodes, cyclic state animation ─────────────────── */
+.demo-svg .lp-node { cursor: default; }
+.demo-svg .lp-aura          { fill: none; stroke: none; opacity: 0; }
+.demo-svg .lp-frame-outer   { fill: none; stroke: #2a2017; stroke-width: 2.2; }
+.demo-svg .lp-plate         { fill: var(--coal-2); stroke: rgba(0,0,0,0.5); stroke-width: 1.5; }
+.demo-svg .lp-gem           { fill: var(--type-color, #5fb3d4); opacity: 0.18; }
+.demo-svg .lp-frame         { fill: none; stroke: #6b5026; stroke-width: 1.2; }
+.demo-svg .lp-stud          { fill: #8a6a32; stroke: #2a2017; stroke-width: 0.6; }
+.demo-svg .lp-icon          { transition: stroke 240ms ease, opacity 240ms ease; opacity: 0.9; }
+.demo-svg .lp-ribbon        { fill: rgba(11,14,19,0.85); stroke: rgba(107, 80, 38, 0.7); stroke-width: 0.7; }
+.demo-svg .lp-name          {
+  fill: var(--bone-1);
+  font-family: var(--f-display);
+  font-size: 11.5px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+}
+.demo-svg .lp-lock          { opacity: 0; transition: opacity 320ms ease; }
+.demo-svg .lp-chip          { opacity: 0; transition: opacity 320ms ease; }
+
+/* type-color slots per node */
+.demo-svg .lp-center  { --type-color: var(--t-technique); }
+.demo-svg .lp-outer-1 { --type-color: var(--t-technique); }
+.demo-svg .lp-outer-2 { --type-color: var(--t-quantization); }
+.demo-svg .lp-outer-3 { --type-color: var(--t-technique); }
+.demo-svg .lp-outer-4 { --type-color: var(--t-architecture); }
+.demo-svg .lp-outer-5 { --type-color: var(--t-technique); }
+
+/* edges: base curves */
+.demo-svg .lp-edge { fill: none; stroke-linecap: round; }
+.demo-svg .lp-edge-breaks       { stroke: rgba(200,64,60,0.4); stroke-width: 1.4; }
+.demo-svg .lp-edge-requires,
+.demo-svg .lp-edge-requires-2   { stroke: rgba(255,160,60,0.35); stroke-width: 1.4; }
+.demo-svg .lp-edge-compatible,
+.demo-svg .lp-edge-compatible-2 { stroke: rgba(212,164,68,0.20); stroke-width: 1.0; }
+
+/* center → selected (red-hot) */
+.demo-svg .lp-center .lp-plate    { animation: lp-plate-select 8s ease-in-out infinite; }
+.demo-svg .lp-center .lp-frame    { animation: lp-frame-select 8s ease-in-out infinite; }
+.demo-svg .lp-center .lp-frame-outer { animation: lp-frame-outer-select 8s ease-in-out infinite; }
+.demo-svg .lp-center .lp-aura     { animation: lp-aura-select 8s ease-in-out infinite; }
+.demo-svg .lp-center .lp-stud     { animation: lp-stud-select 8s ease-in-out infinite; }
+.demo-svg .lp-center .lp-gem      { animation: lp-gem-select 8s ease-in-out infinite; }
+.demo-svg .lp-center .lp-icon     { animation: lp-icon-select 8s ease-in-out infinite; }
+.demo-svg .lp-center .lp-name     { animation: lp-name-select 8s ease-in-out infinite; }
+.demo-svg .lp-center .lp-ribbon   { animation: lp-ribbon-select 8s ease-in-out infinite; }
+
+@keyframes lp-plate-select {
+  0%, 12%, 92%, 100% { fill: var(--coal-2); filter: none; }
+  18%, 86% { fill: url(#lp-molten); filter: url(#lp-ember); }
+}
+@keyframes lp-frame-select {
+  0%, 12%, 92%, 100% { stroke: #6b5026; stroke-width: 1.2; }
+  18%, 86% { stroke: #d4a049; stroke-width: 1.5; }
+}
+@keyframes lp-frame-outer-select {
+  0%, 12%, 92%, 100% { stroke: #2a2017; }
+  18%, 86% { stroke: #3a1a08; }
+}
+@keyframes lp-aura-select {
+  0%, 12%, 92%, 100% { opacity: 0; stroke: var(--ember-1); stroke-width: 1.5; fill: none; }
+  18% { opacity: 1; stroke: var(--ember-1); stroke-width: 2; fill: none; }
+  50% { opacity: 0.4; stroke: var(--ember-1); stroke-width: 4; fill: none; }
+  86% { opacity: 1; stroke: var(--ember-1); stroke-width: 2; fill: none; }
+}
+@keyframes lp-stud-select {
+  0%, 12%, 92%, 100% { fill: #8a6a32; stroke: #2a2017; }
+  18%, 86% { fill: #d4a049; stroke: #3a1a08; }
+}
+@keyframes lp-gem-select {
+  0%, 12%, 92%, 100% { fill: var(--type-color); opacity: 0.18; }
+  18%, 86% { fill: var(--ember-1); opacity: 0.55; }
+}
+@keyframes lp-icon-select {
+  0%, 12%, 92%, 100% { stroke: var(--type-color); opacity: 0.9; }
+  18%, 86% { stroke: #fff5e8; opacity: 1; }
+}
+@keyframes lp-name-select {
+  0%, 12%, 92%, 100% { fill: var(--bone-1); }
+  18%, 86% { fill: #fff5e8; }
+}
+@keyframes lp-ribbon-select {
+  0%, 12%, 92%, 100% { fill: rgba(11,14,19,0.85); stroke: rgba(107, 80, 38, 0.7); }
+  18%, 86% { fill: rgba(40,15,5,0.92); stroke: #d4a049; }
+}
+
+/* outer-1: BLOCKED */
+.demo-svg .lp-outer-1 .lp-plate { animation: lp-plate-block 8s ease-in-out infinite; }
+.demo-svg .lp-outer-1 .lp-frame { animation: lp-frame-block 8s ease-in-out infinite; }
+.demo-svg .lp-outer-1 .lp-icon  { animation: lp-icon-block 8s ease-in-out infinite; }
+.demo-svg .lp-outer-1 .lp-aura  { animation: lp-aura-block 8s ease-in-out infinite; }
+.demo-svg .lp-outer-1 .lp-stud  { animation: lp-stud-block 8s ease-in-out infinite; }
+.demo-svg .lp-outer-1 .lp-gem   { animation: lp-gem-fade 8s ease-in-out infinite; }
+.demo-svg .lp-outer-1 .lp-name  { animation: lp-name-block 8s ease-in-out infinite; }
+.demo-svg .lp-outer-1 .lp-lock  { animation: lp-lock-show 8s ease-in-out infinite; }
+
+@keyframes lp-plate-block {
+  0%, 12%, 92%, 100% { fill: var(--coal-2); filter: none; opacity: 1; }
+  18%, 86% { fill: var(--coal-1); filter: grayscale(100%) brightness(0.55); opacity: 0.55; }
+}
+@keyframes lp-frame-block {
+  0%, 12%, 92%, 100% { stroke: #6b5026; }
+  18%, 86% { stroke: var(--rust-2); }
+}
+@keyframes lp-icon-block {
+  0%, 12%, 92%, 100% { stroke: var(--type-color); opacity: 0.9; }
+  18%, 86% { stroke: var(--rust); opacity: 0.45; }
+}
+@keyframes lp-aura-block {
+  0%, 12%, 92%, 100% { opacity: 0; }
+  18%, 86% { opacity: 0.85; stroke: var(--rust); stroke-width: 1.2; fill: none; }
+}
+@keyframes lp-stud-block {
+  0%, 12%, 92%, 100% { fill: #8a6a32; }
+  18%, 86% { fill: var(--rust-2); }
+}
+@keyframes lp-gem-fade {
+  0%, 12%, 92%, 100% { opacity: 0.18; }
+  18%, 86% { opacity: 0; }
+}
+@keyframes lp-name-block {
+  0%, 12%, 92%, 100% { fill: var(--bone-1); }
+  18%, 86% { fill: var(--rust); opacity: 0.7; }
+}
+@keyframes lp-lock-show {
+  0%, 14%, 92%, 100% { opacity: 0; }
+  20%, 86% { opacity: 1; }
+}
+
+/* outer-2: CONDITIONAL ("needs · add") */
+.demo-svg .lp-outer-2 .lp-plate { animation: lp-plate-cond 8s ease-in-out infinite; }
+.demo-svg .lp-outer-2 .lp-frame { animation: lp-frame-cond 8s ease-in-out infinite; }
+.demo-svg .lp-outer-2 .lp-icon  { animation: lp-icon-cond 8s ease-in-out infinite; }
+.demo-svg .lp-outer-2 .lp-aura  { animation: lp-aura-cond 8s ease-in-out infinite; }
+.demo-svg .lp-outer-2 .lp-stud  { animation: lp-stud-cond 8s ease-in-out infinite; }
+.demo-svg .lp-outer-2 .lp-gem   { animation: lp-gem-fade 8s ease-in-out infinite; }
+.demo-svg .lp-outer-2 .lp-name  { animation: lp-name-cond 8s ease-in-out infinite; }
+.demo-svg .lp-outer-2 .lp-chip  { animation: lp-chip-show 8s ease-in-out infinite; }
+
+@keyframes lp-plate-cond {
+  0%, 12%, 92%, 100% { fill: var(--coal-2); filter: none; opacity: 1; }
+  18%, 86% { fill: var(--coal-1); filter: grayscale(85%) brightness(0.7); opacity: 0.55; }
+}
+@keyframes lp-frame-cond {
+  0%, 12%, 92%, 100% { stroke: #6b5026; }
+  18%, 86% { stroke: #3a2f1c; }
+}
+@keyframes lp-icon-cond {
+  0%, 12%, 92%, 100% { stroke: var(--type-color); opacity: 0.9; }
+  18%, 86% { stroke: var(--bone-4); opacity: 0.5; }
+}
+@keyframes lp-aura-cond {
+  0%, 12%, 92%, 100% { opacity: 0; }
+  18%, 86% { opacity: 0.7; stroke: var(--amber); stroke-width: 1; fill: none; stroke-dasharray: 3 4; }
+}
+@keyframes lp-stud-cond {
+  0%, 12%, 92%, 100% { fill: #8a6a32; }
+  18%, 86% { fill: #3a2f1c; }
+}
+@keyframes lp-name-cond {
+  0%, 12%, 92%, 100% { fill: var(--bone-1); }
+  18%, 86% { fill: var(--bone-3); }
+}
+@keyframes lp-chip-show {
+  0%, 14%, 92%, 100% { opacity: 0; }
+  22%, 86% { opacity: 1; }
+}
+
+/* Edges: glow during the selected window */
+.demo-svg .lp-edge-breaks      { animation: lp-edge-breaks-anim   8s ease-in-out infinite; }
+.demo-svg .lp-edge-requires    { animation: lp-edge-requires-anim 8s ease-in-out infinite; }
+.demo-svg .lp-edge-requires-2  { animation: lp-edge-requires-anim 8s ease-in-out infinite; }
+.demo-svg .lp-edge-compatible,
+.demo-svg .lp-edge-compatible-2 { animation: lp-edge-compat-anim   8s ease-in-out infinite; }
+
+@keyframes lp-edge-breaks-anim {
+  0%, 12%, 92%, 100% { stroke: rgba(200,64,60,0.4); stroke-width: 1.4; filter: none; }
+  18%, 86% { stroke: var(--rust); stroke-width: 2.4; filter: drop-shadow(0 0 7px rgba(200,64,60,1)); }
+}
+@keyframes lp-edge-requires-anim {
+  0%, 12%, 92%, 100% { stroke: rgba(255,160,60,0.35); stroke-width: 1.4; filter: none; }
+  18%, 86% { stroke: var(--ember-2); stroke-width: 2.2; filter: drop-shadow(0 0 6px var(--ember-glow)); }
+}
+@keyframes lp-edge-compat-anim {
+  0%, 12%, 92%, 100% { stroke: rgba(212,164,68,0.20); stroke-width: 1.0; }
+  18%, 86% { stroke: rgba(255,191,90,0.65); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(255,138,61,0.4)); }
+}
+
+/* ── Responsive ──────────────────────────────────────────────────────── */
+@media (max-width: 920px) {
+  .lp-shell { padding: 0 22px; }
+  .lp-hero { grid-template-columns: 1fr; gap: 30px; padding: 60px 0 70px; }
+  .lp-hero-art { min-height: 320px; }
+  .lp-title { font-size: 60px; }
+  .lp-section-title { font-size: 32px; }
+  .lp-tablets { grid-template-columns: 1fr; }
+  .lp-step { grid-template-columns: 1fr; gap: 20px; }
+  .lp-step:nth-child(even) .lp-step-text { order: 1; }
+  .lp-step:nth-child(even) .lp-step-art  { order: 2; }
+  .lp-tiers { grid-template-columns: 1fr; }
+  .lp-scraper { grid-template-columns: 1fr; }
+  .lp-finale-title { font-size: 42px; }
+}

frontend/landing.html

@@ -0,0 +1,629 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Forge — compatibility graph for ML training</title>
+<meta name="description" content="Assemble a training recipe from real practitioner evidence. Watch incompatible tools dim. Forge what works.">
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+
+<link rel="stylesheet" href="styles.css">
+<link rel="stylesheet" href="landing.css">
+
+<style>
+  /* Override styles.css app-shell lock so the landing scrolls naturally */
+  html, body { height: auto !important; overflow: auto !important; }
+  html { scroll-behavior: smooth; }
+
+  /* More intense ember rain — bigger sparks, more of them, brighter trails */
+  .sparks { z-index: 0; }
+  .sparks span {
+    width: 3px; height: 3px;
+    background: var(--ember-2);
+    box-shadow:
+      0 0 8px var(--ember-1),
+      0 0 18px rgba(255, 106, 31, 0.55),
+      0 0 2px #fff5e8;
+    opacity: 0;
+  }
+  .sparks span.big {
+    width: 4px; height: 4px;
+    box-shadow:
+      0 0 12px var(--ember-1),
+      0 0 28px var(--ember-2),
+      0 0 3px #fff5e8;
+  }
+  .sparks span.trail {
+    width: 2px; height: 14px;
+    border-radius: 2px;
+    background: linear-gradient(180deg, transparent 0%, var(--ember-2) 60%, var(--ember-1) 100%);
+    box-shadow: 0 0 6px var(--ember-1);
+  }
+  @keyframes spark-fall {
+    0%   { transform: translateY(-8vh) translateX(0); opacity: 0; }
+    8%   { opacity: 0.9; }
+    50%  { transform: translateY(50vh) translateX(var(--drift, 0px)); opacity: 0.9; }
+    100% { transform: translateY(110vh) translateX(calc(var(--drift, 0px) * 2)); opacity: 0; }
+  }
+</style>
+</head>
+<body>
+<div class="sparks">
+  <span style="left: 4%;  animation-duration: 14s; animation-delay: -2s;  --drift: -18px;"></span>
+  <span class="big" style="left: 9%;  animation-duration: 18s; animation-delay: -10s; --drift: 8px;"></span>
+  <span style="left: 14%; animation-duration: 11s; animation-delay: -6s;  --drift: -12px;"></span>
+  <span class="trail" style="left: 18%; animation-duration: 9s;  animation-delay: -3s;  --drift: 4px;"></span>
+  <span style="left: 23%; animation-duration: 16s; animation-delay: -14s; --drift: -20px;"></span>
+  <span class="big" style="left: 28%; animation-duration: 13s; animation-delay: -7s;  --drift: 14px;"></span>
+  <span style="left: 33%; animation-duration: 19s; animation-delay: -1s;  --drift: -8px;"></span>
+  <span class="trail" style="left: 38%; animation-duration: 8s;  animation-delay: -5s;  --drift: -10px;"></span>
+  <span style="left: 42%; animation-duration: 15s; animation-delay: -11s; --drift: 22px;"></span>
+  <span class="big" style="left: 47%; animation-duration: 12s; animation-delay: -8s;  --drift: -6px;"></span>
+  <span style="left: 52%; animation-duration: 17s; animation-delay: -13s; --drift: 12px;"></span>
+  <span class="trail" style="left: 56%; animation-duration: 10s; animation-delay: -4s;  --drift: -18px;"></span>
+  <span style="left: 60%; animation-duration: 14s; animation-delay: -9s;  --drift: 6px;"></span>
+  <span class="big" style="left: 65%; animation-duration: 16s; animation-delay: -2s;  --drift: -14px;"></span>
+  <span style="left: 70%; animation-duration: 11s; animation-delay: -12s; --drift: 18px;"></span>
+  <span class="trail" style="left: 75%; animation-duration: 9s;  animation-delay: -6s;  --drift: -10px;"></span>
+  <span style="left: 79%; animation-duration: 18s; animation-delay: -15s; --drift: 8px;"></span>
+  <span class="big" style="left: 83%; animation-duration: 13s; animation-delay: -3s;  --drift: -22px;"></span>
+  <span style="left: 87%; animation-duration: 15s; animation-delay: -8s;  --drift: 14px;"></span>
+  <span class="trail" style="left: 91%; animation-duration: 10s; animation-delay: -1s;  --drift: -4px;"></span>
+  <span style="left: 95%; animation-duration: 17s; animation-delay: -11s; --drift: 16px;"></span>
+  <span class="big" style="left: 98%; animation-duration: 12s; animation-delay: -7s;  --drift: -12px;"></span>
+</div>
+
+<div class="lp">
+
+  <!-- ── Sticky nav ──────────────────────────────────────────────────── -->
+  <nav class="lp-nav">
+    <div class="lp-nav-inner">
+      <div class="brand">
+        <div class="mark">
+          <svg width="20" height="20" viewBox="0 0 32 32" fill="none">
+            <path d="M5 14 h17 l3 -3 h4 v4 h-3 l-2 2 h-3 v4 h2 v3 h-13 v-3 h2 v-4 h-7 z" fill="#c4934e" stroke="#2a1a08" stroke-width="0.7" stroke-linejoin="round"/>
+            <rect x="10" y="25" width="13" height="2" fill="#2a1a08"/>
+            <circle cx="17" cy="15" r="1.2" fill="#ffba5e"/>
+          </svg>
+        </div>
+        <div class="name">FORGE</div>
+      </div>
+      <div class="links">
+        <a href="#what">What</a>
+        <a href="#how">How</a>
+        <a href="#tiers">Tiers</a>
+        <a href="#scraper">Scraper</a>
+      </div>
+      <a class="cta-mini" href="index.html">Enter the Forge →</a>
+    </div>
+  </nav>
+
+  <!-- ── Hero ────────────────────────────────────────────────────────── -->
+  <section class="lp-hero lp-shell">
+    <div class="lp-hero-text">
+      <div class="lp-eyebrow">a bright data hackathon submission · 2026</div>
+      <h1 class="lp-title">Forge a<br/><em>training recipe</em><br/>that actually runs.</h1>
+      <p class="lp-subtitle">
+        A live <strong>compatibility graph</strong> for ML training components.
+        Pick your optimizer, scheduler, quantization, technique. Incompatible tools
+        <strong>grey out instantly</strong> with cited evidence from real practitioner runs.
+        Greyed means <em>not&nbsp;yet&nbsp;satisfied</em>, not forbidden — add the missing
+        ingredient and watch it re-light.
+      </p>
+      <div class="lp-cta-row">
+        <a href="index.html" class="lp-cta-primary">
+          Enter the Forge
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round">
+            <path d="M5 12h14M13 6l6 6-6 6"/>
+          </svg>
+        </a>
+        <a href="#what" class="lp-cta-secondary">Read first</a>
+      </div>
+    </div>
+
+    <!-- Mini demo: 5 nodes, looped state animation -->
+    <div class="lp-hero-art">
+      <svg class="demo-svg" viewBox="0 0 460 460">
+        <defs>
+          <radialGradient id="lp-molten" cx="50%" cy="55%" r="65%">
+            <stop offset="0%"  stop-color="#5a1f0a"/>
+            <stop offset="35%" stop-color="#3a1408"/>
+            <stop offset="70%" stop-color="#1a0807"/>
+            <stop offset="100%" stop-color="#0a0303"/>
+          </radialGradient>
+          <filter id="lp-ember" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur stdDeviation="2.4" result="b"/>
+            <feFlood flood-color="#ff6a1f" flood-opacity="0.55"/>
+            <feComposite in2="b" operator="in"/>
+            <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
+          </filter>
+          <radialGradient id="lp-brass-t1" cx="40%" cy="35%" r="75%">
+            <stop offset="0%"  stop-color="#ffd09a"/>
+            <stop offset="45%" stop-color="#ff8a3d"/>
+            <stop offset="100%" stop-color="#6a2a08"/>
+          </radialGradient>
+          <radialGradient id="lp-brass-t2" cx="40%" cy="35%" r="75%">
+            <stop offset="0%"  stop-color="#b8d4f0"/>
+            <stop offset="45%" stop-color="#5b9bd8"/>
+            <stop offset="100%" stop-color="#1c3a5a"/>
+          </radialGradient>
+          <radialGradient id="lp-brass-t3" cx="40%" cy="35%" r="75%">
+            <stop offset="0%"  stop-color="#cac4b6"/>
+            <stop offset="45%" stop-color="#9a9285"/>
+            <stop offset="100%" stop-color="#3a3528"/>
+          </radialGradient>
+        </defs>
+
+        <!-- Curved edges (drawn first, behind nodes) -->
+        <g class="lp-edges">
+          <path class="lp-edge lp-edge-breaks"      d="M 230 230 Q 270 100 320 90"/>
+          <path class="lp-edge lp-edge-requires"    d="M 230 230 Q 350 220 380 250"/>
+          <path class="lp-edge lp-edge-compatible"  d="M 230 230 Q 260 360 320 380"/>
+          <path class="lp-edge lp-edge-requires-2"  d="M 230 230 Q 120 280 80  270"/>
+          <path class="lp-edge lp-edge-compatible-2" d="M 230 230 Q 110 130 130 90"/>
+        </g>
+
+        <!-- Center node — the "ingredient on the anvil" / selected -->
+        <g class="lp-node lp-center" transform="translate(230, 230)">
+          <polygon class="lp-aura" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3" transform="scale(1.3)"/>
+          <polygon class="lp-frame-outer" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3"/>
+          <polygon class="lp-plate"       points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/>
+          <ellipse class="lp-gem" cx="0" cy="-2" rx="14" ry="11"/>
+          <polygon class="lp-frame" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/>
+          <g class="lp-icon" stroke="#fff5e8" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(-12,-14)">
+            <path d="M12 3l9 16H3z"/><path d="M12 9l4 7H8z"/>
+          </g>
+          <circle class="lp-stud" cx="-22.6" cy="-22.6" r="1.8"/>
+          <circle class="lp-stud" cx="22.6"  cy="-22.6" r="1.8"/>
+          <circle class="lp-stud" cx="22.6"  cy="22.6"  r="1.8"/>
+          <circle class="lp-stud" cx="-22.6" cy="22.6"  r="1.8"/>
+          <g class="lp-seal" transform="translate(22, -22)">
+            <circle r="8.5" fill="url(#lp-brass-t1)" stroke="#1a1208"/>
+            <text y="2.5" text-anchor="middle" font-family="Cinzel" font-size="8" font-weight="700" fill="#1a1208">T1</text>
+          </g>
+          <path class="lp-ribbon" d="M -33 33 L -38 47 L -28 44 L -22 48 L -16 44 L -10 48 L -4 44 L 2 48 L 8 44 L 14 48 L 20 44 L 26 48 L 34 47 L 33 33 Z"/>
+          <text class="lp-name" y="44.5" text-anchor="middle">QLoRA</text>
+        </g>
+
+        <!-- Outer nodes -->
+        <g class="lp-node lp-outer-1" transform="translate(345, 90)">  <!-- BLOCKED (Full Fine-Tune) -->
+          <polygon class="lp-aura" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3" transform="scale(1.3)"/>
+          <polygon class="lp-frame-outer" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3"/>
+          <polygon class="lp-plate"       points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/>
+          <ellipse class="lp-gem" cx="0" cy="-2" rx="14" ry="11"/>
+          <polygon class="lp-frame" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/>
+          <g class="lp-icon" stroke="#fff5e8" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(-12,-14)">
+            <path d="M12 3l9 16H3z"/><path d="M12 9l4 7H8z"/>
+          </g>
+          <circle class="lp-stud" cx="-22.6" cy="-22.6" r="1.8"/>
+          <circle class="lp-stud" cx="22.6"  cy="-22.6" r="1.8"/>
+          <circle class="lp-stud" cx="22.6"  cy="22.6"  r="1.8"/>
+          <circle class="lp-stud" cx="-22.6" cy="22.6"  r="1.8"/>
+          <g class="lp-seal" transform="translate(22, -22)">
+            <circle r="8.5" fill="url(#lp-brass-t1)" stroke="#1a1208"/>
+            <text y="2.5" text-anchor="middle" font-family="Cinzel" font-size="8" font-weight="700" fill="#1a1208">T1</text>
+          </g>
+          <g class="lp-lock">
+            <path d="M -5 -2 v -4 a 5 5 0 0 1 10 0 v 4" fill="none" stroke="#cfc8b8" stroke-width="1.1" stroke-linecap="round"/>
+            <rect x="-7" y="-2" width="14" height="11" rx="1.5" fill="#8a2520" stroke="#cfc8b8" stroke-width="0.6"/>
+            <circle cx="0" cy="2" r="1.4" fill="#07090c"/>
+          </g>
+          <text class="lp-name" y="48" text-anchor="middle">Full FT</text>
+        </g>
+
+        <g class="lp-node lp-outer-2" transform="translate(385, 270)">  <!-- NEEDED — conditional (bnb 4-bit) -->
+          <polygon class="lp-aura" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3" transform="scale(1.3)"/>
+          <polygon class="lp-frame-outer" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3"/>
+          <polygon class="lp-plate"       points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/>
+          <ellipse class="lp-gem" cx="0" cy="-2" rx="14" ry="11"/>
+          <polygon class="lp-frame" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/>
+          <g class="lp-icon" stroke="#fff5e8" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(-12,-14)">
+            <rect x="4" y="13" width="3" height="7" rx="0.5"/><rect x="10.5" y="9" width="3" height="11" rx="0.5"/><rect x="17" y="5" width="3" height="15" rx="0.5"/>
+          </g>
+          <circle class="lp-stud" cx="-22.6" cy="-22.6" r="1.8"/>
+          <circle class="lp-stud" cx="22.6"  cy="-22.6" r="1.8"/>
+          <circle class="lp-stud" cx="22.6"  cy="22.6"  r="1.8"/>
+          <circle class="lp-stud" cx="-22.6" cy="22.6"  r="1.8"/>
+          <g class="lp-seal" transform="translate(22, -22)">
+            <circle r="8.5" fill="url(#lp-brass-t1)" stroke="#1a1208"/>
+            <text y="2.5" text-anchor="middle" font-family="Cinzel" font-size="8" font-weight="700" fill="#1a1208">T1</text>
+          </g>
+          <text class="lp-name" y="48" text-anchor="middle">bnb 4-bit</text>
+          <g class="lp-chip" transform="translate(0, 58)">
+            <rect x="-32" y="-7" width="64" height="14" fill="rgba(40,26,8,0.95)" stroke="#e0a13c" stroke-width="0.7"/>
+            <text y="2.5" text-anchor="middle" font-family="JetBrains Mono" font-size="7" fill="#e0a13c" letter-spacing="0.12em">needs · add</text>
+          </g>
+        </g>
+
+        <g class="lp-node lp-outer-3" transform="translate(330, 380)">  <!-- AVAILABLE — LoRA -->
+          <polygon class="lp-aura" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3" transform="scale(1.3)"/>
+          <polygon class="lp-frame-outer" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3"/>
+          <polygon class="lp-plate"       points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/>
+          <ellipse class="lp-gem" cx="0" cy="-2" rx="14" ry="11"/>
+          <polygon class="lp-frame" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/>
+          <g class="lp-icon" stroke="#fff5e8" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(-12,-14)">
+            <path d="M12 3l9 16H3z"/><path d="M12 9l4 7H8z"/>
+          </g>
+          <circle class="lp-stud" cx="-22.6" cy="-22.6" r="1.8"/>
+          <circle class="lp-stud" cx="22.6"  cy="-22.6" r="1.8"/>
+          <circle class="lp-stud" cx="22.6"  cy="22.6"  r="1.8"/>
+          <circle class="lp-stud" cx="-22.6" cy="22.6"  r="1.8"/>
+          <g class="lp-seal" transform="translate(22, -22)">
+            <circle r="8.5" fill="url(#lp-brass-t1)" stroke="#1a1208"/>
+            <text y="2.5" text-anchor="middle" font-family="Cinzel" font-size="8" font-weight="700" fill="#1a1208">T1</text>
+          </g>
+          <text class="lp-name" y="48" text-anchor="middle">LoRA</text>
+        </g>
+
+        <g class="lp-node lp-outer-4" transform="translate(70, 270)">  <!-- AVAILABLE — Llama-3 -->
+          <polygon class="lp-aura" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3" transform="scale(1.3)"/>
+          <polygon class="lp-frame-outer" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3"/>
+          <polygon class="lp-plate"       points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/>
+          <ellipse class="lp-gem" cx="0" cy="-2" rx="14" ry="11"/>
+          <polygon class="lp-frame" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/>
+          <g class="lp-icon" stroke="#fff5e8" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(-12,-14)">
+            <path d="M3 7l9-4 9 4"/><path d="M5 7v12M19 7v12M12 7v12"/><path d="M3 21h18"/>
+          </g>
+          <circle class="lp-stud" cx="-22.6" cy="-22.6" r="1.8"/>
+          <circle class="lp-stud" cx="22.6"  cy="-22.6" r="1.8"/>
+          <circle class="lp-stud" cx="22.6"  cy="22.6"  r="1.8"/>
+          <circle class="lp-stud" cx="-22.6" cy="22.6"  r="1.8"/>
+          <g class="lp-seal" transform="translate(22, -22)">
+            <circle r="8.5" fill="url(#lp-brass-t1)" stroke="#1a1208"/>
+            <text y="2.5" text-anchor="middle" font-family="Cinzel" font-size="8" font-weight="700" fill="#1a1208">T1</text>
+          </g>
+          <text class="lp-name" y="48" text-anchor="middle">Llama-3</text>
+        </g>
+
+        <g class="lp-node lp-outer-5" transform="translate(110, 90)">  <!-- AVAILABLE — Grad Ckpt -->
+          <polygon class="lp-aura" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3" transform="scale(1.3)"/>
+          <polygon class="lp-frame-outer" points="-13.3,-32 13.3,-32 32,-13.3 32,13.3 13.3,32 -13.3,32 -32,13.3 -32,-13.3"/>
+          <polygon class="lp-plate"       points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/>
+          <ellipse class="lp-gem" cx="0" cy="-2" rx="14" ry="11"/>
+          <polygon class="lp-frame" points="-11.2,-27 11.2,-27 27,-11.2 27,11.2 11.2,27 -11.2,27 -27,11.2 -27,-11.2"/>
+          <g class="lp-icon" stroke="#fff5e8" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(-12,-14)">
+            <path d="M12 3l9 16H3z"/><path d="M12 9l4 7H8z"/>
+          </g>
+          <circle class="lp-stud" cx="-22.6" cy="-22.6" r="1.8"/>
+          <circle class="lp-stud" cx="22.6"  cy="-22.6" r="1.8"/>
+          <circle class="lp-stud" cx="22.6"  cy="22.6"  r="1.8"/>
+          <circle class="lp-stud" cx="-22.6" cy="22.6"  r="1.8"/>
+          <g class="lp-seal" transform="translate(22, -22)">
+            <circle r="8.5" fill="url(#lp-brass-t2)" stroke="#1a1208"/>
+            <text y="2.5" text-anchor="middle" font-family="Cinzel" font-size="8" font-weight="700" fill="#fff">T2</text>
+          </g>
+          <text class="lp-name" y="48" text-anchor="middle">Grad Ckpt</text>
+        </g>
+      </svg>
+    </div>
+  </section>
+
+  <!-- ── What ───────────────────────────────────────────────────────── -->
+  <section class="lp-section" id="what">
+    <div class="lp-shell">
+      <div class="lp-section-head">
+        <div class="lp-section-eyebrow">what it does</div>
+        <h2 class="lp-section-title">A loadout-builder for ML training.</h2>
+        <p class="lp-section-sub">
+          Pick optimizers, schedulers, quantization, techniques. The graph re-resolves
+          live and tells you what fits, what's missing, and what blows up — every fact
+          backed by a citation.
+        </p>
+      </div>
+
+      <div class="lp-tablets">
+        <div class="lp-tablet">
+          <div class="lp-tablet-num">I</div>
+          <div class="lp-tablet-icon">
+            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="3"/>
+              <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/>
+            </svg>
+          </div>
+          <h3>Compatibility-aware</h3>
+          <p>Pick a component and every other one re-styles by status: <em>available</em>, <em>conditional</em>, or <em>blocked</em>. Greyed means not&nbsp;yet&nbsp;satisfied — add the missing ingredient and it re-lights in real time.</p>
+        </div>
+
+        <div class="lp-tablet">
+          <div class="lp-tablet-num">II</div>
+          <div class="lp-tablet-icon">
+            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M4 19V5a2 2 0 0 1 2-2h11l3 3v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/>
+              <path d="M8 8h7M8 12h7M8 16h5"/>
+            </svg>
+          </div>
+          <h3>Evidence-backed</h3>
+          <p>Every grey-out, every fix, every conflict carries its <em>cited source</em> — verbatim quote, URL, and tier badge. Hover anything to see where the claim comes from.</p>
+        </div>
+
+        <div class="lp-tablet">
+          <div class="lp-tablet-num">III</div>
+          <div class="lp-tablet-icon">
+            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 12h4l3 8 4-16 3 8h4"/>
+            </svg>
+          </div>
+          <h3>Benchmark-backed</h3>
+          <p>Scheduler picks aren't picked from a paper — they're picked from <em>real measured val_loss / val_acc</em> on distilbert / sst2, three seeds each. DLRS leads. OneCycle is flagged above cohort cutoff.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── How to use ─────────────────────────────────────────────────── -->
+  <section class="lp-section" id="how">
+    <div class="lp-shell">
+      <div class="lp-section-head">
+        <div class="lp-section-eyebrow">how to use it</div>
+        <h2 class="lp-section-title">Three strikes on the anvil.</h2>
+        <p class="lp-section-sub">
+          Sixty seconds, three motions. The demo path the team built it around.
+        </p>
+      </div>
+
+      <div class="lp-steps">
+
+        <div class="lp-step">
+          <div class="lp-step-text">
+            <span class="lp-step-num">Step One</span>
+            <h3>Pick from the inventory.</h3>
+            <p>
+              The left rail is your loadout. Tap any optimizer, scheduler, technique,
+              quantization, architecture, or inference engine. The instant you equip one,
+              the graph re-runs <code style="font-family: var(--f-mono); font-size: 0.92em; color: var(--brass-1);">POST /resolve</code> and re-styles every other node by status.
+            </p>
+            <div class="quote">
+              "Pick <strong style="color: var(--brass-1);">QLoRA</strong>. Full Fine-Tune slams to <strong style="color: var(--rust);">blocked</strong>.
+              bnb 4-bit shimmers <strong style="color: var(--amber);">conditional</strong> — &lsquo;needed by QLoRA&rsquo;."
+            </div>
+          </div>
+          <div class="lp-step-art">
+            <!-- Illustration: inventory card sample -->
+            <div style="width: 100%; max-width: 320px;">
+              <div class="inv-row tier-1 selected" style="--type-color: var(--t-technique);">
+                <div class="type-ic">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12 3l9 16H3z"/><path d="M12 9l4 7H8z"/>
+                  </svg>
+                </div>
+                <div>
+                  <div class="inv-name">QLoRA</div>
+                  <div class="inv-meta"><span style="color: var(--ember-2);">equipped</span></div>
+                </div>
+                <div class="tier-pip t1">T1</div>
+              </div>
+              <div class="inv-row tier-1 blocked" style="margin-top: 6px; --type-color: var(--t-technique);">
+                <div class="type-ic">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12 3l9 16H3z"/><path d="M12 9l4 7H8z"/>
+                  </svg>
+                </div>
+                <div>
+                  <div class="inv-name">Full Fine-Tune</div>
+                  <div class="inv-meta"><span style="color: var(--rust);">blocked · breaks with QLoRA</span></div>
+                </div>
+                <div class="tier-pip t1">T1</div>
+              </div>
+              <div class="inv-row tier-1 dim" style="margin-top: 6px; --type-color: var(--t-quantization);">
+                <div class="type-ic">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="4"  y="13" width="3" height="7" rx="0.5"/>
+                    <rect x="10.5" y="9"  width="3" height="11" rx="0.5"/>
+                    <rect x="17" y="5"  width="3" height="15" rx="0.5"/>
+                  </svg>
+                </div>
+                <div>
+                  <div class="inv-name">bnb 4-bit</div>
+                  <div class="inv-meta"><span style="color: var(--amber);">needed by QLoRA</span></div>
+                </div>
+                <div class="tier-pip t1">T1</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="lp-step">
+          <div class="lp-step-text">
+            <span class="lp-step-num">Step Two</span>
+            <h3>Read the recipe.</h3>
+            <p>
+              The right rail is your crafting window. Conflicts are scored in
+              <strong style="color: var(--rust);">rust</strong>. Unmet requirements glow
+              <strong style="color: var(--amber);">amber</strong> with a one-tap
+              <em>+ add bnb 4-bit</em> button. Benchmark-backed scheduler picks list themselves
+              by measured val_loss with the leader marked with a star.
+            </p>
+            <div class="quote">
+              Every entry shows the <strong style="color: var(--brass-1);">tier badge</strong>
+              and a source link — so the credibility chain stays visible all the way through.
+            </div>
+          </div>
+          <div class="lp-step-art">
+            <div style="width: 100%; max-width: 360px;">
+              <div class="entry conflict" style="margin-bottom: 8px;">
+                <div class="title conflict">QLoRA <span style="color: var(--bone-4);">↔</span> Full Fine-Tune</div>
+                <div class="fix">QLoRA freezes the base model; Full Fine-Tune updates it. Pick one.</div>
+                <div class="meta">
+                  <span class="tier-badge t1">T1</span>
+                  <span style="color: var(--bone-4);">arxiv.org/abs/2305.14314</span>
+                </div>
+              </div>
+              <div class="entry unmet">
+                <div class="title unmet">QLoRA needs <strong style="color: #fff5e8;">bnb 4-bit</strong></div>
+                <div class="fix">QLoRA is defined as 4-bit NF4 base + LoRA adapters — load the base in bnb 4-bit.</div>
+                <button class="add-btn" type="button">
+                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
+                  add bnb 4-bit
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="lp-step">
+          <div class="lp-step-text">
+            <span class="lp-step-num">Step Three</span>
+            <h3>Inspect the evidence.</h3>
+            <p>
+              Hover any node, edge, or recipe entry to surface the <em>verbatim quote</em> from
+              its source and the tier badge it earned. T1 is Rick's own verified runs
+              (immutable). T2 is community-corroborated. T3 is single-source — lives in
+              the review queue until something else agrees.
+            </p>
+            <div class="quote">
+              The point of the tooltip is the source URL. The point of the graph is the
+              decision. The point of the tier is so you know how much to trust both.
+            </div>
+          </div>
+          <div class="lp-step-art">
+            <div style="width: 100%; max-width: 320px;">
+              <div class="evidence-tip" style="position: static; box-shadow: 0 14px 30px rgba(0,0,0,0.6);">
+                <div class="tip-head">
+                  <span class="tip-name">AdamW 8-bit</span>
+                  <span class="tip-status blocked">blocked</span>
+                </div>
+                <div class="tip-reason">
+                  <div class="tip-reason-label" style="color: var(--rust);">breaks with Per-Layer LR Rotation</div>
+                  <div class="tip-reason-fix">Pass custom <code style="font-family: var(--f-mono);">optimizer_grouped_parameters</code> — adamw_8bit's default decay/no-decay split silently no-ops per-layer LR.</div>
+                  <div class="quote">"adamw_8bit produces decay/no-decay param groups by default; per-layer LR rotation silently no-ops unless you pass them yourself."</div>
+                  <div class="tip-foot">
+                    <span class="src-link">mempalace · rick</span>
+                    <span class="tier-badge t1">T1</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+  <!-- ── Tiers ──────────────────────────────────────────────────────── -->
+  <section class="lp-section" id="tiers">
+    <div class="lp-shell">
+      <div class="lp-section-head">
+        <div class="lp-section-eyebrow">trust model</div>
+        <h2 class="lp-section-title">Every claim earns its tier.</h2>
+        <p class="lp-section-sub">
+          We don't assert nonsense as fact. Three tiers, three colors, three weights.
+          The scraper feeds the bottom; corroboration promotes upward.
+        </p>
+      </div>
+
+      <div class="lp-tiers">
+        <div class="lp-tier lp-tier-1">
+          <div class="lp-tier-coin">T1</div>
+          <div class="lp-tier-label">Legendary · 1.0</div>
+          <h4>Verified runs</h4>
+          <p>Rick's own research notes and reproduced runs. <em>Immutable</em> — the scraper can never overwrite these, only add corroboration.</p>
+          <div class="example">e.g. <span style="color: var(--bone-2);">Per-Layer LR Rotation × AdamW 8-bit</span> · mempalace://chaos-injection-trainer-notes</div>
+        </div>
+
+        <div class="lp-tier lp-tier-2">
+          <div class="lp-tier-coin">T2</div>
+          <div class="lp-tier-label">Rare · 0.8</div>
+          <h4>Community-confirmed</h4>
+          <p>Official docs, or two-plus independent sources agree. The bulk of the workable graph.</p>
+          <div class="example">e.g. <span style="color: var(--bone-2);">Muon → AdamW 8-bit</span> · kellerjordan.github.io/posts/muon</div>
+        </div>
+
+        <div class="lp-tier lp-tier-3">
+          <div class="lp-tier-coin">T3</div>
+          <div class="lp-tier-label">Common · 0.5</div>
+          <h4>Single-source</h4>
+          <p>One scraped report, no corroboration yet. Lives in the review queue. Promotes when something else agrees, or when Rick signs off.</p>
+          <div class="example">e.g. <span style="color: var(--bone-2);">Lion × bnb 8-bit divergence</span> · github.com/bitsandbytes issue</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── Scraper ─────────────────────────────────────────────────────── -->
+  <section class="lp-section" id="scraper">
+    <div class="lp-shell">
+      <div class="lp-section-head">
+        <div class="lp-section-eyebrow">the live data layer</div>
+        <h2 class="lp-section-title">The graph grows itself.</h2>
+        <p class="lp-section-sub">
+          A Bright Data scraper hunts SERP results in English <em>and</em> Chinese,
+          extracts (A, relation, B, conditions, fix, quote) tuples with Haiku, resolves
+          them against canonical node aliases, and proposes them to the review queue.
+        </p>
+      </div>
+
+      <div class="lp-scraper">
+        <div>
+          <p>
+            Watch the <strong style="color: var(--brass-1); font-style: normal;">Live Discoveries</strong>
+            hearth at the bottom of the Forge while you work — new edges literally rise
+            out of it as the scraper corroborates them. The graph is alive.
+          </p>
+          <p>
+            English-only sources miss large chunks of the Chinese ML ecosystem. We
+            cover both. The scraper writes nothing to T1 — that's Rick's territory.
+            Single-source claims sit at T3 in the queue and only ascend with evidence.
+          </p>
+        </div>
+
+        <div class="lp-pipeline">
+          <div class="lp-pipeline-step">
+            <span>SERP·en/zh</span>
+            <span class="arrow">→</span>
+            <span class="src">arxiv · github</span>
+          </div>
+          <div class="lp-pipeline-step">
+            <span>scrape_as_markdown</span>
+            <span class="arrow">→</span>
+            <span class="src">bright data</span>
+          </div>
+          <div class="lp-pipeline-step">
+            <span>extract tuple</span>
+            <span class="arrow">→</span>
+            <span class="src">haiku</span>
+          </div>
+          <div class="lp-pipeline-step">
+            <span>entity-resolve</span>
+            <span class="arrow">→</span>
+            <span class="src">canonical aliases</span>
+          </div>
+          <div class="lp-pipeline-step">
+            <span>review_queue</span>
+            <span class="arrow">→</span>
+            <span class="tier t3">T3</span>
+          </div>
+          <div class="lp-pipeline-step">
+            <span>corroborate</span>
+            <span class="arrow">→</span>
+            <span class="tier t2">T2</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── Finale CTA ──────────────────────────────────────────────────── -->
+  <section class="lp-finale">
+    <h2 class="lp-finale-title">Light the forge.</h2>
+    <p class="lp-finale-sub">Ninety seconds. Ten components. One recipe that actually compiles.</p>
+    <a href="index.html" class="lp-cta-primary">
+      Enter the Forge
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round">
+        <path d="M5 12h14M13 6l6 6-6 6"/>
+      </svg>
+    </a>
+  </section>
+
+  <footer class="lp-foot lp-shell">
+    bright data · "web data unlocked" · 2026
+    &nbsp;·&nbsp;
+    <a href="index.html">launch app</a>
+  </footer>
+
+</div>
+</body>
+</html>