:root { --red:#ed101b; --red-deep:#b90819; --ink:#111222; --paper:#fffdf8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; background:var(--red); font-family:Arial, sans-serif; }
.landing { min-height:100svh; position:relative; display:grid; place-items:center; overflow:hidden; padding:24px; background:radial-gradient(ellipse at 50% 42%, #fb2a23 0%, var(--red) 46%, var(--red-deep) 100%); }
.landing::before, .landing::after { position:absolute; width:46vmax; height:46vmax; border:1px solid rgba(255,255,255,.12); border-radius:50%; content:""; pointer-events:none; }
.landing::before { top:-32vmax; left:-19vmax; }.landing::after { right:-26vmax; bottom:-33vmax; }
.waitlist { position:relative; width:min(100%, 550px); display:flex; flex-direction:column; align-items:center; animation:arrive .8s cubic-bezier(.18,.8,.2,1) both; }
.main-logo { width:min(100%, 525px); height:auto; filter:brightness(0) invert(1); }
.coming-soon { margin:23px 0 0; color:rgba(255,255,255,.72); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
form { width:min(100%, 390px); display:flex; gap:6px; margin-top:24px; padding:5px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(255,255,255,.12); box-shadow:0 16px 35px rgba(0,0,0,.18); backdrop-filter:blur(12px); }
input { width:100%; min-width:0; padding:12px 14px 12px 17px; border:0; outline:0; background:transparent; color:white; font-size:14px; }
input::placeholder { color:rgba(255,255,255,.58); }
button { border:0; font:700 13px Arial,sans-serif; cursor:pointer; }
form button { flex:none; padding:12px 18px; border-radius:999px; color:white; background:var(--ink); box-shadow:0 3px 9px rgba(0,0,0,.18); transition:transform .2s, background .2s; white-space:nowrap; }
form button span { color:#fa7553; font-size:17px; line-height:0; } form button:hover { transform:scale(1.04); background:#2d2e40; }
.popup { position:fixed; left:50%; bottom:30px; display:flex; align-items:center; gap:9px; padding:12px 14px 12px 16px; border-radius:999px; color:var(--ink); background:var(--paper); box-shadow:0 12px 35px rgba(0,0,0,.3); transform:translate(-50%,150%); opacity:0; transition:transform .45s cubic-bezier(.2,.9,.2,1), opacity .25s; }
.popup.show { transform:translate(-50%,0); opacity:1; }.popup p { margin:0; font-size:14px; font-weight:700; white-space:nowrap; }.popup-star { color:#e44535; font-size:17px; }.popup-close { width:20px; height:20px; padding:0; border-radius:50%; color:#77757a; background:#f0eee9; font-size:17px; line-height:18px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes arrive { from { opacity:0; transform:translateY(18px) scale(.96); } to { opacity:1; transform:none; } }
@media (max-width:560px) { .landing { padding:22px; } .main-logo { width:100%; } form { margin-top:23px; } }
@media (max-width:375px) { form { display:block; padding:5px; border-radius:18px; } input { padding:13px 15px; } form button { width:100%; padding:13px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }
