:root { --ink:#102052; --sky:#bfeeff; --yellow:#ffd84d; --pink:#ff7db9; --blue:#3e7bff; --white:#fffdf5; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--sky); }
body { min-height:100vh; margin:0; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; background:linear-gradient(155deg,#c9f4ff 0%,#f4eaff 52%,#ffe6a4 100%); }
a { color:inherit; text-decoration:none; }
.site-header,footer,main { width:min(1120px,calc(100% - 40px)); margin:auto; }
.site-header { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid rgba(16,32,82,.16); }
.brand { display:flex; align-items:center; gap:12px; font-size:12px; font-weight:900; letter-spacing:.16em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:12px 12px 12px 3px; color:var(--ink); background:var(--yellow); font-size:20px; transform:rotate(-7deg); }
.status { font-size:10px; font-weight:800; letter-spacing:.15em; } .status span { color:#ffad00; font-size:17px; vertical-align:-2px; }
.hero { position:relative; display:flex; align-items:center; justify-content:space-between; padding:72px 0 54px; }
.eyebrow { margin:0 0 14px; color:#e44d92; font-size:10px; font-weight:900; letter-spacing:.22em; }
h1 { margin:0; font-size:clamp(50px,8vw,96px); line-height:.9; letter-spacing:-.08em; } h1 span { color:var(--blue); }
.lede { max-width:390px; margin:25px 0 0; font-size:16px; line-height:1.5; }
.orbit { position:relative; width:210px; height:210px; border:2px dashed rgba(62,123,255,.35); border-radius:50%; transform:rotate(-18deg); } .orbit span { position:absolute; color:#ffae1c; font-size:26px; } .orbit span:nth-child(1){top:4px;left:78px}.orbit span:nth-child(2){right:12px;bottom:48px;color:#ff78b9}.orbit span:nth-child(3){left:18px;bottom:28px}
.game-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-bottom:76px; }
.game-card { overflow:hidden; border:3px solid var(--ink); border-radius:24px; background:var(--white); box-shadow:8px 9px 0 rgba(16,32,82,.13); transition:transform .18s,box-shadow .18s; } .game-card:hover { transform:translateY(-6px) rotate(-.5deg); box-shadow:11px 15px 0 rgba(16,32,82,.15); }
.card-art { position:relative; display:grid; place-items:center; height:230px; overflow:hidden; } .neon .card-art { background:linear-gradient(145deg,#10173a,#5d2da0); } .rocket .card-art { background:linear-gradient(145deg,#52c9ff,#ffc96c); }
.card-art i { position:absolute; color:#fff; font-style:normal; animation:twinkle 1.7s infinite alternate; } .card-art i:nth-child(2){top:24px;left:18%;}.card-art i:nth-child(3){right:17%;top:58px;animation-delay:.5s}.card-art i:nth-child(4){left:35%;bottom:30px;animation-delay:1s}
.mini-ship { color:#c7ff42; font-size:70px; filter:drop-shadow(0 0 18px #5ceeff); transform:rotate(180deg); } .mini-rocket { font-size:70px; filter:drop-shadow(0 8px 0 rgba(255,90,90,.3)); }
.card-info { padding:24px 26px 27px; } .card-info p { margin:0 0 7px; color:#e44d92; font-size:10px; font-weight:900; letter-spacing:.2em; } .card-info h2 { margin:0 0 9px; font-size:29px; letter-spacing:-.05em; } .card-info span { color:rgba(16,32,82,.66); font-size:13px; } .card-info b { float:right; color:var(--blue); font-size:11px; letter-spacing:.1em; }
footer { display:flex; justify-content:space-between; padding:20px 0 30px; color:rgba(16,32,82,.5); font-size:9px; font-weight:800; letter-spacing:.15em; }
@keyframes twinkle { from{opacity:.35;transform:scale(.8)} to{opacity:1;transform:scale(1.2)} }
@media(max-width:700px){.site-header,footer,main{width:calc(100% - 28px)}.site-header{height:62px}.hero{padding:48px 0 36px}.orbit{position:absolute;right:-30px;top:26px;width:120px;height:120px;opacity:.8}.orbit span{font-size:16px}.hero-copy{position:relative;z-index:1}.lede{max-width:260px;font-size:14px}.game-grid{grid-template-columns:1fr;gap:18px;padding-bottom:44px}.card-art{height:175px}.card-info{padding:20px}.card-info h2{font-size:26px}footer{font-size:7px}}