feat(website): add screenshot lightbox and update orchestration screenshots

Add click-to-enlarge lightbox for both hero and orchestration
screenshots. Clicking opens a fullscreen overlay with smooth scale
animation; clicking the backdrop, close button, or pressing Escape
dismisses it. Screenshots are keyboard-accessible (Enter/Space) and
the overlay uses role=dialog with aria-modal for screen readers.

Update orchestration screenshots (dark + light) with latest captures
showing the workflow designer.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

website/src/layouts/Base.astro

@@ -205,6 +205,19 @@ const {
       </div>
     </footer>
 
+    <!-- Lightbox overlay -->
+    <div
+      id="lightbox"
+      class="lightbox-overlay"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Enlarged screenshot"
+      hidden
+    >
+      <button class="lightbox-close" aria-label="Close enlarged view">&times;</button>
+      <img id="lightbox-img" class="lightbox-img" src="" alt="" />
+    </div>
+
     <!-- Scroll reveal observer -->
     <script>
       const observer = new IntersectionObserver(
@@ -270,5 +283,56 @@ const {
         }
       });
     </script>
+
+    <!-- Lightbox behavior -->
+    <script>
+      (function () {
+        var overlay = document.getElementById('lightbox');
+        var img = document.getElementById('lightbox-img');
+        var closeBtn = overlay.querySelector('.lightbox-close');
+
+        function open(src, alt) {
+          img.setAttribute('src', src);
+          img.setAttribute('alt', alt);
+          overlay.removeAttribute('hidden');
+          requestAnimationFrame(function () {
+            overlay.classList.add('is-active');
+          });
+          document.body.style.overflow = 'hidden';
+        }
+
+        function close() {
+          overlay.classList.remove('is-active');
+          document.body.style.overflow = '';
+          overlay.addEventListener('transitionend', function handler() {
+            overlay.setAttribute('hidden', '');
+            overlay.removeEventListener('transitionend', handler);
+          });
+        }
+
+        document.querySelectorAll('.lightbox-trigger').forEach(function (el) {
+          el.addEventListener('click', function () {
+            open(el.getAttribute('src'), el.getAttribute('alt'));
+          });
+          el.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              open(el.getAttribute('src'), el.getAttribute('alt'));
+            }
+          });
+          el.setAttribute('role', 'button');
+          el.setAttribute('tabindex', '0');
+        });
+
+        overlay.addEventListener('click', function (e) {
+          if (e.target === overlay || e.target === closeBtn) close();
+        });
+        closeBtn.addEventListener('click', close);
+
+        document.addEventListener('keydown', function (e) {
+          if (e.key === 'Escape' && !overlay.hasAttribute('hidden')) close();
+        });
+      })();
+    </script>
   </body>
 </html>

website/src/pages/index.astro

@@ -112,7 +112,7 @@ import Base from '../layouts/Base.astro';
               data-src-dark="/images/screenshot.png"
               data-src-light="/images/screenshot-light.png"
               alt="Aryx application screenshot showing the workspace with chat, sidebar, and activity panel"
-              class="w-full"
+              class="lightbox-trigger w-full cursor-zoom-in"
               width="1280"
               height="800"
             />
@@ -740,7 +740,7 @@ import Base from '../layouts/Base.astro';
               data-src-dark="/images/screenshot-orchestration.png"
               data-src-light="/images/screenshot-orchestration-light.png"
               alt="Aryx workspace showing multi-agent orchestration in action"
-              class="w-full"
+              class="lightbox-trigger w-full cursor-zoom-in"
               width="1280"
               height="800"
             />

website/src/styles/global.css

@@ -192,3 +192,55 @@ body::after {
 .theme-toggle .icon-moon { display: block; }
 [data-theme='light'] .theme-toggle .icon-sun { display: block; }
 [data-theme='light'] .theme-toggle .icon-moon { display: none; }
+
+/* ── Lightbox overlay ── */
+.lightbox-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(8px);
+  opacity: 0;
+  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  cursor: zoom-out;
+  padding: 2rem;
+}
+.lightbox-overlay.is-active {
+  opacity: 1;
+}
+.lightbox-img {
+  max-width: 95vw;
+  max-height: 92vh;
+  border-radius: 0.75rem;
+  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
+  transform: scale(0.92);
+  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+  pointer-events: none;
+}
+.lightbox-overlay.is-active .lightbox-img {
+  transform: scale(1);
+}
+.lightbox-close {
+  position: absolute;
+  top: 1rem;
+  right: 1.5rem;
+  font-size: 2rem;
+  line-height: 1;
+  color: var(--color-warm-300);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.5rem;
+  transition: color 0.2s ease, background-color 0.2s ease;
+}
+.lightbox-close:hover {
+  color: var(--color-warm-50);
+  background: rgba(255, 255, 255, 0.08);
+}
+[data-theme='light'] .lightbox-overlay {
+  background: rgba(0, 0, 0, 0.7);
+}