* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: system-ui, "Segoe UI", Roboto, sans-serif; background: #0c0e12; color: #e8eaed; }
.hero { text-align: center; padding: 3rem 1.5rem 2rem; }
.hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; letter-spacing: 0.04em; }
.tagline { margin: 0.75rem 0 0; color: #9aa0a6; font-size: 1.1rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; max-width: 960px; margin: 0 auto; padding: 0 1.5rem 3rem; }
.tile { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; border-radius: 12px; border: 1px solid #2a2f38; background: #151922; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
a.tile:hover { border-color: #4a9eff; transform: translateY(-2px); }
.tile-game { border-color: #3d5a34; background: linear-gradient(145deg, #1a2418 0%, #151922 60%); }
.tile-soon { opacity: 0.55; cursor: default; }
.tile-label { font-size: 1.35rem; font-weight: 600; }
.tile-desc { color: #9aa0a6; font-size: 0.95rem; flex: 1; }
.tile-cta { color: #7ec86e; font-size: 0.9rem; font-weight: 500; }
.footer { text-align: center; padding: 2rem; color: #5f6368; font-size: 0.85rem; }