/* Static preview adapter: keep the original hero animation when the theme
   runtime succeeds, but provide a final-state fallback for offline previews. */
:root {
  --vv-bg: #07080d;
  --vv-surface: rgba(18, 20, 31, .76);
  --vv-surface-strong: rgba(12, 14, 23, .92);
  --vv-panel-border: rgba(255, 255, 255, .12);
  --vv-panel-shadow: 0 22px 80px rgba(0, 0, 0, .45);
  --vv-glow-green: rgba(191, 238, 22, .32);
  --vv-glow-cyan: rgba(72, 197, 255, .22);
  --vv-copy: #f3f5f7;
  --vv-copy-muted: rgba(228, 231, 236, .72);
  --vv-radius-xl: 32px;
  --vv-radius-lg: 24px;
  --vv-radius-md: 18px;
}

html {
  background:
    radial-gradient(circle at top, rgba(191, 238, 22, .08), transparent 28%),
    linear-gradient(180deg, #090b12 0%, #07080d 38%, #08080d 100%);
  color: var(--vv-copy);
}

body {
  background:
    radial-gradient(circle at 14% 14%, rgba(191, 238, 22, .08), transparent 24%),
    radial-gradient(circle at 86% 8%, rgba(72, 197, 255, .07), transparent 20%),
    linear-gradient(180deg, #08090f 0%, #090b11 42%, #07080d 100%);
  color: var(--vv-copy);
}

body.vv-home-preload > :not(#vv-page-skeleton) {
  visibility: hidden;
}

@keyframes vv-skeleton-shimmer {
  0% { background-position: -150% 0; }
  100% { background-position: 150% 0; }
}

.vv-skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, .05) 75%);
  background-size: 200% 100%;
  animation: vv-skeleton-shimmer 1.6s ease-in-out infinite;
}

.vv-page-skeleton {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(180deg, #08090f 0%, #07080d 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility .5s ease;
}

.vv-page-skeleton__nav {
  height: 56px;
  border-radius: 999px;
}

.vv-page-skeleton__hero {
  flex: 1;
  min-height: 320px;
  border-radius: 24px;
}

.vv-page-skeleton__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  height: 140px;
}

.vv-page-skeleton__row .vv-skeleton {
  border-radius: 18px;
}

body.vv-home-ready .vv-page-skeleton {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 768px) {
  .vv-page-skeleton__row {
    grid-template-columns: 1fr;
    height: auto;
  }

  .vv-page-skeleton__row .vv-skeleton {
    height: 84px;
  }

  /* The hero CTA panel is absolute with ~88px of empty video below it, so it
     reads as sitting too high. Pull it down toward the bottom on mobile. */
  #HeroIndexCta.hero-cta-panel {
    bottom: 1.75rem !important;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .3;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 85%);
}

::selection {
  background: rgba(191, 238, 22, .28);
  color: #fff;
}

/* Hero: pure-CSS intro animation. Runs on every load, no JS/GSAP required,
   and animation-fill-mode: both guarantees the final visible/full state even
   if the animation is skipped (e.g. prefers-reduced-motion). */
.hero-index .hero-video-container {
  background: #0d0b14 url("vv-assets/hero-video-poster.jpg") center / cover no-repeat;
  animation: vv-hero-expand 1.4s .15s cubic-bezier(.65, 0, .35, 1) both;
}

.hero-index .hero-video-container video {
  background: #0d0b14 url("vv-assets/hero-video-poster.jpg") center / cover no-repeat;
  /* One-time gentle settle. No perpetual animation: a fullscreen video on an
     infinite scale loop repaints every frame and visibly jitters/shakes,
     especially during software decode. Finite + fill both = ends static. */
  animation: vv-hero-video-zoom 6s 1.6s cubic-bezier(.16, 1, .3, 1) both;
  transform-origin: center center;
}

.hero-index .hero-cta-panel {
  animation: vv-hero-panel-in .9s 1.4s cubic-bezier(.16, 1, .3, 1) both;
}

.hero-cta-panel .hero-cta-content > .h1:nth-child(1) {
  animation: vv-hero-text-in .7s 1.5s cubic-bezier(.16, 1, .3, 1) both;
}

.hero-cta-panel .hero-cta-content > .h1:nth-child(2) {
  animation: vv-hero-text-in .7s 1.65s cubic-bezier(.16, 1, .3, 1) both;
}

#site-header.nav {
  animation: vv-hero-nav-in .9s 1.5s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes vv-hero-expand {
  from {
    opacity: 0;
    width: var(--hero-video-container-mobile-width);
    height: var(--hero-video-container-mobile-height);
    border-radius: var(--hero-video-container-borderadius);
  }
  to {
    opacity: 1;
    width: 100%;
    height: 100svh;
    border-radius: 0;
  }
}

@keyframes vv-hero-panel-in {
  from { opacity: 0; bottom: 0; }
  to { opacity: 1; bottom: 88px; }
}

@keyframes vv-hero-nav-in {
  from { opacity: 0; top: -4.5rem; bottom: auto; }
  to { opacity: 1; top: 18px; bottom: auto; }
}

@keyframes vv-hero-video-zoom {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

@keyframes vv-hero-text-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 769px) {
  @keyframes vv-hero-expand {
    from {
      opacity: 0;
      width: var(--hero-video-container-width);
      height: var(--hero-video-container-height);
      border-radius: var(--hero-video-container-borderadius);
    }
    to {
      opacity: 1;
      width: 100%;
      height: 100svh;
      border-radius: 0;
    }
  }

  @keyframes vv-hero-panel-in {
    from { opacity: 0; bottom: 0; }
    to { opacity: 1; bottom: 40px; }
  }

  @keyframes vv-hero-nav-in {
    from { opacity: 0; top: -4.5rem; bottom: auto; }
    to { opacity: 1; top: 40px; bottom: auto; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-index .hero-video-container,
  .hero-index .hero-video-container video,
  .hero-index .hero-cta-panel,
  .hero-cta-panel .hero-cta-content > .h1,
  #site-header.nav {
    animation: none;
    opacity: 1;
  }

  .hero-index .hero-video-container {
    width: 100%;
    height: 100svh;
    border-radius: 0;
  }

  .hero-index .hero-video-container video {
    transform: none;
  }

  .hero-cta-panel .hero-cta-content > .h1 {
    transform: none;
  }

  .hero-index .hero-cta-panel {
    bottom: 88px;
  }

  #site-header.nav {
    top: 18px;
    bottom: auto;
  }

  @media (min-width: 769px) {
    .hero-index .hero-cta-panel {
      bottom: 40px;
    }

    #site-header.nav {
      top: 40px;
    }
  }
}

.hero-index {
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(circle at 18% 18%, rgba(191, 238, 22, .16), transparent 22%),
    radial-gradient(circle at 82% 20%, rgba(72, 197, 255, .13), transparent 18%),
    linear-gradient(180deg, #090b11 0%, #06070b 100%);
}

.hero-index::before,
.hero-index::after {
  content: "";
  position: absolute;
  inset: auto;
  border-radius: 999px;
  filter: blur(12px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

.hero-index::before {
  width: 38vw;
  height: 38vw;
  top: 6%;
  left: -10%;
  background: radial-gradient(circle, rgba(191, 238, 22, .2), transparent 70%);
}

.hero-index::after {
  width: 34vw;
  height: 34vw;
  right: -8%;
  bottom: 10%;
  background: radial-gradient(circle, rgba(72, 197, 255, .17), transparent 72%);
}

.hero-video-container {
  box-shadow:
    0 30px 120px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .08);
}

.hero-video-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 7, 11, .1) 0%, rgba(6, 7, 11, .4) 100%),
    linear-gradient(120deg, rgba(255, 255, 255, .08), transparent 36%);
  pointer-events: none;
}

.hero-cta-panel {
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--vv-radius-xl);
  background:
    linear-gradient(180deg, rgba(20, 24, 36, .78), rgba(12, 14, 23, .92));
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 20px 80px rgba(0, 0, 0, .38);
}

.hero-cta-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
}

.hero-cta-panel .grey-panel-header {
  border-color: rgba(255, 255, 255, .09) !important;
}

.hero-cta-panel .hero-cta-content .h1 {
  text-shadow: 0 12px 28px rgba(0, 0, 0, .26);
}

.hero-cta-panel .button-primary {
  min-height: 60px;
  border-radius: 999px;
  background: linear-gradient(180deg, #d5ff49 0%, #bfee16 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    0 14px 32px rgba(191, 238, 22, .2);
}

.hero-cta-panel .button-primary .button-text {
  letter-spacing: .08em;
}

#HeroIndexCta.hero-cta-panel.grey-panel {
  background: rgba(16, 20, 29, .18) !important;
  backdrop-filter: blur(3px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(3px) saturate(118%) !important;
  box-shadow: 0 14px 42px rgba(0, 0, 0, .22) !important;
}

#HeroIndexCta.hero-cta-panel.grey-panel::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .3),
    transparent
  ) !important;
}

#HeroIndexCta.hero-cta-panel.grey-panel .hero-cta-body {
  padding-top: 18px !important;
  padding-bottom: 0 !important;
}

@media (min-width: 769px) {
  #HeroIndexCta.hero-cta-panel.grey-panel .hero-cta-body {
    padding-top: 18px !important;
    column-gap: 1.5rem !important;
  }
}

.showcase-product-img {
  object-fit: cover;
}

.product-showcase-frontpage {
  min-height: 100svh;
  background:
    radial-gradient(circle at top, rgba(191, 238, 22, .12), transparent 24%),
    linear-gradient(180deg, #06070b 0%, #090c16 100%);
}

.showcase-background-overlay {
  background-image: url("vv-assets/Nicole.jpg");
}

.showcase-background-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .46);
}

.showcase-stack-container,
.showcase-card,
.showcase-grid,
.showcase-column,
.showcase-details-content {
  visibility: visible !important;
}

.showcase-card {
  opacity: 1 !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 30px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

.showcase-card.is-vv-active {
  z-index: 50 !important;
}

.showcase-grid {
  background:
    linear-gradient(180deg, rgba(18, 21, 32, .94), rgba(10, 12, 20, .98));
}

.showcase-content-wrapper,
.showcase-details-content {
  position: relative;
  z-index: 1;
}

.showcase-heading {
  max-width: 13ch;
  line-height: .96;
}

.showcase-product-brand,
.showcase-price-stock-wrapper,
.showcase-button-group,
.showcase-variants-wrapper {
  position: relative;
  z-index: 1;
}

.showcase-product-description .d-body,
.showcase-product-description p {
  color: var(--vv-copy-muted);
}

.showcase-product-title {
  font-size: clamp(28px, 2.5vw, 40px);
}

.showcase-product-price {
  color: #fff;
  font-weight: 600;
}

.showcase-stock-status {
  color: #bfee16;
}

.showcase-button-group .button-primary {
  border-radius: 999px;
}

.showcase-button-group .button-primary--white {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 14px 28px rgba(191, 238, 22, .16);
}

.showcase-button-group .button-primary--grey {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

.showcase-button-group .button-primary--grey .button-text {
  color: #fff;
}

.variant-color-button {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255, 255, 255, .18);
  box-shadow: 0 0 0 0 rgba(191, 238, 22, 0);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.variant-color-button.selected {
  transform: scale(1.08);
  border-color: rgba(191, 238, 22, .8);
  box-shadow: 0 0 0 5px rgba(191, 238, 22, .12);
}

@media (max-width: 768px) {
  .hero-video-container {
    height: 100svh !important;
  }

  .product-showcase-frontpage {
    height: auto !important;
    overflow: visible !important;
    padding: 28px 0;
  }

  .showcase-background-container {
    display: none;
  }

  .showcase-stack-container {
    position: static !important;
    display: grid !important;
    gap: 16px;
    height: auto !important;
    padding: 0 14px;
  }

  .showcase-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    border-radius: 24px;
  }
}

.index-text-scroll {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(191, 238, 22, .14), transparent 20%),
    linear-gradient(180deg, #0a0b11 0%, #08080d 100%) !important;
}

.index-text-scroll::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(7, 8, 13, .28), rgba(7, 8, 13, .72)),
    var(--vv-text-scroll-bg, url("vv-assets/sticker.pg_.jpg")) center / cover no-repeat;
  opacity: .24;
  transition: opacity .4s ease;
}

.index-text-scroll.vv-has-bg::before {
  opacity: var(--vv-text-scroll-opacity, .55);
  backdrop-filter: blur(var(--vv-text-scroll-blur, 22px)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--vv-text-scroll-blur, 22px)) saturate(120%);
}

.index-text-scroll.vv-has-bg-video::before {
  opacity: var(--vv-text-scroll-opacity, .55);
  backdrop-filter: blur(var(--vv-text-scroll-blur, 36px)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--vv-text-scroll-blur, 36px)) saturate(120%);
}

.index-text-scroll .vv-section-bg-video,
.vv-section-bg-video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  display: block;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.index-text-scroll-wrapper {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  padding: 0 20px;
}

.index-text-scroll .big-text {
  line-height: .92;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.index-text-scroll video {
  display: inline-block;
  width: clamp(92px, 14vw, 168px);
  height: clamp(58px, 8vw, 94px);
  margin: 0 .18em;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .26);
}

.vv-live-store {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(191, 238, 22, .12), transparent 20%),
    radial-gradient(circle at 80% 10%, rgba(72, 197, 255, .12), transparent 18%),
    linear-gradient(180deg, #0a0b12 0%, #090a11 100%);
  color: #ffffff;
  min-height: auto;
  padding: clamp(64px, 8vw, 112px) 20px;
}

.vv-live-store::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 92px 92px;
  opacity: .16;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 84%, transparent);
}

.vv-live-store-inner {
  position: relative;
  z-index: 1;
  max-width: 1480px;
  margin: 0 auto;
}

.vv-live-store-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 40px;
}

.vv-live-store-heading .d-eyebrow {
  flex: 0 0 100%;
  margin: 0;
}

.vv-live-store-heading .h2 {
  flex: 1 1 auto;
  margin: 0;
}

.vv-live-store-heading .button-primary {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 20px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .vv-live-store-heading {
    align-items: flex-start;
  }

  .vv-live-store-heading .button-primary {
    width: 100%;
    justify-content: center;
  }
}

.vv-category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.vv-category-grid-fluid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: minmax(240px, 1fr);
}

.vv-category-bento {
  grid-auto-rows: minmax(240px, auto);
}

.vv-category-tile {
  position: relative;
  display: flex;
  min-height: 240px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 28px;
  color: #ffffff;
  text-decoration: none;
  background:
    linear-gradient(145deg, rgba(30, 32, 42, .92), rgba(16, 18, 26, .96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 18px 50px rgba(0, 0, 0, .32);
  transform: translateY(0);
  transition:
    transform .4s cubic-bezier(.22, 1, .36, 1),
    box-shadow .4s cubic-bezier(.22, 1, .36, 1),
    border-color .4s cubic-bezier(.22, 1, .36, 1);
}

.vv-category-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}

.vv-category-tile img.is-loaded {
  opacity: 1;
}

.vv-category-tile .vv-skeleton {
  position: absolute;
  inset: 0;
  transition: opacity .4s ease;
}

.vv-category-tile.vv-loaded .vv-skeleton {
  opacity: 0;
}

.vv-category-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 11, 20, .22) 0%, rgba(13, 11, 20, .72) 55%, rgba(13, 11, 20, .92) 100%);
  pointer-events: none;
}

.vv-category-tile .vv-category-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .08) 50%, transparent 60%);
  background-size: 220% 220%;
  background-position: 100% 100%;
  opacity: 0;
  mix-blend-mode: overlay;
  transition: opacity .4s ease, background-position .8s ease;
  pointer-events: none;
}

.vv-category-tile:hover img,
.vv-category-tile:focus-visible img {
  transform: scale(1.06);
}

.vv-category-tile:hover .vv-category-shine,
.vv-category-tile:focus-visible .vv-category-shine {
  opacity: 1;
  background-position: 0 0;
}

.vv-category-tile:hover,
.vv-category-tile:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(191, 238, 22, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 32px 64px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(191, 238, 22, .08);
}

.vv-category-tile:hover .vv-category-arrow,
.vv-category-tile:focus-visible .vv-category-arrow {
  transform: translate(4px, -4px);
  background: linear-gradient(180deg, #e3ff72, #bfee16);
  color: #0d0b14;
  box-shadow: 0 10px 24px rgba(191, 238, 22, .28);
}

.vv-category-meta {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  background: linear-gradient(180deg, transparent, rgba(13, 11, 20, .55));
}

.vv-category-name {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.vv-category-desc {
  max-width: 320px;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  line-height: 1.45;
}

.vv-category-count {
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 4px;
}

.vv-category-arrow {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
  backdrop-filter: blur(8px);
  transform: translate(0, 0);
  transition:
    transform .35s cubic-bezier(.22, 1, .36, 1),
    background .35s ease,
    color .35s ease,
    box-shadow .35s ease;
}

@media (min-width: 768px) {
  .vv-category-grid-fluid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: minmax(280px, 1fr);
  }

  .vv-category-bento {
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-auto-rows: auto;
  }

  .vv-category-bento .vv-category-tile.is-feature {
    grid-row: 1 / 3;
    min-height: 520px;
  }

  .vv-category-bento .vv-category-tile:not(.is-feature) {
    min-height: 250px;
  }

  .vv-category-name {
    font-size: 30px;
  }

  .is-feature .vv-category-name {
    font-size: 38px;
  }

  .vv-category-meta {
    padding: 28px;
  }

  .vv-category-arrow {
    right: 22px;
    bottom: 22px;
    width: 46px;
    height: 46px;
  }

}

.logo img {
  object-fit: contain;
}

.index-faq-section,
.newsletter-footer-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(191, 238, 22, .08), transparent 20%),
    linear-gradient(180deg, #080910 0%, #090b11 100%);
}

.index-faq-section::before,
.newsletter-footer-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 8, 13, .18), rgba(7, 8, 13, .72));
  z-index: 0;
}

.index-faq-content-wrapper,
.newsletter-section-content-wrapper {
  position: relative;
  z-index: 1;
}

.newsletter-footer-section::before {
  z-index: 1;
}

.newsletter-section-content-wrapper {
  z-index: 2;
}

.newsletter-footer-section .vv-section-bg-video {
  z-index: 0;
}

.newsletter-footer-section.vv-has-bg::before {
  opacity: var(--vv-newsletter-opacity, .65);
  backdrop-filter: blur(var(--vv-newsletter-blur, 22px)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--vv-newsletter-blur, 22px)) saturate(120%);
}

.newsletter-footer-section.vv-has-bg-video::before {
  opacity: var(--vv-newsletter-opacity, .6);
  backdrop-filter: blur(var(--vv-newsletter-blur, 36px)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--vv-newsletter-blur, 36px)) saturate(120%);
}

.index-faq-content-wrapper .grey-panel,
.newsletter-section-content-wrapper .grey-panel {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(18, 21, 32, .78), rgba(11, 14, 23, .92));
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: var(--vv-panel-shadow);
}

.index-faq-content-wrapper .grey-panel::before,
.newsletter-section-content-wrapper .grey-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
}

.index-faq-block.grey-panel {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  background: rgba(15, 17, 26, .84);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
}

.index-faq-answer .d-body-large,
.newsletter-intro-text p {
  color: var(--vv-copy-muted);
}

/* VV promise section redesign (was index-faq) */
.vv-promise-section {
  border-top: 1px solid rgba(191, 238, 22, .18);
}

.vv-promise-background img {
  filter: saturate(.7) contrast(1.05);
}

.vv-promise-hero-panel {
  position: relative;
  overflow: hidden;
}

.vv-promise-hero-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, rgba(191, 238, 22, .04));
  pointer-events: none;
}

.vv-promise-kicker {
  font-family: lores-12, sans-serif;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.vv-promise-heading {
  max-width: 18ch;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: .98;
  letter-spacing: -.03em;
}

.vv-promise-intro-text p {
  max-width: 52ch;
  color: rgba(255, 255, 255, .72);
}

.vv-promise-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e3ff72, #bfee16);
  color: #0d0b14;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(191, 238, 22, .18), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.vv-promise-cta:hover,
.vv-promise-cta:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 18px 42px rgba(191, 238, 22, .24), inset 0 1px 0 rgba(255, 255, 255, .4);
}

.vv-promise-block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  background: rgba(15, 17, 26, .84);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
  transform: translateY(0);
  transition:
    transform .35s cubic-bezier(.22, 1, .36, 1),
    border-color .35s ease,
    box-shadow .35s ease;
}

.vv-promise-block:hover {
  transform: translateY(-5px);
  border-color: rgba(191, 238, 22, .22);
  box-shadow:
    0 26px 56px rgba(0, 0, 0, .26),
    0 0 0 1px rgba(191, 238, 22, .05);
}

.vv-promise-block-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vv-promise-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(191, 238, 22, .18), rgba(191, 238, 22, .06));
  color: #bfee16;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.vv-promise-icon svg {
  width: 22px;
  height: 22px;
}

.vv-promise-block h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.vv-promise-block .index-faq-answer p {
  color: rgba(255, 255, 255, .65);
  line-height: 1.55;
}

@media (min-width: 768px) {
  .vv-promise-block {
    padding: 32px;
  }

  .vv-promise-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .vv-promise-icon svg {
    width: 26px;
    height: 26px;
  }

  .vv-promise-block h3 {
    font-size: 24px;
  }
}

.newsletter-input-wrapper {
  gap: 14px;
}

.newsletter-form-element-wrap.left-round,
.newsletter-form-element-wrap.right-round {
  border-radius: 999px !important;
}

.newsletter-form-element-wrap.left-round {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
}

.newsletter-form-element-wrap.right-round .button-secondary {
  min-height: 58px;
  padding-inline: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #d8ff57 0%, #bfee16 100%);
  color: #0d0b14;
  letter-spacing: .1em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 18px 36px rgba(191, 238, 22, .14);
}

.field__input {
  color: #fff;
}

.field__input::placeholder {
  color: rgba(255, 255, 255, .55);
}

.checkbox-container label {
  color: rgba(255, 255, 255, .68);
}

/* VV newsletter section redesign */
.vv-newsletter-section {
  border-top: 1px solid rgba(191, 238, 22, .12);
}

.vv-newsletter-background img {
  filter: saturate(.65) contrast(1.05);
}

.vv-newsletter-panel {
  position: relative;
  overflow: hidden;
}

.vv-newsletter-kicker {
  font-family: lores-12, sans-serif;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.vv-newsletter-body {
  align-items: center;
  text-align: center;
  padding: 20px 0 10px;
}

.vv-newsletter-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.vv-newsletter-envelope {
  width: 56px;
  height: 56px;
  color: #bfee16;
}

.vv-newsletter-heading {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(38px, 5vw, 72px);
  line-height: .98;
  letter-spacing: -.03em;
}

.vv-newsletter-intro {
  max-width: 46ch;
  margin-top: 18px;
  color: rgba(255, 255, 255, .7);
}

.vv-newsletter-form {
  width: 100%;
  max-width: 520px;
  margin-top: 32px;
}

.vv-newsletter-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(5, 6, 11, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

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

.vv-newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 15px;
  outline: 0;
}

.vv-newsletter-input::placeholder {
  color: rgba(255, 255, 255, .4);
}

.vv-newsletter-button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #e3ff72, #bfee16);
  color: #0d0b14;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(191, 238, 22, .16);
  transition: filter .2s ease, transform .2s ease;
}

.vv-newsletter-button:hover {
  filter: brightness(1.05);
}

.vv-newsletter-button:active {
  transform: scale(.98);
}

.vv-newsletter-button:disabled {
  opacity: .55;
  cursor: default;
}

.vv-newsletter-status {
  display: block;
  min-height: 22px;
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
}

.vv-newsletter-status.is-success {
  color: #bfee16;
}

.vv-newsletter-status.is-error {
  color: #ff8a8a;
}

.vv-newsletter-note {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .45);
  font-size: 12px;
}

@media (min-width: 768px) {
  .vv-newsletter-body {
    padding: 32px 0 18px;
  }

  .vv-newsletter-envelope {
    width: 68px;
    height: 68px;
  }

  .vv-newsletter-input-wrap {
    padding: 8px;
  }

  .vv-newsletter-input {
    min-height: 56px;
    padding: 0 22px;
  }

  .vv-newsletter-button {
    min-height: 56px;
    padding: 0 32px;
  }
}

/* VV cinematic community footer */
@media (min-width: 768px) { .shopify-section-group-footer-group { position: static; } }

.footer {
  position: relative;
  overflow: hidden;
  padding: 64px 20px 108px;
  background:
    linear-gradient(90deg, transparent 2%, rgba(191, 238, 22, .55) 50%, transparent 98%) top center / 100% 1px no-repeat,
    radial-gradient(circle at top, rgba(191, 238, 22, .10), transparent 28%),
    linear-gradient(180deg, #08090f 0%, #05060b 100%);
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: .18;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 86%, transparent);
}

.footer-content,
.footer-copyright,
.go-to-top,
.big-footer-logo {
  position: relative;
  z-index: 1;
}

.go-to-top a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: border-color .25s ease, color .25s ease, background .25s ease, box-shadow .25s ease;
}

.go-to-top a:hover,
.go-to-top a:focus-visible {
  border-color: rgba(191, 238, 22, .45);
  color: #fff;
  background: rgba(191, 238, 22, .08);
  box-shadow: 0 0 24px rgba(191, 238, 22, .10);
}

.ico-base {
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}

.ico-10 {
  width: .625rem;
  height: .625rem;
}

.ico10-go-to-top {
  background-image: url('data:image/svg+xml,<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path id="Vector" d="M5.00012 11.0001L5.00012 3.00014M5.00012 3.00014L0.757506 7.24276M5.00012 3.00014L9.22803 7.22783M0 1L10 1" stroke="%23BFEE16"/></svg>');
}

.footer-content {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 0;
  max-width: 1480px;
  margin: 32px auto 0;
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(20, 24, 36, .72), rgba(10, 13, 22, .88)) padding-box,
    linear-gradient(180deg, rgba(191, 238, 22, .42), rgba(72, 197, 255, .20) 50%, rgba(191, 238, 22, .14)) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, .32),
    0 0 0 1px rgba(191, 238, 22, .05),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  position: relative;
  isolation: isolate;
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}

.footer-content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
  pointer-events: none;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .footer:hover .footer-content {
    transform: translateY(-5px);
    box-shadow:
      0 34px 100px rgba(0, 0, 0, .38),
      0 0 60px rgba(191, 238, 22, .06),
      inset 0 1px 0 rgba(255, 255, 255, .10);
  }
}

.footer-section {
  position: relative;
  padding: 34px 38px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.footer-section.introductory-text {
  display: grid;
  align-content: start;
  gap: 22px;
  padding: 42px 46px 38px;
  border-right: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle at 8% 0%, rgba(191, 238, 22, .09), transparent 42%);
}

.footer-brand {
  display: grid;
  gap: 10px;
}

.footer-eyebrow {
  margin: 0;
  color: #bfee16;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.footer-section h3,
.footer-section h4 {
  color: #fff;
}

.footer-section h3 {
  font-size: clamp(32px, 3.2vw, 54px);
  line-height: .92;
  letter-spacing: -.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}

.footer-section h3 span {
  display: inline-block;
  color: #bfee16;
  font-size: .34em;
  vertical-align: 1em;
  letter-spacing: 0;
  margin-left: .12em;
  padding: .15em .5em;
  border-radius: 999px;
  background: rgba(191, 238, 22, .10);
  border: 1px solid rgba(191, 238, 22, .25);
  box-shadow: 0 0 16px rgba(191, 238, 22, .12);
}

.footer-section h4,
.footer-section h4.d-eyebrow {
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.footer-section p,
.footer-section a {
  color: rgba(255, 255, 255, .72);
}

.footer-section a:hover,
.footer-section a:focus-visible {
  color: #fff;
}

.footer-lead {
  max-width: 42ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .68);
}

.footer-social {
  display: flex;
  gap: 16px;
}

.footer-social-item {
  position: relative;
  display: inline-flex;
}

.footer-social-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .28),
    0 8px 22px rgba(0, 0, 0, .25);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s ease;
}

a.footer-social-link {
  color: #fff;
}

.footer-social-link.is-instagram {
  background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
}

.footer-social-link.is-discord {
  background: #5865f2;
}

.footer-social-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .50) 48%, transparent 65%);
  transform: translateX(-130%);
  transition: transform .8s ease;
  z-index: 1;
}

.footer-social-link:hover::before,
.footer-social-link:focus-visible::before {
  transform: translateX(130%);
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  transform: translateY(-5px) scale(1.07);
}

.footer-social-link.is-instagram:hover,
.footer-social-link.is-instagram:focus-visible {
  box-shadow:
    0 18px 38px -10px rgba(238, 42, 123, .70),
    inset 0 1.5px 0 rgba(255, 255, 255, .28);
}

.footer-social-link.is-discord:hover,
.footer-social-link.is-discord:focus-visible {
  box-shadow:
    0 18px 38px -10px rgba(88, 101, 242, .70),
    inset 0 1.5px 0 rgba(255, 255, 255, .28);
}

.footer-social-link svg {
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
}

.footer-social-tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  z-index: 3;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(191, 238, 22, .25);
  background: rgba(11, 14, 23, .92);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}

.footer-social-item:hover .footer-social-tip,
.footer-social-link:focus-visible ~ .footer-social-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.footer-newsletter-form {
  position: relative;
  z-index: 2;
  margin-top: 2px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer-newsletter-label {
  display: block;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
}

.footer-newsletter-row {
  display: flex;
  gap: 12px;
}

.footer-newsletter-input {
  min-width: 0;
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-left: 2px solid rgba(191, 238, 22, 0);
  border-radius: 999px;
  outline: 0;
  background: rgba(5, 6, 11, .68);
  color: #fff;
  font-size: 14px;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.footer-newsletter-input:focus {
  border-color: rgba(191, 238, 22, .45);
  border-left-color: #bfee16;
  background: rgba(5, 6, 11, .82);
  box-shadow: 0 0 0 4px rgba(191, 238, 22, .08);
}

.footer-newsletter-input::placeholder {
  color: rgba(255, 255, 255, .35);
}

.footer-newsletter-button {
  min-height: 54px;
  flex: 0 0 auto;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #e5ff7a, #bfee16);
  color: #070807;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow:
    0 14px 34px rgba(191, 238, 22, .18),
    inset 0 1px 0 rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}

.footer-newsletter-button:hover {
  filter: brightness(1.06);
  box-shadow:
    0 18px 42px rgba(191, 238, 22, .24),
    inset 0 1px 0 rgba(255, 255, 255, .5);
}

.footer-newsletter-button:active {
  transform: scale(.97);
}

.footer-newsletter-button:disabled {
  opacity: .55;
  cursor: default;
}

.footer-newsletter-status {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
  min-height: 1.2em;
}

.footer-newsletter-status.is-success {
  color: #bfee16;
}

.footer-newsletter-status.is-error {
  color: #ff8484;
}

.footer-section ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-section li {
  position: relative;
}

.footer-section ul a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  line-height: 1.45;
  font-size: 14.5px;
  padding-left: 0;
  transition: padding-left .25s cubic-bezier(.22, 1, .36, 1), color .25s ease;
}

.footer-section ul a::before {
  content: "";
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #bfee16;
  transition: width .25s cubic-bezier(.22, 1, .36, 1), margin-right .25s cubic-bezier(.22, 1, .36, 1);
}

.footer-section ul a::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #bfee16;
  margin-left: 10px;
  opacity: 0;
  transform: scale(0);
  transition: opacity .2s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.footer-section ul a:hover,
.footer-section ul a:focus-visible {
  padding-left: 4px;
  color: #fff;
}

.footer-section ul a:hover::before,
.footer-section ul a:focus-visible::before {
  width: 16px;
  margin-right: 10px;
}

.footer-section ul a:hover::after,
.footer-section ul a:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.footer-section.column-3 {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.footer-copyright {
  max-width: 1480px;
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .45);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}

.big-footer-logo {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  margin-top: 32px;
  min-height: 680px;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    linear-gradient(180deg, rgba(18, 21, 32, .58), rgba(11, 14, 23, .78));
}

.big-footer-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 50%, transparent 30%, rgba(5, 6, 11, .55) 100%);
  pointer-events: none;
  z-index: 1;
}

.big-footer-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5, 6, 11, 0) 0%,
      rgba(5, 6, 11, .05) 34%,
      rgba(5, 6, 11, .28) 48%,
      rgba(5, 6, 11, .70) 68%,
      rgba(5, 6, 11, .92) 100%
    );
  pointer-events: none;
  z-index: 1;
}

.big-footer-logo img {
  width: 100%;
  height: 100%;
  min-height: 680px;
  object-fit: cover;
  object-position: left center;
  opacity: .55;
  filter: blur(.2px) drop-shadow(0 18px 46px rgba(191, 238, 22, .08));
  transform: scale(1);
  animation: vv-footer-artwork 22s ease-in-out infinite alternate;
}

@keyframes vv-footer-artwork {
  to { transform: scale(1.05); }
}

.discord-footer-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(44%, 500px);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  pointer-events: none;
  z-index: 2;
}

.discord-footer-panel {
  width: 100%;
  max-width: 420px;
  margin: 28px 28px 28px 0;
  padding: 24px 22px 20px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-self: stretch;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(20, 24, 36, .78), rgba(8, 10, 18, .94));
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .40),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  pointer-events: auto;
  animation: vv-footer-panel-float 5s ease-in-out infinite;
}

@keyframes vv-footer-panel-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.discord-footer-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.discord-footer-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(88, 101, 242, .18);
  border: 1px solid rgba(88, 101, 242, .38);
  color: #dbe2ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(88, 101, 242, .14);
}

.discord-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .86);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.discord-footer-link:hover,
.discord-footer-link:focus-visible {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}

.discord-footer-copy {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.discord-footer-kicker {
  margin: 0 0 8px;
  color: #bfee16;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.discord-footer-copy h4 {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: .98;
}

.discord-footer-text {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  line-height: 1.45;
}

.discord-footer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.discord-footer-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  font-weight: 600;
}

.discord-footer-widget {
  width: 100%;
  min-height: 0;
  padding: 12px;
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(7, 9, 15, .9), rgba(10, 12, 18, .98));
  box-shadow:
    0 18px 36px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

.discord-footer-widget iframe {
  display: block;
  flex: 1;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 470px;
  border: 0;
  border-radius: 16px;
}

@media (max-width: 1100px) {
  .footer-content {
    grid-template-columns: 1fr;
  }

  .footer-section.introductory-text {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  .discord-footer-overlay {
    width: min(54%, 460px);
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 42px 14px 80px;
  }

  .footer-content {
    margin-top: 20px;
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(18, 22, 32, .9), rgba(10, 13, 22, .95)) padding-box,
      linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)) border-box;
    box-shadow:
      0 20px 60px rgba(0, 0, 0, .3),
      inset 0 1px 0 rgba(255, 255, 255, .08);
  }

  .footer-section {
    padding: 24px 20px;
  }

  .footer-section.introductory-text {
    padding: 28px 22px 24px;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }

  .footer-section h3 {
    font-size: clamp(32px, 10vw, 48px);
  }

  .footer-section.column-3 {
    padding-top: 22px;
  }

  .footer-section ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 18px;
  }

  .footer-section ul a {
    font-size: 13px;
    white-space: nowrap;
  }

  .footer-newsletter-row {
    flex-wrap: wrap;
  }

  .footer-newsletter-button {
    width: 100%;
  }

  .big-footer-logo,
  .big-footer-logo img {
    min-height: 420px;
    border-radius: 24px;
  }

  .big-footer-logo::after {
    background: linear-gradient(180deg, rgba(5, 6, 11, .55) 0%, rgba(5, 6, 11, .12) 45%, rgba(5, 6, 11, .55) 100%);
  }

  .discord-footer-overlay {
    left: 0;
    justify-content: center;
    width: 100%;
    padding: 14px;
    align-items: flex-end;
  }

  .discord-footer-panel {
    width: min(100%, 360px);
    max-width: 360px;
    margin: 0;
    padding: 16px 14px 14px;
    border-radius: 22px;
    animation: none;
  }

  .discord-footer-copy h4 {
    font-size: 22px;
  }

  .discord-footer-widget iframe {
    min-height: 280px;
  }

  .footer-copyright {
    font-size: 10px;
    letter-spacing: .08em;
    margin-top: 28px;
  }
}
.vv-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .8s cubic-bezier(.22, 1, .36, 1),
    transform .8s cubic-bezier(.22, 1, .36, 1);
}

.vv-reveal.vv-inview {
  opacity: 1;
  transform: translateY(0);
}

.vv-skip-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 9999;
  padding: 12px 16px;
  border-radius: 999px;
  background: #bfee16;
  color: #0d0b14;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.vv-skip-link:focus {
  position: fixed !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  clip: auto !important;
  transform: translateY(0);
}

body.vv-dialog-open {
  overflow: hidden;
}

:where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid #bfee16;
  outline-offset: 3px;
}

#product-showcase-frontpage,
.showcase-card,
.index-faq-section,
.footer,
#MainContent {
  scroll-margin-top: 108px;
}

#closeProductsPopup,
#closeCartDrawerPopup,
#closeVariantPopup {
  cursor: pointer;
}

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .vv-reveal {
    opacity: 1;
    transform: none;
  }
}


@media (max-width: 768px) {
  .hero-cta-panel {
    left: 14px;
    right: 14px;
    border-radius: 24px;
  }

  .hero-cta-panel .hero-cta-button .button-primary {
    width: 100%;
  }

  .index-text-scroll .big-text {
    font-size: clamp(44px, 10vw, 84px);
  }

  .index-text-scroll video {
    width: 104px;
    height: 64px;
  }

  .vv-live-store,
  .footer {
    padding-inline: 14px;
  }

  .vv-category-grid,
  .vv-review-row,
  .footer-content {
    grid-template-columns: 1fr;
  }

  .vv-category-bento .vv-category-tile.is-feature {
    min-height: 360px;
  }

  .vv-category-name {
    font-size: 24px;
  }

  .is-feature .vv-category-name {
    font-size: 30px;
  }

  .vv-category-arrow {
    width: 38px;
    height: 38px;
  }

  .footer-section {
    padding: 24px 20px;
  }

  .footer-section.introductory-text {
    padding: 28px 20px 24px;
  }

  .big-footer-logo,
  .big-footer-logo img {
    min-height: 560px;
  }

  .discord-footer-overlay {
    left: 0;
    justify-content: center;
    width: 100%;
    padding: 18px;
    align-items: flex-end;
  }

  .discord-footer-panel {
    width: min(100%, 400px);
    max-width: 400px;
    margin: 0;
    padding: 16px 14px 14px;
  }

  .discord-footer-widget iframe {
    min-height: 390px;
  }

}


/* Mobile header: try transparent background once. */
@media (max-width: 768px) {
  #site-header.nav {
    background: transparent !important;
    border-bottom-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Center the login icon inside the repurposed cart/login button.
     The theme hides .button-text on mobile, so the icon should be the only
     visible child and perfectly centered both axes. */
  #cartButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #cartButton .vv-login-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }

  #cartButton .vv-login-icon svg {
    display: block !important;
  }
}