@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--ink:#f6f5ff;--muted:#a9a7bf;--bg:#0b0914}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}a{color:inherit}main{min-height:100vh;overflow:hidden;position:relative;background:radial-gradient(circle at 50% -10%,#2c1b4b 0,transparent 35%)}
.ambient{position:absolute;border-radius:50%;filter:blur(80px);opacity:.16;pointer-events:none}.ambient.one{width:480px;height:480px;background:#e74aff;top:130px;left:-250px}.ambient.two{width:420px;height:420px;background:#3a8cff;top:650px;right:-260px}
.hero{min-height:600px;max-width:1180px;margin:auto;padding:125px 28px 90px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}.hero:before,.hero:after{content:'';position:absolute;border:1px solid #ffffff12;border-radius:50%;width:580px;height:580px;top:-250px}.hero:after{width:780px;height:780px;top:-360px}.eyebrow{padding:9px 15px;border:1px solid #ffffff24;border-radius:99px;background:#ffffff09;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#cbc8d8}.eyebrow span{color:#7bedc8;margin-right:8px;text-shadow:0 0 10px #7bedc8}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0}h1{max-width:880px;font-size:clamp(52px,8vw,102px);line-height:.91;letter-spacing:-.065em;margin:32px 0 28px;position:relative;z-index:1}h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px #af8dff;filter:drop-shadow(0 0 20px #a25bff44)}.hero>p{max-width:610px;font-size:18px;line-height:1.65;color:var(--muted);margin:0}.scroll-hint{margin-top:40px;text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;color:#d9d6e4}.scroll-hint span{display:inline-grid;place-items:center;width:29px;height:29px;margin-left:8px;border-radius:50%;background:#8466ed;transition:.2s}.scroll-hint:hover span{transform:translateY(4px)}
.collection{max-width:1180px;margin:auto;padding:70px 28px 115px;position:relative}.section-title{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:40px}.kicker{display:block;color:#a68cff;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:700;margin-bottom:12px}.section-title h2{font-size:clamp(32px,5vw,54px);letter-spacing:-.045em}.section-title>p{max-width:340px;color:var(--muted);line-height:1.6;margin:0}.game-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}.game-card{grid-column:span 3;background:linear-gradient(145deg,#1b1728,#12101c);border:1px solid #ffffff11;border-radius:22px;overflow:hidden;transition:transform .25s,border-color .25s;box-shadow:0 16px 50px #0003}.game-card:nth-child(1),.game-card:nth-child(4),.game-card:nth-child(7),.game-card:nth-child(8){grid-column:span 6}.game-card:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--accent),transparent 45%)}
.preview{height:220px;position:relative;overflow:hidden;background:#24202f;display:block;text-decoration:none;cursor:pointer}.preview:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}.game-card:nth-child(1) .preview,.game-card:nth-child(4) .preview,.game-card:nth-child(7) .preview,.game-card:nth-child(8) .preview{height:270px}.preview img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s}.preview.icon-preview img{object-fit:contain;background:linear-gradient(145deg,color-mix(in srgb,var(--accent),#111 65%),#111);padding:32px}.game-card:hover .preview img{transform:scale(1.04)}.preview:after{content:'';position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,#12101caa);pointer-events:none}.number{position:absolute;top:14px;left:15px;padding:5px 8px;border-radius:8px;background:#0a0716aa;backdrop-filter:blur(8px);font:600 11px 'Space Grotesk';letter-spacing:.12em;z-index:1}.play-dot{position:absolute;right:17px;bottom:15px;width:45px;height:45px;border-radius:50%;display:grid;place-items:center;padding-left:3px;background:var(--accent);color:#0b0914;font-size:13px;box-shadow:0 6px 22px color-mix(in srgb,var(--accent),transparent 50%);z-index:1;transition:transform .2s}.preview:hover .play-dot{transform:scale(1.1)}
.card-body{padding:25px 25px 27px}.genre{font-size:11px;text-transform:uppercase;letter-spacing:.15em;font-weight:700;color:var(--accent)}.card-body h3{font-size:27px;letter-spacing:-.03em;margin:8px 0 11px}.card-body p{color:var(--muted);line-height:1.6;font-size:14px;margin:0 0 22px;min-height:68px}.play-link{display:flex;align-items:center;justify-content:space-between;text-decoration:none;font-size:14px;font-weight:700;border-top:1px solid #ffffff13;padding-top:18px}.play-link span{color:var(--accent);font-size:20px;transition:transform .2s}.play-link:hover span{transform:translate(3px,-3px)}
footer{max-width:1124px;margin:auto;padding:35px 0 45px;border-top:1px solid #ffffff18;display:flex;align-items:center;gap:28px;color:#777487;font-size:13px}.footer-mark{font:700 19px 'Space Grotesk';letter-spacing:-.08em;color:#fff}.footer-mark span{color:#a68cff}footer p{flex:1;margin:0}footer a{text-decoration:none}
@media(max-width:900px){.game-card,.game-card:nth-child(1),.game-card:nth-child(4),.game-card:nth-child(7),.game-card:nth-child(8){grid-column:span 6}.game-card:nth-child(1) .preview,.game-card:nth-child(4) .preview,.game-card:nth-child(7) .preview,.game-card:nth-child(8) .preview{height:220px}footer{margin:0 28px}.hero{min-height:550px}}@media(max-width:620px){.hero{padding-top:95px;min-height:570px}.section-title{display:block}.section-title>p{margin-top:15px}.game-card,.game-card:nth-child(1),.game-card:nth-child(4),.game-card:nth-child(7),.game-card:nth-child(8){grid-column:1/-1}.preview,.game-card:nth-child(1) .preview,.game-card:nth-child(4) .preview,.game-card:nth-child(7) .preview,.game-card:nth-child(8) .preview{height:230px}.card-body p{min-height:0}.collection{padding-top:30px}.hero>p{font-size:16px}footer{align-items:flex-start;flex-wrap:wrap}footer p{flex-basis:70%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}