fixes

apps/website/components/HeroSection.vue

@@ -172,17 +172,46 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Hero video container positioned absolutely behind content */
+/* Hero video container - Fixed for both Safari notch and Chrome mobile */
 .hero-video-container {
   position: fixed;
-  top: env(safe-area-inset-top, 0); /* Start at safe area boundary */
+  top: 0;
   left: 0;
   width: 100vw;
-  height: calc(100vh + env(safe-area-inset-top, 0)); /* Extend height to cover full screen */
+  /* Use 100dvh for dynamic viewport (Chrome mobile fix) */
+  height: 100dvh;
+  /* Fallback for browsers without dvh support */
+  height: 100vh;
   z-index: 1;
-  transform: translateY(calc(-1 * env(safe-area-inset-top, 0))); /* Move up into notch/Dynamic Island */
   pointer-events: none;
-  background: #ffffff; /* White fallback */
+  background: #ffffff;
+}
+
+/* Additional support for browsers with dvh */
+@supports (height: 100dvh) {
+  .hero-video-container {
+    height: 100dvh;
+  }
+}
+
+/* Safari-specific fix for notch/Dynamic Island */
+@supports (-webkit-touch-callout: none) {
+  .hero-video-container {
+    /* Extend beyond safe area for Safari */
+    top: -50px; /* Covers notch (44px) and Dynamic Island (59px) */
+    height: calc(100vh + 50px);
+    /* Use dvh if available */
+    height: calc(100dvh + 50px);
+  }
+
+  /* Adjust for landscape orientation */
+  @media (orientation: landscape) {
+    .hero-video-container {
+      top: 0;
+      height: 100vh;
+      height: 100dvh;
+    }
+  }
 }
 
 /* Video fade-in transition to prevent flash */
@@ -192,7 +221,10 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  object-position: center top; /* Align to top for better notch coverage */
+  object-position: center center;
+  /* Force GPU acceleration */
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
 }
 
 .hero-video.video-loaded {