:root{--g1:#006341;--g2:#41b880;--lime:#c5e86c;--orange:#fab780;
  --font:"Proxima Nova","Montserrat","Avenir Next","Avenir","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;font-family:var(--font);color:#fff;-webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse at 75% 20%,rgba(197,232,108,.12),transparent 55%),radial-gradient(ellipse at 10% 90%,rgba(0,99,65,.35),transparent 55%),#333333;
  display:flex;flex-direction:column;align-items:center;padding:32px 20px 48px}
main{width:min(960px,100%)}
.logo{display:inline-flex;background:#fff;border-radius:10px;padding:8px 13px}
.logo img{height:26px;display:block}
.hero{display:grid;grid-template-columns:1fr 220px;gap:28px;align-items:center;margin:34px 0 30px}
.eyebrow{color:var(--lime);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
h1{font-size:clamp(34px,6vw,56px);font-weight:800;line-height:1.02;margin:10px 0 14px}
h1 span{color:var(--g2)}
p{line-height:1.55;color:rgba(255,255,255,.86);max-width:52ch}
.hero img{width:100%;filter:drop-shadow(0 18px 26px rgba(0,0,0,.35))}
.glass{background:rgba(51,51,51,.58);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:22px}
.game{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:#fff;transition:transform .15s,border-color .15s}
.game:hover{transform:translateY(-3px);border-color:rgba(197,232,108,.5)}
.game img{width:100%;height:auto;aspect-ratio:1200/630;display:block}
.game > div{flex:1;padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px}
.game h2{font-size:26px;font-weight:800}
.tag{display:inline-flex;gap:6px;flex-wrap:wrap}
.tag span{font-size:12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:4px 10px;color:rgba(255,255,255,.8)}
.play{margin-top:auto;align-self:flex-start;background:var(--g1);border:1px solid var(--g2);border-radius:12px;padding:12px 20px;font-weight:700}
footer{margin-top:34px;font-size:13px;color:rgba(255,255,255,.6)}
footer a{color:var(--lime);text-decoration:none}
footer a:hover{text-decoration:underline}
@media (max-width:720px){.hero{grid-template-columns:1fr;text-align:center}.hero img{width:170px;margin:0 auto}.hero p{margin:0 auto}}