/* HERO */
    .hero {
      position: relative;
      min-height: 820px;
      height: 100svh;
      display: flex;
      align-items: flex-end;
      border-bottom: 1px solid var(--line);
      overflow: hidden;
    }
    .hero-visual {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(8,8,8,.98) 0%, rgba(8,8,8,.92) 37%, rgba(8,8,8,.35) 70%, rgba(8,8,8,.7) 100%),
        linear-gradient(0deg, var(--bg) 0%, transparent 40%),
        radial-gradient(circle at 75% 45%, rgba(226,13,24,.34), transparent 28%),
        linear-gradient(135deg, #090909 50%, #181818 50%);
    }
    .hero-visual::before {
      content: "";
      position: absolute;
      width: min(55vw, 760px);
      height: min(74vw, 980px);
      right: 4vw;
      top: 4vh;
      opacity: .82;
      transform: rotate(8deg);
      background:
        linear-gradient(115deg, transparent 0 16%, rgba(255,255,255,.10) 16% 16.3%, transparent 16.3% 33%, rgba(255,255,255,.06) 33% 33.3%, transparent 33.3%),
        linear-gradient(45deg, transparent 0 28%, rgba(226,13,24,.82) 28% 31%, transparent 31% 55%, rgba(255,255,255,.09) 55% 55.5%, transparent 55%),
        linear-gradient(155deg, #1b1b1b 0 36%, #0b0b0b 36% 62%, #1f1f1f 62% 63%, #0c0c0c 63%);
      clip-path: polygon(36% 0, 100% 13%, 82% 100%, 0 82%);
      box-shadow: 0 0 120px rgba(226,13,24,.18);
    }
    .hero-visual::after {
      content: "XP";
      position: absolute;
      right: -1vw;
      top: 14vh;
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,.11);
      font-size: clamp(180px, 28vw, 500px);
      font-weight: 900;
      line-height: .7;
      letter-spacing: -.12em;
    }
    .hero-grid {
      position: relative;
      z-index: 2;
      width: min(100%, var(--max));
      margin: 0 auto;
      padding: 150px var(--pad) 55px;
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr);
      gap: clamp(48px, 8vw, 130px);
      align-items: end;
    }
    .hero-copy { max-width: 850px; }
    .hero h1 {
      max-width: 820px;
      margin: 25px 0 25px;
      font-size: clamp(62px, 8.2vw, 128px);
      font-weight: 760;
      line-height: .84;
      letter-spacing: -.075em;
      text-transform: uppercase;
    }
    .hero h1 span { color: var(--red); }
    .hero-description {
      max-width: 550px;
      margin: 0;
      color: #b3b3b3;
      font-size: clamp(15px, 1.4vw, 19px);
      line-height: 1.55;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 37px; }
    .hero-meta {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      margin-top: 58px;
      border: 1px solid var(--line);
      background: var(--line);
    }
    .hero-meta-item { min-height: 91px; padding: 17px 19px; background: rgba(8,8,8,.82); }
    .meta-value { display: block; font-size: 23px; font-weight: 640; letter-spacing: -.035em; }
    .meta-label {
      display: block;
      margin-top: 8px;
      color: #777;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .membership {
      position: relative;
      padding: 29px;
      border: 1px solid var(--line-strong);
      background: rgba(10,10,10,.78);
      backdrop-filter: blur(18px);
    }
    .membership::before {
      content: "";
      position: absolute;
      left: -1px;
      top: -1px;
      width: 50px;
      height: 2px;
      background: var(--red);
    }
    .membership-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
    .membership-name {
      color: #a9a9a9;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .membership-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #bdbdbd;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .membership-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(226,13,24,.12); }
    .price { display: flex; align-items: baseline; gap: 9px; margin-top: 28px; }
    .price strong { font-size: 63px; font-weight: 680; line-height: .9; letter-spacing: -.07em; }
    .price span { color: #909090; font-size: 12px; }
    .membership hr { height: 1px; border: 0; background: var(--line); margin: 26px 0 20px; }
    .membership-list { display: grid; gap: 14px; padding: 0; margin: 0 0 26px; list-style: none; }
    .membership-list li { display: flex; align-items: center; gap: 12px; color: #c5c5c5; font-size: 13px; }
    .membership-list svg { width: 14px; height: 14px; color: var(--red); flex: 0 0 auto; }
    .membership .button { width: 100%; }
    .fineprint { margin: 13px 0 0; color: #666; font-size: 9px; line-height: 1.5; text-align: center; }

/* MARQUEE */
    .strip {
      width: 100%;
      border-bottom: 1px solid var(--line);
      overflow: hidden;
    }
    .strip-track {
      width: max-content;
      height: 50px;
      display: flex;
      align-items: center;
      will-change: transform;
      animation: marquee var(--marquee-duration, 28s) linear infinite;
    }
    .strip-group {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }
    .strip-item {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 22px;
      margin-right: 22px;
      color: #8e8e8e;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .strip-item::after { content: "+"; color: var(--red); font-size: 16px; font-weight: 400; }
    @keyframes marquee {
      from { transform: translate3d(0, 0, 0); }
      to { transform: translate3d(-50%, 0, 0); }
    }

/* CATALOG */
    .section { padding-block: clamp(90px, 10vw, 150px); }
    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: 48px;
    }
    .section h2 {
      max-width: 760px;
      margin: 17px 0 0;
      font-size: clamp(42px, 6vw, 86px);
      font-weight: 690;
      line-height: .93;
      letter-spacing: -.065em;
      text-transform: uppercase;
    }
    .section h2 em { color: var(--red); font-style: normal; }
    .head-note { max-width: 300px; margin: 0 0 6px; color: #828282; font-size: 13px; line-height: 1.55; }
    .catalog-tools {
      display: grid;
      grid-template-columns: minmax(240px, 1fr) auto auto;
      gap: 12px;
      margin-bottom: 26px;
    }
    .search {
      height: 48px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 16px;
      border: 1px solid var(--line);
      background: #0b0b0b;
    }
    .search svg { width: 16px; height: 16px; color: #747474; }
    .search input { width: 100%; border: 0; outline: 0; color: white; background: transparent; font-size: 12px; }
    .search input::placeholder { color: #656565; }
    .filters { display: flex; border: 1px solid var(--line); }
    .filter {
      min-width: 94px;
      padding: 0 16px;
      border: 0;
      border-right: 1px solid var(--line);
      background: #0b0b0b;
      color: #777;
      font-size: 9px;
      font-weight: 720;
      letter-spacing: .1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color .2s ease, background .2s ease;
    }
    .filter:last-child { border-right: 0; }
    .filter:hover { color: white; }
    .filter.active { color: white; background: var(--red); }
    .platform-filter { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; }
    .platform-filter img {
      width: 30px;
      height: 30px;
      display: block;
      flex: 0 0 auto;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 8px;
      background: #050505;
      object-fit: cover;
      overflow: hidden;
    }
    .platform-filter.active img { border-color: rgba(255,255,255,.62); }
    .game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .game-card { position: relative; min-width: 0; }
    .game-art {
      position: relative;
      aspect-ratio: .72;
      overflow: hidden;
      border: 1px solid var(--line);
      background: #111;
      cursor: pointer;
    }
    .game-art::before, .game-art::after { content: ""; position: absolute; }
    .game-art::after { inset: auto 0 0; height: 45%; background: linear-gradient(0deg, rgba(0,0,0,.92), transparent); }
    .art-cyber { background: linear-gradient(145deg, #1a1a1a 0 38%, #e20d18 38% 40%, #060606 40% 72%, #292929 72%); }
    .art-cyber::before { width: 60%; aspect-ratio: 1; right: -5%; top: 13%; border: 1px solid rgba(255,255,255,.25); transform: rotate(32deg); box-shadow: inset 0 0 70px rgba(226,13,24,.28); }
    .art-rdr { background: linear-gradient(165deg, #070707 0 34%, #390407 34% 66%, #e20d18 66% 67%, #120102 67%); }
    .art-rdr::before { inset: 15% 24% 25%; border: 1px solid rgba(255,255,255,.25); border-radius: 50% 50% 46% 54%; box-shadow: 0 0 0 25px rgba(0,0,0,.22); }
    .art-elden { background: radial-gradient(circle at 45% 44%, transparent 0 21%, #9a0a10 21% 21.8%, transparent 21.8% 30%, rgba(226,13,24,.55) 30% 30.8%, transparent 30.8%), linear-gradient(150deg, #202020, #050505 55%, #171717); }
    .art-elden::before { left: 50%; top: 12%; bottom: 18%; width: 1px; background: rgba(255,255,255,.28); transform: rotate(28deg); }
    .art-forza { background: linear-gradient(125deg, #070707 0 20%, #2a2a2a 20% 48%, #e20d18 48% 50%, #0d0d0d 50% 74%, #3a3a3a 74%); }
    .art-forza::before { width: 95%; height: 25%; left: 19%; bottom: 28%; border: 1px solid rgba(255,255,255,.22); border-radius: 60% 0 0 12%; transform: skewX(-24deg); }
    .art-bg3 { background: linear-gradient(42deg, #050505 0 48%, #5d070b 48% 51%, #151515 51%), radial-gradient(circle, var(--red), black); }
    .art-bg3::before { width: 54%; aspect-ratio: 1; left: 23%; top: 17%; border: 1px solid rgba(255,255,255,.22); transform: rotate(45deg); box-shadow: 0 0 50px rgba(226,13,24,.28); }
    .art-gta { background: repeating-linear-gradient(145deg, #181818 0 19px, #0b0b0b 19px 40px); }
    .art-gta::before { width: 66%; height: 2px; left: 17%; top: 39%; background: var(--red); box-shadow: 0 10px 0 rgba(226,13,24,.6), 0 20px 0 rgba(226,13,24,.3); transform: rotate(-19deg); }
    .art-fc { background: linear-gradient(180deg, #242424, #060606); }
    .art-fc::before { width: 64%; aspect-ratio: 1; left: 18%; top: 21%; border: 2px solid rgba(255,255,255,.20); border-radius: 50%; box-shadow: inset 0 0 0 28px rgba(226,13,24,.10); }
    .art-mk { background: radial-gradient(circle at 68% 30%, rgba(226,13,24,.7), transparent 20%), linear-gradient(130deg, #050505 45%, #242424 45% 65%, #090909 65%); }
    .art-mk::before { width: 1px; height: 70%; left: 53%; top: 11%; background: white; opacity: .22; transform: rotate(35deg); box-shadow: 22px 0 0 var(--red); }
    .game-number {
      position: absolute;
      right: 12px;
      top: 12px;
      z-index: 2;
      color: rgba(255,255,255,.45);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
    }
    .game-monogram {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: grid;
      place-items: center;
      color: rgba(255,255,255,.9);
      font-size: clamp(38px, 4vw, 64px);
      font-weight: 830;
      line-height: .8;
      letter-spacing: -.09em;
      text-align: center;
      mix-blend-mode: difference;
    }
    .game-status {
      position: absolute;
      left: 14px;
      bottom: 13px;
      z-index: 3;
      min-height: 24px;
      display: flex;
      align-items: center;
      gap: 7px;
      color: #cecece;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .11em;
      text-transform: uppercase;
    }
    .game-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(226,13,24,.14); }
    .game-info { display: flex; justify-content: space-between; gap: 14px; padding: 15px 1px 20px; border-bottom: 1px solid var(--line); }
    .game-title { margin: 0; font-size: 13px; font-weight: 620; line-height: 1.25; }
    .game-genre { margin: 5px 0 0; color: #707070; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
    .game-arrow { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); flex: 0 0 auto; transition: border-color .2s, background .2s; }
    .game-arrow svg { width: 13px; height: 13px; }
    .game-card:hover .game-arrow { border-color: var(--red); background: var(--red); }
    .game-card:hover .game-art { border-color: rgba(255,255,255,.28); }
    .hidden { display: none !important; }
    .catalog-empty { display: none; padding: 42px 0; color: #777; border-top: 1px solid var(--line); font-size: 13px; }
    .catalog-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 40px; }
    .catalog-count { color: #777; font-size: 10px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }

/* HOW */
    .how { border-block: 1px solid var(--line); background: #0b0b0b; }
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 55px; border: 1px solid var(--line); }
    .step { position: relative; min-height: 310px; padding: 29px; border-right: 1px solid var(--line); overflow: hidden; }
    .step:last-child { border-right: 0; }
    .step-index { color: var(--red); font-size: 10px; font-weight: 750; letter-spacing: .13em; }
    .step h3 { max-width: 250px; margin: 95px 0 15px; font-size: 26px; font-weight: 620; letter-spacing: -.045em; }
    .step p { max-width: 310px; margin: 0; color: #7d7d7d; font-size: 13px; line-height: 1.6; }
    .step-shape { position: absolute; right: -30px; top: -35px; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07); font-size: 170px; font-weight: 800; line-height: 1; }

/* PLAN */
    .plan-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(50px, 10vw, 150px); align-items: start; }
    .plan-copy p { max-width: 530px; margin: 30px 0 0; color: #8a8a8a; font-size: 15px; line-height: 1.7; }
    .plan-details { border-top: 1px solid var(--line-strong); }
    .plan-row { min-height: 71px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); }
    .plan-row span { color: #777; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .plan-row strong { font-size: 14px; font-weight: 570; }
    .plan-row strong.red { color: var(--red); }
    .plan-details .button { width: 100%; margin-top: 18px; }

/* FAQ */
    .faq { padding-top: 0; }
    .faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(50px, 9vw, 130px); }
    .faq-list { border-top: 1px solid var(--line-strong); }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-question {
      width: 100%;
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #d5d5d5;
      text-align: left;
      font-size: 14px;
      cursor: pointer;
    }
    .faq-plus { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
    .faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 1px; background: var(--red); transition: transform .2s ease; }
    .faq-plus::after { transform: rotate(90deg); }
    .faq-item.open .faq-plus::after { transform: rotate(0); }
    .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
    .faq-item.open .faq-answer { grid-template-rows: 1fr; }
    .faq-answer-inner { overflow: hidden; }
    .faq-answer p { max-width: 610px; margin: 0; padding: 0 50px 24px 0; color: #7f7f7f; font-size: 13px; line-height: 1.65; }



/* Image-backed game cards */
.game-cover-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}
.game-card:hover .game-cover-image { transform: scale(1.025); filter: brightness(1.06); }

.game-access-badge {
  position: absolute;
  right: 12px;
  bottom: 13px;
  z-index: 4;
  min-height: 24px;
  display: flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(226,13,24,.7);
  color: white;
  background: rgba(8,8,8,.82);
  font-size: 7px;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

/* Interactive game cards and session rules */
.game-art {
  width: 100%;
  padding: 0;
  appearance: none;
  color: inherit;
  text-align: left;
}
.game-arrow {
  padding: 0;
  appearance: none;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.game-art:focus-visible,
.game-arrow:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
.game-rules-card {
  width: min(100%, 760px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.game-session-summary { margin-top: 22px; }
.game-rules-list {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 22px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.game-rules-list li {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.game-rules-list li > span {
  padding-top: 2px;
  color: var(--red);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .12em;
}
.game-rules-list p {
  margin: 0;
  color: #858585;
  font-size: 12px;
  line-height: 1.65;
}
.game-rules-list strong { color: #d7d7d7; font-weight: 620; }
.game-time-notice {
  margin: 18px 0;
  padding: 15px 16px;
  border-left: 2px solid var(--red);
  background: rgba(226,13,24,.07);
  color: #989898;
  font-size: 11px;
  line-height: 1.65;
}
.game-time-notice strong { color: #e1e1e1; }
.game-rules-confirmations {
  display: grid;
  gap: 9px;
  margin: 0 0 20px;
}
.game-rules-confirm {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  color: #8c8c8c;
  background: #0a0a0a;
  font-size: 11px;
  line-height: 1.55;
  cursor: pointer;
}
.game-rules-confirm:hover { border-color: var(--line-strong); }
.game-rules-confirm input {
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: var(--red);
}
.game-rules-card #modalAction:disabled {
  opacity: .38;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 560px) {
  .game-rules-modal { align-items: end; padding: 0; }
  .game-rules-card {
    width: 100%;
    max-height: calc(100dvh - 22px);
    padding: 28px 20px 22px;
    border-inline: 0;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
  }
  .game-rules-list li { grid-template-columns: 28px minmax(0, 1fr); gap: 9px; }
}