fix: resolve footer overlay issue on hero video for iOS Safari

- Add proper z-index hierarchy with footer at z-index: 20
- Create isolated stacking context for hero section
- Implement iOS Safari GPU acceleration optimizations
- Ensure proper layer separation between video, content, and footer
- Add hardware acceleration hints for smooth rendering

🤖 Generated with Claude Code

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

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

@@ -1520,6 +1520,8 @@ html {
     background: var(--primary-blue);
     color: var(--white);
     padding: var(--space-2xl) 0 var(--space-md);
+    position: relative;
+    z-index: 20;
 }
 
 .footer-container {

apps/website/components/HeroSection.vue

@@ -183,9 +183,13 @@ onMounted(() => {
   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;  /* Changed from 0 to ensure proper stacking */
   pointer-events: none;
-  /* Removed white background to allow transparency */
+  /* iOS Safari rendering optimizations */
+  -webkit-transform: translate3d(0, 0, 0);  /* Force GPU layer */
+  transform: translateZ(0);  /* Hardware acceleration */
+  will-change: transform;  /* Optimization hint */
+  contain: layout style paint;  /* Containment for performance */
 }
 
 /* iOS Safari portrait bug workaround - env() returns 0 in portrait */
@@ -267,6 +271,12 @@ onMounted(() => {
   min-height: 100vh;
   /* Allow video to extend into safe area */
   overflow: visible;
+  isolation: isolate;  /* Create new stacking context */
+}
+
+.hero-content {
+  position: relative;
+  z-index: 10;  /* Ensure content is above video */
 }
 
 .hero-main {