fix: iOS Safari safe area - remove HTML height constraint and add body position fix

- Remove height: 100% from HTML element that was preventing safe area extension
- Add min-height with -webkit-fill-available instead
- Detect iOS devices and set body position:fixed for proper safe area handling
- iOS Safari requires body to be position:fixed for content to extend into safe areas

This addresses the root cause: parent element constraints preventing video extension

apps/website/assets/css/main.css

@@ -21,9 +21,10 @@ html {
   scroll-behavior: smooth;
   overscroll-behavior-y: contain;
   -webkit-overflow-scrolling: touch;
-  /* Proper iOS viewport handling */
+  /* Remove height constraint to allow safe area extension */
-  height: 100%;
+  /* height: 100%; -- REMOVED: This prevents safe area extension! */
-  height: -webkit-fill-available;
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
   /* Allow video to extend horizontally */
   max-width: 100vw !important;
 }

apps/website/components/HeroSection.vue

@@ -112,7 +112,18 @@ const animateCount = () => {
 }
 
 onMounted(() => {
-  // ULTIMATE FIX: Use inset: 0 and -webkit-fill-available to bypass env() bugs
+  // FINAL FIX: iOS detection and body positioning for safe area extension
+  const isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent);
+
+  if (isIOS) {
+    // iOS Safari requires body to be position:fixed for safe area extension
+    document.body.style.position = 'fixed';
+    document.body.style.width = '100%';
+    document.body.style.top = '0';
+    document.body.style.left = '0';
+  }
+
+  // Inject video with proper positioning
   const videoHTML = `
     <style>
       #ios-video-bg {