Add local-first manifesto and distillation timeline

index.html

@@ -92,6 +92,28 @@
       </a>
     </section>
 
+    <section class="screen local-first" aria-labelledby="local-title">
+      <div class="local-copy">
+        <p class="kicker"><span></span> Local-first</p>
+        <h2 id="local-title">Not every intelligence should require an API call.</h2>
+        <p>
+          ADI is built for privacy, offline reliability, reproducible tools, and consumer hardware.
+          Local models keep useful intelligence close to the machine doing the work: available when
+          the network is not, inspectable when the stack matters, and practical without renting a
+          remote brain for every thought.
+        </p>
+      </div>
+
+      <ol class="timeline" aria-label="Distillation timeline">
+        <li><span>01</span><b>Seed prompts</b></li>
+        <li><span>02</span><b>Teacher answers</b></li>
+        <li><span>03</span><b>Student tune</b></li>
+        <li><span>04</span><b>GGUF</b></li>
+        <li><span>05</span><b>Ollama</b></li>
+        <li><span>06</span><b>Published</b></li>
+      </ol>
+    </section>
+
     <section class="screen pipeline" aria-labelledby="pipeline-title">
       <div class="pipeline-copy">
         <p class="kicker"><span></span> Pipeline</p>

styles.css

@@ -306,7 +306,8 @@ pre {
 }
 
 .models,
-.pipeline {
+.pipeline,
+.local-first {
   display: grid;
   align-content: center;
   gap: 32px;
@@ -407,6 +408,89 @@ pre {
   font-style: normal;
 }
 
+.local-first {
+  min-height: 78svh;
+}
+
+.local-copy {
+  max-width: 980px;
+}
+
+.local-copy p {
+  max-width: 76ch;
+  color: var(--muted);
+  font-size: 18px;
+}
+
+.timeline {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 10px;
+  margin: 24px 0 0;
+  padding: 28px 0 0;
+  list-style: none;
+}
+
+.timeline::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 52px;
+  height: 1px;
+  background: linear-gradient(90deg, var(--aqua), var(--blue), var(--gold));
+  opacity: 0.58;
+}
+
+.timeline::after {
+  content: "";
+  position: absolute;
+  top: 47px;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--aqua);
+  box-shadow: 0 0 22px rgba(37,247,196,0.8);
+  animation: timeline-scan 6s ease-in-out infinite;
+}
+
+.timeline li {
+  position: relative;
+  min-height: 176px;
+  display: grid;
+  align-content: start;
+  gap: 18px;
+  padding: 0 12px 18px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: rgba(8, 15, 22, 0.66);
+  backdrop-filter: blur(14px);
+}
+
+.timeline span {
+  width: 48px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+  margin: 0 auto;
+  transform: translateY(-1px);
+  border: 1px solid rgba(37,247,196,0.62);
+  border-radius: 999px;
+  background: rgba(2,4,5,0.86);
+  color: var(--aqua);
+  font: 800 12px/1 var(--mono);
+}
+
+.timeline b {
+  align-self: end;
+  color: var(--text);
+  font-size: clamp(16px, 1.5vw, 20px);
+  line-height: 1.1;
+  text-align: center;
+}
+
 .command-wrap {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -591,6 +675,11 @@ code {
   to { transform: translateY(110%); }
 }
 
+@keyframes timeline-scan {
+  0%, 8% { left: 0; transform: scale(1); }
+  92%, 100% { left: calc(100% - 12px); transform: scale(1); }
+}
+
 @media (max-width: 980px) {
   .screen { width: min(100vw - 28px, 1380px); }
   .asset-a { width: 82vw; height: auto; right: -8vw; top: 9svh; opacity: 0.56; }
@@ -600,6 +689,8 @@ code {
   .demo-strip { grid-template-columns: 1fr; }
   .model-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .pipeline-art { min-height: 520px; }
+  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .timeline::before, .timeline::after { display: none; }
 }
 
 @media (max-width: 640px) {
@@ -607,6 +698,8 @@ code {
   .asset-a { width: 104vw; height: auto; right: -28vw; top: 10svh; opacity: 0.42; }
   .command-wrap { grid-template-columns: 1fr; }
   .model-tabs { grid-template-columns: 1fr; }
+  .timeline { grid-template-columns: 1fr; }
+  .timeline li { min-height: 116px; }
   .pipeline-art { min-height: 420px; }
   .pipeline-art img:nth-child(1) { width: 100%; }
   .pipeline-art img:nth-child(2) { width: 82%; top: 42%; }