@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&display=swap');
*{box-sizing:border-box}body{margin:0;font-family:Nunito,sans-serif;background:#f5f2fd;color:#24183d}
.container{max-width:1200px;margin:auto;padding:20px}
.hero,.card,.game{background:#fff;border-radius:26px;box-shadow:0 16px 40px rgba(0,0,0,.08)}
.hero{display:grid;grid-template-columns:2fr 1fr;gap:20px;padding:50px;align-items:center}
.heroicon{font-size:8rem;text-align:center;color:#6b3de4;font-weight:900}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:#6b3de4;font-weight:900;font-size:.8rem}
h1{font-size:clamp(2.8rem,6vw,5rem);margin:.2em 0}.lead{font-size:1.2rem;color:#666;line-height:1.7}
.actions{display:flex;gap:12px;margin-top:24px}.btn{padding:14px 22px;border-radius:12px;text-decoration:none;background:#ece5ff;color:#4a22aa;font-weight:800}.primary{background:#6b3de4;color:#fff}.full{display:flex;justify-content:center;margin-top:18px}
.card{padding:38px;margin-top:22px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.game{overflow:hidden}.visual{height:180px;display:grid;place-items:center;font-size:5rem;color:#fff}.cards{background:#5b33c7}.binary{background:#f28d3d}.content{padding:28px}.tag{background:#ece5ff;color:#4a22aa;padding:6px 10px;border-radius:999px;font-size:.8rem;font-weight:800}
.question{margin-top:18px;padding:14px;border-left:4px solid #f28d3d;background:#fff2e7;font-weight:800}
.center{text-align:center}footer{text-align:center;padding:30px;color:#777}
@media(max-width:850px){.hero{grid-template-columns:1fr;text-align:center}.grid{grid-template-columns:1fr}.actions{flex-direction:column}.btn{width:100%;text-align:center}}


.mystery-cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
width:100%;
max-width:260px;
margin:auto;
}
.mystery-cards span{
display:grid;
place-items:center;
height:72px;
border-radius:12px;
background:#fff;
color:#6b3de4;
font-size:2rem;
font-weight:900;
box-shadow:0 10px 20px rgba(0,0,0,.15);
}
.mystery-cards span:nth-child(5){grid-column:1}
.mystery-cards span:nth-child(5),
.mystery-cards span:nth-child(6),
.mystery-cards span:nth-child(7){transform:translateX(35px);}