Rebuild as animated ADI model experience

app.js

@@ -1,33 +1,151 @@
-const filters = document.querySelectorAll(".filter");
-const models = document.querySelectorAll(".model");
-const toast = document.getElementById("toast");
+const canvas = document.getElementById("field");
+const ctx = canvas.getContext("2d");
+const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
-filters.forEach((button) => {
-  button.addEventListener("click", () => {
-    const filter = button.dataset.filter;
-    filters.forEach((item) => item.classList.toggle("is-active", item === button));
-    models.forEach((model) => {
-      model.hidden = filter !== "all" && model.dataset.kind !== filter;
-    });
-  });
-});
+let width = 0;
+let height = 0;
+let particles = [];
+
+function resize() {
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+  width = window.innerWidth;
+  height = window.innerHeight;
+  canvas.width = Math.floor(width * dpr);
+  canvas.height = Math.floor(height * dpr);
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  const count = Math.max(48, Math.min(120, Math.floor(width / 13)));
+  particles = Array.from({ length: count }, () => ({
+    x: Math.random() * width,
+    y: Math.random() * height,
+    z: Math.random() * 1 + 0.35,
+    vx: (Math.random() - 0.5) * 0.28,
+    vy: (Math.random() - 0.5) * 0.18,
+  }));
+}
+
+function draw() {
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = "rgba(2,4,5,0.22)";
+  ctx.fillRect(0, 0, width, height);
 
-document.querySelectorAll(".copy").forEach((button) => {
-  button.addEventListener("click", async () => {
-    const command = button.dataset.command;
-    try {
-      await navigator.clipboard.writeText(command);
-      showToast("Copied command");
-    } catch {
-      showToast("Copy failed");
+  for (const p of particles) {
+    if (!prefersReduced) {
+      p.x += p.vx * p.z;
+      p.y += p.vy * p.z;
+      if (p.x < -20) p.x = width + 20;
+      if (p.x > width + 20) p.x = -20;
+      if (p.y < -20) p.y = height + 20;
+      if (p.y > height + 20) p.y = -20;
     }
+
+    ctx.beginPath();
+    ctx.fillStyle = `rgba(37,247,196,${0.10 + p.z * 0.18})`;
+    ctx.arc(p.x, p.y, 1.2 * p.z, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  for (let i = 0; i < particles.length; i++) {
+    for (let j = i + 1; j < particles.length; j++) {
+      const a = particles[i];
+      const b = particles[j];
+      const dx = a.x - b.x;
+      const dy = a.y - b.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (dist < 120) {
+        ctx.strokeStyle = `rgba(91,211,255,${(1 - dist / 120) * 0.11})`;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(a.x, a.y);
+        ctx.lineTo(b.x, b.y);
+        ctx.stroke();
+      }
+    }
+  }
+
+  requestAnimationFrame(draw);
+}
+
+const lines = [
+  "$ ollama run hf.co/AdvancedDataIntelligence/adi-qwen3.5-4b-glm5.2-general-GGUF:Q4_K_M",
+  "loading gguf shards...",
+  "teacher imprint: glm-5.2",
+  "context window: long",
+  "mode: local-first",
+  "ready: ask ADI anything"
+];
+
+const typeout = document.getElementById("typeout");
+let char = 0;
+let text = "";
+
+function typeLoop() {
+  const full = lines.join("\n");
+  text = full.slice(0, char);
+  typeout.textContent = text + (char % 2 ? "█" : "");
+  char = char >= full.length ? 0 : char + 1;
+  setTimeout(typeLoop, char === 0 ? 900 : 32);
+}
+
+const models = {
+  qwen35: {
+    kind: "general assistant",
+    name: "adi-qwen3.5-4b-glm5.2-general",
+    body: "The smallest flagship ADI general model: distilled from glm-5.2 for practical local reasoning, explanation, and tool-aware chat.",
+    command: "ollama run hf.co/AdvancedDataIntelligence/adi-qwen3.5-4b-glm5.2-general-GGUF:Q4_K_M",
+    link: "https://huggingface.co/AdvancedDataIntelligence/adi-qwen3.5-4b-glm5.2-general-GGUF"
+  },
+  qwen3: {
+    kind: "general assistant",
+    name: "adi-qwen3-8b-glm5.2-general",
+    body: "More headroom for general reasoning while staying within a practical single-machine local inference envelope.",
+    command: "ollama run hf.co/AdvancedDataIntelligence/adi-qwen3-8b-glm5.2-general-GGUF:Q4_K_M",
+    link: "https://huggingface.co/AdvancedDataIntelligence/adi-qwen3-8b-glm5.2-general-GGUF"
+  },
+  coder: {
+    kind: "coding assistant",
+    name: "adi-qwen2.5-coder-7b-kimi2.7-code",
+    body: "A local coding model distilled from a frontier code teacher for generation, debugging, refactoring, and explanation.",
+    command: "ollama run hf.co/AdvancedDataIntelligence/adi-qwen2.5-coder-7b-kimi2.7-code-GGUF:Q4_K_M",
+    link: "https://huggingface.co/AdvancedDataIntelligence/adi-qwen2.5-coder-7b-kimi2.7-code-GGUF"
+  },
+  wake: {
+    kind: "voice interface",
+    name: "hey-adi-wakeword",
+    body: "A wakeword model for hands-free ADI loops, pairing local intelligence with ambient interaction.",
+    command: "hf.co/AdvancedDataIntelligence/hey-adi-wakeword",
+    link: "https://huggingface.co/AdvancedDataIntelligence/hey-adi-wakeword"
+  }
+};
+
+const kind = document.getElementById("model-kind");
+const name = document.getElementById("model-name");
+const body = document.getElementById("model-body");
+const command = document.getElementById("model-command");
+const link = document.getElementById("model-link");
+const toast = document.getElementById("toast");
+
+document.querySelectorAll(".tab").forEach((tab) => {
+  tab.addEventListener("click", () => {
+    document.querySelectorAll(".tab").forEach((item) => item.classList.toggle("active", item === tab));
+    const model = models[tab.dataset.model];
+    kind.textContent = model.kind;
+    name.textContent = model.name;
+    body.textContent = model.body;
+    command.textContent = model.command;
+    link.href = model.link;
   });
 });
 
-function showToast(message) {
-  toast.textContent = message;
-  toast.classList.add("is-visible");
-  window.clearTimeout(showToast.timeout);
-  showToast.timeout = window.setTimeout(() => toast.classList.remove("is-visible"), 1600);
-}
+document.getElementById("copy-command").addEventListener("click", async () => {
+  await navigator.clipboard.writeText(command.textContent);
+  toast.classList.add("show");
+  clearTimeout(window.toastTimer);
+  window.toastTimer = setTimeout(() => toast.classList.remove("show"), 1500);
+});
 
+window.addEventListener("resize", resize);
+resize();
+draw();
+typeLoop();

index.html

@@ -2,166 +2,109 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="description" content="Advanced Data Intelligence model lab: small local models distilled at theLAB and shipped as GGUF for Ollama and llama.cpp." />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <meta name="color-scheme" content="dark" />
+  <meta name="description" content="Advanced Data Intelligence: local GGUF models distilled at theLAB from frontier teachers." />
   <title>ADI Models Lab</title>
+  <link rel="preconnect" href="https://serve.thelabsource.com" />
   <link rel="stylesheet" href="./styles.css" />
 </head>
 <body>
+  <canvas id="field" aria-hidden="true"></canvas>
+
   <main>
-    <section class="hero" aria-labelledby="page-title">
-      <div class="hero__media" aria-hidden="true">
-        <img src="https://serve.thelabsource.com/u/FhQgYP.gif" alt="" />
+    <section class="screen hero" aria-labelledby="page-title">
+      <div class="asset-orbit" aria-hidden="true">
+        <img class="asset asset-a" src="https://serve.thelabsource.com/u/FhQgYP.gif" alt="" />
+        <img class="asset asset-b" src="https://serve.thelabsource.com/u/ih5dUC.png" alt="" />
+        <img class="asset asset-c" src="https://serve.thelabsource.com/u/4Kb3iS.gif" alt="" />
+        <img class="asset asset-d" src="https://serve.thelabsource.com/u/yZylMt.gif" alt="" />
       </div>
-      <div class="hero__content">
-        <p class="eyebrow">Advanced Data Intelligence</p>
-        <h1 id="page-title">Small local models distilled from frontier teachers.</h1>
+
+      <div class="hero-copy">
+        <p class="kicker"><span></span> Advanced Data Intelligence</p>
+        <h1 id="page-title">Distilled intelligence for local machines.</h1>
         <p class="lede">
-          ADI turns strong teacher outputs into compact GGUF models that run on consumer hardware,
-          built end-to-end at theLAB and published for Ollama, llama.cpp, and local-first workflows.
+          Compact ADI models distilled from frontier teachers, quantized to GGUF, and built at
+          <a href="https://thelabsource.com" target="_blank" rel="noreferrer">theLAB</a>
+          for Ollama, llama.cpp, and private local inference.
         </p>
-        <div class="hero__actions">
-          <a class="button button--primary" href="https://thelabsource.com" target="_blank" rel="noreferrer">Visit theLAB</a>
-          <a class="button" href="https://huggingface.co/AdvancedDataIntelligence" target="_blank" rel="noreferrer">View HF org</a>
-          <a class="button" href="https://huggingface.co/spaces/AdvancedDataIntelligence/adi-qwen3.5-4b-glm5.2-general-demo" target="_blank" rel="noreferrer">Try live demo</a>
+        <div class="actions">
+          <a class="button primary" href="https://thelabsource.com" target="_blank" rel="noreferrer">theLAB source</a>
+          <a class="button" href="https://huggingface.co/AdvancedDataIntelligence" target="_blank" rel="noreferrer">HF models</a>
+          <a class="button" href="#console">Run local</a>
         </div>
       </div>
-    </section>
 
-    <section class="band stats" aria-label="Model stats">
-      <article>
-        <span>Models</span>
-        <strong>6</strong>
-        <p>general, coding, voice, and upcoming larger students</p>
-      </article>
-      <article>
-        <span>Format</span>
-        <strong>GGUF</strong>
-        <p>ready for Ollama and llama.cpp runtimes</p>
-      </article>
-      <article>
-        <span>Training style</span>
-        <strong>Distill</strong>
-        <p>teacher answers transferred into smaller local students</p>
-      </article>
-      <article>
-        <span>Home</span>
-        <strong>theLAB</strong>
-        <p>Learning. Algorithms. Breakthroughs.</p>
-      </article>
-    </section>
-
-    <section class="section" aria-labelledby="lineup-title">
-      <div class="section__head">
-        <div>
-          <p class="eyebrow">Model Lineup</p>
-          <h2 id="lineup-title">Choose the local model for the job.</h2>
+      <div class="hero-panel" aria-label="ADI model status">
+        <div class="panel-bar">
+          <span></span><span></span><span></span>
+          <b>adi.local/distill</b>
         </div>
-        <div class="filters" role="group" aria-label="Model filters">
-          <button class="filter is-active" data-filter="all">All</button>
-          <button class="filter" data-filter="general">General</button>
-          <button class="filter" data-filter="code">Code</button>
-          <button class="filter" data-filter="voice">Voice</button>
+        <div class="ticker">
+          <p>teacher: glm-5.2</p>
+          <p>student: qwen3.5-4b</p>
+          <p>format: gguf:q4_k_m</p>
+          <p>runtime: ollama</p>
         </div>
+        <pre id="typeout"></pre>
       </div>
 
-      <div class="models" id="models">
-        <article class="model" data-kind="general">
-          <div class="model__top"><span>General</span><span>4B</span></div>
-          <h3>adi-qwen3.5-4b-glm5.2-general</h3>
-          <p>Compact general assistant distilled from glm-5.2, built for fast local answers with long-context headroom.</p>
-          <code>ollama run hf.co/AdvancedDataIntelligence/adi-qwen3.5-4b-glm5.2-general-GGUF:Q4_K_M</code>
-          <div class="model__actions">
-            <button class="copy" data-command="ollama run hf.co/AdvancedDataIntelligence/adi-qwen3.5-4b-glm5.2-general-GGUF:Q4_K_M">Copy</button>
-            <a href="https://huggingface.co/AdvancedDataIntelligence/adi-qwen3.5-4b-glm5.2-general-GGUF" target="_blank" rel="noreferrer">Model</a>
-          </div>
-        </article>
-
-        <article class="model" data-kind="general">
-          <div class="model__top"><span>General</span><span>8B</span></div>
-          <h3>adi-qwen3-8b-glm5.2-general</h3>
-          <p>General-purpose student with more parametric headroom while remaining practical on a single local GPU.</p>
-          <code>ollama run hf.co/AdvancedDataIntelligence/adi-qwen3-8b-glm5.2-general-GGUF:Q4_K_M</code>
-          <div class="model__actions">
-            <button class="copy" data-command="ollama run hf.co/AdvancedDataIntelligence/adi-qwen3-8b-glm5.2-general-GGUF:Q4_K_M">Copy</button>
-            <a href="https://huggingface.co/AdvancedDataIntelligence/adi-qwen3-8b-glm5.2-general-GGUF" target="_blank" rel="noreferrer">Model</a>
-          </div>
-        </article>
+      <div class="scroll-cue" aria-hidden="true">
+        <span>Explore the line</span>
+        <i></i>
+      </div>
+    </section>
 
-        <article class="model" data-kind="code">
-          <div class="model__top"><span>Code</span><span>7B</span></div>
-          <h3>adi-qwen2.5-coder-7b-kimi2.7-code</h3>
-          <p>Local coding assistant distilled from a frontier code teacher for writing, explaining, and debugging.</p>
-          <code>ollama run hf.co/AdvancedDataIntelligence/adi-qwen2.5-coder-7b-kimi2.7-code-GGUF:Q4_K_M</code>
-          <div class="model__actions">
-            <button class="copy" data-command="ollama run hf.co/AdvancedDataIntelligence/adi-qwen2.5-coder-7b-kimi2.7-code-GGUF:Q4_K_M">Copy</button>
-            <a href="https://huggingface.co/AdvancedDataIntelligence/adi-qwen2.5-coder-7b-kimi2.7-code-GGUF" target="_blank" rel="noreferrer">Model</a>
-          </div>
-        </article>
+    <section class="screen models" id="console" aria-labelledby="models-title">
+      <div class="section-copy">
+        <p class="kicker"><span></span> Model rail</p>
+        <h2 id="models-title">Pick a student. Copy a command. Run offline.</h2>
+      </div>
 
-        <article class="model" data-kind="general">
-          <div class="model__top"><span>General</span><span>9B</span></div>
-          <h3>adi-qwen3.5-9b-glm5.2-general</h3>
-          <p>A larger Qwen3.5 general student for users who want more reasoning headroom in the same ADI style.</p>
-          <code>hf.co/AdvancedDataIntelligence/adi-qwen3.5-9b-glm5.2-general-GGUF</code>
-          <div class="model__actions">
-            <a href="https://huggingface.co/AdvancedDataIntelligence/adi-qwen3.5-9b-glm5.2-general-GGUF" target="_blank" rel="noreferrer">Model</a>
-          </div>
-        </article>
+      <div class="model-stage">
+        <nav class="model-tabs" aria-label="ADI model selector">
+          <button class="tab active" data-model="qwen35">Qwen3.5 4B</button>
+          <button class="tab" data-model="qwen3">Qwen3 8B</button>
+          <button class="tab" data-model="coder">Coder 7B</button>
+          <button class="tab" data-model="wake">Wakeword</button>
+        </nav>
 
-        <article class="model" data-kind="general">
-          <div class="model__top"><span>General</span><span>14B</span></div>
-          <h3>adi-qwen2.5-14b-glm5.2-general</h3>
-          <p>A bigger general distill for stronger local quality when disk, RAM, and VRAM budgets allow it.</p>
-          <code>hf.co/AdvancedDataIntelligence/adi-qwen2.5-14b-glm5.2-general-GGUF</code>
-          <div class="model__actions">
-            <a href="https://huggingface.co/AdvancedDataIntelligence/adi-qwen2.5-14b-glm5.2-general-GGUF" target="_blank" rel="noreferrer">Model</a>
+        <article class="model-readout">
+          <div>
+            <p class="model-kind" id="model-kind">general assistant</p>
+            <h3 id="model-name">adi-qwen3.5-4b-glm5.2-general</h3>
+            <p id="model-body">The smallest flagship ADI general model: distilled from glm-5.2 for practical local reasoning, explanation, and tool-aware chat.</p>
           </div>
-        </article>
-
-        <article class="model" data-kind="voice">
-          <div class="model__top"><span>Wakeword</span><span>Voice</span></div>
-          <h3>hey-adi-wakeword</h3>
-          <p>A wakeword model for ADI interaction loops, connecting local AI with hands-free ambient workflows.</p>
-          <code>hf.co/AdvancedDataIntelligence/hey-adi-wakeword</code>
-          <div class="model__actions">
-            <a href="https://huggingface.co/AdvancedDataIntelligence/hey-adi-wakeword" target="_blank" rel="noreferrer">Model</a>
+          <div class="command-wrap">
+            <code id="model-command">ollama run hf.co/AdvancedDataIntelligence/adi-qwen3.5-4b-glm5.2-general-GGUF:Q4_K_M</code>
+            <button id="copy-command">Copy command</button>
           </div>
+          <a id="model-link" class="button primary" href="https://huggingface.co/AdvancedDataIntelligence/adi-qwen3.5-4b-glm5.2-general-GGUF" target="_blank" rel="noreferrer">Open model card</a>
         </article>
       </div>
     </section>
 
-    <section class="showcase" aria-labelledby="visuals-title">
-      <div>
-        <p class="eyebrow">Visual Map</p>
-        <h2 id="visuals-title">Built as a pipeline, not a prompt trick.</h2>
+    <section class="screen pipeline" aria-labelledby="pipeline-title">
+      <div class="pipeline-copy">
+        <p class="kicker"><span></span> Pipeline</p>
+        <h2 id="pipeline-title">Teacher answers become local weights.</h2>
         <p>
-          The ADI line is organized around repeatable distillation: collect prompts, generate teacher answers,
-          fine-tune compact students, merge adapters, quantize to GGUF, then ship model cards with practical run commands.
+          ADI is not a prompt wrapper. It is a repeatable distillation workflow:
+          seed prompts, teacher responses, student fine-tune, adapter merge,
+          GGUF conversion, local runtime, and public model cards.
         </p>
-        <a class="button button--primary" href="https://huggingface.co/datasets/AdvancedDataIntelligence/glm5.2-general-distill" target="_blank" rel="noreferrer">Explore dataset</a>
+        <a class="button" href="https://huggingface.co/datasets/AdvancedDataIntelligence/glm5.2-general-distill" target="_blank" rel="noreferrer">View dataset</a>
+      </div>
+      <div class="pipeline-art">
+        <img src="https://serve.thelabsource.com/u/oLHfvT.png" alt="ADI starter model lineup" />
+        <img src="https://serve.thelabsource.com/u/uSv2Lp.png" alt="ADI model lineup size comparison" />
+        <img src="https://serve.thelabsource.com/u/O8Cq1i.gif" alt="ADI animated mark" />
       </div>
-      <img src="https://serve.thelabsource.com/u/ih5dUC.png" alt="The ADI distillation pipeline" />
-    </section>
-
-    <section class="lab-grid" aria-label="ADI resources">
-      <a class="resource resource--wide" href="https://huggingface.co/spaces/AdvancedDataIntelligence/adi-qwen3.5-4b-glm5.2-general-demo" target="_blank" rel="noreferrer">
-        <img src="https://serve.thelabsource.com/u/4Kb3iS.gif" alt="ADI live demo preview" />
-        <span>Launch the live browser demo</span>
-      </a>
-      <a class="resource" href="https://thelabsource.com" target="_blank" rel="noreferrer">
-        <img src="https://serve.thelabsource.com/u/T5Kdlg.png" alt="" />
-        <span>Read more at theLAB</span>
-      </a>
-      <a class="resource" href="https://advanced-data-intelligence.com" target="_blank" rel="noreferrer">
-        <img src="https://serve.thelabsource.com/u/yZylMt.gif" alt="ADI animation" />
-        <span>Advanced Data Intelligence</span>
-      </a>
     </section>
   </main>
 
-  <div class="toast" id="toast" role="status" aria-live="polite">Copied command</div>
+  <div class="toast" id="toast" role="status" aria-live="polite">Copied</div>
   <script src="./app.js"></script>
 </body>
 </html>
-

styles.css

@@ -1,15 +1,18 @@
 :root {
   color-scheme: dark;
-  --bg: #05070a;
-  --panel: #111820;
-  --panel-2: #16202a;
-  --text: #f5f7fb;
-  --muted: #a8b3c2;
-  --line: #2b3643;
-  --green: #11c483;
-  --blue: #58c4ff;
-  --gold: #f4b954;
-  --ink: #04110d;
+  --bg: #020405;
+  --text: rgba(249, 252, 255, 0.94);
+  --muted: rgba(229, 238, 246, 0.62);
+  --dim: rgba(229, 238, 246, 0.34);
+  --line: rgba(255, 255, 255, 0.12);
+  --panel: rgba(8, 15, 22, 0.62);
+  --panel-strong: rgba(12, 22, 31, 0.86);
+  --aqua: #25f7c4;
+  --gold: #f5b64a;
+  --blue: #5bd3ff;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --display: Georgia, "Times New Roman", serif;
 }
 
 * { box-sizing: border-box; }
@@ -18,306 +21,488 @@ html { scroll-behavior: smooth; }
 
 body {
   margin: 0;
-  background: var(--bg);
+  overflow-x: hidden;
+  background:
+    radial-gradient(circle at 82% 12%, rgba(245, 182, 74, 0.12), transparent 28%),
+    radial-gradient(circle at 18% 32%, rgba(37, 247, 196, 0.14), transparent 32%),
+    var(--bg);
   color: var(--text);
-  font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font: 16px/1.58 var(--body);
+  -webkit-font-smoothing: antialiased;
+}
+
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 5;
+  background:
+    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
+  background-size: 64px 64px;
+  mask-image: linear-gradient(to bottom, black 0%, transparent 78%);
 }
 
 a { color: inherit; text-decoration: none; }
+button { font: inherit; color: inherit; }
+img { display: block; max-width: 100%; }
 
-img {
-  display: block;
-  max-width: 100%;
+#field {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
 }
 
 main {
-  width: min(1200px, calc(100vw - 32px));
+  position: relative;
+  z-index: 1;
+}
+
+.screen {
+  min-height: 100svh;
+  position: relative;
+  width: min(1380px, calc(100vw - 44px));
   margin: 0 auto;
 }
 
 .hero {
-  min-height: 92vh;
   display: grid;
-  grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.08fr);
-  gap: 44px;
-  align-items: center;
-  padding: 34px 0 48px;
+  align-items: end;
+  padding: 8svh 0 34px;
 }
 
-.hero__media {
-  min-height: 420px;
-  display: grid;
-  place-items: center;
-  overflow: hidden;
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: #0c1118;
+.asset-orbit {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  perspective: 1100px;
 }
 
-.hero__media img {
-  width: 100%;
-  height: 100%;
-  min-height: 420px;
+.asset {
+  position: absolute;
+  border: 1px solid rgba(255,255,255,0.13);
+  border-radius: 14px;
+  background: rgba(2,4,5,0.45);
+  box-shadow: 0 30px 120px rgba(0,0,0,0.5);
   object-fit: cover;
+  opacity: 0.86;
+  filter: saturate(1.08) contrast(1.05);
+  animation: float 10s ease-in-out infinite;
 }
 
-.hero__content {
-  display: grid;
-  gap: 22px;
+.asset-a {
+  width: min(48vw, 760px);
+  height: min(42vw, 520px);
+  left: 4vw;
+  top: 12svh;
+  transform: rotateX(6deg) rotateY(16deg) rotateZ(-2deg);
 }
 
-.eyebrow {
-  margin: 0;
-  color: var(--green);
-  font-size: 13px;
-  font-weight: 850;
+.asset-b {
+  width: min(36vw, 560px);
+  right: 3vw;
+  top: 9svh;
+  animation-delay: -3s;
+}
+
+.asset-c {
+  width: min(35vw, 520px);
+  right: 8vw;
+  bottom: 18svh;
+  animation-delay: -5s;
+}
+
+.asset-d {
+  width: min(24vw, 340px);
+  left: 39vw;
+  bottom: 12svh;
+  animation-delay: -7s;
+}
+
+.hero::after {
+  content: "";
+  position: absolute;
+  inset: auto -40px 0;
+  height: 62%;
+  background: linear-gradient(to top, var(--bg) 0%, rgba(2,4,5,0.92) 24%, rgba(2,4,5,0.52) 68%, transparent 100%);
+  pointer-events: none;
+}
+
+.hero-copy {
+  position: relative;
+  z-index: 2;
+  max-width: 880px;
+  padding: 0 0 8svh;
+}
+
+.kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0 0 22px;
+  color: var(--aqua);
+  font: 700 11px/1 var(--mono);
+  letter-spacing: 0.22em;
   text-transform: uppercase;
 }
 
+.kicker span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--aqua);
+  box-shadow: 0 0 18px rgba(37, 247, 196, 0.8);
+  animation: pulse 2.2s ease-in-out infinite;
+}
+
 h1, h2, h3, p { margin-top: 0; }
 
 h1 {
-  margin-bottom: 0;
-  max-width: 850px;
-  font-size: clamp(44px, 7vw, 82px);
-  line-height: 0.94;
+  margin-bottom: 28px;
+  max-width: 12ch;
+  font: 400 clamp(58px, 10vw, 146px)/0.88 var(--display);
   letter-spacing: 0;
+  text-shadow: 0 4px 54px #000;
 }
 
 h2 {
-  margin-bottom: 0;
-  font-size: clamp(30px, 4vw, 48px);
-  line-height: 1;
+  margin-bottom: 18px;
+  font: 400 clamp(42px, 6vw, 86px)/0.95 var(--display);
   letter-spacing: 0;
 }
 
 h3 {
-  margin-bottom: 10px;
-  font-size: 21px;
-  line-height: 1.16;
+  margin-bottom: 18px;
+  font-size: clamp(28px, 4vw, 56px);
+  line-height: 1;
   letter-spacing: 0;
 }
 
 .lede {
-  max-width: 680px;
-  margin-bottom: 0;
+  max-width: 62ch;
+  margin-bottom: 28px;
   color: var(--muted);
-  font-size: 18px;
+  font-size: 17px;
 }
 
-.hero__actions,
-.model__actions,
-.filters {
+.lede a {
+  color: var(--text);
+  border-bottom: 1px solid var(--line);
+}
+
+.actions {
   display: flex;
-  gap: 10px;
   flex-wrap: wrap;
-  align-items: center;
+  gap: 12px;
 }
 
 .button,
-.model__actions a,
-.copy,
-.filter {
-  min-height: 42px;
+.model-tabs button,
+#copy-command {
+  min-height: 46px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 8px;
   border: 1px solid var(--line);
-  background: #121b24;
+  border-radius: 999px;
+  background: rgba(255,255,255,0.035);
   color: var(--text);
-  padding: 0 14px;
-  font: inherit;
-  font-weight: 800;
+  padding: 0 18px;
+  font-size: 13px;
+  font-weight: 700;
   cursor: pointer;
+  backdrop-filter: blur(14px);
+  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
 }
 
-.button--primary,
-.copy {
-  border-color: transparent;
-  background: var(--green);
-  color: var(--ink);
+.button:hover,
+.model-tabs button:hover,
+#copy-command:hover {
+  transform: translateY(-1px);
+  border-color: rgba(255,255,255,0.36);
 }
 
-.band {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
-  margin: 0 0 74px;
+.button.primary,
+#copy-command {
+  border-color: rgba(37,247,196,0.8);
+  background: var(--aqua);
+  color: #00130d;
 }
 
-.stats article,
-.model {
+.hero-panel {
+  position: absolute;
+  z-index: 3;
+  right: 2vw;
+  bottom: 32px;
+  width: min(430px, 36vw);
   border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--panel);
+  border-radius: 18px;
+  background: rgba(5, 10, 14, 0.72);
+  box-shadow: 0 22px 90px rgba(0,0,0,0.5);
+  backdrop-filter: blur(18px);
+  overflow: hidden;
 }
 
-.stats article {
-  padding: 18px;
+.panel-bar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--line);
+  color: var(--dim);
+  font: 700 10px/1 var(--mono);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
 }
 
-.stats span,
-.model__top {
-  color: var(--muted);
-  font-size: 13px;
+.panel-bar span {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--line);
 }
 
-.stats strong {
-  display: block;
-  margin: 4px 0;
-  font-size: 30px;
-  line-height: 1;
+.panel-bar span:first-child { background: var(--aqua); }
+.panel-bar span:nth-child(2) { background: var(--gold); }
+.panel-bar b { margin-left: auto; font-weight: 700; }
+
+.ticker {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-bottom: 1px solid var(--line);
 }
 
-.stats p,
-.model p,
-.showcase p {
-  margin-bottom: 0;
+.ticker p {
+  margin: 0;
+  padding: 13px 14px;
+  border-right: 1px solid var(--line);
   color: var(--muted);
+  font: 11px/1.3 var(--mono);
+}
+
+.ticker p:nth-child(even) { border-right: 0; }
+
+pre {
+  min-height: 150px;
+  margin: 0;
+  padding: 16px;
+  color: #d6fff2;
+  white-space: pre-wrap;
+  font: 12px/1.7 var(--mono);
 }
 
-.section {
-  padding-bottom: 72px;
+.scroll-cue {
+  position: absolute;
+  z-index: 3;
+  left: 50%;
+  bottom: 18px;
+  transform: translateX(-50%);
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  color: var(--dim);
+  font: 700 10px/1 var(--mono);
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
 }
 
-.section__head {
-  display: flex;
-  justify-content: space-between;
-  gap: 20px;
-  align-items: end;
-  margin-bottom: 18px;
+.scroll-cue i {
+  width: 1px;
+  height: 34px;
+  background: var(--line);
+  overflow: hidden;
 }
 
-.filter.is-active {
-  border-color: var(--green);
-  background: rgba(17, 196, 131, 0.13);
+.scroll-cue i::after {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(transparent, var(--aqua), transparent);
+  animation: drop 1.8s ease-in-out infinite;
 }
 
-.models {
+.models,
+.pipeline {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 14px;
+  align-content: center;
+  gap: 32px;
+  padding: 72px 0;
 }
 
-.model {
-  min-height: 340px;
+.section-copy {
+  max-width: 860px;
+}
+
+.model-stage {
   display: grid;
-  grid-template-rows: auto auto 1fr auto auto;
-  gap: 12px;
-  padding: 18px;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 18px;
 }
 
-.model__top {
-  display: flex;
-  justify-content: space-between;
+.model-tabs {
+  display: grid;
   gap: 10px;
+  align-content: start;
+}
+
+.model-tabs button {
+  justify-content: flex-start;
+  border-radius: 14px;
+}
+
+.model-tabs button.active {
+  border-color: rgba(37,247,196,0.8);
+  background: rgba(37,247,196,0.12);
+}
+
+.model-readout {
+  min-height: 470px;
+  display: grid;
+  align-content: space-between;
+  gap: 24px;
+  padding: clamp(22px, 4vw, 52px);
+  border: 1px solid var(--line);
+  border-radius: 22px;
+  background:
+    linear-gradient(135deg, rgba(37,247,196,0.10), transparent 36%),
+    linear-gradient(315deg, rgba(245,182,74,0.10), transparent 36%),
+    var(--panel-strong);
+  box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 30px 130px rgba(0,0,0,0.36);
+}
+
+.model-kind {
+  margin-bottom: 14px;
+  color: var(--aqua);
+  font: 700 11px/1 var(--mono);
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.model-readout p:not(.model-kind) {
+  max-width: 70ch;
+  color: var(--muted);
+}
+
+.command-wrap {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
 }
 
 code {
   display: block;
-  overflow: auto;
+  overflow-x: auto;
   border: 1px solid var(--line);
-  border-radius: 8px;
-  background: #090e14;
-  color: #d9fff0;
-  padding: 12px;
-  font-size: 12px;
+  border-radius: 16px;
+  background: rgba(0,0,0,0.42);
+  color: #d9fff3;
+  padding: 18px;
+  font: 12px/1.5 var(--mono);
   white-space: nowrap;
 }
 
-.showcase {
-  display: grid;
-  grid-template-columns: minmax(300px, 0.86fr) minmax(360px, 1.14fr);
-  gap: 28px;
+.pipeline {
+  grid-template-columns: 0.82fr 1.18fr;
   align-items: center;
-  padding: 34px;
-  margin-bottom: 16px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--panel);
 }
 
-.showcase > div {
-  display: grid;
-  gap: 16px;
-  align-content: center;
+.pipeline-copy {
+  max-width: 580px;
 }
 
-.showcase img,
-.resource img {
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.11);
+.pipeline-copy p {
+  color: var(--muted);
+  margin-bottom: 24px;
 }
 
-.lab-grid {
-  display: grid;
-  grid-template-columns: 1.3fr 0.85fr 0.85fr;
-  gap: 14px;
-  padding: 0 0 44px;
+.pipeline-art {
+  min-height: 620px;
+  position: relative;
 }
 
-.resource {
-  min-height: 230px;
-  display: grid;
-  align-content: space-between;
-  gap: 14px;
-  padding: 14px;
+.pipeline-art img {
+  position: absolute;
   border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--panel-2);
-  font-weight: 850;
+  border-radius: 18px;
+  background: rgba(0,0,0,0.3);
+  box-shadow: 0 24px 110px rgba(0,0,0,0.46);
 }
 
-.resource--wide {
-  min-height: 300px;
+.pipeline-art img:nth-child(1) {
+  width: 72%;
+  right: 0;
+  top: 2%;
 }
 
-.resource span {
-  color: var(--text);
+.pipeline-art img:nth-child(2) {
+  width: 58%;
+  left: 0;
+  top: 38%;
+}
+
+.pipeline-art img:nth-child(3) {
+  width: 34%;
+  right: 10%;
+  bottom: 0;
 }
 
 .toast {
   position: fixed;
+  z-index: 10;
   right: 18px;
   bottom: 18px;
   transform: translateY(90px);
-  transition: transform 180ms ease;
   border: 1px solid var(--line);
-  border-radius: 8px;
-  background: #101820;
+  border-radius: 999px;
+  background: rgba(6,12,17,0.86);
   color: var(--text);
-  padding: 12px 14px;
-  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
+  padding: 12px 18px;
+  backdrop-filter: blur(14px);
+  transition: transform 180ms ease;
 }
 
-.toast.is-visible {
-  transform: translateY(0);
+.toast.show { transform: translateY(0); }
+
+@keyframes float {
+  0%, 100% { translate: 0 0; }
+  50% { translate: 0 -20px; }
 }
 
-@media (max-width: 980px) {
-  .hero,
-  .showcase,
-  .lab-grid {
-    grid-template-columns: 1fr;
-  }
+@keyframes pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.9); opacity: 0.55; }
+}
 
-  .band,
-  .models {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+@keyframes drop {
+  from { transform: translateY(-110%); }
+  to { transform: translateY(110%); }
+}
 
-  .section__head {
-    align-items: start;
-    flex-direction: column;
-  }
+@media (max-width: 980px) {
+  .screen { width: min(100vw - 28px, 1380px); }
+  .asset-a { width: 86vw; height: 52svh; left: 0; top: 9svh; }
+  .asset-b, .asset-d { display: none; }
+  .asset-c { width: 58vw; right: 0; bottom: 20svh; }
+  .hero-panel { position: relative; right: auto; bottom: auto; width: 100%; margin-bottom: 80px; }
+  .hero-copy { padding-bottom: 28px; }
+  .model-stage, .pipeline { grid-template-columns: 1fr; }
+  .model-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .pipeline-art { min-height: 520px; }
 }
 
 @media (max-width: 640px) {
-  main { width: min(100vw - 22px, 1200px); }
-  .hero { min-height: auto; padding-top: 18px; }
-  .hero__media, .hero__media img { min-height: 280px; }
-  .band, .models { grid-template-columns: 1fr; }
-  .showcase { padding: 18px; }
+  h1 { font-size: clamp(48px, 17vw, 78px); }
+  .asset-c { display: none; }
+  .command-wrap { grid-template-columns: 1fr; }
+  .model-tabs { grid-template-columns: 1fr; }
+  .pipeline-art { min-height: 420px; }
+  .pipeline-art img:nth-child(1) { width: 100%; }
+  .pipeline-art img:nth-child(2) { width: 82%; top: 42%; }
+  .pipeline-art img:nth-child(3) { width: 52%; }
 }
-