@import url("/assets/home/contact.css");

/* The user's reference pins the scale, spacing, badges and component grammar. */

.home-v2 {
  --wb2-text-brand: #5938cc;
  --wb2-brand-500: #6848ff;
  --wb2-brand-450: #7658ef;
  --wb2-brand-450-medium: rgba(104, 72, 255, 0.12);
  --wb2-brand-100: #e8e1fa;
  --wb2-brand-50: #f8f5ff;
  --wb2-success: #6848ff;
  --wb2-success-bg: #f6f3fb;
  --wb2-pattern-bg: #e5ddff;
  --wb2-pattern-bg-second: #f4ecff;
}
::selection {
  background: #e5dcff;
  color: #37236b;
}
:focus-visible {
  outline: 2px solid #8060ee;
  outline-offset: 4px;
}
/* Dialog autofocus can retain :focus-visible after a touch interaction. */
html[data-focus-input="pointer"] :focus {
  outline: none;
}
html {
  -webkit-tap-highlight-color: transparent;
  scrollbar-color: #c2b3e4 #f8f6fb;
}
.wb2-hero__download {
  background: #6848ff;
}
.wb2-hero__download:hover:not(:disabled) {
  box-shadow: 0 10px 24px #6848ff29;
}
.wb2-hero__online {
  color: #513893;
}
.header .header-nav .btn-download {
  background: #6848ff;
  color: #fff;
}
.header .header-nav .nav-logo .nav-logo-img {
  width: 92.5625px;
  height: 32px;
  object-fit: contain;
}
.header .mobile-menu .mobile-menu-header .mobile-logo .nav-logo-img {
  width: 81px;
  height: 28px;
}
.letter-roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  flex-shrink: 0;
}
.letter-roll .single-letter {
  position: relative;
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-shadow: 0 1.45em currentColor;
  transform: translateY(0);
}
.letter-up:hover .single-letter {
  transform: translateY(-1.45em);
}
.resource-mega-wp-thumb img,
.resource-promo-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.resource-mega-wp-thumb,
.resource-promo-card-thumb {
  overflow: hidden;
}
.header .header-nav .resource-api-cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 400 / 152;
  padding: 5.5%;
  color: #fff;
  font-size: 9px;
  line-height: 1.4;
  background-image: linear-gradient(117deg, transparent 56%, #ffffff14 56%, #ffffff14 72%, transparent 72%);
}
.resource-api-cover--retail {
  background-color: #6848ff;
}
.resource-api-cover--dining {
  background-color: #c04c24;
}
.resource-api-cover--sports {
  background-color: #246a63;
}
.resource-api-cover-brand {
  font-weight: 600;
}
.resource-api-cover strong {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
.replica-marquee {
  display: flex;
  width: max-content;
  animation: replica-scroll 109.76s linear infinite;
  will-change: transform;
}
.replica-logo-unit {
  width: 180px;
  flex: 0 0 180px;
  margin-right: 16px;
}
.replica-logo-unit .wb2-eco__logo-card {
  gap: 10px;
  font-size: 20px;
  font-weight: 550;
}
.replica-logo-unit img {
  width: 25px;
  height: 25px;
  filter: grayscale(1);
}
.replica-logo-unit img.platform-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
  filter: none;
}
.platform-name {
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -0.03em;
}
.platform-douyin {
  font-size: 26px;
}
.wb2-eco__logos-scroll {
  overflow-x: hidden;
}
.wb2-privacy__texture {
  filter: hue-rotate(110deg);
}
@keyframes replica-scroll {
  to {
    transform: translateX(-50%);
  }
}
.wb2-dl-menu {
  position: relative;
}
.wb2-dl-menu__pop {
  position: fixed;
}
.wb2-dl-menu__item {
  color: #24212b;
}
.wb2-dl-menu__item .wb2-dl-menu__icon {
  filter: grayscale(1);
}
.wb2-dl-menu__flyout--qr {
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.wb2-dl-menu__flyout--qr img {
  width: 140px;
  height: auto;
  object-fit: contain;
}
.wb2-dl-menu__item:hover > .wb2-dl-menu__flyout {
  display: flex;
  opacity: 1;
  visibility: visible;
}
.wb2-dl-menu__chevron {
  font-size: 22px;
  line-height: 18px;
  font-weight: 300;
  color: #a2a0a6;
}
.wb2-dl-menu__item[href="#contact"] {
  position: relative;
}
.wb2-download__tile:focus-visible .wb2-download__face--idle {
  opacity: 0;
}
.wb2-download__tile:focus-visible .wb2-download__face--hover {
  opacity: 1;
}
.wb2-download__tile-icon {
  filter: grayscale(1);
}
.wb2-download__tile.is-current .wb2-download__tile-icon {
  filter: none;
}
.wb2-download__qr-img {
  object-fit: contain;
}
@media (max-width: 768px) {
  .replica-marquee {
    animation-duration: 85.12s;
  }
  .replica-logo-unit {
    width: 140px;
    flex-basis: 140px;
    margin-right: 12px;
  }
  .replica-logo-unit .wb2-eco__logo-card {
    font-size: 16px;
    gap: 8px;
  }
  .replica-logo-unit img {
    width: 22px;
    height: 22px;
  }
  .replica-logo-unit img.platform-logo {
    width: 28px;
    height: 28px;
  }
  .platform-name,
  .platform-douyin {
    font-size: 22px;
  }
  .wb2-dl-menu__pop {
    display: none !important;
  }
  .wb2-hero__download {
    min-width: 0;
  }
  .wb2-tabs__item {
    padding-right: 16px;
    padding-left: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .replica-marquee {
    animation-play-state: paused;
  }
  .letter-roll .single-letter {
    transition: none;
  }
  .wb2-scenario__visual-img {
    transition: none;
  }
}

/* Stable initial header geometry before ResizeObserver runs. */
.home-v2 {
  --wb2-header-height: 65px;
}
@media (max-width: 480px) {
  .home-v2 {
    --wb2-header-height: 57px;
  }
}
.skip-link {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 12000;
  padding: 10px 16px;
  background: white;
  color: #5938cc;
  border-radius: 8px;
}
.skip-link:focus {
  top: 12px;
}