fix: restore hero section with simplified video positioning

- Removed CSS contain properties that were preventing video from extending into safe area
- Implemented Vue 3 Teleport to bypass DOM containment for iOS video extension
- Video now renders at body level to properly utilize safe area insets
- Kept Safari fallbacks for env() bug workaround

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

apps/website/components/HeroSection.vue

@@ -1,35 +1,37 @@
 <template>
   <section class="hero-voyage" id="heroSection">
-    <!-- Hero video background container - will be absolutely positioned -->
-    <div ref="videoContainer" class="hero-video-container">
-      <!-- White overlay that fades out when video is ready -->
-      <div
-        class="video-white-overlay"
-        :class="{ 'fade-out': videoLoaded }"
-      />
+    <!-- Hero video background teleported to body for proper safe area extension -->
+    <Teleport to="body">
+      <div ref="videoContainer" class="hero-video-container hero-video-teleported">
+        <!-- White overlay that fades out when video is ready -->
+        <div
+          class="video-white-overlay"
+          :class="{ 'fade-out': videoLoaded }"
+        />
 
-      <video
-        ref="videoElement"
-        autoplay
-        loop
-        muted
-        playsinline
-        preload="auto"
-        class="hero-video"
-        :class="{ 'video-loaded': videoLoaded }"
-        @loadeddata="handleVideoLoaded"
-        @canplaythrough="handleVideoLoaded"
-        @play="handleVideoLoaded"
-      >
-        <source
-          src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4"
-          type="video/mp4"
+        <video
+          ref="videoElement"
+          autoplay
+          loop
+          muted
+          playsinline
+          preload="auto"
+          class="hero-video"
+          :class="{ 'video-loaded': videoLoaded }"
+          @loadeddata="handleVideoLoaded"
+          @canplaythrough="handleVideoLoaded"
+          @play="handleVideoLoaded"
         >
-      </video>
+          <source
+            src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4"
+            type="video/mp4"
+          >
+        </video>
 
-      <div class="hero-overlay gradient-warm" />
-      <div class="hero-overlay gradient-depth" />
-    </div>
+        <div class="hero-overlay gradient-warm" />
+        <div class="hero-overlay gradient-depth" />
+      </div>
+    </Teleport>
 
     <div class="hero-content" :class="{ 'is-ready': videoLoaded }">
       <div class="hero-main">
@@ -186,6 +188,12 @@ onMounted(() => {
   background: #ffffff;
 }
 
+/* Teleported video container - positioned at body level to bypass DOM containment */
+.hero-video-teleported {
+  position: fixed !important;
+  z-index: 1 !important;
+}
+
 /* Use @supports with max() as recommended by Apple for safe area */
 @supports(padding: max(0px)) {
   .hero-video-container {