diff --git a/frontend/index.html b/frontend/index.html
index bda914e..a6682a8 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -44,7 +44,8 @@
 <body>
 
 <div id="vi">
-  <video id="vv" autoplay muted playsinline src="/intro.mp4"></video>
+  <video id="vv" autoplay playsinline src="/intro.mp4"></video>
+  <button id="vi-play" style="display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:1.1rem;font-weight:700;padding:14px 32px;border-radius:40px;cursor:pointer;font-family:Inter,sans-serif;letter-spacing:.05em">▶ Play Intro</button>
   <button id="vi-skip">Skip ›</button>
 </div>
 
@@ -919,13 +920,20 @@ <h1 className="text-xl font-bold">{navItem?.label}</h1>
   window.addEventListener("DOMContentLoaded",function(){
     var vv=document.getElementById("vv");
     var skip=document.getElementById("vi-skip");
+    var playBtn=document.getElementById("vi-play");
     if(vv){
       vv.addEventListener("ended",startApp);
       vv.addEventListener("error",startApp);
-      // if video can't autoplay (blocked), fall back after 200ms
       var playPromise=vv.play();
       if(playPromise&&typeof playPromise.catch==="function"){
-        playPromise.catch(function(){startApp();});
+        playPromise.catch(function(){
+          // autoplay blocked — show click-to-play button
+          if(playBtn) playBtn.style.display="block";
+          if(playBtn) playBtn.addEventListener("click",function(){
+            playBtn.style.display="none";
+            vv.play();
+          });
+        });
       }
     } else {
       startApp();
diff --git a/frontend/intro.mp4 b/frontend/intro.mp4
index 4605e6e..8c600f9 100644
Binary files a/frontend/intro.mp4 and b/frontend/intro.mp4 differ
