diff --git a/apps/website/assets/css/voyage-layout.css b/apps/website/assets/css/voyage-layout.css
index 871db45..4fe6ea3 100644
--- a/apps/website/assets/css/voyage-layout.css
+++ b/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 {
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index 56816a6..0fcc372 100644
--- a/apps/website/components/HeroSection.vue
+++ b/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 {