@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;600;700&family=DM+Mono:wght@400&display=swap');

:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; background: #111524; color: #f7f3ed; font-family: "Assistant", Arial, sans-serif; }
.landing { position: relative; display: grid; min-height: 100vh; place-items: center; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 50% 40%, #252540 0, #151a2b 43%, #0d101b 100%); }
.grain { position: absolute; z-index: -1; inset: 0; opacity: .23; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; pointer-events: none; }
.orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); opacity: .72; animation: drift 12s ease-in-out infinite alternate; }
.orb-one { width: min(57vw, 800px); height: min(57vw, 800px); top: -31vw; right: -18vw; background: radial-gradient(circle at 38% 42%, rgba(243, 132, 86, .84), rgba(206, 81, 107, .3) 38%, transparent 70%); }
.orb-two { width: min(52vw, 710px); height: min(52vw, 710px); bottom: -34vw; left: -20vw; background: radial-gradient(circle at 50% 45%, rgba(74, 126, 181, .58), rgba(59, 68, 145, .22) 42%, transparent 70%); animation-delay: -5s; }
.message { display: grid; justify-items: center; padding: 34px; text-align: center; animation: reveal 1.25s cubic-bezier(.2,.8,.2,1) both; }
.mark { display: flex; align-items: end; gap: 7px; height: 37px; margin-bottom: 52px; }
.mark span { width: 2px; border-radius: 99px; background: #ec8d70; box-shadow: 0 0 22px rgba(236, 141, 112, .55); }
.mark span:nth-child(1) { height: 15px; }.mark span:nth-child(2) { height: 36px; }.mark span:nth-child(3) { height: 22px; }
.eyebrow { margin: 0 0 14px; color: #e18a73; font: 400 17px/1 "DM Mono", monospace; letter-spacing: .5em; transform: translateX(.25em); }
h1 { margin: 0; font-size: clamp(74px, 15vw, 205px); font-weight: 300; line-height: .86; letter-spacing: -.075em; text-shadow: 0 8px 42px rgba(0,0,0,.28); }
.soon { margin: 29px 0 0; color: rgba(247,243,237,.48); font: 400 11px/1 "DM Mono", monospace; letter-spacing: .52em; text-transform: uppercase; transform: translateX(.26em); }
.constellation { position: absolute; inset: 0; pointer-events: none; }
.constellation i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #f6d7c4; box-shadow: 0 0 14px 3px rgba(246,215,196,.22); animation: twinkle 3s ease-in-out infinite alternate; }
.constellation i:nth-child(1) { top: 18%; left: 19%; }.constellation i:nth-child(2) { top: 25%; right: 18%; animation-delay: -.8s; }.constellation i:nth-child(3) { bottom: 20%; left: 29%; animation-delay: -1.7s; }.constellation i:nth-child(4) { bottom: 25%; right: 25%; animation-delay: -2.3s; }.constellation i:nth-child(5) { top: 42%; left: 9%; animation-delay: -1.2s; }.constellation i:nth-child(6) { top: 63%; right: 9%; animation-delay: -2.7s; }.constellation i:nth-child(7) { top: 13%; left: 54%; animation-delay: -.4s; }
.edge-note { position: absolute; color: rgba(247,243,237,.36); font: 400 10px "DM Mono", monospace; letter-spacing: .18em; }.edge-note-top { top: 29px; right: 33px; }.edge-note-bottom { bottom: 28px; left: 33px; font-size: 18px; }
@keyframes reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drift { to { transform: translate3d(3vw, 2vw, 0) scale(1.06); } }
@keyframes twinkle { to { opacity: .2; transform: scale(.65); } }
@media (max-width: 560px) { .edge-note-top { top: 20px; right: 21px; }.edge-note-bottom { bottom: 19px; left: 21px; }.mark { margin-bottom: 38px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }