:root {
  --bg: #050505;
  --panel: rgba(9, 9, 9, 0.86);
  --yellow: #ffc400;
  --pink: #ff2d87;
  --green: #62ff27;
  --white: #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif; }
body { color: var(--white); overflow: hidden; }
main { min-height: 100vh; }
.screen { min-height: 100vh; width: 100%; display: grid; place-items: center; position: absolute; inset: 0; }
.start-screen {
  background:
    radial-gradient(circle at 50% 35%, rgba(29, 164, 255, .20), transparent 35%),
    linear-gradient(135deg, #111 0 25%, #070707 25% 50%, #111 50% 75%, #070707 75%);
  background-size: auto, 58px 58px;
}
.start-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.68)); pointer-events: none; }
.speed-lines { position: absolute; inset: 0; opacity: .16; background: repeating-linear-gradient(115deg, transparent 0 22px, #fff 24px 25px, transparent 27px 55px); transform: scale(1.5); animation: drift 2s linear infinite; }
@keyframes drift { to { background-position: 180px 0; } }
.intro-card, .coming-card { position: relative; z-index: 2; text-align: center; padding: 24px; width: min(92vw, 720px); }
.logo, .main-logo { display: block; width: min(92%, 570px); margin: 0 auto; border-radius: 24px; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.tagline { letter-spacing: 1.5px; font-size: clamp(14px, 2.5vw, 21px); text-shadow: 0 3px 6px #000; }
.start-button { margin-top: 22px; border: 4px solid #111; outline: 3px solid #fff; background: linear-gradient(#ffd63c, #f49a00); color: #090909; font: inherit; font-size: clamp(28px, 6vw, 58px); letter-spacing: 1px; padding: 17px 34px; border-radius: 18px; cursor: pointer; box-shadow: 0 9px 0 #9b5a00, 0 16px 35px rgba(0,0,0,.55); transition: transform .12s ease, box-shadow .12s ease; }
.start-button:active { transform: translateY(7px); box-shadow: 0 2px 0 #9b5a00, 0 8px 20px rgba(0,0,0,.5); }
.button-light { width: 15px; height: 15px; display: inline-block; border-radius: 50%; background: var(--green); margin-right: 12px; box-shadow: 0 0 16px var(--green); }
.hint { margin-top: 18px; font-family: Arial, sans-serif; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.main-screen { opacity: 0; visibility: hidden; background: radial-gradient(circle at 50% 20%, #1a1a1a, #050505 60%); transition: opacity .45s ease; }
.main-screen.visible { opacity: 1; visibility: visible; }
.main-logo { width: min(86%, 470px); }
.eyebrow { color: var(--green); letter-spacing: .08em; margin-top: 30px; }
h1 { font-size: clamp(54px, 12vw, 118px); margin: 4px 0; line-height: .9; color: var(--yellow); text-shadow: 4px 4px 0 #7e4700; }
.lead { font-family: Arial, sans-serif; font-weight: 700; font-size: clamp(17px, 3vw, 25px); max-width: 620px; margin: 18px auto; }
.status-pill { display: inline-block; margin-top: 8px; padding: 12px 20px; border: 2px solid var(--pink); border-radius: 999px; color: var(--pink); font-family: Arial, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.domain { font-family: Arial, sans-serif; font-weight: 800; font-size: clamp(18px, 3vw, 28px); margin-top: 24px; }
.checkered { position: absolute; left: 0; right: 0; height: 35px; background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0/32px 32px; }
.top-checkered { top: 0; }
.bottom-checkered { bottom: 0; }
.race-transition { position: fixed; inset: 0; z-index: 20; pointer-events: none; display: none; overflow: hidden; }
.race-transition.active { display: block; }
.wipe { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #111 0 35px, #fff 35px 70px); transform: translateX(-110%); animation: wipe .9s cubic-bezier(.7,0,.25,1) forwards; }
.race-word { position: absolute; inset: 0; display: grid; place-items: center; color: var(--green); font-size: min(25vw, 220px); text-shadow: 7px 7px 0 #000; opacity: 0; transform: scale(.4) rotate(-7deg); animation: goPop .72s .15s ease-out forwards; }
@keyframes wipe { 0% { transform: translateX(-110%) skewX(-12deg); } 55% { transform: translateX(0) skewX(-12deg); } 100% { transform: translateX(110%) skewX(-12deg); } }
@keyframes goPop { 0% { opacity: 0; transform: scale(.4) rotate(-7deg); } 45% { opacity: 1; transform: scale(1.12) rotate(2deg); } 100% { opacity: 0; transform: scale(1.55) rotate(0); } }
@media (max-width: 560px) { .intro-card { padding: 18px; } .logo { width: 100%; } .start-button { width: 92%; } }