Spaces:

Matrix-Corp
/

ECHO

Running

App Files Files Community

Zandy-Wandy commited on 7 days ago

Commit

30ffd52

verified ·

1 Parent(s): 01a455a

Update index.html

Browse files

Files changed (1) hide show

index.html +1364 -19

index.html CHANGED Viewed

@@ -1,19 +1,1364 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Matrix ECHO — Living Memory</title>
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,700;1,9..144,300;1,9..144,400&family=DM+Mono:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
+<style>
+:root {
+  --flesh: #C4956A;
+  --flesh-pale: #E8C9A8;
+  --flesh-deep: #8B5E3C;
+  --scar: #7A3B3B;
+  --scar-bright: #C0514A;
+  --scar-pale: #D4897A;
+  --tissue: #2A1A14;
+  --tissue-mid: #3D2318;
+  --tissue-light: #5C3520;
+  --membrane: rgba(196, 149, 106, 0.08);
+  --nerve: #E8A87C;
+  --bg: #120A06;
+  --text: #D4B896;
+  --text-dim: #8A6848;
+  --text-bright: #F0D4B0;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Fraunces', Georgia, serif;
+  font-size: 17px;
+  line-height: 1.7;
+  overflow-x: hidden;
+  cursor: none;
+}
+/* ── CUSTOM CURSOR ── */
+.cursor {
+  position: fixed;
+  width: 12px;
+  height: 12px;
+  background: var(--scar-bright);
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 9999;
+  transition: transform 0.1s ease, opacity 0.2s;
+  mix-blend-mode: screen;
+}
+.cursor-trail {
+  position: fixed;
+  width: 32px;
+  height: 32px;
+  border: 1px solid rgba(192, 81, 74, 0.4);
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 9998;
+  transition: all 0.15s ease;
+}
+/* ── NOISE OVERLAY ── */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
+  pointer-events: none;
+  z-index: 1000;
+  opacity: 0.6;
+}
+/* ── VEINS / ORGANIC LINES ── */
+.vein-bg {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0.15;
+}
+/* ── HERO ── */
+header {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 4rem 2rem;
+}
+.hero-membrane {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(ellipse at 30% 40%, rgba(122, 59, 59, 0.35) 0%, transparent 55%),
+    radial-gradient(ellipse at 70% 60%, rgba(90, 40, 20, 0.3) 0%, transparent 50%),
+    radial-gradient(ellipse at 50% 20%, rgba(196, 149, 106, 0.08) 0%, transparent 40%);
+}
+/* Pulsing biological blobs */
+.blob {
+  position: absolute;
+  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
+  filter: blur(60px);
+  animation: morph 8s ease-in-out infinite;
+  opacity: 0.12;
+}
+.blob-1 {
+  width: 500px; height: 500px;
+  background: var(--scar);
+  top: -100px; left: -100px;
+  animation-delay: 0s;
+}
+.blob-2 {
+  width: 400px; height: 400px;
+  background: var(--flesh-deep);
+  bottom: -80px; right: -80px;
+  animation-delay: -3s;
+}
+.blob-3 {
+  width: 300px; height: 300px;
+  background: var(--scar-bright);
+  top: 40%; left: 60%;
+  animation-delay: -5s;
+  opacity: 0.07;
+}
+@keyframes morph {
+  0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(0deg); }
+  33% { border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; transform: rotate(120deg); }
+  66% { border-radius: 50% 50% 30% 70% / 60% 40% 70% 30%; transform: rotate(240deg); }
+}
+.hero-content {
+  position: relative;
+  z-index: 2;
+  text-align: center;
+  max-width: 900px;
+}
+.hero-label {
+  font-family: 'DM Mono', monospace;
+  font-size: 0.7rem;
+  letter-spacing: 0.4em;
+  color: var(--scar-pale);
+  text-transform: uppercase;
+  display: block;
+  margin-bottom: 2rem;
+  opacity: 0;
+  animation: rise 1s ease 0.3s forwards;
+}
+.hero-title {
+  font-size: clamp(5rem, 15vw, 11rem);
+  font-weight: 300;
+  color: var(--flesh-pale);
+  line-height: 0.9;
+  letter-spacing: -0.03em;
+  margin-bottom: 0.5rem;
+  opacity: 0;
+  animation: rise 1.2s ease 0.5s forwards;
+  position: relative;
+}
+.hero-title .scar-letter {
+  color: var(--scar-bright);
+  font-style: italic;
+  position: relative;
+}
+.hero-title .scar-letter::after {
+  content: '';
+  position: absolute;
+  bottom: -4px;
+  left: 0; right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--scar-bright), transparent);
+  animation: scar-pulse 2s ease-in-out infinite;
+}
+@keyframes scar-pulse {
+  0%, 100% { opacity: 0.4; transform: scaleX(0.8); }
+  50% { opacity: 1; transform: scaleX(1); }
+}
+.hero-sub {
+  font-size: clamp(1rem, 2.5vw, 1.4rem);
+  font-weight: 300;
+  font-style: italic;
+  color: var(--text-dim);
+  margin-bottom: 3rem;
+  opacity: 0;
+  animation: rise 1s ease 0.8s forwards;
+}
+.hero-tagline {
+  font-family: 'DM Mono', monospace;
+  font-size: 0.85rem;
+  color: var(--nerve);
+  background: rgba(196, 149, 106, 0.06);
+  border: 1px solid rgba(196, 149, 106, 0.15);
+  border-left: 3px solid var(--scar-bright);
+  padding: 1rem 1.5rem;
+  text-align: left;
+  max-width: 600px;
+  margin: 0 auto 3rem;
+  opacity: 0;
+  animation: rise 1s ease 1s forwards;
+  line-height: 1.6;
+}
+.pulse-dot {
+  display: inline-block;
+  width: 8px; height: 8px;
+  background: var(--scar-bright);
+  border-radius: 50%;
+  margin-right: 0.5rem;
+  animation: heartbeat 1.2s ease-in-out infinite;
+  vertical-align: middle;
+}
+@keyframes heartbeat {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  14% { transform: scale(1.3); }
+  28% { transform: scale(1); }
+  42% { transform: scale(1.2); }
+  70% { opacity: 0.6; }
+}
+@keyframes rise {
+  from { opacity: 0; transform: translateY(24px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.scroll-cue {
+  position: absolute;
+  bottom: 2.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: 'DM Mono', monospace;
+  font-size: 0.6rem;
+  letter-spacing: 0.3em;
+  color: var(--text-dim);
+  opacity: 0;
+  animation: rise 1s ease 1.5s forwards;
+}
+.scroll-cue::after {
+  content: '';
+  width: 1px;
+  height: 50px;
+  background: linear-gradient(to bottom, var(--scar-bright), transparent);
+  animation: drip 1.5s ease-in-out infinite;
+}
+@keyframes drip {
+  0% { transform: scaleY(0); transform-origin: top; opacity: 1; }
+  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
+  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
+}
+/* ── SECTIONS ── */
+section {
+  padding: 7rem 2rem;
+  position: relative;
+}
+.container { max-width: 1100px; margin: 0 auto; }
+/* ── LIVE DEMO SECTION ── */
+.demo-section {
+  background: var(--tissue);
+  border-top: 1px solid rgba(196, 149, 106, 0.1);
+  border-bottom: 1px solid rgba(196, 149, 106, 0.1);
+}
+.demo-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2px;
+  background: rgba(196, 149, 106, 0.08);
+  border: 1px solid rgba(196, 149, 106, 0.1);
+}
+.demo-panel {
+  background: var(--tissue);
+  padding: 2rem;
+}
+.demo-panel-header {
+  font-family: 'DM Mono', monospace;
+  font-size: 0.65rem;
+  letter-spacing: 0.35em;
+  color: var(--scar-pale);
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(196, 149, 106, 0.1);
+}
+.status-dot {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  background: var(--scar-bright);
+  animation: heartbeat 1.2s ease-in-out infinite;
+}
+/* Scar formation interactive demo */
+.scar-demo-input {
+  width: 100%;
+  background: rgba(196, 149, 106, 0.05);
+  border: 1px solid rgba(196, 149, 106, 0.15);
+  border-radius: 0;
+  padding: 1rem;
+  color: var(--text-bright);
+  font-family: 'DM Mono', monospace;
+  font-size: 0.8rem;
+  resize: none;
+  outline: none;
+  transition: border-color 0.2s;
+  min-height: 100px;
+}
+.scar-demo-input:focus {
+  border-color: rgba(192, 81, 74, 0.4);
+}
+.scar-demo-input::placeholder { color: var(--text-dim); }
+.demo-btn {
+  margin-top: 1rem;
+  width: 100%;
+  padding: 0.8rem;
+  background: transparent;
+  border: 1px solid var(--scar);
+  color: var(--scar-pale);
+  font-family: 'DM Mono', monospace;
+  font-size: 0.7rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  cursor: none;
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+.demo-btn:hover {
+  background: rgba(122, 59, 59, 0.2);
+  border-color: var(--scar-bright);
+  color: var(--flesh-pale);
+}
+.demo-btn::before {
+  content: '';
+  position: absolute;
+  left: -100%;
+  top: 0; bottom: 0;
+  width: 100%;
+  background: linear-gradient(90deg, transparent, rgba(192, 81, 74, 0.1), transparent);
+  transition: left 0.4s ease;
+}
+.demo-btn:hover::before { left: 100%; }
+/* Scar lattice visualization */
+.lattice-canvas {
+  width: 100%;
+  height: 280px;
+  position: relative;
+  overflow: hidden;
+  background: rgba(18, 10, 6, 0.5);
+  border: 1px solid rgba(196, 149, 106, 0.08);
+}
+.scar-node {
+  position: absolute;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'DM Mono', monospace;
+  font-size: 0.55rem;
+  color: var(--flesh-pale);
+  text-align: center;
+  cursor: none;
+  transition: all 0.3s ease;
+  z-index: 2;
+}
+.scar-node:hover .node-tooltip {
+  opacity: 1;
+  transform: translateY(-8px);
+}
+.node-tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(0px);
+  background: var(--tissue-mid);
+  border: 1px solid rgba(196, 149, 106, 0.2);
+  padding: 0.5rem 0.8rem;
+  font-size: 0.65rem;
+  color: var(--text);
+  white-space: nowrap;
+  opacity: 0;
+  transition: all 0.2s ease;
+  pointer-events: none;
+  z-index: 10;
+  margin-bottom: 8px;
+}
+svg.lattice-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+/* Scar feed */
+.scar-feed {
+  max-height: 280px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--scar) transparent;
+}
+.scar-entry {
+  padding: 0.8rem;
+  border-left: 2px solid var(--scar);
+  margin-bottom: 0.8rem;
+  background: rgba(122, 59, 59, 0.08);
+  opacity: 0;
+  transform: translateX(-10px);
+  animation: scar-appear 0.4s ease forwards;
+}
+.scar-entry.hallucination { border-left-color: var(--scar-bright); }
+.scar-entry.logical { border-left-color: var(--flesh); }
+.scar-entry.contextual { border-left-color: var(--nerve); }
+@keyframes scar-appear {
+  to { opacity: 1; transform: translateX(0); }
+}
+.scar-type-badge {
+  font-family: 'DM Mono', monospace;
+  font-size: 0.55rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--scar-pale);
+  margin-bottom: 0.3rem;
+  display: block;
+}
+.scar-claim {
+  font-size: 0.8rem;
+  color: var(--text-dim);
+  font-style: italic;
+  margin-bottom: 0.2rem;
+}
+.scar-correction {
+  font-size: 0.8rem;
+  color: var(--flesh-pale);
+}
+.scar-correction::before {
+  content: '→ ';
+  color: var(--scar-bright);
+}
+.scar-weight-bar {
+  height: 2px;
+  background: rgba(196, 149, 106, 0.1);
+  margin-top: 0.6rem;
+  position: relative;
+  overflow: hidden;
+}
+.scar-weight-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--scar), var(--scar-bright));
+  transition: width 1s ease;
+}
+/* ── SCAR ANATOMY SECTION ── */
+.anatomy-section { background: var(--bg); }
+.anatomy-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4rem;
+  align-items: start;
+}
+.anatomy-code {
+  background: var(--tissue);
+  border: 1px solid rgba(196, 149, 106, 0.1);
+  border-left: 3px solid var(--scar);
+  padding: 2rem;
+  font-family: 'DM Mono', monospace;
+  font-size: 0.78rem;
+  line-height: 2;
+  color: var(--text-dim);
+  position: relative;
+  overflow: hidden;
+}
+.anatomy-code::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, var(--scar), transparent);
+}
+.code-kw { color: var(--flesh-pale); }
+.code-field { color: var(--nerve); }
+.code-val { color: var(--scar-pale); }
+.code-comment { color: rgba(138, 104, 72, 0.5); font-style: italic; }
+.code-type { color: var(--flesh); }
+.anatomy-text { padding-top: 1rem; }
+.section-eyebrow {
+  font-family: 'DM Mono', monospace;
+  font-size: 0.65rem;
+  letter-spacing: 0.4em;
+  color: var(--scar-pale);
+  text-transform: uppercase;
+  display: block;
+  margin-bottom: 1rem;
+}
+.section-title {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 300;
+  color: var(--flesh-pale);
+  line-height: 1.1;
+  margin-bottom: 1.5rem;
+  font-style: italic;
+}
+.section-body {
+  color: var(--text-dim);
+  font-size: 1rem;
+  line-height: 1.8;
+  margin-bottom: 1.2rem;
+}
+.section-body em { color: var(--flesh-pale); font-style: italic; }
+/* field annotations */
+.field-list { margin-top: 2rem; }
+.field-item {
+  display: flex;
+  gap: 1rem;
+  padding: 0.8rem 0;
+  border-bottom: 1px solid rgba(196, 149, 106, 0.06);
+  align-items: flex-start;
+}
+.field-name {
+  font-family: 'DM Mono', monospace;
+  font-size: 0.75rem;
+  color: var(--nerve);
+  flex-shrink: 0;
+  width: 140px;
+}
+.field-desc {
+  font-size: 0.85rem;
+  color: var(--text-dim);
+  line-height: 1.5;
+}
+/* ── DOMAIN MAP SECTION ── */
+.domain-section {
+  background: var(--tissue);
+  border-top: 1px solid rgba(196, 149, 106, 0.08);
+  border-bottom: 1px solid rgba(196, 149, 106, 0.08);
+}
+.domain-bars {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 3rem;
+}
+.domain-row {
+  display: grid;
+  grid-template-columns: 130px 1fr 60px;
+  align-items: center;
+  gap: 1.2rem;
+}
+.domain-name {
+  font-family: 'DM Mono', monospace;
+  font-size: 0.72rem;
+  color: var(--text-dim);
+  text-align: right;
+}
+.domain-bar-track {
+  height: 6px;
+  background: rgba(196, 149, 106, 0.08);
+  position: relative;
+  overflow: hidden;
+}
+.domain-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--scar), var(--scar-bright));
+  width: 0%;
+  transition: width 1.5s cubic-bezier(0.23, 1, 0.32, 1);
+  position: relative;
+}
+.domain-bar-fill::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: -2px; bottom: -2px;
+  width: 4px;
+  background: var(--scar-bright);
+  filter: blur(2px);
+}
+.domain-risk {
+  font-family: 'DM Mono', monospace;
+  font-size: 0.7rem;
+  color: var(--scar-pale);
+  text-align: right;
+}
+.domain-risk.high { color: var(--scar-bright); }
+.domain-risk.medium { color: var(--flesh); }
+.domain-risk.low { color: var(--text-dim); }
+/* ── PIPELINE SECTION ── */
+.pipeline-section { background: var(--bg); }
+.pipeline-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  max-width: 680px;
+  margin: 4rem auto 0;
+  position: relative;
+}
+.pipeline-steps::before {
+  content: '';
+  position: absolute;
+  left: 24px;
+  top: 48px;
+  bottom: 48px;
+  width: 1px;
+  background: linear-gradient(to bottom, transparent, var(--scar), var(--scar), transparent);
+  opacity: 0.3;
+}
+.pipeline-step {
+  display: flex;
+  gap: 2rem;
+  padding: 2rem 0;
+  opacity: 0;
+  transform: translateY(16px);
+  transition: all 0.5s ease;
+}
+.pipeline-step.visible { opacity: 1; transform: translateY(0); }
+.step-icon {
+  width: 50px;
+  height: 50px;
+  border: 1px solid rgba(196, 149, 106, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  flex-shrink: 0;
+  position: relative;
+  background: var(--tissue);
+}
+.step-icon::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  background: linear-gradient(135deg, rgba(192, 81, 74, 0.3), transparent);
+  z-index: -1;
+}
+.step-content { flex: 1; padding-top: 0.4rem; }
+.step-label {
+  font-family: 'DM Mono', monospace;
+  font-size: 0.6rem;
+  letter-spacing: 0.35em;
+  color: var(--scar-pale);
+  text-transform: uppercase;
+  display: block;
+  margin-bottom: 0.3rem;
+}
+.step-name {
+  font-size: 1.1rem;
+  color: var(--flesh-pale);
+  font-style: italic;
+  display: block;
+  margin-bottom: 0.4rem;
+}
+.step-desc {
+  font-size: 0.88rem;
+  color: var(--text-dim);
+  line-height: 1.6;
+}
+/* ── STATS SECTION ── */
+.stats-section {
+  background: var(--tissue);
+  border-top: 1px solid rgba(196, 149, 106, 0.08);
+}
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1px;
+  background: rgba(196, 149, 106, 0.08);
+  border: 1px solid rgba(196, 149, 106, 0.08);
+  margin-top: 3rem;
+}
+.stat-card {
+  background: var(--tissue);
+  padding: 2.5rem 2rem;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  transition: background 0.3s;
+}
+.stat-card:hover { background: rgba(196, 149, 106, 0.04); }
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--scar), transparent);
+  transform: scaleX(0);
+  transition: transform 0.4s ease;
+}
+.stat-card:hover::before { transform: scaleX(1); }
+.stat-number {
+  font-size: 3rem;
+  font-weight: 300;
+  color: var(--scar-bright);
+  display: block;
+  line-height: 1;
+  margin-bottom: 0.5rem;
+  font-style: italic;
+}
+.stat-label {
+  font-family: 'DM Mono', monospace;
+  font-size: 0.62rem;
+  letter-spacing: 0.25em;
+  color: var(--text-dim);
+  text-transform: uppercase;
+}
+/* ── FOOTER ── */
+footer {
+  background: var(--bg);
+  padding: 5rem 2rem 3rem;
+  text-align: center;
+  border-top: 1px solid rgba(196, 149, 106, 0.08);
+}
+.footer-title {
+  font-size: 2rem;
+  font-weight: 300;
+  font-style: italic;
+  color: var(--flesh-pale);
+  display: block;
+  margin-bottom: 0.5rem;
+}
+.footer-org {
+  font-family: 'DM Mono', monospace;
+  font-size: 0.65rem;
+  letter-spacing: 0.5em;
+  color: var(--text-dim);
+  display: block;
+  margin-bottom: 2rem;
+}
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin-bottom: 3rem;
+}
+.footer-link {
+  font-family: 'DM Mono', monospace;
+  font-size: 0.65rem;
+  letter-spacing: 0.25em;
+  color: var(--text-dim);
+  text-decoration: none;
+  text-transform: uppercase;
+  transition: color 0.2s;
+}
+.footer-link:hover { color: var(--flesh-pale); }
+.footer-status {
+  font-family: 'DM Mono', monospace;
+  font-size: 0.62rem;
+  letter-spacing: 0.25em;
+  color: var(--text-dim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+/* ── SECTION HEADERS ── */
+.section-header { text-align: center; margin-bottom: 1rem; }
+/* ── SCROLLBAR ── */
+::-webkit-scrollbar { width: 4px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: var(--scar); }
+/* ── RESPONSIVE ── */
+@media (max-width: 768px) {
+  .demo-grid { grid-template-columns: 1fr; }
+  .anatomy-grid { grid-template-columns: 1fr; }
+  .stats-grid { grid-template-columns: repeat(2, 1fr); }
+  .domain-row { grid-template-columns: 100px 1fr 50px; }
+}
+</style>
+</head>
+<body>
+<div class="cursor" id="cursor"></div>
+<div class="cursor-trail" id="cursorTrail"></div>
+<!-- VEIN BACKGROUND SVG -->
+<svg class="vein-bg" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
+  <path d="M0,450 C200,380 400,520 600,440 C800,360 1000,500 1200,420 C1300,380 1380,440 1440,420" stroke="rgba(122,59,59,0.4)" stroke-width="1" fill="none"/>
+  <path d="M0,200 C300,240 500,160 700,200 C900,240 1100,180 1440,220" stroke="rgba(196,149,106,0.2)" stroke-width="0.5" fill="none"/>
+  <path d="M0,700 C200,660 500,740 800,700 C1100,660 1300,720 1440,680" stroke="rgba(122,59,59,0.3)" stroke-width="0.8" fill="none"/>
+  <path d="M300,0 C320,200 280,400 300,600 C320,800 290,900 310,900" stroke="rgba(196,149,106,0.15)" stroke-width="0.5" fill="none"/>
+  <path d="M900,0 C880,150 920,350 890,550 C860,750 900,850 880,900" stroke="rgba(122,59,59,0.25)" stroke-width="0.8" fill="none"/>
+</svg>
+<!-- HERO -->
+<header>
+  <div class="blob blob-1"></div>
+  <div class="blob blob-2"></div>
+  <div class="blob blob-3"></div>
+  <div class="hero-membrane"></div>
+  <div class="hero-content">
+    <span class="hero-label">Matrix · Corp · Intelligence · Substrate</span>
+    <h1 class="hero-title">
+      <span class="scar-letter">E</span>CHO
+    </h1>
+    <p class="hero-sub">It remembers every wound</p>
+    <div class="hero-tagline">
+      <span class="pulse-dot"></span>
+      <strong style="color:var(--flesh-pale)">Qwen3.5-27B · Opus 4.6 Distilled · Rust</strong><br>
+      A living model that crystallizes its mistakes into Scars — structured memories that grow stronger with every correction. The more it fails, the harder it is to fool.
+    </div>
+  </div>
+  <div class="scroll-cue">descend</div>
+</header>
+<!-- LIVE DEMO -->
+<section class="demo-section">
+  <div class="container">
+    <div class="section-header">
+      <span class="section-eyebrow">Interactive Demo</span>
+      <h2 class="section-title">Watch a Scar form</h2>
+    </div>
+    <div class="demo-grid">
+      <!-- Left: correction input -->
+      <div class="demo-panel">
+        <div class="demo-panel-header">
+          <div class="status-dot"></div>
+          Correction Interface
+        </div>
+        <label style="font-family:'DM Mono',monospace;font-size:0.65rem;letter-spacing:0.2em;color:var(--text-dim);text-transform:uppercase;display:block;margin-bottom:0.5rem;">What the model said</label>
+        <textarea class="scar-demo-input" id="claimInput" placeholder="The derivative of x² is x" rows="3"></textarea>
+        <label style="font-family:'DM Mono',monospace;font-size:0.65rem;letter-spacing:0.2em;color:var(--text-dim);text-transform:uppercase;display:block;margin:1rem 0 0.5rem;">Correction</label>
+        <textarea class="scar-demo-input" id="correctionInput" placeholder="The derivative of x² is 2x" rows="3"></textarea>
+        <button class="demo-btn" id="formScarBtn">⬡ Crystallize Scar</button>
+        <div style="margin-top:2rem;">
+          <div class="demo-panel-header" style="margin-bottom:1rem;">
+            <div class="status-dot"></div>
+            Active Scar Feed
+          </div>
+          <div class="scar-feed" id="scarFeed">
+            <div class="scar-entry">
+              <span class="scar-type-badge">Factual</span>
+              <div class="scar-claim">"Paris is the capital of Germany"</div>
+              <div class="scar-correction">Paris is the capital of France</div>
+              <div class="scar-weight-bar"><div class="scar-weight-fill" style="width:72%"></div></div>
+            </div>
+            <div class="scar-entry hallucination">
+              <span class="scar-type-badge">Hallucination</span>
+              <div class="scar-claim">"Einstein won the Nobel Prize in 1925"</div>
+              <div class="scar-correction">Einstein won in 1921 for photoelectric effect</div>
+              <div class="scar-weight-bar"><div class="scar-weight-fill" style="width:88%"></div></div>
+            </div>
+            <div class="scar-entry logical">
+              <span class="scar-type-badge">Logical</span>
+              <div class="scar-claim">"All primes are odd therefore 2 is not prime"</div>
+              <div class="scar-correction">2 is the only even prime number</div>
+              <div class="scar-weight-bar"><div class="scar-weight-fill" style="width:55%"></div></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Right: lattice visualization -->
+      <div class="demo-panel">
+        <div class="demo-panel-header">
+          <div class="status-dot"></div>
+          Scar Lattice — Live
+        </div>
+        <div class="lattice-canvas" id="latticeCanvas">
+          <svg class="lattice-svg" id="latticeSvg"></svg>
+          <!-- nodes injected by JS -->
+        </div>
+        <div style="margin-top:1.5rem;padding:1rem;background:rgba(196,149,106,0.04);border:1px solid rgba(196,149,106,0.08);">
+          <div style="font-family:'DM Mono',monospace;font-size:0.65rem;letter-spacing:0.2em;color:var(--text-dim);text-transform:uppercase;margin-bottom:0.8rem;">Pre-scan Output</div>
+          <div id="scanOutput" style="font-family:'DM Mono',monospace;font-size:0.75rem;color:var(--nerve);line-height:1.8;">
+            <span style="color:var(--text-dim)">// Awaiting query...</span>
+          </div>
+        </div>
+        <textarea class="scar-demo-input" id="queryInput" placeholder="Ask something to trigger a pre-scan..." rows="2" style="margin-top:1rem;"></textarea>
+        <button class="demo-btn" id="scanBtn" style="margin-top:0.5rem;">⬡ Pre-Scan Lattice</button>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- SCAR ANATOMY -->
+<section class="anatomy-section">
+  <div class="container">
+    <div class="anatomy-grid">
+      <div class="anatomy-code">
+        <div><span class="code-kw">struct</span> <span class="code-type">Scar</span> {</div>
+        <div>&nbsp;&nbsp;<span class="code-field">id</span>: <span class="code-type">Uuid</span>,</div>
+        <div>&nbsp;&nbsp;<span class="code-field">domain</span>: <span class="code-type">String</span>, <span class="code-comment">// "math.calculus"</span></div>
+        <div>&nbsp;&nbsp;<span class="code-field">scar_type</span>: <span class="code-type">ScarType</span>,</div>
+        <div>&nbsp;&nbsp;<span class="code-field">original_claim</span>: <span class="code-type">String</span>,</div>
+        <div>&nbsp;&nbsp;<span class="code-field">correction</span>: <span class="code-type">String</span>,</div>
+        <div>&nbsp;&nbsp;<span class="code-field">confidence_at_time</span>: <span class="code-type">f32</span>, <span class="code-comment">// was 0.94</span></div>
+        <div>&nbsp;&nbsp;<span class="code-field">times_triggered</span>: <span class="code-type">u32</span>,</div>
+        <div>&nbsp;&nbsp;<span class="code-field">weight</span>: <span class="code-type">f32</span>, <span class="code-comment">// 0.0–1.0</span></div>
+        <div>&nbsp;&nbsp;<span class="code-field">fingerprint</span>: <span class="code-type">Vec&lt;f32&gt;</span>, <span class="code-comment">// 128-dim</span></div>
+        <div>&nbsp;&nbsp;<span class="code-field">created_at</span>: <span class="code-type">DateTime&lt;Utc&gt;</span>,</div>
+        <div>&nbsp;&nbsp;<span class="code-field">last_triggered</span>: <span class="code-type">Option&lt;DateTime&gt;</span>,</div>
+        <div>}</div>
+        <br>
+        <div><span class="code-kw">enum</span> <span class="code-type">ScarType</span> {</div>
+        <div>&nbsp;&nbsp;<span class="code-val">Factual</span> | <span class="code-val">Logical</span> | <span class="code-val">Contextual</span></div>
+        <div>&nbsp;&nbsp;| <span class="code-val">Hallucination</span> | <span class="code-val">Overconfidence</span></div>
+        <div>}</div>
+      </div>
+      <div class="anatomy-text">
+        <span class="section-eyebrow">The Primitive</span>
+        <h2 class="section-title">A Scar is a structured wound</h2>
+        <p class="section-body">Every correction ECHO receives becomes a <em>Scar</em> — a typed, weighted memory object that lives in the Scar Lattice. Unlike RAG or fine-tuning, Scars form instantly, cost no compute, and grow stronger every time they fire.</p>
+        <p class="section-body">The <em>fingerprint</em> is a 128-dim semantic vector computed in pure Rust — no ML model, just math. Similarity search across 10,000 Scars completes in microseconds via Rayon parallel scan.</p>
+        <div class="field-list">
+          <div class="field-item">
+            <span class="field-name">weight</span>
+            <span class="field-desc">Influence strength. Increases every time this Scar fires in a pre-scan. Decays slowly over time.</span>
+          </div>
+          <div class="field-item">
+            <span class="field-name">confidence_at_time</span>
+            <span class="field-desc">How certain the model was when it was wrong. High confidence + wrong = overconfidence Scar.</span>
+          </div>
+          <div class="field-item">
+            <span class="field-name">times_triggered</span>
+            <span class="field-desc">How many future queries activated this Scar. A proxy for how common this mistake pattern is.</span>
+          </div>
+          <div class="field-item">
+            <span class="field-name">fingerprint</span>
+            <span class="field-desc">128-dim semantic vector. Used for cosine similarity matching against new queries in O(n) via rayon.</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- DOMAIN WEAKNESS MAP -->
+<section class="domain-section">
+  <div class="container">
+    <div class="section-header">
+      <span class="section-eyebrow">Domain Weakness Map</span>
+      <h2 class="section-title" style="font-style:italic;font-weight:300;color:var(--flesh-pale);font-size:clamp(1.8rem,4vw,2.8rem);">Where it bleeds most</h2>
+      <p style="color:var(--text-dim);max-width:500px;margin:0 auto;font-size:0.95rem;">Risk score = Scar volume + average weight + confidence at mistake. High risk domains get automatic confidence suppression.</p>
+    </div>
+    <div class="domain-bars" id="domainBars">
+      <div class="domain-row">
+        <span class="domain-name">math</span>
+        <div class="domain-bar-track"><div class="domain-bar-fill" data-width="82"></div></div>
+        <span class="domain-risk high">0.82</span>
+      </div>
+      <div class="domain-row">
+        <span class="domain-name">history</span>
+        <div class="domain-bar-track"><div class="domain-bar-fill" data-width="71"></div></div>
+        <span class="domain-risk high">0.71</span>
+      </div>
+      <div class="domain-row">
+        <span class="domain-name">science.physics</span>
+        <div class="domain-bar-track"><div class="domain-bar-fill" data-width="64"></div></div>
+        <span class="domain-risk medium">0.64</span>
+      </div>
+      <div class="domain-row">
+        <span class="domain-name">coding</span>
+        <div class="domain-bar-track"><div class="domain-bar-fill" data-width="48"></div></div>
+        <span class="domain-risk medium">0.48</span>
+      </div>
+      <div class="domain-row">
+        <span class="domain-name">geography</span>
+        <div class="domain-bar-track"><div class="domain-bar-fill" data-width="31"></div></div>
+        <span class="domain-risk low">0.31</span>
+      </div>
+      <div class="domain-row">
+        <span class="domain-name">technology</span>
+        <div class="domain-bar-track"><div class="domain-bar-fill" data-width="22"></div></div>
+        <span class="domain-risk low">0.22</span>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- PIPELINE -->
+<section class="pipeline-section">
+  <div class="container">
+    <div class="section-header">
+      <span class="section-eyebrow">The Loop</span>
+      <h2 class="section-title" style="font-style:italic;font-weight:300;color:var(--flesh-pale);font-size:clamp(1.8rem,4vw,2.8rem);">How ECHO heals itself</h2>
+    </div>
+    <div class="pipeline-steps" id="pipeline">
+      <div class="pipeline-step">
+        <div class="step-icon">💬</div>
+        <div class="step-content">
+          <span class="step-label">Input</span>
+          <span class="step-name">User prompt arrives</span>
+          <p class="step-desc">Raw query enters ECHO. Before a single token is generated, the Scar system intercepts.</p>
+        </div>
+      </div>
+      <div class="pipeline-step">
+        <div class="step-icon">🔬</div>
+        <div class="step-content">
+          <span class="step-label">Pre-Scan</span>
+          <span class="step-name">Lattice searched for wounds</span>
+          <p class="step-desc">128-dim fingerprint computed in Rust. Cosine similarity scan across all active Scars via Rayon. Top-k matches retrieved in microseconds.</p>
+        </div>
+      </div>
+      <div class="pipeline-step">
+        <div class="step-icon">⚠️</div>
+        <div class="step-content">
+          <span class="step-label">Caution Injection</span>
+          <span class="step-name">Past wounds prepended</span>
+          <p class="step-desc">If matching Scars found — a caution prompt is prepended: what was wrong before, what the correction was. Confidence suppressed up to 30% in risky domains.</p>
+        </div>
+      </div>
+      <div class="pipeline-step">
+        <div class="step-icon">🧠</div>
+        <div class="step-content">
+          <span class="step-label">Generation</span>
+          <span class="step-name">Qwen3.5-27B runs in Rust</span>
+          <p class="step-desc">Full inference via candle. The base model generates with scar context already in its window — no architecture change needed, just smarter input.</p>
+        </div>
+      </div>
+      <div class="pipeline-step">
+        <div class="step-icon">🩸</div>
+        <div class="step-content">
+          <span class="step-label">Correction</span>
+          <span class="step-name">User corrects → Scar forms</span>
+          <p class="step-desc">POST /v1/echo/correct. Scar crystallizes instantly. Duplicate check — if a similar Scar exists, its weight increases instead of creating a duplicate. Saved to disk atomically.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- STATS -->
+<section class="stats-section">
+  <div class="container">
+    <div class="section-header">
+      <span class="section-eyebrow">Architecture</span>
+      <h2 class="section-title" style="font-style:italic;font-weight:300;color:var(--flesh-pale);font-size:clamp(1.8rem,4vw,2.8rem);">By the numbers</h2>
+    </div>
+    <div class="stats-grid">
+      <div class="stat-card">
+        <span class="stat-number" data-target="27">0</span>
+        <span class="stat-label">Billion parameters</span>
+      </div>
+      <div class="stat-card">
+        <span class="stat-number" data-target="128">0</span>
+        <span class="stat-label">Scar fingerprint dims</span>
+      </div>
+      <div class="stat-card">
+        <span class="stat-number" data-target="10000">0</span>
+        <span class="stat-label">Max active Scars</span>
+      </div>
+      <div class="stat-card">
+        <span class="stat-number" data-target="5">0</span>
+        <span class="stat-label">Scar types</span>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- FOOTER -->
+<footer>
+  <span class="footer-title">Matrix ECHO</span>
+  <span class="footer-org">Matrix · Corp · V1 · Rust · Qwen3.5-27B</span>
+  <div class="footer-links">
+    <a class="footer-link" href="https://huggingface.co/Matrix-Corp">HuggingFace</a>
+    <a class="footer-link" href="https://github.com/zapgaming">GitHub</a>
+    <a class="footer-link" href="https://huggingface.co/Jackrong/Qwen3.5-27B-Claude-4.6-Opus-Reasoning-Distilled">Base Model</a>
+  </div>
+  <div class="footer-status">
+    <span class="pulse-dot" style="width:6px;height:6px;"></span>
+    Architecture Complete · Build In Progress
+  </div>
+</footer>
+<script>
+// ── CURSOR ──
+const cursor = document.getElementById('cursor');
+const trail = document.getElementById('cursorTrail');
+let mx = 0, my = 0, tx = 0, ty = 0;
+document.addEventListener('mousemove', e => {
+  mx = e.clientX; my = e.clientY;
+  cursor.style.left = mx - 6 + 'px';
+  cursor.style.top = my - 6 + 'px';
+});
+setInterval(() => {
+  tx += (mx - tx) * 0.12;
+  ty += (my - ty) * 0.12;
+  trail.style.left = tx - 16 + 'px';
+  trail.style.top = ty - 16 + 'px';
+}, 16);
+// ── SCAR LATTICE VISUALIZATION ──
+const canvas = document.getElementById('latticeCanvas');
+const svg = document.getElementById('latticeSvg');
+const scarData = [
+  { id: 1, x: 20, y: 40, r: 18, domain: 'math', label: 'Math', type: 'Factual', weight: 0.72, color: '#C0514A' },
+  { id: 2, x: 45, y: 25, r: 14, domain: 'math', label: 'Math', type: 'Logical', weight: 0.55, color: '#C0514A' },
+  { id: 3, x: 65, y: 55, r: 22, domain: 'history', label: 'Hist', type: 'Hallucination', weight: 0.88, color: '#8B5E3C' },
+  { id: 4, x: 30, y: 70, r: 12, domain: 'general', label: 'Gen', type: 'Contextual', weight: 0.34, color: '#7A3B3B' },
+  { id: 5, x: 75, y: 30, r: 16, domain: 'science', label: 'Sci', type: 'Factual', weight: 0.61, color: '#C4956A' },
+  { id: 6, x: 85, y: 70, r: 10, domain: 'coding', label: 'Code', type: 'Logical', weight: 0.42, color: '#8B5E3C' },
+  { id: 7, x: 50, y: 80, r: 13, domain: 'history', label: 'Hist', type: 'Overconfidence', weight: 0.67, color: '#8B5E3C' },
+];
+const edges = [[1,2],[1,4],[2,5],[3,7],[5,6],[3,4]];
+function renderLattice() {
+  const w = canvas.offsetWidth;
+  const h = canvas.offsetHeight;
+  // Draw edges
+  svg.innerHTML = '';
+  edges.forEach(([a, b]) => {
+    const na = scarData.find(s => s.id === a);
+    const nb = scarData.find(s => s.id === b);
+    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    line.setAttribute('x1', na.x / 100 * w);
+    line.setAttribute('y1', na.y / 100 * h);
+    line.setAttribute('x2', nb.x / 100 * w);
+    line.setAttribute('y2', nb.y / 100 * h);
+    line.setAttribute('stroke', 'rgba(196,149,106,0.15)');
+    line.setAttribute('stroke-width', '1');
+    line.setAttribute('stroke-dasharray', '3,4');
+    svg.appendChild(line);
+  });
+  // Remove old nodes
+  canvas.querySelectorAll('.scar-node').forEach(n => n.remove());
+  scarData.forEach(s => {
+    const node = document.createElement('div');
+    node.className = 'scar-node';
+    node.style.cssText = `
+      left: ${s.x / 100 * w - s.r}px;
+      top: ${s.y / 100 * h - s.r}px;
+      width: ${s.r * 2}px;
+      height: ${s.r * 2}px;
+      background: radial-gradient(circle at 35% 35%, ${s.color}88, ${s.color}33);
+      border: 1px solid ${s.color}66;
+      box-shadow: 0 0 ${s.weight * 20}px ${s.color}44;
+    `;
+    node.innerHTML = `
+      <span style="font-size:${Math.max(0.45, s.r * 0.04)}rem">${s.label}</span>
+      <div class="node-tooltip">${s.type} · weight: ${s.weight.toFixed(2)} · ${s.domain}</div>
+    `;
+    canvas.appendChild(node);
+  });
+}
+renderLattice();
+window.addEventListener('resize', renderLattice);
+// ── SCAR FORMATION ──
+const scarFeed = document.getElementById('scarFeed');
+let scarCount = scarData.length;
+const types = ['Factual', 'Logical', 'Hallucination', 'Contextual', 'Overconfidence'];
+const domains = ['math', 'history', 'coding', 'science.physics', 'general', 'geography'];
+const typeClasses = { Factual: '', Logical: 'logical', Hallucination: 'hallucination', Contextual: 'contextual', Overconfidence: 'hallucination' };
+document.getElementById('formScarBtn').addEventListener('click', () => {
+  const claim = document.getElementById('claimInput').value.trim();
+  const correction = document.getElementById('correctionInput').value.trim();
+  if (!claim || !correction) return;
+  const type = types[Math.floor(Math.random() * types.length)];
+  const domain = domains[Math.floor(Math.random() * domains.length)];
+  const weight = (0.4 + Math.random() * 0.5).toFixed(2);
+  const entry = document.createElement('div');
+  entry.className = `scar-entry ${typeClasses[type]}`;
+  entry.style.animationDelay = '0s';
+  entry.innerHTML = `
+    <span class="scar-type-badge">${type} · ${domain}</span>
+    <div class="scar-claim">"${claim.slice(0, 60)}${claim.length > 60 ? '...' : ''}"</div>
+    <div class="scar-correction">${correction.slice(0, 60)}${correction.length > 60 ? '...' : ''}</div>
+    <div class="scar-weight-bar"><div class="scar-weight-fill" style="width:0%"></div></div>
+  `;
+  scarFeed.prepend(entry);
+  setTimeout(() => {
+    entry.querySelector('.scar-weight-fill').style.width = (weight * 100) + '%';
+  }, 100);
+  // Add node to lattice
+  const colors = { Factual:'#C0514A', Logical:'#C4956A', Hallucination:'#7A3B3B', Contextual:'#8B5E3C', Overconfidence:'#C0514A' };
+  scarData.push({
+    id: ++scarCount,
+    x: 10 + Math.random() * 80,
+    y: 10 + Math.random() * 80,
+    r: 8 + Math.random() * 14,
+    domain, label: domain.split('.')[0].slice(0,4),
+    type, weight: parseFloat(weight),
+    color: colors[type]
+  });
+  if (scarData.length > 2) {
+    edges.push([scarData.length - 1, scarData.length - 3]);
+  }
+  renderLattice();
+  document.getElementById('claimInput').value = '';
+  document.getElementById('correctionInput').value = '';
+});
+// ── PRE-SCAN DEMO ──
+document.getElementById('scanBtn').addEventListener('click', () => {
+  const query = document.getElementById('queryInput').value.trim();
+  if (!query) return;
+  const out = document.getElementById('scanOutput');
+  out.innerHTML = '<span style="color:var(--scar-pale)">// scanning lattice...</span>';
+  setTimeout(() => {
+    const matches = Math.floor(Math.random() * 4);
+    const domain = domains[Math.floor(Math.random() * domains.length)];
+    const risk = (Math.random() * 0.9).toFixed(2);
+    const suppression = (Math.min(0.3, Math.random() * 0.35)).toFixed(2);
+    if (matches === 0) {
+      out.innerHTML = `<span style="color:var(--text-dim)">// no relevant scars found</span>
+<span style="color:var(--nerve)">caution_prompt: null</span>
+<span style="color:var(--nerve)">suppressed_confidence: 0.00</span>
+<span style="color:var(--text-dim)">// proceeding with full confidence</span>`;
+    } else {
+      out.innerHTML = `<span style="color:var(--scar-bright)">// ${matches} scar${matches > 1 ? 's' : ''} matched</span>
+<span style="color:var(--nerve)">domain: "${domain}"</span>
+<span style="color:var(--nerve)">domain_risk: ${risk}</span>
+<span style="color:var(--nerve)">suppressed_confidence: -${suppression}</span>
+<span style="color:var(--scar-pale)">caution_prompt: "[ECHO WARNING] Similar</span>
+<span style="color:var(--scar-pale)">  mistakes in ${domain}. Be careful."</span>`;
+    }
+    document.getElementById('queryInput').value = '';
+  }, 600);
+});
+// ── PIPELINE SCROLL ANIMATION ──
+const observer = new IntersectionObserver(entries => {
+  entries.forEach((entry, i) => {
+    if (entry.isIntersecting) {
+      setTimeout(() => entry.target.classList.add('visible'), entry.target.dataset.delay || 0);
+    }
+  });
+}, { threshold: 0.2 });
+document.querySelectorAll('.pipeline-step').forEach((step, i) => {
+  step.dataset.delay = i * 100;
+  observer.observe(step);
+});
+// ── DOMAIN BAR ANIMATION ──
+const barObserver = new IntersectionObserver(entries => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      entry.target.querySelectorAll('.domain-bar-fill').forEach(bar => {
+        setTimeout(() => {
+          bar.style.width = bar.dataset.width + '%';
+        }, 200);
+      });
+      barObserver.unobserve(entry.target);
+    }
+  });
+}, { threshold: 0.3 });
+barObserver.observe(document.getElementById('domainBars'));
+// ── STAT COUNTER ANIMATION ──
+function animateCounter(el, target, duration = 1500) {
+  const start = performance.now();
+  const update = now => {
+    const t = Math.min((now - start) / duration, 1);
+    const ease = 1 - Math.pow(1 - t, 3);
+    const val = Math.floor(ease * target);
+    el.textContent = val >= 1000 ? val.toLocaleString() : val;
+    if (t < 1) requestAnimationFrame(update);
+  };
+  requestAnimationFrame(update);
+}
+const statObserver = new IntersectionObserver(entries => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      entry.target.querySelectorAll('[data-target]').forEach(el => {
+        animateCounter(el, parseInt(el.dataset.target));
+      });
+      statObserver.unobserve(entry.target);
+    }
+  });
+}, { threshold: 0.4 });
+statObserver.observe(document.querySelector('.stats-grid'));
+</script>
+</body>
+</html>