diff --git a/web/assets/brand/app-icon-1024.png b/web/assets/brand/app-icon-1024.png
index 1cce1d4..3f35ce0 100644
Binary files a/web/assets/brand/app-icon-1024.png and b/web/assets/brand/app-icon-1024.png differ
diff --git a/web/assets/brand/apple-touch-icon.png b/web/assets/brand/apple-touch-icon.png
index 0d4cff6..214a794 100644
Binary files a/web/assets/brand/apple-touch-icon.png and b/web/assets/brand/apple-touch-icon.png differ
diff --git a/web/assets/brand/favicon-16.png b/web/assets/brand/favicon-16.png
index 1c0a124..74483c8 100644
Binary files a/web/assets/brand/favicon-16.png and b/web/assets/brand/favicon-16.png differ
diff --git a/web/assets/brand/favicon-32.png b/web/assets/brand/favicon-32.png
index 27d3b27..e14a9f9 100644
Binary files a/web/assets/brand/favicon-32.png and b/web/assets/brand/favicon-32.png differ
diff --git a/web/assets/brand/icon.svg b/web/assets/brand/icon.svg
index d72dcb0..95a4816 100644
--- a/web/assets/brand/icon.svg
+++ b/web/assets/brand/icon.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><rect width="64" height="64" rx="14.5" fill="#111113"/><rect x="0.48" y="0.48" width="63.04" height="63.04" rx="14.065" fill="none" stroke="#fff" stroke-opacity=".09" stroke-width="0.96"/><g transform="translate(32.0 32.0) scale(0.3968) translate(-50 -50)"><path d="M18 15 C42 21 66 34 84 50 C66 66 42 79 18 85 C26.5 62 26.5 38 18 15 Z" fill="#F4F2EE"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#111114"/><rect x=".5" y=".5" width="63" height="63" rx="15.5" fill="none" stroke="#ffffff" stroke-opacity=".12"/><image href="mark.svg" x="9" y="8" width="46" height="46"/></svg>
diff --git a/web/assets/brand/mark.svg b/web/assets/brand/mark.svg
index 5e8532f..3975581 100644
--- a/web/assets/brand/mark.svg
+++ b/web/assets/brand/mark.svg
@@ -1 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path d="M18 15 C42 21 66 34 84 50 C66 66 42 79 18 85 C26.5 62 26.5 38 18 15 Z" fill="#F4F2EE"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <defs>
+    <linearGradient id="ag-silver" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#FFFFFF"/><stop offset=".55" stop-color="#D9D6D0"/><stop offset="1" stop-color="#8A8680"/>
+    </linearGradient>
+    <linearGradient id="ag-side" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#B4B0A9"/><stop offset="1" stop-color="#4E4B47"/>
+    </linearGradient>
+    <path id="ag-leaf" d="M-5 0 C-5.6 -20 -3 -38 0 -54 C3 -38 5.6 -20 5 0 Z"/>
+  </defs>
+  <use href="#ag-leaf" fill="url(#ag-side)" transform="translate(23 61) rotate(-58) scale(.5)"/>
+  <use href="#ag-leaf" fill="url(#ag-side)" transform="translate(41 61) rotate(58) scale(.5)"/>
+  <use href="#ag-leaf" fill="url(#ag-side)" transform="translate(32 61) scale(.6)"/>
+  <use href="#ag-leaf" fill="url(#ag-silver)" stroke="#08080A" stroke-width="1.1" transform="translate(20 61) rotate(14)"/>
+  <use href="#ag-leaf" fill="url(#ag-silver)" stroke="#08080A" stroke-width="1.1" transform="translate(44 61) rotate(-14)"/>
+  <circle cx="32" cy="8.6" r="3.6" fill="#FF6B3D"/>
+</svg>
diff --git a/web/assets/img/camera-plate.webp b/web/assets/img/camera-plate.webp
index 05adc73..59ad46a 100644
Binary files a/web/assets/img/camera-plate.webp and b/web/assets/img/camera-plate.webp differ
diff --git a/web/assets/img/char-a.webp b/web/assets/img/char-a.webp
index 8f151fc..51aa848 100644
Binary files a/web/assets/img/char-a.webp and b/web/assets/img/char-a.webp differ
diff --git a/web/assets/img/char-b.webp b/web/assets/img/char-b.webp
index 4c611f9..a792c47 100644
Binary files a/web/assets/img/char-b.webp and b/web/assets/img/char-b.webp differ
diff --git a/web/assets/img/char-c.webp b/web/assets/img/char-c.webp
index 8698a15..a07a48e 100644
Binary files a/web/assets/img/char-c.webp and b/web/assets/img/char-c.webp differ
diff --git a/web/assets/img/cmp-raw.jpg b/web/assets/img/cmp-raw.jpg
new file mode 100644
index 0000000..45fe109
Binary files /dev/null and b/web/assets/img/cmp-raw.jpg differ
diff --git a/web/assets/img/cmp-topaz.webp b/web/assets/img/cmp-topaz.webp
new file mode 100644
index 0000000..b968fda
Binary files /dev/null and b/web/assets/img/cmp-topaz.webp differ
diff --git a/web/assets/img/final-stage.webp b/web/assets/img/final-stage.webp
index f20243b..6286d97 100644
Binary files a/web/assets/img/final-stage.webp and b/web/assets/img/final-stage.webp differ
diff --git a/web/assets/img/hero-atrium.jpg b/web/assets/img/hero-atrium.jpg
index 0562f6c..bef2dad 100644
Binary files a/web/assets/img/hero-atrium.jpg and b/web/assets/img/hero-atrium.jpg differ
diff --git a/web/assets/img/hero-dunes.jpg b/web/assets/img/hero-dunes.jpg
index 01d783e..f04d5c6 100644
Binary files a/web/assets/img/hero-dunes.jpg and b/web/assets/img/hero-dunes.jpg differ
diff --git a/web/assets/img/hero-lighthouse.jpg b/web/assets/img/hero-lighthouse.jpg
index 503051e..11a413f 100644
Binary files a/web/assets/img/hero-lighthouse.jpg and b/web/assets/img/hero-lighthouse.jpg differ
diff --git a/web/assets/img/hero-soundstage.jpg b/web/assets/img/hero-soundstage.jpg
index 9fd6589..de5f06c 100644
Binary files a/web/assets/img/hero-soundstage.jpg and b/web/assets/img/hero-soundstage.jpg differ
diff --git a/web/assets/img/reel-camera.webp b/web/assets/img/reel-camera.webp
index 4efa10c..d7875e4 100644
Binary files a/web/assets/img/reel-camera.webp and b/web/assets/img/reel-camera.webp differ
diff --git a/web/assets/img/reel-image.webp b/web/assets/img/reel-image.webp
index 4f6711c..92d245a 100644
Binary files a/web/assets/img/reel-image.webp and b/web/assets/img/reel-image.webp differ
diff --git a/web/assets/img/reel-lipsync.webp b/web/assets/img/reel-lipsync.webp
index 3084007..10ccc7f 100644
Binary files a/web/assets/img/reel-lipsync.webp and b/web/assets/img/reel-lipsync.webp differ
diff --git a/web/assets/img/reel-t2v.webp b/web/assets/img/reel-t2v.webp
index eea40be..ecc64ec 100644
Binary files a/web/assets/img/reel-t2v.webp and b/web/assets/img/reel-t2v.webp differ
diff --git a/web/assets/img/reel-upscale.webp b/web/assets/img/reel-upscale.webp
index 6e5fc56..99d83d8 100644
Binary files a/web/assets/img/reel-upscale.webp and b/web/assets/img/reel-upscale.webp differ
diff --git a/web/assets/img/ref-2.webp b/web/assets/img/ref-2.webp
index 12529f9..84ae3a6 100644
Binary files a/web/assets/img/ref-2.webp and b/web/assets/img/ref-2.webp differ
diff --git a/web/assets/img/ref-3.webp b/web/assets/img/ref-3.webp
index a291965..a13a166 100644
Binary files a/web/assets/img/ref-3.webp and b/web/assets/img/ref-3.webp differ
diff --git a/web/assets/img/showcase-dunes.webp b/web/assets/img/showcase-dunes.webp
index 1ec0861..8f59133 100644
Binary files a/web/assets/img/showcase-dunes.webp and b/web/assets/img/showcase-dunes.webp differ
diff --git a/web/assets/img/workspace-empty.webp b/web/assets/img/workspace-empty.webp
index a7e8396..5a88daa 100644
Binary files a/web/assets/img/workspace-empty.webp and b/web/assets/img/workspace-empty.webp differ
diff --git a/web/assets/video/card-camera.mp4 b/web/assets/video/card-camera.mp4
index 957fb89..9b67261 100644
Binary files a/web/assets/video/card-camera.mp4 and b/web/assets/video/card-camera.mp4 differ
diff --git a/web/assets/video/card-character.mp4 b/web/assets/video/card-character.mp4
index 68f4c69..237ffd7 100644
Binary files a/web/assets/video/card-character.mp4 and b/web/assets/video/card-character.mp4 differ
diff --git a/web/assets/video/card-image.mp4 b/web/assets/video/card-image.mp4
index c6bbad4..de582c7 100644
Binary files a/web/assets/video/card-image.mp4 and b/web/assets/video/card-image.mp4 differ
diff --git a/web/assets/video/card-lipsync.mp4 b/web/assets/video/card-lipsync.mp4
index 6e6c7bd..1c36c7b 100644
Binary files a/web/assets/video/card-lipsync.mp4 and b/web/assets/video/card-lipsync.mp4 differ
diff --git a/web/assets/video/card-upscale.mp4 b/web/assets/video/card-upscale.mp4
index d3a56a2..4f3a8a3 100644
Binary files a/web/assets/video/card-upscale.mp4 and b/web/assets/video/card-upscale.mp4 differ
diff --git a/web/assets/video/hero-atrium.mp4 b/web/assets/video/hero-atrium.mp4
index be0fe20..617f4ba 100644
Binary files a/web/assets/video/hero-atrium.mp4 and b/web/assets/video/hero-atrium.mp4 differ
diff --git a/web/assets/video/hero-dunes.mp4 b/web/assets/video/hero-dunes.mp4
index 3263692..a01211e 100644
Binary files a/web/assets/video/hero-dunes.mp4 and b/web/assets/video/hero-dunes.mp4 differ
diff --git a/web/assets/video/hero-lighthouse-sm.mp4 b/web/assets/video/hero-lighthouse-sm.mp4
index 0b58060..ba69b84 100644
Binary files a/web/assets/video/hero-lighthouse-sm.mp4 and b/web/assets/video/hero-lighthouse-sm.mp4 differ
diff --git a/web/assets/video/hero-lighthouse.mp4 b/web/assets/video/hero-lighthouse.mp4
index 2723934..5086bea 100644
Binary files a/web/assets/video/hero-lighthouse.mp4 and b/web/assets/video/hero-lighthouse.mp4 differ
diff --git a/web/assets/video/hero-soundstage.mp4 b/web/assets/video/hero-soundstage.mp4
index 0e30456..be1b0db 100644
Binary files a/web/assets/video/hero-soundstage.mp4 and b/web/assets/video/hero-soundstage.mp4 differ
diff --git a/web/css/home.css b/web/css/home.css
index 3086db2..324a949 100644
--- a/web/css/home.css
+++ b/web/css/home.css
@@ -40,7 +40,7 @@ a { color: inherit; }
 .nav.solid { background: rgba(10,10,12,.82); border-color: var(--line); }
 .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
 .brand-logo { width: 30px; height: 30px; transition: transform .8s var(--ease-out); }
-.brand:hover .brand-logo { transform: scale(1.06); }
+.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.06); }
 .brand-word { font-weight: 600; font-size: 17px; letter-spacing: -0.025em; white-space: nowrap; }
 .brand-word em { font: italic 400 19px var(--font-serif); color: var(--ink-2); letter-spacing: -0.01em; }
 .nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
@@ -110,7 +110,7 @@ a { color: inherit; }
 .hero-title .word { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease-out); }
 .hero-title.in .word { transform: none; }
 .hero-title.out .word { transform: translateY(-110%); transition: transform .6s var(--ease-io); }
-.hero-title .serif { font-weight: 400; font-style: italic; letter-spacing: -0.02em; padding-right: .06em; color: var(--silver-2); background: linear-gradient(100deg, var(--silver-1) 0%, var(--silver-2) 42%, var(--ember-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
+.hero-title .serif { font-weight: 400; letter-spacing: -0.03em; color: var(--silver-2); }
 .hero-sub { max-width: 520px; margin: 22px 0 0; font-size: clamp(15px, 1.4vw, 18px); color: #d8d4cd; line-height: 1.5; text-shadow: 0 1px 18px rgba(0,0,0,.9); transition: opacity .6s, transform .8s var(--ease-out); }
 .hero-sub.swap { opacity: 0; transform: translateY(8px); }
 .hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
@@ -123,13 +123,6 @@ a { color: inherit; }
 .hero.paused .dot-b.on i { animation-play-state: paused; }
 @keyframes dotfill { to { transform: scaleX(1); } }
 .dot-b:focus-visible { outline: 2px solid var(--silver-1); outline-offset: 3px; }
-.hold-b { position: relative; width: 16px; height: 16px; margin-left: 4px; padding: 0; border: 0; background: none; cursor: pointer; color: rgba(242,239,233,.7); }
-.hold-b::before, .hold-b::after { content: ""; position: absolute; top: 4px; width: 2px; height: 8px; border-radius: 1px; background: currentColor; }
-.hold-b::before { left: 5px; } .hold-b::after { left: 9px; }
-.hold-b.is-held::before { left: 5px; top: 4px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent currentColor; }
-.hold-b.is-held::after { display: none; }
-.hold-b:hover { color: var(--silver-1); }
-.hold-b:focus-visible { outline: 2px solid var(--silver-1); outline-offset: 3px; border-radius: 4px; }
 .prompt {
   position: absolute; right: max(16px, calc((100vw - 1320px) / 2)); bottom: 108px; width: 400px; padding: 14px 14px 12px; border-radius: 20px; text-align: left;
   background: rgba(16,16,19,.6); border: 1px solid var(--line-2);
@@ -342,7 +335,6 @@ h2 { margin: 0; font-weight: 500; font-size: clamp(38px, 6vw, 84px); line-height
 .foot nav { display: flex; gap: 22px; }
 .foot a { text-decoration: none; } .foot a:hover { color: var(--ink); }
 .foot p { margin: 0; }
-.foot .foot-note { flex-basis: 100%; font-size: 12.5px; }
 .brand.small .brand-word { color: var(--ink-2); }
 
 @keyframes fade { from { opacity: 0; } }
@@ -476,66 +468,25 @@ h2 { margin: 0; font-weight: 500; font-size: clamp(38px, 6vw, 84px); line-height
 .sharp.playing img { opacity: 0; }
 .lb figcaption { z-index: 2; }
 
-/* ---------- reframe ---------- */
+/* ---------- before / after compare ---------- */
 .b-tall { grid-row: span 2; }
+.compare { position: relative; margin-top: 22px; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; border: 1px solid var(--line); }
+.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); transform-origin: 62% 52%; pointer-events: none; }
+.cmp-a { image-rendering: auto; }
+.cmp-b { clip-path: inset(0 0 0 var(--p)); }
+.cmp-line { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: var(--silver-1); box-shadow: 0 0 18px rgba(255,255,255,.6); }
+.cmp-line i { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(20,20,24,.7); border: 1.5px solid var(--silver-1); backdrop-filter: blur(8px); }
+.cmp-line i::before, .cmp-line i::after { content: ""; position: absolute; top: 12px; width: 7px; height: 7px; border-left: 1.5px solid var(--silver-1); border-bottom: 1.5px solid var(--silver-1); }
+.cmp-line i::before { left: 8px; transform: rotate(45deg); } .cmp-line i::after { right: 8px; transform: rotate(-135deg); }
 .cmp-tag { position: absolute; top: 12px; padding: 5px 9px; border-radius: 999px; font: 500 11px/1 var(--font-mono); background: rgba(14,14,17,.6); border: 1px solid var(--line-2); }
 .cmp-tag.l { left: 12px; } .cmp-tag.r { right: 12px; color: var(--ember-2); }
+.compare input { position: absolute; inset: auto 0 0; width: 100%; opacity: 0; height: 100%; margin: 0; cursor: ew-resize; }
 @media (max-width: 900px) { .b-tall { grid-row: auto; } }
 .b-tall { display: flex; flex-direction: column; }
-.reframe { position: relative; flex: 1; min-height: 280px; margin-top: 22px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
-.reframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
-.rf-win { position: absolute; top: 10%; bottom: 10%; left: 50%; aspect-ratio: 9 / 16; border-radius: 10px; border: 1.5px solid var(--silver-1); box-shadow: 0 0 0 100vmax rgba(8, 8, 10, 0.62); transform: translateX(-50%); animation: rf 8s ease-in-out infinite alternate; }
-@keyframes rf { from { left: 34%; } to { left: 64%; } }
-@media (max-width: 900px) { .reframe { aspect-ratio: 4 / 3; min-height: 0; } }
-@media (prefers-reduced-motion: reduce) { .rf-win { animation: none; } }
+.b-tall .compare { flex: 1; aspect-ratio: auto; min-height: 280px; }
+@media (max-width: 900px) { .b-tall .compare { aspect-ratio: 4 / 3; min-height: 0; } }
 
 /* ---------- Tier notes ---------- */
 .tier .note { margin: 0 0 24px; font-size: 14px; color: var(--ink-2); display: grid; gap: 2px; }
 .tier .note em { font-style: normal; color: var(--ink); }
 .tier .note span { font-size: 12.5px; color: var(--ink-3); }
-
-/* ---------- design round: lit set, glass edges, depth, phone ergonomics ---------- */
-/* Hero: lens vignette + faint film-gate line. Sits above video/shade (z -2/-1), below the copy, dots and prompt. */
-.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
-  background: radial-gradient(120% 90% at 62% 44%, transparent 56%, rgba(0,0,0,.55) 100%);
-  box-shadow: inset 0 0 0 1px rgba(242,239,233,.06); }
-/* Prompt card: warm rim light (1px masked ring) so it sits in the same lit scene. */
-.prompt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
-  background: linear-gradient(135deg, rgba(255,179,107,.5), rgba(255,255,255,.04) 35%, rgba(255,255,255,0) 60%, rgba(255,107,61,.28));
-  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
-  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
-/* Bento cards: lit rim from top-left and a soft lift, same glass language as .pill. */
-.b::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
-  background: linear-gradient(160deg, rgba(244,242,238,.32), rgba(244,242,238,.04) 35%, rgba(244,242,238,.02) 70%, rgba(244,242,238,.12));
-  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
-  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
-.b, .tier { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 40px 80px -50px rgba(0,0,0,.95); }
-/* Depth: full-bleed photos drift against the scroll (translate is separate from the scale transform). */
-@supports (animation-timeline: view()) {
-  @media (prefers-reduced-motion: no-preference) {
-    @keyframes agv-drift { from { translate: 0 -1.5%; } to { translate: 0 1.5%; } }
-    .lb-banner img { animation: kb 22s var(--ease-io) infinite alternate, agv-drift linear both; animation-timeline: auto, view(); }
-    .final-bg img { animation: kb 24s var(--ease-io) infinite alternate, agv-drift linear both; animation-timeline: auto, view(); }
-  }
-}
-/* Keyboard focus everywhere; bigger hero-dot tap area without changing the look. */
-a:focus-visible, button:focus-visible { outline: 2px solid var(--silver-1); outline-offset: 3px; }
-.dot-b { overflow: visible; }
-.dot-b::after { content: ""; position: absolute; inset: -18px -4px; }
-/* Phone: 44px targets and home-indicator safe area. */
-@media (max-width: 900px) {
-  .burger { width: 44px; height: 44px; }
-  .burger i { left: 12px; right: 12px; }
-  .burger i:first-child { top: 17px; }
-  .burger i:last-child { top: 25px; }
-  .burger[aria-expanded="true"] i:first-child, .burger[aria-expanded="true"] i:last-child { top: 21px; }
-  .foot nav a { display: inline-flex; align-items: center; min-height: 44px; }
-  .foot { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
-  .mnav { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
-}
-/* Models: two counter-moving rows of lit type (sans, then italic serif) instead of one ghosted outline row. */
-.marquee { margin-top: 56px; display: grid; gap: 10px; }
-.marquee-row span { -webkit-text-stroke: 0; background: linear-gradient(180deg, rgba(244,242,238,.92), rgba(244,242,238,.22)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: filter .4s; }
-.marquee-row span:hover { filter: drop-shadow(0 0 18px rgba(255,107,61,.35)); }
-.marquee-row.rev { animation-direction: reverse; animation-duration: 52s; }
-.marquee-row.rev span { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; background: linear-gradient(180deg, rgba(201,198,192,.5), rgba(255,179,107,.14)); -webkit-background-clip: text; background-clip: text; }
diff --git a/web/css/tokens.css b/web/css/tokens.css
index a9d1054..e08a56c 100644
--- a/web/css/tokens.css
+++ b/web/css/tokens.css
@@ -7,7 +7,7 @@
   --line-2: rgba(235, 232, 226, 0.16);
   --ink: #f2efe9;
   --ink-2: #b9b5ad;
-  --ink-3: #8a867e;
+  --ink-3: #77736c;
   --silver-1: #f4f2ee;
   --silver-2: #c9c6c0;
   --silver-3: #8d8a85;
diff --git a/web/favicon.ico b/web/favicon.ico
index b1ce808..9ad9dde 100644
Binary files a/web/favicon.ico and b/web/favicon.ico differ
diff --git a/web/index.html b/web/index.html
index faf33af..60f55cd 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,20 +4,14 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <title>Agave Studio</title>
-<meta name="description" content="Free, open-source studio for AI image, video, voice and 3D, with a video editor built in. Bring your own API keys.">
-<meta property="og:type" content="website">
-<meta property="og:title" content="Agave Studio">
-<meta property="og:description" content="Free, open-source studio for AI image, video, voice and 3D, with a video editor built in. Bring your own API keys.">
-<meta property="og:image" content="https://raw.githubusercontent.com/LayerMakerLab/agave-studio/main/docs/img/studio.jpg">
-<meta name="twitter:card" content="summary_large_image">
+<meta name="description" content="One workspace for AI image, video, motion and sound.">
 <meta name="theme-color" content="#08080a">
-<link rel="stylesheet" href="/css/fonts.css">
+<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=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/css/tokens.css">
 <link rel="stylesheet" href="/css/home.css">
-<link rel="icon" href="/favicon.ico" sizes="48x48">
-<link rel="icon" href="/assets/brand/favicon-32.png" type="image/png" sizes="32x32">
-<link rel="icon" href="/assets/brand/favicon-16.png" type="image/png" sizes="16x16">
-<link rel="apple-touch-icon" href="/assets/brand/apple-touch-icon.png">
+<link rel="icon" href="/assets/brand/icon.svg" type="image/svg+xml">
 <link rel="alternate icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='9' fill='%2308080a'/%3E%3Ccircle cx='16' cy='16' r='7' fill='none' stroke='%23d9d6d0' stroke-width='2.4'/%3E%3Ccircle cx='16' cy='16' r='2.4' fill='%23ff6b3d'/%3E%3C/svg%3E">
 </head>
 <body>
@@ -38,12 +32,12 @@
   <nav class="nav-links" aria-label="Primary">
     <div class="nav-item has-menu">
       <button class="nav-btn" aria-expanded="false" aria-controls="menu-video">Video <i class="chev"></i></button>
-      <div class="menu" id="menu-video">
+      <div class="menu" id="menu-video" role="menu">
         <div class="menu-cards">
-          <a class="mcard" href="/app/#video/fal/kling-3-pro-t2v"><video muted loop playsinline preload="none" poster="/assets/img/reel-t2v.webp" data-src="/assets/video/hero-lighthouse-sm.mp4"></video><span>Text to video<em>Type a scene, get a shot</em></span></a>
-          <a class="mcard" href="/app/#video"><video muted loop playsinline preload="none" poster="/assets/img/reel-image.webp" data-src="/assets/video/card-image.mp4"></video><span>Image to video<em>Bring a still to life</em></span></a>
-          <a class="mcard" href="/app/#camera"><video muted loop playsinline preload="none" poster="/assets/img/reel-camera.webp" data-src="/assets/video/card-camera.mp4"></video><span>Camera control<em>20 moves, one click</em></span></a>
-          <a class="mcard" href="/app/#audio"><video muted loop playsinline preload="none" poster="/assets/img/reel-lipsync.webp" data-src="/assets/video/card-lipsync.mp4"></video><span>Voice<em>Your ElevenLabs voices</em></span></a>
+          <a class="mcard" href="/app/#video/fal/kling-3-pro-t2v" role="menuitem"><video muted loop playsinline preload="none" poster="/assets/img/reel-t2v.webp" data-src="/assets/video/hero-lighthouse-sm.mp4"></video><span>Text to video<em>Type a scene, get a shot</em></span></a>
+          <a class="mcard" href="/app/#video" role="menuitem"><video muted loop playsinline preload="none" poster="/assets/img/reel-image.webp" data-src="/assets/video/card-image.mp4"></video><span>Image to video<em>Bring a still to life</em></span></a>
+          <a class="mcard" href="/app/#camera" role="menuitem"><video muted loop playsinline preload="none" poster="/assets/img/reel-camera.webp" data-src="/assets/video/card-camera.mp4"></video><span>Camera control<em>20 moves, one click</em></span></a>
+          <a class="mcard" href="/app/#lipsync" role="menuitem"><video muted loop playsinline preload="none" poster="/assets/img/reel-lipsync.webp" data-src="/assets/video/card-lipsync.mp4"></video><span>Lipsync<em>Coming soon</em></span></a>
         </div>
         <div class="menu-side">
           <p class="menu-label">Video models</p>
@@ -52,25 +46,25 @@
           <a href="/app/#video/fal/seedance-2.5-t2v">Seedance 2.5 <b class="badge">New</b></a>
           <a href="/app/#video/fal/hailuo-02-t2v">Hailuo 02</a>
           <a href="/app/#video/fal/wan-t2v">Wan 2.2</a>
-          <a class="menu-all" href="/app/#video">All video models <span aria-hidden="true">→</span></a>
+          <a class="menu-all" href="/app/#video">All 9 video models <span aria-hidden="true">→</span></a>
         </div>
       </div>
     </div>
     <div class="nav-item has-menu">
       <button class="nav-btn" aria-expanded="false" aria-controls="menu-image">Image <i class="chev"></i></button>
-      <div class="menu" id="menu-image">
+      <div class="menu" id="menu-image" role="menu">
         <div class="menu-cards">
-          <a class="mcard" href="/app/#image/fal/nano-banana"><img src="/assets/img/lb-perfume.webp" alt="" loading="lazy"><span>Text to image<em>Stills that look shot</em></span></a>
-          <a class="mcard" href="/app/#characters"><video muted loop playsinline preload="none" poster="/assets/img/char-a.webp" data-src="/assets/video/card-character.mp4"></video><span>Characters<em>Same face, every shot</em></span></a>
-          <a class="mcard" href="/app/#3d"><video muted loop playsinline preload="none" poster="/assets/img/reel-upscale.webp" data-src="/assets/video/card-upscale.mp4"></video><span>3D<em>Pictures to a 3D model</em></span></a>
-          <a class="mcard" href="#lookbook"><img src="/assets/img/lb-samurai.webp" alt="" loading="lazy"><span>Look book<em>Ten looks to start from</em></span></a>
+          <a class="mcard" href="/app/#image/fal/nano-banana" role="menuitem"><img src="/assets/img/lb-perfume.webp" alt="" loading="lazy"><span>Text to image<em>Stills that look shot</em></span></a>
+          <a class="mcard" href="/app/#characters" role="menuitem"><video muted loop playsinline preload="none" poster="/assets/img/char-a.webp" data-src="/assets/video/card-character.mp4"></video><span>Characters<em>Same face, every shot</em></span></a>
+          <a class="mcard" href="/app/#upscale" role="menuitem"><video muted loop playsinline preload="none" poster="/assets/img/reel-upscale.webp" data-src="/assets/video/card-upscale.mp4"></video><span>Upscale<em>Coming soon</em></span></a>
+          <a class="mcard" href="#lookbook" role="menuitem"><img src="/assets/img/lb-samurai.webp" alt="" loading="lazy"><span>Look book<em>Styles you can steal</em></span></a>
         </div>
         <div class="menu-side">
           <p class="menu-label">Image models</p>
           <a href="/app/#image/fal/nano-banana">Nano Banana <b class="badge">New</b></a>
           <a href="/app/#image/fal/seedream-4-t2i">Seedream 4</a>
           <a href="/app/#image/fal/flux-schnell">FLUX schnell</a>
-          <a class="menu-all" href="/app/#image">All image models <span aria-hidden="true">→</span></a>
+          <a class="menu-all" href="/app/#image">All 3 image models <span aria-hidden="true">→</span></a>
         </div>
       </div>
     </div>
@@ -95,32 +89,32 @@
   <section class="hero" id="top" aria-roledescription="carousel" aria-label="Featured shots">
     <div class="slides" id="slides">
       <div class="slide is-on" data-title="Direct|every|frame." data-sub="One studio for AI image, video, motion and sound. Bring the models you trust and direct them like a film set." data-tag="Camera · Dolly in">
-        <video aria-hidden="true" muted playsinline preload="auto" poster="/assets/img/hero-atrium.jpg" src="/assets/video/hero-atrium.mp4"></video>
+        <video muted playsinline preload="auto" poster="/assets/img/hero-atrium.jpg" src="/assets/video/hero-atrium.mp4"></video>
       </div>
-      <div class="slide" data-title="Type a|scene.|Watch it move." data-sub="Write the shot the way you would say it. Agave turns it into motion with the model you pick." data-tag="Camera · Dolly in">
-        <video aria-hidden="true" muted playsinline preload="metadata" poster="/assets/img/hero-lighthouse.jpg" data-src="/assets/video/hero-lighthouse.mp4"></video>
+      <div class="slide" data-title="Type a|scene.|Watch it move." data-sub="Write the shot the way you would say it. Agave turns it into motion with the model you pick." data-tag="Text to video · Push in">
+        <video muted playsinline preload="metadata" poster="/assets/img/hero-lighthouse.jpg" data-src="/assets/video/hero-lighthouse.mp4"></video>
       </div>
-      <div class="slide" data-title="Scale|without a|crew." data-sub="Deserts, storms and crowds from a single sentence. No permits, no location scouts." data-tag="Camera · Tracking side">
-        <video aria-hidden="true" muted playsinline preload="metadata" poster="/assets/img/hero-dunes.jpg" data-src="/assets/video/hero-dunes.mp4"></video>
+      <div class="slide" data-title="Scale|without a|crew." data-sub="Deserts, storms and crowds from a single sentence. No permits, no location scouts." data-tag="Epic wide · Tracking">
+        <video muted playsinline preload="metadata" poster="/assets/img/hero-dunes.jpg" data-src="/assets/video/hero-dunes.mp4"></video>
       </div>
-      <div class="slide" data-title="Every move,|on|command." data-sub="Dolly, orbit, crane, whip pan. Pick a move from the shot list and the camera does the rest." data-tag="Camera · Handheld">
-        <video aria-hidden="true" muted playsinline preload="metadata" poster="/assets/img/hero-pitstop.jpg" data-src="/assets/video/hero-pitstop.mp4"></video>
+      <div class="slide" data-title="Every move,|on|command." data-sub="Dolly, orbit, crane, whip pan. Pick a move from the shot list and the camera does the rest." data-tag="Handheld · Period action">
+        <video muted playsinline preload="metadata" poster="/assets/img/hero-pitstop.jpg" data-src="/assets/video/hero-pitstop.mp4"></video>
       </div>
-      <div class="slide" data-title="Your|studio|is open." data-sub="Image, video, voice and 3D in one queue. Add your key and make your first shot today." data-tag="Camera · Crane down">
-        <video aria-hidden="true" muted playsinline preload="metadata" poster="/assets/img/hero-soundstage.jpg" data-src="/assets/video/hero-soundstage.mp4"></video>
+      <div class="slide" data-title="Your|studio|is open." data-sub="Image, video, voice and upscale in one queue. Add your key and make your first shot today." data-tag="Soundstage · Crane down">
+        <video muted playsinline preload="metadata" poster="/assets/img/hero-soundstage.jpg" data-src="/assets/video/hero-soundstage.mp4"></video>
       </div>
     </div>
     <div class="hero-shade" aria-hidden="true"></div>
     <div class="hero-inner">
       <p class="eyebrow"><span class="live-dot"></span><span id="heroTag">Camera · Dolly in</span></p>
-      <h1 class="hero-title" id="heroTitle">Direct every frame.</h1>
+      <h1 class="hero-title" id="heroTitle" aria-live="polite"></h1>
       <p class="hero-sub" id="heroSub"></p>
       <div class="hero-actions">
         <a class="pill lg" href="/app/"><span class="dot"></span>Open the studio</a>
         <a class="ghost" href="#free">Why it is free</a>
       </div>
     </div>
-    <div class="dots" id="dots" role="group" aria-label="Choose a shot"></div>
+    <div class="dots" id="dots" role="tablist" aria-label="Choose a shot"></div>
     <div class="prompt" aria-hidden="true">
       <div class="prompt-row">
         <span class="prompt-icon"></span>
@@ -157,11 +151,11 @@ <h2 class="reveal">Six ways in.<br><span class="serif dim">One timeline out.</sp
       </article>
       <article class="clip">
         <div class="clip-media kb" data-clip><video muted loop playsinline preload="none" poster="/assets/img/reel-lipsync.webp" data-src="/assets/video/card-lipsync.mp4"></video><img src="/assets/img/reel-lipsync.webp" alt="A jazz singer at a ribbon microphone under a warm spotlight" loading="lazy" decoding="async"><div class="wave" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
-        <div class="clip-cap"><span>Voice</span><em>Text to speech</em></div>
+        <div class="clip-cap"><span>Lipsync</span><em>Voice to face</em></div>
       </article>
       <article class="clip">
-        <div class="clip-media kb" data-clip><video muted loop playsinline preload="none" poster="/assets/img/reel-upscale.webp" data-src="/assets/video/card-upscale.mp4"></video><img src="/assets/img/reel-upscale.webp" alt="Macro of a mechanical watch movement" loading="lazy" decoding="async"></div>
-        <div class="clip-cap"><span>3D</span><em>1 to 4 pictures to a model</em></div>
+        <div class="clip-media sharp" data-clip><video muted loop playsinline preload="none" poster="/assets/img/reel-upscale.webp" data-src="/assets/video/card-upscale.mp4"></video><img class="lo" src="/assets/img/reel-upscale.webp" alt="" aria-hidden="true" loading="lazy"><img class="hi" src="/assets/img/reel-upscale.webp" alt="Macro of a mechanical watch movement" loading="lazy" decoding="async"><div class="wipe" aria-hidden="true"></div></div>
+        <div class="clip-cap"><span>Upscale</span><em>Up to 4K</em></div>
       </article>
       <article class="clip">
         <div class="clip-media cast" data-clip><video muted loop playsinline preload="none" poster="/assets/img/char-a.webp" data-src="/assets/video/card-character.mp4"></video><img class="card c1" src="/assets/img/char-b.webp" alt="" aria-hidden="true" loading="lazy"><img class="card c2" src="/assets/img/char-c.webp" alt="" aria-hidden="true" loading="lazy"><img class="card c3" src="/assets/img/char-a.webp" alt="The same character on a rooftop, on a train and in a night market" loading="lazy" decoding="async"></div>
@@ -215,21 +209,23 @@ <h3>One queue for every model</h3>
           <div class="q"><span>Video · 8s · 1080p</span><span class="q-bar"><i style="--d:6s"></i></span></div>
           <div class="q"><span>Image · 4 variations</span><span class="q-bar"><i style="--d:3.4s"></i></span></div>
           <div class="q"><span>Voice · 22s</span><span class="q-bar"><i style="--d:4.6s"></i></span></div>
-          <div class="q"><span>3D · GLB</span><span class="q-bar"><i style="--d:7.2s"></i></span></div>
+          <div class="q"><span>Upscale · 4K</span><span class="q-bar"><i style="--d:7.2s"></i></span></div>
         </div>
       </div>
       <div class="b reveal">
         <h3>Your keys, your models</h3>
         <p>Add a key once in Settings. Every model behind it lights up.</p>
-        <div class="keys"><span>FAL_KEY</span><span>REPLICATE_API_TOKEN</span><span>GEMINI_API_KEY</span><span>OPENAI_API_KEY</span><span>MESHY_API_KEY</span><span>ELEVENLABS_API_KEY</span></div>
+        <div class="keys"><span>FAL_KEY</span><span>REPLICATE_API_TOKEN</span><span>GEMINI_API_KEY</span><span>OPENAI_API_KEY</span><span>RUNWAY_API_KEY</span><span>ELEVENLABS_API_KEY</span></div>
       </div>
       <div class="b b-tall reveal">
-        <h3>Wide to vertical</h3>
-        <p>Reframe any clip to 9:16 for Shorts, Reels and TikTok in the editor. On a Mac, Follow keeps the subject in frame.</p>
-        <div class="reframe" aria-hidden="true">
-          <img src="/assets/img/hero-lighthouse.jpg" alt="" loading="lazy" decoding="async">
-          <span class="rf-win"></span>
-          <span class="cmp-tag l">16:9</span><span class="cmp-tag r">9:16</span>
+        <h3>Upscale you can feel</h3>
+        <p>Drag across the frame. Left is a 296px frame, right is the same frame after a real 4x upscale.</p>
+        <div class="compare" style="--p:50%">
+          <img class="cmp-a" src="/assets/img/cmp-raw.jpg" alt="" draggable="false">
+          <img class="cmp-b" src="/assets/img/cmp-topaz.webp" alt="Chrome motorcycle detail after a 4x upscale" draggable="false">
+          <span class="cmp-line" aria-hidden="true"><i></i></span>
+          <span class="cmp-tag l">296px</span><span class="cmp-tag r">4x upscale</span>
+          <input type="range" min="0" max="100" value="50" aria-label="Compare raw and upscaled">
         </div>
       </div>
       <div class="b reveal">
@@ -246,7 +242,7 @@ <h3>Native app</h3>
         <h3>Presets built like shot lists</h3>
         <p>Pick a look and a move, then write the scene. The preset handles the prompt craft.</p>
         <div class="presets">
-          <span>Bullet time</span><span>Crash zoom</span><span>Dolly zoom</span><span>Rack focus</span><span>Low-angle orbit</span><span>Overhead</span><span>Handheld</span><span>FPV dive</span><span>Snorricam</span><span>Tilt reveal</span>
+          <span>Bullet time</span><span>Crash zoom</span><span>Dolly zoom</span><span>Rack focus</span><span>Low orbit</span><span>Overhead</span><span>Handheld</span><span>FPV dive</span><span>Snorricam</span><span>Tilt reveal</span>
         </div>
       </div>
     </div>
@@ -257,23 +253,22 @@ <h3>Presets built like shot lists</h3>
     <div class="section-head">
       <p class="kicker reveal">04 — Look book</p>
       <h2 class="reveal">Pick a look.<br><span class="serif dim">Then make it yours.</span></h2>
-      <p class="models-note reveal">Each caption pairs one of the studio's ten looks with one of its twenty camera moves.</p>
     </div>
     <figure class="lb-banner reveal">
       <img src="/assets/img/showcase-dunes.webp" alt="A rider crosses vast dunes ahead of an amber dust storm" loading="lazy" decoding="async">
-      <figcaption><span class="lb-tag">Anamorphic · Crane up</span><strong>Scale that stops a scroll.</strong></figcaption>
+      <figcaption><span class="lb-tag">Epic wide · Crane up</span><strong>Scale that stops a scroll.</strong></figcaption>
     </figure>
     <div class="lb-grid">
-      <figure class="lb tall" data-clip><video muted loop playsinline preload="none" poster="/assets/img/lb-samurai.webp" data-src="/assets/video/lb-samurai.mp4"></video><img src="/assets/img/lb-samurai.webp" alt="A samurai under a temple gate in the rain" loading="lazy" decoding="async"><figcaption>Film noir · Static lock-off</figcaption></figure>
-      <figure class="lb wide"><img src="/assets/img/lb-perfume.webp" alt="A perfume bottle inside a splash of liquid gold" loading="lazy" decoding="async"><figcaption>Commercial gloss · Orbit right</figcaption></figure>
-      <figure class="lb"><img src="/assets/img/lb-honey.webp" alt="Honey dripping over honeycomb" loading="lazy" decoding="async"><figcaption>Studio product · Rack focus</figcaption></figure>
-      <figure class="lb tall"><img src="/assets/img/lb-ballet.webp" alt="A ballet dancer mid leap in a theater spotlight" loading="lazy" decoding="async"><figcaption>Music video · Bullet time</figcaption></figure>
-      <figure class="lb wide"><img src="/assets/img/lb-pitstop.webp" alt="A 1960s race car pit stop with sparks" loading="lazy" decoding="async"><figcaption>35mm film · Handheld</figcaption></figure>
-      <figure class="lb tall3"><img src="/assets/img/lb-astronaut.webp" alt="An astronaut in a red canyon at sunset" loading="lazy" decoding="async"><figcaption>Anamorphic · Tilt reveal</figcaption></figure>
+      <figure class="lb tall" data-clip><video muted loop playsinline preload="none" poster="/assets/img/lb-samurai.webp" data-src="/assets/video/lb-samurai.mp4"></video><img src="/assets/img/lb-samurai.webp" alt="A samurai under a temple gate in the rain" loading="lazy" decoding="async"><figcaption>Rain noir · Static lock-off</figcaption></figure>
+      <figure class="lb wide"><img src="/assets/img/lb-perfume.webp" alt="A perfume bottle inside a splash of liquid gold" loading="lazy" decoding="async"><figcaption>Product gloss · Orbit</figcaption></figure>
+      <figure class="lb"><img src="/assets/img/lb-honey.webp" alt="Honey dripping over honeycomb" loading="lazy" decoding="async"><figcaption>Macro · Rack focus</figcaption></figure>
+      <figure class="lb tall"><img src="/assets/img/lb-ballet.webp" alt="A ballet dancer mid leap in a theater spotlight" loading="lazy" decoding="async"><figcaption>Stage light · Bullet time</figcaption></figure>
+      <figure class="lb wide"><img src="/assets/img/lb-pitstop.webp" alt="A 1960s race car pit stop with sparks" loading="lazy" decoding="async"><figcaption>Period action · Handheld</figcaption></figure>
+      <figure class="lb tall3"><img src="/assets/img/lb-astronaut.webp" alt="An astronaut in a red canyon at sunset" loading="lazy" decoding="async"><figcaption>Sci-fi epic · Tilt reveal</figcaption></figure>
       <figure class="lb wide"><img src="/assets/img/lb-noir.webp" alt="A detective at a desk striped by blind shadows" loading="lazy" decoding="async"><figcaption>Film noir · Dolly in</figcaption></figure>
-      <figure class="lb tall"><img src="/assets/img/lb-silk.webp" alt="A model in flowing silk on a rooftop" loading="lazy" decoding="async"><figcaption>Golden hour · Tracking side</figcaption></figure>
-      <figure class="lb wide"><img src="/assets/img/lb-fisherman.webp" alt="An old fisherman mending nets at dawn" loading="lazy" decoding="async"><figcaption>Documentary · Crane down</figcaption></figure>
-      <figure class="lb wide"><img src="/assets/img/lb-moto.webp" alt="A chrome motorcycle in a smoky workshop" loading="lazy" decoding="async"><figcaption>VHS · Low-angle orbit</figcaption></figure>
+      <figure class="lb tall"><img src="/assets/img/lb-silk.webp" alt="A model in flowing silk on a rooftop" loading="lazy" decoding="async"><figcaption>Fashion · Slow motion</figcaption></figure>
+      <figure class="lb wide"><img src="/assets/img/lb-fisherman.webp" alt="An old fisherman mending nets at dawn" loading="lazy" decoding="async"><figcaption>Documentary · Push in</figcaption></figure>
+      <figure class="lb wide"><img src="/assets/img/lb-moto.webp" alt="A chrome motorcycle in a smoky workshop" loading="lazy" decoding="async"><figcaption>Garage grit · Low orbit</figcaption></figure>
     </div>
   </section>
 
@@ -282,13 +277,10 @@ <h2 class="reveal">Pick a look.<br><span class="serif dim">Then make it yours.</
     <p class="kicker center reveal">05 — Models</p>
     <h2 class="center reveal">Plug in the best engines.</h2>
     <p class="models-note reveal">Connect the providers you already use. Agave routes each job to the model you pick.</p>
-    <div class="marquee">
+    <div class="marquee" aria-label="Supported model families">
       <div class="marquee-row">
-        <span>Kling</span><span>Veo</span><span>Seedance</span><span>Wan</span><span>Hailuo</span><span>Flux</span><span>Nano Banana</span><span>GPT Image</span><span>Seedream</span><span>ElevenLabs</span><span>Meshy</span>
-        <span aria-hidden="true">Kling</span><span aria-hidden="true">Veo</span><span aria-hidden="true">Seedance</span><span aria-hidden="true">Wan</span><span aria-hidden="true">Hailuo</span><span aria-hidden="true">Flux</span><span aria-hidden="true">Nano Banana</span><span aria-hidden="true">GPT Image</span><span aria-hidden="true">Seedream</span><span aria-hidden="true">ElevenLabs</span><span aria-hidden="true">Meshy</span>
-      </div>
-      <div class="marquee-row rev" aria-hidden="true">
-        <span>Flux</span><span>ElevenLabs</span><span>Seedance</span><span>GPT Image</span><span>Kling</span><span>Meshy</span><span>Seedream</span><span>Veo</span><span>Nano Banana</span><span>Hailuo</span><span>Wan</span><span>Flux</span><span>ElevenLabs</span><span>Seedance</span><span>GPT Image</span><span>Kling</span><span>Meshy</span><span>Seedream</span><span>Veo</span><span>Nano Banana</span><span>Hailuo</span><span>Wan</span>
+        <span>Kling</span><span>Veo</span><span>Seedance</span><span>Wan</span><span>Hailuo</span><span>Runway</span><span>Luma Ray</span><span>Flux</span><span>Imagen</span><span>GPT Image</span><span>Seedream</span><span>ElevenLabs</span>
+        <span aria-hidden="true">Kling</span><span aria-hidden="true">Veo</span><span aria-hidden="true">Seedance</span><span aria-hidden="true">Wan</span><span aria-hidden="true">Hailuo</span><span aria-hidden="true">Runway</span><span aria-hidden="true">Luma Ray</span><span aria-hidden="true">Flux</span><span aria-hidden="true">Imagen</span><span aria-hidden="true">GPT Image</span><span aria-hidden="true">Seedream</span><span aria-hidden="true">ElevenLabs</span>
       </div>
     </div>
   </section>
@@ -298,7 +290,7 @@ <h2 class="center reveal">Plug in the best engines.</h2>
     <div class="section-head center">
       <p class="kicker reveal">06 — Free</p>
       <h2 class="reveal">Free. Every feature.</h2>
-      <p class="models-note reveal">No plans, no credits, no sign-in. Add an API key from a provider such as fal.ai and pay them directly for what you make. For fal.ai models the studio shows the provider's list price before you press Generate; Meshy jobs show their credit cost.</p>
+      <p class="models-note reveal">No plans, no credits, no sign-in. Add an API key from a provider such as fal.ai and pay them directly for what you make. Every generation shows its estimated cost before you press Generate.</p>
     </div>
     <div class="tiers">
       <article class="tier reveal">
@@ -322,7 +314,7 @@ <h2 class="reveal">Free. Every feature.</h2>
           <li>fal.ai, Replicate, OpenAI, Gemini</li>
           <li>Black Forest Labs, ElevenLabs, Meshy</li>
           <li>Keys stored only on your computer</li>
-          <li>Price shown before each fal.ai job</li>
+          <li>Estimated cost before every job</li>
         </ul>
         <a class="pill" href="/app/"><span class="dot"></span>Open the studio</a>
       </article>
@@ -351,8 +343,7 @@ <h2 class="final-title reveal">Your studio<br><span class="serif">is open.</span
 <footer class="foot">
   <div class="brand small"><img class="brand-logo" src="/assets/brand/mark.svg" alt="" width="24" height="24"><span class="brand-word">Agave <em>Studio</em></span></div>
   <nav aria-label="Footer"><a href="#create">Create</a><a href="#free">Free</a><a href="/app/">Workspace</a></nav>
-  <p>© 2026 LayerMaker LLC</p>
-  <p class="foot-note">Pictures on this page were made with Meshy and animated with Kling 3.0 on fal. The lighthouse shot is a camera move added in editing.</p>
+  <p>© 2026 Agave Studio</p>
 </footer>
 
 <script src="/js/home.js" defer></script>
diff --git a/web/js/home.js b/web/js/home.js
index 37966f8..7c7e1e5 100644
--- a/web/js/home.js
+++ b/web/js/home.js
@@ -58,7 +58,7 @@
 
   /* ---------- Hero carousel: blur crossfade + progress dots ---------- */
   const hero = $(".hero"), slides = $$(".slide"), dotsEl = $("#dots"), titleEl = $("#heroTitle"), subEl = $("#heroSub"), tagEl = $("#heroTag");
-  const DUR = 5200; let cur = 0, timer = null, first = true, held = false;
+  const DUR = 5200; let cur = 0, timer = null, first = true;
   hero.style.setProperty("--dur", DUR + "ms");
   const renderTitle = (raw) => {
     const [a, b, c] = raw.split("|");
@@ -71,42 +71,32 @@
     requestAnimationFrame(() => requestAnimationFrame(() => titleEl.classList.add("in")));
   };
   const dots = slides.map((_, i) => {
-    const d = document.createElement("button"); d.className = "dot-b"; d.type = "button";
+    const d = document.createElement("button"); d.className = "dot-b"; d.type = "button"; d.setAttribute("role", "tab");
     d.setAttribute("aria-label", `Shot ${i + 1}`); d.innerHTML = "<i></i>"; d.addEventListener("click", () => go(i, true)); dotsEl.append(d); return d;
   });
-  // Pause / play for the slideshow (WCAG 2.2.2: anything that moves on its own can be stopped).
-  const hold = document.createElement("button"); hold.type = "button"; hold.className = "hold-b";
-  const setHold = (h) => {
-    held = h; hold.setAttribute("aria-label", h ? "Play the slideshow" : "Pause the slideshow"); hold.setAttribute("aria-pressed", String(h));
-    hold.classList.toggle("is-held", h); hero.classList.toggle("paused", h);
-    const v = $("video", slides[cur]);
-    if (h) { clearTimeout(timer); timer = null; v.pause(); } else { play(v); if (!reduce) timer = setTimeout(() => go(cur + 1), DUR); }
-  };
-  hold.addEventListener("click", () => setHold(!held)); dotsEl.append(hold); setHold(false);
   const go = (n, user) => {
     const prev = slides[cur]; n = (n + slides.length) % slides.length;
     if (n !== cur) { prev.classList.remove("is-on"); prev.classList.add("is-out"); setTimeout(() => { prev.classList.remove("is-out"); $("video", prev).pause(); }, 1300); }
     cur = n; const s = slides[n], v = $("video", s);
-    arm(v); try { v.currentTime = 0; } catch {} if (!held) play(v); s.classList.add("is-on");
+    arm(v); try { v.currentTime = 0; } catch {} play(v); s.classList.add("is-on");
     arm($("video", slides[(n + 1) % slides.length])); // warm the next clip
     if (!first) {
       titleEl.classList.remove("in"); titleEl.classList.add("out"); subEl.classList.add("swap");
       setTimeout(() => { titleEl.classList.remove("out"); renderTitle(s.dataset.title); subEl.textContent = s.dataset.sub; tagEl.textContent = s.dataset.tag; subEl.classList.remove("swap"); }, 420);
     }
     first = false;
-    dots.forEach((d, i) => { d.classList.remove("on"); if (i === n) d.setAttribute("aria-current", "true"); else d.removeAttribute("aria-current"); void d.offsetWidth; if (i === n) d.classList.add("on"); });
-    clearTimeout(timer); timer = null; if (!reduce && !held) timer = setTimeout(() => go(cur + 1), DUR);
+    dots.forEach((d, i) => { d.classList.remove("on"); d.setAttribute("aria-selected", String(i === n)); void d.offsetWidth; if (i === n) d.classList.add("on"); });
+    clearTimeout(timer); if (!reduce) timer = setTimeout(() => go(cur + 1), DUR);
   };
   renderTitle(slides[0].dataset.title); subEl.textContent = slides[0].dataset.sub;
   go(0);
   // pause the carousel when the hero is off screen or the tab is hidden
   new IntersectionObserver(([e]) => {
     const v = $("video", slides[cur]);
-    if (held) return;
     if (e.isIntersecting) { hero.classList.remove("paused"); play(v); if (!timer && !reduce) timer = setTimeout(() => go(cur + 1), DUR); }
     else { hero.classList.add("paused"); v.pause(); clearTimeout(timer); timer = null; }
   }, { threshold: 0.2 }).observe(hero);
-  document.addEventListener("visibilitychange", () => { if (document.hidden) { clearTimeout(timer); timer = null; } else if (!timer && !reduce && !held) timer = setTimeout(() => go(cur + 1), DUR); });
+  document.addEventListener("visibilitychange", () => { if (document.hidden) { clearTimeout(timer); timer = null; } else if (!timer && !reduce) timer = setTimeout(() => go(cur + 1), DUR); });
   hero.addEventListener("keydown", (e) => { if (e.key === "ArrowRight") go(cur + 1, true); if (e.key === "ArrowLeft") go(cur - 1, true); });
 
   /* ---------- Hover-to-play clips (cards, look book); in-view autoplay on touch ---------- */
@@ -117,6 +107,16 @@
     else { host.addEventListener("pointerenter", () => { host.classList.add("playing"); play(v); }); host.addEventListener("pointerleave", () => { host.classList.remove("playing"); v.pause(); }); }
   });
 
+  /* ---------- Before / after compare ---------- */
+  $$(".compare").forEach((c) => {
+    const set = (x) => { const r = c.getBoundingClientRect(); const p = Math.min(1, Math.max(0, (x - r.left) / r.width)); c.style.setProperty("--p", (p * 100).toFixed(2) + "%"); };
+    let drag = false;
+    c.addEventListener("pointerdown", (e) => { drag = true; c.setPointerCapture(e.pointerId); set(e.clientX); });
+    c.addEventListener("pointermove", (e) => { if (drag || e.pointerType === "mouse") set(e.clientX); });
+    c.addEventListener("pointerup", () => (drag = false));
+    const range = $("input", c); if (range) range.addEventListener("input", () => c.style.setProperty("--p", range.value + "%"));
+  });
+
   /* ---------- Prompt bar: types prompts, fakes nothing beyond a UI loop ---------- */
   const prompts = [
     ["A lighthouse keeper climbs the stairs during a storm, lantern swinging", "Video", "Dolly in"],