fix: comprehensive iOS Safari safe area fix with proper env() usage

- Add viewport-fit=cover meta tag in nuxt.config.ts for safe area extension
- Remove CSS containment property that was blocking safe area rendering
- Replace hardcoded fallback values with proper max(env(), fallback) syntax
- Fix z-index stacking order (video: 0, footer: 2) to prevent overlays
- Enhance HTML/body background color configuration for safe area coverage
- Add ipx dependency for image optimization

Fixes white background in iOS Safari safe areas by using proper env() functions
with max() for fallbacks instead of hardcoded values that override dynamic sizing.

apps/website/components/HeroSection.vue

@@ -183,28 +183,28 @@ onMounted(() => {
   top: calc(-1 * env(safe-area-inset-top, 0px));
   /* Extend height to compensate */
   height: calc(100vh + env(safe-area-inset-top, 0px));
-  z-index: 1;  /* Changed from 0 to ensure proper stacking */
+  z-index: 0;  /* Base layer for video */
   pointer-events: none;
   /* iOS Safari rendering optimizations */
   -webkit-transform: translate3d(0, 0, 0);  /* Force GPU layer */
   transform: translateZ(0);  /* Hardware acceleration */
   will-change: transform;  /* Optimization hint */
-  contain: layout style paint;  /* Containment for performance */
+  /* Removed contain property to allow extension into safe area */
 }
 
-/* iOS Safari portrait bug workaround - env() returns 0 in portrait */
+/* iOS Safari safe area extension with proper env() usage */
 @supports (-webkit-touch-callout: none) {
   .hero-video-container {
-    /* Hardcoded fallback for iPhone 14/15 Pro Dynamic Island */
-    top: -59px;
-    height: calc(100vh + 59px);
+    /* Use max() to provide fallback when env() returns 0 */
+    top: calc(-1 * max(env(safe-area-inset-top), 59px));
+    height: calc(100vh + max(env(safe-area-inset-top), 59px));
   }
 
   /* Older iPhones with smaller notch */
   @media screen and (max-height: 812px) {
     .hero-video-container {
-      top: -44px;
-      height: calc(100vh + 44px);
+      top: calc(-1 * max(env(safe-area-inset-top), 44px));
+      height: calc(100vh + max(env(safe-area-inset-top), 44px));
     }
   }
 }
@@ -215,15 +215,15 @@ onMounted(() => {
     height: calc(100dvh + env(safe-area-inset-top, 0px));
   }
 
-  /* iOS specific with dvh */
+  /* iOS specific with dvh and proper env() usage */
   @supports (-webkit-touch-callout: none) {
     .hero-video-container {
-      height: calc(100dvh + 59px); /* Dynamic Island */
+      height: calc(100dvh + max(env(safe-area-inset-top), 59px)); /* Dynamic Island with env() */
     }
 
     @media screen and (max-height: 812px) {
       .hero-video-container {
-        height: calc(100dvh + 44px); /* Notch */
+        height: calc(100dvh + max(env(safe-area-inset-top), 44px)); /* Notch with env() */
       }
     }
   }