.elementor-13 .elementor-element.elementor-element-1c9833a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-1d86970{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-68d2a6f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-f4804d5{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-b3be537{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-4c66e5b{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-3c339f3{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-b4a3436{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-7dee99b *//* =========================================================
   WHITE HOUSE ACADEMY
   PREMIUM FIXED HEADER — PART 1
   BASE, CONTAINER, LOGO & DESKTOP NAVIGATION
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");


/* =========================================================
   HEADER BASE
========================================================= */

.wha-header {
  --wha-black: #030303;
  --wha-black-soft: #080808;

  --wha-gold: #d4af37;
  --wha-gold-light: #f3d87a;
  --wha-gold-dark: #8f6715;

  --wha-white: #ffffff;
  --wha-grey: #a5a5a5;
  --wha-grey-dark: #696969;

  position: fixed;
  z-index: 99999;

  top: 0;
  left: 0;
  right: 0;

  width: 100%;
  height: 78px;

  color: var(--wha-white);

  font-family: "Inter", Arial, sans-serif;

  background:
    linear-gradient(
      180deg,
      rgba(3, 3, 3, 0.97),
      rgba(4, 4, 4, 0.93)
    );

  border-bottom: 1px solid rgba(212, 175, 55, 0.16);

  box-shadow:
    0 14px 42px rgba(0, 0, 0, 0.3);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transition:
    height 0.35s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}


/* =========================================================
   RESET INSIDE HEADER
========================================================= */

.wha-header,
.wha-header * {
  box-sizing: border-box;
}

.wha-header a {
  color: inherit;
  text-decoration: none;
}

.wha-header button {
  font: inherit;
}

.wha-header img,
.wha-header svg {
  display: block;
}


/* =========================================================
   TOP GOLD LINE
========================================================= */

.wha-header::before {
  content: "";

  position: absolute;
  z-index: 6;

  top: 0;
  left: 50%;

  width: min(1380px, calc(100% - 70px));
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212, 175, 55, 0.45) 18%,
      rgba(243, 216, 122, 0.88) 50%,
      rgba(212, 175, 55, 0.45) 82%,
      transparent
    );

  transform: translateX(-50%);

  box-shadow:
    0 0 16px rgba(212, 175, 55, 0.16);
}


/* =========================================================
   HEADER GLOW
========================================================= */

.wha-header__glow {
  position: absolute;
  z-index: 1;

  top: -115px;
  left: 50%;

  width: 560px;
  height: 190px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.11),
      transparent 70%
    );

  filter: blur(32px);

  transform: translateX(-50%);

  pointer-events: none;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.wha-header__container {
  position: relative;
  z-index: 5;

  width: min(1380px, calc(100% - 70px));
  height: 78px;
  min-height: 78px;

  margin: 0 auto;

  display: grid;
  grid-template-columns:
    auto
    minmax(460px, 1fr)
    auto;

  align-items: center;
  gap: 30px;

  transition:
    height 0.35s ease,
    min-height 0.35s ease;
}


/* =========================================================
   LOGO
========================================================= */

.wha-header__logo {
  position: relative;

  width: 190px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  overflow: hidden;

  transition:
    width 0.35s ease,
    height 0.35s ease,
    transform 0.35s ease,
    opacity 0.35s ease;
}

.wha-header__logo:hover {
  transform: translateY(-2px);
}


/*
  object-fit: contain keeps the whole logo visible.
  transform scale helps compensate if the PNG has empty space.
*/
.wha-header__logo img {
  width: 190px;
  height: 58px;

  object-fit: contain;
  object-position: left center;

  transform: scale(1.12);
  transform-origin: left center;

  filter:
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 10px rgba(212, 175, 55, 0.07));

  transition:
    width 0.35s ease,
    height 0.35s ease,
    transform 0.35s ease;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.wha-header__nav {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 2.25vw, 39px);
}

.wha-header__nav a {
  position: relative;

  min-height: 78px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.105em;
  text-transform: uppercase;
  white-space: nowrap;

  color: rgba(255, 255, 255, 0.76);

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}


/* Gold underline */
.wha-header__nav a::before {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 20px;

  width: 0;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--wha-gold-dark),
      var(--wha-gold-light)
    );

  box-shadow:
    0 0 10px rgba(212, 175, 55, 0.34);

  transform: translateX(-50%);

  transition: width 0.3s ease;
}


/* Small glowing point */
.wha-header__nav a::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 17px;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: var(--wha-gold-light);

  box-shadow:
    0 0 8px rgba(243, 216, 122, 0.7);

  opacity: 0;
  transform: translateX(-50%) scale(0.4);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}


.wha-header__nav a:hover,
.wha-header__nav a.is-active {
  color: var(--wha-gold-light);
}

.wha-header__nav a:hover {
  transform: translateY(-2px);
}

.wha-header__nav a:hover::before,
.wha-header__nav a.is-active::before {
  width: 100%;
}

.wha-header__nav a:hover::after,
.wha-header__nav a.is-active::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}


/* =========================================================
   RIGHT ACTIONS BASE
   Full CTA and mobile styles continue in Part 2
========================================================= */

.wha-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}


/* =========================================================
   CAMPAIGN STATUS BASE
========================================================= */

.wha-header__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;

  color: #75d98c;
}

.wha-header__status i {
  display: block;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #59d579;

  box-shadow:
    0 0 0 4px rgba(89, 213, 121, 0.08),
    0 0 12px rgba(89, 213, 121, 0.52);

  animation: whaHeaderStatusPulse 1.8s ease-in-out infinite;
}


/* =========================================================
   HERO CONNECTION FIX
   Prevents empty space between fixed header and Section 01
========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: 0 !important;
  overflow-x: clip;
}


/*
  Header overlays the top part of the hero.
  Hero's own internal padding keeps content below the header.
*/
.vt-hero,
#home.vt-hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/*
  Existing hero container originally uses padding-top: 130px.
  Keep the visual spacing inside the hero without creating
  an external gap between the header and hero background.
*/
.vt-hero__container {
  padding-top: 130px !important;
}


/* Remove common Elementor spacing around header widget */
.elementor-widget-html:has(.wha-header),
.elementor-widget-html:has(.wha-header) > .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}


/* Remove common Elementor top gap before hero */
.elementor-widget-html:has(.vt-hero),
.elementor-widget-html:has(.vt-hero) > .elementor-widget-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =========================================================
   SCROLLED BASE STATE
========================================================= */

.wha-header.is-scrolled {
  height: 72px;

  background:
    linear-gradient(
      180deg,
      rgba(2, 2, 2, 0.99),
      rgba(5, 5, 5, 0.97)
    );

  border-bottom-color: rgba(212, 175, 55, 0.24);

  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.46);
}

.wha-header.is-scrolled .wha-header__container {
  height: 72px;
  min-height: 72px;
}

.wha-header.is-scrolled .wha-header__logo {
  width: 178px;
  height: 52px;
}

.wha-header.is-scrolled .wha-header__logo img {
  width: 178px;
  height: 52px;

  transform: scale(1.1);
}

.wha-header.is-scrolled .wha-header__nav a {
  min-height: 72px;
}

.wha-header.is-scrolled .wha-header__nav a::before {
  bottom: 17px;
}

.wha-header.is-scrolled .wha-header__nav a::after {
  bottom: 14px;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes whaHeaderStatusPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}


/* =========================================================
   LARGE DESKTOP ADJUSTMENT
========================================================= */

@media (max-width: 1240px) {

  .wha-header__container {
    width: min(100% - 44px, 1120px);

    grid-template-columns:
      auto
      minmax(400px, 1fr)
      auto;

    gap: 23px;
  }

  .wha-header::before {
    width: min(100% - 44px, 1120px);
  }

  .wha-header__logo {
    width: 175px;
  }

  .wha-header__logo img {
    width: 175px;
  }

  .wha-header__nav {
    gap: 22px;
  }

  .wha-header__nav a {
    font-size: 10px;
  }

}


/* =========================================================
   TABLET BASE
   Complete tablet/mobile menu styling continues in Part 2
========================================================= */

@media (max-width: 1020px) {

  .wha-header,
  .wha-header.is-scrolled {
    height: 74px;
  }

  .wha-header__container,
  .wha-header.is-scrolled .wha-header__container {
    width: min(100% - 36px, 920px);
    height: 74px;
    min-height: 74px;

    grid-template-columns: 1fr auto;
  }

  .wha-header::before {
    width: min(100% - 36px, 920px);
  }

  .wha-header__nav {
    display: none;
  }

  .wha-header__logo,
  .wha-header.is-scrolled .wha-header__logo {
    width: 170px;
    height: 54px;
  }

  .wha-header__logo img,
  .wha-header.is-scrolled .wha-header__logo img {
    width: 170px;
    height: 54px;

    transform: scale(1.1);
  }

  .vt-hero__container {
    padding-top: 112px !important;
  }

}


/* =========================================================
   SMALL MOBILE BASE
========================================================= */

@media (max-width: 600px) {

  .wha-header,
  .wha-header.is-scrolled {
    height: 70px;
  }

  .wha-header__container,
  .wha-header.is-scrolled .wha-header__container {
    width: calc(100% - 28px);
    height: 70px;
    min-height: 70px;
  }

  .wha-header::before {
    width: calc(100% - 28px);
  }

  .wha-header__logo,
  .wha-header.is-scrolled .wha-header__logo {
    width: 154px;
    height: 50px;
  }

  .wha-header__logo img,
  .wha-header.is-scrolled .wha-header__logo img {
    width: 154px;
    height: 50px;

    transform: scale(1.08);
  }

  .wha-header__status {
    display: none;
  }

  .vt-hero__container {
    padding-top: 96px !important;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

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

}
/* =========================================================
   WHITE HOUSE ACADEMY
   PREMIUM FIXED HEADER — PART 2
   CTA, MOBILE MENU, RESPONSIVE & INTERACTIONS
========================================================= */


/* =========================================================
   DESKTOP CTA
========================================================= */

.wha-header__cta {
  position: relative;

  min-width: 160px;
  min-height: 46px;
  padding: 0 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border: 1px solid rgba(243, 216, 122, 0.76);
  border-radius: 3px;

  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;

  color: #1d1402;

  background:
    linear-gradient(
      115deg,
      #8c6416 0%,
      #d4af37 30%,
      #f3d87a 56%,
      #a97a20 100%
    );

  box-shadow:
    0 12px 32px rgba(212, 175, 55, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);

  overflow: hidden;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

.wha-header__cta::before {
  content: "";

  position: absolute;
  top: 0;
  left: -120%;

  width: 66%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.82),
      transparent
    );

  transform: skewX(-22deg);

  transition: left 0.75s ease;
}

.wha-header__cta span,
.wha-header__cta svg {
  position: relative;
  z-index: 2;
}

.wha-header__cta svg {
  width: 17px;
  height: 17px;

  transition: transform 0.35s ease;
}

.wha-header__cta:hover {
  transform: translateY(-4px);

  filter: brightness(1.05);

  box-shadow:
    0 19px 44px rgba(212, 175, 55, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.wha-header__cta:hover::before {
  left: 145%;
}

.wha-header__cta:hover svg {
  transform: translateX(4px);
}


/* =========================================================
   MOBILE TOGGLE
========================================================= */

.wha-header__toggle {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;

  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;

  padding: 0;

  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 4px;

  color: var(--wha-gold-light);

  background:
    linear-gradient(
      135deg,
      rgba(212, 175, 55, 0.065),
      rgba(255, 255, 255, 0.02)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  cursor: pointer;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.wha-header__toggle:hover {
  transform: translateY(-2px);

  border-color: rgba(243, 216, 122, 0.48);

  background: rgba(212, 175, 55, 0.09);
}

.wha-header__toggle span {
  width: 20px;
  height: 1.5px;

  background: currentColor;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    width 0.3s ease;
}

.wha-header__toggle span:nth-child(2) {
  width: 15px;
  margin-left: 5px;
}


/* =========================================================
   MOBILE OVERLAY
========================================================= */

.wha-mobile-menu__overlay {
  position: fixed;
  z-index: 99996;

  inset: 0;

  display: block;
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;

  background: rgba(0, 0, 0, 0.74);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  cursor: pointer;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}


/* =========================================================
   MOBILE DRAWER
========================================================= */

.wha-mobile-menu {
  position: fixed;
  z-index: 99998;

  top: 0;
  right: 0;
  bottom: 0;

  width: min(420px, 88vw);
  min-height: 100dvh;
  padding: 24px;

  border-left: 1px solid rgba(212, 175, 55, 0.22);

  background:
    radial-gradient(
      circle at 88% 9%,
      rgba(212, 175, 55, 0.13),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(212, 175, 55, 0.06),
      transparent 30%
    ),
    linear-gradient(
      160deg,
      #0d0d0d 0%,
      #050505 66%,
      #020202 100%
    );

  box-shadow:
    -38px 0 100px rgba(0, 0, 0, 0.68);

  overflow-y: auto;
  overscroll-behavior: contain;

  transform: translateX(105%);

  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   DRAWER HEADER
========================================================= */

.wha-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding-bottom: 22px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.wha-mobile-menu__brand {
  width: 170px;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  overflow: hidden;
}

.wha-mobile-menu__brand img {
  width: 170px;
  height: 60px;

  object-fit: contain;
  object-position: left center;

  transform: scale(1.1);
  transform-origin: left center;
}

.wha-mobile-menu__close {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 50%;

  color: var(--wha-gold-light);
  background: rgba(212, 175, 55, 0.055);

  cursor: pointer;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.wha-mobile-menu__close:hover {
  transform: rotate(90deg);

  border-color: rgba(243, 216, 122, 0.55);
  background: rgba(212, 175, 55, 0.1);
}

.wha-mobile-menu__close svg {
  width: 20px;
  height: 20px;
}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.wha-mobile-menu__nav {
  display: grid;

  margin-top: 29px;
}

.wha-mobile-menu__nav a {
  min-height: 65px;
  padding: 0 4px;

  display: flex;
  align-items: center;
  gap: 17px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  font-family: "Cinzel", Georgia, serif;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;

  color: var(--wha-white);

  transition:
    color 0.3s ease,
    padding-left 0.3s ease,
    border-color 0.3s ease;
}

.wha-mobile-menu__nav a > span {
  flex: 0 0 auto;

  font-family: "Inter", Arial, sans-serif;
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.13em;

  color: var(--wha-gold);
}

.wha-mobile-menu__nav a:hover {
  padding-left: 12px;

  color: var(--wha-gold-light);
  border-color: rgba(212, 175, 55, 0.26);
}


/* =========================================================
   MOBILE CAMPAIGN BOX
========================================================= */

.wha-mobile-menu__campaign {
  position: relative;

  margin-top: 28px;
  padding: 18px;

  border: 1px solid rgba(212, 175, 55, 0.18);
  border-left: 2px solid var(--wha-gold);
  border-radius: 5px;

  background:
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.075),
      rgba(255, 255, 255, 0.014)
    );
}

.wha-mobile-menu__campaign::before {
  content: "";

  position: absolute;
  top: 0;
  left: -2px;

  width: 2px;
  height: 40%;

  background: var(--wha-gold-light);

  box-shadow:
    0 0 13px rgba(243, 216, 122, 0.62);
}

.wha-mobile-menu__campaign > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wha-mobile-menu__campaign i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #59d579;

  box-shadow:
    0 0 0 4px rgba(89, 213, 121, 0.08),
    0 0 11px rgba(89, 213, 121, 0.5);

  animation: whaHeaderStatusPulse 1.8s ease-in-out infinite;
}

.wha-mobile-menu__campaign span {
  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: #75d98c;
}

.wha-mobile-menu__campaign strong {
  display: block;

  margin-top: 9px;

  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;

  color: var(--wha-white);
}


/* =========================================================
   MOBILE CTA
========================================================= */

.wha-mobile-menu__cta {
  position: relative;

  width: 100%;
  min-height: 56px;
  margin-top: 18px;
  padding: 0 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  border: 1px solid rgba(243, 216, 122, 0.78);
  border-radius: 3px;

  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: #1d1402;

  background:
    linear-gradient(
      115deg,
      #8c6416,
      #d4af37 30%,
      #f3d87a 56%,
      #a97a20
    );

  box-shadow:
    0 14px 36px rgba(212, 175, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);

  overflow: hidden;
}

.wha-mobile-menu__cta::before {
  content: "";

  position: absolute;
  top: 0;
  left: -120%;

  width: 65%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.82),
      transparent
    );

  transform: skewX(-22deg);

  transition: left 0.75s ease;
}

.wha-mobile-menu__cta span,
.wha-mobile-menu__cta svg {
  position: relative;
  z-index: 2;
}

.wha-mobile-menu__cta svg {
  width: 18px;
  height: 18px;

  transition: transform 0.35s ease;
}

.wha-mobile-menu__cta:hover::before {
  left: 145%;
}

.wha-mobile-menu__cta:hover svg {
  transform: translateX(4px);
}


/* =========================================================
   MENU OPEN STATE
========================================================= */

.wha-header.is-menu-open .wha-mobile-menu {
  transform: translateX(0);
}

.wha-header.is-menu-open .wha-mobile-menu__overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wha-header.is-menu-open .wha-header__toggle span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.wha-header.is-menu-open .wha-header__toggle span:nth-child(2) {
  width: 20px;
  margin-left: 0;

  opacity: 0;
}

.wha-header.is-menu-open .wha-header__toggle span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

body.wha-menu-open {
  overflow: hidden !important;
  touch-action: none;
}


/* =========================================================
   SCROLLED CTA POLISH
========================================================= */

.wha-header.is-scrolled .wha-header__cta {
  min-height: 44px;
}

.wha-header.is-scrolled .wha-header__toggle {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}


/* =========================================================
   RESPONSIVE — LARGE DESKTOP
========================================================= */

@media (max-width: 1240px) {

  .wha-header__cta {
    min-width: 145px;
    padding-inline: 15px;

    font-size: 9px;
  }

  .wha-header__status {
    display: none;
  }

}


/* =========================================================
   RESPONSIVE — TABLET / MOBILE MENU
========================================================= */

@media (max-width: 1020px) {

  .wha-header__nav,
  .wha-header__status,
  .wha-header__cta {
    display: none;
  }

  .wha-header__toggle {
    display: flex;
  }

  .wha-header__actions {
    gap: 0;
  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

  .wha-header__toggle {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .wha-mobile-menu {
    width: min(390px, 92vw);
    padding: 20px;
  }

  .wha-mobile-menu__brand {
    width: 150px;
    height: 54px;
  }

  .wha-mobile-menu__brand img {
    width: 150px;
    height: 54px;

    transform: scale(1.08);
  }

  .wha-mobile-menu__nav {
    margin-top: 24px;
  }

  .wha-mobile-menu__nav a {
    min-height: 61px;

    font-size: 15px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .wha-mobile-menu {
    width: 94vw;
    padding: 18px;
  }

  .wha-mobile-menu__brand {
    width: 138px;
  }

  .wha-mobile-menu__brand img {
    width: 138px;
  }

  .wha-mobile-menu__nav a {
    min-height: 58px;

    font-size: 14px;
  }

  .wha-mobile-menu__campaign {
    padding: 16px;
  }

  .wha-mobile-menu__cta {
    min-height: 53px;
    padding-inline: 15px;

    font-size: 9px;
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.wha-header a:focus-visible,
.wha-header button:focus-visible {
  outline: 2px solid rgba(243, 216, 122, 0.75);
  outline-offset: 4px;
}


/* =========================================================
   ELEMENTOR FULL-WIDTH FIX
========================================================= */

.elementor-widget-html .wha-header {
  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* =========================================================
   THEME CONFLICT FIX
========================================================= */

.wha-header button,
.wha-header a {
  -webkit-tap-highlight-color: transparent;
}

.wha-header__toggle,
.wha-mobile-menu__close,
.wha-mobile-menu__overlay {
  appearance: none;
  -webkit-appearance: none;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .wha-mobile-menu,
  .wha-mobile-menu__overlay,
  .wha-header__toggle span {
    transition: none !important;
  }

}
/* =========================================================
   WHITE HOUSE ACADEMY
   PREMIUM FIXED HEADER — PART 3
   ACTIVE MENU, SCROLL POLISH, GAP FIX & FINAL OVERRIDES
========================================================= */


/* =========================================================
   FINAL HEADER / HERO CONNECTION FIX
   Elak gap antara header dan Section 01
========================================================= */

html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

body {
  overflow-x: clip;
}

.wha-header {
  margin: 0 !important;
}

.vt-hero,
#home,
section#home {
  margin-top: 0 !important;
}

/*
  Header fixed duduk di atas hero.
  Background hero bermula terus dari bahagian paling atas.
*/
.vt-hero {
  position: relative;
  top: 0;
}

/*
  Jarak ini hanya gerakkan kandungan hero,
  bukan menambah ruang kosong luar section.
*/
.vt-hero__container {
  padding-top: 132px !important;
}


/* =========================================================
   WORDPRESS ADMIN BAR FIX
========================================================= */

body.admin-bar .wha-header {
  top: 32px;
}

@media screen and (max-width: 782px) {

  body.admin-bar .wha-header {
    top: 46px;
  }

}


/* =========================================================
   ACTIVE NAVIGATION STATE
========================================================= */

.wha-header__nav a.is-active {
  color: var(--wha-gold-light);
}

.wha-header__nav a.is-active::before {
  width: 100%;
}

.wha-header__nav a.is-active::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}


/* =========================================================
   ACTIVE MOBILE LINK
========================================================= */

.wha-mobile-menu__nav a.is-active {
  padding-left: 12px;

  color: var(--wha-gold-light);
  border-color: rgba(212, 175, 55, 0.28);

  background:
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.06),
      transparent
    );
}


/* =========================================================
   HEADER ENTRANCE
========================================================= */

.wha-header {
  animation: whaHeaderEntrance 0.65s ease both;
}

@keyframes whaHeaderEntrance {

  from {
    opacity: 0;
    transform: translateY(-18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* =========================================================
   SCROLL STATE POLISH
========================================================= */

.wha-header.is-scrolled .wha-header__glow {
  opacity: 0.55;
}

.wha-header.is-scrolled::before {
  opacity: 0.8;
}

.wha-header.is-scrolled .wha-header__logo img {
  filter:
    drop-shadow(0 7px 13px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 9px rgba(212, 175, 55, 0.06));
}


/* =========================================================
   DESKTOP NAV SEPARATOR DETAIL
========================================================= */

@media (min-width: 1021px) {

  .wha-header__nav::before,
  .wha-header__nav::after {
    content: "";

    width: 1px;
    height: 24px;

    background:
      linear-gradient(
        to bottom,
        transparent,
        rgba(212, 175, 55, 0.18),
        transparent
      );
  }

}


/* =========================================================
   MOBILE DRAWER DECORATIVE DETAIL
========================================================= */

.wha-mobile-menu::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(243, 216, 122, 0.8),
      transparent
    );

  box-shadow:
    0 0 15px rgba(212, 175, 55, 0.16);
}

.wha-mobile-menu::after {
  content: "";

  position: absolute;
  z-index: -1;

  right: -120px;
  bottom: -120px;

  width: 320px;
  height: 320px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.08),
      transparent 68%
    );

  filter: blur(25px);

  pointer-events: none;
}


/* =========================================================
   DRAWER LINK ENTRANCE
========================================================= */

.wha-header.is-menu-open .wha-mobile-menu__nav a {
  animation: whaMobileLinkReveal 0.45s ease both;
}

.wha-header.is-menu-open .wha-mobile-menu__nav a:nth-child(1) {
  animation-delay: 0.08s;
}

.wha-header.is-menu-open .wha-mobile-menu__nav a:nth-child(2) {
  animation-delay: 0.13s;
}

.wha-header.is-menu-open .wha-mobile-menu__nav a:nth-child(3) {
  animation-delay: 0.18s;
}

.wha-header.is-menu-open .wha-mobile-menu__nav a:nth-child(4) {
  animation-delay: 0.23s;
}

.wha-header.is-menu-open .wha-mobile-menu__nav a:nth-child(5) {
  animation-delay: 0.28s;
}

@keyframes whaMobileLinkReveal {

  from {
    opacity: 0;
    transform: translateX(18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }

}


/* =========================================================
   LOGO PNG EMPTY-SPACE COMPENSATION
========================================================= */

/*
  Logo client ada sedikit ruang kosong dalam fail PNG.
  Scale ni besarkan artwork tanpa besarkan header.
*/
.wha-header__logo img {
  transform: scale(1.16);
}

.wha-header.is-scrolled .wha-header__logo img {
  transform: scale(1.14);
}

.wha-mobile-menu__brand img {
  transform: scale(1.13);
}


/* Kalau logo terlalu besar, tukar nilai di bawah:
   1.16 → 1.10
   Kalau terlalu kecil:
   1.16 → 1.22
*/


/* =========================================================
   IMAGE SAFETY
========================================================= */

.wha-header__logo img,
.wha-mobile-menu__brand img {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
}


/* =========================================================
   ELEMENTOR SECTION GAP FIX
========================================================= */

.elementor-widget-html:has(.wha-header) {
  position: static !important;

  margin: 0 !important;
  padding: 0 !important;
}

.elementor-widget-html:has(.wha-header)
.elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-widget-html:has(.vt-hero) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.elementor-widget-html:has(.vt-hero)
.elementor-widget-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* Modern Elementor containers */
.e-con:has(.wha-header),
.e-con:has(.vt-hero) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =========================================================
   THEME HEADER GAP FIX
========================================================= */

.site-content,
#content,
main,
main.site-main,
.elementor-location-single,
.elementor-location-archive {
  margin-top: 0 !important;
}


/* Jangan tambah padding automatik pada body */
body:has(.wha-header),
body:has(.wha-header.is-scrolled) {
  padding-top: 0 !important;
}


/* =========================================================
   ANCHOR SCROLL OFFSET
========================================================= */

#home,
#rewards,
#how-it-works,
#redemption-form,
#terms,
#join-campaign {
  scroll-margin-top: 88px;
}

@media (max-width: 1020px) {

  #home,
  #rewards,
  #how-it-works,
  #redemption-form,
  #terms,
  #join-campaign {
    scroll-margin-top: 80px;
  }

}


/* =========================================================
   MOBILE HERO CONNECTION
========================================================= */

@media (max-width: 1020px) {

  .vt-hero__container {
    padding-top: 112px !important;
  }

}

@media (max-width: 600px) {

  .vt-hero__container {
    padding-top: 98px !important;
  }

}


/* =========================================================
   SAFARI / IOS POLISH
========================================================= */

@supports (-webkit-touch-callout: none) {

  .wha-header {
    -webkit-backdrop-filter: blur(18px);
  }

  .wha-mobile-menu {
    min-height: -webkit-fill-available;
  }

}


/* =========================================================
   HIGH Z-INDEX CONFLICT FIX
========================================================= */

.wha-header {
  isolation: isolate;
}

.wha-header__container {
  z-index: 5;
}

.wha-mobile-menu__overlay {
  z-index: 99996;
}

.wha-mobile-menu {
  z-index: 99998;
}


/* =========================================================
   CUSTOM SCROLLBAR — MOBILE DRAWER
========================================================= */

.wha-mobile-menu {
  scrollbar-width: thin;
  scrollbar-color:
    rgba(212, 175, 55, 0.45)
    rgba(255, 255, 255, 0.03);
}

.wha-mobile-menu::-webkit-scrollbar {
  width: 5px;
}

.wha-mobile-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.025);
}

.wha-mobile-menu::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    linear-gradient(
      to bottom,
      var(--wha-gold-dark),
      var(--wha-gold-light)
    );
}


/* =========================================================
   TEXT SELECTION
========================================================= */

.wha-header ::selection {
  color: #191101;
  background: var(--wha-gold-light);
}


/* =========================================================
   PRINT
========================================================= */

@media print {

  .wha-header {
    display: none !important;
  }

  .vt-hero__container {
    padding-top: 40px !important;
  }

}


/* =========================================================
   FINAL SMALL MOBILE POLISH
========================================================= */

@media (max-width: 390px) {

  .wha-header__logo,
  .wha-header.is-scrolled .wha-header__logo {
    width: 142px;
  }

  .wha-header__logo img,
  .wha-header.is-scrolled .wha-header__logo img {
    width: 142px;
  }

  .vt-hero__container {
    padding-top: 94px !important;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .wha-header {
    animation: none !important;
  }

  .wha-header.is-menu-open .wha-mobile-menu__nav a {
    animation: none !important;
  }

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1c9833a *//* =========================================================
   WHITE HOUSE ACADEMY
   PREMIUM STICKY HEADER — BLACK & GOLD
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");


/* =========================================================
   HEADER BASE
========================================================= */

.wha-header {
  --wha-black: #030303;
  --wha-black-soft: #090909;
  --wha-gold: #d4af37;
  --wha-gold-light: #f3d87a;
  --wha-gold-dark: #8f6715;
  --wha-white: #ffffff;
  --wha-grey: #a5a5a5;

  position: fixed;
  z-index: 99999;

  top: 0;
  left: 0;
  right: 0;

  width: 100%;

  font-family: "Inter", Arial, sans-serif;

  background:
    linear-gradient(
      180deg,
      rgba(3, 3, 3, 0.94),
      rgba(3, 3, 3, 0.84)
    );

  border-bottom: 1px solid rgba(212, 175, 55, 0.16);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 12px 38px rgba(0, 0, 0, 0.24);

  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}


/* =========================================================
   RESET
========================================================= */

.wha-header,
.wha-header * {
  box-sizing: border-box;
}

.wha-header a {
  text-decoration: none;
}

.wha-header button {
  font: inherit;
}

.wha-header svg,
.wha-header img {
  display: block;
}


/* =========================================================
   GOLD TOP LINE
========================================================= */

.wha-header::before {
  content: "";

  position: absolute;
  top: 0;
  left: 50%;

  width: min(1380px, calc(100% - 70px));
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212, 175, 55, 0.45) 20%,
      rgba(243, 216, 122, 0.9) 50%,
      rgba(212, 175, 55, 0.45) 80%,
      transparent
    );

  transform: translateX(-50%);

  box-shadow:
    0 0 16px rgba(212, 175, 55, 0.18);
}


/* =========================================================
   HEADER GLOW
========================================================= */

.wha-header__glow {
  position: absolute;

  top: -100px;
  left: 50%;

  width: 560px;
  height: 190px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.11),
      transparent 70%
    );

  filter: blur(30px);

  transform: translateX(-50%);

  pointer-events: none;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.wha-header__container {
  position: relative;
  z-index: 4;

  width: min(1380px, calc(100% - 70px));
  min-height: 92px;

  margin: 0 auto;

  display: grid;
  grid-template-columns:
    minmax(210px, 0.75fr)
    minmax(480px, 1.4fr)
    minmax(260px, 0.85fr);

  align-items: center;
  gap: 34px;
}


/* =========================================================
   LOGO
========================================================= */

.wha-header__logo {
  position: relative;

  width: fit-content;
  max-width: 220px;
  height: 76px;

  display: flex;
  align-items: center;

  overflow: visible;

  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}

.wha-header__logo:hover {
  transform: translateY(-2px);
}

.wha-header__logo img {
  width: auto;
  max-width: 210px;
  height: 70px;

  object-fit: contain;
  object-position: left center;

  filter:
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 12px rgba(212, 175, 55, 0.08));
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.wha-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 2.2vw, 38px);
}

.wha-header__nav a {
  position: relative;

  padding: 34px 0 32px;

  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.78);

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.wha-header__nav a::before {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 24px;

  width: 0;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--wha-gold-dark),
      var(--wha-gold-light)
    );

  box-shadow:
    0 0 10px rgba(212, 175, 55, 0.35);

  transform: translateX(-50%);

  transition: width 0.3s ease;
}

.wha-header__nav a:hover,
.wha-header__nav a.is-active {
  color: var(--wha-gold-light);
}

.wha-header__nav a:hover {
  transform: translateY(-2px);
}

.wha-header__nav a:hover::before,
.wha-header__nav a.is-active::before {
  width: 100%;
}


/* =========================================================
   RIGHT ACTIONS
========================================================= */

.wha-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}


/* =========================================================
   CAMPAIGN STATUS
========================================================= */

.wha-header__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 0 2px;

  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;

  color: #75d98c;
}

.wha-header__status i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #59d579;

  box-shadow:
    0 0 0 4px rgba(89, 213, 121, 0.08),
    0 0 12px rgba(89, 213, 121, 0.52);

  animation: whaStatusPulse 1.8s ease-in-out infinite;
}


/* =========================================================
   HEADER CTA
========================================================= */

.wha-header__cta {
  position: relative;

  min-width: 164px;
  min-height: 48px;

  padding: 0 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border: 1px solid rgba(243, 216, 122, 0.78);
  border-radius: 3px;

  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;

  color: #1c1302;

  background:
    linear-gradient(
      115deg,
      #8d6516,
      #d4af37 30%,
      #f3d87a 55%,
      #a8781f
    );

  box-shadow:
    0 12px 32px rgba(212, 175, 55, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);

  overflow: hidden;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

.wha-header__cta::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 65%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.8),
      transparent
    );

  transform: skewX(-22deg);

  transition: left 0.7s ease;
}

.wha-header__cta span,
.wha-header__cta svg {
  position: relative;
  z-index: 2;
}

.wha-header__cta svg {
  width: 17px;
  height: 17px;

  transition: transform 0.35s ease;
}

.wha-header__cta:hover {
  transform: translateY(-4px);

  filter: brightness(1.05);

  box-shadow:
    0 18px 42px rgba(212, 175, 55, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.wha-header__cta:hover::before {
  left: 145%;
}

.wha-header__cta:hover svg {
  transform: translateX(4px);
}


/* =========================================================
   MENU TOGGLE
========================================================= */

.wha-header__toggle {
  width: 46px;
  height: 46px;

  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;

  padding: 0;

  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 4px;

  color: var(--wha-gold-light);

  background:
    linear-gradient(
      135deg,
      rgba(212, 175, 55, 0.06),
      rgba(255, 255, 255, 0.02)
    );

  cursor: pointer;
}

.wha-header__toggle span {
  width: 20px;
  height: 1.5px;

  background: currentColor;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}


/* =========================================================
   SCROLLED STATE
========================================================= */

.wha-header.is-scrolled {
  background:
    linear-gradient(
      180deg,
      rgba(2, 2, 2, 0.98),
      rgba(5, 5, 5, 0.96)
    );

  border-color: rgba(212, 175, 55, 0.24);

  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.44);
}

.wha-header.is-scrolled .wha-header__container {
  min-height: 78px;
}

.wha-header.is-scrolled .wha-header__logo {
  height: 64px;
}

.wha-header.is-scrolled .wha-header__logo img {
  height: 58px;
}

.wha-header__container,
.wha-header__logo,
.wha-header__logo img {
  transition:
    min-height 0.35s ease,
    height 0.35s ease,
    max-width 0.35s ease;
}


/* =========================================================
   MOBILE OVERLAY
========================================================= */

.wha-mobile-menu__overlay {
  position: fixed;
  z-index: 99996;

  inset: 0;

  display: block;

  border: 0;

  background: rgba(0, 0, 0, 0.72);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}


/* =========================================================
   MOBILE DRAWER
========================================================= */

.wha-mobile-menu {
  position: fixed;
  z-index: 99998;

  top: 0;
  right: 0;
  bottom: 0;

  width: min(420px, 88vw);

  padding: 24px;

  border-left: 1px solid rgba(212, 175, 55, 0.22);

  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(212, 175, 55, 0.12),
      transparent 28%
    ),
    linear-gradient(
      160deg,
      #0c0c0c,
      #030303 72%
    );

  box-shadow:
    -35px 0 90px rgba(0, 0, 0, 0.62);

  overflow-y: auto;

  transform: translateX(105%);

  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   MOBILE DRAWER HEADER
========================================================= */

.wha-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding-bottom: 22px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.wha-mobile-menu__brand {
  width: 170px;
  height: 68px;
}

.wha-mobile-menu__brand img {
  width: auto;
  max-width: 170px;
  height: 64px;

  object-fit: contain;
  object-position: left center;
}

.wha-mobile-menu__close {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 50%;

  color: var(--wha-gold-light);

  background: rgba(212, 175, 55, 0.05);

  cursor: pointer;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

.wha-mobile-menu__close:hover {
  transform: rotate(90deg);
  border-color: rgba(243, 216, 122, 0.55);
}

.wha-mobile-menu__close svg {
  width: 20px;
  height: 20px;
}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.wha-mobile-menu__nav {
  display: grid;

  margin-top: 30px;
}

.wha-mobile-menu__nav a {
  min-height: 66px;

  padding: 0 4px;

  display: flex;
  align-items: center;
  gap: 18px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  font-family: "Cinzel", Georgia, serif;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;

  color: var(--wha-white);

  transition:
    color 0.3s ease,
    padding-left 0.3s ease,
    border-color 0.3s ease;
}

.wha-mobile-menu__nav a > span {
  font-family: "Inter", Arial, sans-serif;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.12em;

  color: var(--wha-gold);
}

.wha-mobile-menu__nav a:hover {
  padding-left: 12px;

  color: var(--wha-gold-light);
  border-color: rgba(212, 175, 55, 0.25);
}


/* =========================================================
   MOBILE CAMPAIGN BOX
========================================================= */

.wha-mobile-menu__campaign {
  position: relative;

  margin-top: 28px;
  padding: 18px;

  border: 1px solid rgba(212, 175, 55, 0.18);
  border-left: 2px solid var(--wha-gold);
  border-radius: 5px;

  background:
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.075),
      rgba(255, 255, 255, 0.014)
    );
}

.wha-mobile-menu__campaign > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wha-mobile-menu__campaign i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #59d579;

  box-shadow:
    0 0 0 4px rgba(89, 213, 121, 0.08),
    0 0 11px rgba(89, 213, 121, 0.5);
}

.wha-mobile-menu__campaign span {
  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: #75d98c;
}

.wha-mobile-menu__campaign strong {
  display: block;

  margin-top: 9px;

  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;

  color: var(--wha-white);
}


/* =========================================================
   MOBILE CTA
========================================================= */

.wha-mobile-menu__cta {
  position: relative;

  width: 100%;
  min-height: 56px;

  margin-top: 18px;
  padding: 0 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  border: 1px solid rgba(243, 216, 122, 0.78);
  border-radius: 3px;

  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: #1c1302;

  background:
    linear-gradient(
      115deg,
      #8d6516,
      #d4af37 30%,
      #f3d87a 55%,
      #a8781f
    );

  box-shadow:
    0 14px 36px rgba(212, 175, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.wha-mobile-menu__cta svg {
  width: 18px;
  height: 18px;
}


/* =========================================================
   MENU OPEN STATE
========================================================= */

.wha-header.is-menu-open .wha-mobile-menu {
  transform: translateX(0);
}

.wha-header.is-menu-open .wha-mobile-menu__overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wha-header.is-menu-open .wha-header__toggle span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.wha-header.is-menu-open .wha-header__toggle span:nth-child(2) {
  opacity: 0;
}

.wha-header.is-menu-open .wha-header__toggle span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

body.wha-menu-open {
  overflow: hidden;
}


/* =========================================================
   PAGE OFFSET
========================================================= */

body:has(.wha-header) {
  padding-top: 92px;
}

body:has(.wha-header.is-scrolled) {
  padding-top: 78px;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes whaStatusPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1180px) {

  .wha-header__container {
    width: min(100% - 44px, 1080px);

    grid-template-columns:
      minmax(190px, 0.75fr)
      minmax(400px, 1.3fr)
      minmax(210px, 0.75fr);

    gap: 24px;
  }

  .wha-header::before {
    width: min(100% - 44px, 1080px);
  }

  .wha-header__nav {
    gap: 22px;
  }

  .wha-header__status {
    display: none;
  }

}


@media (max-width: 960px) {

  .wha-header__container {
    min-height: 82px;

    grid-template-columns: 1fr auto;
  }

  .wha-header__nav,
  .wha-header__status,
  .wha-header__cta {
    display: none;
  }

  .wha-header__toggle {
    display: flex;
  }

  .wha-header__logo {
    height: 68px;
  }

  .wha-header__logo img {
    height: 62px;
    max-width: 190px;
  }

  body:has(.wha-header) {
    padding-top: 82px;
  }

}


@media (max-width: 600px) {

  .wha-header__container {
    width: calc(100% - 28px);
    min-height: 74px;
  }

  .wha-header::before {
    width: calc(100% - 28px);
  }

  .wha-header__logo {
    max-width: 170px;
    height: 62px;
  }

  .wha-header__logo img {
    max-width: 165px;
    height: 56px;
  }

  .wha-header__toggle {
    width: 42px;
    height: 42px;
  }

  .wha-mobile-menu {
    width: min(390px, 92vw);
    padding: 20px;
  }

  .wha-mobile-menu__brand {
    width: 150px;
    height: 60px;
  }

  .wha-mobile-menu__brand img {
    max-width: 150px;
    height: 56px;
  }

  body:has(.wha-header) {
    padding-top: 74px;
  }

}


@media (max-width: 390px) {

  .wha-header__logo {
    max-width: 145px;
  }

  .wha-header__logo img {
    max-width: 140px;
  }

  .wha-mobile-menu__nav a {
    min-height: 61px;
    font-size: 15px;
  }

}


/* =========================================================
   ELEMENTOR FULL WIDTH FIX
========================================================= */

.elementor-widget-html:has(.wha-header),
.elementor-widget-html:has(.wha-header) > .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-widget-html .wha-header {
  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.wha-header a:focus-visible,
.wha-header button:focus-visible {
  outline: 2px solid rgba(243, 216, 122, 0.75);
  outline-offset: 4px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .wha-header *,
  .wha-header *::before,
  .wha-header *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3b1872a *//* =========================================================
   VERSUS TRADE — SECTION 01 HERO
   PART 1: BASE, BACKGROUND, CONTENT, BUTTONS
========================================================= */

/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");


/* =========================================================
   ROOT VARIABLES
========================================================= */

.vt-hero {
  --vt-black: #030303;
  --vt-black-soft: #080808;
  --vt-card: #0d0d0d;
  --vt-card-light: #141414;

  --vt-gold: #d4af37;
  --vt-gold-light: #f3d87a;
  --vt-gold-dark: #8f6715;

  --vt-white: #ffffff;
  --vt-grey: #a7a7a7;
  --vt-grey-dark: #676767;

  --vt-border: rgba(212, 175, 55, 0.22);
  --vt-border-soft: rgba(255, 255, 255, 0.08);

  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--vt-black);
  color: var(--vt-white);
  font-family: "Inter", Arial, sans-serif;
  overflow: hidden;
  isolation: isolate;
}


/* =========================================================
   RESET INSIDE SECTION
========================================================= */

.vt-hero,
.vt-hero * {
  box-sizing: border-box;
}

.vt-hero h1,
.vt-hero h2,
.vt-hero h3,
.vt-hero p {
  margin: 0;
}

.vt-hero a {
  text-decoration: none;
}

.vt-hero svg {
  display: block;
}


/* =========================================================
   BACKGROUND LAYERS
========================================================= */

.vt-hero__background {
  position: absolute;
  inset: 0;
  z-index: -10;

  background:
    radial-gradient(
      circle at 72% 34%,
      rgba(212, 175, 55, 0.13),
      transparent 28%
    ),
    radial-gradient(
      circle at 12% 18%,
      rgba(255, 255, 255, 0.04),
      transparent 25%
    ),
    linear-gradient(
      115deg,
      #030303 0%,
      #080808 46%,
      #030303 100%
    );
}


/* Dark cinematic overlay */
.vt-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -9;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.98) 0%,
      rgba(0, 0, 0, 0.9) 38%,
      rgba(0, 0, 0, 0.58) 70%,
      rgba(0, 0, 0, 0.82) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0.35) 65%,
      #030303 100%
    );
}


/* Premium trading grid */
.vt-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -8;
  opacity: 0.16;

  background-image:
    linear-gradient(
      rgba(212, 175, 55, 0.11) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.11) 1px,
      transparent 1px
    );

  background-size: 72px 72px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.75),
      transparent 92%
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.75),
      transparent 92%
    );
}


/* =========================================================
   GOLD GLOW
========================================================= */

.vt-hero__glow {
  position: absolute;
  z-index: -7;
  border-radius: 50%;
  filter: blur(85px);
  pointer-events: none;
}

.vt-hero__glow--one {
  width: 460px;
  height: 460px;
  top: 5%;
  right: 9%;

  background: rgba(212, 175, 55, 0.14);

  animation: vtGlowOne 7s ease-in-out infinite alternate;
}

.vt-hero__glow--two {
  width: 330px;
  height: 330px;
  left: -120px;
  bottom: 8%;

  background: rgba(139, 98, 15, 0.12);

  animation: vtGlowTwo 9s ease-in-out infinite alternate;
}


/* =========================================================
   PARTICLES
========================================================= */

.vt-hero__particles {
  position: absolute;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  overflow: hidden;
}

.vt-hero__particles span {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;

  background: var(--vt-gold-light);

  box-shadow:
    0 0 8px rgba(243, 216, 122, 0.8),
    0 0 18px rgba(212, 175, 55, 0.48);

  opacity: 0.5;

  animation: vtParticleFloat 8s linear infinite;
}

.vt-hero__particles span:nth-child(1) {
  left: 8%;
  top: 74%;
  animation-delay: 0s;
}

.vt-hero__particles span:nth-child(2) {
  left: 27%;
  top: 22%;
  animation-delay: 1.8s;
}

.vt-hero__particles span:nth-child(3) {
  right: 15%;
  top: 16%;
  animation-delay: 3.2s;
}

.vt-hero__particles span:nth-child(4) {
  right: 5%;
  bottom: 30%;
  animation-delay: 4.6s;
}

.vt-hero__particles span:nth-child(5) {
  left: 54%;
  bottom: 18%;
  animation-delay: 6s;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.vt-hero__container {
  position: relative;
  z-index: 5;

  width: min(1440px, calc(100% - 80px));
  min-height: calc(100vh - 110px);

  margin: 0 auto;
  padding: 130px 0 145px;

  display: grid;
  grid-template-columns:
    minmax(0, 1.02fr)
    minmax(420px, 0.98fr);

  align-items: center;
  gap: clamp(50px, 7vw, 110px);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.vt-hero__content {
  position: relative;
  max-width: 760px;

  animation: vtContentReveal 0.9s ease both;
}


/* Eyebrow */
.vt-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 24px;

  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--vt-gold-light);
}

.vt-hero__eyebrow-line {
  display: block;
  width: 42px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--vt-gold-light)
    );

  box-shadow: 0 0 10px rgba(212, 175, 55, 0.65);
}


/* Main title */
.vt-hero__title {
  max-width: 740px;

  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(48px, 5.2vw, 86px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.045em;

  color: var(--vt-white);
  text-wrap: balance;
}

.vt-hero__title span {
  display: block;

  background:
    linear-gradient(
      120deg,
      #9e731d 0%,
      #f4d97e 35%,
      #d4af37 58%,
      #8d6313 100%
    );

  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 30px rgba(212, 175, 55, 0.12);
}


/* Description */
.vt-hero__description {
  max-width: 670px;
  margin-top: 28px;

  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.85;
  font-weight: 400;

  color: var(--vt-grey);
}


/* =========================================================
   BUTTON AREA
========================================================= */

.vt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;

  margin-top: 36px;
}


/* Shared button */
.vt-btn {
  position: relative;
  min-height: 58px;
  padding: 0 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  border: 1px solid transparent;
  border-radius: 3px;

  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;

  overflow: hidden;
  isolation: isolate;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease;
}

.vt-btn span,
.vt-btn svg {
  position: relative;
  z-index: 2;
}

.vt-btn svg {
  width: 20px;
  height: 20px;

  transition: transform 0.35s ease;
}


/* Gold button */
.vt-btn--gold {
  color: #070707;

  background:
    linear-gradient(
      115deg,
      #8c6517 0%,
      #d4af37 28%,
      #f1d577 52%,
      #b48524 100%
    );

  border-color: rgba(243, 216, 122, 0.75);

  box-shadow:
    0 10px 35px rgba(212, 175, 55, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.vt-btn--gold::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;

  width: 70%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.75),
      transparent
    );

  transform: skewX(-20deg);

  transition: left 0.7s ease;
}

.vt-btn--gold:hover {
  color: #000000;

  transform: translateY(-4px);

  box-shadow:
    0 18px 45px rgba(212, 175, 55, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.vt-btn--gold:hover::before {
  left: 150%;
}

.vt-btn--gold:hover svg {
  transform: translateX(5px);
}


/* Outline button */
.vt-btn--outline {
  color: var(--vt-white);

  border-color: var(--vt-border);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.015)
    );

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vt-btn--outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(
      120deg,
      rgba(212, 175, 55, 0.2),
      transparent 55%
    );

  opacity: 0;

  transition: opacity 0.35s ease;
}

.vt-btn--outline:hover {
  color: var(--vt-gold-light);

  border-color: rgba(212, 175, 55, 0.55);

  transform: translateY(-4px);

  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.38),
    inset 0 0 28px rgba(212, 175, 55, 0.05);
}

.vt-btn--outline:hover::before {
  opacity: 1;
}


/* =========================================================
   CAMPAIGN INFORMATION
========================================================= */

.vt-hero__campaign {
  position: relative;

  display: flex;
  align-items: center;
  gap: 16px;

  width: fit-content;
  max-width: 100%;

  margin-top: 38px;
  padding: 16px 19px;

  border-left: 2px solid var(--vt-gold);

  background:
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.09),
      rgba(255, 255, 255, 0.015)
    );
}

.vt-hero__campaign::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;

  width: 2px;
  height: 38%;

  background: var(--vt-gold-light);

  box-shadow:
    0 0 12px rgba(243, 216, 122, 0.75);
}

.vt-hero__campaign-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  display: grid;
  place-items: center;

  border: 1px solid var(--vt-border);
  border-radius: 50%;

  color: var(--vt-gold-light);

  background: rgba(212, 175, 55, 0.06);
}

.vt-hero__campaign-icon svg {
  width: 20px;
  height: 20px;
}

.vt-hero__campaign > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vt-hero__campaign-label {
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-hero__campaign strong {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;

  color: var(--vt-white);
}


/* Small note */
.vt-hero__note {
  margin-top: 15px;

  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;

  color: var(--vt-grey-dark);
}


/* =========================================================
   RIGHT VISUAL BASE
   Detailed visual styles continue in Part 2
========================================================= */

.vt-hero__visual {
  position: relative;
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  animation: vtVisualReveal 1.1s 0.15s ease both;
}

.vt-hero__visual-frame {
  position: relative;
  width: 100%;
  min-height: 570px;

  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.01)
    );

  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  overflow: hidden;
}

.vt-hero__visual-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(212, 175, 55, 0.13),
      transparent 27%
    );
}

.vt-hero__visual-frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 6px;
}


/* =========================================================
   BASE ANIMATIONS
========================================================= */

@keyframes vtContentReveal {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vtVisualReveal {
  from {
    opacity: 0;
    transform: translateX(35px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes vtGlowOne {
  from {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.65;
  }

  to {
    transform: translate3d(-25px, 20px, 0) scale(1.12);
    opacity: 1;
  }
}

@keyframes vtGlowTwo {
  from {
    transform: translate3d(0, 0, 0) scale(0.95);
  }

  to {
    transform: translate3d(30px, -20px, 0) scale(1.1);
  }
}

@keyframes vtParticleFloat {
  0% {
    transform: translateY(30px) scale(0.8);
    opacity: 0;
  }

  20% {
    opacity: 0.65;
  }

  70% {
    opacity: 0.35;
  }

  100% {
    transform: translateY(-170px) scale(1.3);
    opacity: 0;
  }
}


/* =========================================================
   TABLET BASE
   Full responsive styling continues in Part 2
========================================================= */

@media (max-width: 1180px) {

  .vt-hero__container {
    width: min(100% - 48px, 1100px);

    grid-template-columns:
      minmax(0, 1fr)
      minmax(380px, 0.9fr);

    gap: 45px;
  }

  .vt-hero__title {
    font-size: clamp(44px, 5vw, 67px);
  }

  .vt-hero__visual-frame {
    min-height: 520px;
  }

}


/* =========================================================
   MOBILE BASE
   Detailed mobile visual styling continues in Part 2
========================================================= */

@media (max-width: 900px) {

  .vt-hero {
    min-height: auto;
  }

  .vt-hero__container {
    width: min(100% - 36px, 720px);
    min-height: auto;

    padding: 110px 0 155px;

    grid-template-columns: 1fr;
    gap: 58px;
  }

  .vt-hero__content {
    max-width: 100%;
  }

  .vt-hero__title {
    max-width: 680px;
    font-size: clamp(42px, 8vw, 66px);
  }

  .vt-hero__description {
    max-width: 640px;
  }

  .vt-hero__visual {
    max-width: 690px;
    margin: 0 auto;
  }

  .vt-hero__visual-frame {
    min-height: 510px;
  }

}


@media (max-width: 600px) {

  .vt-hero__grid {
    background-size: 42px 42px;
  }

  .vt-hero__container {
    width: calc(100% - 28px);
    padding: 92px 0 135px;
    gap: 44px;
  }

  .vt-hero__eyebrow {
    gap: 10px;
    margin-bottom: 18px;

    font-size: 9px;
    letter-spacing: 0.18em;
  }

  .vt-hero__eyebrow-line {
    width: 27px;
  }

  .vt-hero__title {
    font-size: clamp(38px, 12.2vw, 55px);
    line-height: 1.04;
  }

  .vt-hero__description {
    margin-top: 22px;

    font-size: 14px;
    line-height: 1.75;
  }

  .vt-hero__actions {
    margin-top: 28px;
    gap: 11px;
  }

  .vt-btn {
    width: 100%;
    min-height: 56px;
    padding: 0 20px;

    font-size: 12px;
  }

  .vt-hero__campaign {
    width: 100%;

    margin-top: 28px;
    padding: 14px 15px;
  }

  .vt-hero__campaign-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .vt-hero__campaign strong {
    font-size: 12px;
  }

  .vt-hero__visual-frame {
    min-height: 450px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .vt-hero *,
  .vt-hero *::before,
  .vt-hero *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

}
/* =========================================================
   VERSUS TRADE — SECTION 01 HERO
   PART 2: CHART, CARDS, GOLD BAR, STRIP & RESPONSIVE
========================================================= */


/* =========================================================
   TRADING CHART PANEL
========================================================= */

.vt-hero__chart {
  position: absolute;
  inset: 28px 28px 90px;

  border: 1px solid rgba(212, 175, 55, 0.13);
  border-radius: 8px;

  background:
    linear-gradient(
      145deg,
      rgba(10, 10, 10, 0.96),
      rgba(4, 4, 4, 0.88)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 25px 70px rgba(0, 0, 0, 0.35);

  overflow: hidden;
}

.vt-hero__chart::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 85% 17%,
      rgba(212, 175, 55, 0.1),
      transparent 25%
    );

  pointer-events: none;
}


/* Chart heading */
.vt-hero__chart-top {
  position: relative;
  z-index: 5;

  min-height: 92px;
  padding: 24px 25px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.vt-hero__chart-top > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.vt-hero__chart-top span {
  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: #6f6f6f;
}

.vt-hero__chart-top strong {
  font-family: "Cinzel", Georgia, serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.04em;

  color: #ffffff;
}


/* Live status */
.vt-hero__chart-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 10px;

  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 3px;

  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--vt-gold-light);

  background: rgba(212, 175, 55, 0.04);
}

.vt-hero__chart-status span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #52d273;

  box-shadow:
    0 0 0 4px rgba(82, 210, 115, 0.1),
    0 0 12px rgba(82, 210, 115, 0.65);

  animation: vtLivePulse 1.8s ease-in-out infinite;
}


/* Chart grid */
.vt-hero__chart-grid {
  position: absolute;
  inset: 92px 0 0;

  opacity: 0.38;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    );

  background-size: 56px 46px;
}


/* Line chart */
.vt-hero__chart-line {
  position: absolute;
  z-index: 2;

  left: 4%;
  right: 4%;
  bottom: 30px;

  width: 92%;
  height: 67%;

  overflow: visible;
}

.vt-hero__chart-path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;

  filter:
    drop-shadow(0 0 6px rgba(212, 175, 55, 0.42))
    drop-shadow(0 0 14px rgba(212, 175, 55, 0.18));

  animation:
    vtChartDraw 2.8s 0.7s ease forwards,
    vtChartGlow 3.5s 3.5s ease-in-out infinite alternate;
}

.vt-hero__chart-area {
  opacity: 0;

  animation: vtChartArea 1.2s 2.3s ease forwards;
}


/* =========================================================
   CANDLESTICKS
========================================================= */

.vt-hero__candles {
  position: absolute;
  z-index: 3;

  inset: 110px 28px 32px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  opacity: 0.27;
  pointer-events: none;
}

.vt-hero__candles span {
  position: relative;

  width: 7px;
  min-height: 50px;

  border-radius: 1px;

  animation: vtCandleMove 3.8s ease-in-out infinite alternate;
}

.vt-hero__candles span::before,
.vt-hero__candles span::after {
  content: "";
  position: absolute;
  left: 50%;

  width: 1px;

  transform: translateX(-50%);
}

.vt-hero__candles span::before {
  bottom: 100%;
  height: 22px;
}

.vt-hero__candles span::after {
  top: 100%;
  height: 19px;
}

.vt-hero__candles .up {
  background: rgba(212, 175, 55, 0.72);
}

.vt-hero__candles .up::before,
.vt-hero__candles .up::after {
  background: rgba(212, 175, 55, 0.8);
}

.vt-hero__candles .down {
  background: rgba(255, 255, 255, 0.24);
}

.vt-hero__candles .down::before,
.vt-hero__candles .down::after {
  background: rgba(255, 255, 255, 0.28);
}

.vt-hero__candles span:nth-child(1) {
  height: 54px;
  animation-delay: 0.1s;
}

.vt-hero__candles span:nth-child(2) {
  height: 76px;
  animation-delay: 0.4s;
}

.vt-hero__candles span:nth-child(3) {
  height: 63px;
  animation-delay: 0.7s;
}

.vt-hero__candles span:nth-child(4) {
  height: 92px;
  animation-delay: 1s;
}

.vt-hero__candles span:nth-child(5) {
  height: 70px;
  animation-delay: 1.3s;
}

.vt-hero__candles span:nth-child(6) {
  height: 105px;
  animation-delay: 1.6s;
}

.vt-hero__candles span:nth-child(7) {
  height: 83px;
  animation-delay: 1.9s;
}

.vt-hero__candles span:nth-child(8) {
  height: 114px;
  animation-delay: 2.2s;
}

.vt-hero__candles span:nth-child(9) {
  height: 93px;
  animation-delay: 2.5s;
}

.vt-hero__candles span:nth-child(10) {
  height: 128px;
  animation-delay: 2.8s;
}


/* =========================================================
   FLOATING REWARD CARD
========================================================= */

.vt-hero__reward-card {
  position: absolute;
  z-index: 12;

  left: 3px;
  bottom: 48px;

  min-width: 230px;
  padding: 16px 18px;

  display: flex;
  align-items: center;
  gap: 13px;

  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 7px;

  background:
    linear-gradient(
      135deg,
      rgba(18, 18, 18, 0.95),
      rgba(7, 7, 7, 0.92)
    );

  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  animation: vtRewardFloat 4.8s ease-in-out infinite;
}

.vt-hero__reward-card::before {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: inherit;

  background:
    linear-gradient(
      120deg,
      rgba(212, 175, 55, 0.1),
      transparent 58%
    );

  pointer-events: none;
}

.vt-hero__reward-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 50%;

  color: var(--vt-gold-light);

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.13),
      rgba(212, 175, 55, 0.03)
    );

  box-shadow:
    inset 0 0 18px rgba(212, 175, 55, 0.05),
    0 0 22px rgba(212, 175, 55, 0.08);
}

.vt-hero__reward-icon svg {
  width: 21px;
  height: 21px;
}

.vt-hero__reward-card > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vt-hero__reward-card span {
  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: #777777;
}

.vt-hero__reward-card strong {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;

  color: #ffffff;
}


/* =========================================================
   FLOATING GOLD BAR
========================================================= */

.vt-hero__gold-bar {
  position: absolute;
  z-index: 14;

  right: -18px;
  top: 100px;

  width: 190px;
  height: 112px;
  padding: 22px 21px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border: 1px solid rgba(255, 240, 176, 0.55);
  border-radius: 8px;

  color: #2f2104;

  background:
    linear-gradient(
      135deg,
      #73500b 0%,
      #bd8f26 20%,
      #f4dc8a 48%,
      #c19128 72%,
      #77530e 100%
    );

  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 35px rgba(212, 175, 55, 0.16),
    inset 0 2px 1px rgba(255, 255, 255, 0.42),
    inset 0 -3px 8px rgba(88, 56, 0, 0.32);

  transform: rotate(8deg);

  overflow: hidden;

  animation: vtGoldBarFloat 5.4s ease-in-out infinite;
}

.vt-hero__gold-bar::before {
  content: "";
  position: absolute;
  inset: 7px;

  border: 1px solid rgba(74, 49, 4, 0.32);
  border-radius: 5px;
}

.vt-hero__gold-bar::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -70%;

  width: 50%;
  height: 160%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.72),
      transparent
    );

  transform: skewX(-22deg);

  animation: vtGoldSweep 4.8s 1s ease-in-out infinite;
}

.vt-hero__gold-bar span,
.vt-hero__gold-bar strong,
.vt-hero__gold-bar small {
  position: relative;
  z-index: 2;
}

.vt-hero__gold-bar span {
  font-size: 8px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.vt-hero__gold-bar strong {
  margin-top: 4px;

  font-family: "Cinzel", Georgia, serif;
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.vt-hero__gold-bar small {
  margin-top: 7px;

  font-size: 7px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.14em;
}


/* =========================================================
   CAMPAIGN STATUS CARD
========================================================= */

.vt-hero__stat-card {
  position: absolute;
  z-index: 11;

  right: 26px;
  bottom: 21px;

  min-width: 154px;
  padding: 13px 15px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;

  background: rgba(7, 7, 7, 0.88);

  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.42);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.vt-hero__stat-card span {
  display: block;

  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: #666666;
}

.vt-hero__stat-card strong {
  margin-top: 7px;

  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;

  color: #ffffff;
}

.vt-hero__stat-card i {
  display: block;
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #53d676;

  box-shadow:
    0 0 0 4px rgba(83, 214, 118, 0.08),
    0 0 13px rgba(83, 214, 118, 0.52);
}


/* =========================================================
   BOTTOM INFORMATION STRIP
========================================================= */

.vt-hero__bottom-strip {
  position: absolute;
  z-index: 20;

  left: 0;
  right: 0;
  bottom: 0;

  min-height: 108px;
  padding: 0 max(40px, calc((100vw - 1440px) / 2));

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  border-top: 1px solid rgba(212, 175, 55, 0.15);

  background:
    linear-gradient(
      90deg,
      rgba(6, 6, 6, 0.98),
      rgba(12, 12, 12, 0.98),
      rgba(6, 6, 6, 0.98)
    );

  box-shadow:
    0 -20px 55px rgba(0, 0, 0, 0.38);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.vt-hero__bottom-strip > div {
  position: relative;

  min-width: 0;
  padding: 27px 34px;

  display: flex;
  align-items: center;
  gap: 17px;

  border-right: 1px solid rgba(255, 255, 255, 0.055);
}

.vt-hero__bottom-strip > div:first-child {
  padding-left: 0;
}

.vt-hero__bottom-strip > div:last-child {
  border-right: 0;
}

.vt-hero__bottom-strip > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 0;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--vt-gold),
      transparent
    );

  transition: width 0.45s ease;
}

.vt-hero__bottom-strip > div:hover::before {
  width: 100%;
}

.vt-hero__bottom-strip > div > span {
  flex: 0 0 auto;

  font-family: "Cinzel", Georgia, serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 600;

  color: var(--vt-gold);
}

.vt-hero__bottom-strip p {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 5px;

  font-size: 9px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: #666666;
}

.vt-hero__bottom-strip strong {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;

  color: #ffffff;
  text-transform: none;
}


/* =========================================================
   HOVER EFFECTS
========================================================= */

.vt-hero__visual-frame {
  transition:
    transform 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}

.vt-hero__visual-frame:hover {
  transform: translateY(-6px);

  border-color: rgba(212, 175, 55, 0.28);

  box-shadow:
    0 48px 120px rgba(0, 0, 0, 0.62),
    0 0 45px rgba(212, 175, 55, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}


/* =========================================================
   PART 2 ANIMATIONS
========================================================= */

@keyframes vtChartDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes vtChartArea {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes vtChartGlow {
  from {
    filter:
      drop-shadow(0 0 4px rgba(212, 175, 55, 0.3))
      drop-shadow(0 0 10px rgba(212, 175, 55, 0.12));
  }

  to {
    filter:
      drop-shadow(0 0 9px rgba(212, 175, 55, 0.55))
      drop-shadow(0 0 22px rgba(212, 175, 55, 0.22));
  }
}

@keyframes vtLivePulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.88);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes vtCandleMove {
  from {
    transform: scaleY(0.82);
    opacity: 0.18;
  }

  to {
    transform: scaleY(1.08);
    opacity: 0.36;
  }
}

@keyframes vtRewardFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes vtGoldBarFloat {
  0%,
  100% {
    transform: rotate(8deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(5deg) translate3d(-5px, -13px, 0);
  }
}

@keyframes vtGoldSweep {
  0%,
  52% {
    left: -75%;
  }

  78%,
  100% {
    left: 145%;
  }
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1180px) {

  .vt-hero__chart {
    inset: 24px 22px 84px;
  }

  .vt-hero__gold-bar {
    right: -10px;
    top: 92px;

    width: 170px;
    height: 103px;
  }

  .vt-hero__reward-card {
    left: -4px;
    bottom: 44px;

    min-width: 215px;
  }

  .vt-hero__bottom-strip {
    padding-inline: 24px;
  }

  .vt-hero__bottom-strip > div {
    padding-inline: 25px;
  }

}


/* =========================================================
   TABLET STACKED LAYOUT
========================================================= */

@media (max-width: 900px) {

  .vt-hero__visual-frame {
    min-height: 520px;
  }

  .vt-hero__chart {
    inset: 26px 26px 92px;
  }

  .vt-hero__gold-bar {
    right: 0;
    top: 88px;
  }

  .vt-hero__reward-card {
    left: 0;
    bottom: 48px;
  }

  .vt-hero__bottom-strip {
    position: relative;

    min-height: auto;
    padding: 0 18px;

    grid-template-columns: repeat(3, 1fr);
  }

  .vt-hero__bottom-strip > div,
  .vt-hero__bottom-strip > div:first-child {
    padding: 24px 18px;
  }

  .vt-hero__bottom-strip > div > span {
    font-size: 18px;
  }

  .vt-hero__bottom-strip strong {
    font-size: 12px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .vt-hero__visual-frame {
    min-height: 430px;
    border-radius: 7px;
  }

  .vt-hero__chart {
    inset: 18px 12px 74px;
  }

  .vt-hero__chart-top {
    min-height: 76px;
    padding: 18px 16px;
  }

  .vt-hero__chart-top strong {
    font-size: 17px;
  }

  .vt-hero__chart-top span {
    font-size: 7px;
  }

  .vt-hero__chart-status {
    padding: 7px 8px;
    gap: 6px;

    font-size: 7px;
  }

  .vt-hero__chart-status span {
    width: 5px;
    height: 5px;
  }

  .vt-hero__chart-grid {
    inset: 76px 0 0;
    background-size: 37px 40px;
  }

  .vt-hero__chart-line {
    left: 2%;
    right: 2%;
    bottom: 20px;

    width: 96%;
    height: 65%;
  }

  .vt-hero__candles {
    inset: 90px 17px 25px;
  }

  .vt-hero__candles span {
    width: 4px;
  }

  .vt-hero__gold-bar {
    top: 71px;
    right: -5px;

    width: 132px;
    height: 84px;
    padding: 17px 15px;

    border-radius: 6px;
  }

  .vt-hero__gold-bar strong {
    font-size: 21px;
  }

  .vt-hero__gold-bar span {
    font-size: 6px;
  }

  .vt-hero__gold-bar small {
    margin-top: 5px;
    font-size: 5px;
  }

  .vt-hero__reward-card {
    left: -3px;
    bottom: 34px;

    min-width: 178px;
    padding: 12px 13px;
    gap: 10px;
  }

  .vt-hero__reward-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .vt-hero__reward-icon svg {
    width: 17px;
    height: 17px;
  }

  .vt-hero__reward-card span {
    font-size: 6px;
  }

  .vt-hero__reward-card strong {
    font-size: 10px;
  }

  .vt-hero__stat-card {
    right: 10px;
    bottom: 10px;

    min-width: 126px;
    padding: 10px 11px;
  }

  .vt-hero__stat-card span {
    font-size: 6px;
  }

  .vt-hero__stat-card strong {
    margin-top: 5px;
    font-size: 10px;
  }

  .vt-hero__stat-card i {
    width: 6px;
    height: 6px;
  }

  .vt-hero__bottom-strip {
    grid-template-columns: 1fr;
    padding: 0 14px;
  }

  .vt-hero__bottom-strip > div,
  .vt-hero__bottom-strip > div:first-child {
    min-height: 82px;
    padding: 18px 4px;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  }

  .vt-hero__bottom-strip > div:last-child {
    border-bottom: 0;
  }

  .vt-hero__bottom-strip > div > span {
    width: 34px;
    font-size: 17px;
  }

  .vt-hero__bottom-strip p {
    font-size: 8px;
  }

  .vt-hero__bottom-strip strong {
    font-size: 12px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .vt-hero__visual-frame {
    min-height: 405px;
  }

  .vt-hero__chart {
    inset-inline: 9px;
  }

  .vt-hero__gold-bar {
    right: -8px;

    width: 120px;
    height: 78px;
  }

  .vt-hero__reward-card {
    min-width: 163px;
  }

  .vt-hero__stat-card {
    min-width: 112px;
  }

}


/* =========================================================
   ELEMENTOR FIXES
========================================================= */

.elementor-widget-html .vt-hero {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

.vt-hero .elementor-button,
.vt-hero button {
  font-family: inherit;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .vt-hero__chart-path {
    stroke-dashoffset: 0;
  }

  .vt-hero__chart-area {
    opacity: 1;
  }

  .vt-hero__gold-bar,
  .vt-hero__reward-card,
  .vt-hero__chart-status span,
  .vt-hero__candles span {
    animation: none !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4837a63 *//* =========================================================
   VERSUS TRADE — SECTION 02
   REAL REWARD SHOWCASE
   PREMIUM BLACK & GOLD
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");


/* =========================================================
   SECTION BASE
========================================================= */

.vt-showcase {
  --vt-black: #030303;
  --vt-black-soft: #080808;
  --vt-card: #101010;

  --vt-gold: #d4af37;
  --vt-gold-light: #f3d87a;
  --vt-gold-dark: #8f6715;

  --vt-white: #ffffff;
  --vt-grey: #a5a5a5;
  --vt-grey-dark: #686868;

  --vt-border: rgba(212, 175, 55, 0.22);

  position: relative;
  width: 100%;
  padding: 130px 0;

  color: var(--vt-white);
  background: var(--vt-black);

  font-family: "Inter", Arial, sans-serif;

  overflow: hidden;
  isolation: isolate;
}


/* =========================================================
   RESET
========================================================= */

.vt-showcase,
.vt-showcase * {
  box-sizing: border-box;
}

.vt-showcase h2,
.vt-showcase h3,
.vt-showcase p {
  margin: 0;
}

.vt-showcase a {
  color: inherit;
  text-decoration: none;
}

.vt-showcase img,
.vt-showcase svg {
  display: block;
}


/* =========================================================
   BACKGROUND
========================================================= */

.vt-showcase__background {
  position: absolute;
  inset: 0;
  z-index: -10;

  background:
    radial-gradient(
      circle at 50% 6%,
      rgba(212, 175, 55, 0.13),
      transparent 27%
    ),
    radial-gradient(
      circle at 8% 48%,
      rgba(212, 175, 55, 0.07),
      transparent 24%
    ),
    radial-gradient(
      circle at 92% 74%,
      rgba(139, 96, 16, 0.08),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #030303 0%,
      #090909 48%,
      #030303 100%
    );
}

.vt-showcase__grid {
  position: absolute;
  inset: 0;
  z-index: -9;

  opacity: 0.1;

  background-image:
    linear-gradient(
      rgba(212, 175, 55, 0.11) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.11) 1px,
      transparent 1px
    );

  background-size: 80px 80px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.88),
      transparent 96%
    );

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.88),
      transparent 96%
    );
}


/* =========================================================
   GLOW
========================================================= */

.vt-showcase__glow {
  position: absolute;
  z-index: -8;

  border-radius: 50%;
  filter: blur(100px);

  pointer-events: none;
}

.vt-showcase__glow--one {
  width: 500px;
  height: 500px;

  top: 5%;
  left: -170px;

  background: rgba(212, 175, 55, 0.09);

  animation: vtShowcaseGlowOne 9s ease-in-out infinite alternate;
}

.vt-showcase__glow--two {
  width: 430px;
  height: 430px;

  right: -150px;
  bottom: 18%;

  background: rgba(139, 96, 16, 0.08);

  animation: vtShowcaseGlowTwo 11s ease-in-out infinite alternate;
}


/* =========================================================
   CONTAINER
========================================================= */

.vt-showcase__container {
  position: relative;
  z-index: 5;

  width: min(1360px, calc(100% - 80px));
  margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.vt-showcase__heading {
  margin-bottom: 58px;
}

.vt-showcase__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 22px;

  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;

  color: var(--vt-gold-light);
}

.vt-showcase__eyebrow span {
  width: 46px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--vt-gold-light)
    );

  box-shadow:
    0 0 10px rgba(212, 175, 55, 0.55);
}

.vt-showcase__heading-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(320px, 0.8fr);

  gap: clamp(40px, 7vw, 100px);
  align-items: end;
}

.vt-showcase__heading h2 {
  max-width: 880px;

  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(44px, 5vw, 74px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.038em;

  color: var(--vt-white);
}

.vt-showcase__heading h2 span {
  display: block;

  background:
    linear-gradient(
      120deg,
      #946914 0%,
      #f3d87a 38%,
      #d4af37 62%,
      #8b6112 100%
    );

  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;
}

.vt-showcase__heading-layout > p {
  max-width: 480px;
  padding-bottom: 6px;

  font-size: 16px;
  line-height: 1.85;

  color: var(--vt-grey);
}


/* =========================================================
   SUMMARY
========================================================= */

.vt-showcase__summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  margin-bottom: 74px;

  border-top: 1px solid var(--vt-border);
  border-bottom: 1px solid var(--vt-border);

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.015),
      rgba(212, 175, 55, 0.035),
      rgba(255, 255, 255, 0.015)
    );
}

.vt-showcase__summary-item {
  min-height: 112px;
  padding: 25px 30px;

  display: flex;
  align-items: center;
  gap: 19px;

  border-right: 1px solid rgba(255, 255, 255, 0.055);

  transition:
    background-color 0.35s ease,
    transform 0.35s ease;
}

.vt-showcase__summary-item:last-child {
  border-right: 0;
}

.vt-showcase__summary-item:hover {
  background: rgba(212, 175, 55, 0.045);
}

.vt-showcase__summary-item > strong {
  flex: 0 0 auto;

  font-family: "Cinzel", Georgia, serif;
  font-size: 31px;
  line-height: 1;
  font-weight: 600;

  color: var(--vt-gold-light);
}

.vt-showcase__summary-item > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vt-showcase__summary-item span {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;

  color: var(--vt-white);
}

.vt-showcase__summary-item small {
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--vt-grey-dark);
}


/* =========================================================
   GRAND REWARD
========================================================= */

.vt-showcase__grand {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(440px, 0.92fr);

  min-height: 620px;
  margin-bottom: 46px;

  border: 1px solid rgba(243, 216, 122, 0.42);
  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(25, 19, 7, 0.98),
      rgba(8, 8, 8, 0.99)
    );

  box-shadow:
    0 52px 135px rgba(0, 0, 0, 0.66),
    0 0 80px rgba(212, 175, 55, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  overflow: hidden;

  animation: vtShowcaseReveal 0.9s ease both;
}

.vt-showcase__grand::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 80% 14%,
      rgba(243, 216, 122, 0.13),
      transparent 26%
    );

  pointer-events: none;
}

.vt-showcase__grand-glow {
  position: absolute;
  z-index: -1;

  inset: -90px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.12),
      transparent 64%
    );

  filter: blur(30px);

  animation: vtShowcaseGrandGlow 5s ease-in-out infinite alternate;
}


/* =========================================================
   GRAND MEDIA
========================================================= */

.vt-showcase__grand-media {
  position: relative;
  min-height: 620px;

  overflow: hidden;
}

.vt-showcase__grand-media::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 54%,
      rgba(5, 5, 5, 0.94) 100%
    );

  pointer-events: none;
}

.vt-showcase__grand-media img {
  width: 100%;
  height: 100%;
  min-height: 620px;

  object-fit: cover;
  object-position: center;

  filter:
    saturate(0.92)
    contrast(1.08)
    brightness(0.82);

  transform: scale(1.02);

  transition:
    transform 0.8s ease,
    filter 0.8s ease;
}

.vt-showcase__grand:hover .vt-showcase__grand-media img {
  transform: scale(1.07);

  filter:
    saturate(1)
    contrast(1.1)
    brightness(0.9);
}

.vt-showcase__grand-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.42) 72%,
      rgba(0, 0, 0, 0.78)
    );
}

.vt-showcase__grand-label {
  position: absolute;
  z-index: 4;

  top: 28px;
  left: 28px;

  min-height: 34px;
  padding: 0 14px;

  display: inline-flex;
  align-items: center;

  border: 1px solid rgba(243, 216, 122, 0.55);
  border-radius: 999px;

  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: var(--vt-gold-light);
  background: rgba(5, 5, 5, 0.72);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.vt-showcase__grand-lots {
  position: absolute;
  z-index: 4;

  left: 28px;
  bottom: 28px;

  width: 132px;
  height: 132px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(243, 216, 122, 0.64);
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(243, 216, 122, 0.23),
      rgba(7, 7, 7, 0.94) 64%
    );

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.56),
    0 0 0 9px rgba(212, 175, 55, 0.035),
    0 0 38px rgba(212, 175, 55, 0.1);
}

.vt-showcase__grand-lots span {
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.17em;

  color: var(--vt-grey);
}

.vt-showcase__grand-lots strong {
  margin-top: 7px;

  font-family: "Cinzel", Georgia, serif;
  font-size: 31px;
  line-height: 1;
  font-weight: 600;

  color: var(--vt-gold-light);
}

.vt-showcase__grand-lots small {
  margin-top: 7px;

  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.17em;

  color: var(--vt-grey-dark);
}


/* =========================================================
   GRAND CONTENT
========================================================= */

.vt-showcase__grand-content {
  position: relative;
  z-index: 4;

  padding: 46px 44px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vt-showcase__grand-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.vt-showcase__category,
.vt-showcase-card__category {
  display: block;

  margin-bottom: 10px;

  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-showcase__grand-content h3 {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.025em;

  color: var(--vt-white);
}

.vt-showcase__grand-content h3 em,
.vt-showcase-card__content h3 em {
  display: block;

  font-style: normal;

  background:
    linear-gradient(
      120deg,
      #a7791f,
      #f3d87a 46%,
      #c99f2e
    );

  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;
}

.vt-showcase__value {
  flex: 0 0 auto;

  min-width: 152px;
  padding: 15px 16px;

  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 6px;

  background: rgba(212, 175, 55, 0.045);
}

.vt-showcase__value span {
  display: block;

  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: var(--vt-grey-dark);
}

.vt-showcase__value strong {
  display: block;
  margin-top: 7px;

  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;

  color: var(--vt-gold-light);
}

.vt-showcase__grand-description {
  margin-top: 25px;

  font-size: 15px;
  line-height: 1.8;

  color: var(--vt-grey);
}

.vt-showcase__vehicle-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;

  margin-top: 28px;
}

.vt-showcase__vehicle-options span {
  min-height: 46px;
  padding: 0 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 4px;

  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  text-align: center;

  color: var(--vt-white);

  background:
    linear-gradient(
      135deg,
      rgba(212, 175, 55, 0.055),
      rgba(255, 255, 255, 0.015)
    );

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.vt-showcase__vehicle-options span:hover {
  transform: translateY(-3px);

  border-color: rgba(243, 216, 122, 0.46);
  color: var(--vt-gold-light);
}

.vt-showcase__grand-bottom {
  margin-top: 28px;
  padding-top: 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  border-top: 1px solid rgba(255, 255, 255, 0.065);
}

.vt-showcase__grand-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vt-showcase__grand-note span {
  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-showcase__grand-note strong {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;

  color: var(--vt-white);
}


/* =========================================================
   GRAND CTA
========================================================= */

.vt-showcase__grand-cta {
  position: relative;

  min-width: 205px;
  min-height: 54px;
  padding: 0 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  border: 1px solid rgba(243, 216, 122, 0.76);
  border-radius: 3px;

  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: #1d1402;

  background:
    linear-gradient(
      115deg,
      #8c6416,
      #d4af37 30%,
      #f3d87a 56%,
      #a97a20
    );

  box-shadow:
    0 14px 38px rgba(212, 175, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);

  overflow: hidden;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.vt-showcase__grand-cta::before {
  content: "";

  position: absolute;
  top: 0;
  left: -120%;

  width: 65%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.82),
      transparent
    );

  transform: skewX(-22deg);

  transition: left 0.75s ease;
}

.vt-showcase__grand-cta span,
.vt-showcase__grand-cta svg {
  position: relative;
  z-index: 2;
}

.vt-showcase__grand-cta svg {
  width: 18px;
  height: 18px;

  transition: transform 0.35s ease;
}

.vt-showcase__grand-cta:hover {
  transform: translateY(-4px);

  box-shadow:
    0 21px 48px rgba(212, 175, 55, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.vt-showcase__grand-cta:hover::before {
  left: 145%;
}

.vt-showcase__grand-cta:hover svg {
  transform: translateX(4px);
}


/* =========================================================
   CARDS GRID
========================================================= */

.vt-showcase__grid-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}


/* =========================================================
   STANDARD REWARD CARD
========================================================= */

.vt-showcase-card {
  position: relative;

  min-width: 0;

  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      rgba(17, 17, 17, 0.98),
      rgba(7, 7, 7, 0.99)
    );

  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);

  overflow: hidden;

  opacity: 0;

  animation: vtShowcaseReveal 0.8s ease forwards;

  transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}

.vt-showcase-card:nth-child(1) {
  animation-delay: 0.08s;
}

.vt-showcase-card:nth-child(2) {
  animation-delay: 0.16s;
}

.vt-showcase-card:nth-child(3) {
  animation-delay: 0.24s;
}

.vt-showcase-card:nth-child(4) {
  animation-delay: 0.32s;
}

.vt-showcase-card:nth-child(5) {
  animation-delay: 0.4s;
}

.vt-showcase-card:nth-child(6) {
  animation-delay: 0.48s;
}

.vt-showcase-card:hover {
  transform: translateY(-9px);

  border-color: rgba(212, 175, 55, 0.34);

  box-shadow:
    0 46px 110px rgba(0, 0, 0, 0.58),
    0 0 42px rgba(212, 175, 55, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.vt-showcase-card--featured {
  border-color: rgba(243, 216, 122, 0.3);

  background:
    linear-gradient(
      145deg,
      rgba(23, 18, 7, 0.98),
      rgba(7, 7, 7, 0.99)
    );
}


/* =========================================================
   CARD MEDIA
========================================================= */

.vt-showcase-card__media {
  position: relative;
  height: 330px;

  overflow: hidden;
}

.vt-showcase-card__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter:
    saturate(0.9)
    contrast(1.07)
    brightness(0.82);

  transform: scale(1.02);

  transition:
    transform 0.75s ease,
    filter 0.75s ease;
}

.vt-showcase-card:hover .vt-showcase-card__media img {
  transform: scale(1.08);

  filter:
    saturate(1)
    contrast(1.08)
    brightness(0.9);
}

.vt-showcase-card__media-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.06),
      rgba(0, 0, 0, 0.18) 48%,
      rgba(7, 7, 7, 0.96) 100%
    );

  pointer-events: none;
}

.vt-showcase-card__badge {
  position: absolute;

  top: 20px;
  left: 20px;

  min-height: 31px;
  padding: 0 12px;

  display: inline-flex;
  align-items: center;

  border: 1px solid rgba(243, 216, 122, 0.42);
  border-radius: 999px;

  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: var(--vt-gold-light);
  background: rgba(5, 5, 5, 0.7);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vt-showcase-card__lot {
  position: absolute;

  right: 20px;
  bottom: 18px;

  min-width: 94px;
  min-height: 74px;
  padding: 10px 13px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(243, 216, 122, 0.42);
  border-radius: 6px;

  background: rgba(6, 6, 6, 0.78);

  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.vt-showcase-card__lot strong {
  font-family: "Cinzel", Georgia, serif;
  font-size: 23px;
  line-height: 1;
  font-weight: 600;

  color: var(--vt-gold-light);
}

.vt-showcase-card__lot span {
  margin-top: 6px;

  font-size: 7px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;

  color: var(--vt-grey);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.vt-showcase-card__content {
  padding: 28px 28px 30px;
}

.vt-showcase-card__content h3 {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(27px, 2.8vw, 39px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;

  color: var(--vt-white);
}

.vt-showcase-card__content p {
  margin-top: 15px;

  font-size: 14px;
  line-height: 1.75;

  color: var(--vt-grey);
}


/* =========================================================
   CHOICES
========================================================= */

.vt-showcase-card__choices {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-top: 24px;
  padding-top: 19px;

  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.vt-showcase-card__choices span {
  flex: 1;

  min-height: 40px;
  padding: 0 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 4px;

  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
  text-align: center;

  color: var(--vt-white);
  background: rgba(255, 255, 255, 0.018);
}

.vt-showcase-card__choices i {
  flex: 0 0 auto;

  font-size: 8px;
  line-height: 1;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;

  color: var(--vt-gold);
}

.vt-showcase-card__single-reward {
  min-height: 42px;
  margin-top: 24px;
  padding: 0 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(212, 175, 55, 0.17);
  border-radius: 4px;

  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;

  color: var(--vt-gold-light);

  background:
    linear-gradient(
      135deg,
      rgba(212, 175, 55, 0.065),
      rgba(255, 255, 255, 0.018)
    );
}


/* =========================================================
   NOTICE
========================================================= */

.vt-showcase__notice {
  position: relative;

  margin-top: 64px;
  padding: 26px 28px;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;

  border: 1px solid rgba(212, 175, 55, 0.2);
  border-left: 3px solid var(--vt-gold);
  border-radius: 6px;

  background:
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.075),
      rgba(255, 255, 255, 0.014)
    );

  box-shadow:
    0 25px 65px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.vt-showcase__notice-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 50%;

  color: var(--vt-gold-light);
  background: rgba(212, 175, 55, 0.055);
}

.vt-showcase__notice-icon svg {
  width: 23px;
  height: 23px;
}

.vt-showcase__notice > div:nth-child(2) span {
  display: block;

  margin-bottom: 8px;

  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-showcase__notice p {
  font-size: 13px;
  line-height: 1.75;

  color: var(--vt-grey);
}

.vt-showcase__notice > a {
  min-width: 190px;
  min-height: 50px;
  padding: 0 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  border: 1px solid rgba(243, 216, 122, 0.72);
  border-radius: 3px;

  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;

  color: #1d1402;

  background:
    linear-gradient(
      115deg,
      #8c6416,
      #d4af37 30%,
      #f3d87a 56%,
      #a97a20
    );

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.vt-showcase__notice > a svg {
  width: 17px;
  height: 17px;

  transition: transform 0.35s ease;
}

.vt-showcase__notice > a:hover {
  transform: translateY(-4px);

  box-shadow:
    0 18px 42px rgba(212, 175, 55, 0.25);
}

.vt-showcase__notice > a:hover svg {
  transform: translateX(4px);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes vtShowcaseGlowOne {
  from {
    transform: translate3d(0, 0, 0) scale(0.95);
    opacity: 0.6;
  }

  to {
    transform: translate3d(45px, 28px, 0) scale(1.1);
    opacity: 1;
  }
}

@keyframes vtShowcaseGlowTwo {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(-35px, -22px, 0) scale(1.14);
  }
}

@keyframes vtShowcaseGrandGlow {
  from {
    opacity: 0.55;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1.07);
  }
}

@keyframes vtShowcaseReveal {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .vt-showcase__container {
    width: min(100% - 48px, 1000px);
  }

  .vt-showcase__heading-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .vt-showcase__heading-layout > p {
    max-width: 720px;
  }

  .vt-showcase__grand {
    grid-template-columns: 1fr;
  }

  .vt-showcase__grand-media,
  .vt-showcase__grand-media img {
    min-height: 520px;
  }

  .vt-showcase__grand-media::after {
    background:
      linear-gradient(
        180deg,
        transparent 48%,
        rgba(5, 5, 5, 0.96) 100%
      );
  }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 850px) {

  .vt-showcase {
    padding: 95px 0;
  }

  .vt-showcase__summary {
    grid-template-columns: 1fr;
  }

  .vt-showcase__summary-item {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  }

  .vt-showcase__summary-item:last-child {
    border-bottom: 0;
  }

  .vt-showcase__grid-cards {
    grid-template-columns: 1fr;
  }

  .vt-showcase__grand-top,
  .vt-showcase__grand-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .vt-showcase__value {
    width: 100%;
  }

  .vt-showcase__grand-cta {
    width: 100%;
  }

  .vt-showcase__notice {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .vt-showcase__notice > a {
    grid-column: 1 / -1;
    width: 100%;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .vt-showcase {
    padding: 78px 0;
  }

  .vt-showcase__container {
    width: calc(100% - 28px);
  }

  .vt-showcase__eyebrow {
    font-size: 9px;
    letter-spacing: 0.17em;
  }

  .vt-showcase__eyebrow span {
    width: 28px;
  }

  .vt-showcase__heading h2 {
    font-size: clamp(35px, 10vw, 48px);
  }

  .vt-showcase__heading-layout > p {
    font-size: 14px;
    line-height: 1.75;
  }

  .vt-showcase__grand-media,
  .vt-showcase__grand-media img {
    min-height: 410px;
  }

  .vt-showcase__grand-label {
    top: 18px;
    left: 18px;
  }

  .vt-showcase__grand-lots {
    left: 18px;
    bottom: 18px;

    width: 104px;
    height: 104px;
  }

  .vt-showcase__grand-lots strong {
    font-size: 24px;
  }

  .vt-showcase__grand-content {
    padding: 29px 20px;
  }

  .vt-showcase__grand-content h3 {
    font-size: 34px;
  }

  .vt-showcase__vehicle-options {
    grid-template-columns: 1fr;
  }

  .vt-showcase-card__media {
    height: 260px;
  }

  .vt-showcase-card__content {
    padding: 23px 20px 25px;
  }

  .vt-showcase-card__content h3 {
    font-size: 27px;
  }

  .vt-showcase-card__choices {
    flex-wrap: wrap;
  }

  .vt-showcase-card__choices span {
    flex: 1 1 100%;
  }

  .vt-showcase__notice {
    padding: 22px 18px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .vt-showcase__summary-item {
    padding-inline: 18px;
  }

  .vt-showcase__grand-content h3 {
    font-size: 30px;
  }

  .vt-showcase-card__badge {
    top: 14px;
    left: 14px;

    font-size: 7px;
  }

  .vt-showcase-card__lot {
    right: 14px;
    bottom: 14px;

    min-width: 82px;
  }

  .vt-showcase-card__lot strong {
    font-size: 20px;
  }

}


/* =========================================================
   ELEMENTOR FULL WIDTH FIX
========================================================= */

.elementor-widget-html .vt-showcase {
  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

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

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4c9b2c2 *//* =========================================================
   VERSUS TRADE — SECTION 03
   PREMIUM PROCESS TIMELINE
   BLACK & GOLD CORPORATE DESIGN
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");


/* =========================================================
   SECTION BASE
========================================================= */

.vt-flow {
  --vt-black: #030303;
  --vt-black-soft: #080808;
  --vt-card: #0d0d0d;
  --vt-card-light: #141414;

  --vt-gold: #d4af37;
  --vt-gold-light: #f3d87a;
  --vt-gold-dark: #8f6715;

  --vt-white: #ffffff;
  --vt-grey: #a5a5a5;
  --vt-grey-dark: #696969;

  --vt-border: rgba(212, 175, 55, 0.22);
  --vt-border-soft: rgba(255, 255, 255, 0.07);

  position: relative;

  width: 100%;
  padding: 130px 0;

  color: var(--vt-white);

  background: var(--vt-black);

  font-family: "Inter", Arial, sans-serif;

  overflow: hidden;
  isolation: isolate;
}


/* =========================================================
   RESET
========================================================= */

.vt-flow,
.vt-flow * {
  box-sizing: border-box;
}

.vt-flow h2,
.vt-flow h3,
.vt-flow p {
  margin: 0;
}

.vt-flow a {
  color: inherit;
  text-decoration: none;
}

.vt-flow svg {
  display: block;
}


/* =========================================================
   BACKGROUND
========================================================= */

.vt-flow__background {
  position: absolute;
  z-index: -10;

  inset: 0;

  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(212, 175, 55, 0.11),
      transparent 25%
    ),
    radial-gradient(
      circle at 10% 65%,
      rgba(139, 96, 16, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 82% 92%,
      rgba(212, 175, 55, 0.06),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      #030303 0%,
      #090909 48%,
      #030303 100%
    );
}


.vt-flow__grid {
  position: absolute;
  z-index: -9;

  inset: 0;

  opacity: 0.1;

  background-image:
    linear-gradient(
      rgba(212, 175, 55, 0.11) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.11) 1px,
      transparent 1px
    );

  background-size: 78px 78px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.9),
      transparent 97%
    );

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.9),
      transparent 97%
    );
}


/* =========================================================
   GLOW
========================================================= */

.vt-flow__glow {
  position: absolute;
  z-index: -8;

  border-radius: 50%;

  filter: blur(100px);

  pointer-events: none;
}


.vt-flow__glow--one {
  top: 6%;
  right: -150px;

  width: 460px;
  height: 460px;

  background: rgba(212, 175, 55, 0.1);

  animation:
    vtFlowGlowOne 9s ease-in-out infinite alternate;
}


.vt-flow__glow--two {
  left: -140px;
  bottom: 14%;

  width: 390px;
  height: 390px;

  background: rgba(139, 96, 16, 0.08);

  animation:
    vtFlowGlowTwo 11s ease-in-out infinite alternate;
}


/* =========================================================
   CONTAINER
========================================================= */

.vt-flow__container {
  position: relative;
  z-index: 5;

  width: min(1360px, calc(100% - 80px));
  margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.vt-flow__heading {
  margin-bottom: 58px;
}


.vt-flow__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 22px;

  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;

  color: var(--vt-gold-light);
}


.vt-flow__eyebrow span {
  display: block;

  width: 46px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--vt-gold-light)
    );

  box-shadow:
    0 0 10px rgba(212, 175, 55, 0.55);
}


.vt-flow__heading-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(320px, 0.8fr);

  align-items: end;

  gap: clamp(40px, 7vw, 100px);
}


.vt-flow__heading h2 {
  max-width: 900px;

  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(44px, 5vw, 74px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.038em;

  color: var(--vt-white);
}


.vt-flow__heading h2 span {
  display: block;

  background:
    linear-gradient(
      120deg,
      #946914 0%,
      #f3d87a 38%,
      #d4af37 62%,
      #8b6112 100%
    );

  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;
}


.vt-flow__heading-layout > p {
  max-width: 490px;

  padding-bottom: 7px;

  font-size: 16px;
  line-height: 1.85;

  color: var(--vt-grey);
}


/* =========================================================
   PROCESS OVERVIEW
========================================================= */

.vt-flow__overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  margin-bottom: 94px;

  border-top: 1px solid var(--vt-border);
  border-bottom: 1px solid var(--vt-border);

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.015),
      rgba(212, 175, 55, 0.035),
      rgba(255, 255, 255, 0.015)
    );
}


.vt-flow__overview-item {
  position: relative;

  min-height: 114px;
  padding: 26px 30px;

  display: flex;
  align-items: center;
  gap: 19px;

  border-right:
    1px solid rgba(255, 255, 255, 0.055);

  overflow: hidden;

  transition:
    background-color 0.35s ease;
}


.vt-flow__overview-item:last-child {
  border-right: 0;
}


.vt-flow__overview-item::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 0;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--vt-gold-light),
      transparent
    );

  transition: width 0.45s ease;
}


.vt-flow__overview-item:hover {
  background: rgba(212, 175, 55, 0.045);
}


.vt-flow__overview-item:hover::before {
  width: 100%;
}


.vt-flow__overview-item > strong {
  flex: 0 0 auto;

  font-family: "Cinzel", Georgia, serif;
  font-size: 31px;
  line-height: 1;
  font-weight: 600;

  color: var(--vt-gold-light);

  text-shadow:
    0 0 20px rgba(212, 175, 55, 0.13);
}


.vt-flow__overview-item > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


.vt-flow__overview-item span {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;

  color: var(--vt-white);
}


.vt-flow__overview-item small {
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--vt-grey-dark);
}


/* =========================================================
   TIMELINE WRAPPER
========================================================= */

.vt-flow__timeline {
  position: relative;

  display: flex;
  flex-direction: column;
  gap: 62px;

  padding: 10px 0 34px;
}


/* =========================================================
   CENTER TIMELINE
========================================================= */

.vt-flow__timeline-line {
  position: absolute;
  z-index: 1;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 1px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(212, 175, 55, 0.34) 7%,
      rgba(212, 175, 55, 0.34) 93%,
      transparent
    );

  transform: translateX(-50%);
}


.vt-flow__timeline-line::before,
.vt-flow__timeline-line::after {
  content: "";

  position: absolute;
  left: 50%;

  width: 13px;
  height: 13px;

  border: 1px solid rgba(243, 216, 122, 0.55);
  border-radius: 50%;

  background: #0b0b0b;

  box-shadow:
    0 0 0 6px rgba(212, 175, 55, 0.035),
    0 0 20px rgba(212, 175, 55, 0.12);

  transform: translateX(-50%);
}


.vt-flow__timeline-line::before {
  top: 0;
}


.vt-flow__timeline-line::after {
  bottom: 0;
}


.vt-flow__timeline-line > span {
  position: absolute;

  top: 0;
  left: 50%;

  width: 3px;
  height: 150px;

  border-radius: 999px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      var(--vt-gold-light),
      transparent
    );

  box-shadow:
    0 0 22px rgba(212, 175, 55, 0.62);

  transform: translateX(-50%);

  animation:
    vtFlowTimelineMove 6s linear infinite;
}


/* =========================================================
   STEP BASE
========================================================= */

.vt-flow-step {
  position: relative;
  z-index: 4;

  width: calc(50% - 72px);

  opacity: 0;

  animation:
    vtFlowStepReveal 0.85s ease forwards;
}


.vt-flow-step:nth-of-type(2) {
  animation-delay: 0.07s;
}

.vt-flow-step:nth-of-type(3) {
  animation-delay: 0.14s;
}

.vt-flow-step:nth-of-type(4) {
  animation-delay: 0.21s;
}

.vt-flow-step:nth-of-type(5) {
  animation-delay: 0.28s;
}

.vt-flow-step:nth-of-type(6) {
  animation-delay: 0.35s;
}

.vt-flow-step:nth-of-type(7) {
  animation-delay: 0.42s;
}


.vt-flow-step--left {
  align-self: flex-start;
}


.vt-flow-step--right {
  align-self: flex-end;
}


/* =========================================================
   CONNECTOR LINE
========================================================= */

.vt-flow-step::after {
  content: "";

  position: absolute;
  z-index: -1;

  top: 56px;

  width: 74px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.08),
      rgba(212, 175, 55, 0.62)
    );
}


.vt-flow-step--left::after {
  right: -72px;
}


.vt-flow-step--right::after {
  left: -72px;

  transform: rotate(180deg);
}


/* =========================================================
   TIMELINE MARKER
========================================================= */

.vt-flow-step__marker {
  position: absolute;
  z-index: 8;

  top: 20px;

  width: 74px;
  height: 74px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(243, 216, 122, 0.5);
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(243, 216, 122, 0.2),
      rgba(8, 8, 8, 0.98) 64%
    );

  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.52),
    0 0 0 8px rgba(212, 175, 55, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  transition:
    transform 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}


.vt-flow-step--left .vt-flow-step__marker {
  right: -109px;
}


.vt-flow-step--right .vt-flow-step__marker {
  left: -109px;
}


.vt-flow-step__marker::before {
  content: "";

  position: absolute;
  inset: 7px;

  border:
    1px solid rgba(212, 175, 55, 0.14);
  border-radius: 50%;
}


.vt-flow-step__marker span {
  position: relative;
  z-index: 2;

  font-family: "Cinzel", Georgia, serif;
  font-size: 20px;
  line-height: 1;
  font-weight: 600;

  color: var(--vt-gold-light);
}


.vt-flow-step:hover .vt-flow-step__marker {
  transform: translateY(-4px) rotate(-4deg);

  border-color: rgba(243, 216, 122, 0.78);

  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.58),
    0 0 0 8px rgba(212, 175, 55, 0.045),
    0 0 34px rgba(212, 175, 55, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}


/* =========================================================
   STEP CARD
========================================================= */

.vt-flow-step__card {
  position: relative;

  min-height: 330px;
  padding: 32px 30px 28px;

  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      rgba(18, 18, 18, 0.98),
      rgba(7, 7, 7, 0.99)
    );

  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);

  overflow: hidden;

  transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}


.vt-flow-step__card::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(212, 175, 55, 0.1),
      transparent 28%
    );

  pointer-events: none;
}


.vt-flow-step__card::after {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 58%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.045),
      transparent
    );

  transform: skewX(-22deg);

  transition: left 0.85s ease;
}


.vt-flow-step:hover .vt-flow-step__card {
  transform: translateY(-8px);

  border-color: rgba(212, 175, 55, 0.36);

  box-shadow:
    0 46px 110px rgba(0, 0, 0, 0.58),
    0 0 42px rgba(212, 175, 55, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}


.vt-flow-step:hover .vt-flow-step__card::after {
  left: 150%;
}


/* =========================================================
   STEP TOP
========================================================= */

.vt-flow-step__top {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  padding-bottom: 22px;
  margin-bottom: 22px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.06);
}


.vt-flow-step__top > div:first-child {
  min-width: 0;
}


.vt-flow-step__label {
  display: block;

  margin-bottom: 10px;

  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: var(--vt-gold);
}


.vt-flow-step__top h3 {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(26px, 2.65vw, 38px);
  line-height: 1.13;
  font-weight: 600;
  letter-spacing: -0.02em;

  color: var(--vt-white);
}


.vt-flow-step__top h3 em {
  display: block;

  font-style: normal;

  background:
    linear-gradient(
      120deg,
      #a7791f,
      #f3d87a 46%,
      #c99f2e
    );

  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;
}


/* =========================================================
   STEP STATUS
========================================================= */

.vt-flow-step__status {
  flex: 0 0 auto;

  min-height: 30px;
  padding: 0 11px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(212, 175, 55, 0.18);
  border-radius: 999px;

  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;

  color: var(--vt-gold-light);

  background: rgba(212, 175, 55, 0.055);
}


.vt-flow-step__status--final {
  color: #261a02;

  border-color:
    rgba(243, 216, 122, 0.65);

  background:
    linear-gradient(
      120deg,
      #9c7019,
      #f3d87a,
      #bd8c24
    );
}


/* =========================================================
   STEP DESCRIPTION
========================================================= */

.vt-flow-step__card > p {
  position: relative;
  z-index: 3;

  font-size: 14px;
  line-height: 1.8;

  color: var(--vt-grey);
}


/* =========================================================
   STEP META
========================================================= */

.vt-flow-step__meta {
  position: relative;
  z-index: 3;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;

  margin-top: 25px;
  padding-top: 20px;

  border-top:
    1px solid rgba(255, 255, 255, 0.055);
}


.vt-flow-step__meta span {
  position: relative;

  min-height: 42px;
  padding: 0 12px 0 29px;

  display: flex;
  align-items: center;

  border:
    1px solid rgba(212, 175, 55, 0.13);
  border-radius: 4px;

  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;

  color: var(--vt-white);

  background:
    linear-gradient(
      135deg,
      rgba(212, 175, 55, 0.045),
      rgba(255, 255, 255, 0.016)
    );
}


.vt-flow-step__meta span::before {
  content: "";

  position: absolute;

  left: 12px;
  top: 50%;

  width: 7px;
  height: 7px;

  border: 1px solid rgba(243, 216, 122, 0.6);
  border-radius: 50%;

  background: var(--vt-gold);

  box-shadow:
    0 0 9px rgba(212, 175, 55, 0.4);

  transform: translateY(-50%);
}


/* =========================================================
   FINAL STEP
========================================================= */

.vt-flow-step--final .vt-flow-step__card {
  border-color: rgba(243, 216, 122, 0.35);

  background:
    linear-gradient(
      145deg,
      rgba(27, 20, 7, 0.98),
      rgba(8, 8, 8, 0.99)
    );

  box-shadow:
    0 42px 110px rgba(0, 0, 0, 0.56),
    0 0 55px rgba(212, 175, 55, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}


.vt-flow-step--final .vt-flow-step__card::before {
  background:
    radial-gradient(
      circle at 86% 12%,
      rgba(243, 216, 122, 0.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(212, 175, 55, 0.09),
      transparent 30%
    );
}


.vt-flow-step--final .vt-flow-step__marker {
  border-color:
    rgba(243, 216, 122, 0.72);

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(243, 216, 122, 0.27),
      rgba(10, 8, 4, 0.98) 64%
    );

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 0 9px rgba(212, 175, 55, 0.04),
    0 0 42px rgba(212, 175, 55, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}


/* =========================================================
   FINAL CARD SHINE
========================================================= */

.vt-flow-step__shine {
  position: absolute;
  z-index: 2;

  top: 0;
  left: -120%;

  width: 45%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.07),
      transparent
    );

  transform: skewX(-22deg);

  animation:
    vtFlowFinalShine 6.5s ease-in-out infinite;

  pointer-events: none;
}


/* =========================================================
   ACTION PANEL
========================================================= */

.vt-flow__action {
  position: relative;

  margin-top: 94px;
  padding: 31px 32px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;

  border:
    1px solid rgba(212, 175, 55, 0.26);
  border-radius: 9px;

  background:
    linear-gradient(
      120deg,
      rgba(212, 175, 55, 0.1),
      rgba(255, 255, 255, 0.018) 50%,
      rgba(212, 175, 55, 0.05)
    );

  box-shadow:
    0 35px 90px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);

  overflow: hidden;
}


.vt-flow__action::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 8% 50%,
      rgba(243, 216, 122, 0.12),
      transparent 25%
    ),
    radial-gradient(
      circle at 92% 24%,
      rgba(212, 175, 55, 0.08),
      transparent 28%
    );

  pointer-events: none;
}


.vt-flow__action::after {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 45%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.055),
      transparent
    );

  transform: skewX(-22deg);

  animation:
    vtFlowActionSweep 7s ease-in-out infinite;
}


/* =========================================================
   ACTION CONTENT
========================================================= */

.vt-flow__action-content {
  position: relative;
  z-index: 3;

  min-width: 0;

  display: flex;
  align-items: center;
  gap: 20px;
}


.vt-flow__action-number {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(243, 216, 122, 0.52);
  border-radius: 50%;

  font-family: "Cinzel", Georgia, serif;
  font-size: 21px;
  font-weight: 600;

  color: var(--vt-gold-light);

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.17),
      rgba(212, 175, 55, 0.025)
    );

  box-shadow:
    0 0 32px rgba(212, 175, 55, 0.07);
}


.vt-flow__action-content > div:last-child {
  min-width: 0;
}


.vt-flow__action-content span {
  display: block;

  margin-bottom: 8px;

  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: var(--vt-gold);
}


.vt-flow__action-content h3 {
  max-width: 680px;

  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(25px, 2.7vw, 38px);
  line-height: 1.18;
  font-weight: 600;

  color: var(--vt-white);
}


.vt-flow__action-content p {
  max-width: 700px;

  margin-top: 10px;

  font-size: 13px;
  line-height: 1.7;

  color: var(--vt-grey);
}


/* =========================================================
   ACTION CTA
========================================================= */

.vt-flow__action-cta {
  position: relative;
  z-index: 3;

  min-width: 220px;
  min-height: 56px;
  padding: 0 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  border:
    1px solid rgba(243, 216, 122, 0.78);
  border-radius: 3px;

  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;

  color: #1d1402;

  background:
    linear-gradient(
      115deg,
      #8c6416,
      #d4af37 30%,
      #f3d87a 56%,
      #a97a20
    );

  box-shadow:
    0 15px 40px rgba(212, 175, 55, 0.19),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);

  overflow: hidden;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}


.vt-flow__action-cta::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 65%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.82),
      transparent
    );

  transform: skewX(-22deg);

  transition: left 0.75s ease;
}


.vt-flow__action-cta span,
.vt-flow__action-cta svg {
  position: relative;
  z-index: 2;
}


.vt-flow__action-cta svg {
  width: 19px;
  height: 19px;

  transition: transform 0.35s ease;
}


.vt-flow__action-cta:hover {
  transform: translateY(-4px);

  box-shadow:
    0 22px 50px rgba(212, 175, 55, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}


.vt-flow__action-cta:hover::before {
  left: 145%;
}


.vt-flow__action-cta:hover svg {
  transform: translateX(5px);
}


/* =========================================================
   REMINDER
========================================================= */

.vt-flow__reminder {
  position: relative;

  max-width: 1000px;
  margin: 28px auto 0;
  padding: 23px 26px;

  border-left:
    2px solid var(--vt-gold);

  background:
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.075),
      rgba(255, 255, 255, 0.012)
    );
}


.vt-flow__reminder::before {
  content: "";

  position: absolute;

  top: 0;
  left: -2px;

  width: 2px;
  height: 40%;

  background: var(--vt-gold-light);

  box-shadow:
    0 0 14px rgba(243, 216, 122, 0.65);
}


.vt-flow__reminder span {
  display: block;

  margin-bottom: 8px;

  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: var(--vt-gold);
}


.vt-flow__reminder p {
  font-size: 13px;
  line-height: 1.75;

  color: var(--vt-grey);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes vtFlowGlowOne {
  from {
    transform: translate3d(0, 0, 0) scale(0.95);
    opacity: 0.6;
  }

  to {
    transform: translate3d(-40px, 28px, 0) scale(1.1);
    opacity: 1;
  }
}


@keyframes vtFlowGlowTwo {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(35px, -22px, 0) scale(1.14);
  }
}


@keyframes vtFlowTimelineMove {
  0% {
    top: 0;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    top: calc(100% - 150px);
    opacity: 0;
  }
}


@keyframes vtFlowStepReveal {
  from {
    opacity: 0;
    transform: translateY(32px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes vtFlowFinalShine {
  0%,
  60% {
    left: -120%;
  }

  84%,
  100% {
    left: 145%;
  }
}


@keyframes vtFlowActionSweep {
  0%,
  62% {
    left: -120%;
  }

  84%,
  100% {
    left: 145%;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .vt-flow__container {
    width: min(100% - 48px, 1000px);
  }

  .vt-flow__heading-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .vt-flow__heading-layout > p {
    max-width: 720px;
  }

  .vt-flow-step {
    width: calc(50% - 57px);
  }

  .vt-flow-step::after {
    width: 58px;
  }

  .vt-flow-step--left::after {
    right: -56px;
  }

  .vt-flow-step--right::after {
    left: -56px;
  }

  .vt-flow-step--left .vt-flow-step__marker {
    right: -94px;
  }

  .vt-flow-step--right .vt-flow-step__marker {
    left: -94px;
  }

  .vt-flow-step__card {
    padding: 28px 24px 25px;
  }

  .vt-flow-step__top {
    flex-direction: column;
  }

  .vt-flow-step__status {
    align-self: flex-start;
  }

}


/* =========================================================
   MOBILE TIMELINE
========================================================= */

@media (max-width: 850px) {

  .vt-flow {
    padding: 95px 0;
  }

  .vt-flow__container {
    width: min(100% - 34px, 720px);
  }

  .vt-flow__overview {
    grid-template-columns: 1fr;
    margin-bottom: 72px;
  }

  .vt-flow__overview-item {
    border-right: 0;
    border-bottom:
      1px solid rgba(255, 255, 255, 0.055);
  }

  .vt-flow__overview-item:last-child {
    border-bottom: 0;
  }

  .vt-flow__timeline {
    gap: 42px;

    padding-left: 40px;
  }

  .vt-flow__timeline-line {
    left: 13px;

    transform: none;
  }

  .vt-flow-step,
  .vt-flow-step--left,
  .vt-flow-step--right {
    width: 100%;

    align-self: auto;
  }

  .vt-flow-step::after {
    display: none;
  }

  .vt-flow-step__marker,
  .vt-flow-step--left .vt-flow-step__marker,
  .vt-flow-step--right .vt-flow-step__marker {
    top: 24px;
    left: -39px;
    right: auto;

    width: 76px;
    height: 76px;
  }

  .vt-flow-step__card {
    min-height: auto;

    padding:
      29px 23px
      26px 53px;
  }

  .vt-flow__action {
    margin-top: 72px;

    align-items: flex-start;
    flex-direction: column;
  }

  .vt-flow__action-cta {
    width: 100%;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .vt-flow {
    padding: 78px 0;
  }

  .vt-flow__container {
    width: calc(100% - 28px);
  }

  .vt-flow__heading {
    margin-bottom: 44px;
  }

  .vt-flow__eyebrow {
    font-size: 9px;
    letter-spacing: 0.17em;
  }

  .vt-flow__eyebrow span {
    width: 28px;
  }

  .vt-flow__heading h2 {
    font-size: clamp(35px, 10vw, 48px);
  }

  .vt-flow__heading-layout > p {
    font-size: 14px;
    line-height: 1.75;
  }

  .vt-flow__overview-item {
    min-height: 96px;

    padding: 21px 18px;
  }

  .vt-flow__overview-item > strong {
    font-size: 27px;
  }

  .vt-flow__timeline {
    padding-left: 31px;
  }

  .vt-flow__timeline-line {
    left: 9px;
  }

  .vt-flow-step__marker,
  .vt-flow-step--left .vt-flow-step__marker,
  .vt-flow-step--right .vt-flow-step__marker {
    left: -31px;

    width: 62px;
    height: 62px;
  }

  .vt-flow-step__marker span {
    font-size: 17px;
  }

  .vt-flow-step__card {
    padding:
      25px 18px
      23px 41px;
  }

  .vt-flow-step__top h3 {
    font-size: 25px;
  }

  .vt-flow-step__card > p {
    font-size: 13px;
  }

  .vt-flow-step__meta {
    grid-template-columns: 1fr;
  }

  .vt-flow__action {
    padding: 25px 20px;
  }

  .vt-flow__action-content {
    align-items: flex-start;
    flex-direction: column;
  }

  .vt-flow__action-number {
    width: 58px;
    height: 58px;
    flex-basis: 58px;

    font-size: 18px;
  }

  .vt-flow__action-content h3 {
    font-size: 25px;
  }

  .vt-flow__reminder {
    padding: 20px 18px;
  }

  .vt-flow__reminder p {
    font-size: 12px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .vt-flow__timeline {
    padding-left: 27px;
  }

  .vt-flow__timeline-line {
    left: 8px;
  }

  .vt-flow-step__marker,
  .vt-flow-step--left .vt-flow-step__marker,
  .vt-flow-step--right .vt-flow-step__marker {
    left: -27px;

    width: 56px;
    height: 56px;
  }

  .vt-flow-step__marker span {
    font-size: 15px;
  }

  .vt-flow-step__card {
    padding-left: 36px;
  }

  .vt-flow-step__top h3 {
    font-size: 22px;
  }

  .vt-flow__action-content h3 {
    font-size: 22px;
  }

}


/* =========================================================
   ELEMENTOR FULL WIDTH
========================================================= */

.elementor-widget-html .vt-flow {
  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* Remove Elementor widget spacing */
.elementor-widget-html:has(.vt-flow),
.elementor-widget-html:has(.vt-flow)
> .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   SCROLL OFFSET
========================================================= */

#how-it-works {
  scroll-margin-top: 88px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

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

  .vt-flow-step {
    opacity: 1;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8a8fbda *//* =========================================================
   VERSUS TRADE — SECTION 04
   DUMMY REDEMPTION FORM
   PREMIUM BLACK & GOLD
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");


/* =========================================================
   SECTION BASE
========================================================= */

.vt-redemption {
  --vt-black: #030303;
  --vt-black-soft: #080808;
  --vt-card: #0d0d0d;
  --vt-card-light: #141414;

  --vt-gold: #d4af37;
  --vt-gold-light: #f3d87a;
  --vt-gold-dark: #8f6715;

  --vt-white: #ffffff;
  --vt-grey: #a4a4a4;
  --vt-grey-dark: #666666;

  --vt-border: rgba(212, 175, 55, 0.22);
  --vt-border-soft: rgba(255, 255, 255, 0.07);

  position: relative;
  width: 100%;
  padding: 130px 0;

  color: var(--vt-white);
  background: var(--vt-black);

  font-family: "Inter", Arial, sans-serif;

  overflow: hidden;
  isolation: isolate;
}


/* =========================================================
   RESET
========================================================= */

.vt-redemption,
.vt-redemption * {
  box-sizing: border-box;
}

.vt-redemption h2,
.vt-redemption h3,
.vt-redemption h4,
.vt-redemption p {
  margin: 0;
}

.vt-redemption button,
.vt-redemption input,
.vt-redemption select,
.vt-redemption textarea {
  font: inherit;
}

.vt-redemption svg {
  display: block;
}


/* =========================================================
   BACKGROUND
========================================================= */

.vt-redemption__background {
  position: absolute;
  inset: 0;
  z-index: -10;

  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(212, 175, 55, 0.1),
      transparent 24%
    ),
    radial-gradient(
      circle at 88% 36%,
      rgba(212, 175, 55, 0.08),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #030303 0%,
      #090909 48%,
      #030303 100%
    );
}

.vt-redemption__grid {
  position: absolute;
  inset: 0;
  z-index: -9;

  opacity: 0.11;

  background-image:
    linear-gradient(
      rgba(212, 175, 55, 0.11) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.11) 1px,
      transparent 1px
    );

  background-size: 78px 78px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.85),
      transparent 96%
    );

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.85),
      transparent 96%
    );
}


/* =========================================================
   GLOW
========================================================= */

.vt-redemption__glow {
  position: absolute;
  z-index: -8;

  border-radius: 50%;
  filter: blur(100px);

  pointer-events: none;
}

.vt-redemption__glow--one {
  width: 450px;
  height: 450px;

  left: -140px;
  top: 8%;

  background: rgba(212, 175, 55, 0.1);

  animation: vtRedemptionGlowOne 8s ease-in-out infinite alternate;
}

.vt-redemption__glow--two {
  width: 420px;
  height: 420px;

  right: -130px;
  bottom: 10%;

  background: rgba(139, 96, 16, 0.09);

  animation: vtRedemptionGlowTwo 10s ease-in-out infinite alternate;
}


/* =========================================================
   CONTAINER
========================================================= */

.vt-redemption__container {
  position: relative;
  z-index: 5;

  width: min(1360px, calc(100% - 80px));
  margin: 0 auto;

  display: grid;
  grid-template-columns:
    minmax(0, 0.88fr)
    minmax(560px, 1.12fr);

  gap: clamp(55px, 7vw, 110px);
  align-items: start;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.vt-redemption__content {
  position: sticky;
  top: 110px;

  max-width: 590px;
}

.vt-redemption__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 22px;

  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;

  color: var(--vt-gold-light);
}

.vt-redemption__eyebrow span {
  display: block;
  width: 46px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--vt-gold-light)
    );

  box-shadow:
    0 0 10px rgba(212, 175, 55, 0.55);
}

.vt-redemption__content h2 {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(42px, 4.7vw, 68px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.035em;

  color: var(--vt-white);
}

.vt-redemption__content h2 span {
  display: block;

  background:
    linear-gradient(
      120deg,
      #9b7019 0%,
      #f3d87a 38%,
      #d4af37 62%,
      #8b6112 100%
    );

  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;
}

.vt-redemption__description {
  margin-top: 24px;

  font-size: 16px;
  line-height: 1.85;

  color: var(--vt-grey);
}


/* =========================================================
   INFORMATION CARDS
========================================================= */

.vt-redemption__info-list {
  display: grid;
  gap: 14px;

  margin-top: 36px;
}

.vt-redemption__info-card {
  position: relative;

  padding: 18px 19px;

  display: flex;
  align-items: center;
  gap: 15px;

  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 6px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025),
      rgba(212, 175, 55, 0.025)
    );

  overflow: hidden;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
}

.vt-redemption__info-card::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      120deg,
      rgba(212, 175, 55, 0.08),
      transparent 50%
    );

  opacity: 0;

  transition: opacity 0.35s ease;
}

.vt-redemption__info-card:hover {
  transform: translateX(5px);
  border-color: rgba(212, 175, 55, 0.32);
}

.vt-redemption__info-card:hover::before {
  opacity: 1;
}

.vt-redemption__info-icon {
  position: relative;
  z-index: 2;

  width: 46px;
  height: 46px;
  flex: 0 0 46px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 50%;

  color: var(--vt-gold-light);

  background: rgba(212, 175, 55, 0.05);
}

.vt-redemption__info-icon svg {
  width: 21px;
  height: 21px;
}

.vt-redemption__info-card > div:last-child {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vt-redemption__info-card span {
  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-redemption__info-card strong {
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;

  color: var(--vt-white);
}


/* =========================================================
   REMINDER
========================================================= */

.vt-redemption__reminder {
  position: relative;

  margin-top: 28px;
  padding: 20px 22px;

  border-left: 2px solid var(--vt-gold);

  background:
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.075),
      rgba(255, 255, 255, 0.012)
    );
}

.vt-redemption__reminder::before {
  content: "";

  position: absolute;
  top: 0;
  left: -2px;

  width: 2px;
  height: 38%;

  background: var(--vt-gold-light);

  box-shadow:
    0 0 14px rgba(243, 216, 122, 0.65);
}

.vt-redemption__reminder span {
  display: block;

  margin-bottom: 8px;

  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-redemption__reminder p {
  font-size: 13px;
  line-height: 1.75;

  color: var(--vt-grey);
}


/* =========================================================
   FORM WRAP
========================================================= */

.vt-redemption__form-wrap {
  position: relative;

  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(18, 18, 18, 0.98),
      rgba(7, 7, 7, 0.99)
    );

  box-shadow:
    0 45px 120px rgba(0, 0, 0, 0.58),
    0 0 60px rgba(212, 175, 55, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  overflow: hidden;
}

.vt-redemption__form-wrap::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(243, 216, 122, 0.12),
      transparent 25%
    );

  pointer-events: none;
}


/* =========================================================
   FORM HEADER
========================================================= */

.vt-redemption__form-header {
  position: relative;
  z-index: 3;

  padding: 28px 30px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vt-redemption__form-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.vt-redemption__form-header span {
  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-redemption__form-header h3 {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.2;
  font-weight: 600;

  color: var(--vt-white);
}

.vt-redemption__form-status {
  flex: 0 0 auto;

  min-height: 32px;
  padding: 0 12px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  border: 1px solid rgba(82, 210, 115, 0.18);
  border-radius: 999px;

  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: #70d88a;
  background: rgba(82, 210, 115, 0.055);
}

.vt-redemption__form-status i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #58d478;

  box-shadow:
    0 0 0 4px rgba(88, 212, 120, 0.08),
    0 0 10px rgba(88, 212, 120, 0.5);

  animation: vtRedemptionStatusPulse 1.8s ease-in-out infinite;
}


/* =========================================================
   FORM BASE
========================================================= */

.vt-redemption__form {
  position: relative;
  z-index: 3;

  padding: 30px;
}

.vt-redemption__form-section {
  padding: 0 0 30px;
  margin-bottom: 30px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vt-redemption__form-section:last-of-type {
  margin-bottom: 24px;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.vt-redemption__section-heading {
  display: flex;
  align-items: center;
  gap: 15px;

  margin-bottom: 24px;
}

.vt-redemption__section-number {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 50%;

  font-family: "Cinzel", Georgia, serif;
  font-size: 14px;
  font-weight: 600;

  color: var(--vt-gold-light);

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.12),
      rgba(212, 175, 55, 0.02)
    );
}

.vt-redemption__section-heading > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vt-redemption__section-heading small {
  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-redemption__section-heading h4 {
  font-family: "Cinzel", Georgia, serif;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;

  color: var(--vt-white);
}


/* =========================================================
   FIELD GRID
========================================================= */

.vt-redemption__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 18px;
}

.vt-redemption__field {
  min-width: 0;
}

.vt-redemption__field--full {
  grid-column: 1 / -1;
}

.vt-redemption__field label {
  display: block;

  margin-bottom: 9px;

  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.04em;

  color: #eeeeee;
}

.vt-redemption__field label span {
  color: var(--vt-gold-light);
}


/* =========================================================
   INPUTS
========================================================= */

.vt-redemption__field input,
.vt-redemption__field select,
.vt-redemption__field textarea {
  width: 100%;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;

  font-size: 13px;
  line-height: 1.5;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.015)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025);

  outline: none;

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}

.vt-redemption__field input,
.vt-redemption__field select {
  min-height: 54px;
  padding: 0 16px;
}

.vt-redemption__field textarea {
  min-height: 130px;
  padding: 15px 16px;

  resize: vertical;
}

.vt-redemption__field input::placeholder,
.vt-redemption__field textarea::placeholder {
  color: #666666;
  opacity: 1;
}

.vt-redemption__field input:hover,
.vt-redemption__field select:hover,
.vt-redemption__field textarea:hover {
  border-color: rgba(212, 175, 55, 0.26);
}

.vt-redemption__field input:focus,
.vt-redemption__field select:focus,
.vt-redemption__field textarea:focus {
  border-color: rgba(243, 216, 122, 0.58);

  background: rgba(212, 175, 55, 0.035);

  box-shadow:
    0 0 0 3px rgba(212, 175, 55, 0.07),
    0 0 24px rgba(212, 175, 55, 0.05);
}


/* =========================================================
   SELECT
========================================================= */

.vt-redemption__select-wrap {
  position: relative;
}

.vt-redemption__select-wrap select {
  appearance: none;
  -webkit-appearance: none;

  padding-right: 48px;
  cursor: pointer;
}

.vt-redemption__select-wrap > svg {
  position: absolute;
  top: 50%;
  right: 16px;

  width: 18px;
  height: 18px;

  color: var(--vt-gold-light);

  transform: translateY(-50%);

  pointer-events: none;
}

.vt-redemption__field select option {
  color: #ffffff;
  background: #101010;
}


/* =========================================================
   AUTOFILL FIX
========================================================= */

.vt-redemption__field input:-webkit-autofill,
.vt-redemption__field input:-webkit-autofill:hover,
.vt-redemption__field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;

  -webkit-box-shadow:
    0 0 0 1000px #101010 inset;

  transition:
    background-color 9999s ease-out 0s;
}


/* =========================================================
   DECLARATION
========================================================= */

.vt-redemption__declaration {
  margin-bottom: 22px;
  padding: 18px 19px;

  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 5px;

  background:
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.05),
      rgba(255, 255, 255, 0.015)
    );
}

.vt-redemption__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  cursor: pointer;
}

.vt-redemption__checkbox input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}

.vt-redemption__checkbox-box {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;

  margin-top: 1px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 3px;

  color: #1a1202;
  background: rgba(212, 175, 55, 0.04);

  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.vt-redemption__checkbox-box svg {
  width: 14px;
  height: 14px;

  opacity: 0;
  transform: scale(0.6);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.vt-redemption__checkbox input:checked + .vt-redemption__checkbox-box {
  border-color: var(--vt-gold-light);

  background:
    linear-gradient(
      135deg,
      #a7781d,
      #f3d87a,
      #bd8c24
    );

  box-shadow:
    0 0 18px rgba(212, 175, 55, 0.14);
}

.vt-redemption__checkbox input:checked + .vt-redemption__checkbox-box svg {
  opacity: 1;
  transform: scale(1);
}

.vt-redemption__checkbox input:focus-visible + .vt-redemption__checkbox-box {
  box-shadow:
    0 0 0 3px rgba(212, 175, 55, 0.12);
}

.vt-redemption__checkbox-text {
  font-size: 12px;
  line-height: 1.7;

  color: var(--vt-grey);
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.vt-redemption__submit {
  position: relative;

  width: 100%;
  min-height: 58px;
  padding: 0 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  border: 1px solid rgba(243, 216, 122, 0.78);
  border-radius: 3px;

  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;

  color: #1d1402;

  background:
    linear-gradient(
      115deg,
      #8c6416,
      #d4af37 28%,
      #f3d87a 54%,
      #a97a20
    );

  box-shadow:
    0 14px 38px rgba(212, 175, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);

  cursor: pointer;
  overflow: hidden;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

.vt-redemption__submit::before {
  content: "";

  position: absolute;
  top: 0;
  left: -120%;

  width: 65%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.82),
      transparent
    );

  transform: skewX(-22deg);

  transition: left 0.75s ease;
}

.vt-redemption__submit span,
.vt-redemption__submit svg {
  position: relative;
  z-index: 2;
}

.vt-redemption__submit svg {
  width: 19px;
  height: 19px;

  transition: transform 0.35s ease;
}

.vt-redemption__submit:hover {
  transform: translateY(-4px);

  filter: brightness(1.05);

  box-shadow:
    0 21px 48px rgba(212, 175, 55, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.vt-redemption__submit:hover::before {
  left: 145%;
}

.vt-redemption__submit:hover svg {
  transform: translateX(5px);
}

.vt-redemption__submit:active {
  transform: translateY(-1px);
}


/* =========================================================
   FORM NOTE
========================================================= */

.vt-redemption__form-note {
  margin-top: 15px;

  font-size: 10px;
  line-height: 1.65;
  text-align: center;

  color: var(--vt-grey-dark);
}


/* =========================================================
   PRIVACY
========================================================= */

.vt-redemption__privacy {
  position: relative;
  z-index: 3;

  margin: 0 30px 30px;
  padding: 18px 20px;

  display: flex;
  align-items: flex-start;
  gap: 13px;

  border-top: 1px solid rgba(255, 255, 255, 0.06);

  background: rgba(255, 255, 255, 0.012);
}

.vt-redemption__privacy-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 50%;

  color: var(--vt-gold-light);

  background: rgba(212, 175, 55, 0.045);
}

.vt-redemption__privacy-icon svg {
  width: 18px;
  height: 18px;
}

.vt-redemption__privacy p {
  font-size: 11px;
  line-height: 1.7;

  color: var(--vt-grey-dark);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes vtRedemptionGlowOne {
  from {
    transform: translate3d(0, 0, 0) scale(0.95);
    opacity: 0.6;
  }

  to {
    transform: translate3d(40px, 28px, 0) scale(1.1);
    opacity: 1;
  }
}

@keyframes vtRedemptionGlowTwo {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(-35px, -20px, 0) scale(1.14);
  }
}

@keyframes vtRedemptionStatusPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .vt-redemption__container {
    width: min(100% - 48px, 1000px);

    grid-template-columns: 1fr;
    gap: 58px;
  }

  .vt-redemption__content {
    position: relative;
    top: auto;

    max-width: 760px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .vt-redemption {
    padding: 90px 0;
  }

  .vt-redemption__container {
    width: min(100% - 32px, 680px);
  }

  .vt-redemption__form-header {
    padding: 24px 22px;

    align-items: flex-start;
    flex-direction: column;
  }

  .vt-redemption__form {
    padding: 24px 22px;
  }

  .vt-redemption__privacy {
    margin: 0 22px 22px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

  .vt-redemption {
    padding: 78px 0;
  }

  .vt-redemption__container {
    width: calc(100% - 28px);
  }

  .vt-redemption__eyebrow {
    font-size: 9px;
    letter-spacing: 0.17em;
  }

  .vt-redemption__eyebrow span {
    width: 28px;
  }

  .vt-redemption__content h2 {
    font-size: clamp(35px, 10vw, 48px);
  }

  .vt-redemption__description {
    font-size: 14px;
    line-height: 1.75;
  }

  .vt-redemption__info-card {
    align-items: flex-start;
    padding: 16px;
  }

  .vt-redemption__info-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .vt-redemption__info-icon svg {
    width: 18px;
    height: 18px;
  }

  .vt-redemption__form-header {
    padding: 21px 18px;
  }

  .vt-redemption__form-header h3 {
    font-size: 25px;
  }

  .vt-redemption__form {
    padding: 21px 18px;
  }

  .vt-redemption__fields {
    grid-template-columns: 1fr;
  }

  .vt-redemption__field--full {
    grid-column: auto;
  }

  .vt-redemption__section-heading {
    align-items: flex-start;
  }

  .vt-redemption__section-heading h4 {
    font-size: 20px;
  }

  .vt-redemption__field input,
  .vt-redemption__field select {
    min-height: 52px;
  }

  .vt-redemption__privacy {
    margin: 0 18px 18px;
    padding: 16px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .vt-redemption__form-status {
    width: 100%;
    justify-content: center;
  }

  .vt-redemption__section-number {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .vt-redemption__submit {
    padding-inline: 14px;
    font-size: 9px;
  }

}


/* =========================================================
   ELEMENTOR FULL WIDTH FIX
========================================================= */

.elementor-widget-html .vt-redemption {
  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .vt-redemption *,
  .vt-redemption *::before,
  .vt-redemption *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c6a31cb *//* =========================================================
   VERSUS TRADE — SECTION 05
   TERMS & CONDITIONS + FAQ
   PART 1: BASE, HEADING, SUMMARY, TERMS PANEL & CARDS
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");


/* =========================================================
   SECTION BASE
========================================================= */

.vt-terms {
  --vt-black: #030303;
  --vt-black-soft: #080808;
  --vt-card: #0d0d0d;

  --vt-gold: #d4af37;
  --vt-gold-light: #f3d87a;
  --vt-gold-dark: #8f6715;

  --vt-white: #ffffff;
  --vt-grey: #a4a4a4;
  --vt-grey-dark: #666666;

  --vt-border: rgba(212, 175, 55, 0.22);
  --vt-border-soft: rgba(255, 255, 255, 0.07);

  position: relative;
  width: 100%;
  padding: 130px 0;

  color: var(--vt-white);
  background: var(--vt-black);

  font-family: "Inter", Arial, sans-serif;

  overflow: hidden;
  isolation: isolate;
}


/* =========================================================
   RESET
========================================================= */

.vt-terms,
.vt-terms * {
  box-sizing: border-box;
}

.vt-terms h2,
.vt-terms h3,
.vt-terms h4,
.vt-terms p {
  margin: 0;
}

.vt-terms a {
  text-decoration: none;
}

.vt-terms svg {
  display: block;
}


/* =========================================================
   BACKGROUND
========================================================= */

.vt-terms__background {
  position: absolute;
  inset: 0;
  z-index: -10;

  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(212, 175, 55, 0.09),
      transparent 24%
    ),
    radial-gradient(
      circle at 88% 45%,
      rgba(212, 175, 55, 0.07),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #030303 0%,
      #090909 48%,
      #030303 100%
    );
}

.vt-terms__grid {
  position: absolute;
  inset: 0;
  z-index: -9;

  opacity: 0.1;

  background-image:
    linear-gradient(
      rgba(212, 175, 55, 0.11) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.11) 1px,
      transparent 1px
    );

  background-size: 78px 78px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.85),
      transparent 96%
    );

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.85),
      transparent 96%
    );
}


/* =========================================================
   GLOW
========================================================= */

.vt-terms__glow {
  position: absolute;
  z-index: -8;

  border-radius: 50%;
  filter: blur(100px);

  pointer-events: none;
}

.vt-terms__glow--one {
  width: 440px;
  height: 440px;

  top: 7%;
  left: -140px;

  background: rgba(212, 175, 55, 0.09);

  animation: vtTermsGlowOne 8s ease-in-out infinite alternate;
}

.vt-terms__glow--two {
  width: 410px;
  height: 410px;

  right: -140px;
  bottom: 12%;

  background: rgba(139, 96, 16, 0.08);

  animation: vtTermsGlowTwo 10s ease-in-out infinite alternate;
}


/* =========================================================
   CONTAINER
========================================================= */

.vt-terms__container {
  position: relative;
  z-index: 5;

  width: min(1360px, calc(100% - 80px));
  margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.vt-terms__heading {
  margin-bottom: 58px;
}

.vt-terms__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 22px;

  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;

  color: var(--vt-gold-light);
}

.vt-terms__eyebrow span {
  display: block;

  width: 46px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--vt-gold-light)
    );

  box-shadow:
    0 0 10px rgba(212, 175, 55, 0.55);
}

.vt-terms__heading-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(320px, 0.8fr);

  gap: clamp(40px, 7vw, 100px);
  align-items: end;
}

.vt-terms__heading h2 {
  max-width: 850px;

  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.035em;

  color: var(--vt-white);
}

.vt-terms__heading h2 span {
  display: block;

  background:
    linear-gradient(
      120deg,
      #9b7019 0%,
      #f3d87a 38%,
      #d4af37 62%,
      #8b6112 100%
    );

  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;
}

.vt-terms__heading-layout > p {
  max-width: 470px;
  padding-bottom: 7px;

  font-size: 16px;
  line-height: 1.85;

  color: var(--vt-grey);
}


/* =========================================================
   SUMMARY
========================================================= */

.vt-terms__summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  margin-bottom: 72px;

  border-top: 1px solid var(--vt-border);
  border-bottom: 1px solid var(--vt-border);

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018),
      rgba(212, 175, 55, 0.035),
      rgba(255, 255, 255, 0.018)
    );
}

.vt-terms__summary-item {
  min-height: 112px;
  padding: 27px 30px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;

  border-right: 1px solid rgba(255, 255, 255, 0.055);

  transition:
    background-color 0.35s ease,
    transform 0.35s ease;
}

.vt-terms__summary-item:last-child {
  border-right: 0;
}

.vt-terms__summary-item:hover {
  background: rgba(212, 175, 55, 0.045);
}

.vt-terms__summary-item span {
  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-terms__summary-item strong {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;

  color: var(--vt-white);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.vt-terms__layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(420px, 0.88fr);

  gap: clamp(38px, 5vw, 72px);
  align-items: start;
}


/* =========================================================
   TERMS PANEL
========================================================= */

.vt-terms__panel {
  position: relative;

  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      rgba(18, 18, 18, 0.98),
      rgba(7, 7, 7, 0.99)
    );

  box-shadow:
    0 40px 110px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  overflow: hidden;
}

.vt-terms__panel::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(243, 216, 122, 0.11),
      transparent 24%
    );

  pointer-events: none;
}


/* =========================================================
   PANEL HEADER
========================================================= */

.vt-terms__panel-header {
  position: relative;
  z-index: 3;

  padding: 28px 30px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vt-terms__panel-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.vt-terms__panel-header span {
  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-terms__panel-header h3 {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(27px, 2.8vw, 38px);
  line-height: 1.2;
  font-weight: 600;

  color: var(--vt-white);
}

.vt-terms__document-badge {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212, 175, 55, 0.36);
  border-radius: 50%;

  font-family: "Cinzel", Georgia, serif;
  font-size: 15px;
  font-weight: 600;

  color: var(--vt-gold-light);

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.15),
      rgba(212, 175, 55, 0.02)
    );
}


/* =========================================================
   TERMS LIST
========================================================= */

.vt-terms__list {
  position: relative;
  z-index: 3;

  display: grid;
  gap: 14px;

  padding: 28px 30px;
}


/* =========================================================
   TERM CARD
========================================================= */

.vt-term-card {
  position: relative;

  padding: 21px 22px;

  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;

  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: 6px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.024),
      rgba(212, 175, 55, 0.018)
    );

  overflow: hidden;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.vt-term-card::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      120deg,
      rgba(212, 175, 55, 0.07),
      transparent 50%
    );

  opacity: 0;

  transition: opacity 0.35s ease;
}

.vt-term-card:hover {
  transform: translateX(5px);

  border-color: rgba(212, 175, 55, 0.3);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.28);
}

.vt-term-card:hover::before {
  opacity: 1;
}


/* =========================================================
   TERM NUMBER
========================================================= */

.vt-term-card__number {
  position: relative;
  z-index: 2;

  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 50%;

  font-family: "Cinzel", Georgia, serif;
  font-size: 15px;
  font-weight: 600;

  color: var(--vt-gold-light);

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.12),
      rgba(212, 175, 55, 0.02)
    );
}


/* =========================================================
   TERM CONTENT
========================================================= */

.vt-term-card__content {
  position: relative;
  z-index: 2;
}

.vt-term-card__content > span {
  display: block;

  margin-bottom: 7px;

  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-term-card__content h4 {
  font-family: "Cinzel", Georgia, serif;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;

  color: var(--vt-white);
}

.vt-term-card__content p {
  margin-top: 10px;

  font-size: 13px;
  line-height: 1.75;

  color: var(--vt-grey);
}


/* =========================================================
   LEGAL NOTE
========================================================= */

.vt-terms__legal-note {
  position: relative;
  z-index: 3;

  margin: 0 30px 30px;
  padding: 20px 21px;

  display: flex;
  align-items: flex-start;
  gap: 13px;

  border-left: 2px solid var(--vt-gold);

  background:
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.07),
      rgba(255, 255, 255, 0.012)
    );
}

.vt-terms__legal-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 50%;

  color: var(--vt-gold-light);

  background: rgba(212, 175, 55, 0.045);
}

.vt-terms__legal-icon svg {
  width: 19px;
  height: 19px;
}

.vt-terms__legal-note p {
  font-size: 12px;
  line-height: 1.75;

  color: var(--vt-grey);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes vtTermsGlowOne {
  from {
    transform: translate3d(0, 0, 0) scale(0.95);
    opacity: 0.6;
  }

  to {
    transform: translate3d(40px, 28px, 0) scale(1.1);
    opacity: 1;
  }
}

@keyframes vtTermsGlowTwo {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(-35px, -20px, 0) scale(1.14);
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .vt-terms__container {
    width: min(100% - 48px, 1000px);
  }

  .vt-terms__heading-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .vt-terms__heading-layout > p {
    max-width: 720px;
  }

  .vt-terms__layout {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .vt-terms {
    padding: 90px 0;
  }

  .vt-terms__container {
    width: min(100% - 32px, 680px);
  }

  .vt-terms__summary {
    grid-template-columns: 1fr;
  }

  .vt-terms__summary-item {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  }

  .vt-terms__summary-item:last-child {
    border-bottom: 0;
  }

  .vt-terms__panel-header {
    padding: 24px 22px;
  }

  .vt-terms__list {
    padding: 24px 22px;
  }

  .vt-terms__legal-note {
    margin: 0 22px 22px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

  .vt-terms {
    padding: 78px 0;
  }

  .vt-terms__container {
    width: calc(100% - 28px);
  }

  .vt-terms__eyebrow {
    font-size: 9px;
    letter-spacing: 0.17em;
  }

  .vt-terms__eyebrow span {
    width: 28px;
  }

  .vt-terms__heading h2 {
    font-size: clamp(35px, 10vw, 48px);
  }

  .vt-terms__heading-layout > p {
    font-size: 14px;
    line-height: 1.75;
  }

  .vt-terms__panel-header {
    align-items: flex-start;
  }

  .vt-terms__document-badge {
    width: 48px;
    height: 48px;
    flex-basis: 48px;

    font-size: 12px;
  }

  .vt-terms__list {
    padding: 20px 17px;
  }

  .vt-term-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 13px;

    padding: 18px 16px;
  }

  .vt-term-card__number {
    width: 44px;
    height: 44px;

    font-size: 12px;
  }

  .vt-term-card__content h4 {
    font-size: 19px;
  }

  .vt-term-card__content p {
    font-size: 12px;
  }

  .vt-terms__legal-note {
    margin: 0 17px 17px;
    padding: 18px 16px;
  }

}


/* =========================================================
   ELEMENTOR FULL WIDTH FIX
========================================================= */

.elementor-widget-html .vt-terms {
  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .vt-terms *,
  .vt-terms *::before,
  .vt-terms *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

}
/* =========================================================
   VERSUS TRADE — SECTION 05
   TERMS & CONDITIONS + FAQ
   PART 2: FAQ PANEL, ACCORDION, CTA & FINAL RESPONSIVE
========================================================= */


/* =========================================================
   FAQ PANEL
========================================================= */

.vt-faq {
  position: sticky;
  top: 110px;

  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      rgba(18, 18, 18, 0.98),
      rgba(7, 7, 7, 0.99)
    );

  box-shadow:
    0 40px 110px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  overflow: hidden;
}

.vt-faq::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(243, 216, 122, 0.12),
      transparent 25%
    ),
    radial-gradient(
      circle at 10% 85%,
      rgba(212, 175, 55, 0.06),
      transparent 28%
    );

  pointer-events: none;
}


/* =========================================================
   FAQ HEADER
========================================================= */

.vt-faq__header {
  position: relative;
  z-index: 3;

  padding: 31px 30px 28px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vt-faq__header > span {
  display: block;

  margin-bottom: 10px;

  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-faq__header h3 {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(29px, 3vw, 42px);
  line-height: 1.18;
  font-weight: 600;

  color: var(--vt-white);
}

.vt-faq__header h3 em {
  display: block;

  font-style: normal;

  background:
    linear-gradient(
      120deg,
      #9b7019 0%,
      #f3d87a 38%,
      #d4af37 62%,
      #8b6112 100%
    );

  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;
}

.vt-faq__header p {
  margin-top: 14px;

  font-size: 13px;
  line-height: 1.75;

  color: var(--vt-grey);
}


/* =========================================================
   FAQ LIST
========================================================= */

.vt-faq__list {
  position: relative;
  z-index: 3;

  display: grid;
  gap: 12px;

  padding: 26px 28px;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.vt-faq__item {
  position: relative;

  border: 1px solid rgba(212, 175, 55, 0.13);
  border-radius: 6px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025),
      rgba(212, 175, 55, 0.018)
    );

  overflow: hidden;

  transition:
    border-color 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

.vt-faq__item:hover {
  transform: translateY(-2px);

  border-color: rgba(212, 175, 55, 0.28);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.24);
}

.vt-faq__item[open] {
  border-color: rgba(212, 175, 55, 0.34);

  background:
    linear-gradient(
      135deg,
      rgba(212, 175, 55, 0.065),
      rgba(255, 255, 255, 0.018)
    );

  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}


/* Remove default marker */
.vt-faq__item summary {
  list-style: none;
}

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


/* =========================================================
   FAQ SUMMARY
========================================================= */

.vt-faq__item summary {
  position: relative;

  min-height: 72px;
  padding: 18px 18px 18px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  cursor: pointer;
  user-select: none;
}

.vt-faq__item summary > span {
  font-family: "Cinzel", Georgia, serif;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;

  color: var(--vt-white);
}

.vt-faq__item summary i {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 50%;

  color: var(--vt-gold-light);

  background: rgba(212, 175, 55, 0.045);

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
}

.vt-faq__item summary i svg {
  width: 17px;
  height: 17px;
}

.vt-faq__item[open] summary i {
  transform: rotate(180deg);

  border-color: rgba(243, 216, 122, 0.48);

  background: rgba(212, 175, 55, 0.09);
}

.vt-faq__item summary:focus-visible {
  outline: 2px solid rgba(243, 216, 122, 0.55);
  outline-offset: -2px;
}


/* =========================================================
   FAQ ANSWER
========================================================= */

.vt-faq__answer {
  padding: 0 20px 20px;

  animation: vtFaqAnswerReveal 0.35s ease both;
}

.vt-faq__answer::before {
  content: "";

  display: block;

  width: 100%;
  height: 1px;

  margin-bottom: 17px;

  background:
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.28),
      rgba(255, 255, 255, 0.035),
      transparent
    );
}

.vt-faq__answer p {
  font-size: 13px;
  line-height: 1.75;

  color: var(--vt-grey);
}


/* =========================================================
   FAQ CTA
========================================================= */

.vt-faq__cta {
  position: relative;
  z-index: 3;

  margin: 0 28px 28px;
  padding: 22px 21px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 6px;

  background:
    linear-gradient(
      120deg,
      rgba(212, 175, 55, 0.085),
      rgba(255, 255, 255, 0.016)
    );

  overflow: hidden;
}

.vt-faq__cta::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 12% 50%,
      rgba(243, 216, 122, 0.1),
      transparent 28%
    );

  pointer-events: none;
}

.vt-faq__cta > div {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: 7px;
}

.vt-faq__cta > div span {
  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-faq__cta > div strong {
  max-width: 250px;

  font-size: 13px;
  line-height: 1.55;
  font-weight: 600;

  color: var(--vt-white);
}


/* CTA Button */
.vt-faq__cta > a {
  position: relative;
  z-index: 2;

  min-width: 150px;
  min-height: 48px;
  padding: 0 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border: 1px solid rgba(243, 216, 122, 0.75);
  border-radius: 3px;

  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;

  color: #1d1402;

  background:
    linear-gradient(
      115deg,
      #8c6416,
      #d4af37 28%,
      #f3d87a 54%,
      #a97a20
    );

  box-shadow:
    0 12px 32px rgba(212, 175, 55, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);

  overflow: hidden;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.vt-faq__cta > a::before {
  content: "";

  position: absolute;
  top: 0;
  left: -120%;

  width: 65%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.8),
      transparent
    );

  transform: skewX(-22deg);

  transition: left 0.7s ease;
}

.vt-faq__cta > a svg {
  position: relative;
  z-index: 2;

  width: 17px;
  height: 17px;

  transition: transform 0.35s ease;
}

.vt-faq__cta > a:hover {
  transform: translateY(-4px);

  box-shadow:
    0 19px 42px rgba(212, 175, 55, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.vt-faq__cta > a:hover::before {
  left: 145%;
}

.vt-faq__cta > a:hover svg {
  transform: translateX(4px);
}


/* =========================================================
   FAQ ANIMATION
========================================================= */

@keyframes vtFaqAnswerReveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .vt-faq {
    position: relative;
    top: auto;
  }

  .vt-faq__header {
    padding: 28px 26px;
  }

  .vt-faq__list {
    padding: 24px 26px;
  }

  .vt-faq__cta {
    margin: 0 26px 26px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .vt-faq__header {
    padding: 24px 22px;
  }

  .vt-faq__list {
    padding: 22px;
  }

  .vt-faq__cta {
    margin: 0 22px 22px;

    align-items: flex-start;
    flex-direction: column;
  }

  .vt-faq__cta > div strong {
    max-width: 100%;
  }

  .vt-faq__cta > a {
    width: 100%;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

  .vt-faq__header {
    padding: 21px 18px;
  }

  .vt-faq__header h3 {
    font-size: 28px;
  }

  .vt-faq__list {
    gap: 10px;
    padding: 18px;
  }

  .vt-faq__item summary {
    min-height: 66px;
    padding: 16px 14px 16px 16px;
    gap: 12px;
  }

  .vt-faq__item summary > span {
    font-size: 14px;
  }

  .vt-faq__item summary i {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }

  .vt-faq__item summary i svg {
    width: 15px;
    height: 15px;
  }

  .vt-faq__answer {
    padding: 0 16px 17px;
  }

  .vt-faq__answer p {
    font-size: 12px;
  }

  .vt-faq__cta {
    margin: 0 18px 18px;
    padding: 19px 17px;
  }

  .vt-faq__cta > a {
    min-height: 49px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .vt-faq__header h3 {
    font-size: 25px;
  }

  .vt-faq__item summary > span {
    font-size: 13px;
  }

}


/* =========================================================
   OPTIONAL ACCORDION BEHAVIOUR POLISH
========================================================= */

.vt-faq__item[open] summary {
  color: var(--vt-gold-light);
}

.vt-faq__item[open] summary > span {
  color: var(--vt-gold-light);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .vt-faq__answer {
    animation: none !important;
  }

  .vt-faq__item summary i,
  .vt-faq__cta > a,
  .vt-faq__cta > a svg {
    transition: none !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-558b55d *//* =========================================================
   VERSUS TRADE — SECTION 06
   FINAL CTA + COUNTDOWN
   PART 1: BASE, CONTENT, BUTTONS & COUNTDOWN PANEL
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");


/* =========================================================
   SECTION BASE
========================================================= */

.vt-final-cta {
  --vt-black: #030303;
  --vt-black-soft: #080808;

  --vt-gold: #d4af37;
  --vt-gold-light: #f3d87a;
  --vt-gold-dark: #8f6715;

  --vt-white: #ffffff;
  --vt-grey: #a5a5a5;
  --vt-grey-dark: #666666;

  --vt-border: rgba(212, 175, 55, 0.22);
  --vt-border-soft: rgba(255, 255, 255, 0.07);

  position: relative;
  width: 100%;
  min-height: 940px;
  padding: 130px 0 150px;

  color: var(--vt-white);
  background: var(--vt-black);

  font-family: "Inter", Arial, sans-serif;

  overflow: hidden;
  isolation: isolate;
}


/* =========================================================
   RESET
========================================================= */

.vt-final-cta,
.vt-final-cta * {
  box-sizing: border-box;
}

.vt-final-cta h2,
.vt-final-cta h3,
.vt-final-cta p {
  margin: 0;
}

.vt-final-cta a {
  text-decoration: none;
}

.vt-final-cta svg {
  display: block;
}


/* =========================================================
   BACKGROUND
========================================================= */

.vt-final-cta__background {
  position: absolute;
  inset: 0;
  z-index: -10;

  background:
    radial-gradient(
      circle at 50% 12%,
      rgba(212, 175, 55, 0.13),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 78%,
      rgba(212, 175, 55, 0.08),
      transparent 25%
    ),
    radial-gradient(
      circle at 90% 70%,
      rgba(139, 96, 16, 0.08),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #030303 0%,
      #090909 50%,
      #020202 100%
    );
}

.vt-final-cta__overlay {
  position: absolute;
  inset: 0;
  z-index: -9;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.05),
      rgba(0, 0, 0, 0.32) 75%,
      rgba(0, 0, 0, 0.82)
    );
}

.vt-final-cta__grid {
  position: absolute;
  inset: 0;
  z-index: -8;

  opacity: 0.13;

  background-image:
    linear-gradient(
      rgba(212, 175, 55, 0.11) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.11) 1px,
      transparent 1px
    );

  background-size: 80px 80px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.9),
      transparent 96%
    );

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.9),
      transparent 96%
    );
}


/* =========================================================
   GLOW
========================================================= */

.vt-final-cta__glow {
  position: absolute;
  z-index: -7;

  border-radius: 50%;
  filter: blur(100px);

  pointer-events: none;
}

.vt-final-cta__glow--one {
  width: 520px;
  height: 520px;

  top: 4%;
  left: 50%;

  background: rgba(212, 175, 55, 0.11);

  transform: translateX(-50%);

  animation: vtFinalGlowOne 8s ease-in-out infinite alternate;
}

.vt-final-cta__glow--two {
  width: 380px;
  height: 380px;

  right: -110px;
  bottom: 8%;

  background: rgba(139, 96, 16, 0.09);

  animation: vtFinalGlowTwo 10s ease-in-out infinite alternate;
}


/* =========================================================
   PARTICLES
========================================================= */

.vt-final-cta__particles {
  position: absolute;
  inset: 0;
  z-index: -5;

  pointer-events: none;
  overflow: hidden;
}

.vt-final-cta__particles span {
  position: absolute;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: var(--vt-gold-light);

  box-shadow:
    0 0 8px rgba(243, 216, 122, 0.8),
    0 0 18px rgba(212, 175, 55, 0.42);

  opacity: 0.45;

  animation: vtFinalParticleFloat 8s linear infinite;
}

.vt-final-cta__particles span:nth-child(1) {
  left: 8%;
  top: 72%;
  animation-delay: 0s;
}

.vt-final-cta__particles span:nth-child(2) {
  left: 22%;
  top: 26%;
  animation-delay: 1.3s;
}

.vt-final-cta__particles span:nth-child(3) {
  left: 44%;
  top: 80%;
  animation-delay: 2.4s;
}

.vt-final-cta__particles span:nth-child(4) {
  right: 18%;
  top: 22%;
  animation-delay: 3.2s;
}

.vt-final-cta__particles span:nth-child(5) {
  right: 7%;
  bottom: 26%;
  animation-delay: 4.8s;
}

.vt-final-cta__particles span:nth-child(6) {
  left: 58%;
  top: 12%;
  animation-delay: 6.1s;
}


/* =========================================================
   CONTAINER
========================================================= */

.vt-final-cta__container {
  position: relative;
  z-index: 5;

  width: min(1360px, calc(100% - 80px));
  margin: 0 auto;

  display: grid;
  grid-template-columns:
    minmax(0, 1.02fr)
    minmax(500px, 0.98fr);

  gap: clamp(55px, 7vw, 110px);
  align-items: center;
}


/* =========================================================
   TOP STATUS
========================================================= */

.vt-final-cta__status {
  grid-column: 1 / -1;

  margin-bottom: 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding-bottom: 18px;

  border-bottom: 1px solid rgba(212, 175, 55, 0.16);
}

.vt-final-cta__status-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: #76d88d;
}

.vt-final-cta__status-live i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #58d478;

  box-shadow:
    0 0 0 5px rgba(88, 212, 120, 0.08),
    0 0 14px rgba(88, 212, 120, 0.55);

  animation: vtFinalStatusPulse 1.8s ease-in-out infinite;
}

.vt-final-cta__status-period {
  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;

  color: var(--vt-grey);
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.vt-final-cta__content {
  position: relative;
  max-width: 700px;
}

.vt-final-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 24px;

  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;

  color: var(--vt-gold-light);
}

.vt-final-cta__eyebrow > span {
  width: 38px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--vt-gold-light)
    );

  box-shadow:
    0 0 10px rgba(212, 175, 55, 0.55);
}

.vt-final-cta__eyebrow > span:last-child {
  background:
    linear-gradient(
      90deg,
      var(--vt-gold-light),
      transparent
    );
}

.vt-final-cta__content h2 {
  max-width: 760px;

  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(48px, 5.4vw, 82px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.04em;

  color: var(--vt-white);
}

.vt-final-cta__content h2 span {
  display: block;

  background:
    linear-gradient(
      120deg,
      #9b7019 0%,
      #f3d87a 38%,
      #d4af37 62%,
      #8b6112 100%
    );

  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;
}

.vt-final-cta__content > p {
  max-width: 650px;
  margin-top: 26px;

  font-size: 16px;
  line-height: 1.85;

  color: var(--vt-grey);
}


/* =========================================================
   ACTIONS
========================================================= */

.vt-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;

  margin-top: 34px;
}

.vt-final-cta__button {
  position: relative;

  min-height: 58px;
  padding: 0 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  border: 1px solid transparent;
  border-radius: 3px;

  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  overflow: hidden;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease;
}

.vt-final-cta__button span,
.vt-final-cta__button svg {
  position: relative;
  z-index: 2;
}

.vt-final-cta__button svg {
  width: 19px;
  height: 19px;

  transition: transform 0.35s ease;
}


/* Gold button */
.vt-final-cta__button--gold {
  color: #1d1402;

  border-color: rgba(243, 216, 122, 0.78);

  background:
    linear-gradient(
      115deg,
      #8c6416,
      #d4af37 28%,
      #f3d87a 54%,
      #a97a20
    );

  box-shadow:
    0 15px 40px rgba(212, 175, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.vt-final-cta__button--gold::before {
  content: "";

  position: absolute;
  top: 0;
  left: -120%;

  width: 65%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.8),
      transparent
    );

  transform: skewX(-22deg);

  transition: left 0.75s ease;
}

.vt-final-cta__button--gold:hover {
  transform: translateY(-4px);

  box-shadow:
    0 22px 50px rgba(212, 175, 55, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.vt-final-cta__button--gold:hover::before {
  left: 145%;
}

.vt-final-cta__button--gold:hover svg {
  transform: translateX(5px);
}


/* Outline button */
.vt-final-cta__button--outline {
  color: var(--vt-white);

  border-color: rgba(212, 175, 55, 0.24);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.012)
    );

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vt-final-cta__button--outline:hover {
  transform: translateY(-4px);

  color: var(--vt-gold-light);
  border-color: rgba(243, 216, 122, 0.52);

  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34);
}


/* =========================================================
   ACCOUNT NOTE
========================================================= */

.vt-final-cta__account-note {
  margin-top: 20px;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  color: var(--vt-grey-dark);
}

.vt-final-cta__account-note svg {
  width: 17px;
  height: 17px;

  color: var(--vt-gold);
}

.vt-final-cta__account-note span {
  font-size: 11px;
  line-height: 1.5;
}


/* =========================================================
   COUNTDOWN PANEL
========================================================= */

.vt-final-cta__countdown-panel {
  position: relative;

  padding: 30px;

  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(18, 18, 18, 0.97),
      rgba(6, 6, 6, 0.99)
    );

  box-shadow:
    0 45px 120px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(212, 175, 55, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  overflow: hidden;
}

.vt-final-cta__countdown-panel::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(243, 216, 122, 0.13),
      transparent 26%
    );

  pointer-events: none;
}

.vt-final-cta__countdown-heading {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding-bottom: 24px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vt-final-cta__countdown-heading > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.vt-final-cta__countdown-heading span {
  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-final-cta__countdown-heading h3 {
  font-family: "Cinzel", Georgia, serif;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;

  color: var(--vt-white);
}

.vt-final-cta__countdown-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 50%;

  color: var(--vt-gold-light);

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.13),
      rgba(212, 175, 55, 0.02)
    );
}

.vt-final-cta__countdown-icon svg {
  width: 25px;
  height: 25px;
}


/* =========================================================
   COUNTDOWN
========================================================= */

.vt-final-cta__countdown {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  gap: 10px;
  align-items: center;

  margin-top: 28px;
}

.vt-final-cta__time-box {
  min-width: 0;
  min-height: 112px;

  padding: 18px 10px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: 6px;

  background:
    linear-gradient(
      145deg,
      rgba(212, 175, 55, 0.055),
      rgba(255, 255, 255, 0.015)
    );
}

.vt-final-cta__time-box strong {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 1;
  font-weight: 600;

  color: var(--vt-gold-light);

  text-shadow:
    0 0 22px rgba(212, 175, 55, 0.14);
}

.vt-final-cta__time-box span {
  margin-top: 10px;

  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: var(--vt-grey-dark);
}

.vt-final-cta__countdown > i {
  font-family: "Cinzel", Georgia, serif;
  font-size: 26px;
  line-height: 1;
  font-style: normal;

  color: var(--vt-gold);

  animation: vtFinalColonPulse 1s ease-in-out infinite;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes vtFinalGlowOne {
  from {
    transform: translateX(-50%) scale(0.95);
    opacity: 0.6;
  }

  to {
    transform: translateX(-50%) scale(1.1);
    opacity: 1;
  }
}

@keyframes vtFinalGlowTwo {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(-30px, -20px, 0) scale(1.13);
  }
}

@keyframes vtFinalParticleFloat {
  0% {
    transform: translateY(30px) scale(0.8);
    opacity: 0;
  }

  20% {
    opacity: 0.6;
  }

  80% {
    opacity: 0.3;
  }

  100% {
    transform: translateY(-170px) scale(1.25);
    opacity: 0;
  }
}

@keyframes vtFinalStatusPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes vtFinalColonPulse {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .vt-final-cta__container {
    width: min(100% - 48px, 1000px);

    grid-template-columns: 1fr;
    gap: 60px;
  }

  .vt-final-cta__content {
    max-width: 820px;
  }

  .vt-final-cta__countdown-panel {
    max-width: 820px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .vt-final-cta {
    min-height: auto;
    padding: 90px 0 120px;
  }

  .vt-final-cta__container {
    width: min(100% - 32px, 680px);
  }

  .vt-final-cta__status {
    align-items: flex-start;
    flex-direction: column;
  }

  .vt-final-cta__countdown-panel {
    padding: 24px 22px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

  .vt-final-cta {
    padding: 78px 0 110px;
  }

  .vt-final-cta__container {
    width: calc(100% - 28px);
  }

  .vt-final-cta__eyebrow {
    font-size: 8px;
    letter-spacing: 0.15em;
  }

  .vt-final-cta__eyebrow > span {
    width: 22px;
  }

  .vt-final-cta__content h2 {
    font-size: clamp(38px, 11vw, 52px);
  }

  .vt-final-cta__content > p {
    font-size: 14px;
    line-height: 1.75;
  }

  .vt-final-cta__actions {
    flex-direction: column;
  }

  .vt-final-cta__button {
    width: 100%;
  }

  .vt-final-cta__countdown-heading {
    align-items: flex-start;
  }

  .vt-final-cta__countdown-heading h3 {
    font-size: 26px;
  }

  .vt-final-cta__countdown-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .vt-final-cta__countdown {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .vt-final-cta__countdown > i {
    display: none;
  }

  .vt-final-cta__time-box {
    min-height: 100px;
  }

}


/* =========================================================
   ELEMENTOR FULL WIDTH FIX
========================================================= */

.elementor-widget-html .vt-final-cta {
  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .vt-final-cta *,
  .vt-final-cta *::before,
  .vt-final-cta *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

}
/* =========================================================
   VERSUS TRADE — SECTION 06
   FINAL CTA + COUNTDOWN
   PART 2: PROGRESS, FOOTER STATS, TRUST STRIP & POLISH
========================================================= */


/* =========================================================
   CAMPAIGN PROGRESS
========================================================= */

.vt-final-cta__progress {
  position: relative;
  z-index: 2;

  margin-top: 28px;
  padding-top: 24px;

  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.vt-final-cta__progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 12px;
}

.vt-final-cta__progress-top span {
  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: var(--vt-grey-dark);
}

.vt-final-cta__progress-top strong {
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;

  color: var(--vt-gold-light);
}

.vt-final-cta__progress-track {
  position: relative;

  width: 100%;
  height: 8px;

  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.035);

  overflow: hidden;
}

.vt-final-cta__progress-track::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03),
      transparent 50%,
      rgba(255, 255, 255, 0.025)
    );
}

.vt-final-cta__progress-track > span {
  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 0;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #8e6516,
      #d4af37 35%,
      #f3d87a 65%,
      #a9781f
    );

  box-shadow:
    0 0 18px rgba(212, 175, 55, 0.38);

  transition: width 0.8s ease;
}

.vt-final-cta__progress-track > span::after {
  content: "";

  position: absolute;
  top: 0;
  right: 0;

  width: 42px;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.72),
      transparent
    );

  animation: vtFinalProgressShine 2.6s linear infinite;
}

.vt-final-cta__progress-dates {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  margin-top: 10px;
}

.vt-final-cta__progress-dates span {
  font-size: 8px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.08em;

  color: var(--vt-grey-dark);
}


/* =========================================================
   COUNTDOWN FOOTER STATS
========================================================= */

.vt-final-cta__countdown-footer {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  margin-top: 26px;

  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.015),
      rgba(212, 175, 55, 0.025),
      rgba(255, 255, 255, 0.015)
    );
}

.vt-final-cta__countdown-footer > div {
  min-height: 92px;
  padding: 20px 16px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;

  border-right: 1px solid rgba(255, 255, 255, 0.055);

  text-align: center;
}

.vt-final-cta__countdown-footer > div:last-child {
  border-right: 0;
}

.vt-final-cta__countdown-footer span {
  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: var(--vt-grey-dark);
}

.vt-final-cta__countdown-footer strong {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;

  color: var(--vt-white);
}


/* =========================================================
   TRUST STRIP
========================================================= */

.vt-final-cta__trust-strip {
  position: absolute;
  z-index: 20;

  left: 0;
  right: 0;
  bottom: 0;

  min-height: 120px;

  border-top: 1px solid rgba(212, 175, 55, 0.16);

  background:
    linear-gradient(
      90deg,
      rgba(6, 6, 6, 0.98),
      rgba(12, 12, 12, 0.98),
      rgba(6, 6, 6, 0.98)
    );

  box-shadow:
    0 -22px 60px rgba(0, 0, 0, 0.4);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.vt-final-cta__trust-container {
  width: min(1360px, calc(100% - 80px));
  min-height: 120px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.vt-final-cta__trust-item {
  position: relative;

  min-width: 0;
  padding: 28px 34px;

  display: flex;
  align-items: center;
  gap: 16px;

  border-right: 1px solid rgba(255, 255, 255, 0.055);

  transition:
    background-color 0.35s ease,
    transform 0.35s ease;
}

.vt-final-cta__trust-item:first-child {
  padding-left: 0;
}

.vt-final-cta__trust-item:last-child {
  padding-right: 0;
  border-right: 0;
}

.vt-final-cta__trust-item::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 0;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--vt-gold-light),
      transparent
    );

  transition: width 0.45s ease;
}

.vt-final-cta__trust-item:hover {
  background: rgba(212, 175, 55, 0.025);
}

.vt-final-cta__trust-item:hover::before {
  width: 100%;
}

.vt-final-cta__trust-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 50%;

  color: var(--vt-gold-light);

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.12),
      rgba(212, 175, 55, 0.02)
    );

  transition:
    transform 0.35s ease,
    border-color 0.35s ease;
}

.vt-final-cta__trust-item:hover .vt-final-cta__trust-icon {
  transform: rotate(-4deg) scale(1.04);

  border-color: rgba(243, 216, 122, 0.46);
}

.vt-final-cta__trust-icon svg {
  width: 22px;
  height: 22px;
}

.vt-final-cta__trust-item > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vt-final-cta__trust-item span {
  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-final-cta__trust-item strong {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;

  color: var(--vt-white);
}


/* =========================================================
   PANEL HOVER POLISH
========================================================= */

.vt-final-cta__countdown-panel {
  transition:
    transform 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}

.vt-final-cta__countdown-panel:hover {
  transform: translateY(-6px);

  border-color: rgba(243, 216, 122, 0.34);

  box-shadow:
    0 52px 135px rgba(0, 0, 0, 0.66),
    0 0 70px rgba(212, 175, 55, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.vt-final-cta__time-box {
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
}

.vt-final-cta__time-box:hover {
  transform: translateY(-4px);

  border-color: rgba(243, 216, 122, 0.4);

  background:
    linear-gradient(
      145deg,
      rgba(212, 175, 55, 0.09),
      rgba(255, 255, 255, 0.02)
    );
}


/* =========================================================
   CONTENT REVEAL
========================================================= */

.vt-final-cta__content {
  animation: vtFinalContentReveal 0.9s ease both;
}

.vt-final-cta__countdown-panel {
  animation: vtFinalPanelReveal 1s 0.15s ease both;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes vtFinalProgressShine {
  from {
    transform: translateX(-170%);
  }

  to {
    transform: translateX(260%);
  }
}

@keyframes vtFinalContentReveal {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vtFinalPanelReveal {
  from {
    opacity: 0;
    transform: translateX(35px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .vt-final-cta {
    padding-bottom: 145px;
  }

  .vt-final-cta__trust-container {
    width: min(100% - 48px, 1000px);
  }

  .vt-final-cta__trust-item {
    padding-inline: 24px;
  }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 850px) {

  .vt-final-cta {
    padding-bottom: 0;
  }

  .vt-final-cta__trust-strip {
    position: relative;

    margin-top: 70px;
  }

  .vt-final-cta__trust-container {
    width: min(100% - 36px, 720px);

    grid-template-columns: 1fr;
  }

  .vt-final-cta__trust-item,
  .vt-final-cta__trust-item:first-child,
  .vt-final-cta__trust-item:last-child {
    min-height: 96px;
    padding: 22px 4px;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  }

  .vt-final-cta__trust-item:last-child {
    border-bottom: 0;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .vt-final-cta__countdown-footer {
    grid-template-columns: 1fr;
  }

  .vt-final-cta__countdown-footer > div {
    min-height: 76px;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  }

  .vt-final-cta__countdown-footer > div:last-child {
    border-bottom: 0;
  }

  .vt-final-cta__progress-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

  .vt-final-cta__progress {
    margin-top: 23px;
    padding-top: 20px;
  }

  .vt-final-cta__progress-dates span {
    font-size: 7px;
  }

  .vt-final-cta__countdown-footer {
    margin-top: 22px;
  }

  .vt-final-cta__trust-strip {
    margin-top: 55px;
  }

  .vt-final-cta__trust-container {
    width: calc(100% - 28px);
  }

  .vt-final-cta__trust-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .vt-final-cta__trust-icon svg {
    width: 19px;
    height: 19px;
  }

  .vt-final-cta__trust-item strong {
    font-size: 12px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .vt-final-cta__progress-dates {
    gap: 10px;
  }

  .vt-final-cta__countdown-footer strong {
    font-size: 12px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .vt-final-cta__content,
  .vt-final-cta__countdown-panel {
    opacity: 1;
    transform: none;
  }

  .vt-final-cta__progress-track > span::after {
    animation: none !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8a1c150 *//* =========================================================
   VERSUS TRADE — SECTION 07
   PREMIUM FOOTER
   PART 1: BASE, BACKGROUND, BRAND & NAVIGATION
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");


/* =========================================================
   FOOTER BASE
========================================================= */

.vt-footer {
  --vt-black: #020202;
  --vt-black-soft: #080808;
  --vt-card: #0d0d0d;
  --vt-card-light: #131313;

  --vt-gold: #d4af37;
  --vt-gold-light: #f3d87a;
  --vt-gold-dark: #8f6715;

  --vt-white: #ffffff;
  --vt-grey: #a4a4a4;
  --vt-grey-dark: #666666;

  --vt-border: rgba(212, 175, 55, 0.22);
  --vt-border-soft: rgba(255, 255, 255, 0.07);

  position: relative;
  width: 100%;
  padding: 110px 0 0;

  color: var(--vt-white);
  background: var(--vt-black);

  font-family: "Inter", Arial, sans-serif;

  overflow: hidden;
  isolation: isolate;
}


/* =========================================================
   RESET
========================================================= */

.vt-footer,
.vt-footer * {
  box-sizing: border-box;
}

.vt-footer h2,
.vt-footer h3,
.vt-footer h4,
.vt-footer p {
  margin: 0;
}

.vt-footer a {
  color: inherit;
  text-decoration: none;
}

.vt-footer svg {
  display: block;
}


/* =========================================================
   BACKGROUND
========================================================= */

.vt-footer__background {
  position: absolute;
  inset: 0;
  z-index: -10;

  background:
    radial-gradient(
      circle at 12% 16%,
      rgba(212, 175, 55, 0.09),
      transparent 25%
    ),
    radial-gradient(
      circle at 88% 36%,
      rgba(212, 175, 55, 0.07),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #040404 0%,
      #080808 46%,
      #020202 100%
    );
}

.vt-footer__grid {
  position: absolute;
  inset: 0;
  z-index: -9;

  opacity: 0.1;

  background-image:
    linear-gradient(
      rgba(212, 175, 55, 0.1) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.1) 1px,
      transparent 1px
    );

  background-size: 78px 78px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.82),
      transparent 92%
    );

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.82),
      transparent 92%
    );
}


/* =========================================================
   GLOW
========================================================= */

.vt-footer__glow {
  position: absolute;
  z-index: -8;

  border-radius: 50%;
  filter: blur(100px);

  pointer-events: none;
}

.vt-footer__glow--one {
  width: 430px;
  height: 430px;

  top: 4%;
  left: -140px;

  background: rgba(212, 175, 55, 0.09);

  animation: vtFooterGlowOne 8s ease-in-out infinite alternate;
}

.vt-footer__glow--two {
  width: 390px;
  height: 390px;

  right: -130px;
  bottom: 12%;

  background: rgba(139, 96, 16, 0.08);

  animation: vtFooterGlowTwo 10s ease-in-out infinite alternate;
}


/* =========================================================
   CONTAINER
========================================================= */

.vt-footer__container {
  position: relative;
  z-index: 5;

  width: min(1400px, calc(100% - 80px));
  margin: 0 auto;
}


/* =========================================================
   TOP LAYOUT
========================================================= */

.vt-footer__top {
  display: grid;
  grid-template-columns:
    minmax(300px, 1.2fr)
    minmax(180px, 0.75fr)
    minmax(220px, 0.85fr)
    minmax(260px, 0.95fr);

  gap: clamp(36px, 4vw, 64px);

  padding-bottom: 68px;
}


/* =========================================================
   BRAND
========================================================= */

.vt-footer__brand {
  max-width: 430px;
}

.vt-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 15px;

  width: fit-content;

  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}

.vt-footer__logo:hover {
  transform: translateY(-3px);
}

.vt-footer__logo-mark {
  position: relative;

  width: 60px;
  height: 60px;
  flex: 0 0 60px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(243, 216, 122, 0.52);
  border-radius: 50%;

  font-family: "Cinzel", Georgia, serif;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.03em;

  color: var(--vt-gold-light);

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(243, 216, 122, 0.18),
      rgba(9, 9, 9, 0.98) 65%
    );

  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.45),
    0 0 0 7px rgba(212, 175, 55, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.vt-footer__logo-mark::before {
  content: "";

  position: absolute;
  inset: 7px;

  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 50%;
}

.vt-footer__logo-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vt-footer__logo-text strong {
  font-family: "Cinzel", Georgia, serif;
  font-size: 21px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.05em;

  color: var(--vt-white);
}

.vt-footer__logo-text small {
  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: var(--vt-gold);
}


/* =========================================================
   BRAND DESCRIPTION
========================================================= */

.vt-footer__brand > p {
  max-width: 410px;
  margin-top: 24px;

  font-size: 14px;
  line-height: 1.8;

  color: var(--vt-grey);
}


/* =========================================================
   CAMPAIGN BADGE
========================================================= */

.vt-footer__campaign-badge {
  position: relative;

  width: fit-content;
  max-width: 100%;

  margin-top: 26px;
  padding: 16px 18px;

  display: flex;
  flex-direction: column;
  gap: 8px;

  border: 1px solid rgba(212, 175, 55, 0.17);
  border-left: 2px solid var(--vt-gold);
  border-radius: 4px;

  background:
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.075),
      rgba(255, 255, 255, 0.012)
    );
}

.vt-footer__campaign-badge::before {
  content: "";

  position: absolute;
  top: 0;
  left: -2px;

  width: 2px;
  height: 42%;

  background: var(--vt-gold-light);

  box-shadow:
    0 0 13px rgba(243, 216, 122, 0.62);
}

.vt-footer__campaign-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: #76d88d;
}

.vt-footer__campaign-status i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #58d478;

  box-shadow:
    0 0 0 4px rgba(88, 212, 120, 0.08),
    0 0 11px rgba(88, 212, 120, 0.5);

  animation: vtFooterStatusPulse 1.8s ease-in-out infinite;
}

.vt-footer__campaign-badge strong {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;

  color: var(--vt-white);
}


/* =========================================================
   COLUMN BASE
========================================================= */

.vt-footer__column {
  min-width: 0;
}

.vt-footer__column-title {
  position: relative;

  display: block;

  margin-bottom: 23px;
  padding-bottom: 13px;

  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-footer__column-title::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: 0;

  width: 44px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--vt-gold-light),
      transparent
    );

  box-shadow:
    0 0 9px rgba(212, 175, 55, 0.4);
}


/* =========================================================
   NAVIGATION
========================================================= */

.vt-footer__links {
  display: grid;
  gap: 4px;
}

.vt-footer__links a {
  position: relative;

  min-height: 48px;
  padding: 0 5px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  overflow: hidden;

  transition:
    padding-left 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}

.vt-footer__links a::before {
  content: "";

  position: absolute;
  top: 50%;
  left: 0;

  width: 0;
  height: 1px;

  background: var(--vt-gold-light);

  transform: translateY(-50%);

  transition: width 0.35s ease;
}

.vt-footer__links a:hover {
  padding-left: 18px;

  color: var(--vt-gold-light);
  border-color: rgba(212, 175, 55, 0.2);
}

.vt-footer__links a:hover::before {
  width: 10px;
}

.vt-footer__links a > span {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;

  color: var(--vt-white);

  transition: color 0.35s ease;
}

.vt-footer__links a:hover > span {
  color: var(--vt-gold-light);
}

.vt-footer__links a > i {
  font-family: "Cinzel", Georgia, serif;
  font-size: 10px;
  line-height: 1;
  font-style: normal;
  font-weight: 600;

  color: var(--vt-grey-dark);

  transition:
    color 0.35s ease,
    transform 0.35s ease;
}

.vt-footer__links a:hover > i {
  color: var(--vt-gold);
  transform: translateX(3px);
}


/* =========================================================
   TOP BORDER DETAIL
========================================================= */

.vt-footer::before {
  content: "";

  position: absolute;
  top: 0;
  left: 50%;

  width: min(1400px, calc(100% - 80px));
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212, 175, 55, 0.55) 18%,
      rgba(243, 216, 122, 0.82) 50%,
      rgba(212, 175, 55, 0.55) 82%,
      transparent
    );

  transform: translateX(-50%);

  box-shadow:
    0 0 18px rgba(212, 175, 55, 0.14);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes vtFooterGlowOne {
  from {
    transform: translate3d(0, 0, 0) scale(0.95);
    opacity: 0.6;
  }

  to {
    transform: translate3d(40px, 28px, 0) scale(1.1);
    opacity: 1;
  }
}

@keyframes vtFooterGlowTwo {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(-35px, -20px, 0) scale(1.14);
  }
}

@keyframes vtFooterStatusPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {

  .vt-footer__container {
    width: min(100% - 48px, 1080px);
  }

  .vt-footer__top {
    grid-template-columns:
      minmax(280px, 1.2fr)
      repeat(3, minmax(170px, 1fr));

    gap: 34px;
  }

  .vt-footer::before {
    width: min(100% - 48px, 1080px);
  }

}


/* =========================================================
   STACKED TABLET
========================================================= */

@media (max-width: 960px) {

  .vt-footer {
    padding-top: 90px;
  }

  .vt-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 52px 42px;
  }

  .vt-footer__brand {
    max-width: 100%;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

  .vt-footer {
    padding-top: 76px;
  }

  .vt-footer__container {
    width: calc(100% - 28px);
  }

  .vt-footer__top {
    grid-template-columns: 1fr;
    gap: 44px;

    padding-bottom: 54px;
  }

  .vt-footer__logo-mark {
    width: 54px;
    height: 54px;
    flex-basis: 54px;

    font-size: 18px;
  }

  .vt-footer__logo-text strong {
    font-size: 19px;
  }

  .vt-footer__brand > p {
    font-size: 13px;
  }

  .vt-footer__campaign-badge {
    width: 100%;
  }

  .vt-footer::before {
    width: calc(100% - 28px);
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .vt-footer__logo {
    align-items: flex-start;
  }

  .vt-footer__logo-text strong {
    font-size: 17px;
  }

  .vt-footer__links a {
    min-height: 46px;
  }

}


/* =========================================================
   ELEMENTOR FULL WIDTH FIX
========================================================= */

.elementor-widget-html .vt-footer {
  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .vt-footer *,
  .vt-footer *::before,
  .vt-footer *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

}
/* =========================================================
   VERSUS TRADE — SECTION 07
   PREMIUM FOOTER
   PART 2: MILESTONES, CONTACT, CLAIM BUTTON & INFO STRIP
========================================================= */


/* =========================================================
   REWARD MILESTONES
========================================================= */

.vt-footer__milestones {
  display: grid;
  gap: 10px;
}

.vt-footer__milestones a {
  position: relative;

  min-height: 60px;
  padding: 13px 14px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;

  border: 1px solid rgba(212, 175, 55, 0.11);
  border-radius: 5px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.022),
      rgba(212, 175, 55, 0.018)
    );

  overflow: hidden;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

.vt-footer__milestones a::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      120deg,
      rgba(212, 175, 55, 0.08),
      transparent 50%
    );

  opacity: 0;

  transition: opacity 0.35s ease;
}

.vt-footer__milestones a::after {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 2px;
  height: 0;

  background:
    linear-gradient(
      to bottom,
      var(--vt-gold-light),
      var(--vt-gold)
    );

  box-shadow:
    0 0 10px rgba(212, 175, 55, 0.38);

  transition: height 0.35s ease;
}

.vt-footer__milestones a:hover {
  transform: translateX(5px);

  border-color: rgba(212, 175, 55, 0.3);

  background:
    linear-gradient(
      135deg,
      rgba(212, 175, 55, 0.05),
      rgba(255, 255, 255, 0.018)
    );

  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.28);
}

.vt-footer__milestones a:hover::before {
  opacity: 1;
}

.vt-footer__milestones a:hover::after {
  height: 100%;
}

.vt-footer__milestones a span,
.vt-footer__milestones a strong {
  position: relative;
  z-index: 2;
}

.vt-footer__milestones a span {
  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-footer__milestones a strong {
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;

  color: var(--vt-white);

  transition: color 0.35s ease;
}

.vt-footer__milestones a:hover strong {
  color: var(--vt-gold-light);
}


/* =========================================================
   CONTACT LIST
========================================================= */

.vt-footer__contact-list {
  display: grid;
  gap: 12px;
}

.vt-footer__contact-item {
  position: relative;

  min-height: 74px;
  padding: 14px;

  display: flex;
  align-items: center;
  gap: 13px;

  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: 6px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.023),
      rgba(212, 175, 55, 0.018)
    );

  overflow: hidden;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.vt-footer__contact-item::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      120deg,
      rgba(212, 175, 55, 0.08),
      transparent 52%
    );

  opacity: 0;

  transition: opacity 0.35s ease;
}

.vt-footer__contact-item:hover {
  transform: translateY(-4px);

  border-color: rgba(212, 175, 55, 0.31);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.3);
}

.vt-footer__contact-item:hover::before {
  opacity: 1;
}

.vt-footer__contact-icon {
  position: relative;
  z-index: 2;

  width: 44px;
  height: 44px;
  flex: 0 0 44px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 50%;

  color: var(--vt-gold-light);

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.12),
      rgba(212, 175, 55, 0.02)
    );

  transition:
    transform 0.35s ease,
    border-color 0.35s ease;
}

.vt-footer__contact-item:hover .vt-footer__contact-icon {
  transform: rotate(-4deg) scale(1.04);

  border-color: rgba(243, 216, 122, 0.45);
}

.vt-footer__contact-icon svg {
  width: 21px;
  height: 21px;
}

.vt-footer__contact-item > div:last-child {
  position: relative;
  z-index: 2;

  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vt-footer__contact-item span {
  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-footer__contact-item strong {
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;

  color: var(--vt-white);

  overflow-wrap: anywhere;
}


/* =========================================================
   CLAIM BUTTON
========================================================= */

.vt-footer__claim-button {
  position: relative;

  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  padding: 0 19px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  border: 1px solid rgba(243, 216, 122, 0.75);
  border-radius: 3px;

  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: #1d1402;

  background:
    linear-gradient(
      115deg,
      #8c6416,
      #d4af37 28%,
      #f3d87a 54%,
      #a97a20
    );

  box-shadow:
    0 13px 34px rgba(212, 175, 55, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);

  overflow: hidden;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

.vt-footer__claim-button::before {
  content: "";

  position: absolute;
  top: 0;
  left: -120%;

  width: 65%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.8),
      transparent
    );

  transform: skewX(-22deg);

  transition: left 0.75s ease;
}

.vt-footer__claim-button span,
.vt-footer__claim-button svg {
  position: relative;
  z-index: 2;
}

.vt-footer__claim-button svg {
  width: 18px;
  height: 18px;

  transition: transform 0.35s ease;
}

.vt-footer__claim-button:hover {
  transform: translateY(-4px);

  filter: brightness(1.05);

  box-shadow:
    0 20px 46px rgba(212, 175, 55, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.vt-footer__claim-button:hover::before {
  left: 145%;
}

.vt-footer__claim-button:hover svg {
  transform: translateX(5px);
}


/* =========================================================
   INFORMATION STRIP
========================================================= */

.vt-footer__info-strip {
  position: relative;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  border-top: 1px solid rgba(212, 175, 55, 0.17);
  border-bottom: 1px solid rgba(212, 175, 55, 0.17);

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.015),
      rgba(212, 175, 55, 0.032),
      rgba(255, 255, 255, 0.015)
    );
}

.vt-footer__info-strip::before {
  content: "";

  position: absolute;
  top: -1px;
  left: 50%;

  width: 180px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--vt-gold-light),
      transparent
    );

  transform: translateX(-50%);

  box-shadow:
    0 0 14px rgba(212, 175, 55, 0.35);
}

.vt-footer__info-item {
  position: relative;

  min-width: 0;
  min-height: 112px;
  padding: 24px 25px;

  display: flex;
  align-items: center;
  gap: 14px;

  border-right: 1px solid rgba(255, 255, 255, 0.055);

  overflow: hidden;

  transition:
    background-color 0.35s ease,
    transform 0.35s ease;
}

.vt-footer__info-item:last-child {
  border-right: 0;
}

.vt-footer__info-item::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 0;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--vt-gold-light),
      transparent
    );

  transition: width 0.4s ease;
}

.vt-footer__info-item:hover {
  background: rgba(212, 175, 55, 0.028);
}

.vt-footer__info-item:hover::before {
  width: 100%;
}

.vt-footer__info-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212, 175, 55, 0.23);
  border-radius: 50%;

  color: var(--vt-gold-light);

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.11),
      rgba(212, 175, 55, 0.02)
    );

  transition:
    transform 0.35s ease,
    border-color 0.35s ease;
}

.vt-footer__info-item:hover .vt-footer__info-icon {
  transform: rotate(-4deg) scale(1.04);

  border-color: rgba(243, 216, 122, 0.45);
}

.vt-footer__info-icon svg {
  width: 21px;
  height: 21px;
}

.vt-footer__info-item > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vt-footer__info-item span {
  font-size: 8px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-footer__info-item strong {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;

  color: var(--vt-white);
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1180px) {

  .vt-footer__info-item {
    padding-inline: 18px;
  }

  .vt-footer__info-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

}


/* =========================================================
   RESPONSIVE — STACKED TABLET
========================================================= */

@media (max-width: 960px) {

  .vt-footer__info-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .vt-footer__info-item:nth-child(2) {
    border-right: 0;
  }

  .vt-footer__info-item:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 640px) {

  .vt-footer__milestones a {
    min-height: 58px;
  }

  .vt-footer__contact-item {
    min-height: 70px;
  }

  .vt-footer__claim-button {
    min-height: 54px;
  }

  .vt-footer__info-strip {
    grid-template-columns: 1fr;
  }

  .vt-footer__info-item,
  .vt-footer__info-item:nth-child(2) {
    min-height: 90px;
    padding: 20px 4px;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  }

  .vt-footer__info-item:last-child {
    border-bottom: 0;
  }

  .vt-footer__info-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .vt-footer__info-icon svg {
    width: 19px;
    height: 19px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .vt-footer__contact-item {
    align-items: flex-start;
  }

  .vt-footer__claim-button {
    padding-inline: 14px;

    font-size: 9px;
  }

}
/* =========================================================
   VERSUS TRADE — SECTION 07
   PREMIUM FOOTER
   PART 3: DISCLAIMER, BOTTOM BAR, ANIMATIONS & FINAL FIXES
========================================================= */


/* =========================================================
   DISCLAIMER
========================================================= */

.vt-footer__disclaimer {
  position: relative;

  margin-top: 34px;
  padding: 24px 26px;

  display: flex;
  align-items: flex-start;
  gap: 16px;

  border: 1px solid rgba(212, 175, 55, 0.16);
  border-left: 3px solid var(--vt-gold);
  border-radius: 5px;

  background:
    linear-gradient(
      90deg,
      rgba(212, 175, 55, 0.07),
      rgba(255, 255, 255, 0.012)
    );

  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  overflow: hidden;
}

.vt-footer__disclaimer::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 5% 30%,
      rgba(243, 216, 122, 0.1),
      transparent 24%
    );

  pointer-events: none;
}

.vt-footer__disclaimer::after {
  content: "";

  position: absolute;
  top: 0;
  left: -120%;

  width: 45%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.035),
      transparent
    );

  transform: skewX(-22deg);

  animation: vtFooterDisclaimerSweep 7s ease-in-out infinite;
}


/* Disclaimer icon */
.vt-footer__disclaimer-icon {
  position: relative;
  z-index: 2;

  width: 46px;
  height: 46px;
  flex: 0 0 46px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212, 175, 55, 0.27);
  border-radius: 50%;

  color: var(--vt-gold-light);

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.13),
      rgba(212, 175, 55, 0.025)
    );

  box-shadow:
    inset 0 0 20px rgba(212, 175, 55, 0.035),
    0 0 24px rgba(212, 175, 55, 0.045);
}

.vt-footer__disclaimer-icon svg {
  width: 22px;
  height: 22px;
}


/* Disclaimer content */
.vt-footer__disclaimer > div:last-child {
  position: relative;
  z-index: 2;

  min-width: 0;
}

.vt-footer__disclaimer span {
  display: block;

  margin-bottom: 8px;

  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: var(--vt-gold);
}

.vt-footer__disclaimer p {
  max-width: 1180px;

  font-size: 12px;
  line-height: 1.8;

  color: var(--vt-grey);
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.vt-footer__bottom {
  position: relative;

  min-height: 88px;
  margin-top: 34px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;

  border-top: 1px solid rgba(212, 175, 55, 0.15);
}

.vt-footer__bottom::before {
  content: "";

  position: absolute;
  top: -1px;
  left: 0;

  width: 180px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--vt-gold-light),
      transparent
    );

  box-shadow:
    0 0 14px rgba(212, 175, 55, 0.3);
}


/* Copyright */
.vt-footer__bottom > p {
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.03em;

  color: var(--vt-grey-dark);
}

.vt-footer__bottom > p span {
  color: var(--vt-gold);
}


/* Bottom navigation */
.vt-footer__bottom-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.vt-footer__bottom-links a {
  position: relative;

  padding: 8px 0;

  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.06em;

  color: var(--vt-grey);

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.vt-footer__bottom-links a::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: 3px;

  width: 0;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--vt-gold-light),
      var(--vt-gold)
    );

  transition: width 0.3s ease;
}

.vt-footer__bottom-links a:hover {
  color: var(--vt-gold-light);
  transform: translateY(-2px);
}

.vt-footer__bottom-links a:hover::after {
  width: 100%;
}


/* Divider between links */
.vt-footer__bottom-links a:not(:last-child)::before {
  content: "";

  position: absolute;
  top: 50%;
  right: -12px;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: rgba(212, 175, 55, 0.5);

  transform: translateY(-50%);
}


/* =========================================================
   FOOTER BOTTOM BACKGROUND DETAIL
========================================================= */

.vt-footer__bottom::after {
  content: "";

  position: absolute;
  z-index: -1;

  left: 50%;
  bottom: -140px;

  width: 650px;
  height: 260px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(212, 175, 55, 0.06),
      transparent 68%
    );

  filter: blur(20px);

  transform: translateX(-50%);

  pointer-events: none;
}


/* =========================================================
   GLOBAL FOOTER HOVER POLISH
========================================================= */

.vt-footer__campaign-badge,
.vt-footer__disclaimer {
  transition:
    transform 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.vt-footer__campaign-badge:hover {
  transform: translateY(-4px);

  border-color: rgba(212, 175, 55, 0.32);

  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.28);
}

.vt-footer__disclaimer:hover {
  transform: translateY(-4px);

  border-color: rgba(212, 175, 55, 0.28);

  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}


/* =========================================================
   FOCUS ACCESSIBILITY
========================================================= */

.vt-footer a:focus-visible {
  outline: 2px solid rgba(243, 216, 122, 0.7);
  outline-offset: 4px;
}

.vt-footer__claim-button:focus-visible {
  outline-color: #ffffff;
}


/* =========================================================
   SELECTION COLOR
========================================================= */

.vt-footer ::selection {
  color: #151003;
  background: var(--vt-gold-light);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes vtFooterDisclaimerSweep {
  0%,
  62% {
    left: -120%;
  }

  84%,
  100% {
    left: 145%;
  }
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1180px) {

  .vt-footer__disclaimer {
    padding: 22px 23px;
  }

  .vt-footer__bottom {
    min-height: 84px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 960px) {

  .vt-footer__disclaimer {
    margin-top: 30px;
  }

  .vt-footer__bottom {
    min-height: auto;
    padding: 28px 0;

    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .vt-footer__bottom-links {
    width: 100%;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

  .vt-footer__disclaimer {
    margin-top: 26px;
    padding: 20px 17px;

    gap: 13px;
  }

  .vt-footer__disclaimer-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .vt-footer__disclaimer-icon svg {
    width: 19px;
    height: 19px;
  }

  .vt-footer__disclaimer span {
    font-size: 8px;
    letter-spacing: 0.14em;
  }

  .vt-footer__disclaimer p {
    font-size: 11px;
    line-height: 1.75;
  }

  .vt-footer__bottom {
    margin-top: 26px;
    padding: 25px 0 28px;
  }

  .vt-footer__bottom > p {
    font-size: 10px;
  }

  .vt-footer__bottom-links {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .vt-footer__bottom-links a {
    width: fit-content;
    padding: 7px 0;

    font-size: 10px;
  }

  .vt-footer__bottom-links a:not(:last-child)::before {
    display: none;
  }

  .vt-footer__bottom::before {
    width: 110px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .vt-footer__disclaimer {
    align-items: flex-start;
    flex-direction: column;
  }

  .vt-footer__bottom > p {
    max-width: 290px;
  }

}


/* =========================================================
   WORDPRESS / ELEMENTOR THEME RESET
========================================================= */

.vt-footer ul,
.vt-footer ol {
  margin: 0;
  padding: 0;
}

.vt-footer img {
  max-width: 100%;
  height: auto;
}

.vt-footer .elementor-widget-container,
.vt-footer .elementor-shortcode {
  color: inherit;
}


/* Hide default theme footer when this custom footer is used */
body:has(.vt-footer) .site-footer:not(.vt-footer),
body:has(.vt-footer) footer#colophon:not(.vt-footer),
body:has(.vt-footer) #colophon:not(.vt-footer),
body:has(.vt-footer) .elementor-location-footer:not(:has(.vt-footer)) {
  display: none !important;
}


/* Fallback class for browsers/themes where :has is unsupported.
   Add class "vt-custom-footer-active" to body if necessary. */
body.vt-custom-footer-active .site-footer:not(.vt-footer),
body.vt-custom-footer-active footer#colophon:not(.vt-footer),
body.vt-custom-footer-active #colophon:not(.vt-footer),
body.vt-custom-footer-active .elementor-location-footer:not(:has(.vt-footer)) {
  display: none !important;
}


/* Remove Elementor widget gaps around footer */
.elementor-widget-html:has(.vt-footer),
.elementor-widget-html:has(.vt-footer) > .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   SAFER ELEMENTOR FULL-WIDTH OVERRIDE
========================================================= */

.elementor-widget-html .vt-footer {
  position: relative;

  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

body {
  overflow-x: clip;
}


/* =========================================================
   PRINT
========================================================= */

@media print {

  .vt-footer__background,
  .vt-footer__grid,
  .vt-footer__glow,
  .vt-footer__claim-button {
    display: none !important;
  }

  .vt-footer {
    padding: 30px 0 0;

    color: #000000;
    background: #ffffff;
  }

  .vt-footer * {
    color: #000000 !important;
    box-shadow: none !important;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .vt-footer__disclaimer::after {
    animation: none !important;
  }

  .vt-footer a,
  .vt-footer__disclaimer,
  .vt-footer__campaign-badge {
    transition: none !important;
  }

}
.vt-footer__logo-img{
    width:70px;
    height:70px;
    object-fit:contain;
    display:block;
    flex-shrink:0;
    transition:.35s;
}

.vt-footer__logo:hover .vt-footer__logo-img{
    transform:translateY(-3px) scale(1.05);
}

@media(max-width:640px){
    .vt-footer__logo-img{
        width:58px;
        height:58px;
    }
}/* End custom CSS */