diff --git a/site/README.md b/site/README.md
deleted file mode 100644
index 80cedee..0000000
--- a/site/README.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Mouse site
-
-Marketing landing page for Mouse — structure inspired by [sleek.design](https://sleek.design/),
-visual language from Mouse (`DESIGN.md`), hero driven by the dither-boids widget.
-
-## Run locally
-
-```sh
-cd site
-python3 -m http.server 8765
-# open http://127.0.0.1:8765/
-```
-
-## Layout
-
-| Path | Role |
-|---|---|
-| `index.html` | Landing page |
-| `styles.css` | Monochrome + IBM Plex Mono |
-| `main.js` | Nav solidify, reveal-on-scroll, dither pause |
-| `dither.html` | Dither-boids widget (`?embed=1&imgs=…`) |
-| `assets/` | Logo + interface screenshots |
-
-Embed mode hides the widget chrome, biases the flock to the right for hero copy,
-auto-loads the listed images, and cycles them.
diff --git a/site/styles.css b/site/styles.css
deleted file mode 100644
index 5cbdd24..0000000
--- a/site/styles.css
+++ /dev/null
@@ -1,919 +0,0 @@
-/* Mouse marketing site — terminal honesty, monochrome, IBM Plex Mono */
-
-:root {
-  --bg: #f4f4f2;
-  --bg-deep: #07070a;
-  --ink: #0a0a0c;
-  --ink-muted: rgba(10, 10, 12, 0.58);
-  --paper: #f2f0ea;
-  --panel: #0d0d11;
-  --line: rgba(10, 10, 12, 0.12);
-  --line-strong: rgba(10, 10, 12, 0.28);
-  --paper-line: rgba(242, 240, 234, 0.14);
-  --radius: 28px;
-  --radius-sm: 14px;
-  --gutter: clamp(1.25rem, 4vw, 3rem);
-  --max: 1120px;
-  --font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  --ease: cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html { scroll-behavior: auto; }
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-body {
-  margin: 0;
-  font-family: var(--font);
-  color: var(--ink);
-  background: var(--bg);
-  line-height: 1.45;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-
-img {
-  max-width: 100%;
-  display: block;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-button {
-  font: inherit;
-  color: inherit;
-  background: none;
-  border: 0;
-  cursor: pointer;
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.wrap {
-  width: min(100% - 2 * var(--gutter), var(--max));
-  margin-inline: auto;
-}
-
-/* ---------- nav ---------- */
-
-.nav {
-  position: fixed;
-  inset: 0 0 auto 0;
-  z-index: 40;
-  height: 64px;
-  display: flex;
-  align-items: center;
-  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
-  border-bottom: 1px solid transparent;
-}
-
-.nav.is-solid {
-  background: rgba(244, 244, 242, 0.86);
-  border-bottom-color: var(--line);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-}
-
-.nav.is-solid .nav-brand,
-.nav.is-solid .nav-link {
-  color: var(--ink);
-}
-
-.nav.is-solid .nav-link {
-  color: var(--ink-muted);
-}
-
-.nav.is-solid .nav-link:hover {
-  color: var(--ink);
-}
-
-.nav-inner {
-  width: min(100% - 2 * var(--gutter), var(--max));
-  margin-inline: auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.nav-brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.7rem;
-  color: var(--paper);
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  font-size: 1.05rem;
-}
-
-.nav-brand img {
-  width: 28px;
-  height: 28px;
-  object-fit: contain;
-  filter: invert(1);
-}
-
-.nav.is-solid .nav-brand img {
-  filter: none;
-}
-
-.nav-links {
-  display: none;
-  gap: 1.75rem;
-}
-
-@media (min-width: 800px) {
-  .nav-links { display: flex; }
-}
-
-.nav-link {
-  color: rgba(242, 240, 234, 0.62);
-  font-size: 0.85rem;
-  transition: color 0.2s ease;
-}
-
-.nav-link:hover {
-  color: var(--paper);
-}
-
-.nav-cta {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  height: 34px;
-  padding: 0 0.9rem;
-  border-radius: 8px;
-  background: var(--paper);
-  color: var(--bg-deep);
-  font-size: 0.8rem;
-  font-weight: 600;
-  transition: transform 0.18s var(--ease), filter 0.18s ease;
-}
-
-.nav.is-solid .nav-cta {
-  background: var(--ink);
-  color: var(--paper);
-}
-
-.nav-cta:hover {
-  transform: translateY(-1px);
-  filter: brightness(0.96);
-}
-
-/* ---------- hero ---------- */
-
-.hero {
-  position: relative;
-  min-height: 100svh;
-  background: var(--bg-deep);
-  color: var(--paper);
-  overflow: hidden;
-  display: grid;
-  align-items: end;
-}
-
-.hero-viz {
-  position: absolute;
-  inset: 0;
-  border: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: auto;
-  z-index: 0;
-}
-
-.hero-fade {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  pointer-events: none;
-  background:
-    linear-gradient(90deg, rgba(7, 7, 10, 0.92) 0%, rgba(7, 7, 10, 0.55) 38%, rgba(7, 7, 10, 0.12) 68%, transparent 100%),
-    linear-gradient(180deg, rgba(7, 7, 10, 0.45) 0%, transparent 28%, transparent 62%, rgba(7, 7, 10, 0.88) 100%);
-}
-
-.hero-content {
-  position: relative;
-  z-index: 2;
-  width: min(100% - 2 * var(--gutter), var(--max));
-  margin: 0 auto;
-  padding: 7.5rem 0 4.5rem;
-  pointer-events: none;
-}
-
-.hero-content > * {
-  pointer-events: auto;
-  max-width: 34rem;
-}
-
-.hero-kicker {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.55rem;
-  margin: 0 0 1.4rem;
-  font-size: 0.72rem;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-  color: rgba(242, 240, 234, 0.55);
-}
-
-.hero-kicker::before {
-  content: "";
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--paper);
-  box-shadow: 0 0 0 4px rgba(242, 240, 234, 0.12);
-  animation: pulse-dot 2.2s ease-in-out infinite;
-}
-
-@keyframes pulse-dot {
-  0%, 100% { opacity: 0.45; transform: scale(0.9); }
-  50% { opacity: 1; transform: scale(1); }
-}
-
-.hero-brand {
-  margin: 0 0 1rem;
-  font-size: clamp(3.4rem, 11vw, 6.4rem);
-  line-height: 0.92;
-  letter-spacing: -0.06em;
-  font-weight: 700;
-}
-
-.hero-title {
-  margin: 0 0 1rem;
-  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
-  line-height: 1.25;
-  font-weight: 500;
-  letter-spacing: -0.03em;
-  color: rgba(242, 240, 234, 0.92);
-}
-
-.hero-lede {
-  margin: 0 0 2rem;
-  font-size: 0.98rem;
-  line-height: 1.55;
-  color: rgba(242, 240, 234, 0.58);
-  max-width: 28rem;
-}
-
-.hero-lede code {
-  font-family: inherit;
-  font-size: 0.92em;
-  color: rgba(242, 240, 234, 0.82);
-}
-
-.hero-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin-bottom: 2.75rem;
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  height: 44px;
-  padding: 0 1.15rem;
-  border-radius: 10px;
-  font-size: 0.88rem;
-  font-weight: 600;
-  transition: transform 0.18s var(--ease), background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
-}
-
-.btn:hover {
-  transform: translateY(-1px);
-}
-
-.btn-primary {
-  background: var(--paper);
-  color: var(--bg-deep);
-}
-
-.btn-primary:hover {
-  filter: brightness(0.96);
-}
-
-.btn-ghost {
-  border: 1px solid rgba(242, 240, 234, 0.28);
-  color: var(--paper);
-  background: rgba(13, 13, 17, 0.35);
-  backdrop-filter: blur(8px);
-}
-
-.btn-ghost:hover {
-  border-color: rgba(242, 240, 234, 0.55);
-}
-
-.btn-dark {
-  background: var(--ink);
-  color: var(--paper);
-}
-
-.btn-dark:hover {
-  filter: brightness(1.08);
-}
-
-.btn-line {
-  border: 1px solid var(--line-strong);
-  color: var(--ink);
-}
-
-.btn-line:hover {
-  background: rgba(10, 10, 12, 0.04);
-}
-
-.hero-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.6rem 1.4rem;
-  font-size: 0.72rem;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: rgba(242, 240, 234, 0.42);
-}
-
-.hero-meta span {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-}
-
-.hero-meta span::before {
-  content: "·";
-  opacity: 0.55;
-}
-
-.hero-hint {
-  margin-top: 1.75rem;
-  font-size: 0.72rem;
-  color: rgba(242, 240, 234, 0.35);
-  letter-spacing: 0.02em;
-}
-
-/* ---------- sections ---------- */
-
-.section {
-  padding: clamp(4.5rem, 10vw, 7rem) 0;
-}
-
-.section-head {
-  display: flex;
-  flex-direction: column;
-  gap: 0.65rem;
-  margin-bottom: 2.5rem;
-  max-width: 36rem;
-}
-
-.section-head h2 {
-  margin: 0;
-  font-size: clamp(1.65rem, 3.5vw, 2.35rem);
-  letter-spacing: -0.04em;
-  line-height: 1.15;
-  font-weight: 650;
-}
-
-.section-head p {
-  margin: 0;
-  color: var(--ink-muted);
-  font-size: 0.98rem;
-}
-
-.section-dark {
-  background: var(--bg-deep);
-  color: var(--paper);
-}
-
-.section-dark .section-head p {
-  color: rgba(242, 240, 234, 0.55);
-}
-
-.section-alt {
-  background: #ebebe8;
-}
-
-/* ---------- gesture grid ---------- */
-
-.gesture-grid {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: 1fr;
-}
-
-@media (min-width: 720px) {
-  .gesture-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 980px) {
-  .gesture-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-.gesture-card {
-  padding: 1.35rem 1.3rem 1.45rem;
-  border: 1px solid var(--line);
-  border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.55);
-  transition: transform 0.35s var(--ease), border-color 0.25s ease, background 0.25s ease;
-}
-
-.gesture-card:hover {
-  transform: translateY(-3px);
-  border-color: var(--line-strong);
-  background: #fff;
-}
-
-.gesture-card .key {
-  display: inline-block;
-  margin-bottom: 0.85rem;
-  font-size: 0.68rem;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--ink-muted);
-}
-
-.gesture-card h3 {
-  margin: 0 0 0.55rem;
-  font-size: 1.05rem;
-  letter-spacing: -0.02em;
-}
-
-.gesture-card p {
-  margin: 0;
-  font-size: 0.88rem;
-  color: var(--ink-muted);
-  line-height: 1.5;
-}
-
-.law {
-  margin-top: 2rem;
-  padding: 1.25rem 1.35rem;
-  border-left: 2px solid var(--ink);
-  background: rgba(10, 10, 12, 0.03);
-  font-size: 0.92rem;
-  line-height: 1.55;
-}
-
-.law strong {
-  font-weight: 650;
-}
-
-/* ---------- showcase / screens ---------- */
-
-.showcase {
-  display: grid;
-  gap: 1.25rem;
-}
-
-@media (min-width: 900px) {
-  .showcase {
-    grid-template-columns: 1.15fr 0.85fr;
-    align-items: stretch;
-  }
-}
-
-.phone-frame {
-  position: relative;
-  border-radius: calc(var(--radius) + 8px);
-  background: var(--panel);
-  padding: 0.85rem;
-  border: 1px solid rgba(242, 240, 234, 0.08);
-  overflow: hidden;
-  min-height: 420px;
-}
-
-.phone-frame img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: var(--radius);
-  background: #111;
-}
-
-.phone-caption {
-  position: absolute;
-  left: 1.35rem;
-  bottom: 1.35rem;
-  right: 1.35rem;
-  padding: 0.85rem 1rem;
-  border-radius: 12px;
-  background: rgba(7, 7, 10, 0.78);
-  border: 1px solid rgba(242, 240, 234, 0.12);
-  backdrop-filter: blur(10px);
-  color: var(--paper);
-}
-
-.phone-caption .label {
-  display: block;
-  font-size: 0.68rem;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: rgba(242, 240, 234, 0.45);
-  margin-bottom: 0.35rem;
-}
-
-.phone-caption strong {
-  font-size: 0.95rem;
-  font-weight: 600;
-}
-
-.stack-cards {
-  display: grid;
-  gap: 1rem;
-}
-
-.stack-card {
-  display: grid;
-  grid-template-columns: 88px 1fr;
-  gap: 1rem;
-  align-items: center;
-  padding: 0.85rem;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--paper-line);
-  background: rgba(255, 255, 255, 0.03);
-  transition: transform 0.3s var(--ease), background 0.25s ease;
-}
-
-.stack-card:hover {
-  transform: translateX(4px);
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.stack-card img {
-  width: 88px;
-  height: 88px;
-  object-fit: cover;
-  border-radius: 10px;
-  background: #111;
-}
-
-.stack-card h3 {
-  margin: 0 0 0.3rem;
-  font-size: 0.98rem;
-}
-
-.stack-card p {
-  margin: 0;
-  font-size: 0.82rem;
-  color: rgba(242, 240, 234, 0.55);
-  line-height: 1.45;
-}
-
-/* ---------- gallery ---------- */
-
-.gallery {
-  display: grid;
-  gap: 1.5rem;
-  grid-template-columns: 1fr;
-}
-
-@media (min-width: 700px) {
-  .gallery {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.gallery-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.85rem;
-}
-
-.gallery-frame {
-  border-radius: var(--radius);
-  overflow: hidden;
-  background: #111;
-  border: 1px solid var(--line);
-  aspect-ratio: 16 / 11;
-}
-
-.gallery-frame img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.55s var(--ease);
-}
-
-.gallery-item:hover .gallery-frame img {
-  transform: scale(1.03);
-}
-
-.gallery-item h3 {
-  margin: 0;
-  font-size: 1rem;
-  letter-spacing: -0.02em;
-}
-
-.gallery-item p {
-  margin: 0;
-  font-size: 0.86rem;
-  color: var(--ink-muted);
-}
-
-/* ---------- capabilities ---------- */
-
-.caps {
-  display: grid;
-  gap: 1rem;
-}
-
-@media (min-width: 800px) {
-  .caps {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-.cap {
-  padding: 1.5rem 1.35rem;
-  border-radius: var(--radius-sm);
-  background: #fff;
-  border: 1px solid var(--line);
-}
-
-.cap .num {
-  display: block;
-  margin-bottom: 1.1rem;
-  font-size: 0.72rem;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--ink-muted);
-}
-
-.cap h3 {
-  margin: 0 0 0.55rem;
-  font-size: 1.15rem;
-  letter-spacing: -0.03em;
-}
-
-.cap p {
-  margin: 0;
-  color: var(--ink-muted);
-  font-size: 0.9rem;
-  line-height: 1.5;
-}
-
-.cap code {
-  font-family: inherit;
-  font-size: 0.84em;
-  padding: 0.05em 0.3em;
-  border-radius: 4px;
-  background: rgba(10, 10, 12, 0.06);
-}
-
-/* ---------- steps ---------- */
-
-.steps {
-  display: grid;
-  gap: 0;
-  counter-reset: step;
-  border-top: 1px solid var(--line);
-}
-
-.step {
-  display: grid;
-  gap: 0.75rem;
-  padding: 1.6rem 0;
-  border-bottom: 1px solid var(--line);
-  grid-template-columns: auto 1fr;
-  align-items: start;
-}
-
-.step::before {
-  counter-increment: step;
-  content: counter(step, decimal-leading-zero);
-  font-size: 0.78rem;
-  letter-spacing: 0.08em;
-  color: var(--ink-muted);
-  padding-top: 0.2rem;
-  min-width: 2.2rem;
-}
-
-.step h3 {
-  margin: 0 0 0.4rem;
-  font-size: 1.1rem;
-  letter-spacing: -0.02em;
-}
-
-.step p {
-  margin: 0;
-  color: var(--ink-muted);
-  font-size: 0.92rem;
-  max-width: 40rem;
-}
-
-/* ---------- FAQ ---------- */
-
-.faq {
-  display: grid;
-  gap: 0.65rem;
-  max-width: 46rem;
-}
-
-.faq details {
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.55);
-  padding: 0 1.1rem;
-  transition: border-color 0.2s ease, background 0.2s ease;
-}
-
-.faq details[open] {
-  background: #fff;
-  border-color: var(--line-strong);
-}
-
-.faq summary {
-  list-style: none;
-  cursor: pointer;
-  padding: 1.05rem 0;
-  font-weight: 600;
-  font-size: 0.95rem;
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: center;
-}
-
-.faq summary::-webkit-details-marker {
-  display: none;
-}
-
-.faq summary::after {
-  content: "+";
-  font-weight: 400;
-  color: var(--ink-muted);
-  font-size: 1.15rem;
-  line-height: 1;
-}
-
-.faq details[open] summary::after {
-  content: "−";
-}
-
-.faq details p {
-  margin: 0 0 1.1rem;
-  color: var(--ink-muted);
-  font-size: 0.9rem;
-  line-height: 1.55;
-}
-
-/* ---------- CTA band ---------- */
-
-.cta-band {
-  position: relative;
-  overflow: hidden;
-  background: var(--bg-deep);
-  color: var(--paper);
-  padding: clamp(4.5rem, 10vw, 7rem) 0;
-  text-align: center;
-}
-
-.cta-band::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: -40%;
-  width: 70vw;
-  height: 70vw;
-  transform: translateX(-50%);
-  background: radial-gradient(circle, rgba(242, 240, 234, 0.12), transparent 62%);
-  pointer-events: none;
-}
-
-.cta-inner {
-  position: relative;
-  z-index: 1;
-  width: min(100% - 2 * var(--gutter), 40rem);
-  margin-inline: auto;
-}
-
-.cta-band h2 {
-  margin: 0 0 0.85rem;
-  font-size: clamp(1.8rem, 4vw, 2.6rem);
-  letter-spacing: -0.045em;
-  line-height: 1.1;
-}
-
-.cta-band p {
-  margin: 0 0 1.75rem;
-  color: rgba(242, 240, 234, 0.55);
-  font-size: 0.98rem;
-}
-
-.cta-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.75rem;
-}
-
-/* ---------- footer ---------- */
-
-.footer {
-  padding: 2rem 0 2.5rem;
-  border-top: 1px solid var(--line);
-  background: var(--bg);
-}
-
-.footer-inner {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 0.8rem;
-  color: var(--ink-muted);
-}
-
-.footer-brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.55rem;
-  color: var(--ink);
-  font-weight: 600;
-}
-
-.footer-brand img {
-  width: 20px;
-  height: 20px;
-}
-
-.footer-links {
-  display: flex;
-  gap: 1.25rem;
-}
-
-.footer-links a:hover {
-  color: var(--ink);
-}
-
-/* ---------- motion reveals ---------- */
-/* Hidden only when JS opted in — otherwise content stays readable. */
-
-html.js .reveal {
-  opacity: 0;
-  transform: translateY(18px);
-  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
-}
-
-html.js .reveal.is-in {
-  opacity: 1;
-  transform: none;
-}
-
-html.js .reveal-delay-1 { transition-delay: 0.08s; }
-html.js .reveal-delay-2 { transition-delay: 0.16s; }
-html.js .reveal-delay-3 { transition-delay: 0.24s; }
-
-@media (max-width: 720px) {
-  .hero-fade {
-    background:
-      linear-gradient(180deg, rgba(7, 7, 10, 0.55) 0%, rgba(7, 7, 10, 0.28) 28%, rgba(7, 7, 10, 0.72) 58%, rgba(7, 7, 10, 0.94) 100%),
-      linear-gradient(90deg, rgba(7, 7, 10, 0.88) 0%, rgba(7, 7, 10, 0.55) 55%, rgba(7, 7, 10, 0.2) 100%);
-  }
-
-  .hero-content {
-    padding: 6.5rem 0 3.25rem;
-  }
-
-  .hero-content > * {
-    max-width: none;
-  }
-
-  .hero-viz {
-    opacity: 0.72;
-  }
-}
diff --git a/website/README.md b/website/README.md
new file mode 100644
index 0000000..a74a0e3
--- /dev/null
+++ b/website/README.md
@@ -0,0 +1,26 @@
+# Mouse website
+
+Marketing landing page for Mouse — a dark, single-page site in the app's own
+visual language (`DESIGN.md`): IBM Plex Mono, monochrome, black panels, hero
+driven by the dither-boids widget.
+
+## Run locally
+
+```sh
+cd website
+python3 -m http.server 8765
+# open http://127.0.0.1:8765/
+```
+
+## Layout
+
+| Path | Role |
+|---|---|
+| `index.html` | Landing page |
+| `styles.css` | Dark theme, monochrome + IBM Plex Mono |
+| `main.js` | Nav solidify, GitHub star count, reveal-on-scroll, dither pause |
+| `dither.html` | Dither-boids widget (`?embed=1&imgs=…`) |
+| `assets/` | Logo, app screens, interface screenshots |
+
+Embed mode hides the widget chrome, biases the flock to the right for hero copy,
+auto-loads the listed images, and cycles them.
diff --git a/website/assets/app-history.png b/website/assets/app-history.png
new file mode 100644
index 0000000..104d854
Binary files /dev/null and b/website/assets/app-history.png differ
diff --git a/website/assets/app-ruby.png b/website/assets/app-ruby.png
new file mode 100644
index 0000000..6843809
Binary files /dev/null and b/website/assets/app-ruby.png differ
diff --git a/website/assets/app-vite.png b/website/assets/app-vite.png
new file mode 100644
index 0000000..b227c9d
Binary files /dev/null and b/website/assets/app-vite.png differ
diff --git a/site/assets/interface-editor.png b/website/assets/interface-editor.png
similarity index 100%
rename from site/assets/interface-editor.png
rename to website/assets/interface-editor.png
diff --git a/site/assets/interface-git-flow.png b/website/assets/interface-git-flow.png
similarity index 100%
rename from site/assets/interface-git-flow.png
rename to website/assets/interface-git-flow.png
diff --git a/site/assets/interface-ring.png b/website/assets/interface-ring.png
similarity index 100%
rename from site/assets/interface-ring.png
rename to website/assets/interface-ring.png
diff --git a/site/assets/logo.png b/website/assets/logo.png
similarity index 100%
rename from site/assets/logo.png
rename to website/assets/logo.png
diff --git a/site/assets/screen-graph.png b/website/assets/screen-graph.png
similarity index 100%
rename from site/assets/screen-graph.png
rename to website/assets/screen-graph.png
diff --git a/site/assets/screen-lanes.png b/website/assets/screen-lanes.png
similarity index 100%
rename from site/assets/screen-lanes.png
rename to website/assets/screen-lanes.png
diff --git a/site/assets/screen-shell.png b/website/assets/screen-shell.png
similarity index 100%
rename from site/assets/screen-shell.png
rename to website/assets/screen-shell.png
diff --git a/site/assets/screen-spread.png b/website/assets/screen-spread.png
similarity index 100%
rename from site/assets/screen-spread.png
rename to website/assets/screen-spread.png
diff --git a/site/dither.html b/website/dither.html
similarity index 100%
rename from site/dither.html
rename to website/dither.html
diff --git a/site/index.html b/website/index.html
similarity index 67%
rename from site/index.html
rename to website/index.html
index ab7ebef..f2a983d 100644
--- a/site/index.html
+++ b/website/index.html
@@ -8,32 +8,36 @@
   <meta property="og:title" content="Mouse — the coding IDE built for a phone">
   <meta property="og:description" content="A gesture-driven development environment for iOS and Android. Real node. Real git. No desktop compromise.">
   <meta property="og:image" content="assets/logo.png">
-  <meta name="theme-color" content="#07070a">
+  <meta name="theme-color" content="#060608">
   <link rel="icon" href="assets/logo.png" type="image/png">
   <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=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="styles.css?v=2">
 </head>
 <body>
   <a class="sr-only" href="#main">Skip to content</a>
 
-  <header class="nav" id="nav" data-variant="hero">
+  <header class="nav" id="nav">
     <div class="nav-inner">
       <a class="nav-brand" href="#">
-        <img src="assets/logo.png" alt="" width="28" height="28">
+        <img src="assets/logo.png" alt="" width="26" height="26">
         <span>mouse</span>
       </a>
       <nav class="nav-links" aria-label="Primary">
-        <a class="nav-link" href="#gestures">Gestures</a>
         <a class="nav-link" href="#screens">Screens</a>
+        <a class="nav-link" href="#gestures">Gestures</a>
         <a class="nav-link" href="#stack">Stack</a>
         <a class="nav-link" href="#faq">FAQ</a>
       </nav>
-      <a class="nav-cta" href="https://github.com/reagent-systems/mouse" rel="noopener">
-        GitHub
-        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.5 7.5 0 0 1 8 4.77c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
-      </a>
+      <div class="nav-right">
+        <a class="gh-pill" href="https://github.com/reagent-systems/mouse" rel="noopener">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.5 7.5 0 0 1 8 4.77c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+          <span class="gh-stars" id="gh-stars"></span>
+          <span id="gh-fallback">GitHub</span>
+        </a>
+        <a class="btn btn-primary btn-sm" href="https://github.com/reagent-systems/mouse" rel="noopener">Get started</a>
+      </div>
     </div>
   </header>
 
@@ -41,85 +45,79 @@
     <section class="hero" aria-label="Hero">
       <iframe
         class="hero-viz"
-        title="Dither boids forming Mouse screens"
-        src="dither.html?embed=1&imgs=assets/logo.png,assets/interface-ring.png,assets/interface-editor.png,assets/interface-git-flow.png,assets/screen-lanes.png"
+        title="Dither boids forming Mouse app screens"
+        src="dither.html?embed=1&imgs=assets/app-history.png,assets/app-vite.png,assets/app-ruby.png"
         loading="eager"
       ></iframe>
       <div class="hero-fade" aria-hidden="true"></div>
       <div class="hero-content">
-        <p class="hero-kicker">Native · iOS &amp; Android</p>
-        <h1 class="hero-brand">MOUSE</h1>
-        <p class="hero-title">The coding IDE built for a phone — not shrunk from a desktop.</p>
+        <span class="badge"><span class="dot"></span> Native for <b>iOS &amp; Android</b> · open source</span>
+        <h1 class="hero-title">A real IDE,<br><span class="soft">built for a phone.</span></h1>
         <p class="hero-lede">
-          A gesture shell where the whole development environment lives:
-          swipe editors, pinch workspaces, run real <code>node</code> and git
-          against your GitHub repos.
+          Mouse is a gesture shell where the whole development environment lives:
+          swipe between editors, pinch workspaces open, and run real
+          <code>node</code> and git against your GitHub repos.
         </p>
         <div class="hero-actions">
-          <a class="btn btn-primary" href="https://github.com/reagent-systems/mouse" rel="noopener">View on GitHub</a>
+          <a class="btn btn-primary" href="https://github.com/reagent-systems/mouse" rel="noopener">
+            View on GitHub
+            <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 8h9M8.5 4l4 4-4 4"/></svg>
+          </a>
           <a class="btn btn-ghost" href="#gestures">See the gestures</a>
         </div>
-        <div class="hero-meta">
-          <span>msh shell</span>
-          <span>Node on device</span>
-          <span>Native git</span>
-          <span>Zero deps</span>
+        <div class="specs">
+          <span class="caps">A full dev stack, on the device</span>
+          <span class="spec"><b>msh</b> shell</span>
+          <span class="spec"><b>node</b> on JavaScriptCore</span>
+          <span class="spec"><b>git</b> from scratch</span>
+          <span class="spec"><b>zero</b> dependencies</span>
         </div>
-        <p class="hero-hint">Drag the flock · images cycle on their own</p>
+        <p class="hero-hint">Drag the flock · the app screens cycle on their own</p>
       </div>
     </section>
 
-    <section class="section" id="gestures">
+    <section class="section" id="screens">
       <div class="wrap">
         <div class="section-head reveal">
-          <h2>One law. Every surface.</h2>
-          <p>The shell owns navigation. Content owns reading and typing. Conflict is settled once, everywhere.</p>
+          <span class="eyebrow">Screens</span>
+          <h2>The whole workflow, in your thumb’s reach.</h2>
+          <p>Files, editor, terminal, and the commit graph are containers on a ring. Swipe to the next; pinch to open a new lane.</p>
         </div>
-        <div class="gesture-grid">
-          <article class="gesture-card reveal">
-            <span class="key">Lane</span>
-            <h3>Horizontal drag</h3>
-            <p>Swipe a lane to the next container on the ring — files, editor, graph, terminal.</p>
-          </article>
-          <article class="gesture-card reveal reveal-delay-1">
-            <span class="key">Ring</span>
-            <h3>Edge swipe</h3>
-            <p>Drag from the screen edge to travel between rings, or mint a fresh one.</p>
-          </article>
-          <article class="gesture-card reveal reveal-delay-2">
-            <span class="key">Layout</span>
-            <h3>Spread / pinch</h3>
-            <p>Two fingers open a lane or close one. Pinch the last lane and the ring folds.</p>
-          </article>
-          <article class="gesture-card reveal">
-            <span class="key">Split</span>
-            <h3>Divider drag</h3>
-            <p>Pull the capsule between lanes to resize. Springs settle with mass.</p>
+        <div class="feature-cards">
+          <article class="fcard reveal">
+            <div class="fcard-shot"><img src="assets/app-history.png" alt="Mouse showing the commit graph, file list, and the vite.config.ts editor" loading="lazy"></div>
+            <div class="fcard-body">
+              <span class="key">Edit · commit</span>
+              <h3>Files to graph</h3>
+              <p>Browse the tree, edit in place, and read the commit history with colored rails, all on one ring.</p>
+            </div>
           </article>
-          <article class="gesture-card reveal reveal-delay-1">
-            <span class="key">Content</span>
-            <h3>Tap · scroll · type</h3>
-            <p>Trees scroll, editors edit, terminals take keystrokes. Vertical stays with content.</p>
+          <article class="fcard reveal reveal-delay-1">
+            <div class="fcard-shot"><img src="assets/app-vite.png" alt="A terminal running npx create-vite inside Mouse" loading="lazy"></div>
+            <div class="fcard-body">
+              <span class="key">Terminal</span>
+              <h3>Real node &amp; msh</h3>
+              <p>Scaffold with <code>npx</code>, pipe commands, run scripts. The shell is verified against real <code>/bin/sh</code>.</p>
+            </div>
           </article>
-          <article class="gesture-card reveal reveal-delay-2">
-            <span class="key">Focus</span>
-            <h3>Editor stand-down</h3>
-            <p>While the editor is focused, every drag on it belongs to the text — selection and caret first.</p>
+          <article class="fcard reveal reveal-delay-2">
+            <div class="fcard-shot"><img src="assets/app-ruby.png" alt="Installing and running Ruby from the Mouse shell" loading="lazy"></div>
+            <div class="fcard-body">
+              <span class="key">On device</span>
+              <h3>Install &amp; run</h3>
+              <p>Pull toolchains and packages, then run them where you are. No server in the middle.</p>
+            </div>
           </article>
         </div>
-        <blockquote class="law reveal">
-          <strong>The gesture law.</strong>
-          One-finger horizontal drags and all two-finger gestures belong to the shell, everywhere.
-          Content gets taps, vertical scrolling, and the keyboard.
-        </blockquote>
       </div>
     </section>
 
-    <section class="section section-dark" id="screens">
+    <section class="section section-tint">
       <div class="wrap">
         <div class="section-head reveal">
-          <h2>Rings of containers</h2>
-          <p>The screen is a window onto a ring. Lanes show what is open; the rest wait in reserve.</p>
+          <span class="eyebrow">Rings of containers</span>
+          <h2>The screen is a window onto a ring.</h2>
+          <p>Lanes show what is open; the rest wait in reserve. A commit moves the same view to a new offset, no reload flash.</p>
         </div>
         <div class="showcase">
           <figure class="phone-frame reveal">
@@ -131,81 +129,83 @@ <h2>Rings of containers</h2>
           </figure>
           <div class="stack-cards">
             <a class="stack-card reveal" href="#stack">
-              <img src="assets/interface-ring.png" alt="" width="88" height="88" loading="lazy">
+              <img src="assets/interface-ring.png" alt="" width="76" height="76" loading="lazy">
               <div>
                 <h3>Ring strip</h3>
                 <p>Dots mark rings. Edge-swipe travels; a fresh ring is born at the end.</p>
               </div>
             </a>
             <a class="stack-card reveal reveal-delay-1" href="#stack">
-              <img src="assets/interface-editor.png" alt="" width="88" height="88" loading="lazy">
+              <img src="assets/interface-editor.png" alt="" width="76" height="76" loading="lazy">
               <div>
                 <h3>In-place editor</h3>
                 <p>Edit the file itself in the lane. Floating keyboard. Autosave.</p>
               </div>
             </a>
             <a class="stack-card reveal reveal-delay-2" href="#stack">
-              <img src="assets/interface-git-flow.png" alt="" width="88" height="88" loading="lazy">
+              <img src="assets/interface-git-flow.png" alt="" width="76" height="76" loading="lazy">
               <div>
                 <h3>Commit → graph</h3>
                 <p>Swipe from the editor into the commit surface, then the history rails.</p>
               </div>
             </a>
-            <a class="stack-card reveal reveal-delay-3" href="#stack">
-              <img src="assets/screen-spread.png" alt="" width="88" height="88" loading="lazy">
-              <div>
-                <h3>Spread for space</h3>
-                <p>Two-finger spread opens a blank lane. Pinch closes it again.</p>
-              </div>
-            </a>
           </div>
         </div>
       </div>
     </section>
 
-    <section class="section section-alt" id="gallery">
+    <section class="section" id="gestures">
       <div class="wrap">
         <div class="section-head reveal">
-          <h2>Built as a phone product</h2>
-          <p>Black containers on a white canvas. IBM Plex Mono. Motion is the arrow — no coach marks.</p>
+          <span class="eyebrow">Gestures</span>
+          <h2>One law. Every surface.</h2>
+          <p>The shell owns navigation. Content owns reading and typing. Conflict is settled once, everywhere.</p>
         </div>
-        <div class="gallery">
-          <article class="gallery-item reveal">
-            <div class="gallery-frame">
-              <img src="assets/interface-git-flow.png" alt="Swipe flow from editor to commit to graph" loading="lazy">
-            </div>
-            <h3>Git flow by swipe</h3>
-            <p>Editor, commit, graph — consecutive containers on one ring.</p>
+        <div class="gesture-grid">
+          <article class="gesture-card reveal">
+            <span class="key">Lane</span>
+            <h3>Horizontal drag</h3>
+            <p>Swipe a lane to the next container on the ring — files, editor, graph, terminal.</p>
           </article>
-          <article class="gallery-item reveal reveal-delay-1">
-            <div class="gallery-frame">
-              <img src="assets/screen-graph.png" alt="Commit graph with branch rails" loading="lazy">
-            </div>
-            <h3>Commit graph</h3>
-            <p>Branch rails, merges, tips — drawn like a desktop client, scrolled with a thumb.</p>
+          <article class="gesture-card reveal reveal-delay-1">
+            <span class="key">Ring</span>
+            <h3>Edge swipe</h3>
+            <p>Drag from the screen edge to travel between rings, or mint a fresh one.</p>
           </article>
-          <article class="gallery-item reveal">
-            <div class="gallery-frame">
-              <img src="assets/screen-shell.png" alt="Shell wireframe with stacked lanes" loading="lazy">
-            </div>
-            <h3>Shell geometry</h3>
-            <p>Continuous 32pt radii. The container is the chrome.</p>
+          <article class="gesture-card reveal reveal-delay-2">
+            <span class="key">Layout</span>
+            <h3>Spread / pinch</h3>
+            <p>Two fingers open a lane or close one. Pinch the last lane and the ring folds.</p>
           </article>
-          <article class="gallery-item reveal reveal-delay-1">
-            <div class="gallery-frame">
-              <img src="assets/screen-spread.png" alt="Two-finger spread creating module space" loading="lazy">
-            </div>
-            <h3>Lane management</h3>
-            <p>Spread opens space. Pinch collapses it. The last pinch closes the ring.</p>
+          <article class="gesture-card reveal">
+            <span class="key">Split</span>
+            <h3>Divider drag</h3>
+            <p>Pull the capsule between lanes to resize. Springs settle with mass.</p>
+          </article>
+          <article class="gesture-card reveal reveal-delay-1">
+            <span class="key">Content</span>
+            <h3>Tap · scroll · type</h3>
+            <p>Trees scroll, editors edit, terminals take keystrokes. Vertical stays with content.</p>
+          </article>
+          <article class="gesture-card reveal reveal-delay-2">
+            <span class="key">Focus</span>
+            <h3>Editor stand-down</h3>
+            <p>While the editor is focused, every drag on it belongs to the text — selection and caret first.</p>
           </article>
         </div>
+        <blockquote class="law reveal">
+          <strong>The gesture law.</strong>
+          One-finger horizontal drags and all two-finger gestures belong to the shell, everywhere.
+          Content gets taps, vertical scrolling, and the keyboard.
+        </blockquote>
       </div>
     </section>
 
-    <section class="section" id="stack">
+    <section class="section section-tint" id="stack">
       <div class="wrap">
         <div class="section-head reveal">
-          <h2>A full stack on the device</h2>
+          <span class="eyebrow">The stack</span>
+          <h2>A full stack on the device.</h2>
           <p>No server in the middle. GitHub talks to the phone. The engines are native.</p>
         </div>
         <div class="caps">
@@ -226,9 +226,9 @@ <h3>git</h3>
           </article>
         </div>
 
-        <div class="section-head reveal" style="margin-top: 4rem;">
-          <h2>From clone to push</h2>
-          <p>Sign in once. The workspace is the project.</p>
+        <div class="section-head reveal" style="margin-top: 4.5rem;">
+          <span class="eyebrow">From clone to push</span>
+          <h2>Sign in once. The workspace is the project.</h2>
         </div>
         <div class="steps">
           <div class="step reveal">
@@ -259,11 +259,11 @@ <h3>Commit · sync · merge</h3>
       </div>
     </section>
 
-    <section class="section section-alt" id="faq">
+    <section class="section" id="faq">
       <div class="wrap">
         <div class="section-head reveal">
-          <h2>FAQ</h2>
-          <p>What Mouse is, and what it is not.</p>
+          <span class="eyebrow">FAQ</span>
+          <h2>What Mouse is, and what it is not.</h2>
         </div>
         <div class="faq">
           <details class="reveal">
@@ -297,9 +297,12 @@ <h2>FAQ</h2>
     <section class="cta-band" id="start">
       <div class="cta-inner reveal">
         <h2>Build on a phone that can build.</h2>
-        <p>Clone the repo. Generate the Xcode project. Run.</p>
+        <p>Clone the repo. Generate the project. Run.</p>
         <div class="cta-actions">
-          <a class="btn btn-primary" href="https://github.com/reagent-systems/mouse" rel="noopener">GitHub</a>
+          <a class="btn btn-primary" href="https://github.com/reagent-systems/mouse" rel="noopener">
+            View on GitHub
+            <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 8h9M8.5 4l4 4-4 4"/></svg>
+          </a>
           <a class="btn btn-ghost" href="https://github.com/reagent-systems/mouse#building--running" rel="noopener">Build instructions</a>
         </div>
       </div>
@@ -321,6 +324,6 @@ <h2>Build on a phone that can build.</h2>
     </div>
   </footer>
 
-  <script src="main.js"></script>
+  <script src="main.js?v=2"></script>
 </body>
 </html>
diff --git a/site/main.js b/website/main.js
similarity index 68%
rename from site/main.js
rename to website/main.js
index cf04865..b9cbc58 100644
--- a/site/main.js
+++ b/website/main.js
@@ -44,4 +44,21 @@
     }, { threshold: 0.05 });
     freeze.observe(hero);
   }
+
+  // Live GitHub star count in the nav pill; falls back to the plain label.
+  const stars = document.getElementById('gh-stars');
+  const starsFallback = document.getElementById('gh-fallback');
+  if (stars) {
+    fetch('https://api.github.com/repos/reagent-systems/mouse', {
+      headers: { Accept: 'application/vnd.github+json' }
+    })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((d) => {
+        const n = d && d.stargazers_count;
+        if (typeof n !== 'number') return;
+        stars.textContent = n >= 1000 ? (n / 1000).toFixed(n >= 10000 ? 0 : 1).replace(/\.0$/, '') + 'k' : String(n);
+        if (starsFallback) starsFallback.style.display = 'none';
+      })
+      .catch(() => { /* offline or rate-limited: keep the label */ });
+  }
 })();
diff --git a/website/styles.css b/website/styles.css
new file mode 100644
index 0000000..0a835a5
--- /dev/null
+++ b/website/styles.css
@@ -0,0 +1,564 @@
+/* Mouse marketing site — dark, terminal honesty, monochrome, IBM Plex Mono */
+
+:root {
+  --bg: #060608;
+  --bg-2: #0b0b0f;
+  --card: #101015;
+  --card-2: #16161d;
+  --ink: #f4f2ec;
+  --muted: rgba(244, 242, 236, 0.60);
+  --faint: rgba(244, 242, 236, 0.40);
+  --line: rgba(244, 242, 236, 0.10);
+  --line-2: rgba(244, 242, 236, 0.20);
+  --radius: 20px;
+  --radius-sm: 14px;
+  --gutter: clamp(1.1rem, 4vw, 2.5rem);
+  --max: 1180px;
+  --font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: var(--font);
+  color: var(--ink);
+  background: var(--bg);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  overflow-x: hidden;
+}
+
+img { max-width: 100%; display: block; }
+a { color: inherit; text-decoration: none; }
+button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
+
+.sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+}
+
+.wrap {
+  width: min(100% - 2 * var(--gutter), var(--max));
+  margin-inline: auto;
+}
+
+/* ---------- nav ---------- */
+
+.nav {
+  position: fixed;
+  inset: 0 0 auto 0;
+  z-index: 40;
+  height: 66px;
+  display: flex;
+  align-items: center;
+  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s var(--ease);
+  border-bottom: 1px solid transparent;
+}
+
+.nav.is-solid {
+  background: rgba(8, 8, 11, 0.72);
+  border-bottom-color: var(--line);
+  backdrop-filter: blur(14px) saturate(1.2);
+  -webkit-backdrop-filter: blur(14px) saturate(1.2);
+}
+
+.nav-inner {
+  width: min(100% - 2 * var(--gutter), var(--max));
+  margin-inline: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.nav-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  color: var(--ink);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  font-size: 1.05rem;
+}
+
+.nav-brand img { width: 26px; height: 26px; object-fit: contain; filter: invert(1); }
+
+.nav-links {
+  display: none;
+  gap: 1.6rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+@media (min-width: 860px) { .nav-links { display: flex; } }
+
+.nav-link {
+  color: var(--muted);
+  font-size: 0.85rem;
+  transition: color 0.2s ease;
+}
+.nav-link:hover { color: var(--ink); }
+
+.nav-right { display: inline-flex; align-items: center; gap: 0.6rem; }
+
+.gh-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 36px;
+  padding: 0 0.85rem;
+  border-radius: 999px;
+  border: 1px solid var(--line-2);
+  color: var(--ink);
+  font-size: 0.8rem;
+  font-weight: 500;
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+.gh-pill:hover { border-color: var(--ink); background: rgba(244, 242, 236, 0.05); }
+.gh-pill svg { opacity: 0.9; }
+.gh-stars { font-variant-numeric: tabular-nums; color: var(--muted); }
+.gh-stars:empty { display: none; }
+.gh-stars::before { content: "★ "; color: var(--ink); }
+
+/* ---------- buttons ---------- */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 46px;
+  padding: 0 1.35rem;
+  border-radius: 999px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  transition: transform 0.18s var(--ease), background 0.18s ease, color 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
+}
+.btn:hover { transform: translateY(-1px); }
+.btn svg { transition: transform 0.2s var(--ease); }
+.btn:hover svg { transform: translateX(2px); }
+
+.btn-primary { background: var(--ink); color: #0a0a0c; }
+.btn-primary:hover { filter: brightness(1.06); }
+
+.btn-ghost {
+  border: 1px solid var(--line-2);
+  color: var(--ink);
+  background: rgba(244, 242, 236, 0.02);
+}
+.btn-ghost:hover { border-color: var(--ink); background: rgba(244, 242, 236, 0.06); }
+
+.btn-sm { height: 40px; padding: 0 1rem; font-size: 0.82rem; }
+
+/* ---------- hero ---------- */
+
+.hero {
+  position: relative;
+  min-height: 100svh;
+  background: var(--bg);
+  color: var(--ink);
+  overflow: hidden;
+  display: grid;
+  align-items: center;
+}
+
+.hero::before {
+  content: "";
+  position: absolute;
+  left: 50%; top: -30%;
+  width: 90vw; height: 70vw;
+  max-width: 1100px; max-height: 800px;
+  transform: translateX(-60%);
+  background: radial-gradient(ellipse at center, rgba(244, 242, 236, 0.08), transparent 60%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.hero-viz {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+  z-index: 1;
+}
+
+.hero-fade {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  background:
+    linear-gradient(90deg, var(--bg) 0%, rgba(6, 6, 8, 0.82) 34%, rgba(6, 6, 8, 0.28) 62%, transparent 82%),
+    linear-gradient(180deg, rgba(6, 6, 8, 0.7) 0%, transparent 24%, transparent 60%, var(--bg) 100%);
+}
+
+.hero-content {
+  position: relative;
+  z-index: 3;
+  width: min(100% - 2 * var(--gutter), var(--max));
+  margin: 0 auto;
+  padding: 8rem 0 3rem;
+  pointer-events: none;
+}
+.hero-content > * { pointer-events: auto; }
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  margin: 0 0 1.6rem;
+  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
+  border-radius: 999px;
+  border: 1px solid var(--line-2);
+  background: rgba(244, 242, 236, 0.03);
+  font-size: 0.76rem;
+  color: var(--muted);
+  letter-spacing: 0.01em;
+}
+.badge b { color: var(--ink); font-weight: 600; }
+.badge .dot {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: var(--ink);
+  box-shadow: 0 0 0 4px rgba(244, 242, 236, 0.12);
+  animation: pulse-dot 2.2s ease-in-out infinite;
+}
+@keyframes pulse-dot {
+  0%, 100% { opacity: 0.5; transform: scale(0.9); }
+  50% { opacity: 1; transform: scale(1); }
+}
+
+.hero-title {
+  margin: 0 0 1.35rem;
+  font-size: clamp(2.6rem, 7vw, 4.6rem);
+  line-height: 1.02;
+  letter-spacing: -0.045em;
+  font-weight: 700;
+  max-width: 15ch;
+}
+.hero-title .soft { color: var(--faint); }
+
+.hero-lede {
+  margin: 0 0 2rem;
+  font-size: clamp(1rem, 1.6vw, 1.15rem);
+  line-height: 1.55;
+  color: var(--muted);
+  max-width: 34rem;
+}
+.hero-lede code { font-family: inherit; color: var(--ink); }
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 3rem;
+}
+
+/* spec strip in place of "trusted by" logos */
+.specs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.6rem 1.5rem;
+}
+.specs .caps {
+  width: 100%;
+  font-size: 0.68rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--faint);
+  margin-bottom: 0.35rem;
+}
+.spec {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+.spec b { color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
+
+.hero-hint {
+  margin-top: 2rem;
+  font-size: 0.72rem;
+  color: var(--faint);
+}
+
+/* ---------- sections ---------- */
+
+.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; position: relative; }
+.section-tint { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
+
+.section-head { max-width: 40rem; margin-bottom: 2.75rem; }
+.eyebrow {
+  display: inline-block;
+  margin-bottom: 0.9rem;
+  font-size: 0.7rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+.section-head h2 {
+  margin: 0 0 0.75rem;
+  font-size: clamp(1.8rem, 4vw, 2.6rem);
+  letter-spacing: -0.04em;
+  line-height: 1.1;
+  font-weight: 700;
+}
+.section-head p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
+
+/* ---------- feature cards (screens) ---------- */
+
+.feature-cards {
+  display: grid;
+  gap: 1.1rem;
+  grid-template-columns: 1fr;
+}
+@media (min-width: 720px) { .feature-cards { grid-template-columns: repeat(3, 1fr); } }
+
+.fcard {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--card);
+  overflow: hidden;
+  transition: transform 0.35s var(--ease), border-color 0.25s ease, background 0.25s ease;
+}
+.fcard:hover { transform: translateY(-4px); border-color: var(--line-2); background: var(--card-2); }
+
+.fcard-shot {
+  position: relative;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  background: #000;
+  border-bottom: 1px solid var(--line);
+}
+.fcard-shot img {
+  position: absolute;
+  inset: 0;
+  width: 100%; height: 100%;
+  object-fit: cover;
+  object-position: top center;
+  transition: transform 0.6s var(--ease);
+}
+.fcard:hover .fcard-shot img { transform: scale(1.04); }
+
+.fcard-body { padding: 1.25rem 1.3rem 1.4rem; }
+.fcard .key {
+  display: inline-block;
+  margin-bottom: 0.7rem;
+  font-size: 0.66rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+.fcard h3 { margin: 0 0 0.45rem; font-size: 1.05rem; letter-spacing: -0.02em; }
+.fcard p { margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
+
+/* ---------- showcase (big screen + rail) ---------- */
+
+.showcase { display: grid; gap: 1.25rem; }
+@media (min-width: 900px) { .showcase { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; } }
+
+.phone-frame {
+  position: relative;
+  border-radius: calc(var(--radius) + 6px);
+  background: #000;
+  padding: 0.8rem;
+  border: 1px solid var(--line);
+  overflow: hidden;
+  min-height: 420px;
+}
+.phone-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: var(--radius); background: #000; }
+.phone-caption {
+  position: absolute;
+  left: 1.3rem; right: 1.3rem; bottom: 1.3rem;
+  padding: 0.85rem 1rem;
+  border-radius: 12px;
+  background: rgba(6, 6, 8, 0.82);
+  border: 1px solid var(--line-2);
+  backdrop-filter: blur(10px);
+}
+.phone-caption .label { display: block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.3rem; }
+.phone-caption strong { font-size: 0.92rem; font-weight: 600; }
+
+.stack-cards { display: grid; gap: 1rem; align-content: start; }
+.stack-card {
+  display: grid;
+  grid-template-columns: 76px 1fr;
+  gap: 1rem;
+  align-items: center;
+  padding: 0.85rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: var(--card);
+  transition: transform 0.3s var(--ease), background 0.25s ease, border-color 0.2s ease;
+}
+.stack-card:hover { transform: translateX(4px); background: var(--card-2); border-color: var(--line-2); }
+.stack-card img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; background: #000; }
+.stack-card h3 { margin: 0 0 0.3rem; font-size: 0.98rem; }
+.stack-card p { margin: 0; font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
+
+/* ---------- gesture grid ---------- */
+
+.gesture-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
+@media (min-width: 720px) { .gesture-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (min-width: 980px) { .gesture-grid { grid-template-columns: repeat(3, 1fr); } }
+
+.gesture-card {
+  padding: 1.4rem 1.35rem 1.5rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--card);
+  transition: transform 0.35s var(--ease), border-color 0.25s ease, background 0.25s ease;
+}
+.gesture-card:hover { transform: translateY(-3px); border-color: var(--line-2); background: var(--card-2); }
+.gesture-card .key { display: inline-block; margin-bottom: 0.85rem; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
+.gesture-card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; letter-spacing: -0.02em; }
+.gesture-card p { margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
+
+.law {
+  margin-top: 2rem;
+  padding: 1.3rem 1.4rem;
+  border: 1px solid var(--line);
+  border-left: 2px solid var(--ink);
+  border-radius: var(--radius-sm);
+  background: var(--card);
+  font-size: 0.95rem;
+  line-height: 1.55;
+  color: var(--muted);
+}
+.law strong { font-weight: 700; color: var(--ink); }
+
+/* ---------- stack (capabilities) ---------- */
+
+.caps { display: grid; gap: 1rem; }
+@media (min-width: 800px) { .caps { grid-template-columns: repeat(3, 1fr); } }
+.cap {
+  padding: 1.6rem 1.4rem;
+  border-radius: var(--radius-sm);
+  background: var(--card);
+  border: 1px solid var(--line);
+  transition: border-color 0.2s ease, background 0.25s ease;
+}
+.cap:hover { border-color: var(--line-2); background: var(--card-2); }
+.cap .num { display: block; margin-bottom: 1.1rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
+.cap h3 { margin: 0 0 0.55rem; font-size: 1.25rem; letter-spacing: -0.03em; }
+.cap p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
+.cap code { font-family: inherit; font-size: 0.85em; padding: 0.05em 0.3em; border-radius: 4px; background: rgba(244, 242, 236, 0.08); color: var(--ink); }
+
+/* ---------- steps ---------- */
+
+.steps { display: grid; gap: 0; counter-reset: step; border-top: 1px solid var(--line); }
+.step {
+  display: grid; gap: 0.75rem;
+  padding: 1.7rem 0;
+  border-bottom: 1px solid var(--line);
+  grid-template-columns: auto 1fr;
+  align-items: start;
+}
+.step::before {
+  counter-increment: step;
+  content: counter(step, decimal-leading-zero);
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  color: var(--faint);
+  padding-top: 0.2rem;
+  min-width: 2.4rem;
+}
+.step h3 { margin: 0 0 0.4rem; font-size: 1.1rem; letter-spacing: -0.02em; }
+.step p { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: 42rem; line-height: 1.55; }
+
+/* ---------- FAQ ---------- */
+
+.faq { display: grid; gap: 0.65rem; max-width: 48rem; }
+.faq details {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--card);
+  padding: 0 1.15rem;
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+.faq details[open] { background: var(--card-2); border-color: var(--line-2); }
+.faq summary {
+  list-style: none; cursor: pointer;
+  padding: 1.1rem 0;
+  font-weight: 600; font-size: 0.95rem;
+  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
+}
+.faq summary::-webkit-details-marker { display: none; }
+.faq summary::after { content: "+"; font-weight: 400; color: var(--muted); font-size: 1.2rem; line-height: 1; }
+.faq details[open] summary::after { content: "−"; }
+.faq details p { margin: 0 0 1.15rem; color: var(--muted); font-size: 0.9rem; line-height: 1.6; }
+
+/* ---------- CTA band ---------- */
+
+.cta-band {
+  position: relative;
+  overflow: hidden;
+  background: var(--bg-2);
+  padding: clamp(4.5rem, 10vw, 7rem) 0;
+  text-align: center;
+  border-top: 1px solid var(--line);
+}
+.cta-band::before {
+  content: "";
+  position: absolute;
+  left: 50%; top: -50%;
+  width: 80vw; height: 80vw;
+  max-width: 900px; max-height: 900px;
+  transform: translateX(-50%);
+  background: radial-gradient(circle, rgba(244, 242, 236, 0.10), transparent 62%);
+  pointer-events: none;
+}
+.cta-inner { position: relative; z-index: 1; width: min(100% - 2 * var(--gutter), 42rem); margin-inline: auto; }
+.cta-band h2 { margin: 0 0 0.9rem; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.045em; line-height: 1.08; }
+.cta-band p { margin: 0 0 2rem; color: var(--muted); font-size: 1.02rem; }
+.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
+
+/* ---------- footer ---------- */
+
+.footer { padding: 2.5rem 0 3rem; border-top: 1px solid var(--line); background: var(--bg); }
+.footer-inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--muted); }
+.footer-brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); font-weight: 700; }
+.footer-brand img { width: 20px; height: 20px; filter: invert(1); }
+.footer-links { display: flex; gap: 1.4rem; }
+.footer-links a:hover { color: var(--ink); }
+
+/* ---------- motion reveals ---------- */
+
+html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
+html.js .reveal.is-in { opacity: 1; transform: none; }
+html.js .reveal-delay-1 { transition-delay: 0.08s; }
+html.js .reveal-delay-2 { transition-delay: 0.16s; }
+html.js .reveal-delay-3 { transition-delay: 0.24s; }
+
+@media (max-width: 720px) {
+  .hero-fade {
+    background:
+      linear-gradient(180deg, rgba(6, 6, 8, 0.55) 0%, rgba(6, 6, 8, 0.3) 26%, rgba(6, 6, 8, 0.78) 60%, var(--bg) 100%),
+      linear-gradient(90deg, var(--bg) 0%, rgba(6, 6, 8, 0.5) 60%, rgba(6, 6, 8, 0.15) 100%);
+  }
+  .hero-content { padding: 7rem 0 2.5rem; }
+  .hero-viz { opacity: 0.65; }
+}