/* Quiet arcade scenery, kept behind the page content. */
.hero{position:relative;isolation:isolate}
.retro-sky{position:absolute;inset:0 -24px;overflow:hidden;z-index:-1;pointer-events:none;mask-image:linear-gradient(#000 85%,transparent)}
.retro-sky::after{content:'';position:absolute;inset:48% 0 0;background:linear-gradient(transparent 95%,#3671a71c 95%),linear-gradient(90deg,transparent 95%,#3671a71c 95%);background-size:64px 64px;transform:perspective(320px) rotateX(55deg);transform-origin:center bottom;opacity:.5}
.pixel-star{position:absolute;width:3px;height:3px;background:#75b9d9;opacity:.3;animation:pixel-twinkle 7s steps(3,end) infinite;animation-delay:var(--delay)}
.pixel-star:nth-child(5n){width:4px;height:4px;background:#9ce7db;box-shadow:0 -4px #9ce7db,0 4px #9ce7db,-4px 0 #9ce7db,4px 0 #9ce7db}
.hero-copy{position:relative}.hero-copy::after{content:'';display:block;width:64px;height:3px;margin:23px auto -23px;background:repeating-linear-gradient(90deg,#7bc8e1 0 8px,transparent 8px 14px);opacity:.35}
.hero-art .art-inner{position:relative;overflow:hidden}
.hero-art .art-inner::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#04111a 3px 4px);opacity:.12}
.bonus{position:relative;isolation:isolate;overflow:hidden}.bonus::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(#65b6e344 1px,transparent 1px);background-size:16px 16px;mask-image:linear-gradient(90deg,transparent,#000)}
header nav{gap:8px;padding:5px;background:#06111f;border:1px solid #213b57;box-shadow:inset 0 2px #020a13}
header nav a{position:relative;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid transparent;color:#a8bfd8;transition:background .15s,color .15s,transform .15s,box-shadow .15s;white-space:nowrap;font-size:17px}
header nav a::before,.mobile-nav a::before{content:'';display:block;width:8px;height:8px;flex-shrink:0;border:2px solid #567592;box-shadow:2px 2px #020b16}
header nav a:hover,header nav a:focus-visible,header nav a[aria-current]{background:#163c62;border-color:#4c7ca5;color:#fff;box-shadow:inset 0 2px #699ec1,0 3px #020911;transform:translateY(-2px)}
header nav a:hover::before,header nav a:focus-visible::before,header nav a[aria-current]::before{background:#8de2c4;border-color:#b9ffe9;box-shadow:2px 2px #1e6d64}
header nav a:active{transform:translateY(1px);box-shadow:inset 0 2px #04162a}
.mobile-nav a{display:flex;align-items:center;gap:14px;border:1px solid #304f6c;background:#112c45;box-shadow:inset 0 2px #3d617e,0 3px #061424;margin:8px 0;padding:12px 16px}
.mobile-nav a:hover,.mobile-nav a:focus-visible{background:#21527c;color:#fff}.mobile-nav a:active{transform:translateY(2px)}
@keyframes pixel-twinkle{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:.65;transform:translateY(-4px)}}
@media(max-width:1100px){header{gap:15px}header nav a{font-size:15px;padding:9px 10px;gap:7px}header nav{gap:3px}}
@media(max-width:760px){header nav{display:none}.retro-sky{inset:0 -10px}.pixel-star:nth-child(n+19){display:none}}
@media(prefers-reduced-motion:reduce){.pixel-star{animation:none}header nav a{transition:none}html{scroll-behavior:auto}}
@media(max-width:480px){.hero h1{font-size:44px}.hero-actions{flex-direction:column;gap:18px}.hero-actions .button{width:100%;max-width:310px;white-space:nowrap}.hero-actions .text-link{white-space:nowrap}.hero .intro{line-height:1.65}}