/* Oswald */
/* removed @font-face: file missing */

/* City-selection flow */
/*
 * .audience-cta is layout-positioned with transform at 601–768px. The generic
 * .btn:active { translateY(1px) } would replace that transform on press, so
 * Safari moves the button under the finger and the click never opens the modal.
 */
.btn.audience-cta:active {
  transform: none;
}

@media (min-width: 601px) and (max-width: 768px) {
  .btn.audience-cta:active {
    transform: translateY(350px) translateX(120px);
  }
}

.city-selector-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  background: #141414;
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  overscroll-behavior: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.city-selector-modal[aria-hidden='false'] {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  overflow: hidden;
}

.city-selector-modal__screen {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  max-height: 100dvh;
  flex: 1 1 auto;
  padding: 21px 17px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.city-selector-modal__screen[hidden] {
  display: none;
}

.city-selector-modal__close,
.city-selector-modal__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.city-selector-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 24px;
  height: 24px;
}

.city-selector-modal__close img {
  display: block;
  width: 24px;
  height: 24px;
}

.city-selector-modal__title {
  margin: 0;
  font-family: var(--second-family);
  font-size: 20px;
  font-weight: 500;
  line-height: 112%;
  letter-spacing: 0.02em;
  color: var(--accent-yellow);
}

.city-selector-modal__title--action {
  max-width: calc(100% - 40px);
  padding-right: 8px;
  text-transform: uppercase;
}

.city-selector-modal__title-line {
  display: block;
}

.city-selector-modal__city-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: flex-start;
  column-gap: 60px;
  row-gap: 18px;
  margin-top: 45px;
  justify-content: start;
}

@media (max-width: 1023px) {
  .city-selector-modal__city-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.city-selector-modal__city-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.city-selector-modal__city-group.city-selector-modal__city-group--mobile-only {
  display: none;
}

.city-selector-modal__city-column--desktop-only {
  display: none;
}

.city-selector-modal__city-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

@media (max-width: 1023px) {
  .city-selector-modal__city-group.city-selector-modal__city-group--mobile-only {
    display: flex;
  }
}

@media (max-width: 600px) {
  .city-selector-modal__city-column {
    gap: 35px;
  }

  .city-selector-modal__city-group {
    gap: 20px;
  }
}

.city-selector-modal__city-group h3 {
  margin: 0 0 2px;
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 500;
  line-height: 100%;
  color: #d7a9ff;
}

.city-selector-modal__city-group button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white-op-800);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.city-selector-modal__screen-header {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
}

.city-selector-modal__screen-header .city-selector-modal__close {
  position: static;
}

.city-selector-modal__back {
  width: 24px;
  height: 24px;
}

.city-selector-modal__back--callback {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
}

.city-selector-modal__back img {
  width: 12px;
  height: 22px;
}

.city-selector-modal__screen-header h2 {
  margin: 0;
  font-family: var(--second-family);
  font-size: 20px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--accent-yellow);
}

.city-selector-modal__actions {
  display: flex;
  flex-direction: column;
}

.city-selector-modal__clubs {
  display: flex;
  flex-direction: column;
}

.city-selector-modal__clubs .city-selector-modal__screen-header {
  grid-template-columns: 24px 1fr;
}

.city-selector-modal__clubs
  .city-selector-modal__screen-header
  .city-selector-modal__close--clubs {
  position: absolute;
  top: 21px;
  right: 17px;
  z-index: 2;
  width: 24px;
  height: 24px;
  transform: none;
}

.city-selector-modal__clubs
  .city-selector-modal__screen-header
  .city-selector-modal__close--clubs
  img {
  display: block;
  width: 24px;
  height: 24px;
}

@media (max-width: 767px) {
  .city-selector-modal__clubs .city-selector-modal__clubs-list {
    flex: 0 0 auto;
    justify-content: flex-start;
    padding: 120px 0 70px;
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  .city-selector-modal__clubs .city-selector-modal__clubs-list {
    padding-top: 80px;
    gap: 40px;
  }
}

.city-selector-modal__clubs-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 60px 0 70px;
}

.city-selector-modal__club-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--second-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 138%;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.city-selector-modal__actions-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 70px;
  padding: 60px 0 70px;
}

.city-selector-modal__actions-list button,
.city-selector-modal__success button {
  position: relative;
  z-index: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--light-violet);
  font-family: var(--second-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 138%;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 20px var(--accent-violet);
  cursor: pointer;
}

.city-selector-modal__actions-list button::before,
.city-selector-modal__success button::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: calc(100% + 38px);
  height: 38px;
  border-radius: 50%;
  background: rgba(174, 77, 250, 0.7);
  filter: blur(17px);
  transform: translate(-50%, -50%);
}

.city-selector-modal__callback > p {
  margin: 17px 0 27px;
  color: var(--white-op-800);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 163%;
}

.city-selector-modal__callback form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.city-selector-modal__callback form > label:not(.city-selector-modal__consent) {
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--white-op-800);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 133%;
  white-space: nowrap;
}

.city-selector-modal__callback input[type='text'],
.city-selector-modal__callback input[type='tel'] {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--white);
  font: 400 16px/150% var(--font-family);
}

.city-selector-modal__callback form > label:not(.city-selector-modal__consent):focus-within {
  border-bottom-color: var(--accent-violet);
}

.city-selector-modal__callback input[name='name']::placeholder,
.city-selector-modal__callback input[name='phone']::placeholder {
  color: var(--white);
  opacity: 0.7;
}

.city-selector-modal__comment input::placeholder {
  color: var(--white-op-800);
  opacity: 1;
}

.city-selector-modal__consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 20px;
  color: var(--white-op-800);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 170%;
  white-space: normal;
}

.city-selector-modal__consent input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: #d7a9ff;
}

.city-selector-modal__callback form .btn {
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  font-family: var(--second-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 138%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--accent-violet);
  box-shadow: 0 0 30px 8px rgba(174, 77, 250, 0.65);
}

.city-selector-modal__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.city-selector-modal__success h2 {
  margin: 0 0 21px;
  color: var(--accent-yellow);
  font-family: var(--second-family);
  font-size: 32px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.city-selector-modal__success p {
  margin: 0 0 32px;
  color: var(--white-op-800);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 156%;
  text-align: center;
}

@media (min-width: 768px) {
  .city-selector-modal {
    display: none;
    background: rgba(10, 10, 10, 0.72);
  }

  .city-selector-modal[aria-hidden='false'] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    max-height: 100dvh;
    padding: 24px;
    overflow: hidden;
  }

  .city-selector-modal__screen {
    box-sizing: border-box;
    width: auto;
    flex: 0 1 auto;
    min-height: 0;
    max-height: calc(100dvh - 48px);
    padding: 40px 42px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    border-radius: 24px;
    background: #141414;
    box-shadow:
      0 0 0 1px rgba(174, 77, 250, 0.35),
      0 0 48px 12px rgba(174, 77, 250, 0.55);
  }

  .city-selector-modal__cities {
    width: 552px;
    height: 610px;
  }

  .city-selector-modal__actions {
    width: 411px;
    height: 368px;
    overflow: hidden;
  }

  .city-selector-modal__clubs {
    width: 411px;
    height: min(610px, calc(100dvh - 48px));
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .city-selector-modal__clubs .city-selector-modal__screen-header {
    position: sticky;
    top: -40px;
    z-index: 3;
    margin: -40px -42px 0;
    padding: 40px 42px 18px;
    background: #141414;
  }

  .city-selector-modal__clubs .city-selector-modal__back {
    transform: translate(-26px, -29px);
  }

  .city-selector-modal__clubs
    .city-selector-modal__screen-header
    .city-selector-modal__close--clubs {
    top: 17px;
    right: 17px;
    width: 24px;
    height: 24px;
  }

  .city-selector-modal__clubs
    .city-selector-modal__screen-header
    .city-selector-modal__close--clubs
    img {
    width: 34px;
    height: 34px;
  }

  .city-selector-modal__clubs .city-selector-modal__screen-header h2 {
    font-size: 36px;
    line-height: 117%;
  }

  .city-selector-modal__clubs-list {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 32px;
    padding: 28px 0 50px;
  }

  .city-selector-modal__club-btn {
    font-size: 20px;
  }

  .city-selector-modal__callback {
    width: 570px;
    height: auto;
    min-height: 512px;
    padding-bottom: 40px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .city-selector-modal__success {
    width: 562px;
    height: 262px;
    min-height: 0;
    padding-top: 40px;
    padding-bottom: 40px;
    overflow: hidden;
  }

  .city-selector-modal__actions .city-selector-modal__close {
    transform: translate(28px, -29px);
  }

  .city-selector-modal__actions .city-selector-modal__back,
  .city-selector-modal__clubs .city-selector-modal__back {
    transform: translate(-26px, -29px);
  }

  .city-selector-modal__back--callback {
    top: 17px;
    left: 17px;
    transform: none;
  }

  .city-selector-modal__cities .city-selector-modal__close,
  .city-selector-modal__callback .city-selector-modal__close {
    top: 17px;
    right: 17px;
    width: 24px;
    height: 24px;
    transform: none;
  }

  .city-selector-modal__cities .city-selector-modal__close img,
  .city-selector-modal__callback .city-selector-modal__close img {
    width: 34px;
    height: 34px;
  }

  .city-selector-modal__title {
    font-size: 36px;
    line-height: 117%;
  }

  .city-selector-modal__title-line {
    display: block;
    white-space: nowrap;
  }

  .city-selector-modal__title--action {
    max-width: calc(100% - 40px);
    white-space: nowrap;
  }

  .city-selector-modal__city-grid {
    column-gap: 86px;
    row-gap: 14px;
    margin-top: 25px;
  }

  .city-selector-modal__city-column {
    gap: 14px;
  }

  .city-selector-modal__city-group {
    gap: 2px;
  }

  .city-selector-modal__city-group h3 {
    font-size: 20px;
    line-height: 140%;
    color: var(--light-violet);
  }

  .city-selector-modal__city-group button {
    font-size: 14px;
    line-height: 143%;
    letter-spacing: 0.1em;
  }

  .city-selector-modal__screen-header h2 {
    font-size: 36px;
    line-height: 117%;
  }

  .city-selector-modal__actions-list {
    gap: 48px;
    padding: 47px 0 24px;
  }

  .city-selector-modal__actions-list button,
  .city-selector-modal__success button {
    font-size: 16px;
    line-height: 138%;
    color: var(--light-violet);
    text-shadow: 0 0 20px var(--accent-violet);
    margin-top: -20px;
  }

  .city-selector-modal__callback > p {
    margin: 10px 0 18px;
    font-size: 16px;
    line-height: 150%;
  }

  .city-selector-modal__callback form {
    gap: 16px;
  }

  .city-selector-modal__consent {
    margin-top: 12px;
    line-height: 171%;
  }

  .city-selector-modal__callback form .btn {
    margin-top: -4px;
  }

  .city-selector-modal__success h2 {
    max-width: 14em;
    margin: 0 0 24px;
    font-size: 36px;
    line-height: 117%;
  }

  .city-selector-modal__success p {
    max-width: 22em;
    margin: 0 0 40px;
    line-height: 150%;
  }
}

@media (min-width: 1024px) {
  .city-selector-modal__cities {
    width: 852px;
    height: 420px;
  }

  .city-selector-modal__actions {
    width: 413px;
    height: 368px;
  }

  .city-selector-modal__callback {
    width: 576px;
    height: auto;
    min-height: 505px;
    padding-inline: 50px;
    padding-bottom: 40px;
  }

  .city-selector-modal__success {
    width: 569px;
    height: 257px;
  }

  .city-selector-modal__cities .city-selector-modal__title {
    white-space: nowrap;
  }

  .city-selector-modal__cities .city-selector-modal__title-line {
    display: inline;
    white-space: nowrap;
  }

  .city-selector-modal__cities
    .city-selector-modal__title-line
    + .city-selector-modal__title-line::before {
    content: '\00a0';
  }

  .city-selector-modal__city-grid {
    column-gap: 103px;
    row-gap: 0;
    margin-top: 34px;
  }

  .city-selector-modal__city-column {
    gap: 16px;
  }

  .city-selector-modal__city-column--desktop-only {
    display: flex;
  }

  .city-selector-modal__city-group.city-selector-modal__city-group--mobile-only {
    display: none;
  }
}

@media (min-width: 1440px) {
  .city-selector-modal__cities {
    width: 851px;
    height: 465px;
  }
  .city-selector-modal__city-column {
    gap: 29px;
  }
  .city-selector-modal__city-group {
    gap: 5px;
  }
  .city-selector-modal__actions {
    width: 447px;
    height: 383px;
  }
  .city-selector-modal__city-grid {
    column-gap: 80px;
    row-gap: 0;
    margin-top: 20px;
  }

  .city-selector-modal__city-column {
    gap: 18px;
  }

  .city-selector-modal__callback {
    width: 573px;
    height: auto;
    min-height: 512px;
    padding-bottom: 40px;
  }

  .city-selector-modal__success {
    width: 569px;
    height: 266px;
  }
  .city-selector-modal__city-group button {
    font-size: 16px;
  }
  .city-selector-modal__callback > p {
    font-size: 18px;
  }
  .city-selector-modal__callback form .btn {
    font-size: 18px;
    margin-top: 0px;
  }
}
@font-face {
  font-family: 'Oswald';
  src: url(../fonts/Oswald-cyrillic.woff2) format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* removed @font-face: file missing */
/* removed @font-face: file missing */
@font-face {
  font-family: 'Oswald';
  src: url(../fonts/Oswald-latin.woff2) format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
/* Tektur */
/* removed @font-face: file missing */
@font-face {
  font-family: 'Tektur';
  src: url(../fonts/Tektur-cyrillic.woff2) format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* removed @font-face: file missing */
/* removed @font-face: file missing */
/* removed @font-face: file missing */
@font-face {
  font-family: 'Tektur';
  src: url(../fonts/Tektur-latin.woff2) format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
/* removed @font-face: file missing */
/* removed @font-face: file missing */
/* removed @font-face: file missing */
/* removed @font-face: file missing */
/* removed @font-face: file missing */
:root {
  --bg: #141414;
  --bg-deep: #090713;
  --white: #f5f5f5;
  --black: #141414;
  --gold: #d4a82a;
  --gold-bright: #f2b626;
  --purple: #a449f5;
  --purple-deep: #7818df;
  --purple-dark: #19005c;
  --purple-glow:
    0 0 32px 12px rgba(164, 73, 245, 0.62), 0 0 22px rgba(164, 73, 245, 0.92);
  --purple-glow-strong:
    0 0 100px rgba(164, 73, 245, 0.95), 0 0 42px rgba(164, 73, 245, 0.88);
  --purple-glow-text:
    0 0 26px rgba(164, 73, 245, 1), 0 0 12px rgba(164, 73, 245, 0.85);
  --muted: #a8a7b6;
  --accent-beige: #e3ccb6;
  --accent-yellow: #f2b626;
  --accent-violet: #a449f5;
  --light-violet: #dbb3ff;
  --font-family: 'Tektur', sans-serif;
  --second-family: 'Oswald', sans-serif;
  --third-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
  --font3: 'Space Grotesk', sans-serif;
  --font4: 'Bebas Neue', sans-serif;
  --font-display: var(--second-family);
  --font-ui: var(--font-family);
  --font-body: var(--font-family);
  --text-h1-fz: clamp(56px, calc(56px + (100vw - 1024px) * 0.0245726496), 78px);
  --text-h2-fz: clamp(40px, calc(40px + (100vw - 1024px) * 0.0178675214), 56px);
  --text-h3-fz: 36px;
  --time: .3s;
  --text-title-m-fz: clamp(
    20px,
    calc(20px + (100vw - 1024px) * 0.0096153846),
    24px
  );
  --text-title-s-fz: clamp(
    16px,
    calc(16px + (100vw - 1024px) * 0.0048076923),
    18px
  );
  --text-body-fz: clamp(
    16px,
    calc(16px + (100vw - 1024px) * 0.0048076923),
    18px
  );
  --text-btn-fz: clamp(
    16px,
    calc(16px + (100vw - 1024px) * 0.0048076923),
    18px
  );
  --text-menu-fz: clamp(
    14px,
    calc(14px + (100vw - 1024px) * 0.0048076923),
    16px
  );
  --text-input-m-fz: 16px;
  --text-input-s-fz: 12px;
  --text-headline-ls: 0.02em;
  --text-action-ls: 0.1em;
  --white-op-800: rgba(255, 255, 255, 0.8);
  --violet-op-500: rgba(164, 73, 245, 0.5);
  --container: min(1200px, calc(100% - 120px));
  --experience-inline: 110px;
  --gallery-top-space: clamp(56px, 4.5vw, 80px);
  --gallery-fade-boost: clamp(96px, 8vw, 132px);
  --spot-bg-offset: clamp(160px, 12vw, 208px);
  --story-lift: 80px;
  --story-overlap: calc(-1 * var(--story-lift));
  --story-gap: clamp(40px, 3.5vw, 56px);
  --gallery-collage-scale: 0.78;
  --gallery-photo-scale: 1;
  --gallery-photo-drop: 80px;
  --gallery-1-canvas-width: 1926px;
  --gallery-1-canvas-height: 723px;
  --gallery-2-canvas-width: 1920px;
  --gallery-2-canvas-height: 661px;
  --features-gallery-overlap: 200px;
  --spot-yellow-brightness: 1.5;
  --spot-yellow-saturate: 1.75;
  --spot-purple-brightness: 1.3;
  --spot-purple-saturate: 2.2;
  --spot-bg-bottom-stretch: 50px;
  --game-date-line-gap: clamp(5px, 0.520833vw, 10px);
  --audience-height: 812px;
  --audience-inner-min-height: 576px;
  --social-icon-size: 21px;
}
@media (max-width: 1024px) {
  :root {
    --text-h1-fz: 56px;
    --text-h2-fz: 40px;
    --text-h3-fz: 36px;
    --text-title-m-fz: 20px;
    --text-title-s-fz: 16px;
    --text-body-fz: 16px;
    --text-btn-fz: 16px;
    --text-menu-fz: 14px;
    --audience-item-lh: 28px;
  }
}
@media (max-width: 768px) {
  :root {
    --text-h3-fz: 24px;
  }
}
*,
::after,
::before {
  box-sizing: border-box;
}
html,
img {
  max-width: 100%;
}
html {
  scroll-behavior: smooth;
  width: 100%;
}
html.scroll-lock-restoring {
  scroll-behavior: auto !important;
}
.site-nav a,
body {
  font-family: var(--font-family);
}
body,
html {
  overflow-x: hidden;
}
body {
  margin: 0;
  background: var(--bg);
  font-size: var(--text-body-fz);
  font-weight: 400;
  line-height: 1.55;
  min-height: 100vh;
}
img {
  display: block;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.game-slot p span,
.text-gold {
  color: var(--gold);
}
.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 240px 1fr auto;
  align-items: center;
  padding: 40px 60px;
  margin-bottom: 120px;
  isolation: isolate;
  background: transparent;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.site-header-spacer {
  width: 100%;
  pointer-events: none;
}
.site-header::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -1px;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(5, 1, 9, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  transform: translateZ(0);
}
.site-header.is-scrolled::after {
  opacity: 1;
}
.site-header::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 96px);
  background: linear-gradient(
    180deg,
    rgba(5, 1, 9, 0.92) 0,
    rgba(5, 1, 9, 0.72) 28%,
    rgba(5, 1, 9, 0.38) 58%,
    rgba(5, 1, 9, 0.12) 82%,
    rgba(5, 1, 9, 0) 100%
  );
  pointer-events: none;
  z-index: -2;
}
.site-logo {
  line-height: 0;
}
.site-logo-img {
  display: block;
  width: 240px;
  height: auto;
}
.header-social,
.site-nav {
  display: flex;
  align-items: center;
}
.site-nav {
  gap: 28px;
  justify-self: center;
  transform: translateX(15px);
}
.site-nav a {
  padding: 0 4px;
  font-weight: 500;
  font-size: var(--text-menu-fz);
  line-height: 150%;
  letter-spacing: var(--text-action-ls);
  text-transform: uppercase;
  color: var(--white-op-800);
  transition: color 0.2s;
}
.site-menu-modal__nav a:hover,
.site-nav a:hover,
body {
  color: var(--white);
}
.header-social {
  gap: 12px;
  justify-self: end;
}
.header-callback {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-self: end;
  text-align: right;
  line-height: normal;
}
.header-callback__action {
  position: relative;
  z-index: 1;
  isolation: isolate;
  margin: 0;
  padding: 0;
  border: 0;
  background: 0 0;
  cursor: pointer;
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 18px;
  line-height: 133%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light-violet);
  text-shadow: 0 0 20px var(--accent-violet);
}
.header-callback__action::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 42px;
  border-radius: 27px;
  background: rgba(164, 73, 245, 0.62);
  filter: blur(18px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.header-callback__meta {
  position: absolute;
  top: calc(100% + 33px);
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
}
.header-callback__note {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  line-height: 133%;
  text-align: right;
  color: var(--white);
}
.header-callback__phone {
  margin-top: 8px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 171%;
  text-align: right;
  color: var(--white-op-800);
  text-decoration: none;
}
.header-callback__phone:hover {
  color: var(--white);
}
.header-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.header-social img,
.site-menu-modal__social img {
  display: block;
  object-fit: contain;
  transition: filter 0.4s ease;
}
.header-social a,
.header-social img {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
}
.footer-social a:hover img,
.header-social a:hover img,
.site-menu-modal__social a:hover img {
  filter: brightness(0) invert(1);
}
.site-menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: 0 0;
  cursor: pointer;
  justify-self: end;
  line-height: 0;
}
.site-menu-btn-icon {
  display: block;
  width: 40px;
  height: 40px;
}
.site-menu-btn-label {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 14px;
  line-height: 143%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-violet);
  margin-right: -0.1em;
}
body.site-menu-open,
html.site-menu-open,
body.booking-modal-open,
html.booking-modal-open,
body.gallery-lightbox-open,
html.gallery-lightbox-open,
body.private-modal-open,
html.private-modal-open {
  touch-action: none;
  overscroll-behavior: none;
}
.site-menu-modal {
  --site-menu-inline-padding: 15px;
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  background: #141414;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
.site-menu-modal[aria-hidden='false'] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.site-menu-modal__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.site-menu-modal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px var(--site-menu-inline-padding) 0;
}
.site-menu-modal__social {
  display: flex;
  align-items: center;
  gap: 25px;
}
.site-menu-modal__close,
.site-menu-modal__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  line-height: 0;
}
.site-menu-modal__social img {
  width: 21px;
  height: 21px;
}
.site-menu-modal__close {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: 0 0;
  cursor: pointer;
}
.site-menu-modal__close-icon {
  display: block;
  width: 24px;
  height: 24px;
}
.site-menu-modal__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  margin-top: auto;
  padding: 0 var(--site-menu-inline-padding) 20px;
  overflow: hidden;
}
.site-menu-modal__nav a {
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 56px;
  line-height: 100%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white-op-800);
  transition: color 0.2s;
}
@media (max-width: 600px) {
  .site-menu-modal {
    --site-menu-inline-padding: 15px;
  }
  .site-menu-modal__top {
    padding-top: 24px;
  }
  .site-menu-modal__nav {
    gap: 20px;
    padding-bottom: 20px;
  }
  .site-menu-modal__social {
    gap: 20px;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 14px 60px;
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 18px;
  line-height: 133%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn:focus {
  outline: 0;
}
.btn:active {
  transform: translateY(1px);
}
.btn-gold {
  background: var(--gold-bright);
  color: var(--white);
  box-shadow:
    0 0 24px rgba(242, 183, 38, 0.45),
    0 4px 20px rgba(242, 183, 38, 0.35);
}
.btn-purple {
  background: var(--purple);
  color: var(--white);
  box-shadow: var(--purple-glow);
  position: relative;
}
.btn-purple:not(.btn-sm) {
  overflow: hidden;
}
.btn-purple.btn-sm {
  overflow: visible;
}
.btn-purple:not(.btn-sm)::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      ellipse 88px 54px at 18px 18px,
      rgba(255, 255, 255, 0.34),
      transparent 68%
    ),
    radial-gradient(
      ellipse 88px 54px at calc(100% - 18px) 18px,
      rgba(255, 255, 255, 0.34),
      transparent 68%
    ),
    radial-gradient(
      ellipse 88px 54px at 18px calc(100% - 18px),
      rgba(255, 255, 255, 0.24),
      transparent 68%
    ),
    radial-gradient(
      ellipse 88px 54px at calc(100% - 18px) calc(100% - 18px),
      rgba(255, 255, 255, 0.24),
      transparent 68%
    );
  filter: blur(7px);
  transition: opacity 0.35s ease;
}
.btn-purple:not(.btn-sm)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 0 6px rgba(245, 245, 245, 0.3);
  transition: opacity 0.15s ease;
}
.btn-purple:not(.btn-sm):hover::before {
  opacity: 1;
}

.btn-purple:not(.btn-sm):focus-visible:not(:hover)::after,
.btn-purple:not(.btn-sm):focus:not(:hover)::after {
  // opacity: 1;
}
.btn-purple:not(.btn-sm):focus-visible:not(:hover),
.btn-purple:not(.btn-sm):focus:not(:hover) {
  outline: 0;
}
.btn-sm {
  min-width: auto;
  height: auto;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 18px;
  line-height: 133%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: 0 0;
  box-shadow: var(--purple-glow-text);
}
.btn-purple.btn-sm:hover,
.btn-sm:hover,
.footer-nav a:hover,
.game-card .btn-sm:hover {
  color: var(--white);
}
.btn-sm:active,
.btn-sm:focus,
.btn-sm:focus-visible {
  border: 1px solid var(--white);
  border-radius: 8px;
  padding: 2px 4px;
  min-width: 117px;
  width: auto;
  height: 28px;
  white-space: nowrap;
  transform: none;
  outline: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.gallery-lightbox,
body.gallery-lightbox-open .gallery-1,
body.gallery-lightbox-open .gallery-2 {
  pointer-events: none;
}
.gallery-lightbox {
  --gallery-lightbox-photo-width: min(348px, calc(100vw - 24px));
  --gallery-lightbox-photo-height: min(400px, calc(100vh - 140px));
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}
.gallery-lightbox[aria-hidden='false'] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.92);
  cursor: pointer;
}
.gallery-lightbox__close {
  position: fixed;
  top: 40px;
  right: 40px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: 0 0;
  cursor: pointer;
}
.gallery-lightbox__close-icon {
  display: block;
  width: 24px;
  height: 24px;
}
.gallery-lightbox__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  padding: 72px 24px 40px;
  box-sizing: border-box;
  pointer-events: none;
  overflow: hidden;
  overscroll-behavior: none;
}
.gallery-lightbox__content > * {
  pointer-events: auto;
}
.gallery-lightbox__viewport {
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  container-type: inline-size;
  pointer-events: auto;
  cursor: default;
  overscroll-behavior: none;
  touch-action: none;
}
.gallery-lightbox__track {
  display: flex;
  align-items: center;
  transition: transform 0.4s ease;
  will-change: transform;
  touch-action: none;
}
.gallery-lightbox__slide {
  flex: 0 0 100cqw;
  width: 100cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.gallery-lightbox--peek .gallery-lightbox__slide {
  flex: 0 0 calc(100cqw - 2 * var(--gallery-lightbox-peek, 0px));
  width: calc(100cqw - 2 * var(--gallery-lightbox-peek, 0px));
}
.gallery-lightbox--peek .gallery-lightbox__photo-area {
  width: var(--gallery-lightbox-center-width);
  max-width: var(--gallery-lightbox-center-width);
  flex-shrink: 0;
}
.gallery-lightbox__slide:not(.is-active) {
  pointer-events: none;
}
.gallery-lightbox__photo-area {
  width: var(--gallery-lightbox-photo-width);
  height: var(--gallery-lightbox-photo-height);
  max-width: calc(100% - 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: auto;
}
@media (min-width: 1025px) {
  .gallery-lightbox {
    --gallery-lightbox-photo-width: min(
      1186px,
      calc(100vw - 64px),
      calc((100vh - 180px) * 1186 / 628)
    );
    --gallery-lightbox-photo-height: min(
      628px,
      calc(100vh - 180px),
      calc((100vw - 64px) * 628 / 1186)
    );
  }
}
.gallery-lightbox__photo-area img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 16px;
  object-fit: contain;
  object-position: center center;
}
.gallery-lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-top: 20px;
  pointer-events: auto;
}
.gallery-lightbox__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--purple);
  box-shadow: var(--purple-glow);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.gallery-lightbox__nav-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--purple-glow-strong);
}
.gallery-lightbox__nav-btn img {
  display: block;
  width: 12px;
  height: 22px;
}
.gallery-1 .gallery-photo,
.gallery-2 .gallery-photo {
  cursor: pointer;
}
@media (min-width: 768px) {
  .gallery-lightbox__nav {
    gap: 35px;
    margin-top: 60px;
  }
  .gallery-lightbox__nav-btn {
    width: 48px;
    height: 44px;
  }
}
@media (max-width: 1024px) {
  .gallery-lightbox {
    --gallery-lightbox-photo-width: min(864px, calc(100vw - 64px));
    --gallery-lightbox-photo-height: min(560px, calc(100vh - 180px));
  }
  .gallery-lightbox__close {
    top: 32px;
    right: 32px;
  }
}
@media (max-width: 768px) {
  .gallery-lightbox {
    --gallery-lightbox-photo-width: min(592px, calc(100vw - 48px));
    --gallery-lightbox-photo-height: min(80vh, calc(100vh - 200px));
    --gallery-lightbox-peek: 60px;
    --gallery-lightbox-center-width: min(
      592px,
      calc(100vw - 2 * var(--gallery-lightbox-peek))
    );
    background: #000;
  }
  .gallery-lightbox__backdrop {
    background: #000;
  }
  .gallery-lightbox__content {
    padding: 64px 0 32px;
  }
  .gallery-lightbox__close {
    top: 24px;
    right: 24px;
  }
  .gallery-lightbox__nav {
    display: none;
  }
  .gallery-lightbox__viewport {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .gallery-lightbox__viewport.is-dragging {
    cursor: grabbing;
  }
}
@media (max-width: 600px) {
  .gallery-lightbox {
    --gallery-lightbox-peek: 12px;
  }
  .gallery-1 .gallery-collage-shell {
    transform: translateX(-50%) scale(calc(1 / 1.1 / 1.3 / 2));
    transform-origin: center top;
  }
  .gallery-2 .gallery-collage-shell-2 {
    transform: translateX(-50%) scale(calc(1.15 / 1.1 / 2.5 * 1.3));
    transform-origin: center top;
  }
}
@media (max-width: 390px) {
  .gallery-lightbox {
    --gallery-lightbox-photo-width: min(348px, calc(100vw - 32px));
    --gallery-lightbox-photo-height: min(80vh, calc(100vh - 160px));
    --gallery-lightbox-center-width: min(
      348px,
      calc(100vw - 2 * var(--gallery-lightbox-peek))
    );
  }
  .gallery-lightbox__photo-area img {
    border-radius: 12px;
  }
}
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
.booking-modal[aria-hidden='false'] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.booking-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 5, 16, 0.72);
  backdrop-filter: blur(6px);
}
.booking-modal__dialog {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  background: #0b0b0f;
  box-shadow:
    0 0 32px 12px var(--violet-op-500),
    0 0 120px 0 rgba(164, 73, 245, 0.4);
}
.booking-modal__dialog--booking {
  width: 410px;
  height: 554px;
  padding: 32px 42px 42px;
}
.booking-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  background: 0 0;
  cursor: pointer;
}
.booking-modal__close-icon {
  display: block;
  width: 24px;
  height: 24px;
}
.booking-modal__title {
  margin: 0 0 20px;
  font-family: var(--second-family);
  font-weight: 400;
  font-size: 36px;
  line-height: 117%;
  letter-spacing: 0.04em;
  color: var(--accent-yellow);
}
.booking-modal__date {
  margin: 0 0 2px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 163%;
  color: var(--white);
}
.booking-modal__address,
.booking-modal__label {
  margin: 0 0 12px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 12px;
  line-height: 133%;
  color: var(--white-op-800);
}
.booking-modal__label {
  margin: 0 0 4px;
  font-weight: 500;
  font-size: 16px;
  line-height: 163%;
  color: var(--white);
}
.booking-modal__sessions {
  display: flex;
  gap: 14px;
  margin-top: -20px;
}
.booking-modal__session {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 0;
  padding: 0 0 6px;
  border-bottom: 2px solid transparent;
  background: 0 0;
  font-family: var(--font-family);
  color: var(--white);
  cursor: pointer;
}
.booking-modal__session.is-active {
  border-bottom-color: var(--accent-violet);
}
.booking-modal__field input,
.booking-modal__session-spots,
.booking-modal__session-time,
.private-modal__field input {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--white);
}
.booking-modal__session-spots {
  font-size: 12px;
  line-height: 133%;
  color: var(--accent-yellow);
}
.booking-modal__form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}
.booking-modal__field {
  width: 326px;
  height: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding: 5px 0;
}
.booking-modal__field input,
.private-modal__field input {
  width: 100%;
  border: 0;
  padding: 0;
  outline: 0;
  background: 0 0;
  color: var(--white-op-800);
}
.booking-modal__field input::placeholder,
.private-modal__field input::placeholder {
  color: var(--white-op-800);
  opacity: 1;
}
.booking-modal__footer-row {
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 326px;
}
.booking-modal__quantity {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 163%;
  text-align: center;
  color: var(--white);
}
.booking-modal__quantity button {
  border: 0;
  padding: 0;
  background: 0 0;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: var(--accent-violet);
  cursor: pointer;
  transform: translateY(-3px);
}
.booking-modal__quantity button[data-quantity-plus] {
  transform: translateY(-2px);
}
.booking-modal__quantity-value {
  min-width: 12px;
  text-align: center;
}
.booking-modal__total,
.booking-success__message p {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 163%;
  color: var(--white);
}
.booking-modal__submit {
  position: relative;
  margin-top: 15px;
  width: 322px;
  height: 46px;
  border-radius: 8px;
  padding: 12px 48px;
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 18px;
  line-height: 133%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}
.booking-modal__submit::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 316px;
  height: 54px;
  border-radius: 10px;
  background: var(--accent-violet);
  filter: blur(30px);
  transform: translate(-50%, -50%);
}
.booking-modal__dialog--success {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 444px;
  height: auto;
  min-height: 294px;
  padding: 36px 20px 32px;
  box-sizing: border-box;
}
.booking-modal__dialog--success[hidden] {
  display: none;
}
.booking-modal--success,
.booking-modal__dialog--success {
  align-items: center;
  justify-content: center;
}
.booking-success__title {
  margin: 0 0 18px;
  font-family: var(--second-family);
  font-weight: 400;
  font-size: 36px;
  line-height: 117%;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--accent-yellow);
}
.booking-success__message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  max-width: 100%;
  margin: 0 0 28px;
}
.booking-success__message p {
  font-size: 18px;
  line-height: 156%;
  text-align: center;
  white-space: nowrap;
}
.booking-success__ok,
.booking-success__ok.btn-purple,
.private-success__ok,
.private-success__ok.btn-purple {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  min-width: 74px;
  height: 44px;
  margin-top: auto;
  padding: 0;
  border: 0;
  border-radius: 27px;
  background: 0 0;
  box-shadow: var(--purple-glow-text);
  transform: none;
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 18px;
  line-height: 133%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
}
.private-success__ok {
  transform: translateY(-50px);
}
.booking-success__ok:active {
  transform: translateY(1px);
}
.booking-success__ok:focus,
.booking-success__ok:focus-visible,
.private-success__ok:focus,
.private-success__ok:focus-visible {
  outline: 0;
  border: 0;
  box-shadow: var(--purple-glow-text);
  transform: none;
}
.private-success__ok:active {
  transform: translateY(-49px);
}
.booking-success__ok::before,
.private-success__ok::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 32px;
  border-radius: 20px;
  background: rgba(164, 73, 245, 0.82);
  filter: blur(18px);
  transform: translate(-50%, -50%);
}
@media (max-width: 1024px) {
  .booking-success__title {
    font-size: 52px;
    line-height: 81%;
  }
  .booking-success__message p {
    font-size: 16px;
    line-height: 163%;
  }
  .booking-modal__dialog--success {
    width: 444px;
    max-width: calc(100vw - 48px);
    padding: 36px 20px 32px;
  }
  .booking-success__ok,
  .private-success__ok {
    font-size: 18px;
  }
}
@media (max-width: 600px) {
  .booking-modal--success {
    align-items: stretch;
    justify-content: stretch;
  }
  .booking-modal__dialog--success {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    min-height: 100vh;
    border-radius: 0;
    padding: 24px 16px;
    box-shadow: none;
  }
  .booking-success__title {
    font-size: 36px;
    line-height: 83%;
  }
  .booking-success__message p {
    font-size: clamp(14px, 4vw, 16px);
  }
  .booking-success__ok {
    margin-top: auto;
    transform: translateY(-50px);
  }
  .booking-success__ok:active {
    transform: translateY(-49px);
  }
}
@media (min-width: 1440px) {
  .booking-modal__sessions {
    margin-top: -5px;
  }
}
@media (max-width: 1024px) {
  .booking-modal__dialog--booking {
    width: 382px;
    height: 544px;
    padding: 32px 42px 42px;
  }
  .booking-modal__field,
  .booking-modal__footer-row {
    width: 316px;
  }
  .booking-modal__title {
    font-size: 34px;
  }
  .booking-modal__date {
    font-size: 14px;
  }
  .booking-modal__address {
    font-size: 11px;
  }
  .booking-modal__sessions {
    margin-top: 0;
  }
  .booking-modal__footer-row {
    padding-left: 5px;
    padding-right: 15px;
  }
  .booking-modal__submit {
    width: 294px;
    height: 40px;
    padding: 10px 40px;
  }
  .booking-modal__submit::before {
    width: 294px;
    height: 42px;
  }
}
@media (max-width: 480px) {
  .booking-modal__dialog--booking {
    width: min(392px, calc(100vw - 24px));
    height: auto;
    min-height: 544px;
    padding: 24px;
  }
  .booking-modal__field,
  .booking-modal__footer-row,
  .booking-modal__submit {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .booking-modal {
    align-items: stretch;
    justify-content: stretch;
  }
  .booking-modal__dialog--booking {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding: 24px;
    box-shadow: none;
    overflow-y: auto;
  }
  .booking-modal__close {
    top: 24px;
    right: 24px;
  }
  .booking-modal__title {
    margin-bottom: 14px;
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 52px;
    line-height: 81%;
    letter-spacing: 0.04em;
    color: var(--accent-yellow);
  }
  .booking-modal__date {
    font-family: var(--font-family);
    color: var(--white);
    margin-top: 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 163%;
  }
  .booking-modal__address {
    margin-bottom: 130px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: var(--white-op-800);
  }
  .booking-modal__label {
    margin-top: -8px;
  }
  .booking-modal__sessions {
    gap: 42px;
    margin-top: 12px;
  }
  .booking-modal__form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 18px;
    margin-top: 32px;
  }
  .booking-modal__field {
    width: 85%;
    height: 44px;
  }
  .booking-modal__footer-row,
  .booking-modal__submit {
    width: auto;
    grid-column: 1/-1;
  }
  .booking-modal__footer-row {
    margin-top: 28px;
  }
  .booking-modal__submit {
    margin-top: 15px;
    min-height: 44px;
  }
  .booking-modal__submit::before {
    width: 100%;
    max-width: none;
  }
}
@media (min-width: 600px) and (max-width: 768px) {
  .booking-modal__form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
  }
  .booking-modal__field {
    width: calc((100% - 30px) / 3 - 30px);
    flex: 0 0 calc((100% - 30px) / 3 - 30px);
    min-width: 0;
    height: 44px;
  }
  .booking-modal__field:nth-child(3) {
    width: calc((100% - 30px) / 3 + 30px);
    flex: 0 0 calc((100% - 30px) / 3 + 30px);
  }
  .booking-modal__field input {
    margin-top: 10px;
  }
  .booking-modal__footer-row,
  .booking-modal__submit {
    width: 100%;
    flex: 0 0 100%;
    grid-column: auto;
  }
  .booking-modal__quantity {
    font-family: var(--font-family);
    text-align: center;
    color: var(--white);
    align-items: center;
    gap: 14px;
    font-size: 16px;
    font-weight: 500;
    line-height: 163%;
    display: flex;
  }
  .booking-modal__total,
  .booking-success__message p {
    font-family: var(--font-family);
    color: var(--white);
    margin: -15px;
    font-size: 16px;
    font-weight: 500;
    line-height: 163%;
  }
}
@media (min-width: 601px) and (max-width: 768px) {
  .booking-modal.booking-modal--success {
    align-items: center;
    justify-content: center;
  }
  .booking-modal__dialog--success {
    width: 444px;
    height: 294px;
    max-width: calc(100vw - 48px);
    min-height: 294px;
    max-height: 294px;
    padding: 36px 20px 32px;
    overflow: visible;
  }
  .booking-success__title {
    margin-bottom: 14px;
  }
  .booking-success__message {
    margin-bottom: 20px;
  }
  .booking-success__ok {
    margin-top: 0;
  }
}
@media (max-width: 600px) {
  .booking-modal__dialog--booking {
    padding: 20px 24px 28px;
  }
  .booking-modal__close-icon {
    transform: translate(5px, -5px);
  }
  .booking-modal__title {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 36px;
    line-height: 83%;
    letter-spacing: 0.04em;
    color: var(--accent-yellow);
  }
  .booking-modal__date {
    margin-top: -12px;
  }
  .booking-modal__address {
    margin-bottom: 20px;
    transform: translateY(-6px);
  }
  .booking-modal__sessions {
    gap: 44px;
    margin-top: -5px;
  }
  .booking-modal__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 26px;
  }
  .booking-modal__field {
    width: 100%;
    height: 42px;
  }
  .booking-modal__field:nth-child(3) {
    transform: translateY(-5px);
  }
  .booking-modal__footer-row {
    width: 100%;
    margin-top: 0px;
    padding: 0;
  }
  .booking-modal__quantity {
    gap: 0;
  }
  .booking-modal__quantity button[data-quantity-minus] {
    margin-left: 10px;
  }
  .booking-modal__quantity-value {
    margin-left: 15px;
  }
  .booking-modal__quantity button[data-quantity-plus] {
    margin-left: 5px;
    transform: translateY(-2px);
  }
  .booking-modal__submit {
    width: 100%;
    margin-top: -45px;
    transform: translateY(-15px);
  }
}
.private-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
.private-modal[aria-hidden='false'] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.private-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 5, 16, 0.72);
  backdrop-filter: blur(6px);
}
.private-modal__dialog {
  position: relative;
  z-index: 1;
  width: 410px;
  min-height: 360px;
  border-radius: 16px;
  padding: 32px 42px 42px;
  background: #0b0b0f;
  box-shadow:
    0 0 32px 12px var(--violet-op-500),
    0 0 120px 0 rgba(164, 73, 245, 0.4);
  box-sizing: border-box;
}
.private-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  background: 0 0;
  cursor: pointer;
}
.private-modal__close-icon {
  display: block;
  width: 24px;
  height: 24px;
}
.private-modal__title {
  margin: 0 0 24px;
  font-family: var(--second-family);
  font-weight: 400;
  font-size: 36px;
  line-height: 117%;
  letter-spacing: 0.04em;
  color: var(--accent-yellow);
}
.private-modal__lead,
.private-success__message p {
  margin: 0 0 28px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 163%;
  color: var(--white);
}
.private-modal__dialog--success[hidden],
.private-modal__dialog[hidden],
.private-modal__lead-line--narrow {
  display: none;
}
.private-modal__form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.private-modal__field {
  width: 100%;
  height: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding: 5px 0;
}
.private-modal__submit {
  position: relative;
  width: 100%;
  height: 46px;
  border-radius: 8px;
  padding: 12px 48px;
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 18px;
  line-height: 133%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  margin-top: 5px;
}
.private-modal__field {
  margin-top: -10px;
}
.private-modal__submit::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 54px;
  border-radius: 10px;
  background: var(--accent-violet);
  filter: blur(30px);
  transform: translate(-50%, -50%);
}
.private-modal__dialog--success {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 444px;
  height: auto;
  max-height: 240px;
  min-height: auto;
  padding: 36px 20px 32px;
  box-sizing: border-box;
}
.private-modal--success,
.private-modal__dialog--success {
  align-items: center;
  justify-content: center;
}
.private-success__title {
  margin: 0 0 18px;
  font-family: var(--second-family);
  font-weight: 400;
  font-size: 36px;
  line-height: 117%;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--accent-yellow);
}
.private-success__message {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 0 28px;
}
.private-success__message p {
  margin: 0;
  font-size: 18px;
  line-height: 156%;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .private-modal__dialog {
    width: 422px;
    padding: 32px 42px 12px;
    min-height: 330px;
  }
  .private-modal__dialog--success {
    width: 444px;
    max-width: calc(100vw - 48px);
    max-height: 240px;
    min-height: auto;
    padding: 36px 20px 32px;
  }
  .private-success__message p {
    font-size: 16px;
    line-height: 163%;
  }
  .private-modal__title {
    font-size: 34px;
  }
}
@media (max-width: 768px) {
  .private-modal {
    align-items: center;
    justify-content: center;
  }
  .private-modal__dialog {
    width: 402px;
    max-width: calc(100vw - 48px);
    min-height: 350px;
    height: auto;
    border-radius: 16px;
    padding: 32px 42px 12px;
    box-shadow:
      0 0 32px 12px var(--violet-op-500),
      0 0 120px 0 rgba(164, 73, 245, 0.4);
  }
  .private-modal__close {
    top: 24px;
    right: 24px;
  }
  .private-modal__title {
    margin-bottom: 20px;
    font-size: 52px;
    line-height: 81%;
    margin-top: 15px;
  }
  .private-modal__field {
    margin-top: 10px;
  }
  .private-modal__submit {
    margin-top: 5px;
  }
  .private-modal__dialog--success {
    width: 444px;
    max-width: calc(100vw - 48px);
    max-height: 240px;
    min-height: auto;
    height: auto;
    padding: 36px 20px 32px;
  }
  .private-success__title {
    margin-bottom: 14px;
    font-size: 52px;
    line-height: 81%;
  }
  .private-success__message {
    margin-bottom: 20px;
  }
  .private-success__message p {
    font-size: 16px;
    line-height: 163%;
  }
  .private-success__ok {
    margin-top: 0;
  }
}
@media (max-width: 600px) {
  .private-modal {
    align-items: stretch;
    justify-content: stretch;
  }
  .private-modal__dialog {
    position: relative;
    z-index: 4;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 100dvh;
    border-radius: 0;
    padding: 20px 24px 28px;
    box-shadow: none;
    overflow: hidden;
  }
  .private-modal__close {
    top: 20px;
    right: 24px;
  }
  .private-modal__close-icon {
    transform: translateY(12px);
  }
  .private-modal__title {
    margin-bottom: 24px;
    font-size: 36px;
    line-height: 83%;
  }
  .private-modal__lead {
    margin-top: 110px;
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 163%;
    transform: translateY(-40px);
  }
  .private-modal__lead-line--wide {
    display: none;
  }
  .private-modal__lead-line--narrow {
    display: block;
    transform: translate(4px, 13px);
  }
  .private-modal__form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
    transform: translateY(-40px);
  }
  .private-modal__submit {
    height: 44px;
    margin-top: auto;
    transform: translateY(-30px);
  }
  .private-modal--success {
    align-items: stretch;
    justify-content: stretch;
  }
  .private-modal__dialog--success {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 100dvh;
    max-height: none;
    border-radius: 0;
    padding: 24px 16px;
    box-shadow: none;
    text-align: center;
  }
  .private-success__title {
    font-size: 36px;
    line-height: 83%;
  }
  .private-success__message {
    align-items: center;
    margin-bottom: 28px;
  }
  .private-success__message p {
    font-size: 16px;
    line-height: 163%;
    white-space: normal;
    text-align: center;
  }
  .private-success__ok {
    margin-top: 0;
  }
}
.intro-stack::before,
.watermark {
  position: absolute;
  pointer-events: none;
}
.watermark {
  font-family: var(--font-display);
  font-size: clamp(120px, 18vw, 220px);
  line-height: 0.85;
  letter-spacing: var(--text-headline-ls);
  color: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  user-select: none;
  z-index: 0;
}
.watermark-balagan {
  right: -2%;
  top: 8%;
}
.watermark-experience {
  left: 50%;
  top: 129px;
  width: 100vw;
  max-width: none;
  transform: translateX(-50%) translateY(-60px);
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  white-space: normal;
  font-size: inherit;
  letter-spacing: normal;
  text-align: initial;
  color: inherit;
  background: 0 0;
  z-index: 0;
  pointer-events: none;
}
.audience-inner > .watermark-guess picture,
.watermark-experience picture,
.watermark-move picture {
  display: block;
  width: 100%;
}
.watermark-experience-img,
.watermark-guess-img,
.watermark-move-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.watermark-guess {
  left: 50%;
  top: 129px;
  width: 100vw;
  max-width: none;
  transform: translateX(-50%) translateY(-60px);
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  white-space: normal;
  font-size: inherit;
  letter-spacing: normal;
  text-align: initial;
  line-height: normal;
  color: inherit;
  background: 0 0;
  -webkit-background-clip: unset;
  background-clip: unset;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}
.audience-inner > .watermark-guess {
  left: 50%;
  right: auto;
  top: 50%;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  display: block;
}
.watermark-move {
  left: 50%;
  bottom: calc(clamp(72px, 8vw, 151px) - 65px);
  width: min(1614px, 100vw);
  max-width: none;
  transform: translateX(-50%);
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  white-space: normal;
  font-size: inherit;
  letter-spacing: normal;
  text-align: initial;
  line-height: normal;
  color: inherit;
  background: 0 0;
  -webkit-background-clip: unset;
  background-clip: unset;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}
.section-title {
  margin: 0;
  font-family: var(--second-family);
  font-size: var(--text-h1-fz);
  font-weight: 500;
  line-height: 103%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}
.section-title-center {
  text-align: center;
}
.section-title-left {
  text-align: left;
}
.intro-stack {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: visible;
  background: var(--bg);
}
.intro-stack::before {
  content: '';
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 20, 20, 0) 0,
    rgba(20, 20, 20, 0.1) 66%,
    rgba(20, 20, 20, 0.06) 100%
  );
  z-index: 1;
}
.intro-stack-glow,
.intro-stack::after {
  position: absolute;
  bottom: 0;
  pointer-events: none;
}
.intro-stack::after {
  content: '';
  left: 0;
  right: 0;
  height: min(340px, 38vh);
  background: linear-gradient(
    180deg,
    transparent 0,
    rgba(20, 20, 20, 0.04) 22%,
    rgba(20, 20, 20, 0.09) 42%,
    rgba(20, 20, 20, 0.15) 62%,
    rgba(20, 20, 20, 0.22) 82%,
    rgba(20, 20, 20, 0.26) 100%
  );
  z-index: 1;
}
.intro-stack-glow {
  top: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 4%,
    #000 62%,
    transparent 88%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 4%,
    #000 62%,
    transparent 88%
  );
}
.intro-stack-glow-gold {
  left: 0;
  width: min(1012px, 70.3vw);
  background-image: url(../images/firs_spot_yellow.png);
  background-position: left top;
  opacity: 0.84;
  filter: brightness(1.12) saturate(1.18);
}
.intro-stack-glow-purple {
  right: 0;
  width: min(1140px, 79.2vw);
  background-image: url(../images/firs_spot_purple.png);
  background-position: right 200px;
  opacity: 0.64;
  filter: brightness(1.1) saturate(1.22);
}
.intro-stack > section {
  position: relative;
  z-index: 2;
}
.hero {
  position: relative;
  min-height: auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  overflow: visible;
  background: 0 0;
}
.hero-glow {
  display: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: var(--container);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-title {
  margin: 0;
  max-width: min(1100px, 100%);
  font-weight: 500;
  font-family: var(--second-family);
  font-size: var(--text-h1-fz);
  line-height: 103%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
  transform: translateX(-5px);
  text-shadow:
    0 0 40px rgba(164, 73, 246, 0.15),
    0 4px 30px rgba(0, 0, 0, 0.5);
}
.hero-lead-line,
.hero-title-line {
  display: block;
  white-space: nowrap;
}
.hero-lead-line--medium,
.hero-lead-line--narrow,
.hero-title-line--compact,
.hero-title-line--medium,
.hero-title-line--narrow,
.hero-title-line--tablet {
  display: none;
}
.hero-lead {
  margin: 36px 0 0;
  max-width: 647px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-title-m-fz);
  line-height: 142%;
  text-align: center;
  color: var(--white);
}
.hero-inner .btn {
  margin-top: 64px;
  min-width: 229px;
}
/* About: mobile-only (≤600). Desktop styles TBD. */
.about {
  display: none;
}
@media (max-width: 600px) {
  .about {
    display: block;
    position: relative;
    padding: 40px 15px 48px;
    overflow: hidden;
    background: 0 0;
    margin-top: 70px;
  }
  .about-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
  }
  .about-media {
    position: relative;
    width: 358px;
    height: 203px;
    max-width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #1a0a24;
    z-index: 2;
  }
  .about-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .about-title {
    position: relative;
    z-index: 3;
    margin: -65px 0 0;
    max-width: 14em;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
  }
  .about-title-line {
    display: block;
  }
  .about-title-line--gold {
    color: var(--gold);
    text-shadow: none;
  }
  .about-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 30px;
  }
  /* ≤600: от «30+ клубов» и ниже — всё на 35px вниз */
  .about-stat:nth-child(2) {
    margin-top: 25px;
  }
  .about-stat-title {
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
  }
  .about-stat-text {
    margin: 12px 0 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: var(--white-op-800);
  }
}
@media (min-width: 601px) and (max-width: 768px) {
  .intro-stack-glow-gold {
    transform: scale(2);
  }
  .intro-stack-glow-purple {
    transform: scale(2) translateY(-300px);
  }
  .about {
    display: block;
    position: relative;
    z-index: 4;
    padding: 40px 15px 0;
    overflow: visible;
    background: 0 0;
    margin-top: 120px;
    margin-bottom: 140px;
  }
  .about-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 708px;
    margin: 0 auto;
    overflow: visible;
  }
  .about-media {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 708 / 400;
    max-width: 100%;
    overflow: visible;
    border-radius: 24px;
    background: transparent;
    box-shadow: 0 0 40px 8px rgba(164, 73, 245, 0.45);
    margin-top: -10px;
    z-index: 2;
  }
  .about-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 24px;
    background: #1a0a24;
  }
  .about-title {
    position: relative;
    z-index: 3;
    margin: -120px 0 0;
    max-width: 14em;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 46px;
    line-height: 104%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
    transform: translateY(-130px) translateX(35px);
  }
  .about-title-line {
    display: block;
  }
  .about-title-line--gold {
    color: var(--gold);
    text-shadow: none;
  }
  .about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    margin-top: -38px;
  }
  .about-stat:nth-child(2) {
    margin-top: 0;
  }
  .about-stat-title {
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 36px;
    line-height: 117%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    white-space: nowrap;
  }
  .about-stat-text {
    margin: 22px 0 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--white-op-800);
  }
  .experience {
    margin-top: -120px;
  }
  .experience-photo {
    transform: scale(1.3) translateX(-130px);
  }
}
.experience {
  position: relative;
  padding: 0 var(--experience-inline);
  overflow: hidden;
  background: 0 0;
}
.experience-glow,
.experience-visual::before,
.experience::before {
  display: none;
}
.experience-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
  min-height: 778px;
}
.experience-title {
  position: absolute;
  left: 0;
  top: 283px;
  width: max-content;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-family: var(--second-family);
  font-weight: 500;
  font-size: var(--text-h1-fz);
  line-height: 103%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  z-index: 3;
}
.experience-title-line {
  display: block;
  white-space: nowrap;
}
.experience-title-line--again {
  align-self: flex-end;
}
.experience-visual {
  position: absolute;
  left: 50%;
  top: 200px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: min(600px, 41.67vw);
  height: min(650px, 45.14vw);
  transform: translate(-50%, 5px);
}
.experience-visual picture {
  display: block;
  width: 100%;
  height: 100%;
}
.experience-photo {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: bottom center;
  box-shadow: none;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.45));
}
.experience-copy {
  position: absolute;
  left: 60.66%;
  right: auto;
  top: 580px;
  width: max-content;
  max-width: none;
  padding-top: 0;
  margin: 0;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 24px;
  line-height: 142%;
  color: var(--white);
  z-index: 3;
}
.experience-copy p {
  margin: 0;
  max-width: none;
  text-align: left;
}
.experience-copy-line {
  display: block;
  white-space: nowrap;
}
.experience-copy-line--mobile,
.experience-copy-line--narrow {
  display: none;
}
.experience-copy p:last-child {
  margin-bottom: 0;
}
.experience-points {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1700px;
  margin: 30px auto clamp(56px, 6vw, 88px);
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  gap: clamp(12px, 2vw, 128px);
  transform: translateY(20px);
}
.experience-points li {
  white-space: nowrap;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 144%;
  color: var(--white-op-800);
}
.experience-points li::after {
  content: '';
  display: block;
  width: 52px;
  height: 2px;
  margin-top: 12px;
  border-radius: 1px;
  background: var(--white);
}
.experience-points li:nth-child(2)::after {
  background: var(--accent-beige);
}
.experience-points li:nth-child(3)::after {
  background: var(--accent-yellow);
}
.experience-points li:nth-child(4)::after {
  background: var(--accent-violet);
}
.experience-point-line {
  display: block;
}
.experience-point-line--mobile,
.experience-point-line--narrow,
.experience-point-line--md,
.experience-point-line--tablet {
  display: none;
}
.story-games-wrap {
  overflow: visible;
  margin-top: var(--story-overlap);
  padding-top: var(--story-gap);
  background: 0 0;
}
.story-games-wrap::before {
  left: 50%;
  top: calc(var(--spot-bg-offset) - 300px);
  bottom: calc(-1 * var(--spot-bg-bottom-stretch));
  width: min(2048px, 142.22vw);
  background: url(../images/second_spot_yellow_purple_1920.webp) top center/100%
    100%no-repeat;
  transform: translateX(-50%);
  opacity: 1;
  filter: brightness(var(--spot-yellow-brightness))
    saturate(var(--spot-yellow-saturate));
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0, 0, 0, 0.06) 10%,
    rgba(0, 0, 0, 0.16) 20%,
    rgba(0, 0, 0, 0.3) 30%,
    rgba(0, 0, 0, 0.48) 40%,
    rgba(0, 0, 0, 0.68) 50%,
    rgba(0, 0, 0, 0.86) 58%,
    #000 66%,
    #000 97%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0, 0, 0, 0.06) 10%,
    rgba(0, 0, 0, 0.16) 20%,
    rgba(0, 0, 0, 0.3) 30%,
    rgba(0, 0, 0, 0.48) 40%,
    rgba(0, 0, 0, 0.68) 50%,
    rgba(0, 0, 0, 0.86) 58%,
    #000 66%,
    #000 97%,
    transparent 100%
  );
}
.gallery.gallery-1::before,
.story-games-wrap::after,
.story-games-wrap::before {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.story-games-wrap::after {
  left: 50%;
  top: calc(var(--spot-bg-offset) - 300px);
  bottom: calc(-1 * var(--spot-bg-bottom-stretch));
  width: min(2048px, 142.22vw);
  background: url(../images/second_spot_yellow_purple_1920.webp) top center/100%
    100%no-repeat;
  transform: translateX(-50%);
  filter: brightness(var(--spot-purple-brightness))
    saturate(var(--spot-purple-saturate));
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    transparent 46%,
    rgba(0, 0, 0, 0.35) 54%,
    rgba(0, 0, 0, 0.78) 64%,
    #000 74%,
    #000 88%,
    rgba(0, 0, 0, 0.35) 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    transparent 46%,
    rgba(0, 0, 0, 0.35) 54%,
    rgba(0, 0, 0, 0.78) 64%,
    #000 74%,
    #000 88%,
    rgba(0, 0, 0, 0.35) 96%,
    transparent 100%
  );
}
.story-games-wrap,
.story-games-wrap > section {
  position: relative;
  z-index: 1;
}
.gallery,
.gallery.gallery-1 {
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
}
.gallery {
  max-width: 100%;
  margin-top: -48px;
  padding: 28px 0 60px;
}
.gallery.gallery-1 {
  margin: 0;
  padding: var(--gallery-top-space) 0 0;
  z-index: 2;
}
.gallery.gallery-1::before {
  top: calc(
    -1 * (var(--gallery-fade-boost) + var(--story-gap) + var(--story-lift))
  );
  left: 0;
  right: 0;
  height: calc(
    var(--gallery-top-space) + var(--gallery-fade-boost) + var(--story-gap) +
      var(--story-lift)
  );
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    rgba(20, 20, 20, 0.84) 16%,
    rgba(20, 20, 20, 0.62) 34%,
    rgba(20, 20, 20, 0.4) 52%,
    rgba(20, 20, 20, 0.22) 68%,
    rgba(20, 20, 20, 0.1) 82%,
    rgba(20, 20, 20, 0.04) 92%,
    transparent 100%
  );
}
@media (min-width: 1440px) and (max-width: 1920px) {
  .gallery.gallery-1::before {
    top: calc(
      -1 * (var(--gallery-fade-boost) + var(--story-gap) + var(--story-lift)) +
        380px
    );
  }
}
.gallery-1 .gallery-track {
  position: relative;
  z-index: 1;
  padding: 0;
  width: 100%;
}
.gallery-1 .gallery-collage-shell {
  margin-top: calc(var(--gallery-photo-drop) - 50px);
}
.gallery-collage-shell {
  width: var(--gallery-1-canvas-width);
  height: var(--gallery-1-canvas-height);
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;
  flex-shrink: 0;
}
.gallery-track {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0;
}
.gallery-collage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  transform: none;
}
.gallery-collage .gallery-photo {
  transform: none;
  overflow: visible;
  border-radius: 0;
  isolation: auto;
}
.gallery-collage .gallery-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center center;
  transform: scale(1.56);
  transform-origin: center center;
}
.gallery-collage .g1 {
  left: 0;
  top: 57.54%;
  width: 20.51%;
  height: 36.38%;
  z-index: 1;
}
.gallery-collage .g1 img {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 14%,
    #000 86%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 14%,
    #000 86%,
    transparent 100%
  );
}
.gallery-collage .g2 {
  left: 13%;
  top: 40.94%;
  width: 18.22%;
  height: 44.26%;
  z-index: 2;
}
.gallery-collage .g3 {
  left: 21.43%;
  top: 62.52%;
  width: 27.26%;
  height: 39.42%;
  z-index: 3;
}
.gallery-collage .g3 img {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 72%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 100%);
}
.gallery-collage .g4 {
  left: 38.78%;
  top: 20.2%;
  width: 23.47%;
  height: 65.56%;
  z-index: 4;
}
.gallery-collage .g5 {
  left: 58.2%;
  top: 41.49%;
  width: 19.99%;
  height: 39.7%;
  z-index: 5;
}
.gallery-collage .g6 {
  left: 73.19%;
  top: 31.95%;
  width: 20.41%;
  height: 63.49%;
  z-index: 6;
}
.gallery-collage .g6 img {
  transform: scale(1.34);
}
.gallery-collage .g7 {
  right: 0;
  top: 49.38%;
  width: 15.84%;
  height: 52.7%;
  z-index: 7;
}
.gallery-collage .g7 img {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 74%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, #000 0, #000 74%, transparent 100%);
}
.gallery-track img {
  width: clamp(180px, 22vw, 280px);
  height: clamp(220px, 28vw, 340px);
  object-fit: cover;
  border-radius: 6px;
  margin-left: -40px;
  box-shadow: none;
  transform: rotate(var(--rot, 0deg));
}
.gallery-photo {
  position: absolute;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
}
.gallery-photo::before {
  display: none;
}
.gallery-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: inherit;
  object-fit: cover;
  box-shadow: none;
}
.gallery-track:not(.gallery-collage) img:first-child {
  margin-left: 0;
  --rot: -4deg;
}
.gallery-track:not(.gallery-collage) img:nth-child(2) {
  --rot: 2deg;
  z-index: 2;
}
.gallery-track:not(.gallery-collage) img:nth-child(3) {
  --rot: -2deg;
  z-index: 3;
}
.gallery-track:not(.gallery-collage) img:nth-child(4) {
  --rot: 3deg;
  z-index: 1;
}
.gallery-track-wide img {
  width: clamp(160px, 18vw, 240px);
  height: clamp(200px, 24vw, 300px);
}
.gallery-2 {
  width: 100%;
  margin-top: 20px;
  margin-left: 0;
  padding: 180px 0 0;
  overflow-x: clip;
  overflow-y: visible;
}
.gallery-2 .gallery-collage-shell-2 {
  width: var(--gallery-2-canvas-width);
  height: var(--gallery-2-canvas-height);
  max-width: none;
}
.gallery-collage-shell-2 {
  position: relative;
  left: 50%;
  transform: translateX(-50%) scale(calc(1 / 1.1));
  transform-origin: center top;
  flex-shrink: 0;
}
.gallery-collage-2 .gallery-photo img {
  transform: scale(1.716);
  object-fit: contain;
}
.gallery-collage-2 .g8 {
  left: -5%;
  top: 10.29%;
  width: 24%;
  height: 36.76%;
  z-index: 1;
  transform: scale(1.3);
}
.gallery-collage-2 .g9 {
  left: 4.5%;
  top: 0;
  width: 22%;
  height: 34.34%;
  z-index: 2;
}
.gallery-collage-2 .g10 {
  left: 18%;
  top: -15%;
  width: 22%;
  height: 38%;
  z-index: 3;
}
.gallery-collage-2 .g11 {
  left: 32.69%;
  top: 5.37%;
  width: 29.44%;
  height: 55.37%;
  z-index: 4;
}
.gallery-collage-2 .g12 {
  left: 54%;
  top: 10.33%;
  width: 20%;
  height: 36.31%;
  z-index: 5;
}
.gallery-collage-2 .g13 {
  left: 67%;
  top: -8.78%;
  width: 24%;
  height: 39.18%;
  z-index: 6;
}
.gallery-collage-2 .g13 img {
  transform: scale(2.059);
}
.gallery-collage-2 .g14 {
  right: -2%;
  top: 12%;
  width: 24%;
  height: 38%;
  z-index: 7;
  transform: scale(1.3);
}
.gallery-collage-2 .g14 img {
  transform: scale(1.973);
}
.features {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--features-gallery-overlap) + 500px);
  padding: 0 60px;
  overflow: visible;
  background: 0 0;
  pointer-events: none;
  --fx-scale: clamp(0.6, 100vw / 1920, 1);
}
.features-glow {
  display: none;
}
.features-inner {
  position: relative;
  z-index: 1;
  width: var(--container);
  margin: 0 auto;
  min-height: 734px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.features-list {
  position: relative;
  z-index: 2;
  width: min(1098px, 100%);
  font-family: var(--second-family);
  font-weight: 500;
  text-align: center;
  font-size: var(--text-h2-fz);
  line-height: 100%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}
.feature-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
  white-space: nowrap;
}
.feature-line small {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 144%;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
}
.feature-line > span:not(.feature-headline) {
  display: inline-block;
}
.feature-headline-line--mobile {
  display: none;
}
.feature-headline-line--wide {
  display: inline;
}
.feature-line-1 {
  transform: translateX(-22px);
}
.feature-line-2 {
  transform: translateX(110px);
}
.feature-line-3 {
  font-size: inherit;
  transform: translateX(90px);
}
.feature-line-4 {
  transform: translateX(-80px);
}
.feature-line-5 {
  font-size: inherit;
  transform: translateX(-150px);
}
.feature-line-6 {
  transform: translateX(140px);
}
.features-building {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  height: 1318px;
  opacity: 0.68;
  transform: translate(-50%, calc(-50% - 108px));
  pointer-events: none;
}
.features-building img {
  width: auto;
  height: 100%;
  object-fit: contain;
  filter: brightness(1.32) saturate(1.18)
    drop-shadow(0 0 48px rgba(120, 24, 223, 0.72))
    drop-shadow(0 0 72px rgba(212, 168, 42, 0.34));
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 10%,
    #000 86%,
    transparent 100%
  );
}
.rules {
  position: relative;
  z-index: 3;
  margin-top: calc(-270px + 85px);
  padding: 0 15px 56px;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
  pointer-events: auto;
}
/* выше features/upcoming: иначе negative margin/transform upcoming перехватывает клики по плееру */
.story-games-wrap > .rules {
  z-index: 5;
  margin-top: -455px;
}
.story-games-wrap > .upcoming {
  z-index: 2;
}
.rules-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}
.rules-title {
  margin: 0;
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 56px;
  line-height: 100%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}
.rules-title-line {
  display: block;
}
.rules-title-line--gold {
  color: var(--gold);
}
.rules-lead {
  margin: 28px 0 0;
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 20px;
  line-height: 120%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}
.rules-lead-line {
  display: inline;
}
.rules-lead-line--tablet {
  display: none;
}
.rules-text {
  margin: 20px 0 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 157%;
  color: var(--white-op-800);
}
.rules-media {
  position: relative;
  z-index: 5;
  width: 358px;
  height: 203px;
  max-width: 100%;
  margin-top: 36px;
  overflow: hidden;
  border-radius: 16px;
  background: #0d0618;
  pointer-events: auto;
  box-shadow:
    0 0 48px 12px rgba(164, 73, 245, 0.55),
    0 0 90px 28px rgba(164, 73, 245, 0.28);
}
.rules-video-facade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: #0d0618;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rules-video-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.rules-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  border: 2px solid var(--gold-bright);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(20, 20, 20, 0.35);
  pointer-events: none;
}
.rules-video-play::before {
  content: '';
  position: absolute;
  left: 52%;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--white);
  transform: translate(-40%, -50%);
}
.rules-video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* fixed-портал: iframe вне transform-предков — иначе touch в YouTube не работает */
.rules-video-portal {
  position: fixed;
  z-index: 50;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #0d0618;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 0 48px 12px rgba(164, 73, 245, 0.55),
    0 0 90px 28px rgba(164, 73, 245, 0.28);
}
.rules-video-portal .rules-video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: auto;
  touch-action: manipulation;
}
.rules-media.is-video-portal-host {
  pointer-events: none;
  box-shadow: none;
  background: transparent;
}
@media (min-width: 601px) {
  .rules {
    margin-top: calc(-270px + 85px);
    padding: 0 60px 72px;
  }
  .rules-inner {
    max-width: 720px;
  }
  .rules-media {
    width: 358px;
    height: 203px;
    border-radius: 16px;
  }
}
.rules + .upcoming {
  margin-top: 40px;
}
.upcoming {
  position: relative;
  z-index: 2;
  margin-top: -270px;
  padding: 0 120px;
  background: 0 0;
}
.upcoming .section-title {
  margin-bottom: 36px;
  font-size: var(--text-h1-fz);
  line-height: 103%;
}
.upcoming-subtitle {
  margin: 0 auto 72px;
  width: var(--container);
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--text-title-m-fz);
  font-weight: 500;
  line-height: 34px;
  color: var(--white);
}
.upcoming-grid {
  width: min(1200px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 72px 88px;
  border-top: none;
}
.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 0 12px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  border-right: none;
}
.game-card:nth-child(2n) {
  border-right: none;
}
.game-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 45px;
}
.game-date,
.game-date-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--game-date-line-gap);
}
.game-date {
  font-family: var(--font-display);
  line-height: 0.9;
}
.game-weekday {
  margin-bottom: 0;
  font-family: var(--font-ui);
  font-size: var(--text-title-s-fz);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.8);
  text-transform: none;
}
.game-date-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.game-day,
.game-month {
  font-size: var(--text-h2-fz);
  font-weight: 500;
  line-height: 100%;
  letter-spacing: var(--text-headline-ls);
}
.game-month {
  color: var(--white);
}
.game-meta {
  margin: -10px 0 0;
  min-height: 0;
  font-family: var(--font-ui);
  font-size: var(--text-title-s-fz);
  font-weight: 500;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.8);
}
.game-meta-line {
  display: block;
}
.game-meta-line--narrow {
  display: none;
}
.game-times {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  margin-top: auto;
}
.game-slot:last-child {
  text-align: right;
}
.game-slot:last-child strong {
  text-align: left;
}
.game-slot p {
  margin: 0 0 4px;
  font-family: var(--font-ui);
  font-size: var(--text-title-s-fz);
  font-weight: 500;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.8);
}
.game-slot strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h3-fz);
  font-weight: 400;
  line-height: 42px;
  letter-spacing: var(--text-headline-ls);
  color: var(--white);
}
.game-card .btn-sm {
  position: relative;
  z-index: 0;
  min-width: 140px;
  height: 40px;
  padding: 0;
  border-radius: 0;
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 18px;
  line-height: 133%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: 0 0;
  box-shadow: none;
}
.game-card .btn-sm:active,
.game-card .btn-sm:focus,
.game-card .btn-sm:focus-visible {
  min-width: 140px;
  width: auto;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  border-color: var(--white);
  white-space: nowrap;
  transform: none;
}
.game-card .btn-sm::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 40px;
  border-radius: 22px;
  background: rgba(164, 73, 245, 0.82);
  filter: blur(22px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.audience {
  position: relative;
  margin-top: 0;
  padding: 60px 60px 0;
  overflow: visible;
  min-height: var(--audience-height);
  background: var(--bg);
  --audience-title-fz: var(--text-h1-fz);
  --audience-subtitle-fz: var(--text-title-m-fz);
  --audience-subtitle-lh: 1.42;
  --audience-item-fz: var(--text-body-fz);
  --audience-item-lh: 28px;
  --audience-item-max-w: calc(var(--audience-item-fz) * 12.444);
}
.audience-spot {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}
.audience-spot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  opacity: 1;
}
.audience-spot-yellow {
  top: -380px;
  left: 0;
  width: min(771px, 54vw);
  transform: translateX(-22%);
}
.audience-spot-purple {
  right: 0;
  bottom: -400px;
  width: min(801px, 56vw);
  transform: translateX(22%);
}
.audience::after,
.audience::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 190px;
  pointer-events: none;
  z-index: 0;
}
.audience::after {
  inset: auto 0 0;
  height: 280px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(20, 20, 20, 0.18) 36%,
    rgba(20, 20, 20, 0.62) 68%,
    var(--bg) 100%
  );
}
.audience-inner {
  z-index: 2;
  width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 578px 1fr;
  gap: 46px;
  align-items: start;
}
.audience-inner,
.audience-visual {
  position: relative;
  min-height: var(--audience-inner-min-height);
}
.audience-photo {
  position: absolute;
  left: 65px;
  bottom: 80px;
  width: 357px;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 28px 70px rgba(0, 0, 0, 0.62));
}
.audience-copy {
  position: relative;
  z-index: 3;
  padding-top: 200px;
  display: block;
}
.audience-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.audience-title-line {
  display: block;
  white-space: nowrap;
}
.audience-title-line--mobile {
  display: none;
}
.audience-copy .section-title {
  margin: 0;
  font-size: var(--audience-title-fz);
  white-space: normal;
}
.audience-list {
  margin-top: 72px;
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 80px;
  row-gap: 46px;
  max-width: none;
  width: max-content;
}
.audience-item {
  position: relative;
  max-width: none;
  padding-bottom: 14px;
  font-family: var(--font-family);
  font-size: var(--audience-item-fz);
  font-weight: 400;
  line-height: var(--audience-item-lh);
  color: rgba(255, 255, 255, 0.8);
}
.audience-item-line {
  display: block;
  white-space: nowrap;
}
.audience-item-line--narrow {
  display: none;
}
.audience-item-line--tablet {
  display: none;
}
.audience-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 2px;
  background: var(--white);
}
.audience-item:nth-child(1)::after {
  background: var(--white);
}
.audience-item:nth-child(2)::after {
  background: var(--accent-beige);
}
.audience-item:nth-child(3)::after {
  background: var(--accent-yellow);
}
.audience-item:nth-child(4)::after {
  background: var(--accent-violet);
}
.audience-item:nth-child(5)::after {
  background: var(--accent-beige);
}
.audience-item:nth-child(6)::after {
  background: var(--white);
}
.audience-cta {
  margin-top: 48px;
  display: inline-flex;
}
/* App control: mobile-only (≤600). Desktop styles TBD. */
.app-control {
  display: none;
}
@media (max-width: 600px) {
  .app-control {
    display: block;
    position: relative;
    z-index: 7;
    padding: 48px 0 56px;
    overflow: visible;
    /* прозрачный верх — audience-spot-purple просвечивает и заходит на секцию */
    background: linear-gradient(
      180deg,
      transparent 0,
      transparent 120px,
      rgba(20, 20, 20, 0.55) 180px,
      var(--bg) 240px,
      var(--bg) 100%
    );
    transform: none;
    margin-top: 0;
  }
  .app-control-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding-inline: 15px;
    box-sizing: border-box;
  }
  .app-control-title {
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 56px;
    line-height: 100%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
  }
  .app-control-title-line {
    display: block;
  }
  .app-control-title-line--tablet,
  .app-control-title-white {
    display: none;
  }
  .app-control-title-line--default.app-control-title-line--white {
    display: block;
    color: var(--white);
  }
  .app-control-title-accent {
    color: var(--accent-yellow);
  }
  .app-control-title-with-dash {
    white-space: nowrap;
  }
  .app-control-title-dash {
    color: var(--white);
  }
  .app-control-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 28px;
    margin-top: 35px;
  }
  .app-control-tab {
    appearance: none;
    margin: 0;
    padding: 0 0 6px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: 0 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .app-control-tab.is-active {
    color: var(--accent-violet);
    border-bottom-color: var(--accent-violet);
  }
  .app-control-panel {
    margin-top: 20px;
    overflow: visible;
  }
  .app-control-panel[hidden] {
    display: none;
  }
  .app-control-text {
    width: 100%;
    max-width: 430px;
    margin: 0px auto;
    margin-top: 25px;
    padding-inline: 15px;
    box-sizing: border-box;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: var(--white-op-800);
  }
  .app-control-carousel-shell {
    position: relative;
    z-index: 0;
    width: 100%;

    overflow: visible;
    isolation: isolate;
  }
  /* отдельное жёлтое свечение за каруселью */
  .app-control-carousel-shell::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -30px;
    bottom: -120px;
    width: min(140%, 520px);
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
      ellipse 78% 62% at 50% 42%,
      rgba(242, 182, 38, 0.48) 0%,
      rgba(242, 182, 38, 0.26) 36%,
      rgba(242, 182, 38, 0.1) 58%,
      rgba(242, 182, 38, 0.03) 76%,
      transparent 100%
    );
  }
  .app-control-carousel {
    --app-frame-w: 325px;
    --app-frame-h: 226px;
    --app-peek: 25px;
    --app-crop-scale: 1.72;
    --app-slide-gap: 8px;
    --app-glow-pad: 36px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--app-slide-gap);
    width: 100%;
    box-sizing: content-box;
    height: var(--app-frame-h);
    margin: 0;
    padding: var(--app-glow-pad) 0;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc((100% - var(--app-frame-w)) / 2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .app-control-carousel::-webkit-scrollbar {
    display: none;
  }
  .app-control-gallery {
    --app-frame-w: 106px;
    --app-frame-h: 230px;
    --app-crop-scale: 1.95;
    --app-slide-gap: 8px;
    --app-glow-pad: 36px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-slide-gap);
    width: 100%;
    box-sizing: content-box;
    height: var(--app-frame-h);
    margin: 0;
    padding: var(--app-glow-pad) 0;
    overflow: visible;
  }
  .app-control-slide {
    position: relative;
    flex: 0 0 var(--app-frame-w);
    width: var(--app-frame-w);
    height: var(--app-frame-h);
    margin: 0;
    scroll-snap-align: center;
    border-radius: 18px;
    overflow: hidden;
    z-index: 3;
    background: #0d0618;
  }
  .app-control-gallery .app-control-slide {
    border-radius: 12px;
    scroll-snap-align: none;
  }
  .app-control-slide::before {
    display: none;
  }
  .app-control-slide--violet,
  .app-control-slide--yellow,
  .app-control-slide--beige {
    filter: none;
  }
  /* небольшое мягкое свечение вокруг каждого кадра */
  .app-control-slide--violet {
    box-shadow:
      0 0 12px rgba(164, 73, 245, 0.45),
      0 0 28px rgba(164, 73, 245, 0.22);
  }
  .app-control-slide--yellow {
    box-shadow:
      0 0 12px rgba(242, 182, 38, 0.42),
      0 0 28px rgba(242, 182, 38, 0.2);
  }
  .app-control-slide--beige {
    box-shadow:
      0 0 12px rgba(227, 204, 182, 0.4),
      0 0 28px rgba(227, 204, 182, 0.18);
  }
  .app-control-slide img {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center;
    /*transform: scale(var(--app-crop-scale));*/
    transform-origin: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
}
.private {
  position: relative;
  overflow: visible;
  margin-top: 630px;
  padding: 50px 120px 120px;
  text-align: center;
  isolation: isolate;
}
.private::before,
.private::after {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
/* жёлтое свечение на всю секцию */
.private::after {
  content: '';
  inset: -80px -10% -120px;
  background:
    radial-gradient(
      ellipse 70% 55% at 70% 35%,
      rgba(242, 182, 38, 0.28) 0%,
      rgba(242, 182, 38, 0.12) 38%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 60% 50% at 25% 70%,
      rgba(242, 182, 38, 0.18) 0%,
      rgba(242, 182, 38, 0.06) 42%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 80% 45% at 50% 90%,
      rgba(242, 182, 38, 0.14) 0%,
      transparent 65%
    );
}
.private::before {
  content: '';
  left: 50%;
  right: auto;
  top: -279px;
  bottom: -220px;
  width: 1231px;
  height: auto;
  transform: translateX(-50%);
  background: url(../images/corporates.webp) center top / 1231px auto no-repeat;
  opacity: 0.96;
  filter: brightness(1.52) saturate(1.14);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 78%,
    rgba(0, 0, 0, 0.88) 90%,
    rgba(0, 0, 0, 0.62) 97%,
    rgba(0, 0, 0, 0.38) 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 78%,
    rgba(0, 0, 0, 0.88) 90%,
    rgba(0, 0, 0, 0.62) 97%,
    rgba(0, 0, 0, 0.38) 100%
  );
}
.private-title {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(1020px, 100%);
  max-width: 100%;
  margin: 0 auto 36px;
  font-family: var(--second-family);
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 78px);
  line-height: 103%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.private-title-block {
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: 100%;
}
.private-title-block--left {
  align-self: flex-start;
  align-items: flex-start;
  text-align: left;
  color: var(--accent-yellow);
}
.private-title-block--right {
  align-self: flex-end;
  align-items: flex-end;
  text-align: right;
  margin-top: 45px;
  color: var(--white);
}
.private-title-line {
  display: block;
  white-space: nowrap;
}
.private-title-line--mobile {
  display: none;
}
.private-title-line--yellow {
  color: var(--accent-yellow);
}
.private-title-line--white {
  color: var(--white);
}
.private-title-dash {
  display: inline-block;
  font-size: 0.62em;
  line-height: 1;
  vertical-align: 0.12em;
  font-weight: 500;
}
@media (max-width: 600px) {
  .private-title-dash {
    transform: translateY(-10px);
  }
  .private-title {
    isolation: isolate;
  }
  /* лёгкое жёлтое свечение за заголовком (тише, чем за каруселью) */
  .private-title::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -24px;
    bottom: -36px;
    width: min(120%, 420px);
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
      ellipse 72% 58% at 50% 48%,
      rgba(242, 182, 38, 0.26) 0%,
      rgba(242, 182, 38, 0.12) 42%,
      rgba(242, 182, 38, 0.04) 68%,
      transparent 44%
    );
  }
  .private-title-block {
    position: relative;
    z-index: 1;
  }
}
@media (max-width: 900px) {
  .private-title {
    margin-bottom: 24px;
    font-size: clamp(28px, 7vw, 48px);
  }
  .private-title-block--left,
  .private-title-block--right {
    width: 100%;
    max-width: 100%;
  }
  .private-title-block--right {
    align-self: flex-start;
    align-items: flex-start;
    text-align: left;
    margin-top: 16px;
  }
  .private-title-line {
    white-space: normal;
  }
}
.private-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1020px, 100%);
  margin: 0 auto 64px;
  overflow: hidden;
  border-radius: 8px;
}
.private-cards .private-card:first-child {
  border-radius: 8px 0 0 8px;
}
.private-cards .private-card:last-child {
  border-radius: 0 8px 8px 0;
}
.private-card {
  --private-icon-width: 150px;
  width: 100%;
  min-width: 0;
  min-height: 278px;
  padding: 62px max(20px, calc((100% - var(--private-icon-width)) / 2));
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  text-align: center;
  box-sizing: border-box;
}
.faq-item summary {
  font-family: var(--font-ui);
  font-weight: 500;
}
.private-card h3 {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 18px;
  line-height: 144%;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--black);
  white-space: normal;
}
.private-icon {
  width: 150px;
  height: 120px;
  min-width: 150px;
  min-height: 120px;
  flex-shrink: 0;
  object-fit: contain;
}
.private-card-beige {
  background: #dcc9a8;
  color: var(--black);
}
.private-card-yellow {
  background: #e8b830;
  color: var(--black);
}
.private-card-purple {
  background: #9b4dff;
  color: var(--black);
}
.private > .btn,
.private-cta {
  box-shadow: var(--purple-glow-strong);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 18px;
  line-height: 133%;
}
.spot-fifth-wrap {
  --spot-fifth-yellow-brightness: 0.98;
  --spot-fifth-yellow-saturate: 1.05;
  --spot-fifth-purple-brightness: 0.86;
  --spot-fifth-purple-saturate: 1.22;
  --spot-fifth-bg-offset: -100px;
  --spot-fifth-section-gap: 160px;
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.spot-fifth-wrap::after,
.spot-fifth-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: var(--spot-fifth-bg-offset);
  bottom: 0;
  width: min(2048px, 142vw);
  transform: translateX(-50%);
  background: url(../images/fifth_spot_yellow_purple.png) center/100%
    100%no-repeat;
  filter: brightness(var(--spot-fifth-yellow-brightness))
    saturate(var(--spot-fifth-yellow-saturate));
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0, 0, 0, 0.45) 6%,
    rgba(0, 0, 0, 0.88) 14%,
    #000 22%,
    #000 90%,
    rgba(0, 0, 0, 0.65) 97%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0, 0, 0, 0.45) 6%,
    rgba(0, 0, 0, 0.88) 14%,
    #000 22%,
    #000 90%,
    rgba(0, 0, 0, 0.65) 97%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}
.spot-fifth-wrap::after {
  filter: brightness(var(--spot-fifth-purple-brightness))
    saturate(var(--spot-fifth-purple-saturate));
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    transparent 18%,
    rgba(0, 0, 0, 0.35) 32%,
    rgba(0, 0, 0, 0.78) 48%,
    #000 62%,
    #000 94%,
    rgba(0, 0, 0, 0.55) 99%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    transparent 18%,
    rgba(0, 0, 0, 0.35) 32%,
    rgba(0, 0, 0, 0.78) 48%,
    #000 62%,
    #000 94%,
    rgba(0, 0, 0, 0.55) 99%,
    transparent 100%
  );
}
.private > .btn,
.spot-fifth-wrap > .cta-final,
.spot-fifth-wrap > .faq,
.spot-fifth-wrap > .franchise,
.spot-fifth-wrap > .club-contacts,
.spot-fifth-wrap > .gallery-2 {
  position: relative;
  z-index: 1;
}
.spot-fifth-wrap > .gallery-2 {
  z-index: 2;
}
/* Franchise: mobile-only (≤600). Desktop styles TBD. */
.franchise {
  display: none;
}
@media (max-width: 600px) {
  .franchise {
    display: block;
    position: relative;
    z-index: 3;
    /* gallery-2 canvas stays 661px in layout but is scaled down — pull up to visual bottom */
    --franchise-gallery-scale: calc(1.15 / 1.1 / 2.5);
    margin: calc(
        -1 * var(--gallery-2-canvas-height) *
          (1 - var(--franchise-gallery-scale)) + 110px + 50px
      )
      0 0;
    padding: 0 15px 106px 0;
    overflow: visible;
    background: transparent;
    transform: translateY(-280px);
  }
  .franchise-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding-inline: 0;
    box-sizing: border-box;
    transform: translateY(-128px);
  }
  .franchise-media {
    position: absolute;
    left: 0;
    top: -280px;
    width: 309px;
    height: 741px;
    pointer-events: none;
    z-index: 0;
  }
  .franchise-media picture {
    display: block;
    width: 309px;
    height: 741px;
  }
  .franchise-mask {
    display: block;
    width: 309px;
    height: 741px;
    max-width: none;
    object-fit: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .franchise-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
    padding: 0;
    text-align: left;
  }
  .franchise-title {
    margin: 0;
    width: auto;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 56px;
    line-height: 100%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: left;
    color: var(--white);
  }
  .franchise-title-accent {
    display: block;
    color: var(--accent-yellow);
  }
  .franchise-title-rest {
    display: block;
    color: var(--white);
  }
  .franchise-text {
    margin: 30px 0 0;
    width: auto;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 144%;
    text-align: left;
    color: var(--white);
  }
  .franchise-text--tablet {
    display: none;
  }
  .franchise-text--desktop {
    display: none;
  }
  .franchise-text--md {
    display: none;
  }
  .franchise-text--mobile {
    display: inline;
  }
  .franchise-cta {
    align-self: flex-start;
    margin-top: 40px;
    margin-left: 0;
    margin-right: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
    padding: 14px 28px;
  }
  .franchise-cta.btn.btn-purple {
    margin-top: 40px;
    width: 100%;
  }
  .faq {
    margin-top: 0;
    padding-top: 0;
    transform: translateY(-250px);
  }
}
/* Club contacts: ≤768. Desktop styles TBD. */
.club-contacts {
  display: none;
}
@media (max-width: 600px) {
  .club-contacts {
    display: block;
    position: relative;
    z-index: 1;
    margin: 105px 0 0;
    padding: 0 15px;
    overflow: visible;
    background: transparent;
    transform: translateY(-480px);
  }
  .club-contacts-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .club-contacts-title {
    margin: 0 0 36px;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 56px;
    line-height: 100%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
  }
  .club-contacts-title-line {
    display: block;
  }
  .club-contacts-title-line--gold {
    color: var(--accent-yellow);
  }
  .club-contacts-title-line--tablet {
    display: none;
  }
  .club-contacts-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 28px;
  }
  .club-contacts-item {
    min-width: 0;
  }
  .club-contacts-city {
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
  }
  .club-contacts-phone {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: var(--white-op-800);
    text-decoration: none;
  }
  .club-contacts-socials {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
  }
  .club-contacts-social {
    display: flex;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  .club-contacts-social img {
    display: block;
    width: 22px;
    height: 22px;
  }
  .club-contacts-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 35px;
  }
  .club-contacts-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--purple);
    box-shadow: var(--purple-glow);
    cursor: pointer;
    color: var(--white);
  }
  .club-contacts-nav-btn:disabled,
  .club-contacts-nav-btn[aria-disabled='true'] {
    opacity: 0.45;
    cursor: default;
  }
  .club-contacts-nav-btn[hidden] {
    display: none;
  }
  .club-contacts-nav[hidden] {
    display: none;
  }
  .club-contacts-nav-btn img {
    display: block;
    width: 12px;
    height: 22px;
  }
  .club-contacts-error {
    grid-column: 1 / -1;
    margin: 0;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--white-op-800);
  }
  .cta-final {
    margin-top: 105px;
  }
}
.faq {
  margin-top: 0;
  padding-top: var(--spot-fifth-section-gap);
  padding-bottom: 0;
  padding-inline: 360px;
}
.faq-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 120px);
  align-items: start;
}
.faq-heading {
  margin: 0;
  padding-top: 50px;
  width: max-content;
  max-width: 100%;
  font-family: var(--second-family);
  font-size: var(--text-h1-fz);
  font-weight: 500;
  line-height: 103%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}
.faq-list {
  width: 100%;
  max-width: 692px;
  justify-self: end;
}
.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 45px 0;
  font-size: var(--text-title-m-fz);
  line-height: 34px;
  cursor: pointer;
  list-style: none;
}
.faq-item[open] summary {
  padding-bottom: 12px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-toggle {
  flex-shrink: 0;
  width: 48px;
  height: 44px;
  border-radius: 8px;
  background: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--purple-glow-strong);
  position: relative;
  overflow: hidden;
}
.faq-toggle::after,
.faq-toggle::before {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
.faq-toggle::before {
  inset: -12px;
  border-radius: 16px;
  background:
    radial-gradient(
      ellipse 40px 28px at 12px 12px,
      rgba(255, 255, 255, 0.34),
      transparent 68%
    ),
    radial-gradient(
      ellipse 40px 28px at calc(100% - 12px) 12px,
      rgba(255, 255, 255, 0.34),
      transparent 68%
    ),
    radial-gradient(
      ellipse 40px 28px at 12px calc(100% - 12px),
      rgba(255, 255, 255, 0.24),
      transparent 68%
    ),
    radial-gradient(
      ellipse 40px 28px at calc(100% - 12px) calc(100% - 12px),
      rgba(255, 255, 255, 0.24),
      transparent 68%
    );
  filter: blur(5px);
  transition: opacity 0.35s ease;
}
.faq-toggle::after {
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(245, 245, 245, 0.3);
  transition: opacity 0.15s ease;
}
.faq-item summary:hover .faq-toggle::before {
  opacity: 1;
}
.faq-item summary:active .faq-toggle::after,
.faq-item summary:focus-visible:not(:hover) .faq-toggle::after {
  opacity: 1;
}
.faq-item summary:active .faq-toggle::before,
.faq-item summary:focus-visible:not(:hover) .faq-toggle::before {
  opacity: 0;
}
.faq-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 14px;
  height: auto;
}
.faq-icon-minus,
.faq-item[open] .faq-icon-plus {
  display: none;
}
.faq-item[open] .faq-icon-minus {
  display: block;
}
.faq-item p {
  margin: 0 0 50px;
  padding-right: 68px;
  font-family: var(--font-ui);
  font-size: var(--text-body-fz);
  font-weight: 400;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.8);
}
.cta-final {
  position: relative;
  margin-top: calc(var(--spot-fifth-section-gap) + 200px);
  padding: 0 60px;
  overflow: visible;
  text-align: center;
}
.cta-inner,
.cta-title {
  position: relative;
  z-index: 2;
}
.cta-inner {
  width: var(--container);
  margin: 0 auto;
}
.cta-title {
  margin-top: -150px;
  line-height: 103%;
}
.cta-title-stack {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}
.cta-title-line {
  display: block;
}
.cta-title-line--second {
  text-align: center;
}
.cta-title-line--narrow {
  display: none;
}
.cta-inner .section-title {
  margin-bottom: 36px;
}
.cta-subtitle {
  position: relative;
  z-index: 2;
  margin: 0 0 64px;
  font-family: var(--font-ui);
  font-size: var(--text-title-m-fz);
  font-weight: 500;
  line-height: 34px;
  color: rgba(245, 245, 245, 0.82);
}
.cta-subtitle-line {
  display: block;
}
.cta-subtitle-line--narrow {
  display: none;
}
.cta-inner .btn {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}
.cta-raccoon {
  position: relative;
  z-index: 3;
  max-width: 438px;
  --cta-raccoon-shift-x: 67px;
  --cta-raccoon-shift-y: 0;
  margin: 145px auto 0;
  margin-bottom: var(--cta-raccoon-shift-y);
  line-height: 0;
  transform: translateX(var(--cta-raccoon-shift-x))
    translateY(var(--cta-raccoon-shift-y));
}
.cta-raccoon-img {
  display: block;
  width: 100%;
  max-height: 447px;
  margin-top: -36px;
  margin-bottom: 0;
  object-fit: contain;
  object-position: center top;
}
.footer-divider,
.site-footer {
  position: relative;
  margin-top: 0;
}
.site-footer {
  --footer-spot-brightness: 0.98;
  --footer-spot-saturate: 0.88;
  --footer-spot-opacity: 0.85;
  --footer-divider-gap: 70px;
  --footer-nav-gap: 50px;
  padding: 0 60px 20px;
  overflow: visible;
}
.site-footer::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(2048px, 142vw);
  height: min(520px, 42vw);
  transform: translateX(-50%);
  background: url(../images/sixth_spot_purple.png) center bottom/100%
    100%no-repeat;
  opacity: var(--footer-spot-opacity);
  filter: brightness(var(--footer-spot-brightness))
    saturate(var(--footer-spot-saturate));
  pointer-events: none;
  z-index: 0;
}
.footer-divider {
  z-index: 1;
  height: 2px;
  margin-bottom: var(--footer-divider-gap);
  background: var(--purple);
  box-shadow: none;
}
.footer-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
}
.footer-logo {
  justify-self: center;
  line-height: 0;
}
.footer-logo-img {
  width: 240px;
  height: auto;
  object-fit: contain;
}
.footer-nav,
.footer-social {
  display: flex;
  justify-content: center;
}
.footer-social {
  align-items: center;
  margin-top: 10px;
  gap: 10px;
}
.footer-social a,
.footer-social img {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.footer-social img {
  display: block;
  object-fit: contain;
  transition: filter 0.4s ease;
}
.footer-nav {
  gap: 36px;
  margin-top: var(--footer-nav-gap);
}
.footer-nav a {
  padding: 0 4px;
  font-family: var(--font-ui);
  font-size: var(--text-menu-fz);
  font-weight: 500;
  line-height: 24px;
  letter-spacing: var(--text-action-ls);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
@media (min-width: 1441px) {
  :root {
    --experience-inline: 0;
    --fx-scale: 1;
  }
  .site-header {
    padding-block: 40px;
    margin-bottom: 120px;
  }
  .hero {
    padding-inline: 120px;
  }
  .hero-inner {
    max-width: none;
    width: 100%;
  }
  .experience {
    padding-inline: 0;
    min-height: 850px;
  }
  .experience-inner {
    max-width: none;
    width: 100%;
    min-height: 850px;
    transform: translateY(-25px);
  }
  .experience-title {
    left: 363px;
    top: 283px;
  }
  .experience-visual {
    top: 200px;
    width: 600px;
    height: 650px;
  }
  .experience-copy {
    left: 1091px;
    right: auto;
    top: 580px;
    width: 472px;
    max-width: none;
  }
  .experience-points {
    position: absolute;
    left: 363px;
    right: auto;
    bottom: 42px;
    width: 1199px;
    max-width: none;
    margin: 0;
    grid-template-columns: repeat(4, max-content);
    justify-content: start;
    gap: 96px;
  }
  .experience-points li:nth-child(n + 2) {
    margin-left: 26px;
  }
  .story-games-wrap {
    margin-top: calc(var(--story-overlap) - 100px);
  }
  .watermark-experience {
    left: 50%;
    top: 129px;
    width: min(1614px, calc(100% - 306px));
    transform: translateX(-50%) translateY(-60px);
  }
  .audience-inner > .watermark-guess,
  .watermark-guess {
    left: 50%;
    right: auto;
    top: 129px;
    width: min(1614px, calc(100% - 306px));
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    pointer-events: none;
    transform: translateX(-50%) translateY(calc(-60px - 80px));
  }
  .audience-inner > .watermark-guess picture {
    display: block;
    width: 100%;
  }
  .audience-inner > .watermark-guess-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .watermark-move {
    width: min(1614px, calc(100% - 306px));
  }
  .gallery-collage-shell {
    width: var(--gallery-1-canvas-width);
    height: var(--gallery-1-canvas-height);
  }
  .gallery-collage-shell-2 {
    width: var(--gallery-2-canvas-width);
    height: var(--gallery-2-canvas-height);
  }
  .features {
    padding-inline: 0;
    --fx-scale: 1;
  }
  .features-inner {
    max-width: none;
    width: 100%;
    min-height: 734px;
  }
  .features-list {
    position: absolute;
    left: 475px;
    top: -115px;
    width: 1020px;
    transform: none;
    line-height: 100%;
  }
  .feature-line-1 {
    transform: translateX(-22px);
  }
  .feature-line-2 {
    transform: translateX(85px);
  }
  .feature-line-3 {
    transform: translateX(90px);
  }
  .feature-line-4 {
    transform: translateX(-80px);
  }
  .feature-line-5 {
    transform: translateX(-150px);
  }
  .feature-line-6 {
    transform: translateX(170px);
  }
  .features-building {
    height: 1098px;
    transform: translate(-50%, calc(-50% - 251px));
  }
  .upcoming {
    padding-inline: 360px;
    transform: translateY(-40px);
  }
  .upcoming-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(2, 556px);
    justify-content: space-between;
    gap: 92px 72px;
  }
  .game-card:nth-child(3) .game-card-head,
  .game-card:nth-child(4) .game-card-head {
    margin-bottom: 15px;
  }
  .game-card:nth-child(3) .game-card-head .btn.btn-purple.btn-sm,
  .game-card:nth-child(4) .game-card-head .btn.btn-purple.btn-sm {
    margin-top: -20px;
  }
  .audience {
    padding-inline: 0;
    min-height: var(--audience-height);
  }
  .audience-spot-yellow {
    top: -440px;
    left: 0;
    width: 771px;
    transform: translateX(-18%);
  }
  .audience-spot-purple {
    right: 0;
    bottom: -460px;
    width: 801px;
    transform: translateX(18%);
  }
  .audience-inner {
    max-width: none;
    width: 100%;
    display: block;
    position: relative;
    min-height: var(--audience-height);
  }
  .audience-visual {
    position: static;
    min-height: 0;
  }
  .audience-photo {
    left: 425px;
    top: auto;
    bottom: 210px;
    width: 357px;
    transform: scale(1.1);
    transform-origin: left bottom;
  }
  .audience-copy {
    position: static;
    padding-top: 0;
  }
  .audience-copy .section-title {
    position: absolute;
    left: 670px;
    top: 150px;
    white-space: normal;
  }
  .audience-list {
    position: absolute;
    left: 960px;
    top: 375px;
    width: max-content;
    max-width: none;
    margin-top: 0;
    column-gap: 80px;
  }
  .audience-cta {
    position: absolute;
    left: 960px;
    top: 640px;
  }
  .private {
    padding: 50px 360px 120px;
    margin-top: 410px;
  }
  .private::before {
    width: 1231px;
    left: 50%;
    right: auto;
    top: -165px;
    bottom: -280px;
    height: auto;
    transform: translateX(-50%);
    background-size: 1231px auto;
  }
  .private-cards {
    transform: translateY(-10px);
  }
  .private .btn-purple {
    margin-top: -20px;
  }
  .spot-fifth-wrap {
    margin-top: -40px;
  }
  .faq {
    margin-top: 0;
    padding: var(--spot-fifth-section-gap) 360px 0;
  }
  .faq-inner {
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .cta-final {
    margin-top: calc(var(--spot-fifth-section-gap) + 200px + 0px);
  }
  .cta-final,
  .site-footer {
    padding-inline: 120px;
  }
  .footer-inner,
  .footer-nav {
    margin-top: 120px;
  }
}
@media (min-width: 1024px) and (max-width: 1440px) {
  .hero-title-line--narrow,
  .hero-title-line--wide {
    display: none;
  }
  .hero-title-line--medium {
    display: block;
    white-space: nowrap;
  }
}
@media (max-width: 1010px) {
  .hero-title-line--medium,
  .hero-title-line--narrow,
  .hero-title-line--wide {
    display: none;
  }
  .hero-title-line--compact {
    display: block;
    white-space: nowrap;
  }
}
@media (max-width: 1440px) {
  .header-social a:first-child {
    transform: translateX(-12px);
  }
  .footer-logo {
    margin-top: -28px;
  }
  .features-list {
    transform: translateY(-150px) translateX(25px);
  }
  .feature-line-2 {
    transform: translateX(90px);
  }
  .feature-line-3 {
    transform: translateX(70px);
  }
  .upcoming {
    margin-top: -120px;
  }
  .cta-raccoon {
    --cta-raccoon-shift-y: 70px;
  }
  .cta-inner .btn,
  .cta-subtitle,
  .cta-title {
    transform: translateY(40px);
  }
}
@media (max-width: 970px) {
  .experience-copy-line--wide {
    display: none;
  }
  .experience-copy-line--narrow {
    display: block;
    white-space: nowrap;
  }
}
@media (max-width: 1440px) {
  .audience-spot-yellow {
    transform: translate(0, -20%) scale(1.2);
  }
  .audience-spot-purple {
    transform: translate(0, -40%) scale(1.2);
  }
  .watermark-experience {
    margin-top: 28px;
  }
  .experience-copy,
  .experience-title {
    margin-top: -20px;
  }
  .experience-points {
    margin-top: -15px;
  }
  .gallery-1 {
    transform: translateY(-120px);
  }
  .features {
    transform: translateY(-270px);
  }
  .features-list {
    transform: translateY(-155px) translateX(25px);
  }
  .rules {
    transform: translateY(-310px);
  }
  .upcoming {
    transform: translateY(-310px);
  }
  .game-date {
    gap: 10px;
  }
  .game-meta {
    margin-top: 5px;
  }
  .game-card:nth-child(3) .game-meta,
  .game-card:nth-child(4) .game-meta {
    position: relative;
    top: -10px;
  }
  .game-card:nth-child(3) .game-times,
  .game-card:nth-child(4) .game-times {
    position: relative;
    top: -40px;
    margin-bottom: -40px;
  }
  .game-card:nth-child(3) .btn.btn-purple.btn-sm,
  .game-card:nth-child(4) .btn.btn-purple.btn-sm {
    position: relative;
    top: -18px;
  }
  .audience,
  .audience-inner {
    min-height: var(--audience-canvas-height);
  }
  .audience {
    --audience-canvas-height: clamp(433px, 56.39vw, 812px);
    padding-inline: 0;
    overflow-x: clip;
    overflow-y: visible;
  }
  .audience-inner {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    display: block;
    position: relative;
    text-align: left;
    overflow: visible;
    transform: translateY(-420px);
    --audience-list-left: clamp(
      calc(40% + 80px),
      calc(44vw + 80px),
      calc(52.43% + 100px)
    );
  }
  .audience-inner > .watermark-guess {
    left: 0;
    right: 0;
    top: 50%;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    transform: translateY(-50%);
    display: block;
    z-index: 0;
    overflow: visible;
  }
  .audience-inner > .watermark-guess picture,
  .audience-inner > .watermark-guess-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
  .audience-visual {
    position: static;
    min-height: 0;
    z-index: 1;
  }
  .audience-photo {
    position: absolute;
    left: 14.5%;
    bottom: calc(24.63% - 120px);
    width: 24.8%;
    max-width: 357px;
  }
  .audience-copy {
    position: static;
    padding-top: 0;
    display: block;
    z-index: 2;
  }
  .audience-title {
    align-items: flex-start;
  }
  .audience-copy .section-title {
    position: absolute;
    left: clamp(calc(22% + 85px), calc(24vw + 85px), calc(30% + 85px));
    top: calc(24.63% + 110px);
    white-space: normal;
  }
  .audience-list {
    position: absolute;
    left: calc(var(--audience-list-left) + 5px);
    top: calc(53.08% + 105px);
    width: max-content;
    max-width: none;
    margin-top: 0;
    text-align: left;
    column-gap: 80px;
  }
  .audience-cta {
    position: absolute;
    left: calc(var(--audience-list-left) + 5px);
    top: calc(53.08% + 400px);
  }
  .private {
    transform: translateY(-200px);
  }
  .gallery-2 {
    transform: translateY(-220px);
  }
  .faq {
    transform: translateY(-280px);
  }
  .cta-final {
    transform: translateY(-310px);
    padding-bottom: 0;
  }
  .cta-raccoon {
    margin-top: 120px;
    margin-bottom: 0;
  }
  .site-footer {
    margin-top: -240px;
    padding-bottom: 0;
    overflow-x: hidden;
    overflow-y: visible;
  }
  .footer-inner {
    margin-top: 150px;
  }
  .footer-logo {
    margin-top: -20px;
  }
  .footer-nav {
    margin-top: 90px;
  }
}
@media (max-width: 1440px) {
  :root {
    --gutter-standard: clamp(
      30px,
      calc(30px + (100vw - 1024px) * 0.0721153846),
      60px
    );
    --gutter-wide: clamp(
      30px,
      calc(30px + (100vw - 1024px) * 0.2163461538),
      120px
    );
    --gutter-faq: 120px;
    --experience-inline: clamp(
      30px,
      calc(30px + (100vw - 1024px) * 0.1923076923),
      110px
    );
    --container: min(1200px, calc(100% - 2 * var(--gutter-standard)));
  }
  .cta-final,
  .features,
  .hero,
  .site-footer,
  .site-header {
    padding-inline: var(--gutter-standard);
  }
  .private,
  .upcoming {
    padding-inline: var(--gutter-wide);
  }
  .faq {
    padding-inline: var(--gutter-faq);
    overflow-x: clip;
  }
  .faq-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 120px);
  }
  .faq-list {
    max-width: 692px;
    justify-self: end;
  }
  .faq-item p {
    padding-right: 0;
  }
  .experience {
    padding-inline: var(--experience-inline);
    overflow-x: clip;
  }
  .experience-copy {
    max-width: min(max-content, calc(100% - 60.66%));
  }
  .experience-points {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
    gap: clamp(12px, 2vw, 128px);
    box-sizing: border-box;
  }
  .experience-points li {
    white-space: nowrap;
  }
  .upcoming {
    overflow-x: clip;
  }
  .upcoming-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(38px, 5vw, 72px) clamp(28px, 5vw, 88px);
  }
  .game-card {
    min-width: 0;
  }
  .game-card-head {
    gap: clamp(12px, 2vw, 24px);
  }
  .game-date-block {
    min-width: 0;
  }
  .game-times {
    gap: clamp(12px, 2vw, 28px);
    min-width: 0;
  }
  .game-slot {
    min-width: 0;
  }
  .game-slot strong {
    font-size: var(--text-h3-fz);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 1024px) {
  :root {
    --gutter-faq: 55px;
  }
  .site-header {
    padding-left: 10px;
    padding-right: 20px;
    gap: 36px;
    padding-block: 28px;
  }
  .site-nav {
    gap: 18px;
    transform: translateX(5px);
  }
  .site-nav a {
    letter-spacing: var(--text-action-ls);
  }
  .hero-title {
    max-width: min(900px, 100%);
  }
  .hero-lead {
    max-width: 500px;
  }
  .experience-inner {
    min-height: auto;
    padding: 80px 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .experience-title {
    position: static;
    width: auto;
    max-width: 560px;
    display: block;
    text-align: center;
    margin: 0;
  }
  .experience-title-line {
    white-space: normal;
  }
  .experience-visual {
    position: static;
    transform: none;
    width: min(600px, 72vw);
    height: min(650px, 78vw);
  }
  .experience-photo {
    width: 100%;
    height: 100%;
  }
  .experience-copy {
    position: static;
    width: max-content;
    margin: 0;
    font-family: var(--font-ui);
    font-weight: 500;
    line-height: 142%;
    color: var(--white);
  }
  .experience-copy,
  .experience-copy p {
    max-width: none;
    text-align: center;
  }
  .experience-copy-line {
    margin-inline: auto;
  }
  .watermark-experience {
    top: 60px;
    width: 100vw;
  }
  .experience-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    transform: translateY(40px);
  }
  .gallery.gallery-1 {
    --gallery-top-space: clamp(88px, 9vw, 112px);
    --gallery-fade-boost: clamp(80px, 8.5vw, 108px);
    --story-gap: clamp(32px, 4vw, 44px);
    --gallery-photo-drop: 64px;
    --features-gallery-overlap: 160px;
  }
  .gallery-1 .gallery-collage-shell {
    transform: translateX(-50%) scale(calc(1 / 1.1));
    transform-origin: center top;
  }
  .gallery-1 {
    transform: translateY(-60px);
  }
  .features-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .features {
    margin-top: calc(-1 * var(--features-gallery-overlap) + 500px - 100px);
  }
  .features-building {
    margin: 0 auto;
    order: -1;
  }
  .features-list {
    transform: translateY(-140px) translateX(25px);
  }
  .feature-line {
    flex-wrap: wrap;
    white-space: normal;
    margin-bottom: -4px;
  }
  .feature-line-2 {
    transform: translateX(40px) translateY(-10px);
  }
  .feature-line-3 {
    transform: translateX(10px) translateY(-10px);
  }
  .feature-line-4 {
    transform: translateX(-100px) translateY(-15px);
  }
  .feature-line-5 {
    transform: translateX(-165px) translateY(-20px);
  }
  .feature-line-6 {
    transform: translateX(160px) translateY(-25px);
  }
  .upcoming {
    padding-inline: 30px;
    margin-top: -200px;
  }
  .upcoming-grid,
  .upcoming-subtitle {
    width: 100%;
    max-width: none;
    margin-top: -15px;
  }
  .upcoming-grid {
    gap: 60px 40px;
    margin-top: -10px;
  }
  .game-card:nth-child(1) .game-meta,
  .game-card:nth-child(2) .game-meta {
    margin-top: -15px;
  }
  .game-card:nth-child(3) .game-meta,
  .game-card:nth-child(4) .game-meta {
    margin-top: -5px;
  }
  .game-slot strong {
    margin-top: -5px;
  }
  .game-card:nth-child(1) .game-times {
    margin-top: -10px;
  }
  .game-card:nth-child(2) .game-times {
    margin-top: -40px;
  }
  .game-card:nth-child(1) .btn,
  .game-card:nth-child(2) .btn {
    margin-top: -10px;
    transform: translateX(10px);
  }
  .game-card:nth-child(3) .btn,
  .game-card:nth-child(4) .btn {
    margin-top: 10px;
    transform: translateX(15px);
  }
  .game-card:nth-child(3) .game-date-value,
  .game-card:nth-child(4) .game-date-value {
    margin-top: -5px;
  }
  .watermark-guess {
    transform: translateY(30px);
  }
  .audience-visual {
    margin-top: 50px;
  }
  .audience-title {
    transform: translateY(20px) translateX(-10px);
  }
  .private {
    margin-top: 615px;
    padding-inline: 60px;
  }
  .private-cards {
    margin-top: -32px;
    padding-top: 8px;
  }
  .private-card {
    padding-block: 15px;
  }
  .private-host-title {
    margin-top: -20px;
  }
  .private .btn {
    transform: translateY(-23px);
  }
  .gallery-2 {
    margin-top: -100px;
  }
  .faq {
    padding-inline: 55px;
    margin-top: 0;
  }
  .faq-item summary {
    padding: 35px 0;
    line-height: 28px;
  }
  .faq-item[open] summary {
    padding-bottom: 12px;
  }
  .faq-item p {
    margin-bottom: 35px;
  }
  .faq-inner {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: clamp(24px, 4vw, 80px);
  }
  .faq-list {
    margin-top: 15px;
    max-width: 692px;
    justify-self: end;
  }
  .faq-heading {
    text-align: left;
    padding-top: 50px;
  }
  .cta-subtitle {
    margin-top: -10px;
  }
  .cta-final .btn {
    margin-top: -40px;
  }
  .spot-fifth-wrap::after,
  .spot-fifth-wrap::before {
    width: min(1800px, 220vw);
  }
  .spot-fifth-wrap {
    --spot-fifth-bg-offset: -500px;
  }
  .story-games-wrap {
    --story-lift: 64px;
    --spot-bg-offset: clamp(128px, 12vw, 168px);
  }
  .private::before {
    top: -179px;
    left: 50%;
    right: auto;
    width: 1231px;
    transform: translateX(-50%);
    background-size: 1231px auto;
  }
  .gallery-2 .gallery-collage-shell-2 {
    transform: translateX(-50%) scale(calc(1.15 / 1.1 / 1.2));
    transform-origin: center top;
  }
  .gallery-collage-2 .g12 {
    z-index: 6;
  }
  .gallery-collage-2 .g13 {
    z-index: 5;
  }
  .cta-title {
    margin-top: 0;
  }
  .cta-inner .btn,
  .cta-subtitle,
  .cta-title {
    transform: translateY(40px);
  }
  .watermark-move {
    bottom: calc(clamp(72px, 8vw, 151px) - 65px + 160px - 120px);
  }
  .cta-raccoon {
    max-width: 329px;
    margin-top: calc(145px - 30px);
    --cta-raccoon-shift-x: 47px;
    --cta-raccoon-shift-y: 35px;
  }
  .cta-raccoon-img {
    width: 329px;
    height: 329px;
    max-height: none;
  }
  .cta-final {
    transform: none;
    margin-top: -470px;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .site-footer {
    margin-top: 30px;
    margin-bottom: 0;
    padding-bottom: 20px;
    overflow-x: hidden;
    overflow-y: visible;
    --footer-divider-gap: 24px;
  }
  .site-footer .footer-inner {
    margin-top: 70px;
    transform: none;
  }
  .site-footer .footer-divider,
  .site-footer .footer-logo {
    margin-top: 0;
  }
  .site-footer .footer-nav {
    margin-top: 60px;
  }
}
@media (max-width: 900px) {
  .features-inner,
  .features-list {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .features-inner {
    container-type: inline-size;
    margin-inline: 0;
    padding-inline: 0;
    transform: translateX(-20px);
    --fx-ref: 900;
    --fx-k: clamp(0.82, calc(0.82 + 0.18 * (100cqw - 600px) / 300px), 1);
    --fx-inset: calc((1 - var(--fx-k)) * 4%);
  }
  .features-list {
    transform: translateY(calc(-130 * 100cqw / var(--fx-ref)))
      translateX(calc(2.78% * var(--fx-k)));
  }
  .feature-line {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
  .feature-line-1,
  .feature-line-2 {
    justify-content: center;
    transform: translateX(calc(-2.44% * var(--fx-k)));
  }
  .feature-line-2 {
    transform: translateX(calc(11% * var(--fx-k) - 2 * var(--fx-inset)));
  }
  .feature-line-3 {
    justify-content: flex-start;
    transform: translateX(calc(2 * var(--fx-inset)));
  }
  .feature-line-6 {
    justify-content: flex-end;
    transform: translateX(calc(-2 * var(--fx-inset)));
  }
  .feature-line-4 {
    justify-content: center;
    transform: translateX(calc(-4% * var(--fx-k) + 2 * var(--fx-inset)));
  }
  .feature-line-5 {
    justify-content: flex-start;
    transform: translateX(calc(1.5 * var(--fx-inset)));
  }
}
@media (max-width: 830px) {
  .experience-point-line--wide {
    display: none;
  }
  .experience-point-line--narrow {
    display: block;
    white-space: nowrap;
  }
  .experience-points {
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
    gap: clamp(8px, 1.5vw, 20px);
  }
  .experience-points li {
    white-space: normal;
  }
}
@media (max-width: 835px) {
  .cta-title-line {
    white-space: nowrap;
  }
  .cta-title {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
  }
  .cta-title-stack {
    margin-inline: 0;
  }
}
@media (max-width: 700px) {
  .cta-title-line--wide {
    display: none;
  }
  .cta-title-line--narrow {
    display: block;
    white-space: normal;
  }
  .cta-title-line {
    white-space: normal;
  }
  .cta-title-stack {
    text-align: center;
  }
}
@media (max-width: 768px) {
  :root {
    --gutter-standard: 15px;
    --gutter-wide: 15px;
    --gutter-faq: 15px;
    --experience-inline: 15px;
    --container: min(1200px, calc(100% - 2 * var(--gutter-standard)));
  }
  .site-header {
    padding-block: 18px;
    padding-inline: 15px;
  }
  .faq {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-650px);
  }
  .cta-raccoon {
    margin-top: calc(clamp(100px, 14vw, 145px) - 30px);
    --cta-raccoon-shift-x: calc(43px + 0px);
    --cta-raccoon-shift-y: calc(115px - 50px);
  }
  .cta-raccoon-img {
    margin-top: -24px;
    margin-bottom: 0;
  }
  .watermark-move {
    bottom: calc(clamp(72px, 8vw, 151px) - 65px + 160px + 110px);
  }
  .site-footer {
    margin-bottom: 0;
    padding-bottom: 20px;
  }
  .spot-fifth-wrap::after,
  .spot-fifth-wrap::before {
    width: min(1600px, 280vw);
  }
  .spot-fifth-wrap {
    --spot-fifth-bg-offset: 350px;
  }
  .spot-fifth-wrap::before {
    bottom: -80px;
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0,
      rgba(0, 0, 0, 0.45) 6%,
      rgba(0, 0, 0, 0.88) 14%,
      #000 22%,
      #000 78%,
      rgba(0, 0, 0, 0.55) 90%,
      rgba(0, 0, 0, 0.2) 96%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0,
      rgba(0, 0, 0, 0.45) 6%,
      rgba(0, 0, 0, 0.88) 14%,
      #000 22%,
      #000 78%,
      rgba(0, 0, 0, 0.55) 90%,
      rgba(0, 0, 0, 0.2) 96%,
      transparent 100%
    );
  }
  .faq-item summary {
    padding: 42px 0;
    line-height: 28px;
  }
  .faq-item p {
    padding-right: 0;
    margin-bottom: 35px;
  }
  .gallery.gallery-1 {
    --gallery-top-space: clamp(80px, 11vw, 104px);
    --gallery-fade-boost: clamp(72px, 10vw, 96px);
    --story-gap: clamp(28px, 4.5vw, 40px);
    --gallery-photo-drop: 48px;
    --features-gallery-overlap: 120px;
    transform: translateY(-100px);
  }

  .gallery-2 .gallery-collage-shell-2 {
    transform: translateX(-50%) scale(calc(1.15 / 1.1 / 2.5 * 1.6));
    transform-origin: center top;
  }
  .gallery-2 {
    margin-top: -35px;
  }
  .gallery-1 .gallery-collage-shell {
    margin-top: calc(var(--gallery-photo-drop) - 50px + 75px);
    transform: translate(-50%) scale(0.5);
    transform-origin: top;
  }
  .story-games-wrap {
    --story-lift: 56px;
    --spot-bg-offset: clamp(104px, 14vw, 144px);
  }
  .story-games-wrap::after,
  .story-games-wrap::before {
    top: calc(var(--spot-bg-offset) + 200px);
    transform: translateX(-50%) scaleY(calc(1 / 1.3));
    transform-origin: top center;
  }
  .features {
    margin-top: calc(-1 * var(--features-gallery-overlap) + 200px);
  }
  .feature-line {
    flex-wrap: wrap;
    white-space: normal;
    margin-bottom: -7px;
  }
  .features-list {
    transform: translateY(-132px) translateX(20px);
  }
  .feature-line-1 {
    transform: translateY(10px);
  }
  .feature-line-2 {
    transform: translateY(17px) translateX(100px);
  }
  .feature-line-3 {
    transform: translateX(90px) translateY(27px);
  }
  .feature-line-4 {
    transform: translateX(-20px) translateY(37px);
  }
  .feature-line-5 {
    transform: translateX(25px) translateY(40px);
  }
  .feature-line-6 {
    transform: translateX(-15px) translateY(46px);
  }
  .features-building {
    transform: translate(-45%, calc(-50% - 180px)) scale(calc(1 / 1.5));
  }
  .upcoming {
    margin-top: calc(-120px - 52px);
    padding-inline: var(--gutter-wide);
  }
  .faq {
    padding-inline: var(--gutter-faq);
  }
  .upcoming-grid {
    width: 100%;
    grid-template-columns: 1fr;
  }
  .game-times {
    gap: 16px;
  }
  .game-card {
    border-right: none;
  }
  .game-card:nth-child(3) .game-times,
  .game-card:nth-child(4) .game-times {
    margin-bottom: 0;
    top: auto;
    position: static;
  }
  .game-card:nth-child(2) .game-times {
    margin-top: -5px;
  }
  .game-card:nth-child(2) .game-card-head,
  .game-card:nth-child(3) .game-card-head,
  .game-card:nth-child(4) .game-card-head {
    margin-bottom: 45px;
  }
  .game-card:nth-child(2) .btn.btn-purple.btn-sm,
  .game-card:nth-child(3) .btn.btn-purple.btn-sm,
  .game-card:nth-child(4) .btn.btn-purple.btn-sm {
    top: auto;
    position: static;
  }
  .game-card:nth-child(3),
  .game-card:nth-child(4) {
    margin-top: -20px;
  }
  .game-card:nth-child(3) .game-meta,
  .game-card:nth-child(4) .game-meta {
    position: static;
    top: auto;
    margin-top: -10px;
  }
  .game-card:nth-child(3) .game-date-block,
  .game-card:nth-child(4) .game-date-block {
    transform: translateY(-2px);
  }
  .game-card:nth-child(3) .game-date-value,
  .game-card:nth-child(4) .game-date-value {
    margin-top: 5px;
  }
  .game-card:nth-child(3) .game-times,
  .game-card:nth-child(4) .game-times {
    margin-top: -10px;
  }
  .game-card:nth-child(3) .btn.btn-purple.btn-sm {
    margin-top: 0;
    transform: translateX(12px);
  }
  .game-card:nth-child(4) .btn.btn-purple.btn-sm {
    margin-top: 0;
    transform: translate(12px, -5px);
  }
  .audience-inner > .watermark-guess {
    transform: translateY(-50%);
  }
  .game-slot strong {
    font-size: 36px;
  }
  .upcoming-grid {
    gap: 50px;
  }
  .private {
    margin-top: calc(120px);
    padding-inline: 15px;
  }
  .private-subtitle {
    margin-top: -10px;
  }
  .private-card {
    min-height: clamp(180px, 27vw, 278px);
    padding-block: clamp(32px, 6vw, 62px);
  }
  .private-card h3 {
    white-space: normal;
  }
  .private .btn {
    margin-top: 20px;
    max-width: 300px;
    text-wrap: nowrap;
  }
  .faq-list {
    margin-top: 10px;
  }
  .gallery-track {
    flex-wrap: wrap;
    justify-content: center;
  }
  .gallery-track img {
    margin: 8px;
    transform: none;
  }
  .hero-lead {
    line-height: 1.55;
  }
  .experience-points {
    grid-template-columns: 1fr;
  }
  .site-footer .footer-inner {
    margin-top: 90px;
  }
  .footer-social {
    margin-top: 10px;
  }
  .site-footer {
    margin-top: 60px;
  }
  .cta-raccoon img {
    margin-top: -40px;
  }
  .cta-inner .btn,
  .cta-subtitle {
    padding-inline: 45px;
    margin-top: -15px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --container: min(1200px, calc(100% - 2 * var(--gutter-standard)));
  }
  .site-header {
    grid-template-columns: 110px 1fr auto;
    gap: 16px;
    padding-block: 16px;
    margin-bottom: 100px;
  }
  .site-logo-img {
    height: 36px;
  }
  .site-nav {
    gap: 24px;
  }
  .site-nav a {
    line-height: 20px;
    letter-spacing: var(--text-action-ls);
  }
  .header-social {
    gap: 2px;
  }
  .header-social a,
  .header-social img {
    width: var(--social-icon-size);
    height: var(--social-icon-size);
  }
  .btn {
    padding: 11px calc(48px - 10px);
    line-height: 133%;
  }
  .private > .btn {
    padding-inline: calc(48px - 10px + 10px);
    margin-top: 20px;
  }
  .hero-inner {
    width: min(1020px, 100%);
    max-width: none;
    padding-bottom: 0;
  }
  .hero-title {
    max-width: 912px;
  }
  .hero-lead {
    margin-top: 28px;
    max-width: 460px;
    line-height: 28px;
  }
  .hero-inner .btn {
    margin-top: 52px;
    min-width: 193px;
  }
  .experience-inner {
    display: block;
    width: 100%;
    min-height: 581px;
    padding: 0;
  }
  .watermark-experience {
    top: 95px;
  }
  .experience-title {
    position: absolute;
    left: 0;
    top: 193px;
    width: max-content;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
  .experience-visual {
    position: absolute;
    left: 50%;
    top: 140px;
    width: 434px;
    height: 470px;
    transform: translateX(-50%);
  }
  .experience-copy {
    position: absolute;
    left: 58.3%;
    right: auto;
    top: 411px;
    width: max-content;
    max-width: min(max-content, calc(100% - 58.3%));
    font-family: var(--font-ui);
    font-weight: 500;
    line-height: 142%;
    color: var(--white);
    text-align: left;
  }
  .experience-copy p {
    text-align: left;
  }
  .experience-points {
    width: 100%;
    margin: -38px auto 44px;
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
    gap: clamp(12px, 2vw, 78px);
  }
  .experience-points li {
    white-space: nowrap;
    line-height: 24px;
  }
  .experience-points li::after {
    width: 52px;
    height: 2px;
    border-radius: 1px;
    margin-top: 12px;
  }
}
@media (max-width: 1024px) {
  .audience {
    padding-inline: 0;
    overflow-x: clip;
  }
  .audience-inner {
    display: block;
    text-align: left;
    min-height: var(--audience-canvas-height);
    --audience-list-left: clamp(
      calc(40% + 80px),
      calc(44vw + 80px),
      calc(52.43% + 100px)
    );
  }
  .audience-visual {
    min-height: 0;
  }
  .audience-photo {
    position: absolute;
    left: calc(8% - 30px);
    bottom: calc(24.63% - 150px);
    width: 33.6%;
    max-width: 500px;
    margin: 0;
  }
  .audience-copy {
    padding-top: 0;
    display: block;
  }
  .audience-copy,
  .audience-title {
    align-items: flex-start;
  }
  .audience-title-line {
    white-space: nowrap;
  }
  .audience-copy .section-title {
    position: absolute;
    left: clamp(calc(22% + 10px), calc(24vw + 10px), calc(30% + 10px));
    top: calc(24.63% + 30px);
  }
  .audience-list {
    position: absolute;
    left: calc(var(--audience-list-left) - 20px);
    top: calc(53.08% + 45px);
    width: max-content;
    max-width: min(560px, calc(100% - 40px));
    margin: 0;
    text-align: left;
    column-gap: clamp(40px, 8vw, 80px);
  }
  .audience-cta {
    position: absolute;
    left: calc(var(--audience-list-left) - 20px);
    top: calc(53.08% + 320px);
  }
  .audience-item {
    padding-bottom: 10px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .audience-inner > .watermark-guess {
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-60%);
  }
}
@media (max-width: 935px) {
  .header-social,
  .site-nav {
    display: none;
  }
  .header-callback {
    display: none;
  }
  .site-menu-btn {
    display: flex;
    width: max-content;
    max-width: max-content;
    margin-left: auto;
    margin-right: 0;
    justify-self: end;
  }
  .site-header {
    gap: 20px;
    grid-template-columns: 1fr auto;
    justify-content: space-between;
    padding-right: 20px;
  }
}
@media (max-width: 919px) {
  .audience-list {
    left: clamp(200px, 32vw, 340px);
    right: 30px;
    width: auto;
    max-width: none;
    grid-template-columns: repeat(2, max-content);
    column-gap: clamp(24px, 4vw, 80px);
    row-gap: 32px;
  }
  .audience-item {
    white-space: normal;
  }
  .audience-item-line--wide {
    display: none;
  }
  .audience-item-line--narrow {
    display: block;
    white-space: nowrap;
  }
  .audience-cta {
    left: clamp(200px, 32vw, 340px);
    top: auto;
    bottom: 40px;
  }
}
@media (max-width: 768px) {
  :root {
    --gutter-standard: 15px;
    --gutter-wide: 15px;
    --gutter-faq: 15px;
    --experience-inline: 15px;
    --container: min(1200px, calc(100% - 2 * var(--gutter-standard)));
  }
  .site-header {
    padding-block: 16px;
    padding-inline: 15px;
    margin-bottom: 120px;
  }
  .site-logo-img {
    height: 40px;
  }
  .hero-inner {
    padding-bottom: 0;
  }
  .hero-lead {
    margin-top: 28px;
    max-width: 460px;
    line-height: 28px;
  }
  .hero-inner .btn {
    margin-top: 52px;
    min-width: 183px;
    padding-inline: 10px;
    padding-block: 10px;
    transform: translateX(-5px) translateY(5px);
  }
  .experience-inner {
    display: block;
    min-height: 581px;
    padding: 0;
  }
  .watermark-experience {
    top: 140px;
  }
  .experience-title {
    position: absolute;
    left: -10px;
    top: 202px;
    width: max-content;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
  .experience-visual {
    position: absolute;
    left: 50%;
    top: 140px;
    width: 434px;
    height: 470px;
    transform: translateX(-50%);
  }
  .experience-copy {
    position: absolute;
    left: 60.68%;
    right: auto;
    top: 411px;
    width: max-content;
    max-width: min(max-content, calc(100% - 60.68%));
    font-family: var(--font-ui);
    font-weight: 500;
    line-height: 142%;
    color: var(--white);
    text-align: left;
  }
  .experience-copy p {
    text-align: left;
  }
  .experience-points {
    width: 100%;
    margin: 0 auto;
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
    gap: clamp(12px, 2vw, 96px);
    transform: translate(-5px, 10px);
  }
  .experience-points li {
    white-space: nowrap;
    line-height: 24px;
  }
  .experience-points li::after {
    width: 52px;
    height: 2px;
    border-radius: 1px;
    margin-top: 12px;
  }
  .audience-visual {
    min-height: 420px;
  }
  .audience-photo {
    width: 324px;
    height: 434px;
    transform: translate(-55px, 100px);
  }
  .audience-copy .section-title {
    transform: translate(-50px, 55px);
  }
  .audience-list {
    grid-template-columns: repeat(2, max-content);
    column-gap: 30px;
    width: max-content;
    max-width: none;
    left: auto;
    row-gap: 10px;
    transform: translateY(90px);
  }
  .audience-item-line--wide {
    display: none;
  }
  .audience-item-line--narrow {
    display: block;
    white-space: nowrap;
  }
  .audience-cta {
    transform: translateY(350px) translateX(120px);
    padding-inline: 60px;
  }
}
@media (max-width: 600px) {
  .story-games-wrap {
    margin-top: -160px;
  }
  .features {
    margin-top: 60px;
    padding-inline: 0;
  }
  .rules {
    margin-top: calc(-270px + 85px);
    padding-top: 0;
  }
  .upcoming-subtitle {
    margin-top: 10px;
  }
  .game-meta {
    margin-top: -5px;
  }
  .btn.btn-purple,
  .upcoming .btn {
    margin-top: 35px;
    font-size: 16px;
  }
  .franchise-cta.btn.btn-purple {
    margin-top: 40px;
  }
  .faq {
    margin-top: 0;
    padding-top: 0;
    transform: translateY(-438px);
  }
  .faq-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .faq-list {
    max-width: none;
    justify-self: stretch;
    transform: translateY(-33px);
  }
  .faq-heading {
    text-align: left;
    align-self: start;
    justify-self: start;
    padding-top: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 56px;
    line-height: 100%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-top: 12px;
  }
  .faq-item summary {
    padding-bottom: 25px;
    padding-top: 30px;
  }
  .faq-item p {
    margin-bottom: 20px;
    transform: translateY(-15px);
    max-width: 260px;
    line-height: 1.4;
  }
  :root {
    --container: min(1200px, calc(100% - 2 * var(--gutter-standard)));
    --text-h1-fz: 56px;
    --text-h2-fz: 36px;
    --text-h3-fz: 20px;
    --text-title-m-fz: 18px;
    --text-title-s-fz: 16px;
    --text-body-fz: 14px;
    --text-btn-fz: 16px;
    --text-menu-fz: 14px;
    --text-input-m-fz: 16px;
    --text-input-s-fz: 12px;
  }
  .intro-stack-glow-gold {
    transform: translateY(-100px) scale(1.4, calc(1 / 1.3));
    transform-origin: left top;
  }
  .site-header {
    padding-block: 12px;
    padding-right: 25px;
    margin-bottom: 128px;
  }
  .experience-title,
  .section-title {
    margin-top: -5px;
  }
  .hero-lead-line--medium,
  .hero-lead-line--wide,
  .hero-title-line--compact,
  .hero-title-line--medium,
  .hero-title-line--tablet,
  .hero-title-line--wide {
    display: none;
  }
  .hero-lead-line--narrow,
  .hero-title-line--narrow {
    display: block;
    white-space: nowrap;
  }
  .hero-title > .hero-title-line--narrow:nth-child(10) {
    transform: translateX(10px);
  }
  .hero-title > .hero-title-line--narrow:nth-child(12),
  .hero-title > .hero-title-line--narrow:nth-child(13),
  .hero-title > .hero-title-line--narrow:nth-child(14) {
    transform: translateX(10px);
  }
  .hero-inner {
    margin-top: -30px;
    align-items: flex-start;
    text-align: left;
    padding-inline: 10px;
    box-sizing: border-box;
  }
  .hero-title {
    max-width: 300px;
    text-align: center;
    line-height: 103%;
    transform: none;
  }
  .hero-lead {
    margin-top: 17px;
    max-width: 300px;
    line-height: 142%;
    text-align: center;
    align-self: center;
  }
  .hero {
    padding-inline: 0;
  }
  .hero-inner .btn {
    align-self: center;
    margin-top: 35px;
    transform: translateX(0) translateY(5px);
    padding-inline: 48px;
    font-size: 16px;
  }
  .experience-inner {
    min-height: 543px;
  }
  .experience {
    overflow: visible;
    margin-top: 20px;
    transform: translateY(-110px);
  }
  .watermark-experience {
    top: 95px;
  }
  .watermark-experience picture {
    transform: scaleY(1.3);
    transform-origin: top center;
  }
  .experience-title {
    left: 0;
    top: 200px;
    width: 288px;
    max-width: 74vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 32px;
    line-height: 94%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .experience-title-line--again {
    align-self: flex-start;
  }
  .experience-visual {
    left: auto;
    right: -30px;
    top: 125px;
    width: 371px;
    height: 402px;
    transform: none;
  }
  .experience-photo {
    object-position: bottom right;
    transform: translateY(-25px) translateX(50px);
  }
  .experience-copy {
    left: 0;
    top: 380px;
    width: max-content;
    max-width: min(100%, calc(100vw - 2 * var(--gutter-standard)));
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 144%;
    color: var(--white);
  }
  .experience-copy-line--narrow {
    display: none;
  }
  .experience-copy-line--mobile {
    display: block;
    white-space: nowrap;
  }
  .experience-points {
    width: calc(100% - 32px);
    margin: -35px auto 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 55px;
    row-gap: 25px;
    margin-inline: 0;
  }
  .experience-points li:nth-child(-n + 2) .experience-point-line--wide {
    display: block;
    white-space: nowrap;
  }
  .experience-points li:nth-child(-n + 2) .experience-point-line--narrow,
  .experience-points li:nth-child(n + 3) .experience-point-line--narrow {
    display: none;
  }
  .experience-points li:nth-child(n + 3) .experience-point-line--mobile {
    display: block;
    white-space: nowrap;
  }
  .experience-points li {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: var(--white-op-800);
  }
  .experience-points li::after {
    width: 52px;
    height: 2px;
    border-radius: 1px;
    margin-top: 8px;
  }
  .gallery-1 .gallery-collage-shell {
    /* поднимаем коллаж: baked-glow фото заходит на experience */
    margin-top: calc(var(--gallery-photo-drop) - 50px + 75px - 80px - 40px);
    transform: translate(-50%) scale(0.5);
    transform-origin: top;
    overflow: visible;
  }
  .gallery.gallery-1 {
    --gallery-top-space: 8px;
    --gallery-fade-boost: 0px;
    /* overflow-x: clip + overflow-y: visible → y становится auto и режет glow */
    overflow: visible;
    margin-top: 145px;
  }
  .gallery.gallery-1::before {
    display: none;
  }
  .gallery-1 .gallery-collage .gallery-photo {
    overflow: visible;
  }
  .story-games-wrap {
    --spot-bg-bottom-stretch: 240px;
    overflow: visible;
    /* выше intro-stack (z-index: 2), иначе его opaque bg режет glow */
    z-index: 3;
  }

  .story-games-wrap::before {
    top: calc(var(--spot-bg-offset) - 1px);
  }
  .features {
    padding-inline: 10px;
    overflow: visible;
  }
  .features-inner {
    transform: none;
    padding-inline: 0;
    overflow: visible;
  }
  .features-building {
    /* опускаем здание/фиолетовое свечение, чтобы заходило в rules */
    transform: translate(-50%, calc(-50% - 160px)) scale(1, calc(1 / 1.8));
    transform-origin: center center;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 8%,
      #000 88%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 8%,
      #000 88%,
      transparent 100%
    );
  }
  .rules {
    overflow: visible;
    isolation: auto;
    background: linear-gradient(
      180deg,
      transparent 0,
      transparent 48px,
      rgba(20, 20, 20, 0.55) 110px,
      var(--bg) 180px,
      var(--bg) 100%
    );
    margin-top: -150px;
    transform: none;
    pointer-events: auto;
    /* запас снизу, чтобы media не резалась нахлёстом audience */
    padding-bottom: 24px;
  }
  .story-games-wrap > .rules {
    z-index: 5;
  }
  .rules-media,
  .rules-media .rules-video {
    position: relative;
    z-index: 8;
    pointer-events: auto;
    touch-action: manipulation;
  }
  .rules-media {
    height: 183px;
    overflow: visible;
    border-radius: 16px;
  }
  .rules-media .rules-video-facade,
  .rules-media .rules-video,
  .rules-media .rules-video-poster {
    border-radius: 16px;
  }
  .feature-line,
  .features-list {
    display: flex;
    flex-direction: column;
    line-height: 1;
  }
  .features-list {
    align-items: stretch;
    width: 100%;
    text-align: left;
    row-gap: 10px;
    transform: translateY(-195px);
    font-size: 32px;
    line-height: 94%;
  }
  .feature-line {
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
    margin-bottom: 6px;
    white-space: normal;
    flex-wrap: nowrap;
  }
  .feature-line small {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    letter-spacing: 0;
    text-transform: none;
    color: var(--white);
  }
  .feature-line .feature-headline,
  .feature-line .feature-headline-line--mobile,
  .feature-line > span:not(.feature-headline) {
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 32px;
    line-height: 94%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
  }
  .feature-line-1,
  .feature-line-2,
  .feature-line-3,
  .feature-line-4,
  .feature-line-5,
  .feature-line-6 {
    transform: none;
    justify-content: flex-start;
  }
  .feature-line:nth-child(odd) {
    align-self: flex-start;
    align-items: flex-start;
    text-align: left;
    transform: translateY(2px);
  }
  .feature-line:nth-child(even) {
    align-self: flex-end;
    align-items: flex-start;
    text-align: left;
    transform: translateX(-35px);
  }
  .feature-line-1 small:last-child,
  .feature-line-6 small:last-child {
    align-self: flex-end;
  }
  .feature-line.feature-line-1 {
    transform: translate(5px, -10px);
  }
  .feature-line.feature-line-2 {
    /* на 10px вправо от базового even (-35px) */
    transform: translateX(-20px);
  }
  .feature-line.feature-line-3 {
    transform: translate(5px, -5px);
  }
  .feature-line.feature-line-4 {
    transform: translateX(-20px);
  }
  .feature-line.feature-line-5 {
    transform: translate(5px, 0);
  }
  .feature-line.feature-line-6 {
    /* на 20px влево от текущего (-5px) */
    transform: translateX(-25px);
  }
  .feature-line small,
  .feature-line > span:not(.feature-headline) {
    display: block;
  }
  .feature-line .feature-headline {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .feature-line-3 .feature-headline,
  .feature-line-5 .feature-headline {
    gap: 5px;
  }
  .feature-line:nth-child(odd) .feature-headline {
    align-items: flex-start;
  }
  .feature-line:nth-child(even) .feature-headline {
    align-items: flex-end;
  }
  .feature-line .feature-headline-line--wide {
    display: none !important;
  }
  .feature-line .feature-headline-line--mobile {
    display: block;
    white-space: nowrap;
  }
  .upcoming .section-title {
    position: relative;
    top: 15px;
  }
  .upcoming-subtitle {
    position: relative;
    top: -5px;
  }
  .upcoming-grid {
    margin-top: -30px;
    --text-title-s-fz: 14px;
  }
  .upcoming-grid .game-card {
    padding-bottom: 5px;
  }
  .upcoming-grid .game-card:nth-child(3),
  .upcoming-grid .game-card:nth-child(4) {
    margin-top: -15px;
  }
  .upcoming-grid .game-meta,
  .upcoming-grid .game-slot p,
  .upcoming-grid .game-weekday {
    line-height: 142%;
  }
  .upcoming-grid .game-slot strong,
  .upcoming-grid .game-weekday {
    margin-top: -5px;
  }
  .upcoming-grid .game-date-value {
    margin-top: 0;
  }
  .upcoming-grid .game-card:nth-child(1) .game-date-value,
  .upcoming-grid .game-card:nth-child(1) .game-meta,
  .upcoming-grid .game-card:nth-child(2) .game-date-value,
  .upcoming-grid .game-card:nth-child(2) .game-meta {
    margin-top: -5px;
  }
  .upcoming-grid .game-card:nth-child(3) .game-date-block,
  .upcoming-grid .game-card:nth-child(4) .game-date-block {
    transform: translateY(-10px);
  }
  .upcoming-grid .game-card:nth-child(3) .game-date-value,
  .upcoming-grid .game-card:nth-child(4) .game-date-value {
    margin-top: 5px;
  }
  .upcoming-grid .game-card:nth-child(3) .game-meta,
  .upcoming-grid .game-card:nth-child(4) .game-meta {
    margin-top: -5px;
  }
  .upcoming-grid .game-meta {
    margin-top: -5px;
    white-space: normal;
  }
  .upcoming-grid .game-times {
    margin-top: -10px;
  }
  .upcoming-grid .game-card:nth-child(2) .game-card-head,
  .upcoming-grid .game-card:nth-child(3) .game-card-head,
  .upcoming-grid .game-card:nth-child(4) .game-card-head {
    margin-bottom: 30px;
  }
  .upcoming-grid .game-day,
  .upcoming-grid .game-month {
    line-height: 0.88;
  }
  .upcoming-grid .game-meta-line--wide {
    display: none;
  }
  .upcoming-grid .game-meta-line--narrow {
    display: block;
    white-space: nowrap;
  }
  .upcoming-grid
    .game-card:not(:has(.game-meta-line--narrow))
    .game-meta-line--wide {
    display: block;
    white-space: nowrap;
  }
  .upcoming-grid .btn.btn-purple.btn-sm {
    transform: translate(15px, 0);
  }
  .upcoming-grid .game-card:nth-child(3) .btn.btn-purple.btn-sm {
    transform: translate(15px, -10px);
  }
  .upcoming-grid .game-card:nth-child(4) .btn.btn-purple.btn-sm {
    transform: translate(15px, -20px);
  }
  .audience {
    /* тянем вверх на upcoming/низ rules; не накрываем плеер сплошным bg */
    margin-top: calc(-120px - 20px);
    /* visible — иначе spot-purple не выйдет в app-control (clip+visible → y:auto) */
    overflow: visible;
    /* выше story-games-wrap (3) и rules (5) — audience заходит НА rules */
    z-index: 6;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      transparent 0,
      transparent 140px,
      rgba(20, 20, 20, 0.55) 200px,
      var(--bg) 260px,
      var(--bg) 100%
    );
  }
  .audience-inner,
  .audience-cta,
  .audience-copy,
  .audience-list {
    pointer-events: auto;
  }
  .audience-spot-yellow {
    top: calc(-100px);
    transform: translateX(0) scale(2);
    transform-origin: left top;
  }
  .audience-spot-purple {
    right: 0;
    bottom: -450px;
    width: min(801px, 120vw);
    z-index: 2;
    transform: translateX(12%) scale(1.2);
    transform-origin: right bottom;
  }
  .site-footer {
    margin-bottom: -250px;
    padding-bottom: 20px;
    margin-top: 0;
    transform: translateY(-250px);
  }
  .site-footer .footer-inner {
    margin-top: 0;
  }
  .site-footer .footer-logo {
    margin-top: 0;
  }
  .game-slot strong {
    font-size: 20px;
  }
  .cta-final {
    margin-top: -176px;
    transform: translateY(-250px);
    padding-bottom: 0;
  }
  .cta-inner .btn {
    transform: translateY(-25px);
    padding-inline: 45px;
    padding-block: 10px;
  }
  .watermark-move {
    bottom: calc(clamp(72px, 8vw, 151px) - 65px + 160px - 50px + 40px);
  }
  .watermark-move-img,
  .watermark-move picture > img {
    transform: scaleY(1.2);
    transform-origin: center bottom;
  }
  .cta-raccoon {
    margin-top: calc(clamp(100px, 14vw, 145px) - 30px + 20px);
    margin-bottom: 0;
    max-width: calc(329px / 1.3 / 1.1);
    --cta-raccoon-shift-x: 43px;
    --cta-raccoon-shift-y: calc(115px - 50px - 92px);
  }
  .cta-raccoon-img {
    width: calc(329px / 1.3 / 1.1);
    height: calc(329px / 1.3 / 1.1);
    max-height: none;
  }
  .footer-divider {
    margin-bottom: 15px;
  }
  .footer-nav {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .cta-subtitle-line--wide {
    display: none;
  }
  .cta-subtitle-line--narrow {
    display: block;
    // white-space: nowrap;
  }
  .cta-subtitle-line--wide + .cta-subtitle-line--narrow {
    // white-space: nowrap;
  }
  .cta-subtitle {
    width: 100vw;
    margin-left: calc(50% - 53vw);
    padding-inline: 30px;
    box-sizing: border-box;
    line-height: 142%;
  }
  .spot-fifth-wrap {
    margin-top: calc(-50px - 300px + 240px);
  }
  .gallery-2 .gallery-collage-shell-2 {
    transform: translateX(-50%) scale(calc(1.15 / 1.1 / 2.5 * 1.22));
    transform-origin: center top;
  }
  .private {
    margin-top: calc(130px + 130px - 50px - 35px + 300px + 190px);
    position: relative;
    z-index: 7;
    padding-inline: 0;
  }
  .private::before {
    left: 50%;
    right: auto;
    width: 947px;
    transform: translateX(-40%) translateY(-400px);
    background-size: 947px auto;
  }
  .private-cards {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
    margin-top: 36px;
    margin-bottom: 0;
    padding: 15px 15px 0;
    box-sizing: border-box;
    border-radius: 0;
    overflow: visible;
    transform: none;
  }
  .private-cards .private-card:nth-child(1) {
    order: 3;
    border-radius: 0 0 10px 10px;
  }
  .private-cards .private-card:nth-child(1) h3 {
    white-space: normal;
  }
  .private-cards .private-card:nth-child(2) {
    order: 2;
  }
  .private-cards .private-card:nth-child(3) {
    order: 1;
    border-radius: 10px 10px 0 0;
    gap: 10px;
  }
  .private-card {
    width: 100%;
    min-height: auto;
    padding: 30px 65px 20px;
    gap: 5px;
  }
  .private-icon {
    width: 120px;
    height: 90px;
    min-width: 120px;
    min-height: 90px;
  }
  .private-cards .private-card:nth-child(1) {
    padding: 45px 65px 35px;
  }
  .private-cards .private-card:nth-child(1) .private-icon {
    width: 65px;
    height: 75px;
    min-width: 80px;
    min-height: 60px;
  }
  .private > .btn,
  .private-cta {
    width: calc(100% - 30px);
    max-width: none;
    margin-inline: 15px;
    padding-inline: 25px;
    margin-top: 40px;
    box-sizing: border-box;
    transform: none;
    position: relative;
    z-index: 3;
    font-size: 16px;
    font-family: var(--second-family);
    font-weight: 500;
    line-height: 138%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
  }
  .private-subtitle {
    transform: translateY(-10px);
    line-height: 1.3;
  }
  .private-host-title {
    transform: translateY(-20px);
  }
  .private-title {
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 56px;
    line-height: 100%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-top: -500px;
    margin-bottom: 0;
    padding-inline: 15px;
    box-sizing: border-box;
    width: 100%;
  }
  .private-title-block--right {
    align-self: flex-end;
    align-items: flex-end;
    text-align: right;
    width: max-content;
    max-width: 100%;
  }
  .private-title-line--desk {
    display: none;
  }
  .private-title-line--mobile {
    display: block;
    white-space: nowrap;
  }
  .audience {
    min-height: 0;
    height: auto;
    padding-inline: 10px;
    padding-bottom: 48px;
    overflow: visible;
    z-index: 6;
    pointer-events: none;
    --audience-item-lh: 21px;
    --audience-canvas-height: auto;
    background: linear-gradient(
      180deg,
      transparent 0,
      transparent 140px,
      rgba(20, 20, 20, 0.55) 200px,
      var(--bg) 260px,
      var(--bg) 100%
    );
    margin-top: -200px;
  }
  .audience-inner {
    min-height: 0;
    height: auto;
    overflow: visible;
    transform: none;
    pointer-events: auto;
  }
  .audience-cta,
  .audience-copy,
  .audience-list {
    pointer-events: auto;
  }
  .app-control {
    position: relative;
    z-index: 7;
    /* прозрачный верх — фиолетовый spot из audience заходит сюда */
    background: linear-gradient(
      180deg,
      transparent 0,
      transparent 120px,
      rgba(20, 20, 20, 0.55) 180px,
      var(--bg) 240px,
      var(--bg) 100%
    );
  }
  .audience-inner > .watermark-guess {
    left: 50%;
    right: auto;
    width: 100vw;
    max-width: 100vw;
    transform: translate(-50%, calc(-50% - 183px));
  }
  .audience-inner > .watermark-guess picture,
  .audience-inner > .watermark-guess-img {
    width: 100%;
    max-width: 100%;
    margin-top: -125px;
    transform: scale(1.1);
  }
  .audience-visual {
    min-height: 0;
  }
  .audience-photo {
    top: 70px;
    right: auto;
    bottom: auto;
    left: 57%;
    width: 235px;
    max-width: 60vw;
    height: auto;
    transform: translate(calc(-50% + 95px), 15%) scale(1.2);
    transform-origin: center top;
  }
  .audience-copy {
    padding-top: 180px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: -30px;
  }
  .audience-copy .section-title {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    z-index: 2;
  }
  .audience-title {
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 56px;
    line-height: 100%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .audience-copy .section-title {
    font-size: 56px;
    line-height: 100%;
    letter-spacing: 0.02em;
  }
  .audience-title-line--wide,
  .audience-title-line--default {
    display: none;
  }
  .audience-title-line--mobile {
    display: block;
  }
  .audience-list {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 35px 0 0;
    align-items: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 26px;
  }
  .audience-cta {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    transform: none;
    width: 100%;
    margin-top: 35px;
    justify-content: center;
    padding-inline: 24px;
    font-size: 14px;
  }
  .audience-item {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 0;
    max-width: none;
    padding-bottom: 12px;
    white-space: normal;
    --audience-item-underline-gap: 10px;
  }
  .audience-item-line--wide {
    display: none;
  }
  .audience-item-line--narrow {
    display: block;
    white-space: nowrap;
  }
  .audience-item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 55px;
    height: 2px;
    margin-top: 0;
    box-sizing: content-box;
    transform: none;
  }
  .gallery-2 {
    transform: translateY(-250px);
  }
  .footer-inner {
    margin-top: 75px;
  }
}
.gallery-photo picture,
.features-building picture {
  display: block;
  width: 100%;
  height: 100%;
}
.gallery-photo picture > img,
.features-building picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 600px) {
  .features-building img {
    width: 304px;
    max-width: none;
    height: auto;
  }
  .features-building picture,
  .features-building picture > img {
    width: 304px;
    max-width: none;
    height: auto;
    object-fit: contain;
  }
  .features-building picture > img {
    transform: scaleY(1.65);
    transform-origin: center top;
  }
}
.private > button[data-private-open],
.private > [data-private-open] {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}
@media (min-width: 1441px) {
  .site-logo-img,
  .footer-logo-img {
    width: 240px;
  }
  .header-social a:first-child {
    transform: translateX(-15px);
  }
  .footer-logo,
  .footer-social {
    transform: translateY(20px);
  }
}
@media (min-width: 1441px) {
  .upcoming-grid .game-card:nth-child(1) .game-date-block,
  .upcoming-grid .game-card:nth-child(2) .game-date-block,
  .upcoming-grid .game-card:nth-child(1) .game-times,
  .upcoming-grid .game-card:nth-child(2) .game-times {
    transform: translateY(15px);
  }
}
@media (min-width: 1441px) {
  .audience-list {
    transform: translateY(5px);
  }
  .audience-cta {
    top: 700px;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .footer-logo-img {
    width: 240px;
  }
  .cta-final {
    transform: none;
    margin-top: calc(var(--spot-fifth-section-gap) + 200px - 761px);
    padding-bottom: 0;
  }
  .site-footer {
    margin-top: 70px;
    padding-bottom: 0;
    overflow-x: hidden;
    overflow-y: visible;
  }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .experience-visual {
    transform: translate(-50%, -20px);
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .site-header {
    grid-template-columns: 160px 1fr auto;
  }
  .site-logo-img,
  .footer-logo-img {
    width: 160px;
  }
  .cta-inner .btn {
    width: 200px;
    transform: translateX(-5px) translateY(32px);
  }
}
@media (min-width: 769px) and (max-width: 935px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }
}
@media (max-width: 768px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }
  .site-logo-img,
  .footer-logo-img {
    width: 160px;
  }
  .footer-nav {
    transform: translateY(-8px);
  }
}
@media (min-width: 601px) and (max-width: 768px) {
  .site-header,
  .hero,
  .about,
  .experience,
  .features,
  .rules,
  .upcoming,
  .audience,
  .private,
  .faq,
  .cta-final,
  .site-footer,
  .app-control,
  .franchise,
  .club-contacts {
    padding-inline: 15px;
  }
  .site-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-block: 16px;
    padding-inline: 15px;
  }
  .site-nav,
  .header-social {
    display: none;
  }
  .site-logo {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
  }
  .site-menu-btn {
    display: flex;
    order: 2;
    flex: 0 0 auto;
    align-self: flex-start;
    margin: 0;
  }
  .header-callback {
    display: flex;
    flex-direction: column;
    order: 3;
    flex: 1 1 0;
    min-width: 0;
    align-items: flex-end;
    align-self: flex-start;
    margin-top: 10px;
  }
  .header-callback__action {
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--light-violet);
    text-shadow: 0 0 20px var(--accent-violet);
  }
  .header-callback__meta {
    position: static;
    top: auto;
    margin-top: 12px;
  }
  .header-callback__note {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 12px;
    line-height: 133%;
    text-align: right;
    color: var(--white);
  }
  .header-callback__phone {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 171%;
    text-align: right;
    color: var(--white-op-800);
  }
  .hero {
    margin-top: -70px;
  }
  .hero-title-line--wide,
  .hero-title-line--medium,
  .hero-title-line--compact,
  .hero-title-line--narrow {
    display: none;
  }
  .hero-title-line--tablet {
    display: block;
    white-space: nowrap;
  }
  .hero-title {
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 62px;
    line-height: 106%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    color: var(--white);
    max-width: 100%;
    transform: none;
  }
  .hero-inner .btn {
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    padding-inline: 50px;
    margin-top: 47px;
  }
  .experience-inner {
    display: block;
    min-height: 581px;
    padding: 0;
  }
  .experience-title {
    position: absolute;
    left: auto;
    right: 0;
    top: 150px;
    width: max-content;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 62px;
    line-height: 106%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
  }
  .experience-title-line--again {
    align-self: flex-start;
  }
  .experience-copy {
    position: absolute;
    left: 50%;
    right: auto;
    top: 380px;
    width: max-content;
    max-width: min(max-content, calc(100% - 58%));
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    color: var(--white);
    text-align: left;
  }
  .experience-copy-line--narrow,
  .experience-copy-line--mobile {
    display: none;
  }
  .experience-copy-line--wide {
    display: block;
    white-space: nowrap;
  }
  .experience-points {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
    gap: clamp(12px, 2vw, 48px);
    transform: none;
  }
  .experience-point-line--wide,
  .experience-point-line--narrow,
  .experience-point-line--mobile,
  .experience-point-line--tablet {
    display: none;
  }
  .experience-point-line--md {
    display: block;
    white-space: nowrap;
  }
  .experience-points li {
    white-space: normal;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--white-op-800);
  }
  .experience-points li::after {
    content: '';
    display: block;
    width: 52px;
    height: 2px;
    margin-top: 12px;
    border-radius: 1px;
    background: var(--white);
  }
  .experience-points li:nth-child(2)::after {
    background: var(--accent-beige);
  }
  .experience-points li:nth-child(3)::after {
    background: var(--accent-yellow);
  }
  .experience-points li:nth-child(4)::after {
    background: var(--accent-violet);
  }
  .gallery-1 .gallery-collage-shell {
    transform: translate(-50%) scale(0.75);
    transform-origin: top;
  }
  .features {
    z-index: 4;
    overflow: visible;
    margin-top: calc(-1 * var(--features-gallery-overlap) + 280px);
    padding-bottom: 80px;
  }
  .features-inner {
    min-height: 800px;
    overflow: visible;
  }
  .features-list {
    transform: translateY(-260px) translateX(20px);
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 46px;
    line-height: 104%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
  }
  .features-inner .feature-line > span:not(.feature-headline),
  .features-inner .feature-headline,
  .features-inner .feature-headline-line {
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 46px;
    line-height: 104%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
  }
  .features-inner .feature-line small {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0;
    text-transform: none;
    color: var(--white);
  }
  .features-building {
    width: auto;
    overflow: visible;
    transform: translate(-50%, calc(-50% - 190px)) scale(calc(1 / 1.5));
  }
  .features-building picture,
  .features-building picture > img,
  .features-building img {
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
  }
  .story-games-wrap > .rules {
    margin-top: -370px;
  }
  .rules {
    overflow: visible;
    isolation: auto;
    /* дольше прозрачный верх/низ — свечение видно выше и уходит в upcoming */
    background: linear-gradient(
      180deg,
      transparent 0,
      transparent 120px,
      rgba(20, 20, 20, 0.35) 260px,
      rgba(20, 20, 20, 0.55) 420px,
      rgba(20, 20, 20, 0.4) 70%,
      rgba(20, 20, 20, 0.18) 88%,
      transparent 100%
    );
    padding-bottom: 80px;
  }
  .rules-inner {
    max-width: none;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(200px, 0.9fr) minmax(0, 1.3fr);
    column-gap: 120px;
    row-gap: 0;
    align-items: start;
  }
  .rules-title {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 62px;
    line-height: 106%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
  }
  .rules-lead {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 36px;
    line-height: 117%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
  }
  .rules-lead-line--default {
    display: none;
  }
  .rules-lead-line--tablet {
    display: block;
    white-space: nowrap;
  }
  .rules-text {
    grid-column: 2;
    grid-row: 2;
    margin: 20px 0 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--white-op-800);
  }
  .rules-media {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    max-width: none;
    height: 377px;
    margin-top: 40px;
    overflow: hidden;
    border-radius: 16px;
  }
  .rules-media .rules-video-facade,
  .rules-media .rules-video,
  .rules-media .rules-video-poster {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
  }
  .audience {
    margin-top: -120px;
    overflow: visible;
  }
  .audience-inner > .watermark-guess {
    left: 50%;
    right: auto;
    width: 100vw;
    max-width: 100vw;
    transform: translate(-50%, -50%);
    overflow: visible;
  }
  .audience-inner > .watermark-guess picture,
  .audience-inner > .watermark-guess-img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: fill;
    transform: scaleY(1.2);
    transform-origin: center center;
  }
  .audience-copy .section-title,
  .audience-title,
  .audience-title-line {
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 62px;
    line-height: 106%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
  }
  .audience-title .text-gold {
    color: var(--accent-yellow);
  }
  .audience-item {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--white-op-800);
  }
  .audience-item:nth-child(3) .audience-item-line--wide,
  .audience-item:nth-child(3) .audience-item-line--narrow,
  .audience-item:nth-child(5) .audience-item-line--wide,
  .audience-item:nth-child(5) .audience-item-line--narrow {
    display: none;
  }
  .audience-item:nth-child(3) .audience-item-line--tablet,
  .audience-item:nth-child(5) .audience-item-line--tablet {
    display: block;
    white-space: nowrap;
  }
  .audience-cta {
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
  }
  .audience-list {
    transform: translateY(120px) translateX(15px);
    row-gap: 30px;
    column-gap: 35px;
  }
  .app-control {
    display: block;
    position: relative;
    z-index: 7;
    padding: 0 0 100px;
    overflow: visible;
    background: linear-gradient(
      180deg,
      transparent 0,
      transparent 120px,
      rgba(20, 20, 20, 0.55) 180px,
      var(--bg) 240px,
      var(--bg) calc(100% - 120px),
      transparent 100%
    );
    margin-top: 30px;
  }
  .app-control-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding-inline: 0;
    box-sizing: border-box;
  }
  .app-control-title {
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 62px;
    line-height: 106%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    color: var(--accent-yellow);
  }
  .app-control-title-line--default {
    display: none;
  }
  .app-control-title-line--tablet {
    display: block;
  }
  .app-control-title-accent {
    color: var(--accent-yellow);
  }
  .app-control-title-white {
    color: var(--white);
  }
  .app-control-title-line--white {
    color: var(--white);
  }
  .app-control-title-line--tablet.app-control-title-line--white {
    display: block;
  }
  .app-control-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 45px;
    margin-top: 42px;
  }
  .app-control-tab {
    appearance: none;
    margin: 0;
    padding: 0 0 6px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: 0 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 36px;
    line-height: 117%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .app-control-tab.is-active {
    color: var(--accent-violet);
    border-bottom-color: var(--accent-violet);
  }
  .app-control-panel {
    margin-top: 65px;
    overflow: visible;
  }
  .app-control-panel[hidden] {
    display: none;
  }
  .app-control-text {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 738px;
    margin: 0 auto;
    padding-inline: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    color: var(--white-op-800);
    margin-top: -20px;
  }
  .app-control-carousel-shell {
    position: relative;
    z-index: 0;
    width: 100%;
    margin-top: 80px;
    overflow: visible;
    isolation: isolate;
  }
  /* общее жёлтое: сверху −100px, снизу +50px с плавным затуханием */
  .app-control-carousel-shell::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -100px;
    bottom: -100px;
    width: min(180%, 980px);
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
      ellipse 92% 72% at 50% 46%,
      rgba(242, 182, 38, 0.37) 0%,
      rgba(242, 182, 38, 0.18) 34%,
      rgba(242, 182, 38, 0.08) 56%,
      rgba(242, 182, 38, 0.035) 72%,
      transparent 88%
    );
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 12%,
      #000 28%,
      #000 62%,
      rgba(0, 0, 0, 0.55) 82%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 12%,
      #000 28%,
      #000 62%,
      rgba(0, 0, 0, 0.55) 82%,
      transparent 100%
    );
  }
  .app-control-carousel {
    --app-frame-w: 543px;
    --app-frame-h: 376px;
    --app-peek: 75px;
    --app-crop-scale: 1.42;
    --app-slide-gap: 35px;
    --app-glow-pad: 70px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--app-slide-gap);
    width: 100%;
    box-sizing: content-box;
    height: var(--app-frame-h);
    margin: 0;
    padding: var(--app-glow-pad) 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc((100% - var(--app-frame-w)) / 2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: -70px;
  }
  .app-control-carousel::-webkit-scrollbar {
    display: none;
  }
  .app-control-carousel .app-control-slide {
    position: relative;
    flex: 0 0 var(--app-frame-w);
    width: var(--app-frame-w);
    height: var(--app-frame-h);
    margin: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-radius: 41px;
    overflow: hidden;
    background: #0d0618;
  }
  .app-control-gallery {
    --app-frame-w: 174px;
    --app-frame-h: 376px;
    --app-crop-scale: 1.6;
    --app-slide-gap: 35px;
    --app-glow-pad: 70px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-slide-gap);
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--app-glow-pad) 0;
    box-sizing: content-box;
    height: var(--app-frame-h);
    overflow: visible;
  }
  .app-control-gallery .app-control-slide {
    position: relative;
    flex: 0 0 var(--app-frame-w);
    width: var(--app-frame-w);
    height: var(--app-frame-h);
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #0d0618;
  }
  .app-control-slide--violet {
    filter: drop-shadow(0 0 14px rgba(164, 73, 245, 0.7))
      drop-shadow(0 0 28px rgba(164, 73, 245, 0.28));
  }
  .app-control-slide--yellow {
    filter: drop-shadow(0 0 16px rgba(242, 182, 38, 0.45))
      drop-shadow(0 0 34px rgba(242, 182, 38, 0.18));
  }
  .app-control-slide--beige {
    filter: drop-shadow(0 0 14px rgba(227, 204, 182, 0.65))
      drop-shadow(0 0 28px rgba(227, 204, 182, 0.24));
  }
  .app-control-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /*transform: scale(var(--app-crop-scale));*/
    transform-origin: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .private {
    margin-top: 165px;
    padding: 0 15px 100px;
    text-align: center;
  }
  /* меньше свечения снизу + плавный уход в следующую секцию */
  .private::after {
    inset: -60px -8% -40px;
    background:
      radial-gradient(
        ellipse 68% 50% at 72% 28%,
        rgba(242, 182, 38, 0.26) 0%,
        rgba(242, 182, 38, 0.1) 40%,
        transparent 70%
      ),
      radial-gradient(
        ellipse 55% 42% at 22% 58%,
        rgba(242, 182, 38, 0.12) 0%,
        rgba(242, 182, 38, 0.04) 45%,
        transparent 72%
      );
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 55%,
      rgba(0, 0, 0, 0.55) 78%,
      rgba(0, 0, 0, 0.2) 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 55%,
      rgba(0, 0, 0, 0.55) 78%,
      rgba(0, 0, 0, 0.2) 90%,
      transparent 100%
    );
  }
  .private-title {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0 0 40px;
    padding-inline: 0;
    box-sizing: border-box;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 62px;
    line-height: 106%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .private-title-block {
    display: flex;
    flex-direction: column;
    width: max-content;
    max-width: 100%;
  }
  /* первый текст → левый край; второй → правый край */
  .private-title-block--left {
    align-self: flex-start;
    align-items: flex-start;
    text-align: left;
    color: var(--accent-yellow);
  }
  .private-title-block--right {
    align-self: flex-end;
    align-items: flex-end;
    text-align: right;
    margin-top: 40px;
    color: var(--white);
  }
  .private-title-line {
    display: block;
    white-space: nowrap;
  }
  .private-title-line--desk {
    display: block;
  }
  .private-title-line--mobile {
    display: none;
  }
  .private-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    margin: 0 auto 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
    transform: none;
  }
  .private-cards .private-card:nth-child(1),
  .private-cards .private-card:nth-child(2),
  .private-cards .private-card:nth-child(3) {
    order: unset;
    border-radius: 0;
    height: 250px;
    min-height: 250px;
    padding: 24px 16px;
    gap: 12px;
    box-sizing: border-box;
  }
  .private-cards .private-card:first-child {
    border-radius: 8px 0 0 8px;
  }
  .private-cards .private-card:last-child {
    border-radius: 0 8px 8px 0;
  }
  .private-card {
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .private-card h3 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0;
    color: var(--black);
    white-space: normal;
  }
  .private-icon {
    width: 95px;
    height: 100px;
    min-width: 95px;
    min-height: 100px;
    object-fit: contain;
  }
  .private-card-yellow .private-icon {
    width: 145px;
    height: 120px;
    min-width: 115px;
  }
  .private-card-purple .private-icon {
    width: 145px;
    height: 100px;
    min-width: 145px;
    min-height: 120px;
  }
  .private > .btn,
  .private-cta {
    width: auto;
    min-width: 280px;
    max-width: none;
    margin: 0 auto;
    padding-inline: 28px;
    box-sizing: border-box;
    transform: none;
    position: relative;
    z-index: 3;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
  }
  .franchise {
    display: block;
    position: relative;
    z-index: 2;
    --franchise-gallery-scale: calc(1.15 / 1.1 / 2.5 * 1.8);
    margin: calc(
        -1 * var(--gallery-2-canvas-height) *
          (1 - var(--franchise-gallery-scale)) + 40px
      )
      0 0;
    padding: 40px 15px 120px;
    overflow: visible;
    background: transparent;
    transform: translateY(-600px);
  }
  .franchise::after {
    content: '';
    position: absolute;
    left: -8%;
    right: 20%;
    top: 20%;
    bottom: -120px;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
      ellipse 75% 70% at 28% 75%,
      rgba(242, 182, 38, 0.26) 0%,
      rgba(242, 182, 38, 0.1) 40%,
      rgba(242, 182, 38, 0.03) 62%,
      transparent 82%
    );
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      #000 18%,
      #000 58%,
      rgba(0, 0, 0, 0.45) 82%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      #000 18%,
      #000 58%,
      rgba(0, 0, 0, 0.45) 82%,
      transparent 100%
    );
  }
  /* жёлтый слой spot: от середины franchise вниз к FAQ */
  .franchise::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 30%;
    width: min(1600px, 280vw);
    height: 1000px;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    background: url(../images/fifth_spot_yellow_purple.png) center 0% / 100%
      160% no-repeat;
    filter: brightness(var(--spot-fifth-yellow-brightness))
      saturate(var(--spot-fifth-yellow-saturate));
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0,
      rgba(0, 0, 0, 0.55) 8%,
      #000 18%,
      #000 62%,
      rgba(0, 0, 0, 0.45) 82%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0,
      rgba(0, 0, 0, 0.55) 8%,
      #000 18%,
      #000 62%,
      rgba(0, 0, 0, 0.45) 82%,
      transparent 100%
    );
  }
  .franchise-media {
    position: absolute;
    left: calc(-80px - (100% - 581px));
    top: 47%;
    width: 100%;
    height: auto;
    transform: translateY(-60%) scale(1.2);
    pointer-events: none;
    z-index: 0;
  }
  .franchise-media picture,
  .franchise-mask {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: left center;

    user-select: none;
    -webkit-user-drag: none;
  }
  .franchise-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transform: none;
  }
  .franchise-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: max-content;
    max-width: 52%;
    margin-left: auto;
    padding: 40px 0;
    text-align: left;
    margin-top: 160px;
    margin-right: 20px;
  }
  .franchise-title {
    margin: 0;
    width: auto;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 62px;
    line-height: 106%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: left;
    color: var(--white);
  }
  .franchise-title-accent {
    display: block;
    color: var(--accent-yellow);
  }
  .franchise-title-rest {
    display: block;
    color: var(--white);
  }
  .franchise-text {
    margin: 28px 0 0;
    width: max-content;
    max-width: none;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    text-align: left;
    color: var(--white);
  }
  .franchise-text--mobile {
    display: none;
  }
  .franchise-text--tablet {
    display: none;
  }
  .franchise-text--desktop {
    display: none;
  }
  .franchise-text--md {
    display: block;
  }
  .franchise-cta,
  .franchise-cta.btn.btn-purple {
    align-self: flex-start;
    width: auto;
    margin-top: 55px;
    margin-left: 0;
    margin-right: 0;
    padding: 14px 50px;
    box-sizing: border-box;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);

    text-decoration: none;
  }
  .faq {
    position: relative;
    transform: translateY(-605px);
    padding: 0 15px;
    overflow: visible;
  }
  /* общий spot-fifth на 768 не тянем на весь wrap — полоса на franchise/faq */
  .spot-fifth-wrap::after,
  .spot-fifth-wrap::before {
    opacity: 0;
  }
  /* мягкое фиолетовое: выше, плавный низ, заходит под жёлтое franchise */
  .faq::before {
    content: '';
    position: absolute;
    left: -25%;
    right: -15%;
    top: -40%;
    bottom: 18%;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(
        ellipse 90% 70% at 28% 42%,
        rgba(164, 73, 245, 0.4) 0%,
        rgba(120, 40, 200, 0.22) 34%,
        rgba(164, 73, 245, 0.08) 56%,
        transparent 74%
      ),
      radial-gradient(
        ellipse 80% 55% at 40% 68%,
        rgba(164, 73, 245, 0.28) 0%,
        rgba(164, 73, 245, 0.1) 40%,
        transparent 70%
      );
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 12%,
      #000 28%,
      #000 58%,
      rgba(0, 0, 0, 0.45) 78%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 12%,
      #000 28%,
      #000 58%,
      rgba(0, 0, 0, 0.45) 78%,
      transparent 100%
    );
  }
  .faq-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
    width: 100%;
    max-width: none;
  }
  .faq-heading {
    margin: 0;
    padding-top: 0;
    width: max-content;
    max-width: 100%;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 62px;
    line-height: 106%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: left;
    color: var(--white);
    justify-self: start;
    margin-top: -20px;
  }
  .faq-list {
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-self: stretch;
    transform: none;
    margin-top: 170px;
  }
  .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    color: var(--white);
  }
  .faq-item p {
    margin: 0 0 28px;
    padding-right: 56px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--white-op-800);
  }
  .club-contacts {
    display: block;
    position: relative;
    z-index: 1;
    margin: 138px 0 0;
    padding: 0 15px 80px;
    overflow: visible;
    background: transparent;
    transform: translateY(-605px);
  }
  .club-contacts-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
  }
  .club-contacts-title {
    margin: 0 0 48px;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 62px;
    line-height: 106%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
  }
  .club-contacts-title-line {
    display: block;
  }
  .club-contacts-title-line--mobile {
    display: none;
  }
  .club-contacts-title-line--tablet {
    display: block;
    color: var(--accent-yellow);
  }
  .club-contacts-list {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 33px;
    row-gap: 50px;
    justify-content: start;
  }
  .club-contacts-item {
    min-width: 0;
  }
  .club-contacts-city {
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 36px;
    line-height: 117%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    white-space: nowrap;
  }
  .club-contacts-phone {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--white-op-800);
    text-decoration: none;
    white-space: nowrap;
  }
  .club-contacts-socials {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
  }
  .club-contacts-social {
    display: flex;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  .club-contacts-social img {
    display: block;
    width: 22px;
    height: 22px;
  }
  .club-contacts-nav {
    display: flex;
    align-items: center;
    gap: 55px;
    margin-top: 60px;
  }
  .club-contacts-nav[hidden] {
    display: none;
  }
  .club-contacts-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--purple);
    box-shadow: var(--purple-glow);
    cursor: pointer;
    color: var(--white);
  }
  .club-contacts-nav-btn:disabled,
  .club-contacts-nav-btn[aria-disabled='true'] {
    opacity: 0.45;
    cursor: default;
  }
  .club-contacts-nav-btn[hidden] {
    display: none;
  }
  .club-contacts-nav-btn img {
    display: block;
    width: 12px;
    height: 22px;
  }
  .cta-final {
    margin-top: 18px;
    margin-bottom: -605px;
    transform: translateY(-605px);
    padding: 0 15px;
    padding-bottom: 0;
    text-align: center;
  }
  .cta-inner {
    width: 100%;
    max-width: none;
  }
  .cta-title {
    margin-top: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 62px;
    line-height: 106%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    color: var(--white);
  }
  .cta-title-stack {
    text-align: center;
    margin-inline: auto;
  }
  .cta-title-stack {
    max-width: 720px;
  }
  .cta-title-line--wide {
    display: inline;
  }
  .cta-title-line--narrow {
    display: none;
  }
  .cta-inner .section-title {
    margin-bottom: 28px;
  }
  .cta-subtitle {
    margin: 0 0 40px;
    padding-inline: 0;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    text-align: center;
    color: var(--white);
  }
  .cta-subtitle-line--wide {
    display: block;
  }
  .cta-subtitle-line--narrow {
    display: none;
  }
  .cta-inner .btn,
  .cta-inner .btn.btn-purple {
    margin-top: 50px;
    padding: 14px 50px;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    transform: none;
  }
  .watermark-move-img,
  .watermark-move picture > img {
    transform: scaleY(1.5);
    transform-origin: center bottom;
  }
  .cta-raccoon {
    max-width: 438px;
    margin-top: 80px;
    margin-bottom: 0;
    --cta-raccoon-shift-x: 43px;
    --cta-raccoon-shift-y: -5px;
  }
  .cta-raccoon-img,
  .cta-raccoon img {
    width: 438px;
    height: 447px;
    max-width: 438px;
    max-height: 447px;
    margin-top: -24px;
    object-fit: contain;
  }
  .site-footer {
    margin-top: 24px;
    margin-bottom: 0;
    padding-inline: 15px;
    padding-bottom: 20px;
    transform: none;
  }
  .site-footer .footer-inner {
    margin-top: 0;
  }
}

/* Footer final layout */
.site-footer {
  padding: 0 60px 35px;
}
.footer-divider {
  margin-bottom: 35px;
}
.site-footer .footer-inner {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 35px;
  text-align: left;
}
.site-footer .footer-top,
.site-footer .footer-bottom {
  display: flex;
  width: 100%;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.site-footer .footer-logo {
  margin-top: 0;
  transform: none;
  justify-self: auto;
}
.site-footer .footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.site-footer .footer-contact-label,
.site-footer .footer-legal-label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-menu-fz);
  font-weight: 500;
  line-height: 1.3;
  color: var(--white);
}
.site-footer .footer-phone,
.site-footer .footer-docs a,
.site-footer .footer-legal-value {
  font-family: var(--font-ui);
  font-size: var(--text-menu-fz);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.8);
}
.site-footer .footer-docs {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 48px;
  max-width: none;
}
.site-footer .footer-docs a {
  padding: 0;
}
.site-footer .footer-legal {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 40px;
  max-width: none;
}
.site-footer .footer-legal-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

@media (min-width: 1441px) {
  .site-footer {
    padding-inline: 120px;
  }
}

@media (min-width: 1441px) and (max-width: 1630px) {
  .features-list {
    left: 330px;
  }
}

@media (min-width: 1441px) and (max-width: 1550px) {
  .experience-inner {
    transform: translateX(-95px) translateY(-25px);
  }
  .experience-points {
    transform: translateX(-140px);
  }
}

@media (min-width: 1025px) and (max-width: 1440px) {
  .site-footer {
    padding-inline: 60px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .site-footer {
    padding-inline: 30px;
  }
  .site-footer .footer-bottom {
    flex-direction: column;
    gap: 20px;
  }
  .site-footer .footer-docs,
  .site-footer .footer-legal {
    max-width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .site-footer {
    padding-inline: 15px;
  }
  .site-footer .footer-top,
  .site-footer .footer-bottom {
    flex-direction: column;
    gap: 24px;
  }
  .site-footer .footer-contact,
  .site-footer .footer-legal,
  .site-footer .footer-legal-item {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
  .site-footer .footer-docs,
  .site-footer .footer-legal {
    max-width: 100%;
    flex-wrap: wrap;
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding: 0px 15px 15px;
    margin-top: 0;
    margin-bottom: -275px;
    transform: translateY(-275px);
  }
  .site-footer .footer-inner {
    margin-top: 0;
  }
  .site-footer .footer-logo-img {
    width: 240px;
  }
  .site-footer .footer-contact-label,
  .site-footer .footer-phone,
  .site-footer .footer-legal-label,
  .site-footer .footer-legal-value {
    font-size: 16px;
  }
  .site-footer .footer-docs a {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white-op-800);
  }
  .site-footer .footer-inner {
    align-items: flex-start;
    gap: 45px;
    text-align: left;
  }
  .site-footer .footer-top {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 45px;
  }
  .site-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
  }
  .site-footer .footer-logo,
  .site-footer .footer-contact,
  .site-footer .footer-docs,
  .site-footer .footer-legal,
  .site-footer .footer-legal-item {
    align-self: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    max-width: 100%;
  }
  .site-footer .footer-legal {
    order: -1;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 17px;
  }
  .site-footer .footer-docs {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 15px;
  }

  .footer-divider {
    margin-bottom: 10px;
  }
}

@media (min-width: 601px) and (max-width: 768px) {
  html,
  body {
    min-height: 0;
  }

  html {
    overflow-y: auto;
  }

  body {
    overflow-y: clip;
  }

  .site-footer {
    margin-top: -5px;
    min-height: 0;
    padding: 0 15px 35px;
    background: transparent;
  }

  .site-footer::before {
    height: min(520px, 42vw);
    min-height: 0;
    background-size: 100% 100%;
  }

  .site-footer .footer-divider {
    margin-bottom: 12px;
  }

  .site-footer .footer-inner {
    align-items: stretch;
    gap: 42px;
  }

  .site-footer .footer-top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
  }

  .site-footer .footer-logo-img {
    width: 240px;
    height: 60px;
  }

  .site-footer .footer-contact {
    align-items: flex-end;
    justify-content: flex-start;
    text-align: right;
  }

  .site-footer .footer-contact-label {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    text-align: right;
    color: var(--white);
  }

  .site-footer .footer-phone {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    text-align: right;
    color: var(--white-op-800);
  }

  .site-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 30px;
  }

  .site-footer .footer-docs {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: -5px;
  }

  .site-footer .footer-docs br {
    display: none;
  }

  .site-footer .footer-docs a {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white-op-800);
  }

  .site-footer .footer-legal {
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 30px;
  }

  .site-footer .footer-legal-item {
    align-items: flex-start;
    text-align: left;
  }

  .site-footer .footer-legal-label {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: var(--white);
  }

  .site-footer .footer-legal-value {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--white-op-800);
  }
}

/*
 * Tablet canvas (769–1024)
 *
 * The desktop rules above use translated sections to compose the 1440px
 * layout. Those translations accumulate at tablet widths and make adjacent
 * screens overlap. Keep the tablet composition in normal document flow and
 * use the 1024px artboard dimensions from the design.
 */

@media (min-width: 769px) and (max-width: 1024px) {
  .intro-stack {
    overflow: visible;
  }

  .site-header {
    display: flex;
    min-height: 72px;
    margin: 0;
    padding: 16px;
    align-items: flex-start;
  }

  .site-nav,
  .header-social {
    display: none;
  }

  .site-logo {
    flex: 0 0 auto;
  }

  .site-logo-img {
    width: 153px;
    height: 40px;
  }

  .site-menu-btn {
    position: absolute;
    top: 16px;
    left: 50%;
    display: flex;

    transform: translateX(-50%);
  }

  .header-callback {
    margin-left: auto;
    margin-top: 0;
  }
  .header-callback {
    margin-top: 5px;
  }
  .header-callback__phone {
    margin-top: 0px;
  }

  .header-callback__action {
    font-size: 16px;
    line-height: 22px;
  }

  .header-callback__meta {
    position: absolute;
    top: 46px;
    right: 0;
    margin: 0;
  }

  .hero {
    margin: 100px 0 0;
    padding: 0 16px;
  }

  .hero-inner {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .hero-title {
    width: 912px;
    max-width: 100%;
    font-size: 62px;
    line-height: 66px;
    letter-spacing: 0.02em;
    transform: none;
  }

  .hero-title-line--medium,
  .hero-title-line--compact,
  .hero-title-line--narrow,
  .hero-title-line--tablet {
    display: none;
  }

  .hero-title-line--wide {
    display: block;
  }

  .hero-lead {
    width: 414px;
    max-width: 100%;
    margin-top: 28px;
    font-size: 20px;
    line-height: 28px;
  }

  .hero-lead-line--narrow {
    display: none;
  }

  .hero-lead-line--wide {
    display: inline;
  }

  .hero-inner .btn {
    min-width: auto;
    margin-top: 52px;
    padding: 12px 48px;
    font-size: 16px;
  }

  .about {
    display: block;
    position: relative;
    z-index: 4;
    height: 874px;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  .about-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    height: 100%;
  }

  .about-media {
    position: absolute;
    top: 140px;
    left: 16px;
    width: calc(100% - 32px);
    max-width: none;
    height: 526px;
    margin: 0;
    overflow: hidden;
    border-radius: 56px;
    box-shadow:
      0 0 28px rgba(164, 73, 245, 0.8),
      0 0 142px 28px rgba(164, 73, 245, 0.62);
    z-index: 2;
  }

  .about-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
  }

  .about-title {
    position: absolute;
    top: 428px;
    left: 56px;
    z-index: 3;
    width: 600px;
    max-width: none;
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 46px;
    line-height: 48px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
    transform: none;
  }

  .about-title-line {
    display: block;
    white-space: nowrap;
  }

  .about-title-line--gold {
    color: var(--gold);
    text-shadow: none;
  }

  .about-stats {
    position: absolute;
    top: 712px;
    left: 56px;
    right: 56px;
    display: grid;
    grid-template-columns: 456px minmax(0, 1fr);
    gap: 61px;
    margin: 0;
  }

  .about-stat-title {
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 36px;
    line-height: 24px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    white-space: nowrap;
    white-space: nowrap;
    margin-top: 5px;
  }

  .about-stat-text {
    margin-top: 40px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--white-op-800);
  }

  .experience {
    height: 707px;
    margin: 0;
    padding: 0;
    overflow: clip;
  }

  .experience-inner {
    height: 645px;
    min-height: 0;
  }

  .watermark-experience {
    top: 39px;
    width: 1106px;
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
  }

  .experience-title {
    top: 160px;
    left: 56px;
    right: auto;
    width: 442px;
    font-size: 62px;
    line-height: 66px;
    align-items: flex-end;
    text-align: right;
  }

  .experience-visual {
    top: 85px;
    width: 539px;
    height: 568px;
    transform: translateX(-50%);
  }

  .experience-copy {
    top: 465px;
    left: 612px;
    width: 356px;
    max-width: none;
    font-size: 20px;
    line-height: 28px;
  }

  .experience-copy-line--narrow,
  .experience-copy-line--mobile {
    display: none;
  }

  .experience-copy-line--wide {
    display: inline;
    white-space: normal;
  }

  .experience-points {
    position: absolute;
    top: 645px;
    left: 56px;
    right: 56px;
    width: auto;
    margin: 0;
    grid-template-columns: repeat(4, max-content);
    gap: 0;
    justify-content: space-between;
    transform: none;
  }

  .experience-point-line--wide,
  .experience-point-line--narrow,
  .experience-point-line--mobile,
  .experience-point-line--md {
    display: none;
  }

  .experience-point-line--tablet {
    display: block;
  }

  .experience-points li {
    font-size: 16px;
    line-height: 24px;
  }

  .story-games-wrap {
    margin: 0;
  }

  .gallery.gallery-1,
  .features,
  .story-games-wrap > .rules,
  .audience-inner,
  .private,
  .gallery-2,
  .franchise,
  .faq,
  .club-contacts,
  .cta-final,
  .site-footer {
    transform: none;
  }

  .gallery.gallery-1 {
    height: 663px;
    margin: 0;
    padding: 0;
    overflow: clip;
  }

  .gallery-1 .gallery-collage-shell {
    margin-top: 0;
    transform: translateX(-50%) scale(0.9);
    transform-origin: center top;
  }

  .features {
    height: 745px;
    min-height: 745px;
    margin: 0;
    padding: 0;
    overflow: clip;
  }

  .features-inner {
    width: 100%;
    min-height: 745px;
    height: 745px;
  }

  .features-list {
    position: absolute;
    inset: 0;
    width: 100%;
    font-size: 46px;
    line-height: 48px;
    transform: none;
    margin-top: -40px;
    margin-left: 10px;
  }

  .feature-line {
    position: absolute;
    width: max-content;
    margin: 0;
    flex-wrap: nowrap;
    transform: none;
  }

  .feature-line-1 {
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
  }

  .feature-line-2 {
    top: 191px;
    left: 50%;
    transform: translateX(-31%);
  }

  .feature-line-3 {
    top: 242px;
    left: 50%;
    transform: translateX(-39%);
  }

  .feature-line-4 {
    top: 293px;
    left: 50%;
    transform: translateX(-48%);
  }

  .feature-line-5 {
    top: 344px;
    left: 50%;
    transform: translateX(-61%);
  }

  .feature-line-6 {
    top: 395px;
    left: 50%;
    transform: translateX(-36%);
  }

  .features-building {
    top: -163px;
    height: 878px;
    margin: 0;
    opacity: 0.68;
    transform: translateX(-50%) scaleX(1.1);
    transform-origin: center top;
  }

  .story-games-wrap > .rules {
    height: 805px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    z-index: 7;
    background: transparent;
  }

  .rules-inner {
    position: relative;
    width: 100%;
    max-width: none;
    height: 805px;
    margin: 0;
    display: block;
    margin-top: -203px;
  }

  .rules-title {
    position: absolute;
    top: 0;
    left: 56px;
    margin: 0;
    font-size: 62px;
    line-height: 66px;
  }

  .rules-lead {
    position: absolute;
    top: 4px;
    left: 512px;
    width: 456px;
    margin: 0;
    font-size: 36px;
    line-height: 42px;
  }

  .rules-lead-line--default {
    display: none;
  }

  .rules-lead-line--tablet {
    display: inline;
    white-space: normal;
  }

  .rules-text {
    position: absolute;
    top: 158px;
    left: 512px;
    width: 456px;
    margin: 0;
    font-size: 16px;
    line-height: 24px;
  }

  .rules-media {
    position: absolute;
    top: 296px;
    left: 16px;
    width: calc(100% - 32px);
    max-width: none;
    height: 510px;
    margin: 0;
    border-radius: 56px;
  }

  .rules-media .rules-video-facade,
  .rules-media .rules-video-poster {
    border-radius: inherit;
  }

  .upcoming {
    display: none;
  }

  .audience {
    height: 738px;
    min-height: 0;
    margin: -150px 0 0;
    padding: 0;

    margin-top: -40px;
  }

  .audience-inner {
    width: 100%;
    max-width: none;
    min-height: 0;
    height: 738px;
    margin: 0;
  }

  .audience-photo {
    top: 120px;
    left: 32px;
    bottom: auto;
    width: 326px;
    max-width: none;
    transform: none;
  }

  .audience-copy .section-title {
    top: 160px;
    left: 224px;
    width: 540px;
    margin: 0;
    font-size: 62px;
    line-height: 66px;
    transform: none;
  }

  .audience-list {
    top: 370px;
    left: 512px;
    width: 456px;
    margin: 0;
    grid-template-columns: repeat(2, 205px);
    column-gap: 46px;
    row-gap: 42px;
    transform: none;
  }

  .audience-item {
    padding-bottom: 12px;
    font-size: 16px;
    line-height: 24px;
  }

  .audience-cta {
    top: 692px;
    left: 512px;
    margin: 0;
    transform: none;
    font-size: 16px;
    padding-inline: 45px;
  }

  .audience-spot-purple {
    transform: translate(0, -2%) scale(1.2);
  }

  .app-control {
    display: block;
    min-height: 1134px;
    margin: 0;
    padding: 48px 0 56px;
    transform: none;
    background: linear-gradient(
      180deg,
      transparent 0,
      transparent 120px,
      rgba(20, 20, 20, 0.55) 180px,
      var(--bg) 240px,
      var(--bg) 100%
    );
    margin-top: 85px;
  }

  .app-control-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .app-control-title {
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 62px;
    line-height: 106%;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    color: var(--accent-yellow);
  }

  .app-control-title-line--default {
    display: none;
  }

  .app-control-title-line--tablet,
  .app-control-title-line--tablet.app-control-title-line--white {
    display: block;
  }

  .app-control-title-accent {
    color: var(--accent-yellow);
  }

  .app-control-title-white,
  .app-control-title-line--white {
    color: var(--white);
  }

  .app-control-tabs {
    margin-top: 50px;
  }

  .app-control-panel {
    margin-top: 65px;
  }

  .app-control-carousel-shell {
    margin-top: 80px;
  }

  .app-control-tabs {
    display: flex;
    justify-content: center;
    gap: 46px;
  }

  .app-control-tab {
    appearance: none;
    margin: 0;
    padding: 0 0 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: var(--second-family);
    font-size: 36px;
    font-weight: 500;
    line-height: 42px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    cursor: pointer;
  }

  .app-control-tab.is-active {
    border-bottom-color: var(--accent-violet);
    color: var(--accent-violet);
  }

  .app-control-text {
    position: relative;
    z-index: 1;
    width: 798px;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    padding: 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: var(--white-op-800);
    margin-top: -20px;
  }

  .app-control-carousel-shell {
    position: relative;
    z-index: 0;
    overflow: visible;
    isolation: isolate;
  }

  .app-control-carousel-shell::before {
    content: '';
    position: absolute;
    top: -100px;
    bottom: -100px;
    left: 50%;
    z-index: 0;
    width: min(220%, 1240px);
    background: radial-gradient(
      ellipse 90% 68% at 50% 48%,
      rgba(242, 182, 38, 0.32) 0%,
      rgba(242, 182, 38, 0.2) 38%,
      rgba(242, 182, 38, 0.08) 65%,
      transparent 92%
    );
    transform: translateX(-50%);
    filter: blur(28px);
    pointer-events: none;
  }

  .app-control-carousel {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 60px;
    width: 100%;
    height: 568px;
    margin: -70px 0 0;
    padding: 70px 0;
    box-sizing: content-box;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc((100% - 824px) / 2);
    scrollbar-width: none;
  }

  .app-control-carousel::-webkit-scrollbar {
    display: none;
  }

  .app-control-gallery {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    width: max-content;
    max-width: 100%;
    height: 570px;
    margin: 0 auto;
    padding: 70px 0;
    box-sizing: content-box;
    overflow: visible;
  }

  .app-control-carousel .app-control-slide {
    flex: 0 0 824px;
    width: 824px;
    height: 568px;
    margin: 0;
    border-radius: 41px;
    overflow: hidden;
    scroll-snap-align: center;
    background: #0d0618;
  }

  .app-control-gallery .app-control-slide {
    flex: 0 0 266px;
    width: 266px;
    height: 570px;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #0d0618;
  }

  .app-control-slide img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    /*transform: scale(1.42);*/
    transform-origin: center;
  }

  .app-control-gallery .app-control-slide img {
    /*transform: scale(1.6);*/
  }

  .app-control-slide--violet {
    filter: drop-shadow(0 0 14px rgba(164, 73, 245, 0.7))
      drop-shadow(0 0 28px rgba(164, 73, 245, 0.28));
  }

  .app-control-slide--yellow {
    filter: drop-shadow(0 0 16px rgba(242, 182, 38, 0.45))
      drop-shadow(0 0 34px rgba(242, 182, 38, 0.18));
  }

  .app-control-slide--beige {
    filter: drop-shadow(0 0 14px rgba(227, 204, 182, 0.65))
      drop-shadow(0 0 28px rgba(227, 204, 182, 0.24));
  }

  .private {
    min-height: 960px;
    margin: 0;
    padding: 15px 56px 0;
    overflow: clip;
  }

  .private::after {
    display: none;
  }

  .private::before {
    top: -80px;
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0,
      rgba(0, 0, 0, 0.18) 4%,
      rgba(0, 0, 0, 0.62) 8%,
      #000 12%,
      #000 78%,
      rgba(0, 0, 0, 0.62) 97%,
      rgba(0, 0, 0, 0.38) 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0,
      rgba(0, 0, 0, 0.18) 4%,
      rgba(0, 0, 0, 0.62) 8%,
      #000 12%,
      #000 78%,
      rgba(0, 0, 0, 0.62) 97%,
      rgba(0, 0, 0, 0.38) 100%
    );
  }

  .private-title {
    position: relative;
    min-height: 420px;
    margin: 0;
    font-size: 62px;
    line-height: 66px;
  }

  .private-title-block--left {
    position: absolute;
    top: 0;
    left: 0;
  }

  .private-title-block--right {
    position: absolute;
    top: 234px;
    right: 0;
    margin: 0;
  }

  .private-cards {
    width: 912px;
    max-width: 100%;
    margin: 48px auto 40px;
  }

  .private-cards .private-card:nth-child(1),
  .private-cards .private-card:nth-child(2),
  .private-cards .private-card:nth-child(3) {
    height: 255px;
    min-height: 255px;
    padding: 38px 48px;
  }

  .private-card h3 {
    white-space: nowrap;
    font-size: 16px;
  }

  .private-cards .private-card:nth-child(2) h3,
  .private-cards .private-card:nth-child(3) h3 {
    margin-top: -20px;
  }

  .private-cards .private-card:nth-child(1) h3 {
    margin-top: 10px;
  }

  .private-cards .private-card:nth-child(1) .private-icon {
    width: 120px;
    height: 96px;
    min-width: 120px;
    min-height: 96px;
  }

  .private-cards .private-card:nth-child(2) .private-icon,
  .private-cards .private-card:nth-child(3) .private-icon {
    transform: translateY(-15px);
  }

  .private > .btn,
  .private-cta {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    display: inline-flex;
    width: auto;
    min-width: 280px;
    margin: 0 auto;
    padding-inline: 28px;
    z-index: 3;
  }

  .gallery-2 {
    height: 741px;
    margin: 0;
    padding: 0;
    overflow: visible;
    margin-top: 50px;
  }

  .gallery-2 .gallery-collage-shell-2 {
    transform: translateX(-50%) scale(0.9);
    transform-origin: center top;
  }

  .spot-fifth-wrap {
    --spot-fifth-bg-offset: 105px;
  }

  .spot-fifth-wrap::before {
    opacity: 0;
  }

  .franchise {
    display: block;
    position: relative;
    z-index: 1;
    min-height: 452px;
    margin: -205px 0 0;
    padding: 0 56px;
    overflow: visible;
  }

  .franchise-media {
    position: absolute;
    z-index: 0;
    top: -186px;
    left: calc(-80px - (100% - 794px));
    width: 100%;
    height: auto;
    transform: none;
  }

  .franchise-media picture,
  .franchise-mask {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: left center;
    margin-top: 20px;
  }

  .franchise-content {
    position: absolute;
    top: 44px;
    right: 56px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 456px;
    max-width: none;
    margin: 0;
    padding: 0;
    margin-top: 20px;
  }

  .franchise-title {
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 62px;
    line-height: 66px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
  }

  .franchise-title-accent,
  .franchise-title-rest {
    display: block;
    white-space: nowrap;
  }

  .franchise-title br {
    display: none;
  }

  .franchise-title-accent br {
    display: block;
  }

  .franchise-title-accent {
    color: var(--accent-yellow);
  }

  .franchise-title-rest {
    color: var(--white);
  }

  .franchise-text {
    width: 456px;
    margin-top: 28px;
    font-family: var(--font-family);
    font-weight: 400;
    color: var(--white);
    font-size: 16px;
    line-height: 24px;
    margin-top: 40px;
  }

  .franchise-text--mobile {
    display: none;
  }

  .franchise-text--md {
    display: none;
  }

  .franchise-text--tablet {
    display: inline;
    font-size: 20px;
  }

  .franchise-text--desktop {
    display: none;
  }

  .franchise-cta {
    margin-top: 42px;
    font-size: 16px;
    padding-inline: 45px;
  }

  .faq {
    height: 790px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    z-index: 2;
  }

  .spot-fifth-wrap::after {
    opacity: 0;
  }

  .faq::before {
    content: '';
    position: absolute;
    top: -400px;
    left: -20%;
    width: 140%;
    height: 1620px;
    background: url(../images/fifth_spot_yellow_purple.png) center / 100% 100%
      no-repeat;
    filter: brightness(var(--spot-fifth-purple-brightness))
      saturate(var(--spot-fifth-purple-saturate));
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0,
      rgba(0, 0, 0, 0.65) 18%,
      #000 42%,
      rgba(0, 0, 0, 0.6) 78%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0,
      rgba(0, 0, 0, 0.65) 18%,
      #000 42%,
      rgba(0, 0, 0, 0.6) 78%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 0;
  }

  .faq-inner {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    margin-top: 20px;
  }

  .faq-heading {
    position: absolute;
    top: 140px;
    left: 56px;
    margin: 0;
    padding: 0;
    font-size: 62px;
    line-height: 66px;
  }

  .faq-list {
    position: absolute;
    top: 140px;
    left: 512px;
    width: 456px;
    max-width: none;
    margin: 0;
  }

  .faq-item summary {
    min-height: 66px;
    padding: 0 0 36px;
    font-size: 20px;
    line-height: 28px;
  }

  .faq-item[open] summary {
    padding-bottom: 8px;
  }

  .faq-item {
    margin-bottom: 53px;
  }

  .faq-item p {
    margin-bottom: 28px;
    padding-right: 0;
    font-size: 16px;
    line-height: 24px;
  }

  .club-contacts {
    display: block;
    min-height: 856px;
    margin: 0 0 -150px;
    padding: 140px 56px 0;
    overflow: visible;
    z-index: 2;
    background: linear-gradient(
      180deg,
      transparent 0,
      rgba(20, 20, 20, 0.7) 90px,
      var(--bg) 230px
    );
  }

  .club-contacts-inner {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .club-contacts-title {
    margin: 0 0 120px;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 62px;
    line-height: 66px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
  }

  .club-contacts-title-line {
    display: block;
  }

  .club-contacts-title-line--mobile {
    display: none;
  }

  .club-contacts-title-line--tablet {
    display: block;
  }

  .club-contacts-title-line--gold {
    color: var(--accent-yellow);
  }

  .club-contacts-list {
    display: grid;
    width: max-content;
    max-width: 100%;
    grid-template-columns: repeat(3, max-content);
    column-gap: 75px;
    row-gap: 55px;
    margin-top: -60px;
  }

  .club-contacts-city {
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 36px;
    line-height: 42px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    white-space: nowrap;
  }

  .club-contacts-phone {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
  }

  .club-contacts-socials {
    gap: 10px;
    margin-top: 12px;
    display: flex;
  }

  .club-contacts-social,
  .club-contacts-social img {
    width: 22px;
    height: 22px;
  }

  .club-contacts-nav {
    gap: 45px;
    margin-top: 56px;
    display: flex;
  }

  .club-contacts-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--purple);
    box-shadow: var(--purple-glow);
    color: var(--white);
  }

  .club-contacts-nav-btn img {
    width: 12px;
    height: 22px;
  }

  .cta-final {
    height: 953px;
    min-height: 0;
    margin: 0;
    padding: 140px 0 0;
    overflow: clip;
    margin-top: 150px;
  }

  .watermark-move {
    top: 350px;
    bottom: auto;
    width: 1106px;
    max-width: none;
    transform: translateX(-50%);
  }

  .cta-inner {
    width: 100%;
    max-width: none;
  }

  .cta-title {
    margin: 0;
    font-size: 62px;
    line-height: 66px;
    transform: none;
  }

  .cta-subtitle {
    margin: 28px 0 52px;
    padding: 0;
    font-size: 20px;
    line-height: 28px;
    transform: none;
    margin-top: -10px;
  }

  .cta-inner .btn {
    margin: 0;
    padding: 12px 65px;
    transform: none;
    font-size: 16px;
  }

  .cta-raccoon {
    position: absolute;
    top: 366px;
    left: calc(50% + 67px);
    width: 438px;
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
  }

  .cta-raccoon-img {
    width: 438px;
    height: 447px;
    margin: 0;
  }

  .site-footer {
    min-height: 259px;
    margin: 0;
    padding: 0px 17px 35px;
  }

  .footer-divider {
    display: block;
    height: 2px;
    margin-bottom: 35px;
  }

  .site-footer .footer-inner {
    gap: 70px;
  }

  .site-footer .footer-top,
  .site-footer .footer-bottom {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 5px;
  }

  .site-footer .footer-docs {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .site-footer .footer-docs a {
    font-size: 17px;
    line-height: 20px;
    white-space: nowrap;
  }

  .site-footer .footer-docs br {
    display: none;
  }

  .site-footer .footer-legal {
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 20px;
    margin-top: 10px;
  }

  .site-footer .footer-legal-item {
    text-align: center;
  }

  .site-footer .footer-contact-label,
  .site-footer .footer-phone,
  .site-footer .footer-legal-label,
  .site-footer .footer-legal-value {
    font-size: 16px;
    line-height: 20px;
  }

  .site-footer .footer-legal-value {
    white-space: nowrap;
  }

  .site-footer .footer-logo-img {
    width: 240px;
    height: 60px;
  }
}

/*
 * 1440px canvas
 *
 * This range is a separate artboard, not a scaled 1024px layout. Keep its
 * sections in normal flow so the coordinates below match the supplied design.
 */
@media (min-width: 1025px) {
  :root {
    --white: #fff;
    --gold: #f2b626;
    --container: 1200px;
  }

  body {
    overflow-x: clip;
  }

  main,
  .intro-stack,
  .story-games-wrap,
  .spot-fifth-wrap {
    width: 100vw;
  }

  .intro-stack {
    height: 2500px;
    overflow: visible;
  }

  .intro-stack::before,
  .intro-stack::after {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    pointer-events: none;
    z-index: 0;
    background: center / 100% 100% no-repeat
      url(../images/second_spot_yellow_purple_1920.png);
    transform: translateX(-50%);
  }

  .intro-stack::before {
    top: 948px;
    width: 1956px;
    height: 2037px;
    opacity: 0.92;
  }

  .intro-stack::after {
    top: 857px;
    width: 2036px;
    height: 1516px;
    opacity: 0.78;
    filter: hue-rotate(12deg) saturate(1.08);
  }

  .intro-stack-glow {
    bottom: auto;
    mix-blend-mode: normal;
    opacity: 1;
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .intro-stack-glow-gold {
    width: 1012px;
    height: 1378px;
  }

  .intro-stack-glow-purple {
    width: 1140px;
    height: 1615px;
    background-position: right top;
  }

  /* Header and hero */
  .site-header {
    z-index: 100;
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: 138px;
    margin: 0;
    padding-block: 40px;
    padding-inline: 60px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 46px;
    overflow: visible;
  }

  .site-header::before {
    height: 210px;
  }

  .site-logo,
  .site-logo-img {
    width: 240px;
    height: 58px;
    flex: 0 0 240px;
  }

  .site-nav {
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    margin: 0;
    padding-top: 12px;
    transform: none;
  }

  .site-nav a {
    padding: 0 4px;
    white-space: nowrap;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.1em;
  }

  .header-callback {
    flex: 0 0 auto;
    margin-top: 2px;
  }

  .header-callback__meta {
    top: calc(100% + 20px);
  }

  .header-callback__phone {
    margin-top: 0;
  }
  .header-callback__action {
    margin-top: 5px;
  }

  .hero {
    display: block;
    width: 100vw;
    min-height: 0;
    padding: 100px 0 0;
    overflow: visible;
  }

  .hero-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    margin-top: -10px;
  }

  .hero-title {
    width: 1200px;
    max-width: none;
    margin: 0;
    font-size: 78px;
    line-height: 80px;
    letter-spacing: 0.02em;
    transform: none;
    text-shadow: none;
  }

  .hero-title-line--compact,
  .hero-title-line--narrow,
  .hero-title-line--tablet {
    display: none;
  }

  .hero-title-line--wide {
    display: block;
    white-space: nowrap;
  }

  .hero-title-line--medium {
    display: none;
  }

  .hero-lead {
    width: 647px;
    max-width: none;
    margin-top: 36px;
    font-size: 24px;
    line-height: 34px;
  }

  .hero-lead-line--wide {
    display: block;
    white-space: nowrap;
  }

  .hero-lead-line--narrow {
    display: none;
  }

  .hero-inner .btn {
    min-width: 0;
    margin-top: 64px;
    padding: 14px 60px;
    font-size: 18px;
    line-height: 24px;
  }

  /* Intro video */
  .about {
    display: block;
    position: relative;
    z-index: 4;
    width: 100vw;
    height: 1062px;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    margin-top: 25px;
  }

  .about-inner {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .about-media {
    position: absolute;
    top: 200px;
    left: 50%;
    width: 1200px;
    max-width: none;
    height: 636px;
    margin: 0;
    overflow: hidden;
    border-radius: 56px;
    box-shadow:
      0 0 28px rgba(164, 73, 245, 0.8),
      0 0 142px 28px rgba(164, 73, 245, 0.62);
    transform: translateX(-50%);
    z-index: 2;
  }

  .about-video {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center bottom;
  }

  .about-title {
    position: absolute;
    top: 556px;
    left: 210px;
    z-index: 2;
    width: 578px;
    max-width: none;
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 56px;
    line-height: 56px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: none;
    transform: none;
  }

  .about-title-line {
    display: inline;
  }

  .about-title-line--gold {
    color: var(--accent-yellow);
  }

  .about-stats {
    position: absolute;
    top: 892px;
    left: 210px;
    display: block;
    width: 1020px;
    margin: 0;
  }

  .about-stat {
    position: absolute;
    top: 0;
    width: 478px;
  }

  .about-stat:nth-child(2) {
    left: 575px;
    width: 445px;
    margin: 0;
  }

  .about-stat-title {
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 36px;
    line-height: 42px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .about-stat-text {
    margin: 24px 0 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
  }

  /* Why people return */
  .experience {
    position: relative;
    width: 100vw;
    height: 854px;
    min-height: 0;
    padding: 0;
    overflow: visible;
    z-index: 2;
  }

  .experience-inner {
    width: 100%;
    max-width: none;
    height: 854px;
    min-height: 0;
    margin: 0;
  }

  .watermark-experience {
    top: 38px;
    width: 1572px;
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
  }

  .watermark-experience-img {
    width: 1572px;
    max-width: none;
  }

  .experience-title {
    top: 220px;
    left: 120px;
    width: 554px;
    margin: 0;
    align-items: flex-end;
    font-size: 78px;
    line-height: 80px;
    text-align: right;
  }

  .experience-title-line--again {
    align-self: flex-end;
  }

  .experience-visual {
    top: 92px;
    width: 721px;
    height: 762px;
    transform: translateX(-50%);
  }

  .experience-photo {
    object-position: bottom center;
    filter: none;
  }

  .experience-copy {
    position: absolute;
    top: 566px;
    left: 891px;
    width: 458px;
    max-width: none;
    font-size: 24px;
    line-height: 34px;
    margin: 0;
    margin-top: -20px;
  }

  .experience-copy-line--wide {
    display: block;
  }

  .experience-copy-line--narrow,
  .experience-copy-line--mobile {
    display: none;
  }

  .experience-points {
    position: absolute;
    top: 788px;
    left: 120px;
    width: auto;
    max-width: none;
    margin: 0;
    display: flex;
    gap: 139px;
    transform: none;
    z-index: 4;
  }

  .experience-points li {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 26px;
  }

  .experience-point-line--wide {
    display: block;
  }

  .experience-point-line--narrow,
  .experience-point-line--mobile,
  .experience-point-line--md,
  .experience-point-line--tablet {
    display: none;
  }

  /* Gallery, feature statements, and rules */
  .story-games-wrap {
    height: 2370px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .story-games-wrap::before,
  .story-games-wrap::after {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    pointer-events: none;
    z-index: 0;
    background: center / 100% 100% no-repeat
      url(../images/second_spot_yellow_purple_1920.png);
    transform: translateX(-50%);
    -webkit-mask-image: none;
    mask-image: none;
    filter: none;
  }

  .story-games-wrap::before {
    top: 328px;
    width: 2467px;
    height: 2568px;
    opacity: 0.95;
  }

  .story-games-wrap::after {
    top: 212px;
    width: 2568px;
    height: 1913px;
    opacity: 0.82;
    filter: hue-rotate(12deg) saturate(1.08);
  }

  .gallery.gallery-1::before {
    display: none;
  }

  .gallery.gallery-1 {
    width: 100vw;
    height: 723px;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: none;
    z-index: 2;
    z-index: 3;
  }

  .gallery-1 .gallery-collage-shell {
    width: 1926px;
    height: 723px;
    margin-top: 30px;
    transform: translateX(-50%);
    transform-origin: center top;
  }

  .features {
    position: relative;
    width: 100vw;
    height: 760px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: none;
    margin-top: 25px;
    z-index: 2;
  }

  .features-inner {
    width: 100%;
    max-width: none;
    height: 760px;
    min-height: 0;
    margin: 0;
  }

  .features-list {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    font-size: 56px;
    line-height: 56px;
    transform: none;
  }

  .feature-line {
    position: absolute;
    gap: 8px;
    margin: 0;
    transform: translateX(-50%);
  }

  .feature-line small {
    font-size: 18px;
    line-height: 26px;
  }

  .feature-line-1 {
    top: 200px;
    left: 50%;
  }

  .feature-line-2 {
    top: 260px;
    left: calc(50% + 149px);
  }

  .feature-line-3 {
    top: 320px;
    left: calc(50% + 120px);
  }

  .feature-line-4 {
    top: 380px;
    left: 50%;
  }

  .feature-line-5 {
    top: 440px;
    left: calc(50% - 172px);
  }

  .feature-line-6 {
    top: 500px;
    left: calc(50% + 234px);
  }

  .features-building {
    top: -187px;
    width: 388px;
    height: 1157px;
    opacity: 0.68;
    transform: translateX(-50%);
  }

  .features-building picture,
  .features-building img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(1.12) saturate(1.08)
      drop-shadow(0 0 48px rgba(120, 24, 223, 0.52))
      drop-shadow(0 0 72px rgba(212, 168, 42, 0.28));
  }

  .story-games-wrap > .rules,
  .rules {
    position: relative;
    width: 100vw;
    height: 887px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    transform: none;
    z-index: 3;
  }

  .rules-inner {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .rules-title {
    position: absolute;
    top: 0;
    left: 120px;
    margin: 0;
    font-size: 78px;
    line-height: 80px;
  }

  .rules-lead {
    position: absolute;
    top: 4px;
    left: 720px;
    width: 600px;
    margin: 0;
    font-size: 36px;
    line-height: 42px;
  }

  .rules-lead-line--default {
    display: inline;
  }

  .rules-lead-line--tablet {
    display: none;
  }

  .rules-text {
    position: absolute;
    top: 112px;
    left: 720px;
    width: 600px;
    margin: 0;
    font-size: 18px;
    line-height: 26px;
  }

  .rules-media {
    position: absolute;
    top: 272px;
    left: 50%;
    width: 1200px;
    max-width: none;
    height: 615px;
    margin: 0;
    border-radius: 56px;
    box-shadow:
      0 0 28px rgba(164, 73, 245, 0.8),
      0 0 142px 28px rgba(164, 73, 245, 0.62);
    transform: translateX(-50%);
  }

  .rules-media .rules-video-facade,
  .rules-media .rules-video,
  .rules-media .rules-video-poster {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
  }

  .rules-video-play {
    width: 98px;
    height: 98px;
  }

  .upcoming {
    display: none;
  }

  /* Audience */
  .audience {
    position: relative;
    width: 100vw;
    height: 870px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    transform: none;
    z-index: 3;
  }

  .audience::before,
  .audience::after {
    display: none;
  }

  .audience-spot-yellow {
    top: -301px;
    left: 0;
    width: 771px;
    transform: none;
  }

  .audience-spot-purple {
    right: 2px;
    bottom: auto;
    top: 204px;
    width: 801px;
    transform: none;
  }

  .audience-inner {
    width: 100%;
    max-width: none;
    height: 870px;
    min-height: 0;
    margin: 0;
    display: block;
    transform: none;
  }

  .audience-inner > .watermark-guess {
    top: 102px;
    max-width: none;
    transform: translateY(-4%);
  }

  .audience-inner > .watermark-guess-img {
    width: 1572px;
    max-width: none;
  }

  .audience-photo {
    top: 160px;
    left: 120px;
    bottom: auto;
    width: 393px;
    height: 527px;
    filter: none;
    transform: none;
    margin-top: 5px;
    margin-left: 15px;
    transform: scale(1.1);
  }

  .audience-copy {
    position: static;
    padding: 0;
  }

  .audience-copy .section-title {
    position: absolute;
    top: 245px;
    left: 348px;
    width: 679px;
    margin: 0;
    font-size: 78px;
    line-height: 80px;
    transform: none;
  }

  .audience-title-line--wide,
  .audience-title-line--default {
    display: inline;
    white-space: normal;
  }

  .audience-title-line--mobile {
    display: none;
  }

  .audience-list {
    position: absolute;
    top: 502px;
    left: 720px;
    width: 510px;
    margin: 0;
    grid-template-columns: repeat(2, 220px);
    column-gap: 46px;
    row-gap: 42px;
    transform: none;
  }

  .audience-item {
    padding-bottom: 12px;
    font-size: 18px;
    line-height: 26px;
  }

  .audience-item-line--wide {
    display: block;
  }

  .audience-item-line--narrow,
  .audience-item-line--tablet {
    display: none;
  }

  .audience-cta {
    position: absolute;
    z-index: 4;
    top: 848px;
    left: 720px;
    margin: 0;
    padding: 14px 60px;
    font-size: 18px;
    line-height: 24px;
    transform: none;
  }

  /* App control */
  .app-control {
    display: block;
    position: relative;
    width: 100vw;
    height: 1259px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    margin-top: 25px;
    z-index: 3;
  }

  .app-control-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .app-control-title {
    position: absolute;
    top: 200px;
    left: 50%;
    width: 897px;
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 78px;
    line-height: 80px;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    color: var(--accent-yellow);
    transform: translateX(-50%);
  }

  .app-control-title-line--default {
    display: inline;
  }

  .app-control-title-line--tablet {
    display: none;
  }

  .app-control-title-with-dash {
    white-space: normal;
  }

  .app-control-title-dash,
  .app-control-title-line--white {
    color: var(--white);
  }

  .app-control-title-accent {
    color: var(--accent-yellow);
  }

  .app-control-tabs {
    position: absolute;
    top: 416px;
    left: 50%;
    display: flex;
    flex-wrap: nowrap;
    gap: 46px;
    margin: 0;
    transform: translateX(-50%);
  }

  .app-control-tab {
    appearance: none;
    padding: 0 0 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 36px;
    line-height: 42px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
  }

  .app-control-tab.is-active {
    border-bottom-color: var(--accent-violet);
    color: var(--accent-violet);
  }

  .app-control-panel {
    position: absolute;
    top: 524px;
    left: 0;
    width: 100%;
    margin: 0;
  }

  .app-control-text {
    width: 798px;
    max-width: none;
    margin: 0 auto;
    padding: 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--white-op-800);
    text-align: center;
  }

  .app-control-carousel-shell {
    width: 100%;
    margin-top: 86px;
    overflow: visible;
  }

  .app-control-carousel-shell::before {
    display: none;
  }

  .app-control-carousel {
    --app-frame-w: 825px;
    --app-frame-h: 570px;
    position: relative;
    display: flex;
    gap: 116px;
    width: 100%;
    height: 570px;
    margin: -100px 0 0;
    padding: 100px 0;
    box-sizing: content-box;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: calc((100% - var(--app-frame-w)) / 2);
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
  }

  .app-control-carousel.is-dragging {
    cursor: grabbing;
  }

  .app-control-carousel::-webkit-scrollbar {
    display: none;
  }

  .app-control-carousel .app-control-slide {
    position: relative;
    flex: 0 0 825px;
    width: 825px;
    height: 570px;
    margin: 0;
    border-radius: 44px;
    overflow: hidden;
    isolation: isolate;
  }

  .app-control-gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    width: max-content;
    max-width: none;
    height: 570px;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
  }

  .app-control-gallery .app-control-slide {
    flex: 0 0 265px;
    width: 265px;
    height: 570px;
    margin: 0;
    border-radius: 44px;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
  }

  .app-control-slide img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    /*transform: scale(1.42);*/
    transform-origin: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  .app-control-gallery .app-control-slide img {
    /*transform: scale(1.6);*/
  }

  .app-control-slide--violet {
    filter: drop-shadow(0 0 20px rgba(164, 73, 245, 0.78))
      drop-shadow(0 0 42px rgba(164, 73, 245, 0.36));
  }

  /* жёлтое только у 2-го экрана; без shell::before — иначе полосы по краям */
  .app-control-slide--yellow {
    filter: drop-shadow(0 0 18px rgba(242, 182, 38, 0.55))
      drop-shadow(0 0 34px rgba(242, 182, 38, 0.28));
  }

  .app-control-slide--beige {
    filter: drop-shadow(0 0 20px rgba(227, 204, 182, 0.72))
      drop-shadow(0 0 42px rgba(227, 204, 182, 0.32));
  }

  .app-control-carousel .app-control-slide--violet {
    filter: drop-shadow(0 0 16px rgba(164, 73, 245, 0.45))
      drop-shadow(0 0 28px rgba(164, 73, 245, 0.2));
  }

  .app-control-carousel .app-control-slide--beige {
    filter: drop-shadow(0 0 16px rgba(227, 204, 182, 0.4))
      drop-shadow(0 0 28px rgba(227, 204, 182, 0.18));
  }

  .app-control-carousel .app-control-slide--yellow {
    filter: drop-shadow(0 0 18px rgba(242, 182, 38, 0.55))
      drop-shadow(0 0 34px rgba(242, 182, 38, 0.28));
  }

  /* Private events */
  .private {
    position: relative;
    width: 100vw;
    height: 1164px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    transform: none;
    z-index: 3;
  }

  .private::after {
    display: block;
    content: '';
    inset: auto;
    right: -180px;
    left: auto;
    bottom: -40px;
    width: 720px;
    height: 360px;
    background: radial-gradient(
      circle at 50% 100%,
      rgba(242, 182, 38, 0.48) 0%,
      rgba(242, 182, 38, 0.28) 28%,
      rgba(242, 182, 38, 0.12) 52%,
      transparent 72%
    );
    border-radius: 720px 720px 0 0;
    filter: blur(6px);
    z-index: 0;
    transform: rotate(270deg);
  }

  .private::before {
    top: 0;
    bottom: auto;
    left: 50%;
    width: 1920px;
    height: 1165px;
    background: url(../images/corporates.webp) center / 1920px 1165px no-repeat;
    filter: none;
    opacity: 1;
    transform: translateX(-50%);
    -webkit-mask-image: none;
    mask-image: none;
    z-index: 1;
  }

  .private-title {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 772px;
    margin: 0;
    font-size: 78px;
    line-height: 80px;
  }

  .private-title-block--left {
    position: absolute;
    top: 200px;
    left: 210px;
  }

  .private-title-block--right {
    position: absolute;
    top: 486px;
    right: 210px;
    width: 769px;
    margin: 0;
  }

  .private-title-line--desk {
    display: block;
  }

  .private-title-line--mobile {
    display: none;
  }

  .private-cards {
    position: absolute;
    top: 772px;
    left: 50%;
    width: 1020px;
    margin: 0;
    transform: translateX(-50%);
  }

  .private-cards .private-card {
    height: 276px;
    min-height: 276px;
    padding: 62px 95px;
    gap: 6px;
  }

  .private-cards .private-card:nth-child(1) .private-icon {
    width: calc(150px / 1.2);
    height: calc(120px / 1.2);
    min-width: calc(150px / 1.2);
    min-height: calc(120px / 1.2);
  }
  .private-cards .private-card:nth-child(1) h3 {
    margin-top: 10px;
  }

  .private-card h3 {
    font-size: 18px;
    line-height: 26px;
    white-space: nowrap;
  }

  .private > .btn,
  .private-cta {
    position: absolute;
    z-index: 4;
    top: calc(772px + 276px + 32px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 14px 70px;
    font-size: 18px;
    line-height: 24px;
    margin-top: 40px;
  }

  /* Gallery, franchise, and FAQ */
  .spot-fifth-wrap {
    height: 4278px;
    margin: 0;
    overflow: visible;
  }

  .spot-fifth-wrap::before,
  .spot-fifth-wrap::after {
    display: none;
  }

  .gallery-2 {
    width: 100vw;
    height: 861px;
    margin: 0;
    padding: 180px 0 0;
    overflow: hidden;
    transform: none;
  }

  .gallery-2 .gallery-collage-shell-2 {
    width: 1920px;
    height: 661px;
    transform: translateX(-50%) scale(1);
  }

  .franchise {
    display: block;
    position: relative;
    width: 100vw;
    height: 438px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: none;
    z-index: 3;
    margin-top: 5px;
  }

  .franchise::before,
  .franchise::after {
    display: none;
  }

  .franchise-media {
    position: absolute;
    top: -95px;
    left: calc(-80px - (100% - 1095px));
    width: 100%;
    height: auto;
    overflow: visible;
    transform: none;
    z-index: 1;
    pointer-events: none;
    -webkit-mask-image: none;
    mask-image: none;
    margin: 0;
  }

  .franchise-media picture {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
  }

  .franchise-media .franchise-mask {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    object-fit: contain;
    object-position: left center;
    transform: translateY(-180px);
  }

  .franchise-inner {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    transform: none;
  }

  .franchise-content {
    position: absolute;
    z-index: 2;
    top: 24px;
    left: 720px;
    width: 642px;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .franchise-title {
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 78px;
    line-height: 80px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .franchise-title-accent,
  .franchise-title-rest {
    display: block;
    white-space: nowrap;
  }

  .franchise-title br {
    display: none;
  }

  .franchise-title-accent {
    color: var(--accent-yellow);
  }

  .franchise-title-rest {
    color: var(--white);
  }

  .franchise-text {
    width: 600px;
    margin: 28px 0 0;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 24px;
    line-height: 34px;
    color: var(--white);
  }

  .franchise-text--mobile {
    display: none;
  }

  .franchise-text--md {
    display: none;
  }

  .franchise-text--tablet {
    display: none;
  }

  .franchise-text--desktop {
    display: inline;
  }

  .franchise-cta {
    margin-top: 42px;
    padding: 14px 60px;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 65px;
  }

  .faq {
    position: relative;
    width: 100vw;
    height: 882px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: none;
    z-index: 4;
  }

  .faq::before {
    content: '';
    position: absolute;
    top: -300px;
    left: -180px;
    /* 1800 artboard + keep left bleed; grow with vw so 1600–1800 doesn’t clip */
    width: max(1800px, calc(100vw + 180px));
    height: 1600px;
    display: block;
    background: url(../images/fifth_spot_yellow_purple.png) center / 100% 100%
      no-repeat;
    filter: brightness(var(--spot-fifth-purple-brightness))
      saturate(var(--spot-fifth-purple-saturate));
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.8) 14%,
      #000 28%,
      #000 72%,
      rgba(0, 0, 0, 0.8) 86%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.8) 14%,
      #000 28%,
      #000 72%,
      rgba(0, 0, 0, 0.8) 86%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 0;
  }

  .faq-inner {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .faq-heading {
    position: absolute;
    top: 200px;
    left: 120px;
    width: 480px;
    margin: 0;
    padding: 0;
    font-size: 78px;
    line-height: 80px;
  }

  .faq-list {
    position: absolute;
    top: 200px;
    left: 720px;
    width: 600px;
    max-width: none;
    margin: 0;
  }

  .faq-item {
    margin: 0 0 57px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  }

  .faq-item summary {
    min-height: 44px;
    padding: 0 0 36px;
    font-size: 24px;
    line-height: 34px;
  }

  .faq-item[open] summary {
    padding-bottom: 12px;
  }

  .faq-item p {
    margin: 0 0 28px;
    padding: 0;
    font-size: 18px;
    line-height: 26px;
  }

  /* Club contacts */
  .club-contacts {
    display: block;
    position: relative;
    width: 100vw;
    height: 984px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    transform: none;
    z-index: 3;
  }

  .club-contacts-inner {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .club-contacts-title {
    position: absolute;
    top: 200px;
    left: 120px;
    width: 600px;
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 78px;
    line-height: 80px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .club-contacts-title-line {
    display: inline;
  }

  .club-contacts-title-line--mobile {
    display: none;
  }

  .club-contacts-title-line--tablet {
    display: inline;
  }

  .club-contacts-title-line--gold {
    color: var(--accent-yellow);
  }

  .club-contacts-list {
    position: absolute;
    top: 436px;
    left: 120px;
    display: grid;
    width: max-content;
    max-width: calc(100% - 240px);
    grid-template-columns: repeat(3, max-content);
    column-gap: 120px;
    row-gap: 46px;
    margin: 0;
  }

  .club-contacts-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .club-contacts-city {
    margin: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 36px;
    line-height: 42px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    white-space: nowrap;
  }

  .club-contacts-phone {
    display: block;
    margin-top: 8px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--white-op-800);
    white-space: nowrap;
  }

  .club-contacts-socials {
    display: flex;
    gap: 10px;
    margin-top: 4px;
  }

  .club-contacts-social,
  .club-contacts-social img {
    width: 22px;
    height: 22px;
  }

  /* Extra space only between the second and third rows. */
  .club-contacts-item:nth-child(7),
  .club-contacts-item:nth-child(8),
  .club-contacts-item:nth-child(9) {
    margin-top: 20px;
  }

  .club-contacts-nav {
    position: absolute;
    z-index: 4;
    top: 940px;
    left: 120px;
    display: flex;
    gap: 48px;
    margin: 0;
  }

  .club-contacts-nav-btn {
    display: inline-flex;
    width: 48px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: var(--purple);
    box-shadow: var(--purple-glow);
  }

  .club-contacts-nav-btn img {
    width: 12px;
    height: 22px;
  }

  /* Final CTA and footer */
  .cta-final {
    position: relative;
    width: 100vw;
    height: 1113px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transform: none;
  }

  .cta-final::after {
    content: '';
    position: absolute;
    z-index: 4;
    right: 60px;
    bottom: 0;
    left: 60px;
    height: 2px;
    border-radius: 1px;
    background: var(--accent-violet);
  }

  .watermark-move {
    top: 460px;
    bottom: auto;
    width: 1440px;
    max-width: none;
    transform: translateX(-50%);
  }

  .watermark-move-img {
    width: 1440px;
    max-width: none;
  }

  .cta-inner {
    position: absolute;
    top: 200px;
    left: 0;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .cta-title {
    margin: 0;
    font-size: 78px;
    line-height: 80px;
    transform: none;
  }

  .cta-title-line--wide {
    display: block;
  }

  .cta-title-line--narrow {
    display: none;
  }

  .cta-subtitle {
    margin: 36px 0 64px;
    font-size: 24px;
    line-height: 34px;
    transform: none;
  }

  .cta-subtitle-line--wide {
    display: inline;
  }

  .cta-subtitle-line--narrow {
    display: none;
  }

  .cta-inner .btn {
    margin: 0;
    padding: 14px 60px;
    font-size: 18px;
    line-height: 24px;
    transform: none;
  }

  .cta-raccoon {
    position: absolute;
    top: 466px;
    left: calc(50% + 67px);
    width: 438px;
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
  }

  .cta-raccoon-img {
    width: 438px;
    height: 447px;
    max-height: none;
    margin: 0;
  }

  .site-footer {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    height: 259px;
    min-height: 0;
    margin: 0;
    padding: 0 60px;
    overflow: hidden;
    background: transparent;
  }

  .site-footer::before {
    display: block;
    bottom: -120px;
    width: 1600px;
    height: 420px;
    opacity: 0.85;
  }

  .footer-divider {
    display: none;
  }

  .site-footer .footer-inner {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .site-footer .footer-top {
    position: absolute;
    top: 36px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .site-footer .footer-logo,
  .site-footer .footer-logo-img {
    width: 240px;
    height: 58px;
    margin: 0;
    transform: none;
  }

  .site-footer .footer-contact {
    gap: 0;
  }

  .site-footer .footer-contact-label,
  .site-footer .footer-phone {
    font-size: 18px;
    line-height: 26px;
  }

  .site-footer .footer-bottom {
    position: absolute;
    top: 165px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }

  .site-footer .footer-docs {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .site-footer .footer-docs a {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .site-footer .footer-docs br {
    display: none;
  }

  .site-footer .footer-legal {
    flex: 0 1 auto;
    gap: 50px;
    margin: 0;
  }

  .site-footer .footer-legal-label,
  .site-footer .footer-legal-value {
    line-height: 24px;
    white-space: nowrap;
  }
  .site-footer .footer-legal-label {
    font-size: 18px;
  }
  .footer-legal-value {
    margin-top: 5px;
    font-size: 16px;
  }
}

/* 1025–1390 only: 1440 artboard was fine; compress overflow in this band */
@media (min-width: 1025px) and (max-width: 1390px) {
  .site-header {
    padding: 40px clamp(16px, calc(16px + (100vw - 1025px) * 0.1205), 60px);
    gap: clamp(8px, calc(8px + (100vw - 1025px) * 0.1041), 46px);
    margin-top: 0;
  }

  .site-logo,
  .site-logo-img {
    width: clamp(148px, calc(148px + (100vw - 1025px) * 0.2521), 240px);
    height: auto;
    flex: 0 0 auto;
  }

  .site-logo-img {
    max-height: 58px;
    object-fit: contain;
    object-position: left center;
  }

  .site-nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    gap: clamp(2px, calc(2px + (100vw - 1025px) * 0.0274), 12px);
  }

  .site-nav a {
    padding: 0 clamp(0px, calc((100vw - 1025px) * 0.011), 4px);
    font-size: clamp(11px, calc(11px + (100vw - 1025px) * 0.0137), 16px);
    letter-spacing: 0.05em;
  }

  .header-callback__action {
    font-size: clamp(13px, calc(13px + (100vw - 1025px) * 0.0137), 18px);
  }

  .header-callback__action::before {
    width: 160px;
    height: 36px;
  }

  .about {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .about-media {
    width: min(1200px, 88vw);
  }

  .about-title {
    left: calc(210 / 1440 * 100%);
    width: min(578px, 40.14%);
  }

  .about-stats {
    left: calc(210 / 1440 * 100%);
    width: calc(1020 / 1440 * 100%);
    max-width: calc(100% - 2 * (210 / 1440 * 100%));
  }

  .about-stat {
    width: calc(478 / 1020 * 100%);
  }

  .about-stat:nth-child(2) {
    left: calc(575 / 1020 * 100%);
    width: calc(445 / 1020 * 100%);
  }

  .experience {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .experience-inner {
    width: 100%;
    max-width: 100%;
  }

  .watermark-experience,
  .watermark-experience-img {
    width: min(1572px, 110vw);
  }

  .experience-title {
    left: calc(120 / 1440 * 100%);
    width: min(554px, 38.5%);
    font-size: clamp(52px, 5.42vw, 78px);
    line-height: 1.03;
  }

  .experience-visual {
    width: min(721px, 50vw);
    height: auto;
    aspect-ratio: 721 / 762;
    transform: translate(-50%, -20px);
  }

  .experience-copy {
    left: calc(891 / 1440 * 100%);
    width: min(458px, calc(100% - (891 / 1440 * 100%) - (60 / 1440 * 100%)));
    font-size: clamp(18px, 1.67vw, 24px);
    line-height: 1.4;
  }

  .experience-points {
    left: calc(120 / 1440 * 100%);
    right: calc(120 / 1440 * 100%);
    width: auto;
    max-width: none;
    gap: clamp(20px, 4.2vw, 139px);
    justify-content: space-between;
  }

  .experience-points li {
    flex: 1 1 0;
    min-width: 0;
    max-width: 15em;
    white-space: normal;
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 1.4;
  }

  .story-games-wrap > .rules,
  .rules {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .rules-inner {
    width: 100%;
    max-width: 100%;
  }

  .rules-title {
    left: calc(120 / 1440 * 100%);
    font-size: clamp(52px, 5.42vw, 78px);
    line-height: 1.03;
  }

  .rules-lead {
    left: calc(720 / 1440 * 100%);
    width: min(600px, calc(100% - (720 / 1440 * 100%) - (120 / 1440 * 100%)));
    font-size: clamp(24px, 2.5vw, 36px);
    line-height: 1.2;
  }

  .rules-text {
    left: calc(720 / 1440 * 100%);
    width: min(600px, calc(100% - (720 / 1440 * 100%) - (120 / 1440 * 100%)));
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.45;
  }

  .rules-media {
    width: min(1200px, 88vw);
  }

  .spot-fifth-wrap > .franchise,
  .franchise {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .franchise-inner {
    width: 100%;
    max-width: 100%;
  }

  .franchise-content {
    left: calc(720 / 1440 * 100%);
    width: min(642px, calc(100% - (720 / 1440 * 100%) - (60 / 1440 * 100%)));
    max-width: calc(100% - (720 / 1440 * 100%) - (40 / 1440 * 100%));
  }

  .franchise-title {
    font-size: clamp(44px, 5.42vw, 78px);
    line-height: 1.03;
  }

  .franchise-title-accent,
  .franchise-title-rest {
    white-space: normal;
  }

  .franchise-text {
    width: 100%;
    max-width: 100%;
    font-size: clamp(16px, 1.67vw, 24px);
    line-height: 1.4;
  }

  .audience {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .audience-inner {
    width: 100%;
    max-width: 100%;
  }

  .audience-copy .section-title {
    left: calc(348 / 1440 * 100%);
    width: min(679px, calc(100% - (348 / 1440 * 100%) - (60 / 1440 * 100%)));
    font-size: clamp(52px, 5.42vw, 78px);
    line-height: 1.03;
  }

  .audience-list {
    left: calc(720 / 1440 * 100%);
    width: min(510px, calc(100% - (720 / 1440 * 100%) - (60 / 1440 * 100%)));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 3.2vw, 46px);
    row-gap: clamp(24px, 2.9vw, 42px);
  }

  .audience-item {
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 1.4;
  }

  .audience-cta {
    left: calc(720 / 1440 * 100%);
    max-width: calc(100% - (720 / 1440 * 100%) - (40 / 1440 * 100%));
    box-sizing: border-box;
    padding-inline: clamp(24px, 4.2vw, 60px);
    font-size: clamp(14px, 1.25vw, 18px);
    white-space: nowrap;
  }

  .faq {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .faq-inner {
    width: 100%;
    max-width: 100%;
  }

  .faq-heading {
    left: calc(120 / 1440 * 100%);
    width: min(480px, 34%);
    font-size: clamp(52px, 5.42vw, 78px);
    line-height: 1.03;
  }

  .faq-list {
    left: calc(720 / 1440 * 100%);
    width: min(600px, calc(100% - (720 / 1440 * 100%) - (120 / 1440 * 100%)));
    max-width: calc(100% - (720 / 1440 * 100%) - (60 / 1440 * 100%));
  }

  .faq-item summary {
    font-size: clamp(16px, 1.4vw, 24px);
  }
}

@media (min-width: 1391px) and (max-width: 1415px) {
  .site-header {
    padding-right: 90px;
  }
}

/* 769–950: tablet artboard (~1024) overflows; keep callback visible */
@media (min-width: 769px) and (max-width: 950px) {
  .site-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px clamp(12px, 2vw, 20px);
    grid-template-columns: none;
  }

  .site-nav,
  .header-social {
    display: none;
  }

  .site-logo {
    order: 1;
    flex: 0 0 auto;
  }

  .site-menu-btn {
    order: 2;
    position: absolute;
    top: 16px;
    left: 50%;
    display: flex;
    transform: translateX(-50%);
    margin: 0;
    flex: 0 0 auto;
  }

  .header-callback {
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    max-width: min(240px, 42vw);
  }

  .header-callback__action {
    font-size: clamp(13px, 1.7vw, 16px);
    line-height: 1.3;
  }

  .header-callback__meta {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
  }

  .header-callback__note,
  .header-callback__phone {
    font-size: clamp(11px, 1.4vw, 14px);
  }

  .hero {
    overflow-x: clip;
  }

  .hero-title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(44px, 6.5vw, 62px);
    line-height: 1.06;
  }

  .hero-title-line--wide {
    display: none;
  }

  .hero-title-line--tablet {
    display: block;
  }

  .experience {
    overflow-x: clip;
  }

  .experience-copy {
    left: calc(612 / 1024 * 100%);
    width: min(356px, calc(100% - (612 / 1024 * 100%) - (24 / 1024 * 100%)));
    max-width: calc(100% - (612 / 1024 * 100%) - 16px);
    font-size: clamp(16px, 2.1vw, 20px);
    line-height: 1.4;
  }

  .experience-title {
    left: clamp(24px, 5.5vw, 56px);
    width: min(442px, 46%);
    font-size: clamp(44px, 6.5vw, 62px);
    line-height: 1.06;
  }

  .story-games-wrap > .rules,
  .rules {
    overflow-x: clip;
  }

  .rules-title {
    left: clamp(24px, 5.5vw, 56px);
    font-size: clamp(44px, 6.5vw, 62px);
    line-height: 1.06;
  }

  .rules-lead {
    left: calc(512 / 1024 * 100%);
    width: min(456px, calc(100% - (512 / 1024 * 100%) - (24 / 1024 * 100%)));
    font-size: clamp(24px, 3.5vw, 36px);
    line-height: 1.2;
  }

  .rules-text {
    left: calc(512 / 1024 * 100%);
    width: min(456px, calc(100% - (512 / 1024 * 100%) - (24 / 1024 * 100%)));
    font-size: clamp(14px, 1.7vw, 16px);
    line-height: 1.45;
  }

  .audience {
    overflow-x: clip;
  }

  .audience-copy .section-title {
    left: clamp(160px, 22vw, 224px);
    width: min(540px, calc(100% - 180px));
    font-size: clamp(44px, 6.5vw, 62px);
    line-height: 1.06;
  }

  .audience-list {
    left: calc(512 / 1024 * 100%);
    right: clamp(16px, 2.5vw, 32px);
    width: auto;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(16px, 3vw, 46px);
    row-gap: clamp(20px, 3vw, 42px);
  }

  .audience-item {
    font-size: clamp(13px, 1.7vw, 16px);
    line-height: 1.4;
    white-space: normal;
  }

  .audience-item-line--wide {
    display: block;
  }

  .audience-item-line--narrow,
  .audience-item-line--tablet {
    display: none;
  }

  .audience-cta {
    left: calc(512 / 1024 * 100%);
    max-width: calc(100% - (512 / 1024 * 100%) - 16px);
    box-sizing: border-box;
    padding: 14px clamp(28px, 4.5vw, 45px);
    font-size: clamp(14px, 1.7vw, 16px);
    line-height: 24px;
    min-height: 52px;
    white-space: nowrap;
  }

  .faq {
    overflow-x: clip;
  }

  .faq-heading {
    left: clamp(24px, 5.5vw, 56px);
    width: min(360px, 42%);
    font-size: clamp(44px, 6.5vw, 62px);
    line-height: 1.06;
  }

  .faq-list {
    left: calc(512 / 1024 * 100%);
    width: min(456px, calc(100% - (512 / 1024 * 100%) - (24 / 1024 * 100%)));
    max-width: calc(100% - (512 / 1024 * 100%) - 16px);
  }

  .faq-item summary {
    font-size: clamp(16px, 2.1vw, 20px);
    line-height: 1.35;
  }

  .club-contacts {
    padding-inline: clamp(16px, 3vw, 56px);
    overflow-x: clip;
  }

  .club-contacts-list {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(16px, 3.5vw, 75px);
    row-gap: clamp(28px, 4vw, 55px);
  }

  .club-contacts-city {
    font-size: clamp(18px, 3.2vw, 36px);
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .club-contacts-phone {
    font-size: clamp(12px, 1.5vw, 14px);
    white-space: normal;
  }

  .site-footer {
    padding-inline: clamp(16px, 2.5vw, 24px);
    overflow-x: clip;
  }

  .site-footer .footer-inner {
    width: 100%;
    max-width: 100%;
    gap: clamp(32px, 5vw, 70px);
  }

  .site-footer .footer-bottom {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(16px, 2.5vw, 24px);
    row-gap: 20px;
  }

  .site-footer .footer-docs {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 100%;
    gap: clamp(8px, 1.5vw, 12px);
  }

  .site-footer .footer-docs a {
    font-size: clamp(13px, 1.7vw, 17px);
    line-height: 1.25;
    white-space: normal;
  }

  .site-footer .footer-legal {
    flex: 1 1 280px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: clamp(12px, 2vw, 20px);
    min-width: 0;
    max-width: 100%;
  }

  .site-footer .footer-legal-item {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .site-footer .footer-legal-label,
  .site-footer .footer-legal-value {
    font-size: clamp(13px, 1.7vw, 16px);
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .site-footer .footer-logo-img {
    width: clamp(160px, 22vw, 240px);
    height: auto;
  }
}

/* 600–750: shrink type and keep blocks inside the viewport */
@media (min-width: 601px) and (max-width: 750px) {
  .hero {
    overflow-x: clip;
  }

  .hero-title {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: clamp(36px, 6.8vw, 48px);
    line-height: 1.06;
    padding-inline: 4px;
  }

  .hero-title-line--tablet {
    white-space: nowrap;
  }

  .hero-title-line--wide,
  .hero-title-line--medium,
  .hero-title-line--compact {
    display: none;
  }

  .audience-copy .section-title,
  .audience-title,
  .audience-title-line {
    font-size: clamp(36px, 6.8vw, 48px);
    line-height: 1.06;
  }

  .audience-title {
    max-width: 100%;
  }

  .audience-title-line {
    max-width: 100%;
  }

  .features-list {
    font-size: clamp(28px, 5.2vw, 36px);
    line-height: 1.08;
    transform: translateY(-260px) translateX(0);
  }

  .features-inner .feature-line > span:not(.feature-headline),
  .features-inner .feature-headline,
  .features-inner .feature-headline-line {
    font-size: clamp(28px, 5.2vw, 36px);
    line-height: 1.08;
  }

  .features-inner .feature-line small {
    font-size: clamp(12px, 2vw, 14px);
    line-height: 1.35;
  }

  .feature-line {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .audience-cta {
    display: inline-flex;
    width: auto;
    max-width: calc(100% - 8px);
    box-sizing: border-box;
    margin-inline: auto;
    padding: 14px clamp(16px, 3.5vw, 28px);
    font-size: clamp(12px, 2.1vw, 15px);
    line-height: 1.3;
    white-space: nowrap;
  }

  .franchise-content {
    max-width: min(52%, calc(100% - 24px));
    margin-right: 0;
    box-sizing: border-box;
  }

  .franchise-title {
    font-size: clamp(36px, 7vw, 52px);
    line-height: 1.06;
  }

  .franchise-text {
    width: 100%;
    max-width: 100%;
    font-size: clamp(14px, 2.5vw, 18px);
    line-height: 1.35;
  }

  .franchise-text--md {
    font-size: inherit;
  }

  .rules-inner {
    column-gap: clamp(24px, 5vw, 64px);
  }

  .rules-title {
    font-size: clamp(36px, 7vw, 52px);
    line-height: 1.06;
  }

  .rules-lead {
    font-size: clamp(18px, 3.4vw, 28px);
    line-height: 1.2;
    min-width: 0;
  }

  .rules-lead-line--tablet {
    white-space: normal;
  }

  .experience-copy {
    left: 50%;
    width: min(320px, calc(50% - 16px));
    max-width: calc(50vw - 24px);
    font-size: clamp(14px, 2.5vw, 18px);
    line-height: 1.35;
  }

  .experience-copy-line--wide {
    white-space: normal;
  }

  .experience-title {
    font-size: clamp(36px, 7vw, 52px);
    line-height: 1.06;
    max-width: calc(50% - 8px);
  }
}

/* 400–450: center hero title + lead */
@media (min-width: 400px) and (max-width: 450px) {
  .hero-inner {
    align-items: center;
    text-align: center;
    padding-inline: 16px;
  }

  .hero-title {
    margin-inline: auto;
    text-align: center;
    max-width: 100%;
  }

  .hero-title > .hero-title-line--narrow:nth-child(10),
  .hero-title > .hero-title-line--narrow:nth-child(12),
  .hero-title > .hero-title-line--narrow:nth-child(13),
  .hero-title > .hero-title-line--narrow:nth-child(14) {
    transform: none;
  }

  .hero-lead {
    margin-inline: auto;
    align-self: center;
    text-align: center;
    max-width: 100%;
  }

  .hero-inner .btn {
    align-self: center;
  }
}

/*
 * 1920px canvas
 *
 * The 1920 Figma frame retains the 1440px composition and centers it in the
 * wider viewport. This keeps all of the internal relationships intact while
 * the additional space becomes the outer gutter.
 */
@media (min-width: 1441px) {
  :root {
    --desktop-artboard-width: 1440px;
    --desktop-gutter: clamp(60px, calc(60px + (100vw - 1440px) / 8), 120px);
  }

  .site-header {
    width: 100%;
    margin-top: 0;
    padding-block: 40px;
    padding-inline: var(--desktop-gutter);
  }

  .experience,
  .story-games-wrap > .gallery,
  .story-games-wrap > .features,
  .story-games-wrap > .rules,
  .private,
  .spot-fifth-wrap > .franchise {
    /* width: var(--desktop-artboard-width); */
    margin-inline: auto;
  }

  .experience {
    width: var(--desktop-artboard-width);
  }

  .story-games-wrap > .rules {
    width: var(--desktop-artboard-width);
  }

  .private {
    width: var(--desktop-artboard-width);
  }

  .site-footer {
    padding-inline: var(--desktop-gutter);
  }

  .cta-final::after {
    right: var(--desktop-gutter);
    left: var(--desktop-gutter);
  }
}

/* Keep private yellow glow flush to the viewport right while the
   section stays on the centered 1440 artboard (before the 1800 layout). */
@media (min-width: 1441px) and (max-width: 1799px) {
  .private::after {
    right: calc((var(--desktop-artboard-width) - 100vw) / 2 - 180px);
  }
}

@media (min-width: 1800px) and (max-width: 1840px) {
  .header-callback {
    margin-right: 0;
    transform: translateX(calc(var(--desktop-gutter) - 28px));
  }
}

@media (min-width: 1800px) {
  .site-header {
    gap: clamp(46px, calc(46px + (100vw - 1800px) * 1.4083333333), 215px);
  }
  .header-callback__meta {
    margin-top: 10px;
  }
  .site-logo {
    margin-top: -10px;
  }
  .intro-stack {
    height: 2672px;
  }

  .hero-inner {
    margin-top: -10px;
  }

  .about {
    height: 1200px;
    margin-top: 25px;
  }

  .about-media {
    width: 1459px;
    height: 774px;
  }

  .about-title {
    top: 694px;
    left: calc(50% - 600px);
  }

  .about-stats {
    top: 1030px;
    left: calc(50% - 600px);
    width: 1200px;
  }

  .about-stat {
    width: 540px;
  }

  .about-stat:nth-child(2) {
    left: 660px;
    width: 540px;
  }
  .experience {
    margin-top: 25px;
  }
  .experience-points {
    margin-top: -25px;
    gap: 115px;
  }

  .watermark-experience,
  .audience-inner > .watermark-guess {
    width: 1680px;
    max-width: none;
  }

  .watermark-experience {
    top: -22px;
  }

  .audience-inner > .watermark-guess {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-4%);
  }

  .watermark-experience-img,
  .audience-inner > .watermark-guess-img {
    width: 1680px;
    max-width: none;
  }

  .features-inner {
    margin-top: -35px;
  }

  .audience {
    margin-top: -50px;
  }

  .audience,
  .spot-fifth-wrap > .faq,
  .spot-fifth-wrap > .club-contacts {
    width: 100vw;
    margin-inline: 0;
  }

  .audience-photo {
    left: 325px;
    margin-top: 67px;
  }

  .audience-copy .section-title {
    left: 588px;
  }

  .audience-list,
  .audience-cta,
  .faq-list {
    left: 960px;
  }

  .faq-heading,
  .club-contacts-title,
  .club-contacts-list,
  .club-contacts-nav {
    left: 360px;
    row-gap: 46px;
    column-gap: 116px;
  }

  .club-contacts-nav {
    column-gap: 50px;
  }

  .faq::before {
    left: 0;
    right: 0;
    width: auto;
  }

  .experience-copy {
    left: 862px;
  }

  .story-games-wrap,
  .features {
    margin-top: 15px;
  }

  .site-nav {
    gap: 16px;
  }

  .private::after {
    right: calc((var(--desktop-artboard-width) - 130vw) / 2);
    width: 1080px;
    height: 540px;
  }
  .private > .btn,
  .private-cta {
    margin-top: 35px;
  }

  .franchise {
    height: 464px;
  }

  .franchise-media {
    position: absolute;
    left: calc(
      (var(--desktop-artboard-width) - 100vw) / 2 - 80px - (100% - 2056px)
    );
    width: 100%;
    height: auto;
  }
  .franchise-content {
    left: 960px;
  }

  .franchise-media picture {
    display: block;
    position: relative;
    left: -200px;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
  }

  .franchise-media .franchise-mask {
    position: relative;
    left: -200px;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    object-fit: contain;
    object-position: left center;
    transform: translateY(-220px);
  }

  .spot-fifth-wrap {
    height: 4304px;
  }

  .watermark-move,
  .watermark-move-img {
    width: 1750px;
    margin-top: -35px;
  }

  .site-footer .footer-bottom {
    top: 172px;
  }

  .site-footer .footer-docs {
    flex-direction: row;
    gap: 24px;
    margin-top: 27px;
  }

  .site-footer .footer-legal {
    gap: 52px;
    margin: 0;
  }

  .spot-fifth-wrap > .gallery-2 {
    transform: translateY(90px);
  }
}

/* Keep the tablet callback title clear of the back arrow and close button. */
@media (min-width: 601px) and (max-width: 1023px) {
  .city-selector-modal__callback .city-selector-modal__title--action {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding-inline: 44px;
  }
}

/* ≤600: без baked/drop-shadow границ + небольшое цветное свечение */
@media (max-width: 600px) {
  .app-control .app-control-slide {
    overflow: hidden !important;
  }

  /* Keep the callback title clear of the back arrow and close button. */
  .city-selector-modal__callback .city-selector-modal__title--action {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding-inline: 36px;
  }

  /* Mobile mockups must remain fully visible inside their cards. */
  .app-control .app-control-slide img {
    object-fit: contain;
    transform: none;
  }

  .app-control .app-control-gallery .app-control-slide img {
    transform: none;
  }

  .app-control .app-control-slide--violet,
  .app-control .app-control-slide--yellow,
  .app-control .app-control-slide--beige {
    filter: none !important;
  }

  .app-control .app-control-slide--violet {
    box-shadow:
      0 0 12px rgba(164, 73, 245, 0.45),
      0 0 28px rgba(164, 73, 245, 0.22) !important;
  }

  .app-control .app-control-slide--yellow {
    box-shadow:
      0 0 12px rgba(242, 182, 38, 0.42),
      0 0 28px rgba(242, 182, 38, 0.2) !important;
  }

  .app-control .app-control-slide--beige {
    box-shadow:
      0 0 12px rgba(227, 204, 182, 0.4),
      0 0 28px rgba(227, 204, 182, 0.18) !important;
  }
}

/* Бесконечная фотокарусель: обрезаем только по горизонтали, сохраняя glow. */
.gallery-marquee {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  clip-path: inset(-100vmax 0);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.gallery-marquee.is-pointer-down,
.gallery-marquee.is-dragging {
  cursor: grabbing;
}

.gallery-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.gallery-marquee__item {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}

.gallery-marquee__item img {
  -webkit-user-drag: none;
}

@media (max-width: 1024px) {
  /* Разводим пары, в которых следующая фотография закрывала лицо/персонажа. */
  .gallery-1 .gallery-collage .g6 {
    left: 69%;
  }

  .gallery-2 .gallery-collage-2 .g11 {
    left: 29%;
  }

  .gallery-2 .gallery-collage-2 .g12 {
    left: 50%;
  }

  .gallery-2 .gallery-collage-2 .g13 {
    left: 63%;
  }

  .gallery-2 .gallery-collage-2 .g14 {
    right: -6%;
  }
}

/* На 1024px секция обрезала blur по нижней границе жёсткой линией. */
@media (min-width: 1000px) and (max-width: 1024px) {
  .gallery.gallery-1 {
    overflow: visible;
  }
}

/* 1025–1140: футер не помещается в ряд — ужимаем отступы и блоки справа */
@media (min-width: 1025px) and (max-width: 1140px) {
  .site-footer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 24px 35px;
    overflow-x: clip;
  }

  .site-footer .footer-top,
  .site-footer .footer-bottom {
    left: 24px;
    right: 24px;
    width: auto;
    max-width: none;
    gap: 16px;
  }

  .site-footer .footer-logo,
  .site-footer .footer-logo-img {
    width: 168px;
    height: auto;
    max-height: 42px;
    flex: 0 0 auto;
  }

  .site-footer .footer-contact {
    min-width: 0;
  }

  .site-footer .footer-docs {
    gap: 12px;
    min-width: 0;
  }

  .site-footer .footer-legal {
    gap: 16px;
    min-width: 0;
  }

  .site-footer .footer-contact-label,
  .site-footer .footer-phone,
  .site-footer .footer-docs a,
  .site-footer .footer-legal-label,
  .site-footer .footer-legal-value {
    font-size: 13px;
    line-height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-marquee__track {
    will-change: auto;
  }
}

/* The admin app assets are pre-cropped to the 824 × 568 screen bounds. */
.app-control-carousel .app-control-slide img {
  object-fit: contain;
  transform: none;
}

/* Slider visibility must win over breakpoint-specific item display rules. */
.club-contacts-item[hidden] {
  display: none !important;
}

.faq-wrapper {
  position: relative;
}
.faq-img {
  position: absolute;

  top: -465px;
  left: 0;

  width: 1140px;
  height: 1615px;
}

.faq-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left;
}
/* Allow the karaoke link to fit alongside the existing desktop navigation. */
@media (min-width: 1025px) {
  .site-header.site-header--extended { gap: 16px; }
  .site-header--extended .site-nav { gap: clamp(4px, .6vw, 12px); transform: none; }
  .site-header--extended .site-nav a { font-size: clamp(10px, .8vw, 16px); white-space: nowrap; }
}

/* The karaoke shortcut stays beside the mobile menu, outside its overlay. */
.site-menu-actions { display: none; }
.site-menu-karaoke {
  display: inline-block;
  position: relative;
  animation: karaoke-link-pulse 2s ease-in-out infinite;
  transform-origin: center;
}
.site-menu-karaoke,
.site-nav .karaoke-pink {
  isolation: isolate;
}
.site-menu-karaoke::before,
.site-nav .karaoke-pink::before {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  width: 20px;
  height: 20px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.25a4 4 0 0 0 4-4V6a4 4 0 1 0-8 0v5.25a4 4 0 0 0 4 4Z'/%3E%3Cpath d='M5.75 10.75v.5a6.25 6.25 0 0 0 12.5 0v-.5M12 17.5V22M8.75 22h6.5'/%3E%3Cpath d='M18.5 4.75 20.75 2.5M19.5 8h3M18.5 11.25l2.25 2.25'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.25a4 4 0 0 0 4-4V6a4 4 0 1 0-8 0v5.25a4 4 0 0 0 4 4Z'/%3E%3Cpath d='M5.75 10.75v.5a6.25 6.25 0 0 0 12.5 0v-.5M12 17.5V22M8.75 22h6.5'/%3E%3Cpath d='M18.5 4.75 20.75 2.5M19.5 8h3M18.5 11.25l2.25 2.25'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(214, 21, 123, 0.55));
  transform: translateY(-50%);
  pointer-events: none;
}
.site-menu-karaoke::after,
.site-nav .karaoke-pink::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -7px -12px -7px -40px;
  border-radius: 999px;
  pointer-events: none;
  animation: karaoke-halo-flicker 1.7s ease-in-out infinite;
}
@media (max-width: 1024px) {
  .site-header.site-header--extended { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .site-header--extended .site-menu-actions { display: flex; align-items: center; gap: 24px; position: relative; order: 2; margin-left: auto; }
  .site-header--extended .site-menu-btn { position: static; transform: none; margin: 0; order: initial; flex-shrink: 0; }
  .site-menu-karaoke { color: #d6157b; font: 500 16px/24px 'Tektur', sans-serif; letter-spacing: 1.6px; white-space: nowrap; }
  .site-header--extended .header-callback { order: 3; margin-left: auto; }
}
@media (min-width: 391px) and (max-width: 600px) {
  .site-header--extended .site-logo-img { width: clamp(120px, 31vw, 153px); }
  .site-header--extended .site-menu-actions { gap: 12px; }
  .site-header--extended .site-menu-btn { gap: 6px; }
  .site-header--extended .site-menu-btn-icon { width: 28px; height: 28px; }
  .site-header--extended .site-menu-btn-label { font-size: 12px; }
  .site-menu-karaoke { font-size: 10px; letter-spacing: .5px; }
}
@media (max-width: 390px) {
  .site-menu-karaoke { position: absolute; top: calc(100% + 8px); right: 0; font-size: 14px; line-height: 20px; }
}
@keyframes karaoke-link-pulse {
  0%, 100% {
    opacity: 0.72;
    text-shadow: 0 0 0 rgba(214, 21, 123, 0);
    transform: translateX(0);
  }
  40%, 60% {
    opacity: 1;
    text-shadow: 0 0 12px rgba(214, 21, 123, 0.85);
    transform: translateX(0);
  }
  42%, 50%, 58% { transform: translateX(-3px) rotate(-0.8deg); }
  46%, 54% { transform: translateX(3px) rotate(0.8deg); }
}
@keyframes karaoke-halo-flicker {
  0%, 100% {
    opacity: 0.12;
    box-shadow: 0 0 8px 2px rgba(214, 21, 123, 0.28);
    transform: scale(0.96);
  }
  28% {
    opacity: 0.72;
    box-shadow: 0 0 16px 6px rgba(214, 21, 123, 0.58);
    transform: scale(1.02);
  }
  42% {
    opacity: 0.24;
    box-shadow: 0 0 10px 3px rgba(164, 73, 245, 0.38);
    transform: scale(0.99);
  }
  68% {
    opacity: 0.9;
    box-shadow: 0 0 20px 7px rgba(214, 21, 123, 0.66);
    transform: scale(1.04);
  }
}
@media (min-width: 1025px) {
  .site-nav .karaoke-pink {
    display: inline-block;
    position: relative;
    padding-left: 32px;
    font-size: 18px;
    white-space: nowrap;
    animation: karaoke-link-pulse 2s ease-in-out infinite;
    transform-origin: center;
  }
  .site-nav .karaoke-pink::before {
    right: auto;
    left: 6px;
  }
  .site-nav .karaoke-pink::after {
    inset: -7px -12px;
  }
}
@media (max-width: 760px) {
  .site-header.site-header--extended {
    min-height: 96px;
    padding: 12px 15px 28px;
  }
  .site-header--extended .site-logo-img {
    width: clamp(132px, 34vw, 160px);
    height: auto;
  }
  .site-header--extended .header-callback {
    display: none;
  }
  .site-header--extended .site-menu-actions {
    position: static;
    align-items: flex-start;
  }
  .site-header--extended .site-menu-btn {
    gap: 8px;
  }
  .site-header--extended .site-menu-btn-icon {
    width: 32px;
    height: 32px;
  }
  .site-header--extended .site-menu-btn-label {
    font-size: 14px;
  }
  .site-header--extended .site-menu-karaoke {
    position: absolute;
    top: 62px;
    right: auto;
    left: calc(50% + 14px);
    translate: -50% 0;
    font: 500 16px/22px 'Tektur', sans-serif;
    letter-spacing: 1.6px;
    white-space: nowrap;
    animation: karaoke-link-pulse 2s ease-in-out infinite;
  }
}
@media (max-width: 430px) {
  .site-header.site-header--extended {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 64px;
    padding: 12px 15px;
  }
  .site-header--extended .site-logo {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .site-header--extended .site-logo-img {
    width: 120px;
  }
  .site-header--extended .site-menu-actions {
    display: contents;
  }
  .site-header--extended .site-menu-btn {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    gap: 6px;
  }
  .site-header--extended .site-menu-btn-icon {
    width: 28px;
    height: 28px;
  }
  .site-header--extended .site-menu-btn-label {
    font-size: 12px;
  }
  .site-header--extended .site-menu-karaoke {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    padding-left: 22px;
    font-size: 11px;
    line-height: 18px;
    letter-spacing: 0.35px;
    translate: none;
  }
  .site-header--extended .site-menu-karaoke::before {
    right: auto;
    left: 0;
    width: 16px;
    height: 16px;
  }
  .site-header--extended .site-menu-karaoke::after {
    inset: -5px -7px;
  }
}
@media (min-width: 431px) and (max-width: 760px),
  (orientation: landscape) and (min-width: 761px) and (max-width: 932px) and (max-height: 500px) {
  .site-header.site-header--extended {
    display: grid;
    grid-template-columns: clamp(140px, 20vw, 180px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 16px clamp(15px, 3vw, 40px);
  }
  .site-header--extended .site-nav,
  .site-header--extended .header-social,
  .site-header--extended .header-callback {
    display: none;
  }
  .site-header--extended .site-logo {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .site-header--extended .site-logo-img {
    width: clamp(140px, 20vw, 180px);
    height: auto;
  }
  .site-header--extended .site-menu-actions {
    display: contents;
  }
  .site-header--extended .site-menu-btn {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    gap: 8px;
  }
  .site-header--extended .site-menu-btn-icon {
    width: 32px;
    height: 32px;
  }
  .site-header--extended .site-menu-btn-label {
    font-size: 14px;
  }
  .site-header--extended .site-menu-karaoke {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    padding-left: 26px;
    font-size: clamp(12px, 1.6vw, 16px);
    line-height: 22px;
    letter-spacing: 0.8px;
    translate: none;
  }
  .site-header--extended .site-menu-karaoke::before {
    right: auto;
    left: 0;
    width: 19px;
    height: 19px;
  }
  .site-header--extended .site-menu-karaoke::after {
    inset: -6px -9px;
  }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .site-header--extended .site-menu-actions {
    position: absolute;
    top: 16px;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
  }
  .site-header--extended .site-menu-actions:has(.site-menu-karaoke) {
    gap: 52px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-menu-karaoke,
  .site-nav .karaoke-pink {
    animation: none;
    opacity: 1;
    text-shadow: none;
    transform: none;
  }
  .site-menu-karaoke::after,
  .site-nav .karaoke-pink::after {
    animation: none;
    opacity: 0;
  }
}
@media (min-width: 1025px) {
  .footer-divider { display: none; }
}