@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #101010;
  --white: #ffffff;
  --blue: #0084ff;
  --font: "Gilroy", "Segoe UI", Arial, sans-serif;
  --stage: min(100vw, 1920px);
  --px: calc(var(--stage) / 1920);
  --py: calc(var(--stage) * 0.5625 / 1080);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  min-width: 350px;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a var(--bg);
}

body {
  width: 100%;
  min-width: 350px;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background: var(--bg);
}

html::-webkit-scrollbar-thumb {
  border: 3px solid var(--bg);
  border-radius: 10px;
  background: #3a3a3a;
}

a {
  color: inherit;
  text-decoration: none;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 999;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--white);
  color: #000;
  font-size: 16px;
  font-weight: 700;
  transform: translateY(calc(-100% - 16px));
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: none;
}

.line {
  display: block;
}

.notice-toast {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 300;
  max-width: calc(100vw - 32px);
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50px;
  background: rgba(16, 16, 16, 0.92);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.notice-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.page {
  --px: calc(100cqw / 1920);
  --py: calc(100cqh / 1080);

  position: relative;
  width: var(--stage);
  height: calc(var(--stage) * 0.5625);
  margin-inline: auto;
  overflow: hidden;
  container-type: size;
  background: var(--bg);
  isolation: isolate;
}

.glow {
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.glow::after {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  opacity: 0.55;
  animation: glow-shimmer 12s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.glow-left {
  left: calc(-260 * var(--px));
  top: calc(-520 * var(--py));
  width: calc(560 * var(--px));
  height: calc(1500 * var(--py));
  background:
    radial-gradient(ellipse 17% 15% at 85% 45%, rgba(150, 155, 162, 0.2) 0%, rgba(16, 16, 16, 0) 92%),
    radial-gradient(ellipse 50% 50% at 46% 46%, rgba(190, 193, 197, 0.68) 0%, rgba(165, 170, 176, 0.52) 30%, rgba(118, 126, 136, 0.24) 55%, rgba(16, 16, 16, 0) 82%),
    radial-gradient(ellipse 62% 46% at 38% 48%, rgba(130, 135, 142, 0.16) 0%, rgba(16, 16, 16, 0) 88%),
    radial-gradient(ellipse 40% 26% at 50% 64%, rgba(30, 80, 150, 0.18) 0%, rgba(16, 16, 16, 0) 76%);
  filter: blur(calc(24 * var(--px)));
  animation: glow-drift-left 26s ease-in-out infinite alternate;
}

.glow-left::after {
  background:
    radial-gradient(circle at 28% 36%, rgba(0, 132, 255, 0.26) 0%, rgba(0, 132, 255, 0) 52%),
    radial-gradient(circle at 58% 66%, rgba(190, 215, 255, 0.2) 0%, rgba(190, 215, 255, 0) 48%);
  animation-delay: -4s;
}

.glow-right {
  left: calc(1000 * var(--px));
  top: calc(-500 * var(--py));
  width: calc(1000 * var(--px));
  height: calc(1200 * var(--py));
  background:
    radial-gradient(ellipse 39% 33% at 77% 57%, rgba(180, 185, 192, 0.6) 0%, rgba(170, 177, 186, 0.55) 32%, rgba(130, 139, 152, 0.28) 58%, rgba(16, 16, 16, 0) 90%);
  filter: blur(calc(30 * var(--px)));
  animation: glow-drift-right 32s ease-in-out infinite alternate;
}

.glow-right::after {
  background:
    radial-gradient(circle at 62% 46%, rgba(90, 150, 255, 0.24) 0%, rgba(90, 150, 255, 0) 54%),
    radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 50%);
  animation-duration: 14s;
  animation-delay: -7s;
  animation-direction: alternate-reverse;
}

.character-layer {
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}

.character {
  left: 52.4%;
  bottom: 0;
  width: 50.3%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  animation: character-float 7.5s ease-in-out infinite;
  will-change: transform;
}

.character--static,
.character--video {
  transition: opacity 0.4s ease;
}

.character--video {
  opacity: 0;
}

.character-layer.is-video-ready .character--video {
  opacity: 1;
}

.character-layer.is-video-ready .character--static {
  opacity: 0;
}

.character-toggle {
  position: absolute;
  right: calc(128 * var(--px));
  top: calc(48 * var(--py));
  z-index: 6;
  display: grid;
  place-items: center;
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  padding: 0;
  border: calc(0.75 * var(--px)) solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(16, 16, 16, 0.35);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  -webkit-backdrop-filter: blur(calc(18 * var(--px)));
  backdrop-filter: blur(calc(18 * var(--px)));
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.12s ease;
}

.character-toggle:hover,
.character-toggle:focus-visible {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(16, 16, 16, 0.55);
  color: var(--white);
}

.character-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.character-toggle__icon {
  display: block;
  width: calc(14 * var(--px));
  height: calc(14 * var(--px));
}

.character-toggle__icon--play {
  display: none;
}

.character-toggle[aria-pressed="true"] .character-toggle__icon--pause {
  display: none;
}

.character-toggle[aria-pressed="true"] .character-toggle__icon--play {
  display: block;
}

.socials {
  position: absolute;
  top: calc(48 * var(--py));
  left: calc(128 * var(--px));
  z-index: 6;
  display: flex;
  gap: calc(12 * var(--px));
}

.socials__list {
  display: flex;
  gap: calc(12 * var(--px));
  list-style: none;
}

.social-link {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  border: calc(0.75 * var(--px)) solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(16, 16, 16, 0.35);
  color: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(calc(18 * var(--px)));
  backdrop-filter: blur(calc(18 * var(--px)));
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.12s ease;
}

.social-link:hover,
.social-link:focus-visible {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(16, 16, 16, 0.55);
  color: var(--white);
}

.social-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.social-link__icon {
  display: block;
  width: calc(18 * var(--px));
  height: calc(18 * var(--px));
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.social-link:hover .social-link__icon,
.social-link:focus-visible .social-link__icon {
  opacity: 1;
}

.social-link::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 10 * var(--px));
  left: 50%;
  z-index: 1;
  padding: calc(7 * var(--px)) calc(12 * var(--px));
  border: calc(0.75 * var(--px)) solid rgba(255, 255, 255, 0.18);
  border-radius: calc(10 * var(--px));
  background: rgba(16, 16, 16, 0.92);
  color: var(--white);
  font-size: calc(14 * var(--px));
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, calc(-4 * var(--px)));
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.social-link:hover::after,
.social-link:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

.page-fade {
  height: 28.0556%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(16, 16, 16, 0) 0%, rgba(16, 16, 16, 0.55) 45%, #101010 100%);
}

.site-header {
  position: fixed;
  top: 40px;
  left: 50%;
  width: calc(753 * var(--px));
  z-index: 100;
  border-radius: calc(70 * var(--px));
  transform: translateX(-50%);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  -webkit-backdrop-filter: blur(calc(50 * var(--px))) saturate(140%);
  backdrop-filter: blur(calc(50 * var(--px))) saturate(140%);
}

.site-header.is-hidden {
  transform: translate(-50%, calc(-100% - 52px));
}

.site-header.is-scrolled .nav-pill {
  background: rgba(16, 16, 16, 0.45);
}

.nav-pill {
  position: relative;
  width: 100%;
  height: calc(57 * var(--py));
  border: calc(0.75 * var(--px)) solid rgba(255, 255, 255, 0.95);
  border-radius: calc(70 * var(--px));
  background: rgba(255, 255, 255, 0.01);
  transition: background-color 0.35s ease;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-pill {
    background: rgba(16, 16, 16, 0.72);
  }
}

.nav-logo {
  position: absolute;
  left: calc(-0.5 * var(--px));
  top: 50%;
  width: calc(60 * var(--px));
  height: calc(60 * var(--px));
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.nav-logo:hover,
.nav-logo:focus-visible {
  transform: translateY(-50%) rotate(-10deg);
}

.nav-logo:active {
  transform: translateY(-50%) rotate(-10deg) scale(0.95);
}

.nav-logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.nav-links {
  --nav-ind-expand: calc(9 * var(--px));

  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--px));
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.nav-indicator {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 0;
  height: 0;
  padding: 0 var(--nav-ind-expand);
  border: calc(0.5 * var(--px)) solid var(--white);
  border-radius: calc(70 * var(--px));
  opacity: 0;
  pointer-events: none;
  will-change: transform, width;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
}

.nav-links.is-ready .nav-indicator {
  opacity: 1;
}

.nav-link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(37 * var(--py));
  padding: 0 calc(4 * var(--px));
  border: 0 solid transparent;
  border-radius: calc(70 * var(--px));
  font-size: calc(17 * var(--px));
  font-weight: 400;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.nav-link.is-active {
  font-weight: 500;
}

.nav-link:hover {
  opacity: 0.75;
}

.nav-shop {
  width: calc(108 * var(--px));
  height: calc(45 * var(--py));
  margin-right: calc(6 * var(--px));
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: calc(70 * var(--px));
  background: var(--blue);
  color: var(--white);
  font-size: calc(17 * var(--px));
  font-weight: 500;
  line-height: 1;
  flex: none;
  transition: filter 0.2s ease, transform 0.12s ease;
}

.nav-shop:hover,
.nav-shop:focus {
  background: var(--blue);
  color: var(--white);
  filter: brightness(1.12);
}

.hero {
  z-index: 4;
  padding: 0;
}

.hero__row {
  align-items: center;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: calc(55 * var(--py));
  padding-left: calc(186 * var(--px));
  padding-right: calc(24 * var(--px));
}

.online {
  height: calc(34 * var(--py));
  margin: 0 0 calc(26 * var(--py));
  gap: calc(14 * var(--px));
  white-space: nowrap;
}

.online-label {
  font-size: calc(24 * var(--px));
  font-weight: 400;
  line-height: 1;
}

.online-pill {
  width: auto;
  height: calc(34 * var(--py));
  padding: 0 calc(15 * var(--px));
  gap: calc(9 * var(--px));
  border: calc(1 * var(--px)) solid var(--white);
  border-radius: calc(50 * var(--px));
}

.online-count {
  font-size: calc(20 * var(--px));
  font-weight: 500;
  line-height: 1;
}

.online-dots {
  display: inline-flex;
  align-items: flex-end;
  height: 1em;
  line-height: 1;
}

.online-dot {
  display: inline-block;
  animation: online-dot-bounce 1s ease-in-out infinite;
}

.online-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.online-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes online-dot-bounce {
  0%,
  60%,
  100% {
    opacity: 0.45;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-0.22em);
  }
}

.icon-user {
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  flex: none;
  color: var(--white);
}

.headline {
  margin: 0 0 0 calc(-18 * var(--px));
  font-size: calc(128 * var(--px));
  font-weight: 700;
  line-height: calc(158 / 128);
  letter-spacing: 0;
  white-space: nowrap;
}

.story {
  height: calc(66 * var(--py));
  margin: calc(-2 * var(--py)) 0 0;
  font-size: calc(75 * var(--px));
  font-weight: 400;
  line-height: 1;
  transform: translateY(calc(-5 * var(--py)));
}

.story-text {
  display: block;
  line-height: 1;
  transform: translateY(0.08em);
}

.story-pill {
  --pill-w: 2.693em;
  --pill-h: 0.733em;
  --pill-gap: 0.107em;
  --pill-border: 0.08em;

  display: block;
  width: var(--pill-h);
  height: var(--pill-h);
  margin-left: -0.013em;
  margin-right: var(--pill-gap);
  border: var(--pill-border) solid var(--white);
  border-radius: 1.12em;
  transform: translateY(0.067em);
}

.story-pill.is-growing {
  animation: story-pill-grow 1.4s cubic-bezier(0.33, 1, 0.68, 1) both;
}

@keyframes story-pill-grow {
  from {
    width: var(--pill-h);
  }

  to {
    width: var(--pill-w);
  }
}

.subtitle {
  margin: calc(47 * var(--py)) 0 0;
  font-size: calc(24 * var(--px));
  font-weight: 400;
  line-height: 1;
}

.actions {
  height: calc(52 * var(--py));
  margin: calc(50 * var(--py)) 0 0;
  gap: calc(29 * var(--px));
}

.cta {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--px));
  width: calc(160 * var(--px));
  height: calc(52 * var(--py));
  margin: 0;
  padding: 0 0 0 calc(29 * var(--px));
  border: 0;
  border-radius: calc(50 * var(--px));
  background: var(--white);
  color: #000;
  font-size: calc(24 * var(--px));
  font-weight: 500;
  line-height: 1;
  flex: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta:hover,
.cta:focus {
  background: var(--white);
  color: #000;
  transform: translateY(calc(-2 * var(--py)));
  box-shadow: 0 calc(10 * var(--py)) calc(30 * var(--px)) rgba(255, 255, 255, 0.18);
}

.icon-play {
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  flex: none;
}

.platform {
  height: calc(36 * var(--py));
  gap: calc(11 * var(--px));
  font-size: calc(16 * var(--px));
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.icon-windows {
  width: calc(23 * var(--px));
  height: calc(23 * var(--px));
  flex: none;
  color: rgba(255, 255, 255, 0.5);
}

.steps {
  --k: calc(var(--stage) / 1920);

  position: relative;
  width: var(--stage);
  margin-inline: auto;
  height: calc(1302 * var(--k));
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

.steps__head {
  position: absolute;
  top: calc(70 * var(--k));
  left: calc(171 * var(--k));
  z-index: 5;
}

.steps__title {
  margin: 0;
  font-size: calc(85 * var(--k));
  font-weight: 700;
  line-height: calc(105 / 85);
  letter-spacing: 0;
}

.steps__subtitle {
  margin: 0;
  font-size: calc(24 * var(--k));
  font-weight: 400;
  line-height: calc(30 / 24);
}

.steps__subtitle-mark {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: calc(2 * var(--k));
  text-underline-offset: calc(3 * var(--k));
}

.steps__list {
  position: absolute;
  inset: 0;
}

.step {
  position: absolute;
  width: calc(773 * var(--k));
}

.step--requirements {
  top: calc(273 * var(--k));
  left: calc(171 * var(--k));
  height: calc(577 * var(--k));
}

.step--steam {
  top: calc(273 * var(--k));
  left: calc(976 * var(--k));
  height: calc(418 * var(--k));
}

.step--client {
  top: calc(723 * var(--k));
  left: calc(976 * var(--k));
  height: calc(436 * var(--k));
}

.step--support {
  top: calc(882 * var(--k));
  left: calc(171 * var(--k));
  height: calc(277 * var(--k));
}

.step__number {
  position: absolute;
  top: calc(-37 * var(--k));
  left: 0;
  z-index: 4;
  color: var(--white);
  font-size: calc(85 * var(--k));
  font-style: normal;
  font-weight: 400;
  line-height: calc(102 / 85);
  pointer-events: none;
}

.step__number--three {
  top: calc(-40 * var(--k));
  left: calc(7 * var(--k));
  font-weight: 700;
  line-height: calc(102 / 85);
}

.step-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(50 * var(--k));
  background: #101010;
  isolation: isolate;
}

.step-card__border {
  position: absolute;
  inset: 0;
  z-index: 5;
  border: calc(1 * var(--k)) solid rgba(255, 255, 255, 0.92);
  border-radius: inherit;
  pointer-events: none;
}

.step-card--requirements .step-card__border,
.step-card--steam .step-card__border,
.step-card--client .step-card__border {
  -webkit-mask-image: radial-gradient(
    circle at calc(25 * var(--k)) calc(25 * var(--k)),
    transparent 0 calc(67 * var(--k)),
    #000 calc(68 * var(--k))
  );
  mask-image: radial-gradient(
    circle at calc(25 * var(--k)) calc(25 * var(--k)),
    transparent 0 calc(67 * var(--k)),
    #000 calc(68 * var(--k))
  );
}

/* .step-card--support {
  background: #050505;
} */

.step-card--support::before {
  background:
    radial-gradient(ellipse 60% 120% at 8% 30%, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 65%),
    linear-gradient(180deg, #080808 0%, #030303 100%);
}

.step-card__photo {
  position: absolute;
  z-index: 1;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.step-card__photo--requirements {
  top: calc(-8 * var(--k));
  left: calc(95 * var(--k));
  width: calc(1043 * var(--k));
}

.step-card__photo--steam {
  top: calc(41 * var(--k));
  left: calc(394 * var(--k));
  width: calc(607 * var(--k));
}

.step-card__photo--client {
  top: calc(-55 * var(--k));
  left: calc(186 * var(--k));
  width: calc(736 * var(--k));
}

.step-card__photo--support {
  top: calc(-20 * var(--k));
  left: calc(434 * var(--k));
  width: calc(431 * var(--k));
}

.step-card__title {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: var(--white);
  font-size: calc(40 * var(--k));
  font-weight: 700;
  line-height: calc(50 / 40);
  letter-spacing: 0;
}

.step-card__title--requirements {
  top: calc(62 * var(--k));
  left: calc(50 * var(--k));
  width: calc(226 * var(--k));
}

.step-card__title--client {
  top: calc(62 * var(--k));
  left: calc(54 * var(--k));
  width: calc(200 * var(--k));
}

.step-card__title-row {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
}

.step-card__title-row--steam {
  top: calc(87 * var(--k));
  left: calc(43 * var(--k));
  gap: calc(10 * var(--k));
}

.step-card__title-row--support {
  top: calc(62 * var(--k));
  left: calc(54 * var(--k));
  gap: calc(12 * var(--k));
}

.step-card__title-row .step-card__title {
  position: static;
}

.step-card__icon-steamdeck {
  flex: none;
  width: calc(29 * var(--k));
  height: calc(40 * var(--k));
}

.step-card__icon-support {
  flex: none;
  width: calc(47 * var(--k));
  height: calc(35 * var(--k));
}

.step-card__text {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: var(--white);
  font-size: calc(24 * var(--k));
  font-weight: 400;
  line-height: calc(29 / 24);
}

.step-card__text--requirements {
  top: calc(423 * var(--k));
  left: calc(50 * var(--k));
  width: calc(439 * var(--k));
}

.step-card__text--steam {
  top: calc(189 * var(--k));
  left: calc(43 * var(--k));
  width: calc(397 * var(--k));
}

.step-card__text--client {
  top: calc(302 * var(--k));
  left: calc(54 * var(--k));
  width: calc(390 * var(--k));
}

.step-card__text--support {
  top: calc(124 * var(--k));
  left: calc(54 * var(--k));
  width: calc(336 * var(--k));
}

.step-card__button {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(9 * var(--k));
  height: calc(52 * var(--k));
  padding: 0;
  border: calc(1 * var(--k)) solid rgba(255, 255, 255, 0.92);
  border-radius: calc(50 * var(--k));
  background: rgba(17, 17, 17, 0.06);
  color: var(--white);
  font-family: inherit;
  font-size: calc(24 * var(--k));
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-backdrop-filter: blur(calc(25 * var(--k)));
  backdrop-filter: blur(calc(25 * var(--k)));
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.step-card__arrow {
  width: calc(24 * var(--k));
  height: calc(24 * var(--k));
  flex: none;
}

.step-card__button:hover,
.step-card__button:focus-visible {
  background: rgba(255, 255, 255, 0.13);
  color: var(--white);
  transform: translateY(calc(-1 * var(--k)));
}

.step-card__button--requirements {
  top: calc(440 * var(--k));
  left: calc(547 * var(--k));
  width: calc(160 * var(--k));
}

.step-card__button--steam {
  top: calc(315 * var(--k));
  left: calc(43 * var(--k));
  width: calc(160 * var(--k));
}

.step-card__button--client {
  top: calc(319 * var(--k));
  left: calc(553 * var(--k));
  width: calc(182 * var(--k));
}

.step-card__button--support {
  top: calc(177 * var(--k));
  left: calc(54 * var(--k));
  width: calc(182 * var(--k));
  border: 0;
  background: var(--white);
  color: #000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.step-card__button--support:hover,
.step-card__button--support:focus-visible {
  background: var(--white);
  color: #000;
  filter: brightness(0.9);
}

.step-card__details {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background:
    linear-gradient(315deg, rgba(16, 16, 16, 0) 0%, rgba(16, 16, 16, 0.3) 100%),
    rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-backdrop-filter: blur(calc(20 * var(--k)));
  backdrop-filter: blur(calc(20 * var(--k)));
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.step-card--requirements.is-open .step-card__details {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease;
}

.step-card__details-inner {
  position: absolute;
  inset: 0;
}

.step-card__details-title {
  position: absolute;
  top: calc(44 * var(--k));
  left: calc(50 * var(--k));
  margin: 0;
  color: var(--white);
  font-size: calc(40 * var(--k));
  font-weight: 700;
  line-height: calc(50 / 40);
  white-space: nowrap;
}

.step-card__details-title--recommended {
  top: calc(284 * var(--k));
}

.step-card__requirements {
  position: absolute;
  top: calc(107 * var(--k));
  left: calc(50 * var(--k));
  width: calc(500 * var(--k));
  margin: 0;
  padding: 0;
  color: var(--white);
  font-size: calc(24 * var(--k));
  font-weight: 400;
  line-height: calc(29 / 24);
  list-style: none;
  white-space: nowrap;
}

.step-card__requirements--recommended {
  top: calc(347 * var(--k));
}

.step-card__requirements li {
  position: relative;
  padding-left: calc(28 * var(--k));
}

.step-card__requirements li::before {
  content: "•";
  position: absolute;
  top: 0;
  left: 0;
}

.step-card__button--close {
  top: calc(440 * var(--k));
  left: calc(547 * var(--k));
  width: calc(160 * var(--k));
  font-weight: 700;
}

#support {
  scroll-margin-top: calc(130 * var(--k));
}

.shop-wrap {
  --k: calc(var(--stage) / 1920);

  position: relative;
  width: var(--stage);
  margin-inline: auto;
}

.shop {
  --k: calc(var(--stage) / 1920);
  --shop-blue: #0084ff;

  position: relative;
  isolation: isolate;
  width: var(--stage);
  height: calc(1080 * var(--k));
  margin-inline: auto;
  overflow: hidden;
  background: #101010;
}

.shop-glow {
  position: absolute;
  pointer-events: none;
}

.shop-glow--right {
  top: calc(120 * var(--k));
  right: calc(-300 * var(--k));
  width: calc(760 * var(--k));
  height: calc(1080 * var(--k));
  background:
    radial-gradient(ellipse 18% 16% at 52% 20%, rgba(150, 160, 175, 0.16) 0%, rgba(16, 16, 16, 0) 92%),
    radial-gradient(ellipse 52% 46% at 45% 55%, rgba(178, 196, 220, 0.5) 0%, rgba(150, 178, 214, 0.4) 34%, rgba(88, 132, 190, 0.2) 62%, rgba(16, 16, 16, 0) 86%),
    radial-gradient(ellipse 44% 32% at 52% 66%, rgba(0, 132, 255, 0.24) 0%, rgba(0, 132, 255, 0) 80%),
    radial-gradient(ellipse 28% 22% at 42% 58%, rgba(205, 228, 255, 0.18) 0%, rgba(16, 16, 16, 0) 84%);
  filter: blur(calc(42 * var(--k)));
  animation: glow-drift-right 30s ease-in-out infinite alternate;
}

.shop-glow--right::after {
  background:
    radial-gradient(circle at 48% 52%, rgba(0, 132, 255, 0.28) 0%, rgba(0, 132, 255, 0) 56%),
    radial-gradient(circle at 62% 40%, rgba(190, 215, 255, 0.2) 0%, rgba(190, 215, 255, 0) 50%);
  animation-duration: 16s;
  animation-delay: -6s;
}

.shop-wrap .shop-seam {
  position: absolute;
  top: calc(-460 * var(--k));
  left: calc(-250 * var(--k));
  z-index: 6;
  width: calc(660 * var(--k));
  height: calc(1080 * var(--k));
  filter: blur(calc(24 * var(--k)));
}

.shop__character-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}

.shop__character {
  position: absolute;
  bottom: 0;
  left: calc(-166 * var(--k));
  width: calc(1469 * var(--k));
  height: auto;
  user-select: none;
}

.shop__fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: calc(230 * var(--k));
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(16, 16, 16, 0) 0%, rgba(16, 16, 16, 0.55) 45%, #101010 100%);
}

.shop__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.shop__head {
  position: absolute;
  top: calc(30 * var(--k));
  left: calc(1112 * var(--k));
  width: calc(680 * var(--k));
}

.shop__title {
  margin: 0;
  color: var(--white);
  font-size: calc(85 * var(--k));
  font-weight: 700;
  line-height: 1.2353;
  letter-spacing: 0;
}

.shop__subtitle {
  margin: calc(2 * var(--k)) 0 0;
  color: var(--white);
  font-size: calc(24 * var(--k));
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
}

.shop__list {
  position: absolute;
  top: calc(231 * var(--k));
  left: calc(1112 * var(--k));
  width: calc(660 * var(--k));
  height: calc(751 * var(--k));
}

.shop-item {
  position: absolute;
  left: 0;
  width: calc(660 * var(--k));
  color: var(--white);
}

.shop-item--discount {
  --shop-photo-tilt: -5deg;
  --shop-photo-glow: rgba(0, 132, 255, 0.45);

  top: 0;
  height: calc(226 * var(--k));
}

.shop-item--base {
  --shop-photo-tilt: 4deg;
  --shop-photo-glow: rgba(237, 106, 89, 0.4);

  top: calc(267 * var(--k));
  height: calc(226 * var(--k));
}

.shop-item--cesar {
  --shop-photo-tilt: -3deg;
  --shop-photo-glow: rgba(251, 234, 175, 0.4);

  top: calc(505 * var(--k));
  height: calc(246 * var(--k));
}

.shop-item__divider {
  position: absolute;
  left: calc(198 * var(--k));
  width: calc(1 * var(--k));
  height: calc(48 * var(--k));
  background: var(--white);
}

.shop-item--discount .shop-item__divider {
  top: calc(37 * var(--k));
}

.shop-item--base .shop-item__divider {
  top: calc(76 * var(--k));
}

.shop-item--cesar .shop-item__divider {
  top: calc(85 * var(--k));
}

.shop-item__media {
  position: absolute;
  z-index: 0;
}

.shop-item__media--discount {
  top: 0;
  left: calc(46 * var(--k));
  width: calc(129 * var(--k));
  height: calc(123 * var(--k));
}

.shop-item__media--base {
  top: calc(3 * var(--k));
  left: calc(36 * var(--k));
  width: calc(161 * var(--k));
  height: calc(177 * var(--k));
}

.shop-item__media--cesar {
  top: 0;
  left: calc(20 * var(--k));
  width: calc(171 * var(--k));
  height: calc(171 * var(--k));
}

.shop-item__photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}

.shop-item:hover .shop-item__photo,
.shop-item:focus-within .shop-item__photo {
  transform: translateY(calc(-10 * var(--k))) rotate(var(--shop-photo-tilt, 0deg)) scale(1.07);
  filter: drop-shadow(0 calc(10 * var(--k)) calc(18 * var(--k)) var(--shop-photo-glow, rgba(255, 255, 255, 0.3)));
}

.shop-item__halo {
  position: absolute;
  z-index: 0;
  width: calc(100 * var(--k));
  height: calc(100 * var(--k));
  border-radius: 50%;
  filter: blur(calc(34 * var(--k)));
  opacity: 0.9;
  transition: transform 0.45s ease, opacity 0.45s ease;
}

.shop-item:hover .shop-item__halo,
.shop-item:focus-within .shop-item__halo {
  transform: scale(1.18);
  opacity: 1;
}

.shop-item__halo--blue {
  top: calc(11 * var(--k));
  left: calc(10 * var(--k));
  background: #0184ff;
}

.shop-item__halo--orange {
  top: calc(32 * var(--k));
  left: calc(29 * var(--k));
  background: #ed6a59;
}

.shop-item__halo--yellow {
  top: calc(52 * var(--k));
  left: calc(41 * var(--k));
  background: #fbeaaf;
}

.shop-item__title {
  position: absolute;
  margin: 0;
  color: var(--white);
  font-size: calc(32 * var(--k));
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

.shop-item__title strong {
  font-weight: 700;
}

.shop-item__title--discount {
  top: calc(4 * var(--k));
  left: calc(224 * var(--k));
  line-height: 1.2;
}

.shop-item__title--base {
  top: 0;
  left: calc(232 * var(--k));
  font-weight: 700;
  line-height: 1.25;
}

.shop-item__title--cesar {
  top: calc(29 * var(--k));
  left: calc(224 * var(--k));
  font-weight: 700;
  line-height: 1.25;
}

.shop-item__text {
  position: absolute;
  margin: 0;
  color: var(--white);
  font-size: calc(24 * var(--k));
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
}

.shop-item__text strong {
  font-weight: 700;
}

.shop-item__text--base {
  top: calc(100 * var(--k));
  left: calc(232 * var(--k));
  width: calc(280 * var(--k));
}

.shop-item__text--cesar {
  top: calc(120 * var(--k));
  left: calc(226 * var(--k));
  width: calc(258 * var(--k));
}

.shop-item__text--promo {
  top: calc(100 * var(--k));
  left: calc(224 * var(--k));
  width: calc(410 * var(--k));
}

.shop-item__button {
  position: absolute;
  left: calc(232 * var(--k));
  display: flex;
  align-items: center;
  width: calc(195 * var(--k));
  height: calc(52 * var(--k));
  padding: 0 0 0 calc(31 * var(--k));
  border: calc(1 * var(--k)) solid var(--shop-blue);
  border-radius: calc(50 * var(--k));
  background: transparent;
  color: var(--shop-blue);
  font-size: calc(24 * var(--k));
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  pointer-events: auto;
  backdrop-filter: blur(calc(25 * var(--k)));
  -webkit-backdrop-filter: blur(calc(25 * var(--k)));
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.shop-item--discount .shop-item__button--promo {
  top: calc(174 * var(--k));
  left: calc(224 * var(--k));
}

.shop-item--base .shop-item__button {
  top: calc(174 * var(--k));
}

.shop-item--cesar .shop-item__button {
  top: calc(194 * var(--k));
}

.shop-item__button-icon {
  position: absolute;
  top: calc(14 * var(--k));
  right: calc(17 * var(--k));
  width: calc(24 * var(--k));
  height: calc(24 * var(--k));
  color: var(--shop-blue);
}

.shop-item__button:hover {
  border-color: #3ba3ff;
  background: rgba(0, 132, 255, 0.1);
  transform: translateY(-1px);
}

.shop-item__button:focus-visible {
  outline: 2px solid rgba(0, 132, 255, 0.75);
  outline-offset: calc(4 * var(--k));
}

@media (hover: none) {
  .shop-item__button:hover {
    border-color: var(--shop-blue);
    background: transparent;
    transform: none;
  }
}

.shop-thought {
  position: absolute;
  top: calc(70 * var(--k));
  left: calc(700 * var(--k));
  z-index: 2;
  width: calc(500 * var(--k));
  height: calc(400 * var(--k));
  pointer-events: none;
}

.shop-thought__cloud {
  position: relative;
  width: calc(370 * var(--k));
  height: calc(340 * var(--k));
}

.shop-thought__shape {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 calc(20 * var(--k)) calc(38 * var(--k)) rgba(0, 74, 158, 0.45));
}

.shop-thought__body {
  position: absolute;
  top: calc(124 * var(--k));
  right: calc(56 * var(--k));
  bottom: calc(60 * var(--k));
  left: calc(56 * var(--k));
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

.shop-thought__title {
  margin: 0;
  color: var(--white);
  font-size: calc(21 * var(--k));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
}

.shop-thought__text {
  margin: calc(5 * var(--k)) 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(15 * var(--k));
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}

.shop-thought__text strong {
  color: #4da9ff;
  font-weight: 700;
}

.shop-thought__promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--k));
  height: calc(46 * var(--k));
  margin-top: auto;
  padding: 0 calc(6 * var(--k)) 0 calc(16 * var(--k));
  border: calc(1 * var(--k)) solid rgba(0, 132, 255, 0.5);
  border-radius: calc(13 * var(--k));
  background: linear-gradient(135deg, rgba(0, 132, 255, 0.26) 0%, rgba(0, 132, 255, 0.08) 100%);
}

.shop-thought__code {
  color: var(--white);
  font-family: inherit;
  font-size: calc(17 * var(--k));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  user-select: all;
}

.shop-thought__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(108 * var(--k));
  height: calc(34 * var(--k));
  padding: 0 calc(10 * var(--k));
  border: 0;
  border-radius: calc(9 * var(--k));
  background: var(--shop-blue);
  color: var(--white);
  font: inherit;
  font-size: calc(13 * var(--k));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.12s ease;
}

.shop-thought__copy:hover {
  background: #2f96ff;
}

.shop-thought__copy:active {
  transform: scale(0.97);
}

.shop-thought__copy:focus-visible {
  outline: 2px solid rgba(120, 190, 255, 0.9);
  outline-offset: calc(3 * var(--k));
}

.shop-thought__copy.is-copied {
  background: #1f9bff;
  box-shadow: 0 0 calc(16 * var(--k)) rgba(0, 132, 255, 0.55);
}

.promo-burst {
  position: fixed;
  inset: 0;
  z-index: 260;
  overflow: hidden;
  pointer-events: none;
}

.promo-burst__particle {
  position: absolute;
  border-radius: 50%;
  background: var(--promo-burst-color, #0084ff);
  will-change: transform, opacity;
}

.promo-burst__ring {
  position: absolute;
  border: 2px solid rgba(140, 205, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0, 132, 255, 0.65);
  will-change: transform, opacity;
}

.shop-thought__shop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--k));
  height: calc(44 * var(--k));
  margin-top: calc(8 * var(--k));
  border-radius: calc(13 * var(--k));
  background: var(--white);
  color: #000;
  font-size: calc(15 * var(--k));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shop-thought__shop:hover,
.shop-thought__shop:focus-visible {
  transform: translateY(calc(-1 * var(--k)));
  box-shadow: 0 calc(8 * var(--k)) calc(20 * var(--k)) rgba(255, 255, 255, 0.18);
}

.shop-thought__shop:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: calc(3 * var(--k));
}

.shop-thought__shop-icon {
  width: calc(16 * var(--k));
  height: calc(16 * var(--k));
  flex: none;
}

.shop-thought__trail {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: scaleX(-1);
  transform-origin: calc(185 * var(--k)) 0;
}

.shop-thought__dot {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  border-color: rgba(47, 127, 214, 0.95);
  background: linear-gradient(135deg, #16243a, #0c1626);
  box-shadow: 0 calc(2 * var(--k)) calc(8 * var(--k)) rgba(0, 0, 0, 0.5);
}

.shop-thought__dot--1 {
  top: calc(305 * var(--k));
  left: calc(339 * var(--k));
  width: calc(26 * var(--k));
  height: calc(26 * var(--k));
  border-width: calc(3 * var(--k));
}

.shop-thought__dot--2 {
  top: calc(327 * var(--k));
  left: calc(392 * var(--k));
  width: calc(17 * var(--k));
  height: calc(17 * var(--k));
  border-width: calc(2.5 * var(--k));
}

.shop-thought__dot--3 {
  top: calc(345 * var(--k));
  left: calc(434 * var(--k));
  width: calc(9 * var(--k));
  height: calc(9 * var(--k));
  border-width: calc(1.5 * var(--k));
}

@media (hover: none) {
  .shop-thought__copy:hover {
    background: var(--shop-blue);
  }

  .shop-thought__shop:hover {
    transform: none;
    box-shadow: none;
  }
}

.shop-thought__shop:active {
  transform: scale(0.97);
  box-shadow: none;
}

.join {
  --k: calc(var(--stage) / 1920);

  position: relative;
  isolation: isolate;
  width: var(--stage);
  height: calc(379 * var(--k));
  margin-inline: auto;
  overflow: hidden;
  background: var(--bg);
}

.join__head {
  position: absolute;
  top: calc(117 * var(--k));
  left: calc(173 * var(--k));
}

.join__title {
  margin: 0;
  color: var(--white);
  font-size: calc(85 * var(--k));
  font-weight: 700;
  line-height: calc(105 / 85);
  letter-spacing: 0;
  white-space: nowrap;
}

.join__subtitle {
  margin: calc(5 * var(--k)) 0 0;
  color: var(--white);
  font-size: calc(24 * var(--k));
  font-weight: 400;
  line-height: calc(29 / 24);
  white-space: nowrap;
}

.join__socials {
  position: absolute;
  top: calc(126 * var(--k));
  left: calc(882 * var(--k));
  display: flex;
  align-items: flex-start;
  gap: calc(166 * var(--k));
}

.join__socials-list {
  display: flex;
  align-items: flex-start;
  gap: calc(166 * var(--k));
  margin: 0;
  padding: 0;
  list-style: none;
}

.join-social {
  flex: none;
}

.join-social {
  transition: opacity 0.35s ease;
}

.join-social__link {
  --social-accent: #0084ff;
  --social-glow: rgba(0, 132, 255, 0.55);

  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--white);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.join-social:has(.join-social__image--telegram) .join-social__link {
  --social-accent: #2aabee;
  --social-glow: rgba(42, 171, 238, 0.55);
}

.join-social:has(.join-social__image--discord) .join-social__link {
  --social-accent: #5865f2;
  --social-glow: rgba(88, 101, 242, 0.6);
}

.join__socials:has(.join-social__link:hover) .join-social:not(:has(.join-social__link:hover)) {
  opacity: 0.4;
}

.join-social__link:hover {
  opacity: 1;
}

.join-social__link:hover .join-social__image,
.join-social__link:focus-visible .join-social__image {
  transform: translateY(calc(-10 * var(--k))) rotate(-8deg) scale(1.05);
  filter: drop-shadow(0 0 calc(16 * var(--k)) var(--social-glow));
}

.join-social__link:focus-visible {
  border-radius: calc(12 * var(--k));
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: calc(6 * var(--k));
}

.join-social__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(103 * var(--k));
}

.join-social__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(130 * var(--k));
  height: calc(130 * var(--k));
  border-radius: 50%;
  background: radial-gradient(circle, var(--social-glow) 0%, rgba(0, 0, 0, 0) 68%);
  filter: blur(calc(10 * var(--k)));
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.35s ease, transform 0.45s ease;
}

.join-social__link:hover .join-social__icon::before,
.join-social__link:focus-visible .join-social__icon::before {
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(1);
}

.join-social__image {
  display: block;
  width: calc(75 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
  transition: filter 0.3s ease, transform 0.35s ease;
}

.join-social__image--telegram {
  width: calc(76 * var(--k));
}

.join-social__image--discord {
  width: calc(84 * var(--k));
}

.join-social__label {
  position: relative;
  font-size: calc(32 * var(--k));
  font-weight: 700;
  line-height: calc(40 / 32);
  white-space: nowrap;
}

.join-social__label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(-3 * var(--k));
  left: 0;
  height: calc(3 * var(--k));
  border-radius: calc(3 * var(--k));
  background: var(--social-accent);
  box-shadow: 0 0 calc(12 * var(--k)) var(--social-glow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.join-social__link:hover .join-social__label::after,
.join-social__link:focus-visible .join-social__label::after {
  transform: scaleX(1);
}

.about {
  --k: calc(var(--stage) / 1920);

  position: relative;
  isolation: isolate;
  width: var(--stage);
  height: calc(1080 * var(--k));
  margin-inline: auto;
  overflow: hidden;
  background: var(--bg);
}

.about__arcs {
  position: absolute;
  z-index: 1;
  top: calc(-457 * var(--k));
  left: calc(990 * var(--k));
  width: calc(2283.293 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.about__character-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

.about__character {
  position: absolute;
  top: calc(62 * var(--k));
  left: calc(895 * var(--k));
  width: calc(1743 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.about__fade {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(140 * var(--k));
  background: linear-gradient(to bottom, rgba(16, 16, 16, 0), #101010);
  pointer-events: none;
}

.about__content {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.about__head {
  position: absolute;
  z-index: 5;
  top: calc(70 * var(--k));
  left: calc(171 * var(--k));
  pointer-events: auto;
}

.about__title {
  margin: 0;
  color: var(--white);
  font-size: calc(85 * var(--k));
  font-weight: 700;
  line-height: calc(105 / 85);
  letter-spacing: 0;
  white-space: nowrap;
}

.about__subtitle {
  margin: 0;
  color: var(--white);
  font-size: calc(24 * var(--k));
  font-weight: 400;
  line-height: calc(29 / 24);
  white-space: nowrap;
}

.about-card {
  position: absolute;
  overflow: hidden;
  width: calc(var(--w) * var(--k));
  height: calc(var(--h) * var(--k));
  border-radius: calc(50 * var(--k));
  background: #101010;
  pointer-events: auto;
  isolation: isolate;
}

.about-card.about-card {
  transition-property: opacity, transform, rotate;
  transition-duration: 0.35s;
  transition-timing-function: ease;
}

.about-card:hover,
.about-card:focus-within {
  rotate: -1.5deg;
}

.about-card::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  border: calc(1 * var(--k)) solid rgba(255, 255, 255, 0.25);
  border-radius: inherit;
  pointer-events: none;
}

.about-card--featured {
  --w: 359;
  --h: 671;
  --img-x: 0;
  --img-y: 0;
  --img-w: 359;
  --img-h: 726;
  --shade-top: 311;
  --shade-h: 431;
  --text-x: 36;
  --date-y: 37;
  --pill-y: 580;
  --status-y: 605;
  --button-x: 220;
  --button-y: 604;

  z-index: 0;
  top: calc(269 * var(--k));
  left: calc(919 * var(--k));
}

.about-card--20 {
  --w: 359;
  --h: 485;
  --img-x: -120;
  --img-y: -13;
  --img-w: 730;
  --img-h: 498;
  --shade-top: 195;
  --shade-h: 290;
  --text-x: 43;
  --date-y: 28;
  --pill-y: 398;
  --status-y: 430;
  --button-x: 222;
  --button-y: 422;

  top: calc(269 * var(--k));
  left: calc(171 * var(--k));
}

.about-card--18a {
  --w: 359;
  --h: 297;
  --img-x: -26;
  --img-y: -219;
  --img-w: 995;
  --img-h: 896;
  --shade-top: 7;
  --shade-h: 290;
  --text-x: 36;
  --date-y: 37;
  --pill-y: 210;
  --status-y: 242;
  --button-x: 222;
  --button-y: 232;

  top: calc(269 * var(--k));
  left: calc(545 * var(--k));
}

.about-card--17 {
  --w: 359;
  --h: 359;
  --img-x: 0;
  --img-y: 0;
  --img-w: 359;
  --img-h: 726;
  --text-x: 37;
  --date-y: 32;
  --pill-y: 272;
  --status-y: 297;
  --button-x: 222;
  --button-y: 297;

  top: calc(581 * var(--k));
  left: calc(545 * var(--k));
}

.about-card--19 {
  --w: 359;
  --h: 171;
  --img-x: 0;
  --img-y: 0;
  --img-w: 359;
  --img-h: 766;
  --text-x: 43;
  --date-y: 28;
  --pill-y: 98;
  --status-y: 123;
  --button-x: 223;
  --button-y: 113;

  top: calc(769 * var(--k));
  left: calc(171 * var(--k));
}

.about-card__photo {
  position: absolute;
  z-index: 0;
  display: block;
  top: calc(var(--img-y) * var(--k));
  left: calc(var(--img-x) * var(--k));
  width: calc(var(--img-w) * var(--k));
  height: calc(var(--img-h) * var(--k));
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.about-card__shade {
  position: absolute;
  z-index: 1;
  top: calc(var(--shade-top) * var(--k));
  left: 0;
  width: 100%;
  height: calc(var(--shade-h) * var(--k));
  background: linear-gradient(to bottom, rgba(16, 16, 16, 0), #101010);
  pointer-events: none;
}

.about-card--17 .about-card__shade {
  top: calc(179 * var(--k));
  height: calc(180 * var(--k));
  background: linear-gradient(to bottom, rgba(16, 16, 16, 0), rgba(16, 16, 16, 0.92));
}

.about-card--19 .about-card__shade {
  top: calc(71 * var(--k));
  height: calc(100 * var(--k));
  background: linear-gradient(to bottom, rgba(16, 16, 16, 0), rgba(16, 16, 16, 0.65));
}

.about-card__date {
  position: absolute;
  z-index: 2;
  top: calc(var(--date-y) * var(--k));
  left: calc(var(--text-x) * var(--k));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-card__day {
  font-size: calc(36 * var(--k));
  font-weight: 700;
  line-height: 1;
}

.about-card__month {
  margin-top: calc(-3 * var(--k));
  font-size: calc(20 * var(--k));
  font-weight: 400;
  line-height: 1;
}

.about-card__version {
  position: absolute;
  z-index: 2;
  top: calc(var(--pill-y) * var(--k));
  left: calc(var(--text-x) * var(--k));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(47 * var(--k));
  height: calc(25 * var(--k));
  border: calc(0.5 * var(--k)) solid var(--white);
  border-radius: calc(50 * var(--k));
  background: rgba(217, 217, 217, 0.01);
  font-size: calc(14 * var(--k));
  line-height: 1;
  -webkit-backdrop-filter: blur(calc(20 * var(--k)));
  backdrop-filter: blur(calc(20 * var(--k)));
}

.about-card__title {
  position: absolute;
  z-index: 2;
  top: calc(var(--status-y) * var(--k));
  left: calc(var(--text-x) * var(--k));
  margin: 0;
  font-size: calc(24 * var(--k));
  font-weight: 700;
  line-height: calc(30 / 24);
  white-space: nowrap;
}

.about-card__link {
  position: absolute;
  z-index: 3;
  top: calc(var(--button-y) * var(--k));
  left: calc(var(--button-x) * var(--k));
  display: flex;
  align-items: center;
  width: calc(107 * var(--k));
  height: calc(38 * var(--k));
  padding-left: calc(23 * var(--k));
  border: calc(0.5 * var(--k)) solid var(--white);
  border-radius: calc(50 * var(--k));
  background: rgba(255, 255, 255, 0.01);
  color: var(--white);
  font-family: inherit;
  font-size: calc(15 * var(--k));
  line-height: 1;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-backdrop-filter: blur(calc(25 * var(--k)));
  backdrop-filter: blur(calc(25 * var(--k)));
  transition: background 0.2s ease, transform 0.12s ease;
}

.about-card__arrow {
  position: absolute;
  top: calc(10 * var(--k));
  left: calc(77 * var(--k));
  width: calc(19 * var(--k));
  height: calc(19 * var(--k));
}

.about-card__link:hover,
.about-card__link:focus-visible {
  background: rgba(255, 255, 255, 0.13);
}

.about-card__link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: calc(3 * var(--k));
}

.about-card__link:active {
  transform: scale(0.95);
}

.footer {
  --k: calc(var(--stage) / 1920);

  position: relative;
  isolation: isolate;
  width: var(--stage);
  height: calc(370 * var(--k));
  margin-inline: auto;
  overflow: hidden;
  background: var(--white);
  color: #000;
}

.footer__brand {
  position: absolute;
  top: calc(95 * var(--k));
  left: calc(176 * var(--k));
  display: block;
  width: calc(940 * var(--k));
  height: calc(256 * var(--k));
  color: #000;
}

.footer__logo {
  position: relative;
  display: flex;
  gap: calc(43 * var(--k));
  font-size: calc(160 * var(--k));
  font-weight: 700;
  line-height: calc(158 / 128);
  letter-spacing: 0;
  white-space: nowrap;
}

.footer__logo > span {
  transition: opacity 0.35s ease;
}

.footer__particles {
  position: absolute;
  top: calc(-90 * var(--k));
  left: calc(-90 * var(--k));
  display: block;
  width: calc(100% + 180 * var(--k));
  height: calc(100% + 180 * var(--k));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.footer__brand.is-canvas .footer__logo > span {
  opacity: 0;
}

.footer__brand.is-canvas .footer__particles {
  opacity: 1;
}

.footer__tagline {
  position: absolute;
  top: calc(174 * var(--k));
  left: calc(22 * var(--k));
  display: flex;
  align-items: center;
  height: calc(82 * var(--k));
  font-size: calc(94 * var(--k));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.footer__tagline-text {
  display: block;
  transform: translateY(calc(8 * var(--k)));
}

.footer__pill {
  display: block;
  width: calc(253 * var(--k));
  height: calc(69 * var(--k));
  margin-left: calc(-1 * var(--k));
  margin-right: calc(10 * var(--k));
  border: calc(8 * var(--k)) solid #000;
  border-radius: calc(105 * var(--k));
  transform: translateY(calc(6 * var(--k)));
}

.footer__nav {
  position: absolute;
  top: calc(125 * var(--k));
  left: calc(1159 * var(--k));
  display: flex;
  align-items: flex-start;
  gap: calc(64 * var(--k));
}

.footer__col {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: calc(20 * var(--k));
  color: #000;
}

.footer__col-list {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--k));
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__col-title {
  margin: 0;
  font-size: calc(20 * var(--k));
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.footer__link {
  font-size: calc(18 * var(--k));
  font-weight: 400;
  line-height: 1.35;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.footer__link:hover {
  opacity: 0.62;
}

.footer__link:focus-visible {
  border-radius: calc(4 * var(--k));
  outline: 2px solid rgba(0, 0, 0, 0.7);
  outline-offset: calc(3 * var(--k));
}

.footer__legal {
  position: absolute;
  bottom: calc(27 * var(--k));
  left: calc(176 * var(--k));
  font-size: calc(15 * var(--k));
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.footer__brand:focus-visible {
  border-radius: calc(16 * var(--k));
  outline: 2px solid rgba(0, 0, 0, 0.7);
  outline-offset: calc(8 * var(--k));
}

@keyframes glow-drift-left {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(calc(16 * var(--px)), calc(-20 * var(--py)), 0) scale(1.045);
  }
}

@keyframes glow-drift-right {
  from {
    transform: translate3d(0, 0, 0) scale(1.02);
  }
  to {
    transform: translate3d(calc(-18 * var(--px)), calc(16 * var(--py)), 0) scale(0.97);
  }
}

@keyframes glow-shimmer {
  from {
    transform: translate3d(-3%, 2%, 0) scale(0.96);
    opacity: 0.45;
  }
  to {
    transform: translate3d(3%, -2%, 0) scale(1.06);
    opacity: 0.85;
  }
}

@keyframes character-float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-0.55vh) rotate(-0.25deg);
  }
}

@media (min-width: 1921px) {
  .page {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 calc(110 * var(--px)),
      #000 calc(100% - 110 * var(--px)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 calc(110 * var(--px)),
      #000 calc(100% - 110 * var(--px)),
      transparent 100%
    );
  }

  .shop,
  .join,
  .about,
  .footer {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 calc(110 * var(--k)),
      #000 calc(100% - 110 * var(--k)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 calc(110 * var(--k)),
      #000 calc(100% - 110 * var(--k)),
      transparent 100%
    );
  }
}

@media (max-width: 1320px) {
  .page {
    width: 100%;
    height: 100svh;
    max-height: 100svh;
    container-type: inline-size;
  }

  .site-header {
    width: calc(100% - 32px);
    max-width: 760px;
    border-radius: 70px;
  }

  .nav-pill {
    height: 56px;
    padding: 0 6px;
    border-radius: 70px;
  }

  .nav-logo {
    left: 0;
    width: 58px;
    height: 58px;
  }

  .nav-links {
    --nav-ind-expand: 5px;

    padding: 0 5px;
    gap: 14px;
    overflow: hidden;
  }

  .nav-link {
    height: 33px;
    padding: 0 8px;
    font-size: 14px;
  }

  .nav-shop {
    width: 92px;
    height: 42px;
    margin-right: 0;
    font-size: 14px;
  }

  .character-toggle {
    top: 108px;
    right: 16px;
    left: auto;
    width: 38px;
    height: 38px;
    border-width: 1px;
  }

  .character-toggle__icon {
    width: 14px;
    height: 14px;
  }

  .socials {
    display: none;
  }

  .hero__row {
    align-items: flex-start;
  }

  .hero__content {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin-bottom: 0;
    padding: clamp(96px, 16vh, 170px) 5vw 0;
  }

  .online {
    height: 32px;
    margin: 0 0 20px;
    gap: 12px;
  }

  .online-label {
    font-size: 20px;
  }

  .online-pill {
    width: auto;
    height: 32px;
    padding: 0 12px;
    gap: 8px;
  }

  .online-count {
    font-size: 17px;
  }

  .icon-user {
    width: 21px;
    height: 21px;
  }

  .headline {
    margin-left: 0;
    font-size: clamp(44px, 9vw, 84px);
    line-height: 1.05;
    white-space: normal;
  }

  .story {
    height: auto;
    margin: 10px 0 0;
    font-size: clamp(28px, 5.4vw, 54px);
    transform: none;
  }

  .subtitle {
    margin: 22px 0 0;
    max-width: 34rem;
    font-size: 18px;
    line-height: 1.35;
    white-space: normal;
  }

  .actions {
    height: auto;
    margin: 26px 0 0;
    gap: 18px;
  }

  .cta {
    width: 150px;
    height: 52px;
    padding-left: 26px;
    font-size: 22px;
  }

  .icon-play {
    width: 22px;
    height: 22px;
  }

  .platform {
    height: 34px;
    gap: 9px;
    font-size: 15px;
  }

  .icon-windows {
    width: 21px;
    height: 21px;
  }

  .character {
    left: auto;
    right: -4vw;
    top: auto;
    bottom: 0;
    width: min(75vh, 90vw);
    height: auto;
    opacity: 0.88;
  }

  .glow-left {
    left: -160px;
    top: -140px;
    width: 520px;
    height: 900px;
    filter: blur(26px);
  }

  .glow-right {
    left: auto;
    right: -260px;
    top: -160px;
    width: 780px;
    height: 820px;
    filter: blur(32px);
  }

  .page-fade {
    height: 30%;
  }

  .steps {
    width: 100%;
    height: auto;
    padding: 64px 5vw 80px;
    overflow: visible;
  }

  .steps__head {
    position: static;
    margin-bottom: 34px;
  }

  .steps__title {
    max-width: 100%;
    font-size: clamp(32px, 8.2vw, 60px);
    line-height: 1.06;
  }

  .steps__subtitle {
    margin-top: 10px;
    font-size: 18px;
    line-height: 1.4;
  }

  .steps__subtitle-mark {
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }

  .steps__list {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .step {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
  }

  .step__number {
    display: none;
  }

  .step-card {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 380px;
    padding: 30px 26px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 28px;
  }

  .step-card__border {
    display: none;
  }

  .step-card--requirements {
    min-height: clamp(360px, 60vw, 520px);
  }

  .step-card--steam {
    min-height: clamp(300px, 45vw, 400px);
  }

  .step-card--client {
    min-height: clamp(340px, 50vw, 460px);
  }

  .step-card--support {
    min-height: clamp(240px, 32vw, 300px);
  }

  .step-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(10, 10, 10, 0.97) 0%, rgba(10, 10, 10, 0.82) 42%, rgba(10, 10, 10, 0.2) 100%);
    pointer-events: none;
  }

  .step-card__photo {
    z-index: 0;
  }

  .step-card__photo--requirements {
    top: auto;
    right: -24%;
    bottom: -8%;
    left: auto;
    width: 125%;
    opacity: 0.72;
  }

  .step-card__photo--steam {
    top: 52%;
    right: -22%;
    left: auto;
    width: 102%;
    opacity: 0.68;
    transform: translateY(-50%);
  }

  .step-card__photo--client {
    top: auto;
    right: -26%;
    bottom: -10%;
    left: auto;
    width: 110%;
    opacity: 0.72;
  }

  .step-card__photo--support {
    top: -8%;
    right: -6%;
    bottom: auto;
    left: auto;
    width: 62%;
    opacity: 0.85;
  }

  .step-card__title,
  .step-card__title-row {
    position: relative;
    top: auto;
    left: auto;
  }

  .step-card__title {
    width: auto;
    font-size: clamp(28px, 4.6vw, 38px);
    line-height: 1.15;
  }

  .step-card__title--requirements {
    width: 72%;
  }

  .step-card__title--client {
    width: 64%;
  }

  .step-card__title-row--steam,
  .step-card__title-row--support {
    gap: 10px;
  }

  .step-card__icon-steamdeck {
    width: 23px;
    height: 32px;
  }

  .step-card__icon-support {
    width: 38px;
    height: 28px;
  }

  .step-card__text {
    position: relative;
    top: auto;
    left: auto;
    width: 68%;
    margin-top: 14px;
    font-size: clamp(15px, 2.1vw, 19px);
    line-height: 1.35;
  }

  .step-card__text--steam {
    width: 62%;
  }

  .step-card__text--client {
    width: 60%;
  }

  .step-card__text--support {
    width: 56%;
  }

  .step-card__button {
    position: relative;
    width: max-content;
    min-width: 150px;
    height: 48px;
    margin-top: 24px;
    padding: 0 24px;
    border-width: 1px;
    border-radius: 50px;
    font-size: 17px;
  }

  .step-card__button--requirements,
  .step-card__button--steam,
  .step-card__button--client,
  .step-card__button--support {
    top: auto;
    left: auto;
    width: max-content;
  }

  .step-card__button--support {
    min-width: 160px;
  }

  .step-card__arrow {
    width: 20px;
    height: 20px;
  }

  .step-card__details-inner {
    display: flex;
    flex-direction: column;
    padding: 30px 26px;
    overflow-y: auto;
  }

  .step-card__details-title {
    position: static;
    font-size: clamp(24px, 3.6vw, 32px);
    line-height: 1.15;
    white-space: normal;
  }

  .step-card__details-title--recommended {
    margin-top: 22px;
  }

  .step-card__requirements {
    position: static;
    width: auto;
    margin-top: 10px;
    font-size: clamp(13px, 1.7vw, 16px);
    line-height: 1.4;
    white-space: normal;
  }

  .step-card__requirements--recommended {
    margin-bottom: 18px;
  }

  .step-card__requirements li {
    padding-left: 18px;
  }

  .step-card__button--close {
    position: static;
    align-self: flex-end;
    width: max-content;
    min-width: 150px;
    height: 48px;
    margin-top: auto;
    padding: 0 24px;
    font-size: 17px;
  }

  #support {
    scroll-margin-top: 110px;
  }
}

@media (max-width: 720px) {
  .site-header {
    width: calc(100% - 28px);
  }

  .nav-pill {
    height: 52px;
  }

  .nav-logo {
    width: 52px;
    height: 52px;
  }

  .nav-links {
    display: none;
  }

  .nav-shop {
    margin-left: auto;
  }

  .hero__content {
    padding-top: clamp(96px, 16vh, 170px);
  }

  .headline {
    font-size: clamp(44px, 13.2vw, 76px);
  }

  .story {
    font-size: clamp(26px, 7.6vw, 44px);
  }

  .subtitle {
    margin-top: 18px;
    max-width: 70vw;
    font-size: 17px;
  }

  .actions {
    margin-top: 22px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .character {
    right: -12vw;
    width: min(62vh, 84vw);
    height: auto;
    opacity: 0.6;
  }

  .page-fade {
    height: 26%;
  }

  .steps {
    padding: 56px 16px 64px;
  }

  .steps__head {
    margin-bottom: 28px;
  }

  .steps__title {
    font-size: clamp(24px, 7.8vw, 44px);
  }

  .steps__subtitle {
    font-size: 16px;
  }

  .step-card {
    min-height: 340px;
    padding: 24px 20px;
    border-radius: 24px;
  }

  .step-card__title {
    font-size: clamp(25px, 6.6vw, 32px);
  }

  .step-card__text {
    width: 76%;
    margin-top: 12px;
    font-size: 15px;
  }

  .step-card__text--steam,
  .step-card__text--client {
    width: 70%;
  }

  .step-card__text--support {
    width: 58%;
  }

  .step-card__button {
    min-width: 140px;
    height: 46px;
    margin-top: 20px;
    padding: 0 22px;
    font-size: 16px;
  }

  .step-card__photo--requirements {
    right: -32%;
    width: 138%;
    opacity: 0.6;
  }

  .step-card__photo--steam {
    right: -30%;
    width: 112%;
    opacity: 0.6;
  }

  .step-card__photo--client {
    right: -34%;
    width: 122%;
    opacity: 0.62;
  }

  .step-card__photo--support {
    top: 2%;
    right: -10%;
    width: 68%;
  }

  .step-card--requirements.is-open {
    min-height: 470px;
  }

  .step-card__details-inner {
    padding: 24px 20px;
  }

  .step-card__details-title {
    font-size: clamp(22px, 6vw, 28px);
  }

  .step-card__requirements {
    font-size: 14px;
  }

  .step-card__button--close {
    min-width: 140px;
    height: 46px;
    padding: 0 22px;
    font-size: 16px;
  }
}

@media (max-height: 620px) and (max-width: 900px) {
  .nav-pill {
    height: 50px;
    padding-left: 56px;
  }

  .nav-logo {
    width: 52px;
    height: 52px;
  }

  .nav-link {
    height: 30px;
    padding: 0 7px;
    font-size: 13px;
  }

  .nav-link.is-active {
    padding: 0 11px;
  }

  .nav-shop {
    width: 86px;
    height: 38px;
    font-size: 13px;
  }

  .hero__content {
    padding: 72px 4vw 0;
  }

  .online {
    height: 28px;
    margin-bottom: 10px;
    gap: 10px;
  }

  .online-label {
    font-size: 16px;
  }

  .online-pill {
    width: auto;
    height: 28px;
    padding: 0 10px;
    gap: 6px;
  }

  .online-count {
    font-size: 15px;
  }

  .icon-user {
    width: 18px;
    height: 18px;
  }

  .headline {
    font-size: clamp(38px, 6.4vw, 56px);
    line-height: 1.06;
  }

  .story {
    margin-top: 8px;
    font-size: clamp(24px, 3.9vw, 34px);
  }

  .subtitle {
    margin-top: 10px;
    max-width: none;
    font-size: 14px;
    white-space: nowrap;
  }

  .actions {
    margin-top: 14px;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .cta {
    width: 128px;
    height: 44px;
    padding-left: 22px;
    font-size: 19px;
  }

  .icon-play {
    width: 19px;
    height: 19px;
  }

  .platform {
    height: 30px;
    gap: 7px;
    font-size: 13px;
  }

  .icon-windows {
    width: 18px;
    height: 18px;
  }

  .character {
    right: -3vw;
    width: min(72vh, 42vw);
    height: auto;
    opacity: 0.85;
  }

  .page-fade {
    height: 20%;
  }
}

.download-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 8, 8, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-backdrop-filter: blur(20px) saturate(90%);
  backdrop-filter: blur(20px) saturate(90%);
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.download-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease;
}

.download-modal__dialog {
  --mx: calc(min(1580px, 82.2917vw, 146.2921vh) / 1580);

  position: relative;
  width: min(1580px, 82.2917vw, 146.2921vh);
  aspect-ratio: 1580 / 890;
  overflow: hidden;
  border: calc(1 * var(--mx)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(50 * var(--mx));
  background: #191919;
  isolation: isolate;
  transform: translateY(calc(12 * var(--mx))) scale(0.985);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.download-modal.is-open .download-modal__dialog {
  transform: none;
}

.download-modal__dialog:focus {
  outline: none;
}

.download-modal__media {
  --split-top: 67.0253%;
  --split-bottom: 34.4937%;
  --divider-shift: 0%;

  position: absolute;
  inset: 0;
}

.download-modal__half {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
  transition: clip-path 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.download-modal__half--196 {
  clip-path: polygon(0 0, var(--split-top) 0, var(--split-bottom) 100%, 0 100%);
}

.download-modal__half--217 {
  clip-path: polygon(var(--split-top) 0, 100% 0, 100% 100%, var(--split-bottom) 100%);
}

.download-modal__half-inner {
  position: absolute;
  inset: 0;
  display: block;
  transition: filter 0.45s ease;
}

.download-modal__photo {
  position: absolute;
  max-width: none;
  pointer-events: none;
  user-select: none;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.download-modal__photo--196 {
  top: calc(-160 * var(--mx));
  left: calc(-307 * var(--mx));
  width: calc(1640 * var(--mx));
  height: calc(1345 * var(--mx));
  transform-origin: top left;
}

.download-modal__photo--217 {
  top: calc(-183 * var(--mx));
  left: calc(306 * var(--mx));
  width: calc(1307 * var(--mx));
  height: calc(1151 * var(--mx));
  transform-origin: top right;
}

.download-modal__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.download-modal__shade--196 {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.16) 22%, rgba(0, 0, 0, 0) 44%),
    linear-gradient(100deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.14) 32%, rgba(0, 0, 0, 0) 58%);
}

.download-modal__shade--217 {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.3) 26%, rgba(0, 0, 0, 0) 58%),
    linear-gradient(285deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 42%);
}

.download-modal__version {
  position: absolute;
  z-index: 3;
  color: var(--white);
  font-size: calc(64 * var(--mx));
  font-weight: 400;
  line-height: calc(79 / 64);
  white-space: nowrap;
}

.download-modal__version strong {
  font-weight: 700;
}

.download-modal__version--196 {
  top: calc(44 * var(--mx));
  left: calc(51 * var(--mx));
}

.download-modal__version--217 {
  top: calc(764 * var(--mx));
  left: calc(1174 * var(--mx));
}

.download-modal__download {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(9 * var(--mx));
  width: calc(166 * var(--mx));
  height: calc(52 * var(--mx));
  border: calc(1 * var(--mx)) solid rgba(255, 255, 255, 0.92);
  border-radius: calc(50 * var(--mx));
  background: rgba(17, 17, 17, 0.01);
  color: var(--white);
  font-size: calc(20 * var(--mx));
  font-weight: 400;
  line-height: 1;
  -webkit-backdrop-filter: blur(calc(25 * var(--mx)));
  backdrop-filter: blur(calc(25 * var(--mx)));
  transition: background-color 0.2s ease, transform 0.12s ease;
}

.download-modal__download--196 {
  top: calc(134 * var(--mx));
  left: calc(51 * var(--mx));
}

.download-modal__download--217 {
  top: calc(691 * var(--mx));
  left: calc(1356 * var(--mx));
}

.download-modal__download-icon {
  width: calc(24 * var(--mx));
  height: calc(24 * var(--mx));
  flex: none;
}

.download-modal__perks {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-auto-rows: calc(52 * var(--mx));
  gap: calc(12 * var(--mx)) calc(10 * var(--mx));
  pointer-events: none;
  visibility: hidden;
}

.download-modal__perk {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(18 * var(--mx));
  border: calc(1 * var(--mx)) solid rgba(255, 255, 255, 0.55);
  border-radius: calc(50 * var(--mx));
  background: rgba(20, 18, 16, 0.42);
  color: var(--white);
  font-size: calc(20 * var(--mx));
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(var(--perk-from, 0), 0, 0);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--perk-delay, 0s);
  -webkit-backdrop-filter: blur(calc(25 * var(--mx)));
  backdrop-filter: blur(calc(25 * var(--mx)));
}

.download-modal__hint {
  position: absolute;
  bottom: clamp(16px, 3.5vh, 40px);
  left: 50%;
  margin: 0;
  max-width: calc(100% - 48px);
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(13px, 1.14vw, 18px);
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.download-modal__perks--196 .download-modal__perk:nth-child(1) {
  --perk-delay: 0s;
}

.download-modal__perks--196 .download-modal__perk:nth-child(2) {
  --perk-delay: 0.06s;
}

.download-modal__perks--196 .download-modal__perk:nth-child(3) {
  --perk-delay: 0.12s;
}

.download-modal__perks--196 .download-modal__perk:nth-child(4) {
  --perk-delay: 0.18s;
}

.download-modal__perks--217 .download-modal__perk:nth-child(1) {
  --perk-delay: 0.06s;
}

.download-modal__perks--217 .download-modal__perk:nth-child(2) {
  --perk-delay: 0s;
}

.download-modal__perks--217 .download-modal__perk:nth-child(3) {
  --perk-delay: 0.18s;
}

.download-modal__perks--217 .download-modal__perk:nth-child(4) {
  --perk-delay: 0.12s;
}

.download-modal__perks--196 {
  --perk-from: calc(-26 * var(--mx));

  top: calc(210 * var(--mx));
  left: calc(51 * var(--mx));
}

.download-modal__perks--217 {
  --perk-from: calc(26 * var(--mx));

  top: calc(563 * var(--mx));
  right: calc(58 * var(--mx));
}

.download-modal__half--196:focus-visible .download-modal__perk,
.download-modal__half--217:focus-visible .download-modal__perk {
  opacity: 1;
  transform: none;
}

.download-modal__half--196:focus-visible .download-modal__perks--196,
.download-modal__half--217:focus-visible .download-modal__perks--217 {
  visibility: visible;
}

.download-modal__divider {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translateX(var(--divider-shift));
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.download-modal__divider line {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1;
}

.download-modal__close {
  position: absolute;
  top: max(calc(38 * var(--mx)), 14px);
  right: max(calc(37 * var(--mx)), 14px);
  z-index: 10;
  display: grid;
  place-items: center;
  width: max(calc(39 * var(--mx)), 28px);
  height: max(calc(42 * var(--mx)), 30px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.12s ease;
}

.download-modal__close svg {
  display: block;
  width: 100%;
  height: 100%;
}

.download-modal__close circle,
.download-modal__close path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.download-modal__close path {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.download-modal__close:hover {
  opacity: 0.7;
}

.download-modal__close:focus-visible {
  border-radius: calc(70 * var(--mx));
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.nav-shop:active,
.character-toggle:active,
.social-link:active,
.join-social__link:active,
.cta:active,
.step-card__button:active,
.shop-item__button:active,
.download-modal__close:active,
.download-modal__half:active .download-modal__download {
  transform: scale(0.95);
}

.site-header .nav-shop:active,
.site-header .nav-shop:active:hover,
.site-header .nav-shop:active:focus {
  border-color: transparent;
  background: var(--blue);
  color: var(--white);
  filter: none;
  transform: scale(0.95);
}

.actions .cta:active,
.actions .cta:active:hover,
.actions .cta:active:focus {
  border: 0;
  background: var(--white);
  color: #000;
  box-shadow: none;
  transform: scale(0.95);
}

@media (hover: hover) and (pointer: fine) {
  .download-modal.is-hover-active .download-modal__media:has(.download-modal__half--196:hover) {
    --split-top: 78.4810%;
    --split-bottom: 45.9494%;
    --divider-shift: 11.4557%;
  }

  .download-modal.is-hover-active .download-modal__media:has(.download-modal__half--217:hover) {
    --split-top: 55.0633%;
    --split-bottom: 22.5316%;
    --divider-shift: -11.9620%;
  }

  .download-modal.is-hover-active .download-modal__media:has(.download-modal__half--196:hover) .download-modal__photo--196 {
    transform: translateX(calc(28 * var(--mx))) scale(1.015);
  }

  .download-modal.is-hover-active .download-modal__media:has(.download-modal__half--196:hover) .download-modal__photo--217 {
    transform: scale(0.97);
  }

  .download-modal.is-hover-active .download-modal__media:has(.download-modal__half--217:hover) .download-modal__photo--217 {
    transform: translateX(calc(-28 * var(--mx))) scale(1.015);
  }

  .download-modal.is-hover-active .download-modal__media:has(.download-modal__half--217:hover) .download-modal__photo--196 {
    transform: scale(0.97);
  }

  .download-modal.is-hover-active .download-modal__media:has(.download-modal__half--196:hover) .download-modal__half--217 .download-modal__half-inner,
  .download-modal.is-hover-active .download-modal__media:has(.download-modal__half--217:hover) .download-modal__half--196 .download-modal__half-inner {
    filter: grayscale(1) blur(calc(5 * var(--mx))) brightness(0.62);
  }

  .download-modal.is-hover-active .download-modal__half:hover .download-modal__download {
    background: rgba(255, 255, 255, 0.12);
  }

  .download-modal.is-hover-active .download-modal__half--196:hover .download-modal__perks--196,
  .download-modal.is-hover-active .download-modal__half--217:hover .download-modal__perks--217 {
    visibility: visible;
  }

  .download-modal.is-hover-active .download-modal__half--196:hover .download-modal__perk,
  .download-modal.is-hover-active .download-modal__half--217:hover .download-modal__perk {
    opacity: 1;
    transform: none;
  }
}

html.is-modal-open {
  overflow: hidden;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .download-modal {
    background: rgba(8, 8, 8, 0.82);
  }
}

html.is-menu-open {
  overflow: hidden;
}

.nav-burger {
  position: relative;
  display: none;
  flex: none;
  width: 42px;
  height: 42px;
  margin-left: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.12s ease;
}

.nav-burger:hover,
.nav-burger:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

.nav-burger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.nav-burger:active {
  transform: scale(0.95);
}

.nav-burger span {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  margin-left: -9px;
  border-radius: 2px;
  background: currentColor;
  transition: top 0.3s ease, transform 0.3s ease, opacity 0.2s ease;
}

.nav-burger span:nth-child(1) {
  top: 14px;
}

.nav-burger span:nth-child(2) {
  top: 20px;
}

.nav-burger span:nth-child(3) {
  top: 26px;
}

.nav-burger[aria-expanded="true"] span:nth-child(1) {
  top: 20px;
  transform: rotate(45deg);
}

.nav-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}

.nav-burger[aria-expanded="true"] span:nth-child(3) {
  top: 20px;
  transform: rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  visibility: hidden;
  pointer-events: none;
}

.mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.62);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  backdrop-filter: blur(26px) saturate(130%);
}

.mobile-menu__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: 560px;
  height: 100%;
  margin-inline: auto;
  padding: 132px 24px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu.is-open .mobile-menu__panel {
  opacity: 1;
  transform: none;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(14px);
  transition: color 0.2s ease, padding-left 0.2s ease,
    opacity 0.35s ease var(--menu-link-delay, 0s),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--menu-link-delay, 0s);
}

.mobile-menu__link::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0;
  flex: none;
  transition: opacity 0.2s ease;
}

.mobile-menu__link:hover,
.mobile-menu__link:focus-visible {
  color: var(--white);
  padding-left: 8px;
}

.mobile-menu__link:focus-visible {
  border-radius: 8px;
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.mobile-menu__link.is-active {
  color: var(--white);
}

.mobile-menu__link.is-active::before {
  opacity: 1;
}

.mobile-menu.is-open .mobile-menu__link {
  opacity: 1;
  transform: none;
}

.mobile-menu.is-open .mobile-menu__link:nth-child(1) {
  --menu-link-delay: 0.1s;
}

.mobile-menu.is-open .mobile-menu__link:nth-child(2) {
  --menu-link-delay: 0.17s;
}

.mobile-menu.is-open .mobile-menu__link:nth-child(3) {
  --menu-link-delay: 0.24s;
}

.mobile-menu.is-open .mobile-menu__link:nth-child(4) {
  --menu-link-delay: 0.31s;
}

.mobile-menu.is-open .mobile-menu__link:nth-child(5) {
  --menu-link-delay: 0.38s;
}

.mobile-menu__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.mobile-menu__socials-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 21px;
  list-style: none;
}

.mobile-menu__social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}

.mobile-menu__social img {
  display: block;
  width: 22px;
  height: 22px;
  opacity: 0.85;
}

.mobile-menu__social:hover,
.mobile-menu__social:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.32);
}

.mobile-menu__social:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.mobile-menu__social:active {
  transform: scale(0.95);
}

@media (max-width: 1023px) {
  .character--video,
  .character--static,
  .character-toggle {
    display: none !important;
  }
}

.scroll-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(20px, calc(16px + env(safe-area-inset-bottom)));
  z-index: 90;
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(16, 16, 16, 0.55);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s,
    background-color 0.2s ease;
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}

.scroll-top:active {
  transform: scale(0.94);
}

.scroll-top:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

html.is-menu-open .scroll-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.scroll-top__icon {
  display: block;
  width: 22px;
  height: 22px;
}

@media (max-width: 1024px) {
  .scroll-top {
    display: grid;
  }
}

@media (hover: none) {
  .about-card:hover,
  .about-card:focus-within {
    rotate: 0deg;
  }
}

@media (max-width: 1024px) {
  .nav-links {
    display: none;
  }

  .nav-burger {
    display: block;
  }

  .nav-shop {
    margin-left: auto;
  }

  #play {
    scroll-margin-top: 96px;
  }

  .shop {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 52px 5vw 64px;
    overflow: hidden;
  }

  .shop__fade,
  .shop-glow--right,
  .shop-wrap .shop-seam {
    display: none;
  }

  .shop__character-layer {
    display: contents;
  }

  .shop__character {
    display: none;
  }

  .shop-thought {
    position: relative;
    top: auto;
    left: auto;
    order: 3;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 14px 0 0;
    pointer-events: auto;
  }

  .shop-thought__cloud {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.02);
  }

  .shop-thought__shape {
    display: none;
  }

  .shop-thought__body {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: flex;
    flex-direction: column;
  }

  .shop-thought__title {
    font-size: 19px;
    text-align: left;
  }

  .shop-thought__text {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.35;
    text-align: left;
  }

  .shop-thought__promo {
    gap: 8px;
    height: 46px;
    margin-top: 14px;
    padding: 0 6px 0 14px;
    border-width: 1px;
    border-radius: 13px;
  }

  .shop-thought__code {
    font-size: 17px;
  }

  .shop-thought__copy {
    width: 108px;
    height: 34px;
    border-radius: 9px;
    font-size: 13px;
  }

  .shop-thought__copy:focus-visible {
    outline-offset: 3px;
  }

  .shop-thought__shop {
    gap: 8px;
    height: 44px;
    margin-top: 8px;
    border-radius: 13px;
    font-size: 15px;
  }

  .shop-thought__shop:focus-visible {
    outline-offset: 3px;
  }

  .shop-thought__shop-icon {
    width: 16px;
    height: 16px;
  }

  .shop-thought__trail {
    display: none;
  }

  .shop__content {
    position: static;
    display: contents;
  }

  .shop__head {
    position: static;
    order: 1;
    width: auto;
    max-width: none;
    margin-inline: 0;
  }

  .shop__title {
    font-size: clamp(30px, 6vw, 46px);
    line-height: 1.15;
  }

  .shop__subtitle {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.4;
    white-space: normal;
  }

  .shop__list {
    position: static;
    display: flex;
    flex-direction: column;
    order: 2;
    gap: 14px;
    width: auto;
    height: auto;
    max-width: none;
    margin-top: 14px;
    margin-inline: 0;
  }

  .shop-item {
    position: relative;
    top: auto;
    left: auto;
    display: grid;
    grid-template-columns: clamp(96px, 18vw, 180px) minmax(0, 1fr);
    align-content: center;
    column-gap: clamp(18px, 2.4vw, 32px);
    width: 100%;
    height: auto;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.02);
  }

  .shop-item__divider {
    display: none;
  }

  .shop-item .shop-item__media {
    position: relative;
    top: auto;
    left: auto;
    grid-row: 1 / span 3;
    grid-column: 1;
    align-self: center;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .shop-item .shop-item__halo {
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    margin: 0;
    translate: -50% -50%;
  }

  .shop-item .shop-item__title {
    position: static;
    grid-row: 1;
    grid-column: 2;
    font-size: 21px;
    line-height: 1.2;
    white-space: normal;
  }

  .shop-item .shop-item__text {
    position: static;
    grid-row: 2;
    grid-column: 2;
    width: auto;
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.35;
    white-space: normal;
  }

  .shop-item .shop-item__button {
    position: relative;
    top: auto;
    left: auto;
    grid-row: 3;
    grid-column: 2;
    align-self: start;
    width: max-content;
    min-width: 140px;
    height: 44px;
    margin-top: 12px;
    padding: 0 44px 0 20px;
    font-size: 16px;
  }

  .shop-item .shop-item__button-icon {
    top: 50%;
    right: 16px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
  }

  .join {
    width: 100%;
    height: auto;
    padding: 48px 20px 56px;
  }

  .join__head {
    position: static;
  }

  .join__title {
    font-size: clamp(32px, 7vw, 50px);
    line-height: 1.15;
    white-space: normal;
  }

  .join__subtitle {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.4;
    white-space: normal;
  }

  .join__socials {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 26px 20px;
    width: 100%;
    margin-top: 28px;
  }

  .join__socials-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 26px 20px;
    width: 100%;
  }

  .join-social {
    flex: 1 1 0;
    min-width: 0;
  }

  .join-social__link {
    width: 100%;
  }

  .join-social__icon {
    height: 74px;
  }

  .join-social__icon::before {
    width: 92px;
    height: 92px;
    filter: blur(8px);
  }

  .join-social__image {
    width: 54px;
  }

  .join-social__image--telegram {
    width: 55px;
  }

  .join-social__image--discord {
    width: 60px;
  }

  .join-social__label {
    font-size: 17px;
    line-height: 1.3;
    text-align: center;
  }

  .join-social__label::after {
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
  }

  .about {
    --k: calc((100cqw - 16px) / 718);

    container-type: inline-size;
    column-count: 2;
    column-gap: 16px;
    width: 100%;
    height: auto;
    padding: 52px 16px 64px;
    overflow: hidden;
  }

  .about__head {
    position: relative;
    top: auto;
    left: auto;
    column-span: all;
    margin-bottom: 16px;
  }

  .about__title {
    font-size: clamp(30px, 6vw, 46px);
    line-height: 1.15;
    white-space: normal;
  }

  .about__subtitle {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.4;
    white-space: normal;
  }

  .about__arcs,
  .about__character-layer,
  .about__fade {
    display: none;
  }

  .about__content {
    display: contents;
  }

  .about-card {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: calc(var(--h) * var(--k));
    margin-bottom: 16px;
    border-radius: calc(50 * var(--k));
    break-inside: avoid;
  }

  .about-card::after {
    border-width: 1px;
  }

  .footer {
    width: 100%;
    height: auto;
    padding: 44px 20px 52px;
  }

  .footer__brand {
    position: static;
    width: 100%;
    height: auto;
  }

  .footer__logo {
    justify-content: center;
    gap: clamp(10px, 3vw, 24px);
    font-size: clamp(54px, 16vw, 118px);
    line-height: 1;
  }

  .footer__particles {
    display: none;
  }

  .footer__nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 40px;
    margin-top: 32px;
  }

  .footer__col {
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .footer__col-list {
    gap: 12px;
  }

  .footer__col-title {
    font-size: 16px;
    line-height: 1.35;
    white-space: normal;
  }

  .footer__link {
    font-size: 15px;
    line-height: 1.4;
    white-space: normal;
  }

  .footer__legal {
    position: static;
    margin-top: 30px;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
    white-space: normal;
  }

  .download-modal {
    padding: 16px;
  }

  .download-modal__hint {
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(94vw, 560px);
    max-width: calc(100% - 32px);
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
  }

  .download-modal__dialog {
    --mx: calc(min(94vw, 560px) / 1580);

    width: min(94vw, 560px);
    height: min(80svh, 280px);
    aspect-ratio: auto;
    border-radius: 28px;
  }

  .download-modal__half--196 {
    right: 0;
    bottom: 50%;
    clip-path: none;
  }

  .download-modal__half--217 {
    top: 50%;
    clip-path: none;
  }

  .download-modal__half-inner {
    overflow: hidden;
  }

  .download-modal__half--196 .download-modal__half-inner {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }

  .download-modal__half .download-modal__photo,
  .download-modal__shade {
    display: none;
  }

  .download-modal__media {
    --split-top: 50%;
    --split-bottom: 50%;
    --divider-shift: 0%;
  }

  .download-modal__version {
    font-size: 30px;
    line-height: 1.15;
  }

  .download-modal__version--196 {
    top: 22px;
    left: 22px;
  }

  .download-modal__version--217 {
    top: 22px;
    left: 22px;
  }

  .download-modal__download {
    width: 150px;
    height: 46px;
    gap: 8px;
    font-size: 16px;
  }

  .download-modal__download--196 {
    top: 72px;
    left: 22px;
  }

  .download-modal__download--217 {
    top: 72px;
    left: 22px;
  }

  .download-modal__download-icon {
    width: 20px;
    height: 20px;
  }

  .download-modal__perks,
  .download-modal__divider {
    display: none;
  }

  .download-modal__close {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 720px) {
  .mobile-menu__panel {
    padding: 118px 20px 32px;
  }

  .mobile-menu__link {
    padding: 13px 2px;
    font-size: 26px;
  }

  .mobile-menu__socials {
    gap: 8px;
  }

  .mobile-menu__social {
    padding: 9px 14px 9px 10px;
    font-size: 16px;
  }

  .shop {
    padding: 44px 16px 56px;
  }

  .shop-thought__cloud {
    padding: 16px;
    border-radius: 22px;
  }

  .shop-item {
    grid-template-columns: clamp(78px, 24vw, 110px) minmax(0, 1fr);
    column-gap: 16px;
    padding: 16px;
    border-radius: 22px;
  }

  .shop-item .shop-item__media {
    width: 100%;
    height: auto;
  }

  .shop-item .shop-item__halo {
    width: 88%;
    height: 88%;
    margin: 0;
  }

  .shop-item .shop-item__title {
    font-size: 19px;
  }

  .shop-item .shop-item__button {
    min-width: 132px;
    height: 42px;
    padding: 0 40px 0 18px;
    font-size: 15px;
  }

  .join {
    padding: 40px 16px 48px;
  }

  .join__socials {
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }

  .join__socials-list {
    gap: 12px;
  }

  .join-social {
    flex: 1 1 0;
    min-width: 0;
  }

  .join-social__link {
    width: 100%;
  }

  .join-social__label {
    text-align: center;
  }

  .about {
    --k: calc(100cqw / 359);

    column-count: 1;
    padding: 44px 16px 56px;
  }

  .footer {
    padding: 40px 16px 46px;
  }

  .footer__nav {
    gap: 24px 28px;
  }
}

@media (max-width: 1023px) and (min-height: 600px) {
  .hero__row {
    align-items: center;
  }

  .hero__content {
    padding-top: 0;
    padding-bottom: clamp(48px, 9svh, 110px);
  }
}

.noscript-nav {
  display: none;
}

html.no-aos [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 1024px) {
  .noscript-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(16, 16, 16, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .noscript-nav a {
    color: var(--white);
    font-size: 14px;
    line-height: 1.2;
  }

  .noscript-nav a:focus-visible {
    border-radius: 6px;
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }

  .story-pill {
    width: var(--pill-w) !important;
  }

  * {
    transition: none !important;
    animation: none !important;
  }
}

.terms-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 8, 8, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-backdrop-filter: blur(20px) saturate(90%);
  backdrop-filter: blur(20px) saturate(90%);
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.terms-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease;
}

.terms-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1120px, 92vw);
  max-height: min(86vh, 900px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: clamp(18px, 2.4vw, 50px);
  background: #191919;
  color: var(--white);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  isolation: isolate;
  transform: translateY(clamp(8px, 1vw, 14px)) scale(0.985);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.terms-modal.is-open .terms-modal__dialog {
  transform: none;
}

.terms-modal__dialog:focus {
  outline: none;
}

.terms-modal__head {
  flex-shrink: 0;
  padding: clamp(22px, 3vw, 42px) clamp(64px, 5vw, 96px) clamp(14px, 1.6vw, 22px) clamp(24px, 3vw, 56px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.terms-modal__title {
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 700;
  line-height: 1.15;
}

.terms-modal__updated {
  margin-top: clamp(6px, 0.7vw, 10px);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.4;
  opacity: 0.6;
}

.terms-modal__body {
  flex: 1 1 auto;
  padding: clamp(20px, 2.4vw, 38px) clamp(24px, 3vw, 56px) clamp(28px, 3.4vw, 52px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #4a4a4a #191919;
}

.terms-modal__body::-webkit-scrollbar {
  width: 8px;
}

.terms-modal__body::-webkit-scrollbar-track {
  background: #191919;
}

.terms-modal__body::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #4a4a4a;
}

.terms-modal__section + .terms-modal__section {
  margin-top: clamp(20px, 2vw, 30px);
}

.terms-modal__section h2 {
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.3;
}

.terms-modal__section p {
  margin-top: clamp(8px, 0.8vw, 12px);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

.terms-modal__list {
  margin-top: clamp(8px, 0.8vw, 12px);
  padding-left: 22px;
  list-style: disc;
}

.terms-modal__list li {
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

.terms-modal__list li + li {
  margin-top: 6px;
}

.terms-modal__link {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.terms-modal__link:hover {
  opacity: 0.7;
}

.terms-modal__link:focus-visible {
  border-radius: 3px;
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
}

.terms-modal__close {
  position: absolute;
  top: clamp(12px, 1.6vw, 24px);
  right: clamp(12px, 1.6vw, 24px);
  z-index: 10;
  display: grid;
  place-items: center;
  width: clamp(30px, 2.6vw, 40px);
  height: clamp(32px, 2.8vw, 43px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.12s ease;
}

.terms-modal__close svg {
  display: block;
  width: 100%;
  height: 100%;
}

.terms-modal__close circle,
.terms-modal__close path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.terms-modal__close path {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.terms-modal__close:hover {
  opacity: 0.7;
}

.terms-modal__close:focus-visible {
  border-radius: 50%;
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.terms-modal__close:active {
  transform: scale(0.95);
}

@media (max-width: 768px) {
  .terms-modal {
    padding: 12px;
  }

  .terms-modal__dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 20px;
  }

  .terms-modal__head {
    padding: 20px 56px 14px 20px;
  }

  .terms-modal__body {
    padding: 18px 20px 28px;
  }

  .terms-modal__list {
    padding-left: 18px;
  }
}

.consent-modal__dialog {
  width: min(660px, 92vw);
  max-height: min(90vh, 760px);
}

.consent-modal__content {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 44px) clamp(22px, 3vw, 48px) clamp(26px, 3vw, 44px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #4a4a4a #191919;
}

.consent-modal__content::-webkit-scrollbar {
  width: 8px;
}

.consent-modal__content::-webkit-scrollbar-track {
  background: #191919;
}

.consent-modal__content::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #4a4a4a;
}

.consent-modal__text {
  margin-top: clamp(8px, 0.8vw, 12px);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.consent-modal__links {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.7vw, 10px);
  margin-top: clamp(14px, 1.5vw, 20px);
  padding: 0;
  list-style: none;
}

.consent-modal__link {
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.consent-modal__link:hover {
  opacity: 0.7;
}

.consent-modal__link:focus-visible {
  border-radius: 3px;
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
}

.consent-modal__check {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1vw, 14px);
  margin-top: clamp(18px, 2vw, 26px);
  cursor: pointer;
}

.consent-modal__check input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: #1f7ae8;
  cursor: pointer;
}

.consent-modal__check input:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
}

.consent-modal__check span {
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.consent-modal__continue {
  width: 100%;
  min-height: 48px;
  margin-top: clamp(20px, 2.2vw, 30px);
  padding: 0 clamp(24px, 2.4vw, 34px);
  border: 0;
  border-radius: 999px;
  background: var(--white);
  color: #111111;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.12s ease;
}

.consent-modal__continue:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.consent-modal__continue:not(:disabled):hover {
  opacity: 0.85;
}

.consent-modal__continue:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
}

.consent-modal__continue:not(:disabled):active {
  transform: scale(0.97);
}

@media (max-width: 768px) {
  .consent-modal__dialog {
    width: 100%;
  }

  .consent-modal__content {
    padding: 22px 20px 26px;
  }
}

.legal-page {
  width: min(920px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) 0 clamp(48px, 6vw, 96px);
}

.legal-page__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(28px, 4vw, 56px);
}

.legal-page__logo {
  display: inline-flex;
}

.legal-page__logo img {
  display: block;
  width: 44px;
  height: 44px;
}

.legal-page__back {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.legal-page__back:hover,
.legal-page__back:focus-visible {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.legal-page__back:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.legal-page__title {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
}

.legal-page__updated {
  margin-top: 10px;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.4;
  opacity: 0.6;
}

.legal-page__body {
  margin-top: clamp(24px, 3vw, 44px);
}

@media (max-width: 768px) {
  .legal-page {
    width: calc(100% - 32px);
  }
}