:root { color-scheme: dark; background: #101417; color: #e1e6ec; font-family: Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #101417; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(90deg, #080d12c9, #080d1270 55%, #080d129c), linear-gradient(0deg, #080d12e6, transparent 55%, #080d1266), url('assets/mobile-concept.png'); background-repeat: no-repeat; background-size: cover, cover, auto max(153vh, 80vw); background-position: center, center, 58% top; }
body { isolation: isolate; }
main { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: 40px 24px; background: radial-gradient(ellipse at center, #080d1240 0%, #080d1210 65%, #080d1260 100%); }
.brandmark { position: relative; overflow: hidden; width: min(620px, 88vw); aspect-ratio: 514 / 200; mix-blend-mode: screen; filter: drop-shadow(0 5px 18px #0009); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 85%, transparent); mask-composite: intersect; }
.brandmark img { display: block; position: absolute; width: 298.832685%; max-width: none; height: auto; left: -99.221790%; top: -226%; }
h1 { margin: 0; text-align: center; font-size: clamp(16px, 2.5vw, 25px); font-weight: 400; line-height: 1.6; letter-spacing: .025em; text-shadow: 0 2px 12px #000; }
@media (max-width: 480px) { main { gap: 26px; } }