fix: restructure video as global backdrop for iOS notch extension

- Created VideoBackdrop component as global sibling layer
- Video now sits at app level behind all content (z-index: 0)
- Hero section made transparent to reveal video backdrop
- Video extends into notch with negative top positioning
- Content remains in safe areas with proper padding
- Removed video container from HeroSection component
- Added app.vue to manage global layout structure

This separation allows the video to truly extend edge-to-edge
including under the iOS notch/Dynamic Island while keeping
all interactive content within safe areas.

apps/website/assets/css/voyage-layout.css

@@ -410,6 +410,8 @@ html {
 /* Hero Section */
 .hero-voyage {
     position: relative;
+    /* Hero is now transparent - video handled by VideoBackdrop component */
+    background: transparent;
     height: 100vh; /* Fallback for browsers that don't support newer units */
     height: -webkit-fill-available; /* iOS Safari - fills available space */
     height: 100dvh; /* Dynamic viewport height */
@@ -1674,6 +1676,9 @@ html {
 /* Responsive */
 @media (max-width: 768px) {
     .hero-voyage {
+        /* Hero is now transparent - video handled by VideoBackdrop component */
+        position: relative;
+        background: transparent;
         padding: 0;
         /* iOS-specific height handling */
         height: 100vh;
@@ -1682,24 +1687,11 @@ html {
         min-height: 100vh;
         min-height: -webkit-fill-available;
         min-height: 100dvh;
-        /* Video will extend under notch - no padding-top here */
         padding-bottom: env(safe-area-inset-bottom);
         overflow-x: hidden !important;
         max-width: 100vw !important;
     }
 
-    /* Make video container fixed on mobile to fill entire viewport including notch */
-    .hero-video-container {
-        position: fixed !important;
-        inset: 0;
-        width: 100vw;
-        height: 100vh;
-        height: -webkit-fill-available;
-        height: 100dvh;
-        z-index: 0;
-        pointer-events: none;
-    }
-
     .hero-content {
         /* Adjust padding to account for safe areas on all sides */
         padding: clamp(1rem, 4vw, 2rem);