/* ================================================================
   VIGOROX v2 — Dark Premium Layout  (potes2.css)
   Pixel-accurate reproduction of the reference image
   ================================================================ */

/* ──────────────────────────────────────────────
   0.  SCOPE RESET
   ────────────────────────────────────────────── */
.vx,
.vx *,
.vx *::before,
.vx *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.vx {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #fff;
  line-height: 1.45;
  overflow: hidden;
  position: relative;
  background: #080808;
}
.vx img {
  max-width: 100%;
  height: auto;
}
.vx-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 18px;
  position: relative;
  z-index: 2;
}

/* ──────────────────────────────────────────────
   1.  GOLD BOKEH / SPARKLE STRIPS
   ────────────────────────────────────────────── */
.vx-sparkles {
  position: relative;
  height: 100px;
  overflow: hidden;
  z-index: 1;
}
.vx-sparkles--top {
  background: linear-gradient(180deg, #060503 0%, #0a0804 100%);
}
.vx-sparkles--bot {
  background: linear-gradient(0deg, #060503 0%, #0a0804 100%);
}

.vx-bokeh {
  position: absolute;
  inset: 0;
  /* many tiny gold dots via box-shadow */
  background: transparent;
}
.vx-bokeh::before,
.vx-bokeh::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
/* Layer 1 — bright dots */
.vx-bokeh::before {
  box-shadow: 8px 25px 2px 2.5px #fcd34d, 25px 65px 1px 1px #d4a017,
    52px 15px 3px 3px #f59e0b, 80px 55px 2px 1.5px #fbbf24,
    110px 30px 1px 1.2px #e8a820, 140px 70px 2px 2.5px #fcd34d,
    170px 18px 2px 1.5px #d4a017, 195px 60px 3px 3px #f59e0b,
    225px 35px 1px 1px #fbbf24, 260px 68px 2px 2.5px #fcd34d,
    290px 12px 2px 1.5px #e8a820, 320px 52px 3px 3px #d4a017,
    355px 28px 1px 1.2px #f59e0b, 390px 75px 2px 2px #fbbf24,
    420px 40px 2px 1.5px #fcd34d, 455px 10px 3px 3px #d4a017,
    490px 60px 1px 1px #f59e0b, 530px 22px 2px 2.5px #fbbf24,
    565px 70px 2px 1.5px #e8a820, 600px 32px 3px 3px #fcd34d,
    640px 58px 1px 1.2px #d4a017, 680px 18px 2px 2.5px #f59e0b,
    720px 48px 2px 1.5px #fbbf24, 760px 78px 3px 3px #fcd34d,
    800px 25px 1px 1px #d4a017, 840px 62px 2px 2.5px #e8a820,
    880px 35px 2px 1.5px #f59e0b, 920px 72px 3px 3px #fbbf24,
    960px 15px 1px 1.2px #fcd34d, 35px 85px 2px 2px #fbbf24,
    130px 90px 3px 2px #fcd34d, 240px 82px 2px 1.5px #f59e0b,
    350px 88px 1px 2px #d4a017, 470px 80px 3px 2.5px #fbbf24,
    580px 92px 2px 1.5px #fcd34d, 700px 85px 2px 2px #e8a820,
    820px 90px 3px 2px #f59e0b, 940px 82px 1px 1.5px #fbbf24;
  animation: vx-twinkle 3s ease-in-out infinite alternate;
}
/* Layer 2 — softer offset dots */
.vx-bokeh::after {
  box-shadow: 15px 45px 3px 2px #fbbf24, 45px 10px 2px 3px #d4a017,
    75px 72px 1px 1.5px #fcd34d, 105px 40px 3px 2.5px #f59e0b,
    135px 80px 2px 1.5px #e8a820, 168px 32px 3px 3px #fbbf24,
    200px 62px 1px 1.2px #d4a017, 235px 15px 3px 2.5px #fcd34d,
    268px 55px 2px 1.5px #f59e0b, 305px 28px 3px 3px #fbbf24,
    340px 75px 1px 1px #e8a820, 378px 42px 3px 2.5px #d4a017,
    412px 65px 2px 1.5px #fcd34d, 448px 22px 3px 3px #f59e0b,
    485px 52px 1px 1.2px #fbbf24, 520px 80px 3px 2.5px #d4a017,
    558px 32px 2px 1.5px #fcd34d, 598px 62px 3px 3px #e8a820,
    635px 45px 1px 1px #f59e0b, 670px 12px 3px 2.5px #fbbf24,
    710px 70px 2px 1.5px #d4a017, 750px 38px 3px 3px #fcd34d,
    785px 65px 1px 1.2px #f59e0b, 825px 18px 3px 2.5px #fbbf24,
    865px 55px 2px 1.5px #e8a820, 905px 30px 3px 3px #d4a017,
    945px 72px 1px 1px #fcd34d, 60px 5px 2px 2px #fcd34d,
    180px 8px 3px 1.5px #f59e0b, 310px 5px 2px 2px #fbbf24,
    430px 3px 1px 2px #d4a017, 550px 8px 3px 2.5px #fcd34d,
    660px 5px 2px 1.5px #e8a820, 780px 3px 3px 2px #f59e0b,
    900px 8px 2px 2px #fbbf24;
  animation: vx-twinkle 4.5s ease-in-out infinite alternate-reverse;
}

@keyframes vx-twinkle {
  0% {
    opacity: 0.4;
    filter: blur(0.3px);
  }
  50% {
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    opacity: 0.6;
    filter: blur(0.5px);
  }
}

/* Warm ambient glow behind sparkles — INTENSE */
.vx-sparkles--top::before {
  content: "";
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 140px;
  background: radial-gradient(
    ellipse,
    rgba(220, 160, 30, 0.35) 0%,
    rgba(200, 140, 20, 0.12) 40%,
    transparent 70%
  );
  pointer-events: none;
}
.vx-sparkles--bot::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 140px;
  background: radial-gradient(
    ellipse,
    rgba(220, 160, 30, 0.3) 0%,
    rgba(200, 140, 20, 0.1) 40%,
    transparent 70%
  );
  pointer-events: none;
}

/* ──────────────────────────────────────────────
   2.  HERO
   ────────────────────────────────────────────── */
.vx-hero {
  background: radial-gradient(
      ellipse at 50% -20%,
      rgba(220, 160, 30, 0.22) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 30% 0%,
      rgba(180, 120, 15, 0.1) 0%,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 70% 0%,
      rgba(180, 120, 15, 0.1) 0%,
      transparent 40%
    ),
    linear-gradient(180deg, #0a0804 0%, #0c0a06 100%);
  padding: 5px 0 30px;
  text-align: center;
}

/* Red badge — glowing */
.vx-badge-red {
  display: inline-block;
  background: linear-gradient(180deg, #ef4444, #c62828);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 2.5px;
  padding: 7px 32px;
  border-radius: 0 0 8px 8px;
  text-transform: uppercase;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.45),
    0 0 30px rgba(239, 68, 68, 0.25);
  animation: vx-pulse-red 2.5s ease-in-out infinite;
}
@keyframes vx-pulse-red {
  0%,
  100% {
    box-shadow: 0 4px 18px rgba(239, 68, 68, 0.45),
      0 0 30px rgba(239, 68, 68, 0.25);
  }
  50% {
    box-shadow: 0 4px 25px rgba(239, 68, 68, 0.6),
      0 0 50px rgba(239, 68, 68, 0.35);
  }
}

/* Logo */
.vx-logo {
  font-family: "Oswald", "Inter", sans-serif;
  font-size: clamp(3rem, 9vw, 5.5rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: 8px;
  margin: 10px 0 0;
  position: relative;
  display: inline-block;
  text-shadow: 0 2px 30px rgba(251, 191, 36, 0.2),
    0 0 60px rgba(251, 191, 36, 0.08);
}
.vx-logo-x {
  color: #f59e0b;
  font-style: italic;
  position: relative;
  text-shadow: 0 0 20px rgba(245, 158, 11, 0.7),
    0 0 50px rgba(245, 158, 11, 0.4), 0 0 100px rgba(245, 158, 11, 0.2),
    0 0 150px rgba(245, 158, 11, 0.1);
  animation: vx-glow-x 3s ease-in-out infinite;
}
@keyframes vx-glow-x {
  0%,
  100% {
    text-shadow: 0 0 20px rgba(245, 158, 11, 0.7),
      0 0 50px rgba(245, 158, 11, 0.4), 0 0 100px rgba(245, 158, 11, 0.2);
  }
  50% {
    text-shadow: 0 0 30px rgba(245, 158, 11, 0.9),
      0 0 70px rgba(245, 158, 11, 0.55), 0 0 120px rgba(245, 158, 11, 0.3),
      0 0 180px rgba(245, 158, 11, 0.12);
  }
}
.vx-logo-swoosh {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  height: auto;
  pointer-events: none;
}

/* Title */
.vx-title {
  font-size: clamp(1rem, 3.2vw, 1.55rem);
  font-weight: 600;
  color: #e5e7eb;
  margin: 8px 0 10px;
  letter-spacing: 0.5px;
}
.vx-title strong {
  color: #fbbf24;
  font-weight: 800;
  text-shadow: 0 0 15px rgba(251, 191, 36, 0.5),
    0 0 40px rgba(251, 191, 36, 0.2);
}

/* Subtitle with underline */
.vx-sub {
  font-size: clamp(0.82rem, 2.2vw, 0.98rem);
  color: #b0b0b0;
  margin-bottom: 18px;
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1.5px solid rgba(251, 191, 36, 0.35);
}
.vx-sub strong {
  color: #e5e7eb;
}

/* Check bullets – 2×2 grid */
.vx-checks {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 30px;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}
.vx-checks li {
  font-size: 13.5px;
  color: #d1d5db;
  font-weight: 500;
  padding: 2px 0;
}
.vx-ck {
  color: #22c55e;
  font-weight: 700;
  margin-right: 5px;
  font-size: 14px;
}

/* ──────────────────────────────────────────────
   3.  PRICING SECTION
   ────────────────────────────────────────────── */
.vx-pricing {
  background: radial-gradient(
      ellipse at 50% 30%,
      rgba(220, 160, 30, 0.12) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 70%,
      rgba(180, 120, 15, 0.06) 0%,
      transparent 40%
    ),
    linear-gradient(180deg, #0c0a06 0%, #0a0804 50%, #0c0a06 100%);
  padding: 15px 0 35px;
}

/* Badges row */
.vx-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.vx-biggest {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #fcd34d 0%, #d97706 100%);
  color: #1a0f00;
  font-weight: 900;
  font-size: clamp(1rem, 3vw, 1.35rem);
  padding: 9px 26px;
  border-radius: 6px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: 0 0 40px rgba(252, 211, 77, 0.4),
    0 0 80px rgba(252, 211, 77, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: vx-badge-glow 2s ease-in-out infinite;
}
@keyframes vx-badge-glow {
  0%,
  100% {
    box-shadow: 0 0 40px rgba(252, 211, 77, 0.4),
      0 0 80px rgba(252, 211, 77, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 60px rgba(252, 211, 77, 0.6),
      0 0 110px rgba(252, 211, 77, 0.25), 0 0 150px rgba(252, 211, 77, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
}
.vx-biggest__star {
  font-size: 12px;
  opacity: 0.55;
}

.vx-sat-seal {
  filter: drop-shadow(0 0 25px rgba(252, 211, 77, 0.55))
    drop-shadow(0 0 50px rgba(252, 211, 77, 0.2));
  animation: vx-float 3s ease-in-out infinite;
}
@keyframes vx-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 25px rgba(252, 211, 77, 0.55))
      drop-shadow(0 0 50px rgba(252, 211, 77, 0.2));
  }
  50% {
    transform: translateY(-5px) scale(1.06);
    filter: drop-shadow(0 0 35px rgba(252, 211, 77, 0.7))
      drop-shadow(0 0 70px rgba(252, 211, 77, 0.3));
  }
}

/* ──────────────────────────────────────────────
   4.  CARD GRID  — center card taller
   ────────────────────────────────────────────── */
.vx-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 16px;
  align-items: end; /* bottom-align so center card towers above */
}

/* ──────────────────────────────────────────────
   5.  BASE CARD
   ────────────────────────────────────────────── */
.vx-card {
  background: linear-gradient(
    180deg,
    rgba(28, 24, 16, 0.65) 0%,
    rgba(14, 12, 8, 0.85) 100%
  );
  border: 1px solid rgba(251, 191, 36, 0.18);
  border-radius: 14px;
  text-align: center;
  padding: 0 16px 20px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.06), 0 8px 30px rgba(0, 0, 0, 0.35);
}
.vx-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 35px rgba(251, 191, 36, 0.12), 0 18px 50px rgba(0, 0, 0, 0.55);
  border-color: rgba(251, 191, 36, 0.3);
}

/* Card header bar (Basic / Good Value) */
.vx-card__header {
  width: calc(100% + 32px);
  margin: 0 -16px;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px 14px 0 0;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Bottles count */
.vx-card__bottles {
  font-family: "Oswald", "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.vx-card__bottles--big {
  font-size: 28px;
  color: #fbbf24;
  letter-spacing: 3px;
  margin-top: 8px;
  text-shadow: 0 0 15px rgba(251, 191, 36, 0.4),
    0 0 40px rgba(251, 191, 36, 0.15);
}

/* Day supply */
.vx-card__days {
  font-size: 12px;
  color: #9ca3af;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* Card image */
.vx-card__img {
  margin: 0 auto 12px;
  position: relative;
  transition: transform 0.3s ease;
}
.vx-card:hover .vx-card__img {
  transform: scale(1.03);
}

.vx-card__img img {
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 15px rgba(251, 191, 36, 0.08));
  max-height: 210px;
  width: auto;
}

/* Price row (old crossed + new big) */
.vx-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}
.vx-card__was {
  font-size: 16px;
  color: #6b7280;
  text-decoration: line-through;
}
.vx-card__now {
  font-family: "Oswald", "Inter", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 0.95;
  color: #fbbf24;
  text-shadow: 0 0 15px rgba(251, 191, 36, 0.45),
    0 0 40px rgba(251, 191, 36, 0.2), 0 0 70px rgba(251, 191, 36, 0.08);
}
.vx-card__price-row--big .vx-card__was {
  font-size: 18px;
}
.vx-card__price-row--big .vx-card__now {
  font-size: 62px;
}

/* Shipping info */
.vx-card__shipping-info {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 12px;
  font-weight: 600;
}
.vx-card__shipping-info--free {
  color: #22c55e;
  font-weight: 700;
  font-size: 13px;
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}

/* Perks bullet list */
.vx-card__perks {
  list-style: none;
  text-align: left;
  width: 100%;
  max-width: 210px;
  margin: 0 auto 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vx-card__perks li {
  font-size: 12.5px;
  font-weight: 600;
  color: #d1d5db;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vx-perk-dot {
  font-size: 10px;
  color: #fbbf24;
  flex-shrink: 0;
}
.vx-perk-dot--green {
  color: #22c55e;
}

/* Guarantee line (center card) */
.vx-card__guar-line {
  font-size: 13px;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}

/* Surprise text (center card) */
.vx-card__surprise {
  font-size: 13px;
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 14px;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}

/* Card footer */
.vx-card__footer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}
.vx-card__foot-total {
  font-size: 13px;
  color: #9ca3af;
  margin-bottom: 2px;
}
.vx-card__foot-total s {
  color: #6b7280;
  margin-right: 4px;
}
.vx-card__foot-total strong {
  color: #fff;
  font-size: 15px;
}
.vx-card__foot-ship {
  font-size: 11px;
  font-weight: 700;
  color: #ef4444;
  letter-spacing: 0.3px;
}
.vx-card__foot-ship--free {
  color: #22c55e;
}
.vx-card__foot-guar {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 2px;
  font-weight: 600;
}

/* ──────────────────────────────────────────────
   6.  BEST VALUE — center card overrides
   ────────────────────────────────────────────── */
.vx-card--best {
  border-color: rgba(251, 191, 36, 0.45);
  border-width: 2px;
  padding: 0 16px 24px;
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.2),
    0 0 80px rgba(251, 191, 36, 0.08), 0 25px 60px rgba(0, 0, 0, 0.45);
  z-index: 5;
  animation: vx-card-breathe 3s ease-in-out infinite;
}
@keyframes vx-card-breathe {
  0%,
  100% {
    box-shadow: 0 0 40px rgba(251, 191, 36, 0.2),
      0 0 80px rgba(251, 191, 36, 0.08), 0 25px 60px rgba(0, 0, 0, 0.45);
    border-color: rgba(251, 191, 36, 0.45);
  }
  50% {
    box-shadow: 0 0 60px rgba(251, 191, 36, 0.35),
      0 0 110px rgba(251, 191, 36, 0.15), 0 0 160px rgba(251, 191, 36, 0.05),
      0 25px 60px rgba(0, 0, 0, 0.45);
    border-color: rgba(251, 191, 36, 0.65);
  }
}
.vx-card--best:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 70px rgba(251, 191, 36, 0.3),
    0 0 120px rgba(251, 191, 36, 0.12), 0 30px 70px rgba(0, 0, 0, 0.5);
  animation: none;
}

.vx-card__ribbon {
  width: calc(100% + 32px);
  margin: 0 -16px;
  background: linear-gradient(135deg, #fcd34d 0%, #d97706 100%);
  color: #1a0f00;
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 700;
  font-size: 19px;
  padding: 10px 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  border-radius: 12px 12px 0 0;
  margin-bottom: 4px;
  box-shadow: 0 4px 25px rgba(252, 211, 77, 0.3);
}

.vx-card__img--big img {
  max-height: 280px;
}

/* ──────────────────────────────────────────────
   7.  SAVINGS BADGES
   ────────────────────────────────────────────── */
.vx-save {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 18px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.vx-save--red {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.3);
}
.vx-save--gold {
  background: linear-gradient(135deg, #fcd34d 0%, #b45309 100%);
  color: #1a0f00;
  font-size: 15px;
  font-weight: 800;
  padding: 5px 22px;
  box-shadow: 0 0 25px rgba(252, 211, 77, 0.35),
    0 0 50px rgba(252, 211, 77, 0.12);
  animation: vx-save-pulse 2s ease-in-out infinite;
}
@keyframes vx-save-pulse {
  0%,
  100% {
    box-shadow: 0 0 25px rgba(252, 211, 77, 0.35),
      0 0 50px rgba(252, 211, 77, 0.12);
  }
  50% {
    box-shadow: 0 0 35px rgba(252, 211, 77, 0.5),
      0 0 70px rgba(252, 211, 77, 0.2);
  }
}

/* ──────────────────────────────────────────────
   8.  BUY NOW BUTTONS
   ────────────────────────────────────────────── */
.vx-btn {
  display: block;
  width: 90%;
  max-width: 220px;
  margin: 0 auto;
  text-align: center;
  padding: 13px 10px;
  border: none;
  border-radius: 6px;
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 1.5px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Shimmer sweep */
.vx-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%
  );
  transition: left 0.55s ease;
}
.vx-btn:hover::after {
  left: 120%;
}

.vx-btn--red {
  background: #fff;
  color: #111;
  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.15),
    0 0 25px rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.vx-btn--red:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(255, 255, 255, 0.2),
    0 0 40px rgba(255, 255, 255, 0.1);
  background: #f3f3f3;
}

.vx-btn--gold {
  background: linear-gradient(180deg, #0d9488 0%, #065f53 100%);
  color: #fff;
  font-size: 21px;
  padding: 15px 10px;
  max-width: 260px;
  box-shadow: 0 4px 22px rgba(13, 148, 136, 0.4),
    0 0 40px rgba(13, 148, 136, 0.15);
  animation: vx-btn-glow 2s ease-in-out infinite;
}
@keyframes vx-btn-glow {
  0%,
  100% {
    box-shadow: 0 4px 22px rgba(13, 148, 136, 0.4),
      0 0 40px rgba(13, 148, 136, 0.15);
  }
  50% {
    box-shadow: 0 4px 30px rgba(13, 148, 136, 0.55),
      0 0 60px rgba(13, 148, 136, 0.25), 0 0 90px rgba(13, 148, 136, 0.08);
  }
}
.vx-btn--gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 35px rgba(13, 148, 136, 0.55),
    0 0 70px rgba(13, 148, 136, 0.25);
  background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%);
  animation: none;
}

/* ──────────────────────────────────────────────
   8b. INFO BELOW CARDS
   ────────────────────────────────────────────── */
.vx-info-below {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(251, 191, 36, 0.1);
}

/* ──────────────────────────────────────────────
   9.  GUARANTEE BAR
   ────────────────────────────────────────────── */
.vx-guar {
  background: radial-gradient(
      ellipse at 50% 100%,
      rgba(150, 100, 15, 0.06) 0%,
      transparent 50%
    ),
    linear-gradient(180deg, #0a0804 0%, #0d0a06 100%);
  padding: 30px 0 15px;
}

.vx-guar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.vx-guar__seal img {
  filter: drop-shadow(0 0 20px rgba(252, 211, 77, 0.5))
    drop-shadow(0 0 45px rgba(252, 211, 77, 0.2));
  border-radius: 50%;
  animation: vx-seal-glow 2.5s ease-in-out infinite;
}
@keyframes vx-seal-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 20px rgba(252, 211, 77, 0.5))
      drop-shadow(0 0 45px rgba(252, 211, 77, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(252, 211, 77, 0.7))
      drop-shadow(0 0 65px rgba(252, 211, 77, 0.3));
  }
}

.vx-guar__text {
  text-align: left;
  max-width: 420px;
}
.vx-guar__text h3 {
  font-size: clamp(1rem, 2.8vw, 1.35rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.3;
}
.vx-gold {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5),
    0 0 35px rgba(251, 191, 36, 0.2);
}
.vx-guar__text p {
  font-size: 14px;
  color: #b0b0b0;
  line-height: 1.5;
}

.vx-guar__cards {
  text-align: center;
  padding-top: 5px;
}
.vx-guar__cards img {
  max-width: 260px;
  opacity: 0.85;
}

/* ──────────────────────────────────────────────
   10. SECURITY FOOTER
   ────────────────────────────────────────────── */
.vx-secure {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  padding: 11px 0;
  text-align: center;
  box-shadow: 0 -4px 30px rgba(22, 163, 74, 0.2),
    0 4px 30px rgba(22, 163, 74, 0.15);
}
.vx-secure p {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.6px;
  margin: 0;
}
.vx-lock {
  margin-right: 4px;
}

/* ================================================================
   11. EXISTING SECTIONS (guarantee full, footer, notification)
   ================================================================ */
:root {
  --primary: #1c2120;
  --primary-dark: #1c2120;
  --primary-light: #2e2e2e;
  --gold: #fcd34d;
  --success: #10b981;
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-600: #4b5563;
  --gray-800: #1f2937;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(107, 70, 193, 0.1);
  --shadow-lg: 0 10px 40px rgba(107, 70, 193, 0.15);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.guarantee-section {
  padding: 60px 0;
  background: #fff;
}
.guarantee-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.guarantee-seal {
  margin-bottom: 25px;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}
.guarantee-subtitle {
  color: var(--success);
  font-size: 24px;
  margin-bottom: 25px;
}
.guarantee-section h2 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--gray-800);
}
.guarantee-section h3 {
  font-weight: 700;
  line-height: 1.2;
}
.guarantee-section p {
  color: var(--gray-600);
  line-height: 1.6;
  font-size: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}
.trust-badges {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 35px;
  flex-wrap: wrap;
}
.trust-badges img {
  width: 70px;
  height: 70px;
  transition: var(--transition);
}
.trust-badges img:hover {
  transform: scale(1.1) rotate(5deg);
}

.footer {
  background: var(--gray-800);
  color: #fff;
  padding: 50px 0 25px;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  transition: var(--transition);
}
.footer-links a:hover {
  color: #9ca3af;
}
.footer-disclaimer {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.5;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}
.footer-disclaimer p {
  margin-bottom: 15px;
}
.copyright {
  margin-top: 30px;
  padding-top: 15px;
  border-top: 1px solid #374151;
  font-weight: 600;
  font-size: 13px;
}

.purchase-notification {
  position: fixed;
  bottom: 100px;
  left: 25px;
  background: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1000;
  animation: slideIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes slideIn {
  from {
    transform: translateX(-120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.notification-text {
  display: flex;
  flex-direction: column;
}
.notification-text strong {
  font-weight: 600;
  color: var(--gray-800);
  font-size: 14px;
}
.notification-text span {
  font-size: 12px;
  color: var(--gray-600);
}

/* ================================================================
   12. RESPONSIVE — TABLET ( ≤ 960px )
   ================================================================ */
@media (max-width: 960px) {
  .vx-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
    gap: 18px;
  }
  /* Reorder: Best Value first, then Good Value, then Basic */
  .vx-card--best {
    order: -1;
  }
  .vx-card:nth-child(3) {
    order: 0;
  }
  .vx-card:nth-child(1) {
    order: 1;
  }

  .vx-top-row {
    flex-direction: column;
    gap: 10px;
  }

  /* Cards stretch nicely in single column */
  .vx-card {
    padding: 0 20px 22px;
  }
  .vx-card--best {
    padding: 0 20px 26px;
  }
  .vx-card__header {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
  }
  .vx-card__ribbon {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
  }

  /* Perks list wider on single column */
  .vx-card__perks {
    max-width: 260px;
  }

  /* Buttons bigger for touch */
  .vx-btn {
    max-width: 280px;
    width: 100%;
    padding: 15px 10px;
  }
  .vx-btn--gold {
    max-width: 300px;
  }

  /* Disable hover transforms on touch */
  .vx-card:hover {
    transform: none;
  }
  .vx-card--best:hover {
    transform: none;
  }

  /* Info below section */
  .vx-info-below {
    margin-top: 25px;
    padding: 20px 10px 0;
  }

  /* Guarantee section badges */
  .trust-badges img {
    width: 55px;
    height: 55px;
  }

  .vx-sparkles {
    height: 70px;
  }
}

/* ================================================================
   13. RESPONSIVE — MOBILE ( ≤ 640px )
   ================================================================ */
@media (max-width: 640px) {
  .vx-hero {
    padding: 5px 0 18px;
  }

  .vx-badge-red {
    font-size: 11px;
    padding: 6px 22px;
    letter-spacing: 1.8px;
  }
  .vx-logo {
    font-size: 2.4rem;
    letter-spacing: 5px;
  }

  /* Info below section */
  .vx-title {
    font-size: 1rem;
  }
  .vx-sub {
    font-size: 0.82rem;
    margin-bottom: 14px;
  }
  .vx-checks {
    grid-template-columns: 1fr;
    gap: 2px;
    max-width: 280px;
  }
  .vx-checks li {
    font-size: 12px;
  }

  /* Card grid */
  .vx-grid {
    max-width: 360px;
    gap: 16px;
  }

  /* Card images */
  .vx-card__img img {
    max-height: 180px;
  }
  .vx-card__img--big img {
    max-height: 240px;
  }

  /* Prices */
  .vx-card__now {
    font-size: 42px;
  }
  .vx-card__price-row--big .vx-card__now {
    font-size: 54px;
  }
  .vx-card__was {
    font-size: 15px;
  }
  .vx-card__price-row--big .vx-card__was {
    font-size: 17px;
  }

  /* Bottles title */
  .vx-card__bottles {
    font-size: 20px;
  }
  .vx-card__bottles--big {
    font-size: 25px;
  }

  /* Perks */
  .vx-card__perks {
    max-width: 220px;
  }
  .vx-card__perks li {
    font-size: 12px;
    gap: 7px;
  }

  /* Shipping */
  .vx-card__shipping-info {
    font-size: 12px;
  }
  .vx-card__shipping-info--free {
    font-size: 13px;
  }

  /* Buttons — full width, touch-friendly */
  .vx-btn {
    max-width: 100%;
    padding: 15px 10px;
    font-size: 16px;
  }
  .vx-btn--gold {
    font-size: 19px;
    padding: 16px 10px;
    max-width: 100%;
  }

  /* Guarantee bar */
  .vx-guar {
    padding: 24px 0 12px;
  }
  .vx-guar__inner {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  .vx-guar__text {
    text-align: center;
  }
  .vx-guar__seal img {
    width: 90px;
    height: 90px;
  }
  .vx-guar__text h3 {
    font-size: 1.05rem;
  }
  .vx-guar__text p {
    font-size: 13px;
  }
  .vx-guar__cards img {
    max-width: 220px;
  }

  /* Guarantee full section */
  .guarantee-section {
    padding: 40px 0;
  }
  .guarantee-section h2 {
    font-size: 1.4rem;
  }
  .guarantee-subtitle {
    font-size: 20px;
    margin-bottom: 18px;
  }
  .guarantee-section p {
    font-size: 14px;
  }
  .guarantee-seal {
    width: 140px;
    height: 140px;
  }
  .trust-badges {
    gap: 10px;
  }
  .trust-badges img {
    width: 50px;
    height: 50px;
  }

  /* Footer */
  .footer {
    padding: 35px 0 20px;
  }
  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .footer-disclaimer {
    font-size: 11px;
  }

  /* Notification */
  .purchase-notification {
    left: 10px;
    right: 10px;
    bottom: 80px;
  }

  /* Top badges */
  .vx-biggest {
    font-size: 1rem;
    padding: 8px 20px;
  }
  .vx-sat-seal {
    width: 75px;
    height: 75px;
  }

  /* Sparkles shorter */
  .vx-sparkles {
    height: 55px;
  }

  /* Card footer */
  .vx-card__foot-total {
    font-size: 12px;
  }
  .vx-card__foot-total strong {
    font-size: 14px;
  }
  .vx-card__foot-ship {
    font-size: 10.5px;
  }
  .vx-card__foot-guar {
    font-size: 11px;
  }

  /* Security bar */
  .vx-secure p {
    font-size: 11.5px;
  }
}

/* ================================================================
   14. RESPONSIVE — SMALL ( ≤ 400px )
   ================================================================ */
@media (max-width: 400px) {
  .vx-wrap {
    padding: 0 8px;
  }
  .vx-logo {
    font-size: 2rem;
    letter-spacing: 3px;
  }
  .vx-title {
    font-size: 0.88rem;
  }
  .vx-biggest {
    font-size: 0.85rem;
    padding: 7px 14px;
    letter-spacing: 0.8px;
  }
  .vx-sat-seal {
    width: 60px;
    height: 60px;
  }

  /* Card grid tighter */
  .vx-grid {
    max-width: 310px;
    gap: 14px;
  }

  /* Card padding */
  .vx-card {
    padding: 0 12px 16px;
  }
  .vx-card--best {
    padding: 0 12px 18px;
  }
  .vx-card__header {
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
    font-size: 12px;
    padding: 6px 0;
    margin-bottom: 8px;
  }
  .vx-card__ribbon {
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
    font-size: 16px;
    padding: 8px 0;
  }

  /* Prices smaller */
  .vx-card__now {
    font-size: 36px;
  }
  .vx-card__price-row--big .vx-card__now {
    font-size: 46px;
  }
  .vx-card__was {
    font-size: 14px;
  }

  /* Images */
  .vx-card__img img {
    max-height: 150px;
  }
  .vx-card__img--big img {
    max-height: 200px;
  }

  /* Bottles title */
  .vx-card__bottles {
    font-size: 18px;
  }
  .vx-card__bottles--big {
    font-size: 22px;
  }

  /* Perks */
  .vx-card__perks {
    max-width: 180px;
  }
  .vx-card__perks li {
    font-size: 11px;
  }

  /* Card extras */
  .vx-card__guar-line {
    font-size: 11.5px;
  }
  .vx-card__surprise {
    font-size: 11.5px;
  }
  .vx-card__days {
    font-size: 11px;
  }

  /* Card footer */
  .vx-card__foot-total strong {
    font-size: 13px;
  }
  .vx-card__foot-ship {
    font-size: 10px;
  }

  /* Buttons */
  .vx-btn {
    font-size: 15px;
    padding: 13px 8px;
  }
  .vx-btn--gold {
    font-size: 17px;
    padding: 14px 8px;
  }

  /* Security & sparkles */
  .vx-secure p {
    font-size: 10px;
  }
  .vx-sparkles {
    height: 40px;
  }

  /* Guarantee section */
  .guarantee-section {
    padding: 30px 0;
  }
  .guarantee-seal {
    width: 120px;
    height: 120px;
  }
  .guarantee-section h2 {
    font-size: 1.2rem;
  }
  .guarantee-subtitle {
    font-size: 18px;
  }
  .trust-badges img {
    width: 42px;
    height: 42px;
  }

  /* Guarantee bar */
  .vx-guar__seal img {
    width: 75px;
    height: 75px;
  }
  .vx-guar__text h3 {
    font-size: 0.95rem;
  }
  .vx-guar__text p {
    font-size: 12px;
  }
  .vx-guar__cards img {
    max-width: 190px;
  }

  /* Info below */
  .vx-info-below {
    margin-top: 20px;
    padding: 15px 6px 0;
  }
  .vx-checks {
    max-width: 240px;
  }
  .vx-checks li {
    font-size: 11px;
  }
  .vx-sub {
    font-size: 0.78rem;
  }
}

/* ================================================================
   15. A11Y & PRINT
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .vx *,
  .vx *::before,
  .vx *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
html {
  scroll-behavior: smooth;
}
@media print {
  .vx-btn,
  .purchase-notification,
  .vx-sparkles {
    display: none;
  }
}