diff --git a/package.json b/package.json
index 192a6a6..c3df3e2 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.15.0",
+    "lenis": "^1.3.26",
     "lucide-react": "^0.468.0",
     "mixpanel-browser": "^2.79.0",
     "react": "^18.3.1",
diff --git a/src/components/SmoothScroll.astro b/src/components/SmoothScroll.astro
new file mode 100644
index 0000000..740646d
--- /dev/null
+++ b/src/components/SmoothScroll.astro
@@ -0,0 +1,33 @@
+---
+---
+
+<script>
+  import Lenis from 'lenis';
+
+  let lenis: Lenis | null = null;
+
+  function initSmoothScroll() {
+    if (lenis) return;
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduced) return;
+
+    lenis = new Lenis({
+      duration: 1.05,
+      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+      smoothWheel: true,
+      wheelMultiplier: 1,
+      anchors: true,
+      autoRaf: true,
+    });
+  }
+
+  function destroySmoothScroll() {
+    lenis?.destroy();
+    lenis = null;
+  }
+
+  document.addEventListener('astro:page-load', initSmoothScroll);
+  document.addEventListener('astro:before-swap', destroySmoothScroll);
+  if (document.readyState !== 'loading') initSmoothScroll();
+  else document.addEventListener('DOMContentLoaded', initSmoothScroll);
+</script>
diff --git a/src/components/sections/Capabilities.astro b/src/components/sections/Capabilities.astro
index 3d6c5b6..627c962 100644
--- a/src/components/sections/Capabilities.astro
+++ b/src/components/sections/Capabilities.astro
@@ -8,28 +8,26 @@ interface Props {
 const { t } = Astro.props;
 ---
 
-<section id="capabilities" class="relative bg-ink text-cream py-10 md:py-10 overflow-hidden" data-track-section="capabilities">
-  <!-- Inverse iso pattern (white over ink) -->
-  <div
-    aria-hidden="true"
-    class="pointer-events-none absolute inset-0 opacity-[0.06]"
-    style="background-image: url(&quot;data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><g fill='none' stroke='%23F8F3EB' stroke-width='1'><path d='M28 4 L52 18 L52 46 L28 60 L4 46 L4 18 Z'/><path d='M28 4 L28 32 M28 32 L52 18 M28 32 L4 18'/></g></svg>&quot;); background-size: 56px 64px;"
-  ></div>
-  <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-orange/60 to-transparent"></div>
+<section
+  id="capabilities"
+  class="relative bg-cream text-ink py-10 overflow-hidden"
+  data-track-section="capabilities"
+>
+  <div aria-hidden="true" class="iso-pattern pointer-events-none absolute inset-0 opacity-40"></div>
 
   <div class="page relative" data-stagger="100">
     <div class="grid grid-cols-12 gap-y-6 md:gap-x-6 items-end">
       <div class="col-span-12 md:col-span-7">
-        <p class="eyebrow reveal" style="color: #FF8D5C;">{t.eyebrow}</p>
+        <p class="eyebrow reveal">{t.eyebrow}</p>
         <h2
-          class="reveal mt-4 text-cream"
+          class="reveal mt-4 text-ink"
           style="font-size: clamp(36px, 5vw, 56px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700;"
         >
           {t.heading}
         </h2>
       </div>
       <div class="col-span-12 md:col-span-5">
-        <p class="reveal text-body max-w-prose" style="color: rgba(248,243,235,0.78);">
+        <p class="reveal text-body text-steel max-w-prose">
           {t.lede}
         </p>
       </div>
@@ -39,17 +37,17 @@ const { t } = Astro.props;
       {t.items.map((item) => (
         <li class="reveal">
           <div
-            class="glass-dark group h-full p-6 md:p-7 transition-all duration-base ease-brand hover:-translate-y-0.5"
+            class="glass group h-full p-6 md:p-7 transition-all duration-base ease-brand hover:-translate-y-0.5"
             style="border-radius: 18px;"
           >
             <div class="flex items-start gap-5">
               <span
-                class="mono text-caption pt-1 transition-transform duration-base ease-brand group-hover:-translate-y-0.5"
-                style="color: #FF8D5C; min-width: 28px;"
+                class="mono text-caption text-orange pt-1 transition-transform duration-base ease-brand group-hover:-translate-y-0.5"
+                style="min-width: 28px;"
               >{item.n}</span>
               <div class="flex-1">
-                <h3 class="text-h3 text-cream font-semibold transition-colors duration-base ease-brand group-hover:text-orange-300">{item.title}</h3>
-                <p class="mt-2 text-body" style="color: rgba(248,243,235,0.74);">{item.body}</p>
+                <h3 class="text-h3 text-ink font-semibold transition-colors duration-base ease-brand group-hover:text-orange">{item.title}</h3>
+                <p class="mt-2 text-body text-steel">{item.body}</p>
               </div>
             </div>
           </div>
diff --git a/src/components/sections/Hero.astro b/src/components/sections/Hero.astro
index 8663beb..1f9dfa3 100644
--- a/src/components/sections/Hero.astro
+++ b/src/components/sections/Hero.astro
@@ -1,5 +1,7 @@
 ---
 import type { ui } from '@/i18n/ui';
+import HeroScrollScene from '@/components/ui/HeroScrollScene';
+import HeroProductFrames from '@/components/ui/HeroProductFrames';
 
 interface Props {
   t: typeof ui.es.hero;
@@ -21,15 +23,7 @@ const { t } = Astro.props;
   <div class="pattern-layer" aria-hidden="true" data-parallax="0.4"></div>
   <div class="grain" aria-hidden="true"></div>
 
-  <!-- Shared SVG defs: the Boxting cube as a reusable symbol -->
-  <svg class="hero-svg-defs" aria-hidden="true" focusable="false" width="0" height="0">
-    <defs>
-      <symbol id="bx-cube" viewBox="0 0 144 159">
-        <path d="M67 0.06C72.5-0.24 77.8 0.6 83 2.56C98 10.89 113 19.22 128 27.56C135.7 31.6 140.9 37.77 143.5 46.06C144.2 68.06 144.2 90.06 143.5 112.06C141.3 119.63 136.8 125.46 130 129.56C113.1 139.16 96.1 148.49 79 157.56C72.4 158.64 66.1 157.97 60 155.56C43.5 146.48 27.2 137.14 11 127.56C5.4 122.97 1.9 117.13 0.5 110.06C-0.17 89.06 -0.17 68.06 0.5 47.06C3.8 38.09 9.6 31.25 18 26.56C34.1 17.16 50.5 8.32 67 0.06Z" />
-      </symbol>
-    </defs>
-  </svg>
-
+  <HeroScrollScene client:load>
   <!-- ===== Top metadata ===== -->
   <div class="hero-coords">
     <span class="pulse" aria-hidden="true"></span>
@@ -41,113 +35,63 @@ const { t } = Astro.props;
     <span>{t.eyebrow}</span>
   </div>
 
-  <!-- ===== Main content grid ===== -->
+  <!-- ===== Main content grid — desktop (≥960px) ===== -->
   <div class="hero-content">
-    <!-- Left: pillar words -->
-    <div class="pillars-col">
-      <div class="pillar pillar-0">
-        <span class="pillar-icon" aria-hidden="true">
-          <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-            <use href="#bx-cube" x="4.8" y="2" width="54.4" height="60" fill="#0F1B2D" />
-            <!-- Inner diamond — design / geometry -->
-            <path d="M32 22 L42 32 L32 42 L22 32 Z" fill="#FFFDF9" opacity="0.95" />
-            <circle cx="32" cy="32" r="2.5" fill="#FE5D1C" />
+    <!-- Left: single message, single action -->
+    <div class="hero-message">
+      <h1 class="hero-headline">{t.aboutHeading}</h1>
+      <p class="hero-subhead">{t.aboutBody}</p>
+
+      <div class="hero-actions">
+        <a href={`mailto:${t.email}`} class="hero-cta" data-track-cta="hero-primary-cta">
+          {t.primaryCta}
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+            <path d="M2 7 H12 M12 7 L7.5 2.5 M12 7 L7.5 11.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" />
           </svg>
-        </span>
-        <span class="pillar-word">{t.pillars[0]}</span>
-      </div>
-
-      <div class="pillar pillar-1">
-        <span class="pillar-icon" aria-hidden="true">
-          <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-            <use href="#bx-cube" x="4.8" y="2" width="54.4" height="60" fill="#0F1B2D" />
-            <!-- Stacked construction layers -->
-            <rect x="20" y="22" width="24" height="4" rx="1" fill="#FE5D1C" />
-            <rect x="20" y="30" width="24" height="4" rx="1" fill="#FFFDF9" opacity="0.9" />
-            <rect x="20" y="38" width="24" height="4" rx="1" fill="#FFFDF9" opacity="0.6" />
-          </svg>
-        </span>
-        <span class="pillar-word">{t.pillars[1]}</span>
+        </a>
       </div>
+    </div>
 
-      <div class="pillar pillar-2">
-        <span class="pillar-icon" aria-hidden="true">
-          <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-            <use href="#bx-cube" x="4.8" y="2" width="54.4" height="60" fill="#0F1B2D" />
-            <!-- Live pulse dot -->
-            <circle cx="32" cy="32" r="9" fill="none" stroke="#FE5D1C" stroke-width="1.5" opacity="0.5" />
-            <circle cx="32" cy="32" r="5" fill="#FE5D1C" class="op-pulse" />
-          </svg>
-        </span>
-        <span class="pillar-word">{t.pillars[2]}</span>
-      </div>
+    <!-- Right: three layered product frames — mobile, web, AI agents -->
+    <div class="hero-visual" aria-hidden="true">
+      <HeroProductFrames client:load t={t.frames} />
     </div>
+  </div>
 
-    <!-- Right: about + services -->
-    <div class="about-col">
-      <h2 class="about-heading">{t.aboutHeading}</h2>
-      <p class="about-body">{t.aboutBody}</p>
-
-      <div class="service-grid">
-        <!-- Mobile -->
-        <div class="service-card glass-soft service-0">
-          <span class="service-icon" aria-hidden="true">
-            <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-              <use href="#bx-cube" x="3.6" y="1.5" width="40.8" height="45" fill="#FE5D1C" />
-              <rect x="18" y="14" width="12" height="20" rx="2.5" fill="none" stroke="#FFFDF9" stroke-width="1.6" />
-              <line x1="21" y1="30" x2="27" y2="30" stroke="#FFFDF9" stroke-width="1.4" stroke-linecap="round" />
-            </svg>
-          </span>
-          <p class="service-label">{t.services[0].label}</p>
-          <p class="service-body">{t.services[0].body}</p>
-        </div>
-
-        <!-- Web -->
-        <div class="service-card glass-soft service-1">
-          <span class="service-icon" aria-hidden="true">
-            <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-              <use href="#bx-cube" x="3.6" y="1.5" width="40.8" height="45" fill="#FE5D1C" />
-              <rect x="14" y="16" width="20" height="14" rx="2" fill="none" stroke="#FFFDF9" stroke-width="1.5" />
-              <line x1="14" y1="20" x2="34" y2="20" stroke="#FFFDF9" stroke-width="1.5" />
-              <circle cx="17" cy="18" r="0.9" fill="#0F1B2D" />
-              <circle cx="19.5" cy="18" r="0.9" fill="#FFFDF9" opacity="0.85" />
-              <circle cx="22" cy="18" r="0.9" fill="#FFFDF9" opacity="0.55" />
-            </svg>
-          </span>
-          <p class="service-label">{t.services[1].label}</p>
-          <p class="service-body">{t.services[1].body}</p>
-        </div>
-
-        <!-- Automatización -->
-        <div class="service-card glass-soft service-2">
-          <span class="service-icon" aria-hidden="true">
-            <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-              <use href="#bx-cube" x="3.6" y="1.5" width="40.8" height="45" fill="#FE5D1C" />
-              <!-- Sparkle / agent dot cluster -->
-              <path d="M24 14 L26 22 L34 24 L26 26 L24 34 L22 26 L14 24 L22 22 Z" fill="#FFFDF9" />
-              <circle cx="32" cy="16" r="1.6" fill="#FFFDF9" opacity="0.85" />
-              <circle cx="16" cy="32" r="1.2" fill="#FFFDF9" opacity="0.65" />
-            </svg>
-          </span>
-          <p class="service-label">{t.services[2].label}</p>
-          <p class="service-body">{t.services[2].body}</p>
-        </div>
-
-        <!-- Consultoría -->
-        <div class="service-card glass-soft service-3">
-          <span class="service-icon" aria-hidden="true">
-            <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-              <use href="#bx-cube" x="3.6" y="1.5" width="40.8" height="45" fill="#FE5D1C" />
-              <path d="M14 18 H30 a3 3 0 0 1 3 3 v6 a3 3 0 0 1 -3 3 H22 L17 33 V30 H14 a0 0 0 0 1 0 0 V18 a0 0 0 0 1 0 0 Z" fill="none" stroke="#FFFDF9" stroke-width="1.5" stroke-linejoin="round" />
-              <circle cx="20" cy="24" r="1.1" fill="#0F1B2D" />
-              <circle cx="24" cy="24" r="1.1" fill="#FFFDF9" />
-              <circle cx="28" cy="24" r="1.1" fill="#FFFDF9" opacity="0.75" />
-            </svg>
-          </span>
-          <p class="service-label">{t.services[3].label}</p>
-          <p class="service-body">{t.services[3].body}</p>
-        </div>
-      </div>
+  <!-- ===== Billboard — mobile & tablet (<960px) =====
+       A punchier, single-focus restatement of the hero message for small
+       screens, where the two-column product-frame collage doesn't fit.
+       This h1 and the desktop one above are mutually exclusive via
+       display:none, so exactly one heading is ever in the accessibility
+       tree at a given width. -->
+  <div class="hero-billboard">
+    <h1 class="hero-billboard-headline">
+      <span>{t.pillars[0]}</span>
+      <span>{t.pillars[1]}</span>
+      <span class="accent">{t.pillars[2]}</span>
+    </h1>
+    <p class="hero-billboard-subhead">{t.aboutBody}</p>
+
+    <a href={`mailto:${t.email}`} class="hero-cta" data-track-cta="hero-primary-cta-mobile">
+      {t.primaryCta}
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+        <path d="M2 7 H12 M12 7 L7.5 2.5 M12 7 L7.5 11.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </a>
+
+    <div class="hero-billboard-glyphs" aria-hidden="true">
+      <span class="hero-glyph">
+        <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><rect x="3" y="1" width="10" height="14" rx="2.3" stroke="currentColor" stroke-width="1.3" /><line x1="6.2" y1="12.4" x2="9.8" y2="12.4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" /></svg>
+        <span class="mono">{t.frames.mobile.label}</span>
+      </span>
+      <span class="hero-glyph">
+        <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><rect x="1" y="2.5" width="14" height="11" rx="1.6" stroke="currentColor" stroke-width="1.3" /><line x1="1" y1="5.8" x2="15" y2="5.8" stroke="currentColor" stroke-width="1.3" /></svg>
+        <span class="mono">{t.frames.web.label}</span>
+      </span>
+      <span class="hero-glyph">
+        <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M8 1.5 L9.1 6 L13.5 7 L9.1 8 L8 12.5 L6.9 8 L2.5 7 L6.9 6 Z" fill="#FE5D1C" /></svg>
+        <span class="mono">{t.frames.ai.label}</span>
+      </span>
     </div>
   </div>
 
@@ -160,6 +104,7 @@ const { t } = Astro.props;
     </span>
     <span class="scroll-hint">{t.scrollHint}</span>
   </a>
+  </HeroScrollScene>
 </section>
 
 <style>
@@ -179,12 +124,19 @@ const { t } = Astro.props;
     }
   }
 
-  /* Hidden but reachable: shared svg defs */
-  .hero-svg-defs {
+  /* Foreground wrapper — scroll-scrubbed by HeroScrollScene (scale/opacity/y).
+     Absolute + inset:0 so it becomes the positioning context for the
+     coords/eyebrow/content/scroll-indicator children that used to be
+     positioned against .hero directly.
+     :global() because this element is rendered by the HeroScrollScene
+     React island, not Astro markup — Astro's style scoping (the
+     data-astro-cid attribute) never reaches elements a framework
+     component renders client-side, so a scoped selector here would
+     silently never match. */
+  :global(.hero-fg) {
     position: absolute;
-    width: 0;
-    height: 0;
-    pointer-events: none;
+    inset: 0;
+    z-index: 8;
   }
 
   /* Layer 1: tint */
@@ -289,181 +241,151 @@ const { t } = Astro.props;
     position: relative;
     z-index: 8;
     width: 100%;
+    max-width: 1680px;
+    margin: 0 auto;
     box-sizing: border-box;
     height: 100%;
     display: grid;
-    grid-template-columns: 1.15fr 1fr;
-    gap: clamp(32px, 5vw, 96px);
+    grid-template-columns: 0.85fr 1.15fr;
+    gap: clamp(32px, 4vw, 72px);
     align-items: center;
     padding: clamp(96px, 14vh, 140px) var(--pad-x) clamp(96px, 14vh, 140px);
   }
 
+  /* Below 960px the two-column product-frame layout doesn't have room to
+     breathe, so it hands off entirely to .hero-billboard (see below). */
   @media (max-width: 960px) {
-    .hero-content {
-      grid-template-columns: minmax(0, 1fr);
-      gap: 40px;
-      align-content: start;
-      padding: clamp(140px, 20vh, 180px) var(--pad-x) clamp(72px, 10vh, 96px);
-    }
-  }
-
-  /* On narrow screens the eyebrow pill wraps to 2 lines — give the pillar
-     words extra headroom so they don't collide with it. */
-  @media (max-width: 480px) {
-    .hero-content {
-      padding-top: clamp(168px, 26vh, 210px);
-    }
+    .hero-content { display: none; }
   }
 
-  /* ===== Pillars (left column) ===== */
-  .pillars-col {
+  /* ===== Message (left column) ===== */
+  .hero-message {
     display: flex;
     flex-direction: column;
-    gap: clamp(14px, 2.4vh, 28px);
     min-width: 0;
-  }
-  .pillar {
-    display: flex;
-    align-items: center;
-    gap: clamp(16px, 2.2vw, 28px);
+    max-width: 640px;
     opacity: 0;
-    transform: translateY(18px);
-    animation: pillar-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
+    transform: translateY(16px);
+    animation: content-in 0.7s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
   }
-  .pillar-0 { animation-delay: 0.18s; }
-  .pillar-1 { animation-delay: 0.36s; }
-  .pillar-2 { animation-delay: 0.54s; }
 
-  @keyframes pillar-in {
-    from { opacity: 0; transform: translateY(18px); }
+  @keyframes content-in {
+    from { opacity: 0; transform: translateY(16px); }
     to   { opacity: 1; transform: translateY(0); }
   }
 
-  .pillar-icon {
-    flex-shrink: 0;
-    width: clamp(48px, 5vw, 72px);
-    height: clamp(48px, 5vw, 72px);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    filter: drop-shadow(0 8px 20px rgba(15, 27, 45, 0.18));
-  }
-  .pillar-icon svg { width: 100%; height: 100%; display: block; }
-
-  .pillar-word {
+  .hero-headline {
     font-family: 'DM Sans', system-ui, sans-serif;
     font-weight: 700;
     color: #0F1B2D;
-    font-size: clamp(34px, 7vw, 92px);
-    line-height: 1;
-    letter-spacing: -0.045em;
+    font-size: clamp(32px, 4.2vw, 52px);
+    line-height: 1.06;
+    letter-spacing: -0.03em;
+    margin: 0;
     text-wrap: balance;
-    min-width: 0;
   }
-  @media (max-width: 480px) {
-    .pillar { gap: 14px; }
-    .pillar-word { font-size: clamp(30px, 9vw, 44px); }
+  .hero-subhead {
+    font-size: clamp(15px, 1.15vw, 17px);
+    line-height: 1.6;
+    color: rgba(15, 27, 45, 0.62);
+    margin: 24px 0 0;
+    max-width: 42ch;
   }
 
-  /* Live pulse for "Operamos" cube */
-  .op-pulse {
-    transform-origin: center;
-    transform-box: fill-box;
-    animation: op-pulse 2.4s ease-in-out infinite;
-  }
-  @keyframes op-pulse {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50%      { opacity: 0.55; transform: scale(0.86); }
+  .hero-actions { margin-top: 36px; }
+  .hero-cta {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    background: #0F1B2D;
+    color: #FFFDF9;
+    font-family: 'DM Sans', system-ui, sans-serif;
+    font-size: 15px;
+    font-weight: 600;
+    text-decoration: none;
+    padding: 15px 24px;
+    border-radius: 999px;
+    transition: opacity 0.2s ease, transform 0.2s ease;
   }
+  .hero-cta:hover { opacity: 0.86; }
+  .hero-cta:active { transform: scale(0.98); }
 
-  /* ===== About + services (right column) ===== */
-  .about-col {
+  /* ===== Product frames (right column) ===== */
+  .hero-visual {
     display: flex;
-    flex-direction: column;
-    gap: 20px;
+    align-items: center;
+    justify-content: center;
     min-width: 0;
-    max-width: 520px;
-    opacity: 0;
-    transform: translateY(14px);
-    animation: pillar-in 0.7s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
+  }
+
+  /* ===== Billboard — mobile & tablet (<960px) ===== */
+  .hero-billboard {
+    display: none;
   }
   @media (max-width: 960px) {
-    .about-col {
-      max-width: none;
+    .hero-billboard {
+      position: relative;
+      z-index: 8;
       width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: clamp(140px, 20vh, 180px) var(--pad-x) clamp(96px, 12vh, 120px);
+      opacity: 0;
+      transform: translateY(16px);
+      animation: content-in 0.7s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
     }
   }
+  /* On narrow screens the eyebrow pill wraps to 2 lines — give the
+     billboard extra headroom so it doesn't collide with it. */
+  @media (max-width: 480px) {
+    .hero-billboard { padding-top: clamp(168px, 26vh, 210px); }
+  }
 
-  .about-heading {
+  .hero-billboard-headline {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
     font-family: 'DM Sans', system-ui, sans-serif;
-    font-size: clamp(18px, 1.5vw, 22px);
-    line-height: 1.3;
-    letter-spacing: -0.015em;
-    font-weight: 600;
+    font-weight: 700;
     color: #0F1B2D;
-    margin: 0;
-    text-wrap: balance;
+    font-size: clamp(38px, 12vw, 64px);
+    line-height: 1.02;
+    letter-spacing: -0.04em;
   }
-  .about-body {
-    font-size: clamp(14px, 1.05vw, 15.5px);
-    line-height: 1.55;
+  .hero-billboard-headline .accent { color: #FE5D1C; }
+
+  .hero-billboard-subhead {
+    margin: 24px 0 0;
+    font-size: clamp(15px, 3.6vw, 17px);
+    line-height: 1.6;
     color: rgba(15, 27, 45, 0.62);
-    margin: 0;
-    max-width: 44ch;
+    max-width: 38ch;
   }
 
-  .service-grid {
-    margin-top: 8px;
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 12px;
-  }
-  .service-card {
+  .hero-billboard .hero-cta { margin-top: 32px; }
+
+  .hero-billboard-glyphs {
+    margin-top: 40px;
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
-    padding: 16px 16px 14px;
-    border-radius: 18px;
-    opacity: 0;
-    transform: translateY(14px);
-    animation: pillar-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
-    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
-  }
-  .service-card:hover {
-    transform: translateY(-2px);
-    border-color: rgba(15, 27, 45, 0.14) !important;
-    box-shadow: 0 16px 32px -18px rgba(15, 27, 45, 0.22);
-  }
-  .service-0 { animation-delay: 0.6s; }
-  .service-1 { animation-delay: 0.72s; }
-  .service-2 { animation-delay: 0.84s; }
-  .service-3 { animation-delay: 0.96s; }
-
-  .service-icon {
-    width: 40px;
-    height: 40px;
-    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    margin-bottom: 4px;
+    gap: 20px;
   }
-  .service-icon svg { width: 100%; height: 100%; display: block; }
-
-  .service-label {
-    font-family: 'DM Sans', system-ui, sans-serif;
-    font-weight: 600;
-    font-size: 15px;
-    letter-spacing: -0.01em;
-    color: #0F1B2D;
-    margin: 0;
+  .hero-glyph {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: rgba(15, 27, 45, 0.55);
   }
-  .service-body {
-    font-family: 'DM Mono', ui-monospace, Menlo, monospace;
+  .hero-glyph .mono {
     font-size: 11px;
-    letter-spacing: 0.04em;
-    color: rgba(15, 27, 45, 0.55);
-    margin: 0;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
   }
 
   /* ===== Scroll indicator ===== */
@@ -518,12 +440,10 @@ const { t } = Astro.props;
     .hero-coords .pulse,
     .hero-eyebrow .eyebrow-dot,
     .hero-eyebrow,
-    .pillar,
-    .about-col,
-    .service-card,
+    .hero-message,
+    .hero-billboard,
     .scroll-indicator,
-    .scroll-circle,
-    .op-pulse {
+    .scroll-circle {
       animation: none !important;
       opacity: 1 !important;
       transform: none !important;
diff --git a/src/components/sections/Manifesto.astro b/src/components/sections/Manifesto.astro
index b7a51dc..230c720 100644
--- a/src/components/sections/Manifesto.astro
+++ b/src/components/sections/Manifesto.astro
@@ -8,7 +8,11 @@ interface Props {
 const { t } = Astro.props;
 ---
 
-<section id="studio" class="relative border-t hairline border-t bg-cream py-10 md:py-10 overflow-hidden" data-track-section="manifesto">
+<section
+  id="studio"
+  class="relative bg-cream py-10 overflow-hidden"
+  data-track-section="manifesto"
+>
   <!-- Faint pattern wash -->
   <div aria-hidden="true" class="iso-pattern pointer-events-none absolute inset-0 opacity-40"></div>
   <div aria-hidden="true" class="pointer-events-none absolute inset-0 bg-gradient-to-b from-cream via-cream/85 to-cream"></div>
diff --git a/src/components/sections/Work.astro b/src/components/sections/Work.astro
index b77a801..9fd2363 100644
--- a/src/components/sections/Work.astro
+++ b/src/components/sections/Work.astro
@@ -1,10 +1,11 @@
 ---
-import { Image } from 'astro:assets';
+import { getImage } from 'astro:assets';
 import ava1 from '@assets/images/ava/AVA_iPhone_Image_1.png';
 import ava2 from '@assets/images/ava/AVA_iPhone_Image_2.png';
 import ava3 from '@assets/images/ava/AVA_iPhone_Image_3.png';
 import ava4 from '@assets/images/ava/AVA_iPhone_Image_4.png';
 import type { ui } from '@/i18n/ui';
+import StickyWorkShowcase from '@/components/ui/StickyWorkShowcase';
 
 interface Props {
   t: typeof ui.es.work;
@@ -12,15 +13,40 @@ interface Props {
 
 const { t } = Astro.props;
 const avaShots = [ava1, ava2, ava3, ava4];
+const avaOptimized = await Promise.all(avaShots.map((src) => getImage({ src, width: 400 })));
 
-const accentMap = {
-  plum: { tint: 'rgba(110,47,102,0.10)', label: 'text-plum' },
-  sky: { tint: 'rgba(43,92,230,0.10)', label: 'text-sky' },
-  orange: { tint: 'rgba(254,93,28,0.10)', label: 'text-orange' },
-} as const;
+const projects = [
+  {
+    key: 'ava-cash',
+    client: t.featured.client,
+    title: t.featured.title,
+    industry: t.featured.industry,
+    role: t.featured.role,
+    year: t.featured.year,
+    outcome: t.featured.outcome,
+    accent: 'orange' as const,
+    images: avaOptimized.map((img) => img.src),
+    techStack: t.featured.techStack,
+  },
+  ...t.projects.map((p) => ({
+    key: p.title,
+    client: p.client,
+    title: p.title,
+    industry: p.industry,
+    role: p.role,
+    year: p.year,
+    outcome: p.outcome,
+    accent: p.accent as 'plum' | 'sky' | 'orange',
+    techStack: p.techStack,
+  })),
+];
 ---
 
-<section id="work" class="py-9 md:py-10" data-track-section="work">
+<section
+  id="work"
+  class="py-9 md:py-10"
+  data-track-section="work"
+>
   <div class="page" data-stagger="80">
     <!-- Section header -->
     <div class="grid grid-cols-12 gap-y-6 md:gap-x-6 items-end mb-8 md:mb-9">
@@ -40,111 +66,6 @@ const accentMap = {
       </div>
     </div>
 
-    <!-- Featured: Ava Cash -->
-    <article class="reveal grid grid-cols-12 gap-0 border hairline border rounded-lg bg-cream overflow-hidden lift">
-      <!-- Gallery -->
-      <div class="col-span-12 lg:col-span-7 relative bg-ink p-6 md:p-7">
-        <div class="flex items-center justify-between mb-5">
-          <p class="mono text-caption text-orange-300">{t.featured.client}</p>
-          <p class="mono text-caption text-cream/40">{t.featured.year}</p>
-        </div>
-
-        <div class="flex gap-4 overflow-x-auto pb-2 -mx-2 px-2 snap-x snap-mandatory scrollbar-thin">
-          {avaShots.map((shot, i) => (
-            <div class="snap-center shrink-0 w-[180px] sm:w-[200px] lg:w-[220px] aspect-[9/19] rounded-md overflow-hidden bg-cream/5 transition-transform duration-base ease-brand hover:-translate-y-1">
-              <Image
-                src={shot}
-                alt={`Ava Cash · vista ${i + 1}`}
-                widths={[200, 400]}
-                sizes="220px"
-                class="w-full h-full object-cover object-top"
-                loading={i === 0 ? 'eager' : 'lazy'}
-              />
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <!-- Copy -->
-      <div class="col-span-12 lg:col-span-5 p-6 md:p-7 flex flex-col">
-        <h3 class="text-h2 text-ink font-semibold" style="font-size: 36px; letter-spacing: -0.03em;">{t.featured.title}</h3>
-
-        <p class="mt-5 text-body text-steel">{t.featured.outcome}</p>
-
-        <!-- Meta dl -->
-        <dl class="mt-auto pt-6 mt-7 grid grid-cols-1 gap-y-3 border-t hairline border-t">
-          <div class="flex items-baseline justify-between gap-5">
-            <dt class="mono text-caption text-fog shrink-0">{t.metaLabels.industry}</dt>
-            <dd class="text-small text-ink text-right">{t.featured.industry}</dd>
-          </div>
-          <div class="flex items-baseline justify-between gap-5">
-            <dt class="mono text-caption text-fog shrink-0">{t.metaLabels.role}</dt>
-            <dd class="text-small text-ink text-right">{t.featured.role}</dd>
-          </div>
-          <div class="flex items-baseline justify-between gap-5 mt-2">
-            <dt class="mono text-caption text-fog shrink-0">Stack</dt>
-            <dd class="flex gap-2 flex-wrap justify-end">
-              {t.featured.techStack.map(tech => (
-                <span class="inline-flex items-center rounded-full bg-cream/80 px-2 py-0.5 text-xs font-medium text-steel ring-1 ring-inset ring-fog/20">
-                  {tech}
-                </span>
-              ))}
-            </dd>
-          </div>
-        </dl>
-      </div>
-    </article>
-
-    <!-- Editorial cards: Jalhuca + New Transport -->
-    <ul class="mt-7 grid grid-cols-1 md:grid-cols-2 gap-6">
-      {t.projects.map((p) => {
-        const accent = accentMap[p.accent as keyof typeof accentMap] ?? accentMap.orange;
-        return (
-          <li class="reveal">
-            <article
-              class="group lift glass relative h-full rounded-lg p-6 md:p-7 overflow-hidden hover:shadow-3"
-              style="border-radius: 18px;"
-            >
-              <!-- Iso pattern tinted by accent, sitting *behind* the glass so it shows through -->
-              <div
-                aria-hidden="true"
-                class="iso-pattern absolute inset-0 -z-10 opacity-70 group-hover:opacity-95 transition-opacity duration-base ease-brand"
-                style={`background-color: ${accent.tint};`}
-              ></div>
-
-              <div class="relative">
-                <div class="flex items-baseline justify-between gap-4">
-                  <p class={`mono text-caption ${accent.label}`}>{p.client}</p>
-                  <span class="mono text-caption text-fog shrink-0">{p.year}</span>
-                </div>
-                <h3 class="mt-4 text-ink font-semibold" style="font-size: 30px; line-height: 1.1; letter-spacing: -0.028em;">{p.title}</h3>
-                <p class="mt-4 text-body text-steel max-w-prose">{p.outcome}</p>
-
-                <dl class="mt-6 pt-5 grid grid-cols-1 gap-2 border-t hairline border-t">
-                  <div class="flex items-baseline justify-between gap-5">
-                    <dt class="mono text-caption text-fog shrink-0">{t.metaLabels.industry}</dt>
-                    <dd class="text-small text-ink text-right">{p.industry}</dd>
-                  </div>
-                  <div class="flex items-baseline justify-between gap-5">
-                    <dt class="mono text-caption text-fog shrink-0">{t.metaLabels.role}</dt>
-                    <dd class="text-small text-ink text-right">{p.role}</dd>
-                  </div>
-                  <div class="flex items-baseline justify-between gap-5 mt-2">
-                    <dt class="mono text-caption text-fog shrink-0">Stack</dt>
-                    <dd class="flex gap-2 flex-wrap justify-end">
-                      {p.techStack.map(tech => (
-                        <span class="inline-flex items-center rounded-full bg-cream/80 px-2 py-0.5 text-xs font-medium text-steel ring-1 ring-inset ring-fog/20">
-                          {tech}
-                        </span>
-                      ))}
-                    </dd>
-                  </div>
-                </dl>
-              </div>
-            </article>
-          </li>
-        );
-      })}
-    </ul>
+    <StickyWorkShowcase client:visible projects={projects} metaLabels={t.metaLabels} />
   </div>
 </section>
diff --git a/src/components/ui/HeroProductFrames.tsx b/src/components/ui/HeroProductFrames.tsx
new file mode 100644
index 0000000..0b76086
--- /dev/null
+++ b/src/components/ui/HeroProductFrames.tsx
@@ -0,0 +1,222 @@
+import * as React from 'react';
+import { motion, useReducedMotion, type Variants } from 'framer-motion';
+
+interface FrameCopy {
+  web: { label: string; badge: string };
+  ai: { label: string; badge: string };
+  mobile: { label: string; appStore: string; googlePlay: string };
+}
+
+interface HeroProductFramesProps {
+  t: FrameCopy;
+}
+
+const SPRING = { type: 'spring' as const, stiffness: 260, damping: 24 };
+
+const containerVariants: Variants = {
+  hidden: {},
+  visible: {
+    transition: { staggerChildren: 0.22, delayChildren: 0.25 },
+  },
+};
+
+const frameVariants: Variants = {
+  hidden: { opacity: 0, y: 28, scale: 0.94 },
+  visible: { opacity: 1, y: 0, scale: 1, transition: SPRING },
+};
+
+const badgeVariants: Variants = {
+  hidden: { opacity: 0, y: 8, scale: 0.9 },
+  visible: { opacity: 1, y: 0, scale: 1, transition: { ...SPRING, delay: 0.18 } },
+};
+
+function Badge({ children, style }: { children: React.ReactNode; style?: React.CSSProperties }) {
+  return (
+    <motion.div
+      variants={badgeVariants}
+      className="mono"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
+        background: '#FFFDF9',
+        border: '1px solid rgba(15,27,45,0.08)',
+        borderRadius: 999,
+        padding: '8px 14px',
+        fontSize: 12,
+        fontWeight: 500,
+        letterSpacing: '0.05em',
+        textTransform: 'uppercase',
+        color: '#0F1B2D',
+        whiteSpace: 'nowrap',
+        boxShadow: '0 14px 28px -14px rgba(15,27,45,0.4)',
+        zIndex: 10,
+        ...style,
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export default function HeroProductFrames({ t }: HeroProductFramesProps) {
+  const prefersReducedMotion = useReducedMotion();
+  const initial = prefersReducedMotion ? 'visible' : 'hidden';
+
+  return (
+    <motion.div
+      initial={initial}
+      animate="visible"
+      variants={containerVariants}
+      style={{ position: 'relative', width: '100%', maxWidth: 860, aspectRatio: '860 / 720', margin: '0 auto' }}
+    >
+      {/* Web — browser window, back layer */}
+      <motion.div
+        variants={frameVariants}
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: '20%',
+          width: '58%',
+          aspectRatio: '340 / 210',
+          transform: 'rotate(-3deg)',
+        }}
+      >
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            background: '#0F1B2D',
+            borderRadius: 18,
+            boxShadow: '0 34px 70px -28px rgba(15,27,45,0.4)',
+            overflow: 'hidden',
+          }}
+        >
+          <div
+            style={{
+              height: '19%',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 7,
+              padding: '0 14px',
+              background: 'rgba(255,253,249,0.06)',
+              borderBottom: '1px solid rgba(255,253,249,0.08)',
+            }}
+          >
+            <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#FE5D1C' }} />
+            <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#ECE5D5' }} />
+            <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#4FA98A' }} />
+          </div>
+          <div style={{ padding: 14, display: 'flex', gap: 10, height: '81%', boxSizing: 'border-box' }}>
+            <div style={{ width: '22%', borderRadius: 9, background: 'rgba(255,253,249,0.08)' }} />
+            <div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: 7 }}>
+              <div style={{ width: '40%', height: 7, borderRadius: 4, background: 'rgba(255,253,249,0.85)' }} />
+              <div
+                style={{
+                  width: '100%',
+                  flexGrow: 1,
+                  borderRadius: 9,
+                  marginTop: 4,
+                  background: 'linear-gradient(135deg, #2B5CE6 0%, rgba(43,92,230,0.22) 100%)',
+                }}
+              />
+              <div style={{ width: '100%', height: '18%', borderRadius: 7, background: 'rgba(255,253,249,0.08)' }} />
+            </div>
+          </div>
+        </div>
+        <Badge style={{ position: 'absolute', bottom: -18, right: -14 }}>{t.web.badge}</Badge>
+      </motion.div>
+
+      {/* AI agents — assistant card, top layer */}
+      <motion.div
+        variants={frameVariants}
+        style={{
+          position: 'absolute',
+          left: '22%',
+          top: 0,
+          width: '38%',
+          aspectRatio: '220 / 170',
+          background: '#FFFDF9',
+          border: '1px solid rgba(15,27,45,0.08)',
+          borderRadius: 18,
+          padding: '9% 8%',
+          boxShadow: '0 26px 54px -22px rgba(15,27,45,0.32)',
+          transform: 'rotate(2deg)',
+          zIndex: 3,
+          boxSizing: 'border-box',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 7 }}>
+          <svg width="15" height="15" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, marginTop: 1 }}>
+            <path d="M8 1.5 L9.1 6 L13.5 7 L9.1 8 L8 12.5 L6.9 8 L2.5 7 L6.9 6 Z" fill="#6E2F66" />
+          </svg>
+          <span
+            className="mono"
+            style={{ fontSize: 11, letterSpacing: '0.07em', textTransform: 'uppercase', color: '#6E2F66', lineHeight: 1.4 }}
+          >
+            {t.ai.label}
+          </span>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 12 }}>
+          <div style={{ alignSelf: 'flex-start', width: '75%', height: 14, borderRadius: '8px 8px 8px 2px', background: 'rgba(15,27,45,0.07)' }} />
+          <div style={{ alignSelf: 'flex-end', width: '58%', height: 14, borderRadius: '8px 8px 2px 8px', background: '#6E2F66' }} />
+          <div style={{ alignSelf: 'flex-start', width: '85%', height: 14, borderRadius: '8px 8px 8px 2px', background: 'rgba(15,27,45,0.07)' }} />
+        </div>
+        <Badge style={{ position: 'absolute', bottom: -18, left: -12 }}>{t.ai.badge}</Badge>
+      </motion.div>
+
+      {/* Mobile — phone frame, front layer */}
+      <motion.div
+        variants={frameVariants}
+        style={{
+          position: 'absolute',
+          right: 0,
+          bottom: '4%',
+          width: '36%',
+          aspectRatio: '220 / 440',
+          background: '#0F1B2D',
+          borderRadius: 28,
+          padding: '5%',
+          boxShadow: '0 34px 70px -24px rgba(15,27,45,0.45)',
+          transform: 'rotate(5deg)',
+          zIndex: 2,
+          boxSizing: 'border-box',
+        }}
+      >
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            background: 'linear-gradient(160deg, #FE5D1C 0%, #0F1B2D 68%)',
+            borderRadius: 18,
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 10,
+            padding: '10% 8%',
+            boxSizing: 'border-box',
+          }}
+        >
+          <div style={{ width: '34%', height: 7, borderRadius: 4, background: 'rgba(255,253,249,0.9)' }} />
+          <div style={{ width: '100%', height: '24%', borderRadius: 12, marginTop: 8, background: 'rgba(255,253,249,0.14)' }} />
+          <div style={{ width: '100%', height: '10%', borderRadius: 9, background: 'rgba(255,253,249,0.1)' }} />
+          <div style={{ width: '100%', height: '10%', borderRadius: 9, background: 'rgba(255,253,249,0.1)' }} />
+        </div>
+        <div
+          style={{
+            position: 'absolute',
+            bottom: -18,
+            right: -8,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8,
+            alignItems: 'flex-end',
+          }}
+        >
+          <Badge style={{ position: 'static' }}>{t.mobile.appStore}</Badge>
+          <Badge style={{ position: 'static' }}>{t.mobile.googlePlay}</Badge>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}
diff --git a/src/components/ui/HeroScrollScene.tsx b/src/components/ui/HeroScrollScene.tsx
new file mode 100644
index 0000000..143c911
--- /dev/null
+++ b/src/components/ui/HeroScrollScene.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { motion, useReducedMotion, useScroll, useTransform } from 'framer-motion';
+
+interface HeroScrollSceneProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Wraps the hero's foreground content and scrubs it out (scale/opacity/y)
+ * as the hero section scrolls past the top of the viewport. Targets its
+ * own root element, so it must be the only thing occupying the hero's
+ * content box (see `.hero-fg { position: absolute; inset: 0; }`).
+ */
+export default function HeroScrollScene({ children }: HeroScrollSceneProps) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const prefersReducedMotion = useReducedMotion();
+
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ['start start', 'end start'],
+  });
+
+  const scale = useTransform(scrollYProgress, [0, 0.5, 1], [1, 1, 0.92]);
+  const opacity = useTransform(scrollYProgress, [0, 0.55, 1], [1, 1, 0]);
+  const y = useTransform(scrollYProgress, [0, 0.5, 1], [0, 0, -48]);
+
+  if (prefersReducedMotion) {
+    return (
+      <div ref={ref} className="hero-fg">
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <motion.div ref={ref} className="hero-fg" style={{ scale, opacity, y }}>
+      {children}
+    </motion.div>
+  );
+}
diff --git a/src/components/ui/SpringCard.tsx b/src/components/ui/SpringCard.tsx
new file mode 100644
index 0000000..b73ccf0
--- /dev/null
+++ b/src/components/ui/SpringCard.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+interface SpringCardProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const SPRING = { type: 'spring' as const, stiffness: 400, damping: 30 };
+
+/**
+ * Generic hover/tap wrapper that adds spring-physics weight to a card.
+ * Drop-in replacement for a plain div; visual styling stays in the
+ * caller's className (border, radius, background, etc.).
+ */
+export default function SpringCard({ className, children }: SpringCardProps) {
+  const prefersReducedMotion = useReducedMotion();
+
+  if (prefersReducedMotion) {
+    return <div className={className}>{children}</div>;
+  }
+
+  return (
+    <motion.div
+      className={className}
+      whileHover={{ y: -6, scale: 1.02 }}
+      whileTap={{ scale: 0.98 }}
+      transition={SPRING}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/src/components/ui/StickyWorkShowcase.tsx b/src/components/ui/StickyWorkShowcase.tsx
new file mode 100644
index 0000000..335f869
--- /dev/null
+++ b/src/components/ui/StickyWorkShowcase.tsx
@@ -0,0 +1,358 @@
+import * as React from 'react';
+import {
+  motion,
+  useMotionValueEvent,
+  useReducedMotion,
+  useScroll,
+  useTransform,
+} from 'framer-motion';
+
+export interface WorkProject {
+  key: string;
+  client: string;
+  title: string;
+  industry: string;
+  role: string;
+  year: string;
+  outcome: string;
+  accent: 'plum' | 'sky' | 'orange';
+  images?: string[];
+  techStack: string[];
+}
+
+interface MetaLabels {
+  industry: string;
+  role: string;
+}
+
+interface StickyWorkShowcaseProps {
+  projects: WorkProject[];
+  metaLabels: MetaLabels;
+}
+
+const ACCENT_TEXT: Record<WorkProject['accent'], string> = {
+  plum: 'text-plum',
+  sky: 'text-sky',
+  orange: 'text-orange',
+};
+
+const ACCENT_BG: Record<WorkProject['accent'], string> = {
+  plum: '#6E2F66',
+  sky: '#2B5CE6',
+  orange: '#FE5D1C',
+};
+
+const SPRING = { type: 'spring' as const, stiffness: 400, damping: 30 };
+
+function useIsDesktop() {
+  const [isDesktop, setIsDesktop] = React.useState(false);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia('(min-width: 1024px)');
+    const update = () => setIsDesktop(mql.matches);
+    update();
+    mql.addEventListener('change', update);
+    return () => mql.removeEventListener('change', update);
+  }, []);
+
+  return isDesktop;
+}
+
+/* ===== Static fallback — mobile & reduced-motion ===== */
+function WorkFallbackList({ projects, metaLabels }: StickyWorkShowcaseProps) {
+  return (
+    <div className="flex flex-col gap-6">
+      {projects.map((p) => (
+        <article
+          key={p.key}
+          className="lift glass relative overflow-hidden rounded-lg p-6 md:p-7"
+          style={{ borderRadius: 18 }}
+        >
+          <div
+            aria-hidden="true"
+            className="iso-pattern pointer-events-none absolute inset-0 -z-10 opacity-70"
+            style={{ backgroundColor: `${ACCENT_BG[p.accent]}1a` }}
+          />
+          {p.images?.[0] && (
+            <img
+              src={p.images[0]}
+              alt=""
+              aria-hidden="true"
+              className="mb-5 h-40 w-auto rounded-md object-cover object-top shadow-2"
+            />
+          )}
+          <div className="flex items-baseline justify-between gap-4">
+            <p className={`mono text-caption ${ACCENT_TEXT[p.accent]}`}>{p.client}</p>
+            <span className="mono text-caption text-fog shrink-0">{p.year}</span>
+          </div>
+          <h3
+            className="mt-4 text-ink font-semibold"
+            style={{ fontSize: 30, lineHeight: 1.1, letterSpacing: '-0.028em' }}
+          >
+            {p.title}
+          </h3>
+          <p className="mt-4 text-body text-steel max-w-prose">{p.outcome}</p>
+          <dl className="hairline mt-6 grid grid-cols-1 gap-2 border-t pt-5">
+            <div className="flex items-baseline justify-between gap-5">
+              <dt className="mono text-caption text-fog shrink-0">{metaLabels.industry}</dt>
+              <dd className="text-small text-ink text-right">{p.industry}</dd>
+            </div>
+            <div className="flex items-baseline justify-between gap-5">
+              <dt className="mono text-caption text-fog shrink-0">{metaLabels.role}</dt>
+              <dd className="text-small text-ink text-right">{p.role}</dd>
+            </div>
+            <div className="flex items-baseline justify-between gap-5 mt-2">
+              <dt className="mono text-caption text-fog shrink-0">Stack</dt>
+              <dd className="flex gap-2 flex-wrap justify-end">
+                {p.techStack.map((tech) => (
+                  <span
+                    key={tech}
+                    className="inline-flex items-center rounded-full bg-cream/80 px-2 py-0.5 text-xs font-medium text-steel ring-1 ring-inset ring-fog/20"
+                  >
+                    {tech}
+                  </span>
+                ))}
+              </dd>
+            </div>
+          </dl>
+        </article>
+      ))}
+    </div>
+  );
+}
+
+/* ===== Pinned scroll-driven showcase — desktop ===== */
+function PinnedShowcase({ projects, metaLabels }: StickyWorkShowcaseProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const n = projects.length;
+
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ['start start', 'end end'],
+  });
+
+  useMotionValueEvent(scrollYProgress, 'change', (v) => {
+    const idx = Math.min(n - 1, Math.max(0, Math.floor(v * n)));
+    setActiveIndex((prev) => (prev === idx ? prev : idx));
+  });
+
+  return (
+    <div ref={containerRef} style={{ height: `${n * 100}vh` }} className="relative">
+      <div className="sticky top-0 h-screen overflow-hidden">
+        <div className="page grid h-full grid-cols-12 items-center gap-6 py-8">
+          {/* Pinned visual */}
+          <div className="col-span-6 relative h-[68vh]">
+            {projects.map((p, i) => (
+              <ProjectVisual
+                key={p.key}
+                project={p}
+                index={i}
+                n={n}
+                scrollYProgress={scrollYProgress}
+              />
+            ))}
+          </div>
+
+          {/* Sliding detail pane */}
+          <div className="col-span-6 relative h-[68vh]">
+            {projects.map((p, i) => (
+              <ProjectDetail
+                key={p.key}
+                project={p}
+                index={i}
+                n={n}
+                metaLabels={metaLabels}
+                scrollYProgress={scrollYProgress}
+              />
+            ))}
+
+            {/* Progress rail */}
+            <div className="absolute -left-8 top-1/2 hidden -translate-y-1/2 flex-col gap-3 lg:flex">
+              {projects.map((p, i) => (
+                <div key={p.key} className="relative h-2 w-2">
+                  {activeIndex === i && (
+                    <motion.span
+                      layoutId="work-active-dot"
+                      className="absolute inset-0 rounded-full"
+                      style={{ backgroundColor: ACCENT_BG[p.accent] }}
+                      transition={SPRING}
+                    />
+                  )}
+                  {activeIndex !== i && (
+                    <span className="absolute inset-0 rounded-full bg-ink/15" />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function segmentRange(index: number, n: number) {
+  // Fade windows sit strictly inside each segment and touch neighbors only
+  // at the shared boundary point, so two panels are never both partially
+  // visible at once (which reads as garbled double-exposed text).
+  const pad = Math.min(0.05, 1 / n / 3);
+  const start = index / n;
+  const end = (index + 1) / n;
+  return {
+    fadeInStart: start,
+    fadeInEnd: start + pad,
+    fadeOutStart: end - pad,
+    fadeOutEnd: end,
+    isFirst: index === 0,
+    isLast: index === n - 1,
+  };
+}
+
+function ProjectVisual({
+  project,
+  index,
+  n,
+  scrollYProgress,
+}: {
+  project: WorkProject;
+  index: number;
+  n: number;
+  scrollYProgress: ReturnType<typeof useScroll>['scrollYProgress'];
+}) {
+  const { fadeInStart, fadeInEnd, fadeOutStart, fadeOutEnd, isFirst, isLast } = segmentRange(
+    index,
+    n
+  );
+  const opacity = useTransform(
+    scrollYProgress,
+    [fadeInStart, fadeInEnd, fadeOutStart, fadeOutEnd],
+    [isFirst ? 1 : 0, 1, 1, isLast ? 1 : 0]
+  );
+  const scale = useTransform(
+    scrollYProgress,
+    [fadeInStart, fadeInEnd, fadeOutStart, fadeOutEnd],
+    [0.96, 1, 1, 1.04]
+  );
+
+  return (
+    <motion.div
+      className="absolute inset-0 flex items-center justify-center overflow-hidden rounded-xl"
+      style={{ opacity, scale, backgroundColor: `${ACCENT_BG[project.accent]}14` }}
+    >
+      <div
+        aria-hidden="true"
+        className="iso-pattern absolute inset-0 opacity-60"
+        style={{ backgroundColor: `${ACCENT_BG[project.accent]}0d` }}
+      />
+      {project.images?.length ? (
+        <div className="relative flex gap-4 px-6">
+          {project.images.slice(0, 3).map((src, i) => (
+            <div
+              key={src}
+              className="w-[150px] shrink-0 overflow-hidden rounded-md bg-ink shadow-3"
+              style={{
+                aspectRatio: '9 / 19',
+                transform: `translateY(${i % 2 === 0 ? '0' : '18px'})`,
+              }}
+            >
+              <img src={src} alt="" className="h-full w-full object-cover object-top" />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <span
+          className="relative font-semibold"
+          style={{
+            fontFamily: "'DM Sans', system-ui, sans-serif",
+            fontSize: 'clamp(96px, 12vw, 180px)',
+            letterSpacing: '-0.04em',
+            color: ACCENT_BG[project.accent],
+            opacity: 0.9,
+          }}
+        >
+          {project.title.charAt(0)}
+        </span>
+      )}
+    </motion.div>
+  );
+}
+
+function ProjectDetail({
+  project,
+  index,
+  n,
+  metaLabels,
+  scrollYProgress,
+}: {
+  project: WorkProject;
+  index: number;
+  n: number;
+  metaLabels: MetaLabels;
+  scrollYProgress: ReturnType<typeof useScroll>['scrollYProgress'];
+}) {
+  const { fadeInStart, fadeInEnd, fadeOutStart, fadeOutEnd, isFirst, isLast } = segmentRange(
+    index,
+    n
+  );
+  const opacity = useTransform(
+    scrollYProgress,
+    [fadeInStart, fadeInEnd, fadeOutStart, fadeOutEnd],
+    [isFirst ? 1 : 0, 1, 1, isLast ? 1 : 0]
+  );
+  const y = useTransform(
+    scrollYProgress,
+    [fadeInStart, fadeInEnd, fadeOutStart, fadeOutEnd],
+    [24, 0, 0, -24]
+  );
+
+  return (
+    <motion.div className="absolute inset-0 flex flex-col justify-center" style={{ opacity, y }}>
+      <div className="flex items-baseline justify-between gap-4">
+        <p className={`mono text-caption ${ACCENT_TEXT[project.accent]}`}>{project.client}</p>
+        <span className="mono text-caption text-fog shrink-0">{project.year}</span>
+      </div>
+      <h3
+        className="mt-4 text-ink font-semibold"
+        style={{ fontSize: 'clamp(28px, 3vw, 40px)', lineHeight: 1.08, letterSpacing: '-0.03em' }}
+      >
+        {project.title}
+      </h3>
+      <p className="mt-5 text-body text-steel max-w-prose">{project.outcome}</p>
+      <dl className="hairline mt-7 grid grid-cols-1 gap-3 border-t pt-6">
+        <div className="flex items-baseline justify-between gap-5">
+          <dt className="mono text-caption text-fog shrink-0">{metaLabels.industry}</dt>
+          <dd className="text-small text-ink text-right">{project.industry}</dd>
+        </div>
+        <div className="flex items-baseline justify-between gap-5">
+          <dt className="mono text-caption text-fog shrink-0">{metaLabels.role}</dt>
+          <dd className="text-small text-ink text-right">{project.role}</dd>
+        </div>
+        <div className="flex items-baseline justify-between gap-5 mt-1">
+          <dt className="mono text-caption text-fog shrink-0">Stack</dt>
+          <dd className="flex gap-2 flex-wrap justify-end">
+            {project.techStack.map((tech) => (
+              <span
+                key={tech}
+                className="inline-flex items-center rounded-full bg-cream/80 px-2 py-0.5 text-xs font-medium text-steel ring-1 ring-inset ring-fog/20"
+              >
+                {tech}
+              </span>
+            ))}
+          </dd>
+        </div>
+      </dl>
+    </motion.div>
+  );
+}
+
+export default function StickyWorkShowcase({ projects, metaLabels }: StickyWorkShowcaseProps) {
+  const prefersReducedMotion = useReducedMotion();
+  const isDesktop = useIsDesktop();
+
+  if (prefersReducedMotion || !isDesktop) {
+    return <WorkFallbackList projects={projects} metaLabels={metaLabels} />;
+  }
+
+  return <PinnedShowcase projects={projects} metaLabels={metaLabels} />;
+}
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index c83bbff..6a5d111 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -24,13 +24,12 @@ export const ui = {
             pillars: ['Diseñamos.', 'Construimos.', 'Desplegamos.'],
             aboutHeading: 'Software de producto, IA aplicada y operación cuidada.',
             aboutBody: 'Un equipo pequeño y consistente que acompaña tu producto desde la idea hasta la operación en producción.',
-            services: [
-                { label: 'Mobile', body: 'iOS y Android' },
-                { label: 'Web', body: 'Apps y plataformas' },
-                { label: 'Automatización', body: 'Agentes e IA' },
-                { label: 'Consultoría', body: 'Equipos y arquitectura' },
-            ],
             scrollHint: 'Desplazar',
+            frames: {
+                web: { label: 'Web', badge: 'AWS · Producción' },
+                ai: { label: 'Agentes e IA', badge: 'Agentes · 24/7' },
+                mobile: { label: 'Mobile', appStore: 'App Store', googlePlay: 'Google Play' },
+            },
             meta: [
                 { label: 'Estudio', value: 'Lima, PE' },
                 { label: 'Fundado', value: '2018' },
@@ -165,13 +164,12 @@ export const ui = {
             pillars: ['We design.', 'We build.', 'We ship.'],
             aboutHeading: 'Product software, applied AI, and operations done with care.',
             aboutBody: 'A small, consistent team that stays with your product from the first decision to running it in production.',
-            services: [
-                { label: 'Mobile', body: 'iOS and Android' },
-                { label: 'Web', body: 'Apps and platforms' },
-                { label: 'Automation', body: 'AI and agents' },
-                { label: 'Consulting', body: 'Teams and architecture' },
-            ],
             scrollHint: 'Scroll',
+            frames: {
+                web: { label: 'Web', badge: 'AWS · Production' },
+                ai: { label: 'AI agents', badge: 'Agents · 24/7' },
+                mobile: { label: 'Mobile', appStore: 'App Store', googlePlay: 'Google Play' },
+            },
             meta: [
                 { label: 'Studio', value: 'Lima, PE' },
                 { label: 'Founded', value: '2018' },
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index cdee2b7..49f1bd3 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -2,6 +2,7 @@
 import '@/styles/globals.css';
 import { ClientRouter } from 'astro:transitions';
 import ConsentBanner from '@/components/ConsentBanner.astro';
+import SmoothScroll from '@/components/SmoothScroll.astro';
 
 interface Props {
   title?: string;
@@ -29,7 +30,7 @@ const spanishKeywords =
 ---
 
 <!doctype html>
-<html lang={lang} class="scroll-smooth">
+<html lang={lang}>
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -106,6 +107,7 @@ const spanishKeywords =
     <ClientRouter fallback="animate" />
   </head>
   <body class="min-h-screen bg-paper font-sans text-ink antialiased" transition:animate="fade">
+    <SmoothScroll />
     <slot />
     <ConsentBanner lang={lang === 'en' ? 'en' : 'es'} />
 
diff --git a/yarn.lock b/yarn.lock
index 80307d6..539fa63 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3480,6 +3480,7 @@ __metadata:
     eslint-plugin-storybook: "npm:^10.1.11"
     framer-motion: "npm:^11.15.0"
     globals: "npm:^17.12.0"
+    lenis: "npm:^1.3.26"
     lucide-react: "npm:^0.468.0"
     mixpanel-browser: "npm:^2.79.0"
     postcss: "npm:^8.4.49"
@@ -6140,6 +6141,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lenis@npm:^1.3.26":
+  version: 1.3.26
+  resolution: "lenis@npm:1.3.26"
+  peerDependencies:
+    "@nuxt/kit": ">=3.0.0"
+    react: ">=17.0.0"
+    vue: ">=3.0.0"
+  peerDependenciesMeta:
+    "@nuxt/kit":
+      optional: true
+    react:
+      optional: true
+    vue:
+      optional: true
+  checksum: 10c0/0d523ecd7bbbaac64b86de8e7c6641e4a2299065743def53eade177f42c280d1447d36b0fd7a525b7d69b0a889c1af91e85e48bfeec3851975c4858c0823204e
+  languageName: node
+  linkType: hard
+
 "levn@npm:^0.4.1":
   version: 0.4.1
   resolution: "levn@npm:0.4.1"