diff --git a/apps/website/assets/css/main.css b/apps/website/assets/css/main.css
index 2505917..f8822ff 100644
--- a/apps/website/assets/css/main.css
+++ b/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 */
-  height: 100%;
-  height: -webkit-fill-available;
+  /* Remove height constraint to allow safe area extension */
+  /* height: 100%; -- REMOVED: This prevents safe area extension! */
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
   /* Allow video to extend horizontally */
   max-width: 100vw !important;
 }
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 45d6af9..55006f0 100644
--- a/apps/website/components/HeroSection.vue
+++ b/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 {