:root { --navy:#071329; --navy-2:#0c1d3d; --panel:#0d2043; --line:#29466f; --blue:#69c7ff; --blue-strong:#319be6; --white:#f5f9ff; --muted:#a3b5ce; --red:#ff6881; --green:#73e6ad; --shadow:0 20px 55px rgba(0,0,0,.28); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; color:var(--white); background:var(--navy); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; overflow-x:hidden; } body::before { content:""; position:fixed; inset:0; z-index:-2; background:radial-gradient(circle at 80% 10%,#173a70 0,transparent 29rem),linear-gradient(145deg,#071329 0%,#081a38 52%,#061124 100%); } a { color:inherit; text-decoration:none; } button,input,select { font:inherit; } button { cursor:pointer; } .pixel-stars { position:fixed; inset:0; pointer-events:none; z-index:-1; overflow:hidden; } .star { position:absolute; width:3px; height:3px; background:#dff3ff; opacity:.42; animation:twinkle var(--speed) ease-in-out infinite alternate; } @keyframes twinkle { to { opacity:.95; transform:translateY(-12px); } }
.site-header { width:min(1180px,calc(100% - 40px)); height:84px; margin:auto; display:flex; align-items:center; justify-content:space-between; } .brand { display:inline-flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.08em; font-size:.82rem; } .brand-mark { display:grid; place-items:center; width:31px; height:31px; color:var(--navy); background:var(--blue); font-size:.62rem; letter-spacing:-.08em; box-shadow:4px 4px 0 #1f6196; } nav { display:flex; align-items:center; gap:28px; color:var(--muted); font-size:.86rem; } nav a,footer a { transition:color .2s; } nav a:hover,footer a:hover { color:var(--blue); }
.hero { width:min(1180px,calc(100% - 40px)); min-height:610px; margin:auto; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; } .eyebrow,.step-number { color:var(--blue); letter-spacing:.16em; font-weight:800; font-size:.7rem; margin:0 0 15px; } h1,h2,h3,h4 { margin:0; font-weight:950; letter-spacing:.035em; } h1 { font-size:clamp(2.55rem,5vw,4.8rem); line-height:.98; } h1 em { color:var(--blue); font-style:normal; } .hero-text { max-width:530px; color:var(--muted); line-height:1.65; font-size:1.05rem; margin:25px 0 30px; } .hero-actions,.form-actions { display:flex; gap:12px; flex-wrap:wrap; } .button { min-height:46px; border:1px solid transparent; padding:0 18px; display:inline-flex; justify-content:center; align-items:center; gap:12px; font-weight:800; font-size:.86rem; letter-spacing:.015em; transition:transform .18s,box-shadow .18s,background .18s; } .button:hover { transform:translateY(-2px); } .button:active { transform:translateY(0); } .button:focus-visible,.reset-button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid rgba(105,199,255,.45); outline-offset:3px; } .button-primary { color:#052044; background:var(--blue); box-shadow:4px 4px 0 #176da9; } .button-primary:hover { background:#a4e1ff; box-shadow:6px 6px 0 #176da9; } .button-ghost { border-color:#476689; background:rgba(13,32,67,.5); color:var(--white); } .button-ghost:hover { border-color:var(--blue); background:#112b56; }
.horse-stage { min-height:430px; position:relative; overflow:hidden; border:1px solid #315985; background:#0d2550; box-shadow:var(--shadow),8px 8px 0 #061024; } .stage-grid { position:absolute; inset:0; opacity:.42; background-image:linear-gradient(rgba(105,199,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(105,199,255,.11) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(to bottom,black,transparent); } .horse-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; } .horse-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:#8ed6ff; z-index:0; }.horse-placeholder[hidden] { display:none; } .horse-placeholder span { font-size:10rem; line-height:.8; text-shadow:7px 7px 0 #143b72; } .horse-placeholder strong { margin-top:24px; letter-spacing:.13em; font-size:1.05rem; line-height:1.35; } .horse-placeholder small { color:var(--muted); margin-top:8px; } .stage-label { position:absolute; bottom:20px; left:20px; z-index:2; color:var(--white); font-size:.65rem; font-weight:800; letter-spacing:.12em; padding:9px 11px; background:rgba(4,14,31,.75); } .stage-label i { display:inline-block; width:7px;height:7px;background:var(--green);margin-right:7px; }
.whitelist-section { padding:100px 20px; background:rgba(3,12,27,.4); } .section-heading,.form-shell,.how-it-works { width:min(780px,100%); margin:auto; } .section-heading { text-align:center; } h2 { font-size:clamp(2rem,4vw,3rem); } .section-heading>p:last-child { color:var(--muted); line-height:1.6; margin:14px auto 35px; max-width:570px; }.form-shell { border:1px solid #2a4a73; background:linear-gradient(150deg,rgba(18,44,87,.9),rgba(8,22,47,.95)); box-shadow:var(--shadow); } .progress { list-style:none; padding:20px 24px; margin:0; display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid #2a4a73; } .progress li { display:flex; align-items:center; gap:8px; color:#6f88aa; font-size:.72rem; font-weight:800; letter-spacing:.04em; }.progress span { display:grid; place-items:center; flex:0 0 25px; height:25px; border:1px solid #496688; font-size:.62rem; }.progress .active { color:var(--white); }.progress .active span { background:var(--blue); color:var(--navy); border-color:var(--blue); }.progress .done span { background:var(--green); color:var(--navy); border-color:var(--green); }.form-step { padding:42px; } h3 { font-size:1.85rem; }.step-intro { color:var(--muted); margin:9px 0 27px; line-height:1.5; }.field { margin-bottom:20px; } label { display:block; font-weight:750; font-size:.82rem; margin-bottom:9px; }.input-wrap { position:relative; }.input-wrap>span { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--blue); font-weight:800; }.input-wrap span+input { padding-left:29px; } input,select { width:100%; height:49px; border:1px solid #3b5e89; color:var(--white); background:#07182f; padding:0 14px; transition:border-color .2s,box-shadow .2s; } select { cursor:pointer; } select option { background:#0c1d3d; } input::placeholder { color:#7089a9; } input:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(105,199,255,.12); outline:none; }.valid-icon { display:none; position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--green); font-style:normal; font-weight:900; }.is-valid input+.valid-icon { display:block; }.is-invalid input { border-color:var(--red); }.error { min-height:18px; color:#ff9aaa; font-size:.75rem; margin:6px 0 0; }.form-actions { margin-top:30px; justify-content:space-between; }.form-actions.end { justify-content:flex-end; }
.mission-list { display:grid; gap:13px; }.mission-card { display:grid; grid-template-columns:42px 1fr; column-gap:15px; padding:18px; border:1px solid #34577f; background:rgba(5,20,44,.46); }.mission-icon { grid-row:span 2; display:grid; place-items:center; width:38px;height:38px;background:#15355f;color:var(--blue);font-size:.68rem;font-weight:900; }.mission-card h4 { font-size:1rem; }.mission-card p { margin:6px 0 9px;color:var(--muted);font-size:.84rem; }.text-link { color:var(--blue); font-size:.82rem;font-weight:800; }.text-link:hover { text-decoration:underline; }.check-row { grid-column:1/-1; display:flex; align-items:center; gap:10px; width:max-content; max-width:100%; margin:17px 0 0; color:#d5e3f3; font-size:.78rem; font-weight:600; cursor:pointer; }.check-row input { position:absolute; opacity:0; width:1px; height:1px; }.check-row span { display:grid; place-items:center; flex:0 0 18px; height:18px; border:1px solid #6681a5; background:#07182f; }.check-row input:checked+span { border-color:var(--green); background:var(--green); }.check-row input:checked+span::after { content:"✓"; color:#052044; font-size:.75rem;font-weight:950; }.confirmation { grid-column:auto; margin-top:4px; }.success { text-align:center; }.success-badge { display:grid; place-items:center; width:64px;height:64px;margin:0 auto 20px;border:1px solid var(--green);border-radius:50%;color:var(--green);font-size:2rem; }.summary { text-align:left; margin:30px 0; border:1px solid #34577f; }.summary div { display:flex; justify-content:space-between; gap:15px; padding:13px 15px; border-bottom:1px solid #29496e; }.summary div:last-child { border:0; }.summary dt { color:var(--muted); font-size:.75rem; }.summary dd { margin:0; font-weight:800; font-size:.78rem; word-break:break-all; }.reset-button { display:block; margin:0 auto 22px; padding:5px; border:0; color:#7590b4; background:transparent; font-size:.72rem; text-decoration:underline; }.reset-button:hover { color:var(--blue); }
.how-it-works { padding:95px 0; text-align:center; }.how-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:34px; border-top:1px solid #2a4a73; border-left:1px solid #2a4a73; }.how-grid div { padding:22px 12px; border-right:1px solid #2a4a73; border-bottom:1px solid #2a4a73; text-align:left; }.how-grid span { color:var(--blue); font-weight:900; font-size:.72rem; }.how-grid p { margin:12px 0 0; font-size:.86rem; font-weight:700; line-height:1.4; } footer { width:min(1180px,calc(100% - 40px)); margin:auto; padding:32px 0; border-top:1px solid #29476d; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font-size:.76rem; }footer>div{display:flex;gap:16px;}footer p{margin:0;}
@media (max-width:720px) { .site-header { height:70px;width:min(100% - 28px,1180px); } nav { gap:14px;font-size:.76rem; } nav a:nth-child(2) { display:none; }.hero { width:min(100% - 28px,1180px); grid-template-columns:1fr; padding:45px 0 70px; gap:38px; }.horse-stage { min-height:330px; }.progress { padding:15px 12px; }.progress li { flex-direction:column; gap:5px; text-align:center; }.progress b { font-size:.58rem; }.form-step { padding:28px 20px; }.mission-card { padding:15px; }.how-it-works { width:min(100% - 28px,780px); }.how-grid { grid-template-columns:1fr 1fr; }.form-actions .button { flex:1; }.summary div { display:block; }.summary dd { margin-top:5px; } footer { width:min(100% - 28px,1180px); flex-wrap:wrap; }.brand { font-size:.75rem; } } @media (max-width:390px) { nav a:first-child { display:none; }.progress b { display:none; } }

/* Brand artwork palette and race-banner presentation. */
:root { --navy:#07131c; --navy-2:#0e242f; --panel:#102c35; --line:#376674; --blue:#33bff5; --blue-strong:#0799d6; --lime:#c7ff00; --white:#f7fbeb; --muted:#b3c7bf; --green:#c7ff00; --shadow:0 20px 55px rgba(0,0,0,.32); }
body::before { background:radial-gradient(circle at 80% 8%,rgba(51,191,245,.28) 0,transparent 29rem),radial-gradient(circle at 8% 75%,rgba(199,255,0,.12) 0,transparent 26rem),linear-gradient(145deg,#061116 0%,#0a2730 52%,#061116 100%); }
.star { background:#efffc2; }.brand-logo { width:37px; height:37px; object-fit:cover; object-position:center; border:1px solid rgba(199,255,0,.7); background:var(--lime); box-shadow:3px 3px 0 var(--blue-strong); }.brand-mark { display:none; } nav a:hover,footer a:hover { color:var(--lime); }
.horse-stage { border-color:rgba(199,255,0,.58); background:var(--lime); box-shadow:var(--shadow),8px 8px 0 #051216; }.stage-grid { z-index:2; opacity:.22; background-image:linear-gradient(rgba(5,18,22,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(5,18,22,.22) 1px,transparent 1px); pointer-events:none; }.horse-stage img { object-fit:contain; padding:18px; }.stage-label { z-index:3; color:var(--navy); font-weight:900; background:rgba(247,251,235,.86); }
.button-primary { color:#071b20; background:var(--lime); box-shadow:4px 4px 0 #669400; }.button-primary:hover { background:#e2ff74; box-shadow:6px 6px 0 #669400; }.button-ghost:hover { border-color:var(--lime); background:#15353a; }.eyebrow,.step-number,h1 em,.text-link,.how-grid span { color:var(--lime); }.progress .active span { background:var(--lime); border-color:var(--lime); }.form-shell { border-color:#3f7470; background:linear-gradient(150deg,rgba(16,50,57,.92),rgba(5,20,27,.96)); }.mission-card { border-color:#397070; background:rgba(5,27,33,.5); }.mission-icon { color:var(--lime); background:#16434a; }.check-row input:checked+span { border-color:var(--lime); background:var(--lime); }
.race-strip { position:relative; min-height:260px; overflow:hidden; border-top:1px solid rgba(199,255,0,.7); border-bottom:1px solid rgba(199,255,0,.7); background:#0a1e24; }.race-strip img { display:block; width:100%; height:clamp(210px,27vw,370px); object-fit:cover; object-position:center; image-rendering:auto; }.race-strip::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(4,18,22,.52),transparent 44%,rgba(4,18,22,.25)); }.race-strip-caption { position:absolute; z-index:1; left:max(20px,calc((100% - 1180px) / 2)); bottom:28px; display:grid; gap:6px; padding:12px 15px; border-left:4px solid var(--lime); background:rgba(4,18,22,.82); }.race-strip-caption span { color:var(--lime); font-size:.64rem; font-weight:900; letter-spacing:.16em; }.race-strip-caption strong { font-size:1.25rem; letter-spacing:.08em; } @media (max-width:720px) { .race-strip { min-height:180px; }.race-strip img { height:190px; }.race-strip-caption { left:14px; bottom:14px; }.race-strip-caption strong { font-size:1rem; } }

.roadmap { position:relative; overflow:hidden; padding:105px 20px 118px; background:linear-gradient(180deg,rgba(12,43,49,.65),rgba(4,17,22,.96)); }.roadmap::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(199,255,0,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(199,255,0,.25) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom,transparent,black 14%,black 86%,transparent); }.roadmap-intro,.roadmap-list { position:relative; width:min(940px,100%); margin-inline:auto; }.roadmap-intro { text-align:center; }.roadmap-intro>p:last-child { max-width:590px; margin:15px auto 48px; color:var(--muted); line-height:1.65; }.roadmap-list { list-style:none; padding:0; margin-top:0; }.roadmap-list::before { content:""; position:absolute; left:26px; top:25px; bottom:25px; width:1px; background:linear-gradient(var(--lime),var(--blue),transparent); }.roadmap-card { position:relative; display:grid; grid-template-columns:54px 1fr; gap:21px; padding-bottom:24px; }.roadmap-card:last-child { padding-bottom:0; }.roadmap-marker { position:relative; z-index:1; display:grid; place-items:center; width:53px; height:53px; color:#061419; background:var(--lime); border:4px solid #0b2b32; box-shadow:0 0 0 1px rgba(199,255,0,.7); font-size:.76rem; font-weight:950; }.roadmap-card article { padding:26px 28px; border:1px solid rgba(86,152,149,.6); background:linear-gradient(120deg,rgba(20,61,66,.9),rgba(7,27,34,.94)); box-shadow:8px 8px 0 rgba(1,11,15,.32); }.roadmap-phase { margin:0 0 7px; color:var(--lime); font-size:.66rem; font-weight:900; letter-spacing:.16em; }.roadmap-card h3 { font-size:clamp(1.16rem,2vw,1.45rem); }.roadmap-card article>p:not(.roadmap-phase) { margin:11px 0 13px; color:#d4e4dd; line-height:1.55; font-size:.9rem; }.roadmap-card ul { display:grid; gap:8px; padding:0; margin:0; list-style:none; color:var(--muted); font-size:.84rem; line-height:1.48; }.roadmap-card li { position:relative; padding-left:17px; }.roadmap-card li::before { content:""; position:absolute; left:0; top:.52em; width:6px; height:6px; background:var(--blue); box-shadow:2px 2px 0 #0b6386; }.roadmap-card strong { color:var(--lime); } @media (max-width:720px) { .roadmap { padding:76px 14px 85px; }.roadmap-list::before { left:21px; }.roadmap-card { grid-template-columns:44px 1fr; gap:14px; }.roadmap-marker { width:43px; height:43px; border-width:3px; font-size:.68rem; }.roadmap-card article { padding:21px 18px; }.roadmap-card ul { font-size:.8rem; } }

.collection-showcase { width:min(1180px,calc(100% - 40px)); padding:95px 0 108px; margin:auto; }.collection-heading { max-width:560px; margin-bottom:32px; }.collection-heading>p:last-child { margin:12px 0 0; color:var(--muted); line-height:1.6; }.nft-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.nft-card { position:relative; min-width:0; overflow:hidden; margin:0; border:2px solid var(--card-accent); background:#10222a; box-shadow:6px 6px 0 rgba(2,11,16,.9); transition:transform .22s ease,box-shadow .22s ease; }.nft-card:hover { z-index:1; transform:translateY(-8px); box-shadow:9px 12px 0 rgba(2,11,16,.9); }.nft-card img { display:block; width:100%; aspect-ratio:1/1.14; object-fit:cover; object-position:center; }.nft-card figcaption { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 12px; border-top:2px solid var(--card-accent); background:#091b21; }.nft-card figcaption span { color:var(--card-accent); font-size:.66rem; font-weight:900; letter-spacing:.08em; }.nft-card figcaption strong { color:var(--white); font-size:.75rem; letter-spacing:.02em; }.nft-pink { --card-accent:#ff75ae; }.nft-purple { --card-accent:#d05dff; }.nft-lime { --card-accent:#c7ff00; }.nft-moon { --card-accent:#56d9ff; } @media (max-width:720px) { .collection-showcase { width:min(100% - 28px,1180px); padding:72px 0 80px; }.nft-strip { display:flex; overflow-x:auto; padding:4px 2px 14px; scroll-snap-type:x mandatory; }.nft-card { flex:0 0 min(71vw,290px); scroll-snap-align:start; }.nft-strip::-webkit-scrollbar { height:7px; }.nft-strip::-webkit-scrollbar-thumb { background:var(--lime); }.nft-strip::-webkit-scrollbar-track { background:#12303a; } }
.network-fixed { display:flex; align-items:center; justify-content:space-between; min-height:49px; margin-bottom:20px; padding:0 14px; border:1px solid #3b5e89; background:#07182f; }.network-fixed span { color:var(--muted); font-size:.82rem; font-weight:750; }.network-fixed strong { color:var(--lime); font-size:.86rem; }

.application-layout { display:grid; grid-template-columns:minmax(0,1fr) 230px; align-items:stretch; }.application-layout form { min-width:0; }.race-pass { position:relative; display:flex; flex-direction:column; min-height:100%; overflow:hidden; padding:22px 19px 18px; color:#071a21; background:var(--lime); border-left:1px dashed #547900; box-shadow:inset 0 0 0 5px rgba(247,251,235,.33); }.race-pass::before,.race-pass::after { content:""; position:absolute; left:-10px; width:19px; height:19px; border-radius:50%; background:#0d2630; }.race-pass::before { top:20%; }.race-pass::after { bottom:20%; }.pass-topline,.pass-footer { display:flex; justify-content:space-between; gap:9px; font-size:.58rem; font-weight:950; letter-spacing:.11em; }.pass-topline span:last-child { color:#386001; }.pass-emblem { display:grid; place-items:center; width:54px; height:54px; margin:29px 0 18px; color:var(--lime); background:#071a21; box-shadow:5px 5px 0 rgba(2,13,17,.35); font-size:2.4rem; }.pass-kicker { margin:0 0 8px; color:#426800; font-size:.6rem; font-weight:900; letter-spacing:.1em; }.race-pass h3 { font-size:1.28rem; line-height:1.04; color:#071a21; }.pass-details { display:grid; gap:12px; margin:25px 0 auto; padding-top:15px; border-top:1px solid rgba(7,26,33,.38); }.pass-details div { display:grid; gap:3px; }.pass-details span { color:#406600; font-size:.55rem; font-weight:900; letter-spacing:.13em; }.pass-details strong { overflow:hidden; color:#071a21; font-size:.67rem; letter-spacing:.025em; text-overflow:ellipsis; white-space:nowrap; }.pass-footer { align-items:center; margin-top:20px; padding-top:13px; border-top:1px solid rgba(7,26,33,.38); }.pass-status { color:#284900; }.pass-checker { width:33px; height:20px; opacity:.55; background:repeating-linear-gradient(90deg,#071a21 0 4px,transparent 4px 8px),repeating-linear-gradient(#071a21 0 4px,transparent 4px 8px); background-size:8px 8px; } @media (max-width:850px) { .application-layout { grid-template-columns:1fr; }.race-pass { min-height:260px; border-top:1px dashed #547900; border-left:0; }.pass-emblem { margin:20px 0 13px; }.pass-details { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:16px; }.pass-footer { margin-top:16px; }.race-pass::before,.race-pass::after { left:auto; right:auto; width:19px; height:19px; }.race-pass::before { top:-10px; left:20%; }.race-pass::after { top:-10px; right:20%; bottom:auto; } } @media (max-width:520px) { .race-pass { min-height:270px; }.pass-details { grid-template-columns:1fr; gap:9px; }.race-pass h3 { font-size:1.15rem; } }
.success-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }.success-actions .button { min-width:190px; }
.pass-modal[hidden] { display:none; }.pass-modal { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:20px; background:rgba(2,13,17,.8); backdrop-filter:blur(8px); }.pass-modal-card { position:relative; width:min(100%,500px); max-height:94vh; overflow:auto; padding:29px 24px 25px; text-align:center; border:1px solid rgba(199,255,0,.7); background:#0b252d; box-shadow:12px 12px 0 rgba(0,0,0,.45); animation:pass-pop .25s ease-out; }.pass-modal-card h2 { margin-bottom:19px; font-size:1.65rem; }.modal-close { position:absolute; top:9px; right:12px; width:31px; height:31px; border:0; color:var(--white); background:transparent; font-size:1.85rem; line-height:1; }.modal-close:hover { color:var(--lime); }.pass-preview-image { display:block; width:min(100%,390px); height:auto; margin:auto; border:1px solid var(--lime); box-shadow:6px 6px 0 #06151b; }.modal-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:20px; }.modal-actions .button { min-width:165px; } @keyframes pass-pop { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } } @media (max-width:520px) { .pass-modal { padding:12px; }.pass-modal-card { padding:25px 14px 18px; }.pass-modal-card h2 { font-size:1.36rem; }.modal-actions .button { width:100%; } }