Add media section with YouTube Short embed before footer

- New 'See Moxie in Action' section with heading and subtitle
- Embedded YouTube Short (b4ly_hECE_I) in a responsive 16:9 container
- Decorative emerald glow effects and rounded card styling
- 'Watch on YouTube' link with YouTube icon below the embed
- Scroll-animate integration for reveal on scroll

index.html

@@ -746,6 +746,48 @@
         </div>
     </div>
 
+    <!-- MEDIA SECTION -->
+    <section id="media" class="py-20 border-b border-slate-800 scroll-animate">
+        <div class="max-w-screen-2xl mx-auto px-8">
+            <div class="text-center mb-12 scroll-animate">
+                <h2 class="text-5xl font-semibold tracking-[-1px] mb-3" style="font-family: 'Space Grotesk', sans-serif;">See Moxie in Action.</h2>
+                <p class="text-slate-400 text-xl max-w-xl mx-auto">Watch how our algorithms deliver real-time AI inference on consumer hardware.</p>
+            </div>
+
+            <div class="max-w-3xl mx-auto scroll-animate">
+                <div class="relative bg-slate-900 border border-slate-700 rounded-3xl overflow-hidden shadow-2xl shadow-emerald-400/5 group">
+                    <!-- Decorative glow -->
+                    <div class="absolute -top-20 -left-20 w-60 h-60 bg-emerald-400/10 rounded-full blur-3xl pointer-events-none"></div>
+                    <div class="absolute -bottom-20 -right-20 w-60 h-60 bg-emerald-400/10 rounded-full blur-3xl pointer-events-none"></div>
+
+                    <!-- Video embed container (9:16 portrait for Shorts, displayed as 16:9 card) -->
+                    <div class="relative w-full" style="padding-top: 56.25%;">
+                        <iframe
+                            src="https://www.youtube.com/embed/b4ly_hECE_I"
+                            title="Moxiegen Demo"
+                            frameborder="0"
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                            allowfullscreen
+                            class="absolute inset-0 w-full h-full rounded-3xl"
+                            loading="lazy"
+                        ></iframe>
+                    </div>
+                </div>
+
+                <!-- Caption below video -->
+                <div class="flex items-center justify-center gap-3 mt-6">
+                    <div class="h-px flex-1 bg-gradient-to-r from-transparent to-slate-700"></div>
+                    <a href="https://youtube.com/shorts/b4ly_hECE_I" target="_blank" rel="noopener noreferrer"
+                       class="text-emerald-400 hover:text-emerald-300 font-medium text-sm flex items-center gap-2 transition-colors">
+                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
+                        Watch on YouTube
+                    </a>
+                    <div class="h-px flex-1 bg-gradient-to-l from-transparent to-slate-700"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- FOOTER -->
     <footer class="bg-slate-950 border-t border-slate-800 py-8">
         <div class="max-w-screen-2xl mx-auto px-8 flex flex-col md:flex-row justify-between items-center gap-4 text-slate-400 text-sm">