diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 3435af6..f5822d5 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -184,15 +184,15 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Hero video container - absolute positioning to extend into safe areas */
+/* Hero video container - COMPLETE safe area formula (Apple/Netflix pattern) */
 .hero-video-container {
-  position: absolute;  /* Use absolute to avoid iOS Safari position:fixed bugs */
-  /* Extend ABOVE viewport to fill safe area */
-  top: calc(-1 * env(safe-area-inset-top, 0px));
-  left: 0;
-  width: 100vw;
-  /* Increase height to include safe area */
-  height: calc(100vh + env(safe-area-inset-top, 0px));
+  position: fixed;  /* Fixed with complete formula works better */
+  /* Extend into ALL safe areas */
+  top: calc(0px - env(safe-area-inset-top, 0px));
+  left: calc(0px - env(safe-area-inset-left, 0px));
+  /* CRITICAL: Include ALL safe area insets in width and height */
+  width: calc(100vw + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
+  height: calc(100vh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
   z-index: 0;  /* Base layer for video */
   pointer-events: none;
   overflow: hidden; /* Keep video content clipped */
@@ -203,32 +203,14 @@ onMounted(() => {
   transition: transform 0.1s ease-out;
 }
 
-/* iOS Safari safe area extension - use env() only, no hardcoded fallbacks */
-@supports (-webkit-touch-callout: none) {
-  .hero-video-container {
-    /* Use env() directly without hardcoded fallbacks */
-    top: calc(-1 * env(safe-area-inset-top, 0px));
-    height: calc(100vh + env(safe-area-inset-top, 0px));
-  }
-}
+/* iOS Safari safe area extension - removed to prevent interference with complete formula */
+/* The main .hero-video-container rule now handles all safe areas properly */
 
-/* Support for dynamic viewport height */
+/* Support for dynamic viewport height - simplified */
 @supports (height: 100dvh) {
   .hero-video-container {
-    height: calc(100dvh + env(safe-area-inset-top, 0px));
-  }
-
-  /* iOS specific with dvh and proper env() usage */
-  @supports (-webkit-touch-callout: none) {
-    .hero-video-container {
-      height: calc(100dvh + env(safe-area-inset-top, 0px)); /* Dynamic Island */
-    }
-
-    @media screen and (max-height: 812px) {
-      .hero-video-container {
-        height: calc(100dvh + env(safe-area-inset-top, 0px)); /* Notch */
-      }
-    }
+    /* Update height calc to include ALL safe areas for dvh */
+    height: calc(100dvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
   }
 }
 
@@ -278,7 +260,7 @@ onMounted(() => {
 }
 
 .hero-content {
-  position: absolute;  /* Use absolute to match video container positioning */
+  position: fixed;  /* Use fixed to match video container positioning */
   top: 0;  /* Start at viewport top */
   left: 0;
   right: 0;