diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 5351c6c..cf12838 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -185,9 +185,11 @@ onMounted(() => {
   height: calc(100vh + env(safe-area-inset-top, 0px));
   z-index: 0;  /* Base layer for video */
   pointer-events: none;
-  /* Apply parallax transform using CSS variable */
+  /* Apply parallax transform using CSS variable - delayed to prevent autoplay issues */
   transform: translateY(var(--parallax-offset, 0px));
   will-change: transform;  /* Optimization hint */
+  /* Initial state for autoplay compatibility */
+  transition: transform 0.1s ease-out;
   /* Removed contain property to allow extension into safe area */
 }
 
@@ -209,12 +211,12 @@ onMounted(() => {
   /* iOS specific with dvh and proper env() usage */
   @supports (-webkit-touch-callout: none) {
     .hero-video-container {
-      height: calc(100dvh + max(env(safe-area-inset-top), 59px)); /* Dynamic Island with env() */
+      height: calc(100dvh + env(safe-area-inset-top, 0px)); /* Dynamic Island */
     }
 
     @media screen and (max-height: 812px) {
       .hero-video-container {
-        height: calc(100dvh + max(env(safe-area-inset-top), 44px)); /* Notch with env() */
+        height: calc(100dvh + env(safe-area-inset-top, 0px)); /* Notch */
       }
     }
   }
@@ -227,7 +229,7 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  object-position: center center;
+  object-position: center top;
   /* Force GPU acceleration */
   -webkit-transform: translateZ(0);
   transform: translateZ(0);