fix: complete iOS Safari safe area solution using inset and -webkit-fill-available

- Replace calc() with env() approach (which returns 0px in portrait)
- Use inset: 0 to fill entire viewport including safe areas
- Add -webkit-fill-available for proper iOS height handling
- Add iOS-specific meta tags for full-screen web app support
- Include style element with !important to override any conflicts
- Use @supports query to target only Safari browsers

This approach bypasses the buggy env() functions and uses native iOS solutions

apps/website/components/HeroSection.vue

@@ -112,31 +112,39 @@ const animateCount = () => {
 }
 
 onMounted(() => {
-  // NUCLEAR OPTION: Inject video directly into DOM, bypassing Vue/Nuxt entirely
+  // ULTIMATE FIX: Use inset: 0 and -webkit-fill-available to bypass env() bugs
   const videoHTML = `
-    <div id="ios-video-bg" style="
+    <style>
-      position: fixed;
+      #ios-video-bg {
-      top: calc(-1 * env(safe-area-inset-top, 0px));
+        position: fixed !important;
-      left: 0;
+        inset: 0 !important;
-      right: 0;
+        width: 100vw !important;
-      bottom: 0;
+        height: 100vh !important;
-      width: 100vw;
+        height: -webkit-fill-available !important;
-      height: calc(100vh + env(safe-area-inset-top, 0px));
+        z-index: -1 !important;
-      z-index: -1;
+        background: #000 !important;
-      background: #000;
+      }
-    ">
+
+      @supports (-webkit-touch-callout: none) {
+        #ios-video-bg {
+          min-height: -webkit-fill-available !important;
+        }
+      }
+
+      #bg-video-element {
+        width: 100% !important;
+        height: 100% !important;
+        object-fit: cover !important;
+        object-position: center !important;
+      }
+    </style>
+    <div id="ios-video-bg">
       <video
         id="bg-video-element"
         autoplay
         muted
         playsinline
-        loop
+        loop>
-        style="
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-          object-position: top center;
-        ">
         <source src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4" type="video/mp4">
       </video>
       <div style="

apps/website/nuxt.config.ts

@@ -54,7 +54,9 @@ export default defineNuxtConfig({
   app: {
     head: {
       meta: [
-        { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' }
+        { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' },
+        { name: 'apple-mobile-web-app-capable', content: 'yes' },
+        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' }
       ]
     }
   },