:root {
  --desktop-width: min(100vw, 1920px);
  --desktop-height: calc(var(--desktop-width) * 2143 / 1920);
  --mobile-width: min(100vw, 390px);
  --mobile-height: calc(var(--mobile-width) * 1728 / 390);
  --frame-bg: #363636;
  color-scheme: dark;
  font-family: "Proxima Nova", "Arial", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--frame-bg);
  touch-action: manipulation;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
  background: var(--frame-bg);
  color: #ffffff;
  user-select: none;
  -webkit-user-select: none;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: 4px;
}

.landing-stage {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  background: var(--frame-bg);
}

.landing-stage--desktop {
  width: var(--desktop-width);
  height: var(--desktop-height);
}

.desktop-layout {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.landing-stage--mobile {
  display: none;
  width: var(--mobile-width);
  height: var(--mobile-height);
}

.mobile-layout {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

picture {
  display: block;
  width: 100%;
  height: 100%;
}

.frame-art {
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.hotspot {
  position: absolute;
  display: block;
  z-index: 6;
  border-radius: 20px;
}

.hotspot::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
  opacity: 0;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.hotspot:hover::after,
.hotspot:focus-visible::after {
  opacity: 1;
}

.desktop-brand-mark,
.desktop-hero-accent,
.desktop-hero-image,
.desktop-arrow-outline,
.desktop-bottom-hero,
.desktop-bottom-swirl,
.desktop-bottom-star {
  position: absolute;
  display: block;
}

.desktop-brand-mark {
  left: calc(40 / 1920 * 100%);
  top: calc(30 / 2143 * 100%);
  z-index: 3;
  width: calc(var(--desktop-width) * 47.78 / 1920);
  height: calc(var(--desktop-width) * 61.4 / 1920);
  opacity: 0.35;
}

.desktop-description {
  position: absolute;
  left: calc(41 / 1920 * 100%);
  top: calc(374 / 2143 * 100%);
  z-index: 3;
  width: calc(661 / 1920 * 100%);
  margin: 0;
  font-size: calc(var(--desktop-width) * 32 / 1920);
  font-weight: 400;
  line-height: 1.03;
  color: rgba(255, 255, 255, 0.92);
}

.desktop-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  font-size: calc(var(--desktop-width) * 200 / 1920);
  font-weight: 700;
  letter-spacing: calc(var(--desktop-width) * -8 / 1920);
  color: #ffffff;
}

.desktop-title span {
  position: absolute;
  display: block;
  margin: 0;
  line-height: 1;
}

.desktop-title__fast {
  left: calc(40 / 1920 * 100%);
  top: calc(477 / 2143 * 100%);
}

.desktop-title__comfortable {
  left: calc(605 / 1920 * 100%);
  top: calc(668 / 2143 * 100%);
  line-height: 0.92;
}

.desktop-title__brand {
  left: calc(195 / 1920 * 100%);
  top: calc(794 / 2143 * 100%);
  color: #ff7120;
}

.desktop-hero-accent {
  left: calc(720 / 1920 * 100%);
  top: calc(203 / 2143 * 100%);
  z-index: 1;
  width: calc(447 / 1920 * 100%);
  height: calc(450 / 2143 * 100%);
}

.desktop-hero-image {
  left: calc(844 / 1920 * 100%);
  top: calc(20 / 2143 * 100%);
  z-index: 3;
  width: calc(594 / 1920 * 100%);
  height: calc(742 / 2143 * 100%);
  object-fit: contain;
}

.desktop-store-stack {
  position: absolute;
  left: calc(1425 / 1920 * 100%);
  top: calc(242 / 2143 * 100%);
  z-index: 4;
  display: grid;
  gap: calc(var(--desktop-width) * 20 / 1920);
  width: calc(455 / 1920 * 100%);
}

.desktop-store-button,
.desktop-webapp-button {
  display: flex;
  align-items: center;
  width: 100%;
}

.desktop-store-button {
  gap: calc(var(--desktop-width) * 16 / 1920);
  min-height: calc(var(--desktop-height) * 116 / 2143);
  padding:
    calc(var(--desktop-width) * 12 / 1920)
    calc(var(--desktop-width) * 12 / 1920);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: calc(var(--desktop-width) * 20 / 1920);
}

.desktop-store-button img {
  width: calc(var(--desktop-width) * 92 / 1920);
  height: calc(var(--desktop-width) * 92 / 1920);
  flex: 0 0 auto;
}

.desktop-store-button__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--desktop-width) * 2 / 1920);
  font-size: calc(var(--desktop-width) * 30 / 1920);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: calc(var(--desktop-width) * -0.6 / 1920);
  color: #ffffff;
  flex: 0 0 auto;
  text-align: left;
}

.desktop-store-button__text span,
.desktop-store-button__text strong {
  display: block;
  white-space: nowrap;
}

.desktop-store-button--appstore .desktop-store-button__text {
  width: calc(var(--desktop-width) * 320 / 1920);
  font-size: calc(var(--desktop-width) * 24 / 1920);
  line-height: 1;
}

.desktop-store-button--rustore .desktop-store-button__text {
  width: calc(var(--desktop-width) * 183 / 1920);
}

.desktop-webapp-button {
  justify-content: center;
  min-height: calc(var(--desktop-height) * 90 / 2143);
  padding: calc(var(--desktop-width) * 24 / 1920) calc(var(--desktop-width) * 32 / 1920);
  border-radius: calc(var(--desktop-width) * 66 / 1920);
  background: #ff7120;
  font-size: calc(var(--desktop-width) * 30 / 1920);
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: calc(var(--desktop-width) * -0.6 / 1920);
  text-align: center;
  color: #ffffff;
  white-space: nowrap;
}

.desktop-arrow-outline {
  left: calc(1148 / 1920 * 100%);
  top: calc(618 / 2143 * 100%);
  z-index: 1;
  width: calc(580 / 1920 * 100%);
  height: calc(414 / 2143 * 100%);
}

.desktop-bottom-surface {
  position: absolute;
  left: 0;
  top: calc(1332 / 2143 * 100%);
  z-index: 0;
  width: 100%;
  height: calc(811 / 2143 * 100%);
  background: #4c4c4c;
  border-top-left-radius: calc(var(--desktop-width) * 938 / 1920);
  border-top-right-radius: calc(var(--desktop-width) * 1000 / 1920);
}

.desktop-bottom-hero {
  left: calc(640.85 / 1920 * 100%);
  top: calc(977 / 2143 * 100%);
  z-index: 1;
  width: calc(646.5 / 1920 * 100%);
  height: calc(748.92 / 2143 * 100%);
  object-fit: contain;
}

.desktop-bottom-swirl {
  left: calc(-8 / 1920 * 100%);
  top: calc(1824 / 2143 * 100%);
  z-index: 2;
  width: calc(188 / 1920 * 100%);
  height: calc(206 / 2143 * 100%);
}

.desktop-bottom-star {
  left: calc(1551 / 1920 * 100%);
  top: calc(1797 / 2143 * 100%);
  z-index: 2;
  width: calc(348 / 1920 * 100%);
  height: calc(348 / 2143 * 100%);
}

.desktop-qr-grid {
  position: absolute;
  left: calc(368 / 1920 * 100%);
  top: calc(1515 / 2143 * 100%);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--desktop-width) * 20 / 1920);
  width: calc(620 / 1920 * 100%);
}

.desktop-qr-card {
  display: grid;
  justify-items: center;
  gap: calc(var(--desktop-width) * 24 / 1920);
  color: #ffffff;
}

.desktop-qr-card__image {
  width: 100%;
  height: auto;
  border-radius: calc(var(--desktop-width) * 17 / 1920);
}

.desktop-qr-card__title {
  display: block;
  width: 100%;
  font-size: calc(var(--desktop-width) * 32 / 1920);
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: calc(var(--desktop-width) * -0.64 / 1920);
  text-align: center;
}

.desktop-qr-card--rustore .desktop-qr-card__title,
.desktop-qr-card--appstore .desktop-qr-card__title {
  font-size: calc(var(--desktop-width) * 27 / 1920);
  white-space: nowrap;
}

.desktop-seller-card {
  position: absolute;
  left: calc(1008 / 1920 * 100%);
  top: calc(1515 / 2143 * 100%);
  z-index: 3;
  width: calc(543 / 1920 * 100%);
  min-height: calc(var(--desktop-height) * 300 / 2143);
  padding:
    calc(var(--desktop-width) * 25 / 1920)
    calc(var(--desktop-width) * 22 / 1920)
    calc(var(--desktop-width) * 23 / 1920)
    calc(var(--desktop-width) * 20 / 1920);
  border-radius: calc(var(--desktop-width) * 17 / 1920);
  background: #3f3f3f;
  box-shadow:
    calc(var(--desktop-width) * 7 / 1920)
    calc(var(--desktop-width) * 7 / 1920)
    0
    0
    #ff7e1a;
}

.desktop-seller-card__copy {
  position: relative;
  z-index: 1;
  max-width: calc(var(--desktop-width) * 296 / 1920);
}

.desktop-seller-card__title {
  margin: 0 0 calc(var(--desktop-width) * 12 / 1920);
  font-size: calc(var(--desktop-width) * 32 / 1920);
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: calc(var(--desktop-width) * -0.64 / 1920);
  color: #ffffff;
}

.desktop-seller-card__text {
  margin: 0 0 calc(var(--desktop-width) * 60 / 1920);
  font-size: calc(var(--desktop-width) * 24 / 1920);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: calc(var(--desktop-width) * -0.48 / 1920);
  color: rgba(255, 255, 255, 0.9);
}

.desktop-seller-card__link {
  display: inline-block;
  font-size: calc(var(--desktop-width) * 32 / 1920);
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: calc(var(--desktop-width) * -0.64 / 1920);
  color: #ffffff;
}

.desktop-seller-card__image {
  position: absolute;
  right: 0;
  bottom: calc(var(--desktop-height) * 4 / 2143);
  width: calc(270 / 543 * 100%);
  height: auto;
}

.desktop-closing-text {
  position: absolute;
  left: calc(503 / 1920 * 100%);
  top: calc(1941 / 2143 * 100%);
  z-index: 3;
  width: calc(922 / 1920 * 100%);
  margin: 0;
  font-size: calc(var(--desktop-width) * 48 / 1920);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: calc(var(--desktop-width) * -1.92 / 1920);
  text-align: center;
  color: #ffffff;
}

.seller-link-shine::before {
  display: none;
}

.seller-link-shine::after {
  display: none;
}

.mobile-brand-mark,
.mobile-hero-accent,
.mobile-hero-image,
.mobile-bottom-shape,
.mobile-bottom-hero,
.mobile-bottom-star,
.mobile-bottom-swirl {
  position: absolute;
  display: block;
}

.mobile-brand-mark {
  left: calc(20 / 390 * 100%);
  top: calc(20 / 1728 * 100%);
  width: calc(var(--mobile-width) * 42 / 390);
  height: calc(var(--mobile-width) * 42 / 390);
  opacity: 0.35;
}

.mobile-title {
  position: absolute;
  left: calc(20 / 390 * 100%);
  top: calc(97 / 1728 * 100%);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--mobile-width) * 3 / 390);
  width: calc(350 / 390 * 100%);
  margin: 0;
  font-size: calc(var(--mobile-width) * 36 / 390);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: calc(var(--mobile-width) * -1.44 / 390);
  color: #ffffff;
}

.mobile-title--accent {
  color: #ff7120;
}

.mobile-hero-accent {
  left: calc(20 / 390 * 100%);
  top: calc(220 / 1728 * 100%);
  z-index: 1;
  width: calc(242 / 390 * 100%);
  height: calc(243 / 1728 * 100%);
}

.mobile-hero-image {
  left: calc(67 / 390 * 100%);
  top: calc(156 / 1728 * 100%);
  z-index: 2;
  width: calc(322.7 / 390 * 100%);
  height: calc(339 / 1728 * 100%);
  object-fit: contain;
}

.mobile-description {
  position: absolute;
  left: calc(20 / 390 * 100%);
  top: calc(500 / 1728 * 100%);
  z-index: 3;
  width: calc(350 / 390 * 100%);
  margin: 0;
  font-size: calc(var(--mobile-width) * 16 / 390);
  font-weight: 400;
  line-height: 1.03;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

.mobile-store-stack {
  position: absolute;
  left: calc(55 / 390 * 100%);
  top: calc(581 / 1728 * 100%);
  z-index: 4;
  display: grid;
  gap: calc(var(--mobile-width) * 12.22 / 390);
  width: calc(281 / 390 * 100%);
}

.mobile-store-button,
.mobile-webapp-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: calc(var(--mobile-width) * 14 / 390);
}

.mobile-store-button {
  gap: calc(var(--mobile-width) * 10 / 390);
  width: 100%;
  min-height: calc(var(--mobile-height) * 70.87 / 1728);
  padding:
    calc(var(--mobile-width) * 7.33 / 390)
    calc(var(--mobile-width) * 17.72 / 390);
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: transparent;
}

.mobile-store-button img {
  width: calc(var(--mobile-width) * 56.21 / 390);
  height: calc(var(--mobile-width) * 56.21 / 390);
  flex: 0 0 auto;
}

.mobile-store-button__text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--mobile-width) * 1.5 / 390);
  color: #ffffff;
  font-size: calc(var(--mobile-width) * 18.33 / 390);
  font-weight: 700;
  line-height: 0.95;
}

.mobile-store-button__text span,
.mobile-store-button__text strong {
  display: block;
}

.mobile-store-button__text strong {
  font-weight: 700;
}

.mobile-webapp-button {
  justify-content: center;
  min-height: calc(var(--mobile-height) * 50 / 1728);
  padding:
    calc(var(--mobile-width) * 11 / 390)
    calc(var(--mobile-width) * 30 / 390);
  background: #ff7120;
  font-size: calc(var(--mobile-width) * 17 / 390);
  font-weight: 700;
  line-height: 1.24;
  color: #ffffff;
  border-radius: calc(var(--mobile-width) * 66 / 390);
  text-align: center;
}

.mobile-bottom-shape {
  left: calc(1 / 390 * 100%);
  top: calc(1046 / 1728 * 100%);
  z-index: 0;
  width: calc(390 / 390 * 100%);
  height: calc(674 / 1728 * 100%);
  opacity: 0.11;
}

.mobile-bottom-hero {
  left: calc(4.29 / 390 * 100%);
  top: calc(850 / 1728 * 100%);
  z-index: 1;
  width: calc(364.2 / 390 * 100%);
  height: calc(423.16 / 1728 * 100%);
  object-fit: contain;
}

.mobile-bottom-star {
  left: calc(1 / 390 * 100%);
  top: calc(1109 / 1728 * 100%);
  z-index: 2;
  width: calc(98 / 390 * 100%);
  height: calc(98 / 1728 * 100%);
}

.mobile-bottom-swirl {
  left: calc(339.81 / 390 * 100%);
  top: calc(1203 / 1728 * 100%);
  z-index: 2;
  width: calc(63.71 / 390 * 100%);
  height: calc(69.63 / 1728 * 100%);
}

.mobile-qr-grid {
  position: absolute;
  left: calc(20 / 390 * 100%);
  top: calc(1165 / 1728 * 100%);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--mobile-width) * 10 / 390);
  width: calc(350 / 390 * 100%);
}

.mobile-qr-card {
  display: grid;
  justify-items: center;
  gap: calc(var(--mobile-width) * 16 / 390);
  color: #ffffff;
}

.mobile-qr-card__image {
  width: 100%;
  height: auto;
  border-radius: calc(var(--mobile-width) * 17 / 390);
}

.mobile-qr-card__title {
  display: block;
  width: 100%;
  font-size: calc(var(--mobile-width) * 24 / 390);
  font-weight: 700;
  line-height: 0.84;
  text-align: center;
}

.mobile-seller-card {
  position: absolute;
  left: calc(20 / 390 * 100%);
  top: calc(1411 / 1728 * 100%);
  z-index: 3;
  width: calc(350 / 390 * 100%);
  min-height: calc(var(--mobile-height) * 190.61 / 1728);
  padding:
    calc(var(--mobile-width) * 16 / 390)
    calc(var(--mobile-width) * 14 / 390)
    calc(var(--mobile-width) * 14 / 390)
    calc(var(--mobile-width) * 13 / 390);
  border-radius: calc(var(--mobile-width) * 18 / 390);
  background: #434343;
  box-shadow:
    calc(var(--mobile-width) * 7 / 390)
    calc(var(--mobile-width) * 7 / 390)
    0
    0
    #ff7e1a;
}

.mobile-seller-card__copy {
  position: relative;
  z-index: 1;
  max-width: calc(var(--mobile-width) * 198 / 390);
}

.mobile-seller-card__title {
  margin: 0 0 calc(var(--mobile-width) * 7.6 / 390);
  font-size: calc(var(--mobile-width) * 24 / 390);
  font-weight: 700;
  line-height: 0.84;
  color: #ffffff;
}

.mobile-seller-card__text {
  margin: 0 0 calc(var(--mobile-width) * 28 / 390);
  font-size: calc(var(--mobile-width) * 16 / 390);
  font-weight: 400;
  line-height: 0.84;
  color: rgba(255, 255, 255, 0.9);
}

.mobile-seller-card__link {
  display: inline-block;
  font-size: calc(var(--mobile-width) * 20 / 390);
  font-weight: 700;
  line-height: 0.85;
  color: #ffffff;
}

.mobile-seller-card__image {
  position: absolute;
  right: calc(4 / 390 * 100%);
  bottom: calc(3 / 1728 * 100%);
  width: calc(177.35 / 350 * 100%);
  height: auto;
}

.mobile-closing-text {
  position: absolute;
  left: calc(20 / 390 * 100%);
  top: calc(1633.61 / 1728 * 100%);
  z-index: 3;
  width: calc(350 / 390 * 100%);
  margin: 0;
  font-size: calc(var(--mobile-width) * 20 / 390);
  font-weight: 700;
  line-height: 0.86;
  text-align: center;
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .seller-link-shine::before,
  .seller-link-shine::after {
    animation: none;
    opacity: 0.25;
    transform: none;
  }
}

@media (max-width: 767px) {
  .landing-stage--desktop {
    display: none;
  }

  .landing-stage--mobile {
    display: block;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* SEO-блок «Что такое Вупи» + FAQ */
.seo-content {
  background: var(--frame-bg);
  color: #f2f2f2;
  padding: clamp(40px, 6vw, 80px) 20px clamp(56px, 8vw, 100px);
  user-select: text;
  -webkit-user-select: text;
}

.seo-content__inner {
  max-width: 820px;
  margin: 0 auto;
}

.seo-content__title {
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.2;
  margin: 0 0 0.6em;
  color: #ffffff;
}

.seo-content__inner > h2.seo-content__title:not(:first-child) {
  margin-top: 1.6em;
}

.seo-content p {
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.65;
  margin: 0 0 1em;
  color: #d9d9d9;
}

.seo-content a {
  color: #ff7120;
  text-decoration: none;
}

.seo-content a:hover,
.seo-content a:focus {
  text-decoration: underline;
}

.seo-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0.4em;
}

.seo-faq__item {
  background: #4c4c4c;
  border-radius: 14px;
  padding: 4px 20px;
}

.seo-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 28px 16px 0;
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight: 600;
  color: #ffffff;
  position: relative;
}

.seo-faq__item summary::-webkit-details-marker {
  display: none;
}

.seo-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  font-weight: 400;
  color: #ff7120;
  line-height: 1;
}

.seo-faq__item[open] summary::after {
  content: "–";
}

.seo-faq__item p {
  margin: 0 0 16px;
}

.seo-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 44px);
}

.seo-social__label {
  font-size: clamp(15px, 2.2vw, 18px);
  color: #d9d9d9;
  margin-right: 4px;
}

.seo-social__link {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid rgba(255, 113, 32, 0.6);
  border-radius: 999px;
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 600;
  color: #ff7120 !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

.seo-social__link:hover,
.seo-social__link:focus {
  background: #ff7120;
  color: #ffffff !important;
}