/**
 * Pagina over stadskaarten voor games: opening met video, de stad die zich opbouwt, stapelkaarten en prijzen.
 *
 * @author Ferhat Remory
 * @link   https://steirk.be
 */
.gs { --gut: clamp(16px, 4vw, 40px); --r-m: 14px; --r-l: 22px; overflow-x: clip; }
.gs h1, .gs h2, .gs h3 { margin: 0; font-weight: 600; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.gs p { margin: 0; text-wrap: pretty; }
.gs-wrap { width: min(1200px, 100% - 2 * var(--gut)); margin-inline: auto; }
.gs-pad { padding-block: clamp(80px, 12vw, 150px); }
.gs-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.gs-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 12px var(--c2); }
.gs-lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--fg-2); line-height: 1.55; }
.gs-h2 { font-size: clamp(34px, 5.2vw, 64px); }
.gs-kop { max-width: 720px; margin-bottom: clamp(44px, 6vw, 70px); }
.gs-kop .gs-h2 { margin-top: 18px; }
.gs-kop .gs-lead { margin-top: 18px; }
.gs-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.gs-pil { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); font-size: 14px; color: var(--fg-2); }
.gs-pil b { color: var(--fg); font-weight: 600; }

/* Opening: de bewegende stad van Crime Club. */
.gs-hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 140px 0 clamp(48px, 8vw, 90px); overflow: hidden; isolation: isolate; }
.gs-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(var(--s, 1.08)); }
.gs-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 20% 100%, rgba(9,9,11,.96) 25%, rgba(9,9,11,.55) 60%, rgba(9,9,11,.25)), linear-gradient(180deg, rgba(9,9,11,.5), transparent 30%); }
.gs-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 200px; background: linear-gradient(transparent, var(--bg)); z-index: -1; }
.gs-hero h1 { font-size: clamp(46px, 8.4vw, 120px); max-width: 11ch; margin: 22px 0 24px; }
.gs-hero .gs-lead { max-width: 52ch; color: #c9c9d1; margin-bottom: 34px; }
.gs-hero .gs-pillen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* Cijfers onder de opening. */
.gs-cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.gs-cijfers > div { padding: 34px clamp(14px, 2vw, 28px); border-left: 1px solid var(--line); }
.gs-cijfers > div:first-child { border-left: 0; }
.gs-cijfers strong { display: block; font-size: clamp(34px, 4vw, 52px); font-weight: 600; letter-spacing: -.04em; line-height: 1; margin-bottom: 10px; }
.gs-cijfers span { color: var(--fg-2); font-size: 14px; }

/* Het probleem en drie troeven. */
.gs-troeven { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 70px; }
.gs-troef { padding: 26px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--card, #111115); }
.gs-troef h3 { font-size: 19px; letter-spacing: -.02em; margin-bottom: 8px; }
.gs-troef p { color: var(--fg-2); font-size: 15px; }

/* Het podium: de stad bouwt zich op tijdens het scrollen. */
.gs-bouw { position: relative; height: 520vh; }
.gs-podium { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 60px); align-items: center; width: min(1280px, 100% - 2 * var(--gut)); margin: 0 auto; }
.gs-stappen { position: relative; height: 320px; }
.gs-stap { position: absolute; inset: 0; opacity: 0; transform: translateY(26px); transition: opacity .6s var(--out), transform .8s var(--out); pointer-events: none; }
.gs-stap.aan { opacity: 1; transform: none; pointer-events: auto; }
.gs-stap .gs-eyebrow { margin-bottom: 18px; }
.gs-stap h3 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 16px; }
.gs-stap p { color: var(--fg-2); font-size: 17px; max-width: 40ch; }
.gs-balkjes { display: flex; gap: 6px; margin-bottom: 30px; }
.gs-balkjes i { flex: 1; height: 3px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.gs-balkjes i::after { content: ""; display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--grad); }
.gs-doek { position: relative; aspect-ratio: 16 / 11.25; width: min(100%, (100svh - 150px) * 1.42); justify-self: end; margin-top: 40px; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 50px 140px -40px rgba(0,0,0,.95); background: #111115; }
.gs-doek > img, .gs-doek > .veeg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gs-doek .bebouwd { clip-path: inset(0 calc((1 - var(--b, 0)) * 100%) 0 0); }
.gs-doek .hud { opacity: var(--h, 0); transform: scale(calc(1.06 - var(--h, 0) * .06)); }
.gs-doek .veeg { left: calc(var(--b, 0) * 100%); width: 2px; translate: -1px 0; background: #fff; box-shadow: 0 0 24px 4px rgba(139,155,255,.8); opacity: calc(var(--b, 0) * (1 - var(--b, 0)) * 4); }
.gs-doek .gsm { position: absolute; right: 4%; bottom: -4%; --tel-b: 22cqw; transform: translateY(calc((1 - var(--g, 0)) * 120%)); }
.gs-doek { container-type: inline-size; }

/* Drie steden als kaarten die op elkaar stapelen. */
.gs-blad { position: sticky; top: calc(96px + var(--i) * 22px); margin-bottom: 9vh; }
.gs-blad > div { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 54px); align-items: center; padding: clamp(16px, 2vw, 22px); border-radius: var(--r-l); border: 1px solid var(--line-2); background: linear-gradient(170deg, #17171d, #0f0f13); box-shadow: 0 -20px 60px -20px rgba(0,0,0,.8); transform: scale(var(--k, 1)); transform-origin: 50% 0; filter: brightness(var(--l, 1)); }
.gs-schot { border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line-2); }
.gs-schot img { display: block; width: 100%; height: auto; }
.gs-blad .txt { padding-right: clamp(4px, 2vw, 26px); }
.gs-blad h3 { font-size: clamp(26px, 3vw, 40px); margin: 14px 0 14px; }
.gs-blad p { color: var(--fg-2); }
.gs-feiten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.gs-feiten span { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--fg-2); }

/* Wat je krijgt, als tegels. */
.gs-tegels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.gs-tegel { position: relative; overflow: hidden; border-radius: var(--r-l); border: 1px solid var(--line); background: #111115; padding: 26px; min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.gs-tegel h3 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 8px; }
.gs-tegel p { color: var(--fg-2); font-size: 15px; max-width: 38ch; }
.gs-tegel > img, .gs-tegel > .beeld { position: absolute; z-index: -2; }
.gs-tegel > img { transition: transform 1.2s var(--out); }
.gs-tegel:hover > img { transform: scale(1.04); }
.gs-tegel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgba(17,17,21,.92) 70%); }
.gs-tegel.groot { grid-column: span 4; min-height: 380px; }
.gs-tegel.groot > img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.gs-tegel.gsm { grid-column: span 2; grid-row: span 2; }
.gs-tegel.gsm > .beeld { top: 22px; left: 50%; translate: -50% 0; --tel-b: 190px; }
.gs-tegel.gsm::before { background: linear-gradient(180deg, transparent 45%, rgba(17,17,21,.96) 72%); }
.gs-tegel.half { grid-column: span 2; }
.gs-tegel.half > img { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.gs-tegel.tekst { grid-column: span 2; background: linear-gradient(160deg, #17172a, #111115); }
.gs-tegel.tekst::before { display: none; }

/* Voor en na: links het oude beeld, rechts het nieuwe, de lijn staat in --x. */
.gs-keuze { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.gs-ba { --x: 50%; position: relative; overflow: hidden; border-radius: var(--r-l); border: 1px solid var(--line-2); background: #111115; user-select: none; touch-action: pan-y; box-shadow: 0 40px 120px -40px rgba(0,0,0,.9); }
.gs-ba img { display: block; width: 100%; height: auto; pointer-events: none; }
.gs-ba .na { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); }
.gs-ba .na img { width: 100%; height: 100%; object-fit: cover; }
.gs-ba .lijn { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; translate: -1px 0; background: #fff; box-shadow: 0 0 20px rgba(139,155,255,.9); pointer-events: none; }
.gs-ba .knop { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #0b0b12; display: grid; place-items: center; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.gs-ba .knop svg { width: 22px; height: 22px; }
.gs-ba input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.gs-ba input:focus-visible ~ .lijn .knop { outline: 3px solid var(--c2); outline-offset: 3px; }
.gs-ba .lbl { position: absolute; top: 14px; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(9,9,11,.75); backdrop-filter: blur(8px); font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.gs-ba .lbl.l { left: 14px; }
.gs-ba .lbl.r { right: 14px; }

/* Prijzen. */
.gs-prijzen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.gs-prijs { position: relative; padding: clamp(26px, 3vw, 38px); border-radius: var(--r-l); border: 1px solid var(--line); background: linear-gradient(180deg, #16161b, #111115); display: flex; flex-direction: column; gap: 22px; }
.gs-prijs.hot { background: linear-gradient(180deg, #17172a, #111115) padding-box, linear-gradient(160deg, rgba(199,210,254,.7), rgba(139,155,255,.25) 40%, rgba(167,139,250,.6)) border-box; border: 1px solid transparent; box-shadow: 0 30px 90px -40px rgba(139,155,255,.55); }
.gs-prijs .tag { position: absolute; top: -13px; right: 24px; height: 26px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--grad); color: #0b0b12; font: 600 12px var(--sans); }
.gs-prijs h3 { font-size: 22px; letter-spacing: -.02em; }
.gs-prijs .sub { color: var(--fg-2); margin-top: 6px; }
.gs-prijs .bedrag { display: flex; align-items: baseline; gap: 10px; }
.gs-prijs .bedrag small { font-size: 15px; color: var(--fg-2); }
.gs-prijs .bedrag strong { font-size: clamp(44px, 5vw, 60px); letter-spacing: -.04em; font-weight: 600; line-height: 1; }
.gs-prijs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.gs-prijs li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--fg-2); font-size: 15px; line-height: 1.5; }
.gs-prijs li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: rgba(139,155,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.gs-prijs li b { color: var(--fg); font-weight: 500; }
.gs-prijs .btn { margin-top: auto; }
.gs-bf { display: grid; gap: 10px; justify-items: start; }
.gs-bf .bedrag strong { font-variant-numeric: tabular-nums; }
.gs-hero .gs-pillen .bf-badge { height: 34px; }
.gs-noot { margin-top: 22px; color: var(--fg-3); font-size: 14px; text-align: center; }

/* Veelgestelde vragen. */
.gs-vragen { display: grid; gap: 10px; }
.gs-vragen details { border: 1px solid var(--line); border-radius: var(--r-m); background: #111115; transition: border-color .3s; }
.gs-vragen details[open] { border-color: var(--line-2); }
.gs-vragen summary { list-style: none; cursor: pointer; padding: 20px 22px; display: flex; justify-content: space-between; gap: 18px; font-weight: 500; font-size: 17px; }
.gs-vragen summary::-webkit-details-marker { display: none; }
.gs-vragen summary::after { content: "+"; font: 300 24px/1 var(--sans); color: var(--fg-2); transition: transform .4s var(--out); }
.gs-vragen details[open] summary::after { transform: rotate(45deg); }
.gs-vragen details p { padding: 0 22px 22px; color: var(--fg-2); }

/* Slotoproep. */
.gs-slot { position: relative; overflow: hidden; border-radius: var(--r-l); border: 1px solid var(--line-2); padding: clamp(40px, 7vw, 90px) clamp(22px, 5vw, 70px); isolation: isolate; }
.gs-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.gs-slot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(9,9,11,.96) 30%, rgba(9,9,11,.6) 70%, rgba(9,9,11,.3)); }
.gs-slot h2 { max-width: 14ch; margin-top: 18px; }
.gs-slot .gs-lead { max-width: 46ch; margin: 18px 0 30px; }

@media (max-width: 900px) {
  .gs-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-cijfers > div:nth-child(3) { border-left: 0; }
  .gs-cijfers > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .gs-troeven { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .gs-bouw { height: 480vh; }
  .gs-podium { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 26px; }
  .gs-podium .gs-doek { order: -1; aspect-ratio: 1; width: min(100%, 50svh); justify-self: center; margin-top: 50px; }
  .gs-doek .gsm { right: 3%; --tel-b: 23cqw; }
  .gs-stappen { height: 230px; }
  .gs-stap h3 { font-size: 28px; }
  .gs-stap p { font-size: 16px; }
  .gs-balkjes { margin-bottom: 18px; }
  .gs-blad { top: calc(80px + var(--i) * 14px); }
  .gs-blad > div { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .gs-blad .txt { padding: 0 6px 8px; }
  .gs-blad p { font-size: 15px; }
  .gs-tegels { grid-template-columns: minmax(0, 1fr); }
  .gs-tegel.groot, .gs-tegel.gsm, .gs-tegel.half, .gs-tegel.tekst { grid-column: auto; grid-row: auto; }
  .gs-tegel.groot { min-height: 300px; }
  .gs-tegel.gsm { min-height: 520px; }
  .gs-tegel.gsm > .beeld { --tel-b: 170px; }
  .gs-keuze, .gs-prijzen { grid-template-columns: minmax(0, 1fr); }
  .gs-btns .btn { width: 100%; justify-content: space-between; }
  .gs-slot::before { background: linear-gradient(180deg, rgba(9,9,11,.92), rgba(9,9,11,.8)); }
}
@media (prefers-reduced-motion: reduce) {
  .gs-bouw { height: auto; }
  .gs-podium { position: static; height: auto; padding-block: 80px; }
  .gs-blad { position: static; }
}