/* Reset & viewport fill — iOS Safari compatible */ html, body { width: 100%; height: 100%; height: 100dvh; /* Dynamic viewport height — handles iOS Safari URL bar */ margin: 0; padding: 0; overflow: hidden; /* Prevent iOS overscroll bounce */ overscroll-behavior: none; -webkit-overflow-scrolling: touch; /* Prevent iOS zoom on double-tap */ touch-action: manipulation; } body { background-image: url('startup_image_wide.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* iOS Safari: prevent elastic scrolling */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; } @media (max-width: 767px), (orientation: portrait) { body { background-image: url('startup_image_tall.webp'); } } /* * ComposeViewport creates a inside . * These rules ensure it fills the viewport on all browsers including iOS Safari. */ canvas { display: block; width: 100% !important; height: 100% !important; height: 100dvh !important; position: fixed !important; top: 0 !important; left: 0 !important; touch-action: none; } .preloader-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 10; } .preloader-card { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); } .preloader-text { color: #ffffff; font-size: 14px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; }