fix: restructure layout to allow video extension into iOS safe area

- Create custom hero layout without constraining wrapper div
- Remove min-h-screen and flex constraints that block video extension
- Change video to position:fixed with z-index:-1 for proper layering
- Fix overflow:clip to overflow:visible in voyage-layout.css
- Revert transparent background to black for stability

This finally solves the iOS Safari safe area issue by removing the DOM
structure constraints that were preventing the video from extending.

🤖 Generated with Claude Code

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

apps/website/components/HeroSection.vue

@@ -172,20 +172,19 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Hero video container using standard safe-area-inset-top for iOS Safari */
+/* Hero video container using fixed positioning for iOS Safari safe area */
 .hero-video-container {
-  position: absolute;
+  position: fixed !important; /* Fixed to extend beyond layout constraints */
   left: 0;
   right: 0;
   width: 100vw;
-  /* Use standard safe-area-inset-top */
   /* Pull up by the safe area to extend under notch */
   top: calc(-1 * env(safe-area-inset-top, 0px));
   /* Extend height to compensate */
   height: calc(100vh + env(safe-area-inset-top, 0px));
-  z-index: 0;
+  z-index: -1; /* Behind all content */
   pointer-events: none;
-  /* Removed white background to allow transparency */
+  /* No background color to allow video visibility */
 }
 
 /* iOS Safari portrait bug workaround - env() returns 0 in portrait */
@@ -267,6 +266,7 @@ onMounted(() => {
   min-height: 100vh;
   /* Allow video to extend into safe area */
   overflow: visible;
+  z-index: 1; /* Above fixed video background */
 }
 
 .hero-main {