fix: Safari workaround for env() returning 0 in portrait mode

- Add hardcoded fallbacks using max() function per Apple's recommendation
- Support both constant() and env() for legacy compatibility
- Use 59px fallback for Dynamic Island devices
- Add iOS-specific detection with @supports(-webkit-touch-callout)
- Create improved test page with device detection
- Update hero-content padding with same fallback approach

This works around the known Safari bug where env(safe-area-inset-top)
returns 0px in portrait mode. The video will now extend 59px above the
viewport on Dynamic Island iPhones, ensuring it covers the notch area.

apps/website/components/HeroSection.vue

@@ -172,32 +172,59 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Hero video container - proper safe area implementation */
+/* Hero video container - Safari-compatible safe area implementation */
 .hero-video-container {
   position: fixed;
   left: 0;
   right: 0;
   width: 100vw;
-  /* Pull up by safe-area to extend under notch */
-  top: calc(-1 * env(safe-area-inset-top));
-  /* Grow height to compensate */
-  height: calc(100lvh + env(safe-area-inset-top));
+  /* Default fallback for devices without notch */
+  top: 0;
+  height: 100vh;
   z-index: 1;
   pointer-events: none;
   background: #ffffff;
 }
 
-/* Fallback for browsers without lvh */
-@supports not (height: 100lvh) {
+/* Use @supports with max() as recommended by Apple for safe area */
+@supports(padding: max(0px)) {
   .hero-video-container {
-    height: calc(100vh + env(safe-area-inset-top));
+    /* Use max() to provide fallback when env() returns 0 (Safari bug) */
+    top: calc(-1 * max(env(safe-area-inset-top), 20px));
+    height: calc(100vh + max(env(safe-area-inset-top), 20px));
   }
 }
 
-/* Additional support for browsers with dvh */
+/* iOS-specific fallback using -webkit-touch-callout detection */
+@supports (-webkit-touch-callout: none) {
+  .hero-video-container {
+    /* Hardcoded fallback for iPhone 14/15 Pro Dynamic Island (59px) */
+    /* and iPhone X-13 notch (44px) - uses larger value for safety */
+    top: -59px;
+    height: calc(100vh + 59px);
+  }
+
+  /* Try env() with both modern and legacy syntax */
+  @supports(padding: max(0px)) {
+    .hero-video-container {
+      top: calc(-1 * max(constant(safe-area-inset-top), env(safe-area-inset-top), 59px));
+      height: calc(100vh + max(constant(safe-area-inset-top), env(safe-area-inset-top), 59px));
+    }
+  }
+}
+
+/* Support for dynamic viewport height */
 @supports (height: 100dvh) {
   .hero-video-container {
-    height: calc(100dvh + env(safe-area-inset-top));
+    height: calc(100dvh + max(env(safe-area-inset-top), 59px));
+  }
+}
+
+/* When in standalone PWA mode, env() typically works better */
+@media screen and (display-mode: standalone) {
+  .hero-video-container {
+    top: calc(-1 * env(safe-area-inset-top));
+    height: calc(100vh + env(safe-area-inset-top));
   }
 }