/* Hero: the game playing itself behind the copy; a paper scrim keeps the headline clean, a bottom fade hides the edge on scroll. */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100svh - 56px); display: grid; align-items: center; }
.hero > .hero-copy { position: relative; z-index: 2; padding-block: var(--sp-8, 64px); }
.hero h1 { font-size: clamp(44px, 7vw, 100px); line-height: .98; font-weight: 700; letter-spacing: -.04em; max-width: 12ch; margin-inline: auto; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 56% 50% at 50% 50%, var(--bg) 50%, transparent 100%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 28%; z-index: 1; pointer-events: none; background: linear-gradient(transparent, var(--bg)); }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; transform: translate3d(0, var(--py, 0), 0); will-change: transform; }
.qwall { height: 100%; max-width: 1440px; margin: 0 auto; padding: 24px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; gap: 20px; align-content: center; opacity: .75; text-align: left; }
.qc { display: grid; grid-template-columns: 1fr 72px; grid-template-rows: auto 1fr; gap: 12px 16px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); overflow: hidden; }
.qc q { font-size: 19px; line-height: 24px; font-weight: 700; letter-spacing: -.01em; quotes: "\201C" "\201D"; min-height: 48px; }
.qc .pos { grid-row: 1 / 3; grid-column: 2; width: 72px; height: 108px; border-radius: 8px; background: var(--surface) center / cover no-repeat; display: grid; place-items: center; font-size: 28px; font-weight: 700; color: var(--sub); transition: opacity .4s ease; }
.qc .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: end; }
.qc .opts span { padding: 6px 10px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .25s, border-color .25s; }
.qc .opts .ok { background: var(--btn); border-color: var(--btn); color: #1a1a1a; }
@media (max-width: 960px) { .qwall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .qwall { grid-template-columns: 1fr; padding: 16px; opacity: .5; } .hero::before { background: radial-gradient(ellipse 120% 46% at 50% 50%, var(--bg) 62%, transparent 100%); } }
@media (max-width: 900px) { .nav { grid-template-columns: auto 1fr; } .nav-brand { grid-column: 1; } .nav-end { grid-column: 2; justify-self: end; } }