:root {
  --bg:#080d18;
  --surface:#111827;
  --surface-2:#182235;
  --line:#28354b;
  --text:#f4f6f1;
  --muted:#a8b1c1;
  --lime:#bdff44;
  --pink:#ff668f;
  --cyan:#60d9ff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background-image:radial-gradient(circle at 15% 5%,#23351e 0,transparent 26%),radial-gradient(circle at 85% 35%,#25192e 0,transparent 28%)}
a{color:inherit}
.site-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,76px);border-bottom:1px solid var(--line);background:#090f1bdb;backdrop-filter:blur(14px);position:relative;z-index:3}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:850;letter-spacing:-.02em}
.logo em{color:var(--lime);font-style:normal}
.logo-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--lime);color:#0c121d;box-shadow:0 0 30px #bdff4438}
.status{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
main{overflow:hidden}
.hero{min-height:680px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);align-items:center;gap:7vw;padding:clamp(70px,9vw,130px) clamp(24px,7vw,110px)}
.eyebrow{margin:0;color:var(--lime);font-size:11px;font-weight:850;letter-spacing:.2em}
.hero h1{font-size:clamp(58px,8vw,116px);line-height:.88;letter-spacing:-.072em;margin:22px 0 30px;max-width:850px}
.hero h1 span{color:var(--pink)}
.intro{max-width:630px;color:#c6ccd6;font-size:clamp(16px,1.5vw,20px);line-height:1.65}
.hero-action{display:inline-flex;gap:20px;align-items:center;margin-top:24px;padding:13px 0;color:var(--text);font-weight:800;text-decoration:none;border-bottom:2px solid var(--lime)}
.hero-action span{color:var(--lime)}
.orbit{position:relative;aspect-ratio:1;max-width:570px;margin:auto;display:grid;place-items:center}
.orbit::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,#39495c 0,#202d3e 35%,#101827 68%);box-shadow:inset -38px -28px 60px #050912aa,0 0 90px #60d9ff1d}
.planet{position:relative;z-index:2;width:34%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--lime);color:#101620;font-size:clamp(38px,5vw,72px);font-weight:950;letter-spacing:-.08em;box-shadow:0 0 80px #bdff4450}
.orbit-ring{position:absolute;border:1px solid #7e91ab55;border-radius:50%;transform:rotate(-22deg)}
.ring-one{inset:3%}
.ring-two{inset:18%;transform:rotate(38deg)}
.moon{position:absolute;border-radius:50%;z-index:2}
.moon-one{width:28px;height:28px;background:var(--pink);top:13%;right:18%;box-shadow:0 0 25px #ff668f66}
.moon-two{width:16px;height:16px;background:var(--cyan);bottom:20%;left:9%;box-shadow:0 0 22px #60d9ff77}
.games{padding:90px clamp(24px,7vw,110px) 120px;border-top:1px solid var(--line);background:#0b111ddd}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:38px}
.section-heading h2{font-size:clamp(38px,5vw,64px);letter-spacing:-.055em;margin:8px 0 0}
.section-heading>p{color:var(--muted)}
.game-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.45fr);gap:22px}
.game-card{border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,#182235,#101725);overflow:hidden;box-shadow:0 22px 70px #0005}
.anatomy-card{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(320px,1.15fr)}
.card-art{min-height:430px;position:relative;overflow:hidden;background:#281a2b;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:58px 58px}
.card-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 15%,#180d1fbb 75%)}
.cell{position:absolute;width:110px;height:110px;border:3px solid #f7d2df66;border-radius:38% 62% 58% 42%;background:#ff668f33;box-shadow:inset 0 0 30px #ff668f33}
.cell-a{top:9%;left:12%;transform:rotate(18deg)}
.cell-b{top:28%;right:10%;transform:rotate(-30deg);background:#60d9ff2b}
.cell-c{bottom:10%;left:17%;transform:rotate(55deg);background:#bdff4427}
.cell-d{bottom:-5%;right:15%;transform:rotate(4deg)}
.specimen{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:132px;height:132px;border-radius:50%;background:var(--lime);color:#101620;font-size:48px;font-weight:950;box-shadow:0 0 70px #bdff4455}
.card-content{padding:clamp(28px,4vw,54px);display:flex;flex-direction:column;justify-content:center}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tags span{padding:6px 9px;border:1px solid #3b4a61;border-radius:999px;color:#cbd2dc;font-size:11px}
.card-content h3,.coming-card h3{font-size:clamp(32px,4vw,52px);letter-spacing:-.05em;margin:24px 0 13px}
.card-content p,.coming-card p{color:var(--muted);line-height:1.65}
.play-button{display:flex;align-items:center;justify-content:space-between;margin-top:28px;padding:16px 18px;border-radius:12px;background:var(--lime);color:#101620;text-decoration:none;font-weight:900}
.play-button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.coming-card{min-height:360px;padding:34px;display:flex;flex-direction:column;justify-content:space-between}
.coming-icon{display:grid;place-items:center;width:62px;height:62px;border:1px dashed #62718a;border-radius:18px;color:#7e8ca2;font-size:32px}
.coming-card h3{font-size:30px}
footer{display:flex;justify-content:space-between;gap:20px;padding:30px clamp(24px,7vw,110px);border-top:1px solid var(--line);color:var(--muted);font-size:12px}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:80px}.orbit{width:min(500px,90vw)}
  .game-grid{grid-template-columns:1fr}.anatomy-card{grid-template-columns:1fr}.card-art{min-height:330px}
}
@media(max-width:560px){
  .site-header{height:66px}.status{display:none}.hero{padding-inline:20px;min-height:auto}.hero h1{font-size:56px}
  .games{padding:70px 20px}.section-heading{align-items:start;flex-direction:column}.section-heading>p{margin:0}
  .card-content{padding:26px}.coming-card{min-height:280px}footer{flex-direction:column;padding-inline:20px}
}
@media(prefers-reduced-motion:no-preference){
  .moon-one{animation:float 5s ease-in-out infinite}.moon-two{animation:float 6s ease-in-out infinite reverse}
  @keyframes float{50%{transform:translateY(-16px)}}
}